Jon Kuperman

Chatting with an old friend

2025-06-10T00:00:00Z

Mikeal Rogers passed away yesterday. We hadn't kept in touch nearly enough, but he had a profound impact on my life and was always very kind to me. One of my favorite tweets of all time was from him, when I gave a talk as a young kid about how cool Chrome DevTools were and the Chrome DevTools team showed up unexpectedly to watch.

Watching @paul_irish watch a talk at @wafflejs about Chrome Dev Tools. pic.twitter.com/nXNAIUIn8f
— Mikeal Rogers (@mikeal) January 7, 2016

I was reading Jenn Schiffer's Bluesky post about him when I realized I had also recorded a podcast with Mikeal, way back in the day.

a collaborator and friend has moved on this week, and in memoriam i wanted to share my train of thought in grief.

[image or embed]
— jenn schiffer 🕷️🕯️ (@jennschiffer.com) June 10, 2025 at 6:19 PM

The Web Behind

I had started this podcast called The Web Behind in 2015 (I know...) to interview developers I knew (mostly in SF) and ask them about how they got their start. It was really fun for me getting to know people and hearing their diverse stories. I went to go to my old website to listen to the episode with Mikeal but there was a problem.

That's annoying, but then I figured I could use the way back machine to find it!

I found a snapshot of the old site, and found the link for the episode! But there was no audio embed!

That's ok, I opened the Chrome Devtools and found the embed link! It's for a Soundcloud file. But when I clicked on it, it just redirected to the Soundcloud home page. At least I had a lead...

I searched Soundcloud for "web behind" and I found the page! But strangely, there were only 4 episodes on there and Mikeal's wasn't one of them. Even stranger, the right sidebar said "8 tracks" but I could only see 4. I wondered if I could still get into that account.

I went to soundcloud and logged in with my email address. Had to reset it multiple times since I had missed multiple security breaches while I'd been gone. I finally got in only to find that email address did not own the Web Behind account.

I searched a few times to see if there was any way to figure out what email address a channel belonged to but obviously that would be a terrible thing for Soundcloud to do so I was stuck.

A lucky break

I was clicking all around, trying old email addresses, looking at my web hosting to see all the email accounts I've ever created but having no luck. I kept trying things like jon@webbehind.com or admin@webbehind.com. One nice thing is that Soundcloud lets you know after you enter just an email address whether it's associated with an account or not. No luck.

I was playing around with Postman to see if I could scrape any information when I caught a break! It turns out that I had linked my Soundcloud account to iTunes and the iTunes email address is listed in the RSS feed!

I couldn't guess the gmail password but as luck would have it, I did set up my real email address as the backup for the account, so I was able to reset it!

With that, I was able to reset my Soundcloud password and log in! At first I had no luck, I was still only able to see the 4 public episodes. But then I noticed on the Insights page if I zoomed out I could see traffic to Mikeal's episode from years ago. Eventually I figured out what had happened!

It turns out Soundcloud had changed their free plan, and my account was way over the limit of upload minutes. So they must have removed my oldest episdoes so that I was in line with the free plan.

A bargain at any price

All I needed to do was give Soundcloud $10 for whatever Soundcloud Artist is and download the episode!

It's nice to hear your voice

Thanks for the puzzle, Mikeal. It's nice to hear your voice again.

The Web Behind · Mikeal Rogers

C++ Pointers for JavaScript/TypeScript Developers

2025-03-14T00:00:00Z

Introduction

I've been coding in JavaScript for years, but recently started working on a project that required C++. The biggest mental hurdle? Pointers. If you're like me, coming from JavaScript or TypeScript, the concept of pointers can feel alien at first.

In JavaScript, we create objects and arrays without thinking about where they live in memory:

// JavaScript - create and forget
const user = { name: "Alice" };
const users = [user, { name: "Bob" }];

But in C++, you need to be much more explicit about memory:

// C++ - be explicit about memory
User* user = new User("Alice");  // Allocate on heap
User users[2] = { *user, User("Bob") };  // Copy to stack array
delete user;  // Clean up when done

This post is my attempt to explain pointers in a way that makes sense to JavaScript developers. I won't pretend pointers are simple - they're powerful and can be dangerous - but understanding them will make you a better programmer, even if you never write C++ professionally.

Pointers give you direct access to memory, but they require careful handling to avoid bugs that simply don't exist in JavaScript.

Memory Management: The Fundamental Difference

The biggest difference between JavaScript and C++ is how they handle memory. In JavaScript, the runtime does all the heavy lifting:

// JavaScript
function createUsers(count) {
  const users = [];
  for (let i = 0; i < count; i++) {
    users.push({ id: i, name: `User ${i}` });
  }
  return users; // JavaScript handles memory automatically
}

const myUsers = createUsers(1000);
// Later, when myUsers is no longer referenced...
// JavaScript garbage collector cleans up

In C++, you're responsible for memory management. You need to explicitly allocate and free memory:

// C++
User** createUsers(int count) {
  User** users = new User*[count]; // Allocate array on heap
  for (int i = 0; i < count; i++) {
    users[i] = new User(i, "User " + std::to_string(i)); // Allocate each user on heap
  }
  return users;
}

// Later...
User** myUsers = createUsers(1000);

// YOU must clean up
for (int i = 0; i < 1000; i++) {
  delete myUsers[i]; // Free each user
}
delete[] myUsers; // Free the array

Forget that cleanup code, and you've got a memory leak. In JavaScript, you'd never have to worry about this.

Stack vs. Heap: Where Variables Live

In C++, you need to understand where your data lives:

Stack: Fast, automatic memory for local variables. Limited in size, automatically cleaned up.
Heap: Larger, manual memory that persists until you explicitly free it.

void example() {
  // Stack allocation - automatic cleanup when function ends
  int stackNumber = 42;
  User stackUser("Alice");
  
  // Heap allocation - manual cleanup required
  int* heapNumber = new int(42);
  User* heapUser = new User("Bob");
  
  // Must clean up heap allocations!
  delete heapNumber;
  delete heapUser;
}

When to use Stack vs. Heap

It's important to understand that it's not the asterisk (*) that determines stack vs. heap allocation - it's how you create the object:

// Stack allocation (no 'new' keyword)
int stackInt = 42;                // On stack
User stackUser("Alice");          // On stack
int stackArray[10];               // On stack
User* pointerToStackUser = &stackUser;  // Pointer is on stack, pointing to stack object

// Heap allocation (using 'new' keyword)
int* heapInt = new int(42);       // On heap
User* heapUser = new User("Bob"); // On heap
int* heapArray = new int[10];     // On heap

What does the asterisk (*) actually mean?

The asterisk (*) in C++ declarations indicates that a variable is a pointer. A pointer is simply a variable that stores a memory address rather than a value directly. The asterisk itself doesn't determine where the memory is allocated (stack vs. heap) - it just declares that the variable will hold an address.

For example:

int x = 5; - Regular variable storing the value 5
int* ptr; - Pointer variable that can store the address of an int
ptr = &x; - Store the address of x in ptr
*ptr = 10; - Follow the address in ptr and get what's inside (which is 42)

The new keyword is what actually allocates memory on the heap, and the pointer is just used to keep track of where that memory is located.

Choose Stack when:

You need small, fixed-size objects
The object's lifetime is limited to the current function/scope
You want automatic cleanup
Performance is critical (stack allocation is much faster)
The object size is known at compile time

Choose Heap when:

You need large objects (stack size is limited, often to just a few MB)
You need objects that persist beyond the current function
You don't know the size at compile time (like dynamic arrays)
You're returning objects from functions that need to live after the function returns
You're sharing objects between different parts of your program

In JavaScript, this decision is made for you - primitive values like numbers are similar to stack variables, while objects and arrays are automatically managed on the heap.

What Are Pointers, Really?

A pointer is just a variable that stores a memory address. That's it. Nothing more magical than that.

Think of your computer's memory like a giant apartment building. Each apartment (memory location) has an address and can store some data. A pointer is just a piece of paper with an apartment number written on it.

int number = 42;        // Create a variable with value 42
int* pointer = &number; // Create a pointer that stores number's address

In this example:

number is an apartment containing the value 42
&number is the address of that apartment (like "Apartment 1234")
pointer is a piece of paper with "Apartment 1234" written on it
*pointer means "go to the address written on the paper and get what's inside" (which is 42)

When you use the asterisk in front of a pointer variable (like *pointer), it's called "dereferencing" - you're accessing the value at the address stored in the pointer. This is different from when you use the asterisk in a declaration (like int* ptr), where it indicates that the variable is a pointer type.

How This Differs From JavaScript References

In JavaScript, we have references, which might seem similar but work differently:

let obj = { count: 42 };
let reference = obj;

// Both point to the same object
reference.count = 100;
console.log(obj.count); // 100

// But reassigning the reference just changes what it references
reference = { count: 200 };
console.log(obj.count); // Still 100

The key differences:

JavaScript references are implicit - you don't use special syntax to create or dereference them
JavaScript references are higher-level - they point to objects, not raw memory addresses
JavaScript references are safer - you can't manipulate memory directly or cause memory corruption

Pointer Syntax and Operations: The Basics

Let's break down the essential pointer operations you'll need to know:

1. Declaring Pointers

There are two common styles for declaring pointers:

int* ptr;  // Style 1: asterisk with the type
int *ptr;  // Style 2: asterisk with the variable name

Both are functionally identical. I prefer the first style because it makes it clearer that the type is "pointer to int," but you'll see both in C++ code.

2. Getting an Address with &

The address-of operator & gives you the memory address of a variable:

int number = 42;
int* ptr = &number;  // ptr now holds the address of number

3. Dereferencing with *

The dereference operator * lets you access the value at an address:

int number = 42;
int* ptr = &number;
*ptr = 100;  // Change the value at the address
std::cout << number << std::endl;  // Prints 100

4. Null Pointers

A pointer that doesn't point to anything should be set to nullptr (in modern C++):

int* ptr = nullptr;  // Explicitly doesn't point to anything

// Always check before dereferencing
if (ptr != nullptr) {
    *ptr = 100;  // Safe
} else {
    // Handle null case
}

// Shorthand if check (nullptr converts to false)
if (ptr) {
    *ptr = 100;  // Safe
}

In older C++ code, you might see NULL or even 0 used instead of nullptr.

5. Pointer Arithmetic

C++ also allows you to perform arithmetic on pointers:

int numbers[] = {10, 20, 30, 40, 50};
int* ptr = numbers;  // Points to first element

std::cout << *ptr << std::endl;      // 10
std::cout << *(ptr + 1) << std::endl; // 20
std::cout << *(ptr + 2) << std::endl; // 30

// Shorthand using array notation
std::cout << ptr[0] << std::endl;     // 10
std::cout << ptr[1] << std::endl;     // 20

This is powerful but dangerous - C++ won't stop you from accessing memory beyond the array bounds. For example:

int numbers[5] = {10, 20, 30, 40, 50};
int* ptr = numbers;

// This is dangerous - accessing beyond the array
std::cout << *(ptr + 10) << std::endl;  // Reading unknown memory!
*(ptr + 10) = 500;                      // Writing to unknown memory!

C++ will happily let you read or write to memory locations that don't belong to your array. This can cause:

Program crashes (if you're lucky)
Corrupted data in other variables
Security vulnerabilities like buffer overflows
Unpredictable behavior that's hard to debug

Memory Safety and Modern Languages

This issue is exactly why memory-safe languages like Rust have gained popularity. Rust provides similar performance to C++ but prevents these memory safety issues through its ownership system and compile-time checks.

In Rust, the equivalent code would fail to compile or would perform bounds checking at runtime:

let numbers = [10, 20, 30, 40, 50];
println!("{}", numbers[10]);  // Runtime panic: index out of bounds

JavaScript, like Rust, is memory-safe by design:

const numbers = [10, 20, 30, 40, 50];
console.log(numbers[10]);  // undefined (not a crash)

According to Microsoft, around 70% of their security vulnerabilities are related to memory safety issues in languages like C and C++. This is why there's a growing movement toward memory-safe languages for systems programming, with Rust leading the charge.

C++ has evolved to provide safer alternatives like std::vector with bounds checking, but the raw pointer operations remain available for performance-critical code:

// Safer alternative with bounds checking
std::vector<int> numbers = {10, 20, 30, 40, 50};
// This will throw an exception instead of accessing invalid memory
try {
    std::cout << numbers.at(10) << std::endl;
} catch (const std::out_of_range& e) {
    std::cout << "Error: " << e.what() << std::endl;
}

References vs Pointers: The C++ Alternative

C++ offers another mechanism called "references" that might feel more familiar to JavaScript developers:

// Pointer approach
void updateUser(User* user) {
    user->name = "Bob";
}

// Reference approach
void updateUser(User& user) {
    user.name = "Bob";
}

References provide a syntax that feels more like JavaScript's reference behavior, but with important differences:

References can't be null
References can't be reassigned
References must be initialized when declared

When to use which? Here's a quick decision guide:

Need to represent "no value"? → Pointer (nullptr)
Need to reassign to point to different objects? → Pointer
Just need to modify an existing object? → Reference

Void Pointers and Type Casting

Sometimes you need a pointer that can point to any type - enter the void*:

void* genericPointer;
int number = 42;
genericPointer = &number;  // Points to an int

// To use it, you must cast it back
int* numberPointer = static_cast<int*>(genericPointer);

This is somewhat analogous to TypeScript's type assertions, but with a crucial difference: in C++, you're responsible for ensuring the cast is valid.

C++ Type Casting vs. TypeScript Type Assertions

While both C++ and TypeScript allow you to override the type system, they handle invalid casts very differently:

In TypeScript:

// TypeScript type assertion
const num = 42;
const str = num as unknown as string;

console.log(str.toUpperCase());  // RUNTIME ERROR: str.toUpperCase is not a function

TypeScript's type assertions are primarily a compile-time construct. The TypeScript compiler will accept your assertion and stop checking types, but at runtime, JavaScript will still enforce type safety and throw errors for invalid operations.

In C++:

// C++ type casting
int num = 42;
char* str = static_cast<char*>(&num);

std::cout << str[0] << str[1] << str[2];  // UNDEFINED BEHAVIOR: Reading memory as if it were a string

C++ type casts actually reinterpret the raw memory. There's no runtime type checking - the program will attempt to use the memory as if it were the type you claimed, potentially causing:

Memory corruption - Writing to memory as if it were a different type
Segmentation faults - Accessing memory in invalid ways
Silent data corruption - Getting wrong values without any error
Undefined behavior - Anything can happen, including seeming to work correctly sometimes

In other words, TypeScript's type assertions are a way to tell the compiler "trust me, I know what I'm doing," but JavaScript will still protect you at runtime. C++ type casts are more like saying "I'm taking full responsibility for what happens next" - the language won't protect you from mistakes.

Pointers and Arrays: Two Sides of the Same Coin

In C++, arrays and pointers are intimately connected in ways that might surprise JavaScript developers:

int numbers[5] = {1, 2, 3, 4, 5};
int* ptr = numbers;  // Array name decays to pointer

// These are equivalent:
cout << numbers[2] << endl;  // Array syntax
cout << *(ptr + 2) << endl;  // Pointer arithmetic

This relationship has no real equivalent in JavaScript, though TypedArrays and ArrayBuffers come closest.

Memory Allocation: Manual Management

In JavaScript, you create objects and the runtime handles memory. In C++, you must explicitly request and release memory:

// Allocating memory
int* numbers = new int[100];  // Request space for 100 integers

// Using the memory
numbers[0] = 42;

// MUST release the memory when done
delete[] numbers;  // Return the memory to the system

If you forget the delete, you'll create memory leaks - a problem JavaScript developers rarely encounter.

Smart Pointers: Modern C++ to the Rescue

Modern C++ provides smart pointers that help manage memory automatically, bringing some of JavaScript's convenience to C++:

// Old way with manual management
User* user = new User("Alice");
// ... code that might throw exceptions ...
delete user;  // Might never get called if an exception occurs!

// Modern way with smart pointers
auto user = std::make_unique<User>("Alice");
// No need to delete - memory is automatically freed when user goes out of scope

Types of smart pointers:

std::unique_ptr - Exclusive ownership (only one pointer can own the object)
std::shared_ptr - Shared ownership with reference counting (similar to JS objects)
std::weak_ptr - Non-owning reference to a shared_ptr object

When to Use Each Type of Smart Pointer

Use `std::unique_ptr` when:

You need a single, clear owner for a resource
You want to transfer ownership (using std::move)
You want the best performance (it has almost zero overhead compared to raw pointers)
The object shouldn't be shared between different parts of your code

// Example: A function that creates and returns a resource
std::unique_ptr<Report> generateReport(const Data& data) {
    auto report = std::make_unique<Report>(data);
    report->analyze();
    return report;  // Ownership transfers to the caller
}

// Usage
void processData(const Data& data) {
    auto report = generateReport(data);
    // report is automatically deleted when processData ends
}

This is similar to how JavaScript variables work in a limited scope - they're automatically cleaned up when they go out of scope.

Use `std::shared_ptr` when:

Multiple parts of your code need ownership of the same object
You don't know which owner will be the last to use it
You need objects to live as long as anyone is using them
You're comfortable with a small performance overhead for reference counting

// Example: Multiple components sharing access to a configuration
std::shared_ptr<Config> loadConfig() {
    return std::make_shared<Config>("config.json");
}

void setupComponents() {
    auto config = loadConfig();
    
    auto ui = std::make_shared<UI>(config);      // UI needs the config
    auto network = std::make_shared<Network>(config);  // Network also needs it
    auto storage = std::make_shared<Storage>(config);  // Storage too
    
    // Config will be deleted automatically when all three components
    // (UI, Network, Storage) are destroyed
}

This is most similar to JavaScript's normal behavior, where objects stay alive as long as any reference to them exists.

Use `std::weak_ptr` when:

You need to temporarily access a shared object without extending its lifetime
You want to break reference cycles (where A references B and B references A)
You need to check if an object still exists before using it

// Example: Caching system that doesn't prevent objects from being cleaned up
class Cache {
    std::unordered_map<std::string, std::weak_ptr<Resource>> resources;
public:
    std::shared_ptr<Resource> getResource(const std::string& key) {
        auto& weakRef = resources[key];
        
        // Try to get a shared_ptr from the weak_ptr
        if (auto resource = weakRef.lock()) {
            return resource;  // Resource still exists, return it
        } else {
            // Resource was deleted, create a new one
            auto newResource = std::make_shared<Resource>(key);
            weakRef = newResource;  // Store weak reference
            return newResource;
        }
    }
};

JavaScript's WeakRef vs C++'s weak_ptr

JavaScript has an equivalent to weak_ptr called WeakRef. Both serve a similar purpose: they hold a reference to an object without preventing garbage collection.

// JavaScript WeakRef example
let cache = new Map();

function getResource(key) {
  let weakRef = cache.get(key);
  
  // Check if the reference still exists and is valid
  let resource = weakRef?.deref();
  if (resource) {
    return resource; // Resource still exists
  } else {
    // Create new resource since the old one was garbage collected
    let newResource = createExpensiveResource(key);
    cache.set(key, new WeakRef(newResource));
    return newResource;
  }
}

Smart Pointer Best Practices

Use std::make_unique and std::make_shared instead of new
Prefer unique_ptr by default for its performance
Use shared_ptr only when you need shared ownership
Use weak_ptr to break reference cycles in shared_ptr
Never use delete with smart pointers - they handle cleanup automatically

Function Pointers and Callbacks

JavaScript developers are familiar with passing functions as arguments. C++ has several ways to achieve this:

// Traditional function pointer
void processData(int* data, int size, int (*processor)(int)) {
    for (int i = 0; i < size; i++) {
        data[i] = processor(data[i]);
    }
}

// Modern approach with std::function
void processData(int* data, int size, std::function<int(int)> processor) {
    // Same implementation
}

// Usage with lambda (similar to JS arrow functions)
processData(numbers, 100, [](int x) { return x * 2; });

Common Pitfalls: Where JavaScript Developers Stumble

When coming from JavaScript, these are the pointer-related mistakes you're most likely to make:

Using uninitialized pointers

int* ptr;  // Contains random address!
*ptr = 42;  // CRASH: Writing to random memory

Forgetting to delete allocated memory

void processData() {
    int* data = new int[1000];
    // Process data...
    // Oops, forgot to delete[] data
}  // Memory leak!

Using a pointer after freeing it

int* ptr = new int(42);
delete ptr;  // Free the memory
cout << *ptr;  // DANGER: Using freed memory

Practical Examples: From JavaScript to C++

Let's see how common JavaScript patterns translate to C++ with pointers:

Linked List Implementation

// JavaScript
class Node {
  constructor(value) {
    this.value = value;
    this.next = null;
  }
}

// C++
class Node {
public:
    int value;
    Node* next;
    
    Node(int val) : value(val), next(nullptr) {}
};

Event Handling

// JavaScript
element.addEventListener('click', () => {
  console.log('Clicked!');
});

// C++
button->setOnClickListener([](Button* sender) {
    std::cout << "Clicked!" << std::endl;
});

Conclusion

Understanding pointers in C++ not only helped me work with the language but also deepened my understanding of how memory works in all programming languages. Even in JavaScript, concepts like ArrayBuffer and SharedArrayBuffer expose some of these lower-level memory concerns.

My first year living in London

2023-09-18T00:00:00Z

I just realized it's been over a year since Kelly and I moved to London! It's been such an incredible year I figured I should write it all down before I forget.

The move

We were nervous about flying our 4-month-old puppy across the country, so we decided to fly to Michigan first to visit family and reduce the total flight time.

We packed up our Florida house, put most of our things in storage and grabbed a flight to Detroit!

We went to Michigan, hung out with family, played some chess, Freya met some other dogs, and then we flew from Detroit to Paris. Strangely, the UK doesn't allow you to fly with dogs in the cabin when entering, so we flew to Paris and then paid a service to drive us from Paris to London (which means taking a car on a train and the train under the English Channel.)

Arriving in London

We arrived, Kelly's job set us up with a temporary apartment, and we missed the worst heat wave. I was jobless in a new country and having a blast. We ate pub food, visited friends and explored the city together!

We had such an awesome first few months. Eating incredible food, wandering through all the great parks London has to offer and making a ton of friends. A few weeks in, our friends Katie and Liz came to visit! It was a great chance to do a bunch of touristy stuff.

We did the British Museum, Globe Theatre, Agatha Cristie plays, and Jack the Ripper tours and ate incredible Indian food.

We also spent an entire day in Canterbury, and it was awesome.

Eventually, sadly, Liz had to return to the US, but Kelly, Katie and I took the train to Edinburgh for the Fringe Festival.

Edinburgh is incredible. We saw shows, hiked, ate fantastic food, and drank a bunch of Scotch. It was splendid.

We even took the train out to Loch Lomond and hiked and took a boat tour of the Loch. It was freezing but also beautiful.

Katie went home 😢, we returned to London and did more fun things. Including a 14-mile hike!

Settling in

We enjoyed the end of summer. Flower markets, Sunday roasts at pubs with friends, and bus tours around the city. Late nights out drinking with friends. One weird night, I took a bunch of pictures with a red notebook (a story for another time).

We found a permanent flat, moved in and finally started feeling settled. The first few months, while fun, I felt like I "missed home" and wanted to return to the States. I think having an apartment that was ours and a job (more on that later) really helped.

We did more hikes, I started preparing to interview for a job, and we began really settling into our life in London.

In October, we went to Cardiff, Wales. More hiking, more great food! They have a charming downtown area with no cars, and it was great to walk around. Our friend Josh played host and showed us all the cool spots in the city!

My dad visits

In early November, my dad came to visit. We did a ton of great stuff. We went to metal bars, visited Edinburgh again, ate our way through the fancy markets of London, and saw a concert together! Scotland was a bit chilly at the end of fall, but we made the best of it!

The bad times

A literal supervillain took over Kelly's company (which was tied to our visas). It was a horrible time, and he remains a despicable person. On the good side, I landed an incredible job at Bloomberg that came with a visa, and Kelly was able to walk away from the madness!

Back to fun!

I went to Dayton, Ohio, at the end of November. Got to see my family and spend some great quality time with them.

We had a great winter. We visited the RAF Museum and Bletchley Park. We watched the World Cup with our friends and played in the snow.

In January, Kelly's mom visited. We ate more bangin food, went to some fancy Michelin star restaurants, saw a ballet, had high tea, and went to Winter Wonderland in Hyde Park.

Caption: Bangin food

New Beginnings

In January, I started a great new job. Doing all sorts of cool infrastructure and performance things and building devtools. It's pretty much a dream come true.

We went to a bunch of art exhibits and generally tried to get as much sunlight as we could during the 3 hours per day it's out in London!

My friend Chris visited in February. He stayed at a baller hotel, and we only had a few days together, but we made the most of it!

At the end of the month, Kelly and I flew back to Florida for her dad's wedding. It was great to see family and get a tiny bit of sun again!

Kelly and our friend Jani had a shared birthday in March! We rented out part of a pub, and all of our friends came. It was an amazing night.

FWIW, Freya also had a birthday 🤣

At the end of March, we took a weekend in Bath. Saw the Roman baths, toured a bunch of parks, and had more amazing food. It was great!

We also went and saw the Pixies at the end of March! They put on such a great show.

Portugal

In April, Kelly and I went to Lisbon, Portugal! I've always wanted to go. It was warm and gorgeous, and the food was delicious, and there was music and culture everywhere. We walked all day and all night and had so much fun.

More friends visited at the end of April, including Pancakes (a new friend for Freya!)

London Spring is incredible. More hikes (white cliffs of Dover), more food, more friends and adventures!

My family visits

In May, my mom and sister came to visit! We did so much stuff. Fancy meals, back to Bath! We saw Stonehenge, ate the fanciest dinner of my life and took some memorable tours.

In June, I got to visit NYC for work. I flew Business Class for the first time ever (life-changing) and got to see some great friends while in town! I met a bunch of my New York teammates and had a great time.

Helsinki

Later in June, Kelly and I got to visit Helsinki for a conference. The conference was amazing, a bunch of our friends spoke. The food was great. We had such a lovely time. At the end of the week, Kelly flew to Dublin for a work retreat, and I went up north in Finland with some friends to a lakehouse we rented (what even is our lives).

TC39 in Bergen

In July, I was given the opportunity to join TC39. It's been a career-long dream of mine, and it was just as cool as I thought it would be! I got to attend their plenary in Bergen, Norway.

Back in London

We did a bunch more cool stuff, but I'm getting tired as I type 😂

Kelly and I had a 5-star meal on a fancy bus as it toured London!

Isle of Skye

In August, a bunch of friends came to visit! We had a few lovely days in London and then went up to the Isle of Skye in Scotland. It was rainy, freezing and stunningly beautiful.

Kelly's sister visits

Kelly's sister, Amber, came at the end of August. We saw a fantastic concert (Yeah Yeah Yeah's and The Strokes), had high tea and explored so much of London!

