Recherche par mots-clés

12 résultats trouvés pour la recherche « less »

Utilisation optimisée de Framework CSS comme Bootstrap avec Less

Le 23 Décembre 2014 à 13h09

0 commentaire

J'ai déjà abordé le sujet des Frameworks CSS qui surchargeaient le DOM HTML inutilement et allait à l'encontre de la philosophie du W3C (séparation du fond et de la forme) dans un précédent article où j'expliquais pourquoi, par exemple, Bootstrap est une régression pour un développement Front-end de qualité.

J'ai également expliqué comment reproduire l'équivalent de fonctionnalités utiles dans un Framework en respectant l'approche CSS-driven dans Grille CSS Responsive et Sémantique sans Framework.

Je vais ici vous démontrer que cette méthode CSS-driven peut non seulement être grandement simplifiée avec l'utilisation des préprocesseurs CSS comme Less, Sass ou Stylus, mais qu'elle permet également d'exploiter les Frameworks tel que Bootstrap de manière propre et conforme à la philosophie de séparation de la sémantique et du design.

Lire la suite
Bootstrap, lisibilité, propreté, performance, optimisation ; c'est possible !

Le 11 Juin 2015 à 18h51

0 commentaire
On me dit souvent que je n'aime pas Bootstrap, et pour cause. Je pense que c'est une regression pour un travail front-end de qualité. En réalité, ce n'est pas le framework le fautif mais la façon dont il est utilisé. Les exemples de mauvaises utilisations sont légions sur le Net et les mauvaises intégrations HTML courent les rues.

Suis-je donc entrain de dire qu'il y a une bonne et une mauvaise façon d'utiliser Bootstrap ? C'est exactement ce que je suis entrain de dire, et je vais vous expliquer à travers ce billet le cheminement qui va vous conduire à :
- séparer le fond et la forme, pour un gain de lisibilité et de propreté,
- inclure et générer le strict minimum pour un gain de performance, avec un exemple d'optimisation de CSS 30 fois plus légères !
Bootstrap et Less, themightycribb.com

Non, je suis sérieux, ce billet n'est pas une blague. C'est cadeau, et c'est pour vous.
Lire la suite
Séparations des rôles du HTML / CSS / JavaScript et mise en application

Le 24 Février 2018 à 18h31

0 commentaire

Cet article fait office de conventions d'architecture d'un site web orienté composant pour la partie cliente, peu importe la technologie d'implémentation finale, de manière à ce que le code soit valide, performant et maintenable par des développeurs front-end, des développeurs back-end ainsi que des pousseurs de contenu. Ces techniques étant en constantes évolution, et les problématiques évoluant au fur et à mesure de mes itérations créatives, cet article est voué à se compléter et changer.

Contenu, apparence et comportement

Lire la suite
- Bonnes Pratiques
- CSS
- JavaScript
- Techniques de Dev
- Spécifications
- Développement Web
- Less
- HTML5
- Stylus
- Node.js
- Front-end
- CSS3
- Ressources
- HTML
Créer et maintenir des maquettes HTML avec NodeAtlas

Le 31 Octobre 2016 à 12h33

0 commentaire
NodeAtlas est une application multi-os écrite en Node.js qui va vous permettre de créer, modifier et maintenir tout un ensemble de maquette HTML. Ces maquettes HTML pourront ensuite être validées par le client, et ré-utilisées totalement ou en partie par les développeurs Back-end quelque soit leurs technologies. Ces maquettes HTML pourront également servir de site stand-alone fonctionnant sans serveur ou avec un simple serveur HTTP pour créer des documentations JSDoc ou autre comme pour GitHub par exemple. C'est ce que nous allons voir dans cet article.

Mais NodeAtlas permet également de faire tourner des sites web complet, performant et rapide tel que le site sur lequel vous être entrain de lire cet article.

NodeAtlas est designé pour :
- Les débutants en JavaScript qui souhaitent se mettre au Node.js rapidement.
- Les experts Front-end, en leur permettant de créer des sites web ou des maquettes HTML de qualité.
- Les experts en développement web et/ou JavaScript en leur permettant de créer des sites web et applications JavaScript à hautes performances serveurs.
Lire la suite
- NodeAtlas
- Développement Web
- Ressources
- Node.js
- Stylus
- Techniques de Dev
- Back-end
- MVC2
- Front-end
Bootstrap est une régression pour un développement Front-end de qualité

