Skip to content

Instantly share code, notes, and snippets.

Avatar
🚄
Making treo.sh

Aleksey Kulikov alekseykulikov

🚄
Making treo.sh
View GitHub Profile
@alekseykulikov
alekseykulikov / github-actions-ranking.md
Last active Jul 15, 2020
Github Actions Ranking (June 18, 2020)
View github-actions-ranking.md

Github Actions is a CI/CD platform that gained a lot of popularity recently. I participated in building ⭐️ Lighthouse CI Action and was curious how well it performs.

But Github Marketplace UI shows no ranking information. Essentially, It's a search with random results; at least, I don't understand the order. I couldn't find ⭐️ Lighthouse CI Action in Continuous integration category after browsing 50 available pages (Each page shows 20 results, so it's possible to see only 1000 results, but CI category has 1469 😐).

I decided to build a custom script that crawls all categories and use Github Search (example query) to estimate usa

View search.css
input[type="search"]::-webkit-search-cancel-button {
--size: 11px;
--background: #7F7F7F;
--icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3IiBoZWlnaHQ9IjciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9ImZlYXRoZXIgZmVhdGhlci14Ij48cGF0aCBkPSJNMTggNkw2IDE4TTYgNmwxMiAxMiIvPjwvc3ZnPgo=");
-webkit-appearance: none;
height: var(--size);
width: var(--size);
border-radius: 50%;
background: var(--background) var(--icon) 50% 50% no-repeat;
}
@developit
developit / *cjyes.md
Last active Jun 10, 2020
more-or-less instant command-line ESM to CJS transform. Copies from src to dist. `cjyes src/*.js`
View *cjyes.md

cjyes npm version

🔍 see jay, yes! 🎉 / 👨🏻‍💻 see, JS! 👾 / ⚓️ sea JS

If you're publishing ES Modules, you need to also publish CommonJS versions of those modules.

This isn't to support old browsers or Node versions: even in Node 14, using require() to load a module won't work if it's only available as ESM.

cjyes is the bare minimum fix for this problem. You write ES Modules and fill out a valid package.json, and it'll generate the corresponding CommonJS files pretty much instantly. cjyes takes up 500kb of disk space including its two dependencies.

View little-vdom.js
export const h=(t,p,...c)=>({t,p,c,k:p&&p.key})
export const render=(e,d,t=d.t||(d.t={}),p,r,c,m,y)=>
// arrays
e.map?e.map((e,p)=>render(e,d,t.o&&t.o[p])):
// components
e.t.call?(e.i=render((render.c=e).t(Object.assign({children:e.c},e.p),e.s=t.s||{},t=>
render(Object.assign(e.s,t)&&e,d,e)),t.i||d,t&&t.i||{}),d.t=t=e):(
// create notes
m=t.d||(e.t?document.createElement(e.t):new Text(e.p)),
// diff props
View *finally-polyfill.md

finally-polyfill

A tiny ~150-byte polyfill for Promise.prototype.finally.

Useful for browsers that support Promise but not the .finally() method.

Usage

npm install finally-polyfill

View CrUXnow.md

CrUX.now() (bit.ly/crux-now)

(10min demo at the performance.now() meetup, 20 November 2019, Amsterdam)

CrUX is the Chrome User Experience Report, a public dataset of performance and UX data from real Chrome users in the field.

Quick facts:

  • Launched in November 2017
  • Monthly data dumps (second Tuesday)
@alekseykulikov
alekseykulikov / psi-extra-features.md
Last active Jul 30, 2020
Extra features of PageSpeed Insights API
View psi-extra-features.md

In this article, I would like to share three features of PageSpeed Insights (PSI), that is not easy to find in the official documentation. I discovered them while hacking on the Lighthouse plugin and integrating PSI to Treo.sh.

For a context, PSI is a simple yet powerful API by Google, that audits your page using Lighthouse and provides real-world users' data from Chrome UX Report (CrUX).

1. Audit many categories with one request

By default, PSI API returns only performance category. It's possible to pass ?category argument multiple times and get a report with many Lighthouse categories using one request (available categories: performance, accessibility, best-practices, seo, pwa).

curl -i "https://www.googleapis.com/pagespe
View Importable Constructable Stylesheets.md

Proposal: Importable Constructable Stylesheets

We're getting Constructable Stylesheets. This seems like an intuitive value to obtain when importing CSS from JavaScript, since it's the DOM's representation of a Stylesheet:

import stylesheet from './style.css';
console.log(stylesheet);  // CSSStyleSheet

No such system is in place to allow this to work (see [whatwg/loader]), however frontend build tooling has congregated around this approach as a mechanism for bringing CSS assets into the JavaScript module graph. There are many benefits to be obtained from moving CSS into this graph, however the most important is that imported CSS can be attributed to the consuming JS Module. This allows it to be bundled, optimized, and potentially dead-code-eliminated leveraging static analysis performed on the surrounding module graph.

@bluesmoon
bluesmoon / loader.html
Last active Apr 17, 2020
A CSP compliant non-blocking script loader
View loader.html
<script id="nb-loader-script">
(function(url) {
// document.currentScript works on most browsers, but not all
var where = document.currentScript || document.getElementById("nb-loader-script"),
promoted = false,
LOADER_TIMEOUT = 3000,
IDPREFIX = "__nb-script";
// function to promote a preload link node to an async script node
You can’t perform that action at this time.