-
Code to Detect Browsers (Chrome, Firefox, Edge, IE, Safari, Opera..)
With just a few lines of code, we are able to detect browser types including Google Chrome, Firefox, Microsoft Edge, Internet Explorer, Apple Safari, Opera and more. A third-party library is also introduced and used in this tutorial.
🔔 SUBSCRIBE: http://bit.ly/Subscribe-Hong-Ly & turn on notifications to find out when I upload new videos
💻 Source code: https://github.com/lyhd/reactjs/tree/detect_browsers
ℹ️ Websites used in this video:
https://www.npmjs.com/package/bowser
🛡️ COVID-19 Live Now: https://covid19livenow.com
🌐 Website: https://honglytech.com
GitHub: https://github.com/lyhd
My course: https://honglytech.com/course
🌎 Find me on:
Facebook: https://www.facebook.com/honglytech
Instagram: https://www.instagram.com/hongly_tech
Twitter: https://twitter.com/honglytech
#browser #detectbrowser #chrome -
Make Pokemon-Style Game in JavaScript
In this video, you will learn to create a Pokemon-style top-down game. This game is modified from the existing game. You can customise the map to whatever you like. Build Your Imaginary World with me! 👍 this video if you find useful!
⏱️ Timestamps:
00:00 Introduction
00:22 Demo
00:50 Medium Article
04:00 Fork GitHub Repo
04:45 CodePen
05:58 Open Project in VS Code
07:42 Find Existing Game File (Tiled)
08:30 Run Game Locally
09:18 Download Tiled Software
10:48 Clone GitHub Repo
12:51 How to Use Tiled Software
15:41 What is OpenGameArt?
17:30 Customise My Game
27:11 Add Fixed Text
28:30 Outro
🔔 SUBSCRIBE: http://bit.ly/Subscribe-Hong-Ly & turn on notifications to find out when I upload new videos
💻 Source code:
https://github.com/lyhd/phaser-3-tilemap-blog-posts
https://codepen.io/mikewesthad/pen/BVeoYP?editors=1111
ℹ️ Websites used in this video:
Medium Article: https://medium.com/@michaelwesthadley/modular-game-worlds-in-phaser-3-tilemaps-1-958fc7e6bbd6
Tiled Software: https://www.mapeditor.org/
OpenGameArt: https://opengameart.org/
🛡️ COVID-19 Live Now: https://covid19livenow.com
🌐 Website: https://honglytech.com
GitHub: https://github.com/lyhd
My course: https://honglytech.com/course
🌎 Find me on:
Facebook: https://www.facebook.com/honglytech
Instagram: https://www.instagram.com/hongly_tech
Twitter: https://twitter.com/honglytech
#game #pokemon #javascript -
How to Decode Base64 to Original Values | React Tutorial
You will learn how to decode Base64 to the original string in this tutorial. This application is written in ReactJS. Enjoy, guys!
🔔 SUBSCRIBE: http://bit.ly/Subscribe-Hong-Ly & turn on notifications to find out when I upload new videos
💻 Source code: https://github.com/lyhd/reactjs/tree/base64_decode
ℹ️ Websites used in this video:
Stack Overflow: https://stackoverflow.com/questions/30106476/using-javascripts-atob-to-decode-base64-doesnt-properly-decode-utf-8-strings
Base64 Decode Tool: https://www.base64decode.org/
🛡️ COVID-19 Live Now: https://covid19livenow.com
🌐 Website: https://honglytech.com
GitHub: https://github.com/lyhd
My course: https://honglytech.com/course
🌎 Find me on:
Facebook: https://www.facebook.com/honglytech
Instagram: https://www.instagram.com/hongly_tech
Twitter: https://twitter.com/honglytech
#base64 #decode #react -
Convert Different File Types to Base64 (Encode) | React Tutorial
In this video, you will learn how to encode any file type to Base64 in ReactJS. I will explain what Base64 is and show various ways to encode on Stack Overflow.
🔔 SUBSCRIBE: http://bit.ly/Subscribe-Hong-Ly & turn on notifications to find out when I upload new videos
💻 Source code: https://github.com/lyhd/reactjs/tree/base64_encode
ℹ️ Websites used in this video:
Stack Overflow 01: https://stackoverflow.com/questions/6978156/get-base64-encode-file-data-from-input-form
Stack Overflow 02: https://stackoverflow.com/questions/6150289/how-can-i-convert-an-image-into-base64-string-using-javascript
Base64 Converter: https://time2hack.com/convert-encode-decode-text-files-to-base64-in-browser/
Base64 Encode Tool: https://www.base64encode.org/
react-textarea-autosize: https://www.npmjs.com/package/react-textarea-autosize
🛡️ COVID-19 Live Now: https://covid19livenow.com
🌐 Website: https://honglytech.com
GitHub: https://github.com/lyhd
My course: https://honglytech.com/course
🌎 Find me on:
Facebook: https://www.facebook.com/honglytech
Instagram: https://www.instagram.com/hongly_tech
Twitter: https://twitter.com/honglytech
#base64 #encode #react -
Ant Design - The World's 2nd Most Popular React UI Library
Ant Design - The World's 2nd Most Popular React UI Library
As shown in the video title, Ant Design is very popular now in terms of React UI library. In this video, let me show you how to install this library along with some other components such as calendar and layout. Like this video if you find it useful. Thanks!
Buy a cheap domain name with namecheap:
https://honglytech.com/namecheap
🔔 SUBSCRIBE: http://bit.ly/Subscribe-Hong-Ly & turn on notifications to find out when I upload new videos
💻 Source code: https://github.com/lyhd/reactjs/tree/ant_design_ui_library
ℹ️ Websites shown in this video:
Ant Design of React: https://ant.design/docs/react/introduce
Ant Design GitHub: https://github.com/ant-design/ant-design
Material UI GitHub: https://github.com/mui-org/material-ui
🛡️ COVID-19 Live Now: https://covid19livenow.com
🌐 Website: https://honglytech.com
GitHub: https://github.com/lyhd
My course: https://honglytech.com/course
🌎 Find me on:
Facebook: https://www.facebook.com/honglytech
Instagram: https://www.instagram.com/hongly_tech
Twitter: https://twitter.com/honglytech
#react #antdesign #ui -
I Finally Try faker.js | React Tutorial
I finally try faker.js in ReactJS. A popular library which generates massive amounts of fake data in the browser, and it is used for testing purpose.
🔔 SUBSCRIBE: http://bit.ly/Subscribe-Hong-Ly & turn on notifications to find out when I upload new videos
💻 Source code: https://github.com/lyhd/reactjs/tree/faker.js
ℹ️ Websites used in this video:
https://www.npmjs.com/package/faker
https://material-ui.com/
🛡️ COVID-19 Live Now: https://covid19livenow.com
🌐 Website: https://honglytech.com
GitHub: https://github.com/lyhd
My course: https://honglytech.com/course
🌎 Find me on:
Facebook: https://www.facebook.com/honglytech
Instagram: https://www.instagram.com/hongly_tech
Twitter: https://twitter.com/honglytech
#faker.js #react #faker -
Building a Compound Interest Calculator | React Tutorial
In this video, you will learn how to create a compound interest calculator in ReactJS using Material UI from Google. If you enjoy watching this video, don't forget to leave a 👍 LIKE on this video. Thanks!
🔔 SUBSCRIBE: http://bit.ly/Subscribe-Hong-Ly & turn on notifications to find out when I upload new videos
💻 Source code: https://github.com/lyhd/reactjs/tree/react-compound-interest-calculator
ℹ️ Websites used in this video:
https://material-ui.com/components/text-fields/
https://moneysmart.gov.au/budgeting/compound-interest-calculator
🛡️ COVID-19 Live Now: https://covid19livenow.com
🌐 Website: https://honglytech.com
GitHub: https://github.com/lyhd
My course: https://honglytech.com/course
🌎 Follow me on:
Facebook: https://www.facebook.com/honglytech
Instagram: https://www.instagram.com/hongly_tech
Twitter: https://twitter.com/honglytech
#react #calculator #compoundinterest -
Simple Weather App | React Tutorial
Can't wait to show you how to create this simple weather app with free API from openweathermap.org. In this video, you'll learn how to use this weather API, display current date and time, covert from Kelvin to Fahrenheit/Celsius, Round to 2 decimal places, and be able to enter any cities and countries around the world. Let's get started!
SUBSCRIBE: http://bit.ly/Subscribe-Hong-Ly & turn on notifications to find out when I upload new videos.
Hong Ly Tech
https://honglytech.com
Websites used in this video
https://openweathermap.org/api
COVID-19 Live Now URL
https://covid19livenow.com
GitHub Repo
https://github.com/lyhd/reactjs/tree/react-weather-app
GitHub Pages URL: https://lyhd.github.io/reactjs/
Netlify URL: https://vigilant-noether-4942ba.netlify.com
Website: http://www.hongly-portfolio.com
Medium: https://medium.com/@lyhong.rupp
Facebook: https://www.facebook.com/honglytechfb
Facebook Page: https://www.facebook.com/honglytech
Instagram: https://www.instagram.com/hongly_tech
Twitter: https://twitter.com/honglytech
Facebook Page (Think): https://www.facebook.com/kitthink
#weatherapi #api #react -
I Build a Currency Converter with FREE API | React Tutorial
In this tutorial, you will learn how to build a simple Currency Converter using a free API in ReactJS. You can enter any currencies in the 2 textboxes and click on the Convert button to get the result. Let's enjoy the video!
SUBSCRIBE: http://bit.ly/Subscribe-Hong-Ly & turn on notifications to find out when I upload new videos.
Hong Ly Tech
https://honglytech.com
Websites used in this video
https://free.currencyconverterapi.com/
COVID-19 Live Now URL
https://covid19livenow.com
GitHub Repo
https://github.com/lyhd/reactjs/tree/react-currency-converter
GitHub Pages URL: https://lyhd.github.io/reactjs/
Netlify URL: https://vigilant-noether-4942ba.netlify.com
Website: http://www.hongly-portfolio.com
Medium: https://medium.com/@lyhong.rupp
Facebook: https://www.facebook.com/honglytechfb
Facebook Page: https://www.facebook.com/honglytech
Instagram: https://www.instagram.com/hongly_tech
Twitter: https://twitter.com/honglytech
#currencyconverter #api #react -
Freemium Australian Shares ASX API 🇦🇺 | React Tutorial
In this video, I will guide you on how to Freemium Yahoo Finance API to fetch the Australian Stock Exchange data. With this API, we are allowed to call 500 times per month. To find out more, let's watch the video!
SUBSCRIBE: http://bit.ly/Subscribe-Hong-Ly & turn on notifications to find out when I upload new videos.
Hong Ly Tech
https://honglytech.com
Websites used in this video
https://rapidapi.com/blog/how-to-use-the-yahoo-finance-api/
COVID-19 Live Now URL
https://covid19livenow.com
GitHub Repo
https://github.com/lyhd/reactjs/tree/react-australian-shares-api-asx
GitHub Pages URL: https://lyhd.github.io/reactjs/
Netlify URL: https://vigilant-noether-4942ba.netlify.com
Website: http://www.hongly-portfolio.com
Medium: https://medium.com/@lyhong.rupp
Facebook: https://www.facebook.com/honglytechfb
Facebook Page: https://www.facebook.com/honglytech
Instagram: https://www.instagram.com/hongly_tech
Twitter: https://twitter.com/honglytech
Facebook Page (Think): https://www.facebook.com/kitthink
#asx #yahoofinance #api -
This Photo is Generated by AI | React Tutorial
In this video, I will introduce you to a website where images are generated by AI or Artificial intelligence. Also, you will learn how to use this API in ReactJS. Let's get started!
SUBSCRIBE: http://bit.ly/Subscribe-Hong-Ly & turn on notifications to find out when I upload new videos.
Hong Ly Tech
https://honglytech.com
Websites used in this video
https://generated.photos/
COVID-19 Live Now URL
https://covid19livenow.com
GitHub Repo
https://github.com/lyhd/reactjs/tree/react-ai-generated-images
GitHub Pages URL: https://lyhd.github.io/reactjs/
Netlify URL: https://vigilant-noether-4942ba.netlify.com
Website: http://www.hongly-portfolio.com
Medium: https://medium.com/@lyhong.rupp
Facebook: https://www.facebook.com/honglytechfb
Facebook Page: https://www.facebook.com/honglytech
Instagram: https://www.instagram.com/hongly_tech
Twitter: https://twitter.com/honglytech
Facebook Page (Think): https://www.facebook.com/kitthink
#ai #api #react -
React to PDF Printing | React Tutorial
We will learn how to convert anything inside React component into PDF file and be able to print. Let's find out, guys!
SUBSCRIBE: http://bit.ly/Subscribe-Hong-Ly & turn on notifications to find out when I upload new videos.
Hong Ly Tech
https://honglytech.com
Websites used in this video
https://www.npmjs.com/package/react-to-print
COVID-19 Live Now URL
https://covid19livenow.com
GitHub Repo
https://github.com/lyhd/reactjs/tree/react-pdf
GitHub Pages URL: https://lyhd.github.io/reactjs/
Netlify URL: https://vigilant-noether-4942ba.netlify.com
Website: http://www.hongly-portfolio.com
Medium: https://medium.com/@lyhong.rupp
Facebook: https://www.facebook.com/honglytechfb
Facebook Page: https://www.facebook.com/honglytech
Instagram: https://www.instagram.com/hongly_tech
Twitter: https://twitter.com/honglytech
Facebook Page (Think): https://www.facebook.com/kitthink
#react #pdf #printing
