DEV Community: Hunter Chang

Filtering with React Server Components and URL Search Params

Hunter Chang — Thu, 14 Sep 2023 07:55:40 +0000

Traditionally, when you wanted to filter your data using React, you would first store the original data in local state, with the useState hook.

There would be a useEffect that watches for any filter changes, and then you would re-fetch the data using the applied filters on the client.

Once you get back the filtered data, you update the useState and the list re-renders, showing only the filtered results.

With the rise of React Server Components in Next.js 13, fetching data happens more and more on the server instead of the client. How can you add filters on the client, but still re-fetch and display the filtered data on the server? Using URL Search Parameters!

Key Takeaways:

00:00 - Intro into the project

00:56 - Current code setup, using Next.js App router and fetching initial data on the server

02:20 - Traditional filtering using useState and client side data fetching

03:14 - Server Actions allow for the filters to be inside a form element, with the action property

04:01 - Seeing the checkbox filters showing up inside of the server action's function

04:33 - Using search query parameters, we can re-fetch our filtered data on the server

05:49 - Constructing the URL search parameters with server actions

09:00 - We have access to the search parameters from our page.tsx server component

11:00 - Use the search params to filter our data on the initial server page load

11:52 - Demo of the search params working with React server components

12:37 - Make our checkboxes aware of the URL search params, and have them checked by default if the value is in the url

Link in Bio Website That Feels Like TikTok

Hunter Chang — Tue, 29 Aug 2023 07:25:18 +0000

I recently updated my personal website, https://hunterchang.com, and wanted to share how I did it. The idea was to make a link in bio type of site, like Linktree, but style it to look and feel like TikTok or Instagram Reels.

I added full-screen video backgrounds and have my social media icons clearly visible.

The code can all be found at: https://github.com/ChangoMan/hchang-reels

The main slider library I used was https://swiperjs.com

Key Takeaways:

1:28 - The site is just mainly 1 HTML page, with some CSS and JavaScript. I didn't think React or a framework was needed for such a simple site.

1:50 - There is a package.json file that spins up https://browsersync.io and another command that watches for Tailwind CSS changes.

4:05 - I used https://swiperjs.com to create the slides for the site. I imported the swiper element bundle and used their web components to make the sliders.

7:00 - There is a small amount of JavaScript to listen for when the slides change. I needed to know which slide was active, using addEventListener on "realindexchange"

7:54 - I get the "realIndex" from the event listener and use that to determine which slide I am on.

8:33 - I didn't want all the background videos to load at once, so I only load the video and include the "source" when I am on that particular slide.

9:15 - Description of the properties I used on my "video" tag. I took a picture from the first frame of the video and used that as the "poster"

10:57 - JavaScript that inserts the "source" for each slide, if there is no source detected. This is what triggers the background video to load once you get to the second and third slides.

Next.js App Router Dynamic Sitemap & SEO Metadata

Hunter Chang — Sun, 20 Aug 2023 15:50:22 +0000

Let's add a dynamic sitemap.xml file to our Next.js blog, built using the new Next.js App Router. We'll also add some helpful metadata tags including the canonical url tag, the Open Graph protocol og tags, and twitter cards.

Key Takeaways:

1:02 - A sitemap.xml file is essential to any website's SEO. It signals to search engines, like Google, that your site and pages exist.

3:34 - You can create a sitemap.ts page under the /app directory to generate a sitemap with Next.js

5:41 - To make a sitemap that is dynamic, you'll need to add or re-use code that loops through all of your blog posts or website pages, and get the url for each post or page.

9:44 - Once your sitemap.xml is created, you'll want to submit this to Google Search Console so that it can start crawling and indexing your website's pages and blog posts.

11:32 - We take a look at how metadata and meta tags work with the Next.js App Router. We also start to add other meta tags

14:09 - The canonical url will help search engines know which url you want to be the "source of truth" for a particular page. This is the url that Google will want to index in the case of duplicate or near duplicate pages or links.

15:36 - The Open Graph protocol tags will help show a nice picture and title when sharing your website with social media platforms such as Facebook and LinkedIn.

