Bonnes Pratiques Web
36.4K views | +36 today
Follow
 
Scooped by Mickael Ruau
onto Bonnes Pratiques Web
Scoop.it!

Modèle VPTCS – Infographie | w3qualité

Modèle VPTCS – Infographie | w3qualité | Bonnes Pratiques Web | Scoop.it

Ce modèle permet d’embrasser l’ensemble des attentes utilisateurs ainsi que de voir les secteurs qui peuvent y répondre. Il rappelle également que deux éléments sont essentiels : les contenus et les services. Tandis que visibilité, perception et technique sont là pour mettre en valeur les deux premiers.

Enfin, il rappelle que la qualité est donc une affaire transverse ; en expertises, mais au aussi dans la chronologie de l’expérience utilisateur.

Mickael Ruau's insight:

 

 

more...
No comment yet.
Bonnes Pratiques Web
Développement Php, Mysql , Javascript, Jquery, Css3, (X)HTML5...
Curated by Mickael Ruau
Your new post is loading...
Your new post is loading...
Scooped by Mickael Ruau
Scoop.it!

Un environnement de développement PHP avec Netbeans et Docker

Un environnement de développement PHP avec Netbeans et Docker | Bonnes Pratiques Web | Scoop.it
Docker, c’est une technologie qui révolutionne la virtualisation. Pour nous les développeurs, Docker signe la fin du syndrome “works on my machine”. Je ne saurais trop vous recommander de suivre les…
more...
No comment yet.
Scooped by Mickael Ruau
Scoop.it!

Chrome 70 : petit retour sur les nouveautés apportées aux développeurs, notamment les PWA desktop ou la possibilité de nommer les workers

Chrome 70 : petit retour sur les nouveautés apportées aux développeurs, notamment les PWA desktop ou la possibilité de nommer les workers | Bonnes Pratiques Web | Scoop.it

Les utilisateurs peuvent maintenant installer des PWA sur Windows et Linux !

Mickael Ruau's insight:

Progressive Web Apps (PWA) desktop sur Windows et Linux

Les utilisateurs peuvent maintenant installer des PWA sur Windows et Linux ! Une fois installées, elles sont lancées à partir du menu Démarrer et fonctionnent comme toutes les autres applications installées, c’est-à-dire sans barre d’adresse ni onglets. Les Service Workers s’assurent qu’elles sont rapides et fiables. L’utilisateur aura une expérience qui se rapproche de celle qu’il a avec toute autre application installée.

Pour ceux qui vont s’y mettre, LePage assure que ce n'est pas différent de ce que vous faites déjà aujourd'hui. Tout le travail que vous avez effectué pour votre PWA s'applique toujours ! Si votre application répond aux critères PWA standard, Chrome déclenchera l'événement beforeinstallprompt. Il vous faudra alors enregistrer l'événement, puis ajouter une interface utilisateur (comme un bouton d’installation d’une application) pour indiquer à l’utilisateur que votre application peut être installée. Ensuite, lorsque l'utilisateur clique sur le bouton, appelez prompt () sur l'événement enregistré. Chrome montrera ensuite l'invite à l'utilisateur. S'il clique sur Ajouter, Chrome ajoutera votre PWA à son menu de démarrage et à son bureau.


Pourquoi créer des PWA desktop ?

Le mobile a largement contribué à l'évolution des applications Web progressives. Mais si la croissance du mobile a été si forte, l'utilisation des ordinateurs de bureau continue de croître. Le téléphone portable atteint un pic d’utilisation le matin et le soir et la tablette est également beaucoup plus utilisée le soir. L'utilisation d’un poste de travail est mieux répartie tout au long de la journée que celle du mobile. Il a une utilisation significative pendant la journée lorsque la plupart des gens sont au travail et à leur bureau.

Avoir cette « configuration » native est important pour les utilisateurs, cela leur donne la certitude que l’application sera rapide, intégrée, fiable et attrayante. Les PWA desktop peuvent être lancées à partir du même endroit que les autres applications de bureau, mais elles s'exécutent dans une fenêtre d'applications (elles ont donc l'apparence d'autres applications sur le bureau).

more...
No comment yet.
Scooped by Mickael Ruau
Scoop.it!

Intégrer facilement de l'accessibilité dans votre projet front-end

Intégrer facilement de l'accessibilité dans votre projet front-end | Bonnes Pratiques Web | Scoop.it
Nous travaillons assez rarement sur des projets qui doivent être accessibles. Nos clients, comme nous-mêmes ne sommes pas assez sensibilisés à cette
more...
No comment yet.
Scooped by Mickael Ruau
Scoop.it!

