Praveen Puglia praveenpuglia

nvm vs Volta

A comparison of nvm and Volta to manage Node.js projects (without Yarn).

Bootstrapping a Project

Bootstrapping a Project with nvm

nvm install

I am moving this gist to a github repo so more people can contribute to it. Also, it makes it easier for me to version control.

Please go to - https://github.com/praveenpuglia/shadow-dom-in-depth for latest version of this document. Also, if you find the document useful, please shower your love, go ⭐️ it. :)

Shadow DOM

Heads Up! It's all about the V1 Spec.

In a nutshell, Shadow DOM enables local scoping for HTML & CSS.

Semantic Commit Messages

See how a minor change to your commit message style can make you a better programmer.

Format: <type>(<scope>): <subject>

<scope> is optional

Example

An Easier Way to Enforce Required Parameters in ES6

Expands on Handling required parameters in ECMAScript 6 by Axel Rauschmayer.

The idea (which is credited to Allen Wirfs-Brock) is, in essence, to use default parameter values to call a function which throws an Error if the parameter is missing:

const throwIfMissing () => { throw new Error('Missing parameter') }

	// note - this was my rough working prototype, but still left some artifacts in the query params.
	// todo: also need to debounce the history pushes
	// see comments for production Gatsby and Svelte versions which delete nondefault keys in the query params

	import React from 'react'
	import queryString from "query-string"

	export const connectRouterState = defaultURLState => Component => props => {
	const { history, location } = props
	// note: do not nest objects in URL state

	const { data } = await axios.get(url, {
	responseType: 'arraybuffer',
	headers: {
	'Content-Type': 'audio/wav'
	}
	});
	const blob = new Blob([data], {
	type: 'audio/wav'
	});

	// Require things!
	const path = require('path');
	const webpack = require('webpack');
	const HtmlWebpackPlugin = require('html-webpack-plugin');

	// The configuration starts here!
	module.exports = {
	// The entry point for webpack to start generating a dependency graph.
	entry: { index: './src/index.js' },

	import { Component, Input } from '@angular/core';

	@Component({
	selector: 'dump',
	template: `
	<pre><code>{{data \| json}}</code></pre>
	`,
	styles: [
	`
	:host {

	#msgs_scroller_div::-webkit-scrollbar-track, #client_body::before, .client_container,
	#search_terms, #client_body, #footer, ts-message, .channel_header, ts-jumper ts-jumper-container,
	ts-jumper input[type="text"] {
	background: #282c34 !important;
	}

	#client_body::before {
	border-bottom: 1px solid #1a2129 !important;
	}

	// ==UserScript==
	// @name Facebook URL Redirector Bypass
	// @namespace in.bibhas
	// @include https://.facebook.com/
	// @version 1
	// @grant none
	// ==/UserScript==
	si = window.setInterval(clearanchors, 2000);
	function clearanchors(){
	anchors = document.getElementsByTagName('a');