DEV Community: Katie

Low-Code Generation Z

Katie — Thu, 02 May 2024 09:00:00 +0000

I've seen a lot of handwringing about Generation Z not grokking hierarchichal file folders and directories.

At the other end of the spectrum, software engineering professor Dimitris Kolovos wrote:

"a growing proportion of the workforce are digital native and, while they may lack a background in programming, they are well-versed computer and web users and skilled with non-trivial software (e.g. office/mobile applications). Low-code software engineering aspires to leverage this increasingly computer-savvy workforce"

So which is it as the old PC-raised software application implementers retire and youth replace them? A bunch of technologically helpless fresh faces or "well-versed and skilled computer users?"

Still not enough formal education

As I wrote in "In defense of Salesforce Flow," I strongly believe that computer education for the masses needs to catch up quickly with the explosion of flowchart-based programming languages.

I want to see more computer science and software engineering best practice books, blogs, and self-help videos that teach intermediate and advanced programming concepts from the 1970's-2000's, but entirely demonstrated in flowchart-based programming languages.

I'm horrified that in 2024 with enterprise workers working magic in Salesforce Flow and Microsoft Power Platform, I Googled "low-code software engineering" today and still didn't find anything useful on old-school software engineering principles.

Hope in tablets

Maybe the tablet generation's relative ignorance of certain details about desktop user interfaces is going to help them -- and the educational leaders shepherding them -- avoid missing the forest for the trees as they enter the workforce and become low-code software application developers.

Maybe teaching the TikTok generation (many of whom have more hands-on-experience-driven intuition about film lighting, reasons to choose a certain type of scene cut, etc. than I learned in 2 semesters of college-level film studies, so I suspect playing around on a tablet has, as Dr. Kolovos suspects, still rendered them a "computer-savvy workforce" at a business objectives level) about "D.R.Y." software application implementation is going to be the desk job world's 2030's equivalent of teaching the Oregon Trail generation Excel.

Download every Salesforce object and field definition to JSON

Katie — Fri, 16 Sep 2022 08:00:00 +0000

I made a new codebase that makes it easy to download the definition of every object and field in a Salesforce org (part of its "metadata") onto your hard drive as a JSON file.

Example usage: If they have programmers on staff who can transform it into a data structure useful to them, your company's data governance team might find such a file useful for keeping a "data dictionary" up-to-date.

You could send that team a fresh copy of this file every time you alter your Salesforce configuration.

UNPIVOT to key-value pair in Oracle SQL

Katie — Thu, 11 Aug 2022 09:00:00 +0000

I always forget how to use UNPIVOT, and so many documents are focused on numbers data, not generic key-value data. Here’s the thing I actually often need to do.

Code

Here’s my source table called source_table, inside of an Oracle database:

record_id	country	gender	name_lf	other_junk
123	Azerbaijan	F	Amjit, Anush	123abc
456	Zimbabwe	N	Borges, Benita	def456

Here’s the SQL query:

select
    record_id
    , field_key -- Arbitrary naming choice; call this anything you want.
    , field_value -- Arbitrary naming choice; call this anything you want.
    , name_lf
from source_table
unpivot (
    field_value -- Arbitrary naming choice; call this anything you want.
    for field_key -- Arbitrary naming choice; call this anything you want.
    in (
        country
        , gender
    )
);

And here’s the resultant data:

record_id	field_key	field_value	name_lf
123	COUNTRY	Azerbaijan	Amjit, Anush
123	GENDER	F	Amjit, Anush
456	COUNTRY	Zimbabwe	Borges, Benita
456	GENDER	N	Borges, Benita

Check a URL with Selenium IDE

Katie — Wed, 06 Apr 2022 15:00:00 +0000

It took me a while to figure out how to get Selenium IDE to click a link, wait for the new tab's page-load to settle down, and validate the URL of the new page, but I did it.

Overall, I'm pretty satisfied with Selenium IDE. If you have business processes that involve visiting a web site and clicking around a bunch to "make sure everything looks good," it's a nifty tool for pretending to be yourself, only sped up really really fast.

Steps

The one and only test present in this Selenium IDE project runs through 8 steps:

