Quick Tips

Override window.alert – Website Design Article

For years the only bit of feedback web developers could get was via alert(“{str}”) calls. These days we have the web console but, in rare cases, we don’t have a console and alert calls are our only window into a value at a given time. One problem: if an alert sneaks into production code, your site looks like it’s been hacked. Your site looks like it’s malware! To prevent any of those issues, you can add this snippet to your…

Read More

Hex Opacity Table – Website Design Article

We’ve used hex colors for years but 8-digit hexadecimal is still relatively new. While rgba is simple to understand, 8-digit hex is more difficult, as you need to provide a hex representation of a numeric value. The following is a hexadecimal chart of opacity! Opacity ValueHex Code 100FF 99FC 98FA 97F7 96F5 95F2 94F0 93ED 92EB 91E8 90E6 89E3 88E0 87DE 86DB 85D9 84D6 83D4 82D1 81CF 80CC 79C9 78C7 77C4 76C2 75BF 74BD 73BA 72B8 71B5 70B3 69B0 68AD…

Read More

How to Set a Default Commit Message – Website Design Article

Having a default commit message is really useful for a number of reasons: It can formalize your commit messagesIt serves as a good reminder for the information you should add to your commit message, like issue numberIf you set it to “Drunk AF, don’t accept this” To set a default commit message on your local machine, start by executing the following from command line: git config –global commit.template ~/.gitmessage This tells your local git config to pull the text from…

Read More

How to Specify User Agent with cURL – Website Design Article

Over the years I’ve shared how to perform a number of actions with cURL: how to send POST data, how to retrieve headers, follow redirects, check GZIP encoding, and more. Another useful cURL directive is sending the user agent, as some servers respond with different content or headers depending on the user agent. Let’s have a look at how easy it is to send the user agent with cURL! The user agent may be sent with the -A or –user-agent…

Read More

Git Branch Autocompletion – Website Design Article

Naming git branches is something most of us have down to a science. My branch naming pattern is usually {issue number}-short-feature-description, though many developers prefer to lead with the description and end with the issue. Regardless of the pattern you use, having a feature like autocomplete can save you a lot of time typing or copy/pasting. Here’s how you can implement autocomplete for git branches! Start by downloading the git-completion.sh file from GitHub: curl https://raw.githubusercontent.com/git/git/master/contrib/completion/git-completion.bash -o ~/.git-completion.bash Next, add the…

Read More

Duplicated Argument Names – Website Design Article

Oftentimes we override or monkey patch functions and, in many cases, there are arguments we don’t care too much about. A common practice for those arguments is using _ for argument names — it’s a generally accepted and known practice for “this isn’t important”. I started thinking about multiple useless arguments and if you could use the same name for the sake of minification — you can. So what happens when you use the same argument name more than once?…

Read More

JavaScript waitForTime – Website Design Article

I write a lot of tests for new features within Firefox DevTools. We have hundreds of “mochitests” which open the browser and perform synthetic actions like clicking, typing, and other user actions. I’ve previously written about waitForever which essentially halts following actions without locking the browser. Another utility I enjoy is waitForTime, an async JavaScript function that I can await to give breathing time between two tasks. Whenever I want to wait a given amount of time between tasks, I…

Read More

Detect if Element is a Web Component – Website Design Article

I’ve advocated for web components since before they became a spec, mostly inspired by the Dojo Toolkit’s dijit framework. Empowering first class JavaScript widgets, as opposed to a mess of DIVs and templates, always made the most sense. Now that web components exist, and awesome frameworks like Ionic are based on them, I wanted to discover how to detect a web component, as opposed to a regular HTML element, with JavaScript. As it turns out, it’s much easier than you’d…

Read More

How to Reverse a Video – Website Design Article

One of my favorite media utilities is ffmpeg. This command line utility allows us to do some pretty amazing stuff like; Every once in a while I see a meme or funny video that reverses a video for effect. Since ffmpeg does just about everything I can imagine, I turned to it. To reverse a video, use the following ffmpeg command: ffmpeg -i my-video.mp4 -vf reverse my-video.mp4 Remember that you can simply change the video format via the output video’s…

Read More

JavaScript Detect Async Function – Website Design Article

JavaScript async/await has changed the landscape of how we code. We’re no longer stuck in callback or then hell, and our code can feel more “top down” again. Async functions require the following syntax: async function myFunction() { } To use await with a function, the function needs to be declared with async. That got me to thinking: is it possible to detect if a function is asynchronous? To detect if a function is asynchronous, use the function’s constructor.name property:…

Read More

Recursive Array.flat – Website Design Article

There was much talk about Array.prototype.flat during its early stages, starting with the name alone. Many developers preferred the name flatten but the spec differed from MooTools’ implementation. MooTools would recursively flatten an array but the new, official flat implementation defaults one level of flattening,. The current implementation of Array.prototype.flat is: [1, 2, [3], [[4]]].flat(/* depth */); // [1,2,3,[4]] .flat only flattens arrays to one level by default, but what if you want a truly flattened array? You can use…

Read More

Using Array reduce – Website Design Article

