Learn on Techformist https://techformist.com/tags/learn/ Recent content in Learn on Techformist https://techformist.com/logo.svg https://techformist.com/logo.svg Hugo -- gohugo.io en-us Wed, 20 Jan 2021 06:30:00 +0000 Teleport in VueJS https://techformist.com/teleport-vuejs/ Wed, 20 Jan 2021 06:30:00 +0000 https://techformist.com/teleport-vuejs/ <p>Teleport is a new feature introduced in Vue 3. Teleport provides better control to developers on where exactly an element is rendered.</p> <h2 id="get-teleporting">Get Teleporting</h2> <p>Let us create a new Vue 3 app to start playing around with teleport. We will use Vite, because it is 2021.</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-cmd" data-lang="cmd"><span class="line"><span class="cl">npm init @vitejs/app </span></span></code></pre></div><p>Provide a project name (<code>teleport</code>) and select <code>vue</code> as the template.</p> <p>Install dependencies and start the app.</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-cmd" data-lang="cmd"><span class="line"><span class="cl"><span class="k">cd</span> teleport </span></span><span class="line"><span class="cl">npm i </span></span><span class="line"><span class="cl">npm run dev </span></span></code></pre></div><p>Navigate to <code>http://localhost:3000</code> to see your new app.</p> Teleport is a new feature introduced in Vue 3. Teleport provides better control to developers on where exactly an element is rendered.

Get Teleporting

Let us create a new Vue 3 app to start playing around with teleport. We will use Vite, because it is 2021.

npm init @vitejs/app

Provide a project name (teleport) and select vue as the template.

Install dependencies and start the app.

cd teleport
npm i
npm run dev

Navigate to http://localhost:3000 to see your new app.

Replace the <template> section in src/components/HelloWorld.vue.

<template>
  <h1>{{ msg }}</h1>
</template>

Create a new component src/components/Messages.vue -

<template>
  <HelloWorld msg="Hello"></HelloWorld>
  <HelloWorld msg="Hi"></HelloWorld>
  <HelloWorld msg="Goodbye"></HelloWorld>
</template>

<script setup>
  import HelloWorld from "./HelloWorld.vue";
</script>

Replace <template> section in src/App.vue -

<template>
  <Messages></Messages>

  <img alt="Vue logo" src="./assets/logo.png" style="height: 100px" />
</template>

We are just rearranging a couple of things and setting the stage for demonstrating teleport.

You will see output as expected -

vue-simple-app-no-teleport

This makes absolute sense -

  1. You create a component and build up UI with components
  2. You use the components in the parent component/view exactly in the place you need it

Teleport helps us to write code in a logical fashion but have more control over where the component is rendered.

For e.g., we can change the code in Messages.vue to -

<template>
  <HelloWorld msg="Hello"></HelloWorld>
  <HelloWorld msg="Hi"></HelloWorld>
  <teleport to="#startapp">
    <HelloWorld msg="Goodbye"></HelloWorld>
  </teleport>
</template>

Now, change App.vue to -

<template>
  <div id="startapp"></div>
  <Messages></Messages>

  <img alt="Vue logo" src="./assets/logo.png" style="height: 100px" />
</template>

The third message is moved to the first position, i.e, the rendering of the component will be teleported to the tag with id startapp.

You may in fact transport anything outside of the entire Vue render tree. For e.g., change index.html to -

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="startapp"></div>

    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

vue-simple-app-teleport

Where to use teleport?

Teleport offers a cleaner segregation from the “coding” side of things as compared to where a component/element is rendered.

Here are a couple of use cases where teleport can help-

  • High degree of control over positioning of elements: Display elements like status bar always at the bottom of page - no matter where they are used. You are not constrained to code in those components at the very end
  • Modals: You can have a conditional display of modal dialog anywhere in the app, but you may want to move it to end. Or, you may move a full-screen modal to the body tag and have a cleaner UI
]]> Create a Task Management App with ReactJS in 2021 https://techformist.com/task-management-app-reactjs-2021/ Wed, 13 Jan 2021 06:30:00 +0000 https://techformist.com/task-management-app-reactjs-2021/ <p>In this post let us see how we can easily build a task management app (which is totally &amp; completely different from a todo app) using ReactJS. We will be using React Hooks, Chota CSS for styling and a lot of ES6+. We will not look at any centralised state management, or deal with a backend to store the tasks in this post.</p> <h2 id="get-started">Get Started</h2> <p>Use <code>create-react-app</code> to structure your project like any sane person would do -</p> In this post let us see how we can easily build a task management app (which is totally & completely different from a todo app) using ReactJS. We will be using React Hooks, Chota CSS for styling and a lot of ES6+. We will not look at any centralised state management, or deal with a backend to store the tasks in this post.

Get Started

Use create-react-app to structure your project like any sane person would do -

npx create-react-app tasker-react-sample-app

Proceed to have a dozen cups of coffee while your app gets initialised. Open the project root folder in VSCode to see this beautiful structure.

create-react-app-structure

Start your app..

npm run start

Navigate to http://localhost:3000 in your browser to see the app.

While the create-react-app seems to do a lot of things (it does), you only need to care about a few things at this time -

  • The app gets anchored with one HTML file public/index.html and in a single node <div id="root"></div> (for the most part, bear with me). The file itself will not have direct reference to the javascript - that will be done through a build step
  • src/index.js refers to the root element 
    ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);
  • App in index.js is where you will start coding React magic. You shall use JSX in the React components to do all that magic, or you shall perish - 
    function App() {
  return (
    <div className="App">
      <header className="App-header"></header>
    </div>
  );
}

Read more about JSX here, or just follow along by keeping mind two things -

  • You can code all the HTML you want within JSX
  • Use className instead of class to reference css classes
  • Use { } notation within JSX for expressions, variables etc.

Let’s do a quick take on how the components work. Create a new file src/components/HelloWorld.js -

export default function HelloWorld() {
  return (
    <>
      <h3>Hello World</h3>
    </>
  );
}

JSX can have only one root - <></> tags take care of that. Rest is just plain HTML.

Include HelloWorld in App.js -

import logo from "./logo.svg";
import "./App.css";

import HelloWorld from "./components/HelloWorld";

// ...
function App() {
  return (
    <div className="App">
      <header className="App-header">
        {/* - existing code goes here - */}
      </header>
      <HelloWorld />
    </div>
  );
}

export default App;

You can see the bold words in your app almost immediately.

Before we proceed, install a few things to make your React development easier -

  1. Install React Developer Tools. This will add a couple of tabs in your Chrome Developer Tools to view components. By default you should see Components and Profiler
  2. Install VSCode extension ES7 React/Redux/GraphQL/React-Native snippets that will give you a bunch of useful snippets

You can use Emmet scripts to quickly create boilerplate and scripts - for e.g. create a new file and type in rfce and tab to see it in action.

Let us also include some styles, because well, we’re not cave-men.

Include the below line in your index.html to include a small, class-light library called chota.css -

<link rel="stylesheet" href="https://unpkg.com/chota@latest" />

Create a new file src/assets/styles.css and leave it blank for now. We will use it for custom styling. Include the file in App.js -

import "./assets/styles.css";

I will not really touch upon this topic again - but you can see the CSS code in the Github repo.

Creating Structure for your App

Let us create the basic elements for our app. First, the header - create a new file called src/components/Header.js.

function Header() {
  return (
    <div>
      <nav className="nav">
        <div className="nav-left">
          <a className="brand" href="#">
            Tasker
          </a>
        </div>
        <div className="nav-right">
          <div className="tabs">
            <a href="https://techformist.com">Techformist</a>
          </div>
        </div>
      </nav>
    </div>
  );
}

export default Header;

We have seen this earlier - JSX and stuff. The only difference is the CSS classes. Let’s include this Header in App.js.

// ...
import Header from "./components/Header";
// ... other code

function App() {
  return (
    // ...
    <div className="App">
      {/* .. */}
      <Header></Header>
      {/* .. */}
    </div>
  );
}

The above changes should give you a good idea about where we are going. We create a Header component, and include it in the main App so that it’s available everywhere in the app.

We can now include the main content just below Header.

Create Tasks Component

The simplest way to create a task component is familiar to us by now. Create a new file src/components/Tasks.js -

function Tasks() {
  return (
    <div className="row">
      <div className="col-12">Learn React</div>
      <div className="col-12">Profit</div>
    </div>
  );
}

export default Tasks;

Include Tasks in App.

// ...
import Tasks from "./components/Tasks";
// ... other code

function App() {
  return (
    // ...
    <div className="App">
      {/* .. */}
      <Header></Header>
      <button className="button">New</button>
      <Tasks></Tasks>
      {/* .. */}
    </div>
  );
}

You should now be able to see the tasks and a button “New” that doesn’t do anything.

Let’s level up. We will create a state variable tasks that will store tasks and can be accessible from different components. We could eventually use this variable to store tasks retrieved from a database or a file.

In the simplest design we could create tasks in Tasks component, but that would make it difficult to access in a different component. For example, we need tasks in both Tasks, which is a list of tasks, and TaskDetail, which shows the detail task and allows user to edit tasks. So, let’s create tasks in App.js for now.

import "./App.css";
import "./assets/styles.css";

import Header from "./components/Header";
import Tasks from "./components/Tasks";

import { useState } from "react";

function App() {
  const [tasks, setTasks] = useState([
    { desc: "Learn React", id: 1 },
    { desc: "Profit", id: 2 },
  ]);

  return (
    <div className="App">
      <Header></Header>
      <div className="container">
        <Tasks tasks={tasks}></Tasks>
      </div>
    </div>
  );
}

export default App;

We have done a couple of cool things here -

  1. Import useState from React
  2. Create tasks and initialize it. tasks is the variable name and setTasks is used to set this variable with a value. We will not be using setTasks right now, but directly provide the initial value as a param to useState 
    const [tasks, setTasks] = useState([
  { desc: "Learn React", id: 1 },
  { desc: "Profit", id: 2 },
]);
  3. Pass tasks as props to the Tasks component

Let us receive tasks prop in our Tasks component.

function Tasks({ tasks }) {
  return (
    <div className="row">
      <div className="col-12 text-right">
        <button className="button primary">New</button>
      </div>
      {tasks.map((task) => {
        return (
          <div className="col-12 text-left" key={task.id}>
            <h4>{task.desc}</h4>
          </div>
        );
      })}
    </div>
  );
}

export default Tasks;

As you can see -

  1. We receive a destructured tasks prop in the function. You could also define param as simply props (no brackets, no destructuring), and refer to tasks as props.tasks
  2. We cycle through tasks and display individual task using h3 element. The brackets contain the overall expression in JSX 
    {
  tasks.map((task) => {
    return (
      <div className="col-12 text-left" key={task.id}>
        <h4>{task.desc}</h4>
      </div>
    );
  });
}

You should now see..

Create Task Component

Tasks component is doing too many things -

  1. List tasks
  2. Show task
  3. er.. that’s about it, but it has the potential to much more

Let’s break the component so that display of a task becomes concern of a different component.

Create a new file src/components/Task.js -

function Task({ task }) {
  return (
    <div className="col-12 text-left" key={task.id}>
      <h4>{task.desc}</h4>
    </div>
  );
}

export default Task;

The code is a direct copy of the fragment responsible to display a specific task in Tasks component.

Include Task in Tasks -

import Task from "./Task";
function Tasks({ tasks }) {
  return (
    <div className="row">
      <div className="col-12 text-right">
        <button className="button primary">New</button>
      </div>
      {tasks.map((task) => (
        <Task task={task} key={task.id} />
      ))}
      <div className="col-12"></div>
    </div>
  );
}

export default Tasks;

This is very similar to last time when we included one component in another. We are just using an additional attribute called key, which denotes the unique identifier of each element in the array (and that will be task.id in our case).

The added advantage of segregating task display is that we can use this Task component to display individual task anywhere in the application.

Fantastic.

Let us add more attributes to the task and beautify this a bit. Afterall, a task is not simply about the description.

Add more attributes to the task in App.

const [tasks, setTasks] = useState([
  { desc: "Learn React", id: 1, date: "2021-01-03 10:00", status: "Complete" },
  { desc: "Profit", id: 2, date: "2021-01-05 15:00", status: "Open" },
]);

Change Task.js to make tasks come alive -

function Task({ task }) {
  return (
    <div className="card text-left" key={task.id}>
      <div className="row">
        <div className="col-10">
          <h4>{task.desc}</h4>
          <div className="task-meta">
            <img
              src="https://icongr.am/feather/calendar.svg?size=12&color=b5b5b5"
              alt="calendar"
            />
            {task.date}
          </div>
        </div>

        <div className="col-2 is-center">
          <button className="button icon-only clear">
            <img
              src="https://icongr.am/feather/check-circle.svg?size=24&color=11d054"
              alt="Open"
            />
          </button>
        </div>
        <div className="col-12">
          <p>{task.remarks}</p>
        </div>
      </div>
    </div>
  );
}

export default Task;

And, voila..

tasker-task-lists-simple

Add Functionality: Complete Task

We have successfully displayed a task so far, but we don’t have any functionality enabled on the task. We will change that by inserting a button to toggle the task status.

Add a function that can get called to change status. If we had a global state (e.g. Redux), we would have more independence to decide where this function has to reside. Since we are using a simple state at App level, we will introduce the function to change that state also within App. Create a new function -

const onTglStatus = (task) => {
  console.log("completing task");
};

The child component (Tasks in our case) does not know about this method. We have to pass the function to the inner-most component that will call it for some greater good.

Change App.js to pass onTglStatus as a prop -

// ...
<Tasks tasks={tasks} onTglStatus={onTglStatus}></Tasks>
//  ...

Repeat the above code in Tasks.js -

function Tasks({ tasks, onTglStatus }) {
  // ...
  <Task task={task} onTglStatus={onTglStatus} />;
  // ...
}

Call the function in Task.js -

function Task({ task, onTglStatus }) {
  // ...
  <button className="button icon-only clear" onClick={() => onTglStatus(task)}>
    > "⬜"
  </button>;
  // ...
}

Click the button to see the debug statement in developer console.

We have moved props including variables(state) and functions that act on the state down the chain, and events get surfaced up the component chain!

Add the function to do something beyond just a debug statement in App.js -

const onTglStatus = (task) => {
  console.log("completing task");
  setTasks(
    tasks.map((chkTask) => {
      chkTask.complete =
        task.id === chkTask.id ? !chkTask.complete : chkTask.complete;
      return chkTask;
    })
  );
};

In the above code we use Array.map function to change status for the matching record. The matching record (task) is supplied by the function called by button click event.

Let us change the checkbox/button in indicate completed tasks in Task.js.

// ...
<button className="button icon-only clear" onClick={() => onTglStatus(task)}>
  {task.complete && "✅"}
  {!task.complete && "⬜"}
</button>
// ...

We use one of the old Javascript tricks to display ✅ when task is complete.

  • {task.complete && "✅"} evaluates to ✅ when task.complete is true. Else this returns nothing
  • The next expression {!task.complete && "⬜"} returns ⬜ when task.complete is false

Since our application is reactive to changes and the button label gets driven by data, we see the below behaviour.

reactive-buttons-data-react

Add Functionality: Add Task

We need to get task data from user and save new tasks. To that end, add the function to save tasks onSaveTask in App.js -

const onSaveTask = ({ desc, date }) => {
  console.log("saving tasks");
  setTasks([
    { desc: desc, date: date, id: Date.now(), complete: false },
    ...tasks,
  ]);
};

We are using setTasks like before, but this time we are adding a new element to the array. Again, we don’t add the element directly to array since the state variable is immutable. We rather do this -

  1. create a new variable
  2. Add { desc: desc, date: date, id: Date.now(), complete: false }, as the first element. desc and date are passed along by the form used to create new tasks. Date.now() is a simple way to make the id unique
  3. Add the existing array elements to the new array variable ...tasks

Next, add a new form to collect data. Let’s create a new component src/components/TaskEdit.js. This component will receive the function onSaveTask as props and call it on button click.

import { useState } from "react";

function TaskEdit({ task, onSaveTask }) {
  const [desc, setDesc] = useState("");
  const [date, setDate] = useState("");

  const saveTask = (e) => {
    e.preventDefault();
    onSaveTask({ desc: desc, date: date });

    setDesc("");
    setDate("");
  };
  return (
    <div className="card">
      <h3>Add Task</h3>
      <form>
        <label htmlFor="desc">Description</label>
        <input
          type="text"
          name="desc"
          id="desc"
          value={desc}
          onChange={(e) => setDesc(e.target.value)}
        />

        <label htmlFor="date">Date</label>
        <input
          type="text"
          name="date"
          id="date"
          value={date}
          onChange={(e) => setDate(e.target.value)}
        />

        <div className="text-right">
          <button className="button dark" onClick={saveTask}>
            Save
          </button>
        </div>
      </form>
    </div>
  );
}

export default TaskEdit;

We have gone through some of the functions implemented here, while rest are mostly HTML -

  1. const [desc, setDesc] = useState(""); creates a new state variale local to TaskEdit and initiates it to ""
  2. a standard HTML form displays a couple of text boxes to collect desc and date
  3. Save button calls a local method saveTask, which will call the onSaveTask function in App.js and resets form

Add functionality to New button so that it displays the TaskEdit component and associated form (and can also toggle to hide the form).

In App.js -

// ...
const [showTaskEdit, setShowTaskEdit] = useState(false);
// ...

<button
  className="button outline"
  onClick={() => setShowTaskEdit(!showTaskEdit)}>
  {!showTaskEdit && "New"}
  {showTaskEdit && "âž–"}
</button>;

// ...
{
  showTaskEdit && <TaskEdit task={{}} onSaveTask={onSaveTask} />;
}
//  ...

We conditionally show TaskEdit only if showTaskEdit is true.

Time to see the complete application in action -

react-task-manager–simple-app-demo

Next Steps

  • Enable user to edit tasks to change description and dates
  • Add a backend for your task manager

Code for this project is available in the Github repo.

]]> Get Started on NextJS https://techformist.com/get-started-nextjs/ Wed, 06 Jan 2021 06:30:00 +0000 https://techformist.com/get-started-nextjs/ <p>Welcome to 2021. For me this will be an exciting year when I embrace ReactJS and Svelte as friends. And, what better way to start with React than NextJS..? In this post, we will see why and how we can get started on NextJS, and a few good learning resources.</p> <h2 id="but-why">But, why?</h2> <ol> <li>React continues to be a leader with ~50% market share. It enjoys a lot of developer confidence, community contribution and widespread adoption</li> <li>More users have meant more support for the smallest of issues</li> <li>React and associated frameworks have been at the forefront of new developments - that may be in the way pages interact with data (Hooks, Suspense), in how front-end gets/updates data (React Server Components), or how the latest technologies can speed up development and enable you to use hybrid frameworks to get things done (Next)</li> </ol> <p>Vue will not be completely replaced in my toolbox - not unless I find a shiny new thing that can completely replace it. In today&rsquo;s world everyone learns from each other and adapts rather quickly - so that scenario is not likely to play out.</p> Welcome to 2021. For me this will be an exciting year when I embrace ReactJS and Svelte as friends. And, what better way to start with React than NextJS..? In this post, we will see why and how we can get started on NextJS, and a few good learning resources.

But, why?

  1. React continues to be a leader with ~50% market share. It enjoys a lot of developer confidence, community contribution and widespread adoption
  2. More users have meant more support for the smallest of issues
  3. React and associated frameworks have been at the forefront of new developments - that may be in the way pages interact with data (Hooks, Suspense), in how front-end gets/updates data (React Server Components), or how the latest technologies can speed up development and enable you to use hybrid frameworks to get things done (Next)

Vue will not be completely replaced in my toolbox - not unless I find a shiny new thing that can completely replace it. In today’s world everyone learns from each other and adapts rather quickly - so that scenario is not likely to play out.

