Search
Lots of Ways to Use Math.random() in JavaScript
30.11.2020
Math.random() is an API in JavaScript. It is a function that gives you a random number. The number returned will be between 0 (inclusive, as in, it’s possible for an actual 0 to be returned) and 1 (exclusive, as in, it’s not possible for an actual 1 to be returned).
Math.random(); // returns...
A Complete State Machine Made With HTML Checkboxes and CSS
27.11.2020
State machines are typically expressed on the web in JavaScript and often through the popular XState library. But the concept of a state machine is adaptable to just about any language, including, amazingly, HTML and CSS. In this article, we’re going to do exactly that. I recently built a website...
What I’m Thankful For: 2020
24.11.2020
My parents loathe when I use poor language but luckily they don’t read this blog so I’ll just be blunt: 2020 has been an absolute shit show. COVID-19 has been a world-wide source of devastation to lives, jobs, and our quality of life. That said, I’ve found myself feeling...
console.log({ myVariable });
19.11.2020
I think this might be my most popular tweet of all time, but I’m not sure how to verify that these days. I’ll restate this neat little trick here because blogging is cool and fun.
I used to do this a lot while debugging JavaScript:
console.log("myVariable: ", myVariable);
But now I...
Understanding flex-grow, flex-shrink, and flex-basis
11.11.2020
When you apply a CSS property to an element, there’s lots of things going on under the hood. For example, let’s say we have some HTML like this:
<div class="parent"<div class="child"Child</div<div class="child"Child</div<div class="child"Child</div</div
And...
ARIA in CSS
11.11.2020
Jeremey reacting to Sara’s tweet, about using [aria-*] selectors instead of classes when the styling you are applying is directly related to the ARIA state.
… this is my preferred way of hooking up CSS and JavaScript interactions. Here’s [an] old CodePen where you can see...
GIFS and prefers-reduced-motion
3.11.2020
The <picture> element has a trick it can do where it shows different image formats in different situations. If all you are interested in is formats for the sake of performance, maybe you’d do:
<picture<source srcset="img/waterfall.avif" type="image/avif"<source...
Smarter Ways to Generate a Deep Nested HTML Structure
21.10.2020
Let’s say we want to have the following HTML structure:
<div class='boo'<div class='boo'<div class='boo'<div class='boo'<div class='boo'</div</div</div</div</div
That’s real a pain to write manually. And the reason why this post was born was being...
Full Bleed
15.10.2020
We’ve covered techniques before for when you want a full-width element within a constrained-width column, like an edge-to-edge image within a narrower column of text. There are loads of techniques.
Perhaps my favorite is this little utility class:
.full-width {
width: 100vw;
position:...
Netlify Edge Handlers
13.10.2020
Some very cool news from Netlify: Edge Handlers are in Early Access (request it here). I think these couple of lines of code do a great job in explaining what an Edge Handler is:
export function onRequest(event) {
console.log(`Incoming request for ${event.request.url}`);
...
Web Technologies and Syntax
24.9.2020
JavaScript has a (newish) feature called optional chaining. Say I have code like:
const name = Data.person.name;
If person happens to not exist on Data, I’m going to get a hard, show-stopping error. With optional chaining, I can write:
const name = Data.person?.name;
Now if person...
China’s national blockchain project to support DAML smart contract language
14.9.2020
Digital Asset’s DAML will connect diverse blockchains on a national DLT project in China
Logical Assignment Operators
10.9.2020
I love JavaScript, it’s my favorite programming language, but I love dipping into other languages because they offer a new perspective on coding paradigms. There’ve been syntax additions to JavaScript that I’ve seen I found interesting (think ?? in optional chaining) and now...
AVIF has landed
8.9.2020
Everybody is talking about AVIF today because of Jake’s blog post. As the say, I was today years old when I learned AVIF was a thing. But thanks to web technology being ahead of the game for once, we can already take advantage of it.
This will be easier if you’ve abstracted your...
Bridge Oracle IEO Launches with Bitcoin.com Co-Founder Mate Tokay as Advisor
8.9.2020
8th September, 2020, Kuala Lumpur, Malaysia – Bridge Oracle may very well be on the cusp of achieving the holy grail of the crypto-sphere: mass adoption. Between blockchain’s theoretical superiority based on hard code, and the nuanced language that is real life, it finally provides the means...
Working with JavaScript Media Queries
7.9.2020
What’s the first thing that comes to mind when you think of media queries? Maybe something in a CSS file that looks like this:
body {
background-color: plum;
}
@media (min-width: 768px) {
body {
background-color: tomato;
}
}
CSS media queries are a core ingredient in any responsive...
Using @property for CSS Custom Properties
3.9.2020
Una Kravetz digs into how Chrome now allows you to declare CSS custom properties directly from CSS with more information than just a string.
So rather than something like this:
html {
--stop: 50%;
}
…can be declared with more details like this:
@property --stop {
syntax:...
Excluding Emojis From Transparent Text Clipping
2.9.2020
CSS-Tricks has this pretty cool way of styling hovered links. By default, the text is a fairly common blue. But hover of the links, and they’re filled with a linear gradient.
😍
Pretty neat, right? And the trick isn’t all that complicated. On hover…
give the link a linear...
Copy the Browser’s Native Focus Styles
28.8.2020
Remy documented this the other day. Firefox supports a Highlight keyword and both Chrome and Safari support a -webkit-focus-ring-color keyword. So if you, for example, have removed focus from something and want to put it back in the same style as the browser default, or want to apply a focus style...
Leading-Trim: The Future of Digital Typesetting
21.8.2020
leading-trim is a suggested new CSS property that lets us remove the extra spacing in every font so that we can more predictably style text. Ethan Wang has written about it — including how Microsoft has advocated for it — and that it’s now part of the Inline Layout Module Level 3 spec.
You’d use...