andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Move HTML content under appropriate directory

Browse Source
This commit is contained in:
Angelos Chalaris
2023-05-20 14:20:22 +03:00
parent 1bf8ce8c23
commit acd5ca0edf
16 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
snippets/articles/s/8-tips-for-accessible-websites.md
View File

@ -1,43 +0,0 @@
---
title: 8 tips for accessible websites
shortTitle: Accessibility tips
type: story
language: html
tags: [accessibility,webdev]
author: chalarangelo
cover: accessibility
excerpt: Accessibility (a11y) can improve your website and attract new users. Learn how to get started with these 8 quick tips.
dateModified: 2021-06-12T19:30:41+03:00
---
### Use semantic HTML
HTML5 introduced a variety of new semantic HTML elements to help replace the much dreaded `<div>`, such as `<section>`, `<main>`, `<article>`, `<nav>` etc. When developing a website, you should understand what each part of your layout represents and try to use the appropriate element for it.
### Use color correctly
[WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) specifies a minimum contrast ratio of `4.5:1` between text and background (viewable in Chrome Developer Tools), so you should always design with that in mind. Additionally, remember that color should be used meaningfully and sparsely to avoid confusion and information overload.
### Caption images and video
Try to provide `alt` attributes for your `<img>` elements, so that screenreaders don't read the `src` attribute. You can use empty `alt` attributes for decorative images, which will inform screenreaders to skip them. Similarly, try to provide closed captions for any video content on your website.
### Show and tell
Using icons and colors to indicate state, highlight or provide context is very common and provides a nice user experience. However, icons and colors alone might not be accessible for everyone, so make sure to support them with the appropriate text literals, catering to all of your users in the process.
### Be consistent
Elements with similar meaning and/or functionality should look similar across your website. This is especially true for `<a>` and `<button>` elements and their respective states as users will have to be able to identify easily what elements they can interact with and anticipate their behavior.
### Label your inputs
Any kind of `<input>` element should be labelled appropriately, using either a `<label>` wrapper, the `for` attribute or an `aria-label` attribute. Do not rely on `placeholder` attributes to convey meaning about your `<input>` elements as this will cause problems for users on screenreaders.
### Design responsively
Responsiveness is often thought in terms of screen size or mobile vs desktop, but there are many different devices where a user could browse your website. Try catering to any and all of them by providing ways to navigate and use your application via mouse, keyboard, thumb or any combination of the three.
### Organize your content
A website's layout should be easy to scan, understand and find the content that is relevant to the user. Good organization with clear sections and properly grouped content provides a better user experience for all users, regardless of device or accessibility needs.

18
snippets/articles/s/custom-file-download-names.md
View File

@ -1,18 +0,0 @@
---
title: "Tip: Customize the names of downloadable files"
shortTitle: Customize the names of downloadable files
type: tip
language: html
tags: [webdev,browser]
author: chalarangelo
cover: hard-disk
excerpt: Learn what HTML5 attribute you can use to customize the names of your downloadable files with this quick tip.
dateModified: 2021-06-12T19:30:41+03:00
---
HTML5 introduced a variety of convenient features that many of us use every day. As downloadable links aren't something I work with very often, I recently found out that you can use the `download` attribute on an `<a>` element for much more than just making it trigger a download. In fact, you can pass it a string value that will act as the name of the downloadable file, effectively allowing you to customize its name:
```html
<!-- The downloaded file will be named 'June-2020.csv' -->
<a href="/data/2020/06/report.csv" download="June-2020.csv">June 2020</a>
```

23
snippets/articles/s/html-head-icons.md
View File

@ -1,23 +0,0 @@
---
title: Recommended HTML head icon tags
shortTitle: HTML favicons template
type: story
language: html
tags: [webdev,browser]
author: chalarangelo
cover: boutique-home-office-3
excerpt: Ensure your HTML documents have a proper favicon by including these lines in your `<head>` element.
dateModified: 2023-01-24T05:00:00-04:00
---
Over the years, I've seen many different and often conflicting guidelines about favicons and which tags are essential. Nowadays, I think you can get away with a very **minimal set of meta tags** and tailor them to your needs as you go. Here's my recommendation for the bare minimum you should include in your `<head>` element:
```html
<head>
<link rel="icon" sizes="192x192" href="favicon.png">
<link rel="apple-touch-icon" href="favicon.png">
<link rel="mask-icon" href="favicon.svg" color="#000000">
</head>
```
By creating a single 192x192 PNG asset, you can cover almost all modern devices and browsers, without too much hassle. If you want to go the extra mile, you can include a few more quite easily. Simply downscale the image and include more `rel="icon"` meta tags with different `sizes` attributes.

