DEV Community: sambit sahoo

Opinions on The Vue ecosystem

sambit sahoo — Sat, 16 Oct 2021 08:11:13 +0000

It's been a year since Vue 3 was released. This release was hailed as a revolutionary change to the classic Vue approach as it introduced the Composition API and a complete rewrite of the Vue core in typescript. It brought many new things for developers, which included native TS support, functional API, faster performance to name a few. At first sight, the new API may seem a bit complex, but believe me, after working with Vue 3 and composition API for over a year now, I bet this is what Vue should be. When it was released last year, many developers were pretty skeptical about migrating to Vue 3 as most of the core libs were in either rc or beta . Many famous Vue component libs e.g. Quasar, Vuetify were also working on their port of Vue 3. The state of tooling i.e. Vetur, Vue CLI etc. were not reliable with partial support for Vue 3. But times have changed, the ecosystem has come a long way with most of the core libs in stable status, great upgrades to tooling and amazing contribution from the community. In this article I'll share my opinions on the Vue ecosystem and how Vue will grow to something further our imagination.

The framework

Currently, the latest Vue release is 3.2.20. There were 2 minor and multiple patch releases since it came out for the first time. IMO the framework has grown a lot in this previous year. I'll go through some of the notable features and fixes below.

`<script setup>` `3.2.x`

Script setup is a new approach to write Vue apps with composition API
Basically it assumes that you write the script block in pure composition API
From the Vue docs

<script setup> is a compile-time syntactic sugar for using Composition API inside Single File Components (SFCs). It is the recommended syntax if you are using both SFCs and Composition API. It provides a number of advantages over the normal <script> syntax:

More succinct code with less boilerplate
Ability to declare props and emitted events using pure TypeScript
Better runtime performance (the template is compiled into a render function in the same scope, without an intermediate proxy)
Better IDE type-inference performance (less work for the language server to extract types from code)
e.g.

So this becomes

<script>
import { ref } from "vue"
export default defineComponent({
  setup() {
    const someVar = ref('')

    return {
      someVar
    }
  }
})
</script>

this

<script setup>
import { ref } from "vue"

const someVar = ref('')
</script>

notice the reduction in boilerplate. Also there are macros for defining props, emits, expose and default props. e.g.

<script setup lang="ts">
import { ref } from "vue"

withDefaults(defineProps<{
  someProp: string
}>(),{
  someProp:'someValue'
});

defineEmits<{
  (e:'some-event', val: string): void
}>()

const someVar = ref('')
</script>

The above code snippet is declarative, looks clean, easy to read and understand. It's also easy for extensions to provide near-to-native TS intellisense. Learn more about this feature here

State driven style binding `3.2.x`

Now it's possible to bind your component state to css values inside <style> blocks
e.g.

// from vue docs
<template>
  <div class="text">hello</div>
</template>

<script setup>
import { ref } from "vue"

const color = 'red'
</script>

<style>
.text {
  color: v-bind(color);
}
</style>

This brings a lot of new possibilities to design components by making it easier and cleaner to manipulate CSS based on state. Learn more here

Performance imorovements

The reactivity internals is improved
Now effects consume less memory and give better performace
There are also some improvements in ref track/trigger
see this PR for more info

These were some of the major changes/improvements that had an impact on my development experience. There are many other changes which improved the framework as a whole. Please see vue changelogs for more info. In my opinion the new API and coding approach make Vue more intuitive and approachable for beginners and I hope more and more developers will choose Vue for their projects. During my time with Vue I found it really enjoyable to write code and more specifically in Typescript as the support is near to the standards of React. I also write react a lot and believe me, the experience is indifferent.

Core libraries

Vue-router `4.x`

API is stable and similar to previous version
New API follows the same functional approach as Vue 3
Also has composition API helpers or composables
Introduces small breaking changes

Vuex `4.x`

API is stable and similar to previous version
New API follows the same functional approach as Vue 3
Also has composition API helpers or composables
Introduces small breaking changes

Vue test utils `2.x`

Currently in rc
Small breaking changes

Third party frameworks and libraries

Nuxt `3.x`

Public beta
Complete re-write in TS
New server engine
New CLI
First class vite support
Upto 75x smaller server deployments

Quasar `2.x`

Stable API
Webpack 5
Regular minor and patch releases

Vuetify `3.x`

Currently in alpha
target release Feb 2022

VueUse

Collection of essential Vue Composition Utilities
Supports Vue 2 and 3

VeeValidate `4.x`

Stable API
Vue 2 support via v3.x

Other famous existing libs are currently supporting Vue3 while some of them are still in progress. TBH the vue community was really fast in adapting the new API and most of them almost did a complete rewrite with the new API. It's a really good sign and motivates developers like me to adopt the new API and write clean, declarative and functional code. Many new component libs have also come out with exclusive support for Vue 3. It makes me really happy that if someone decides to use Vue 3 in their application, there is a vast number of stable, maintained libs available to use.

Tooling

Vue CLI `5.x`

Currently in beta
Webpack 5
New cli plugins
many other breaking changes

Vue Devtools `6.x`

Currently in beta
New Timeline API for inspection
Supports vue-router, vuex via plugins with new plugin API
regular minor and patch releases

Vite `2.x`

Vite is a fast frontend tooling which works on native ESM for dev server with esbuild as its bundler
It has a pre-optimized and opinionated preset for production builds based on Rollup which is an amazing lib in itself
Supports Vue out of the box with @vitejs/plugin-vue
It's created by Evan You, the creator of Vue
With a great Plugin API, vite has many useful plugins for alomost every use case
It's framework agnostic and also supports SSR

Volar `0.x`

Currently the Best language support implementation for Vue 3
Near to native TypeScript and Javascript intellisense
Supports <script setup> out of the box
Many other useful features which improves DX
Type checking of .vue files in terminal via vue-tsc
Improves really fast, as an early user I can confirm that
Maintained really well, most of the issues get resolved within 2-3 days

Vetur is also in the works to support Vue 3 but it's not that good. IMO, tooling has improved the most. These improvements and regular updates have made it possible to get started quickly while having excellent DX. Give it a try, you'll be amazed by the DX that Vue provides these days.

Community

Again this year Vue community has grown a lot. Many new useful libs were released and are also maintained properly. The vue-next repo or the Vue core releases patches frequently and same goes with other core libs. In my observation, many developers are contributing to the framework now and the participation only grows day by day. This change assures that Vue is and will continue to improve itself.

Final words

Vue has come a long way since it's first release. If you consider Vue 3, it's in a great shape. Many apps are being built, I can say that confidently as many issues are being opened every day, vast participation from developers in github discussions etc.IMO, The Vue ecosystem is fairly complete. I claim it because I'm a regular consumer of the ecosystem. Many React developers argue that vue files look bloated in comparision to react, I request them to use Vue 3 and re-consider their opinion. They also argue that it's comparatively slow and the DX is really bad, again I request them to try the new tooling. IMO the word community is very broad, it doesn't only mean maintainers, contributors and developers. Companies who use these frameworks and the authroties who decide what to use are also a part of the same community. A piece of software will only grow and become robust when more companies use them and decide to train their developers to use the same. By doing this they can help the framework grow while producing great trained engineers. So I request new startups, companies to consider Vue as your next frontend framework to build your product, and by doing so you'll be helping a framework grow and community too.

I know that many points were missed, but this was just my opinion and I tried to convey this with least no. of points, please comment your siggestions. Thanks for reading ✌️. Peace ☮️

published in my blog

State of State management in Vue

sambit sahoo — Wed, 14 Jul 2021 03:07:23 +0000

While developing a middle to large scale project, you'll need some kind of global state down the road and to organise and manage the state you may go for some state management library. If we compare the current state management libraries across various front-end frameworks, there are multiple options to choose from. Every library is built upon a specific philosophy to solve a specific problem. TBH I think it should be pattern instead of philosophy. Among these patterns the Flux pattern/architecture is quite common and has been implemented in Vuex and Redux, and both of them are quite popular in their framework scope.

Vuex is the preferred and go to state management setup while working with Vue applications. It's actively maintained by the Vue core team and the major v4 of the library just went stable a few months ago. If we look from the Flux point of view I think vuex implements the pattern as effectively as possible and they also did a great job with the API. I mentioned as effectively as possible because Flux by design brings some limitations and same goes for vuex too. Let's have a look at the current limitations with Vuex that I faced frequently

Typescript support

This is a quite common issue which many developers face. Some might say it's a trivial issue but I feel that DX should be good regardless of the language and it should be definitely good when there is scope for improvements. Let's have a brief look at the issue.

// in store.ts
const store = createStore({
  state() {
    return {
      count: 0, 
    };
  },
  mutations: {
    increment(state) {
      state.count++; // types will be inferred
    },
  },
  getters: {
    doubled(state) {
      return state * 2; // types will be inferred
    },
  },
});

