Common CSS Issues For Front-End Projects

When implementing a user interface in a browser, it’s good to minimize those differences and issues wherever you can, so that the UI is predictable. Keeping track of all of those differences is hard, so I’ve put together a list of common issues, with their solutions, as a handy reference guide for when you’re working on a new project.

Full article

Read More

How to define a highly scalable folder structure for your Angular project

Finding a suitable folder structure for my Angular applications is something I’ve struggled with for a long time. This became a real issue in my first ever real-world Angular project — especially when the application grew in size. I ended up continuously adding new features with no real structure in place.

Full article

Read More

Functional Programming Fundamentals

In the past few years, React and Redux have generated a surge of Functional Programming which we often take for granted. However many of us never got a chance to learn the fundamentals. In this post, we’ll cover the fundamentals of Functional Programming and how they apply to modern JavaScript.

Full article

Read More

Advanced caching with RxJS

When building web applications, performance should always be a top priority. There are many things we can do to speed up our Angular applications like tree-shaking, AoT (ahead-of-time compilation), lazy loading modules or caching. To get an overview of practices that will help you boost the performance of your Angular applications, we highly recommend you to check out the Angular Performance Checklist by Minko Gechev. In this post we focus on caching.

Full article

Read More

11 Awesome JavaScript Extensions for Visual Studio Code

One of the most impressive parts of Visual Studio Code is customizability, especially via extensions. I won't cover framework specific extensions, but here are some of the best extensions in VS Code for writing JavaScript.

Full article

Read More

Make Your Angular Form’s Error Messages Magically Appear

In this article, we’re going to learn how to develop a generic method that displays validation errors in Angular’s form. I will walk you through the process and ideas behind the decisions I made along the way. Let’s get started.

Full article

Read More

The TypeScript Tax

TypeScript grew a great deal between 2017 and 2019, and in many ways, for good reason. There’s a lot to love about TypeScript. In the 2018 State of JavaScript survey, almost half the respondents said they’d tried TypeScript and would use it again.

Full article

Read More

What's New in JavaScript for 2019

For the last several years, JavaScript has been evolving on a steady cadence with new language features. If you’re curious to see what’s in store for the next version of JavaScript, this post is for you!

Full article

Read More

15 Useful JS Examples of map(), reduce() and filter()

Moreover, I’ve never seen this in the real codebase. However, what I see a lot is an abundance of 7–8 lines for-loop statements for solving a pretty regular task where Array.reduce can do it in one line.

Full article

Read More

Material Dashboard Using Angular 6

Recently, Angular released its latest version, Angular 6.0. In the latest version, they have focused more on the toolchain, which provides us with a way to quick start our tasks easier, as well as some synchronized versions, such as Angular/core, Angular/compiler, etc.

Full article

Read More

The React Developer Tools You Should Know in 2019

While the frontEnd world knew some turbulence in the past decade, React’s composable and extendable approach has proved itself viable and sustaining during the past couple of years.

Full article

Read More

Angular Runtime Performance Guide

Smooth, highly-responsive interfaces increase users’ confidence in an application and create an overall positive experience. Whereas small applications with simple interactions are built without a focus on runtime performance, standard approaches sometimes do not scale well as the data size or feature complexity increases.

Full article

Read More

Getting Started with Nest.js

If you have ever worked on a Node.js application before, either built a REST API or an enterprise application, you must have realised how tedious and daunting it was to maintain, especially whenever the application start to scale.

Full article

Read More

Top 10 Podcasts for Web Developers

A Web Developer's need to learn never ends, so what better way to take in the latest technologies than listening to a podcast?! You can listen while you drive, clean the house, take a shower (no judgements...you do you!), or anything else.

Full article

Read More

10 Interesting JavaScript and CSS Libraries for January 2019

Our mission at Tutorialzine is to keep you up to date with the latest and coolest trends in web development. That’s why every month we release a handpicked collection of some of the best resources that we’ve stumbled upon and deemed worthy of your attention.

Full article

Read More

Post-Work: The Radical Idea of a World Without Jobs

Work has ruled our lives for centuries, and it does so today more than ever. But a new generation of thinkers insists there is an alternative.  Work is the master of the modern world. For most people, it is impossible to imagine society without it.

Full article

Read More

The Complete Guide to SCSS/SASS

In this tutorial Sassy, Sass and SCSS will refer to roughly the same thing. Conceptually, there isn’t much difference. You will learn the difference as you learn more, but basically SCSS is the one most people use now.

