This is a copy of Mariko Kosaka (@kosamari) notes, just to keep it available on the web.

Two weeks ago, I was in a conversation about how I might implement a feature in JavaScript. It needed to be asynchronous to access external data, I said « well, let’s use fetch()…so in code… umm… » while I paused to remember fetch API, the person I was talking to said, « It returns a promise ». My brain froze, and I said: « I honestly don’t know what you mean… »

I’ve written promise based code plenty of times, but somehow things didn’t connect in my brain this time. I realized I actually don’t « get » promise after all.

I can not tell you how hard it is to explain this sentence – « It returns a Promise »

but probably because I really don’t understand Promise.— Mariko Kosaka (@kosamari) January 13, 2017

If you know me from twitter, I’m a visual learner who draws code concepts as physical metaphor. It is how I cope with a double layer of abstraction (programming language & English as a second language). So naturally, I had to draw it this time as well.

Here is a piece of code we are going to look at in this story.

// asynchronous operation
function cookBurger (type) { ... }

// regular operation
function makeMilkshake (type) { ... }

// order function which returns promise
function order (type) {
  return new Promise(function(resolve, reject) {
    var burger = cookBurger(type)
    burger.ready = function (err, burger) {
      if (err) {
        return reject(Error('Error while cooking'))
      }
      return resolve(burger)
    }
  })
}

order('JakeBurger')
  .then( burger => {
    const milkshake = makeMilkshake('vanilla')
    return { burger: burger, shake: milkshake }
  })
  .then( foodItems => {
    console.log('BURGER PARTY !', foodItems)
  })
  .catch( err => {
    console.log(err)
  })

Let’s have a burger party

Welcome to the Promise Square Park, home of a burger joint JakeShack. The burger at JakeShack is very popular but it has a limited number of cash registers to take orders, so the line is always long. However, the back kitchen is well staffed to take multiple orders at a time. In case you are not familiar, Madison Square Park and ShakeShack is a thing in New York City. It’s really good, but the line is always long.

Promisify the action

In order to take orders as quickly as possible, JakeShack uses a buzzer system. When a customer makes an order at a cash register, register staff hand you a tray and a buzzer in exchange of payment.

The tray is a promise from JakeShack that they will place its delicious burger on here once it’s ready, and a buzzer is an indicator of order status. When buzzer is not beeping, it means the order is pending – the kitchen crew is busy at work processing your order. When buzzer turns red and beeps, it means the order is settled.

A bit of fine nuance here on settled. It is not equal to « ready ». It means the order has been processed in the kitchen and calling the customer to take action on it. You (a customer) probably want to pick up your order at the counter, but in some case, you might just walk away. It’s up to you.

Let’s look at what we have so far in code. When you call the order function, it « returns a promise » (giving you a tray with a buzzer). A return value (a burger) should appear on the tray once the promise is fulfilled and callback function called. More on that in next section!

Add Promise handlers

Looks like the buzzer is beeping, let’s go to the counter and claim the order. There are two scenarios you can expect at this stage.

1. Order fulfilled

Hooray! your burger is ready, the kitchen staff hands you a freshly made burger. The promise of a good burger was fulfilled!

2. Order rejected

Looks like the kitchen ran out of burger patties, the promise of a burger was rejected. Make sure you get a refund for that!

Here is how you might prepare for these two situations in code.

.then() takes another function as the second argument which can also be used as a reject handler. For the sake of simplicity, I only use .catch() for reject in this article. If you want to know more about the difference, you might want to check out this article.

Chain the Promise

Let’s say your order was fulfilled, but you realized in order to have an ultimate burger party, you also need a milkshake… so you walk up to the C-line (a special line for drinks, real thing at ShakeShack for optimal crowd control). When you order a milkshake at the counter, a cashier gives you another tray and an another buzzer. Since milkshake is super quick to make, the cashier will hand you milkshake as well. No need to wait for the buzzer to beep (it’s already beeping !).

Let’s look at how it works in code. Chaining promise is as easy as adding another .then() in your code. Return from .then() is always a promise. Just remember each .then() returns you a tray and a buzzer, and an actual return value is passed as an argument to the callback.

Now that you have burger and milkshake, you are ready to BURGER PARTY

More party tricks!

There are few more methods in promise that let you perform cool tricks.

Promise.all() creates a promise that takes an array of promises (items). This promise fulfills when all of its items (each one is a promise) are fulfilled. Imagine you ordered 5 different burgers for your group but want to minimize a trip to the counter to only once when all 5 orders are ready. Promise.all() is a good solution for this.

Promise.race() is similar to Promise.all(). But it is fulfilled or rejected as soon as one item fulfills or rejects. This can be used to simulate try and grab. If you are super hungry, you might order a burger, a cheeseburger, and a hot dog at the same time, only to pick up whatever the 1st order came out of the kitchen. (Note, in this analogy if the kitchen is out of burger patty and rejects the burger promise first, then the entire race promise will turn to rejected state.)

There are more details to cover in promise. Here is a further reading suggestion.

