antonin caudron m4n1ok

Mobile Safari's 100% Height Dilemma

Whether you're developing a web application with native-ish UI, or just a simple modal popup overlay that covers the viewport, when it comes to making things work on iDevices in Mobile Safari, you're in for a decent amount of pain and suffering. Making something "100% height" is not as easy as it seems.

This post is a collection of Mobile Safari's gotchas and quirks on that topic, some with solutions and fixes, some without, in good parts pulled from various sources across the internets, to have it all in one place. Things discussed here apply to iOS8, iOS9 and iOS10.

The Disappearing Browser Chrome

Screen real estate on smartphones is limited, so Mobile Safari collapses the browser chrome (address bar and optional tab bar at the top, and tool bar at the bottom) when the user scrolls down. When you want to make something span exactly the height of the viewport, or pin something to the bottom of the screen, this can get tricky because the viewport changes size (or

Hexadecimal color code for transparency

How to set transparency with hex value ?

For example, you want to set 40% alpha transparence to #000000 (black color), you need to add 66 like this #66000000.

Download This sample on Google Play Store

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

Installing ngrok on OSX

For Homebrew v2.6.x and below:

brew cask install ngrok

For Homebrew v2.7.x and above:

ffmpeg

Converting Audio into Different Formats / Sample Rates

Minimal example: transcode from MP3 to WMA:
ffmpeg -i input.mp3 output.wma

You can get the list of supported formats with:
ffmpeg -formats

You can get the list of installed codecs with:

Encoding Video

Installing

Install FFmpeg with homebrew. You'll need to install it with a couple flags for webm and the AAC audio codec.

brew install ffmpeg --with-libvpx --with-libvorbis --with-fdk-aac --with-opus

Get Instagram Images via JavaScript

Get API Info

You will need the user_id from the user. This is difficult to discover at Instagram but easy from this site http://jelled.com/instagram/lookup-user-id

I used http://jelled.com/instagram/access-token for the next few steps

You will also need an access token which ends up being difficult to obtain. Log into the account and go to their Developer Page.

There are certain files created by particular editors, IDEs, operating systems, etc., that do not belong in a repository. But adding system-specific files to the repo's .gitignore is considered a poor practice. This file should only exclude files and directories that are a part of the package that should not be versioned (such as the node_modules directory) as well as files that are generated (and regenerated) as artifacts of a build process.

All other files should be in your own global gitignore file:

Create a file called .gitignore in your home directory and add any filepath patterns you want to ignore.
Tell git where your global gitignore file is.

Note: The specific name and path you choose aren't important as long as you configure git to find it, as shown below. You could substitute .config/git/ignore for .gitignore in your home directory, if you prefer.

	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;
	}

	// isAutoplaySupported(callback);
	// Test if HTML5 video autoplay is supported
	isAutoplaySupported = function(callback) {
	// Is the callback a function?
	if (typeof callback !== 'function') {
	console.log('isAutoplaySupported: Callback must be a function!');
	return false;
	}
	// Check if sessionStorage exist for autoplaySupported,
	// if so we don't need to check for support again