19 |
20 | ```css
21 | li {
22 | flex-grow: 1;
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/_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/languages/css/selectors/*.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "*"
3 | title_save: "universal"
4 | short_desc: "Represents an element of any element type."
5 | tags:
6 | - css
7 | - selectors
8 | - entry
9 | permalink: css/selectors/{{ title | slug }}/index.html
10 | definition:
11 | text: "The universal selector is a special type selector, that represents an element of any element type."
12 | cite:
13 | text: "5.2. Universal selector"
14 | url: https://www.w3.org/TR/selectors-4/#the-universal-selector
15 | links: "universal"
16 | date: 2020-04-10
17 | ---
18 |
19 |
Code sample
20 |
21 | ```css
22 | * {
23 | outline: 5px solid fuchsia;
24 | }
25 | ```
26 |
--------------------------------------------------------------------------------
/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/css/properties/mask-image.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "mask-image"
3 | short_desc: "Sets the mask layer image of an element."
4 | tags:
5 | - css
6 | - properties
7 | - entry
8 | permalink: css/properties/{{ title | slug }}/index.html
9 | definition:
10 | text: "Sets the mask layer image of an element."
11 | cite:
12 | text: "7.1 Mask Image Source: the mask-image property"
13 | url: https://www.w3.org/TR/css-masking-1/#the-mask-image
14 | links: "mask-image"
15 | date: 2020-10-18
16 | sm_img: images/sm/sm_maskimage.jpg
17 | ---
18 |
19 |
Code sample
20 |
21 | ```css
22 | div {
23 | mask-image: url(resources.svg#mask2);
24 | }
25 | ```
26 |
--------------------------------------------------------------------------------
/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/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/js/expressions/await.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: await
3 | short_desc: "Used to wait for a Promise."
4 | tags:
5 | - js
6 | - expressions
7 | - entry
8 | permalink: js/expressions/{{ title | slug }}/index.html
9 | definition:
10 | text: "The await operator is used to wait for a Promise. It can only be used inside an async function."
11 | cite:
12 | text: "await (MDN)"
13 | url: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await
14 | links: "await"
15 | date: 2020-04-14
16 | ---
17 |
18 |
Code sample
19 |
20 | ```js
21 | async function f3() {
22 | var y = await 20;
23 | console.log(y); // 20
24 | }
25 | ```
26 |
--------------------------------------------------------------------------------
/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 |
19 |
20 | ```css
21 | .grid {
22 | display: grid;
23 | grid-template-rows: 200px 1fr;
24 | }
25 | ```
26 |
--------------------------------------------------------------------------------
/src/languages/css/properties/content.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: content
3 | short_desc: "Dictates what is rendered inside an element or pseudo-element."
4 | tags:
5 | - css
6 | - properties
7 | - entry
8 | permalink: css/properties/{{ title | slug }}/index.html
9 | definition:
10 | text: "The content property dictates what is rendered inside an element or pseudo-element."
11 | cite:
12 | text: "1. Inserting and replacing content with the content property"
13 | url: https://drafts.csswg.org/css-content-3/#content-property
14 | links: "content"
15 | date: 2020-06-02
16 | sm_img: images/sm/sm_content.jpg
17 | ---
18 |
19 |
Code sample
20 |
21 | ```css
22 | a::after {
23 | content: " (" attr(href) ")";
24 | }
25 | ```
26 |
27 |
--------------------------------------------------------------------------------
/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/css/properties/displaygrid.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "display: grid"
3 | short_desc: "A grid container establishes a new grid formatting context for its contents."
4 | tags:
5 | - css
6 | - properties
7 | - entry
8 | permalink: css/properties/{{ title | slug }}/index.html
9 | definition:
10 | text: "A grid container establishes a new grid formatting context for its contents."
11 | cite:
12 | text: "5.1. Establishing Grid Containers: the grid and inline-grid display values"
13 | url: https://www.w3.org/TR/css-grid-1/#grid-containers
14 | links: "displaygrid"
15 | related:
16 | - 'css.display.smashing'
17 | date: 2020-04-10
18 | ---
19 |
20 |
Code sample
21 |
22 | ```css
23 | ul {
24 | display: grid;
25 | }
26 | ```
27 |
--------------------------------------------------------------------------------
/src/languages/css/selectors/marker.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "::marker"
3 | title_clean: "marker"
4 | short_desc: "The ::marker pseudo-element represents the automatically generated marker box of a list item."
5 | tags:
6 | - css
7 | - selectors
8 | - entry
9 | permalink: css/selectors/{{ title_clean | slug }}/index.html
10 | definition:
11 | text: "The ::marker pseudo-element represents the automatically generated marker box of a list item."
12 | cite:
13 | text: "4.2. List Markers: the ::marker pseudo-element"
14 | url: https://www.w3.org/TR/css-pseudo-4/#marker-pseudo
15 | links: "marker"
16 | date: 2020-09-04
17 | ---
18 |
19 |
Code sample
20 |
21 | ```css
22 | ::marker {
23 | font-variant-numeric: tabular-nums;
24 | }
25 | ```
26 |
--------------------------------------------------------------------------------
/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/_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/languages/css/properties/contain.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: contain
3 | short_desc: "Indicate that an element and its contents are independent of the rest of the document tree."
4 | tags:
5 | - css
6 | - properties
7 | - entry
8 | permalink: css/properties/{{ title | slug }}/index.html
9 | definition:
10 | text: "The contain property allows an author to indicate that an element and its contents are, as much as possible, independent of the rest of the document tree."
11 | cite:
12 | text: "2. Strong Containment: the contain property"
13 | url: https://www.w3.org/TR/css-contain-1/#contain-property
14 | links: "contain"
15 | date: 2020-05-12
16 | ---
17 |
18 |
Code sample
19 |
20 | ```css
21 | .item {
22 | contain: layout;
23 | }
24 | ```
25 |
--------------------------------------------------------------------------------
/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 |
Code sample
21 |
22 | ```css
23 | ol {
24 | list-style-type: lower-roman;
25 | }
26 | ```
27 |
--------------------------------------------------------------------------------
/src/languages/css/properties/positionsticky.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "position: sticky"
3 | short_desc: "Makes an element stick."
4 | tags:
5 | - css
6 | - properties
7 | - entry
8 | permalink: css/properties/{{ title | slug }}/index.html
9 | definition:
10 | text: "A stickily positioned box is positioned similarly to a relatively positioned box, but the offset is computed with reference to the nearest ancestor with a scrolling box, or the viewport if no ancestor has a scrolling box."
11 | cite:
12 | text: "6.2. Sticky positioning"
13 | url: https://www.w3.org/TR/css-position-3/#sticky-pos
14 | links: "positionsticky"
15 | date: 2020-04-10
16 | ---
17 |
18 |
Code sample
19 |
20 | ```css
21 | header {
22 | position: sticky;
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/css/properties/positionabsolute.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "position: absolute"
3 | short_desc: "A box is explicitly offset with respect to its containing block."
4 | tags:
5 | - css
6 | - properties
7 | - entry
8 | permalink: css/properties/{{ title | slug }}/index.html
9 | definition:
10 | text: "In the absolute positioning model, a box is explicitly offset with respect to its containing block. It is removed from the normal flow entirely (it has no impact on later siblings)."
11 | cite:
12 | text: "6.3. Absolute positioning"
13 | url: https://www.w3.org/TR/css-position-3/#abs-pos
14 | links: "positionabsolute"
15 | date: 2020-04-10
16 | ---
17 |
18 |
Code sample
19 |
20 | ```css
21 | div {
22 | position: absolute;
23 | }
24 | ```
25 |
--------------------------------------------------------------------------------
/src/languages/css/properties/scroll-margin.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "scroll-margin"
3 | short_desc: "Represents outsets defining the scroll snap area that is used for snapping this box to the snapport."
4 | tags:
5 | - css
6 | - properties
7 | - entry
8 | permalink: css/properties/{{ title | slug }}/index.html
9 | definition:
10 | text: "Represents outsets defining the scroll snap area that is used for snapping this box to the snapport."
11 | cite:
12 | text: "5.1. Scroll Snapping Area: the scroll-margin property"
13 | url: https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-margin
14 | links: "scroll-margin"
15 | date: 2020-04-14
16 | ---
17 |
18 |
Code sample
19 |
20 | ```css
21 | section {
22 | scroll-margin-top: 2rem;
23 | }
24 | ```
25 |
--------------------------------------------------------------------------------
/getUrlData.js:
--------------------------------------------------------------------------------
1 | const parseLinks = require('./src/_11ty/parse-links.js');
2 | var glob = require("glob")
3 |
4 | var getDirectories = function (src, callback) {
5 | glob(src + '/**/*.json', callback);
6 | };
7 |
8 | getDirectories('./src/_data/entries', function (err, files) {
9 | if (err) {
10 | console.log('Error', err);
11 | } else {
12 | for (let i = 0; i < files.length; i++) {
13 | const file = files[i];
14 | const links = require(file);
15 |
16 | console.log(`Parsing ${file}`);
17 |
18 | for (let i = 0; i < links.length; i++) {
19 | const url = links[i].url;
20 | const id = links[i].id;
21 |
22 | parseLinks.getData(file, links, url, id);
23 | }
24 | }
25 | }
26 | });
27 |
28 | console.log('Finished parsing')
29 |
--------------------------------------------------------------------------------
/src/assets/img/list-item.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/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/assets/img/logo.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/languages/css/properties/displaycontents.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "display: contents"
3 | short_desc: "An element doesn't generate any boxes, but its children still do."
4 | tags:
5 | - css
6 | - properties
7 | - entry
8 | permalink: css/properties/{{ title | slug }}/index.html
9 | definition:
10 | text: "The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes and text runs as normal. "
11 | cite:
12 | text: "2.5. Box Generation: the none and contents keywords"
13 | url: https://www.w3.org/TR/css-display-3/#box-generation
14 | links: "displaycontents"
15 | related:
16 | - 'css.display.smashing'
17 | date: 2020-04-13
18 | ---
19 |
20 |
Code sample
21 |
22 | ```css
23 | ul {
24 | display: contents;
25 | }
26 | ```
27 |
--------------------------------------------------------------------------------
/src/languages/css/properties/writing-mode.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: writing-mode
3 | short_desc: "Specifies whether lines of text are laid out horizontally or vertically and the direction in which blocks progress."
4 | tags:
5 | - css
6 | - properties
7 | - entry
8 | permalink: css/properties/{{ title | slug }}/index.html
9 | definition:
10 | text: "This property specifies whether lines of text are laid out horizontally or vertically and the direction in which blocks progress."
11 | cite:
12 | text: "3.2. Block Flow Direction: the writing-mode property"
13 | url: https://www.w3.org/TR/css-writing-modes-3/#block-flow
14 | links: "writingmode"
15 | date: 2020-04-12
16 | ---
17 |
18 |
Code sample
19 |
20 | ```css
21 | form {
22 | writing-mode: vertical-rl;
23 | }
24 | ```
25 |
--------------------------------------------------------------------------------
/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/css/properties/aspect-ratio.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: aspect-ratio
3 | short_desc: "Sets a preferred aspect ratio for the box."
4 | tags:
5 | - css
6 | - properties
7 | - entry
8 | permalink: css/properties/{{ title | slug }}/index.html
9 | definition:
10 | text: "This property sets a preferred aspect ratio for the box, which will be used in the calculation of auto sizes and some other layout functions."
11 | cite:
12 | text: "4.1. Intrinsic Aspect Ratios: the aspect-ratio property"
13 | url: https://drafts.csswg.org/css-sizing-4/#aspect-ratio
14 | links: "aspect-ratio"
15 | date: 2020-06-02
16 | sm_img: images/sm/sm_aspectratio.jpg
17 | ---
18 |
19 |
Code sample
20 |
21 | ```css
22 | .box {
23 | width: 400px;
24 | height: auto;
25 | aspect-ratio: 1/1;
26 | }
27 | ```
28 |
--------------------------------------------------------------------------------
/src/languages/css/selectors/not.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: ":not()"
3 | title_clean: not
4 | short_desc: "Represents an element that is not represented by its argument."
5 | tags:
6 | - css
7 | - selectors
8 | - entry
9 | permalink: css/selectors/{{ title_clean | slug }}/index.html
10 | definition:
11 | text: "The negation pseudo-class, :not(X), is a functional notation taking a simple selector (excluding the negation pseudo-class itself) as an argument. It represents an element that is not represented by its argument. "
12 | cite:
13 | text: "6.6.7. The negation pseudo-class"
14 | url: https://drafts.csswg.org/selectors-3/#negation
15 | links: "not"
16 | date: 2020-04-14
17 | ---
18 |
19 |
Code sample
20 |
21 | ```css
22 | li:not(:last-child) {
23 | margin-botton: 1rem;
24 | }
25 | ```
26 |
--------------------------------------------------------------------------------
/src/languages/css/selectors/nthchild.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: ":nth-child()"
3 | title_clean: nth-child
4 | short_desc: "Represents an element that has an+b-1 siblings before it in the document tree."
5 | tags:
6 | - css
7 | - selectors
8 | - entry
9 | permalink: css/selectors/{{ title_clean | slug }}/index.html
10 | definition:
11 | text: "The :nth-child(an+b) pseudo-class notation represents an element that has an+b-1 siblings before it in the document tree, for any positive integer or zero value of n."
12 | cite:
13 | text: "6.6.5.2. :nth-child() pseudo-class"
14 | url: https://www.w3.org/TR/selectors-3/#nth-child-pseudo
15 | links: "nthchild"
16 | date: 2020-04-29
17 | ---
18 |
19 |
Code sample
20 |
21 | ```css
22 | li:nth-child(2n) {
23 | border: 5px solid fuchsia;
24 | }
25 | ```
26 |
--------------------------------------------------------------------------------
/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/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/css/functions_units/clamp.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: clamp()
3 | title_clean: clamp
4 | short_desc: "Takes three calculations—a minimum value, a central value, and a maximum value"
5 | tags:
6 | - css
7 | - values
8 | - entry
9 | permalink: css/properties/{{ title_clean }}/index.html
10 | definition:
11 | text: "The clamp() function takes three calculations—a minimum value, a central value, and a maximum value."
12 | cite:
13 | text: "11.2. Comparison Functions: min(), max(), and clamp()"
14 | url: https://drafts.csswg.org/css-values-4/#comp-func
15 | links: "clamp"
16 | date: 2020-10-20
17 | ---
18 |
19 |
Code sample
20 |
21 | ```css
22 | .type {
23 | /* Force the font-size to stay between 12px and 100px */
24 | font-size: clamp(12px, 10 * (1vw + 1vh) / 2, 100px);
25 | }
26 | ```
27 |
--------------------------------------------------------------------------------
/src/languages/css/properties/grid-template-columns.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: grid-template-columns
3 | short_desc: "Specifies the track list for the grid’s columns."
4 | tags:
5 | - css
6 | - properties
7 | - entry
8 | permalink: css/properties/{{ title | slug }}/index.html
9 | definition:
10 | text: "The grid-template-columns property specifies the track list for the grid’s columns."
11 | cite:
12 | text: "7.2. Explicit Track Sizing: the grid-template-columns and grid-template-columns properties"
13 | url: https://www.w3.org/TR/css-grid-1/#track-sizing
14 | links: "grid-template-columns"
15 | date: 2020-10-07
16 | sm_img: images/sm/sm_gridtemplatecolumns.jpg
17 | ---
18 |
19 |
Code sample
20 |
21 | ```css
22 | .grid {
23 | display: grid;
24 | grid-template-columns: 200px 1fr;
25 | }
26 | ```
27 |
--------------------------------------------------------------------------------
/src/languages/html/attributes/aria-current.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: aria-current
3 | short_desc: "Indicates the current item within a set of related elements."
4 | tags:
5 | - html
6 | - attributes
7 | - entry
8 | permalink: html/attributes/{{ title | slug }}/index.html
9 | definition:
10 | text: "Indicates the element that represents the current item within a container or set of related elements."
11 | cite:
12 | text: "aria-current (property)"
13 | url: https://www.w3.org/TR/wai-aria/#aria-current
14 | links: "ariacurrent"
15 | date: 2020-10-25
16 | sm_img: images/sm/sm_aria-current.jpg
17 | ---
18 |
19 |
25 | ```
26 |
--------------------------------------------------------------------------------
/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/_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/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/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/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/_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/languages/css/properties/display.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "display"
3 | short_desc: "Defines an element’s display type."
4 | tags:
5 | - css
6 | - properties
7 | - entry
8 | permalink: css/properties/{{ title | slug }}/index.html
9 | definition:
10 | text: "The display property defines an element’s display type, which consists of the two basic qualities of how an element generates boxes: the inner display type and the outer display type."
11 | cite:
12 | text: "2. Box Layout Modes: the display property"
13 | url: https://www.w3.org/TR/css-display-3/#the-display-properties
14 | links: "display"
15 | related:
16 | - 'css.displaycontents.smashing'
17 | - 'css.displaygrid.smashing'
18 | date: 2020-06-17
19 | ---
20 |
21 |
Code sample
22 |
23 | ```css
24 | div {
25 | display: inline-block;
26 | }
27 | ```
28 |
--------------------------------------------------------------------------------
/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/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/js/index.njk:
--------------------------------------------------------------------------------
1 | ---
2 | title: JS
3 | short_desc: Articles and talks about Javascript methods and expressions.
4 | layout: overview.njk
5 | permalink: js/index.html
6 | tags:
7 | - nav
8 | date: 2020-01-03
9 | changefreq: weekly
10 | ---
11 | {% import "partials/macros.njk" as macros with context %}
12 |
13 |
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 |
20 |
21 | {{macros.linklist("Methods", "js/methods", "methods")}}
22 | {{macros.linklist("Expressions", "js/expressions", "expressions")}}
23 |
--------------------------------------------------------------------------------
/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/css/properties/grid-row.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: grid-row
3 | short_desc: "Determines a grid item’s size and location within the grid ."
4 | tags:
5 | - css
6 | - properties
7 | - entry
8 | permalink: css/properties/{{ title | slug }}/index.html
9 | definition:
10 | text: "The grid-row, grid-row-start, and grid-row-end properties determine a grid item’s size and location within the grid by contributing a line, a span, or nothing (automatic) to its grid placement."
11 | cite:
12 | text: "8.4. Placement Shorthands: the grid-column, grid-row, and grid-area properties"
13 | url: https://www.w3.org/TR/css-grid-1/#propdef-grid-row
14 | links: "grid-row"
15 | date: 2020-04-10
16 | ---
17 |
18 |
Code sample
19 |
20 | ```css
21 | .grid-item {
22 | grid-row: 2;
23 | }
24 | ```
25 |
--------------------------------------------------------------------------------
/src/languages/css/properties/scroll-snap-type.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "scroll-snap-type"
3 | short_desc: "Specifies whether a scroll container is a scroll snap container, how strictly it snaps, and which axes are considered."
4 | tags:
5 | - css
6 | - properties
7 | - entry
8 | permalink: css/properties/{{ title | slug }}/index.html
9 | definition:
10 | text: "Specifies whether a scroll container is a scroll snap container, how strictly it snaps, and which axes are considered."
11 | cite:
12 | text: "4.1. Scroll Snapping Rules: the scroll-snap-type property"
13 | url: https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-type
14 | links: "scroll-snap-type"
15 | date: 2021-01-01
16 | ---
17 |
18 |
Code sample
19 |
20 | ```css
21 | html {
22 | scroll-snap-type: block; /* applied to main document scroller */
23 | }
24 | ```
25 |
--------------------------------------------------------------------------------
/src/languages/css/selectors/nthlastchild.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: ":nth-last-child()"
3 | title_clean: nth-last-child
4 | short_desc: "Represents an element that has an+b-1 siblings after it in the document tree."
5 | tags:
6 | - css
7 | - selectors
8 | - entry
9 | permalink: css/selectors/{{ title_clean | slug }}/index.html
10 | definition:
11 | text: "The :nth-last-child(an+b) pseudo-class notation represents an element that has an+b-1 siblings after it in the document tree, for any positive integer or zero value of n."
12 | cite:
13 | text: "6.6.5.3. :nth-last-child() pseudo-class"
14 | url: https://www.w3.org/TR/selectors-3/#nth-last-child-pseudo
15 | links: "nthlastchild"
16 | date: 2020-04-29
17 | ---
18 |
19 |
Code sample
20 |
21 | ```css
22 | li:nth-last-child(2n) {
23 | border: 5px solid fuchsia;
24 | }
25 | ```
26 |
27 |
--------------------------------------------------------------------------------
/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 |
26 | ```
27 |
--------------------------------------------------------------------------------
/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/css/selectors/focusvisible.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: ":focus-visible"
3 | title_clean: focus-visible
4 | short_desc: "Applies if the user agent determines via heuristics that the focus should be made evident."
5 | tags:
6 | - css
7 | - selectors
8 | - entry
9 | permalink: css/selectors/{{ title_clean | slug }}/index.html
10 | definition:
11 | text: "The :focus-visible pseudo-class applies while an element matches the :focus pseudo-class and the user agent determines via heuristics that the focus should be made evident on the element."
12 | cite:
13 | text: "9.4. The Focus-Indicated Pseudo-class: :focus-visible"
14 | url: https://www.w3.org/TR/selectors-4/#the-focus-visible-pseudo
15 | links: "focusvisible"
16 | date: 2020-10-20
17 | sm_img: images/sm/sm_focusvisible.jpg
18 | ---
19 |
20 |
Code sample
21 |
22 | ```css
23 | *:focus-visible {
24 | outline: 2px solid #F0F;
25 | }
26 | ```
27 |
--------------------------------------------------------------------------------
/src/languages/css/properties/scroll-behavior.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "scroll-behavior"
3 | short_desc: "Specifies the scrolling behavior for a scrolling box."
4 | tags:
5 | - css
6 | - properties
7 | - entry
8 | permalink: css/properties/{{ title | slug }}/index.html
9 | definition:
10 | text: "Specifies the scrolling behavior for a scrolling box, when scrolling happens due to navigation, CSSOM scrolling APIs, or scroll snapping operations not initiated by the user."
11 | cite:
12 | text: "13.1. Smooth Scrolling: The scroll-behavior Property"
13 | url: https://drafts.csswg.org/cssom-view/#propdef-scroll-behavior
14 | links: "scroll-behavior"
15 | date: 2021-01-14
16 | ---
17 |
18 |
Code sample
19 |
20 | ```css
21 | /* Animate scrolling only if users don’t prefer reduced motion */
22 | @media (prefers-reduced-motion: no-preference) {
23 | html {
24 | scroll-behavior: smooth;
25 | }
26 | }
27 | ```
28 |
--------------------------------------------------------------------------------
/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/_includes/item.njk:
--------------------------------------------------------------------------------
1 | ---
2 | layout: base.njk
3 | ---
4 | {% from "partials/macros.njk"import linklist, bookmark with context %}
5 |
6 |
17 |
18 |
19 | {% for entry in entries[tags[0]][links] %}
20 | {{ bookmark(entry)}}
21 | {% endfor %}
22 |
23 | {% endif %}
24 |
25 | {% if related %}
26 |
This might be interesting as well
27 |
28 | {% for entry in related %}
29 | {{ bookmark(entry)}}
30 | {% endfor %}
31 | {% endif %}
32 |
33 | {{ content | safe }}
34 |
35 | {{linklist(title="Explore other pages", url="", list="entry", limit=4, randomize=true)}}
36 |
--------------------------------------------------------------------------------
/src/languages/css/properties/content-visibility.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: content-visibility
3 | short_desc: "Controls whether or not an element renders its contents at all."
4 | tags:
5 | - css
6 | - properties
7 | - entry
8 | permalink: css/properties/{{ title | slug }}/index.html
9 | definition:
10 | text: "The content-visibility property controls whether or not an element renders its contents at all, along with forcing a strong set of containments, allowing user agents to potentially omit large swathes of layout and rendering work until it becomes needed."
11 | cite:
12 | text: "4. Suppressing An Element’s Contents Entirely: the content-visibility property"
13 | url: https://drafts.csswg.org/css-contain/#content-visibility
14 | links: "content-visibility"
15 | date: 2021-01-03
16 | sm_img: images/sm/sm_contentvisibility.jpg
17 | ---
18 |
19 |
Code sample
20 |
21 | ```css
22 | section {
23 | content-visibility: hidden;
24 | }
25 | ```
26 |
--------------------------------------------------------------------------------
/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/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/_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/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/_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/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/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/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 |
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 | var gulp = require('gulp');
2 | var postcss = require('gulp-postcss');
3 | var cssnano = require('cssnano');
4 | var concat = require('gulp-concat');
5 | var rename = require('gulp-rename');
6 | var uglify = require('gulp-uglify');
7 |
8 | gulp.task('css', function () {
9 | return gulp.src(['./src/assets/css/prism.css', './src/assets/css/style.css'])
10 | .pipe(concat('style.min.css'))
11 | .pipe(postcss([cssnano()]))
12 | .pipe(gulp.dest('./src/assets/css/'));
13 | });
14 |
15 | gulp.task('cssNano', function () {
16 | return gulp.src(['./src/assets/css/style_medium.css'])
17 | .pipe(postcss([cssnano()]))
18 | .pipe(rename("style_medium.min.css"))
19 |
20 | .pipe(gulp.dest('./src/assets/css/'));
21 | });
22 |
23 | gulp.task('scripts', function () {
24 | return gulp.src('./src/assets/js/search.js')
25 | .pipe(uglify({compress: {drop_console: true }}))
26 | .pipe(concat("scripts.min.js"))
27 | .pipe(gulp.dest('./src/assets/js/'));
28 | });
29 |
30 | gulp.task('build', gulp.series('scripts', 'css', 'cssNano'));
31 |
--------------------------------------------------------------------------------
/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/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/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/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/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 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2020 Manuel Matuzovic
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/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/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/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/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/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/assets/css/print.css:
--------------------------------------------------------------------------------
1 | body {
2 | max-width: 100%;
3 | }
4 |
5 | .logo {
6 | padding: 0;
7 | background: none;
8 | }
9 |
10 | .logo__img path {
11 | fill: #000;
12 | }
13 |
14 | *,
15 | *:before,
16 | *:after,
17 | *:first-letter,
18 | p:first-line,
19 | div:first-line,
20 | blockquote:first-line,
21 | li:first-line {
22 | background: transparent !important;
23 | color: #000 !important;
24 | box-shadow: none !important;
25 | text-shadow: none !important;
26 | }
27 |
28 | .h3 > * {
29 | padding: 0;
30 | }
31 |
32 | .jump,
33 | .nav {
34 | display: none;
35 | }
36 |
37 | .card {
38 | padding: 0;
39 | }
40 |
41 | .tags {
42 | display: block;
43 | }
44 |
45 | a[href]:after {
46 | content: " (" attr(href) ")";
47 | }
48 |
49 | .h2 a:after,
50 | .h3 a::after,
51 | .logo::after {
52 | display: none !important;
53 | }
54 |
55 | .card__heading a::after {
56 | display: block !important;
57 | font-size: 16px;
58 | }
59 |
60 | .link-list {
61 | display: block;
62 | }
63 |
64 | .link-list__item {
65 | margin-bottom: 2rem;
66 | }
67 |
68 | .bookmark {
69 | flex-direction: row-reverse;
70 | }
71 |
72 | .bookmark__img {
73 | display: none;
74 | }
75 |
--------------------------------------------------------------------------------
/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/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/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/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/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/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/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/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/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/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/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/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 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "frontendbookmarks",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "start": "ELEVENTY_ENV=development npx @11ty/eleventy --serve",
8 | "build-gulp": "gulp build",
9 | "build-site": "ELEVENTY_ENV=production npx @11ty/eleventy",
10 | "build": "npm run build-gulp && npm run build-site"
11 | },
12 | "keywords": [],
13 | "author": "",
14 | "license": "ISC",
15 | "devDependencies": {
16 | "@11ty/eleventy": "^0.11.0",
17 | "@11ty/eleventy-plugin-rss": "^1.0.7",
18 | "@11ty/eleventy-plugin-syntaxhighlight": "^3.0.1",
19 | "cssnano": "^4.1.10",
20 | "glob": "^7.1.6",
21 | "got": "^10.7.0",
22 | "gulp": "^4.0.2",
23 | "gulp-concat": "^2.6.1",
24 | "gulp-postcss": "^8.0.0",
25 | "gulp-rename": "^2.0.0",
26 | "gulp-uglify": "^3.0.2",
27 | "html-entities": "^1.3.1",
28 | "html-minifier": "^4.0.0",
29 | "image-downloader": "^3.5.0",
30 | "luxon": "^1.23.0",
31 | "metascraper-title": "^5.11.8",
32 | "sharp": "^0.24.1",
33 | "slugify": "^1.4.0"
34 | },
35 | "dependencies": {
36 | "metascraper": "^5.11.8",
37 | "metascraper-author": "^5.11.8",
38 | "metascraper-date": "^5.11.8",
39 | "metascraper-description": "^5.11.8",
40 | "metascraper-image": "^5.11.8",
41 | "metascraper-url": "^5.11.8"
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/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/_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 |
{{ entry.data.definition.text | safe }}
29 | {% endif %}
30 |
31 |
32 |
33 | {%- endfor -%}
34 |
35 |
--------------------------------------------------------------------------------
/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/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/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/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/assets/css/style_medium.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-size: 2rem;
3 | margin: 3rem;
4 | max-width: 80rem;
5 | }
6 |
7 | .logo {
8 | padding: 1.5rem 2rem;
9 | }
10 |
11 | .logo__img{
12 | height: 6rem;
13 | width: 4.252rem;
14 | }
15 |
16 | h1, .h1 {
17 | font-size: 5rem;
18 | }
19 |
20 | .h2, .h3 {
21 | margin-bottom: 1rem;
22 | }
23 |
24 | /* HEADER */
25 | .site-header {
26 | margin-bottom: 4rem;
27 | }
28 |
29 | .title {
30 | margin-bottom: 1rem;
31 | }
32 |
33 | /* NAV */
34 |
35 | .nav {
36 | margin-bottom: 2rem;
37 | }
38 |
39 | .nav__items > * + * {
40 | margin-left: 1rem;
41 | }
42 |
43 | .nav__link {
44 | padding: 1rem 2rem 0.4rem;
45 | font-size: 2.6rem;
46 | }
47 |
48 |
49 | /* Search */
50 |
51 | .jump {
52 | margin-top: 1rem;
53 | }
54 |
55 | .jump__input {
56 | max-width: 42rem;
57 | padding: 1.3rem 1.4rem;
58 | }
59 |
60 | /* link list */
61 |
62 | .link-list {
63 | margin-top: 2rem;
64 | grid-gap: 1rem;
65 | }
66 |
67 | .bookmarks {
68 | /* display: grid;
69 | grid-template-columns: 1fr 1fr;
70 | grid-gap: 1rem; */
71 | }
72 |
73 | .bookmarks > * + * {
74 | margin-top: 1rem;
75 | }
76 |
77 | .bookmark {
78 | flex-direction: row-reverse;
79 | padding: 2rem;
80 | }
81 |
82 | .bookmark__img {
83 | margin: 0 2rem 0 0;
84 | width: 25rem;
85 | height: 14rem;
86 | }
87 |
88 |
89 | .card__desc {
90 | font-size: 1.8rem;
91 | line-height: 1.5;
92 | }
93 |
94 | .tag-container {
95 | display: flex;
96 | align-items: center;
97 | font-size: 1.6rem;
98 | margin-top: 3rem;
99 | gap: 0.7rem;
100 | }
101 |
--------------------------------------------------------------------------------
/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/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/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 | ]
--------------------------------------------------------------------------------
/.eleventy.js:
--------------------------------------------------------------------------------
1 | const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight');
2 | const rss = require('@11ty/eleventy-plugin-rss');
3 | const filters = require('./src/_11ty/filters.js');
4 | const htmlmin = require('html-minifier');
5 |
6 | module.exports = function (eleventyConfig) {
7 | // Plugins
8 | eleventyConfig.addPlugin(syntaxHighlight);
9 | eleventyConfig.addPlugin(rss);
10 |
11 | // Filters
12 | Object.keys(filters).forEach((filterName) => {
13 | eleventyConfig.addFilter(filterName, filters[filterName]);
14 | });
15 |
16 | // Transforms
17 | eleventyConfig.addTransform('htmlmin', function (content, outputPath) {
18 | if (outputPath.endsWith('.html')) {
19 | let minified = htmlmin.minify(content, {
20 | useShortDoctype: true,
21 | removeComments: true,
22 | collapseWhitespace: true,
23 | });
24 | return minified;
25 | }
26 |
27 | return content;
28 | });
29 |
30 | // Collections
31 | eleventyConfig.addCollection('entriesSorted', function (collection) {
32 | return collection.getFilteredByTag('entry').sort(function (a, b) {
33 | if (a.data.title < b.data.title) {
34 | return -1;
35 | }
36 | if (a.data.title > b.data.title) {
37 | return 1;
38 | }
39 | return 0;
40 | });
41 | });
42 |
43 | eleventyConfig.addPassthroughCopy({
44 | './src/assets/favicon': '/',
45 | './src/images': '/images',
46 | './src/assets': '/assets',
47 | './src/netlify.toml': '/netlify.toml',
48 | });
49 |
50 | return {
51 | templateFormats: ['md', 'njk'],
52 |
53 | pathPrefix: '/',
54 |
55 | markdownTemplateEngine: 'njk',
56 | htmlTemplateEngine: 'njk',
57 | dataTemplateEngine: 'njk',
58 | passthroughFileCopy: true,
59 | dir: {
60 | input: 'src',
61 | includes: '_includes',
62 | data: '_data',
63 | output: '_site',
64 | },
65 | };
66 | };
67 |
--------------------------------------------------------------------------------
/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/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/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/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/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/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/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/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/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/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/css/line-height.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "mott",
4 | "url": "https://matthiasott.com/notes/the-thing-with-leading-in-css",
5 | "title": "The Thing With Leading in CSS · 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-08-23T22:08:00.000Z",
9 | "image": "/the-thing-with-leading-in-css-·-matthias-ott-–-user-experience-designer.png",
10 | "processed": true
11 | },
12 | {
13 | "id": "hugo",
14 | "url": "https://hugogiraudel.com/2020/05/18/using-calc-to-figure-out-optimal-line-height/",
15 | "title": "Using calc to figure out optimal line-height",
16 | "description": "The following is a guest post by Jesús Ricarte, a front-end developer and volunteer translator for A List Apart in Spanish. I’m very glad to have him writi...",
17 | "author": "Jesús Ricarte",
18 | "date": "2020-05-18T00:00:00.000Z",
19 | "processed": true
20 | },
21 | {
22 | "id": "csstricks",
23 | "url": "https://css-tricks.com/how-to-tame-line-height-in-css/",
24 | "title": "How to Tame Line Height in CSS | CSS-Tricks",
25 | "description": "In CSS, line-height is probably one of the most misunderstood, yet commonly-used attributes. As designers and developers, when we think about line-height,",
26 | "date": "2020-05-15T15:09:07.000Z",
27 | "image": "/how-to-tame-line-height-in-css-or-css-tricks.jpg",
28 | "processed": true
29 | },
30 | {
31 | "id": "csstricks2",
32 | "url": "https://css-tricks.com/almanac/properties/l/line-height/",
33 | "title": "line-height | CSS-Tricks",
34 | "description": "The line-height property defines the amount of space above and below inline elements. That is, elements that are set to display: inline or display:",
35 | "date": "2015-05-15T16:23:45.000Z",
36 | "processed": true
37 | },
38 | {
39 | "id": "mdn",
40 | "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/line-height",
41 | "title": "line-height",
42 | "description": "The line-height CSS property sets the height of a line box. It’s commonly used to set the distance between lines of text.",
43 | "date": "2020-01-31T23:45:45.732Z",
44 | "image": "/mdn.png",
45 | "author": "MDN",
46 | "processed": true
47 | }
48 | ]
49 |
--------------------------------------------------------------------------------
/src/_data/entries/html/select.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "smashing",
4 | "url": "https://www.smashingmagazine.com/2020/11/standardizing-select-native-html-form-controls",
5 | "title": "Standardizing <select> And Beyond: The Past, Present And Future Of Native HTML Form Controls — Smashing Magazine",
6 | "description": "In this article, Stephanie dives into the past by going back to the beginning of HTML and tracing the evolution of form controls through to the present and the current state of working with them.",
7 | "date": "2020-11-18T12:00:00.000Z",
8 | "image": "/standardizing-select-and-beyond-the-past-present-and-future-of-native-html-form-controls-smashing-magazine.png",
9 | "processed": true
10 | },
11 | {
12 | "id": "selectpoison",
13 | "url": "https://www.24a11y.com/2019/select-your-poison",
14 | "tags": [
15 | "accessibility"
16 | ],
17 | "title": "<select> your poison - 24 Accessibility",
18 | "description": "If the web accessibility community were to somehow collectively agree on a single rallying cry, it could easily be “use native, semantic HTML elements.” This, like most things in accessibility, is an oversimplification, but it is a helpful one. As 2019 draws to a close, many of the popular component…",
19 | "date": "2020-01-04T00:49:41.000Z",
20 | "image": "/select-your-poison-24-accessibility.png",
21 | "author": "Sarah Higley",
22 | "processed": true
23 | },
24 | {
25 | "id": "selectpoison2",
26 | "url": "https://www.24a11y.com/2019/select-your-poison-part-2/",
27 | "tags": [
28 | "accessibility"
29 | ],
30 | "title": "<select> your poison part 2: test all the things - 24 Accessibility",
31 | "description": "TL:DR; Jump straight to the recommendations In part 1 of this deep dive, we took a broad look at both how the native <select> element works across browsers and platforms, and the current state of accessible custom select component implementations. It’s necessary to look at how fragmented current sel…",
32 | "date": "2019-12-18T15:11:33.000Z",
33 | "author": "Sarah Higley",
34 | "processed": true
35 | },
36 | {
37 | "id": "mdn",
38 | "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select",
39 | "title": "<select>",
40 | "description": "The HTML select element represents a control that provides a menu of options",
41 | "date": "2020-03-09T08:50:04.027Z",
42 | "image": "/mdn.png",
43 | "author": "MDN",
44 | "processed": true
45 | }
46 | ]
--------------------------------------------------------------------------------
23 | ```
24 |
--------------------------------------------------------------------------------
/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 | 
21 | 
22 |