A collection of tech essays and notes.

notes

Canary in software development

27 February 2024

In software development, a canary release (or canary deployment) refers to the practice of rolling out a new version of software to a small, select group of users before deploying it to the entire user base. The term “canary” comes from the old practice of using canaries in coal mines to detect dangerous gases; if the canary showed signs of distress, miners knew to evacuate. Similarly, in software, the canary release acts as an early warning system to detect issues with new code before it reaches a wider audience.

Benefits of Canary Releases: Reduced Risk: Limits the impact of potential issues by exposing the new version to only a small group first. Real-World Testing: Provides the opportunity to observe how the new version performs in a live environment. Faster Rollback: Easier to revert changes if problems are detected, reducing downtime or negative user impact.

notes

Set up a React project with Vite along with Tailwind CSS

22 February 2024

Here is the step by step guide to create a React project with Vite.

  • Run the command npm create vite in the command prompt.
  • Afer the script you will be prompted to enter a project name.
  • After entering the project name, Vite will prompt you to select a framework. Select the framework as React.
  • After selecting framework, Vite will prompt you to select language type.
  • After selecting the language type, Vite will show the message as Scaffolding the project in the location.
  • After that you can go to the folder and instruct to install the dependencies with the command npm install.

And here is the step to install Tailwind CSS as a Vite plugin.

  • Run the command npm install tailwindcss @tailwindcss/vite to Install tailwindcss and @tailwindcss/vite via npm.

  • Add the @tailwindcss/vite plugin to your Vite configuration.

    import { defineConfig } from 'vite'
    import tailwindcss from '@tailwindcss/vite'
    export default defineConfig({
    plugins: [
        tailwindcss(),
    ],
    })
    
  • Add an @import "tailwindcss"; to your CSS file that imports Tailwind CSS.

  • After that you can run the project with command npm run dev or whatever command is configured in your package.json file..

References

DigitalOcean, TailwindCSS

notes

What is Skeuomorphism?

21 February 2024

I noticed every design is incorpating rounded edges in their rectangle shapes (yes, my website cards also). Today I Googled it and after reading some articles, I stumbled upon Skeuomorphism.

So, here I am noting down what is Skeuomorphism?

Skeuomorphism is a term most often used in graphical user interface design to describe interface objects that mimic their real-world counterparts in how they appear and/or how the user can interact with them. A well-known example is the recycle bin icon used for discarding files. Skeuomorphism makes interface objects familiar to users by using concepts they recognize.

In UI design, skeuomorphism had its boom with the advent of the first iPhone. Steve Jobs believed that UI elements should resemble real-life objects to increase ease of use. For example, the Notes app looked like a notepad. However, as users became more familiar with the iOS interface, Apple transitioned to flat design with fewer shadows and textures. Flat design stripped back skeuomorphic elements to essentials for faster loading and decluttered touchpoints.

References

Interaction Design

notes

Connecting MySQL from command line

13 February 2024

Open the command prompt and type the below to connect the MySQL:

mysql -u username -p

After the above command the command line will prompt you to enter the password and after entering the password you can query the database.

References

Stack Overflow, MySQL Doc

notes

Non-editionable objects

10 February 2024

When you are create an object in Oracle Database, default object type will be marked editionable. From 12c onwards, you can mark the objects as noneditionable , and same you cannot edit with create or replace . For altering the same you have to alter the object and change to editionable.

This is applicable to View, Funcitons, Procedure, Trigger, Library, Type.

create or replace noneditionable procedure test_proc ( p int ) as
begin
  null;
end;
select editionable from user_objects
where  object_name = 'test_proc ';

//result
EDITIONABLE   
N
create or replace procedure test_proc ( p int ) as
begin
  dbms_output.put_line ( 'Editionable version' );
end;

//result
ORA-38824: A CREATE OR REPLACE command may not change the EDITIONABLE property of an existing object.

With below you can alter the procedure.

alter procedure test_proc editionable;
create or replace procedure test_proc ( p int ) as
begin
dbms_output.put_line ( 'Editionable version' );
end;

exec test_proc (1);

//result
Editionable version
References

Oracle Doc

essay

Job commands in Oracle PL/SQL

2 February 2024
Here I am listing the commands using for creating, running, and fetching the scheduler jobs in Oracle database for easy reference.
notes

Export your Kindle book highlights

24 January 2024

If you want to export your Kindle book highlights without the page location and color information, you can follow these steps:

  • Export the content in any format you prefer.
  • Paste the content in Visual Studio Code or any other text editor that supports regular expressions.
  • Use the regular expression Highlight \(yellow\) - Location [0-9]+ in the Find and Replace tool to replace Highlight (yellow) - Location 01.
  • Replace all the matches with an empty string.

This will remove the unwanted details from your highlights and leave only the text you want to keep.

essay

Default Apps 2023

21 January 2024
Read the Defaults app of Chris Coyier and found interesting.
notes

Name attribute in input tag

15 January 2024

The name attribute specifies the name of an <input> element. It is used to reference elements in a JavaScript, or to reference form data after a form is submitted to the server.

Only form elements with a name attribute will have their values passed when submitting a form.

<form action="http://localhost" method="POST">
    <label for="User">User name</label>
    <input type="text" id="User" name="Name" value="bino" />
    <input type="submit" value="submit" />
</form

When you submit the above, server localhost will recive a content like below:

Name=bino
References

w3schools