DEV Community: @lukeocodes 🕹👨‍💻

Time to Leave? Time to Rebuild! Making Twitter2.0

@lukeocodes 🕹👨‍💻 — Mon, 12 Aug 2024 13:31:20 +0000

The most critical features of a new social network for users fed up with Musk and Twitter, are as follows;

Import Twitter's archive.zip file
Easy as possible to sign up
Similar if not identical user features

Less critical but definitely helpful features of the platform;

Ethically monetised and moderated
Make use of AI to help identify problematic content
Blue tick with the use of Onfido or SMART identity services

In this post, we'll focus on the first feature. Importing Twitter's archive.zip file.

If you'd rather not read my waffle and get straight to the juicy, here is the repo I published this script to;

lukeocodes / twitter-archive-extractor

Turn the data in your Twitter archive download into JSON.

Twitter Archive Extractor

This Go program extracts and processes JavaScript files from a ZIP archive, specifically targeting files in the /data directory. It replaces certain window. assignments with var data = and outputs the JSON representation of the processed data.

How It Works

The program opens a ZIP file specified as a command-line argument.
It scans for JavaScript files within the /data directory.
For each JavaScript file, it replaces any window. assignments (e.g., window.__THAR_CONFIG = {) with var data =.
It then uses the goja JavaScript interpreter to execute the modified script and extract the data variable.
The extracted data is marshaled into JSON format and output to the console.

Todo

Select a destination for export
- separate files? via an ORM to a database?
Release to go.dev

Prerequisites

Ensure you have Go installed on your system.

Setup

Clone this repository or download the source files.
Navigate to the project directory.
…

View on GitHub

The file

Twitter haven't made your data all that easy to obtain. It's great that they give you access to it (legally, they have to). The format is crap.

It actually comes as a mini web archive and all your data is stuck in JavaScript files. It is more of a web app than convenient storage of data.

When you open up the Your archive.html file you get something like this;

Note: I made the descision pretty early on to build using Next.js for the site, Go and GraphQL for the backend.

So, what do you do when your data isn't structured data?

Well, you parse it.

Creating a basic Go script

Head on over to the official docs on how to get started with Go, and set up your project directory.

We're going to hack this process together. It seems one of the most important features to attract people who feel too attached to TwitterX.

First step is to create a main.go file. In this file we'll GO (hah) and do some STUFF;

os.Args: This is a slice that holds command-line arguments.
os.Args[0] is the program's name, and os.Args[1] is the first argument passed to the program.
Argument Check: The function checks if at least one argument is provided. If not, it prints a message asking for a path.
run function: This function simply prints the path passed to it, for now.



package main

import (
    "fmt"
    "os"
)

func run(path string) {
    fmt.Println("Path:", path)
}

func main() {
    if len(os.Args) < 2 {
        fmt.Println("Please provide a path as an argument.")
        return
    }

    path := os.Args[1]
    run(path)
}

At every step, we'll run the file like so;



go run main.go twitter.zip

If you don't have a Twitter archive export, create a simple manifest.js file and give it the following JavaScript.



window.__THAR_CONFIG = {
  "userInfo" : {
    "accountId" : "1234567890",
    "userName" : "lukeocodes",
    "displayName" : "Luke ✨"
  },
};

Compress that into your twitter.zip file that we'll use throughout.

Read a Zip file

The next step is to read the contents of the zip file. We want to do this as efficiently as possible, and reduce time data is extracted on the disk.

There are many files in the zip that don't need to be extracted, too.

We'll edit the main.go file;

Opening the ZIP file: The zip.OpenReader() function is used to open the ZIP file specified by path.
Iterating through the files: The function loops over each file in the ZIP archive using r.File, which is a slice of zip.File. The Name property of each file is printed.



package main

import (
    "archive/zip"
    "fmt"
    "log"
    "os"
)

func run(path string) {
    // Open the zip file
    r, err := zip.OpenReader(path)
    if err != nil {
        log.Fatal(err)
    }
    defer r.Close()

    // Iterate through the files in the zip archive
    fmt.Println("Files in the zip archive:")
    for _, f := range r.File {
        fmt.Println(f.Name)
    }
}

func main() {
    // Example usage
    if len(os.Args) < 2 {
        log.Fatal("Please provide the path to the zip file as an argument.")
    }

    path:= os.Args[1]
    run(path)
}

JS only! We're hunting structured data

This archive file is seriously unhelpful. We want to check for just .js files, and only in the /data directory.

Opening the ZIP file: The ZIP file is opened using zip.OpenReader().
Checking the /data directory: The program iterates through the files in the ZIP archive. It uses strings.HasPrefix(f.Name, "data/") to check if the file resides in the /data directory.
Finding .js files: The program also checks if the file has a .js extension using filepath.Ext(f.Name).
Reading and printing contents: If a .js file is found in the /data directory, the program reads and prints its contents.



package main

import (
    "archive/zip"
    "fmt"
    "io/ioutil"
    "log"
    "os"
    "path/filepath"
    "strings"
)

func readFile(file *zip.File) {
    // Open the file inside the zip
    rc, err := file.Open()
    if err != nil {
        log.Fatal(err)
    }
    defer rc.Close()

    // Read the contents of the file
    contents, err := ioutil.ReadAll(rc) // deprecated? :/ 
    if err != nil {
        log.Fatal(err)
    }

    // Print the contents
    fmt.Printf("Contents of %s:\n", file.Name)
    fmt.Println(string(contents))
}

func run(path string) {
    // Open the zip file
    r, err := zip.OpenReader(path)
    if err != nil {
        log.Fatal(err)
    }
    defer r.Close()

    // Iterate through the files in the zip archive
    fmt.Println("JavaScript files in the zip archive:")
    for _, f := range r.File {
        // Use filepath.Ext to check the file extension
        if strings.HasPrefix(f.Name, "data/") && strings.ToLower(filepath.Ext(f.Name)) == ".js" {
            readFile(f)
            return // Exit after processing the first .js file so we don't end up printing a gazillion lines when testing
        }
    }
}

func main() {
    // Example usage
    if len(os.Args) < 2 {
        log.Fatal("Please provide the path to the zip file as an argument.")
    }

    path:= os.Args[1]
    run(path)
}

Parse the JS! We want that data

We've found the structured data. Now we need to parse it. The good news is there are existing packages for using JavaScript inside Go. We'll be using goja.

If you're on this section, familiar with Goja, and you've seen the output of the file, you may see we're going to have errors in our future.

Install goja:



go get github.com/dop251/goja

Now we're going to edit the main.go file to do the following;

Parsing with goja: The goja.New() function creates a new JavaScript runtime, and vm.RunString(processedContents) runs the processed JavaScript code within that runtime.
Handle errors in parsing



package main

import (
    "archive/zip"
    "fmt"
    "io/ioutil"
    "log"
    "os"
    "path/filepath"
    "strings"
)

func readFile(file *zip.File) {
    // Open the file inside the zip
    rc, err := file.Open()
    if err != nil {
        log.Fatal(err)
    }
    defer rc.Close()

    // Read the contents of the file
    contents, err := ioutil.ReadAll(rc) // deprecated? :/ 
    if err != nil {
        log.Fatal(err)
    }

    // Parse the JavaScript file using goja
    vm := goja.New()
    _, err = vm.RunString(contents)
    if err != nil {
        log.Fatalf("Error parsing JS file: %v", err)
    }

    fmt.Printf("Parsed JavaScript file: %s\n", file.Name)
}

func run(path string) {
    // Open the zip file
    r, err := zip.OpenReader(path)
    if err != nil {
        log.Fatal(err)
    }
    defer r.Close()

    // Iterate through the files in the zip archive
    fmt.Println("JavaScript files in the zip archive:")
    for _, f := range r.File {
        // Use filepath.Ext to check the file extension
        if strings.HasPrefix(f.Name, "data/") && strings.ToLower(filepath.Ext(f.Name)) == ".js" {
            readFile(f)
            return // Exit after processing the first .js file so we don't end up printing a gazillion lines when testing
        }
    }
}

func main() {
    // Example usage
    if len(os.Args) < 2 {
        log.Fatal("Please provide the path to the zip file as an argument.")
    }

    path:= os.Args[1]
    run(path)
}

SUPRISE. window is not defined might be a familiar error. Basically goja runs an EMCA runtime. window is browser context and sadly unavailable.

ACTUALLY Parse the JS

I went through a few issues at this point. Including not being able to return data because it's a top level JS file.

Long story short, we need to modify the contents of the files before loading them into the runtime.

Let's modify the main.go file;

reConfig: A regex that matches any assignment of the form window.someVariable = { and replaces it with var data = {.
reArray: A regex that matches any assignment of the form window.someObject.someArray = [ and replaces it with var data = [
Extracting data: Running the script, we use vm.Get("data") to retrieve the value of the data variable from the JavaScript context.



package main

import (
    "archive/zip"
    "fmt"
    "io/ioutil"
    "log"
    "os"
    "path/filepath"
    "regexp"
    "strings"

    "github.com/dop251/goja"
)

func readFile(file *zip.File) {
    // Open the file inside the zip
    rc, err := file.Open()
    if err != nil {
        log.Fatal(err)
    }
    defer rc.Close()

    // Read the contents of the file
    contents, err := ioutil.ReadAll(rc)
    if err != nil {
        log.Fatal(err)
    }

    // Regular expressions to replace specific patterns
    reConfig := regexp.MustCompile(`window\.\w+\s*=\s*{`)
    reArray := regexp.MustCompile(`window\.\w+\.\w+\.\w+\s*=\s*\[`)

    // Replace patterns in the content
    processedContents := reConfig.ReplaceAllStringFunc(string(contents), func(s string) string {
        return "var data = {"
    })
    processedContents = reArray.ReplaceAllStringFunc(processedContents, func(s string) string {
        return "var data = ["
    })

    // Parse the JavaScript file using goja
    vm := goja.New()
    _, err = vm.RunString(processedContents)
    if err != nil {
        log.Fatalf("Error parsing JS file: %v", err)
    }

    // Retrieve the value of the 'data' variable from the JavaScript context
    value := vm.Get("data")
    if value == nil {
        log.Fatalf("No data variable found in the JS file")
    }

    // Output the parsed data
    fmt.Printf("Processed JavaScript file: %s\n", file.Name)
    fmt.Printf("Data extracted: %v\n", value.Export())
}

func run(path string) {
    // Open the zip file
    r, err := zip.OpenReader(path)
    if err != nil {
        log.Fatal(err)
    }
    defer r.Close()

    // Iterate through the files in the zip archive
    for _, f := range r.File {
        // Check if the file is in the /data directory and has a .js extension
        if strings.HasPrefix(f.Name, "data/") && strings.ToLower(filepath.Ext(f.Name)) == ".js" {
            readFile(f)
            return // Exit after processing the first .js file so we don't end up printing a gazillion lines when testing
        }
    }
}

func main() {
    // Example usage
    if len(os.Args) < 2 {
        log.Fatal("Please provide the path to the zip file as an argument.")
    }

    path:= os.Args[1]
    run(path)
}

Hurrah. Assuming I didn't muck up the copypaste into this post, you should now see a rather ugly print of the struct data from Go.

JSON would be nice

Edit the main.go file to marshall the JSON output.

Use value.Export() to get the data from the struct
Use json.MarshallIndent() for pretty printed JSON (use json.Marshall if you want to minify the output).



package main

import (
    "archive/zip"
    "encoding/json"
    "fmt"
    "io/ioutil"
    "log"
    "os"
    "path/filepath"
    "regexp"
    "strings"

    "github.com/dop251/goja"
)

func readFile(file *zip.File) {
    // Open the file inside the zip
    rc, err := file.Open()
    if err != nil {
        log.Fatal(err)
    }
    defer rc.Close()

    // Read the contents of the file
    contents, err := ioutil.ReadAll(rc) // deprecated :/
    if err != nil {
        log.Fatal(err)
    }

    // Regular expressions to replace specific patterns
    reConfig := regexp.MustCompile(`window\.\w+\s*=\s*{`)
    reArray := regexp.MustCompile(`window\.\w+\.\w+\.\w+\s*=\s*\[`)

    // Replace patterns in the content
    processedContents := reConfig.ReplaceAllStringFunc(string(contents), func(s string) string {
        return "var data = {"
    })
    processedContents = reArray.ReplaceAllStringFunc(processedContents, func(s string) string {
        return "var data = ["
    })

    // Parse the JavaScript file using goja
    vm := goja.New()
    _, err = vm.RunString(processedContents)
    if err != nil {
        log.Fatalf("Error parsing JS file: %v", err)
    }

    // Retrieve the value of the 'data' variable from the JavaScript context
    value := vm.Get("data")
    if value == nil {
        log.Fatalf("No data variable found in the JS file")
    }

    // Convert the data to a Go-native type
    data := value.Export()

    // Marshal the Go-native type to JSON
    jsonData, err := json.MarshalIndent(data, "", "  ")
    if err != nil {
        log.Fatalf("Error marshalling data to JSON: %v", err)
    }

    // Output the JSON data
    fmt.Println(string(jsonData))
}

func run(zipFilePath string) {
    // Open the zip file
    r, err := zip.OpenReader(zipFilePath)
    if err != nil {
        log.Fatal(err)
    }
    defer r.Close()

    // Iterate through the files in the zip archive
    for _, f := range r.File {
        // Check if the file is in the /data directory and has a .js extension
        if strings.HasPrefix(f.Name, "data/") && strings.ToLower(filepath.Ext(f.Name)) == ".js" {
            readFile(f)
            return // Exit after processing the first .js file
        }
    }
}

func main() {
    // Example usage
    if len(os.Args) < 2 {
        log.Fatal("Please provide the path to the zip file as an argument.")
    }

    zipFilePath := os.Args[1]
    run(zipFilePath)
}

That's it!



go run main.go twitter.zip



}

  "userInfo": {

    "accountId": "1234567890",

    "displayName": "Luke ✨",

    "userName": "lukeocodes"

  }

}

Open source

I'll be open sourcing a lot of this work so that others who want to parse the data from the archive, can store it how they like.

The End of X (Or, It Should Be): How Elon Killed Twitter

@lukeocodes 🕹👨‍💻 — Wed, 07 Aug 2024 16:41:21 +0000

When Elon Musk announced his intention to purchase Twitter in April 2022, he did so with grand promises. He pledged to tackle the platform's pervasive bot problem, ensure free speech, and improve overall user experience. However, as the dust settles, it's clear that these promises remain largely unfulfilled. Instead, the transformation of Twitter into "X" has introduced new issues, exacerbated old ones, and left users questioning the platform's future.

The Bot Problem: Worse Than Ever

One of Musk's primary reasons for acquiring Twitter was his desire to eliminate spam bots, which he claimed plagued the platform. In 2022, Musk estimated that bots constituted 20% or more of Twitter accounts, significantly higher than Twitter's own estimates of less than 5%. This discrepancy became a central point of contention during the acquisition process, with Musk demanding more transparency from Twitter's then-management.

Despite these claims, recent studies suggest that the bot problem has not improved under Musk's leadership. Data from CHEQ, a cybersecurity firm, revealed that invalid traffic from bots on Twitter increased significantly in 2023. Organic traffic showed an invalid rate of 10.43%, nearly double the 5.13% from paid traffic. This increase indicates that not only has Musk failed to address the bot issue, but it has also worsened since his takeover.

Moreover, researchers have pointed out that accurately identifying bots remains a significant challenge due to the lack of a universally accepted definition. Tools like Botometer, which attempt to classify accounts based on bot-like behavior, have shown inconsistent results. For instance, Musk's own account has oscillated between high and low bot-like scores depending on the day. This inconsistency underscores the difficulty in differentiating between human and bot accounts, especially when many bots can mimic human interactions convincingly.

Further complicating the issue, researchers from University College London have identified millions of bots on Twitter, most of which are malicious. These bots can execute simple yet harmful activities, such as spamming and spreading misinformation. Despite the evidence, Twitter has shown limited proactive measures in addressing these findings, likely due to the potential loss of user count that comes with bot removal.

The bot problem on Twitter has not only persisted but also appears to have intensified under Musk's ownership. The complexities in accurately identifying and mitigating bots, combined with Twitter's apparent lack of urgency in addressing the issue, suggest that the platform's bot problem is far from being resolved (CPO Magazine) (Tech Monitor).

Free Speech or Free for All?

Musk's championing of "free speech" has been another cornerstone of his vision for Twitter. However, his interpretation of free speech has led to the platform becoming a haven for hate speech and dangerous misinformation. By rolling back moderation policies and restoring previously banned accounts, Musk has allowed users to propagate harmful content under the guise of free expression.

When Musk took over Twitter, one of his first moves was to overhaul the content moderation policies. This included reinstating previously banned accounts and scaling back on efforts to curb misinformation and hate speech. Musk's assertion that "Twitter cannot become a free-for-all hellscape" has not been reflected in the platform's reality (Digital Planet) (Business Insider). The result has been a significant uptick in harmful content, much of which targets marginalized communities.

The data tells a troubling story. Researchers found that the daily average usage of hate keywords nearly doubled after Musk's acquisition of Twitter (Phys News). This rise in hate speech is particularly concerning given the platform's influence on public discourse. Anti-Semitic, ethnic hate speech, and anti-LGBTQ+ mentions have all seen marked increases. For example, anti-Semitic mentions rose by over 50% in the weeks following Musk's takeover (Digital Planet).

Moreover, Musk's approach to free speech has emboldened extremists and conspiracy theorists. By allowing such content to flourish, he has effectively created an environment where misinformation spreads unchecked. This has had real-world consequences, including unrest and violence in places like the UK, where Musk's own posts have been linked to inflammatory incidents (Yahoo Finance).

Human rights organizations and digital rights advocates have expressed deep concerns over these changes. Amnesty International and Human Rights Watch have both warned that Musk's policies could lead to a proliferation of hate speech and misinformation, making the platform unsafe for many users (Business Insider). The loosening of content moderation not only affects Twitter but sets a precedent for other social media platforms, potentially lowering the bar for acceptable speech across the internet.

Musk's version of "free speech" has turned Twitter into a battleground of conflicting narratives, where harmful and false information can spread with little oversight. This shift has significant implications for the platform's role in shaping public opinion and political discourse, raising questions about the responsibilities of social media giants in moderating content. As we move forward, the challenge will be finding a balance between protecting free speech and ensuring the platform does not become a breeding ground for hate and misinformation.

Fact-Checking and API Access: A Broken Promise

Under previous management, Twitter supported fact-checking initiatives and offered free API access to developers, enabling the creation of tools to combat misinformation and enhance user experience. This support allowed platforms like Polititweet to record and analyse Twitter history, providing a critical resource for researchers and fact-checkers. However, since Elon Musk's acquisition, these supportive measures have been dismantled, and the consequences have been significant.

One of the most contentious changes under Musk's leadership has been the commercialisation of Twitter's API. Previously, researchers and developers could access the API for free, which was crucial for monitoring and counteracting misinformation. This access enabled projects that tracked harassment, analysed disinformation networks, and supported various public interest initiatives. The decision to monetise API access, with costs reaching up to $42,000 per month, has effectively locked out many academic and non-profit entities that relied on this data (PolitiFact) (Fast Company).

For instance, Polititweet, a platform that tracked and archived political tweets, was forced to cease operations in April 2023 when they were denied API access. This removal has hindered the ability of researchers to track the spread of misinformation and hold public figures accountable for their statements (Poynter).

The loss of free API access has broader implications for media and public trust. Twitter has historically been a valuable source for journalists and researchers, providing real-time data and insights. However, the platform's shift towards a pay-to-play model has degraded its reliability. Verified information is harder to find, while misinformation is given an undue platform due to the prioritisation of content from paying users.

This shift has allowed individuals and entities to amplify false information with minimal oversight. For example, during the recent riots in the UK, Nigel Farage falsely claimed on live TV that a migrant was responsible for the murder of three young children, when in reality, the perpetrator was a British man born in Wales. Such incidents underscore the dangers of unchecked misinformation and the role Twitter now plays in spreading it (PolitiFact) (Poynter).

Another significant change has been the transformation of the blue check mark system. Previously, the blue check mark was a symbol of verified identity and credibility. Under Musk's management, it became a subscription service, allowing anyone willing to pay $8 a month to obtain a blue check mark. This change has led to rampant impersonation and a surge in misinformation. Accounts spreading false information can now appear legitimate, further eroding public trust (PolitiFact).

Elon Musk's tenure has fundamentally altered Twitter's role in information dissemination. The removal of free API access and the commodification of verification have stifled innovation, hindered research, and allowed misinformation to flourish. As a result, Twitter is no longer a reliable source for accurate information, posing significant challenges for media outlets and researchers alike. The platform's future as a credible information source remains in jeopardy, highlighting the need for robust oversight and regulation in the digital information space.

The End is Nigh

There is substantial evidence indicating that Twitter's real-user numbers are in decline while bot activity is on the rise under Elon Musk's leadership.

Twitter is projected to lose over 32 million users by the end of 2024. This decline is attributed to technical issues, offensive content, and a general frustration with the platform's changes under Musk's ownership. Specifically, Twitter's user base is expected to decrease by 5.1% in 2024, following a 3.9% drop in 2023 (IT World Canada) (Oberlo). Analysts point out that this exodus is driven by Musk's erratic behavior, increased hate speech, and a deteriorating user experience (Absolutely Maybe).

While the real-user numbers decline, bot activity has shown signs of increasing. Studies have highlighted that Musk's efforts to combat bots have not only fallen short but, in some cases, may have worsened the situation. Bots continue to play a significant role on the platform, particularly in spreading misinformation (Business of Apps).

Elon Musk has hinted at transforming Twitter into a broader application platform, potentially resembling China's WeChat, integrating services like messaging, payments, and more. His goal of making "X" a super-app reflects a significant shift from Twitter's original purpose. Additionally, Musk's plans include a massive increase in users and revenue, targeting $26.4 billion in annual revenue by 2028 and reaching 931 million users (The San Francisco Standard).

Hints of more drastic changes or even the closure of Twitter as we know it have surfaced. Musk's decisions, including rebranding Twitter to "X" and relocating the company's headquarters from California to Texas due to regulatory and political disagreements, suggest a potential overhaul or shutdown of the current platform (The San Francisco Standard).

These trends are alarming, especially considering Twitter's role as a major platform for public discourse. The rise in bots and decline in genuine user engagement could further erode trust in the platform, making it a less reliable source for information and news. Media outlets and the public may need to reconsider how much they rely on Twitter for accurate and timely information, as the platform's changes under Musk continue to undermine its credibility and functionality.

Furthermore, Musk's contentious relationship with advertisers has significantly affected Twitter's revenue. Since his takeover, monthly ad revenue has declined by at least 55% year-over-year, with a particularly steep drop of 71% in December 2023. In response to this exodus, Musk has accused the Global Alliance for Responsible Media (GARM) of orchestrating mass boycotts and has even sued several major advertisers, alleging they illegally conspired to harm his company. Despite efforts to win back advertisers by improving brand safety controls, the platform's reputation and revenue continue to suffer from these disputes (Reuters) (The Wrap).

The ongoing war with advertisers highlights Musk's struggle to maintain a viable business model amid widespread criticism and declining user trust. The legal battles and drastic measures reflect his desperate attempts to salvage the platform, but they also underscore the broader challenges Twitter faces under his leadership ((AccessWDUN)[https://accesswdun.com/article/2024/8/1467227/elon-musk-x-sues-advertisers]).

Conclusion

Twitter's transformation under Elon Musk has led to a steep decline in real-user numbers and a significant rise in bot activity. With projections indicating a loss of over 32 million users by the end of 2024 and ad revenue plummeting by as much as 78% in December 2023, the platform's viability as a business is under serious threat. If the current rate of decline continues, Twitter may become unsustainable within the next few years.

As users and advertisers flee the platform, several alternatives have emerged. Some of the most prominent include:

Mastodon: A decentralized social network that allows users to create their own communities.
Bluesky: A project initiated by Twitter's former CEO Jack Dorsey, aiming to develop a decentralized social media protocol.
Threads: Launched by Meta (Facebook's parent company), Threads aims to integrate with Instagram to offer a new social networking experience.
Discord: While primarily a chat application, Discord offers robust community features that many former Twitter users find appealing.

For those looking to migrate their data from Twitter, tools and platforms vary in their support. Some services like Mastodon offer partial migration tools to help users import their tweets and followers. However, comprehensive migration solutions are limited, and users often need to manually save and transfer their data.

In summary, Twitter's decline under Musk's leadership, characterized by user loss and increasing bot prevalence, indicates a potentially bleak future for the platform. As users seek alternatives, new and existing social networks are stepping up to fill the void, albeit with varying degrees of data migration support.

Time to leave?

Me:
According to this: https://dev.to/terms

Can i swear about someone in my article? I'd like to end it with a message about Elon Musk and his interference with UK politics.

ChatGPT:
According to the terms of use for dev.to, using offensive is prohibited. The terms state:

"Please refrain from name-calling and ad hominem attacks when discussing other users, people, or companies. Avoid using offensive or inappropriate language. If you’re unsure whether a word is offensive, it probably is. If you’re confident it isn’t, someone else might disagree."

As usual with my posts. I use AI as a writing aide because "Luke no write good". I use it as a copywriter, to turn my ramblings and crappy source notes into something you can read.

Just Surviving: Working Remotely for Beginners

@lukeocodes 🕹👨‍💻 — Sun, 04 Aug 2024 10:56:11 +0000

Following on from my last post where I talked about how difficult working remotely can be, today I am posting some of my advice on how to maintain a positive you-work relationship, and healthy work-life balance.

Find Somewhere to Hide

First and foremost, having a dedicated workspace can do wonders for your productivity and mindset. Even if you don't have a separate room, find a corner that you can make your own. This space should be free from distractions and solely for work.

Get Off Your Butt

One of the perks of working remotely is flexibility, but too much flexibility can lead to chaos. Set a consistent schedule that includes starting and ending your workday at the same time each day. Include regular breaks to avoid burnout.

Get Dressed You Lazy Sod

It might be tempting to stay in your pajamas all day, but getting dressed as if you're going to the office can help put you in the right mindset. It doesn't have to be formal, but changing out of your sleepwear can signal to your brain that it's time to get to work.

Use Technology Wisely

Leverage tools that enhance communication and productivity. Applications like Clockwise can help you stay connected with your team and manage your tasks efficiently. Stay away from your video games and megadrives! /s

Stay Connected

Working remotely can be isolating. Make an effort to stay connected with your colleagues. Regular check-ins, virtual coffee breaks, and team meetings can help maintain a sense of camaraderie and keep you in the loop.

I Love Working Remotely, Even Though It Sucks at Times

@lukeocodes 🕹👨‍💻 ・ Apr 23

#workfromhome #mentalhealth

Set Boundaries

It's easy to let work spill into your personal time when you work from home. Set clear boundaries and communicate them with your household members and your team. Let everyone know when you're available and when you're not.

Prioritize Self-Care

Your mental and physical health should always come first. Take regular breaks, go for walks, and make time for activities that help you unwind. Remember, a healthy mind and body are crucial for sustained productivity. Put. These. In. Your. Work. Calendar. Untitled if necessary. Build them into your day.

Keep Learning and Growing

Use the extra time saved from commuting to invest in your personal and professional development. There are countless online courses and resources available to help you acquire new skills and stay competitive in your field.

Be Patient with Yourself

Lastly, be patient. It might take some time to find what works best for you. Give yourself grace as you figure out this new way of working.

Conclusion

Full transparency, my own words have been enhanced by the use of GPT because I have the writing skills of a 12-year-old. So sue me. But in all seriousness, finding the right balance and maintaining a positive relationship with your work when remote is key to thriving in this environment. With these tips, I hope you find it a bit easier to navigate the challenges and make the most of your remote work experience.

I Love Working Remotely, Even Though It Sucks at Times

@lukeocodes 🕹👨‍💻 — Tue, 23 Apr 2024 12:35:48 +0000

I love and hate remote working. I have a battery-life, and as time marches on I run low, needing human interaction to recharge my social battery. I used to love working at Vonage, because it had a London office and being a remote worker they'd pay for my expenses to get on the train and have face time with my colleagues. My old manager (Hi, Martyn!) once said that he believed I was the type of person that was happier being in the office.

I am, he was right. But, I live in the arse-end of nowhere and also want to work on cutting-edge technology like that we get to work on at Deepgram. I can't have it both ways, and I'm comfortable being uncomfortable for the benefit of being able to give my family the start I didn't have (IYKYK).

Not just me, but more people are working from home than ever before. Thanks, COVID (I was working from home before COVID, to be fair). This change has lots of benefits like no commute and being able to wear what you like. But it's not all perfect, as the truly toxic downside is the loneliness of missing the faces of your colleagues and work friends.

Despite its advantages, remote work isn't without its problems. During the pandemic, the sudden shift from bustling office environments to quiet, sometimes solitary home offices left a lot of us (I couldn't visit our offices anymore - or anyone) feeling adrift in uncharted waters. While we'd eliminated the daily commute, we also lost the spontaneous conversations that spark ideas and the unplanned encounters that often led to innovation. For companies across the globe, the task became to not just to facilitate remote work but to reinvent the collaboration that once took place naturally in physical places.

This collaboration was crucial not only for productivity but for the emotional and social wellbeing of colleagues. Understanding this is essential in allowing people to connect. Not just digitally, but emotionally and professionally as well.

The Rise of Working from Home

A lot of people want to keep working from home after trying it. A survey by Buffer shows that nearly all remote workers would like to continue working this way at least some of the time (Buffer's State of Remote Work 2021). While the perks are great, there's a big downside: feeling isolated.

As companies worldwide adapted to public health requirements, remote work transitioned from a nice-to-have to an essential status almost overnight. This not only transformed how businesses operated, but also prompted a reevaluation of what constitutes a productive work environment. I remember my wife sitting at our kitchen table for 6-7 hours with a headset, answering angry calls from members of the public as she worked for a local government agency. Not exactly a productive work environment, but it meant she could work - then, the only requirement I guess.

Previously, remote work was often seen as a perk offered by tech-savvy and trendy companies. However, now it's recognized as a normal and sometimes preferable way of working in all industries. Even my good friend, who works for the local Police service, works from home on his very encrypted and serious laptop.

This widespread adoption has led to innovations in digital tools and communication technologies, pushing companies to invest in better software and hardware to keep their teams connected and productive. As the dust settles, it's clear that the landscape of work has been permanently altered, with remote work proving its value and sustainability beyond the circumstances that necessitated its rise.

What Does Loneliness in Remote Work Look Like?

When you work from home, it's easy to feel left out. You might miss out on the quick chats and office news. According to a report by Igloo Software, 70% of people working from home feel they're not as connected to what’s happening at work (Igloo Software’s 2021 Remote Work Insights).

This feeling of disconnection isn't confined to missing out on social interactions or chats; it permeates the daily work routine. Remote workers often find themselves working odd hours to accommodate time zones or personal responsibilities, which can further deepen the sense of isolation. Without the physical cues and environmental context of an office setting, interpreting tone and intent in digital communications can become challenging, leading to misunderstandings or a feeling of being out of sync with the rest of the team.

These challenges are compounded for new hires who have to integrate into teams without ever meeting their coworkers in person, relying solely on virtual introductions and online meetings to build relationships that once developed naturally in shared physical spaces.

The Effects of Feeling Alone

Feeling lonely isn’t just about feeling sad or left out. It can seriously affect your health. Research shows that being very lonely can be as bad for your health as smoking 15 cigarettes a day (Health Resources & Services Administration). It can make you stressed, anxious, and can even make it hard to think or make decisions.

The result of these feelings of isolation extend beyond just the individual. They can ripple through an entire company, affecting team dynamics and overall performance. Remote workers who feel disconnected may struggle with motivation, finding it harder to get started on tasks or to prioritize their workload effectively.

Overall, lack of engagement can lead to decreased productivity and can even influence team morale, as the disconnection felt by one member can subtly impact the group's dynamics. Furthermore, the psychological stress of loneliness can lead to increased absenteeism and higher turnover rates - Yes, people will leave if they feel lonely.

Companies must recognize these potential risks and work to create a work environment that fosters personal connections and a sense of community, regardless of physical location. This is even more important when companies are both remote, and co-located.

As someone with ADHD, it's critical - for me personally - that I find motivation in my work. Any occurence of this dysfunction can be crippling, and has risked my entire career on more than one occasion.

How Can We Talk More?

Talking and connecting with others is really important, especially when everyone is working from different places. Snatch every opportunity to meet in person, budgets/finance permitting.

To counter the effects of isolation, our company employs a few different ways to encourage communication and foster a sense of community among team members.

Slack serves as our most central hub for both immediate and asynchronous conversations, allowing team members to share updates, ask questions, and engage in light-hearted chat throughout the day.

Slack reported that users are nearly twice as likely as non-Slack users to report that their sense of belonging improved while working from home (Collaboration tools can help remote workers adapt - Slack).

Regular Catch-ups

One good way to keep everyone connected is to have regular video calls. These can be every day or once a week. It's a chance for everyone to see each other and talk about how things are going, not just work stuff.

Our use of Roam as our virtual office space enables us to maintain the semblance of an office environment. Here, individuals can pop into each other’s virtual offices for quick face-to-face chats, or collaborate in real-time on team projects, maintaining a level of spontaneity and interaction that traditional remote work setups might lack. I love that my skip-level makes us move to a meeting room, as our individual offices don't have the option for video (What's up with that, Roam?!).

Virtual Hangout Spots

Setting up a place online where people can chat casually, like they would in an office kitchen, can help too. This could be a chat channel where no work talk is allowed. Just a spot to share a funny picture or talk about your weekend.

I hoped our Discord channel could extend this community beyond just our team members, to include our customers. I created a vibrant forum where we (some team and customers) exchange ideas, and immediate feedback can be sought to improve our products. This platform not only helps in supporting our products but also in building a more connected community of users and developers, and helps team members feel more connected to humans using our products.

Meet as Often as Possible

Our commitment to communication and community is further enabled by our annual in-person company offsite (Two trips to Mexico in 14 months? Yes please!). This event provides a unique opportunity for team members to connect, discuss company-wide strategies, and strengthen our relationships away from our projects and webcams. Additionally, we organize team offsites that, while less frequent, are immeasurably valuable for deeper team bonding and strategic planning. All these offsites are crucial in aligning our goals, refreshing our spirits, and breaking the monotony of talking into a cube of plastic, glass, image sensor, and circuitry.

Through these varied channels and opportunities, we aim to create a comprehensive communication ecosystem that not only addresses the challenges of remote work loneliness but actively promotes an inclusive and engaging work environment.

Turn Your Camera On

Gentle encouragement on camera use during meetings can significantly enhance the feeling of connection among team members. Seeing each other's expressions and gestures can make communication more natural and engaging, helping to bridge the gap that physical distance creates. It can also help neuro-divergent folks understand your tone, and people with hidden disabilities such as hearing loss lip read. As, just like written communication, audio can miss a lot of physical cues about tone and emotion. But, it’s always important to approach this practice with sensitivity to individual preferences and circumstances.

Recognize that not everyone may be comfortable having their camera on at all times. Factors such as personal comfort, the environment at home, or even internet limitations can influence this decision. To accommodate this, be flexible. Encourage having cameras on to foster a more connected and inclusive meeting experience, but also emphasize that it is entirely optional.

This approach ensures that all team members feel they can choose to engage in a way that feels most comfortable to them, without feeling pressured. By prioritizing comfort, create a supportive atmosphere that respects personal boundaries and promotes a positive experience.

Conclusion

Talking to each other is super important in remote work. It helps everyone feel part of the team and stops us from feeling too lonely. Companies need to think about how they can help people keep chatting, not just about work but about fun stuff too. This keeps everyone feeling happy and connected.

And let's face it, working alone at home can make you do funny things. I've started talking to my child's toy as if it's my colleague—lost my rubber duck, so now I'm rubber duck debugging with a plastic peppa-pig! Turns out, it's not only good for coding problems, but a great punishment for naughty 3-year olds. Peppa's coming to work with Daddy today.

Full transparency, my own words have been occationally enhanced by the use of GPT because I have the writing skills of a 12 year old. So sue me.

Introducing Deepgram Starter Apps

@lukeocodes 🕹👨‍💻 — Tue, 18 Apr 2023 11:15:06 +0000

Deepgram aims to make world-class language AI available to any developer through just an API call. With today’s launch of Deepgram Starter Apps, it’s even easier to start building applications which take real-time and prerecorded audio data and transform them into transcripts enriched with natural language understanding metadata.

Put simply, we help developers build quickly because we’ve already taken care of integrating Deepgram into Starter Apps. Whether you've been coding for decades or just passed CS50, Deepgram's Starter apps provide all users with a seamless and efficient onboarding experience.

JavaScript Starter

The JavaScript Starter is the first arrival from the collection and provides developers with a pre-built Deepgram integration on Node.js, with a React frontend, to quickly get started with the Deepgram platform. With the JavaScript Starter, all developers can rapidly explore what Deepgram's platform can do.

Check out our JavaScript Starter Apps on Github.

Python Starter

The Python Starter is our follow up to the collection and provides developers with a pre-built Flask integration with Deepgram. Presently, there is a static frontend to interact with the Flask server.

Check out our Python Starter Apps on Github.

New transcription models included

Deepgram introduces two new models this week. These are available to try out immediately in our new Starter applications.

Deepgram Nova

On April 13th, 2023, we announced Deepgram Nova, a cutting-edge Automatic Speech Recognition (ASR) system. Deepgram Nova achieves unprecedented performance, beating competitors in speed, accuracy, and efficiency.

Whisper Cloud

Alongside Deepgram Nova’s release, we announced Deepgram Whisper Cloud. Following last month's release of OpenAI's Whisper API, we noticed its popularity, despite its limitations. We've developed our own fully managed Whisper API to address those limitations.

Read more about our new opensource projects in our latest post, Introducing Deepgram Starter Apps.

I'm Luke and I pledge to help close the gender gap in 2022!

@lukeocodes 🕹👨‍💻 — Tue, 08 Mar 2022 22:02:36 +0000

Much like last year, I intend to give my space to those women who inspired me in the last year.

Check out the work and content of these amazing humans, and leaders. Give them a follow on Twitter if you want to fill your feed with great content, positive takes, and cool tech tips.

Salma Alam-Naylor

One of the literal few people I speak to regularly about ALL of the frustrations in tech, parenting, tech, tech, and tech Twitter. Not just a great human, she is also an amazing leader. While streaming on Twitch, she could pick any old project to wow us with. But, continually pulls out projects which elevate women in tech. Follow for tech tips, memes, and an amazing stream!

Salma Alam-NaylorFollow

I write code for your entertainment.

Naomi Carrigan

Naomi is a career switching ~~future~~ open source star. When I first met Naomi she was still looking for her first full-time tech role, and now she is an engineer for one of the most important free spaces for folks looking to get into tech, freecodecamp. Follow for great takes, great content, and great open source projects!

// Detect dark theme var iframe = document.getElementById('tweet-1479920158361587712-226'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1479920158361587712&theme=dark" }

Tonya Sims

Hall-of-Fame basketball player–turned Python Engineer and Developer Advocate. Tonya and I just missed each other at Vonage, but now I get to call her my colleague, anyway! Tonya inspires me with how she approaches work, is always super positive, and is a great advocate for the Python community. Follow for great Python content!

Tonya SimsFollow

Bekah Hawrot Weigel

Bekah just joined us at Deepgram and I'm so excited to see her build our community there. No sooner had Bekah qualified from FlatIron than she had made a more positive impact on her tech community than I have in my decade in tech. It isn't surprising when you see how she tackles work and community projects. Follow for community, code, and life content. Also check out Virtual Coffee, a virtual meetup, community, and podcast, for developers at all stages of their careers.

BekahHWFollow

Hey! I'm Bekah. I'm a career-changer. Bootcamp grad. Dev. Writer. Keynote Speaker. Mom to 4 kids. Creator, Maintainer, Podcast co-host: VirtualCoffee.io | Developer Experience Lead, @OpenSauced

Sandra Rodgers

Sandra is a former school teacher and now engineer who is now combining both worlds as a Developer Experience Engineer at Deepgram. She has also created some amazing content for Vue 3 which has helped me a ton (because I was being super lazy and avoiding Vue 3 stuff). Follow for great content and hopefully dog pics.

SandraRodgersFollow

Former teacher turned developer. On the developer relations team at Deepgram, I get to teach and build stuff, blending both of my professional passions - education and development.

Lauren Lee

Lauren was my manager at Vonage. She always inspired me by championing her colleagues needs before her own. She has an amazing podcast called We Belong Here that aims to interview career changers and folks that are diversifying the tech industry. Follow for great tech content, jealousy inducing beach pics, podcast announcements, and friendly takes.

Lauren LeeFollow

An English teacher turned empathetic software engineer. Host of the #WebBelongHere podcast which celebrates the stories of folks who've entered tech via unconventional paths!

Laura Czajkowski

Laura is hands down one of the most empathetic people I've had the pleasure to work with. She helped me in 2021 through difficult times with great advice and I'm so grateful to call her a friend. Follow for tweets about tech and industry content, and dog pics!

Laura CzajkowskiFollow

Head of Community Dragonfly, #OpenSource Advocate, #Community builder, Rugby Fan, Former Ubuntu Community & Loco Council

Lorna Mitchell

Lorna was a colleague of mine at Nexmo, and later Vonage. She completely changed the way I approached equity and empathy. In how Lorna challenged and explained situations, to first hand advice, I learned so much from her. She also makes great content, and her blog is one of a few tech sites even in my bookmarks. Follow for tweets on open source and new content.

Lorna Jane MitchellFollow

I'm a polyglot software developer and writer, currently working as a Developer Advocate and loving working with APIs!

Last Year Me

I'm Luke, and I support women in tech.

@lukeocodes 🕹👨‍💻 ・ Mar 7 '21

#wecoded #career #womenintech

I'm Luke, and I support women in tech.

@lukeocodes 🕹👨‍💻 — Sun, 07 Mar 2021 14:05:17 +0000

Last year I wrote about things I advocated that we can all do to further equality in tech. I still strongly suggest those, so check it out. (Link at the end).

This year, I'd rather give space to those in tech who have or do inspire me.

So, do yourself a favor and check out the work and content of these amazing humans, and leaders.

Lauren Lee

Lauren LeeFollow

An English teacher turned empathetic software engineer. Host of the #WebBelongHere podcast which celebrates the stories of folks who've entered tech via unconventional paths!

Lorna Mitchell

Lorna Jane MitchellFollow

I'm a polyglot software developer and writer, currently working as a Developer Advocate and loving working with APIs!

Anna Lytical

// Detect dark theme var iframe = document.getElementById('tweet-1253723511820034054-750'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1253723511820034054&theme=dark" }

April Speight

April SpeightFollow

Sr. Cloud Advocate - Spatial Computing at Microsoft. You can often find me playing with holograms.

Kim Crayton

// Detect dark theme var iframe = document.getElementById('tweet-1364956385285468165-326'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1364956385285468165&theme=dark" }

Jo Franchetti

Jo FranchettiFollow

Jo is a developer advocate at Deno.

Sarah Drasner

// Detect dark theme var iframe = document.getElementById('tweet-1368289251234697216-210'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1368289251234697216&theme=dark" }

Salma Alam-Naylor

Salma Alam-NaylorFollow

I write code for your entertainment.

Layla Porter

// Detect dark theme var iframe = document.getElementById('tweet-1368841067806814208-166'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1368841067806814208&theme=dark" }

Last Year Me

I'm Luke, and I Could Do More

@lukeocodes 🕹👨‍💻 ・ Mar 4 '20

#wecoded #womenintech #career

Server-Side Analytics with Jamstack Sites

@lukeocodes 🕹👨‍💻 — Thu, 26 Nov 2020 18:03:20 +0000

Jamstack sites don't have a backend. That makes their ability to gather analytics particularly vulnerable to blockers. Let's fix that problem.

This example includes a Netlify Function that will send our events off to Google Analytics, and a Netlify Redirect rule.

The Problem

Trackers and tracking pixels are HTML code designed to capture user behaviour or visits when they visit a website or open an email. It is useful for tracking usage of your website, and sometimes conversions.

The problem is, that some trackers are slow and often invasive. Ad-blockers were first dreamt up to stop ads and tracking pixels slowing down webpage performance, or to improve a user's experience, but have subsequently been expanded to improve privacy for users.

A side-effect was, that a lot of site owners lost visibility of what worked and didn't work on their sites. Physical tracking characteristics can still be used to track certain metrics, e.g. adding an article's identifier on a sign-up link to see where the sign-up originated.

This still doesn't help us accurately determine if our content is being viewed, a key requirement to determine conversion.

The Solution

Server-side analytics has become a popular way to track user activity. It doesn't have the scope of traditional analytics (it can't easily track on-page interactions), but it can capture important details, like unique page views.

Hosting platforms such as Netlify, or Edge providers like Cloudflare and Fastly, offer Server-side analytics as part of their solutions. But, when using a provider for analytics, you're often restricted in how you can warehouse that information, limiting internal reporting.

For that reason, some like to roll their own server-side analytics. For this, Google has some quick starts for some languages, and for others there are packages like universal-analytics.

Here, we'll roll our own using universal-analytics and a Netlify Function.

Netlify Function

Netlify Functions are basically AWS Lambda functions, without the AWS. The AWS developer experience leaves A LOT to be desired, and Netlify have turned user experience into a business model. Netlify Functions are no exception, allowing folks to write JavaScript or Go to a configured directory, and publish it in a few steps. The endpoint is derived by the file or folder name, and it can use the dependencies from the parent application, or be responsible for its own.

A super simple function might look like this:

// functions/hello-world/index.js

exports.handler = (event, context) => {
  console.log('Only the server will see this!')

  return {
    statusCode: 200,
    body: 'Hello, world!',
  }
}

Once deployed, you would be able to access it at a URL like this one: https://your-app.netlify.app/.netlify/functions/hello-world

But you can also continue to do things after you send a response back, like this:

// functions/hello-world/index.js

exports.handler = (event, context, callback) => {
  callback(null, {
    statusCode: 200,
    body: 'Hello, world!',
  })

  console.log('The server will still see this!')
}

Now, we could use this functionality to send off our analytics to Google.

Note: If you're adding dependencies to a function, you'll need to add the @netlify/plugin-functions-install-core plugin to your netlify.toml configuration. This plugin will ensure all the function's dependencies are installed when the function is deployed.

We need to install universal-analytics first, so make sure you're in your function's directory before you run the following command.

npm install universal-analytics

Ensure that you have a Google Analytics ID, and add that to your Netlify Environment Variables.

Now, we can use it in our function.

// functions/hello-world/index.js

const ua = require('universal-analytics')
const visitor = ua(process.env.GOOGLE_ANALYTICS_ID)

exports.handler = (event, context, callback) => {
  callback(null, {
    statusCode: 200,
    body: 'Hello, world!',
  })

  const { queryStringParameters: data } = event

  try {
    if (data) {
      visitor.pageview(data).send()
    }
  } catch (error) {
    console.log(error) // eslint-disable-line
  }
}

Now, from your browser, you can send off data from the URL straight to Google: https://your-app.netlify.app/.netlify/functions/hello-world?dp=/my-custom-page

Data you can send off includes—but isn't limited to—these parameters:

{
  dp, // path e.g. /my-custom-page
  dt, // title of the page
  dh, // hostname e.g. https://netlify.com
  dr, // referrer e.g. https://netlify.com/as-a-referrer or /a-link
  ua, // user agent e.g. very obscure string meaning "chrome on mac"
  cs, // utm_source
  cm, // utm_medium
  cn, // utm_campaign
  ck, // utm_term
  cc, // utm_content
}

Here is a full list of acceptable parameters.

Add the "Image"

Calling this script alone, with something like a router middleware or AJAX request, might be enough in a lot of instances for decent reporting, but it could still be recognised as an XHR request by a browser or browser ad-blocker, and blocked.

A (typically over-engineered) solution that I decided to use was similar to a tracking pixel method. But, because we return a visible structural image, ad-blockers have completely ignored it so-far.

We're going to return an SVG image from the Netlify Function and place it on a page using an image tag.

Let's use this image.

The source for this image can be found here:

<svg id="svg1923" width="733" xmlns="http://www.w3.org/2000/svg" height="733">
<circle cy="366.5" cx="366.5" r="366.5"/>
<circle cy="366.5" cx="366.5" r="336.5" fill="#fede58"/>
<path d="m325 665c-121-21-194-115-212-233v-8l-25-1-1-18h481c6 13 10 27 13 41 13 94-38 146-114 193-45 23-93 29-142 26z"/>
<path d="m372 647c52-6 98-28 138-62 28-25 46-56 51-87 4-20 1-57-5-70l-423-1c-2 56 39 118 74 157 31 34 72 54 116 63 11 2 38 2 49 0z" fill="#871945"/>
<path d="m76 342c-13-26-13-57-9-85 6-27 18-52 35-68 21-20 50-23 77-18 15 4 28 12 39 23 18 17 30 40 36 67 4 20 4 41 0 60l-6 21z"/>
<path d="m234 323c5-6 6-40 2-58-3-16-4-16-10-10-14 14-38 14-52 0-15-18-12-41 6-55 3-3 5-5 5-6-1-4-22-8-34-7-42 4-57.6 40-66.2 77-3 17-1 53 4 59h145.2z" fill="#fff"/>
<path d="m378 343c-2-3-6-20-7-29-5-28-1-57 11-83 15-30 41-52 72-60 29-7 57 0 82 15 26 17 45 49 50 82 2 12 2 33 0 45-1 10-5 26-8 30z"/>
<path d="m565 324c4-5 5-34 4-50-2-14-6-24-8-24-1 0-3 2-6 5-17 17-47 13-58-9-7-16-4-31 8-43 4-4 7-8 7-9 0 0-4-2-8-3-51-17-105 20-115 80-3 15 0 43 3 53z" fill="#fff"/>
<path d="m504 590s-46 40-105 53c-66 15-114-7-114-7s14-76 93-95c76-18 126 49 126 49z" fill="#f9bedd"/>
</svg>

Now, to return the image from our function:

// functions/hello-world/index.js

const ua = require('universal-analytics')
const visitor = ua(process.env.GOOGLE_ANALYTICS_ID)

exports.handler = (event, context, callback) => {
  callback(null, {
    statusCode: 200,
    headers: {
      'Content-Type': 'image/svg+xml',
    },
    body: `<svg id="svg1923" width="733" xmlns="http://www.w3.org/2000/svg" height="733">
<circle cy="366.5" cx="366.5" r="366.5"/>
<circle cy="366.5" cx="366.5" r="336.5" fill="#fede58"/>
<path d="m325 665c-121-21-194-115-212-233v-8l-25-1-1-18h481c6 13 10 27 13 41 13 94-38 146-114 193-45 23-93 29-142 26z"/>
<path d="m372 647c52-6 98-28 138-62 28-25 46-56 51-87 4-20 1-57-5-70l-423-1c-2 56 39 118 74 157 31 34 72 54 116 63 11 2 38 2 49 0z" fill="#871945"/>
<path d="m76 342c-13-26-13-57-9-85 6-27 18-52 35-68 21-20 50-23 77-18 15 4 28 12 39 23 18 17 30 40 36 67 4 20 4 41 0 60l-6 21z"/>
<path d="m234 323c5-6 6-40 2-58-3-16-4-16-10-10-14 14-38 14-52 0-15-18-12-41 6-55 3-3 5-5 5-6-1-4-22-8-34-7-42 4-57.6 40-66.2 77-3 17-1 53 4 59h145.2z" fill="#fff"/>
<path d="m378 343c-2-3-6-20-7-29-5-28-1-57 11-83 15-30 41-52 72-60 29-7 57 0 82 15 26 17 45 49 50 82 2 12 2 33 0 45-1 10-5 26-8 30z"/>
<path d="m565 324c4-5 5-34 4-50-2-14-6-24-8-24-1 0-3 2-6 5-17 17-47 13-58-9-7-16-4-31 8-43 4-4 7-8 7-9 0 0-4-2-8-3-51-17-105 20-115 80-3 15 0 43 3 53z" fill="#fff"/>
<path d="m504 590s-46 40-105 53c-66 15-114-7-114-7s14-76 93-95c76-18 126 49 126 49z" fill="#f9bedd"/>
</svg>`,
  })

  const { queryStringParameters: data } = event

  try {
    if (data) {
      visitor.pageview(data).send()
    }
  } catch (error) {
    console.log(error) // eslint-disable-line
  }
}

Add it to your site using the URL we used before:

<img 
  alt="An SVG file of a very smiley Emoji"
  title="An SVG Emoji"
  width="128" 
  src="/.netlify/functions/hello-world?dp=/my-custom-page"
/>

With any luck, it'll look like this:

Redirect Rule

So, the most ~~devious~~ inventive part of my ~~evil plan~~ idea might be this next bit. I was slightly paranoid that an ad-blocker might sense a non-image URL with query string parameters as little suspect as an image source, and block it anyway.

Enter Netlify Redirects.

Using the netlify.toml in the root of your project, you can proxy one path with another.

[[redirects]]
  from = "/images/smiley-face.svg"
  to = "/.netlify/functions/hello-world"
  status = 200
  force = true

Now, you can use an image path to include your smiley face.

<img 
  alt="An SVG file of a very smiley Emoji"
  title="An SVG Emoji"
  width="128" 
  src="/images/smiley-face.svg?dp=/my-custom-page"
/>

You can encode the query string however you like, just remember to decode it inside the function.

Conclusion

Analytics is a superpower for marketing and content creators. It allows us to better serve the community, by tuning our goals based on the data we can collect.

There are often privacy and speed concerns around trackers. But as long as you're acting in good faith, as I believe we are, analytics benefits viewers as much as anyone else.

This is a nice little way to achieve server-side analytics (which blockers can't block), when you don't have a server-side at your disposal.

Migration From WordPress to Jamstack (Nuxt edition)

@lukeocodes 🕹👨‍💻 — Mon, 23 Nov 2020 10:34:17 +0000

The Great Migration: Migrating WordPress to Jamstack

If you do some development, editing, or writing on the internet, you've probably heard of WordPress. To say it's prolific is an understatement.

Every time we talk about the market share of different frameworks, someone magics a new number out of the air for WordPress, a great point made by Sarah Drasner as she wrote about when Smashing Magazine moved from WordPress to Preact/Hugo at the beginning of this year.

I've been quite public about my issues with WordPress–security/speed/bloat/UX. Not to take anything away from WordPress developers, or the folks who are maintaining it, but for an organization like ours—with engineers, writers, and user experience professionals available to pitch in—living with a platform that is widely accepted as being clunky and heavy for the benefit of a good backend always felt a bit counter-intuitive.

So, similarly to Sarah's post, I'm going to explore the whats/whys/wheres of this journey, since that meeting we had in Miami, early in 2020, before the world seemed to go to, well, COVID.

Why?

We were going through a rebrand, and the timing for us was perfect. Why invest in an agency to rebrand our WordPress site when we could produce a new site based on our brand from the ground up?

We also had our content creation process split across three platforms. Our content was edited and reviewed as Markdown, moved to WordPress, and tracked on JIRA.

As I mentioned above, we were well aware of the general concerns with the speed and security of WordPress.

And on top of that, this WordPress site represented a piece of our infrastructure unknown to almost all our ops team. Vonage continues to work through consolidating the infrastructure of the API businesses it has acquired in recent years, and our Wordpress platform was an unnecessary remnant of that legacy.

Reliability

Our Developer Education team sits inside Developer Relations, itself inside the Product organization. So we're not focused full-time engineers, and we don't own large amounts of infrastructure.

Netlify allows us to fire-and-forget our content. We can get past the complexity, maintenance, security, and reliability concerns that WordPress brings with it. With Netlify, as long as our site can build, it can deploy.

Workflow

As I mentioned already, we had a workflow split across three platforms. It could be frustrating and inaccessible, especially for external writers who didn't have access to our content repository, like those in our Spotlight programme.

One of the goals of this project was to find a way to simplify our workflow, hopefully impacting us as little as possible. Netlify CMS allowed us to do this.

The editorial workflow Netlify CMS provided reflected our existing JIRA workflow quite closely, giving me hopes of automation (or, another opportunity to log into JIRA less). At the same time, the git-based storage of Netlify CMS also reflected our existing review process.

Using Netlify CMS allowed for a significant amount of the process to be consolidated.

Migrating the content from WordPress ended up being the most significant hurdle we'd face. We had the WP REST API available, so off I went making API call after API call to try and identify the best way to extract our content from WordPress. We edited content in WordPress as Markdown, so it must store it as such? I was getting excited to think that I would could some API calls to retrieve our Markdown and save it as Markdown files.

But was it stored as Markdown? Due to the nature of unmaintained community-driven plugins, nothing ended up being that straightforward.

Our WordPress stored posts rendered as HTML. Crayon, the old and abandoned syntax highlighter plugin, seemed to keep code in tables, with columns for line numbers and rows per lines of code. The last version of Crayon before deprecation cited moving to store code in <pre><code> tags much like other syntax highlighters. The goal of the last update was to make moving from it more manageable, as it would be compatible with converters or even other highlighters. But sadly, the plugin was so old, and the site so severely unmaintained we were facing an unrealistic obstacle updating everything to get the content out.

The incredible irony of Crayon is that the maintainer had also had enough of WordPress and decided to move his site and focus to Jekyll, a Jamstack platform.

We decided to review all our content manually. We don't have the thousands of articles of Smashing Magazine, but we have over 500 pieces of content. I mentioned rebranding earlier. The decision allowed us to revisit every piece of content to update the branding, update SDK versions, request new artwork, and bring them into 2020 (the poor things).

But, how do you plan to produce new content AND review all content in a matter of weeks? Well, you don't. The plan would be to do the content review over a few months.

The Plan

Using rewrite rules, we would stop folks from being able to access the old site. They would be redirected to the same post on the new domain, where metadata would be imported as markdown files.

The old site would be moved to a new "legacy" domain, with a link to it in each post we import.

The new site would then provide a nice note to the effect of "We're still migrating this content", with a countdown to redirect them to the legacy link.

As we migrate content, we edit the markdown file we already imported, removing the legacy link and adding the migrated content, slotting the content in the middle of the user experience. The goal is to limit the impact on the user and reduce the strain on the team to migrate all our content quickly.

To limit the impact further, we prioritised our most read and most recent content for migration, migrating most of them before we went live.

Framework Choices

I'd had some experience working with Jekyll and a similar workflow in the past. Jekyll, configured correctly, is blisteringly fast to render. I'd guess it's still right at the top for build speed when compared to other Jamstack platforms. It felt right to start there, with something I knew worked.

I'd also been experimenting with Nuxt.js, because Vue.js is terrific and I'm a massive fan of Jamstack in general. Combing my two favourite things (Vumstack? Jamue?), I found Nuxt.js! Vonage also had a design system named Volta, based on Bootstrap, which applied all our branding guidelines, and was available as a Vue.js library.

So I built two proof of concepts, one in Jekyll and one in Nuxt.js. Despite liquid templates being much easier to work with generally, I found myself prototyping Nuxt.js far more quickly due to Volta. With a frontend that already looked great with our branding and server-side rendering to make the site lightning quick, we were very excited about this Nuxt.js prototype. After a few weeks of tweaking and applying feedback, we had something close to what we have today.

Nuxt.js was the way to go!

Two weeks after our proof-of-concept was finished, Volta was deprecated by the design team! We replaced it using TailwindCSS, which allowed us to achieve design parity with Volta, but with more predictable breakpoints and a larger number of utilities for responsive sites.

Conclusion

The result for us has been transformative. We're going to be able to deliver more content types, more quickly and more reliably. We now have a platform that supports all our immediate goals for 2021 and the future. It also looks AMAZING, If I do say so myself.

Migration continues, but the go-live day had no hiccups. We smoothly transitioned folks to the new platform, with redirects in place to legacy if necessary.

Thanks to server-side analytics, we're seeing more accurate tracking than before, and we've got access to much more granular data to inform our writing goals for the future.

Here are some posts I've made related to our work towards the migration.

Article No Longer Available

Using Tailwind CSS with Vue.js

@lukeocodes 🕹👨‍💻 ・ Mar 19 '20

#vue #javascript #beginners

Get Your Twitch Stream Live on Your Website

@lukeocodes 🕹👨‍💻 — Mon, 16 Nov 2020 15:29:55 +0000

Is My Twitch Stream Live?

Ever wanted your Twitch live status on your own homepage? Well, we achieve that with a small Netlify function called from our site.

For the purposes of this post, let's assume credentials are always stored in environment variables...

Diving Right In™️

Get Twitch Credentials

Log into your Twitch account, head over your Developer Console applications and Register a New Application with Twitch.

Give the application a Name, OAuth Redirect URL, and Category.

Field	Value	Important?
Name	My Twitch Stream Live?	Not really
OAuth Redirect URL	http://localhost:3000	Not really
Category	Website Integration	Not really

Yes, I mean it, none of these are really that important. The client credentials grant required for server-to-server authentication doesn't require a redirect URL, because it can validate the client ID and secret on the one leg.

Once you click Create, you'll be able to click on Manage for your new application. Here you'll find the Client ID, and generate a New Secret.

Add the Client ID and Client Secret to environment variables.

TWITCH_CLIENT_ID
TWITCH_CLIENT_SECRET

Create your Netlify Function

In your functions directory (we'll call ours functions/), create a new directory called live-on-twitch and change into it.

cd functions/
mkdir live-on-twitch
cd live-on-twitch/

Initialise your npm application.

Now, add the basic structure of your function. It's not a very semantic endpoint, returning status: online or status: offline, and always a 200. 😇

exports.handler = async (event, context, callback) => {
  callback(null, {
    statusCode: 200,
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ status: 'offline' }),
  })
}

Launching http://localhost:55359/.netlify/functions/live-on-twitch, and making a request will return JSON. This URL is generated by netlify dev and may differ from what you see.

{
  "status": "offline"
}

Request an App Access Tokens

Now, install axios, to make the requests with.

npm install axios

Create the request options and then turn them into parameters for a post request to the Twitch OAuth service.

const qs = require('querystring')
const axios = require('axios')

exports.handler = async (event, context, callback) => {
  const opts = {
    client_id: process.env.TWITCH_CLIENT_ID,
    client_secret: process.env.TWITCH_CLIENT_SECRET,
    grant_type: 'client_credentials',
    scopes: '',
  }
  const params = qs.stringify(opts)

  const { data } = await axios.post(
    `https://id.twitch.tv/oauth2/token?${params}`
  )

  console.log(data)

  // callback
}

Is Your Twitch Stream Live?

With the access_token returned from Twitch, now you can request the status of your stream.

// requires

exports.handler = async (event, context, callback) => {
  // get access_token

  const streamUser = 'vonagedevs'

  const {
    data: { data: streams },
  } = await axios.get(
    `https://api.twitch.tv/helix/streams?user_login=${streamUser}`,
    {
      headers: {
        'Client-ID': process.env.TWITCH_CLIENT_ID,
        Authorization: `Bearer ${data.access_token}`,
      },
    }
  )

  // callback
}

Because you look for a single user_login from the streams endpoint, we'll assume a stream.length is online, as it will be zero if you're offline.

The Full Code

Here is the function in full.

const qs = require('querystring')
const axios = require('axios')

exports.handler = async (event, context, callback) => {
  const opts = {
    client_id: process.env.TWITCH_CLIENT_ID,
    client_secret: process.env.TWITCH_CLIENT_SECRET,
    grant_type: 'client_credentials',
    scopes: '',
  }
  const params = qs.stringify(opts)

  const { data } = await axios.post(
    `https://id.twitch.tv/oauth2/token?${params}`
  )

  const streamUser = 'vonagedevs'

  const {
    data: { data: streams },
  } = await axios.get(
    `https://api.twitch.tv/helix/streams?user_login=${streamUser}`,
    {
      headers: {
        'Client-ID': process.env.TWITCH_CLIENT_ID,
        Authorization: `Bearer ${data.access_token}`,
      },
    }
  )

  callback(null, {
    statusCode: 200,
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ status: streams.length ? 'online' : 'offline' }),
  })
}

What Did We Use It For?

If we're live on Twitch, we're going to enhance the landing page of our blog with the stream!

The Perfect Breadcrumbs (in Nuxt)

@lukeocodes 🕹👨‍💻 — Tue, 10 Nov 2020 09:46:52 +0000

Breadcrumbs can be a bit of a pain. But there are lots of reasons you might want to make them.

TL;DR: I made a self-contained component that builds semantic breadcrumbs based on the path to the file using the router. It matches the paths against the router before outputting links.

The gist is at the end of the post.

What Are Breadcrumbs and Do They Really Deserve This Much Attention?

Breadcrumbs most commonly appear at the top of a page as text links denoting the path to the post (or back to the index). Breadcrumbs are an important navigation mechanism.

Combined with structured data or semantic markup like RDFa, they also act as an important SEO tool, for sites such as Google to understand the structure of your site.

When Google finds the data it needs, it can display the site structure in results.

Why Make This?

Most of the examples I found online take an array from the page you're placing the breadcrumbs. This works from the / divided path but skips paths that the router cannot match.

How Does It Work?

I'll focus on the JS rather than the JSX. You'll likely make better markup for it than I would.

Starting with an empty output.



export default {
  computed: {
    crumbs() {
      const crumbs = []

      return crumbs
    },
  },
}

Now, we'll get the current full path.



export default {
  computed: {
    crumbs() {
      const fullPath = this.$route.fullPath
      const params = fullPath.substring(1).split('/')
      const crumbs = []

      console.log(params) 

      // url:     /blog/2020/11/20/my-post-url
      // outputs: ['blog','2020','11','20','my-post-url']

      return crumbs
    },
  },
}

Next, recompile the URL bit by bit.



export default {
  computed: {
    crumbs() {
      const fullPath = this.$route.fullPath
      const params = fullPath.substring(1).split('/')
      const crumbs = []

      let path = ''

      params.forEach((param, index) => {
        path = `${path}/${param}`

        console.log(path)

      })

      // outputs: /blog
      //          /blog/2020
      //          /blog/2020/11
      //          /blog/2020/11/20
      //          /blog/2020/11/20/my-post-url

      return crumbs
    },
  },
}

Now, match each route on the router.



export default {
  computed: {
    crumbs() {
      const fullPath = this.$route.fullPath
      const params = fullPath.substring(1).split('/')
      const crumbs = []

      let path = ''

      // test path
      params.push('fake')

      params.forEach((param, index) => {
        path = `${path}/${param}`
        const match = this.$router.match(path)

        if (match.name !== null) {
          console.log(`yep:  ${path}`)
        } else {
          console.log(`nope: ${path}`)
        }
      })

      // outputs: yep:  /blog
      //          yep:  /blog/2020
      //          yep:  /blog/2020/11
      //          yep:  /blog/2020/11/20
      //          yep:  /blog/2020/11/20/my-post-url
      //          nope: /blog/2020/11/20/my-post-url/fake

      return crumbs
    },
  },
}

Finally, capture only matches.



export default {
  computed: {
    crumbs() {
      const fullPath = this.$route.fullPath
      const params = fullPath.substring(1).split('/')
      const crumbs = []

      let path = ''

      params.forEach((param, index) => {
        path = `${path}/${param}`
        const match = this.$router.match(path)

        if (match.name !== null) {
          crumbs.push(match)
        }
      })

      return crumbs
    },
  },
}

In mine, I turn the param into a title using ap-style-title-case. I have a prop that I let folks override the autogenerated page title for blog posts where the slug might not perfectly turn back into a title.



const titleCase = require('ap-style-title-case')

export default {
  props: {
    title: {
      type: String,
      default: null,
    },
  },

  computed: {
    crumbs() {
      const fullPath = this.$route.fullPath
      const params = fullPath.startsWith('/')
        ? fullPath.substring(1).split('/')
        : fullPath.split('/')
      const crumbs = []

      let path = ''

      params.forEach((param, index) => {
        path = `${path}/${param}`
        const match = this.$router.match(path)

        if (match.name !== null) {
          crumbs.push({
            title: titleCase(param.replace(/-/g, ' ')),
            ...match,
          })
        }
      })

      return crumbs
    },
  },
}

The Full Code

Check out the gist for the whole component!

Speed up Nuxt Builds on Netlify

@lukeocodes 🕹👨‍💻 — Sun, 25 Oct 2020 12:32:09 +0000

If you're not careful, your build times for Nuxt can spiral out of control. After enabling Nuxt i18n, we reached 27-minute production deploys.

Once we had added a load of nice-to-have Netlify plugins, our deploy times went up again. Before I knew it, our deploys on Netlify were failing, timing out at 30 minutes.

This post addresses build time problems for sites using version 2.14 of Nuxt. 2.14 introduces full-static builds and includes all the lovely new crawler changes.

Note: I will refer to the time it takes for Nuxt to run generate as build times. Deploy times are the time it takes Netlify to run generate and then publish it.

For this post, I'll be using the globally recognised "turd" scale for measuring satisfaction–💩💩💩 to 😍🎉🔥.

💩💩💩 30-minute deploys (timeout)

Unnecessary Content

Unnecessary content was an issue for us. Having imported nearly 600 articles from our legacy WordPress site, we were building pages for every category, tag, and author too. This lead to some 17500 physical pages being rendered by the Nuxt full static build. After reviewing the metadata on our posts, I managed to reduce our build to just over 3000 pages...

Our Netlify build jumped from 30-minute timeouts to 15 minute deploys.

👎🏻👎🏻👎🏻 15-minute deploys

