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.

Moon Flower font face

A preview of the Moon Flower font face.

FONT BY DENISE BENTULAN (c) 2013
http://deathmunkey.deviantart.com
http://www.dafont.com/denise-bentulan.d2156
http://douxiegirl.com
—————————————————————————————–
Free for personal use ONLY.
For commercial use, please email the designer at [email protected] or [email protected]
—————————————————————————————–
PayPal donations are highly appreciated!
these help me in a way through college.
you may send them to my PayPal account, [email protected].

Tags: 

When 7 KB Equals 7 MB

While testing a progressive web app for one of our clients, I bumped into a suspicious error in the browser console:

DOMException: Quota exceeded.

After browsing the app a few more times, it became clear the error would occur after a small number of images were added to the cache storage by the service worker. Looking in the Chrome DevTools Application tab, the cache storage was indeed over capacity.

Chrome DevTools showing over-capacity cache storage.
Chrome DevTools showing over-capacity cache storage.

How could this be? There were only ~15 images in the cache storage. Something was off.

What I found could significantly impact your progressive web app—particularly if you use a CDN on a different domain for your assets.

[…]

If you are building a progressive web app and are experiencing bloated cache storage when your service worker caches static assets served from CDNs, make sure the proper CORS response header exists for cross-origin resources, you do not cache opaque responses with your service worker unintentionally, you opt-in cross-origin image assets into CORS mode by adding the crossorigin attribute to the <img> tag.

See the source link for more details.

Tags: 

Gilbert font face

A preview of the Gilbert font face in both black and multiple colour faces.

On 31 March, 2017, Gilbert Baker the creator of the iconic Rainbow Flag sadly passed away. Mr. Baker was both an LGBTQ activist and artist, and was known for helping friends create banners for protests and marches. To honor the memory of Gilbert Baker, NewFest and NYC Pride partnered with Fontself to create a free font inspired by the design language of the iconic Rainbow Flag, the font was named ‘Gilbert’ after Mr. Baker.

Available under the CC BY-SA 4.0 license.

Tags: 

Bebas Neue font face

The text "Bebas Neue" in the titular font face.

Bebas Neue is a sans serif font family based on the original Bebas Neue free font by Ryoichi Tsunekawa. It has grown in popularity and become something like the “Helvetica of the free fonts”.
Now the family has four new members – Thin, Light, Book, and Regular – added by Fontfabric Type Foundry.

The new weights stay true to the style and grace of Bebas with the familiar clean lines, elegant shapes, a blend of technical straightforwardness and simple warmth which make it uniformly proper for web, print, commerce and art.

Originally designed by Ryoichi Tsunekawa, Flat-It Type Foundry.

Available under the Open Font License.

Tags: 

Pages