Quickly get started with a react-three-fiber

Photo by Olav Ahrens Røtne on Unsplash

Today I want to talk about 3D Animation in JavaScript development. Is it possible 3D graphics in the web browser? How we can achieve that? If you are interested, let’s dig in together.

Base Concepts

WebGL(Web Graphics Library) is a cross-platform, free JavaScript API for creating 3D graphics in a web browser without plugins. When you work with WebGL, we have to describe each point, line, face, and so on. It is like a low-level system.

Three.js is a cross-browser JavaScript library used to create and display animated 3D computer graphics with components in a web browser using WebGL. Therefore, Three.js speed…

Quickly get started with a Twilio Programmable Chat

Photo by Glenn Carstens-Peters on Unsplash

I wanted to build a quick, full-featured chat feature for my React Native app. I managed to do it with Twilio Programmable Chat.

Twilio Programmable Chat makes it easy for you to add chat features into your web and mobile apps without building or scaling a real-time chat backend. Chat has all of the necessary APIs and features to integrate with your business logic to ensure you’re in control.

I searched the internet a lot to find the best way to use Twilio Programmable Chat with React Native. Unfortunately, I couldn’t find much. …

Best GitHub README Repository Tools

Photo by Caleb White on Unsplash

GitHub recently released a feature that allows you to add a README to your profile page. It’s a secret way to share your skills and projects with the community on GitHub.

You have full control over how you will present on GitHub profile. We can show visitors on your profile interesting, fun work and projects or useful contributions that you are proud of.

Create GitHub Profile README

Let’s create a GitHub profile README in 3 steps:

1. Create a new repository with the same name as your GitHub username. For example, if your username is Gapur, the repository name must be Gapur.

4 min TypeScript NPM Package

Photo by Beazy on Unsplash

As developers, We had situations when we worked or created a new framework or package reusables components, functions, etc… Sometimes everyone had an inspiration or idea for amazing projects. Why not share it with the community and make their lives easier.

Fortunately, as JavaScript developers, we have an NPM! And I will show you how to create and publish your first npm package.

Without further ado, If you haven’t written your TS based package yet, no worries, let’s do it together.

Getting Started

The first, We are going to create a new project with the following command into the console. The command…

Best Awesome Components in 2020

Photo by Le Buzz on Unsplash

Nowadays, React Native is the most popular open-source mobile application framework. React Native is developing very fast, we have to develop applications also quickly.

Because of this, the best components must be used.

After working on and reviewing React Native libraries I want to share with you my experience that will help you save time and build your applications faster.

React Navigation

Make Responsive Horizontal Carousel

Photo by ckturistando on Unsplash

In this piece, I am going to build a beautiful and effective carousel on React Native. If you don’t know what is Carousel, it is a dynamic scrolling list of elements in horizontal order, where the previous and next elements are partially visible.

At first glance, it seems complicated, fortunately, I will show you how it is easy to step by step. Let’s do magic together.

Setting up the Project

Before we get to code the carousel logic, we have to create an app on React Native. We can create up the app by running the following lines of code:

react-native init react_native_carousel cd…

Smooth Animation Header

Photo by Franck V. on Unsplash

Nowadays, Animated header is the most common design pattern in today’s apps. Animations are an important part of mobile applications. Hence I wanted to use an amazing animated header in my React Native app.

I decided to write this short piece to show how to build a header that is animated with ScrollView and Animated API. Let’s do it together.

Final Animated Header

Which is better?

Photo by Malvestida Magazine on Unsplash

We always need a modern, great, and lightweight time and date manipulation library for the JavaScript project.

If you want to save and manipulate with your time, here are 5 useful Time and Date Libraries:


Optimizing app performance

Photo by Oskar Yildiz on Unsplash

Hook is a really great feature in React. They allow you to use state and other React functions without writing a class. It optimizes our app and improves performance. Unfortunately, Performance optimizations always come with a cost to have benefits. Of course, if you use hook features properly.

To order to use Hook correctly We have to deep into hook dependencies. So I want to show you two situations of using them with useMemo and useCallback.

Referential Equality

JavaScript has weird results when compares non-primitive objects.

Is [] == ![] ?

Photo by Bruce Warrington on Unsplash

JavaScript is a great and funny language with tricky weird things. So today I am going to review the 7 weird stuff with code examples.

[] is equal ![]

Array is equal not array:

[] == ![]; // -> true
+[] == +![]; // -> true

The equality operator converts both sides to numbers to compare them, and both sides become the number 0 for different reasons.

[] == ![]; // -> 0 == 0 -> true

true is not equal ![], but not equal [] too

Array is not equal true, but not Array is not equal true too, Array is equal false, not Array is equal false too:

true == []; //…

Gapur Kassym

Software Engineer, Technical Writer #JavaScript #React #React-Native #Nodejs. Follow me on twitter https://twitter.com/GKassym

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