17:56 - Twitter, or X, has specific meta tags it will look for when displaying your website on its platform. The twitter card metadata will make sure things look the way you want. You can preview these by going to any open graph preview site, such as https://www.opengraph.xyz/

19:37 - We add semi-dynamic metadata tags to our blog posts, and create a helpful function to generate the Next.js Metadata object.

Here are some code gists for the code seen in the video:

Sitemap.ts - https://gist.github.com/ChangoMan/824daa0b4fbd6f824d2e8a2ab1532006

Layout.tsx with Metadata - https://gist.github.com/ChangoMan/a0754b24464cace64126d684bb45a812

A Web Developer in China, 2023

Hunter Chang — Sun, 09 Jul 2023 14:11:11 +0000

In June, 2023, my family and I uprooted our lives and moved to China. Although there were many motives for this move, the primary reason was to live with my wife's family and expose our daughter to the culture.

My plan was to continue web development in China, but I had no idea if that was feasible. As many of us know, China strictly monitors the country's internet activity and blocks many crucial apps and services we rely on in this industry.

Having lived here for almost a month, I can safely say that it is indeed possible to live as a digital nomad in China. There are, however, a few hurdles to overcome.

The Great Firewall

The biggest hurdle is that services such as Google, Gmail, and Twitter are blocked by China's firewall. Telegram, Zoom, and Discord are also blocked, so communication and access to news back home is not as accessible.

Slack seems to be the only messaging app that is not blocked here, along with Microsoft Teams and Skype.

I've had to set up a new Microsoft email address and forward all of my Gmail messages there.

In the past, it was easy to get a VPN service, such as Express VPN, to solve this problem. However, Express VPN does not work for me anymore here in China. The only VPN service that works is one called Private VPN, but it is very slow.

If anyone has a more reliable VPN service that they can recommend for China, please let me know!

Web Developer Tools in China

To my surprise, Github and Gitlab actually work here in China. I have access to all of my code repos! Amazon AWS also works, which is great news if you rely of this for deployments.

I mainly develop with Next.js and deploy to Vercel, both of which work behind China's firewall. Namecheap.com, my primary domain registrar, also works here.

The main adjustment you'll need to make is switching from Goole to Bing as a search engine, which honestly isn't all that bad.

I have successfully developed and deployed a complete website since my time here, without many issues. I just wish a better VPN services was available so that I can stay connected to Twitter and Telegram for longer periods of time.

For more updates and details about life in China, check out my travel blog! https://travelxfamily.com/posts/big-move-to-china

Beautiful HTML Resume Templates with Tailwind CSS

Hunter Chang — Wed, 11 Jan 2023 20:06:09 +0000

Hello! I just released 5 HTML resume templates on my new site, resumewind.com.

The Resume Wind marketing site was built with Next.js and Tailwind CSS.

The resume templates themselves are built with Tailwind CSS and are fully mobile responsive. Let me know what you think!

If you want to try them out, leave a comment below and I can send you a discount code.

Next.js Ethereum Starter

Hunter Chang — Sun, 09 Oct 2022 20:51:56 +0000

Hey everyone! I've recently updated my repo for a Next.js Ethereum Starter. This starter template is meant to kickstart your Solidity and Blockchain development journey.

View the GitHub Source Code!

Live Demo Here!

Quick Video Speedrun

It uses Hardhat as the Solidity and Ethereum development environment.

On the Frontend, it's using:

Next.js - React.js Framework
Chakra UI - React component library
RainbowKit - Web3 wallet connection made easy
wagmi - Suite of useful React hooks for Ethereum development.

Let me know in the comments if you would like a more in-depth post or video on how to use this starter.

History and Motivation

So a little history about what I've been up to and why I made this Next.js starter for Ethereum.

I have a good friend and ex-coworker who fell down the Crypto and Ethereum rabbit hole back in 2018. Every once in a while, he would ask me to help him on the Frontend for his various projects.

At the time, I wasn't into Blockchain development at all because most of the markets had just crashed. I was also focused on mastering React and the new frameworks such as Gatsby.js and Next.js. I would still help him out though, since it was some easy money on the side. I was also a little bit curious about how the blockchain worked in general.

