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.
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 […]
Categories
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 […]
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 […]
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 […]
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? […]
Categories
Contributing 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.
Categories
Getting started with Jigsaw
Get started with this amazing static site generator, based on the Blade templating engine from Laravel.
Categories
Don’t design your emails
I just came across a post from 2016, about why you shouldn’t design your email campaigns. This probably doesn’t apply to all situations and industries, but I know for a fact that many clients pay for lots of hours of crafting, debugging and testing custom templates that aren’t really worth the time. Link: Don’t Design […]
A lightweight and modular front-end framework for developing fast and powerful web interfaces. I’ve been contributing to a project where this little UI framework is used, and it’s pretty cool. Check it out: UIkit
Categories
Updating Laravel Homestead
(!) Notice: this post is probably outdated Recently I needed to update my Homestead VM to a more recent version, because I needed to run PHP 7.2. While you can just update PHP on a current Homestead instance, I was using a very old Homestead version and wanted to update it. Moreover, I wanted to […]
I was thinking of doing an in-depth tutorial on Timber. A few days since I started a draft, CSS-Tricks published “Timber and Twig Reignited My Love for WordPress“, which is a great read. However, I decided to push some of it live because this plugin deserves more love. I’ve built a lot of WordPress sites. Recently, it has become […]
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: View the code on Gist. The problem here is very common. You have to: Loop every 3/4/n items. Insert a separator or […]
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 […]
Categories
Open a chromeless browser
Today I saw a tweet from Das Surma, where it shows how you can open a chromeless Google Chrome browser. Like this: How to Open Terminal app type open -n -a ‘Google Chrome’ –args “–app=[URL]” where [URL] is something like http://google.com Done! If you’re curious about what those flags do, -n “Open a new instance of […]
PSA: You don’t need to add the whole Bootstrap code and a zillion dependencies and plugins just because it’s easier to use col-md-3 than hacking some CSS to float a few divs. Use the link below to download a customized version of Bootstrap. Need the Grid System? Perhaps the pretty Glyphycons or tooltips? This has you covered: […]
My last post was about front-end design workflow. Since then I got to think that others might benefit from it in a more concrete way. So here it is, I put everything I use to kickstart a new HTML design project. For lack of time and creativity I named it HTML0. Its main parts are Browsersync + […]
Categories
A Front-end design workflow (Jul 2016)
It’s been quite a while since I started coding HTML+CSS designs from PSD/Ai/Sketch files. I started using plain CSS files, then Less, started using the awesome CodeKit, then Bash scripts, then Sass, tried Bourbon, tried Neat, learnt Gulp, npm, etc. I wanted to share what works for me today. I mean, CodeKit still works great and I […]
Here’s a fresh new template for a minimal landing page for your new website or app for you to download. Replace the rocket emoji with a big H1 text or your website/app logo, put a catchy tagline, place a killer screenshot below and you’re done!
Categories
Contact forms without code
You just designed and implemented a beautiful portfolio. You’re almost about to publish it, but remember you still have to make that static contact form actually send messages to your inbox. You google “contact form PHP”. And you know the rest.