The Weekly Web Dev Show: Retro screensaver

Scrimba · Beginner ·🌐 Frontend Engineering ·4y ago

Key Takeaways

Reviews submissions for a weekly web development challenge on building light/dark theme switchers using HTML, CSS, and JavaScript

Full Transcript

hello i thought i'd have a change of sound today so we have a helicopter [Laughter] yes wow let me know how you are getting on we have finally reached the end of 2021 can you believe it yes another year of the weekly web dev challenge hello to dave first commenter of the evening and to ambree and borges karate hello everyone hope you're doing well yes a sentiment i share great job dave completing all the javascript miss challenges says ambroin yeah let me know in the chat how many of those challenges you have done one two three four five or six or zero i guess hopefully not yes amazing job to you all steve is hitting me with that tiger already and we all know what that means yes if you are new here please put a tiger in the chat and if you know and if you're no if you're new here put a bunny rabbit in the chat if you've been before hit me with that tiger that's the right way around why helicopter well i don't know really i thought i'd give it a try there are various things to choose from so i thought i'd see what's going on with the old helicopter hi lee han yes sounding video okay that's good to know it's always nice when someone confirms that thank you very much hello to felix as well and path and wow i've done 24 i mean six not bad hopefully we'll do 24 yes dave is hitting me with that elephant from colchester and some more tigers in the chat super cool to see okay it is time to have a look other solutions here they are now even though half of this weekly web dev challenge was kind of overlapped with javascriptness we still had 23 solutions so that's good news and yeah let's have a look at your solutions we have a couple of people raising their hands in the chats if you have submitted a solution and you're here right now uh do the same and i will have a look at it lorenzo has done five and a half um javascriptness challenges great stuff looking forward to seeing it okay uh where are those raised hands yeah there we go let's take a look at ounce but before we do that i must point out on the weekly web dev challenge page a new link has appeared which takes you to the javascriptness pics of the day here they are now we're not saying by any means these are the absolute best uh purely because unfortunately it would take us far too long to actually inspect all of the solutions but these are just some that have caught our eye through our time on twitter or discord or wherever else you might find a javascript solution so go in and check these out maybe you'll get some inspiration or maybe you'll see yours there yeah so um let's check yours out very nice and very retro screensaver and what is more you can add your own timer yeah and then it bounces around in a very retro way awesome and i like the gradient on each of the letters as well yeah super fantastic and amazing yay ambree also submitted the solution let us check that out this oh yeah it's psychedelic look at it guys this is extremely relaxing it's like a piece of art this amazing changing color linked galaxy blobs i guess i would call it and this is done if you're wondering with canvas i think pretty sure this is called canvas but now i'm looking at it i don't know if it is the canvas it's pretty amazing anyway and i want to look at it and find out how it is actually done super cool well done you angry [Applause] yes great job on the challenges super fantastic says steve absolutely let's check out dates dave i think was the very first one because of it with this glowing hypnotic blob do nothing for five seconds it's coming guys here it is the glowing orb has entered the building i could just watch this all day it's extremely relaxing beautiful job to dave interested in what the js approach was yeah we had some fun with this uh on the coding live stream i can't remember what the problem was oh it was mainly making the um blob not jittery basically but dave has done it in an amazing way well done to you dave [Music] [Applause] and who else is here wednesday wednesday who has done five and a half javascript challenges and this wow lorenzo is on fire scrim saver yes the pun i wish i thought of if there were a prize for the best pun i think renzo would win so we have a timer well i moved too quickly look at that beautiful jelly-like cube it's transparent it's multi-colored it's spinning it does it all actually i should have pressed yeah and we have a what would you call it checkerboard floor so yeah another level well done to you renzo and we have muhammad to hear khan ah did you submit one of these screen savers because if it's the same to here which i'm not sure if it is um so here made this which michael chose for our uh javascriptness pick of the day for day three it's the don't scare your relatives challenge and not only has tahir removed the scary theme he's also added three christmasy themes to choose from look at him go but i'm not sure if there is a screensaver oops that's the wrong one let me know if there is one and i'm just missing it or maybe you've used a different name and i'll check it out yes who else is here converse for the win yes amazing i have fallen in love with my own solution yes it's done using html canvas if i knew anything about html canvas probably would have known that but i don't as yet but it's on my list of things to learn in 2022. oh i have just realized that there are uh not many minutes left to vote so if you've not voted yet you have five more minutes left to do it so head on over there and don't forget you can choose more than one but you can only choose once so choose carefully because if you come back after you've voted it'll say computer says no that's the going option yes amazing hello to la show how would you pronounce this name batman yes amazing okay anyone else has uh submitted a solution let me know oh or yes you can also suggest solutions that you want me to look at so um as dave would like to look at elizabeth's let's do that very nice rainbow lunar eclipse or solar eclipse i guess it could be either would you like to have a rainbow moon or a rainbow sun or both let's check it out oh beautiful this reminds me of the type of light up toy things you can get at funfair's very nice indeed yes superglued says borges karate to be learning so much with all your submissions yes it's a colored black hole speaking of black holes this is a discussion i've had with michael recently i'm trying to ask this in an unbiased way without googling type in the chat what do you know about black holes now obviously if you've got a phd in black holes you probably don't need to type it all up but one of the basic things you know about black holes this is a survey to settle a dispute between michael and i ah it's flx i will look at that one next black hole discussions are hard to escape yeah well they certainly are over to flx this one yeah this is very interesting because flx aka felix has used the basic idea of the challenge but also turned it into a nice meditation aid because you see at the bottom i can't move the mouse because it will turn off it says breathe in and breathe out it's a breathing guide so it's nice and relaxing yeah which i thought was a very great idea about black holes they are hugely massive collapse starts or stars for which now can escape not even light time slows down in a black hole yeah well there's a video about them an interstellar edition of black holes too yes i'm gonna wait a bit more to see what other people say oh look at that time is nearly running out which one should we look at oh this one caught my eye it's by neon and it looks like neon i don't know if that's deliberate or if everything neon does is neon but here it is you can select your favorite color i will go for purple and then it creates this lovely neon effect it's just so 80s and just so cool and very creative nice job to you neon yes damn indeed steve i wonder if this is the same steve hello if it is has taken the blob to a new dimension and included his chickens here they come i don't know um the names of the chickens but i have been reminded of this amazing i guess it was early naughties phrase booyah oh can you actually click that yay chicken okay amazing very cute indeed yes it is this steve here yeah oh 10 seconds left in the vote does it actually count down right by the second that's amazing yeah what else do we have here huh yes do you remember this screensaver from well i guess it was the 90s i think originally it said windows and then in a slightly later version of windows you could type your own message and i remember thinking this was like the coolest thing ever well i was wrong because this is the coolest thing ever a scrimba logo instead and if you watch it it changes color when it bounces off the walls which i thought was inspired and that one is from patrick nice job to you oh nice detailed explanation from zozo black holes are entities in space created after the death of stars it collapses into itself and has such high density where even light can't escape the central point is called singularity well thank you for this yeah singularity reminds me of uh i don't know if it was the apprentice or something but one of the teams on some ridiculous game show called themselves singularity and i think they thought it had nicer connotations than it actually did yes yeah oh yeah this yeah it also reminds me of the old dvd players screensavers yeah absolutely dvds crikey i remember those i'm glad we don't have to faff around with dvds anymore that was a pain and yeah this one from spidey has a slightly romantic feel it starts off like rose petals and slowly morphs into a heart oh look at that and then morphs back out nice one beautiful and i did see one here tim wrinkle i don't know if tim's here today he quite often comes firstly tim has redesigned the amazing site behind it with some beautiful gradients and a timer ticking down but oh you can also just click this instead and then not just one blob no four blobs and then dancing blobs and then i think they morph back together not that i've spent you know hours watching this but yes wonderful dancing blobs great job to tim i think it's getting on for the time when we should announce the winner so let's get that voting open the final weekly web dev winner of 2021 i can't believe it ah okay let's get the old vote view results what check it out we have a winner with eight votes of dave [Music] which was marvellous hypnotic glowing blob look at it go congratulations to you dave that is as you rightly say nifty do you guys know why screensavers are called screensavers isn't it something to do with the screen used to take up and what was it something like leaving the screen on for too long would damage it so you had these instead which would somehow not damage it i don't essentially i guess i don't really know if you do know let me know yeah i really had no idea what to build in that challenge yeah it was quite a tricky one as we found out yeah deborah says that's fun oh here you go answer from steve could screensaver because you could burn an image into a crt monitor the screen saver would ah save your screen from pixel burn so is that because it was moving then it's just if you had the same static image for too long but moving it somehow saved it well thank goodness we've moved on from those times eh yeah oh could i give the sub to the runner up and keep the swag i didn't see why not the runner up is ambery yay so if you both drop me a message everyone just called i will organize those prizes yes if you're wondering about my ramblings about black holes earlier it's because michael told me that don't ask how this came up but he was surprised that i wasn't aware that black holes are dense and i said well when would i have needed that information and then he reckons that not knowing that black holes are dense is the same as not knowing that the sun is hot which i would argue i've experienced the heat of the sun and not the density of black holes but anyway it was a nice survey thank you for answering those of you who did let's have a look over in javascriptness land which you can now access by going to this link here yeah so these are just some of the solutions that have caught our eye this one is from stevie who's in the chat i believe and just get a load of this we asked for christmas we got christmas [Laughter] [Music] [Laughter] i have been playing that all afternoon i'm not sure what michael thinks is up with me or my neighbours but it's a very good song i enjoyed it a lot so thank you stevie for brightening up my day with this retro gaming uh christmas theme yeah dave constant the hero scrimba wow what an accolade amazing and marin says my scrimba subscription is expiring this month so very timely excellent thanks ah we can add christmas music because oh no as in you tried and you couldn't if so it might be that the fire is too big although this song is really long so i don't know how big it would have to be but yes you can definitely get buying live without knowing what black holes are and that they are dense well i think so yes we have this one from [Music] i've already forgotten from darwin well you think that would be memorable you can write a two and a from and your own greeting i would just write a christmas tree and then yay it writes the christmas card for you oh yeah amazing stuff um i feel unmotivated for javascript who did day one so far aha it's not too late to uh well do them all or you can just pick off or start off from this day day six yeah give it a go yeah do i get a special hero badge on discord now i was thinking maybe if people win the weekly web dev challenge a certain number of times they should get an extra prize because some people have won it two or three times but i haven't thought it through yet so i'll let you know yes that's his rights um like showed no weekly web dev challenge in december because instead we do javascript a a day yes i did say that for those of you who come along here there will be a sneak preview of some upcoming challenges before they drop so let's have a look okay ooh yes the musical one tomorrow we have this it's a music player but currently it does not play anything and your job is to make it play stuff yes there is already uh music file i say music it's just labels there's an audio file in here anyway for you to play you can switch it out so stevie you can use your amazing retro gaming song if you like or maybe if you want to sing your own song you can do that too it's entirely up to you and then for stretch goals you can maybe add the volume controls or allow the user to select different sounds yeah so that's all coming your way tomorrow let's have a look at one more i need to grab this this one is yes i'll show you this one no i'll show you this one the christmas guest list and what you have to do is add the functionality to show off the guest list in this element and add new guests to the array as well yes and you can add a button to remove the most recently added guests or the evil relative this evil relative yes entirely up to you can we look at my christmas eve entry uh yes i will find it i have to remember what day it was maybe it's this one i know i can look on here we had that was one two three four five oh it was today okay not sure why i have my self in the background there never mind uh yes christmas eve again says dave oh christmas eve yeah rotating snowman amazing the christmasy and then you get christmassy fight again nice change of button state dear christmas eve very nice indeed yes and a beautiful christmas tree i can only hope that my own christmas tree will be this beautiful i'm not actually sure my christmas tree will even exist this because i don't know where we're going to put it because last year we had it in the living room but now michael's bought a piano and put it there well a keyboard so i don't know why i have to think about it yeah yes when i started learning uh development i received javascript with mail last year but didn't even know what's available luckily i can do it this time that is great to hear yes we're very cool it is very cool i'm going to christmas if i again yeah ah having much fun thanks to javascriptness that is excellent news wow on that note usually at this point i would look at the next challenge weekly webdav challenge but there isn't one but they will be back in january yes and in the meantime you have java equipment to keep you nice and busy looking forward to seeing all the amazing solutions there is a um live stream on wednesday i've not yet scheduled it so i don't know why i'm showing you this it will be here and it is with a designer turned developer yes very exciting you may know her from scrimba scrimba from twitter annie bombani so excited about that but we won't be coding on friday because michael's got his office christmas party yeah good luck with that michael and on that night um oh yes i couldn't figure out how to implement the mutton state change unfortunately we'll be working on it today let me know if you manage it yes so hopefully see you all here on wednesday and uh tag me in your javascript solutions um yes sorry i was just distracted why is path crying um because can't do javascript because of my exams yes um is there a solution media other than twitter yes there is i will grab the link for you now just good url here's the scrimba well i'm pretty sure you're on the screen for discord server actually because i've seen you there but um for anyone who's not there's the link and yeah there is a channel called javascript solutions so you can put it in there if you would like they're still chosen at random code without michael um i don't think that would go well i did consider it hmm i will consider it some more oh hurt him we looked at yours and we thought it was very nice yes okay i will leave you now to get on with javascriptness i hope you have a lovely couple of days until i see you again on wednesday keep coding

