How 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!
Category: Snippets
How 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…
How 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…
Enable 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…
How 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. [instagram url=https://www.instagram.com/p/B1WjYcxCmHp/ hidecaption=true] 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…
How to iterate a list in batches using Twig (or plain PHP) ✦
Recently I had to loop through a series of elements in a WordPress template (thanks Timber), which happened to be using Bootstrap. If you ever used Bootstrap, you are familiar with the following markup: The problem here is very common. You have to: Loop every 3/4/n items. Insert a separator or whatever every 3/4/n items.
How to fix: MySQL not starting on MAMP (Pro) ✦
I recently had to install MAMP Pro, in order to do some separate work from my Laravel Homestead VM. After a weird Mac crash, MAMP would no longer start the MySQL server. This was the data from the logs: To fix this, go to MAMP, File > Edit Template > MySQL > [version] and add the line…
How to open a chromeless Chrome browser window on macOS ✦
This is a great tip to run apps on separate windows or just for taking cool app screenshots, like this: How to open a chromless window Open Terminal app and type: Where [URL] is the desired URL. e.g: If you’re curious about what those flags do, -n “Open a new instance of the application even…
Run a simple HTTP server with one command line ✦
Recently someone told me this great and simple trick on how to run an HTTP web server with just one command line. This is useful for a million things, but I use it for prototyping and avoid same-origin policy in Chrome.
One line browser notepad ✦
I found out this amazing tip the other day that turns a browser tab into a full size editable area. As the author said, many of us live on the browser. So having somewhere to jot down ideas/lists while browsing or programming without leaving “home” is great. I started using this version, but the link…