Open Source backend in just 1 File

muneebbug — Tue, 12 Jul 2022 20:13:12 +0000

Hi, I'm Muneeb, Freelance Front-end Developer. I will keep the post short and to the point.
So I came accross an Amazing Open Source Project called PocketBase developed in GOLang. I was blown away with the capabilities of this project. Read more on their repo.

There's no need to manage 100's of file for your backend. you just have a single executable file and that's it. Feels untrue right? I thought that too but when I tried it, I was speechless.

Here are the features mentioned on their website

Realtime database
Authentication
File storage
Admin dashboard

Just one file. Damn. Here's how to get it
Go to this link and download the file for your specific OS.

Then you need to unzip the archieve. In my case on Linux I used following commands

Head over to downloads folder where you saved it.

cd Downloads

Then you need to extract the archieve

unzip pocketbase_0.2.4_linux_amd64.zip

Then you need to open the extracted folder

cd pocketbase_0.2.4_linux_amd64

and final step

./pocketbase serve

Hurrayy!! Your Self-Hosted Real Time Server is rolling on

http://localhost:8090

The admin panel UI is hosted on

http://localhost:8090/_/

and the REST API is hosted on

http://localhost:8090/api/

Now go to http://localhost:8090/_/

Pretty simple HUH? So here's the first time signup page

and here's the ADMIN Panel for you. Congragulations, You have your own self-hosted backend in just 5 minutes.

Thanks for reading my post ❤️ Leave a comment!

@muneebbug

Using Lodash/Underscore in Vue 3

muneebbug — Sun, 29 Aug 2021 19:51:01 +0000

Hey millionaires,
I have been working on Vue JS for a while and recently encountered a problem while trying to use Lodash in Vue Components.
The issue I faced was

this is undefined

I tried for like 2 hours but can't figure out what was going on until I found a solution and the reason of the problem.

This is due to scope of function and keywords.

following example explains the scope working differently between two function types.

// This variable is in the window's scope
window.value = 'Bound to the window';

const object = {
  // This variable is in the object's scope
  value: 'Bound to the object',
  arrowFunction: () => {
    // The arrow function uses the window's scope for `this`
    console.log(this.value); // 'Bound to the window'
  },
  regularFunction() {
    // The regular function uses the object's scope for `this`
    console.log(this.value);  // 'Bound to the object'
  }
};

This is what my vue component looked like

<template>
 <div>
  <button @click="GeneratePreview">Generate</button>
// other bunch of code
 <div>
</template>
<script>
//  LODASH
import { debounce } from "lodash";
export default {
  name: "Code Editor",
  data() {
    return 
    };
  },
  mounted() {
    this.createHTMLEditor(this.$refs.htmlEditor, "htmlmixed");
    this.createCSSEditor(this.$refs.cssEditor, "css");
    this.createJavascriptEditor(this.$refs.jsEditor, "javascript");
    this.HTMLEditor.on("change", () => {
      if (this.autoRun) {
        debounce(this.generatePreview, 250)
      }
    });
    this.CSSEditor.on("change", () => {
      if (this.autoRun) {
        debounce(this.generatePreview, 250)
      }
    });
    this.JavascriptEditor.on("change", () => {
      if (this.autoRun) {
        debounce(this.generatePreview, 250)
      }
    });
  },
  methods: {
    generatePreview() {
      this.html = this.HTMLEditor.getValue();
      this.css = this.CSSEditor.getValue();
      this.javascript = this.JavascriptEditor.getValue();
    },
  },
};
</script>

Here's the fix and proper way to use Lodash inside vue component.

created() {
  this.debouncedMethod = debounce(this.debouncedMethod, 250);
},
methods: {
  methodToDebounce() {
    // Do some things here
  }
}

so component looks like this after fixing.

<template>
 <div>
  <button @click="GeneratePreview">Generate</button>
// other bunch of code
 <div>
</template>
<script>
//  LODASH
import { debounce } from "lodash";
export default {
  name: "Code Editor",
  data() {
    return 
    };
  },
  created() {
    this.debouncedPreview = debounce(this.debouncedPreview, 250);
  },
  mounted() {
    this.createHTMLEditor(this.$refs.htmlEditor, "htmlmixed");
    this.createCSSEditor(this.$refs.cssEditor, "css");
    this.createJavascriptEditor(this.$refs.jsEditor, "javascript");
    this.HTMLEditor.on("change", () => {
      if (this.autoRun) {
        this.debouncedPreview();
      }
    });
    this.CSSEditor.on("change", () => {
      if (this.autoRun) {
        this.debouncedPreview();
      }
    });
    this.JavascriptEditor.on("change", () => {
      if (this.autoRun) {
        this.debouncedPreview();
      }
    });
  },
  methods: {
    generatePreview() {
      this.html = this.HTMLEditor.getValue();
      this.css = this.CSSEditor.getValue();
      this.javascript = this.JavascriptEditor.getValue();
    },
  },
};
</script>

That's all and that simple. All I did was wrapping our function in debounce function and returned a new one that already has debouncing built in. and now calling this.debouncedMethod() will call the debounced version.
Hope it will help you guys.

The solution is referenced from this article.

DEV Community: muneebbug

Open Source backend in just 1 File

Using Lodash/Underscore in Vue 3

This is due to scope of function and keywords.