SmashingConf SF 2019
Day 1, April 16th, 2019 

https://smashed.by/sf1
—

Hello friends! :)  Howdy!

Let’s take notes together.

Please be cool and friendly.

Notes from Day 2: https://smashed.by/sf2

Where are you from?

 

🇲🇽 Monterrey

Monterey, CA

🗽🏴󠁵󠁳󠁩󠁮󠁿

Fayetteville, AR

Baltimore, MD 🦀

Tucson, AZ

DENVER! Go, Transamerica !

Emeryville CA

Portland, Oregon

Vancouver, WA

Kyiv, Ukraine x2

Rivne, Ukraine хей давайте знайдемось =) Davai :)        

Moscow, Russia

Berkeley, CA (just across the bay) x 3

El Cerrito, CA (also just across the bay!)

Raleigh, NC

Edinburgh, Scotland

Sacramento, CA

San Francisco, CA +3

Reno, NV

Lubbock, TX

Los Angeles, CA

San Diego, CA

Canada eh +1

Vancouver, BC  🇨🇦 +1

Victoria, BC  🇨🇦

Calgary, AB 🇨🇦 +1

San Diego, CA

Atlanta GA

Emeryville CA

San Diego, CA

Boston, MA

Columbus, OH 🇺🇲

Cincinnati, OH 🇺🇲

Brooklyn, N

Palo Alto, CA

Perth, Australia

Madison, WI

Minneapolis, MN

Oakland, CA

Grand Rapids, MI

Rockwall, TX

Miami, FL 🇨🇺

Chicago, IL

Toronto, ON 🇨🇦

Johannesburg, RSA

Dallas, TX

Brussels, Belgium

Chattanooga, TN

Seattle, WA

Medford, Oregon

Munich, Germany

Santa Cruz, CA

Bradley Beach, NJ

Detroit, MI

Scottsdale, AZ

Boise, Idaho

Minsk, Belarus/Minneapolis, MN

Kenosha, Wisconsin

Denver, CO

East San Jose, CA

Louisville, CO

Bogotá, Colombia

Dover, NH

Stockholm, Sweden

Singapore

Gothenburg, Sweden

Phoenix, AZ 🦞

What did you have for breakfast?

🥑 toast

🥓

☕️

🍳

Honey Honey Creperie CREPES!

🥚and almond croissant

Bagels

Pancakes

Sleep

Egg tart from Chinatown

Protein bar

Bacon, egg and cheese burrito :)

Homemade bolognese from Italian Homemade Company 😍#leftovers

 

If you have better notes you would like to share post the links here:

Who did you want to be when growing up?

Astronomer

Wizard +1

Dancer

Astronaut

A super powered engineer who rides dinosaurs in space

Journalist

Brad Frost +2

Indiana Jones

Weatherman

Care Bear

Dragon Rider

Cartographer

Librarian x2

English Teacher

Webmaster

Firefighter

Journalist

Actor

Do you like cats?!
Please follow my cat on Instagram @izzygoocat 

What is the name of the Smashing Cat character??

I stopped liking cats after watching Pet Cemetary last weekend

Where are you from?

What did you have for breakfast?

If you have better notes you would like to share post the links here:

Who did you want to be when growing up?

Do you like cats?!
Please follow my cat on Instagram @izzygoocat

09:50 — Brad Frost on Let’s Build a Design System!

10:40 — Sara Soueidan on Building Accessible Interfaces: Patterns and Techniques

Accessibility Insights for Web - chrome extension

12:00 — Anna Migas on Effortless Performance Debugging

]12:50 — Darin Senneff on Animating with Emotion

15:10 — Steve Schoger on Refactoring UI: Practical Interface Solutions that go a Long Way

16:00 — Jennifer Brook and David P. Simon on Yes, And? — How to use the Power of Facilitation to Align Minds and Include People

17:20 — Chris Coyier on How to Think Like a Front-End Developer

09:50 — Brad Frost on Let’s Build a Design System!

Brad Frost is a web designer, speaker, writer, and consultant located in beautiful Pittsburgh, PA. He is the author of the book Atomic Design, which introduces a methodology to create and maintain effective design systems. In addition to co-hosting the Style Guides Podcast, he has also helped create several tools and resources for web designers, including Pattern Lab, Styleguides.io, Style Guide Guide, and This Is Responsive.

——–––––

Build a design system in less than an hour? That's crazy. But not entirely impossible. In this session, Brad will demonstrate how to use Pattern Lab to simultaneously build both a design system's front-end components and several screens of a real pilot project.

Throughout the talk, he'll discuss topics like front-end code architecture, designing in the browser, modular development best practices, designing with dynamic data, and more.

——–––––

Questions:

  • How do we measure if a design system is effective? Case studies? KPIs?
  • What's your process? Where do you start when working on a design system? How do you provide alignment in the team?
  • What features could design systems benefit from? Examples in context/tags?
  • Could every project benefit from a design system? Is there any site too small?
  • Design systems keep growing: dealing with voice, animations, voice and tone
  • What has made design systems blow up recently? Does it have anything to do with component-driven development?
  • What's the next big step in design systems in your opinion?
  • Handoff: from development to design; what's best/most efficient way, and what tools do you use?
  • Do you use a BEM class structure?
  • In terms of style hierarchy/context, do the atoms drive the styles with overrides happening at higher levels? Do you create different atoms for different contexts?
  • What is the difference between the storefront  environment and just your dev environment?
  • Is there a difference between Storybook and PatternLab?

Notes & key takeaways:

  • What’s a design system? The official story of how your organization does design and development. story has a lot of ingredients, documentation, design token, design principles
  • Reusable UI components in Pattern Lab to power the UI. eg Etsy, green peace, Amazon
  • Build your design system through the lens of real products
  • Change one component in a centralized location and roll it out to all other places
  • Build real components and simultaneously build up a library. Maybe 120% effort the first time, but saves time later when you need to churn out designs for different platforms/media rapidly.
  • Simplify dev environment by authoring UI code outside of application environment in dedicated “workshop” env
  • Pattern Lab - https://patternlab.io/
  • Organize components from smaller to larger with smaller components comprising the larger ones. (Example: Atoms, Molecules, Organisms, Templates, Pages). Atomic design is just a way to think about sizes of components, and easy to label/add/delete both visual and code files.  Call it whatever you want.
  • 
  • CSS class fpo = “For placement only”
  • Goal is to have useful and thoughtful conversations with stakeholders about what we want as a business and what is useful for the user, including mobile views, at Day One.
  • It doesn’t have to be perfect - build and iterate

Links & Slides:

  • Where to out one-off components
  • With every new thing that you’re on the hook to produce, you continue to feed the design system. A cycle between the system and the product it serves. doing all this work at the same time - not a standalone project. take advantage of the work.
  • pilot projects - how can we use those projects to build and extend our system?
  • pattern lab gives you a paper trail - says, here’s a component. if you change it, what’s affected? lineage feature - this pattern is included in the following patterns (and lists them out).

        

 10:40 — Sara Soueidan on Building Accessible Interfaces: Patterns and Techniques

Sara Soueidan is a Lebanese freelance front-end UI/UX ‘developer working with companies across the globe, building clean, responsive front-ends for Web sites and applications focused on accessibility, progressive enhancement and performance.

She also runs workshops on front-end development and writes technical articles on her blog and for various big publications.

——–––––

When building interfaces, often we think about making them accessible when it’s just a bit too late. What about baking accessibility into the front-end development from the start?

In this session, Sara will be building and refactoring common UI components, and share a couple of techniques she often uses to build with accessibility in mind. Even though she will be building only as many patterns as the time allows, you’ll leave with many small but important and impactful strategies that you can apply to many other UI components, as well as to your design process and coding. From this sweet series of mini component-level case studies, you will learn how to think, and code, accessibly.

——–––––