Full article

Read More

Website Planning in 4 Steps and 20 Minutes

Save yourself a lot of time and headache: before you dive into building your new website, think through a high-level website plan. This planning process doesn’t need to be complicated or time intensive.

Full article

Read More

Why GraphQL is Taking Over APIs

A few years ago, I managed a team at DocuSign that was tasked with re-writing the main DocuSign web app which was used by tens of millions of users. The APIs didn’t exist yet to support our new shiny front-end app because since the beginning the web app was a .NET monolith.

Full article

Read More

Background Sync with Service Workers

Service workers have been having a moment. In March 2018, iOS Safari began including service workers -- so all major browsers at this point support offline options.

Full article

Read More

Building Component Libraries in Angular

Angular CLI is one of the best tools available for building Angular applications. CLI conveniently allows developers to create new project that have testing, type script transpilation and other things.

Full article

Read More

Building a RECIPE app using Prisma and React

In the last couple of years, GraphQL has taken on the scene in terms of frontend development due to the various advatanges it offers over REST. However, setting up your own GraphQL server is challenging, it's both error-prone and complicated.

Full article

Read More

Improve React Performance using Lazy Loading? and Suspense

Lazy loading? has come to be one of the optimization techniques widely used now to speed up the load time. The prospect of Lazy Loading helps reduce the risk of some of the web app performance problems to a minimal〽.

Full article

Read More

How To Learn JavaScript

In today’s day and age, coding is becoming more popular than ever. It’s not uncommon for people to quit their jobs, learn coding, and get a front-end development position as a second career. Front-end development is such an attractive career for many reasons: high-demand, large salaries, and anyone can learn how to code for free (or a small amount of money) on the Internet.

Full article

Read More

7 Simple Hacks to Supercharge Your Angular 7 App

Angular is an excellent platform that allows developers to build applications with the web. This platform has integrated various best practices like dependency injection, declarative templates, and so on for overcoming development challenges.

Full article

Read More

Browser Rendering Optimizations for Frontend Development

We live in an age where the importance of delivering web services at optimal speed can't be overemphasized. As the payload transmitted by web applications increase, developers must adopt best practices to ensure that data packets are delivered almost instantaneously, hence providing users with an overall exemplary experience.

Full article

Read More

JavaScript Modules: From IIFEs to CommonJS to ES6 Modules

I’ve taught JavaScript for a long time to a lot of people. Consistently the most commonly under-learned aspect of the language is the module system. There’s good reason for that. Modules in JavaScript have a strange and erratic history.

Full article

Read More

"I need to change this code, but it has no test"

This article was originally written for my personal blog. I am republishing it here for the DEV community. Here's the deal: you need to change the code to make this awesome new feature work, but that code is not covered by an automated test.

Full article

Read More

mkcert: valid HTTPS certificates for localhost

The web is moving to HTTPS, preventing network attackers from observing or injecting page contents. But HTTPS needs TLS certificates, and while deployment is increasingly a solved issue thanks to the ACME protocol and Let's Encrypt, development still mostly ends up happening over HTTP because no one can get an universally valid certificate for localhost.

Full article

Read More

Create Your First Custom Angular CLI Schematic with Nx

TL;DR In this tutorial, we’re going to learn the basics of Nrwl’s tool Nx, as well as how to create a custom workspace CLI schematic. You can see the finished code in this repository. Note: This tutorial assumes some basic knowledge of Angular and the Angular CLI.

Full article

Read More

9 Tricks for Kickass JavaScript Developers in 2019

Yet another year is over and JavaScript is ever changing. However, there are some tips that can help you write clean and efficient code that scales, even (or maybe especially?) in 2019. Below is a list of 9 pragmatic tips that will make you a better developer.

Full article

Read More

Super Simple GraphQL with Node

GraphQL is a specification and therefore language agnostic. When it comes GraphQL development with node, there are various options available ranging from graphql-js, express-graphql to apollo-server.

Full article

Read More

The Best Way To Unsubscribe RxJS Observables In The Angular Applications!

The RxJS (aka Observable-s ) is a rather new-ish technology in the frontend engineering space. Made popular mostly by its inclusion in the core Angular APIs. It proved to be a very powerful tool when dealing with the collections of asynchronous events.

Full article

Read More

The React Handbook

I hope this book has helped you get started with React, and maybe it gave you a head start in exploring some of the most advanced aspects of React programming. That’s my hope, at least.

Full article

Read More

BEM will make you happy

