Web Front-end

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.

You’ve heard of Bootstrap, but what is Bootstrap, exactly? A powerful collection of HTML, CSS, and JavaScript tools, it makes responsive web development easy. Get started with the basics of Bootstrap.

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.