Questions:

  • Why would you use aria-label instead of aria-labelledby? My understanding is the browser won’t translate an aria-label value but will translate the HTML element that an aria-labelledby is pointing to.
  • If you have an accessibility attribute that needs to be toggled with JS (ie “hidden”), what happens if JS is disabled? Then it breaks.  Try making the default in accessible state.
  • If you’re making a website for IE11 - does that change how accessible we can make our sites?
  • Why is inert is preferred over tabindex with a JS focus trap? E.g. for a modal.
  • How do you go around debugging CSS
  • Do we need role=”navigation” for <nav>, too?
  • How do you organize CSS?
  • BEM/SMCSS/Atomic CSS?
  • What’s the strategy for building layouts today — CSS Grid first, Flexbox first? What about fallbacks?
  • Do you build the CSS mobile-first? Do you have a general rule of thumb for whether or not to build your css media queries mobile-first, or is it case-by-case?
  • What are good resources how to develop websites AA/AAA compliant from the start? E.g. http://www.a11ymatters.com/patterns/
  • SVG gotchas that took you a while to wrap your head around
  • What are you most excited about on the web these days?
  • Why use aria-label? When would you not need to translate text?

Notes & key takeaways:

  • Accessibility is not hard unless you try to bolt it on, and have to refactor your code. Beware of 'accessible' code which might still have accessibility problems -- need to check for more than screen reader (SR).
  • Accessibility and hidden content.
  • Clip path: inset(100%)
  • Opacity: 0
  • Visibility: hidden - don't use if you want SR to read it
  • Display: none  - don't use if you want SR to read it
  • The hidden HTML attribute is equivalent to display: none. Content hidden from view AND assistive tech
  • The aria-hidden attribute hides the element ONLY on assistive tech (when set to “true”). Prevent two tab stop by setting focusable to false
  • Sr-only to hide elements but still show to SR
  • Clip: rect(0 0 0 0)
  • Eg Burger menu without label (an icon-only button)
  • Think : how to let SR know? Use Sr-only for label and focusable = false
  • When you have an element which controls another element, eg button controls expand/collapse of menu , use aria-expanded, or aria-controls
  • Aria-expanded assumes the element with the attribute contributes its next sibling. If this is not the case, aria-controls can be used to identify the element that it controls
  • Use html landmarks so that SR users can use rotor to jump to the big sections of the page.
  • Inert attribute - hide element from tab order temporarily.  Easier than redoing tab index.  Only works for Chrome and Edge.
  • How to make SVG accessible? Add role and aria-labelledby (use a var for text, useful for translation), or aria-label (directly insert text, when you are limited to this element, or when lazy) (aria-label is not translateable)
  • Checkbox eg ☑️todo list item which changes the SVG on checked
  • Remember to do :focus style
  • If you want to hide a switch , remove it from flow, change the height and width of checkbox to 1em, set opacity to zero. This will make it exporable by touch.
  • Accessible toggle
  • Putting your inputs inside of their <label> eliminates the need for the for attribute
  • :focus-visible selector only targets elements when focused with your mouse. Using :focus:not(:focus-visible) allows you to only add a focus indicator when using the keyboard
  • Also allows you to undo the styles you set up for keyboard-only focus when using mouse
  • role=”switch” changes the way it is represented in accessibility tree and the way a screen reader announces an element and will announce the state of the switch as either “on” or “off”

Links & Slides:

12:00 — Anna Migas on Effortless Performance Debugging

Anna works as a Front-end Developer and Designer at Lunar Logic, the no-management software house based in Kraków, Poland. She is always trying to find ways to make people fall in love with coding and has a long history of organizing coding workshops for WebMuses and Rails Girls.

In her spare time she is into skateboarding, travelling and reading sci-fi and fantasy books.

——–––––

The website is already live. You are really proud of how it turned out, but then you notice that something is off… After some time you realize that the problem might lie in performance: things take too long to load, there are moments when you see awkward content jumps and at times scrolling feels painful. Sounds familiar? This talk is for you.

