Codez et testez votre design en local sur tous vos périphériques avec Codekit 2

La version 2 de Codekit apporte tout un lot de fonctionnalités pratiques, dont une en particulier qui va vous permettre de coder votre responsive en local et voir le résultat à l’enregistrement en live sur votre ordinateur et tous vos périphériques mobiles sans avoir à recharger la page à chaque fois.

Cette manipulation très simple va vous permettre de :

• Tester votre responsive web design en local sur tous vos périphériques
• Bénéficier du rechargement automatique de la page lors d’un changement dans votre CSS

Codekit 2 pour Mac

Codekit est une application pour développeurs web pour Mac exclusivement qui vous permet entre autre de compiler à l’enregistrement votre CSS en Sass ou Less, Bourbon, minifier vos scripts, vérifier la syntaxe js …

Très pratique pour gagner du temps, prise en charge de toutes les nouvelles technologies pour mieux coder et gagner du temps… Mais aujourd’hui je vais m’attarder sur la nouvelle fonctionnalité du Live reload et l’external server qui ont vu le jour avec la version 2 de Codekit sortie il y a un peu plus d’un mois.

Codekit coute seulement 29$ et peut être acheté ici : https://incident57.com/codekit/

Si vous n’êtes pas à l’aise avec Sass/Compass, je vous conseille d’aller faire un petit tour sur le site officiel et suivre les tutos : http://sass-lang.com/. c’est quasiment devenu incontournable et fait gagner du temps de développement.

Configuration

• Ajoutez votre projet à Codekit, en faisant glisser le dossier de votre thème dans Codekit. Libre à vous d’activer les fonctionnalités Sass ou Less.

• Cliquez sur les paramètres (la roue crantée), une fois dans les options, cliquez sur Browser Refreshing : 

• Activez External Server Required et indiquez l’adresse actuelle de votre site local. Généralement http://localhost/monsite/ ou encore http://monsite:8888/ selon votre serveur de dev local.
• Cliquez sur Preview en haut à droite de l’application

• Remarquez que Codekit met à disposition sur une URL spécifique. Ici http://macbook-pro-de-maxime.local:5757/ Entrez cette adresse sur tous vos périphériques connectés au même réseau : votre smartPhone, votre tablette, un autre ordinateur …

Et la magie opère

Essayez maintenant de faire un changement dans votre fichier CSS et enregistrez. Le site se recharge automatiquement sur chacun de vos périphériques. Cette technique vous permettra de gagner énormément de temps dans votre développement.

Et vous, vous faites comment ? Avez-vous mieux ? N’hésitez pas à en débattre dans les commentaires !