How we reduced our initial JS/CSS size by 67%

We have been working on reducing the amount of bytes that we send to all Fider users. Being a web application built with React, we have focused on JS and CSS. On this post we share our learnings, some concepts and suggestions on how you can do the same with your web application.

Full article

Read More

Functional Programming Principles in Javascript

After a long time learning and working with object-oriented programming, I took a step back to think about system complexity. Doing some research, I found functional programming concepts like immutability and pure function.

Full article

Read More

Creating Horizontal Scrolling Containers the Right Way [CSS Grid]

Ever since Netflix became a household name we’ve been scrolling sideways in mobile layouts. Instead of stacking everything on top of each other, horizontal scrolling containers (or lists) have become a common layout practice, as it helps reduce the vertical space of devices with smaller screens.

Full article

Read More

Boost Your Vue.js Workflow With Vue CLI 3

We can hardly imagine modern web development without the help of Command Line Interface (CLI) tools. They tremendously facilitate and speed up the development workflow by reducing the amount of repetitive and tedious tasks.

Full article

Read More

Simplify Styling with Functional CSS

Do you dread styling your apps? Fear that a change might break the styles you crafted through many hours of labour? I'm here to tell you that there's another way. Introducing functional CSS.

Full article

Read More

How to Work From Home Without Falling Into a Pit of Despair

Much to my surprise and my roommates’ consternation, I have somehow managed to work from home for an entire year. There are a lot of upsides to leading a laissez-faire life of couch-writing.

Full article

Read More

10 Node Frameworks to Use in 2019

More developers have switched to using JavaScript to build more applications, especially for the web. This has brought about an exponential growth in the usage of frameworks built specifically for the JavaScript community to facilitate quick prototyping and building of awesome projects. When Node.

Full article

Read More

Best command line utilities

As a developer, you probably use command line most often.Here are some of the command line utilities that make your life a little bit easier. HTTPie is a command line HTTP client. Its goal is to make CLI interaction with web services as human-friendly as possible.

Full article

Read More

Deploying a Node App to Google Cloud with Kubernetes

Let’s look at how to deploy a Node/Express microservice (along with Postgres) to a Kubernetes cluster on Google Kubernetes Engine (GKE). This article assumes that you have basic working knowledge of Docker and an understanding of microservices in general.

Full article

Read More

Amazon makes its machine learning courses available for free

Amazon announced today that it’s making its range of machine learning courses available to all developers signed up to its AWS platform for free.

Full article

Read More

GraphQL API with AWS and Use with React

GraphQL has become a go-to API implementation for developers looking to take advantage of features liketype safety, network efficiency, real-time data with subscriptions & more.

Full article

Read More

Handling Errors in JavaScript: The Definitive Guide

Following up on my last article, I want to talk about Errors. Errors are good — I’m sure you’ve heard that before. At first sight we fear Errors, because they often include being hurt or feeling humiliated in public.

Full article

Read More

After two years with TypeScript – was it worth it?

Almost two years ago I started a new greenfield project in a small agile team. Microservices, docker, react, redux, all that fancy stuff. I had some experience with similar front-end technologies, because I had spent the previous year on a pretty big react application written by over 20 front-end developers. It was quite challenging for me.

Full article

Read More

Engineering Management : Lessons learned in first year

It’s winter season and am getting close to a year of full-time engineering management. So, I’m listening to some jazz house music and reflecting on what I have learned. While I have done tech lead roles before, this is the first role I’ve been doing people management full time, i.e.

Full article

Read More

Web workers vs Service workers vs Worklets

Web workers, service workers, and worklets. All of these are what I would call “Javascript Workers”, and although they do have some similarities in how they work, they have very little overlap in what they are used for.

Full article

Read More

An Introduction to Git Merge and Git Rebase: What They Do and When to Use Them

As a Developer, many of us have to choose between Merge and Rebase. With all the references we get from the internet, everyone believes “Don’t use Rebase, it could cause serious problems.

Full article

Read More

As a JS Developer, This Is What Keeps Me Up at Night

JavaScript is an oddball of a language. Though inspired by Smalltalk, it uses a C-like syntax. It combines aspects of procedural, functional, and object-oriented programming (OOP) paradigms. It has numerous, often redundant, approaches to solving almost any conceivable programming problem and is not strongly opinionated about which are preferred. It’s weakly and dynamically typed, with a mazelike approach to type coercion that trips up even experienced developers.

Full article

Read More

How to use React.lazy and Suspense for components lazy loading

React 16.6 brought code-splitting to a new level. You can now load your components when it’s really needed without installing additional libraries. Another way to say: “loading on demand or in parallel” is lazy-loading.Opposite of lazy-loading is eager-loading.

Full article

Read More

Error Handling & Angular

If you are more than… 2 years old, you’d have realized that indeed shit happens, and your apps are not an exception. When it happens you can ignore it, and let the bad grow, or do something, and improve the world.

Full article

Read More

Introducing npx: an npm package runner

Those of you upgrading npm to its latest version, npm@5.2.0, might notice that it installs a new binary alongside the usual npm: npx.

Full article

Read More

Build a CRUD App in React with Hooks

In the latest alpha release of React, a new concept was introduced – Hooks. Hooks are being added to React as an alternative to classes. If you use React right now, you’ll be familiar with simple (functional) components and class components.

Full article

Read More

How we use Storybook for documentation and code reviews

Thinking in terms of components has made frontend development a lot easier to reason about and codebases much more maintainable compared to traditional architectures like MVC etc.

Full article

Read More

The 2018 React JS RoadMap

The React JS or simply React is one of the leading JavaScript libraries for developing front-end or GUI of web applications. Backed by Facebook, React JS, also known as just React is has grown by leaps and bounds in recent years and became the de-facto library for component-based GUI development.

Full article

Read More

A personal review of automated testing tools in the JavaScript world

In this post, I will talk about my experiences with test automation using tools that support JavaScript. In the first part of the post, I will talk about tools for test automation of the graphical user interface or GUI.

Full article

Read More

The Smaller, More Powerful Raspberry Pi 3 Model A+

It’s that time of year again, and the Raspberry Pi Foundation has some new hardware for you. This time, it’s an improved version of the Raspberry Pi Model A, bringing it the speed and power of its bigger brother, the Raspberry Pi Model 3 B+.

Full article

Read More

Understanding JSON Web Token Authentication

In this article, we will take a look at what JSON Web Token is all about. We will start with a basic explanation of JWT, then look at its structure, and finally create a simple server that will take some data and insert it into a JWT.

Full article

Read More

A Study Plan To Cure JavaScript Fatigue

Like everybody else, I recently came across Jose Aguinaga’s post “How it feels to learn JavaScript in 2016”. It’s clear that this post hit a nerve: I saw it reaching the top spot on Hacker News not once but twice.

Full article

Read More

Learn to combine RxJs sequences with super intuitive interactive diagrams

When working on a sufficiently complex application you usually have data coming from more than one data source. It can be some multiple external data points like Firebase or several UI widgets interacting with a user.

Full article

Read More

CSS and Network Performance

Despite having been called CSS Wizardry for over a decade now, there hasn’t been a great deal of CSS-related content on this site for a while. Let me address that by combining my two favourite topics: CSS and performance.

Full article

Read More

Design Patterns in Web Development

Before diving down in this series you might want to know why I am writing this. My name is Manuel and I am a more-or-less Italian more-or-less lifelong geek. Although I am doing web development since the dark ages of "tables", I decided to make software development a full time job only three years ago.

Full article

Read More

Internationalization in Angular and React Applications — A Comparison

In this article, we will explore how React and Angular applications compare when it comes to Internationalization (i18n). We will create a sample application in English and then convert the content into a different locale.

Full article

Read More

The Most Awesome Online Teachers for Learning Web Development

For the past few months, I have been on a learning spree looking to enhance my existing coding skills and also learn new programming languages and frameworks. In this process, I have watched a countless number of video tutorials and online courses that pertain to programming and, specifically, web development.

Full article

Read More

CSS Frameworks Or CSS Grid: What Should I Use For My Project?

Among the questions I am most frequently asked is some variety of the question, “Should I use CSS Grid or Bootstrap?” In this article, I will take a look at that question. You will discover that the reasons for using frameworks are varied, and not simply centered around use of the grid system contained in that framework. I hope that by unpacking these reasons, I can help you to make your own decision, in terms of what is best for the sites and applications that you are working on, and also for the team you work with.

Full article

Read More

Implementing Smooth Scrolling in React

Smooth Scrolling, dont know what it is? Well, instead of clicking on a button and being instantly taken to a different part of the (same) page, the user is navigated there via a scroll animation. It's one of those subtle features on a site that makes an incredible difference in terms of aesthetics.

