As frontend developers or designers, many times we’re requierd to design or implement accordion-style components. While there are plenty of libraries out there, the easiest way to accomplish the same results without adding bloat is to use the details HTML element.
Read entryHow to maintain the aspect ratio of an element with CSS
Still an experimental feature, but soon we will be able to set an aspect ratio to any HTML element via CSS, without any padding hacks!
Read entry
Spoticalc – Spotify bandwidth calculator
Recently, we were wondering with a couple of friends how much data Spotify was sucking out of our cell phone data plans. I knew that with a 3GB/mo. plan I could get away with most of my needs, but there was also streaming quality into the mix.
Read entryEverything I know about CSS Variables Custom Properties
Brain dump about CSS Custom Properties, AKA CSS Variables They are not variables They are actually called CSS custom properties. Huh. We’ll refer to them as variables for brevity. Declaring variables To declare new variables, you just add a new property that begins with –, inside a ruleset: What is :root? If you notice, in the previous example, in the previous MDN link and other tutorials, you’ll see that variables are declared inside a :root, instead of html {…}, body{…} or whatever. According to MDN, :root is a pseudo-class that matches the root of the tree representing the document. In […]
Read entryHow to convert JPGs to WebP automatically
The easiest way to convert a ton of JPGs to WebP is to use the cwebp command line utility written by the WebP team. Here’s how I do it using a very simple Bash script: This goes through all JPG files in ./source/uploads folder, converts them with a 90% quality rate and writes the output to the same origin.
Read entryHow to convert SVG files to PNG automatically
A few weeks after the designer handed off about 500 tidy little icons, some customer requested PNG versions for all those. Of course one option would be to export all again in PNG format. While possible, I wanted to simplify the designer’s job after creating new icons: hand off the SVGs and we’ll take care of the rest. After researching some alternatives, I ended up implementing this in Bash, using rsvg-convert from librsvg. Install librsvg in macOS brew install librsvg The following script goes through all .svg files in a particular /files folder and converts them to a 400 width […]
Read entryEnable Custom Post Order via code in WordPress
Recently I enabled the great Simple Custom Post Order (SCPO) plugin in a bunch of sites. After you activate it you can go into its settings and enable sorting for all posts, custom post types, taxonomies, etc. We had a particular case though. At my current job, we manage a network of nearly 200 WordPress sites. It makes no sense logging to 200 sites’ admin to update their values. In every site, we needed to Upload and activate SCPO. Enable sorting for categories only. First one can be handled by ManageWP or other remote-access tools. The second seemed a bit […]
Read entryHow to remove captions from Instagram embeds in WordPress
This is a simple code snippet to achieve just that in Instagram embeds, via shortcode or using Gutenberg. You can achieve the same effect in single embeds by using the following shortcode Here’s the result YouTube Use this snippet if you want to achieve a similar result wit YouTube embeds: Has this worked for you? Found: on Reddit
Read entryContributing design to open source
I contributed a logo design to an open source Python library. Learn more about my experience and how you can contribute too.
Read entry
Getting started with Jigsaw
Get started with this amazing static site generator, based on the Blade templating engine from Laravel.
Read entry