webdesignberlin

<div id="ipinfo"></div>

<script>
function getip(json){
    var info, container = document.getElementById('ipinfo');

    try {
        info = jQuery.parseJSON(json);
        container.innerHTML = info.ip + "/" + info.host;
    } catch(e) {

webdesignberlin

<script>
// Register the service worker
if ('serviceWorker' in navigator) {
	navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
    // Registration was successful
    console.log('ServiceWorker registration successful with scope: ', registration.scope);
}).catch(function(err) {
    // registration failed :(
    	console.log('ServiceWorker registration failed: ', err);
    });

webdesignberlin

"use strict";

// Listen to fetch events
self.addEventListener('fetch', function(event) {

  // Check if the image is a jpeg
  if (/\.jpg$|.png$/.test(event.request.url)) {

  // Inspect the accept header for WebP support
  var supportsWebp = false;

webdesignberlin

$(function () {
    "use strict";

    // for better performance - to avoid searching in DOM
    var content = $('#content');
    var input = $('#input');
    var status = $('#status');

    // my color assigned by the server
    var myColor = false;

webdesignberlin

@function map-deep-get($map, $keys...) {
  @each $key in $keys {
    $map: map-get($map, $key);

    @if (type-of($map) == 'null') { @return $map; }
  }

  @return $map;
}

webdesignberlin

#
# CORS header support
#
# One way to use this is by placing it into a file called "cors_support"
# under your Nginx configuration directory and placing the following
# statement inside your location block(s):
#
#   include cors_support;
#
# A limitation to this method is that Nginx doesn't currently send headers

webdesignberlin

// An example viewDidLoad
- (void)viewDidLoad
{
    [super viewDidLoad];
    [self loadWebView];
}

// The example loader
//
// Assumes you have an IBOutlet for the UIWebView defined:  @property (strong, nonatomic) UIWebView *wv;

webdesignberlin

"use strict";

this.addEventListener('fetch', event => {

// Save Data support
if(event.request.headers.get('save-data')){
    //Return smaller images
    if (/\.jpg$|.gif$|.png$/.test(event.request.url)) {

      let saveDataUrl = event.request.url.substr(0, event.request.url.lastIndexOf(".")) + '-savedata' + event.request.url.substr(event.request.url.lastIndexOf("."), event.request.url.length - 1);

webdesignberlin

var DOMTokenListSupports = function(tokenList, token) {
  if (!tokenList || !tokenList.supports) {
    return;
  }
  try {
    return tokenList.supports(token);
  } catch (e) {
    if (e instanceof TypeError) {
      console.log("The DOMTokenList doesn't have a supported tokens list");
    } else {

webdesignberlin

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] {