During the session we will talk about the causes of painful performance and look into simple and actionable steps how to make a website more performant with a little effort. Most of the examples will be based on a real-life debugging experience. We will dive into the undiscovered areas of Developer Tools and into the basic performance auditing. I will help you understand how browser rendering works and why it can be one of the causes of flawed interaction performance. To leave you with some ideas about where to start your debugging, I will also provide you with examples of UI patterns that are bound to slow down your experience, if implemented incorrectly.

Questions:

  • Does using <link ref=”preload” as=”font”> have any benefits for email design/development when using linked fonts?
  • Is it better to load fonts in the markup so that you can add all the cool attributes verses loading them via CSS?
  • Image lazy-loading with placeholders css-hack vs progressive jpeg?
  • Are there times when performance is at odds with other goals of a site?
  • The perf tab is so intimidating!
  • Blocking assets, defer, comparing audit
  • Text anchoring for loading images
  • Can you go over the last step you did while using the Chrome Dev Tools Audit tab?
  • Lazy loading! Download script at all later?
  • Webassembly, when to use/when not to use?
  • Lazy loading now available in Chrome[a]: what's next?
  • Browsers expose more and more internals to tweak things. Where will it lead us to?
  • Is performance optimization even possible without webpack these days?
  • What's your strategy for choosing the right framework for the job?
  • Should every website include a service worker to cache assets these days?
  • Communication in teams: how can we make it better?
  • What are some of the common performance bottlenecks you see appearing over and over, and how would you deal with them?
  • What's your tooling in general and how do you go around debugging? Any trade secrets you can share?
  • What's the difference between performance tab and audits tab → performance?
  • What about performance issues out of developer control (tagging, 3rd party scripts, GTM, ads, etc). Pre 3rd party stuff our apps are 90 PSI, after we’re 32
  • How do you balance business vs. performance? UX vs. business
  • Isn’t z-index the same as using willChange for layering ? Which is preferable ?
  • Isn’t transform better because it uses GPU vs CPU?
  • Lazyload images with Service Worker: http://jdlrobson.github.io/serviceworkerimagelazyloader/
  • Tools for automated interaction/run-time performance? Most tools focus on page load.

Notes & key takeaways:

  • Toggle performance using Google Chrome DevTools to get a sense of what your site/app looks like “in the wild”.   Check first meaningful paint. Check data load under Main
  • Chrome dev tools →  Audits → performance, applied fast 3G
  • New attribute shipping in Chrome in May: ‘loading’
  • Chrome dev tools → network.  Eg Taking long to load because images and large script loaded before text. Try blocking script and test. Can <script defer ...>past onload.
  • Pull text load up front.  @font-face { Font-display: swap ...} will use a fallback font for first paint, then swap in the font when it is ready
  • Preload font.  <link rel="preload" as="font" type="font/woff2">
  • Manual text anchoring to account for images loading after text:
  • Give the container for the image(s) styles that are a function of the “intrinsic ratio” of the image (the ratio of width to height)
  • Critical rendering path (above the fold)
  • When page is not smooth, it's the code's fault, can't blame network. 60fps = 16ms per frame (and give it more time to clean up junk). Have to recalculate layout, page, compositing changes (least CPU).  To see, Audits tab → rendering → paint flashing. Performance tab → 6x slowdown, and look for red triangle on events bar.
  • Will-change CSS property set to “transform” will put an element on a separate layer, preventing other areas of the page from being re-painted for a transformation to the selected element
  • Layers - shows how elements stack on top of each other (like photoshop) . each layer takes CPU and users with less CPU may experience browser crashes.  3-5 layers is a good number.  
  • Interaction optimisation such as hover effect, don't use display none, overlay.  

     

Links & Slides:

]12:50 — Darin Senneff on Animating with Emotion

