Forem: MINHCT

Exploring Google’s Gemma-2 Model: The Future of Machine Learning and Application Integration

MINHCT — Mon, 01 Jul 2024 05:56:59 +0000

In recent developments, Google has unveiled the Gemma-2 model, a significant step forward in the field of machine learning. This blog post will define what Gemma is, distinguish it from Google’s previous Gemini model, and explore the practical applications of Gemma in real-world tasks.

👉 What is the Gemma Model?

The Gemma-2 model is the latest innovation in Google’s suite of machine learning tools. Designed to enhance natural language understanding and generation, Gemma-2 utilizes advanced neural network architectures to deliver highly accurate and contextually relevant outputs. It is built on the principles of deep learning and leverages vast amounts of data to continually improve its performance.

Gemma is currently available in two sizes: 9B and 27B (parameter sizes), and each model has two variants, base (pre-trained) and instruction-tuned.

Google has filtered out personal information and other sensitive data from training sets to make the pre-trained models safe and reliable.

👉 Built for developers and researchers

Getting started with Gemma is straightforward due to its integration with popular tools like Hugging Face Transformers, Kaggle, NVIDIA NeMo, and MaxText. Deployment on Google Cloud is also simple through Vertex AI and Google Kubernetes Engine (GKE). Additionally, Gemma is optimized for AI hardware platforms, including NVIDIA GPUs and Google Cloud TPUs.

👉 Gemma vs. Gemini

Gemini is available to end customers through Web, Android, and iOS apps, while Gemma models are for developers. Developers can access Gemini via APIs or Vertex AI, making it a closed model. Gemma, being open-source, is accessible to developers, researchers, and businesses for experimentation and integration (through HuggingFace, Kaggle, …).

👉 Additional Information

The company also plans to release more variants in the future as they expand the Gemma family such as CodeGemma, RecurrentGemma and PaliGemma — each offering unique capabilities for different AI tasks and easily accessible through integrations with partners like Hugging Face, NVIDIA and Ollama.

👉 How to use and fine-tuning Gemma with your own applications

1️⃣ Setup

Select the Colab runtime

To complete this tutorial, you’ll need to have a Colab runtime with sufficient resources to run the Gemma model. In this case, you can use a T4 GPU:

In the upper-right of the Colab window, select ▾ (Additional connection options).
Select Change runtime type.
Under Hardware accelerator, select T4 GPU.

2️⃣ Gemma setup

Before we dive into the tutorial, let’s get you set up with Gemma:

Hugging Face Account: If you don’t already have one, you can create a free Hugging Face account by clicking here.
Gemma Model Access: Head over to the Gemma model page and accept the usage conditions.
Colab with Gemma Power: For this tutorial, you’ll need a Colab runtime with enough resources to handle the Gemma 2B model. Choose an appropriate runtime when starting your Colab session.
Hugging Face Token: Generate a Hugging Face access (preferably write permission) token by clicking here. You'll need this token later in the tutorial.

3️⃣ Configure your HF token

Add your Hugging Face token to the Colab Secrets manager to securely store it.

4️⃣ Instantiate and Fine-tuning the model

The code for Instantiate and fine-tuning the model is extensive and is therefore included in this notebook. Please refer to it for detailed instructions and reference.

👉 Conclusion

The full notebook for this article is available here.

If you want to find more interesting content like this from me, please don’t hesitate to visit my Portfolio Website and GitHub.

Lastly, if this post helped you stay up-to-date with technology or was useful in anyway, please leave me a 👏. It means a lot to me 🥰.

Feel free to connect with me on LinkedIn for more updates and content!

What’s new in CSS and UI: I/O 2023 Edition

MINHCT — Mon, 15 May 2023 15:57:57 +0000

The past few months have ushered in a golden era for web UI. New platform capabilities have landed with tight cross-browser adoption that support more web capabilities and customization features than ever.

Here are 5 of the most exciting and impactful features that landed recently or are coming soon that I found most fascinating:

