Tomas Pustelnik Pustelto

Essential JavaScript Links

I no longer mantain this list. There are lots of other very comprehensive JavaScript link lists out there. Please see those, instead (Google "awesome JavaScript" for a start).

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

FWIW: I (@rondy) am not the creator of the content shared here, which is an excerpt from Edmond Lau's book. I simply copied and pasted it from another location and saved it as a personal note, before it gained popularity on news.ycombinator.com. Unfortunately, I cannot recall the exact origin of the original source, nor was I able to find the author's name, so I am can't provide the appropriate credits.

Effective Engineer - Notes

By Edmond Lau
Highly Recommended 👍
http://www.theeffectiveengineer.com/

What's an Effective Engineer?

tig - Text-mode interface for git

This is a proposal for #ReactiveConf 2017 open call for Lightning talks.

Do you think that using git command line tool is the most efficient way of interacting with your repository? In this lightning talk, I will introduce tig - the ncurses front-end for git, which will make your interaction with git much more efficient.

tig combines the advantages of the command line and GUI tools like qgit. With a couple of keystrokes, you are

If you use Storybook with Next.js and have components using next/link you'll have to mock next/router the same you would for testing with Jest or others. Simply create a file with the mock router as shown below and import it in your Storybook config.

This is based on some information from an issue on Next.js:

vercel/next.js#1827

Example of the creating markdown table from the gl-code-quality-report.json Gitlab's code quality report with codeclimate SPEC.

Install jq

Run the next command to convert gl-code-quality-report.json to markdown:

jq -r '. | sort_by((.location.path | explode | map(-.)), .location.lines.begin) | .[] | @text "| [\(.location.path):\(.location.lines.begin)](../blob/BRANCH-NAME/\(.location.path)#L\(.location.lines.begin)) | \(.description)"' gl-code-quality-report.json

Add table header to the beggigning of the output:

| Path | Description |

	#!/bin/bash

	# Runs the specified command (provided by the first argument) in all tmux panes
	# in every window. If an application is currently running in a given pane
	# (e.g., vim), it is suspended and then resumed so the command can be run.
	all-panes()
	{
	all-panes-bg_ "$1" &
	}

	html {
	/* Adjust font size */
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	/* Font varient */
	font-variant-ligatures: none;
	-webkit-font-variant-ligatures: none;
	/* Smoothing */
	text-rendering: optimizeLegibility;
	-moz-osx-font-smoothing: grayscale;

	<html>
	<head>
	<script src="https://www.gstatic.com/firebasejs/3.0.0/firebase.js"></script>
	<title>ZeroToApp</title>
	<style>
	#messages { width: 40em; border: 1px solid grey; min-height: 20em; }
	#messages img { max-width: 240px; max-height: 160px; display: block; }
	#header { position: fixed; top: 0; background-color: white; }
	.push { margin-bottom: 2em; }
	@keyframes yellow-fade { 0% {background: #f2f2b8;} 100% {background: none;} }