TPAC in Seville

I also got to go to Spain! Although the trip was technically past the 1-year mark. I got to attend TPAC with two coworkers. Seville was beautiful, and I finally got to practice my Spanish!

Conclusion

What an absolutely incredible year. I cannot wait until the next one!

JavaScript format number

2022-01-04T00:00:00Z

Using JavaScript to format numbers is a very common task. The cool thing is, there are a lot of new built-in methods that make JavaScript format number a lot easier.

Let's take a look at three common strategies.

Format numbers with Regular expressions

The first thing we can try is using Regular Expressions. We can take any number, cast it to a string and then use the replace() method to add add a comma or decmial after every group of 3 numbers.

let number = 1000000000000
String(number).replace(/(.)(?=(\d{3})+$)/g, "$1,")

This returns '1,000,000,000,000'. And if you want decimals instead, change the last symbol to a period like so:

let number = 1000000000000
let result = String(number).replace(/(.)(?=(\d{3})+$)/g, "$1.")

This returns '1.000.000.000.000'.

JavaScript format number with toLocaleString

A better approach would be to use the built-in toLocaleString which returns language sensitive representations of numbers. We can simply:

let number = 1000000000000
let result = number.toLocaleString()

This will print '1.000.000.000.000'.

What's cool about this approach is, if you are using JavaScript to format money, you can pass in the user's country code and it will adapt. For example:

let number = 1000000000000
let result = number.toLocaleString("ja-JP", {
  style: "currency",
  currency: "JPY",
})

This will print '￥1,000,000,000,000'.

Format JavaScript numbers with NumberFormat

While toLocaleString is super clean and easy, it will slow down significantly when passing it large numbers. From MDN:

When formatting large numbers of numbers, it is better to create a Intl.NumberFormat object and use the function provided by its format property.

So, if we have a large number we need to format, we can use NumberFormat instead.

let number = 1000000000000
let result = new Intl.NumberFormat().format(number)

This will return '1,000,000,000,000'. The API is a little bit harder to use but you can still pass in all the country codes and formatting options that we used with toLocaleString. For example:

let number = 1000000000000
let result = new Intl.NumberFormat("ja-JP", {
  style: "currency",
  currency: "JPY",
}).format(number)

Which will return '￥1,000,000,000,000'.

Conclusion

Formatting JavaScript numbers used to be really hard. You had to write your own Regular Expression and cast your number to a string to use it. Now we have 2 great browser APIs for this task and they have a ton of flexibility.

Musings on Developer Relations

2021-12-09T00:00:00Z

I've been doing Developer Relations for about four months now. It's been a lot of fun! I can already tell I've been learning and growing my career in some new ways. I've also been able to see how DevRel can help a company.

I had a lot of misunderstandings about DevRel, and its role at a company. I want to explore those and speculate on some growth areas I see coming to the field.

DevRel is all selfies and conferences, right?

I have to admit, when Developer Relations started getting popular, I had a lot of FOMO. I kept seeing people on Twitter, jet-setting around the world and drinking fancy drinks in tropical locations. It looked too good to be true!

Here are some things I didn't understand about DevRel but have learned over the last four months:

1. Conference talks are only a tiny part of the job

Conference involvement must vary heavily by company. Regardless, your company DevRel strategy almost certainly involves documentation, blogging, social media engagement, community building, making demos, starter projects, internal advocacy (mentioned later) and more.

I would wager that most DevRel conference talks you see are the final step of a vast engineering/marketing push. That person probably:

Embedded with the team as they built the project
Tested it and gave feedback
Organized community feedback sessions
Wrote official docs for the feature before launch
Wrote a blog post after launch
Made some demos to help bring the docs to life

And only after all of that, packaged it up and submitted it as a talk!

2. It's difficult work that requires your authentic self

I spent my entire career as an engineer. It's challenging work. It's fun, rewarding and high-paying work, but it is difficult!

Developer Relations uses a very different set of muscles. On the one hand, I don't end up with as many "deep work" tasks with tight deadlines. I still code a lot, but since I'm building demos and libraries around services our engineering teams made, it's a very different experience.

On the other hand, as an engineer, I could deep-dive into my particular product or part of the stack. It was pretty easy to become familiar and productive, and I could focus on my little kingdom.

DevRel is very different. The easiest way to describe it is that engineering requires a depth of knowledge, whereas Developer Relations requires breadth.

Engineering requires a depth of knowledge, whereas Developer Relations requires breadth.

3. Content switching between marketing and engineering is hard

Some organizations house Developer Relations under engineering, some under marketing. I feel like it fits better under engineering, but there is a fair amount of marketing involved. As an engineer, I had a tough time context switching between projects or between meetings and coding.

Switching from an engineering hat to a marketing hat is difficult for me. I'll be late for a meeting because I'm stuck and desperately trying to get my code to work. Then I'll hop on the call and fumble with my words as I try to explain why I think an event is worth attending. It feels like I need at least five minutes dedicated to switching my thought process.

4. Internal advocacy is as important as external

To be honest, I didn't even know internal dev advocacy was a thing until we hired our first person for the role! Three months in, I don't know how we lived without him.

Imagine having folks in your company intimately familiar with your APIs, tools, issues and upcoming features. You go to build a new product or feature, and they embed with you, helping you get up to speed on all the internal systems.

Seriously, think about this. Every job I've ever had, I've complained about wanting to use open-source tools instead of these confusing internal ones?

Going back over my career, there isn't a single job I've had where I wouldn't have significantly benefitted from having an internal dev advocate helping me ramp up on our authentication, serverless platform, storage APIs, etc.

My predictions for DevRel in 2022 and beyond

1. Internal advocacy is going to blow up

I think this is going to be the next big thing. Teams of folks who are intimately familiar with your tooling and APIs. Available for office hours or embedding with your team. They know how to get started and who to talk to. They help write internal documentation, surface pain points to infra teams and make feature teams more productive.

Does your company have internal developer advocacy? I'd love to hear about it!

2. People will start moving into leadership roles from DevRel

I also suspect that we'll see more developer relations folks making it into leadership roles. The role gives you a great breadth of experience, and you get to know the engineering org intimately, but you also have a great understanding of what the sales and marketing teams are dealing with.

Typically I've seen folks from engineering or product promoted into leadership. This works great, but they often have to work hard ramping up on whichever org they weren't previously in. DevRel folks often know everyone at the company already, and I think this is super valuable.

What do you all think? Am I way off base with my predictions? Does your company have any developer relations people?

GitHub find which PR deleted a file

2021-12-07T00:00:00Z

Today at work I noticed a file had been deleted in our repository. I wasn't sure who deleted it or why it was deleted. I really wanted to figure out which GitHub PR removed the file so I could get some context!

An example

To test this out, without revealing any of my work code, I created a new file named foo in this repo. Then I made a PR deleting that file and merged it into main.

Step 1: Find the commit that deleted the file

This took a bit of searching, but I was able to find on Stack Overflow a git command that will show you the full history of a file, even if it has been deleted.

git log --full-history  -- [file path]

So, for my foo file, I typed in:

git log --full-history  -- foo

And got back:

commit 63ca48a2cc63196df5428ddb0c09cda3002a8da3 (HEAD -> master, origin/master, origin/HEAD)
Merge: b7f2ad2 c48771f
Author: Jon Kuperman <jon.kuperman@nicetry.com>
Date:   Tue Dec 7 13:38:00 2021 -0500

    Merge pull request #14 from jkup/sample-pr

    Delete foo (you found me)

commit c48771fd5dadf28d456be9202079dd95a0cff47a (origin/sample-pr, sample-pr)
Author: Jon Kuperman <jon.kuperman@nicetry.com>
Date:   Tue Dec 7 13:37:39 2021 -0500

    Delete foo (you found me)

commit b7f2ad23d2d19fb7d589f993a87946141fb9cbae
Author: Jon Kuperman <jon.kuperman@nicetry.com>
Date:   Tue Dec 7 13:37:22 2021 -0500

    add foo

Step 2: Grab the git SHA

Now I can see the entire history of the file. I want to see when it was deleted and that means I want to see the very last commit that touched it. Therefore, I'll copy the SHA at the top of the output, 63ca48a2cc63196df5428ddb0c09cda3002a8da3.

Step 3: A cool GitHub URL

The final step is figuring out what PR contained the offending commit. For that we can use this neat GitHub URL:

github.com/username/project/commit/SHA

For our example we have:

username: jkup
projects: jonkuperman.com
sha: 63ca48a2cc63196df5428ddb0c09cda3002a8da3

So our final URL is:

https://github.com/jkup/jonkuperman.com/commit/63ca48a2cc63196df5428ddb0c09cda3002a8da3

Step 4: Click the PR

The last bit is just clicking through the GitHub UI to go from commit to PR. If you look at the top of the link above, you'll see the PR in parenthesis. In this case it's #14. Click on that and it will take you to the offending PR!

And there it is, the PR that deleted foo from my repo: https://github.com/jkup/jonkuperman.com/pull/14

Chasing accurate analytics: Server-side vs client-side analytics

2021-12-06T00:00:00Z

I've been thinking about server-side analytics vs client-side. The other day I Tweeted:

https://twitter.com/jkup/status/1465780792940978182

I got a lot of different responses. Some folks prefer server-side and some prefer client-side. Most are unhappy with both! Some folks are upset that ad-blockers make it difficult to get good data. Other folks are finding clever ways of getting around ad-blockers. There is a lot to unpack here!

What's the problem?

For those that don't know, typical analytics tools like Google Analytics work by asking website owners to add a JavaScript file to their website. That JavaScript file often fetches more files, adds a tracking pixel and starts batching and sending updates to your analytics dashboard as users browse your site.

The problem is that tools like Google Analytics is that they rely on JavaScript being enabled in the user's browser. And with the rise of ad-blockers, more and more users are disabling JavaScript. In fact, over 26% of internet users now use ad-blockers (although this number is likely higher for people that only use desktop computers).

This means that if you're relying on JavaScript-based analytics to figure out how much traffic your website is getting, you're likely going to get bad information.

Server-side analytics

Server-side analytics software first came out in the mid-2000s and operate by making an HTTP request to the website just like a normal web browser would. This means that it can update your analytics dashboard regardless of whether JavaScript is enabled or not.

Some people suggest that server-side analytics are inherently better than client-side analytics because they're "less invasive" (client-side analytics require JavaScript to run). This is a myth.

Server-side analytics tools gather as much personal information as their client-side counterparts do. The only difference between the two is that because they're not dependent on JavaScript, the amount of information they can gather is greatly reduced (but usually isn't eliminated entirely).

Client-side analytics

Client-side analytics, on the other hand, get you access to a ton of information. Services like Google Analytics can capture exactly what users are doing on your website when they're doing it, and if they do it multiple times.

The only downside to using Google Analytics is that, as we've established, a lot of users have ad-blockers enabled which means you're not getting an accurate count of how many people are actually visiting your website.

Client-side vs Server-side comparison

Let's look at a few different metrics and compare the two options.

Accuracy

As we already covered, client-side analytics can be inaccurate because 100% of users using an ad-blocker or with JavaScript disabled will not be logged. This means, on average, 26% of your visitors will not show up in your analytics dashboard. If you have a website that attracts more technical people (such as this blog!) it could be a lot higher.

On the other hand, server-side analytics suffer from the opposite problem. User's with ad-blockers or JS disabled will show up in the dashboard, but so will a ton of bots and spam content.

This discrepancy can be massive. For example, this month on my personal blog Google Analytics (client-side) shows 1200 unique visitors but my Cloudflare Analytics (server-side) shows 7000 unique visitors. As much as I'd love Cloudflare to be right, I suspect the truth is somewhere in between.

Winner: Client-Side (Really the bots are winning)

Ease of use

It used to be quite difficult to set up your own server-side analytics platform. One of the biggest selling points for Google Analytics was that you just had to copy and paste a small JavaScript snippet into your HTML. These days, website hosts like Netlify and Cloudflare offer analytics alongside their hosting platform. If you are using one of these platforms to host your website, analytics are just a click away.

Winner: tie

Performance

Another point worth mentioning is that client-side analytics require JS to be sent on each request, slowing your website down. In some cases, this slow down can be negligible but it's worth mentioning that server-side analytics get you some tracking without adding any bloat to your website.

Website bundles are getting bigger every year. In fact, the average time it takes to fully render a web page is 1.5 seconds which means server-side analytics are going to be faster for your users even if you don't care about server costs.

If speed is a big issue for you, server-side analytics might be a better option to help improve your bounce rate and conversion.

Winner: Server-side

What is a visitor, anyway?

There are a lot of bots on the web. Like, a lot. This report from Imperva claims that 61.5% of all web traffic comes from bots.

Compared to the previous report from 2012, we see a 21% growth in total bot traffic, which now represents 61.5% of website visitors.

This makes me feel like the client-side analytics numbers are closer to the truth. They might be a bit low due to ad-blockers, but server-side analytics numbers are very high because of bot traffic.

What are these bots doing?

The most common types of web traffic bots are:

search engine crawlers (spiders and worms)
content scrapers
comment spammers
sign-up bots
malware bots

These bots are all looking for different things. Crawlers and scrapers are looking for content to copy or steal, comment spammers are trying to add links to their websites, sign-up bots are trying to create fake accounts, and malware bots are trying to infect your website.

Client-side server-side analytics

Or should it be server-side client-side analytics? Anyway if you're up for it you can host your own Google Analytics instance and pipe your server-side traffic to it. This means you don't bloat your website with extra client-side JavaScript but you still get the nice Google dashboard!

https://twitter.com/cramforce/status/1465800579649662980

Getting tricky

One final option is to be a little tricky. Ad-blockers work by maintaining a list of common ads and tracking endpoints and then blocking all requests to those endpoints. Check out this massive list of blocked endpoints and filenames.

These lists will have all the Google Analytics URLs blocked by default. If you really want to get around this, you can proxy all of your analytics requests through an innocent-looking endpoint. For example, you could use a service like Plausible to establish client-side analytics at a custom endpoint that these lists will not block.

You could make an argument that this isn't super ethical. But I'm not sure it's more/less ethical than using a server-side analytics service that tracks users regardless of whether or not they have an ad-blocker or JavaScript disabled.

https://twitter.com/t3dotgg/status/1465787631367716868

Human Partner: How AI and Assistive Technology is Making Humans More Productive

2021-11-29T00:00:00Z

Humans fear being replaced by technology. Although it has happened with switchboard and elevator operators, bowling alley pin boys, and data entry people, it's more common that technology assists employees instead of replacing them. Let's look at some technology getting significant investments and how I see it helping workers instead of replacing them.

We hear new technology will be the death of us and that we'll soon all be unemployed. This is a misconception. In reality, innovation in AI and assistive technology is making humans more productive than ever before.

A history of job replacing technology

Although I feel strongly that modern technology advancements will assist current workers, I would be remiss if I didn't mention jobs that have already been replaced by technology in the past.

A few jobs that have been entirely replaced by technology include :

Switchboard operators (first half of the 20th century)
Elevator operators (1950s-1970s)
Bowling alley pin boys (1930s–1970s)
Data entry clerks (1990s and on).

There are many more jobs that have been replaced by technology. These are the first ones that came to mind, and they all seem apparent when you think about them.

Before I get too far down the "technology will not replace jobs" road, I wanted to acknowledge that it indeed has happened before, and that's a worthwhile conversation to have!

Example 1 - self-driving cars

Self-driving car technology first debuted in 1925, but it is truly starting to become practical for everyday use. Some people argue that Leonardo da Vinci debuted the first self-driving car in the 1500s, but that's a story for another time.

The technology in self-driving cars has come a long way since we showcased the first models publicly, and it's incredible how much they've improved!

Some of the benefits of self-driving cars are :

Fewer accidents - In 2015, there were over five million car accidents in the United States alone. These crashes resulted in 35,0902 injuries and killed an estimated two-hundred thirty-six thousand people!
Increased productivity - I think most of us would agree that driving isn't exactly our favorite activity.
Traffic efficiency - Self-driving cars can drive more efficiently than humans, resulting in significant time savings for commuters.

When they first debuted, we were promised fully autonomous vehicles being on the streets by the early 2000s. As with most technology estimates, it wasn't entirely accurate.

Flash forward to the end of 2021, and we are still "just a few years away" from fully autonomous vehicles. In the meantime, we've seen the rise of backup cameras, lane assist, intelligent cruise control, remote start, and so many more technological advancements.

I don't care if we ever get fully self-driving cars. I love all the safety advancements we've already seen, and hope driving becomes safe and safer each year.

Example 2 - Copywriting AI

The next thing I'd like to look at is intelligent copywriting tools like Jarvis and CopyAI. These tools sell themselves as giving marketers the ability to create content on their own, which is excellent if you don't have a copywriter or there are last-minute deadlines!

The benefits of intelligent copywriting tools are :

Increased productivity - A human writer can produce about 275 words per hour. With some artificial intelligence writers, that number jumps up to over 1000+ words.
Cost-effective - For some businesses, hiring a copywriter can be too costly to justify. Intelligent copywriting tools are cheap and give you the benefits of having an in-house writer without actually needing one!
Automating repetitive tasks - There is a lot of writing involved in running a business. If these tools can improve even 20% of it, that could save a ton of time!

Again, these tools are billed as being able to replace human content writers entirely. But I feel like that isn't why they are helpful and shouldn't be the end goal.

The best part about using automatic copywriting tools is using them alongside a human writer to help with research, writer's block and turning ideas into content.

Using copywriting AI to speed up research

One of my favorite uses for these tools is saving me the few clicks it takes to search for something on Google. For example, I can type "The first automobile was created in " and then hit the "generate content" button, and it will fill in:

The first automobile was created in 1886 by German inventor Karl Benz.

I can also type "The most popular Content Management Systems in 2021 are " and hit the"generate content" button, and it will fill in:

The most popular Content Management Systems in 2021 are WordPress, Drupal and Squarespace.

I use this all the time while writing blog posts. It allows me to stay in the zone, focused on my text editor and lean on Jarvis or CopyAI to fill in bits of data.

Using copywriting AI to manage writer's block

I get excited about blog posts all the time. I often use these tools to add a few sentences or paragraphs if I get stuck somewhere along the lines. It gives me the boost I need to keep pushing forward! I'll quickly bust out a fun title and an intro paragraph, but somewhere along the line, I get stuck.

Cards on the table I delete about 70% of the generated paragraphs and spend a decent amount of time reworking the content I do keep. Still, anything that helps me get over writer's block and back to writing I consider a win!

Using copywriting AI to generate ideas

Finally, one of my favorite ways I like using these tools is as an idea generator. Suppose you're working on a project with multiple people. In that case, it's nice to have the first few sentences written out for everyone to get caught up and then work together on refining that paragraph or sentence into something useful.

For example, I'll type a blog post idea that I'm not super fond of into Jarvis, and it will spit out eight similar post ideas. Usually, one of them is exciting enough to get me writing!

I also love asking the AI to weigh in on an opinion piece. For example, while working on this post, I typed in, "People are afraid that artificial intelligence will take over jobs and make workers obsolete." and let it run! It came back with:

People are afraid that artificial intelligence will take over jobs and make workers obsolete.

Humans have been afraid of new technology for decades. In 1870, the Luddites destroyed weaving machines that they feared would put them out of work.

In reality, these advances made humans more productive and increased the demand for their labor.

It looks like the robots don't want you to fear them, which is just what they would want you to think if they were up to something!

Technology replaces some jobs, improves others.

In the end, I think people are half right when they fear technology replacing workers at their jobs. There are specific jobs that no longer exist due to technological improvements. Some positions may be replaced soon, like bookkeepers, proofreaders and market researchers. There are also a lot of jobs that will continue to be done by people, but technology will allow them to do those jobs more efficiently.

I wish it didn't matter.

We'll have to square with what to do with a society where we can automate a larger and larger percent of work. Ideally, we'd all find ourselves with way more free time and autonomy, but, somehow, we're busier than ever before!

I think it's important to remember that technology alone isn't enough to fix human issues. This is a tech post, not a political post, so I'll leave it for now, but as we can automate more and more tasks, we should try not to take each win as an opportunity to require more and more output from workers.

If technology is supposed to make our lives easier and it keeps advancing. Why are we still working so much? After reading some articles on Our World in Data, it looks like, while we are still working a lot, we may be heading in the right direction year over year!

Look at this graph on the numbers of hours worked per year.

And this one on the number of days off per year.

Conclusion

The main takeaway of this post is to focus less on the distant possibility of technology replacing humans and start looking forward to the frequent advancements of technology as assistive technology.

A Content Security Policy for Google Analytics

2021-11-27T00:00:00Z

So you want to add Google Analytics to a website that has a Content Security Policy? Well you are in for a treat!

The problem is that having a good CSP locks your site down. That means scripts, CSS, fonts, etc cannot connect to outside sources unless they are specified as ok by your CSP.

In short, you can grab the CSP below if you'd like to just move right along. It should allow everything you need to get Google Analytics working.

One final note is that Google Analytics, be default, enables DoubeClick ad tracking. If you aren't making active use of that you should just disable it. More on that later!

A working CSP:

  Content-Security-Policy: default-src 'self'; script-src 'self' https://www.google-analytics.com https://ssl.google-analytics.com https://www.googletagmanager.com 'unsafe-inline'; img-src 'self' https://www.google-analytics.com; connect-src https://www.google-analytics.com;

A frustrating evening

The main problems here are:

Google Analytics has scripts that call other scripts, add tracking pixels (images) and make connections.
Every time you add a new CSP category (default-src, script-src, etc) it will break all your current requests unless you remember to add self.
It's kind of annoying to test CSPs without building and deploying your site each time.
You can't have whitespace within a CSP line so they get really, REALLY long.

Breaking down the CSP

Even though you'll have to copy and paste the snippet above to get it to work, let's add some whitespace just so we can read through it together.

Content-Security-Policy:
    default-src 'self';
    img-src 'self' https://www.google-analytics.com;
    connect-src https://www.google-analytics.com;
    script-src 'self' https://www.google-analytics.com https://ssl.google-analytics.com https://www.googletagmanager.com 'unsafe-inline';

The default-src policy is a fallback. It says that if you don't specify a policy, in this case we don't have one for font-src, it will inherit the behavior of the default-src.
Images are allowed to come from the self host or Google Analytics.
Connections can come from Google Analytics.
Scripts can come from the self host, Google Analytics, the ssl Google Analytics domain and the Google Tag Manager domain.

Removing DoubleClick

If you get this working, you should be able to deploy your site with Google Analytics and see only one remaining error in the console. It's complaining about DoubleClick.

Go into your GA dashboard and click Admin -> Tracking Info -> Data Collection and toggle the "Advertising Reporting Features" to "off".

You should be good to go!

How to add custom headers to Eleventy with Cloudflare Pages

2021-10-27T00:00:00Z

https://twitter.com/jkup/status/1453410224119898123

I'm obsessed with WebPageTest. It's such an amazing free resource and I use it to measure every project I build. When I first moved this website over to Cloudflare Pages (literally my first day at Cloudflare) I was sad to see it get a FAILING grade on WebPageTest.

https://twitter.com/jkup/status/1424916560980979728

It was getting A's across the board except for the security audit. Digging a bit deeper, it was unhappy that my site was missing a few important security headers.

At the time, it wasn't super easy to add custom headers to a Cloudflare Pages project. It was definitely doable! But you needed to build a Cloudflare Worker to sit in front of the site and add response headers. That all changed today!

Cloudflare adds custom headers for Pages

Now you can simply add a _headers file to your Pages project and Cloudflare will add them to the responses!

So I went to my website, adding a _headers file in the root directory with the security headers in it and deployed!

