Let's use planets, atoms, and clouds to name size- and elevation-related css variables instead of small, medium, and large!
Many design systems use t-shirt sizing (sm, md, lg) to name size-related concepts. But what if instead we embraced science and used planets, atoms, and clouds to name css variables instead?
Using CSS to style a label when its input has focus is tricky! Let's review 5 possible solutions for compatibility, accessibility, and complexity.
Using CSS to style a label when its input has focus is tricky! Thankfully, Stackazon has rated and reviewed five different solutions for browser compatibility, accessibility, and complexity to see which serves the most use cases.
If you are not careful, rendering a random number with SSR can lead to inconsistencies.
On a recent project of mine, I was trying to create a component with some randomized parameters in SvelteKit. To my dismay, SvelteKit's server-side rendering was causing a problem! Let's talk about what the problem was and how to render random numbers with SSR.
People find their soulmates through dreams they have of each other, but all I get are nightmares of darkness and screaming.
People find their soulmates through dreams they have of each other, but all I get are nightmares of darkness and screaming.
Let's see how we can use text (and sometimes code) to make text sarcastic!
Ever got a text from someone and couldn't tell if they were being sarcastic or not? Kinda sucks that we can't convey facial language or tone through text... or can we? Let's see how we can use text (and sometimes code) to make text sarcastic!
Let's build the toggle switch element as a web component using the humble light bulb to guide our thinking.
The toggle switch is sure a common thing on websites. It'd be super nice if it were its own HTML element... Well, with web components, we can actually do this! Let's build a toggle switch element while at the same time... piece together a light bulb from scratch?!
For an unspoken contest, I made two typewriter animations: one using nothing, and another using everything.
A few weeks ago, some devs started an unspoken contest to see who can make the best typewriter animation. I decided to join in with two entries: one using no web technologies, and one using all of them.
Recently, Inclusivity Hub wrote an excellent resource detailing 101 tips for improving accessibility.
Accessibility is very broad, but recently Inclusivity Hub wrote an article summarizing 101 valuable tips which can be quick wins for anyone getting started. I was able to personally improve this website in five different ways because of it!
There's a paradox in the support of image-rendering among browsers. How can we resolve that paradox in order to properly upscale pixelart?
On a webpage, pixelart can be scaled up using a CSS property called image-rendering. However, if you look at its browser support, you find a paradox, that browsers support seemingly opposite values. So if you want to upscale pixelart, how do you get around that paradox?
Recently, the HTML Spec has taught me a different way of writing alt text that is better for accessibility.
Recently, I learned that I had been writing the wrong alt text for my images. So what makes for good alt text, and why is this important for accessibility? Thankfully, the HTML Spec has had the answer all along.
Let's take a domain-driven approach to implementing the core bounce mechanic in a game I recently made!
In a game I recently made for a game jam, a balloon bounces on rubber bands. That bouncing mechanic is perhaps the most important part of the game, so I spent a good deal of time perfecting it. Here, I walk through the process of creating the bounce of Rubber Juggle with a domain-driven approach!
I just added a new section to my website for art.
I very recently added an Art section to this website. I'm not really an artist, but as encouragement to improve and embrace this side of me wanted to openly share stuff I've drawn (and will draw) over the years.
Let's dive into how understanding structured concurrency is key to understanding Kotlin coroutines and scope.
Kotlin handles concurrent programming using a paradigm called structured concurrency and a mechanism called coroutines. To me, these things felt very different from other languages, so I want to talk about how understanding structured concurrency helped me know how to write Kotlin coroutines.
Kafka is a piece of technology that facilitates event-driven architectures. Let's see how it works through the eyes of Pat, Carol, and Kirk!
If you've worked with event-driven architectures, you might have heard of this thing called Kafka. Let's explore how Kafka uses topics, partitions, and consumer groups to facilitate events between producers and consumers, through the narrative of Pat, Carol, and Kirk!
Testing in React is a careful balance between comprehensiveness and flexibility. I think our collective experience can boil down to a single, terse principle.
Testing in React can sometimes feel non-trivial. On the one hand, we want our tests to be comprehensive and accurate. On the other, we don't want to accidentally make our components immune to change. React devs have honed the art of testing components through the years, and I think we can boil down our collective experience into a single, terse principle.
Using Maslow's Hierarchy of Needs, we can actually see what's at the heart of a dystopia and build numerous possible worlds.
Dystopias are common in fiction and commonly involve corrupt governments, societal unrest, looming danger, and so forth. Using Maslow's Hierarchy of Needs, we can actually see what's at the heart of a dystopia and build numerous possible worlds.
Feedback is not just positive or negative. We can improve our approach to feedback by thinking of it in three types instead: Affirming, Adjusting, and Advancing.
Receiving feedback from others is the principle way we can professionally grow, but these conversations can be occasionally sensitive. I tend to find feedback framed as either positive or negative, but I think we can improve our approach to feedback by thinking of it in three types instead: Affirming, Adjusting, and Advancing feedback.
Steganography is the art of obscuring not the message, but the existence of the message. See how you can use this so embed secret messages into images!
Using cryptography, you can scramble your message so that nobody except the recipient can read it. Nice and secure! But what if we made it so that nobody except the recipient even knew the message existed in the first place? That's steganography! See how you can steganographically embed secret messages into images by reading on.
Framing React component testing in terms of rendering and behaviour can encourage proper separation of presentation and state.
It is not always clear what in React components should be tested or where those tests should go. I find that thinking of two types of tests, render tests and behavior tests, helps in figuring out what should be tested and how. Furthermore, having these two testing types encourages proper separation of presentation and state.
If you're looking for creative solutions to difficult problems, deferring judgement is one simple trick that can help.
Though people generally desire becoming more creative, it's hard to know where to start. After all, "creativity" can be a bit of a nebulous topic. However, I've found that one small trick, deferring judgement, can get you a long way there.
Can you connect 9 dots with just 4 lines? This decepitvely simple puzzle can teach us a lot about assumptions and creative problem solving.
The 9-Dots is simple: connect all 9 dots with 4 connected lines. But in spite of its simplicity, it is very hard to solve. Let's find out why the 9-Dots puzzle is so hard to solve and see how we can use it to improve our creative problem solving abilities!
Many of web developers organize their code based on type (CSS, state, view). However, we can avoid drawbacks if we instead "folderize" our React components.
A React component can be made of different files, and it can be tempting to organize these files into individual folders based on their type (CSS, state, presentation). However, this approach has some drawbacks that can be avoided if we "folderize" the entire React component instead.
"The enemy knows the system." This cryptography principle applies to steganography as well.
"The enemy knows the system." These famous words uttered by mathematician Claude Shannon serve as a guiding principle for cryptography. It turns out the same principle applies to steganography as well.
Ah yes, the infamous blue/black or white/gold dress. What if I told you I see neither of those color combinations?
Ah yes, the infamous blue/black or white/gold dress. What if I told you I see neither of those color combinations? Turns out I see blue/gold, basically a compromise of the two most popular views. And, I think it has to to with me being a web developer.
Instead of using the Greedy Algorithm to approximate the Traveling Salesman problem, I attempt an algorithm of my own contrivance.
The Traveling Salesman is a notorious computer algorithm problem. Instead of using the popular Greedy Method to get an approximate solution, I attempt an alternative algorithm of my own contrivance.
Teachers do more than convey information to students. If that all they did, the Internet would make them obsolete.
Derek Muller of Veritasium published a video describing the role of teachers in an age of ready-access information. If all teachers do is transmit information, then yeah, the Internet makes them obsolete. But in fact, their role is far more important.
After using Haxe for a month, I've realized type inference can really simply your code without losing any information.
Unlike AS3, Haxe has a feature called type inference that allows you to forgo specifying the types of variables or functions. After having used the language for a month, I've come to realize that type inference can really simply your code without losing any information.
Let's look at some of the similarities and differences between Haxe and Actionscript 3.
Haxe shares many similarities with the Actionscript 3 (AS3) language, and therefore AS3 developers like myself can pick it up rather easily. There are, of course, some immediate differences that should be noted if wanting to write Haxe code.
Flash is dying. Thankfully, I've found an alternative in Haxe and OpenFL.
Flash is dying. The rise of HTML5 has made the old technology obsolete, meaning that Flash programmers like myself must adapt and find alternatives. Thankfully, I've discovered Haxe and OpenFL!