👉 Style Queries

The container query specification also allows you to query the style values of a parent container. This is currently partially implemented in Chrome 111, where you can use CSS custom properties to apply container styles.

The following example show us how to use style queries.

Code pen example: https://codepen.io/web-dot-dev/pen/KKxzYQx

This is just the beginning for style queries. In the future, we’ll have Boolean queries to determine if a custom property value exists and reduce code repetition, and currently in discussion are range queries to apply styles based on a range of values. This would make it possible to apply the styles shown here using a percent value for the chance of rain or cloud cover.

You can learn more and see more demos in blog post on style queries.

👉 :has()

Speaking of powerful, dynamic features, the :has() selector is one of the most powerful new CSS capabilities landing in modern browsers. With :has(), you can apply styles by checking to see if a parent element contains the presence of specific children, or if those children are in a specific state. This means, we essentially now have a parent selector.

Building on the container query example, you can use :has() to make the components even more dynamic. In it, an item with a "star" element gets a gray background applied to it, and an item with a checked checkbox a blue background.

But this API isn’t limited to parent selection. You can also style any children within the parent. For example, the title is bold when the item has the star element present. This is accomplished with .item:has(.star) .title. Using the :has() selector gives you access to parent elements, child elements, and even sibling elements, making this a really flexible API, with new use cases popping up every day.

To prevent rendering performance slowdowns in large DOM trees, we recommend that you scope this selector as closely as possible. For example, using :has() to check for matches on the root html element would be slower than checking for matches in a nav bar or in a card element with a smaller tree.

👉nth-of syntax

The web platform now has more advanced nth-child selection. The advanced nth-child syntax gives a new keyword (“of”), which lets you use the existing micro syntax of An+B, with a more specific subset within which to search.

If you use regular nth-child, such as :nth-child(2) on the special class, the browser will select the element that has the class special applied to it, and also is the second child. This is in contrast to :nth-child(2 of .special) which will first pre-filter all .special elements, and then pick the second one from that list.

Code pen example: https://codepen.io/web-dot-dev/pen/oNMRaQq

👉 Dynamic viewport units

One common problem web developers face today is accurate and consistent full-viewport sizing, especially on mobile devices. As a developer you want 100vh (100% of the viewport height) to mean “be as tall as the viewport”, but the vh unit doesn’t account for things like retracting navigation bars on mobile, so sometimes it ends up too long and causes scroll.

To resolve this issue, they now have new unit values on the web platform, including:

Small viewport height and width (or svh and svw), which represent the smallest active viewport size.
Large viewport height and width (lvh and lvw), which represent the largest size.
Dynamic viewport height and width (dvh and dvw).

Dynamic viewport units change in value when the additional dynamic browser toolbars, such as the address at the top or tab bar at the bottom, are visible and when they are not.

👉 Nesting

CSS nesting, something folks love from Sass, and one of the top CSS developer requests for years, is finally landing on the web platform. Nesting allows developers to write in a more succinct, grouped format that reduces redundancy.

You can also nest Media Queries, which also means you can nest Container Queries. In the following example, a card is changed from a portrait layout to a landscape layout if there’s enough width in it’s container:

The layout adjustment to flex occurs when the container has more (or equal to) 480px of inline space available. The browser will simply apply that new display style when the conditions are met.

For more information and examples, check out our post on CSS nesting.

👉 Scoped CSS

CSS scoped styles allow developers to specify the boundaries for which specific styles apply, essentially creating native namespacing in CSS. Before, developers relied on 3rd party scripting to rename classes, or specific naming conventions to prevent style collision, but soon, you can use @scope.

Here, we’re scoping a .title element to a .card. This would prevent that title element from conflicting with any other .title elements on the page, like a blog post title or other heading.

You can see @scope with scoping limits together with @layer in this live demo: https://codepen.io/web-dot-dev/pen/MWPVGPL

😘 Conclusion

Keep up with all the latest landings in CSS and HTML right here on developer.chrome.com and check out the I/O videos for more web landings.

If you want to find more interesting contents like this from me. Please don’t hesitate to visit my Portfolio Website and GitHub link for it.

And lastly if this post helped you keep up to date with technology or at least helped you a little bit, please leave me a 👏. That means to me a lot 🥰.

Thank you very much and have a good day😍.

Top 4 JavaScript Notification Libraries

MINHCT — Tue, 11 Apr 2023 13:29:26 +0000

JavaScript notification libraries make developing notifications for web application much simpler. However, choosing one is challenging since each library has unique features.

In this article, I will discuss 4 popular JavaScript notification libraries that you can use to improve use experience and keep users informed about changes in your web app.

1. SweetAlert

SweetAlert is a gorgeous notification library you can use to replace built-in alert function in your JavaScript applications. You can include buttons and icons, alter the text’s color, and even add alerts that adjust in response to user clicks.

Installation

npm install --save sweetalert

yarn add sweetalert

2. React-Toastify

React-Toastify is one of the best React toast notification libraries available. You can use it to add toasts to your application within 10 seconds. In addition, it has some amazing features that will attract many developers.

Installation

npm install --save react-toastify

yarn add react-toastify

3. Notie

Notie is another widely used JavaScript notification library free of dependencies. You can use it to create alerts, confirmation prompts, input prompts, data selection prompts, and more.

Installation

npm install notie

4. Push.js

Installation

npm install push.js --save

In conclusion 😘

In this article, I discussed 4 JavaScript notification libraries and their unique features. I hope this list will help you choose the best notification library for your project.

You can refer to my personal website and GitHub repo to find more interesting contents like this.

Thank you for reading and do not forget to leave me a like 👋 if this article was useful to you, that means to me a lot 💘.

Spell Check on Your Linux Terminal

MINHCT — Mon, 23 Jan 2023 15:21:06 +0000

Hi everyone, it’s me again. In this article, I will guide you guys on how to check spelling right into our Linux terminal. The advantage for this is that we don’t need the internet to use some online tools like Grammarly or google translate… Cool, right? So, let’s jump into it.

How to use spell check in Linux

Well in order to do this, we will use the package name aspell.

Aspell is an interactive spell checker which checks the spelling via standard input or by reading a specific file. Also, it can read and check spelling in markdown or HTML files too.

To check if your terminal is currently having aspell or not, run this command.

aspell --help

If you encounter some error, then definitely you do not have it at the moment. Don’t worry, run this command to install it to your terminal.

sudo apt install aspell -Y

How To Use Aspell to Check the Spelling of Word one-by-one?

Super straightforward, all you need to do is pass this line of code to your terminal then type the word that need to be checked.

aspell -a

For example

As you can see, when I type the wrong word helo, aspell automatically recommend for us all the correct word that related to helo. In this case, hello is the correct one.

How to Check the Spelling of a Word from a File

Simply execute this command

aspell -c [fileName]

For example, let spell check a file name index.txt.

aspell -c index.txt

The following screen will display to your terminal.

As you can see, each incorrect word will be highlighted by aspell, to correct that wrong word, simply press the number of word that we want to replace. Number 1 is the best choice for this usecase.

Note that the second incorrect word will be selected next, and you can do the same with the above example.

How to Check Spelling on Other Files?

Like I mentioned before, aspell can be used for other files such as HTML or markdown… All you need to do is execute this command line.

aspell check --mode=[mode_type] [file_name]

The supported modes are none, url, email, markdown, html, tex, texinfo, and nroff.

Let’s see a quick example of fixing the spelling mistakes on a markdown file.

aspell -c --mode=markdown spellcheck.md

🧡 Conclusion

And that all for this blog, if this was helpful to you, please leave me a like👋 and follow me 😘. That will help me a lot.

If you want more exciting content like this, then you can refer to my portfolio website or my Github for more detail 😎.

Multi-Line Truncation with Tailwind CSS

MINHCT — Thu, 19 Jan 2023 10:55:15 +0000

