- 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-levelfunction
,class
,var
,let
, orconst
-
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(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) => { |
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.
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{% 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 %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Whitespace+ irregular whitespace detection | |
// https://marketplace.visualstudio.com/items?itemName=davidhouchin.whitespace-plus | |
// Inspired by eslint https://github.com/eslint/eslint/blob/master/lib/rules/no-irregular-whitespace.js | |
{ | |
"mode": "all", | |
"autoStart": true, | |
"refreshRate": 100, | |
"elements": | |
[{ | |
"name": "space", |
I got this image from here http://placeimg.com/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<div class="inline-block" v-html="require('icon-' + this.icon + '.svg')"></div> | |
</template> | |
<style module> | |
.svg { | |
fill: currentColor; | |
height: 1em; | |
margin-top: -4px; | |
vertical-align: middle; |
OlderNewer