Darin Senneff is a freelance designer and developer based in Brooklyn, NY. With a background in design, development, and animation, he marries the visual and technical worlds to create experiences that are innovative and emotional (and sometimes even a little bit weird). Formerly the Director of Design at Column Five, and Art Director at Blueprint Interactive, Darin now works with startups, tech companies, and agencies to create fun and usable interfaces.

——–––––

Animation on the web can be one of the most powerful tools in a creator's toolbox. It can help users to understand changes in context, visualize content or data in easier ways, reinforce actions, and countless other benefits. But one aspect that can make your users' web experience way more memorable is to use that animation to help them feel a sense of emotion (the good kind)!

In this session, we'll build a FUNctional page together with a variety of animated techniques. Learn how to move from design to code, adding in motion and timing, all while giving our users that elusive serving of delight that they didn't know they needed!

Questions:

  • Anyone know what example Vitaly was referring to regarding Darrin’s animation experience?
    Here:     https://codepen.io/dsenneff/details/2c3e5bc86b372d5424b00edaf4990173 ohhh! I’ve seen that, thank you!!
  • Does the library allow for ease in / ease out functions?
  • Have you used / do you recommend after effects + lottie?
  • Why not use Adobe Animate?

Notes & key takeaways:

  • Examples of designing with emotion:
  • TurboTax: as user’s refund total is calculated, it counts up. Feels rewarding
  • Duolingo has a mascot which pops in sometimes to encourage you.
  • MailChimp a High Fives acknowledges the pain of going through the setup.
  • Tricks
  • Keep people abreast of wait stages
  • Storyboard in illustrator. Use SVG if possible because they are small and vector graphics allows designers and developers to use the same format.
  • Give specific layers name → export with IDs
  • Export → Export for screens → artboards (select the artboard that has all consolidated layers), SVG; Format Settings: presentation attributes, layer names, no minify.
  • When copying a path in Illustrator, it turns it into svg directly that you can paste into a new file
  • Make all IDs vars var smile = document.getElementById('smile');
  • Animation library GreenSock
  • TweenMax 
  • New TimelineMax, start on paused state, repeat:-1
  • TransformOrigin sets the 0,0 of transform on object, then applies the transform.
  • Tween .to(smile, .5, {scale 8, x:20, y:35, rotation:"20deg"}, "0"); //element, duration, transform, ?
  • DrawSVGPlugin - makes it appear as if it’s being drawn
  • MorphSVGPlugin
  • How to start? Deconstruct other's animations.  Green sock have good tutorials.

     

Links & Slides:


15:10 — Steve Schoger on Refactoring UI: Practical Interface Solutions that go a Long Way

Steve is a multidisciplinary designer from Canada where he runs Duke Street Studio, an independent design and illustration studio. Steve is one half of Refactoring UI, a project started with Adam Wathan to help developers get better at designing awesome UI’s. Through a series of blog posts, screencasts, and Twitter tips, the duo have demonstrated that design can be taught with tactics instead of talent.

——–––––

In interface design, little details make all the difference. Sometimes an interface looks complicated, clunky, boring and difficult but it seems to be very difficult to point out why it’s like that, and how we can improve it. Often just a few minor touches are enough to turn a seemingly complex design into a straightforward one. In this session, Steve will be providing strategies and techniques to achieve just that — refactoring live, on stage.

We'll be looking at a poorly designed UI and will be redesigning it, while looking at common issues faced by designers and developers regularly — from colors and borders and icons to box-shadows and tables and price labels. By the end of the session, you’ll see what a difference a few small changes can do to bring a design to the next level.

Questions:

  • Won’t having text color the same as background affect accessibility, for contrast ratio ? Plus, wonder how it will work in high contrast mode.

