Tutorials on Duomly blog

What is Create React App?

Mon, 11 Jan 2021 06:42:26 +0000

Intro to Create React app?

Setting up a ReactJS application from scratch can be a long and complicated process. You have to think about everything, like Babel, Webpack with all the plugins, testing libraries, etc. And it can also bring some issues which can take a few hours to solve.

But fortunately, there is a fast and easy solution that can be used in lots of cases, and it’s the Create React App tool. It’s enough to install it on your computer and run the simple command everything you want to create a simple ReactJS application and start working with it.

Composition vs Inheritance in React.JS

Mon, 04 Jan 2021 06:42:26 +0000

Intro to composition vs inheritance

Welcome to the composition vs inheritance in React comparison.

If you’re a senior developer or architect, I bet you know the most popular concepts, design patterns, and how stuff works inside. But still, not many front-end devs go think so much about composition and inheritance.

It’s not an often discussed topic, and I’ve noticed not all devs can explain why they created their solution with this or this way.

List and keys in React - cheatsheet for beginners

Mon, 21 Dec 2020 06:42:26 +0000

List and keys in React intro

List and keys in React are among the most basic concepts. It may be the first scary one for beginners who just started to create their first application using the React framework. And what’s even scarier, you can’t avoid using lists because almost every application has some kind of repeatable content.

But in reality, really simple. It just needs to be explained.

That’s why in this article, I decided to explain what lists are, how to build a list in JSX, what keys are and how to fix one of the most common errors connected to list and keys you will see a lot of times in your console.

React lifecycle methods with hooks cheatsheet for everybody

Thu, 17 Dec 2020 06:42:26 +0000

Intro to React lifecycle methods

Welcome to the react lifecycle tutorial, where I will explain all the things related to the react component lifecycle methods.

You’ll learn about the four main react component lifecycle stages, when they’re fired, and what is happening inside.

Next, we will talk about the methods used during these stages, which ones we need, and which ones we should avoid.

We won’t forget about these deprecated methods, so you will know which ones you should definitely refactor in your code and don’t use anymore.

Webpack configuration - step by step tutorial on how to setup Webpack

Mon, 07 Dec 2020 06:42:26 +0000

Intro to Webpack tutorial

Webpack is a tool very often used in software development, and it’s pretty useful. For many junior and even mid developers, Webpak can be the darkest nightmare, and it was scary for me as well. By all the power, I tried to avoid setting Webpack by using tools like create-react-app to build a new ReactJS application and never have to do any changes inside the ready config, as it seemed confusing.

How to setup MongoDB in the cloud with Atlas?

Mon, 09 Nov 2020 06:42:26 +0000

Intro to setup MongoDB in the cloud with Atlas

Almost every application you are trying to build needs a database; depending on the type of data you’d like to keep inside, some developers select SQL databases like PostgreSQL or NoSQL databases like MongoDB.

Nowadays, when MERN and MEAN stacks for applications are more and more popular, many developers select MongoDB. To start a project, you’d need to set up MongoDB locally on your computer or online in the cloud. In my opinion, it’s much easier to set it up online because when the application is ready, you don’t need to move the database and avoid some issues.

How to build an Instagram clone with react js, next js and bootstrap 5 tutorial for beginners

Mon, 19 Oct 2020 06:42:26 +0000

Intro to how to build an Instagram clone with react js and next js

Hello, you will learn how to build an Instagram clone with react js and next js in today’s episode.

To build our Instagram clone template, we will use Bootstrap 5.

I’m super excited to show you all of that because it’s one of the coolest applications we will build together.

You will learn many useful things today.

How to implement redux-saga with ReactJS and Redux [TUTORIAL]

Tue, 08 Sep 2020 06:42:26 +0000

Intro to Redux setup tutorial

Very often, you can hear about the state in frontend applications, but what it exactly is? Let me explain.

State in frontend applications represents all the data stored in the application in a given time. It can be stored in different formats like objects or strings. Based on the state’s values, we can personalize the application, display, and hide certain elements.

To manage the state in modern frontend frameworks, we can use different libraries like Redux, MobX, or NgRx. The most common one is Redux, which is used mainly with ReactJS applications, although it’s possible to use it with Angular as well.

Node.js Course With Building a Fintech Banking App – Lesson 4: Login and User Authentication

