#JavaScript Posts

As a good JavaScript developer, you strive to write clean, healthy, and maintainable code. While you solve interesting and unique challenges, you’ve likely found that you’re often writing code that looks similar to the code for an entirely different problem you’ve handled before. You may not know it, but you’ve used a design pattern.

Asynchronous programming used to be a challenge even for seasoned professionals, leading to aptly named phenomena like Callback Hell.

In this article, Toptal JavaScript Developer Demir Selmanovic explains how async functions took us out of purgatory and why you should be using them.

Modern front-end frameworks constantly require you to download an entire development environment, complete with dependencies, and compile your code before even trying to view it on your browser. Is this something good? Is it the problem we are building more complex sites, or the frameworks are complex on their on own and they introduce an unnecessary level of complexity.

Is there really an ultimate best JavaScript front-end framework? Maybe there isn’t, but there is a way to choose the best framework for your web project.

In this article, Toptal Freelance JavaScript Developer Giorgi Bakradze takes a look at four of the most popular frameworks from five important perspectives that make it easy to determine which one is the best fit for your project’s needs.

The Ionic project is rapidly gaining in popularity and is one of the most popular open source projects worldwide. With the recent announcement of the stable version of Ionic 2, this is the perfect time to underscore the Ionic 2 and its predecessor.

In this post, Toptal software engineer Julien Renaux outlines the major changes Ionic 2 brought to the platform and explains how to put these new features to good use.

In this article, Toptal Software Engineer Martin Gouws explains advanced features of the Node Package Manager that should be in every JavaScript developer’s knowledge base.

In an ever growing ecosystem of rich and complicated JavaScript applications, there’s more state to be managed than ever before: the current user, the list of posts loaded, etc.Managing state can be hard and error prone, but immutability and Redux- a predictable state container for JavaScript apps- can help significantly.

In this article, Toptal Programmer David Xu talks about managing state using immutability with Redux, a predictable state container.

The Webpack module bundler processes JavaScript code and all static assets, such as stylesheets, images, and fonts. However, configuring Webpack and its dependencies can be cumbersome and not always a straightforward process, especially for beginners.

In this article, Toptal Software Engineer Andrej Gajdos provides a guide with examples on how to configure Webpack for different scenarios and points out the most common pitfalls connected to project dependencies and their bundling when using Webpack.

If you’ve spent your fair share of time developing web front-ends, you know that no amount of libraries and plugins are sufficient enough to make the development experience pleasant. Unpredictable event chains, complex data binding, and lack of structured data modeling only makes things worse.

Elm, a programming language built for front-end development, cuts to the root of all these problems and solves them there.

In this post, Toptal Software Engineer Stanislav Davydov provides a detailed guide to Elm and shows us how The Elm Architecture solves some of the most fundamental challenges of front-end development.

In the realm of software development, time and date manipulation is considered by many to be a difficult task. Complicated time zone rules, leap seconds, differences in locale-specific formatting, etc., force us to immediately resort to popular time and date manipulation libraries. We often use these libraries without thinking about how exactly they work, which can lead to all sorts of obscure bugs in our software.

In this article, Toptal Freelance Software Engineer Punit Jajodia gives us an in-depth introduction to some concepts and best practices to avoid a few of the obvious issues related to changing the time and date in our applications.

When dealing with web-based projects that run in the production environment, being able to build and deploy changes quickly is a top priority. However, repetitive processes such as building front-end assets, when not automated, can be prone to critical errors.

In this article, Toptal Freelance Software Engineer Anton Kanevsky shows us how Gulp can solve various challenges of build automation through simple JavaScript routines.

Meet Web Audio API, a powerful programming interface for controlling audio on the web. Gone are the days when the web browser could rarely play a sound file correctly. With this API, you can now load sound from different sources, apply effects, create visualizations, and do much more.

In this article, Toptal Freelance Software Engineer Joaquín Aldunate shows us how to unleash our inner musician using Web Audio API with the Tone.js framework by giving us a brief overview of what this API has to offer and how it can be used to manipulate audio on the web.

Ever tried to create a JSON data structure that includes entities with bidirectional relationships? If you have, you know that this often results in errors or exceptions being thrown.

In this article, Toptal Freelance Software Engineer Nirmel Murtic provides a robust working approach to avoiding these errors when creating JSON structures that included entities with bidirectional (i.e. circular) relationships.

How many times have you used the find-and-replace functionality (or RegEx) across a directory to make changes to JavaScript source files? Up your refactoring game by using codemods, scripts used to rewrite other scripts.

