222 private links
- trigonometric functions
- new viewport unites
- :focus-visible
- scroll-behavior can be smooth :)
- lazyloading images by default with an attribute
array.prototype.atsupports negative integers
Putting ️ disable the previous emoji and render it as character
︎ renders it as an emoji
It is possible to activate/deactivate a class with node.classList.toggle('className', true/false)
The example provided about forms is impressive ! HTML and CSS are so much powerful ! I think I will use them more in vue and svelte :)
There is a <template> tag in HTML 5.
The componentization is still to be done though. I always forgot how HTML5 and CSS are powerful nowadays.
I bookmark this post especially for this code snippet:
body {
margin: 0 auto;
max-width: 40rem; // can be bigger but not too much ! (<= 80 I think)
font-size: 1.2rem;
}It makes a HTML website directly readable :)
THE HTML standard.
Reading it from time to time can only help to become a better web developer.
loading=lazyattribute to defer the loading of the image until the user scrolls to them<datalist>element to create native HTML autocomplete- Email, call and SMS links
- Ordered lists
startattribute to change the starting point of an ordered list. <input type="reset" />to get a clear button for the forms<meter>element to display quantitieswindow.openerreturns the original page of atarget="_blank". This can have security and performance implications. Includerel="noopener"orrel="noreferrer"to prevent this.<base target="_blank">in the<head>to open all links in the document in a new tab.- Favicon cache busting by adding a
?v=2to the link of the favicon <details><summary>Summary</summary><p>Details</p></details>downloadattribute to a link download the file instead of navigating to it- Use the
webpimage format to boost performance - Use the
posterattribute to specify an image to be shown while the video is downloading, or until the user hits the play button - Use the
spellcheckattribute to define whether the element may be checked for spelling errors.
👍
10 exemples de balises HTML sous-utilisées !
Comment créer un simple Web Component ?
HTML is too often forgotten in this case
❤️
About CSS
You are the visual translation of information. What good is all the information in the world if we can’t easily understand it? You hold the keys to hierarchy and contrast and layout, the keys to visual communication.
Underestimated tag !
It is easy to build on top of it to have a nice dropdown element, etc...
Oh shit ! Using HTML instead of a lot of Javascript. Need to be tested.
with Wkhtmltopdf : https://wkhtmltopdf.org/
Keep it easy, easy peasy
In a summary:
Don't use placeholder text.
Don't use disabled form fields and buttons, whenever possible.
Don't make multi-column forms.
Do make sure labels and instructions are always visible.
Do put your labels and instructions above text fields.
Do make sure your labels, inputs, and any help text are associated properly.
Do make sure all text meets WCAG colour contrast requirements.
Sur la bonne utilisation des formulaires