Votre site doit-il supporter les anciens navigateurs web ? - Blog Tech Novaway Il y a quelques années, il était d'usage de télécharger manuellement la nouvelle version de votre navigateur de prédilection. Aujourd'hui, la plupart des navigateurs proposent une mise à jour automatique. Celle-ci permet de disposer des dernières avancées en termes de développement web. Cependant, il est important de garder à l’esprit que de nombreux utilisateurs disposent encore les anciennes versions de navigateurs. “En novembre 2018, l'usage d'Internet Explorer & Edge s'élevait à 7.3% du total des parts de marché des navigateurs web mondial" _W3C Global Web Stats Qu’est-ce que le support des navigateurs web ? Par "support du navigateur", on entend généralement qu’un site ou une web-app doivent pouvoir s'afficher et se comporter de façon identique peu importe le navigateur. Toutefois, il est n’est pas toujours possible d’avoir le même rendu sur les anciens navigateurs que sur les plus récents. Quels navigateurs mon site doit-il supporter ? Le support en Javascript Utilisation de Polyfill
Learn Kubernetes in Under 3 Hours: A Detailed Guide to Orchestrating Containers Introduction to Kubernetes I promise and I am not exaggerating that by the end of the article you will ask yourself “Why don’t we call it Supernetes?”. If you followed this article from the beginning we covered so much ground and so much knowledge. You might worry that this will be the hardest part, but, it is the simplest. The only reason why learning Kubernetes is daunting is because of the “everything else” and we covered that one so well. What is Kubernetes After we started our Microservices from containers we had one question, let’s elaborate it further in a Q&A format:Q: How do we scale containers? Kubernetes solves all these questions (and more!). We have a faint idea about Container Orchestration. Abstracting the underlying infrastructure Kubernetes abstracts the underlying infrastructure by providing us with a simple API to which we can send requests. What does this mean for the developer? In figure 12 we can see a couple of new things: Standardizing the Cloud Service Providers Pods
asciimoo/wuzz: Interactive cli tool for HTTP inspection Comprendre le CSS in JS par l'exemple Il se peut que vous entendiez beaucoup parler de CSS-in-JS dernièrement. C'est un sujet de polémique bien connu dans le milieu du front-end actuel : les argumentaires tournent en boucle, souvent biaisés par les habitudes et / ou les conditions de travail de chaque partie. Afin de mieux comprendre ce qu'est le CSS-in-JS, nous allons créer une librairie similaire à Emotion ou Glamor. Au fur et à mesure de la réalisation, nous pourrons nous apercevoir qu'il est parfois possible d'améliorer l'expérience de développement en prévenant certaines erreurs humaines et en automatisant certaines choses. Notre librairie nous permettra d'insérer des styles de façon sûre, de gérer les pseudo-classes et les pseudo-éléments et de fournir un moyen de gérer le responsive. #Initialisation du projet Pour plus de sécurité et de confort, nous allons utiliser TypeScript. Ouvrez votre éditeur de code préféré, on attaque directement en créant un nouveau fichier src/css.ts. #Insertion de style sous la forme de string
Inside look at modern web browser (part 1) | Web | Google Developers CPU, GPU, Memory, and multi-process architecture In this 4-part blog series, we’ll look inside the Chrome browser from high-level architecture to the specifics of the rendering pipeline. If you ever wondered how the browser turns your code into a functional website, or you are unsure why a specific technique is suggested for performance improvements, this series is for you. As part 1 of this series, we’ll take a look at core computing terminology and Chrome’s multi-process architecture. At the core of the computer are the CPU and GPU In order to understand the environment that the browser is running, we need to understand a few computer parts and what they do. First is the Central Processing Unit - or CPU. Graphics Processing Unit - or GPU is another part of the computer. When you start an application on your computer or phone, the CPU and GPU are the ones powering the application. Executing program on Process and Thread When you start an application, a process is created. Wrap-up Feedback Yes
Qu’est-ce qu’un architecte logiciel ? Voilà une question qui m’a souvent été posée par mon entourage professionnel, mais aussi par ma mamie du cantal, pour qui l’IT se limite à son Windows XP et sa messagerie Orange. Alors comment expliquer ce que je fais, sans entrer dans des détails trop techniques qui pourraient perdre mon interlocuteur ? C’est d’autant plus intéressant que c’est le rôle quotidien de “l’archi” de vulgariser l’explication de ses choix, notamment pour les présenter aux responsables “fonctionnels”. L’objectif de cette démarche de vulgarisation est de se faire comprendre, de faire comprendre les enjeux, le pourquoi et le comment. J’étais tombé sur cet article il y a quelques temps, et je pense qu’il présente très bien la manière dont on doit présenter aux néophytes notre métier. Cette introduction mise à part, je vais à présent vous présenter le métier d’architecte logiciel, mais sans parler à un seul moment de technologies. Le besoin En général, comme tout bon projet, cela commence chez le Promoteur. Les murs
Comment mettre en place du lazy loading - Zen Devs Les images sont essentielles pour chaque site Web et chaque application aujourd’hui. Qu’il s’agisse de bannières publicitaires, d’images de produits ou de logos, il est impossible d’imaginer un site Web sans images. Malheureusement, les images sont de grande taille, ce qui en fait le principal contributeur à la taille de la page. Selon les dernières données d’archive HTTP , la taille de page médiane sur les ordinateurs de bureau est de 1511 Ko. Les images représentent près de 650 Ko de cette taille, soit environ 45% de la taille totale de la page. Qu’est-ce que le lazy loading (ou chargement paresseux) ? Le mot «lazy» en anglais est souvent attribué au fait d’éviter le travail le plus longtemps possible. De même, le lazy loading diffère le chargement des ressources sur la page tant qu’elles ne sont pas nécessaires. La technique du chargement différé peut être appliquée à presque toutes les ressources d’une page. Pourquoi opter pour le chargement différé des images en lazy loading ? 1. 1.
Plates - Native PHP Templates Retour d’expérience sur la mise en place d’un Design System chez Adeo Depuis septembre 2018, le groupe Adeo travaille à la mise en place d’un design system complet, permettant à l’ensemble des sites E-commerce de Leroy Merlin du monde entier d’utiliser une identité visuelle commune. Tiago, UX depuis presque 10 ans, est l’initiateur du projet. Il travaille depuis 2013 chez Leroy Merlin et a supervisé l’ensemble de la refonte utilisateur du site E-commerce Leroy Merlin Brésil. Gael, est un designer devenu intégrateur qui a mis en place notamment le design system pour Lemonde.fr. Il est en charge de l’implémentation technique du projet. Quant à moi, je travaille depuis maintenant trois mois pour mettre en place sur ce projet la CI/CD. Brief Le projet a commencé au mois de septembre 2018. Mais pourquoi mettre en place un tel projet ? L’inner source est devenu aujourd’hui un élément essentiel de toutes nos plateformes web. Réflexion Avant de nous lancer dans un tel projet il y a eu beaucoup de réflexion. Mise en place Gatsby Étape 1 Étape 2 Étape 3 Étape 4 La suite
La juste dose de commentaires ? Comme sur quasiment toutes les bonnes pratiques liées au code, sur la question des commentaires, on navigue joyeusement d'un extrême à l'autre entre ne pas en écrire du tout (#NoComment) et en écrire beaucoup et comme souvent, la vérité est ailleurs le bon dosage sans doute quelque part entre les deux. Les commentaires font partie du code et donc comme n'importe quel code, il faudra faire l'effort de les maintenir ce qui s'avère en réalité bien plus compliqué qu'on pourrait le croire. En effet, comme les commentaires sont généralement inertes, ils ont une fâcheuse tendance à devenir obsolètes sans que personne ne s'en rende compte jusqu'au jour où un·e développeur·se soit induit·e en erreur… Code never lies, comments sometimes do.— Ron Jeffries C'est pourquoi tout l'enjeu est finalement d'écrire suffisamment de commentaires pour enrichir le code mais pas trop non plus pour s'éviter de la maintenance et surtout être capable de garder un contenu à jour et pertinent.
Trucs et astuces pour la gestion des dates js avec moment.js - Zen Devs La gestion des dates lors du traitement des fuseaux horaires est une tâche difficile.Heureusement pour nous, il existe de nombreuses bibliothèques comme moment.js qui nous aident à gérer des problèmes courants comme les fuseaux horaires, l’heure d’été, la manipulation et le formatage de la date. J’ai récemment rencontré plusieurs problèmes dans l’affichage des dates dans le bon format et le fuseau horaire tout en travaillant sur un projet d’application mobile. Nous avons un serveur externe qui nous envoie l’heure locale sous forme de chaîne et de fuseau horaire comme ceci: Je devais afficher et manipuler ces dates. Mais avant cela, j’avais besoin de les analyser et de les stocker. Dans cet article, je vais vous montrer comment gérer les difficultés courantes dans la gestion des dates avec l’une des bibliothèques les plus courantes: moment.js. ( alternative au fameux date js) Qu’est ce que “Moment Js” Moment est une bibliothèque très complète et populaire pour gérer les dates. Selon le format
It’s 2019 and I Still Make Websites with my Bare Hands It literally says Hello world but I’m told it has the potential to do so much more! I think they said it could even make me toast… toasts. The only things most web devs— even the not-computer-science ones — can talk about when it comes to their own websites are things that I imagine must be frameworks or hosted services (because I don’t know what the words are but they weren’t in my CS classes) and frankly, they sound amazing. I compare what they’re describing to what I’m doing and I feel really, really, inadequate. They’re learning the hottest stuff at coding schools like DevMountain or the latest online courses. Anyway, I would just say I’m “old school” but I’ve only been doing web development for like 10 years. *counts on fingers* …Okay, 19 years. So then, get this: some of these same people ask me for help, because they found out I’ve been doing webdev for years. “But how does this part work? I usually get blank stares. Why do so many sites break my back button or my scrolling? <!
Becoming a dramatically better programmer - Henry @ RC S1 In our first week, we were told that the RC faculty wanted to do one thing above else – to remove any obstacles in the way of us becoming dramatically better programmers. But what does that mean? What does getting dramatically better actually look like? I’ve outlined a few broad areas that programmers striving to get better might focus on. I’ve also suggested some ways to tackle these areas – but this is by no means complete, or correct! Email me with your suggestions; I’ll add them and credit you below. Learning skills directly On the face of it, object-level skills seem to be relatively narrow in their application – why learn Haskell or Go unless I’m going to use it in my job? But knowledge in programming undergoes compounding. 💡 Picking skills Pick nodes on the knowledge graph which are highly-connected to things you do routinely. Known unknowns 💡 Identifying known unknowns There are also meta-skills you can learn: skills which themselves enable skill acquisition. Deep work
Quand de mauvaises pratiques causent un bug On parle souvent de bonnes ou mauvaises pratiques dans l'écriture du code mais plus rarement de leurs conséquences concrètes. Pourtant, pour le dire très clairement, certaines mauvaises pratiques sont une cause profonde de bugs ou à l'inverse, certaines bonnes pratiques rendent ces problèmes impossibles. Ici, il s'agit de l'utilisation de null pour représenter une donnée métier et de l'absence de constructeur qui rend le code et les contraintes plus difficiles à comprendre. Le bug Pour illustrer mon propos, je vais prendre l'exemple d'un dysfonctionnement que mon équipe devait corriger dernièrement. Argument 1 passed to Namespace\\ACLService::buildACLValue() must be of the type string, null given, called in /path/to/file on line 63 Comme le message l'indique, une méthode n'acceptant que des chaînes de caractères en paramètre recevait null. Sous le capot Par soucis de brièveté, elle est peu simplifiée mais je n'ai rien omis d'essentiel. Corrections Définir explicitement l'absence de rôle