DEV Community: Tulsi Prasad

ProgressPals: Your last productivity app

Tulsi Prasad — Fri, 17 Jan 2025 07:51:01 +0000

This is a submission for the GitHub Copilot Challenge : New Beginnings

Backstory

Being a productivity nerd, I’ve tried out dozens of productivity apps starting from ones that block websites to habit trackers but I’ve always felt something missing in all of them. Remember a day before exam during school, we all could easily focus even 10+ hours each day but rest of the time even forgetting to check off habits from habit tracker.

Yes, it’s because of accountability and the fear of losing (being seen as a failure in front of someone) that’s why we could focus before exams but not on everyday matters.

Hence I build — ProgressPals.

What I Built

A community focused productivity app that let’s you set challenges (and bet even real money yes) to accomplish something in a given time, people can join your challenge to audit you and track your daily progress (through live chat/progress pics). If you win, then you get to keep your wager, if you lose you’ve to donate to a charity of your choice.

Demo

Here’s a quick 5 min demo of the app, let me know what features you’d like to see and how would you use this platform.

You can check the app here:

Click to view demo

Repo

Here’s the link to GitHub repo (feel free to drop a star if you’ve liked it) —

heytulsiprasad / progress-pals

Ending procrastination since yesterday morning

Progress Pals

Hope this will be an end to our perrenial procrastination

Built in within a day for GitHub Copilot 1-Day Build Challenge using Copilot 🦄 and procrastination beating discipline.

Launch post coming soon 🪄

DM to talk

View on GitHub

Copilot Experience

I pretty much code in public (if that makes sense 😅). Here’s something I tweeted while running this challenge:

// Detect dark theme var iframe = document.getElementById('tweet-1878048037248868655-480'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1878048037248868655&theme=dark" }

Last time I used copilot was ~few months back and only did chat completion/chat with GPT then but this time they’ve completely blown the game by introducing: “Edit with Copilot”.

What I’ve realised is, the more detailed your prompt is and more accurate files that you attach to the context (don’t go spamming #codebase) all the time, you’ll get brilliant results. It edits and even creates new files in accurate folders and also shows you a diff of what it has done which I’ve pretty much accepted >90% of time. It depends on your prompt crafting though, as it might not be fully aware of your knowledge.

I love tab completion feature as well, although it seems a bit slow at times but most of the time I’ve used the inline edit which does most of the jobs pretty easily.

GitHub Models

I’ve mainly used GPT 4o as it felt like the fastest there is and gets the job done almost always. However I felt Claude 3.5 Sonnet is a bit better at crafting UI’s that look aesthetic, but it’s a bit slow so I’ve used it very less.

I also tried out the Vision for Copilot Preview which fixed some UI issues but I still have to test out by giving it exact Figma snapshots, as I couldn’t in this challenge due to lack of time.

Conclusion

If you see the footer on my app, I’ve said, “Built after 179 days of having the idea” and it’s fricking true as you can see the day I posted this on Twitter lol.

// Detect dark theme var iframe = document.getElementById('tweet-1812852056912490956-784'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1812852056912490956&theme=dark" }

Although I’ve made a huge chunk, it still need some refining and actual payment integrations and good UI to maximise usability and accountability (if your real money is in stake lol).

Does it have real potential as a product?

However, I’m still testing the idea among people, but in my opinion if we’d have a right accountability partner who pushes us I’ve no doubt this would be a huge catalyst in people’s challenges, therefore making our app the next facebook! 😂

Until then thanks for reading and don’t forget to stay hydrated (leave a feedback to help me improve). 🌱

How to use WebView in React Native?

Tulsi Prasad — Thu, 22 Aug 2024 01:12:11 +0000

A WebView is an embedded browser that can be used to display web pages inside your React Native applications. It can display anything starting from custom HTML elements to entire web applications inside React Native.

In React Native, we can use the Webview by using a third-party package called, react-native-webview. This is the official implementation of webview after it was removed from the React native core to keep the core as lean as possible.

In this post, we're going to implement a simple project to see how to work with Webview's on React Native and what are some of the good use cases it serves.

Create a React Native project

To get started we need to begin a new project with React Native CLI. You can do this with expo if you don't want to go through a tedious installation process.



npx react-native init ExperimentingWithWebview

With Expo:

If you're using Expo, you can jump straight to Implementing a Basic WebView after this.



expo install react-native-webview

Add dependencies



// For npm users
npm install react-native-webview



// If you're using yarn

yarn add react-native-webview

Link native dependencies

You'll only need this if you're not using Expo and using React Native CLI to start your project.

If you're using react-native ≥ 0.60 autolinking will take care of this step so feel free to skip, but don't forget to run pod install



react-native link react-native-webview

If you ever uninstall this package,



react-native unlink react-native-webview

For iOS and macOS

If using cocoapods, in ios/ or macos/ directory run,



pod install

For Android

If you're using react-native-webview < 6: Feel free to skip

If you're using react-native-webview ≥ 6.x.x

Make sure AndroidX is enabled in your project by editing android/gradle.properties



android.useAndroidX=true
android.enableJetifier=true

Chances are this is already done by React Native CLI automatically.

Implementing a basic WebView

It's time to get rid of the boilerplate code inside app.js and write our code for webview.



// App.js

import React from "react";
import { SafeAreaView, StatusBar } from "react-native";
import { WebView } from "react-native-webview";

const App = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView style={{ flex: 1 }}>
        <WebView source={{ uri: "https://medium.com/" }} />
      </SafeAreaView>
    </>
  );
};

export default App;

This is all you need to do inorder to display a website into your application.

`originWhitelist` prop

This is a list of origin strings that you are allowed to navigate inside the webview component. It takes an array of strings. By default it's values are, http:// and https://. If the user navigates to a new page that isn't in whitelisted origins, the URL will be handled by the OS.



<WebView
  source={{ uri: "https://www.educative.io/" }}
  originWhitelist={["https://*", "git://*"]}
/>

Loading local/inline HTML files

You can also load local or inline HTML files into a Webview and this is how you can achieve that.



const sourceHtml = require("./src/index.html"); // your html file here

export const App = () => <WebView source={{ html: sourceHtml }} />;

Or add some inline HTML.



export const App = () => {
  const htmlSource =
    '<h1 style="font-size:100px; padding: 50px; text-align: center;">Hello World 🌍</h1>';

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <WebView source={{ html: htmlSource }} />
    </SafeAreaView>
  );
};

Injecting custom javascript to webview

You can also add your own javascript that can run inside the webview. You can use it to manipulate the behavior of the website you're loading as per your needs.

There are two ways to do this:

injectedJavascript prop
injectJavascript method

Their names can be confusing so shall understand them based on their purpose, it'll be clear to you in a few examples.

`injectedJavascript` prop

This is a prop to the Webview component which contains the scripts that'll run once the web page loads for this first time. It only runs once, even if the webpage is reloaded or navigated away.

For example



import React from "react";
import { View } from "react-native";
import { WebView } from "react-native-webview";

const App = () => {
  const scripts = `
      document.body.style.backgroundColor = 'hotpink';
      document.querySelector("h1").style.color = 'skyblue';
      document.querySelector("p").style.padding = '20px';
      true;
    `;

  return (
    <View style={{ flex: 1 }}>
      <WebView
        source={{ uri: "https://www.example.com/" }}
        injectedJavaScript={scripts}
      />
    </View>
  );
};

export default App;

`injectJavascript` method

As we know the above injectedJavascript prop that we discussed only works on first load and there is no other way if we want to run scripts at multiple times or page navigations. That's why, Webview exposes this method injectJavascript on its reference.

Example



import React from "react";
import { View } from "react-native";
import { WebView } from "react-native-webview";

const getRandomColor = () => {
  let letters = "0123456789ABCDEF";
  let color = "#";
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
};

class App extends React.Component {
  render() {
    const scripts = () => {
      const color = getRandomColor();

      return `
      document.body.style.backgroundColor = '${color}';
      document.body.style.color = '${color}';
      document.body.querySelector("a").style.color = '${color}';
      true;
      `;
    };

    setInterval(() => {
      this.webref.injectJavaScript(scripts());
    }, 500);

    return (
      <View style={{ flex: 1 }}>
        <WebView
          ref={r => (this.webref = r)}
          source={{ uri: "https://www.example.com" }}
        />
      </View>
    );
  }
}

export default App;

While all these ways can help you manipulate the webview as per your needs, one more requirement of yours can be sending or receiving data from the webpage inside WebView. So now we'll discuss how you can communicate between your JS and React Native app.

Communicating between JS and React Native

This requires the use of two things:

window.ReactNativeWebView.postMessage function
onMessage prop

The window.ReactNativeWebView.postMessage is a function that's exposed to the injected scripts inside WebView. You can basically pass anything to it, provided they're properly serialized. It'll be clear in the below example.

Rest apart, whatever you pass inside postMessage can be accessed in React Native through the callback passed into onMessage prop. onMessage is a prop for the Webview which takes a callback and is triggered anytime a message is sent using postMessage.

Example



import React from "react";
import { View } from "react-native";
import { WebView } from "react-native-webview";

const getRandomColor = () => {
  let letters = "0123456789ABCDEF";
  let color = "#";
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
};

class App extends React.Component {
  render() {
    const scripts = () => {
      const color = getRandomColor();

      return `
      document.body.style.backgroundColor = '${color}';
      document.querySelector("h1").style.color = 'hotpink';    

      window.ReactNativeWebView.postMessage(document.body.style.backgroundColor);
      true;
      `;
    };

    setInterval(() => {
      this.webref.injectJavaScript(scripts());
    }, 500);

    return (
      <View style={{ flex: 1 }}>
        <WebView
          ref={r => (this.webref = r)}
          source={{ uri: "https://www.example.com" }}
          onMessage={event => console.log(event.nativeEvent.data)}
        />
      </View>
    );
  }
}

export default App;

This simply logs the background color of the webpage whenever it's changed. As you can see, we are passing the callback inside onMessage prop which gets triggered on postMessage.

The actual event object that's passed inside onMessage callback is this, [nativeEvent.data](http://nativeevent.data) is the argument we passed inside window.ReactNativeWebView.postMessage.



{
    "nativeEvent":
             {
                        "canGoBack": false,
                        "canGoForward": false,
                        "data": "rgb(247, 75, 142)",
                        "loading": false,
                        "target": 15,
                        "title": "Example Domain",
                        "url": "https://www.example.com/"
             }
}

Handling Navigation State Changes

Now we'll discuss how you can intercept whenever a user navigates inside the webview to a different webpage or clicks on any link. You can place a callback that'll happen anytime the route changes.

`onNavigationStateChange` prop

This takes a callback which is triggered whenever the user navigates inside the webview. It passes the current navigation state as an argument that can be accessed inside the callback.

Example



import React from "react";
import { View } from "react-native";
import { WebView } from "react-native-webview";

class App extends React.Component {
  handleNavigationStateChanged = navState => {
    const { url, title } = navState;
    console.log({ url, title });
  };

  render() {
    return (
      <View style={{ flex: 1 }}>
        <WebView
          ref={r => (this.webref = r)}
          source={{ uri: "https://www.example.com" }}
          onNavigationStateChange={this.handleNavigationStateChanged}
        />
      </View>
    );
  }
}

export default App;

Basic navState param structure passed into handleNavigationStateChanged:



{
    "canGoBack": false,
    "canGoForward": false,
    "loading": false,
    "target": 3,
    "title": "Example Domain",
    "url": "https://www.example.com/"
}

Just as a cool project you can play around with WebView and use many of its available methods such as goForward and goBack, stopLoading (or even add apple pay support) to replicate a browser-like feel for your users, just like we used injectJavascript method above.

References

You can refer to React Native WebView docs to have an overview of all that it offers or references page to grab a look at all the available props and methods. If you're down for the above project, you can go over this blog tutorial if you ever get stuck.

Feel free to reach out to me on Twitter (@thebuildguy) if you've any questions and for more tech content.

How to paginate queries in Firestore?

Tulsi Prasad — Wed, 21 Aug 2024 04:34:59 +0000

I recently had to create a paginated list view at work using Firebase which took a considerable amount of research and learning good practices, so writing this for someone who’s looking to hook up pagination in their existing firestore database or even for my future self in 5 months who has forgotten everything once again! 😅

Firebase is a backend as a service (BaaS) platform, that enables us build and grow applications without having to write our own backend. You just plug and play whatever services you need on the go and you only pay for what you use in the long run. Now if you’re here already, I expect you might have used Firebase by now, but if not just follow the instructions it’ll make sense slowly.

Getting Started
Building the app
Implementing Pagination in Firestore
Tips and Best Practices
Conclusion

Getting Started

We need to setup a react project with firebase to begin working with, along with database support using firestore. If you need help using setup you can follow along in this blog, it’s pretty straightforward. So without any further ado, let’s jump into some coding.

Tip: You don’t have to note down all the code snippets from here, you can access this entire working repo from the following repo. 🌟

heytulsiprasad / find-mates

Huge people's directory used to demonstrate pagination in firestore

Demo project for my blog post on How to paginate queries in Firestore?.

Features

Search through a list of 10k+ people
Connect with random people from the internet
Use prev and next buttons to navigate through the list

View on GitHub

Building the app

Now that you know the importance of pagination and firestore as well 😅, this is how you start achieving that. We’re going to build a directory called find mates, of over 10k peoples which you can search through and view details about the people from the paginated views.

We’re using good old Next 14 and tailwind with daisyUI for styles. If you go through the repo, we’ve a pretty straight forward structure.

The each individual card is called, PeopleCard
PeopleList is the list container holding all the people in the paginated view.
Paginator is just the row containing current page info and previous/next buttons.
You can ignore DevSection, I used that to add the peoples data to firestore, using faker.

After that, you can create a new firebase project and add the variables to a local env file named as, .env.local



NEXT_PUBLIC_FIREBASE_API_KEY=
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
NEXT_PUBLIC_FIREBASE_PROJECT_ID=
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=
NEXT_PUBLIC_FIREBASE_APP_ID=

As you can see I also have an Auth Context to store authentication info, but later I realized I didn’t need this for the demo. It was for creating a bunch of users in secure way.

Implementing Pagination in Firestore

Great, now that you’ve setup the repo, we can move on to fun things.

We’re going to start by looking how our firestore data looks like. As we’re having lots of people’s data to be stored, we’ll create a people collection and store each people as a document inside the collection.

If you’ve anything huge to store you have to store them as documents inside a collection like tweets or list of people etc, as a document has a 1MB upper limit so we can’t basically store infinite amount of data and also we could use more advanced firebase queries and filters on collections to get the data we need. You can learn more about it with an example here.

This is how my firestore dashboard looks like.

Now you can create a component where you want to show the paginated data and upon it’s render we need to fetch the number of people data we want to show on one page. Let’s call it: PEOPLE_PER_PAGE. We’ll start by creating all the state variables that we need.



const [peopleList, setPeopleList] = useState([]);
const [afterThis, setAfterThis] = useState(null);
const [beforeThis, setBeforeThis] = useState(null);
const [page, setPage] = useState(1);
const [totalPeople, setTotalPeople] = useState(0);

Here these are the following use cases of these variables:

peopleList : list of all people’s that are shown in current page
afterThis: snapshot of the last document in a page query. we’ll use it to start fetching the documents from after this document in a next page query.
beforeThis: snapshot of the first document in a query. we’ll use it to start fetching the documents from before this document in a previous page query.
page : index of current page
totalPeople : the total number of people exists in database

If you’re getting intimidated by all this don’t, coz we’ll see one by one how is each property being used and initiated.

1. Getting total number of people

Let’s first update the totalPeople value as based on it we’ll declare which page we’re currently showing. I’ve passed the searchTerm as a parameter as based on what the user searches, the total page (available people) changes.



import {
  collection,
  query,
  orderBy,
  limit,
  startAfter,
  getDocs,
  getCountFromServer,
  limitToLast,
  endBefore,
  where,
} from "firebase/firestore";

// Get total count of people in Firestore (based on search term)
const getTotalCount = useCallback(async (searchTerm) => {
  const collectionRef = collection(db, "people");
  const q = query(
    collectionRef,
    where("firstName", ">=", searchTerm),
    where("firstName", "<=", searchTerm + "\uf8ff")
  );

  const aggregateQuerySnapshot = await getCountFromServer(q);
  const count = aggregateQuerySnapshot.data().count;

  setTotalPeople(count);
}, []);

// Initiate value of total pages inside component
const TOTAL_PAGES = Math.ceil(totalPeople / PEOPLE_PER_PAGE);

In the above query, we’re using where to filter out the people names by firstName which match with our searchTerm. Here “> =” is used in alphabetical manner, which means it returns all the documents in which firstName starts with or comes after searchTerm alphabetically. The addition of "\uf8ff" is a special unicode character, and is used as a sort of "maximum" character, allowing the query to include all possible variations of a string that start with a certain prefix.

2. Fetch first batch of data on render

Now we need to create the first query that we should run when the component renders. This will fetch the first batch of data that we want to show and user can continue from there by pressing next and previous buttons and we’ll have separate handlers for those.



// Fetch data based on searchTerm
const fetchData = useCallback(async (searchTerm) => {
  const collectionRef = collection(db, "people");
  let q;

  if (searchTerm) {
    q = query(
      collectionRef,
      where("firstName", ">=", searchTerm),
      where("firstName", "<=", searchTerm + "\uf8ff"),
      orderBy("firstName"),
      limit(PEOPLE_PER_PAGE)
    );
  } else {
    q = query(collectionRef, orderBy("firstName"), limit(PEOPLE_PER_PAGE));
  }

  const querySnapshot = await getDocs(q);
  const items = [];
  querySnapshot.forEach((doc) => {
    items.push(doc.data());
  });

  setPeopleList(items);
  setAfterThis(querySnapshot.docs[querySnapshot.docs.length - 1]);
}, []);

We use orderBy firstName to arrange the list of people names in ascending order and limit method to limit the total number of people to fetch per query.

In order to actually run it, we need to call the above two functions inside an useEffect. We must pass the parameter searchTerm to the useEffect dependency as if that changes, our queries are also changed and we need to fetch it again. Here’s how it looks.



// Fetch data on initial render and when searchTerm changes
useEffect(() => {
  // Fetch data based on searchTerm
  fetchData(searchTerm);

  // Get total count of people and store in state
  getTotalCount(searchTerm);
}, [searchTerm]);

This is why when we search something, we get a new batch of data as this useEffect basically re-runs and both our current data and total page count is changed. Don’t worry about the individual People card components, I’ll show the entire code in a few.

Before search:

After search:

3. Handlers for previous and next buttons

Now all we need are the handlers for previous and next button and show everything in a fancy design then we’re good to go. Here’s how you can create the handlers.



const handleNext = async () => {
  const collectionRef = collection(db, "people");
  const q = query(
    collectionRef,
    orderBy("firstName"),
    limit(PEOPLE_PER_PAGE),
    startAfter(afterThis)
  );

  const querySnapshot = await getDocs(q);
  const items = [];
  querySnapshot.forEach((doc) => {
    items.push(doc.data());
  });

  setAfterThis(querySnapshot.docs[querySnapshot.docs.length - 1]);
  setBeforeThis(querySnapshot.docs[0]);

  setPeopleList(items);
  setPage((page) => page + 1);
};

const handlePrev = async () => {
  const collectionRef = collection(db, "people");
  const q = query(
    collectionRef,
    orderBy("firstName"),
    limitToLast(PEOPLE_PER_PAGE),
    endBefore(beforeThis)
  );

  const querySnapshot = await getDocs(q);
  const items = [];
  querySnapshot.forEach((doc) => {
    items.push(doc.data());
  });

  setAfterThis(querySnapshot.docs[querySnapshot.docs.length - 1]);
  setBeforeThis(querySnapshot.docs[0]);

  setPeopleList(items);
  setPage((page) => page - 1);
};

Working of next handler:

We use the same format of querying as with earlier queries, however one thing that’s new here is the startAfter
We store the last document snapshot in the afterThis state value and we pass it to startAfter method in order for the query to start looking for documents from afterThis doc.
We also increment the page index by 1 after running the next handler.

Working of previous handler:

Similarly we use beforeThis here to store the first document in the current people list.
The endBefore method in Firestore is used to create a query that retrieves documents ending before a specified document.
We decrement the page index by 1 after running the previous handler.

4. Creating the Paginator component

The Paginator component shows the previous and next buttons as well as the current page shown out of total pages. This contains all the handlers and values we need to show the required data inside. it. You can see how it looks below.



const Paginator = ({
  page,
  totalPages,
  handleNext,
  handlePrevious,
  nextDisabled,
  prevDisabled,
}) => {
  return (
    <div className="w-full flex items-center justify-between">
      <button
        className={clsx("btn btn-primary", prevDisabled && "btn-disabled")}
        onClick={handlePrevious}
      >
        Previous
      </button>
      <p className="text-lg">
        Showing page {page} / {totalPages}
      </p>
      <button
        className={clsx("btn btn-primary", nextDisabled && "btn-disabled")}
        onClick={handleNext}
      >
        Next
      </button>
    </div>
  );
};

Here’s how the return statement looks of our container PeopleList looks like.



<div className="px-8 mt-12">
  {/* Pagination */}
  <Paginator
    page={page}
    totalPages={TOTAL_PAGES}
    handleNext={handleNext}
    handlePrevious={handlePrev}
    nextDisabled={page === TOTAL_PAGES}
    prevDisabled={page === 1}
  />

  <div className="grid grid-cols-3 lgmax:grid-cols-2 mdmax:grid-cols-1 gap-x-4 gap-y-8 place-items-center">
    {peopleList.map(
      ({
        _id,
        avatar,
        birthday,
        email,
        firstName,
        lastName,
        jobTitle,
        sex,
      }) => (
        <PeopleCard
          key={_id}
          avatar={avatar}
          fullName={`${firstName} ${lastName}`}
          jobTitle={jobTitle}
          email={email}
          birthday={birthday}
          sex={sex}
        />
      )
    )}
  </div>
</div>

5. Creating the PeopleCard

Now we’ll look at creating the people card to display the people info with some aesthetics! ✨

As we know, peopleList is the current batch of people’s data that’s fetched from firestore, we’re simply mapping over this list and passing the available data to PeopleCard (which looks as below). Let’s see inside PeopleCard. If you click on “Connect” you can connect with these imaginary people over email as well, let me know how it goes! 😅



/* eslint-disable @next/next/no-img-element */
import React from "react";

const PeopleCard = ({ avatar, birthday, email, fullName, jobTitle, sex }) => {
  return (
    <div className="card bg-base-100 w-80 shadow-xl">
      <figure className="w-36 aspect-square mx-auto">
        <img
          src={avatar}
          alt={`Avatar of ${fullName}`}
          className="rounded-2xl"
        />
      </figure>
      <div className="card-body text-center">
        <h2 className="card-title justify-center w-full">{fullName}</h2>
        <h3 className="card-normal">Job: {jobTitle}</h3>
        <h3 className="card-normal">Email: {email}</h3>
        <h3 className="card-normal">
          Birthday:{" "}
          {new Date(birthday).toLocaleDateString("en-US", {
            year: "numeric",
            month: "long",
            day: "numeric",
          })}
        </h3>
        <div className="card-actions justify-center mt-2">
          <a className="btn btn-primary" href={`mailto:${email}`}>
            Connect
          </a>
        </div>
      </div>
    </div>
  );
};

export default PeopleCard;

Tips and Best Practices

Even though pagination is not always the best option, but in case of large datasets (imagine an ecommerce dashboard) we probably want to use pagination. However there are some tips that you can keep in mind for a seamless integration.

Efficient Querying: Ensure your Firestore collection is properly indexed, especially on fields you frequently query and order by. This can significantly speed up your queries and prevent Firestore from throwing an error due to missing indexes.
Handle empty states edge cases: When you’ve reached the last page of your query or on the first page (where you need to disable prev button), you’ve to make sure user knows it which page they’re on and if they’ve reached the end of the data set.
Caching and performance: ChatGPT suggested this, so I’m still in awe of how advanced AI has become. If you’re dealing with reading large amounts of data, you should do some sort of caching (or debouncing as well for potential users spamming the prev/next buttons). If you’re reading lots of data you’re also getting charged for total reads, hence it’s better as much as you can reduce this load on your server (also on your bank balance 😅)

Here’s more info about firebase pricing. Left column is for free tier.

Conclusion

I hope you’ve learned something new today and will be able to implement pagination in your apps now successfully. Even if now infinite scrolling is the new trend, most apps still need pagination. Now even Google removed their infinite scroll and back to it’s paginated view. It’s a sure shot way to save you some bucks on overall reads on your server. 💰

If you like this post, share with your friends and follow me on X/Twitter to know more nifty hacks on tech and stay tuned for more such content!

Web Notifications API — One Byte Explainer

Tulsi Prasad — Sat, 30 Mar 2024 12:36:28 +0000

This is a submission for DEV Challenge v24.03.20, One Byte Explainer: Browser API or Feature.

Explainer ⚡

Imagine you ordered food from a restaurant but you don't get a reminder once it's ready.

That's the pain Notifications API deems to solve.

It sends notifications displayed at a system level, so even when you're absent you are alerted when your food is ready.

Additional Context ✍️

Websites becoming more advanced as applications these days have made them more interactive in our everyday lives, hence the in-built Notifications API is highly useful for web apps, PWAs, or even websites.

Although it's quite difficult to get straight into coding once you understand the concept, the good news is that MDN has a great example that can get you started on it and learning documentation that you can refer if you get stuck.

Bonus Reading 💖

Notifications API
Smallest example on the internet
If you're a video person, Web Dev Simplified has a great video. — How To Send Push Notifications With JavaScript

Let me know if you liked it at @thebuildguy

Top 5 things about Git learnt after I started working as a developer

Tulsi Prasad — Wed, 11 Oct 2023 14:10:06 +0000

Git is one of those things in software development, no one will tell you to use it but once you start working with a team or a company there’s no escape from Git. There’s no other concept which will be more useful than learning the ropes with Git, because it’ll be your saviour when you need it.

Disclaimer ⭐

If you’ve never heard of Git before, in simple words, it is used to work collaboratively. When we work on a big project multiple people need to contribute to a single codebase, for which we can use different branches on Git, or we can manage our codebase using commits, code merging and many more advanced stuff.

Note: However if you’re complete new to Git, I’d recommend you go through this 10 Important Git Commands that Every Developer Should Know post on freeCodeCamp to know the basics.

✍️ How did I learn this?

Well there’s no easy answer. I had this habit of keeping a daily work journal which I picked from Mark Erikson (the maintainer of Redux), in that mostly I’d write what features I worked on that day or bugs that scratched my itch. It really helped me look back on things I’ve learnt and write better documentation.

However I observed that 90% of the issues related to code management could be solved by Git which will reduce our time usage and increase productivity. Hence I started maintaining a list of useful Git commands which you’re going to read right now.

Getting Started

Like always we’re going to start from a starter repo, in order to be on the same page. You can use it as a playground to get your hands dirty. All thanks to W3Schools for sharing this amazing templates! 🙌

heytulsiprasad / git-top-skills

Git playground for learning git concepts

git-top-skills

Git playground for learning git concepts

View on GitHub

1️⃣ Git Reset

Imagine a situation where you’re working on a new feature and before commiting to the repo you forgot to remove your debugging comments from your files. Now everywhere you can see console.log("Hi bros") in the browser. 😅

// Detect dark theme var iframe = document.getElementById('tweet-1710941362479104406-170'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1710941362479104406&theme=dark" }

Yes you can remove them and create a new commit as well, but what if you want to remove those lines in the previous commit itself? Here comes, Git Reset to rescue.

@heytulsiprasad ➜ /workspaces/git-top-skills (learn/reset) $ git log

commit 3d910a2debdf03ce57b22e97b5988c07a2c3437a (HEAD -> learn/reset, origin/learn/reset)
Author: Tulsi Prasad <tulsi.prasad50@gmail.com>
Date:   Tue Oct 10 08:20:22 2023 +0000

    add comments

commit ae3d4cdd9e95f0da434e2be32a61addd824d633e (origin/main, origin/HEAD, main)
Author: Tulsi Prasad <tulsi.prasad50@gmail.com>
Date:   Tue Oct 10 08:14:20 2023 +0000

    feat: add script to populate blogs

Git Reset basically provides us a way to rewrite (or reset) our history as per our convinience. It comes with three modes depending on your usecase.

--soft
--mixed
--hard

1. `git reset --soft`

This basically moves back to the specified commit and your changes remain staged and ready to be commited again. If you want to make any changes you can do them but don’t forget to add (stage) those changes before commiting again.

Examples: git reset --soft faf864e, or git reset --soft HEAD~2 (if you want to jump back 2 commits)

@heytulsiprasad ➜ /workspaces/git-top-skills (learn/reset) $ git reset --soft HEAD~1

@heytulsiprasad ➜ /workspaces/git-top-skills (learn/reset) $ git status
On branch learn/reset
Your branch is behind 'origin/learn/reset' by 1 commit, and can be fast-forwarded.
  (use "git pull" to update your local branch)

Changes to be committed:
  (use "git restore --staged <file>..." to unstage)
        modified:   main.js

@heytulsiprasad ➜ /workspaces/git-top-skills (learn/reset) $ git log
commit ae3d4cdd9e95f0da434e2be32a61addd824d633e (HEAD -> learn/reset, origin/main, origin/HEAD, main)
Author: Tulsi Prasad <tulsi.prasad50@gmail.com>
Date:   Tue Oct 10 08:14:20 2023 +0000

    feat: add script to populate blogs

As you can see the last 1 commit is removed, but it’s changes are still in staging area.

2. `git reset --mixed`

This is the default option. When you run this, you basically undo your commits and unstage your changes to your current working directory. After running this you can continue working on your specified commit and when you’re done you can commit those changes using git commit.

Examples: git reset faf86fe or git reset --mixed HEAD~12 (as mixed is default you don’t have to include the option)

💡 Pro tip: If you’ve accidentaly staged your changes using git add . but decided to not add all of them, you can use git reset to unstage all changes that are in current staging area. Later you can add files of your choice using git add <filename>

@heytulsiprasad ➜ /workspaces/git-top-skills (learn/reset) $ git log
commit 002f538b56529178e31f7042d7bb7a1e7ec18427 (HEAD -> learn/reset)
Author: Tulsi Prasad <tulsi.prasad50@gmail.com>
Date:   Tue Oct 10 08:28:25 2023 +0000

    add more comments

commit 120c7ddf4d56d93f49186758756e091748aedc59
Author: Tulsi Prasad <tulsi.prasad50@gmail.com>
Date:   Tue Oct 10 08:25:38 2023 +0000

    add comments

commit ae3d4cdd9e95f0da434e2be32a61addd824d633e (origin/main, origin/HEAD, main)
Author: Tulsi Prasad <tulsi.prasad50@gmail.com>
Date:   Tue Oct 10 08:14:20 2023 +0000

    feat: add script to populate blogs

@heytulsiprasad ➜ /workspaces/git-top-skills (learn/reset) $ git reset --mixed ae3d4cdd9e95f0da434e2be32a61addd824d633e
Unstaged changes after reset:
M       main.js

@heytulsiprasad ➜ /workspaces/git-top-skills (learn/reset) $ git status
On branch learn/reset
Your branch is behind 'origin/learn/reset' by 1 commit, and can be fast-forwarded.
  (use "git pull" to update your local branch)

Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        modified:   main.js

no changes added to commit (use "git add" and/or "git commit -a")

3. `git reset --hard`

If you ever want to discard all the changes in few commits entirely, you can use --hard. This shifts the HEAD pointer to the specified commit and completely discards all the changes made till then, in both the staging area and working directory. This is a very powerful option so use it very carefully, because it deletes the commits permanently.

Example: git reset --hard faf86e or git reset --hard HEAD~3 (removes last three commits). In the below example, we’re removing all our log commits using hard reset.

~/Desktop/Triage/dev/git-top-skills (learn/reset) $ git log --oneline
9130158 (HEAD -> learn/reset) add more and more console logs
0e68a20 (origin/learn/reset) add all logs
ae3d4cd (origin/main, origin/HEAD, main) feat: add script to populate blogs
bf96bfb feat: add starter files
9017ea7 Initial commit

~/Desktop/Triage/dev/git-top-skills (learn/reset) $ git reset --hard HEAD~2
HEAD is now at ae3d4cd feat: add script to populate blogs

~/Desktop/Triage/dev/git-top-skills (learn/reset) $ git log --oneline
ae3d4cd (HEAD -> learn/reset, origin/main, origin/HEAD, main) feat: add script to populate blogs
bf96bfb feat: add starter files
9017ea7 Initial commit

💡 Pro tip: If you ever did some changes in your local or don’t know what’s missing and want to bring your working directory back to how it is in the remote repo (on GitHub), then you can first run:

git fetch origin this fetches latest changes from remote without modifying your local working directory, next reset your local branch to match the remote branch using, git reset --hard origin/main; You can replace main with the branch you want to match it with.

Note: It discards any local changes you’ve made.

Tip: If you ever want to recover your git reset commits which are permanently lost, git preserves the changes that are happening to it’s HEAD using reference logs. You can basically recover them using git reflog but don’t be too reliant on it. To know how, check out my blog on it.

Time traveling with Git Reflog

Tulsi Prasad ・ Sep 22 '21

#git #github #programming #beginners

2️⃣ Git Stash

This is a magical command and you’ll be surprised how much you’ll use this at workplaces. Imagine you’re working on a branch locally (dev) and suddenly there is another bug on master which you need to solve on priority, but your local branch already contains some changes which are not commit ready, what do you do? Git stash is your savior.

Git stash, temporarily puts away your changes made to working directory in a branch, without having to commit them. You can stash your changes and go work on some other branch and come back and apply your saved stash and continue working from there.

To save your changes into the stash with a default name: git stash
To give a particular name to your stash: git stash save -m "your stash name"
You can check all existing stash with this command: git stash list
To retrieve the stash again (this will apply the latest stash): git stash apply stash@{0}
Remove a stash entry from stash list: git stash drop <stash_id>
Remove all stashes using: git stash clear

~/Desktop/Triage/dev/git-top-skills (learn/stash) $ git status
On branch learn/stash
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        modified:   index.html
        modified:   main.js

no changes added to commit (use "git add" and/or "git commit -a")

~/Desktop/Triage/dev/git-top-skills (learn/stash) $ git stash save -m "add more blogs with media"
Saved working directory and index state On stash: add more blogs with media

~/Desktop/Triage/dev/git-top-skills (learn/stash) $ git stash list
stash@{0}: On stash: add more blogs with media

However git stash apply will only apply the stash but not remove it from stash list. If you want to remove the entry, use stash pop instead.

~/Desktop/Triage/dev/git-top-skills (learn/stash) $ git stash apply stash@{0}
On branch learn/stash
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        modified:   index.html
        modified:   main.js

no changes added to commit (use "git add" and/or "git commit -a")

~/Desktop/Triage/dev/git-top-skills (learn/stash) $ git stash list
stash@{0}: On stash: add more blogs with media

By default stash will save both staged and unstaged files, in order to stash just staged files just do git stash --keep-index

💡 Pro tip: To apply the last made stash you can do (this also removes stash from stash list): git stash pop

~/Desktop/Triage/dev/git-top-skills (learn/stash) $ git stash pop
On branch learn/stash
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        modified:   index.html
        modified:   main.js

no changes added to commit (use "git add" and/or "git commit -a")
Dropped refs/stash@{0} (2669f29b4f44ce1d48c9309196361f4efbd94449)

3️⃣ Interactive Rebase

In Git, rebasing basically means to move any commit or sequence of commits to a new base commit (or update its base). It can be used in two different modes: manual or interactive. You might ask why do we need rebase if we can simply do a git merge instead?

Imagine a scenario you’ve two branches, master and internal. Internal is a feature branch created from master. And while you were working there have been certain bug fixes that are directly pushed to master and now you need those fixes in internal. So, what do you do now?

In this case, we can rebase our internal branch with master branch (after fetching all pushes to master from remote) in order to get those latest code in internal. Before you do rebase you should always commit your latest work, as rebase basically rebases your commits. Now you can happily work in internal which also includes those new commits from master later you can push to master when your feature is ready! 🎉

The code for the above action would be:

git checkout internal
git fetch origin master
git rebase master # you may face merge conflicts depending on code
git push origin internal

The above is a simple rebase example. Now, let’s see what the heck is an interactive mode?

Under the hood of rebase

Whenever we do rebase in a branch, it takes those sequence of commits and under the hood creates new commits and places them upon a new branch. Hence if you’re pushing your commits to remote, when you do a rebase you might get an error as your commit ids have changed in local. Hence, you might have to do a force push. git push -f

Note: Do not force push if other people are also working on same branch, you might overwrite someones code accidentally.

Tell us what an interactive rebase is then?

Ofcourse! So whenever you’re working on a feature you can do temporary commits which you don’t want to be visible on your main branch’s history. So what do you do now? You cannot revert those commits right, as git revert basically creates another commit.

Hence comes, git rebase --i <commit_id> 🧑‍💻

First check the git log to get the actual commit id

~/Desktop/Triage/dev/git-top-skills (learn/stash) $ git log --oneline
e7cd367 (HEAD -> learn/stash, origin/learn/stash) feat: add random photos to blog posts
a664717 plz work
d592e77 remove space
6bfe89b remove useless comments
8e6e68c feat: add more blogs
ae3d4cd (origin/main, origin/HEAD, main, learn/reset) feat: add script to populate blogs
bf96bfb feat: add starter files
9017ea7 Initial commit

Now run the interactive rebase command and provide the commit id of the root commit above which you want to rebase the branch.

~/Desktop/Triage/dev/git-top-skills (learn/stash) $ git rebase -i ae3d4cd
hint: Waiting for your editor to close the file...

As said, you’ll see your editor open a file which we’ll make changes to.

You can squash the commits if you want to discard the commit but preserve it’s contents, or reword if you want to rename your commits and pick will preserve the commit. All the operations are listed in the screenshot.

Added the necessary changes.

Close the file after editing. Now you’ll get to do the operations in new opening files and after you edit close all of them. This is my final screen, you can update your final rebase comment now.

Once it’s done you’ll get a message in console like:

Date: Tue Oct 10 19:41:55 2023 +0530
 1 file changed, 13 deletions(-)
Successfully rebased and updated refs/heads/learn/stash.

And if you do git log now, you’ll see the changes you made.

Note: To push the changes to our PR, we need to do a force push as we’ve an entirely different history of commits now

Run: git push -f

Now we can see our history is cleared in the PR. 🙌

Even while merging a PR in GitHub we can do:

Create a merge commit
Squash and merge
Rebase and merge

We used the rebase and merge to merge, and this way we avoided any mysterious merge commits on main branch which included entire feature code.

Now you can see all our feature commits inside main branch history, as it’s merged by rebase instead of the usual merge commit.

4️⃣ Git Cherry Picking

This is a powerful tool under your toolbelt. Git cherry pick is used to pick the specified commit and put it in your working directory without having to merge or rebase the entire branch. I know it sounds like a hack, but trust me you’re going to love it.

Imagine your working on a feature branch and you find a bug that affects your main branch and your boss insists you fix the bug before working on anything else. Now, you’ve already fixed the bug and commited on your feature branch. Do you merge your half made feature branch or fix the bug again after checking out to main branch?

Easy. Use Git Cherry Pick. 🍒

For example: We’re adding a popular posts section to our blog in a new branch and we decided to ship the popular post commit to main first then continue working more on the feature.

This is how we’ll do it.

git checkout -b learn/cherry-pick # b stands for create new branch

# add code and commit your code
~/Desktop/Triage/dev/git-top-skills (learn/cherry-pick) $ git commit -m "feat: add posts to popular post section"
[learn/cherry-pick 7dd2a8e] feat: add posts to popular post section
 2 files changed, 9 insertions(+), 11 deletions(-)

# checkout to main branch
git checkout main

~/Desktop/Triage/dev/git-top-skills (main) $ git cherry-pick 7dd2a8e
[main 8490a61] feat: add posts to popular post section
 Date: Tue Oct 10 20:59:57 2023 +0530
 2 files changed, 9 insertions(+), 11 deletions(-)

# we can see 7dd2a8e commit has been added to main with a new commit id
~/Desktop/Triage/dev/git-top-skills (main) $ git log --oneline
8490a61 (HEAD -> main) feat: add posts to popular post section
94bd178 (origin/main, origin/HEAD) feat: add random photos to blog posts

It will pick the specific bug fix commit from your feature branch and put that in your main branch.

Tips:

Use -edit option if you want to update the commit message while cherry picking.
Use --no-commit option to just move the changes of the specified commit into the working directory and not commit.
Use --signoff option to add a signature line to end of cherry pick commit message. 🧑‍💻

5️⃣ Searching for code

Pretty much half my adult life must have gone into finding the right part of the code, if not more. 😅 So don’t make the same mistake as me, as Git makes pretty much easy to look through your code. There are times you want to filter the commits by author or the commits that are made between a specific dates, you can use these options to find out the files.

💡 Pro Tip: You can use the - num option to specify the exact number of commits you want to show.

More ways to filter commit history:

By Date

If you want to show your commits by the date they were made, you can use this option. It’s simply writing git log --after="YYYY-MM-DD" and it’ll output the desired logs. The below code only will output 2 logs as we’ve passed a new parameter.

Notice: You can also pass --after and --before commands together to give a range of commits and also the date value can be relative as in: git log --after="yesterday" also works.

By Author

You can pass git log --author="<name>" and it’ll return a list of all commits made by those person. Even if it’s not exact match, it just needs to contain the specified word.

By Commit Message

Just like author, you can use --grep option to pass any value to match it with commit message. Example: In the below command, we’re filtering two feature commits made by Tulsi.

By File path

Sometimes you need to find the commits that made changes to specific files, hence it will come in handy.

Use: git log -- filename

The following code returns the commit that makes changes to README.md file, the -- denotes that the subsequent parameters are not branch names.

By Branch

If you want to check what commits are there in some branch and not in other, you can use this syntax.

Use: git log branchA..branchB

The following code returns the commits that are there in learn/cherry-pick branch but not in main. So remember it as, the difference in commits from branch B to branch A.

✨ Bonus: Showing commits beautifully

We can understand the state of our repository through git log and for better understanding and quick access there are certain options you can make use of.

git log --oneline : Returns the output in a single line and commit id
git log --graph : Draws an ASCII graph representing the branch structure in commit history
git log --decorate: Decorates the git log output

You can use all of these options together to get the best results and also use --all option if needed to see commits across all branches.

💡 Pro Tip: You can also make an custom alias in your terminal as git adog in order to run this command every time you want to view git history.

📕 Additional Reading

🏳️ Conclusion

Git is going to be a very essential part of your work life, if not already! I really believe you’ll be a pro using these git commands and absolutely certain your life will be 10x if not 100x easier when you master these concepts and use them daily in your workflow.

Let me know in the comments what other git commands have you used the most till date. 😼

I’m @thebuildguy on Twitter, shoot me a DM if you’ve got any questions! 👋

Building an entire fullstack project with Firebase 10 and React (Vite)

Tulsi Prasad — Tue, 03 Oct 2023 14:22:33 +0000

Firebase is a BAAS (backend as a service) solution that drives the modern web. The most exciting part of it is you don’t need to configure any server running some server side code, as its all managed by Firebase.

However it’s setup can be time consuming and takes a good amount of to and fro around the documentation. This is why I decided to write this, to make it as a reference for using basic features like authentication, hosting and firestore operations (CRUD) to do in firebase/firestore.

Note

Recently, firebase shifted its SDKs to a new modular approach with the launch of Firebase v9. It brings features like reduced SDK size and greater efficiency with modern JS build tools to optimize your apps (using tree-shaking etc). So we’ll be using it’s new Web Modular API.

// Detect dark theme var iframe = document.getElementById('tweet-1420112970453897216-17'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1420112970453897216&theme=dark" }

Getting Started
Setting up Firebase
Setting up the starter files
Understanding the starter files
Authentication in Firebase
Working with Data
Deploying our project
Conclusion

1️⃣ Getting Started

We’re going to make a fullstack modern todo-list using firebase, react and tailwind stack. I know you’re like, why yet another todolist. But hear me out, we’re not learning how to build a todolist here, we’re here to know about how firebase basic functionailities work so that we can build our cool apps with it.

Here's the link to final repository if you want to play around.

heytulsiprasad / modern-todolist-v1

Starter files for blog on using Firebase 10, Firestore and React in Vite

React + Vite + Firebase 10

This template provides a minimal setup to get React working in Vite and Firebase 10 and Firestore for authentication and real-time database usage.

View on GitHub

2️⃣ Setting up Firebase

You can skip to the next section if you know how to setup firebase proejcts already.

Go to Firebase dashboard and after logging in you can click on start a new project.

After giving your project a name, click on continue.

In the next screen, disable Google Analytics as we’re just doing this for learning purposes and then click on Create Project. It might take upto ~1 min to create the project, once its done click continue and you can see the dashboard of your firebase console.

In above dashboard, click on settings (gear icon) → project settings and then click on the code icon in your apps section. It’ll create a web project inside firebase for us.

Once you’re done with that, you’ll see the below screen and after you enter your app nickname, click on register app. No need of setting up firebase hosting now, as you can host it anywhere or set up at firebase later too.

After you register the app you’ll see where these code snippets, which basically are the instructions on how to install firebase in your project. You can copy the firebase config code and paste it somewhere or come back to it later when we’ll install firebase in our app.

Later click on continue to console. You can see your web app is created now and it’s listed inside your apps section. Awesome, we’ve done the setup inside firebase, lets setup our repository now.

3️⃣ Setting up the starter files

We’re going to be using Vite for development with React. It is a performace based build tool that provides a faster development experience. That’s what I love about it, it’s super duper fast and supports very fast hot module replacement (HMR).

All you have to do is run:



git clone https://github.com/heytulsiprasad/modern-todolist-v1.git

Once the repo is cloned, just run npm install inside the directory. Now you can access the project pretty much by, npm run dev. But you have to replace firebaseConfig in config/firebase.js with your own firebase config which we got from the web.

If you don’t find it, go to Firebase dashboard → project settings → your apps.

Now firebase is successfully added into our project and we can start building our cool features! 💃

Note: You can checkout to final branch later for the final version of the code.

4️⃣ Understanding the starter files

In order to save our precious time, we’re not going to code the entire application from scratch, as we’re just here to expand our knowledge on how to interact with our data using Firestore. It has high scalability, advanced query capabilities and real-time updates.

The project is build using several ready made components available within, Mantine. It’s a fully featured React components library. However some places still use some custom CSS-in-JS so we used some good ol’ styled components.

If you check inside, App.jsx we’re storing the user auth in local state of App component. You wouldn’t want something like this in your production though, as now we have various state management libraries for easy stage management, but as we’re just to learn we kinda go with local state.

The tabs in Home page, is actually Tabs component from mantine. It’s really easy to setup and just check out their docs if you need any help.

One last thing before we chunk out code

We need to activate authentication from firebase.
So go inside dashboard → click on authentication from sidebar and press Get Started

We need to set up a sign in method in order to authenticate our user, so press on Set up sign-in method and click Add new provider.
Let’s choose Google provider for now, as its the most easiest to setup.

5️⃣ Authentication in Firebase

As you can see there’s an Avatar component in the Navbar, so let’s authenticate our user when he/she clicks on the Avatar component. To start with we’re only going to keep authentication using Google. However, feel free to add more options.

Now, let’s add a handleAuthentication callback to run when the user presses Avatar. As you can see in the below code, it’ll by default log in using Google. Here we’re using signInWithPopup action to authenticate the user.



const Navbar = ({ isAuth, setIsAuth, profile, setProfile }) => {

  const handleAuthentication = async () => {
    console.log("Authenticating user")

    const provider = new GoogleAuthProvider();

    try {
      const result = await signInWithPopup(auth, provider)
      const user = result.user;

      // Set to state
      setIsAuth(true);
      setProfile(user.providerData[0]);
    } catch (err) {
      console.error(err);
    }

  }

  return (
    <StyledNav>
      <h1>#modern todolist</h1>
      <div className="profile">
        <Avatar onClick={handleAuthentication} radius="md" src={profile.photoURL} />
      </div>
    </StyledNav>
  );
};

💡 Note: If you’re using any domains other than localhost to run the website, then upon authentication you’ll get an (auth/unauthorized-domain) error. To fix this you need to add your domain inside authorized domains.

Go to authentication → Settings → Authorized domains → Add domain

Now we’ll be able to login using any google account. Let’s code the sign out flow.

As we have a state called, isAuth so depending upon if its true we can log out user or else login user, on the same button click.



const Navbar = ({ isAuth, setIsAuth, profile, setProfile }) => {
  const handleAuthentication = async () => {...}

  const handleLogout = async () => {
    // Sign out user if authenticated
    console.log("Logging out user")

    try {
      await signOut(auth);

      // Clear state
      setIsAuth(false);
      setProfile({});
    } catch (err) {
      console.error(err);
    }
  }

  return (
    <StyledNav>
      <h1>#modern todolist</h1>
      <div className="profile">
        <Avatar onClick={isAuth ? handleLogout : handleAuthentication} radius="md" src={profile.photoURL} />
      </div>
    </StyledNav>
  );
};

This will logout user when they’re logged in and log in the user when they’re logged out.

If you did the above steps correctly, you’ll be able to see the profile picture of the logged in user in our Avatar section as shown above.

6️⃣ Working with data

As we’re done with auth now, we can start adding todos for each user. We’ll be using Firestore SDK for this purpose and we’ll go over the most used CRUD operations so it’ll be easy for us to refer to it back when you’re doing something big.

Before adding our data, we should know:

Firestore stores all data in a NoSQL manner, inside collections and documents.
Documents are the smallest unit of storage, each document is known by an id. Documents are very light weight JSON-like records, they’re not exactly JSON but support few more types of data like nested arrays, geo points, server timestamps etc!
They can collect upto 1MB data max.
Collections are the container of documents, we can have basically infinite number of documents inside each collection.
Collections can be also made within documents, they’d be then called sub collection. They can also store infinite sub documents.
If we delete all documents inside a collection, the collection deletes itself.

1. Creation of todos

In our app, we’re going to store multiple todos for each user. So the schema would be like, users/{userId}/todos/{todoId}. Here, users is the collection and {userId} is the id of the document. todos is the sub collection and {todoId} is the id of sub document.

We can add documents into firestore in two types:

Using setDoc
Using addDoc

We use setDoc when we want to give our document a specific id.



import { doc, setDoc } from "firebase/firestore"; 

// Add a new document in collection "companies"
await setDoc(doc(db, "companies", "google"), {
  name: "Google",
  state: "Bengaluru",
  country: "India"
});

But what if we don’t want to take the hassle of giving an id to our document everytime, thus we can let firestore auto generate an id for us.



import { collection, addDoc } from "firebase/firestore"; 

// Add a new document in collection "companies"
let companyRef = await addDoc(collection(db, "companies"), {
  name: "Google",
  state: "Bengaluru",
  country: "India"
});

// companyRef.id = auto generated id

Let’s create the todos in our app then. We’ve an Input component that handles the new todo entries by user, so we’re going to add this handler in order to add new todos.



// src/components/Input/index.js

const handleInput = () => {
    // Add todo to database
      const todosRef = collection(db, "users", uid, "todos");
      const todoRef = await addDoc(todosRef, {
        completed: false,
        title: value,
        createdAt: serverTimestamp()
      });

      setValue(""); // updates state

      console.log(`Todo created with id: ${todoRef.id}`);
    }
}

In above code, we’re first making a reference to todos collection, then using addDoc we’re passing that reference and an object of new data that we’ve to add, then firebase creates a new document for us.

This is how todos are created.

2. Read all todos

Now in order to display all todos inside each tabs, we need to read all documents from firestore. How do we do that?

We can do that either by fetching all documents once or subscribing to entire todos collection. So that our todos gets updated automatically if new todos gets created/updated/deleted. We’ll go over both of these ways separately.

Read all documents once



async function fetchAllDocuments(uid) {
    const allTodos = [];    
    const todosRef = collection(db, "users", uid, "todos");

    const todosSnapshot = await getDocs(todosRef)
    todosSnapshot.forEach((doc) => {
        allTodos.push({
            id: doc.id,
            ...doc.data()
        })      
    })

    return allTodos;
}

The above function calls the function for once, we can put it inside our useEffect in order for it to run everytime the component is mounted. However this gets the data one time, if we update/delete or create a new todo, it doesn’t update the list again. For that we need to subscribe to a collection.

Subscribe to entire collection



useEffect(() => {
    if (uid) {
      const todosRef = collection(db, "users", uid, "todos");

      const unsubscribe = onSnapshot(todosRef, (querySnapshot) => {
        const allTodos = [];

        querySnapshot.forEach((doc) => {
          allTodos.push({
            id: doc.id,
            ...doc.data()
          })
        })

        setTodos(allTodos);
      })

      return () => {
        unsubscribe(); // when component unmounts
      }
    }
  }, [show])

This is very fast in nature and updates the todos if there’s any change in data. It can also listen for local changes itself, which means even before writing to the backend it’ll notify us about the new data. This is called, latency compensation.

For this we just pass a query inside an onSnapshot function and it takes care of the rest. As this subscription listens forever for new changes, we have to remove them so that our callback functions won’t be called anymore. We can do that calling unsubscribe on unmount, as shown above.

3. Update todos

We also need the ability to update our todos right? Like as you can see while creating the todos we had a completed property which showed if a todo is completed or not. Hence, we use updateDoc function to update documents. Here is an example.



const handleToggleComplete = async (todoId, status) => {
  const todoRef = doc(db, "users", uid, "todos", todoId);

  await updateDoc(todoRef, {
    completed: !!status // smart way of converting any type to type Boolean
  })
}

As we’ve used onSnapshot to subscribe to our todos collection, we don’t need to refetch the latest documents after update, it’ll sync itself.

You also get cool ready made methods to update specific types of data such as:

In nested arrays: arrayRemove and arrayUnion
In numbers: increment()
In nested objects: dot notation (parent.child)

Refer original documentation for more examples on different languages too.

4. Delete todos

Finally, we need the ability to delete todos. This is very simple, we just need to take reference over a todo document and use deleteDoc method to delete it.



const handleDelete = async (todoId) => {
    const todoRef = doc(db, "users", uid, "todos", todoId);
    await deleteDoc(todoRef);
}

Note on delete:

Deleting a document doesn’t delete it’s subcollection. So if you want it’s subcollections to also be deleted you need to manually do that by iteration.
You can delete a particular field inside an document, by using deleteField()



import { doc, updateDoc, deleteField } from "firebase/firestore";

const todoRef = doc(db, "users", uid, "todos", todoId);

// Remove the 'capital' field from the document
await updateDoc(todoRef, {
    completed: deleteField()
});

You should not delete entire collections from the web client. It’s not as per practice and also your app can get very slow from out-of-memory errors as you need to load all documents.

7️⃣ Deploying our project

Nowadays you can deploy your client side web apps almost anywhere for free, like Netlify, Vercel or Surge or even Firebase hosting. However as we’re using Firebase in this tutorial, let’s explore deploying with firebase as well.

Go to hosting.

Steps to host your website:

Install firebase tools (npm install -g firebase-tools)
Initialize your project
1. firebase login
2. firebase init

From features list, we need to choose: Hosting: Configure files for Firebase Hosting
What do you want to use as your public directory: dist
Configure as a single page app (rewrite all urls to index.html): yes
Setup automatic deployments to Github: no
File dist/index.html exists, overwrite? Yes
Deploy complete ✅

Our web app is hosted on: https://modern-todolist.web.app 🚀

🍞 Summary (TLDR)

Firebase provides all types of solutions for making fullstack projects like authentication, databases (firestore and realtime), hosting etc.
Firestore is very good for scalability, realtime data syncronisation and advanced querying support. We’re using firestore in this project to make our fullstack app.
In firestore we’ve certain ways of interacting with data.
- To read any data, create a reference to it first. Use methods like collection() or doc() to do the same.
- Then to create documents use setDoc() or addDoc() and to modify/update data use updateDoc() . To delete doc we use deleteDoc().
- To read all the docs from a collection, pass reference to collection to getDocs() and to read a single doc use getDoc() method.
- We can also subscribe to a collection or document changes, by using onSnapshot() and passing reference to it.
- Use query() to query over data source and use above methods to read data.
Deployment is also easily done by firebase hosting (refer above steps).

8️⃣ Conclusion

Basically today we’ve played around with all types of data in firestore, with this knowledge you can build fullstack data centric applications from scratch using just firebase tools. Earlier if your project grows you needed to scale your servers and all manually but with firebase it all happens seamlessly. You can take up it’s blaze plan (pay as you go) which is also very cheap.

Really excited to see what cool stuff you’re building with it. Let me know in comments down below. 😼

I’m @thebuildguy on Twitter, shoot me a DM if you’ve got any questions! 👋

Working of Garbage Collection in JavaScript: Under the Hood ✨

Tulsi Prasad — Thu, 21 Sep 2023 13:57:55 +0000

JavaScript is a wonderful language. Even after using it for years, there are still processes that happen under the hood, that most people don’t know/care about. Garbage collection is one of them. It is one of the most important parts of the language, but as JS is a garbage-collected language (memory is managed by JS engine automatically) we often ignore such beautiful inner- workings of the language.

What is garbage collection?
Memory management in JavaScript
Structure of memory space
Garbage collection algorithms in JS
- Reference counting garbage collection
- Mark & Sweep algorithm
Common leaks in Memory
- Unexpected global variables
- Forgotten timers or callbacks
- Out of DOM reference
Further Reading

🗑️ What is garbage collection?

Every program runs with a certain memory which it uses to store its variables, function declarations etc. but at some point those entities might not be used anymore by the program and unnecessary storage of it causes memory consumption, which makes the app run slower. This is why we need, Garbage Collection.

Langauges like C exposes the properties like malloc() and free() to manually allocate and free up memory space from the program. But in JS it happens automatically, using algorithms we’re gonna see down below. Hence, JS is known as a garbage collected language.

🧠 Memory management in JS

Basically, memory management is the process of managing memory in a program and it’s job is correctly manage all the entities in a program to it’s respective types of storage, in return helping the program run faster.

The memory management has three steps in it’s lifecycle:

In programs of every language, these three steps are taken in respect to memory management.

Allocate: This allocates appropriate memory space to the respective entities. Manual memory managed languages like C and C++ do this manually.
Use: This step denotes the usage of entities stored in memory space.
Release: It denotes the release of a memory space used by an entity, after the entity is no longer used or is terminated. This step is done by garbage collection algorithms in JS.

🗼 Structure of Memory Space

Before looking for solutions on how to handle garbage collection of JS, we need to know where does JS store it’s entities and how?

The JS engine is very smart in storing data. It segregates all of the entities in two types:

Primitive data types (string, boolean, number, undefined, null and symbols)
Reference data types (objects, arrays and functions)

They both are stored in their own unique ways. In JavaScript data is stored between Stack Storage to store primitive values and Heap Storage to store non-primitive or reference values.

🧊 Stack Memory

This contains the primitive data types like string, numbers, boolean, undefined and null. These are also called as static data, hence the process of its allocation is called, static memory allocation. These values have a fixed amount of memory hence it’s called static data and are stored in stack memory.

Along with primitive values, stack memory also contains the reference to objects and functions.

🍃 Heap Memory

This type of memory is allocated dynamically as per need requires, hence it’s called dynamic allocation. These are also called reference data types and can store large values of variables. The size of this variable is known at the run time only. It has no limit to how much data can be stored.

💡 Pro tip: This memory can also have a limit but depending upon various factors like browser, OS or particular engine limitations. But you can check your memory availability as such:



console.log(window.performance.memory.jsHeapSizeLimit) // 4294705152

The output might vary from person to person, for me it’s around 4.29GBs. But if you’re using something that big, there’s definitely a problem with your app.

🤖 Garbage Collection Algorithms in JavaScript

As we now know how the memory allocation in JavaScript takes place and where all the data is stored, we can now think of how to empty memory which is not used anymore for a program. This process is called Garbage Collection and it’s done by a Garbage Collector.

In JavaScript it happens automatically using algorithms, hence it’s not always efficient depending on the type of algorithm and usecases, as we can’t always predict if some memory block is still in use in the runtime.

However, we’ll discuss some of the most important ones below.

Reference counting garbage collection
Mark & Sweep algorithm
Generational collection

#️⃣ Reference Counting Garbage Collection

This is a very simplistic garbage collection algorithm. It looks through the code for objects references and when a particular object is not referenced to anyone anymore and is not used by any other part of code, hence the algorithm cleans them up, freeing up the memory they were occupying.

We can understand it better from the below example.



// Create object variable
let company1 = { location: "Mumbai" }

// Create references to same object
let workplace1 = company1;

// Clean references
workplace1 = null;
company1 = null;

Here, as we saw after assigning both company1 and workplace1 the value of null, we don’t have any reference to object { location: "Mumbai" } hence, the reference to that object is lost and that memory is garbage collected.

Limitations

Despite of the benefits however, we’ve a limitation of this algorithm. This doesn’t work where there are cyclic references. Example:



let wild = { animal: "tiger" }
let domestic =  { animal: "cat" }

// Create cyclic references
wild.member = domestic;
domestic.member = wild;

// Clean objects
wild = null
domestic = null;

As in the above example, we used member property inside both objects wild and domestic to reference each other, but at the end we declared both objects to null, which leaves their member property to reference to each other, which is not accessible anymore too. This is why Garbage collection becomes difficult with Reference Counting GC.

Note: If we declared wild and domestic variables with const instead of let, then we’d have difficulty cleaning up those variables afterwards. This is because, const doesn’t allow us to modify the value of a variable after its creation, thus if you know that a variable should be garbage cleaned, then declare it with let or var.

This stackoverflow answer by YDKJS author, Kyle Simpson provides a better example of this (here)

🧹 Mark and Sweep Algorithm

As we’ve seen the limitations of previous algorithm, we needed a solution to take care of Garbage Collection in cyclic dependencies. This is what Mark and Sweep Algorithm is good at.

This algorithm checks if a particular entity is reachable from the root of the environment. Example: In case of browser it is window and in case of NodeJS it’s global. This basically marks the objects that aren’t reachable as garbage and sweeps them later, simple as the name suggests. However, it doesn’t clean up the root objects.

According to MDN, all modern browser engines ship a version of mark-and-sweep garbage collector. Improvements have been made to this algorithm but not entire change of its idea.

Benefits

It resolves the problem with cyclic dependencies right away, as it marks every object starting from root and whatever's left unmarked, it sweeps (or cleans up) afterwards. Hence, there is never any unused values left eating up our memory.

Limitations

Even though it handles memory management all by itself, but it doesn’t exactly understand which memory is needed in future or not, hence JS apps can consume more memory than they actually need.
As the algorithm decides when to clean up the marked garbage, your app can be slow or even run out of memory in certain situations (although its very rare)
Hence it’s a good practice to use lower level languages with manual memory management, if you want your application to be as memory efficient as possible.
As we have no control over the algorithm, it can decide when it has to run which can consume our good compute power, hence leaving our apps slower at times.

🚿 Common Leaks in Memory

Memory leaks is an inherent issue with programming languages, where a certain piece of memory is not required by the application but not returned to the operating system or memory pool. This can cause serious issues ranging from: high latency, slow compute or even crashes.

Certain programming languages provide features to manage memory manually but in JavaScript it happens automatically, so we’ve to avoid any situations where memory can be leaked to save us from excessive memory usage. Some of the most common leaks of memory are:

Unexpected global variables

This is the most easiest trap of leaking your memory. The garbage collector algorithm, parses through all the objects starting from the root in runtime. ie (window in browser and global in nodejs) and whatever references that are connected to the root object, will never be garbage cleaned. Hence we shall not put everything in global variables, especially if we don’t need to use it later.

Example scenario.



function placesToVisit() {
        this.sites = ["Agra", "Maldives", "Alaska", "Los Angeles"];
}

// window.sites = ["Agra", "Maldives", "Alaska", "Los Angeles"]

In the above example, if you’d access sites from the window variable, you get the array of sites. But we only need that inside placesToVisit function. This is where memory can’t be cleaned even after termination of placesToVisit function, as sites is attached to window.

NB: If you want to prevent this, you can use 'use strict' at the beginning of your JS files, in this way your JS will strictly parse your files and prevent unexpected global variables.

Forgotten timers or callbacks

As we know there are various timers in JS, like setTimeout or setInterval that can keep running even after their desired work is over. Hence we need to handle those functions explicitly.

For example you have a weather app, which constantly needs to fetch latest weather (lets say every 5 seconds). Hence you write a setInterval which runs once each 5 seconds to fetch data and update your UI. But in case, the user navigates from weather screen to lets say some other page (lets say about) but the setInterval is still running, which is consuming your memory. This is a leakage of memory.



const latestWeatherData = getWeather();

setInterval(function() {
    let home = document.getElementByClassName("home");

    if (home) {
        // Update the UI with the latest weather data
        home.innerHTML = JSON.stringify(latestWeatherData));
    }
}, 5000); // runs every 5 secs

In above example if home is removed from screen but the setInterval will still continue to run every 5 seconds, which is unnecessary. Hence to solve this and save memory, invocation of setInterval can be stopped using clearInterval.



const latestWeatherData = getWeather();

let checkWeather = setInterval(function() {
    let home = document.getElementByClassName("home");

    if (home) {
        // Update the UI with the latest weather data
        home.innerHTML = JSON.stringify(latestWeatherData));
    } else {
        // When home is unmounted
        clearInterval(checkWeather); // stops execution of setinterval
    }
}, 5000); // runs every 5 secs

The same happens with DOM event listeners as well. As we write eventlisteners on some DOM element, it keeps on listening to that event forever. But what if the component is removed from UI, do we still need the listening? No right. In that case we need to remove the event listener to prevent memory leaks.



let todo = document.getElementsByClassName("todos");

function clickHandler() {
    todo.style.textDecoration = "line-through"; // checks off todo
}

todo.addEventListener("click", clickHandler);
todo.removeEventListener("click", clickHandler); // removes listener upon unmount

// User wants to delete this todo
todo.parentNode.removeChild(todo);

Here, when todo is unmounted from UI, the clickHandler function also gets removed or garbage collected. In older browsers this used to be done as they couldn’t handle cyclic references well, but nowadays most browsers have this inbuilt feature to remove observers/event listeners by themselves.

Out of DOM reference

This is a type of memory leak when we keep a reference to a DOM element inside a data structure in our program but later on that component is them unmounted from the UI. Even though the DOM element is deleted, its stored in our memory.



const allCars = [];
const cars = document.getElementById("#cars");
allCars.push([...cars]);