Skip Optional Dependencies

While not Nuxt specific, only installing the dependencies you need can speed up the Netlify install before the build even starts.

The --no-optional argument will prevent optional dependencies from being installed by npm. There is a yarn equivalent.

You can add this to Netlify in the config, or add it to the environment variables on the dashboard.

# netlify.toml

[build.environment] 
  NPM_FLAGS = "--no-optional"

This did nothing for our deploy time, but it may help others. 🤪

👎🏻👎🏻👎🏻 15-minute deploys

Code Minification

Nuxt has strong default HTML minification settings used for post-processing builds.

  // ...

  html: {
    minify: {
      collapseBooleanAttributes: true,
      decodeEntities: true,
      minifyCSS: true,
      minifyJS: true,
      processConditionalComments: true,
      removeEmptyAttributes: true,
      removeRedundantAttributes: true,
      trimCustomFragments: true,
      useShortDoctype: true
    }
  },

  // ...

Nuxt already minifies CSS and JS using WebPack plugins. So we can disable inline CSS and JS minification.

  // ...

  build: {
    html: {
      minify: {
        minifyCSS: false,
        minifyJS: false,
      }
    }
  }

  // ...

When I read about this, it suggested we'd see a 10x improvement on the initial build. In reality, we saw a minute or two in reductions.

