Published
Weekend Reading — 👋 Happy new year!
I’m ready for 2023, are you? This week we got fresh UI components, rendering HTML with React, GPT prompt reverse engineering, and ultimate LEGO.
Moose “It's almost 2023, and I'm ready!”
Tech Stuff
uiverse.io A collection of fun interactive UI elements (buttons, loaders, inputs, etc).
All the elements are HTML and CSS, so they work with any framework. There's no UI consistency here — this is not a UI framework or design system — rather a variety of options to make your UI more interesting.
Interweave Sometimes you have to render HTML with React and not with dangerouslySetInnerHTML:
- Render 3rd party HTML that is XSS-safe (no scripts, no JS links, etc)
- Customize the rendered elements, eg add CSS classes, zoomable UI for images
- Apply text transformations: auto-link URLs, mentions, etc
- Emojis!
I'm using this in Roam, where I'm rendering 3rd party HTML (posts from different Mastodon servers), and using transformations to support custom emojis.
I tried a couple of other React HTML libraries, Interweave is my favorite so far.
import { Interweave, Node } from 'interweave';
function transform(node: HTMLElement, children: Node[]): React.ReactNode {
if (node.tagName === 'a') {
return <Link href={node.getAttribute('href')}>{children}</Link>;
}
}
<Interweave transform={transform} />;
Lyra In-memory full-text search engine that can run in any JavaScript runtime (browser or server, no dependencies)
Hono - Ultrafast web framework for Cloudflare Workers, Deno, and Bun Hono is an Express-like framework for JavaScript runtimes that use the fetch API: Cloudflare Workers, Deno, Bun, etc. Comes with Typescript and JSX support.
It also bundles a lot of common practice middleware — logging, caching, JWT, CORS, ETags, static files, GraphQL, Sentry — so you can get started without much setup. (fetch itself already supports query parsing, JSON, and HTML forms)
import { Hono } from 'hono'
import { basicAuth } from 'hono/basic-auth'
const v1 = new Hono()
v1.get('/posts', (c) => {
return c.text('list posts')
})
.post(basicAuth({ username, password }), (c) => {
return c.text('created!', 201)
})
.get('/posts/:id', (c) => {
const id = c.req.param('id')
return c.text(`your id is ${id}`)
})
const app = new Hono()
app.route('/v1', v1)
Superdiff Compare two arrays or objects and return a complete diff of their differences in a readable format.
Compress An Image Before Upload With JavaScript How to compress images on the client before uploading them. Typically servers would have some size limit (KB or even pixels), and instead of showing an error message, you can downscale the image before uploading.
Happy “Don’t Forget to Update the Copyright Notice on Your Website” Day!
Almost nobody knows how copyright works. We add copyright date on our websites because we've seen other people do it, so it must be some "best practice".
Almost nobody knows how copyright works. The copyright date reads like a "fresh by" date, and just so you know, if your "fresh by" date is last year, we silently judge you.
TL;DR you most likely don't need a copyright date on your site, but if you have a "fresh by" date on your site, don't forget to refresh it.
The worst-selling Microsoft software product of all time: OS/2 for the Mach 20 According to legend …
According to that person’s memory (which given the amount time that has elapsed, means that we should basically be saying “according to legend” at this point), a total of eleven copies of “OS/2 for Mach 20” were ever sold, and eight of them were returned.
forrestbrazeal@hachyderm.io “Just saying.”
Eye for Design
Nic Magnier “It’s important to put the sign that dogs are not allowed where dogs can actually see it. That’s good user experience.”
Peoples
Digital detoxes don’t actually work (I thought it was best to post this *after* the holiday break)
Moreover, this international study found that those who took a break from social media didn’t replace online socializing with face-to-face, voice, or email interactions, as the researchers had expected. Taking a break from social media therefore led to reduced overall interaction and loneliness as social media was not replaced with forms of socializing.
“So what are you going to do?”
“Ask my boss for a raise.”
“Because what are you?”
“I’m a pelican.”
“And not a...”
“Pelican’t.”
“That’s right.”
“Thanks Marty, I really needed that.”
“No problem, buddy.”
Business Side
What Can We Learn from Barnes & Noble's Surprising Turnaround? How to build a better business:
-
Find a leader who loves their customers (in this case, book readers)
-
Delegate more responsibility to people directly dealing with customers
-
Do things that competitors can't (eg Amazon can't offer the same in-person experience and personal recommendations)
This is James Daunt’s super power: He loves books.
“Staff are now in control of their own shops,” he explained. “Hopefully they’re enjoying their work more. They’re creating something very different in each store.”
This crazy strategy proved so successful at Waterstones, that returns fell almost to zero—97% of the books placed on the shelves were purchased by customers. That’s an amazing figure in the book business.
But there is a very important step 0. You have to first take a massive hit.
The old Barnes & Noble couldn't have done this. Shareholders expected it to compete on volume and operational efficiency, hence the ill-fated Nook, online store, toy sales, etc.
Only when that strategy doesn't work out – Barnes & Noble shrinks, Borders goes under — can you pursue a “be different” strategy.
Machine Thinking
Reverse Prompt Engineering for Fun and (no) Profit If you ask nicely, GPT will give out its prompts. swyx asks nicely and finds the prompts behind Notion's new AI feature (which is a really well-done AI assistant).
The post goes over 7 techniques for convincing GPT to spill its secrets. Personal experience, you don't need all 7 techniques or even one. Most prompts are not that sophisticated.
Though I enjoyed reading this article, peering into the "mind" of the LLM.
awesome-chatgpt-prompts is a collection of many different prompts for ChatGPT. They're all different permutations of "act as" for many different and practical use cases.
If you need a prompt, this is a good place to start. If you can't find what you're looking for, you can probably figure out the pattern, and write your own award winning prompt. I bet we can even train AI on this dataset to generate prompts on any subject.
Everything Else
Mike Mika “The LEGO set to end all LEGO sets.”
Any burrito can be a breakfast burrito if you just woke up.
"And I'd like to thank Sisyphus for getting the ball rolling on this"
Tonight I decided to add candy eyes to our chocolate-dipped strawberries, only to learn that when it comes to desserts there is a very, very fine line between “whimsical” and “cursed”
me: the constitution says I have the right to assemble
Ikea clerk: you have to buy it first
“You know, I could just grab a fish.”
“That's not the point, Gerald.”
The First Americans – a story of wonderful, uncertain science
We know that the Americas were the last continents that anatomically modern Homo sapiens – humans like us – entered, but we don’t know exactly how this happened.
Dgar “It happened again.”
