Forem: Mitesh Kamat

How I understood setImmediate()

Mitesh Kamat — Mon, 29 Mar 2021 09:53:35 +0000

This post is about understanding the execution order of setImmediate() in node js environment.

As per official nodejs documentation related to setImmediate which is as follows:

setImmediate() will execute code at the end of the current event loop cycle. This code will execute after any I/O operations in the current event loop and before any timers scheduled for the next event loop. This code execution could be thought of as happening "right after this", meaning any code following the setImmediate() function call will execute before the setImmediate() function argument.

For example:


console.log("before immediate");

setImmediate((arg) => {
  console.log(`executing immediate: ${arg}`);
}, "immediately");

console.log("after immediate");

Output would be:

before immediate
after immediate
executing immediate: immediately

Now let us move the setImmediate block inside a function and check execution:

function test() {
  setImmediate((arg) => {
    console.log(`executing immediate: ${arg}`);
  }, "immediately");
}
test();

console.log("before immediate");
console.log("after immediate");

Output:

before immediate
after immediate
executing immediate: immediately

Let's compare it with setTimeout() w.r.t the scope they are declared in.
When we have the timers declared in the main module i.e. not within any I/O cycle .

console.log("before immediate");

setImmediate((arg) => {
  console.log(`executing immediate: ${arg}`);
}, "immediately");

setTimeout(
  (arg) => {
    console.log(`executing timeout: ${arg}`);
  },
  0,
  "hi"
);

console.log("after immediate");

Output on 1st execution:

before immediate
after immediate
executing timeout: hi
executing immediate: immediately

Output on 2nd execution:

before immediate
after immediate
executing immediate: immediately
executing timeout: hi

Output on 3rd execution:

before immediate
after immediate
executing timeout: hi
executing immediate: immediately

Now even if you put them inside a function the output will be same i.e. non-deterministic

console.log("before immediate");
function first() {
  setImmediate((arg) => {
    console.log(`executing immediate: ${arg}`);
  }, "immediately");
  setTimeout(
    (arg) => {
      console.log(`executing timeout:${arg}`);
    },
    0,
    "hi"
  );
}
first();
console.log("after immediate");

Execute multiple times and compare the output.

If we create an I/O cycle like reading a file or accessing any resource from disk, then how will the timers behave.

var fs = require("fs"); //module to read a file on disk
console.log("before immediate");

fs.readFile("readFile.txt", () => {
  setTimeout(
    (arg) => { console.log(`executing timeout: ${arg}`);},0,"1"
  );
  setTimeout(
   (arg) => {console.log(`executing timeout:${arg}`) ;},0,"2"
  );
  setTimeout(
    (arg) => {console.log(`executing timeout:${arg}`);},0,"3"
  );
  setImmediate((arg) => {
    console.log(`executing immediate: ${arg}`);
  }, "1");
  setImmediate((arg) => {
    console.log(`executing immediate: ${arg}`);
  }, "2");
  setImmediate((arg) => {
    console.log(`executing immediate: ${arg}`);
  }, "3");
});

console.log("after immediate");

Output would be:

before immediate
after immediate
executing immediate: 1
executing immediate: 2
executing immediate: 3
executing timeout: 1
executing timeout: 2
executing timeout: 3

Even if you repeat this execution multiple times , it would return the same output.

So the basic takeaway from this is: if both these timers are executed inside an I/O operation or task setImmediate() will always execute ahead of setTimeout().

That's what I learnt repeating this execution multiple times and in different context's.

Cheers..

Small tip for cypress test reports

Mitesh Kamat — Fri, 22 Jan 2021 10:35:12 +0000

Introduction

This post is about a small tip while creating xml and json coverage reports using cypress tool.

Use case

I am using cypress as end to end testing tool for my react redux application which is being deployed on azure.

There is plenty on the web to guide us in configuring our test environment like executing scripts to run test cases, manage code coverage, publish test reports, etc. So I am not discussing that here.

In my case I used mochawesome report generator to generate html test reports .

