Les flex-items

Flexbox est une valeur de la propriété css display. J'ai pu en faire usage sur des projets requérant une compatibilité ie 11 minimum pour profiter des avantages qu'elle procure par rapport aux display: table, display: inline-block ou float: left lorsqu'il s'agit de mettre deux blocs côte à côte (pas de perte de flux, pas d'espace entre les deux blocs).

Avant de parler en détail des flex-items, je vais m'interesser rapidement au flex-container à qui on affecte le display flex. En effet, on donne à un container la valeur flex sur son display, puis une série de propriétés que je vais rapidement énumerer et qui agissent n'ont pas sur lui même, mais sur ses enfants directs (appellé flex-items).

Packaging d’une application Electron

Présentation

Electron est un framework maintenu par GitHub qui permet de créer des applications lourdes en javascript/HTML/CSS. Il est  open source et utilisable sur toutes les plateformes (MacOS, Windows et Linux). Le framework permet entre autre d'utiliser les notifications natives de la plateforme, d'installer des mises à jour automatiques via Squirrel et il dispose d'outil de debug (dont la console pour développeur de Chromium). Je vous invite à consulter cet article pour plus d'informations.

L'objectif d'une application lourde est souvent le déploiement sur de nombreux postes et il est assez fréquent que ces postes ne disposent pas d'un environnement node. Nous allons voir dans cet article trois solutions pour disposer d'un livrable exploitable sur toutes les plateformes. Les exemples suivants ont été testés sur Linux (distribution Mint 18.1) et Windows 10.

TYPESCRIPT : Du Super JS

TypeScript est un langage de programmation JavaScript open-source développé par Microsoft (Co-créé par Anders Hejlsberg, principal inventeur de C#).

Il constitue un sur-ensemble de JavaScript, ce qui signifie que tout code JavaScript valide peut être utilisé avec TypeScript. Le code est transpilé par le biais d’un transpileur vers du code JS standard, qui lui sera interprété par le navigateur.

Son but principal est d'améliorer et sécuriser la production de code JS.

Créer une WebExtension

Les WebExtensions sont les modules complémentaires (ou add-on) que nous ajoutons à nos différents navigateurs pour leurs ajouter des fonctionnalités. Elles ont l'avantage d'être, de manière générale et avec parfois quelques adaptations, compatibles avec l'API de plusieurs navigateurs comme Chrome, Firefox, Opéra, Edge (oui oui !). Dans cet article, nous allons le créer et le tester en suivant les directives fournies par Mozilla.

Bootstrap 4 vs. Foundation 6 for sites – Habiller des formulaires

  VS  

Depuis quelques semaines (et deux projets en cours de production), je décortique avec grand intérêt le framework front-end responsive Foundation 6 for sites créé et maintenu par Zurb. J'utilise Bootstrap 3 depuis sa première release stable (et Bootstrap 2 avant ça). Mais Bootstrap 4 étant encore en version Alpha j'ai décidé, pour voir, de me tourner vers une solution que je considère comme étant son principal challenger (la première version stable de Foundation 6 ayant vu le jour il y a plus d'un an).

Faire une présentation à la prezi avec impress.js

Vous souhaitez faire de jolies présentations à la prezi simplement avec un peu de code html/css3 et bien sûr compatible avec tous les navigateurs récents ? Essayez impress.js. ! impress.js est un framework js open source qui permet de créer des présentations avec de multiples effets de transitions JS/CSS3 pour vos slides. Il permet de changer un peu des présentations standard de type PowerPoint et ouvre de nouvelles possibilités en terme de présentation en jouant sur la profondeur et  notamment la 3D. Autre avantage, il permet de s'affranchir de tout OS / logiciel propriétaire particulier. Plus besoin d'office pour lancer votre présentation, un simple navigateur web suffit !