Snippets

These snippets are my attempt to save and organize various bits of code, best practices, and resources relating to web development and design. They also function as a to do list of sorts, for things I want to implement in my own code, but haven’t yet. The concept is inspired by Jeremy Keith’s links and CSS-Tricks, among other things. Enjoy.

Mozilla's Readability.js

A standalone version of the readability library used for Firefox Reader View.

[…]

To parse a document, you must create a new Readability object from a document object, and then call parse(). Here’s an example:

var article = new Readability(document).parse();

This article object will contain the following properties:

  • title: article title
  • content: HTML string of processed article content
  • length: length of an article, in characters
  • excerpt: article description, or short excerpt from the content
  • byline: author metadata
  • dir: content direction

If you’re using Readability on the web, you will likely be able to use a document reference from elsewhere (e.g. fetched via XMLHttpRequest, in a same-origin <iframe> you have access to, etc.).

Tags: 

Splitting - text animation library

A stylized "Splitting" with a banana mascot.
That's one determined banana.

Splitting creates elements and adds CSS variables to unlock amazing possibilities for animating text, grids, and more!

DoubleDash your CSS

The previously impractical becomes easy with Splitting’s CSS Variables.

Comically Small

A shocking amount of features in a 1.5kb (minified & gzipped) package.

Progressively Enhance

Upgrade websites for modern browsers without breaking IE.

Tags: 

Is Google Always Listening?

Jarvis Johnson explains that big companies like Google and Facebook don’t need to listen in on you via your phone/tablet, because they already collect so much data on you that they can guess what ads might be relevant on that alone. I love the critical thinking aspect to this - it’s easy to oversimplify complex systems, because our brains aren’t good at understanding that many variables, but reality is not required to bend to our beliefs.

Tags: 

Macbeth font face

A preview of the Macbeth font face.

Macbeth is a unique new hand drawn OpenType SVG font from Giemons. This new font format allows for amazing authentic detail in each letter. This is an aggressive font with uppercase & lowercase characters as well as numbers, punctuation and a few extra marks. Use this for awesome displays, labeling, clothing, posters, movie titles, album covers, logos, and much more.

Note: SVG font formats are compatible with Photoshop CC 2017 or Illustrator CC 2018 + newer.

DOWNLOAD HERE
Free for personal & commercial use

Tags: 

Briberra font face

A preview of the Briberra font face.

Introducing Briberra, a rough bold script designed by Sarid Ezra!

Briberra is hand lettering script font that contains stylistic alternates & swashes that will help to create your own customized designs. You can use this font for quotes, t-shirt designs, branding, plus plenty of other projects. This font contains multi lingual characters, supports PUA and is available in OTF and TTF formats.

DOWNLOAD HERE
Free for personal & commercial use

Tags: 

Pages