Loop 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.

You can achieve this with modulo (divisibleby) and checking if the loop index is last and other weird magic. However, Twig introduced the batch filter in version 1.12.3, where you can make this much less cumbersome.

So, adapting the current example and their docs, this is how we achieve a clean loop:

Much better, right?

I realized PHP has a built-in function that handles this. It’s called array_chunk which, of course, splits an array into chunks (or batches as I recalled, and the reason why I hadn’t been able to find it on the docs.)

Edit 19 Jul: Added plain PHP version.

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 highlighted below.

# The MySQL server
innodb_force_recovery = 1

The restart the server. After this you can comment out that line. Hopefully you will now be able to run the server again.

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 the application even if one is already running.”, -a “Opens with the specified application” whatever that means.

Use only grid system (or other component) from Bootstrap

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:

Customize & Download Bootstrap

HTML0 – A starting point for front-end design

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 + Sass, with a couple of Sass helpers I use frequently.

Any feedback is welcome :)

Fork HTML0 on GitHub.

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 love it, just like Less or plain old CSS. But this config is what really helps me be more productive.


The first thing that works great for me is Sass. I certainly don’t use -know even- know half of its features, but just being able to import, use variables, nesting, mixins, etc. makes me more productive than plain CSS.

On a sidenote, I moved from Less to Sass basically because of the command line utility to watch changes and compile automatically, using sass --watch. That also changed a bit afterwards.

HTML5 Boilerplate

This is pretty standard nowadays. I almost always steal the basic HTML  from the HTML5 Boilerplate.


I started using Bower, I love it and it works great. However, now I use some tools to compile Sass, prefix or concat that are stored in npm. So, I don’t want to be using two package managers if I can use just one.


This one is pretty straightforward. As per their docs: “just forget about vendor prefixes and write normal CSS according to the latest W3C specs”.


This has been the latest tech I’ve incorporated into the workflow and now I love it. It lets you reload multiple browsers when it detects a file change, remote debug, among many things.

Gulp – Putting it all together

At this time you may wonder how to put this all together. The answer is Gulp. In this setup, Gulp compiles Sass files, autoprefixes them, outputs them in a separate folder. On the fly, as you change Sass files. Also, it provides a small server, watches for changes in other files, and reloads the browser on all connected devices.

Here’s how a Gulpfile looks like:

To start the server, you have to run $ gulp and a browser window pops up pointing to localhost:3000 or similar.


SVG Injector

This little tool lets you inline SVG automatically on the HTML when an image tag src attribute points to an SVG file.