Hi there, in this article I’ll show you guys how to truncate a text using an official Tailwind CSS plugin named line-clamp. Let jump into it.

Let assume we have 3 cards which look like this.

As you can see, their text length is not the same which is generally not what we want. So, in order to solve this, we could use the default truncate utility in Tailwind CSS. Let have a look how our card gonna looks like if we use this default property.

Well, our text now just has one line, and all the overflow text was hidden. What happened if we want our text show the first 3 lines and then truncate the other lines. Bad news that we cannot do it with the default truncate in Tailwind CSS, but recently Tailwind has introduced to us an official plugin named line-clamp which can help us to achieve what we want above. Now let has a look of how to use it.

First, we need to install that plugin via npm, note that your computer must install nodejs to use it.

npm install -D @tailwindcss/line-clamp

Then add the plugin to your tailwind.config.js file.

And that it, now we can replace the truncate class with line-clamp-{n}. In our case, we want the text to show its first three line so it must be line-clamp-3. See the result below.

Yup we have done it. In case you guys want to show 5 lines of text then hide it just type line-clamp-5.

😎 Conclusion

There are many cool plugins left in Tailwind CSS, you can refer to here to have a look at it.

If this post was useful to you, please leave me a like 👋 and follow me, that help me a lot 😘.

Thank you so much for reading this, if you want more interesting topic like this you can visit my portfolio website or my GitHub repository.

40 Essential Linux Commands That Every Developer Should Know

MINHCT — Sun, 15 Jan 2023 15:43:36 +0000

Linux is a family of open-source Unix operating systems based on the Linux Kernel. They include Ubuntu, Fedora, Debian, openSUSE, and Red Hat.

When operating Linux, you need to use a shell — a program that gives you access to the operating system’s services. Most Linux distribution use a graphical user interface (GUI), making them beginner — friendly.

However, I recommend utilizing the command-line interface (CLI) since it’s quicker and offers more control.

So, in case you want to utilize Linux, learning the command utilities or commands will go a long way. For that reason, in this article I will discuss the 40 basics commands to help you guys use your own Linux effectively.

🤷‍♂️ What is a Linux Command?

A Linux command is a program or utility that runs on the CLI — a console that interacts with the system via texts and processes.

Here is what Linux command look like

commandName [option(s)] [parameter(s)]

🕵️‍♂️ The 40 Most Commonly Used Linux Commands

👍 sudo command

Short for superuser do, sudo is one of the most widespread basic Linux commands that lets you perform tasks that require administrative or root permission.

sudo [command]

👍 pwd command

Use the pwd command to find the path that you are currently working in.

pwd

👍 cd command

To navigate through the Linux files and directories, use the cd command to solve this task. Depending on your current location, it requires either the full path or the directory name.

cd [path/directory]

👍 ls command

The ls command lists all files and directories inside your current path (include all the hidden folder or file if you are using flag -a)

ls

👍 cat command

Concatenate, or cat is one of the most frequently used in Linux commands. It lists and writes file to the standard output. In simple term, we print the content inside that file to our terminal.
cat [fileName]

👍 cp command

Cp stand for copy, what is does is copy files or directories and their contents. In this case, it will copy all the contents inside file 1 to file 2.

cp file1 file2

👍 mv command

The primary use of this command is to move and rename files and directories. In this case, it will rename the file 1 to file 2.

mv [file1] [file2]

👍 mkdir command

Use the mkdir to create one or multiple directories at once. But note that the use who executes this command must have root or administrative permission.

mkdir [folderName]

👍 rmdir and rm -r command

To permanently delete an empty folder, use the rmdir command to achive this. Now in order to delete a folder which is not empty, we can use the latter command.
rmdir [emptyFolderName]

rm -r [notEmptyFolderName]

👍 rm command

This command is used to delete a file inside a specific directory.
rm [fileName]

👍 touch command

The touch command allows you to create an empty file.

touch [fileName]

👍 grep command

Locate command can find a file in the database system. In this example, the command will search for blue in note.txt.

