Day 2 — SmashingConf Toronto 2019

Arshabhi Rai
Jun 28 · 6 min read

I recently recapped my experience on the first day of Smashing Conference in Toronto, and here’s a summary of Day 2.

Similar to Day 1, the line-up of the speakers and topics were well thought out. The presentations covered trending topics in front-end development, such as service workers, performance, CSS grid, color systems, and component-based development and design. One of the highlights of Day 2 was the mystery speaker, who frankly blew me away by his craftsmanship.

Mystery Speaker: Seb Lester — Peace, Hellfire, and Outer Space

In this talk, Seb Lester shared his love for design, from his early BMX riding days to his unceasing passion for type design, calligraphy, and craftsmanship. An expert type designer, master calligrapher, and a passionate artist, some of his work includes the Intel logo, NASA’s SWOT project logo, and various decorative designs for Apple’s retail stores. Funny, creative, artsy, and a champion designer, I was simply mesmerized by his work and presentation.

Craftsmanship is a cornerstone of great art and design.

Key takeaways:

  • Failure is the key to success. Every mistake teaches us something.
  • Know when to stop and move on. While experimenting with 3D illustration, Seb realized it wasn’t for him and continued with 2D.
  • Experimenting with ideas away from corporate work gave way to more creative, expressive designs.
  • He connected with influential people from organizations such as NASA and Apple, and it wasn’t luck. He had done the groundwork, put in the hours to master his craft— he was prepared for these opportunities.

Resources:

Book: The Graphic Language of Neville Brody

Speaker 2: Jules Forrest — For the Love of the Grid

In this forty minutes sessions, using CSS grid, Jules Forrest live coded and transformed a print-based restaurant menu into a responsive webpage. As a designer, with a keen interest in web development, she started experimenting with CSS grid by converting print-based designs into webpages. Codepen was and is her go-to tool for experiments.

Creativity isn’t necessarily a good thing. Keep common UI patterns consistent to help your users easily navigate.

Key takeaways:

  • CSS Grid can be used for both big page layouts & smaller elements.
  • CSS grids allow you to have overlaps rather than Flexbox.
  • By default, CSS grid will flow elements vertically, while Flexbox will flow them horizontally.
  • grid-column:1/-1; will span all the from left to right without having to know how many columns there are.
  • grid-row:1/-1;will span all rows.
  • Rachel Andrews & Jen Simmons — folks to follow for gird inspiration

Resources:

https://codepen.io/julesforrest/

https://kellianderson.com/blog/ — created Russ & Daughters menu

Speaker 3: Phil Nash —Diving into Service Workers, Live

Phil Nash demonstrated how service worker strategy can be applied to make websites work offline. As he noted, “the best thing about service worker is that we get control over the network and user experience. With that control — and through test-driven development (TDD) and right caching methods — developers can create high performant websites that provide better user experience”.

Never ask for push notification permissions on page load. Give user context for what they are signing up for.

Key takeaways:

  • Make a test fail before you fix it (TDD — test-driven development)
  • Service workers are all async, make them unobtrusive and run in the background
  • Wait until the page is loaded before registering a service worker
  • Using service workers doesn’t require a single page application — you can do it on a straight-forward HTML/CSS website with a little bit of JavaScript

Resources:

Service Worker Mock — https://www.npmjs.com/package/service-worker-mock

Speaker 4: Dan Rose — Seeing the Pages for the Components

How do we use components collectively and cohesively so that it connects and flows well? Dan Rose shared concepts and techniques to identify common symptoms of non-cohesive design and demonstrated how component connectivity could be implemented into a design system. He shared tips and tricks to balance and prioritize consistency over the cohesive design to create a steady visual flow and relationship among all components.

Key takeaways:

  • Building pages with components could result in content that lack strong visual relationships — just stacked components. For example, contrast Target’s simple homepage to Stripe’s where elements overlap and lead the users down the page.
  • Tools such as PhotoShop can help explore phases of design. Take a screenshot of a page and open it in Photoshop to play around.
    — You can use Page Layers to convert a screenshot of a webpage into PSD layers.
  • Work hand in hand with the content team; content needs to drive it.
  • Six simple tricks to design better flow:
    — Share a background to connect two components.
    — Use angled edges and contrast the background with colors, images, or other design elements.
    — Stitch two zones/component together using shapes.
    — Use overlapping design to make the transition more engaging from the first zone to the second.
    — Use alteration to make things clear that they are not only making a page but rather as part of a collection. Balance it out and make it concise.
    — Use the shadow effect to provide a softer separation between content, especially when using cutout boxes to overlap content between sections

Resources:

https://weareadjacent.com/blog/component-connectivity/

Speaker 5: Diana Mounter — The Secret Lives of Color Systems

Color is one of the most critical aspects of any design work, including web design and development. Changing a white background to black, for example — background-color:#ffffff; => background-color:#000000— may seem as trivial as updating the hex code, in reality, it is a lot of work.

In this session, Diana Mounter demonstrated the work behind adding a new feature to offer users the ability to change GitHub’s color theme from white to dark mode. She used a Gatsby app and a sample repository of the GitHub, to demonstrate the process, techniques, and challenges of updating the color scheme of an enterprise-level web application.

People have opinions about colors. Changing color systems is a lot of work!

Key takeaways:

  • Developed and used a comprehensive style guide for building the interface with GitHub’s design system — https://primer.style/components.
  • Avoid using 100% white/black colors, using slightly lighter/darker variations to make it feel more natural.
  • When trying to changing the colors, she realized that some of the hardcoded color values in the component made it difficult for theming.
  • Names should be purposeful, functional, meaningful rather than descriptive of the color.

Resources:

Speaker 6: Scott Jehl — Move Fast & Don’t Break Things

A popular term in all the presentations this year was “performance.” It is one of the many reasons organizations migrate their website from content management systems (CMS) such as Wordpress to more resilient tools such as static site generators and Netlify. However, web performance is still a common challenge, especially with requirements for consistent design across a plethora of devices and browsers, with the added predicament of varied network speed.

In this forty minutes session, Scott Jehl talked about existing issues in web performance and shared strategies and techniques — such as progressive enhancement — that he implemented for his clients to overcome this common challenge. Progressive enhancement is an approach to web development that helps to build a high-performance website regardless of network speed and device type.

It’s easier to make a website fast than to keep a website fast.

Key takeaways:

  • Trying to make a website work & look the same across so many different devices isn’t the right approach — instead, we need to cater to the diversity.
  • We can’t assume that everybody is using the latest and greatest smartphone.
  • To improve rendering user tools such as server push and the new http2 protocol, or even inline CSS.
  • Inline CSS is useful if you have a large CSS file. Identify and inline the CSS necessary to render “above the fold”.
  • As network speed increases, performance shift from network to devices. This can be challenging if devices are not the latest or contain the latest tech.

Resources:

Day 2 ended with a Photo Walk, which we missed, but here is a photograph of the “Smashing Family”. Smashing Family, thank you for a great event!

Arshabhi Rai

Written by

Tech Writer | Web Developer | Love Beautiful Designs

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade