______            _______  _______ _________ _       
(  ___ \ |\     /|(  ____ )(  ____ \\__   __/( \      
| (   ) )| )   ( || (    )|| (    \/   ) (   | (      
| (__/ / | |   | || (____)|| |         | |   | |      
|  __ (  | |   | ||     __)| | ____    | |   | |      
| (  \ \ | |   | || (\ (   | | \_  )   | |   | |      
| )___) )| (___) || ) \ \__| (___) |___) (___| (____/\
|/ \___/ (_______)|/   \__/(_______)\_______/(_______/

Enjoy!

Idea came from the show Silicon Valley!

• Kanban Board is a really useful method for managing pretty much anything in life, it's built on Agile principles and is part of the Scrum methodology, which is a part of the Agile "framework".

Active Deployment: https://burgil.github.io/

Table of Contents

• The Story
• The Problem
• First Impressions
• Agile - Scrum - Kanban
• Reinventing the Wheel
• Bonus
• Credits
• Installation
• Usage
• How it Works
• Add a Category
• Support
• Contributing

(I've written all of that in 18 minutes and 36 seconds!)

The Story

I've recently finished watching all 6 Seasons of Silicon Valley and had a great time, during the show I've noticed some stuff were a little too authentic, I had to google it and there I found this thing called Scrum, and finally had time to learn a bit about Agile, and Kanban Boards.

Owning a large board myself that was usually full of mess, I must say the experience changed the way I work.

Suddenly everything began to be organized.

Finally I was able to see the bigger picture as I was staring at my wall full of those little sticky notes.

This is the moment I knew that it will forever change the way I create stuff, or work on stuff.

The Problem

One tiny problem raised as soon as the next day hit, Some sticky notes started falling off the board! I started to get obsessed about losing some sticky notes, I was sure I lost some and this is when I realized this new method isn't as efficient and smart as I initially thought it was.

Well, I was already too invested in it, I said to myself, I can just organize a larger space where no note will ever be lost and get better sticky notes that actually stick, lol, and that will solve the issue right?

But man, I already had all the build right there, getting a new one is just too much, I just want to work on my startups after all, working on how I will work is technically a waste of time according to everyone around me lol.

So while closing some tabs on my browser I found a google search that led me directly to the original author masterpiece!

First Impressions

I was immediately both amazed and terrified by this site, it was overwhelming to see after what I've been through, I basically saw an exact replica of the board I had in real life.

I also paused the show in the middle, took a screenshot, and used a ruler to divide my board into 6 even parts, and named the columns: ICE BOX, EMERGENCY, IN PROGRESS, TESTING & COMPLETE.

I was amazed by how high quality the board was compared to any other screen shot you can get from the actual show.

This was a big project, so give a big shout out to the people who made this originally, I loved it.

Funny enough, I was also terrified as mentioned, and the reason for that is far more complex than one paragraph will be enough to explain, so let's create another headline, that's super fun using README boilerplate made by fraction (Github Profile).

Agile - Scrum - Kanban

That's just too many things to explore in one day and expect to understand anything.

One thing I did understand, is that it all requires a team.

I started googling how I can "solo scrum", lol, but after watching so many videos about those topics I simply found out that using a virtual board like Trello to manage your work really defies what we are trying to do here.

The whole point is that when we finish working on a "virtual" feature on our app or website, we can literally stand up and mark the task as complete in our real world, it's much more powerful when you think about it.

Of course you can use Trello for example, my favorite to-do app, to handle pretty much 10x more information with images, hyperlinks, real time collaboration and so much more. It may well be the next social platform for work if you ask me lol.

But this is where things are a little too complex, and defies the agile\scrum methodology!

Think about it and try to understand, you finish work, fix a large bug in your website for example, you are exhausted, you need a break, your eyes simply can't afford to open Trello and start digging through the thousands of boards and sticky notes filled with information as far as the eye can see.

We need something simpler that allows us to get off our computer for once, and physically change tasks from in progress to completed, think about that.

Reinventing the Wheel

Ok so if the wheel has already been invented why the **** do we need to reinvent it, or more like why did I reinvent it?!

Well, nothing is huge enough, smart enough nor good enough.

Everything can be better, success is a float not a boolean, or in human words success is measured by more than just true or false.

One wheel can be better than the other, facts are some company businesses are literally reinventing the wheel.

Ok enough of that, let's talk about what we reinvented here shall we, What wasn't good enough about this awesome project?!

• The notes position and text will not save when you refresh (Fixed)

• The categories were hard to modify via the code (Fixed)

• The categories were literally impossible to modify and move via the interface (Fixed)

• Notes could swallow behind the screen and disappear (Hard Fixed)

• The canvas wasn't so responsive when resizing the window (Semi Fixed) -

  Notes can be zoomed smoothly but saved at the position of your screen size therefore when you literally move the window into another screen the entire formula will mess up and some notes will be under the full height, but fixed the designs and made the background table more responsive.

• The project was from 6 years ago, and had no contributions, made on a framework that I could not run, and wasn't made out of pure css, html, and javascript (Fixed)

Special Feature:

If you downloaded the project instead of using the online version, you can feel free to move this folder anywhere around your PC,

the notes will be saved to the local storage on your browser no matter where it is.

Original Project:

Modified Project:

The project was originally created by someone named GnashHS (Reddit) / remyc95 (Github)

Bonus:

As far as I'm aware, there isn't any way to cause any harm to pc's with just html css and javascript,

 (Edit: I just found out it is possible technically, but those loopholes are closed with each and every update to your browser, I recommend you learn how to update your browser, in chrome we have to go to about, technically in version 100 of chrome someone found an exploit that I will not name because it's still a secret apparently made to prevent abuse, but anyways the point is that technically javascript apparently can be exploited and get people to actually run stuff on your pc somehow, I was actually amazed by how they do that because think about it javascript has no way of doing that in the first place, it looks like those vector of attacks use memory manipulation last time I checked but I guess every exploit is unique in it's way and what I've seen is just one example of many)
 
 But you can rest assured that I did not do any of that, and you can read that in the source, and the 6 years old project that hasn't got updated for that long also has no chance of doing that, those exploits are being closed as soon as they open usually, in some rare cases it's being delayed a few months while actual bad people use it, so I read, never actually experienced any of that and I click many sketchy links, it's so scary to think about it, I open a website and boom I'm infected lol, this is clearly something that shouldn't happen right? or so you will think, and this is something that happens on the browser so it's not like we can really protect against it, except only surfing well known websites, anyways, just make sure you update your browser to like 101+/102+ since I read it's the safest version to be at for your browser, and think how crazy it is you can just open a link in a website and it can run an app or a peace of real code in your machine it actually has a name so dangerous I don't even wanna mention it here to avoid any bad keywords lol. Like saying voldemort in harry potter lol.

but if you want to feel safer, take those libraries called jquery and whatever and find their source or remove them completely,

to be honest I usually never use jquery and manually code all animations and all the css using vanilla CSS and JS for better performance and just because I like it and hate using the $ sign to code.

The important codes are located in style.css, script.js and index.html, everything else is just dependencies you can replace.

I mostly rewrote some of the html, some of the css, removed scss need, and modified 99% of the script.js,

it's all fully readable and not obfuscated so you can read and trust it.

Credits

I would still like to maintain some credits to my original work and make sure it's not resold, I don't know if I have the right to do that but since the author stated the project is open source I guess I can modify it and reshare it, but not resell it, he did not however put a license on his git repo and therefor the repo is technically protected and can not be copied for commercial use so don't try guys, this is stated by Github somewhere.

In short: If a repository has no license, then all rights are reserved and it is not Open Source or Free. You cannot modify or redistribute this code without explicit permission from the copyright holder.

Original Github Repo

Source for the author statements

Github statements

Will be worth mentioning that I technically never used his github repo, just his general permissions, and simply CTRL+S his website using my Chrome browser. So technically the internet is open source, and I got my code off the web, which is open source by all definitions, and any attempts to make the wide web closed, failed, it is and will always be open (; open for everyone, and by anyone.

The web would have never existed in the first place without it being open-source, nobody will know how to create websites in the first place, not even your professors.

therefore nobody can use this work for commercial use unless both the original author and me will approve the use of my rewritten code, or if the original author wish he can simply add a license to his repo and people can start working from there.

I don't think there is anything profitable here just a really cool kanban board, and as the original repo stated it was meant to make the world a better place, so I basically am writing all of this just to let you guys know it will not only be not moral to take this code and sell it for whatever reason, I believe it's also not legal to do so but god who cares let's not share what we don't want to be shared or sold and share what we do, so basically I'm trying to say use at your own risk and all that stuff that protect people who share code and blah blah god forgive me and you and him bye.

Oh and I also did not added a license just to keep the standards (;

Installation

Open your terminal/command prompt(cmd.exe) and clone the repository:

git clone https://github.com/burgil/burgil.github.io

Usage

Change directory and start the app:

cd burgil.github.io
./index.html

I created a shortcut on my desktop, put that folder on my documents folder, and put a Board icon on the shortcut.

How it Works

All notes will be saved inside the local storage of your browser:

1. Open devtools (F12 or CTRL+SHIFT+I or Right Click + Inspect)
2. Go to the Application tab
3. Expand Local Storage and click on file://
4. All the notes data will be inside a key named Notes and the rest of the categories will be located inside the keys Cat1, Cat2, Cat3 and Cat4. (And also very important to keep the NextNoteID key as high as it is, it prevents non-unique id's and helps maintain a simple to use javascript)

Add a Category

You can also optionally create more categories, I've made it easy to choose their color,

simply open the index.html file and locate the cats array at the top of the file inside the head tag and under the title tag,

now simply add a new line containing your category color and name,

just make sure the color name is unique it doesn't need to match any pattern, it acts as the class name that it generates for the color,

no need to update the text again as it acts as the default text for the category,

you can ofcourse later change the category names and it will be saved in the local storage along with their position!

Support

Please open an issue for support.

Contributing

Please contribute using Github Flow. Create a branch, add commits, and open a pull request.