5 ms·

I was recently asked by a friend who teaches 5th graders to do something similar for their school's "career month." I tried a few different things, and found th

I was recently asked by a friend who teaches 5th graders to do something similar for their school's "career month." I tried a few different things, and found the most successful was showing them how to use a web browser's built-in developer tools to inspect the source of and make live modifications to web pages. My reasoning behind this exercise was: - I checked in with their teacher ahead of time and confirmed that all of these kids had a least some experience using a web browser. Generally it seems like a likely "lowest common denominator" of tech experience for kids. - Most web browsers have powerful developer tools that can be used to inspect and modify source and will display the results of many types of changes in real time. It is easy to get kids to understand the relationship between HTML/CSS code and the webpage that results from rendering it when you can make live changes to the code and see it immediately reflected in the rendered page. - Web browsers are freely available. I gave them a handout with instructions on how to access the developer tools in web browsers that are either free (Chrome, Firefox) or readily available to them (Safari, since their school computer lab had a few Macs). I specifically wanted them to be inspired and continue experimenting after I left. I concluded by spending 10 minutes taking student's requests for the modifications to nytimes.com. It ended up with a bizarro color scheme, comic sans on all the things, and pictures of dinosaurs and Pixar characters at the top of every article. Everyone had a blast, myself included! I think the demonstration tickled the kid's innate predisposition towards mischief. An immediate question was "can everyone in the world see this changes? are you hacking right now?," which allowed me to naturally give a high-level explanation of the server-client architecture of the web. A few kids came up to me afterwards and asked me to specifically walk them through finding and opening the developer tools so they could continue experimenting at home, and that was the best outcome I could've hoped for!

sriram_malhar 7y ago
What a great idea! Thank you for the inspiration, and the insight of appealing to kids' sense of mischief.
mrhappyunhappy 7y ago
“Hey kids, did you know you can change your grades online? Check this out. Oh hey Jimmy, lets make that C into an A” “Wow!” “Change mine, change mine!” I was impressed with dev tool live edit as an adult, unless kids already know about it, they’ll probably love it!
- thegeomaster 7y ago
  As a kid, I remember using the "Edit in Frontpage" button that IE had and fool myself into thinking I was hacking websites. Definitely had a blast, I imagine the dev tools eliciting at least the same amount of wow.
dreamling 7y ago
That could be a cool way to give them an introduction to https://glitch.com/ https://glitch.com/ Free, fun, collaborative place to learn and show code, remix things they like and add their own stamp and an easy way to ask for help. https://medium.com/@kellylougheed/dark-stormy-night-with-css-animations-823d2a5b576f https://medium.com/@kellylougheed/dark-stormy-night-with-css... You might not have time to do something like this, but it'd be nice to include it in a resources to explore list for later. https://code.tutsplus.com/tutorials/create-a-multiplayer-pirate-shooter-game-in-your-browser--cms-23311 https://code.tutsplus.com/tutorials/create-a-multiplayer-pir... Pretty sure all I wanted to do was make cool graphics and games at that time. You could also show off some cool pens from codepen.io which also let you remix and play. If you think they'd be into interactive fiction games/stories, you can run twine or texture in the browser, too, you could ask them for prompts, 'where do we go next, the cave or the castle' and then make it happen. https://twinery.org/ https://twinery.org/ https://texturewriter.com/ https://texturewriter.com/ A little deeper in, but I once went to a tech talk where the speaker setup a http://johnny-five.io/ http://johnny-five.io/ bot that and changed the LEDs on her belt in the room when people tweeted colors at it. You might not need a whole belt (or even LEDS, you could have a webpage change colors or words or music), but that kind of live demonstration is always fun (and comes with the caveat of live demos, which somehow don't always work when in front of an audience of skeptic students). Have fun!
bredren 7y ago
The inspect element tool is actually a meme on TikTok, where the content creator changes some high priced luxury item (ie yeezyees) to a low price and improbably buys them. I’ve seen others where they change their “grade” in a class. I think this would go over well also.
- alanning 7y ago
  I did this for a 4th grade class. We changed the teacher's profile pic on their class page to one of the kid's. Also displayed random emoji's next to the kids' names. They absolutely loved the emoji part and kept wanting me to refresh to see who got the poop emoji. Demoing how to remix and change Scratch games also went over well.
the_watcher 7y ago
This is such a good idea. Messing with a website is absolutely something I'd have done instead of the typing practice I was supposed to be doing in my (small town public) middle school "Computers" class.
- y4mi 7y ago
  They should just let people play zty.pe instead of these silly excises. My current high score is 4200, though I mostly fail around 3400
