2017/08/09 MacOS
$ ls -al ~/.ssh
# ... | |
activate :external_pipeline, | |
name: :webpack, | |
command: build? ? "npm run build:assets" : "npm run start:assets", | |
source: ".tmp/webpack_output", | |
latency: 1 | |
# ... |
First install Brew on your MAC
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
brew update
brew tap homebrew/dupes
brew tap homebrew/php
brew install php70
mcrypt
: brew install mcrypt php70-mcrypt
brew install composer
The issue:
..mobile browsers will wait approximately 300ms from the time that you tap the button to fire the click event. The reason for this is that the browser is waiting to see if you are actually performing a double tap.
(from a new defunct https://developers.google.com/mobile/articles/fast_buttons article)
touch-action
CSS property can be used to disable this behaviour.
touch-action: manipulation
The user agent may consider touches that begin on the element only for the purposes of scrolling and continuous zooming. Any additional behaviors supported by auto are out of scope for this specification.
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.
elem.offsetLeft
, elem.offsetTop
, elem.offsetWidth
, elem.offsetHeight
, elem.offsetParent
# +----------------------------+ | |
# | IDE files | | |
# +----------------------------+ | |
/.idea | |
# +----------------------------+ | |
# | Vagrant | | |
# +----------------------------+ | |
/.vagrant |
Record your screencasts as movie files (.mov) using quicktime.
<html> | |
<head> | |
<title>Select styles with CSS only</title> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<style> | |
body { | |
background-color: #fff; | |
font-family: helvetica, sans-serif; | |
margin: 4% 10% | |
} |
// HTML: | |
<div class="display-type"></div> | |
// CSS: | |
// set the content of an element depending on the media query |