xjamundx

This is the follow up to a post I wrote recently called From Require.js to Webpack - Party 1 (the why) which was published in my personal blog.

In that post I talked about 3 main reasons for moving from require.js to webpack:

1. Common JS support
2. NPM support
3. a healthy loader/plugin ecosystem.

Here I'll instead talk about some of the technical challenges that we faced during the migration. Despite the clear benefits in developer experience (DX) the setup was fairly difficult and I'd like to cover some of the challanges we faced to make the transition a bit easier.

varemenos

These are the configuration and package-syncing files I'm using for my setup of the Atom Editor

nolanlawson

// Promise.all is good for executing many promises at once
Promise.all([
  promise1,
  promise2
]);

// Promise.resolve is good for wrapping synchronous code
Promise.resolve().then(function () {
  if (somethingIsNotRight()) {
    throw new Error("I will be rejected asynchronously!");

staltz

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

---

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

---

varemenos

var t = [ 'a', 'b', 'c', 'd', 'e'];

Array.prototype.move = function (source, destination) {
	// if source and destination are the same
	if (source === destination) {
		// then there is no need to move
		return;
	}
	// if the source is smaller than 0 or the destination is larger than the size of the array
	if (source < 0 || source > this.length - 1 || destination > this.length - 1) {

varemenos

// returns true if your browser supports calc()
myapp.checkCalc = function (prefix = '') {
	var el = document.createElement('div');
	el.style.cssText = prefix + 'width: calc(1px);';
	return !!el.style.length;
};

// returns true if your browser supports any version of calc(), prefixed or not
myapp.checkAllCalc = function (prefix = '') {
	return myapp.checkCalc('-webkit-') || myapp.checkCalc('-moz-') || myapp.checkCalc();

varemenos

F12::

DetectHiddenWindows, on
If WinExist("posh~git") OR WinExist("Windows PowerShell")
{
  If WinActive("posh~git") OR WinActive("Windows PowerShell")
	{
		WinHide
		if(temptitle="")
			WinActivate ahk_class Shell_TrayWnd

varemenos

# Clear screen
cls

# Get user
$USER = $PWD.toString()
$USER = $USER.Remove(0, 9)

# Get hostname
$HOSTNAME = HOSTNAME.exe

varemenos

<?
  class entry{
		private $id = -1;		 // required
		private $title = "";	 // required
		private $author = -1;	 // required, author ID
		private $excerpt = "";	 // either turn title into excerpt or manually enter one
		private $date = "";		 // required

		// #TODO
			// post type interface?

varemenos

// Class creation
function Vehicle(p) {
  this.brand = p.brand || "";
	this.model = p.model || "";
	this.wheels = p.wheels || 0;
}

// Main class' methods
Vehicle.prototype.getBrand = function () {
	return this.brand;