The Weekly Web Dev Show: JavaScript Loader | HTML | CSS | JavaScript

Key Takeaways

[Music] hello it is monday again bad news for many people good news for us because it means it's time to look at the weekly web dev challenge submissions and uh find a winner and see the new challenge yeah exciting so who do we have here hello cat or is it no hello chat or is it hello cat in french or is it both dave hello paul moonen hello michael jason alim hello gibbin nina hello steve and henry has gone with hi ed has gone with wave we have alana got to speed up marta tim dave happy mondays yeah ally and michael says let's go yes and we have ben if you are new here leave a rabbit in the chat this is what we do and if you've been before send a tiger we don't do anything with this information it's just for fun let me know if you're a tiger or a bunny or something in between yeah so yes i'd like to share my screen here it is all of the submissions including mine and michael's yeah which is here with a clown next to it just in case the content doesn't show you what a joke it is um we wanted you oh look i've actually spelt my own name wrong brilliant yes um you can't vote for ours not that you would because it's by far the worst but um yes it's just there to compare with all the lovely solutions that the competent people have sent in wow good evening criminals we have had a conversation in scrimba towers about what we should call people who use scrimba um someone on discord once said scrimbaroonies i had an idea of scrim [Laughter] anyway we haven't settled on one but i think scriminals could be a winner i like it lots of tigers wow a tiger a tiger and a lion amazing ben is a bunny interesting so is ally good to know and sakuma interesting channel i really like scriminals yeah so let's um continue with looking at the solutions and i will start with the people who are in here who is in here yes tom i know very naughty um i oh i happen to know that paul moonen sent one let's have a look at it wow it's a radar i guess yeah with a very futuristic feel and it also uses you'll notice the loading um cursor nice touch and now we find out um what kumuna has learned doing this there is such a thing as conic gradient in css there is indeed yeah lovely seriously cool um if you have sent a solution please write in the comments that you're here and then i will look at yours dave dave has sent an elephant and he's also sent a solution if you're wondering why he sent an elephant it's because he lives in colchester elephants are big there he told us on friday anyway this is dave's solution look at that guy i could watch this all afternoon it's actually extremely mesmerizing and then when you stop it it has a really nice yeah effect how is it done in the css maybe yeah so it's using the first of type and last of type i have never used that i did see a video kevin powell put out lately but it's still in my watch later huh extremely interesting what does that mean frin intriguing maybe dave will shed some light yes very nice grim bats yeah we could be scrim pants yeah code loving criminals i agree i'm ashamed of my love well you clearly haven't seen mine in that case i'm definitely sure that mine is worse so don't worry hello from india scrimbo's screwing babies yes okay uh who has sent one tim so let's have a look at tim's actually tim sent two yes you can do that you can send two and two people this week did that so this is tim's loader which either just loads and it stops or you can set it to load a random amount of seconds how cool is that going to wait for it to go to zero and then it goes back to the original state that's cool yeah very nice and um tim's second entry was this um coin flipping [Music] ah i guess so you can spin it and then these pigs are spinning i reckon it's tails oh i have to stop it all right let's do random okay i'll go for heads this time yes i have one and there's a nice little number on there that's a good effect we'll have a look at how it's done um probably oh this i guess done with text shadows that is high tech extremely yeah love the coin toss one ah nice tim wrinkle yes um okay who is next i really need to open this on two windows so i can look at the chat and also keep track of whose i've looked at um yes the moon's either mine is on curl okay let's find that one not that one this one oh yes it has a dog or a doge if you will and a wonderful changing shape spinning loader which fills you in oh look at that guy and how many seconds are left and then bam don't michael and i have a discussion about whether this is pronounced doggy or doge this stemmed from the doggy well such doge coin thingy a while ago i insist it's doge his colleagues say it's doge he says it's doggy what do you think let me know yes very nice solution the bim cider aka carl marta diaz is here i believe yes it's under mds let's have a look load where's that i like how the numbers go up yeah super cool and that is done with this so we have count processing my brain so we have this it's adding this yes and then i'm not sure why it says 101 there well basically i guess it's less than 100 it continually goes up interesting very nice yeah and who else is here hey friend means from it's a typo and it still works all right yeah i guess it still works because the from is maybe the default yeah cool lovely how do you see all of the submissions good question you head over to this link here weekly webdevchallenge.scrimba.com it would be good to see the code for some of these yeah you can click into it most of them have code some of them are deployed so they don't but usually they do cool okay reading chat who is next most of the flipping says tim is down to kevin powell huh thank you kevin for the flipping love the clapping dog yeah doge or doggy literally keeps me up at night the bim cider it's stage not doggy yeah totally some very nice effects yes doge equals dog plus e yeah it also equals doge though because at 100 the account would stay at 99. yeah that makes sense okay um there is not long to vote so um go to the link if you haven't already i have just sent out and vote for your favorite and i will be revealing the winner shortly the voting ends in three minutes okay let's see how many more we can look at oh this one this made me laugh out loud when i saw it okay get ready if your cats are nearby prepare them pumpkin didn't like that one yes but i did i think it's brilliant very nice oh this cat is so cute how is it actually added hello what hey svg boy that is an svg and a half isn't it so what is it like to get this cat amazing yes great job oshka who else can we look at if you would like to have a look at one of these let me know which one i should look at next otherwise i will select at random fortune cookie click to open your fortune cookie okay how lucky today finding out in three seconds two you will be hungry again in one hour that's extremely likely yeah i do get hungry very quickly so that is a wise fortune cookie from divas oh i saw em yes gabriel nina was here earlier let's have a look at gibbons ooh nice i like this one it uses the original loader from the challenge but it also has its own original take i like the spinning letters as well mesmerizing and then even the dots spin what happens when they all get there yeah lovely i like that one very much indeed marta's rabbit didn't like that sound at all i just played it again because i like looking at the cat yeah it is good the cookie is a sweet idea i see what you did there oh crisps nice yeah oh on the topic of cats let's have a look at neons we have this cat here and then let's go and then i can pause increase speed and then it moves along towards the bowl and we have a loader yeah oh look at it and now i'm not sure if i'm meant to do something here but anyway it has got its cat food and that's what matters right pumpkin we have a mysterious spinning i don't know snowdrop it's very nice a nice take on the spinners yeah and then this one came along which takes you to another world yeah so it loads with this nice little light and then start where will i end up oh northern lights i'd love to see the northern lights i've tried twice on two holidays and it was cloudy for both of them but this is just as good let's have a look here what else i get normal lights again i looked earlier and i got winter and i also got japan in spring so that was nice very relaxing indeed yeah and that amber has made this find your dream house i'm looking for my dream house at the moment or any acceptable house really anyway it's got this lovely spinning houses and balloons very adorable yes okay let me know if you'd like to have a look oops at any more of these and i will do my best to look at as many as possible but for now it is time to reveal the winner poll has ended okay let me view the results then whoa look at that the winner is oshka's cat i'm sorry tomatoes rabbit yes brilliant so this is the winner where is my yes congratulations oshko you have one uh what have you won something so six months of freeze grimba pro and grimber swag yes and i also have to select a random winner so to do that oh no not there i mean maybe there i'm going to uh find a random number so let yes and then math dot brandon and then am i going to do this right by memory i think that needs to be outside let's try uh 39 because there are 39 submissions console log winner 39 did that just not work properly no it didn't okay then i think i need to move this 33 let's just check it has actually worked yes it has so number 33 is right this is 39 8 7 6 5 4 3 2 wait no i've gone past it right 39 38 7 6 5 4. three ten that's you and this one so you have one six months for free skarimba pro yes oh that was close it says mata was it oh yeah it was ah that was really close maybe next time yeah if you'd run it twice out of one ah you have one before once twice many times tim says wow yes indeed contact me on twitter or discord and i will organize those prizes but for now it's time to look at the next challenge which you have seen a little bit of a preview of it's here yes it is a magic 8 ball and it has these pieces of advice in it taken from famous films yeah and your job is to render one piece of advice at random well maybe not a random it's up to you i guess um when the user clicks this button yeah and then it will look like this yeah so that is the next challenge and once again you have two whole weeks to do it because uh the deadline is going to be on september the 6th yeah so there you go two weeks to come up with some life-changing advice looking forward to seeing your submissions that will be amazing i'm sure they're all going to be extremely creative so these were brilliant thoroughly enjoyed oops hello emojis looking at them they were just great let's have a look at what we have got coming up for you uh on screen on [Music] wednesday brother you may know him from twitter is joining us let's find him here twitter css tips and tricks um king i guess yes um he's coming to talk to the live stream on wednesday very excited about that and then on uh friday michael and i will be coding the magic 8 ball that should be interesting if you wondered how we built our loader you can check it out here here we are [Music] yeah and i'll put the link to that one in there yeah so that's what we've got coming up this week looking forward to seeing you there i love scrimba says michael good news dave says two weeks too long man yeah well this is a constant debate we have in scrimba towers another japan should we have one week or two we're testing out two weeks and so far it seems that we get more submissions uh yeah so i'm going to code the eight ball and then i'm going to ask my 8-ball how you and michael will do when you code your april wow let me know what it says yeah i'm intrigued so send me your submissions i'm looking forward to that and we still have some time left so why don't we look at some more submissions this one sebastian and close tabs uh sebastian made this with this spinning number actually the numbers change color this is what michael and i were aiming for but ours looks like it's been run over it also spins really slowly yes so sebastian did a very nice job nice big numbers as well who else shall we look at oh this one cats look at it guy i think all loading spinners should be like this or this should involve cats in some way that's relaxing very nice submission from priscilla yeah and of course how could i not look at this one with pumpkin instructions oh look there's loads of them meet the scrimba team and click on them to spin i thought it loaded seemed boring so i took the concept of spinning and gave it my own twist huh cool each picture keeps track of its own degrees so they can start and stop independently from where they left off this is what uh michael and i were trying to do when we were making ours because we noticed that if you stop and start the spinner goes back to the top which we didn't want so jason has solved this left click for counter clock clockwise and right click for clockwise really yeah i want to see it hit me up who should we click i mean pumpkin obviously pumpkin so that is how you do it let's see how it's done let's current degrees is this empty what do you call it not array object i think current degrees equals oh crikey i'm already lost item.alt equals zero oh so it's like adding a certain number of degrees every certain amount of milliseconds is that what that is and then save again yeah i won't pretend i fully understand that because obviously i don't but it's a very nice solution let's spin rocky spin syndra oh let's try the oh yeah it does do it look at that mesmerizing yeah scrimba knots screaming could be good yeah um brilliant well now look at oh okay i'm going to look at faisal and then i'm going to look at reuben i've forgotten who this was faisal okay spinning and then changing shape nice yeah what did reuben do similar but you can abort i like it yeah super cool i have to close tabs otherwise you know i just get brain fried on this let's look at these eyeballs jamie the suspense is killing me five seconds before the eyeballs will start rolling yay woohoo [Music] very relaxing yes so i reckon i should wrap up now it was great to see you all here oh let's have a quick look at this one actually this psychedelic one look at it go have i actually done that so it's an image oh and then the outside of it's like the one from the challenge and then a gradient background yeah super cool yeah so wonderful submissions oh dave is a bunny hello yeah looking forward to seeing you all here on wednesday to talk to pratham and on friday to watch michael and i make fools of ourselves coding this challenge and hopefully we will have lots of your submissions to look at by then that would be awesome yeah everyone's work says michael it's just so amazing i agree yeah fabulous work well done liam thank you i'm not sure what for but thank you anyway yes see you all in 48 hours hopefully yeah have a lovely monday [Music]