A collection of tech essays and notes.

notes

How to break columns in Bootstrap

3 November 2024

Breaking columns to a new line in flexbox requires a small hack: add an element with width: 100% wherever you want to wrap your columns to a new line.

<div class="container text-center">
  <div class="row">
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

    <!-- Force next columns to break to new line -->
    <div class="w-100"></div>

    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  </div>
</div>

You can also apply this break at specific breakpoints with our responsive display utilities.

<div class="container text-center">
  <div class="row">
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

    <!-- Force next columns to break to new line at md breakpoint and up -->
    <div class="w-100 d-none d-md-block"></div>

    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  </div>
</div>
References

Bootstrap Doc

notes

To generate random value in PL/SQL

30 October 2024

To update a column with a random value in PL/SQL, you can use the DBMS_RANDOM package, which provides functions for generating random numbers or strings.

To update random number

BEGIN
    UPDATE employees
    SET salary = ROUND(DBMS_RANDOM.VALUE(100, 500));
    COMMIT;
END;
  • DBMS_RANDOM.VALUE(100, 500) generates a random decimal number between 100 and 500.
  • ROUND is used to convert the decimal value to an integer.

To update random string

BEGIN
   UPDATE employees
    SET password = DBMS_RANDOM.STRING('x', 8);  -- 'x' specifies alphanumeric characters
    COMMIT;
END;
  • DBMS_RANDOM.STRING('x', 8) generates an 8-character alphanumeric string.
  • ‘x’ specifies alphanumeric characters (letters and numbers). Other options include ‘a’ for alphabets and ‘u’ for uppercase only.
notes

PL/SQL MINUS Operator

23 October 2024

The PL/SQL MINUS operator returns all rows from the first query that are not present in the second query. Each SELECT statement defines a dataset, and the MINUS operator retrieves all records from the first dataset, excluding any that also appear in the second dataset.

select stock_id, stock_name
from stock_master
where active = 'Y'

minus

select stock_poid, stock_desc
from stock_ledger
where transaction_date > '01-JAN-24'
References

Tech on the net

notes

Slash pages in Hugo

16 October 2024

In Hugo, creating different slash pages (like /about/, /uses/, etc.) involves creating specific content files for each page and customizing templates as needed.

  • Create individual markdown files for each slash page under content/.
    If you want to create an /about/ page in your blog, add a markdown page with below front matter in the content/ page.
//content/about.md

---
title: "About"
date: 2024-10-16
---

This is the About page content.
  • Optionally create a template for the page.
    Hugo uses the single.html template from the layouts/_default/ folder to render pages by default. However, you can create custom templates in the layouts/page/ folder to format specific pages as needed.
//layouts/page/about.html

<h1>{{ .Title }}</h1>
<div class="content">
  {{ .Content }}
</div>

You can check my slash pages like uses, credits, and changelog.

References

Hugo Docs

notes

Hugo Troubleshooting

14 October 2024

Hugo is fast, but ineffecinet templates can make it slower. For checking the performance you can use the below commands.

  • Use hugo --logLevel debug to display debug information, warning, and error message.

  • Use hugo --templateMetrics to check for slow templates. This will show the time it takes to render each template.

  • Use hugo --gc (garbage collection) to clean up unused files, which might help reduce build time.

  • Use debug.Timer to determine the execution time of a block of code. And use the hugo --logLevel info info command line flag when you build the site.

{{ $t := debug.Timer "TestSqrt" }}
{{ range seq 2000 }}
  {{ $f := math.Sqrt . }}
{{ end }}
{{ $t.Stop }}
References

Hugo Docs

essay

Understanding useRef

2 October 2024
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...
notes

Higher order functions

20 August 2024

A higher order function is a function that takes one or more functions as arguments, or returns a function as its result.

These functions are powerful because they allow you to abstract and compose operations in a flexible and reusable way. They are a fundamental concept in functional programming.

Common examples of higher order functions are .map(), .filter(), and reducer().

.map(): Takes a function as an argument and applies it to each element in an array, returning a new array with the results.

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8]
References

Namaste JS, FreeCodeCamp

essay

Tiny React Apps

15 August 2024
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.
essay

Understanding useCallback

5 June 2024
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...