Introduction WebExtensions

Introduction WebExtensions | Bonnes Pratiques Web | Scoop.it
WebExtensions : modifier le Web ou l’interception des requêtes et du fonctionnement des pages Web grâce à XSLT et JavaScript
Mickael Ruau's insight:

L'auteur rejette par avance tous les problèmes de sécurité ou de stabilité, ou de contournement des CGU, occasionnés par l’utilisation des exemples fournis dans le présent article, qui se veut strictement de sensibilisation et d’apprentissage.

more...
No comment yet.
Scooped by Mickael Ruau
Scoop.it!

« Accessibilité, par où commencer ? » – en conférence au DevFest Nantes avec Nathalie Rolland

« Accessibilité, par où commencer ? » – en conférence au DevFest Nantes avec Nathalie Rolland | Bonnes Pratiques Web | Scoop.it
Le 10 novembre dernier, j'ai fait un bond dans la cour des grands ; ça y est, j'ai donné ma première vraie conférence à un grand évènement. C'était au DevFest Nantes. Quand Nathalie Rolland m'a proposée de réaliser cette conférence sur l'accessibilité web avec elle, je n'ai pas hésité et, pourtant, je savais que ce n'était pas gagné pour moi. Petit point sur le déroulement et présentation de notre conférence.
more...
No comment yet.
Scooped by Mickael Ruau
Scoop.it!

Un peu de programmation fonctionnelle en JavaScript ! - dsferruzza

Un peu de programmation fonctionnelle en JavaScript ! - dsferruzza | Bonnes Pratiques Web | Scoop.it

Cet article est une très légère variante de celui que j’ai publié dans 24 jours de web 2014. Je l’ai aussi adapté en présentation.

more...
No comment yet.
Scooped by Mickael Ruau
Scoop.it!

enable cross-origin resource sharing

enable cross-origin resource sharing | Bonnes Pratiques Web | Scoop.it

There are some more headers and settings involved if you want to support verbs other than GET/POST, custom headers, or authentication. You can learn more about these options in the Using CORS tutorial on HTML5 Rocks.

 

If you want the TL;DR version, take a look at the flowchart for implementing CORS support.

If you'd like to learn more about implementing CORS for a specific platform, follow one of the links below:

more...
No comment yet.
Scooped by Mickael Ruau
Scoop.it!

Démystifier CORS (Cross-Origin Resource Sharing) : Inovia Blog

Démystifier CORS (Cross-Origin Resource Sharing) : Inovia Blog | Bonnes Pratiques Web | Scoop.it

Depuis des années, les navigateurs restreignent l’accès à des ressources n’appartenant pas au domaine depuis lequel un document a été chargé (règle dite de Same-Origin Policy).
Le fait que la balise script ne soit pas concernée par cette restriction a ouvert la voie à la technique JSONP(JSON with padding), permettant d’émettre des requêtes AJAX cross-domain retournant des données JSON encapsulées dans une fonction de rappel (callback) en JavaScript. Il faut admettre cependant que cette technique, bien qu’encore très utilisée, relève surtout de l’astuce.

CORS est un mécanisme robuste et normalisé par le W3C permettant à tout navigateur compatible d’effectuer des requêtes HTTP cross-domain. Il a valeur de standard industriel et étend le champ des possibilités bien au delà de ce qui est actuellement permis par JSONP.

JSONP est très pratique pour partager des données publiques (comprendre non sensibles).
Néanmoins, cette technique ne supporte pas les méthodes POST, PUT, DELETE (seule la méthode GET est supportée). Elle n’est donc à priori pas adaptée pour exposer une API JSON sauf à mettre en place des solutions de contournement (méthode HTTP transmise via un paramètre de requête, contrôles d’accès, etc.).

more...
No comment yet.
Scooped by Mickael Ruau
Scoop.it!

Accéder à une API cross-domain depuis Javascript avec CORS et un reverse proxy nginx

Cross-Origin Resource Sharing (CORS) est une spécification du W3C permettant les requêtes cross-domain depuis les navigateurs compatibles. Si l’API que vous interrogez est compatible avec CORS, vous pourrez accéder à l’API même si elle n’est pas sur le même domaine que votre application.

CORS est compatible avec :

  • Chrome 3+
  • Firefox 3.5+
  • Opera 12+
  • Safari 4+
  • Internet Explorer 8+

