Anselm Hannemann anselmh

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

Question Regarding WAI ARIA

Dialog (Modal) (widget)

The Enter key should serve as the default submit action.

JS-free only possible through <form> and <button type="submit">?

I wanted to figure out the fastest way to load non-critical CSS so that the impact on initial page drawing is minimal.

TL;DR: Here's the solution I ended up with: https://github.com/filamentgroup/loadCSS/

For async JavaScript file requests, we have the async attribute to make this easy, but CSS file requests have no similar standard mechanism (at least, none that will still apply the CSS after loading - here are some async CSS loading conditions that do apply when CSS is inapplicable to media: https://gist.github.com/igrigorik/2935269#file-notes-md ).

Seems there are a couple ways to load and apply a CSS file in a non-blocking manner:

Let’s leave aside, for now, the fact that you’ve changed web standards. You’ve been a participant in the first time—in the history of the web, far as I know—that the web development community has taken a feature from an initial proposal to the funding of an honest-to-God native implementation.

Instead, I want you to focus on this: say only ten developers use a native responsive images solution to reduce the weight of just one page apeice by only 500kb, and each of those pages has a barely-significant 5,000 hits per month: those users have been saved almost 24GB of data. A thousand pages saving 500kb apeice, and we’ve saved users an entire terabyte in a month. Now expand that to the entire industry: every web developer; every hit on every page that would otherwise carry with it a huge, wasteful image request, saving megabytes at a time. To those users, the only change is that the web is faster, less expensive, more accessible. For those users, the web is just better.

In helping make the picture element

Description

This simple script will take a picture of a whiteboard and use parts of the ImageMagick library with sane defaults to clean it up tremendously.

The script is here:

#!/bin/bash
convert "$1" -morphology Convolve DoG:15,100,0 -negate -normalize -blur 0x1 -channel RBG -level 60%,91%,0.1 "$2"

Results

Wondering what the current standings are for the Responsive Images Community Group’s efforts? Look no further.

Mozilla

Bug 870021 Summary: Implement srcset attribute on img CLOSED: WONTFIX:
https://bugzilla.mozilla.org/show_bug.cgi?id=870021

Bug 870022 Implement picture element:
https://bugzilla.mozilla.org/show_bug.cgi?id=870022

	<script type="text/javascript">
	(function () {
	"use strict";
	// once cached, the css file is stored on the client forever unless
	// the URL below is changed. Any change will invalidate the cache
	var css_href = './index_files/web-fonts.css';
	// a simple event handler wrapper
	function on(el, ev, callback) {
	if (el.addEventListener) {
	el.addEventListener(ev, callback, false);

	<?php

	/**
	* Instructions:
	*
	* 1. Put this into the document root of your Kirby site
	* 2. Make sure to setup the base url for your site correctly
	* 3. Run this script with `php statify.php` or open it in your browser
	* 4. Upload all files and folders from static to your server
	* 5. Test your site

	#!/bin/bash
	#
	# Check for debugging statements before commiting your code.
	# Place this file in the .git/hooks directory of your project.

	# List of function names to search for in regex format
	FUNCTIONS='dpm\|kpr\|qpr\|console\.log'

	# If any functions are found as executable, prevent the commit.
	DIEONFAIL=false

	(function() {
	var storage = {};
	var counter = 1;

	function nodeId(node) {
	return node._dataId \|\| (node._dataId = counter++ );
	}

	function nodeData(node, key, value) {
	var id = nodeId(node);