Front-end Posts

ClojureScript is the tool of choice for front-end developers who have tried it. Recently in this series, we showed how to use it to get started with React. In today’s tutorial, Toptal Freelance Clojure Developer Luke Tomlin dives into how to use Redux for React state management in ClojureScript.

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

There’s no question that user experience is impacted by perceived load times. With today’s heavier front ends, client-side rendering doesn’t feel very fast. In this article, Toptal Freelance Front-end Developer Guillaume Breux compares client-side, server-side, and pre-rendering strategies to help you choose the best option for your own app.

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

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

Static websites offer a host of advantages over dynamic pages in many scenarios, but they can be impractical and tedious to maintain.

In this, Toptal Front-end Developer Silvestar Bistrovic demonstrates how the four most popular static page generators can help.

CSS is notorious for getting messy quickly as a website scales. While frameworks like Bootstrap can help, SMACSS takes a different approach, as a set of solid organizational guidelines. In this article, Toptal Freelance Front-end Developer Slobodan Gajic gives us a run-down of the idea and benefits behind Jonathan Snook’s architectural wisdom.

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

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

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

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

Angular 5 is a new version of the Angular framework developed by Google. Angular 5 comes with improvements including optimized builds and faster compile times, but in this Angular 5 tutorial, we are going to build a notes app from scratch. If you’ve been waiting to learn Angular 5, this tutorial is for you.

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

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

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

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.

In this article, Toptal Freelance Software Engineer Tigran Vardanyan covers code styling, essential HTML and CSS practices, and why clean code still matters.

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.

In this article, Toptal Freelance Software Engineer Silvestar Bistrovic explains the process of migrating a WordPress blog to a static site generator using Hexo, outlining the pros and cons of the approach.

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

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

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

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

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

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

The goal of this article is to introduce you to the underlying principles of accessibility and help you flawlessly implement web accessibility guidelines and standards on your next project. Even minor improvements can help your content rank better, reach more people, and improve the overall user experience.

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

Is Angular vs. React just a matter of personal preference? This article gives an in-depth comparison and analysis of various Angular and React components in light of real-world applications.

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.

Recently, I was challenged to create my own grid system and, since re-inventing the wheel is always useful as a learning experience, I went for it. I knew it would be an interesting challenge, but I was surprised by how easy it turned out to be!

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.

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.

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.

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.

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.

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!

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.

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.

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

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

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

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

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.

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.

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.

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.

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

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

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

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

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.

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.

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.

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.

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.

Testing back-ends is easy. But testing front-end code is kinda hard. In the ten years I’ve been a developer, I hadn’t found a decent way to test user interaction and view rendering until I started poking at React.

For some people, front-end design and development can sometimes start to seem like a chore, and can be monotonous and time consuming. Through a modular design approach, it is possible to both save time and streamline the design and development process.

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!

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

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

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.

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

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

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.

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.

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.

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.

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

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

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

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

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

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

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

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

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

Working with a great designer can be an invaluable asset to any team. With clear communication channels, and free-flowing co-operation, the designer should give you everything you need to speed up the building process and limit questions and confusion as much as possible.

What can you, the developer, do to ensure that the product you have built is delivered in a timely manner without sacrificing the quality of the user interface and user experience?

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.

One of the most capable, extensible and popular front-end frameworks is AngularJS, and one of the most useful components of the AngularJS framework is something called a directive. In this article, the four functions that execute as a directive is created and applied to the DOM will be explored.

It’s been over 20 years since Tim Berners-Lee and Robert Cailliau specified HTML, which became the standard markup language used to build the Internet.

HTML5 was supposed to finally solve our problems and become “one standard to rule them all (browsers)”. This was probably one of the most anticipated technologies since creation of the World Wide Web.

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.

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.

Hoodie is a progressive new library for front-end developers that adopts some remarkable new philosophies. Hoodie puts the control over app design completely in the hands of the front-end developers and user-experience experts, and frees users from the bonds of un-interruptible connectivity.

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.

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

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

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

I often hear iOS developers ask some variant of the same key question: “What’s the best way to develop a UI in iOS: through Storyboards, NIBs, or code?”

Answers to this question, explicitly or implicitly, tend to assume that there’s a mutually exclusive choice to be made, one that is often addressed upfront, before development.

I’m of the opinion that there’s no single choice to be made. Rather, each option has its strengths and weaknesses—and there’s no need to use any one of them in isolation.

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

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

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

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

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

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

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.