How to Think Like a Front-End Developer by Chris Coyier

  • Is a job and a job title.
  • It deals with browsers, devices, and users.
  • But what skills does it involve?

Core skills

Bonus skills

JavaScript

Hiring

The brain game

  • Brad looks at the design and sees a lot of components of different sizes and complexity.
  • Mina sees a bunch of media objects.
  • Eric sees HTML structures. That’s a heading. That’s a list. Over there is an unordered list.
  • Sam sees a lot of typography. She sees a type system.
  • Trent immediately starts thinking about how the design is supposed to work in different screen sizes.
  • Mina would love to tackle the animations.
  • Trent sees interesting textures and noise. He wonders how he could achieve those effects without exporting giant image files.
  • Brad, unsurprisingly, sees components, even in a seemingly bespoke layout.
  • Eric immediately sees a lot of SVG.
  • Sam needs to know what the HTML is.
  • Sam is drawn to the typography.
  • Mina sees an opportunity to use writing modes.
  • Trent sees a design that would reflow and reshape itself well.
  • Eric sees something with writing mode, grid, and custom fonts.
  • Trent wants to run it through a colour-contrast analyser, and he wants to know if the font size is too small.
  • Mina wonders if it needs a background video, but worries about the performance.
  • Monica sees something that looks like every other website.
  • Ben wonders whether it will work in other parts of the world. How will the interactions work? Separate pages or transitions? How will it feel?
  • Monica wonders about the priority of which images to load first.
  • Ben worries about the performance on slow connections.
  • Monica gets stressed out about how much happens when you just click on a link.
  • Peggy sees something static and imagines using Gatsby for it.
  • Ben worries about the size of the touch targets.
  • Monica sees an opportunity to use SVGs.
  • Ben wonders what the browser support is. Can we use CSS grid or do we have to use something older?
  • Monica worries that this needs drag’n’drop. Now you’ve got a nightmare scenario.

--

--

--

A web developer and author living and working in Brighton, England. Everything I post on Medium is a copy — the originals are on my own website, adactio.com

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

OSCP Hazırlık Rehberi 2

Human Protocol Brings Distributed Marketplaces to Moonbeam

5 Insane Project Management Techniques in Today’s Market

Flutter web support hits the stable milestone

Flutter’s web support is now available in stable

Why is Ruby on Rails a Perfect Choice for Your Startup?

Laravel 8 — Passport API Routing Rate Limiting

Identify Unused Service Accounts in GCP

7 Steps To Acing the AWS Certified Solutions Architect Exam

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jeremy Keith

Jeremy Keith

A web developer and author living and working in Brighton, England. Everything I post on Medium is a copy — the originals are on my own website, adactio.com

More from Medium

Matteo Enna: I was a shy guy and I didn’t speak English, but then I discovered WordCamps!

FreeSWITCH is not starting due to an unspecified error

“No stress” in management — reality or myth?

Remillard Off to Hot Start in 2022