Image for post
Image for post

Let’s take a look at how we can easily change our third-person character to a first person with a simple camera position change

… or you could just create a simple 3d-person Unreal project, and start from a scratch.

What we will be implementing (gif):


Image for post
Image for post

Let’s find out how we can implement a simple character interaction with a door mesh with some simple animation using Unreal engine 4.


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…


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


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…


Image for post
Image for post

Let’s take a look at some Strategy patter examples

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):

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