But with azure, it supports xml test reports or test cases.And cypress provides us the option of configuring multiple reporters which can fulfill our usecase. As mentioned under official documentation we can enable multiple reporters option using

{
  "reporter": "cypress-multi-reporters"
}

Then I decided to use mochawesome reporter to generate individual json reports which were merged using mochawesome-merge and an html report was generated with mochawesome report generator.

Getting a readable html report served me well for development purpose. Now I also had to generate xml reports which I would use in azure environment.I went with mocha junit reporter.

How I did it?

enable multi reporter option
provide reporter options for mochawesome and mocha junit


"reporter": "cypress-multi-reporters",
  "reporterOptions": {
    "reporterEnabled": "mochawesome, mocha-junit-reporter",
    "mochawesomeReporterOptions": {
      "reportDir": "cypress/reports/mocha",
      "quite": true,
      "overwrite": false,
      "html": false,
      "json": true
    },
    "mochaJunitReporterReporterOptions": {
      "mochaFile": "cypress/results/results-[hash].xml"
    }

Below is my current cypress test environment configuration file.

{
  "baseUrl": "http://localhost:3000/",
  "experimentalComponentTesting": true,
  "numTestsKeptInMemory": 0,
  "reporter": "cypress-multi-reporters",
  "reporterOptions": {
    "reporterEnabled": "mochawesome, mocha-junit-reporter",
    "mochawesomeReporterOptions": {
      "reportDir": "cypress/reports/mocha",
      "quite": true,
      "overwrite": false,
      "html": false,
      "json": true
    },
    "mochaJunitReporterReporterOptions": {
      "mochaFile": "cypress/results/results-[hash].xml"
    }
  },
  "video": false,
  "chromeWebSecurity": false
}

I am just generating json reports to get a better html report and xml reports for deployment purpose.

I hope this serves as a tiny and helpful tip. Cheers !!!

Quick links sticky footer

Mitesh Kamat — Wed, 02 Sep 2020 04:22:44 +0000

Introduction

Building sticky footer using bootstrap to serve as quick links on your webpage.

Nowadays, we see numerous apps with quick links feature in footer. So whenever we create any responsive website we think of providing various quick links in mobile view at the bottom in the form of sticky footer.

Then we think of....

how many links should I provide?

should I provide a more icon?

how many links should I place in more option?

So, I decided to build a sticky footer with a more option and providing additional links in the more section of footer with some animation.
In my case I have placed a center icon which drives the animation.

what I used?
Bootstrap 4.5.0
Some jQuery
Font awesome 4.7.0

You can find the implementation here: https://codepen.io/miteshkamat27/pen/NWNPWjv
Hope it helps.

Cheers !!!

An object from two arrays

Mitesh Kamat — Sun, 19 Jul 2020 07:09:11 +0000

Introduction

This post is about creating a JavaScript object using two arrays.

I had to create an array of keys with a format: /valueText and values with a format Value text.
So, the resulting object would be:

let result = {
 /valueText: 'Value text'
}

So, I wrote a function which would return a key in desired format.

const formatKey= (s) => {
    if (typeof s !== 'string') return ''
    return "/" + s.split(" ").join("").charAt(0).toLowerCase() + s.split(" ").join("").slice(1);
  }

I stored these values in one array which I named fieldKeys.
Now to construct an object from these two arrays, I made use of one array for iteration and kept filling in the object.

There are various methods to do it.

Method 1: **forEach**

fieldKeys.forEach((key, index) => result[key] = fieldValues[index])

Method 2: **reduce**

result = fieldKeys.reduce((acc, key, index) => ({...acc, [key]: fieldValues[index]}), {})

Method 3: **Object.assign**

result = Object.assign(...fieldKeys.map((key, index) => ({[key]: fieldValues[index]})))

Here is the complete snippet:


  let fieldValues = ['First Value', 'Second Value', 'Third 
   Value'];
  let result = {};
  const formatKey= (s) => {
    if (typeof s !== 'string') return ''
    return "/" + s.split(" ").join("").charAt(0).toLowerCase() + s.split(" ").join("").slice(1);
  }

  let fieldKeys = fieldValues.map(item => formatKey(item));
  console.log(fieldKeys);
  fieldKeys.forEach((key, index) => result[key] = fieldValues[index]);
  console.log(result);
//output: {/firstValue: "First Value", /secondValue: "Second Value", /thirdValue: "Third Value"}

Hope this helps if you have this kind of usecase.

Cheers !!!

Console check before commit

Mitesh Kamat — Fri, 19 Jun 2020 04:25:52 +0000

Introduction

This post is about adding a git hook to check for console.log statements before code commit.

Developers tend to log variables, objects, api response, etc while writing our code. And yes it is fair enough but once we are done with our piece of code we often forget to remove those statements while committing our code.

But Git hooks helps us here.

I faced the same issue of getting rid of all the log statements in my code. so, I decided to use git hooks.
There are various options , but I chose pre-git

You can go through the link to explore about it.

To start off with pre-git, once you install the npm package you would have a .git folder in root of your project directory. Now navigate to hooks folder and locate pre-commit file and copy the below mentioned script and save.

#!/bin/sh

red='\033[0;31m'
green='\033[0;32m'
yellow='\033[0;33m'
no_color='\033[0m'

echo -e "\n${yellow}Executing pre-commit hook...${no_color}\n"

FILES_PATTERN='\.(js)(\..+)?$'
FORBIDDEN='console\.[clear|dir|log|info|warn|error]'

#check for console. references in your code

if git diff --cached --name-only | \
    grep -E $FILES_PATTERN | \
    xargs grep --with-filename -n $FORBIDDEN | \
    grep -v '//';
then
    echo -e "\n${red}COMMIT REJECTED!  Found console. references. Please remove them before committing.\n${no_color}"
    exit 1;
fi
echo -e "${green}No console. references found!${no_color}\n"
echo -e "${green}Git pre-commit hook was successful!${no_color}\n"
exit 0;

This script just checks for console. statements present in your project and prompts with appropriate message.

Commit would be rejected if it encounters any console statements.

I hope you find this useful.

Cheers !!

Securing express js server

Mitesh Kamat — Wed, 27 May 2020 10:45:15 +0000

Introduction

This post is about securing your express js application from network attacks.

Once you are done with developing your application which uses node js server, the next task comes up is of deploying it to production or making it ready for production.

First and the most vital point that comes to our mind is how secure is our application? Are the API requests made through my application secure? Does the secret key or token or sensitive data has enough security?

Express JS documentation covers all these questions here

It lists down the options we should opt for and other suggestions.

In my case, I made use of Helmet , an npm package which provides enough security to our routes.
You can also customize the Content-Security-Policy header as per your needs.

app.use(helmet.contentSecurityPolicy({
  directives: {
    defaultSrc: ["'self'"],
    styleSrc: ["'self'", 'maxcdn.bootstrapcdn.com'],
    scriptSrc: ["'none'"],
    imgSrc: ["'none'"],
    fontSrc: ["'none'"],
  }
}))

As mentioned in the options, you can specify the valid sources for your images, fonts, scripts, styles, etc. This surely adds a level of security.
Refer this for contentSecurityPolicy.

I am sure it will help you in some way.

Cheers !!!

Library for modals, dialogs and alerts

Mitesh Kamat — Thu, 14 May 2020 07:03:31 +0000

Introduction

This post is about a ui library for modal popup.

Every now and then for a requirement involving modal popups, alert or prompts we tend to go for bootstrap as it also gives us grid layouts, utilities and handful of components to leverage.

It was not different in my case. But then, I stumbled upon a library name jQuery-confirm which had unique use cases. So, I decided to make use of this library.

My minimum usecases were:

It should be customizable from UI standpoint

It doesnot disappoint as you get:

nice style options, drag feature, color options.
theme options like light,dark, modern, material,etc.
animation support
auto close feature

It should have something for AJAX requests

With jconfirm you have the power to load content directly when needed via ajax, no extra code.
Two methods are available to load content via Ajax:

Pass in String content the URL with "URL:" prepended. content: "URL:http://example.com/getData?id=1"
Pass in Function that returns a jQuery ajax promise. content: function(){ return $.get(...); }

Lastly proper documentation with examples

Do give it a try as it happens to be a nice alternative with cool features.

Cheers !!!

How to get Cypress working on windows

Mitesh Kamat — Mon, 27 Apr 2020 04:03:21 +0000

Introduction

This article is about how to get cypress in working state on windows.

Cypress is the new standard in front-end testing that every developer and QA engineer needs.

So, I thought of digging into learning what cypress is. But, the installation wasn't smooth. Earlier, I thought as per the official doc it would be just the basic command npm i cypress --save-dev. But it wasn't.

While doing so ,I bumped into this

Installing Cypress (version: 4.4.1)

 ✖  Downloading Cypress
   → Cypress Version: 4.4.1
    Unzipping Cypress
    Finishing Installation
The Cypress App could not be downloaded.

Please check network connectivity and try again:
----------

URL: https://download.cypress.io/desktop/../../4.4.1?platform=win32&arch=x64
Error: self signed certificate in certificate chain

Even after setting corporate proxy it didnot work. Did search about it and found that it is marked as bug in their github repo.

Then, as per few suggestions went for direct download from cypress.io.

steps which I followed:

Download zip file from Cypress
In vscode terminal run, setx CYPRESS_INSTALL_BINARY C:\path-to\Downloads\cypress.zip
Don't be in a hurry restart vscode.
Now run ** npm i cypress --save-dev ** in vscode terminal
You would see something like this:

> cypress@4.4.1 postinstall C:\react-project-path\node_modules\cypress
> node index.js --exec install

‼ Warning: Forcing a binary version different than the default.

  The CLI expected to install version: 4.4.1

  Instead we will install version: C:\path-to\Downloads\cypress.zip

  These versions may not work properly together.

  √  Unzipped Cypress

You can now open Cypress by running: node_modules\.bin\cypress open

https://on.cypress.io/installing-cypress

In your package.json file, find the scripts section and add a new entry.

"scripts": {
      .....
      "cypress:open": "cypress open"
  },

In your project terminal, execute npm run cypress:open

> react_project@0.1.0 cypress:open C:\path-toproject\
> cypress open

It looks like this is your first time using Cypress: 4.4.1

  √  Verified Cypress! C:\...\AppData\Local\Cypress\Cache\4.4.1\Cypress

Opening Cypress...

It would open up a cypress window and then you can begin your learning in cypress framework.

Note: With direct download you will not be able to use dashboard service and that is a shortcoming of this approach.

Cheers !!!

ReactJS with Tailwind CSS

Mitesh Kamat — Mon, 20 Apr 2020 13:08:11 +0000

Introduction

This post is about configuring Tailwind css with React Js.

We will start with the setup process. It will be smooth if we follow along as always :P

setup

We will use create-react-app for bootstrapping our application

npx create-react-app my-react-tailwind-project

Install Tailwind via npm

Below command will add tailwind as devdependency for our project.

npm install tailwindcss --save-dev

Create your Tailwind config file

If you'd like to customize your Tailwind installation, you can generate a config file for your project using the Tailwind CLI utility included when you install the tailwindcss npm package:

npx tailwindcss init

This will create a file tailwind.config.js at root level of your project and would look like this:

module.exports = {
  theme: {
    extend: {}, // color palette, font stacks, type scale, border sizes, breakpoints, etc.
  },
  variants: {}, //Using utilities to style elements on hover, focus, and more
  plugins: [], //to register third-party plugins with Tailwind
}

Process your CSS with Tailwind

We will add Tailwind as a PostCSS plugin which means we will create a config file postcss.plugin.js and add tailwind as plugin in it.

PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.

We will also include Autoprefixer to deal with vendor prefixes and use PostCSS-Import to resolve path of an @import rule.

Let's add them first

npm i postcss-cli autoprefixer postcss-import --save-dev

Now, create a config file postcss.config.js at the root level.

const tailwindcss = require('tailwindcss');

module.exports = {
  plugins: [
    require('postcss-import'),
    tailwindcss('./tailwind.config.js'), //since we have a config file for tailwind
    require('autoprefixer'),
  ],
};

As we are going to process our CSS so it will generate a new css file with tailwind css and our css. Now create a folder named css under src folder and place our App.css inside this folder.

Add Tailwind to your CSS

Create a file name tailwind.css under src/css folder

If you're using postcss-import , use imports instead of the @tailwind directive to avoid issues when importing any of your own additional files:

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

Then import this file in src/css/app.css

@import './tailwind.css';

Configure Your App To Build Your CSS

Next, we need to configure our project to build our CSS styles each time we run the npm start command.

Now add a script to our package.json to run before we start our app. This will tell PostCSS to generate the css file to be used by our app.

"scripts": {
    "start": "npm run watch:css && react-scripts start",
    "build": "npm run build:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:css": "postcss src/css/app.css -o src/App.css", 
    "watch:css": "postcss src/css/app.css -o src/App.css"
  },

Here, we have added two tasks:

build:css ==> it will compile and build your css output into src/App.css
watch:css ==> it will watch the css changes and output into src/App.css

Let's add a tailwind class to change the background colour of the default app screen.

<div className="App bg-teal-700"></div>

Now run your app using npm start and check (http://localhost:3000/)
You would notice that it runs the buildCSS command and generates App.css under src folder.
Do remove the default css related to background to see the changes.

Responsive design

To see how responsive design works with tailwind, add this in App.js

<div class="bg-red-500 sm:bg-green-500 md:bg-blue-500 lg:bg-pink-500 xl:bg-teal-500">Dummy text</div>

Now check your app in mobile and other breakpoints to see the changes.

As mentioned earlier, it was just about configuring tailwind with react and testing responsive design. I've just started off with Tailwind css so I am yet to build a UI design like a dashboard or a website.

I hope it helps someone who wants to start with Tailwind css.

Cheers !!!

An if else alternative

Mitesh Kamat — Mon, 13 Apr 2020 05:00:31 +0000

Introduction

This post is about suggesting an alternative to the traditional if else statement.

Consider this if else block

let block= 'j',
    name= '';
if ( block === 'j' )
    name = 'JavaScript';
else if ( block === 'k' )
    name = 'KnockoutJS';
else
    name = 'Guest';

Now, the alternative would be this

let block = 'j';
let name = ({
 j: 'JavaScript',
 k: 'KnockoutJS',
})[block] || 'Guest'
console.log(name);

//Output:
JavaScript

It delivers the same functionality. We are fetching a value from an object literal based on it's key.

We will break it down for understanding.
Consider,

let setValue = 'second';
let points = {
 first: 1,
 second: 2
};

let plot = points[setValue] || 3;

We use this in day to day coding so we can easily relate to the alternative.

The property values can be function too.

let test = 'b';
let fn = ({
a: () => { console.log('first')},
b: () => { console.log('second')}
})[test] || (() => {console.log('outside defined values')})

fn();
//output:
second

Since the properties are functions , you need call the properties as function.

We can also include this in an IIFE.

let test = 'x';
( ( {
    a: () => {
        console.log( 'function a' );
    },
    b: () => {
        console.log( 'function b' );
    },
} )[ test] || ( () => { console.log( 'default function' ); } ) )();

//Output:
default function

Thanks for reading this post.
Cheers !!!

Simple CRUD app with Svelte JS

Mitesh Kamat — Tue, 07 Apr 2020 05:05:49 +0000

Introduction

This post is an attempt to create a simple CRUD operation using svelte js.
In order to learn some aspects of svelte, I thought of creating this simple use case.

Use case

Perform create, update, delete and read.
A simple note with title and content field.

Let us begin.

npx degit sveltejs/template svelte-crud-example

cd svelte-crud-example

npm install
npm run dev

Above mentioned are the basic steps to create a svelte project and run it on your browser http://localhost:5000/

I will use bootstrap 4 cdn link to style my page. So, goto your root folder locate index.html present in your public directory and add this:

<link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    />

Now create a new file named Notes.svelte under src folder and add the below template:

<section>
  <div class="container">
    <div class="row mt-5">
      <div class="col-md-6">
        <div class="card p-2 shadow">
          <div class="card-body">
            <h5 class="card-title mb-4">Add New Note</h5>
            <form>
              <div class="form-group">
                <label for="title">Title</label>
                <input
                  type="text"
                  class="form-control"
                  id="text"
                  placeholder="Note Title" />
              </div>
              <div class="form-group">
                <label for="content">Content</label>
                <textarea
                  class="form-control"
                  id="content"
                  rows="3"
                  placeholder="Note Content" />
              </div>
              <button type="submit" on:click|preventDefault={addNote} class="btn btn-primary">
            Add Note</button>
            </form>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        {#each notes as note}
          <div class="card ">
            <div class="card-body">
              <h5 class="card-title">{note.title}</h5>
              <p class="card-text">{note.content}</p>
              <button class="btn btn-info"  on:click={editNote()}>Edit</button>
              <button class="btn btn-danger" on:click={deleteNote()}>Delete</button>
            </div>
          </div>
        {/each}
      </div>
    </div>
  </div>
</section>

Now lets add some script to make it functional

<script>

let notes = [];

let data = {
    title: "",
    content: "",
    id: null
};

let addNote = () => {
    //create functionality
}

let deleteNote = id => {
    //delete functionality
};

let editNote = note => {

    //editfunctionality
};
let updateNote = () => {
    //update functionality
}

I have my note template ready but I need to store the values which I enter. So, I will make use of *bind: *

Now my template would look like this:

<section>
  <div class="container">
    <div class="row mt-5">
      <div class="col-md-6">
        <div class="card p-2 shadow">
          <div class="card-body">
            <h5 class="card-title mb-4">Add New Note</h5>
            <form>
              <div class="form-group">
                <label for="title">Title</label>
                <input
                  bind:value={data.title}
                  type="text"
                  class="form-control"
                  id="text"
                  placeholder="Note Title" />
              </div>
              <div class="form-group">
                <label for="content">Content</label>
                <textarea
                  class="form-control"
                  id="content"
                  bind:value={data.content}
                  rows="3"
                  placeholder="Note Content" />
              </div>

                <button type="submit" on:click|preventDefault={addNote} class="btn btn-primary">
            Add Note</button>

            </form>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        {#each notes as note}
          <div class="card ">
            <div class="card-body">
              <h5 class="card-title">{note.title}</h5>
              <p class="card-text">{note.content}</p>
              <button class="btn btn-info"  on:click={editNote()}>Edit</button>
              <button class="btn btn-danger" on:click={deleteNote()}>Delete</button>
            </div>
          </div>
        {/each}
      </div>
    </div>
  </div>
</section>

I wanted to experiment this with stores concept. So, I will add writable store to it and add my logic to the store.
Now create a file name Store.js

import { writable } from 'svelte/store';

const store = () => {
    const state = []; //Initial state
    const {subscribe, set, update} = writable(state);
    const tasks= {
        createNote(data) {
            console.log("data: ", data);
            //logic
        },
        modify() {
          //logic
        },
        delete(id) {
            //logic
        }
    }

    return {
        subscribe,
        set,
        update,
        ...tasks
    }
}
export const notesStore = store();

Lets breakdown the above code:

Create a function named store which would contain crud logic.
Create an initial state.
Create an object tasks which would have helper functions like add, delete and modify.
My store should return default methods of store which are subscribe, set and update and also it should give access to tasks object which holds my helper functions.
So, we just need to import this in our component and invoke this helper functions on respective event handlers which we would write for our component.

I will update Notes.svelte with following code

<script>
import { notesStore } from './Store.js'; //Import store

let notes = []; //Array used to iterate over number of notes

let data = {  // An object to store the entered values
    title: "",
    content: "",
    id: null
};

//Subscription with store for latest changes
const unsubscribe = notesStore.subscribe(value => {notes = value});

let addNote = () => {
    const newNote = {
      id: notes.length + 1,
      title: data.title,
      content: data.content
    };
    notesStore.createNote(newNote); //trigger create functionality
    data = {
        id: null,
        title: "",
        content: ""
    };
}

let deleteNote = id => {
    notesStore.delete(id);
};
let isEdit = false;
let editNote = note => {
    isEdit = true;
    data = note;
};
let updateNote = () => {
    isEdit = !isEdit;
    notesStore.modify(data);
    data = {
      id: null,
      title: "",
      content: ""
    };
}

</script>
<section>
  <div class="container">
    <div class="row mt-5">
      <div class="col-md-6">
        <div class="card p-2 shadow">
          <div class="card-body">
            <h5 class="card-title mb-4">Add New Note</h5>
            <form>
              <div class="form-group">
                <label for="title">Title</label>
                <input
                  bind:value={data.title}
                  type="text"
                  class="form-control"
                  id="text"
                  placeholder="Note Title" />
              </div>
              <div class="form-group">
                <label for="content">Content</label>
                <textarea
                  class="form-control"
                  id="content"
                  bind:value={data.content}
                  rows="3"
                  placeholder="Note Content" />
              </div>
              {#if isEdit === false}
                <button type="submit" on:click|preventDefault={addNote} class="btn btn-primary">
            Add Note</button>
                {:else}
                <button type="submit" on:click|preventDefault={updateNote} class="btn btn-info">
                    Edit Note</button>
            {/if} 
            </form>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        {#each notes as note}
          <div class="card ">
            <div class="card-body">
              <h5 class="card-title">{note.title}</h5>
              <p class="card-text">{note.content}</p>
              <button class="btn btn-info"  on:click={editNote(note)}>Edit</button>
              <button class="btn btn-danger" on:click={deleteNote(note.id)}>Delete</button>
            </div>
          </div>
        {/each}
      </div>
    </div>
  </div>
</section>

My final store logic would look like:

import { writable } from 'svelte/store';

const store = () => {
    const state = []
    const {subscribe, set, update} = writable(state);
    const methods = {
        createNote(data) {
            console.log("data: ", data);
            update(state => {
                state = state.concat(data);
                console.log("store data: ",state);
                return state;
            });
        },
        modify() {
             update(state => {
              console.log('state in store: ',state);
              return state;
             });
        },
        delete(id) {
            console.log(id);
            update(state => state.filter(state => state.id != id))
        }
    }

    return {
        subscribe,
        set,
        update,
        ...methods
    }
}
export const notesStore = store();

Now move to App.svelte and import Notes.svelte and place in

<script>
 import Notes from './Notes.svelte';
</script>
<main>
    <p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
    <Notes />
</main>

Now check http://localhost:5000/ and try creating , editing and deleting a note.
As I am still exploring sveltejs, so this might not be the best approach or practice. But I think this can help you to dig more into svelte store.

Hope this helps. Cheers !!!

Scrollable tabs with Bootstrap 4

Mitesh Kamat — Tue, 31 Mar 2020 05:00:51 +0000

Introduction

This post is about creating scrollable tabs using bootstrap.

Whenever a requirement of creating a tab bar comes up, we tend to think of how this would look in mobile view. If we are short of time, we look for options like plugins or does bootstrap has what I need which I can leverage and customize later on.

Same happened with me and I found out Bootstrap 4 doesnot give me such a component.

Then, I used the existing bootstrap 4 markup for tabs customised it to my needs and made it scrollable.

what I used?

Bootstrap 4.4.1
Small JavaScript code (3 liner)
Default template for tabs from bootstrap

And this is how it looks like https://codepen.io/miteshkamat27/pen/QWbYPPW

I hope it reduces your pain in search of a scrollable tab bar.

Cheers !!!