Encrypting local storage can help protect your sensitive data from unauthorized access. Here are the general steps you can take to encrypt local storage:<ol><li>Choose a strong encryption algorithm: You can use a widely recognized encryption algorithm like Advanced Encryption Standard (AES) to encrypt your local storage.</li><li>Generate a unique encryption key: Use a strong password or a passphrase to generate a unique encryption key. This key will be used to encrypt and decrypt your local storage.</li><li>Encrypt your data: Once you have the encryption key, you can use it to encrypt your local storage. There are several tools and libraries available that can help you encrypt your data. For example, you can use the Web Crypto API in modern web browsers or a library like CryptoJS.</li><li>Store the encrypted data: Once you have encrypted your data, store it in your local storage. Make sure that you delete the original unencrypted data, as it could be accessed if left on the device.</li><li>Decrypt the data when needed: When you need to access your encrypted data, use the encryption key to decrypt it. Again, there are several tools and libraries available that can help you do this.</li><li>Protect the encryption key: Finally, make sure to protect the encryption key. You can store it securely in a password manager or other secure location, and avoid sharing it with anyone else.</li></ol>It's important to note that encrypting local storage is not foolproof and determined attackers may still be able to access your data. However, encrypting your data can make it more difficult for unauthorized parties to access your sensitive information.<h2>Code</h2>include the library in your file.<pre class="ql-syntax" spellcheck="false">let CryptoJS = require("crypto-js")
const encryptionKey = "6734783267483gqshjdg7823tr"
</pre>---<pre class="ql-syntax" spellcheck="false">/**
&nbsp;* Sets the value of a key in the local storage.&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp;* @param {string} key - the key to set the value of&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp;* @param {any} value - the value to set the key to&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp;* @returns None&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp;*/
export const setLocalData = (key, value) =&gt; {
&nbsp; &nbsp; let data = localStorage.getItem("data") ? decrypt(localStorage.getItem("data")) : {}
&nbsp; &nbsp; data[key] = value
&nbsp; &nbsp; localStorage.setItem("data", encrypt(JSON.stringify(data)))
}

/**
&nbsp;* Gets the data stored in local storage.
&nbsp;* @param {string} [key=null] - the key to get the data for.
&nbsp;* @returns The data stored in local storage.
&nbsp;*/
export const getLocalData = (key = null) =&gt; {
&nbsp; &nbsp; if (typeof window === "undefined") {
&nbsp; &nbsp; &nbsp; &nbsp; return null
&nbsp; &nbsp; }

&nbsp; &nbsp; let data = localStorage.getItem("data")

&nbsp; &nbsp; if (!data) {
&nbsp; &nbsp; &nbsp; &nbsp; return null
&nbsp; &nbsp; } else {
&nbsp; &nbsp; &nbsp; &nbsp; data = decrypt(data)
&nbsp; &nbsp; }

&nbsp; &nbsp; if (key) {
&nbsp; &nbsp; &nbsp; &nbsp; return data[key]
&nbsp; &nbsp; }

&nbsp; &nbsp; return data
}

/**
&nbsp;* Encrypts the given data using the encryption key.
&nbsp;* @param {any} data - the data to encrypt
&nbsp;* @returns {string} the encrypted data
&nbsp;*/
export const encrypt = (data) =&gt; {
&nbsp; &nbsp; return CryptoJS.AES.encrypt(JSON.stringify(data), encryptionKey).toString()
}

/**
&nbsp;* Decrypts the given cipher text using the encryption key.
&nbsp;* @param {string} cipherText - the cipher text to decrypt
&nbsp;* @returns {string} the decrypted text
&nbsp;*/
export const decrypt = (cipherText) =&gt; {
&nbsp; &nbsp; var bytes = CryptoJS.AES.decrypt(cipherText, encryptionKey)
&nbsp; &nbsp; return JSON.parse(JSON.parse(bytes.toString(CryptoJS.enc.Utf8)))
}
</pre>Don't forget to change the key before implementation.

Encrypting local storage can help protect your sensitive data from unauthorized access. Here are the general steps you can take to encrypt local storage

Encrypt local storage using CryptoJs

As more and more web applications are being built using frontend JavaScript frameworks like React, Angular, and Vue, it's important to ensure that the data stored in these applications' local storage is secure. Local storage is a convenient feature that allows web applications to store data on a user's browser, but it also poses a significant security risk if not used correctly. In this article, we'll explore some best practices for securing local storage in any frontend JavaScript framework.<h2>Avoid storing sensitive information.</h2>The first step in securing local storage is to avoid storing sensitive information in it. Local storage is not designed to be a secure storage mechanism, so it's best to avoid storing data such as passwords, credit card numbers, and other personally identifiable information. If your application requires this type of data, consider using a more secure storage mechanism such as cookies with Http Only and Secure flags, or server-side storage.<h2>Encrypt sensitive data.</h2>If you must store sensitive information in local storage, it's important to encrypt it before storing it. There are several encryption libraries available for JavaScript, such as CryptoJS and SJCL, which can be used to encrypt data before storing it in local storage. Encrypting the data makes it more difficult for attackers to read the data if they gain access to the user's browser.<h3>MUST READ: <a href="https://codebysamgan.com/encrypt-local-storage-using-cryptojs" rel="noopener noreferrer">Encrypt local storage using CryptoJs</a></h3><h2>Use a session-based approach.</h2>One approach to securing local storage is to use a session-based approach. Instead of storing data in local storage permanently, you can store it in a session object that is only available for the duration of the user's session. Once the user logs out or the session expires, the data is deleted from the session object. This approach limits the amount of time that sensitive data is stored in local storage.<h2>Limit access to local storage.</h2>To further secure local storage, you can limit access to it. By default, any JavaScript code running on the same domain as the application can access local storage. However, you can restrict access to local storage by setting the "same-origin" policy in the application's code. This policy ensures that only scripts originating from the same domain as the application can access local storage.<h2>Clear local storage on logout</h2>It's important to clear local storage when the user logs out of the application. This prevents sensitive data from being accessed by unauthorized users who may gain access to the user's browser after they have logged out. You can use the "clear()" method in JavaScript to remove all data from local storage when the user logs out.In conclusion, securing local storage in any frontend JavaScript framework is essential to protect user data from unauthorized access. By following the best practices outlined above, you can significantly reduce the risk of data breaches and improve the overall security of your application. Remember to avoid storing sensitive information, encrypt sensitive data, use a session-based approach, limit access to local storage, and clear local storage on logout.&nbsp;

As more and more web applications are being built using frontend JavaScript frameworks like React, Angular, and Vue, it's important to ensure that the data stored in these applications' local storage is secure.

Securing local storage in JS based frontend frameworks like ReactJs, VueJs, AngularJs etc.

Often while writing shell scripts, we need to create files which can be distinguished from one another, what better way to do it other then times stamps.below you will find a the bash variable to add to the name of you file.<h2>Command</h2><div class="inline_html" contenteditable="false"><table style="margin-top:12px; margin-botton:18px">
 <tbody><tr>
 <td>Format / result</td>
 <td>Command</td>
 </tr>
 <tr>
 <td>YYYY-MM-DD</td>
 <td>date -I</td>
 </tr>
 <tr>
 <td>YYYY-MM-DD_hh:mm:ss</td>
 <td>date +%F_%T</td>
 </tr>
 <tr>
 <td>YYYYMMDD_hhmmss</td>
 <td>date +%Y%m%d_%H%M%S</td>
 </tr>
 <tr>
 <td>YYYYMMDD_hhmmss (UTC version)</td>
 <td>date --utc +%Y%m%d_%H%M%SZ</td>
 </tr>
 <tr>
 <td>YYYYMMDD_hhmmss (with local TZ)</td>
 <td>date +%Y%m%d_%H%M%S%Z</td>
 </tr>
 <tr>
 <td>YYYYMMSShhmmss</td>
 <td>date +%Y%m%d%H%M%S</td>
 </tr>
 <tr>
 <td>YYYYMMSShhmmssnnnnnnnnn</td>
 <td>date +%Y%m%d%H%M%S%N</td>
 </tr>
 <tr>
 <td>YYMMDD_hhmmss</td>
 <td>date +%y%m%d_%H%M%S</td>
 </tr>
 <tr>
 <td>Seconds since UNIX epoch</td>
 <td>date +%s</td>
 </tr>
</tbody></table></div><h2>How to Use</h2><pre class="ql-syntax" spellcheck="false">now=$(date +%Y%m%d_%H%M%S)
fileName="file-${now}.ext"
</pre>

Often while writing shell scripts, we need to create files which can be distinguished from one another, what better way to do it other then times stamps.

Create timestamp variable in bash script

Though you can import the CSV directly in DB, but importing it with an importer gives you more control over the data manipulation while importing.Below is the Script you will be needing for that.<pre class="ql-syntax" spellcheck="false">&lt;?php
/**
 * importer for CSV in MySQL DB.
 * pleas keep the CSV file in the same directory and run :
 *
 * &gt; php ./import.php
 */

$host = "localhost"; // Host name.
$db_user = "root"; //mysql user
$db_password = ""; //mysql pass
$db = ''; // Database name.

$con = mysqli_connect($host, $db_user, $db_password, $db);

