12 | This page doesn't exist (anymore), I'm soooo sorry.
13 | Visit the homepage or jump directly to HTML, CSS, or JS.
14 |
15 |
--------------------------------------------------------------------------------
/src/_11ty/metascraper-author.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 |
3 | const { $jsonld, $filter, toRule, author } = require('@metascraper/helpers')
4 |
5 | const REGEX_STRICT = /^\S+\s+\S+/
6 |
7 | const toAuthor = toRule(author)
8 |
9 | /**
10 | * Enforce stricter matching for a `rule`.
11 | *
12 | * @param {Function} rule
13 | * @return {Function} stricter
14 | */
15 |
16 | const strict = rule => $ => {
17 | const value = rule($)
18 | return REGEX_STRICT.test(value) && value
19 | }
20 |
21 | module.exports = () => ({
22 | author: [
23 | toAuthor($jsonld('author.name')),
24 | toAuthor($ => $('meta[name="author"]').attr('content')),
25 | toAuthor($ => $('meta[property="author"]').attr('content')),
26 | toAuthor($ => $('meta[property="article:author"]').attr('content')),
27 | toAuthor($ => $filter($, $('[itemprop*="author" i] [itemprop="name"]'))),
28 | toAuthor($ => $filter($, $('[itemprop*="author" i]'))),
29 | toAuthor($ => $filter($, $('[rel="author"]')))
30 | ]
31 | })
32 |
--------------------------------------------------------------------------------
/src/_11ty/metascraper-image.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 |
3 | const { $jsonld, $filter, image, toRule } = require('@metascraper/helpers')
4 |
5 | const toImage = toRule(image)
6 |
7 | const getSrc = el => el.attr('src')
8 |
9 | module.exports = () => ({
10 | image: [
11 | toImage($ => $('meta[property="og:image:secure_url"]').attr('content')),
12 | toImage($ => $('meta[property="og:image:url"]').attr('content')),
13 | toImage($ => $('meta[property="og:image"]').attr('content')),
14 | toImage($ => $('meta[name="twitter:image:src"]').attr('content')),
15 | toImage($ => $('meta[name="twitter:image"]').attr('content')),
16 | toImage($ => $('meta[itemprop="image"]').attr('content'))
17 | ]
18 | })
19 |
--------------------------------------------------------------------------------
/src/_data/entries/css/aspect-ratio.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "csstricks",
4 | "url": "https://css-tricks.com/a-first-look-at-aspect-ratio/",
5 | "title": "A First Look at `aspect-ratio` | CSS-Tricks",
6 | "description": "Oh hey! A brand new property that affects how a box is sized! That’s a big deal. There are lots of ways already to make an aspect-ratio sized box (and I’d",
7 | "date": "2020-06-01T12:50:44.000Z",
8 | "image": "/a-first-look-at-`aspect-ratio`-or-css-tricks.jpg",
9 | "processed": true
10 | },
11 | {
12 | "id": "smashing",
13 | "url": "https://www.smashingmagazine.com/2019/03/aspect-ratio-unit-css/",
14 | "title": "Designing An Aspect Ratio Unit For CSS — Smashing Magazine",
15 | "description": "What problems will the new aspect ratio unit solve? A look at the design of a new CSS feature.",
16 | "date": "2019-03-11T14:00:41.000Z",
17 | "image": "/designing-an-aspect-ratio-unit-for-css-smashing-magazine.png",
18 | "author": "Rachel Andrew",
19 | "processed": true
20 | },
21 | {
22 | "id": "caniuse",
23 | "url": "https://caniuse.com/#feat=mdn-css_properties_aspect-ratio",
24 | "title": "Can I use... Support tables for HTML5, CSS3, etc",
25 | "date": "2020-04-27T10:00:00.000Z",
26 | "image": "/caniuse.jpg",
27 | "author": "Can I use",
28 | "processed": true
29 | }
30 | ]
--------------------------------------------------------------------------------
/src/_data/entries/css/clip-path.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "webdev",
4 | "url": "https://web.dev/css-clipping/",
5 | "title": "How to use CSS clipping",
6 | "description": "Using clipping in CSS can help us move away from everything in our designs looking like a box. By using various basic shapes, or an SVG, you can create a clip path. Then cut away the parts of an element you don’t want to show.",
7 | "date": "2020-09-14T10:00:00.000Z",
8 | "image": "/how-to-use-css-clipping.jpg",
9 | "processed": true
10 | },
11 | {
12 | "id": "csstricks",
13 | "url": "https://css-tricks.com/unfortunately-clip-path-path-is-still-a-no-go/",
14 | "title": "Unfortunately, clip-path: path() is Still a No-Go | CSS-Tricks",
15 | "description": "I was extremely excited when I first heard that clip-path: path() was coming to Firefox. Just imagine being able to easily code a breathing box like the",
16 | "date": "2020-03-02T14:54:56.000Z",
17 | "image": "/unfortunately-clip-path-path-is-still-a-no-go-or-css-tricks.gif",
18 | "author": "Ana Tudor",
19 | "processed": true
20 | },
21 | {
22 | "id": "csstricks2",
23 | "url": "https://css-tricks.com/almanac/properties/c/clip-path/",
24 | "title": "clip-path | CSS-Tricks",
25 | "description": "The clip-path property in CSS allows you to specify a specific region of an element to display, rather than showing the complete area. There used to be a",
26 | "date": "2019-08-16T10:00:00.000Z",
27 | "processed": true
28 | }
29 | ]
--------------------------------------------------------------------------------
/src/_data/entries/css/contain.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "csstricks",
4 | "url": "https://css-tricks.com/lets-take-a-deep-dive-into-the-css-contain-property/",
5 | "title": "Let’s Take a Deep Dive Into the CSS Contain Property | CSS-Tricks",
6 | "description": "Compared to the past, modern browsers have become really efficient at rendering the tangled web of HTML, CSS, and JavaScript code a typical webpage",
7 | "date": "2020-05-08T14:33:22.000Z",
8 | "image": "/lets-take-a-deep-dive-into-the-css-contain-property-or-css-tricks.png",
9 | "author": "Travis Almand",
10 | "processed": true
11 | },
12 | {
13 | "id": "smashing",
14 | "url": "https://www.smashingmagazine.com/2019/12/browsers-containment-css-contain-property/",
15 | "title": "Helping Browsers Optimize With The CSS Contain Property — Smashing Magazine",
16 | "description": "The CSS contain property gives you a way to explain your layout to the browser, so performance optimizations can be made. However, it does come with some side effects in terms of your layout.",
17 | "date": "2019-12-27T12:00:00.000Z",
18 | "image": "/helping-browsers-optimize-with-the-css-contain-property-smashing-magazine.png",
19 | "author": "Rachel Andrew",
20 | "processed": true
21 | }
22 | ]
--------------------------------------------------------------------------------
/src/_data/entries/css/content-visibility.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "marcy",
4 | "url": "https://marcysutton.com/content-visibility-accessible-semantics",
5 | "title": "Content-visibility and Accessible Semantics | MarcySutton.com",
6 | "description": "While working with the team at DEV this past quarter on their open source community platform, Forem, they requested I review a Pull Request…",
7 | "image": "/content-visibility-and-accessible-semantics-or-marcysuttoncom.png",
8 | "processed": true
9 | },
10 | {
11 | "id": "csstricks",
12 | "url": "https://css-tricks.com/more-on-content-visibility/",
13 | "title": "More on content-visibility | CSS-Tricks",
14 | "description": "Back in August 2020, when the content-visiblity property in CSS trickled its way into Chrome browsers, Una Kravets and Vladimir Levin wrote about it and",
15 | "date": "2020-10-28T22:32:34.000Z",
16 | "image": "/more-on-content-visibility-or-css-tricks.jpg",
17 | "processed": true
18 | },
19 | {
20 | "id": "webdev",
21 | "url": "https://web.dev/content-visibility/",
22 | "title": "content-visibility: the new CSS property that boosts your rendering performance",
23 | "description": "The CSS content-visibility property enables web content rendering performance benefits by skipping rendering of off-screen content. This article shows you how to leverage this new CSS property for faster initial load times, using the auto keyword. You will also learn about the CSS Containment Spec a…",
24 | "date": "2020-08-05T10:00:00.000Z",
25 | "image": "/content-visibility-the-new-css-property-that-boosts-your-rendering-performance.jpg",
26 | "processed": true
27 | },
28 | {
29 | "id": "html5a11y",
30 | "url": "https://html5accessibility.com/stuff/2020/08/25/short-note-on-content-visibility-hidden/",
31 | "title": "Short note on content-visibility: hidden – HTML Accessibility",
32 | "date": "2020-08-26T00:38:28.000Z",
33 | "description": "What I am interested in is how it is exposed to screen readers and other assistive technology that make use of the content information represented in the browser accessibility tree.",
34 | "author": "Steve Faulkner",
35 | "processed": true
36 | }
37 | ]
--------------------------------------------------------------------------------
/src/_data/entries/css/content.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "matuzo",
4 | "url": "https://www.matuzo.at/blog/heres-what-i-didnt-know-about-content/",
5 | "title": "Here’s what I didn’t know about “content”",
6 | "description": "In part 3 of my series I’m trying to find out what I didn’t know about the `content` property.",
7 | "author": "Manuel Matuzović",
8 | "date": "2020-05-26T00:00:00.000Z",
9 | "image": "/heres-what-i-didnt-know-about-content.jpg",
10 | "processed": true
11 | },
12 | {
13 | "id": "judis",
14 | "url": "https://www.stefanjudis.com/today-i-learned/css-content-accepts-alternative-text/",
15 | "title": "The CSS “content” property accepts alternative text",
16 | "description": "The CSS ‘content’ property allows a way to provide an alternative text",
17 | "author": "stefan judis",
18 | "date": "2020-04-28T22:00:00.000Z",
19 | "image": "/the-css-content-property-accepts-alternative-text.jpg",
20 | "processed": true
21 | },
22 | {
23 | "id": "csstricks",
24 | "url": "https://css-tricks.com/css-content/",
25 | "title": "CSS Content | CSS-Tricks",
26 | "description": "CSS has a property called content. It can only be used with the pseudo elements :after and :before. It is written like a pseudo selector (with the colon),",
27 | "date": "2015-05-13T14:17:47.000Z",
28 | "image": "/css-content-or-css-tricks.png",
29 | "processed": true
30 | },
31 | {
32 | "id": "mdn",
33 | "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/content",
34 | "title": "content",
35 | "description": "The content CSS property replaces an element with a generated value. Objects inserted using the content property are anonymous replaced elements.",
36 | "date": "2020-04-05T17:20:12.999Z",
37 | "image": "/mdn.png",
38 | "author": "MDN",
39 | "processed": true
40 | }
41 | ]
--------------------------------------------------------------------------------
/src/_data/entries/css/display.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "rachel",
4 | "url": "https://noti.st/rachelandrew/qN6DnE/now-you-see-it-understanding-display",
5 | "title": "Now You See It: Understanding Display by Rachel Andrew",
6 | "description": "CSS Layout is all about boxes. We know that some boxes are blocks, and others are inline, and we can change the display type of elements by changing the value of the display property. That property holds the key to much more than this, however. It is the foundation on which all layout is built; the …",
7 | "author": "Rachel Andrew",
8 | "date": "2020-05-31T08:00:00.000Z",
9 | "image": "/now-you-see-it-understanding-display-by-rachel-andrew.png",
10 | "processed": true
11 | },
12 | {
13 | "id": "smashing",
14 | "url": "https://www.smashingmagazine.com/2019/04/display-two-value/",
15 | "title": "Digging Into The Display Property: The Two Values Of Display — Smashing Magazine",
16 | "description": "We talk a lot about Flexbox and CSS Grid Layout, but these layout methods are essentially values of the CSS display property, a workhorse of a property that doesn’t get a lot of attention. Rachel Andrew takes a better look in a short series.",
17 | "date": "2019-04-08T11:00:59.000Z",
18 | "author": "Rachel Andrew",
19 | "image": "/digging-into-the-display-property-the-two-values-of-display-smashing-magazine.png",
20 | "processed": true
21 | },
22 | {
23 | "id": "csstricks",
24 | "url": "https://css-tricks.com/almanac/properties/d/display/",
25 | "title": "display | CSS-Tricks",
26 | "description": "Every element on a web page is a rectangular box. The display property in CSS determines just how that rectangular box behaves. There are only a handful",
27 | "date": "2020-01-02T11:00:00.000Z",
28 | "author": "Sara Cope",
29 | "image": "/display-or-css-tricks.png",
30 | "processed": true
31 | }
32 | ]
--------------------------------------------------------------------------------
/src/_data/entries/css/displaycontents.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "roselli",
4 | "url": "https://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html",
5 | "tags": [
6 | "accessibility"
7 | ],
8 | "title": "Display: Contents Is Not a CSS Reset",
9 | "description": "CSS resets are a collection of CSS styles that undo the default browser styling of many or most HTML elements. Recently I have seen cases of developers using display: contents on lists and headings to remove the margins and padding, and generally to visually do what a CSS reset might…",
10 | "author": "Adrian Roselli",
11 | "date": "2019-06-22T00:39:50.000Z",
12 | "processed": true
13 | },
14 | {
15 | "id": "hidde",
16 | "url": "https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents",
17 | "tags": [
18 | "accessibility"
19 | ],
20 | "title": "More accessible markup with display: contents",
21 | "description": "The website of Hidde de Vries, freelance front-end developer.",
22 | "date": "2018-04-21T00:55:00.000Z",
23 | "author": "Hidde de Vries",
24 | "processed": true
25 | },
26 | {
27 | "id": "smashing",
28 | "url": "https://www.smashingmagazine.com/2019/05/display-box-generation/",
29 | "title": "Digging Into The Display Property: Box Generation — Smashing Magazine",
30 | "description": "Continuing a series on the display property in CSS, this time Rachel Andrew takes a look at the values which control box generation, for those times when you don’t want to generate a box at all.",
31 | "author": "Rachel Andrew",
32 | "date": "2019-05-01T11:00:59.000Z",
33 | "image": "/digging-into-the-display-property-box-generation-smashing-magazine.png",
34 | "processed": true
35 | }
36 | ]
37 |
--------------------------------------------------------------------------------
/src/_data/entries/css/displaygrid.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "smashing",
4 | "url": "https://www.smashingmagazine.com/2020/01/understanding-css-grid-container/",
5 | "title": "Understanding CSS Grid: Creating A Grid Container — Smashing Magazine",
6 | "description": "In a new series, Rachel Andrew breaks down the CSS Grid Layout specification. This time, we take a detailed look at what happens when you create a grid container and the various properties that can be applied to the container to shape your grid.",
7 | "date": "2020-01-03T11:30:00.000Z",
8 | "author": "Rachel Andrew",
9 | "image": "/understanding-css-grid-creating-a-grid-container-smashing-magazine.png",
10 | "processed": true
11 | },
12 | {
13 | "id": "smashing2",
14 | "url": "https://www.smashingmagazine.com/2019/05/display-grid-subgrid/",
15 | "title": "Digging Into The Display Property: Grids All The Way Down — Smashing Magazine",
16 | "description": "Continuing a series on the display property in CSS, this time Rachel Andrew takes a look at what happens when you use grid as a value of display, with added information about how subgrid changes that behavior.",
17 | "date": "2019-05-24T11:00:59.000Z",
18 | "author": "Rachel Andrew",
19 | "image": "/digging-into-the-display-property-grids-all-the-way-down-smashing-magazine.png",
20 | "processed": true
21 | }
22 | ]
23 |
--------------------------------------------------------------------------------
/src/_data/entries/css/flex-grow.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "csstricks2",
4 | "url": "https://css-tricks.com/understanding-flex-grow-flex-shrink-and-flex-basis/",
5 | "title": "Understanding flex-grow, flex-shrink, and flex-basis | CSS-Tricks",
6 | "description": "When you apply a CSS property to an element, there’s lots of things going on under the hood. For example, let’s say we have some HTML like this: <div",
7 | "date": "2020-11-13T02:28:47.000Z",
8 | "image": "/understanding-flex-grow-flex-shrink-and-flex-basis-or-css-tricks.png",
9 | "processed": true
10 | },
11 | {
12 | "id": "ishadeed",
13 | "url": "https://ishadeed.com/article/css-flex-property/",
14 | "title": "Digging Into the Flex Property - Ahmad Shadeed",
15 | "description": "How CSS flex-grow, flex-shrink, and flex-basis works.",
16 | "author": "iShadeed",
17 | "date": "2020-08-05T10:00:00.000Z",
18 | "processed": true
19 | },
20 | {
21 | "id": "csstricks",
22 | "url": "https://css-tricks.com/flex-grow-is-weird/",
23 | "title": "`flex-grow` is weird. Or is it? | CSS-Tricks",
24 | "description": "The following is a guest post by Manuel Matuzovic. It illustrates how flex-grow works, weird quirks and all. Then he goes into several examples on how",
25 | "date": "2017-04-11T01:37:04.000Z",
26 | "image": "/`flex-grow`-is-weird-or-is-it-or-css-tricks.jpg",
27 | "processed": true
28 | }
29 | ]
--------------------------------------------------------------------------------
/src/_data/entries/css/focusvisible.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "ott",
4 | "url": "https://matthiasott.com/notes/focus-visible-is-here",
5 | "title": ":focus-visible Is Here · Matthias Ott – User Experience Designer",
6 | "description": "Matthias Ott is an independent user experience designer and developer from Stuttgart, Germany. Besides design practice he teaches Interface Prototyping at the Muthesius Academy of Fine Arts and Design, Kiel.",
7 | "author": "Matthias Ott",
8 | "date": "2020-10-10T13:10:00.000Z",
9 | "image": "/focus-visible-is-here-·-matthias-ott-–-user-experience-designer.png",
10 | "processed": true
11 | },
12 | {
13 | "id": "chromeblog",
14 | "url": "https://blog.chromium.org/2020/09/giving-users-and-developers-more.html",
15 | "title": "Giving users and developers more control over focus",
16 | "description": "Chrome 86 introduces two new features that improve both the user and developer experience when it comes to working with focus The :focus-v...",
17 | "author": "Google",
18 | "date": "2020-09-02T10:00:00.000Z",
19 | "image": "/giving-users-and-developers-more-control-over-focus.png",
20 | "processed": true
21 | }
22 | ]
--------------------------------------------------------------------------------
/src/_data/entries/css/grid-column.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "smashing",
4 | "url": "https://www.smashingmagazine.com/2020/01/understanding-css-grid-lines/",
5 | "title": "Understanding CSS Grid: Grid Lines — Smashing Magazine",
6 | "description": "In a new series, Rachel Andrew breaks down the CSS Grid Layout specification. This time, we take a look at how to use the grid lines to place items.",
7 | "date": "2020-01-10T11:30:00.000Z",
8 | "image": "/understanding-css-grid-grid-lines-smashing-magazine.png",
9 | "author": "Rachel Andrew",
10 | "processed": true
11 | },
12 | {
13 | "id": "chen",
14 | "url": "https://www.chenhuijing.com/blog/understanding-grid-placement/#%F0%9F%91%9F",
15 | "title": "Understanding grid placement through building a HTML periodical table",
16 | "description": "I’ve been using CSS grid to build layouts for quite a while now, and all my designs to date involved...",
17 | "date": "2019-05-06T00:00:00.000Z",
18 | "image": "/understanding-grid-placement-through-building-a-html-periodical-table.jpg",
19 | "author": "Chen Hui Jing",
20 | "processed": true
21 | }
22 | ]
23 |
--------------------------------------------------------------------------------
/src/_data/entries/css/grid-row.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "smashing",
4 | "url": "https://www.smashingmagazine.com/2020/01/understanding-css-grid-lines/",
5 | "title": "Understanding CSS Grid: Grid Lines — Smashing Magazine",
6 | "description": "In a new series, Rachel Andrew breaks down the CSS Grid Layout specification. This time, we take a look at how to use the grid lines to place items.",
7 | "date": "2020-01-10T11:30:00.000Z",
8 | "image": "/understanding-css-grid-grid-lines-smashing-magazine.png",
9 | "author": "Rachel Andrew",
10 | "processed": true
11 | },
12 | {
13 | "id": "chen",
14 | "url": "https://www.chenhuijing.com/blog/understanding-grid-placement/#%F0%9F%91%9F",
15 | "title": "Understanding grid placement through building a HTML periodical table",
16 | "description": "I’ve been using CSS grid to build layouts for quite a while now, and all my designs to date involved...",
17 | "date": "2019-05-06T00:00:00.000Z",
18 | "author": "Chen Hui Jing",
19 | "image": "/understanding-grid-placement-through-building-a-html-periodical-table.jpg",
20 | "processed": true
21 | }
22 | ]
23 |
--------------------------------------------------------------------------------
/src/_data/entries/css/grid-template-areas.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "smashing",
4 | "url": "https://www.smashingmagazine.com/2020/02/understanding-css-grid-template-areas/",
5 | "title": "Understanding CSS Grid: Grid Template Areas — Smashing Magazine",
6 | "description": "In a new series, Rachel Andrew breaks down the CSS Grid Layout specification. This time, we take a look at how to use grid-template-areas to place items.",
7 | "date": "2020-02-12T11:30:00.000Z",
8 | "image": "/understanding-css-grid-grid-template-areas-smashing-magazine.png",
9 | "author": "Rachel Andrew",
10 | "processed": true
11 | },
12 | {
13 | "id": "ishadeed",
14 | "url": "https://ishadeed.com/article/grid-area/",
15 | "tags": [
16 | "layout"
17 | ],
18 | "title": "CSS Grid Template Areas In Action - Ahmad Shadeed",
19 | "description": "Since CSS Grid became supported in the major browsers back in March 2017 (Almost three years ago), I started using it in my personal and client projects, of ...",
20 | "author": "iShadeed",
21 | "date": "2020-01-19T11:00:00.000Z",
22 | "processed": true
23 | }
24 | ]
25 |
--------------------------------------------------------------------------------
/src/_data/entries/css/lch.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "lea",
4 | "url": "http://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/",
5 | "title": "LCH colors in CSS: what, why, and how? | Lea Verou",
6 | "date": "2020-04-04T13:23:31.000Z",
7 | "author": "Lea Verou",
8 | "processed": true
9 | },
10 | {
11 | "id": "colorpicker",
12 | "url": "https://css.land/lch/",
13 | "title": "LCH Colour picker",
14 | "author": "Lea Verou",
15 | "processed": true
16 | }
17 | ]
--------------------------------------------------------------------------------
/src/_data/entries/css/margin.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "quirks",
4 | "url": "https://www.quirksmode.org/blog/archives/2020/02/negative_margin.html",
5 | "title": "Negative margins in CSS - QuirksBlog",
6 | "author": "Peter-Paul Koch",
7 | "processed": true
8 | },
9 | {
10 | "id": "csstricks",
11 | "url": "https://css-tricks.com/almanac/properties/m/margin/",
12 | "title": "margin | CSS-Tricks",
13 | "description": "The margin property defines the outermost portion of the box model, creating space around an element, outside of any defined borders. Margins are set",
14 | "date": "2020-03-06T11:00:00.000Z",
15 | "image": "/margin-or-css-tricks.png",
16 | "author": "Sara Cope",
17 | "processed": true
18 | },
19 | {
20 | "id": "smashing",
21 | "url": "https://www.smashingmagazine.com/2019/07/margins-in-css/",
22 | "title": "Everything You Need To Know About CSS Margins — Smashing Magazine",
23 | "description": "Margins in CSS seem simple enough at first glance. Applied to an element it forms a space around the element, pushing other elements away. However, there is more to a margin than you might think.",
24 | "author": "Rachel Andrew",
25 | "date": "2019-07-15T10:30:59.000Z",
26 | "image": "/everything-you-need-to-know-about-css-margins-smashing-magazine.png",
27 | "processed": true
28 | }
29 | ]
30 |
--------------------------------------------------------------------------------
/src/_data/entries/css/marker.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "webdev",
4 | "url": "https://web.dev/css-marker-pseudo-element/",
5 | "title": "Custom bullets with CSS ::marker",
6 | "description": "It is now trivial to customize the color, size or type of number or bullet when using a <ul> or <ol>.",
7 | "date": "2020-09-02T10:00:00.000Z",
8 | "image": "/custom-bullets-with-css-marker.png",
9 | "processed": true
10 | },
11 | {
12 | "id": "csstricks2",
13 | "url": "https://css-tricks.com/list-style-recipes/",
14 | "title": "List Style Recipes | CSS-Tricks",
15 | "description": "Lists are a fundamental part of HTML! They are useful in things like blog posts for listing out steps, recipes for listing ingredients, or items in a",
16 | "date": "2020-05-05T14:10:28.000Z",
17 | "image": "/list-style-recipes-or-css-tricks.jpg",
18 | "author": "Chris Coyier",
19 | "processed": true
20 | },
21 | {
22 | "id": "smashing",
23 | "url": "https://www.smashingmagazine.com/2019/07/css-lists-markers-counters/",
24 | "title": "CSS Lists, Markers, And Counters — Smashing Magazine",
25 | "description": "There is more to styling lists in CSS than you might think. In this article, Rachel starts by looking at lists in CSS, and moving onto some interesting features defined in the CSS Lists specification — markers and counters.",
26 | "date": "2019-07-09T10:30:59.000Z",
27 | "author": "Rachel Andrew",
28 | "image": "/css-lists-markers-and-counters-smashing-magazine.png",
29 | "processed": true
30 | },
31 | {
32 | "id": "csstricks",
33 | "url": "https://css-tricks.com/almanac/selectors/m/marker/",
34 | "title": "::marker | CSS-Tricks",
35 | "description": "The ::marker pseudo-element is for applying list-style attributes on a given element. It effectively targets the bullet-point or number generated by a",
36 | "date": "2019-05-22T10:00:00.000Z",
37 | "image": "/marker-or-css-tricks.jpg",
38 | "author": "Geoff Graham",
39 | "processed": true
40 | }
41 | ]
--------------------------------------------------------------------------------
/src/_data/entries/css/mask-image.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "webdev",
4 | "url": "https://web.dev/css-masking/",
5 | "title": "How to use CSS masking",
6 | "description": "CSS masking gives you the option of using an image as a mask layer. This means that use can use an image, an SVG, or a gradient as your mask, to create interested effects without an image editor.",
7 | "date": "2020-09-14T10:00:00.000Z",
8 | "image": "/how-to-use-css-masking.jpg",
9 | "processed": true
10 | },
11 | {
12 | "id": "mdn",
13 | "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image",
14 | "title": "mask-image",
15 | "description": "The mask-image CSS property sets the image that is used as mask layer for an element.",
16 | "date": "2020-07-20T10:34:13.255Z",
17 | "image": "/mdn.png",
18 | "author": "MDN",
19 | "processed": true
20 | },
21 | {
22 | "id": "caniuse",
23 | "url": "https://caniuse.com/css-masks",
24 | "title": "Can I use... Support tables for HTML5, CSS3, etc",
25 | "date": "2020-09-24T10:00:00.000Z",
26 | "image": "/caniuse.jpg",
27 | "author": "Can I use",
28 | "processed": true
29 | }
30 | ]
--------------------------------------------------------------------------------
/src/_data/entries/css/not.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "valkhof",
4 | "url": "https://kilianvalkhof.com/2008/css-html/the-css3-not-selector/",
5 | "title": "The CSS3 :not() selector",
6 | "description": "Old post, but still popular and relevant.",
7 | "date": "2008-08-26T10:57:18.000Z",
8 | "image": "/the-css3-not-selector.jpg",
9 | "author": "Kilian Valkhof",
10 | "processed": true
11 | },
12 | {
13 | "id": "csstricks",
14 | "url": "https://css-tricks.com/almanac/selectors/n/not/",
15 | "title": ":not() | CSS-Tricks",
16 | "description": "The :not(X) property in CSS is a negation pseudo class and accepts a simple selector1 as an argument. Essentially, just another selector of any kind. :not",
17 | "date": "2019-07-15T10:00:00.000Z",
18 | "image": "/not-or-css-tricks.jpg",
19 | "author": "Sara Cope",
20 | "processed": true
21 | },
22 | {
23 | "id": "mdn",
24 | "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/:not",
25 | "title": ":not()",
26 | "description": "The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the negation pseudo-class.",
27 | "date": "2019-12-20T04:29:09.458Z",
28 | "image": "/mdn.png",
29 | "author": "MDN",
30 | "processed": true
31 | }
32 | ]
33 |
--------------------------------------------------------------------------------
/src/_data/entries/css/nthchild.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "nthtester",
4 | "url": "https://css-tricks.com/examples/nth-child-tester/",
5 | "title": ":nth Tester",
6 | "author": "CSS Tricks",
7 | "processed": true
8 | },
9 | {
10 | "id": "nthmaster",
11 | "url": "http://nthmaster.com/",
12 | "title": "Mastering the :nth-child | CSS3 pseudo classes and :nth-child ranges",
13 | "author": "James Menera",
14 | "processed": true
15 | },
16 | {
17 | "id": "mdn",
18 | "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child",
19 | "title": ":nth-child()",
20 | "description": "The :nth-child() CSS pseudo-class matches elements based on their position in a group of siblings.",
21 | "date": "2020-04-03T05:38:39.173Z",
22 | "image": "/mdn.png",
23 | "author": "MDN",
24 | "processed": true
25 | }
26 | ]
27 |
--------------------------------------------------------------------------------
/src/_data/entries/css/nthlastchild.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "nthtester",
4 | "url": "https://css-tricks.com/examples/nth-child-tester/",
5 | "title": ":nth Tester",
6 | "author": "CSS Tricks",
7 | "processed": true
8 | },
9 | {
10 | "id": "ala",
11 | "url": "https://alistapart.com/article/quantity-queries-for-css/",
12 | "title": "Quantity Queries for CSS",
13 | "description": "In responsive design, we think a lot about space, especially in the context of screen sizes. But the amount of content or the number of elements is bound to affect space, too, just as unpredictably…",
14 | "author": "Heydon Pickering",
15 | "date": "2015-03-03T15:00:00.000Z",
16 | "image": "/quantity-queries-for-css.png",
17 | "processed": true
18 | },
19 | {
20 | "id": "mdn",
21 | "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child",
22 | "title": ":nth-last-child()",
23 | "description": "The :nth-last-child() CSS pseudo-class matches elements based on their position among a group of siblings, counting from the end.",
24 | "date": "2018-09-18T23:19:02.444Z",
25 | "image": "/mdn.png",
26 | "author": "MDN",
27 | "processed": true
28 | }
29 | ]
30 |
--------------------------------------------------------------------------------
/src/_data/entries/css/positionabsolute.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "chen",
4 | "url": "https://www.chenhuijing.com/blog/flexbox-and-absolute-positioning/#%F0%9F%9A%B2",
5 | "title": "Flexbox and absolute positioning",
6 | "description": "Recently, I’ve been trying to build an open source video conferencing application specifically for online meetups. Just like every other...",
7 | "date": "2020-03-13T00:00:00.000Z",
8 | "image": "/flexbox-and-absolute-positioning.jpg",
9 | "author": "Chen Hui Jing",
10 | "processed": true
11 | }
12 | ]
13 |
--------------------------------------------------------------------------------
/src/_data/entries/css/positionsticky.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "roselli",
4 | "url": "https://adrianroselli.com/2020/01/fixed-table-headers.html",
5 | "tags": [
6 | "accessibility"
7 | ],
8 | "title": "Fixed Table Headers",
9 | "description": "Related A Responsive Accessible Table Hey, It’s Still OK to Use Tables Keyboard and Overflow",
10 | "date": "2020-01-13T21:59:27.000Z",
11 | "author": "Adrian Roselli",
12 | "processed": true
13 | },
14 | {
15 | "id": "csstricks",
16 | "url": "https://css-tricks.com/position-sticky-and-table-headers/",
17 | "tags": [
18 | "accessibility"
19 | ],
20 | "title": "Position Sticky and Table Headers | CSS-Tricks",
21 | "description": "You can’t position: sticky; a . Nor a . But you can sticky a , which means you can make sticky headers inside a regular ol’ . This is tricky stuff,",
22 | "date": "2020-03-05T13:24:58.000Z",
23 | "author": "Chris Coyier",
24 | "image": "/position-sticky-and-table-headers-or-css-tricks.png",
25 | "processed": true
26 | }
27 | ]
28 |
--------------------------------------------------------------------------------
/src/_data/entries/css/scroll-behavior.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "schepp",
4 | "url": "https://schepp.dev/posts/smooth-scrolling-and-page-search/",
5 | "title": "Fixing Smooth Scrolling & Page Search",
6 | "description": "Native smooth scrolling is one more example of standards paving the cow path by declaring a wide-spread practice officially a thing: being able to smoothly scroll the viewport to another part of a page without the user losing their orientation. As good at it is, though, it also has an undesired …",
7 | "date": "2021-01-06T19:18:17.000Z",
8 | "image": "/fixing-smooth-scrolling-and-page-search.jpg",
9 | "processed": true
10 | }
11 | ]
12 |
--------------------------------------------------------------------------------
/src/_data/entries/css/scroll-margin.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "gmt",
4 | "url": "https://gomakethings.com/how-to-prevent-anchor-links-from-scrolling-behind-a-sticky-header-with-one-line-of-css/",
5 | "title": "How to prevent anchor links from scrolling behind a sticky header with one line of CSS",
6 | "description": "Yesterday, we looked at how to create sticky headers with the position: sticky CSS property.\nOne problem with sticky headers are anchor links. By default, they snap to the top of the document, behind the sticky navigation menu.\nYou can see it yourself in this demo.\nToday, I want to talk about a CSS …",
7 | "date": "2020-03-03T15:30:00.000Z",
8 | "author": "Chris Ferdinandi",
9 | "image": "/how-to-prevent-anchor-links-from-scrolling-behind-a-sticky-header-with-one-line-of-css.png",
10 | "processed": true
11 | },
12 | {
13 | "id": "csstricks",
14 | "url": "https://css-tricks.com/fixed-headers-and-jump-links-the-solution-is-scroll-margin-top/",
15 | "title": "Fixed Headers and Jump Links? The Solution is scroll-margin-top | CSS-Tricks",
16 | "description": "The problem: you click a jump link like <a href=”#header-3″>Jump</a> which links to something like <h3 id=“header-3”>Header</h3>.",
17 | "author": "Chris Coyier",
18 | "date": "2020-02-21T23:49:30.000Z",
19 | "image": "/fixed-headers-and-jump-links-the-solution-is-scroll-margin-top-or-css-tricks.png",
20 | "processed": true
21 | },
22 | {
23 | "id": "mdn",
24 | "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin",
25 | "title": "scroll-margin",
26 | "description": "The scroll-margin property is a shorthand property which sets all of the scroll-margin longhands, assigning values much like the margin property does for the margin-* longhands.",
27 | "date": "2019-12-17T08:01:54.037Z",
28 | "image": "/mdn.png",
29 | "author": "MDN",
30 | "processed": true
31 | },
32 | {
33 | "id": "sven",
34 | "url": "https://codepen.io/maddesigns/pen/XWbRZbb",
35 | "author": "Sven Wolfermann",
36 | "title": "scroll-margin-top / scroll-padding, smooth scroll and fixed headers",
37 | "processed": true
38 | },
39 | {
40 | "id": "sven",
41 | "url": "https://codepen.io/maddesigns/pen/KKpGjqj",
42 | "author": "Sven Wolfermann",
43 | "title": "fixed headers jump :target (IE11 version)",
44 | "processed": true
45 | }
46 | ]
47 |
--------------------------------------------------------------------------------
/src/_data/entries/css/scroll-snap-type.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "ishadeed",
4 | "url": "https://ishadeed.com/article/css-scroll-snap/",
5 | "title": "CSS Scroll Snap - Ahmad Shadeed",
6 | "description": "An in-depth article on CSS scroll snap, why to use, how it works, and lots of examples.",
7 | "author": "iShadeed",
8 | "date": "2020-12-08T11:00:00.000Z",
9 | "processed": true
10 | }
11 | ]
--------------------------------------------------------------------------------
/src/_data/entries/css/universal.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "lobo",
4 | "url": "https://alistapart.com/article/axiomatic-css-and-lobotomized-owls/",
5 | "title": "Axiomatic CSS and Lobotomized Owls",
6 | "description": "Managing flow content can get unwieldy—too many class selectors can become a specificity headache, nested styling can get redundant, and content editors don’t always understand the presentational m…",
7 | "author": "Heydon Pickering",
8 | "date": "2014-10-21T14:00:00.000Z",
9 | "image": "/axiomatic-css-and-lobotomized-owls.png",
10 | "processed": true
11 | },
12 | {
13 | "id": "mdn",
14 | "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors",
15 | "title": "Universal selectors",
16 | "description": "The CSS universal selector (*) matches elements of any type.",
17 | "date": "2019-03-23T19:18:06.590Z",
18 | "image": "/mdn.png",
19 | "author": "MDN",
20 | "processed": true
21 | }
22 | ]
23 |
--------------------------------------------------------------------------------
/src/_data/entries/css/writingmode.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "smashing",
4 | "url": "https://www.smashingmagazine.com/2019/08/writing-modes-layout/",
5 | "title": "Writing Modes And CSS Layout — Smashing Magazine",
6 | "description": "An understanding of CSS Writing Modes is useful if you want to work with vertical scripts, or change writing mode for creative reasons. However, they also underpin our new layout methods, and those ideas are increasingly being applied across all of CSS. In this article, find out why Rachel Andrew be…",
7 | "date": "2019-08-06T12:00:00.000Z",
8 | "image": "/writing-modes-and-css-layout-smashing-magazine.png",
9 | "author": "Rachel Andrew",
10 | "processed": true
11 | }
12 | ]
13 |
--------------------------------------------------------------------------------
/src/_data/entries/html/ariacurrent.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "leonie",
4 | "url": "https://tink.uk/using-the-aria-current-attribute/",
5 | "tags": [
6 | "accessibility"
7 | ],
8 | "title": "Using the aria-current attribute - Tink - Léonie Watson",
9 | "date": "2017-01-14T00:00:00.000Z",
10 | "processed": true
11 | },
12 | {
13 | "id": "a11ysupport",
14 | "url": "https://a11ysupport.io/tech/aria/aria-current_attribute",
15 | "tags": [
16 | "accessibility"
17 | ],
18 | "title": "aria-current_attribute (aria) | Accessibility Support",
19 | "processed": true
20 | }
21 | ]
--------------------------------------------------------------------------------
/src/_data/entries/html/ariadescribedby.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "ben",
4 | "url": "https://benmyers.dev/blog/aria-labels-and-descriptions/",
5 | "title": "aria-label, aria-labelledby, and aria-describedby: What’s the Difference?",
6 | "description": "Diving deep into three attributes that bring clarity to elements in assistive technologies.",
7 | "date": "2020-12-07T00:00:00.000Z",
8 | "image": "/aria-label-aria-labelledby-and-aria-describedby-whats-the-difference.png",
9 | "processed": true
10 | },
11 | {
12 | "id": "paciello",
13 | "url": "https://developer.paciellogroup.com/blog/2017/07/short-note-on-aria-label-aria-labelledby-and-aria-describedby/",
14 | "tags": [
15 | "accessibility"
16 | ],
17 | "title": "Short note on aria-label, aria-labelledby, and aria-describedby",
18 | "description": "Be careful when you use the aria-label, aria-labelledby, and aria-describedby attributes, because they do not work consistently with all HTML elements. This is a short note on when (and when not) to u",
19 | "date": "2018-07-18T08:46:02.000Z",
20 | "image": "/short-note-on-aria-label-aria-labelledby-and-aria-describedby.png",
21 | "processed": true
22 | },
23 | {
24 | "id": "paciello2",
25 | "url": "https://developer.paciellogroup.com/blog/2018/09/describing-aria-describedby/",
26 | "tags": [
27 | "accessibility"
28 | ],
29 | "title": "Describing aria-describedby",
30 | "description": "A well-designed user interface (UI) should clearly identify important content and controls. Often people correlate this to using prominent visual cues to help guide individuals through a task or point",
31 | "date": "2018-11-27T13:07:56.000Z",
32 | "image": "/describing-aria-describedby.png",
33 | "processed": true
34 | },
35 | {
36 | "id": "mdn",
37 | "url": "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute",
38 | "title": "Using the aria-describedby attribute",
39 | "description": "The aria-describedby attribute is used to indicate the IDs of the elements that describe the object. It is used to establish a relationship between widgets or groups and text that described them. This is very similar to aria-labelledby: a label describes the essence of an object, while a description…",
40 | "date": "2019-03-23T19:16:44.431Z",
41 | "image": "/mdn.png",
42 | "author": "MDN",
43 | "processed": true
44 | }
45 | ]
46 |
--------------------------------------------------------------------------------
/src/_data/entries/html/ariadetails.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "ohara",
4 | "url": "https://www.scottohara.me/blog/2018/11/08/aria-details.html",
5 | "tags": [
6 | "accessibility"
7 | ],
8 | "title": "Getting the details on aria-details | scottohara.me",
9 | "description": "Introduced in ARIA 1.1, aria-details is meant to help convey that there is additional information available for a particular element a user is interacting with.",
10 | "date": "2018-11-08T00:00:00.000Z",
11 | "processed": true
12 | }
13 | ]
14 |
--------------------------------------------------------------------------------
/src/_data/entries/html/ariaflowto.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "tink",
4 | "url": "https://tink.uk/flexbox-the-keyboard-navigation-disconnect/",
5 | "tags": [
6 | "accessibility"
7 | ],
8 | "title": "Flexbox & the keyboard navigation disconnect – Tink",
9 | "author": "Léonie Watson",
10 | "description": "The only viable way (in my opinion) for the flexbox disconnect to be resolved, is in the browser (as with the Firefox “bug”) and the accessibility tree.",
11 | "date": "2016-02-04T00:00:00.000Z",
12 | "processed": true
13 | }
14 | ]
15 |
--------------------------------------------------------------------------------
/src/_data/entries/html/arialabel.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "ben",
4 | "url": "https://benmyers.dev/blog/aria-labels-and-descriptions/",
5 | "title": "aria-label, aria-labelledby, and aria-describedby: What’s the Difference?",
6 | "description": "Diving deep into three attributes that bring clarity to elements in assistive technologies.",
7 | "date": "2020-12-07T00:00:00.000Z",
8 | "image": "/aria-label-aria-labelledby-and-aria-describedby-whats-the-difference.png",
9 | "processed": true
10 | },
11 | {
12 | "id": "steve",
13 | "url": "https://html5accessibility.com/stuff/2020/11/07/not-so-short-note-on-aria-label-usage-big-table-edition/",
14 | "title": "Not so short note on aria-label usage – Big Table Edition – HTML Accessibility",
15 | "date": "2020-11-07T15:50:51.000Z",
16 | "processed": true
17 | },
18 | {
19 | "id": "leonie",
20 | "url": "https://tink.uk/the-difference-between-aria-label-and-aria-labelledby/",
21 | "title": "The difference between aria-label and aria-labelledby - Tink - Léonie Watson",
22 | "date": "2020-08-24T00:00:00.000Z",
23 | "processed": true
24 | },
25 | {
26 | "id": "paciello",
27 | "url": "https://developer.paciellogroup.com/blog/2017/07/short-note-on-aria-label-aria-labelledby-and-aria-describedby/",
28 | "tags": [
29 | "accessibility"
30 | ],
31 | "title": "Short note on aria-label, aria-labelledby, and aria-describedby",
32 | "description": "Be careful when you use the aria-label, aria-labelledby, and aria-describedby attributes, because they do not work consistently with all HTML elements. This is a short note on when (and when not) to u",
33 | "date": "2018-07-18T08:46:02.000Z",
34 | "image": "/short-note-on-aria-label-aria-labelledby-and-aria-describedby.png",
35 | "processed": true
36 | },
37 | {
38 | "id": "mdn",
39 | "url": "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute",
40 | "title": "Using the aria-label attribute",
41 | "description": "The aria-label attribute is used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen. If there is visible text labeling the element, use aria-labelledby instead.",
42 | "date": "2020-02-17T00:25:15.649Z",
43 | "image": "/mdn.png",
44 | "author": "MDN",
45 | "processed": true
46 | }
47 | ]
--------------------------------------------------------------------------------
/src/_data/entries/html/arialabelledby.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "ben",
4 | "url": "https://benmyers.dev/blog/aria-labels-and-descriptions/",
5 | "title": "aria-label, aria-labelledby, and aria-describedby: What’s the Difference?",
6 | "description": "Diving deep into three attributes that bring clarity to elements in assistive technologies.",
7 | "date": "2020-12-07T00:00:00.000Z",
8 | "image": "/aria-label-aria-labelledby-and-aria-describedby-whats-the-difference.png",
9 | "processed": true
10 | },
11 | {
12 | "id": "leonie",
13 | "url": "https://tink.uk/the-difference-between-aria-label-and-aria-labelledby/",
14 | "title": "The difference between aria-label and aria-labelledby - Tink - Léonie Watson",
15 | "date": "2020-08-24T00:00:00.000Z",
16 | "processed": true
17 | },
18 | {
19 | "id": "paciello",
20 | "url": "https://developer.paciellogroup.com/blog/2017/07/short-note-on-aria-label-aria-labelledby-and-aria-describedby/",
21 | "tags": [
22 | "accessibility"
23 | ],
24 | "title": "Short note on aria-label, aria-labelledby, and aria-describedby",
25 | "description": "Be careful when you use the aria-label, aria-labelledby, and aria-describedby attributes, because they do not work consistently with all HTML elements. This is a short note on when (and when not) to u",
26 | "date": "2018-07-18T08:46:02.000Z",
27 | "image": "/short-note-on-aria-label-aria-labelledby-and-aria-describedby.png",
28 | "processed": true
29 | },
30 | {
31 | "id": "mdn",
32 | "url": "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute",
33 | "title": "Using the aria-labelledby attribute",
34 | "description": "The aria-labelledby attribute establishes relationships between objects and their label(s), and its value should be one or more element IDs, which refer to elements that have the text needed for labeling. List multiple element IDs in a space delimited fashion. This idea is similar to how the “for” a…",
35 | "date": "2019-03-18T15:57:32.387Z",
36 | "image": "/mdn.png",
37 | "author": "MDN",
38 | "processed": true
39 | }
40 | ]
41 |
--------------------------------------------------------------------------------
/src/_data/entries/html/ariarelevant.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "dodson",
4 | "url": "https://medium.com/dev-channel/why-authors-should-avoid-aria-relevant-5d3164fab1e3",
5 | "title": "Why authors should avoid aria-relevant",
6 | "description": "The ARIA attribute, aria-relevant, is supposed to affect how live regions are processed by screen readers. It is designed to provide a hint to screen readers that content being removed from a web…",
7 | "author": "Rob Dodson",
8 | "date": "2018-06-20T12:24:53.789Z",
9 | "processed": true
10 | },
11 | {
12 | "id": "mdn",
13 | "url": "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute",
14 | "title": "Using the aria-relevant attribute",
15 | "description": "The aria-relevant attribute is an optional value used to describe what types of changes have occurred to an aria-live region, and which are relevant and should be announced. Any change that is not relevant acts in the same manner it would if the aria-live attribute were set to off.",
16 | "date": "2020-01-07T11:07:59.630Z",
17 | "author": "MDN",
18 | "image": "/mdn.png",
19 | "processed": true
20 | }
21 | ]
22 |
--------------------------------------------------------------------------------
/src/_data/entries/html/ariaroledescription.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "html5",
4 | "url": "https://html5accessibility.com/stuff/2020/10/06/micro-note-on-aria-roledescription/",
5 | "title": "Micro-note on aria-roledescription – HTML Accessibility",
6 | "date": "2020-10-06T14:43:53.000Z",
7 | "processed": true
8 | },
9 | {
10 | "id": "roselli",
11 | "url": "https://adrianroselli.com/2020/04/avoid-aria-roledescription.html",
12 | "title": "Avoid aria-roledescription",
13 | "description": "HTML has all sorts of built-in features that, when used correctly, are accessible, will localize, and which just work. For example, if I want a button, I use <button>, and a screen reader will announce it as button. For users in other languages, they will hear whatever is their word…",
14 | "date": "2020-08-07T16:41:32.000Z",
15 | "processed": true
16 | },
17 | {
18 | "id": "tink",
19 | "url": "https://tink.uk/using-the-aria-roledescription-attribute/",
20 | "title": "Using the aria-roledescription attribute - Tink - Léonie Watson",
21 | "date": "2018-12-13T00:00:00.000Z",
22 | "processed": true
23 | }
24 | ]
--------------------------------------------------------------------------------
/src/_data/entries/html/article.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "smashing",
4 | "url": "https://www.smashingmagazine.com/2020/01/html5-article-section/",
5 | "tags": [
6 | "accessibility"
7 | ],
8 | "title": "Why You Should Choose HTML5 <article> Over <section> — Smashing Magazine",
9 | "description": "In this article, Bruce Lawson explains what use we have of `` and how authors should mark up headings that are hugely important to AT users.",
10 | "date": "2020-01-07T11:30:00.000Z",
11 | "image": "/why-you-should-choose-html5-article-over-section-smashing-magazine.png",
12 | "author": "Bruce Lawson",
13 | "processed": true
14 | },
15 | {
16 | "id": "mdn",
17 | "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section",
18 | "title": "<section>: The Generic Section element",
19 | "description": "The HTML section element represents a standalone section — which doesn’t have a more specific semantic element to represent it — contained within an HTML document.",
20 | "date": "2019-08-19T08:54:47.538Z",
21 | "image": "/mdn.png",
22 | "author": "MDN",
23 | "processed": true
24 | }
25 | ]
26 |
--------------------------------------------------------------------------------
/src/_data/entries/html/data.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "csstricks",
4 | "url": "https://css-tricks.com/a-complete-guide-to-data-attributes/",
5 | "title": "A Complete Guide to Data Attributes | CSS-Tricks",
6 | "description": "Everything you ever wanted to know about data attributes in HTML, CSS, and JavaScript.",
7 | "author": "Chris Coyier",
8 | "date": "2020-02-18T23:55:47.000Z",
9 | "image": "/a-complete-guide-to-data-attributes-or-css-tricks.png",
10 | "processed": true
11 | }
12 | ]
13 |
--------------------------------------------------------------------------------
/src/_data/entries/html/details.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "rupert",
4 | "url": "https://daverupert.com/2019/12/why-details-is-not-an-accordion/",
5 | "tags": [
6 | "accessibility"
7 | ],
8 | "title": "Why <details> is Not an Accordion",
9 | "description": "tl;dr - <code><summary></code> is a button and buttons eat semantics",
10 | "image": "/why-details-is-not-an-accordion.png",
11 | "author": "Dave Rupert",
12 | "date": "2019-12-13T03:59:35.000Z",
13 | "processed": true
14 | },
15 | {
16 | "id": "roselli",
17 | "url": "https://adrianroselli.com/2019/04/details-summary-are-not-insert-control-here.html",
18 | "tags": [
19 | "accessibility"
20 | ],
21 | "title": "Details / Summary Are Not [insert control here]",
22 | "description": "Once major browsers started supporting <details> & <summary> developers immediately started to play with them to see what sorts of patterns they could enhance or replace. This is a good thing. Experimentation pushes boundaries, improves understanding. However, we need to be careful of christening th…",
23 | "date": "2019-12-07T03:59:35.000Z",
24 | "author": "Adrian Roselli",
25 | "processed": true
26 | },
27 | {
28 | "id": "ohara",
29 | "url": "https://www.scottohara.me/blog/2018/09/03/details-and-summary.html",
30 | "tags": [
31 | "accessibility"
32 | ],
33 | "title": "The details and summary elements | scottohara.me",
34 | "description": "The details and summary elements are two of HTML’s interactive elements and together are the elements that create a native disclosure widget.",
35 | "author": "Scott O'Hara",
36 | "date": "2018-09-03T00:00:00.000Z",
37 | "processed": true
38 | }
39 | ]
40 |
--------------------------------------------------------------------------------
/src/_data/entries/html/dialog.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "dialog_ohara",
4 | "url": "https://www.scottohara.me/blog/2019/03/05/open-dialog.html",
5 | "tags": [
6 | "accessibility"
7 | ],
8 | "title": "Having an open dialog | scottohara.me",
9 | "description": "I’ve written about building accessible modal dialogs a few times over the past five-ish years. Most recently I dissected the current state of modal dialog ac...",
10 | "date": "2019-03-05T00:00:00.000Z",
11 | "author": "Scott O'Hara",
12 | "processed": true
13 | },
14 | {
15 | "id": "mdn",
16 | "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog",
17 | "title": "<dialog>: The Dialog element",
18 | "description": "The HTML dialog element represents a dialog box or other interactive component, such as a dismissable alert, inspector, or subwindow.",
19 | "date": "2020-02-08T09:17:05.990Z",
20 | "image": "/mdn.png",
21 | "author": "MDN",
22 | "processed": true
23 | }
24 | ]
25 |
--------------------------------------------------------------------------------
/src/_data/entries/html/figure.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "ohara",
4 | "url": "https://www.scottohara.me/blog/2019/01/21/how-do-you-figure.html",
5 | "tags": [
6 | "accessibility"
7 | ],
8 | "title": "How do you figure? | scottohara.me",
9 | "description": "Introduced as part of HTML5, the figure and figcaption elements are meant to create a meaningful markup structure that: provides a descriptive label to a pi...",
10 | "date": "2019-01-21T00:00:00.000Z",
11 | "author": "Scott O'Hara",
12 | "processed": true
13 | },
14 | {
15 | "id": "mdn",
16 | "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure",
17 | "title": "<figure>: The Figure with Optional Caption element",
18 | "description": "The HTML figure (Figure With Optional Caption) element represents self-contained content, potentially with an optional caption, which is specified using the (figcaption) element.",
19 | "date": "2019-08-14T18:16:45.619Z",
20 | "image": "/mdn.png",
21 | "author": "MDN",
22 | "processed": true
23 | }
24 | ]
25 |
--------------------------------------------------------------------------------
/src/_data/entries/html/headings.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "hidde",
4 | "url": "https://hiddedevries.nl/en/blog/2020-09-05-when-there-is-no-content-between-headings",
5 | "title": "When there is no content between headings",
6 | "description": "The website of Hidde de Vries, freelance front-end developer.",
7 | "date": "2020-09-05T12:35:00.000Z",
8 | "processed": true
9 | },
10 | {
11 | "id": "paciello",
12 | "url": "https://developer.paciellogroup.com/blog/2020/03/heading-off-confusion-when-do-headings-fail-wcag/",
13 | "title": "Heading off confusion: When do headings fail WCAG?",
14 | "description": "Ed note: this post talks about evaluating headings in the context of an accessibility review while the following week’s post, Headings & Accessibility, talks about providing headings as visu",
15 | "date": "2020-03-24T13:56:50.000Z",
16 | "image": "/heading-off-confusion-when-do-headings-fail-wcag.jpg",
17 | "author": "David Swallow",
18 | "processed": true
19 | },
20 | {
21 | "id": "roselli",
22 | "url": "https://adrianroselli.com/2016/08/there-is-no-document-outline-algorithm.html",
23 | "title": "There Is No Document Outline Algorithm",
24 | "description": "I figured I would state the entire argument in the title. After all, as of this writing and the last seven-plus years, the statement is accurate as far as the browsers are concerned. I am penning this as sort of a follow-up to my post from 2013, The Truth about…",
25 | "date": "2020-02-10T14:38:27.000Z",
26 | "author": "Adrian Roselli",
27 | "processed": true
28 | }
29 | ]
--------------------------------------------------------------------------------
/src/_data/entries/html/inert.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "csstricks",
4 | "url": "https://css-tricks.com/focus-management-and-inert/",
5 | "title": "Focus management and inert | CSS-Tricks",
6 | "description": "Many forms of assistive technology use keyboard navigation to understand and take action on screen content. One way of navigating is via the Tab key. You",
7 | "date": "2020-10-19T13:56:30.000Z",
8 | "image": "/focus-management-and-inert-or-css-tricks.png",
9 | "processed": true
10 | },
11 | {
12 | "id": "mdn",
13 | "url": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert",
14 | "title": "inert",
15 | "description": "The HTMLElement property inert is a Boolean, when present, may make the browser “ignore” the element from assistive technologies, page search and text selection. This can be useful when building UIs such as modals where you would want to “trap” the focus inside the modal when it’s visible.",
16 | "date": "2020-10-20T05:02:13.228Z",
17 | "image": "/mdn.png",
18 | "author": "MDN",
19 | "processed": true
20 | },
21 | {
22 | "id": "polyfill",
23 | "url": "https://github.com/WICG/inert",
24 | "title": "WICG/inert",
25 | "description": "Polyfill for the inert attribute and property. Contribute to WICG/inert development by creating an account on GitHub.",
26 | "author": "WICG",
27 | "date": "2020-06-16T10:00:00.000Z",
28 | "processed": true
29 | }
30 | ]
--------------------------------------------------------------------------------
/src/_data/entries/html/loading.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "osmani",
4 | "url": "https://addyosmani.com/blog/lazy-loading/",
5 | "title": "Native image lazy-loading for the web!",
6 | "description": "In this post, we’ll look at the new loading attribute which brings native <img> and <iframe> lazy-loading to the web!. For the curious, here&...",
7 | "author": "Addy Osmani",
8 | "date": "2019-04-06T10:00:00.000Z",
9 | "image": "/native-image-lazy-loading-for-the-web.png",
10 | "tags": [
11 | "performance",
12 | "accessibility"
13 | ],
14 | "processed": true
15 | },
16 | {
17 | "id": "webdev",
18 | "url": "https://web.dev/native-lazy-loading/",
19 | "title": "Native lazy-loading for the web",
20 | "description": "This post covers the loading attribute and how it can be used to control the loading of images and iframes.",
21 | "date": "2019-08-06T10:00:00.000Z",
22 | "image": "/native-lazy-loading-for-the-web.png",
23 | "author": "Houssein Djirdeh",
24 | "tags": [
25 | "performance",
26 | "accessibility"
27 | ],
28 | "processed": true
29 | },
30 | {
31 | "id": "caniuse",
32 | "url": "https://caniuse.com/#feat=loading-lazy-attr",
33 | "title": "Can I use... Support tables for HTML5, CSS3, etc",
34 | "date": "2020-04-27T10:00:00.000Z",
35 | "image": "/caniuse.jpg",
36 | "author": "Can I use",
37 | "processed": true
38 | }
39 | ]
--------------------------------------------------------------------------------
/src/_data/entries/html/meter.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "ohara",
4 | "url": "https://scottaohara.github.io/a11y_styled_form_controls/src/meter/",
5 | "tags": [
6 | "accessibility"
7 | ],
8 | "title": "Styled Meter",
9 | "author": "Scott O'Hara",
10 | "date": "2018-07-30T08:41:51.996Z",
11 | "processed": true
12 | },
13 | {
14 | "id": "mdn",
15 | "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meter",
16 | "title": "<meter>: The HTML Meter element",
17 | "description": "The HTML meter element represents either a scalar value within a known range or a fractional value.",
18 | "date": "2020-03-09T08:41:51.996Z",
19 | "image": "/mdn.png",
20 | "author": "MDN",
21 | "processed": true
22 | }
23 | ]
24 |
--------------------------------------------------------------------------------
/src/_data/entries/html/multiple.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "mdn",
4 | "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/multiple",
5 | "title": "HTML attribute: multiple",
6 | "description": "The Boolean multiple attribute, if set, means the form control accepts one or more values. Valid for the email and file input types and the select, the manner by which the user opts for multiple values depends on the form control.",
7 | "date": "2019-11-15T13:47:46.910Z",
8 | "image": "/mdn.png",
9 | "author": "MDN",
10 | "processed": true
11 | }
12 | ]
13 |
--------------------------------------------------------------------------------
/src/_data/entries/html/nav.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "htmhell",
4 | "url": "https://www.htmhell.dev/18-main-divigation/",
5 | "title": "HTMHell - #18 main divigation",
6 | "description": "A collection of bad practices in HTML, copied from real websites.",
7 | "date": "2020-03-22T00:00:00.000Z",
8 | "image": "/htmhell-18-main-divigation.png",
9 | "processed": true
10 | },
11 | {
12 | "id": "mdn",
13 | "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav",
14 | "title": "<nav>: The Navigation Section element",
15 | "description": "The HTML nav element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes.",
16 | "date": "2019-03-23T19:17:28.323Z",
17 | "image": "/mdn.png",
18 | "author": "MDN",
19 | "processed": true
20 | }
21 | ]
22 |
--------------------------------------------------------------------------------
/src/_data/entries/html/placeholder.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "htmhell",
4 | "url": "https://www.htmhell.dev/24-a-placeholder-is-not-a-label/",
5 | "title": "HTMHell - #24 A placeholder is not a label",
6 | "description": "A collection of bad practices in HTML, copied from real websites.",
7 | "date": "2020-11-29T00:00:00.000Z",
8 | "image": "/htmhell-24-a-placeholder-is-not-a-label.png",
9 | "processed": true
10 | },
11 | {
12 | "id": "nn",
13 | "url": "https://www.nngroup.com/articles/form-design-placeholders/",
14 | "title": "Placeholders in Form Fields Are Harmful",
15 | "description": "Labels or sample text inside a form field makes it difficult for people to remember what information belongs in that field once they start data entry.",
16 | "date": "2018-09-10T00:00:00.000Z",
17 | "image": "/placeholders-in-form-fields-are-harmful.png",
18 | "processed": true
19 | },
20 | {
21 | "id": "silver",
22 | "url": "https://medium.com/simple-human/10-reasons-why-placeholders-are-problematic-f8079412b960",
23 | "title": "11 reasons why placeholders are problematic",
24 | "description": "Since placeholders arrived on the scene, they have been rapidly adopted to provide hints and instructions to help users fill in forms. Whilst this sounds good, it is actually problematic due to the…",
25 | "author": "Adam Silver",
26 | "date": "2018-06-13T00:25:23.797Z",
27 | "image": "/11-reasons-why-placeholders-are-problematic.jpeg",
28 | "processed": true
29 | },
30 | {
31 | "id": "sm",
32 | "url": "https://www.smashingmagazine.com/2018/06/placeholder-attribute/",
33 | "title": "Don’t Use The Placeholder Attribute — Smashing Magazine",
34 | "description": "The placeholder attribute contains a surprising amount of issues that prevent it from delivering on what it promises. Let’s clarify why you need to stop using it.",
35 | "date": "2018-06-20T11:45:26.000Z",
36 | "image": "/dont-use-the-placeholder-attribute-smashing-magazine.png",
37 | "processed": true
38 | },
39 | {
40 | "id": "webaxe",
41 | "url": "http://www.webaxe.org/floated-labels-still-suck/",
42 | "title": "Floated Labels Still Suck | Web Axe",
43 | "author": "Dennis",
44 | "date": "2014-10-30T23:05:53.000Z",
45 | "processed": true
46 | }
47 | ]
48 |
--------------------------------------------------------------------------------
/src/_data/entries/html/progress.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "progress_ohara",
4 | "url": "https://scottaohara.github.io/a11y_styled_form_controls/src/progress-bar/",
5 | "tags": [
6 | "accessibility"
7 | ],
8 | "title": "Styled Progress Bar",
9 | "author": "Scott O'Hara",
10 | "date": "2018-07-28T08:41:51.996Z",
11 | "processed": true
12 | },
13 | {
14 | "id": "mdn",
15 | "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress",
16 | "title": "<progress>: The Progress Indicator element",
17 | "description": "The HTML progress element displays an indicator showing the completion progress of a task, typically displayed as a progress bar.",
18 | "date": "2020-03-09T08:43:21.964Z",
19 | "image": "/mdn.png",
20 | "author": "MDN",
21 | "processed": true
22 | }
23 | ]
24 |
--------------------------------------------------------------------------------
/src/_data/entries/html/rel.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "bynens",
4 | "url": "https://mathiasbynens.github.io/rel-noopener/",
5 | "tags": [
6 | "security"
7 | ],
8 | "title": "About rel=noopener",
9 | "author": "Mathias Bynens",
10 | "processed": true
11 | }
12 | ]
13 |
--------------------------------------------------------------------------------
/src/_data/entries/html/section.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "htmlhell2",
4 | "url": "https://www.htmhell.dev/tips/the-section-element/",
5 | "title": "the section element - HTMHell",
6 | "description": "Use the section element to mark up a grouping of related content, typically introduced with a heading.",
7 | "image": "/the-section-element-htmhell.png",
8 | "processed": true
9 | },
10 | {
11 | "id": "ohara",
12 | "url": "https://www.scottohara.me/blog/2021/07/16/section.html",
13 | "title": "Accessibility of the section element | scottohara.me",
14 | "description": "The <section> element semantically represents a grouping of content that has an overarching theme. It is one of the HTML elements that represent sectio...",
15 | "date": "2021-07-16T00:00:00.000Z",
16 | "processed": true
17 | },
18 | {
19 | "id": "smashing",
20 | "url": "https://www.smashingmagazine.com/2020/01/html5-article-section/",
21 | "tags": [
22 | "accessibility"
23 | ],
24 | "title": "Why You Should Choose HTML5 <article> Over <section> — Smashing Magazine",
25 | "description": "In this article, Bruce Lawson explains what use we have of `` and how authors should mark up headings that are hugely important to AT users.",
26 | "date": "2020-01-07T11:30:00.000Z",
27 | "image": "/why-you-should-choose-html5-article-over-section-smashing-magazine.png",
28 | "author": "Bruce Lawson",
29 | "processed": true
30 | },
31 | {
32 | "id": "htmhell",
33 | "url": "https://www.htmhell.dev/10-section-is-no-replacement-for-div/",
34 | "title": "HTMHell - #10 <section> is no replacement for <div>",
35 | "description": "A collection of bad practices in HTML, copied from real websites.",
36 | "date": "2019-11-22T00:00:00.000Z",
37 | "image": "/htmhell-10-section-is-no-replacement-for-div.png",
38 | "processed": true
39 | },
40 | {
41 | "id": "mdn",
42 | "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section",
43 | "title": "<section>: The Generic Section element",
44 | "description": "The HTML section element represents a standalone section — which doesn’t have a more specific semantic element to represent it — contained within an HTML document.",
45 | "date": "2019-08-19T08:54:47.538Z",
46 | "image": "/mdn.png",
47 | "author": "MDN",
48 | "processed": true
49 | }
50 | ]
--------------------------------------------------------------------------------
/src/_data/entries/html/svg.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "csstricksa11y",
4 | "url": "https://css-tricks.com/accessible-svgs/",
5 | "tags": [
6 | "accessibility"
7 | ],
8 | "title": "Accessible SVGs | CSS-Tricks",
9 | "description": "Scalable Vector Graphic (SVG) is emerging as the preferred graphic format to use on the web today. Are you abandoning the icon font or replacing old pg,",
10 | "date": "2016-08-28T17:02:11.000Z",
11 | "author": "Heather Migliorisi",
12 | "processed": true
13 | }
14 | ]
15 |
--------------------------------------------------------------------------------
/src/_data/entries/html/title.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "24a11y",
4 | "url": "https://www.24a11y.com/2017/the-trials-and-tribulations-of-the-title-attribute/",
5 | "tags": [
6 | "accessibility"
7 | ],
8 | "title": "The Trials and Tribulations of the Title Attribute - 24 Accessibility",
9 | "description": "Scott O’Hara returns, not with prose, but with a little history on the title attribute, it’s unintended misuse by developers, and where it can and should be used to improve the accessibility on your website.",
10 | "date": "2018-10-12T11:16:14.000Z",
11 | "image": "/the-trials-and-tribulations-of-the-title-attribute-24-accessibility.gif",
12 | "processed": true
13 | },
14 | {
15 | "id": "paciello",
16 | "url": "https://developer.paciellogroup.com/blog/2010/11/using-the-html-title-attribute/",
17 | "tags": [
18 | "accessibility"
19 | ],
20 | "title": "Using the HTML title attribute – Updated March 2020",
21 | "description": "Note: This post has the same content as our 2013 post. They each originally addressed different aspects of the title attribute, but now they match. We are keeping both of them to account for inb",
22 | "date": "2020-03-18T12:54:36.000Z",
23 | "image": "/using-the-html-title-attribute-–-updated-march-2020.png",
24 | "processed": true
25 | }
26 | ]
27 |
--------------------------------------------------------------------------------
/src/_data/entries/html/typedate.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "hassell",
4 | "url": "https://www.hassellinclusion.com/blog/input-type-date-ready-for-use/",
5 | "tags": [
6 | "accessibility"
7 | ],
8 | "title": "Is input type=“date” ready for use in accessible websites? - Hassell Inclusion",
9 | "description": "One of the ‘new’ HTML5 elements - input type=“date” - was intended to simplify the collection of dates on websites, and to reduce user errors whilst doing so. So is it well supported? And does using it help make forms more accessible? We took date inputs for a test drive with different browsers and …",
10 | "date": "2020-03-01T09:31:57.000Z",
11 | "image": "/is-input-typedate-ready-for-use-in-accessible-websites-hassell-inclusion.jpg",
12 | "processed": true
13 | },
14 | {
15 | "id": "mdn",
16 | "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date",
17 | "title": "<input type=“date”>",
18 | "description": "input elements of type=“date” create input fields that let the user enter a date, either with a textbox that validates the input or a special date picker interface.",
19 | "date": "2020-03-19T22:00:07.686Z",
20 | "author": "MDN",
21 | "image": "/mdn.png",
22 | "processed": true
23 | }
24 | ]
25 |
--------------------------------------------------------------------------------
/src/_data/entries/html/typenumber.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "numbergov",
4 | "url": "https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/",
5 | "tags": [
6 | "accessibility"
7 | ],
8 | "title": "Why the GOV.UK Design System team changed the input type for numbers",
9 | "description": "We take a look at why the GOV.UK Design System changed the element it uses for inputting numbers, making it more accessible and easier to use",
10 | "author": "Hanna Laakso, GDS, Frontend Developer",
11 | "date": "2020-02-24T11:37:44.000Z",
12 | "image": "/why-the-govuk-design-system-team-changed-the-input-type-for-numbers.png",
13 | "processed": true
14 | },
15 | {
16 | "id": "number_frost",
17 | "url": "https://bradfrost.com/blog/post/you-probably-dont-need-input-typenumber/",
18 | "tags": [
19 | "ux"
20 | ],
21 | "title": "You probably don’t need input type=“number”",
22 | "description": "Last week I got a call from my bank regarding a wire transfer I had just scheduled. The customer support guy had me repeat everything back to him because there seemed to be a problem with the information. “Hmmmm, everything you said is right right except the last 3 digits of the account number.”",
23 | "author": "Brad Frost",
24 | "date": "2019-03-19T01:06:29.000Z",
25 | "image": "/you-probably-dont-need-input-typenumber.png",
26 | "processed": true
27 | },
28 | {
29 | "id": "mdn",
30 | "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number",
31 | "title": "<input type=“number”>",
32 | "description": "input elements of type number are used to let the user enter a number. They include built-in validation to reject non-numerical entries.",
33 | "date": "2020-03-15T01:40:09.979Z",
34 | "image": "/mdn.png",
35 | "author": "MDN",
36 | "processed": true
37 | }
38 | ]
39 |
--------------------------------------------------------------------------------
/src/_data/entries/html/typerange.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "lindesey",
4 | "url": "https://www.a11ywithlindsey.com/blog/creating-accessible-range-slider-css",
5 | "tags": [
6 | "accessibility"
7 | ],
8 | "title": "Creating an Accessible Range Slider with CSS",
9 | "description": "I’ve always loved exploring how to make semantic, accessible elements aesthetically pleasing. And yes, it is possible. Challenging myself to…",
10 | "image": "/creating-an-accessible-range-slider-with-css.png",
11 | "author": "Lindsey Kopacz",
12 | "processed": true
13 | },
14 | {
15 | "id": "ohara",
16 | "url": "https://scottaohara.github.io/a11y_styled_form_controls/src/range-slider/",
17 | "title": "Styled Range Slider",
18 | "author": "Scott O'Hara",
19 | "processed": true
20 | },
21 | {
22 | "id": "csstricks",
23 | "url": "https://css-tricks.com/value-bubbles-for-range-inputs/",
24 | "title": "Value Bubbles for Range Inputs | CSS-Tricks",
25 | "description": "HTML5 range inputs, in supported browsers and by design, don’t show the user the actual value they are submitting. If you want to use the cool slider, but show the value, you’ll have to do that yourself. Here we use the output element and jQuery to show the current value in a bubble that hovers abov…",
26 | "date": "2020-03-26T13:31:13.000Z",
27 | "image": "/value-bubbles-for-range-inputs-or-css-tricks.png",
28 | "author": "Chris Coyier",
29 | "processed": true
30 | },
31 | {
32 | "id": "mdn",
33 | "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range",
34 | "title": "<input type=“range”>",
35 | "description": "input elements of type range let the user specify a numeric value which must be no less than a given value, and no more than another given value. The precise value, however, is not considered important. This is typically represented using a slider or dial control rather than a text entry box like th…",
36 | "date": "2020-02-21T10:38:40.117Z",
37 | "image": "/mdn.png",
38 | "author": "MDN",
39 | "processed": true
40 | }
41 | ]
--------------------------------------------------------------------------------
/src/_data/entries/html/typesearch.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "roselli",
4 | "url": "https://adrianroselli.com/2019/07/ignore-typesearch.html",
5 | "tags": [
6 | "accessibility"
7 | ],
8 | "title": "Maybe Ignore type=search",
9 | "description": "Another case of the headline saying it all. If you have a valid, accessible search field (with a useful, sensible label) then you can probably ignore type=”search” and use type=”text” instead. I made a code sample you can use for testing in your preferred set-up; it is what I used…",
10 | "date": "2019-07-20T14:52:23.000Z",
11 | "processed": true
12 | },
13 | {
14 | "id": "mdn",
15 | "url": " https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search",
16 | "title": "<input type=“search”>",
17 | "description": "input elements of type search are text fields designed for the user to enter search queries into. These are functionally identical to text inputs, but may be styled differently by the user agent.",
18 | "date": "2019-12-19T20:51:49.970Z",
19 | "image": "/mdn.png",
20 | "author": "MDN",
21 | "processed": true
22 | }
23 | ]
24 |
--------------------------------------------------------------------------------
/src/_data/entries/html/video.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "vinkle",
4 | "url": "https://scottvinkle.me/blogs/blog/how-accessible-is-the-html-video-player",
5 | "tags": [
6 | "accessibility"
7 | ],
8 | "title": "How accessible is the HTML video player?",
9 | "description": "Comparing keyboard and screen reader accessibility of native video players.",
10 | "author": "Scott Vinkle",
11 | "date": "2019-12-20T00:04:00.000Z",
12 | "image": "/how-accessible-is-the-html-video-player.jpg",
13 | "processed": true
14 | },
15 | {
16 | "id": "mdn",
17 | "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video",
18 | "title": "<video>: The Video Embed element",
19 | "description": "The HTML Video element (video) embeds a media player which supports video playback into the document. You can use video for audio content as well, but the audio element may provide a more appropriate user experience.",
20 | "date": "2020-02-22T23:56:54.947Z",
21 | "author": "MDN",
22 | "image": "/mdn.png",
23 | "processed": true
24 | }
25 | ]
26 |
--------------------------------------------------------------------------------
/src/_data/entries/js/async.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "zellwk",
4 | "url": "https://zellwk.com/blog/async-await-in-loops/",
5 | "title": "JavaScript async and await in loops | Zell Liew",
6 | "description": "I share some gotchas you have to watch out for when you use async and await in loops.",
7 | "date": "2019-05-01T10:00:00.000Z",
8 | "author": "Zell Liew",
9 | "processed": true
10 | },
11 | {
12 | "id": "mdn",
13 | "url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/async_function",
14 | "title": "async function expression",
15 | "description": "The async function keyword can be used to define async functions inside expressions.",
16 | "date": "2020-03-13T15:41:52.383Z",
17 | "image": "/mdn.png",
18 | "author": "MDN",
19 | "processed": true
20 | }
21 | ]
22 |
--------------------------------------------------------------------------------
/src/_data/entries/js/await.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "zellwk",
4 | "url": "https://zellwk.com/blog/async-await-in-loops/",
5 | "title": "JavaScript async and await in loops | Zell Liew",
6 | "description": "I share some gotchas you have to watch out for when you use async and await in loops.",
7 | "date": "2019-05-01T10:00:00.000Z",
8 | "author": "Zell Liew",
9 | "processed": true
10 | },
11 | {
12 | "id": "mathiasbynens",
13 | "url": "https://mathiasbynens.be/notes/async-stack-traces",
14 | "title": "Asynchronous stack traces: why await beats Promise#then() · Mathias Bynens",
15 | "author": "Mathias Bynens",
16 | "date": "2017-10-02T00:00:00.000Z",
17 | "processed": true
18 | },
19 | {
20 | "id": "mdn",
21 | "url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await",
22 | "title": "await",
23 | "description": "The await operator is used to wait for a Promise. It can only be used inside an async function.",
24 | "author": "MDN",
25 | "date": "2020-03-04T04:30:58.026Z",
26 | "image": "/mdn.png",
27 | "processed": true
28 | }
29 | ]
30 |
--------------------------------------------------------------------------------
/src/_data/entries/js/stringify.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "pawel",
4 | "url": "https://pawelgrzybek.com/til-the-power-of-json-stringify-replacer-parameter/",
5 | "title": "TIL — The power of JSON.stringify replacer parameter | pawelgrzybek.com",
6 | "description": "I had a challenging problem with JSON stringify that ignored my data in a place where I expected sets of values. Luckily I managed to solve it in a very elegant way.",
7 | "author": "Pawel Grzybek - https://pawelgrzybek.com/",
8 | "date": "2019-10-11T00:00:00.000Z",
9 | "image": "/til-the-power-of-jsonstringify-replacer-parameter-or-pawelgrzybekcom.jpg",
10 | "processed": true
11 | },
12 | {
13 | "id": "mdn",
14 | "url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify",
15 | "title": "JSON.stringify()",
16 | "description": "The JSON.stringify() method converts a JavaScript object or value to a JSON string, optionally replacing values if a replacer function is specified or optionally including only the specified properties if a replacer array is specified.",
17 | "date": "2020-01-15T03:22:29.194Z",
18 | "image": "/mdn.png",
19 | "author": "MDN",
20 | "processed": true
21 | }
22 | ]
23 |
--------------------------------------------------------------------------------
/src/_data/project.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | env: process.env.ELEVENTY_ENV,
3 | site_url: "https://www.frontendbookmarks.com",
4 | site_title: "Front-end Bookmarks",
5 | site_description: "A collection of articles and talks about HTML, CSS, and Javascript."
6 | };
7 |
--------------------------------------------------------------------------------
/src/_includes/feed.njk:
--------------------------------------------------------------------------------
1 |
2 |
3 | {%- set absoluteFeedUrl -%}{{ page.url | url | absoluteUrl(project.site_url) }}{%- endset -%}
4 | {%- set collection = collections[collectionName] -%}
5 |
6 | {{ absoluteFeedUrl }}/
7 | {{ title or project.site_title }}
8 | {{ description or project.site_description }}
9 |
10 |
11 |
12 | {{ project.site_title }}
13 |
14 |
15 | {% if collection %}
16 | {{ collection | rssLastUpdatedDate }}
17 | {% endif %}
18 |
19 | {%- for entry in collection | reverse -%}
20 | {%- set absoluteEntryUrl -%}{{ entry.url | url | absoluteUrl(project.site_url) }}{%- endset -%}
21 |
22 | {{ entry.data.title }}
23 |
24 | {{ entry.date | rssDate }}
25 | {{ absoluteEntryUrl }}
26 |
27 | {% if entry.data.definition %}
28 |
12 | Articles and talks about CSS properties.
13 |
14 |
15 | {{macros.linklist("Featured properties", "css/properties", "properties")}}
16 |
--------------------------------------------------------------------------------
/src/languages/css/properties/line-height.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: line-height
3 | short_desc: "Specifies the height that is used in the calculation of the line box height."
4 | tags:
5 | - css
6 | - properties
7 | - entry
8 | permalink: css/properties/{{ title | slug }}/index.html
9 | definition:
10 | text: "On a block container element whose content is composed of inline-level elements, 'line-height' specifies the minimal height of line boxes within the element. On a non-replaced inline element, 'line-height' specifies the height that is used in the calculation of the line box height."
11 | cite:
12 | text: "10.8 Line height calculations: the 'line-height' and 'vertical-align' properties"
13 | url: https://www.w3.org/TR/CSS21/visudet.html#propdef-line-height
14 | links: "line-height"
15 | date: 2020-09-09
16 | sm_img: images/sm/sm_lineheight.jpg
17 | ---
18 |
19 |
Code sample
20 |
21 | ```css
22 | body {
23 | line-height: 1.7;
24 | }
25 | ```
26 |
--------------------------------------------------------------------------------
/src/languages/css/properties/list-style-type.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: list-style-type
3 | short_desc: "Specifies a list item’s marker."
4 | tags:
5 | - css
6 | - properties
7 | - entry
8 | permalink: css/properties/{{ title | slug }}/index.html
9 | definition:
10 | text: "Specifies the marker string, which is used to fill the list item’s marker when its content value is normal and there is no marker image."
11 | cite:
12 | text: "3.4. Text-based Markers: the list-style-type property"
13 | url: https://www.w3.org/TR/css-lists-3/#text-markers
14 | links: "liststyletype"
15 | related:
16 | - 'css.marker.csstricks'
17 | date: 2020-05-06
18 | ---
19 |
20 |
25 | ```
26 |
--------------------------------------------------------------------------------
/src/languages/html/attributes/aria-details.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: aria-details
3 | short_desc: "Identifies the element that provides a detailed, extended description for the object."
4 | tags:
5 | - html
6 | - attributes
7 | - entry
8 | permalink: html/attributes/{{ title | slug }}/index.html
9 | definition:
10 | text: "Identifies the element that provides a detailed, extended description for the object."
11 | cite:
12 | text: "aria-details (property)"
13 | url: https://www.w3.org/TR/wai-aria/#aria-details
14 | links: "ariadetails"
15 | date: 2020-04-10
16 | ---
17 |
18 |
Code sample
19 |
20 | ```html
21 |
22 |
23 | Example
24 |
25 | The Pythagorean Theorem is a relationship in Euclidean Geometry between the three sides of
26 | a right triangle, where the square of the hypotenuse is the sum of the squares of the two
27 | opposing sides.
28 |
29 |
30 | ```
31 |
--------------------------------------------------------------------------------
/src/languages/html/attributes/aria-flowto.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: aria-flowto
3 | short_desc: Allows assistive technology to override the general default of reading in document source order.trigger. "
4 | tags:
5 | - html
6 | - attributes
7 | - entry
8 | permalink: html/attributes/{{ title | slug }}/index.html
9 | definition:
10 | text: "Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order."
11 | cite:
12 | text: "aria-flowto (property)"
13 | url: https://www.w3.org/TR/wai-aria/#aria-flowto
14 | links: "ariaflowto"
15 | date: 2020-04-18
16 | sm_img: images/sm/sm_aria-flowto.jpg
17 | ---
18 |
19 |
29 | ```
30 |
--------------------------------------------------------------------------------
/src/languages/html/attributes/aria-label.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: aria-label
3 | short_desc: "Defines a string value that labels the current element. "
4 | tags:
5 | - html
6 | - attributes
7 | - entry
8 | permalink: html/attributes/{{ title | slug }}/index.html
9 | definition:
10 | text: "Defines a string value that labels the current element."
11 | cite:
12 | text: "aria-label (property)"
13 | url: https://www.w3.org/TR/wai-aria/#aria-label
14 | links: "arialabel"
15 | related:
16 | - "html.a.htmhell"
17 | date: 2021-01-03
18 | ---
19 |
20 |
Code sample
21 |
22 | ```html
23 |
26 | ```
27 |
--------------------------------------------------------------------------------
/src/languages/html/attributes/aria-labelledby.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: aria-labelledby
3 | short_desc: "Identifies the element (or elements) that labels the current element."
4 | tags:
5 | - html
6 | - attributes
7 | - entry
8 | permalink: html/attributes/{{ title | slug }}/index.html
9 | definition:
10 | text: "Identifies the element (or elements) that labels the current element."
11 | cite:
12 | text: "aria-labelledby (property)"
13 | url: https://www.w3.org/TR/wai-aria/#aria-labelledby
14 | links: "arialabelledby"
15 | related:
16 | - 'html.svg.csstricksa11y'
17 | date: 2021-01-03
18 | ---
19 |
20 |
Code sample
21 |
22 | ```html
23 |
27 | ```
28 |
--------------------------------------------------------------------------------
/src/languages/html/attributes/aria-relevant.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: aria-relevant
3 | short_desc: Indicates what notifications the user agent will trigger. "
4 | tags:
5 | - html
6 | - attributes
7 | - entry
8 | permalink: html/attributes/{{ title | slug }}/index.html
9 | definition:
10 | text: "Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified."
11 | cite:
12 | text: "aria-relevant (property)"
13 | url: https://www.w3.org/TR/wai-aria/#aria-relevant
14 | links: "ariarelevant"
15 | date: 2020-04-14
16 | ---
17 |
18 |
Code sample
19 |
20 | ```html
21 |
22 | ```
23 |
--------------------------------------------------------------------------------
/src/languages/html/attributes/aria-roledescription.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: aria-roledescription
3 | short_desc: "Defines a human-readable, author-localized description for the role of an element."
4 | tags:
5 | - html
6 | - attributes
7 | - entry
8 | permalink: html/attributes/{{ title | slug }}/index.html
9 | definition:
10 | text: "Identifies the element (or elements) that describes the object. "
11 | cite:
12 | text: "aria-roledescription (property)"
13 | url: https://www.w3.org/TR/wai-aria-1.1/#aria-roledescription
14 | links: "ariaroledescription"
15 | date: 2020-10-23
16 | sm_img: images/sm/sm_aria-roledesc.jpg
17 | ---
18 |
19 |
Code sample
20 |
21 | ```html
22 |
23 |
Quarterly Report
24 |
25 |
26 | ```
27 |
--------------------------------------------------------------------------------
/src/languages/html/attributes/data-.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: data-
3 | short_desc: "Stores data in a custom attribute."
4 | tags:
5 | - html
6 | - attributes
7 | - entry
8 | permalink: html/attributes/{{ title | slug }}/index.html
9 | definition:
10 | text: "Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements."
11 | cite:
12 | text: "3.2.5.7. Embedding custom non-visible data with the data-* attributes"
13 | url: https://www.w3.org/TR/html52/dom.html#embedding-custom-non-visible-data-with-the-data-attributes
14 | links: "data"
15 | date: 2020-04-10
16 | ---
17 |
18 |
Code sample
19 |
20 | ```html
21 |
22 | Bob
23 |
24 | ```
25 |
--------------------------------------------------------------------------------
/src/languages/html/attributes/index.njk:
--------------------------------------------------------------------------------
1 | ---
2 | title: HTML Attributes
3 | short_desc: Articles and talks about HTML attributes.
4 | layout: overview.njk
5 | permalink: html/attributes/index.html
6 | changefreq: weekly
7 | sm_img: assets/img/sm_html.jpg
8 | ---
9 | {% import "partials/macros.njk" as macros with context %}
10 |
11 |
12 | Articles and talks about HTML attributes.
13 |
14 |
15 | {{macros.linklist("Featured attributes", "html/attributes", "attributes")}}
16 |
--------------------------------------------------------------------------------
/src/languages/html/attributes/inert.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: inert
3 | short_desc: "Indicates that the element is to be made inert."
4 | tags:
5 | - html
6 | - attributes
7 | - entry
8 | permalink: html/attributes/{{ title | slug }}/index.html
9 | definition:
10 | text: "The inert attribute is a boolean attribute that indicates, by its presence, that the element and all its shadow-including descendants is to be made inert."
11 | cite:
12 | text: "6.2.1 The inert attribute"
13 | url: https://whatpr.org/html/4288/interaction.html#the-inert-attribute
14 | links: "inert"
15 | date: 2020-10-20
16 | sm_img: images/sm/sm_inert.jpg
17 | ---
18 |
19 |
Code samples
20 |
21 | ```html
22 |
23 |
24 |
25 | ```
26 |
--------------------------------------------------------------------------------
/src/languages/html/attributes/lang.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: lang
3 | short_desc: "Specifies the primary language for the page or an element."
4 | tags:
5 | - html
6 | - attributes
7 | - entry
8 | permalink: html/attributes/{{ title | slug }}/index.html
9 | definition:
10 | text: "The lang attribute (in no namespace) specifies the primary language for the element’s contents and for any of the element’s attributes that contain text."
11 | cite:
12 | text: "3.2.5.2. The lang and xml:lang attributes"
13 | url: https://www.w3.org/TR/html52/dom.html#the-lang-and-xmllang-attributes
14 | links: "lang"
15 | date: 2021-01-01
16 | sm_img: images/sm/sm_lang.jpg
17 | ---
18 |
19 |
28 | ```
29 |
--------------------------------------------------------------------------------
/src/languages/html/attributes/loading.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: loading
3 | short_desc: "Enables form controls to accept one or more values."
4 | tags:
5 | - html
6 | - attributes
7 | - entry
8 | permalink: html/attributes/{{ title | slug }}/index.html
9 | definition:
10 | text: "The attribute directs the user agent to fetch a resource immediately or to defer fetching until some conditions associated with the element are met, according to the attribute's current state."
11 | cite:
12 | text: "2.6.7 Lazy loading attributes"
13 | url: https://html.spec.whatwg.org/multipage/urls-and-fetching.html#lazy-loading-attributes
14 | links: "loading"
15 | date: 2020-04-29
16 | sm_img: images/sm/sm_loading.jpg
17 | ---
18 |
19 |
Code sample
20 |
21 | ```html
22 |
23 | ```
24 |
--------------------------------------------------------------------------------
/src/languages/html/attributes/multiple.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: multiple
3 | short_desc: "Enables form controls to accept one or more values."
4 | tags:
5 | - html
6 | - attributes
7 | - entry
8 | permalink: html/attributes/{{ title | slug }}/index.html
9 | definition:
10 | text: "The multiple attribute is a boolean attribute. If the attribute is present, then the select element represents a control for selecting zero or more options from the list of options."
11 | cite:
12 | text: "4.11.4. The dialog element"
13 | url: https://www.w3.org/TR/html52/single-page.html#the-select-element
14 | links: "multiple"
15 | related:
16 | - 'html.select.selectpoison2'
17 | date: 2020-04-10
18 | ---
19 |
20 |
Code sample
21 |
22 | ```html
23 |
24 |
29 | ```
30 |
--------------------------------------------------------------------------------
/src/languages/html/attributes/placeholder.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: placeholder
3 | short_desc: "Represents a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value."
4 | tags:
5 | - html
6 | - attributes
7 | - entry
8 | permalink: html/attributes/{{ title | slug }}/index.html
9 | definition:
10 | text: "Represents a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value."
11 | cite:
12 | text: "4.10.5.3.10 The placeholder attribute"
13 | url: https://html.spec.whatwg.org/#the-placeholder-attribute
14 | links: "placeholder"
15 | date: 2021-01-03
16 | ---
17 |
18 |
Code sample
19 |
20 | ```html
21 |
22 |
23 | ```
24 |
--------------------------------------------------------------------------------
/src/languages/html/attributes/rel.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'rel'
3 | short_desc: "Defines the type of link."
4 | tags:
5 | - html
6 | - attributes
7 | - entry
8 | permalink: html/attributes/{{ title | slug }}/index.html
9 | definition:
10 | text: "The rel attribute on a and area elements controls what kinds of links the elements create."
11 | cite:
12 | text: "4.8.2. Links created by a and area elements."
13 | url: "https://www.w3.org/TR/html52/single-page.html#element-attrdef-a-rel"
14 | links: "rel"
15 | date: 2020-04-10
16 | ---
17 |
18 |
Code sample
19 |
20 | ```html
21 |
22 |
23 | ```
24 |
--------------------------------------------------------------------------------
/src/languages/html/attributes/tabindex.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: tabindex
3 | short_desc: Sets tab order and defines whether an element can be focused or not."
4 | tags:
5 | - html
6 | - attributes
7 | - entry
8 | permalink: html/attributes/{{ title | slug }}/index.html
9 | definition:
10 | text: "The tabindex content attribute allows authors to indicate that an element is supposed to be focusable, whether it is supposed to be reachable using sequential focus navigation and, optionally, to suggest where in the sequential focus navigation order the element appears."
11 | cite:
12 | text: "5.4.3. The tabindex attribute"
13 | url: https://www.w3.org/TR/html52/editing.html#the-tabindex-attribute
14 | links: "tabindex"
15 | date: 2020-04-18
16 | sm_img: images/sm/sm_tabindex.jpg
17 | ---
18 |
19 |
Code sample
20 |
21 | ```html
22 |
23 |
24 | ```
25 |
--------------------------------------------------------------------------------
/src/languages/html/attributes/title.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: title
3 | short_desc: "Represents advisory information for the element."
4 | tags:
5 | - html
6 | - attributes
7 | - entry
8 | permalink: html/attributes/{{ title | slug }}/index.html
9 | definition:
10 | text: "The title attribute represents advisory information for the element, such as would be appropriate for a tooltip."
11 | cite:
12 | text: "3.2.5.1. The title attribute"
13 | url: https://www.w3.org/TR/html52/dom.html#the-title-attribute
14 | links: "title"
15 | date: 2020-04-10
16 | ---
17 |
18 |
Code sample
19 |
20 | ```html
21 | JS
22 | ```
23 |
--------------------------------------------------------------------------------
/src/languages/html/attributes/typedate.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'type="date"'
3 | title_clean: 'typedate'
4 | short_desc: "A control for setting the element’s value to a specific date"
5 | tags:
6 | - html
7 | - attributes
8 | - entry
9 | permalink: html/attributes/{{ title_clean | slug }}/index.html
10 | definition:
11 | text: "The input element represents a control for setting the element’s value to a string representing a specific date."
12 | cite:
13 | text: "4.10.5.1.7. Date state (type=date)"
14 | url: "https://www.w3.org/TR/html52/single-page.html#date-state-typedate"
15 | links: "typedate"
16 | date: 2020-04-10
17 | ---
18 |
19 |
Code sample
20 |
21 | ```html
22 |
23 |
24 | ```
25 |
--------------------------------------------------------------------------------
/src/languages/html/attributes/typenumber.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'type="number"'
3 | title_clean: 'typenumber'
4 | short_desc: "A control for setting the element’s value to a string representing a number."
5 | tags:
6 | - html
7 | - attributes
8 | - entry
9 | permalink: html/attributes/{{ title_clean | slug }}/index.html
10 | definition:
11 | text: "The input element represents a control for setting the element’s value to a string representing a number."
12 | cite:
13 | text: "4.10.5.1.12. Number state (type=number)"
14 | url: https://www.w3.org/TR/html52/single-page.html#number-state-typenumber
15 | links: "typenumber"
16 | date: 2020-04-10
17 | ---
18 |
19 |
Code sample
20 |
21 | ```html
22 |
26 | ```
27 |
--------------------------------------------------------------------------------
/src/languages/html/attributes/typerange.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'type="range"'
3 | title_clean: 'typerange'
4 | short_desc: "Represents a control for setting the element’s value to a string representing a number."
5 | tags:
6 | - html
7 | - attributes
8 | - entry
9 | permalink: html/attributes/{{ title_clean | slug }}/index.html
10 | definition:
11 | text: "The input element represents a control for setting the element’s value to a string representing a number, but with the caveat that the exact value is not important, letting user agents provide a simpler interface than they do for the Number state."
12 | cite:
13 | text: "4.10.5.1.13. Range state (type=range)"
14 | url: "https://www.w3.org/TR/html52/sec-forms.html#range-state-typerange"
15 | links: "typerange"
16 | date: 2020-05-25
17 | sm_img: images/sm/sm_range.jpg
18 | ---
19 |
20 |
Code sample
21 |
22 | ```html
23 |
24 |
25 | ```
26 |
--------------------------------------------------------------------------------
/src/languages/html/attributes/typesearch.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'type="search"'
3 | title_clean: 'typesearch'
4 | short_desc: "A text field designed for the user to enter search queries into."
5 | tags:
6 | - html
7 | - attributes
8 | - entry
9 | permalink: html/attributes/{{ title_clean | slug }}/index.html
10 | definition:
11 | text: "The difference between the Text state and the Search state is primarily stylistic: on platforms where search fields are distinguished from regular text fields, the Search state might result in an appearance consistent with the platform’s search fields rather than appearing like a regular text field."
12 | cite:
13 | text: "4.10.5.1.2. Text (type=text) state and Search state (type=search)"
14 | url: "https://www.w3.org/TR/html52/single-page.html#text-typetext-state-and-search-state-typesearch"
15 | links: "typesearch"
16 | date: 2020-04-10
17 | ---
18 |
19 |
Code sample
20 |
21 | ```html
22 |
23 |
24 | ```
25 |
--------------------------------------------------------------------------------
/src/languages/html/elements/a.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: a
3 | short_desc: "A hyperlink."
4 | tags:
5 | - html
6 | - elements
7 | - entry
8 | permalink: html/elements/{{ title | slug }}/index.html
9 | definition:
10 | text: "If the a element has an href attribute, then it represents a hyperlink (a hypertext anchor) labeled by its contents."
11 | cite:
12 | text: "4.5.1. The a element"
13 | url: https://www.w3.org/TR/html52/textlevel-semantics.html#the-a-element
14 | links: "a"
15 | related:
16 | - "html.rel.bynens"
17 | - 'html.button.htmhell5'
18 | date: 2020-04-12
19 | ---
20 |
Code sample
21 |
22 | ```html
23 | Home
24 | ```
25 |
--------------------------------------------------------------------------------
/src/languages/html/elements/article.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: article
3 | short_desc: "Represents a self-contained composition in a document, page, or application."
4 | tags:
5 | - html
6 | - elements
7 | - entry
8 | permalink: html/elements/{{ title | slug }}/index.html
9 | definition:
10 | text: "The article element represents a complete, or self-contained, composition in a document, page, application, or site. This could be a magazine, newspaper, technical or scholarly article, an essay or report, a blog or other social media post."
11 | cite:
12 | text: "4.3.2. The article element"
13 | url: https://www.w3.org/TR/html52/sections.html#the-article-element
14 | links: "article"
15 | related:
16 | - 'html.section.htmhell'
17 | date: 2020-04-12
18 | ---
19 |
20 | ```html
21 |
22 |
My blog post
23 |
24 | ```
25 |
--------------------------------------------------------------------------------
/src/languages/html/elements/button.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: button
3 | short_desc: "A control allowing a user to trigger actions."
4 | tags:
5 | - html
6 | - elements
7 | - entry
8 | permalink: html/elements/{{ title | slug }}/index.html
9 | definition:
10 | text: "The button element represents a control allowing a user to trigger actions, when enabled. It is labeled by its content."
11 | cite:
12 | text: "4.10.6. The button element"
13 | url: https://www.w3.org/TR/html52/sec-forms.html#the-button-element
14 | links: "button"
15 | date: 2020-04-10
16 | ---
17 |
Code sample
18 |
19 | ```html
20 |
23 | ```
24 |
--------------------------------------------------------------------------------
/src/languages/html/elements/details.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: details
3 | short_desc: "A disclosure widget from which the user can obtain additional information."
4 | tags:
5 | - html
6 | - elements
7 | - entry
8 | permalink: html/elements/{{ title | slug }}/index.html
9 | definition:
10 | text: "The details element represents a disclosure widget from which the user can obtain additional information or controls."
11 | cite:
12 | text: "4.11.1. The details element"
13 | url: https://www.w3.org/TR/html52/single-page.html#the-details-element
14 | links: "details"
15 | date: 2020-04-10
16 | ---
17 |
18 | ```html
19 |
20 | Copying... 25%
21 |
22 |
Transfer rate:
452KB/s
23 |
Local filename:
/home/rpausch/raycd.m4v
24 |
Remote filename:
/var/www/lectures/raycd.m4v
25 |
Duration:
01:16:27
26 |
Color profile:
SD (6-1-6)
27 |
Dimensions:
320×240
28 |
29 |
30 | ```
31 |
--------------------------------------------------------------------------------
/src/languages/html/elements/dialog.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: dialog
3 | short_desc: "An element a user interacts with to perform a task."
4 | tags:
5 | - html
6 | - elements
7 | - entry
8 | permalink: html/elements/{{ title | slug }}/index.html
9 | definition:
10 | text: "The dialog element represents a part of an application that a user interacts with to perform a task, for example a dialog box, inspector, or window."
11 | cite:
12 | text: "4.11.4. The dialog element"
13 | url: https://www.w3.org/TR/html52/single-page.html#the-dialog-element
14 | links: "dialog"
15 | date: 2020-04-10
16 | ---
17 |
18 | ```html
19 |
22 | ```
23 |
--------------------------------------------------------------------------------
/src/languages/html/elements/figure.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: figure
3 | short_desc: "Represents content, optionally with a caption, that is self-contained."
4 | tags:
5 | - html
6 | - elements
7 | - entry
8 | permalink: html/elements/{{ title | slug }}/index.html
9 | definition:
10 | text: "The figure element represents some flow content, optionally with a caption, that is self-contained (like a complete sentence) and is typically referenced as a single unit from the main flow of the document."
11 | cite:
12 | text: "4.4.12. The figure element"
13 | url: https://www.w3.org/TR/html52/grouping-content.html#the-figure-element
14 | links: "figure"
15 | date: 2020-04-10
16 | ---
17 |
18 | ```html
19 |
20 |
21 | Detailed description…
22 |
23 |
24 | ```
25 |
--------------------------------------------------------------------------------
/src/languages/html/elements/headings.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: h1 - h6
3 | short_desc: "These elements represent headings for their sections."
4 | tags:
5 | - html
6 | - elements
7 | - entry
8 | permalink: html/elements/{{ title | slug }}/index.html
9 | definition:
10 | text: "These elements represent headings for their sections. These elements have a rank given by the number in their name. The h1 element has the highest rank, the h6 element has the lowest rank"
11 | cite:
12 | text: "4.3.6. The h1, h2, h3, h4, h5, and h6 elements "
13 | url: https://www.w3.org/TR/html52/sections.html#the-h1-h2-h3-h4-h5-and-h6-elements
14 | links: "headings"
15 | date: 2020-09-09
16 | ---
17 |
18 |
Code sample
19 |
20 | ```html
21 |
I'm unique
22 | ```
23 |
--------------------------------------------------------------------------------
/src/languages/html/elements/index.njk:
--------------------------------------------------------------------------------
1 | ---
2 | title: HTML Elements
3 | short_desc: Articles and talks about HTML elements.
4 | layout: overview.njk
5 | permalink: html/elements/index.html
6 | changefreq: weekly
7 | sm_img: assets/img/sm_html.jpg
8 | ---
9 | {% import "partials/macros.njk" as macros with context %}
10 |
11 |
12 | Articles and talks about HTML elements.
13 |
14 |
15 | {{macros.linklist("Featured elements", "html/elements", "elements")}}
16 |
--------------------------------------------------------------------------------
/src/languages/html/elements/meter.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: meter
3 | short_desc: "A scalar measurement within a known range, or a fractional value."
4 | tags:
5 | - html
6 | - elements
7 | - entry
8 | permalink: html/elements/{{ title | slug }}/index.html
9 | definition:
10 | text: "The meter element represents a scalar measurement within a known range, or a fractional value; for example disk usage, the relevance of a query result, or the fraction of a voting population to have selected a particular candidate."
11 | cite:
12 | text: "4.10.14. The meter element"
13 | url: https://www.w3.org/TR/html52/single-page.html#the-meter-element
14 | links: "meter"
15 | date: 2020-04-11
16 | ---
17 |
18 |
Code sample
19 |
20 | ```html
21 | Tickets sold:
22 | ```
23 |
--------------------------------------------------------------------------------
/src/languages/html/elements/nav.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: nav
3 | short_desc: "Represents a section of a page that links to other pages."
4 | tags:
5 | - html
6 | - elements
7 | - entry
8 | permalink: html/elements/{{ title | slug }}/index.html
9 | definition:
10 | text: "The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links."
11 | cite:
12 | text: "4.3.4. The nav element"
13 | url: https://www.w3.org/TR/html52/sections.html#the-nav-element
14 | links: "nav"
15 | date: 2020-04-10
16 | ---
17 |
18 | ```html
19 |
26 | ```
27 |
--------------------------------------------------------------------------------
/src/languages/html/elements/progress.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: progress
3 | short_desc: "Represents the completion progress of a task."
4 | tags:
5 | - html
6 | - elements
7 | - entry
8 | permalink: html/elements/{{ title | slug }}/index.html
9 | definition:
10 | text: "The progress element represents the completion progress of a task."
11 | cite:
12 | text: "4.10.13. The progress element"
13 | url: https://www.w3.org/TR/html52/single-page.html#the-progress-element
14 | links: "progress"
15 | date: 2020-04-10
16 | ---
17 |
18 |
Code sample
19 |
20 | ```html
21 |
22 |
23 | ```
24 |
--------------------------------------------------------------------------------
/src/languages/html/elements/section.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: section
3 | short_desc: "Represents a generic section of a document or application."
4 | tags:
5 | - html
6 | - elements
7 | - entry
8 | permalink: html/elements/{{ title | slug }}/index.html
9 | definition:
10 | text: "The section element represents a generic section of a document or application."
11 | cite:
12 | text: "4.3.3. The section element"
13 | url: https://www.w3.org/TR/html52/sections.html#the-section-element
14 | links: "section"
15 | date: 2020-04-10
16 | sm_img: images/sm/sm_section.jpg
17 | ---
18 |
19 | ```html
20 |
21 |
Gallery
22 |
23 | ```
24 |
--------------------------------------------------------------------------------
/src/languages/html/elements/select.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: select
3 | short_desc: "A control for selecting amongst a set of options."
4 | tags:
5 | - html
6 | - elements
7 | - entry
8 | permalink: html/elements/{{ title | slug }}/index.html
9 | definition:
10 | text: "The select element represents a control for selecting amongst a set of options."
11 | cite:
12 | text: "4.10.7. The select element"
13 | url: https://www.w3.org/TR/html52/single-page.html#the-select-element
14 | links: "select"
15 | date: 2020-11-29
16 | ---
17 |
18 |
Code sample
19 |
20 | ```html
21 |
22 |
27 | ```
28 |
--------------------------------------------------------------------------------
/src/languages/html/elements/svg.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: svg
3 | short_desc: "SVG is a language for describing two-dimensional graphics."
4 | tags:
5 | - html
6 | - elements
7 | - entry
8 | permalink: html/elements/{{ title | slug }}/index.html
9 | definition:
10 | text: "SVG is a language for describing two-dimensional graphics."
11 | cite:
12 | text: "1.1. About SVG"
13 | url: https://www.w3.org/TR/SVG2/intro.html
14 | links: "svg"
15 | date: 2020-04-10
16 | ---
17 |
Code sample
18 |
19 | ```html
20 |
23 | ```
24 |
--------------------------------------------------------------------------------
/src/languages/html/elements/video.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: video
3 | short_desc: "For playing videos or movies, and audio files with captions."
4 | tags:
5 | - html
6 | - elements
7 | - entry
8 | permalink: html/elements/{{ title | slug }}/index.html
9 | definition:
10 | text: "A video element is used for playing videos or movies, and audio files with captions."
11 | cite:
12 | text: "4.7.10. The video element"
13 | url: https://www.w3.org/TR/html52/semantics-embedded-content.html#the-video-element
14 | links: "video"
15 | date: 2020-04-10
16 | ---
17 |
Code sample
18 |
19 | ```html
20 |
26 | ```
27 |
--------------------------------------------------------------------------------
/src/languages/html/html.json:
--------------------------------------------------------------------------------
1 | {
2 | "sm_img": "assets/img/sm_html.jpg"
3 | }
4 |
--------------------------------------------------------------------------------
/src/languages/html/index.njk:
--------------------------------------------------------------------------------
1 | ---
2 | title: HTML
3 | short_desc: Articles and talks about HTML elements and attributes.
4 | layout: overview.njk
5 | permalink: html/index.html
6 | tags:
7 | - nav
8 | date: 2020-01-01
9 | changefreq: weekly
10 | ---
11 | {% import "partials/macros.njk" as macros with context %}
12 |
13 |
14 | Articles and talks about HTML elements and attributes.
15 |
14 | Articles and talks about Javascript methods and expressions.
15 |
16 |
17 | As you can see, there aren't many links at the moment. That's because I don't read a lot of Javascript related articles.
18 | It'd be awesome, if you could help me extend this list by contributing.
19 |
23 | ```
24 |
--------------------------------------------------------------------------------
/src/languages/html/attributes/multiple.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: multiple
3 | short_desc: "Enables form controls to accept one or more values."
4 | tags:
5 | - html
6 | - attributes
7 | - entry
8 | permalink: html/attributes/{{ title | slug }}/index.html
9 | definition:
10 | text: "The multiple attribute is a boolean attribute. If the attribute is present, then the select element represents a control for selecting zero or more options from the list of options."
11 | cite:
12 | text: "4.11.4. The dialog element"
13 | url: https://www.w3.org/TR/html52/single-page.html#the-select-element
14 | links: "multiple"
15 | related:
16 | - 'html.select.selectpoison2'
17 | date: 2020-04-10
18 | ---
19 |
20 | 
21 | 
22 |