Why Next?

  • Next is a hybrid framework. From the same code base you can -
    • fetch content and generate pages on the server-side at runtime. Rapidly changing sites incl. eCommerce sites.
    • enable client-side data fetching for classic single page applications
    • generate static sites. Just fetch data and create final HTML pages at build time. Useful for Blogs, documentation sites. Oor, go rogue with incremental static files that can generate pages and hold on to them for specified time (I love this!)
  • Built-in router that needs you to just create pages to enable routing. Not really a problem in the Vue world (Vue router becomes second nature), but I see React as more fragmented. Router in Next is easy to understand and scale
  • Many features that optimize applications incl. code splitting, ability to use HTML or JSON to deliver pages, and so on
  • Many, many features that make development of large apps easier
  • Super active development and large community.

How to get started?

Here’s the complicated ceremonty to initiate a Next project.

  1. Install NodeJS
  2. Enter command npx create-next-app do-awesome

Run your app with npm run dev to meet this screen.

create-next-app-starting-page

You have the standard SPA development experience - change page content to see the changes reflected immediately.

  1. Add new page pages/todo.js
  2. Enter below code - 
    export default function Todo() {
  return <h3>Todo Awesome</h3>;
}

Navigate to http://localhost:3000/todo to see the new page.

Let’s write some simple code in todos.

function Todo({ todos }) {
  return (
    <div>
      <h2>Todo Awesome</h2>
      {todos.map((todo, index) => (
        <li key={index}>
          {todo.description}&emsp;⇋ {todo.status}
        </li>
      ))}
    </div>
  );
}

export function getServerSideProps() {
  const todos = [
    { description: "Write blog post", status: "Open" },
    { description: "Learn magic trick", status: "Open" },
    { description: "Profit from blog", status: "Cancelled" },
  ];

  return {
    props: { todos },
  };
}

export default Todo;

We did good in a few lines of code -

  1. Created some static data in todos as part of getServerSideProps and returned that as props
  2. getServerSideProps gets executed for every function call, i.e., everytime we visit the route /todos. Rendering function Todo gets the data passed in as props
  3. Todo takes care of rendering the todos

Rather simple and elegant.

next-page-basic-todo

Add Styles

There is more than one way to do things in Next, just like in React - unfortunately. I follow three distinct patterns.

Global or Module Level Styles

Include CSS in styles > global.css for all styles applicable globally. Similarly, <your-page>.module.css gets applied to <your-page>.

There’s nothing preventing you from going old school and simple do -

import "../styles.css";

.. in any component, but the previous pattern is simpler to use.

Global or Module Level CSS with CDN

Use the Next <Head></Head> tag anywhere - in _app for global styles or in any modules. Introduce CSS within the HEAD component.

Let us go ahead and do this for our app. Change _app.js to-

import "../styles/globals.css";
import Head from "next/head";

function MyApp({ Component, pageProps }) {
  return (
    <div>
      <Head>
        <link rel="stylesheet" href="https://unpkg.com/chota" />
      </Head>
      <div className="row">
        <div className="col-1"></div>
        <div className="col-10">
          <Component {...pageProps} />
        </div>
        <div className="col-1"></div>
      </div>
    </div>
  );
}

export default MyApp;

chota is a small CSS framework that provides you some cool things like class-less styling, grids, out-of-the-box icons - good enough for our small project.

Remember that we are dealing with JSX, so we use className instead of class in normal HTML.

Style Libraries from NPM

Install any CSS library through NPM. You can now include the library in _app.js for global styles.

import "bootstrap/dist/css/bootstrap.css";

Add a DB!

Our todo page is static and shows the same data each time. Let us change that.

First, let us add prisma to our project to make database access a breeze.

npm i -D @prisma/cli
npm i @prisma/client

Create a new folder data under project root.

Initialize prisma -

npx prisma init

Prisma CLI creates a few files including -

  • .env file (if it doesn’t exist) with a database URL
  • prisma/schema.prisma contains the database connection parameters and DB models

Open prisma/schema.prisma and replace its contents with the below code -

datasource db {
  provider = "sqlite"
  url      = "file:../data/data.db"
}

generator client {
  provider = "prisma-client-js"
}

model todo {
  id Int @id @default(autoincrement())
  description String
  status String
}

Run the below command to create migration and sync model to database.

npx prisma migrate dev --preview-feature

preview-feature flag may not be required in later versions of prisma. You can provide any name for the migration.

Finally, run the generate command to generate client that can be used in your application.

npx prisma generate

You can connect to the SQLite database using a client like HeidiSQL and verify whether all your changes are applied to the table.

heidi-sql-sqlite

Or, you could simply do -

npx prisma studio

.. to open the database with a simple UI.

prisma-studio

You are all set to work with the SQLite database from Next using Prisma!

Get Todos

Change pages/todos.js -

import { PrismaClient } from "@prisma/client";
const prisma = new PrismaClient();