// Check connection
if (mysqli_connect_errno()) {
 echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

$file = fopen('filename.extension', "r");
while (($data = fgetcsv($file, 100000, ",")) !== FALSE) {
 $sql = "INSERT into hs_codes(col1, col2, col3) values('$data[0]', '$data[1]', '$data[2]')";
 mysqli_query($con, $sql);
}

fclose($file);
echo "CSV File has been successfully Imported.";
</pre>

Though you can import the CSV directly in DB, but importing it with an importer gives you more control over the data manipulation while importing.

CSV Importer script for PHP

Here is a shell script boilerplate, to get you started. Its not much but its still its better then nothing.<pre class="ql-syntax" spellcheck="false">#!/usr/bin/env bash

set -o errexit
set -o nounset
set -o pipefail
if [[ "${TRACE-0}" == "1" ]]; then
 set -o xtrace
fi

if [[ "${1-}" =~ ^-*h(elp)?$ ]]; then
 echo 'Usage: ./script.sh arg-one arg-two
This is an awesome bash script to make your life better.
'
 exit
fi

cd "$(dirname "$0")"

main() {
 echo do awesome stuff
}

main "$@"
</pre>

Here is a shell script boilerplate, to get you started. Its not much but its still its better then nothing.

Boilerplate for creating a Shell Script

there might be other ways but, i find this one the easiest<pre class="ql-syntax" spellcheck="false">where user_type COLLATE utf8mb4_0900_as_cs = 'p'
</pre>the above query will bring up all the users with user_type 'p' in lower case.

How to make a where query in MySQL with Case Sensitive query string

There are a number of times we have a bunch of servers we need to run to fully run an application, yes i am talking about the microservice arch. It's annoying to go to each repo and get the server running. Below is the script for making it automated.<pre class="ql-syntax" spellcheck="false">#!/usr/bin/python3

"""
Script that starts the servers from the "services" array.
services = [
 {
 "name": "service_name",
 "path": "path_to_service",
 "command": "command_to_run",
 },
 ...
]
for a single server, please pass the name of the service to start...
author: msamgan
created at: 2022-05-01
updated at: 2022-07-22
version: 1.1.0
signature: ./server | ./server &lt;service_name&gt;
"""

import os
import sys

services = [
 
]

# uncomment if on mac os..
# os.system("say 'booting shopini servers'")
os.system("sleep 1")

n = len(sys.argv)

serverCommand = ""
for service in services:
 if n &gt; 1:
 if service["name"] != sys.argv[1]:
 continue

 # say = "say 'booting " + service["name"] + " server'"
 # os.system(say)
 os.system(
 "ttab.sh -w -t '"
 + service["name"]
 + "' -d "
 + service["path"]
 + " "
 + service["command"]
 )

# os.system(
# "say 'all shopini servers are running at there full potentials, have a nice day!'"
# )
# kill command: kill -9 $(lsof -ti:5100)
</pre>The <a href="https://github.com/mklement0/ttab" rel="noopener noreferrer">ttab.sh library you will need</a>

There are a number of times we have a bunch of servers we need to run to fully run an application, yes i am talking about the microservice arch

Python script to run multiple servers simultaneously on a local machine.

Python script to run multiple servers simultaneously on a local machine on Mac.

Assuming that you have installed php from brew. You can switch the versions between php from the script below.Update the script as per the requirement of your versioning.<pre class="ql-syntax" spellcheck="false">#!/usr/bin/python3

""" 
script to switch between php versions
author: msamgan
created: 22 july, 2022
additional info
 - make the script executable chmod +x php.switch &lt;version&gt;
 - put the script in .local/bin for global access
 - or run directly from terminal ./php.switch &lt;version&gt;
"""

import argparse
import os
import sys

parser = argparse.ArgumentParser(description="Script to switch between php versions")
parser.add_argument("version", metavar="Version", type=str, help="Version")

args = parser.parse_args()

print("Switching php version to: " + args.version)

if args.version == "8.1":
 os.system("brew unlink php@7.4 &amp;&amp; brew link php@8.1 --force --overwrite")
 os.system("php -v")
 sys.exit()

if args.version == "7.4":
 os.system("brew unlink php@8.1 &amp;&amp; brew link php@7.4 --force --overwrite")
 os.system("php -v")
 sys.exit()

print("Invalid version")
</pre>

Assuming  that you have installed php from brew. You can switch the versions between php from the script below

Python script to switch between php versions in Mac

Assuming all the other work regarding the package creation is done. To publish you have to do the following steps.<h2>Guide</h2><ul><li>update package.json with version</li><li>commit final changes</li><li>git tag -a v0.0.1 -m "stable 0.0.1"</li><li>git push origin --tags</li><li>vsce package</li><li>vsce publish</li></ul><h2>Install vsce if required.</h2><pre class="ql-syntax" spellcheck="false">npm install -g vsce
</pre><h2>Generating Personal Token</h2>First time publishing will require the personal token for your market place. You can get it generated by following the steps <a href="https://code.visualstudio.com/api/working-with-extensions/publishing-extension" rel="noopener noreferrer">from here.</a>

Assuming all the other work regarding the package creation is done. To publish you have to do the following steps.

How to publish vscode extension.

<h2>What is laravel pint</h2>as in the defination by the official repository,<blockquote>Laravel Pint is an opinionated PHP code style fixer for minimalists. Pint is built on top of PHP-CS-Fixer and makes it simple to ensure that your code style stays clean and consistent.</blockquote><blockquote>-- laravel/pint</blockquote>and as per me, Pint is the so far most sophisticated code formatter i have ever user in the reference of PHP. You can find more details about <a href="https://github.com/laravel/pint" rel="noopener noreferrer">laravel/pint here</a>. <h2>Installation</h2><pre class="ql-syntax" spellcheck="false">composer require laravel/pint --dev
</pre><h2>General Usage</h2>to use the pint binary all you have to do is run the following command in the root of you laravel project.<pre class="ql-syntax" spellcheck="false">./vendor/bin/pint
</pre><h2>Configuration</h2>The default setup of laravel pint does not require any configuration and as per the official docs, it for <a href="https://www.php-fig.org/psr/psr-12/" rel="noopener noreferrer">PSR-12 Style Guide</a>. Still if you are unhappy with some default rules you can change then by creating a<code> pint.json in root of your project</code>, and adding the preset to it.Currently the following preset are supported<ol><li>psr12</li><li>laravel</li><li>symfony</li></ol>Since Pint is based on PHP-CS-Fixer the configuration rules can be found <a href="https://mlocati.github.io/php-cs-fixer-configurator/#version:3.8" rel="noopener noreferrer">here</a>.<h3>Sample pint.json</h3><pre class="ql-syntax" spellcheck="false">{
 "preset": "symfony",
 "rules": {
 "concat_space": {
 "spacing": "one"
 }
 }
}
</pre><h2>Binding laravel pint with VS Code</h2>So far we are good to use laravel/pint, but opening terminal and running a binary everytime you need to format id one hell of a job. To reduce that effort we will bind laravel/pint with our VS Code with the help of VS Code Task<h2>Creating VS Code task for laravel pint </h2><ol><li>To create a task create a <code>.vscode directory in root of you project</code>, if you don't have one.</li><li>Add a <code>new file named as tasks.json</code> to .vscode directory</li><li>add the following content to the new created file</li></ol><pre class="ql-syntax" spellcheck="false">{
 "version": "2.0.0",
 "tasks": [
 {
 "label": "Pint Formatter",
 "type": "shell",
 "command": "./vendor/bin/pint",
 "problemMatcher": [],
 "presentation": {
 "reveal": "silent"
 },
 "group": {
 "kind": "build",
 "isDefault": true
 }
 }
 ]
}
</pre>You can run this task directly from the <code>Tremial -&gt; Run Tasks</code> from the navigation, but will do it a bit more simpler.<h2>Adding KeyBinding (Keyboard Shortcut) to Run laravel pint</h2><ol><li>Open Keyboard shortcut panel, either from <code>file -&gt; preferences -&gt; keyboard Shortcuts</code> or <code>Ctrl+k Ctrl+s</code></li><li>Ones open click on the file icon on the top to open the json file of the keyboard shortcuts.</li><li>Ones open add the following lines to the file.</li></ol><pre class="ql-syntax" spellcheck="false">[
 {
 "key": "ctrl+shift+l",
 "command": "workbench.action.tasks.runTask",
 "args": "Pint Formatter"
 }
]
</pre>Now all you have to do is hit <code>Ctrl + Shift + l</code> and your laravel project will formatted with laravel pint.<h2>The Extension</h2>If you are more driven toward the extension approach you can get the above integration by using the following extension.<h3><a href="https://marketplace.visualstudio.com/items?itemName=msamgan.laravel-pint-vscode" rel="noopener noreferrer">Vscode Laravel Pint Extension</a></h3><h3><a href="https://github.com/msamgan/vscode-larapint" rel="noopener noreferrer">Show Some Support by staring the repo</a></h3><h3><a href="https://marketplace.visualstudio.com/items?itemName=msamgan.laravel-pint-vscode" rel="noopener noreferrer"> </a></h3><h2>Conclusion</h2>I have been using the unsatisfactory formatters from a long time. All of them have one thing but lack other. Laravel Pint is one who has it all, combining it with vscode is like proving you laravel project a super power.Feel free to pick your brain in comments.

