juanpicado

Web Components Resources

Specs / standardization

W3C Introduction to Web Components - explainer/overview of the technologies

• Custom Elements
• HTML Imports
• Shadow DOM
• Templates

juanpicado

// NOTE: I added the .js extension to this gist so it would have syntax highlighting. This file should have NO file extension

{
    // Settings
    "passfail"      : false,  // Stop on first error.
    "maxerr"        : 100,    // Maximum error before stopping.


    // Predefined globals whom JSHint will ignore.
    "browser"       : true,   // Standard browser globals e.g. `window`, `document`.

juanpicado

var spawn = require("child_process").spawn;
var Q = require("q");

/**
 * Wrap executing a command in a promise
 * @param  {string} command command to execute
 * @param  {Array<string>} args    Arguments to the command.
 * @param  {string} cwd     The working directory to run the command in.
 * @return {Promise}        A promise for the completion of the command.
 */

juanpicado

var util = require('util'),
    EventEmitter = require('events').EventEmitter;

var Server = function() {
  var self = this;

  this.on('custom_event', function() {
    self.logSomething('custom_event');
  });

juanpicado

-server
-Xms512m
-Xmx2048m
-XX:MaxPermSize=512m
-XX:ReservedCodeCacheSize=256m
-XX:+UseCodeCacheFlushing
-XX:+UseCompressedOops
-XX:+UseConcMarkSweepGC
-XX:+AggressiveOpts
-XX:+CMSClassUnloadingEnabled

juanpicado

Step 0:

Get Homebrew installed on your mac if you don't already have it

Step 1:

Install highlight. "brew install highlight". (This brings down Lua and Boost as well)

Step 2:

juanpicado

'use strict';

// The purpose of this example is to show
// how you can block the event loop with JavaScript.
// There is 3 routes
// / respond with Hello, World text
// /block uses JavaScript while for 5 seconds
// /non-block uses setTimeout for 5 seconds

// Do the following

juanpicado

title	subtitle	author	date	source
npm vs Yarn Command Translation Cheat Sheet	CLI commands comparison	yarn	February 15, 2020	https://yarnpkg.com/en/docs/migrating-from-npm

npm vs Yarn Command Translation Cheat Sheet

juanpicado

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

juanpicado

HMR for verdaccio plugin development

Verdaccio doesn't automatically reload plugins when files change, making plugin development a bit painful. So here is my approach for a hot module reload in verdaccio, so that verdaccio restarts whenever your plugin changes.

1. Create a project folder and a subfolder plugins. Bootstrap the plugin in that folder using the generator so that you end up with something like plugin/verdaccio-my-plugi/ folder structure.

2. First, let's add a watch mode for your plugin (if you don't have it yet) by adding the following script to you package.json: In plugin/verdaccio-my-plugin/package.json

  "scripts": {