Le 17 Mai 2014 à 17h40

0 commentaire

Pourquoi je n'utilise pas Bootstrap ? Cela peut sembler une « évolution » de nos méthodes de travail front-end, mais gare au loup et attention de ne pas tomber dans un travers que le W3C tente d'enrayer au fur et à mesure des évolutions HTML et CSS.

Commençons par le commencement. Qu'est-ce que Bootstrap ? Comme pleins d'autres « Bibliothèque » ou « Framework » CSS dans la même veine, Bootstrap est un outil permettant d'augmenter la productivité des développeurs front-end le maîtrisant, dans le but de fournir le plus rapidement possible un rendu visuel ergonomique et si possible responsive.

Mon problème ne vient pas tant de sa finalité qui est louable, mais bel et bien de la mise en œuvre technique qui permet d'atteindre cette finalité. Pour être concis avant de développer : l'utilisation faites de Bootstrap est une régression pour un travail front-end de qualité.

Je ne compte persuader personne, et à défaut de convaincre, je vais au moins vous expliquer mon point de vue.

Lire la suite
- xHTML
- HTML5
- Développement Web
- CSS
- Bootstrap
- Front-end
- Techniques de Dev
Quelles conventions CSS utiliser pour des structures HTML réutilisable ?

Le 24 Février 2018 à 11h24

0 commentaire

Je viens de (re)terminer la lecture du Guide CSS Fr et j'ai eu envie d'apporter quelques modifications et ajouts à ces très bons conseils. Cet article va donc en quelque sorte constituer mes conventions en matière de création et maintenance HTML et CSS. Elles sont donc identiques à ce qui est écrit sur Guide CSS Fr à cet article prêt !

Affreux sélecteur... http://www.puce-et-media.com/

N'ayant rien à ajouter aux parties autres que « 4. Convention de nommage », je passe directement à mes propres conventions de nommage en vous sensibilisant à l'anatomie d'une page HTML.

Je finirai néanmoins par pointer du doigt une erreur, sinon la seule, en ce qui concerne la totale inutilité du préfixe .js- destiné à séparer le visuel du fonctionnel.

Note : Tous les exemples d'inclusion de fragment HTML sont tirés du framework Node.js NodeAtlas mais c'est juste à titre illustratif, c'est la même chose avec vos frameworks préférés.

Lire la suite
La propriété CSS3 calc() pour arrêter avec les balises HTML imbriquées inutilement

Le 23 Juin 2015 à 12h00

0 commentaire
Dans de nombreux cas, on utilise des balises superflus pour gérer ;
- la largeur total d'une grille avec les éléments externes et
- l'espacement entre chaque balise avec l'élément interne. Parfois même,
- pour appliquer de la couleur de fond, on utilise une troisième balise !
C'est notamment le cas avec le framework CSS Bootstrap qui se fait vieux. Si vous vous ventez de ne plus suporter IE8 parce qu’il à fait son temps, alors il est également temps d'arrêter d'utiliser des balises inutiles !

Voici un exemple d'ancienne pratique et son équivalence avec la propriété CSS3 calc().
Lire la suite
Comment cibler un id qui contient un point

Le 18 Décembre 2012 à 12h12

0 commentaire
En CSS, tout comme avec le librairie JavaScript jQuery, il faut utiliser des sélecteurs pour cibler une balise ou un ensemble de balise :
- on utilise le sélecteur # si l'on désire accéder à l'élément par la valeur de son attribut id ou,
- on utilise le sélecteur . si on désire accéder à l'élément par une des valeurs de son attribut class.
En combinant les deux sélecteurs précédent on peut sélectionner une balise par son attribut id et son attribut class.

On peut donc cibler la balise HTML suivante :
```
<div id="main" class="example"></div>
```
avec le sélecteur CSS suivant :
```
div#main.example { /* ... */ }
```
Lire la suite
NodeAtlas, le Framework JavaScript MVC(2), SEO et W3C compliant.

Le 18 Janvier 2015 à 14h28

0 commentaire