I have been using the unsatisfactory formatters from a long time. All of them have one thing but lack other. Laravel Pint is one who has it all, combining it with vscode is like proving you laravel project a super power.

How to Add Laravel Pint to VS Code Formatter

File upload in node js is one hell of a job. Not knowing how is makes it a bit more troublesome. File upload is used at a number of places like image upload, excels for bulk upload etc.<h2>Install Multer </h2><pre class="ql-syntax" spellcheck="false">npm install --save multer
</pre>from here you can get more details about <a href="https://www.npmjs.com/package/multer" rel="noopener noreferrer">multer</a>.<h2>Configuring Multer </h2>The preferable place to add the multer configuration is in the routes file.<pre class="ql-syntax" spellcheck="false">const multer = require("multer")

const upload = multer({
 storage: multer.diskStorage({
 destination: (req, file, cb) =&gt; {
 cb(null, "Uploads")
 },
 filename: (req, file, cb) =&gt; {
 cb(
 null,
 file.fieldname + "-" + Date.now() + "-" + file.originalname
 )
 }
 }),
 fileFilter: (req, file, cb) =&gt; {
 if (
 file.mimetype ===
 "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
 ) {
 cb(null, true)
 } else {
 cb(null, false)
 return cb(new Error("Only .xlsx format allowed!"))
 }
 }
})
</pre><h2>Adding Multer to Route</h2><pre class="ql-syntax" spellcheck="false">app.post("/api/file-upload/v1", upload.single("file-key"), (req, res) =&gt; {
 console.log(req.file)
 res.send("File uploaded successfully!")
 })
</pre><h3>Assuming</h3><pre class="ql-syntax" spellcheck="false">&lt;form action="/api/file-upload/v1" method="post" enctype="multipart/form-data"&gt;
 &lt;input type="file" name="file-key" /&gt;
&lt;/form&gt;
</pre><h2>Validations</h2>all the validation are to be put in <code>fileFilter</code> section as per the requirement. For this case the system only allow excels to be uploaded.and we are done.Feel free to comment you suggestions.

File upload in node js is one hell of a job. Not knowing how is makes it a bit more troublesome.

File upload in node js is one hell of a job. Not knowing how is makes it a bit more troublesome

File upload in Node JS Using Multer

NO, this is not another list of same old same old list of extensions.VS Code is one of the most used editor of choice by a great number of developers. Here is a list of some extensions which I personally use in my day to day development work and hope this will make you life a bit more easier.Have a look<ol><li><a href="https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens" rel="noopener noreferrer">Error Lens</a></li><li><a href="https://marketplace.visualstudio.com/items?itemName=GitHub.copilot" rel="noopener noreferrer">GitHub Copilot</a></li><li><a href="https://marketplace.visualstudio.com/items?itemName=kruemelkatze.vscode-dashboard" rel="noopener noreferrer">Project Dashboard</a></li><li><a href="https://marketplace.visualstudio.com/items?itemName=pcsoftware.readable" rel="noopener noreferrer">Readable - AI Generated Comments</a></li><li><a href="https://marketplace.visualstudio.com/items?itemName=mutantdino.resourcemonitor" rel="noopener noreferrer">Resource Monitor</a></li><li><a href="https://marketplace.visualstudio.com/items?itemName=SonarSource.sonarlint-vscode" rel="noopener noreferrer">SonarLint</a></li><li><a href="https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree" rel="noopener noreferrer">Todo Tree</a></li><li><a href="https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log" rel="noopener noreferrer">Turbo Console Log</a></li><li><a href="https://marketplace.visualstudio.com/items?itemName=pflannery.vscode-versionlens" rel="noopener noreferrer">Version Lens</a></li><li><a href="https://marketplace.visualstudio.com/items?itemName=brapifra.phpserver" rel="noopener noreferrer">PHP Server</a></li><li><a href="https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint" rel="noopener noreferrer">markdownlint</a></li></ol>You can find the details for the above on there detail page.Hope these comes handy to you too...

NO, this is not another list of same old same old list of extensions.

Rare and Extra Ordinary must have VS Code Extensions

AppImages are the most easiest to run compared. All you need to do is follow the steps mentioned below.<h2>Step to use AppImage</h2><ol><li>Download the AppImage</li><li>Make the AppImage executable. (sudo chmod +x *.AppImage)</li><li>Run the file (./*.AppImage) </li></ol>The challenging task is to make the AppImage accessible globally through he system like an installed application (in the menu)you can achieve this by the going through the following steps.<h2>Steps to add AppImage to Menu</h2><ol><li>Move he AppImage to an accessible directory (I personally use .appImage in my home directory but you are free to be creative)</li><li>Create a appName.desktop file in ~/.local/share/applications</li><li>Add the following content to the .desktop file you create</li></ol><pre class="ql-syntax" spellcheck="false">[Desktop Entry]
Version=0.13.23
Type=Application
Name=appName
Comment=Application Description
TryExec=Path/to/AppImage
Exec=Path/to/AppImage
Icon=Path/to/AppImage.icon
Actions=Editor
</pre>and we are done.Now you AppImage is available for you user in menu.<h2>Bonus tip</h2>If you want this AppImage to be accessible to to all the user of the system, place the .desktop file in /usr/share/applications<h2>Enabling "Add to Favorites" Option </h2>As suggested by <a href="https://github.com/mahdavifar2002" rel="noopener noreferrer">mahdavifar2002</a> in the comment you can enable the by renaming the filename in filename.desktop to the name of the app after it is running. It is also case sensitive. For example move the file "Outline-Manager.desktop" that is created to the file "Outline Manager.desktop" and then you will be able to pin in. (The "Name=" field inside .desktop file does not matter and it could be anything you wish.)Feel free to comment any suggestion in comments section.

AppImages are the most easiest to run compared.The challenging task is to make the AppImage accessible globally through he system like an installed application (in the menu)

How to Add AppImage Application to Menu in Ubuntu (Linux)

When you make a refresh in a react app in any page apart from root, if you are facing 404 add the below line of code in your nginx configuration file.<pre class="ql-syntax" spellcheck="false">location / {
	try_files $uri /index.html;
}
</pre>

How to remove 404 in internal pages in React Nginx

Hit the command below in the terminal<pre class="ql-syntax" spellcheck="false">git config --global credential.helper store
</pre>ones this command is run, any git operation required credentials you do, credentials will be stored. Next time you don't need to put the credentials again.

Store Git credentials in Terminal

below is the list of commands for sequelize cli<h2>Create Model with Migration</h2><pre class="ql-syntax" spellcheck="false">npx sequelize-cli model:generate --name User --attributes name:string,first_name:string
</pre><h2>Create Migration</h2><pre class="ql-syntax" spellcheck="false">npx sequelize-cli migration:create --name modify_rates_add_weight
</pre><h2>Run Migration</h2><pre class="ql-syntax" spellcheck="false">npx sequelize-cli db:migrate --env=development
</pre><h2>Adding Foreign Key to Migrations</h2><pre class="ql-syntax" spellcheck="false">type: Sequelize.INTEGER,
references: {
 model: "vendors", // tables name not model name
 key: 'id'
}
</pre><h2>Create Seed</h2><pre class="ql-syntax" spellcheck="false">npx sequelize-cli seed:generate --name shippers
</pre><h2>Timestamp In Seed</h2><pre class="ql-syntax" spellcheck="false">created_at: new Date(),
updated_at: new Date()
</pre><h2>Run Seeder</h2><pre class="ql-syntax" spellcheck="false">npx sequelize-cli db:seed:all
</pre><h2>Run Single Seeder </h2><pre class="ql-syntax" spellcheck="false">npx sequelize-cli db:seed --seed 20220622131903-file_name.js
</pre><h2>List all available CLI commands</h2><pre class="ql-syntax" spellcheck="false">npx sequelize-cli --list
</pre><h2>References</h2><ul><li>npx sequelize-cli db:migrate | Run pending migrations</li><li>npx sequelize-cli db:migrate:schema:timestamps:add | Update migration table to have timestamps</li><li>npx sequelize-cli db:migrate:status | List the status of all migrations</li><li>npx sequelize-cli db:migrate:undo | Reverts a migration</li><li>npx sequelize-cli db:migrate:undo:all | Revert all migrations ran</li><li>npx sequelize-cli db:seed | Run specified seeder</li><li>npx sequelize-cli db:seed:undo | Deletes data from the database</li><li>npx sequelize-cli db:seed:all | Run every seeder</li><li>npx sequelize-cli db:seed:undo:all | Deletes data from the database</li><li>npx sequelize-cli db:create | Create database specified by configuration</li><li>npx sequelize-cli db:drop | Drop database specified by configuration</li><li>npx sequelize-cli init | Initializes project</li><li>npx sequelize-cli init:config | Initializes configuration</li><li>npx sequelize-cli init:migrations | Initializes migrations</li><li>npx sequelize-cli init:models | Initializes models</li><li>npx sequelize-cli init:seeders | Initializes seeders</li><li>npx sequelize-cli migration:generate | Generates a new migration file</li><li>npx sequelize-cli migration:create | Generates a new migration file</li><li>npx sequelize-cli model:generate | Generates a model and its migration</li><li>npx sequelize-cli model:create | Generates a model and its migration</li><li>npx sequelize-cli seed:generate | Generates a new seed file</li><li>npx sequelize-cli seed:create | Generates a new seed file</li></ul>

Sequelize CLI Commands

Here I am working under the impression that, the setup is ready, tables and migrations are there, form and view files are good to go.We will focus here on the main uploading part, ones the file reach the controller. I am also skipping the validation part for the file as we will take it in consideration some other time.So, as per me the best approach is to put the entire path of the file in database, instead of just putting the name of the uploaded file.<pre class="ql-syntax" spellcheck="false">$fileLink = url(Storage::url(Storage::put('public/files', request('file'))));
</pre>The above piece of code will put the file in storage/app/public/files, with a uuid name and will return with the complete URL foe the file.Before be able to access this file in browser by the provided link, you need to do one more thing, create the symlink from storage to public by running the following command<pre class="ql-syntax" spellcheck="false">php artisan storage:link
</pre>and now we are good to go.

As per me the best approach is to put the entire path of the file in database, instead of just putting the name of the uploaded file.

File Upload Made Easy in Laravel

I am familiar with the love of Eloquent among the laravel community but sometimes, sometimes its better to go for raw queries. Its saves you a lot of time and trouble.Trust me, its hard to digest but is true. Lets consider a case where the following query is a complex one.<pre class="ql-syntax" spellcheck="false" data-cacher="true" data-cacher-block-id="1779193543">select count(id) from users where admin_id = 2
</pre><h2>Step one (Creating required directory)</h2>Create a queries directory in storage. <code>storage/queries</code>, you can create further sub directories as per requirement.<h2>Step Two (Adding helper method)</h2>Add the following method to you helper methods.<pre class="ql-syntax" spellcheck="false" data-cacher="true" data-cacher-block-id="333058884">if (!function_exists('getQuery')) {
 /**
 * @param $queryName
 * @param null $data
 * @return array|false|string|string[]
 */
 function getQuery($queryName, $data = null)
 {
 $query = file_get_contents(storage_path('queries/' . $queryName . '.sql'));

 if ($data) {
 foreach ($data as $key =&gt; $value) {
 $query = str_replace($key, $value, $query);
 }
 }

 return $query;
 }
}
</pre><h2>Step Three (Calling the query)</h2>once the directory and helper function is in place all you have to do is create SQL query files in the <code>storage/queries</code> directorysay, <code>storage/queries/admin.users.sql</code>containing the query, <pre class="ql-syntax" spellcheck="false" data-cacher="true" data-cacher-block-id="3128878593">select count(id) from users where admin_id = adminId
</pre>Please make note, the dynamic ids are replaced with a variable name.Call the query with helper function as follows.<pre class="ql-syntax" spellcheck="false" data-cacher="true" data-cacher-block-id="461072977">use Illuminate\Support\Facades\DB;