function removeElement() {
    allCars.forEach((car) => {
        document.body.removeChild(document.getElementById(car.id);
    })
}

In the above example, we remove all the cars from the UI, but we still have all the references to cars DOM inside allCars array. This is where memory leak occurs.



const allCars = [];
const cars = document.getElementById("#cars");
allCars.push([...cars]);

function removeElement() {
    allCars.forEach((car, index) => {
        document.body.removeChild(document.getElementById(car.id);
        allCars.splice(index, 1); // removes car element from allCars at index
    })
}

Hence we should also clean up that array while removing DOM nodes in order to save leaked memory.

📒 Further Reading

Garbage collection is a vast concept in programming and due to the battle of performance these days, the algorithms keeps updating time to time. You can follow the blogs of different browsers engines to stay updated on their garbage collectors. Here are some of them that helped me clear my understanding while writing this in first place.

Trash talk: the Orinoco garbage collector · V8

Memory management - JavaScript | MDN

A tour of V8: Garbage Collection

Garbage collection

Video from Arpit Bhayani about Mark and Sweep GC

Mark and Sweep Garbage Collection Algorithm

If you liked this post, you might love what I share as well on Twitter. Let's catch up! 💖

Future of professional networking 🧙‍♂️

Tulsi Prasad — Fri, 30 Sep 2022 16:49:56 +0000

📸 Photo credit - Campaign creators on Unsplash!

📕 Table of contents

What is professional networking?
Why need professional networking?
Benefits of professional networking
Modern day solutions to professional networking
Using social media for professional networking
Why I love peerlist?
- Things that could make it even more stand out
Bonus tips for efficient networking
Conclusion

🎯 What is professional networking?

Professional networking is the sheer act of making relationships or acquaintances with the people closely associated with your career or in your professional domain. This has a lot of upsides given that we’re living in a social world and we’re all dependent on each other to grow as a community.

You can think of it as making friends in your first day of school but specifically with people in your area of interest, which will help you grow mutually and learn from each other’s insights.

🤝 Why need a professional network?

A network becomes a part of your life. You should not just network for sake of networking but rather see it as a means to build real deep connections and friendships that go a long way. But still if you’re not convinced to go out of your way to network, think about the countless benefits that can come as a result.

💼 Benefits of Professional Networking

Well, in todays day and age every other person is connected to thousands online and they in turn multiply to millions and so on. Thus making your network more and more vast. Imagine hiring as a startup, if you’re networked with hundreds of skilled developers you can gather a team of best engineers with a mere tweet and they in turn can refer few great team workers too!!

Plus as a human being, there’s always a need for fresh perspectives on your work or in general which your network can play a great role in providing. You can always get help and share your expertise in your network that makes you a better person too. Ultimately at any point of time, we all need advise on our career and lives in general, guess who’ll come to your help?

✅ Modern day solutions to Professional Networking

I mention modern day, because there are innumerable ways to interact and network with others today. It’s not just one website or mass media, it’s everywhere you go. You can choose to join a professional community (like a meetup group in your area), attend networking events or community conferences (like react_india) to gain more expertise in your domain.

But provided all of them are high effort 😅 and you might have tendencies to procrastinate, there are solutions that you can use from the comfort of your home. These online social networking platforms were made for one purpose for you to connect with the world but not every social media can be used for professional networking. Thus we have mediums like, Peerlist and LinkedIn etc.

📺 Using social media for professional networking

We’ll you asked why this post was called, future of professional networking this is it. Today’s mass communication mediums are not TV and newspaper, they are massive networks like LinkedIn and Twitter. These apps are although very good at too many things but over time have been turned into so much more that it almost feels betraying their primary purpose, connecting people.

Almost every one reading this must have a LinkedIn at one point of time, but using that platform is a hurdle in itself. Their news feed is dying out of scarcity of legit posts and with no correction mechanism there are bazzilions of other unrelated to professional posts which blows my head.

A professional network should not only be useful to make connections but also remain ad-free and distraction free platform only meant to genuinely form connections. It should not only solve a problem of networking but also showcasing specific skills that you have, rather than keeping it tightly knit inside your A4 sized sheet. And I don’t have to explain how terrible it is to handover your resumes or links to all your social portfolios, everytime someone asks for it.

A ~~social media~~ professional network platform shall care for all of this.

💚 Why I love Peerlist?

It is not just a method to connect with people on the internet. It is your homeplace on the internet that can serve as your digital portfolio. I recently signed up to Peerlist (only wishing to try out this brand new platform), but once I made my profile on it I was instantly attracted to its sleek portfolio and multitude of other features.

After struggling to create my own portfolio and applying modifications a number of times I was convinced that it’s always gonna eat up my time to design and create a portfolio for my own (given that I’m a developer and weak-eyed at design). Nor is it easy to create portfolios that dynamically generates all your work across a dozen platforms like, Medium, Github, Dev.to or Hashnode.

This is why I’m planning to keep using Peerlist from now on and I’m actively sharing my peerlist profile as a resume links to recruiters. It’s all that a modern social network must have, to succeed.

// Detect dark theme var iframe = document.getElementById('tweet-1570778429787885568-393'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1570778429787885568&theme=dark" }

Wait, did I mention it also enables you to add people to your private lists so you can keep track of whoever you’re connecting with? 🤩

This is all the more reason to love this platform even though it’s relatively new to the market! Despite making connections you can interact with them on a daily scrolls (which is a news feed like place) to help share information with others and also apply to Jobs, in the jobs section of it.

⚡ Things that could make it even more stand out

There’s always room to grow and we’re getting aware of new usecases every day, thus there could be some things that could always be improved and will get it to perfection! 🚀

One to one DMs

This could help get in touch more personally with your networks. Especially because most parts of networking is just communicating efficiently. This needs to work also so that people can share work with their peers and get that community factor going (also scrolls are already great at this).

Community building

As for the most part, a network is build of groups of people and groups of people are gathered by the voice of a community. It’ll be awesome to have that community factor where everyone is motivating one another. This can be like a private group which will have it’s own scroll content (posted by fellow members) or a group chat which allows everyone to catch up on one another.

Although this can’t be told as the primary necessity of a social network for professionals but, at the building of connections with great bunch of people can really be boosted by those.

💁🏻‍♂️ Bonus tips for efficient networking

Give more than you get

Always be giving. As said by one of famous influencers, Gary Vee, give more than you get. We sometimes get so focused on getting from others that we forget we also need to serve.

Ask good questions and be a good listener

Asking the well prepared questions can help you seek the right kind of information as well as a people need to know that you’re listening to what they’ve to say, else it’s a poor use of their time.

Keep in touch with your network

Networking is a group activity and a long project not an overnight homework that you complete by pulling in an all nighter. Firstly have patience, every good thing will take time to manifest and do follow up after a meetup is over or if you’ve connected with them long before.

🌅 Conclusion

As our elders said, “Rome was not built in a day”, there is no need to worry if you don’t have a half a thousand followers by tomorrow, it’s all about playing the infinite game. If you keep showing up everyday and work towards a common goal, people will notice and start supporting you in due time. Remember build relationships, not connections, it’ll change the way you measure success.

And with that enjoy your weekend everyone and keep building cool stuff!

Say hi to me on my Peerlist profile! 👋 Also if you’re interested in frontend development and more technical content, stay tuned at @heytulsiprasad on Twitter 🐦

Time traveling with Git Reflog

Tulsi Prasad — Wed, 22 Sep 2021 15:12:38 +0000

It's 2021 and I still used to fear before running those pesky git commands, git reset --hard yet another time. Each time I kept a copy of my local branch and even tried having two different projects to avoid silly shenanigans. But eventually, apart from adding tiring overhead, it made me type a bunch more keys than required which I was pretty OCD about.

Then I discovered, git reflog.

Structure:

Concept
Usage
Advanced use cases
- Access reflogs by time
Aversing risk with Reflogs
- Example
- Using Reflog to revive newer files
- Force pushing branches after rebase
For more references
Conclusion

Concept

Git is very good at keeping track of changes that are happening to its HEAD. So each you do things commonly including, git commit, git merge or git reset it tracks it using reference logs.

Every time your branch tip is updated, git automatically stores a ref of that information for you. But mind that, this is temporary storage. You can only reference your history up to a certain point (~3 months) so it's not always reliable.

Usage

It's as simple as it sounds. You can see your reflog using:

$ git reflog

3844466 (HEAD -> main, origin/main) HEAD@{0}: merge refs/remotes/origin/main: Fast-forward
f7acb57 HEAD@{1}: checkout: moving from feat-c to main
fc859f8 (origin/feat-c, feat-c) HEAD@{2}: commit: Add c
f7acb57 HEAD@{3}: checkout: moving from main to feat-c
f7acb57 HEAD@{4}: pull: Fast-forward
6932227 HEAD@{5}: checkout: moving from feat-b to main
07087ce (origin/feat-b, feat-b) HEAD@{6}: commit: add b
6932227 HEAD@{7}: checkout: moving from main to feat-b
6932227 HEAD@{8}: Branch: renamed refs/heads/master to refs/heads/main
6932227 HEAD@{10}: commit (initial): added a

Note: References are local to each user, it'll only contain changes that you make on your local copy of the repository

As you can see each ref has the commit ID, we can use this to see what the state was like at that point in time and if need be, can also jump to that specific point altogether.

You can see constituents of a reference using:

$ git show HEAD@{2}

commit fc859f87f8af7e7eaea88280b8ff5c5406920581 (origin/feat-c, feat-c)
Author: Tulsi Prasad <heytulsiprasad@gmail.com>
Date:   Sat Sep 18 09:33:41 2021 +0530

    Add c

diff --git a/c.js b/c.js
new file mode 100644
index 0000000..76fbf09
--- /dev/null
+++ b/c.js
@@ -0,0 +1 @@
+console.log("c was here");

Alternatively, you can either use the commit ID or relative notations of HEAD too.

More on knowing various relative notations using HEAD.

Advanced use cases

Along with tips of HEADs, git also keeps track of stashes, other branches, tags, remotes via references too. But by default git reflog only shows the reflog of HEAD ref. HEAD is always the tip of the current branch.

Thus when you run, git reflog it implicitly means git reflog show HEAD.

To see reflog of the entire project, use git reflog --all

You can use reflogs for stash as such:

$ git reflog show stash

f0c040c (refs/stash) stash@{0}: WIP on feat-e: f0082bb add d
29e2513 stash@{1}: WIP on feat-e: f0082bb add d

Note: You have to have used git stash before in your project to see the reflogs.

Similarly you can track the origin branches like this:

$ git reflog show origin/main

3844466 (origin/main) refs/remotes/origin/main@{0}: fetch origin: fast-forward
f7acb57 refs/remotes/origin/main@{1}: pull: fast-forward
6932227 refs/remotes/origin/main@{2}: update by push

Access reflogs by time

Reflogs also have a time of the executed command attached to it, so you can basically leverage this to see the difference in history between any two points.

Some default time strings.

1.minute.ago
1.hour.ago
1.day.ago or yesterday
1.week.ago
1.month.ago
1.year.ago

Using them to see the diff:

$ git diff HEAD@{0} HEAD@{4.hours.ago}

diff --git a/d.js b/d.js
deleted file mode 100644
index 81fe3ac..0000000
--- a/d.js
+++ /dev/null
@@ -1 +0,0 @@
-console.log("d was here")
\ No newline at end of file

So this implies as reflogs keep track of all your changes to the tip, like merge, rebase, reset, etc thus all your commits are safely kept inside reflog even after you get rid of them. Although this by default stores for (~90 days), you can manually update that.

Aversing risk with Reflogs

Now that you've known much already about conventions of reflog, now we can discuss how you can make it your safety net and use Git super-confidently all the time.

Example

Git Reset has been the bermuda triangle of commits for me, especially when I used to copy-paste commands from StackOverflow (please don't do that).

Let's say this is my log at one point in time and for some reason I decided to go back where I had just a as only file.

$ git log --oneline

* 724281a (HEAD -> master) add d
* cf20425 add c
* e1f07f6 add b
* 4037ca4 add a

$ git reset --hard 4037ca4
HEAD is now at 4037ca4 add a

$ git log --oneline
* 4037ca4 add a

Using Reflog to revive newer files

$ git reflog

4037ca4 (HEAD -> master) HEAD@{0}: reset: moving to 4037ca4
724281a HEAD@{1}: commit: add d
cf20425 HEAD@{2}: commit: add c
e1f07f6 HEAD@{3}: commit: add b
4037ca4 (HEAD -> master) HEAD@{4}: commit (initial): add a

$ git reset --hard HEAD@{1}
HEAD is now at 724281a add d

$ git log --oneline

* 724281a (HEAD -> master) add d
* cf20425 add c
* e1f07f6 add b
* 4037ca4 add a

As simple as that. 🤷‍♂️

Force pushing branches after rebase

A few days back there was a tweet on why you should keep your branch's backup before rebasing and I instantly knew what can be done, as I was halfway through the post lol 🤣. So here's a common use case you can avoid with reflog.

// Detect dark theme var iframe = document.getElementById('tweet-1438869955517186052-513'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1438869955517186052&theme=dark" }

Ideally, force pushes are not recommended but when you rewrite your history (knowingly), this leaves us with this only option. However, in case this leads to breaking changes and you want your previous state of repo back, you know where I'm going with this.

Hopefully, you don't need to read anymore, if you've come all the way. I'd like you to continue when you've thought of a solution in your head.

~/Desktop/dev/git-ref (ijkl) $ git log --oneline
e4719d6 (HEAD -> ijkl, origin/ijkl) add l
87552ac add k
63841dc add j
0446b52 add i
724281a (origin/master, master) add d
cf20425 add c
e1f07f6 add b
4037ca4 add a

~/Desktop/dev/git-ref (ijkl) $ git rebase -i HEAD~4
hint: Waiting for your editor to close the file... 
hint: Waiting for your editor to close the file... 
[detached HEAD 1c7df0b] add ijkl
 Date: Sun Sep 19 16:56:54 2021 +0530
 3 files changed, 3 insertions(+)
 create mode 100644 i.txt
 create mode 100644 j.txt
 create mode 100644 l.txt
Successfully rebased and updated refs/heads/ijkl.

~/Desktop/dev/git-ref (ijkl) $ git push -f
Enumerating objects: 6, done.
Counting objects: 100% (6/6), done.
Delta compression using up to 8 threads
Compressing objects: 100% (2/2), done.
Writing objects: 100% (5/5), 423 bytes | 423.00 KiB/s, done.
Total 5 (delta 0), reused 0 (delta 0), pack-reused 0
To https://github.com/heytulsiprasad/git-ref.git
 + e4719d6...1c7df0b ijkl -> ijkl (forced update)

See above, I created four commits and rebased them to squash them into one before making the PR. But I accidentally dropped a commit add k which had k.txt file in it. But I've already force-pushed the commits to remote.

~/Desktop/dev/git-ref (ijkl) $ git log --name-status -1
commit 1c7df0b3fbeb46dfafb19fb5740ecac19f1a470a (HEAD -> ijkl, origin/ijkl)
Author: Tulsi Prasad <tulsi.prasad50@gmail.com>
Date:   Sun Sep 19 16:56:54 2021 +0530

    add ijkl

A       i.txt
A       j.txt
A       l.txt

Now let's do some disaster management.

~/Desktop/dev/git-ref (ijkl) $ git reflog
1c7df0b (HEAD -> ijkl, origin/ijkl) HEAD@{0}: rebase (finish): returning to refs/heads/ijkl
1c7df0b (HEAD -> ijkl, origin/ijkl) HEAD@{1}: rebase (squash): add ijkl
cb62728 HEAD@{2}: rebase (squash): # This is a combination of 2 commits.
0446b52 HEAD@{3}: rebase (start): checkout HEAD~4
e4719d6 HEAD@{4}: commit: add l
87552ac HEAD@{5}: commit: add k
63841dc HEAD@{6}: commit: add j
0446b52 HEAD@{7}: commit: add i
724281a (origin/master, master) HEAD@{8}: checkout: moving from master to ijkl

~/Desktop/dev/git-ref (ijkl) $ git reset --hard HEAD@{4}
HEAD is now at e4719d6 add l

~/Desktop/dev/git-ref (ijkl) $ git log --oneline
e4719d6 (HEAD -> ijkl) add l
87552ac add k
63841dc add j
0446b52 add i
724281a (origin/master, master) add d
cf20425 add c
e1f07f6 add b
4037ca4 add a

This is how you can get your most important k.txt file back and leave work each day like an absolute winner. 😅

For more references

For more tragic fuckups
Atlassian has a nice article on reflog too

Conclusion

Not all disasters can be avoided but knowing the ones that can is better than nothing. This reminds me of a quote from Picasso, “Learn the rules like a pro, so you can break them like an artist”. Tweet me your favorite git tricks that saved your day for real. You'll find me @thebuildguy on Twitter.

Huge thanks to Sreetam Das, Pratham Krishna, and Aditya Raj for reviewing this post beforehand, it really helped to make this post better.

Making your console log statements stand out

Tulsi Prasad — Thu, 15 Jul 2021 16:20:31 +0000

Yes, the above image is from the console and you can customize the text however you like. To know how keep reading till the end.

It's been a while since my last post, it's because I got into learning some interesting stuff and undoubtedly writer's block was back. But recently, while working on a large repository that had a lot of stuff logged in the console I wanted a way to clear all the clutter and make my console statements stand out from the rest.

Here is how I was able to do that and how you could too.

So these are the possible options:

Using different console methods
Using various format specifiers (believe me, this is magic ✨)

Using different console methods

You might already know some of the basic ones, like:

console.log
console.info
console.error
console.warn

But some of the more cool ones, are:

`console.table`

This can be used to log large nested objects or arrays so you don't have to go through expanding each key to view the whole thing.

let peoples = [
  {
    name: "Richard Hendricks",
    location: "Berkely",
    cell: "4254-024-8162",
    age: 32,
  },
  {
    name: "Christiansen Frederikke",
    location: "Madras",
    cell: "4987-024-2562",
    age: 34,
  },
  {
    name: "John Doe",
    location: "California",
    cell: "3143-344-342",
    age: 53,
  },
];

console.table(peoples);

You can also log objects as such:

`console.group` and `console.groupEnd`

You can group a set of console logs having a particular meaning apart from the rest using this method.

const title = "Me and my boys";

console.group(title);
console.table(peoples[0]);
console.info("Weather is very beautiful today ☁");
console.warn("Don't fall for the beautiful weather");
console.groupEnd(title);

This is what it'll return:

Pro Tip: Use console.groupCollapsed() to have the logs closed by default.

`console.time()` and `console.timeEnd()`

If at all you're ever interested to know how much time a particular block of code takes to run, you can achieve this using console.time().

console.time();
Array.from(new Array(400)).forEach(_ => console.log("Zzzz!"));
console.timeEnd();

`console.count(label)`

It logs incrementing counter values starting from 0. You can use label to distinguish between different counters. To stop one from counting above, you've to use console.countReset(label).

console.count("Awesome"); // Awesome: 1
console.count("Awesome"); // Awesome: 2
console.count("Awesome"); // Awesome: 3
console.count("Awesome"); // Awesome: 4
console.countReset("Awesome");

console.count("Awesome"); // Awesome: 1

Using format specifiers

Believe it or not, console logs can be more than just simple messages. You can include an eye-catching message or something more convincing as your favorite dog image.

All because you can use format specifiers inside them. How?

List of available format specifiers

%s ⇒ Formats as string
%i ⇒ Formats as integer
%f ⇒ Formats as float
%O ⇒ Formats as object (yes that's capital O as in Oregano)
%o ⇒ Formats as DOM element
%c ⇒ Formats as CSS ✨

Formats as string, integer, float

console.log(
  "%s, told me that we're going to mall today with %s",
  "Alan",
  "Mike"
);
// Alan, told me that we're going to mall today with Mike

console.log("We had %i mangoes today", 56);
// We had 56 mangoes today

console.log(
  "Did you know, Tesla Model S can reach 0 to 60 mph in %f seconds?",
  2.3
);
// Did you know, Tesla Model S can reach 0 to 60 mph in 2.3 seconds?

Formats as Object

Formats as DOM Element

Formats as CSS

Adding your CSS to the second argument of console log by separating each of them with ; does the trick.

console.log(
  "%cThis is actually very interesting",
  "color: yellow; font-size: 35px; background-color: red;"
);

You can also add multiple styles in the same log by using multiple %c specifiers.

console.log(
  "%cThis is actually %cvery interesting",
  "color: blue; font-size: 55px; background-color: yellow;",
  "font-size: 55px; background-color: blue; color: yellow"
);

If that looks a bit messy and you have a lot of styles to give you can put the styles in a separate array and use them wisely.

let blackBackground = [
  "font-size: 50px",
  "background-color: black",
  "color: white",
].join(" ;");

let whiteBackground = [
  "font-size: 50px",
  "background-color: white",
  "color: black",
].join(" ;");

console.log(
  "%cAwesome stuff is %ccoming your way",
  blackBackground,
  whiteBackground
);

Last but not the least, a picture says a thousand words.

let backgroundImage = [
  "background-image: url(https://source.unsplash.com/random/1200x800)",
  "background-size: cover",
  "color: hotpink",
  "padding: 100px",
  "font-weight: bold",
  "font-size: 25px",
].join(" ;");

console.log("%cPicture says a thousand words", backgroundImage);

You can do all sorts of manipulation and get more creative with the power of CSS, it's up to you.

If you're still wondering how the above banner was made, well here's that code.

let backgroundImage = [
  "background-image: url(https://i.pinimg.com/originals/5b/43/02/5b4302c2f6413454c782aeec866143cf.gif)",
  "background-size: cover",
  "color: black",
  "padding: 100px",
  "font-weight: bolder",
  "font-size: 40px",
  "-webkit-text-stroke-width: 1px",
  "-webkit-text-stroke-color: yellow",
  "text-transform: uppercase",
  "text-align: center",
  "letter-spacing: 1px",
].join(" ;");

console.log("%cMay the force be with you", backgroundImage);

That's it, super easy! 😃

Conclusion

For me, all that mattered was for the logs to stand out and be more catchy on pursuit of which I found out a ton of more cool stuff we can do, hope this gives you more clarity on the gem of a function, that console is.

Catch more updates on @heytulsiprasad 👋

I made a chrome extension that helps you slack off in your Google Meet meetings

Tulsi Prasad — Mon, 12 Oct 2020 07:49:43 +0000

🎉 Alert Me for Google Meet

A Chrome Extension that notifies people when certain words are being spoken in a Google Meet Meeting opened in Chrome browser. You can set the alert words yourself with your name or any word you want to be notified for. Use it to your own advantage.

This doesn't recognize the voice in the meeting by itself, that's done by Google when you turn your captions on, so if it doesn't work as shown here, try checking if your voice is recognized by Google.

Popup interface to add/remove alert words

Notifications appear when those words are spoken in meeting

Motivation (User Story)

This is a pet project I made to know how Chrome extensions work (which proved to be very valuable 😅). You can use it at your own risk, as if you get caught while slacking off at work meetings, I won't be held responsible.

Instructions

It's pretty simple, feel free to follow below steps if you get stuck:

Join a Google Meet call
Add/remove alert words through the popup
Make sure to Turn on your captions for extension to know when words are spoken
You'll get a notification when someone speaks your alert words

URLs

This extension isn't live on Chrome Web store yet (coz my card isn't accepted by it for paying of the registration amount). So you can download latest release from GitHub itself. Follow the README.

GitHub

Do ⭐ the repository!

heytulsiprasad / alert-me-google-meet

Detects live captioning in Google Meet conference to notify you when specific words are spoken

Alert Me - Google Meet

Popup interface to add/remove alert words

Notifications appear when those words are spoken in meeting

⚠️ The app is in pre-release now, so feel free test it and create some issues so we can make it bulletproof before publishing on the chrome store.

Motivation (User Story)

This is a pet project I made to know how Chrome extensions work (which proved…

View on GitHub

Twitter

Don't forget to share it with your Twitter fam! 🕺🏻

// Detect dark theme var iframe = document.getElementById('tweet-1314541624068722688-413'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1314541624068722688&theme=dark" }

Thanks for reading! Let me know your thoughts in comments.

Have a nice day and take care! 💙

Uploading media assets from React using Cloudinary

Tulsi Prasad — Sun, 04 Oct 2020 14:25:30 +0000

Hey everyone! In today's standards, it's not uncommon to see every other website has some kind of visual content by themselves or for the user to upload. And keeping factors such as performance, rich image optimization it becomes even difficult to handle all of it using built in techniques. That's the problem Cloudinary solves almost perfectly, thus we'll see how to implement it in our React app ecosystem.

Living Example

I usually don't like making examples just for blogs (as they're time consuming) but I like showing real projects that I worked on and how I implemented it in my project.

Speaking of, last week I made this app to learn about authentication, where you can create your account (OAuth/Local) and edit your info, like image and name, so I liked to try out Cloudinary. You can tap Change Photo (on edit page) to add your photos, this is handled by Cloudinary in React itself. You can find it on my GitHub. (talkto-frontend and talkto-backend)

Do you have a Cloudinary Account?

You can create a free account on Cloudinary, here. I'll show how to setup your project on there with screenshots below.

Creating the Markup

So to upload any file from the frontend, we need to have an input tag with type equals to file. Then we'll pass the file inside a FormData object and make the post request to our Cloudinary endpoint (we'll see how to get one below).

Here, InputFieldImage is a child (presentational) component which contains our input tags and all the values are passed to it from its stateful parent component. Link to source.

const InputFieldImage = ({ title, id, value, ...rest }) => (
  <FieldContainer>
    <ImageFieldContainer>
      <img className="upload-image" src={value} alt="Person Profile" />
      <span className="material-icons input-icon">camera_alt</span>
      <input id={id} {...rest} />
      <label htmlFor={id}>{title}</label>
    </ImageFieldContainer>
  </FieldContainer>
);

This is the how InputFieldImage is called from its stateful parent component. Link to source.

<InputFieldImage
  title="Change Photo"
  value={image}
  id="upload-photo"
  type="file"
  accept="image/png, image/jpeg"
  onChange={this.imageChangeHandler}
/>

Now all we need to care about is that onChange handler, imageChangeHandler, which goes like this. You can display beautiful toasts using the imageError dialogs we've provided, to increase user experience. Link to source.

imageChangeHandler = e => {
  const imageFile = e.target.files[0];

  if (!imageFile) {
    this.setState({ imageError: "Please select image. " });
    return false;
  }

  if (!imageFile.name.match(/\.(jpg|jpeg|png|gif)$/)) {
    this.setState({ imageError: "Please select a valid image." });
    return false;
  }

  // Utils function
  imageUpload(imageFile, url => {
    this.setState(state => ({
      ...state,
      profile: {
        ...state.profile,
        image: url,
      },
    }));
  });
};

Here, imageUpload is an utils function that handles the post request work to Cloudinary and then runs our this.setState inside its callback which then passes the fetched image url as a prop to InputFieldImage component. This is how our image is displayed on the box after its uploaded.

Getting the Cloudinary Endpoint

Once you logged in, this is how you're dashboard will look like.

And your endpoint will be something in terms of this: https://api.cloudinary.com/v1_1/:cloud_name/:action

Our action here would be /image/upload as we're uploading images and cloud name will be as shown in your dashboard.

One last thing we need is an upload preset, which we'll pass with our FormData object, it'll define default behavior of your uploads. You can create/get one inside Settings → Upload then scroll down to upload presets.

If you're creating one, you can select signing mode as Unsigned. This will allow you to perform uploads directly from the browser without going through your servers. Once it's done, hit save and you're preset name will appear as shown above.

Making the upload request

As discussed, we need to create our imageUpload utils function now. Link to Source.

import axios from "axios";

const imageUpload = (imageFile, callback) => {
  const formData = new FormData();

  formData.append("file", imageFile);
  formData.append(
    "upload_preset",
    process.env.REACT_APP_CLOUDINARY_UPLOAD_PRESET
  );

  axios
    .post(
      `https://api.cloudinary.com/v1_1/${process.env.REACT_APP_CLOUDINARY_CLOUD_NAME}/image/upload`,
      formData
    )
    .then(res => res.data.secure_url)
    .then(url => callback(url))
    .catch(err => new Error(err));
};

export default imageUpload;

This function takes, imageFile from our component and the upload_preset we get above, then appends it to the FormData object which is then passed along with the post request to our endpoint. We also pass a callback function that is called after the image link is obtained, where the state is changed and new image link is passed on as prop to InputFieldImage.

Cloudinary Upload Widget

This is a great feature that you can take advantage of. It shows an upload widget which allows you to upload files from various sources, like Dropbox or Google Drive. You can also add it to your project according to requirements. You can refer the official docs or this blog for clarification with React.

Although I haven't used any transformations in my example, but you can absolutely use them if you want to crop or do some fancy edits, all you have to do is add your transformation to end of your request endpoint. Or if you want the edits to happen by default you can do so while setting your upload preset.

This is what an endpoint will look like if you want to crop an image. Refer docs for more.

https://res.cloudinary.com/demo/image/upload/w_200,h_150,c_crop/sample.jpg

Conclusion

Cloudinary provides many more powerful features like video compressing for fast loading and robust transformations. It also has a wide range of integrations for use with any platform of your choice. You can have all information on their homepage. It's free account gives 25 credits which allows for approx 1GB of storage (check pricing). You can see all your uploads inside Media Library.

Have a great day :)

DEV Community: Tulsi Prasad

ProgressPals: Your last productivity app

Backstory

What I Built

Demo

Repo

heytulsiprasad / progress-pals

Ending procrastination since yesterday morning

Progress Pals

Copilot Experience

GitHub Models

Conclusion

Does it have real potential as a product?

How to use WebView in React Native?

Create a React Native project

Add dependencies

Link native dependencies

For iOS and macOS

For Android

Implementing a basic WebView

originWhitelist prop

Loading local/inline HTML files

Injecting custom javascript to webview

injectedJavascript prop

injectJavascript method

Communicating between JS and React Native

Handling Navigation State Changes

onNavigationStateChange prop

References

How to paginate queries in Firestore?

Table of contents

Getting Started

heytulsiprasad / find-mates

Huge people's directory used to demonstrate pagination in firestore

Features

Building the app

Implementing Pagination in Firestore

1. Getting total number of people

2. Fetch first batch of data on render

3. Handlers for previous and next buttons

4. Creating the Paginator component

5. Creating the PeopleCard

Tips and Best Practices

Conclusion

Web Notifications API — One Byte Explainer

Explainer ⚡

Additional Context ✍️

Bonus Reading 💖

Top 5 things about Git learnt after I started working as a developer

Disclaimer ⭐

✍️ How did I learn this?

Getting Started

heytulsiprasad / git-top-skills

Git playground for learning git concepts

git-top-skills

1️⃣ Git Reset

1. git reset --soft

2. git reset --mixed

3. git reset --hard

Time traveling with Git Reflog

Tulsi Prasad ・ Sep 22 '21

2️⃣ Git Stash

3️⃣ Interactive Rebase

Under the hood of rebase

Tell us what an interactive rebase is then?

4️⃣ Git Cherry Picking

5️⃣ Searching for code

More ways to filter commit history:

✨ Bonus: Showing commits beautifully

📕 Additional Reading

🏳️ Conclusion

Building an entire fullstack project with Firebase 10 and React (Vite)

Table of Contents

1️⃣ Getting Started

heytulsiprasad / modern-todolist-v1

Starter files for blog on using Firebase 10, Firestore and React in Vite

React + Vite + Firebase 10

2️⃣ Setting up Firebase

3️⃣ Setting up the starter files

4️⃣ Understanding the starter files

`originWhitelist` prop

`injectedJavascript` prop

`injectJavascript` method

`onNavigationStateChange` prop

1. `git reset --soft`

2. `git reset --mixed`

3. `git reset --hard`

`console.table`

`console.group` and `console.groupEnd`

`console.time()` and `console.timeEnd()`

`console.count(label)`