Notes from UofI Web Con 2015

It’s spring here in Champaign-Urbana, which means it’s time for the Illini Marathon and WebCon.  I didn’t get to participate in the former this year (good thing too because a severe thunderstorm rolled through mid race), but I did go to WebCon.  Here are my (very) rough notes and take aways from the sessions I went to.

Workshop session: Building Semantic & Responsive Grids with Sass & Compass

Ray Villalobos: @planetoftheweb (Workshop outline)

The biggest thing I got out of this workshop session was seeing a new tool set in action.  Having a fake, static site was the perfect platform for illustrating gulp tasks, sass libraries, and javascript animations.  Being able to get the demo running is nice too, though I needed to do this to get the demo fully up and running on my Mac once I cloned the git repo and added the static images:

sudo npm install
sudo gem install susy
sudo gem install breakpoint

Some new libraries to check out:

#statistics on CSS preprocessors at #UofIWebCon

A post shared by Cameron (@natureboy153) on

Opening Keynote – Brad Frost on Atomic Design

Great keynote by Brad Frost (@brad_frost) on Atomic Design.  The idea of identifying the smallest elements on your website and starting with those, then building up more complex units really resonates with me.  He also talked about Pattern Lab, which is another thing I’d like to explore.  Pixo has been moving in this direction, so I found this keynote very affirming.  Finally, I thought this was an interesting quote he had thrown out there:

“Responsive deliverables should look a lot like fully functioning twitter bootstrap-style guides.” – Dave Rupert


For the second session, I attended a talk titled “HTML/CSS/JS – Creating an Interactive Accessible Learning Resource” by Doug Mills of the UofI Chemistry Department.  The problem he was trying to tackle: how do you get students to identify a specific kind of chemical bond (chrial bonds), when there are often multiple right answers.  He links to working examples in his slides.  There were a number of interesting techniques that were new to me First, he used divs, tab-index, and javascript to enable a visitor to use the keyboard to navigate through the chemical bonds.  Then he talked through the various aria attributes he used to improve screen reader accessibility, especially using font-size=.1px to add descriptive text for screen readers, but that is not visible to sighted users.   For the third session, I attended the “Node Tooling” talk.  (slides)  I appreciated the high level walk through of a tool set for a basic project:

  1. Node
  2. Grunt – A task runner analogus to Ant for Java.  Concatenate javascript, css pre-processing, and more
  3. Bower – for managing front end libraries
  4. Testing – jshint, Jasmine, Mocha & Chai, Karma test runner.
  5. Yeoman – tool for creating and managing project template patterns.

I’ve had some preliminary experience with these and I’m looking forward to spending more time with them in the near future.

Closing Keynote – Emily Rawitsch on Designing a Better Process

Emily Rawitsch’s closing keynote hit a lot on communication between the various stakeholders involved in delivering websites (developers, designers, etc).  She emphasized that good designs come from good processes.  I’ve definitely experienced this in my own professional career.  One thing I’ve valued at my Pixo, my current employer, is how developers, designers, and UX will come together to discuss problems and solutions.  We each have different perspectives and I know I couldn’t always do it solo. I wrote down this quote, which I think is important, but often overlooked:

Small details build up and matter. But think about what to fight for and when to let go. We are working towards the same goal: an amazing user experience.

 Other slides

High Performance Javascript Slides

Archive of presentations.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s