Wed, 01 Jul 2020 06:42:26 +0000

In previous weeks we started a Node.js Course, where we are building a fintech banking application. In this course, we are using the Nest.js framework and Typescript.

In the first lesson of this Node.js Course, we started a project and done migrations to set up the database.

In the second and third lesson, I focused on user registration, creating a new user in the database, and displaying the proper response from the endpoint.

How to build a website with Hugo and amp tutorial

Fri, 26 Jun 2020 06:42:26 +0000

Intro to how to build a website with Hugo and amp tutorial

Today we will focus on how to build a website with Hugo and amp, next we will host it on S3.

Last episode about performance you can find here:

React.js performance tutorial

Last days we noticed our blog is growing a lot in size, and performance is going down.

As max on slow 3g, we had even 7s to LCP that punished our SEO, and visits decreased three times.

Angular Course with building a banking application with Tailwind CSS – Lesson 5: User authentication

Wed, 24 Jun 2020 06:42:26 +0000

Intro to Angular Course - User authentication

For almost one month, we are preparing an Angular course for you, and we are building a fin-tech application. Today I’m going to show you how to implement user authentication and how to use it with guards and resolvers.

Our main goal is to check if the user token is active and compatible with the user id. When it’s correct, our API will return us the user data, and the user will be able to see the dashboard. If not, the user will be redirected to the login form.

Flutter Course, building a fintech mobile app – Lesson 1: Login form

Mon, 15 Jun 2020 15:42:26 +0000

Intro to Flutter Course

Flutter is a framework to build mobile applications for Android and iOS using Dart programming language. Flutter was made by Google developers, and now it’s the main competitor of React Native.

As a front-end developer, I’ve already worked with React Native, and I have an idea of how it works, but Flutter was a mystery that I wanted to discover. So, I did, and that’s why today I’d like to show you how cool Flutter is, and how comfortable it’s to work with this tool.

Node.js course with building a fintech banking app – Lesson 3: User registration PART 2

Thu, 11 Jun 2020 15:13:03 +0000

In the previous week, I’ve published the second lesson of the Node.js Course, where we created registration and saved new users in our database.

If you would like to be updated, feel free to go back to the lesson one and follow up or get the first lesson code from our Github.

Today I’m going to refactor the code we’ve created for user registration to create a response which our API will send as a result.

Angular Course with building a banking application with Tailwind CSS – Lesson 4: User registration

Wed, 10 Jun 2020 15:18:11 +0000

For almost three weeks, we are creating an Angular 9 fintech application together, step by step.

We’ve already gone through the setting the project and creating a login form template, then we’ve created the logic for our login form, and last week we displayed user data in the template.

Today, it’s time for lesson 4, where we will handle user registration.

If you didn’t start with me, feel free to go through all the lessons until now. Or you can get the code from the previous lesson and jump straight to this lesson. Here’s a link to our Github repository for this Angular Course.

How to write a resume for IT job – Tutorial with resume example template

Mon, 08 Jun 2020 15:15:54 +0000

Intro

Today I will show you how to write a resume for an IT job.

In the few last episodes, we started focusing on learning coding from these courses:

Golang course with building a fintech banking app

Node.js course with building a fintech banking app

Angular Course with building a banking application with Tailwind CSS

Python course with building a fintech investment AI

But what next after you will master your coding skills?

Node.js course with building a fintech banking app – Lesson 2: User registration PART 1

Thu, 04 Jun 2020 15:30:21 +0000

Intro to Node.js Course – Lesson 2: User registration

In the second lesson of the Node.js Course, we are going to create a user registration.

In the previous week, I’ve published the first lesson of the Node.js Course, where we started a project using Nest.js, Nest CLI, PostgreSQL database, and Sequelize. Besides that, we managed to create migrations and set up the database.

So, if you would like to be updated, feel free to go back to lesson one and follow up or get the first lesson code from our Github.

Golang course with building a fintech banking app – Lesson 3: User registration

Tue, 02 Jun 2020 16:06:32 +0000

Intro

In the third lesson of the Golang course, I will show you how to build user registration in Golang.

In the previous lesson of the Golang course, we learned how to create REST API in Golang and how to create a user login.

URL here:

Golang course with building a fintech banking app – Lesson 2: Login and REST API

And in the Angular course, my friend Anna showed you how to build login in angular 9.

Angular Course with building a banking application with Tailwind CSS – Lesson 3: User account balance

Mon, 01 Jun 2020 19:18:15 +0000

The previous week we’ve published the second lesson of our Angular Course with Tailwind CSS, where we are building a banking app step by step.

In the first lesson, we’ve created a project using Angular CLI, installed Tailwind CSS, and started building the first component UI, the login form. If you didn’t start with us in lesson one, feel free to go back and start from scratch or just get the code from our Github.

What is CSRF attack tutorial for beginners

Fri, 29 May 2020 07:25:25 +0000

Intro

Today we will talk about what is CSRF attack.

Did you know somebody can steal your money by using just a simple image?

In this tutorial, I will show you how, and we will hack an online casino together!

In the first post about web security, we were talking about hacking a bank app by SQL Injection.

Link is here:

SQL Injection attack tutorial for beginners

Today we will focus on something else, but still dangerous, and quite easy to do.

Node.js course with building a fintech banking app – Lesson 1: Start the project

Wed, 27 May 2020 12:33:05 +0000

This article is the first lesson of our Node.js course.

The previous week, I and my friend started to build a project divided for two courses – backend with Golang and frontend with Angular 9. In the meantime, we got the idea to give you an alternative for a Golang course, and show you how to build a similar backend using Node.js.

In this article, we are going to start by setting up the Nest.js project, connecting with the PostgreSQL database and make migrations.

Python course with building a fintech investment AI – Lesson 1: Start the project

Tue, 26 May 2020 17:00:24 +0000

Intro

Today we will start the Python course and start building AI.

In the last episodes, we started the first steps to build a front-end and back-end for our fintech app.

Here are the links:

Golang course:

Golang course with building a fintech banking app – Lesson 1: Start the project

Golang course with building a fintech banking app – Lesson 2: Login and REST API

Angular course:

Angular Course with building a banking application with Tailwind CSS – Lesson 1: Start the project

Angular Course with building a banking application with Tailwind CSS – Lesson 2: Login form

Mon, 25 May 2020 13:35:26 +0000

Into to Angular Course

A few days ago, we published the first lesson of the Angular Course, where we are building frontend for the banking application you could see in the SQL injection tutorial.

In the first lesson we started with setting up the project using Angular CLI, implementing TailwindCSS, and creating a UI for the login form.

Today I’d like to go one step further and create logic for the component we’ve created. So, if you were creating the application with me in the previous part, then let’s open the code and start the app. If not, check out the Angular Course – Lesson 1: Start the project or check out our GitHub and get the code from there.

Golang course with building a fintech banking app – Lesson 2: Login and REST API

Fri, 22 May 2020 17:47:00 +0000

It’s the second lesson of the golang course.

Intro to the Golang course Lesson 2

In the last episode of the Golang course, we did a project setup and the first database migration.

Here is the URL:

Golang course with building a fintech banking app – Lesson 1: Start the project

In the last episode of the “Learn Angular 9 with Tailwind CSS by building a fintech banking app”, my friend Anna created the project setup and the first Login UI.

Angular Course with building a banking application with Tailwind CSS – Lesson 1: Start the project

Thu, 21 May 2020 10:36:43 +0000

Into to Angular Course

A few days ago we posted an SQL injection tutorial where you were able to hack the banking app which we’ve created.

We decided to create a full Angular course with Angular 9, where we’d like to teach you how to create front-end for the fin-tech application like the one in SQL injection example.

We are going to start by creating a new project with Angular CLI, installing Tailwind CSS for the UI, setting a proxy, and building Login component UI.

Golang course with building a fintech banking app – Lesson 1: Start the project

Wed, 20 May 2020 07:17:16 +0000

Intro to the golang course

It’s the first lesson of the golang course.

Do you remember the last episode where we were hacking a banking app by using a SQL Injection?

Here is the URL:

SQL Injection attack tutorial for beginners

In that episode, I’ve promised you I will teach you how to build a banking app.

We need front-end that we will build in Angular 9 and Tailwind, about that you will learn from my friend Anna.

SQL Injection attack tutorial for beginners

Tue, 19 May 2020 07:57:20 +0000

Intro

Today we will learn how to do the SQL Injection attack, and how to prevent it.

Did you know hackers steal billions of dollars every year?