<!-- in component.vue -->
<script>
export default {
  computed: {
    ...mapGetters({
      doubled: 'doubled', // types will not be inferred
    }),
    getDoubled(): number {
      return this.$store.getters.doubled; // specifying return type
    },
  },
};
</script>

Without specifying the return type, we won't be able to get intellisense from the IDE. This is quite cumbersome while working with ts. There is really no way in vuex to get type inference without complex setup.

Mutations and Actions as string

While dispatching an action or committing a mutation, there are two approaches as mentioned below

<script>
export default {
  methods: {
    ...mapMutations({
      increament: 'increament',
    }),
    inc() {
      this.$store.commit('increment');
    },
  },
};
</script>

Same goes here too, there is a plenty of room to make mistakes while committing a mutation. We can misspell the mutation/action and boom, there is an error. By design Vuex doesn't allow us to restrict/type the mutation/action and thus making the app more prone to errors and bugs.

Nested and namespaced modules

I never liked the concept of namespaced modules. It's really difficult after a certain scale to manage many files i.e. state, mutation, getters, actions etc. for different modules. It's also quite verbose while consuming namespaced modules, I don't like it and most people don't I think.

There are some of the issues I faced frequently while workng with vuex. Before Vue 3 was released, there wasn't any concrete solution to these above mentioned issues. Vue 3 brought composition API and oh boy, that alone solved most of the issues. Pinia is an appropriate implementation of the new API for state management and it addresses the issues with vuex quite effectively and offers great DX.

Pinia takes a very functional approach to write and consume global state in Vue. It's really simple and intuitive to write and read. e.g.

// from pinia docs
// in ts types will be inferred automatically
import { defineStore } from 'pinia'

export const useTodoStore = defineStore({
  id: 'todos',
  state: () => ({
    /** @type {{ text: string, id: number, isFinished: boolean }[]} */ // for js files
    todos: [],
  }),
  getters: {
    finishedTodos(state) {
      // autocompletion! ✨
      return state.todos.filter((todo) => todo.isFinished)
    },
    unfinishedTodos(state) {
      return state.todos.filter((todo) => !todo.isFinished)
    },
  },
  actions: {
    // any amount of arguments, return a promise or not
    addTodo(text) {
      // you can directly mutate the state
      this.todos.push({ text, id: this.nextId++, isFinished: false })
    },
  },
})

to consume just call the function, this can be also called inside normal ts/js files

  setup() {
    const { finishedTodos } = useTodoStore(); // full type support
  },

The functional approach allows IDEs to provide rich intellisense and it's also easier to work with. There is also official devtools support and from my experience that works great. The API is very similar to Vuex 5 as it was designed to test a proposal for the same. Learn more about pinia here.

Now we come to the question do we really need a state management library ? With the new composition API it's pretty easy to achieve the same results with just a few lines of code. Let's see how. Just a disclaimer, this won't provide the DX and reliability of libraries like pinia as a lot goes into writing a library. This is one of the many approaches that can possibly fulfill the needs.

We'll be using Vue 3's provide/inject API and due to composition API, a global provider can be reactive and can be watched for changes as well. Let's see how

// from furikaeru
//types
type AlertAPI = {
  set: (alert: Alert) => void;
  remove: (id: string) => void;
  alerts: ComputedRef<Alert[]>;
};

const AlertKey: InjectionKey<AlertAPI> = Symbol();

const alerts = ref<Alert[]>([]);

export const getAlerts = computed(() => readonly(alerts.value));

export interface Alert {
  message: string;
  icon?: string;
  id?: string;
  type: 'success' | 'danger' | 'warning';
}

export function setAlerts(alert: Alert) {
  if (alerts.value.find((el) => el.message === alert.message)) return;
  alerts.value.push({ ...alert, id: uuid() });
  setTimeout(() => {
    if (alerts.value.length > 0) {
      alerts.value.shift();
    }
  }, 5000);
}

export function removeAlert(id: string) {
  const alertIndex = alerts.value.findIndex((el) => el.id === id);
  if (alertIndex === -1) return;
  alerts.value.splice(alertIndex, 1);
}

export function useAlert() {
  return inject(AlertKey) as AlertAPI;
}

