🚀🚀Manage Work From Home effectively using wfh kit
Tags: react, opensource, webdev, javascript
Published: 2021-01-06 05:30:34

First post of 2k21 let this be a successful year for everyone😄

COVID-19 the thing that changed the pattern of the whole world. It's almost been a year since we (exception for those who already went to office) visited the office. But then it's a sudden and dramastic change for the people like me who not used of working from home.

Ok but working from home is nice is'nt ? spending more time with family , pets . A mixed yes and no will be the answer for this question. People saying no will be the one who's missing the office coffee and snacks. Yeah WFH can be both productive and life balancer when you manage it correctly. 

#WFH Benefits
* Late wake up
* Break time is not fixed
* you can deside the working time
* network issue,rebooting issue these lies can be a life saver
* spending time with your loved ones
* no costume issues  
```Simply you work from home rest all are benefits😁```

#WFO Benefits
* fixed work timing
* provided snacks & coffee
* break & fun time with collegues

So Everything seems to be good in WFH ! what's the concern ? yeah ! everything will have it's own downside too. Mainly we're going to address the health related things.

#WFH Concerns
* Extended work 
* Dehydration
* Sitting in a same position for a longer period 

I think if we address these 3 concerns work from home can be a great thing to enjoy. Chill it can be easily done using the **wfh-mate** ,wfh-mate is the helper application i've created to solve these things. 

##How wfh-mate helps you ? 
* wfh-mate can help you with the following,
* Measure your working time.
* Make your notes.
* Manage your todo lists for the day.
* Get to know the date, plan for upcoming days.
* Helps you to take a quick & accurate break.
* Remains you to take efficient water and stay hydrated.
* Allows you to follow 20-20-20 rule (Take a 20 second break! * Look at a 20 feet object for 20 seconds).
* Finally shows the total hours worked , total break taken. 

https://karthick3018.github.io/wfh-mate/

It has 3 layers 

##1.Work timer, calender

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/l2liexgh6tf715f6nmck.png)

this layer has the start button to start the work for the day and end button to end the work at end of the day.

#timer
The timer updates each second and displays how long you've worked for the day. This can help you to finish your after the actual hours of work (8 hrs is official working time here!). After the time you can close your official work and start spending time for your personal things.

#calendar
This is one of the thing i've searched often. Even in the holidays i've logged-in to the office system since I don't know what day it is ! So wfh-mate has a calendar that displays the current date,month and formatted date. You can click that to get the detailed calendar.

##2.Notes & todo's 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hppfdcthsjuogwghb84l.png)
We should not test our memory skills in the list of work todo. If you're correct at 9/10 times that one failed can let you in a difficult situation. So mark your list of works to be completed in the particular day using the todo / textarea provided. 

##3.Water & break timer
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9i2n9n7eaj56w1cur98v.png)
Here comes the most important part or the main line based on which i've created the application. 
*Break timer* - Break is the one which we will less or may be morley use😉 during the WFH. Should avoid taking break ? definitely not!
```Taking a quick break can really help you to fix the things you've been stuck with ``` my most the toughest debugging occurs during the break time , but that must be controlled break as well ! So this timer helps you to take a quick controlled break when the break ends it alerts you by sending a desktop notification or a alert tone or both.

*Water break* - This is the main one we're missing during the WFH even in office too since we're surrounded by air conditioners we get less thirst ! but that can't be a reason . As per U.S. National Academies of Sciences, Engineering, and Medicine , the intake should be 
* About 15.5 cups (3.7 liters) of fluids a day for men
* About 11.5 cups (2.7 liters) of fluids a day for women

so how many of u following this ? myself not ! so this timer can execute every 20/30 minutes and remain you to intake water. Using that break make sure you're drinking the above mentioned level.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2ycrah0j26p11gtq2gby.gif)

#20-20-20 rule!
Ever heard of this rule ? this is the one we need to follow to avoid *CVS (Computer Vision Syndrome)*  stress caused to eyes by looking at the monitor for a long time.
So here 20-20-20 rule comes to play _every 20 mins take a break for 20 seconds and look at a 20 feet away object_. Whenever the water break alerts , you can follow this rule too! 

#End stats
Once you're done for the day you can press end task and that will give you the exact hours of work you've done after pressing the start work button along with a approx break time taken ! 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nds1vw5u6sdn58pc5jeu.png)

These are the things i've taken to solve and given a solution using the following site. It's like a step ahead of POC . You can use this site to achiveve the above mentioned things . The funky this in the site needs to be replaced by a functionality in the upcoming release.

_leave the improper design stuff's i'm not that good in that_

#Project fetures 
OK this project solves somethings that all ? can i close ? 
Nope ! not only as a website it can help you with some of the react patterns( add-ons to it !)

* Compound Components (intresting stuff this year credits @kentcdodds)
* Custom hooks
* Reusable UI elements
* Sticky notes and neumorphism effects using pure css

so that's all about **wfh-mate** use this in your regular day work. Let me know your feedbacks ! forgive me if any error occurs 😉

Use the **wfh-mate** [here](https://karthick3018.github.io/wfh-mate/)

Check the complete project [here](https://github.com/karthick3018/wfh-mate) 

 ------------
 *check my dev projects on* [github](https://github.com/karthick3018)
 *Follow me on* [twitter](https://twitter.com/Karthick_R_30)
*connect with me on* [linkedIn](https://www.linkedin.com/in/karthick-raja-dev/)
*check my styles on* [codepen](https://codepen.io/karthick30)

_*cover image illustration credits https://dribbble.com/udhaya_

-------------
*Thanks for your time*
*Happy coding ! Keep Sharing*
*Stay Safe*