OneBite.Dev - Coding blog in a bite size

AWS SES pending domain verification solution

I tried AWS SES, but the DKIM verification took too long. Here is how I solve it

Web scraping with javascript (Easy step by step)

Learn web scraping with JavaScript through this easy step-by-step guide, and start extracting data from websites effortlessly and efficiently!

FastAPI and PostgreSQL docker compose setup (simple version)

Here is how my minimal setup for fastAPI and PostgreSQL project using docker-compose for local development

Faster ruby scraping program with threads

Learn how to make faster web scraping program with Ruby using Threads

Hidden gems in google serp for SEO content

Explore overlooked Google SERP features for SEO insights: Autocomplete, Featured Snippets, Knowledge Graph, and Related Questions

Scraping google search result with Ruby (For free)

Learn how to scrape google search result with Ruby. Without any paid service!

Web scraping with Ruby (for beginner 2023)

Beginner guide on how to scrape website content with Ruby

Guide on web scraping with Ruby

Learn what tools and how to scrape a website with Ruby

Install and run mongodb in Mac OS

How to install and run mongodb in mac with brew

How to use mongodb in Rails application

Rails does not support nosql database out of the box. Here is how to use mongodb as database in Rails

Render custom HTML, CSS and Javascript in Astro MDX files

Today I learn how to render custom HTML, CSS and Javascript in MDX Astro file. This is how you do it

What is `set -e` in shell

The `set -e` option in a shell script instructs the shell to exit immediately if any command exits with a non-zero status.

Astro error Expected ";" but found ":"

Here is how I solve error Expected ";" but found ":"

How to add meilisearch in Laravel

Learn how to install meilisearch in your Laravel app. Make your search system smarter

How to add inline script in NextJS

here is How to add inline script in your NextJS project

How to create a keyword ranking tracker SEO tool

This is how I build my own keyword SEO ranking tracker tool. Track how your ranking perform in Google

Astro Content collections Guide (For beginner 2023)

Managing contents in Astro (static site generator) is now more fun and safe with content collections

How to load component once in astro mdx (auto import)

Auto import any component to your mdx files. Set the component once and use it everywhere!

Move a file to a different folder in Github

How to move file to a different folder in Github.

How to create an SEO content research tool

This is how I build my own SEO research tool. It's great for writing a new content and want to make it top rank fast

How to create your own SEO tool

Introduction post on how to create our own search engine optimization (SEO) tools like ahrefs, semrush, Ubersuggest) and so on!

Select all new line in VS Code (shotcut)

Here is how you can directly select all new line (or end of line) in VS Code text editor

run code program on terminal every x time (seconds)

In order to run any command or program every X seconds or any time from your Mac terminal, you can utilize a shell loop with the sleep command.

Auto expand textarea with Javascript as you type

Here is how you can expand or grow your textarea if the content is already more than current height while typing

Access route without authentication in Django rest framework

How to access a route without authentication in Django rest framework, when the best setting has DEFAULT_PERMISSION_CLASSES

Solve sharp installation_error darwin-x64 install yarn error

This is how I Solve sharp installation_error darwin-x64 install yarn error on mac os x

How to prevent block or forbidden on Newspaper3k scraping

How to bypass blocked or forbidden to accessed content when scraping with Newspaper3K in python

Different column name on using ModelSerializer in Django Rest Framework

How to solve different column name upon using ModelSerializer and Class Meta in Django Rest Framework

How to Use Tailwind CSS in React JS

Step-by-step guide on integrating Tailwind CSS into a React project. From setting up a new React app, installing and configuring Tailwind CSS, to writing your first component with Tailwind classes

How to adjust row gap in a grid at Tailwind CSS

Learn how to adjust the row gap in a grid layout using Tailwind CSS. This guide covers the use of gap utilities, creating responsive row gaps, and real code examples for hands-on understanding

How to Center a Div in Tailwind CSS (Multiple Ways!)

Master the techniques of centering a div in Tailwind CSS, both horizontally and vertically. This guide provides practical examples using Flexbox and Grid layout utilities for precise element positioning

How to Create a Navigation Bar with Tailwind CSS

Step-by-step guide to create a responsive navigation bar using Tailwind CSS. From setting up Tailwind CSS, creating a basic nav bar structure, to making it responsive and adding interactivity.

How to revert or rollback migration in Django

Learn how to revert migrations in Django. This guide includes steps for reverting all or specific migrations and cautions to prevent data loss

Solving AttributeError: 'module' object has no attribute 'celery' in Django

Here is how to solve Solving AttributeError: 'module' object has no attribute 'celery' in python or when celery not found

How to cd (change directory) inside docker compose

Here is how you can CD into your app inside a running docker compose program that need to be executed

Connect database on app and GUI for Laravel Sail

Using Laravel Sail? here is how you can connect to your mysql database to your app or GUI like tableplus

Laravel vite manifest not found on deployment

How to solve error Laravel vite manifest not found on deployment

Target class controller not found laravel

How to solve error Target class controller not found in Laravel project

How to properly deploy Nova at Laravel Forge

Here is how you can add Nova to your fresh Laravel project that deployed via Forge

Get value response json from other funtion in Laravel

Here is how in Laravel if you need to get the value of response that returned json from local function

Verify only 1 edit action required to string in Javascript

The problem is to check if two strings are one (or zero) edits away. A javascript sample solution for this common interview problem.

Check if a string is palindrome permutation in Javascript

. In a palindrome, characters have to appear in pairs for the string to be mirrored around the center, except possibly for one character. Here is the javascript solution

Check if two strings is anagram on javascript

Here is how to solve the interview question for Check if two strings is anagram on javascript

Determine if all string has unique characters in Javascript

Determine if a string has all unique characters, you can use a Set in JavaScript. See case sensitive and insensitive version.

Chunking array buy n number in javascript

The array chunking problem is another common interview question. The goal is to divide an array into smaller sub-arrays (chunks), where each chunk is of size n

fizz buzz program sample in javascript

The FizzBuzz problem is a classic coding interview question. Here is sample program and how to solve it

How to find the maximum character in a string in javascript

How to check if string is Palindrome in Javascript

Checking if a string is a palindrome (same when reversed) in javascript. Also handling white space chars.

Check array only contains unique value javascript

How to verify array is only contains unique value in Javascript. Answer is using Set!

Renew SSL certificate Let's encrypt after Laravel Forge expired

When your subscription expired at Laravel forge, don't forget to reassign SSL certificate manually from your server

Convert data from jsonb postgres to array Javascript

Here is how to Convert data from jsonb postgres to array Javascript

Solving prisma error running on docker linux-musl

When running prisma inside a docker on my mac m1, it shows those error, here is how I solve it

Docker compose setup for traefik https using cloudflare DNS resolver

When using cloudflare as my dns, traefik did not work as expected when using it on docker compose. Here is how I solve it

Using highlightJS for code syntax in Astro

Today I faced a problem, where Laravel shows empty results when query a relation with eager loading. Found the solution, it was I forgot to select the id as well, so the relation didn't know what connects the second table with.

How to load external script in Astro

Require is not defined! How I solve loading external javascript library in Astro that uses a require to load module inside it.

find and replace text in VS Code using regex

Here is how to find a certain text on VSCODE using regular expression and replace it with anything you want using part of the text before

Render different component in react conditionally

How to render different components based on value or conditionally in ReactJS without using switch case since that's not available

understand useRef in React with simple example

what is useRef in Reactjs, when is it useful to use? what is the different with declaring normal variable in React

What's the difference between bit and byte

TLDR A bit is the smallest unit of digital data, while a byte is a group of 8 bits. It is used as a basic unit of measurement for the amount of data in computer systems

Migrating Hugo site to Astro

A long time Hugo fans here. I still struggle on doing query, routing or filtering. I tried Astro and really love it. Here is how you can migrate too

Solve docker django could not connect to server Connection refused postgre

Here is how I solve docker issue when running django could not connect to server Connection refused connecting to postgre database

Hugo vs Astro - which static site generator to choose in 2023

Which static site generator to choose in year 2023? should you pick the newcomer Astro or Hugo that been here for a while

Hugo shortcode in Astro Components

Migrating my site from Hugo to Astro, requires me to find out what is a Hugo shortcode relevant in Astro statice site generator

How to solve docker containers can not be down or stopped or removed - permission denied error

How to solve docker containers can not be down or stopped or removed caused by permission denied error

How to auto delete files in AWS s3 every X times interval in Nodejs

Here is how you can auto delete files from certain bucker in AWS s3 storage every X times interval in Nodejs, whether less than a day, an hour or any time you choose

I don't know what to write on my blog - developer

Blog about little new things you discover, if it's new to you, it may also be new to others

How to auto answer yes or no question when installing with apt in docker

When running a docker image, sometimes we need to install a package that requires us to answering a yes and no question. But docker will exit because of this

Learn the art of teaching dev from these people

list of people who are amazing at delivering dev/programming content

Updating poetry package manager from 1.1 to 1.2 1.3 or above

I got a problem when try to update my poetry package manager from 1.1 to 1.2 1.3 or above. Here is how I solve it

Solve poetry problem: configuration is invalid properties group was unexpected

Here is how I solve my poetry python configuration problem, where Additional properties are not allowed (group was unexpected) issue

How to create a new file in astro

To create a new file in astro site generator, we just need to create a new file inside pages folder with .astro extension

react developer tools guide 2023

This is a simple guide on how to use react developer tools in browser like chrome, firefox or safari to help us, debug and inspect: components, props and state

HTML code snippet with emmet

make your life easier as frontend developer, by using emmet as your HTML code snippet. By installing meet, you can write HTML code much much faster

You can ask AI, what is the output of the following code snippet ...

AI-powered tools can predict the output of code snippets, saving developers time & effort. However, it's important to review & test the code manually as AI is not perfect

What is code snippet meaning

Learn about code snippets, small pieces of code that serve specific purposes & can save time for developers. Discover where to find them & how to use them

Import function from another file in NodeJS without module

If you need to add an external function from other file into a nodejs file without changing the type into module type you can use this commonJS method

How many programming languages should I know

How many programming languages should you learn is a normal question to ask when you just beginning your journey in programming world. Here is my take

What is serverless and why it is important?

Serverless computing allows developers to write and deploy code without worrying about underlying infrastructure, leading to cost savings, scalability, flexibility, and security. However, it can also result in vendor lock-in and difficulties in debugging.

What is code review and why it's important?

Code review is an essential part of the software development process, as it helps ensure that your code is of high quality and meets the needs of your project

What is Coding tools

Coding tools can greatly improve your productivity and efficiency as a developer. From beginners to experienced programmers, it's worth exploring and trying out different tools to find the ones that suit your needs best

How to solve Unable to locate file in Vite manifest app sass at deploy

I got an error that says Unable to locate file in Vite manifest: resources/sass/app.sass when deploying my laravel app - here is how I solve it

Empty folder not copied to docker - folder not found on production

If your empty folder not copied to docker while on production and you getting error folder not found - here is how I solve it

Print X number of docker logs

Here is how to print certain amount of logs on docker. It is helpful for me to debug what is happening recently

Mocking next router on Jest test

How to mock the next router on Jest test function to be able to past query when rendering a component in React or nextjs App

Git error push remote branch src refspec does not match any

If you got error - src refspec does not match any, failed to push some refs to...- when trying to push change to remote git branch, here is how I solve it

Create a local branch from existing remote branch

If you want to test remote branch locally, you can use fetch method on git to try it on your machine

Install multiple fonts on docker images

Looking for a way on how to install multiple fonts on your docker images? here is how I did it

Passing children on React component results in error objects are not valid as a React child

How to solve error objects are not valid as a React child when passing a children into nested React Component

Put conditional logic onClick ReactJs

If you need a different behavior of your on click action in ReactJS, depend on if else logic you have, try this

Why is it like that

During debugging my app, I jump between solutions until I found what I want. But I forget to ask what causing the behavior in the first place.

How to learn new skills while having a job as a programmer

When and what to study on the side. Studying part-time is great because it can give you more flexibility to pursue your dreams without compromising your career goals.

Case sensitive when multiple select - cursor on VS Code

I often found myself selecting multiple variable on VSCode, but the problem is, it is case insensitive. Today I learn how to make it case sensitive

My cypress setting to run with GUI or not

Sometimes you want to see your test running with GUI, but sometimes not, you just want run CLI and see the test results. Here is my package json setup

Disable video recording when running Cypress

How to Disable video recording when running Cypress run test on you project

Should you write an automated test for your code?

Many developers feel like writing tests is a waste of time because they do not see the immediate benefits. Here is benefits when we write an automated test for our code.

How to solve Error jest-haste-map Watchman crawl failed.

Here is the solution on how to solve Error: jest-haste-map: Watchman crawl failed. Retrying once with node crawler when running Jest Test

Rotation on a previously rotated page on PDF-lib not correctly handled

I found a problem where rotating on a previously rotated page on PDF-lib is not correctly handled. Here is how I solved it

removing page in PDF-lib show error index must be at least x

removing page in PDF-lib show error index must be at least x and at most x , but actually... assertRange error. Here is how to solve this

Run block of code each time before certain test in Cypress

Do you need to run same code / function each time running a test? We can automate it with beforeach

Waiting for element exists in Cypress instead of time

Here is how to wait for a certain element until exists in Cypress instead of time

A (fake) conversation between the best programmer in the world with a junior

This is a fake conversation between the best programmer in the world with a junior generated with Artificial intelligence (AI)

How to choose the best developer tools for your needs

A new developer's guide to choosing the best tools, frameworks, and languages. It's important to do your research before making a decision.

Dragging item on mobile also scrolling the parent

When working with dragging library like interactjs, I got a problem with mobile devices. Where scrolling get buggy and moving the parent as well

Shortcut bash function to review Github Pull Request locally

This is my Shortcut bash function to review Github Pull Request locally faster

How to have a hover effect on children when parent is hovered in Tailwind

Learn how to have a hover effect on children when parent is hovered in Tailwind CSS. Luckily, this case is already covered, no hacky-way needed

Nested multiple condition on ReactJS

How to have a multiple if else condition in ReactJS template that depends on multiple set state variable or just in general

How to add word space in tailwind CSS

Is there any way to have a word space in tailwind? Yes, this is useful if you want to have a distance / space between word

Async await function not working in forEach loop Javascript

This is a quick solve on how to handle async await function not working in forEach loop Javascript

How to add and remove another git remote repository

You have an origin remote repository for your git. But you need to add other remote repository. Lets see how to do this

How to make zoom effect in HTML with CSS

Learn how to make zoom effect in HTML with CSS. We will play with scale transformation on CSS to make the element chosen bigger/smaller

How to declare type in Object destructuring typescript

Learn how to declare type in typescript when using Object destructuring in Javascript

How to declare object property type in typescript

Lets learn How to declare object property type in typescript using interface

Declare possible values of string in typescript

How to declare possible values of string in typescript. So we get an error if the provided parameter is wrong or have a typo?

What is type for onClick event in reactJS using typescript

What is the correct type when using onClick event in reactJS using typescript

How to resolve Option --resolveJsonModule cannot be specified without node module resolution strategy.ts

This is how to resolve Option '--resolveJsonModule' cannot be specified without 'node' module resolution strategy.ts error on typescript tsconfig.json file

How to use typescript in existing NextJS project

I already have a running NextJS project but I want to start using typescript. Lets see how to add typescript in existing NextJS project

Add class name based on ternary operator result in ReactJS

Lets see how we can add a class name based on ternary operator result in ReactJS. Whether a single class name or multiple class names.

Play with Image generation tool: MidJourney, Dall-E 2 and Stable Diffusion (DreamStudio)

I was stunned, the first time I saw Dall-E 2. I really want to use it. While waiting for the beta invitation. I got my hand on other image generation, and here is my experience so far.

Solve Too many re-renders. React limits the number of renders to prevent an infinite loop

I got an error on my react app says: Too many re-renders. React limits the number of renders to prevent an infinite loop. How can I solve this?

Solve state variable react can not be read in addEventListener function

Today I learned, that we can't access the variable inside addEventListener function we manually write for an element in React, Javascript

How to get x and y coordinate position when clicking on javascript

Learn How to get x and y coordinate position when firing on click event at javascript

How to use Toast UI Editor in Browser (without NPM)

Are you looking for great markdown WYSIWYG text editor? Try toast UI Editor, lets see how to use it directly in browser

Super simple Zoom image vanilla javascript medium like

I need an ability to zoom images on my site. Luckily I found this javascript plugin by Tholman that very easy to use.

How to solve Cannot use import statement outside a module error

This is How to solve Cannot use import statement outside a module error when running a nodejs application

Allow scroll through top iTerm mac

If you print or log bunch of data in Terminal (Iterm) normally, you can't scroll back to your latest command. Here is how to do it

Find list of developer tools with FindDevTools

Are you looking for a list of developer tools for your next project? FindDevTools is the answer. We can compare between tool , see it feature and pricing.

Error Laravel Please make sure the PHP Redis extension is installed and enabled

Encountered this error? Error Laravel Please make sure the PHP Redis extension is installed and enabled. Lets see how to solve it

Solve Class Redis not found on Laravel project

Do you encounter error Class Redis not found on Laravel project and looking for a solution how to resolve this bug?

Sort Javascript Object Value by the number or date

Do you need to sort your object by one of the key value by the number? start from highest or lowest number? We can use javascript sort function fort that. Here is how

Sort javascript Object value alphabetically

Do you need to sort your object by one of the key value alphabetically? We can use javascript sort function fort that. Here is how

Prisma error when doing upsert

When implementing upsert through Prisma you need to make sure that the where clause contains a unique column only

Auto Scroll page in Javascript

Do you have a really long page that you wish will scroll down automatically using javascript? or do you want to make this as feature for your website visitor?

Checkout remote pull request on Github and run locally

If you need to review someones pull request from Github and run the project locally. Check out this guide

How to test pull request locally

You're assigned to review your teammate's code from remote git repository. But rather than just reviewing it directly in Github, you want to run it locally first. Here's how

How to Install Laravel on Mac OS

Learn How to Install Laravel on Mac OS, by using brew and installing PHP, composer and mysql (if you need mysql)

Get uuid from a link string in python

Learn how to get UUID from a string link on a python programming language. This could be useful for example when you are working with Notion site then need to grab the id

Solving Error: pg_config executable not found psycopg2 install

On my mac machine, I tried to install a new python library with psycopg2 in it, I got pg_config error, here's how I solve this error

How to add multiple types in pydantic

To allow pydantic to accept multiple values we can use Union

How to allow local certificates in Postman?

When you have self assigned certificate in your computer and want to allow Postman to access it, you need to add the certificate from your trusted store

How to make bcrypt checkpw function work

If you're using bcrypt in python, and try to use checkpw but keep failing, probably you save the hashed password in database wrong. Here's how I solve it.

Solve alembic multiple head revisions are present

Just like git, When you have multiple branches on your migrations of sqlalchemy's alembic. It will tell you that you have two different versions that need to be solved.

How to convert sqlalchemy object to json in FastAPI

Have you struggled on How to convert sqlalchemy object to json in FastAPI? Do you know that fastapi has jsonable_encoder to do exactly this job?

Solve error Alembic Can't locate revision identified by id_number

If you're using Alembic as your migration tool for sqlalchemy project on your python program, you might encountered this problem before -Alembic Can't locate revision identified by id_number- here's how to solve it.

How to bulk update in sqlalchemy python?

Update multiple columns one by one is daunting. Learn how to do a bulk update on Sqlalchemy in python programing language to update multiple items at once.

Convert string to UUID format in Javascript

This is how to convert a 32 characters string into UUID format with - dash as separator on each 8 - 4 - 4 - 4 - 12 characters.

Laravel empty relation when eager loading

Today I faced a problem, where Laravel shows empty results when query a relation with eager loading. Found the solution, it was I forgot to select the id as well, so the relation didn't know what connects the second table with.

Solving the Next.js Head problem that auto parse HTML entity

I want to share how I finally solved the Next.js Head problem that auto parse HTML entity. In my case, I want to remove & (ampersand sign) being encoded by Next.js Head.

Start using mongo shell in docker

Simple guide on how to Start using mongo shell in docker. We just need to take the mongo's docker name and run it as interactive shell.

How to install meilisearch in ubuntu for production?

Learn how to install meilisearch in ubuntu for production. This guide will tell you how to add meilisearch search engine on same server where your app runs.

Remove all unsaved / uncommitted changes in github

See how to Remove all unsaved / uncommitted changes in github. In case you make some changes, and want to get back to the last commit you have

Connect Production Docker PostgreSQL In TablePlus/SequelPro

Tips on how to connect production Docker PostgreSQL using database GUI TablePlus or sequelpro. Hope it works for you as well

Connect Localhost Docker PostgreSQL in TablePlus

Tips on how to connect Localhost Docker PostgreSQL using database GUI TablePlus or sequelpro

Traits in Rust

Learn what is Traits in Rust. Tutorial on how to implement Traits in Rust programming language. It's similar to interfaces in other languages

What is Lifetime in Rust?

Understand What is Lifetime in Rust? what error a lifetime could cause and how to solve this problem

Generic Types in Rust

Learn what is Generic Types in Rust. Tutorial on how to implement Generic Types in Rust programming language

Hash Map in Rust

Learn what is Hash Map in Rust. Tutorial on how to use Hash Map, the key value pair collection in Rust

Vector: collection in Rust

Vector can be used to storing lists of values in Rust. It's one of the collection that included in standard library in Rust

Collections data structure in Rust

Learn about Collections data structure in Rust. What collections is available and how to use it

If and let in Rust Control flow

When there are many possible values, but we only care about one in a control flow, we can use if and let syntax in rust.

Match control flow in Rust

There is one more powerful control flow in Rust, which is match. It's pretty straightforward, we would return a value based on match condition

The Option Enum in Rust, null alternative

Rust didn't have a null value. But there is an Enum Option that can implement null behavior

Enums in Rust

Learn what is enums in Rust programming language. How to use enums and when to use it

Struct Method in Rust

How to add a method on a struct in Rust. If we do have a special repeatable task for a struct, it's better to put it, in it's own function

Struct data type in Rust

Learn what is Struct data type in Rust? How to use structure data type in Rust programming language

Slice data type in Rust

Learn about Slice data type in Rust. It's a reference for sequence of elements in a collection

References in Rust

This is part of the ownership lesson in Rust. References is a cheap way to use other variable on other function without passing the whole value

Understand the stack and the heap

What is stack and what is heap in term of memory allocating in programming language?

What is ownership in Rust

Understand what is ownership in Rust. Ownership enables Rust to make memory safety guarantees without needing a garbage collector.

Looping in Rust

Learn how to loop a program in Rust, using for, loop, and while. It's part of the control flow process

Variable Scope in Rust

Understand the variable scope in Rust. This is an important part so we can learn how Rust allocating their memory later

Conditional statement in Rust

Learn how to implement a Conditional statement in Rust. Using if and else. We can also use just one line if else to declare variable

String in Rust

String in Rust might be more complex than you think. When people talk about string, it can have multiple meaning

Function in Rust

What is a function in Rust? Learn how to declare and user a function in Rust.

Data types in Rust

What are available data types in Rust ? It also has two subsets: a scalar data type and a compound data type, including array and tuples

Declare a variable in Rust and mutability

Learn how to declare a variable in Rust. Also see what is mutable and immutable variable

What is Cargo in Rust

Cargo is Rust's build system and package manager. It's an optional tool, but it handles a lot of tasks to work with Rust

Hello World in Rust

Write our Hello World in Rust. It requires compiling and running

Getting started with Rust, installation

Let's set up our Rust development environment. We will use Rustup / Cargo as our installer and package manager.

I start learning Rust

I always see posts about Rust on dev-related blogs. I don't have the motivation to learn about it, as I heard it's built for complex project. Maybe I can use this blog to motivate me.

Hover effect on 5 star rating systems

This is my solution on how to make a Hover effect on 5 star rating systems

Solve Unexpected end of JSON input while parsing near... on NPM install

Yesterday when my internet really slow, I keep failed on installing npm package. The error shows npm ERR! Unexpected end of JSON input while parsing near .....

Add Browser Sync in Gulpjs Project

How can we auto reload pages when certain changes happen? we can combine the power of browser sync and gulpjs

Watch Tasks in Gulpjs

Learn how to watch Tasks in Gulpjs so the files can reload themselves when certain task triggered

Combine Tasks in Gulpjs With Parallel Function

Learn how to Combine Tasks in Gulpjs With Parallel and Series Function as your tasks grow

Compress image with GulpJS

Learn how to compress multiple images with GulpJS, we don't need any extra tools for this, just run our gulp tasks

Combine Multiple Javascript (JS) Files With GulpJS

Learn how to combine Multiple Javascript (JS) Files With GulpJS. Sometimes we want to separate our javascript file during development process to make it easy for use to maintain it. But in production we still want to only serve one file for faster request time.

Minify CSS files with Gulp JS

Learn how to Minify CSS files with Gulp JS to make it load faster

Simple jquery like selector for vanilla javascript

jQuery make us love javascript. One of the simplest but most useful feature for me is the selector in jquery, just use $ dollar sign and target the element. Let's make it happen in our vanilla javascript

Working with object in localstorage

We all love localstorage, no database needed to store simple things for our user. But what if the data is more than a string or number? How to store and read object in localstorage?

Combine multiple CSS files with GulpJS

Learn how to combine multiple CSS files into one file with GulpJS, it's useful to make sure our HTML will only request for one file later (reduce request time)

GulpJS introduction, how to install

This post will be an introduction post on GulpJS. A toolkit to automate & enhance your workflow Leverage gulp and the flexibility of JavaScript to automate slow, repetitive workflows and compose them into efficient build pipelines.

Display or filter a list of post based on a category or tag in Hugo

Learn how to display a list of post based on a category or tags in Hugo . This is not for normal category page, since Hugo will sorted it out for you out of the box. This is for when you want to display certain list on a random page

Display categories or tag on meta data Hugo inside head tag

Yesterday I struggle with displaying a list of categories or tags inside a head tag of my Hugo project. I want to use this on my meta tag to make it more dynamic a.k.a better for SEO.

How to concatenate string on hugo SSG

quick tips on How to concatenate string on hugo SSG or how to combine string with variable on gohugo

Solve Warning: REMOTE HOST IDENTIFICATION HAS CHANGED

You can't access your remote host? and the error WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED or IT IS POSSIBLE THAT SOMEONE IS DOING SOMETHING NASTY shows up? this is how to solve it

Create Open Graph Image generator, introducing imagin.live

We need an image for each of our blog post to make it stand out on social media. But generating for each one for our post is not fun. That's why you'll love Imagin. It's a post about how I make Imagin, dynamic open graph image generator

How to remove last commit on github

It's just happened to me yesterday, where I push something to main branch, but not the main branch that I want. I start panicking and looking for help how to undo my last commit before anyone see the changes

Introduce Row Level Security in Supabase

Supabase has a row level security that useful for protecting our data. Even though we're using anon key publicly or in client side, it's still safe as long as we enable the row level security for that particular table

Basic of Authentication in Supabase using email invitation

Supabase provides an authentications system for us out of the box. We can use it as user management. It has third party logins (social login) and row level security for security. We'll take a look of example using simple email invitation

Play with Supabase database in website with Javascript

Learn how to create and read Supabase database via it's API with Javascript on a website. We will use in browser javascript to load the data and display it on our HTML page.

Explore table editor in Supabase database

Exploring table editor for managing database in Supabase. It's like an app that has Graphical User Interface (GUI) where we can do something intuitively without knowing any SQL. Supabase's database is built on top of Postgres, an extremely scalable relational Database. We can use the SQL editor or Table Mode which makes it like spreadsheet