/**
 * @return array
 */
public function adminUsers(): array
{
 return DB::select(getQuery('admin.users', [
 'adminId' =&gt; auth()-&gt;id()
 ]));
}
</pre>In this way, you can get any complex query data, without going through the trouble of Eloquent.Feel free to provide us with your review and feedback in the form of comments.

I am familiar with the love of Eloquent among the laravel community but sometimes, sometimes its better to go for raw queries. Its saves you a lot of time and trouble.

Approach to Handle Complex queries in laravel

Initiating a new project is as exciting as frustrating. Going through all the routine work just to get the basic engine started, yaa I know the pain.<h2>create-express-boilerplate to Rescue</h2>I along with the tremendous help of <a href="https://github.com/hudaQeshta" rel="noopener noreferrer">huda</a> worked out the solution for you, in the form of create-express-boilerplate. It includes<ol><li>Entire expressjs setup</li><li>Validation Integration with <a href="https://express-validator.github.io/docs/" rel="noopener noreferrer">express-validator</a></li><li>Directory setups to provide you with less headache for where goes what</li><li>MVC architecture</li><li>DB support for both </li><li class="ql-indent-1"><a href="https://sequelize.org/" rel="noopener noreferrer">Sequelize </a>(MySQL and SQLite)</li><li class="ql-indent-1"><a href="https://mongoosejs.com/" rel="noopener noreferrer">Mongoose </a>(mongoDB)</li><li>Integrated<a href="https://jestjs.io/" rel="noopener noreferrer"> JEST test Suite</a></li><li>Both Vanilla JS and Typescript support</li><li><a href="https://typicode.github.io/husky/#/" rel="noopener noreferrer">Husky </a>Support for pre-commit hooks</li><li>Great amount of inbuild helper functions</li></ol>And many more to come..you can install the setup by running<pre class="ql-syntax" spellcheck="false" data-cacher="true" data-cacher-block-id="2398415744">npx create-express-boilerplate
</pre>you can have complete<a href="https://create-express-boilerplate.com/" rel="noopener noreferrer"> Documentation Here</a>feel free to provide us with your review and feedback in the form of comments or issues on <a href="https://github.com/msamgan/expressjs-api-boilerplate" rel="noopener noreferrer">github</a>. All your contributions are cardinally welcome.

Initiating a new project is as exciting as frustrating. Going through all the routine work just to get the basic engine started, yaa I know the pain.

create-express-boilerplate to create new API projects in a secs

Installing android studio is a pain in the Ass, and installing it dependencies is a level up to that. The most complex among those is the JDK one.Below are the steps to achieve so.# install (open) jdk 8<pre class="ql-syntax" spellcheck="false">sudo apt-get install -y openjdk-8-jdk
</pre># update java compiler and set to 1.8<pre class="ql-syntax" spellcheck="false">sudo update-alternatives --config javac
</pre># update java runtime (optional)<pre class="ql-syntax" spellcheck="false">sudo update-alternatives --config java
</pre># Also set $JAVA_HOME and $PATH to your .bashrc (optional)<pre class="ql-syntax" spellcheck="false">echo 'export JAVA_HOME=/usr/lib/jvm/java-8-openjdk-amd64' &gt;&gt; ~/.bashrc
echo 'export PATH="$PATH:$JAVA_HOME/bin' &gt;&gt; ~/.bashrc
</pre># load in current bash session<pre class="ql-syntax" spellcheck="false">source ~/.bashrc
</pre>

Installing JDK in Ubuntu for Android Studio

Deployment is an integral part of development cycle. It can be a tough job or can be as simple job as running few commands if done by via Git.login via ssh to in server and get in the root of you server directory. Run the following commands to deploy<pre class="ql-syntax" spellcheck="false">git init
git remote add origin git/repo/path.git
git fetch &amp;&amp; git checkout main
git pull
</pre>you can <a href="/command-to-add-remote-origin-on-git" rel="noopener noreferrer">read here</a> more about adding remote origin to your repo.Also, if your production branch is master replace main with master.

Deployment is an integral part of development cycle. It can be a tough job or can be as simple job as running few commands if done by via Git.

How to Deploy using Git

In the very initial days of my work in Node JS if faced this issue. Though Sequelize provide a great ORM for MySQL but the association within the models is a bit tricky. you can find more about associations <a href="https://sequelize.org/master/manual/assocs.html" rel="noopener noreferrer">here</a>Before getting any further, if you want to get a setup for fully function code setup <a href="https://github.com/msamgan/expressjs-api-boilerplate" rel="noopener noreferrer">here it is</a><h2>Preface</h2>For the sake of understanding, lets consider two Models please inside the model directory, models/author.js and models/post.js. Models will look like as follows respectively.<h2>Author Model (models/author.js)</h2><pre class="ql-syntax" spellcheck="false" data-cacher="true" data-cacher-block-id="2221063348">'use strict';
const {
 Model
} = require('sequelize');
module.exports = (sequelize, DataTypes) =&gt; {
 class Author extends Model {
 /**
 * Helper method for defining associations.
 * This method is not a part of Sequelize lifecycle.
 * The `models/index` file will call this method automatically.
 */
 static associate(models) {
 // define association here
 }
 };

 Author.init({
 slug: DataTypes.STRING,
 name: DataTypes.STRING,
 }, {
 sequelize,
 modelName: 'Author',
 tableName: 'authors',
 });


 return Author;
};
</pre><h2>Post Model (models/post.js)</h2><pre class="ql-syntax" spellcheck="false" data-cacher="true" data-cacher-block-id="3112237828">'use strict';
const {
 Model,
} = require('sequelize');

module.exports = (sequelize, DataTypes) =&gt; {
 class Post extends Model {
 /**
 * Helper method for defining associations.
 * This method is not a part of Sequelize lifecycle.
 * The `models/index` file will call this method automatically.
 */
 static associate(models) {
 this.belongsTo(models.Author, {as: 'Author'});
 }
 }


 Post.init({
 slug: DataTypes.STRING,
 title: DataTypes.STRING,
 excerpt: DataTypes.STRING
 }, {
 sequelize,
 modelName: 'Post',
 tableName: 'posts',
 });

 return Post;
};
</pre>As shown in the post model, a belongs too association is made between Post and author. But as the comment suggest, associate method is not a part of Sequelize lifecycle. we have to call it manually.To achieve that, we need to create models/index.js with the following content.<h2>models/index.js</h2><pre class="ql-syntax" spellcheck="false" data-cacher="true" data-cacher-block-id="3338581372">'use strict';

