leecade

import React from 'react';

const MIN_SCALE = 1;
const MAX_SCALE = 4;
const SETTLE_RANGE = 0.001;
const ADDITIONAL_LIMIT = 0.2;
const DOUBLE_TAP_THRESHOLD = 300;
const ANIMATION_SPEED = 0.04;
const RESET_ANIMATION_SPEED = 0.08;
const INITIAL_X = 0;

maxcampolo

import WebKit

class NativeWebViewController: UIViewController {

    let viewportScriptString = "var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); meta.setAttribute('initial-scale', '1.0'); meta.setAttribute('maximum-scale', '1.0'); meta.setAttribute('minimum-scale', '1.0'); meta.setAttribute('user-scalable', 'no'); document.getElementsByTagName('head')[0].appendChild(meta);"
    let disableSelectionScriptString = "document.documentElement.style.webkitUserSelect='none';"
    let disableCalloutScriptString = "document.documentElement.style.webkitTouchCallout='none';"

    override func viewDidLoad() {
        // 1 - Make user scripts for injection

eric-pommereau

######################################################################################
# Exemple d'utilisation du reverse geocodage sur la BAN
# D'une série de coordonnées géo (en csv) on récupère les adresses (les plus proches)
# Accès : http://api-adresse.data.gouv.fr/reverse/csv/
######################################################################################

# Soit le fichier de base lat pour latitude (y) lon pour longitude (x)
lat;lon
48.18962;-2.53815
47.99303;-0.81681

p3t3r67x0

Styling native elements

Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.

video::webkit-media-controls-timeline {
  background-color: lime;
}

video /deep/ input[type=range] {

axemclion

Ariya Hidayat has written an excellent article on GPU Composited CSS and how it can be used to optimize web rendering performance.

The impact of adding CSS transforms is evident in developer timline and this experiment is a way to capture that information using browser-perf. The results from this experiment clearly indicate how certain CSS properties move rendering load to the GPU, and how that that impact the overall responsiveness of the page.

Pre-requisites

1. Ensure that you have node and npm installed
2. Ensure that you have Selenium running, or can connect to Sauce Labs
3. Dowload this gist using git clone https://gist.github.com/853d34ebd776047836f3.git
4. Install other dependencies using npm install

cfj

window.console.clog = function(log){
    var message = typeof log === 'object' ? '%cLooks like you\'re trying to log an ' : '%cLooks like you\'re trying to log a ',
        style = 'background:url(http://i.imgur.com/SErVs5H.png);padding:5px 15px 142px 19px;line-height:280px;';
    console.log.call(console, message + typeof log + '.', style);
};

rclark

There are a bunch of reasons why this is convoluted, mostly in building the URL to make the request:

1. You have to rely on an AJAX request, this example uses jQuery
2. To make a GetFeatureInfo request, you must provide a BBOX for a image, and the pixel coordinates for the part of the image that you want info from. A couple of squirrely lines of Leaflet code can give you that.
3. Output formats. The info_format parameter in the request. We don't know a priori which will be supported by a WMS that we might make a request to. See Geoserver's docs for what formats are available from Geoserver. That won't be the same from WMS to WMS, however.
4. WMS services return XML docs when there's a mistake in the request or in processing. This sends an HTTP 200, which jQuery doesn't think is an error.

bendo01

main#wrap {
  margin: auto;
	width: 100%;
	height: 912px;
	background: #3f77a4; /* Old browsers */
	background: -webkit-linear-gradient(top,  #3f77a4, #8bb6d0, #6e80b8 70%, #26447c);
	background: -moz-linear-gradient(top,  #3f77a4, #8bb6d0, #6e80b8 70%, #26447c);
	background: -o-linear-gradient(top,  #3f77a4, #8bb6d0, #6e80b8 70%, #26447c);
	background: -ms-linear-gradient(top,  #3f77a4, #8bb6d0, #6e80b8 70%, #26447c);
	background: linear-gradient(top,  #3f77a4, #8bb6d0, #6e80b8 70%, #26447c);