Hamed Baatour hamedbaatour

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,

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

Vanilla websockets vs socket.io

Note: The points below are a comparison of using vanilla websockets on client and server and using 'em via socket.io and not about why only use socket.io

Native websockets provide us with only a send method to send data to the server. Send accepts only string input (not too sure about this). Socket.io lets us emit arbitrary events with arbitrary data (even binary blobs) to the server.
To receive messages on a vanilla websocket you can only assign a handler for the message event. The data you receive is mostly likely to be text (again not too sure about this) and you will have to parse it manually before consuming it. Socket.io lets the server and client both emit arbitrary events and handles all the parsing and packing/unpacking.
Socket.io gives us both a server and a client. Implementing a vanilla websocket server isn't something that you would want to do per project since it's quite painful. You will have to implement [RFC6455](https://tools.ietf.org/h

Curated list of useful gulp plugins for awesome and easy frontend web development.

Other lists

https://rrrepo.co/repo/GulpJS

Tutorials

People

`:bowtie:`	😄 `:smile:`	😆 `:laughing:`
😊 `:blush:`	😃 `:smiley:`	☺️ `:relaxed:`
😏 `:smirk:`	😍 `:heart_eyes:`	😘 `:kissing_heart:`
😚 `:kissing_closed_eyes:`	😳 `:flushed:`	😌 `:relieved:`
😆 `:satisfied:`	😁 `:grin:`	😉 `:wink:`
😜 `:stuck_out_tongue_winking_eye:`	😝 `:stuck_out_tongue_closed_eyes:`	😀 `:grinning:`
😗 `:kissing:`	😙 `:kissing_smiling_eyes:`	😛 `:stuck_out_tongue:`

	// install
	// npm i gulp-cache gulp-imagemin imagemin-pngquant imagemin-zopfli imagemin-mozjpeg imagemin-giflossy -f
	// node node_modules/jpegtran-bin/lib/install.js
	// node node_modules/gifsicle/lib/install.js
	// node node_modules/zopflipng-bin/lib/install.js
	// node node_modules/mozjpeg/lib/install.js
	// node node_modules/giflossy/lib/install.js
	// node node_modules/pngquant-bin/lib/install.js

	<?php

	if (!isset($_GET['ILoveMautic'])) {
	echo 'The secret phrase is wrong.';
	die;
	}

	$link = "https://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
	$allowedTasks = array(
	'cache:clear',