When you create a form in a website, this one should have some fields with associated labels but with placeholders many developers (or designers) “forgot” to add labels. Most of the time it is because it’s not really pretty and placeholders already give all needed informations. Why not but there is some accessibility problems when you don’t put your labels.

Try to understand what is a field already filled with Walker (homage to Paul Walker who just die today). Is it a name or a surname ?

So I wanted to develop a different way to display your labels to have your informations but without so much “pollution” in your design.

Here is the solution, display the label only when the user focus (or/and hover) on the field. And of course I didn’t wanted to use javascript and I wanted at least a fallback for old browsers.

Continue to read →

I still working with Angular and yesterday I needed to know when the window is resized to update a grid (I will probably do another article for this). The behavior expected is: when I resize the window, I want to resize my div (or any other tag).

So for this, once again the directives will be very useful. My goal is to just have one argument to give to my element who need to listen the window resize event like that.

<div resizable ng-style="{ width: windowWidth, height: windowHeight }" ></div>

You can notice, I used the resizable attribute, then just a style to have like height = window height and width = window width.

So now we know what we want. Let’s create the directive to be able to do that.

Continue to read →

Today I just want to share a small trick when you work on a project, if you work most of the time with Chrome and you are like me, you probably have many extentions really useless when you work.

Those extensions are useless but also the can perturbate your work, like test responsive when you have more than 10 extensions in your toolbar or test a form when you have an extention to automatically fill your forms.

So one solution is simply to create a new user only for your dev like that you will have a fresh browser and you can simply install the extentions really need for work.

To create a new user you have to go in Settings > Users > Add new user. Now you just have to open a new Chrome window then switch to your new user and you have a fresh Chrome without any extensions, any bookmarks, a different history…

Tooltips are everywhere to give some hints to users, I think many of you already used the one from Twitter Bootstrap. Those one are really good but there is one problem, you need to use javascript to enable the tooltips so you need to load a library and even more two library with jquery. Of course there is many other library for tooltips but today we will do it without any line of javascript.

Continue to read →

Yesterday I worked to find a way to display a picture nicely and I was really impressed by the way to display the pictures in Pinterest. All the pictures before they are loaded in the page have already the right size and even a background color related to the picture and this is really nice.

So my plan was to do almost the same using carrierwave gem to upload a picture and on each pictures save the main color and the size of it.

For that there is one tool really impressive… ImageMagick. This tool can transform any kind of picture, change the size, the color, apply mask… and of course you can use it easily with carrierwave.

Continue to read →

When you integrate a new design you have all the time the same problem… Compatibility with all browsers. Many times you create your frontend and then when you try for exemple in IE8 (this is just an exemple I could say Chrome hein ;) ) you see you have some problems with margin or some small stuff like that and you realize that if you want to fix it for all browsers, this will be really complicated and will add complexity for nothing. So here is 3 technics to add some hacks without any risks in your application.

Continue to read →

I work for few days on a new personal project and I decided to use some cool technos.

Backend Rails (I wanted nodejs but I have to go fast and Rails is so good for that), for the database I use MongoDB and a bit of Redis, some websockets and for the frontend usually I love to work with Backbonejs because I know this framework a lot and it is really simple but this time I decided to use AngularJs. I was seduced by the small exemples I did, nothing complicated but a big improvement for productivity.

I just use Angular for few days and so I will try to say what is for me the important differences between Angular and Backbone.

Continue to read →

Today I decided to create a pull request on bootstrap-sass-rails. This gem include Twitter Bootstrap in your Rails application using SASS preprocessor but there is (in my opinion) one thing missing in this gem, the possibility to generate all the files required to modify your theme.

When I use Twitter Bootstrap it is because you can quickly customize all your design just by changing some variables but I don’t know all the variables used by it so I need to copy the variable file to be able to modify each one. I like also to remove all useless css because the bootstrap is good but reeaaaly big so I would like to just include the parts I want.

In this gem there is one file with all the variables and one file which include all the other files so it’s exactly what I need so this generator will just copy those files into my stylesheets directory.

Let’s create this generator !

Continue to read →

Yesturday I talked about Guard, this tool is very usefull when you don’t want to loose time to type again and again the same commands.

For exemple you create a website and you want to use Coffee and SASS. This is a good but our browsers cannot read coffee and sass/scss files so we have to convert them into js and css files. So every times you update one file you have to compile it in js or css… boring…

And now Guard comes, it will let you define actions you want to execute each times one file is modified so for our example we see really quickly the benefits but lets look for a Rails application.

In Rails no need to compile the coffee or scss files (or whatever engine you use), the framework already do it for us ♡ So why it can be good to use Guard ? Like I say, you can run any tasks for any files modified so why not restarting the server when it’s needed.

Continue to read →

My first tech post youhouuu

Ok this one is about the way to have live-reload enable for octopress (the framework blog I use for this blog). Because when I was studying programming my teachers always told me I have to be lazy so now I’m lazy even to refresh a page.

Live reload do this job and with octopress, you just have to watch when a file (like your post for exemple) is modified and then send the signal to live reload to refresh the page. To watch for any modifications in a file you can use guard, there is even guard-livereload to use guard with live reload. So let’s do it.

Continue to read →

Copyright © 2014 - Anthony Estebe -