Day 1 — SmashingConf Toronto 2019

Arshabhi Rai
Jun 26 · 6 min read

I was stoked to attend the SmashingConf in Toronto this year. The conference venue was at the perfect location, TIFF Bell Lightbox, right at the heart of downtown Toronto. The event was scheduled to start at 8:30 a.m, but my colleague, Blaine Hussey, and I were so excited that we reached TIFF around 8:00 a.m. and waited anxiously for the doors to open. You can see how happy we were when we got our name tags and all those SmashingConf swags.

For Day 1, seven speakers were allocated forty minutes each to deliver their presentation. The presentations had the right mix of hands-on code demos that covered front-end code architecture, VUE application, and animation, as well as talks on inclusive design, and digital policy and standards.

Speaker 1: Brad Frost — Let’s build a Design System

In this session, Brad Frost discussed and showed how to build a design system. In his demo, he used a static generator tool called patternlab.io and Story UI to develop a design system’s front-end component. He shared some great ideas about front-end code architecture, modular development, and component reuse.

Key takeaways:

  • You should design systems through the lens of your software. In my recent experience re-designing Solace’s documentation site, it was critical to design and code through the lens of the software we use, which also included any third party software that we wanted to integrate.
  • Having reusable components is paramount in the design system workflow.
  • Create a common pattern/language/convention for all stakeholders to share.
  • Create a consistent API code convention.

Resources:

http://bradfrost.com/blog/post/a-frontend-workshop-environment/
https://patternlab.io/
https://storybook.js.org

Speaker 2: Sarah Drasner — Let’s write a VUE App from scratch

In 40 minutes, Sarah Drasner showed us how to build a functional application with routing, server-side rendering, and animations using Nuxt.js and her VUE snippet extensions. I was quite intrigued by the way she used her custom VUE snippets and other tools such as CSS Grid generator, that she had developed herself, to speed up her workflow. Very cool!

Key takeaways:

  • Use snippet generators to speed up your workflow.
  • Use a flex grid generator as a shortcut.
  • Nuxt version2.6 will polyfill fetch for you. No need to include axios.
  • Be mindful of what API data you want to store in Vuex.

Resources:
https://hub.github.com/
https://github.com/sdras/smashing
https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets&WT.mc_id=marketplace-pack-sdras
https://cssgrid-generator.netlify.com

Speaker 3: Phil Hawksworth — JAMStack: Silly Name. Serious Stuff

In this session, Phil Hawksworth demystified what the term JAMStack means, talked about the p̶e̶r̶f̶e̶c̶t project timeline, and stressed on the importance of simplifying the technology stack. In his demo, using Sarah’s newly created repo, he demonstrated how webhooks and APIs could be used to trigger events, generate notifications, and create an automated development environment.

In simple terms, JAMStack means: Javascript, APIs, and pre-rendered Markup served without web servers. Simplifying the technology stack leads to shorter development cycles and creates better performance and security.

Key takeaways:

  • Simplify the technology stack.
  • Static sites are meant to be portable. You can take them to different deployment services without too much modification.
  • Webhooks can automate the deployment process by triggering an event when something happens.
  • Automate as much as you can; set it and forget it! Every time an event is triggered, the build automatically kicks in.
  • JAMStack does not need servers and runs on a continuous integration model. Architecture shouldn’t dictate the experience. Static sites can feel just as dynamic as a traditional site rendered from servers.

Resources:

https://surge.sh
https://netlify.com
https://jamstack.org/

Speaker 4: Jenny Shen — Building Bridges, Not Walls; Design for users across cultures

How do cultural differences affect product design? Jenny Shen shared her experience designing products for users in Europe, the Americas, and Asia. As she truly said, it is no longer enough to have language translation for international users and expect it to be inclusive. We must be aware of, recognize, and understand the full range of human diversity and requirements concerning language, culture, religion, habits, and other forms of social differences. Understanding different cultures mean personalizing to their preferences to increase trust and engagement; this can mean adding/modifying/removing details as necessary.

Key takeaways:

  • Design patterns that are familiar to us may not exist in other cultures. For example, some cultures may not understand or commonly recognize the hamburger menu.
  • Be sensitive to what might be taboo in other cultures.
  • Diversity within the team increases cultural awareness of the organization.
  • Conduct research in the local language.
  • It is no longer enough to only have language translation; the product must be designed in such a way, so that meets and recognizes cultural differences.

Resources:

Speaker 5: Chris Gannon — Make it move! Create a Web Animation from scratch

In about forty minutes, Chris Gannon coded an SVG and JavaScript animation, and walked us through the process of creating, structuring, correctly export SVG code, and cleaning the code after importing it into the project. It was fascinating to see the decisions he made as he coded and how even the smallest detail in code can have a significant impact on the overall design. Unlike me, he wasn’t a big fan of CSS and used JS with SVG to create the entire animation.

Key takeaways:

  • Use “classes” instead of “ids” to avoid the need to make unique names
  • When using Illustrator:
    — Export SVG from Illustrator using asset export, NOT save as. Alt + click exports all layers together as a group.
    — Remove unnecessary groups and tags.
  • If you have a number of elements in a group that have the same fill or stroke attribute, you can remove it from the individual elements & apply it on the group instead.
  • Creating a loop animation requires two elements: one coming in and one going out
  • Use different easing options, easeIn or easeOut, to make the animations feel more dynamic & natural.

Resources:

https://greensock.com/
https://github.com/chrisgannon/ScrubGSAPTimeline
https://greensock.com/drawSVG
https://codepen.io/chrisgannon/details/WBjBXy

Speaker 6: Kristina Podnar — Help! I’m your ailing website. The Digital Policy & Standards Rehab Hour

Often ignored and overlooked by designers and developers, being compliant to digital policy and standards plays a vital role in creating a functional, usable website. In this session, Kristina Podnar talked about some common issues and challenges that a website faces, and how one can leverage policies and standards to enhance the overall website health.

Key takeaways:

  • Have an up-to-date Privacy Policy, GDPR, and copyright.
  • Roles:
    — Digital Policy Steward: Person often organizing documentation, making sure others know where to find this information
    — Digital Policy Author: Often, a developer or designer. Actively creating and contributing.
  • Make the steward a role, not a person — a person will eventually leave.
  • You can’t manage what you don’t measure. Having metrics allow you to track how website compliance with policies and standards.
  • Balance accessibility and budget — for example, WCAG 2.1AA is much more affordable to implement than 3A.

Resources:

Book — The Power of Digital Policy

Speaker 7: Steven Hoober — Authentic Digital Design, By The Numbers

Steven Hoober discussed in length some of the usability issues and challenges when designing for mobile devices. With all the new design trends, we often miss the fundamental principles of how people look, see, touch, and expect their mobile devices to work. It is essential to understand how the variety of mobile devices are used and in what situations; where on the screen should the information display and the type of information — for example, primary, secondary, and tertiary information. The information can be designed and architected based on the type of content, relevance, and importance.

Key takeaways:

  • On mobile devices, people don’t start at the top and read down. They often begin at the center of the screen then work their way outward.
  • Think about tap targets in terms of probability, there will be some misses, and accuracy is highest in the middle of the screen.
  • Functions:
    — Primary info: in the center
    — Secondary info: actions along the edge
    — Tertiary info: behind menus
  • Menus are okay if you use them right!
  • Centring list items are always wrong.

Resources:

http://4ourth.com/downloads/Hoober-AuthenticDesign.pdf
http://4ourth.com/downloads/Hoober-Authen

http://4ourth.com/Touch
http://4ourth.com/Training

I am looking forward to Day 2 today. Watch this space!

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