Spooking Your Friends with Electron (BrooklynJS #59)

You can find a copy of the slides with text content, alt text, and captions here: https://github.com/pixelyunicorn/spooky-electron-app/blob/master/slides/README.md

(Only thing you missed out on were the _fun_ live coding and demos!)

Code: https://github.com/pixelyunicorn/spooky-electron-app

Follow Melody on Twitter: https://twitter.com/pixelyunicorn

Transcript

1. Melody Starling @ BrooklynJS #59 @pixelyunicorn melody.cool Spook your friends with Electron! (I love you front row!) w/ Melody Spookling @pixelyunicorn
2. Melody Starling @ BrooklynJS #59 @pixelyunicorn melody.cool In case you were wondering what my profile picture was about, I helped a team of student coders build a cyborg alpaca using Arduino and Node.js!
3. Melody Starling @ BrooklynJS #59 @pixelyunicorn melody.cool Hai, I’m Melody! Hi, I’m Melody. My pronouns are they/them. I’m from the sometimes sunny city of Philadelphia.
4. Melody Starling @ BrooklynJS #59 @pixelyunicorn melody.cool Hai, I’m Melody! JS I started TacoJS. It’s like BrooklynJS but with tacos. We haven’t had a meetup recently, so if you want to speak feel free to send us a pull request! (tacojs.github.io)
5. Melody Starling @ BrooklynJS #59 @pixelyunicorn melody.cool Hai, I’m Melody! JS I also specialize in design and web development.
6. Melody Starling @ BrooklynJS #59 @pixelyunicorn melody.cool Hai, I’m Melody! JS I guess that makes me a unicorn!
7. Melody Starling @ BrooklynJS #59 @pixelyunicorn melody.cool Hai, I’m Melody! JS I’m also super addicted to tea. Sometimes I wish Borogramming served tea instead of coffee…
8. Melody Starling @ BrooklynJS #59 @pixelyunicorn melody.cool I’m looking for a job! melody.cool Oh, and I’m looking for a job! If you’re hiring, please check out my website at melody.cool!
9. Melody Starling @ BrooklynJS #59 @pixelyunicorn melody.cool What is Electron? So what is Electron? Well, it’s a framework created by GitHub…
10. Melody Starling @ BrooklynJS #59 @pixelyunicorn melody.cool What is Electron? …that allows you to build cross-platform desktop applications…
11. Melody Starling @ BrooklynJS #59 @pixelyunicorn melody.cool What is Electron? …using Javascript! And HTML! And CSS!
12. Melody Starling @ BrooklynJS #59 @pixelyunicorn melody.cool Chances are, if you use desktops apps like Skype, Discord, Slack, or GitHub, you probably already use Elecrtron!
13. Melody Starling @ BrooklynJS #59 @pixelyunicorn melody.cool Let’s build an Electron app! So let’s build an Electron app!
14. Melody Starling @ BrooklynJS #59 @pixelyunicorn melody.cool Let’s build an Electron app! Now, no one likes to start from scratch, so I used this code as my starting point.
15. Melody Starling @ BrooklynJS #59 @pixelyunicorn melody.cool Let’s build an Electron app! All you need to do is run npm install electron. (Speaking of npm, its co-founder is sitting right in front of me. Hi, Laurie!) install electron
16. Melody Starling @ BrooklynJS #59 @pixelyunicorn melody.cool Then you require the Electron module.
17. Melody Starling @ BrooklynJS #59 @pixelyunicorn melody.cool And this function, at less than 10 lines of code without comments, is all it takes to create a basic Electron app.
18. Melody Starling @ BrooklynJS #59 @pixelyunicorn melody.cool So what we’re doing here is creating a new BrowserWindow instance with a width of 800 and a height of 600. Then we’re loading an HTML page called boo.html. That’s it.
19. Melody Starling @ BrooklynJS #59 @pixelyunicorn melody.cool Here’s what that looks like! (Window resized to fit slide.) Demo time!
20. Melody Starling @ BrooklynJS #59 @pixelyunicorn melody.cool Now, here’s where the evil comes in. You can add some pretty scary parameters into BrowserWindow…
21. Melody Starling @ BrooklynJS #59 @pixelyunicorn melody.cool Like hiding the window frame, having a transparent background, hiding the title bar, and a full screen mode that doesn’t open in another workspace on macOS.
22. Melody Starling @ BrooklynJS #59 @pixelyunicorn melody.cool We can go even further! Let’s have clicks pass through it, hide the icon from the dock so no one knows it’s running, and set it so that it’s always on top and full-screen by default!
23. Melody Starling @ BrooklynJS #59 @pixelyunicorn melody.cool Here’s what that looks like! Notice how you can click through it, and how it persists on top of macOS spaces, like this full-screen window. This brings us some interesting use cases… Demo time!
24. Melody Starling @ BrooklynJS #59 @pixelyunicorn melody.cool Use Case #1: The first of which is playing horse noises in the background. This is literally all the code it takes.
25. Melody Starling @ BrooklynJS #59 @pixelyunicorn melody.cool Use Case #1: It autoplays a file called horse.mp3 on loop, hidden on plain sight!
26. Melody Starling @ BrooklynJS #59 @pixelyunicorn melody.cool “neigh” “neigh” “neigh” “neigh” Demo time! “neigh” (Because I can’t embed sound into uploaded slideshows, imagine hearing a bunch of horses going neigh and not knowing where it’s coming from!)
27. Melody Starling @ BrooklynJS #59 @pixelyunicorn melody.cool Use Case #2: Has anyone here ever pirate Windows? Well, if you do, you may end up with this beautiful Activate Windows watermark. But what if you did pay for Windows? Or use macOS? Or even Linux?
28. Melody Starling @ BrooklynJS #59 @pixelyunicorn melody.cool Demo time! You’re not missing out on anything, thanks to Electron!
29. Melody Starling @ BrooklynJS #59 @pixelyunicorn melody.cool Use Case #3: Of course, if you truly want to do evil, you can probably create Ransomware with Electron. Not that you should.
30. Melody Starling @ BrooklynJS #59 @pixelyunicorn melody.cool Let’s go all out! But that just scratches the surface of the harmless (and not- so-harmless) pranks we can pull on people. Let’s take this even further!
31. Melody Starling @ BrooklynJS #59 @pixelyunicorn melody.cool Cracked Screen Here’s a jpeg of a cracked screen I found on the internet. You probably know where I’m going with this.
32. Melody Starling @ BrooklynJS #59 @pixelyunicorn melody.cool Cracked Screen I can’t afford Photoshop, so I’ll use PowerPoint as my image editor. It has a built-in Remove Background feature that will give me a nice transparent image to work with.
33. Melody Starling @ BrooklynJS #59 @pixelyunicorn melody.cool Let’s just add that image to my CSS and have it cover the whole page…
34. Melody Starling @ BrooklynJS #59 @pixelyunicorn melody.cool Demo time! And look at that! (Sorry for breaking your projector, I’ll unbreak it in just a second!)
35. Melody Starling @ BrooklynJS #59 @pixelyunicorn melody.cool Limitations (macOS) Cannot (yet) draw over cursor, launchpad, mission control, login screen, etc Of course, it’s super obvious that it’s a prank because of Electron’s limitations, especially since it can’t draw over the cursor or menu bar…
36. Melody Starling @ BrooklynJS #59 @pixelyunicorn melody.cool Glitch Effect https://tympanus.net/T utorials/CSSGlitchEffe ct/ Let’s build something that’s a bit more subtle, like a glitching screen. Here’s one I found on the internet.
37. Melody Starling @ BrooklynJS #59 @pixelyunicorn melody.cool Glitch Effect Since Electron is powered by the same technology as web pages, we can bring this image glitch effect to the desktop!
38. Melody Starling @ BrooklynJS #59 @pixelyunicorn melody.cool Glitch Effect How this particular glitch effect works, is that it takes a background image and flickers multiple crops of it across the screen. Here’s something I found that will allow us to use a screenshot of the desktop as our background image.
39. Melody Starling @ BrooklynJS #59 @pixelyunicorn melody.cool Demo time! Here’s a demo of how that works. Here’s a terminal window.
40. Melody Starling @ BrooklynJS #59 @pixelyunicorn melody.cool Demo time! Here’s that same terminal window, with the glitch applied. Notice how we are shifting and adding random tints everywhere.
41. Melody Starling @ BrooklynJS #59 @pixelyunicorn melody.cool Demo time! If you’re feeling woke, you can also have the glitch run recursively! This may result in a memory leak crashing your computer at some point. (This actually did crash my computer!)
42. Melody Starling @ BrooklynJS #59 @pixelyunicorn melody.cool Thank You! ~ Hire me: melody.cool Tweet me: @pixelyunicorn Splat me: SW-4207-5422-1528 patreon.com/madebymelody Thank you so much for coming out to see my BrooklynJS talk! Here’s where you can find me if you want to keep in touch.