Fast forward to 2021, I took on a freelance project that involved NFTs called https://songaday.world. I learned a lot about Crypto and NFT "culture" and became hooked (mainly due to the numbers going up). I eventually left my old job and got a Frontend role at a Crypto/NFT startup. The Crypto markets also came back to life during this time, so it was a pretty good opportunity to be more involved in the space.

Opportunity, I want to stop and focus on this word for a bit. I know there's a lot of hate surrounding Crypto and NFTs, and a lot of it is 100% justified. We've all heard about the rampant scams, hacks, and drama. It all just looks like a huge ponzi scheme.

However, it's hard to ignore the potential opportunities. There are a lot of really smart developers trying to build stuff that is actually useful, and pretty much every major company has jumped into the scene.

Now, I'm not trying to convince you that Web3 and Crypto is the "future", but I do think it's worth a small time investment. I've been in the space for about a year now and, from a Frontend developer's perspective, 95% of "Web3" development is exactly the same. You're still mainly working with React, Javascript, and CSS. The extra 5% is learning about Crypto wallets, Ethers.js (which is basically lodash for Ethereum), blockchain events, and maybe connecting with smart contracts.

This extra 5% can open a lot of new doors, since the entire Crypto industry is hungry for developer talent. You'll be in much higher demand without a whole lot of time invested. This is my main thesis and reasoning behind driving Frontend devs into the Web3 space.

My friend is still in the space and his main mission is to onboard new developers into Ethereum. He has a project called Scaffold-ETH which is a quick start template for Ethereum development. This Next.js Ethereum Starter is my interpretation of his project.

If you pull down the repo above, you can begin to see how everything is hooked up and how it's not that different than what you're already doing in React. When you connect a Crypto wallet, the wallet address is made available in a React Context. This makes it easy to pass around and perform functions on, just like any other React Context.

There are a series of hooks you can use to read information from the blockchain and a smart contract, very similar to if you're just using a GET from a REST API. There are also hooks that help you write to a smart contract, which pops open your Crypto wallet for the interaction.

I hope this repo and this post inspires you to at least give Blockchain development a curious peek. Check it out for yourself before falling into a dogmatic view of "Web3 is the FUTURE of everything" or "Web3 is EVIL".

Next.js with Web3Modal Example

Hunter Chang — Mon, 19 Jul 2021 22:19:58 +0000

Hey everyone! I recently built an example website using Next.js and Web3Modal. For those of you who don't know, Web3Modal is a simple way to connect your website to a Web3 / Ethereum wallet.

This is essential when building a decentralized application (dApp) because you need a wallet to interact with the Ethereum application.

Here is the example site: http://web3modal-example.vercel.app

Here is the source code: https://github.com/ChangoMan/web3modal-example

In order for the Web3Modal to work in your browser, you'll need the MetaMask Chrome extension, or a WalletConnect compatible wallet.

I was going to create a full blog post explaining how everything worked, but wasn't sure if anyone would be interested.

If you would like a more in depth explanation of the source code, let me know in the comments down below! Thanks for looking!

Next.js Blog Starter with TypeScript and MDX

Hunter Chang — Sat, 10 Apr 2021 15:02:54 +0000

Hey Everyone!

I just made a new website starter for Next.js, built with TypeScript, MDX, and Tailwind CSS. It should serve as a nice starting point for a personal blog or website.

Check out the demo

To get started:

git clone https://github.com/ChangoMan/nextjs-typescript-mdx-blog.git
cd nextjs-typescript-mdx-blog

yarn install
# or
npm install

yarn dev
# or
npm run dev

Your development site will be up at http://localhost:3000/

From HTML to React Part 1

Hunter Chang — Mon, 08 Feb 2021 23:30:29 +0000

This article was originally published at codebushi.com

Several months ago, I started writing a "book" about making websites with Gatsby.js. It has become obvious to me that I will probably never finish this book, due to several personal reasons (loss of interest, having a toddler is hard, burnout from coding in general, I got a shiny PS5 during the holidays).

Since there's already some content written, I figured it's better to share what I've got so far. Who knows, maybe I'll find the will to finish this some day. Maybe I'll use Next.js instead of Gatsby, since it seems to be a trend I'm more interested in. Anyhow, here is Part 1 of the book!

Introduction