const fs = require('fs');
const path = require('path');
const Sequelize = require('sequelize');
const basename = path.basename(__filename);
const env = process.env.NODE_ENV || 'development';
const config = require(__dirname + '/../config/database.json')[env];
const db = {};

let sequelize;
if (config.use_env_variable) {
 sequelize = new Sequelize(process.env[config.use_env_variable], config);
} else {
 sequelize = new Sequelize(config.database, config.username, config.password, config);
}

fs
 .readdirSync(__dirname)
 .filter(file =&gt; {
 return (file.indexOf('.') !== 0) &amp;&amp; (file !== basename) &amp;&amp; (file.slice(-3) === '.js');
 })
 .forEach(file =&gt; {
 const model = require(path.join(__dirname, file))(sequelize, Sequelize.DataTypes);
 db[model.name] = model;
 });

Object.keys(db).forEach(modelName =&gt; {
 if (db[modelName].associate) {
 db[modelName].associate(db);
 }
});

db.sequelize = sequelize;
db.Sequelize = Sequelize;

module.exports = db;

</pre>Ones you are done with this you can access all you models vie models/index.js<h2>Accessing Models</h2><pre class="ql-syntax" spellcheck="false" data-cacher="true" data-cacher-block-id="4182884854">const {Post, Author} = require('../../models');
</pre>You can find more about hoe to use association in accessing data <a href="https://sequelize.org/master/manual/creating-with-associations.html" rel="noopener noreferrer">here</a>GitHub Repo for the <a href="https://github.com/msamgan/expressjs-api-boilerplate" rel="noopener noreferrer">above code</a><div class="inline_html" contenteditable="false"><iframe width="100%" height="500" src="https://www.youtube.com/embed/ctdMkbwHBU0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></div>

In the very initial days of my work in Node JS if faced this issue. Though Sequelize provide a great ORM for MySQL but the association within the models is a bit tricky.

How to create model association in Sequelize - express JS / Node JS

How to create model association in Sequelize 
 - express JS / Node JS

if you are starting new with Node JS, you will probably face this problem, while submitting the form to a post URL.The problem you will face is getting a empty req.body in-spite of sending the form properly. To resolve this issue, you have make two change in your current system.Add the following to the form element<pre class="ql-syntax" spellcheck="false">enctype="application/x-www-form-urlencoded"
</pre>Though, if you do not add this it will still work as this is the default for a form.The second thing, in your index.js in root add the following lines to unable the form.<pre class="ql-syntax" spellcheck="false">app.use(express.urlencoded({
 extended: true
}));
</pre>This is it, now you will be able to receive the form data in req.bodyif you are facing the same issue for the JSON inputs in your API calls, please check the<a href="/how-to-get-post-data-in-json-in-express-js-apis-node-js" rel="noopener noreferrer"> link here to unable it. </a>

if you are starting new with Node JS, you will probably face this problem, while submitting the form to a post URL.

How to get form data in post request in Express JS - Node JS

Thought it sounds simple and straight forward, this thing killed a lot of my time at the initial time of getting into node JS.the query string are directly available in the request for both get and post methods but to get the post data you send in json format you need to update you express JS index.js . In the root of your express JS setup you have index.js add the following line on the top after the creation of app.<pre class="ql-syntax" spellcheck="false">app.use(express.json());
</pre>Now you will be able to access the json data in post request in req.bodyIf you are facing the same issue with your form submits, please follow the <a href="/how-to-get-form-data-in-post-request-in-express-js-node-js" rel="noopener noreferrer">link for the solution.</a>

Thought it sounds simple and straight forward, this thing killed a lot of my time at the initial time of getting into node JS.

How to get post data in json in express JS APIs - Node JS

Deployment in itself is a messy task, and it becomes a bit more of hectic if you need to run a bunch of commands every time you deploy.The one of the best way is to create a deployment script and run it every time you deploy.<h2>Step 1: Create deployment script</h2>create a deploy.sh file in the root of your folder and make it executable. You can use the following commands.<pre class="ql-syntax" spellcheck="false">touch deploy.sh
sudo chmod +x deploy.sh
</pre><h2>Step 2: Update the script</h2><pre class="ql-syntax" spellcheck="false"># Turn on maintenance mode
php artisan down

# Pull the latest changes from the git repository
git reset --hard
git clean -df
git pull origin master

# Install/update composer dependecies
composer install --no-interaction --prefer-dist --optimize-autoloader --no-dev

# Run database migrations
php artisan migrate --force

# Clear caches
php artisan cache:clear

# Clear expired password reset tokens
php artisan auth:clear-resets

# Clear and cache routes
php artisan route:clear
php artisan route:cache

# Clear and cache config
php artisan config:cache
php artisan config:clear

php artisan view:clear

# Install node modules
npm install

# Build assets using Laravel Mix
npm run prod

# Turn off maintenance mode
php artisan up
</pre><h2>Step 3: Run on Deployment</h2>Now every time you need to deploy. just run deploy.sh<pre class="ql-syntax" spellcheck="false">./deploy.sh
</pre>Feel free to suggest any modification if you feel so.

Creating a Deployment script to make the Deployment Easy

showing and hiding of the elements across different devices of different sizes is a real pain in the a**. Here are the bootstrap classes you can use to show hide elements which might come in handy.<div class="inline_html" contenteditable="false"><table>
<thead>
<tr>
<td>Screen Size&nbsp;</td>
<td>Class</td>
</tr>
</thead>
<tbody>
<tr>
<td>Hidden on all</td>
<td>.d-none</td>
</tr>
<tr>
<td>Hidden only on xs</td>
<td>.d-none .d-sm-block</td>
</tr>
<tr>
<td>Hidden only on sm</td>
<td>.d-sm-none .d-md-block&nbsp;</td>
</tr>
<tr>
<td>Hidden only on md</td>
<td>.d-md-none .d-lg-block</td>
</tr>
<tr>
<td>Hidden only on lg</td>
<td>.d-lg-none .d-xl-block</td>
</tr>
<tr>
<td>Hidden only on xl</td>
<td>.d-xl-none&nbsp;</td>
</tr>
<tr>
<td>Visible on all</td>
<td>.d-block</td>
</tr>
<tr>
<td>Visible only on xs</td>
<td>.d-block .d-sm-none</td>
</tr>
<tr>
<td>Visible only on sm</td>
<td>.d-none .d-sm-block .d-md-none</td>
</tr>
<tr>
<td>Visible only on md</td>
<td>.d-none .d-md-block .d-lg-none</td>
</tr>
<tr>
<td>Visible only on lg</td>
<td>.d-none .d-lg-block .d-xl-none</td>
</tr>
<tr>
<td>Visible only on xl</td>
<td>.d-none .d-xl-block</td>
</tr>
</tbody>
</table></div>hope this help

CSS to Hide elements in different devices in responsive designs

There are a number of options available for purpose of blog creation but if you are a developer non of them are as satisfying as <a href="https://github.com/themsaid/wink" rel="noopener noreferrer">laravel wink</a>. It not only comes with a straight forward deployment but also the UI implementation for the blog is super easy (we will discuss it in our next article).In this article we will discuss how to get started with wink for blog creation. <h2>Step One</h2>Since wink is a laravel package its but obvious first we have to install laravel. You can follow the <a href="https://laravel.com/docs/8.x/installation" rel="noopener noreferrer">official installation guide</a> for the same<h2>Step Two</h2>Ones we have laravel all setup and running wink is installed as all the other laravel packages <pre class="ql-syntax" spellcheck="false">composer require themsaid/wink
php artisan wink:install
php artisan storage:link
</pre>Ones this is done, we have to set up the Database. Configure the database connection in&nbsp;config/wink.php. <div class="embedded_image" contenteditable="false" data-layout="default"><img alt="" src="/storage/wink/images/ehvh5zHWzfVXFcy9DtiRMLVUL9b4Sm2zvgchbzto.png"></div> use "mysql" if you want the use the default DB connection else you can make a different one as per the requirement. After this run the following commands<pre class="ql-syntax" spellcheck="false">php artisan config:cache
php artisan wink:migrate
</pre>and that it, you are good to go.Head to&nbsp;"your-project.test/wink/login"&nbsp;and use the provided email and password to log in.Although there is not much left for the setup part but here is the source of <a href="https://github.com/themsaid/wink" rel="noopener noreferrer">wink GitHub</a>.<h2>Updates</h2>as in each update there might be a chance DB is changes so make sure to run these two commands too.<pre class="ql-syntax" spellcheck="false">php artisan wink:migrate
php artisan vendor:publish --tag=wink-assets --force
</pre>Feel free to comment.

There are a number of options available for purpose of blog creation but if you are a developer non of them are as satisfying as laravel wink

How to get started with laravel wink for creating a blog

