Published in Level Up Coding·6 hours agoMember-onlyCancel Duplicate Fetch Requests in JavaScript Enhanced FormsIf you’ve ever use JavaScript fetch API to enhance a form submission, there’s a good chance you’ve accidentally introduced a duplicate-request/race-condition bug. Today, I’ll walk you through the issue and my recommendations to avoid it. (Video at the end if you prefer that) Let’s consider a very basic HTML form…Java Script7 min readJava Script7 min read
Jan 26Member-onlyTop 2022 Blog Hits and What I LearnedFirst off, thank you for being here. I’ve been reviewing the traffic on my site for 2022 and I feel amazed and humbled. It’s been the best year for my website and for individual articles, and it’s all thanks to readers like you. Also, I learn a LOT and I…Writing7 min readWriting7 min read
Published in Level Up Coding·Jan 24Member-onlyCSS Named Colors: Groups, Palettes, Facts, & FunDid you know that CSS has Named Colors? Yeah, you’re probably familiar with “white” or “black”. But did you know there are 148 named color keywords? Some of them are silly, some are common, and some are down right useless. Who’s going to think, “You know what color we need…CSS4 min readCSS4 min read
Published in Level Up Coding·Jan 19Member-onlyPromises, Thenables, and Lazy-evaluation: What, Why, HowIt’s the start of a new year, and while lots of folks are promising to be more active, I’m going to show you how to make Promises to be more lazy…JavaScript Promises, that is. It’ll make more sense in a moment. First, let’s look at a basic Promise example…Java Script5 min readJava Script5 min read
Published in Level Up Coding·Jan 10Member-onlyHow to Build Great HTML Form ControlsToday I’m going to show you all the things to consider when building the perfect HTML input. Despite its seemingly simple nature, there’s actually a lot that goes into it. How to Make the Control Well, we need to start somewhere. Might as well start with the control itself. HTML offers three different form controls…Web Development6 min readWeb Development6 min read
Published in Level Up Coding·Jan 5Member-onlyConditional API Responses For JavaScript vs. HTML FormsToday, I’ll show you how to detect whether an HTTP request was submitted via HTML form or with JavaScript to the server. The examples in this post are based on Nuxt.js and include references to a few global functions (defineEventHandler, getRequestHeaders, sendRedirect). It’s not important that you know how they…Backend6 min readBackend6 min read
Published in Level Up Coding·Dec 19, 2022Member-only4 ways CSS :has() can make your HTML forms even betterThere’s been a lot of hype lately around the CSS :has() pseudo-class. And rightly so! It’s basically the “parent selector” we’ve been asking for for years. Today I want to focus on ways we can use :has() to make HTML forms even better. Preface In this article I’ll be working…Web Development11 min readWeb Development11 min read
Published in Level Up Coding·Dec 6, 2022Member-onlyPX or REM in CSS? Just Use REMCSS has a lot of different units that you can choose from. In many cases, there is one unit that’s clearly better than any others. However, one question that seems to come up throughout my career is whether you should use pixels or rems on certain properties where it…CSS5 min readCSS5 min read
Published in Better Programming·Nov 23, 2022Member-onlyAutomatically Deploy Apps to VPS With Git Triggers and CoolifyAn introduction to Coolify, a project that can deploy custom applications based on Git events. It’s similar to a self-hosted Netlify — I make a lot of silly projects, and one thing I’ve wanted for a long time is a way to automate the deployment process using Git. So, in this article, we are going to be tackling just that. First things first, let’s settle on what the target is. …Programming7 min readProgramming7 min read
Published in Level Up Coding·Nov 8, 2022Member-only6 Steps to Improve HTML Images For Users and DevelopersTLDR: <img> with just src: Easy to implement. Good developer experience. No responsive images. No modern formats with fallbacks. Likely uses more bandwidth. Worst user experience. <img> with srcset attribute: Moderate work. Ok developer experience. Supports responsive images for less bandwidth. No modern formats with fallbacks. Leaves potential savings…Web Development12 min readWeb Development12 min read
