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

SSL Server Test (Powered by Qualys SSL Labs)

A comprehensive free SSL test for your public web servers.
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!

Pourquoi j'ai arrêté d'utiliser CSS

CSS est un langage horriblement dangereux, parce qu'il mêle des concepts complètement pétés et une folle capacité à faire confondre facilité et simplicité aux gens qui l'utilisent.

Mickael Ruau's insight:

la spécificité d'un sélecteur va définir la priorité d'application d'un style.

Sélecteur Spécificité * 0,0,0,0 li 0,0,0,1 li:first-line 0,0,0,2 ul li 0,0,0,2 ul ol+li 0,0,0,3 h1 + *[rel=up] 0,0,1,1 ul ol li.red 0,0,1,3 li.red.level 0,0,2,1 #x34y 0,1,0,0
more...
No comment yet.
Scooped by Mickael Ruau
Scoop.it!

Stylez-moi ce formulaire ! · Les intégristes

Après avoir tenu ce discours : «Non les formulaires, on ne peut pas les styler, désolé» pendant des années, les webdesigners les plus tenaces sont revenus avec des exemples de sites en nous disant : «Tu me dis que c’est pas possible, mais là sur tel site, ils l’ont fait.»”

Mickael Ruau's insight:
jQuery UI selectmenu
Pas des plus facile à manipuler, mais très complet, il couvre largement le spectre des utilisations de menus avec des listes déroulantes. Trop de styles inline qui complique le skinning des css externes. A noter que ce plugin utilise les attributs ARIA pour l’accessibilité.
jQuery UI checkbox
Simplissime. Par exemple pour une case à cocher il suffit d’initialiser le script de cette façon $('input').checkBox();
Et la case à cocher est remplacée par un span avec la classe “ui-checkbox”, il ne reste plus qu’à appliquer les CSS.
jQuery Stylish select
Je ne l’ai pas testé personnellement, mais ça a été utilisé sur un projet récent dans ma boîte. Complètement customisable en CSS et ultra light.
Uniform
Je suis tombé sur celui-ci il y a quelques jours, il me parait assez complet et facilement skinnable, une image sprite pour tous les éléments (vous pouvez créer des thèmes et les proposer sur le site), une fois les éléments stylés la navigation au clavier me parait correcte, reste juste à mettre plus en avant le focus sur les éléments.
more...
No comment yet.
Scooped by Mickael Ruau
Scoop.it!

Que se passe-t-il en mode quirks ? (traduction) · Les intégristes

Ce billet est la traduction de l’article « What happens in Quirks mode » de Jukka “Yucca” Korpela initialement paru sur le site du Tampere University of Technologie (Finlande) le 13 avril 2007, dernière modification le 28 février 2008.

Le mode quirks est un mode de fonctionnement des navigateurs Web tels qu’Internet Explorer (IE), Firefox et Opera. En gros, le mode quirks (aussi appelé mode compatibilité) signifie qu’un navigateur relativement moderne simule intentionnellement de nombreux bugs des anciens navigateurs, en particulier IE 4 et IE 5.

 

Le mode quirks est déclenché par le doctype sniffing aussi connu sous le nom de doctype switching. Cela signifie que le navigateur inspecte le début d’un document HTML pour voir si il contient une déclaration de doctype comme requis par les spécifications HTML.

Le but du mode quirks est de faire que les vieilles pages s’affichent comme l’a voulu leur auteur. Les vieilles pages peuvent avoir été écrites pour utiliser les caractéristiques connues des vieux navigateurs ou du moins de s’y adapter. Pour plus d’informations sur le mode quirks, en général, consultez le site QuirksMode.org.

Il n’existe pas de spécification de ce qui se passe en mode Quirks. Après tout, le mode est, par essence, une violation intentionnelle des spécifications CSS et HTML. Cependant, puisque les auteurs peuvent avoir besoin d’une description de ce qui peut réellement se passer dans le mode quirks, j’ai rédigé ce document.

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!

Linting CSS with stylelint | 456 Berea Street

I use stylelint to keep my CSS in order. Here’s how I configure it.
more...
No comment yet.
Scooped by Mickael Ruau
Scoop.it!