As all of us know that there is no certain rules when it comes to code review. From my experience I have derived the below mentioned points for enhancing the code quality before the PR submission.<ol><li>Please follow the PSR standards for nomenclature. (<a href="https://www.php-fig.org/psr/" rel="noopener noreferrer">https://www.php-fig.org/psr/</a>)</li><li>Please use clean code practices for writing a piece of logic (<a href="https://github.com/jupeter/clean-code-php" rel="noopener noreferrer">https://github.com/jupeter/clean-code-php</a>)</li><li>Though you will find this rule in PSR but still please use space before and after any operator.</li><li>Don’t break indentation.</li><li>Rules for declaring a function</li><li class="ql-indent-1">Small (not more than 20 lines).</li><li class="ql-indent-1">Do specifically one thing.</li><li class="ql-indent-1">Use descriptive names as per PSR.</li><li class="ql-indent-1">Prefer fewer arguments.</li><li class="ql-indent-1">Don’t use flag arguments. Split method into several independent methods that can be called from the client without the flag.</li><li>Rules for Commenting</li><li class="ql-indent-1">Always try to explain yourself in code.</li><li class="ql-indent-1">Don’t be redundant.</li><li class="ql-indent-1">Don’t add obvious noise.</li><li class="ql-indent-1">Don’t comment out code. Just remove. If it is a working piece of code, please write a proper comment that this is working.</li><li class="ql-indent-1">Use as explanation of intent.</li><li class="ql-indent-1">Use as clarification of code.</li><li class="ql-indent-1">Use as warning of consequences.</li><li>Declare variables close to their usage.</li><li>Dependent functions should be close.</li><li>Similar functions should be close.</li><li>Place functions in the downward direction but if it’s a relation please make it on the top of the model file.</li><li>Keep lines short.</li><li>Return on Negative conditions. Instead of writing the entire section of code in a if condition, return on “!if” condition.</li><li>In case of a merge conflict please put a message in the group asking the individuals worked on the same files.</li><li>Try to optimize code before creating a PR</li><li class="ql-indent-1">Reduce no. of lines of code</li><li class="ql-indent-1">Reduce unnecessary variable declaration</li><li class="ql-indent-1">If possible break in reusable functions</li><li>Below are mentioned the parameters for the code review.</li><li class="ql-indent-1">make sure that there are no conflicts</li><li class="ql-indent-1">there must not be any debug function open in the updated code.</li><li class="ql-indent-1">no (non-usable) commented code</li><li class="ql-indent-1">check for non-significant variable name declaration</li><li class="ql-indent-1">check for unused parameters in the function declarations.</li><li class="ql-indent-1">Check for unused parameters in a function call.</li><li class="ql-indent-1">check for unwanted functions declarations</li><li class="ql-indent-1">check for PSR rule violations</li><li>Always try and search for existing functions before creating a new one.</li><li>All the changes are to be made via Git. Under no circumstances FTP is to be used for making required changes.</li></ol>

Code Review Guidelines for better code quality

below are mentioned things to be taken care of at the time of deploying a laravel project to production.<ul><li>Make site down for maintenance (&nbsp;php artisan down&nbsp;)</li><li>clear all manual changes if any (&nbsp;git reset –hard&nbsp;)</li><li>Sync with mater from VCS ( production will always be in sync with master,&nbsp;git pull origin master&nbsp;)</li><li>Install/update composer dependencies (&nbsp;composer install –no-interaction –prefer-dist –optimize-autoloader –no-dev&nbsp;)</li><li>Run database migrations (&nbsp;php artisan migrate –force&nbsp;)</li><li>Clear caches (&nbsp;php artisan cache:clear&nbsp;)</li><li>Clear expired password reset tokens (&nbsp;php artisan auth:clear-resets&nbsp;)</li><li>Clear and cache routes (&nbsp;php artisan route:clear, php artisan route:cache&nbsp;)</li><li>Clear and cache config (&nbsp;php artisan config:cache, php artisan config:clear&nbsp;)</li><li>Install/update node js dependencies (&nbsp;npm install&nbsp;)</li><li>Compile the resources (&nbsp;npm run prod&nbsp;)</li><li>Make site Up (&nbsp;php artisan up&nbsp;)</li></ul>

Checklist for Production Deployment laravel Project

As you may have known by now that laravel 6.0 has been out. Though it’s expected to have a lot of changes in the major release but in 6.0 there are not that many changes.It’s more like 5.9 in terms of changes.But one major change introduced in laravel 6.0 is the&nbsp;removal of<pre class="ql-syntax" spellcheck="false">php artisan make:auth
</pre>Command. As you may know, this was used to create the authentication scaffolding. Thought the concept is not removed but just the way to implement has been changed.<h2>The New Way</h2>Authentication support is now added with the help of a package now. you can read in detail about it in&nbsp;<a href="https://laravel.com/docs/6.0/authentication" rel="noopener noreferrer">here</a>Command to implement the Auth are as follows.<pre class="ql-syntax" spellcheck="false">composer require laravel/ui
php artisan ui vue --auth
</pre>All the other stuff is the same as 5.8. Same Routes, Controller and all the stuff.Below is an explanatory video for the same. Please have a look.<div class="inline_html" contenteditable="false"><iframe width="100%" height="500" src="https://www.youtube.com/embed/Mqs0O0jDQTg" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></div> Hope this was helpfulfeel free to share your thought in the comment section.

PHP artisan make:auth in laravel 6.0

As you know regular backups of DB for a running site are very important. Most of the hosting providers do this for you, but sometimes its also expected from you to do the same.The easiest way is to create a Replica of the current DB through the command line and download it.Below is the command for doing the same. I am assuming that you are already logged in your server through ssh.<h2>Command</h2><pre class="ql-syntax" spellcheck="false">mysqldump -u DB_USERNAME -p DB_DATABASE &gt; FILENAME.sql
</pre>It will ask for the password but you can handle it.Moreover, if you want to take backup of particulate tables from the database you have to pass the name of the tables separated by space.<pre class="ql-syntax" spellcheck="false">mysqldump -u DB_USERNAME -p DB_DATABASE TABLE_1 TABLE_2 &gt; FILENAME.sql
</pre>Feel free to ask in the comment section in case of any doubt.

How to take MySQL DB back up from the command line

The progressive web app is the new trend as well as the need for the present time. I hope before getting in the “HOW” part you know what is exactly a PWA is. If you don’t let’s say, just for the sake of brief introduction they are web apps but also can be installed over the devices like desktop and mobiles.I am adding a demonstration video of how PWA works here below.So, by this video i am assuming that you have understand that how a PWA works.<div class="inline_html" contenteditable="false"><iframe width="100%" height="500" src="https://www.youtube.com/embed/ReP3KssgLj4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></div> <h2>How a make a PWA</h2>lets come to the main question, how to do this.Before getting into it let me make one thing very clear to you. Making a PWA is&nbsp;not that hard&nbsp;that it seems to be. So, chill it will be funTo make a PWA you need three things. Listed below<ol><li>manifest.json</li><li>Checking all the Audit test from google lighthouse</li><li>Service worker</li></ol>Once these three things are done you are good. So, without any further ado, let’s get the show running.<h3>manifest.json</h3>Consider this file as the guide to tell the browser that from were, what is to be taken. It’s simple and easy to create. The sample code is below. Also, you can take all the code used in this tutorial from my git repo. link is at the end of the article.<pre class="ql-syntax" spellcheck="false">{
 "short_name": "Short name of the application",
 "name": "Name of the application",
 "icons": [
 {
 "src": "/images/path/image.png",
 "type": "image/png",
 "sizes": "192x192"
 },
 {
 "src": "/images/path/image.png",
 "type": "image/png",
 "sizes": "512x512"
 }
 ],
 "start_url": "/",
 "background_color": "#ffffff",
 "display": "standalone",
 "scope": "/",
 "theme_color": "#e5e5e5"
 }
</pre>you can find all the details about all the attribute of manifest.json&nbsp;<a href="https://developers.google.com/web/fundamentals/web-app-manifest/" rel="noopener noreferrer">here</a>. Once created,&nbsp;Add this to your ROOT DIRECTORY. In Case of&nbsp;LARAVEL, PUBLIC DIRECTORY.In the next step, you have to link this file to your HTML. adding in the&nbsp;LAYOUT&nbsp;is the best option for laravel<pre class="ql-syntax" spellcheck="false">&lt;link rel="manifest" href="/manifest.json"&gt;

