Joontae Kim Joontae-Kim

Articles for the New JS Dev

A list of the gists that have proved most useful to new JS devs on GitHub.

The Revealing Module Pattern in Javascript

Zach Caceres

Javascript does not have the typical 'private' and 'public' specifiers of more traditional object oriented languages like C# or Java. However, you can achieve the same effect through the clever application of Javascript's function-level scoping. The Revealing Module pattern is a design pattern for Javascript applications that elegantly solves this problem.

The central principle of the Revealing Module pattern is that all functionality and variables should be hidden unless deliberately exposed.

Let's imagine we have a music application where a musicPlayer.js file handles much of our user's experience. We need to access some methods, but shouldn't be able to mess with other methods or variables.

Using Function Scope to Create Public and Private Methods

⇐ back to the gist-blog at jrw.fi

Advanced SCSS

Or, 16 cool things you may not have known your stylesheets could do. I'd rather have kept it to a nice round number like 10, but they just kept coming. Sorry.

I've been using SCSS/SASS for most of my styling work since 2009, and I'm a huge fan of Compass (by the great @chriseppstein). It really helped many of us through the darkest cross-browser crap. Even though browsers are increasingly playing nice with CSS, another problem has become very topical: managing the complexity in stylesheets as our in-browser apps get larger and larger. SCSS is an indispensable tool for dealing with this.

This isn't an introduction to the language by a long shot; many things probably won't make sense unless you have some SCSS under your belt already. That said, if you're not yet comfy with the basics, check out the aweso

Copied from http://code.lancepollard.com/complete-list-of-html-meta-tags/

Basic HTML Meta Tags

<meta name="keywords" content="your, tags"/>
<meta name="description" content="150 words"/>
<meta name="subject" content="your website's subject">
<meta name="copyright"content="company name">
<meta name="language" content="ES">

Copied from http://code.lancepollard.com/complete-list-of-html-meta-tags/

Basic HTML Meta Tags

<meta charset='UTF-8'>
<meta name='keywords' content='your, tags'>
<meta name='description' content='150 words'>
<meta name='subject' content='your website's subject'>
<meta name='copyright' content='company name'>

	/**
	* Deep diff between two object, using lodash
	* @param {Object} object Object compared
	* @param {Object} base Object to compare with
	* @return {Object} Return a new object who represent the diff
	*/
	function difference(object, base) {
	function changes(object, base) {
	return _.transform(object, function(result, value, key) {
	if (!_.isEqual(value, base[key])) {

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>vue inheritance</title>
	</head>
	<body>
	<my-student></my-student>
	<my-student first-name="Franz" last-name="Meier" :student-id="54321"></my-student>
	<my-professor first-name="Jared" last-name="Josey"></my-professor>


	/**
	* Sort array of objects based on another array
	*/

	function mapOrder (array, order, key) {

	array.sort( function (a, b) {
	var A = a[key], B = b[key];

	function asyncFunc(e) {
	return new Promise((resolve, reject) => {
	setTimeout(() => resolve(e), e * 1000);
	});
	}

	const arr = [1, 2, 3];
	let final = [];

	function workMyCollection(arr) {

	// code for my devtip on 12 June 2018:
	// https://www.youtube.com/watch?v=0wiM3jW1DVY&list=PLV5CVI1eNcJgCrPH_e6d57KRUTiDZgs0u
	const loadFile = file => {
	return new Promise(resolve => {
	setTimeout(() => {
	resolve(`contents of ${file}`)
	}, 500)
	})
	}
	const files = ['01.md', '02.md', '03.md', '04.md', '05.md']