Web front-end posts

The Toptal Engineering Blog is a platform for sharing projects and discussing technologies.
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 →
Building an Angular Video Player with Videogular

Video accounts for more than three quarters of all bandwidth used today. That’s why developers need a solid, extensible, and advanced media framework that doesn’t come with a steep learning curve.

In this tutorial, Toptal Freelance Software Engineer Raul Jimenez will introduce you to one such framework – Videogular. If you need to harness the power of Angular for HTML5 video, look no further.

Continue reading →
Efficient React Components: A Guide to Optimizing React Performance

Why does a React web app run slow? The answer often lies in when and how frequently your components re-render, and whether those re-renders were even necessary. React doesn’t promise magical performance gains, but it provides just the right tools and functionalities to make it easy.

In this article, Toptal Freelance Software Engineer William Wang walks us through some optimization techniques that can help you build performant React web apps.

Continue reading →
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 →
How to Create Custom Magento 2 Widgets

Widgets play a pivotal role in Magento development, as they’re often used to display targeted content and provide crucial front-end functionality. Magento 2 offers a lot of widget possibilities out of the box, and also allows developers to unlock more features using custom widgets.

In this article, Toptal Freelance Software Engineer Vivek Khatri provides an overview of widget implementation in Magento 2, starting with the basics and culminating in custom widget design.

Continue reading →
Make Your CSS Dynamic with CSS Custom Properties

If there is something every front-end developer wants, it is proper support for variables in CSS. For years, to work around this missing feature, developers have resorted to CSS preprocessors. However, all that changes with the introduction of CSS custom properties.

In this article, Toptal Freelance Software Engineer Nicolás J. Engler walks us through CSS custom properties and shows us how they can be used to make better, more dynamic stylesheets.

Continue reading →
How to Internationalize Your AngularJS App

Internationalizing modern apps, where the front-end and the back-end are distinctly separate from one another, can be a little tricky. AngularJS, with the help of a few tools, makes internationalizing your app a breeze.

In this article, Toptal Freelance Software Engineer Mehmet Bajin gives us a step-by-step tutorial to internationalizing and localizing AngularJS apps.

Continue reading →
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 →
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 →
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 →
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 →
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 →
PostCSS: Sass’s New Play Date

PostCSS is the hot new tool that’s making the rounds on the front-end side of web development. It has been quickly and widely adopted, and possibly will have a significant impact on how we base our present-day CSS.

In this article, Toptal Software Engineer Nicolás J. Engler introduces us and guides us on how to start using this tool, expand it with plugins, or integrate with other CSS processors, task runners, or bundlers.

Continue reading →
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 →
The Art of Building Self-Service Admin Areas

Software is regular and predictable, so it seems paradoxical that practically every web app needs a sizable administrative area. The explanation for this paradox lies in software’s interaction with humans. While you probably can’t build a fully automated system, there’s a lot you can do to save time and money.

In this post, Entrepreneur Jack Kinsella explains what you can do to streamline administration, thus saving valuable time and making your projects more profitable. Adminimisation is the word of the day!

Continue reading →
Build Sleek Rails Components With Plain Old Ruby Objects

Your website is gaining traction, and you are growing rapidly. Ruby/Rails is your programming language of choice. Your team is bigger and you’ve given up on “fat models, skinny controllers” as a design style for your Rails apps. However, you still don’t want to abandon using Rails? No problem.

In this article, Toptal Software Engineer Eqbal Quran explains how you can decouple and isolate your Rails components using nothing Plain Old Ruby Objects. Ruby objects and abstractions can decouple concerns, simplify testing, and help you produce clean, maintainable code.

Continue reading →
Use Magento If You're Serious About eCommerce

You’ve heard that Magento is the eCommerce platform to use if you’re serious about your business – and you’re serious about your business – so you’ve decided on Magento. But do you know what you’re getting into?

In this post, Toptal Software Engineer Andrew Hughes walks us through the difference between WordPress WooCommerce and Magento. While Magento is the expert’s eCommerce platform of choice, it’s not always the right solution, depending on your client.

Continue reading →
The Zen of devRant

Let’s face it: Sometimes you just need to rant. Fortunately, there’s an app for that. It’s called devRant, and it’s the place for developers to vent about clients from hell, non-technical friends and family, and clueless recruiters.