Original Description

🎓 View our courses: https://scrimba.com/links/all-courses In this 30 minute show, we'll check out some awesome Scrimba Weekly Web Dev Challenge submissions - light/dark theme switchers built with HTML, CSS and JavaScript! We'll also announce this week's winner, and launch the next code challenge. If you'd like to try the challenge for yourself, you can find it here: https://scrimba.com/learn/weeklychallenge
Watch on YouTube ↗ (saves to browser)
Sign in to unlock AI tutor explanation · ⚡30

Playlist

Uploads from Scrimba · Scrimba · 0 of 60

← Previous Next →
1 CSS Grid Course: Learn the Basics in 3 Minutes
CSS Grid Course: Learn the Basics in 3 Minutes
Scrimba
2 CSS Grid Course: Positioning Items
CSS Grid Course: Positioning Items
Scrimba
3 CSS Grid Course: Why Learn It And How It Compares To Bootstrap
CSS Grid Course: Why Learn It And How It Compares To Bootstrap
Scrimba
4 CSS Grid Course: auto-fit & minmax
CSS Grid Course: auto-fit & minmax
Scrimba
5 CSS Grid Course: Implicit Rows
CSS Grid Course: Implicit Rows
Scrimba
6 CSS Grid Course: Fraction Units And Repeat
CSS Grid Course: Fraction Units And Repeat
Scrimba
7 CSS Grid Course: Justify Items and Align Items
CSS Grid Course: Justify Items and Align Items
Scrimba
8 CSS Grid Course: An Awesome Image Grid
CSS Grid Course: An Awesome Image Grid
Scrimba
9 CSS Grid Course: Named Lines
CSS Grid Course: Named Lines
Scrimba
10 CSS Grid Course: auto-fit vs auto-fill
CSS Grid Course: auto-fit vs auto-fill
Scrimba
11 CSS Grid Course: Justify Content and Align Content
CSS Grid Course: Justify Content and Align Content
Scrimba
12 CSS Grid Course: Template areas
CSS Grid Course: Template areas
Scrimba
13 27. Setting up the structure - Responsive CSS Tutorial
27. Setting up the structure - Responsive CSS Tutorial
Scrimba
14 25. Making the navigation responsive - Responsive CSS Tutorial
25. Making the navigation responsive - Responsive CSS Tutorial
Scrimba
15 36. Playing with the title's position and negative margins - Responsive CSS Tutorial
36. Playing with the title's position and negative margins - Responsive CSS Tutorial
Scrimba
16 31. Starting the CSS for our page - Responsive CSS Tutorial
31. Starting the CSS for our page - Responsive CSS Tutorial
Scrimba
17 26. Taking a look at the rest of the project - Responsive CSS Tutorial
26. Taking a look at the rest of the project - Responsive CSS Tutorial
Scrimba
18 15. Spacing out the columns - Responsive CSS Tutorial
15. Spacing out the columns - Responsive CSS Tutorial
Scrimba
19 33. Starting to think mobile first - Responsive CSS Tutorial
33. Starting to think mobile first - Responsive CSS Tutorial
Scrimba
20 22. Making our navigation look good - Responsive CSS Tutorial
22. Making our navigation look good - Responsive CSS Tutorial
Scrimba
21 37. Changing image size with object-fit - Responsive CSS Tutorial
37. Changing image size with object-fit - Responsive CSS Tutorial
Scrimba
22 44. Module Wrap up - Responsive CSS Tutorial
44. Module Wrap up - Responsive CSS Tutorial
Scrimba
23 16. Controlling the vertical position of flex items - Responsive CSS Tutorial
16. Controlling the vertical position of flex items - Responsive CSS Tutorial
Scrimba
24 39. Setting up the widgets and talking breakpoints - Responsive CSS Tutorial
39. Setting up the widgets and talking breakpoints - Responsive CSS Tutorial
Scrimba
25 42. Setting up the About Me page - Responsive CSS Tutorial
42. Setting up the About Me page - Responsive CSS Tutorial
Scrimba
26 35. Changing the visual order with flexbox - Responsive CSS Tutorial
35. Changing the visual order with flexbox - Responsive CSS Tutorial
Scrimba
27 23. Adding the underline - Responsive CSS Tutorial
23. Adding the underline - Responsive CSS Tutorial
Scrimba
28 21. Using flexbox to start styling our navigation - Responsive CSS Tutorial
21. Using flexbox to start styling our navigation - Responsive CSS Tutorial
Scrimba
29 20. Creating a navigation - Responsive CSS Tutorial
20. Creating a navigation - Responsive CSS Tutorial
Scrimba
30 40. Using a new pseudo class to wrap up the homepage - Responsive CSS Tutorial
40. Using a new pseudo class to wrap up the homepage - Responsive CSS Tutorial
Scrimba
31 43. Fixing up some loose ends - Responsive CSS Tutorial
43. Fixing up some loose ends - Responsive CSS Tutorial
Scrimba
32 32. Starting the layout. Looking at the big picture - Responsive CSS Tutorial
32. Starting the layout. Looking at the big picture - Responsive CSS Tutorial
Scrimba
33 24. A more complicated navigation - Responsive CSS Tutorial
24. A more complicated navigation - Responsive CSS Tutorial
Scrimba
34 28. Feature article structure - Responsive CSS Tutorial
28. Feature article structure - Responsive CSS Tutorial
Scrimba
35 34. Styling the featured article - Responsive CSS Tutorial
34. Styling the featured article - Responsive CSS Tutorial
Scrimba
36 18. Making layout responsive with flex direction - Responsive CSS Tutorial
18. Making layout responsive with flex direction - Responsive CSS Tutorial
Scrimba
37 19. flex direction explained - Responsive CSS Tutorial
19. flex direction explained - Responsive CSS Tutorial
Scrimba
38 41. Creating the recent posts page - Responsive CSS Tutorial
41. Creating the recent posts page - Responsive CSS Tutorial
Scrimba
39 17. Media Query basics - Responsive CSS Tutorial
17. Media Query basics - Responsive CSS Tutorial
Scrimba
40 30. Home Page. HTML for the aside - Responsive CSS Tutorial
30. Home Page. HTML for the aside - Responsive CSS Tutorial
Scrimba
41 38. Styling recent articles for large screens - Responsive CSS Tutorial
38. Styling recent articles for large screens - Responsive CSS Tutorial
Scrimba
42 29. The home page.  HTML for the recent articles - Responsive CSS Tutorial
29. The home page. HTML for the recent articles - Responsive CSS Tutorial
Scrimba
43 10. ems and rems   an example - Responsive CSS Tutorial
10. ems and rems an example - Responsive CSS Tutorial
Scrimba
44 1. Starting to think responsively - Responsive CSS Tutorial
1. Starting to think responsively - Responsive CSS Tutorial
Scrimba
45 4. Controlling the width of images - Responsive CSS Tutorial
4. Controlling the width of images - Responsive CSS Tutorial
Scrimba
46 5. min width and max width - Responsive CSS Tutorial
5. min width and max width - Responsive CSS Tutorial
Scrimba
47 3  CSS Units.  Percentage - Responsive CSS Tutorial
3 CSS Units. Percentage - Responsive CSS Tutorial
Scrimba
48 11. Flexbox  refresher and setting up some HTML - Responsive CSS Tutorial
11. Flexbox refresher and setting up some HTML - Responsive CSS Tutorial
Scrimba
49 12. Basic Styles and setting up the columns - Responsive CSS Tutorial
12. Basic Styles and setting up the columns - Responsive CSS Tutorial
Scrimba
50 8. The Solution Rems - Responsive CSS Tutorial
8. The Solution Rems - Responsive CSS Tutorial
Scrimba
51 14. Setting the columns widths - Responsive CSS Tutorial
14. Setting the columns widths - Responsive CSS Tutorial
Scrimba
52 2  CSS Units - Responsive CSS Tutorial
2 CSS Units - Responsive CSS Tutorial
Scrimba
53 7. The problem with ems - Responsive CSS Tutorial
7. The problem with ems - Responsive CSS Tutorial
Scrimba
54 6. CSS Units. The em unit - Responsive CSS Tutorial
6. CSS Units. The em unit - Responsive CSS Tutorial
Scrimba
55 13. Adding the background color - Responsive CSS Tutorial
13. Adding the background color - Responsive CSS Tutorial
Scrimba
56 9. Picking which unit to use - Responsive CSS Tutorial
9. Picking which unit to use - Responsive CSS Tutorial
Scrimba
57 Tutorial to Learn Alpine JS - Full Course for Beginners
Tutorial to Learn Alpine JS - Full Course for Beginners
Scrimba
58 Guide To Algorithms in Javascript [Binary Search] - Full Course / Tutorial
Guide To Algorithms in Javascript [Binary Search] - Full Course / Tutorial
Scrimba
59 Learn UI Design [7 Fundamentals Tutorial] - Full Course for Beginners
Learn UI Design [7 Fundamentals Tutorial] - Full Course for Beginners
Scrimba
60 Javascript Tutorial for Beginners [From 0 to ES6+] - Full Course
Javascript Tutorial for Beginners [From 0 to ES6+] - Full Course
Scrimba

Related Reads

📰
Tags, Releases, and Branches: A Practical Guide to Frontend Deployment
Learn how to streamline frontend deployment with a disciplined branching and release process
Medium · Programming
📰
Tags, Releases, and Branches: A Practical Guide to Frontend Deployment
Learn how to implement a disciplined branching and release process for frontend deployment to improve production visibility
Medium · DevOps
📰
Inside the Wayfair Frontend SDE-2 Interview: A Complete Breakdown
Learn how to prepare for a Frontend SDE-2 interview at Wayfair, including online assessments, machine coding, and system design.
Medium · Programming
📰
I Spent Two Years Maintaining a React SPA. HTMX Rebuilt It in a Week
Learn how HTMX rebuilt a React SPA in a week, replacing 2 years of maintenance work, and discover the benefits of this alternative approach
Medium · Programming
Up next
How to Use Semrush Keyword Magic Tool with ChatGPT to Make Money
Grow with Will - SEO, Sales & Entrepreneurship
Watch →