BEM (which stands for Block-Element-Modifier) is a standard in the world of CSS and is immensely useful for writing CSS that is easier to read, understand and scale. 1- Block: the most external parent element of the component is defined as the block.

Full article

Read More

Good Engineering Practices while Working Solo

When you’ve got to go it alone, how do you make the most out of it? Most developers work as part of a team. However, at some point in our careers, we’ve had to (or we’ll have to) work alone.

Full article

Read More

Building a Video Blog with Gatsby and Markdown (MDX)

Since the dawn of the web, performance has been an important factor for web development because slow speeds often lead to a loss of visitors and, ultimately, depletion in revenue for commercial sites..

Full article

Read More

Github is Now Free and That’s Great

Microsoft announced a change in GitHub pricing today, and it’s great for anyone learning to code. In the past, GitHub charged $7 a month for a private repository. But now those are free if you have three collaborators or fewer.

Full article

Read More

The Angular DevOps Series: Deploying to Firebase with CircleCI

If you’ve done anything in web development in the past year, you’ve undoubtedly heard of CircleCI and Firebase. Both technologies are becoming increasingly popular as alternatives to Jenkins, AWS, and other older platforms.

Full article

Read More

Front-End Performance Checklist 2019 [PDF, Apple Pages, MS Word]

Web performance is a tricky beast, isn’t it? How do we actually know where we stand in terms of performance, and what our performance bottlenecks exactly are? Is it expensive JavaScript, slow web font delivery, heavy images, or sluggish rendering? Is it worth exploring tree-shaking, scope hoisting, code-splitting, and all the fancy loading patterns with intersection observer, server push, clients hints, HTTP/2, service workers and — oh my — edge workers?

Full article

Read More

An Introduction to the Kubernetes

In this article, my goal is to get purpose of Kubernetes, to understand philosophy. If i need to tell a little bit, The all ways lead the dependencies. Imagine that, you've a software project. All classes are depend on each other. At this point, Dependency Injection might be solution well.

Full article

Read More

5 Hottest VS Code Themes To Use in 2019

Visual Studio Code is incredibly easy to customize, including adding some awesome looking themes. Themes can give your editor a lot of personality and make it more fun to work with. Let's take a look at some of the hottest themes to use in 2019!

Full article

Read More

Sass Techniques from the Trenches

Twitter Facebook Reddit The power of the ampersand Variables and scoping The importance of imports Mixin' it up Getting functional The selector order that placeholders mess up It’s relatively DRY It supports the "opt-in" approach, which keeps modifiers with the elements they modify Naming stuff i

Full article

Read More

Angular quicklink Preloading Strategy

A few months ago I posted an article about Guess.js. Guess.js is a powerful library for predictive prefetching of JavaScript based on analytics data for a website. The library consumes reports from an analytics source (by default Google Analytics) and builds a basic machine learning model.

Full article

Read More

Level Up Your GitHub Experience with Chrome Extensions

If you do any work in open source, you probably live for GitHub. With all the time you spend using it, you can improve your experience by leveraging a variety of browser extensions. The following is a rundown of my favorite GitHub extensions on my preferred browser, Google Chrome.

Full article

Read More

Learn JavaScript in 2019

There’s never been a better time to be a programmer. Technology isn’t slowing down. Neither will the demand for innovative solutions to solve new challenges or take advantage of new opportunities. The key differentiation in the marketplace is often the one with the better technology.

Full article

Read More

How Airbnb is Moving 10x Faster at Scale with GraphQL and Apollo

From the feedback I gathered over the following days of the conference, the good news is people were clearly excited to see product being built so fast. People walked away inspired about the future (mission accomplished!).

Full article

Read More

6 Popular CSS Frameworks to Use in 2019

Creating consistent, concise, and effective CSS can be quite a lot of work. There are so many things to consider like responsiveness, accessibility, and structure. This is exactly why CSS Frameworks exist, to take that burden off of you! Let's take a look at some of the top CSS Frameworks of 2019.

Full article

Read More

Continuous Integration and Continuous Deployment With GitLabCI

Continuous integration and continuous deployment have become significant parts of the software development process. GitLab comes with built-in continuous integration, continuous deployment, and continuous delivery support to build, test, and deploy your application.

Full article

Read More

Stop Learning Frameworks

We are developers. We need to stay up to date with technology. Every day, we learn programming languages, frameworks, and libraries. The more modern tools we know — the better. Keeping up to date with Angular, React, Vue, Riot, Ember, Knockout is fun.

Full article

Read More