Every developer who specializes in any programming language will tell you there’s a powerful tool the language provides that they rarely use and wish they knew more about. For me, it’s Array.prototype.reduce. I quite enjoy the other Array methods like map, filter, and find, but reduce is one that I knew was powerful but never really had much use for. It wasn’t until I was refactoring some of the Firefox DevTools Debugger code that I found a great use case…

Read More

Type Conversion with JavaScript Arrays – Website Design Article

JavaScript’s loose nature allows developers to employ amazing tricks to do just about anything you’d like. I’ve detailed how you can filter falsy values in arrays using a filter(Boolean) trick, but reader David Hibshman shared another trick for typecasting array values the same way. To typecast an array of elements, you can use map and the desired return type: [“1”, “9”, “-9”, “0.003”, “yes”].map(Number); // [1, 9, -9, 0.003, NaN] I love this trick but you could argue the code…

Read More

Remove Recent Applications from Dock – Website Design Article

A Mac user’s dock is a sacred place. We customize our dock to no end, and if you’re ultra organized like me, you even use dock separators to group your app icons. Apple recently implemented a feature which displays three recently used apps in the dock. For basic users that’s reasonable, but for power users like us, it’s an annoyance. To remove this recent applications feature: Click the Apple menu, then choose System Preferences Click the Dock icon Uncheck the…

Read More

Open FaceTime Call from Command Line – Website Design Article

Communication tools are always associated with UIs, and for good reason — if you want communication to be easy and intuitive, you need easy and intuitive interfaces. We need communication tools to provide the lowest barrier of entry, since not all users will be tech savvy. For tech experts like us, however, we love command line tools to automate just about everything. This led me to thinking: is it possible to initiate a FaceTIme call from command line? # Call…

Read More

Colorized Brackets for IDE – Website Design Article

Coders treat their text editors and IDE’s like fragile beings, and for good reason: we spend a ton of time in them and having our tweaks and extensions can make us incredibly productive for our personal workflows. I always love hearing about what extensions and workflows other developers use to see if I can put them to my own use. That’s why @Souvir may have changed my life with this tweet: You NEED multi colorized brackets in your IDE, it…

Read More

JavaScript Labels – Website Design Article

No matter how long you’ve been a JavaScript developer, there will always be language features that you didn’t know about until you saw them in a fringe piece of code. Your reaction generally is a bit like: One of those features I see developers quizically trying to figure out is JavaScript labels, which allow you to manage break and continue with JavaScript loops. Let’s have a look at them! The basic format of a loop is {loopname}: before the loop…

Read More

List USB Devices from Command Line – Website Design Article

I was recently creating a Recalbox with my 5 year old son and it was an awesome experience; I saw the excitement and curiosity in his eyes while helping him put together a video game machine. We added NES, SNES, and Nintendo 64 games to the device but it became apparent that the N64 controller needed its buttons reconfigured in a config file. To do so I needed to know the device’s USB name. You can use the following command…

Read More

Get File MIME Type from Command Line – Website Design Article

I’ve gotten skilled at shell scripting over the years. I love a good GUI but knowing how to automate makes you a much more powerful engineer. Much of my scripting requires recursing over directories and processing a file if it meets a given criteria, which is often file extension or MIME type. You can use the following shell command to get a file’s MIME type: file –mime-type -b Downloads/main.js # text/plain file –mime-type -b Downloads/logo.jpg # image/jpeg It’s important to…

Read More

React indeterminate – Website Design Article

I’ve fallen in love with React.js and JSX over the years; state-based rendering and a logical workflow have made me see the light of this modern framework. That doesn’t mean I don’t sometimes get a bit frustrated that the “simple” things seem harder than they should be. Getting a reference to an element and modifying its properties used to be simple but now you have to take into account you don’t usually have element references — you need to think…

Read More

Mac Dark Mode from Command Line – Website Design Article

One of the best professional decisions I ever made was switching to a dark text editor theme. I suffered from horrible headaches for years, partially caused by late night coding sessions with blindingly bright computer screens. Recently Apple implemented a dark OS theme which helps my eyes, and thinking in a command line state of mind, I was wondering if there was a way to change dark or light mode via command line…and I found out how! Switching between light…

Read More

CSS :placeholder-shown – Website Design Article

One of the first plugins that would hit a new framework in the early days of JavaScript frameworks was a placeholder plugin, which is why we were so excited when HTML5 brought us the placeholder attribute. Then CSS lovers like me were thrilled when the CSS spec allowed us to style placeholders. One recent problem I faced was wanting to apply a specific font-family to an <input> element but only when that element contained text. My initial thought was needing…

Read More

Set Desktop Wallpaper from Command Line on Mac – Website Design Article

Whenever I need to accomplish a basic task that typically calls for interacting with a UI, I challenge myself to complete the task from command line. After all, most UIs are simply a mask over basic commands, especially when it comes to the operating system. Suddenly I feel like an automation or systems engineer! One task I can imagine an IT administrator would need to automate is setting the desktop wallpaper via a script, remotely, or simply by providing the…

Read More