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 %}

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.

stefanledin

(function () {
    // An object with options for the IntersectionObserver.
    const options = {
        // 0.5 = The callback is fired when 50% of the element is visible
        // We can add more values to the array, like 0.25, 0.75 or 1.0
        threshold: [0.5]
    };

    // Instantiate the IntersectionObserver class
    const observer = new IntersectionObserver((entries, observer) => {

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

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

leevigraham

<flyout v-cloak>
    <div slot-scope="props">
        <button
            v-on:click="props.toggle()"
            v-bind:class="'border-2 p-1 ' + (props.isActive ? 'bg-green': 'bg-red')"
            data-reference
        >…</button>
        <div
            v-show="props.isActive"
            class="list-reset bg-white border p-4 shadow z-10"