In this article, Toptal Freelance Developer Jeremy Greer walks us through three common uses of codemods, using the toolkit “jscodeshift”.

Software engineers are always searching for the best tools and guides to help them be more productive and allow them to spend less time reading long technical specifications.

Today, Toptal is pleased to present a new resource to the community: the JavaScript Cheat Sheet - ES6 and Beyond. Toptal’s JavaScript Cheat Sheet is a quick, easily understandable reference guide. It is free to download and includes all the new and exciting features introduced with ES6 as well as the future experimental features from ES7.

Today, writing applications in languages that compile to JavaScript is a very common practice. Scala developers, for example, can use Scala.js and have the same language for both the server and the client. That said, Scala’s compiler and standard dependency management tools are too limiting in the modern JavaScript world.

In this article, Toptal Freelance Software Engineer Michele Sciabarra shows us how to integrate Scala.js with the plethora of JavaScript modules available on NPM, using tools like Browserify, and explains how to do this without even having to install Node.js.

Node-RED, built on Node.js, is a tool designed for programming visually without having to write any code. It comes equipped with a browser-based flow editor that allows hardware devices and APIs to be connected with each other easily, making it an ideal tool for rapidly developing programs for IoT devices.

In this article, Toptal freelance software engineer Jesús Darío Rivera walks us through the process of building a simple program using Node-RED and Netbeast along with a virtual light bulb plugin that mimics the capabilities of a real smart bulb.

Streams are a powerful construct in Node.js and in I/O driven programming in general. Gulp, a tool for task automation, leverages streams in elegant ways to allow developers to enhance their build workflow.

In this article, Toptal engineer Mikhail Angelov gives us some insight into how Gulp works with streams by showing us step-by-step how to build a Gulp-like build automation tool.

Ionic is extremely popular at the moment, and it has revolutionized the hybrid application industry in a way that nobody could have imagined. However, over time, the best practices and tooling for Ionic have not progressed in the same way. As a result, the number of pitfalls that developers need to look out for when working with Ionic is still high.

In this article, Toptal Freelance Software Engineer Julien Renaux outlines the most common mistakes that Ionic developers should know.

Writing code that is easily testable takes some effort and planning. However, some patterns exist that can be used to write simple and functional code, making it easier to test them when the time comes.

In this article, Toptal engineer Joshua Mock shares some useful tips and patterns for writing testable code in JavaScript that are both simple to understand and simple to implement.

Unlike most front-end web frameworks, React’s aim is to solve the various challenges of building user interfaces that rely on changing data. Although React is a simple JavaScript library and is easy to get started with, it is still possible to misuse it in ways that deny the web app from reaping the benefits that React has to offer.

In this article, Toptal engineer Ivan Rogic demonstrates the synergy of React, Redux and Immutable.js, and shows how these libraries together can solve many performance issues that are often encountered in large web applications.

CoffeeScript allows developers to make the most out of JavaScript-based platforms without having to jump through its awkward language hoops. However, with the introduction of ES6 features into major JavaScript engines, plain JavaScript is now nearly as friendly and powerful out-of-the-box as CoffeeScript.

In this article, Toptal engineer William Coates shares his findings on ES6 from the perspective of a CoffeeScript convert.

An operating system written in Node.js? Yes, it exists, and it’s called NodeOS. Think for a second about the progress Node.js has made in the short time it’s been around. Now, imagine the same thing happening with an operating system.

In this article, Toptal engineer Danny Morabito introduces us to NodeOS, guiding us with a step-by-step tutorial on how to create our first NodeOS application using nothing more than Node.js.

Processing makes prototyping visual apps a breeze. With its easy to use programming constructs and some mathematics, building a simple game is a lot easier than one may think.

In this article, Toptal engineer Oguz Gelal provides a step-by-step tutorial to building a game using Processing and porting it to the web.

The GWT Web Toolkit, formerly known as Google Web Toolkit, is a set of development tools for building and optimizing complex browser-based applications using the Java programming language. What makes GWT not “yet another Java tool to write web apps,” is the fact that the heart of the toolkit is a compiler that converts Java into JavaScript, enabling developers to write front-end web applications while leveraging all of Java’s strengths.

In-memory data collection manipulation is something that we often need to do in data-centric reporting and visualization applications. When needed, we often tend to resort to complex loops, list comprehensions, and other suboptimal means, which can easily end up being a huge mess of hard-to-maintain spaghetti code. Supergroup.js is an in-memory data manipulation library that can be used to solve some common data manipulation challenges on limited datasets.

