Best of CSS-Tricks — December 2020

1. 1
   Article

   CSS-Tricks·5y

   Design v18

   The site has been redesigned for v18. The main theme was simplification. The header is just a handful of links that fall down to the next line on small screens. There is one look for “cards” now, whether that is an article, video, guide, etc.

   36

   5
2. 2
   Article

   CSS-Tricks·5y

   How to Use the Locomotive Scroll for all Kinds of Scrolling Effects

   Locomotive Scroll lets you perform a variety of scrolling effects, like parallax and triggering/controlling animations at scroll points. It works primarily through specific attributes in the HTML. Elements with these attributes trigger event listeners in JavaScript when they are in the viewport, then apply CSS transform values as inline styles. It’s pretty plug-and-play like that.

   31

   2
3. 3
   Article

   CSS-Tricks·5y

   A Microsite Showcasing Coding Fonts

   There are quite a few purpose-built fonts for writing code. The point of this site is to show you some of the nicest options so you can be aware of them and perhaps pick one out that suites your taste. There are still more fonts to add. If you want to add one, feel free to make a PR.

   27

   2
4. 4
   Article

   CSS-Tricks·5y

   How to Create a Favicon That Changes Automatically

   I found this Free Favicon Maker the other day. It’s a nice tool to make a favicon (true to its name), but unlike other favicon generators, this one lets you create one from scratch starting with a character or an emoji. Naturally, I was curious to look at the code to see how it works and, while I did, it got me thinking in different directions. I was reminded of something I read that says it is possible to dynamically change the favicon of a website. We’re going to do exactly that in this article and it will work with plain JavaScript.

   25

   1
5. 5
   Article

   CSS-Tricks·5y

   Continuous Performance Analysis with Lighthouse CI and GitHub Actions

   Lighthouse is a free and open-source tool for assessing your website’s performance, accessibility, SEO, and more. The easiest way to use it is through the Chrome DevTools panel. In this article, we’ll go over how to set up Lighthouse CI and run it locally.

   23

   2
6. 6
   Article

   CSS-Tricks·5y

   Converting and Optimizing Images From the Command Line

   Images take up to 50% of the total size of an average web page. If images are not optimized, users end up downloading extra bytes. The idea is to optimize images before we serve them so that users get the most visually awesome experience without all the byte bloat. In this tutorial, we will write bash scripts that create and optimize images in different image formats.

   23

   4
7. 7
   Article

   CSS-Tricks·5y

   Accessible SVG Icons

   There’s no need to announce the icon because the label next to it already does the job. As in, the icon is just sitting there looking pretty but it doesn’t matter if it entirely went away. So, instead of reading it, we hide it from screen readers.

   22

   2
8. 8
   Article

   CSS-Tricks·5y

   Hell Yes! CSS!

   Hell Yes! CSS! is a 28-page zine about learning and using CSS. The zine explains the basics of CSS and gives examples to play with. It also explains how flexbox and grid are a WAY easier and less painful way to do layout than what people did.

   20

   4
9. 9
   Article

   CSS-Tricks·5y

   “Yes or No?”

   A checkbox represents this: it’s either on or off (uh, mostly). But is a checkbox always the best UX? It depends, of course:Use radio buttons if you expect the answer to be equally distributed. If you want a concrete, deliberate, explicit answer and don’t want a default selection, use radio buttons.

   15

   2
10. 10
    Article

    CSS-Tricks·5y

    Netlify & Next.js

    Next.js is a React-based framework that runs on Netlify. It lets you do static-file rendering by default, and server-side rendering if you need it. The most compelling thing about Next.js, to me, is how easily it supports the entire rendering spectrum. It’s a darn nice framework to do it with.

    15

    1
11. 11
    Article

    CSS-Tricks·5y

    How The Web is Really Built

    A lot of the code we found could have been written a decade ago. When new tech ends up being used sufficiently to appear in these stats, it’s often because the primary driver is a popular library or framework. Effectively, we (standards folks, browser implementers, etc.) are building tech for tooling authors.

    13

    2
12. 12
    Article

    CSS-Tricks·5y

    Custom Styles in GitHub Readme Files

    GitHub Readme files are Markdown, and Markdown supports HTML. You can’t put <style> or <script> tags init. So you can't apply custom styles there. Or can you? You can use SVG as an <img src="./file.svg" alt="" /> (anywhere)

    12
13. 13
    Article

    CSS-Tricks·5y

    What’s Old is New

    In this article, we look at some of the ways in which the web is being used as a tool to help people make better decisions about how to use the web. We also look at how the web can be used to create new ways of thinking about the web, and how to make it better.

    12

    1
14. 14
    Article

    CSS-Tricks·5y

    Integrating TypeScript with Svelte

    Svelte is a template-based framework that allows for arbitrary JavaScript inside the template bindings. This post will focus on configuring TypeScript inside of Svelte templates. While we’re going to manually integrate SVELte and Typescript, you might consider using the official SvelTE template that does the same if you're starting a greenfield project.

    11