#FrontEnd Posts

The Toptal Engineering Blog is a hub for in-depth development tutorials and new technology announcements created by professional freelance software engineers in the Toptal network.
Subscribe for daily updates today and check out the wealth of technical resources published by the Toptal network.
Vuk Djapic
Getting Started with the Elm Programming Language

Elm is a purely functional, strongly typed, reactive, and event-driven web client language. It takes a step back from the norms and really changes the way you reason about and program web application front-ends.

In this article, Toptal Freelance Software Engineer Vuk Djapic takes you through the exotic concepts of Elm and its pros and cons in real world use.

Continue reading →
Fernando Rivas
Theming with Sass: An SCSS Tutorial

When it comes to theming; that is, changing the look and feel of your website while maintaining the same layout, Sass’ features—like mixins or functions—can feel like taking a plane instead of walking! In this tutorial on SCSS, we’re going to create a minimal theme and use SCSS to give our CSS programming some superpowers.

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 →
Nicolás J. Engler
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 →
Mehmet Bajin
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 →
Nicolás J. Engler
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 →
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 →
Vedran Aberle Tokić
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 →
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 →
Bryan Grezeszak
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 →
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 →
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 →
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 →
Mikhail Selivanov
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 →
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 →
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 →
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 →
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 →