Giulio Mainardi mgiulio

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

Hello, visitors! If you want an updated version of this styleguide in repo form with tons of real-life examples… check out Trellisheets! https://github.com/trello/trellisheets

Trello CSS Guide

“I perfectly understand our CSS. I never have any issues with cascading rules. I never have to use !important or inline styles. Even though somebody else wrote this bit of CSS, I know exactly how it works and how to extend it. Fixes are easy! I have a hard time breaking our CSS. I know exactly where to put new CSS. We use all of our CSS and it’s pretty small overall. When I delete a template, I know the exact corresponding CSS file and I can delete it all at once. Nothing gets left behind.”

You often hear updog saying stuff like this. Who’s updog? Not much, who is up with you?

How WordPress Plugins Should Handle Front End Resources

This is a WORK IN PROGRESS intended for fleshing out and feedback

It's very common for people to be unhappy with how a WordPress plugin adds front end resources to their site. If a plugin needs CSS, the plugin will add a <link> element to that CSS. If the plugin needs JavaScript, it will add a <script> to that JavaScript.

Plugins do this because it works. It's damn important for a WordPress plugin to work, even in adverse conditions. They rightfully want good ratings and little customer support.

But this comes at the cost of additional HTTP requests. In optimizing front end performance of a site, reducing the number of HTTP requests is a huge thing. Front end developers want to decide and control how front end resources are being handled, and WordPress plugins don't typically make this easy on them.

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.

	/*!
	*
	* NEW VERSION AT https://github.com/c-kick/mobileConsole
	*
	* hnl.mobileConsole - javascript mobile console - v1.3.8 - 04/01/2021
	* Adds html console to webpage. Especially useful for debugging JS on mobile devices.
	* Supports 'log', 'trace', 'info', 'warn', 'error', 'group', 'groupEnd', 'table', 'assert', 'clear'
	* Inspired by code by Jakub Fiala (https://gist.github.com/jakubfiala/8fe3461ab6508f46003d)
	* Licensed under the MIT license
	*

	import { Component } from "React";

	export var Enhance = ComposedComponent => class extends Component {
	constructor() {
	this.state = { data: null };
	}
	componentDidMount() {
	this.setState({ data: 'Hello' });
	}
	render() {

	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	<meta charset="utf-8" />
	<script src="templating.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>

	<template id=t>

	/**
	* Polyfill for the vw, vh, vm units
	* Requires StyleFix from -prefix-free http://leaverou.github.com/prefixfree/
	* @author Lea Verou
	*/

	(function() {

	if(!window.StyleFix) {
	return;

	.gist-highlight {
	border-left: 3ex solid #eee;
	position: relative;
	}

	.gist-highlight pre {
	counter-reset: linenumbers;
	}

	.gist-highlight pre div:before {

	<?php
	/**
	* Duplicate this file as many times as you would like, just be sure to change the
	* Empty_Widget class name to a custom name of your choice. Have fun! redrokk.com
	*
	* Plugin Name: Empty Widget
	* Description: Single Widget Class handles all of the widget responsibility, all that you need to do is create the html. Just use Find/Replace on the Contact_RedRokk_Widget keyword to rebrand this class for your needs.
	* Author: RedRokk Interactive Media
	* Version: 1.0.0
	* Author URI: http://www.redrokk.com