Editor's Pick
The farther you go up the ladder, the less it’s about your technical skills
It’s not that technical skills aren’t important, but that soft skills are a lot more important.
Job descriptions are an important part of knowing what skills and experience are expected of you in your role and level, and at levels above you so you can work toward promotion. But they are not meant to be, not able to be, a hard-and-fast roadmap to promotion.
That’s because the higher up the ladder you go, whether as an engineer or a manager, the more you need soft skills that job descriptions aren’t designed to capture.
Accessibility
Accessible Color Palette Generator | WCAG Compliant
Discover beautiful color combinations your whole audience can appreciate and follow Web Content Accessibility Guidelines (WCAG) with ease.
Accessible notifications with ARIA Live Regions (Part 1)
This post is a text-only excerpt from my Practical Accessibility video course. I'm making this chapter (out of 38 total) publicly available simply because I want an extensive guide to ARIA live regions to be publicly available to everyone in the community. This chapter is also one of the longest chapters in the course, and so I think it is a great preview into the level of depth that each topic is covered in the course.
In this chapter, we’re going to learn about ARIA live regions — the accessible notifications system that enables us to make dynamic web content more accessible to screen reader users.
Without live regions, some rich web applications would be more challenging to use for screen reader users. So if you’re building web applications such as Single Page Applications (SPAs), you need to understand live regions so that you can utilize them where appropriate.
CSS
Defensive CSS - Minimum Content Size In CSS Flexbox
If a flex item has a text element or an image that is bigger than the item itself, the browser won’t shrink them. That is the default behavior for flexbox.
To change that default behavior, we need to set the min-width of the flex item to 0. That’s because the min-width default value is auto, the overflow happens.
HTML
Writing HTML in HTML
I've just finished the final rewrite of my website. I'm not lying: this is the last time I'm ever going to do it. This website has gone through countless rewrites – from WordPress to Jekyll to multiple static site generators of my own – but this is the final one. I know so, because I've found the ultimate method for writing webpages: pure HTML.
Lume - create 3D web applications with HTML
Lume advances the capabilities of HTML rendering in the web, gifting you new HTML elements for crafting graphically-rich hardware-accelerated visual experiences that include 3D models, lighting, shadow, reflection, and more.
Lume is built as Custom Elements (also known as Web Components, but we prefer “custom elements” over “web components”, or just “elements”), making Lume compatible with popular web frameworks.
JavaScript
Playing Soundfonts with the Web Audio API
In this post, I want to implement a way to load and play soundfonts with the Web Audio API.
To get the whole story check out Soundfonts on Wikipedia. Essentially, soundfonts are for sound what normal fonts are for typography: A collection of interchangeable sounds that can be used to play different types of music.
console.delight
Everyone knows you can use console.log() to log text and variables to the console. Did you know you could also render (limited) CSS, SVGs, and even HTML in it?!? I didn’t! It’s a neat technique that can delight the curious and further your brand for curious users.
Streams and React Server Components
Many developers have used streams when building technology, but how many have truly understood their intricacies and their connection to React Server Components? Personally, the concept never quite clicked for me. It wasn't until contributing to Waku and being curious about how RSCs stream html—requiring me to take them seriously. Waku is a minimal layer over React Server Components using Vite.
In this essay, I'm going to talk more about the concept, the abstraction the Streams API provides around the concept and how React Server Components leverage this API.
Plotteus | The JavaScript library for data storytelling
Plotteus is an open-source JavaScript data visualization library designed for better storytelling. Take your data-driven stories to the next level today.
UX
Top most used Design Systems and UI Libraries in 2023
This is the list of the most popular Design Systems and UI libraries, used as the leading Systems Benchmarks by thousands of companies, startups, designers, and developers around the world. This list is the result of exhaustive research, which included a survey of hundreds of designers and developers working at leading companies, such as Google, Atlassian, Airbnb, and IBM, among others.
The UX of UUIDs
Unique identifiers play a crucial role in all applications, from user authentication to resource management. While using a standard UUID will satisfy all your security concerns, there’s a lot we can improve for our users.
Miscellaneous
The farther you go up the ladder, the less it’s about your technical skills
It’s not that technical skills aren’t important, but that soft skills are a lot more important.
Job descriptions are an important part of knowing what skills and experience are expected of you in your role and level, and at levels above you so you can work toward promotion. But they are not meant to be, not able to be, a hard-and-fast roadmap to promotion.
That’s because the higher up the ladder you go, whether as an engineer or a manager, the more you need soft skills that job descriptions aren’t designed to capture.
Learn SVG by drawing an arrow
SVG shapes are defined based on geometry. When you define an <svg> element, you get an invisible Cartesian plane; there are x and y axes, and all points you will draw in this SVG are specified relative to an origin. Note that by default, x increases to the right as normal, but y increases downwards, and the origin is at the top left.
This article will demonstrate SVGs by constructing an arrow in HTML/JavaScript.