grep blue note.txt

👍 df command

Use the df command to report the system's disk space usage, show in percentage and kilobyte (KB).

df -h

👍 du command

If you want to check how much space a file or directory takes up, use the du command.
du [file/directory]

👍 head command

The head command allows you to view the first ten lines of a specific file.

head [fileName]

👍 tail command

Opposite to the head command, the tail views the last 10 lines inside a file.

tail [fileName]

👍 diff command

Short for different, the diff command compares two contents of a file line by line. After analyzing them, it will display the parts that do not match.

diff [file1] [file2]

👍 tar command

The tar command archives multiple files into a TAR file - a common Linux format similar to ZIP.

tar [achiveFile] [fileBeArchived]

👍 chmod command

chmod is a common command that modifies a file or directory's read (r), write (w), execute (e) permission. In Linux, each file is associated with three user classes - owner, group and others.

chmod [permission] [fileName]

👍 chown command

The chown command lets you change the ownership of a file, directory to a specified username.

chown [owner]:[group] [fileName]

👍 jobs command

A job is a process that the shell starts. The jobs command will display all the running processes along with their statuses.

jobs [jobID]

👍 kill command

Use the kill command to terminate an unresponsive program manually.
To kill a prgram, you must know its process identification number (PID). If you don't know the PID, run the first command to do it.

ps ux

kill [PID]

👍 ping command

The ping command is one of the most used basic Linux commands for checking whether a network or server is readable.

ping [IP/hostName]

👍 wget command

This command line lets you download the files from the internet using HTTP, HTTPS and FTP protocols.

wget [url]

👍 uname command

The uname or unix name command will print detailed information about your Linux system and hardware.

uname

👍 top command

The top command in Linux Terminal will display all the running processes and a dynamic real-time view of current system. It sums up the resource utilization, from CPU to memory usage.

top

👍 man command

The man command provides a user manual of any commands or utilities user can use in Terminal, including the name, description and options.

man [commandName]

👍 echo command

The echo command is a built-in utility that displays a line of text or string using the standard output.

echo [string]

👍 apt-get command

apt-get command line tool for handling Advanced Package Tool (APT) in Linux. It lets you retrieve information and bundles from authenticated sources to manage, update, remove and install software and its dependencies. Think APT like npm in NodeJS.

apt-get [command]

💕 Conclusion

Linux command let you perform basic and administrative tasks quickly and effectively from the Terminal.
Learning Linux basic command is essential to interact with your machine.

I hope this article has helped you learning Linux command. If you have any question, do not hesitate to drop a comment below 😉.

Again, thank you very much for giving this blog a read and don't forget to leave me a clap 👏 and follow me for more interesting content like this 😘.

In case you want to find more information about me, you can visit my portfolio website or my GitHub profile 💛.

ReactJS — Complete roadmap

MINHCT — Thu, 12 Jan 2023 05:55:16 +0000

Web development is a fascinating area to explore, learn and understand about. But learning without a specific roadmap can lead to many dangers that lead to bad consequence. That why in this article, I’ll give you a roadmap for learning ReactJS, one of the best UI frameworks. If you are thinking of starting ReactJS and looking to get a step-by-step approach, this article is for you

ReactJS (aka React) is an open-source JavaScript-based user interface library. It is insanely popular in web development communities today. Also, if you are a ReactJS developer who is wondering what advance topic to tackle next, give this article a read.

Why do you need a roadmap to learn React?

Learning something new does not have to be very difficult. If you have a map or a guide that lets you know where you have to move next, then things much be smoother for you.

It may also help you decide on alternative routes, how far to get a stretch, and when to pause.

Keep in mind that you may feel a bit overwhelmed looking at this roadmap the first time. But no worry, you don’t need to learn all of these in a specific time, just take it slow since everything need time to be completed. I have spent a lot of time to know about these concepts so just relax and enjoy yourselves ok, just remember that there is no fast way led to success😁.

As ReactJS is very popular, you may find some resemblance here many other suggested roadmaps out there. But they aren’t exactly the same.

Breaking the roadmap down into small phases

You’ll need to be familiar with a few things (other than basic JavaScript knowledge) to accelerate your React learning at full speed.

✈ Git Version Control

Git is a version control tool that helps you manage your source code better. It doesn’t have a direct relationship with ReactJS or any programming languages. But instead, it helps if you learn its basic so you can leverage of the development ecosystem.

Git is easy to learn when you focus on a few fundamental things like:

How to create a repository
How to stage/unstage your changes
How to commit your change to a specific repo
How to push code to the remote repo
How to resolve when conflict happen

Along with GIT, you will also need to know how to use a Git-based repository management service like GitHub.

🚓 HTML

HTML provide the structure of a web page. You will need to use the HTML structure in a new syntax called JSX when you code in ReactJS.

If you wonder do I need to master all HTML concepts, the answer is you don’t instead all you need to know is just a basic thing about HTML such as all the most-used tags and its purpose and that all.

🚍 CSS

When it comes to CSS, the scope is sky-high. However, as HTML you just need to focus on some basic CSS concepts like:

Box model
Flexbox layout
Grid layout
Position
Pseudo-classes
Basic selector
Class
Id

🏍 JavaScript

I should warn you that this is the biggest obstacle during your learning process :))

Just kidding, JS is huge but in order to learn ReactJS good you need to know the following concepts from JS:

Variable declaration (let, const, var)
Template Literals
Functions & Arrow Functions
Object Destructuring
Spread and Rest operators
Module Import and Export
A bit of knowledge about asynchronous concept (Promise, Callback or Async/Await)

🚀 How to Deploy, Host and Make your App Public

It won’t be fun if your cool project just can only be used by you right. So, you should know how to deploy the app and make it visible to the real world.

Tools like Vercel or Netlify make it easy to deploy your project just within a few second.

If you want how to use Netlify to host your ReactJS project, then you are welcome to check my article here 🧡.

What to Learn as a Beginner to React

Let’s now focus on what you need to learn at the minimum to start enjoying React in practice. These are foundational pieces, so make sure to give enough time and hands-on effort to truly understand the concepts.

🧨 Understand What React is

You should understand what is so special about ReactJS. Well in my opinion, one of the signatures when using ReactJS is component term.

🎁 Learn How to Set Up your Development Environment

There are multiple ways to do it, at first you can use CDN in your script file. But in the long-term, you can use a tool like Create React App or Vite (I recommend using this tool 😋).

🎆 Learn about JSX

JSX is a syntax that looks like HTML but also has the power of JavaScript. In general, JSX is the combine between HTML and JavaScript. This syntax helps developers write UI logic with all necessary elements like data fetching, conditions, looping, expression, etc.

🎄 Lean about React Components

Components are the heart of ReactJS applications. We create independent components that are completely reusable and isolated.

In ReactJS, you can create components using JavaScript classes or functions (the latter is more widespread than the first one now a day).

👓 State in React

State is the data private to your component. We do not share states across components. The “state” of your component that you use to render information and modify information.

🧶 Props in React

In real-world programming, you will need components to interact with each other. States are private to a specific component, but you need to pass that state’s data between different components. That’s where Props come into the picture.

How to Move from Beginner to Intermediate ReactJS Developer
Let’s now understand what it takes to move from a beginner to intermediate level with React.

💄 Styling in React

We have to admit that we all want our application to look fresh and clean right? You can use plain old CSS to style your project, that’s completely okay. Or you can use some popular CSS framework as an alternative such as Bootstrap 5, Tailwind CSS. The choice is entirely yours 😘.

😎 Form Handling in React

Handling forms is an essential requirement in web applications. You need to understand how to handle form elements in the ReactJS way.

For instance, you can use the react-hook-form library to build forms.

🍔 Data Handling in React

This is crucial part of application development. You need to learn how to use the fetch API libraries like node-fetch or axios to interact with APIs and handle data in your project.