As we can see above, the useAlert composable returns the reactive alert state and some methods to mutate it. The methods can also be promises too. The reactive instance is being provided to the app instance and can be injected with the composable. This is being used in production in Furikaeru and works like a charm. This can be extended to provide many functionalities and sky is the limit for improvements.

I like the way Vue is moving towards a functional style of writing apps and it's really great. Thanks for reading. Peace 💚

Paytm payments for serverless websites.

sambit sahoo — Mon, 17 Aug 2020 07:51:30 +0000

Paytm-Netlify-Lambda 🚀

Paytm payments integration for serverless JAMstack websites using Netlify lambda functions. This repo will save you from the nightmare of setting up a serverless payment integration from scratch.

🚀 It's live here

💥 GitHub repo is here

📑 Table of Contents

🔰 Getting Started
📐 Setup
- 🌱 Basic Setup
- 🔥 Usage with Firebase
🗜 Integration
📓 Notes
- 🤓 How it Works ?
- 🌋 Errors
- 📔 References

Getting Started

To get started clone this repo.

git clone git@github.com:soulsam480/paytm-netlify-lambda.git

cd paytm-netlify-lambda

npm install

To serve the lambda functions locally we can run

npm run start

But before that we have to setup the functions otherwise there will be errors!!

Setup

Open the repo in your favorite text-editor and the file structure will be like this

config
dist
src
- cred
- paytm
  - checksum.js
  - crypt.js
  - paytm_config.js
  - paytmChecksum.js
- payConf.js
- payment.js

Webpack cofig sits inside the config folder. All our functions will be build into the dist folder. So it's good if we don't touch that folder.

Basic Setup

Open paytm_config.js inside the paytm folder.

module.exports = {
  paytm_config: {
    PAYTM_ENVIRONMENT: "TEST", //possible values:  TEST | PROD
    MID: " Your MID", // Get it From https://dashboard.paytm.com/next/apikeys use Test id for test purpose and Production id for Production Purpose
    WEBSITE: "WEBSTAGING", // USE WEBSTAGING for testing, You Will get it for Production here https://dashboard.paytm.com/next/apikeys
    CHANNEL_ID: "WEB", // Use WEB for Desktop Website and WAP for Mobile Website
    INDUSTRY_TYPE_ID: "Retail", // Use Retail for Testing, For Production You Can Get it from here https://dashboard.paytm.com/next/apikeys
    MERCHANT_KEY: " Your MERCHANT_KEY", // Get it From https://dashboard.paytm.com/next/apikeys use Test key for test purpose and Production key for Production Purpose
    CALLBACK_URL:
      "https://your_unique_site_id.netlify.app/.netlify/functions/payConf", // Modify and Use this url for verifying payment
  },
};

Change the MID and Merchant Key to your paytm merchant account. The callback url will be updated after you have deployed these functions to netlify. So we will leave it as it is. Again if you wish to change the parameters for production build, the respective fields will be changed with the production credentials.

If you don't wish to use firebase for order validation and confirmation, you can stop here and remove firebase completely from the project. If you wish to use, let's move in to the next step.

Usage with Firebase

We will use firebase-admin sdk for nodejs to access admin privilages. With firebase admin running on server we can perform CRUD operations on realtime database easily.

To setup admin sdk you need a firebase service account. To get yourself one open you firebase admin dashboard and then project settings > service accounts. Create one for your project and download the credentials in json. Then open src/cred/authKey.js . Add the credentials in their respective places.

module.exports = {
  authKey: {
    type: "service_account",
    project_id: "Your Project id",
    private_key_id: " Your PRIVATE_KEY_ID",
    private_key: "Your PRIVATE_KEY",
    client_email: "Your client email",
    client_id: "Your client id",
    auth_uri: "your auth uri",
    token_uri: "auth token uri",
    auth_provider_x509_cert_url: "cert url provider",
    client_x509_cert_url: " your CERT_URL",
  },
};

Then open src/payConf.js and add your database URL. With this the setup is complete.

After each successful payment firebase-admin will create an order inside

Orders/dd_mm_yy(current date)/orderId

this could be further used to verify an proceed with the payment. This is the only advantage of using firebase inside this project. If you don't wish to verify your orders, you can drop firebase completely and move on with the basic approach.

As the setup is complete you can deploy this project to netlify by pushing the code into an it repo. The instruction on how to deploy from a git repo is here

There are two methods to integrate these functions to your project.

Integration

This method makes a POST request to the api and creates and submits the form clent-side in browser.
Let's move further for a good explanation.

To make API calls you have to pass these parameters inside the body of your post request. Here is an example using axios.

axios({
        method: "post",
        url:
          "https://your_unique_netliy_appname.netlify.app/.netlify/functions/payment",
        data: {
          amount: payment amount, //must be an integer Mandatory
          name: "customer_name", // _ is allowed.no space allowed inbetween. ex. Sambit_sahoo
          email: "customer_email", //valid customer email
          orderid: "Order_id", //mandatory.no space allowed inbetween ex. OD123231 or OD_12324
          mobile: "customer_mobileno",
        },
        headers: {
          "Content-Type": "application/json",
        },
      })
        .then(async (res) => {
          console.log(res);
          const params = res.data.params;
          params["CHECKSUMHASH"] = res.data.checksum;

          //Here the helper function post.js creates the from api response and submits.

          post({
            action: res.data.action,
            target: "_self",
            params: params,
          });
        })
        .catch((err) => {
          window.alert(err);
        });

Here is the helper function which creates and submits the form client side inside browser.

//This plugin is used to perform form action request from jsvascript.
//This is derived from https://github.com/jisaacks/react-post/blob/master/src/post.js
function isDate(val) {
  // Cross realm comptatible
  return Object.prototype.toString.call(val) === "[object Date]";
}

function isObj(val) {
  return typeof val === "object";
}

export function stringifyValue(val) {
  if (isObj(val) && !isDate(val)) {
    return JSON.stringify(val);
  } else {
    return val;
  }
}

function buildForm({ action, target, params }) {
  const form = document.createElement("form");
  form.setAttribute("method", "post");
  form.setAttribute("action", action);
  form.setAttribute("target", target);

  Object.keys(params).forEach((key) => {
    const input = document.createElement("input");
    input.setAttribute("type", "hidden");
    input.setAttribute("name", key);
    input.setAttribute("value", stringifyValue(params[key]));
    form.appendChild(input);
  });

  return form;
}

export default function post(details) {
  const form = buildForm(details);
  console.log(form);
  document.body.appendChild(form);
  form.submit();
  form.remove();
}

Again after a successful payment you will be redirected to the page sent from the payment confirmation function i.e. payConf.js.

To change your response URLs
go to line 89 for payment success URL, line 93 and 96 for Failure URL.

Notes

This project is an wrapper and improvement over the project created by Satyam. You can find the github repo here. He implemented this approach using firebase cloud functions.

How it Works

Netlify functions are AWS lambda functions which return a callback for an API request. I originally intended to implement this approach without experess.js. But I ran into many errors and couldn't figure a way out. So i went with the Express way 😂.

When you hit the payment endpoint with the data inside a POST request, it generates a checksum for the provided orderid using paytm's generate checksum logic. After successful generation it responds with the credentials for the payment page. The response from the promise by axios is used to create the HTML form by the elper function post.js and submitted immediately.

After Successful payment, your callback function which is src/payConf.js verifies the status of the transaction from paytm transaction status api through an unique signature. after successful verification, the callback function creates an order on your firebase database and responds with your payment succes page url.

Errors

I have handled most of the errors 😌. Still there is always a bug 🐛. If you ran into any issues try using console.log() to find and fix the error by using google. If you don't find any way reach me here. I'll be happy to help 👏🏼👏🏼 !!

References

Links to some of the resources that helped me create this project.

Satyam's Repo 👏🏼
His post on his approach 👌🏼
Netlify Lambda Repo For improvements and bugs. 🐛
Serverless HTTP For more bugs 🐛🐛
Netlify Functions For reference 🎇
Paytm Documentation For more reference 🎇🎇

I'm not good at writing documentations. So if i missed something and you ran into an unknown issue please reach me on

mail 📧 / twitter 🕊 / instagram 🖼

Thank You! ✌🏼

The best news PWA just got better !!

sambit sahoo — Mon, 06 Apr 2020 16:32:27 +0000

What is Headliner ?

It's a progressive web app(PWA) which collects news articles from API and RSS Feeds. visit Headliner. The category pages are RSS news aggregators that collect and show news articles from various news providers.

How it does what it does?

Headliner>

It uses the javascript fetch() API to get information from an API endpoint. It makes async requests instead of using the traditional XMLHttp request. The information from the API gets transformed into a JSON object. As the news articles come as a js array it's easy to map them to HTML elements using js array method map().

fetch(url)
      .then(resp => resp.json()) // Transform the data into json
      .then(function (data) {
        let news = data.articles;
        return news.map(item => {
          let li = createNode("li"),
              h4 = createNode("h3");
              p2 = createNode("p");
              img = createNode("img");
              link = createNode("a");
              line = createNode("span");
              link2 = createNode("a")
              link3 = createNode("a")

The mapped elements with the information get injected into the browser DOM using the javascript DOM API CreateElement() to create the elements and appendChild() to append them to Browser DOM. It's done by two js functions:

function createNode(element) {
          return document.createElement(element); // Create the type of element you pass in the parameters
        }

 function append(parent, el) {
          return parent.appendChild(el); // Append the second parameter(element) to the first one
        }

Category Pages>

Category pages use Feddnami A lightweight Javascript client for downloading RSS/Atom feeds. After downloading the RSS feeds it uses the same method as headliner to create and append elements to browser DOM. 😎.

feednami.load(url, function(result) {
          if (result.error) {
            console.log(result.error);
          } else {
            var entries = result.feed.entries;
            for (var i = 0; i < entries.length; i++) {
              var entry = entries[i];
              console.dir(entry);
              return entries.map(entry => {
                console.log(entry.link)

Features:

News Categories 📰

Headliner has news articles categorized in 3 main streams. Which are General News, Technology, and Lifestyle. This solution makes the user experience smooth by eliminating the dilemma of choosing from a plethora of categories. In each of the main category pages, there is an explore option in the feature menu to read articles from other news providers.

Blazing fast load time 🚀

With 2s 😎 of loading time as evaluated on Lighthouse, headliner loads blazing fast. In very slow networks or when the device is offline, it shows an offline page using the PWA service worker.

PWA 🔥 🚀

According to the PWA standards, this uses the manifest.json and serviceworker. The service worker gets installed on load and the custom add to home screen prompt is shown

 //the code for custom add to home screen prompt
  var deferredPrompt;

  window.addEventListener("beforeinstallprompt", function (e) {
    // Prevent Chrome 67 and earlier from automatically showing the prompt
    e.preventDefault();
    // Stash the event so it can be triggered later.
    deferredPrompt = e;

    showAddToHomeScreen();
  });

  function showAddToHomeScreen() {
    var a2hsBtn = document.querySelector(".ad2hs-prompt");

    a2hsBtn.style.display = "block";

    document.getElementById("add").addEventListener("click", addToHomeScreen);
  }
  function addToHomeScreen() {
    var a2hsBtn = document.querySelector(".ad2hs-prompt"); // hide our user interface that shows our A2HS button
    a2hsBtn.style.display = "none"; // Show the prompt
    deferredPrompt.prompt(); // Wait for the user to respond to the prompt
    deferredPrompt.userChoice.then(function (choiceResult) {
      if (choiceResult.outcome === "accepted") {
        console.log("User accepted the A2HS prompt");
      } else {
        a2hsBtn.style.display = "none"; // Show the prompt

        console.log("User dismissed the A2HS prompt");
      }

      deferredPrompt = null;
    });
  }

Accepting which will let users install it as a PWA. Headiner also runs offline. It shows an offline.html page when the internet is shut off.

Dark Mode 🔥

Yes, Headliner has it's own dedicated dark mode. By one toggle at the top it switches to dark mode for better reading comfort.

 const body = document.body;
  function dToggle() {
    body.classList.toggle("darkmode");
  }

Social Sharing 💬

Headliner also lets users to share articles on various social networking platforms like whatsapp, facebook etc. It uses the web API navigator.share() which invokes the native sharing dialouge.

if (navigator.share) {
navigator.share(
{title:'" + entry.title + "',
text:'shared from Headliner',
url: '" + entry.url + "',
}).then(() =>
console.log('Successful share')).catch((error) => 
console.log('Error sharing', error));}

Thank You.

Headliner is developed as a hobby project of mine. This is not monetized or commercialized as all the news articles are the sole property of their providers. This as an Open Source project and I'm inviting all to suggest and contribute to the app. Feel free to fork the Github Repo 😄 ✌️. for any help or suggestions drop a mail.

A learning timeline for python beginners.

sambit sahoo — Fri, 27 Dec 2019 15:37:27 +0000

Python has been making headlines since it's advent. It's everywhere nowadays. The simplicity to write complex code and the parallel learning curve has made it the most sought after programming language. Its application can be extended to various domains such as Web development, Machine learning, Artificial intelligence and much more.

Python is extremely easy to learn and for people new to programming it's a piece of cake. The demand for good python programmers is getting skyrocketed. This is the high time to learn python and achieve expertise.

After mastering the basic concepts you can choose any of the domains of python programming which are Machine Learning, Artificial Intelligence, and Data Science. These are the most popular domains but the application of python is extended to many fields.

I'm also a beginner of python. I have started learning python just a while ago. Javascript is my favorite language and I have been using it since the beginning. The simplicity and functionality of python forced me to try this out. Here is my timeline for getting started with programming in python. I will divide this into two categories of readers who are

with a legit setup (Laptop etc.)
Learning with Smartphones.

Guys with Smartphones (we are on the same boat ☺️☺️).

Programming on a smartphone is troublesome but it's still intuitive. There are many android apps that offer very functional features to practice coding. If we can tailor a timeline for learning and practicing code on smartphones, the whole learning process will be a piece of cake. For every beginner the only factor which plays a big role is CONSISTENCY. If you are not consistent, you won't go anywhere with programming. There will be times when using a smartphone for coding will demotivate you but if you march on ahead with interest, you could gain a lot of knowledge.

The Timeline

When we try to learn a new language, it's always better to learn the basics and practice thoroughly to get a good command over the basics. Basics will become the foundation for more complex and advanced programming in the future.
Android users download Sololearn . Open the app and register using your email id. Move forward to the learn section and from programming languages select Python.
I prefer sololearn for basics because it focuses on simplicity rather than complex teaching methods. After each lesson, there is a little assignment/question for quick practice for the lesson.
After completing all the basic concepts from Sololearn, head over to Practice Python and start doing the beginner assignments. The platform also provides solutions for every assignment so it's easy to perform all the assignments.
How to practice: Open Sololearn and move to the code section. Click on the plus icon and select python. For doing basic programming this is the best portable platform. After putting all of your code, hit run.
Get over all the assignments and return back to sololearn. Then continue with the course. As you have a strong command on basics, moving will not be that much hard.
After you pass through functions, try to build something using all the knowledge you have gathered so far. eg. a calculator, a guessing game, etc.
Link to an awesome video on youtube by freecodecamp : Learn Python by Building Five Games - Full Course freeCodeCamp.org. Here is a recommendation to some ideas to build something using the knowledge you have gained so far.
Another video form freecodecamp on youtube : Learn python in 4hrs. for speed learners. Not exactly in 4hrs. but you can complete it in a week if you are determined.
After completing all the basics and assignments you can move forward to focus on a specific domain on programming with python. You can take on machine learning, AI, Automation, Data Science, Deep Learning Algorithms and etc.
Best of LUCK!!

Guys with legit Setups (Fortunate folks!!)

having a laptop or any like device may speed up the process after you pass through the basics. During learning the basics, the experience with smartphones is the same as of setups. I have started programming from a smartphone. Having a setup can also boost the motivation needed to get going with the learning process. The mantra for success is the same as that of the smartphone users which is CONSISTENCY. So, gather up some confidence and let's start.

The Timeline

As laptop/desktop users have the convenience of running their code in an IDE, it's better to know how to set up the environment for doing the same.
Head over to this link and download python. If you are on windows download the windows release and for mac download the appropriate one.
After the download is finished hit install. Once the installation gets completed go to python IDLE ( Integrated Development and Learning Environment). This is the place where we will be running our code.
For speed learning video lectures have always been the best option. As we are on the setup we can learn and run our code side by side.
The same video from Freecodecamp : Learn python in 4hrs is amazing. The instructor has a very good way of teaching concepts. Download this video to your local machine and start.
The instructor is using PyCharm as his IDE. He also has a guide for setting up the same environment as his in that video too. Follow that one if you want the same IDE as of him.
During learning the concepts try manipulating the code on the video and experiment. You have the setup and you gotta do it !!
Also start doing assignments from Practice Python and try to find more assignments on google after completing the basic ones.
Link to an awesome video on youtube by freecodecamp : Learn Python by Building Five Games - Full Course freeCodeCamp.org. Here is a recommendation to some ideas to build something using the knowledge you have gained so far.
After completing all the basics and assignments you can move forward to focus on a specific domain on programming with python. You can take on machine learning, AI, Automation, Data Science, Deep Learning Algorithms and etc.
Best of LUCK !!

Ending this post by a great Quote

If you are not doing mistakes, you are not learning enough.

Always build something with the knowledge because as long as you will use it, it will only get polished more and more. Thanks for reading. Peace !! 🤘🤘

My portfolio website.

sambit sahoo — Fri, 29 Nov 2019 18:26:29 +0000

I had came to know of static site generators long ago. There are a lot of very good static site generators for running a blog or a simple portfolio site. But every other generator has it's own set of problems. Jekyll is too complex to start because it needs a base knowledge of ruby. Hugo is very good for speed and performance but it's based on Golang which is not comfortable for beginners.

After all these research and analysis, i had made up my mind not to go for a static site generator. I'm a beginner developer and i mainly specialize in Javascript. I have started learning Vuejs last year and right now i have a good knowledge and understanding of it. I love to code using Vue because of the simplicity of using components and JSX syntax. It's similar with HTML and learning Vue is too easy as compared to other front end frameworks.

Recently when i was scrolling through Dev.to articles, i read about Nuxtjs. It's based on Vue and it's so feature rich that it takes vue to another level. I got interested and started googling for static ste generators built on top of Nuxtjs. I found a repository by Code-tribe which was a blog based on Nuxtjs and Netlify cms. Articles are stored as a markdown file inside the blog and because it is based on Nuxtjs, it's rendered server-side which makes it crazy fast and lodes in about 1 second.

I forked the repository and as it's open source i started to work on it. I tweaked some problems and added some features like a more robust navbar and darkmode. My portfolio is based on it and it's currently live on sambitsahoo2.cf which is hosted on Netlify.

In thee process of understanding the code of the original project i learned a lot about Nuxtjs and Netlify cms as the site's back-end is based on it. I have also gone a step forward and converted the site to a Progressive Web App (PWA). The website is a SPA which makes it awesome to work as a PWA. The site offers an average load time of around 2 seconds which is also awesome for good reader experience.

I'm going to merge my Headliner project with my portfolio so that the site can offer more value.

Thank You for reading. Peace!!

A PWA to fetch news headlines from news APIs.

sambit sahoo — Sun, 10 Nov 2019 05:17:25 +0000

I have created a progressive Web app for fetching news headlines from two APIs which are NewsApi.org and Newyork times API.

I have used javascript fetch(url) method to hit the Api endpoint.
The response comes as a json object. The news articles from the json object are then converted to an javascript object. The javascript object then gets mapped to an html unordered list to show the news articles as distinct posts.

In the second update I have added the feature to show images received from the APIs.

I have created a javascript function createNode() to create html elements
and the data gets mapped using javascript map function.

Today in the third update i have aaded a button to the actual news article from the news provider.

Tge link to the website is

https://soulsam480.github.io/headliner/index.html

Visit the site and the github repo is available on

https://github.com/soulsam480/headliner

DEV Community: sambit sahoo

Opinions on The Vue ecosystem

The framework

<script setup> 3.2.x

State driven style binding 3.2.x

Performance imorovements

Core libraries

Vue-router 4.x

Vuex 4.x

Vue test utils 2.x

Third party frameworks and libraries

Nuxt 3.x

Quasar 2.x

Vuetify 3.x

VueUse

VeeValidate 4.x

Tooling

Vue CLI 5.x

Vue Devtools 6.x

Vite 2.x

Volar 0.x

Community

Final words

State of State management in Vue

Paytm payments for serverless websites.

Paytm-Netlify-Lambda 🚀

📑 Table of Contents

Getting Started

Setup

Basic Setup

Usage with Firebase

Integration

Notes

How it Works

Errors

References

The best news PWA just got better !!

What is Headliner ?

How it does what it does?

Headliner>

Category Pages>

Features:

News Categories 📰

Blazing fast load time 🚀

PWA 🔥 🚀

Dark Mode 🔥

Social Sharing 💬

Thank You.

A learning timeline for python beginners.

Guys with Smartphones (we are on the same boat ☺️☺️).

The Timeline

Guys with legit Setups (Fortunate folks!!)

The Timeline

My portfolio website.

A PWA to fetch news headlines from news APIs.

`<script setup>` `3.2.x`

State driven style binding `3.2.x`

Vue-router `4.x`

Vuex `4.x`

Vue test utils `2.x`

Nuxt `3.x`

Quasar `2.x`

Vuetify `3.x`

VeeValidate `4.x`

Vue CLI `5.x`

Vue Devtools `6.x`

Vite `2.x`

Volar `0.x`