In this roundup, devRant Co-Founder David Fox shares his favorite collection of rants since launching. Some will make you laugh. Others will make you laugh so hard you cry. And just about all of them will make you empathize with the author.

Continue reading →
To Designers With Love (A Letter From a Front-end Developer)

If you’re a veteran frontender, you’ve probably had some not-so-great experiences with designers, and chances are some designers have had an equally bad experience working with you. How can you make sure you get exactly what you need from your designer, without placing an undue burden on them?

It’s a tall order, but in this article Freelance Software Engineer Vedran Aberle Tokic outlines and addresses a number of potential issues that may become roadblocks for your execution. Implementing these suggestions may result in overhead for designers, but they can save enormous amounts of time and headache elsewhere.

Continue reading →
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 →
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 →
The 10 Most Common Mistakes That WordPress Developers Make

WordPress is easily the most powerful open source blogging and content management system available online today. As WordPress is easy enough to set up and has a user-friendly approach, many developers are often underestimating it and so make mistakes in development.

In this article, Toptal Freelance Software Engineer Andrew Schultz outlines the ten most common mistakes that WordPress developers should be aware of for future projects.

Continue reading →
The Six Commandments of Good Code: Write Code that Stands the Test of Time

How do you define good code? Is it 100% test coverage, or is it backwards compatibility with decade-old hardware? We may not be able to reach an end to this debate yet, but good software always seems to conform to a few certain qualities of code.

In this article, Toptal Freelance Software Engineer Zachary Goldberg walks us through six simple ideas that can help you make better, more maintainable software.

Continue reading →
The Duel: React Native vs. Cordova

As a result of smartphones and mobile applications becoming so popular, web developers have been looking for ways to create mobile applications using JavaScript. This increased demand has led to the development of many JavaScript frameworks capable of running native-like applications on mobile devices.

In this article, Toptal Freelance Software Engineer Johannes Stein compares the current two most popular choices for mobile-oriented JavaScript frameworks, Cordova and React Native. Examining their advantages and pitfalls, he dives into details of each and compares them across different disciplines.

Continue reading →
Testing Your Go App: Get Started The Right Way

When Golang first came out, there were next to no resources available about how to efficiently test your Go-written application. Even now, with plenty of guides and recommendations available, many bright-eyed developers still try to apply their Ruby or JavaScript mindset and use external frameworks to test apps written in Go.

In this article, Toptal Freelance Developer Gabriel Aszalos first explains Golang philosophy and then covers the basics of testing in Go, from table testing to JSON response assertion.

Continue reading →
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 →
Keep Calm And Transition To A New Development Team

Many product owners don’t have a technical background and thus often find themselves unprepared and scrambling when it comes time to bring on a new development team. This often results in hindered progress, wasted time, and frustration for everyone involved. If this sounds like it could be you, either now or in the future, then you should be somewhat concerned.

In this blog post, Toptal Freelance Software Engineer Carlos Ramirez III will walk you through the various steps of a typical transition process in project management so you can prepare for this eventuality and make the transition as smooth as possible.

Continue reading →
Get Your Angular 2 On: Upgrading from 1.5

“So much of what’s new and exciting about Angular 2 is its new way of thinking rather than its new architecture,” says Toptal Freelance Developer Ethan James.

In this article, Ethan walks through the inner workings of a simple Angular 1.5 app and then shows us how to upgrade it to Angular 2 while giving us the necessary understanding to truly appreciate it.

Continue reading →
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 →
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 →
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 →
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 →
Jumpstart Your PHP Testing with Codeception

Would you like to test your PHP code like a boss? Do you feel that basic unit tests and PHPUnit just don’t cut it anymore? If your answer to both questions is yes, you might want to try Codeception, a mature and well-documented testing framework designed to outperform PHPUnit and Behat.

In this post, Toptal Freelance Software Engineer Vasily Koval describes how he came to take the plunge and start using Codeception, and he explains why you should check out Codeception for your PHP testing needs.

Continue reading →
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 →
HTTP Request Testing: A Developer's Survival Tool

It’s tragically common for developers to come into a project where proper automated testing has been and will continue to be overlooked. It’s a situation Freelance Developer Bhushan Lodha has found himself in all too often; fortunately, he’s found a solution. In this article, he briefly covers the reasons why testing is overlooked and ultimately explains his “coding life hack” to ensure quality control even when he can’t introduce a testing framework.

Continue reading →
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 →
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 →
Introduction To BEM Methodology