Open the Katie Kodes page on Ko-Fi
- Command: open
- Target: katiekodes (on top of a test base URL of https://ko-fi.com/)
Click the Katie Kodes blog link
- Command: click
- Modify new window configuration -> New Window Configuration Enabled: checked, Window Name: blog_new_tab, Timeout: 2000, click "Confirm"
- Target: xpath=(//a[@target="_blank" and contains(@href, "katiekodes.com")])[1]
Close the original Ko-Fi tab
- Command: close
Make sure we are viewing the new blog tab
- Command: select window
- Target: handle=${blog_new_tab}
Wait for something bloggey to be on the screen
- Command: wait for element present
- Target: xpath=(//a[contains(@href, "ko-fi.com")])[1]
- Value: 30000
- (Technically, this isn't required for this example, but the situation I was dealing with opened a new tab and then handed off cookies through about 4 different URLs before settling down on one, so I decided to validate that things were "all done" by looking for a weird, distinctive HTML element I knew only existed in the final, settled page.)
Save the blog URL to a variable
- Command: execute script
- Target: return document.URL;
- Value: theurl
Assert that the blog URL is correct
- Command: assert
- Target: theurl
- Value: https://katiekodes.com/
Close the web browser
- Command: close

Code

To try it yourself, save this code as Selenium Demo.side on your computer and open it as a project with the Selenium IDE browser plugin, then click the "Validate the new-tab URL" test and click "Run current test."

{
  "id": "ca2c89aa-50b1-4eea-91e6-c2e01ae6cb0a",
  "version": "2.0",
  "name": "Selenium demo",
  "url": "https://ko-fi.com/",
  "tests": [{
    "id": "e363b287-2838-40db-b1b8-57dd100af3a5",
    "name": "Validate the new-tab URL",
    "commands": [{
      "id": "712005e0-c6ec-4f10-9162-da97499d5e23",
      "comment": "Open Katie Kodes Ko-Fi donations page",
      "command": "open",
      "target": "katiekodes",
      "targets": [],
      "value": ""
    }, {
      "id": "9eaf4f01-f179-4c19-855c-4eb9a1968158",
      "comment": "Click the Katie Kodes blog link",
      "command": "click",
      "target": "xpath=(//a[@target=\"_blank\" and contains(@href, \"katiekodes.com\")])[1]",
      "targets": [],
      "value": "",
      "opensWindow": true,
      "windowHandleName": "blog_new_tab",
      "windowTimeout": 2000
    }, {
      "id": "3c0233e1-b2d4-4c82-b806-7d9133e94e96",
      "comment": "Close the original Ko-Fi tab",
      "command": "close",
      "target": "",
      "targets": [],
      "value": ""
    }, {
      "id": "5683db68-8b78-48a7-b959-84ebccd70119",
      "comment": "Make sure we are viewing the new blog tab",
      "command": "selectWindow",
      "target": "handle=${blog_new_tab}",
      "targets": [],
      "value": ""
    }, {
      "id": "a37060a8-8e9b-4848-9068-f4a1fcb5f2ca",
      "comment": "Wait for something bloggey to be on the screen",
      "command": "waitForElementPresent",
      "target": "xpath=(//a[contains(@href, \"ko-fi.com\")])[1]",
      "targets": [],
      "value": "30000"
    }, {
      "id": "ff897cc8-d4f0-4762-8695-d9551d7f4e96",
      "comment": "Save the blog URL to a variable",
      "command": "executeScript",
      "target": "return document.URL;",
      "targets": [],
      "value": "theurl"
    }, {
      "id": "b3b8f50b-4266-4c68-902b-33e150279274",
      "comment": "Assert that the blog URL is correct",
      "command": "assert",
      "target": "theurl",
      "targets": [],
      "value": "https://katiekodes.com/"
    }, {
      "id": "68c8b88e-84bb-4c80-b914-3a0278995967",
      "comment": "Close the web browser",
      "command": "close",
      "target": "",
      "targets": [],
      "value": ""
    }]
  }],
  "suites": [{
    "id": "398fd234-8bcf-48ff-ab6c-4785b1ab469f",
    "name": "My first suite",
    "persistSession": false,
    "parallel": false,
    "timeout": 300,
    "tests": ["e363b287-2838-40db-b1b8-57dd100af3a5"]
  }],
  "urls": ["https://ko-fi.com/"],
  "plugins": []
}

SvelteKit Minimum Viable Build

Katie — Mon, 10 Jan 2022 17:00:00 +0000

I’m wondering if SvelteKit could make it easy for me to build a UI onto an app to help me write “runbooks” for operational processes at work that happen every few weeks. So, first I have to figure out what goes in a SvelteKit, and as usual, I’m starting as bare-bones as the system will let me.

Process

Get a Netlify.com free account
Set up a Netlify.com site, connected to a GitHub repository, that contains just 4 files:
- /src/routes/index.svelte * /src/app.html * /svelte.config.js
- /package.json
- TEST IT: Make sure you can visit https://your-site.netlify.app/ as expected, without “page not found” errors.
To do: Profit

Magic words

SvelteKit has a “magic folder” path of /src/routes/ (documentation).

As I mentioned for Next.js, static site generator world, “ routing ” tends to refer to the ways you can configure the SSG to turn data you’re feeding it into actual URLs. Most of them have some way of automatically doing “routing” based on the way you named data folders or files, or the way you named template folders or files. Some of them will pretty much eat every folder they can get their hands on and try to route it (11ty); others like SvelteKit seem to favor limiting this behavior, by default, to folders with “magic names” like /routes/ – and then there are some more advanced syntaxes for doing fancier “routing” like looping over a bunch of Markdown files in your codebase and turning them into URLs.

Files

`/src/routes/index.svelte`

(“The filename determines the route. For example, src/routes/index.svelte is the root of your site.“)

<div>Hello world!</div>

`/src/app.html`

Unlike Next.js and Gatsby, SvelteKit won’t implicitly write pages’ outer HTML for you.

By default, that means creating an HTML file at /src/app.html.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        %svelte.head%
    </head>
    <body>
        %svelte.body%
    </body>
</html>

`/svelte.config.js`

To develop locally, you can export an empty object, but you have to have this file, and the moment you want to deploy your site to a host in the cloud like Netlify, you’ll need to start filling it out, so that you can tell Sveltekit to give the cloud builder some extra information that it needs.

import adapter from "@sveltejs/adapter-auto";

const config = {
  kit: {
    adapter: adapter(),
  },
};

export default config;

`/package.json`

Note the "type": "module" property. Best I can tell, this makes sure the import syntax at the top of the config file works properly.

(Also, it seems to be a known issue that you’ll get errors if you try to use devDependencies instead of dependencies on Windows.)

{
    "name": "sveltekit-mvb",
    "version": "0.0.1",
    "scripts": {
      "dev": "svelte-kit dev",
      "build": "svelte-kit build"
    },
    "type": "module",
    "dependencies": {
      "@sveltejs/adapter-auto": "next",
      "@sveltejs/kit": "next",
      "svelte": "next"
    }
}

Output

The resulting page has the following HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <link rel="stylesheet" href="/_app/assets/start-aaaaaa1.css">
        <link rel="modulepreload" href="/_app/start-bbbbbb2.js">
        <link rel="modulepreload" href="/_app/chunks/vendor-cccccc3.js">
        <link rel="modulepreload" href="/_app/layout.svelte-dddddd4.js">
        <link rel="modulepreload" href="/_app/pages/index.svelte-eeeeee5.js">

        <script type="module">
            import { start } from "/_app/start-bbbbbb2.js";
            start({
                target: document.body,
                paths: {"base":"","assets":""},
                session: {},
                route: true,
                spa: false,
                trailing_slash: "never",
                hydrate: {
                    status: 200,
                    error: null,
                    nodes: [
                        import("/_app/layout.svelte-dddddd4.js"),
                        import("/_app/pages/index.svelte-eeeeee5.js")
                    ],
                    url: new URL("https://your-site.netlify.app/"),
                    params: {}
                }
            });
        </script>
    </head>
    <body>


<div>Hello world!</div>

    </body>
</html>

Like with Gatsby and Next.js output, there’s a lot of JavaScript embedded in my page, but the <div>Hello world!</div> I expect to see exists deep in the middle.

Helpful links

This codebase on GitHub

Salesforce Apex lets you use external IDs

Katie — Tue, 04 Jan 2022 00:00:00 +0000

How did I miss this? Salesforce Apex lets you DML lookup and master-detail relationships by external ID.

This is huge for actually letting me leverage the performance benefits of @testSetup and not worry about the fact that it doesn't let you see IDs of records you used it to DML without a SOQL query.

@isTest
public class WowThisWorks {

    @testSetup static void insertSampleData() {
        Lowest__c l = new Lowest__c(External_ID__c='L01', Name='L 0 1');
        INSERT l;

        Middle__c m  = new Middle__c(External_ID__c='M01', Name='M 0 1', Lowest__c=l.Id);
        INSERT m;
    }

    static testMethod void runTest01() {
        Middle__c mFake = new Middle__c(External_ID__c='M01'); // THIS IS THE MAGIC

        Highest__c h = new Highest__c(Name='H 0 1', Middle__r=mFake); // NOTE THE __r INSTEAD OF __C

        Test.startTest();
        INSERT h;
        Test.stopTest();

        Highest__c hAfter = [
            SELECT Name, 
            Middle__r.Name, 
            hAfter.Middle__r.Lower__r.Name 
            FROM Highest__c 
            LIMIT 1
        ];
        String concat = hAfter.Name + ' ~~ ' + hAfter.Middle__r.Name + ' ~~ ' + hAfter.Middle__r.Lower__r.Name;
        System.assertEquals('H 0 1 ~~ M 0 1 ~~ L 0 1', concat);
    }

}

I've got many, many validation tables that Contact can point to, all of which feed into a trigger I need to write tests for. They all have unique required external IDs built into their schemas.

It's going to be amazing to be able to create test-data Contact records that look up these "validation table" records by their external IDs without using up any SOQL queries or caching the "validation table" records in memory in test classes.

Happy new year to me!

Localhost HTML with Python on Windows

Katie — Tue, 09 Nov 2021 15:00:00 +0000

If you’ve ever tried to open a file c:\example\my_web_page.html in a web browser by putting file:///C:/example/webserver/my_web_page.html, you might have noticed that HTML <FORM>...</FORM> tags don’t work like they’re supposed to.

To get an HTML form’s submit button to actually work, you need to visit my_web_page.html at a http://localhost/-style URL, not a file:///C:/-style URL.

On Windows, with the help of Python, you can do this.

(You can see that the submit button does nothing when using a file:///C:/-style URL by opening your browser’s developer tools, going to the Network tab, and clicking the button. Nothing new appears, even though you’d expect a GET request to appear in the logs.)

Here’s the content of my file c:\example\my_web_page.html that refuses to work locally:

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="icon" href="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Ctext%20x='0'%20y='14'%3E❓%3C/text%3E%3C/svg%3E" type="image/svg+xml" />
    <title>I'm a little web page</title>
  </head>
  <body>
    <h1>I'm a little web page</h1>
    <p>short and stout</p>
    <hr />
    <form method="get" action="/the_confirmation_page.html">
      <input type="radio" id="form_yes" name="yesno_answer" value="yes" required />
      <label for="yesno_answer">Yes</label><br />
      <input type="radio" id="form_no" name="yesno_answer" value="no" />
      <label for="yesno_answer">No</label><br />
      <input type="radio" id="form_maybe" name="yesno_answer" value="maybe" />
      <label for="form_maybe">Maybe</label><br /><br />
      <input type="submit" value="Submit" />
    </form>
    <hr/>
  </body>
</html>

And here’s the content of my file c:\example\the_confirmation_page.html. This is a second web page where I’d like the first web page to send my “yes/no/maybe” choice whenever I click the submit button.

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="icon" href="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Ctext%20x='0'%20y='14'%3E☑️%3C/text%3E%3C/svg%3E" type="image/svg+xml" />
    <title>What you chose</title>
    <script>
      const urlSearchParams = new URLSearchParams(window.location.search);
      const params = Object.fromEntries(urlSearchParams.entries());
      const get_h1 = function () {
        if (!!params && !!params["yesno_answer"]) {
          return `I'm so happy you were able to make up your mind that your answer is "${params["yesno_answer"]}."`;
        } else {
          return "Looks like you couldn't make up your mind.";
        }
      };
      const fill_in_h1 = function () {
        document.getElementById("fill_me_in").innerHTML = get_h1();
      };
      window.onload = fill_in_h1;
    </script>
  </head>
  <body>
    <h1 id="fill_me_in"></h1>
  </body>
</html>

You might notice that if you visit file:///C:/example/the_confirmation_page.html?yesno_answer=maybe and play with the value of yesno_answer in the URL, everything works as expected.

It’s not the JavaScript in the confirmation page that doesn’t work with file:///C:/-style URLs.

It’s literally just getting the submit button to work in my_web_page.html’s <FORM>...</FORM> that’s the problem.

To get the submit button in my_web_page.html to work, you have to deliver it to your web browser at an actual URL starting with http://. Which means you have to put it on a web server.

Luckily, with Python, you can run a web server on your own computer, and you don’t even need administrator rights to the computer.

Python prerequisites

You need to get all the way through the “Using our IDE to program” part of my article “Setting up Windows Store Python with Pandas in VSCode” (or have installed Python your own way).
You need to be comfortable running a script called c:\example\hello.py whose source code is print('Hello World') on your computer and validating that you see your computer say “ Hello World ” to you in the script execution environment’s “system output.”

Code the web server

Once you know how to create and run Python files, create one at c:\some_other_folder\webserver.py. I chose a folder called “some_other_folder” to demonstrate that the Python script and the HTML files don’t have to live in the same place on your computer.

Its contents should be:

# Credit to Max Shvedov at https://stackoverflow.com/questions/51189628/simple-http-server-in-python-how-to-get-files-from-dir-path
# Forgot where else I picked up code

import http.server
import socketserver
from os import path

my_host_name = 'localhost'
my_port = 8888
my_html_folder_path = 'c:\\example\\'

my_home_page_file_path = 'my_web_page.html'

class MyHttpRequestHandler(http.server.SimpleHTTPRequestHandler):

    def _set_headers(self):
        self.send_response(200)
        self.send_header('Content-Type', 'text/html')
        self.send_header('Content-Length', path.getsize(self.getPath()))
        self.end_headers()

    def getPath(self):
        if self.path == '/':
            content_path = path.join(
                my_html_folder_path, my_home_page_file_path)
        else:
            content_path = path.join(my_html_folder_path, str(self.path).split('?')[0][1:])
        return content_path

    def getContent(self, content_path):
        with open(content_path, mode='r', encoding='utf-8') as f:
            content = f.read()
        return bytes(content, 'utf-8')

    def do_GET(self):
        self._set_headers()
        self.wfile.write(self.getContent(self.getPath()))

my_handler = MyHttpRequestHandler

with socketserver.TCPServer(("", my_port), my_handler) as httpd:
    print("Http Server Serving at port", my_port)
    httpd.serve_forever()

Start and stop the web server

Run the script (“Run Python File in Terminal”, if using the VSCode play button in the upper right corner).

If Windows Firewall pops up a dialog box, un-check all the checkboxes and click Cancel.

In the “ Terminal ” tab of a panel below your code, you should see the words:

Http Server Serving at port 8888

It should appear below a command prompt that says:

PS C:\Users\YOUR_USERNAME>

Note that unlike the print('Hello World') script, this one won’t have a trailing PS C:\Users\YOUR_USERNAME> after the program’s output.

That’s because the Python program is still running! A web server wouldn’t be very useful if it didn’t run all the time and wait around for people to visit its web pages.

To stop the Python code from running, click in the Terminal pane at the bottom of VSCode and do a Ctrl + C combination on your keyboard (yes, I know that’s usually “copy” in Windows).

In the terminal output, there will be a bunch of text starting with the word “Traceback” and ending with the word “KeyboardInterrupt.” Most importantly, though, you’ll see that you’re back at a fresh PS C:\Users\YOUR_USERNAME> command prompt as the last thing in the terminal.

If for any reason you can’t get this to work, right-click on your Windows taskbar, click Task Manager , click the Details tab, sort the Name column (the first one) alphabetically by clicking on its heading, and scroll down into the P’s looking for a .exe starting with the word “python.” Right-click it and click End task , then End process in the confirmation popup. Close out of Task Manager and head back to VSCode. You should see a fresh PS C:\Users\YOUR_USERNAME> prompt at the end of your terminal output, although without the Tracebak...KeyboardInterrupt content.

Visit your web page

Now that you know how to start and stop the web server, run the Python script in the terminal again to start it.

Open Firefox and visit http://localhost:8888.

(I seem to have written sample Python code that gets into an infinite loop, waiting for the web page to load, with Chrome. Not sure why. Sorry.)

If you’d like, open up the web browser’s developer tools ( Ctrl + Shift + i ) and click on the “ Network ” tab, making sure that under the gear-shaped settings icon at right, “ Persist Logs ” is checked.

Pick one of the radio buttons and click Submit.

Now your web browser should take you to http://localhost:8888/the_confirmation_page.html?yesno_answer=yes (or “no” or “maybe” at the end, depending what you picked) – you’ll see the URL bar has changed – and the web page should tell you it’s so happy you picked “yes” (or “no” or “maybe”).

If you were watching the developer tools Network tab, you should see that you made a request with a method of GET to a domain of localhost:8888 and a file of the_confirmation_page.html?yesno_answer=yes (or “no” or “maybe”), and that the response’s status code was 200.

Back in VSCode, you’ll see two more lines below Http Server Serving at port 8888, followed by the outlined box that indicates your Python program is still running:

127.0.0.1 (or some other IP address) - - [ (a timestamp) ] "GET / HTTP/1.1" 200 -
127.0.0.1 (or some other IP address) - - [ (a timestamp) ] "GET /the_confirmation_page.html?yesno_answer=maybe HTTP/1.1" 200 -

Clean up

Don’t forget to stop your web server with Ctrl+C in the VSCode terminal.

(It doesn’t work if the last part of VSCode you clicked into was the code editor – the key combination is just plain old “copy” up there.)

You’ll see a fresh PS C:\Users\YOUR_USERNAME> prompt at the end of your terminal output when you’ve successfully stopped your server.

Code your web page

I’ll leave the hard part up to you – actually coding my_web_page.html and the_confirmation_page.html to do whatever it was you wanted to test!

Jekyll doesn’t do components? Liar!

Katie — Thu, 09 Sep 2021 15:00:00 +0000

Hot take: anyone who tells you that Jekyll doesn’t support component-based design, and that you need a React- or Vue-based static site generator, is wrong.

Any basic fragment-of-HTML “component” you can define with JSX in a file and then cross-reference as <MyComponent key="value" />, you can just as easily define with Liquid in a file and cross-reference in Jekyll as {% include MyComponent.html key=value %}.
Any basic fragment-of-HTML “layout” you can define with JSX in a file and then cross-reference as <MyLayout>Hello, world</MyLayout>, you can just as easily define with Liquid in a file and then cross-reference in the front matter of a Jekyll template as layout: MyLayout.

Example

Remember my “what you see is what you get” (“WYSIWYG”) componentized Squarespace-style “site builder” I learned Gatsby so I could build last year?

I didn’t actually need Gatsby – here’s the source code in Jekyll, and ta-da, live site.

Drag-and-drop

Need to see with your own eyes that it can have a drag-and-drop CMS experience? Click around this theme in Stackbit and see.

Why Jekyll isn’t perfect

Okay, actually, no one’s wrong, per se, and certainly not lying, about newer SSGs (and their templating languages) helping you develop components easily.

I just wanted to point out that componentizing a site so that you can give content authors a Wix-like drag-and-drop experience comes from:

architecting a data model for that purpose
architecting your static site generator templating for that purpose

You don’t need a JavaScript-based SSG or a “hydrating” SSG or a “modern” SSG or anything of the sort to do really fancy things with “components.”

“Components” are a way of thinking , not a property of a specific SSG templating language.

However, there are some related problems you might run into like:

The syntax can be heavy

Liquid doesn’t really love objects & arrays – particularly not making it easy to instantiate them as literals.

As soon as you want to pass around particularly complicated structured data, or do any fancy preprocessing of it, the amount of Liquid that you have to write really starts to explode, compared to the amount of JSX or Vue.js templating code (which JavaScript – including NPM package imports – slips right into natively) that you have to write.

But also, the syntax can be light

That said, when you don’t have heavy computation to do, I find Liquid’s plain-HTML-like syntax much cleaner and more concise than React’s or Vue’s templating syntaxes, which is why I’m defending Jekyll in the first place.

Here’s what a basic component looks like in React:

import React from "react"

export default function Home() {
  return <div>Hello world!</div>
}

Here’s what that same component looks like in Liquid:

<div>Hello world!</div>

The Jekyll ecosystem is small

It’s not JavaScript all the way down

When you’re using Jekyll, any custom computation you need that exceeds the power of Shopify’s Liquid templating language has to be defined in the Ruby programming language.

I’ll admit, it’s really nice to use one programming language – JavaScript – in:

The front-end code you deliver to site visitors’ browsers alongside your HTML and CSS (in Jekyll, that’s JavaScript).
The HTML templating code (in Jekyll, that’s Liquid).
- Jekyll won’t let you randomly call Ruby’s .map{} within Liquid template code. You have hand-add Ruby code to the Liquid specification as a “Liquid filter” using Jekyll’s “plugins” functionality.
- React/Vue-based SSGs, however, will let you randomly call JavaScript’s .map() within their templating languages, because it’s built into the syntax of the templating languages themselves that you’re allowed to do that.
Deep-back-end functionality (in Jekyll, that’s Ruby).

NPM > Gems

Let’s be honest, these days all the cool stuff – particularly for supporting web site generation – is an NPM package, not a Ruby Gem. Like libraries that:

Import content from Sanity CMS
Render front-end HTML & CSS & JavaScript that embeds a video player into your web site

Content editing tools are scarce

Headless CMS is tough

Jekyll is old, and it doesn’t bake in a presumption that you’ll be fetching external API-based headless CMS data into your build the way Eleventy does.

To use data from Sanity, Contentful, the Notion API, the Wordpress API, etc. you literally have to run (and possibly hand-write) code that dumps API-sourced data into files on your filesystem that Jekyll can understand, before running jekyll build. (A couple of pre-written libraries: jekyll-contentful-data-import, Sourcebit.)

You can 100% build a really well-componentized theme in Liquid, as I’ve shown above. But the whole point of building a componentized theme is to give people a Wix-like experience through a drag-and-drop GUI editor, and most of the good content management user interfaces are built into API-based headless CMS websites.

Few Git-based CMS options

There are drag-and-drop content editors that play nicely with storing your content in the same Git repository as the site’s template codebase, like Netlify CMS and Forestry.io, but they’re not truly WYSIWYG experiences.

TinaCMS is a Wix-like experience, but it doesn’t support Jekyll. From what I can tell, it leverages the front-end code that newer site generators like Gatsby and Next “hydrate” into the “DOM” to support its drag-and-drop functionality.
The only Wix-like experience I’ve found so far that supports Jekyll is Stackbit … but who knows if they will forever? I can’t imagine that adding a live-edit drag-and-drop skin to Jekyll’s localhost engine has been easy for them to code, as amazing of a gift to the world it’s been that they figured it out.

Next.js Minimum Viable Build

Katie — Mon, 23 Aug 2021 17:00:00 +0000

Like with Gatsby for novices and dabblers, I need to work my way through Next.js, because I find it intimidating.

Process

Get a Netlify.com free account
Set up a Netlify.com site, connected to a GitHub private repository, that contains just 2 files:
- /src/pages/index.js
- /package.json
- TEST IT: Make sure you can visit https://yoursite.netlify.com/ as expected, without “page not found” errors.
To do: Profit

Magic words

Next.js has a “magic folder” path of /pages/, or /src/pages/ (documentation). I’ve learned since I started all this that in the static site generator world, “ routing ” tends to refer to the ways you can configure the SSG to turn data you’re feeding it into actual URLs. Most of them have some way of automatically doing “routing” based on the way you named data folders or files, or the way you named template folders or files. Some of them will pretty much eat every folder they can get their hands on and try to route it (11ty); others like Next.js seem to favor limiting this behavior, by default, to folders with “magic names” like /pages/ – and then there are some more advanced syntaxes for doing fancier “routing.”

Files

`/src/pages/index.js`

Since Gatsby and Next.js both use React / JSX as a templating language, I simply reused my /src/pages/index.js file from Gatsby minimum viable build:

(“Any React component defined in pages/*.js or src/pages/*.js will automatically become a page.“)

import React from "react"

export default function Home() {
  return <div>Hello world!</div>
}

`/package.json`

{
  "name" : "netlify-nextjs-test-01",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "develop": "next dev",
    "start": "next start",
    "build": "next build"
  },
  "dependencies": {
    "next": "latest",
    "react": "latest",
    "react-dom": "latest"
  }
}

Output

The resulting page has the following HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <meta name="next-head-count" content="2" />
    <noscript data-n-css=""></noscript>
    <script defer="" nomodule="" src="/_next/static/chunks/polyfills-a54b4f32bdc1ef890ddd.js"></script>
    <script src="/_next/static/chunks/webpack-61f1b6d34e7ba415b8c1.js" defer=""></script>
    <script src="/_next/static/chunks/framework-9e6ae5c73d4e43bf334d.js" defer=""></script>
    <script src="/_next/static/chunks/main-b9780dc6f4fa7abb3771.js" defer=""></script>
    <script src="/_next/static/chunks/pages/_app-76f68770679821db743d.js" defer=""></script>
    <script src="/_next/static/chunks/pages/index-518723d5d0e877e1fb3f.js" defer=""></script>
    <script src="/_next/static/7d3ar6btJVD3RfAMzzNO0/_buildManifest.js" defer=""></script>
    <script src="/_next/static/7d3ar6btJVD3RfAMzzNO0/_ssgManifest.js" defer=""></script>
  </head>
  <body>
    <div id="__next"><div>Hello world!</div></div>
    <script id=" __NEXT_DATA__" type="application/json">
      {
        "props": { "pageProps": {} },
        "page": "/",
        "query": {},
        "buildId": "7d3ar6btJVD3RfAMzzNO0",
        "runtimeConfig": {},
        "nextExport": true,
        "autoExport": true,
        "isFallback": false,
        "scriptLoader": []
      }
    </script>
  </body>
</html>

Like with Gatsby output, there’s a lot of JavaScript embedded in my page, but the <div>Hello world!</div> I expect to see exists deep in the middle.

Posts In This Series

Part 1 - Next.js for novices and dabblers
Part 2 - This Article

Helpful links

This codebase on GitHub

Open a Salesforce scratch org in a different browser with CumulusCI

Katie — Sat, 10 Jul 2021 15:00:00 +0000

Using Salesforce's CumulusCI to manage SFDX scratch orgs? I am. I was working from a machine where Firefox is the default web browser, and Firefox didn't play nicely with Lightning-mode editing of custom metadata types (it wouldn't ever render the main part of the page where I edit types). Nor would Firefox let me switch to Classic mode (it kept logging me out of the scratch org). This is how I managed to open the scratch org in Chrome.

This was the command I had been using to open a scratch org called dev from within a VSCode command prompt whose base folder was a codebase already configured to work with scratch orgs from a given real "hub" org:

cci org browser --org dev

Luckily, it came with --help instructions at the command line that were useful:

> cci org browser --help

Usage: cci org browser [OPTIONS] [ORGNAME]

  Opens a browser window and logs into the org using the stored OAuth
  credentials

Options:
  --org TEXT       Alternate way to specify the target org. By default, runs
                   against the current default org.

  -p, --path TEXT  Navigate to the specified page after logging in.
  -r, --url-only   Display the target URL, but don't open a browser.
  --help           Show this message and exit.

So next, I tried:

cci org browser --org dev --url-only

It displayed a URL that, sure enough, I could copy, paste into Chrome, and log into this scratch org with.

Much better -- now I can see the body of https://my-dev-scratch-org.lightning.force.com/lightning/setup/CustomMetadata/home.

Tip: Ctrl+Click on the link makes VSCode give me an option to copy rather than open. This saves me from having to carefully select the URL from beginning to end.

Adding Tailwind to a Jekyll site on Windows

Katie — Tue, 06 Jul 2021 15:00:00 +0000

I've been wanting to migrate one of my web sites from the Github Pages Jekyll to 11ty for a while so that I could use Tailwind CSS and facitate a redesign of the look and feel.

In the end, I realized that migrating old .md files w/o breaking anchor links to subsections was going to be a regex nightmare, and I'd be better off figuring out how to add Tailwind to Jekyll.

Minimum viable build

I put up my working code at Github, and here's a live demo.

This is the first codebase I got working while implementing Steven Westmoreland's and Marcin Doliwa's directions to add Tailwind to this tiny Jekyll site.

I failed trying a million and a half more complex starters involving webpack, gulp, etc. I'm glad the solution turned out simple in the end (Ruby's jekyll-postcss plugin).

Clone it, run it, and play with the Tailwind classes in pages/index.md yourself.

Issues

JIT

jekyll-postcss works just fine, as long as you don't expect Tailwind to work in JIT mode (bug report 1, bug report 2).

SCSS

I also haven't gotten this architecture properly handling an assets/css/main.scss (note Scss) file; just plain CSS.

Windows

If your localhost environment is on Windows, jekyll-postcss will fail with an ENOEXEC Exec format error something like this:

...
Conversion error: Jekyll::Converters::PostCss encountered an error while converting 'assets/css/main.css':
                    Exec format error - C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-postcss-0.4.1/bin/postcss '{"raw_content":"@import \"tailwindcss/base\";\n@import \"tailwindcss/components\";\n@import \"tailwindcss/utilities\";"}'
...
C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-postcss-0.4.1/lib/jekyll-postcss/socket.rb:20:in ``': Exec format error - C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-postcss-0.4.1/bin/postcss '{"raw_content":"@import \\"tailwindcss/base\\";\\n@import \\"tailwindcss/components\\";\\n@import \\"tailwindcss/utilities\\";"}' (Errno::ENOEXEC)
...

You have to install the Windows Subsystem for Linux (WSL) as in Scott Hanselman's instructions and run Jekyll from a WSL command line.

(Be sure to remember to run bundle install and npm i in WSL first to install the Ruby and Node.js codebases.)

Thanks to Veselin Romic and Brittney Postma for debugging my stacktrace.

Github Pages

Adding Tailwind to Jekyll requires moving the site off of GitHub Pages as a build engine, because GitHub Pages doesn't let you use more than a few preapproved Jekyll plugins, and jekyll-postcss isn't one of them.

This migration will involve writing a Gemfile and letting a less restrictive build engine + CDN, like Netlify, build and host the site instead.

(I mean, you could use a build engine and have it write output to GitHub and use GitHub Pages to host that output, but ... why, now that services like Netlify exist?)

GitHub provides a github-pages plugin that can be added to a Gemfile to facilitate building sites written for their environment to a different build engine (it also helps w/ localhost development, as ). It looks like github-pages-unscramble might be handy, too, when the time comes.

Other notes

For convenience, my sample web site includes some package.json commands that let you type less text to kick off Jekyll.

Instead of running NODE_ENV=production JEKYLL_ENV=production bundle exec jekyll build
Instead of running NODE_ENV=development JEKYLL_ENV=development bundle exec jekyll serve you can run npm run develop or npm run dev.

Background (why Tailwind)

When I first encountered utility CSS class libraries like Tailwind, I hated them. Who on earth would want to take easy-to-read HTML and turn it into such a nightmare?

However, once I got used to it (so that I could start playing with copy-paste pre-styled page section component libraries like Tailwind UI), and once I got used to sectioning static site generator templates appropriately for page section components, suddenly the idea of styling components anywhere but within the file that the HTML lived in seemed disorganized & annoying.

As verbose as utility classes could be, at least they lived & died with their HTML, and that was comforting somehow.

I could add or remove page elements at will and not worry about breaking things or leaving behind confusing artifacts.

I've recently worked out how to add Algolia search to a Jekyll site, but the navigation bar on that site was a "don't touch code you don't understand" hot mess. I've worked out a navbar I trust over the last few months in Tailwind, and into which I've successfully put a search widget. I decided I'd be best off just rearchitecting the whole site's theme to be componentized & to use Tailwind CSS, so that it'd be easy not only to add search, but anything else that might come up in the future.

Jamstack live preview tooling (a Next.js Conf reaction list)

Katie — Tue, 15 Jun 2021 16:00:00 +0000

Vercel announced Next.js Live, real-time previews with live collaborative editing at Next.js conf.

This seemed like a good time to list all the options I’ve explored over the past year.

Next.js Live

The landing page is hot pink, purple, and intense sky blue. Who cares about the product? Their landing page wins.

Okay, for real, I’m guessing this is a VSCode-based localhost-in-the-cloud product like I covered in “Stackbit can teach you web development,” and I’ll bet there are a lot more coming from a glut of companies. I wouldn’t be surprised if it’s standard within a year for Jamstack tooling.

(Way to date my post and make it possibly age like milk.)

The main value-add I’m seeing from the landing page is whatever front-end special sauce Vercel added to their preview renders for doodling on the preview.

Stackbit Studio

In April, Stackbit added VSCode to a product whose bread and butter has always been a localhost-in-the-cloud product.

Stackbit’s value-add front-end special sauce, added to their preview renders, has, of course, always been the ability to type onto the page and edit content.

They also did a nifty thing w/ the VSCode editor where you can click parts of the preview render and jump to the line of SSG code most directly responsible for it.

Gatsby Cloud Preview

It’s been a while since I looked into Gatsby Cloud. They’ve changed their plans since I blogged about their preview-URLs-without-a-full-branch-rebuild feature, but when I did, one problem was that the links weren’t stable, and that you didn’t really have another business reason to be in the tooling where you’d grab a fresh link the way you would in, say, a VSCode-editor interface like Next.js Live or Stackbit. I’d be really surprised if Gatsby didn’t throw a VSCode embed into some sort of tool just to keep up with the Joneses against Next.js.

Netlify Deploy Previews

I haven’t played w/ Deploy Previews … does anyone know if they’re live (as in localhost-in-the-cloud, not “I’ll rebuild a preview site when you commit an update to a feature branch”) previews? Or if they’re just a comment-doodling system laid on top of feature-branch built sites?