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

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

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

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.