👎🏻👎🏻👍🏻 13-minute deploys

Turn Off Logging

Even locally, the verbose logging of several thousand lines in the terminal can slow EVERYTHING down. Most of the logging is formatted from Nuxt, to.

Disable logging anything but errors with the CI environment variable.

You can add this to Netlify in the config, or add it to the environment variables on the dashboard.

# netlify.toml

[build.environment]
  CI = "1"

This made a surprising difference, slicing a fair chunk off our build time.

👎🏻👍🏻👍🏻 8-minute deploys

Post Processing

If you've played with Netlify deployment configurations, you'll know there is a wealth of options now.

I had lots of options ticked, and we've already established that Nuxt does most of it already.

Reasons to turn them all of—for us at least:

We already have a plan to generate our images based on rules we've established for media creation already. We can do the optimisation steps and CDN uploads here in the future.
Nuxt does minification of HTML, JS and CSS already.
The Nuxt static build does-Pre-rendering.

Tick, tick, tick. All off.

👍🏻👍🏻👍🏻 5-minute deploys

Real Talk

Getting our deploys much quicker without paying for enterprise Netlify is unrealistic. I have a ton of optimisation to do on my Vue components, but I don't expect to see much more time saved.

It wasn't actually the production build I was so keen to reduce the time on, it was the previews as we've gone FULL NETLIFY and adopted Netlify CMS for git-based content storage. So, every time we edit a post in Netlify CMS, it creates a pull-request for the edited file. At 30 minute builds, with a team of 8 people working on content, well you see where this is going—lots of waiting for builds. Less now, at least.

