Khachatur Khachatour

JSS: JSON Style Sheets

“Wait, what?”

Sometimes you want to include some CSS in a JavaScript file. Maybe it's a standalone widget. A big ol' string is a pain to manage, and won't minify so pretty. Especially if you want your CSS safely namespaced. For example:

.widget {
    background: #abc123;
    width: 100px;

/* ... */

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

System Design Cheatsheet

Picking the right architecture = Picking the right battles + Managing trade-offs

Basic Steps

Clarify and agree on the scope of the system

User cases (description of sequences of events that, taken together, lead to a system doing something useful)
- Who is going to use it?
- How are they going to use it?

2019 update: this essay has been updated on my personal site, together with a followup on how to get started

2020 update: I'm now writing a book with updated versions of all these essays and 35 other chapters!!!!

1. Learn in public

If there's a golden rule, it's this one, so I put it first. All the other rules are more or less elaborations of this rule #1.

You already know that you will never be done learning. But most people "learn in private", and lurk. They consume content without creating any themselves. Again, that's fine, but we're here to talk about being in the top quintile. What you do here is to have a habit of creating learning exhaust. Write blogs and tutorials and cheatsheets. Speak at meetups and conferences. Ask and answer things on Stackoverflow or Reddit. (Avoid the walled gardens like Slack and Discourse, they're not public). Make Youtube videos

Hey everyone - this is not just a one off thing, there are likely to be many other modules in your dependency trees that are now a burden to their authors. I didn't create this code for altruistic motivations, I created it for fun. I was learning, and learning is fun. I gave it away because it was easy to do so, and because sharing helps learning too. I think most of the small modules on npm were created for reasons like this. However, that was a long time ago. I've since moved on from this module and moved on from that thing too and in the process of moving on from that as well. I've written way better modules than this, the internet just hasn't fully caught up.

@broros

otherwise why would he hand over a popular package to a stranger?

If it's not fun anymore, you get literally nothing from maintaining a popular package.

One time, I was working as a dishwasher in a restu

Figma Plugin Development Live Reload

Create a run-plugin.sh somewhere in your project
Copy the code from the run-plugin.sh file in this gist
Install nodemon with yarn add --dev nodemon
Add a script in the scripts property of your package.json replacing PLUGIN_CODE_FOLDER by the path to the folder where your plugin code lives
```
"scripts": {
```

"livereload": "nodemon --watch PLUGIN_CODE_FOLDER --exec run-plugin.sh"

	/* Sometimes it's pretty easy to run ito troubles with React ES6 components.
	Consider the following code: */

	class EventStub extends Component {
	componentDidMount() {
	window.addEventListener('resize', this.onResize.bind(this)); //notice .bind
	}

	componentWillUnmount() {
	window.removeEventListener('resize', this.onResize.bind(this));

	import React from 'react';
	import injectStyle from './path/to/injectStyle';

	export default class SampleComponent extends React.Component {
	constructor(props) {
	super(props);

	const keyframesStyle = `
	@-webkit-keyframes pulse {
	0% { background-color: #fecd6d; }

	#compdef git-merge-pr

	_git-merge-pr () {
	# Note: requires hub and jq to be installed

	# https://developer.github.com/v3/pulls/#list-pull-requests
	# hub api /repos/{owner}/{repo}/pulls
	PRS=$(
	hub api /repos/{owner}/{repo}/pulls \
	\| jq 'map({title, number, head})'

	import {
	convertGradientHandlesToTransform,
	convertTransformToGradientHandles
	} from "./setPropertyFill"

	describe("convertGradientHandlesToTransform", () => {
	it("identity matrix", () => {
	expect(
	convertGradientHandlesToTransform([
	{