DEV Community: stagefright5

Bye Bye, Annoying Twitter Login Banner!

stagefright5 — Fri, 23 Dec 2022 20:09:04 +0000

TL;DR

Extension that hides login banner on twitter website: Chrome Web Store Link

Why

You must have observed that when you visit twitter, when not logged in, an annoying blue bottom banner appears in your face, asking you to log in.

If you are like me, you probably don't want to login just to see a public post. Also, the login banner is so annoying.

So, I built an extension just for this.

What does this do?

It hides that bottom banner based on your preference. That's it.
If you want to login, you can easily unhide it and login.

Features

Hide/Show the bottom login banner in https://www.twitter.com
Persist this setting across browser restarts
Hide/Show state is synchronized across different tabs and windows where twitter.com is open ON THE SAME DEVICE

When the banner is NOT hidden
When the banner is hidden

Here is the source code: GitHub

Update:

Extension is published now! Chrome Web Store Link

You can also install locally by cloning the repo. Click here for the guide

~~I have submitted the extension for reviewing to publish it to the Chrom web store.~~

~~I will update this post with the link when it gets reviewed and accepted. Did not expect the process of publishing to chrome web store to be so long and tedious!~~

Also, this is my first browser extension. So, it might have weird non standard code.

@All WebDevs - Please Remove Your Type Definitions From the Top of The Page

stagefright5 — Mon, 06 Sep 2021 05:33:09 +0000

It gets in the way of reading the code. It's mostly not helpful if I'm trying to get the gist of the code.
Please move it to the end of the file or maintain it in a separate file.

Wierd Async/Await Behaviour in JS 🤔

stagefright5 — Tue, 15 Jun 2021 08:48:53 +0000

Apparently the non async code inside an async function will execute synchronously even if you don't await.
Consider this code example:

async function f() {
    g('adsasdasd'); // note that it is not `await`ed
    console.log('000');
}

async function g(m) {
    console.log('g', m);
}

f() // calling `f`

I always thought it would produce this output:

000
g adsasdasd

BUT, the actual output is like this

g adsasdasd // function `g` is executed first!!
000

Can anyone explain this?

How to ultra-over-engineer a useless piece of software (or why human interaction is important)

stagefright5 — Wed, 07 Apr 2021 22:51:22 +0000

^{(cover image: from here)}

This is the story of the of the most useless (may be) npm package. I am warning you that this will be a waste of time.

Why?

Whenever I wanted to setup a new project, I used to always run these commands:

npm init -y

And,

git init .
git add .
git commit -m "Initial commit"

So, I thought of automating it.

I thought of writing a tool (FML 🤦‍♂️!) that could execute a series of commands.

ENTER THE Uninit

How does it work?

This will basically read a json file that has a schema object. This schema object should have key-value pairs of schemas.

User can select a schema by passing a cli argument (-l) that points to the json file containing schemas as key-value pairs:

--skip-confirm=true option is passed. Otherwise, user has to confirm the execution of each task.

This is a sample schema object. Here, there are tasks that will run sequentially, when the schema is run:

This is how the tasks are run sequentially:

Observe the last task (no. 4). This task's command has placeholders

${commit_head} and
${commit_body}

So, the tool will

Parse the command
Take the values for each of the placeholder from the user (you can see something like, "Value for placeholder_0" in the image)
Replace the placeholders with these values
Execute the replaced command (Here, git commit -m "This is commit header" -m "This is detailed commit descriptions")

Structure Of Schema (You can skip and go to PS)

Each schema has the folowing structure:

description(string): Describes the schema
tasks(Array<{name: string, command: string}>): name property is a unique id for this object task object. command is the command to execute. command can take user inputs. If there is any placeholder in the string(in this form: ${user_input_1}), then the tool will parse it and asks the user for input for each of the placeholder.

PS

You might be thinking,

"Why The F, would I ever use this instead of a simple shell script! This is a completely useless piece Of Sh*t!"

And, you would be ABSOLUTELY right.

This whole exercise made me realize why you should say your "awesome" ideas out loud, preferably, to other human beings.

Anyway,

Here is the repo: https://github.com/stagefright5/uninit (if you want to explore the code of this amazing software), and
NPM Link: https://www.npmjs.com/package/uninit