dheerajdlalwani / back-to-work

A simple browser extension, intended to get you "Back To Work" when you start slacking off to one of those really addictive sites.

Me, Myself and I

• Hi! I am Dheeraj Lalwani.

• This repository is about Me, Myself and I.
  

• I work mainly work with backend, databases, networking and anything server-side.

• Recently I've also started verturing into client-side development.

• I call (want to?) (consider?) myself a builder and someone who's interested in Product Development.

• I love experimenting with very small things in products, be it an easter egg in some project or a subtle animation or even small but helpful additions in projects which reduce friction between the user and the product.

• I find inner peace when I am plugged in, EDM music blaring and I'm knees deep sunken into hacking a project or a solution to some problem I've been facing in real life.

• Sometimes, I struggle (attempt to?) write about my experiences, thoughts and feelings here.

• You can take a look at some of my work on GitHub.

• If you wish to know anything else about Me, Myself and I, feel free to raise an issue.

• There are multiple channels to get in touch with me. I love talking to people.

• So please feel free to reach out to me, especially if you're working as a Backend Engineer, Networking, Databases, Server Side, Research or anything and anything in tech.

• Email - [email protected]

• Blog - Some things Just Like This ...

• GitHub - dheerajdlalwani

• LinkedIn - lalwanidheeraj

• Twitter - @DhiruCodes

back-to-work's Issues

enhancement: Detailed status of the modes.

Current ui

1. When chill mode is on, it says chill:
   
2. When work mode is on, it says work:
   

Enchancement

While in chill mode, the status text shall say chilling... and on hovering over that it should say work or maybe switch to work clicking upon which shall switch to work mode and status text should say working... vice versa.

Check the clip below.

btw.mp4

feat: Add current website on the go to block list

Suppose I am on a website which is diverging me to a whole new thing and not letting me focus on the stuff I chose to do while switching to work mode. So what I should be able to do is, open the extension window and just click on the button which says Add current page to block list and that's it. The tab closes and I can't access it till I go to chill mode.

question: how to go to the home page

Once the extension is unpacked and loaded, I get the home page.

But how do I get back there again?

Right now, when I reload the extension, I get the homepage:

Support: Add suport for Mozilla Firefox

I was trying to install this extension on firefox(primary browser) but it seems that Manifest v3 is not supported.

Mozilla on Manifest v3 support
https://blog.mozilla.org/addons/2021/05/27/manifest-v3-update/
https://blog.mozilla.org/addons/2019/09/03/mozillas-manifest-v3-faq/
Possible solution:
Downgrade version v2 to support firefox. I have not read the source code of the extension so I don't know if that would be a problem.
I'll be happy to work on this if any major work is required.

alt: clean JS, better implementation using classes

Review: The code here can be shortened by creating classes and defining styles in the stylesheet.

back-to-work/src/popup/popup.js

Lines 7 to 18 in fc5c982

	console.log("popup.js line 7, mode = ", mode);
	modeButton.innerHTML = mode;
	if (mode === "Chill") {
	bgColor = "#00d660";
	color = "#000000";
	} else {
	bgColor = "#f95050";
	color = "#ffffff";
	}
	modeButton.innerHTML = mode;
	modeButton.style.backgroundColor = bgColor;
	modeButton.style.color = color;

It can be shortened more using a default, which I assume is Chill. Have the HTML, state & styles initially for that.

Have a class for Work, and toggle that whenever necessary.

 (mode === "Work") ? modeBtn.classList.add("work") : modeBtn.classList.remove("work");

Now CSS for work would be something like:

.work {
  content: "work";
  background-color: #f95050;
  color: #ffffff;
}

Reason to do that?

Keeps the JS clean and and implementation short. No need for item.style.backgroundColor etc.

Enhancement: Redesign blocklisted website UI

Current UI

Redesign UI

The current UI could be updated with the above-mentioned UI. This is just to give you an idea you can make it more aesthetically pleasing.
I'm not good at CSS so forgive me. Below is the code snippet just to give you an idea.
https://gist.github.com/gupta-shrinath/6194e225375170d153bfa2c30727c862

Enhancement: Convert markup into semantic HTML

The source code is pretty much filled with non-semantic markup. Need to use proper semantic tags for example <section>, <main> wherever appropriate.

bug: duplicate check for websites && check for a website

Duplicate check for websites.

Ah this is a fun problem ⬇
Edge cases:

Edit: Just saw, need a URL validator. I guess similar to what you built in the URL shortener.

docs: add local setup instructions

• Add local setup instructions in the README
• Similar to what you posted on the socials

enhancement: better CTA, extra margin, etc.

1. Different Call to actions button should be styled differently

2. Extra margin here at the bottom won't hurt :P

3. Once URL is typed, pressing enter should do the job of the Add button.
   It is a good UX.