/*
  Content-Security-Policy: default-src 'self'
  X-Frame-Options: DENY
  X-XSS-Protection: 1
  X-Content-Type-Options: nosniff

I raced over to check my WebPageTest score and...

Dangit. I checked my _site directory and sure enough, there was no _headers file in there.

Adding the headers file to Eleventy

Then I remembered something about static assets on Eleventy. I did a quick search and found this lovely documentation page (their docs are so good) Passthrough file copy

So I added this line of code to my eleventy.js file:

eleventyConfig.addPassthroughCopy({ static: "/" })

Now, any files I stick in my /static/ directory will be directly copied over to the root of my _site folder on build! So /static/_headers becomes /_site/_headers when you run eleventy.

Deployed it again and BOOM, A+ city.

And then everything broke...

I was so pumped! I wrote this blog post and Tweeted it! But then when I went to view it, I noticed that my Tweet embeds weren't working. I looked in the console and my Google Fonts and inline scripts stopped working too!

Dang you, CSP!

Ok so I found this awesome website on content security policies and scraped together some allowed domains to get my Google Fonts and Twitter embeds working again.

Content-Security-Policy: default-src 'self';font-src fonts.gstatic.com;style-src 'self' fonts.googleapis.com 'sha256-5g0QXxO6NfvHJ6Uf5BK/hqQHtso8ZOdjlnbyKtYLvwc='; script-src 'self' platform.twitter.com syndication.twitter.com; frame-src 'self' platform.twitter.com

But what about my sweet dark mode toggle which is some inline JavaScript?

It turns out you have three choices:

Use a nonce
Use the 'unsafe-inline' option
Generate a SHA hash and allow that.

I like pain so I chose option #3. I minified all of my inline JS into a single line

<script>function toggle_light_mode(){"dark"==localStorage.getItem("theme")?(localStorage.setItem("theme","light"),document.documentElement.setAttribute("data-theme","light")):(localStorage.setItem("theme","dark"),document.documentElement.setAttribute("data-theme","dark"))}"dark"===localStorage.getItem("theme")?document.documentElement.setAttribute("data-theme","dark"):document.documentElement.setAttribute("data-theme","light");</script>

And then I ran

echo -n 'that single line of js above' | openssl sha256 -binary | openssl base64

And that generated a unique hash, 8ZCTxR11UEYhveA/O/iAlHa4qNfBXa9oH8mU57KOrps=.

Finally, I added sha256-that_hash_above to the script-src section of my _header file. So now it looks like

/*
Content-Security-Policy: default-src 'self';font-src fonts.gstatic.com;style-src 'self' fonts.googleapis.com 'sha256-5g0QXxO6NfvHJ6Uf5BK/hqQHtso8ZOdjlnbyKtYLvwc='; script-src 'self' platform.twitter.com syndication.twitter.com 'sha256-8ZCTxR11UEYhveA/O/iAlHa4qNfBXa9oH8mU57KOrps='; frame-src 'self' platform.twitter.com

I really need to get back to work 😅

I minted (and sold) my first NFT

2021-10-03T00:00:00Z

It's pretty hard to miss the news on NFTs these days. They are a polarizing trend. Every day, it seems like there is an article of someone spending 2 million dollars on a pixelated monkey with a crown.

Knowing so little about them, I had a million questions. Are they a scam? Are people seriously paying that much money for some pixelated art? Can't you just right-click and Save As? What about the environmental impact?

It seems like half my Twitter timeline is "NFTs are the future," and the other half is "NFTs are a scam." Honestly, I didn't know what to think.

Environmental cost

I care a lot about the environment. At first, I thought all crypto transactions were killing the planet, so I stayed out of them entirely. But then I read about some of the newer currencies like Solana and saw they use a super-efficient Proof of History model.

Ethereum is also migrating

It's worth noting that the most popular NFT currency, Ethereum, is supposed to move away from Proof of Work by the end of the year. Some people are skeptical this will happen, but that would be a huge win if it does! Until then, I'm not going to be messing around with any Ethereum NFTs. Back to the article!

Ok, if it's not harming the planet, I can at least check it out!

It's not about the art

One of the first things I learned was that it isn't about the artwork at the end of the day. It's a lot more like buying Pokemon / Magic the gathering cards than purchasing art.

If you were ever into playing card games, you're probably familiar with booster packs. You can spend $5 on a sealed foil pack of 15-30 cards. The cards are random, but there are usually some guarantees. For example, some will say you get "at least" one rare in each pack.

So you spend the $5 and excitedly open your pack! You pull out all the rares and look them up online to see if they are worth anything. It's a lot like gambling. But the cards have other uses, too, like adding to your playable collection or looking cool.

This is how NFTs work too. Before the launch, you get some data like:

There will be 10,000 total.
Each one will have a head, eyes, hat, shirt and background.
You can see a chart listing the rarities of each trait. Like only 1 in 10,000 will generate a Darth Vader helmet.
They will cost $100 to generate.

So, you pay $100 to generate an NFT randomly, and you hope it comes with some super rare traits so you can sell it back for a lot more!

minting vs. buying

There are so many new words to learn in the crypto space. One thing I did not understand was the difference between "minting" and "buying" NFTs. On the day an NFT launches, people race to "mint" or generate NFTs. Most launches will include a maximum number of NFTs that can be generated and often a maximum number of NFTs any wallet can generate. The minting process involves:

Going to the website.
Waiting for the countdown to finish.
Generating as many NFTs as possible before they are all minted.

As soon as the minting process finishes, the secondary market begins! This is largely up to the NFT creators and can be a sticking point for bad launches. Essentially, the creators of the NFT need to go to the popular markets and verify the collection. You get a dedicated page for buying and selling NFTs from that collection as soon as this happens.

One thing that makes them cooler than playing cards is that they instantly turn into a secondary market. As soon as the 10,000 are generated, decentralized marketplaces like Digital Eyes and Solanart will verify the NFT collection, and you can list yours for any amount you want. They also track total sales and the fluctuating floor price. This is to say that even if you get an NFT with no rare traits, odds are you can sell it back for the amount it cost you to generate it.

Additional benefits

On top of the rarity and resale value, NFTs these days are focusing on adding value. For example, Meerkat Millionaires launched a set of NFTs where 100% of royalties go back to the original minters and people currently holding them. This means that if you mint one, you can collect monthly dividends based on how many sold that month forever.

Others have more artistic or fun benefits. I saw one where the 6 rarest NFT owners get their names in a book and another where you get to vote on a storyline for a game. Others still get some swag for rare NFTs.

Picking an NFT

There are a lot of NFTs launching. It's really tricky to find "good" ones. Some of the things to consider:

How many total NFTs can be minted?
Are there any additional benefits for minting?
How popular does the launch seem to be? (Twitter followers, Discord users)
Is it a scam? (More on this below)
How much does it cost to mint?

In the end, I decided on the Meerkats because:

@kng told me to, and she knows way more about this stuff than I do.
They look super cute.
Big following on social media.
Low'ish cost to mint.
People I trust were talking about them, so hopefully not a scam.

Scams galore

Ok, at this point, it probably sounds pretty awesome. There's potential to make big money; the environmental impact is tiny; in the worst case, you still probably make your initial money back; cute meerkats!

There are a lot of scams in the NFT launch market. While buying and selling on official sites like Solanart and Digital Eyes is entirely safe, the minting process can be dangerous.

Types of scams

There are two types of scams I've seen so far:

There is no NFT. You visit a cool site, wait for the launch, you spend your $150, and nothing goes into your wallet.
The art is not as advertised. Either you get a piece of art that looks nothing like you expected (with none of the rarity attributes).
They are trying to deplete your wallet. Since these launches are so time-sensitive, people often connect their wallet to the site and turn on the setting to "auto-approve all transactions." Then they click the button to spend $150 on a token, and the website code tries to make dozens of $1,000 transactions and deplete your funds.

Unfortunately, there is no way to stay completely safe minting NFTs. There are, however, things you can do to significantly mitigate risk.

Make a burner wallet. Creating a wallet in an app like Phantom is as simple as two clicks! If the NFT you want to mint costs 1 Solana, make a burner account and transfer only 1.05 Solana into it (1 to mint and 0.05 to cover fees). This way, the worst that happens is you are out one coin.
Never click auto-approve. I know it sounds like it will save time but just don't click it. Try to mint the NFT, look at the request when it pops up and make sure it's for the amount you expect.
Be skeptical about launches. I try to look at who's following the Twitter account, if that company has done a launch before, etc. Is there anything tying them to the community?

Honestly, these scams seem like the #1 issue that needs to be fixed in the community. I'm sure there is some cool solution that doesn't involve some centralized authority running launches. It's tough to navigate because a well-funded and popular launch means it will be tough to mint one before they sell out, but otherwise, you risk a scam.

My experience

So I went with the Meerkats! I made a Phantom burner account and put just 1 Solana in there. I connected it to the website and made sure auto-approve was not selected. I waited for the timer to count down, and as soon as it did, I clicked mint! I got this awesome dude:

One weird thing about buying stuff with crypto is that not only can the value of the asset go up and down, but the dollar value of the currency can go up and down at the same time! So I minted my dude for 1 Solana, which at the time was worth $150.

They sold out instantly. The secondary markets were a bit slower to fill up than I expected. I held on to my lazer boi for a couple days, and when the floor (lowest token currently for sale) went to 22 Solana, I listed mine, and it sold! Not only did I spend 1 Solana and make 22, but Solana itself went up from $150 to $170 in that time. So I spent $150 and made about $3200 after all the fees and royalties.

Now the floor is up to 26 Solana, and I wish I held. Isn't that always the way?

That was a fun weekend.

Chrome DevTools Console Drawer

2021-09-26T00:00:00Z

Chrome DevTools Console Drawer

Have you ever accidentally hit the escape key while using the Chrome DevTools? And that little bottom drawer pops up with another console. And you're like, what the heck is this thing?

If so, then you've encountered the "Console Drawer." But, what exactly is it? And what secrets does it hold!? Here is a list of 6 things you can do with the Console Drawer.

1. View unused CSS & JS

https://twitter.com/jkup/status/1442207564876374022

You can open the Coverage panel inside the Console drawer and generate a code coverage report for your website! This is super helpful if you want to catch any unused CSS that might be lingering around, bloating your bundle size!

It's worth noting that while identifying unused code for a specific page is easy, it's much more difficult to configure your build not to serve specific CSS or JS per page. So take this with a grain of salt!

2. Monitor CPU and Memory in real-time

Although the DevTools have multiple places to get profiling data, the real-time performance monitor is a great place to start!

3. Inspect Web Audio

4. Inspect Animations

5. Block Network Requests

You can build your own ad blocker! Or test your application... Enter any URL you'd like to block (using * as a wildcard), and Chrome won't load those requests.

Nailed it.

6. Override Location, Touch or Idle State

You can manually set your country of origin. Override your mouse clicks to be touch events or event simulate a mobile device idle state! All from the DevTools!

JavaScript math methods I never knew existed

2021-09-07T00:00:00Z

I was trying to break Cloudflare Workers tonight and did a search for "CPU intensive JavaScript" because I'm really good at my job.

This gist popped up with the following code:

function mySlowFunction(baseNumber) {
  console.time("mySlowFunction")
  let result = 0
  for (var i = Math.pow(baseNumber, 7); i >= 0; i--) {
    result += Math.atan(i) * Math.tan(i)
  }
  console.timeEnd("mySlowFunction")
}

mySlowFunction(8) // higher number => more iterations => slower

Cool, cool. It's some loop that does something and returns a... wait a minute what the heck is Math.atan!?

According to MDN it's:

The Math.atan() function returns the arctangent (in radians) of a number

I don't know anything about math so I'm not even going to pretend to understand actangents but it led me to wondering what other math methods I never heard of. Here's a list:

Math.acos(): The Math.acos() function returns the arccosine (in radians) of a number.
Math.acosh(): The Math.acosh() function returns the hyperbolic arc-cosine of a number.
Math.asin(): The Math.asin() function returns the arcsine (in radians) of a number.
Math.asinh(): The Math.asinh() function returns the hyperbolic arcsine of a number.
Math.atan2(): The Math.atan2() function returns the angle in the plane (in radians) between the positive x-axis and the ray from (0,0) to the point (x,y), for Math.atan2(y,x).
Math.atanh(): The Math.atanh() function returns the hyperbolic arctangent of a number.
Math.cbrt(): The Math.cbrt() function returns the cube root of a number.
Math.clz32(): The Math.clz32() function returns the number of leading zero bits in the 32-bit binary representation of a number.
Math.cosh(): The Math.cosh() function returns the hyperbolic cosine of a number, that can be expressed using the constant e.
Math.expm1(): The Math.expm1() function returns e^x - 1, where x is the argument, and e the base of the natural logarithms.
Math.fround(): The Math.fround() function returns the nearest 32-bit single precision float representation of a Number.
Math.hypot(): The Math.hypot() function returns the square root of the sum of squares of its arguments.
Math.imul(): The Math.imul() function returns the result of the C-like 32-bit multiplication of the two parameters.
Math.log10(): The Math.log10() function returns the base 10 logarithm of a number.
Math.log1p(): The Math.log1p() function returns the natural logarithm (base e) of 1 + a number.
Math.log2(): The Math.log2() function returns the base 2 logarithm of a number.
Math.sin(): The Math.sin() function returns the sine of a number.
Math.sinh(): The Math.sinh() function returns the hyperbolic sine of a number, that can be expressed using the constant e.
Math.tan(): The Math.tan() function returns the tangent of a number.
Math.tanh(): The Math.tanh() function returns the hyperbolic tangent of a number.
Math.trunc(): The Math.trunc() function returns the integer part of a number by removing any fractional digits.

Introduction to cryptocurrencies

2021-09-04T00:00:00Z

Introduction to cryptocurrencies

I recently went down a bit of a crypto rabbit hole. I've been aware of Bitcoin since 2014, but I didn't truly understand it, and I had no idea about all the newer things in the space. Some questions I had when starting:

What are exchanges?
What is a wallet?
What is mining?
Are all cryptocurrencies terrible for the environment?
How do taxes on crypto work?
What is a DAO?
What is the deal with NFTs?

How I got started

First things first, I watched a few free documentaries on the history of Bitcoin.

Crypto Documentaries I Watched

First up, Banking on Bitcoin

Free on YouTube, Banking on Bitcoin makes a great introduction. It starts with the 2008 financial crisis and follows along with Bitcoin's creation and early history.

https://www.youtube.com/watch?v=6jSm9vTBGKU

Next, Cryptopia

Free with an Amazon Prime subscription, Cryptopia covers the good, the bad and the ugly of crypto.

Short and sweet, Netflix Explained: Cryptocurrency

Season 1 of Netflix Explained has a "Cryptocurrency" episode that is very good! It's only 19 minutes long, but it covers a lot.

Great YouTube Channels

How to join Developer DAO

2021-09-04T00:00:00Z

I saw a tweet from @nader about him creating Developer DAO yesterday. I don't know much about them, but it sounded interesting. Here's how I joined and what I learned so far!

https://twitter.com/dabit3/status/1433879106119208966

Joining Developer DAO

In his tweet, he links to an etherscan URL which shows all of the tokens for this DAO. To "join" the DAO, you need to purchase a token. Sounds easy, right?

This crypto stuff is super cool, but they are sorely missing UI designers and developers.

The TL;DR is you need to click a few buttons in the Etherscan site and "buy" a token. The tokens are free, but there is a hefty (and constantly changing fee called a gas price needed to make any purchase). Also, you'll need an Ethereum wallet to be able to make the purchase! Let's start there.

Creating a wallet

I went to metamask.io and created a wallet. I wrote down my secret key phrase thing and then added the Chrome extension.

I have some Ethereum that I bought using Coinbase. I copied my Metamask wallet address from the Chrome extension, then I went to my Coinbase account and withdrew 0.03 (what I estimated the gas fee would be at the time) Ethereum (needed to cover the transaction fee mentioned above).

Connecting your wallet to Etherscan

BOOM. I now have money (or rather Ethereum) in my Metamask wallet. Then, with the Chrome extension installed, I made an Etherscan account and went back to the url mentioned above. I clicked on Contract -> Write contract -> Connect to Web3 and clicked accept on all the thingies to connect my Metamask wallet to my Etherscan account.

Finding an available token

Another weird part. There are 8000 total tokens for this DAO, and you want to buy one. It sure would be nice if you could just click a "give me one" button and get one. But things aren't that easy. You'll need to find the ID of an available token. I'm sure there is a better way, but here's what I did:

Click on Inventory and look for any id not showing up in sequential order. At the time of this writing, I see 1005, 1006 and 1007 but not 1008. So I think 1008 is available to purchase?

Take that ID and go back to Contract -> Write contract. Click the "claim" dropdown and enter that ID. Then click "Write." It should open the Metamask extension and give you a button to approve the transaction. The price varies minute by minute. It seems like it's fluctuating between $45 and $400 right now. So if it's higher than $100 you should just wait and try again later!

Hopefully that worked, and now you are an official member of the DAO!

Joining the Discord

First, you can join the Discord without joining the DAO by following this link.

To "join" the DAO part of the Discord you have to:

Enter the "public" voice channel. Don't worry, you don't need to talk or have audio. You just need to be in there.
Go to any one of the text channels under "INFO" and type "!join". You will get a DM from a bot called "Collab.land", and it will give you a link. You follow that link and enter your Metamask wallet address, and you're done!

Come say hi!

I hope this helped. If you get stuck, message me on Twitter, and I'll do my best to help you!

Also, you should follow @developer_dao on Twitter!

A note about gas prices

I'm pretty new to Ethereum, but the gas price is a fee for any transaction. They fluctuate wildly! They were like $400 last night, $40 this morning and $80 when I purchased. My best advice is to keep this gas tracker open and when you see it drop low, go do the steps above!

Good luck out there.

What the heck is a DAO!?

A DAO is a Decentralized Autonomous Organization. Basically a community where we can make Smart contracts and all vote on the direction the community takes. Honestly if this sounds confusing it's because I have no idea what they really are. The gas prices are a huge issue but otherwise this DAO is free to join. It's a fun Discord of developers who are interested in Crypto!

Here's mine 😎

What does my token look like?

After you purchase your token, you can go to OpenSea and type in your ID number! It'll show you this funny list of things. That image represents your token. Post it in the #show-your-dev channel in Discord!

What should I do if the Collab.Land message is blank?

If you are entering the !join command and the bot is replying with a blank message, you likely have Link Preview turned off in your user settings.

User Settings > Text & Images > Link Preview and enable it

Switching to DevRel from Engineering

2021-08-31T00:00:00Z

I'm finishing up my 4th week at Cloudflare and my 4th week as a Developer Advocate.

Cloudflare has been amazing! I'm working with one of the friendliest and most excited groups of people ever. We have excellent products, an ambitious roadmap, a healthy culture, and I couldn't be more excited for the next year!

Developer advocacy has also been amazing. It's quite a bit different than I expected it to be. Mostly in positive ways! I've been struggling to process my thoughts on the subject so writing them down seemed like an easy way to go.

Here are some of the main points I've noticed switching from Engineering to Developer Relations.

Working on multiple projects

As an engineer, you typically get assigned to a team. That team typically owns one product or part of a product, and that's where you spend your time. Companies will often have all hands or demo hours where you can see what the other teams are working on, but most of the time, you are heads down.

As a Developer Advocate, you get to work with a lot of teams. I work with my team (other DevRel folks), product engineering teams (Workers, Pages, Wrangler), content writers, product managers, social media folks and event organizers! It's really fun, and I feel way more connected to the company than I usually do. It also can be super overwhelming.

Consumption vs. Production

As an engineer, your job is to "produce." A team typically has some amount of work that needs doing, and that work gets divided by the number of engineers. Sometimes you'll get to learn something (consumption) like ramping up on a new technology stack or integrating with another team. But for the most part, your job is to write code (produce).

DevRel feels different. There is value in you learning the roadmaps. For all of the teams, you are working with. You still do a good amount of producing (writing docs, blog posts, making videos, giving talks, etc.). But, I spend a lot of my day consuming (attending meetings, reading docs, listening to customers, reading PRs, chatting with folks in the community).

I miss coding

Sitting in on a lot of these product engineering meetings, I get super excited for what they are building. My instinct is to jump in and help. Need a PR reviewed? I'm on it! Want to whiteboard your approach? Let's do a video call! It isn't easy knowing that I need to add my value in a different way and miss out on the coding party.

I never want to code again

Five minutes later, I get a ping from someone wanting me to check out a new feature someone shipped, make a fun demo app with it and write a blog post about it! Like, on work time? Am I gonna get paid to do that? No way!

A dog chasing cars

My first week here, I had a meeting with my teammate Luke. He talked to me about how overwhelming the job can be and the importance of picking some areas to focus on and do well and letting others go. It's impossible to keep up with all of the stuff the org is building. He said to do otherwise would be like a dog chasing cars, and that stuck with me.

Creative work is exhausting

I started this job thinking that I'd be able to sit down and pump out blog posts and videos 8 hours a day. I don't know why I ever thought that. It's amazing how tired I feel after a few meetings learning about all sorts of cool new stuff. Some days I sit down with my editor open in focus mode to work on a blog post, and my eyes just blur. I need to pick and protect some focus time, set a reasonable expectation for hours per week spent creating content and add some mentally refreshing activities to my day like walking.

Engaging with the community

We have a really cool Discord community. I always enjoyed engaging with customers/users at my other jobs but just couldn't find the time. I love being able to spend part of my day reading all the neat things folks are building. I like seeing how they use the products, where we could improve and where we are excelling. I did my first community call last week, and it was awesome.

On Interviewing...

2021-07-15T00:00:00Z

Ah, the dreaded coding interview. Hated by so many, and with good reason! I've been working in tech for 12 years, so I've been both the interviewer and interviewee many times.

Honestly, I think the tech interview process has significantly improved in the past few years, but it still has a long way to go. I've also come to terms with the fact that interviewing is seriously difficult. At different points in my career, I thought I had the answer to making interviewing better, but every option has its drawbacks.

Let's talk about a few common interviewing strategies and where they succeed and fail.

Interviewing Strategies

I've seen 3 schools of tech interviewing over the years. A full day of on-site interviews, a take-home with a few follow-up interviews, and contract-to-hire.

Full day on-site

This was the "standard" tech interview for many years. It typically consists of a recruiter call followed by 1-2 technical phone screens. These usually involve pair programming but often are "easier" questions than you're likely to face later on. If those go well, companies will often fly you to their office for an on-site or (in COVID times) set up a full-day interview panel over Zoom or Google Meet. If these go well, you get an offer!

Things I like

I like that the interview is extremely time-boxed. If you're busy with a current job, family obligations, etc. -- it's nice to have a maximum number of hours spent interviewing. This is even more true if you're interviewing at multiple places.

Years ago, it was common to be asked completely unrelated compsci questions no matter your skillset or what position you were interviewing for. I "think" this has changed in recent years. Many interviews I do as a JavaScript developer focus much more on web development than more "back end" concepts like advanced data structures and algorithms.

Things I dislike

Having 5-7 strangers come up with random questions and ask them to you on the spot is stressful! You can study for hundreds of hours but forget to study a concept like "radix sort" and get asked to implement one first question! Some places offset this by sending you a list of possible topics beforehand. Other companies insist that you use Google or StackOverflow whenever you need them during the process. It's still stressful going into a panel where any subject in computer science is on the table.

Full-day on-site interviews bias towards folks who perform well on the spot. I can't count the times I forgot how to spell a word or forgot the name of a common JavaScript method when in a small room with a stranger, marker in my hand.

Take home interviews

A few years ago, take-home interviews became very popular. Typically you'll still have an initial call with a recruiter or hiring manager, but then, instead of a phone screen, you'll be sent a take-home project to complete on your own time. Sometimes these are vague (a writing prompt like "build an image carousel"), and other times they are very specific (a HackerRank link that tracks time spent or a partially complete project for you to work on).

Typically, companies that do take-home challenges structure the follow-up "on-site" interviews around the completed project. Maybe they'll ask you to add more features, walk through the code you wrote or discuss trade-offs you made along the way.

Things I like

Take homes result in way less performance anxiety. You can sit down in the comfort of your own home with a nice cup of coffee and work at your own pace. No one is watching, so you can use Google or look up "silly" things at your leisure. It simulates real programming work much more closely.

Things I dislike

Unless the question is strictly time-boxed, you are essentially competing for a job against the person who spent the most time on the project. Once I had a company send me a prompt, and in the email, they said, "You should spend no more than 4 hours on this project." I finished and sent it in. Later, I received a rejection during which they told me all about the incredible submissions they had received with complete documentation, 100% test coverage, or extra features added on top of the prompt. I felt so foolish for only spending 4 hours on mine.

Contract-to-hire

Contract-to-hire has been around for a long time but has made a recent resurgence in the tech industry. The idea is that after passing an initial phone screen with a recruiter or hiring manager, you're brought on to do real work for which you receive real compensation. Some places offer full-time employment for a month or two. Others just ask for a few hours a week, which you can do on top of your current job.

Things I like

Contract-to-hire probably gives the best signal of how you work. You don't need to study or perform well under pressure. It also is a two-way street! You get a chance to see how the company really works and how well you fit in. Also, money is nice!

Things I dislike

Contract-to-hire has the highest time commitment by far. It's just not an option for folks who:

Are on visas
Are already stretched too thin
Don't have a current job and need health insurance

They all sound bad; what should we do?

I think switching up the format is the wrong approach. Switching from an on-site to a take-home feels like a lateral move. Instead, companies should focus a lot more on giving candidates the best experience possible. This includes:

Unconscious bias training.
Lists of approved questions.
Asking candidates for feedback on the process.
Creating an interview rubric.
Analyze interviewer feedback.

Let's dive into a few of these things!

Unconscious bias training

What are unconscious biases?

Unconscious biases are social stereotypes about certain groups of people that individuals form outside their own conscious awareness. Everyone holds unconscious beliefs about various social and identity groups, and these biases stem from one's tendency to organize social worlds by categorizing.

I've worked at a few places that offered bias training for new interviewers, and I found it excellent. A lot of easy tips for helping create a more fair and equitable interview process. I think some sort of "Interviewer training" should be mandatory at medium to large companies. Making sure everyone is representing the company well and helping create a diverse and successful workforce.

Lists of approved questions

I could go either way on this one. Lists of coding challenges leak out, end up on Leetcode, and can be a pain to maintain. I still think it's essential to make sure each question asked is fair and appropriate for the candidate based on the role.

Asking candidates for feedback

This one can be a bit tricky. Candidates are unlikely to give you honest feedback while still waiting for a potential job offer. I've seen this done well a few times when companies send out an anonymous survey after the on-site site. Other times recruiters can do a good job convincing you that whatever you say will have no bearing on the interview outcome.

You could also do this by making sure someone at your company spends time on sites like Glassdoor reading the anonymous feedback.

Creating an interview rubric

So much can happen in a 45-minute interview. It's difficult to distill it all down into a "hire" or "no hire" result. I think companies must spend time devising a rubric to help interviewers evaluate candidates. Things like:

Did the candidate figure out a brute force solution?
Was the candidate able to talk through their approach?
Did the candidate receive feedback well when prompted?

This way, you can collect lots of data and use it to improve your hiring pipeline, interview questions, and expectations.

Analyze interviewer feedback

One of the best parts of devising a rubric and having a list of approved questions is getting a lot of data to learn from! It's nice to see things like:

Average score given by each interviewer (Maybe a 4/5 from one person is the same as a 5/5 from another!)
Questions that candidates often do poorly on.
Interviewers candidates enjoy talking to.

A note on kindness

I've had the privilege in my career to end up with competing job offers multiple times. While I'd be lying to say that salary and perks didn't play a role in my decision-making process, I think it's important to note how important kindness is for me.

Every time I've had a tough decision to make, I've chosen to go with the kinder company. A transparent recruiter. A hiring manager who is easy to talk to. A friendly interview panel where it felt like they wanted me to succeed. That makes a huge difference, and so far, I've had no regrets about my strategy.

Be kind!

The age of the devtool startup

2021-06-12T00:00:00Z

Lately, there has been a trend of brand new startups in the developer tooling space, and I couldn't be more excited.

Funding open source is hard

For years folks have been struggling to get funding for even the most foundational of projects. A few projects like webpack and vue.js have managed to get some recurring money, but most projects struggle.

Recently a few projects have secured VC funding to continue building their open source dev tools. I know folks are often nervous about VC backed projects, but being able to secure 4.5 million dollars when historically getting $100k a year has been impossible has me excited.

Some examples

A few companies I'm particularly excited about:

Replay (replay.io) - Replay is a browser that records an entire interaction on your site and produces an artifact that you can debug, share, and comment on. Think of recording a bug on your website and uploading the entire artifact to a GitHub issue for one of your dependencies. Then they can click around, time travel debug, check your source code, and comment to you with their findings!
Replit (replit.com) - Replit started as a collaborative IDE for many different languages but has become so much more. Recently they announced their startup incubator, Replit Ventures, and released their game programming environment Kaboom.
Rome (rome.tools) - Rome is a brand new tool designed to replace Babel, ESLint, webpack, Prettier, and Jest. Instead of each tool bringing its own compiler and requiring swaths of configuration files to glue together, Rome aims to be a single compiler you can use for linting, formatting, compiling, and bundling.
Vercel (vercel.com) - Vercel has been around for a while, but their continued commitment to awesome developer tooling always impresses me. They offer both a place to deploy frontend apps (Vercel), and an open sourced framework for building optimized React applications (Next.js).
Supabase (supabase.io) - Supabase is an open source alternative to Google's firebase. It allows you to instantly spin up a backend, giving your project databases, authentication, and realtime APIs.

I couldn't be more excited

I hope all these great companies bring a considerable improvement in developer tooling and quality of life for working on web engineering projects. I love seeing a wave of free, open source, developer tools, and I especially love the folks behind these tools finding a way to get themselves paid for the great work they do.

React Aria - A better approach to design systems

2021-05-06T00:00:00Z

Design systems are great. Working at large companies like Adobe, it's easy to quickly build functional UIs using a robust design system and component library like React-Spectrum.

Terminology

For this post, I'll be referring to the collection of icons, images, fonts, color schemes, and general guidelines as a design system and the actual collection of JavaScript, HTML, and CSS as a component library. Component libraries implement design systems.

The problem with component libraries

One issue with most design system component libraries is that they offer two different things in one "take-all or none" package. Component libraries offer:

A rich UI for elements helping them seamlessly blend in with the design system.
A lot of functionality to help manage user interactions and normalize browser quirks.

The first offering is great if you're building something that needs to look like the design system you're using. For example, if you're building a mobile web app for Android, then using Material UI might be a great library to use. It will make everything look like Google's Material Design, and you'll get a ton of free functionality. If you're building a product that you hope to monetize, maybe having it look like a Google app isn't what you want.

This is what makes so many folks unable to use component libraries. Small teams building new products would love to quickly develop their app with all the functionality that a component library like Material UI or React Spectrum provides. But they don't want their apps looking like an Adobe product.

Introducing React-ARIA

The team behind React Spectrum has been hard at work rewriting their component library over the last few years. One of the coolest things that came of the rewrite is they broke each component out into three pieces—the component's state, functionality, and rendering logic. They released three separate packages on npm for just this purpose.

@react-spectrum - The full component. Adobe UI, functionality and state.
@react-stately - State management for the component.
@react-aria - Accessibility and behavior for the component.

One of the creators, Devon Govett gave a great talk about React Spectrum at React Europe.

https://www.youtube.com/watch?v=dxDcBB7Xoxs

Prior art

This project reminds me a lot of Downshift by Kent C. Dodds. Downshift provides a set of hooks for Combobox, Select and MultipleSelect.

An example

Let's check out how these libraries work together using a listbox as an example!

A listbox is a list of options where a user can select one or more. Here's what one looks like:

React Stately

Not incredibly useful on its own, but the @react-stately selection component will return all the props needed to pass into the listbox component so that it can maintain its own state.

import type {AriaListBoxProps} from 'react-aria';
import {Item, useListState} from 'react-stately';
import {mergeProps, useFocusRing, useListBox, useOption} from 'react-aria';

function ListBox<T extends object>(props: AriaListBoxProps<T>) {
  // Create state based on the incoming props
  let state = useListState(props);

  // Get props for the listbox element
  let ref = React.useRef(null);
  let { listBoxProps, labelProps } = useListBox(props, state, ref);

  return (
    <>
      <div {...labelProps}>{props.label}</div>
      <ul
        {...listBoxProps}
        ref={ref}
        style={{
          padding: 0,
          margin: '5px 0',
          listStyle: 'none',
          border: '1px solid gray',
          maxWidth: 250,
          maxHeight: 300,
          overflow: 'auto'
        }}
      >
        {[...state.collection].map((item) => (
          item.type === 'section'
            ? <ListBoxSection key={item.key} section={item} state={state} />
            : <Option key={item.key} item={item} state={state} />
        ))}
      </ul>
    </>
  );
}

function Option({ item, state }) {
  // Get props for the option element
  let ref = React.useRef(null);
  let { optionProps, isSelected, isDisabled } = useOption(
    { key: item.key },
    state,
    ref
  );

  // Determine whether we should show a keyboard
  // focus ring for accessibility
  let { isFocusVisible, focusProps } = useFocusRing();

  return (
    <li
      {...mergeProps(optionProps, focusProps)}
      ref={ref}
      style={{
        background: isSelected ? 'blueviolet' : 'transparent',
        color: isDisabled ? '#aaa' : isSelected ? 'white' : null,
        padding: '2px 5px',
        outline: isFocusVisible ? '2px solid orange' : 'none'
      }}
    >
      {item.rendered}
    </li>
  );
}

<ListBox label="Alignment" selectionMode="single">
  <Item>Left</Item>
  <Item>Middle</Item>
  <Item>Right</Item>
</ListBox>

React Spectrum

Putting it all together, we could use the top level @react-spectrum library to render a button with all its state and functionality!

import { Button } from "@adobe/react-spectrum"
;<Button variant="cta">Save</Button>

The great thing about React Aria

Imagine you're in the situation described above. You're building a web application, and you want to make sure it's robust and accessible, but you don't want it to look like a Google product.

React Aria gives you the power to build your custom UI while still getting all of the browser support, accessibility, and functionality of a component library. Imagine building your own custom checkbox and not having to worry about making it accessible because you can simply import {useCheckbox} from '@react-aria/checkbox' and add the resulting props to your custom element!

Imagine building a custom button element and not having to worry about a proper focus ring because you can just:

import { useFocusRing } from "@react-aria/focus"

function Example() {
  let { isFocusVisible, focusProps } = useFocusRing()

  return (
    <button
      {...focusProps}
      style={{
        WebkitAppearance: "none",
        appearance: "none",
        background: "green",
        border: "none",
        color: "white",
        fontSize: 14,
        padding: "4px 8px",
        outline: isFocusVisible ? "2px solid dodgerblue" : "none",
        outlineOffset: 2,
      }}
    >
      Test
    </button>
  )
}

Should you use React Aria?

If you are building a design system, and are not willing to put in the work to make your custom components fully accessible, you should use React Aria! Do you have a custom select component? Does it support browser autocomplete? No? Check out React Aria!

The TL;DR

I look at React Aria, and I think:

Finally, I can bootstrap my app with a component library and not have it look like a Google product!

Are you using React Aria for your component library?

Exciting movement in JavaScript tooling

2021-05-04T00:00:00Z

It's been an exciting few months for the JavaScript tooling ecosystem. I've never been much good at guessing what's coming next, but there are a lot of projects that have me very excited.

First, Snowpack launched. Now that JS has a proper module system, you can literally just export and import components with no need for a bundler in modern browsers. Snowpack takes advantage of this by skipping the "bundle" step entirely and just letting you serve your ESM (JS module) components natively.

Then, esbuild hit the scene. A JavaScript bundler written in Go that produces bundles at 10x-100x the speed of tools like webpack, Rollup, and parcel. It's still in the early stages, but playing around with it, it's a game-changer.

Then, the team behind Vue.js came out with an exciting project called vite. You can think of vite like using Snowpack for dev mode and Rollup for production. Vite lets you have lightning-fast rebuilds (no bundling needed) while you're working and then deploy a proper bundled app to production.

As if this week couldn't get more exciting, the Parcel team rewrote the transformer in Rust. They are seeing a 10x improvement in speed with the new Rust PR. It looks like it wasn't just changing languages but a more efficient transform algorithm that helped speed things up!

But wait, there's more! Sebastian and Jamie, the team behind Babel and Rome, announced today that they have secured VC funding and are building a company around Rome, their new all-in-one linter/compiler/bundler for JavaScript!

https://twitter.com/sebmck/status/1389609712220528643

I hope my apps get faster soon. So many amazing people doing amazing work.

Wasted real estate: Blog homepage design

2021-03-11T00:00:00Z

I've started a lot of blogs. Like, a lot. For myself, for friends and family, for companies.

Most of the time, the analytics for these blogs look something like this:

As you can see, the large majority of the traffic only ever visits your homepage. So why is it that we fill our homepage with generated content? Think about a generic WordPress theme.

The main section of the homepage is populated with... a generic list of your most recent posts!? Really? What if your most recent article was a bad one? Just kidding, I'm sure your blog posts are all bangers!

And then we have the sidebar, more prime real estate! We use that to... display a generated list of categories? I mean, I guess that's helpful, but it's hardly the most important thing.

Seriously though, this is your one shot at wowing your visitor. If your blog was a business and someone walked in and asked what you do there, would you tell them all about the literal last thing you did? Or would you tell them about the coolest and most fun thing your company does? Would you ask for their contact info so maybe you can send them more information?

Examples of great homepage designs

kalzumeus.com

Someone sent me a link to a blog post on kalzumeus.com the other day, and I was so impressed with their home page.

It starts with a well-written introduction, explaining who they are, how you might know them, and what they are up to. The next thing it does is introduce a curated (again, not generated!) list of their best work.

It goes on to list their accomplishments and finally, at the very bottom, a list of their most recent articles!

theworst.dev

Kurt recently redesigned his homepage and I just love it.

Kurt's blog starts with another heartfelt and well-written introduction. Who he is, what he plans on blogging about, what he's passionate about, how to find him on social media, etc.

The next section is my absolute favorite. He literally writes, "If you only read one post, you should read this one." and then manually (NOT auto-generated) picks his favorite blog post and highlights it front and center.

Then it goes on to highlight all of the things he is working on. At the time of this writing, it shows two podcasts he was recently on and an interview.

christopherbiscardi.com

Another one of my absolute favorites is christopherbiscardi.com. Christopher is a master at information architecture and telling a story with his homepage design. First of all, just look at it!

No wasted space here!

✅ Well-written introduction
✅ Social media links
✅ Hand made content groupings (his field guides)
✅ Check out a cool framework he made
✅ Sign up for his newsletter

Boom.

What does your homepage say about you?

Have you spent time configuring your homepage? Or do you let your blogging engine dictate what shows up on there? Do you think it would be a good spend of time to configure it yourself?

Want to get early access to all of my posts? Sign up for the newsletter below and never miss an update! 😅👇

On leaving a great job

2021-02-26T00:00:00Z

A bit of personal news, today is my last day at Adobe.

I've had such a fantastic run at Adobe. The people are just incredible. I got to work on so many cool products across the Creative Cloud. I worked on web apps, desktop apps, services, shared components, contributed to our design system and helped lead three amazing projects.

So, why am I leaving?

For the first time in my career, I'm struggling with burnout. Really struggling.

One heck of a year

2020 was rough for so many people. I moved from San Francisco to Florida at the end of 2019. I hardly knew anyone in my new state but had an enjoyable few months exploring before the coronavirus hit. The lockdowns, anxiety about loved ones catching the virus and social and political unrest have all been taking their toll. I've always struggled with anxiety, but this last year it has been a constant burden.

On top of that, my team took on an ambitious project at the beginning of 2020. We are building something brand new on a stack that's never been used before. Scoping the work, building up a team, and struggling to hit a deadline have also taken their toll.

The last year has left me struggling to be productive. My team has been great about supporting me through a tough time, but I can sometimes be my own harshest critic, and this year has left me feeling upset and disappointed with myself.

The goodbyes have been hard

I decided to leave a few months ago and began working on an exit plan with my manager. Since deciding to go, I haven't questioned whether it was the correct choice, but saying goodbye has been more difficult than anticipated. It's a special place, and the Creative Cloud org is full of incredible people.

What's next (short term)

I haven't dealt with burnout before. Fortunately, moving to a low cost of living city last year, I'm able to take some time off. I will work on my mental health, physical health, and finding some technologies that get me motivated again!

I'm going to try hard not to work on anything serious for the first few weeks. I want to catch up on sleep and get into a better exercise routine.

What's next (medium term)

After taking a few weeks off, I'd like to find some open source projects to contribute to. I'm particularly interested in:

Compilers
Bundlers
Type Systems
Programming Languages
Web Performance

If you work on something like that and would be down to trade my time for your mentorship, hit me up!

What's next (long term)

While I'm not looking for work right now, if you're doing something awesome and you think I'd make a good fit, I'd love to chat about it! COVID has been difficult socially, so even if you're not doing something awesome and think I'd be a terrible fit; I'd still love to chat sometime 😅. I really miss hanging out with people.

Conclusion

I'm extremely sad to be leaving what is probably the best job I've ever had. I've grown so much at Adobe and could not have asked for a better team. If you're looking for a great place to work on a unique set of products, I highly recommend applying at Adobe.

That's all for now. Going to take some time to work on being healthier. Hopefully, I'll have some success and be back doing fun tech stuff soon!

♥️

Best online node js editor

2021-02-24T00:00:00Z

Online node js editors have come a long way in the last few years! A few years ago, I would have recommended against using an online editor. I would have said you should install Node js locally instead. But that's no longer true.

Out of all the node js editors, there are two clear standouts.

Replit

Replit is:

A free, collaborative, in-browser IDE to code in 50+ languages — without spending a second on setup.

Replit is my go-to for any online server-side language editor. The interface is clean, the UI is snappy, and it supports so many languages. The online node js support is top-notch, and you can easily collaborate with friends! You can even deploy your node js app via Replit and share it with the world!

CodeSandbox

CodeSandBox is:

Where teams build faster, together. Create, share, and get feedback with collaborative sandboxes for rapid web development.

I still remember what a gamechanger it was when CodeSandbox came on the scene. It allows you to instantly create React, Angular, Vue, Svelte, and Vanilla JS apps.

You can add npm packages (even private ones). You can whip up a React project with all your actual dependencies and share an idea with the world!

They also have great support for node js editing. Quickly create a Node js HTTP server and share it with friends or use it for a demo!

Which online editor is best?

If I had to choose, I'd say the best currently online node js editor is Replit. It's free, fast, and accessible. You can build or prototype anything you want and easily share it. Plus it offers support for so many languages.

Some other apps offer a Node js repl, but none have the quality or accessibility of Replit and CodeSandbox.

jquery vs node.js

2021-02-23T00:00:00Z

JavaScript has a vast ecosystem. Someone asked me on Twitter yesterday, what is the difference between jquery vs. node.js? They are very different technologies! It helps to take a step back and look at the entire JS ecosystem to explain the difference.

To make things even more complicated, JavaScript can run in the browser, on the server, or even on embedded devices! Running in so many different environments confuses people because it's challenging to separate JavaScript the language from a JavaScript platform.

JavaScript the language

JavaScript, the language, came from humble origins. It was created in 1995 by Netscape and was initially named "Mocha." It saw rapid adoption in the first few years and was in clear need of management!

ECMAScript

There is this incredible group called Ecma International.

Ecma International is an industry association dedicated to the standardization of information and communication systems.

They help you form a standards body around a technology so members and vendors can join and help shape its future.

In 1997, two years after Netscape created the language, they partnered with ECMA. They formed ECMAScript, an official body of language contributors and vendors (like web browsers) who meet and decide on JavaScript's future together.

jQuery

Flash forward ten years. ECMAScript is struggling to launch a new release of the language. Many of the browsers have given up and started creating their own, non-standard APIs. Web development is becoming increasingly difficult.

An engineer named John Resig creates a JavaScript framework called jQuery. At its core, it's a bunch of JavaScript helper functions that hide away all the if/else checks web developers have to do between the browsers. It lets us add events, grab DOM elements, and make AJAX calls.

jQuery becomes ubiquitous for web development. Over the next ten years, it remains the gold standard for doing JavaScript work!

Node.js

Around the same time, an engineer named Ryan Dahl announced an exciting project he had been working on. He called it Node.js and it is a:

JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser.

To simplify, it allowed you to run JavaScript on the server! Previously JavaScript had only ever been used for front-end applications. Node.js took v8, Chrome's JavaScript engine out of Chrome, and turned it into a fast and exciting web server.

jQuery vs node.js

While both technically use the JavaScript language. While jQuery is a front-end library that makes writing DOM selectors, event handlers, and AJAX easier to write cross-browser, node.js is a back-end runtime that lets you replace your Python, Ruby, or Java server with JavaScript!

The cool thing is that getting good with the JavaScript syntax will make you extra powerful now that you can use it for your back-end server and your front-end application!

Stable Node Versions

2021-02-22T00:00:00Z

If you're looking to find stable node versions, head over to nodejs.org and look for the button on the left side. That will always point to the current LTS (Long Term Support) version which you can download.

LTS versions of stable node mean they will get critical bug fixes for 30 months. You can read more on the node.js releases page which says:

Major Node.js versions enter Current release status for six months, which gives library authors time to add support for them. After six months, odd-numbered releases (9, 11, etc.) become unsupported, and even-numbered releases (10, 12, etc.) move to Active LTS status and are ready for general use. LTS release status is "long-term support", which typically guarantees that critical bugs will be fixed for a total of 30 months. Production applications should only use Active LTS or Maintenance LTS releases.

Using the "n" node module for stable node versions

Another approach you could take is to install the n module which helps you "Interactively Manage Your Node.js Versions". It also comes with a stable command so you can simply run:

npm install -g n
n stable

Get React Version

2021-02-22T00:00:00Z

Looking to get react version from one of your apps? You have a few different options!

Get React Version in code

If you're already in the JavaScript, you can print the current React version by doing:

import React, { version } from "react"

console.log(version)

This also works with the require syntax:

const React = require("react")
const version = React.version

console.log(version)

You can also check your package-lock.json or yarn.lock file!

cat package-lock.json | grep \"react\" -A 1

Or, if you are using Yarn:

cat yarn.lock | grep \"react\" -A 1

How to update node js

2021-02-21T00:00:00Z

Want to learn how to update node js? It really depends on how you installed it in the first place! Let's look at your options:

Option 1 (recommended) - NVM

The absolutely best way to install node js (and update node js later) is to use the Node Version Manager.

This will work even if you already have Node js installed some other way. You can just open up a terminal and run:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash

Note: For any installation help, check out their official README

And then run `nvm install YOUR-VERSION-OF-NODE. For example:

nvm install v15.9.0

And then set it to default by using:

nvm alias default v15.9.0

And you are good to go!

Option 2 - Official Installer

You can head over to the Node js website and grab either the latest LTS (Long Term Support) build or the absolutely latest release. If the version you want to update to is not on there you can view their releases page and if you have a different operating system you can find the download you need on their download page.

Conclusion

If you are looking for how to update node js, I really recommend taking a few minutes out of your day and moving over to the Node Version Manager. That way future updates will be a breeze! But if you need a specific binary version and don't want to use NVM. Feel free to check out the releases page above!

JavaScript if else syntax

2021-02-20T00:00:00Z

If you're looking for the JavaScript if else or if, else, else-if syntax - look no further!

if (1 + 1 === 2) {
  // This one will log
  console.log("Inside the if condition")
} else {
  console.log("Inside the else condition")
}

If you want an if, else, else-if condition in JavaScript it looks like:

if (2 + 1 === 2) {
  console.log("Inside the if condition")
} else if (2 + 1 === 3) {
  // This one will log
  console.log("Inside the else-if condition")
} else {
  console.log("Inside the else condition")
}

Increase Gatsby performance with Webpack Bundle Analyzer

2021-02-16T00:00:00Z

I've been using webpack bundle analyzer a lot lately.

Over the past few days, it started to feel a little sluggish when I would refresh. I remember when I first launched this version of the site on Gatsby and Netlify it felt lightning fast!

Measuring Gatsby Page Performance with Webpack bundle analyzer

Before I started diving in, I just wanted to see if I was correct that it had slowed down. I started up a production build on my local machine by running:

gatsby build
gatsby serve

Next I went to https://localhost:9000 (my gatsby dev server running in prod mode) and opened it in an Incognito* tab.

* This is important because browser extensions can really mess with the DevTools. If you want to get a fair audit, disable all your extensions or open the page in an Incognito window.

I went to the Network tab and did a refresh. Here's what I saw:

Really not great. I mean, not bad for a big feature rich application but this is just a simple blog. I swear it wasn't taking that long to load a few days ago!

Analyzing your Webpack bundle

I knew my site was loading slow. And I knew that the culprit must be too much JavaScript. But what was causing it? Where was all that JS coming from?

There is this amazing tool called Webpack Bundle Analyzer. It hooks into your Webpack build and displays a really nice UI showing you all the stuff inside your bundle and how big it is!

Luckily for me, someone already made a Gatsby plugin that sets Webpack Bundle Analyzer up for me! So all I had to do was

npm i gatsby-plugin-webpack-bundle-analyser-v2 -D

And then add it to my plugins list in my gatsby-config.js.

module.exports = {
  plugins: ["gatsby-plugin-webpack-bundle-analyser-v2"],
}

I ran gatsby build again and this is what I saw:

Yikes. What is Lottie!? It's taking up so much space and I don't remember installing anything by that name.

npm ls

Fortunately again, npm provides an awesome tool where you can give it a package name and it will tell you why that package is in your node_modules. So, for Lottie which we can see in the image above has a package name of "lottie-web", you can type:

npm ls lottie-web

And I got:

☁  jonkuperman.com [master] ⚡ npm ls lottie-web
jonkuperman@0.1.0 /Users/kuperman/workspace/jonkuperman.com
└─┬ react-dark-mode-toggle@0.0.10
  └─┬ lottie-react-web@2.2.2
    └── lottie-web@5.7.6

Oh no! My favorite new React component is slowing down my website with it's amazing animations and beautiful icons.

I could remove it. Replace it with a simple button like I used to have. But I really like it.

Gatsby Code Splitting

Gatsby uses React and Webpack. Webpack supports a feature called code splitting which is, according to their site:

Code splitting is one of the most compelling features of webpack. This feature allows you to split your code into various bundles which can then be loaded on demand or in parallel. It can be used to achieve smaller bundles and control resource load prioritization which, if used correctly, can have a major impact on load time.

That sounds like exactly what we need. Fortunately for us, the React team has already worked with the Webpack team and come up with a syntax that tells the bundler to split out an import and load it asynchronously. It's called React.lazy.

I went to my Header component, which contains the dark mode toggle (which contains lottie!) and it looked like this (simplified):

import React from "react"
import DarkModeToggle from "react-dark-mode-toggle"
const Header = props => {
  return (
    <>
      <div className="navigation">
        <DarkModeToggle />
      </div>
    </>
  )
}

All I had to do was switch it to the React.lazy syntax and Gatsby/React/Webpack would take care of the rest! The new syntax looks like:

import React, { Suspense } from "react"
// React.lazy syntax for importing
const DarkModeToggle = React.lazy(() => import("react-dark-mode-toggle"))
const Header = props => {
  return (
    <>
      <div className="navigation">
        {/* a cool syntax for specifying what HTML to display
                while the component is loading*/}
        <Suspense fallback={<div>Loading...</div>}>
          <DarkModeToggle />
        </Suspense>
      </div>
    </>
  )
}