🍿 Virtual DOM concepts in React

ReactJS use the Virtual DOM to decide when and what to update in the actual DOM for rendering. It means that ReactJS is smart enough to know which elements in our DOM is changed and only update that changed part.

🧀 React Hooks

Hooks is one the most important definition that you really need to know when learning ReactJS since you will face this concept all the time when playing with React.

🍖 How to Move from Intermediate to Advanced React Developer

In this phase, you will deal with a few expert-level topics. You need to know these concepts only when you’re working on more extensive application development using ReactJS.

Note that, you can learn each of these advance concepts whenever you’re ready. Also, you don’t have to learn them all.

😴 Lazy Loading in React

ReactJS support code splitting. It is a way to lazy load what you need by the current use. It also avoid producing a large build bundle. The dynamic import feature is the best way to include code-splitting in a React app.

🎢 Routing in React

Routing is required for multi-page applications. It is also helpful to bookmark a particular page or traverse back-and-forth in the application using the browser’s back button.

react-router is the most popular routing solution that helps with declarative routing.

It’s 2022 — Should I Still Learn React?

Another frequently asked question — and the answer is YES. React is ever-growing, and the community is also growing quickly. There is no reason to stay back.

Also, ReactJS is a base for many other popular frameworks like Next.js…

🎈 Conclusion

I hope you found this post helpful. Please plan to get enough practice as you start your learning process.

If this post was useful to you, please leave me a like 💛 and follow me, that helps me a lot 😍 😘.

Also, if you want more interesting content like this from me you can have quick tour to my portfolio and GitHub 💛💛💛.

Again, thank you so much for reading this blog and have a good day 😘.

How to deploy a React project to a free web host server

MINHCT — Wed, 11 Jan 2023 12:43:30 +0000

In this article, we’ll learn how to deploy our ReactJS project to a free web host server which called Netlify.

If you want to create an editor in any of your React project using CKEditor 5 (include image upload with no server-side configuration and many cool features…) then checkout my article here ❤.

Drag and Drop the Build Folder in Netlify

The fastest and easy way to deploy a React application is just to drag and drop the builder folder in Netlify.

To create a builder folder, just execute one of two codes below from the command line from your project folder.

npm run build or yarn build

Once the build folder is created, you just need to drop the folder in the drop area under the sites menu

How to deploy an App to Netlify from a GitHub repository

This is my favorite way of deploying my React project to server since it super simple and convenience.

Every time you push any changes to GitHub repository, it will automatically be deployed to Netlify. Also, you can rollback your site if you wish.

If you already have a repository on GitHub, then all you need to do is just to connect it.

Click on the GitHub button and connect to your GitHub repository.

It will open a new tab, make sure the popup in enabled in your browser.

Search for the GitHub repository in the search box. Once you selected, you will see the following screen

All these configs are fine, you don’t need to change anything.

Now click on Deploy site button, once clicked you will see the Site deploy in progress message.

You’ll have to wait a minute until the process done. Once deployed is completed, you will see the following screen

Click the link and you will be surprised. Tada, we have done it 😜

Awesome, now anytime you make any change to your repository, Netlify will automatically update your site according to your change, cool right.

Now the next section will be more excited.

How to change your site name in Netlify

At the moment, our domain quite ugly since it’s very hard to remember for anyone, especially when you have a lot of deployed projects. Luckily, Netlify provide us an easy way to solve this problem.

Click on the Site setting button displayed on the Site overview section.

The click on the change site name button and enter your new name. Save it and now you can access your site with that new changed name.

Thanks for reading ❤

If this post was useful to you, please leave me a like and follow me that help me a lot 😁.

Also, if you want to find more interesting content like this from me you can refer to my portfolio website or my GitHub in case you want to see all the project that I have done 💋.

Again, thank you so much and have a good day 😘😘.

How to good at studying programming

MINHCT — Sat, 07 Jan 2023 14:02:18 +0000

