An infrequent blog about interesting tidbits I've run into as a front-end developer
Dotfiles are hidden files that usually live in a user's home directory (or subdirectories of the home directory) to store per-user settings. Some people keep their dotfiles in a repository which, in theory, makes it easy to share the same set of dotfiles between multiple machines. Doing this usually involves some way of syncing (specific files in) a home directory with a repository or symlinking…
When React version 17 was released doing: $ npm update react Would not result in your project now containing React version 17, so why is this? From the npm-update documentation (emphasis mine) This command will update all the packages listed to the latest version (specified by the tag config), respecting semver . The devil is in the details. npm-update will respect semver. So if your package.json…
Today I came across this interesting article by Manuel Matuzović. The whole post is a nice read, but one nice trick jumped out for me. Manuel is “cutting the mustard” [1] using this little embedded JavaScript snippet: < script type = " module " > document . documentElement . classList . remove ( 'no-js' ) ; document . documentElement . classList . add ( 'js' ) ; </ script > Using the type="module"…
This site recently switched from Hugo to Eleventy. That meant dependencies that needed to be kept up to date. For this I use GitHub's amazing Dependabot . This worked flawlessly up until earlier this week. Dependabot had created a pull request to bump the version of eleventy-plugin-syntaxhighlight from 3.0.6 to 3.1.0 which somehow broke the build of the site. As it was only a minor version bump…
Up until recently this blog was generated by Hugo . A few weeks ago I decided to jump on the bandwagon and switch to Eleventy . All posts were already written in Markdown so the conversion was fairly pain free. In the process I had missed that footnotes were broken on these two pages . I don't use footnotes very often but thought it would be nice for them to work again. I remembered that the…
As you may know, the first rule of ARIA is to avoid using it when you can use a native HTML element or attribute that already has the desired behaviour and semantics built-in. That means that this … < div role = " button " > Submit </ div > …is terrible and this… < button type = " submit " > Submit </ button > …is how it should be done (or could be done, the type attribute may be omitted which…
The other day a friend asked if I had ever seen node-sass error with: Internal Error: Incompatible units: '%' and 'rem' . I didn't think I ever had, but I remembered reading about the relatively new min() function in CSS only the week before. It was added in the Values and Units Module Level 4. The error, in this case, was caused by this tiny snippet: .selector { padding-top : min ( 10% , 1rem ) ;…
There are times where, as part of a command, you may have to type a password on the command line. Unfortunately, all commands normally end up in your Bash history ( ~/.bash_history ) which might not be what you want. The following example can be used to create a new repository on GitHub from the command line. $ curl -u user:token https://api.github.com/user/repo -d '{"name":"my-new-repository"}'…
By default macOS's Finder will not show hidden files. This can be overridden using the defaults command line utility and restarting Finder. $ defaults write com.apple.finder AppleShowAllFiles -bool TRUE $ killall Finder However, this will always show all hidden files until the above is undone by replacing TRUE with FALSE . This looks messy and may not be what you want and having to retype the…
TL;DR Use --my-var: #{$my-sass-variable}; to be able to use Sass variables as values for CSS Custom Properties. The problem Let's say you have the following SVG of a circle with an exclamation mark that you want to inline in your markup. < svg height = " 48 " width = " 48 " viewBox = " 0 0 48 48 " > < circle fill = " currentColor " cx = " 24 " cy = " 24 " r = " 20 " /> < rect fill = " #fff " x = "…
webpack is a bundler which means it is good at bundling things. Out of the box it only understands JavaScript's import and require statements and because of that can just bundle JavaScript. If you give it an entry point [1] , it will start trawling through your code and bundle everything finds at import and require statements into one bundle [2] . A very minimal webpack configuration file looks…
The hidden attribute is used to hide content that is not yet or no longer relevant. Modern browsers will prevent elements with a hidden attribute from being rendered by applying display: none to the element. Because of this, changing the value of the display property will override the hiding behaviour. The hidden attribute on the <div> with class something-flex in the example below may not do what…
Brace expansion is a mechanism that is used to put together strings to use as part of a command. It is often used to reduce the amount of typing. How does it work? A pattern that should be brace-expanded consists of a so called preamble , an opening { , one or more comma-separated strings, a closing } , and finally a postscript . Both the preamble and the postscript are optional. Brace expansion…
If you ever use the command line you may have run into the following. You enter a command only to find out that you should have used 'sudo'. For example when trying to copy a file to a location you don't have write access to. $ cp foo /usr/local/bin cp: /usr/local/bin/foo: Permission denied To repeat the previous command preceded by 'sudo', you can use bash's (and csh's and the ever popular zsh's)…