JavaScript Posts

The Toptal Engineering Blog is a hub for in-depth development tutorials and new technology announcements created by professional software engineers in the Toptal network.
Luke Tomlin
Unearthing ClojureScript for Front-end Development

ClojureScript and its multiparadigm approach (with an emphasis on functional programming) may sound esoteric to some front-end developers. But it’s amazing to work with, and getting started with it is far simpler than one might imagine. In this tutorial, Toptal Freelance Clojure Developer Luke Tomlin shows off some key features, getting straight into a React demo using Reagent and the Hiccup syntax.

Continue reading →
Joaquin Cid
Angular 6 Tutorial: New Features with New Power

Angular 6 is out! The most outstanding changes are in its CLI and how services get injected. In this tutorial, Toptal Freelance Angular Developer Joaquin Cid goes over the basic steps of initial setup and then creates a small diary app using Material Design for the front end and Firebase for the back end.

Continue reading →
Radek Ostrowski
The Ultimate ENS and ĐApp Tutorial

The Ethereum Name Service is a blockchain-backed alternative to the internet’s traditional Domain Name System. If you own a .eth domain, you can deploy smart contracts that let users set up their own subdomains—but then, of course, you’ll want a corresponding ĐApp to make it user-friendly. In this tutorial, Toptal Freelance Ethereum Developer Radek Ostrowski provides complete coverage of this scenario, this time with a focus on ĐApp development.

Continue reading →
Alexander Zinchuk
Cordova Frameworks: Ionic vs. Framework7

Hybrid mobile apps may have their limitations, but often it’s well worth the boost in cross-platform consistency and development speed. Apps made with Apache Cordova in particular can further leverage existing web developer skills through the use of Cordova frameworks. This tutorial compares Ionic with Framework7.

Continue reading →
Shaojiang Cai
Hot Module Replacement in Redux

Hot module replacement is one of the most useful features offered by Webpack. It allows all kinds of modules, including JSON, CSS, and JS files, to be updated at runtime without needing a full refresh.

In this article, Toptal Freelance JavaScript Developer Shaojiang Cai demonstrates how to use Hot Module Replacement in Redux.

Continue reading →
Juan Carlos Arias Ambriz
Emulating React and JSX in Vanilla JS

Not everybody likes JavaScript frameworks, nor are they always applicable. But even when we don’t want to or can’t use them, there are some parts that are handy to have.

In this tutorial, Toptal Freelance JavaScript Developer Juan Carlos Arias Ambriz proposes a simple way to recapture some of the benefits of using JSX while working in vanilla JS.

Continue reading →
Sebastian Schocke
How to Do JWT Authentication with an Angular 6 SPA

JSON web tokens (JWTs) provide a method of authenticating requests that’s convenient, compact, and secure. More often than not, Angular apps will include them in their data flows.

In this tutorial, Toptal Freelance Software Engineer Sebastian Schocke shows how to implement JWT authentication in an Angular 6 single-page application (SPA), complete with a Node.js back-end.

Continue reading →
Kevin Bloch
Haxe: Cross-platform Development's Best-kept Secret

The modern, cross-platform programming language Haxe is well-known in some circles, yet many developers have never heard of it. Since it first appeared in 2005, it’s been battle-tested by its loyal—if rather quiet—following.

In this article, Toptal Freelance Software Engineer Kevin Bloch explores the Haxe ecosystem and how to transpile some sample code.

Continue reading →
Filip Petkovski
Apache Cordova Tutorial: Developing Mobile Applications with Cordova

Mobile applications are creeping in. Developing for each mobile platform can be an exhaustive task, especially if resources are limited. This is where Apache Cordova comes in handy by providing a way to develop mobile applications using standard web technologies - HTML5, CSS3 and JavaScript. This article explores how one can get started with Apache Cordova and build mobile applications targeted at a wide range of mobile devices.

Continue reading →
Ben Jones
Creating Server-side Rendered Vue.js Apps Using Nuxt.js

When using a JavaScript framework, your browser doesn’t receive a complete page to display. Instead it gets a bunch of pieces and instructions of how to put them all together. It takes a substantial amount of time to put all this information together before your browser actually has something to display.

In this article, Toptal Freelance Front-end Engineer Ben Jones introduces us to Nuxt.js, a server-side rendering library for Vue.js, inspired by the popular Next.js for React.js.

Continue reading →
Amaury Martiny
One-click Login with Blockchain: A MetaMask Tutorial

Online users are becoming increasingly resistant to traditional email/password registration processes. One-click social logins via Facebook, Google, or GitHub are better, but they come with data privacy trade-offs.