Notes & key takeaways:

  • Make text always legible on dynamic background.  Grey scale, oversaturated, blend with bold contrasting colour.  Use landbook and dribble for inspiration.
  • Pop nav bar, balance and associate with headline.
  • De-emphasise the subtext.   Rather than grey, match it with the background.
  • Clean up input fields.  Make input larger.  Distinguish white input against white background.  Add icons for visual interests, but don't remove text like input labels.  Balance weight and contrast between heavy icons by making icons colours softer.
  • Bring brand colour into design and overwrite browser default. eg radios, drop down chevron.
  • Labels are in support of value, so de-emphasise with a smaller font size.
  • Balance out negative space.  Bring in another (brand) colour, but make sure to correct for accessible contrast.
  • Create visual divisions/pop with border, by overlapping other elements, give depth with box shadow.  Have multiple size shadow for large panels or small elements (cf shadow from direct light source vs ambient).
  • Tables. Use alignments Instead of using CSS to give a photo a blending mode, use something like Sketch or Figma due to limited browser support. This gives more freedom for high impact & high contrast images        
  • Colorize background images to make the contrast with text consistent
  • Use a lighter shade of the color used for the background to de-emphasize text rather than adding opacity or using a grey color. The inverse can also be applied to achieve nice contrast for emphasizing.
  • For icons, use a lighter color than accompanying text to counteract the unbalanced feel of an icon that is larger than the text
  • Consider using multiple shadows to bring more depth to elements. Example: A darker, smaller shadow and a lighter, larger shadow simulate the real-world shadows created by ambient light and direct light, respectively
  • Tables.  Use alignments. Support content rather than stealing focus eg bold uppercase + letters spacing.
  • Consolidate columns if possible. De-emphasise some data with lighter font.  Add visual interests with icons. Give secondary treatment on defusing buttons.  
  • Use zebra striping rather than harsh lines to delineate rows.
  • Underline style for links not always pleasing, so use consistent link icons to denote links.
  • Clean up layout by aligning cards.  Don't necessarily need buttons on cards if they are clearly clickable. Remove obvious information eg don't need website label if it is clearly url. Separate data with light background.
  • Use colour to enrich data. Add colour badges. Looks more interesting, add severity.
  • Switch to contrasting colours to denote separate sections.
  • Big footers good as "catch all". Consistent treatment as other headings on page.
  • Borders sort of associate different elements without strictly containing them.
  • Saturate grey with some cooler/warmer colours to change temperature.
  • Font choice. Look for inspiration, learn more from the foundry, choose something clean but slightly different from default to make site stand out.
  • Only get to micro animations when working with developer
  • Beginner mistake?  Starting with too little space.  

     

Links & Slides:

16:00 — Jennifer Brook and David P. Simon on Yes, And? — How to use the Power of Facilitation to Align Minds and Include People

Jennifer is a staff design researcher at Dropbox where she helps teams discover and solve meaningful problems through the power of fieldwork, facilitation, co-creation, and visioning.

Over the past 10 years, she's worked with organizations like Art+Feminism, The New York Times, Apple, Vice, and O'Reilly to redesign existing products and invent new ones.

She loves riding funiculars, ferries, bicycles, and her Vespa. 🛵

——–––––

David Peter Simon is a design researcher on Dropbox Paper, where he helps designers envision experiments and product managers answer roadmap-defining business questions. Before Dropbox, David worked as a consultant in 12 countries on 6 continents, with clients including Amnesty International, Standard Bank, GUCCI, hepsiburada, UNICEF, and the UK government. Outside work, David enjoys surfing small waves, cooking with a glass of wine, and playing peek-a-boo with his niece.

——–––––

Within a context of continual change on our teams, projects, and within our work, how do we build trust, design alliances, and navigate conflict? How can we work with teams and within organizations to transform knowledge into action? How do we cultivate a shared understanding about a problem space and align groups to make key decisions?

Facilitation is powerful skill in design. In this talk, we’ll spark within you a love and appreciation for facilitation, demonstrate hands-on ways to try it out, and share with you how facilitation can be practiced to create a more equitable and inclusive culture at work.

In this talk, you will —

  • Practice creative skills needed to facilitate healthy team dialogue and align a group
  • Learn how to incorporate reflection into any design process or project for the sake of shared learning
  • Understand how to “see” and work with power and within power structures in ways that benefit the collective
  • Leave with a list of resources if you want to learn more

