DEV Community: Maggie Appleton

Illustrated Notes on Web Security Essentials

Maggie Appleton — Mon, 30 Nov 2020 18:03:02 +0000

Between IoT botnet attacks, Bitcoin ransomware, and the weekly cadence of high-profile data breaches, doing anything on the internet feels like playing Russian Roulette.

And that's just for normal people using it.

As a developer, you're partially responsible for protecting all those normal people from the horrors of whatever LulzSec are up to right now. The least you can do is make sure your website isn't an accessory to their nefarious activities.

So what does the current landscape of internet risk looks like. How, exactly, is LulzSec going to hack into my mainframe in 2020?

Here's my illustrated notes from Mike Sherov's egghead course on 'Web Security Essentials' that should give you a big picture overview of what to should look out for.

Turns out there's a small set of fairly well-known and easy to defend attacks that we can protect ourselves from:

Man in the Middle (MITM)
Cross-Site Request Forgery (CSRF)
Cross-Site Scripting (XSS)

Shielding yourself from these three is a great starting point. It's at least enough to keep the script kiddies out.

Keeping out this trio of attacks will go a long way. Thankfully, you do not have to brave the black hat darkness alone.

Mike Sherov's course covers a whole range of ways to mitigate your risk and protect against them.

👁‍🗨 If these are hard to read, you can download a free high-res PDF version on the course itself.
Dev.to limits image sizes a lot and it's hard to make it readable on here. Apologies!

WTF is Rust? The Illustrated Notes

Maggie Appleton — Mon, 23 Nov 2020 16:46:55 +0000

The Rust programming language keeps winning the middle-school popularity contest of the developer world: "most loved" on Stack Overflow surveys.

So, what's this Rust thing and why is everyone enamoured?

Let's explore...

This happy balance Rust manages to strike – between speed, control over memory, and human-friendliness is what makes it so popular.

The kind of programmes you can write with Rust would otherwise be made in a language like C or C++. A lot of developers find the C-suite challenging to work with, so this friendly alternative is very welcome!

It's got the Goldilocks Effect going on. Not too slow, not too dangerous, not too complicated – just right.

The Rust community is also infamous for being welcoming, open, and encouaging to newcomers. Fostering that kind of culture is very likely why it's gained so much traction in the last few years.

Anyone who hangs out in Developer World long enough realises frameworks and languages are identities much more than they're tools. You belong to Team React, or Camp Python, or the Rust Crew.

And no one wants to join a bunch of judgey gatekeepers.

I've just done a sweeping and completely incomplete overview of Rust here. But it's enough to point you in the right direction.

While researching and making these I watched Pascal Precht's egghead course that shows you how to Write Your First Rust Programme

It's free 20 minute course that shows you all the basics.

👁‍🗨 If these are hard to read, you can download a free high-res PDF version on the course itself.
Dev.to limits image sizes a lot and it's hard to make it readable on here. Apologies!

Illustrated Notes on Custom React Hooks

Maggie Appleton — Fri, 20 Nov 2020 10:21:09 +0000

Illustrated notes on Joe Previtte's course on Building Custom React Hooks on egghead

The Basics of React Hooks

If you're not up to speed on React hooks, here's a very quick overview...

Hooks let us do more than just display static UI components. They give us the ability to hold state in our components, and use lifecycle events that can handle side effects and data changing over time.

We used to do this with class components, but the React library added hooks in early 2019 with version 16.8.

The Two Main Hooks

The React library comes with a set of "build in" hooks. There are 10 official hooks, but the two most common ones are useState and useEffect.

1. useState

useState lets us hold "state" – a piece of data that changes over time while your app is up and running.

2. useEffect

useEffect let's us perform side effects. That means we can execute functions or run code that isn't directly about rendering UI elements to the DOM.

This includes making data requests, or running JavaScript functions after the components have already rendered.

Creating Your Own Custom Hooks

We can also remix these built-in hooks to create custom hooks.

These are simply functions you write that use the basic hooks, and layer extra functionality on top of them.

There's a great collection on usehooks.com if you want to see some examples.

Once you've written your hook, there's a handy create-react-hook library that does all the formatting grunt work and makes uploading your hook to npm easy.

Just use npx create-react-hook, add a package name, description, Github details, and licence. There's a default template that works for most cases.

It'll generate a series of files and folders for you. You just need to add your hook file to the /src folder, write the readme, and take care of some other housekeeping.

After that you're all ready to publish your hook for others to use 🎉

Joe's course is nice and short, and covers all the details of how to do this.

You can get a handle on custom hooks in under 30 minutes. Then start writing your own!

👁‍🗨 If these are hard to read, you can download a free high-res PDF version on the course itself.
Dev.to limits image sizes a lot and it's hard to make it readable on here. Apologies!

Illustrated Notes on Fixing Git Mistakes

Maggie Appleton — Tue, 17 Nov 2020 17:39:55 +0000

These are illustrated notes I made while working through Chris Achard's Fix Common Git Mistakes course on egghead.

The course is a great refresher on the fundamental structure of git, adding and removing commits, and (critically) undoing mistakes of all kinds.

The Basic Structure of Git

