The Weekly Web Dev Show: Accessibility, HTML, CSS, JavaScript

Key Takeaways

[Music] hello again and thank you for coming and sorry for being late once again yes i have no excuse i was trying to think of one but there isn't one just got yeah late so we had an accessibility challenge and looking forward to seeing everyone's um solutions yes um alana is here so it's srianz so it's dave let me know where you're tuning in from looking forward to seeing you all the latest scrimba tweet is the wrong link dog i will fix that this is what happens when you rush what did i do i sent next week's one yes classic okay thank you for letting me know i will on the fly delete that and send a new one i need that pic oh i'm gonna have to uh listen to myself for a minute while i fetch the link so that'll be interesting you'll get double leanne listen to myself oh there she is [Music] okay on with the show yes afrohealer all the way from nova scotia canada better late than never yes wow i wonder if you're the furthest person away from me in wales if you think you're further away let me know where you are i'm on the youtubes indeed alex tour hello michael lorock is here yes this week's submissions are awesome says alana yeah i agree let's have a look at them um but first let's see how the old vote is doing so here's the page here's the vote there are nine minutes left yeah if you haven't voted yet well we haven't seen the solutions yet but um yeah maybe you've seen them yourself you can go and vote dave i'm living in colchester i think you're a little bit nearer then yes long island new york i think i'm pretty far yeah oh i heart canada i heart the idea of canada i've not made it there yet but hopefully i will soon okay let's check out the solutions i will start with the people who are here so that's with you dave and i must also mention dave has been helping me with the site so down in our previous challenges we now have a way to show off the winner so if you are today's winner you will get a bigger picture you will be bumped to the first place in the list and best of all you will get this animated trophy so i mean that's really up to the ante oh and you also get capital letters names and uh name and bold so yes wonderful fabulous dave has also been helping me with the submissions js well i say helping he's written all of it and so now it's much easier for me to add submissions yeah it's lovely and in fact that js inspired this week's challenge yes um we will get to that later what an awesome guy that dave is lol indeed yeah wow that's so cool great work helping scrum out indeed yes so speaking of dave this is dave's accessibility challenge now super cool we have labels we have useful um what you call them what are they called i genuinely can't remember this this is terrifying what's happening to me ah placeholder yes it's right there in the html goodness me yes and we have a focus date oh look and we also have a i guess that's a tool tip oh i guess it is interesting we also have auto complete address level one that's amazing but most amazing of all is that this is responsive to your preference um whether you want to be light mode or dark mode i like light mode much to the division of everyone on discord but that's fine light mode till i die and if however i were dark mode i would select this and then we have a totally different styling how awesome is that yes very nice so thank you for opening my eyes to that possibility dave yes placeholders says everyone yes i don't know what happened there it's built in html validation oh wow that is super cool i must look into that i'm going to screenshot what you're saying to remind me to look into it later okay who else is here um so i i know we have a lana let's take a look at that one oh this is nice isn't it so simple and yet so nice yes required fields are marked with an asterisk we have labels we still have the symbols um but they're no longer essential to understanding what's going on so that's super cool i think oh yeah we have focus state on the um button which is really nice and all over a lovely clean look yeah fabulous and also um the font has changed from festive which is very difficult to read for everyone um but especially if you have dyslexia uh the original one was all curly fonts and generally a nightmare reminded me of my grandad's handwriting actually and not to criticize his handwriting it was very nice but not the most accessible i think that's fair to say this is much easier to read yeah lovely hold on now we also have michael you're here aren't you not the usual michael well it kind of is the usual michael not the michael that comes and sits next to me on friday michael larocca it's made this lovely form oh yeah now i enjoyed this a lot because we have this really cool focus state dashed dashing as well that's nice um sorted out the labels of course and um the font brilliant i can't i'm gonna look it up because i can't remember what else i actually put in there access ability issues oh no labels for oh yeah inputs put those in bad font oh yes bad contrast well that's definitely fixed yes lovely dashing yes see what i did there there's um talking of puns michael and i went to a car boot sale on well yesterday if you don't know what that is uh in england well britain we have a tradition of basically going to a field in the rain and selling the stuff you don't want i suppose it's kind of an equivalent to a garage sale but we all go to a field and sell stuff and michael was just making puns about things the whole time like some lady was looking at these gardening gloves and he goes oh madam fits you like a glove and you know total dad jokes but she actually bought those gloves so i guess paid off but yes michael uh michael larocca that is very nice submission shreyance is here now this is amazing in terms of gradients this takes it to the next level if you watch it it changes color does it i'm sure it does yeah yeah look at that i'd like to make a screensaver of this so i was wondering how to do this i think it's similar we saw one um a week or so ago and it's um yeah basically you make this gradient super cool and then you make it huge and then you move it around the background position yeah lovely and a much nicer font oh look at that button is that oh it's all different colors when you hover it i wonder how that's done um looking for hover was it different maybe i wasn't no it definitely is but how because that or maybe that's a fallback and actually it's in the js oh yeah look can't submit button is this button and then there's an array of colors oh right oh that's cool you use math.floor to generate a um random number and then you're from that selecting one of the random colors by the looks of it i've never seen that before very nice yeah yeah i did it doing uh using j yes yeah excellent idea is anyone else here um that we haven't looked at yet if not i will just select a random one i've probably got time to look at them all let's have a look oh no i noticed this earlier i don't know if it's been deleted um it was a nice one nice uh definitely fixed the contrast and the lack of um focus state with this huge focus state so i hope david hasn't deleted her because it was nice but we will see oliver coats has made this ah yeah so on our live stream with carrie she said that um comic sans the most hated font of all times for reasons i don't really understand i think it's all right i don't use it i think it's all right um yeah she said it's actually very accessible it's nice and easy to read um i don't know if this is comic sounds but it looks fairly similar quant family marley cursive i wonder why it's called mali you know because mali is a country isn't it is it like is that the national font i think ukraine has a national font but it's not very accessible at all let's have a look at it ukrainian font yeah i mean in terms of accessibility that kind of sucks doesn't it yeah sorry michael my husband michael that is for putting your country on blast for its typography but yes um so oliver coats has made this sorted out the um contrast and made this lovely focus state which i really like looks and made it clear that it's the form in case you're in any doubt yes helvetica was the name of a country too huh sounds greek yes lovely i love that text drop shadow oh which one i'll go back and have a look at it yes or maybe you mean this one looks lovely okay who else brenda michelle said that this was her first weekly web dev challenge how nice lovely background gradient and a really clear form and a nice button and the privacy policy which nobody reads but you should include yes i think that looks great well done brenda yes ah it was that one yeah it was very nice okay i'm gonna close this and i need to keep on top of my tabs because otherwise well you've seen what happens who's next kevin black oh yeah that's really cool the way it um moves in just going to watch it again nice um font there on the button that's nice and easy to use does it have a focus state but it does have a focus state but no outline so that's room for improvement yeah just checked helvetico is latin for swiss crumbs amazing yeah okay lovely kevin black and now dev n here we have deven's form nice and simple modern and a nice uh little shadow for the focusing that's good you know if you have an outline or if you don't like the default outline you can make another one yeah like this one here that works really well awesome well done dev and now no just alerts it is mysteriously cold yeah you click into the box which has a focus state and you get instructions that's an interesting way of doing it leanne ah i wonder if how accessible that is if it's more or less accessible than um placeholders enter your zip code one two one cats i wish that was my zip code enter your email cat no ah is there an issue here no there isn't it's just me cat cat.com submit submit button click nice okay um marika oh yeah this was an interesting one i've been layola but this one has gone for the monospace font which i didn't actually ask carrie about monospace fonts but from what she said um it's like separate letters and not lots of wiggly lines basically i imagine it would be quite good i would have to check that certainly looks nice nice hover state and then a nice hover state on the button too and this image here explaining in a visual way what the form is for which is very nice yes some very nice entries this week yeah totally i agree probably using the wrong event type on focus would be the right one uh which one this one or a different one nice animations they were yes ambroins was also really cool yes let's have a look at that one that's the next one as it happens yes this is very nice so very clear what it's for and what to do and oh yes i did like the focus state on the input where it makes the box slightly bigger and a nice register button with a gradient of course super cool um sharians pointed out that this is based on a project from let's do a shameless prank scrimba responsive web design is it this yeah i'm sure it's this um it's in one of these not this probably the second one stepping up our style yeah it's based on this so it's good to see people using um what they learn on scrimba in their own projects super cool yeah awesome well then ambry okay um oh running out of time now so let's continue on michael we have seen bird 555. mysteriously named has created this lovely i would call it glassmorphic 121 cats um form with a nice simple outline and a lovely readable font yes very nice bird555 if that is your real name and oh that's all yes and in case you haven't seen it you can now click here to get to the latest challenge well this isn't the latest challenge i will need to update it but generally speaking that's what that button is for okay then so we now should announce the winner or look at the next challenge what do you think type winner or challenge in the chat i'm gonna go with the first one in the interest of time when okay okay um now i can view the results whoa hey ah i was looking i thought we had a tie no devin has won by a margin of one vote that was this one lovely so devan um you have one oh fifty dollars of skarimba swag and a free six month subscription and the weekly web dev winner roll over on discord congratulations dev and now on to the next challenge so this one i hope you'll like it and you haven't got tired of my cat obsession yet it is cat basket social media for cats and what you have is this and this array of cats and the job is to render the cats in these profiles on the page with js or with react or view spells however you like yeah and this was inspired by um dave's code yes so i learned a lot from dave's code i will show you all on friday how we have done it so yes i am looking forward to seeing your cat social media um pages but if you're not into cats pumpkins not impressed but you know some people are not and that's fine you can change the theme maybe you want to make a dog social media site or a bunny or a snake if you're gary simon you definitely want to make a snake social media site so yes that would be great i am really looking forward to this let me know in the chat what you're planning to do and how difficult you think it will be snail hell yeah definitely i think you should make that my friend lived with a flatmate at uni who had these giant snails as a pet which would have been bad enough but my friend also has a phobia of slugs and snails so that wasn't great yeah dog basket for me oh wow i'll use my three chewbars for inspo yeah you can change obviously if you do dogs you will change this array um but even if you do cats uh you can include your own cat pics or find ones you like from the internet as many as you like you could have hundreds yes or a scrimba social media site yeah any theme you like beetles and bees yeah sounds good my child loves him really so i'm looking forward to that it's going to be super cool to see all of these social media fights for animals will be exciting yes um if you have an idea of how we can uh continue building this page let me know and if you think you can build it and then uh if i think it will work then you can make a pull request and become a contributor like dave has here eventually i'll make a better way of displaying these contributors at the moment they're like this yes so if you think of something we can do give me a shout like this super cool rotating trophy i love it i could watch it all day yes yeah yes nice little plug there actually it it's not so um on youtube um my youtube i made a video a while ago about it's this one about well including css pseudoelement first letter which changes the first letter as you would expect i'm a paragraph or of whatever you um load it on i wanted to use it for this but unfortunately i couldn't because it only does the first one and not this so i had to use spams yes but thank you for the plug anyway um michael always nice and if you did want to subscribe here's the link yes maybe a photo for that yes definitely if you want to make one let me know yeah and include scrimba social handles yeah copyrights true well yeah lovely okay yes um give me a shout uh wherever you can find me discord or twitter if you would like the link to the um repo or you can go and find it my [Applause] um yeah but um do let me know before you do anything this is to everyone um because i wouldn't want people to do work which we then can't use for whatever reason so wait for the green light yes um srianz i where is it i love how pumpkin looks in that picture so serious yes that's something to finish on i think serious pumpkin lovely so um i will be here on wednesday with bob cyril talking about i imagine react i don't actually know yet so if you've got questions for bob let me know um yes we asked people a while ago in the fireside chat on tuesday i think who they want to see on the live stream and one of them was bob so bob's coming yes someone got here late who's late interesting yes uh yes so that's happening on wednesday looking forward to that and then on friday we will be coding cat basket really looking forward to that as well so i hope to see you both we'll see you all at both of those that would be lovely so happy coding and enjoy your week [Music]