13 mai 2020

Side project du 1er mai : Covid100.fr

Side project du (long) week-end du 1er mai : covid100.fr 

Une carte interactive pour connaître sa zone de 100km autour de chez soi pendant le déconfinement.

Le site utilise  :

  • 🗺️ OpenStreetMap et Leaflet pour la carte interactive
  • 🎨 CSS : il y a peu d'élément graphique je n'ai donc pas inclus de framework CSS pour gagner en performance
  • 🚂 JS : Vanilla JS toujours pour gagner en performance
  • 🖼️ HTML : de base je suis parti sur le template de https://html5boilerplate.com/ en supprimant tous les fichiers non utiles au projet
  • 📱PWA : le minimum (pas de mode offline) a été mis en place pour que le site web soit une Progressive Web App.
    • sur smartphone : on pourra donc ajouter le site web à son écran d'accueil et le site s'utilisera comme une application native
  • 📱SEO/Social : 
  • ⚖️ RGPD 
    • le site utilise Google analytics en mode anonyme et une (petite) bannière est affichée pour l'indiquer 
  • Hébergement : Github page https://pages.github.com/
  • ⌨️ Code source (no code review please 😅): https://github.com/bilelz/covid100


18 février 2020

⌨ Raccourci clavier Windows 10 pour les émojis 🐱‍🏍

emoji panel
Dans un champ de saisie (éditeur de texte, formulaire, ...) :

  • appuyer sur la touche Windows puis, en même temps, la touche "point-virgule/point" pour faire apparaître les émojis.


clavier azerty


via https://support.microsoft.com/en-us/help/4043948/windows-10-whats-new-in-recent-updates#section-5

9 février 2017

iOS10 - Webkit (Safari) allow zoom everywhere by ignoring max-scale setting #accessibility @webkit @grorgwork

Good news for accessibility

To ensure that user will not be able to zoom on a webpage, the solution was to set meta-tag max-scale to "no" or 0:

In a post, last week, Webkit announce a list of new interaction in iOS 10.
One of them : these settings maximum-scale and user-scalable will be ignore.

Zooming Everywhere
Safari on iOS 10 allows the user to pinch zoom on every page. As a developer, you should be aware of this, and make sure your content works well when zoomed.

Bad day for bad dev.

We think that lot of website will have a problem with this.

Cause if an field (input/select) have a font-size less than 16px, Safari will automatically zoom to this field when user focus to this!

Safari zoom to a field with a tiny font-size
Source : hallofhavoc.com




10 février 2016

Chart Color gradient


Source code
chart