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
Motion – Carbon Design System Carbon components have motion built in for microinteractions. However, the motion design of the overarching UI — that is, how the components interact with each other and enter and exit the page itself — is up to each product team to implement. Use this guidance to customize, combine, coordinate, and choreograph this aspect of motion in the UI. Carbon recognizes different types of moments in users’ experience and offers two styles of motion—productive motion, and expressive motion. The motion curves are designed to reflect the duality of man and machine. Productivity and expression are both essential to an interface. Productive motion creates a sense of efficiency and responsiveness, while remain subtle and out of the way. Expressive motion delivers enthusiastic, vibrant, and highly visible movement. Productive moments are labeled in blue, and expressive moments are labeled in magenta. Strictly linear movement appears unnatural to the human eye.
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
Maintaining Design Systems | Atomic Design by Brad Frost And they made a design system, delivered a style guide, and lived happily ever after. Right? Not quite. There’s a very real risk that a style guide will end up in the trash can right alongside all the PSDs, PDFs and those other static artifacts of the design process. Despite everyone’s best intentions, all the time and effort that went into making a thoughtful design system and style guide can go straight down the drain. How can that be? A style guide is an artifact of design process. An artifact is something you’d find on an archaeological dig or in a museum, whereas a system is a living, breathing entity. #Changing minds, once again We’ve already discussed the importance of resetting everyone’s expectations to establish a more collaborative, pattern-driven workflow. #What is it we’re making again? We think we merely design and build websites and apps. The problem with this mindset is that you can almost see that pattern library snapping off and sliding into the abyss. #Done and done Why?
asciimoo/wuzz: Interactive cli tool for HTTP inspection The Agile Human Centered Design Toolkit—a set of methods to create high value, customer-first product definition As consumerism grows and consumer technology advances in parallel, user expectations of the services in their lives continue to increase. For large institutions with significant investments in people, processes, procedures of a former era, turning the corner towards a human centered enterprise can prove challenging. From as far back as the formation of IDEO and frogdesign, design thinking has been a strategic tool to help teams better understand the nature of the problem to be solved and the value a solution could bring. As a business change agent, Human Centered Design has become so important most of the multi-national consulting firms from McKinnsey to Deloitte, have created or acquired offerings to guide companies through the transformation. But even with all that, figuring out where to start can be a challenge for the individual team within an enterprise. That’s where this article comes in. These define the baseline goals for the project to maintain alignment throughout the project.
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
Space in Design Systems. From Basics to Expanded Concepts to… | by Nathan Curtis | EightShapes | Medium From Basics to Expanded Concepts to Apply Space with Intent I’ve long referred to Color, Type and Icons as the “Big 3” of a system’s visual language. All UI components — from Buttons on up — are built with them. But I left something out. Space, our final frontier. Space Rivals Color Space is everywhere. After removing effects (“zeroed” values like :0; and reserved terms like transparent or auto) where CSS already offers us a system for decisions, space rules appeared more than anything except color. Space Divides Us Space epitomizes the “I design this way, you build that way” gap between design and dev. Costs are huge: annotating, translating, discussing, visually scrubbing during QA. Space Concepts Are Primitive We could weave more intentional spatial concepts through design, code, and conversation. With that in mind, here’s fundamentals, an expanded vocabulary, and further experiences I’ve had when applying space to systems work. Grid ≠ Space. A grid isn’t a complete spatial system.
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.