Detect IE 10 and IE 11 with CSS

For Internet Explorer 9 and earlier version, we were able to apply CSS with conditional comments in our HTML, but since IE 10, this solution is not working anymore. So, what to do when you want to apply specific CSS for just Internet Explorer 10 and 11?

Keyfer Mathewson from Paper Leaf found a specific CSS media query only supported by this 2 versions of IE : -ms-high-contrast. This way, by setting this media query as a condition as true (active) or false (none), we can apply any CSS for only IE 10 and IE 11:

Source :

Mac OS El Capitan (10.11) blocking npm install, what to do?

The last version of Mac OS X, El Capitan (version 10.11), is sometimes blocking npm install. For exemple, if you want to install ios-deploy for Cordova with the following command, you will get an error message:

This will return something like this:

To prevent this error, you will need to add --unsafe-perm=true as parameter, which is preventing Mac OS X to block unsafe commands (of course, use it only with trusted plugins).

It will show the following message, but your plugin will successfully install :

Initialize Git repository

Looking for a way to initialize your Git repository for your project?

Here are the 3 methods with the command lines, depending on your situation:

Connect to a git repository and clone the project locally

Either you have already started developing your project or not, you can clone the git repository on your computer with those command lines:

Connect an existing folder to a git repository

If you started working on your computer and juste created your git repository, you can push your existing project to git with those command lines:

Git Global Setup

You can set up a global configuration for your git website with those command lines:

Web Story 2016 #45 – Responsive and upcoming technologies

This year is almost over and 2017 is coming. What’s new in the web and how can we improve our work for this next year ?

Team work

Produce pixel perfect projects from designers to developers

This tools will help to share all guidelines from a design : fonts, font sizes (in px !), dimensions, colors, assets, etc. Sadly, there is only online tools, which doesn’t garanty any security and privacy.

With Sketch there is a tool who provide partially this functionnalities : Sketch measure (free)

Pixel-Perfect Specifications Without The Headaches

How to poison mobile users

The author is giving 13 advices on how to poison the usability and navigation of our websites or applications on mobile devices. For example, using full width carousel, using hamburger menu or making our touch targets really small :).

How To Poison The Mobile User


Find your prototyping tool

The number of tools for prototye/wireframe is growing each years, and it’s difficult to choose which one is the right tool. This article will guide you to choose the tool you need, from the design fidelity you seeking, to the functionalities you need.

Choosing The Right Prototyping Tool

Designing cards interface

The card-based interfaces are spreading across web and mobile and is becoming a new standard by providing clear and easy access to content and functionalities.

Designing Card-Based User Interfaces

Icon for a great User Experience

What icon should I use? Should I use an arrow or a plus to expand this dropdown? And what about the hamburger icon? A great analysis of the impact of icons in a web interface.

Icons As Part Of A Great User Experience

Also, here is the best icon library (in my opinion) for designers AND web developers, with PNG, SVG, smart icons, etc.

Design for mobile users and theirs thumbs

A quick reminder on how to design a mobile app and reduce thumb stretching.

The Thumb Zone: Designing For Mobile Users

Help users taking better decisions

You can not expect your users to know how to use your applications and to make the right decisions. You have to help them by limiting their options and anticipate what they will do.

How To Build Honest UIs And Help Users Make Better Decisions

Are line charts lying to us?

By smoothing and joining points on a chart, we are “lying” to our readers. We guess data and except it to be linear, which is not the case. The author is analyzing a line chart and suggesting to use bar chart instead.

How to design error message

Should we use orange instead of red for error message? We want to warn the user, not scare him. That’s the type of question treated in this post.

How To Design an Error Message For a Mobile App?


Reduce content shifting on page load

There is something really annoying when you’re reading a website, especially on mobile devices, it’s when the content is shifting and moving below because the image finally loaded. Big image file, slow connection, slow server, there could be multiple reason why the content is not immediately available, but what can we do about that?

This post give us solution for images, advertisements, widgets, web fonts, etc.

Ways To Reduce Content Shifting On Page Load

Responsive image breakpoints generator

The best way to implement images for every devices, is actually to use srcset attribute to provide an image for the right resolution and device. This article explain how to use the open source generator (available on Github) to generate the code and images for this AND is using an algorithm to crop and focus on the subject of the image (Art-direction) for smaller resolutions.

Automating Art Direction With The Responsive Image Breakpoints Generator

Display: grid, our next layout system?

Since a few years we are using flexbox to lay out our responsive websites, but it’s not very intuitive and don’t answer to every needs. The grid system is a new display CSS functionality available soon (probably early 2017) and already implemented as flags in modern browsers. Afraid of browser compatibility? Well, lets use the new @supports CSS media query for fallback 😉

CSS Grid, Flexbox And Box Alignment: Our New System For Web Layout

Content Security Policy coming up in 2017

This new feature is actually only available by flags, but it’s a candidate recommendation and the level 1 is actually already well implemented in modern browsers.

Content Security Policy, Your Future Best Friend