Chris covers all the various 'levels' your Git files can be at. I personally needed to think of it as a spatial stack to understand how files move between them.

Every time I push commits to Github I see something like this in my head:

I also found it helpful to think of the 'stash' as a side drawer you tuck files away in, and then can 'pop' them back out later.

Branches are Pointers

This framing of git branches as "pointers" you can move around changed the way I think about them a lot.

We can move the pointers to different commits, which are just different versions of our project at a specific point in time.

Git Log

git log is a handy feature that shows you all your previous commits and their details. It's quite verbose though.

git log --oneline is much easier to read since it only shows you the commit hashes and messages

git log --graph draws a tiny graph in the terminal showing branches and merges

Undoing Mistakes

Git Commit Ammend

git commit --ammend lets us add or change files in our last commit, as well as the commit message

Git Reset

git reset will move a file backwards. If you're committed a file to either staging or the local repo, we can bring it back to our working directory.

Git gives us three levels of "intensity" for resetting - git reset --hard, git reset --soft, and mixed.

If you don't specify one, mixed is the default which just moves it from the local repo back to your working files.

Git Diff

git diff is a handy utility for seeing what's changed between two commits or two files

You can compare two commits using their branch names or commit hashes: git diff main new-feature

You can also compare two files by passing in both file names: git diff path/to/file/ComponentA.js path/to/file/ComponentB.js

Detached Head

A detached head is less morbid than it sounds. It just means we've checked out a commit using it's specific hash name, such as git checkout 49da32
That commit is now the "head" because it's the most recent version of our project.

It's "detached" because we've navigated there directly and aren't on our usual branch structure. We have to "reattach" the commit back to our branch with git checkout -b my-new-branch-name

It feels good to be less lost in the git forest now.
I hope some of these techniques make your git log less sad too :)

There's plenty more in Chris' course that I left out here.

👁‍🗨 If these are hard to read, you can download a free high-res PDF version on the course itself.
Dev.to limits image sizes a lot and it's hard to make it readable on here. Apologies!

Illustrated Notes on Advanced JavaScript Fundamentals

Maggie Appleton — Wed, 04 Nov 2020 19:27:35 +0000

Being humans, we rarely learn things linearly.

No one begins their JavaScript journey by reading the TC39 language specification line-by-line like a pedantic masochist.

Instead we all cobble together a good-enough understanding, leaving holes here and there to fill in later.

If you're like me, you might have been stumbling through your JavaScript journey without 100% grokking prototypical inheritance, or how call, apply, and bind work on functions.

It's fine. Stuff mostly works.

Until it doesn't ¯_(ツ)_/¯

At some point, it's useful to stop stumbling around and peek back at those holes.

I found Tyler Clark's egghead course on Advanced JavaScript Foundations was the perfect opportunity to strengthen my JS foundations.

While working through the course, I illustrated a set of notes to help me understand and remember all the concepts.

Primitive Types & Autoboxing

Prototypical Inheritence

The `New` Keyword

The `.this` keyword

These illustrations aren't perfectly designed to explain the concepts they're about, and instead work as shorthand notes for me.

Take a look at Tyler's course if you want to dig into the concepts more.

A Fresh Serving of JavaScript ES2019

Maggie Appleton — Thu, 25 Jul 2019 16:12:31 +0000

The original post is up on my digital garden (the image quality is a bit dodgy here on dev.to)

A new version of JavaScript has landed!

Every year JavaScript gets a handful of new features and functions for everyone to play with.

The TC39 committee have released the 2019 additions to ECMAScript, which is the generally accepted version of JavaScript we all know and ~~love~~ tolerate.

You can take a look at the TC39 Github to track the progress of proposed features, including all the ones they've accepted into the official language.

Mike Sherov just put together a new egghead course on Javascript ES2019 in Practice which is a good summary of all the new shiny bits, as well as how they apply in IRL dev situations.

I took sketchnotes while watching his course, and have a quick illustrated summary of the 7 big changes:

Optional Catch Binding
Stable array.sort()
Flatten Arrays with flat()
Flatten & Map Arrays with flatMap()
Cut out Whitespace with trimStart() & trimEnd()
Descriptions on Symbols
Create Objects from Entries with fromEntries()

(Note that the space theme going on here has less to do with ES2019 and more to do with me watching Apollo 11 last week. Five stars, would recommend)

DEV Community: Maggie Appleton

Illustrated Notes on Web Security Essentials

WTF is Rust? The Illustrated Notes

Illustrated Notes on Custom React Hooks

The Basics of React Hooks

The Two Main Hooks

1. useState

2. useEffect

Creating Your Own Custom Hooks

Illustrated Notes on Fixing Git Mistakes

The Basic Structure of Git

Branches are Pointers

Git Log

Undoing Mistakes

Git Commit Ammend

Git Reset

Git Diff

Detached Head

Illustrated Notes on Advanced JavaScript Fundamentals

Primitive Types & Autoboxing

Prototypical Inheritence

The New Keyword

The .this keyword

A Fresh Serving of JavaScript ES2019

A new version of JavaScript has landed!

The `New` Keyword

The `.this` keyword