Saturday, December 2, 2023

Few Useful Git Commands with Example for Beginners

     Git is a distributed version control system (DVCS) that is widely used for tracking changes in source code during software development. It was created by Linus Torvalds in 2005 to manage the development of the Linux kernel, but it has since become the de facto standard for version control in the software development industry.

Let’s dive into some Git commands,

git config

Usage: git config --global user.name “[name]”
Usage: git config --global user.email “[email address]”

This command sets the author name and email address respectively to be used with your commits.

git init

Usage: git init 

    This command is used to start a new repository in the current working directory.


git add

Usage: git add [file]

    This command adds one or more files to the staging area.

Usage: git add * or git add .

    This command adds one or more to the staging area.

git commit

Usage: git commit -m "[ Type in the commit message]"

    This command records or snapshots the file permanently in the version history.

git status

Usage: git status

    The git status command displays the current state of the local repository, including any changes that you’ve staged for a commit.


git branch

    The git branch command is used to create and manage branches. Git branches are separate copies of your main codebase that you can change without disturbing the main code. Your main branch is the one you initialized using git init.

Usages: 

list the all active branches. 

git branch

creates a new branch.

git branch <branch_name>

delete the feature branch.

git branch -d [branch name]







Tuesday, November 7, 2023

Debounce in Javascript and React

    Debounce is a technique used to improve the performance of frequently executed actions, by delaying them, grouping them, and only executing the last call.

    Imagine, Say for example, You need a search input that automatically queries results as you type.

     You don't want to call the backend or API's with every keystroke, instead you only observe the final value. This is the perfect use for the debounce function, and in fact, it's the most common one.

Define basic debounce function with Javascript

Debounce is implemented using a timer, where the action executes only after the timeout. If the action is repeated before the timer has expires, we restart the timer. 

 

function debounce(func, delay) {
let timer;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, args);
}, delay);
};
}

  In the debounce function:

  • func is the original function you want to debounce.
  • delay is the time in milliseconds that you want to wait after the last call before invoking the original function. 

Implement the debounce function 

    Create a function that accepts a function to debounce and the timeout delay as arguments.


const updateOptions = debounce(query => {
fetch(`https://dummyjson.com/products/search?q=${query}`)
.then(res => res.json())
.then(data => setOptions(data))
}, 1000)
input.addEventListener("input", e => {
updateOptions(e.target.value)
)}

Implement the debounce function with React


export default function SearchBox() {
const [search, setSearch] = React.useState("");
const [result, setResult] = React.useState([]);
const handleChange = (e) => {
setSearch(e.target.value);
};

let timeout;

const handleSearch = async (query) => {
setResult([]);
if (query.length < 3) {
return null;
}
const response = await fetch(
`https://dummyjson.com/products/search?q=${query}`
);
const { products } = await response.json();
setResult(products);
};

React.useEffect(() => {
clearTimeout(timeout);
timeout = setTimeout(() => {
handleSearch(search);
}, 500);
return () => clearTimeout(timeout);
}, [search]);

return (
<>
<div className="mb-3 m-11">
<div className="relative mb-4 flex w-full flex-wrap items-stretch">
<form>
<label
htmlFor="default-search"
className="mb-2 text-sm font-medium text-gray-900 
sr-only dark:text-white"
>
Search
</label>
<div className="relative">
<div className="absolute inset-y-0 left-0 flex items-center 
pl-3 pointer-events-none">
<svg
className="w-4 h-4 text-gray-500 dark:text-gray-400"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 20 20"
>
<path
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
/>
</svg>
</div>
<input
type="search"
id="default-search"
className="block w-full p-4 pl-10 text-sm text-gray-900
 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 
focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 
dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 
dark:focus:border-blue-500"
placeholder="Search Mockups, Logos..."
value={search}
onChange={handleChange}
/>
</div>
</form>
</div>
</div>

<div className="mb-3 m-11">
{result.map((item) => (
<div className="text-xl">{item.title}</div>
))}
</div>
</>
);
}


the  useEffect runs every time the input value changes, after which there is a delay of 500 milliseconds, then the value result is updated with search value.

The Result will be 


 

Happy Coding...😀

Tuesday, October 31, 2023

Captcha - PHP GD Library

As Web Application development continues to grow, the need for CAPTCHA is essential. The captcha does it prevents a robot from trying to submit a form on your website.