This wonderful website, made with ❤ by Corentin Thomasset , aggregates useful tools for developer and people working in IT. If you find it useful, please feel free to share it to people you think may find it useful too and don't forget to bookmark it in your shortcut bar!

IT Tools is open-source (under the MIT license) and free, and will always be, but it costs me money to host and renew the domain name. If you want to support my work, and encourage me to add more tools, please consider supporting by sponsoring me .

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.

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.

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.

Find any alphanumeric snippet, signature or keyword in the web pages HTML, JS and CSS code.

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.

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.

Unicode Lookup is an online reference tool to lookup Unicode and HTML special characters, by name and number, and convert between their decimal, hexadecimal, and octal bases.

Easily generate the optimal responsive image dimensions

One image for all screen resolutions and different devices is not enough. An image per pixel is too much - so how can someone automatically choose the optimal responsive image sizes?

This page lists all the HTML elements, which are created using tags.

They are grouped by function to help you find what you have in mind easily. An alphabetical list of all elements is provided in the sidebar on every element's page as well as this one.

https://github.com/eludadev/css-buttons

Safari sur iOS (et sur Mac) n’utilisent pas Blink, mais Webkit. Apple est parti de son côté avec Webkit et du coup fait un peu n’importe quoi. Ayant désormais un iPhone, je me retrouve à corriger mes sites et outils pour iOS.

Voici quelques trucs et astuces. Cet article sera emmené à être étendu avec le temps.

The start attribute
The contenteditable attribute
The required attribute
The mark tag
The lazy loading attribute
The kbd tag
The Details & Summary tag
The accept attribute
The favicon
The picture tag
The dir attribute
The spellcheck attribute
The meta description
The abbr tag
The disabled attribute
The poster attribute
The reversed attribute

HTML provides five spaces entity (space entity), they have different widths, non-breaking spaces (& nbsp;) is the width of conventional spaces, it runs on all major browsers. Several other spaces (& ensp; & emsp; & thinsp; & zwnj; & zwj;) of different widths at different browsers.

The only framework that makes responsive email easy. MJML is a markup language designed to reduce the pain of coding a responsive email.

Frontend app generator. Create webpack config, Parcel app or Snowpack with React, Vue, Svelte, Typescript, babel, css modules, CSS, SASS, less, code splitting