Full article

Read More

Top JavaScript Trends To Look For In 2019

As we know that the digital world is multi-layered, several pieces of technology come together to offer you an experience through a smart screen. The development of JavaScript is changing rapidly, especially in the last twelve months. 2018 was a year with a lot of action, changes and new initiatives in front-end web development.

Full article

Read More

Git aliases I can't live without

My love for aliases started when I installed zsh and its addon suite oh-my-zsh for the first time. It contains a big set of predefined aliases and helper functions for different command line programs.

Full article

Read More

Continuous Integration: The What, Why and How

Not long ago, I had a novice understanding of Continuous Integration (CI) and thought it seemed like an extra process that forces engineers to do extra work on already large projects. My team began to implement CI into projects and, after some hands-on experience, I realized its great benefits, not only to the company, but to me, an engineer! In this post, I will describe CI, the benefits I’ve discovered, and how to implement it for free, and fast.

Full article

Read More

These tools will help you write clean code

Learning to write good code, but you don’t know where to start… Going through style-guides like Airbnb’s Javascript Style Guide… Trying to write code with best practices... Removing dead code? Finding unused variables in the code base? Trying to find problematic patterns in your code? Like, does it return or not?

Full article

Read More

Top 12 Things That Destroy Developer Productivity

No one expects a programmer to get work done without access to a computer, but there are many companies that expect programmers to get work done without access to their mind. This is equally unrealistic. So let’s deep dive into our list of 12 things that prevent your developers from getting “into the zone” and being productive. I will try to prioritize this list from most to least impactful. Feel free to comment!

Full article

Read More

What and How to Test with Jest and Enzyme

Testing React components may be challenging for beginners and experienced developers who have already worked with tests. It may be interesting to compare your own approaches with the ones we use in our project.

Full article

Read More

How to use Sass and CSS Modules with create-react-app

Up until the release of create-react-app v2, if you wanted to include Sass or CSS Modules in your project, you would have to eject from create-react-app, learn Webpack configurations, install Sass loaders and configure it yourself. Not anymore.

Full article

Read More

A Netflix Web Performance Case Study

tl;dr: There are no silver bullets to web performance. Simple static pages benefit from being server-rendered with minimal JavaScript. Libraries can provide great value for complex pages when used with care. Netflix is one of the most popular video streaming services.

Full article

Read More

Understanding Change Detection Strategies in Angular

Change Detection and its strategies (OnPush and Default) have been written about in various articles in the web but no one have come close to provide comprehensive and in-depth information about the concepts, they mostly focus on the use cases.

Full article

Read More

Publishing private NPM packages to Nexus

We’ve all worked on projects which give us an opportunity to build reusable components. Most of the times these components end up in the shared folder of the project. This folder then gets copy-pasted into several projects which over time become a nightmare to update as we cannot easily have multiple versions of a component and maintaining the same code base on multiple branches as versions is kind of a hacky solution to this problem.

Full article

Read More

How to Make Your Existing React App Progressive in 10 Minutes

So you have this incredible new generation app ready for the public, and you are now thinking about making it progressive. You already know that progressive web apps (PWAs) are the current trend as you did your research on Google developers portal and learned everything about it.

Full article

Read More

Connection-Aware Components in Angular

The navigator.connection object contains a read-only property named effectiveType, which returns the effective connection type. That type is determined using a combination of recently observed RTT (round-trip time) and downlink values. (at the time of writing, browser support is limited)

Full article

Read More

GraphQL - The good and the bad

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API as well as gives clients the power to ask for exactly what they need and nothing more.

Full article

Read More

Nrwl Nx 7.0: Better E2E testing with Cypress

With Nrwl’s recent announcement about Nx 7, we’re happy to let you know that Nx 7 provides you with the option to use Cypress as an end-to-end test runner! Nrwl Extensions for Angular (aka Nrwl Nx) is an open source toolkit for enterprise applications, which we developed at Nrwl, based on our experience working at Google and helping Fortune 500 enterprises to build ambitious Angular applications.

Full article

Read More

The Complete JavaScript Handbook

JavaScript is one of the most popular programming languages in the world, and is now widely used also outside of the browser. The rise of Node.js in the last few years unlocked back-end development …

Full article

Read More

Build a Phone System for Your Company With Twilio, Okta, and JavaScript

If you've ever worked for a company with more than a few employees, you've probably seen some interesting phone systems.

Full article

Read More