Web 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.
Diego Díaz
How to Build CSS-only Smart Layouts with Flexbox

Although CSS was meant to deal with styling, creating extraordinary layouts on the web has always been a unique challenge and almost always required the developer to resort to JavaScript. However, Flexbox is here to change that.

In this article, Toptal Freelance Software Engineer Diego Díaz walks us through the basics of Flexbox and some cool examples of how Flexbox can be used to build smart CSS-only layouts.

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 →
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 →
Justin Brazeau
Sass Mixins: Keep Your Stylesheets DRY

Nowadays, front-end development workflows involve many modern tools and preprocessors that not only streamline the whole process, but also allow you to spend less time on common web tasks, giving you more time to focus on other aspects of the project that require more careful and skilled insight. Sass, the scripting language for syntactically awesome stylesheets, comes with robust and built-in support for mixins - an essential feature for keeping your stylesheets DRY.

In this article, Toptal Freelance Software Engineer Justin Brazeau shows us 10 useful Sass mixins that help keep your stylesheets manageable by breaking them into smaller reusable bits, each with its own focus.

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 →
Jongwook Kim
How to Create a Simple Python WebSocket Server Using Tornado

The threaded model and global interpreter lock has always been in the way of Python handling thousands of concurrent long-lived connections. Modern web frameworks, such as Tornado, use non-blocking network I/O to make Python feasible for implementing WebSocket servers.

In this article, Toptal engineer Jongwook Kim walks us through the process of implementing a simple WebSocket-based web application in Python using the Tornado web framework.

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 →
Cong Liu
Caching in Spring with EhCache Annotations

EhCache is a widely-used, pure Java cache that can be easily integrated with most popular Java frameworks, such as Spring and Hibernate. It is often considered to be the most convenient choice for Java applications since it can be integrated into projects easily. EhCache Spring Annotations allows seamless integration into any Spring application by simply adding annotations to cacheable methods, without modifying the method implementations. This article focuses on boosting your Spring applications with EhCache Spring Annotations.

Continue reading →
Leandro Lima
WSGI: The Server-Application Interface for Python

Nowadays, almost all Python frameworks use WSGI as a means, if not the only means, to communicate with their web servers. This is how Django, Flask and many other popular frameworks do it.

This article intends to provide the reader with a glimpse into how WSGI works, and allow the reader to build a simple WSGI application or server.

Continue reading →
Artem Galtsev
Building an IMAP Email Client with PHP

Developers sometimes run into tasks that require access to email mailboxes. In most cases, this is done using the Internet Message Access Protocol, or IMAP. As a PHP developer, I first turned to PHP’s built in IMAP library, but this library is buggy and impossible to debug or modify. So today we will create a working IMAP email client from the ground up using PHP. We will also see how to use Gmail’s special commands.

Continue reading →
Leandro Lima
Building a Rest API with the Bottle Framework

REST APIs have become a common way to establish an interface between web back-ends and front-ends, and between different web services. The simplicity of this kind of interface, and the ubiquitous support of the HTTP and HTTPS protocols across different networks and frameworks, makes it an easy choice when considering interoperability issues.

Bottle is a minimalist Python web framework. It is lightweight, fast, and easy to use, and is well-suited to building RESTful services. In this article, I’ll provide a walkthrough of how to build a RESTful API service using Bottle.

Continue reading →
Krzysztof Ożóg
Online Video with Wowza and Amazon Elastic Transcoder

Performance and data interoperability are critical to the success of any web application. For web apps that need to support video processing – which is inherently compute- and I/O-intensive – these challenges are particularly acute. In this post, I describe some of my experience successfully incorporating video capabilities into a PHP-based web app, leveraging open source technologies and cloud-based services to the greatest extent possible.

Continue reading →
Bojan Janjanin
Are All Trends Worth It? Top 5 Most Common UX Mistakes That Designers Make

Many modern web trends offer a lot of visual appeal and the temptation to follow them blindly is quite real. These trends are not always bad, but they can be dangerous if not implemented with caution. In this article, Toptal designer Bojan Janjanin discusses some of the most common UX mistakes and some insights on finding the balance between what looks nice and what is actually usable.

Continue reading →
Carlos Ramirez III
How to Use Rails Helpers: A Bootstrap Carousel Demonstration

One of the most misused, misunderstood, and neglected of all the Rails built-in structures is the view helper. Helpers often get a bad reputation for being a dumping ground for one-off methods used across the entire application’s view layer. But what if your helpers could be more semantic, better organized, and even reusable across projects? What if they could be more than just one-off functions sprinkled throughout the view, but powerful methods that generated complex markup with ease leaving your views free of conditional logic and code?

