Search
An Initial Implementation of clip-path: path();
24.12.2018
One thing that has long surprised (and saddened) me is that the clip-path property, as awesome as it is, only takes a few values. The circle() and ellipse() functions are nice, but hiding overflows and rounding with border-radius generally helps there already. Perhaps the most useful value...
People Talkin’ Shapes
22.12.2018
Codrops has a very nice article on CSS Shapes from Tania Rascia. You might know shape-outside is for redefining the area by which text is floated around that element, allowing for some interesting design opportunities. But there are a couple of genuine CSS tricks in here:
Float shape-outside...
Animating Between Views in React
21.12.2018
You know how some sites and web apps have that neat native feel when transitioning between two pages or views? Sarah Drasner has shown some good examples and even a Vue library to boot.
These animations are the type of features that can turn a good user experience into a great one. But to achieve...
Regarding CSS’s Global Scope
20.12.2018
html {
font-family: Roboto, sans-serif;
}
With the except of some form elements, you've just set a font on every bit of text on a site! Nice! That's probably what you were trying to do, because of the probably hundreds of elements all over your site, setting that font-family every time would...
The Fragmented, But Evolving State of CSS-in-JS
20.12.2018
TLDR: The CSS-in-JS community has converged on a consistent API.
Not so long ago, a Facebook engineer compiled a list of the available CSS-in-JS methodologies. It wasn’t short:
aphrodite, babel-plugin-css-in-js, babel-plugin-pre-style, bloody-react-styled, classy, csjs, css-constructor, css-light...
Build a Secure Node.js Application with JavaScript Async Await Using Hapi
18.12.2018
At the core of the JavaScript language is its asynchronous programming model. Unfortunately, dealing with callback functions has long been a source of frustration for many developers. JavaScript Pr
A CSS Venn Diagram
17.12.2018
This is pretty wild: Adrian Roselli has made a series of rather complex Venn diagrams using nothing but CSS. With a combination of the Firefox dev inspector, plus a mixture of CSS Grid and the shape-outside property, it’s possible to do this and without a ton of hacks, too.
I also think it’s super...
Accessible SVG Icons With Inline Sprites
7.12.2018
This is a great look at accessible SVG markup patterns by Marco Hengstenberg. Here's the ideal example:
<button type="button">
Menu
<svg class="svg-icon"
role="img"
height="10"
width="10"
viewBox="0 0 10 10"
aria-hidden="true"
focusable="false">
...
CSS Selectors are Conditional Statements
6.12.2018
foo {
}
Programmatically, is:
if (element has a class name of "foo") {
}
Descendent selectors are && logic and commas are ||. It just gets more complicated from there, with things like combinators and pseudo selectors. Just look at all the ways styles can cascade.
Jeremy Keith:
If...
Build a To-Do application Using Django and React
6.12.2018
Web development has grown rapidly over the last decade, and there's a long list of frameworks to choose from when building your projects. A developer’s decision on what framework(s) to use for a p
The Software We Pay For
5.12.2018
We did a Web Developer Economics series a few years ago, where we looked at the various costs of being a web developer:
Web Developer Economics: One-Off Software Costs
Web Developer Economics: Hardware Costs
Web Developer Economics: Monthly Service Costs
Web Developer Economics: The Wrapup
I'm...
Blue Beanie Day 2018
30.11.2018
Another year!
You better not cry, you better not shout, I’m telling you why: @BlueBeanieDay is coming Nov. 30! Start sharing your #bbd photos, links, articles, and videos now: https://t.co/3US4vHBsDR#a11y #WebStandards #InclusiveDesign #ProgressiveEnhancement pic.twitter.com/AiV3ktRqka
—...
10 Node Frameworks to Use in 2019
28.11.2018
Introduction
More developers have switched to using JavaScript to build more applications, especially for the web. This has brought about an exponential growth in the usage of frameworks b
GraphQL API with AWS and Use with React
26.11.2018
GraphQL has become a go-to API implementation for developers looking to take advantage of features liketype safety, network efficiency, real-time data with subscriptions & more.
Building
Coincheck Has Now Reinstated All Cryptos After January Hack
26.11.2018
Japanese crypto exchange Coincheck, which suffered a major hack in January, has now reinstated services for all listed tokens on its platform
Object.fromEntries
9.11.2018
The Object object has been buffed with useful methods over the past few years. Object.keys, Object.values, Object.freeze, and Object.assign all address frequently desired functionality. One of the new Object methods is fromEntries, which accepts a Map or map-like array nesting and converts it...
Turn Bluetooth On and Off from Command Line on macOS
6.11.2018
Bluetooth has been a revelation in wireless technology: wireless mice, headphones, streaming devices, and a variety of home and office environments. It goes without saying that wireless peripherals are so much easier to manage than wired counterparts, especially mice, that I usually have...
Script & Style Show: Episode 25: AR, VR, and Mozilla Reality with Chris Van Wiemeersch
14.10.2018
On this episode: Todd notices what David’s been watching on YouTube while logged in as the Script & Style user and David has no defense but loads of embarrassment. David hurriedly transitions to welcoming guest Chris Van Wiemeersh from Mozilla’s Reality team. Chris enlightens...
Stuff you can do with CSS pointer events
27.7.2018
Martijn Cuppens (the same fella with the very weird div!) has some more irresistible CSS trickery. Three of the examples are about making a child element trigger an event on a parent element (almost like the magic that is :focus-within).
Here's how I reasoned it out to myself:
You know how if...
Build Firefox Faster with Artifact Builds
26.7.2018
Working on Firefox DevTools has always been a dream of mine, mostly because it feels like the ultimate way to give back to the development community and those that helped me become a success. And when I explain who Mozilla is and people ask “Oh, so you work on Firefox?!”, I can finally...