pomodoro: for whom the clock beeps

Guess what. I don’t care if my clock has a few millisecond drift. Not enough anyway—the scale is minutes, not tenths-of-a-second, the precision isn’t that important. The default time is twenty-five minutes, which is 1.5 million seconds. There’s a lot of room for slop in there. Why this is important is because I decided I wasn’t going to implement a drift-checking timer, as per the link I posted last week.

I said I was going to talk about flexbox on Thursday and then spent it talking about git and GitHub.  So, a little about flexbox.

This is one of the ways to be responsive.  The CSS involves letting the parent element know that it has to display flex and anything about the overall flex display that it needs. Here’s a snippet from the CSS file for the wiki-viewer. In order to allow a grid display, I have to use flexbox. I wanted 3 per row and I have ten items, so I needed to wrap them.

1
2
3
4
5
6
7
8
.gridBox {
display: flex;
flex-wrap: wrap;
position: relative;
top: 55px;
margin-bottom: 20px;
font-size: 18px;
}

Here, the children need to know that they they only get 30% of the available horizontal space and that they can’t grow but hey can shrink. The flex works a lot like the border property in that you can either specify parts of it or shortcut it into one attribute. Here I shortcut it. The three values are flex-grow, flex-shrink, and flex-basis.

1
2
3
4
5
6
7
8
9
10
.gridDisp {
flex: 0 1 30%;
height: 350px;
margin: 5px;
padding: 5px;
cursor: pointer;
overflow-y: auto;
border: solid 1px #008800;
border-radius: 0px;
}

For the clock (which is what we’re supposed to be chatting about) the important issue was I wanted responsiveness while keeping my stuff aligned in columns and rows. It’s a little more involved so I’ll skip the code examples, but feel free to hit up the style.css on the repo and look around.

Back to the basic clock. I thought it was done when it counted down, but I hadn’t thought that someone might press [Start] twice. So I fixed it to where a second press of [Start] does nothing. Next, someone explained that what they expected, was, if you tried to increment or decrement the active counter, it would stop the countdown. Good call. I implemented that.

The beep. I have a file in .MP3 format that is five beeps. You only hear one because I only play the first second of it. It was taken from freesound.org

I also futzed around with the look of it. I decided having a button that changed from [Start] to [Stop] looked cool but might be confusing to the person using it (besides, the other two items have two buttons).

Here is the new look of the Pomodoro Clock.

pomodoro: the clock stops here

Preparing to turn in my calculator means I can turn my attention to the next project.  Build a Pomodoro Clock. This will require me to learn new things, like time-based anything and how to cause my HTML to emit sound.

But like any other HTML/web project, the first part is figuring out what it will look like. Here is a screenshot of my Pomodoro Clock.Incurably retro.  I got the idea from someone who mentioned they had a seven-segment font they were using for the calculator project and I thought how totally awesome that was for a clock.  Now this font, being truly seven segments has no plus sign or colon.  So the buttons (and the text) are in the Roboto font. which is how the real world deals with seven-segment stuff. Which is to say, they don’t use it except for the actual digital display.  What you can’t notice from the screenshot is everything is in rem not px.  This meant I had some artifacts and issues trying to make the actual clock part of the display work.  I resolved them with Flexbox. You’ll find out more Thursday.

The person who helped me with the flexbox also gave me a link to a stackoverflow discussion about javascript timers.  It’s interesting and relates well to stuff I saw on CSS Tricks.  The key to using anyone else’s code is that you have to understand it and not only how it works but why it works.  If I can’t, I’ll look other places.  The synthesis of the two sites is working for me in understanding that a function that counts time based on milliseconds will drift from the actual time and that you may want to adjust for it by checking against the real time now and then. The main issue seems to be how often do you need to do this to stay on target vs having extra overhead.  I’ll know more Thursday when we meet again.