- Moru 7y ago
  Make sure they didn't do this in school already before you do, my 5'th grader was trying to show this to me yesterday :-)
  - geomark 7y ago
    Yeah. My kid in Year 4 (Grade 3) has been doing this with his classmates. They fake their on-screen scores on TT Rockstars (a times tables game) and other shenanigans. So they might not be impressed if they have already discovered it.
    - the_watcher 7y ago
      There's all kinds of cool stuff you can do with devtools and inspecting a page though. If they've figured out how to change the text, start teaching them how styling works, or show them more advanced styling than they've discovered. Show them how to poke around in the console or see JSON payloads.
dankohn1 7y ago
My 4th grader loves this. Search Google for kittens, run Inspector, change the word to puppies, and close Inspector. It really gives them the feel for reaching underneath to begin to see how things work.
Corrado 7y ago
My wife teaches 8th grade and I did something similar with her classes a couple of years ago. My example was pulling up a NASA twitter post and changing it to read "Mrs. BLAH is the best teacher in the universe!" (or something like that). They thought it was incredible and couldn't believe you could "hack" computers like that. This type of thing is also a really good teaching moment; you can't always believe everything you see on the Internet or a screenshot.
OrgNet 7y ago
> and make live modifications to web pages don't you only need a single javascript line in the address bar for that? Something like: javascript: document.body.contentEditable = 'true'; document.designMode = 'on'; void 0
cartercole 7y ago
this is almost identical to how my dad got me writing HTML... i loved it
yorwba 7y ago
To enable experimentation like that, I'd like to see mobile browsers include developer tools as well. More and more people grow up using a smart phone as their main computing device, and I think they should be given the opportunity to tinker with that as well. I realize that developer tools are information dense and fitting them on a smartphone screen would require a significant effort to redesign the layout (especially when you want to see the website, the code you're editing and the on-screen keyboard at the same time), so browsers might not want to spend effort to include a niche feature like that. Maybe it would be possible to connect to the remote debugger with an on-device client? Then it could be developed as a separate project.
- rnotaro 7y ago
  You can use Chrome Remote Debugging to access the developer console for a mobile device. https://developers.google.com/web/tools/chrome-devtools/remote-debugging/ https://developers.google.com/web/tools/chrome-devtools/remo... You can also load Eruda with Javascript. https://github.com/liriliri/eruda https://github.com/liriliri/eruda
  - yorwba 7y ago
    The problem with remote debugging is that it apparently requires a separate device, whereas I was thinking about people who only have a smart phone. That's what I meant by "Maybe it would be possible to connect to the remote debugger with an on-device client?" The Eruda approach to inject the debug console with a oneliner in the address bar seems like a possible solution, though. Thanks.
tty2300 7y ago
A demonstration on inspect element also quickly teaches people how easy it is to create a fake screenshot. No need for complex work in Photoshop when you can create something that looks perfectly real effortlessly.
jacknews 7y ago
I'm not a frontend dev, so when my kids came home from school and showed me this trick they'd learned, even I was impressed!
toptoppler 7y ago
If you really wanted to take this next level, you could export some of the changes to a browser plugin called So-and-so elementary school Expperiment (you don't have to show them this) and say they can load the plugin on their home computers. Voila, their parents now have a tricked out NYT home page.
deleted 7y ago
[deleted]

sriram_malhar 7y ago

What a great idea! Thank you for the inspiration, and the insight of appealing to kids' sense of mischief.

mrhappyunhappy 7y ago

“Hey kids, did you know you can change your grades online? Check this out. Oh hey Jimmy, lets make that C into an A” “Wow!” “Change mine, change mine!” I was impressed with dev tool live edit as an adult, unless kids already know about it, they’ll probably love it!

thegeomaster 7y ago
As a kid, I remember using the "Edit in Frontpage" button that IE had and fool myself into thinking I was hacking websites. Definitely had a blast, I imagine the dev tools eliciting at least the same amount of wow.

dreamling 7y ago

That could be a cool way to give them an introduction to https://glitch.com/ https://glitch.com/ Free, fun, collaborative place to learn and show code, remix things they like and add their own stamp and an easy way to ask for help. https://medium.com/@kellylougheed/dark-stormy-night-with-css-animations-823d2a5b576f https://medium.com/@kellylougheed/dark-stormy-night-with-css... You might not have time to do something like this, but it'd be nice to include it in a resources to explore list for later. https://code.tutsplus.com/tutorials/create-a-multiplayer-pirate-shooter-game-in-your-browser--cms-23311 https://code.tutsplus.com/tutorials/create-a-multiplayer-pir... Pretty sure all I wanted to do was make cool graphics and games at that time. You could also show off some cool pens from codepen.io which also let you remix and play. If you think they'd be into interactive fiction games/stories, you can run twine or texture in the browser, too, you could ask them for prompts, 'where do we go next, the cave or the castle' and then make it happen. https://twinery.org/ https://twinery.org/ https://texturewriter.com/ https://texturewriter.com/ A little deeper in, but I once went to a tech talk where the speaker setup a http://johnny-five.io/ http://johnny-five.io/ bot that and changed the LEDs on her belt in the room when people tweeted colors at it. You might not need a whole belt (or even LEDS, you could have a webpage change colors or words or music), but that kind of live demonstration is always fun (and comes with the caveat of live demos, which somehow don't always work when in front of an audience of skeptic students). Have fun!

bredren 7y ago

The inspect element tool is actually a meme on TikTok, where the content creator changes some high priced luxury item (ie yeezyees) to a low price and improbably buys them. I’ve seen others where they change their “grade” in a class. I think this would go over well also.

alanning 7y ago
I did this for a 4th grade class. We changed the teacher's profile pic on their class page to one of the kid's. Also displayed random emoji's next to the kids' names. They absolutely loved the emoji part and kept wanting me to refresh to see who got the poop emoji. Demoing how to remix and change Scratch games also went over well.

the_watcher 7y ago

This is such a good idea. Messing with a website is absolutely something I'd have done instead of the typing practice I was supposed to be doing in my (small town public) middle school "Computers" class.

y4mi 7y ago
They should just let people play zty.pe instead of these silly excises. My current high score is 4200, though I mostly fail around 3400
Moru 7y ago
Make sure they didn't do this in school already before you do, my 5'th grader was trying to show this to me yesterday :-)
- geomark 7y ago
  Yeah. My kid in Year 4 (Grade 3) has been doing this with his classmates. They fake their on-screen scores on TT Rockstars (a times tables game) and other shenanigans. So they might not be impressed if they have already discovered it.
  - the_watcher 7y ago
    There's all kinds of cool stuff you can do with devtools and inspecting a page though. If they've figured out how to change the text, start teaching them how styling works, or show them more advanced styling than they've discovered. Show them how to poke around in the console or see JSON payloads.

