Jekyll Partie 1 : Introduction

Jekyll : Ou comment générer des sites web statiques avec du markdown

Jekyll c’est quoi?

Avant tout, Jekyll n’est pas un CMS, c’est un générateur de site statique en ruby, le produit de Jekyll est simplement un ensemble de fichiers HTML, CSS, JS, images. Continuer la lecture de « Jekyll Partie 1 : Introduction »

Brackets, l’éditeur qui a remplacé SublimeText sur ma machine

Brackets est un projet open-source crée par Adobe sous licence MIT. C’est un éditeur de code web plutôt sympathique qui à remplacé SublimeText comme éditeur préféré.
@goetter m’a initié à cet outil, et j’avoue, après avoir été sceptique au début, l’UI ainsi que ces possibilités m’ont réellement convaincues.

Fonctionnalitées

Les principales fonctionnalités :
– Edition du CSS directement dans l’HTML
– Ajout de fonctionnalitées grâce aux extensions
– Live reload dans Chrome.
– ColorPicker dans le CSS
– Auto-complétion vraiment bien faite
– Include des fichiers simplifié

Sans oublier que Brackets est multi-plateforme et en plus gratuit !

Voici à quoi ressemble Brackets sur mon Mac, avec plusieurs extensions, que je vais lister plus bas dans l’article.
Brackets UI

L’UI est quand même plus sympatique que celle de Sublime Text à mon goût, plus clean et dans l’air du temps, et ça fait du bien de voir qu’un soin particulier à été apporté à ce niveau, tant la plupart des softs de ce type ont des interfaces que je qualifierais de « développeur friendly » sans être méchant.

L’édition de CSS depuis le HTML
Brackets CSS edit

Le colorpicker depuis le CSS
Brackets Color Picker

Mine de rien ces petits ajouts sont réellement pratiques, et accessibles depuis une combinaison de touches simple ( CMD-E sur Mac ).
L’include des fichiers est très pratique aussi, en proposant une autocomplétion bien utile !

Brackets Autocompletion

Les extensions

Globalement, les extensions les plus connues sont disponibles sur Brackets, la transition depuis SublimeText n’en sera que facilitée. D’ailleurs ici, contraitement à SublimeText, le moteur d’extensions est une fonctionnalité directement disponible sans ajout ou manipulation.

Brackets Extensions

Mes extensions

Voici une liste des extensions que j’ai installées :
(j’ai laissé les descriptions en anglais volontairement)

Autoprefixer – Parse CSS and add vendor prefixes automatically. – Plus d’infos…
Beautify – Format JavaScript, HTML, and CSS files – Plus d’infos…
Brackets Git – Integration of Git into Brackets – Plus d’infos…
Brackets Icons – File icons in Brackets’ file tree. – Plus d’infos…
Brackets Snippets – Provides ability to use code snippets in Brackets. – Plus d’infos…
colorHints – Show colors you used in your CSS file before as code hints. – Plus d’infos…
CSSLint – Adds CSSLint support to Brackets. – Plus d’infos…
Emmet – High-speed HTML and CSS workflow – Plus d’infos…
Indentator – Re-indent a document using your current indentation settings. – Plus d’infos…
Install from Bower – Quickly install front-end packages from Bower. – Plus d’infos…
Markdown Preview – Live preview of markdown documents – Plus d’infos…
Preferences setup UI – Form for editing preferences. – Plus d’infos…
Quick Search – Automatically highlights occurrences of the selected word (like Notepad++ smart highlighting) – Plus d’infos…
W3CValidation – Adds W3C validation support to Brackets. – Plus d’infos…

La liste n’est pas trop longue, mais améliore considérablement les fonctionnalitées de Brackets, et réponds parfaitement à mes attentes.

Le seul point noir de Brackets pour moi reste le Markdown, qui n’est pas très plaisant à lire / éditer. Je n’ai pas eu de plantages ou d’instabilitées notables, et en suis plutôt satisfait.
Je vous le recommande, le tester c’est l’adopter !

Empêcher la création de fichiers .DS_Store sur des volumes réseau

