javascript

JavaScript Namespaces and Closures instead of Global Variables

tomo — Tue, 12 Jul 2016 07:07:00 +0000

July 12, 2016

Have you heard? Global variables are bad, mmkay? So what should we do if we want to create a variable in our script and be able to refer to it elsewhere, globally?

What's in a Namespace?

A JavaScript namespace is just an idea or practice rather than an explicit feature of JavaScript. That is, you don't create a "namespace object" or declare a namespace. Instead, you would implement a namespace by creating and using an object which would contain sub-variables within it, so that those variables didn't pollute the namespace of the global scope (i.e. everything under the...

Cross-platform node scripts: better-npm-run to the rescue

tomo — Mon, 06 Jun 2016 04:47:55 +0000

June 6, 2016

node.js javascript

We know that Node.js is awesome and JavaScript is the ultimate cross-platform language. Node has support for Windows despite the node command being a command line program. Windows users can use the command line shell for node. But the Windows shell environment isn't completely compatible with what Unix/Linux/Mac users are used to (i.e. Bash). The npm package Better-npm-run helps deal with running tasks with node across platforms including Windows.

Get it here: https://www.npmjs.com/package/better-npm-run

This...

Embed a YouTube video player and control it via JavaScript

tomo — Fri, 13 May 2016 21:32:09 +0000

May 14, 2016

youtube javascript mobile safari

YouTube has long made it easy to share and embed videos into websites by giving you the HTML code to just copy and paste wherever you like. Over the years, different technologies have been used to play videos on the web, from Flash object elements to pure HTML5. YouTube's newest API for adding videos to web pages takes care of the technology, automatically choosing the best delivery method on a user by user basis.

YT did have something called the "YouTube JavaScript Player API" but this is out of date so don't use it. Instead use the new...

How to detect a swipe touch event on mobile browsers with JavaScript

tomo — Fri, 13 May 2016 17:19:00 +0000

May 14, 2016

javascript mobile swipe

Browsers have supported various mouse-based events like clicks, down to the detection of when the mouse button is down and when it's released. You can know the coordinates of the mouse cursor, all in JavaScript. Mobile interfaces have brought some new gestures beyond what desktops provided. One big set of such UI events is from the smartphone's screen allowing touch and even multi-touch. Multitouch allows more types of UI events.

Many mobile apps support swiping, not just as a way to move a visible object around thescreen but applied for the whole screen. Tinder uses left swipe and...

Move a div element to another div using jQuery

tomo — Sun, 20 Mar 2016 18:26:00 +0000

March 21, 2016

jquery javascript dom

jQuery is good for many things related to the DOM - both querying and manipulating. Yes, we can move elements from one position to another with the help of jQuery, or add completely new elements (as in literal HTML text strings) anywhere in the DOM just by having a selector, and if a selector applies to multiple DOM nodes then adding into multiple places can be done with one call.

jQuery provides many functions for moving or adding elements/content: after, append, appendTo, before, insertAfter, insertBefore...

What is Package.json

tomo — Fri, 18 Mar 2016 09:09:24 +0000

March 18, 2016

node.js javascript npm json

If you're looking at some JavaScript code you got from elsewhere, probably Node.js packages, you'll notice each has a file called 'package.json'. This will be in the module's base or root directory. This file is a sort of manifest file for the module, most likely an npm module/package. Any package listed at npmjs.com needs a package.json, and the absolute minimum the file should contain is the package's name and version. The name and version make up a unique key for the package within npmjs.

The file usually contains much more than name and version. You can guess by the...

Stack traces, backtraces, call stacks explained in JavaScript, Python, PHP

tomo — Fri, 11 Mar 2016 19:37:27 +0000

March 12, 2016

stack call stack stack trace javascript php python bash

People are rarely happy to see a stack trace. A stack trace often appears when software encounters an exception, an unexpected error which can't be handled gracefully and therefore most stop execution of the program. What the stack trace shows is what was happening in the moments leading up to the bug. The stack is called a stack because each item (each function call) is stacked on top of the previous one in a special part of computer memory called the stack. Most computers and programming languages work with a stack. In programs written in programming languages without side effects, a...

Scala vs Javascript (ES6, TypeScript, Node.js)

tomo — Sat, 05 Mar 2016 06:22:01 +0000

March 5, 2016

scala javascript typescript es6 node.js

Now with Scala.js allowing isomorphic Scala code to run on both browser and server. Scala contends with JavaScript in the web domain. But assuming we are talking about web, how do the two languages compare?

First, JavaScript comes in a few flavors. There's ES5 which is currently running in all browsers. There's Node.js, which is the same Google V8 JavaScript engine but running outside the browser and thus without browser/web apis included, but which can run ES6 (EcmaScript 6). And then there are the many languages that compile or transpile down to plain old ES5 JavaScript,...

Random number generation in JavaScript

tomo — Fri, 04 Mar 2016 16:35:00 +0000

March 4, 2016

random javascript node.js crypto

Generating a random number in JavaScript is simple if you don't care about quality, more complicated if you do. When I say "in JavaScript" I mean both of the JavaScript runtimes - the browsers with their DOM/window, and Node.js without those things - and without all the modern browser APIs.

The default, old-fashioned way to get a random number in JavaScript is by using Math.random(). However, the numbers produced from Math.random() are not secure for crypto applications as they are known to contain predictable patterns. The reason for this non-randomness isn't simply

Python-like List Comprehensions in JavaScript

tomo — Thu, 03 Mar 2016 17:19:43 +0000

March 4, 2016

javascript es6 python functional lambda

Python has a neat syntactic feature where you can take a literal list constructor's bracket notation (e.g. [2, 4, 6, 8, 10]) but have code statements generate the list's contents. So instead of writing out the 5 even numbers in the example, one could write [(x+1)*2 for x in range(5)] which turns out to be more characters but you can imagine the savings if the series in the list was longer. Instead of range() we could have a literal list [0, 1, 2, 3, 4] or even a generator function, anything which is iterable.

How could we do this...

The Difference between JavaScript and Java

tomo — Tue, 01 Mar 2016 06:14:00 +0000

March 1, 2016

java javascript node.js

Many non-programmers and young programmers are confused by the names Java and JavaScript. In fact, JavaScript was renamed to JavaScript as an afterthought and a co-marketing campaign together with Sun (the creator of Java). But there are succinct jokes for this naming coincidence: Java and JavaScript are the same like car and carpet, or ham and hamster.

First, the similarities. On a cursory look, some of the syntax of Java and JavaScript code look alike. This is because they're somewhat descended from C (putting them in the Algol family but they are both more similar to C than...

Isomorphic JavaScript myth

tomo — Fri, 26 Feb 2016 05:58:47 +0000

February 26, 2016

isomorphic javascript

Isomorphic JavaScript is the idea of writing JavaScript that can run on the server just as well as in the browser, thus your otherwise frontend-only single page app (SPA), which only makes HTML appear after some post-load requests and execution, can also render the same HTML server-side (which is how things used to work) and give something to search engines to understand. AngularJS required hacks using PhantomJS to achieve this, by running a headless browser on your server.

In theory, a full stack web developer then only needs to know one language - JavaScript. In practice, knowing...

Creating forms with callbacks in React+Redux

tomo — Sat, 20 Feb 2016 18:06:33 +0000

February 21, 2016

react redux es6 javascript

In React, you have some simple/dumb components which are just html and other components and maybe render some values which are passed in. It becomes a little trickier when you want to add some functionality to the component, such as form elements - inputs and buttons and submit actions. What I mean by "forms with callbacks" is that you want to execute some JavaScript and also change state in your React app, but do so without giving direct access to state to the component. Instead here's one way to do it.

Draw out the HTML (don't worry about using React components yet) in JSX

Quick explanation of JavaScript Promises

tomo — Sun, 14 Feb 2016 16:27:08 +0000

February 14, 2016

es6 javascript promises

"JavaScript Promises: reason about async events, serially chain them, reduce them. General replacement for XHR"

What is a promise? Conceptually and outside the context of code, a promise is either a willful intention of achieving a result or a promise is considered the actual result itself. EcmaScript 6 (ES6) introduces the Promises API which is currently implemented by most browsers (and Edge but not IE according to caniuse.com - but there's a polyfill for that). So a JavaScript Promise is simply an object of some callback...

Assembly language vs Bytecode vs WebAssembly vs Asm.js

tomo — Mon, 18 Jan 2016 08:20:00 +0000

January 18, 2016

asm.js assembly bytecode java jvm webassembly javascript

Assembly

In the beginning there was a CPU. And the CPU could be loaded with data which were numbers and these magical numbers would cause the CPU to process those numbers and produce new numbers. This data which the CPU was running, the numbers fed into the computer, was machine code. And all programming of computers that's still done today ultimately ends up turning into machine code for the CPU, binary machine code being the only thing a computer can understand.

But long series of numbers, where each 256 or more unique numbers has special meaning which changes depending...