dankohn1 7y ago

My 4th grader loves this. Search Google for kittens, run Inspector, change the word to puppies, and close Inspector. It really gives them the feel for reaching underneath to begin to see how things work.

Corrado 7y ago

My wife teaches 8th grade and I did something similar with her classes a couple of years ago. My example was pulling up a NASA twitter post and changing it to read "Mrs. BLAH is the best teacher in the universe!" (or something like that). They thought it was incredible and couldn't believe you could "hack" computers like that. This type of thing is also a really good teaching moment; you can't always believe everything you see on the Internet or a screenshot.

OrgNet 7y ago

> and make live modifications to web pages don't you only need a single javascript line in the address bar for that? Something like: javascript: document.body.contentEditable = 'true'; document.designMode = 'on'; void 0

cartercole 7y ago

this is almost identical to how my dad got me writing HTML... i loved it

yorwba 7y ago

To enable experimentation like that, I'd like to see mobile browsers include developer tools as well. More and more people grow up using a smart phone as their main computing device, and I think they should be given the opportunity to tinker with that as well. I realize that developer tools are information dense and fitting them on a smartphone screen would require a significant effort to redesign the layout (especially when you want to see the website, the code you're editing and the on-screen keyboard at the same time), so browsers might not want to spend effort to include a niche feature like that. Maybe it would be possible to connect to the remote debugger with an on-device client? Then it could be developed as a separate project.

rnotaro 7y ago
You can use Chrome Remote Debugging to access the developer console for a mobile device. https://developers.google.com/web/tools/chrome-devtools/remote-debugging/ https://developers.google.com/web/tools/chrome-devtools/remo... You can also load Eruda with Javascript. https://github.com/liriliri/eruda https://github.com/liriliri/eruda
- yorwba 7y ago
  The problem with remote debugging is that it apparently requires a separate device, whereas I was thinking about people who only have a smart phone. That's what I meant by "Maybe it would be possible to connect to the remote debugger with an on-device client?" The Eruda approach to inject the debug console with a oneliner in the address bar seems like a possible solution, though. Thanks.

tty2300 7y ago

A demonstration on inspect element also quickly teaches people how easy it is to create a fake screenshot. No need for complex work in Photoshop when you can create something that looks perfectly real effortlessly.

jacknews 7y ago

I'm not a frontend dev, so when my kids came home from school and showed me this trick they'd learned, even I was impressed!

toptoppler 7y ago

If you really wanted to take this next level, you could export some of the changes to a browser plugin called So-and-so elementary school Expperiment (you don't have to show them this) and say they can load the plugin on their home computers. Voila, their parents now have a tricked out NYT home page.

deleted 7y ago

[deleted]