This article introduces a one-click, cryptographically-secure login flow using MetaMask, with all data stored on the app’s own back-end.

Continue reading →
Marko Mišura
The Comprehensive Guide to JavaScript Design Patterns

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.

Continue reading →
Juan Carlos Arias Ambriz
Front-end Frameworks: Solutions or Bloated Problems?

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.

Continue reading →
Alonso Ayala Ortega
Test-driven React.js Development: React.js Unit Testing with Enzyme and Jest

Any piece of code that has no tests is said to be legacy code according to Michael Feathers. Therefore, one of the best ways to avoid creating legacy code is using test-driven development (TDD).

While there are many tools available to create unit tests in JavaScript and, in this post, we will use Jest and Enzyme to create a React.js component with basic functionality using TDD.

Continue reading →
Ahmet Shapiro-Erciyas
Angular Change Detection and the OnPush Strategy

Out of the box, Angular provides two different change detection strategies: Default and OnPush. Each strategy has its own advantages, but sometimes it is easy to miss a nifty optimization opportunity if you stick to the default strategy.

In this article, Toptal Freelance Software Engineer Ahmet Shapiro-Erciyas walks us through the available change detection strategies and shows how to use them in any Angular project.

Continue reading →
Igor Geshoski
Working with Angular 4 Forms: Nesting and Input Validation

Validating user inputs is an essential part of any robust web application. Angular 4 makes it especially easy for both template-driven and reactive forms.

In this article, Toptal Freelance Angular Developer Igor Geshoski walks us through the different approaches in Angular 4 form validation and shows how even complex form validation can be done easily.

Continue reading →
Giorgi Bakradze
How to Choose the Best Front-end Framework

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.

Continue reading →
Juan Calou
A How-to Guide to SVG Animation

The advantages of SVG on the web go beyond producing resolution-independent graphics. With a little CSS and JavaScript, you can apply cool animations and effects to your front-end without requiring the user to install bulky plugins.

Continue reading →
Rico Mossesgeld
Eight CSS Tips for Advanced Layouts and Effects

Knowledge of CSS is a fundamental skill in the web development space. However, implementing certain web design patterns with just CSS can be a frustrating task, and often requires an in-depth understanding of it.

In this article, Toptal Freelance Web Developer Rico Mossesgeld shares several CSS tips and tricks that take advantage of lesser known CSS features to solve real layout and design problems.

Continue reading →
Adnan Ademovic
3D Graphics: A WebGL Tutorial

Whether you just want to create an interactive 3D logo, on the screen or design a fully fledged game, knowing the principles of 3D graphics rendering will help you achieve your goal.

In this article, Toptal Freelance Software Engineer Adnan Ademovic gives us a step-by-step tutorial to rendering objects with textures and lighting, by breaking down abstract concepts like objects, lights, and cameras into simple WebGL procedures.

Continue reading →
Brian Coords
WordPress REST API: The Next Generation CMS Feature

For a while, WordPress seemed to had fallen behind. As the web became more reliant on JavaScript to create immersive, interactive experiences, it became increasingly clear that WordPress needed to offer new ways for users and developers to interact with its content.

In this post, Toptal Freelance Developer Brian Coords explores the amazing new features of WordPress’s REST API, showing why WordPress is still on the cutting edge of web development.

Continue reading →
Julien Renaux
Ionic 2 vs. Ionic 1: Performance Gains, New Tools, and a Big Step Forward

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.

Continue reading →
David Xu
Immutability in JavaScript using Redux

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.

Continue reading →
Andrej Gajdos
A Guide to Managing Webpack Dependencies

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.

Continue reading →
Stanislav Davydov
Make Your Web Front-end Reliable with Elm

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.

Continue reading →
Eric Grosse
Webpack or Browserify & Gulp: Which Is Better?

Gone are the days where front-end developers for web applications could use ad-hoc JavaScript with jQuery and such all in a single JavaScript file. Modern web applications require more effort from the developer to adopt an overall architecture and development process. Building such front-end applications relies on lots of external dependencies and modular source code, and these elements necessitate automation to save developers time and reduce the chances of mistakes.

In this article, Toptal Freelance Software Engineer Eric Grosse shows us how various combinations of the popular tools Webpack, Browserify, Gulp and Npm can benefit us by enhancing our development environment and allowing us to focus on writing the app itself.

Continue reading →
Punit Jajodia
The Definitive Guide to DateTime Manipulation

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.