&lt;meta name="mobile-web-app-capable" content="yes"&gt;
&lt;meta name="apple-mobile-web-app-capable" content="yes"&gt;
&lt;meta name="msapplication-starturl" content="/"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
&lt;meta name="theme-color" content="#e5e5e5"&gt;
</pre>I have mentioned some other meta also which will ease the creation process. After adding the manifest.json and linking it to the HTML you will be able to see it in the application section of the google development tool.<div class="embedded_image" contenteditable="false" data-layout="default"><img alt="" src="/storage/wink/images/9jOjXoNcKUjCMCSiKlgRx1ImMK7a14SUuHe4DIs3.png"></div> <h2>Checking for Audits</h2>After adding manifesto to the system, we will get all the audits to check. you can find the audit in your google chrome developers console. All you have to do is check the appropriate option and run the test.In case any test fails, do not worry. Tests in the installable section are the only mandatory for the app to work. If the test fails in that section get the suitable fixes. You can put the issue in the comment section. Maybe I could be of any help to you.<div class="embedded_image" contenteditable="false" data-layout="default"><img alt="" src="/storage/wink/images/A8tv0muS8sdM71m2FhpN9j0ciyXZRxS4giYywyHI.png"></div> <h2>Service Worker</h2>Last and final step of the process in the initiating and using the service worker. The process can roughly divided into 2 part.<ol><li>Adding the service worker</li><li>Using the service worker</li></ol><h3>Adding the service worker</h3>For adding the service container, add the below code in the file.<pre class="ql-syntax" spellcheck="false">if ('serviceWorker' in navigator) {
 window.addEventListener('load', function () { navigator.serviceWorker.register('/sw.js').then(function(registration) {
 console.log('ServiceWorker registration :', registration.scope);
 }).catch(function (error) {
 console.log('ServiceWorker registration failed:', errror);
 });
 });
}
</pre>This code is registering a&nbsp;sw.js&nbsp;that means we have to create a sw.js which will serve as our service worker.<h3>Special NOTE:</h3>please put&nbsp;service worker and manifest.json on same level. It is highly recommended that you put both of them in the public directory. if they are not on same level scope issue will be there.<h2>Using the service worker</h2>Once added now we have to add the code in sw.js. Please add the following code in the sw.js.<pre class="ql-syntax" spellcheck="false">var CACHE_NAME = 'pwgen-cache-v1';

/**
 * The install event is fired when the registration succeeds.
 * After the install step, the browser tries to activate the service worker.
 * Generally, we cache static resources that allow the website to run offline
 */
self.addEventListener('install', async function () {
 const cache = await caches.open(CACHE_NAME);
 cache.addAll([
 'all files to be cached here'
 ])
});

self.addEventListener('fetch', function (event) {});
</pre>You can find a complete detailed explanation of the added install and fetch functions&nbsp;<a href="https://developers.google.com/web/fundamentals/primers/service-workers/" rel="noopener noreferrer">here</a>Now for the final showdown all, we have to call the prompt to add the app. to do that we have to add the following code to the&nbsp;same file we have registered the service worker.<pre class="ql-syntax" spellcheck="false">window.addEventListener('beforeinstallprompt', saveBeforeInstallPromptEvent);

function saveBeforeInstallPromptEvent(evt) {
 deferredInstallPrompt = evt;
 deferredInstallPrompt.prompt();
}
</pre>The above code will make the prompt for adding the app. And congratulations mate. you got yourself a PWA.In case of any doubt of query feel free to ask in comment section.

The progressive web app is the new trend as well as the need for the present time. I hope before getting in the “HOW” part you know what is exactly a PWA

How to create a progressive web app (PWA) in laravel 5.* and above

create a .htaccess file in the root of your project and paste the following code in the file.<pre class="ql-syntax" spellcheck="false">RewriteEngine on
RewriteCond %{REQUEST_URI} !^public
RewriteRule ^(.*)$ public/$1 [L]
</pre>And you are all set to go. Happy coding.PS: If you want a&nbsp;complete guide for hosting laravel project in a shared server&nbsp;you can it from&nbsp;<a href="https://dev.to/samgankhan/how-to-upload-a-laravel-project-on-shared-hosting-2o1h" rel="noopener noreferrer">here</a>

.Htaccess to remove public from laravel app

upload your SQL file to the serve through FTP. Ones the file is on server you can user the following command.<h2>Assumptions</h2><ul><li>you have created a DB</li><li>you have already create a DB user with privileges as per required.</li><li>you have ssh access to the server</li><li>you know how to log in through ssh into your server.</li></ul><h2>Command</h2><pre class="ql-syntax" spellcheck="false">mysql -u db_user_name -p db_name &lt; /complete/file/path.sql
</pre>If you are using amazon RDS, you need to alter the command by adding the host to the command<pre class="ql-syntax" spellcheck="false">mysql -h host -u db_user_name -p db_name &lt; /complete/file/path.sql
</pre>Queries and comments are welcome.

Command to import DB through the command line in MySQL

below is the command<pre class="ql-syntax" spellcheck="false">git remote add origin git/repo/path.git
</pre>moreover sometimes the path of the existing repository change. In that case, we don’t add the origin, we change the existing origin with the following command<pre class="ql-syntax" spellcheck="false">git remote set-url origin git/repo/new/path.git
</pre>

Command to add remote origin on GIT

Hello there, this is the official explanation documentation for project cristeena. In here we will discuss all the aspects for cristeena and how it can be used at her best for the development of the web application.<h2>Installation</h2>Installing cristeena is straight forward, there are two approaches to do that. Mentioned as follows.<ul><li>Cloning the Repository</li><li>Composer Based ( Recommended )</li></ul>you can go for the way you suite most comfortable with but I personally recommend the “composer based approach”.<h3>Cloning</h3>you can simply clone the repository by the following command followed by the composer command for the dependencies installation.Execute the following commands one by one.<pre class="ql-syntax" spellcheck="false">git clone https://github.com/samgan-khan/cristeena.git
cd cristeena
composer install
</pre><h3>Composer</h3>Through compose everything can be done in one go<pre class="ql-syntax" spellcheck="false">composer create-project --prefer-dist samgan-khan/cristeena
</pre>In case you want to use a custom app directory name (e.g. /myapp/):<pre class="ql-syntax" spellcheck="false">composer create-project --prefer-dist samgan-khan/cristeena myapp
</pre>Once you are done with either, for starting the server you can execute the following command. You can also run the set up like any other site on apache but its my personal choice to run on the&nbsp;inbuild&nbsp;server of cakePHP<pre class="ql-syntax" spellcheck="false">bin/cake server -p 8765
</pre>Then visit&nbsp;http://localhost:8765&nbsp;to see the welcome page.<h2>Configuration</h2>configurations in cristeena&nbsp;is&nbsp;next to null, all you have to do in&nbsp;change&nbsp;the .default files to there original form.Rename the following files<ul><li>.env.default to .env (environment file)</li><li>app.default.php to app.php ( if not done already )</li></ul>Once you are done renaming fill the asked requirements in the .env&nbsp;file and you are done with the configurations.Congratulations….

Cristeena Documentation

In the field development the count of branches reach form 1 to 40 50 in like no time. and most of then are of no use ones merged into the master. Its better to get rid of them but deleting them is a major pain in the ass.Here is a proposed git command i found online, i repeat i found online (i’ll give the source below).<pre class="ql-syntax" spellcheck="false">git branch | grep -v "master" | xargs git branch -D
</pre>i guess this was helpful<a href="https://dev.to/ben/how-to-delete-all-your-local-branches-but-keep-master-lb1" rel="noopener noreferrer">source</a>

In the field development the count of branches reach form 1 to 40 50 in like no time. and most of then are of no use ones merged into the master. Its better to get rid of them but deleting them is a major pain in the ass.

How to delete all the local branches but master

Validation is one of the major parts of web development. But sometimes it can be a ball buster especially when it comes to validating file uploads.Below is a simple piece of code through which we can validate the file type before upload. You may or may not need a server-side validation after that. It’s totally up to you and your system.Here is the code.<h2>Html :</h2><pre class="ql-syntax" spellcheck="false">&lt;input type="file" id="file" onchange="checkfile(this);" name="file" required&gt;
</pre><h2>JavaScript:</h2><pre class="ql-syntax" spellcheck="false">&lt;script&gt;
 function checkfile(sender) {
 var validExts = [".xlsx", ".xls"];
 var fileExt = sender.value;
 fileExt = fileExt.substring(fileExt.lastIndexOf('.'));
 if (validExts.indexOf(fileExt) &lt; 0) {
 alert("Invalid file selected, valid files are of " +
 validExts.toString() + " types.");
 document.getElementById("form-id").reset();
 return false;
 } else return true;
 }
&lt;/script&gt;
</pre>The above code can be extended for any file. Just replace your desired file extensions in the “validExts” array and you are good to go.

Validation is one of the major parts of web development. But sometimes it can be a ball buster especially when it comes to validating file uploads.

Client-side validation before uploading an excel file

If you are habitual of writing a formatted code don’t worry it’s a good habit but when sometimes you get to debug files which are not formatted what so ever. In that case, it’s a headache to get things done in that sort of files.In this kind of scenario, PhpStorm comes to rescue, Normal indentation of the file can be done only by the following commands.<pre class="ql-syntax" spellcheck="false">Ctrl + A (to select complete file)
Ctrl + Alt + I (this will indent the file properly.)
</pre>But sometimes we need more than just indentation. To completely format file got for<pre class="ql-syntax" spellcheck="false">Ctrl + Shift + Alt + l
</pre>This will open a dialogue box, easy to understand. Select as you are pleased and go for it. This will format your file as you wished it was.Moreover, sometimes a file is full of unused commented code which is there for no use. I tried for searching a plugin or something to remove all that commented code at ones but I guess there isn’t any.But found a good solution to this problem. You can use&nbsp;search and replace with regular expression&nbsp;with the following regex.<pre class="ql-syntax" spellcheck="false">Multi line comment: /\*(\*)?(((?!\*/)[\s\S])+)?\*/
Single line comment: //.*$
</pre>And replace them with empty and we are good to go.If you also got some more tricks down your sleeves feel free to comment.