NodeAtlas est un framework JavaScript MVC(2) côté serveur vous permettant de créer des sites évolutifs, performants et conformes au W3C. C'est-à-dire qu'il permet de faire tourner des sites multilingues indexables ou de créer des maquettes HTML passant la validation W3C uniquement avec des vues mais également de créer de gros sites et apps web orientés composants et / ou orientés services en respectant les nouveaux standards avec son système de point d'ancrage.

Lire la suite
- JavaScript
- Node.js
- Outils
- MVC2
- Traduction
- Ressources
- NodeAtlas
Pourquoi j'utilise l'unité Rem et non l'unité Pixel

Le 10 Juin 2015 à 11h24

0 commentaire

Lors des reviews d'intégration HTML à partir de valeurs fournis dans un PSD, on m'a fait remarquer que « les tailles de polices n'étaient pas bonnes » car elles étaient en rem et non en px. Aujourd'hui pire, on me somme de remplacer tous les rem par des px. C'est tout, c'est comme ça. Peut-être parce que l'on a peur que la conversion rem en px ne soit pas juste ou peut-être simplement parce qu'on ne sait pas bien à quoi sert le rem.

Comment gérer avec du Rem, css-tricks.com

Sans entrer dans des détails techniques poussés, je vais vous expliquer pourquoi j'utilise rem.

Je vous laisse également une petite démo temps réel plus bas dans l'article

Allez, n'ayons pas peur, ce rem, il ne va pas nous manger !

Lire la suite
Mais pourquoi devrais-je abandonner jQuery pour Angular, React... ou Vue.js !?

Le 02 Novembre 2017 à 14h04

0 commentaire

J'ai longtemps utilisé jQuery. Puis Vanilla JS comme on appelle si élégamment le JavaScript implémenté nativement. Je surveillais d'un œil les Knockout et compagnie sans jamais réellement m'y investir. Ce fut également le cas avec AngularJS, tellement super-héroïque et sur toutes les lèvres ! Du MVVM paraissait t-il. Un nom barbare à se retaper alors que je terminais tout juste de comprendre en profondeur les tenants et aboutissants d'une architecture MVC(2). Non merci.

jQuery vs. Vue

Autant vous le dire : pour ma part je ne jurais que par la séparation des rôles. Je ne voulais pas retourner à du HTML mélangeant de la structure et du comportement, avec des attributs invalides W3C et un code source à chialer. Ça m'a bien conforté dans l'idée que jQuery ou Vanilla JS restaient des valeurs sûr !

Mais voilà. J'ai fini par investiguer ce AngularJS, à force de le voir passer. Il s'est avéré que les principaux défauts que je lui trouvais pouvaient se régler avec un peu de rigueur. OK ? Mais à quoi bon tant d'efforts pour utiliser l'outil à la mode, là où jQuery à toujours fait le job ?

Même si j'ai partiellement compris l'utilité d'un tel changement grâce à mes études de surface sur Aurelia, React puis Angular, il semble que j'ai trouvé la réponse définitive à la bonne raison d'abandonner jQuery grâce à l'étude de Vue.js. Et en une simple après midi de lecture ! Je ne jure plus que par cette bibliothèque à présent !

Pour faire simple : jQuery pilote par le DOM, là où Vue pilote par les données ! Et ça, ça change tout.

Lire la suite
- JavaScript
- Angular
- Node.js
- MVVM
- Développement Web
- AngularJS
- Vue.js
- jQuery
- React
- Concept
Désinformation : de l'art de comparer l'incomparable sur des dates périmées

Le 23 Juin 2018 à 10h51

0 commentaire

Aujourd'hui est arrivé dans mes flux un article de Marc Schillaci qui nous invite à méditer sur la question suivante : « Comment savoir quand une nouvelle fraîche ne l'est plus ? ».

Nous allons voir pourquoi ces informations sont de la désinformations.

J'ai trouvé l'exemple exposé réellement pertinent et faisant une veille ponctuelle sur les médias sociaux, c'était l'occasion pour moi de faire un petit exercice de Zététique.

Lire la suite
- Outils
- Zététique
- Bonnes Pratiques
- Astuces
- Data Science
- Hors-sujet
- SEO