Search
Why isn’t it <style src=””>?
10.12.2018
The way JavaScript works is we can do scripts as an inline block:
<script>
let foo = "bar";
</script>
Or, if the script should be fetched from the network...
<script src="/js/global.js"></script>
With CSS, we can do an inline block of styles:
<style>
.foo...
Google Labs Web Components
10.12.2018
I think it's kinda cool to see Google dropping repos of interesting web components. It demonstrates the possibilities of cool new web features and allows them to ship them in a way that's compatible with entirely web standards.
Here's one: <two-up>
I wanted to give it a try, so I linked...
DRY State Switching With CSS Variables: Fallbacks and Invalid Values
6.12.2018
This is the second post in a two-part series that looks into the way CSS variables can be used to make the code for complex layouts and interactions less difficult to write and a lot easier to maintain. The first installment walks through various use cases where this technique applies. This post...
DRY Switching with CSS Variables: The Difference of One Declaration
5.12.2018
This is the first post of a two-part series that looks into the way CSS variables can be used to make the code for complex layouts and interactions less difficult to write and a lot easier to maintain. This first installment walks through various use cases where this technique applies. The second...
The All Powerful Front-End Developer
5.12.2018
I posted a video of this talk some months back, but it was nearly an hour and a half long. Here's an updated version that I gave at JAMstack_conf that's only 30 minutes:
The gist is that the front-end stack is wildly powerful these days. Our front-end skillset can be expanded to give us power...
Coding Exercise: Build JavaScript Array Methods From Scratch
27.11.2018
https://www.youtube.com/watch?v=ALYH5XOvMwI
There's no better way to ensure that you understand how something works than building yo
Mercurial: Mass Add and Remove All Files
29.10.2018
While I much prefer git and the GitHub workflow, Firefox’s codebase (mozilla-central) is store in a mercurial repository. There are tools that wrap mercurial so you can use a git-like interface, like git-cinnabar, but my philosophy is to learn the root tool so that I know what’s going...
The Easiest Way To Customize Bootstrap
22.8.2018
We take a look at Epic Bootstrap, an awesome web app for customizing Bootstrap 4
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...
Developer Roadmaps
23.7.2018
The path to becoming a front-end developer, as looked back upon by anyone who self-identifies that way, is likely a very windy one full of thorn bushes and band websites. Still, documenting a path, even if it's straighter and far cleaner than reality, is an interesting exercise and might just...
How to make a modern dashboard with NVD3.js
19.7.2018
NVD3.js is a JavaScript visualization library that is free to use and open source. It’s derived from the well-known d3.js visualization library. When used the right way, this library can be extremely powerful for everyday tasks and even business operations.
For example, an online dashboard. We...
Design Systems at GitHub
12.7.2018
Here’s a nifty post by Diana Mounter all about the design systems team at GitHub that details how the team was formed, the problems they've faced and how they've adapted along the way:
When I started working at GitHub in late 2015, I noticed that there were many undocumented patterns, I had...
Unused
11.7.2018
I recently wrote Here’s the thing about "unused CSS" tools, where I tried to enumerate all the challenges any tool would have in finding truly "unused" CSS. The overarching idea is that CSS selectors match elements in the DOM, and those elements in the DOM come from all sorts of places: your static...
Hyperlinking Beyond the Web
11.7.2018
Hyperlinks are the oldest and the most popular feature of the web. The word hypertext (which is the ht in http/s) means text having hyperlinks. The ability to link to other people’s hypertext made the web, a web — a set of connected pages. This fundamental feature has made the web a very...
Hide Information in Images
9.7.2018
If you’ve followed this blog, you know that I’m obsessed with figuring out every way to interact with, abuse, and convert different types of media. Whether it’s images, video, or audio, if something can be changed or exploited, I want to figure out how to do it. I remember...
Clearfix: A Lesson in Web Development Evolution
3.7.2018
The web community has, for the most part, been a spectacularly open place. As such, a lot of the best development techniques happen right out in the open, on blogs and in forums, evolving as they’re passed around and improved. I thought it might be fun (and fascinating) to actually follow this...
CSS Grid in IE: Debunking Common IE Grid Misconceptions
2.7.2018
This is the first in a three-part series all about how to use CSS grid in a way that will work not only in modern browsers but also in Internet Explorer (IE). Imagine writing CSS grid code without having to write a fallback layout! Many of us think that this is some far off future that is many...
Better rendering for variable fonts
26.6.2018
I was messing around with a variable font the other day and noticed this weird rendering issue in the latest version of Chrome where certain parts of letterforms were clipping into each other in a really weird way. Thankfully, though, Stephen Nixon has come to the rescue with a temporary hack...
Using Custom Fonts With SVG in an Image Tag
21.6.2018
When we produce a PNG image, we use an <img> tag or a CSS background, and that's about it. It is dead simple and guaranteed to work.
PNG is way simpler to use in HTML than SVG
Unfortunately, the same cannot be said for SVG, despite its many advantages. Although you're spoiled for choices...
What is SVG good for?
21.6.2018
Y'all probably wouldn't be surprised if I told you it's pretty awesome for icons, and icon systems. SVG icon systems can, and perhaps should be quite easy. I'm a fan of just inlining those suckers, particularly when they are pretty simple.
But what else?
Logos is a classic example! A lot...