Responsive menu in pure CSS

Having menus that gracefully adapt to the size of your screen can be troublesome. Inspired by the collapsible menu of Bootstrap, here is a pure CSS implementation using the checkbox trick to toggle visibility.

The example attached features a smaller menu when the screen is narrower than 900px and is collapsed then narrower than 650px. I encourage you to test whatever suits you best.

On collapse toggle, the height and visibility are animated for a smooth transition. height: auto; is not directly supported, so we instead animate the max-height property. The downside is that you need to specify the max-height your menu will ever have. If you set this too high, you will experience a slight graphic glitch.

The toggle handle is also inspired from Bootstrap, but with minimal markup.

* the :checked selector is not supported prior to IE9, you may use a polyfill like http://selectivizr.com/ if you need to.

Happy coding !

To test it, resize your browser.

Live demo on CodePen.io

Tips for an efficient interview

I have only been in the Web industry for 5-6 years but I am already a bit sceptical when giving an interview. Some people are so good at talking about stuff they do not know at all. Hiring someone takes a lot of time and energy so when you end up with someone not up to the task, it can be really frustrating and demotivating.

I am absolutely not an interview specialist but here are some ideas I would have liked to have before.

Basic questions

Some competences are easy to verify in a verbal interview. I once had a front-end developer candidate who was claiming he was very competent in about everything I asked him. I was skeptical so I asked him very simply: “How would you write it in CSS if you wanted to put all links in a page in red ?” His answer was that he was a bit rusted about this one and would need to google it. The interview was over and no more time was wasted. 

In the interview aftermath, we asked ourselves how we could have lost less time and thus, the idea of basic questions over the phone quickly emerged and a lot of interviews were avoided.

Speed jobbing

For a second year in a row, me and one of my partner went to an event where around 50 candidates are meeting about 10 companies. They are matched by the organizers based on the needs of the companies and the resumes of the candidates. We met almost 15 very varied candidates for 5 minutes each; really in the concept of speed dating. It is a very efficient way to meet a lot of people. It they are interesting, you can call them for a real interview later and if not, well you only lost 5 minutes.

Real-world test

We recently made interviews where we tried a different approach. We let each candidate an hour to install and configure Symfony with the idea of creating a micro blog platform. They start with a fully functional LAMP environment, but have to do all the rest. In their hour, they have to get the hang of composer, understand Symfony’s documentation, download all the dependencies, start a bundle, etc. We are giving them full Internet access because we want to test their ability to work in a real-world environment. The idea is not to test their speed or if they already know the technology, but more to see how they work individually.

The results were amazing. The major point was when we asked them to explain what they did, where they found the documentation and what they were planning to do next. Some brought material, some had already practiced because we had told them it was about Symfony. We did not think it was unfair, it only shows their motivation and their ability to get everything they need to be up the task.

What do they like

Something I love to ask is what they preferred the most while discovering various technologies. I do not care if you like Ruby on Rails, Wordpress or Drupal, but if you have a strong feeling towards a technology, that you tested its virtues and alternatives, and that you want to promote it for what it is good at, you clearly show me that you like your job and you are not the average doer that simply executes an order without any opinion or passion.

Service management utility for Mac OSX (launchctl helper)

Having dealt with services mostly on Linux, I grew accustomed to type service php restart. On Mac, this is more like:

launchctl unload ~/Library/LaunchAgents/homebrew-php.josegonzalez.php55.plist
launchctl load ~/Library/LaunchAgents/homebrew-php.josegonzalez.php55.plist


Which is ugly, hard to remember and launchctl has no way of listing all available services. Plus, those plist can reside in all those directories:

• /System/Library/LaunchDaemons
• /System/Library/LaunchAgent
• /Library/LaunchDaemons
• /Library/LaunchAgents
• ~/Library/LaunchAgents

Those in you home directory generally don’t need sudo, while the others do.

This is why I can up with an utility to manage services. It searches in all directories above for your service, prompts for sudo if it is in a system directory and provide goodies like restart, reload and link.

Usage:

service selfupdate

update from the Gist

service php

searches for a plist containing 'php'

service php load|unload|reload

insert or remove a plist from launchctl

service php start|stop|restart

manage a daemon, but leave it in launchctl  (does not work with Agents)

service php link

If you use Homebrew, which you should, it will link the plist of this Formula into ~/Library/LaunchAgents, reloading if needed. Very useful when upgrading.

Manage all optional services at once

If you have several services running, especially if you are a developer, I also recommend to use a script to start/stop all of them at once when you are not working. They may not be using much resources, but having them running keeps the laptop working and can drain you battery very quickly. 

Hosting a Composer repository for private Gitlab projects

Small script that loops through all branches and tags of all projects in a Gitlab installation and if it contains a composer.json, adds it to an index.

This is very similar to the behaviour of Packagist.org

See example.

Usage

Simply include a composer.json in your project, all branches and tags respecting the formats for versions will be detected.

Only requirement is that the package name must be equal to the path of the project. i.e.: my-group/my-project. This is not a design requirement, it is mostly to prevent common errors when you copy a composer.json from another project without without changing its name.

Caveats

While your projects will be protected through SSH, they will be publicly listed. If you require protection of the package list, I suggest this reading.


Check out the code: https://github.com/wemakecustom/gitlab-composer !

Wordpress MU-Plugins subdirectory loader

Wordpress’s Must Use Plugins are an easy way to include quick pieces of code that will always be included.

While having my way with Composer and Composer Installers, I stumbled upon a Pull Request about adding support for mu-plugins. I already commented saying that I don’t how I works for them, because Wordpress does not load mu-plugins in subdirectories, they must be at the root of /wp-content/mu-plugins/.

After searching a bit, I found that someone had already thought of loading mu-plugins recursively but this solution was not enough for me :

1. Calling a scandir each request seems wrong (performance-wise), it seems better to cache the results.
2. It requires that each folder has a file named like "folder.php", which a lot of existing plugins don’t have.
3. It does not list the included plugins in the admin so it is completely invisible.

The solution below covers all this, any plugin may be simply dropped in mu-plugins and it will be required.

Except normal installation (manually or via Composer), the only other step is to copy or symlink a file in your mu-plugins directory.

https://github.com/wemakecustom/wp-mu-loader