function Todo({ todos }) {
  return (
    <div className="row">
      <h2 className="col-12 list-title is-center">My Todos</h2>

      <div className="col-12">
        {todoArr.map((todo, index) => (
          <div className="row" key={index}>
            <div className="col-1 list-desc" name="id">
              {todo.id}
            </div>
            <div className="col-5 list-desc" name="description">
              {todo.description}
            </div>
            <div className="col-4">
              <select
                name="status"
                id=""
                value={todo.status}
                onChange={handleStatusChange}
                onBlur={handleSubmit}>
                <option value="Open">Open</option>
                <option value="In Progress">In Progress</option>
                <option value="Cancelled">Cancelled</option>
              </select>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export async function getServerSideProps() {
  const todos = await prisma.todo.findMany({
    orderBy: {
      id: "desc",
    },
  });
  console.log("todos: ", todos);

  return {
    props: { todos },
  };
}

export default Todo;

The above code is straight-forward -

  • getServerSideProps includes logic that executes on the server side when a request is made to http://localhost:3000/todos (remember that the file is at pages/todos.js)
  • Next passes the data from getServerSideProps to render function function Todo({ todos })
  • We display the todos data using JSX

Create/Edit Todos

We need Prisma (i.e., any DB operations) to run on the server. Next makes an easy task of creating backend APIs - no separate server needed (you could have your custom server though).

Create APIs

API: New Todo

Create new file pages/api/todos/index.js with below code -

import { PrismaClient } from "@prisma/client";

const prisma = new PrismaClient();
export default async function handle(req, res) {
  console.log("Processing todo request..");
  const id = req.query.id;
  if (req.method == "GET") {
    res.send("hello");
  } else if (req.method == "POST") {
    const newTodo = await prisma.todo.create({
      data: JSON.parse(req.body),
    });
    res.json(newTodo);
  }
}

Open the Developer Console in Chrome (Ctrl+Shift+i) and enter -

await fetch ('http://localhost:3000/api/todos')`

.. to see “hello” returned. And oh.. we added the actual method to accept data from frontend and create a new record using Prisma. All it took was a couple of lines of code.

API: Update/Delete Todo

While we are here, we will also handle -

  1. Record-specific deletes (DELETE method that will use /api/todos/1 to delete record with id=1)
  2. Record-specific updates (PATCH method to /api/todos/2 to update record with id=2)

The depicted URLs are standard REST resource URLs - nothing fancy here.

Create new file pages/api/todos/index.js.

import { PrismaClient } from "@prisma/client";

const prisma = new PrismaClient();
export default async function handle(req, res) {
  const id = req.query.id;
  if (req.method == "DELETE") {
    console.log("Processing todo delete..");
    const todo = await prisma.todo.delete({ where: { id: Number(id) } });
    res.json(todo);
  } else if (req.method == "PATCH") {
    console.log("Processing todo update..");
    const newTodo = await prisma.todo.update({
      data: JSON.parse(req.body),
    });
    res.json(newTodo);
  }
}

You might have noticed one key difference between the GET and POST/DELETE/PATCH. While we coded GET within the page itself, we used api folder to house update operations.

  • While prisma was used in the todos.js page, getServerSideProps executes on server. So, we did not have any issues placing backend-specific logic there
  • Updates are not tied to backend in such fashion. Instead we create APIs in the api folder and call them using fetch

Change UI to Call APIs

Before we go ahead with UI changes, you would have noticed a problem with our file structure. While APIs had index and [id] files grouped under a parent todos, we do not have this structure in the frontend yet. Let’s change that.

Create a new folder pages/todos - this will house all functions for todos. Move pages/todos.js to pages/todos/ and rename it to index.js.

Todo List

Replace current code in pages/todos/index.js with -

import { useState } from "react";
import { PrismaClient } from "@prisma/client";
import Link from "next/link";

const prisma = new PrismaClient();

function Todo({ todos }) {
  const [todoIn, setTodoIn] = useState("");
  const [todoArr, setTodoArr] = useState(todos);

  const handleNewTodoChange = (e) => {
    e.preventDefault();
    setTodoIn(e.target.value);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    const res = await fetch("/api/todos", {
      method: "POST",
      body: JSON.stringify({ description: todoIn, status: "Open" }),
    });
    const newTodo = await res.json();
    setTodoArr([newTodo, ...todoArr]);
    setTodoIn("");
  };

  const handleStatusChange = async (e) => {
    e.preventDefault();
    console.log("target", e);

    const res = await fetch("/api/todos", {
      method: "POST",
      body: JSON.stringify({ description: todoIn, status: "Open" }),
    });
    const newTodo = await res.json();
    setTodoArr([newTodo, ...todoArr]);
  };

  const deleteTodo = (todo) => async (e) => {
    e.preventDefault();
    const res = await fetch(`/api/todos/${todo.id}`, {
      method: "DELETE",
    });
    const index = todoArr.indexOf(todo);
    setTodoArr([
      ...todoArr.slice(0, index),
      ...todoArr.slice(index + 1, todoArr.length),
    ]);
  };

  return (
    <div className="row">
      <h2 className="col-12 list-title is-center">My Todos</h2>

      <form className="col-12">
        <div className="row">
          <span className="col-1 list-desc">Add</span>
          <input
            type="text"
            onBlur={handleNewTodoChange}
            className="col-5"
            onChange={handleNewTodoChange}
            value={todoIn}
          />
          <button className="button col-2" onClick={handleSubmit}>
            Save
          </button>
        </div>
      </form>

      <div className="col-12">
        {todoArr.map((todo, index) => (
          <div className="row" key={index}>
            <div className="col-1 list-desc" name="id">
              {todo.id}
            </div>
            <div className="col-5 list-desc" name="description">
              {todo.description}
            </div>
            <div className="col-4">
              <select
                name="status"
                id=""
                value={todo.status}
                onChange={handleStatusChange}
                onBlur={handleSubmit}>
                <option value="Open">Open</option>
                <option value="In Progress">In Progress</option>
                <option value="Cancelled">Cancelled</option>
              </select>
            </div>

            <div className="col-2 icon">
              <button className="button icon-only" onClick={deleteTodo(todo)}>
                <img
                  src="https://icongr.am/feather/delete.svg?size=16&color=93939a"
                  alt="delete"
                />
              </button>
              <Link href={`/todos/${todo.id}`}>
                <button className="button icon-only">
                  <img
                    src="https://icongr.am/feather/edit-2.svg?size=16&color=93939a"
                    alt="edit"
                  />
                </button>
              </Link>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export async function getServerSideProps() {
  const todos = await prisma.todo.findMany({
    orderBy: {
      id: "desc",
    },
  });
  console.log("todos: ", todos);

  return {
    props: { todos },
  };
}

export default Todo;

We have added below features -

  • Add an input box and a button to add a new todo record. Add functions to handle changes to input and to respond to the click event
  • Add functions to handle changes to call backend APIs for inserts and deletes, and make corresponding changes on the UI
  • Create a button to delete a todo and call API DELETE method
  • Create a button to navigate to a detail page upon clicking on any todo (the detail page is implemented in the next section)

Todo Detail

With a couple of functions you have created an app to query ( & display), create and delete todos!

Create a new page pages/todos/[id].js and input below code -

import { useRouter } from "next/router";
import { PrismaClient } from "@prisma/client";
const prisma = new PrismaClient();

export default function Todo({ todo }) {
  const router = useRouter();
  const { id } = router.query;
  return (
    <div className="text-center">
      <h3>
        <strong>{!!todo && todo.description}</strong>
      </h3>
      <p>{!todo && "This todo has migrated to the next universe."}</p>
        

      <p></p>
    </div>
  );
}

export async function getServerSideProps({ params }) {
  const todo = await prisma.todo.findFirst({
    where: { id: Number(params.id) },
  });
  console.log("todo: ", todo);

  return {
    props: { todo },
  };
}

This page just demonstrates how we could display a single todo on the frontend. We have not added any functionality to it.

What Next?

Find the app code at this Github repo.

You could extend the current app by -

  1. Introducing update function - status changes should call PATCH method and change UI elements
  2. Enable user to capture thoughts, ideas and other BS against each todo. Doing this would require you to provide functionality to add comments against any specific todo (utilising the Detail page)

Learning Resources

See more of Next and keep rocking.

]]> Simplest Svelte App with API https://techformist.com/simplest-svelte-app-api/ Wed, 25 Nov 2020 06:30:00 +0000 https://techformist.com/simplest-svelte-app-api/ <p>Svelte makes working with apps really simple. It brings the clarity of Vue but adds even more simplicity in the way components are created and used.</p> <p>For one of the demos I just wanted to showcase what the simplicity translates into for a simple website that shows &ldquo;quote of the day&rdquo; but also needs to provide a &ldquo;SPA experience&rdquo; - completely off the script.</p> <p>All I did was to start the app -</p> Svelte makes working with apps really simple. It brings the clarity of Vue but adds even more simplicity in the way components are created and used.

For one of the demos I just wanted to showcase what the simplicity translates into for a simple website that shows “quote of the day” but also needs to provide a “SPA experience” - completely off the script.

All I did was to start the app -

npx degit sveltejs/template qotd
cd quotd
npm i
code .

That will take care of creating the project, installing <100 packages, and opening the project in VSCode.

Next, I just copy and paste the below lines in src/App.svelte.

<script>
  export let quotd = "Patience is the key to good life..";
  export let author = "Unknown";

  const getRandomQuote = () => {
    fetch("https://favqs.com/api/qotd")
      .then((res) => res.json())
      .then((data) => ([quotd, author] = [data.quote.body, data.quote.author]));
  };
</script>

<main>
  <button on:click="{getRandomQuote}">Get me a quote!</button>
  <h1>{quotd}</h1>
  <p>- {author} -</p>
</main>

And, lo and behold -

simplest-svelte-api-app

This is the simplest API app that I could think of “on the fly”. It was good enough to demonstrate how simple, light-weight and quick Svelte can be.

]]> Build a Simple Timesheet App using Vue & Vuetify https://techformist.com/build-simple-timesheet-app-vue-vuetify/ Wed, 28 Oct 2020 06:30:00 +0000 https://techformist.com/build-simple-timesheet-app-vue-vuetify/ <p>In this post we will see how to create a simple timesheet app using Vue and Vuetify. This is not quite a comprehensive tutorial on Vue or Vuetify, rather a demo of front-end features, see how easy it is to build an usable app, and in general, how modern app development makes the whole process enjoyable.</p> <h2 id="what-are-we-building">What are we building?</h2> <p>A simple timesheet app that will -</p> <ul> <li>enable to enter time on a day</li> <li>enable export of time data</li> </ul> <p>We will store everything in browser storage and there will be no standard persistence layer. This app may or may not plugin to backend (Firebase? ExpressJS / Fastify? Hasura? Other?) in the future - comment and let me know if you&rsquo;re interested in seeing that!</p> In this post we will see how to create a simple timesheet app using Vue and Vuetify. This is not quite a comprehensive tutorial on Vue or Vuetify, rather a demo of front-end features, see how easy it is to build an usable app, and in general, how modern app development makes the whole process enjoyable.

What are we building?

A simple timesheet app that will -

  • enable to enter time on a day
  • enable export of time data

We will store everything in browser storage and there will be no standard persistence layer. This app may or may not plugin to backend (Firebase? ExpressJS / Fastify? Hasura? Other?) in the future - comment and let me know if you’re interested in seeing that!

Technically, we will focus on -

  1. Use Vuex and router (latter is not quite needed, you will see more of this)
  2. Form validations
  3. Make application a joy to use with keyboard shortcuts

This is how it looks..

simple-timesheet-app-daily-demo

Go to https://simple-timesheet.techformist.com to see how the application works.

Get started with Vue

If you don’t have Vue CLI, this is a good time to go ahead and install it. Vue CLI is the starting point for all great Vue projects.

npm install -g @vue/cli

Create the project -

vue create simple-timesheet

Select the Vue version 2 for the sake of this project and instruct wizard that you will Manually select features. Also, select the below features/options -

  • Options: Babel, PWA Support (optional), Router, Vuex, Linter / Formatter
  • Use history mode to ‘Y’ (default)
  • A sensible option for ESLint - I recommend ESLint + Prettier
  • Store configuration in dedicated configuration files

Sit back while Vue CLI downloads packages and creates the project.

Once done, add Vuetify to the project.

cd simple-timesheet
vue add vuetify

Choose the default Vuetify configuration.

Add packages to our app - we will see their role in subsequent sections.

npm i --save vuex-persist vue-shortkey

Your project is ready to roll. Open the project folder in VS Code, the greatest editor of our times to get started.

Wire Everything Up

Vue comes packaged with all the things you need - so, there’s no complex wiring involved. Let us focus on getting everything to a baseline version to start creating magic.

Change the default App.vue.

<template>
  <v-app>
    <v-app-bar app color="primary darken-2" dark>
      <h3>Simple Timesheet</h3>
      <v-spacer></v-spacer>
      <v-btn text to="/daily">Daily</v-btn>
      <v-btn text to="/about">About</v-btn>
    </v-app-bar>

    <v-main>
      <v-card color="grey lighten-5" height="100%">
        <v-container>
          <router-view></router-view>
        </v-container>
      </v-card>
    </v-main>
  </v-app>
</template>

<script>
  export default {
    name: "App",

    components: {},

    data: () => ({
      //
    }),
  };
</script>

All we have done here is to change the toolbar, denote where our router will render views (router-view - no surprise there), and wrap the entire thing in a v-container to provide some nice spacing on all sides.

Follow up with a few more changes at the project level -

  1. Delete component/HelloWorld.vue component - we will create our own components. Remove HelloWorld references from App.vue and Home.vue view.
  2. Delete views/Home.vue and remove references to Home from router/index.js.
  3. Change About.vue page - include whatever content you want.
  4. Create a new view called views/Daily.vue - let them be blank for now
  5. Change router/index.js to add references to the new view. Let us redirect “/” to “/daily” and “/daily” will point to the “Daily” view. 
    // ... other code
const routes = [
  {
    path: "/daily",
    name: "Daily",
    component: () => import("../views/Daily.vue"),
  },
  {
    path: "/weekly",
    name: "Weekly",
    component: () => import("../views/Weekly.vue"),
  },
  {
    path: "/about",
    name: "About",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue"),
  },
];
// ... other code

Next, configure any additional packages.

Package 1: vuex-persist

vuex-persist enables storing of vuex values to browser local storage. This is quite handy since we don’t want to lose values entered by the user whenever the page is refreshed, or when the website is closed.

Make below changes in store/index.js -

  1. Pull vuex-persist module

    import VuexPersistence from "vuex-persist";

const vuexLocal = new VuexPersistence({
  storage: window.localStorage,
});

  2. Include as a plugin

    export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  modules: {},
  plugins: [vuexLocal.plugin],
});

Package 2: vue-shortkey

Change main.js. Just after the line Vue.config.productionTip = false; add another line..

Vue.use(require("vue-shortkey"));

This will reference the package we added earlier vue-shortkey, which will enable us to tie keyboard shortcuts to specific actions (e.g. create new record can be tied to Ctrl + N).

Additional Configuration

Add a single line to public/index.html.

<link rel="stylesheet" href="https://unpkg.com/microtip/microtip.css" />

This will enable us to use a small, light-weight package called microtip to show tooltips on any UI element. See creating simple tooltips in Vue for more details.

Start your project

It’s time to start up stuff and see if everything’s working.

npm run serve

You should see your Vue application start up, and automatically open the browser with your application at http://localhost:8080.

Note that -

  • We have not added any functionality yet - will get to that in the next section
  • UI elements like icons, iamges and fonts were not changed
  • We did not quite need a router. We could have as well used a tab component in Vuetify and be no wiser. While that keeps things simpler, router is invaluable if you start adding other views and need navigation elements for those views
  • It’s possible to configure vuex-persist to your heart’s content, but we are sticking to keeping things simple

Create Supporting Components

Let’s go ahead and create a couple of reusable components that will be used by other components.

Date Pick Component

Vuetify makes creating a field with a date pick quite easy. We can create a text box and enable a date picker using v-date-picker.

date-picker-input-box-vuetify

But, we don’t want to use boilerplate code each time we need to create a date field. Let us create a DatePick component that can be used by other components or views for any date fields.

Create a new file components/DatePick.vue. Add following code -

<template>
  <!-- Todo: This needs cleaning up - either incl. date format or remove them -->
  <v-menu
    ref="menu"
    v-model="menu"
    :close-on-content-click="false"
    transition="scale-transition"
    offset-y
    :nudge-right="40"
    scrollable
    max-width="290px"
    min-width="290px"
  >
    <template v-slot:activator="{ on }">
      <v-text-field
        :value="dateDisplay"
        outlined
        :label="label"
        append-icon="mdi-calendar"
        readonly
        :dense="dense"
        :hide-details="hideDetails"
        :disabled="disabled"
        @click:append="menu = true"
        v-on="on"
      ></v-text-field>
    </template>
    <v-date-picker
      v-model="dateValue"
      no-title
      scrollable
      :min="min"
      :max="max"
      @input="menu = false"
    ></v-date-picker>
  </v-menu>
</template>

<script>
  export default {
    props: {
      label: { type: String, default: "" },
      appendIcon: { type: String, default: "mdi-calendar" },
      field: { type: String, default: "" },
      dense: { type: Boolean, default: false },
      hideDetails: { type: Boolean, default: false },
      disabled: { type: Boolean, default: false },
      min: {
        type: String,
        default: () => {
          const dt = new Date();
          dt.setDate(dt.getDate() - 30);
          return dt.toISOString().substring(0, 10);
        },
      },
      max: {
        type: String,
        default: () => {
          const dt = new Date();
          dt.setDate(dt.getDate() + 365);
          return dt.toISOString().substring(0, 10);
        },
      },
    },
    data() {
      return {
        menu: false,
        modal: false,
        menu2: false,
        localField: "",
        dateValue: "",
      };
    },
    computed: {
      dateDisplay: {
        get() {
          return this.dateValue;
        },
        set(val) {
          this.$emit("update:field", val);
        },
      },
      localFieldFmt: {
        get() {
          return this.formatDate(this.localField);
        },
        set(val) {
          this.$emit("update:field", val);
        },
      },
    },
    watch: {
      localFieldFmt(val) {
        this.$emit("update:field", val);
      },
      dateValue(val) {
        this.$emit("update:field", val);
      },
    },
    mounted() {
      this.dateValue = this.field;
      // this.localField = this.parseDate(this.field);
    },
    methods: {
      test() {
        console.log("wow");
      },
      formatDate(date) {
        if (!date) return null;

        const [year, month, day] = date.split("-");
        //   return `${day}/${month}/${year}`;
        return `${year}-${month}-${day}`;
      },

      parseDate(date) {
        if (!date) return null;

        const [day, month, year] = date.split("-");
        return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`;
      },

      setLocalFieldFmt(val) {
        this.localFieldFmt = val;
        this.localField = val ? this.parseDate(val) : null;
      },
    },
  };
</script>

Don’t quite worry if you don’t get what’s going on here. We are doing a couple of things -

  1. Create a text field input box that can take in user inputs
  2. Enable date control using v-date-picker
  3. Raise an event whenever the date is set so that the calling component can set a value based on user input
  4. We can also parse date values to handle international dates, but we will not quite use that here

We can now use this component in any other view or component like so -

<DatePick
  name="todayDate"
  :field="dayDate"
  @update:field="setDayDate($event)"
  :dense="true"
></DatePick>

Here -

  • dayDate is a field (can be from Vuex or at the component level - we will see how this is used shortly)
  • On update:field event (which corresponds to the date input by user) we call a method called setDayDate

See reusable date picker field for Vuetify for more details about the date picker field.

Confirm component

It is a common UI experience to ask for confirmation before allowing specific user actions - especially if they are irreversible. Vuetify has a v-dialog component to show a popup to that purpose, but it would need some boilerplate code to enable it each time to ask a question. Let’s create a Confirm component to make it easier.

Create a new file components/Confirm.vue.

<template>
  <v-dialog
    v-model="dialog"
    :max-width="options.width"
    :style="{ zIndex: options.zIndex }"
    @keydown.esc="cancel"
  >
    <v-card>
      <v-toolbar dark :color="options.color" dense flat>
        <v-toolbar-title class="text-body-2 font-weight-bold grey--text">
          {{ title }}
        </v-toolbar-title>
      </v-toolbar>
      <v-card-text
        v-show="!!message"
        class="pa-4 black--text"
        v-html="message"
      ></v-card-text>
      <v-card-actions class="pt-3">
        <v-spacer></v-spacer>
        <v-btn
          v-if="!options.noconfirm"
          color="grey"
          text
          class="body-2 font-weight-bold"
          @click.native="cancel"
          >Cancel</v-btn
        >
        <v-btn
          color="primary"
          class="body-2 font-weight-bold"
          outlined
          @click.native="agree"
          >OK</v-btn
        >
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
  export default {
    name: "Confirm",
    data() {
      return {
        dialog: false,
        resolve: null,
        reject: null,
        message: null,
        title: null,
        options: {
          color: "grey lighten-3",
          width: 400,
          zIndex: 200,
          noconfirm: false,
        },
      };
    },

    methods: {
      open(title, message, options) {
        this.dialog = true;
        this.title = title;
        this.message = message;
        this.options = Object.assign(this.options, options);
        return new Promise((resolve, reject) => {
          this.resolve = resolve;
          this.reject = reject;
        });
      },
      agree() {
        this.resolve(true);
        this.dialog = false;
      },
      cancel() {
        this.resolve(false);
        this.dialog = false;
      },
    },
  };
</script>

In the above code -

  • we show a message popup using v-dialog. The message is passed to the component using props
  • we pass along the user action (yes or no for example) so that the caller can take action based on the answer

We use the Confirm component in two parts.

  1. First, create a reference to Confirm in <template>.

    <template>
  <!-- other code -->

  <confirm ref="confirm" />
  <!-- other code -->
</template>

    Import the component.

    <script>
  // other code
  export default {
    components: {
      Confirm: () => import("../components/Confirm"),
    },
    // other code
  };
</script>

  2. Call the confirm dialog whenever needed

    <script>
  // other code
  export default {
    methods: {
      async deleteRecordWithConfirm() {
        if (
          await this.$refs.confirm.open(
            "Confirm Delete",
            "Are you sure you want to delete this record?"
          )
        )
          this.deleteRecord();
      },
    },

    // other code
  };
</script>

Again, don’t worry too much into how confirm works - you will get time to see much more later.

Now that everything’s wired up and we created baseline infrastructure, it is time to write our core functionality.

Create Daily Component

We already created a view called Daily.vue. We will add a simple form and some code to enable users to create/edit/view timesheet entries.

Add the below code -

<template>
  <div align="center">
    <v-card color="white" width="70%">
      <v-toolbar color="grey lighten-3" flat>
        <span class="font-weight-black h6">Daily Timesheet</span>
        <v-spacer></v-spacer>
        <v-btn
          small
          class="mr-2"
          @click="resetAfterConfirm"
          aria-label="Reset timesheet. Delete all entries below."
          data-microtip-position="bottom"
          role="tooltip"
        >
          <v-icon small dark>mdi-delete-sweep</v-icon> Reset
        </v-btn>
        <v-menu offset-y close-on-content-click>
          <template v-slot:activator="{ on, attrs }">
            <v-btn
              small
              class="mr-2"
              aria-label="Download timesheet."
              data-microtip-position="bottom"
              role="tooltip"
              v-bind="attrs"
              v-on="on"
            >
              <v-icon small dark>mdi-download</v-icon>
              Export
            </v-btn>
          </template>
          <v-list>
            <v-list-item
              v-for="(item, index) in downloadItems"
              :key="index"
              @click="invokeAction(item.action)"
            >
              <v-list-item-title>{{ item.title }}</v-list-item-title>
            </v-list-item>
          </v-list>
        </v-menu>
        <v-btn
          color="primary"
          small
          class="mr-2"
          @click="newDayTime"
          v-shortkey="['alt', 'shift', 'n']"
          @shortkey="newDayTime()"
          aria-label="Create new time. [alt+shift+n]"
          data-microtip-position="bottom"
          role="tooltip"
        >
          <v-icon small dark>mdi-plus</v-icon>Add
        </v-btn>
      </v-toolbar>
      <v-container>
        <div align="left" class="pl-3 pr-3">
          <label for="todayDate" class="font-weight-bold grey--text">
            Date
          </label>
          <DatePick
            name="todayDate"
            :field="dayDate"
            @update:field="setDayDate($event)"
            :dense="true"
          ></DatePick>
          <div class="text-h6" align="left">
            Total Hours:
            <span class="font-weight-bold" color="primary">
              {{ totalTime }}
            </span>
          </div>
        </div>
        <v-card
          flat
          color="transparent"
          height="400px"
          class="pl-3"
          style="overflow-y:auto; overflow-x:hidden"
        >
          <v-form @submit.prevent="addEntry">
            <v-row align="center" dense>
              <v-col cols="12" sm="10" align="left"> </v-col>
              <v-col
                cols="12"
                v-for="(dayTime, index) in dayTimes"
                :key="index"
              >
                <v-row dense>
                  <v-col cols="12" sm="8">
                    <v-text-field
                      placeholder="What work is this for?"
                      v-model="dayTime['desc']"
                      dense
                      outlined
                      autofocus
                      @focus="activeIndex = index"
                      hide-details
                    ></v-text-field>
                  </v-col>
                  <v-col cols="10" sm="2">
                    <v-text-field
                      dense
                      placeholder="Hours"
                      v-model="dayTime['time']"
                      outlined
                      type="number"
                      reverse
                      @focus="activeIndex = index"
                      hide-details
                    ></v-text-field>
                  </v-col>
                  <v-col cols="2" align="left">
                    <v-btn
                      fab
                      icon
                      small
                      @click="delDayTimeByIndex(activeIndex)"
                      v-shortkey="['alt', 'shift', 'del']"
                      @shortkey="delDayTimeByIndex(activeIndex)"
                      aria-label="Delete this entry. [alt+shift+del]"
                      data-microtip-position="bottom"
                      data-microtip-size="medium"
                      role="tooltip"
                    >
                      <v-icon color="grey">mdi-delete</v-icon>
                    </v-btn>
                  </v-col>
                </v-row>
              </v-col>
            </v-row>
          </v-form>
        </v-card>
      </v-container>
    </v-card>
    <confirm ref="confirm" />
  </div>
</template>

<script>
  import { mapState, mapMutations } from "vuex";

  export default {
    name: "Daily",
    components: {
      DatePick: () => import("../components/DatePick"),
      Confirm: () => import("../components/Confirm"),
    },
    data() {
      return {
        activeIndex: 0,
        downloadItems: [
          { title: "CSV", action: "generateDownloadCsv" },
          { title: "TXT", action: "generateDownloadTxt" },
        ],
      };
    },
    computed: {
      ...mapState("daystr", ["dayTimes", "dayDate"]),

      totalTime() {
        return this.dayTimes.reduce(
          (sum, element) => sum + (Number(element["time"]) || 0),
          0
        );
      },
    },
    mounted() {
      if (this.dayTimes.length == 0) this.resetDay();
    },
    methods: {
      ...mapMutations("daystr", [
        "newDayTime",
        "setActiveDayTime",
        "setDayDate",
        "resetDay",
        "delDayTimeByIndex",
      ]),
      async resetAfterConfirm() {
        if (
          await this.$refs.confirm.open(
            "Confirm Reset",
            "Are you sure you want to reset timesheet? You will lose all data on this page."
          )
        )
          this.resetDay();
      },
      invokeAction(action) {
        this[action]();
      },
      generateDownloadCsv() {
        this.generateExportAndDownload("data:text/csv", "csv", ",");
      },
      generateDownloadTxt() {
        this.generateExportAndDownload("data:text/txt", "txt", " - ");
      },
      generateExportAndDownload(filetype, extn, separator) {
        let strDayTimes = `${filetype};charset=utf-8,Timesheet for Date: ${this.dayDate} \n\rTotal Time: ${this.totalTime} hours \n\rTime Records\n===============================\n`;
        strDayTimes += `Description${separator}Time (Hours)\n===============================\n`;
        strDayTimes += this.dayTimes
          .map((element) => `${element["desc"]}${separator}${element["time"]}`)
          .join("\n")
          .replace(/(^\[)|(\]$)/gm, "");

        const fileData = encodeURI(strDayTimes);
        const link = document.createElement("a");
        link.setAttribute("href", fileData);
        link.setAttribute("download", `timesheet.${extn}`);
        link.click();
      },
    },
  };
</script>

There are quite a few things going on here. Let us dissect them in detail.

Start up

mounted() method in a Vue component helps us to “hook” into the component start up and run some code each time the component gets displayed.

We are including the following code in mounted.

if (this.dayTimes.length == 0) this.resetDay();

This will call a method resetDay only if dayTimes array does not have any elements. resetDay is outlined in the Vuex store. It will -

  1. Reset the date to today’s date
  2. Delete all entries in the timesheet

UI Elements

Everything within <template> tags form our UI. Here we use Vuetify grid, ready-made components from Vuetify like button, text input box, and more to create our timesheet.

Toolbar

Toolbar consists of a couple of buttons and a menu item to show export options.

<v-toolbar color="grey lighten-3" flat>
  <span class="font-weight-black h6">Daily Timesheet</span>
  <v-spacer></v-spacer>
  <v-btn
    small
    class="mr-2"
    @click="resetAfterConfirm"
    aria-label="Reset timesheet. Delete all entries below."
    data-microtip-position="bottom"
    role="tooltip"
  >
    <v-icon small dark>mdi-delete-sweep</v-icon> Reset
  </v-btn>
  <v-menu offset-y close-on-content-click>
    <template v-slot:activator="{ on, attrs }">
      <v-btn
        small
        class="mr-2"
        aria-label="Download timesheet."
        data-microtip-position="bottom"
        role="tooltip"
        v-bind="attrs"
        v-on="on"
      >
        <v-icon small dark>mdi-download</v-icon>
        Export
      </v-btn>
    </template>
    <v-list>
      <v-list-item
        v-for="(item, index) in downloadItems"
        :key="index"
        @click="invokeAction(item.action)"
      >
        <v-list-item-title>{{ item.title }}</v-list-item-title>
      </v-list-item>
    </v-list>
  </v-menu>
  <v-btn
    color="primary"
    small
    class="mr-2"
    @click="newDayTime"
    v-shortkey="['alt', 'shift', 'n']"
    @shortkey="newDayTime()"
    aria-label="Create new time. [alt+shift+n]"
    data-microtip-position="bottom"
    role="tooltip"
  >
    <v-icon small dark>mdi-plus</v-icon>Add
  </v-btn>
</v-toolbar>

You may note that -

  • v-menu pulls in the list of menu items using a <v-list> from a variable called downloadItems. This variable is specific to this Vue component and is defined in data section
  • we used microtip required parameters like aria-label, data-microtip-position and role to create tooltips on button
  • we called methods defined in the script section using the magical @click event from buttons (v-btn)
  • buttons use v-shortkey to denote the shortcut key combination to simulate button click and @shotcutkey to denote which method should be called on click

Create -

  • a date field that the user can update. Use the DatePick component created earlier
  • a field that shows the total time entered. Use totalTime computed variable - details on the computed variable in the computed section
<DatePick
  name="todayDate"
  :field="dayDate"
  @update:field="setDayDate($event)"
  :dense="true"
></DatePick>
<div class="text-h6" align="left">
  Total Hours:
  <span class="font-weight-bold" color="primary"> {{ totalTime }} </span>
</div>

Timesheet entries

Show the list of timesheet entries recorded in dayTimes array with the below code block -

<v-col cols="12" v-for="(dayTime, index) in dayTimes" :key="index">
  <v-row dense>
    <v-col cols="12" sm="8">
      <v-text-field
        placeholder="What work is this for?"
        v-model="dayTime['desc']"
        dense
        outlined
        autofocus
        @focus="activeIndex = index"
        hide-details
      ></v-text-field>
    </v-col>
    <v-col cols="10" sm="2">
      <v-text-field
        dense
        placeholder="Hours"
        v-model="dayTime['time']"
        outlined
        type="number"
        reverse
        @focus="activeIndex = index"
        hide-details
      ></v-text-field>
    </v-col>
    <v-col cols="2" align="left">
      <v-btn
        fab
        icon
        small
        @click="delDayTimeByIndex(activeIndex)"
        v-shortkey="['alt', 'shift', 'del']"
        @shortkey="delDayTimeByIndex(activeIndex)"
        aria-label="Delete this entry. [alt+shift+del]"
        data-microtip-position="bottom"
        data-microtip-size="medium"
        role="tooltip"
      >
        <v-icon color="grey">mdi-delete</v-icon>
      </v-btn>
    </v-col>
  </v-row>
</v-col>

Computed variables

Computed variables allow us to use calculated values, values that dymamically change at different stages of the component based on component state, data variables, external data, user actions and so on.

We created two different types of variables here -

  1. Pull in the Vuex state variables from daystr module with ...mapState("daystr", ["dayTimes", "dayDate"])
  2. Create a totalTime value that will add up all time entries and provide the total time entered on the timesheet. There are multiple ways of doing this including a simple for statement to loop through the dayTimes array, but we have used some shortcut methods to keep the code clean 😜

The overall computed code block is below -

computed: {
  ...mapState("daystr", ["dayTimes", "dayDate"]),

  totalTime() {
    return this.dayTimes.reduce(
      (sum, element) => sum + (Number(element["time"]) || 0),
      0
    );
  },
},

Methods

Most of the methods are mutations defined in the Vuex module dailystr. These are referenced in our component with the following line -

export default {
  methods: {
    ...mapMutations("daystr", [
      "newDayTime",
      "setActiveDayTime",
      "setDayDate",
      "resetDay",
      "delDayTimeByIndex",
    ]),
  },
};

Beyond Vuex, we have a few more methods -

Method 1: InvokeAction

This method simply calls another method. It is used in a list so that we can call methods dynamically while we are defining the list.

invokeAction(action) {
    this[action]();
},

Method 2: Confirm and reset timesheet

This method gets invoked when user clicks on “Reset” button. Ask user to confirm reset and call a Vuex mutation that will reset the dayTimes array and reset date to today’s date.

async resetAfterConfirm() {
  if (
    await this.$refs.confirm.open(
      "Confirm Reset",
      "Are you sure you want to reset timesheet? You will lose all data on this page."
    )
  )
    this.resetDay();
},

Methods 3 & 4: generateDownLoad methods

We invoke two distinct methods when user clicks on export button - one of them facilitates export to CSV file format, while the other option enables a text export.

generateDownloadCsv() {
  this.generateExportAndDownload("data:text/csv", "csv", ",");
},
generateDownloadTxt() {
  this.generateExportAndDownload("data:text/txt", "txt", " - ");
},

Both these methods call generateExportAndDownload, which will export the timesheet entries to a file based on input arguments. We could have called generateExportAndDownload method directly from the template HTML with arguments, but we used different methods for any future scalability. (yes, this is sarcasm)

Method 5: generateExportAndDownload method

generateExportAndDownload will -

  • take three arguments for the export file type, the extension to be used for the export file and the separator to be used between the timesheet description and number of hours
  • fetch the entries from the Vuex store variables (the “state” values) dayDate and dayTimes
  • create a string for export by joining some informational statements and the dayTimes array
  • create an a tag with the content as newly created string
  • simulate a click on the a link to download content to a file
generateExportAndDownload(filetype, extn, separator) {
  let strDayTimes = `${filetype};charset=utf-8,Timesheet for Date: ${this.dayDate} \n\rTotal Time: ${this.totalTime} hours \n\rTime Records\n===============================\n`;
  strDayTimes += `Description${separator}Time (Hours)\n===============================\n`;
  strDayTimes += this.dayTimes
    .map(element => `${element["desc"]}${separator}${element["time"]}`)
    .join("\n")
    .replace(/(^\[)|(\]$)/gm, "");

  const fileData = encodeURI(strDayTimes);
  const link = document.createElement("a");
  link.setAttribute("href", fileData);
  link.setAttribute("download", `timesheet.${extn}`);
  link.click();
},

Modify Vuex store

The Daily timesheet component references Vuex store and specifically a module called dailystr. Let us include that.

Create a new file called store/dailystr.js.

export default {
  namespaced: true,
  name: "daystr",
  state: {
    dayDate: "",
    dayTimes: [],
    activeDayTime: {},
  },
  mutations: {
    newDayTime(state) {
      state.dayTimes.push({ desc: "", time: 1 });
    },

    setActiveDayTime(state, val) {
      state.activeDayTime = val;
    },

    delDayTimeByIndex(state, index) {
      state.dayTimes.splice(index, 1);
    },

    setDayDate(state, val) {
      state.dayDate = val;
    },

    resetDay(state) {
      state.dayDate = new Date().toISOString().substr(0, 10);
      state.dayTimes = [{ desc: "", time: 1 }];
    },
  },
};

We create a bunch of variables to store time entries in a day, and also created mutations that allow us to change those variable values.

Change store/index.js to include the newly created module. The complete code is outlined below.

import Vue from "vue";
import Vuex from "vuex";

import VuexPersistence from "vuex-persist";

import daystr from "./daystr";

Vue.use(Vuex);

const vuexLocal = new VuexPersistence({
  storage: window.localStorage,
});

export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  modules: { daystr },
  plugins: [vuexLocal.plugin],
});