Continue reading →
Anton Kanevsky
Gulp: A Web Developer's Secret Weapon for Maximizing Site Speed

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.

Continue reading →
Joaquín Aldunate
Web Audio API: Why Compose When You Can Code?

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.

Continue reading →
Nirmel Murtic
Bidirectional Relationship Support in JSON

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.

Continue reading →
Jeremy Greer
Write Code to Rewrite Your Code: jscodeshift

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

Continue reading →
Jesus Dario Rivera
Toptal's Quick And Practical JavaScript Cheat Sheet: ES6 And Beyond

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.

Continue reading →
Federico Pereiro
Declarative Programming: Is It A Real Thing?

In a nutshell, declarative programming consists of instructing a program on what needs to be done, instead of telling it how to do it. This approach involves providing a domain-specific language (DSL) for expressing what the user wants. This DSL shields users from messy low-level constructs while still achieving the desired end-state.

While declarative programming offers advantages over the imperative approach it replaces, it’s not as straightforward as it may seem. In this comprehensive article, Toptal Freelance Software Engineer Federico Pereiro outlines his experience with declarative tools and explains how you can make declarative programming work for you.

Continue reading →
Michele Sciabarra
Using Scala.js With NPM And Browserify

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.

Continue reading →
Jesus Dario Rivera
Programming Visually With Node-RED: Wiring Up The Internet Of Things With Ease

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.

Continue reading →
Mikhail Angelov
Gulp Under the Hood: Building a Stream-based Task Automation Tool

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.

Continue reading →
Julien Renaux
The 9 Most Common Mistakes That Ionic Developers Make

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.

Continue reading →
Joshua Mock
Writing Testable Code in JavaScript: A Brief Overview

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.

Continue reading →
Darion Cassel
Developer's Guide to Improving Project Structure in Meteor Applications

Meteor is a framework for rapidly building real-time JavaScript web applications. It can be used to build complex applications with amazing ease. However, that can often result in adoption of bad development practices and poorly structured code.

In this article, Toptal engineer Darion Cassel shares some simple ways to improve the structure of your next Meteor-based web application without resorting to complicated boilerplates and scaffolding tools.

Continue reading →
Stephen Villee
Persisting Data Across Page Reloads: Cookies, IndexedDB and Everything In-Between

Modern web browsers offer a number of different APIs and mechanisms to storing data on the client-side. But are all of these options created equal?

In this article, Toptal engineer Stephen Villee demystifies the various client-side storage options available in modern web browsers and explains how each of these can play a role in storing session data on the client-side.

Continue reading →
Ivan Rogic
React, Redux and Immutable.js: Ingredients for Efficient Web Applications

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.

Continue reading →
Son Nguyen Kim
Integrating Facebook Login in AngularJS App with Satellizer

Integrating social network login in web applications directly using their SDKs can be a time consuming task. The fact that these SDKs keep changing every now and then doesn’t help either.

In this article, Toptal engineer Son Nguyen Kim provides us with an in-depth tutorial on how to use Satellizer, a feature-rich AngularJS library to integrate Facebook Login in an AngularJS web app.

Continue reading →
William Coates
What's New in ES6? Perspective of a CoffeeScript Convert

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.

Continue reading →
Matt Spaulding
Build Ultra-Modern Web Apps with Angular Material

Material Design uses a paper metaphor, bold intentions, and meaningful motion to give user interfaces an ultra-modern feel. Web applications built using AngularJS can now easily adopt these design principles using Angular Material, a reference implementation of Google’s Material Design Specification.

In this article, Toptal engineer Matt Spaulding walks us through the principles of Material Design and showcases some modern user interface elements built using the Angular Material library.

Continue reading →
Danny Morabito
NodeOS: The JavaScript Based Operating System

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.

Continue reading →
Stéphane P. Péricat
Electron: Cross-platform Desktop Apps Made Easy

Building cross-platform desktop applications has been something of a nightmare for a very long time, as extreme differences between popular desktop operating systems makes it a challenging feat. However, in light of newer tools and frameworks like Electron, building a cross-platform desktop application has never been easier. In this article, Toptal engineer Stéphane P. Péricat walks us through a step-by-step tutorial to building a cross-platform password key-ring desktop application using technologies that most of us are already familiar with.

Continue reading →
Nick McCrea
Learn to Code: Wisdom and Tools for the Journey

It’s no surprise that more and more people, from all kinds of backgrounds, are deciding to learn to code. But, each person who tackles the task is soon faced with an unpleasant reality: Learning to program is hard. Contrary to expectations, the feeling of “I don’t get it,” may persist unabated long into the journey, making once bright-eyed beginners feel hopeless, lost, and ready to give up.