Ractive.js provides powerful capabilities for web app development in a way that is refreshingly simple to learn and use. In this article, Toptal Engineer Eugene Mirotin walks you through the process of building a simple Ractive search app, demonstrating some of Ractive’s key features and the ways in which it helps simplify web app development. Code samples are provided and explained.

In this article, I’ll go through some of the interesting features and libraries that are available to use with React. Even if you don’t plan on using React, taking a look at its ecosystem is inspiring. You may want to simplify your build system using the powerful, yet comparatively easy to configure, module bundler Webpack, or start writing ECMAScript 6 and even ECMAScript 7 today with the Babel compiler. So, let’s explore the React ecosystem!

While Ruby has Rails and Python has Django, the dominant application development framework for Node has yet to be established. But, there is a powerful contender gaining steam: LoopBack, an open source API framework built by StrongLoop, the creators of Express.

Let’s take a closer look at LoopBack and it’s capabilities by turning everything into practice and building an example application.

Ember.js is a comprehensive framework for building complex client-side applications. But, as with any advanced framework, there are still pitfalls Ember developers may fall into. With the following post, I hope to provide a map to evade these. Let’s jump right in!!

This article provides the overview of pain points caused by AngularJS and reasons for switching to React.

Backbone.js equips the developer with an array of tools that are minimal but extremely flexible. This gives developers the option to design the applications the way they want, but also introduces a number of way things can go wrong. This article outlines a few common mistakes that Backbone.js developers can make, and how they may avoid them.

AngularJS is a very powerful framework. It is the third most starred repository on GitHub. It is not difficult to start using, but the goals that it is intended to accomplish demand comprehension. No longer can we ignore memory consumption, because it will not reset on navigation anymore. This is the vanguard of web development. Let’s embrace it!

Developers often automate certain repetitive and tedious tasks to save time as well as to stay focused on the task at hand.

This article demonstrates how simple and easy it is to use Gulp as a build tool.

Texts are an integral part of user interfaces. In many cases, text annotation plays a vital role in grabbing the user’s attention or allowing the user to decorate and highlight the content they produce.

In this article, we walk through the ins and outs of an open source JavaScript library built for annotating texts on the web.

Meteor makes developing web applications simple. It’s easy to learn, and comes with a pre-built arsenal of powerful functionalities. In this article, we will walk through a detailed tutorial for building a simple real-time web application.

AllcountJS is an emerging open source framework built with rapid application development in mind. It is based on the idea of declarative application development using JSON-like configuration code that describes the structure and behavior of the application.

In this article, we walk through a step-by-step tutorial for prototyping a data oriented web application using AllcountJS.

Modern web browsers provide a rich set of APIs; some of which have been around for a long time, and have since been used to build powerful web applications.

Web Audio API has been popular among HTML5 game developers, however, the Web MIDI API and its capabilities have yet to be utilized. In this article, Toptal engineer Stéphane P. Péricat guides you through the basics of the Web MIDI API, and shows you how to build a simple monosynth to play with your favorite MIDI device.

There are many programming platforms used to develop games, and there are a plethora of devices to play them on, but when it comes to playing games in a web browser, Flash-based development still leads the way.

What if we could port these games to HTML5 Canvas technology and play them on mobile browsers as well? In this article, Toptal engineer Avinash Kaza gave a solution to this.

Since almost all smartphones today are equipped with location sensors, motion sensors, bluetooth, and wifi, today’s mobile apps can use context awareness to dramatically increase their capabilities and value. This article walks you through building a context aware app that employs complex event processing.

One of the biggest and most common problems in front-end web development is state management. A developer is constantly focused on keeping the state object in sync with its view and the DOM representation. Users can interact with the application in many ways and it’s a big task to provide a clean transition from one view state to another.

We will see how using React JavaScript library can help us reduce application complexity and offload UI transitions from our application.

This article provides step by step guide for building hybrid multi-platform real-time mobile application using the Ionic Framework and the Firebase.

Data Driven Documents, or D3.js, is an awesome data visualization library. In this article, I’ll discuss one particularly compelling application of D3.js: map making. We’ll go through the common challenges of building a useful and informative web map, and show how in each case, D3.js gives you everything you need to make your map look and feel beautiful.

As mobile and tablet devices come closer to achieving final world domination, web technology is in a race to accommodate the ever-growing number screen sizes. However, devising tools to meet the challenges of this phenomenon brings a whole new set of problems, with one of the latest buzzwords to emerge being “responsive web”.

