Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Spooking Your Friends with Electron (BrooklynJS #59)

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

Inky Collective

October 18, 2018
Tweet

More Decks by Inky Collective

Other Decks in Technology

Transcript

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

    View full-size slide

  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!

    View full-size slide

  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.

    View full-size slide

  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)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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…

    View full-size slide

  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!

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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!

    View full-size slide

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

    View full-size slide

  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.

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  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.

    View full-size slide

  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.

    View full-size slide

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

    View full-size slide

  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…

    View full-size slide

  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.

    View full-size slide

  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!

    View full-size slide

  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!

    View full-size slide

  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.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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?

    View full-size slide

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

    View full-size slide

  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.

    View full-size slide

  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!

    View full-size slide

  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.

    View full-size slide

  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.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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…

    View full-size slide

  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.

    View full-size slide

  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!

    View full-size slide

  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.

    View full-size slide

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

    View full-size slide

  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.

    View full-size slide

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

    View full-size slide

  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.

    View full-size slide