#web_dev

Remix Icon - Open source icon library
▻https://remixicon.com

Remix Icon is a set of open-source neutral-style system symbols for designers and developers. Unlike a patchwork icon library, 1400+ icons are all elaborately crafted so that they are born with the gene of readability, consistency and perfect pixels. Each icon was designed in “Outlined” and “Filled” styles based on a 24x24 grid. Of course, all the icons are free for both personal and commercial use.

Jeu d’icônes pour le développement web.
Présente le gros avantage de pouvoir être utilisé comme une webfont (à la fontawesome/glyphicon) ou en tant qu’images SVG individuelle mais aussi sous forme de sprite SVG.
La documentation : ▻https://github.com/Remix-Design/remixicon#usage

#icone #svg #sprite #fontawesome #glyphicon #web_dev #remixicon

Native image lazy-loading for the web!
▻https://addyosmani.com/blog/lazy-loading

https://addyosmani.com/assets/images/loading-attribute.png

In this post, we’ll look at the new loading attribute which brings native <img> and <iframe> lazy-loading to the web!. For the curious, here’s a sneak preview of it in action:

<img src="celebration.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe>

We are hoping to ship support for loading in Chrome 75 and are working on a deep-dive of the feature we’ll publish soon. Until then, let’s dive into how loading works.

Guide to Web Authentication
▻https://webauthn.guide

The Web Authentication API (also known as WebAuthn) is a specification written by the W3C and FIDO, with the participation of Google, Mozilla, Microsoft, Yubico, and others. The API allows servers to register and authenticate users using public key cryptography instead of a password.

Système d’authentification basé sur une clé publique/privée et non plus sur un mot de passe (enfin !). Reste quand même le problème du stockage de la clé privée et son transfert entre les différents terminaux d’un utilisateur...
Prévu pour permettre la fédération d’identité côté utilisateur, c’est potentiellement le futur pour l’authentification web (?) Reste à savoir si les grandes plate-forme et les utilisateurs vont s’en emparer ou si ça ne sera qu’une tentative de plus (comme le moribond OpenID par ex)...

Voir aussi :
– la doc de l’API sur MDN (en anglais) : ▻https://developer.mozilla.org/en-US/docs/Web/API/Web_Authentication_API
– une démo jouable (POC) avec code source et débogueur : ▻https://webauthn.org
– une implémentation javascript + node.js : ▻https://github.com/fido-alliance/webauthn-demo avec un explication détaillée : ▻https://slides.com/fidoalliance/jan-2018-fido-seminar-webauthn-tutorial#/25

– la recommandation du W3C : ▻https://www.w3.org/TR/webauthn
– la compatibilité des navigateurs : ▻https://www.caniuse.com/#feat=webauthn

#WebAuthn #authentification #API #openid #SPIP #web_dev #auth

JSON Formatter & Validator
▻https://jsonformatter.curiousconcept.com

un débogueur de json en ligne

#json #web_dev #debogage #outil

Laragon - portable, isolated, fast & powerful universal development environment for PHP, Node.js, Python, Java, Go, Ruby.
▻https://laragon.org

Un serveur web de développement opensource sous Windows : « light » (18 Mo), configurable (document root apache, datadir MariaDB) et portable. Intègre PHP, MariaDB, XDebug etc... mais aussi NodeJS et Composer, une appli d’envoi de mail et un « mail catcher ». Génère des vhost en .test et (depuis la v3.3) semble intégrer une génération de certificats SSL internes.
– Versions de PHP 5. et 7. + ajout « simple » d’une nouvelle version : ▻https://forum.laragon.org/topic/166/tutorial-how-to-add-another-php-version
– phpmyadmin n’est pas inclut par défaut : ▻https://forum.laragon.org/topic/98/tutorial-how-to-add-phpmyadmin

Documentation : ▻https://laragon.org/docs et tutoriaux : ▻https://forum.laragon.org/category/5/tutorials
GitHub : ▻https://github.com/leokhoa/laragon

#wamp #web_dev #laragon #nodejs #composer #windows

Firefox Multi-Account Containers - Modules pour Firefox
►https://addons.mozilla.org/fr/firefox/addon/multi-account-containers

