DEV Community: Kevin K. Johnson

No Longer Tim Baker, Jane Fisher, Joe Taylor. What Would Be Your Chosen Occupational Last Name?

Kevin K. Johnson — Wed, 04 Sep 2019 16:11:01 +0000

I've yet to come up with a real good one, but maybe you will?
¯\(ツ)/¯

Customize Your Reddit Feed 🏋️‍♀️

Kevin K. Johnson — Thu, 01 Aug 2019 21:49:12 +0000

I can't even remember where I learned this, but there's a neat little trick you can do with subreddits. Simply add a plus sign (+) between the names of subreddits, after the /r/, and you'll make a feed of everything you've concatenated.

In a thread here, Ben Halpern mentioned he met a co-founder of DEV through reddit, so I figured I should be more active there too.

I've made a custom feed for myself and this community: front-end reddit newsfeed

And if you want to go to each subreddit individually:

What's Your Method of Finding a New Job? 🤔

Kevin K. Johnson — Mon, 29 Jul 2019 00:12:57 +0000

While it makes all the sense in the world to browse job boards, I've been more likely to do a search for local web design and development companies first.

Sites like Clutch rank those companies—though its filters are impossible to use on mobile. That aggregation has been a good help.

Who's doing it better? …or at least differently?

What Makes a Good DEV Post?

Kevin K. Johnson — Wed, 24 Jul 2019 17:12:32 +0000

What techniques have really helped your posts spark a conversation or get a bunch of reactions? Which things do you hate to see?

I, for one, strongly prefer when all the article content is on DEV, rather than me needing to click-off to someone's personal website.

Front-End Analogies: Closure's Coffee — Recursion

Kevin K. Johnson — Wed, 24 Jul 2019 15:34:33 +0000

Cleaning Shop

Recursion

Jack is a clean freak. Leave him unattended, and the whole place will be spotless. Great and all, but, uh, we're actually trying to sell coffee here.

Over time, we've gotten a good estimate of how long it'll take him to do his tasks. Give him a hard time limit and neither one of us will be driven up a wall. Or murdered.


"use strict";

const timeLimit = 45;
const cleaningTasks = [15, 10, 8, 5, 3, 25, 7];
const tasksCompleted = [];

// Jack's thinking: "I've only got 45 minutes?!"
// "I'll just go down the list, one by one."

const jackCleaning = (_tasks) => {
    return (_timeLimit) => {
        return (_tasksCompleted) => {
            console.log('_tasks', _tasks);

            let taskTimeChecker = _tasks.find(task => task <= _timeLimit);
            // "Find the first one, get it done."

            console.log('taskTimeChecker', taskTimeChecker);

            if (taskTimeChecker != undefined) {
                _timeLimit -= taskTimeChecker;
                console.log('_timeLimit', _timeLimit);
                // "Runnin' out of time."

                _tasksCompleted.push(taskTimeChecker);
                console.log('_tasksCompleted', _tasksCompleted);
                // "Another one bites the dust."

                _tasks.splice(_tasks.indexOf(taskTimeChecker), 1);
                // "Check that one off the list."
            }
            else {
                console.log(_tasksCompleted);
                return `_tasksCompleted: ${_tasksCompleted}`;
            }

            return jackCleaning(_tasks)(_timeLimit)(_tasksCompleted);
            // "All play and no work makes Jack a dull boy."
            // And he just keeps going down the list like a madman.
        }
    }
}

console.log( jackCleaning(cleaningTasks)(timeLimit)(tasksCompleted) );

// "_tasks" [15, 10, 8, 5, 3, 25, 7]
// "taskTimeChecker" 15
// "_timeLimit" 30
// "_tasksCompleted" [15]

// He's done one 15-minute task, and has 30 minutes left…

// "_tasks" [10, 8, 5, 3, 25, 7]
// "taskTimeChecker" 10
// "_timeLimit" 20
// "_tasksCompleted" [15, 10]


// "_tasks" [8, 5, 3, 25, 7]
// "taskTimeChecker" 8
// "_timeLimit" 12
// "_tasksCompleted" [15, 10, 8]


// "_tasks" [5, 3, 25, 7]
// "taskTimeChecker" 5
// "_timeLimit" 7
// "_tasksCompleted" [15, 10, 8, 5]


// "_tasks" [3, 25, 7]
// "taskTimeChecker" 3
// "_timeLimit" 4
// "_tasksCompleted" [15, 10, 8, 5, 3]


// "_tasks" [25, 7]
// "taskTimeChecker" undefined
// [15, 10, 8, 5, 3]
// "_tasksCompleted: 15,10,8,5,3"

// With only 4 minutes left, neither one of those tasks is short enough.
// Mr. Scrubbing Bubbles has to go back to slingin' beans.

Bonus Lesson!

Variable Names

Didn't all those examples seem real easy to follow with all 'em good names? If they weren't, I had no part in this and you never saw me.

On the way out, we pass a sign that says:

A. always
B. be
C. coding

Front-End Analogies: Closure's Coffee — Partial Application

Kevin K. Johnson — Wed, 24 Jul 2019 15:34:11 +0000

Ordering Coffee

Partial Application

Joe has a coffee addiction. It's not in the DSM-5, so who cares? Time to make a profit.

What do we know about this bozo? His name's Joe. He always gets two cups. One is going to be coffee with milk, but we'll say it in French—café au lait—to charge more. The second one, he likes to mix that up. Could be anything.


"use strict";

customerName = (_personName) => {
    return `${_personName} wants `;
}

buyTwoDrinks = (_firstCoffeeName) => {
    const secondDrink = (_secondCoffeeName) => {
        return `${_firstCoffeeName} and ${_secondCoffeeName}.`;
    }

    return secondDrink;
}

let Joe = customerName('Joe');
// What kinda clown's name is this?
// Prolly doesn't know his order yet cuz he spent too much time honkin' his nose.

let JoesUsual = buyTwoDrinks('Cafe au Lait');
// Usual baristas [functions] are like,
// "I want both these drink orders [parameters] right damn now."
// This bro is chill about it. We've got the first one on-deck,
// but we know we have to wait a little bit.

// When Joe comes in over the course of the week to order,
// it might look a little like this:

console.log( Joe + JoesUsual('Espresso') );
// Joe wants Cafe au Lait and Espresso.

console.log( Joe + JoesUsual('Nitro Cold Brew') );
// Joe wants Cafe au Lait and Nitro Cold Brew.

// This is a lot easier and less error-prone than writing:

console.log( customerName('Joe') + buyTwoDrinks('Cafe au lait')('Chai latte') );
// Joe wants Cafe au Lait and Chai latte.

console.log( customerName('Joe') + buyTwoDrinks('Cafe au lait')('Flat white') );
// Joe wants Cafe au Lait and Flat white.

// Gotta save time. You ever seen Joe without his caffeine for too long?
// It's less clown college and more Dark Knight Returns.

Front-End Analogies: Closure's Coffee — Currying

Kevin K. Johnson — Wed, 24 Jul 2019 15:33:45 +0000

Roasting Coffee

Currying

Kona is struggling with a coffee roaster. It's so old all the instructions wore off. Every time she puts in a pound of beans: poof. Burnt to a crisp.

Finally, management buys a roaster that isn't so terrible. Probably said it was their idea, too. One pound at a time? Sure thing, boss. It'll even tell you how much is left the the load, if you're real nice.


"use strict";

// I didn't tell you this, but:
// Currying is the same as unary, accepts one parameter…

const coffeeRoaster_Multiary = (_scoop1, _scoop2, _scoop3, _scoop4, _scoop5, _scoop6, _scoop7) => {
    console.log ("_scoop1, _scoop2, _scoop3, _scoop4, _scoop5, _scoop6, _scoop7");
    return (`Roastin' time.`);
}

let coffeeRoaster_Unary = _scoop1 => {
    console.log(`6 more pounds.`);

    return coffeeRoaster_Unary = _scoop2 => {
        console.log(`5 more pounds.`);

        return coffeeRoaster_Unary = _scoop3 => {
            console.log(`4 more pounds.`);

            return coffeeRoaster_Unary = _scoop4 => {
                console.log(`3 more pounds.`);

                return coffeeRoaster_Unary = _scoop5 => {
                    console.log(`2 more pounds.`);

                    return coffeeRoaster_Unary = _scoop6 => {
                        console.log(`1 more pound.`);

                        return coffeeRoaster_Unary = _scoop7 => {
                            console.log(`All ${_scoop7} pounds loaded.`);
                            return (`Roastin' time.`);
                        }
                    }
                }
            }
        }
    }
}

coffeeRoaster_Multiary("1");
// "1, undefined, undefined, undefined, undefined, undefined, undefined"

// That one was incinerated, like Starbucks…

coffeeRoaster_Multiary("1", "2", "3", "4", "5", "6", "7");
// "1, 2, 3, 4, 5, 6, 7"

// Finally works if you're able to put all 7 pounds in at once.
// That's one big scoop.

