Skip to content

matuzo/front-end-bookmarks

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

front-end-bookmarks

https://www.frontendbookmarks.com/

A collection of articles and talks about HTML, CSS and JS, grouped by elements, attributes, properties, selectors, methods, and expressions.

Running locally

npm install 
npm run start

Then visit http://localhost:8080

Contributing

The easiest way to contribute is adding a comment in this issue with links you'd like to add.

The preferred way is to fork this repository and add the bookmarks yourself.

Adding links to existing pages

If a page already exists, e.g. meter.md, find the corresponding JSON file in /src/_data/entries/, e.g. meter.json, and add an object with only an unique id and url. Then run node getUrlData.js on the command line to fetch the title, description, metadata, and image.

[
  {
    "id": "existinglink",
    "url": "https://...",
    "title": "Existing Link",
    "processed": true
  },
  {
    "id": "newlink",
    "url": "https://this-is-the-new-link.com"
  }
]

After running the command successfully, you'll see fields added to the object.

[
  {
    "id": "existinglink",
    "url": "https://...",
    "title": "Existing Link",
    "processed": true
  },
  {
    "id": "newlink",
    "title": "New link title",
    "url": "https://this-is-the-new-link.com",
    "description": "Meta description",
    "date": "2020-02-10T19:10:03.175Z",
    "image": "/image.png",
    "processed": true
  }
]

Adding a page

If you want to add a new page, create a JSON file in one of the subfolders in /src/_data/entries/ and add an array of link objects.

[
  {
    "id": "link",
    "url": "https://this-is-the-link.com"
  },
    {
    "id": "anotherlink",
    "url": "https://this-is-the-another-link.com"
  },
]

Then run node getUrlData.js on the command line to fetch the title, description, meta data, and image.

Now copy one of the .md files in one of the subfolders in /src/languages, rename it and edit the following fields:

  • title (name of the property, element, etc.)
  • short_desc (Short defintion)
  • definition (Official defintion)
  • links (name of the JSON file)

...and change the code sample at the bottom.

---
title: ":nth-child()"
short_desc: "Represents an element that has an+b-1 siblings before it in the document tree."
tags:
  - css
  - selectors
  - entry
permalink: css/selectors/{{ title | slug }}/index.html
definition:
  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."
  cite:
    text: "6.6.5.2. :nth-child() pseudo-class"
    url: https://www.w3.org/TR/selectors-3/#nth-child-pseudo
links: "nthchild"
---

<h2 class="h3"><span>Code sample</span></h2>

```css
li:nth-child(2n) {
  border: 5px solid fuchsia;
}

About

A collection of articles and talks about HTML, CSS and JS, grouped by elements, attributes, properties, selectors, methods, and expressions.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •