It’s so bad that visiting a website in 2023 is like falling into a blackhole and being hit by a bunch of random junk on your way to being crushed into an infinite nothing in the center. No, I don’t want to give you permission about cookies, no I don’t want to sign up to your newsletter, no I don’t want to talk with some half-baked chatbot.
A few days ago I blogged about managing state in Vue apps with Vuex modules. I’m currently grappling with some fairly complex state management in a Vue app, and I wanted to share a bit about my process and how I’ve made it more manageable.
With only a single div and browser-supported CSS properties, it may seem like the tools are too limited. I found it’s not always what you have to work with, but how you look at them.
For me, 2022 is the best year ever for CSS. We got a lot of new stuff supported in stable browsers and it’s just like living a dream. From CSS subgrid, :has selector, container queries, and the new viewport units. So many things to grasp, I understand - but I’m sure we agree that this is exciting, isn’t it?
Recently, the Chrome team released experimental support for a new proposed CSS spec, style queries. In short, they let us query the style of a container, rather than the size only. This can be helpful in cases where querying the container size isn’t enough.
…so many other industries. Yet, I find that working in front-end development still places a heavy emphasis on one person — or very few people — doing the job.
I can’t contain my excitement while writing the first few words for this article. Ladies and gentlemen, CSS container queries are finally here! Yes, you read that right. They’re currently supported in Google Chrome (105) and soon in Safari 16. This is a huge milestone for web development. For me, I see it just like when we started building responsive websites via media queries, which is a game changer. Container queries are equally important (from my point of view, at least).
L’ajout de logs dans une application est essentiel. Ceux-ci permettent entre autres d’identifier les erreurs survenues dans celle-ci, de créer des pistes d’audit, de fournir des informations sur l’application ou encore sur le comportement des utilisateurs, bref la liste peut être encore longue. Et vous savez quoi ? Ben, aujourd’hui on ne va pas du tout parler de la bonne utilisation des logs, mais plutôt partir à la découverte d’une librairie qui va nous faciliter la création de ceux-ci 😜.
In general, I treat useState as the default tool for the state management job. In many situations, I have a single state to manage and writing a few declarative state updaters for that state does the trick. That said, there are certain conditions that make useReducer a better choice.
Complètement inexistante il y a à peine soixante ans, l’industrie informatique est aujourd’hui devenue la plus importante du monde. Le monde est contrôlé par l’informatique. Comprendre l’informatique est devenu l’une des seules manières de préserver notre individualité et de lutter contre les intérêts d’une minorité.
Developers often reach for UI frameworks like Bootstrap or Material UI, hoping that they’ll save a bunch of time and quickly build a professional-looking app. Unfortunately, things rarely work out this way. Let’s talk about it.
Last month I wrote about some of the exciting new CSS features you can expect to see coming to a browser near you in 2022 for Smashing Magazine.
You may not think about images as part of your web dev work, but they can affect your web app's performance more than any other part of your code.
2022 is shaping up to be a pretty great year for CSS, with a plethora of new features on the horizon. Some are already starting to land in browsers, others are likely to gain widespread browser support in 2022, while for one or two the process may be a little longer. In this article we’ll take a look at a few of them.
Most uses of React hooks should be encapsulated in a custom hook, and I'm going to try and convince you of that on this post.
I want to introduce you to a new, experimental form control called <selectmenu>. We’ll get deep into it, including how much easier it is to style than a traditional <select> element. But first, let’s fill in some context about why something like <selectmenu> is needed in the first place, as it’s still evolving and in development.
Au Sénat, la proposition de loi « pour la mise en place d’une certification de cybersécurité des plateformes numériques destinée au grand public » a été adoptée sans modification en commission. Elle sera examinée en seconde lecture lors de la séance du 24 février.
Tremblement de terre dans l'univers de la mesure d'audience. Pour la CNIL, les transferts vers les États-Unis des données collectées par Google Analytics sont illégaux. L’autorité, qui suit ses homologues autrichiens et néerlandais, met en demeure un site. Il dispose d'un mois pour se conformer au RGPD et au besoin d’abandonner la solution Google.
With a bit of creativity using native web functionality and modern CSS, like CSS scroll snap, we’ll be building a no-JavaScript slide deck that allows live editing of CSS demos. The final deck will be responsive and shareable, thanks to living inside of a CodePen.
Desktop environment in the browser made by Dustin Brett.
You know how you can get cardboard boxes that come totally flat? You fold ‘em up and tape ‘em to make them into a useful box. Then when it’s time to recycle them, you cut them back apart to flatten them. Recently, someone reached out to me about essentially this concept as a 3D animation and I thought it would make an interesting tutorial to do it entirely in CSS, so here we are!
Your mission — should you decide to accept it — is to build a Button component in four frameworks, but, only use one button.css file!
We cannot talk about web development without talking about Responsive Design. It’s just a given these days and has been for many years. Media queries are a part of Responsive Design and they aren’t going anywhere. Since the introduction of media queries (literally decades ago), CSS has evolved to the points that there are a lot of tricks that can help us drastically reduce the usage of media queries we use.
Translating web applications into multiple languages is a common requirement. In the past, creating multilingual applications was not an easy task, but recently (thanks to the people behind the Next.js framework and Lingui.js library) this task has gotten a lot easier.
One of the first things that drew my attention was the large image of Kody (🐨) on the landing page. He’s surrounded by objects and that, to me, screamed, “Make me move!”
As web and mobile applications become more mature and complex, software engineers invent clever new ways of improving the interaction between client and server within an application. One of the biggest paradigm shifts over the last few years in this regard has been GraphQL, an open-source query language and runtime for manipulating APIs.
We have many well-known chart types: bar, donut, line, pie, you name it. All popular chart libraries support these. Then there are the chart types that do not even have a name. Check out this dreamt-up chart with stacked (nested) squares that can help visualize relative sizes, or how different values compare to one another
On a vu dans un précédent article, comment écrire ses messages de commits clairs et concis, mais cela ne suffit pas. Beaucoup de personnes, par simplicité, créées des commits contenant l’ensemble de leurs modifications. Pourtant procéder ainsi peut poser de nombreux soucis. C’est pourquoi il est souvent recommandé d’écrire des commits atomiques.
The new CSS accent-color property makes it quick and easy to roll out our brand colors to certain form inputs by leveraging user agent styles. In this article we’ll take a look at what it does and how to use it alongside color-scheme for simple, accessible checkboxes and radio buttons — and imagine how we might use it in the future.
If you’ve dabbled in functional programming or a state management tool like Redux, you’ve probably encountered the concept of the reducer function. In fact, if you’re like me, you were clobbered by references to reducers to the point that the word began to lose all meaning.
CSS is on a tear lately. Again, I’ve heard of a brand new thing I’ve never seen before, and again it’s via Miriam: CSS Conditionals.
There is a new thing coming in CSS: @layer. As with all new things, it takes time to really wrap your head around it. And despite me tapping at my keyboard about it, full disclosure, I’m not sure my mind is fully there yet. Fortunately, smart people are on the case!
PHP 5 added the DOM module to it’s roster of Not So Strictly Typed™ types. Its main entry point is the DOMDocument class, which is intentionally similar to the Web API’s JavaScript DOM. If you’ve ever used document.createElement, this will probably feel quite familiar.
Complexity, frustration, bloated. Those are the first words that come to my mind whenever I see Webpack. For the past couple of years in particular however, I’ve stopped using Webpack to develop them, opting instead to use Rollup as my primary bundler for apps.
Depuis 15 ans, les nouveaux services décentralisés se multiplient, facilitant le travail en équipe et le partage de fichiers, permettant de se passer d'une « autorité centrale ». Comme souvent dans l'informatique moderne, cela doit beaucoup à des travaux menés à la fin des années 70, dont les arbres de Merkle.
For websites and platforms that provide users with content or reviews, it’s important to include a star rating. Recently, I needed to implement a star rating component for a project and the requirements needed were: performant (doesn’t include images), resizable, accessible, partial star (e.g: 3.5 or 3.2) dynamically, easy to maintain with CSS.
There are currently four well-supported math functions in CSS. I've found each of them to be extremely useful in my daily work. These CSS functions can be used in perhaps unexpected ways, such as within gradients and color functions and in combination with CSS custom properties. We'll learn the syntax for each, view basic demos of their functionality, and explore practical use cases.
Native CSS nesting is coming to browsers soon. With nesting, that you might be familiar with from Sass or Less, you can greatly cut down on writing repetitive selectors. But you can also really work yourself into a corner if you’re not careful. This is an overview of how you can already use it today, the pitfalls and how to avoid them.
Last week, I learned that the Google Chrome team is planning to deprecate alert(), prompt(), and confirm(), the three browser-native ways to surface a modal window to users.
I had a very short project (a dozen commits) which I wanted to convert to use conventional commits. Let me describe this non-conventional procedure I had to follow.
I use Git a lot, in my daily job as well as for this blog. When using it, I often rebase locally before pushing, to have a clean and readable history.
An opinionated guide to setting up the architecture for a new React application.
In part three of our series we’ll look at how to create more interesting shapes with trigonometry, and how to draw them with the Canvas API.
J’ai débuté le développement de flusio il y a un an. Son objectif est d’offrir un espace en ligne permettant à la fois de faire sa veille de manière efficace, mais également de la repartager sur la plateforme ou à l’extérieur. Je suis parti du constat de plusieurs problèmes au sein des médias sociaux et des agrégateurs de flux RSS pour concevoir un outil qui tente de tirer le meilleur des deux.
Et voilà un nouveau venu dans ma collection de claviers ! Un fameux Ergodox avec son design avec les mains séparées, ses touches presque ortholinéaires (on est proche de la patte d'ours) et son firmware facilement reprogrammable.
Testing is one of those things that you either get super excited about or kinda close your eyes and walk away. Whichever camp you fall into, I’m here to tell you that front-end testing is for everyone. In fact, there are many types of tests and perhaps that is where some of the initial fear or confusion comes from.
Working on a web design involves handling the design for different screen sizes. Based on those designs, the developer will use CSS media queries to detect the viewport width or height, and then alter the design based on that. This is how we used to design web layouts for the past 10 years, and it’s about to get even better. I have some good news for you.
Ce jeudi, France 2 diffusera un nouvel épisode de Cash Investigation consacré à la manière dont sont traitées et partagées nos données personnelles, notamment en matière de santé, près de cinq ans après l'entrée en vigueur du RGPD. Comme on pouvait s'y attendre, le constat est loin d'être idyllique.
Images have also been a key part of the web. They communicate ideas instantly, but they are also a lot heavier than text to load. This means that it’s essential to get loading and displaying them right, if you want to give your users a fantastic first impression. An excerpt from Addy’s new book.
An extensive guide on how to style for RTL in CSS
Je réalise régulièrement des audits de code source visant à vérifier l’absence de « mine juridique » dans une application. Cela m’a amené à me pencher avec attention sur la licence des projets libres et à constater que la licence annoncée par ces projets était en général trop monolithique.
Everything important and useful to know about CSS Custom Properties. Like that they are often referred to as “CSS Variables” but that’s not their real name.
I love to make CSS do stuff it shouldn’t. It’s the type of problem-solving brain training you’d get building a calculator in Minecraft, except you probably won’t get a job working with Minecraft Redstone no matter how good you get at that, whereas CSS skills are worth actual money, and many generalist programmers are scared of CSS, so studying it can be a way to stand out from the pack. Also, when you’ve done the impossible with CSS, all normal CSS tasks seem easy.
I saw in the release notes for Safari Technical Preview 122 that it has support for a color-contrast() function in CSS. Safari is first out of the gate here.
Hier, j’ai enfin supprimé mon compte Linkedin. Ce compte me narguait depuis 2006 par son inutilité et son impact sur ma boîte mail. Ce compte que je voulais supprimer depuis des années, mais que je gardais, acceptant son coût de maintenance, dans la crainte qu’il me soit un jour utile.
Google is starting to track your site visitors for advertising purposes even when you’re not using Google Analytics or having any relationship with Google.
Here’s a closer look at Google’s Federated Learning of Cohorts (FLoC) initiative and how you can fight back and opt-out as a web user and a web developer.
Beaucoup de développeurs ne prennent pas le temps d’aller lire le code source des librairies ou frameworks qu’ils utilisent, pensant souvent à tort que cela est une perte de temps. Pourtant apprendre à lire du code que l’on n’a pas écrit fait partie intégrante de notre métier et prendre cette habitude peut faire de vous un meilleur développeur.
I haven’t been more excited for a CSS feature like I’m now in the past six years I spent as a front-end developer. The prototype of container queries is now available behind a flag in Chrome Canary. Thanks to efforts from smart people like Miriam Suzanne and other folks.
When someone says 'SVG animation', what do you picture?
From conversations at my workshops I've noticed that most people think of illustrative animation. But SVG can come in handy for so much more than jazzy graphics.
Vous aussi, ça vous fascine, la fierté avec laquelle certaines personnes vous annoncent qu’elles se tuent à la tâche ? Alors cette BD est pour vous.
The other day, Florens Verschelde asked about defining dark mode styles for both a class and a media query, without repeat CSS custom properties declarations. I had run into this issue in the past but hadn’t come up with a proper solution.
A CSS lock is a Responsive Web Design technique that lets you transition smoothly between two values, depending on the current viewport size, rather than jump straight from one value to the other.
On parle beaucoup du web qui devient de plus en plus pourri. Que ce soit à cause de ses technos de plus en plus folles, changeant constamment et complexifiant de plus en plus la création de page web. Et ça c'est sans parler du fait que ce soit de plus en plus hostile pour l'utilisateur.
Énormément de personnes semblent vouloir jouer avec les couleurs de l’année de la marque Pantone. Peut-être que ces couleurs inspirent d’avantage les créatifs. Notez cependant que leur utilisation dans le web, ou le numérique, peut avoir des impacts sur l’accessibilité de vos créations. Petite note sur le sujet.
Le langage Rust est de plus en plus populaire. Celui-ci, a été élu pour la cinquième année consécutive, le langage de programmation le plus apprécié par les développeurs selon le sondage annuel de Stack Overflow. De nombreuses sociétés telles que Microsoft ou Amazon s’y intéressent également pour le développement de leurs solutions. Qu’est-ce qui rend Rust si populaire ? Pourquoi s’y intéresser ? C’est ce que nous allons découvrir dans cet article.
Bien plus qu’un simple amortisseur du choc des crises, le revenu de base se concrétise dans différents pays : nouveau pilier de la protection sociale, il induit un changement en profondeur du système socio-économique.
Le Web, tout le monde s’en sert et beaucoup en sont très contents. Mais, même parmi ceux et celles qui sont ravi·es de l’utiliser, il y a souvent des critiques. Elles portent sur de nombreux aspects et je ne vais pas essayer de lister ici toutes ces critiques. Je vais parler d’un problème souvent ressenti : le Web n’est-il pas devenu trop compliqué ?
Xfce 4.16 est désormais disponible. Nous vous proposons une traduction de l’annonce et de la visite guidée, disponibles sur le site officiel.
Ça sert à quoi, Flus ? Il y a déjà des agrégateurs de flux, j’en ai un, avec plein de trucs dedans d’ailleurs.
Pourquoi passer à Flus ?
Looks like all the content of MDN is on GitHub now. That’s pretty rad. That’s been the public plan for a while.
« Le monde d’après ». S’il est des expressions qui apparaissent avec autant de fulgurance qu’elles sont peu de temps après ringardisées, « le monde d’après » en est assurément une.
In this article, I will show you my approach to think about a new layout, and how you can apply these steps to your work. Are you ready? Let’s dive in.
La mise en place des hooks de git et le partage de ceux-ci avec l’ensemble de l’équipe d’un projet peut parfois s’avérer compliqué. Nous avons vu brièvement dans un précédent article que l’utilisation de librairie husky pouvait grandement nous faciliter cette mise en place. C’est ce que nous allons voir aujourd’hui.
Les navigateurs web étaient faits pour… naviguer. Aujourd’hui on ne navigue plus sur internet, il n’y a plus d’exploration. On reste entre des murailles bien définis. Celles de quelques gros écosystèmes, Facebook, Google…
Vive les enceintes connectées...
Ce 1er octobre, la CNIL publie ses lignes directives modifiées et sa recommandation sur la question sensible du pistage en ligne, fruit d'une consultation publique. Explications détaillées.
Let’s say there is a divide happening in front-end development. I feel it, but it’s not just in my bones.
Régulièrement il nous arrive d’avoir à re-configurer une nouvelle machine, avec notamment la re-configuration des fichiers du $HOME. Il y a plusieurs approches et outils, faire une simple archive, utiliser git pour le répertoire $HOME, utiliser des outils comme GNU stow, etc.
Ces approches ont des avantages et des inconvénients, mais je souhaitais une fonctionnalité en particulier que chezmoi vantait : l’intégration avec un gestionnaire de mot de passe.
J'utilise git au quotidien depuis plus de 10 ans maintenent et git-rebase est tout simplement l'une de mes fonctionnalités préférée. Pourtant, lorsque je donne des formations sur Git, je m'aperçois que cette commande est souvent mal comprise et mal utilisée. Nous allons donc étudier en détail la commande git-rebase.
Here’s how you can configure PHP CodeSniffer on a per project basis using Visual Studio Code.
If you have a form that gets submitted using a JavaScript Ajax call (via an API or something) instead of a page reload, you might want to disable the submit button so that the user doesn’t try to resubmit the form while you’re waiting for the API to return a response.
A lot of people have asked me how to use private git submodules, so I'll go over it here. Note that this is not a deep-dive into submodules, but just the basics of adding, updating, and cloning a repo with submodules.
Recently, CSS has added a lot of new cool features such as custom properties and new functions. While these things can make our lives a lot easier, they can also end up interacting with preprocessors, like Sass, in funny ways.
I researched about a resource to learn the differences between grid and flexbox, with examples on both, but I couldn’t find any. I decided to write an in-depth article that covers everything about that topic. I hope you found it clear!
Les expériences les plus douloureuses sur le mobile sont très certainement celles sur les formulaires en ligne qu’il faut remplir ici et là. Et si vous optimisiez ces expériences étape par étape ?
Everyone has special and perhaps, particular, tastes when it comes to their code editor. There are literally thousands of themes out there, and for good reason: a thing of beauty and enhancement to productivity for one can be a hindrance to another.
Vous avez quelques minutes devant vous ? Vous en avez marre d'avoir une adresse email qui dépend d'une plateforme ou de votre FAI, parfois avec du pistage publicitaire ? Et si vous en profitiez pour acheter un nom de domaine personnalisé et créer vos propres adresses. Il vous en coûtera quelques euros à l’année.
Customizing your terminal is a fun way to streamline and personalize your digital workspace. People are more productive when using tools they enjoy and tend to value things they made themselves at a premium, but, as with all technical adventures, it can also be a little tedious to track down all the relevant documentation.
In order to assist web and application developers in making their work GDPR-compliant, the CNIL has drawn up a new guide to best practices under an open source license, which is intended to be enriched by professionals.
Ces dernières années, les paquets multi-distributions ont gagné en attractivité sous Linux. Des solutions intéressantes à première vue, mais pas sans contraintes. Nous faisons le point sur les trois principales, de leur concept central à leurs avantages et inconvénients, en passant par leurs différences.
Dans un monde utopique, imagine :
Chacun peut télécharger Facebook et l’installer sur son serveur. On appelle ça une instance. Chaque propriétaire d’instance peut fixer les règles de conduite qu’il souhaite à son instance Facebook. Et les différentes instances Facebook peuvent communiquer entrent-elles.
Last week, I wrote an article about Black Lives Matter. While most of the feedback was positive, I did predictably receive some negative responses, too.
Lorsque vous devez travailler sur des interfaces, le contraste des couleurs est une réalité dont vous devez tenir compte pour la rendre accessible.
Ajouter quelques louanges dans un paragraphe, en enlever d'autres plus gênants, c'est possible : certaines agences spécialisées dans la réputation des entreprises sur Internet proposent de modifier des pages Wikipédia au bénéfice de leur client. Les administrateurs français ont publié une liste épinglant leurs pratiques.
Aujourd’hui, si vous détectez un problème de sécurité sur un site web ou un serveur que vous visitez, plusieurs freins peuvent vous empêcher de remonter convenablement la vulnérabilité.
Vous souhaitez vérifier la sécurité de votre site mais vous ne savez pas par où commencer ? Nous allons voir ensemble quelques outils pour débuter !
Pour préserver des données sur le long terme, il faut respecter certaines règles de base. Il y a un précepte simple à retenir : le 3-2-1. On vous explique en quoi ça consiste.
Une décision du Conseil constitutionnel qui ne change rien. Voilà en substance la réaction de la Hadopi dans les colonnes d’Édition Multimédi@, à paraitre lundi. Explications.
Let’s explore how to make arrow functions concise and straightforward to read. Plus you’ll find some tricky shortening cases to be aware of.
jQuery and its cousins are great, and by all means use them if it makes it easier to develop your application.
If you're developing a library on the other hand, please take a moment to consider if you actually need jQuery as a dependency.
Emmanuel Macron et la Caisse des dépôts continuent de soutenir le moteur de recherche prétendument français, censé concurrencer Google, alors qu’il fonctionne grâce à l’américain Microsoft et qu’il est mis en cause dans un rapport de la direction interministérielle du numérique. Subvention de plus de 20 millions d’euros, obligation de l’installer dans chaque administration, actionnaires sulfureux et ramifications troubles… Enquête au cœur de la start-up nation.