• promise-cookbook written in English (Chinese version available)
• JavaScript Promises: an Introduction written in English
• JavaScript Promiseの本 written in Japanese (Chinese and Korean version available)

Thanks to Jake Archibald and Nolan Lawson for proofreading this post and suggesting changes! and Chris Wheatley, Juan Lopez, and Nicolas Dermine for fixing typo.

This post is published under CC BY-NC-SA 4.0 license. Feel free to translate & publish under the license.
Please let me know if you published a translation!

L’article The promise of a Burger Party est apparu en premier sur THE BLOWG.

L’article Agrément Crédit impôt innovation est apparu en premier sur THE BLOWG.

Malheureusement, Font Awesome est lourd. Il contient une tonne d’icônes, plein d’entre eux nous sont inutiles. Nous devons souvent nous arranger d’une icône qui ne nous convient pas tout à fait. Comme Font Awesome est Awesome, mais avec des défauts, nous allons faire le notre !

FontQuoiEncore ?

FontAwesome est un set d’icône au format vectoriel dans une police de caractère. Les caractères dans la police sont vos icônes.Les icônes au format vectoriel peuvent s’agrandir sans détérioration ou lorsqu’on les zooms, du coup ils peuvent être dans un format tout petit. Avec les écrans haute résolution (Rétine, 4k…) sur de plus en plus de support (tablette, mobiles et desktop), c’est une bonne idée d’en utiliser dans une application web ! Le seul écueil de cette pratique est que l’icône ne peut être que d’une seule couleur, mais vous pouvez ajouter quelques tricks CSS3 pour lui mettre un dégradé, de l’ombre où je ne sais ce qui vous passe par la tête.

Créons donc notre set d’icônes comme FontAwesome.

Font Custom est un outil pour convertir des images au format SVG en un format d’icône FontAwesome-esque.Cet outil a besoin de quelques packages qui s’installent à l’aide de brew ou apt-get (Mac et Lunix pour le moment) et un gem ruby pour surveiller et compiler la police de caractères (tutoriel d’installation).

Une fois installé, vous pouvez lancé la surveillance du dossier contenant vos SVGs il recompilera le dossier lorsque des changements interviendrons, vous pouvez également simplement lancé la compilation une fois vos SVGs prêts. La sortie de la compilation se composera de quelques fichiers du set d’icônes pour une compatibilité inter navigateur et d’un fichier CSS avec les classes correspondantes (vache.svg marchera avec icon-vache).

Une fois que vous aurez votre set d’icônes construit, vous avez presque fini. Importer le fichier CSS, fichiers de police de caractères dans votre projet et ajouter la classe de l’icône que vous souhaitez dans le DOM. Votre set d’icône est prêt à être utilisé !

Attention, le tutoriel sur fontcustom contient des erreurs, pour installer fontforge avec brew, voici la commande qui marche pour à ce jour :

brew install -v fontforge --HEAD --with-libspiro --enable-pyextension

il faudra peut être en passer par un brew update, brew doctor, brew uninstall fontforge, brew upgrade … Enfin vous êtes grands !!

Enjoy !

L’article Des icônes comme FontAwesome est apparu en premier sur THE BLOWG.

vers

/fr/products?category_id=1

Pour ce faire, il suffit d’ouvrir le fichier config/routes.rb et d’y ajouter :

match "/fr/produits", to: redirect { |params, request| "/fr/products?#{request.query_string}" }

redirect avec des params dans le routing de rails !

Kudo

L’article redirect avec des params dans le routing de rails est apparu en premier sur THE BLOWG.

Note: Ces instructions sont valables uniquement si vous avez déjà installé PostgreSQL 9.3. Ne désinstallez pas encore PostgreSQL 9.2, il est nécessaire pour le processus de mise à jour.

Je n’avais pas encore remarqué le problème puisque mon ancienne version de PostgreSQL était encore en fonctionnement. Mais en redémarrant, la nouvelle version n’a jamais démarré, et j’ai trouvée ces erreurs dans : /usr/local/var/postgres/server.log :

FATAL: database files are incompatible with server
DETAIL: The data directory was initialized by PostgreSQL version 9.2, which is not compatible with this version 9.3.1.

La solution ? Éteindre le serveur, migrer le dossier de données vers le nouveau format compatible avec PostgreSQL 9.3et redémarrer.

1. Éteindre PostgreSQL

Puisque PostgreSQL a été installé à l’aide de homebrew, il est piloté par le launchd system d’Apple, la première étape est donc de dire à launchd de stopper l’ancienne version : launchctl unload ~/Library/LaunchAgents/homebrew.mxcl.postgresql.plist

2. Créer le dossier pour la nouvelle version de PostgreSQL

Le processus de mise à jour requiert que l’on migre les anciennes données vers un nouveau dossier. Il faut donc créer un nouveau dossier de données. Puisqu’homebrew a déjà mis à jour vers PostgreSQL, la commande initdb est fonctionnelle.

initdb /usr/local/var/postgres9.3 -E utf8

3. Lancer la migration à l’aide pg_upgrade

