Jon Sakas jsakas

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

This is the follow up to a post I wrote recently called From Require.js to Webpack - Party 1 (the why) which was published in my personal blog.

In that post I talked about 3 main reasons for moving from require.js to webpack:

Common JS support
NPM support
a healthy loader/plugin ecosystem.

Here I'll instead talk about some of the technical challenges that we faced during the migration. Despite the clear benefits in developer experience (DX) the setup was fairly difficult and I'd like to cover some of the challanges we faced to make the transition a bit easier.

Whether you're trying to give back to the open source community or collaborating on your own projects, knowing how to properly fork and generate pull requests is essential. Unfortunately, it's quite easy to make mistakes or not know what you should do when you're initially learning the process. I know that I certainly had considerable initial trouble with it, and I found a lot of the information on GitHub and around the internet to be rather piecemeal and incomplete - part of the process described here, another there, common hangups in a different place, and so on.

In an attempt to coallate this information for myself and others, this short tutorial is what I've found to be fairly standard procedure for creating a fork, doing your work, issuing a pull request, and merging that pull request back into the original project.

Creating a Fork

Just head over to the GitHub page and click the "Fork" button. It's just that simple. Once you've done that, you can use your favorite git client to clone your repo or j

Deploying a subfolder to GitHub Pages

Sometimes you want to have a subdirectory on the master branch be the root directory of a repository’s gh-pages branch. This is useful for things like sites developed with Yeoman, or if you have a Jekyll site contained in the master branch alongside the rest of your code.

For the sake of this example, let’s pretend the subfolder containing your site is named dist.

Step 1

Remove the dist directory from the project’s .gitignore file (it’s ignored by default by Yeoman).

1. Clone your fork:

git clone [email protected]:YOUR-USERNAME/YOUR-FORKED-REPO.git

2. Add remote from original repository in your forked repository:

cd into/cloned/fork-repo
git remote add upstream git://github.com/ORIGINAL-DEV-USERNAME/REPO-YOU-FORKED-FROM.git
git fetch upstream

	import { createProxyServer } from 'http-proxy';
	import url from 'url';
	import _ from 'lodash';

	module.exports = app => {
	const proxy = createProxyServer();
	app.all('/api/v1/*', (req, res) => {
	const path = _.drop(req.url.split('/'), 3);
	proxy.proxyRequest(req, res, {
	target: url.resolve('YOUR URL', path.join('/')),

	#! /usr/bin/env bash

	###
	#
	# install_mysql.sh
	#
	# This script assumes your Vagrantfile has been configured to map the root of
	# your application to /vagrant and that your web root is the "public" folder
	# (Laravel standard). Standard and error output is sent to
	# /vagrant/vm_build.log during provisioning.

	<?php

	/**
	* NOTE: This gist is very old. You might want to check out recent forks
	* like this one: https://github.com/Alexlytle/Wordpress_custom_route/blob/main/Wordpress_Custom_route.php
	* (thanks @Alexlytle) If you have an improvement to this gist, please
	* post a link in a comment for others who might benefit. Thanks!
	*
	* A class to create simple custom routes.
	*

	[

	{ "keys": ["super+alt+7"], "command": "encode_html_entities" },
	{ "keys": ["shift+ctrl+u"], "command": "title_case" },
	{ "keys": ["super+enter"], "command": "insert", "args": {"characters": "<br>\n"} },
	{ "keys": ["super+alt+l"], "command": "insert_snippet", "args": {"contents": "<li>${0:$SELECTION}</li>" } },
	{ "keys": ["super+alt+b"], "command": "insert_snippet", "args": {"contents": "<strong>${0:$SELECTION}</strong>" } },
	{ "keys": ["super+alt+i"], "command": "insert_snippet", "args": {"contents": "<em>${0:$SELECTION}</em>" } },
	{ "keys": ["super+alt+n"], "command": "insert_snippet", "args": {"contents": "<span>${0:$SELECTION}</span>" } },
	{ "keys": ["super+alt+down"], "command": "insert_snippet", "args": {"contents": "<sub>${0:$SELECTION}</sub>" } },

	/*
	* This work is free. You can redistribute it and/or modify it under the
	* terms of the Do What The Fuck You Want To Public License, Version 2,
	* as published by Sam Hocevar. See the COPYING file for more details.
	*/
	/*
	* Easing Functions - inspired from http://gizma.com/easing/
	* only considering the t value for the range [0, 1] => [0, 1]
	*/
	EasingFunctions = {