By | March 12, 2020

Hi I’m Anna Lytical the sickeningly
entertaining and educational coding queen and apparently the only way
I know how to code is by mindlessly copying and pasting. So today we’re gonna
build a really quick a really fun website that is made exclusively by
copying and pasting code to show you how to not mindlessly copy and paste code
and learn a little bit about web development along the way so let’s go
into code pen real quick cuz this is where we’re gonna have all of our stuff
living. And this is kinda like a 10-minute challenge 15 minute challenge not really
because it’s a challenge but because I want to get some food okay so we’re
gonna make a new pen and this is where we’re gonna start off. So basically web
sites are made of HTML CSS JavaScript and writing it all can be kind of a pain
so why not find some already existing JavaScript already existing HTML and
already existing CSS to use for this. Okay so I’m gonna try to exclusively use
copying and pasting, so if you don’t know how to copy and paste the commands are
command C and command V, and I believe it it is control C and control V on Windows.
And you really want to make sure you don’t use the cut command cus that
could be not good. If you use command X or control X no no no we want to make
sure that the content does not disappear so those are the basic commands
that might be a little hard for some of you following along. I know these are
some really difficult commands. Okay so basically I thought it might be fun to
make a little website that basical – that pops up a message saying when drag race
is on or if it’s on right now. I guess I don’t really want to pop up I just
wanted to kind of say drag race is on. Right now I think the first thing we
should search is for an HTML CSS pretty text example that we can pull from that
and have that be what our message is gonna look like. So let’s see HTML CSS
pretty text examples so 25 fun and creative typography snippets okay and these are
all done in code then so that’s actually really nice because we’re already
working with code pen. Code pens are just a great way to try out a bit of HTML CSS and not have to like set up a whole
website for it and you can run it in these little embedded windows. Ok so
let’s see result we click Edit on code pen and what is this. Ok this is like
looks like a little bit too many layers. I want something that’s just gonna be
we can put text into it and then get it out. okay I actually like this – this knock
out text and I’ve actually played around with stuff like this before, so let’s see
what they’re doing. Okay so this is all CSS and HTML so that’s great okay so
we’re gonna copy this in paste it there and then let’s paste this in. Let’s see
how this is gonna look, so far, Okay great! So we’ve already got this kind of lined
up and one thing is you don’t wanna mindlessly copy and paste code because
you want to understand what you’ve got so we just have a div which has I guess
this is a link so like cool stuff visit my site, so maybe instead of that well I
guess I’ll keep it like that maybe I’ll delete this for like you know a more PG
pg-13 audience I don’t know, and instead of linking to that website let’s link
to my YouTube channel instead. I’m gonna copy that link in paste it right here
you know only copy and pasting today I think that’s very important
then here they’re using this background image I guess it’s like a NASA moon
thing, so maybe let’s see if we can find like a good drag race image so RuPaul’s
Drag Race Season 12 cast let’s just look for a photo I’m just gonna grab this big
photo. Thank you EW. Is this – is not a photo, gotta find a photo okay maybe you
can just do copy image address sure. We’ll go with that
you know pasting it in it got a little misaligned so let’s look at CSS
background examples to see we can find something that would like make it like a
little bit easier, so we don’t have to have it all scale down, Maybe we can
shrink down a little bit in there so CSS background image
and for those of you watching at home I understand some of this I’ve played around with CSS before a bit of HTML before and even worked with it in my
jobs but I haven’t really thought about a lot of this going in so we’re in this
together looking through this example see what we can learn quickly copying
pasting and learning at the same time so use this image here wish there more
okay so here’s information on like how we can size this so maybe let’s do a
background position: Center copy that in okay so that’s changing it a little bit
and then a height I guess did they specify a height they
specify the width 500 pixels okay so we just have Brita’s face
can we change these numbers so now we need to get new numbers for these that
are gonna work a little bit better oh maybe I’ll try copying 50 pixels to see
how that works I don’t have to you know don’t want to write anything okay that
made it really small so yes let’s undo that I think we want it to be bigger you
know I think that’s fine for now and let’s actually make some more text in
here I’m just gonna throw this link in here so we have something so we can see
a little bit more of this text you know instead of this I think maybe a
patterned image would be better that way it’s kind of not all over the place
let’s just search for like purple pattern repeatable I know we can find
a nice image to use for this okay sure let’s go for this one copy image address.
Okay this is looking better and now we have the text in there, so now what we
need to do is update this text based on some JavaScript, so I’m just gonna Google
how to do that. Update text with JavaScript and change the text of a span
element in JavaScript okay so we have a div and divs and spans are kind of the
same so we can probably make this work okay document dot get element my span
dot text content equals new text we’re gonna copy that in and we need to give
our not we have to give our div this ID of span
so actually it has this class knockout and we can give it an ID myspan. HTML
elements are just a way to structure your page and use IDs and classes to
style them and interact with them in JavaScript an ID you could only have one
per page in the class you can have multiple. So we can get multiple knockout
elements but we can only have one of my span so now we’re setting it with newtext
so we can even throw like whatever we want in here and it should work
correctly although we have this quote so you have to remove that so we don’t have
any issues so everything we can throw in here is gonna work. And we might have
some issues with the width we’re really we’re just playing around with it to get
something going so I’ll just undo this so we have newtext in there. All right
now we want to update this text based on the date so let’s see let’s start
JavaScript update text based on date every second maybe. We want to kind of it
constantly be checking so you don’t have to reload the website to see is RuPaul’s
Drag Race on you just kind of wanted to always update continuously. Update the
time regularly okay so there is update clock so there’s they get a date object
they have all the months I guess then basically they’re getting the time okay
so they won’t they kind of left out parts of this example but that’s okay
and they’re joining some of these things together okay so I like this and it’s
also we have we’re getting the set time out in here so I’m gonna copy this in
and we’re gonna have to change them stuff we’re gonna have to get a little
bit of other stuff in here but I think we’ll be able to make start making this
work and I’ll also make this bigger. I don’t think we need to CSS for now and
our HTML is pretty good too. So focus purely on the JavaScript so instead of
updating this time element let’s instead update the my span so I’ll copy this in.
We are running out of screen space here. What is this? There’s a little error can’t set property innerhtml of null. Okay that’s fine
because we were gonna comment that out okay
get element by ID myspan equals and let’s just set it
I know I told you not to use the cut command but I just did it oh okay I’m
gonna put that on newline commented out comments are fine without copying and
pasting right? Okay let’s see what’s happening over here I guess is it gonna
update every minute? No it’ll update every second let’s actually let’s read
the code that I copied and pasted. You knows we are not mindlessly copying and
pasting code okay so here it’s getting minutes and let’s why don’t we look up
and get the seconds for JavaScript so JavaScript date get seconds. Okay it
looks like it’s just to get seconds and we could have written that output why
not copy and paste it to get a little wild
Do I have an error? unexpected token comma!? Okay let’s see what I do oh I see
I guess there’s a little comma in there, Maybe I maybe I hit it by accident but
okay we’re gonna. We’re using the Delete key as well in this tutorial we’re good now
this is updating every single second so we’re doing pretty well. Now, I think what
we want to do is get the day of the week based we want to get the day of the
week from the date and then do an if statement comparing if that day the week
is Friday drag race is on that day and then I
think we can say if drag race is on say yes drag race is on and if it’s not you
can watch my tutorials instead. So what a win you get drag every day of the week
you want it okay JavaScript JavaScript *sings* Javascript *sings* JavaScript to get day of week get
day of a week from date and you can make a typo when you’re searching ok get
day oh cool okay so get day and I guess it said which day is Friday ok Friday is
six we know five is Friday is five gotta read okay
date okay so they made a new date and they’re doing get day.
Okay so let’s let’s get rid of some of this so we don’t even need we don’t need
this date object and delete that we just want to do now dot get day so instead of
time this is actually just gonna be day so copy that in over there no copy day
here. Am i cheating by copying and pasting all the stuff in here? No I’m – I
make up the rules for this challenge so it’s gonna be whatever I want it to be
so now the inner content is gonna be the day let’s just delete some of those
other stuff because we don’t need it so let’s get to clean up some of the stuff
you take okay so it is day zero and what day of the week is that Sunday okay it’s
Sunday and hopefully this content is out to you by day number one or day number
two but we’ll see okay and we’re totally in the homestretch
now we want to get an if statement if day equals five the then we’ll print our
good message and if it’s now a print my watch my other stuff instead okay.
So I’m just gonna do JavaScript if statement and I’ll do numbers even now
we will even have a less work to do okay well not no, but sure okay. If time is
less than 20 so actually we wanna do day can I copy this okay I’m just gonna copy two
equal signs equals equals. And day equals oh and then here’s the five for Friday.
You know me mindlessly copying and pasting code. Okay oh good day and then
instead of that we can actually copy this part over here. Day equals five: good
day. Otherwise it’ll print the number so we know it’s gonna print that number we
should want an else statement in here is there an else is there an else is there
an else yes okay good how was I gonna do the else if I
couldn’t copy and paste it. You know.! Otherwise we’ll put it in here this is
not gonna do anything right now, but maybe we can say I’m actually I’ll set
this to zero just so we can have a kind of way we can see if it’s gonna change
based on that. Okay so this says good day so let’s change that
we can undo that’s another one command-z or control-z on Windows to undo you know
might be good especially if you’re doing a lot of copying pasting you want to
make sure you get to the original state of that copy paste. This other one just
gonna print day I guess what do we want it to print out let’s get our quotes in
here at least, and one semicolon should be enough, and oh maybe we can pull from
here cuz it said “like cool” – “like cool visit my site” sure you know we’re just
trying to get any kind of text that we can copy and paste like cool visit my
site like cool visit my site okay and then I don’t know sure your search when
is drag race on, I’ll copy of this. I’ll throw it in here drag race season 12
will air and now we can open this in full-page mode like cool visit my site
and can I click this? I should be able to click I should have been able to
click this still oh I see we got it let’s move this span on to this link
instead that way it stays a link right now we’re setting the inner text of my
span which is this whole link and all this stuff but we just want to set the
inner text of the link and then we’ll be able to keep the link the whole time and
we can even clear this out because we don’t need that anymore
like cool visit my site and then if we click this you’ll go to my youtube
channel go don’t don’t forget to Like subscribe ring the bell I’ll remind you
in a minute don’t you worry and then if we weren’t
on a Friday it would say drag race will air today. Where is that? It will say drag
race season 12 will air so we were able to make a full website just copying and
pasting code and combining a lots of different components. The reason I wanted
to make this video is because I sent out a tweet saying coding is actually 30
percent of your time copying and pasting code 30 percent of your time drinking
coffee the 30 percent of your time debugging 30 – 9 percent
finding a lost semicolon and then 1% actual coding this is not an original
this is not our original thought I didn’t even think it was that funny yeah a lot
of people took this and saw Oh Anna’s saying this thing it must be a woman and
it must be someone who is incompetent or isn’t able to think clearly or isn’t
able to copy and paste code smartly people are even saying the I mean I work for Google but this is all opinions are all of my own thoughts so don’t get it
twisted people were saying to interview a Google to get a job at Google you have
to be really smart there’s a rigorous interv– interview process say and it
seems like they must have wanted just finish saying Anna must be smart Anna
must have know what they’re talking about – she’s talking about and no they
finished that sentence I saying oh no and as a diversity hire she got hired
because she’s a drag queen and that literally doesn’t make any sense because
I didn’t even start doing drag until I worked at Google
so all these nincompoops are making stuff up not using logic and they’re
just trying to put women and other people down and I am not here for this
no you are not a diversity hire no you are not mindlessly copying and pasting
code no you are valued I want people like you watching this video I want
people like you on my team and people like you to work with and yes it is
totally okay to copy and paste code that’s what stack overflow is for that’s
what documentation is for and you know what spend 30 percent of your time going
on a coffee break go with your coworkers go with people on different teams and
learn about what they’re working on learn about different ways to do what
you’re doing and do it better I’m going tech to be a community where
you can feel safe to be yourself and to express yourself and make stupid jokes
about code and shape the future by building all kinds of different
technology so I will end on that note if you like this video leave a like on the
video comment subscribe ring the bell make your own website that’s just done
by copying and pasting websites to show the trolls who are the true bosses and
who are the true coding Queens all right that is all have
some amazing new content coming out soon but I really think it was important to
get this video out to you all so thank you and happy fabulous week


  1. Charles Jenkins Post author

    awesome content keep up the amazing work

  2. Abigail Reed Post author

    Haters gonna hate. People take shortcuts in their jobs all the time! I mean if you didn't you'd be at work FOREVER and it would take so long much longer. You rock the coding world. 💜

  3. mike steele Post author

    billie eilish has been REAL quiet since you posted this lewk


Leave a Reply

Your email address will not be published. Required fields are marked *