We had made the vuex-persist related changes at the beginning of this post.

Enable PWA

If you had selected the PWA option while creating the project using Vue CLI, your app is automatically available as a progressive web app. You cannot test this unless you are connected using https. Since we don’t really do any changes here, you can see the PWA in action after deploying the application.

Deploy

Deploying a client-application is really easy - thanks to build/deploy/host application services available today.

As an example, we will use vercel.com.

Go to vercel.com, create an account if you don’t have one, or login to your existing account.

On dashboard, click on Import Project button. Vercel will ask you for the Git repository to import and may also ask you for additional permissions to access repository.

deploy-vue-app-vercel

Once the repo is imported, Vercel should automatically identify the project as a Vue app and set build configuration. Review the configuration and click on Deploy to deploy your app and make it available to the world. Vercel will provide the URL that you can use to access your app.

The URL for your app will be available over https (e.g. simple-timesheet.vercel.app). You will be able to install this app to your desktop or mobile using the functionality enabled by PWA.

Finis

That’s it - you have created and deployed a totally real-world timesheet application usign Vue, Vuetify and friends.

The repository with full code is at https://github.com/prashanth1k/simple-timesheet.

]]> Create Simple Tooltips in Vue https://techformist.com/simple-tooltip-vue/ Wed, 21 Oct 2020 06:30:00 +0000 https://techformist.com/simple-tooltip-vue/ <p>Tooltips are omnipresent, or rather have to be. While there have been excellent standardisation of user experience since we saw what Bootstrap was capable of, there are days and applications that can throw off users with strange icons, buttons and navigation. Ergo, tooltips.</p> <p><img loading="lazy" src="https://techformist.com/2020/vuetify-tool-tip.gif" type="" alt="vuetify-tool-tip" /></p> <p>The humble tooltip can provide helpful hints, short messages and guide user on what a particular button, text box or any other element will do before clicking the thingy and causing destruction of a planet.</p> Tooltips are omnipresent, or rather have to be. While there have been excellent standardisation of user experience since we saw what Bootstrap was capable of, there are days and applications that can throw off users with strange icons, buttons and navigation. Ergo, tooltips.

vuetify-tool-tip

The humble tooltip can provide helpful hints, short messages and guide user on what a particular button, text box or any other element will do before clicking the thingy and causing destruction of a planet.

Vue has more than few options for creating tooltips.

Use tooltip from UI library

Every UI library has support for tooltips in some form. Take Vuetify as an example.

<template>
  <div class="text-center d-flex align-center">
    <v-tooltip bottom>
      <template v-slot:activator="{ on, attrs }">
        <v-btn color="primary" dark v-bind="attrs" v-on="on">Button</v-btn>
      </template>
      <span>Yes, this is a button</span>
    </v-tooltip>
  </div>
</template>

Just encapsulate any component with v-tooltip and you are all set.

See how you can create reusable tooltip in Vuetify.

Other libraries are somewhat better - BootstrapVue, Buefy etc. have simple ways to enable tooltips.

I typically prefer to use the tooltip provided by the styling libraries -

  • has uniform user experience as compared to rest of the application
  • (mostly) has no/minimal overhead since we are downloading other components anyway

But as you can see from the Vuetify example, it is no where near to ideal. Also, you may not use styling libraries for whatever strange reason and we don’t want you to be stuck without tooltips. See those options next.

Tooltip using JS

We are accustomed to someone else doing the hard work in the Javascript world. For Vue that happens to be @akryum from the Vue core team.

To get started, install v-tooltip.

npm install --save v-tooltip

Refer the package in the main.js file in your Vue project.

import VTooltip from "v-tooltip";

Vue.use(VTooltip);

.. and start using the tooltip.

<button
  v-tooltip="{
  content: msg,
  placement: placement,
}"
>
  Hover me
</button>

v-tooltip-vue

See v-tooltip demo and code.

This way of enabling tooltip in Vue projects is really simple. But, the javascript code (v-tooltip uses popper.js), (minimal) CSS and any other components add up to the long list of components to be downloaded by the browser.

Bundlephobia reports v-tooltip as being 64.7kB minified and 19.9kB gzipped. Not ideal at all. Other options like tooltip.js, tippy.js etc. do exist, but none of they clock ~8-13 kB upwards minified+gzipped.

Simple CSS for Tooltips

Tooltips can be created for any component using pure CSS. While this option may not be super powerful but more than makes up for that with it’s lightweight nature.

There are multiple options to enable tooltip using CSS - balloon-css, hint.css and microtip are popular options. All these clock ~1KB minified+gzipped.

For example, this is what we need to do to use microtip.

Add the CSS reference in index.html in your Vue project.

<link rel="stylesheet" href="https://unpkg.com/microtip/microtip.css" />

Start using the tooltip.

<button
  aria-label="This is a cool tooltip"
  data-microtip-position="bottom"
  role="tooltip"
/>

You could also install microtip as a package and reference that in the project.

Tooltip using CSS is simple and effective!

Finis

Using tooltips based on CSS is super useful, and is my preferred option (whenever UI libraries fall flat that is). But, I totally understand popular libraries like v-tooltip have their place and am cool with that too :)

]]> Find user's country without Geolocation and IP Lookup https://techformist.com/find-user-country-no-geolocation-ip-lookup/ Wed, 23 Sep 2020 06:30:00 +0000 https://techformist.com/find-user-country-no-geolocation-ip-lookup/ <p>I have this nagging problem of determining an end user&rsquo;s country/region in my web apps. The reasons for doing that are many -</p> <ol> <li>Automatic conversion of an event date/time</li> <li>Display regional news</li> <li>Show prices in user&rsquo;s currency</li> <li>.. and so on</li> </ol> <p>We could do two things to determine a user&rsquo;s region -</p> <ol> <li>Use geo location</li> <li>Use external services to look up the IP</li> </ol> <p>Option (1) is ideal. It is quite easy - thanks to HTML5.</p> I have this nagging problem of determining an end user’s country/region in my web apps. The reasons for doing that are many -

  1. Automatic conversion of an event date/time
  2. Display regional news
  3. Show prices in user’s currency
  4. .. and so on

We could do two things to determine a user’s region -

  1. Use geo location
  2. Use external services to look up the IP

Option (1) is ideal. It is quite easy - thanks to HTML5.

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(showPosition);
} else {
  x.innerHTML = "Geolocation not supported!";
}

We can use geo location almost always, except that the user gets prompted to allow our app to access her location. This leads to a bad user experience, and more than that, I don’t want the user to think about our app as yet another shady site that collects unneeded personal information.

We avoid the above problem by looking up user IP against a database, which is the second option outlined above. For e.g. you can use APIs from IP Stack, Apility Geo IP lookup, Labstack IP lookup or use the data sets from ip2location to lookup the user region based on IP address.

While not always accurate, looking up the region using IP is a good enough approximation that just works. However, this costs money in form of external services (monthly costs) or in form of enhancements in your product + cost of third party datasets.

A third option exists if you are not a super professional org and can live with “approximated” regions - looking up the region using time zone.

Just do this in Javascript ..

const tzone = Intl.DateTimeFormat().resolvedOptions().timeZone;

tzone gives you the user’s time zone, which can be now looked up to find the country of user.

For e.g. to find whether my user is logging in from India -

function indiaOrBust() {
  const tzone = Intl.DateTimeFormat().resolvedOptions().timeZone;
  return tzone.includes("Kolkata") || tzone.includes("Calcutta")
    ? "India"
    : "Not India";
}

Not really ideal if -

  • you are lucky enough to be in a region with multiple timezones and want to drilldown to the hyper locale.
  • have to distinguish / identify all the countries of the world
  • your “do or die” business logic relies on the country and you may lose a million dollars if that does not work

.. but, it’s a totally workable solution that does not add to the bundle or monetary costs.

See documentation for more details, use Intl and rejoice!

]]> Multiple Ways to Define Functions in Javascript https://techformist.com/multiple-ways-define-function-javascript/ Wed, 16 Sep 2020 06:30:00 +0000 https://techformist.com/multiple-ways-define-function-javascript/ <p>We have looked at functions quite a bit on this blog over the last two years. We have seen many avatars of a function including <a href="https://techformist.com/function-object-constructor-javascript/">a function object</a>, <a href="https://techformist.com/method-of-function-javascript/">a function&rsquo;s method</a>, <a href="https://techformist.com/function-of-functions-javascript/">function of functions</a>, and so on. But, what we have not done is to document all the ways in which we can define functions.. so here it is. :)</p> <h2 id="functions-in-javascript">Functions in Javascript</h2> <p>Function is a reusable body of code.</p> <p>Let&rsquo;s say we have to add two numbers. You can write some simple code like so..</p> We have looked at functions quite a bit on this blog over the last two years. We have seen many avatars of a function including a function object, a function’s method, function of functions, and so on. But, what we have not done is to document all the ways in which we can define functions.. so here it is. :)

Functions in Javascript

Function is a reusable body of code.

Let’s say we have to add two numbers. You can write some simple code like so..

const a = 1;
const b = 2;

const sum = a + b;

console.log("sum: ", sum);

But, what if you want to define code that can take any two arbitrary numbers and provide the sum? Not surprisingly, we have what is called a “function” to do exactly that.

const a = 1;
const b = 2;

const sum = sum(a, b);
console.log("sum: ", sum);

function sum(a, b) {
  return a + b;
}

The art and science of specifying some code for a function is a “function declaration”. The code within the sum function brackets is the body of the function and defines what the function does. There is more than one way to declare a function. Once the function is declared, you can call it from other code to get the result of function execution, yay.

Simple Function Declaration

Example above, nothing specific to report here.

Functions may or may not have arguments (a, b), and may or may not return values (return a + b).

Function Expression

A function is also an object in Javascript. So, we can easily do ..

const sum = function (a, b) {
  return a + b;
};

The difference from earlier declaration is that we used an expression to declare a function and assigned it to a variable called sum (instead of directly declaring a function called sum). For all practical purposes sum is a “normal” function that takes two arguments like before and returns the sum.

const sum = function (a, b) {
  return a + b;
};

console.log(sum(1, 2));

This form of declaring function as an expression is also called “named function expression”.

You can also name the inner function, but the results will remain the same.

const sum = function sumIn(a, b) {
  return a + b;
};

console.log(sum(1, 2)); //3

You cannot call sumIn directly.

const sum = function sumIn(a, b) {
  return a + b;
};

console.log(sumIn(1, 2));
// ReferenceError: sumIn is not defined

Function Expression using new

An alternative form of the above expression is to use a new keyword to declare the function and use the function body as the last argument.

const sum = new Function(a, b, "return a + b");
console.log(sum(1, 2));

See more details of this rarely used form here.

Arrow Functions

Arrow functions are one of my favourite things in the world. You just don’t name the functions anything, but use them to their full power.

const sum = (a, b) => {
  return a + b;
};

console.log(sum(1, 2)); //3

We did not use function key word to declare the function, but instead used a “shorter” notation with => syntax. The end result is the same.

Also see the perceived problem with this in arrow functions, and implicit return gotcha in arrow functions.

More to Functions

Functions are super useful and you will use them probably everywhere in Javascript. Of course, functions could do way more - also see function recursion, and generators.

]]> Using Nullish Coalescing Operator https://techformist.com/using-nullish-coalescing-operator/ Wed, 08 Jul 2020 06:30:00 +0000 https://techformist.com/using-nullish-coalescing-operator/ <p>ES2020 introduced nullish coalescing operator. We will see just how and where can you find use for it?</p> <h2 id="what-it-is">What it is?</h2> <p>Nullish coalescing operator (<code>??</code>) is introduced in the newest Javascript specification. It&rsquo;s primary design goal is quite simple - provide a way to check for nulls to return <code>true</code> or <code>false</code> values from an expression.</p> <p>The operator follows in the footsteps of shorcircuitinng operators <code>&amp;&amp;</code> and <code>||</code> to provide developers with a reliable way of checking for -</p> ES2020 introduced nullish coalescing operator. We will see just how and where can you find use for it?

What it is?

Nullish coalescing operator (??) is introduced in the newest Javascript specification. It’s primary design goal is quite simple - provide a way to check for nulls to return true or false values from an expression.

The operator follows in the footsteps of shorcircuitinng operators && and || to provide developers with a reliable way of checking for -

  1. Null values
  2. Differentiating between nulls and values that exist but are falsy

The basic usage is simple.

function check(planet) {
  return planet["awesome"] ?? true;
}

let earth = { awesome: true };
let pluto = { awesome: false };
let mars = {};

console.log(check(earth)); // true
console.log(check(pluto)); // false
console.log(check(mars)); // true

Null coalescing operator evaluates to true only for null and undefined. And, any evaluation of the expression is skipped if the left-most expression evaluates to null or undefined (similar to truthy checks in ||).

The results would have been different if you had used a simple || operator without null checks.

function check(planet) {
  return planet["awesome"] || true;
}

let earth = { awesome: true };
let pluto = { awesome: false };
let mars = {};

console.log(check(earth)); // true
console.log(check(pluto)); // true. Wait what?
console.log(check(mars)); // true

Why is null coalescing operator required?

Javascript does not require you to specify types, but they are implicitly assumed by the runtime.

Let us take this simple example.

const a = "abc",
  b = 1,
  c = true;
if (a == "abc" && b == 1 && c == true) console.log("so true");

// output
// so true

Or, you could just use -

if (a && b && c) console.log("so true");

// output
// so true

“Free typing” allows us to do some magical (horrifying to some) things. The above block script executes because the string and number are converted to boolean, and rules are automatically applied to convert values to boolean for evaluation.

We could make the script more readable by shortcircuiting it.

return planet["awesome"] || true;

If planet has awesome property set return that property, OR return true.

While this is awesome and all, you can see where it can go wrong.

let pluto = { awesome: false };
console.log(check(pluto)); //

function check(planet) {
  return planet["awesome"] || true;

  // true for pluto
}

Even when we specify pluto is not awesome, our program (rightfully) assumes it is. This happens because of the way || evaluates the expression-

  1. Start from left to right
  2. Check if first expression is true. Return true if it is
  3. Check if next expression is true. Return true if it is
  4. … and so on till the entire expression is evaluated

In our case -

return planet["awesome"] || true;

We pass pluto to the function -

  1. pluto['awesome'] is false
  2. OR moves to the right, and gets true
  3. Expression returns true

Our favourite way to solve this so far has been -

let pluto = { awesome: false };
console.log(check(pluto)); //

function check(planet) {
  return planet.hasOwnProperty("awesome") ? planet["awesome"] : true;

  // false
}

If pluto has a prop called awesome, return that. Or, return true.

Null coalescing operator simplifies this check.

let pluto = { awesome: false };
console.log(check(pluto)); //

function check(planet) {
  return planet["awesome"] ?? true;
  // false
}

We are now effectively saying if awesome prop is not null, return that. Else, return true.

How does nullish coalescing operator behave under pressure?

Quite well, actually.

Nullish coalescing operator acts very similar to ||, but, we are effectively checking for nulls.

console.log(null ?? true); // true
console.log(undefined ?? true); // true
console.log(false ?? true); // false

console.log(null || true); // true
console.log(false || true); // true

Now, consider these interesting expressions -

console.log("abc" ?? true); // "abc"
console.log("" ?? true); // ""
console.log(1 ?? true); // 1
console.log(0 ?? true); // 0
console.log(true ?? true); // true
console.log(false ?? true); // false

Use Cases

You can use nullish coalescing operator with ES2020. It is supported in Node 14+ and in all major browsers. Using variables for falsy checks without worrying about whether the return value is false simplifies our code.

A few use cases are outlined below.

1. Truthy checks alongside null values

This is the simplest use case, but one that you probably will never use.

const planet = "earth";
console.log(planet ?? "no planet");
// earth
2. Prop checks

This will be the most likely use case. Use this new operator and avoid null checks.

const earth = { awesome: true };
console.log(earth["awesome"] ?? true);

You will do this if you don’t want to use the new optional chaining operator. Both the operators do the same thing differently.

Optional chaining operator (?.) offers a convenient way to use props without ever caring about the object is valid. For e.g. consider this code ..

const planet = null;

console.log(planet.earth.name); // error

To avoid the null game, we were forced to introduce our own checks like so -

const planet = null;

if (planet && planet["earth"]) console.log(planet["earth"]["name"]);

But, now we can rock the world with a cooler way to do the same thing.

const planet = null;
console.log(planet.earth?.name?.toUpperCase()); // no error :)
3. Arg checks

Another strong use case - thanks to Javascript’s typing powers.

function isPlanet(planet) {
  console.log(planet["type"] ?? true);
}

Again, this could be better served by optional chaining depending on your use case.

When not to use this operator?

Nullish coalescing operator is of course no hammer, and it does not offer you peace of mind even with the narrow coverage it offers.

Can’t chain with AND / OR
console.log(    true || planet ?? "ok");
// syntax error
Support is limited

You cannot go crazy with nullish coalescing operator.

  • Node v14+ is required
  • Not supported in IE (are you still using IE?), Firefox for Android, Opera for Android. Check browser compatibility to know current status

Fin

That’s about it folks. Start coding cool stuff!

]]> Javascript - A Beginner Guide https://techformist.com/javascript-beginner-guide/ Wed, 03 Jun 2020 06:30:00 +0000 https://techformist.com/javascript-beginner-guide/ <p>Here&rsquo;s a good guide to get you started on Javascript in a practical way.</p> <h2 id="why-another-guide">Why another guide?</h2> <ul> <li>Practical - don&rsquo;t learn for the sake of learning, learn for the sake of doing!</li> <li>Tactical - learn what matters, fast (yes, that&rsquo;s what everyone says)</li> <li>Strategic - see the big picture</li> </ul> <p>This guide will get you started from the beginning, graduate you to using industry standard tools, and point you towards the right direction for learning even more than what can be offered in one guide or course.</p> Here’s a good guide to get you started on Javascript in a practical way.

Why another guide?

  • Practical - don’t learn for the sake of learning, learn for the sake of doing!
  • Tactical - learn what matters, fast (yes, that’s what everyone says)
  • Strategic - see the big picture

This guide will get you started from the beginning, graduate you to using industry standard tools, and point you towards the right direction for learning even more than what can be offered in one guide or course.

What makes me qualified?

I have been using Javascript since late 90’s, and am absolutely in love with the language. I was an avid hobbyist developer using JS in packaged products, and after 15 years of doing that changed into a full-stack developer and consultant creating web-based technology products and services.

