We're growing into something new. Read More

François Robichet  Pro


Solarized Dark Skin for the Chrome DevTools

I'm pretty sure you all know this great color palette and maybe some of you are using it in your IDE/Text editor. Know you can use it with the Chrome DevTools. Last summer, Darcy Clarke write a blog-post about how to skin the Chrome DevTools Inspector with an example. After this, someone made a gist of a "Solarized Dark-like" skin, the color were wrong and some features were missing, so I decided to fork it and made mine with the real Solarized Colors and pretty much all the features. You can just grab the CSS file (minified) or clone it in the right folder (you'll be up to date) : Ubuntu: ~/.config/google-chrome/Default/User\ StyleSheets/Custom.css Windows: C:\Users\YourUsername\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css Mac: ~/Library/Application\ Support/Google/Chrome/Default/User\ StyleSheets/Custom.css There is still works to do on the JavaScript side but everything it's very usable. PS: I didn't create a light skin, if you want one you just have to invert the @base colors in the less file (@base01 becomes @base1 and @base2 becomes @base02 for example).


Portfolio final redesign

I have just finished my portfolio, after some great feedback on my last post. I'm not a designer so all comments and critics (mostly critics) are welcome. All the resources are still in the humans.txt file.

Portfolio redesign (well, design at least)

It's the third version of my portfolio, and the first one that I have really finished! I'm not really a designer, so I tried my best. Anyway, because English is not my first language I hope there is no mistakes, _please tell me if you see some :-*._ It's responsive and future proof (well, I hope so). All the resources are describe in the humans.txt file.


Simple uploader in plain JS and CSS3

The sequel of this post, it's now fully working. It's all made in CSS2, there is no images (the icons are edited versions of Nicolas Gallagher's ones) and in plain JS. I used the FileReader API to preview the file, so the previewed file (if it's an image) works as a progress bar (well, there is a <progress> bar but more is better). A also used the webkitNotifications API which pop out when the file is uploaded. I really like this API I don't understand why it's not in the spec. All the animations are done in CSS3 too. Works only in Chrome and Firefox.


HTML5/CSS3 Image upload idea

And done! It's made in plain JS (without any framework), CSS3 and the HTML can not be simpler, check the exemple page, the code on GitHub or the Forrst post. The old jsFiddle is available here (the original gif by @jessedodds). I'm currently working on the upload, the code will be publish soon, the actual code only works on Chrome (maybe Safari).


CSS3 Curved Ribbon

A few month ago I made soiheardyouliekribbon, a CSS only ribbon generator. Yesterday, I was working on a new version of my own website (I hope I will finish this one), I wanted to add a ribbon, but not a straight one, a curved one. So I made this. It doesn't work with shitty browser, I will "fix" that point. Anyway, if someone has a better idea for the markup, I don't really like the forever alone <b> even if Twitter do that sort of thing. NB: Positioning pseudo-elements is a pain in the ass.

$.cssHooks.transform = {
	set: function(elem, value) {
		var div = document.createElement('div'),
			property = div.style.transform === '' ? 'transform' :
		(div.style.WebkitTransform === '' ? 'WebkitTransform' :
		(div.style.MozTransform === '' ? 'MozTransform' :
		(div.style.MsTransform === '' ? 'MsTransform' :
		(div.style.OTransform === '' ? 'OTransform' :
		if (property)
			elem.style[property] = value;

Easily deals with CSS transform in jQuery

You may need to deals with transforms with jQuery (I had to with my CSS 3D Slideshow), problem is that you need to repeat yourself five times because the property transform is not used on any browser. For your CSS you have SASS and LESS and for jQuery you have cssHooks which allow you to hook jQuery.fn.css. In this case, I just check if the browser support the CSS property transform with the correct prefix (if needed). It's great and it might save you a lots of time and line.


What service do you use to store and organize your bookmarks ?

I was wondering what you were using, only your browser, Google Documents, Delicious etc...