All Projects → morris → Typekit Cache

morris / Typekit Cache

Licence: other
Keeps a site's Typekit in localStorage and injects it on page load, eliminating the Flash Of Invisible/Unstyled Text.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Typekit Cache

Awesome Design
🌟 Curated design resources from all over the world.
Stars: ✭ 13,333 (+5211.95%)
Mutual labels:  ux
Server
☁️ Nextcloud server, a safe home for all your data
Stars: ✭ 17,723 (+6960.96%)
Mutual labels:  ux
Smart Hierarchy
Better hierarchy for Unity.
Stars: ✭ 234 (-6.77%)
Mutual labels:  ux
Animatable Component
Animate once, use Everywhere! 💫
Stars: ✭ 188 (-25.1%)
Mutual labels:  ux
Product Series
📚 产品迷思,不仅仅是产品经理,对于产品设计、交互体验、项目管理、行业视点等多方面的思考。
Stars: ✭ 226 (-9.96%)
Mutual labels:  ux
Primer
Intro Animation like Google Primer
Stars: ✭ 230 (-8.37%)
Mutual labels:  ux
Osiris
An Electron based desktop application for generating components, building pages, and storing them in a UI library.
Stars: ✭ 175 (-30.28%)
Mutual labels:  ux
Browser Sec Whitepaper
Cure53 Browser Security White Paper
Stars: ✭ 251 (+0%)
Mutual labels:  ux
Permissionsswiftui
A SwiftUI package to beautifully display and handle permissions.
Stars: ✭ 220 (-12.35%)
Mutual labels:  ux
Accessibility interview questions
A starting point for questions to ask someone that wants you to give them a job
Stars: ✭ 236 (-5.98%)
Mutual labels:  ux
Lunacy Docs
Documentation for Lunacy, Graphic Design Software with built-in assets
Stars: ✭ 190 (-24.3%)
Mutual labels:  ux
Shrine Materialdesign2
implementation of Material Design 2 Shrine project
Stars: ✭ 215 (-14.34%)
Mutual labels:  ux
Medium Zoom
🔎🖼 A JavaScript library for zooming images like Medium
Stars: ✭ 2,799 (+1015.14%)
Mutual labels:  ux
Flutter Ui Kit
A repository full of beautiful UI examples in Flutter
Stars: ✭ 188 (-25.1%)
Mutual labels:  ux
Sketchsheets
Free ready to print sketch sheet templates for UX designers
Stars: ✭ 241 (-3.98%)
Mutual labels:  ux
Feathericon
simply generic vector icon collection - including sketch file, svg files, and font files.
Stars: ✭ 178 (-29.08%)
Mutual labels:  webfonts
Shiny
Shiny uses your gyroscope to simulate lighting and motion effects on colors. Works on almost every SwiftUI View.
Stars: ✭ 226 (-9.96%)
Mutual labels:  ux
Framevuerk
Fast, Responsive, Multi Language, Both Direction Support and Configurable UI Framework based on Vue.js.
Stars: ✭ 252 (+0.4%)
Mutual labels:  ux
Typography
C# Font Reader (TrueType / OpenType / OpenFont / CFF / woff / woff2) , Glyphs Layout and Rendering
Stars: ✭ 246 (-1.99%)
Mutual labels:  webfonts
Tinycreditcard
A clear and animated credit card input workflow implement
Stars: ✭ 236 (-5.98%)
Mutual labels:  ux

Typekit Cache

Revision 14

Current Status: typekit-cache only works for older Typekit installations (using JavaScript). Newer installations use a <link> tag; all resources are cached properly by the browser and served from disk on a revisit. This cannot be further improved so upgrading to the <link> embed and removing typekit-cache is recommended.


Keeps a site's Typekit in localStorage and injects it on page load. Eliminates the annoying Flash Of Invisible/Unstyled Text (FOUT) and provides better UX for slow or offline connections.

The same requests are sent as in loading a Typekit regularly, and the Typekit embed code is unaltered. However, using this script may still violate the Typekit Terms Of Use.

Usage

Copy the contents of typekit-cache.min.js right before your Typekit (advanced) embed code. That's it, your website should be caching your Typekit happily.

<script>
  /* contents of typekit-cache.min.js */
</script>
<script>
  (function(d) {
    var config = {
      kitId: 'abcd1234',
      scriptTimeout: 3000
    },
    h=d.documentElement, // ...
  })(document);
</script>

Notes

The regular Typekit behavior is not modified at all. Exceptions visible in the console (e.g. if the storage is not available) can be safely ignored. However, you should use separate <script> tags to ensure the Typekit embed code is still run if an exception occurs.

In addition to the regular wf-* classes, the wf-cached class is added to the <html> tag on cache hit.

To use sessionStorage instead, just replace the localStorage reference.

Contributing

Make sure PRs contain an updated minified version. Run npm run prepublish to build it.

Contributors

Thanks!

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].