Did you know almost every 30 seconds is a new hackers attack?

If we are developers, we should always care about the security of our code (at least a bit). It doesn’t matter if we do front-end or back-end, both of them are vulnerable.

React Hooks Tutorial with Examples

Thu, 14 May 2020 15:54:26 +0000

Usually, most of the front-end frameworks updates don’t bring huge changes, but it was different in February 2019, when Facebook released 16.8 version of React.js.

They introduced Hooks API, a functionality which, in my opinion, makes things easier because it allows using of functional components a similar way as we used class components until that time.

As in the beginning, Hooks API was just used by some curious developers to check what’s inside, today it’s officially recommended to use it.

13 easy ideas how to make money with programming without big effort

Thu, 14 May 2020 15:31:14 +0000

Intro

Would you like to know how to make money with programming?

Programming is not for everybody but can be very profitable for those who decide to go into the coding world.

Most of us know programmers have a good salary because a lot of huge companies need our knowledge and skills.

Anyway, it’s only one point in the ocean of methods how programmers can make money, very often much bigger money than just regular salary.

How to implement web monetization tutorial

Wed, 13 May 2020 10:49:24 +0000

This article was originally published at: https://www.blog.duomly.com/how-to-implement-web-monetization-tutorial/

Intro

Hi guys, today we will talk about web monetization.

Some of our friends or us have blogs, youtube channels, or websites.

Part of us do not do it for money but because it’s our hobby.

Anyway, in most cases, we have any cost of hosting or money that we need to pay for graphics or other maintenance.

Even if you do not plan a big business on that, probably it would be nice if there would be a bit of cash on that.

How to use Fluent UI – building a fintech dashboard tutorial

Tue, 12 May 2020 18:34:51 +0000

A few days ago while checking tech news I found a UI framework I’ve never heard about, Fluent UI by Microsoft. Driven by curiosity I decided to take a quick look at the new discovery and check out how it looks like and how it works.

On the Microsoft website, I found out that with Fluent UI I can create React.js web apps, apps for Windows, iOS, and Android. As a front-end developer, I decided to turn my full interest in web apps and that led me to the point where I saw how many beautiful, clean, components does it offer.

Git rebase tutorial and comparison with git merge

Mon, 11 May 2020 07:53:49 +0000

Intro

There are many ways of working with git, if they’re clean, and don’t do damages, probably most of them are good.

But same as space vs. tab, in the IT world is a war between fans of rebase, and fans of git merge.

There are tons of arguments about:

-Which way is better?

-Which one is cleaner?

-Which is more comfortable?

-Which one gives a cleaner git graph?

-Why it’s important, and which one is more dangerous?

CSS background image tutorial with examples

Fri, 08 May 2020 15:36:43 +0000

The background image is probably one of the CSS properties which all of us, front-end developers, used at least a few times in our careers. Most people think that there can’t be anything unusual about background-image, but after a quick research, I have a different conclusion.

There are lots of questions askes about CSS background image every day in Facebook groups and lots of unknown tricks which can help us to achieve amazing effects and make stunning apps and websites.

How to use animate css tutorial with examples

Thu, 07 May 2020 08:48:36 +0000

In this article, I’d like to show you how to use animate.css library.

A few years ago, I was working on a mobile app project where the user interface was pretty advanced, loaded with lots of movement and gradients. It was just like each of those modern mobile apps, which would like to provide the best visual experience to users.

It took me lots of time to create all the animations in CSS and make them smooth and good looking according to designer instructions. Then, I started to look for some solution that will make this task more comfortable and will give me the required result without any surprises.

CSS border with examples tutorial

Wed, 06 May 2020 15:09:31 +0000

Introduction to CSS border

Hi guys, today we will talk about… BORDERS!

The CSS border is something that you will most probably use almost every day, if you’re front-end developer, of course.

I’ve found a few useful (some more, some less, some just funny) tips and tricks that you can use in your project.

Let’s start!

If you prefer video here is the youtube version.

1. Animated CSS border

What to do when we would like to make our item more visible?

How to build an HTML table tutorial

Tue, 05 May 2020 08:04:21 +0000

When you are building a project which has some data to present, you need a good way to show the information easily and understandably. Depending on the type of data, you can select between different HTML elements.

