taranda

Dynamically Add Critical CSS to Your Rails App

Optimizing the delivery of CSS is one way to improve user experience, load speed and SEO of your web app. This involves determining the "critical path CSS" and embeding it into the html of your page. The rest of the CSS for the site is loaded asynchronously so it does not block the rendering of your "above the fold" content. This Gist will show you how to dynamically generate critical path CSS for your Rails app.

In this example we will use the mudbugmedia/critical-path-css gem.

Prerequisites

You will need to set up caching and Active Job in your Rails app. I recommend using a thread-safe background job manager like resque.

simevidas

ECMAScript Modules

• modules are automatically strict mode
• declarations inside a module are scoped to that module (not visible by other scripts)
• ECMAScript does not define what import does (it’s left up to the implementation)
• there is no error recovery; “if anything fails to load or link, nothing runs”
• exporting:

  • you can export any top-level function, class, var, let, or const

tswaters

This is way more complicated than it should be. The following conditions need to be met :

1. need to be able to track and merge in upstream changes
2. don't want remote commit messages in master
3. only interested in sub-directory of another repo
4. needs to go in a subdirectory in my repo.

In this particular case, I'm interested in bringing in the 'default' template of jsdoc as a sub-directory in my project so I could potentially make changes to the markup it genereates while also being able to update from upstream if there are changes. Ideally their template should be a separate repo added to jsdoc via a submodule -- this way I could fork it and things would be much easier.... but, it is what it is.

After much struggling with git, subtree and git-subtree, I ended up finding this http://archive.h2ik.co/2011/03/having-fun-with-git-subtree/ -- it basically sets up separate branches from tracking remote, the particular sub-directory, and uses git subtree contrib module to pull it all togther. Following are

budparr

{% capture the_collection %}{{page.collection}}{% endcapture %}
  {% if page.collection %}
    {% assign  document = site[the_collection]  %}
  {% endif %}
<h1>TITLE: {{ page.title }}</h1>
{% for links in document  %}
  {% if links.title == page.title %}
    {% unless forloop.first %}
      {% assign prevurl = prev.url %}
    {% endunless %}

alademann

/**
 * Fetch a deeply nested value in a multi-level map using object dot-notation string OR a list of keys.
 *
 * @requires sassy-maps
 * @requires SassyLists
 * @requires is-map
 * @requires is-string
 * @requires is-list
 *
 * @param {map}           $map

brettz9

/**
 * Add dataset support to elements
 * No globals, no overriding prototype with non-standard methods, 
 *   handles CamelCase properly, attempts to use standard 
 *   Object.defineProperty() (and Function bind()) methods, 
 *   falls back to native implementation when existing
 * Inspired by http://code.eligrey.com/html5/dataset/ 
 *   (via https://github.com/adalgiso/html5-dataset/blob/master/html5-dataset.js )
 * Depends on Function.bind and Object.defineProperty/Object.getOwnPropertyDescriptor (polyfills below)
 * All code below is Licensed under the X11/MIT License