James Daly jdaly13

Eric Elliott's "Composing Software" Series

A collection of links to the excellent "Composing Software" series of medium stories by Eric Elliott.

Why I hate TypeScript

Warning: These views are highly oppinated and might have some slightly incorrect facts. My experience with typescript was about 2 weeks in Node and a week in angular2.

Not Standard

TypeScript is implementing their own take on JavaScript. Some of the things they are writing will likely never make it in an official ES* spec either.

Technologies that have competing spec / community driven development have a history of failing; take: Flash, SilverLight, CoffeeScript, the list goes on. If you have a large code base, picking TypeScript is something your going to be living with for a long time. I can take a bet in 3 years JavaScript will still be around without a doubt.

Its also worth noting that they have built some things like module system and as soon as the spec came out they ditched it and started using that. Have fun updating!

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

Font Face

A mixin for writing @font-face rules in SASS.

Usage

Create a font face rule. Embedded OpenType, WOFF2, WOFF, TrueType, and SVG files are automatically sourced.

@include font-face(Samplino, fonts/Samplino);

	// SPDX-License-Identifier: MIT
	pragma solidity ^0.8.2;

	import "@openzeppelin/contracts/token/ERC721/ERC721.sol";
	import "@openzeppelin/contracts/access/Ownable.sol";
	import "@openzeppelin/contracts/utils/Counters.sol";
	import "@openzeppelin/contracts/token/ERC721/extensions/ERC721Enumerable.sol";
	import "@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol";

	import "./base64.sol";

	// setup
	const wait = value => new Promise(resolve => {
	setTimeout(() => resolve(value), 3000);
	});

	const fetchFoo = () => wait('foo');
	const fetchBar = () => wait('bar');
	const fetchBaz = () => wait('baz');

	const fetchDataSlowly = async time => {

	import gulp from 'gulp';
	import sourcemaps from 'gulp-sourcemaps';
	import buffer from 'gulp-buffer';
	import uglify from 'gulp-uglify';
	import tap from 'gulp-tap';
	import browserify from 'browserify';
	import babel from 'babelify';

	gulp.task('build', () => {

	'use strict';

	const browserify = require('browserify');
	const browserSync = require('browser-sync');
	const gulp = require('gulp');
	const gutil = require('gulp-util');
	const nodemon = require('gulp-nodemon');
	const uglify = require('gulp-uglify');
	const watchify = require('watchify');
	const jshint = require('gulp-jshint');

	var gulp = require('gulp');
	var gutil = require('gulp-util');
	var watchify = require('watchify');
	var uglify = require('gulp-uglify');
	var buffer = require('vinyl-buffer');
	var source = require('vinyl-source-stream');
	var browserify = require('browserify');
	var browserSync = require('browser-sync');
	var sass = require('gulp-ruby-sass');
	var filter = require('gulp-filter');

	var gulp = require('gulp');
	var sourcemaps = require('gulp-sourcemaps');
	var source = require('vinyl-source-stream');
	var buffer = require('vinyl-buffer');
	var browserify = require('browserify');
	var watchify = require('watchify');
	var babel = require('babelify');

	function compile(watch) {
	var bundler = watchify(browserify('./src/index.js', { debug: true }).transform(babel));