When building smaller websites, the way developers structure their CSS code is usually not a big issue. However, when it comes to larger, more complex projects, code organization becomes crucial.

In this article, Toptal Freelance Software Engineer Tomislav Matijević introduces us to BEM methodology and explains how this CSS practice can massively improve code maintainability, speed up the development process, and streamline the teamwork of developers by arranging CSS classes into independent modules.

Continue reading →
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 →
Handling Intensive Tasks with Laravel

When dealing with time consuming, resource intensive tasks, most PHP developers are tempted to choose the “quick hack route”. We’ve all used “ini_set(‘max_execution_time’, HUGE_INT);” before, but it doesn’t have to be this way.

In today’s tutorial, PHP developer Daniel Gheorghe demonstrates how an application’s user experience may be improved by separating long-running tasks from the main request flow using Laravel.

Continue reading →
Toptal's Quick and Practical CSS Cheat Sheet

As software engineers, we’re always searching for the best tools and guides that will help us to be more productive while spending less time searching and reading long technical specifications.

Today, Toptal is pleased to present an entirely new resource to the community as a free download: a CSS Cheat Sheet. Toptal’s CSS Cheat Sheet is a quick CSS reference guide, and includes CSS syntax, the most important selectors, properties, sizes, and units, and other useful CSS details, all in a short, easily understandable format.

Continue reading →
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 →
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 →
Top Ten Front-End Design Rules For Developers

Truly understanding design is easier said than done. Coding and aesthetic design require very different skill sets, which is why some front-end developers aren’t as proficient in design as they could be, and the quality of their work suffers for it.

In this post, Toptal Freelance Software Engineer Bryan Grezeszak explains why good front-end developers have to follow essential design principles down to the pixel, and should regularly seek out advice and feedback from their designers.

Continue reading →
A Tutorial on Drill-down FusionCharts in jQuery

When dealing with data analysis, most companies rely on MS Excel or Google Sheets, but dealing with data presented this way isn’t very eye-catching or intuitive. It’s once you add visualizations to this data that things become a little easier to manage. That’s the topic of today’s tutorial by our guest author from Adobe, Rohit Boggarapu. Join us as he guides us though the process of making interactive drill-down charts using jQuery and FusionCharts.

Continue reading →
Boost Your Productivity With Amazon Web Services

In the rapidly evolving Internet world, getting things done fast is always critical. Still, developers today waste hundreds of hours on tasks not related to programming: setting up databases or caches, deploying projects, monitoring online statistics, and so on.

In this article, Toptal Freelance Software Engineer Minhao Zhang guides us in a step-by-step tutorial on how to reduce waste by setting up your first virtual machine using Amazon Web Services, and introduces the most widely used AWS services that can boost your productivity in minutes.

Continue reading →
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 →
How to Bootstrap and Create .NET Projects

To create a .NET project from scratch, simply using Visual Studio Wizard is good enough most of the time. However, the default project settings produced by wizards are hardly acceptable for professional teams, as they set too low of a bar on quality.

In this article, Toptal Freelance Software Engineer Andrei Smirnov guides us through several standard practices, configuration files, and project settings every developer should apply when starting a new .NET project. Doing this in the very beginning of a project decreases future technical debt and makes product source code readable and professional-looking.

Continue reading →
Introduction To PHP 7: What's New And What's Gone

If you haven’t been working with PHP lately, you might wonder what happened to PHP 6. Why the skip from PHP 5 to PHP 7? Well, long story short, PHP 6 was a failure. To avoid confusion, the new version was renamed PHP 7.

PHP 7 introduces a number of new features, while at the same time dropping depreciated SAPIs and extensions. As a result, it tends to outperform PHP 5.x by a wide margin. Some compatibility issues could pose a problem, but most developers have nothing to worry about.

In this post, Toptal Freelance Software Engineer Vilson Duka explains what makes PHP 7 different, and why it’s time to make the switch.

Continue reading →
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 →
Guide: Software Release Management For Small Teams

Small teams frequently have to compete with bigger, more structured organizations who are capable of allocating more resources to project management, and software release management in particular. This means that small teams, or even individual developers, need to properly organize and execute their release process in order to keep up.