Now if we load our site again we should see 1 more Network request than we had before and for a split second we should see "Loading..." before the DarkModeToggle comes into view.

The upside though is that our site loads quite a bit faster!

Looks like:

The Finish time went from 772ms to 236ms.
DOMContentLoaded went from 222ms to 36ms!
The Load time went from 530ms to 193ms.

Conclusion

If you're adding a bunch of dependencies and your Gatsby site gets slow:

Check the Network tab in the DevTools to make sure it's actually slow.
Install webpack-bundle-analyzer and run it against your site.
Run npm ls package-name to figure out where any surprise packages are coming from.
Wrap any big React Components that you don't need on page load in React.lazy

Setting up Gatsby Webmentions on your site

2021-02-14T00:00:00Z

I spent a lot of Sunday... ok pretty much all of Sunday setting up Webmentions on my Gatsby site so when people Tweet about my blog posts they show up like comments!

https://twitter.com/jkup/status/1360786533280800775

There are already quite a few articles on how to do this but I still got pretty stuck along the way so I figured I'd write another one.

TL;DR

Make an account at webmention.io. Link it to your Twitter account. This means making one of those rel="me" links like they suggest!
Make a Bridgy account. Link it to your Twitter as well.
Install this awesome Gatsby Plugin. Follow the instructions in the README and get your "token" from the webmention.io page above.
Copy literally all of my code from this file. Don't feel bad! I stole most of it from Max Stoiber. DO NOT TELL MAX.
In your blog-post.js file, import the util you just copy/pasted and call it (example below).
Copy my CSS too if you want! I stole that from a different person named Max!
Instead of running yarn develop or npm run develop you now have to run WEBMENTIONS_TOKEN=YOUR_TOKEN npm run develop. This is your life now. Update your deploy target too like your Netlify ENV variables or whatever.
Profit.

// blog-post.js
import WebMentions from "../utils/webmentions.js"
;<WebMentions url={location.href} />

Prior art

I was only able to figure this out because of some amazing blog posts. I'm only writing this post because I still managed to struggle to get things working so I'm hoping this might be helpful to someone.

This Jekyll Webmention Plugin
This post on setting up Webmentions with Eleventy
This post on setting up Webmentions with Svelte
Some code I stole from Max Stoiber that no longer works but is super close to working!
The Webmention Spec haha jk I didn't read the spec

Tools we'll need

brid.gy. This site uses social network APIs to find all mentions of your site and generate Webmentions for each mention.
webmention.io. A free, hosted service that receives and stores all the Webmentions Bridgy sends. This will also act as the API for our static Gatsby site!
gatsby-plugin-webmention. You can totally configure Webmentions yourself. You have to add some <link>`s to the <head> and configure your social network handles but also you can just install this handy plugin by Chris and save yourself the trouble!

The basic idea

At a high level, we want to set up brid.gy to watch Twitter for any tweets that mention our blog! When it finds one, it will send a Webmention to our site which webmention.io will see and add to it's database! That way, in client-side JavaScript we can hit webmention.io and give it a certain post and it will return to us all of the "likes" and "mentions" for that post which we can display however we want!

The implementation

1. Setting up third party services

Register our brid.gy and webmention.io accounts. For webmention.io you have to add a twitter link to your site with the rel="me" attribute.

If you get stuck on setting these up please holler at me! and I'll update this post.

2. Configuring our Gatsby site

The easiest way to do this is to copy your auth token from webmention.io, install gatsby-plugin-webmention and then copy paste the config file from the README and add it to your gatsby-config.js.

The other option is you can log into webmention.io and go to settings where you'll get 2 links to copy/paste into your site's head tag. For example, mine look like:

<link rel="webmention" href="https://webmention.io/jonkuperman.com/webmention" />
<link rel="pingback" href="https://webmention.io/jonkuperman.com/xmlrpc" />

Add those to the head by using react-helmet and you should be good to go!

Fetching the mentions

I took a lot of liberties here. Essentially, we'll want to hit two different webmention.io endpoints.

You'll want to load the count for your post. This is how many likes/retweets/mentions/replies your post got!

A few things to note here:

The api endpoint looks like https://webmention.io/api/count.json?target=${target} where target is the full URL of your blog post. I pass location.href into my <Webmentions> component from blog-post.js and then use that as the target.
As @swyx says in his blog post, make sure whatever you do, the target ends with a trailing slash or it won't work!
I smoosh all my likes and reposts together and also my mentions and replies (code below). That way I can show a nice heart icon followed by the total count of likes and reposts and then a nice message icon followed by mentions plus replies.

<span>
  <Heart color="#e0245e" />
  {type.like || 0 + type.repost || 0}
  <MessageCircle color="#17bf63" />
  {type.mention || 0 + type.reply || 0}
</span>

You'll want to load all the mentions so you can display them like comments!
The api endpoint for mentions is paginated and looks like https://webmention.io/api/mentions?page=${page}&per-page=20&sort-dir=up&sort-by=published&target=${target} where target is the full URL of your blog post and page is the current page (starting at 0) of the paginated api.

REMINDER: You can skip reading all of this and copy/paste the code directly from my repo!

I made one function for fetching the count and one for fetching the mentions themselves:

export const loadWebMentionCounts = async target => {
  return fetch(`https://webmention.io/api/count.json?target=${target}`)
    .then(res => res.json())
    .then(res => res.type)
}

export const loadWebMentions = async (target, page = 0) => {
  return fetch(
    `https://webmention.io/api/mentions?page=${page}&per-page=20&sort-dir=up&sort-by=published&target=${target}`
  )
    .then(res => res.json())
    .then(json => (Array.isArray(json.links) ? json.links : []))
}

Then I made my <Webmentions> component have a useEffect hook for each:

export default function WebMentions({ url }) {
  const [type, setType] = useState({})
  const [page, setPage] = useState(0)
  const [links, setLinks] = useState([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    async function loadPage() {
      loadWebMentions(url, page).then(returnedLinks => {
        setLoading(false)
        setLinks(links => links.concat(returnedLinks))

        if (returnedLinks.length === 20) {
          setPage(page + 1)
        }
      })
    }

    loadPage()
  }, [url, page])

  useEffect(() => {
    loadWebMentionCounts(url).then(data => setType(data))
  }, [url])
}

FAQ

I'm stuck

Please please please @mention me on Twitter! I'll do my best to help you out and then update this post!

Someone else wrote this better

Totally.

Some of my Webmentions aren't making it to my site

I'm seeing that too. For me at least they are picked up by Bridgy and it says they are "sent" but webmention.io never gets them. You can manually re-send them via Bridgy but I don't know why that happens.

Your code is bad

You sound like my manager.

Some of the build time examples like the Eleventy one have a fancy cache and make things faster

Yep.

I Tweeted my site link and it's not showing up

They take a while. Bridgy seems to poll Twitter every hour. If you're in a real hurry you can log in and force a re-poll but yeah it's a bit slow.

Webmention playground

2021-02-13T00:00:00Z

I added Webmentions to my site today! If you tweet about this page or reply to my tweet about it, you should show up in the comments section!

Everything might be broken so bear with me 😅

Introduction to async JavaScript

2021-02-10T00:00:00Z

I had an awesome meeting with my mentee today and we covered a lot of great stuff!

My awesome mentee: Can we go over async await tomorrow?
Me: Absolutely!
My awesome mentee: Actually, maybe asynchronous code in general?
Me: Let's do it!

A need for async

A situation a lot of new devs find themselves in is something like this:

I have two things. I want the second one to start only after the first one is finished! How can I do that?

Three options

When working with asynchronous code, you essentially have three architectural patterns you can choose from. We're going to cover all three. They are callbacks, Promises and async/await.

Example code

Let's make a contrived example (but not too contrived!) so we can repeat it with all three approaches.

Let's say we're going to:

Animate a list populating it one item at a time.
When that's finished, animate it again by flashing the results on and off.

We'll start with some very basic HTML.

<ul id="list"></ul>

Now we'll make each task a function like so:

// Select the <ul> we made above
const list = document.getElementById("list")

// Make a list of some data. In this case, animals!
const animals = ["cat", "dog", "bird", "fish", "cow", "sheep"]

// This function will go through the animals list and add a new item
// to the <ul> every 1 second.
function populateList(animals, index = 0) {
  setTimeout(() => {
    const animal = document.createElement("li")
    animal.innerText = animals[index]
    list.appendChild(animal)

    if (index < animals.length - 1) {
      populateList(animals, index + 1)
    }
  }, 1000)

  animateList()
}

// This function will toggle the visibility of the <ul> on and off
// creating a flashing animation!
function animateList() {
  let isVisible = true
  setInterval(() => {
    list.style.visibility = isVisible ? "hidden" : "visible"
    isVisible = isVisible ? false : true
  }, 2000)
}

populateList(animals, 0)

The problem here is the same as the one we defined above. Both populateList and animateList are working great. But we don't want the list to start animating until we are finished populating it!

Currently this isn't quite right. As you can see, we start flashing the list before it's fully populated!

Option 1, callbacks

The first approach we can take is passing populateList a callback function. We can make sure the callback function does not get called until the list is fully populated. That way we can write some code like:

populateList(animals, 0, callbackFunction)

function callbackFunction() {
  // Now it's safe to call
  animateList()
}

We can even tidy it up a bit by making the callback function inline. This is the exact same code only inlined.

populateList(animals, 0, () => {
  // Now it's safe to call
  animateList()
})

So with callbacks, our final code would look like:

const list = document.getElementById("list")
const animals = ["cat", "dog", "bird", "fish", "cow", "sheep"]

function populateList(animals, index = 0, callback) {
  setTimeout(() => {
    const animal = document.createElement("li")
    animal.innerText = animals[index]
    list.appendChild(animal)

    if (index < animals.length - 1) {
      // Notice we have to pass callback in each time we
      // call populateList
      populateList(animals, index + 1, callback)
    } else {
      // When we have no more populateList calls to make
      // Then we let the callback know we're finished!
      callback()
    }
  }, 1000)
}

function animateList() {
  let isVisible = true
  setInterval(() => {
    list.style.visibility = isVisible ? "hidden" : "visible"
    isVisible = isVisible ? false : true
  }, 2000)
}

populateList(animals, 0, () => {
  animateList()
})

And it's working!

Option 2, Promises

The Promise API allows us to wrap async code in a new Promise() and then we can call Promise.then on it, passing in a function which will be executed only when the Promise is finished.

A simple example:

const promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve(), 1000)
})

promise.then(() => {
  // This code will only run when the setTimeout is finished
  console.log("we finished!")
})

With Promises, instead of passing in a custom callback function, we can just wrap the setTimeout in a Promise and call resolve when it's complete. This is very similar but it makes the execution cleaner. We go from:

populateList(animals, 0, () => {
  animateList()
})

populateList(animals, 0).then(() => {
  animateList()
})

We'll still have to wrap the setTimeout in a Promise though for this to work. And then we have to extract the list updating functionality to a separate function so we can call it over and over without invoking a new Promise each time. So our full example becomes:

const list = document.getElementById("list")
const animals = ["cat", "dog", "bird", "fish", "cow", "sheep"]

function populateList(animals, index = 0) {
  return new Promise(resolve => {
    function updateList(animals, index) {
      setTimeout(() => {
        const animal = document.createElement("li")
        animal.innerText = animals[index]
        list.appendChild(animal)

        if (index < animals.length - 1) {
          updateList(animals, index + 1)
        } else {
          // When we have no more populateList calls to make
          // Then we let the Promise know we're finished!
          resolve()
        }
      }, 1000)
    }

    updateList(animals, index)
  })
}

function animateList() {
  let isVisible = true
  setInterval(() => {
    list.style.visibility = isVisible ? "hidden" : "visible"
    isVisible = isVisible ? false : true
  }, 2000)
}

populateList(animals, 0).then(() => {
  console.log("yay?")
})

It works again!

So, a little more heavy lifting up front but it does result in a nice clean API.

Option 3, async/await

Async functions are a great way to work with asynchronous code in JavaScript! They allow you to "flatten" out your code so you aren't dealing with inline callback functions or Promise.then blocks! They make the callsite so nice and clean. It will look like:

await populateList(animals, 0)
animateList()

It couldn't get cleaner than that! There's just one tiny caveat 😬

You can't call await without wrapping it in an async function. This means we'll have to wrap our previously "global" code in some kind of initialize function. Something like this will do.

async function init() {
  await populateList(animals, 0)
  animateList()
}

init()

And we're in business!

The final code looks like:

const list = document.getElementById("list")
const animals = ["cat", "dog", "bird", "fish", "cow", "sheep"]

function populateList(animals, index = 0) {
  return new Promise(resolve => {
    function updateList(animals, index = 0) {
      setTimeout(() => {
        const animal = document.createElement("li")
        animal.innerText = animals[index]
        list.appendChild(animal)

        if (index < animals.length - 1) {
          updateList(animals, index + 1)
        } else {
          // When we have no more populateList calls to make
          // Then we let the Promise know we're finished!
          resolve()
        }
      }, 1000)
    }

    updateList(animals, index)
  })
}

function animateList() {
  let isVisible = true
  setInterval(() => {
    list.style.visibility = isVisible ? "hidden" : "visible"
    isVisible = isVisible ? false : true
  }, 2000)
}

async function init() {
  await populateList(animals, 0)
  animateList()
}

init()

Getting fancier

If we wanted to get super fancy we could abstract the setTimeout itself to a function.

function timeout(ms) {
  return new Promise(resolve => setTimeout(resolve, ms))
}

And then we could await inside populateList itself like this!

const list = document.getElementById("list")
const animals = ["cat", "dog", "bird", "fish", "cow", "sheep"]

function timeout(ms) {
  return new Promise(resolve => setTimeout(resolve, ms))
}

async function populateList(animals, index = 0) {
  // Now we can await the entire timeout, no more nested inline functions!
  await timeout(1000)
  const animal = document.createElement("li")
  animal.innerText = animals[index]
  list.appendChild(animal)

  if (index < animals.length - 1) {
    return await populateList(animals, index + 1)
  } else {
    return true
  }
}

function animateList() {
  let isVisible = true
  setInterval(() => {
    list.style.visibility = isVisible ? "hidden" : "visible"
    isVisible = isVisible ? false : true
  }, 2000)
}

async function init() {
  await populateList(animals, 0)
  animateList()
}

init()

All I wanted was pretty links

2021-01-26T00:00:00Z

Before we get started, give this bad boy a hover.

It all started 8 months ago...

I was re-designing my website and found this page with a bunch of amazing CSS hover effects for links.

The Problem

I started looking into them and they all have one thing in common. They all require multiple elements to animate. This is unfortunate because I use which renders documents. So I author my pages like:

## Title

Some paragraph of text.

