Thoughts on front-end development, JavaScript, CSS, and the modern web platform.https://joea.dev/en-ushttps://joea.dev/blog/think-before-you-reach-for-that-div/https://joea.dev/blog/think-before-you-reach-for-that-div/In the past, web user interfaces were constructed largely using <div> and <span> elements. These are generic block and inline elements that really were your only option other than <p> and a few other elements. In 2014, when HTML5 was released as a W3...Wed, 24 Sep 2025 18:12:38 GMThttps://joea.dev/blog/is-vibe-coding-the-future/https://joea.dev/blog/is-vibe-coding-the-future/The concept of “vibe coding” was first introduced by Andrej Karpathy in an X post from February 2025: There's a new kind of coding I call "vibe coding", where you fully give in to the vibes, embrace exponentials, and forget that the code even exists...Sun, 23 Mar 2025 04:00:00 GMThttps://joea.dev/blog/4-years-of-modern-css/https://joea.dev/blog/4-years-of-modern-css/It's October 2024, and I am celebrating four years as a published author. According to Amazon, Modern CSS was published on October 7, 2020. Modern CSS actually started out as a self-published book on Leanpub (a great platform for self-publishing book...Sun, 27 Oct 2024 04:00:00 GMThttps://joea.dev/blog/beyond-breakpoints-leveraging-user-preference-media-queries-in-css/https://joea.dev/blog/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 you to adjust your layout depending on the size of the device. They are a key part of responsive design. You can query based on the width of the devi...Tue, 22 Oct 2024 04:00:00 GMThttps://joea.dev/blog/using-git-bisect-the-detective-tool-for-debugging/https://joea.dev/blog/using-git-bisect-the-detective-tool-for-debugging/You’re working on a bug fix and find some bad code that causes a bug. The git blame command will tell you who the last developer was that modified that line, and when they modified it. But what if you don’t know what code introduced the bug? For thes...Fri, 04 Oct 2024 03:19:15 GMThttps://joea.dev/blog/steps-for-installing-a-local-ai-copilot-in-visual-studio-code/https://joea.dev/blog/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 your code to a third party AI service? You might not know this, but you can run a large language model (LLM) locally on your computer, and even integrat...Thu, 12 Sep 2024 20:12:07 GMThttps://joea.dev/blog/fun-with-arrays/https://joea.dev/blog/fun-with-arrays/In this article, we'll look at some weird quirks with JavaScript arrays to learn a little more about how they work under the hood. An array is a collection or list of values. It could hold just strings: const names = ['Luke', 'Leia', 'Han']; Or a mi...Wed, 25 Oct 2023 19:03:57 GMThttps://joea.dev/blog/are-computer-science-degrees-still-relevant/https://joea.dev/blog/are-computer-science-degrees-still-relevant/I took a more traditional path into tech, going to a 4-year university and getting a Computer Science degree (way back in 2004!). These days, it's no secret that there are many alternate paths to a software development job. The three main paths today...Fri, 13 Oct 2023 19:26:10 GMThttps://joea.dev/blog/understanding-color-contrast-for-accessibility/https://joea.dev/blog/understanding-color-contrast-for-accessibility/Accessibility is a popular topic these days - as it should be. There are many benefits of making your application accessible - it promotes inclusivity by making your app usable by everyone. There are many aspects of accessibility that you need to kee...Fri, 06 Oct 2023 14:33:49 GMThttps://joea.dev/blog/understanding-error-handling-in-promise-chains/https://joea.dev/blog/understanding-error-handling-in-promise-chains/Promise chains You can create a chain of Promises by returning new Promises from a then handler. Here's a simple example that chains 3 promises together: Promise.resolve(1) .then(id => { console.log(`Success: ${id}`); return Promi...Fri, 07 Jul 2023 16:13:44 GMThttps://joea.dev/blog/customizing-jsonparse-and-jsonstringify/https://joea.dev/blog/customizing-jsonparse-and-jsonstringify/The JSON.stringify and JSON.parse functions are handy for converting objects to JSON strings and back again. However, not all properties of an object are serializable. Functions, regular expressions, and Date objects are all examples of values that c...Thu, 27 Apr 2023 03:27:44 GMThttps://joea.dev/blog/how-many-ways-can-we-reverse-an-array/https://joea.dev/blog/how-many-ways-can-we-reverse-an-array/There's a Stage 3 proposal to add several array methods including Array.prototype.toReversed, which will create a reversed copy of the array. This will be a welcome addition since Array.prototype.reverse mutates the array, which often is not what we ...Wed, 23 Nov 2022 03:43:27 GMThttps://joea.dev/blog/comparing-const-declarations-and-immutable-objects/https://joea.dev/blog/comparing-const-declarations-and-immutable-objects/Way back in my Java days, when interviewing candidates, I would often ask the candidate to explain the meaning of the final keyword. Many times I would get an answer along the lines of "It's a constant value" or "It can't be changed once assigned". F...Thu, 01 Sep 2022 04:55:56 GMThttps://joea.dev/blog/promise-tips-when-do-i-need-to-create-my-own-promise-instance/https://joea.dev/blog/promise-tips-when-do-i-need-to-create-my-own-promise-instance/Promises are pretty ubiquitous these days, but sometimes Promise based code is more complex that it needs to be. Consider this getUserDetails function: function getUserDetails(userId) { return new Promise((resolve, reject) => { fetch(`/users/${...Fri, 28 Jan 2022 16:07:51 GMThttps://joea.dev/blog/comparison-of-javascript-modules/https://joea.dev/blog/comparison-of-javascript-modules/JavaScript has been around since 1995. In that time there have been several different ways to create modules. Due to browser compatibility issues and legacy codebases, all of these module types are still in use today. What is a module? A module is so...Sun, 29 Nov 2020 22:23:09 GMThttps://joea.dev/blog/using-animations-with-tailwind-css/https://joea.dev/blog/using-animations-with-tailwind-css/Tailwind CSS is awesome. Animations are awesome. So let's combine them! It's really easy to define your own custom animations with Tailwind. Quick CSS animation refresher A CSS animation is defined by creating a set of keyframes. These keyframes defi...Thu, 26 Nov 2020 04:14:55 GMThttps://joea.dev/blog/javascript-maps-vs-plain-javascript-objects/https://joea.dev/blog/javascript-maps-vs-plain-javascript-objects/ES2015, also known as ES6, added lots of new things to the JavaScript language. One very useful addition was the Map. Map allows you to map keys to values. Couldn't we already do that? You might be thinking - we already could map keys to values in J...Fri, 25 Sep 2020 15:36:31 GMThttps://joea.dev/blog/introduction-to-flexbox/https://joea.dev/blog/introduction-to-flexbox/All the cool kids may be using CSS Grid now, but there are still plenty of scenarios where Flexbox does exactly what you need. This article will give an introductory look at what you can do with Flexbox. What is Flexbox? Flexbox is the more commonly ...Thu, 24 Sep 2020 18:18:52 GMThttps://joea.dev/blog/introduction-to-custom-elements/https://joea.dev/blog/introduction-to-custom-elements/Custom elements have pretty good browser support. Of course, they aren't supported in Internet Explorer, but that shouldn't surprise anyone. If you don't need to support Internet Explorer 11, you can absolutely use Custom Elements today, as they are ...Wed, 23 Sep 2020 15:13:23 GMThttps://joea.dev/blog/how-emojis-work/https://joea.dev/blog/how-emojis-work/In the process of writing Emoji Button, my plain JavaScript emoji picker (which turns one year old tomorrow, August 29th!), I have learned a lot about emojis! Hopefully someone out there will find this information useful, or at least interesting. Emo...Sat, 29 Aug 2020 01:20:52 GMThttps://joea.dev/blog/introduction-to-tailwind-css/https://joea.dev/blog/introduction-to-tailwind-css/There's been a lot of buzz lately about Tailwind CSS. Maybe you're curious about it but haven't taken a look yet. This article is for you! Utility-first CSS With traditional CSS, you define rules for different elements on your page. Each rule likely ...Fri, 28 Aug 2020 01:56:12 GMThttps://joea.dev/blog/all-about-this-in-javascript/https://joea.dev/blog/all-about-this-in-javascript/What is this? It depends on the situation. Let’s look at a few common scenarios. The global this Outside of a function, this references the global object. In a browser environment, this is typically the window object. In this scenario, you can set pr...Fri, 28 Aug 2020 00:43:06 GMThttps://joea.dev/blog/how-to-use-font-awesome-icons-in-a-vanilla-javascript-project/https://joea.dev/blog/how-to-use-font-awesome-icons-in-a-vanilla-javascript-project/I was working on a vanilla JavaScript project recently and wanted to add some Font Awesome icons. Previously I have used Font Awesome icons in React or Angular projects, but never plain JavaScript. It turned out to be pretty easy. Install packages Fi...Tue, 10 Sep 2019 02:07:51 GMThttps://joea.dev/blog/in-defense-of-the-humble-consolelog/https://joea.dev/blog/in-defense-of-the-humble-consolelog/There is some negative sentiment out there about using console.log for debugging. It's true that, in many cases, the browser's debugger is more powerful. However, there are still scenarios where using console.log can be very useful. Recently I was de...Thu, 08 Aug 2019 02:10:05 GMT