27
snippets/articles/s/html-head-links.md
View File

@ -1,27 +0,0 @@
---
title: Recommended HTML head links
shortTitle: HTML head links template
type: story
language: html
tags: [webdev,browser]
author: chalarangelo
cover: boutique-home-office-4
excerpt: Make your HTML documents more SEO-friendly by including these lines in your `<head>` element.
dateModified: 2023-01-26T05:00:00-04:00
---
The `<head>` element of an HTML document is where you can include links to external resources such as CSS stylesheets and JavaScript files. Some `<link>` elements, however, are important for SEO and metadata purposes. Here's a list of a few really important ones I like to include:
```html
<head>
<link rel="canonical" href="https://samplesite.com/page.html">
<link rel="sitemap" type="application/xml" href="https://samplesite.com/sitemap.xml">
<link rel="alternate" type="application/rss+xml" title="RSS" href="https://samplesite.com/rss.xml">
<link rel="search" type="application/opensearchdescription+xml" title="Search" href="https://samplesite.com/search.xml">
</head>
```
- The `canonical` link element tells search engines which URL is the **canonical version** of the page. This helps prevent duplicate content issues and ensures that the correct page is indexed.
- The `sitemap` link element tells search engines where to find the **sitemap** for the website. Sitemaps are XML files that contain a list of all the pages on the website and their metadata. They are used by search engines to index the website and display it in search results.
- The `alternate` link element tells search engines where to find the **RSS feed** for the website. RSS feeds are XML files that contain a list of the most recent posts on the website. They are used by search engines to display the website's content in search results, as well as by RSS readers to display the website's content in a more convenient format.
- The `search` link element is used by browsers to display a **search box** in the browser's address bar. This allows users to search the website directly from the address bar, instead of having to navigate to the search page.

38
snippets/articles/s/html-head-social-tags.md
View File

@ -1,38 +0,0 @@
---
title: Recommended social tags for HTML head
shortTitle: HTML social tags template
type: story
language: html
tags: [webdev,browser]
author: chalarangelo
cover: boutique-home-office-2
excerpt: Ensure your HTML documents can be shared on social media by including these lines in your `<head>` element.
dateModified: 2023-01-22T05:00:00-04:00
---
Social media play an important role to any content's success. To ensure your content is properly shared on social media, you should include some essential tags in your `<head>` element:
```html
<head>
<meta property="og:title" content="Page Title">
<meta property="og:description" content="Page description. No longer than 155 characters.">
<meta property="og:image" content="https://samplesite.com/image.jpg">
<meta property="og:site_name" content="Sample Site">
<meta property="og:url" content="https://samplesite.com/page.html">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page description. No longer than 155 characters.">
<meta name="twitter:image" content="https://samplesite.com/image.jpg">
<meta name="twitter:site" content="@samplesite">
</head>
```
The above snippet contains OpenGraph and Twitter tags. **OpenGraph tags** are used by Facebook and other social media platforms to display a preview of the page when it's shared. Similarly, Twitter uses **Twitter tags** for the same information. Here's a breakdown of each one:
- The `og:title` and `twitter:title` meta tags are used to display the page's title in the preview.
- The `og:description` and `twitter:description` meta tags are used to display a short description of the page in the preview.
- The `og:image` and `twitter:image` meta tags are used to display an image in the preview.
- The `og:site_name` meta tag is used to display the name of the site in the preview.
- The `og:url` meta tag is used to display the URL of the page in the preview.
- The `twitter:card` meta tag is used to display a preview of the page when it's shared. Available values are `summary`, `summary_large_image`, `app` and `player`.
- The `twitter:site` meta tag is used to display the Twitter handle of the site in the preview.

29
snippets/articles/s/html-recommended-minimum-head.md
View File

