Your All-in-One Developer Knowledge Vault

Effortlessly capture, organize, and share your knowledge with the community of developer.

Get Started Now

Powerful Search

Search through your note faster and easier with Full Text Search and Vector Search

Write Note with Ease

Search through your note faster and easier with Full Text Search and Vector Search

Share with the community

Search through your note faster and easier with Full Text Search and Vector Search

Discover knowledge

Search through your note faster and easier with Full Text Search and Vector Search

Features

Developer-Friendly Editor

Quickly take notes, document solutions, and capture code snippets with ease.

Heading 1

Hello

Code

const vault = "Awesome"

Vault

Smart Organization

Effortlessly organize notes with tagging, categorization

Next.js

React

Vue

Nuxt

Tag

Improvement

Backend

Frontend

Search Like Never Before

Search and find note via Full Text Search and Vector Search

What's NextJS

John Doe

How to start your NextJS Project

John Doe

use client in NextJS

John Doe

Share & Browse Notes from The Community

Share valuable notes with the community and discover insights from others.

Browse Now

Note Highlight

First Ever Note

We need to first install yarn npm install yarn You can have everything I needed? I want to make this note visible to everyone. SaaS Project Next.js improves your application's performance and reduces costs by caching rendering work and data requests. This page provides an in-depth look at Next.js caching mechanisms, the APIs you can use to configure them, and how they interact with each other. This will be Bold, Italic and Code const i = 10; console.log(i) const h = "Hello"; Google.com I want to work for this company for so long. List 1 Sublist 1 List 2 List 3 Best Javascript Framework Javascript SolidJS Typescript React React 19 Vue Next Nuxt These are just my opinion, and it is the correct one

Ponleu

21 Oct 2024

How to Upload Image Using Supabase Storage

I was recently working on a project that has image upload as one of the core feature. Luckily I was using Supabase as a database. which provide an easy way to upload file using Supabase storage. Set up in Supabase To start, you must init your supabase project, then go into storage and create a new buckets. Upload Image Function After create a bucket, for simplicity you can set the image to public, then we can start upload the image by creating the function export async function uploadImage(image: File) { const supabase = createClient(); const { data, error } = await supabase.storage .from(`BUCKET_NAME`) .upload(`PATH`, image, { cacheControl: "3600", upsert: true, //Upsert to overwrite duplicate image }); if (error) { return { error: error, }; } const { data: { publicUrl }, } = supabase.storage.from(`BUCKET_NAME`).getPublicUrl(data.path); return { publicUrl, error, }; } So the function will upload the image into the specify PATH and BUCKET_NAME. Sadly, supabase does not have a function that automatically return image URL after uploaded the image so we must write a function to retrieve the image URL. After that you should be able to call the function in your application const { publicUrl, error } = await uploadImage(image); Optional: Compressed Image Each image may take up alot of space, and consider that Supabase only give you 2GB of storage, plus to avoid Large Content Paint, it is ideal that you should compress the image before upload it to Supabase. First, you can run yarn add browser-image-compression , then you can create a compress image function. import imageCompression from "browser-image-compression"; export async function compressImage(image: File, options: Options) { return await imageCompression(image, options); } After that, you can add this function above the uploadImage function. const compressedImage = await compressImage(image, { maxSizeMB: 1 }); const { publicUrl, error } = await uploadImage(compressedImage);

tester2

4 Oct 2024

React ref not render on first load

What is the issue? When I was working on Tiptap editor, I need to make use of React useRef const editorRef = useRef<TiptapEditorRef>(null); return ( <TiptapEditor ref={editorRef} onFocus={() => setInputActive(true)} onBlur={() => setInputActive(false)} onUpdate={handleGetTags} /> ) On first initial render, I want to fetch data and put it in the editor, which seem to work on development mode, but once I start to build and run, the content didn't load at all. My first thought is to log the ref to see if it have any value at all, and just as i thought, it did not return null. This mean that ref did not load at all on first render. Just as the react document said useRef returns a ref object with a single current property initially set to the initial value you provided. So the temporary solution is to use a state to store if the page fully load. Then when it fully load it should set the editor content. const [shouldUpdate, setShouldUpdate] = useState(true); useEffect(() => { if (shouldUpdate) setShouldUpdate(false); }, [shouldUpdate]); useEffect(() => { {...fetchDataLogic...} editorRef.current?.editor?.commands.setContent(data?.content); },[shouldUpdate)

Ponleu

12 Oct 2024

Useful Git CLI Command

These are a few useful git command that I have learned: To see all & delete the branch with prefixes, make sure to change PREFIX and $3 accordingly. git branch -r | awk -F/ '/\/{PREFIX}/{print $2 "/" $3}' # To list out all the branch before delete git branch -r | awk -F/ '/\/PREFIX/{print $2 "/" $3}' | xargs -I {} git push origin :{} # to delete Reset commit that did not sync yet git reset ~HEAD Delete github branch git push -d <remote_name> <branchname> # Delete remote git branch -d <branchname> # Delete local Rollback and completely remove previous commit # 1. Move back to commit A git checkout <commit-A-hash> # 2. Create a new branch (optional but safer) git checkout -b rollback-to-A # 3. Force push to overwrite remote main branch git push origin HEAD:main --force

Ponleu

21 Feb 2025

Explore More

Capture Insights Today, Empower Tomorrow

Get Started Now

See Pricing