Tom Byrer tomByrer

Tech Lead Book

Introduction
What is a Tech Lead?
The Tech Lead Mindset
Becoming a Tech Lead
Working Cross-Functionally
The Art of Delegation
Technical Best Practices
Effective Decision Making

If you enjoyed reading this, I'm intending to do more blogging like this over here: https://cdgd.tech

This is not a complaint about Webpack or v4 in any way. This is just a record of my process trying it out so I could provide feedback to the webpack team

Hmm... I don't see any docs for 4.0 on https://webpack.js.org. I guess I'll just wing it. All I need to do is npm i -D webpack@next, right?

+ [email protected]

The history of hyperHTML followed by lit-html

While many remember the epic hyperHTML: A Virtual DOM Alternative post I've published the 5th of March 2017, the first official implementation of the library was working as hyperHTML.bind(node) function for tagged literals the day before, and it's been in my experiments folder already for a little while.

The hilarious reaction from the skeptical community

At first glance people couldn't believe performance of the DBMonster demo shown in that article,

	<!DOCTYPE html>
	<html>
	<head>
	<title>React</title>
	<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
	<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
	</head>
	<body>
	<div id='app'></div>
	<script>

	// Use class fields!
	// https://github.com/tc39/proposal-class-fields

	// Here's what you might be doing today...
	class A extends B {
	constructor(...args) {
	super(...args)
	this.foo = 'bar'
	this.foobar = `${this.foo}bar`
	}

	#!/usr/bin/env node

	var browsers = [
	'chrome 49',
	'edge 16',
	'firefox 51',
	'opera 36'
	].join(', ');

	var caniuse = require('caniuse-api');

	const log = new Proxy({}, {
	get: (_, colour) => function() {
	console.log(`%c ${[].slice.call(arguments).join(' ')}`, `color: ${colour}`)
	}
	})

	// example
	log.tomato('I am tomato')
	log.chocolate('I am chocolate')
	log.cornflowerblue('I am cornflowerblue')

	let cache = new Map();
	let pending = new Map();

	function fetchTextSync(url) {
	if (cache.has(url)) {
	return cache.get(url);
	}
	if (pending.has(url)) {
	throw pending.get(url);
	}

	<div class="focuspoint"
	role="presentation"
	data-focus-x-sm="-0.27" data-focus-y-sm="0.98" data-image-w-sm="992" data-image-h-sm="685"
	data-focus-x-md="-0.29" data-focus-y-md="1.00" data-image-w-md="1102" data-image-h-md="809"
	data-focus-x-lg="-0.05" data-focus-y-lg="1.00" data-image-w-lg="1600" data-image-h-lg="879"
	>

	<picture class="img-presentation">
	<source media="(min-width: 1200px)" srcset="http://cdn.com/path/to/marquee-lg.jpg">
	<source media="(min-width: 992px)" srcset="http://cdn.com/path/to/marquee-md.jpg">

	// rn.js
	import {createElement} from 'react'
	import {View, Text, Image} from 'react-native'

	const map = { view: View, text: Text, image: Image }

	export default function rn(type, props, ...children){
	return createElement(map[type] \|\| type, props, ...children)
	}