Heureusement, PostgreSQL est livré avec un utilitaire en ligne de commande pour effectuer la migration. Il faut spécifié le dossier des anciennes données et le binaire (-d et -b) ainsi que le nouveau dossier et le nouveau binaire (-D et -B) et hop c’est parti !

pg_upgrade 
-d /usr/local/var/postgres 
-D /usr/local/var/postgres9.3 
-b /usr/local/Cellar/postgresql/9.2.4/bin/ 
-B /usr/local/Cellar/postgresql/9.3.1/bin/ 
-v

Une fois terminé, vous verrez, le message suivant :

Upgrade Complete
----------------
Optimizer statistics are not transferred by pg_upgrade so,
once you start the new server, consider running:
    analyze_new_cluster.sh

Running this script will delete the old cluster's data files:
    delete_old_cluster.sh

4. Déplacer le nouveau dossier en place

Une fois la migration effectuée, il faut renommer le dossier à sa place :

cd /usr/local/var
mv postgres postgres9.2.4
mv postgres9.3 postgres

5. redémarrer la nouvelle version de PostgreSQL

Comme j’ai installé le gem lunchy (cf installer PostgreSQL sur mac avec Homebrew), voici la commande :

lunchy start postgresql

Sinon :

launchctl load -w ~/Library/LaunchAgents/homebrew.mxcl.postgresql.plist

On vérifie la version de PostgreSQL :

psql postgres -c "select version()"

6. On fait le ménage dans les brew

brew cleanup postgresql

7. Si vous utilisez Ruby on Rails, recompilez le gem pg

Finalement, une nouvelle version de PostgreSQL veut dire que des nouveaux binaires vont être utilisé par le gem pg. Donc pour faire tourner PostgreSQL avec rails il faut forcer une réinstallation du gem pg :

gem uninstall pg
# Choose to remove "all versions"
# Re-install to force a recompile
gem install pg

Et voila !

L’article Mettre à jour PostgreSQL de 9.2 à 9.3 avec homebrew est apparu en premier sur THE BLOWG.

Et bien, ça se passe là : view_port_size

L’article La taille de mon viewport est apparu en premier sur THE BLOWG.

Pour ceux qui ont suivi la conférences au BreizhCamp, voici les slides.

L’article SASS Compass et Blueprint ou les CSS à la cool est apparu en premier sur THE BLOWG.

Quel que soit votre problème de grille, gridcalculator est là pour vous sauver !

Export pour illustrator, photoshop et .PNG inclus.

L’article Une grille et plus vite que ça ! est apparu en premier sur THE BLOWG.

Prérequis :

• Xcode a jour
• Homebrew installé

Installation :

Mise à jour de Homebrew

brew update

On confirme que tout va bien :

brew doctor

On install Postgres :

brew install postgresql

Lors de l’installation, vous vous retrouvez avec un sacré paquet de lignes dans le terminal, un peu comme ceci :

Les informations les plus importantes sont : BuildNotes, Create/Upgrade a database et Start/Stop PostgreSQL. Veuillez suivre ces informations à la lettre.

Création / Mise à jour des bases de données

Si c’est la première installation de Postgres, vous devez créer une base à l’aide la commande suivante :

inidb /usr/local/var/postgres -E utf8

Il est préférable de copier/coller la ligne depuis le terminal au cas ou la commande viendrait à changer !

Installation de Lunchy

 gem install lunchy 

Start/Stop Postgres

Encore une fois, je copie/colle les commandes depuis le terminal. Notez bien que la deuxième commande dépend de la version de postgres installée sur ma machine. Si la version a changé, la commande ci-dessous ne fonctionnera pas, vous devez vous assurer que vous copiez bien la ligne depuis le terminal.

mkdir -p ~/Library/LaunchAgents
cp /usr/local/Cellar/postgresql/9.2.4/homebrew.mxcl.postgresql.plist ~/Library/LaunchAgents/

Puisque nous allons utiliser lunchy, cette dernière commande est inutile :

launchctl load -w ~/Library/LaunchAgents/homebrew.mxcl.postgresql.plist

À la place, nous allons utiliser la commande suivante :

lunchy start postgres

À cet instant, vous pourriez penser que tout est prêt, eh bien non !

Lors de l’installation de PostgreSQL à l’aide de homebrew, le script ne créé pas l’utilisateur posgres. Vous devez utiliser l’utilisateur et le mot de passe du compte qui a servi à l’installation de postgres. C’est tout à fait acceptable de laisser cela ainsi dans un environnement de développement, mais n’oubliez pas de changer cela si votre environnement est production !

Instrumentation

Installez instrumentation pour que pgAdmin ne passe pas son temps à vous crier dessus, lancez la commande suivante avec le même utilisateur qui a installé Postgres :

psql postgres -c 'CREATE EXTENSION "adminpack";'

Tester son installation

Installer et lancer pgAdmin, ajouter une base de données avec votre username/password

Merci à Russel Brooks et à Moncef Belyamani

L’article Installer postgresql sur mac avec homebrew est apparu en premier sur THE BLOWG.

@GregFrite1er

L’article Mercredi c’est TeFri avec les gros mots de Greg Frite est apparu en premier sur THE BLOWG.