Skip to content

Instantly share code, notes, and snippets.

Cooking something

Petr Brzek petrbrzek

Cooking something
View GitHub Profile
GDreyV / xd.json.service.ts
Last active Dec 9, 2019
Convert Xd scenegraph to JSON format
View xd.json.service.ts
import scenegraph from "scenegraph";
class ConvertOptions {
// skip iterating over nested nodes to prevent infinite loop
public doNotExpandNodes = false;
* Converts xd nodes into json object
tmeasday /
Last active Nov 28, 2019
Storybook example file format

Simple API: export Component (for docs) and examples ("renderables")

import React from 'react';

import Component from 'somewhere';

export default Component;

export const variant1 = () => <Component variant="1" />;
View deferComponentRender.js
import hoistStatics from 'hoist-non-react-statics';
import React from 'react';
* Allows two animation frames to complete to allow other components to update
* and re-render before mounting and rendering an expensive `WrappedComponent`.
export default function deferComponentRender(WrappedComponent) {
class DeferredRenderWrapper extends React.Component {
constructor(props, context) {
paulirish /
Last active Dec 3, 2021
What forces layout/reflow. The comprehensive list.

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
paulirish /
Last active Dec 3, 2021
How to view-source of a Chrome extension

Option 1: Command-line download extension as zip and extract

extension_id=jifpbeccnghkjeaalbbjmodiffmgedin   # change this ID
curl -L -o "$" "$extension_id%26uc" 
unzip -d "$extension_id-source" "$"

Thx to crxviewer for the magic download URL.

View bling.js
/* bling.js */
window.$ = document.querySelectorAll.bind(document);
Node.prototype.on = window.on = function (name, fn) {
this.addEventListener(name, fn);
NodeList.prototype.__proto__ = Array.prototype;
boutell / reverse-linked-list.js
Created Feb 16, 2015
Reversing a linked list in JavaScript
View reverse-linked-list.js
var list = {
name: 'bob',
next: {
name: 'dick',
next: {
name: 'harry'
anaisbetts / analytics.js
Created Jan 7, 2015
Google Analytics in Atom Shell
View analytics.js
// Pretend that cookies work
(function (document) {
var cookies = {};
document.__defineGetter__('cookie', function () {
var output = [];
for (var cookieName in cookies) {
output.push(cookieName + "=" + cookies[cookieName]);
return output.join(";");
dypsilon /
Last active Dec 2, 2021
A badass list of frontend development resources I collected over time.
trent-boyd /
Created Dec 9, 2012
LESS: Proper Syntax for CSS3 "Saturate" Filter

What You Think Would Work

You'd think that the way LESS works, you could just make your own .saturate() function to handle all of your various vendor-specific CSS rules, like so:

.saturate(@pct) {
	filter: saturate(@pct);
	-webkit-filter: saturate(@pct);
	-moz-filter: saturate(@pct);