The Weekly Web Dev Show: Pomodoro Timer | HTML | CSS | JavaScript

Key Takeaways

[Music] [Applause] hello hello there yeah michael jason elim is here tigering it up and dave collison is here with his elephant yes if you're wondering what this is this is something we do here on the scrimba live streams yes if you want to put a bunny rabbit in the chat and if you've been before hit me with that tiger yeah totally say hello if you're here very excited to see everyone who mel sam hello benjamin helpfest is a china tiger tim wrinkle plenty of submissions this time very nice dave hello with you uh caffeinated pixels says me yes also howdy for you today cowboys out there sabon hello who miriama is a rabbit nice to see you here curious choice of ad do i have an ad is it in here interesting i hope it's nothing too incriminating hello lucho javier is here as well brilliant so as you know we are here to look at the pomodoro submissions yes extremely exciting there were many of them so let's have a look at them hello ramen and javier did i say happy i think i did anyway let me share i also know that many of you have submitted including you karen yes so let's start looking at the ones who are here in the chat triple tiger says lecho jackie jackson hello there how are you pretty good yup can't complain hi hi yes okay i am going to go through the chat and i'm going to look at your submissions starting with the ones who are here i have a feeling although it is michael it's michael uh was the first one to submit so we better have a look at michael's yes a lovely gradient you know i love a gradient you can work and it says currently working you can pause that's really useful actually because you know the doorbell rings or you know your cat knocks over your desk or whatever always good to pause and you can stop completely and then there is a short break and a long break having a good long break but what happens if i click this wowie i can adjust my times which is good for me because i like to have 30 minutes because then you can count the hours better than 25. adjust the brakes maybe you know you've got a 20 minute massage booked unlikely but who knows yes you can adjust your timers super cool solution from michael well done you yeah dave submitted his and it is rather cool allow me to show you this one here it is called one and two and rest yes and it has this incredibly funky design and you can start i haven't worked out what these do yet oh that one's a reset or they all are this is amazing it's got a date in there it's got everything i'm looking at how this actually works because this is extremely advanced especially when you compare it to the one that we live coded last friday and that was difficult actually reset mode buttons uh oh little gradient ah so it has like different stages this is amazing i am seriously impressed by this it's taking things to a whole new level and look at this the amount of time is depicted by this green bar extremely creative well done uh dave try an orange button they let you choose the section of time oh wow look at this so the size of them kind of um yeah reflects how long the time you're doing is how cool is that i can just look at it all day and then also it changes color when it's live extremely creative yeah impressive says tim very amazing it says lacho yeah can you check my pomodoro yes i can i'm going here it is snowbit press typing effect and then oh wow look at all this heading one you can write some of your important notes he's talking bye cat food that's handy definitely and then you can change it you can do bold what's this a link wow so cool so complex certainly is yeah and then so do i actually have to do work before i can have a break oh man that's not fair but probably good baseball is oh wow a great accuracy of 90 short break off we go three seconds of that is a very short break short break it smells like a factory back to work sound yeah oh okay i will work again yes yeah look short break and long break will not be used before work very good try clicking the coffee button okay what's gonna happen oh i can't believe oh look at that should i click it get up no okay moving on up to uh scrolling so i have shown not sure if melson has one benjamin do you have one this is a benjamin i'm not sure if it's the benjamin but well have a look at it anyway lovely tomato design i like the ones with tomatoes very nice oh look at that smooth running and it has i spy a little ding sound effect so it's really like the actual pomodoro timer no not this wiki like this yeah very nice benjamin tim let's take a look at yours submitted today i believe go with a hot pink styling very nice on hyper speed even better i like watching the numbers counting down and uh tim has sorted out the problem we experienced on our last live stream which was a scrimba on friday this one here we realized uh that you have an issue with the numbers counting down in that they don't automatically say double zero they just have one zero which we don't want in this context and we spent an awful lot of time fixing that yes so well done tim for finding a way around that yes her caffeinated pixels has submitted one as well oh yes but his real name it's stevie i don't know if i'm meant to reveal that i think it's on his twitter right hopefully it's fine oh yes it's gone full on tomato with slight internet blip there um a nice yellow uh effect when you click the buttons which i really like and pause you can also adjust the settings and there's a reset button what more could you want yeah beautiful well done caffeinated pixels who else lacho i'm pretty sure had one uh put this here this one here let's focus on the learning yes good idea work it's time to start let's go brains always good pause continue while i'm waiting for the uh working section i guess to finish i should remind you all to vote yes there's only four minutes left so put your votes here don't forget you can vote for more than one yeah so many to choose from how are we doing still 34 seconds i really want you to see what happens when we get to the end of this maybe i should have done the short one never mind actually it was lacho who suggested a good workaround for our padding problem on friday so if you want to see how lucho did it well i mean i can show you on here where is it this is how um lucha did it sorting out the missing series [Music] yes that's what happens when you finish you get a moving noise very nice and that's it yes uh absolute ramen okay let's have a look at after romans lots of bells and whistles on this one yeah i'll start with a coffee break i like the big numbers really big numbers but maybe i need more coffee break so i can reset okay oh and you can do 30 second increments so if it takes 5 minutes and 30 seconds to brew your coffee you can adjust that warning are you sure that you want to end this session early sessions under 30 seconds will not be recorded record it eh no i don't i will continue oh nice some nice lo-fi music and then statistics are recorded down here different modes how do i change the modes this nope this i'm intrigued or maybe it was this no i want to know how to change the modes i wonder says marika how people come up with these awesome designs i wonder too yes because that well you've seen the designs i've come up with definitely not on this level i really love that outdoor ramen says lucho and dave says wow that's big how nice yes it is let's see who wins exciting all these could be parts of scrimba featured projects totally yeah ah the modes oh all right our work short break long rake got it very nice indeed abdul ramen half have feeling submitted one this one a very nice uh glacier i like cold snowy places a lot of people dream of the beach but i find the beach very overrated it's hot and you have to swim and yeah i much prefer something like this where it's cold and lonely and i can sit in a log cabin anyway short break in the snow and i have a sound beep beep that's what happens when my short break ends in a nice glass morphic effect well done to you yes holy buckets says tim wrinkle yeah very inspiring designs they are extremely you'd probably like canadia leanne i probably would yeah i want to go actually who else is here i got to have to scroll back up one moment i got as far as caffeinated pixels i think yeah and then abdul ramen karen definitely has have a look at carrots this one here how nice and tidy is this and a really nice font i'm going to use this what's the name of it css paper or something to check it out it's montserrat that is nice i like it a lot i'm always looking for fonts because everyone uses ubuntu and what's the other one poppins i'm always looking for a new one to use mozzarella is nice anyway short break ah and what is really cool is this um circle fills up so reflect the time very good indeed can who else is here if you're here and you've submitted wave at me and i will have a look at it because there are so many of you cool what's this comp's new date date i won't read all of this oh really wow so today we should have been there on friday this is how you deal with the old um missing zero the screenshot huh might make a video about it thank you dave who else not sure if anyone else is here so uh tell me which ones to look at oh this one louise has submitted this very nice very colorful gradient yeah and yeah what this is a really good idea actually you can enable dev mode and then the time goes faster so you don't have to um wait for the real 25 minutes to see what happens and we've got this circle is emptying rather than filling so very creative let's see what happens when you end oh a change of color how cool is that start short break back to the working colors very nice louise i was so busy on friday really oh no well you're here now and that's what counts canada is awesome but i'm biased oh um oh miriam i have also submitted let's check it out this one here with a beautiful perfect ripe looking tomato how many pomodori which is the real plural of pomodoro will you smash today and catch up on your work see what she did there i like a pun let's do one minute work oh yeah congratulations yes mush it all for today oh can see mine i will for coding and give the feedback definitely let's do it oh well for coding oh yes a very nice futuristic design we can have a short break we can have turbo we can oh uh yeah i really like the sound effects and it gets logged here let's try a work one and what's good about this is um when you're in turbo mode the button uh changes and says so you can switch between normal and turbo currently on turbo yes logging more work fabulous yes oh i'm a language teacher i had to play with the language i used to be a language teacher yeah awesome check out gb the preference panel is great okay oh have a look chibi ah this one oh yeah so i will begin a short break taking and then i can submit different um times i can change the font how cool is that and i can change my color and there's the option to automatically start the next step a helpful tool tip visualize sequence progress icons i think it means um this circle filling up or not let's turn it back on sure it's a very nice design though and there's also the option to turn the ticking off if you're like my cat i'm aggravated by ticking you can turn it off yeah that's a cool one very nice oh someone's in brighton i used to live in brighton yeah but now i'm in wales please use turbo yes i think i did what will be the next challenge all will be revealed very shortly oh one of your favorite spots to visit we might have crossed each other in the street dave isn't that strange yeah hola or ola guys yeah uh okay i think it is time to reveal the winner because we only have a few minutes left can you believe it time has flown right so let's find out who has won wow check it out with 28.3 percent of the vote it is mike earley which was the very first one submitted wow just shows it pays to get it in early i'm not sure if it actually makes a difference but yeah maybe it does because you're at the top you know this is a fabulous submission with wonderful gradients and a really cool ui work currently working shocked face says michael elaine yeah tell me well i'm not shocked it's very nice and another shocked face congratulations thank you yes michael um contact me on twitter and i will organize your well-deserved prize so you win six months oh screambo pro and um a voucher for this swag that's it yeah brilliant ah my brilliant code on the weekly web website doesn't need to move his entry yeah it's a very nice one i am super impressed by this it's creative to say the least so you can visualize this and then click this and then the next step is this and then you do this and then this and this and then a long break perfect well done to everyone who took part uh especially to michael who has won and i also need to select a random winner let's do that now i'm hesitating because i need to generate my number to do this there is grim this one submit actually i only really needed js const comments yeah amazing random winner equals am i even doing this right i think i am then i write random number j yes because i always have to look it up i want this and i want this but this should be 42 because there are 42 submissions party time okay so this will generate a random number between 1 and 42 i guess i hope oh i need to actually show it console.log amazing random winner not alert 16 42 is the answer to the question i see what you did there dave yes actually on this occasion the answer is 16 so 3 6 9 12 15. mayman is the random winner this time well done mayman squeeze your time short break so mayman uh contact me and you'll have six months of screamer pro for free yeah awesome oh i can use js console.com and all that does that is nice oh well i don't mind thank you i'm doing ramen i need to tell you what the next challenge is get ready to rumble because here it is yes it's a gradient generator and the idea is well i'll show you the finished one gradient generator full coat yes so you will have to grab the colors from well preferably lighter colors from the picker and create a gradient in the background yeah and then this slider can move the kind of splitting point of the gradient i didn't know what the actual word for it was um so that is the task i have far too many tabs open and uh yeah you have two weeks to do it and i will be looking at and enjoying all of your gradients in two weeks from today how exciting is that uh yes this is the one a link here send them in and there are also some stretch goals adding more colors maybe you want to allow the user to add more colors adding a surprise me button which generates random gradients and updates the inputs and checking for the contrast between the labels and the gradient because for example if you have dark colors not so good on the old contrast front is it there is a way around that i think i saw somebody once using a um some kind of dependency which was checking for contrast and then it was either showing black or white text so have hey look uh that one radiance a slavery slope to glory yes i currently have no idea how to do that well now's the time to learn michael yeah brilliant well done and thank you all for coming it was great to see dave mccaffrey dave dave and caffeinated pixels and michael and outdoor ramen and javier and absolutely everyone who came and for your amazing submissions i think i'm going to use this one dave now stop yes yeah i really like the design so inspired and i'm also going to be using actually i have been using a lot of them this one here because i can adjust number of minutes so handy yeah let me know if you are going to be using your uh pomodoro timers oh we have one yes totally and uh what's happening on wednesday michael's back back again tell a friend he's here to talk vs code he says he's got some vs code tips you need to know to be an effective developer so i'll be there well i have to be there but i would be there anyway to find out what i don't know about vs code yeah very exciting i will tell you one thing um with vs code i saw on twitter earlier someone um actually it was mike from html all the things had said that he um had moved his what do you call it file menu thing to the right hand side and he's never looked back and i've tried it and it's really good so yeah give that a go and then on friday no that's not friday this is friday michael pumpkin hi we'll be coding our very own gradient generator i am excited for that i use my eight ball a lot and clock and now this timer all thanks to scrimper yeah just making the devs talk it amazing hopefully we'll see you all on wednesday and friday yes have an amazing week with lots of gradient coding fun and i will see you soon [Music]