Forem: Spacie

Hover States with React Hooks

Spacie — Thu, 04 Jul 2019 06:51:38 +0000

Third video time, I might keep this daily schedule until university starts back next semester!

This is definitely a series now, it has its own repo and everything:

Code for all episodes: Source code contents page
Code for this episode: useHover.js

In this tutorial, we'll be creating a useHover hook, that allows our components to know about the hover state of any element that we attach a ref to!

As always, any feedback is highly appreciated (please let me know if there's anything you think I could explain better), thanks for reading and/or watching!

Keyboard input with React Hooks

Spacie — Wed, 03 Jul 2019 07:20:47 +0000

Guess who's back, it's me!

I really enjoyed making my first youtube video, so I decided to start a series on creating custom react hooks!

This one's about creating a useKey hook, that allows you to know when a certain keyboard key is pressed. I also cover some of the "rules of hooks", how short circuit evaluation violates the rules, and how to get around that..

Again, any feedback is highly appreciated, thanks for reading and/or watching!

function useKey(key) {
    // Keep track of key state
    const [pressed, setPressed] = useState(false)

    // Does an event match the key we're watching?
    const match = event => key.toLowerCase() == event.key.toLowerCase()

    // Event handlers
    const onDown = event => {
        if (match(event)) setPressed(true)
    }

    const onUp = event => {
        if (match(event)) setPressed(false)
    }

    // Bind and unbind events
    useEffect(() => {
        window.addEventListener("keydown", onDown)
        window.addEventListener("keyup", onUp)
        return () => {
            window.removeEventListener("keydown", onDown)
            window.removeEventListener("keyup", onUp)
        }
    }, [key])

    return pressed
}

Simple Animations with React Hooks

Spacie — Tue, 02 Jul 2019 09:33:44 +0000

Hi DevPeeps™! 👋

I just posted my first video tutorial (also my first youtube video in general)!

It's about using react hooks to create simple animations!

I've been getting really into hooks lately (especially linking them to other web APIs), so expect more hooks videos in the near future!

Also, if anyone has any feedback on the video I'd really love to hear it!
I'm quite new to video production and need all the advice I can get!

Thanks for reading and/or watching!

function useAnimation(duration) {
    const [progress, setProgress] = useState(0)
    const [startTime, setStartTime] = useState(Date.now())
    const reset = () => setStartTime(Date.now())
    useEffect(() => {
        let queuedFrame
        const frame = () => {
            const now = Date.now() - startTime
            if (now < duration) queuedFrame = requestAnimationFrame(frame)
            setProgress(Math.min(1, now / duration))
        }
        frame()
        return () => cancelAnimationFrame(queuedFrame)
    }, [startTime, duration])
    return [progress, reset]
}

Nevertheless, Spacie Coded ✨

Spacie — Fri, 08 Mar 2019 23:59:24 +0000

I started/continued to code in 2019 because...

It's a fun and powerful way to express ideas, especially in an environment where I don't usually feel comfortable doing that.

As a (mostly closeted 😿) trans girl, I find doing things I want and being the version of myself that I want to be to be extremely difficult. I know it might sound a little cringey, but coding let's me (for the most part at least) make the things I want, how I want them, and lets me be in total control of something for once!

I deserve credit for...

Launching spacie.me! ✨

It's not a very complex site, but it took me ages to finally have the guts to commit to a preferred name and start associating it with my stuff. I know some people think it's cute, some people think its weird, but I like it and to be honest... that's all that matters!

Also, I recently started a dual degree in computer science and digital interactivity which is pretty rad!

I hope to see my school/work/developer/tech community...

Move on from stigmas associated with all genders and expectations.

I shouldn't come home from my first lecture and have the first question from parents be a semi-sarcastic "were there any [other] girls there?". But sadly, I know quite a few people who are interested in this kind of thing and didn't pursue it because of that attitude.

I hope in the near future, in tech related fields and in the broader community, that a single letter on a piece of paper 18 years ago won't lead to people dictating who I am, what I enjoy, and how I should behave. Everyone should do the things that make them happy and/or empower them (within reason of course, please don't go rob a bank), and they should have the right to do that without being made to feel outcast or invalid by those around them.

✨🚀✨

Thenables: Await objects and cancel or defer your promises!

Spacie — Sun, 20 Jan 2019 11:30:40 +0000

You're likely already using await with promises to receive values without creating a callback:

async function example(){
    const data = await loadSomething()
    // Use data for something...
}

But did you know you can use await with objects other than promises?

The await syntax can be used to wait for the completion of any thenable (an object containing a then function that takes a callback)! For example:

function wait(time){
    return {then: done => setTimeout(done, time)}
}

async function example(){
    console.log('Hello...') // Logs immediately 
    await wait(1000)
    console.log('World!') // Logs after one second
}

This also means that instances of any class with a then method can be used with await:

class Wait {
    constructor(time){
        this.time = time
    }

    then(callback){
        setTimeout(callback, this.time)
    }
}

async function example(){
    const delay = new Wait(1000)

    console.log("Hello...")
    await delay
    console.log("World!")
}

Using thenables it's super easy to implement deferred and cancelable promises. This allows you to skip to the end of a promise or stop it from ever resolving at all!


class Deferred {
    constructor(){
        this.canceled = false
        this.promise = new Promise((resolve, reject) => {
            this.resolver = (value) => {
                if(!this.canceled) resolve(value)
            }
            this.rejecter = (value) => {
                if(!this.canceled) reject(value)
            }
        })
    }

    resolve(value){
        this.resolver(value)
    }

    reject(value){
        this.rejecter(value)
    }

    then(onFulfilled, onRejected){
        this.promise.then(onFulfilled, onRejected)
    }

    cancel(){
        this.canceled = true
    }

}

Do you use thenables over promises anywhere in your codebase? Share your use cases in the comments!

Also, thanks for reading my first post!