Joe Attardi articles - 34 total
Beyond breakpoints: Leveraging user preference media queries in CSS
If you build web sites or apps, chances are you work with media queries. These handy CSS tools allow...
Using git bisect, the detective tool for debugging
Youre working on a bug fix and find some bad code that causes a bug. The git blame command will tell...
Steps for installing a local AI copilot in Visual Studio Code
Does your company block ChatGPT or GitHub Copilot? Do you have security or trust concerns sending...
New book: Web API Cookbook
Announcing my new book from O'Reilly Media, Web API Cookbook! It's now available from Amazon and...
Understanding color contrast for accessibility
Accessibility is a popular topic these days - as it should be. There are many benefits of making your...
Understanding error handling in Promise chains
Promise chains You can create a chain of Promises by returning new Promises from a then...
Using the HTML `picture` element to show a WebP image
The WebP image format has been around since 2010 when the standard was first announced. One benefit o...
Vanilla JavaScript emoji picker! New and improved.
Emoji Button is a vanilla JavaScript emoji picker component I have been working on over the past year...
New book: Modern CSS
I am excited to announce that my new book, Modern CSS, is now available! The book is targeted at b...
Let's make a CSS cube
You can do a lot with CSS transforms! In this post we'll walk through making a 3D cube. First, let's...
CSS fundamentals: Selectors
One of the core concepts in CSS is that of selectors. A selector determines which element(s) a CSS ru...
Shiny button hover effect with CSS
This one is based on a shiny button I added to the navigation on my portfolio site. It's done by hav...
Introduction to Netlify CMS
Gatsby is a powerful tool for quickly building web sites. You can build a portfolio site, and even a...
📖 New book: Using Gatsby and Netlify CMS
Hello DEV Community! I'm so excited to announce that my new book, Using Gatsby and Netlify CMS, is f...
Animated hamburger icon using CSS transitions
I know this one has been done to death, but here is another solution! I had a lot of fun figuring thi...
All about `this` in JavaScript
What is this? It depends on the situation. Let’s look at a few common scenarios....
Yet Another Coronavirus Dashboard
I've joined countless others in creating a Coronavirus data dashboard using React. So far it's pretty...
Announcing my upcoming Gatsby book
I recently built a site using Gatsby and Netlify CMS. I am working on adapting that experience into m...
Emoji Button: 400 ⭐️ stars on GitHub!
My pet project, Emoji Button, has just passed 400 stars on GitHub! Emoji Button is a vanilla JavaScr...
How Emojis Work
In the process of writing Emoji Button, my plain JavaScript emoji picker, I have learned a lot about...
Quick tip: Automatically detect Dark Mode with CSS!
Just a quick tip I discovered recently. You probably already know that macOS and iOS (and perhaps ot...
npm dashboard - check stats on all of your npm packages at a glance
Like many others out there, I have several npm packages published. Periodically I like to check how t...
React MapQuest Static Maps
MapQuest has an API of sorts for generating and customizing static map images, which I was using in a...
How to publish an npm package to npm and GitHub Package Registry simultaneously using GitHub Actions
This was originally published on my blog. GitHub Package Registry recently went GA. There is pretty...
Emoji Button, a vanilla JavaScript emoji picker
After playing with React, Svelte, and Angular over the past year, I wanted to try to build somethin...
How to use Font Awesome icons in a vanilla JavaScript project
This was originally posted on my blog. I was working on a vanilla JavaScript project recently and wa...
Your side project is useful, even if no one uses it
This is what most of my GitHub repositories look like: A few of my projects have a dozen or so sta...
svelte-emoji-selector: Emoji picker Svelte component
Another emoji project? Why not! I have been playing with Svelte a lot these past few weeks. I adapt...
svelte-tabs: Tabs component for Svelte apps!
I am working on a Svelte component, and needed tabs. I found this code written by Rich Harris and u...
Emoji picker written with React
No, this isn't the side project I posted about earlier. 😄 This may not be super useful since most OS...