Web front-end posts

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.

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.

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!

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.

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.

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.

Angular and Aurelia are fierce competitors developed and released at approximately the same time. They have a similar philosophy, but they differ in a number of key ways. This article does side-by-side comparisons of those differences in features and code.

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.

PhalconPHP will make your high-load application fast and easy, it’s one of the fastest MVC frameworks for PHP available. It’s written in C and supplied as a compiled PHP extension, so it doesn’t need to be interpreted at every request. Consider PhalconPHP for your next project, you won’t regret it.

Fat controllers and models: an inevitable problem for most large-scale projects based on MVC frameworks such as Yii and Laravel. Fortunately, there’s a cure, and it’s in architecting a layered structure.

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.

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.

Could you be using Git more efficiently?

The answer is probably a resounding “Yes,” which is why Toptal Software Engineer Ursula Clarke wrote today’s post.

In it, she teaches you how to use git stash, git reset, git bisect, git squash, and git rebase for maximum productivity.

It’s every developer’s dream to be more efficient. In this article, you’ll learn how one engineer saved himself from typing more than 20,000 characters over six months and prevented 1,000 bugs in the process.

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.

In this article, Toptal Software Engineer Martin Gouws explains advanced features of the Node Package Manager that should be in every JavaScript developer’s knowledge base.

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.

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.

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!

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

In this tutorial, Toptal Engineer Orban Botond demonstrates how to use the Grape gem – a REST-like API micro-framework for Ruby – to build backend support in Rails for a JSON API. Grape is designed to run as a mountable rack engine that complements your web applications without interfering with them.

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.

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.

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.

Processing makes prototyping visual apps a breeze. With its easy to use programming constructs and some mathematics, building a simple game is a lot easier than one may think.

In this article, Toptal engineer Oguz Gelal provides a step-by-step tutorial to building a game using Processing and porting it to the web.

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.

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.

Using modern DevOps Tools like Chef, Docker, Ansible, Packer, Troposphere, Consul, Jenkins, SonarQube, AWS, etc. does not mean that you are applying DevOps principles. DevOps is a way of thinking.

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.

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.

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.

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.

Inheriting someone else’s code can be a nightmare, especially when the code is poorly designed and lacks documentation. In this post, Toptal Engineer Juan Pablo Scida provides a case study of how he reengineered a chat server written in Node.js, transforming its original spaghetti code into a cleanly architected and designed piece of software.

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.

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.

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.

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.

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.

Despite the prevalence of higher-level languages, the C programming language continues to empower the world. There are plenty of reasons to believe that C programming will remain active for a long time. Here are some reasons that C is unbeatable, and almost mandatory, for certain applications.

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.

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.

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.

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!

Programming is about having fun and enjoying the process of creating something cool. That is why we decided to build a bot-vs-bot game platform around Battleship and make it open source. In this article, we take a look at the code and mechanics of the extensible engine behind this platform.

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.

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!!

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.

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

Building robust web applications is often a lot about choosing the right tools. Doing so with a combination of tools that ensure both a modern, flexible front-end, and a solid, reliable back-end is something everybody wants. This article demonstrates exactly that trick by combining AngularJS and Play Framework to build a simple blog application.

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.

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.

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.

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.

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!

C++ is a general purpose programming language that offers great flexibility when it comes to system programming and application development. The language, however, comes with some pitfalls requiring attention from developers to ensure quality programming. This article explains how ten of the most common C++ developer mistakes can be avoided.

Developers often automate certain repetitive and tedious tasks to save time as well as to stay focused on the task at hand.

This article demonstrates how simple and easy it is to use Gulp as a build tool.

Node.js, the cross-platform runtime environment, has seen its fair share of praise and criticism for what it offers to developers. Often, reasons for such criticisms are rooted in how developers use/misuse the language.

This article explores ten common mistakes that Node.js developers make and how to avoid them.

Meteor makes developing web applications simple. It’s easy to learn, and comes with a pre-built arsenal of powerful functionalities. In this article, we will walk through a detailed tutorial for building a simple real-time web application.

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

Git can support your project not just with version control, but also with collaboration and release management. Understanding how workflow patterns can help or hinder a project will give you the knowledge to evaluate and adapt your project’s Git processes effectively.

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.

Why are Rails Engines not used more often? I don’t know the answer, but I do think that the generalization of “Everything is an Engine” has hidden the problem domains that they can help to solve.

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.

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.

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.

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.

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.

While Rails is easy to use, it is also not hard to misuse. This article looks at 10 common Rails pitfalls, including how to avoid them and the problems that they cause.

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.

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 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?

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.

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.

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.

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.

After much thought, I decided to engineer a solution to the idea abandonment problem. I call it the ‘Init’ project (or Init.js).

The core of the idea is to have a single project to start them all, to let the developer or the technical founder make all of the essential decisions at once, and receive an appropriate starting template based on those decisions.

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.

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: