DEV Community: Aveek Saha

Automatically update your GitHub profile with your latest dev.to post

Aveek Saha — Sun, 03 Apr 2022 09:51:47 +0000

Introduction

Your GitHub profile page is the face of your GitHub presence and recently there have been a lot of interesting ways to make your profile stand out.

One way you can make your GitHub profile unique is by automatically updating it with a summary of your most recent DEV.to blog post, and that's what I'll be showing you how to do in this post using blog-box.

The whole process requires no code, and minimal setup so you should have it up and running in no time!

Aveek-Saha / blog-box

📝 Update a gist to show your latest dev.to post.

blog-box

📝 Update a pinned gist to show your latest dev.to blog post

📌✨ For more pinned-gist projects like this one, check out: https://github.com/matchai/awesome-pinned-gists

Setup

Prep work

Create a new public GitHub Gist (https://gist.github.com/)
Create an access token with the gist scope and copy it. (https://github.com/settings/tokens/new)
Get your Dev.to user name (https://dev.to/settings)

Project setup

Fork this repo
Go to the repo Settings > Secrets
Add the following environment variables:
- GH_TOKEN: The GitHub access token generated above.
- GIST_ID: The ID portion from your gist url: https://gist.github.com/Aveek-Saha/8335e85451541072dd25fda601129f7d.
- DEV_USERNAME: Your Dev.to account username.

Credits

This code was inspired by @matchai's bird-box.

View on GitHub

Prep work

Create a new public GitHub Gist (https://gist.github.com/)
Create a personal access token with the gist scope and copy it. (https://github.com/settings/tokens/new)
Get your Dev.to user name (https://dev.to/settings)

Repo setup

Fork the blog-box repo (https://github.com/Aveek-Saha/blog-box)
Go to the repo Settings > Secrets
Add the three following environment variables:
- GH_TOKEN: The GitHub access token generated from the previous section.
- GIST_ID: The ID portion from your gist url, eg: https://gist.github.com/Aveek-Saha/ 8335e85451541072dd25fda601129f7d.
- DEV_USERNAME: Your Dev.to account username.

Show off your blog posts

Once you've finished with these steps, you can go to Actions > Update gist with latest post and manually trigger the workflow to update the gist with your latest DEV blog post.

Once the gist is updated you can pin it to your GitHub profile, so that it looks something like this:

When users click on this pinned gist, there will be a comment with the link to the post like this:

Getting started with Ionic 5 and Vue

Aveek Saha — Thu, 18 Mar 2021 00:00:00 +0000

If you want the code for this project, fork this GitHub repo - Movie Vue

Download the app here - Download

Introduction

Javascript has come a long way from when it used to be just a way to make web pages more dynamic, now we can use it to write server side code and even make desktop and mobile applications. The later is what what we'll be exploring today, using Ionic and Vue.js.

In this tutorial we'll be focusing on learning how to use Ionic, and it assumes you have basic knowledge of Vue concepts. If you want to learn Vue check out this tutorial: Getting started with Vue and the GitHub API, where I go over all the basic concepts in Vue.

What is Ionic?

From the ionic team:

Ionic is an open source mobile UI toolkit for building high quality, cross-platform native and web app experiences.

Ionic will provide us with UI components that will look at home on mobile platforms, and function virtually indistinguishably from any native app.

Ionic gives you a choice between Angular, React, Vue, or vanilla JavaScript. However, note that not all components are available for all frameworks, so take a look at all the components you want to use and check if they're available for your framework before you start.

With Ionic you can also use native device functionality, like accessing the camera or using the location on a mobile service, though take note that this service is a part of their enterprise edition.

What are we building?

We'll be building a mobile application where users can see a list of movies that are currently playing, popular movies, top rated movies and new movies that are going to release.

App Features:

A slide out menu from where you can see the different movie lists, Now Playing, Popular, Upcoming, or Top Rated.
Each movie will have a background image, the title, the average rating of the movie and the description.
Infinite scroll, once you reach the end of the page, new content automatically loads.
Swipe down on any page to refresh it.
Show region specific movies

To get our movies, we'll be using the TMDb api and to get our location we'll be using ip-api.

You'll need an API key for the TMDb api before we start, so make sure to grab that.

Final Result

Setup

Install the ionic cli

npm install -g @ionic/cli

Start an ionic app

We'll be using the Side menu starter and we'll set our framework of choice to Vue

ionic start MovieVue sidemenu --type vue

Serve for live reload

Run this command, and it'll start a live server so you can see your changes live while you're coding.

ionic serve

When viewing the page, I'd recommend using the dev tools on your browser to set your device to a mobile device, that way you'll get a more realistic picture of what it's going to look like on an actual phone.

Code

Upon serving, your app will look something like this

Most of our code changes will be in the ./src folder. As the tutorial progresses from one step to the next, I'll be putting up the entire code, with comments before the lines that have changed from the last step. So if you're following along step by step, you can just change those lines

Organizing the Side menu

First thing we'll do is clean up the side menu. We need only 4 sections in the side menu, and we can get rid of all the labels.

These changes have to be made to the ./src/App.vue.

We'll only be modifying the template and the script here, so you can leave the styles unchanged.

Well need to rename the tabs to match the content we'll be showing. The icons are a little mismatched too, so let's fix that while we're at it.

Template

<template>
  <IonApp>
    <IonSplitPane content-id="main-content">
      <ion-menu content-id="main-content" type="overlay">
        <ion-content>
          <ion-list id="inbox-list">
            <!-- Change name to something more appropriate -->
            <ion-list-header>Movie Vue</ion-list-header>
            <ion-note>Discover movies</ion-note>

            <ion-menu-toggle auto-hide="false" v-for="(p, i) in appPages" :key="i">
              <ion-item @click="selectedIndex = i" router-direction="root" 
              :router-link="p.url" lines="none" detail="false" class="hydrated" 
              :class="{ selected: selectedIndex === i }">
                <ion-icon slot="start" :ios="p.iosIcon" :md="p.mdIcon"></ion-icon>
                <ion-label>{{ p.title }}</ion-label>
              </ion-item>
            </ion-menu-toggle>
          </ion-list>
          <!-- Remove Labels -->
        </ion-content>
      </ion-menu>
      <ion-router-outlet id="main-content"></ion-router-outlet>
    </IonSplitPane>
  </IonApp>
</template>

Script

import { IonApp, IonContent, IonIcon, IonItem, IonLabel, IonList, IonListHeader, 
IonMenu, IonMenuToggle, IonNote, IonRouterOutlet, IonSplitPane } from '@ionic/vue';
import { defineComponent, ref } from 'vue';
import { useRoute } from 'vue-router';
// Update the icons
import {  heartOutline, heartSharp, flashOutline, flashSharp, 
diamondOutline, diamondSharp, rocketOutline, rocketSharp } from 'ionicons/icons';

export default defineComponent({
  name: 'App',
  components: {
    IonApp, 
    IonContent, 
    IonIcon, 
    IonItem, 
    IonLabel, 
    IonList, 
    IonListHeader, 
    IonMenu, 
    IonMenuToggle, 
    IonNote, 
    IonRouterOutlet, 
    IonSplitPane,
  },
  setup() {
    const selectedIndex = ref(0);
    // Rename the tabs and update the icons
    const appPages = [
      {
        title: 'Now Playing',
        url: '/folder/Now Playing',
        iosIcon: flashOutline,
        mdIcon: flashSharp
      },
      {
        title: 'Popular',
        url: '/folder/Popular',
        iosIcon: heartOutline,
        mdIcon: heartSharp
      },
      {
        title: 'Top Rated',
        url: '/folder/Top Rated',
        iosIcon: diamondOutline,
        mdIcon: diamondSharp
      },
      {
        title: 'Upcoming',
        url: '/folder/Upcoming',
        iosIcon: rocketOutline,
        mdIcon: rocketSharp
      }
    ];
    // Remove Labels

    const path = window.location.pathname.split('folder/')[1];
    if (path !== undefined) {
      selectedIndex.value = appPages
      .findIndex(page => page.title.toLowerCase() === path.toLowerCase());
    }

    const route = useRoute();

    return { 
      selectedIndex,
      appPages,
      // Update the icons
      heartOutline,
      heartSharp,
      flashOutline,
      flashSharp,
      diamondOutline,
      diamondSharp,
      rocketOutline,
      rocketSharp,
      isSelected: (url: string) => url === route.path ? 'selected' : ''
    }
  }
});

Now we need to update the script at .src/router/index.ts to change the default route. This will ensure it opens the page we want when it starts up.

import { createRouter, createWebHistory } from '@ionic/vue-router';
import { RouteRecordRaw } from 'vue-router';

const routes: Array<RouteRecordRaw> = [
  {
    path: '',
    // Change the default route
    redirect: '/folder/Now Playing'
  },
  {
    path: '/folder/:id',
    component: () => import ('../views/Folder.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

After these changes it should look something like this

Basic UI

For our main UI we'll be using a card component that will contain all the information about the movies.

Create a new file ./src/MovieCard.vue

<template>
    <ion-card>
        <!-- Movie poster at the top of the card -->
        <img :src="url" />
        <ion-card-header>
            <!-- Show the movie title, Average votes and description -->
            <ion-card-title>{{ movie.title }}</ion-card-title>
            <ion-card-subtitle
                >Rating: {{ movie.vote_average }}
                <ion-icon :icon="star"></ion-icon
            ></ion-card-subtitle>
        </ion-card-header>

        <ion-card-content>
            {{ movie.overview }}
        </ion-card-content>
    </ion-card>
</template>

<script>
// Remove typescript
import {
    IonCard,
    IonCardContent,
    IonCardSubtitle,
    IonCardTitle,
    IonIcon,
} from "@ionic/vue";
import { star } from "ionicons/icons";
import { defineComponent } from "vue";

export default defineComponent({
    components: {
        IonCard,
        IonCardContent,
        IonCardSubtitle,
        IonCardTitle,
        IonIcon,
    },
    // Movie props from the parent component
    props: ["movie"],
    setup() {
        return { star };
    },
    data() {
        return {
            // Use a placeholder in case there is no poster
            url:
                this.movie.backdrop_path != null
                    ? "https://image.tmdb.org/t/p/original/" +
                      this.movie.backdrop_path
                    : "./assets/placeholder.jpg",
        };
    },
});
</script>

Display Movie cards

Now we need to query the TMDb API to get the list of movies for each tab. We'll need axios for this so we'll install it before proceeding.

npm i axios

You can remove all styles from this section. Also we wont be using typescript here because I couldn't get it to work with infinite scrolling, which we'll be exploring later in this tutorial.

In ./src/Folder.vue

<template>
  <ion-page>
    <ion-header :translucent="true">
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-menu-button color="primary"></ion-menu-button>
        </ion-buttons>
        <ion-title>{{ $route.params.id }}</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content :fullscreen="true">
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">{{ $route.params.id }}</ion-title>
        </ion-toolbar>
      </ion-header>

      <div id="container">
        <!-- Loop over each movie -->
        <div v-for="movie in movies" :key="movie.id">
          <MovieCard v-bind:movie="movie"></MovieCard>
        </div>
      </div>
    </ion-content>
  </ion-page>
</template>

<script>
// Remove typescript
import { IonButtons, IonContent, IonHeader, IonMenuButton, IonPage, 
IonTitle, IonToolbar } from '@ionic/vue';

import { ref } from "vue";
// Install Axios and import the Movie card component we just made
import MovieCard from "./MovieCard.vue";
import axios from "axios";

export default {
  name: 'Folder',
  components: {
    IonButtons,
    IonContent,
    IonHeader,
    IonMenuButton,
    IonPage,
    IonTitle,
    IonToolbar,
    // Add the MovieCard component
    MovieCard
  },
  data() {
    return {
      movies: ref([]),
      // Page to fetch
      pageNumber: 1,
      // Total number of pages present
      maxPages: 1,
      // Get the endpoint from the route parameter
      endpoint: this.$route.params.id
                .toLowerCase()
                .split(" ")
                .join("_"),
      // Which Country the user is in
      country: "",
    };
  },
  methods: {
    async fetch(pageNumber) {
      // Get Movies corresponding to which tab is open, Now playing, Upcoming, etc
      const movies = await axios.get(
          "https://api.themoviedb.org/3/movie/" +
              this.endpoint +
              "?api_key=<Your API KEY here>&language=en-US&page=" +
              pageNumber +
              "&region=" +
              this.country
      );
      // Populate movie list
      this.movies = movies.data.results;
      // Increase page counter by 1
      this.pageNumber = movies.data.page + 1;
      // Get total number of pages in response
      this.maxPages = movies.data.total_pages;
    }
  },
  mounted() {
    // Fetch movies when mounted
    this.fetch(this.pageNumber);
  },
  watch: {
    $route(to, from) {
      // Trigger when the route changes. i.e. when user switches tabs
      this.endpoint = this.$route.params.id
          .toLowerCase()
          .split(" ")
          .join("_");
      this.pageNumber = 1;
      this.maxPages = 1;

      // Fetch movies when route changes
      this.fetch(this.pageNumber);
    }
  }
}
</script>

<style scoped>
/* Remove styles */
</style>

After making these changes, you should get something that looks like this:

Infinite scrolling

Now that we have our basic UI set up, we can focus on some quality of life improvements. When you query the TMDb api, you get a subset of the total movies in any category. This is because that's just one page. The movie lists are split into several pages, and that's good for us because it would take a long time to load such a huge amount of data at once.

However the user should have a way to see more content gradually until there is nothing else in the movie list. For this we'll set up infinite scrolling.

Basically once the user is about to reach the end of the content that has loaded so far, we'll send a request to the API for the next page, and add it to the list.

Luckily ionic has a component just for this.

In ./src/Folder.vue.

<template>
  <ion-page>
    <ion-header :translucent="true">
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-menu-button color="primary"></ion-menu-button>
        </ion-buttons>
        <ion-title>{{ $route.params.id }}</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content :fullscreen="true">
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">{{ $route.params.id }}</ion-title>
        </ion-toolbar>
      </ion-header>

      <div id="container">
        <div v-for="movie in movies" :key="movie.id">
          <MovieCard v-bind:movie="movie"></MovieCard>
        </div>
      </div>
      <!-- Add the infinite scroll component and call loadData -->
      <ion-infinite-scroll
          @ionInfinite="loadData($event)"
          threshold="100px"
          id="infinite-scroll"
          :disabled="isDisabled">
          <ion-infinite-scroll-content
              loading-spinner="bubbles"
              loading-text="Loading more movies...">
          </ion-infinite-scroll-content>
      </ion-infinite-scroll>
    </ion-content>
  </ion-page>
</template>

<script>
// Import the components
import { IonButtons, IonContent, IonHeader, IonMenuButton, IonPage, IonTitle, IonToolbar, 
IonInfiniteScroll, IonInfiniteScrollContent, } from '@ionic/vue';

import { ref } from "vue";
import MovieCard from "./MovieCard.vue";
import axios from "axios";

export default {
  name: 'Folder',
  components: {
    IonButtons,
    IonContent,
    IonHeader,
    IonMenuButton,
    IonPage,
    IonTitle,
    IonToolbar,
    MovieCard,
    // Add the infinite scroll components
    IonInfiniteScroll,
    IonInfiniteScrollContent,
  },
  data() {
    return {
      movies: ref([]),
      pageNumber: 1,
      maxPages: 1,
      endpoint: this.$route.params.id
                .toLowerCase()
                .split(" ")
                .join("_"),
      country: "",
    };
  },
  methods: {
    async fetch(pageNumber) {
      const movies = await axios.get(
          "https://api.themoviedb.org/3/movie/" +
              this.endpoint +
              "?api_key=<Your API KEY here>&language=en-US&page=" +
              pageNumber +
              "&region=" +
              this.country
      );
      this.movies = movies.data.results;
      this.pageNumber = movies.data.page + 1;
      this.maxPages = movies.data.total_pages;
    },
    async pushData(pageNumber) {
      // Get the next page
      const movies = await axios.get(
          "https://api.themoviedb.org/3/movie/" +
              this.endpoint +
              "?api_key=<Your API KEY here>&language=en-US&page=" +
              pageNumber +
              "&region=" +
              this.country
      );
      // Add movies to current list
      this.movies = this.movies.concat(movies.data.results);
      this.pageNumber = movies.data.page + 1;
      this.maxPages = movies.data.total_pages;
    },
    async loadData(ev) {
      // Load the new data once we reach the end of the page
      const res = await this.pushData(this.pageNumber);
      console.log("Loaded data");
      console.log(res);
      ev.target.complete();

      // Once the last page has been fetched, we'll disable infinite loading
      if (this.pageNumber >= this.maxPages) {
          ev.target.disabled = true;
      }
    },
  },
  mounted() {
    this.fetch(this.pageNumber);
  },
  watch: {
    $route(to, from) {
      // Trigger when the route changes. i.e. when user switches tabs
      this.endpoint = this.$route.params.id
          .toLowerCase()
          .split(" ")
          .join("_");
      this.pageNumber = 1;
      this.maxPages = 1;

      // Fetch movies when route changes
      this.fetch(this.pageNumber);
    }
  }
}
</script>

<style scoped>
</style>

After you make these changes, you should see something like this

Swipe down to reload

Another common feature in most mobile apps is the ability to refresh content when you swipe down at the top. This is useful because it's a simple intuitive gesture to get updated content.

And wouldn't you know it, Ionic has a component to help us with this too!

In ./src/Folder.vue.

<template>
  <ion-page>
    <ion-header :translucent="true">
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-menu-button color="primary"></ion-menu-button>
        </ion-buttons>
        <ion-title>{{ $route.params.id }}</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content :fullscreen="true">
      <!-- Add refresher component -->
      <ion-refresher slot="fixed" @ionRefresh="doRefresh($event)">
        <ion-refresher-content></ion-refresher-content>
      </ion-refresher>
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">{{ $route.params.id }}</ion-title>
        </ion-toolbar>
      </ion-header>

      <div id="container">
        <div v-for="movie in movies" :key="movie.id">
          <MovieCard v-bind:movie="movie"></MovieCard>
        </div>
      </div>
      <ion-infinite-scroll
          @ionInfinite="loadData($event)"
          threshold="100px"
          id="infinite-scroll"
          :disabled="isDisabled">
          <ion-infinite-scroll-content
              loading-spinner="bubbles"
              loading-text="Loading more movies...">
          </ion-infinite-scroll-content>
      </ion-infinite-scroll>
    </ion-content>
  </ion-page>
</template>

<script>
// Import the components
import { IonButtons, IonContent, IonHeader, IonMenuButton, IonPage, IonTitle, IonToolbar, 
IonInfiniteScroll, IonInfiniteScrollContent, IonRefresher, IonRefresherContent, } from '@ionic/vue';

import { ref } from "vue";
import MovieCard from "./MovieCard.vue";
import axios from "axios";

export default {
  name: 'Folder',
  components: {
    IonButtons,
    IonContent,
    IonHeader,
    IonMenuButton,
    IonPage,
    IonTitle,
    IonToolbar,
    MovieCard,
    IonInfiniteScroll,
    IonInfiniteScrollContent,
    // Add the refresher components
    IonRefresher,
    IonRefresherContent,
  },
  data() {
    return {
      movies: ref([]),
      pageNumber: 1,
      maxPages: 1,
      endpoint: this.$route.params.id
                .toLowerCase()
                .split(" ")
                .join("_"),
      country: "",
    };
  },
  methods: {
    async fetch(pageNumber) {
      const movies = await axios.get(
          "https://api.themoviedb.org/3/movie/" +
              this.endpoint +
              "?api_key=<Your API KEY here>&language=en-US&page=" +
              pageNumber +
              "&region=" +
              this.country
      );
      this.movies = movies.data.results;
      this.pageNumber = movies.data.page + 1;
      this.maxPages = movies.data.total_pages;
    },
    async pushData(pageNumber) {
      const movies = await axios.get(
          "https://api.themoviedb.org/3/movie/" +
              this.endpoint +
              "?api_key=<Your API KEY here>&language=en-US&page=" +
              pageNumber +
              "&region=" +
              this.country
      );
      this.movies = this.movies.concat(movies.data.results);
      this.pageNumber = movies.data.page + 1;
      this.maxPages = movies.data.total_pages;
    },
    async loadData(ev) {
      const res = await this.pushData(this.pageNumber);
      console.log("Loaded data");
      console.log(res);
      console.log(this.pageNumber);
      ev.target.complete();
      if (this.pageNumber >= this.maxPages) {
          ev.target.disabled = true;
      }
    },
    async doRefresh(event) {
      // Get the movies from the first page again
      const res = await this.fetch(1);
      console.log(res);
      event.target.complete();
    },
  },
  mounted() {
    this.fetch(this.pageNumber);
  },
  watch: {
    $route(to, from) {
      this.endpoint = this.$route.params.id
          .toLowerCase()
          .split(" ")
          .join("_");
      this.pageNumber = 1;
      this.maxPages = 1;

      this.fetch(this.pageNumber);
    }
  }
}
</script>

<style scoped>
</style>

When you pull down from the top you should see something like the image below. When you release it, the content on the page should refresh.

Scroll to top when tab changes

If you're interacting with your app now, you might have noticed something. When you scroll down on one tab, Lets say Popular and then switch to another tab, say Upcoming, the scrollbar stays at the same position. This makes for a weird user experience, ideally we want it to auto scroll to the top whenever we switch tabs so that we can see the list of movies from the beginning instead of some random place on the page.

In ./src/Folder.vue.

<template>
  <ion-page>
    <ion-header :translucent="true">
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-menu-button color="primary"></ion-menu-button>
        </ion-buttons>
        <ion-title>{{ $route.params.id }}</ion-title>
      </ion-toolbar>
    </ion-header>

    <!-- Enable scroll events and create a ref -->
    <ion-content :fullscreen="true" scrollEvents ref="content">
      <ion-refresher slot="fixed" @ionRefresh="doRefresh($event)">
        <ion-refresher-content></ion-refresher-content>
      </ion-refresher>
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">{{ $route.params.id }}</ion-title>
        </ion-toolbar>
      </ion-header>

      <div id="container">
        <div v-for="movie in movies" :key="movie.id">
          <MovieCard v-bind:movie="movie"></MovieCard>
        </div>
      </div>
      <ion-infinite-scroll
          @ionInfinite="loadData($event)"
          threshold="100px"
          id="infinite-scroll"
          :disabled="isDisabled">
          <ion-infinite-scroll-content
              loading-spinner="bubbles"
              loading-text="Loading more movies...">
          </ion-infinite-scroll-content>
      </ion-infinite-scroll>
    </ion-content>
  </ion-page>
</template>

<script>
import { IonButtons, IonContent, IonHeader, IonMenuButton, IonPage, IonTitle, IonToolbar, 
IonInfiniteScroll, IonInfiniteScrollContent, IonRefresher, IonRefresherContent, } from '@ionic/vue';

import { ref } from "vue";
import MovieCard from "./MovieCard.vue";
import axios from "axios";

export default {
  name: 'Folder',
  components: {
    IonButtons,
    IonContent,
    IonHeader,
    IonMenuButton,
    IonPage,
    IonTitle,
    IonToolbar,
    MovieCard,
    IonInfiniteScroll,
    IonInfiniteScrollContent,
    IonRefresher,
    IonRefresherContent,
  },
  data() {
    return {
      movies: ref([]),
      pageNumber: 1,
      maxPages: 1,
      endpoint: this.$route.params.id
                .toLowerCase()
                .split(" ")
                .join("_"),
      country: "",
    };
  },
  methods: {
    async fetch(pageNumber) {
      const movies = await axios.get(
          "https://api.themoviedb.org/3/movie/" +
              this.endpoint +
              "?api_key=<Your API KEY here>&language=en-US&page=" +
              pageNumber +
              "&region=" +
              this.country
      );
      this.movies = movies.data.results;
      this.pageNumber = movies.data.page + 1;
      this.maxPages = movies.data.total_pages;
    },
    async pushData(pageNumber) {
      const movies = await axios.get(
          "https://api.themoviedb.org/3/movie/" +
              this.endpoint +
              "?api_key=<Your API KEY here>&language=en-US&page=" +
              pageNumber +
              "&region=" +
              this.country
      );
      this.movies = this.movies.concat(movies.data.results);
      this.pageNumber = movies.data.page + 1;
      this.maxPages = movies.data.total_pages;
    },
    async loadData(ev) {
      const res = await this.pushData(this.pageNumber);
      console.log("Loaded data");
      console.log(res);
      console.log(this.pageNumber);
      ev.target.complete();
      if (this.pageNumber >= this.maxPages) {
          ev.target.disabled = true;
      }
    },
    async doRefresh(event) {
      const res = await this.fetch(1);
      console.log(res);
      event.target.complete();
    },
  },
  mounted() {
    this.fetch(this.pageNumber);
  },
  watch: {
    $route(to, from) {
      this.endpoint = this.$route.params.id
          .toLowerCase()
          .split(" ")
          .join("_");
      this.pageNumber = 1;
      this.maxPages = 1;

      this.fetch(this.pageNumber);
      // Scroll to top when the tab changes
      this.scrollToTop();
    }
  },
    setup() {
      // Get ref to content
      const content = ref();

      // Add function to scroll to top
      return {
        content,
        scrollToTop: () => content.value.$el.scrollToTop(),
      };
    },
}
</script>

<style scoped>
</style>

Conclusion

If you've followed along so far, congratulations, you've successfully made an Ionic App. "But wait, wasn't this supposed to run on Android??", I hear you say. And you'd be correct, we've been running an app we made for a phone on our web browser, there are a few more steps required to actually make this app installable on a real Android phone.

We'll be going over those steps in the next part of this tutorial Building and deploying Ionic apps

If you want the full code for this tutorial, click here: MovieVue

Create a bot that displays your latest dev.to post on your GitHub profile

Aveek Saha — Fri, 16 Oct 2020 00:00:00 +0000

Auto update a pinned gist on your GitHub profile to show some content.

Introduction

I recently came across this awesome list for pinned gists and it piqued my curiosity. So this is basically a collection of repositories that allow you to automatically update a gist periodically with some information. This gist can then be pinned to your GitHub page for people to see when they visit your profile.

For those of you that havent heard of gists, they're a service provided by GitHub, you can check it out here. They're basically a collection of files that can be forked and cloned like a GitHub repo.

These periodically updating pinned gists have a nickname, boxes. Some examples of what you can put on these gists from awesome-pinned-gists include, your most recent tweet, weekly music listening report, books you're currently reading, etc.

Basically if you know a service that has an API you can display it on a pinned gist. In this tutorial I'll show you how to create a gist that updates regularly with Your latest Dev.to blog post, but this method can be adapted for any service with an API. You're only limited by your imagination and publicly available APIs.

Setup

This tutorial will have four parts-

Setup all the prerequisites before you start coding.
Programatically update a gist.
Get data from the API and update the gist.
Setup a GitHub workflow to auto update.

1. Prerequisites

Create a GitHub token

Create a new personal access token at https://github.com/settings/tokens and remember to save the token somewhere because you can only see it once.

Creating the Gist

The first thing we need to do is create a gist. So go to https://gist.github.com/ and make one, create a file, name it whatever you want, and add whatever description and content you want for now. You'll need to add some content to the file because you can't create an empty gist.

Once you've created a gist, the url will look something like this https://gist.github.com/<username>/ <gist id>. Copy this gist id and keep it somewhere for later use.

Setup the project

Create a new repository on GitHub, clone it to your local setup and make it your working directory. Then we'll set up npm, answer the questions asked and it should create a package.json for you.

npm init

Then we'll create the other two important files in this project, index.js which will be our main file and action.yml, which we'll be using later when we're setting up the GitHub action. We also need to create a .env file that has our environment variables for local development.

Install the dependencies

We'll need a few packages for this project, how they're used will become clear as you progress through this tutorial

npm i @octokit/rest axios dotenv wrap-ansi

2. Updating the Gist

Environment variables

Before we do anything else, first add the environment variables to the .env file. You can keep the DEV_USERNAME field empty for now.

You can store any API keys or secrets in this file. This file won't be pushed to your repo, instead you'll have to add the variables in this file as secrets under repository settings. Since I'm using the dev.to API, which doesn't need an API key to get posts, I'm storing the username which is the only parameter you need to retrieve posts.

GIST_ID="<Your gist id>"
GH_TOKEN="<Your github token>"
DEV_USERNAME=""

Main script

Now we'll write some code to update the gist we've created. Add this to index.js.

require('dotenv').config()
const { Octokit } = require("@octokit/rest");

// Get the environment variables
const {
    GIST_ID: gistId,
    GH_TOKEN: githubToken,
    DEV_USERNAME: devUsername
} = process.env;

// Authentication
const octokit = new Octokit({
    auth: `token ${githubToken}`
});

// Function to update the gist contents
async function updateGist() {
    let gist;
    try {
        // Get the gist you made using the gist id
        gist = await octokit.gists.get({ gist_id: gistId });
    } catch (error) {
        console.error(`Unable to get gist\n${error}`);
    }

    // Only one file was created, so fetch it's filename
    const filename = Object.keys(gist.data.files)[0];

    try {
        // Update the gist
        // The description is displayed when the gist is pinned
        // so we can update the description along with the contents
        // to show more information when it's pinned
        await octokit.gists.update({
            gist_id: gistId,
            description: `This is some description`,
            files: {
                [filename]: {
                    content: `This is some example content`
                }
            }
        });
    } catch (error) {
        console.error(`Unable to update gist\n${error}`);
    }
}

(async () => {
    await updateGist();
})();

To test whether this script works, run

node index.js

If you check your gist, the description and content should have updated to whatever strings you passed to the update functions.

3. Fetching the data

Now we're going to shift our focus to getting the most recent post from our dev.to account. In index.js update/add these functions.


// The endpoint for the request
const baseURL = 'https://dev.to/api/articles'

// Parameters to pass to the dev.to api
const options = {
    params: {
        username: devUsername
    }
}

// This is useful if the string is too long to display on the pinned gist
function truncate(str, n){
    return (str.length > n) ? str.substr(0, n-2) + '…' : str;
};

// Get the most recent post
async function getPost() {
    try {
        const response = await axios.get(baseURL, options);
        const post = response.data[0];
        // Pass the post as a parameter
        await updateGist(post)
    } catch (error) {
        console.error(error);
    }
}

// Pass the post as a parameter
async function updateGist(post) {
    let gist;
    try {
        gist = await octokit.gists.get({ gist_id: gistId });
    } catch (error) {
        console.error(`Unable to get gist\n${error}`);
    }

    const filename = Object.keys(gist.data.files)[0];

    // Tags from the post
    const tags = '#' + post.tag_list.join(", #");

    // In the gist show the title, a short excerpt from the post
    // and the date the post was published in the contents of the gist
    const content = `📜 ${truncate(post.title, 60).replace(/\s+/g, ' ')} \n ▶ ${
        truncate(post.description, 100).replace(/\s+/g, ' ')
    } \n🔖 ${tags} \n📆 ${post.readable_publish_date.replace(/\s+/g, ' ')}`;

    try {
        //  In the post description show the username, number of likes and comments
        await octokit.gists.update({
            gist_id: gistId,
            description: `dev.to/${devUsername} | ❤ ${post.public_reactions_count} | 💬 ${
                post.comments_count
            }`,
            files: {
                [filename]: {
                    content: wrapAnsi(content, 60, { hard: true, trim: false })
                }
            }
        });
    } catch (error) {
        console.error(`Unable to update gist\n${error}`);
    }
}

(async () => {
    await getPost();
})();

The wrapAnsii library is used to wrap text that's longer than a certain length. Otherwise the text will be abruptly cut off if it's too long when pinned.

Pin the gist to your profile and then run this script. You should get something that looks like this.

If you want to use a different API this step will vary for you, but the basic idea is still the same. Extract the data you need from the API and pass it to the update function so that it can display it on the gist.

4. Setup GitHub Action

Now we have a script that updates our pinned gist with the desired blog post, but we're running it manually. Now we'll set up a GitHub action with a cron job so that it runs on a schedule and updates automatically.

Setup run command

In action.yml we'll set up node and the file that should be run using node.

name: blog-box
author: <your-username>
description: GitHub Action for updating a gist with your latest blog post.

runs:
  using: node12
  main: ./index.js

Setup workflow

Create a new folder under .github/workflows/ and add a GitHub action file named update.yml.

name: Update gist with latest songs
on:
  # THis option allows you to run the script manually
  workflow_dispatch:

  # This sets up a cron job that runs the script once a day
  schedule:
    - cron: "0 0 * * *"

jobs:
  # Create a job
  blog-box:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      # Install dependencies
      - run: npm install
      - name: Update
        uses: ./
        # Use the secrets as environment variables
        env:
          GH_TOKEN: ${{ secrets.GH_TOKEN }}
          GIST_ID: ${{ secrets.GIST_ID }}
          DEV_USERNAME: ${{ secrets.DEV_USERNAME }}

If you want to find out more about cron jobs and how to schedule them, check out this website: https://crontab.guru/.

Conclusion

Once you push your changes, go to actions > Update gist with latest post > Run workflow in your GitHub repository. The action should run successfully and your pinned gist will show your most recent dev.tp blog post. The workflow will run at 00:00 UTC automatically every day.

Code & Demo

Get the code here: blog-box

If you want to see it live check out by GitHub profile: https://github.com/Aveek-Saha

How to prepare for the TensorFlow Developer Certificate Exam

Aveek Saha — Wed, 30 Sep 2020 00:00:00 +0000

A brief summary of what materials to study from and some pointers to prepare for the TensorFlow Developer Certificate Exam.

Introduction

In this guide I’ll be going over what the TensorFlow Developer Certificate is, why you might want to give the exam, what you need to study to do well on the test and finally some pointers for when you’re giving the test.

What is it?

The TensorFlow Developer Certificate is an exam that tests your proficiency in solving machine learning and deep learning problems using TensorFlow in python.

This is a coding based exam and the certificate you receive will be valid for 3 years from the date of issue. Apart from the certificate, your name will also be added to the TensorFlow Certificate Network, where you can see other developers who have cleared the test. You can also search for specific developers from this page, or narrow it down by location.

Why should I get this certification?

The certification is basically a sign to potential employers or clients that you are able to formulate and solve ML or DL problems with TensorFlow. If you’re either looking to get into Artificial intelligence or switch roles to a ML engineer this might be a worthwhile endeavor to pursue.

However there are a few things to keep in mind before you decide to pursue this certification.

This is a relatively new certification, at the time I’m writing this, and as such it’s importance in the industry might not be very high yet.
It’s not cheap. At 100 USD it’s fairly expensive and might be inaccessible to a lot of people. There might be more cost effective ways to display your competence in TensorFlow.
This certification does not test Machine learning and deep learning fundamentals, only your competence in implementing these concepts using TensorFlow.

If you’re okay with the caveats I’ve listed above and you want to build your profile, then it’s a great certification to have. I personally wrote the exam because I’m always looking for a new challenge and I’m passionate about Machine learning and its applications.

This is one of the only machine learning specific professional certifications around, and if you’re going to be using TensorFlow might as well get your certification from the people that created it.

How should I prepare?

The TensorFlow Developer Certificate tests your ability to use TensorFlow to solve a subset of machine learning problems. For the extensive list of topics check the handbook

To summarise, there are 4 main topics covered in the exam:

Tensorflow basics
Image classification
Natural language processing
Time series and sequences

Now depending on how familiar you are with Neural networks and deep learning your approach to the test will vary. For both cases you’ll need a healthy dose of reading mixed with coding. Ideally you want to be implementing as many concepts you read about using code as possible.

1. Already familiar with deep learning concepts

Start with the DeepLearning.AI TensorFlow Developer specialization on Coursera. The course is taught by Laurence Moroney and covers basically all the details you’ll need for the exam over the 4 course specialization

Alternatively you can use Intro to TensorFlow for Deep Learning on Udemy which is free and has similar course content.

A useful textbook to refer to for this is Hands-On Machine Learning with Scikit-Learn, Keras, and TensorFlow, 2nd Edition. The second edition is important because it is updated for tensorflow 2.x. Only the second half of the book is useful, i.e, Part II.

You can find an early release of the 2nd Edition of the textbook here

2. Complete beginner to deep learning

If you are a complete novice to this field I’d recommend you start off with the fundamentals and mathematics behind deep learning before diving into TensorFlow. A good place to begin is the Deep Learning Specialization from deeplearning.ai on Coursera.

Another great resource is the Introduction to Deep Learning course from MIT, which you can find at http://introtodeeplearning.com/. Keep in mind that only the first few courses are required for the topics tested in this exam.

After this you can go through the materials I’ve mentioned in #1

Test Environment

The test has to be taken on the PyCharm IDE and will require a specific version of Python to be installed. If you’re new to PyCharm like I was, I’d recommend you spend some time getting used to the layout of the editor. You can watch the videos at https://www.jetbrains.com/pycharm/learning-center/ in order to get familiarise yourself with the layout and features.

For specific instructuions on how to set up the environment check here https://www.tensorflow.org/extras/cert/Setting_Up_TF_Developer_Certificate_Exam.pdf

Test day pointers

The test is 5 hours long and cannot be paused once it’s been started. I cannot give away exactly what’s asked in the exam because that would be cheating, but I can give some tips.

The exam can be comfortably finished in around 3 hours, this is how long it took me. Your test experience may vary based on how familiar you are with the IDE, Python and TensorFlow. After each question, you will have to submit your model for scoring and you need to be connected to the internet for this. The scores are out of 5 for each and not all questions have the same weightage, harder questions are given higher priority. You will be able to see how much you scored out of 5 once you submit the model.

Most of the models can be trained within the allotted time using a fairly modern CPU, if training is taking too long, you can always just train the model in Colab, and then download the model for submission.

Conclusion

If you go through the materials I’ve listed above and practice coding the concepts regularly you should be able to sail through this test. I’ve purposely not mentioned a time frame for preparation because it’ll vary wildly based on your learning ability and previous experience in this field.

Good luck and happy testing!

How to create a GitHub profile Readme

Aveek Saha — Sat, 18 Jul 2020 00:00:00 +0000

If you want to see what this looks like - My gitHub Profile

You can also check out the repository here - Aveek-Saha

Introduction

GitHub has recently added the ability to create a README for your profile that acts as an About Me section or an Introduction to your profile.

This can be helpful because the GitHub bios have a character limit and you might not be able to fit everything you want in there. So your profile readme is a good way to show visitors to your profile everything you need to introduce yourself.

Steps

To get this About me section, follow these steps:

Create a new repository
Set the repository name to your github username
Make sure the repository is public
Select the option to initialize the repository with a README
Create Repository

Now if you check your Github profile, you should see something like this above your pinned repos.

You can look around and find some really interesting things to do with your bio, your imagination is your only limitation.

Getting started with Svelte and Electron

Aveek Saha — Sun, 24 May 2020 00:00:00 +0000

The code for this tutorial can be found here

Introduction

This is a guide to get you up and running with Svelte + Electron. We’ll just be going through the basic setup process to give you a starting point to develop desktop applications with Svelte by using Electron. If you want to learn more about Svelte basics you can check out this tutorial here: Get started with Svelte.

You can follow this tutorial even if you’re not too familiar with Svelte because we’ll just be setting things up for the project here.

Create a Svelte app

To get started we’ll first be cloning the Svelte boilerplate using a tool called degit. Let’s start by installing degit using

npm install -g degit

Then we install the boilerplate and install all the dependencies.

npx degit sveltejs/template svelte_electron
cd svelte_electron
npm install

To run the dev server run:

npm run dev

When you open http://localhost:5000, you should see a default web page. This means that the setup was successful!

Set up Electron

Now we’ll install electron as a development dependency.

npm i -D electron@latest

Then we’ll install electron-reload and electron-is-dev for some quality of life improvement during development. electron-reload will let us watch files and reload the electron app automatically to reflect changes we make to the code. electron-is-dev will allow us to detect if the application is running in production or development.

npm i -D electron-reload electron-is-dev

Now we need to create an entry point for our electron app. Create a file called main.js with the following code.

const { app, BrowserWindow } = require('electron')
const path = require('path')
const url = require('url')

const isDev = require('electron-is-dev');

// If in development use electron-reload to watch for
// changes in the current directory
if (isDev) {
    require('electron-reload')(__dirname, {
        electron: require(`${__dirname}/node_modules/electron`)
    });
}

function createWindow() {
    // Create the browser window with node integration
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        }
    })

    win.loadURL(
        url.format({
            pathname: path.join(__dirname, 'public/index.html'),
            protocol: 'file:',
            slashes: true
        })
    )

    // Open the DevTools only if app is in development
    // If in production, don't show.
    if (isDev)
        win.webContents.openDevTools()
}

app.whenReady().then(() => {
    createWindow()
    app.on('activate', function () {
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})

app.on('window-all-closed', function () {
    if (process.platform !== 'darwin') app.quit()
})

Now we need to set up some scripts in our package.json and define the Electron entry point.

{   ....
    "main": "main.js",
    "scripts": {
        ...
        "app": "electron ."
        ...
    }
    ....
}

There’s one last step before your application can be rendered. In public/index.html we need to make the urls absolute so that Electron doesn’t give us a resource not found error while loading the page.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width,initial-scale=1'>

    <title>Svelte app</title>

    <link rel='icon' type='image/png' href='favicon.png'>
    <link rel='stylesheet' href='global.css'>
    <link rel='stylesheet' href='build/bundle.css'>

    <script defer src='build/bundle.js'></script>
</head>

<body>
</body>
</html>

Run npm run build to create the compiled JavaScript and CSS files in the public/build/ directory.

Now if you run npm run app you should see the same default welcome page you saw on your browser in an Electron window.

Live reload both electron and Svelte

The way the application is set up now, You could run npm run dev in one terminal to enable live reload for Svelte, and npm run app in another terminal to load the electron app. This is a little inconvenient and we can combine both these functions and run them simultaneously.

For this we’ll be using concurrently. So we’ll first install it and then update our scripts in package.json.

npm i -D concurrently

Then we’ll create a script to run both Svelte and Electron parallelly in package.json.

{
    "scripts": {
        ...
        "app-dev": "concurrently \"npm:dev\" \"npm:app\""
        ...
  },
}

By running npm run app-dev you can live reload both Electron and Svelte!

Conclusion

Now you have a starting point to start building your Electron apps with Svelte at the frontend. While there are some starter templates available, the setup process for this is pretty straightforward and easy to do by yourself.

If you’re interested in learning Svelte you can check out this tutorial here: Get started with Svelte.

Deploying Svelte apps to Firebase with GitHub actions

Aveek Saha — Fri, 01 May 2020 00:00:00 +0000

Use GitHub actions to automate deployment of Svelte applications to Firebase hosting.

Introduction

In this tutorial we’ll be deploying a Svelte application to Firebase hosting. We’ll also be automating the deploy process using GitHub actions so that it deploys every time we push changes to GitHub. For those of you not familiar with Svelte, I’ve already written a beginners guide on Svelte that you can check out here. It’s fairly easy to learn the basics so be sure to go through that first.

If you haven’t checked it out already, read the first part of this series where I set up a Firebase cloud function as a backend for our application.

Even if your use case is different and you’re only interested in Automating the deploy process to firebase hosting you can still follow along and modify the steps to suit you choice of frontend framework. Alternatively you can also skip ahead to the Continuous Deployment section below.

Recap

In the last part we created a backend Firebase function that accepts an image along with a few other parameters in order to convert that image into ascii art and sends it back as a string.

Now that we have our cloud function set up, let’s create the frontend from where we can upload the image and get the converted result. For this we’ll first need to set up firebase hosting to deploy the frontend.

Setting up Firebase

0. Initial setup-

If you’ve come here from the previous part you can skip step 0, otherwise first follow these steps:

Create a Firebase project- Go to the firebase console and create a new project. You can choose to set up Google analytics for the project, but it’s not really important for this application.
Set up Firebase CLI- You’ll need to have Node.js installed already on your system. Install the cli through npm by running npm install -g firebase-tools
Initialize the Firebase SDK- Run firebase login to log in to the CLI via the browser using the account your new project is linked to.

1. Check your directory-

Go to the root directory of your Firebase project.

2. Run Firebase init-

Once in the root directory, run firebase init, If you’ve been following along from the previous article it’ll tell you that you’re already in a firebase project but that’s fine, setting up hosting won’t affect the function you created. When prompted for which features you want to set up, select hosting.

3. Config options-

What do you want to use as your public directory?, leave as default (public). Configure as a single-page app?, yes

Svelte Setup

We’ll be using a tool called degit to get the basic template for our Svelte app, so first install that if you don’t already have it installed.

npm install -g degit

Create a svelte application in the Firebase project directory

npx degit sveltejs/template client
cd client
npm i

To run the dev server run

npm run dev

If you visit http://localhost:5000 the default startup page should be displayed and this means your setup was successful.

Configure Svelte

In order to deploy Svelte to Firebase hosting we need to make some changes first.

If you look at your file structure, you should see two public folders that are placed something like this.

|--client/
| |--public/
|
|--public/

The public folder created by firebase hosting needs to be replaced by the one generated by Svelte. That means replace ./public with ./client/public. This is done because the ./public folder is the one deployed to Firebase hosting and we want this to be our compiled Svelte code.

Just copying the folder won’t do however, we need to configure the rollup script client/client/rollup.config.js so that Svelte compiles 0ur frontend to the new public/build/ folder. To do this replace this section of the config file-

..
export default {
    ...
    ...
}
..

With this-

export default {
    input: 'src/main.js',
    output: {
        sourcemap: true,
        format: 'iife',
        name: 'app',
    // Change Js bundle location
        file: '../public/build/bundle.js'
    },
    plugins: [
        svelte({
            dev: !production,
            // Change css bundle location
            css: css => {
                css.write('../public/build/bundle.css');
            }
        }),
        resolve({
            browser: true,
            dedupe: ['svelte']
        }),
        commonjs(),
        !production && serve(),

        // Watch the new `public` directory and refresh
        // the browser on changes
        !production && livereload('../public'),

        production && terser()
    ],
    watch: {
        clearScreen: false
    }
};

Svelte uses sirv to host the application on your localhost and we’ll have to change the target folder that sirv serves to the new public folder. To do this go to the scripts section of client/package.json and look for the "start" script. Replace it with the following-

"scripts": {
    ...
    "start": "sirv ../public"
    ...
}

Now if you run npm run dev to serve your application again you should see the same default starting page when you visit http://localhost:5000 if everything is set up correctly.

Frontend code

I will not be explaining the code for the frontend in detail as the main objective of this post is to show you how to set up and deploy the application. The frontend is basically a multipart form where the user has to upload the image, specify the number of characters used to represent one row of the resulting ascii image(width) and select the set of characters that the ascii art will be made from(charset).

Once all this information has been submitted by the user, an AJAX request is sent to the cloud function at https://us-central1-<project>.cloudfunctions.net/ascii and the resulting ascii art string in the response is printed on the screen.

You can see a demo of this in action at Pix2Ascii or check out the Code on GitHub. You can very easily implement this functionality using another framework or your own UI.

This ends the Svelte portion of this tutorial.

Continuous Deployment

Now we’ll be looking at how we can deploy our code automatically on every push by using GitHub actions so obviously you’ll be needing a GitHub repository for this. To set up a GitHub action we need to create a new workflow, and there are 2 ways to do this-

In your GitHub repository, go to the actions tab, and select set up a workflow yourself. This will take you to an editor with a basic workflow that you can replace with the workflow we’ll be creating below.
If it doesn’t already exist, in your repository directory, create a .github folder and then a folder called workflows in it. Create a workflow file there under .github/workflows/ and name it deploy.yml.

In order to authenticate our deploys to firebase, we’ll need an auth token from firebase first. To get the token, run firebase login:ci in your terminal and copy the token it returns. Then add this token to your repository by going to Settings > Secrets > New secret. Name the token FIREBASE_TOKEN and paste the token you copied from the terminal.

In the .yml file we’ll specify the steps for our workflow.

name: CI/CD

# When the workflow will run, in this case
# on push or pull request to the master branch
on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

# Jobs are a sequence of steps
jobs:
  # This workflow has only one Job, build
  build:
    # The type of container the workflow will run on 
    runs-on: ubuntu-latest

    # The sequence of steps for this job
    steps:
    # Checks-out your repository so your job can access it
    - uses: actions/checkout@v2

    # First install dependencies for the front end and then 
    # for the cloud function. If you only have frontend remove the lines 
    # from after "npm run build" till the next step i.e. "Firebase Deploy"
    - name: Build
      run: |
        cd client
        npm i
        npm run build
        cd ..
        cd functions
        npm i

    # Install firebase tools and deploy to firebase
    # using the token we created earlier
    - name: Firebase Deploy
      run: |
        sudo npm install -g firebase-tools
        firebase deploy --token ${{ secrets.FIREBASE_TOKEN }}

Conclusion

Now every time you push changes to your GitHub repository a new job will be started to deploy your application to Firebase. Though this example is for Cloud functions and Hosting you can use the same logic to automatically deploy changes to other Firebase services too.

The website will be hosted at <your-project-name>.web.app after it’s been deployed successfully and you can view the final result there.

Code & Demo

Aveek-Saha / pix2ascii

Convert an image into ASCII art

Check the live demo here - pix2ascii.

Read the previous part here: Getting started with Firebase Functions

Getting started with Firebase Functions

Aveek Saha — Thu, 12 Mar 2020 00:00:00 +0000

A beginner's tutorial on creating and deploying a Firebase function.

What are Firebase functions?

From the documentation:

Cloud Functions for Firebase is a serverless framework that lets you automatically run backend code in response to events triggered by Firebase features and HTTPS requests.

What this means is essentially you can write code that will run when certain events take place. These events can be http requests or an event triggered by another firebase service, like their database or storage solution. This means that you can essentially write server side code without having to worry about the specifics of managing and scaling servers, which makes life a lot easier as a developer.

Not all servers can be replaced by cloud functions especially since only JavaScript or Typescript is supported for Firebase as of now. However there are a lot of simple tasks that you might have been considering using a server for, that can be handled by a cloud function.

To demonstrate how to use Firebase cloud functions we’ll be creating a simple application. In this application you can upload an image which will be converted to ascii art. Probably not the most useful application in the world, but a fun project to help you get started with firebase functions. The backend of this application will only use Firebase cloud functions and for the frontend we’ll be using Svelte.

I’ll be tackling the Frontend in another post so stay tuned for that. So in this tutorial you’ll learn how to create and deploy a Firebase function.

Set up Firebase

Before we start you’ll need an account to log in to the Firebase Console, and then you can follow the steps below.

1. Create a Firebase project-

Go to the firebase console and create a new project. You can choose to set up Google analytics for the project, but it’s not really important for this application.

2. Set up Firebase CLI-

You’ll need to have Node.js installed already on your system. Install the cli through npm by running npm install -g firebase-tools

3. Initialize the Firebase SDK-

Run firebase login to log in to the CLI via the browser using the account your new project is linked to.

4. Initialize the project-

Create a new working directory for this project and navigate to that directory. Then run firebase init functions.

During the setup, Use an existing project, and select the project you’d created through the console in the step before. Select JavaScript as the language and pick install dependencies using npm when it offers you the option. Once all the dependencies have finished installing you’re ready for the next step!

Creating the Firebase function

If the setup went correctly you should be seeing a folder called functions. This is where the code for our function will be, specifically in index.js.

The API

We’ll be setting up a basic Express server with only one endpoint that receives the uploaded image and then using this Express app as a cloud function. First install the required modules

npm i
npm i express busboy

If you want to test the function locally, run firebase serve and then use the url specified in the console to test the function.

We’ll be uploading an image using a multipart form. Unfortunately common middleware for this purpose like Multer and Formidable don't work properly with express in Cloud functions, so we’ll have to use a method shown in the documentation that uses Busboy. The documentation does a pretty good job of explaining the code, so I’ll just be copying it here in index.js.

const functions = require('firebase-functions');
const express = require('express');
const cors = require('cors');
const Busboy = require('busboy');
const path = require('path');
const os = require('os');
const fs = require('fs');

const app = express();

const runtimeOpts = {
    timeoutSeconds: 120
}

// Automatically allow cross-origin requests
app.use(cors({ origin: true }));

app.post('/', (req, res) => {

    const busboy = new Busboy({ headers: req.headers });
    const tmpdir = os.tmpdir();
    const fields = {};
    const uploads = {};

    busboy.on('field', (fieldname, val) => {
        console.log(`Processed field ${fieldname}: ${val}.`);
        fields[fieldname] = val;
    });

    const fileWrites = [];

    // This code will process each file uploaded.
    busboy.on('file', (fieldname, file, filename) => {
        console.log(`Processed file ${filename}`);
        const filepath = path.join(tmpdir, filename);
        uploads[fieldname] = filepath;

        const writeStream = fs.createWriteStream(filepath);
        file.pipe(writeStream);

        const promise = new Promise((resolve, reject) => {
            file.on('end', () => {
                writeStream.end();
            });
            writeStream.on('finish', resolve);
            writeStream.on('error', reject);
        });
        fileWrites.push(promise);
    });

    busboy.on('finish', async () => {
        await Promise.all(fileWrites);
        for (const file in uploads) {
            console.log(uploads[file]);

            fs.unlinkSync(uploads[file]);

        }
        res.send();
    });

    busboy.end(req.rawBody);

});

// Expose Express API as a single Cloud Function:
exports.ascii = functions.runWith(runtimeOpts).https.onRequest(app);

So now if we test the function using a service like Insomnia or Postman by uploading an image in a multi part form the path to the image uploaded should be logged in the console!

Image to ASCII

We’ll be creating a separate module for the logic to convert the image the user uploads to ASCII art. To convert the image we’ll be using a module called Jimp.

npm i jimp

Create a new file called img2ascii.js.

const Jimp = require('jimp');

// Export the function so we can call it from the cloud function
// The function takes the filepath, the dimensions of the image 
// and the kind of ascii art as parameters

exports.convert = function (file, width, options) {

    // Different kinds of character sets for visually different ends results
    var greyscale = {
        gscale_70: "@$B%8&WM#*oahkbdpqwmZO0QLCJUYXzcvunxrjft/\\|()1{}[]?-_+~<>i!lI;:,\" ^`'. "
        .split("").reverse().join(""),
        gscale_10: "@%#*+=-:. ".split("").reverse().join(""),
        gscale_block: "  ░▒▓█"
    }

    var gscale = greyscale[options]

    var norm_factor = (255 * 4) / gscale.length

    // Jimp.read returns a promise, so we'll pass that on
    return Jimp.read(file).then(
        (image) => {
            // Since the letters are almost twice as tall as they are wide, 
            // we'll be scaling the height and then dividing by 2 so that the
            // result isn't abnormally tall and proportions are preserved
            var height = Math.round((image.bitmap.height * width) / (2 * image.bitmap.width))

            image
                .resize(width, height) // resize
                .greyscale() // set greyscale

            var arr = []

            image.scan(0, 0, image.bitmap.width, image.bitmap.height, 
            function (x, y, idx) {

                var red = this.bitmap.data[idx + 0];
                var green = this.bitmap.data[idx + 1];
                var blue = this.bitmap.data[idx + 2];
                var alpha = this.bitmap.data[idx + 3];

                var rgba = red + green + blue + alpha
                var intensity = Math.round(rgba / norm_factor) - 1

                // Map intensity to a character
                arr.push(gscale[intensity])
            });

            var matrix = [];
            // Reshape the array
            while (arr.length) matrix.push(arr.splice(0, width));

            var toWrite = ""

            // Convert the array to a string
            matrix.forEach(element => {
                toWrite += element.join("") + '\n'
            });

            return toWrite

        }
    ) 
}

Now to convert the image the user has passed to the function, we have to make a few changes to index.js.

Import the module we just created.

...
const p2a = require('./img2ascii.js')
...

To take the file passed and do the conversion, modify this part of the cloud function

...
...
busboy.on('finish', async () => {
        await Promise.all(fileWrites);
        var art = []

        for (const file in uploads) {
            // Call the conversion function on the file that's been passed along with the other parameters
            var ascii = await p2a.convert(uploads[file], parseInt(fields['width']), fields['charset'])
            // Store the result in an array
            art.push(ascii)
            fs.unlinkSync(uploads[file]);

        }
        // Since we're only allowing one file to be uploaded
        res.send(art[0]);
    });
...
...

At this stage if you test your function using Insomnia or Postman to create a multi part form, with an image, the width and the charset fields, and send it, you should see a string of ascii characters that represent your image being sent back in the response. We’re now ready for the next step!

Deploy

To deploy the function just run this command in the functions folder.

firebase deploy

Once the application has been deployed, the CLI will give you a public url that you can access from anywhere. It should look something like this. https://us-central1-pix2ascii.cloudfunctions.net/ascii. You can test this deployed function in the same way you were testing it locally, just replace the url.

Conclusion

We’ve now successfully created and deployed a function to firebase that we can use to convert an image to ASCII art. If all you want is the backend then that’s all you need.

You’re free to use any hosting service along with any framework of your choice for the web UI. If you want to also learn how to build and deploy a svelte application to Firebase and automate the process using GitHub actions, be sure to look out for the next part of this tutorial.

Code & Demo

Check the final application out here - pix2ascii.

The full code for this project can be found on GitHub or read the next part here: Deploying Svelte apps to Firebase with GitHub actions

Finding the main characters in a novel

Aveek Saha — Thu, 31 Oct 2019 00:00:00 +0000

Introduction

In this tutorial we’ll be learning how to extract the names of all the main characters from a book.

Setup

All the code for this tutorial will be executed on a Google Colab notebook. Go to the link and create a new Python 3 notebook and change the runtime type to GPU.

Strategy

The novel we’ll be using can be any book from the Gutenberg Project in raw UTF-8 format. To extract the names of all the main characters first we need to remove all \n and \r characters from the raw text.

To identify all characters, we’ll be using Named Entity Recognition. A named entity is a real world object, like a place, person, organization, etc.

The text needs to be tokenized into sentences and all the named entities in those sentences need to be identified. We’ll only be looking at entities tagged as people because we’re only interested in the characters.

Then these characters can be listed in the order of their frequency of occurrence in the text.

Implementation

For named entity recognition we’ll use a library called flair. To install flair run

!pip install flair

Next we’ll import NLTK, flair and a few other python libraries

import nltk
from nltk import pos_tag, word_tokenize
from nltk.tokenize import sent_tokenize
from nltk.corpus import stopwords
nltk.download('stopwords')
nltk.download('punkt')
nltk.download('gutenberg')

from tqdm import tqdm
import re
import string
from itertools import combinations
from collections import Counter


from flair.models import SequenceTagger
from flair.data import Sentence

The book can be downloaded and read as a text file. NLTK already comes with a few Project Gutenberg books so we’ll be using one of those for convenience

book = nltk.corpus.gutenberg.raw('carroll-alice.txt')

The book variable is a string that looks like this

'Alice\'s Adventures in Wonderland by Lewis Carroll 1865]\n\nCHAPTER I. Down the Rabbit-Hole\n\nAlice was beginning to get very tired of sitting by her sister on the\nbank, and of having nothing to do: once or twice she had peeped into the\nbook her sister was reading, but it had no pictures or conversations in\nit, \'and what is the use of a book ....'

The text has to be cleaned to remove some unwanted characters

book = book.replace('\n', ' ')
book = book.replace('\r', ' ')
book = book.replace('\'', ' ')

If we print book again it’ll look something like this

'[Alice s Adventures in Wonderland by Lewis Carroll 1865] CHAPTER I. Down the Rabbit-Hole Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, and what is the use of a book ...'

Removing these characters will help us extract the character names more effectively.

After this the book is tokenized into sentences, the flair ner tagger is loaded and each sentence is tagged one by one. If an entity is tagged as a person, it’s stored in a separate array.

# Use flair named entity recognition
tagger = SequenceTagger.load('ner')

# Get all the names of entities tagged as people

x = []

for line in tqdm(sent):
 sentence = Sentence(line)
 tagger.predict(sentence)
 for entity in sentence.to_dict(tag_type='ner')['entities']:
   if entity['type'] == 'PER':
     x.append(entity['text'])

The x array contains all the occurences of characters mentioned in the book. Then the punctuation like commas and semicolons that might occour in the names is removed.

# Remove any punctuation within the names
names = []
for name in x:
  names.append(name.translate(str.maketrans('', '', string.punctuation)))

Let’s sort the list based on number of times the character is mentioned in the book and print it

# List characters by the frequency with which they are mentioned
result = [item for items, c in Counter(x).most_common()
                                     for item in [items] * c]

print(Counter(names).most_common())

The output should look something like this

[('Alice', 346), ('Hatter', 52), ('Duchess', 28), ('Dormouse', 28), ('King', 28), ('Mouse', 21),
('Queen', 18), ('Dinah', 13), ... ('Lory', 4), ('William', 4), ('Mary Ann', 4), ('Well', 4), ('Cat', 4)
, ('Five', 3), ('Majesty', 3), ... ('Wow', 2), ('Treacle', 2), ('Miss', 2), ('Hush', 2), ('Yes', 2),
....]

If we look at the output closely, we can see that some of the “names”, like Five, Hush, Yes, etc, don’t really seem like names of people or characters. This happens because of the way that NER works, sometimes words that are probably not names of characters can also be included in the name list, these are generally few and can be removed manually.

We can also exclude characters whose names have been mentioned less than 5 times, as they aren’t likely to be important characters.

common = []
main_freq = []
# Manually remove words that are not character names from our list

not_names = ['Well', 'Ive', 'Five', 'Theyre', 'Dont', 'Wow',  'Ill', 'Miss', 'Hush', 'Yes',]

for n,c in Counter(names).most_common():
 # if the character is mentioned less than 5 times, the name is not added to the main character list
 if c > 5 and n not in not_names:
   main_freq.append((n,c))
   common.append(n)

If we print the common array, we get a list of main characters from Alice in Wonderland

['Alice',
'Hatter',
'Duchess',
'Dormouse',
'King',
'Mouse',
'Queen',
'Dinah',
'Rabbit',
'Gryphon',
'Bill',
'Hare',
'Dodo',
'Mock Turtle',
'Footman']

Conclusion

Although the method I’ve described here isn’t always 100% accurate, it generally provides a satisfactory list of main characters. This list can be useful for creating a co-occurrence matrix of character interactions, which in turn can be useful for network analysis of all the characters in the book.

While it’s beyond the scope of this post, the interaction network for all main characters can be explored in a future post.

Code

Find the code here

Saving a Keras model to persistent storage

Aveek Saha — Mon, 24 Jun 2019 00:00:00 +0000

Learn how to save Keras models to persistent storage or your Google drive and resume training it from where you left off.

Introduction

A lot of the time deep learning models can take several hours, days or weeks to train and if the machine that it’s running on shuts down unexpectedly before training is finished, it can lead to all that work going to waste. This introduces the need for a way to save and load models so that training can be continued from a certain checkpoint.

Luckily Keras has got us covered with the ModelCheckpoint callback class.

Saving a model

Lets say you have a simple neural network

from keras import Sequential
from keras.layers import Dense

classifier = Sequential()
classifier.add(Dense(10, activation='relu', input_dim=56))
classifier.add(Dense(10, activation='relu'))
classifier.add(Dense(1, activation='sigmoid'))

classifier.compile(optimizer ='adam',
                loss='binary_crossentropy', metrics =['accuracy'])

Before fitting the model, create a ModelCheckpoint object, we’ll go over what each of the parameters do in a minute, but for now, in this example after each epoch the model will be saved to a hdf5 file in the current working directory.

from keras.callbacks import ModelCheckpoint

filepath="./weights-{epoch:02d}-{val_acc:.3f}.hdf5"
checkpoint = ModelCheckpoint(filepath, monitor='val_acc',
                               verbose=1, mode='max')

callbacks_list = [checkpoint]

Now pass the callback list while fitting the model

classifier.fit(X_train, Y_train, batch_size=100, epochs=20,
                          validation_data=(X_validation, Y_validation),
                          callbacks=callbacks_list)

Once the model finishes running, you’ll be able to see 20 hdf5 files labeled by their epoch number and validation accuracy in your working directory.

Parameters

There are several parameters that can be passed to ModelCheckpoint, we’ll go over them here

filepath : a string, the path where you want to save the model file.
monitor : quantity to monitor. Eg: val_acc, acc, val_loss, loss, etc.
verbose : verbosity mode, 0 or 1.
save_best_only : if it’s True, then the model will only be saved if the new model improves over the last saved model in the monitored quantity.
save_weights_only : if True, then only the model’s weights will be saved, else the full model is saved (including the optimizer state).
mode : one of {auto, min, max}. If =True, the decision to overwrite the current save file is made based on either the maximization or the minimization of the monitored quantity. For val_acc, this should be max, for val_loss this should be min, etc. In auto mode, the direction is automatically inferred from the name of the monitored quantity.
period : number of epochs between checkpoints.

Save model to Google Drive on Colab notebooks

Google’s Colab notebooks are a great way to start prototyping and creating neural networks and machine learning models. If you choose a GPU runtime, you are given a free GPU that can greatly reduce your model training time.

As great is Colab is, it does have some caveats

If you are disconnected from the internet or close the window for more than 90 minutes, the runtime automatically shuts down or gets recycled.
You are given a maximum of 12 hours at a time on the VM instance.

In both these cases you may be able to reconnect to the instance but all your local variables will be lost.

Saving the model to Google Drive after every epoch makes it easy to just restart training from the last epoch that was saved.

Google makes it super easy to do this on Colab. First we have to allow Colab to access Google Drive.

from google.colab import drive
drive.mount('/content/gdrive')

When you run this, it generates a link, click on it. Select the google account whose drive you want to mount. Then it takes you to a new tab that says Google Drive File Stream wants to access your Google Account. On clicking allow it generates an authorization code that you have to paste in a text box that appears bellow the code you just ran. Paste the code and hit enter.

On refreshing your file browser, you should see a folder called gdrive, that’s the mounted drive folder.

To save it to your drive, the code is almost the same as the example in the previous section, but the filename should be changed, so that the model is stored in drive.

# Create a folder in your drive called model before running this
filepath="/content/gdrive/My Drive/model/weights-{epoch:02d}-{val_acc:.3f}.hdf5"

Resume training from a saved model

If you saved the entire model (not just the weights) then the model can continue training from wherever it stopped.

from keras.models import load_model

classifier = load_model("/content/gdrive/My Drive/model/weights-15-0.815.hdf5")

classifier.fit(X_train, Y_train, batch_size=100, epochs=20,
                           validation_data=(X_validation, Y_validation),
                          callbacks=callbacks_list,
                          initial_epoch = 15)

Pixel Weather

Aveek Saha — Sun, 23 Jun 2019 00:00:00 +0000

Pixel weather is a small and compact 8 bit style weather widget designed for your Linux desktop.

Features

It’s transparent background allows it to blend in with your current setup
Always stays on your desktop so it won’t get in your way. This means it’s hidden when you switch windows with alt+tab
Switch between dark mode and light mode, for lighter and darker backgrounds respectively.
Clean interface, with no clutter, all options can be accessed by right clicking.

How to use

Install the package.
Sign up and get your API key from the Dark Sky console.
When you open the app for the first time, a settings menu pops up, paste your API key there.
You can also change how often the weather is updated.
After submitting the settings, right click, refresh and wait for the weather to update.
You can choose where to place the widget by choosing from the Position menu.
The menu can be accessed by right clicking anywhere on the widget.

Screenshots

Code & Download

Aveek-Saha / pixel-weather

A pixelated weather widget for your desktop

To try it out, download it here - Downloads

Get started with Svelte

Aveek Saha — Fri, 17 May 2019 00:00:00 +0000

A beginner's tutorial on building and deploying a Svelte application.

What is Svelte?

Svelte is a new way to build web applications. It’s a compiler that takes your declarative components and converts them into efficient JavaScript that surgically updates the DOM.

Svelte is different from traditional component frameworks like Vue or React because it is essentially a compiler that converts your code into vanilla JavaScript at build time. This allows you to create reactive components without the performance overhead of the Virtual DOM.

You can read more about them on their website Svelte

Setup

Like all great tutorials, today I’ll be showing you how to make a ToDo application using Svelte.

For this tutorial we’ll be building on the Svelte boilerplate and we’ll need degit for that so start by installing degit using

npm install -g degit

Then we install the boilerplate and install all the dependencies.

npx degit sveltejs/template svelte_tut
cd svelte_tut
npm install

To run the dev server run

npm run dev

Then open http://localhost:5000, you should see something like this

Making the app

Open src/App.svelte and replace the code that was there with

<script>
   // Variable to store user input
   let task = "";
   // Array to store tasks
    let todos = ["eat", "sleep", "code"]
</script>

<style>

</style>

We can use Svelte to bind the variable task to an input element, and add a function to push a new element into the array whenever we press a button.

<script>
   // Variable to store user input
   let task = "";
   // Array to store tasks
   let todos = ["eat", "sleep", "code"]

   function addTask() {
       // Dont add something if the input value is empty
        if(task!=""){
           // Push a new task to the array
           todos.push(task)
            task = ""
        }
    }
</script>

<style>

</style>

<!-- The value of task will now change when you type in the input
because the task variable is now bound to the input value -->
<input bind:value={task}>

<!-- when the onclick event is triggered it calls addTask -->
<button on:click={addTask}>Add Task</button>

Now using a loop, we’ll display all the elements in tasks array as a list and we’ll add a method to remove elements from the array by selecting the checkbox next to it.

<script>
   let task = "";
   let todos = ["eat", "sleep", "code"]

   function addTask() {
        if(task!=""){
           todos.push(task)
           // The DOM is only updated when an assignment is made so this
           // code below is needed even though it may seem redundant
           // Otherwise the list of todos won't update when we add a task
            todos = todos;
            task = ""
        }
   }

   function removeTask(index) {
        todos = todos.slice(0, index).concat(todos.slice(index + 1));
        console.log(index);
    }
</script>

<style>
   /* remove bullets from list */
   ul {
       list-style: none;
   }
</style>

<input bind:value={task}>
<button on:click={addTask}>Add Task</button>

<ul>
<!-- For each element in the array, create a new list element -->
    {#each todos as todo, index (todo)}
        <li>
       <!-- When the checkbox is ticked the item is removed from the todos array -->
            <input type=checkbox on:click={() => removeTask(index)}>
            {todo}
        </li>
    {/each}
</ul>

Now our todo list is nearly done, we can add some global CSS to the public/global.css file.

html, body {
    padding: 5%;
}

html {
   display: table;
   margin: auto;
}

body {
   display: table-cell;
   vertical-align: middle;
}

And your final result should look something like this

To compile the application we just need to run

npm run build

Persistent storage

If you want the data to be saved when we refresh the page we can use IndexedDB to store the list of tasks. The IndexedDB API is not that intuitive, so we’ll use a wrapper called idb-keyval.

Install it with

npm install idb-keyval

Import it in App.svelte, remove the default values in the todo array and then load the array if it is already stored.

// import idb-keyval
import { get, set } from 'idb-keyval';

let task = "";
// Empty the default values in the array
let todos = []

get('todos')
.then(arr => {
    // If the array is stored from a previous session, assign it to todos
    if(arr !== undefined)
        todos = arr
})

Then we need to store the todos array everytime we add or delete tasks from it

function addTask() {
    if(task!=""){
        todos.push(task)
        todos = todos;
        // Store the array
        set('todos', todos)
        task = ""
    }
}

function removeTask(index) {
    todos = todos.slice(0, index).concat(todos.slice(index + 1));
    // Store the array
    set('todos', todos)
    console.log(index);
}

Now the list wont get reset everytime you refresh the page.

Deploying to Netlify

First we’re going to add a .gitignore with a single line-

node_modules

Create a new project on GitHub or GitLab (Bitbucket is also available) then cd to your project folder and run the following

git init
git remote add origin <git URL of your project>
git add .
git commit -m "Initial commit"
git push origin master

Open Netlify in your browser and sign up for an account if you don’t already have one. Go to your sites and click New site from Git then follow the steps-

select your git provider.

Choose the repository that you just created and committed to.
Under build options go to basic build settings and fill in the following 2 fields:
- Build command: npm run build
- Publish directory: public/

Then click deploy. When the deploy is finished visit the site url given in the overview, it should look something like this Demo

Code & Demo

Live demo - Demo

Code for this tutorial can be found on Gitlab