Faire des maths en css avec calc()

calc() est une fonction native de CSS3 qui permet de faire des calculs mathématiques simples (addition, soustraction, multiplication et division) en remplacement de n'importe quelle valeur de largeur / hauteur / position / angle / temps ...etc.

Etre capable de faire des calculs mathématiques simples en CSS peut être utile dans certains cas et peut éviter d'utiliser du javascript inutilement.

Lancer un nouveau projet Webpack rapidement

La petite astuce du jour :

Si comme moi, vous avez entendu parler de Webpack, souhaitez le tester mais sans trop vous prendre la tête sur la configuration, il existe un générateur écrit en nodejs vous permettant d'initialiser un projet rapidement.

L'outil Unstuck - Webpack vous permet de créer un nouveau projet en choisissant l'environnement sur lequel vous souhaitez travailler via un système de templates :

  • Nodejs + Babel
  • Angular 1 + Less
  • Angular 2 + scss / sass
  • React + scss / sass
  • Ember + scss / sass
  • Vuejs + stylus

Pour ceux qui ne sont pas connaisseurs, Webpack est un générateur de tâches à l'instar de Gulp / Grunt, qui permet de :

  • Gérer les CSS / images / fontes / librairies sous forme de modules
  • Gérer différentes builds pour les projets clients

Il est également davantage optimisé lors de son initialisation que d'autres générateurs tel que Gulp.

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.

Dépendances Front-end Bower avec Symfony

bower

L’intégration et le suivi  du cycle d’évolution des versions des librairies JavaScripts et Css  dans un projet est bien souvent chose difficile. Aujourd’hui nous vous présenterons un outil qui vous permettra de ne plus vous en  soucier : Bower.

Dans cet article nous vous présenterons Bower et comment  l’utiliser dans un environnement Symfony  sous Ubuntu.

Les animations CSS

css3-webdesign-lien-web

Les animations CSS sont très utilisées. Elles permettent de porter l'attention de l'utilisateur vers un endroit en particulier de votre interface.

Elles sont, de ce fait, des transitions et permettent de passer un objet par un état A puis un état B puis un C et cela autant de fois que vous le souhaitez et comme vous le voulez (position, vitesse etc.).

Par exemple, vous pouvez déplacer un carré, changer sa couleur, sa taille etc. Dans cet article, nous allons voir comment créer de simples animations avec des keyframes puis nous verrons en détails des animations plus complexes.