@ -1,29 +0,0 @@
---
title: Recommended minimum HTML head
shortTitle: HTML head template
type: story
language: html
tags: [webdev,browser]
author: chalarangelo
cover: boutique-home-office-1
excerpt: Ensure your HTML documents are properly structured by including these lines in your `<head>` element.
dateModified: 2023-01-18T05:00:00-04:00
---
An essential part of an HTML document is the `<head>` element, which contains metadata about the document. Some vital information, such as the document's title and character encoding are stored in the `<head>` element. It's also where you can include links to external resources such as CSS stylesheets and JavaScript files.
More often than not, this sort of metadata can grow in complexity with time. However, there are a few important things that should never be omitted. Here's a list of the bare minimum you should include in your `<head>` element:
```html
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Title</title>
<meta name="description" content="Page description. No longer than 155 characters.">
</head>
```
- The `charset` meta tag tells the browser what **character encoding** to use when rendering the document.
- The `viewport` meta tag tells the browser how to render the page on **mobile devices**.
- The `title` element is used by search engines to display the page's **title** in search results.
- The `description` meta tag is used by search engines to display a **short description** of the page in search results.

21
snippets/articles/s/lazy-loading-images.md
View File

@ -1,21 +0,0 @@
---
title: "Tip: Lazy load images in HTML"
shortTitle: Image lazy loading
type: tip
language: html
tags: [webdev,image]
author: chalarangelo
cover: bridge
excerpt: Did you know you can use a native HTML attribute to add lazy load to images? Learn all you need to know with this quick tip.
dateModified: 2021-06-12T19:30:41+03:00
---
Images are nowadays a crucial part of any webpage, but, as with most things, they come at a cost. Images are usually a major percentage of a page's load, which is why they make for a great candidate for optimization. The most common technique is that of lazy loading, usually in the form of delaying loading images outside the initial viewport until they are close to being scrolled into view.
This exact behavior is already part of the HTML standard in the form of the `loading` attribute. All you have to do to reap its benefits is add `loading="lazy"` to any images you want to add lazy loading to:
```html
<img src="/img/duck.png" alt="A rubber duck" loading="lazy" />
```
**Caveat:** At the time of writing, the `loading` attribute is supported in most modern browsers, except for Safari, but not in legacy browsers, such as IE. On that note, lazy loading can be seen as a progressive enhancement for browsers that support it, so it's still worth adding for any users that can benefit from it.

23
snippets/articles/s/password-autocomplete-suggestion.md
View File

@ -1,23 +0,0 @@
---
title: "Tip: Adding autocomplete to a password field"
shortTitle: Password field autocomplete
type: tip
language: html
tags: [webdev]
author: chalarangelo
cover: padlocks
excerpt: Use the HTML `autocomplete` attribute to create more secure and accessible password fields.
dateModified: 2021-06-12T19:30:41+03:00
---
The HTML `autocomplete` attribute provides a wide variety of options for `<input>` fields. One of these is the `new-password` value, which can be used when the user is asked to create a new password (e.g. signup or reset password forms). This value ensures that the browser will not accidentally fill in an existing password, while it also allows the browser to suggest a secure password:
```html
<form action="signup" method="post">
<input type="text" autocomplete="username">
<input type="password" autocomplete="new-password">
<input type="submit" value="Sign up">
</form>
```
Additionally, if the form contains a second password field asking the user to retype the newly created password, `autocomplete="new-password"` should be used for both of the password fields.

31
snippets/articles/s/prefetching-resources.md
View File

