Let’s take a look at how we can create a popup Google Chrome extension using React, TypeScript and craco npm package

Image for post
Image for post

What will be covered in this story:

  • 1. What are the extensions?
  • 2. Create React app
  • 3. Manifest.json file
  • 4. Popup width and height restrictions
  • 5. Retrieving active tab’s URL
  • 6. Manipulating DOM content (content scripts)
  • 7. Overriding Create React App configuration

What are the extensions?

If you don't know what is the best solution for you, you can check here:

In this story, we will be creating a popup extension, but you can check about other types: popup, tooltip, omnibox, and context menu. To know more you can check this link :

2. Create React app

We will start from a TypeScript React project created with the use of the create-react-app CLI command:

npx create-react-app my-app --template…


Image for post
Image for post

Let’s take a look at how we can make our Express.js Server code cleaner with use of the Typescript Method Decorators.

What will be covered in this story:

  1. Prerequisites. Creating Express Typescript project
  2. Wrapping Express API Route with Typescript Method Decorator
  3. Async Method Decorator
  4. Adding Logging Decorator
  5. Adding Authentication Decorator
  6. Codesandbox Playground

1. Prerequisites. Creating Express Typescript project

Before we will start exploring Express.js with Typescript Decorators examples, we will create a simple Typescript Node.js project with Express.js and some additional npm packages that will be in use in our work. Let’s get started.

First, create an empty folder and initialize npm project by running npm init -y in the root directory: (-y flag means that you are answering yes to all npm…


Image for post
Image for post

Let’s take a look at the Typescript Decorators that provide a way to add both annotations and a meta-programming syntax for class declarations and members.

⚠️ NOTE Decorators are an experimental feature that may change in future releases.

What will be covered in this article:

  1. Prerequisites
  2. What is Decorator
  3. Simple examples
  4. Decorators in depth

1. Prerequisites

Before we start exploring Typescript Decorator examples, I’ll be using an empty Node.js typescript project with no additional packages, lints, etc.

All we will need is a typescript in our dev dependencies in the package.json file:

First, create an empty folder:


Image for post
Image for post

Let’s take a look at several ways of how you could run a single Typescript file in the WebStorm IDE.

What will be covered in this article:

  • The easiest way (without installing the npm package)
  • Launching file with the use of the script
  • Creating “Run Active” Configuration

Prerequisites

For running our Typescript files, we will be using the ts-node npm package. In some scenarios, you will not be needed to install the package locally

The easiest way

If you need to run one file and see the results, you don’t need to add ts-node to your dev dependencies.

Let’s take a look at the simple example: currently, we have a single .ts file in our project examples/User.ts


Image for post
Image for post

Let’s take a look at some Strategy patter examples

Most of the time you will see some pattern definition, explanations, conditions, pitfalls, etc, and only after that — an example. I would like to break this chain and to show you some simplest concrete examples first, and after that — some theory.

UML


Image for post
Image for post

Here we will be talking about Flutter plugging creation, Flutter → Android → Flutter communication, and after that, we will be creating our own native Android notification with attaching it to our Flutter project.

What will be covered in this article:

  • Creating Flutter Plugin project
  • How Flutter plugin works
  • The Big picture
  • Implementing native notification

Result:


Image for post
Image for post

This article will cover the basics of the D3 library, with step-by-step guide of Bar chart implementation.

What will be covered in this article:

  • Prerequisites
  • What we will be implementing?
  • What is SVG?
  • What is D3?
  • D3 DOM manipulations
  • How to create a Bar chart step-by-step:
  • Step 1. Creating SVG element
  • Step 2. Adding JSON data to the project
  • Step 3. Fetching data
  • Step 4. Adding Y-axis
  • Step 5. Adding X-axis
  • Step 6. Modifying X-Axis text label styles
  • Step 7. Adding animated bars to the chart
  • Step 8. Adding labels to the bars

Prerequisites

For this article, you will not need any third-party libraries/frameworks as React.js/Angular/Vue, etc. …


Image for post
Image for post

React DnD is a set of React utilities to help you build complex drag and drop interfaces . We will take a look on it’s basic capabilities with implementing our own kanban board.

What will be covered in this article:

  • Prerequisites
  • Installation
  • Implementing draggable item
  • Implementing droppable item
  • Creatin kanban board
  • Adding multiple draggable items
  • Make items sortable in the column
  • Mobile version of drag and drop
  • Refactor before adding drop restrictions
  • Adding drop restrictions

Before we will start our journey, let’s see what we will get at the end (gif):


Image for post
Image for post

You can let your users authenticate with Firebase using their Facebook accounts by integrating Facebook Login into your app. You can integrate Facebook Login either by using the Firebase SDK to carry out the sign-in flow, or by carrying out the Facebook Login flow manually and passing the resulting access token to Firebase.

First, we will need to add a new Application on our “Facebook for Developers” environment. If you have never done it before — no worries, I will guide you step by step.

1. Go to “Facebook for Developers” page

2. Click on “Get started” if you don't have an…


Image for post
Image for post

The Admin SDK lets you interact with Firebase from privileged environments to perform actions like:

  • Read and write Realtime Database data with full admin privileges.
  • Programmatically send Firebase Cloud Messaging messages using a simple, alternative approach to the Firebase Cloud Messaging server protocols.
  • Generate and verify Firebase auth tokens.
  • Access Google Cloud Platform resources like Cloud Storage buckets and Cloud Firestore databases associated with your Firebase projects.
  • Create your own simplified admin console to do things like look up user data or change a user’s email address for authentication.

What will be covered in this article:

  • Adding Admin SDK
  • Initializing Admin SDK
  • First admin Function
  • Authorization

Adding Admin SDK

To use Admin SDK, you need to add firebase-admin npm package to your project…

About

Artem Diashkin

Java, Spring, Node.js, AdonisJs, React.js and Flutter developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store