The moral of the story is this: Be prepared. The path to programmer paradise is a long one, and without the right mindset at the beginning, it can quickly lose its appeal. In this article, I’ll attempt to give you some guidance on what to expect on your journey, how best to go about it, and what tools and resources you may find helpful along the way.

Continue reading →
Vlad Miller
Debugging Memory Leaks in Node.js Applications

Memory leaks in long running Node.js applications are like ticking time bombs that, if left unchecked in production environments, can result in devastating outcomes. These bugs are often considered to be hard to find. However, with the right tools and a strategic approach, memory leaks can not only be solved but also avoided in the future. In this article, Toptal engineer Vladyslav Millier gives us insight into what memory leaks are, how some sophisticated debugging tools can be used to find memory leaks, and how to plug them once and for all.

Continue reading →
Alberto Mancini
The GWT Toolkit: Build Powerful JavaScript Front Ends Using Java

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.

Continue reading →
Rob Moore
Towards Updatable D3.js Charts

When Mike Bostock created D3.js, he introduced a tried and true reusable charts pattern for implementing the same chart in any number of selections. However, the limitations of this pattern are realized once the chart is initialized. In this article, Toptal engineer Rob Moore presents a revised reusable charts pattern that leverages the full power of D3.js.

Continue reading →
Mahmud Ridwan
Taming WebRTC with PeerJS: Making a Simple P2P Web Game

WebRTC has opened doors to all kinds of new peer-to-peer web applications and games that can run in the browser without the need of additional plugins. However, being a relatively new technology, it still poses some unique challenges to developers. PeerJS aims to tackle some of those challenges by providing an elegant API and insulating developers from WebRTC’s implementation differences. In this article, Toptal engineer Mahmud Ridwan provides an introductory tutorial to building a simple, peer-to-peer web game using PeerJS.

Continue reading →
Vedran Aberle Tokić
Responsive Design Is Not Enough, We Need Responsive Performance

Between square inch smart wristwatches and mammoth smart TVs, a responsive website capable of adapting to a wide array of screen sizes and device capabilities is something no one complains about. However, many websites are still plagued by desktop-first design paradigms, or mobile-first paradigms with absolutely no focus on performance. These traditional approaches to responsive web design have various shortcomings. Fortunately, some simple ideas can help solve these problems.

Continue reading →
Sigfried Gold
Ultimate In-memory Data Collection Manipulation with Supergroup.js

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.

Continue reading →
Eugene Mirotin
Ractive.js - Web Apps Made Easy

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.

Continue reading →
Tomas Holas
Navigating the React.JS Ecosystem

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!

Continue reading →
Jovan Jovanovic
Let LoopBack Do It: A Walkthrough of the Node API Framework You've Been Dreaming Of

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.

Continue reading →
Tomislav Bacinger
The 10 Most Common Bootstrap Mistakes That Developers Make

Bootstrap is a powerful toolkit. It comes bundled with basic HTML and CSS design templates that include many common UI components. Most of the important pitfalls are mentioned in the Bootstrap documentation, but still some mistakes are pretty subtle, or have ambiguous causes. This article outlines some of the most common mistakes, problems, and misconceptions when using Bootstrap.

Continue reading →
Tomislav Bacinger
What is Bootstrap? A Short Bootstrap Tutorial on the What, Why, and How

If you’re doing anything web related, chances are you’ve heard about Bootstrap. Bootstrap is a powerful toolkit - a collection of HTML, CSS, and JavaScript tools for creating and building web pages and web applications. It is a free and open source project, hosted on GitHub, and originally created by (and for) Twitter. If by now you still don’t know what Bootstrap is, or you just want to get a better overview of what it is and what it does best, you’ve come to the right place.

Continue reading →
Anton Shkuratov
SVG Text Tutorial: Text Annotation on the Web

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.

Continue reading →
Pavel Tiunov
Application Development with Rapid Application Development Framework AllcountJS

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.

Continue reading →
Tomislav Bacinger
Survey of the Best Online Mapping Tools for Web Developers: The Roadmap to Roadmaps

Making your own maps is not a big undertaking anymore, but for developers not familiar with web mapping, the agony of choice might be intimidating. You want to make maps, but don’t know where to start nor which tools to use. I am here to help.

Here, I’ll discuss several of the best available tools, providing a brief overview of each, along with code examples, and weighing the pros and cons.

