nzakas

Tech Lead Book

1. Introduction
2. What is a Tech Lead?
3. The Tech Lead Mindset
4. Becoming a Tech Lead
5. Working Cross-Functionally
6. The Art of Delegation
7. Technical Best Practices
8. Effective Decision Making

gricard

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?

+ webpack@4.0.0-beta.2

WebReflection

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,

WebReflection

#!/usr/bin/env node
  
var browsers = [
  'chrome 49',
  'edge 16',
  'firefox 51',
  'opera 36'
].join(', ');

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

OutThisLife

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')

sebmarkbage

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

aubricus

<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">

threepointone

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

ceejbot

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

developit

if (typeof window!=='undefined' && navigator.serviceWorker && navigator.serviceWorker.controller) {
	let reloadOnNext = false;

	let pushState = history.pushState;
	history.pushState = function(state, title, url) {
		pushState.call(this, state, title, url);
		if (reloadOnNext===true) location.reload(true);
	};

	navigator.serviceWorker.controller.addEventListener('statechange', e => {