In many cases, the table is the most convenient method to display large amounts of structured data nicely. That’s why in this article, I’d like to explain to you the structure of the table, show you how to create one, and give you a little advice when it’s a good idea to present your data as a table.

SQL Join with examples tutorial

Mon, 04 May 2020 14:43:12 +0000

Introduction

Today we’ll talk about SQL Join.

I remember when I needed a bit deeper knowledge about SQL that I’ve already had, unfortunately, that time had not.

It was a few years ago, when I wanted to get a cool role, with a nice company and cool salary, it was a simple front-end engineer role, but with knowledge of SQL.

I’ve had some SQL knowledge, at least enough to work with that on a simple level, like doing simple queries.

How to build dashboard with Bootstrap tutorial

Sat, 22 Feb 2020 08:00:19 +0000

Would you like to create websites from a ready element? Bootstrap is one of the most popular CSS frameworks. It allows us to build a beautiful UI from ready components, like navbars or forms. Bootstrap also provides a responsive design so, while using the grid properly, you don’t have to do additional styling for mobile views.

For advanced developers, CSS frameworks seem to be simple because it’s mostly about reading the documentation, but beginners sometimes may have issues building projects from Bootstrap components. That’s why I decided to create this tutorial and build a simple dashboard, with step by step explanation.

Python API tutorial

Wed, 15 Jan 2020 01:00:29 +0000

Python is one of the most in-demand programming languages in 2020. There are a lot of job offers for Python developers and lots of people who would like to learn this programming language. As we mention in one of the previous articles about learning Python, practicing knowledge is the most important.

Taking into consideration that Python can be used to build an application’s back-end, I decided to create an article, describing how to create a simple REST API using Python, Flask, and flask_restful library. I’m going to build a basic CRUD resource for the list of students. To follow this tutorial, you need Python and pip installed on your computer. To check the API, I will use Postman.

Git cheatsheet

Tue, 07 Jan 2020 14:41:17 +0000

Git is a very useful skill to have and almost necessary in many companies. Browsing job offers for software engineers, you many realize that knowing git is nearly as important as knowing an actual programming language. But still many people forget to check out how git works and what commands are responsible for what action.

When some time ago, I created a simple Git and Github tutorial for Youtube, I noticed how many people were interested in this topic.

Angular tutorial

Mon, 02 Dec 2019 11:45:51 +0000

Some time ago, I created the first tutorial about React.js where I showed you how to create an easy React.js application using an existing API and Bootstrap for styling. The positive response for this article brought me to the idea of creating a series of simple tutorials on how to build an application with the most popular front-end frameworks. To make it even more helpful for beginners and those who prefer to watch and learn, then read and learn; I also decided to add a Youtube video to every episode.

React.js performance tutorial

Mon, 25 Nov 2019 10:46:13 +0000

Building applications sometimes can be a bit challenging, especially when we need to build a fast and good-quality application.

These times it can be necessary, especially when search engines can give bonus SEO points for faster working apps, and it can help us to reduce our bouncing rate very strongly.

To help you with that, I’ve created a few hints and tips which you could use to make your app very fast.

How to pass the machine learning interview?

Thu, 18 Jul 2019 08:29:41 +0000

You can download pdf version here.

Intro to machine learning interview questions

Machine learning (ML) is a rising field. It offers many interesting and well-paid jobs and opportunities. To start working in machine learning, you should become familiar with:

mathematical fundamentals, linear algebra, calculus, optimization, probability, and statistics, etc.,
machine learning fundamentals, prepare data, validate and improve results, interpret results, recognize and avoid overfitting, etc.,
often used ML algorithms and methods, linear regression, decision trees, support vector machines, k nearest neighbors, neural networks, k-means clustering, principal component analysis and more,

What do you need to learn to become a front-end developer?

Mon, 15 Jul 2019 07:43:20 +0000

Recently, a lot of people ask what they should learn to become a front-end developer. How to learn front-end while there are so many things to learn, everything changes so fast, new technologies, new popular libraries almost once a year. When you start reading articles and news about it, you can feel lost. All these technologies React, Angular, Vue.js, jQuery, Javascript, even Bootstrap are popping up everywhere. And at this point, you probably wonder how and where to start and finally become good at it. In this article, I’ll try to answer this question, explain to you what front-end developers do on a daily basis and what steps you should take to achieve your goal, what is essential and what not so much.