If you are habitual of writing a formatted code don’t worry it’s a good habit but when sometimes you get to debug files which are not formatted what so ever. In that case, it’s a headache to get things done in that sort of files.

How to format file in PhpStorm

Making an application live majorly depends on the type of hosting you are having along with the method to access you are provided for that hosting.I am assuming that you have shared hosting with Cpanel.Please go through the below steps to make your PHP application live.<h2>Steps:</h2><ul><li>Make a .zip file of your application</li><li>Login into your server (live server with the credentials you are provided by the hosting vendor)</li><li>Once you got into the panel, find file manager.</li><li>Inside file manager search for public_html (this is the base directory, like htdocs in XAMPP)</li><li>Upload your .zip file in public_html</li><li>Extract it in here.</li></ul>Your code files are live now.<h2>Creating a Database</h2>If your application is static then the above steps should be enough for making it live but if you have a database in action then you also have to create and connect a database too, to the application.Below are the steps to create a DB in cPanel<ul><li>Search for MySQL database wizard</li><li>Name your database</li><li>Create a user, password, and privileges</li></ul>Connect your Database to your application through config or how so ever you have designed to it.For any concerns and doubts feel free to ask in comment section.

Making an application live majorly depends on the type of hosting you are having along with the method to access you are provided for that hosting.

Steps to make your php application live in cPanel (shared hosting)

Steps to make your PHP application live in Cpanel (shared hosting)

As you may know according to the default configuration of CakePHP the debug and error log is generated in the same file. But this can be changed in a few simple steps. All you have to do is following.<ol><li>Got to config/app.php</li><li>Find the ‘Log’ configuration array</li><li>In both debug and error replace the ‘file’ with “’debug-‘ .&nbsp;date(‘Y-m-d’),” and “’error-‘ . date(‘Y-m-d’),” respectively</li><li>Save the file and you are good to go.</li></ol>Now, the log will be generated on a daily basis.

As you may know according to the default configuration of CakePHP the debug and error log is generated in the same file. But this can be changed in a few simple steps

How to make log daily in CakePHP 3.x

Although the development has taken a great deal of up-gradation in the last few years with DevOps, frameworks, automation etc. etc. etc. but still there are a number of people who still prefer the old way. Moreover, if you are starting new of just creating a college project or something like that it’s still cool to use the core PHP.The inputs in Core PHP are venerable to what you call “SQL Injection”, to before putting them to use it’s a mandatory practice to sanitize them. Below is the function you can use for the same. It’s simple, straight forward and easy to use.<h2>Benefits:</h2><ul><li>It reduces the threat of SQL injection by removing the SQL (if there is any)</li><li>It also removes the HTML tags from the data passed as some bad guys pass &lt;scripts&gt; too for some undesirable works.</li></ul><h2>Uses:</h2>Using the function is simple all you have to do is make sure that it needs&nbsp;mysql_connection&nbsp;links to function. Please make sure you provide it. Remaining is nothing to worry about.<h2>Function:</h2><pre class="ql-syntax" spellcheck="false">/**
 * protecting the input form the SQL injection and script injection.
 * @param $data
 * @return mixed
 */
public function sanitizer ($data)
{
 if (!empty($data)) {
 foreach ($data as $key =&gt; $dataValue) {
 if (empty($dataValue)) {
 continue;
 }
 $dataValue = strip_tags($dataValue);
 $data[$key] = mysql_real_escape_string($dataValue, $this-&gt;link);
 }
 }

 return $data;
}
</pre><h2>Function Call:</h2><pre class="ql-syntax" spellcheck="false">$object = new Class();
$sanitizedGetArray = $object-&gt;sanitizer($_GET);
$sanitizedPostArray = $object-&gt;sanitizer($_POST);
</pre>If you have some other things to add to this function feel free to comment, I am still learning too you know.

The inputs in Core PHP are venerable to what you call “SQL Injection”, to before putting them to use it’s a mandatory practice to sanitize them

How to sanitize Input in PHP  - Code By Samgan

How to Sanitize Input in PHP

There are a number of MySQL client but so far&nbsp;phpmyadmin&nbsp;is one of the popular MySQL client used. It’s simple to use, effective and provide almost all the required features for day to day development.Connecting to remote is something you don’t need so often but when you need it, I can bet it’s a critical situation. Here below we will discuss 2 simple steps to add a remote connection to your&nbsp;phpmyadmin.<h2>Step 1: Updating the configuration</h2>Open your&nbsp;phpmyadmin&nbsp;installation, if you are using XAMPP, you will find it the XAMPP installation directory. Once you are in the&nbsp;phpmyadmin&nbsp;installation, open “config.inc.php”<h2>Step 2: Copy and Paste</h2>In this file, you will find the configuration for the localhost, copy and paste the same with the remote details.And we are done.Now you will be able to see remote details in the drop-down

There are a number of MySQL client but so far phpmyadmin is one of the popular MySQL client used. It's simple to use, effective and provide almost all the required features for day to day development.

How to add remote DB in phpmyadmin - codebysamgan

How to add remote DB in phpmyadmin

Although the authentication component of CakePHP 3 has made the life of a developer much easier but still there are some functionalities that are still needed to be done manually. One of them is login automatically if the users have checked for ‘remember me’.To be frank auto login also known as cookie-based login is not that big deal. The real idea behind that is to make browser remember that user from a particular site has visited and if he comes back please don't ask him/her to log in again.By so far you must have understood that we are going to use cookies to implement the logic. So, without wasting any time lets get started<h2>Step 1.</h2>Add cookie component to the system. You may have noticed the best place to add a component is in the&nbsp;appController.php&nbsp;initialize action as the request handler and flash are also included there.You can add the following line to add the cookie component.<pre class="ql-syntax" spellcheck="false">$this-&gt;loadComponent('Cookie');
</pre><h2>Step 2.</h2>Now since we have cookies support with us, we can proceed further.Now we have to make a remember me checkbox on the login page so that we can check if the user is willing to be remembered by the browser.You can do it easily by just adding an input with type=”checkbox”. For this article name of the checkbox is “remember”<pre class="ql-syntax" spellcheck="false">&lt;input class="form-control" type="checkbox" name="remember"&gt; Remember Me
</pre><h2>Step 3.</h2>Now we are all set for the main functionality.Now if the user’s checks “remember me” we are going to add a secret hash in the cookies and the same hash will be assigned to the login user for future identification. To do that we only need 1 thing a “secret hash”. This can be done with the help “Security” utility.Add the following line to&nbsp;appController.php<pre class="ql-syntax" spellcheck="false">use Cake\Utility\Security;
</pre>Now create a function in app controller which will return a secret and unique hash.<pre class="ql-syntax" spellcheck="false">function _hashGenerator()
{
 return Security::hash(rand());
}
</pre>Congratulations! We have hash now.<h2>Step 4.</h2>Things from here are simple from here. Below is the pseudo code for the same.<ul><li>Check if the remember is checked</li><li>if checked then set a variable remember and unset the check form the request as it will create a problem in the auth identify.</li><li>Once the user is identified and remember is set then set the auto login. (function is mentioned below).</li><li>In setting autoLogin</li><li class="ql-indent-1">generate a hash</li><li class="ql-indent-1">assign&nbsp;same&nbsp;hash to login user</li><li class="ql-indent-1">set the same hash in cookies.</li></ul>The function to implement the above pseudo code is mentioned below (to be written in&nbsp;usersController.php)<pre class="ql-syntax" spellcheck="false">if ($user = $this-&gt;Auth-&gt;identify()) {
 if ($remember) {
 $this-&gt;_setAutoLogin($user['id']);
 }
...
function _setAutoLogin($id=null)
{
 $hash = $this-&gt;_hashGenerator();
 $this-&gt;Cookie-&gt;config([
 'expires' =&gt; '+30 days',
 'httpOnly' =&gt; true
 ]);
 $this-&gt;Cookie-&gt;write('connects', $hash);
 $user = $this-&gt;Users-&gt;get($id);
 $user-&gt;hash = $hash;
 if ($this-&gt;Users-&gt;save($user)) {
 return true;
 } else {
 return false;
 }
}
</pre><h2>Step 5.</h2>All set we are done now. All we have to do is add the below line at the start of the login function in&nbsp;usersController.php.<pre class="ql-syntax" spellcheck="false">$this-&gt;_autoLogin();
</pre>and add the below function to&nbsp;usersController.php<pre class="ql-syntax" spellcheck="false">function _autoLogin()
{
 if ($this-&gt;Cookie-&gt;read('connects')) {
 $user = $this-&gt;Users-&gt;findByHash($this-&gt;Cookie-&gt;read('connects'))-&gt;first()-&gt;toArray();
 $this-&gt;_setAutoLogin($user['id']);
 $this-&gt;Auth-&gt;setUser($user);
 
 return $this-&gt;redirect(['controller' =&gt; 'pages', 'action' =&gt; 'home']);
 } else {
 return false;
 }
}
</pre>See, it was that simple. If you any query or suggestion regarding the issue feel free to comment.

Although the authentication component of CakePHP 3 has made the life of a developer much easier but still there are some functionalities that are still needed to be done manually. One of them is login automatically if the users have checked for 'remember me'.

Hi, I am Samgan.