My pomodoro clock. What do you guys think? Any feedback is highly appreciated. I did not test it on IE/Edge and Safari.
I spent a week on this, and I think I could easily invest another hour or five. It always surprises me how much there is to do on a seemingly simple project when you care for the little things.
Anyway, I used SVG for my clock. I think it was a good decision, given that vector graphics always look crisp, no matter their size. Learning how to draw an arc took some time, though. I even made a pen just to learn how to create paths in svg. I hope it will be helpful for others, too.
I tried to make my page as accessible as possible, which is not as straightforward as it should be, I think. I still don’t know how to hide :before content reliably from screen-readers, but I hope they can overlook the occasional weird unicode character.I also wrote a prototype for synchronizing user preferences between ui, code and local storage. It’s probably far from bug free, but I think it helped me a lot. It’s buried somewhere in the code, should anybody be interested. I tried to thoroughly comment my code, I hope it’s good enough.
On the next project, I think I’ll measure how much time I spend on everything. Probably too much on finicky details nobody cares about, except me 
.
2 Likes
Pretty sick timer overall, good design and lots of interesting functionality that I wouldn’t have thought to add. The only criticism I could possibly give (this is definitely one of the best I’ve seen), is that sometimes giving the user more choices isn’t always better. Like the ability to change the color of the timer is pretty unnecessary and in my opinion just adds extra clutter to the page. Just my opinion and overall nice job. The other thing I noticed is the amount of javascript and css code you had…while I’m sure some of it is necessary because you added more functionality than I did, I can’t help but think at least some of it could be somehow simplified. My code is by no means perfect but if you want to take a look: https://github.com/twmilli/pomodoro, it might help a bit. Overall killer result!
2 Likes
Hey, thanks for your feedback.
It’s for colorblind people, red and green is problematic for almost all of them, orange and blue not so. I understand what you mean, though. I wanted to add a way to collapse all settings, but I decided to end this project 
Yep. I agree, less is often more. Just setting up everything takes 340 lines. I try to write reusable, modular code. All logic is decoupled from ui stuff and neatly packed so that I can reuse it without adjusting it.
In other words: I’m really into over-engineerung
As for the css… just styling a slider for three different browser families takes a hundred lines. Of course, I’m sure there’s a lot to improve. At the end I just dumped the styles in I needed, no matter how repetitive. I am so done with this project.
Thank you kindly. I’m not gonna lie, I love reading stuff like this 
.