From Idea to App Store: Building My First iOS App With React Native

I recently got my first iPhone app accepted into the Apple App Store. It is quite exciting to be able to have a product i’ve been working on by myself now available for a whole bunch of people to download.

Full article

Read More

React.lazy, What and how to use in your app

React 16.6 is out and with it comes the new Lazy API. The Rreact.lazy function lets you render a dynamic import as a regular component. React.lazy takes a function that must call a dynamic import().

Full article

Read More

React Higher-Order Components

There’s two important things to note before we get started. First, what we’re going to talk about is just a pattern. It’s not really even a React thing as much as it is a component architecture thing. Second, this isn’t required knowledge to build a React app.

Full article

Read More

Build an Uptime Monitor in Minutes with Slack, Standard Library and Node.js — Right From Your Browser

Making sure your website or API is up and running well can be a round-the-clock job. To help in this tireless effort, we can make uptime reports and status alerts visible within the tools we frequently use, like Slack.

Full article

Read More

Understanding Higher-Order Functions in JavaScript

If you are learning JavaScript, you must have come across the term Higher-Order Functions. Although it may sound complicated, it isn’t. What makes JavaScript suitable for functional programming is that it accepts Higher-Order Functions.

Full article

Read More

Testing your React App with Puppeteer and Jest

End-to-End testing helps us to assure that all the components of our React app work together as we expect, in ways which unit and integration tests can’t.

Full article

Read More

Notes to Myself on Software Engineering

Code isn’t just meant to be executed. Code is also a means of communication across a team, a way to describe to others the solution to a problem. Readable code is not a nice-to-have, it is a fundamental part of what writing code is about. This involves factoring code clearly, picking self-explanatory variable names, and inserting comments to describe anything that’s implicit.

Full article

Read More

JWT authentication: When and how to use it

Learn when JWT when is best used, when it's best to use something else, and how to prevent the most basic security issues. JWT (JSON Web Token) is a very popular technology not without it share of controversy.  

Full article

Read More

Conditional JavaScript for Experts

Conditionals are a very important aspect of the syntax of every programming language. If you have been programming for sometime in any of the popular languages, you should already be familiar with the if..elif..else or switch conditional statements.

Full article

Read More

Git Catastrophes and Tips to Avoid Them

In this post, I'd like to highlight some git features that might be less used/known, but can end up saving your @$$ when things go south in the codebase. Fortunately, it is really hard to irrevocably mess something up with git, as long as you have the .git hidden folder in your project intact!

Full article

Read More

Lets Build Web Components! Part 1: The Standards

Component-based UI is all the rage these days. In fact it's so established that people have even started retconning old-school jQuery widgets as "jQuery Components" ;)

Full article

Read More

Introducing GitHub Actions

The software development process from conception of the idea to writing of code and finally deploying the finished product can be quite tedious at times. You need to handle a variety of things beyond just writing the code.

Full article

Read More

Desktop Progressive Web Apps

Desktop progressive web apps can be 'installed' on the user's device much like native apps. They're fast. Feel integrated because they launched in the same way as other apps, and run in an app window, without an address bar or tabs.

Full article

Read More

How to apply SOLID principles in React applications

In this article, we are going to look at the SOLID principles and how to apply them in the React. For the sake of simplicity, I will not provide the full implementation of some components. So let's begin.

Full article

Read More

How Did Angular CLI Budgets Save My Day And How They Can Save Yours

This article is based on a true story! It happened while working on the Angular NgRx Material Starter which recently started using Angular CLI budgets… Budgets is one of the less known features of the Angular CLI. It’s a rather small but a very neat feature!

Full article

Read More

Angular Authentication With JWT

Security is an important part of every web app, and devs must ensure that they design apps with secure authentication. In this tutorial, you'll learn how to implement JWT-based authentication in Angular apps with the help of a simple Express server. The full code can be found in our GitHub repo.

Full article

Read More

How browser rendering works — behind the scenes

The purpose of this article is to explain, in very simple terms, the steps your browser takes to convert HTML, CSS and JavaScript into a working website you can interact with.

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

Use the React Profiler for Performance

With React, building high performance web applications became very easy because of the framework's re-rendering on the JavaScript virtual DOM, which helps it to quickly determine the changes needed when a user event is occurring.

Full article

Read More

Version 7 of Angular — CLI Prompts, Virtual Scroll, Drag and Drop and more

The 7.0.0 release of Angular is here! This is a major release spanning the entire platform, including the core framework, Angular Material, and the CLI with synchronized major versions. This release contains new features for our tool chain, and has enabled several major partner launches.

Full article

Read More

Angular 7 Tutorial: Building CRUD Web Application

A comprehensive step by step tutorial on build CRUD (Create, Read, Update, Delete) Web Application using the New Angular 7. The Angular 7 just released a day ago, it comes with a few new feature and improvements.

Full article

Read More

Using Google Analytics with Angular

Google Analytics is a tool that helps you keep track of your User Activity. This includes how many users entered your website in a specific time-span, where those users came from, which pages they visited, etc.

Full article

Read More

Code Review Best Practices

The Internet provides a wealth of material on code reviews: on the effect of code reviews on company culture, on formal security reviews, shorter guides, longer checklists, humanized reviews, reasons for doing code reviews in the first place, best practices, more best practices, statistics on code r

Full article

Read More

Testing React Applications with react-testing-library

Have you ever had the feeling that your react component test code is just testing the UI framework and component coupling, but is no where close to mimicking the actual user behavior.

Full article

Read More

How to build a telegram bot using Node.js and Now

Serverless deployment, the intriguing topic grabbing a lot of attention from rookies and veterans alike in the tech ecosystem is finally here. In this article we'll be taking a practical approach to serverless deployment, also referred to as FaaS (Function as a Service).

Full article

Read More

Functional JS with ES6 — Recursive Patterns

Functional programming has been on the rise and is a topic that is very exciting to me. It allows me to write terse, declarative code that is easy to test and reason about. What is functional programming? I’ll defer that answer to someone with more knowledge on the subject, Eric Elliot:

Full article

Read More

Authenticate a Node ES6 API with JSON Web Tokens

In this guide, we'll be implementing token based authentication in our own node.js A.P.I. using JSON web tokens. To keep this short and relatively sweet, if you'd like to read about what tokens are and why you should consider using them, have a look at this article here.

Full article

Read More

The Ultimate Guide to Execution Contexts, Hoisting, Scopes, and Closures in JavaScript

It may seem surprising, but in my opinion the most important and fundamental concept to understanding the JavaScript language is understanding Execution Context. By properly learning it, you’ll be positioned nicely to learn more advanced topics like hoisting, scope chains, and closures.

Full article

Read More

An Introduction to Web Scraping with Puppeteer

Learn Puppeteer with me in this article. I saw a video a few days ago on DevTips where they attempted to use Puppeteer, I’ve never used it myself and thought it looked really cool. So I gave it a try and I’m sharing what I’ve learned here.

Full article

Read More

12 Factor CLI Apps

CLIs are a fantastic way to build products. Unlike web applications, they take a small fraction of the time to build and are much more powerful. With the web, you can do whatever the developer programmed. With CLIs, you can easily mash-up multiple tools together yourself to perform advanced tasks.

Full article

Read More

10 Interesting JavaScript and CSS libraries for October 2018

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

How to Automate Your Garage Door With IFTTT and Raspberry Pi

Smart home gadgets are cool but can be expensive. With a Raspberry Pi and a component or two, it’s easy and cheap to connect existing devices to the internet. Making your garage door internet-aware is a great introduction to learning how to control the real world with a Pi.

Full article

Read More

What's New in Create React App 2

Yes!! It keeps getting better, I am as excited as you are. Create-react app is the most wildly used react boiler plate there is today, it helps you focus on writing code, and then handles the build and testing for you.

Full article

Read More

Rethinking Unit Test Assertions

Well written automated tests always act as a good bug report when they fail, but few developers spend time to think about what information a good bug report needs. There are 5 questions every unit test must answer. I’ve described them in detail before, so we’ll just skim them this time:

Full article

Read More

10 Console tricks, to debug like a Pro.

Okay, I know it’s kinda like a click-bait title, but trust me you’ll be surprised by what console can do. let’s start with some basic ones. As the name suggests it will group multiple logs in one single expandable group, you can even nest them if you’d like to further group them. console.

Full article

Read More

Making a Single Page App in ye good olde JS (ES6)

Making a SPA (single page app) is all the rage these days. A SPA is much snappier, gives better UX and can be much simpler to develop and deploy.

Full article

Read More

Barcode detection in a Web Worker using Comlink

I’m a big fan of QRCodes, they are very simple and neat way to exchange data between the real world and the digital world. For a few years now I’ve had a little side project called QRSnapper — well it’s had a few names, but this is the one I’ve settled on — that uses the getUserMedia API to take live data from the user’s camera so that it can scan for QR Codes in near real time.

Full article

Read More

What’s New in Create React App 2.0 Video Series

Earlier this month Create React App 2.0 was released adding a lot of new features. Some of those features include Sass Support, CSS Modules Support, Adding SVGs as React Components, Fragment Short Syntax, and Babel Macros. In this post, I’ll be highlighting the above 5 features.

Full article

Read More

Adaptive Serving using JavaScript and the Network Information API

Possible values for effectiveType are 'slow-2g', '2g', '3g', or '4g'. On slow connections this capability allows you to improve how quickly pages load by serving lower-quality versions of resources.

Full article

Read More

Want to learn Angular? Here’s our free 33-part course by Dan Wahlin!

According to the Stack Overflow developer survey 2018, Angular is one of the most popular frameworks/libraries among professional developers. So learning it increases your chances of getting a job as a web developer significantly.

Full article

Read More

Time to say farewell to Scrum?

It’s common to see Scrum as a panacea; an answer to our prayers. We know we need to move beyond those drifting, missing the mark deliveries, those Zombie Scrum teams — and we know, with the right team and Agile Coaches, you can achieve an almost zen like flow.

Full article

Read More

How to Build Medium's Real-Time Applause Feature with Angular and Pusher

In this article you'll learn how to code real-time Angular apps with Pusher. We'll make an app that gives real-time feedback when a post is clicked—just like Medium's applause feature!

Full article

Read More

The Suspense is Killing Redux

First, that’s a rude way to put it. But I get it, the suspense is killing you — or maybe Redux. React Suspense is all about handling transitions between views that have asynchronous data requirements — which redux doesn’t even attempt to handle.

Full article

Read More

Why React16 is a blessing to React developers

Just like how people are excited about updating their mobile apps and OS, developers should also be excited to update their frameworks. The new version of the different frameworks come with new features and tricks out of the box.

Full article

Read More

JavaScript Essentials: Numbers and Math

Essentials is a series that covers the most used and important methods for X topic along with some other fundamentals. In this post, we cover Numbers and Math. It’s recommended that you know about types and just a little bit of math.

Full article

Read More

Refactoring Angular Apps – How To Keep Angular Apps Clean

We have all been there. The app that once was this little cute baby has grown to this huge monster no one wants to get near. Every day you fight this monster but it only seems to get bigger, because your project keeps feeding it with short-term optimization by focusing on the next feature or deadline.

Full article

Read More

What every front-end developer should know about change detection in Angular/React

In my pursuit to grow as a developer I spend a lot of time reverse-engineering web technologies. I’m basically a reverse-engineering addict ?. The topic that fascinates me the most is change detection. You can find this mechanism in almost any web application.

Full article

Read More

What is Kubernetes? Optimise your hosting costs and efficiency

During the last few years, the industry has experienced a shift towards developing smaller and more focused applications. It doesn’t come as a surprise that more and more companies are breaking their massive and static monoliths into a set of decoupled and independent components.

Full article

Read More

Start Performance Budgeting

If you’re building a web experience and want to stay fast, a performance budget can be critical. For success, embrace performance budgets and learn to live within them. Network & CPU limits on mobile can require asking hard questions like, “what is really important to my users?”

Full article

Read More

The 2018 DevOps RoadMap

DevOps is really hot at the moment and most of my friends, colleagues, and senior developers I know are working hard to become a DevOps engineer and project themselves as DevOps champion in their organization.

Full article

Read More