Building a Quiz with Eleventy and Eleventy Serverless / / No Comments A few days ago, I was thinking about what a "quiz" would look like in Eleventy. I put that in quotes because there’s a lot of different ways you can think of quizzes and how they’re built. For my demo, I set my list of features to the following: Raymond Camden… more → Posted in: JavaScript Tagged with: building, Eleventy, Quiz, Serverless
Immediately Executing setInterval with JavaScript / / No Comments Employing setInterval for condition polling has really been useful over the years. Whether polling on the client or server sides, being reactive to specific conditions helps to improve user experience. One task I recently needed to complete required that my setInterval immediately execute and then continue executing. The conventional and best way to immediately call a function at the beginning of a setInterval is to actually call the function before the initial setInterval` is called: myFunction(); setInterval(myFunction, 1000); // Every second If you truly want to isolate the function call to the setInterval, you can use this trick of self-executing function that returns itself: // Use... more → Posted in: JavaScript Tagged with: Executing, Immediately, JavaScript, setInterval
Integrate Your Netlify Builds with Tidbyt and Pipedream / / No Comments A few months ago I randomly came across a Facebook app for a little device that looked completely unnecessary yet also completely cool: Tidbyt. The Tidbyt is a little hardware LED device that shows different pieces of data, for example, sunrise and sunset: Raymond Camden… more → Posted in: JavaScript Tagged with: builds, Integrate, Netlify, Pipedream, Tidbyt
Image Upload Preview in Alpine.js / / No Comments So as I’ve said a few times now, I’m on kind of a trend here on rebuilding previous demos in either vanilla (i.e. no framework) JavaScript or my new favorite framework, Alpine.js. In that vein, I’ve got an update to a post I first wrote nearly a decade ago, "Adding a file display list to a multi-file upload HTML control". I followed that up with a Vue version here: "Vue Quick Shot – Image Upload Previews". The idea was to enhance a form that asks for image uploads by adding a simple preview of the image. This helps as it lets the user be sure they’ve selected the right file. Raymond Camden… more → Posted in: JavaScript Tagged with: Alpine.js, Image, Preview, upload
More Awesome Git Aliases / / No Comments In the last article in this series, Awesome Git Aliases, we took a look at some awesome aliases for Git. However, the true power of Git aliases comes from writing custom scripts. These allow you to build Git commands that can do anything you can imagine. In this article, I’ll show you how you can create script aliases with Git. We’re going to take a look at several awesome scripts you can use for Git that are super useful and will save you a bunch of time. Script Aliases We’ll be using Bash for our scripts. Bash is an ugly language, but it has the benefit of working almost anywhere. For your own scripts, you can use any scripting language you’d like. If you’re not... more → Posted in: JavaScript Tagged with: Aliases, awesome, More
Links For You / / No Comments A few quick links here to end May. This week has been incredibly difficult for many people, myself included. Please remember that therapy can be life saving, it was for me. If you need help, please sure to reach out and get support. Your mental health is just as important as your physical health. Raymond Camden… more → Posted in: JavaScript Tagged with: links
CSS :optional / / No Comments A decade ago HTML and CSS added the ability to, at least signal, validation of form fields. The required attribute helped inform users which fields were required, while pattern allowed developers to provide a regular expression to match against an <input‘s value. Targeting required fields and validation values with just CSS and HTML was very useful. Did you know that CSS provides :optional to allow you to style form elements that aren’t required? input:optional, select:optional, textarea:optional { border: 1px solid #eee; } [required] { border: 1px solid red; } In a sense, it feels like :optional represents :not([required]), but :optional is limited to just form fields.... more → Posted in: JavaScript Tagged with: optional
Amazing Text Editing Experiences with UltraEdit (Sponsored) / / No Comments There’s a common saying that adults spend more time with coworkers than family; for us software engineers, we spend more time with our text editor than our families. And why shouldn’t we? They’re our main tool to do a variety of things, and as these editors evolve, they’re capable of doing even more. UltraEdit, a paid text editor, has been around for decades and continues to be immensely powerful! Quick Hits UltraEdit boasts a loyal user base of over 4 million Decades of engineering expertise and stability baked into the editor The UltraEverything Suite includes a Code Editor, a File Finder and Compare tool, and FTP client Available on Mac, Linux, and Windows The entire... more → Posted in: JavaScript Tagged with: Amazing, editing, experiences, Sponsored, text, UltraEdit