Skip to content

Instantly share code, notes, and snippets.

Avatar
🥑
Cooking something

Petr Brzek petrbrzek

🥑
Cooking something
View GitHub Profile
@GDreyV
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
tmeasday / component.examples.md
Last active Nov 28, 2019
Storybook example file format
View component.examples.md

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
paulirish / what-forces-layout.md
Last active Dec 3, 2021
What forces layout/reflow. The comprehensive list.
View what-forces-layout.md

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
paulirish / how-to-view-source-of-chrome-extension.md
Last active Dec 3, 2021
How to view-source of a Chrome extension
View how-to-view-source-of-chrome-extension.md

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

extension_id=jifpbeccnghkjeaalbbjmodiffmgedin   # change this ID
curl -L -o "$extension_id.zip" "https://clients2.google.com/service/update2/crx?response=redirect&os=mac&arch=x86-64&nacl_arch=x86-64&prod=chromecrx&prodchannel=stable&prodversion=44.0.2403.130&x=id%3D$extension_id%26uc" 
unzip -d "$extension_id-source" "$extension_id.zip"

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
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
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
dypsilon / frontendDevlopmentBookmarks.md
Last active Dec 2, 2021
A badass list of frontend development resources I collected over time.
View frontendDevlopmentBookmarks.md
@trent-boyd
trent-boyd / less-saturate-fix.md
Created Dec 9, 2012
LESS: Proper Syntax for CSS3 "Saturate" Filter
View less-saturate-fix.md

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);