DEV Community: Tham

airbox.dev is launched

Tham — Wed, 08 Feb 2023 18:15:27 +0000

After a month effort, I finally launched https://airbox.dev today. airbox is a developer productivity platform for finding the required tools and utilities for your programming needs.

airbox is 100% free and no registration is required. I am sure this will help reducing your time to find the right tools for your programming requirements.

This is a simple beginning. Lot more tools are on the way. Keep supporting me and suggests the tools that you require!

www.airbox.dev

Happy Coding

Why you need a YouTube channel?

Tham — Tue, 17 Aug 2021 13:12:34 +0000

I started my 100 days learning challenge on Dart programming language. I am currently documenting all the basic concepts on Dart.
'Learn to teach others' is my biggest believe always. So I started a YouTube channel to document all my learnings. There are 2 benefits out of this.

Learn the concept clearly and deeply
Opportunity for others to learn from you

Moreover you can also build your own personal brand.

Subscribe to my channel to learn Dart language (if interested)

Keep learning & Keep growing!

100 days dart learning challenge

Tham — Sun, 15 Aug 2021 17:40:05 +0000

Building the right habit is always challenging. I learned the habit-building technique recently from James Clear in his fantastic work on ' Atomic Habits '. I decided to apply these techniques through a learning challenge. It is all about learning the Dart programming language for the next 100 days.
My mission is to learn about the Dart programming language and planning to share my experience at the end of each week.

Announcing here is also a social commitment to stick to the habits until it is automatic. I am following Dart language through their official website. Please comment below if you have any other good resources to learn about the Dart language.

I will keep you posted when I make progress and face any challenges during my journey. Let me know if you also have any such learning challenges and how that helped you.

Getting started with Firebase web v9 API

Tham — Sat, 24 Jul 2021 10:53:29 +0000

As I wrote in my previous article, I have started exploring Firebase web v9 APIs. I am going to explain how easy to get started with Firebase web v9 API ( beta ) and setup your project. This article covers the following to kick start your next experiment with Firebase APIs.

Create a project scaffold
Create Firebase project
Setting up Firebase tools
Firebase web v9 API configuration
Application configuration ### Create a project scaffold I used Vite scaffolding tool to create my project skeleton. Just fill the questions and you will be able to get one for you. In my case, I created a project with Vue.js framework.

npm init @vitejs/app <project_name>

cd <project_name>
npm install
npm run dev

By now, you should be able to see the sample project up and running on port 3000

Create Firebase project

Now you need to create a Firebase project. For that you need to go 'https://console.firebase.google.com/' and create your project. This requires a Google account if not create one for you :)
Just follow the instruction once you reach the firebase console and fill the required details about the project name and other details.

Setting up Firebase tools

Now we are going to install the required firebase tools to manage the project from our system. Execute the following commands from your project directory which was created in the first step

npm install -g firebase-tools
firebase login //to access your firebase project created from the previous step

Firebase web v9 API configuration

npm install --save firebase@9.0.0-beta.7 //Latest beta when I write this

Application configuration

Now you are ready to use the Firebase web v9 API in your application. Create a Javascript file under src directory to hold your Firebase project configurations.

import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';

var firebaseConfig = {
  apiKey: "<apiKey>",
  authDomain: "",
  databaseURL: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: ""
};

const firebaseApp = initializeApp(firebaseConfig);
const auth = getAuth(firebaseApp);

export { auth };

NOTE: Replace the above details with your project specific configuration. You grab the details from your Firebase console.
Everything is now completed and you can import the auth variable in your project and use it.

First look of Firebase web API v9 + Vue composition API

Tham — Sun, 27 Jun 2021 15:19:25 +0000

I started experimenting Firebase web v9 APIs for my side hustle project along with Vue 3. I worked with Firebase earlier API set. So initializing the project and getting started with Vue didn't take much of my time.

But to the surprise, I got a fantastic experience with Firebase web v9 APIs with Vue composition APIs. I am going to explain how easy to get started with the integration.

Scenario

To continue on the API exploration, I will consider Firebase sign-up functionality with email and password.

Install Firebase web v9 API

// latest firebase module is firebase@9.0.0-beta.5
npm install --save firebase@9.0.0-beta.5

Firebase configuration for communication

//src/services/firebase.js
//Add your project related keys in the below configuration
import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';

const firebaseConfig = {
  apiKey: "<change>",
  authDomain: "<change>",
  projectId: "<change>",
  storageBucket: "<change>",
  messagingSenderId: "<change>",
  appId: "<change>",
  measurementId: "<change>"
};

const firebaseApp = initializeApp(firebaseConfig);
const auth = getAuth(firebaseApp);

export { auth };

//src/services/UserService.js
import { auth } from './firebase';
import { createUserWithEmailAndPassword } from '@firebase/auth';

export default {
  async signupWithEmail(data) {
    console.log('UserService.signupWithEmail()');
    createUserWithEmailAndPassword(auth, data.email, data.password)
      .then((credential) => {
        const user = credential.user;
        console.log(user);
      })
      .catch((error) => {
        console.error('Error ', error.message);
      });
  }
};

Signup form in Vue

//src/components/Signup.vue
//NOTE: Ignore the css classes for now
<template>
  <section class="p-main">
    <div class="signup-wrapper">
      <div class="signup-title title">
        Sign Up
      </div>

      <form @submit.prevent>
        <div class="signup-form">
          <div class="w-full">
            <input type="text" id="email" v-model="user.email" placeholder="Enter your email">
          </div>
          <div class="w-full">
            <input type="password" id="password" v-model="user.password" placeholder="Enter your password">
          </div>
          <div class="btn-primary w-full text-center">
            <!-- <a href="" class="link-white">Signup</a> -->
            <button class="btn-primary" @click="onSignup">Signup</button>
          </div>

          <div class="px-16 mt-2 bg-gray-200"><hr></div>
          <div class="text-center">
            Already having an account?
          </div>
          <div class="text-center">
            <router-link :to="{ name: 'Signin'}">
              Sign In
            </router-link>
          </div>
        </div>
      </form>
    </div>
  </section>
</template>

<script>
import { useRouter } from "vue-router";
import UserService from '../services/UserService';
export default {
  setup() {
    const router = useRouter();

    const user = {
      email: '',
      password: ''
    };

    const onSignup = () => {
      console.log(user);
      UserService.signupWithEmail(user);
      setTimeout(() => {
        router.push({name: "Home"});
      }, 1000);
    };

    return {
      user,
      onSignup
    }
  },
}
</script>

Importance of Firebase web v9 API

The new API follows the modular SDK, that produces reduced SDK output based on your imports
Provides greater supports with Javascript build tools
Follows ES6 approach which is familiar to every Javascript developers

NOTE: Firebase web v9 APIs are still in beta stage. So there might be some breaking API changes in the future.

Originally published on https://tech.tham.xyz

How to migrate master branch to main in Github?

Tham — Wed, 23 Jun 2021 14:00:32 +0000

Few months back, Github changed the default branch from master to main. Due to this change, most of the projects were forced migrate from master to main branch. Recently I faced this problem for one of my projects.

After multiple trials and errors, I successfully migrated my project to main branch. I would like to share the steps and it would help you when you face the similar problem in the future.

1: Connect local repo with your remote repo

git remote add origin <remote_github_url>

2: Pull the main source code

git pull origin main

3: Move the source from master to main branch

git branch -m master main

4: Add and commit your changes

git add .
git commit -m "master branch changed to main"

5: Set upstream and push changes to remote

git push --set-upstream origin main

Now all your changes will be available in the remote main branch.

NOTE: Backup your source code before you do all these changes.