Recherche par mots-clés

7 résultats trouvés pour la recherche « Stylus »

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
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
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
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
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
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
Cas pratique : corriger rapidement une régression HTML ou CSS avec Git

Le 27 Octobre 2017 à 08h19

0 commentaire

Les tests de régression d'interfaces sont souvent les plus difficiles à repérer car ils nécessitent l'intervention de l'œil humain et ne peuvent pas être automatisés par des tests unitaires aussi simplement que du code logique. Il faut donc refaire une passe de vérification sur les pages où la CSS et la structure HTML ont changé pour voir si tout est en ordre et cela, dans toutes les tailles d'affichage.

Autant vous dire qu'en fonction du budget, ce travail n'est pas fait à chaque fois que le code est acté (« commit ») dans Git et qu'il arrive qu'une « régression visuelle » soit repérée quelques temps après qu'elle se soit glissée dans le projet.

Plus sournois, si la vérification n'est pas faites à tous les coups, les regressions visuelles qui n'empèchent pas la navigation mettent souvent longtemps à être signalées car personne n'est « bloqué ».

Site web exemple

Nous allons donc voir à travers un exemple comment réparer rapidement une régression HTML ou CSS avec l'utilisation du système de version Git et la plateforme GitHub.

Note : si vous avez la moindre question à propos de la procédure exposée ci-après, n'hésitez pas à laisser un commentaire. Si vous souhaitez revenir avec un peu plus de bagage à propos du fonctionnement de Git, n'hésitez pas à lire cet article pour enfin comprendre Git et GitHub !

Lire la suite