morewry

This is the working model of HTML I teach when needed. Browser devtools are used to demonstrate.

HTML stands for hypertext markup language. You can ignore hypertext as an old buzzword for now. The big deal about HTML is that it (and URLs) are the original web. It's fair to call the networking layer the internet and the concept linking of HTML files at URLs together the web. The web is in some ways the "open source" user interface layer of the internet. HTML was designed specifically for this, which leads to a few things.

First, as something designed for sending information about UI over internet networks, it is a serialization. If you don't already know what that means, it means a transformation of data into a format suitable for sending over networks. HTML is literally a plain text serialization of a UI to be rendered in a specific state. If that's confusing, take a button. In HTML you write a button tag with a disabled attribute:

<button disabled />

morewry

Bundle Sizes

Your mileage will vary.

React

┌────────────────────────────────────┐
│                                    │
│   Destination: dist/index.umd.js   │

morewry

find -L $PWD -type f -name "*.jpg" -print0 | xargs -0 -I'{}' mozjpegtran -outfile '{}'.out.jpg -optimise -copy none '{}'

morewry

	hyperHTML	lit-html
version	1.6.1	0.5.0
license	ISC	BSD + Patents
compatibility template literals	Edge 13+, FF 34+, CH 41+, SF 9.1+, iOS 9.2+	No IE/Edge, FF 55+, CH 41+, SF 9.1+, iOS 9.2+
compatibility transpiled	IE9+ FF 34+, WK (Android 4+), CH, SF, iOS 8+ template literals only

morewry

Keybase proof

I hereby claim:

• I am morewry on github.
• I am morewry (https://keybase.io/morewry) on keybase.
• I have a public key ASAAcv0HO34Ai0ekGGMmvqzMfiUZ_cRwVFOuAsoO97LU1Qo

To claim this, I am signing this object:

morewry

Mono Repository Tool Comparison

For Web Client / Front End Projects

(That Probably Use HTML, CSS, and JS)

I made a list of 20 things I might want out of a monorepo tool for a Design System to use as a basis for comparing some of the options including Lerna, Northbrook, and Rush.

⚠️ Northbrook's author says the project is pretty dead and now uses Lerna.

Qualifications Wanted

morewry

#!/bin/sh
enter_directory(){
	if [ "$PWD" != "$PREV_PWD" ]; then
		PREV_PWD="$PWD";
		if [ -e ".nvmrc" ]; then
			nvm use;
		fi
	fi
}

morewry

Currently considering https://github.com/webdriverio/webdrivercss

---

Core Goals:

• Can test in up-to-date versions of all major browsers
• Can test on up-to-date versions of all major OSes
• Can test in IE9 (because Bootstrap v4 will support IE9+)
• Don't want to have to setup/maintain our own cluster of VMs running all the necessary OSes (and all the versions of Windows)
• Workflow for management of reference/baseline/norm screenshots

morewry

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.

Element

Box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
• elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
• elem.getClientRects(), elem.getBoundingClientRect()

morewry

AngularJS Directive Attribute Binding Explanation

When using directives, you often need to pass parameters to the directive. This can be done in several ways. The first 3 can be used whether scope is true or false. This is still a WIP, so validate for yourself.

1. Raw Attribute Strings

   <div my-directive="some string" another-param="another string"></div>