@ -1,31 +0,0 @@
---
title: "Tip: Prefetching resources in the browser"
shortTitle: Resource prefetching
type: tip
language: html
tags: [webdev,browser]
author: chalarangelo
cover: playing-fetch
excerpt: Resource prefetching is a great way to improve perceived page speed on your website and requires little effort. Learn how to use it today.
dateModified: 2021-06-12T19:30:41+03:00
---
Resource prefetching is a great technique to improve perceived page speed on your website and provide a better user experience, without a lot of effort. Prefetching happens in the browser as soon as it is idle, meaning it will not slow down the initial load, but rather utilize idle time to fetch and cache resources that might be useful later on.
To prefetch a resource, you can add a `<link>` tag with the `rel="prefetch"` attribute inside your document's `<head>` or `<body>`:
```html
<link rel="prefetch" href="./cool_page/data.json">
```
What this does is hint the browser that we will need this resource, so it should download it when idle and store it in the cache. Bear in mind that prefetching is more of a hint rather to the browser than anything else, so there are situations where the browser might ignore it (due to other browser downloads, user settings, connection issues etc.).
Prefetching resources can increase the perceived load time of a page or resource that is often requested, while also providing major performance benefits for resources such as webfonts, as they will download after the browser downloads, parses and styles the DOM. Currently resource prefetching only supports `http://` and `https://` links, however the same-origin restriction does not apply to resource prefetching, so you can download external resources if necessary.
Similarly, you can preload assets using the `rel="preload"` attribute, which are not hints but rather directions that the browser must follow:
```html
<link rel="preload" href="./important_page/data.json">
```
The only downside to preloading resources compared to prefetching is that [browser support](https://caniuse.com/#search=preload) might be low depending on when you are reading this.

19
snippets/articles/s/resource-preloading-cheatsheet.md
View File

@ -1,19 +0,0 @@
---
title: Resource Preloading Cheat Sheet
type: cheatsheet
language: html
tags: [webdev,browser]
author: chalarangelo
cover: folded-map
excerpt: Preloading content is one of many ways to improve your website's performance.
dateModified: 2022-10-12T05:00:00-04:00
---
Preloading content is one of many ways to improve web performance. The `rel` attribute of the `link` element can be used to instruct the browser how to handle different resources. Here's a handy cheatsheet to help you remember the different values and their effects.
- `rel="preload"`: Download the resource as soon as possible. Used when you're going to need a resource in a few seconds, on the same page.
- `rel="prefetch"`: Suggest that the resource is fetched in advance. Used when you're going to need a resource for the next page.
- `rel="preconnect"`: Establish a connection to the linked website, to speed up fetching resources from it later. Used when you're going to need a resource, but you don't know its full URL yet.
- `rel="dns-prefetch"`: Resolve the DNS for the linked website, to speed up fetching resources from it later. Used when you're going to need a resource, but you don't know its full URL yet (mainly for older browsers).
- `rel="prerender"`: Preload the resource and render it in the background, speeding up page load in the future. Used when users are likely to navigate to a specific page.
- `rel="modulepreload"`: Preload a JavaScript module script. Used when you're going to need an ES module script soon.

28
snippets/articles/s/reversed-list.md
View File

@ -1,28 +0,0 @@
---
title: "Tip: Create a descending list of numbered items"
shortTitle: Descending list
type: tip
language: html
tags: [webdev]
author: chalarangelo
cover: ancient-greek-building
excerpt: Did you know there's an easy way to create a descending list of numbered items with pure HTML? Learn how with this handy tip.
dateModified: 2021-06-22T05:00:00-04:00
---
Did you know there's an easy way to create a descending list of numbered items with pure HTML? The only thing you'll need is the `reversed` attribute. This boolean attribute is specific to `ol` elements and specifies that the list's elements are in reverse order (i.e. numbered from high to low).
```html
<ol reversed>
<li>My third favorite</li>
<li>My second favorite</li>
<li>My absolute favorite</li>
</ol>
<!--
3. My third favorite
2. My second favorite
1. My absolute favorite
-->
```
Additionally, you can combine `reversed` with the `start` attribute which is an integer specifying the initial value of the list counter. For example, if you wanted to display the numbers 6 through 4 in a reversed 3-item list, you would simply add `start="6"`.

28
snippets/articles/s/zooming-accessibility-tips.md
View File

@ -1,28 +0,0 @@
---
title: Why using maximum-scale can harm your page's accessibility
shortTitle: Accessibility and maximum-scale
type: story
language: html
tags: [webdev]
author: chalarangelo
cover: camera-zoom
excerpt: Using the viewport meta tag incorrectly can harm your website's accessibility. Learn how to prevent problems with this handy guide.
unlisted: true
dateModified: 2021-06-12T19:30:41+03:00
---
Using the `"viewport"` meta tag incorrectly can cause some serious accessibility issues for people with low vision.
The most common and, for the vast majority of cases, correct setup for said tag looks something like the first example below. However, there are websites that might do something like the second example, employing `maximum-scale=1.0` as part of their meta tag:
```html
<!-- Good in most scenarios -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bad in most scenarios -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
```
The reason this is a bad practice is that `maximum-scale=1.0` will disable the pinch zoom functionality on certain mobile devices, forcing people to view the website a certain way and taking away their ability to zoom in and out. This is the exact reason you should avoid it, allowing you to meet user's needs and provide a better user experience.
On a side note, even if you have some extraordinary reason for applying this, you should know that some browser and device combos such as Chrome on Android might respect the meta tag's suggestion, while others such as iOS 10 ignore the suggestion entirely, so you should be aware that you might not be delivering a consistent user experience for all of your users.