In summary - nothing that qualifies me to an epic level, but I do have a thing or two to share.

Who is this guide for?

This guide is intended for folks who want a practical introduction to Javascript.

If you are a developer in any language, it is highly likely that you have used Javascript in some shape and form, and may not find it super interesting to start from the beginning.

The Many Faces of Javascript

Javascript started as the language for the web - automating web pages and bringing interactivity to clients using a browser. It is the only language that does that to this day at the browser level (though things are changing fast). But, JS has grown much much more - for everything from pushing boundaries on interactivity over web to making animations, drawing charts, and creating desktop and mobile apps.

Javascript can today run on web, desktop and such typical computing devices, mobile phones, on embedded devices. The evolving standards have made it easier to learn and scale the language to newer heights.

Get Started

Why, in the web of course.

  1. Take the first steps by learning how Javascript can be used today and how you can create your own magic with a few lines of code.
  2. Create the first few projects using just Javascript
  3. Graduate to using a full-fledged development environment and create more projects

My goal is to make this guide as practical as possible - hence the focus on projects. You may enjoy the guide more if you follow along.

Tools of Trade

Before delving further, let’s set everything up for our journey.

We will begin our journey with a simple tool - no installation required. Just start using one of the below tools -

You may optionally sign up for a free account in either (or both?) of the services.

Later on we will start using a code editor - VSCode. Code along and see working examples hosted on Github.

Start Coding

Javascript works beautifully in web - it plays along well with HTML (Hyper Text Markup Language - the language to create the user interface of web pages) and CSS (cascading style sheets - style the webpage).

A typical example will look like this ..

  1. Create a file called index.html.

    <html>
  <head>
    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript" src="./script.js"></script>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

  2. Create another file called style.css.

    h1 {
  color: blue;
}

  3. Create yet another file called script.js.

    alert("hello world");

Open the HTML page to see a page with the hello world message that shows dialog box when it is loaded (or refreshed).

hello-world-javascript-html

Congratulations of your first line of Javascript!

The structure represents how today’s web works. When you visit a web page -

  1. Your browser downloads HTML, Javascript and CSS
  2. Renders HTML page and applies styles
  3. Applies Javascript logic to change content, add/change styles or respond to user actions

Since everything described above is user-facing and “front-ends” the application, Javascript is associated with “frontend” languages that deals with user interfaces and interaction.

But, when you run Javascript in other modes (for e.g. in desktop or mobile phones), it is executed by some form of NodeJS. Node is a Javascript runtime engine that will execute Javascript on the device and can function without any interaction with HTML/CSS layers. This execution can happen on your machine (hence executing any code that you type), on web servers that serve websites, on desktop or mobiles using frameworks that encapsulate Node. Node enables Javascript execution in the backend.

Executing Javascript in frontend is optional - but you have to deal with limited user interactivity. You can just have styled static pages without supporting any dynamic interactions. Similarly, you can have all the frontend functions without using any Javascript in the backend (e.g. you could use PHP, Go or some other language for servers).

Let’s get back to our project at hand. Instead of creating all the required files locally we can make our life easier for now and use one of the online tools - e.g. Webmaker. Just go to the site, click on New > Start Blank. Add the content of the html, js and css in the various panes - you don’t need to reference the files since they are already tied together. Double click on the Console pane to see the console output - this is where you can see output from Javascript execution regardless of what is on the HTML page.

If you are using codepen - choose Create Pen from the left sidebar. Replace the content of the panes with what you used earlier to see the same beautiful page! You can see the console by clicking on the Console button at the bottom of the page.

Find Codepen for the above example here. Just open code pen to execute the code.

codepen-html-js-hello-world

Webmaker app and Codepen execute your code as you type the lines - so don’t get surprised with errors when you stop typing for any reason.

Since we will not be using HTML and CSS as much, you will refer the JS pane and console for the most part.

I will use Codepen specific references here on, but the actions are similar in any other tool incl. Webmaker.

You can start creating new pens for trying out the examples. You can find all the examples from this guide in a Codepen collection.

Viewing Output

We previously had a single line of code. We will start building up on top of that.

console.log("hello world");
console.log("you are awesome");

console is an easy way to print a message during code execution. In a browser you can see console output in web developer tools (e.g. Ctrl + Shift + I to developer tools > head over to Console tab). In Codepen, you simply click the Console button to show console - this is hidden by default.

When the browser (or runtime) executes Javascript, it just executes statements one line after the another. Javascript is an “interpreted” language since the code is not compiled to any intermittent state before execution. The tool ecosystem is quite powerful to make you forget that to an extent - but keep that in mind.

You can also do simple (or complex operations when you print output).

console.log("sum: ", 1 + 2);
// sum: 3

console.log("The answer to all questions is ", 6 * 8);
// The answer to all questions is 42

See the //? That is a comment. Comments are ways for other humans (and future you) to understand code. Comments are ignored by the runtime - they are not executed, but just sit there in the code.

Comments can be single or multiple line.

// single line comment

/*

    Multiple line comment
    ...
*/

Variables and Types

A variable is a temporary storage location for your program. You can assign a “value” to a variable, recall the value at a later time, and process the variable like you would process the data.

Creating a variable (“declaring variable”) and assigning a value is as simple as -

a = 1;
console.log("a:", a);

// output
// a: 1

// reassign value
a = 2;
console.log("a next:", a);
// output
// a next: 2

Variables can be used to carry out operations similar to what we did earlier.

a = 1;
b = 2;

console.log("sum:", a + b);

The values that remain constant (e.g. 1, 2) are called “constants”. Constants can be assigned to variables and used in any calculations along with variables.

n = 3;
console.log("double:", n * 2);
// output
// double: 6

You can also do -

name = "Peter Parker";
console.log("My name is ", name);
// output
// My name is Peter Parker

While Javascript allows you to assign variables as and when you please, modern build tools may not always agree with you. It is a good idea to “declare” a variable explicitly by using var, const or let keywords.

var num = 1;
console.log("num: ", num);
// output
// num: 1

Keywords in a programming language are words that denote special meaning. In the above e.g. var declares a variable called num. You cannot use keywords as variable names.

The below code will not work.

var var = 1;
// error

Other keywords include words to check conditions (e.g. if, else), specify conditions to run code “in a loop”, i.e., execute code repeatedly until a condition is satisfied (e.g. while, for), and more. See the complete list of Javascript keywords on MDN.

When you declare a variable using const you cannot reassign values to that variable. Other than that the different declarations differ in how variable values are made available at different locations within the code. We will revisit this later.

You may have also observed that we did not specify if a given variable stores

  • a number (for e.g. 1, 2, or 33)
  • a string (e.g. “Peter Parker”)
  • or something else.

number, string etc. are called variable “types”.

You cannot specify types in your code. Javascript provides “implicit types”, which is just a fancy way of saying that the Javascript runtime looks at the variable value and assumes a type for the variable.

You can see the “deduced type” using typeof keyword.

num1 = 1;
num2 = 3.14;
num3 = -10;
strWorld = "world";
strW = "w";

console.log(
  typeof num2,
  typeof num2,
  typeof num3,
  typeof strWorld,
  typeof strW
);
// "number" "number" "number" "string" "string"

As you can see there are no specific types for decimals, whole numbers or negative integers - all of them are simply number. Similarly any number of characters will denote a string type.

Let us see more types.

result = true; // there are no quotes around `true`
let nothing = null;

console.log(typeof result, typeof realResult, typeof nothing, nothing == null);
// "boolean" "undefined" "object" true

The last statement is just an equality check to ask runtime to check whether nothing is null, and therefore the result is true.

There are two more types - bigint (for handling large integers) and symbol (for handling symbols).

There are also special values called NaN and Infinity which are of number types but not really numbers.

let noNum;
let half = noNum / 2;
console.log(half); // NaN
console.log(typeof half); // number

console.log("abc" * 2); // NaN

console.log(2 / 0); // Infinity
console.log(typeof (2 / 0)); // number

While one may initially think that using no types in a programming language is easier (it is indeed..), no explicit types may lead to unexpected results and hard-to-debug issues. More over, invalid operations like dividing a string by number cannot be caught during development (during “compilation”) since types are not deduced until runtime.

For e.g.,

let str1 = "hello";
console.log(str1 + 2);
// hello2

When you add a string to a number, Javascript automatically converts the integer to a “more complex” string type and combines the two ("+" operator can work on numbers as well as strings).

Conversion of types is supported across the board in Javascript. There are so many use cases that there are even shortcuts for type conversion.

Consider below examples.

const strA = "1";
console.log(strA, typeof strA); // "1" "string"

const numA = Number(strA); // 1
console.log(numA, typeof numA); // 1 "number"

In fact, I used different variables for strA and numA for demonstration purposes. Nothing prevents me from using the same variable name. During program execution Javascript points the variable to a new storage location with number type in the background.

