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.Continue reading →
Hot module replacement is one of the most useful features offered by Webpack. It allows all kinds of modules, including JSON, CSS, and JS files, to be updated at runtime without needing a full refresh.
Microsoft and Google have worked together since Angular 2, rendering ASP.NET Web Forms and MVC Razor obsolete. Nevertheless, while ASP.NET’s front-end tools may be lacking, it is still a great back-end framework.
In this article, Toptal Freelance Angular Developer Pablo Albella teaches us how to create the best architecture for both these worlds.Continue reading →
JSON web tokens (JWTs) provide a method of authenticating requests that’s convenient, compact, and secure. More often than not, Angular apps will include them in their data flows.
In this tutorial, Toptal Freelance Software Engineer Sebastian Schocke shows how to implement JWT authentication in an Angular 6 single-page application (SPA), complete with a Node.js back-end.Continue reading →
The modern, cross-platform programming language Haxe is well-known in some circles, yet many developers have never heard of it. Since it first appeared in 2005, it’s been battle-tested by its loyal—if rather quiet—following.
In this article, Toptal Freelance Software Engineer Kevin Bloch explores the Haxe ecosystem and how to transpile some sample code.Continue reading →
Despite its age, HTTP Live Streaming (HLS) remains a widely used standard in adaptive bitrate video and a de-facto Apple alternative to MPEG-DASH.
In this tutorial, Toptal Java Developer Tomo Krajina explains what makes HLS tick and demonstrates how to create an HLS player in Android.Continue reading →
While preprocessors like Sass and Less have made CSS development easier, there is still a lot to be desired in this modern age of web development.
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.Continue reading →
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.Continue reading →
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.Continue reading →
In this article, Toptal Freelance Software Engineer Piotr Gaczkowski explains how to make the most out of command line tools and lists some of the best tools out there.Continue reading →
Asynchronous programming used to be a challenge even for seasoned professionals, leading to aptly named phenomena like Callback Hell.
Magento 2 was initially greeted with skepticism, but the maturity of the next generation of Magento development has brought on an explosion of new users. In this article, Toptal Freelance Magento Developer Vivek Khatri explains why it’s the top choice for eCommerce sites, new and old.Continue reading →
Elm is a purely functional, strongly typed, reactive, and event-driven web client language. It takes a step back from the norms and really changes the way you reason about and program web application front-ends.
In this article, Toptal Freelance Software Engineer Vuk Djapic takes you through the exotic concepts of Elm and its pros and cons in real world use.Continue reading →
Any piece of code that has no tests is said to be legacy code according to Michael Feathers. Therefore, one of the best ways to avoid creating legacy code is using test-driven development (TDD).
In this article, Toptal Freelance Software Engineer Tigran Vardanyan covers code styling, essential HTML and CSS practices, and why clean code still matters.Continue reading →
When it comes to theming; that is, changing the look and feel of your website while maintaining the same layout, Sass’ features—like mixins or functions—can feel like taking a plane instead of walking! In this tutorial on SCSS, we’re going to create a minimal theme and use SCSS to give our CSS programming some superpowers.Continue reading →
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.Continue reading →
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.Continue reading →
In this article, Toptal Freelance Software Engineer Konrad Gadzinowski dissects trunk-based development and Git flow, listing the pros and cons for various use cases.Continue reading →
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.Continue reading →
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.Continue reading →
Building a reactive web application is a lot more about how you handle events and data flow in your applications than the tools you use to do so. However, Angular 2 with Ngrx seems to be the perfect combination for building reactive applications for many reasons.
In this article, Toptal Freelance Software Engineer Simon Boissonneault-Robert walks you through a reactive web application tutorial using Angular and Ngrx and shows how these two technologies make it easy to do that.Continue reading →
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.Continue reading →
Knowledge of CSS is a fundamental skill in the web development space. However, implementing certain web design patterns with just CSS can be a frustrating task, and often requires an in-depth understanding of it.
In this article, Toptal Freelance Web Developer Rico Mossesgeld shares several CSS tips and tricks that take advantage of lesser known CSS features to solve real layout and design problems.Continue reading →
Video accounts for more than three quarters of all bandwidth used today. That’s why developers need a solid, extensible, and advanced media framework that doesn’t come with a steep learning curve.
In this tutorial, Toptal Freelance Software Engineer Raul Jimenez will introduce you to one such framework – Videogular. If you need to harness the power of Angular for HTML5 video, look no further.Continue reading →
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!Continue reading →
Why does a React web app run slow? The answer often lies in when and how frequently your components re-render, and whether those re-renders were even necessary. React doesn’t promise magical performance gains, but it provides just the right tools and functionalities to make it easy.
In this article, Toptal Freelance Software Engineer William Wang walks us through some optimization techniques that can help you build performant React web apps.Continue reading →
Whether you just want to create an interactive 3D logo, on the screen or design a fully fledged game, knowing the principles of 3D graphics rendering will help you achieve your goal.
In this article, Toptal Freelance Software Engineer Adnan Ademovic gives us a step-by-step tutorial to rendering objects with textures and lighting, by breaking down abstract concepts like objects, lights, and cameras into simple WebGL procedures.Continue reading →
Widgets play a pivotal role in Magento development, as they’re often used to display targeted content and provide crucial front-end functionality. Magento 2 offers a lot of widget possibilities out of the box, and also allows developers to unlock more features using custom widgets.
In this article, Toptal Freelance Software Engineer Vivek Khatri provides an overview of widget implementation in Magento 2, starting with the basics and culminating in custom widget design.Continue reading →
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.Continue reading →
If there is something every front-end developer wants, it is proper support for variables in CSS. For years, to work around this missing feature, developers have resorted to CSS preprocessors. However, all that changes with the introduction of CSS custom properties.
In this article, Toptal Freelance Software Engineer Nicolás J. Engler walks us through CSS custom properties and shows us how they can be used to make better, more dynamic stylesheets.Continue reading →
Internationalizing modern apps, where the front-end and the back-end are distinctly separate from one another, can be a little tricky. AngularJS, with the help of a few tools, makes internationalizing your app a breeze.
In this article, Toptal Freelance Software Engineer Mehmet Bajin gives us a step-by-step tutorial to internationalizing and localizing AngularJS apps.Continue reading →
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.Continue reading →
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.Continue reading →
In this article, Toptal Freelance Software Engineer Diego Díaz walks us through the basics of Flexbox and some cool examples of how Flexbox can be used to build smart CSS-only layouts.Continue reading →
In this post, Toptal Freelance Developer Brian Coords explores the amazing new features of WordPress’s REST API, showing why WordPress is still on the cutting edge of web development.Continue reading →
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.Continue reading →
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.Continue reading →
The Ionic project is rapidly gaining in popularity and is one of the most popular open source projects worldwide. With the recent announcement of the stable version of Ionic 2, this is the perfect time to underscore the Ionic 2 and its predecessor.
In this post, Toptal software engineer Julien Renaux outlines the major changes Ionic 2 brought to the platform and explains how to put these new features to good use.Continue reading →
In this article, Toptal Programmer David Xu talks about managing state using immutability with Redux, a predictable state container.Continue reading →
In this article, Toptal Software Engineer Andrej Gajdos provides a guide with examples on how to configure Webpack for different scenarios and points out the most common pitfalls connected to project dependencies and their bundling when using Webpack.Continue reading →
PostCSS is the hot new tool that’s making the rounds on the front-end side of web development. It has been quickly and widely adopted, and possibly will have a significant impact on how we base our present-day CSS.
In this article, Toptal Software Engineer Nicolás J. Engler introduces us and guides us on how to start using this tool, expand it with plugins, or integrate with other CSS processors, task runners, or bundlers.Continue reading →
If you’ve spent your fair share of time developing web front-ends, you know that no amount of libraries and plugins are sufficient enough to make the development experience pleasant. Unpredictable event chains, complex data binding, and lack of structured data modeling only makes things worse.
Elm, a programming language built for front-end development, cuts to the root of all these problems and solves them there.
In this post, Toptal Software Engineer Stanislav Davydov provides a detailed guide to Elm and shows us how The Elm Architecture solves some of the most fundamental challenges of front-end development.Continue reading →
Software is regular and predictable, so it seems paradoxical that practically every web app needs a sizable administrative area. The explanation for this paradox lies in software’s interaction with humans. While you probably can’t build a fully automated system, there’s a lot you can do to save time and money.
In this post, Entrepreneur Jack Kinsella explains what you can do to streamline administration, thus saving valuable time and making your projects more profitable. Adminimisation is the word of the day!Continue reading →
Your website is gaining traction, and you are growing rapidly. Ruby/Rails is your programming language of choice. Your team is bigger and you’ve given up on “fat models, skinny controllers” as a design style for your Rails apps. However, you still don’t want to abandon using Rails? No problem.
In this article, Toptal Software Engineer Eqbal Quran explains how you can decouple and isolate your Rails components using nothing Plain Old Ruby Objects. Ruby objects and abstractions can decouple concerns, simplify testing, and help you produce clean, maintainable code.Continue reading →
You’ve heard that Magento is the eCommerce platform to use if you’re serious about your business – and you’re serious about your business – so you’ve decided on Magento. But do you know what you’re getting into?
In this post, Toptal Software Engineer Andrew Hughes walks us through the difference between WordPress WooCommerce and Magento. While Magento is the expert’s eCommerce platform of choice, it’s not always the right solution, depending on your client.Continue reading →
Let’s face it: Sometimes you just need to rant. Fortunately, there’s an app for that. It’s called devRant, and it’s the place for developers to vent about clients from hell, non-technical friends and family, and clueless recruiters.
In this roundup, devRant Co-Founder David Fox shares his favorite collection of rants since launching. Some will make you laugh. Others will make you laugh so hard you cry. And just about all of them will make you empathize with the author.Continue reading →
If you’re a veteran frontender, you’ve probably had some not-so-great experiences with designers, and chances are some designers have had an equally bad experience working with you. How can you make sure you get exactly what you need from your designer, without placing an undue burden on them?
It’s a tall order, but in this article Freelance Software Engineer Vedran Aberle Tokic outlines and addresses a number of potential issues that may become roadblocks for your execution. Implementing these suggestions may result in overhead for designers, but they can save enormous amounts of time and headache elsewhere.Continue reading →
In this article, Toptal Freelance Software Engineer Eric Grosse shows us how various combinations of the popular tools Webpack, Browserify, Gulp and Npm can benefit us by enhancing our development environment and allowing us to focus on writing the app itself.Continue reading →
In the realm of software development, time and date manipulation is considered by many to be a difficult task. Complicated time zone rules, leap seconds, differences in locale-specific formatting, etc., force us to immediately resort to popular time and date manipulation libraries. We often use these libraries without thinking about how exactly they work, which can lead to all sorts of obscure bugs in our software.
In this article, Toptal Freelance Software Engineer Punit Jajodia gives us an in-depth introduction to some concepts and best practices to avoid a few of the obvious issues related to changing the time and date in our applications.Continue reading →
WordPress is easily the most powerful open source blogging and content management system available online today. As WordPress is easy enough to set up and has a user-friendly approach, many developers are often underestimating it and so make mistakes in development.
In this article, Toptal Freelance Software Engineer Andrew Schultz outlines the ten most common mistakes that WordPress developers should be aware of for future projects.Continue reading →
How do you define good code? Is it 100% test coverage, or is it backwards compatibility with decade-old hardware? We may not be able to reach an end to this debate yet, but good software always seems to conform to a few certain qualities of code.
In this article, Toptal Freelance Software Engineer Zachary Goldberg walks us through six simple ideas that can help you make better, more maintainable software.Continue reading →
In this article, Toptal Freelance Developer Gabriel Aszalos first explains Golang philosophy and then covers the basics of testing in Go, from table testing to JSON response assertion.Continue reading →
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.
Many product owners don’t have a technical background and thus often find themselves unprepared and scrambling when it comes time to bring on a new development team. This often results in hindered progress, wasted time, and frustration for everyone involved. If this sounds like it could be you, either now or in the future, then you should be somewhat concerned.
In this blog post, Toptal Freelance Software Engineer Carlos Ramirez III will walk you through the various steps of a typical transition process in project management so you can prepare for this eventuality and make the transition as smooth as possible.Continue reading →
“So much of what’s new and exciting about Angular 2 is its new way of thinking rather than its new architecture,” says Toptal Freelance Developer Ethan James.
In this article, Ethan walks through the inner workings of a simple Angular 1.5 app and then shows us how to upgrade it to Angular 2 while giving us the necessary understanding to truly appreciate it.Continue reading →
Meet Web Audio API, a powerful programming interface for controlling audio on the web. Gone are the days when the web browser could rarely play a sound file correctly. With this API, you can now load sound from different sources, apply effects, create visualizations, and do much more.
In this article, Toptal Freelance Software Engineer Joaquín Aldunate shows us how to unleash our inner musician using Web Audio API with the Tone.js framework by giving us a brief overview of what this API has to offer and how it can be used to manipulate audio on the web.Continue reading →
Ever tried to create a JSON data structure that includes entities with bidirectional relationships? If you have, you know that this often results in errors or exceptions being thrown.
In this article, Toptal Freelance Software Engineer Nirmel Murtic provides a robust working approach to avoiding these errors when creating JSON structures that included entities with bidirectional (i.e. circular) relationships.Continue reading →
In this article, Toptal Freelance Developer Jeremy Greer walks us through three common uses of codemods, using the toolkit “jscodeshift”.Continue reading →
Nowadays, front-end development workflows involve many modern tools and preprocessors that not only streamline the whole process, but also allow you to spend less time on common web tasks, giving you more time to focus on other aspects of the project that require more careful and skilled insight. Sass, the scripting language for syntactically awesome stylesheets, comes with robust and built-in support for mixins - an essential feature for keeping your stylesheets DRY.
In this article, Toptal Freelance Software Engineer Justin Brazeau shows us 10 useful Sass mixins that help keep your stylesheets manageable by breaking them into smaller reusable bits, each with its own focus.Continue reading →
Would you like to test your PHP code like a boss? Do you feel that basic unit tests and PHPUnit just don’t cut it anymore? If your answer to both questions is yes, you might want to try Codeception, a mature and well-documented testing framework designed to outperform PHPUnit and Behat.
In this post, Toptal Freelance Software Engineer Vasily Koval describes how he came to take the plunge and start using Codeception, and he explains why you should check out Codeception for your PHP testing needs.Continue reading →
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.
It’s tragically common for developers to come into a project where proper automated testing has been and will continue to be overlooked. It’s a situation Freelance Developer Bhushan Lodha has found himself in all too often; fortunately, he’s found a solution. In this article, he briefly covers the reasons why testing is overlooked and ultimately explains his “coding life hack” to ensure quality control even when he can’t introduce a testing framework.Continue reading →
In a nutshell, declarative programming consists of instructing a program on what needs to be done, instead of telling it how to do it. This approach involves providing a domain-specific language (DSL) for expressing what the user wants. This DSL shields users from messy low-level constructs while still achieving the desired end-state.
While declarative programming offers advantages over the imperative approach it replaces, it’s not as straightforward as it may seem. In this comprehensive article, Toptal Freelance Software Engineer Federico Pereiro outlines his experience with declarative tools and explains how you can make declarative programming work for you.Continue reading →
When building smaller websites, the way developers structure their CSS code is usually not a big issue. However, when it comes to larger, more complex projects, code organization becomes crucial.
In this article, Toptal Freelance Software Engineer Tomislav Matijević introduces us to BEM methodology and explains how this CSS practice can massively improve code maintainability, speed up the development process, and streamline the teamwork of developers by arranging CSS classes into independent modules.Continue reading →
Streams are a powerful construct in Node.js and in I/O driven programming in general. Gulp, a tool for task automation, leverages streams in elegant ways to allow developers to enhance their build workflow.
In this article, Toptal engineer Mikhail Angelov gives us some insight into how Gulp works with streams by showing us step-by-step how to build a Gulp-like build automation tool.Continue reading →
When dealing with time consuming, resource intensive tasks, most PHP developers are tempted to choose the “quick hack route”. We’ve all used “ini_set(‘max_execution_time’, HUGE_INT);” before, but it doesn’t have to be this way.
In today’s tutorial, PHP developer Daniel Gheorghe demonstrates how an application’s user experience may be improved by separating long-running tasks from the main request flow using Laravel.Continue reading →
As software engineers, we’re always searching for the best tools and guides that will help us to be more productive while spending less time searching and reading long technical specifications.
Today, Toptal is pleased to present an entirely new resource to the community as a free download: a CSS Cheat Sheet. Toptal’s CSS Cheat Sheet is a quick CSS reference guide, and includes CSS syntax, the most important selectors, properties, sizes, and units, and other useful CSS details, all in a short, easily understandable format.Continue reading →
Ionic is extremely popular at the moment, and it has revolutionized the hybrid application industry in a way that nobody could have imagined. However, over time, the best practices and tooling for Ionic have not progressed in the same way. As a result, the number of pitfalls that developers need to look out for when working with Ionic is still high.
In this article, Toptal Freelance Software Engineer Julien Renaux outlines the most common mistakes that Ionic developers should know.Continue reading →
The threaded model and global interpreter lock has always been in the way of Python handling thousands of concurrent long-lived connections. Modern web frameworks, such as Tornado, use non-blocking network I/O to make Python feasible for implementing WebSocket servers.
In this article, Toptal engineer Jongwook Kim walks us through the process of implementing a simple WebSocket-based web application in Python using the Tornado web framework.Continue reading →
Truly understanding design is easier said than done. Coding and aesthetic design require very different skill sets, which is why some front-end developers aren’t as proficient in design as they could be, and the quality of their work suffers for it.
In this post, Toptal Freelance Software Engineer Bryan Grezeszak explains why good front-end developers have to follow essential design principles down to the pixel, and should regularly seek out advice and feedback from their designers.Continue reading →
When dealing with data analysis, most companies rely on MS Excel or Google Sheets, but dealing with data presented this way isn’t very eye-catching or intuitive. It’s once you add visualizations to this data that things become a little easier to manage. That’s the topic of today’s tutorial by our guest author from Adobe, Rohit Boggarapu. Join us as he guides us though the process of making interactive drill-down charts using jQuery and FusionCharts.Continue reading →
In the rapidly evolving Internet world, getting things done fast is always critical. Still, developers today waste hundreds of hours on tasks not related to programming: setting up databases or caches, deploying projects, monitoring online statistics, and so on.
In this article, Toptal Freelance Software Engineer Minhao Zhang guides us in a step-by-step tutorial on how to reduce waste by setting up your first virtual machine using Amazon Web Services, and introduces the most widely used AWS services that can boost your productivity in minutes.Continue reading →
Writing 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.
To create a .NET project from scratch, simply using Visual Studio Wizard is good enough most of the time. However, the default project settings produced by wizards are hardly acceptable for professional teams, as they set too low of a bar on quality.
In this article, Toptal Freelance Software Engineer Andrei Smirnov guides us through several standard practices, configuration files, and project settings every developer should apply when starting a new .NET project. Doing this in the very beginning of a project decreases future technical debt and makes product source code readable and professional-looking.Continue reading →
If you haven’t been working with PHP lately, you might wonder what happened to PHP 6. Why the skip from PHP 5 to PHP 7? Well, long story short, PHP 6 was a failure. To avoid confusion, the new version was renamed PHP 7.
PHP 7 introduces a number of new features, while at the same time dropping depreciated SAPIs and extensions. As a result, it tends to outperform PHP 5.x by a wide margin. Some compatibility issues could pose a problem, but most developers have nothing to worry about.
In this post, Toptal Freelance Software Engineer Vilson Duka explains what makes PHP 7 different, and why it’s time to make the switch.Continue reading →
In this article, Toptal engineer Darion Cassel shares some simple ways to improve the structure of your next Meteor-based web application without resorting to complicated boilerplates and scaffolding tools.Continue reading →
Small teams frequently have to compete with bigger, more structured organizations who are capable of allocating more resources to project management, and software release management in particular. This means that small teams, or even individual developers, need to properly organize and execute their release process in order to keep up.
In this article, Toptal Freelance Software Engineer Lucas Mancini focuses specifically on small startups, teams that don’t have, or can’t afford, DevOps support, or teams that don’t have a formal process defined for releasing new versions of their product. The author provides a suggested checklist method to manage releases, tailored to match his past experience working on different projects, together with some recommended best practices and guidelines.Continue reading →
Modern web browsers offer a number of different APIs and mechanisms to storing data on the client-side. But are all of these options created equal?
In this article, Toptal engineer Stephen Villee demystifies the various client-side storage options available in modern web browsers and explains how each of these can play a role in storing session data on the client-side.Continue reading →
The Art of War is an ancient military treatise, but despite its age, the text is still included in the syllabus at many military schools. Sun Tzu’s principles and teachings also have practical applications in politics, business, sports, and, believe it or not, software development. In fact, you might just be applying some of these principles in your daily routine, without even knowing.
In this post, Toptal Freelance Software Engineer Jose F. Maldonado explains why many of these ancient teachings still matter, and what you can do to make them work for you and your team.Continue reading →
In this article, Toptal engineer Ivan Rogic demonstrates the synergy of React, Redux and Immutable.js, and shows how these libraries together can solve many performance issues that are often encountered in large web applications.Continue reading →
Although the old, standardized security approaches work with REST services, they all have problems that could be avoided by using a better standard. For this, JWT arrives just in time to save the day.
In this article, Toptal engineer Dejan Milosevic guides us on how to implement a JWT token-based REST API using Java and Spring Security.Continue reading →
Integrating social network login in web applications directly using their SDKs can be a time consuming task. The fact that these SDKs keep changing every now and then doesn’t help either.
In this article, Toptal engineer Son Nguyen Kim provides us with an in-depth tutorial on how to use Satellizer, a feature-rich AngularJS library to integrate Facebook Login in an AngularJS web app.Continue reading →
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.Continue reading →
In this article, Toptal engineer William Coates shares his findings on ES6 from the perspective of a CoffeeScript convert.Continue reading →
Material Design uses a paper metaphor, bold intentions, and meaningful motion to give user interfaces an ultra-modern feel. Web applications built using AngularJS can now easily adopt these design principles using Angular Material, a reference implementation of Google’s Material Design Specification.
In this article, Toptal engineer Matt Spaulding walks us through the principles of Material Design and showcases some modern user interface elements built using the Angular Material library.Continue reading →
An operating system written in Node.js? Yes, it exists, and it’s called NodeOS. Think for a second about the progress Node.js has made in the short time it’s been around. Now, imagine the same thing happening with an operating system.
In this article, Toptal engineer Danny Morabito introduces us to NodeOS, guiding us with a step-by-step tutorial on how to create our first NodeOS application using nothing more than Node.js.Continue reading →
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.Continue reading →
REST APIs have become a common way to establish an interface between web back-ends and front-ends, and between different web services. The simplicity of this kind of interface, and the ubiquitous support of the HTTP and HTTPS protocols across different networks and frameworks, makes it an easy choice when considering interoperability issues.
Bottle is a minimalist Python web framework. It is lightweight, fast, and easy to use, and is well-suited to building RESTful services. In this article, I’ll provide a walkthrough of how to build a RESTful API service using Bottle.Continue reading →
Maintainable code is something we all desire and there are no shortage of coding principles that promise it. It is not always apparent how tremendously useful these principles are during the early stages of development. Nonetheless, the effort put in to ensure these qualities certainly pay off as the project grows and development continues. In this article, Toptal engineer Adel Fayzrakhmanov discusses how the Single Responsibility Principle is one of the most important aspect in writing good maintainable code.Continue reading →
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.Continue reading →
Rapid prototyping and the ability to produce quick visual results are features of many programming languages and frameworks. However, some take it even further by making these their primary goals. Processing, a programming language based on Java, allows its users to code within the context of visual arts and has been designed from the ground up to provide instant visual feedback. In this article, Toptal engineer Oguz Gelal provides a gentle introduction to Processing and some insights into its inner mechanics.Continue reading →
Is open source scary? Do developers think that nobody would be interested in their personal projects? What are the fears associated with publishing your own work for the public to see? In this article, Toptal Director of Engineering Anna Chiara Bellini shares how, as an accomplished engineer, she made her first contribution to GitHub. This guide features all the step-by-step basics to getting involved in open source, including everything from what open source software is, to how to start working with Git and GitHub, to actually making meaningful contributions to open source projects.Continue reading →
One of the most misused, misunderstood, and neglected of all the Rails built-in structures is the view helper. Helpers often get a bad reputation for being a dumping ground for one-off methods used across the entire application’s view layer. But what if your helpers could be more semantic, better organized, and even reusable across projects? What if they could be more than just one-off functions sprinkled throughout the view, but powerful methods that generated complex markup with ease leaving your views free of conditional logic and code?
Let’s see how to do this when building an image carousel, with the familiar Twitter Bootstrap framework and some good old-fashioned object-oriented programming.Continue reading →
In this article, Toptal designer Lijana Saniukaite walks us through some practical Bootstrap tips and best practices to speed up your application development.Continue reading →
When Mike Bostock created D3.js, he introduced a tried and true reusable charts pattern for implementing the same chart in any number of selections. However, the limitations of this pattern are realized once the chart is initialized. In this article, Toptal engineer Rob Moore presents a revised reusable charts pattern that leverages the full power of D3.js.Continue reading →
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.Continue reading →
When working on big web applications as a team with other developers, code needs to be scalable and readable. This can be a challenging process when it comes to CSS, although preprocessors like Sass are available. But only using preprocessors will only get you so far. In this article, Toptal engineer Matias Hernandez presents a style guide with advice on how to improve the way you write your code.Continue reading →
CSS preprocessors have been around for quite a while now. These tools, among many things, promise convenience in writing style sheets for the web. However, not everyone is taking advantage of these utilities, and is still resorting to writing vanilla CSS. In this article, Toptal engineer Marcelo Mazza discusses some of the reasons why he thinks Sass is the way to go and why you should be using it in your projects.Continue reading →
WebRTC has opened doors to all kinds of new peer-to-peer web applications and games that can run in the browser without the need of additional plugins. However, being a relatively new technology, it still poses some unique challenges to developers. PeerJS aims to tackle some of those challenges by providing an elegant API and insulating developers from WebRTC’s implementation differences. In this article, Toptal engineer Mahmud Ridwan provides an introductory tutorial to building a simple, peer-to-peer web game using PeerJS.Continue reading →
Between square inch smart wristwatches and mammoth smart TVs, a responsive website capable of adapting to a wide array of screen sizes and device capabilities is something no one complains about. However, many websites are still plagued by desktop-first design paradigms, or mobile-first paradigms with absolutely no focus on performance. These traditional approaches to responsive web design have various shortcomings. Fortunately, some simple ideas can help solve these problems.Continue reading →
The newest version of the Java platform, Java 8, was released more than a year ago. Many companies and developers are still starting new applications with old versions of Java. There are very few good reasons to do this, because Java 8 has brought some important improvements to the language. I’ll show you a handful of the most useful and interesting ones.Continue reading →
Docker, an open source tool, has changed the way we think about deploying applications to servers. By leveraging some amazing resource isolation features of the Linux kernel, Docker makes it possible to easily isolate server applications into containers, control resource allocation, and design simpler deployment pipelines. Moreover, Docker enables all of this without the additional overhead of full-fledged virtual machines.Continue reading →
The Spring Framework is a powerful, feature-rich, and well-designed framework for the Java platform. It offers a collection of programming and configuration models that aim to simplify and streamline the development process of robust and testable applications in Java. In this article, Toptal engineer Stefan Varga challenges the popular notion of Java as a complicated platform for simple needs, and walks us through a step by step tutorial to building a simple MVC application with the Spring Framework and JPA.Continue reading →
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.Continue reading →
Google’s new cloud code platform does not appear to be taking on GitHub head on. Instead, Cloud Source Repositories (CSR) will allow users to connect to repositories hosted on GitHub or Bitbucket. However, everything is automatically synced to the Google Cloud Source Repository.
The good news is that a Google CSR can be connected to another Git repository hosted on GitHub or Bitbucket. All changes will be synchronised on both platforms, as you can set Google CSR to automatically mirror from GitHub and Bitbucket.Continue reading →
Mastering CSS is an absolute necessity for any solid web designer or developer. This tutorial walks you through the fundamentals of CSS layout principles, from classic CSS2 techniques to the latest approaches in CSS3. Learn more about how to leverage all that CSS has to offer in order to optimize both the user’s experience and the quality of your code.Continue reading →
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.Continue reading →
Ractive.js provides powerful capabilities for web app development in a way that is refreshingly simple to learn and use. In this article, Toptal Engineer Eugene Mirotin walks you through the process of building a simple Ractive search app, demonstrating some of Ractive’s key features and the ways in which it helps simplify web app development. Code samples are provided and explained.Continue reading →
In this article, I’ll go through some of the interesting features and libraries that are available to use with React. Even if you don’t plan on using React, taking a look at its ecosystem is inspiring. You may want to simplify your build system using the powerful, yet comparatively easy to configure, module bundler Webpack, or start writing ECMAScript 6 and even ECMAScript 7 today with the Babel compiler. So, let’s explore the React ecosystem!Continue reading →
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.Continue reading →
In this article, I will show that unit testing itself is quite easy; the real problems that complicate unit testing, and introduce expensive complexity, are a result of poorly-designed, untestable code. We will discuss what makes code hard to test, which anti-patterns and bad practices we should avoid to improve testability, and what other benefits we can achieve by writing testable code. We will see that writing testable code is not just about making testing less troublesome, but about making the code itself more robust, and easier to maintain.Continue reading →
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!!Continue reading →
Bootstrap is a powerful toolkit. It comes bundled with basic HTML and CSS design templates that include many common UI components. Most of the important pitfalls are mentioned in the Bootstrap documentation, but still some mistakes are pretty subtle, or have ambiguous causes. This article outlines some of the most common mistakes, problems, and misconceptions when using Bootstrap.Continue reading →
This article provides the overview of pain points caused by AngularJS and reasons for switching to React.Continue reading →
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.Continue reading →
Deploying instances of a web application to one or more servers manually can often be a monotonous process, and take up a significant amount of your time. With little effort, it is possible to automate the process of deploying your web application with almost zero human intervention. This article outlines a simple approach to automating web application deployments using GitHub webhooks, buildpacks, and Procfiles.Continue reading →
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.Continue reading →
Log files may very well be one of the most underestimated and underutilized tools at a developer’s disposal. Beyond their value for debugging, with a bit of creativity and forethought, logs files can be leveraged to serve as a valuable source of usage information and analytics. In this article, In this article, Toptal engineer Ilya Sanosyan provides a practical guide to maximizing the value we get from our logs.Continue reading →
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!Continue reading →
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.Continue reading →
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.Continue reading →
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.Continue reading →
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.Continue reading →
Authentication is one of the most important parts of any web application. For decades, cookies and server-based authentication was the easiest solution. However, handling authentication in modern Mobile and Single Page Applications can be tricky and demand a better approach. One of the best known solutions to authentication problems for APIs is the JSON Web Token (JWT).Continue reading →
On the other hand, Volt is capable of managing the back-end and a dynamic front-end; since both functionalities are tightly integrated into its core.Continue reading →
AllcountJS is an emerging open source framework built with rapid application development in mind. It is based on the idea of declarative application development using JSON-like configuration code that describes the structure and behavior of the application.
In this article, we walk through a step-by-step tutorial for prototyping a data oriented web application using AllcountJS.Continue reading →
Java, a sophisticated programming language, has been dominating a number of ecosystems for quite a while. Portability, automated garbage collection, and its gentle learning curve are some of the things that make it a great choice in software development. However, like any other programming language, it is still susceptible to developer mistakes.
This article explores the top 10 common mistakes Java developers make and some ways of avoiding them.Continue reading →
Laravel designers didn’t spend too much time reinventing the wheel. A lot of solutions and practices are transferred from other frameworks.
The decision to embrace a new PHP framework should not be taken lightly, so let’s examine why considering Laravel may be worth your time and effort. Toptal freelance software engineer Alex Rytov explains what made him take the plunge and why he believes Laravel has a bright future.Continue reading →
There are many programming platforms used to develop games, and there are a plethora of devices to play them on, but when it comes to playing games in a web browser, Flash-based development still leads the way.
What if we could port these games to HTML5 Canvas technology and play them on mobile browsers as well? In this article, Toptal engineer Avinash Kaza gave a solution to this.Continue reading →
In Java development, a typical workflow involves restarting the server with every class change, and no one complains about it. But is Java class reloading that difficult to achieve? And could that problem be both challenging and exciting to solve? In this article, I will try to address the problem, help you gain all the benefits of on-the-fly class reloading, and boost your productivity immensely.Continue reading →
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.
The publish-subscribe pattern] (or pub/sub, for short) is a messaging pattern where senders of messages (publishers), do not program the messages to be sent directly to specific receivers (subscribers). Instead, the programmer “publishes” messages (events), without any knowledge of any subscribers there may be.
This article provides insight in how to use the pub/sub pattern, in Rails, to communicate messages between different system components without these components knowing anything about each other’s identity.Continue reading →
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”.Continue reading →
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?Continue reading →
As is known worldwide, the Chinese government enforces strict censorship on the internet. Virtually everything is under the government’s surveillance. In order to be allowed to operate, ISPs and internet content providers in China usually have their own content filtering mechanism for blocking or removing the published content by its users, or even deleting users’ account directly if they are assumed to be illegal under the government policy.Continue reading →
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.Continue reading →
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.Continue reading →
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.Continue reading →
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.Continue reading →
Today we have thousands of digital and printed resources that provide step-by-step instructions about developing all kinds of different web applications. Development environments are “smart” enough to catch and fix many mistakes that early developers battled with regularly. There are even many different development platforms that easily turn simple static HTML pages into highly interactive applications.
All of these development patterns, practices, and platforms share common ground, and they are all prone to similar mistakes caused by the very nature of web applications.Continue reading →
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.Continue reading →
Ember Data is a library for robustly managing model data in Ember.js applications. Ember Data provides a more flexible and streamlined development workflow, minimizing code churn in response to what would otherwise be high impact changes. This thorough guide introduces Ember Data’s key constructs and paradigms, demonstrating the value it can provide to you as a developer.Continue reading →
Which Ruby implementation is right for your project? While the reference implementation (Ruby MRI) remains the interpreter of choice, an alternate Ruby implementation may be right for your project, depending on your operational goals and constraints.
This article showcases the Ruby interpreter implementations and runtimes available today, discussing the advantages and disadvantages of each.Continue reading →
Web services and their APIs abound. Unfortunately, the vast majority are difficult to use. Reasons range from poor design, to lack of documentation, to volatility, to unresolved bugs, or in some cases, all of the above.
Follow the guidance in this post to help ensure that your web API is clean, well-documented, and easy-to-use. Such APIs are truly rare and are therefore much more likely to be widely adopted and used.Continue reading →
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.Continue reading →
For all too many companies, it’s not until after a breach has occurred that security becomes a priority. An effective approach to IT security must, by definition, be proactive and defensive. This post focuses on 10 common and significant web-related IT security pitfalls to be aware of, including recommendations on how they can be avoided.Continue reading →
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.Continue reading →
A year after Google’s launch of Polymer, Toptal engineer Alejandro Hernandez takes it out for a test drive to see if it’s yet ready for prime time. This post explores the maturity and stability of Polymer.js as a foundation for large-scale application development. The results and conclusions from this analysis are provided, along with an introductory overview of the technology.Continue reading →
I love and use Django in lots of my personal and client projects, mostly for those involving relational databases and more classical web applications. However, by design, Django is very tightly coupled with its ORM, Template Engine System, and Settings object. Plus, it’s not a new project: it carries a lot of baggage from the past to remain backwards compatible.
In a few of my client projects, we’ve chosen to give up on Django and use a micro framework like Flask, typically when the client wants to do some interesting stuff with the framework. At the same time, we often need user registration, login, and more, all of which is easily handled with Django.
The question emerged: is Django an all-or-nothing deal? Should we drop it completely from the project, or is there a way to combine some it with the flexibility of other frameworks?Continue reading →
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.Continue reading →
As modern web applications do more and more on the client-side (the fact itself that we now refer to them as “web applications” as opposed to “web sites” is quite telling), there has been rising interest in client-side frameworks. There are a lot of players in this field but for applications with lots of functionality and many moving parts, two of them stand out in particular: Angular.js and Ember.js.
Angular.js has already been introduced on this blog, so we’re going to focus on Ember.js in this post, in which we’ll build a simple Ember application to catalog your music collection. You’ll be introduced to the framework’s main building blocks and get a glimpse into its design principles.Continue reading →
I’ve been an Engineer at Toptal for just about one year now, working on the same project since I joined the network: Ondello, a service that connects doctors and patients over WebRTC.
When I first joined Ondello, I was hired as a Senior Ruby on Rails Developer, tasked to build a service up from scratch. These days, we’re a team of multiple developers working on a fairly large, complex system.
With this post, I’d like to share the story behind Ondello. Specifically, I’d like to talk about: how a simple application became not-so-simple, and how our use of cutting-edge technologies posed problems I’d never considered before.Continue reading →
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.
Nowadays, your website will be visited by a wide variety of devices: desktops with large monitors, mid-sized laptops, tablets, smartphones, and more.
To achieve an optimal user experience, your site should be adjusting its layout in response to these varied devices (i.e., to their varied screen resolutions and dimensions). The process of responding to the form of the user’s device is referred to as (you guessed it) responsive web design (RWD).Continue reading →
Node.js shines in real-time web applications employing push technology over websockets. What is so revolutionary about that? Well, after over 20 years of stateless-web based on the stateless request-response paradigm, we finally have web applications with real-time, two-way connections, where both the client and server can initiate communication, allowing them to exchange data freely. This is in stark contrast to the typical web response paradigm, where the client always initiates communication. Additionally, it’s all based on the open web stack (HTML, CSS and JS) running over the standard port 80.Continue reading →
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.Continue reading →
Demand within the web design scene today has changed over the past few years: designers with front-end skills, and front-end developers with design skills, are more and more in demand. Yes, you could argue that the jobs are completely different—and maybe you straight-up don’t like one of them—but truth be told, in my six years as a freelance web developer and twelve years as a designer, I’ve learned that it’s much harder to get by as just a web designer or just a front-end developer.
Wearing both hats has a lot of advantages: from a professional perspective alone, you can find work more easily and charge a higher rate because you’re bringing more to the table.Continue reading →
Everyone has their own set of tools. As a PHP developer, one of my favorites is a Rapid Application Development framework called “Nooku”. In the words of the development group: “Nooku is more of a web development toolkit than a framework”
In case you are not familiar with it, have a look. It’s an open source project that makes heavy use of industry accepted design patterns to produce highly componentized applications that are easily extensible and reusable (initially created by one of the lead Joomla developers). Out of the box, Nooku gives you a great deal to help get projects off the ground faster. A small, but strong sample:Continue reading →