Hello and welcome to From HTML To React! In this book, you'll learn how to take an ordinary HTML and CSS website and transform it into a modern React,js site, using Gatsby.js. The goal of this book is to help you learn and practice modern web development skills with a JavaScript framework. By the end you'll have a published Gatsby site, written in React, that's blazing fast.

Why Gatsby?

Gatsby is a modern web framework based on React. The key word here is React, which has become the most popular JavaScript library around. Today there are tons of HTML/CSS/Bootstrap templates on the web, but they're still powered by jQuery. Now I won't say that jQuery is outdated, but I will say that it's not as desirable of a skill than React. Working with Gatsby is, in turn, working and practicing with React. This book will take the familiar concepts of a simple HTML website and translate them into React principals and best practices.

Who Is This Book For?

This book is not recommended for absolute beginners of web development or React. It's aimed towards the beginner/intermediate web developer who wants to take their skills to the next level. Someone who is comfortable working with HTML, CSS, and jQuery, but is trying to break into the world of React.

This book also assumes you have a basic understanding of React. Subjects such as JSX, state, props, and components. If you are not familiar with the basics of React, I encourage you to go through the official React documentation.

The goal of this book is to reinforce and build upon the basics of React, by practicing with the familiar elements of a simple website.

The Steps Involved

First, we'll pick out a free HTML template to use with our project. We'll analyze the existing code and discuss which parts we'll be using for our new site. Spoiler alert, we won't be using any of the jQuery!

We will then spin up a brand new Gatsby site and go over the basics of how it works. We'll import the existing CSS from our HTML template and organize the folder structure to begin building.

In order to get in the habit of creating components, we take our existing HTML code and break it up, converting what we use into JSX and React components. The focus here is to get the new Gatsby site looking like the old site, without any of the old jQuery functionality.

Finally we'll start to add back the functionality, but we'll be using React and React packages instead of jQuery plugins. Once we have everything working we will build and publish the site.

Tools You Will Need

Node.js and NPM installed on your machine
The Gatsby CLI installed on your machine
A GitHub account for your code and publishing

Chapter 1: The HTML Template

There are many places to get HTML and CSS templates online. One of my favorite sites to get inspiration and design ideas is onepagelove.com, started by @robhope . They have a nice gallery of one page websites as well as design resources and web development articles.

For our purposes, I'm going to pick a free to use HTML template so we all have a similar starting point. Head over to https://www.free-css.com/free-css-templates/page257/evolo and download the free 'Evolo' template if you wish to follow along.

You can also choose a different template or use one that you've made in the past, the principals are pretty universal.

Template Code Analysis

Open up the downloaded files and check out the index.html. Since this is a one page website, all the HTML lives here. The file is broken up nicely for us into sections, such as  and . These are actually perfect chunks we can extract into their own React components later.

At the very bottom of the file, we can see this is where all the JavaScript and jQuery is loaded.

<!-- Scripts -->
<script  src="js/jquery.min.js"></script> <!-- jQuery for Bootstrap's JavaScript plugins -->
<script  src="js/popper.min.js"></script> <!-- Popper tooltip library for Bootstrap -->
<script  src="js/bootstrap.min.js"></script> <!-- Bootstrap framework -->
<script  src="js/jquery.easing.min.js"></script> <!-- jQuery Easing for smooth scrolling between anchors -->
<script  src="js/swiper.min.js"></script> <!-- Swiper for image and text sliders -->
<script  src="js/jquery.magnific-popup.js"></script> <!-- Magnific Popup for lightboxes -->
<script  src="js/validator.min.js"></script> <!-- Validator.js - Bootstrap plugin that validates forms -->
<script  src="js/scripts.js"></script> <!-- Custom scripts -->

We won't be using any of these files, but we should make a note of what functionality they provide. React is popular enough to have its own version of most jQuery plugins, and we can recreate any leftover functionality.

Open up the /css folder and take a look at the CSS files. Again, we won't be using any of the CSS that's associated with the jQuery plugins. We also won't be using the fontawesome-all.css since there are React specific Font Awesome packages available. The only files we'll need are:

bootstrap.css
styles.css

Now that we've identified what parts of the template to use, the next step is to start our Gatsby site.