In this article, Toptal Freelance Software Engineer Lucas Mancini focuses specifically on small startups, teams that don’t have, or can’t afford, DevOps support, or teams that don’t have a formal process defined for releasing new versions of their product. The author provides a suggested checklist method to manage releases, tailored to match his past experience working on different projects, together with some recommended best practices and guidelines.

Continue reading →
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 →
The Art of War Applied To Software Development

The Art of War is an ancient military treatise, but despite its age, the text is still included in the syllabus at many military schools. Sun Tzu’s principles and teachings also have practical applications in politics, business, sports, and, believe it or not, software development. In fact, you might just be applying some of these principles in your daily routine, without even knowing.

In this post, Toptal Freelance Software Engineer Jose F. Maldonado explains why many of these ancient teachings still matter, and what you can do to make them work for you and your team.

Continue reading →
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 →
REST Security with JWT using Java and Spring Security

Although the old, standardized security approaches work with REST services, they all have problems that could be avoided by using a better standard. For this, JWT arrives just in time to save the day.

In this article, Toptal engineer Dejan Milosevic guides us on how to implement a JWT token-based REST API using Java and Spring Security.

Continue reading →
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 →
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 →
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 →
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 →
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 →
Single Responsibility Principle: A Recipe for Great Code

Maintainable code is something we all desire and there are no shortage of coding principles that promise it. It is not always apparent how tremendously useful these principles are during the early stages of development. Nonetheless, the effort put in to ensure these qualities certainly pay off as the project grows and development continues. In this article, Toptal engineer Adel Fayzrakhmanov discusses how the Single Responsibility Principle is one of the most important aspect in writing good maintainable code.

Continue reading →
Ultimate Guide to the Processing Language Part I: The Fundamentals

Rapid prototyping and the ability to produce quick visual results are features of many programming languages and frameworks. However, some take it even further by making these their primary goals. Processing, a programming language based on Java, allows its users to code within the context of visual arts and has been designed from the ground up to provide instant visual feedback. In this article, Toptal engineer Oguz Gelal provides a gentle introduction to Processing and some insights into its inner mechanics.

Continue reading →
Open Source: It's Not That Scary!

Is open source scary? Do developers think that nobody would be interested in their personal projects? What are the fears associated with publishing your own work for the public to see? In this article, Toptal Director of Engineering Anna Chiara Bellini shares how, as an accomplished engineer, she made her first contribution to GitHub. This guide features all the step-by-step basics to getting involved in open source, including everything from what open source software is, to how to start working with Git and GitHub, to actually making meaningful contributions to open source projects.

Continue reading →
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 →
Speeding up Application Development with Bootstrap

Bootstrap, one of the most used HTML/CSS/JavaScript front-end frameworks, offers a little more than just fancy customizable user interface elements. It provides a great starting point for many types of projects, a plethora of components, and many nifty styles predefined for responsive layout and utility classes to help keep your HTML and CSS code clean.

In this article, Toptal designer Lijana Saniukaite walks us through some practical Bootstrap tips and best practices to speed up your application development.

Continue reading →
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 →
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 →
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 →
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 →
Why You Need to Upgrade to Java 8 Already

The newest version of the Java platform, Java 8, was released more than a year ago. Many companies and developers are still starting new applications with old versions of Java. There are very few good reasons to do this, because Java 8 has brought some important improvements to the language. I’ll show you a handful of the most useful and interesting ones.

Continue reading →
Getting Started with Docker: Simplifying Devops

Docker, an open source tool, has changed the way we think about deploying applications to servers. By leveraging some amazing resource isolation features of the Linux kernel, Docker makes it possible to easily isolate server applications into containers, control resource allocation, and design simpler deployment pipelines. Moreover, Docker enables all of this without the additional overhead of full-fledged virtual machines.

Continue reading →
Building an MVC Application with Spring Framework: A Beginner's Tutorial

The Spring Framework is a powerful, feature-rich, and well-designed framework for the Java platform. It offers a collection of programming and configuration models that aim to simplify and streamline the development process of robust and testable applications in Java. In this article, Toptal engineer Stefan Varga challenges the popular notion of Java as a complicated platform for simple needs, and walks us through a step by step tutorial to building a simple MVC application with the Spring Framework and JPA.

Continue reading →
Google Cloud Source Repositories vs. Bitbucket vs. GitHub: A Worthy Alternative?

Google’s new cloud code platform does not appear to be taking on GitHub head on. Instead, Cloud Source Repositories (CSR) will allow users to connect to repositories hosted on GitHub or Bitbucket. However, everything is automatically synced to the Google Cloud Source Repository.