BUT WAIT, There's More 😮

Is there a way to reduce our preview builds? That was the original motivation to reduce build times in the first place!

After a brief Googlin', I came across issue #6138 raised on the Nuxt project, on how to generate a single route.

In the latest version of Nuxt, the solutions in the GitHub issue didn't actually work.

But, it did give me an idea.

Since Nuxt 2.14, we've had the crawler to discover pages. And, if I want to provide additional routes, I can use the routes() property of the generator config.

So, I thought to myself, "can I turn off the crawler and provide it a single route, somehow"?

The answer was yes.

Casually breaking my nuxt.config.js...

  generate: {
    crawler: false,
    routes() {
      return ["/blog/a-test-blog-post-made-in-netlify-cms"]
    }
  }

Doing this resulted in almost immediate build times, so once tested on Netlify I was down to about 1 minute deploys. It was just building the physical routes (everything in your /pages directory) without crawling for any dynamic routes. Our physical routes make up less of our site than was worth worrying about.

Could I make this context-driven based on the preview build?

Well, it hit me like a slap around the face.

The slug for the new post created in Netlify CMS was part of the branch name.

cms/blog/a-test-blog-post-made-in-netlify-cms

And, the branch name was available on our preview build as the environment variable, HEAD.

# console.log(process.env.HEAD)
cms/blog/a-test-blog-post-made-in-netlify-cms

I'm getting closer.

A quick explore of the other environment variables provided in preview builds, I noticed PULL_REQUEST is an indicator whether the build is from a pull/merge request (true) or not (false).

So here was the rough code I put together to make use of this. Add a new function to the top of the nuxt.config.js file.

// nuxt.config.js

// ...

const isPreviewBuild = () => {
  return process.env.PULL_REQUEST && process.env.HEAD.startsWith('cms/')
}

// ...

module.exports = {
// etc...

So this returns whether its a PR and if the branch name begins with cms/ (generated by Netlify CMS).

How can we use this? I'm glad you asked. Edit the "generate" property in nuxt.config.js.

// nuxt.config.js

// ...

module.exports = {
  // ...

  generate: {
    crawler: !isPreviewBuild(),
    routes() {
      return isPreviewBuild() ? ["/blog/a-test-blog-post-made-in-netlify-cms"] : []
    }
  }
}

Tested? Works, still my ~1 minute deploy! Now, route from the branch name. Another new function to nuxt.config.js.

// nuxt.config.js

// ...

const previewRoute = () => {
  const [, type, slug] = process.env.HEAD.split('/')

  return [ `/${type}/${slug}` ]
}

// ...

module.exports = {
// etc...

The type is super important because it means we can also preview video and author pages as well blog. Really cool side effect. Added with one last edit to the nuxt.config.js file.

// nuxt.config.js

// ...

module.exports = {
  // ...

  generate: {
    crawler: !isPreviewBuild(),
    routes() {
      return isPreviewBuild() ? previewRoute() : []
    }
  }
}

😍🎉🔥 1-minute deploys

Conclusion

Confession: I built most of the final code without testing it, I used the BRANCH environment variable thinking it would be the branch name. It is not. So when it didn't work, I thought I'd gone down a big old rabbit hole building this. I thought I'd wasted hours. Nope, got the environment variable wrong. Read the docs, folks.

It's been almost 5 years since I was in a role that had me building code that would be relied upon in a production environment. I shouldn't be surprised (but I am) that the off-the-shelf configuration for Nuxt isn't optimised for production builds.

I'm generally cautious of introducing environment-aware code into an application, but I have ignored my better judgement as this is environment-aware-configuration as code. You should be very careful about introducing code that fundamentally changes how an application runs or is built based on the environment it is running in.

Know your platform.
Read the flipping manual.
Do all the Googlin'.
Take care with environment-aware code.

See exactly how we're using this on our GitHub repository.

Nexmo / deved-platform

Nuxt.js for the new Vonage Developer Education site.

Credits

issue #6138 raised on the Nuxt project 👏
10x Faster Nuxt Builds on Netlify ❤️
Decent help from the Nuxt Discord community 🔥