Sam Hernandez samhernandez

How to make faster scroll effects?

Avoid too many reflows (the browser to recalculate everything)
Use advanced CSS3 for graphic card rendering
Precalculate sizes and positions

Beware of reflows

The reflow appens as many times as there are frames per seconds. It recalculate all positions that change in order to diplay them. Basically, when you scroll you execute a function where you move things between two reflows. But there are functions that triggers reflows such as jQuery offset, scroll... So there are two things to take care about when you dynamically change objects in javascript to avoid too many reflows:

Simple Docker Compose files for PHP development

Apache + PostgreSQL + MySQL

docker-compose -f docker-compose.apache.yml up

nginx + Apache + PostgreSQL + MySQL

docker-compose -f docker-compose.nginx+apache.yml up

nginx + PHP-FPM + PostgreSQL + MySQL

docker-compose -f docker-compose.nginx+php-fpm.yml up

Docker (Mac) De-facto Standard Host Address Alias

This launchd script will ensure that your Docker environment on your Mac will have 10.254.254.254 as an alias on your loopback device (127.0.0.1). The command being run is ifconfig lo0 alias 10.254.254.254.

Once your machine has a well known IP address, your PHP container will then be able to connect to it, specifically XDebug can connect to it at the configured xdebug.remote_host.

Installation Of IP Alias (This survives reboot)

Copy/Paste the following in terminal with sudo (must be root as the target directory is owned by root)...

Installing Postgres via Brew

Pre-Reqs

Brew Package Manager

In your command-line run the following commands:

brew doctor
brew update

	#!/bin/sh

	# any2pandoc.sh
	#
	# A shell script that tries its best to convert documents thrown at it
	# to pandoc's extended markdown.
	#
	# https://gist.github.com/1181510
	#
	# Depends on:

	// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
	// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating

	// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel

	// MIT license

	(function() {
	var lastTime = 0;
	var vendors = ['ms', 'moz', 'webkit', 'o'];

	#!/usr/bin/env bash
	# MIT © Sindre Sorhus - sindresorhus.com

	# git hook to run a command after `git pull` if a specified file was changed
	# Run `chmod +x post-merge` to make it executable then put it into `.git/hooks/`.

	changed_files="$(git diff-tree -r --name-only --no-commit-id ORIG_HEAD HEAD)"

	check_run() {
	echo "$changed_files" \| grep --quiet "$1" && eval "$2"

	<?php

	// Get the entry
	$entry = craft()->entries->getEntryById(100);

	// Convert the existing data to what it would look like in POST
	$matrixData = array();

	foreach ($entry->matrixField as $block)
	{

	/*
	* Image Stretch module
	*/
	var ImageStretcher = {
	getDimensions: function(data) {
	// calculate element coords to fit in mask
	var ratio = data.imageRatio \|\| (data.imageWidth / data.imageHeight),
	slideWidth = data.maskWidth,
	slideHeight = slideWidth / ratio;

	server {
	listen 80;
	server_name localhost;
	root /Users/YOUR_USERNAME/Sites;

	access_log /Library/Logs/default.access.log main;

	location / {
	include /usr/local/etc/nginx/conf.d/php-fpm;
	}