Pour utiliser CORS il faut envoyer au serveur des headers de contrôle d’accès qu’il inspectera pour approuver ou non la requête. Ces headers de contrôle d’accès décriront le contexte de la requête, sa méthode HTTP, son origine, ses headers custom, …

Selon le type de requête, ces headers sont envoyés automatiquement par le navigateur avec la requête ou dans une requête préliminaire (preflight request). La requête aboutira si le serveur répond avec des headers de contrôle d’accès compatibles.

=> OPTIONS https://api.com/foobar - HEADERS - Origin: http://application.com Access-Control-Request-Method: POST Access-Control-Request-Headers: Api-Key <= HTTP/1.1 204 No Content - RESPONSE HEADERS - Access-Control-Allow-Origin: http://application.com Access-Control-Allow-Methods: GET, POST, OPTIONS Access-Control-Max-Age: 86400 Access-Control-Allow-Headers: Api-Key

Pour plus d’informations sur le fonctionnement de CORS, je vous laisse lire les articles Making Cross-Domain Requests with CORS et Démystifier CORS (Cross-Origin Resource Sharing) qui sont très complets

Mickael Ruau's insight:

Reverse Proxy

Malheureusement l’API que je souhaitais utiliser n’était pas compatible CORS. Si c’est votre cas également, il faudra alors passer par un proxy.

Nginx permet simplement de mettre en place ce genre de reverse proxy grace à une configuration de ce type :