About This Extension
The Firefox Multi-Account Containers extension lets you carve out a separate box for each of your online lives – no more opening a different browser just to check your work email! Here is a quick video showing you how it works.
Under the hood, it separates website storage into tab-specific Containers. Cookies downloaded by one Container are not available to other Containers. With the Firefox Multi-Account Containers extension, you can...
Sign in to two different accounts on the same site (for example, you could sign in to work email and home email in two different Container tabs.
Keep different kinds of browsing far away from each other (for example, you might use one Container tab for managing your Checking Account and a different Container tab for searching for new songs by your favorite band)
Avoid leaving social-network footprints all over the web (for example, you could use a Container tab for signing in to a social network, and use a different tab for visiting online news sites, keeping your social identity separate from tracking scripts on news sites)

Et pour un container spécialisé pour Facebook (et automatiquement utilisé), voir ▻https://addons.mozilla.org/fr/firefox/addon/facebook-container

#firefox #extension #session #cookie #outil #web_dev #vie_privée

Front-End Checklist | Front-End-Checklist
►http://frontendchecklist.com

▻https://gethead.info

Coolors
▻https://coolors.co

#couleurs #palette #outil

guide-integrateur/README.md at master · DISIC/guide-integrateur · GitHub
▻https://github.com/DISIC/guide-integrateur/blob/master/README.md

Ce guide de l’intégrateur vous est proposé dans le cadre des ressources accompagnant la prise en main de la version 3 du référentiel général d’accessibilité pour les administrations (RGAA 3).
[...]
Ce guide s’adresse aux intégrateurs chargés de réaliser les gabarits HTML et CSS et se focalise sur les problématiques de respect de la sémantique et de la mise en forme. Il n’est pas question dans ce guide de JavaScript, qui fait l’objet avec ARIA, d’un tout autre guide.
[...]
Le guide a été pensé comme une série de fiches pratiques pour en faciliter l’utilisation. Vous pouvez les lire en fonction de vos besoins, sans avoir à suivre un ordre particulier, chaque fiche étant indépendante.

#RGAA #fiche_pratique #intégration #web_dev

Validation des formulaires de données - Guides pour développeurs Web | MDN
▻https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire

Une des fonctionnalités de HTML5 est de pouvoir valider la plupart des données des utilisateurs sans avoir recours à des scripts. On utilise pour cela des attributs de validation sur les éléments du formulaire.

et pour quelques exemples basiques : ▻http://dmouronval.developpez.com/tutoriels/html/formulaires-html5

#validation #formulaire #web_dev #html5

#macOS 10.12 Sierra #Apache Setup : Multiple #PHP Versions | Grav
▻https://getgrav.org/blog/macos-sierra-apache-multiple-php-versions

An Introduction To Dark UX Patterns - Reality is a Game
▻http://www.realityisagame.com/archives/2500/an-introduction-to-dark-ux-patterns

In short dark patterns are user interface (UI) that purposefully trick the user to do something that they didn’t want to do. This includes adding items to a user’s shopping cart without their knowledge or signing them up for mailing lists they don’t want to be on. It even includes placing ads so users accidentally click on them in your app.

Easy to join, hard to leave

#interface #dark_patterns #web_dev

PHP Becomes First Programming Language to Add Modern Cryptography Library in Its Core
▻https://www.bleepingcomputer.com/news/security/php-becomes-first-programming-language-to-add-modern-cryptography-

https://www.bleepstatic.com/content/hl-images/2016/12/30/PHP.png

The PHP team has unanimously voted to integrate the Libsodium library in the PHP core, and by doing so, becoming the first programming language to support a modern cryptography library by default.

The proposal to embed Libsodium (also known as Sodium) into the PHP standard library came from Scott Arciszewski, Chief Development Officer at Paragon Initiative Enterprises, a man that has campaigned for stronger cryptography in PHP CMSes in the past.
Libsodium integration arriving with PHP 7.2

The PHP team approved his proposal with a vote of 37 to 0 and decided that Libsodium will be added to the upcoming PHP 7.2 release that will be launched towards the end of 2017. The current PHP version is 7.1.2.

#php #web_developpement #cryptographie

Du zoning au mockup, itinéraire d’une maquette web - romy.tetue.net
►http://romy.tetue.net/zoning-mockup-maquette-web

Du zoning au mockup, itinéraire d’une maquette web en passant par le moodboard, le wireframe, les style tiles et le prototype

Il n’est pas toujours évident de s’y retrouver dans le vocabulaire, nouveau et souvent anglophone, de la conception web. Nous sommes nombreux [] à avoir déjà vécu une situation d’incompréhension à cause de ce vocabulaire. Les termes « zoning » et « mock-up », en particulier, ont des significations différentes selon les personnes [] et prêtent au quiproquo, quand ils ne sont pas carrément considérés comme synonymes de « wireframe »… Pour mieux s’y retrouver, commençons par mettre les bons mots sur les choses.

Les explications (toujours !) claires et précises de Tetue pour les différents stades d’élaboration d’une interface utilisateur, d’un site... Avec des références d’outils utilisés pour chaque phase.

Sur le même sujet mais avec des étapes et des définitions de termes légèrement différentes : ▻https://www.alsacreations.com/article/lire/1183-mockup-rough-maquette-zoning.html

#maquette #outil #prototype #web_dev #conception

la cuisine du graphiste : Besoin d’inspiration couleur ?
▻http://www.lacuisinedugraphiste.net/2016/10/besoin-dinspiration-couleur.html

https://2.bp.blogspot.com/-c0Rzd6xpecg/WA3JimP35eI/AAAAAAAAggw/M-ut-CRrG806ivqL9zsq-Zcci1AwDz11ACLcB/w1200-h630-p-nu/colordrop.jpg

Tristan White a pensé à vous en créant Colordrop, un site présentant plus de 150 #palettes de #couleurs différentes avec leurs références en RVB et #.
Vous pouvez même mettre en favoris vos gammes préférées et les télécharger :-)
On dit merci M. White (un nom comme ça pour un site comme ça, ça s’invente pas !)