Studying something new is not always easy for me, especially programming. The first time I went into my university, I have no idea about a thing that we call code, and I thought that university is a good way to help me master at coding and become a quality coder. But over two years studying programming, trust me the only person can help you good at coding is not university, lecturer or friends but yourself. I realized that the best study method that can help you become a high-quality coder is something that we call self-study. But self-study is not easy to have it since it took me 1 year to good at it. That why I decide to write this blog to help you start your self-study journey by specify 5 things that you must have to become a self-study master.

1. Specify a clear study roadmap

Knowing exactly what we have to learn is the best way to save tons of your time since you know that what are you studying for and know that we are in the right way. You can specify your own roadmap by searching Google, YouTube or just ask your expert. And trust me, make your study plan clearly is helping you become a passionate learner.

2. Start making your study schedule

Now have a clear understand at what we need to achieve our goal is good, but not enough because right now we need to have a clear self-study schedule. Doing this is a really good way to manage your time properly.

3. Choose a quality course, resource

Self-learning doesn't mean that we have to learn anything by your-self, you can self-study by joining an online course or watch a specific online tutorial. And YouTube is one of the best platforms to find such a high-quality online tutorial.

4. Always curious

During the self-study process, remember to always be curious because curious is just help us have a better understanding about it. Never hesitate to ask Google why we have to type this line of code like this but not like that.

5. Practice is the key.

I have seen many of my friends learning a lot but never practice, that why when they meet some practical case, they don't know how to utilize their knowledge into it. So, remember practice is the key, do not studying so much without applying them into any practical project.

Conclusion

That are 5 basic things you need to have if you want to be good at self-study.

If this post was useful to you, please leave a like and comment below that help me a lot <3.

Refer to my GitHub and portfolio website for more amazing content just like this <3

Using CKEditor 5 in ReactJS (include upload image and many cool functionalities)

MINHCT — Tue, 03 Jan 2023 15:36:57 +0000

Hi there, in this article I will guide you guys how to use CKEditor v5 in React project (you can also use this in MERN STACK project). Not only include many cool features in our editor, but I’m also help you guys to make the upload image feature work without any configuration in server-side. So let jump into it.

Create React project

First of all, we’re going to create our React application by using Vite or you can use create-react-app if you want to. In case you don’t know how to setup React project by using Vite, all you need to do is going to their documentation and follow the instruction, it quite straightforward.

Download CKEditor

The second thing you need to do is download our editor and place it into our project. Go to CKEditor online builder page, choose what type of editor we want to use, in this case we going to pick classic editor as our editor. Pick any plugins that you prefer but in order to make our editor more luxury, I recommend you choose all :))). But note that, if you want to have a change of uploading image to editor from our device, remember to choose a plugin named Base64 upload adapter. But you will note that the add button did not available for us to choose, so to solve this we have to remove CKBox plugin from our editor. One you finish set up process, just click next and download editor to our computer. And that all for this second step. Let move into the most important step that we’re waiting for.

Using CKEditor in React Application

Inside our React project, create a folder name ckeditor5 next to src folder like this

Now, extract the .zip folder that we have downloaded before and move all the content inside the ckeditor5 folder. Now our folder structure will be look like this

Great we’re almost there, now according to the documentation, we have to install ckeditor component for React. So let do this by type this line of code in the terminal
npm install @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classis

And also execute this
npm add file:./ckeditor5

Initialize CKEditor component

Create a folder name Components inside our src folder and create a file name TextEditor.jsx inside it. Import our ckeditor component in this file

Import TextEditor component to file App.jsx and use it

One more step to complete our mission, go to the file App.jsx and import our TextEditor component we have created before

Now open the terminal type
npm run dev

Or if you’re using create-react-app
npm start

And here is our final result

Conclusion

Thanks for reading my article ❤, if you have any problem just comment below and I will help you.

If the post was useful to you, leave me a clap 👏 and follow me, it helps me a lot. Thank you ❤️

Checkout my GitHub & portfolio website for more amazing content.