coffeeRoaster_Unary("1")("2");
// "6 more pounds"
// "5 more pounds"

coffeeRoaster_Unary("3")("4");
// "4 more pounds"
// "3 more pounds"

coffeeRoaster_Unary("5")("6")("7");
// "2 more pounds."
// "1 more pound."
// "All 7 pounds loaded."

// With this newfangled machine, you can do it at your leisure.
// We were able to put a man on the moon,
// but this is so hard?

Front-End Analogies: Closure's Coffee — Closures, Lexical Scope

Kevin K. Johnson — Tue, 23 Jul 2019 02:23:57 +0000

Closure's Coffee

Where Coffee's for Closures

Today we're visiting an internationally franchised cafe chain specializing in serving cups of the jitters. We'll hop-around to several areas and roles to get a good sense of the place.

The vibe is definitely PhD students working on their MacBooks while uniformed PhD students with 20 fewer dollars boil beans into a energetic goop. Just like all the other cafes. Try not to step on your own shoes, will ya?

A Visit from Corporate

Lexical Scope, Inheritance, Privacy

Some lifeless husks from headquarters are setting up two new stores. Gotta give 'em the rules and all. No tattoos out in the open, nobody phones, no nothin'. Then the suits are just going to copy their work for the next store.

That second store has people that write-up press releases. Corporate wants to remind them the business name is always in caps. GREAT, now we're yelling.

Oh yeah, those kids got real attached to their pocket computers. Just gotta be a little sneaky about it.


"use strict";

const corp_storeOneRules = {
    tattoosVisible: false,
    phoneAtRegister: false,
    pettyAnnoyance: true
};

const corp_storeTwoRules = {
    ...corp_storeOneRules,
    // Run it back.
    // Why half-ass two things when you can whole-ass one thing, repeatedly?
    brandNameCaps: _brandName => _brandName.toUpperCase()
};

console.log(corp_storeOneRules);
/*
Object {
    pettyAnnoyance: true,
    phoneAtRegister: false,
    tattoosVisible: false
}
*/

console.log(corp_storeTwoRules);
/*
Object {
    brandNameCaps: _brandName => _brandName.toUpperCase(),
    pettyAnnoyance: true,
    phoneAtRegister: false,
    tattoosVisible: false
}
*/

// Store two has rules nearly identical to store one,
// but with the rule about branding added.

// console.log(corp_storeOneRules.brandNameCaps("closure's coffee"));

// Come in the store talking about formatting press announcements
// and people will be looking at you studid.

console.log(corp_storeTwoRules.brandNameCaps("closure's coffee"));

const employees_storeRules = {
    phoneAtRegister: true,
    phoneAtRegisterWithCorp: false
};
// Looks like the workers aren't going down without a fight.

const corp_giveStoreRules = _rules => {
    const secretRules = "Fuggedaboutit.";
    // You couldn't change this if you wanted to.
    // Well, maybe with an obscene amount of money.
    // That can do anything.

    const existingRules = _ourRules => {
        return {
            ..._rules,
            ..._ourRules,
            secret: secretRules
            // If you don't know, that's called the "spread operator".
        }
    }

    return existingRules;
};

console.log( corp_giveStoreRules(corp_storeOneRules)(employees_storeRules) );
/*
Object {
    pettyAnnoyance: true,
    phoneAtRegister: true,
    phoneAtRegisterWithCorp: false,
    secret: "Fuggedaboutit.",
    tattoosVisible: false
}
*/

console.log( corp_giveStoreRules(corp_storeTwoRules)(employees_storeRules) );
/*
Object {
    brandNameCaps: _brandName => _brandName.toUpperCase(),
    pettyAnnoyance: true,
    phoneAtRegister: true,
    phoneAtRegisterWithCorp: false,
    secret: "Fuggedaboutit.",
    tattoosVisible: false
}
*/

// Though we couldn't change or directly access the secret rules,
// we still have to worry about them. Well, they do.

// You know, no one ever wonders where the .toUpperCase() comes from.
// Thing is: it fell off a truck. That's how we inherit around here.

How Loyal Should We Be to Our Employers?

Kevin K. Johnson — Thu, 18 Jul 2019 14:23:55 +0000

Ultimately, our employment is a transaction. We provide skills and knowledge; they compensate us financially—or with ping-pong and LaCroix.

Beyond staying long enough, working hard enough to make sure the job is done: What do we owe? What, if anything, has inspired you to give more of yourself? What has caused you to be defensive and lookout for yourself?