Let’s see how to do this when building an image carousel, with the familiar Twitter Bootstrap framework and some good old-fashioned object-oriented programming.

Continue reading →
Arminas Zukauskas
Building REST API for Legacy PHP Projects

Every once in a while PHP developers are charged with tasks that require them to extend the functionalities of legacy projects, a task that often includes building REST APIs. Building a REST API for PHP-based projects is challenging, but in the absence of proper frameworks and tools, it can also be a particularly difficult goal to get right. In this article, Toptal engineer Arminas Zukauskas shares his advice, with sample code, on how to build a modern structured REST API around existing legacy PHP projects.

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 →
Matias Hernandez
Sass Style Guide: A Sass Tutorial on How to Write Better CSS Code

When working on big web applications as a team with other developers, code needs to be scalable and readable. This can be a challenging process when it comes to CSS, although preprocessors like Sass are available. But only using preprocessors will only get you so far. In this article, Toptal engineer Matias Hernandez presents a style guide with advice on how to improve the way you write your code.

Continue reading →
Marcelo Mazza
Embracing Sass: Why You Should Stop Using Vanilla CSS

CSS preprocessors have been around for quite a while now. These tools, among many things, promise convenience in writing style sheets for the web. However, not everyone is taking advantage of these utilities, and is still resorting to writing vanilla CSS. In this article, Toptal engineer Marcelo Mazza discusses some of the reasons why he thinks Sass is the way to go and why you should be using it in your projects.

Continue reading →
Dejan Zivanovic
Automation in Selenium: Page Object Model and Page Factory

Proper test automation is not always easy to achieve and requires almost as much design and thought as needed for the software itself. In the agile way of development tests are an essential ingredient in ensuring quality of software. However, unless these test codes are maintainable, they can prove to be more of a nuisance, especially when it comes to automated testing of modern web applications. This article is an easy introduction to Selenium features Page Object and Page Factory, how they can be used to model web applications, and how to write maintainable test code using them.

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 →
Ana Gregurec
Web Animation In The Post-Flash Era

We often use allegory to pass on an idea, trying to visually present the point of the story to allow the other person easier understanding. Using some kind of visualisation to paint a full picture of the story we are trying to tell is a good idea. Using animation to get the message across can be even better; if a picture is worth a thousand words, how much is an animation worth?

Continue reading →
Laureano Martin Arcanio
CSS Layout Tutorial: From Classic Approaches to the Latest Techniques

Mastering CSS is an absolute necessity for any solid web designer or developer. This tutorial walks you through the fundamentals of CSS layout principles, from classic CSS2 techniques to the latest approaches in CSS3. Learn more about how to leverage all that CSS has to offer in order to optimize both the user’s experience and the quality of your code.

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 →
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 →
Storm Farrell
Learn Markdown: The Writing Tool for Software Developers

Face it, you’re a software engineer, not a graphic designer. When you need to write a manual, technical document, or report, you just want to write it and be done with it. Especially for you as a software engineer – who is not put off by needing to learn and use some basic syntax conventions – Markdown can be the path of least resistance between what you want to write and getting it written.

Continue reading →
Tino Tkalec
JSON Web Token Tutorial: An Example in Laravel and AngularJS

Authentication is one of the most important parts of any web application. For decades, cookies and server-based authentication was the easiest solution. However, handling authentication in modern Mobile and Single Page Applications can be tricky and demand a better approach. One of the best known solutions to authentication problems for APIs is the JSON Web Token (JWT).

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 →
Ivan Voras
Installing Django on IIS: A Step-by-Step Tutorial

Although the most wide-spread and supported way of running Django is on a Linux system (e.g., with uwsgi and nginx), it actually doesn’t take much work to get it to run on IIS. In this article, Toptal Engineer Ivan Voras walks you through a step-by-step tutorial, clearly explaining how to install Django on IIS.

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 →
Xiaolei Liu
Bypassing Chinese Internet Censorship: How I Built a Censored Microblog Aggregator

As is known worldwide, the Chinese government enforces strict censorship on the internet. Virtually everything is under the government’s surveillance. In order to be allowed to operate, ISPs and internet content providers in China usually have their own content filtering mechanism for blocking or removing the published content by its users, or even deleting users’ account directly if they are assumed to be illegal under the government policy.

Continue reading →
Demir Selmanovic
The 10 Most Common Mistakes Web Developers Make: A Tutorial for Developers

