Gokulakrishnan Kalaikovan gokulkrishh

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

How to debug/develop npm package

Source

npm link

Destination

NPX (NPM Package Runner) Commands

List of useful npx (NPM Package Runner) commands.

What is NPX?

Using NPX we can execute/run node binaries without the need to install it locally or globally.

Commands

Crash Course in CrUX

CrUX is the Chrome UX Report from Google. This crash course will take you through everything you need to get the most out of the data.

1. Official Docs

https://developers.google.com/web/tools/chrome-user-experience-report/

	// useful links:
	// custom easing by Lochie (x.com/lochieaxon): https://www.easing.dev
	// motion-primitives by Ibelick (x.com/Ibelick): https://motion-primitives.com/docs
	// The Magic of Clip Path article by Emil Kowalski (x.com/emilkowalski_): https://emilkowal.ski/ui/the-magic-of-clip-path

	// we use same transition for every element to make it look consistent
	const transition: Transition = {
	duration: 2.5,
	// custom easing from https://www.easing.dev
	ease: [0.175, 0.885, 0.32, 1],

	import { useEffect, useRef } from "react";

	type GestureType =
	\| "swipeUp"
	\| "swipeDown"
	\| "swipeLeft"
	\| "swipeRight"
	\| "tap"
	\| "pinch"
	\| "zoom";

	import { useCallback, useEffect, useRef, useState } from "react";

	interface UseBroadcastChannelOptions {
	name: string;
	onMessage?: (event: MessageEvent) => void;
	onMessageError?: (event: MessageEvent) => void;
	}

	interface UseBroadcastChannelReturn<D, P> {
	isSupported: boolean;

	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

	/* Highliting accessibility errors in HTML */

	/* highlight HTML element with invalid value for lang attribute */
	html:not([lang]),
	html[lang=""] {
	border: 2px dotted red !important;
	}

	/* highlight images missing alt text */
	img:not([alt]) {

	/* Helper buddy for removing async/await try/catch litter 🗑 */
	function O_o(promise) {
	return promise.then(data => {
	if (data instanceof Error) return [data]
	return [null, data]
	}).catch(err => [err])
	}

	/* Look ma, no try/catch */
	async function usageExample(params) {