Jacob Lett JacobLett

Comparison of `npm scripts` vs Gulp

npm scripts are low-level and leverage the actual library you want to use (example: "lint": "eslint ./")
package.json is a central place to see what scripts are available (also npm run will list all scripts)
When things get too complicated you can always defer to another file (example: "complex-script": "babel-node tools/complex-script.js")
npm scripts are more powerful than one might first think (pre/post hooks, passing arguments, config variables, chaining, piping, etc...)

	/* CSS styles that highlight the hubspot grid components so you can better visualize what is happening in a page.
	1. You could use this a few different ways, you could add this to your inspector-stylesheet.css when inspecting a page.
	2. You could integrate this into a browser extension ;)
	3. You could literally upload the stylesheet to HubSpot, and use {% if request.query_dict.hsDebug == "true" %}{{ require_css(PATH TO YOUR CSS FILE) }}{% endif %}

	Additionally in-case it's useful as a prototyping/layout planning tool: https://codepen.io/thewebtech/pen/bGdrQyN??editors=1100
	*/

	.dnd-module {background: #eaf0f6;min-height: 50px!important; }
	.dnd-module::before {content:"{% dnd_module %}";}

	/*
	Copy this into the console of any web page that is interactive and doesn't
	do hard reloads. You will hear your DOM changes as different pitches of
	audio.

	I have found this interesting for debugging, but also fun to hear web pages
	render like UIs do in movies.
	*/

	const audioCtx = new (window.AudioContext \|\| window.webkitAudioContext)()

	/**
	* To install:
	* install npm
	* cd public_html/files/stylesheets
	* npm update
	*
	* to watch:
	* gulp
	* or to run sass once:
	* gulp sass

	/*
	cookies.get() gets all cookies by name
	cookies.get('name') gets single cookie
	cookies.set('name', 'value', {max_age, expires, path, domain})
	cookies.del('name', {path, domain})

	https://javascript-minifier.com/ = 731 bytes

	window.cookies=function(){function e(e){return e.replace(/[;,\s]+/g,e=>escape(e))}var n=unescape,c=document,i="; ",o="",u="path",s="domain",p="max",t="age",r="expires",a="secure",h="samesite",f="=",g=p+"_"+t;function m(n,m,d){if(n){var l=[e(n),f,e(m\|\|o)];(d=d\|\|{})[u]&&l.push(i,u,f,d[u]),d[s]&&l.push(i,s,f,d[s]),d[g]?l.push(i,p,"-",t,f,d[g]):d[r]&&l.push(i,r,f,d[r].toUTCString()),d[a]&&l.push(i,a),d[h]&&l.push(i,h,f,d[h]),c.cookie=l.join(o)}}return{get:function(i){return i?new RegExp("\\b"+e(i).replace(/\W/g,"\\$&")+"=([^;])").exec(c.cookie)[1]:c.cookie.split("; ").map(e=>/([^=]+)=?(.)/.exec(e).slice(1,3)).map(e=>[n(e[0]),n(e[1])]).reduce((e,n)=>(e[n[0]]=n[1],e),{})},set:m,del:function(e,n){(n=n\|\|{})[g]=-1,m(e,o,n)}}}();
	*/


	<!-- Navbar
	================================================== -->
	<div class="bs-docs-section clearfix">
	<div class="row">
	<div class="col-lg-12">
	<div class="page-header">
	<h1 id="navbar">Navbar</h1>
	</div>
	<div class="bs-component">

	/*****************************************************************
	*
	* Copy Layer text 1.0 - by Praveen Vijayan! - http://www.decodize.com/
	*
	* Compatibility above Photoshop CS6
	*
	* Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
	*
	*****************************************************************/

	Here are all the classes from Bootstrap 3 (version 3.1.1).

	Method of extraction:

	1. Download Bootstrap 3 and rename bootstrap.css as "bootstrap.html"
	2. Add the following 24 lines of code to the very bottom of the bootstrap.html file:

	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
	<script>