Creating sticky navigation or a sidebar? Here's a quick html and css only approach.

This is good when you want a sticky  table of content on your post

Sticky Navigation / Sidebar

Let’s create a simple notification component without using any library.

So how will we add a message to the notification? And what will trigger it?

Or anything else you want to use as long it got triggered 😅

Simple Notification Component

 queries without thinking of what kind of break-point to set in your 

 these symbols ( comparison symbols ) to set our site responsiveness.

https://css-tricks.com/the-new-css-media-query-range-syntax/

Here’s a great way to use your `@media` queries without thinking of what kind of break-point to set in your `min-widht` or `max-width`.

media queries range syntax

All right, so this one was so FUN! ( emphasis on Fun! ), I’ve been trying to do this for a couple of days and finally managed to find a solution. Thanks, ChatGPT!

Honestly, I’m not really good at doing this routing and paginating stuff. I had to use my old codes before and paste them in. Unfortunately, my old codes won’t work this time as I’m using a different approach and tried 

 for the first time on a blog. ( I am used to doing stuff on GraphQL with Gatsby, and I have a ready-to-paste old code ).

All right, this one was so FUN! ( emphasis on Fun! ). I’ve been trying to do this for a couple of days and finally managed to find a solution. Thanks, ChatGPT! 

NextJS + Sanity.io Pagination Fun! 😒

Creating a useState method using vanilla javascript. 

create your own useState

You can have named and default export in one source and import them together as well. import 

There’s only one default export per module.

can be helpful to export multiple values from one source

Why export in javascript?
- cleaner code 
- one source of files to look into
- utils folder is a good way to use exports

default exports vs named export

 for my key values when creating a list of items in React, and for me, that will do. This will solve my issue with 

 need a key for your list items (not the actual warning)

 warning message in my console when building React applications.

I found out about this recently as a great way to generate a key id on your list of items. 

We’ll need to generate them dynamically when we get our list item. So more code 😅

I usually just use an index for my key values when creating a list of items in React and for me, that will do. This will solve my "You need a key for your list items" warning message in my console when building React application.

generate keys for your list item ( react )

Making sure my layout is full height when using Flexbox. Header always on top, footer always on the bottom is key 🔑

Make sure that the parent container of the header, main, and footer is where I’m applying the styles for the above example the 

. ( example: React you have to apply it into. App as this is the parent container )

Making sure my layout is full height when using flexbox. Header always on top, footer always on the bottom is key 🔑

Flexbox: Full Height Layout

If you’ve been doing ReactJS for some time you know that it’s a lot of work just to do 

 in React. There’s just too much stuff you have to do and consider. You have to do your own state management for the inputs else it’ll not work.

 method/hooks for creating Forms and this is my go-to custom hook for my forms.

How will I use this on my form component? you just have to import the custom hook 

 for much more complex forms that you need to build. Documentation is solid and easy to use. 👍

If you’ve been doing ReactJS for some time you know that it’s a lot of work to do <Forms /> in React. There’s just too much stuff you have to do and consider. You have to do your own state management for the inputs else it’ll not work.

useForm

I like using styled-component for my project because I have to put the style on my component than putting it in some folder to make it more organized!

( Kidding aside it’s better to put my style somewhere that you can reuse on other components = SSOT )

Anyway, I always forgot how to use props on the styled-component. So here it is.

but can I have props that make a set of styles? Yes, but it’s not really that readable for me. It’s better to create two sets of classes, and then I need to create conditions for my component to use the class based on my need.

I like using styled-component for my project because I have to put the style inside my component rather than putting it in some folder to make it more organized!  

styled-component props

My goal here is to update my portfolio website which has been up for about 3 years now. I wanted to use nextjs and sanityio on my new portfolio website, and add some blog / notes feature in it where I can store my study notes and blog about something interest me. 

Updating my Portfolio website after 3years of working as front-end developer using ReactJs and NextJs.

What I’m working On

Here are some stuff I’ve worked on and stuff I’m currently working on.

Portfolio v3

Featured Notes