——–––––

Questions:

  • Would you recommend culture kits for cross-disciplinary teams such as marketing/legal?
  • Do these processes help improve contentious team relationships?
  • How do facilitation systems such as LUMA interact with this?
  • Why those 6 specific animals?  Bringing animals invite projections of very visual metaphors.
  • Where to start to change culture?  Build individual connections, help understand grounding of individuals and then have allies in teams. Invite friends to practice.  Build a culture which acknowledges that everyone has a voice.
  • We enjoyed the facilitators live mic discuss during the session - we in the lobby watching the tv feed heard it clear as day - awesome!!! Everyone wants the harmonica
  • Structuring local and remote conversations. Have extended team.  

Notes & key takeaways:

  • Facilitation can create inclusive aligned cultures.  Facilitation is powerful 
  • Facilitation is deep. Deep belief in wisdom of people. Listen openly.  Power of groups and teams.
  • Michael Doyle - sees facilitation as a constellation of ingredients
  • Deep belief in the creativity of people
  • Build inclusive culture
  • How Jennifer and David use facilitation practice in their work
  • Stand up/sit down - Dropbox design team used this same method at their office to build inclusive culture. 50% women but decisions don't align.
  • Cupcake.
  • Belief we can and should experience joy, delight, and purpose at work
  • People experience delight and joy in their work when they feel supported and inspired
  • Understand unique contributions, environment, context.
  • Use games to explore opportunities and metaphors.
  • Meet people in their own environments.  Invite many teams in an open  space and conversation.  Bring stories from physical and digital worlds.
  • Use play to neutralise power and talk about future/hypothetical.
  • Democratisation of ideation
  • Superpowers
  • Deissue individual identities and reissue each with super powers to explore new ideas.
  • Qualities of teams which work well and productively together.  Observe and interview teams.
  • Making their own group norms and social constructs, shaping their own culture. Co-define how they want to work with each other. Toolkit.
  • Let’s try it
  • Listen for David's values. Ask open ended questions.
  • Storyteller and listener. Pick an animal.  Use others eg Lego, toys, if animals are not culturally relevant.
  • Shared agreements. Be generous with each other.  Tell them what you need.  Have fun.
  • Reflect.  What do their value? What do you value? What values do you have in common?  
  • So what?
  • Create a culture which is participatory and inclusive.
  • Doing a scary thing like initiating conversation. Hosting participatory workshop.
  • Make and shake your own culture and create safe spaces.
  • Best way to make best products is to include others, to mindfully include everyone in the process. Design the inclusive culture which creates the inclusive products.  
  • Bring a spirit of play and design team participation.
  • Whether it’s the way we accommodate different learning styles or how to include remote pax in a meeting or how to draw out quieter voices in a brainstorm - all details matter because they impact greater decisions we make, what features we prioritize

     

Links & Slides:

17:20 — Chris Coyier on How to Think Like a Front-End Developer

Chris is a web designer and developer. He created and runs CSS-Tricks, a website all about building websites, now going strong for 10 years.

He is also the co-founder of CodePen, a playground for front-end web development. It’s a social development environment for front end designers and developers.

Chris has spoken at events and given workshops all over the world, as well

as written two books: Practical SVG and Digging Into WordPress.

https://chriscoyier.net/

——–––––

The job title front-end developer is very real. Job boards around the world confirm that. But what is that job exactly? What do you need to know to do it? What do the people that are very good at it think about how and why they do their work?

We’re going to go through a journey through all of this, not just for the sake of it, but because we’ll learn how we can be better at our job by understanding how other people are good at theirs.

We’ll also get into the idea that front-end development might be going through a bit of an identity crisis with the front end becoming home to more and more complex technology.

——–––––