Continue reading →
Mahmud Ridwan
Predicting Likes: Inside A Simple Recommendation Engine's Algorithms

The Internet is becoming “smarter” every day. The video-sharing website that you frequently visit seems to know exactly what you will like, even before you have seen it. The online shopping cart holding your items almost magically figures out the one thing that you may have missed or intended to add before checking out. It’s as if these web services are reading your mind - or are they?

Turns out, predicting a user’s likes involves more math than magic. In this article we will explore one of the many ways of building a recommendation engine that is both simple to implement and understand.

Continue reading →
Alberto Mancini
How GWT Unlocks Augmented Reality in Your Browser

In our previous post on the GWT Web Toolkit, we discussed the strengths and characteristics of GWT, to mix Java and JavaScript libraries seamlessly in the browser. In today’s post, we would like to go a little deeper, and see the GWT Toolkit in action. We’ll demonstrate how we can take advantage of GWT to build a peculiar application: an augmented reality web application that runs in real time, fully in JavaScript, in the browser. We’ll focus on how GWT gives us the ability to interact easily with many JavaScript APIs, such as WebRTC and WebGL, and allows us to harness a large Java library, NyARToolkit, never intended to be used in the browser.

Continue reading →
Stéphane P. Péricat
MIDI Tutorial: Creating Browser-Based Audio Applications Controlled by MIDI Hardware

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.

Continue reading →
Avinash Kaza
Making an HTML5 Canvas Based Game: A Tutorial Using AngularJS and CreateJS

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.

Continue reading →
Leonardo Andrés Garcia Crespo
React.js View State Management Tutorial

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.

Continue reading →
Balint Erdi
JavaScript Promises: A Tutorial with Examples

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.

Continue reading →
Alex Rattray
Simple Data Flow in React Apps Using Flux and Backbone: A Tutorial with Examples

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.

Continue reading →
Ryan J. Peterson
Buggy JavaScript Code: The 10 Most Common Mistakes JavaScript Developers Make

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.

Continue reading →
Pooyan Khosravy
Ember Data: A Comprehensive Tutorial for the ember-data Library

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.

Continue reading →
Alejandro Hernandez
Polymer.js: The Future of Web Application Development?

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.

Continue reading →
Diego Castorina
JavaScript Prototype Chains, Scope Chains, and Performance: What You Need to Know

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.

Continue reading →
Ramiro Agustin Palacios
Hosting a Tech Conference for a Software Developer Network: The CordobaJS Event

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.

Continue reading →
Balint Erdi
A Guide to Building Your First Ember.js App

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.

Continue reading →
Alexandre Mondaini Calvão
A Year Building a WebRTC Application: Lessons in Startup Engineering

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.

Continue reading →
Raoni Boaventura
A Step-by-Step Tutorial for Your First AngularJS App

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.

Continue reading →
Tomislav Capan
Why The Hell Would I Use Node.js? A Case-by-Case Tutorial

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.

Continue reading →
Tomislav Kozačinski
How a Single Front-End Engineer Can Replace a Team of Two

Demand within the web design scene today has changed over the past few years: designers with front-end skills, and front-end developers with design skills, are more and more in demand. Yes, you could argue that the jobs are completely different—and maybe you straight-up don’t like one of them—but truth be told, in my six years as a freelance web developer and twelve years as a designer, I’ve learned that it’s much harder to get by as just a web designer or just a front-end developer.

Wearing both hats has a lot of advantages: from a professional perspective alone, you can find work more easily and charge a higher rate because you’re bringing more to the table.

Continue reading →
Alejandro Rigatuso
Growing Growth: Perform Your Own Cohort Analysis with This Open Source Code

But this isn’t just another article about cohort analysis. If you already know the importance of the topic and want to skip the introduction, you can jump to the simulator, where you can either simulate startup growth based on retention, churn, and a number of other factors, or analyze your own PayPal logs with the code I’ve open sourced.

If, however, you don’t realize that these are some of the most important metrics around–continue reading.

Continue reading →
Cameron Barr
Engineering Internals of a RAD Framework... as a PHP Developer with Nooku

Everyone has their own set of tools. As a PHP developer, one of my favorites is a Rapid Application Development framework called “Nooku”. In the words of the development group: “Nooku is more of a web development toolkit than a framework”

In case you are not familiar with it, have a look. It’s an open source project that makes heavy use of industry accepted design patterns to produce highly componentized applications that are easily extensible and reusable (initially created by one of the lead Joomla developers). Out of the box, Nooku gives you a great deal to help get projects off the ground faster. A small, but strong sample:

Continue reading →