Pages with tag JavaScript

A deep dive guide to JavaScript Symbols (ES-6 and beyond)

ES2015 added a ton of useful new features, and among them is the Symbol type. Symbol lets us avoid property name collisions in a way where we can almost implement private properties in JavaScript objects.

Add/remove list items in Vue.js built with Bulma/Buefy Most applications with item lists you want to add or remove individual items. With Vue.js it's easy and obvious how to render an item list. What's not so obvious is how to manipulate the list afterwards. The Vue.js documentation doesn't say how to remove items or change items.
Complete guide to using ES6 modules to create Node.js packages that are easily usable from CJS modules It is very tempting to write all JavaScript code on Node.js with ES6 modules. But that creates a problem of interoperability with the large number of existing CommonJS (CJS) modules. Namely, it is difficult to use ES6 modules from a CJS module. Node.js makes it easy to use both CJS and ES6 modules from an ES6 module, and CJS modules can easily use CJS modules, but a CJS module using an ES6 module is painful. At the same time ES6 modules offer enough attractive benefits to warrant rewriting our code to switch from CJS to ES6 modules. This means we need a strategy for easily using Node.js ES6 modules from CJS modules.
Correctly match URL against domain name without killing yourself with regular expressions

The Internet relies on domain names as a more user-friendly humane address mechanism than IP addresses. That means we must often write code checking if a URL is "within" domain A or domain B, and to act accordingly. You might think a regular expression is the way to go, but it has failings because while a URL looks like a text string it's actually a data structure. A domain name comparison has to recognize that it's dealing with a data structure, and to compare correctly. Otherwise a URL with domain name "loveamazon.com" might match the regular expression /amazon.com$/i and do the wrong thing.

Debugging Syntax Error Unexpected Reserved Word in Mocha on Modern Node.js The error Unexpected Reserved Word usually means you're using await in a non-async function. But what if Mocha throws this error, citing a test suite file that's clean of such problems? To save spending fruitless hours, read this short article.
Dynamic import lands in Node.js, we can import ES6 modules in CommonJS code

ES6 modules are a cool new feature coming with Node.js 10.x, and a pre-release version available is avaible in 9.x. ES6 modules implement most of what we can do with Node.js's traditional CommonJS modules. One feature missing is the ability to dynamically select the module to load. The ES6 import statement only takes a static string. A new feature, landing in Node.js 9.7.x, adds an import() function offering a new way to load modules.

The most important feature may be that import() can be used in a CommonJS module to import an ES6 module.

Fixing "Maximum call stack size exceeded" in async Node.js code

I've happily used the async module for Node.js for years to simplify asynchronous operations over arrays. This is a difficulty in the Node.js paradigm, since the "normal" way to process an array is with a simple for loop. But if the operation is asynchronous the for loop has no way of knowing when to iterate to the next item, or even when processing is finished. Instead the async.eachSeries function does the trick, because your code tells async.eachSeries when to go to the next item, when there's an error, and it knows when the last item is processed, etc. It's been great.

Getting started with Vue.js application development Vue.js is an exciting new framework for developing front-end JavaScript applications. It promises to be a "Progressive" web framework, and I don't think they mean in a Political sense but means that Vue.js can be plugged into the part of an application which requires a richer experience. It is also supposed to be Approachable, works directly from HTML, CSS and JavaScript, while being Versatile and Performant. In this example we'll build a starter application, and embed it into an HTML web page. Specifically, this web page.
Handling unhandled Promise rejections, avoiding application crash

With Promises and async functions, errors are automatically caught and are turned into a Promise rejection. What happens if nothing inspects the rejected Promise? Turns out that, currently, Node.js detects the unhandled Promise rejection and it prints a warning. In the warning, it says the behavior of catching unhandled Promise rejections is deprecated and will be returned, and instead the application will crash. Therefore it's worth our while to figure out what to do with unhandled Promise rejections.

Hiding data, creating encapsulation, in JavaScript ES-2015 classes

ES2015 added a ton of useful new features, and with ES2016/2017/2018 we're getting a whole new language with a list of exciting new capabilities. One of them is the new Class defintion syntax that brings Class definitions closer to what's done in other languages. Unfortunately the new Class syntax does not provide a robust implementation hiding mechanism. Hiding the implementation is important in object oriented programming, if only to have the freedom to change the implementation at any time.

