Web Development

Misc

I read several articles on the Web every day. When discovering an article, if I find it interesting, or if I don’t have time to read it at the time, I put it aside on Pocket in order to easily find it later.

The downsides are :

  • I put aside too many items
  • I often forgot to check out my reading list on Pocket
  • Pocket doesn’t provide a easy way share a bunch of links
  • I don’t want to save those on Pocket without a backup somewhere else

For some time now, I looking for a way to force myself to check this list on a regular basis. Moreover, even if IFTTT allows me to perform automatic backup of the bookmarks, no one but me can take advantage of this list.

Starting today, I am launching a new series of articles entitled “Reading List”. As its name obviously suggests, each article will bring together a few links to sites, articles, resources that have caught my attention on the web during the past few days.

I plan to publish these posts on a weekly basis but it could be less depending on the volume I’ll collect every week. I hope some of you will find this useful. Do not hesitate to tell me your thoughts about this in the comments below.

As the process is mostly automated using IFTTT, Dropbox and a few scripts, I’ll also think about explaining it in a upcoming article.

Ce soir, pour la première fois depuis la création de mon compte il y a environ 3 400 tweets, je me suis fait agresser sur Twitter.

Bon, d’accord, j’exagère un peu. C’est bien moins grave que ça en a l’air mais cette prise à partie m’a tellement surpris que j’en écris un article à chaud.

Oh, je m’en remettrais, hein! Ne vous en faites pas ;)

Read on →

A few weeks ago, a gave a quick talk about Grunt at @JSSophia, our local Javascript User Group. During this talk, my purpose was to quickly present the tool and show some example use cases. I must confess I wasn’t as prepared as I would have been, so my talk may have been confused or unclear from time to time. If you attended the event, I hope this post will give you more details. If not, it doesn’t matter, I’m still happy to share my thoughts about this amazing tool.

You’ll find the slides bellow. The first part mostly present Grunt and why I think it’s a game-changer for front-end developers. As I already wrote about this in my previous post about Grunt, I invite you to read it if it sounds interesting to you. In the second part, I focused on showing a few examples use cases and concrete examples. That’s what I’m going to detail in this post.

Read on →

Over the past few weeks, I realized that I added grunt in every little side project I worked on. Thinking about it, I’m not sure if I can even imagine to start a project without this tool.

You probably already heard about grunt, don’t you? In case you don’t (seriously?), it’s been created by Ben Alman (aka. cowboy). I guess the best description is the one from the official home page:

Grunt is a task-based command line build tool for JavaScript projects.

OK, looks nice. But what’s new? I already have tools to lint or minify my Javascript. I already use qunit to unit test my code. And so on… Why should I use grunt instead of all these tools?

Here is why:

  1. Because you probably don’t really use all these tools. I mean, for sure you know about them, and you already give them a try; but most people I worked with (including me) just don’t use them on real projects, in their day to day work, because bringing the pieces together is not that easy.
  2. Grunt also uses the exact same tools you already know, or in the worst case, it can learn to use them. It doesn’t reinvent anything but allows you to organize your workflow in an uniform, yet flexible, way.

Do we need such a tool?

As a front-end developer, automation wasn’t really part of my workflow. My first job was in some king of web agency were every desktop machine ran on Windows XP, and our main development tools were Dreamweaver MX (I guess I’m getting old…) and Filezilla. Read on →

This post is about the Riviera Coding Week-end, a geek event that took place in Nice (France) from 10 to 12 August 2012. As this post is closely related to a French event, I think for once, it’s more appropriate to write in French, even if I usually blog in English. If you’re anyway interested, I’m sure Google translate or any other translation tool can fit your needs…

Du 10 au 12 Août dernier, j’ai participé au premier Riviera Coding Week-end, organisé par les membres du RivieraGUG avec la participation du JSSophia dont je fais partie. À ma connaissance, c’est le premier événement du genre qui ait lieu sur la côte d’azur. C’est en tout cas le premier auquel j’ai eu l’occasion de participer. Après ces 48 heures passées à construire, échanger, mais surtout coder, un petit bilan me semble bien utile.

Read on →

Before going further, I’ll start by saying that I’m a Git and Github noob, so if you have a better solution to achieve the same goal, give me a shout, I’ll be happy to hear it..!

A few weeks ago, I implemented a small bookmarklet to apply google-code-prettify anywhere on the Web. I put the source code on Github and used the (awesome) Automatic Page Generator to quickly create a landing page to host my bookmarklet.

The generated page lives on the same repository, on a branch called gh-pages. At this point, my concern was the following: How could I include the bookmarklet link on gh-pages branch from the source code living on the master?

Read on →

In this post, I’ll continue to work on the code started in the first article on Feature Detection and File Upload Forms, so you’d better read it before going further.

Last time, we created a Javascript component used to upload a file asynchronously on the server. It uses FormData and FileList APIs in modern browsers but also degrades gracefully with browsers that don’t support those APIs.

This time, I’ll explain how to handle the thumbnail associated to the file input field. It’s a good example to introduce loosely coupled modules, and to show some other uses of the feature detection technique.

As mentioned in the previous post, you can find the source code on Github: uploader-thumbnail.

Loosely Coupled Modules

If you never hear about loosely coupled module, I highly recommended you to read/watch the following:

Read on →

Last Thursday, I gave a talk at @JSSophia, the local Javascript User Group I co-founded with @FredGuillaume. The group is just starting (2nd meeting), so there were only a few people, but as some of them looked quite interested by my talk, and some other couldn’t come due to personal or professional duties, I thought I could write a couple of blog posts about the same topic.

I choose File Upload Form example because it’s standalone, frequently used and it can be improved by many ways with HTML5 APIs. It’s a good example to introduce some very important Javascript concepts:

  1. Using feature detection for progressive enhancement
  2. Using loosely coupled modules to architecture web applications.

This post focus on the first part of the talk. It presents the feature detection technique. I’ll cover the second part, loosely coupled modules, in another article.

If you’re in a hurry, or simply don’t want to read the whole post, you’ll find the slides embedded below and everything else on Github:

The talk was in French so the slides are also written in French, even if it uses a lot of English keywords.

Read on →