Promises are a hot topic in JavaScript, and you should definitely get acquainted with them. They are not easy to wrap your head around, it can take a few articles, and a decent amount of practice to comprehend them. Aim of this article is to help you understand Promises, and nudge you to get more practice using them.

React.js is a fantastic library. It is only one part of a front-end application stack, however. It doesn’t have much to offer when it comes to managing data and state. Facebook, the makers of React, have offered some guidance there in the form of Flux. I’ll introduce basic Flux control flow, discuss what’s missing for Stores, and how to use Backbone Models and Collections to fill the gap in a “Flux-compliant” way.

At first blush, JavaScript may seem quite simple. Yet the language is significantly more nuanced, powerful, and complex than one would initially be lead to believe. Many of JavaScript’s subtleties lead to a number of common mistakes – 10 of which we discuss here – that are important to be aware of and avoid in one’s quest to become a master JavaScript developer.

Ember Data is a library for robustly managing model data in Ember.js applications. Ember Data provides a more flexible and streamlined development workflow, minimizing code churn in response to what would otherwise be high impact changes. This thorough guide introduces Ember Data’s key constructs and paradigms, demonstrating the value it can provide to you as a developer.

In this follow-up to his first highly popular AngularJS tutorial, Toptal engineer Raoni Boaventura guides you through the steps of setting up your project, including scaffolding, dependency management, and preparing it for testing.

A year after Google’s launch of Polymer, Toptal engineer Alejandro Hernandez takes it out for a test drive to see if it’s yet ready for prime time. This post explores the maturity and stability of Polymer.js as a foundation for large-scale application development. The results and conclusions from this analysis are provided, along with an introductory overview of the technology.

JavaScript is much more nuanced than most developers initially realize. Even for those with more experience, some of JavaScript’s most salient features continue to be misunderstood and lead to confusion. One such feature, described in this article, is the way that property and variable lookups are performed and the resulting performance ramifications to be aware of.

Beyond its beauty, in recent years Córdoba has been enjoying a rapidly growing reputation as a technology center, one that may soon rival Buenos Aires as Argentina’s main technology hub. Last month, Toptal coordinated and hosted a highly successful and well-attended JavaScript Technical Conference in Córdoba, Argentina. Read about how the event came together and the vibrant network of software developers in and around Córdoba.

With the increasingly ubiquitous nature of mobile devices and applications, if you’re not already thinking about mobile apps, you probably should be. This post focuses on methodologies and tools to employ, and pitfalls to avoid, in the development of highly functional, intuitive, and easy-to-use mobile web apps.

As modern web applications do more and more on the client-side (the fact itself that we now refer to them as “web applications” as opposed to “web sites” is quite telling), there has been rising interest in client-side frameworks. There are a lot of players in this field but for applications with lots of functionality and many moving parts, two of them stand out in particular: Angular.js and Ember.js.

Angular.js has already been introduced on this blog, so we’re going to focus on Ember.js in this post, in which we’ll build a simple Ember application to catalog your music collection. You’ll be introduced to the framework’s main building blocks and get a glimpse into its design principles.

I’ve been an Engineer at Toptal for just about one year now, working on the same project since I joined the network: Ondello, a service that connects doctors and patients over WebRTC.

When I first joined Ondello, I was hired as a Senior Ruby on Rails Developer, tasked to build a service up from scratch. These days, we’re a team of multiple developers working on a fairly large, complex system.

With this post, I’d like to share the story behind Ondello. Specifically, I’d like to talk about: how a simple application became not-so-simple, and how our use of cutting-edge technologies posed problems I’d never considered before.

If you haven’t tried AngularJS yet, you’re missing out. The framework consists of a tightly integrated toolset that will help you build well structured, rich client-side applications in a modular fashion—with less code and more flexibility.

One of the reasons I love working with AngularJS is because of its flexibility regarding server communication. Like most JavaScript MVC frameworks, it lets you work with any server-side technology as long as it can serve your app through a RESTful web API. But Angular also provides services on top of XHR that dramatically simplify your code and allow you to abstract API calls into reusable services. As a result, you can move your model and business logic to the front-end and build back-end agnostic web apps. In this AngularJS tutorial, we’ll do just that, one step at a time.

Node.js shines in real-time web applications employing push technology over websockets. What is so revolutionary about that? Well, after over 20 years of stateless-web based on the stateless request-response paradigm, we finally have web applications with real-time, two-way connections, where both the client and server can initiate communication, allowing them to exchange data freely. This is in stark contrast to the typical web response paradigm, where the client always initiates communication. Additionally, it’s all based on the open web stack (HTML, CSS and JS) running over the standard port 80.