javascript

Displaying 1 - 10 of 22

JavaScript Namespaces and Closures instead of Global Variables

javascript closure namespace
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

node.js javascript
June 6, 2016

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

youtube javascript mobile safari
May 14, 2016

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

javascript mobile swipe
May 14, 2016

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

jquery javascript dom
March 21, 2016

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

node.js javascript npm json
March 18, 2016

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

stack call stack stack trace javascript php python bash
March 12, 2016

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)

scala javascript typescript es6 node.js
March 5, 2016

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

random javascript node.js crypto
March 4, 2016

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.

  1. 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

    2. ...

Python-like List Comprehensions in JavaScript

javascript es6 python functional lambda
March 4, 2016

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...