Algorithmic Layouts
10.1.2019
Don't miss this video by Heydon that digs into CSS layouts. It's great how he combines fundamental knowledge, like the way elements flow, wrap, and can have margin with new layout methods like flexbox and grid (with specific examples). Of particular note is the clear demonstration of how flexbox...
Building Responsive WordPress Forms
10.1.2019
(This is a sponsored post.)
Within the arsenal of every WordPress developer exists a toolbox of plugins used to implement key features on a website. Forms, up until now, have been a point of contention for most developers, given that no form plugins have offered seamless integration with existing...
Building Responsive WordPress Forms
10.1.2019
Within the arsenal of every WordPress developer exists a toolbox of plugins used to implement key features on a website. Forms, up until now, have been a point of contention for most developers, given that no form plugins have offered seamless integration with existing website code. Therefore...
Collective #482
10.1.2019
Anime.js v3.0.0 * Dimensions.Guide * Defensive JavaScript * Bg Painter * Web A Skeb * The Ethics of Performance
Collective #482 was written by Pedro Botelho and published on Codrops
Git Checkout at Previous Timeframe
9.1.2019
In the past I’ve blogged about checking out branches created on a specific date as well as sorting git branches by date, but one frequent usage of git and dates is checking out a commit at a given time in the past. For example, I often say “Weird, this feature was working a month...
New ES2018 Features Every JavaScript Developer Should Know
9.1.2019
The ninth edition of the ECMAScript standard, officially known as ECMAScript 2018 (or ES2018 for short), was released in June 2018. Starting with ES2016, new versions of ECMAScript specifications are released yearly rather than every several years and add fewer features than major editions used...
Toggling Animations On and Off
9.1.2019
A nicely detailed tutorial by Kirupa that gets into how you might provide a UI with persisted options that control whether animations run or not.
The trick is custom properties that control the movement:
body {
--toggle: 0;
--playState: "paused";
}
Which are used within animations...
Styling a Web Component
8.1.2019
This confused me for a bit here so I'm writing it out while it's fresh in mind. Just because you're using a web component doesn't mean the styles of it are entirely isolated. You might have content within a web component that is styled normally along with the rest of your website. Like this:
See...
How To Learn CSS
8.1.2019
Outside of my extreme envy of the SEO they are going to get out of this, Rachel is spot on here. Learning CSS has some pillars, like language syntax, selectors, layout, and flow that, once learned, unlock your CSS merit badge.
What I would add is that if you really want to learn CSS, give yourself...
Sass Techniques from the Trenches
8.1.2019
Having been in the web development industry for more than 14 years, I’ve seen and written my fair share of good and bad CSS. When I began at Ramsey Solutions five years ago, I was introduced to Sass. It blew my mind how useful it was! I dove right in and wanted to learn everything I could about...
The 10,000 Year Clock Design Principals
8.1.2019
In the new year edition of the Clearleft newsletter, Jeremy Keith linked to the design principals Danny Hillis thought about while considering a clock that would work for 10,000 years.
Here's part of that page, satisfyingly displayed as a <dl>:
Longevity:
Go slow
Avoid sliding friction...
Animated Mesh Lines
8.1.2019
A set of five demos with animated WebGL lines created with the THREE.MeshLine library. Find out how to animate and build these lines to create your own animations.
Animated Mesh Lines was written by Jérémie Boulay and published on Codrops