The good news is that a Google CSR can be connected to another Git repository hosted on GitHub or Bitbucket. All changes will be synchronised on both platforms, as you can set Google CSR to automatically mirror from GitHub and Bitbucket.

Continue reading →
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 →
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 →
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 →
Unit Tests, How to Write Testable Code and Why it Matters

In this article, I will show that unit testing itself is quite easy; the real problems that complicate unit testing, and introduce expensive complexity, are a result of poorly-designed, untestable code. We will discuss what makes code hard to test, which anti-patterns and bad practices we should avoid to improve testability, and what other benefits we can achieve by writing testable code. We will see that writing testable code is not just about making testing less troublesome, but about making the code itself more robust, and easier to maintain.

Continue reading →
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 →
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 →
Deploy Web Applications Automatically Using GitHub Webhooks

Deploying instances of a web application to one or more servers manually can often be a monotonous process, and take up a significant amount of your time. With little effort, it is possible to automate the process of deploying your web application with almost zero human intervention. This article outlines a simple approach to automating web application deployments using GitHub webhooks, buildpacks, and Procfiles.

Continue reading →
Getting the Most Out of Your PHP Log Files: A Practical Guide

Log files may very well be one of the most underestimated and underutilized tools at a developer’s disposal. Beyond their value for debugging, with a bit of creativity and forethought, logs files can be leveraged to serve as a valuable source of usage information and analytics. In this article, In this article, Toptal engineer Ilya Sanosyan provides a practical guide to maximizing the value we get from our logs.

Continue reading →
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 →
Meet Volt, A Promising Ruby Framework For Dynamic Applications

In an attempt to make web applications a lot more dynamic, front-end Javascript frameworks like Angular.js, Backbone.js and Ember.js have gained a lot of popularity. However, these frameworks often require a back-end application to be useful, so they are used in conjunction with web frameworks like Ruby on Rails and Django.

On the other hand, Volt is capable of managing the back-end and a dynamic front-end; since both functionalities are tightly integrated into its core.

Continue reading →
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 →
Buggy Java Code: The Top 10 Most Common Mistakes That Java Developers Make

Java, a sophisticated programming language, has been dominating a number of ecosystems for quite a while. Portability, automated garbage collection, and its gentle learning curve are some of the things that make it a great choice in software development. However, like any other programming language, it is still susceptible to developer mistakes.

This article explores the top 10 common mistakes Java developers make and some ways of avoiding them.

Continue reading →
Why I Decided To Embrace Laravel

Laravel designers didn’t spend too much time reinventing the wheel. A lot of solutions and practices are transferred from other frameworks.

The decision to embrace a new PHP framework should not be taken lightly, so let’s examine why considering Laravel may be worth your time and effort. Toptal freelance software engineer Alex Rytov explains what made him take the plunge and why he believes Laravel has a bright future.

Continue reading →
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 →
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 →
Advanced Java Class Tutorial: A Guide to Class Reloading

In Java development, a typical workflow involves restarting the server with every class change, and no one complains about it. But is Java class reloading that difficult to achieve? And could that problem be both challenging and exciting to solve? In this article, I will try to address the problem, help you gain all the benefits of on-the-fly class reloading, and boost your productivity immensely.

Continue reading →
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 →
The Publish-Subscribe Pattern on Rails: An Implementation Tutorial

The publish-subscribe pattern] (or pub/sub, for short) is a messaging pattern where senders of messages (publishers), do not program the messages to be sent directly to specific receivers (subscribers). Instead, the programmer “publishes” messages (events), without any knowledge of any subscribers there may be.

This article provides insight in how to use the pub/sub pattern, in Rails, to communicate messages between different system components without these components knowing anything about each other’s identity.

Continue reading →
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 →
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 →
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 →
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 →
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 →
The Many Interpreters and Runtimes of the Ruby Programming Language

Which Ruby implementation is right for your project? While the reference implementation (Ruby MRI) remains the interpreter of choice, an alternate Ruby implementation may be right for your project, depending on your operational goals and constraints.

This article showcases the Ruby interpreter implementations and runtimes available today, discussing the advantages and disadvantages of each.

Continue reading →
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 →
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 →
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 →
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 →
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 →
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 →
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 →
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 post, we’ll do just that, one step at a time.

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