How to correctly calculate path to a Node.js module to access files in that module directory Many Node.js modules contain files meant to be accessed as data. For example the Bootstrap, jQuery and Popper.js modules do not contain Node.js code, but exist to distribute the libraries. We are supposed to configure Express (or other framework) to serve the files in those directories to a web browser. The question is -- what is the best way to calculate the filesystem path of a file installed as a Node.js module inside the node_modules hierarchy?
How to read array of values from browser DOM using jQuery, or in Node.js using Cheerio Typically with jQuery or Cheerio we read or write strings and numbers to/from the DOM, but what if we must use objects or arrays of data? The jQuery documentation mentions data-* attributes, but the documentation is not entirely clear how to use this for reading/writing objects or arrays to/from the DOM.
How to run JavaScript in the command-line environment

JavaScript is an extremely popular programming language deserving of a bigger role than browser-based programming. Fortunately we can use JavaScript outside web browsers, because of several non-browser JavaScript implementations. The most popular, Node.js, is not the only choice for running JavaScript outside the web browser.

Implementing __dirname in ES6 modules using import.meta.url

ES6 modules are a nifty new way to write modules. In Node.js, our traditional CommonJS modules had several injected variables one of which, __dirname, was incredibly useful. None of those variables exist in ES6 modules. The Node.js team is working on replacements that work in ES6 module contexts, and a new feature has been added in Node.js 10.0.0-pre giving us a way forward to implement the __dirname variable in ES6 modules.

Is Node.js one of the most widely used scripting languages on the Internet? Really? I can believe JavaScript is one of the most widely used scripting languages, but Node.js? Huh? But, over there on embed.ly they have published two libraries implementing the embed.ly API for PHP and Node.js, and claimed "These two libraries give you server-side access via the two most widely used scripting languages today."
Java, Twitter, and asynchronous event driven architecture