Today we have thousands of digital and printed resources that provide step-by-step instructions about developing all kinds of different web applications. Development environments are “smart” enough to catch and fix many mistakes that early developers battled with regularly. There are even many different development platforms that easily turn simple static HTML pages into highly interactive applications.

All of these development patterns, practices, and platforms share common ground, and they are all prone to similar mistakes caused by the very nature of web applications.

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 →
Ilya Sanosyan
Buggy PHP Code: The 10 Most Common Mistakes PHP Developers Make

PHP makes it relatively easy to build a web-based system, which is much of the reason for its popularity. But its ease of use notwithstanding, PHP has evolved into quite a sophisticated language, with many nuances and subtleties that can bite developers, leading to hours of hair-pulling debugging. This article highlights ten of the more common mistakes that PHP developers need to beware of.

Continue reading →
Jordan Ambra
5 Golden Rules for Great Web API Design

Web services and their APIs abound. Unfortunately, the vast majority are difficult to use. Reasons range from poor design, to lack of documentation, to volatility, to unresolved bugs, or in some cases, all of the above.

Follow the guidance in this post to help ensure that your web API is clean, well-documented, and easy-to-use. Such APIs are truly rare and are therefore much more likely to be widely adopted and used.

Continue reading →
Gergely Kalman
10 Most Common Web Security Vulnerabilities

For all too many companies, it’s not until after a breach has occurred that security becomes a priority. An effective approach to IT security must, by definition, be proactive and defensive. This post focuses on 10 common and significant web-related IT security pitfalls to be aware of, including recommendations on how they can be avoided.

Continue reading →
Denis Kyorov
Django, Flask, and Redis Tutorial: Web Application Session Management Between Python Frameworks

I love and use Django in lots of my personal and client projects, mostly for those involving relational databases and more classical web applications. However, by design, Django is very tightly coupled with its ORM, Template Engine System, and Settings object. Plus, it’s not a new project: it carries a lot of baggage from the past to remain backwards compatible.

In a few of my client projects, we’ve chosen to give up on Django and use a micro framework like Flask, typically when the client wants to do some interesting stuff with the framework. At the same time, we often need user registration, login, and more, all of which is easily handled with Django.

The question emerged: is Django an all-or-nothing deal? Should we drop it completely from the project, or is there a way to combine some it with the flexibility of other frameworks?

Continue reading →
Steven S. Morgan
Anti-Patterns in Telecommuting

As a veteran telecommuter through multiple jobs in my career, I have witnessed and experienced the many joys of being a remote worker. As for the horror stories, I have more than a few I could tell. With a bit of artistic inclination and a talent for mathematics, I also have a fascination with patterns: design patterns, architectural patterns, behavioral patterns, social patterns, weather patterns—all sorts of patterns!

When I first encountered anti-patterns, I discovered a trove of wisdom I wish I had known before I had learned the hard way. Anti-patterns are recognizable repeated patterns that contribute significantly to failure. For example, the manager that keeps interrupting the employee in order to see if the employee is getting any work done is engaging in an anti-pattern that serves to prevent the employee from getting any work done!

Based on my own experiences and experiences of friends and co-workers, I am assembling descriptions of anti-patterns related to telecommuting.

Continue reading →
Gergely Kalman
With a Filter Bypass and Some Hexadecimal, Hacked Credit Card Numbers Are Still, Still Google-able

In 2007, Bennett Haselton revealed a minor hack with major implications: querying ranges of numbers on Google would return pages of sensitive information, including Credit Card numbers, Social Security numbers, and more. While Haselton’s hack was addressed and patched, I was able to tweak his original technique to bypass Google’s filter and return the same old dangerous results.

Continue reading →
Tomislav Krnic
Introduction to Responsive Web Design: Pseudo-Elements, Media Queries, and More

Nowadays, your website will be visited by a wide variety of devices: desktops with large monitors, mid-sized laptops, tablets, smartphones, and more.

To achieve an optimal user experience, your site should be adjusting its layout in response to these varied devices (i.e., to their varied screen resolutions and dimensions). The process of responding to the form of the user’s device is referred to as (you guessed it) responsive web design (RWD).

Continue reading →
Paulo Renato Campos de Siqueira
Scaling Play! to Thousands of Concurrent Requests

Web Developers often fail to consider the consequences of thousands of users accessing our applications at the same time. Perhaps it’s because we love to rapidly prototype; perhaps it’s because testing such scenarios is simply hard.

Regardless, I’m going to argue that ignoring scalability is not as bad as it sounds—if you use the proper set of tools and follow good development practices. In this case: the Play! framework and the Scala language.

Continue reading →
Tom Kozacinski
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 →
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 →