OSX est un système avant tout User-Friendly, et quoi de plus naturel de pouvoir personnaliser de temps en temps l’affichage d’un dossier? Toujours l’afficher en liste, avec les détails, par ordre de modification par exemple?

Si tout le monde sur votre réseau utilise OSX, aucun problème, mais si par exemple vous êtes dans un environnement où vous partagez des dossiers réseaux avec des postes sur Windows, voir Linux, vous aller surement entendre au bout d’un moment « C’est quoi ces fichiers .DS_Store ? Y’en a partout ! » de la part d’un collègue.

Petite astuce pour désactiver la création de ces petits fichiers :

Note: Ceci affectera les partages SMB/CIFS, AFP, NFS, et WebDAV.

  • Sur votre Mac, ouvrez le terminal (Applications/Utilitaire/Terminal.app)
  • Copiez-coller cette commande dans le terminal :
    $: defaults write com.apple.desktopservices DSDontWriteNetworkStores true
    
  • Redémarrez votre Mac.

Note: Ceci n’est valable que pour l’utilisateur courant, il faudra donc répeter cette commande sur les autres comptes utilisateurs de la machine si vous n’êtes pas le seul à vous en servir.

Migrer ses commentaires disqus

Disqus: changer d’URLs et préserver ses commentaires

J’ai récemment changé totalement le blog. Je suis passé de WordPress vers Jekyll. J’ai changé les URLs de mes posts par la même occasion.

Utilisant déjà par le passé disqus, je me suis retrouvé sans aucun commentaire sous mes articles. Problématique quand même…

Voici une méthode pour ne pas perdre ses commentaires lors de changements d’URLs. A noter que cette méthode n’est dépendante d’aucun CMS. Continuer la lecture de « Migrer ses commentaires disqus »

Synchroniser son serveur web avec github

Github est un bon moyen de partager ses sources, et intégré dans un workflow, c’est un outil puissant et très efficace. C’est aussi un bon moyen de déployer ses fichiers et sources sur son serveur personnel.
Ne serait-il pas merveilleux si, à chaque fois que vous poussez des mises à jour vers GitHub, que ces nouveaux fichiers seraient automatiquement mis à jour sur votre serveur en direct?
Continuer la lecture de « Synchroniser son serveur web avec github »

Manger des Sushis à Strasbourg

Un article un peu différent pour une fois, je vais vous parler de mon expérience gustative de Sushis et makis à Strasbourg. Je tiens à préciser que ce n’est pas une liste exhaustive, et sont classés par ordre de préférence. Notez que je commande souvent en livraison. N’hésitez pas à commenter et partager votre expérience personnelle.
Continuer la lecture de « Manger des Sushis à Strasbourg »

Flat Design, Skeuomorphic & responsive, adaptative design

2 tendances très différentes se répandent en ce moment sur le web. D’un cote, le flat design, ( comprendre, le design plat ), qui vise a se passer de fioritures, de reflets, de textures etc.. en utilisant uniquement des applats de couleurs, souvent très prononcées ( un beau rouge sanguin, un vert pomme ) agrémenté d’un jeu typo assez efficace. De l’autre, le skeumorphisme. Continuer la lecture de « Flat Design, Skeuomorphic & responsive, adaptative design »

Foundation vs BootStrap, point de vue d’un webdesigner / intégrateur

Les frameworks CSS / JS semblent avoir le vent en poupe en ce moment, plus qu’un phénomène de mode, ils permettent de réellement gagner un temps précieux lors de la création d’un site web responsive par exemple, ou encore de créer un wireframe.

Il existe de nombreux frameworks, mais je me concentrerais ici uniquement sur Foundation ( 4 ) ainsi que Bootstrap ( 2 & 3 ) et de mon expérience personnelle lors du déploiement de ces deux frameworks.  Continuer la lecture de « Foundation vs BootStrap, point de vue d’un webdesigner / intégrateur »

Comment et pourquoi je suis passé de Photoshop à Fireworks

Merci @graffr!

Récemment, j’ai participé à une conférence, où @graffr nous à fait l’honneur de se déplacer dans notre belle région ( si si ) pour nous montrer combien Fireworks était cool pour faire du web.
Continuer la lecture de « Comment et pourquoi je suis passé de Photoshop à Fireworks »