Développeur Web mais surtout Intégrateur Web.
Je partage ce que j'apprends et j'aide les développeurs à devenir meilleur en HTML & CSS.

Convert curl commands to Python, JavaScript, PHP, R, Go, C#, Ruby, Rust, Elixir, Java, MATLAB, Dart, CFML, Ansible URI or JSON

Github

So you've got your nice page and you're adding your background image and…

.hero {
  /* 🚩 */
  background-image: url('/image.png');
}

WAIT!

Did you know that this is going to be very unoptimized for performance? In more ways than one.

The rel attribute defines a relationship between the linked resources (one being the document it appears on). And it provides that relationship with meaning, creating a semantic network where the different pieces have a role and a purpose. This detail may go unnoticed by most browser users, but not for the browser itself, assistive technologies, and web crawlers, which can take advantage of this attribute to provide a better experience. Also, savvy web developers can use it to make friendlier sites–we’ll see some examples in the following sections.

You probably use prefers-color-scheme a lot within your CSS media queries, to make a dark or light theme for your sites and apps based on user preference. Maybe you also add a toggle so people can choose their color scheme, irrespective of their OS settings. Beautiful. But now there's more to play with!

Adding an image with HTML is pretty easy, it’s just a simple tag, after all, right?

<img src="path/to/image.jpg" />

But when you start taking into consideration topics such as performance, screen sizes, accessibility, pixel density, or user preferences, you might ask yourself at some point if plain HTML is enough for the task… And the answer is yes! HTML has many options and is powerful enough to handle this task. This article will cover what you should consider at the moment of adding an image to a site with HTML.

240 règles pour améliorer vos sites et mieux prendre en compte vos utilisateurs
#qualitéweb #accessibilité #sécurité #performance #privacy #écoconception

A polyglot web converter.

Convert code to another language.
#Shaarli💫 #dev #javascript #online #opensource #svg #tool #web #dev #tool

🚀 A self-hostable personal dashboard built for you. Includes status-checking, widgets, themes, icon packs, a UI editor and tons more!

GitHub | dashydocs at master · Lissy93dashy

Iconify makes it easy to avoid vendor lock-in. You can use many open source icon sets with a large choice of open source icon components. Thousands of high quality icons from 100+ icon sets, all validated, cleaned up, optimised and always up to date.

Material Design, Phosphor, Remix, Carbon, Bootstrap, Tabler, Feather, Fluent, IconPark, Octicons and many other icon sets. Twitter Emoji, Fluent Emoji, EmojiOne, Noto Emoji are also available as icon sets.
#Shaarli💫 #css #dev #icon #javascript #opensource #tool #web

SRI is a new W3C specification that allows web developers to ensure that resources hosted on third-party servers have not been tampered with. Use of SRI is recommended as a best-practice, whenever libraries are loaded from a third-party source.

Learn more about how to use subresource integrity on MDN.

Every element I use for the basic structure of a HTML document, with explanations why.

Usually when I start a new project, I either copy the HTML structure of the last site I built or I head over to HTML5 Boilerplate and copy their boilerplate. Recently I didn’t start a new project, but I had to document the structure we use at work for the sites we build. So, simply copying and pasting wasn’t an option, I had to understand the choices that have been made.

A small collection of useful CSS techniques and a quick reminder that print style sheets are still a thing.

A star rating widget can be created using only HTML and CSS — JavaScript isn’t needed. Accessibility software will see the widget as a group of radio buttons, and the standard keyboard interaction is supported automatically.

Detecting the state of the caps lock key can improve the usability of web applications.

A tree view (collapsible list) can be created using only HTML and CSS, without the need for JavaScript.
Accessibility software will see the tree view as lists nested inside disclosure widgets, and the standard keyboard interaction is supported automatically.

I'll introduce you to the top 100+ repositories on github on most important topics on programming ranging from Frontend to Backend, DSA, to Design Patterns and System Design. These repositories are beneficial for any level from beginner to expert level programmers. I recommend to bookmark it for future as they'll be quite useful in years to come in your career.

Modules and Module Bundlers are essential components of modern web development. But understanding how they work can quickly become overwhelming.

This article will show you all you need to know about ES Modules and Module Bundlers in plain English.

100 Modern CSS Buttons. Every style that you can imagine.

Github repo.

In this video I will show you how to animate a Handwriting Effect for your website using just CSS (for the web styling) and Inkscape (for the writing path). You can also use Adobe Illustrator or similar.