Questions:

  • Ethics: more conversations about React/Angular than accessibility and privacy / Education / Hiring issues
  • Complexity / Fragmentation: was much easier earlier? / coining people / Learning curve steep
  • Chris, how to think like a front-end developer?
  • WebAssembly: when to use and when not to use
  • Web Components: what's the deal, and what will happen next
  • When would you use React/Vue/Angular/none of them does it matter? Recent article about a developer who built her entire website just with HTML/CSS, without preprocessors or postprocessors or build tools and people went nuts about it
  • How would you define a UX engineer vs frontend (lol) developer?
  • CSS Houdini? Is it the future for CSS?
  • So who would have the visual creativity? UX engineers or Javascript engineers? From my understanding an UX engineer would do the visual creativity, but then what would a Javascript engineer focus on in the front end?
  • Why is backend one word but not front end? :) +1

Notes & key takeaways:

  • Front-end is an adjective.  Two words, hyphenated, adjective, not noun.  
  • Chris likes to refer to front end as...
  • I work as a front-end developer (compound adjective)
  • I work as a front end developer
  • I work on the front end
  • Anyone got a picture of the front-end/frontend slide? :P
  • Eric Meyer CSS zen garden.
  • What is a front-end developer?
  • Soft skills
  • Can you write a coherent email? Do you know how to use video calls?! Can you collaborate with team members like designers, product, and support?
  • Core skills: the languages you were hired to do!
  • HTML - structured content, semantics, accessibility
  • CSS - Design, layout, typography, interaction, accessibility
  • Javascript! - functionality, interactivity, accessibility
  • Accessibility is not an afterthought and is part of the work you are hired to do
  • Mina Markham: Deals with what you can see and interact with on an interface
  • Trent Walton, thinking/living in the browser
  • Care about the browsersssss.
  • Care about the users.  Monica Dinculescu.
  • What do you need to know?
  • Foundational skills.  Writing.
  • Soft skills.  Team work.
  • Core skills.  The language you need to strongly  understand so that you can read, write and maintain them. HTML, CSS (layout, design, typography, interaction, accessibility ), JavaScript (Functionality, interactivity, accessibility)
  • Bonus skills.
  • Design, writing, research, devops, security, performance, etc. (Cf https://www.figma.com/blog/how-we-built-the-figma-design-team/)
  • JavaScript “dun got BIG”
  • Since 2014, JavaScript most popular language on StackOverflow. StackOverflow 2019 developer survey report
  • Most used language on github.  
  • Npm is biggest package manager
  • You can do everything in Javascript.  Runs on both back-end and front-end.
  • Some feel that, due to all of this, it would make more sense to break front-end developers into UX Engineers and JavaScript Engineers
  • Rise of JavaScript also means JavaScript frameworks.
  • I.e., Angular.js & React
  • Brad Frost: Hence the desire for someone working on the front-of-the-front and the back-of-the-front
  • Google: Front-end engineers vs UX engineers.
  • Completely different career ladders, skill expectations, and criteria for success
  • They pay the same. Anyone know how much? ;) depends on where you live. ;)
  • Moving to JavaScript.  Backend developers never got the component-driven design emphasis the way JavaScript has.
  • Component-driven design? Backend → JavaScript
  • Becoming the standard for front end after being implemented much more effectively in JavaScript than it had been in strictly backend languages in the past
  • Site level architecture
  • Routing? Backend → JavaScript
  • Get data from back end?
  • Talk to APIs? Backend → JavaScript
  • Mutating data?
  • State management? Backend → JavaScript
  • ⇒ too much to do. 175 vocational schools charging $ to deliver specific skill sets  (“React developer factories”)
  • Frustrating. Hiring and getting hired.
  • Code Quality
  • Full Stack Developers often find themselves in the position of gatekeeping all-things-code, leading to sloppy or inadequate code somewhere in the stack (particular with document structure)

  • There is more that unites than divides us - UX, A11Y, Performance
  • How to make the web cool? Developers are segregated by stacks/libraries, feel that some parts we assumed are not their job

     

Links & Slides:


Notes from Day 2: https://smashed.by/sf2

[a]https://addyosmani.com/blog/lazy-loading/