Also, did you also observe that we used string variables using a double quote ("), but assigned a number without quotes? Strings can be quoted with single or double quotes, rest of the types (or objects) are not.

hello = "world"; // string
x = 1; // number
isAwesome = true; // boolean

Instead of quotes, we can also use ``` - these are called as string literals and are awesome.

Remember how we printed out the values earlier?

console.log("hello: ", hello);

We can do the same thing by using string literals -

console.log(`hello: ${hello}`);

You can also do simple calculations within the string literals with or without using string literals.

console.log(`sum: ${x + y}`);
console.log(`product: ${3 * 2}`);

The final variable types we will talk about is null and undefined.

null assigns a null value to a variable - it does exactly what it sounds like. Variable is assigned a value null!

let a = null;

console.log(a); //null

Null can be assigned to any types and is commonly used in checking for a valid value in the variable.

Undefined, on the other hand, just tells us that a variable is not defined.

console.log(b); //undefined

null = no value in variable undefined = variable has not been defined

See this Codepen for working examples..

Operations and Operators

An operation is just a term to process data and obtain an end result. An operation can include -

  1. One or more variables
  2. One or more constants
  3. One or more operators

Arithmetic Operators

Simple arithmetic operations are supported out of the box in Javascript.

let x = 2;
let y = 3;

// addition operation with `+` operator
console.log(x + y); // 5

// multiplication with `*` operator
console.log(x * y); // 6

// division with `/` operator
console.log(y / x); //1.5

// modulo operator
console.log(y % x); //1

You can use more than one operators in one go -

console.log(x + y - y); //2
console.log(x + y * y); //11

See this Codepen for working examples.

See more arithmetic operators here.

Comparison Operators

Comparison operators help you to compare between two values.

let a = 3,
  b = 5;

console.log(a == b); // is `a` equal to `b` - false
console.log(a < b); // true
console.log(a <= b); // is `a` less than or equal to `b` - true
console.log(a > b); // true
console.log(a >= b); // true
console.log(a != b); // is `a` not equal to `b` - true

Comparison operators always return a boolean.

Common use cases for comparison operators is are in conditional statements that are used to execute specific code blocks.

A simple e.g.:

if (a == b) {
  console.log("a and b are equal");
} else {
  console.log("a and b are NOT equal");
}

The implicit type deductions in Javascript may not always be intuitive for people from other languages. For e.g. you can compare a 3 (number) with "3" (string), and the results will be “equal”.

console.log(3 == "3"); // true

Javascript converts the types and keeps you happily chugging along. But, there can be places where you want to avoid this type of comparison.

For e.g.

const x = "1";

if (x == 1) {
  console.log(x.toFixed(2)); // error since x is not a number and toFixed can only work on numbers
}

.. or in situations like this..

let result = 0;

if (!result) {
  // check if you did not receive result
  // result is implicitly converted to boolean condition.
  // Since the number `0` is false, this condition evaluates to not(`false`) = `true`
  console.log("Did not receive result");
}

We can use strict comparison operators to force Javascript to consider types as well as values.

console.log(3 === "3"); // strictly equal. values and types should be equal - false
console.log(a !== b);

Logical Operators

So far we have seen one comparison being made at a time.

let a = 1;

console.log(a == 0); // false
console.log(a > 0); // true
console.log(a < 5); // true

Real-world problems can have more than one condition to check. What if you want to check if a is greater than 0 and also less than 5? You can do that using logical operators.

console.log(a > 0 && a < 5); // true. check if `a > 0` and also `a < 5`
console.log(a > 5 && a < 10); // false

&& represents the AND operator. It results in true only if all expressions used in AND expression are true.

Other logical operators :

  1. OR - ||: results in true if any value is true
  2. NOT - !: unary operator. Just reverses the result - true to false or otherwise.

You can mix and match logical operators and any other operators in an expression.

let a = 9;
console.log(a > 0 && a < 10 && a != 1); // true
console.log(a < 1 || (a > 1 && a % 2 == 0)); // false - a < 1 AND a should be fully divisible by `2`

Consider one more example using simple conditional statements.

let color = "white";
let animal = "tiger";

if ((color == "white" && animal = "tiger")) console.log("ok"); // "ok"
if ((color == "white" && animal = "elephant")) console.log("whoa"); // will not print
if (color == "white" && animal != "tiger" && animal != "elephant")
  console.log("white something"); // will not print

Read up more on operators.

Collections

Collections are just bringing variables and values together in one group.

Arrays

The most common collection is an array. We can create arrays with same type of variables, constants, other arrays, or any objects.

// a simple number array
let nums = [1, 2, 3, 4, 5];

You can access any or all elements of an array.

console.log(nums); // [1,2,3,4,5]

console.log(nums[0]); // 1
console.log(nums[1]); // 2
console.log(nums[4]); // 5

An array can be -

  1. Artists in an album const wow=["Kula Shaker", "Deep Purple"]
  2. List of students in a class const class = ["Kent", "Parker"]
  3. Or any collection, really. We keep related elements since we want to group things and process them with code.

Below is an example of an array with seemingly unrelated stuff.

const mix1 = ['a', 1, ['x', 'y']]] // array within an array

console.log(mix1[0]); // a
console.log(mix1[2]); // ['x', 'y']
console.log('array length = total number of elements in array = ', mix1.length); // 3

We discussed methods and how they are applicable to specific objects. Arrays have their own special methods too.

let nums2 = [1, 2, 3, 4, 5, 6];

console.log(nums2); //[1,2,3,4,5,6]
console.log(nums2.length); // array length = 6

nums2 = nums2.push(7); // add 7 to array - at the end
console.log(nums2); //[1,2,3,4,5,6,7]

nums2 = nums2.pop(); // remove the last element of array
console.log(nums2); //[1,2,3,4,5,6]

console.log(nums2.sort()); //[1,2,3,4,5,6] - already sorted
console.log(nums2.includes(1)); //true. Does the array include `1`?
console.log(nums2.indexOf(2)); //1. Index of `2`. Array starts at zero and counts up

There are also shift and unshift methods that work similar to pop and push but do that at the beginning of the array.

Strings are nothing but arrays of characters. You could apply arrays-specific methods like length to strings as well.

name = "Parker";
console.log(name[0]); // P
console.log(name[2]); // r
console.log(name.length); // 6

See this MDN page to read more on arrays.

Objects

An object is a collection of one or more key-value pairs called “properties”.

Example -

const student = { name: "Ram", age: "9", class: "4" };

Here name, age and class are props of student object. Note that property name (the key) is unique.

Do you remember that we saw earlier that almost everything is an object? This was the “object” we were referring to all along. Every primitive, function or any other Javascript entity is an object and has its properties.

You can get an individual property value by -

console.log("name: ", student["name"]); // Ram

You would have seen by now that objects are similar to arrays in that they group stuff together. The keys are ordered in arrays, and they are not controlled by you. Objects enable you to have your own keys and use it too, but the order of key/value pairs is not maintained or guaranteed.

You can have collection of collections. For e.g. an array of objects can be declared with following code -

const students = [
  { name: "Ram", age: "9", class: "4" },
  { name: "Chris", age: "9", class: "4" },
  { name: "Adi", age: "8", class: "3" },
];

How do you refer individual student? Follow the pattern followed for an array and for an object.

console.log(students[0]); // { name: "Ram", age: "9", class: "4" }
console.log(students[0]["name"]); // Ram
console.log(students[students.length - 1]["class"]); // 3

Examples for collections are in this Codepen.

There are other types of collections too - namely sets and maps. But, we will not go into that right now.

Conditional Statements

A conditional statement enables execution of different code based on given set of conditions.

if-else

We have already seen a simple if example -

let a = 1;
if (a == 1) {
  console.log("a is one");
}

console.log("a is one"); is executed only if a == 1.

You can pair if with else, and also use more than one if.

let a = 1;
if (a == 1) {
  console.log("a is one");
} else if (a == 0) {
  console.log("a is zero");
} else {
  console.log("a is neither one nor zero");
}
  • Execute first block of code if a is 1
  • Execute second block of code if a is 0.
  • Execute third block of code for all other conditions

Only one block is executed at any time with an if/else-if/else block.

You can also “nest” if statements.

let a = 1;
if (a > 0) {
  // will be executed only if a > 0
  if (a == 1) {
    console.log("a is one");
  } else console.log("a is something else");
} else {
  // a <= 0
  console.log("a is NOT greater than zero");
}

Did you also observe that I left out {} for else. This is perfectly valid if you have only one statement in the if or else blocks.

Consider another example where you want to provide free admittance to kids and seniors > 70 years.

let age = 9;
let cost;
let hasPass = false;

if (age <= 8) cost = 0;
else if (age > 8) {
  if (age < 70) cost = 0;
  else if (hasPass == true) cost = 0;
} else if (age >= 70) cost = 0;
else cost = 10;

Since we already know the logical operators can be combined, we can simplify it to -

let age = 9;
let cost;
let hasPass = false;

if (age <= 8 || age >= 70 || hasPass) cost = 0;
// using just `hasPass` is equivalent to a boolean expression - `hasPass == true`
else cost = 10;

switch

You can use switch to provide a readable conditional block. It functions similar to an if/else if block.

We can rewrite the earlier if example as -

let a = 1;

switch (a) {
  // compare `a` to values provided in `case`
  case 1: // if a == 1
    console.log("a is one");
    break;
  case 0:
    console.log("a is zero");
    break;
  default:
    console.log("a is neither one nor zero");
}

default block is executed if none of the case statements get satisfied, and hence is at the very end of switch.

You also observe break in all case blocks. This is by design. If you don’t use break the control starts going through the next case block and executes the block if it satisfies the condition.

For e.g..

let a = 1;

switch (true) {
  // compare `true` to case variables or expressions
  case a > 0: // if a > 0
    console.log("a is greater than zero");
  case a < 10:
    console.log("a is less than 10");
    break;
  default:
    console.log("a is something else");
}

// output
// a is greater than zero
// a is less than 10

A lot of people argue that using switch is more readable than a series of if/else if statements, and faster to execute. I tend to agree with them on the former.

Loops

Loops enable us to repeat “stuff”.

So far we have seen trying to add numbers, printing messages and doing other great things. But, what if we have 10s or 100s of numbers to add, print dozens of messages, or do greater things?

Enter loops. There are different types of loops available in Javascript.

while

A while executes a block of code until a given condition is satisfied.

let i = 0;
while (i < 5) {
  console.log("i am", i);
  i = i + 1;
}

// output
// "i am" 1
// "i am" 2
// "i am" 3
// "i am" 4

In the loop -

  1. create a variable called i, initialise it to 0
  2. start while loop to repeat code within brackets until i is less than 5
  3. within the loop, print a message and increment i (else the loop will run indefinitely)

do-while

There is an alternative to while to execute the code block at least once and repeat till the given condition is not satisfied.

let i = 0;
do {
  console.log("i am", i);
  i = i + 1;
} while (i < 5);

// output
// "i am" 1
// "i am" 2
// "i am" 3
// "i am" 4

While the above code has similar output as the earlier while loop, the following block of code is repeated once and only once (even though the while loop condition was not satisfied).

let j = 10;
do {
  console.log("i am do while", j);
  j = j + 1;
} while (j < 5);

// output
// "i am do while" 10

for

A for loop allows limited execution of a block of code until a specific count is reached.

for (let i = 0; i < 5; i = i++) {
  console.log("hello", i);
}

// output

// hello 0
// hello 1
// hello 2
// hello 3
// hello 4

While the for loop does a similar job as a while loop, it functions a tad differently.

  1. initiate a for loop

    • a variable and a value from where we need to start the loop. We declared i in for while initiating loop itself, but it can be declared earlier in the code as well. i was initiated to 0
    • specify when to stop. Thiscify the condition to be true for the loop to continue. i < 5 specified that the loop code should execute until i was less than 5
    • what should we do after each iteration of loop. Here we increment i. We have used a unary operator i++ instead of writing i=i+1. You can count up or count down with any number (for e.g. i=i+10 will increment i by 10 after each iteration)

  2. for loop will also feature a block of code that needs to be executed until the specified condition holds true. We just print a message

Loops for Collections

We have seen about collections earlier. We can combine that knowledge with loops to iterate through every element in a collection.

for is quite a common sight to work with arrays.

let colors = ["green", "red", "blue"];

for (let i = 0; i < colors.length; i++) {
  console.log(colors[i]); // get the element at position i
}

// output
// green
// red
// blue

There is also a variation of for loop to iterate through arrays - for/of loop.

for (const color of colors) {
  console.log(color);
}

One of the popular ways of iterating objects is by using a variation of for loop - for / in.

const student1 = { name: "Ram", age: "9", class: "4" };

for (const property in student1) {
  console.log(`${property}: ${student1[property]}`);
}

// output
// "name: Ram"
// "age: 9"
// "class: 4"

Functions

Function is a block of code that performs a task. A function allows us to write reusable code.

Take our earlier example of getting a sum of two numbers.

let a, b;
let sum = a + b;
console.log("sum: ", sum);

Now, what happens if you also want the multiplication result?

let a = 2,
  b = 3;
let sum = a + b;
let sum = a * b;
console.log("sum: ", sum);
console.log("product: ", product);

You could go on and on with the calculations and make your code hard to understand. Or, you could keep it simple by organizing code into functions.

Let us rewrite the code using functions to get sum, get product or do something else.

let a = 2,
  b = 3;

console.log(sum(a, b)); // 5
console.log(product(a, b)); // 6

function sum(x, y) {
  return x + y;
}

function product(x, y) {
  return x * y;
}

The block of code starting with function keyword is called the function definition. You define a function like so -

function sum(x, y) {
  return x + y;
}

A function can have zero or more “arguments” - these are values passed to the function (like x, y). A function may “return” a value or just execute some logic and not return anything.

You can then call this function from anywhere (provided the function is accessible from that place) -

const total = sum(1, 3);

While the function existed all this time, we execute the code only when we call that function. The function will take the arguments, total them and return the sum. We store the returned value in total.

You also see that we have used x and y in more than one function. The variables passed as arguments or those created within the function are available only in that function. There will be a larger discussion about “scopes” or when you are able to access a variable within functions soon.

Methods

Methods are just functions that belong to a “object”. Javascript treats (almost) everything (variables, constants, functions, etc.) as an object. So, it follows that there are specific methods available against objects.

Consider this example to change case of a string.

let message = "hello world";
console.log(message.toUpperCase()); // HELLO WORLD

Similarly, we can have a rounding-off method to display a formatted number.

let numPrice = 123.34567;
console.log("numPrice:", numPrice); // 123.34567
console.log("Converted to string + rounded:", numPrice.toFixed(2)); // 123.35

Note that the method does not change the original value unless explicitly instructed to do so.

let announce = "the name is kent";
console.log("announce: ", announce); // the name is kent

announce = announce.replace("kent", "parker");
console.log("announce: ", announce); // the name is parker

Examples for functions and methods are available in this Codepen.

See complete reference for string methods, number methods and more on MDN.

Graduating to Next Level: Set up

So far we have executed projects by using online editors and had fun doing that. But, real-world projects can get complex with a lot of files, need a lot of space, or you may simply want to work on projects offline without typing in the browser.

We code Javascript using -

  1. Code editors - we live by VS Code
  2. NodeJS - executes Javascript locally on your computer and makes it easier to debug. Further, tools are built on top of Node to build and deploy projects over web, or for various devices

Download both tools and install them on your computer by following the instructions on the respective websites.

Create a new folder on your computer and open that folder in VSCode (File > Open Folder).

You can now start creating Javascript files (with suffix .js). Right click on the folder name in the left pane, click New File and name the file as hello.js. Enter this line in the file -

console.log("hello");

You can execute this Javascript using Node. Go to Terminal > New Terminal in VSCode to open a new terminal.

Type -

node hello.js

The command outputs hello.

Subsequent examples assume that you are using Node. Each time -

  • You will create a file (or change existing file)
  • Execute Javascript with node <file_name> in Terminal
  • See result in Terminal

Most of these examples are simple enough to work on Codepen too - so you can continue that. But, as you get more into Node you will find it faster and easier to type stuff local to your computer and execute them.

If you are using a browser, the browser itself executes the Javascript and there is no Node involved. Node facilitates execution of Javascript on your computer without a browser. There are other ways to execute Javascript on your computer - including Deno but we will use Node for now.

Now, you can just created a Javascript file - say “hello.js”..

console.log("hello world");

Open a command prompt (within VSCode or otherwise), go to directory of the file, and execute it to see the output.

node hello.js

Now, you can create and execute any Javascript!

Projects

You can create these projects using Codepen or on your local computer.

As the title says - just use console.log to print numbers.

Explore options to get numbers in multiples of 7.

  • Get the first number after a given number (100 in our case) that is fully divisible by 7. Print the numbers by adding 7 in a loop until the max number is reached (200 in our case)
  • Use modulo operator to get the first number divisible by 7 - then use logic similar to above

Calculate sum of numbers between 10 and 25

Calculate sum of numbers - 10 + 11 + 12 + 13 + … + 25

Find average and maximum with a given array

Assume the input array to be [10, 12, 15, 17, 5, 19].

  • Calculate sum of all numbers
  • Calculate average (sum of all numbers divided by the count of numbers)

Reverse numbers

Assume the input array to be [10, 12, 15, 17, 5, 19].

  • Reverse the array - [19, 5, 17...,10]
  • Sort array in descending order

Array comparison

Take two arrays as input.

  • assume [1,5,7,11,23,19], [8,11,23,1,21,25]
  • output numbers that are in one array or the other, but not both
  • output numbers that are in both arrays

Create a palindrome checker

Create a palindrome checker and output whether a given word is a palindrome.

  1. Method will take a valid string input
  2. Check palindrome
  3. Return true or false

Create a ROT13 encryption encoder and decoder

ROT13 replaces a letter with the letter 13 letters after it in the alphabet. See this (example](https://rot13.com/).

  • Accept an input string and encrypt with ROT13 encryption
  • Decode a string using similar algorithm

Object to array printer

Given an object -

  • print in the format [key1:val1, key2:val2…] for all keys
  • print all keys and all values in two separate arrays

Create a simple calculator

This uses both HTML and Javascript. Skip this project if you are not familiar with HTML.

  1. Enable user to select numbers, brackets and arithmetic operators - use HTML
  2. Optionally use a simple to use library like MVP.css. Just include the stylesheet in your HTML - you don’t need to learn CSS
  3. Display results
  4. User should be able to continue calculations with the result or clear it to perform new calculations

Next Steps

So far you have seen the basics of Javascript -

  • get to know how to start writing Javascript
  • variables and types
  • conditional statements
  • loops

We have not coded frontend or written any apps, but we will get there. A few resources to help you on your journey -

]]> A quick start on ASP.NET Core Razor Pages https://techformist.com/asp-net-razor-pages-quick-start/ Wed, 05 Feb 2020 06:30:00 +0000 https://techformist.com/asp-net-razor-pages-quick-start/ <p>Here&rsquo;s a quick introduction to Razor pages in ASP.NET core, and an opinionated way to quickly start building applications using Razor pages. And yes, there is a case for using Razor pages even in 2020.</p> <h3 id="so-aspnet">So.. ASP.net?</h3> <p>Yes, indeed. I have had a love-hate relationship with ASP.NET through years. I am way less productive using ASP.net but cannot ignore the speed that a dotnet web server provides. Take into account the super debugging capabilities/tooling and the sizeable market that keeps providing projects on the platform, we surely have more than a winner in ASP.NET.</p> Here’s a quick introduction to Razor pages in ASP.NET core, and an opinionated way to quickly start building applications using Razor pages. And yes, there is a case for using Razor pages even in 2020.

So.. ASP.net?

Yes, indeed. I have had a love-hate relationship with ASP.NET through years. I am way less productive using ASP.net but cannot ignore the speed that a dotnet web server provides. Take into account the super debugging capabilities/tooling and the sizeable market that keeps providing projects on the platform, we surely have more than a winner in ASP.NET.

And oh, it immensely helps that innovations like Blazor are exciting options to make web development arguably more productive and easier.

Why yet another introduction?

There are a million other introductions to ASP.NET platform. Microsoft’s own documentation and guides are immensely helpful for beginners at all stages. But, what I love to see is a quick way to create an app (or two) and make new developers comfortable with the ecosystem. At least that’s how I learn stuff and I found some of the tutorials I glanced through to be either too detailed, or at a superficially high level.

This introduction is more for developers who use a different language for web development. It is not quite intended for absolute beginners, but anyone should be able to follow along.

Firing off with ASP.net

There are two main ways to get started on development using ASP.net platform.

  1. Use Visual Studio: proven way that has been forever
  2. Use Visual Studio Code or your favourite editor and dotnet core CLI

Both ways deserve all the love they can get. I prefer VSCode, but will use Visual Studio in this tutorial because - why not. Going forward I will be basing discussions primarily on Visual Studio 2019 and dotnet Core 3.1.

Installation is somewhat boring and works on expected lines.

  1. Download Visual Studio from https://visualstudio.microsoft.com/
  2. Click, click, click to install

Visual Studio comes with dotnet SDK, and you should be all set by now. If you decide to use VSCode, just install the dotnet SDK separately. You should then be able to use all the command line goodness on the best code editor ever(tm).

See the install docs if you are stuck. (Stuck during install, really?)

Once everything’s ready, just create a new project.

dotnet-razor-pages-new-project

Select “ASP.NET Core Web Application”. Hit next and name your project. You will get another screen where you can select an “Web Application” template. This option will instruct Visual Studio to scaffold a few things when the project is created.

The Structure

As any modern web development stack, the files generated can be overwhelming at the beginning. We can break the structure down to basics.

A typical ASP.net project consists of one solution (which is a container for projects), and one or more projects. It will have at least one project (of course), anything else is optional and enables you to build stuff incrementally.

project-structure-visual-studio-asp-net-core-razor

Beginning of everything: Startup.cs and Program.cs

These are the two files that bootstrap our app and give it ASP powers. When our app starts, the runtime calls Main method defined in Program.cs, which configures itself and starts running as an ASP app.

If you were so far wondering how our humble app came to acquire ASP powers, IHostBuilder is to blame. That interface provides our function CreateHostBuilder abilities to assume the powers of ASP.net, configure itself and start running - all in a simple one-line statement..

CreateHostBuilder(args).Build().Run();

More code in Program.cs uses C# lambdas and Dependency Injection (“DI”) to apply configuration parameters and methods defined in Startup.cs to our application.

public static IHostBuilder CreateHostBuilder(string[] args) =>
        Host.CreateDefaultBuilder(args)
            .ConfigureWebHostDefaults(webBuilder =>
            {
                webBuilder.UseStartup<Startup>();
            });

Further, ConfigureServices in Startup.cs has a specific block that enables Razor pages in your app.

public void ConfigureServices(IServiceCollection services)
{
    services.AddRazorPages();
}

The Configure method in Startup.cs enables a pipeline to include middleware, which in-turn enables various features for your app - all without needing you to code them in.

For e.g. -

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    // ...
    app.UseHttpsRedirection();
    // ...
}

… tells runtime to redirect HTTP requests to HTTPS.

We will deal with lambda functions, DI etc. in more detail some other time. For now, we will move on and find out how we can quickly create our app on ASP.net.

Before we dig-in: settings and launchSettings.json

We have created a web application that runs as a command line app. The server is just serving content defined in web stuff like HTML/JS/CSS etc and in Razor pages, but does not render UI on its own.

Configuration parameters for our app is defined in launchSettings.json.

You can see the values defined in settings file in a nice user interface - right-click on the project (not the solution) in the right-hand-side bar, and select properties. Any change in one place is reflected in the other - just sayin'.

You may also notice the word “development” in the configuration file. We can provide parameters for any number of environments including development, and the start-up logic figures out the settings to apply. Further, secrets can be managed quite efficiently and made accessible to those who “need to know”. This is super helpful as you might imagine.

By default, the app uses IISExpress but there are options to use Kestrel, which is a light-weight (& a more modern) server by Microsoft. You will see these configuration options selected in the Toolbar as well. Typically, I prefer Kestrel since it is fast, and I end up hosting dotnet on Linux (where IIS is not available).

The ‘client-facing’ wwwroot

All the client-facing assets are stored in the www folder. This includes CSS, JS (custom and any libraries), static HTML, and anything else that finds its way to the browser.

Right off the bat, you see a sample CSS and JS, bootstrap and JQuery in the scaffolded files. Any and all of this can be changed or replaced. For e.g. you can replace Bootstrap with Bulma and chug along a different path.

Pages folder

Most of the action takes place here. Pages is where you place razor pages created using C#. The pages in C# get converted to something that the browser can understand by ASP.NET – we will see way more of pages in a few moments. Razor pages have the extension ‘cshtml’ files

You also see a Shared folder and a bunch of files starting with _. Shared folder is used to contain assets shared across the project, and the _ is a convention to create something called a ‘partial’. A partial is not a ‘complete’ page in itself, but comes together with other partials or pages to form complete pages.

Layout.cshtml is an example of a partial. In this file we have the header (which forms the header in the pages using this layout), a container (which will contain data), and the footer. The file also has references to script and HTML.

Of course, you can use different layouts, or decide not to use layouts at all – but building pages like this will make the entire process easy to build and to maintain.

In other notes, take a look at -

  • _ViewImports.cshtml: enables tag helpers globally
  • _ViewStart.cshtml: base/master page

Error, Index and Privacy pages are the actual Razor pages. You will create something on these lines to for adding more pages to your app.

Expand Index.cshtml page to find a file called Index.cshtml.cs. This file has the C# code to go along with the mark-up page. You can refer to the variables, methods, etc. from this c# page in the mark-up cshtml page. This arrangement is akin to mark-up + code arrangement in any Vue/React/Svelte application. In Blazor, you can have mark-up + code in same or different files - but that is for a different day.

This structure is different from a typical MVC model that touts a distinct controller, model and view layer. These functions are present in the Razor page app, but not fashioned in MVC style.

More about the internals and workings of an ASP.net app

We are now masters of the structure of ASP.net core razor page project, and it is time to move on and see how everything comes together.

If you’re serious about your trade, you will skip this section altogether. The terms here just help you speak the same language - you will probably figure this out by yourself while building the actual app.

Routing

The Pages folder takes care of routing in our application. The files in the folder represent the URLs served by your application.

Let’s see how..

  • Privacy.cshtml is a file in the Pages folder
  • baseurl.com/privacy will request the page named ‘privacy.cshtml’ in the folder. ASP.net serves the HTML generated from the razor page.
  • Any sub-folder will also get included in the path. For e.g. a blog/Hello.cshtml is rendered on baseurl.com/blog/Hello
  • If the requested page does not exist, a ‘page cannot be found’ error is displayed by default. You can configure the application to redirect requests to any other page (e.g. index) if the page cannot be located

You can override the default routing using the @Page tag.

@page "/privacy1"

.. will enable the link to baseurl.com/privacy1 and the previously used /privacy page disappears into oblivion.

Start Tinkering

Run your app by hitting Ctrl + F5. Visual Studio opens the browser (or allows you to configure browser) and serves the application. You can see the starter page and navigate through the links provided in the scaffolded application.

You will see that any changes will require you to build/restart app. We can avoid that by executing our app in watch mode..

cd <project-folder>
dotnet run watch
]]> Reusable debounce function for Vue https://techformist.com/reusable-debounce-function-vue/ Sun, 20 Oct 2019 06:30:00 +0000 https://techformist.com/reusable-debounce-function-vue/ <p>Debounce operations in Vue using this 10 line script. Avoid loadash and friends.</p> <h3 id="what-is-debounce">What is debounce?</h3> <p>Delay and throttle operations to wait and collect user input before doing something with the input. The &ldquo;something&rdquo; can be updating another field, doing an API call, or starting a timer to self-destruct.</p> <h3 id="did-you-not-debounce-earlier">Did you not debounce earlier?</h3> <p>Yes, I did.</p> <ul> <li><a href="https://techformist.com/reusable-debounce-function-javascript/">reusable debounce function</a></li> <li><a href="https://techformist.com/allow-function-call-once-javascript/">strange throttling effect to allow function call only once</a></li> <li><a href="https://techformist.com/generators-javascript/">awkward debounce using generators</a></li> </ul> <p>But, not in Vue.</p> Debounce operations in Vue using this 10 line script. Avoid loadash and friends.

What is debounce?

Delay and throttle operations to wait and collect user input before doing something with the input. The “something” can be updating another field, doing an API call, or starting a timer to self-destruct.

Did you not debounce earlier?

Yes, I did.

But, not in Vue.

I may have 365 articles on the blog, but I never forget. [don’t look back, and don’t make faces at the computer].

Let’s reuse the reusable debounce function to make something in Vue.

Use case

We have a registration screen that has a user id, which is unique to the application. User should be able to see if an id is taken at the time of typing the id. Nothing fancy - standard web application.

Get going with global debounce function in Vue

The mixin is globally accessible, but not “truly” global. We will try to not occupy the global space - we don’t expect every other field to be debounced.

Create a mixin

A Vue mixin allows us to incorporate parts that can be reused across components. Mixins allow us to selectively use methods, directives etc. in our components. If needed we could go full-steam and register a mixin globally as well, but we will not do that today.

We will use our debounce function in a mixin so that we can just call the darn thing from wherever.

PS: We can also create a Vue plugin to promote reusability. But, as Plato once said - “why a plugin when there’s a mixin”.

// ./mixins/PgtUtilMix.js
export default {
  methods: {
    pgtDebounce(func, delay) {
      let debounceTimer;
      return function() {
        console.log("debouncing call..");
        const context = this;
        const args = arguments;
        clearTimeout(debounceTimer);
        debounceTimer = setTimeout(() => func.apply(context, args), delay);
        console.log("..done");
      };
    }
  }
};

You are now free to use the method from your components.

Mix the mixin

Create a registration form in a view aptly called Register.vue. The below example uses Vuetify, but style libraries do not matter.

<!-- ./Views/Register.vue -->
<template>
  <v-container grid-list-md text-xs-center class="pt-5">
    <v-form ref="form" v-model="validInput">
      <v-row>
        <v-col cols="12" md="6" offset-md="3" class="pt-3">
          <v-text-field
            :value="registerUserId"
            autocomplete="userid"
            label="Enter your desired user id"
            hint="Used to logging into application and has to be unique."
            :rules="[rules.required]"
            @input="setRegisterUserId"
          >
            <template slot="append">
              <v-icon color="success" v-if="validUserIdStatus==true"
                >mdi-check</v-icon
              >
              <v-icon color="error" v-else-if="validUserIdStatus==false"
                >mdi-check</v-icon
              >
              <v-icon>mdi-account</v-icon>
            </template>
          </v-text-field>
        </v-col>

        <v-col cols="12" md="6" offset-md="3" class="pt-3">
          <v-text-field
            name="password"
            autocomplete="password"
            :value="registerPass"
            label="Password"
            :append-icon="value ? 'mdi-eye' : 'mdi-eye-off'"
            @click:append="() => (value = !value)"
            :type="value ? 'password' : 'text'"
            :rules="[rules.required]"
            @input="setRegisterPass"
          ></v-text-field>
        </v-col>

        <v-col cols="12"></v-col>
        <v-col offset-lg="6" lg="3" class="pt-3 text-right">
          <v-btn outlined to="/" class="mr-3">Cancel</v-btn>
          <v-btn color="primary" @click="validateAndRegister">Sign up</v-btn>
        </v-col>
      </v-row>
    </v-form>
  </v-container>
</template>

<script>
  import Panel from "../components/Panel";
  import { mapState, mapMutations, mapActions } from "vuex";
  import PgtUtilMix from "../mixins/PgtUtilMix";

  export default {
    components: { Panel },
    data() {
      return {
        value: String,
        validInput: true,
        rules: {
          required: value => !!value || "Required."
        }
      };
    },
    mixins: [PgtUtilMix],
    computed: {
      ...mapState("authentication", [
        "registerPass",
        "registerUserId",
        "registerError",
        "validUserIdStatus"
      ])
    },
    methods: {
      ...mapMutations("authentication", [
        "setRegisterUserId",
        "setRegisterPass"
      ]),

      ...mapActions("authentication", ["register", "checkUserIdValid"]),

      validateAndRegister() {
        if (this.$refs.form.validate()) {
          this.register();
        }
      }
    },

    watch: {
      registerUserId: function(val) {
        if (val) this.checkUserIdValid();
      }
    },

    mounted() {
      this.setRegisterPass("");

      this.checkUserIdValid = this.pgtDebounce(this.checkUserIdValid, 1000);
    }
  };
</script>

Our Vuex module will be standard enough - will not bother you with all details..

..except the function that calls an API on server to check whether the user id already exists -

// ./store/authentication.js

export default {
  // .. lot of other code

  actions: {
    // .. even more  code
    checkUserIdValid({ commit, state }) {
      return HTTP()
        .post("v0/auth/checkUserIdValid", {
          userid: state.registerDetails["registerUserId"]
        })
        .then(({ data }) => {
          commit("setValidUserIdStatus", data.valid);
          // true if id not present
        })
        .catch(e => {
          console.log("error", e);
        });
    }
  }
};

And, ta da..

vue-form-debounce

Dissecting our reusable debounce

We have used a standard Vue mixin to begin with ..

<script>
  import PgtUtilMix from "../mixins/PgtUtilMix";
  <!-- ... -->

  mixins: [PgtUtilMix]

  <!-- ... -->
</script>

We could have used debounce as-is, but you may have observed one complication - our function uses context to set this. We need to retain the component context for the reusable function to work.

So, we just override the original function with our debounce function.

// ...
    mounted() {
      //  ...
      this.checkUserIdValid = this.pgtDebounce(this.checkUserIdValid, 1000);
    }

// ...

Now, whenever we call checkUserIdValid we are referring to our streamlined super-function that simply calls the underlying function after introducing a delay of 1000ms.

We can use this debounce anywhere in our application as long as we import and refer to the mixin.

]]> Centralized alert for Vuetify https://techformist.com/centralize-alert-vuetify/ Fri, 18 Oct 2019 06:30:00 +0000 https://techformist.com/centralize-alert-vuetify/ <p>Centralize all error, warning and info alerts in one place.</p> <p>I like <code>v-alert</code> and tend to over-use it. It enables us to show detailed notifications (error or otherwise) - without significantly causing user inconvenience. I find <code>v-alert</code> more suitable in my apps than using, say, popup alerts that interrupt users, or &ldquo;toast&rdquo; notifications which I find unsuitable for detailed messages.</p> <p>I use <code>v-alerts</code> to -</p> <ul> <li>display error or informational messages post an API call</li> <li>show form validation errors that cannot be shown against individual controls</li> <li>guide user action</li> </ul> <h2 id="how-do-i-alert">How do I alert?</h2> <p>Using alert in Vuetify is simple enough. Introduce this one line in your components that needs alerts.</p> Centralize all error, warning and info alerts in one place.

I like v-alert and tend to over-use it. It enables us to show detailed notifications (error or otherwise) - without significantly causing user inconvenience. I find v-alert more suitable in my apps than using, say, popup alerts that interrupt users, or “toast” notifications which I find unsuitable for detailed messages.

I use v-alerts to -

  • display error or informational messages post an API call
  • show form validation errors that cannot be shown against individual controls
  • guide user action

How do I alert?

Using alert in Vuetify is simple enough. Introduce this one line in your components that needs alerts.

<v-alert :type="dispType" :value="dispMsg" dismissible>{{dispMessage}}</v-alert>

Where should I place v-alert?

Initially I used to introduce v-alert in views or components on a need basis. This resulted in non-standard positions and confuse users in any application with more than 2 screens.

Almost immediately after my initial learning (/failing) phase, I switched to using v-alert in views and used different messages in distinct views.

<!-- Contact.vue -->
<v-alert :type="error" :value="contactError" dismissible
  >{{contactError}}</v-alert
>

<!-- Task.vue -->
<v-alert :type="error" :value="taskError" dismissible>{{taskError}}</v-alert>

This works really well especially if your users are changing screens frequently and tend to pick up work where they left off moments ago. Users can maintain context to the previous errors since the error messages are different from each other.

However, I find this rather boring to maintain. Any changes to alert will need changes in multiple places.

The next step and the natural evolution - put the alert in a different component (Alert.vue) and use that component everywhere.

<!-- Alert.vue -->
<template>
  <div>
    <v-alert class="text-center" :value="!!message" :type="type" dismissible
      >{{ alert['message'] }}</v-alert
    >
  </div>
</template>

Include this component using a simple statement in any component that needs to call alert -

<Alert :message="dispMessage" :type="dispType"></Alert>

We can either use prop as demonstrated above or use Vuex.

You know where I am going with this - it gets tedious as well. Include a one-liner in every view - give me a break.

Ergo, my current favourite design.

The centralized alert management system

Don’t get scared by the name, it’s rather simple and silly.

First, we create a alert component as before. Here’s a spicy version that works well with Vuetify 2 and has alert managed through Vuex modules-

<!-- Alert.vue -->
<template>
  <div>
    <v-alert
      class="text-center"
      :value="!!alert['message']"
      :type="type"
      dismissible
      outlined
      border="left"
      @input="closeAlert"
      >{{ alert['message'] }}</v-alert
    >
  </div>
</template>

<script>
  import { mapState, mapMutations, mapActions } from "vuex";

  export default {
    computed: {
      ...mapState("pgtalert", ["alert"])
    },

    methods: {
      ...mapMutations("pgtalert", ["setAlert"]),
      closeAlert(val) {
        this.setAlert({});
      }
    }
  };
</script>

pgtalert is a Vuex module and alert is an object that stores alert messages in the module - as you can very well deduce from the code.

We will include this Alert component in a frame (call it Panel.vue). This frame will form the basis for any view in our application.

<!-- Panel.vue -->
<template>
  <div>
    <v-toolbar flat dense>
      <v-toolbar-title class="title primary--text ">
        <v-icon v-if="icon" color="primary" class="mr-2">{{ icon }}</v-icon>
        <span color="primary">{{ title }}</span>
      </v-toolbar-title>
      <v-spacer></v-spacer>

      <slot name="toolbar-items"></slot>
    </v-toolbar>
    <Alert />
    <v-row>
      <v-col cols="12">
        <slot name="content">No content</slot>
      </v-col>
    </v-row>
  </div>
</template>

<script>
  import { mapState } from "vuex";
  export default {
    name: "panel",

    components: {
      Alert: () => import("./layouts/Alert")
    }
  };
</script>

We use Panel in our views.

<!-- Task.vue -->
<template>
  <Panel title="Tasks">
    <template slot="content">
      <TaskList></TaskList>
    </template>
  </Panel>
</template>

Now, all we have to do is to update pgtalert/alert whenever we want to display an alert.

// ./store/task.js

// lot of code

//some async op - e.g. API call
.then(({data}) => {
    doSomething(data)
})
.catch(e => {
    commit( "pgtalert/setAlert", { message: "Error." + e,
        type: "warning" }, { root: true });
})
// more code

And, ta da..

centrally-manage-v-alert-vuetify

You could also reset alerts when a subsequent transaction takes place. I find it easier to set it in a central helper function that calls Axios / fetch.

Final note

The approach described above is nothing fancy, but does a couple of good things -

  • Centralized alert management - you can change any formatting in one place and you are done
  • You don’t need to explicitly introduce this component in all views

It also has some limitations -

  • Messages get reset when other transactions trigger alerts
  • No ability to customize where messages appear (beyond where the alert component is placed in parent layout/component)
]]> Asserts are not just for testing https://techformist.com/assert-validation-javascript/ Tue, 15 Oct 2019 06:30:00 +0000 https://techformist.com/assert-validation-javascript/ <p>Assert is a general-purpose validator and should not be used in the context of testing alone.</p> <p>An assert in Javascript simply checks for truthy values and produces an error otherwise. We use it quite a bit in automated testing when checking for correctness of output for pre-defined inputs.</p> <p>We use asserts like so -</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">assert</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s2">&#34;assert&#34;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">getSum</span><span class="p">(</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">x</span> <span class="o">+</span> <span class="nx">y</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">assert</span><span class="p">(</span><span class="nx">getSum</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">)</span> <span class="o">===</span> <span class="mi">3</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="nx">assert</span><span class="p">(</span><span class="nx">getSum</span><span class="p">(</span><span class="mi">3</span><span class="p">,</span> <span class="mi">6</span><span class="p">)</span> <span class="o">==</span> <span class="mi">9</span><span class="p">);</span> </span></span></code></pre></div><p>The above code block will go through fine since there are no errors, but I am well capable of producing a few errors.</p> Assert is a general-purpose validator and should not be used in the context of testing alone.

An assert in Javascript simply checks for truthy values and produces an error otherwise. We use it quite a bit in automated testing when checking for correctness of output for pre-defined inputs.

We use asserts like so -

var assert = require("assert");

function getSum(x, y) {
  return x + y;
}

assert(getSum(1, 2) === 3);
assert(getSum(3, 6) == 9);

The above code block will go through fine since there are no errors, but I am well capable of producing a few errors.

assert(getSum(1, 2) == 4);
// AssertionError [ERR_ASSERTION]: The expression evaluated to a falsy value:

Assert statements are great for unit tests, but can be equally useful for validations and checks in our normal programs.

var assert = require("assert");

function getSum(x, y) {
  assert(!!Number(x) == true);
  assert(!!Number(y) == true);

  return x + y;
}

console.log(getSum(1, 1));
// 2

console.log(getSum("a", 1));
// AssertionError [ERR_ASSERTION]: The expression evaluated to a falsy value:
//   assert(!!Number(x) == true)

This is especially useful in places where you need to check for warnings and start throwing errors for pre-defined warnings.

Instead of an explicit if -

// code
if (warning) throw "Warning, warning";
// code

.. we can now do -

// code
assert(warning == "whatever condition", "Warning, warning");
// code

/* output
Error:
AssertionError [ERR_ASSERTION]: Warning, warning
*/
]]> Three quick ways to convert objects to arrays https://techformist.com/convert-objects-iterable-arrays-javascript/ Wed, 02 Oct 2019 06:30:00 +0000 https://techformist.com/convert-objects-iterable-arrays-javascript/ <p>Easily convert objects to arrays and iterate to your heart&rsquo;s content.</p> <p>There are multiple ways of converting an object to an array (which, also is an object but a different one at that.)</p> <h3 id="method-1-a-simple-objectvalues-method">Method 1: A simple Object.values() method</h3> <p>The first idea that comes to mind is to just use <code>Object.keys()</code>, <code>Object.values()</code> or <code>Object.entries()</code> to generate an array.</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">numO</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">a</span><span class="o">:</span> <span class="mi">1</span><span class="p">,</span> <span class="nx">b</span><span class="o">:</span> <span class="mi">2</span><span class="p">,</span> <span class="nx">c</span><span class="o">:</span> <span class="mi">3</span><span class="p">,</span> <span class="nx">d</span><span class="o">:</span> <span class="mi">4</span><span class="p">,</span> <span class="nx">e</span><span class="o">:</span> <span class="mi">5</span> <span class="p">};</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nb">Object</span><span class="p">.</span><span class="nx">values</span><span class="p">(</span><span class="nx">numO</span><span class="p">));</span> </span></span><span class="line"><span class="cl"><span class="c1">// [ 1, 2, 3, 4, 5 ] </span></span></span></code></pre></div><h3 id="method-2-apply-transformation-logic-during-object-to-array-conversion">Method 2: Apply transformation logic during object to array conversion</h3> <p>If you are going fancy about the conversion and want to include some logic therein -</p> Easily convert objects to arrays and iterate to your heart’s content.

There are multiple ways of converting an object to an array (which, also is an object but a different one at that.)

Method 1: A simple Object.values() method

The first idea that comes to mind is to just use Object.keys(), Object.values() or Object.entries() to generate an array.

const numO = { a: 1, b: 2, c: 3, d: 4, e: 5 };

console.log(Object.values(numO));
// [ 1, 2, 3, 4, 5 ]

Method 2: Apply transformation logic during object to array conversion

If you are going fancy about the conversion and want to include some logic therein -

const numO = { a: 1, b: 2, c: 3, d: 4, e: 5 };

const arr = [];

Object.values(numO).forEach(val => arr.push("a" + val));
console.log("arr: ", arr);
// [ 'a1', 'a2', 'a3', 'a4', 'a5' ]

Method 3: Use slice and call

Remember that call of one object can be used against another object? We can use this principle to call an array function against the array-like object.

getSum(1, 2, 3, 4, 5);
function getSum() {
  const arr = Array.prototype.slice.call(arguments);

  console.log(arguments);
  // { '0': 1, '1': 2, '2': 3, '3': 4, '4': 5 }

  console.log("arr: ", arr);
  // arr:  [ 1, 2, 3, 4, 5 ]
}

Method 3.1: Use Array.from()

Array.from() works for array-like iterables including objects. So, we could use them for objects that are arrays in their hearts. This works similar to the previous method in principle and therefore does not deserve a “method” by its own.

getSum(1, 2, 3, 4, 5);
function getSum() {
  const arr = Array.from(arguments);

  console.log(arguments);
  // { '0': 1, '1': 2, '2': 3, '3': 4, '4': 5 }

  console.log("arr: ", arr);
  // arr:  [ 1, 2, 3, 4, 5 ]
}

Conclusion

I prefer Object.values() (or keys/entries ) to subject an object to array-like operations (yes, I get the subject/object philosophical implications).

Array.prototype.slice() may be the best performer of the lot.

]]> A Different IIFE Syntax https://techformist.com/different-iife-syntax/ Tue, 01 Oct 2019 06:30:00 +0000 https://techformist.com/different-iife-syntax/ <p>Here&rsquo;s a different syntax for our favourite IIFE&rsquo;s.</p> <p>Immediately invoked function expressions enable us to write functions without using &ldquo;functions&rdquo;. Well - just kidding. They are functions but with a different syntax.</p> <p>A typical IIFE looks like this -</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">x</span> <span class="o">=</span> <span class="mi">1</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">y</span> <span class="o">=</span> <span class="mi">9</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">sum</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">sum</span> <span class="o">=</span> <span class="nx">x</span> <span class="o">+</span> <span class="nx">y</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&#34;sum: &#34;</span><span class="p">,</span> <span class="nx">sum</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}();</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="cm">/* output </span></span></span><span class="line"><span class="cl"><span class="cm">sum: 10 </span></span></span><span class="line"><span class="cl"><span class="cm">*/</span> </span></span></code></pre></div><p>There is another interesting syntax that is lesser known. At least it was not known at all to me-self until I came across the syntax in some library.</p> Here’s a different syntax for our favourite IIFE’s.

Immediately invoked function expressions enable us to write functions without using “functions”. Well - just kidding. They are functions but with a different syntax.

A typical IIFE looks like this -

const x = 1,
  y = 9;
var sum = 0;
(function() {
  sum = x + y;
  console.log("sum: ", sum);
}();

/* output
sum:  10
*/

There is another interesting syntax that is lesser known. At least it was not known at all to me-self until I came across the syntax in some library.

const x = 1,
  y = 9;
var sum = 0;

// prettier-ignore
!function() {
  sum = x + y;
  console.log("sum: ", sum);
// prettier-ignore
}();

/* output
sum:  10
*/

This syntax just makes use of the fact that the function is an object and so on and so forth.

As you might have second-guessed by the ‘prettier-ignore’ statements, this is not liked by Prettier. And, what is not liked by Prettier seems so unnatural.

]]> Conditionally copy props to new object in Javascript https://techformist.com/conditional-copy-objects-javascript/ Fri, 27 Sep 2019 06:30:00 +0000 https://techformist.com/conditional-copy-objects-javascript/ <p>Here&rsquo;s a shorter, readable way to copy props from one object to another subject to defined conditions.</p> <p>The shortest way to copy object (when you don&rsquo;t quite care about copying sub objects by reference) -</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">planet</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&#34;earth&#34;</span><span class="p">,</span> <span class="nx">position</span><span class="o">:</span> <span class="mi">3</span> <span class="p">};</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">newPlanet</span> <span class="o">=</span> <span class="p">{</span> <span class="p">...</span><span class="nx">planet</span> <span class="p">};</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">newPlanet</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="c1">// { name: &#39;earth&#39;, position: 3 } </span></span></span></code></pre></div><p>But, what do you do if you want to copy only <code>name</code> but not <code>position</code>?</p> <p>A common way to do that will be -</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">planet</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&#34;earth&#34;</span><span class="p">,</span> <span class="nx">position</span><span class="o">:</span> <span class="mi">3</span> <span class="p">};</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">newPlanet</span> <span class="o">=</span> <span class="p">{};</span> </span></span><span class="line"><span class="cl"><span class="nb">Object</span><span class="p">.</span><span class="nx">keys</span><span class="p">(</span><span class="nx">planet</span><span class="p">).</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">key</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">key</span> <span class="o">==</span> <span class="s2">&#34;position&#34;</span> <span class="o">?</span> <span class="s2">&#34;&#34;</span> <span class="o">:</span> <span class="p">(</span><span class="nx">newPlanet</span><span class="p">[</span><span class="nx">key</span><span class="p">]</span> <span class="o">=</span> <span class="nx">key</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">newPlanet</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// { name: &#39;name&#39; } </span></span></span></code></pre></div><p>Not bad - the code is readable and we have accomplished the task in two lines.</p> Here’s a shorter, readable way to copy props from one object to another subject to defined conditions.

The shortest way to copy object (when you don’t quite care about copying sub objects by reference) -

const planet = { name: "earth", position: 3 };

const newPlanet = { ...planet };
console.log(newPlanet);
// { name: 'earth', position: 3 }

But, what do you do if you want to copy only name but not position?

A common way to do that will be -

const planet = { name: "earth", position: 3 };
const newPlanet = {};
Object.keys(planet).forEach(key => {
  key == "position" ? "" : (newPlanet[key] = key);
});
console.log(newPlanet);

// { name: 'name' }

Not bad - the code is readable and we have accomplished the task in two lines.

But, why stop there - there is always an easier way.

And, that easy way in this case happens to be using the spread operator. We will just build on the spread operator example provided at the beginning of this post to do conditional copying of object’s props.

const planet = { name: "earth", position: 3 };

const { position, ...newPlanet } = planet;
console.log(newPlanet);
// { name: 'earth'}

In hindsight, this is no magic at all. We just used the familiar spread syntax to assign props from an object.

  • We included position as the first prop so that the variable gets position variable/value from planet
  • while the rest of planet goes to newPlanet object

I still prefer the .forEach in my code - that makes the tasks more explicit and keep everyone else in the team happy.

]]> A simpler curry for Javascript https://techformist.com/simpler-curry-notation-javascript/ Wed, 25 Sep 2019 06:30:00 +0000 https://techformist.com/simpler-curry-notation-javascript/ <p>A simpler way to do curry functions in Javascript.</p> <p>We have previously seen <a href="https://techformist.com/currying-in-javascript/">currying in Javascript</a>. A simple form and application of that concept is demonstrated below -</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">addThem</span> <span class="o">=</span> <span class="nx">add</span><span class="p">.</span><span class="nx">curry</span><span class="p">(</span><span class="mi">2</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">addTotal</span> <span class="o">=</span> <span class="nx">addThem</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&#34;addTotal: &#34;</span><span class="p">,</span> <span class="nx">addTotal</span><span class="p">);</span> <span class="c1">// 3 </span></span></span></code></pre></div><p>Or, we could avoid a external function or library and <a href="https://techformist.com/curry-using-bind-javascript/">curry using bindings</a> ..</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">add</span><span class="p">(</span><span class="nx">x</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="kd">function</span><span class="p">(</span><span class="nx">y</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">y</span> <span class="o">+</span> <span class="nx">x</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">addEm</span> <span class="o">=</span> <span class="nx">add</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">addEm</span><span class="p">(</span><span class="mi">2</span><span class="p">));</span> <span class="c1">// 3 </span></span></span></code></pre></div><p>But, there is a simpler way to get the same result.</p> <p>We just use arrow functions to collect arguments at different times.</p> A simpler way to do curry functions in Javascript.

We have previously seen currying in Javascript. A simple form and application of that concept is demonstrated below -

const addThem = add.curry(2);
const addTotal = addThem(1);
console.log("addTotal: ", addTotal); // 3

Or, we could avoid a external function or library and curry using bindings ..

function add(x) {
  return function(y) {
    return y + x;
  };
}

const addEm = add(1);

console.log(addEm(2)); // 3

But, there is a simpler way to get the same result.

We just use arrow functions to collect arguments at different times.

const add = x => y => x + y;

const addEm = add(1);
console.log(addEm(2)); // 3

We can make it more readable with a different notation to do the actual curry -

const add = x => y => x + y;
console.log(add(1)(2)); // 3

Of course, you have to rely back on the previously provided example if you don’t have all arguments in one go.

]]> Implicit return gotcha for arrow functions https://techformist.com/implicit-return-gotcha-arrow-functions/ Wed, 18 Sep 2019 06:30:00 +0000 https://techformist.com/implicit-return-gotcha-arrow-functions/ <p>Beware of using implicit returns in arrow functions.</p> <p>Consider the below example of a simple arrow function. It returns a simple variable. In the absence of any other statement in the function body, a simple mention of <code>x</code> will return the value of <code>x</code>.</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">getStuff</span> <span class="o">=</span> <span class="nx">x</span> <span class="p">=&gt;</span> <span class="nx">x</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">getStuff</span><span class="p">(</span><span class="mi">1</span><span class="p">));</span> </span></span><span class="line"><span class="cl"><span class="c1">// 1 </span></span></span></code></pre></div><p>Let&rsquo;s modify the block. We now want to return an object with the input value within it.</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">getMoreStuff</span> <span class="o">=</span> <span class="nx">x</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">x</span><span class="o">:</span> <span class="nx">x</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">};</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">getStuff</span><span class="p">(</span><span class="mi">1</span><span class="p">));</span> </span></span><span class="line"><span class="cl"><span class="c1">// 1 </span></span></span></code></pre></div><p>Oops.. We expected <code>{x: 1}</code> but got <code>1</code> because the flower brackets were treated as enclosing a function body and not an object.</p> Beware of using implicit returns in arrow functions.

Consider the below example of a simple arrow function. It returns a simple variable. In the absence of any other statement in the function body, a simple mention of x will return the value of x.

const getStuff = x => x;
console.log(getStuff(1));
// 1

Let’s modify the block. We now want to return an object with the input value within it.

const getMoreStuff = x => {
  x: x;
};
console.log(getStuff(1));
// 1

Oops.. We expected {x: 1} but got 1 because the flower brackets were treated as enclosing a function body and not an object.

To get an object, we have to do a simple change -

const getBetterStuff = x => ({ x: x });
console.log(getBetterStuff(1));
// { x: 1 }

We have used double brackets to signify that the return variable is an object (and to indicate that the flower bracket is not meant to start a function body).

Or, we could simply follow a consistent pattern of always using an enclosed function for any and all arrow functions.

const getSuperStuff = x => {
  return { x: x };
};
console.log(getSuperStuff(1));
// { x: 1 }

The last option is the safest, but is not popular with lazy folk (of which I am an active member).

]]> Use onclick event instead of 'submit' in Javascript https://techformist.com/onclick-instead-submit/ Sun, 15 Sep 2019 06:30:00 +0000 https://techformist.com/onclick-instead-submit/ <p>Use <code>onclick</code> rather than <code>submit</code> in HTML forms.</p> <p>A typical HTML form has a few fields and a button to submit the data to some back-end server. And, the typical way to do the form submission is through the <code>submit</code> method.</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">form</span> <span class="na">action</span><span class="o">=</span><span class="s">&#34;/helloMessage.php&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text&#34;</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;name&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;submit&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">form</span><span class="p">&gt;</span> </span></span></code></pre></div><p>On clicking the button, the page will submit data to <code>helloMessage.php</code>, receives any response from PHP page, and (can be configured to) displays the response. [Or, the page could redirect somewhere else based on the submission status, but we will not discuss that here]</p> Use onclick rather than submit in HTML forms.

A typical HTML form has a few fields and a button to submit the data to some back-end server. And, the typical way to do the form submission is through the submit method.

<form action="/helloMessage.php">
  <input type="text" id="name" />  


  <button type="submit"></button>
</form>

On clicking the button, the page will submit data to helloMessage.php, receives any response from PHP page, and (can be configured to) displays the response. [Or, the page could redirect somewhere else based on the submission status, but we will not discuss that here]

Each form submission therefore is followed by a page refresh, which is not a good user experience.

We can avoid the refresh by using a custom function to supply data to server and show response. We will use an event raised on button click to eliminate submit altogether.

<!-- ... -->

<button type="button" onclick="submitSomething()">Submit</button>

<!-- ... -->

Consider the below example -

<!DOCTYPE html>
<html>
  <body>
    <form style="padding-top: 3em;padding-left: 5em">
      <label for="name">Name: </label>
      <input type="text" id="name" />

  

      <button type="button" onclick="sayHello()">Submit</button>
    </form>
    <p style="padding-top: 2em; padding-left: 5em" id="helloMsg">
      Enter name and hit button to say 'hello'.
    </p>
    <script>
      function sayHello() {
        // send `submit` request to server
        console.log("hello");
        document.getElementById("helloMsg").innerHTML = `Hello, ${
          document.getElementById("name").value
        }!`;
        document.getElementById("name").value = "";
      }
    </script>
  </body>
</html>

A ‘hello’ message gets displayed on button click without a page refresh.

]]> Print a page section on button-click in Vue https://techformist.com/print-section-page-button-vue/ Fri, 06 Sep 2019 06:30:00 +0000 https://techformist.com/print-section-page-button-vue/ <p>Use a button on a Vue component to start a print dialog and print a specific section.</p> <h3 id="setup">Setup</h3> <p>We will use a small library called <a href="https://www.npmjs.com/package/vue-html-to-paper">&lsquo;html2paper&rsquo;</a>.</p> <p>First install the said library in your Vue project -</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-cmd" data-lang="cmd"><span class="line"><span class="cl">npm install vue-html-to-paper </span></span></code></pre></div><p>Add library to your code in <code>main.js</code> -</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="c1">// main.js </span></span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">Vue</span> <span class="nx">from</span> <span class="s2">&#34;vue&#34;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">VueHtmlToPaper</span> <span class="nx">from</span> <span class="s2">&#34;vue-html-to-paper&#34;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">options</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s2">&#34;_blank&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">specs</span><span class="o">:</span> <span class="p">[</span><span class="s2">&#34;fullscreen=yes&#34;</span><span class="p">,</span> <span class="s2">&#34;titlebar=yes&#34;</span><span class="p">,</span> <span class="s2">&#34;scrollbars=yes&#34;</span><span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nx">styles</span><span class="o">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="s2">&#34;https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="s2">&#34;https://unpkg.com/kidlat-css/css/kidlat.css&#34;</span> </span></span><span class="line"><span class="cl"> <span class="p">]</span> </span></span><span class="line"><span class="cl"><span class="p">};</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">Vue</span><span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="nx">VueHtmlToPaper</span><span class="p">,</span> <span class="nx">options</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="c1">// ... </span></span></span></code></pre></div><p>We will use a Vuetify example to demonstrate how this is used in Vue code, because - why not?</p> Use a button on a Vue component to start a print dialog and print a specific section.

Setup

We will use a small library called ‘html2paper’.

First install the said library in your Vue project -

npm install vue-html-to-paper

Add library to your code in main.js -

// main.js

import Vue from "vue";
// ...
import VueHtmlToPaper from "vue-html-to-paper";

// ...
const options = {
  name: "_blank",
  specs: ["fullscreen=yes", "titlebar=yes", "scrollbars=yes"],
  styles: [
    "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css",
    "https://unpkg.com/kidlat-css/css/kidlat.css"
  ]
};

Vue.use(VueHtmlToPaper, options);
// ...

We will use a Vuetify example to demonstrate how this is used in Vue code, because - why not?

Create UI elements

Create a new component or modify the existing component that will house the content to be printed. Create a button and identify the section that needs printing.

You can have the section hard-coded or fetch the content from elsewhere. We have used v-html below to render the content fetched from an external system.

<!-- PrintStuff.vue -->
<template>
  <v-card flat height="100%">
    <v-toolbar dense
      ><div class="body-2">Print Stuff</div>
      <v-spacer></v-spacer>
      <v-btn small color="primary" @click="printSection">
        <v-icon small class="mr-1">print</v-icon>Print
      </v-btn>
    </v-toolbar>
    <v-flex xs12>
      <div id="printSection">
        <span v-html="printStuff"></span>
      </div>
    </v-flex>
  </v-card>
</template>

<script>
  export default {
    methods: {
      ...mapActions("myModule", ["fetchPrintStuff"]),

      printSection() {
        this.$htmlToPaper("printSection");
      }
    },

    mounted() {
      this.fetchPrintStuff();

      // a Vuex action to get stuff to print from server
    }
  };
</script>

Now, click the button to open a beautiful print dialog with only the relevant content.

]]> Use await without async function in Javascript https://techformist.com/await-without-async-javascript/ Thu, 05 Sep 2019 06:30:00 +0000 https://techformist.com/await-without-async-javascript/ <p>How can you use <code>await</code> without an <code>async</code> function? Don&rsquo;t click or proceed further if you are not into practical jokes.</p> <p>Say, you try using <code>await</code> in a &ldquo;normal&rdquo; function or directly within a module..</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">getWeather</span><span class="p">(</span><span class="nx">loc</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">weather</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">fetchWeather</span><span class="p">(</span><span class="nx">loc</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">weather</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// SyntaxError: await is only valid in async function </span></span></span></code></pre></div><p>You receive a compilation error that <code>await</code> can be used only in <code>async</code> function.</p> <p>But, if I have to use <code>await</code> but do not want to create a separate function with its own memory space, what should I do?</p> How can you use await without an async function? Don’t click or proceed further if you are not into practical jokes.

Say, you try using await in a “normal” function or directly within a module..


function getWeather(loc) {
    const weather = await fetchWeather(loc);
    return weather;
}

// SyntaxError: await is only valid in async function

You receive a compilation error that await can be used only in async function.

But, if I have to use await but do not want to create a separate function with its own memory space, what should I do?

This question actually finds its place in the pre-defined set of interview questions from a particularly bad interviewer. So, the answer can be equally bad.

Use an ‘immediately invoked function expression’ (IIFE).

function getWeather(loc) {
  (async function() {
    const weather = await fetchWeather(loc);
  })();

  // on and on - code with no dependency on weather
}

If you are thinking by now that the whole ‘await w/o async’ thing is not really a joke, but a joke of a post - you may be absolutely right!

]]> Generate Fibonacci series using generators https://techformist.com/fibonacci-series-using-generator-javascript/ Wed, 04 Sep 2019 06:30:00 +0000 https://techformist.com/fibonacci-series-using-generator-javascript/ <p>Generate Fibonacci series with generators and feel good about yourself.</p> <p>Previously you have seen how the totally practical example of generating Fibonacci series was breathing fire with <a href="https://techformist.com/memoization-javascript">memoization</a>, and may have also come across using loops or recursion to solve the same problem. But, there is no fun in all that - this is real-life and we have to &ldquo;generate&rdquo; fun (yep, there we go again).</p> <p>If you have forgotten your schooling, here&rsquo;s the series - any number is the sum of previous two numbers (except the first two, of course).</p> Generate Fibonacci series with generators and feel good about yourself.

Previously you have seen how the totally practical example of generating Fibonacci series was breathing fire with memoization, and may have also come across using loops or recursion to solve the same problem. But, there is no fun in all that - this is real-life and we have to “generate” fun (yep, there we go again).

If you have forgotten your schooling, here’s the series - any number is the sum of previous two numbers (except the first two, of course).

fibo(5) = [1, 1, 2, 3, 5]

The question on everyone’s mind is - can we really do that using generators?

Of course, you can! I would not be wasting your bandwidth, burdening the environment with electricity to power all the servers, and wasting even more electricity for you to read this post if we could not do that.

All the fluff so far just leads to this simple algo -

function* fiboGen(fibo) {
  i = 0;
  j = 1;
  for (;;) {
    [i, j] = [j, i + j];
    yield j;
  }
}

const fibo = fiboGen();
console.log(1);
console.log(fibo.next().value);
console.log(fibo.next().value);
console.log(fibo.next().value);
console.log(fibo.next().value);
console.log(fibo.next().value);

// 1 1 2 3 5 8

The best part - you can go on and on with this logic to establish a world record for longest Fibonacci series. (I was joking - don’t try that at home).

]]> Function object and Function in an object https://techformist.com/function-object-constructor-javascript/ Tue, 03 Sep 2019 06:30:00 +0000 https://techformist.com/function-object-constructor-javascript/ <p>Previously, we have talked about all things being an object in Javascript. But to what extent can we apply this to our beloved functions.</p> <p>You can see this almost everywhere with the below syntax -</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">getSum</span> <span class="o">=</span> <span class="p">(</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">x</span> <span class="o">+</span> <span class="nx">y</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">};</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">getSum</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">));</span> </span></span><span class="line"><span class="cl"><span class="c1">// 3 </span></span></span></code></pre></div><p>We have also touched upon how function is an object and how that helps in <a href="https://techformist.com/function-of-functions-javascript/">using closures</a> and <a href="https://techformist.com/currying-in-javascript/">currying</a>.</p> <p>For now, let&rsquo;s leave all those complex things behind. Function being an object implies that we can do this -</p> Previously, we have talked about all things being an object in Javascript. But to what extent can we apply this to our beloved functions.

You can see this almost everywhere with the below syntax -

const getSum = (x, y) => {
  return x + y;
};

console.log(getSum(1, 2));
// 3

We have also touched upon how function is an object and how that helps in using closures and currying.

For now, let’s leave all those complex things behind. Function being an object implies that we can do this -

const getSum = new Function("x", "y", "{return x + y}");

console.log(getSum(1, 2));
// 3

We just define a function like we define an object, and pass variables and function body as parameters to the constructor.

You get the function object as output from a type of.

console.log(typeof getSum);
// function

However, you would also know that every object functions with a function in the form of a constructor.

const earth = { position: 3 };
console.log(typeof earth);
// object
console.log(typeof earth.constructor);
// function

console.log(typeof Date);
// function

Therefore, anything without a function is just so primitive (a silly joke and a fact(?)).

]]> Generators in Javascript https://techformist.com/generators-javascript/ Sun, 01 Sep 2019 06:30:00 +0000 https://techformist.com/generators-javascript/ <p>What are generators and how can I use them?</p> <p>How do you write loops in Javascript - Simple for/while? Recursion? In other less exciting ways?</p> <p>How do you throttle and control function execution? <a href="https://techformist.com/allow-function-call-once-javascript/">Debounce function</a>? <a href="https://techformist.com/allow-function-call-once-javascript/">Build your own</a>?</p> <p>What if you could produce the right mix of reusable functions, looping and throttling in one go? Enter generators.</p> <h3 id="what-are-generators">What are Generators?</h3> <p>Generators are functions that lets you can control iteration. You can use generators to suspend execution of a function while saving the context for continuing the execution at a later time.</p> What are generators and how can I use them?

How do you write loops in Javascript - Simple for/while? Recursion? In other less exciting ways?

How do you throttle and control function execution? Debounce function? Build your own?

What if you could produce the right mix of reusable functions, looping and throttling in one go? Enter generators.

What are Generators?

Generators are functions that lets you can control iteration. You can use generators to suspend execution of a function while saving the context for continuing the execution at a later time.

MDN defines generators as functions which can be exited and later re-entered.

Let’s understand more with an example -

function* getNums() {
  let i = 0;

  yield i++;
  yield i++;
  yield i++;
  yield i++;
}

const nums = getNums();

console.log(nums.next().value);
console.log(nums.next().value);
console.log(nums.next().value);
console.log(nums.next().value);

// 0 1 2 3

In the code block -

  1. We have defined the generator function using function* prefix
  2. We used a keyword yield indicates to Javascript that the function needs to go into sleep and return the said value
  3. Initiated the function
  4. Called the generator function multiple times - with each time stopping at the next yield to return a value

Simple enough?

What’s mondo interesting about this function is the ability to store a state without impacting the program flow. And each time we invoke the function with a next(), the state is back with a bang and execution continues as if nothing happened.

Defining generators

We can use any of the following ways to define generator functions-


function* func1() {}

function * func2() {}

function *func3() {}

let func4 = function*() {};
let func5 = function* () {};
let func6 = function *() {};

I just stick to what Prettier tells me to do.

Also, we cannot use arrow functions for generators yet.

Initializing generators

Once defined you don’t use generator functions like normal functions, instead you should initiate the generator.

const nums = getNums();

This returns an iterator, which you use like so -

console.log(nums.next().value);

The above statement returns an object at the yield statement within generator. So yield is like a return which is not a return :)

console.log(nums.next());
// { value: 0, done: false }
console.log(nums.next().value);
// 1

The done prop within the object indicates whether the generator has anything pending to do after the current yield. Consider the below example -

function* getNums() {
  let i = 0;

  yield i++;
}

const nums = getNums();

console.log(nums.next());
// { value: 0, done: false }
console.log(nums.next());
// { value: undefined, done: true }
console.log(nums.next());
// { value: undefined, done: true }

yield always returns the same object with same props.

You could technically do a return within a generator function, but any yield (or any other statement) will not execute after return.

function* getNums() {
  let i = 0;
  yield i++;
  return; // all done with second next() call
  yield i++;
}

const nums = getNums();

console.log(nums.next());
// { value: 0, done: false }
console.log(nums.next());
// { value: undefined, done: true }
Loops in a generator

No one ever said, “let’s make life complicated”. But here we are.

yield within a loop functions exactly as you would expect it to-

  • function execution starts
  • control goes into loop
  • encounters yield
  • returns the object and goes into coma
  • with the next next() control revives itself, finds itself in a loop, returns object and so on
function* getNums() {
  for (let i = 0; i < 3; i++) {
    yield i;
  }
}

const nums = getNums();

console.log(nums.next());
console.log(nums.next());
console.log(nums.next());
console.log(nums.next());

/* output
{ value: 0, done: false }
{ value: 1, done: false }
{ value: 2, done: false }
{ value: undefined, done: true }
*/
Generator chains

yield can call another generator. (And that’s really perfect since you can chain them to mess up one’s mind.)

function* getNums() {
  let i = 0;
  yield* getNumsNums();

  yield i++;
}

function* getNumsNums() {
  yield "what is life?";
  yield "what is I?";
}

const nums = getNums();

console.log(nums.next());
console.log(nums.next());
console.log(nums.next());
console.log(nums.next());

/* output
{ value: 'what is life?', done: false }
{ value: 'what is I?', done: false }
{ value: 0, done: false }
{ value: undefined, done: true }
*/

Where could generators be useful?

All we described about generators is well and dandy, but there’s no hope for them until we find a use case (or two).

Here’s what smarter people are using generators for -

  1. Generate an (almost) infinite loop that increments once every call. This is useful for use cases like sliders that keep going round and round
  2. Use generators in place of recursion. We will get back to our favourite algorithms to generate Fibonacci series and such in a bit
  3. Throttle function calls. For example, call external API for one request at a time (and that’s a totally practical scenario. Stop smirking.)
  4. Use promises within generators to have async functions with throttling! See the previous point
  5. Store states during different instances of the program life cycle, suspend and carry on with the task later. For example, generating unique ids in our algorithm
]]>