Monday, March 25, 2024

baby mock json endpoint server and cloning endpoints

My boss thought it strange that we didn't already have a "mock server" so that we could keep doing UI work in case the endpoints went down.

He suggested using json-server but that wasn't made to emulate a rich set of endpoints, just one level deep, either GETing all the entries or just one at a time by id. Luckily that kind of server is the easy part of the assignment.

The first part was to make a file "urls.txt", with just the relevant part of the endpoint...

then this script load-db.js hits each of those entries and writes the content to a file in mocks/

const express = require("express");
const fs = require("fs");
const path = require("path");
const app = express();

// Ensure the mocks directory exists
const mocksDir = path.join(__dirname, "mocks");
if (!fs.existsSync(mocksDir)) {
fs.mkdirSync(mocksDir);
}

// Read the command line argument for the prefix
const prefix = process.argv[2];

// Read the URLs from urls.txt
const urlsFilePath = path.join(__dirname, "urls.txt");
const urls = fs.readFileSync(urlsFilePath, "utf8").split("\n");

// Function to make a safe filename from a URL path and append .json
const makeSafeFilename = (urlPath) => encodeURIComponent(urlPath.replace(/^\//, "").replace(/\//g, "_")) + ".json";

// Fetch content and save it as JSON
urls.forEach(async (urlPath) => {
if (!urlPath.trim()) return; // Skip empty lines
const content = await fetch(`${prefix}${urlPath}`).then((res) => res.json());
const safeFilename = makeSafeFilename(urlPath);
fs.writeFileSync(path.join(mocksDir, safeFilename), JSON.stringify(content, null, 2));
console.log(`Saved content from ${urlPath} to ${safeFilename}`);
});

Then the server.js just looks like this:

const express = require("express");
const fs = require("fs");
const path = require("path");
const cors = require("cors");
const app = express();

app.use(cors());

const mocksDir = path.join(__dirname, "mocks");

app.get("/", (req, res) => {
fs.readdir(mocksDir, (err, files) => {
if (err) {
console.error(err);
return res.status(500).send("Server error");
}

const links = files
.filter((file) => file.endsWith(".geojson") || file.endsWith(".json"))
.map((file) => {
const decodedFilename = file.replace(/\..+$/, "").replace(/_/g, "/");
const encodedPath = decodedFilename
.split("/")
.map((part) => encodeURIComponent(part))
.join("/");
return `<li><a href="/${encodedPath}">${file}</a></li>`;
})
.join("");

res.send(`<ul>${links}</ul>`);
});
});

app.get("*", (req, res) => {
const safeFilename = encodeURIComponent(req.path.replace(/^\//, "").replace(/\//g, "_"));
const filePath = path.join(mocksDir, safeFilename);

if (fs.existsSync(`${filePath}.geojson`) || fs.existsSync(`${filePath}.json`)) {
res.type("application/json");
res.sendFile(fs.existsSync(`${filePath}.geojson`) ? `${filePath}.geojson` : `${filePath}.json`);
console.log(req.path);
} else {
res.status(404).send("Not Found");
console.error(`404 ${req.path}`);
}
});

// Use environment variable for port or a default value
const port = process.env.PORT || 3000;

app.listen(port, () => {
console.log(`Mock server listening at http://localhost:${port}`);
});




package.json is

{
"name": "mock-server",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node server.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"cors": "^2.8.5",
"express": "^4.18.3",
"node-fetch": "^3.3.2"
}
}



(Sigh, I suppose if I was feeling ambitious I should make my a little project out of this and put it on github, but I'm sure someone has, and better.)

UPDATE: this version now lists the endpoint/files it knows about if you go to the root, and listens to process.env.PORT for instructions on port

Saturday, March 16, 2024

jQuery revisited

It's funny, M-W I ran myself a little ragged substitute teaching each night from like 5-10:30.

But Wednesday it was a lesson in jQuery - obviously the curriculum is a little long the tooth (pointing out yes, jQuery is passe but still shows up on like 70-80% of websites) but it was like revisiting an old friend you hadn't seen in ages.


Nowadays browsers are pretty much standardized, and the "fetch" library covers AJAX pretty well - two of the sweet spots jQuery fixed - But to think jQuery was making both easy decades ago! For a long time I was a big fan of https://youmightnotneedjquery.com/ which showed the Vanilla equivalent of most of the important jQuery uses - though the jQuery syntax is generally cleaner. Honestly, jQuery's syntax for animating an item is still much more intuitive than CSS Animations if the situation is imperative and not the result of a screen scroll or what not. (I learned CSS hand-in-hand with jQuery and they were like the perfect complements to take in together)


But try and argue that "hey PHP and jQuery were/are pretty good" and they laugh you out of the room. (Or more realistically, make a mental note that you may be too old and out of it to hire) Ignoring the counter vibe that "oh maybe rendering everything on the client for the last ten years was a mistake" - but server side rendering (in PHP) and dolling things up as needed (in jQuery, or Vanilla JS) is pretty fast and effective AND stable - I have websites that keep running and running with zero maintenance needed, but when it's time to add a feature, that's pretty straight forward as well. (Hell, one of the young punk frameworks is "htmx" - its big trick is stuffing html bits from the server right into the DOM.  Which has been a single command in jQuery

$( "#resultdiv" ).load( "ajax/test.html" );
 

for years and years.)

And of course there's always Pieter Levels sticking to a PHP and JQuery stack for multiple sites that each pull in tends of thousands per month. 

Heh, maybe jQuery needs its own Taking PHP Seriously page for me to link to when I'm feeling defensive - well, no i do stick with Vanilla.js over jQuery - but it's not that much better, except it feels great to not have the dependency.

Thursday, March 14, 2024

the 3-minute programmer

My partner Melissa got us a cool game - OuiSi. Mostly it's a bunch of very pretty, somewhat abstract photo cards, and then the book that comes with it lists different games, some creative, some a bit more competitive.

One is cooperative  yet competitive- "OuiSi Capture" - it plays a bit like "Codenames", the group lays out a 5x5 grid of cards, and each round one person is the designated "clue-giver" and picks one word to describe exactly 5 photos. The other players try to guess the five - each correct card is a point for the communal pile, each wrong guess gives 2 points to the penalty pile - first pile to 25 wins. 

The game suggests arranging 5 coins behind a screen to help remember which cards the clue giver picked, but I thought it would be a little easier to have a webpage to run on a laptop to record the picks. Melissa didn't want to wait for me to program, but I promised her I could get it done in 3 minutes...

ChatGPT to the rescue!

The prompt:

give me an html page with 5 by 5 thing of regular pushbuttons. Each button is a square. Caption for each starts with "_". When it's click it toggles back and forth to "X" and "_"
 
Here's the result! Worked like a charm

Wednesday, March 6, 2024

vanilla, it's the finest of the flavors

 What is Utility-First CSS? - ripping into what is almost certainly a terrible paradigm for CSS modeling.

With so many frameworks and toolkits out there, it feels like a lot of people haven't noticed that Vanilla JS and CSS have gotten pretty good and are certainly reasonable choices for many tasks. I think the secret sauce is browsers that embrace some brilliant emergent standards - and also helped by browsers that update themselves, unlike the bad old days of wondering what version of IE you had to support. (And for better or worse the number of rendering engines has dramatically diminished, so bad quirks are even less common.) Related: A Manifesto for Small Static Web Apps

Monday, March 4, 2024

more on the early prototype

My manager encourages us to look to Steve Jobs for inspiration, and I was surprised I hadn't posted about some iPod and iPhone prototypes that were making the rounds a while back - one is this beauty of a breadboard mockup for the first iPod:


 (I think the screen is about the size of what they had on the first production unit, which gives you an idea of what an absolute unit this is)

The other is competing prototypes for what would run on iPhone - when this video dropped people were surprised that a wheel-based concept was in the running. (But remember how psyched people were that iPhone ran a flavor of OSX? Now it seems inconsequential or obvious, like any gadget running a stripped down version of the linux kernel...)