Search
WDRL — Edition 244: Flexbox Use Cases, JavaScript’s Bind Operator and what we can do against climate change
12.10.2018
Hey,
This week I’ll dedicate the introduction to our environment and what each of us can do to protect it. With the latest studies and official reports out this week, it seems that in order to avoid an irreversible climate change on planet earth we need to act drastically within the next...
Scrolling Gradient
13.7.2018
If you want a gradient that changes as you scroll down a very long page, you can create a gradient with a bunch of color stops, apply it to the body and it will do just that.
But, what if you don't want a perfectly vertical gradient? Like you want just the top left corner to change color? Mike...
Users DO Change Font Size
24.6.2018
Evan Minto:
The question was “How many users browse the main Internet Archive site with a default font size other than the common value of 16 pixels?” By knowing this, we would determine how many users would be affected by sizing with relative units like rems/ems.
Using the methodology I describe...
Writing Snapshot Tests For React Components With Jest
8.6.2018
In this tutorial, we will be looking at what snapshot tests are and how we can use snapshot testing to ensure our User Interface does not change without the team knowing about it.
To get sta
Learning Gutenberg: Series Introduction
21.5.2018
Hey CSS-Tricksters! 👋 We have a special long-form series we’re kicking off here totally dedicated to Gutenberg, a major change to the WordPress editor. I’ve invited a dynamic duo of authors to bring you this series, which will bring you up to speed on what Gutenberg is, what it can do...
A Strategy Guide To CSS Custom Properties
16.5.2018
CSS preprocessor variables and CSS custom properties (often referred to as "CSS variables") can do some of the same things, but are not the same.
Practical advice from Mike Riethmuller:
If it is alright to use static variables inside components, when should we use custom properties? Converting...
Change Python Version
1.5.2018
Python plays a major role at Mozilla; much of our website backends and tooling are written in the powerful language. Want to build Firefox? You’ll need to make sure you have the proper Python version, which I recently found out had been upgraded. Despite installing and verifying I had...
Animating Progress
30.4.2018
Jonathan Snook on the complexity of animating the <progress> element. If you’re unfamiliar, that’s the element that spits out a bar chart-like visual that indicates a position between two values:
This example has custom styles, but you get the point.
Jonathan's post shows off a method...
Force a React Component to Re-Render
7.3.2018
The beauty of React components is that they automagically render and update based on a change in state or props; simply update the state from any place and suddenly your UI element updates — awesome! There may be a case, however, where you simply want to brute force a fresh render of a React...