How to create a chatbot in Python

Thu, 27 Jun 2019 15:39:27 +0000

Natural language processing (NLP) is one of the most promising fields of artificial intelligence that uses natural languages to enable human interactions with machines. There are two main approaches to NLP: – rule-based methods, – statistical methods, i.e., methods related to machine learning.

There are several exciting Python libraries for NLP, such as Natural Language Toolkit (NLTK), spaCy, TextBlob, etc.

A chatbot is a computer software able to interact with humans using a natural language. They usually rely on machine learning, especially on NLP. Apple’s Siri, Amazon’s Alexa, Google Assitant, and Microsoft’s Cortana are some well-known examples of software able to process natural languages.

How to create image recognition with Python?

Tue, 28 May 2019 14:18:53 +0000

Image recognition is one of the most widespread machine learning classes of problems. It aims at training machines to recognize images similarly as people do.

Image recognition belongs to the group of supervised learning problems, i.e., classification problems, to be more precise.

This article presents a relatively simple approach of training a neural network to recognize digits. This approach uses an ordinary feedforward neural network. The accuracy of the model can be further improved using other techniques.

Tutorials on Duomly blog

What is Create React App?

Intro to Create React app?

Composition vs Inheritance in React.JS

Intro to composition vs inheritance

List and keys in React - cheatsheet for beginners

List and keys in React intro

React lifecycle methods with hooks cheatsheet for everybody

Intro to React lifecycle methods

Webpack configuration - step by step tutorial on how to setup Webpack

Intro to Webpack tutorial

How to setup MongoDB in the cloud with Atlas?

Intro to setup MongoDB in the cloud with Atlas

How to build an Instagram clone with react js, next js and bootstrap 5 tutorial for beginners

Intro to how to build an Instagram clone with react js and next js

How to implement redux-saga with ReactJS and Redux [TUTORIAL]

Intro to Redux setup tutorial

Node.js Course With Building a Fintech Banking App – Lesson 4: Login and User Authentication

Intro to Node.js Course - Login and User Authentication

How to build a website with Hugo and amp tutorial

Intro to how to build a website with Hugo and amp tutorial

Angular Course with building a banking application with Tailwind CSS – Lesson 5: User authentication

Intro to Angular Course - User authentication

Flutter Course, building a fintech mobile app – Lesson 1: Login form

Intro to Flutter Course

Node.js course with building a fintech banking app – Lesson 3: User registration PART 2

Angular Course with building a banking application with Tailwind CSS – Lesson 4: User registration

How to write a resume for IT job – Tutorial with resume example template

Intro

Node.js course with building a fintech banking app – Lesson 2: User registration PART 1

Intro to Node.js Course – Lesson 2: User registration

Golang course with building a fintech banking app – Lesson 3: User registration

Intro

Angular Course with building a banking application with Tailwind CSS – Lesson 3: User account balance

What is CSRF attack tutorial for beginners

Intro

Node.js course with building a fintech banking app – Lesson 1: Start the project

Python course with building a fintech investment AI – Lesson 1: Start the project

Intro

Angular Course with building a banking application with Tailwind CSS – Lesson 2: Login form

Into to Angular Course

Golang course with building a fintech banking app – Lesson 2: Login and REST API

Intro to the Golang course Lesson 2

Angular Course with building a banking application with Tailwind CSS – Lesson 1: Start the project

Into to Angular Course

Golang course with building a fintech banking app – Lesson 1: Start the project

Intro to the golang course

SQL Injection attack tutorial for beginners

Intro

React Hooks Tutorial with Examples

13 easy ideas how to make money with programming without big effort

Intro

How to implement web monetization tutorial

Intro

How to use Fluent UI – building a fintech dashboard tutorial

Git rebase tutorial and comparison with git merge

Intro

CSS background image tutorial with examples

How to use animate css tutorial with examples

CSS border with examples tutorial

Introduction to CSS border

1. Animated CSS border

How to build an HTML table tutorial

SQL Join with examples tutorial

Introduction

How to build dashboard with Bootstrap tutorial

Python API tutorial

Git cheatsheet

Angular tutorial

React.js performance tutorial

How to pass the machine learning interview?

Intro to machine learning interview questions

What do you need to learn to become a front-end developer?

How to create a chatbot in Python

How to create image recognition with Python?