You can use the `loading=lazy` attribute to defer the loading of the image until the user scrolls to them.
2. Email, call, and SMS links:
3. Ordered lists `start` attribute.
Use the `start` attribute to change the starting point for your ordered lists.
4. The `meter` element
You can use the `<meter>` element to display quantities. No JavaScript/CSS needed.
5. `window.opener`
Pages opened with `target="_blank"` allow the new page to access the original’s `window.opener`. This can have security and performance implications. Include `rel="noopener"` or `rel="noreferrer"` to prevent this.
6. Base Element
If you want to open all links in the document in a new tab, you can use <base> element:
7. Favicon cache busting
To refresh your website’s favicon you can force browsers to download a new version by adding ?v=2 to the filename.
This is especially helpful in production to make sure the users get the new version.
8. Native HTML sliders
You can use `<input type="range">` to create sliders.
9. HTML Accordion
You can use the `details` element to create a native HTML accordion.
10. `mark` tag
You can use the `<mark>` tag to highlight text.
11. `download` attribute
You can use the `download` attribute in your links to download the file instead of navigating to it.
12. Performance tip
Use the `.webp` image format to make images smaller and boost the performance of your website.
If you liked this thread, maybe you'd love to bookmark it as a post.
There are 26 modules to explore, all created by Google trainers, and packed with practical exercises and real-world examples to help you turn knowledge into action.
Using `console.log()` for JavaScript debugging is the most common practice. But, there is more…
🧵
1/ The most common Console methods:
console.log() – For general output of logging information.
console. info() – Informative logging.
console.debug() – A message to the console with the log level debug.
console.warn() – A warning message.
console.error() – An error message.
2/ Custom CSS styles for a console.log():
The `console.log` output can be styled in DevTools using the CSS format specifier.
1/ Create a beautiful text portrait with a few lines of CSS:
2/ When you work with transparent images you can use the `drop-shadow()` filter function to create a shadow on the image's content, instead of `box-shadow` property which creates a rectangular shadow behind an element's entire box: