Recent content in Essays on Bino
Nowadays I have a feeling that most of the software or apps on laptops and mobiles are too complicated or over-engineered. The apps I am using nowadays have too many features other than their core purpose. I know these apps are made for a wide range of users, and the corporations behind them want their products to be feature-rich and appeal to a larger audience. And they want to make a ton of…
While reading the article Small Web Just Got Bigger on the Kagi blog and I landed on Kagi Small Web and found it interesting. What is Small Web? While there’s no single, perfect definition, we like to define the Small Web as personal blogs, independent videos, webcomics, and other authentic spaces created for non-commercial purposes, usually for self-expression or community building. Basically,…
To be honest, I love beautiful and brilliant quotes. They can come from anywhere, like smart people , movies , or books. I don’t care where they come from. If they inspire me, I love them. The most beautiful part is that I enjoy collecting and curating them. Usually, I note them down and go through them again whenever I want. After a while, I thought I could add them here somewhere so they could…
I have created an app called Life Left to remind me about the time that is left in life, of course hypothetically. I can die today or tomorrow, and I am well aware of that. But I need to know what is left for me based on an ideal life expectancy. It is a minimalist life reflection web app that helps users visualize how much of their life may still remain, based on their age, retirement plan, and…
Earlier this year, I shared my default apps of 2023 here . This is the 2025 edition. The big change is that I’ve moved more into the Apple ecosystem, while most of the rest has stayed the same. You can find more default apps catalogued by Robb Knight . 📨 Mail Client: Apple Mail 📮 Mail Server: Google 📝 Notes: Apple Notes and Notion . ✅ To-Do: Notepad and pen are working fine for me. 📷 Photo…
Lightbi profile and blog home page Last week I released version 2 of Lightbi . I had been planning it for a very long time, but the time didn’t permit me until now. When I created this theme, my intention was simple. I needed a card-based theme for my website that was simple and elegant to use. I wasn’t lucky enough to find a theme I liked, so I created this one. And yes, I have open sourced it.…
I installed macOS and iOS 26 public beta today. The main attraction in this update is the design change called Liquid Glass . I liked the Liquid Glass design in most places, but in some areas, it has readability issues. Below are the features I liked in the update: iPhone Liquid Glass design – It gives a uniform and fresh look to almost all inbuilt apps. But in some places, there are readability…
In this post, I’m sharing some handy PL/SQL queries that help with monitoring and maintaining Oracle databases. As I learn new scripts, I’ll keep adding them to this list. Tables To check the source code ALL_SOURCE is a data dictionary view that shows the PL/SQL source code (line by line) of procedures, functions, packages, triggers, and types that the current user has access to, even if they are…
I hope you know what is React and React DOM. Now let’s dig deeper to understand what is the difference between these two. As you understood earlier, React and ReactDOM are two distinct libraries that are commonly used together in the development of web applications with React. What is React? React is a JavaScript library focused on building user interfaces. It follows a declarative approach, where…
Today, I updated the about page to display featured blog sections dynamically using front matter tags. This replaces the previous hardcoded method for a more flexible setup. So here I am sharing the details. It’s a simple approach that can be done in three steps: Add featured field to the front matter. Create a page to list featured content. Include the featured section where needed. Add featured…
Earlier this week, I went to a seminar on Amazon AWS conducted by one of their partner organizations. During the session, one of the slides highlighted success stories from AWS clients, including Sony Corporation. They shared how Sony migrated to AWS and adopted PostgreSQL as part of their cloud transformation strategy. Until now, I hadn’t used PostgreSQL myself, but this made me curious. how many…
React Suspense comes handy when you want to show an indication to user that something is loading in your app. Loader is the simplest example for a Suspense component. Let’s deep dive into the details of Suspense. What is Suspense? <Suspense> lets you display a fallback until its children have finished loading. — React Docs Syntax: < Suspense fallback = { < Loading /> } > < SomeComponent /> <…
When I built this website, I checked for a free static hosting solution that was easy to use and maintain. After a little research, I landed on Netlify. I found hosting a Hugo site on Netlify to be an effective solution for deploying static websites. Combining Hugo’s speed with Netlify’s robust features, such as continuous deployment, a user-friendly dashboard, and advanced build settings, made…
Here’s a custom Hugo shortcode that creates an image gallery in a masonry style using GLightbox. This approach will display images from a specified folder in a masonry layout, and each image will open in a lightbox when clicked. Lightbi Hugo Theme This feature is available in the Lightbi theme, and you can explore it further here . Step 1: Set up the shortcode In your Hugo site’s theme directory,…
A few months ago, I wrote a post on creating a feed page to list all posts on my Hugo website in a card format with pagination. Even though I am able to view the full posts, I wanted a clearer month-by-month view. After researching, I updated the feed to organize posts by month. Now, I’m sharing the setup details below for anyone interested in creating a similar layout. There are three steps…
useRef is a powerful React Hook that allows you to create and manage mutable references that persist between renders. Unlike state, changing the value of a useRef object does not trigger a re-render, making it ideal for scenarios like accessing DOM elements or managing values that don’t directly affect the UI. What is useRef? useRef is a React Hook that lets you reference a value that’s not…
This is a collection of tiny apps built with React, designed to explore and learn React along with its associated libraries. Each project serves as a hands-on experiment to try out new features and deepen understanding of the React ecosystem. Below is a list of tiny React apps, ranging from weather applications to dashboards. Weather App Note App Photos App Job Summary App QR Code Generator You…
I hope you know what is useMemo and understood that it caches the values between re-renders. useCallback is similar to this and it caches a function instead of values. Let’s dive into the details of useCallback . What is useCallback? useCallback is a React Hook that helps you memoize a function definition, ensuring it remains the same across re-renders. Although useCallback shares a similar…
I’m creating an online handbook about React that will cover all the basic topics. Unlike a physical handbook, this online book will evolve over time as I continue to learn and grow. I’ll keep updating the topics whenever I discover something new. Please note that these essays and notes are not entirely my original work. I’ve compiled them from various sources, including books, blogs, videos,…
React ensures your user interface stays in sync with the application state by using a technique called re-rendering. During re-renders, React compares the Virtual DOMs and updates the necessary parts of the UI. This process is known as React Reconciliation . Although React optimizes re-rendering for speed, some tasks can slow it down, leading to performance issues. To address this, React…
Redux is a JavaScript library that can be used with various JavaScript frameworks, including React, Angular, Vue, and Vanilla JS. It serves as a state management tool for handling cross-component or app-wide state. In simpler terms, Redux functions as a centralized container for storing the state (data that, when modified, impacts the UI) of your JavaScript application. This state is then…
A React Single Page Application (SPA) is essentially a static website and can be easily hosted using platforms like Firebase or Netlify. Here I am explaining the steps for hosting React app on Firebase: Login to Firebase Account: Log in to your Google Firebase account. Create a Project: Create a new project and choose a name for it. Proceed to the next step by clicking the continue button.…
In React there are several built-in Hooks like useState , useEffect , and useContext . Sometime you need to create your own Hooks for specific purpose like checking user session, fetching data, or showing notifications. For these type of application specified purpose you can create custom Hooks in React. So basically, Hooks are the functions using in the React to do a particular task. Creating a…
Traditionally, you pass information from a parent component to child component via props in React. But data passing through this props drilling can make your code verbose and inconvenient if you have more components in the middle, or if many components in your app need the same information. For solving this, in V.16.3 React introduced Context and it helps you to share data to any component with…
Here I am listing the commands using for creating, running, and fetching the scheduler jobs in Oracle database for easy reference. Start, Stop, and Delete jobs Jobs can run and stop manually using RUN_JOB and STOP_JOB procedures. The use_current_session argument of RUN_JOB determines whether a job runs synchronously or asynchronously. BEGIN -- Run job synchronously. DBMS_SCHEDULER . RUN_JOB (…
Read the Defaults app of Chris Coyier and found interesting. Here is mine: 📨 Mail Client: Gmail 📮 Mail Server: Google 📝 Notes: Notion for long notes and Keep for quick ones. ✅ To-Do: Notepad and pen are working fine for me, Occasionally using Keep also. 📷 Photo Shooting: Android Camera 🎨 Design: Canva 📆 Calendar: N/A 📁 Cloud File Storage: Google Drive 📖 RSS: Currently not using anything,…
This website contains various types of blogs, both technical and non-technical, that can be accessed through the following links: blog , notes , and desk . I wanted to have a single page where I could see all the posts I have written on this website and track my blogging progress. That’s why I created this feed page , where you can find all my blogs from this website. Let’s break down how we…
This is the second note in the TypeScript series. In this post, we will explore the fundamentals of TypeScript. The Fundamentals As you know, JavaScript has built-in types such as string , number , bigint , boolean , undefined , null , and object . TypeScript extends these types and introduces new ones, including any , array , unknown , enum , and tuple . any The any type is a special type that…
These is a series of notes about TypeScript. In this first part you will learn what is TypeScript, how to install and debug the same. What is TypeScript? Programming languages can generally be categorized into two types: dynamically typed and statically typed . Dynamically Typed Languages: In dynamically typed languages like JavaScript and Python , variables do not have fixed types. You can assign…
Welcome to Issue #7 of The Codbix! This week: Habits of great software engineers, Decision Making at Netflix and How to get your brain to focus. Are remote workers more productive? That’s the wrong question. A recent study reported in Forbes found that “workers who worked from home 100% of the time were 20% happier on average than those who didn’t have the ability to work from home.” That study…
Welcome to Issue #6 of The Codbix! This week: Use code visibility to illuminate unfamiliar code, Laravel community and How to Get Your Brain to Focus. From chaos to clarity: Use code visibility to illuminate unfamiliar code At its core, code visibility is about mapping your code so that even the freshest of developers can reason about it. Code visibility is about capturing knowledge of the various…
Image Gallery Shortcode Curious about creating an image gallery shortcode in Hugo? Click here to learn more. This website is built with Hugo, a static site generator that uses Markdown for writing content files. Markdown allows you to insert images with the following syntax:  However, this syntax has some drawbacks, such as not being able to add a title, a caption,…
If you are using Hugo as your static site generator, you might want to create a card shortcode that can display different types of information on your blog posts. A card is a small rectangular element that can show an image, a title, a subtitle, and some text. In this post, I will show you how to create a card shortcode that can accept both predefined data and custom data that you can pass from…
Here I am listing some of the Hugo custom shortcodes I have created for my to use in this website. Before going to custom shortcodes, you need to unnderstand what is a shortcode in Hugo. Shortcodes Shortcodes are a way to insert templates into your content files, as explained on Hugo website. They allow you to add features that are not supported by Markdown, such as YouTube videos, images, info…
Welcome to Issue #5 of The Codbix! This week: Learn how to build tools, Things we Wished More Developers Knew About Databases, and The Italian Town That Built Its Own Sun. Learn how to build tools Our jobs and lives are full of repetition, and one of the beauties of being developers is that we can take steps to automate away some of the repetition. Learning to automate, or at least minimise,…
Introduction to React React is an open-source JavaScript library for building user interfaces, particularly well-suited for single-page applications. It enables developers to create modern, responsive web and mobile interfaces using a declarative, component-based approach. React was created by Jordan Walke, a software engineer at Facebook. It was first deployed on Facebook’s News Feed in 2011 and…
Writings comments in the code will help you and anyone who reads the code by giving more readability and understandings. As you know the compiler ignores the comments and there is no straight way to verify the comments, we should make sure that the comments are easily readable and should not duplicate the code. We need to keep the same in the mind when we are writing Stored Procedures. so here I…
Welcome to Issue #4 of The Codbix! This week: Modern work requires attention, Self-healing code is the future of software development and How The world’s biggest batches of food are made. Modern work requires attention. Constant alerts steal it When we have multiple demands on our attention, we try multitasking—splitting our spotlight or shifting it rapidly to focus on the many tasks that come our…
I want to create a cheat sheet for PL/SQL data dictionary views. It will serve as a quick reference to easily explore and query database metadata. In RDMS, Data dictionary is a collection of READ-ONLY table and views that contain metadata about the database. It consists data about all the usrers in the system, thier roles, database objects (Table, View, Sequence, Index, and Synonym), storage…
I recently moved my website from another domain to this one. I need to route the users from the old to this without much effort. So I decided to write a simple JavaScript which redirect from one page to another. If you want the solution right away, copy and paste the below. < script type = 'text/javascript' > var timer = setTimeout ( function () { window . location . replace (…
Installing a specific version of an npm package, something that will help to solve compatibility issues. You can use the below command for installing a specific version of a npm package. npm install < package > @ < version > Example Below will install the current verion of the axios. npm install axios If you want to install the verions 0.22.0 you can use the below. npm install axios @ 0.22 . 0 For…
Welcome to Issue #3 of The Codbix! This week: The Arc Browser, Databases Sharding Explained, The Boy, the Mole, the Fox and the Horse, and Workspaces. The Arc Browser Arc is an internet browser released in 2022 by the Browser Company, a team of alums from Instagram, Google Chrome, Snap, Slack, Pinterest and more. I hope this will be worthy competitor to Chrome and may change the game forever. Link…
Welcome to Issue #2 of The Codbix! This week: Improve productivity through incremental automation, The modern web’s underrated powerhouse, and Wallpapers by Smashing Magazine. Improve productivity through incremental automation Small enhancements to daily workflows can have an outsized impact on the amount of available space in our day. Article link Out of the slums and into open source Using…
JSX is a XML-like syntax extension to ECMAScript (the acronym stands for JavaScript XML). Basically it just provides syntactic sugar for the React.createElement() function, giving us expressiveness of JavaScript along with HTML like template syntax. Before React V17, we have to use import React from "react" in every JavaScript file to use the React.createElement for creating an elemet. We are…
Welcome to Issue #1 of The Codbix! This week: Learn In Public, Make free stuff, documentation, and Brag now. Learn In Public If there’s a golden rule, it’s this one, so I put it first. All the other rules are more or less elaborations of this rule #1. A habit of creating learning exhaust: Write blogs and tutorials and cheatsheets. Speak at meetups and conferences. Ask and answer things on…
This post is assuming that you know how to make a blog in Hugo and what is shortcodes in Hugo. When I updated this blog recently with blogrolls , I wanted to display cards in my Markdown. Instead of using raw HTML, I decided to create a custom shortcode for cards. In the below I will explain how to create a custom Hugo shortcode and acess the same in the template. Lightbi Hugo Theme This feature…
As you know, React is a JavaScript library for building user interfaces. It can use to build complex, interactive and reactive user interfaces simpler using the Components . What is a Component? Components are made up of HTML, CSS and JavaScript. It will help you to split the User Interface into independent and reusable pieces. Through that you can implement reusabaility (don’t repeat…
In JavaScript, declarations are hoisted . Variables declared using let and const are hoisted to the top of their block scope but are not initialized . While the block is aware of the variable, it cannot be used until after it has been declared. This period is known as the temporal dead zone —the time between the start of the block and the point where the variable is declared. console . log ( a );…
Scope Scope is the place where you can access the values of your variables or functions in our code. There are three types of scopes are available in JS: Global Scope, Local/Function Scope, and Block Scope . Global Scope When you open up a JS document, you are in the Global scope. Anything you write in the Global scope is accessible from everywhere in the JS. They are also available for the…
JavaScript Hoisting refers to the process whereby the interpreter appears to move the declaration of functions, variables or classes to the top of their scope, prior to execution of the code. — MDN Web Docs Conceptually variable hoisting is often presented as the interpreter “splitting variable declaration and initialization, and moving (just) the declarations to the top of the…