Csaba Palfi csabapalfi

Common Bugs when Learning React

The following list tries to summarize some of the things that a developer may encounter while learning React. The list focuses on scenarios that result in actual bugs (things that don't work) or things that cause warnings in the console.

using class prop instead of className (for/htmlFor, etc...)
trying to set the style prop with a string
not having a parent element or fragment
not binding (at all or incorrectly)
using the wrong lifecycle hook
misspelling componentWillReceiveProps

Eric Elliott's "Master the JavaScript Interview" Series

A collection of links to the "Master the JavaScript Interview" series of medium stories by Eric Elliott.

Not part of the series but a good grounding.

Master the JavaScript Interview

collapsible markdown?

CLICK ME

yes, even hidden code blocks!

print("hello world!")

Vim without NERD tree or CtrlP

I used to use NERD tree for quite a while, then switched to CtrlP for something a little more lightweight. My setup now includes zero file browser or tree view, and instead uses native Vim fuzzy search and auto-directory switching.

Fuzzy Search

There is a super sweet feature in Vim whereby you can fuzzy find your files using **/*, e.g.:

:vs **/*<partial file name><Tab>

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

	import { h, Component } from 'preact';
	import { Router } from 'preact-router';

	import Header from './header';
	import Home from '../routes/home';
	import Profile from '../routes/profile';
	import NotifyChange from "./NotifyChange/index";
	// import Home from 'async!../routes/home';
	// import Profile from 'async!../routes/profile';

	// UPDATE: In 2023, you should probably stop using this! The narrow version of Safari that
	// does not support `nomodule` is probably not being used anywhere. The code below is left
	// for posterity.

	/**
	* Safari 10.1 supports modules, but does not support the `nomodule` attribute - it will
	* load <script nomodule> anyway. This snippet solve this problem, but only for script
	* tags that load external code, e.g.: <script nomodule src="nomodule.js"></script>
	*
	* Again: this will not prevent inline script, e.g.:

	var head = document.getElementsByTagName('head')[0];

	// Save the original method
	var insertBefore = head.insertBefore;

	// Replace it!
	head.insertBefore = function (newElement, referenceElement) {

	if (newElement.href && newElement.href.indexOf('https://fonts.googleapis.com/css?family=Roboto') === 0) {
	return;

	#!/bin/bash

	set -e

	#node="/home/vagrant/nodes/iojs-v1.6.2-linux-x64/bin/iojs"
	node="/home/vagrant/nodes/node-v0.12.1-linux-x64/bin/node"
	node_flags='--perf_basic_prof'
	script='/home/vagrant/porf/single.js'
	script_log=/dev/null
	# load_generator="node test.js"

	/*!
	* Copyright 2015 Google Inc. All rights reserved.
	*
	* Licensed under the Apache License, Version 2.0 (the "License");
	* you may not use this file except in compliance with the License.
	* You may obtain a copy of the License at
	*
	* http://www.apache.org/licenses/LICENSE-2.0
	*
	* Unless required by applicable law or agreed to in writing, software