Tweet
Tweet

Slide 1

Slide 1 text

Melody Starling @ BrooklynJS #59 @pixelyunicorn melody.cool Spook your friends with Electron! (I love you front row!) w/ Melody Spookling @pixelyunicorn

Slide 2

Slide 2 text

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!

Slide 3

Slide 3 text

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.

Slide 4

Slide 4 text

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)

Slide 5

Slide 5 text

Melody Starling @ BrooklynJS #59 @pixelyunicorn melody.cool Hai, I’m Melody! JS I also specialize in design and web development.

Slide 6

Slide 6 text

Melody Starling @ BrooklynJS #59 @pixelyunicorn melody.cool Hai, I’m Melody! JS I guess that makes me a unicorn!

Slide 7

Slide 7 text

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…

Slide 8

Slide 8 text

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!

Slide 9

Slide 9 text

Melody Starling @ BrooklynJS #59 @pixelyunicorn melody.cool What is Electron? So what is Electron? Well, it’s a framework created by GitHub…

Slide 10

Slide 10 text

Melody Starling @ BrooklynJS #59 @pixelyunicorn melody.cool What is Electron? …that allows you to build cross-platform desktop applications…

Slide 11

Slide 11 text

Melody Starling @ BrooklynJS #59 @pixelyunicorn melody.cool What is Electron? …using Javascript! And HTML! And CSS!

Slide 12

Slide 12 text

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!

Slide 13

Slide 13 text

Melody Starling @ BrooklynJS #59 @pixelyunicorn melody.cool Let’s build an Electron app! So let’s build an Electron app!

Slide 14

Slide 14 text

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.

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Melody Starling @ BrooklynJS #59 @pixelyunicorn melody.cool Then you require the Electron module.

Slide 17

Slide 17 text

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.

Slide 18

Slide 18 text

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.

Slide 19

Slide 19 text

Melody Starling @ BrooklynJS #59 @pixelyunicorn melody.cool Here’s what that looks like! (Window resized to fit slide.) Demo time!

Slide 20

Slide 20 text

Melody Starling @ BrooklynJS #59 @pixelyunicorn melody.cool Now, here’s where the evil comes in. You can add some pretty scary parameters into BrowserWindow…

Slide 21

Slide 21 text

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.

Slide 22

Slide 22 text

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!

Slide 23

Slide 23 text

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!

Slide 24

Slide 24 text

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.

Slide 25

Slide 25 text

Melody Starling @ BrooklynJS #59 @pixelyunicorn melody.cool Use Case #1: It autoplays a file called horse.mp3 on loop, hidden on plain sight!

Slide 26

Slide 26 text

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!)

Slide 27

Slide 27 text

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?

Slide 28

Slide 28 text

Melody Starling @ BrooklynJS #59 @pixelyunicorn melody.cool Demo time! You’re not missing out on anything, thanks to Electron!

Slide 29

Slide 29 text

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.

Slide 30

Slide 30 text

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!

Slide 31

Slide 31 text

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.

Slide 32

Slide 32 text

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.

Slide 33

Slide 33 text

Melody Starling @ BrooklynJS #59 @pixelyunicorn melody.cool Let’s just add that image to my CSS and have it cover the whole page…

Slide 34

Slide 34 text

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!)

Slide 35

Slide 35 text

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…

Slide 36

Slide 36 text

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.

Slide 37

Slide 37 text

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!

Slide 38

Slide 38 text

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.

Slide 39

Slide 39 text

Melody Starling @ BrooklynJS #59 @pixelyunicorn melody.cool Demo time! Here’s a demo of how that works. Here’s a terminal window.

Slide 40

Slide 40 text

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.

Slide 41

Slide 41 text

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!)

Slide 42

Slide 42 text

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.