claus

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

deoxxa

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const byExtension = (obj) => Object.keys(obj).map((k) => Object.assign({
  test: new RegExp(`\.(${k})$`),
}, obj[k]));

if (process.env.NODE_ENV === 'production' && !process.env.API_URL) {
  throw new Error('when NODE_ENV is "production", API_URL must be set');

getify

Parens And Performance

Years ago, some smart folks that worked on JS engines realized that not all JS that's loaded into a page/app initially is needed right away. They implemented JIT to optimize this situation.

JIT means Just-In-Time, which means essentially that the engine can defer processing (parsing, compiling) certain parts of a JS program until a later time, for example when the function in question is actually needed. This deferral means the engine is freer to spend the important cycles right now on the code that's going to run right now. This is a really good thing for JS performance.

Some time later, some JS engine devs realized that they needed to get some hints from the code as to which functions would run right away, and which ones wouldn't. In technical speak, these hints are called heuristics.

So they realized that one very common pattern for knowing that a function was going to run right away is if the first character before the function keyword was a (, because that usually m

getify

// All of the following are ways that template literals are *NOT* `strictly better` than " or ' delimited strings
// RE: https://ponyfoo.com/articles/template-literals-strictly-better-strings

// valid syntax, but doesn't turn on strict mode
`use strict`;

// invalid syntax
const x = { `hello world`: 42 };

// invalid syntax

MicheleBertoli

class DecrementAction extends Error {}
class IncrementAction extends Error {}

const reducer = (state, error) => {
  switch (error.constructor) {
    case DecrementAction:
      return state - 1

    case IncrementAction:
      return state + 1

YKCzoli

Converting shapefiles to geojson

####Assumptions

• QGIS installed (if not: http://qgis.com/)

Get the data

We will use the Electoral District and Polling Division shapefiles found on the Elections Ontario site:

nickjevershed

"interestsUrl","house","dateUpdated","dateScraped","politicianName"
"http://www.aph.gov.au//%7E/media/03%20Senators%20and%20Members/32%20Members/Register/44p/AB/ButlerTerri_44P.pdf","lower","17 July 2015","2015-07-22","Ms Terri Butler"
"http://www.aph.gov.au//%7E/media/03%20Senators%20and%20Members/32%20Members/Register/44p/GK/GambaroT_44P.pdf","lower","13 July 2015","2015-07-22","The Hon Teresa Gambaro"
"http://www.aph.gov.au//%7E/media/03%20Senators%20and%20Members/32%20Members/Register/44p/PS/RoyW_44P.pdf","lower","20 July 2015","2015-07-22","Mr Wyatt Roy"
"http://www.aph.gov.au/~/media/Committees/Senate/committee/interests_ctte/statements2014/BackC_Astat_150717.pdf?la=en","upper","17 July 2015","2015-07-23","Christopher John Back"
"http://www.aph.gov.au/~/media/Committees/Senate/committee/interests_ctte/statements2014/RhiannonL_Astat_140805.pdf?la=en","upper","22 July 2015","2015-07-23","Lee Rhiannon"
"http://www.aph.gov.au//%7E/media/03%20Senators%20and%20Members/32%20Members/Register/44p/AB/BandtA_44P.p

lawnsea

I have been watching the current discussions about running a virtual DOM in a web worker with a great deal of interest. In 2011, I built a research project, [Treehouse][] ([USENIX Talk][] ([DOMTRIS][] demo at 20:25), [paper][]), which ran a hacked-up version of jsdom in a worker. My goal was fine-grained containment of untrusted scripts, while still providing access to browser APIs that existing code expected.

Treehouse achieved a small amount of influence in academic circles, but it had problems and was ultimately unsuccessful. Virtual DOMs were not a widespread or well-understood idea at the time, so the advantages of running one in a worker

emeeks

(function() {

d3.hexbin = function() {
  var width = 1,
      height = 1,
      r,
      x = d3_hexbinX,
      y = d3_hexbinY,
      dx,
      dy;

emeeks

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8" />
<title>Fog of War with Grid</title>
<style>

</style>