server { listen 80; server_name application.com; location /api { # Rewrite /api/resource/action?key=value to /resource/action?key=value RewriteRule ^/api/(.*)$ /$i [L,PT,QSA] # Activer le proxy proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_pass http://api.com; proxy_redirect off; proxy_buffers 32 16k; proxy_busy_buffers_size 64k; } }

Ainsi, votre application pourra appeler votre API sur http://application.com/api sans problème de cross-origin.

Si vous avez besoin d’exposer l’API sur un autre domaine ou sur un autre port que votre application, vous aurez besoin de permettre le cross-domain grâce à CORS. Mon application tournant sur localhost:8080, j’ai décidé de mettre mon proxy sur localhost:8181.

server { listen 8181; server_name localhost; location / { # Activer le proxy proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_pass http://api.com; proxy_redirect off; proxy_buffers 32 16k; proxy_busy_buffers_size 64k; # Ajouter les headers de contrôle d'accès CORS add_header 'Access-Control-Allow-Origin' '*' always; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always; add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept' always; add_header 'Access-Control-Allow-Credentials' 'true' always; }

Je peux ainsi appeler l’API sur localhost:8181 de façon transparente.

Attention, Access-Control-Allow-Origin: '*' autorise les requêtes cross-origin depuis n'importe quel domaine, en dev cela permet de facilement mettre CORS en place mais dans un soucis de sécurité il faudrait être plus restrictif.
more...
No comment yet.
Scooped by Mickael Ruau
Scoop.it!

Saviez-vous que l’assistance vocale va changer le SEO pour toujours ?

Saviez-vous que l’assistance vocale va changer le SEO pour toujours ? | Bonnes Pratiques Web | Scoop.it
Saviez-vous que l’assistance vocale va changer le SEO pour toujours ? Un ebook proposé par TrustPilot  Le monde du SEO change tellement rapidement, d’année en année, qu’il est presque méconnaissable. Certains crient à la catastrophe et se demandent si le SEO est mort. Bien que cela soit difficile à croire, il existe de nouvelles technologies …
more...
No comment yet.
Scooped by Mickael Ruau
Scoop.it!

Bonnes pratiques HTTP/1, grosses erreurs en HTTP/2

Bonnes pratiques HTTP/1, grosses erreurs en HTTP/2 | Bonnes Pratiques Web | Scoop.it

Vous l’aurez peut-être anticipé : un site web ayant déployé toutes les bonnes pratiques HTTP/1 pour contourner les limitations propres au protocole, pourrait au final être plus lent avec HTTP/2, puisque cumulant des schémas contre-productifs, que les bienfaits du protocole ne suffiront pas à compenser.

Mickael Ruau's insight:

Sprites CSS, concaténation de fichiers CSS ou JS

Tout développeur front-end en aura entendu parler : regrouper les fichiers CSS, les fichiers JS, ou les images de faibles dimensions ensemble permet de limiter le nombre de requêtes HTTP et donc d’accélérer le chargement.
Ce qui était bénéfique en HTTP/1 risque au final d’aller à l’encontre d’une bonne expérience utilisateur en HTTP/2 : la connexion TCP est unique et multiplexée, en regroupant les fichiers, vous allez notamment perdre les bénéfices de priorité sur les différents flux !

A noter que les premiers retours d’expérience sur l’utilisation de HTTP/2 semblent montrer qu’il convient d’éviter malgré tout l’utilisation de micro-fichiers. Si c’est votre cas, appliquer partiellement le principe de concaténation peut rester intéressant !

Domaines Cookie-less

Nous avons parlé plus tôt des en-têtes HTTP, qui se retrouvent répétés sur chaque requête en HTTP/1, ce qui peut être très problématique si le site utilise des cookies un tant soit peu volumineux. Une parade était d’utiliser un domaine dédié pour tous les contenus qui n’avaient pas besoin des informations transmises via les cookies. On éliminait ainsi simplement les données superflues.
Avec HTTP/2, d’une part le problème n’existe plus (en-têtes compressés) mais surtout, le hack du domaine cookie-less devient néfaste, puisqu’il implique inutilement l’utilisation d’une nouvelle connexion TCP et d’une résolution DNS supplémentaire !

Domain Sharding

Autre “hack” HTTP/1, le domain sharding consiste à distribuer les ressources d’une page web sur plusieurs domaines, pour s’affranchir de la limitation de parallélisation des requêtes HTTP des navigateurs web. Cette limite étant associée au domaine, et non au serveur, on peut l’éviter en utilisant plusieurs domaines. Là encore, cela implique des connexions TCP et des résolutions DNS supplémentaires.
Là encore, HTTP/2 a résolu le problème initial, grâce au multiplexage cette fois !

Inlining CSS, JS ou images en base64

Conseillé pour les fragments de CSS, de Javascript ou encore les petites images, l’inlining est une autre technique permettant de réduire le nombre de requêtes HTTP/1.
La nécessité de recourir à cette technique est moins évidente en HTTP/2, puisque l’impact de ces requêtes sera moins marqué grâce au multiplexage. Cette technique conserve les inconvénients déjà présents en HTTP/1, à savoir la perte des bienfaits du cache navigateur pour les ressources concernées, et l’on doit ajouter que cela peut aller à l’opposé des effets recherchés par la prioritisation des flux du multiplexage HTTP/2 !
On notera que l’inlining à des fins d’optimisation du chemin critique, pourra lui être éliminé au profit de l’utilisation du Server Push, même s’il faut garder à l’esprit que ce mécanisme reste relativement expérimental.

 

more...
No comment yet.
Scooped by Mickael Ruau
Scoop.it!

Feature Detection in Browsers, Shims and Polyfills

Detect browser capabilities and features instead of detecting the browser itself. Feature detection is better than browser sniffing.

more...
No comment yet.
Scooped by Mickael Ruau
Scoop.it!

Solved problems / Methodology / BEM

The BEM methodology defines CSS selector naming conventions that solve a range of web development problems and address the following issues:

more...
No comment yet.
Scooped by Mickael Ruau
Scoop.it!

Workflow front-end : quels outils choisir ? (2/3) — Troopers

Workflow front-end : quels outils choisir ? (2/3) — Troopers | Bonnes Pratiques Web | Scoop.it
Après avoir pris connaissance des limites de notre worfklow actuel, quelles sont les possibilités qui s'offrent à nous pour établir une nouvelle stack front-end ? Nous vous en parlons !
more...
No comment yet.
Scooped by Mickael Ruau
Scoop.it!

La release candidate 1 d'Angular 7 est disponible, la sortie de la version stable est prévue pour fin octobre

La release candidate 1 d'Angular 7 est disponible, la sortie de la version stable est prévue pour fin octobre | Bonnes Pratiques Web | Scoop.it


La release candidate 1 (RC1) d'Angular 7 est disponible depuis le 10 octobre et elle permet d'avoir un aperçu des nouveautés du framework. Il y en a plusieurs, mais nous n'allons citer ici que quelques-unes qui, pour notre part, faciliteront grandement le travail des développeurs. Parmi ces améliorations on peut citer :

  • l’amélioration des performances des applications par l’automatisation de l’ajout ou du retrait des métadonnées de réflexion, réduisant ainsi la charge des applications une fois en production ;
  • la documentation CLI a été intégrée à la documentation principale angular.io ;
  • introduction de la fonctionnalité Glisser/Déposer qui permet de créer une interface utilisateur qui peut être utilisée pour glisser, déposer, trier et transférer des éléments librement dans une liste ;
  • l’amélioration du routeur : cette fonctionnalité est particulièrement intéressante car désormais l’interface CanLoad contiendra UrlSegment qui stockera les urls vers lesquelles un utilisateur a essayé de naviguer et pourra être redirigé ultérieurement.
more...
No comment yet.
Scooped by Mickael Ruau
Scoop.it!

Tips for balancing web fonts & page load - Frontend News #1

Tips for balancing web fonts & page load - Frontend News #1 | Bonnes Pratiques Web | Scoop.it

In 2010 Google launched Google Fonts and made custom web fonts accessible to the world. You had a custom typeface on your site with just a few lines of copy-and-pasted CSS.

index.html
<link href="https://fonts.googleapis.com/css?family=Bevan" rel="stylesheet">
index.css
body { font-family: 'Bevan', Georgia, serif; }

Under the hood Google Fonts links to a stylesheet full of font-face declarations.

css?family=Bevan
/* latin */ @font-face { font-family: 'Bevan'; font-style: normal; font-weight: 400; src: local('Bevan Regular'), local('Bevan-Regular'), url(https://fonts.gstatic.com/s/bevan/v9/4iCj6KZ0a9NXjG8dWCvZtUSI.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

This setup prioritizes simplicity over performance. But it leads to a nasty problem on slow connections: FOIT.

Flash of Invisible Text (FOIT)

Most modern browsers will layout the page but wait for three seconds before rendering any text. If the custom font has loaded it will appear, if not the next available fallback font is rendered. This is known as FOIT. On a bad 3G connection this usually means three seconds of a site devoid of text.

Mickael Ruau's insight:

Use WebPageTest for profiling

WebPageTest is the best free tool for profiling page load. It allows you to throttle connections and use real mobile devices. For this study, we'll use the "Easy" profile, which is a slow 3G connection. The results WebPageTest provides are comprehensive but sometimes hard to understand.

 

(...)

A non-exhaustive check list to loading fonts

[ ] - Avoid plain-old @font-face { }
[ ] - Prefer .woff2 with a .woff fallback
[ ] - FOUT > FOIT for content sites
[ ] - Font Face Observer for FOUT
[ ] - Match styles for a subtle transition
[ ] - Keep an eye on HTTP/2 push
[ ] - Profile early and often

 

more...
No comment yet.
Scooped by Mickael Ruau
Scoop.it!

Les principaux navigateurs Web prévoient de supprimer le support de TLS 1.0 et 1.1 au premier semestre 2020

Les principaux navigateurs Web prévoient de supprimer le support de TLS 1.0 et 1.1 au premier semestre 2020 | Bonnes Pratiques Web | Scoop.it

Cela fait déjà deux mois que la version 1.3 du protocole TLS a été officiellement publiée après son approbation en mars dernier par l'organisme d'élaboration des standards Internet IETF (Internet Engineering Task Force). Alors, c'est le temps pour abandonner les versions plus anciennes. C'est en tout cas le message que viennent de lancer les principaux navigateurs Web en annonçant simultanément leur intention de mettre fin au support de TLS 1.0 et 1.1.

more...
No comment yet.
Scooped by Mickael Ruau
Scoop.it!

Le vaste monde des alternatives textuelles : les attributs ARIA : à n'utiliser qu'en connaissance de cause (6/6)

Le vaste monde des alternatives textuelles : les attributs ARIA : à n'utiliser qu'en connaissance de cause (6/6) | Bonnes Pratiques Web | Scoop.it
Dans la spécification ARIA, il existe 3 attributs qui permettent d'ajouter du contexte textuel à des éléments. Ils peuvent être utilisés comme alternatives textuelles dans certains contextes. Les attributs aria-label et aria-labelledby permettent de nommer un élément tandis que l'attribut aria-describedby permet de le décrire. Comment les utiliser ?
more...
No comment yet.
Scooped by Mickael Ruau
Scoop.it!

State of the Front-End Industrialisation

State of the Front-End Industrialisation | Bonnes Pratiques Web | Scoop.it
State of the Front-End Industrialisation. Contribute to GuillaumeAmat/state-of-the-front-end-industrialisation development by creating an account on GitHub.
more...
No comment yet.
Scooped by Mickael Ruau
Scoop.it!

Bypass CORS Errors When Testing APIs Locally

Bypass CORS Errors When Testing APIs Locally | Bonnes Pratiques Web | Scoop.it
Make configuration changes to your web browser or run a local server to bypass CORS and other cross origin problems when testing APIs locally.
Mickael Ruau's insight:

Ask the server owner politely to add CORS support

It doesn’t take much effort to enable cross origin resource sharing on a server. As mentioned on enable-cors.org, the owner only needs to add Access-Control-Allow-Origin: * to the response header. There are even instructions on how to do this in various programming languages, all of which are not too difficult and make a world of difference to developers experiencing these errors.

more...
No comment yet.
Scooped by Mickael Ruau
Scoop.it!

A practical guide to CORS – Thomas Wang –

Web pages are under the restrictions of same-origin policy, which means scripts contained in a web page cannot access data in another page with different origin. For example…
more...
No comment yet.
Scooped by Mickael Ruau
Scoop.it!

Requête Ajax Cross-domain via un proxy — Pascal MARTIN : développement Web & PHP

Nous avons vu au cours d’un précédent article comment contourner la limitation de Same Origin Policy en utilisant la balise <script> pour effectuer des requêtes Ajax vers un serveur distant (nom de domaine différent du nom de domaine sur lequel notre application est déployée).

Cette solution nous imposait de modifier notre code côté navigateur, pour ne plus utiliser une instance d’object XMLHttpRequest, mais passer par de la génération dynamique de balises HTML <script>.

Nous allons à présent voir comment effectuer des requêtes Ajax distantes en passant par un proxy, de manière à ne pas avoir à ré-écrire tout notre code de chargement de données depuis l’application HTML+Javascript.

Nous commencerons par l’écriture d’un proxy en PHP, par lequel nous passerons pour effectuer nos appels Ajax, et, en seconde partie, nous verrons comment utiliser les fonctionnalités de proxy-ing du serveur Web Apache, pour ne pas avoir à écrire nous-même le proxy.

more...
No comment yet.
Scooped by Mickael Ruau
Scoop.it!

Colorful world-of-visual-automation-testing-latest

In agile software development world, we are dealing with many test tasks such as user story testing, exploratory testing, check-list based testing, regression testing, performance testing, security testing in each sprint. Besides these testing activities, one of the test types which is considerably getting crucial is visual regression testing.

 

Visual regression testing focuses on to check visual contents and animations, page layout, and responsive design of a website/app. Because of the limits of human vision, human-based visual regression testing is generally error-prone and cumbersome. Hence, automation is inevitable. It enables us to run the tests much more precisely in a short time period. Also, it saves us a significant amount of time to deal with other manual test activities in each sprint.

 

In this talk, we will walk through well-known open-source and commercial solutions for visual test automation. We will learn which technologies they use, what type of visual tests they are suitable for, and their major differences between each other. Besides this overview, we will also make a real-life visual test automation demo by using Selenium, ImageMagick, and AShot.

more...
No comment yet.
Scooped by Mickael Ruau
Scoop.it!

Les ligatures dans les navigateurs - Typographisme

Les ligatures dans les navigateurs - Typographisme | Bonnes Pratiques Web | Scoop.it
On sait tous que les navigateurs ne sont pas les champions du monde de la gestion typographique. Ceci étant, ils s’améliorent tous les jours et parmi toutes les chipoteries
more...
No comment yet.
Scooped by Mickael Ruau
Scoop.it!

Web Dev Checklist

Web Dev Checklist | Bonnes Pratiques Web | Scoop.it
Template trello board based on webdevchecklist.com (http://webdevchecklist.com).
This is editable so that people can add items they feel would be useful for anyone. To use this board to track you
more...
No comment yet.
Scooped by Mickael Ruau
Scoop.it!

Home - Scalable and Modular Architecture for CSS

Home - Scalable and Modular Architecture for CSS | Bonnes Pratiques Web | Scoop.it

SMACSS (pronounced “smacks”) is more style guide than rigid framework. There is no library within here for you to download or install. There is no git repository for you to clone. SMACSS is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process. It is an attempt to document a consistent approach to site development when using CSS. And really, who isn’t building a site with CSS these days?!

Get to know Scalable and Modular Architecture for CSS:

Read it Online

SMACSS started out as a free online book and that continues to be true. You can always read the book online.

Download the Book

The e-book comes in PDF, ePub, and mobi formats for easy installation on almost any e-reader. Download the zip!

more...
No comment yet.