Another paragraph of text but this one has [a link](https://jonkuperman.com)

I really wanted pretty links but I did not want to wrap every link I write in a span by hand.

So I did what I normally do, I tweeted out a question to the universe and hoped for a response!

https://twitter.com/jkup/status/1252781941264392193

As luck would have it, the CEO of Gatsby saw my Tweet and replied:

https://twitter.com/kylemathews/status/1252793979319365633

Enter MDX

If you're not familiar, is a format that is similar to Markdown but it allows you to add JSX to your documents! This means that I would be able to make a React component like Anchor and then update my Markdown like so:

## Title

Some paragraph of text.

Another paragraph of text but this one has <Anchor title="a link" url="https://jonkuperman.com" />

Farewell, Remark

Unfortunately for me, I wasn't starting with a fresh Gatsby project. I've had this blog for a while and I'm using a lot of plugins that require Remark. The very format I'm trying to move away from!

Fortunately, the Gatsby docs are pretty great. This page on got me most of the way there! The allows you to still run most of your Remark plugins. There were a few that didn't work (like my automatic Tweet embeds!) but most of them had MDX alternatives like .

No small change

In the end, I ended up getting rid of a lot of Remark plugins. Partly this is due to the flexibility of MDX, but partly I was just using way too many plugins. Anyway the PR turned into a bit of a monster.

Making the anchor

I'll probably play with this more but as soon as I finished the upgrade I made a new file utils/mdx.js and created an Anchor component.

import React from "react"

export function Anchor({ url, title }) {
  return (
    <span className="cl-effect-5" id="cl-effect-5">
      <a href={url}>
        <span data-hover={title}>{title}</span>
      </a>
    </span>
  )
}

Then, in layout.js I passed the component in as a shortcode.

import { Anchor } from "../utils/mdx"

const shortcodes = { Anchor }

;<MDXEmbedProvider>
  <MDXProvider components={shortcodes}>{children}</MDXProvider>
</MDXEmbedProvider>

Finally, in my blog posts like pretty-links.md I can just do

## Title

Some paragraph of text.

Another paragraph of text but this one has <Anchor title="a link" url="https://jonkuperman.com" />

And now I have awesome links. The end.

Improving my content diet

2021-01-23T00:00:00Z

A few days before Christmas I found this amazing Twitter thread:

https://twitter.com/polina_marinova/status/1342213858795118592

It's a list of 10 questions that did, in fact, spark interesting dinner conversation! We had a few family members over (our quarantine pod during COVID) and we went through the list together!

One of the questions that stood out to me was:

https://twitter.com/polina_marinova/status/1342213859818557441

This was the first time I ever heard the phrase "content diet". The question sort of had me spinning at first. I read a lot. But I don't read a lot that I would consider "upper limit" content. I read blog posts, news articles, a few books and every once in a long while I read something that blows my mind. If David Brooks is right, I'm not doing myself enough favors!

Adding an upper limit book

I decided that I should, at any given time, be consuming some content that feels upper limit. I enjoy reading blog posts and news articles, so I'm not going to cut down on them. But I do want to always be reading one thing that is dramatically improving my content diet.

What upper limit content am I reading right now? by !

I figured working through a great book at all times would give me a constant upper limit and would therefore improve my mind! 😅

Never far from a great idea

I followed on Twitter when I found the original thread. A few weeks later I saw a YouTube clip in my Twitter timeline. A preview for an interview with an author. In the clip he talks about keeping piles of books in his office, his living room and his bedroom. He says he's not reading them all, but he loves surrounding himself with great books. He says that makes is so:

I'm never far from a good idea.

The entire interview is great. He talks about building a platform, the power of good habits and finding your own voice.

https://www.youtube.com/watch?v=rC13mXUORBs

What is your upper limit?

I'm not a huge fan of life hacking or self help content. But, the theory of maximum taste resonated with me. Also, surrounding myself with amazing books sounds like a fun idea! What do you all think? Do you believe in David's theory? What do you to do improve your content diet? Message me on , I'd love to hear your thoughts!

I made a political twitter account for a week

2020-11-24T00:00:00Z

I've always been interested in political Twitter. At the time of this writing, the Twitter account with the most followers is President Barack Obama's with a staggering 126.6 million followers.

With the 2020 election being dramatic and so drawn out, I found myself wanting to Tweet a lot and I'm always terrified of losing followers so I decided to make a brand new account just to Tweet about politics.

Enter @politikup.

The Beginning

So I made the account (which was an entire blog post of a process itself!). Then I went and followed a bunch of political accounts I like and some I hate and was off to the races!

Stage 1, Shouting into the abyss

I don't have a ton of followers on my main account. But, at the time of this writing @jkup has just over 9,000. I was pretty surprised with my new account how little interaction I'd get! To this day, I think my standalone Tweets have gotten 0 interactions. My replies have done pretty well but more on that later!

Twitter is a pretty lonely place for new signups. I kept getting kicked out of my account and having to do a Google reCAPTCHA to get back in. But I was pretty happy just liking and ReTweeting as much as I wanted with no fear of being judged!

Stage 2, Political Tweets go viral

On the flip side, early replies to Twitter accounts with many followers can get a LOT of traction. A few innocuous replies got hundreds of likes, dozens of retweets, and quite a few threats from (hopefully) spam #MAGA accounts. Here are a few examples:

https://twitter.com/politikup/status/1328503923989241857

https://twitter.com/politikup/status/1331310057569611779

Stage 3, I am drained

I think I noticed a feeling of fatigue on the first day. The news cycle is endless, there is a lot to be anxious about and replying to accounts just begets more replies. I did have a couple of positive conversations with hardcore Trumpers where I feel like we honestly came to some common grounds. I got blocked by quite a few accounts (including 2 senators!).

I'm going to stop using the account. It was an enjoyable outlet for a few days but something about Political Twitter is so noise heavy, so angry, so never ending that it's had a significant effect on me.

Stage 4, I want to help build, not critique or convince

Ever since Georgia went blue in this latest election, I've been reading a lot about Stacey Abrams. She served in the House of Representatives for 10 years and then in 2018 she ran for Governor of Georgia. After a highly contested election, she lost. And instead of wallowing in defeat she immediately went to work. She started organizations like Fair Fight and has devoted her life to fighting for Americans (Georgians in particular) to make sure they have a right to vote.

After all the major news networks called Georgia for President-elect Joe Biden, I began seeing all of these Tweets attributing the win got Stacey. Her tireless work fighting for voter rights paid off in a big way.

That got me thinking about how we spend our time. There is, without doubt, a big problem in America right now. As politicians attempt to subvert democracy and disenfranchise people in every state. One way of fighting against it is to call out this behavior! Another way to fight it is simply to vote for a better alternative. But the more I think about it, the more I want to spend my time building something amazing and inspiring like Stacey has. I don't want to waste my time quibbling with folks I disagree with. I want to help build something great and help folks I believe in!

Compiler Resources

2020-10-26T00:00:00Z

This is mostly a list for myself, but I thought it might be fun to share. I want to learn a lot more about parsers and compilers. Here is my current "To Learn" list with courses, videos and books (in no particular order)!

Best blog designs I want to steal everything from

2020-05-01T00:00:00Z

As I was going through rebuilding my blog, I spent a lot of time looking at other people's sites trying to get inspiration. Below is a list of my absolute favorite blog designs and my favorite thing about them.

1. joshwcomeau.com

What's not to love about this website? It might be my favorite personal blog design of all time.

Things I love about joshwcomeau.com

Light / Dark mode toggle
Amazing illustrated image of the author
Fun sounds!
Little interactive heart to click on each post

My favorite thing about it:

The links!

Seriously, look at what happens when you hover over one of these links:

I tried figuring out how these work. If you open the network panel in your devtools you'll see it doesn't make a request on hover. I think he must have some sort of build task that crawls his pages, finds links, takes screenshots of each link and then saves them to the post.

I've been thinking about recreating this just for fun but reading Josh's blog is always such a great experience!

2. wesbos.com

Wes literally just finished rebuilding his blog!

https://twitter.com/wesbos/status/1252618566139928576

Check out how amazing it looks:

Things I love about wesbos.com

The typography
The amazing breakpoints
The content! Free courses, premium courses, a podcast!

My favorite thing about it:

The open graph images

If you link to any of Wes' posts on Twitter or Facebook, you'll notice that the embedded image is actually a screenshot of the post you are linking to! You might be wondering:

Does Wes write a post, screenshot it and then save the file to his blog before publishing?

No, he doesn't! He has a Netlify function that runs on deploy that does this automatically for him! Check it out here!

Here is an example post:

https://twitter.com/wesbos/status/1252619804994703361

3. christopherbiscardi.com

Chris writes so much great content on his blog! It's full of amazing posts on JAMstack, MDX, Gatsby and more! And just look at it.

Things I love about christopherbiscardi.com

The rainbows!
It's so clean. Great use of space
This little guy

My favorite thing about it:

The Rainbows

Seriously, they are everywhere and I love them. Check out this little animation at the top as you scroll through an article.

4. chriscoyier.net

Chris is the owner of the amazing css-tricks website, but it's actually his personal site that I found inspiring!

Things I love about chriscoyier.net

It's so personal. I feel like I know a bit about him just from viewing his page.
It's right to the point. Need to contact? Write a guest post? Whatever it is, there's a link for that.

My favorite thing about it:

This form

Check this out!

Choosing a blogging platform: Gatsby vs. Wordpress vs. 11ty

2020-04-23T00:00:00Z

I have a little bit of a problem.

https://twitter.com/jkup/status/1252322493072920577

My Problem

There are really two parts to my problem. On the one hand, I love new technologies, blogging platforms are getting better at such an exciting pace and it's so much fun to explore them! On the other hand, I want to be blogging more and I love to procrastinate by redesigning my blog.

The Contenders

I've played with a lot of frameworks, but my main 3 favorites are WordPress, 11ty, and Gatsby.

WordPress

Founded in 2003, WordPress has been a fundamental part of the web for almost two decades! It's a full-fledged Content Management System that offers a great editing experience.

Pros

Beautiful WYSIWYG editor
A huge community of themes and plugins
Great security and caching plugins
Easily connects to any popular third-party services

Cons

Requires a server (more on this later)
Requires a database
Must be kept up to date or face security issues
Most hosts struggle to keep up with increased traffic (more on this later as well)
Being the most popular blogging platform, it's the most commonly targeted by attackers

The big problem that I have with WordPress is that it's a dynamic application. You need to get a web host running PHP and MySQL and you need to keep WordPress up to date as well as all of your plugins and themes.

If you forget to update, you are susceptible to any number of common attacks. I've had WordPress sites hacked many times when I forget to check-in and update them.

My last problem is also related to its dynamic nature. Since each visitor requires the server to make a MySQL connection, and MySQL has a limit to the number of concurrent connections so if you have an article get popular on Reddit or Hacker News your users may start seeing MySQL errors. This can be mostly avoided by using a good caching plugin.

11ty

11ty is a simplified take on static site generators. I've been a huge fan of static sites since Jekyll first came out in 2008. There's something so nice about your website consisting of only HTML and CSS.

Pros

Completely secure
Lighting fast page loads
Easy to find a host

Cons

No WYSIWYG. You have to edit your posts locally in a text editor with markdown
Although JavaScript is often seen as the enemy to web performance, there are some really neat things you can do to improve performance with JS.

Gatsby

A relatively new player on the scene, Gatsby takes an innovative approach to generating static sites. It comes with a rich plugin ecosystem that provides out of the box support for really cool things.

Pros

Progressively loading images
Offline page access
Prefetching linked pages

Cons

Slow build times (it's doing a lot of work!)
Slower initial page load (with faster consecutive loads)

My conclusion

After a lot of thought and experimentation, I decided to go with Gatsby and host my site on Netlify. I'm really happy with it so far.

Patreon layoffs seem cruel

2020-04-22T00:00:00Z

Yesterday, Patreon announced that it was laying off 13% of its workforce.

It's not particularly surprising news. With most cities sheltering in place and so many people out of work, the tech industry has not been immune. A quick glance at layoffs.fyi will show that many startups are falling on hard times.

Most of the companies facing hard times are in industries most affected by Coronavirus shutdowns. Groupon, Yelp, Eventbrite, etc. Some of them are in unrelated industries

March was Patreons best month in years

One of the things that makes this round of layoffs so strange, is last month Patreon wrote a blog post saying that

Average new patron growth across the US, UK, Canada, Germany, Australia, and Italy is up 36.2% compared to February

Hiring Freezes

With so many people out of work and so many tech companies instituting hiring freezes, it really is a terrible time to be laid off. So many of these companies are facing going out of business, which is totally understandable. But then Patreon went and released the following statement:

Over the past six weeks, Patreon has experienced a significant influx of new creators launching on the platform along with increased financial support from both their new and existing patrons. In March alone, we onboarded 50,000 new creators to the platform of which the average income was 60% higher than previous months. This surge, along with years of continuous growth, has put Patreon in a strong financial position to help creators successfully manage their creative businesses during this challenging time.

Although the business is in a strong cash position, we want to ensure that we can continue to support creators for many years to come. It is unclear how long this economic uncertainty will last and therefore, to prepare accordingly, we have made the difficult decision to part ways with 13% of Patreon’s workforce. This decision was not made lightly and consisted of several other factors beyond the financial ones. Prior to the pandemic, we had completed an in-depth performance review cycle and deployed a new company strategy – both exercises highlighted the need for different skill sets moving forward.

It was this combination of economic uncertainty, performance reviews and a shift in strategy that prompted us to make this change. Patreon is now on a path to long-term success and the business will emerge from this layoff even stronger, both financially and strategically.

Which makes it sound like Patreon has plenty of money and isn't at all in danger of going out of business. They just think they can make more money by laying folks off.

Performance Reviews

This is really the icing on the cake for me. In their official statement, they bring up performance reviews. Implying that the people they laid off were not top performers.

Why even mention this? It feels like a totally inappropriate insult aimed at people who have just gone through something terrible (you laying them off during a pandemic which has caused worldwide hiring freezes).

Wrapping it all up

So the world is in a difficult place. Many people are out of work and struggling to find jobs. Companies are going out of business and bleeding cash. Patreon is lucky enough to be in an industry that is doing better than normal during this crisis. They are having record breaking months.

Despite all of this, they've decided to go ahead and fire a bunch of people during these tough times. On top of all of that, they also want you to know that the folks they laid off were not top performers and that's why they are all being fired.

Stay classy, Patreon.

Avoid Rendering Empty Content with font-display: swap

2020-04-21T00:00:00Z

I've been working on rebuilding my website. I found this awesome font called Wotfard while browsing Josh W Comeau's site.

My first attempt

I wanted to add it to my new site so I added this to the top of my global.css file.

@font-face {
  font-family: "Wotfard";
  src: url("/fonts/wotfard-regular-webfont.eot");
  src: url("/fonts/wotfard-regular-webfont.eot?#iefix") format("embedded-opentype"),
    url("/fonts/wotfard-regular-webfont.woff2") format("woff2"),
    url("/fonts/wotfard-regular-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: "Wotfard", sans-serif;
}

This worked great! Except for this pesky problem where every time I refresh or load a new page, for a tiny split second, I see a bunch of empty content where the text is supposed to be!

This is happening because the custom web font takes a split second to load after the page loads. And since all of our text is set to this custom font, our site doesn't have anything to display until the font is finished loading!

Fortunately, this can be fixed with a single line of CSS!

Introducing font-display: swap

All I did was add font-display: swap; to my @font-face block.

@font-face {
  font-family: "Wotfard";
  src: url("/fonts/wotfard-regular-webfont.eot");
  src: url("/fonts/wotfard-regular-webfont.eot?#iefix") format("embedded-opentype"),
    url("/fonts/wotfard-regular-webfont.woff2") format("woff2"),
    url("/fonts/wotfard-regular-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Wotfard", sans-serif;
}

and voila! no more flash of unstyled content. Now it loads all of my text with a system font until the web font is ready, and then swaps it in! So it's a little jumpy but better than before!

Working with people who are smarter than you

2020-02-27T00:00:00Z

When I was just starting in tech, every job was brimming with people smarter than me! I couldn’t imagine anything better. I was young, new to programming and so eager to learn.

As the years went by, I did pretty well for myself. I was lucky enough to work at several great tech companies such as Twitter, Brave, and Adobe. Eventually, I was promoted to Senior Software Engineer and even put on a few teams as Tech Lead.

Somewhere along the line, my mentality shifted. I went from eager to learn from all of my smart, talented peers to afraid of getting fired when my manager realizes I’m a lot less smart than other people at my level.

Sometimes, working with a smarter coworker is easy to justify. They’ve been at the company a lot longer, they’re older, they’ve been coding for more years, etc. Other times, they’re just a lot better than I am.

A lot of this is honestly just my insecurity and imposter syndrome. But I thought it might be nice for me to share some of the ways I cope with these feelings.

Adding Value

As I get older, I spend more and more time thinking about the value I’m able to add at work. For some people, a lot of the value they add is by writing code. Others add value by writing documentation, mentoring new hires or interfacing with other teams. I try to focus on the areas where I can add the most value and work hard on improving those!

When I work with someone better at coding than I am, I try to find other necessary tasks that come with the work we’re doing. I put extra effort into taking care of those and let the other person excel where they shine while I try to do the same.

A Rising Tide

Another important lesson is getting away from having a Scarcity Mindset. Something in my brain feels threatened by working with people better at my job than me. But there’s nothing to feel threatened by. It always amazes me how giving honest, appreciative feedback to my managers about the excellence of my coworkers not only doesn’t affect me negatively but often comes back to me in the form of positive feedback from my coworkers.

A rising tide lifts all boats. One of my goals for 2020 is to get back to my beginner mindset. Feeling lucky to get to work with a ton of smart people and being earnestly excited to learn from them!

Do you struggle with having a scarcity mindset? Do you feel threatened working with folks that are a lot smarter? How do you cope with it? Let me know in the comments!

10 years is a long time

2020-02-14T00:00:00Z

Losing weight, running a marathon, learning to code, saving money. These are important goals many of us share. They are also goals that, for the most part, cannot be achieved in a short amount of time.

So many of us crave instant gratification. Perhaps me more than most. As I get older, and more and more of my goals involve long term dedication, I struggle with working so hard for something and not having it weeks, months or even years later.

Losing Weight

I’ve been struggling with my weight since my late twenties. It’s constantly going up and down and I find it very difficult to stick to a plan. It still blows my mind that I can be so good and eat so well for an entire week and still not look or feel any different. It’s been a very challenging mental shift for me to know that I’m investing in my health and while it won’t come overnight, it won’t come at all if I don’t put in the work!

I’m a highly motivated person who struggles to stick to one interest for very long. Unfortunately, this makes achieving long term goals even more difficult! Being “super” good on my diet for 3 days is not nearly as important as being “pretty” good for months.

Discipline is more important than motivation.

Running a marathon

Last year, I read The Rise of the Ultra Runners and was so inspired and motivated to start running!

https://twitter.com/jkup/status/1165329008843612160

My girlfriend and I started running every day after work for as long as we could. A few things happened:

I got really bad blisters
My pace and stamina improved each week!
Despite that, I started getting disappointed with how far away from being able to run a marathon I was.

https://twitter.com/jkup/status/1169847804602118144

Behind the scenes, the motivation dissipated and all that was left was my discipline (or lack thereof). Running is such a great example of disciplined, long term goals because even the best runners I know are training hard all year to shave a few seconds off their pace! Imagine that, running 5 days a week for a year just to shave 10 minutes off their marathon pace. Do you have that sort of discipline? Do I?

Long story short I fell off my running streak. After a few months I started running again and there was a bit of good news. I didn’t fall all the way back to zero! I think a bright side to learning things that take a long time to perfect is that stopping for a few months isn’t a huge deal!

Learning to code

I’ve been coding for years. I really have put the work in. Luckily, since coding is my profession, it forces me to keep practicing long after the motivation has faded. This has been such a blessing for me. It’s amazing to look back on where I was 10 years ago (knowing literally nothing about code) and see how far I’ve come.

I want to find ways to keep myself accountable for my long term goals when I don’t have the luxury of relying on practice to survive!

Saving money

Last year I decided it was time for me to be a little smarter with my money. I’ve always been good at living within my means but I’ve never invested money before. I got motivated and read a lot of books on the stock market, real estate investing, savings accounts and retirement. I learned a ton of interesting things, but most of those I’ll save for another post! One saying that stuck with me about stock market investing was:

It’s about time in the market, not timing the market.

To me, this is a perfect analogy for there being no better way to get good at something than investing consistent amounts of time into it for many years. Take this example I found when reading about compound interest.

If you put $100 a month in a stock market index fund (assuming an average return of 10% annually) starting when you are 25 years old, by the time you turn 65 you would have $535,636.99! That’s the power of doing something consistently for a long period of time.

This is especially amazing because after 10 years of saving, you’d only have $19,384.28. After 20 years you’d still only have $69,402.75. It’s really all about keeping your money in the market for a long period of time.

I’m struggling to change my mindset. To find sustainable diets, savings plans, and running schedules! To remind myself that it’s not about how fast I’ll be able to run next week, or next month. To know that putting in the work will absolutely yield great results, it’s only a matter of time!

Suspend a React Component from the DevTools

2020-02-11T00:00:00Z

Today we’re going to learn how to manually suspend a React Component by using the React DevTools.

Let’s start by using create-react-app to make a very basic Hello World.

Open your terminal and type in the following:

npx create-react-app suspense-demo
cd suspense-demo
npm start

That should open a new tab in your browser and you should see the Create React App welcome page, which looks like this.

Now let’s open the suspense-demo folder in your favorite text editor. Inside the src/ folder next to App.js create a new file and call it Suspendable.js. Put the following inside.

import React from "react"

function Suspendable() {
  return <div>Finished Loading!</div>
}

export default Suspendable

Now open App.js and let’s replace the current contents with your Suspendable component, wrapped in a React.Suspense tag.

import React from "react"
import "App.css"

const Suspendable = React.lazy(() => import("./Suspendable"))

function App() {
  return (
    <div className="App">
      <React.Suspense fallback="Loading...">
        <Suspendable />
      </React.Suspense>
    </div>
  )
}

export default App

Now if you go back to your browser you’ll see your Suspense component loading, but it likely happens too quickly and you’ll never see “Loading…” you’ll just see “Finished Loading!”.

If you want to test the React component in its suspended state you can do so by installing the React DevTools and opening up the Components tab. Click on your Suspendable component in the list and then click the little stopwatch icon in the sidebar to suspend the component.

Click the highlighted button to suspend a React component.

A weird login flow

2020-02-03T00:00:00Z

I’m a pretty big UFC fan. I like to watch older fights and for that reason I have a subscription to UFC Fight Pass.

A few months ago they did a website redesign and among other things changed their URL from UFC to UFC Fight Pass. When this redesign launched my password manager stop recognizing it and when I couldn’t log in I went through their “Forgot my password” flow.

I entered my email address and off it went! I got the email in my inbox just like usual and when I clicked on “Reset your password” it took me to the new site. The only problem was, it looks like they forgot to implement the Reset your password screen on the new redesign! It just redirects to the home screen.

Luckily, after the redirect, you are logged in with a temporary password so you can still watch videos!

Four months later, I’m actually loving this workflow. I still haven’t been able to set a password but I’ve gotten really fast at going to their site, “resetting” my password and clicking the link in my email. Why do we need passwords again?

My first month as a remote worker

2020-02-01T00:00:00Z

At the end of December I moved from San Francisco to Florida (of all places) and started working remotely for Adobe.

It’s been quite a transition, moving across the country, buying a house and starting to work remote. I figured while it’s still fresh in my head I’d document some of the pros and cons I’ve found so far!

Pros

More focus time

Working for a West Coast tech company from the East Coast means that literally no one is online until about noon my time. That means that if I start working at 9am EST, I have three entire hours with no emails, no Slack messages and no meetings. I’m really enjoying this time to put on my headphones and get some great work done.

Less distractions

While I do miss the social interactions of being in the office, open offices are just terrible places to focus. When I finish a meeting at home, I turn off the app and am immediately back in my empty office working. No one coming up to talk, no overhearing arguments in the office, it’s a lot easier to concentrate on what I need to do.

Housework and errands

When I was working from the office, I had a really hard time motivating myself to get errands done before or after work. Running to the post office, doing laundry, cleaning the house were all things I’d tend to put off. Working from home makes taking care of those issues a lot easier. Especially (and this is a con as well) since I no longer have a group of coworkers to eat lunch with, it’s easy to run around the house doing some chores after I eat.

Time with my family

It’s also been really nice having my girlfriend and my dogs one room away at all times. Luckily, our new house is big enough that we’re not working right on top of each other. But it really is nice to order some food and meet in the living room and have a nice lunch all together!

Cons

Loneliness

As I get older, more and more of my friends and social interactions involve work or work friends. Between not being at an office and moving to a state where I know so few people, it’s taken a pretty big toll on my social life.

Feeling disconnected from coworkers

So far I’ve been having a pretty easy time keeping up to date on my work tasks. I’m having a much harder time keeping up to date with my coworkers on a social level. Last week some of my teammates dialed me in to a video call while they had coffee! Going forward, I’d like to set up regular 1:1’s with them to feel more connected.

Work-Life balance

If I take a full lunch break and finish at 5, I feel like I didn’t work enough. If I stay online until 8pm (5pm PST) I feel like I worked way too much. I’m going to have to work a lot harder on finding the perfect balance to strike going forward.

Conclusion

I’m really loving working remotely. I think it’s going to be a great way forward for me. It does come with its own unique challenges and I’ll have to develop some new routines and systems to handle those.

Any of you work remotely? Got any tips? I’d love to hear them in the comments!

Outages and blame culture

2019-12-09T00:00:00Z

If you work with software, you experience bugs. If you work with cloud software, sometimes those bugs cause outages.

Every job I've had has some approach to "dealing" with outages. There's usually some form of an on-call person. Maybe there is an Operations team to help organize (paging the on-call, getting other teams involved, deducing root cause, writing up a report). This is great because if you don't document, it's easy to have rose-colored glasses and feel like things don't happen "that often."

Some companies even make you present your "findings" after each outage. This can have value in showing your company what happened and what steps you are talking to prevent it from happening again. That's the critical thing, answering two questions:

What could we do to prevent something like this from happening again?
How can we be 100% sure this exact thing won't happen again?

Some companies put you through the wringer. They force you to write multiple docs explaining what happened and attend many public meetings where you must fall on your sword and tell rooms full of strangers how you messed up and that it will "not happen again."

This might seem like a good idea! The more punishing you are around outages, the more you drive the point home that we all must have a very high quality bar. The problem is, it backfires in a lot of strange and nasty ways.

Companies that overly punish outages end up with blame game cultures. If a client team and a service team are on a call about an outage, and whoever takes the "blame" will have to write docs and attend meetings for the next three weeks, it becomes a very high stakes game of hot potato.

Another problem with this culture is many outages don't have a single team at fault. Maybe a client team was misusing an API, but that API wasn't documented, or returned an incorrect error code!

TL;DR Companies should be careful about how much they punish teams for having outages and flexible enough to understand that many outages share blame across multiple teams. It's better to focus on these three things alone:

What happened?
How can we prevent that specific thing from ever happening again?
Are there any things we learned that could help us prevent similar things from happening?

And call it a day.

Managing Immutable State with Object Spread

2019-12-01T00:00:00Z

There are a lot of great libraries for managing immutable state in your web apps. Redux and Immer are two great examples.

When workings with libraries like these, you often need to create functions that take in the current state object and a piece of new data and return a new state object for which the only difference is the piece of new data.

Let's look at a quick example:

const state = {
  users: [
    {
      id: 1,
      name: "User 1",
    },
    {
      id: 2,
      name: "User 2",
    },
  ],
  topics: [
    {
      id: 1,
      title: "Topic 1",
      description: "My first topic",
    },
    {
      id: 2,
      title: "Topic 2",
      description: "My second topic!",
    },
  ],
}

const newUser = {
  id: 3,
  name: "User 3",
}

const addUser = (state, newUser) => {
  state.users.push(newUser)
  return state
}

This works totally fine. But if we look at this line

state.users.push(newUser)

We can see that we are mutating the state object, by pushing a new item onto the users array.

Mutable vs Immutable

For those not familiar, let's take a look at what we mean by mutability. Say you have an array of numbers:

const arr = [1, 2, 3, 4, 5]

And you want to add 1 to each number. You could do this by mutating or changing the existing array:

const arr = [1, 2, 3, 4, 5]
for (let i = 0; i < arr.length; i++) {
  arr[i] = arr[i] + 1
}

console.log(arr) // [2, 3, 4, 5, 6]

Another approach we could take is to create a new array with our changes, while keeping the original one around. We can use a method like Array.prototype.map to accomplish this.

const arr = [1, 2, 3, 4, 5]
const newArr = arr.map(i => i + 1)

console.log(newArr) // [2, 3, 4, 5, 6]
console.log(arr) // [1, 2, 3, 4, 5]

The second approach is what we'd consider immutable as we never change (or mutate) the original array.

Why have immutable state?

Many popular libraries encourage an immutable approach to state for a few reasons.

Performance. View libraries like React which compute changes can move a lot faster with immutable data structures.
Undo. Allowing users to "undo" an action is the holy grail of state management. With immmutable data structures, we can just keep the previous state around (or even just a log of state changes) and easily allow users to revert a change.
Bugs. There are a whole category of bugs that can be caused when mutating an object directly. An immutable approach ensures there is never invalid state and in the worst case state can always be reverted.
Testability. Immutable state changes are dead simple to test.

Making the addUser function immutable with Object Spread

One great language feature for this type of work is the spread syntax. This allows us to write really clean code for immutable state operations that generate new objects comprised mostly of values of the original object. Let's take a look at our addUser function again.

const state = {
  users: [
    {
      id: 1,
      name: "User 1",
    },
    {
      id: 2,
      name: "User 2",
    },
  ],
  topics: [
    {
      id: 1,
      title: "Topic 1",
      description: "My first topic",
    },
    {
      id: 2,
      title: "Topic 2",
      description: "My second topic!",
    },
  ],
}

const newUser = {
  id: 3,
  name: "User 3",
}

const addUser = (state, newUser) => {
  return {
    ...state,
    users: [...state.users, newUser],
  }
}

const newState = addUser(state, newUser)
console.log(newState) // 3 users
console.log(state) // old state with 2 users

Compiled vs. Interpreted Languages

2019-11-08T00:00:00Z

I've been reading this fantastic book called "Crafting Interpreters" lately by Bob Nystrom.

It talks about the different types of programming languages. We can think about all compilers as falling into three categories.

Compilers that output machine code.
Compilers that output bytecode and need to be interpreted.
Compilers that output an intermediary format and then hand it off to another compiler.

There is a lot I find interesting about the book so far, but one thing that I was fascinated to read about the differences between "compiled" and "interpreted" languages.

Bob talks about if you are building a new language, you need to need to:

Build a parser to handle your new syntax and build an AST.
Write any transformations or optimizations.
Build a generator to generate output code.

This third step is the really interesting one!

An example of a compiler that does #3 from above (Compilers that output an intermediary format and then hand it off to another compiler) would be Babel. Babel basically works like this.

Let users author ES6+ JavaScript.
Turn it into an AST.
Transform the AST into the equivalent ES5 AST.
Convert the AST to JavaScript.
Hand that JavaScript off to a different compiler (the one in your browser).

So, in this case, the "output code" that Babel generates is just JavaScript! But what if we wanted to make a language that actually generated CPU instructions?

Compiled vs. Interpreted

Compiled

If you are building a language that must run on multiple processor architectures (let's say x86 and ARM), you'll need to write two different "back ends" or "generators." These will both take the same AST your compiler created and output CPU specific instructions (this is a lot of work!). These are what we refer to as "compiled" languages. Every compiled language has a custom generator for each CPU architecture they support.

Interpreted

Another approach would be to build a single generator. Instead of having it generate code for an existing CPU architecture, you could have it generate code for a "virtual" or "hypothetical" CPU. This is what Java does and we refer to the output as "bytecode."

If you create an interpreted language, you'll need to also build a "virtual machine" so that your hypothetical CPU code can run on real CPUs. This is where things are kind of neat but a little confusing.

If you build a VM (something capable of executing your generated bytecode) in an existing language, then the VM can run on any CPU architecture that compiles that language. So you can:

Write in a custom langauge
Compile it to your custom bytecode
Make a small VM in a popular language like C
Now your custom language has only one generator and can run anywhere that C can compile!

I thought this was an interesting distinction and made the different approaches C++ and Java took seem a lot more like a reasonable trade-off as opposed to a mystery.

Numbering a list with CSS!

2019-10-13T00:00:00Z

Yesterday, I converted my site to 11ty. I decided to use their base blog starter and when I did, I noticed this cool UI they have for listing your posts.

When I went to change the styling, I noticed that these numbers get added, entirely with CSS! Let's take a look at how they do this.

This works by combining CSS counter increment with CSS counters. All you have to do is this:

<ol class="myList">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ol>

And then style it with

.myList li {
  counter-increment: start-from 1;
}
.myList li:before {
  content: "" counter(start-from, decimal-leading-zero) ". ";
}

Eleventy has me feeling more connected with my website

2019-10-12T00:00:00Z

I've been using Gatsby on my site for ages. I enjoy using it. It's pretty easy to get up and running with, it loads quickly, and it comes with some great plugins like this one for optimizing images. It deploys easily and has all the benefits of a static site (you don't have to worry about maintaining your own databases or servers). The thing is, though, there's a lot to it.

There's no way of avoiding having to use React, Helmet, GraphQL, a complicated build system, tons of plugins, etc. After a fair amount of time, I started feeling pretty disconnected from the HTML/CSS I was trying to produce on my blog.

I'd heard a ton of great stuff about 11ty, a new static site generator that's supposed to be very simple to use. So I figured I'd give it a try. I moved my site over pretty quickly using their base blog repo, and so far, it feels great being a little "closer to the wire" to my content.

We'll see how it goes.

Easier Type Safety in JavaScript Classes

2019-07-09T00:00:00Z

I work with TypeScript a lot at Adobe. It's really great for so many reasons, but I often find new shorthand tricks I wish I knew when I was getting started! This is one of those tricks.

Let's say you have a Person class with a few properties.

class Person {
  constructor(name, age, job) {
    this.name = name
    this.age = age
    this.job = job
  }
}

Now you can call it like this.

const person = new Person("Jon", "31", "Programmer")
console.log(person.name) // Jon

Now let's say you want to add some types to this class, so it errors if people misuse it.

You might try doing something like:

class Person {
  constructor(name: string, age: number, job: string) {
    this.name = name
    this.age = age
    this.job = job
  }
}
const person = new Person("Jon", "31", "Programmer")
console.log(person.name) // Jon

But then you'd get an error saying.

Property 'name' does not exist on type 'Person'.

So then you might try to move the type declarations to the class properties like this.

class Person {
  name: string
  age: number
  job: string

  constructor(name, age, job) {
    this.name = name
    this.age = age
    this.job = job
  }
}
const person = new Person("Jon", "31", "Programmer") // Does not error :(
console.log(person.name) // Jon

Now this compiles! But, it no longer has the type information for the constructor parameters, so it doesn't error even though you pass in a string for age instead of a number.

So then you might take this long-winded approach and add duplicate type declarations to the class properties as well as the constructor parameters.

class Person {
  name: string;
  age: number;
  job: string;

  constructor(name: string, age: number, job: string) {
    this.name = name;
    this.age = age;
    this.job = job;
  }
}
const person = new Person('Jon', '31, 'Programmer'); // Errors! :)
console.log(person.age); // Jon

And now we get the type safety we've been looking for!

The shorthand I learned today is that you can add access modifiers to your constructor parameters and then TypeScript will automatically set those parameters as class values when initialized.

class Person {
  constructor(public name: string, public age: number, public job: string) {}
}
const person = new Person('Jon', '31', 'Programmer'); // Errors! :)
console.log(person.age); // Jon

TypeScript's access modifiers allow you to set class properties as public, private and protected. All class properties are public by default, but this neat trick will save you a good amount of lines while preserving type safety.

Writing a Babel plugin to convert arrow functions to function expressions

2018-11-20T00:00:00Z

I'm still (slowly) learning how to work with ASTs and tools that use them. Today I wanted to learn how Babel takes arrow functions like:

const log = message => console.log(message)

and converts it into ES5 function expressions like:

const log = function (message) {
  console.log(message)
}

Hilariously, Acorn (the JavaScript parser that Babel uses) comes with a built-in arrowFunctionToExpression method!

If we head over to astexplorer.net and type in the code that we want to transform, we get an Abstract Syntax Tree like:

{
  "type": "File",
  "start": 0,
  "end": 45,
  "loc": {
    "start": {
      "line": 1,
      "column": 0
    },
    "end": {
      "line": 2,
      "column": 44
    }
  },
  "program": {
    "type": "Program",
    "start": 0,
    "end": 45,
    "loc": {
      "start": {
        "line": 1,
        "column": 0
      },
      "end": {
        "line": 2,
        "column": 44
      }
    },
    "sourceType": "module",
    "interpreter": null,
    "body": [
      {
        "type": "VariableDeclaration",
        "start": 1,
        "end": 45,
        "loc": {
          "start": {
            "line": 2,
            "column": 0
          },
          "end": {
            "line": 2,
            "column": 44
          }
        },
        "declarations": [
          {
            "type": "VariableDeclarator",
            "start": 7,
            "end": 44,
            "loc": {
              "start": {
                "line": 2,
                "column": 6
              },
              "end": {
                "line": 2,
                "column": 43
              }
            },
            "id": {
              "type": "Identifier",
              "start": 7,
              "end": 10,
              "loc": {
                "start": {
                  "line": 2,
                  "column": 6
                },
                "end": {
                  "line": 2,
                  "column": 9
                },
                "identifierName": "log"
              },
              "name": "log"
            },
            "init": {
              "type": "ArrowFunctionExpression",
              "start": 13,
              "end": 44,
              "loc": {
                "start": {
                  "line": 2,
                  "column": 12
                },
                "end": {
                  "line": 2,
                  "column": 43
                }
              },
              "id": null,
              "generator": false,
              "async": false,
              "params": [
                {
                  "type": "Identifier",
                  "start": 13,
                  "end": 20,
                  "loc": {
                    "start": {
                      "line": 2,
                      "column": 12
                    },
                    "end": {
                      "line": 2,
                      "column": 19
                    },
                    "identifierName": "message"
                  },
                  "name": "message"
                }
              ],
              "body": {
                "type": "CallExpression",
                "start": 24,
                "end": 44,
                "loc": {
                  "start": {
                    "line": 2,
                    "column": 23
                  },
                  "end": {
                    "line": 2,
                    "column": 43
                  }
                },
                "callee": {
                  "type": "MemberExpression",
                  "start": 24,
                  "end": 35,
                  "loc": {
                    "start": {
                      "line": 2,
                      "column": 23
                    },
                    "end": {
                      "line": 2,
                      "column": 34
                    }
                  },
                  "object": {
                    "type": "Identifier",
                    "start": 24,
                    "end": 31,
                    "loc": {
                      "start": {
                        "line": 2,
                        "column": 23
                      },
                      "end": {
                        "line": 2,
                        "column": 30
                      },
                      "identifierName": "console"
                    },
                    "name": "console"
                  },
                  "property": {
                    "type": "Identifier",
                    "start": 32,
                    "end": 35,
                    "loc": {
                      "start": {
                        "line": 2,
                        "column": 31
                      },
                      "end": {
                        "line": 2,
                        "column": 34
                      },
                      "identifierName": "log"
                    },
                    "name": "log"
                  },
                  "computed": false
                },
                "arguments": [
                  {
                    "type": "Identifier",
                    "start": 36,
                    "end": 43,
                    "loc": {
                      "start": {
                        "line": 2,
                        "column": 35
                      },
                      "end": {
                        "line": 2,
                        "column": 42
                      },
                      "identifierName": "message"
                    },
                    "name": "message"
                  }
                ]
              }
            }
          }
        ],
        "kind": "const"
      }
    ],
    "directives": []
  },
  "comments": []
}

When making Babel plugins or anything that parses ASTs we use a Computer Science concept called the Visitor Pattern. Basically, we pick the "type" of node we want to grab onto and then do operations on it. In our case we can our app goes File -> Program -> VariableDeclaration -> ArrowFunctionExpression! Perfect, we'll grab ArrowFunctionExpression.

export default function (babel) {
  const { types: t } = babel

  return {
    visitor: {
      ArrowFunctionExpression(path) {
        return path.arrowFunctionToExpression()
      },
    },
  }
}

Most of that is just boilerplate. The important bit is that we hook into all ArrowFunctionExpression's and call arrowFunctionToExpression() on them. That results in the following output:

const log = function (message) {
  return console.log(message)
}

Perfect! I promise I'll try something more challenging next time :)

Getting Started with ASTs

2018-11-18T00:00:00Z

Hey all!

I've wanted to move my blog back to my domain for a while now. I miss writing a lot. Medium is excellent but makes me feel like everything I write is high stakes and needs to polish.

Lately, I'm interested in Abstract Syntax Trees. If you're not familiar, they are a data format used by programs like Babel, ESLint, and Webpack. ASTs are a tree representation of code. Let's take a look at a small example.

We can head over to AST Explorer and type any JavaScript we want into the top left panel. Then we'll see the equivalent AST in the top right panel.

Here is some JavaScript:

console.log("Hello World!")

And the AST:

{
  "type": "Program",
  "start": 0,
  "end": 28,
  "range": [0, 28],
  "body": [
    {
      "type": "ExpressionStatement",
      "start": 0,
      "end": 28,
      "range": [0, 28],
      "expression": {
        "type": "CallExpression",
        "start": 0,
        "end": 27,
        "range": [0, 27],
        "callee": {
          "type": "MemberExpression",
          "start": 0,
          "end": 11,
          "range": [0, 11],
          "object": {
            "type": "Identifier",
            "start": 0,
            "end": 7,
            "range": [0, 7],
            "name": "console"
          },
          "property": {
            "type": "Identifier",
            "start": 8,
            "end": 11,
            "range": [8, 11],
            "name": "log"
          },
          "computed": false
        },
        "arguments": [
          {
            "type": "Literal",
            "start": 12,
            "end": 26,
            "range": [12, 26],
            "value": "Hello World!",
            "raw": "'Hello World!'"
          }
        ]
      }
    }
  ],
  "sourceType": "module"
}

ASTs are an intermediary representation of your code. They allow you to do things like transpilation, linting or bundling. I'm especially interested in contributing to some of these projects. I've been spending a lot of my free time learning more about ASTs, languages, and compilers in general.

Here are some of the resources I've found helpful:

The Babel Plugin Handbook It's somewhat out of date but full of great information for making Babel plugins and understanding important concepts like the Visitor Pattern.
Code Transformation and Linting with ASTs This course by Kent C. Dodds is excellent for beginners who want to get their feet wet making some plugins for ESLint and Babel.
Language Implementation Patterns This book is excellent, although a bit on the heavy side. It talks about the shared patterns across all languages and compiles and offers straightforward examples of each.
Compilers: Principles, Techniques, and Tools The "Dragon" book. This is the de-facto book in our industry when it comes to writing compilers. I haven't finished it yet so I'll hold off on my thoughts until then!

Have you done any work with ASTs or compilers? Did you find any helpful resources that I didn't mention here? Drop me a comment on Twitter @jkup! I'd love to hear from you.

Lighthouse Error: Content is not sized correctly for the viewport

2018-11-18T00:00:00Z

If you're like me, you probably spend quite a bit of time chasing those perfect 100's in Lighthouse. One error I've run into multiple times is Content is not sized correctly for the viewport.

This error can occur for multiple reasons. The Lighthouse rule checks

window.innerWidth === window.outerWidth

Sometimes you have some quirky CSS causing this problem but something that's happened to me time and time again is leaving my browser tab zoomed in. If you zoom in our out before running a Lighthouse Audit, it can report back a false positive for content not being correctly sized for the viewport.

https://twitter.com/jkup/status/1064354253831958529

This is because the value of window.innerWidth changes as you zoom in or out but window.outerWidth stays the same!

So make sure you cmd+0 (or ctrl+0) before running that audit!

Add a Service Worker to Jekyll blog on GitHub Pages

2018-11-18T00:00:00Z

I need to refresh my blog!

...famous last words

After a few days of researching all the latest and greatest technology, I ended up back where I started. Running a Jekyll blog on GitHub Pages. Although there are a lot of great options out there, I'm pretty lazy, and this approach still works great!

One thing I was excited about with an alternative like Gatsby or Next.js was taking advantage of some of the new web APIs like Service Workers and Manifest files. Luckily I found a great looking plugin which generates Service Workers for you!

Not So Fast

I installed the PWA plugin, configured it, and noticed it running smoothly in development! It couldn't have been easier. Unfortunately, when I went to deploy it to production, I didn't see the Service Worker, and the app was not available offline!

It seems like while GitHub pages host Jekyll sites easily, they run Jekyll in "safe mode" which disallows the use of many plugins. Back to the drawing board.

My next thought was to check out Workbox. Workbox is an initiative by the folks at Google to make Service Worker generation and customization easy.

I've used Workbox before with JS heavy apps alongside build tools like Gulp and Webpack. The integration with these build tools is seamless, but they didn't have a clean option for Jekyll.

Introducing workbox-cli!

Workbox provides an out of the box solution for apps that don't use Webpack or Gulp. It's a standalone CLI app that can be installed with npm install workbox-cli -g and then used with a command like workbox wizard. The wizard generates a workbox-config.js file which then can be used to generate a service-worker.js file. Here is my lightweight configuration:

module.exports = {
  globDirectory: "./_site",
  globPatterns: ["**/*.{html,css,png,ico,xml,json,js}"],
  swDest: "./sw.js",
}

Which generates something like this:

/**
 * Welcome to your Workbox-powered service worker!
 *
 * You'll need to register this file in your web app and you should
 * disable HTTP caching for this file too.
 * See https://goo.gl/nhQhGp
 *
 * The rest of the code is auto-generated. Please don't update this file
 * directly; instead, make changes to your Workbox build configuration
 * and re-run your build process.
 * See https://goo.gl/2aRDsh
 */

importScripts("https://storage.googleapis.com/workbox-cdn/releases/3.6.3/workbox-sw.js");

/**
 * The workboxSW.precacheAndRoute() method efficiently caches and responds to
 * requests for URLs in the manifest.
 * See https://goo.gl/S9QRab
 */
self.__precacheManifest = [
  {
    "url": "2018/11/18/content-is-not-sized-correctly-for-the-viewport.html",
    "revision": "b8296e61e61b180e1b4f7606c332d27a"
  },
  {
    "url": "2018/11/18/getting-started-with-asts.html",
    "revision": "9a7f7ec5aee1b59c98179f4eee0c4051"
  },
  {
    "url": "css/style.css",
    "revision": "5a5ff92978aed905a5cfcd43acdd3ed1"
  },
  {
    "url": "favicon-16x16.png",
    "revision": "c11b060a3fc097bb5dfa397801696181"
  },
  {
    "url": "favicon-32x32.png",
    "revision": "4106c0929ea4e86af8b4c32b3c5cb005"
  },
  {
    "url": "favicon-96x96.png",
    "revision": "258c7595bce80a8c608e51ae227d84eb"
  },
  {
    "url": "favicon.ico",
    "revision": "b4edcd8aecd2b771aec9a39cb032f740"
  },
  {
    "url": "feed.xml",
    "revision": "a4e7f5bdfb297a383c7e6e513abdb5a8"
  },
  {
    "url": "google115b0b3efae5b385.html",
    "revision": "4be3d71ff251a338c77a1e0d2e263e53"
  },
  {
    "url": "images/icons/icon-128x128.png",
    "revision": "406286c197ab21ec8bfc84bef3bbfd92"
  },
  {
    "url": "images/icons/icon-144x144.png",
    "revision": "05d0ef9821328286268e681a4edb649d"
  },
  {
    "url": "images/icons/icon-152x152.png",
    "revision": "5319ce81e0070ed214e0904053d91a43"
  },
  {
    "url": "images/icons/icon-192x192.png",
    "revision": "6738ac38beff3020bc1478994b6b1dd1"
  },
  {
    "url": "images/icons/icon-384x384.png",
    "revision": "2bd87bce217800ce8611c965b4e16c5c"
  },
  {
    "url": "images/icons/icon-512x512.png",
    "revision": "068ef79122e182e250ea12d541204655"
  },
  {
    "url": "images/icons/icon-72x72.png",
    "revision": "efe5da2908f53b6704e8e31a5691c6c0"
  },
  {
    "url": "images/icons/icon-96x96.png",
    "revision": "d992f5f38ea810ae6d062138b3070909"
  },
  {
    "url": "index.html",
    "revision": "4a2eab3f48167712ece3bdaea38f88bf"
  },
  {
    "url": "manifest.json",
    "revision": "cf78eefd76455d552c13a40594d9476c"
  },
  {
    "url": "workbox-config.js",
    "revision": "5a236654f477f68ae3829b7f219715db"
  }
].concat(self.__precacheManifest || []);
workbox.precaching.suppressWarnings();
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});

The specific thing to note (which makes this work well with Jekyll) is that Workbox gathers its list of files from the generated _site/ directory. If Workbox wrote the sw.js file to that directory it would just get deleted on the next Jekyll serve. Instead it reads from _site/ and writes to ./ so that the generated file will be put back in _site/ by Jekyll serve.

Does anyone have a better approach?

Staying Mostly Safe Online

2016-11-14T00:00:00Z

Staying Mostly Safe Online

2016 has become the year of the data breach. With massive hacks affecting ADP, the Department of Homeland Security, the Internal Revenue Service, LinkedIn and Myspace to name a few. It’s more important than ever before to talk about staying safe online.

The Electronic Frontier Foundation has a great page dedicated to educating users on “Surveillance Self Defense” but I’ve always wished they would be more liberal with a cheat sheet of good general tools you can use to stay safe(er) online. So here is mine:

Passwords

One of the best things you can do to stay safe online is to have secure and unique passwords for all of your sites.

Password Managers

The idea of memorizing dozens of different passwords for all of your websites is overwhelming! Luckily there is no need to. I recommend downloading a password manager immediately (1Password if you only need Mac/Windows and Lastpass if you need Linux support).

Password managers help you out by easily allowing you to generate long and unique passwords for each site you visit. You only have one master password to remember and then you simply “unlock” passwords for sites as you use them.

These password managers have the added advantage autocompleting login forms but only autocompleting when you are on the correct domain! This means they will not only help you with hard to crack passwords but help you avoid Phishing attempts where bad sites make themselves look like good sites in an attempt to get your login credentials.

General rules

Aside from using a password manager the general rules for passwords are easier to remember if you understand how passwords are stolen in the first place.

There are two main types of password attacks which can be mitigated by choosing a “strong” password.

Brute Force: This type of attack uses a computer program to try as many passwords as possible until it finally gets it. This means common passwords (Password123) and short passwords are easier to crack. So make yours long and uncommon
Dictionary Attack: This type of attack uses a list of common words in an attempt to speed up figuring out your password. This means a password like (MySecretPass) will be a lot easier to crack than (1lk2j3b). So at least add some randomness to your password

1Password Home Screen

Browsing

Browsing the internet makes you vulnerable to many different types of attacks. Fortunately there are tools available to make browsing the web a lot safer!

Here are the things that can go wrong while browsing the internet and tools I recommend to mitigate risks.

You are growing the web on an unsecured wireless network and someone is sitting there reading all your secret data (man-in-the-middle attack)

The easiest thing you can do here is invest in a good Virtual Private Network (VPN). I personally use ExpressVPN but I’ve heard great things about Private Internet Access as well! They cost about $7 a month and are essentially just a little app you put on your phone and computer that will keep you safe on public networks.

VPN’s also give you protection from your Internet Service Provider. If you’d rather Comcast not know what you are doing online, a VPN will encrypt all of your traffic and keep your privacy.

You are being tracked by advertising companies on every site you visit. Sometimes they even collude to share your data with each other. They know what you are shopping for, what illnesses you have and use that information to hike up prices and target you for advertising.

The easiest thing to do here is use a browser that prevents that sort of tracking. I use Brave browser (confession: I also work there!) but if you are happy with Chrome or Firefox you can supplement with plugins such as:

Adblock Plus helps by stopping bad ads and trackers from making it through to your browser.
Disconnect stops trackers and malware and makes the web faster!
HTTPS Everywhere Forces website to send you data securely if possible.

Last shameless Brave plug: You get all that and more for free by simply using the Brave browser.

Authentication

This section relates to the password section above but it really is a separate issue.

Most websites these days offer 2 Factor Authentication (2FA). An easy way to think about 2FA is by thinking about entering your password as 1 factor, so this approach has you enter your password and then it requires a second factor.

The most common approach is that websites will send you a text message with a short code. So you not only need your username and password but you’ll also need your cell phone to log into your account.

This is great because even if someone cracked your password with one of the approaches above they still wouldn’t be able to access your account!

I highly recommend setting up 2FA with every one of your accounts that allows it.

You can find a list of websites that offer 2fa on twofactorauth.org.

Sharing Styles with React and Aphrodite

2016-11-01T00:00:00Z

Lately I’ve been using Khan Academy’s Aphrodite in a lot of my projects. React and Aphrodite work very well together! (although React is not a requirement) and makes managing CSS a lot easier!

Using React and Aphrodite together makes each component look something like this:

import React, { Component } from "react"
import { StyleSheet, css } from "aphrodite"
import logo from "./logo.svg"

const styles = StyleSheet.create({
  App: {
    textAlign: "center",
  },

  AppLogo: {
    animation: "AppLogoSpin infinite 20s linear",
    height: "80px",
  },

  AppHeader: {
    backgroundColor: "#222",
    height: "150px",
    padding: "20px",
    color: "white",
  },

  AppIntro: {
    fontSize: "large",
  },
})

class App extends Component {
  render() {
    return (
      <div className={css(styles.App)}>
        <div className={css(styles.AppHeader)}>
          <img src={logo} className={css(styles.AppLogo)} alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className={css(styles.AppIntro)}>
          To get started, edit <code>src/App.js</code> and save to reload.
          <button>Click Me</button>
        </p>
      </div>
    )
  }
}

export default App

What I love about these two together is that your styles are colocated with your JavaScript components. In practice, this means that it’s often trivial to find and fix style issues as once you’ve found the component, you’re already in the right file!

Coming from a Sass / LESS background one of the things I missed most was being able to easily share styles via creating and importing specific files like Buttons.less and then including them wherever they are needed!

Aphrodite allows you to pass styles as props, something like this:

class App extends Component {
    render() {
        return <Marker styles={[styles.large, styles.red]} />;
    }
}

class Marker extends Component {
    render() {
        // css() accepts styles, arrays of styles (including nested arrays),
        // and falsy values including undefined.
        return <div className={css(styles.marker, this.props.styles)} />;
    }
}

const styles = StyleSheet.create({
    red: {
        backgroundColor: 'red'
    },

    large: {
        height: 20,
        width: 20
    },

    marker: {
        backgroundColor: 'blue'
    }
};

So therefore Marker gets its styling from App. The only issue here is that you’ll have to pass your shared styles all the way down through your app if a lower component needs something from its parent.

In order to work around that I had an idea for creating individual .js files that export themselves as an Aphrodite StyleSheet object. That way you can create something like:

import { StyleSheet } from "aphrodite"

export default StyleSheet.create({
  Button: {
    background: "red",
  },
})

and then later in your app:

import React, { Component } from "react"
import { StyleSheet, css } from "aphrodite"
import ButtonStyles from "./styles/Buttons"
import logo from "./logo.svg"

const styles = StyleSheet.create({
  App: {
    textAlign: "center",
  },

  AppLogo: {
    animation: "AppLogoSpin infinite 20s linear",
    height: "80px",
  },

  AppHeader: {
    backgroundColor: "#222",
    height: "150px",
    padding: "20px",
    color: "white",
  },

  AppIntro: {
    fontSize: "large",
  },
})

class App extends Component {
  render() {
    return (
      <div className={css(styles.App)}>
        <div className={css(styles.AppHeader)}>
          <img src={logo} className={css(styles.AppLogo)} alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className={css(styles.AppIntro)}>
          To get started, edit <code>src/App.js</code> and save to reload.
          <button className={css(ButtonStyles.Button)}>Click Me</button>
        </p>
      </div>
    )
  }
}

export default App

It seems to work nicely so far. I’d love to hear your thoughts!

Check out this demo project if you’d like to see an example!

The Life of a PHP Developer

2016-02-14T00:00:00Z

People are really mean about PHP.

I read this great article the other day about How False Stereotypes Turn Into Technical “Truths”

Subjective perceptions about languages impact more than just debates between idling programmers, affecting important decisions like hiring and funding.

That really got me thinking about the community perception of PHP.

Today I was listening to a JavaScript Jabber episode with Jenn Schiffer and she had a few awesome comments about how judgmental people are when it comes to technology and how chasing trends often detracts from making cool things that people want to use.

Learning how to program

Although JavaScript is quickly filling this role, there are a number of reasons new developers are drawn to PHP:

You want to build a website or application on a shared host.
All of the books and videos you buy involve working on the LAMP stack.
All of the entry-level job postings you see are for PHP developers.

Everybody hates PHP

Here are some examples of the negativity surrounding PHP in the programming community:

PHP Sadness: An entire site devoted to tracking things that are ‘sad’ about PHP.
PHP: a fractal of bad design: Another article complaining about how broken PHP is.
Why does PHP suck? Another, similar article.

I don’t really have the energy to find any more of these but all over Hacker News and Reddit there are quotes like:

If you learn PHP today, you should most definitely be ostracized.

You start questioning whether or not you chose a bad language.

Everything is built on PHP

Maybe you start doubting yourself, thinking that you bet on a bad horse. It seems like everyone loves Clojure and Haskell and JavaScript and no one likes PHP. Maybe you just got lucky landing your first job?

Maybe you start poking around the internet, what projects are actually built with PHP?

Facebook
WordPress
Yahoo
Wikipedia
4chan

It’s kind of ridiculous. A large portion of the worlds largest websites are written in PHP. It seems just inarguable that PHP is a worthwhile and practical language choice for making web applications, but I digress…

It’s not 2004 anymore

A lot of these criticisms of PHP are predicated on things the language was missing when they last looked in the early 2000’s.

PHP has classes now and can do proper OOP. There are great frameworks like Laravel and Symfony.

PHP has a package manager which pulls from an enormous archive of open source packages.

PHP has great testing frameworks. Unit testing frameworks like PHPUnit and Behavioral testing like Behat and Codeception.

Some of the complaints in the aforementioned links are definitely reasonable. There are inconsistencies in the language, and there are certainly languages out there without as many problems but PHP holds up really well when you consider its age, flexibility and what it was designed for.

The effect on developers

It is incredibly discouraging not being taken seriously as a developer despite working on serious development projects. It’s really taken its toll on the community.

It often feels like PHP developers end up in insular micro-communities. Feeling unwelcome in the larger software engineering community they frequently have their own meetups, their own user groups and their own conferences.

Anecdote

Sometimes I really do get tired of the judgment. Despite thinking that PHP is a perfectly fine language, I often think about abandoning PHP development entirely just so I don’t have to deal with the judgment anymore.

When I was younger I looked weird. I had dyed dreadlocks, facial piercings and patched clothing. I really liked looking that way, but it was exhausting.

Taking college classes, applying for internships, starting my own company. It was a constant distraction. The best case scenario was being ‘surprisingly professional’ for someone that ‘looks like I do’.

10 years later, same problem — different distraction. You know a lot about compsci for a PHP developer. Bleh.

No end in sight

Unfortunately, I really don’t see this problem going away. Often times, people are just complaining about PHP because it’s a popular thing to do. But unfortunately I don’t see it stopping any time soon.

It really is unfortunate, and creates a chicken-egg situation. If PHP developers are made to feel terrible, they will leave and there will be less and less great developers working with PHP.

ssh_exchange_identification: read: connection reset by peer

2015-10-07T00:00:00Z

This tutorial is meant to help troubleshoot connection reset by peer issues you might have while using SSH.

Ever tried to SSH into your server and seen an error like this?

ssh_exchange_identification: read: Connection reset by peer

The first thing you should always do if SSH fails is try again with verbose logging on. Just try something like this:

ssh username@address.com -vv

If the problem is on your client’s side, some sort of error should show up in that log. If you aren’t seeing anything useful in there, the problem may be with your server.

The Tricky Part

So, how do you get on your server if you cant ssh!?

If you’re lucky, your host will provide you with some sort of shell access via their web UI. If not, they should at least offer some alternative method for access. That part you’ll need to figure out for yourself.

After You Get Access

If you want to see everything that SSH is doing on the server side, here’s what you can try ( assuming Debian or Ubuntu here ):

sudo service ssh stop
sudo /usr/sbin/sshd -d

That will show you a real time log of everything that happens to SSH. If, as I suspect, you are banned from your server ( fail2ban or some other program has put your IP in /etc/hosts.deny ) you should see something like this in the log:

debug1: Connection refused by tcp wrapper

It could mean a number of things, but very likely you’re being blocked by hosts.deny. The simplest way to test would be to put an allow all in hosts.allow

vi /etc/hosts.allow

and put in something like:

sshd: ALL

Then try re-connecting. If that was your problem, try re-configuring fail2ban or whatever you have on your server that is sticking IPs into hosts.deny. If not, keep Googling! 😉

Jon Kuperman

Chatting with an old friend

# The Web Behind

# A lucky break

# A bargain at any price

# It's nice to hear your voice

C++ Pointers for JavaScript/TypeScript Developers

# Introduction

# Memory Management: The Fundamental Difference

# Stack vs. Heap: Where Variables Live

# When to use Stack vs. Heap

# What Are Pointers, Really?

# How This Differs From JavaScript References

# Pointer Syntax and Operations: The Basics

# 1. Declaring Pointers

# 2. Getting an Address with &

# 3. Dereferencing with *

# 4. Null Pointers

# 5. Pointer Arithmetic

# Memory Safety and Modern Languages

# References vs Pointers: The C++ Alternative

# Void Pointers and Type Casting

# C++ Type Casting vs. TypeScript Type Assertions

# In TypeScript:

# In C++:

# Pointers and Arrays: Two Sides of the Same Coin

# Memory Allocation: Manual Management

# Smart Pointers: Modern C++ to the Rescue

# When to Use Each Type of Smart Pointer

# Use std::unique_ptr when:

# Use std::shared_ptr when:

# Use std::weak_ptr when:

# JavaScript's WeakRef vs C++'s weak_ptr

# Smart Pointer Best Practices

# Function Pointers and Callbacks

# Common Pitfalls: Where JavaScript Developers Stumble

# Practical Examples: From JavaScript to C++

# Linked List Implementation

# Event Handling

# Conclusion

My first year living in London

# The move

# Arriving in London

# Settling in

# My dad visits

# The bad times

# Back to fun!

# New Beginnings

# Portugal

# My family visits

# Helsinki

# TC39 in Bergen

# Back in London

# Isle of Skye

# Kelly's sister visits

# TPAC in Seville

# Conclusion

JavaScript format number

# Format numbers with Regular expressions

# JavaScript format number with toLocaleString

# Format JavaScript numbers with NumberFormat

# Conclusion

Musings on Developer Relations

# DevRel is all selfies and conferences, right?

# 1. Conference talks are only a tiny part of the job

# 2. It's difficult work that requires your authentic self

# 3. Content switching between marketing and engineering is hard

# 4. Internal advocacy is as important as external

# My predictions for DevRel in 2022 and beyond

# 1. Internal advocacy is going to blow up

# 2. People will start moving into leadership roles from DevRel

GitHub find which PR deleted a file

# An example

# Step 1: Find the commit that deleted the file

# Step 2: Grab the git SHA

# Step 3: A cool GitHub URL

# Step 4: Click the PR

Chasing accurate analytics: Server-side vs client-side analytics

# What's the problem?

# Server-side analytics

The Web Behind

A lucky break

A bargain at any price

It's nice to hear your voice

Introduction

Memory Management: The Fundamental Difference

Stack vs. Heap: Where Variables Live

When to use Stack vs. Heap

What Are Pointers, Really?

How This Differs From JavaScript References

Pointer Syntax and Operations: The Basics

1. Declaring Pointers

2. Getting an Address with &

3. Dereferencing with *

4. Null Pointers

5. Pointer Arithmetic

Memory Safety and Modern Languages

References vs Pointers: The C++ Alternative

Void Pointers and Type Casting

C++ Type Casting vs. TypeScript Type Assertions

In TypeScript:

In C++:

Pointers and Arrays: Two Sides of the Same Coin

Memory Allocation: Manual Management

Smart Pointers: Modern C++ to the Rescue

When to Use Each Type of Smart Pointer

Use `std::unique_ptr` when:

Use `std::shared_ptr` when:

Use `std::weak_ptr` when:

JavaScript's WeakRef vs C++'s weak_ptr

Smart Pointer Best Practices

Function Pointers and Callbacks

Common Pitfalls: Where JavaScript Developers Stumble

Practical Examples: From JavaScript to C++

Linked List Implementation

Event Handling

Conclusion

The move

Arriving in London

Settling in

My dad visits

The bad times

Back to fun!

New Beginnings

Portugal

My family visits

Helsinki

TC39 in Bergen

Back in London

Isle of Skye

Kelly's sister visits

TPAC in Seville

Conclusion

Format numbers with Regular expressions

JavaScript format number with toLocaleString

Format JavaScript numbers with NumberFormat

Conclusion

DevRel is all selfies and conferences, right?

1. Conference talks are only a tiny part of the job

2. It's difficult work that requires your authentic self

3. Content switching between marketing and engineering is hard

4. Internal advocacy is as important as external

My predictions for DevRel in 2022 and beyond

1. Internal advocacy is going to blow up

2. People will start moving into leadership roles from DevRel

An example

Step 1: Find the commit that deleted the file

Step 2: Grab the git SHA

Step 3: A cool GitHub URL

Step 4: Click the PR

What's the problem?

Server-side analytics

Client-side analytics

Client-side vs Server-side comparison

Accuracy

Ease of use

Performance

What is a visitor, anyway?

What are these bots doing?

Client-side server-side analytics