Quick tour of Polymer - Polymer Project
▻https://www.polymer-project.org/1.0/docs/devguide/quick-tour

La présentation du fonctionnement de Polymer vu du côté codeur.
Polymer, framewok développé par Google, permet de découper une application web en plusieurs morceaux (composants), indépendants, qui contiennent le code HTML (structure), le style CSS et le code Javascript . Le framework fourni un ensemble de composants Polymer préexistants et donne la possibilité de créer ses propres composants.
Voir aussi : ▻https://github.com/Polymer/polymer

Pour le concept plus général de « web component », voir ▻http://jonrimmer.github.io/are-we-componentized-yet
et ▻http://webcomponents.org

Pour la version Mozilla des webcomponents (= X-tag), voir ▻http://x-tag.github.io

#polymer #google #framework #application #web_dev #composant #webcomponents

How we made the RioRun progressive web app | Info | The Guardian
▻https://www.theguardian.com/info/developer-blog/2016/aug/19/how-we-made-the-riorun-progressive-web-app

Un retour d’expérience sur la mise en place d’une « progressive web app » avec :
– les problèmes de service worker : voir ▻https://gist.github.com/Rich-Harris/fd6c3c73e6e707e312d7c5d7d0f3b2f9

document.querySelector( '.fetch-content' ).addEventListener( 'click', () => {
window.caches.open( myCache )
.then( cache => cache.addAll( content ) )
.then( () => alert( 'content is now available offline' ) )
.catch( () => alert( 'oh noes! something went wrong' ) );
});

api.gouv.fr
▻https://api.gouv.fr

Vous êtes une #administration, une collectivité, un éditeur de solutions pour les particuliers ou les entreprises et souhaitez simplifier radicalement la relation des usagers à l’administration.
Les #API présentées ici sont des interfaces web permettant la communication et l’échange de #données entre applications.
Les API proposées vous permettent de :
simplifier les démarches d’un usager
guider l’usager dans la saisie d’informations
récupérer des informations que l’administration possède déjà

Voir par ex la base d’#adresses nationales : ▻https://api.gouv.fr/api/base-adresse-nationale.html
#gouvernement #big_data #web_dev

Drowning in Tools in the Web Development Industry
▻http://www.sitepoint.com/drowning-in-tools-web-development-industry

Since late July, I’ve curated a weekly newsletter focused on tools called Web Tools Weekly. Throughout each week, when going through my feeds (yes, RSS is alive and well) and doing various forms of other research, I’m constantly bookmarking new apps, scripts, #plugins, libraries, #CSS frameworks, productivity tools, testing tools, and more.

In fact, I could probably release that newsletter daily and I’d still have enough content. As of this writing, I have a categorized list of approximately 500 different apps, resources, scripts, libraries, plugins, etc. that I haven’t yet included in any issue. And let’s not forget about the 500+ tools that have made the cut in the first 30+ issues.

#web_design #web_dev

How web browsers work - from HTML soup to what you see... A detailed step by step tour : ▻http://taligarsiel.com/Projects/howbrowserswork1.htm