Tables are a design pattern for displaying large amounts of data in rows and columns, and have been used for this purpose as early as the 2nd century and when the world started to go digital, tables came along with us. Tables have not yet seemed to fall out of favor, so, in this article, Huijing Chen will take a look at how we can create tables on the web in 2019.
Read more…
In the world of APIs, GraphQL has lately overshadowed REST due to its ability to query and retrieve all required data in a single request. Using a component-based API makes most sense when the website is itself built using components, i.e. when the webpage is iteratively composed of components wrapping other components until, at the very top, we obtain a single component that represents the page. In this article, Leonardo Losoviz will describe a different type of API, based around components, which takes a step further the amount of data it can fetch from a single request.
Read more…
Let’s make 2019… fast! A front-end performance checklist (PDF/Apple Pages/MS Word), with everything you need to know to create fast experiences today.
Read more…
In this article, you can learn how to build the animated note display from the Awwwards website. It discusses the HTML5 SVG circle element, its stroke properties, and how to animate them with CSS variables and Vanilla JavaScript.
Read more…
Ever heard of a text adventure? Text adventures have been replaced over the years by games that present better visuals and, especially in the past few years, the increasing ability to collaborate with other friends and play together. This particular feature is one that the original text adventures lacked, and one that we want to bring back in this series of articles. Today, Fernando Doglio explains the process of how to create an entire engine that is capable of letting you play any text adventure you and your friends enjoy. That’s right, we’re going to spice it up a bit by adding multiplayer to the text adventure genre!
Read more…
Building real-time applications is hard. However, GraphQL is rapidly upending this status-quo. In three simple steps you can quickly wire-up a fully-functional real-time app, without getting mired in unnecessary details such as setting up a websocket connection. That right there is the power of community tooling backing an abstraction like GraphQL. In this article, Sandip Devarkonda will explore what GraphQL is, and then take it for a spin by building a poll app in which users can vote and on-screen aggregated results are updated in real time.
Read more…
Overusing inline CSS or JS code, as opposed to serving code through static resources, can harm the site’s performance. In this article, Leonardo Losoviz will learn how to load dynamic code through static files instead, avoiding the drawbacks of too much inline code. You will see, as an example, how WordPress loads 43kb of scripts to print the Media Manager, which are pure JavaScript templates and could perfectly be loaded as static resources.
Read more…
Have you ever had a requirement in which you had to design and build an interactive web experience but the grid system fell short? Furthermore, the design elements turned into unusual shapes that just wouldn’t fit into the regular web layouts? In this article, Krutie Patel is going to build an interactive infographic using Vue.js, SVG and GreenSock by using dynamic data and unusual layout.
Read more…
When creating a multi-step form in which a file is uploaded and manipulated, if the application is running on several servers behind a load balancer, then we need to make sure that the file is available all throughout the execution of the process, for whichever server handles the process at each step. In this article, Leonardo Losoviz will solve this issue by creating a repository accessible to all servers where to upload the files, based on AWS S3.
Read more…
Attribute selectors are magical. They can get you out of sticky problems, help you avoid adding classes and point out some problems in your code. But don’t worry, while attribute selectors are complex and powerful, they’re easy to learn and easy to utilize. In this article, John Rhea will discuss how they operate and give you some ideas about how to use them. By the end of this article, you’ll use them to run diagnostics on your site, fix otherwise unsolvable problems, and generate technologic experiences so advanced they feel like magic.
Read more…
