368 private links
Another problem is social markup not being identified properly, for example by LinkedIn, if it’s not following a
start tag.
Wtf
Minimal markup:
<!-- <head> (and <body>) needed for LinkedIn -->
<head>
<!-- “twitter:card” and title needed for Twitter -->
<meta name=twitter:card content=summary_large_image>
<meta property=og:title content="This is a test title">
<!-- Quotes needed for WhatsApp and Signal -->
<meta property="og:description" name="description" content="This is a test description.">
<meta property="og:image" content="https://hell.meiert.org/core/png/test.png">
I totally agree and it felt natural to me
Memory and local storage are great for “private” state — settings, caches, history. URL parameters are good for the “public” state, so that one could bookmark or forward the stateful link.
I am already applying that, but only because I had a class about it. It is useful though to have content about it online.
The tricky part is to make sure that requests made with JavaScript work the same as with HTML.
- Implement features in HTML first
- then add javascript
Conveniently, if the HTML is done properly we can derive all the information we need.
document.querySelector('form').addEventListener('submit', (event) => {
const form = event.target;
const url = new URL(form.action || window.location.href);
const formData = new FormData(form);
const searchParameters = new URLSearchParams(formData);
const options = {
method: form.method,
};
if (options.method === 'post') {
// Modify request body to include form data
options.body =
form.enctype === 'multipart/form-data' ? formData : searchParameters;
} else {
// Modify URL to include form data
url.search = searchParameters;
}
fetch(url, options);
event.preventDefault();
}For POST requests, we’ll send the data in the request body.
- If the form explicitly sets the enctype to 'multipart/form-data', it’s safe to use FormData in the body.
- Otherwise, we can fall back to URLSearchParams.
For GET requests, we’ll send the data in the request URL with the URLSearchParams object.
For the response: the header Accept: 'application/json' tells the server that json is awaited by the client else return HTML or a redirect :)
if we want to support HTML forms, we are though limited to GET and POST. But there is a nice workaround too:
- The GET and POST routes don’t change.
- The PATCH and DELETE routes become POST.
- We append the “methods”
/updateand/deleteto their respective routes.
Also: to include extra data in your request, you can use and input with the name, value, and the type of “hidden”.
It is also important that not all progressive enhancement is a zero sum game.
<P> was meant to be a break tag between paragraphs!
Some smooth checkboxes :)
Why zoom is deactivated on some websites ? What is the advantage ?
You can force it though:
In Firefox find the settings, select “Accessibility” and activate “Zoom on all website”
In Chrome find the settings, select “Accessibility” and check “Force enable zoom”
→ Remember: if your user is supposed to go somewhere, use an <a> element. If something with JavaScript needs to happen, use a <button> element.
I agree with that: link for navigation and button to trigger actions.
About the onclick attribute and the event variable: onclick="submit(event)" works. But why ?
The spec shows that the string passed to a handler is combined like this:
function $name (event) { $body }
I'm not sure what $name is but $body is the string passed to the handler attribute in HTML. event is an argument. This string becomes a function through the Function constructor I'm assuming.
enterkeyhintcite(reference an URL to an<q>,<blockquote>,<del>,<ins>) anddatetime- attributes for custom ordered lists: reversed, start, type, value
downloadattribute for<a>that has a value for the suggested file namedecodingattribute for the<img>element: sync or async the decoding of a picture.
- 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 !