I'm reading a blog post about what Node.js is, and there's a glaring question "why in the world would anyone want to run JavaScript outside of a browser, let alone the server?" As the author of a (www.amazon.com) book about Node.js it's a question I've thought about quite a bit, especially coming as I do from the Java SE team at Sun where the work of that team was highly focused on server side software (hey, it's Java) to the detriment of the client side of Java. The question comes from a belief cemented into place by 15+ years of JavaScript in the browser that it's a browser only language. However, JavaScript has a long history on server-side and is a rather cool language, and Node.js is an excellent base for developing web applications.

JavaScript or SQL injection attacks in the Node.js platform?

Traditionally the server side of web applications has been written in PHP, Perl, Python, Java, C/C++, etc. Javascript traditionally was implemented only in web browsers, and hence Javascript programming has been almost completely focused on the client end of web application development. It's arguably better to have the same programming language on both client and server sides of web application development, maybe. Several attempts have been made to implement javascript for server side web application development. A new javascript stack, Node.JS, is getting a lot of attention.

Javascript (specifically Node.JS) for server-side web application programming

Traditionally the server side of web applications has been written in PHP, Perl, Python, Java, C/C++, etc. Javascript traditionally was implemented only in web browsers, and hence Javascript programming has been almost completely focused on the client end of web application development. It's arguably better to have the same programming language on both client and server sides of web application development, maybe. Several attempts have been made to implement javascript for server side web application development. A new javascript stack, Node.JS, is getting a lot of attention.

Joyent webinar on Node.js and "Carriers" (?phone companies?)

Recently the primary supporter of Node.js, Joyent, posted a video webinar about "Node.js overview for Carriers". Eric Burns talked about a broad range of services offered by Joyent, features of Node.js, spinning it all around the needs of mobile device carriers. That is, the phone companies who provide mobile device services and run the cell phone networks, not those individuals who carry around mobile devices.

Loading an ES6 module in a Node.js CommonJS module

ES6 modules are a nifty new way to write modules. They're rather similar to the CommonJS module format traditionally used by Node.js, but there are significant differences. When ES6 module support was first added to Node.js, it was an experimental feature with significant limitations. One limitation was whether you could use ES6 modules from CJS modules, and there was a 3rd party package to fill that gap. Today, ES6 modules are a first class feature in Node.js, and ES6 modules can be used from CJS without any add-on support.

Microsoft proposes bringing TypeScript-like type syntax to JavaScript It's not every day you see TypeScript as a trending topic on Twitter. But, a proposal by Microsoft to bring type syntax to JavaScript is certainly a big deal worthy of being a Twitter trending topic. Types coming to JavaScript?
Node.js 4.0.0 is out - quick tip for use while testing compatibility

Node.js v 4.0.0 was just released. This is a long-awaited release representing the healing of the schism in the Node.js community created when the io.js project forked Node.js. That had been done over a disagreement about the policies and maintainership of Node.js. Joyent had been in control of the project (because Ryan Dahl had been employed by Joyent) and not all in the community liked the decisions made by Joyent. They instead forked the project to create io.js, and implemented a bunch of useful ideas for example to adopt the latest-and-greatest version of the V8 JavaScript engine in order to get all the modern ES6 goodies.

Review: The Past, Present and Future of JavaScript (Axel Rauschmayer) You may have heard that the ECMAScript committee (that oversee's the standards for JavaScript) are working on the next version of the language. ECMAScript.next will probably become EMCAScript 6, and will mean some changes for JavaScript programmers. It may be useful for all JavaScript programmers to start understanding what those changes will be. That's where "The Past, Present and Future of JavaScript" fits into the world, helping us know what the ECMAScript committee is looking to do to the JavaScript language.
Rudimentary form validation in Vue.js with Buefy/Bulma As a follow-up to we want to study form validation. That example includes a little form in which we enter some information, and we want a little bit of validation to make sure we don't add bad entries.
Showing a tree structure, like a file-system, in Vue.js Many kinds of applications show a tree structure of data items, such as files in a file system. Over the last couple weeks I implemented (blog.sourcerer.io) a simple Markdown editor in Vue.js/Electron - and while the sample application did not show a file-system tree a full version of the application would do so. We use this sort of widget all the time in programs and web applications, but do you know how to implement such a widget? Speaking for myself I could probably work it out - it's nested UL and LI elements with some custom styling and whatnot - but I'd rather use a pre-baked tree component for Vue.js instead. The application shown here demonstrates using one such tree component.
Troubles with Asynchronous code flows in JavaScript, and the async/await solution of ES-2017

Asynchronous coding is one of those powerful tools that can bite, if you're not careful. Passing around anonymous so-called "callback" functions is easy, and we do it all the time in JavaScript. Asynchronous callback functions are called, when needed, as needed, sometime in the future. The key result is that code execution is out-of-order with the order-of-appearance in the code.

Using Dynamic import in Node.js lets us import ES6 modules in CommonJS code, and more - UPDATED With ES6, JavaScript programmers finally gained a standard module format that worked on both browser-side and server-side (Node.js) JavaScript runtimes. Plus, ES6 modules offer many interesting features. But Node.js programmers need to know how to integrate ES6 modules with the CommonJS module format we're accustomed to using. Now that Node.js v14 is coming, and bringing with it full ES6 module support as a standard feature, it is time to update a previous blog post about Dynamic Import on Node.js. The Dynamic Import feature, a.k.a. the import() function, gives JavaScript programmers much more freedom over the standard import statement, plus it lets us import an ES6 module into CommonJS code.
What is Babel, and when should one use Babel?

Fast advances in the JavaScript language mean the new features are not evenly distributed. Fortunately the JavaScript language is flexible enough that in many cases new features can be retrofitted by using a polyfill among other techniques. One of those techniques is Babel, a so-called Transpiler that can convert code using new features into equivalent code using old features, so that a programmer can code with the new features and still deploy to older JavaScript implementations.

Why publish Node.js packages to npm using Babel/Webpack? Babel and Webpack are widely used tools for front-end-engineering. Between the two you can code JavaScript using the latest ES2016/2017/2018/etc features, with multiple modules, and transpile it down to a simple JavaScript file using ES5 syntax. This is a big step forward in JavaScript tooling. But, since Node.js natively supports a huge fraction of ES2016/2017/2018/etc features, why do Node.js programmers even need to know Babel/Webpack? After reading a tutorial on using Babel/Webpack with Node.js modules, I have the beginning of an inkling for why.
You can joyfully parse and manipulate URL's in browser-based JavaScript URL's are not strings, but are a data structure that's represented as a string. How do you easily and reliably manipulate a URL string programmatically? Do you use regular expressions or other kinds of string manipulations? Given all the ways to encode data in a URL, how do you ensure it remains syntactically correct while doing string manipulation? Manipulating URL's with regular expressions is rather difficult because of the format and nature of a URL. It's better to manipulate a URL as if it's a data structure, to let software easily change URL fields while ensuring the URL is syntactically correct.