Author
Chris Coyier
Comments
Start Conversation
I just can’t stop bookmarking great links related to typography. I’m afraid I’m going to have to subject you, yet again, to a bunch of them all grouped up. So those of you that care about web type stuff, enjoy.… Read article “Some Typography Links”
Sponsored by
Frontend Masters
JavaScript and CSS have lived beside one another for upwards of 20 years. And yet it’s been remarkably tough to share data between them. There have been large attempts, sure. But, I have something simple and intuitive in mind — something not involving a structural change, but rather putting CSS custom properties and even Sass variables to use.… Read article “Getting JavaScript to Talk to CSS and Sass”
I’ve written up my advice (sprinkled with great advice from others), but this is way more straightforward nuts-and-bolts training on technical writing. It’s structured like an actual course, with exercises along the way.… Read article “Google’s Technical Writing Guide”
Austin Gil has kicked off the first in a five-part series about “HTML Forms Right” and to starts with semantics. It’s talking to the “we build our front-ends with JavaScript” crowd. The first block of code is an example of an Ajax form submission where the data submitted is gathered through the JavaScript API FormData
.… Read article “Accessibility Links”
If you’re looking for a new typeface for that side project of yours then here’s a great website by John D. Jameson that collects a bunch of the latest type specimen websites. Everything is on display here, from the daring and bold, to those that are a bit more professional and reserved.… Read article “typespecimens.io”
The internet has been around for a long while, and over time we’ve changed the way we think about web design. Many old techniques and ways of doing things have gotten phased out as newer and better alternatives have been created, and we say that they have been deprecated.
Deprecated. It’s a word we use and see often. But have you stopped to think about what it means in practice? What are some examples of deprecated web elements, and why … Read article “Why Do Some HTML Elements Become Deprecated?”
Justin Duke asks if treating code comments like footnotes could help us understand the code in a file better. In his mockup, all the comments are hidden by default and require a click to reveal:… Read article “Rethinking Code Comments”
The other day, I realized that web performance is an enormous topic covering so very much — from minimizing assets to using certain file formats, it can be an awful lot to keep in mind while building a website. It’s certainly far too much for me to remember!
So I made a web performance checklist. It’s a Notion doc that I can fork and use to mark completed items whenever I start a new project. It also contains a … Read article “Web Performance Checklist”
Andrew Welch sings the praises of using Docker containers for local dev environments:
… Read article “An Annotated Docker Config for Front-End Web Development”Here are the advantages of Docker for me:
• Each application has exactly the environment it needs to run, including specific versions of any of the plumbing needed to get it to work (PHP, MySQL, Postgres, whatever)
• Onboarding others becomes trivial, all they need to do is install Docker and type docker-compose up and away they go
• Your development environment is entirely disposable; if something goes wrong,
I knew that Cloudinary worked with video as well as images but, the other day, I was curious if Cloudinary offered a video player embed just like other video hosts do (e.g. YouTube, Vimeo, etc). Like an <iframe>
that comes with a special player.
I was curious because, as much as I appreciate the simplicity of just tossing a <video>
on a page, there is one little hurdle that I always forget: you have to use a poster
attribute if … Read article “Cloudinary Studio”
Animations have come a long way, continuously providing developers with better tools. CSS Animations, in particular, have defined the ground floor to solve the majority of uses cases. However, there are some animations that require a little bit more work.… Read article “Performant Expandable Animations: Building Keyframes on the Fly”
Take your JavaScript to the next level and find out what it’s fully capable of with the JavaScript path on Frontend Masters.