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 →
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 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 →
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 →
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 →
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 →
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 →
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 →
EhCache is a widely-used, pure Java cache that can be easily integrated with most popular Java frameworks, such as Spring and Hibernate. It is often considered to be the most convenient choice for Java applications since it can be integrated into projects easily. EhCache Spring Annotations allows seamless integration into any Spring application by simply adding annotations to cacheable methods, without modifying the method implementations. This article focuses on boosting your Spring applications with EhCache Spring Annotations.Continue reading →
Nowadays, almost all Python frameworks use WSGI as a means, if not the only means, to communicate with their web servers. This is how Django, Flask and many other popular frameworks do it.
This article intends to provide the reader with a glimpse into how WSGI works, and allow the reader to build a simple WSGI application or server.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 →
Developers sometimes run into tasks that require access to email mailboxes. In most cases, this is done using the Internet Message Access Protocol, or IMAP. As a PHP developer, I first turned to PHP’s built in IMAP library, but this library is buggy and impossible to debug or modify. So today we will create a working IMAP email client from the ground up using PHP. We will also see how to use Gmail’s special commands.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 →
Performance and data interoperability are critical to the success of any web application. For web apps that need to support video processing – which is inherently compute- and I/O-intensive – these challenges are particularly acute. In this post, I describe some of my experience successfully incorporating video capabilities into a PHP-based web app, leveraging open source technologies and cloud-based services to the greatest extent possible.Continue reading →
Many modern web trends offer a lot of visual appeal and the temptation to follow them blindly is quite real. These trends are not always bad, but they can be dangerous if not implemented with caution. In this article, Toptal designer Bojan Janjanin discusses some of the most common UX mistakes and some insights on finding the balance between what looks nice and what is actually usable.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 →
Every once in a while PHP developers are charged with tasks that require them to extend the functionalities of legacy projects, a task that often includes building REST APIs. Building a REST API for PHP-based projects is challenging, but in the absence of proper frameworks and tools, it can also be a particularly difficult goal to get right. In this article, Toptal engineer Arminas Zukauskas shares his advice, with sample code, on how to build a modern structured REST API around existing legacy PHP projects.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 →
Proper test automation is not always easy to achieve and requires almost as much design and thought as needed for the software itself. In the agile way of development tests are an essential ingredient in ensuring quality of software. However, unless these test codes are maintainable, they can prove to be more of a nuisance, especially when it comes to automated testing of modern web applications. This article is an easy introduction to Selenium features Page Object and Page Factory, how they can be used to model web applications, and how to write maintainable test code using them.Continue reading →
With four times as many pixels per inch, stuff should look better on a 4K panel, no question about that. In most cases, it does. If you play 1080p video on a 4K display, it will still look good, but what happens if you start using a legacy application or old website?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 →
We often use allegory to pass on an idea, trying to visually present the point of the story to allow the other person easier understanding. Using some kind of visualisation to paint a full picture of the story we are trying to tell is a good idea. Using animation to get the message across can be even better; if a picture is worth a thousand words, how much is an animation worth?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 →
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 →
For some people, front-end design and development can sometimes start to seem like a chore, and can be monotonous and time consuming. Through a modular design approach, it is possible to both save time and streamline the design and development process.Continue reading →
While Ruby has Rails and Python has Django, the dominant application development framework for Node has yet to be established. But, there is a powerful contender gaining steam: LoopBack, an open source API framework built by StrongLoop, the creators of Express.
Let’s take a closer look at LoopBack and it’s capabilities by turning everything into practice and building an example application.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 →
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 →
Face it, you’re a software engineer, not a graphic designer. When you need to write a manual, technical document, or report, you just want to write it and be done with it. Especially for you as a software engineer – who is not put off by needing to learn and use some basic syntax conventions – Markdown can be the path of least resistance between what you want to write and getting it written.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 →
Making your own maps is not a big undertaking anymore, but for developers not familiar with web mapping, the agony of choice might be intimidating. You want to make maps, but don’t know where to start nor which tools to use. I am here to help.
Here, I’ll discuss several of the best available tools, providing a brief overview of each, along with code examples, and weighing the pros and cons.Continue reading →
Although the most wide-spread and supported way of running Django is on a Linux system (e.g., with uwsgi and nginx), it actually doesn’t take much work to get it to run on IIS. In this article, Toptal Engineer Ivan Voras walks you through a step-by-step tutorial, clearly explaining how to install Django on IIS.Continue reading →
Modern web browsers provide a rich set of APIs; some of which have been around for a long time, and have since been used to build powerful web applications.
Web Audio API has been popular among HTML5 game developers, however, the Web MIDI API and its capabilities have yet to be utilized. In this article, Toptal engineer Stéphane P. Péricat guides you through the basics of the Web MIDI API, and shows you how to build a simple monosynth to play with your favorite MIDI device.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 →
Community is made up of individuals and one of our own, Matthew Osborne, has passed away unexpectedly. We want to express our deepest condolences to Matthew’s family.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.
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 →
Wouldn’t it be great to develop for Google Glass without learning a new programming language, and even by just using knowledge common to all web developers? Yes, it is possible!
This article will introduce you to web development techniques you can use to build application used on Google Glass.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 →
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 →
PHP makes it relatively easy to build a web-based system, which is much of the reason for its popularity. But its ease of use notwithstanding, PHP has evolved into quite a sophisticated language, with many nuances and subtleties that can bite developers, leading to hours of hair-pulling debugging. This article highlights ten of the more common mistakes that PHP developers need to beware of.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 →
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 →
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 →
As a veteran telecommuter through multiple jobs in my career, I have witnessed and experienced the many joys of being a remote worker. As for the horror stories, I have more than a few I could tell. With a bit of artistic inclination and a talent for mathematics, I also have a fascination with patterns: design patterns, architectural patterns, behavioral patterns, social patterns, weather patterns—all sorts of patterns!
When I first encountered anti-patterns, I discovered a trove of wisdom I wish I had known before I had learned the hard way. Anti-patterns are recognizable repeated patterns that contribute significantly to failure. For example, the manager that keeps interrupting the employee in order to see if the employee is getting any work done is engaging in an anti-pattern that serves to prevent the employee from getting any work done!
Based on my own experiences and experiences of friends and co-workers, I am assembling descriptions of anti-patterns related to telecommuting.Continue reading →
In 2007, Bennett Haselton revealed a minor hack with major implications: querying ranges of numbers on Google would return pages of sensitive information, including Credit Card numbers, Social Security numbers, and more. While Haselton’s hack was addressed and patched, I was able to tweak his original technique to bypass Google’s filter and return the same old dangerous results.Continue reading →
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 →
Web Developers often fail to consider the consequences of thousands of users accessing our applications at the same time. Perhaps it’s because we love to rapidly prototype; perhaps it’s because testing such scenarios is simply hard.
Regardless, I’m going to argue that ignoring scalability is not as bad as it sounds—if you use the proper set of tools and follow good development practices. In this case: the Play! framework and the Scala language.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 →