Log In

Blog

Lazy loading with Angular

We are going to show 3 ways to lazy load modules in our angualr app. Other then the router, we can also use dynamic import for lazy loading. This article will show how to lazy load not only entire pages with the router but also lazy load part of a page that is conditionaly inserted.

Interview questions on TS & JS

As someone that interviewed a lot of candidates and someone that also heard what companies ask during their interviews I want to summerise common interview questions. This article will explain the questions and also provide answers. The questions will be on JS and Typescript

Angular - Reactive forms VS Template driven forms

Angular provides us a lot of tools for dealing with forms in our web application. There are two common approach to how to build forms with angular, one approach is using angular templates as our main tool which is called Template Driven Forms, The second way is a more declarative way using Reactive Forms. This tutorial will show how to use them both and which approach to use.

Angular - Component communication and lifecycle hooks

The new angular has a component based architecture which means an angular application is a tree of UI components. A tree of components will require us to communicate between them. In this article we will go over the various ways of communicating between components, during this we will also go over the component lifecycle hooks.

React Native - Routing

Our mobile app will be divided to different screens. How can we route our mobile app between different screens while still using the react-router package and dynamic routing.

Angular - Custom Web Components

When we develop in angular, we are creating new html tags that we can use in angular templates and they will map to angular components. Did you know you can actually create custom tags that will map to a ui component in vanilla js? We don't need a framework to acheive this, and angular can help us turn our angular components to native custom web components that can be used in a non angular apps. We are simply creating a new tag that will map our angular components and embed it in a page without angular. This tutorial will show you how to do so.

Angular - Change Detection

To improve the performance of our angular app, we first need to understand how change detection is working. In this tutorial we will understand Change Detection in angular along with the default strategy and OnPush strategy. We will also cover what cause Change Detection in the OnPush strategy.

React Native - Common Components

The building blocks of a react native mobile application is the components we can use in the react-native library. In this article we will go over the popular components you can use to build your mobile app with react native.

Angular - Redux - @ngrx/store

When creating a large frontend application there is no better architecture then to use Redux. Redux is a state container library which turns our entire app to a predicatable state machine. This means better architecture, easier component communication, easy to scale our app and easy to test it. With @ngrx/store we can add redux architecture to our app while utilizing the benefits of RXJS. In this article we will learn how to embed @ngrx/store and redux with our angular app.

React Native - react-native-elements

react-native-elements is a well maintained open source library that provide us with high polished react native cross platform components to create our react native app. In this tutorial we will use this library and create a Todo application using react native, react-router-native, rxjs and react-native-elements.

React - Flow introduction

Flow is a JS static type checker which allows us to add some static features to js dynamic nature. When using create-react-app to bootstrap our react application, we will notice that Flow is installed for us and we can develop using flow. In this article we will cover the main features of flow and how to add static types to our react app.

React - Server Side Rendering

Our web application has to load in less than 3 seconds, otherwise we will lose more than 50% of our users according to google. We can speed our application by presenting the user with a full HTML using Server side rendering to transform our react components to HTML. Read all about it here...

React - Forms

Using forms is our main weapon to grab user input in our web applications. React is offering basic tools to grab user input but it is often the case where we need a stronger weapon. In this article we will cover the 2 popular packages in react for dealing with forms one is redux-form and the other is Formik. We will also show how to perform validation using Yup.

React - Testing

In this lesson we will learn how to write unit tests for our components. We will combine Jest with Enzyme and create mock to fake server response.

React - Flux

Flux is a uni directional data flow application architecture that facebook is using along with React. With flux we can have application state shared among our react components. In this lesson we will learn how to combine react with flux.

React - create-react-app

In this lesson we will learn how to bootstrap a new react application using facebook's create-react-app cli tool. We will learn about webpack and how to include image files and font files, we will also learn best practices regarding arranging our project files. We will learn how to configure the default environment and run the tests using karma, mocha and enzyme.

Angular - @ngrx/effects - @ngrx/router-store - @ngrx/entity

In this lesson we will learn about how to leverage your @ngrx/store with additional packages provided by ngrx. Those packages helps us solve common problems in our redux angular application. @ngrx/effect helps us remove sideeffects and decouple some actions from our components. @ngrx/entity helps us manage collections in our state. @ngrx/router-store helps us include routing action and state in our store. Click to read more about those packages.

React Native - Getting Started

Our goal in this article is to get started on working with react native. We will aim to create an hello world app, run that app on a simulator, run that app on a device.

Meteor - Introduction

In this article we will create a small todo application using Meteor and React. We will explore the benefits and downside of meteor

Lerna - Introduction

Maintaining a mono repository comes with a set of challanges. How can we keep all our packages in one place, publish them and create dependencies between the packages. In this tutorial we will see how we can maintain a professional mono repository using Lerna.

Next.js - Introduction

The number one framework for React applications that load with Server Side Rendering and therefore super fast. In this article we we learn about Next.js, create a new application, deal with styles, deal with routing in our Next.js app and how to create ajax requests for our initial load.

React Native - Styling and styled components

In this lesson we will learn how to properly style our React Native application. We will learn how to create private component styles and global app styles components and we will use a popular library called styled-components to achieve our goal.