Le Konami code expliqué –

Le Konami code expliqué – | Bonnes Pratiques Web | Scoop.it

Le Konami code c'est un truc de geek parce que vous ne comprenez pas un mot sur deux... Vraiment?

Mickael Ruau's insight:

ce code qui semble condamné au monde du jeu vidéo a trouvé une seconde jeunesse. Au fond, c'est un peu normal... Tous ces jeunes gamers sont devenus grand et se sont dits qu'il était bien dommage de ne pas trouver ce «principe» sur le web.

Du coup, grâce à un petit script (javascript) inséré dans le capot de certains sites web on peut accéder à des pages cachées, des contenus inédits, ou des petits délires de programmeurs.

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

Gérer les Erreurs et les Exceptions en JavaScript

Gérer les Erreurs et les Exceptions en JavaScript | Bonnes Pratiques Web | Scoop.it

Voici les 3 principaux patterns a utilisés pour gérer vos erreurs JavaScript dans les navigateurs ou dans Node.js et pour ceux qui ont le temps, un petit topo sur la différence entre Erreur et Exception.

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

Styling form controls | 456 Berea Street

Styling form controls | 456 Berea Street | Bonnes Pratiques Web | Scoop.it

 

The short answer is probably disappointing to many: you can't. Some also argue that you shouldn't, since doing so may reduce usability. My opinion on that is that light, sensible styling of some form controls can be OK, as long as you don't overdo it. But what if we don't think about usability, and just want to see what actually can be styled? I've made a few examples that make up a longer answer to the question about styling form controls.

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

Semantics in practice and mapping semantic value to its consumers - Paul Irish

Semantics in practice and mapping semantic value to its consumers - Paul Irish | Bonnes Pratiques Web | Scoop.it

Divya Manian kicked off a good bout of discussion of HTML semantics with her post Our pointless pursuit of semantic value. It called into question the amount of time we spend on identifying the Right and Best ways of marking up our content while highlighting details of some of the consumers of semantics like assistive technology (AT). Jeremy Keith responded in Pursing Semantic Value. I wanted to chime in on Jeremy’s post so, I’ve published below my comment from the original post

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

Conditional stylesheets vs CSS hacks? Answer: Neither! - Paul Irish

Conditional stylesheets vs CSS hacks? Answer: Neither! - Paul Irish | Bonnes Pratiques Web | Scoop.it

There are a few problems with it though:

  • Conditional stylesheets mean 1 or 2 additional HTTP requests to download
  • As they are in the the <head>, the rendering of the page waits until they’re totally loaded.
  • Also - Yahoo’s internal coding best practices do not recommend conditional stylesheets
  • It can separate a single CSS rule into multiple files. I’ve spent a lot of time wondering “Where the eff is that rule coming from!?” when it turned out to be tucked away in a conditional stylesheet.
Mickael Ruau's insight:

Throw it on the html tag

Here is the new recommendation, and the one that’s in use in the HTML5 Boilerplate.

1 2 3 4 5 <!--[if lt IE 7 ]> <html class="ie6"> <![endif]--> <!--[if IE 7 ]> <html class="ie7"> <![endif]--> <!--[if IE 8 ]> <html class="ie8"> <![endif]--> <!--[if IE 9 ]> <html class="ie9"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->

Why?

  • This fixes a file blocking issue discovered by Stoyan Stefanov and Markus Leptien.
  • It avoids an empty comment that also fixes the above issue.
  • CMSes like Wordpress and Drupal use the body class more heavily. This makes integrating there a touch simpler
  • It doesn’t validate in html4 but is fine in html5. Deal with it.
  • It plays nicely with a technique to kick off your page-specific javascript based on your markup.
  • It uses the same element as Modernizr (and Dojo). That feels nice.

I left an empty class in there because you’ll probably be putting a no-js in there or something else. If not, delete.

 

(...)

Here is the current iteration that we have in the HTML5 Boilerplate. We actually tried to reduce it down to just a single .oldIE class for IE ≤8 (to use with safe css hacks), but that didn’t fly. Anyway, our current version..
1 2 3 4 <!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html class=""> <!--<![endif]-->
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.