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,

ESM modules in node: npm edition

The proposal you’re about to read is not just a proposal. We have a working implementation of almost everything we discussed here. We encourage you to checkout and build our branch: our fork, with the relevant branch selected. Building and using the implementation will give you a better understanding of what using it as a developer is like.

Our implementation ended up differing from the proposal on some minor points. As our last action item before making a PR, we’re writing documentation on what we did. While I loathe pointing to tests in lieu of documentation, they will be helpful until we complete writing docs: the unit tests.

This repo also contains a bundled version of npm that has a new command, asset. You can read the documentation for and goals of that comma

	// 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)
	}