Nathan Knowler knowler

Improved .visually-hidden

Theorically bulletproof CSS class for visually hide anything and keep it accessible to ATs.

The State of Container Queries

tl;dr Developers would like the idea to style components based on a parent's width rather than depend solely on the viewport media query. This would allow modular components to style themselves while being agnostic to the viewport.

There is currently a lot of developer interest in getting a feature like Container Queries (née "Element Queryies") shipped in a browser.

2-min Catchup

Here are official'ish documents to outline the developer community's desires.

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

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

	<?php

	namespace Valet\Drivers\Custom;

	class BedrockMultisiteValetDriver extends \Valet\Drivers\Specific\BedrockValetDriver
	{
	/**
	* Determine if the incoming request is for a static file.
	*
	* @return string\|false

	<?php
	/**
	* Plugin Name: WP REST API Strict Mode
	* Description: Triggers an error when unregistered parameters are used.
	* Author: Ryan McCue
	* Author URI: http://rmccue.io/
	* Version: 0.1
	*
	* Requires https://core.trac.wordpress.org/ticket/35507
	*/

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title></title>
	</head>
	<body>
	<script>
	// Test if service workers are supported
	if ('serviceWorker' in navigator) {

	---
	- name: Sync uploads between environments
	hosts: web
	remote_user: "{{ web_user }}"

	vars:
	project: "{{ wordpress_sites[site] }}"
	project_root: "{{ www_root }}/{{ site }}"

	tasks:

	/* bling.js */
	window.$ = document.querySelector.bind(document);
	window.$$ = document.querySelectorAll.bind(document);
	Node.prototype.on = window.on = function(name, fn) { this.addEventListener(name, fn); };
	NodeList.prototype.__proto__ = Array.prototype;
	NodeList.prototype.on = function(name, fn) { this.forEach((elem) => elem.on(name, fn)); };

	# Hello, and welcome to makefile basics.
	#
	# You will learn why `make` is so great, and why, despite its "weird" syntax,
	# it is actually a highly expressive, efficient, and powerful way to build
	# programs.
	#
	# Once you're done here, go to
	# http://www.gnu.org/software/make/manual/make.html
	# to learn SOOOO much more.