Next.js Server Side Rendering and getInitialProps Intro

Hunter Chang — Sun, 02 Feb 2020 22:38:00 +0000

We take a look at the power of Next.js and how it handles fetching data using getInitialProps. We also cover some of the gotchas when working with server side rendering since the code runs on both the Node server as well as the Client/Browser.

4:35 - Pages without the getInitialProps function will be considered by Next.js as a Static Page. If all of your pages are static, you can essentially use it as a static site generator.

5:34 - Code in Next.js will be run both on the server side as well as the client/browser side. Trying to use something like window.location will fail on the server side because the window object only exists on the client side.

8:33 - In order to fetch data using getInitialProps, we need to use the 'isomorphic-unfetch' package because that will work on both server and client.

10:05 - When using getInitialProps, the object that is returned will end up as props in the React component. The props will also include the url object.

11:33 - When visiting a page in Next.js directly, it will fire getInitialProps on the server and the data will be fetched on the server. If, however, you route to the page using the component, the data will be fetched in the browser.

13:14 - The fetched data from getInitialProps will show in when you view the web page's source code. This is the main reason to use the Server Side Rendering powers of Next.js

16:00 - When building the site, Next.js will automatically determine if a page should be static or server side rendered. If you have any pages with SSR, then you'll need to deploy a Node server in order to host the site.

19:54 - You don't have to use SSR. If you don't need the getInitialProps function and want data, you can use traditional data fetching methods like useEffect or fetch on componentDidMount.

JavaScript Local Storage Introduction

Hunter Chang — Sat, 04 Jan 2020 19:58:03 +0000

Introduction on how to use JavaScript's window.localStorage by creating a Dark Theme toggle for a simple site. We take a look at how to setItem and getItem from Local Storage.

Key Takeaways:

6:42 - localStorage.setItem() takes two arguments, the first is the Key and the second is the Value. Both Key and Value must be a string. You can see these stored values in the browser's dev tools, under the Application tab.

9:10 - To read from local storage, we use localStorage.getItem() and pass it the original Key that was stored. You will get back the string that was stored with the Key.

11:18 - When reading from local storage, it's a good idea to check if something was returned first, and then proceed with your code.

12:50 - If you're using local storage with React, you can store a React state object. You must first JSON.stringify() the object you want to store, since local storage only works with strings.

14:35 - When reading from local storage, and getting a JSON string, you need to JSON.parse() the Value and turn it back into an object.

15:50 - To use with React, one way is to setItem right after you perform a this.setState(), and you would stringify the object as you pass it into localStorage.setItem(). You can then getItem when you do a componentDidMount and this.setState() to retrieve your React state object from local storage.

If you liked this video, please support it by subscribing to the channel!

You can also visit Code Bushi for more resources on Web Development!

Intro to the Fetch API & Rendering Data with JavaScript

Hunter Chang — Sat, 21 Dec 2019 17:06:25 +0000

In this video, we take a look at the browser's built in Fetch API to get some dummy data. We then map over that dummy data to create some HTML with Vanilla JavaScript and render it onto the screen.

Key Takeaways From The Video:

3:20 - The Fetch API returns a Promise, so you need to wait for the promise to resolve by using .then() after it.

4:16 - After the promise is resolved, you will get a Response object, which will tell you the status code of the response among other details

5:15 - We need to run the .json() method on the response object to turn the response into more useful data. The .json() method will also return a promise, so we need to chain another .then() onto it.

8:10 - When using the Fetch API, it won't automatically throw all errors. You have to manually check to see if the response object has an "ok" property on it, and throw an error if it's not. This will help you catch things like a 404 error with the response.

11:11 - In order to render our data to the screen, we can use innerHTML or insertAdjacentHTML and insert an HTML string into an existing HTML element.

14:13 - Since the data we get back is an array, we can perform .map() on the array to loop over the data. We then use Template literals to construct our HTML string.

22:10 - With the Fetch API, you can also perform a POST request by adding additional options when making the request. Make sure to add the proper "headers" and use JSON.stringify() in the body of the request.

If you liked this video, please support it by subscribing to the channel!

You can also visit Code Bushi for more resources on Web Development!