Steve Harrison

What's new in CSS in 2023

Mon, 30 Oct 2023 00:00:00 GMT

Here’s a PDF copy of my slides from my talk “What’s new in CSS in 2023” at Web Directions Summit.

Exploring CloudKit JS

Fri, 13 Sep 2024 00:00:00 GMT

Apple’s CloudKit framework offers a secure way to store app data and make it available to all of a user’s Apple devices, tied to their Apple account. I was looking into it recently, and I noticed that they also have the ability to use it on the web. Enter CloudKit JS. You can access CloudKit data on the client-side using a client token (covered below), or also directly server-side using a private server token. I found the whole experience quite confusing, so this post will show you all the steps you need to get started with CloudKit on iOS and web in 2024!

I’ve created a GitHub repository with two examples of a simple task list app that connects to CloudKit to read / write tasks:

Vanilla HTML + JavaScript page
Modern Next.js app using React, TypeScript, Tailwind CSS, & shadcn

GitHub - steveharrison/cloudkitjs-examples

Contribute to steveharrison/cloudkitjs-examples development by creating an account on GitHub.

GitHub

I recommend you check out this repo as I’ll reference it later.

iOS

Firstly, to use CloudKit, you need to have a paid Apple developer account. Start by downloading an example CloudKit iOS app (you can create the app yourself following this YouTube tutorial, which I found very helpful) and open it in Xcode. Before you run it, you need to modify the following under Targets > TaskTracker > Signing & Capabilities:

Select your own Team.
Edit Bundle Identifier to your own custom bundle identifier.
Uncheck the existing container under Containers.
Under Containers, click the plus button and enter your bundle identifier. It will add “iCloud.” to the beginning once created, but this mustbe the same as your bundle identifier. (I didn’t realise this initially.)
Wait 5 min or so. It takes some time for iCloud to create the container, and even once it goes from red to black when you click the refresh icon to the right of the plus, it may not be fully initialised yet.

While not required, I also recommend modifying the addTask function in Models > Model.swift to the following code that doesn’t swallow errors and logs what’s happening in case something fails:

func addTask(taskItem: TaskItem) async {
    debugPrint("addTask called with taskItem.record", taskItem.record)

    do {
        let record = try await db.save(taskItem.record)
        guard let task = TaskItem(record: record) else { return }
        tasksDictionary[task.recordId!] = task
        debugPrint("saved record is ", record);
    } catch {
        debugPrint("Error saving record: \(error.localizedDescription)")
    }
}

Now you should be able to run the project in Simulator. Once the iOS app appears, click the home button in the top of the simulator, go to the Settings app, and sign in to your iCloud account just like you would on your phone. Once signed in, return to the app, add a new task in the input, press Return, and you should see it appear in the task list.

Next, let’s see the data in the CloudKit Dashboard:

Navigate to https://icloud.developer.apple.com/dashboard/database.
If you have multiple accounts, select the account you used in Xcode.
Switch to the container you created in Xcode in the top left menu.
Select Schema > Indexes and add an index as follows:

This is a critical step that you have to do for every CloudKit database if you want to be able to view the records in the dashboard. (Another gotcha that I missed trying to get the example working before watching the full tutorial video.)

Now you can go into Data > Records, select Private Database, select TaskItem as the Record Type, and click Query Records. You should now see the tasks you created in the iOS app displayed in the table below:

Great! Now we have CloudKit working on iOS, let’s get it working on a webpage.

Vanilla HTML + JS

Go to the CloudKit Dashboard > Settings > Tokens & Keys and click New API Token.

Enter a name for the key and use the default settings:

Copy the API key value to the clipboard.

Make sure you’ve cloned the cloudkitjs-examples repo and then open vanilla.html in your favourite code editor. Replace the apiKey value with the one you just generated. Change containerIdentifier to your container ID.

Now cd into the cloudkitjs-examples directory and run npx serve . Navigate to http://localhost:3000/vanilla.html in the browser (or whatever port you see in the Terminal output from npx serve). You need to run a local server rather than using file:// as CloudKit JS will set cookies.

You should see a “Sign in with Apple” button: click it and follow the steps to sign in with your Apple ID (it should be the same ID you signed into the iOS Simulator with). Then you should see something similar to the following (you may have to refresh the page after signing in):

If you type something into the text field and click Add, it will create a new record in CloudKit that you should be able to see in the dashboard and the iOS app. If you add new records there and refresh the web app, you should see the updates.

The JS code in vanilla.html is a lot simpler than the example Apple code at https://cdn.apple-cloudkit.com/cloudkit-catalog. I initially tried copying and pasting code from here, but they reference non-existent functions and specify all sorts of optional arguments, which is not a great starting point when you want to see the simplest way to use it. I used a combination of ChatGPT and manually going through the example code to figure out what the bare minimum is.

Next.js app

While the vanilla example should be enough to see how to use CloudKit JS on the web, this is a very contrived example and most modern web apps will be built using a bundler and frameworks like Next.js, which is why I developed an example for this too.

Open the nextjs-cloudkit folder in your favourite code editor. Edit store.ts with your API key and container ID, then start the project in Terminal:

cd nextjs-cloudkit
npm i
npm run dev

You should see the following screen:

You should be able to add a new task and see it at the top of the list. If you look at the code, you can see that Apple’s CloudKit JS was designed before Promises and async/await, but that doesn’t mean we can’t wrap their methods in Promises ourselves and await these wrapper functions, which is what I’ve done in store.ts. Apple also recommends you host the CloudKit JS through their CDN, but we typically bundle JS libraries these days to avoid race conditions (you’ll notice we had to use a window.addEventListener('cloudkitloaded') in the vanilla JS version) and dependencies breaking, so I’ve used a TypeScript wrapper called tsl-apple-cloudkit, which also gives types for most of the library.

These examples only cover some of the possibilities in CloudKit JS—we haven’t covered updating tasks (e.g. changing the isCompleted field), deleting them, listening for new changes, etc. However, you should be able to use these functions in a similar way to the core reading/writing/auth functions that I’ve covered here.

I hope this helps, and let me know if you have any issues / improvements to suggest. 🙂

How to avoid npm link issues

Thu, 09 Oct 2025 00:00:00 GMT

When using component libraries, you’ll often need to use npm link in order to test changes to the component library in an app that uses the component library locally.

Let’s say you’re working on a dashboard in a company-portal project and you’re using a Button component from your company’s component library, @my-org/component-library. It turns out you need an outline button variant that hasn’t been created yet in the component library.

In the component library, you run npm link. Then in company-portal, you run npm link @my-org/component-library.

When it all goes smoothly, you can run local dev servers in the company-portal and @my-org/component-library projects and any new changes you make to the Button will reflect across in company-portal. Then, when you’re satisfied with your component library changes, you can release a new NPM package, run npm unlink in company-portal, and then install the published package.

However, oftentimes it does not go smoothly. Here are some scenarios I’ve run into and how to avoid them:

Make sure the Node versions are the same in both Terminal windows.

If you use a tool such as nvm to switch between different versions of Node, it can be easy to accidentally be running, say, Node 20 in one Terminal window and Node 22 in the other window, particularly if the default version in new windows is different from the version your project uses.

Needless to say, npm link only works within the current Node environment, so if you try to npm link @my-org/component-library in a different Node environment, you’ll get an error saying that it can’t find it.

One way to make it harder for these kinds of accidents to happen is to use a .npmrc file to automatically set the version of Node for the project and to use the same Node version across all your projects.
Check that the symlink has actually been created.

Look in node_modules and check that the symlink is valid. This will let you know whether the linking process succeeded or not. Sometimes I’ll find that this still has the installed package, which is a top culprit for your component library changes not appearing. Symlinks are displayed differently in different editors. I find that Finder (say that faster! 😉) in macOS displays them very clearly like so:

My favourite editor, Nova, displays:

Visual Studio Code displays a little arrow icon to the right, but then shows the contents of the symlinked folder right below, so pay attention to whether the arrow is there or not:
Check that the file you’re trying to import actually exists.

In some cases, the build process may not be working as intended in your component library, so even though the symlink is working, the files that company-portal are importing are not there. So double-check that you’re running a dev server that generates the correct build files, or make sure you’ve run an npm build command in the component library and that all assets such as JS, CSS, and image files are present in the expected dist folder structure.
Ditch the dev servers and create production builds in both projects.

Sometimes, I’ve run into dev mode quirks and caching issues, so if all else is failing, stop the dev servers and do a full production build in both projects (e.g. if company-portal is a Next.js app, npm run build && npm run start) to see if the same error occurs. Remember to do the component library build first. 🙂
Clear .next cache.

Local-first development & InstantDB

Fri, 04 Oct 2024 00:00:00 GMT

An emerging trend that I think is as exciting as AI and crypto is local-first development. The general idea is that apps should be able to work offline, support realtime collaboration easily (e.g. editing the same document in Google Docs) when online, and that users should be able to own their data if they want to access it / your company goes out of business. There’s a whole community of researchers and developers working on it now. A popular app built around this philosophy is the note-taking app Obsidian, where all your notes are stored as Markdown files in a folder on your computer. The Obsidian CEO published a post, File Over App, that talks about the benefits of this approach in more detail.

I recommend reading Martin Kleppmann’s 2019 paper, You own your data, in spite of the cloud—it’s long but a great read!

You can see a whole list of services emerging built around this philosophy, such as Turso, WatermelonDB, and Pocketbase—and there’s a much longer list over at the local-first development website. Some of these integrate with existing Back Ends such as Supabase:

Offline-first React Native Apps with Expo, WatermelonDB, and Supabase

Store your data locally and sync it with Postgres using WatermelonDB!

Supabase

Local-first Realtime Apps with Expo and Legend-State

Build local-first realtime web and mobile apps with Expo, Legend-State, and Supabase.

Supabase

InstantDB

One such tool that is backed by the co-founder of Firebase, James Tamplin, and Y Combinator founder Paul Graham, is InstantDB. It’s a Supabase-style product, but has React wrappers that can hook your state right into the DB without any other layers in between.

You obtain a reference to the database with your unique client ID:

const db = init<Schema>({ appId: APP_ID })

And then in your React components, you can read data like so:

  const { isLoading, error, data } = db.useQuery({ todos: {} })

There’s no need to reach for a state-management library—you can just replace useState hooks with useQuery hooks. It’s ridiculously simple—the way it should be!

Other CRUD operations are also simple:

function addTodo(text: string) {
  db.transact(
    tx.todos[id()].update({
      text,
      done: false,
      createdAt: Date.now(),
    })
  )
}

function deleteTodo(todo: Todo) {
  db.transact(tx.todos[todo.id].delete())
}

function toggleDone(todo: Todo) {
  db.transact(tx.todos[todo.id].update({ done: !todo.done }))
}

function deleteCompleted(todos: Todo[]) {
  const completed = todos.filter((todo) => todo.done)
  const txs = completed.map((todo) => tx.todos[todo.id].delete())
  db.transact(txs)
}

function toggleAll(todos: Todo[]) {
  const newVal = !todos.every((todo) => todo.done)
  db.transact(todos.map((todo) => tx.todos[todo.id].update({ done: newVal })))
}

However, there are many other features that platforms like Firebase and Supabase offer like auth and file storage—InstantDB is adding all of these too! You can integrate with Clerk and Google OAuth, and Storage is in beta:

async function upload(files: FileList) {
  const file = files[0];
  // use the file's current name as the path
  await db.storage.upload(file.name, file);
  // or, give the file a custom name
  await db.storage.upload('demo.png', file);
  // or, put it in the `images` subdirectory
  await db.storage.upload('images/demo.png', file);
  // or, put it in a subdirectory for the current user,
  // and restrict access to this file via Storage permissions
  await db.storage.upload(`${currentUser.id}/demo.png`, file);
}

return <input type="file" onChange={(e) => upload(e.target.files)} />;

They also have an SDK for React Native and Vanilla JS, and an admin UI to inspect your database like Supabase.

I recommend reading this 2021 essay by one of the founders outlining their philosophy.

Head over to their website and check out some of the examples. You can also sign up and get a simple todo app working for free.

It will be really exciting to see where this goes!

Next.js 16's Turbopack breaks npm link

Thu, 13 Nov 2025 00:00:00 GMT

Update: They’ve now updated the documentation. I’ve also edited this post to be less ranty.

Next.js 16 makes Turbopack the default bundler now, which breaks npm link to directories outside your project directory. The fix is to tell Next.js to look for files in the parent directory to the local component library folder:

import path from "path";

const nextConfig: NextConfig = {
  outputFileTracingRoot: path.join(__dirname, '../')
};

export default nextConfig;

This is assuming a folder structure like so:

MyCompany/
  component-library (being npm linked into my-project)
  my-project
    next.config.ts

Alternatively, if you want to switch back to Webpack, you can pass --webpack in as an option like so:

next dev --webpack

I’m surprised that Vercel doesn’t think the outputFileTracingRoot option even warrants a mention on the Turbopack page’s “Known Gaps” section or the Next.js 16 page. I would have thought using npm link and having component libraries in other repos locally would be common enough to at least get a paragraph.

How did I come across this error? I npm linked our component library locally to do some debugging and started getting the following errors:

./app/layout.tsx:1:1
Module not found: Can't resolve '@myorg/component-library/header'
> 1 | import { Header } from "@myorg/component-library/header";

I went through my usual npm link debugging checklist, but alas, it was still having resolution issues. That’s when I noticed **▲ Next.js 16.0.1** (Turbopack) in the console logs.

Turbopack? I thought you had to pass the --turbopack flag for that, and I reverted this a few months ago because it had symlink issues. Then it dawned on me that Turbopack was now default (another team member had upgraded to the latest Next.js and I hadn’t yet checked out what was new) and the symlink issues were probably the culprit.

The next step was to see if I could get the symlink resolution working with Turbopack. I found this GitHub issue and tried the experimental config value. It still didn’t work! Then I checked the logs:

   the --inspect option was detected, the Next.js router server should be inspected at 9230.
 ⚠ Invalid next.config.ts options detected:
 ⚠     Unrecognized key(s) in object: 'outputFileTracingRoot' at "experimental"
 ⚠ See more info here: https://nextjs.org/docs/messages/invalid-next-config
 ⚠ `experimental.outputFileTracingRoot` has been moved to `outputFileTracingRoot`. Please update your next.config.ts file accordingly.
   ▲ Next.js 16.0.1 (Turbopack)
   - Local:        http://localhost:3000
   - Network:      http://[redacted]:3000
   - Environments: .env.local
   - Experiments (use with caution):
     ? outputFileTracingRoot (invalid experimental key)

Aha! That config value was no longer experimental. So I added the value to the root config rather than in the experiemental object, and voilà! The components got resolved.

Just goes to show the importance of making incremental changes and verifying everything is as expected after the change, and reading the logs. I tried the experimental config quickly yesterday and thought it didn’t work, but didn’t notice that the config value itself was invalid.

And because the answer with out-of-date config is locked now, I wasn’t able to add a comment to correct the config or mention it’s no longer an experimental flag. (Update: Vercel has added a comment now.)

Pre-record your demos

Wed, 01 Oct 2025 00:00:00 GMT

Meta was in the news recently for two failed live demos:

Mark Zuckerberg’s Meta AI glasses demo failed in EPIC fashion today 🤣pic.twitter.com/O0UFeoCar7
— Chief Nerd (@TheChiefNerd) September 18, 2025

Meta AI’s live demo failed for the entire minute 😢 pic.twitter.com/du4roaW0ER
— near (@nearcyan) September 18, 2025

While there were a lot of people who said they’d rather see a live demo than pre-recorded content such as Apple events nowadays, I disagree: I think most demos should be pre-recorded.

Here’s one of the reasons the Meta demos failed:

So here’s the story behind why yesterdays live #metaconnect demo failed - when the chef said “Hey Meta start Live AI” it activated everyone’s Meta AI in the room at once and effectively DDOS’d our servers 🤣

That’s what we get for doing it live!
— Jake Steinerman (@jasteinerman) September 19, 2025

There are many reasons why live demos can fail, such as:

Network issues (WiFi/server/proxy/certificate/etc. issues)
Computer setup issues if presenting from someone else’s computer
External services going down when you need to do the demo

When Steve Jobs demoed the iPhone 4 at WWDC2010 (I was lucky enough to be in the room!), there were network issues caused by all the MiFi routers in the audience:

And if you’re demoing something locally, you need to have your environment set up for the demo. Since most of the time you’re demoing something you previously worked on, this prevents you from working on current stuff right up to the demo, because you’re worried you might break your local setup for the demo by installing different node modules, switching to different Git branches, etc.

This is why I don’t ever do live demos now at work. I use Apple’s Screenshot app to do a recording beforehand, sometimes with audio if relevant, and then play this movie during my presentation. You can also choose to show mouse clicks in the recording, which helps the audience see what’s going on. And when presenting from a recording, you can scrub through it, so the audience doesn’t suffer through slow loading screens.

Take screenshots or screen recordings on Mac

On your Mac, take pictures or recordings of the screen using Screenshot or keyboard shortcuts.

Apple Support

Sure, live demos serve a purpose when showing off final, polished products at keynotes—it was cool to see Steve Jobs video call live with Jonny Ive once everyone disabled their MiFi routers. For most demos, though, I think we all save ourselves and our audience some frustration and just present a recording.

Query strings & cache keys

Mon, 27 May 2024 00:00:00 GMT

We were building a page that used query parameters to filter a list of items. I’ll use a generic example for this post: let’s say we have a Next.js SSR local news website where we have two views that display different lists of articles using a query string: ?category=local-news or ?category=international-news. Our tester found a bug where you could enter the local news URL into the browser, and the page would display the international news list, and vice versa. But it wasn’t consistently reproducible. Sometimes it would load the expected view. This was even in Incognito, so there wasn’t any browser caching happening. And besides, a different query string should result in a different browser cache key, because this is a method that’s often used for cache busting: if you have a reference to .my-file.js in Production, you can often change the reference to something like .my-file.js?v=2 to make sure the browser is going to download it again.

To make matters even stranger, we noticed that the bug happened more frequently in one environment compared to the other, despite the exact same code having been deployed to each.

Then another dev noticed in DevTools that when the bug occurred, the document HTTP request had an X-Cache: Hit from cloudfront header, whereas when it worked as expected, there was an X-Cache: Miss from cloudfront header.

It turns out that the bug was happening in AWS CloudFront: the “Cache key settings” were configured to “None”, so it was completely ignoring the query string and would cache whichever page URL was loaded first. So if you loaded ?category=local-news and nothing was cached yet on CloudFront, it would cache that version of the page. Then if someone else on a different computer went to ?category=international-news , they would see the cached version of the page. We fixed the bug by changing “Cache key settings” to “All”, so that now different query strings would get cached separately, which is what we expected.

But what about the fact that the bug appeared at a different frequency in different environments? Turned out we had a different cache expiration time between the environments, so the one with the shortest cache expiry time would end up working as expected more often, because the bug only occurred when the page was cached.

Although it ended up not being the culprit, it also turns out that Next.js didn’t include query strings in URL cache keys until early 2023. So it’s important to make sure all parts of your system are handling caching as you expect.

Fun debugging!

window.showDirectoryPicker opens up a whole new world

Mon, 22 Jun 2026 00:00:00 GMT

Chrome introduced a new API, window.showDirectoryPicker() that allows the user to grant access to a directory on their computer and allow a website to read/write everything inside.

Examples that have been thrown around are a local-first notes app, where you can grant it access to a folder full of Markdown notes, and you own the data rather than it being squirrelled away in some cloud service.

The other day I was getting nostalgic about Apple’s Aperture UI and wondered whether Claude could create a similarly-themed UI. I asked it to also use window.showDirectoryPicker.

Here’s the result:

It reminds me of using Lightroom to view local files, but it’s a webpage! You can also create folders within the app and move photos into them, and it all happens on your filesystem.

It doesn’t stop there though. Imagine whole photo & video editing apps using this: powerful UIs in your browser, but working with source files on your filesystem. People are already building WebGPU video editors in the browser—I really hope they also take advantage of new local-first storage opportunities like this.

To take this prototype further, I asked Claude to create a simple compositing app inspired by Apple’s Shake. Sure enough, here’s a little node-based compositing app where you can draw a polygon and get it composited on top of your source image.

All of this without a single line of hand-written code.

It’s an amazing world we’re living in!

Tech roundup - Fri 28 April 2023

Fri, 28 Apr 2023 00:00:00 GMT

Happy Friyay!

Adobe has released Firefly, a generative AI tool that allows you to create graphic designs from text prompts, convert pencil sketches into stylised vectors, and even generate a variety of textures that would suit a 3D model, and more. Check out the examples on the product page.

I’ve also started using an AI text to speech tool called Speechify, which allows you to read web pages, PDFs, and even text in images aloud in a variety of high quality voices. I ended up listening to a bunch of web articles that I hadn’t got around to reading while doing chores / on the bus. I was previously using Apple’s text to speech accessibility feature in iOS, but the voice quality was lower and the user experience was irritating. Speechify allows you to adjust the playback speed if you’re into speed listening (I’m not 😂, but found 1.2x useful) and the UX is very slick. They also have Snoop Dogg, Gweneth Paltrow, and David Attenborough-style voices which are pretty entertaining! My goal is to finish making my way through Stephen Wolfram’s detailed explanation of how ChatGPT works: great detail but very dense!

Last Friday, Suno AI released Bark, a text to voice model that apparently is better than the VALL-E model that Microsoft announced in January. Unlike the Microsoft model, you can actually play around with Bark using their provided voices. It also allows you to add cues like uh and [laughs], and preserves the ambient noise in the environment from the recording. VALL-E and Bark have the ability to be trained on your voice, but neither have released this to prevent misuse. Speaking of misuse of AI audio, I was pondering how this is going to impact audio and video evidence going forward, especially in trials, so did a bit of research. A lot of AI voice cloning tools are now adding inaudible watermarks to recordings generated with their tools. However, while being able to technically distinguish AI-generated audio can help in the justice system, it doesn’t prevent other types of misuse: scammers are already using AI voices to sound like relatives in need of financial aid, so this tech definitely opens up Pandora’s box.

Some interesting other startups to follow in this space are Resemble.ai and ElevenLabs. I tried cloning my voice using the research preview of Resemble.ai, and I’m pretty impressed! They mention that it only works well with US voices so far, and you can tell that in the recording, but I still think it’s captured some of the tones in my voice!

AI Steve0:00/0:131×Humane, an AI startup founded by ex-Apple employees, demoed a wearable device that allows you to project onto your hand and also do live translation using your own voice. Super cool!

Considering we’re only around a month away from Apple’s anticipated AR/VR headset, I decided to start looking into AR iOS development. I created a new Xcode project with the AR SceneKit template, which comes with an example 3D fighter jet model, and was able to play around with it on my iPhone with no code changes!

I’ve read online that you can export 3D models from Blender (an open source 3D creation app), convert them into Apple’s .scn format, and then use as objects in the AR scene, so my next goal is to get a basic cube exported from Blender working in the demo AR app. I’ll keep you posted how I go!

Everyone says you need to find a co-founder, but check out this video of a ‘solopreneur’ making over $1M/year with no employees! 😀

Do you remember how everyone was complaining, including the Kardashians, about Instagram prioritising videos to compete with TikTok? Well it seems that it’s paid off, because Meta said in their earnings call that time spent on Instagram grew 24% since they introduced Reels.

Britain’s antitrust regular has blocked Microsoft’s $69B acquisition of gaming company Activision Blizzard (they make Call of Duty)—will be interesting to see what happens from here.

Finally, for the guys out there who have always wondered what we’d look like with abs… wonder no more! There is now an AI abs generator that you can train on headshots of yourself and you’ll get back a selection of images featuring a muscular, shirtless AI version of you. 😀 💪 Watch an entertaining video of their pitch to VCs here.

Have a great weekend!

Tech roundup - Fri 5 May 2023

Fri, 05 May 2023 00:00:00 GMT

So much innovation is happening at the moment, a truly exciting time to be alive! I don’t have any trouble filling these weekly roundups.

News

Coinbase and Apple both beat Wall Street earnings expectations yesterday!

I found some fun images from a 1997 Wired article that included all the ways columnists thought Apple could save itself: https://twitter.com/stevesi/status/1654328764501987328?s=61&t=LT7iYI6wMF9GWzhyzDWBiA. My favourite is:

Build a PDA for less than $250 that actually does something: a) cellular email b) 56-channel TV c) Internet phone

Try adding a “1” before that $250! 😂📱

Coinbase released Coinbase International Exchange, which provides perpetual futures contracts for Bitcoin and Ethereum to institutional clients, a part of their push to expand outside of the US amid unfavourable regulatory conditions.

Apple and Google have teamed up on an industry spec to make Bluetooth tracking devices like AirTag safer.

In the crypto world, memecoin PEPE is going ballistic: someone managed to turn $250 into $1.02M in the last two weeks! However, whether you can actually cash out is a different story, so some of these gains are “paper money”.

An Israeli startup Alison raised $5.1M from investors including a16z for an AI platform that analyses which elements in your marketing material like typeface characters, colours, sounds, and text perform best, as well as elements that have worked well for competitors, and provides recommendations for new marketing imagery. Interesting idea.

OpenAI released a ChatGPT plugin called Code interpreter, which can import datasets and generate visualisations. In the example below, someone uploaded a dataset of Netflix movies and TV shows, provided the prompt Draw visuals to explain what content is available in different countries. Answer it in the form of a multiple pages PDF download. No explanation required. just go!, and then got a PDF output with bar charts how many movies and TV shows Netflix has for each country.

GPT-4 is the new data scientist 🤯

With the new OpenAI code interpreter model, you just have to upload the data and provide instructions in simple english.

The model does everything from cleaning data to generating insightful visualizations on autopilot!! pic.twitter.com/EF8vveS7mY
— Shubham Saboo (@Saboo_Shubham_) May 1, 2023

In another example, Jason Calacanis uploaded a CSV of electric vehicle sales data and asked it what are the three most interesting trends in this data. ChatGPT then came up with three trends: Electric Vehicle Adoption Over Time, Most Popular Electric Vehicle Makes and Models, and Distribution of Electric Vehicle Types. He was able to ask it to filter out Tesla models and then ask specific questions about the dataset like which states have had the most growth in 2021 and 2022. You can check out the full conversation here. Pretty cool for speeding up reporting!

Microsoft announced that Bing Chat AI is now available to everyone with a Microsoft account, with plugins coming soon.

Slack announced plans to build AI features such as summarising all the unread messages that you’ve missed.

Last week I featured an AI tool that gives you abs. Well this week, I found the opposite: an AI tool that dresses you up in corporate attire! It’s called HeadshotPro and will turn selfies in casual attire/environments into more formal headshots. It’s a cool idea instead of having to get a professional photoshoot, but they all look fairly synthetic at the moment, so I’m not really sure it’s gonna cut it. Once they get photorealistic though, I can see it being useful. (I’d still rather have an authentic photo of myself personally.)

There are lots of talks on AI regulation happening at the moment. Elon Musk met with Chuck Schumer last week, and this Thursday, Joe Biden and his team had a meeting that included Sundar Pichai (CEO of Google), Demis Hassabis (the founder of Google DeepMind), Sam Altman (CEO of OpenAI), and Satya Nadella (CEO of Microsoft).

Artificial Intelligence is one of the most powerful tools of our time, but to seize its opportunities, we must first mitigate its risks.

Today, I dropped by a meeting with AI leaders to touch on the importance of innovating responsibly and protecting people’s rights and safety. pic.twitter.com/VEJjBrhCTW
— President Biden (@POTUS) May 4, 2023

The White House has also invested $140M into new AI research facilities.

Midjourney, a generative image AI tool, released version 5.1 and apparently images of pelicans having a tea party are the best way to compare the new and old versions!

Midjourney 5.1

Midjourney released version 5.1 of their image generation model on Tuesday. Here’s their announcement on Twitter—if you have a Discord account there’s a more detailed Discord announcement here. They claim …

Front End development

In the Front End development world, Vercel, who provide infrastructure aimed at Front End developers and maintain Next.js, have shipped a tonne of cool new features this week. We’ve still got one day of announcements to go, but so far my favourite things they’ve introduced are:

Vercel KV, a serverless Redis solution powered by Upstash
Vercel Postgres, a serverless SQL database built for the Front End, powered by Neon
Vercel Blob, a solution to upload and serve files at the edge, powered by Cloudflare R2
Next.js 13.4 with Server Actions
Visual Editing, powered by Sanity, which brings a WYSIWYG editing UI that integrates with a headless CMS

With Vercel Postgres, you can write SQL to a fully-managed Postgres database in your React component files:

@levelsio probably best described it as “index.php is BACK”. 😂 However, this time, with all of the advances in client-side interaction included. Additionally, the tagged template literal syntax means that every variable included in the above SQL statement will be escaped properly, preventing SQL injection attacks. We have made some progress over the last 20 years! 😉

The SQL will never be visible to the client because the above code snippet is using Server Actions, another feature they’ve added to Next.js that enables you to mutate data on the server from the client without worrying about creating an in-between API layer yourself, no doubt inspired by Remix.

You will also be able to use Vercel Postgres with your favourite ORM like Prisma or Drizzle rather than writing SQL.

I’m also really excited about the Visual Editing feature they announced. When I worked at Qantas, one of the main reasons for choosing Adobe Experience Manager (AEM) as the CMS was that content authors found visual editing much easier to use than a headless CMS. As such, it was difficult to ever switch to a modern CMS like Contentful because doing so would degrade the authoring experience even if it made our lives as developers better. Being able to integrate visual editing with a headless CMS is a nice step towards having a great developer experience as well as a great authoring experience. Vercel also state that “We’re working on an open specification for content source-mapping that will enable any CMS, ecommerce system or content source to support Visual Editing”. Exciting!

The Amazon Prime Video team released a blog post this week that’s been making the rounds on Twitter. According to the subtitle:

The move from a distributed microservices architecture to a monolith application helped achieve higher scale, resilience, and reduce costs.

Apparently they reduced costs by 90%! They do say that microservices were good at the beginning to get it off the ground, but this ties into a common theme these days where monolithic apps are coming back into fashion. It reminds me of a time at Qantas where a monorepo got refactored into a combination of shared and isolated repositories to reduce friction between multiple teams working on the same codebase. It was an absolute pain to use! You had to npm link three different repos sometimes, compared to the original monorepo where if you needed to add some functionality to the shared components and then consume it in your app, you could do it in one go. Simple is often better!

Thanks for reading! King Charles III’s coronation is tomorrow at 8pm Australian time: have a great weekend and long live the King!

Tech roundup - Fri 12 May 2023

Fri, 12 May 2023 00:00:00 GMT

Happy Friday!

Wendy’s is partnering with Google to create an ordering chatbot for their drive-thrus, and I know for certain the first thing I’m going to say to it: “Good evening Wendy!”

Shopify have abandoned their push into the logistics business by selling 6 River Systems along with layoffs of 20% of their staff. They purchased 6 River Systems in 2019 for $450M.

All eyes were on Google this Wednesday as they held their annual developer conference I/O in Mountain View, California. Highlights include:

Bard (Google’s ChatGPT competitor) is now public: https://bard.google.com/. On the roadmap is adding support for other languages and other forms of input like images and audio.
PaLM 2, a new language model that powers Bard.
MusicLM, a text-to-music AI tool where you can provide a prompt like “soulful jazz for a dinner party” and it will generate songs for you. You can listen to some examples on their research page.
Universal Translator, where you can dub videos in a different language using AI. The translated version is made to sound like the original voice and the video is edited so the lips match the translated version (!!)

Google are also working on adding AI to their existing products: you’ll be able to generate AI responses to search results, convert text messages you’re writing into different writing styles like “Excited”, “Chill”, or “Shakespeare”, and use AI to extract/remove elements from photos. For example, you can reposition or remove items, and improve the colour of the sky without affecting the rest of the photo:

Google Maps is getting Immersive View, where you can view digital models of cities including traffic simulations, bike lanes, complex intersections, and parking based on billions of Street View and aerial images.

GitHub Copilot finally has a competitor, Duet AI for Google Cloud. What I think is most exciting about this is having a new UI for cloud platforms. Currently you have to wade through UIs like AWS Console and massive amounts of documentation to use these platforms: AI text prompts are an interesting solution to simplify this, where you can write “Help me deploy my app on cloud run” then see relevant documentation and CLI commands surfaced by the AI without leaving your IDE.

Is the future screenless?

In a previous post, I linked to a few clips of a pocket-sized wearable that was recently demoed in a TED talk by Humane, a secretive startup founded by ex-Apple employees Imran Chaudhri and Bethany Bongiorno who worked on the development of the iPad. The full talk is now available on YouTube, and it’s worth a watch! While big tech companies like Meta and Apple are betting big on AR/VR devices that you strap onto your head, physically separating you from the world around you, Humane is taking a different approach of trying to make technology invisible and integrated seamlessly into our lives. Its wearable device can translate live from your pocket in an AI-generated voice that sounds like you (they have partnered with OpenAI), project a user interface onto your hand for receiving a call, and take videos from your pocket so you can be more present in a moment while also recording it. It reminds me of Golden Krishna’s book, The Best Interface is No Interface. I’m really excited to see what they develop with this philosophy.

An AI that can read your mind?

Researchers have developed a model that they claim excels in behavioural and neural data, and “can decode activity from the visual cortex of the mouse brain to reconstruct a viewed video”. They’ve published a paper about it in Nature. This is definitely getting into freaky territory!

Learnable latent embeddings for joint behavioural and neural analysis

Mapping behavioural actions to neural activity is a fundamental goal of neuroscience. As our ability to record large neural and behavioural data increases, there is growing interest in modeling neural dynamics during adaptive behaviors to probe neural representations. In particular, neural latent em…

GPT while controlling your data

One of the major drawbacks with tools such as OpenAI is privacy and data security. Entering work information into ChatGPT leaks IP to OpenAI, who could use that data for training or any way they like. Companies such as JPMorgan and Amazon have banned employees from using ChatGPT, and the list is growing.

privateGPT is a new project that addresses this concern by proving a GPT model that you can run locally without an internet connection. You provide it .txt files with your dataset to ingest and then ask it questions via the command line. It takes around 20-30 seconds for a response, which is slower than ChatGPT and Bard, but without the data security concerns and free!

Open-source AI

Also at Google, a leaked internal document from an AI researcher suggests that neither Google nor OpenAI have a moat, and open-source AI is quickly catching up. Meta’s LLaMA model that was leaked at the beginning of March has helped the open-source community improve quickly, in a matter of days in some cases, to the point where “the barrier to entry for training and experimentation has dropped from the total output of a major research organization to one person, an evening, and a beefy laptop”. I’d encourage you to read the whole article: it’s an interesting take on the 2023 AI arms race.

Multimodal AI

Meanwhile, over at Meta, they’ve released ImageBind, where you can generate AI output from a range of different media (multimodal AI). For example, you can provide an audio clip of some running water and an image of some apples, and the AI will return an image of a bowl of apples under a running tap:

What I’ve been reading

Over the last few days, I’ve been really enjoying reading content from David Heinemeier Hansson, the creator of Ruby on Rails and co-founder of Basecamp, an online project management tool. If that wasn’t enough, he’s also won a class in Le Mans, the 24h endurance car race in France, and written the business book REWORK with Jason Fried.

The cool thing about Basecamp is that they resisted the standard Silicon Valley approach of raising as much money as possible, and instead focused on creating a sustainable, profitable business. (I know, how radical! 😂) It’s paid off: he commissioned a Pagani Zonda HH and apparently “bought a vacation home in Italy just so he could drive the thing”. Jeff Bezos is also an investor.

Having read REWORK over a decade ago, I rediscovered him the other day when devs on Twitter were discussing his recent post on programming types and how “TypeScript sucked out much of the joy I had writing JavaScript”. This is something that I can relate to: I personally feel like I’ve spent more time debugging TypeScript errors than I’ve ever lost due to errors that would have been caught in a type-safe environment.

One of my favourite posts is his take on how the startup scene has gotten crazy with people chasing unicorn status rather than building things that actually add value to society:

Part of the problem seems to be that nobody these days is content to merely put their dent in the universe. No, they have to fucking own the universe. It’s not enough to be in the market, they have to dominate it. It’s not enough to serve customers, they have to capture them.

He’s not afraid to speak his mind, which makes his content all the more fun to read! You can read his tech takes on his blog and find out more about him on his personal website. Also, while it takes a while to get through, his 3.5h podcast episode with Tim Ferris is a great listen!

Well that’s a wrap, again! Have a great weekend!

Tech roundup - Fri 19 May 2023

Fri, 19 May 2023 00:00:00 GMT

This week, Apple rolled out Tap to Pay in Australia, with Westpac and Tyro Payments the first payment platforms to offer this feature to business customers.

Apple also previewed new iOS 17 accessibility features that include the ability to clone your own voice, aimed at people with early ALS who may lose their voice:

Users simply need to read along with a randomized set of text prompts to record 15 minutes of audio on an ‌iPhone‌ or ‌iPad‌. The feature uses on-device machine learning to keep users’ information secure and private, and integrates with Live Speech so users can speak with their Personal Voice.

Cool! Excited to now have Apple in the AI voice cloning arena. I really like the mention of on-device machine learning for security and privacy, something that a lot of the AI competition lacks. It will be exciting to see what other AI reveals Apple has in store for us at WWDC23.

Last week, Apple also released Final Cut Pro and Logic Pro for iPad, which would have taken a massive amount of work, so congrats to the team and I think it’s a huge win to bring these tools to more people and provide creatives more flexibility!

Apple brings Final Cut Pro and Logic Pro to iPad

Apps introduce powerful features designed for iPad to deliver the ultimate mobile studio for video and music creators.

Apple Newsroom (Australia)

Binance, the largest crypto exchange, has disabled PayID deposits in Australia “due to a decision by a third-party provider”, Cuscal. This has been a very convenient way to onboard AUD to crypto (it’s been my preferred option for a while), so will impact a lot of people in Australia.

Binance Australia Loses Crypto Ramp PayID ‘With Immediate Effect’ - Decrypt

Binance Australia has had to suspend PayID AUD deposits due to a decision by a third-party service provider.

Decrypt

Amazon acquired Snackable.ai, a startup focused on putting “structure around your long video and audio instantly, automatically generating chapters, highlights, and more”. They’re planning to use the startup to improve their podcast experience in Amazon Music. Amazon wants to be a major AI player: Andy Jassy, Amazon’s CEO, has previously stated “If you look at the really significant leading large language models, they take many years to build, and many billions of dollars to build. And there will be a small number of companies that want to invest that time and money, and we’ll be one of them at Amazon.”

There’s some cool stuff happening with AI-powered news readers. Instagram co-founder Kevin Systrom is now working on a news aggregator app with an AI-powered feed called Artifact, and it looks really slick. My favourite feature so far is it can summarise any article into three bullet points (using OpenAI). I tried it out and it worked flawlessly! That being said, it did miss a lot of the nuance in a Bloomberg opinion piece, so it depends on the article how useful it will be. For simple articles though, it does a great job of extracting key points. Artifact also allows you to search across multiple publications, follow specific journalists, and add comments within the app to articles. I think it’s nice to have a news product that is not tied to a social network and is focusing on providing writers with direct relationships with their readers, regardless of where they place their writing.

Curio, which provides news articles narrated, has added AI features to create a custom audio episode based on a prompt such as “What are the latest developments in AI?” They use their existing library of publications, including the Wall Street Journal, Scientific American, and The Guardian, to train the model.

Anthropic, an AI company that targets the business market, announced that their model Claude now has a 100K token limit, and demoed some cool capabilities like being able to load in a PDF of some API documentation and then ask how to do certain tasks. In contrast, ChatGPT’s GPT-4 Plus has a 32K token limit, which means that you can load in more data to Claude (such as an entire book like The Great Gatsby) to query with prompts. You can try Claude in Slack.

AI tokens

Speaking of tokens, what are tokens? Here’s a good rundown. In summary:

Tokenization is splitting the input data into a sequence of meaningful parts e.g. piece data like a word, image patch, document sentence.

A word like “joyful” could be split into two tokens: “joy” and “ful”. How input is tokenised differs between models.

Regulating AI

This week, Sam Altman, the CEO of OpenAI, testified before Congress about all things AI and discussed regulation. An interesting fact is that he doesn’t own any equity in OpenAI, meaning he won’t stand to make any money directly from the company, and he claimed that he does it “because he loves it”.

Worldcoin

Another project that Sam Altman is working on currently is Worldcoin, an Ethereum-based cryptocurrency designed to be a global identity and finance network. It has three parts:

World ID - A “world passport” designed to prove that you are a unique human, not a bot or AI, which could become more relevant in the future. You can get verified using a mobile phone number or an iris scan by one of their trusted partners using their Orb device. It would allow you to sign in to websites and apps without providing any personal data such as name, email, etc.
Worldcoin - A utility and governance token (not listed on crypto exchanges yet).
World App - A digital crypto wallet, already available for iOS and Android.

Distinguishing humans from bots is a real pain point at the moment for companies such as Twitter, so this is an interesting solution while preserving privacy by not having to share your mobile number directly with the website.

Digital identity has been an open problem since the invention of the internet. Even today, more than 50% of the world’s population doesn’t have a verifiable legal ID. As we venture into the exciting new Age of Artificial Intelligence, solving proof of personhood is more important than ever—specifically to ensure democratic access and governance of these systems, fairly distribute the benefits generated and know who and what to trust online.

I generally like the idea of verifying my identity with one trusted party and then being able to use this to sign in to other services without providing my details every time. I’d love to be able to use zero-knowledge proofs to not have to provide swathes of information like my driver’s licence, mobile number, payslips, etc. to less trusted third-parties such as websites, mobile phone providers, and real estate agents. Whether Worldcoin is the best trusted party to do this and whether they can achieve mass adoption remains to be seen.

An interesting detail that I noticed in their blog post:

The native iOS and Android apps are also engineered to maximize inclusivity. At around 18MB they’re 5x smaller than the industry average. They are localized to multiple languages and support most active smartphones in the world (98.2% of Androids and 94.5% of iPhones to be precise), including some more than 10 years old.

Specifically focusing on including people with old devices is a rare thing in the development world, it’s a nice touch!

They also mention using World ID as a way to provide Universal Basic Income in future and avoid people claiming their handout twice. Sam Altman has stated in his essay “Moore’s Law for Everything” that AI could generate enough wealth to pay every adult in the U.S. $13.5K / year next decade, although not everyone agrees on this take.

There’s definitely some interesting tech here, but it also has a dystopian feeling about it to me. Something to keep an eye (or should I say, iris) on.

SaaS or in-house?

An interesting story from some internet sleuths recently: in 2021, Coinbase incurred a $65M bill for Datadog, a data analytics platform for cloud infrastructure. Apparently they looked at building their own analytics tools in 2022 to cut costs, but ended up staying with Datadog after they proposed a better deal. An engineer at Coinbase said that it would have taken a lot of effort + cost to build a similar experience in-house. An interesting read regarding costs and tooling!

Validating JSON data

On the full stack development front, my co-worker used the AJV JavaScript library this week in our Next.js API to make sure JSON in the request body was what we were expecting and return an error if not. AJV allows you to define JSON schemas and then validate data against them like so:

Alright, that’s a wrap, see you next week!

Tech roundup - Fri 26 May 2023

Fri, 26 May 2023 00:00:00 GMT

Generative AI in Photoshop

Photoshop has released some amazing new generative AI features this week! You can now select an area and generate new AI imagery for that area with a text prompt. Three versions are generated and you can pick the best one. The tool can also remove objects by generating new background imagery. Photoshop previously had this ability with the Content-Aware Fill tool, but the new Generative AI tool is significantly better. In case you didn’t notice, in the the cover photo for this post, I’ve removed the Sydney Opera House and a jetty in the foreground. Here’s the original:

Using the Content-Aware Fill tool with default settings produced the below:

While the Content-Aware Fill version is still impressive, it duplicated some content where the Opera House used to be, and a shadow in the water around the jetty remains, whereas the generative AI version is more unique and everything fits together better.

Some more examples:

All it took to generate these images was to make a selection using standard Photoshop selection tools like Rectangular Marquee and Polygonal Lasso around the rough area of content to remove and then select Generative Fill.

So far, I’ve focused on removing objects: what about generating them? Here’s the entrance to my co-working space:

As you might guess, we don’t have a vaulted ceiling or chandelier:

Let’s remove all the branding:

Interestingly, I was getting the little notch in the hand sanitiser station getting repeated in the generated version when I tried to just remove just the “C” on the side, but when I selected a larger area vertically to get a bit more background to sample, two of the three versions didn’t repeat the notch, and one of them matched the gradient perfectly.

On the other hand, removing the branding from the wooden counter at the front was as simple as drawing a rough outline around it and a few clicks—that’s the first result it came up with!

OK, let’s have some fun:

Each alteration here was generated separately: I drew a selection around the area and then provided one of the following prompts for that area:

a big puddle
googly eyes
a duck sitting on the bench
a hole in the piping

Can you imagine how easy it’s going to be now to create “spot the difference” images?! 😀 🖼️ 👨🏻‍🎨

Try it out yourself by downloading Photoshop Beta through the Creative Cloud app and check out these tweets for more examples:

https://twitter.com/Pinsky/status/1660973228641353730

https://twitter.com/Jason/status/1661207297958514688

More generative AI

Another impressive example of generative AI: a new paper was published recently describing how you could re-orient subjects’ faces in photos. Check out the video below!

Drag Your GAN: Interactive Point-based Manipulation on the Generative Image Manifold

paper page: https://t.co/Gjcm1smqfl pic.twitter.com/XHQIiMdYOA
— AK (@_akhaliq) May 19, 2023

Also in AI

ChatGPT has now released plugins and web browsing to paid subscribers. The web browsing model means you can get AI responses based on current events and live data, rather than only their dataset from 2021. I asked it to “give me three of the best AI headlines recently”, and it produced the following:

The NVIDIA news is only from the last day so shows ChatGPT is processing current information well. It also displays links to the news sources. In another query about what’s been happening recently in AI, I learnt that “Spotify is exploring the use of AI for creating host-read podcast ads that sound like real people”, something I’d missed from my other news sources—cool!

Maybe my next newsletter will generated with ChatGPT… 😉 🤖

ChatGPT plugins are also very powerful, such as being able to generate a suggested itinerary for a trip with the Expedia plugin, or generate a flowchart from a text prompt with the Show Me plugin:

Google accessibility enhancements with AI

Google has announced some new accessibility features, including one that seems useful for a lot of us: Chrome will now check URLs for typos and display suggested websites below. They’re also making wheelchair icons more prominent in Google Maps, and have released some improvements to their Lookout app for people with vision impairment, which uses AI to label objects in images and read scanned text aloud. Cool use-case for AI!

Some non-AI news

Dyson have released their first robotic vacuum cleaner, the Dyson 360 Vis Nav, which looks very stylish in typical Dyson fashion:

It will only set you back AUD$2,399.00, also in typical Dyson fashion. 😉

Apple’s policies seem to be relaxing for Web3 crypto apps, possibly as a result of the Epic Games lawsuit. STEPN, the crypto fitness app, announced that they will now offer in-app payment options for their NFT sneakers, whereas previously these apps had to get their users to pay elsewhere.

Sotheby’s made $2.4M from auctioning off NFTs from the bankrupt crypto hedge fund 3AC, with some items such as Fidenza #725 and Autoglyph #187 selling for over 500K each.

You can now edit messages in WhatsApp up until 15min after you’ve sent them.

Instagram is apparently planning to release a Twitter competitor.

In the crypto world, Unciphered, a company that specialises in recovering lost crypto, was able to break into a Trezor T hardware wallet using specialised equipment and extract the seed phrase. They claim the exploit cannot be fixed with a firmware update and would require a recall. A press representative for Trezor said that it looked like an “RDP downgrade attack”, which Trezor mentioned on their blog in early 2020, and that if a Trezor device is protected by a strong passphrase, the RDP downgrade is useless.

Ledger, a rival crypto hardware wallet maker, have delayed their proposed Ledger Recover service due to public backlash. The opt-in service would allow users to store encrypted copies of their seed phrases with three custodians and require KYC verification. Critics pointed out that Ledger had previously said that Ledger wallet private keys would never leave a device, and objected to the fact that Ledger’s code is not open-source so there is no way of publicly auditing it. In response, the Ledger CEO Pascal Gauthier said that they will open-source more parts of the Ledger codebase before releasing Ledger Recover.

Development

You may have heard of Markdown, a syntax for basic document formatting developed by John Gruber and Aaron Swartz in 2004. Well some people think there’s an opening for a new React JSX-based syntax for document formatting, and have released MDXJS, which they’re calling “markdown for the component era”.

I came across EmergeTools this week, who analyse iOS bundles and suggest ways to improve performance. They tweet regularly about analysing different popular apps such as Airbnb’s iOS app, and it’s well worth a look if you’re interested in iOS development / app bundle sizes:

https://twitter.com/emergetools/status/1610700661984739328?s=20

Alright, that’s a wrap—have a great weekend and play around with Photoshop Beta! 🖌️ 🎉

Tech roundup - Fri 2 Jun 2023

Fri, 02 Jun 2023 00:00:00 GMT

Well, it’s only 4 sleeps away from the biggest Apple reveal since over a decade ago: the AR/VR headset! Apple have a nice little teaser AR graphic that you can play with on your iPhone:

0:00/1×And some specs have been leaked: apparently each eye will have a 4K display with 5000 nits of brightness (in comparison, Microsoft’s HoloLens had less than 500 nits). I honestly can’t wait! You’ll be hearing all about it in the newsletter next Friday! 😀🧑‍💻🍏

Andrew Hart, who runs an AR agency, seems very prepared: he works on AR experiences for retail stores using Apple’s existing AR tools for iPhones. He recently tweeted this concept of what the headset experience could look like:

0:00/1×I also love this indoor navigation video that he has pinned to his Twitter profile, where the UI switches between an AR view and map view depending on the tilt of the iPhone screen:

0:00/1×Andrew has recently launched an open source framework called Mirador for building point-of-interest AR experiences with RealityKit, e.g. pointing your phone at London from a viewing platform and seeing pins with titles on famous landmarks. Apparently AR is generally location-agnostic and only relies on device motion in 3D space, with no concept of GPS or real-world location. Mirador allows you to provide an anchor and it then figures this out for you. Interesting!

OopsGPT

A lawyer who filed a court document with the assistance of ChatGPT is now in hot water because he cited six non-existent cases. He apparently hadn’t heard of AI hallucinations and did not verify the output. He now has to prove next week why he shouldn’t be sanctioned.

The document was part of the court case Roberto Mata vs. Avianca, where Mata is seeking damages for injuries caused by a metal food & drink cart striking his knee during a flight between El Salvador and New York in 2019.

According to the court filing:

Six of the submitted cases appear to be bogus judicial decisions with bogus quotes and bogus internal citations.

The cases that ChatGPT made up are:

Shaboon v. Egyptair, 2013 IL App (1st) 111279-U (Ill. App. Ct. 2013)
Varghese v. China South Airlines Ltd, 925 F.3d 1339 (11th Cir. 2019). (ECF 21.)
Petersen v. Iran Air 905 F. Supp 2d 121 (D.D.C. 2012)
Martinez v. Delta Airlines, Inc., 2019 WL 4639462 (Tex. App. Sept. 25, 2019)
Estate of Durden v. KLM Royal Dutch Airlines, 2017 WL 2418825 (Ga. Ct. App. June 5, 2017)
Miller v. United Airlines, Inc., 174 F.3d 366 (2d Cir. 1999)

Some cases cited did exist, but under different names:

The furnished copy of the “Varghese” decision cites Zicherman v Korean Airlines Co., Ltd., 516 F.3d 1237 (11th Cir. 2008), which does not appear to exist. The case appearing at that citation is, indeed, an Eleventh Circuit case decided in 2008, but is titled Miccosukee Tribe v. United States, 516 F.3d 1235 (11th Cir. 2008).

Oh well! I bet he won’t be making that mistake again! 😅

China is already regulating AI

In April, the Chinese internet regulator published a draft regulation on generative AI. Some of it is quite similar to what people are advocating for in the West, such as ensuring transparency in how the data was collected and trained so it doesn’t infringe on IP/privacy. Other content, less so: it calls for identity verification for users of generative AI tools and that the output should “reflect the core values of socialism”. The penalty for breaking these rules is 100K RMB, which is just over AU$20K.

Meanwhile, apparently the Biden Administration is conflicted on how much to regulate AI, with some White House and Commerce Department officials favouring strong regulation like the EU, while those in national security would prefer less regulation to keep the US competitive. I hadn’t thought about the national security angle—interesting!

Generative AI in 3D

Arguably one of the coolest areas of generative AI is creating 3D models from text prompts! There’s a GitHub repository, threestudio, that has collated lots of different models together with examples of each. One such model is ProlificDreamer. Here are some examples of textured 3D objects and the text prompts they were generated from:

Pretty cool!

In addition to generating single objects, ProlificDreamer can also generate textured 3D environments, referred to as NeRFs (Neural Radiance Fields).

Speaking of NeRFs, check out this paper on them from last year, with entire 3D photorealistic scenes being produced from 2D photos. They also have a technical talk video:

Once the environments are generated, you can also tweak them such as changing the lighting. If this is where this stuff is now, imagine where it’s going to be in a couple of years! Amazing!

Old masters meet generative AI

Everyone has been having fun with generative AI in Photoshop, including modifying famous paintings:

In fact, the Mauritshuis Museum in the Netherlands is currently displaying an AI-modified version of the Girl with a Pearl Earring by Vermeer while it is on loan to the Rijksmuseum in Amsterdam until 4 June.

Wall Street meets AI

Wall Street is experimenting with AI: check out this piece by Bloomberg. Interestingly enough, Sam Altman thinks that using AI in quantitative trading could be one of the most lucrative uses of AI in the near future. Think about what Renaissance Technologies built (algorithmic trading that has returned ~66% annualised between 1988-2018, the best track record on Wall Street) getting supercharged by AI!

A city for longevity research

Longevity enthusiasts have created a pop-up city in Montenegro called Zuzalu, which they are hoping to turn into their own jurisdiction so they don’t have to deal with regulators and can experiment more easily with medical tech to slow down ageing. What could possibly go wrong?

Dev

Railway: a one-click deployment platform

This week, I was looking for a simple way to deploy a simple Express.js API for free. After finding Vercel was not the right platform for this (they’re focused on Front End apps), I thought there must be a simple way to do this with a great developer experience like Vercel as opposed to using traditional infrastructure providers like AWS/Heroku/DigitalOcean. Well, I found it: Railway! Their tagline is “bring your code, we’ll handle the rest”, and it really delivers on this (for the most part). I connected my GitHub account, selected the repository with my Express.js app, and then clicked Deploy. I did have to tell it which port to use and to deploy it to a public autogenerated domain, but it was still a very smooth experience!

I’m speaking at two meetups in Sydney next week

What API was I deploying? It was a simple API to help with intercepting SMSes for end-to-end tests in Playwright, which you can learn more about when I present next Tuesday at The Sydney F-Enders meetup! I’ll also be talking about “What’s new in CSS in 2023” at SydCSS next Thursday (an online stream is also available). Come along / tune in online!

NEAR “Hello world” example in GitPod

I’ve also been playing around with NEAR, a JavaScript-focused crypto platform. What I like about it is everything is JavaScript-based so I don’t have to overcome a language barrier when trying to understand smart contracts and dApps. I tried running their example project Hello NEAR using Gitpod, which connects to your GitHub account and clones an example repository, then sets up a VSCode-based dev environment that you can use in your browser. Neat!

Gitpod will also manage installing dependencies and running the dev server for you, allowing you to play around with a full dev environment right within your browser! As if to prove how useful this is, I also tried to run this example project locally and immediately ran into a build error, which I would have had to first fix before being able to play around with the demo had Gitpod not been an option.

If you’re into the TV show Succession like I am (it just finished this Monday), check out this video on how the main theme song was composed!

Have a great weekend and a great WWDC23! 🍏

Tech roundup - Fri 9 Jun 2023

Fri, 09 Jun 2023 00:00:00 GMT

Sydney F-Enders and SydCSS Presentations

This week, I gave a presentation on Advanced Testing in Playwright at the Sydney F-Enders meetup on Tuesday and What’s new in CSS in 2023 at SydCSS on Thursday. Here are my slides.

WWDC23

Well the big news of the week of course was the release of the Apple Vision Pro on Tuesday. Very exciting! So far, the reports of people trying it on have been quite positive. I’m personally excited to try it and think it will be fascinating to see the product evolve in the public spotlight as Apple refines it and finds the right market.

I love the focus on AR: it reminds me of how the AirPods Max’s ambient mode sounds so similar to not having them on yet there is a complete barrier between your ears and the outside world. I’ve dismissed VR headsets before due to the low screen quality, so focusing on making an amazing screen seems like a good play to make something people actually want to spend time using.

An interesting comment I read on Twitter is that the front-facing display (it displays an AR version of your eyes so it’s more natural when other people are interacting with you) is something that could have only been created at Apple: at Meta, where everyone is focused on metrics, no-one would approve investing that much on a “nice human touch” like that! We’ll see whether it pays off.

Apple also recently acquired Mira, a startup building lightweight AR hardware.

I think some of my other favourite things from WWDC:

15” MacBook Air — I love my 13” MBA but it’s great to have an option with more screen real estate that is still in a thin, light form factor.
Autofill email codes similar to SMS authentication codes.
Tap phones to share contact details or start a SharePlay session to listen to music together. (Remember sharing Apple earbuds? 😀)
Widgets are back on Mac and iOS!

Here are Apple’s WWDC23 highlights.

For gamers, Apple released a new game porting toolkit.

And the best WWDC joke goes to:

Not everyone got it. 🤣

Edit using text in Premiere Pro thanks to AI

This is seriously cool! You can transcribe interviews using AI and then re-arrange the text to generate a rough cut!

Relative colours in CSS

Here’s a cool new CSS colour feature: creating a variation of an existing colour.

Read more here in the CSS Color Module Level 5 spec.

CSS Scopes

Here’s a nice overview of the new scoping features coming to CSS.

Anchor positioning in CSS

When building tooltips, there’s a common edge-case where if the tooltip is always anchored to the left of an element, it could appear off-screen. To solve this issue, we’ve relied on JavaScript popup libraries that calculate the bounds of the screen and then right-align the tooltip if the tooltip would appear off-screen.

Now, we can do this natively in CSS with the new :anchor property! We simply specify default and fallback positioning:

SEC vs crypto

It’s been a big week for crypto: the SEC have sued Binance and Coinbase, the two largest crypto exchanges for allegedly violating securities laws. This follows a long running dispute between the SEC and the crypto community on what constitutes a security. Coinbase and other crypto exchanges maintain that they have never listed securities. Now it looks like it will be settled by the courts (this could take years). It’s frustrating for the crypto community considering prominent crypto exchanges such as Coinbase and Kraken have openly called for clearer regulations.

Binance lawyers allege that SEC Chair Gary Gensler offered to serve as an informal advisor for Binance in 2019. An interesting video of Gary Gensler talking about crypto in 2019 has also been making the rounds, in which he praised the Algorand team. Now, Algorand is one of six cryptos that the SEC is now claiming are securities in a similar lawsuit filed against crypto exchange Bittrex in April.

Powerledger, a Perth-based Aussie blockchain startup that “develops software solutions for the tracking, tracing and trading of renewable energy” is also one of the crypto tokens included in the Coinbase lawsuit.

Interestingly enough, Bitcoin has been absent from all these lawsuits, because it’s proof-of-work. Gensler has stated that Bitcoin is a commodity but he thinks proof-of-stake tokens could be investment contracts that subject them to securities laws.

Have a great weekend!

Tech roundup - Fri 16 June 2023

Fri, 16 Jun 2023 00:00:00 GMT

NASA has released a new X-plane designed to reduce fuel consumption.

Ford and GM have agreed to adopt Tesla’s EV charging connector (as opposed to the CCS standard other manufacturers use), so customers will be able to use Tesla’s charging stations starting next year. Tesla has the largest EV charging network in the US. This further cements Tesla’s position as an infrastructure provider as well as a car manufacturer.

YouTube has lowered its threshold for creators to earn ad revenue.

AI-generated QR codes

QR codes have become increasingly popular over the last few years, and while brands such as Instagram and Snapchat have used QR codes with branding elements integrated, the graphics are still fairly plain. Recently though, people have been experimenting with using Stable Diffusion, a text-to-image model released in 2022, to generate more interesting QR codes that are still scannable. Here are some examples:

You can view more examples in this Twitter thread and find out how to make them here:

How to make a QR code with Stable Diffusion - Stable Diffusion Art

A recent Reddit post showcased a series of artistic QR codes created with Stable Diffusion. Those QR codes were generated with a custom-trained ControlNet

Stable Diffusion Art

More AI news

OpenAI released some improvements to their GPT models, including function calling which allows developers to more easily connect with external tools and APIs.

Researchers have released a paper on ensuring consistency throughout AI-generated videos. Previously, these videos jumped around a lot.

Mistral AI, a French startup based in Paris co-founded by former Meta and Google DeepMind AI engineers, is trying to take on OpenAI with a valuation now worth $260M. They plan to release their first models for text-based generative AI in 2024.

Meta released MusicGen, an AI music-generation tool similar to one previewed by Google earlier this year. I tried to get it to generate the theme from Succession in the style of Chopin but the result didn’t sound anything like it… I take it that it has not had the benefit of a training in classical music? 🤔 🎹

0:00/1×Generated music from the prompt “succession theme in the style of chopin”### WWDC23 news

Apple released their first official UI design kit for Figma.

One of the sessions at WWDC23 was What’s new in CSS and they covered some content different to the Google videos and my talk last week. Worth checking out! My favourite is margin-trim, which can remove unwanted margins from children. For example, heading elements have top margins so they appear correctly in between blocks of text, but this can get in the way when using a heading element inside a container. margin-trim provides a nice way of removing these margins:

It’s only supported in Safari Technology Preview but hopefully more browsers will adopt it soon!

The future of Ethereum

Vitalik has released a detailed blog post: The Three Transitions that Ethereum needs to go through in order to achieve mass adoption. While there’s a lot that goes over my head, it’s an interesting read to understand the problems and complexity with building a useful cryptocurrency. The three technical transitions are:

The L2 scaling transition - everyone moving to rollups
The wallet security transition - everyone moving to smart contract wallets
The privacy transition - making sure privacy-preserving funds transfers are available, and making sure all of the other gadgets that are being developed (social recovery, identity, reputation) are privacy-preserving

I enjoyed his version of the good/fast/cheap triangle:

Some great points, because gas fees are currently a major disincentive for using Ethereum to pay for day-to-day things. Existing payment networks are really good for day-to-day purchases (i.e. buying something on your debit MasterCard has no transaction fee and happens within seconds), whereas with cryptocurrencies, you often have to pay a gas fee between a $1-$100 depending on how busy the network is. The transfers also typically take around 15min or so, much longer than you’ll be willing to wait around at the cashier making sure your purchase has gone through. With large international money transfers, however, it’s the exact opposite: existing payment networks like SWIFT charge $20-30 per transfer and it takes 1-3 business days. With crypto, if the network isn’t busy, your transaction fee could be a lot less, and it arrives in minutes not days without any intermediaries. Solving these problems means that crypto would offer a better or comparable experience for both everyday transactions and large money transfers, which would greatly help mass adoption.

You can read the whole article here.

Alright, that’s a wrap, have a great weekend!

Tech roundup - Fri 23 June 2023

Fri, 23 Jun 2023 00:00:00 GMT

AI news

Meta has announced Voicebox, a generative AI model that can help with audio editing, sampling, and styling. It can remove unwanted background audio like car horns or dogs barking, and generate speech in different languages.

Introducing Voicebox: The Most Versatile AI for Speech Generation | Meta

Voicebox is a generative AI model that can help with audio editing, sampling and styling.

Security

Music festivals are using QR codes on wristbands for a cashless experience, but a security researcher Inti De Ceukelaire has pointed out privacy and security issues. He analysed the QR codes in photos of people posing with their wristbands and was able to see their order history, potentially report their wristband as lost to transfer credits to the hacker’s wristband, and refund leftover credit to the hacker’s account instead.

Inti has other interesting hacking examples, such as tracking cars using licence plates.

Crypto

The crypto markets are trending upwards again because BlackRock has filed plans for its own Bitcoin ETF. All the previous proposals for a Bitcoin ETF have been rejected by the SEC, but the BlackRock proposal has some differences which has people bullish.

And remember how lots of people were withdrawing their Ethereum once the Shapella upgrade was released earlier this year? Well according to Staking Rewards, staked ETH has still increased by 11% since.

Design

It occured to me as I was dragging a map this week that the macOS dragging hand icon is straight from the ’80s! And the thing I love about it is that it is clean and conveys the meaning effortlessly with the open and closed fist states—and which has clearly stood the test of time. Of course, even more famous is the standard pointer icon shown when you hover over web links, also from the same period. This led me down a rabbithole on the origin of the original Mac pointer cursor modelled after Mickey Mouse’s hand and a great article by Smithsonian about the designer, Susan Kare, designing icons for the first Apple Macintosh:

How Susan Kare Designed User-Friendly Icons for the First Macintosh

The graphic designer is receiving a Lifetime Achievement Award from Cooper Hewitt for her recognizable computer icons, typefaces and graphics

Smithsonian Magazine

0:00/1×---

Lots of stuff happening at Figma! They have recently acquired an AI design tools startup, Diagram; introduced a new developer mode; and added support for variables in designs:

Figma Variables lets GO. Been working on this for so long with our team over here at @figma, and I’m so excited to see it finally launch.

AMA about variables! Happy to answer q’s. #Config2023 pic.twitter.com/N9EiZRROW9
— Jacob Miller (@pwnies) June 21, 2023

Development

Here’s a CSS tip that I tweeted this week:

Quick #CSS snippet for truncating long text: pic.twitter.com/XikVWyDgQr
— Steve Harrison (@stevenaharrison) June 21, 2023

Code snippet graphics like this are popular on Twitter and LinkedIn, and when I set out to create one, I found that there are a myriad of tools out there to automate this. My favourite, which I used to generate the above, is Carbon from Vercel (man, do these guys ever stop?!): you simply enter the source code, select the language, choose styling options, and then download the image:

Adobe also have a handy tool Express where you can do file conversion tasks easily like convert .mov to .mp4: it’s free but you have to log in/sign up for an Adobe account.

Vercel have released the Vercel AI SDK, which allows you to easily stream API responses from AI models on the Front End.

Canva have written about how they optimised AWS S3 costs:

How Canva saves millions annually in Amazon S3 costs

Understanding our data and usage patterns was the real key.

canva.dev

Something I totally forgot about until John Gruber from Daring Fireball mentioned it this week is that the W3C have been working on a social networking standard since 2018, called ActivityPub. Facebook are apparently planning to adopt it, which is great, but that hasn’t stopped some people on Mastodon from fighting against it.

Some interesting open source projects:

tinygrad - a simple open source deep learning framework.
a16z-infra/ai-getting-started - a Javascript AI getting started stack for weekend projects, including image/text models, vector stores, auth, and deployment configs.

And finally, Elon Musk and Mark Zuckerberg are toying around with the idea of a cage fight. 🤣🥋

Have a great weekend!

Tech roundup - Fri 30 June 2023

Fri, 30 Jun 2023 00:00:00 GMT

AI

Toyota has released a generative AI tool for designing cars:

1. Toyota Design AI

Toyota (yes that company lagging in EVs somehow cares about AI) released generative AI for car design: pic.twitter.com/W3ve7ppYEA
— Aakash Gupta 🚀 Product Growth Guy (@aakashg0) June 27, 2023

Artists have also been sharing what they’ve been able to achieve with Midjourney: check out the below example!

Galloping at Twilight by u/futurewham in midjourney

Spotify may be banning AI-generated music, but you can listen to examples on SoundCloud, including based on popular artists such as Drake and Ariana Grande:

Artificial Intelligence Radio - AI Generated Music

Artificial Intelligence Radio plays AI-generated songs 24/7. Experience unique and creative music crafted by artificial intelligence.

AI Generated Music

One Twitter user said he listened to it during his workouts; others are less convinced.

Gleamer, a 5-year-old French AI startup has raised €27 million Series B funding. They makes software to help radiologists diagnose and detect bone trauma lesions in scans.

Crypto

Crypto app Damus has failed Apple’s App Store review process because the Bitcoin tipping feature does not give Apple a 30% cut, despite the fact that the app does not unlock any content based on tipping:

Decentralized social networking app Damus to be removed from App Store, will appeal decision

Damus, a decentralized social networking app backed by Twitter co-founder Jack Dorsey, is being removed from the App Store due to Apple’s strict payment rules.

TechCrunch

And a little gem from the SEC filing suing Binance:

Now for some non-AI news!

Tesla’s EV charging technology is on the fast track to become a US standard. Reuters reports that:

SAE International aims to make an industry standard configuration of Tesla’s charging connector in six months or less, an official at the standards organization said on Tuesday.

The Biden administration had previously tried to make the Combined Charging System (CCS) the standard, similar to the EU.

Proton have released Proton Pass, an open-source and encrypted password manager. It’s nice to see them gradually building a suite of work tools as a privacy-first alternative to offerings by Big Tech. TechCrunch reviews it here.

Sydney recently had a drone show as part of Vivid, which was the largest to date in the Southern Hemisphere. It looks like the Northern Hemisphere isn’t slowing down either with this spectacular display in France:

Drones used in the Wine Festival celebrations illuminated the night.
France, Bordeauxpic.twitter.com/wAAnUo4sk7
— Figen (@TheFigen_) June 26, 2023

And a social media app, Unicorn, is shutting down after admitting that 95% of its users were fake! It had raised more than $200M in VC funding and had a valuation of $1.1B.

1. Create 19 million fake users in db
2. Raise $200M in VC funding
3. ????
4. PROFIT!!! https://t.co/GiYKLfQiLK
— @levelsio (@levelsio) June 27, 2023

My favourite is looking back at glamorous PR articles like this one:

The Search For Balance Led Abraham Shafi To His Billion Dollar Tech Unicorn

The importance of the journey versus the destination is a common life adage aimed at keeping us present and grateful, For tech founder Abraham “Abe” Shafi, it’s part of what inspired him to launch the billion dollar unicorn, IRL. Get inspired by his story this World Mental Health Day - and beyond.

Forbes

I’m sure he’ll have plenty of time to be ‘present’ in prison! 😂

Some other interesting articles:

Engineers are trying to build better air conditioners. Given how bulky existing ones are, I’m all for this!
How Shazam Makes Unique Audio Fingerprints to Identify Songs (Video)
Apple has uploaded the first episode of Silo to Twitter before they release the finale.
Microsoft wants to move Windows entirely to the cloud

A cool browser extension that I found out about this week is StopTheMaddness, which allows you to reverse stupid client-side code that websites add, such as blocking copy and paste in text fields “for security”. 🙄

Also, I finally figured out why Google branding looks the way it does:

It all makes sense now! pic.twitter.com/HDSi0d8KlZ
— Steve Harrison (@stevenaharrison) June 28, 2023

Have a great weekend! 😀

Tech roundup - Fri 7 July 2023

Fri, 07 Jul 2023 00:00:00 GMT

Well the big talk of the week: Meta has launched Threads, their Instagram Twitter competitor and it passed 2 million users in the first 2 hours! I’ve played around with it on the first day: the UI is nicely done and leveraging your Instagram network is a pretty cool way for it to grow. Only time will tell whether it becomes a Twitter rival or the next Google+, but it’s a good start! You can follow me at steve_harrison.

Threads passes 10M sign-ups in 7 hours

It’s day one for Threads, Meta’s new Twitter clone, and new users are signing up in impressively huge numbers already.

TechCrunch

Humane, the AI startup founded by ex-Apple designers, has put out a press release about their first product to launch: the AI Pin. TechCrunch covers it here.

Humane reveals the name of first device, the Humane Ai Pin.

Humane, Inc. today announced its first device will be called the Humane Ai Pin, the latest detail to be revealed ahead of its launch later this year. The Humane Ai Pin is a new type of standalone device with a software platform that harnesses the power of AI to enable innovative personal computing e…

Humane logo

A new startup, Kaedim, promises to turn your 2D images into 3D models and auto-generate textures for a fee. You can download the resulting 3D models in popular formats such as obj, fbx, glb, and gltf.

AudioPen is a new AI startup that will convert your voice notes into text notes.

Midjourney has released a new panning feature.

Check out this cool example of using generative AI to scale up imagery:

Google has updated its privacy policy to disclose that they may train their AI services on public data scraped from the web.

The protests on Reddit seem to have been successfully squashed, and StackOverflow has joined Twitter and Reddit in planning to charge for API access in response to AI startups using these services for training AI models. Elon Musk has mentioned that they had to bring up new servers at Twitter to handle the increased load from AI startups.

The CEO of Stability AI has said in an interview that “There will be no programmers in five years”. The company wants to get involved with AI projects in a whole range of sectors, from building models for protein folding, DNA analysis, and chemical reactions to language models and audio-visual data processing.

Tesla has exceeded earnings estimates.

CSS animation composition

There’s a new CSS feature for when you have multiple animations affecting the same element:

Specify how multiple animation effects should composite with `animation-composition` - Chrome Developers

When multiple animations affect the same property simultaneously, should they replace each other, add, or accumulate?

Chrome Developers

Component library options in 2023

I was curious about the available options for Front End component libraries these days. It turns out there’s a lot now! Here’s a list of some of the options. In addition to the usual suspects like MUI, Ant Design, and Tailwind, a lot of Big Tech companies now have their own component libraries online. Some of them include:

Uber - https://baseweb.design
Adobe - https://react-spectrum.adobe.com/react-spectrum
GitHub - https://primer.style/design
Palantir - https://blueprintjs.com
IBM - https://carbondesignsystem.com

GOVUK also have a React component library for their design system.

One component library that I’ll be checking out more is Mantine, which is built on the Emotion CSS-in-JS library. I also thought that Adobe’s React Spectrum had some really nice controls and clean markup.

The award for the most uninspiring design system has got to go to IBM with their Carbon Design System, where they somehow found a way to bring a dull Enterprise aesthetic to the web.

Crypto

The Solana co-founder has proposed that Ethereum could become a layer-2 for Solana. I’ll believe it when I see it.

Dev

Testing sliders in Playwright

When testing UIs with Playwright, sometimes you might want to interact with a slider like this one from Google’s Material UI library:

Some of the suggestions involve complex logic to determine the width of the slider and what coordinates to click at, but if you don’t need to set the slider to a precise value, there are some easier ways.

The first method is to simply click the slider. I read that Playwright will click an element in the centre by default; however when I tried this it clicked it around 37ºC:

await page.locator('.MuiSlider-marked').click();

This sufficed for my use-case as I just wanted something non-zero for testing.

Another approach is to take advantage of MUI’s in-built keyboard accessibility and move the slider that way:

await page.locator('.MuiSlider-thumb').click();
for (let i = 0; i < 10; i++) {
  await page.keyboard.press('ArrowRight');
}

I’ll leave you with this:

Be careful everyone. I had my laptop open with my pitch deck for my AI startup pulled up and someone broke my window and dropped in a term sheet. pic.twitter.com/KWZ3upDNmC
— Roshan Patel (@roshanpateI) July 5, 2023

Have a great weekend!

Tech roundup - Fri 21 July 2023

Fri, 21 Jul 2023 00:00:00 GMT

AI

The AI artist community keeps coming up with amazing images generated in Midjourney. Check out the cover image above (you can view the whole series here) and these 3D text effects:

Meta has released Llama 2, their open-source large language model. The release includes model weights and starting code for pretrained and fine-tuned Llama language models ranging from 7B to 70B parameters.

Apple is reportedly looking at generative AI according to this article by Reuters:

The iPhone maker has built its own framework, known as “Ajax”, to create large language models (LLMs) and is also testing a chatbot that some engineers call “Apple GPT”, the report said, citing people with knowledge of the matter.

Stability AI has released Stable Doodle, which turns sketches into images:

Elon Musk has unveiled his new AI company: xAI, whose goal is to “understand the true nature of the universe”. Employees have previously worked at DeepMind, OpenAI, Google Research, Microsoft Research, Tesla, and the University of Toronto.

Usage of Threads has dropped since the big launch. They have also now introduced rate limiting to counter spam attacks. Remember when everyone was complaining about Twitter doing it? Speaking of rate limits, Elon Musk increased it on Twitter by 50% for verified users after someone complained that he’d been capped after spending over 9h on Twitter one day. While a great example of listening to your customers and continuously iterating a product, I think the more important point here is should you be spending 9h / day on Twitter?! (I don’t think so!)

Incredible pic.twitter.com/uppf8O1OD2
— Austen Allred (@Austen) July 16, 2023

Twitter is now sharing ad revenue with creators. Writer Brian Krassenstein, who has about 750,000 followers, posted that Twitter had paid him $24,305. Creator payouts are calculated based on revenue from ads shown in tweet replies. As Farzad Mesbahi tweeted, “The more haters you have in your replies the more money you’ll make on Twitter.” Musk replied, “Poetic justice.”

Crypto

A judge ruled that the cryptocurrency Ripple (XRP) is not a security, except for direct XRP sales to institutions. According to Ripple Labs’ chief legal officer, Stuart Alderoty:

A huge win today — as a matter of law — XRP is not a security. Also a matter of law — sales on exchanges are not securities. Sales by executives are not securities. Other XRP distributions — to developers, to charities, to employees are not securities.

XRP surged 70% as soon as the news broke; Coinbase shares climbed past US$100 for the first time since May 2022; and Ethereum broke past US$2000 for the first time this year.

Alex Mashinsky, the founder of the bankrupt crypto firm Celsius, was arrested in New York last Thursday. The charges against him include wire fraud, commodities fraud and manipulation of securities prices.

Binance has integrated the Bitcoin Lightning Network, a Layer 2 protocol built on Bitcoin that reduces fees and congestion on the network by enabling micropayment channels and conducting transactions off-chain. Binance users will now be able to deposit or withdraw Bitcoin on the Lightning Network.

TV opening titles rendered using blockchain

One of the crypto projects that I have been interested in is The Render Network, which includes names such as J. J. Abrams (the director of two of the recent Star Wars films), Brendan Eich (the creator of JavaScript, co-founder of Firefox, and CEO of the crypto-focused browser Brave), and Mike Winkelmann (the crypto artist Beeple).

The Render Network is the first decentralized GPU rendering platform, empowering artists to scale GPU rendering work on-demand to high performance GPU Nodes around the world. Through a blockchain marketplace for idle GPU compute, the network provides artists the ability to scale next generation rendering work at fractions of the cost and at orders of magnitude increases in speed when compared to the centralized GPU cloud.

An example of The Render Network being used for real-world projects is this spotlight piece on artist Raoul Marks, who is from Perth and has won two Emmys. He’s a director at Antibody, a studio that specialises in opening title sequences for TV shows. They’ve done the opening titles for The Crown, The Night Manager, and countless other TV shows:

They’re now using the Render Network in their pipeline, and have used it to produce the opening credits for Westworld Season 4, Apple’s new series Silo, and the trailer for Playstation game MARATHON. Pretty cool! A great example of useful crypto tech.

This is what happens when political correctness ends up in website forms:

It also appears that the cycle has started again of recruiters looking for developers with years of experience in a brand-new technology. Someone shared this job posting on Upwork:

I remember when Node.js was a few years old there would be job descriptions all the time looking for “10 years of Node.js experience”. Yeah, good luck with that! 😂

Microsoft is still Microsoft

I’m no fan of Microsoft, but given the fact that they’ve switched to Chromium as the rendering engine for Edge, I was willing to give them another chance. I downloaded Edge to test something for work but instead of being greeted with an app that I could open immediately (like most other browsers in 2023), I was greeted with this:

Sometimes people—or organisations—just don’t change! The browser experience is terrible too, by the way: 10/10 would not recommend. 😂

A Twitter influencer, Sahil Bloom, recently posted about Bill Gates:

I replied:

Dev

Addy Osmani wrote a nice piece about how software is a vehicle for delivering value to people. I like this, since so many people argue over and spend countless hours on tooling, losing focus on what the end goal actually is.

Removing animations in Playwright

When testing, especially when doing screenshot comparison, animations can cause inconsistencies between test runs, so it’s easier and more performant to disable them. A great way to do this is to emulate the prefers-reduced-motion CSS media rule in Playwright. This approach also encourages you to make sure your UI and third-party libraries support prefers-reduced-motion for accessibility—win win!

CSS Nesting

I’ve made a YouTube Short talking about how CSS Nesting is now available natively in Chrome, Safari, and Edge—no need to use Sass! Firefox is also supporting it in version 114, due to be released in August.

Triplex

Triplex is an editor that enables you to edit React Three.js Fiber components visually, with changes saved straight back to code, and modifying your source code syncs back to the editor.

All right, that’s a wrap—have a great weekend!

Tech roundup - Friday 28 July 2023

Fri, 28 Jul 2023 00:00:00 GMT

The Line

NEOM is a new urban area planned by the Kingdom of Saudi Arabia to be built in its northwestern Tabuk Province. The site is north of the Red Sea, east of Egypt across the Gulf of Aqaba and south of Jordan. The total planned area of NEOM is 26,500 km². In January 2021, the project unveiled plans for The Line, a linear city 170 kilometres long and 200 metres wide within the NEOM area. A new 45-minute-long documentary about The Line has been released by the Discovery Channel. It marks the first time the majority of architects connected to the project have spoken about it in public.

Twitter is now X

Twitter rebranded to X this week, and in true Elon style, he crowdsourced the logo via Twitter. The company has also taken over the @X Twitter username which was previously the account of a photographer, Gene X. Huang. He has been moved to @x12345678998765.

Esther Crawford, a former product manager at Twitter who went viral after posting a photo of herself in a sleeping bag at the office shortly after Elon acquired Twitter, has written a great essay on her experience working at Twitter. It’s a great insight into how inefficient Twitter was previously and the pros/cons of how Elon is operating it now.

Worldcoin

Digital identity project Worldcoin launched their WLD crypto token on Monday, which soared 60% on the first day of trading. Sam Altman, CEO of OpenAI is one of the founders: he’s said he isn’t sure whether the project will succeed, but it’s “worth a shot”.

The creator of Ethereum, Vitalik Buterin, has published his thoughts on Worldcoin and similar “proof of personhood” projects. The goal with proof of personhood is essentially to create a list of public keys with the guarantee that each key is controlled by a unique human. That key can then be used instead of existing verification methods such as CAPTCHAs and credit cards (the latter was Elon Musk’s strategy to deal with bots on X—requiring a valid, unique credit card number significantly increases the cost of spam attacks as you typically have to go through bank verification in order to get one).

Meanwhile, the MIT Technology Review has another take from 2022 on Worldcoin:

Deception, exploited workers, and cash handouts: How Worldcoin recruited its first half a million test users

The startup promises a fairly-distributed, cryptocurrency-based universal basic income. So far all it’s done is build a biometric database from the bodies of the poor.

MIT Technology Review

AI-powered web design

Wix has added generative AI to their WYSIWYG web design tool:

Wix CEO’s Thoughts About AI: Past, Present and Future

Get a glimpse of our suite of AI-powered capabilities and our new AI Site Generator, which will reshape website building and beyond.

Wix Blog

A new browser experience

Arc, by the Browser Company of New York, is a new Chromium-based web browser focusing on a great user experience. It organises tabs, favourites, and workspaces in a panel on the left (as opposed to at the top, like in most web browsers) and allows you to easily create split screens with different webpages. There was previously a waitlist to try it, but it’s now available to everyone. I’ve started using it today and will let you know how I go! I’m using it to write this newsletter. 🙂

Arc from The Browser Company

Experience a calmer, more personal internet in this browser designed for you. Let go of the clicks, the clutter, the distractions.

Dev

What’s new in Chrome DevTools

You can now view the specificity of a CSS selector by hovering over it:

I’ve published a short YouTube video on it:

If you need a refresher on how specificity is calculated, check out this mdn page.

You can now override HTTP response headers, which is handy to bypass CORS errors:

To see all the new things in Chrome DevTools, check out this video by their developer team:

Alright, that’s a wrap—talk to you next week!

Tech roundup - Fri 14 July 2023

Fri, 14 Jul 2023 00:00:00 GMT

Threads has passed 100M users in five days since its launch last week, overtaking ChatGPT as the fastest growing app of all time (for comparison, ChatGPT reached 100M users in the first two months, which was a record at the time). It’s the dream to have a large user base who you can market a new product to rather than having to grow it from scratch, so it’s pretty cool watching this unfold. Users have made more than 95M posts and shared 190M likes on the platform.

Netflix have invented a new way of removing subjects from backgrounds in film & TV. Blue & green screens are the usual way of adding computer-generated backgrounds behind actors currently. The researchers, including Paul Debevec (check out his website: he’s done some really cool VFX R&D including papers around the popular technique of capturing 360º imagery on set by filming chrome spheres!), extend this approach by lighting the subjects with magenta light so they are only in the red and blue channels, and then everything in the green channel can be removed. They then film a version of the scene with normal lighting and use AI to relight the magenta version correctly. The technique works for tiny strands of hair, green clothes / objects that are not to be removed, and even transparent objects such as glass. You can read more here and watch an example below:

Details about Brazil’s CBDC (Central Bank Digital Currency: using crypto tech to improve the Back End of existing government financial systems) have revealed that they will likely be able to move, burn, or freeze user funds, similar to the existing banking system where customer bank accounts can be frozen or seized.

Colours as your crypto wallet backup

When you create a crypto wallet for storing digital currency, you’re given a backup consisting of a sequence of English words, called a seed phrase. You’re encouraged to back this up somewhere separate to your secret key so, if you ever lose the key, you can enter the seed phrase to gain access to your wallet again.

A researcher has come up with a way of storing this backup as colours instead of words. You can either record the colours themselves or a list of hex codes, and the order doesn’t matter. This makes it easier to hide it, as these days more people know that a random piece of paper with 12-24 words on it is likely some valuable crypto information. Last year, someone’s seed phrase was leaked online via public police body-cam footage. Police searching a man’s car found a piece of paper with words written on it that were easily readable in the video.

I tried generating a random seed phrase (not associated with a wallet 🙂) and running it through the tool, BIP39 Colors:

Censorship & news on Threads

Conservatives have reported being censored on Threads already for posting true information such as cocaine being found at the White House. Apparently when you try to follow such accounts, you see a popup discouraging you from following them:

I successfully followed Donald Trump Jr and DC_Draino without seeing the popup myself, so it would appear that they’ve changed this behaviour since.

It is no secret though that news and anything controversial is discouraged on Threads. Mark Zuckerberg has talked about how they are “definitely focusing on kindness and making this a friendly place” and Adam Mosseri, the head of Instagram, said in an interview with Verge that ‘the additional scrutiny, negativity, and integrity risks that come with politics and hard news aren’t worth the “incremental engagement or revenue”’. He went on to add:

“There are more than enough amazing communities — sports, music, fashion, beauty, entertainment, etc. — to make a vibrant platform without needing to get into politics or hard news.”

I find this interesting, because it wasn’t too long ago that Facebook introduced news onto its timeline and pushed it heavily. Adam Mosseri himself ran Facebook News Feed in 2016. My timeline used to be filled with what my friends were up to but has since become a lot less useful, and is really now mostly a stream of news, blog posts, and ads. You have to dig deep into other menus in the app to get a feed of what your friends have been posting. As a result, I don’t spend much time using the app anymore.

Additionally, Meta has been in lots of drama over monetisation of its news feed with governments and news organisations in Australia and Canada, to name a few.

My take is that, in addition to competing with Twitter and attracting users who don’t use Twitter or Facebook, Threads also serves as a Facebook reboot and a chance to attract users back to, well, something that actually resembles a social network.

Dev stuff

I started working with AWS DynamoDB this week. You can run it locally in a Docker container and I came across a nice macOS GUI called Dynobase for inspecting and interacting with the DB:

Increase timeout 3x for a test in Playwright

If you have a test in Playwright that takes longer to run than normal, you can use a simple command, test.slow(), to triple the default timeout for that test:

import { test, expect } from '@playwright/test';

test('slow test', async ({ page }) => {
    test.slow();
    // ...
});

I’ll leave you with this crypto tweet:

Have a great weekend! 😀

Tech roundup - Friday 4 August 2023

Fri, 04 Aug 2023 00:00:00 GMT

Uber has finally turned a profit! CEO Dara Khosrowshahi also mentioned that they are developing an AI chatbot for customer service, marketing, and other automated tasks.

Rumour is it that Bob Iger might have returned to Disney to sell it to Apple, which would be the deal of a lifetime. Apple has a strong presence in China, whereas Disney has struggled in the market. Disney could potentially lose US$800M in streaming in the third quarter so consolidating with Apple’s streaming tech could also provide advantages there. Of course, anti-trust regulators could block a deal like this. It will be interesting to see whether it ever eventuates!

While some people may have reservations scanning their iris in exchange for a Worldcoin ID and 25 WLD (worth around AUD$90 as of writing), they haven’t had any issues finding people to sign up:

day 3 of @worldcoin launch, crazy lines around the world. one person getting verified every 8 seconds now. pic.twitter.com/vHRu1sWMT3
— Sam Altman (@sama) July 26, 2023

However, Kenya—one of the biggest markets for take-up—has suspended Worldcoin’s rollout there over privacy concerns.

AI

If you want to read more about the state of open-source AI, here’s a nice write-up:

The open source models arena

I try not to post too much about open models until we reach a point where there will no longer be any debate about if they are at the level of closed models.

So let’s make it brief.

----
LLaMA 2

The open models arena heated up last week with the… pic.twitter.com/BfXEb9CPfx
— Yam Peleg (@Yampeleg) July 30, 2023

The bit that stuck with me though: there’s a model called SlimPajama?

I had been considering writing a nice little ChatGPT UI for macOS, but it looks like someone has beat me to the punch with MacGPT. It lives in your menubar and you can also use it in a Spotlight-style UI, which is a far better user experience in my opinion than opening up ChatGPT in a web browser.

He’s also written a version for iOS.

Usage of StackOverflow has dropped this year, with many developers now using ChatGPT or GitHub Copilot to answer their coding questions. This week, StackOverflow announced a pivot into AI: OverflowAI. One of my favourite features is their Visual Studio Code plugin where you can search for content all within your IDE, and even search Confluence for documentation specific to your company/project. Being able to search all this information using AI, right from your IDE, is a massive win for developer productivity!

Crypto

US$60M was stolen from Curve, one of the largest decentralised crypto exchanges (they have US$1.67B in customer assets on the exchange), due to a vulnerability in their Vyper programming language (used for writing smart contracts).

The SEC has filed charges against Richard Heart, the founder of crypto token HEX. This comes as a movie has just been released about him portraying his rather lavish lifestyle:

You might remember 3AC, the crypto hedge fund that went bankrupt in 2022. Well the bankruptcy drama continues:

Three Arrows Capital co-founder Kyle Davies is attempting to fight a motion to hold him in contempt of court by arguing that U.S. laws no longer apply to him.

The U.S.-born and raised Davies told a judge in U.S. Bankruptcy Court for the Southern District of New York on Tuesday that he renounced his U.S. citizenship in late 2020 and no longer views himself as under the jurisdiction of U.S. courts.

Dev

You can now control how objects get represented in the developer console in Firefox and Chrome with Custom Object Formatters.

That’s a wrap—have a great weekend!

Deep fake avatars, guessing your password using audio + AI, and new web dev features

Fri, 11 Aug 2023 00:00:00 GMT

An AI-generated deep fake has been making the rounds—I think it’s pretty convincing:

[NEW] - Joshua Avatar 2.0 🤖✨. Both of these video clips were 100% AI-generated, featuring my own avatar and voice clone. 🎙️🎥

We’ve made massive enhancements to our life-style avatar’s video quality and fine-tuned our voice technology to mimic my unique accent and speech… pic.twitter.com/9EgxRA69dg
— Joshua Xu (@joshua_xu_) August 8, 2023

Researchers have published a paper on guessing passwords with AI by listening to the sounds made by your keyboard over a Zoom call.

The researchers from the University of Surrey, Durham University, and Royal Holloway, University of London, pressed each of 36 keys on a MacBook Pro, including all of the letters and numbers, 25 times in a row, using different fingers and with varying pressure. The sounds were recorded both over a Zoom call and on a smartphone near the keyboard.

The team then trained a machine learning system to recognize features of the acoustic signals associated with each key. They tested the system on the remaining data and found that it could accurately assign the correct key to a sound 95 percent of the time when the recording was made over a phone call and 93% of the time when it was made over a Zoom call.

The study is not the first to show that sound can identify keystrokes, but the team says their study uses the most advanced methods and has achieved the highest accuracy so far.

How your keyboard sounds can expose your data to AI hackers

Researchers have developed a system that can guess passwords by listening to the sound of typing on online meetings and video calls.

Interesting Engineering

A new AI model generates 3D textured meshes based on a single “unposed” photo:

Magic123: One Image to High-Quality 3D Object Generation Using Both 2D and 3D Diffusion Priors

Magic123: One Image to High-Quality 3D Object Generation Using Both 2D and 3D Diffusion Priors, 2023.

Magic123: One Image to High-Quality 3D Object Generation Using Both 2D and 3D Diffusion Priors

Google has announced NotebookLM, an AI-powered notebook where you can feed in your own Google Docs and then get summaries, ask questions about the content, and generate ideas based on the content (for example: “Generate a script for a short video on this topic” or “What questions would potential investors ask?”).

Introducing NotebookLM

We’re rolling out NotebookLM, an experimental offering from Google Labs to summarize information, complex ideas and brainstorm new connections.

Google

It appears journalists still don’t understand the “shitposting” culture on X and that they might want to take posts with a grain of salt: someone wrote an entire Insider article about a joke X post:

This is my finest work pic.twitter.com/lpkenvh70Q
— Alex Cohen (@anothercohen) August 7, 2023

That, or they’re just trying to cash in on some of the engagement too. 😏

Dev

Here’s a video on how F1 use AWS:

Formula 1: Transforming Fan Engagement with Cloud - TechNative

Data-driven insights with F1 and AWS At the recent AWS Summit in London we caught up with esteemed former engineer at Ferrari and Williams, Rob Smedley, to discuss the growing utilization of data in Formula 1, and how it’s changing the fan experience. We also spent some time with AWS’s Neil Ashton…

TechNative

All it takes is one misplaced tracking pixel

I was researching Backblaze, a cloud internet backup service, and found this interesting article on a data breach that occurred:

Backblaze on the back foot after ‘inadvertently’ beaming customer data to Facebook

Backup company says tracking code now removed, but what info was sent?

The Register

It’s a great reminder that you can have end-to-end encrypted services but at some stage, the data has to be decrypted to show to the user, and if there’s a bug in the Front End of your app where the data is visible, bam! In this case, they added some JavaScript code using Google Tag Manager, commonly used to add advertising / analytics tracking code by marketing teams, but didn’t restrict the URL pattern to only target their public pages. Personally, it would seem like a good idea to not even have Google Tag Manager on the authenticated section of your site for precisely this reason.

SSD reliability

Have you ever wondered how reliable SSDs are at scale? Well fear not, here’s a study of 1.4 million SSDs by researcher Prof. Bianca Schroeder and NetApp:

SSD reliability in the enterprise: This survey yields a few surprises

Solid state drives (SSDs) have remade the storage industry in the last decade. They’re costly, fast, and power efficient, but just how reliable are they? A new study of almost 1.4 million SSDs offers some surprising answers.

ZDNET

An interesting finding: drives with less usage experienced higher replacement rates.

IDX

Google announced a new browser-based code editor this week called IDX.

IDX is based on VSCode, and the vision is a full fidelity local environment with AI smarts, quick starting points for apps using popular frameworks, a Linux-based VM in a data center near you, and quick deploys to Firebase Hosting and (soon) Android + iOS simulators in-browser.

You can read more in this article by Addy Osmani and sign up for the waitlist at the official website.

Serenity

While I was looking at new JavaScript proposals on GitHub, I noticed they mentioned “Serenity” as one of the browser engines to add these features to, in addition to the usual suspects such as Chromium and WebKit.

SerenityOS is a hobby Unix-like OS created in 2018 by Andreas Kling. He went as far as to write his own web browser from scratch!

SerenityOS: Remarkable project with its own JS-capable web browser

Lead dev of modest ground-up Unix-like OS quit job to work on it

The Register

ch CSS unit

At a recent SydCSS meetup, I discovered the ch CSS unit which refers to the width of one character (the “0” character, specifically). You can use it to specify container widths based on the number of characters you want to fit in:

You can read more about it here:

What is the CSS ‘ch’ Unit?

Is ‘1ch’ in CSS the width of one character? Well… yes and no. Mostly no.

Repeating JavaScript RegExp capture group names

In future, you will be able to use the same capture group name in different OR segments of your JavaScript regular expressions.

Currently the above code will result in an “Invalid regular expression: Duplicate capture group name” error.

This TC39 proposal is in Stage 3: you can try it out now in Safari Technology Preview and as a Babel plugin, https://babeljs.io/docs/babel-plugin-proposal-duplicate-named-capturing-groups-regex.

More info: https://github.com/tc39/proposal-duplicate-named-capturing-groups

prefers-reduced-transparency

In modern OSes, you can enable a “Reduce transparency” accessibility option to make the UI easier to read. The experimental prefers-reduced-transparency CSS media query allows you to adjust your web UI to suit this preference. You can try it out today in Chrome Canary with the “Experimental Web Platform features” flag enabled.

`<search>`

The new <search> HTML element provides a semantic way to identify a search/filtering area, as an alternative to role="search", so screen readers can provide quick access to it. The idea is to be able to write semantic, accessible HTML without having to use ARIA.

It isn’t available in any browsers yet.

Learn more: https://www.scottohara.me/blog/2023/03/24/search-element.html

Have a great weekend!

NVIDIA 2D -> 3D, crypto now less volatile than oil, design like Mozart, and code better with Nova!

Fri, 18 Aug 2023 00:00:00 GMT

AI

Google Chrome will summarize entire articles for you with built-in generative AI

The AI-powered notes in Chrome are launching first on Android and iOS.

The Verge

🔴 Finally! NVIDIA has finally made the code for Neuralangelo public!

It has the ability to transform any video into a highly detailed 3D environment, and it’s a technology related to but DIFFERENT from NeRF.

💡 Here’s how it works:
It takes a 2D video as input, showing an… pic.twitter.com/tS3dv7df61
— Javi Lopez ⛩️ (@javilopen) August 14, 2023

Wait, Did They Just Leak The Secret Behind GPT-4?

OpenAI’s GPT-4 may owe its capabilities to an old technique from the early 1990s known as “Mixture of Experts”

Generative AI

Crypto

Bitcoin and Ethereum Are Now Less Volatile Than Oil: Kaiko Research - Decrypt

The summer doldrums are hitting Bitcoin and Ethereum hard, dampening the assets’ historic volatility to multi-year lows.

Decrypt

Microsoft AI Integration Sends Aptos Token APT Soaring 13% - Decrypt

The price of APT is soaring after Microsoft announced it was partnering with Aptos Labs, the developer behind the blockchain.

Decrypt

Web3 Gaming Platform Immutable Launches zkEVM Testnet

The new Layer 2 blockchain will be a first of its kind chain dedicated to Web3 gaming products building on Ethereum.

Unchained Crypto

Fintech in the Front, DeFi in the Back—Crypto’s Quiet Revolution Is Underway - Decrypt

From digital dollars to Visa cards, the promise of crypto is going to look a whole lot like the rise of fintech.

Decrypt

Design

Is it mere coincidence or the intuition of Apple’s designer?

This composition aligns remarkably well with the classic musical scale of octaves at a 2:1 ratio.

Steal this concept for your next design 😈 pic.twitter.com/kYIZXbpYKs
— Vincent Le Moign (@webalys) August 15, 2023

Other tech stuff

One of the leading video editing software makers, Avid, used for many major Hollywood productions, has recently been sold for $1.4B to a private equity firm.

Avid sold for $1.4 billion: what comes next?

Several months after it was revealed that it was exploring its options, Avid was sold overnight to private equity firm STG for $1.4 billion. Is a separate ProTools sale next?

red-shark-logo

I learned today that tapping the Bluetooth icon in the Control Centre on your iPhone doesn’t actually turn off Bluetooth—it just disconnects from current devices. Apple designed it this way so that you can still use features like AirDrop and AirPlay. You have to go to Settings in order to actually disable Bluetooth.

The iOS 11 Control Center Doesn’t Really Disable Bluetooth and Wi-Fi - Here’s How to Fix It

If you want to conserve your battery and avoid all wireless activity on your iOS 11 device, you’re going to have to do this extra step.

groovyPost

This enabled hackers at DefCon to put together a Raspberry Pi and a few other components for around $70 to pretend it’s an Apple device and trigger all sorts of popups on nearby iPhones that are used for connecting to nearby Apple devices.

This $70 device can spoof an Apple device and trick you into sharing your password | TechCrunch

A researcher built a $70 contraption designed to send pop-up prompts to nearby iPhones, which could trick targets into giving away their password.

TechCrunch

Dev

My coding life changed this week when I discovered a beautiful new code editor for Mac: Nova! It’s by Panic, who have previously built beautiful Mac apps such as Transmit and Coda.

Nova

The beautiful, fast, flexible, native Mac code editor from Panic.

Nova

I’ve always loved the Xcode UI and it always surprised/disappointed me that Apple didn’t make it more friendly for web projects or that other web IDEs did not copy it. At the moment, the most popular web IDE is Microsoft’s Visual Studio Code, and while quite functional, I dislike the UI. There are good code editors such as Sublime Text, WebStorm, TextMate, and BBEdit, but I feel like they are all strong in specific areas and lacking in others.

Nova is a beautiful, native Mac app that does everything well. It has:

A Mac-like UI for everything.
Support for modern languages like JSX and TypeScript.
A great built-in Git and diffing UI.
Fast file-switching with Command-Shift-O.
Great find/replace engine within files and projects.
Split view terminal and WebKit browser for previewing changes.
Extension library where you can install tools like Prettier and custom themes.

Additionally, there are beautiful UI touches like showing the HTML tag nesting structure and colouring each indent level column line differently so you can distinguish them more easily.

Useful functionality like git blame is also there by default without having to add an extension.

Check it out—I think you’ll like it. I’m looking forward to finding out what other little gems they’ve added to the app! 💎 😀

Alright, that’s a wrap—have a great weekend!

Python in Excel, AI face search, and deep-cloning JavaScript objects natively

Fri, 25 Aug 2023 00:00:00 GMT

Microsoft is bringing Python to Excel:

There is now a reverse image lookup that uses facial recognition to find all images of a person publicly on the web:

Possibly the most disturbing AI website on the internet.

Upload a photo of a person, and AI will find ALL of the images of that person across the internet.

Here’s what you need to know: pic.twitter.com/oIEUXdY8CE
— Rowan Cheung (@rowancheung) August 23, 2023

Parmigiano-Reggiano are now putting edible microchips into their cheese blocks to fight against knockoffs. The silicon chips, made by p-Chip, use blockchain to allow the cheese to be traced all the way back to the producer of the milk. The market of European food products with EU protected status—also including Greek feta cheese, Champagne, and Italian Parma raw ham—is worth €80 billion annually. These products can be twice the price of similar non-protected products, so there is a huge market—estimated to be also around €80 billion—for knockoffs and incentive for the food producers to prove authenticity.

Here is a thread of what developers have been coming up with for Apple’s Vision Pro SDK:

Two months ago, Apple released Vision Pro’s SDK. Since then, the community has been cooking 🔥

I collected some of my favorite creations so far ⬇️
— Wenbo Tao (@tracy__henry) August 22, 2023

My favourite is real-time subtitles:

Here’s Navi in action on #visionOS! It gives you subtitles for the real world, and can also translate what people are saying on the fly to your language. Obviously early in a lot of ways, but excited for how easy it is to develop for this platform. pic.twitter.com/5Vga3FoJSI
— Jordi Bruin (@jordibruin) August 6, 2023

For something a bit different, check out this luxury house that has been designed to resemble a yacht integrated into a hill in Greece:

greek ‘villa earth’ emerges from the mediterranean coast like a futuristic yacht

vrantsi’s ‘villa earth’ shaped like a yacht sits along the greek mediterranean coast, fusing organic forms and a futuristic aesthetic.

designboom | architecture & design magazine

Real-time CGI is improving in leaps and bounds:

CGI is about to get easy

This is simulon, a new iOS app that’s still in invite only mode

The video below was made with a live in-camera preview and auto-exposure matching, no camera solve, no HDRI capture and no manual compositing setup.

🔗 in next tweet pic.twitter.com/pJYFFaRGbd
— Linus (●ᴗ●) (@LinusEkenstam) August 22, 2023

Midjourney has released a feature that allows you to generate new AI content for a specific part of an image, allowing you to keep the bits you like while regenerating certain other areas of an AI-generated image:

🔴 FINALLY! Midjourney releases its INPAINTING!

We’ve been WAITING for this for AGES. Now we can edit any area of our generations!

💡 IMPORTANT: don’t forget to enable the REMIX option to be able to use a text prompt!

📽️ VIDEO TUTORIAL 👇#midjourney pic.twitter.com/d8GQ1gLth0
— Javi Lopez ⛩️ (@javilopen) August 21, 2023

For example, this AI-generated image originally featured a dog but was able to be changed to a variety of cats while preserving the rest of the image:

StabilityAI has released StableCode, a large language model specifically aimed at coding:

Stability AI launches StableCode, an LLM for code generation

StableCode, Stability AI’s code-generating LLM, will be available in a base model, an instruction model, and a long-context-window model.

VentureBeat

“What we would like to do with this kind of model is to do a similar thing as we did for Stable Diffusion, which helped everyone in the world to become an artist,” Christian Laforte, head of research at Stability AI, told VentureBeat in an exclusive interview. “We’d like to do the same thing with the StableCode model: basically allow anyone that has good ideas [and] maybe has a problem, to be able to write a program that would just fix that problem.”

Dev

I keep forgetting about new CSS and JS features that are already available! One such example is structuredClone, which allows you to properly deep clone an object natively in JavaScript:

You can also now use a polyfill for scroll-driven animations.

Chrome is [implementing](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin…. https://groups.google.com/a/chromium.org/g/blink-dev/c/IjZW1CQNNxM/m/st31PsqzAQAJ) the crossorigin attribute on <image> and <feImage> elements in SVGs. This is currently only available in Firefox 115. It will behave the same as the crossorigin HTML attribute:

SVG attribute: crossorigin - SVG: Scalable Vector Graphics | MDN

The crossorigin attribute, valid on the <image> and <feImage> elements, provides support for configuration of the Cross-Origin Resource Sharing (CORS) requests for the element’s fetched data.

MDN Web Docs

I’m also going to be talking about what’s new in CSS in 2023 at Web Directions Summit in October! Check out all the sessions and grab tickets here: https://webdirections.org/summit

That’s all for now—have a great weekend!

Titanium iPhone, increasing sales with the "IKEA effect", coding with AI, and more native Mac code editors

Fri, 01 Sep 2023 00:00:00 GMT

Apple’s new iPhone launch event is scheduled for the 13th September, where they’re expected to release a new iPhone 15 with a USB-C port and a new Apple watch. They may also switch to titanium for the shell for both.

Apple Events

Watch the latest Apple event stream, and check out the archive of special event announcements for our products and services.

Apple (Australia)

Lamborghini has unveiled an all-electric concept car:

Lamborghini unveils concept car Lanzador at Monterey Car Week

Lamborghini is presenting its electric concept car Lanzador at The Quail, A Motorsports Gathering

Lamborghini.com

The co-founder of Adobe, John Warnock, has died of pancreatic cancer at 82. Together with Charles Geschke, they created technology such as the PDF format, PostScript, Photoshop, and Illustrator.

And it has been revealed that Silicon Valley VCs, including Marc Andreessen and Laurene Powell Jobs (Steve Jobs’ wife), have purchased $800M of land near San Francisco to develop a new city. Bloomberg has done an excellent write-up on the project and other similar efforts to reimagine cities by tech billionaires:

VCs Keep Trying to Build a Utopia. Can It Happen in California?

Today we’ll look at tech’s obsession with creating the perfect metropolis. But first…

Bloomberg

I came across this interesting product strategy this week, where if you offer customers the ability to customise a product, they place much more value on it:

We used the “Ikea effect” to increase conversion by 82%.

Here’s why and how.

The Ikea effect is a “cognitive bias in which consumers place a disproportionately high value on products they partially created”.

We wanted to do 2 things in our product:

1. Increase conversion… pic.twitter.com/lO77xrpvND
— Mike Heap (@mike_heap_) August 24, 2023

It’s always interesting to see how the government fights against malware. In this example, they hacked computers in order to remove malware:

Qakbot Malware Disrupted in International Cyber Takedown

The Justice Department today announced a multinational operation involving actions in the United States, France, Germany, the Netherlands, the United Kingdom, Romania, and Latvia to disrupt the botnet and malware known as Qakbot and take down its infrastructure.

DOJ USAO Logo Central District of California

AI

I discovered a website that has existed since 2019 that creates fake profile pictures using AI to use for testing. They look uncannily real:

ThisPersonDoesNotExist.com uses AI to generate endless fake faces

Hit refresh to lock eyes with another imaginary stranger

The Verge

I’ve previously covered watermarking AI-generated audio—here’s what Google is doing to watermark AI-generated imagery:

Google DeepMind has launched a watermarking tool for AI-generated images

It’s the first Big Tech firm to publicly launch one, after a group of them pledged to develop them at the White House in July.

MIT Technology Review

AI-assisted coding is rapidly advancing. Here are some examples users have shared of what you can do now using the AI-focused (and VSCode-based) IDE, Cursor:

Now my AI just tells me what the bugs are in my code as I work. pic.twitter.com/9oYVzViLBc
— Mckay Wrigley (@mckaywrigley) August 29, 2023

We’re at the point with AI + coding where you can just give the AI a URL to some docs and it will learn the library.

Insane. pic.twitter.com/BQHvLs4TyG
— Mckay Wrigley (@mckaywrigley) August 24, 2023

AWS also now has AI coding tools:

AI Code Generator - Amazon CodeWhisperer - AWS

Amazon CodeWhisperer is an AI coding companion that generates whole line and full function code suggestions in your IDE to help you get more done faster.

Amazon Web Services, Inc.

And developers are using Vercel’s AI SDK to build some really interesting products, such as AI chat for YouTube videos and Yelp.

Introducing Chat with YouTube, an AI-powered browser extension that lets you chat with YouTube videos! 🚀

This project shows how easy it is to build conversational browser extensions using 🤗 Inference Endpoints and @Vercel’s AI SDK.

+ it’s open source! https://t.co/iF8c4la6bC pic.twitter.com/rpVa5pE0CB
— Xenova (@xenovacom) August 15, 2023

Although not AI-related (yet) (also a great example of X’s user-submitted context), it’s pretty amazing to see what robotic tools are available to surgeons these days:

A glimpse into the future of surgery.

This robot uses high precision and dexterity to peel an egg, puncture it, and stitch it back up using computer vision.

AI x Robotics is going to completely transform the world in the coming years.pic.twitter.com/INnSuG8Rr4
— Rowan Cheung (@rowancheung) August 29, 2023

Dev

A handy little autocomplete for Terminal extension called Fig has been acquired by AWS. Fig was started by Brendan Falk, who I went to school with—great to see entrepreneurs from Canberra doing well!

Fig has joined AWS!

Amazon acquires Fig’s technology and the Fig team joins Amazon Web Services (AWS)

Download for free

Netflix have written a post about an automated tool they’ve developed to choose what artwork to feature for the preview thumbnails for TV shows and movies. There are lots of factors involved such as what resonates most for viewers and avoiding sensitive content that features violence, nudity, or gore.

AVA Discovery View: Surfacing Authentic Moments

By: Hamid Shahid, Laura Johnson, Tiffany Low

Netflix TechBlog

A few weeks back I mentioned Nova, a new, native macOS code editor. I have been using it every day for work and I’m loving it! Interestingly enough, it seems there is a whole bunch of native macOS code editors out now:

My favourite is CodeEdit, which has heavily copied the Xcode and Apple Developer design:

CodeEdit – A native code editor for macOS

A lightweight, natively built editor. Open source. Free forever.

Some of these are open source, and have less features than apps like Nova and VSCode; nevertheless, it’s great to have choice! It’s interesting that there are a lot focused on being native to Mac and not supporting other platforms—I guess others felt similar to me that there was a gap in the market on Mac after getting sick of Electron-based experiments like Atom…

That’s all for now—have a great weekend!

AI meets typography, grifting from crypto -> AI, and copying startups in your country

Fri, 08 Sep 2023 00:00:00 GMT

AI

OpenAI will host its first developer conference on 6 November. And startups in incubator Y Combinator’s program have presented their ideas:

5 neat AI startups from Y Combinator’s Summer 2023 batch | TechCrunch

It’s Y Combinator Demo Day for companies in the incubator’s Summer 2023 cohort. Here’s a few of the more intriguing AI firms of the bunch.

TechCrunch

The AI image generation tool Midjourney has always struggled when it comes to typography. Some former Google Brain researches aim to fix this with their new tool, Ideogram:

Meet the new AI Coffee Shop boss.

It can track how productive baristas are and how much time customers spend in the shop.

We’re headed into wild times. pic.twitter.com/tygyCrWQ2T
— Rowan Cheung (@rowancheung) August 31, 2023

Call of Duty, a popular first-person shooter game, has partnered with AI company Modulate to start analysing in-game voice chats for content moderation:

Modulate’s press release doesn’t include too many details about how exactly ToxMod works. Its website notes that the tool “triages voice chat to flag bad behavior, analyzes the nuances of each conversation to determine toxicity, and enables moderators to quickly respond to each incident by supplying relevant and accurate context.” The company’s CEO said in a recent interview that the tool aims to go beyond mere transcription; it takes factors like a player’s emotions and volume into context as well in order to differentiate harmful statements from playful ones.

Globalstar, a satellite network operator has purchased $64 million worth of launches from SpaceX. Apple backs Globalstar and uses them to provide its Emergency SOS feature.

Finance

A YouTuber lost $60K in crypto after accidentally revealing his seed phrases (essentially your crypto password) during a livestream.

The neobank Up has launched a new debit card that is made from 82% recycled materials in a partnership with Seabin.

This gem on startups pivoting from crypto to AI:

The move from crypto to artificial intelligence fueled the markets this year, but some are questioning how much of it is real. A company that wasn’t doing well renamed itself to “Applied Blockchain”, but a little too late. Luckily for them, ChatGPT came out a few months later. To boost their stock price, they renamed themselves “Applied Digital” and mentioned AI a few times in their earnings call, getting a hyped 450% increase in the public markets. While dollars are flowing in quickly to all things AI, it is yet to be seen whether these companies can even last.

Money Is Pouring Into AI. Skeptics Say It’s a ‘Grift Shift.’

The move from crypto to artificial intelligence has fueled the markets this year, but some are questioning how much of it is real.

Institutional Investor

UBS also seems to be doing OK for themselves:

‘Deal of the century’: how UBS’s rescue of Credit Suisse proved a boon Record $29bn quarterly profit linked to the takeover triggers fierce political debate in SwitzerlandNeoSeed.io is an interesting website for listing startup ideas that have succeeded in other countries to replicate in your own country.

Meanwhile the state of tipping in the US:

Dev

its 2023 and you can now train your editor to read the docs and write code for you pic.twitter.com/GqLsTcVRcX
— Chris Sev (@chris__sev) September 6, 2023

An open source visual editor for React 🤯https://t.co/CGFOAVK7dw

The @reactjs ecosystem is… unstoppable. pic.twitter.com/jDgj0NwE45
— Guillermo Rauch (@rauchg) September 5, 2023

I’ll be taking a break from the newsletter and podcast for the next three weeks while I’m on holidays. Have a great weekend and I’ll see you when I get back!

OpenAI announcements, dev creates entire web game using ChatGPT, and creating UI components with AI

Tue, 07 Nov 2023 00:00:00 GMT

OpenAI introduces GPT Store

At OpenAI’s first developer conference, Sam Altman announced a way to create custom AI bots and share them on the OpenAI platform.

They also announced a whole range of new features, and what better way to summarise it than by using their own tool? 😎

As you can see, ChatGPT no longer is limited to information from 2021 and the above UI told me how it browsed the web with Bing then read an article on Decrypt in order to generate its response. This is no longer a separate feature like it was a few months ago—it’s now integrated into the main product seamlessly.

You can compare what it generated with the coverage from TechCrunch and The Verge.

Watch the whole keynote here:

Javi Lopez has been posting some pretty impressive stuff on X. First, he used ChatGPT to create a web game, “Angry Pumpkins”, that’s inspired by Halloween and the popular iOS game Angry Birds.

Midjourney, DALL•E 3 and GPT-4 have opened a world of endless possibilities.

I just coded “Angry Pumpkins 🎃” (any resemblance is purely coincidental 😂) using GPT-4 for all the coding and Midjourney / DALLE for the graphics.

Here are the prompts and the process I followed: pic.twitter.com/st3OEhVVtK
— Javi Lopez ⛩️ (@javilopen) October 31, 2023

Go give it a try! I think it’s pretty impressive. Vercel CEO Guillermo Ranch also did an interview with Javier:

I was so blown away by @javilopen’s Angry Birds replication with AI that I had to verify it myself 😁

What I learned:
◆ The game was 100% written by AI. Every LOC
◆ It only took 10-12 hours of total work
◆ I saw the entire ChatGPT conversation. Over 400 messages exchanged.… pic.twitter.com/8sXVAeevh2
— Guillermo Rauch (@rauchg) November 1, 2023

But that’s not the only cool stuff that Javier has been posting:

⚡ HUGE LEGO BUILDING

100% AI generated.

Generative AI has a tough time generating large images with lots of fine details. But I think we’re making headway. pic.twitter.com/F7UUMxAFFU
— Javi Lopez ⛩️ (@javilopen) November 6, 2023

When you zoom in, it’s obviously not perfect, but still quite neat!

Some other interesting AI stuff I’ve come across:

AI’s proxy war heats up as Google reportedly backs Anthropic with $2B | TechCrunch

With a massive $2 billion reported investment from Google, Anthropic joins OpenAI in reaping the benefits of leadership in the artificial intelligence

TechCrunch

Ash is a pocket AI nature guide for kids inspired by Ash’s Pokédex. It helps children connect with and learn about the biodiversity around them.

I absolutely adore the simplicity of Ash.

🔗 https://t.co/nsIHceu4Lc pic.twitter.com/44pB2wiBuC
— Valera Pieŭnioŭ 💙💛 (@mamkindesigner) October 25, 2023

Behind the scenes at Scary Fast: Apple’s keynote event shot on iPhone

Apple goes behind the scenes of Scary Fast, a special event unveiling the all-new MacBook Pro family and iMac.

Apple Newsroom

Otto Plesner on LinkedIn: #artist #artists #art #artandtechnology #technology #light #fashion… | 19 comments

This captivating collection, masterminded by the innovative designer Kunihiko Morinaga for Anrealage, showcases the mesmerizing artistry of heat-reactive… | 19 comments on LinkedIn

10 creative ads I’ve collected this week:

1. Luxor Highlighters pic.twitter.com/LfzEWL0QCf
— The Ad Professor (@The_AdProfessor) October 27, 2023

This is hilarious and also why startups should never hire MBA consultants who have never built a company before. pic.twitter.com/MkBhUbfyw6
— Andrew Gazdecki (@agazdecki) October 27, 2023

Dev

The Market for Lemons - Infrequently Noted

New web services are being built to a self-defeatingly low UX and performance standard, and existing experiences are now pervasively re-developed on unspeakably slow, JS-taxed stacks. At a business level, this is a disaster, raising the question: why are new teams buying into stacks that have failed…

Alex Russell

clamp() - CSS: Cascading Style Sheets | MDN

The clamp() CSS function clamps a middle value within a range of values between a defined minimum bound and a maximum bound. The function takes three parameters: a minimum value, a preferred value, and a maximum allowed value.

MDN Web Docs

Geist Font

Geist is a typeface made for developers and designers, embodying Vercel’s design principles of simplicity, minimalism, and speed, drawing inspiration from the renowned Swiss design movement.

Vercel

The beauty of finished software

Let me introduce you to WordStar 4.0, a popular word processor from the early 80s. WordStar 4.0 As old as it seems, George R.R. Martin used it to write “A Song of Ice and Fire”. Why would someone use such an old piece of software to write over 5,000 pages? I love how he puts it: It does everything I…

Jose M.

So you’ve been publicly accessibility-shamed

The personal blog of Dave Rupert, web developer and podcaster from Austin, TX.

Dave Rupert

AI tool that uses your design system to create new components (along with all of the code) 👇 pic.twitter.com/6GWN58rDUy
— Ridd 🤿 (@ridd_design) October 31, 2023

Interaction to Next Paint (INP) | Articles | web.dev

This post introduces the Interaction to Next Paint (INP) metric and explains how it works, how to measure it, and offers suggestions on how to improve it.

web.dev

Something is cooking!

Earlier this month at my Awwwards talk the audience was amazed when I added Wiggle Bones to my demo

Here’s a prototype featuring the technique in different objects. Will be sharing a live link very soon ;)

Done with @threejs and @blender as usual pic.twitter.com/gekKbhZ0We
— Xavier (Jack) (@KMkota0) October 31, 2023

TIL you can turn any website into an editable canvas with just a simple command in the console:

document.designMode = ‘on’pic.twitter.com/LHyYD7Txcs
— Steven Tey (@steventey) November 4, 2023

Photorealistic AI avatars, poisoning generative AI, Apple Event 31 Oct, and CSS :has/:where/:is selectors

Thu, 26 Oct 2023 00:00:00 GMT

You can now create AI avatars for training videos with D-ID. But these are not your average 3D avatars from Meta or Apple. They look photorealistic. Welcome to a new (uncanny?) world of mandatory training videos!

AI researchers have come up with a novel approach for content creators to battle unwanted image scraping to train AI models: authors can add invisible changes to the pixels in their images that then ‘poison’ the AI model so that dogs become cats, cars become cows, etc.:

From the paper:

Data poisoning attacks manipulate training data to introduce unexpected behaviors into machine learning models at training time. For text-to-image generative models with massive training datasets, current understanding of poisoning attacks suggests that a successful attack would require injecting millions of poison samples into their training pipeline. In this paper, we show that poisoning attacks can be successful on generative models. We observe that training data per concept can be quite limited in these models, making them vulnerable to prompt-specific poisoning attacks, which target a model’s ability to respond to individual prompts.

We introduce Nightshade, an optimized prompt-specific poisoning attack where poison samples look visually identical to benign images with matching text prompts. Nightshade poison samples are also optimized for potency and can corrupt an Stable Diffusion SDXL prompt in <100 poison samples. Nightshade poison effects “bleed through” to related concepts, and multiple attacks can composed together in a single prompt. Surprisingly, we show that a moderate number of Nightshade attacks can destabilize general features in a text-to-image generative model, effectively disabling its ability to generate meaningful images. Finally, we propose the use of Nightshade` and similar tools as a last defense for content creators against web scrapers that ignore opt-out/do-not-crawl directives, and discuss possible implications for model trainers and content creators.

Apple is set to announce some new Mac products on Tue 31 Oct! It’s the first time they’ve held an event in the evening, which means we will be able to watch it in Australia at 11am!

Apple Events

Watch the latest Apple event stream, and check out the archive of special event announcements for our products and services.

Apple (Australia)

0:00

/0:13

1×

Monday.com have announced that they built their own database instead of choosing one off the shelf.
Meta has a serverless platform called XFaaS that they claim is more efficient than existing serverless options like AWS Lambda.
You can take a sneak peak at the docs for Meta’s CSS-in-JS framework, StyleX, which is being used on the new Facebook website. It hasn’t been released yet.
Laser beams have been deflected off nothing but air for the first time, while maintaining the beam’s strength and integrity.

There’s a great write-up on the WebKit blog of some of the things that the new CSS selector :has unlocks. My favourite is this example of being able to change the layout for card components that have images:

The :where and :is CSS selectors were introduced in 2021, but I just discovered them! They’re supported in all major browsers and provide some interesting ways of combining selectors for readability, but also for controlling specificity:

The specificity of the :where selector is always zero, so you can use it to wrap selectors like :not, which increase specificity, if you wish to use them without impacting the selector’s specificity.

Learn more here: https://web.dev/articles/css-is-and-where https://css-tricks.com/almanac/selectors/w/where/ https://developer.mozilla.org/en-US/docs/Web/CSS/:where

And Safari’s Web Inspector now visualises border radius (8px here) in the box model diagram!

Publishing the newsletter and podcast every week has been a bit hectic, so starting with this one, I’ll just post as I get the time.

What's new in AI in October?

Mon, 28 Oct 2024 00:00:00 GMT

It’s been a while since I did a tech roundup! A lot has been announced in the way of AI—let’s dive in.

Anthropic has released updates, including a “computer use” mode that will control your computer with AI, allowing you to automate cumbersome tasks such as filling data into a webpage that’s already stored in a document somewhere:

I enjoyed this anecdote from the Ars Technica article:

Anthropic has also said it is known to be “cumbersome and error-prone” at times. A blog post about developing the tool gave one example of a way it has gone wrong in testing: It abandoned a coding task before completing it and began instead “to peruse photos of Yellowstone National Park”—perhaps one of the most human-like things an AI bot has done. (I kid.)

Someone got it to order lunch for them:

Successfully got Claude to order me lunch all by himself!

Notes after 8 hours of using the new model:

• Anthropic really does not want you to do this - anything involving logging into accounts and especially making purchases is RLHF’d away more intensely than usual. In fact my… pic.twitter.com/ueo8kvZUPF
— near (@nearcyan) October 22, 2024

XAI released an API and people are already building things with it, such as this AI-enhanced scraper:

Introducing Grok-2 web crawler 🕸️

It crawls any website with @xai’s new Grok-2 model and @firecrawl_dev

Just give it a URL and a goal then it will navigate + return the requested data in a structured format

Take a look: pic.twitter.com/irY4bnt3qs
— Nicolas Camara (@nickscamara_) October 21, 2024

Runway are doing some really interesting stuff to automate motion-capture for filmmaking. Gone are the days of having to place dots on Andy Serkis in order to track him for Gollum in Lord of the Rings. This tech allows you to record videos of people and then map their facial expressions to 3D models:

Runway Research | Introducing Act-One

At Runway, our mission is to build expressive and controllable tools for artists that can open new avenues for creative expression. Today, we’re excited to release Act-One, a new state-of-the-art tool for generating expressive character performances inside Gen-3 Alpha.

Introducing Act-One

Midjourney has released an editor feature that allows you to upload a photo and then make edits using AI:

Perplexity has released features to search historical financial data and internal company data:

Perplexity AI’s new tool for researching the stock market | Hacker News

Hacker News

While OpenAI has yet to release Sora, they have collaborated with Toys ‘R’ Us for a commercial:

Just like a weird dream it is a different person each time you see them pic.twitter.com/5Vc85ElqO1
— syndrowm (@syndrowm) June 25, 2024

Despite the criticism, I think it’s still impressive overall. However, an Indian company Hotshot have released a similar AI text-to-video generator, and the results are equally impressive to the Sora demos. Here’s a compilation I put together of all of their demo videos, plus a few extra I generated myself:

Hilariously, one of the OpenAI demo videos got copyrighted by a South Korean news channel on YouTube!

OpenAI lost “ownership” over one of their Sora videos because a news channel in S.Korea used it in their news first and copyrighted it so when somebody tries uploading it on Youtube they will get claimed. (News shouldn’t be able to claim them either) by u/WonderfulWanderer777 in ArtistHate

Another competitor:

Closed AI won the left brain of AGI. We’re here to make sure there’s an open alternative for the right brain.

Mochi 1 sets a new SOTA for open-source video generation models. It is the strongest OSS model in the ecosystem. This will be a force for good, both for AI research and… https://t.co/1QORiG2Swr
— Paras Jain (@_parasj) October 22, 2024

OpenAI now allows you to send text or audio to the API, and it will then give you responses back in either text, audio, or both:

🔊 The Chat Completions API supports audio now. Pass text or audio inputs, then receive responses in text, audio, or both. https://t.co/468QclBSBU pic.twitter.com/uUFrJa9kZH
— OpenAI Developers (@OpenAIDevs) October 17, 2024

What about code editing? I had an interesting listen to the team behind Cursor AI, a Visual Studio Code fork that allows you to edit chunks of code using models such as Claude Sonnet (this one is long, a podcast for several sessions):

I’ve been trying out Cursor and will document my experience in a separate post. I’m pretty impressed. It allows me to select pieces of code and say “fix this” if I’m getting a runtime error (and yes, it fixes it!), and I can add sorting to lists by selecting a chunk of code, and say “sort this by most recent name”—I can stay in a high-level thinking state rather than having to dive into nitty gritty of writing the correct arrow function.

v0.dev is seriously impressive re code generation. I did a short video converting a hand-drawn mockup to working code using a common React component library, shadcn:

Another code generation tool is the talk of the town: bolt.new:

I’m not kidding around: go to bolt․new and type in:

“make a spotify clone”

I’m speechless. pic.twitter.com/ntR6eggRtk
— Tomek Sułkowski (@sulco) October 23, 2024

Moving onto general AI tools, I came across this tool that converts PDFs into flashcards for memorisation:

we’re launching our rebrand of memo from pdf2anki on ProductHunt! https://t.co/OhK5qfZqwq

my name is Jason - the co-founder of Memo (previously PDF2Anki) and a 21-year-old in medical student and builder from Hong Kong 🇭🇰

Memo is the smarter way to learn with flashcards. We… pic.twitter.com/uymyNheosk
— Jason (@thetechjason) October 20, 2024

People are using AI tools to come up with a comic idea and then feed it to another AI to generate the image:

Flux 1.1 does pretty decent political cartoons, so I wired up a glif workflow that let’s Gemini Pro 1.5 write the cartoon and then passes it on the Flux the cartoonist to render

”EU regulations” pic.twitter.com/ynT17RHRox
— fabian (@fabianstelzer) October 16, 2024

I’ll leave you with this video from The Wall Street Journal showing how NVIDIA used their own chips and super accurate lighting in architectural renderings to design their Silicon Valley HQ:

Tech roundup - Fri 21 April 2023

Fri, 21 Apr 2023 00:00:00 GMT

Hello from Sydney, I just got back from Tokyo! Another week, so much happening in tech, I love it!

News

Apple opened their first two Apple Stores in India this week, in Mumbai and then New Delhi. Tim Cook flew in for both openings, greeting and taking photos with fans, including one who brought a 1987 Macintosh SD with him (that’s dedication)! I didn’t realise until this week, but iPhone marketshare in India is less than 6% currently. In 2022, it was 51.4% in the US and 46.1% in Australia. Now that Apple will be manufacturing more components in India, they’ll save 20% customs duty so will be able to lower prices and attract more customers. This also ties in with Apple’s push to diversify some of its supply chain away from China (it is also exploring moving some manufacturing to Vietnam, Malaysia, and Thailand). India is a massive market, in fact the UN estimated this week that India’s population will overtake China’s soon by around 2.9M people with a total of 1.4286B people, so it makes sense why Apple is so interested in this market.

Tim Cook presented with first Apple computer at Indian store opening

The Apple CEO looked stunned when he was presented with a Macintosh SE computer at the opening of the 20,000sq ft flagship store in India’s financial capital, Mumbai today.

Daily Mail

The simple reason tech thinks India is its next big market

Apple’s increasingly going all in on India.

Yahoo

Apple also launched a 4.15% APY savings account this week integrated with their Apple Card offering, and released Tap to Pay in Taiwan (the second region to get it after the US), which allows people to accept payments directly on an iPhone without the need for a third-party device like a Square reader.

Apple Card’s new high-yield Savings account is now available, offering a 4.15 percent APY

With no fees, no minimum deposits, and no minimum balance requirements, users can easily set up and manage their Savings account directly from Wallet.

Apple Newsroom

WWDC23, Apple’s annual developer conference, is set for 5–9 June, and they’re purportedly focusing on getting apps ready for the AR/VR headset that is likely to be announced, including sports, gaming, and fitness apps.

Something fun, I found out that Steve Jobs still responded to customer support enquiries occasionally: here’s an email he responded to when Apple was a ~$60B market cap company.

Twitter finally removed free blue checks on 20 April, so now you’ll have to pay for one, but apparently Elon Musk is personally paying for William Shatner, LeBron James, and Stephen King, who have all been opposed to the change.

Speaking of Elon, he incorporated a company named X.AI on 9 March, and has allegedly bought thousands of high-powered GPU processors from Nvidia. Will be interesting to keep an eye on! Google has also merged their AI teams DeepMind and Brain into one team called Google DeepMind. And in a blow to ChatGPT detector projects, one such “detector” found that 92.15% of the US Constitution was “written by AI”. Hmm, might want to work on that, or better still, not—if these projects don’t work well with GPT-4, how are they going to go with more advanced AI models?

Dev

Last week, I mentioned I wanted to play around with querying The Graph more, which indexes crypto data and serves it as a GraphQL API. On their website, you can browse “subgraphs” for various crypto projects: after selecting a subgraph, you can run an example GraphQL query in the Playground tab and see what the API returns. As an example, here’s a query that returns the first 5 ENS domains (custom domain names on the Ethereum network) and recent ENS domain transfers in JSON. There are subgraphs for all sorts of popular crypto projects like Uniswap, Audius, and Livepeer, so go check them out!

Well that’s it for now, see you next time!

Tech roundup - Fri 14 April 2023

Sat, 15 Apr 2023 00:00:00 GMT

Hello from Singapore! It seems like a lot has happened in tech this week, so I’ll be doing a recap followed by what I’m reading (spoiler: it’s a book about Amazon) and what I’ve been learning about Front End crypto development on Ethereum.

News

Speaking about Ethereum, it’s past USD$2100 now, it finally passed the $2K mark since crashing in 2022. It’s probably related to the successful Shanghai upgrade that happened yesterday. With this upgrade, people will be able to unstake Ethereum tokens, which will hopefully incentivise more people to stake ETH.

Diving into some numbers, as of writing, there is 1.1m ETH pending withdrawal, which is $2.32b USD, compared to 17.39m ETH ($36.87b USD) currently staked. They have designed the upgrade to avoid a bankrun, so it will take some time before everyone gets their ETH—over the next 11hrs, around 44.2k ETH ($93.6m USD) will be unlocked. And for reference, only around 15.4% of the total supply of Ethereum is staked currently. You can see all of these analytics in real-time with this dashboard by TokenUnlocks, pretty cool!

A bit of Australian startup news: MilkRun, the Sydney-based delivery service to get groceries in 20min or less, has shut down as of today. They started in 2021 with $75M funding, one of the biggest raises in Aussie VC history, but were losing money to sign up new customers and faced increased competition from Coles, Woolies, and Uber. It makes sense because I’ve recently been ordering groceries in Sydney on UberEats and getting them in around 20-30min. Harris Farm has also done a partnership with Uber to deliver your order in around an hour, so these offerings are super smooth and don’t require you to sign up for another app. Kudos to MilkRun though for getting the competition to up its game!

Lots of Twitter news this week. They’re launching subscriptions in the US! They’re also working on rolling it out internationally. My understanding is that you can now put some tweets behind a paywall and charge for access. They’ve also partnered with eToro to allow users to view, buy, and sell stocks on Twitter. And a BBC reporter got absolutely wrecked in an interview with Elon Musk, check out the video and remember to always be able to back up vague assertions with data, especially when you’re speaking with someone like Elon haha!

Amazon released AWS Bedrock, which is a generative AI toolkit that allows developers to use pre-trained models including Stable Diffusion, Claude, and Jurassic-2. More details in this TechCrunch article.

What I’ve been reading

I’ve been reading “The Everything Store”, a book about Jeff Bezos and the story of Amazon. It’s a great read—highly recommend—and something that I keep coming back to in the book is how leaders like Bezos, Musk, Jobs, etc. are able to sniff out BS and also understand areas that they are not subject matter experts in extremely well. In one example, Bezos told a team with far more experience than himself that they were doing it wrong and showed them why; they later said that while it was irritating, they couldn’t fault anything he said and that he was right. I guess this is why these guys get to where they are and why there are few companies like Amazon, Tesla, and Apple.

If you’re into crypto and finance, check out the Money Stuff email newsletter by Matt Levine (he writes for Bloomberg), it’s great reading!

What I’ve been learning

I’ve been wanting to learn more about Ethereum development for ages, so I finally got started.

I set myself the challenge of creating a simple React app that allows you to connect a wallet and display some basic info about that wallet. And I got it working! I found create-eth-app, a CLI tool that essentially adds a bunch of dApp tooling on top of a standard Create React App base.

create-eth-app uses a library called useDApp which has a React hook-based interface for getting account details like user balance. Really nice dev experience!

create-eth-app also provides some basic integration with The Graph, which I’m going to explore next. I’m so used to thinking about The Graph in terms of the GRT token and the incentive system for nodes to index content, but obviously, it’s a prime suspect to work with on the Front End since you can query all this data with GraphQL! (Yeah, it does have it in the name! 😂)

Along the way, I discovered Truffle, a collection of tools for smart contract development. This includes Ganache, which runs an Ethereum blockchain locally for dev and testing. You can start it with a Terminal command or via their Mac app, similar to using Docker locally. I did the Truffle quickstart and successfully deployed an example smart contract, MetaCoin. I could query balances and transfer the coin between different example ETH addresses. Also, I love the names: Truffle, Ganache, they even have a Front End framework that hooks into Redux called Drizzle (OK, that’s stretching it a bit, but the framework seems interesting)!

A lot of this stuff is changing rapidly and some of the tutorials assume existing knowledge, so it wasn’t smooth sailing, but nothing you can’t debug your way out of. I was encountering issues with the Truffle quickstart project only to realise I hadn’t updated to the latest version since I last installed it a few months ago, and my issue was fixed once I upgraded. So make sure you’re using the latest versions of dependencies.

There’s a good list of different frameworks and tutorials on the Ethereum website.

Upcoming articles

I’ve got a few articles in the works: I’m going to write about the Web Share API, where you can trigger a native share dialog with JavaScript, and also cover how to set up those nice link preview cards that get displayed below URLs when you send them in messaging apps like iMessage or Twitter. I’ve noticed some quirks in iMessage where it actually strips parts of the title that you’ve provided in the og:title meta tag, so stay tuned for more info on this.

Well that’s a wrap! I hope you’ve enjoyed this post, subscribe to my newsletter for more content like this and have a good weekend! 🙂

Sources: https://www.theblock.co/post/226356/ethereum-pending-withdrawals-2-billion https://token.unlocks.app/ethereum-shanghai https://www.afr.com/technology/milkrun-to-close-doors-all-staff-made-redundant-20230411-p5czj3

The Productive Programmer

Mon, 09 Mar 2026 00:00:00 GMT

In my early years of programming, I’d get into flow states and have a great time, and other times, it was an uphill battle. I didn’t know how to control this. And as we all know, success is not about bursts of energy, it’s about consistent effort. Over the years, I’ve created a framework that allows me to be my best, productive self.

It starts with three high-level categories:

Physical & mental state
Environment
Working effectively

These all need to work together:

If you’re in peak physical + mental state ✅, but have family members making a racket and interrupting you every 15min ❌, you’re not going to be very productive.
If you’ve got the best home office setup with no distractions ✅ but you’re exhausted ❌ and approaching the work inefficiently ❌, you’re not going to be very productive.
If you’re in peak physical + mental state ✅, in the best home office with no distractions ✅, but are watching TikTok videos in between every line of code ❌, you’re not going to be very productive.

1. Physical & mental state

Sleep. Good sleep is the foundation. For me, the right amount of sleep is however long I’d sleep without setting an alarm. Finish eating a few hours before bed, have a relaxing evening routine, a good bed, and a cool + quiet + dark bedroom. @hubermanlab and @bryan_johnson have lots of tips on how to improve sleep. If you’re tired during the day, take a nap and work a little later: a 10-30min afternoon nap is way more effective than a coffee.

Exercise. The body was meant to move. If you want to spend hours in front of a computer screen (sitting or standing), you have to earn credits. Get 15-30 minutes of walking in between your deep work blocks, and do standard strength training + cardio a couple of times a week. Don’t overexercise either.

Stretch. Not just before workouts, during the day. Yoga poses, hamstring stretches, thoracic stretches, etc. This is one of the best ways to get rid of chronic back pain.

Get a massage. Helps overall mood, relaxation, and energy. You’d be surprised how much tension you’re holding that’s negatively impacting sleep, digestion, and focus.

Eat. Hunger is a huge distraction, and the fastest way to kill your energy. Eat healthy meals every few hours, have healthy snacks in between focus blocks, and listen to your body. I start most days with a fresh juice, some fruit, and then 2 eggs + sourdough + avocado about 15min later. Whatever you eat, you should feel satisfied afterwards and it should sustain you without eating again for a few hours. I’m more focused after a hearty breakfast like eggs + toast than a light breakfast like muesli + yoghurt. Don’t under or overeat.

Drink. Make sure you’re properly hydrated. I keep a full glass on my desk and drink as I need to. Sparkling and a slice of lime/lemon/cucumber is nice too.

Deal with loose threads. Whatever is going on in your your life affects your mental state at work. That class you want to book, that call you need to make—get it done on the weekend or before work so it’s not nagging you when you need to focus.

Schedule downtime. Your brain and body need breaks from programming and screens. Instead of doomscrolling during your commute, try staring out the window and let your mind wander. On a weekend, go play sport with friends, go for a long walk, go to a café and read—do whatever fills your cup. This is critical so you are recharged when you go back to work.

See a chiro/physio/health practitioner if you need. If you get pain that distracts you, this is worth looking into. ABC chiropractic adjustment has helped my back issues.

Take care of your eyes. Look into the distance periodically. Blink enough. Make sure your monitor is the right distance away. Ensure good lighting / screen brightness, and make sure all font sizes are large enough that the text is easy to read. Avoid irritants in the air like smoke. Important: If your eyes are tired/sore/a bit blurry, take a break! A warm/cold wet face towel can refresh them too.

2. Environment

Desk, chair, monitor. Get good ones. I used to think I couldn’t be productive working from home. Turns out, the issue was using a laptop on cheap couches. (Fastest way to get back pain!) Get a standing desk so you can vary it up. Make sure the height of the chair, desk, and monitor are comfortable.

Quiet. I love this post from @paulg:

The rich love quiet because they’re trying to work. https://t.co/7HfJq1Rzkx
— Paul Graham (@paulg) June 15, 2024

It’s so much easier to think clearly in a quiet environment. No wonder devs love working late at night. Music can be good sometimes, but I find total silence is best for high-focus tasks. If you have a noisy environment at home and at work, try working at a quiet library without headphones and see how much easier it is to focus.

Comfortable temperature.

Lee Kuan Yew, founder of modern Singapore, once said:

Air conditioning was a most important invention for us, perhaps one of the signal inventions of history. It changed the nature of civilization by making development possible in the tropics. Without air conditioning you can work only in the cool early-morning hours or at dusk. The first thing I did upon becoming prime minister was to install air conditioners in buildings where the civil service worked. This was key to public efficiency.

Even in more favourable climates, being too hot or cold is a major distraction, so make sure you’re comfortable.

Fresh air. This directly impacts brain function and general health. Make sure you’re not in a stuffy room and have some airflow.

Nature. Having somewhere pleasant to look out at and where you can go for a walk/run makes a real difference.

Good lighting. Poor lighting makes you want to escape. You should want to be where you’re working.

Interruptions. Whether in person or online, disruptions are toxic for your productivity. I often turn on Do Not Disturb and simply ignore Slack/Teams/email while I’m in a focus block. Going to the bathroom is also an interruption, so make sure you go before you begin a focus block. 🙂

Time. Fairly basic, but you need enough uninterrupted time in front of the screen. You can’t complete a 2h deep work task if you have a meeting in 30min.

3. Working effectively

Schedule tasks based on energy and duration.

2h feature task or complex bug: best when no meetings and lots of energy, like after a meal or workout.
15min copy change or simple bug: do this in between meetings or at the end of a long day.

Second time should always be faster. Build out mock data for all the common scenarios in your app. Save Jira/Figma links to your bookmarks bar. Fix ambiguous error messages. It’s not just about saving time, you also want to reduce your future cognitive load. The more you streamline, the more you’ll find yourself smiling saying “I’m glad past me did that”.

Pull the thread, if you have time. I discovered a bug in Preact by digging deeper when I saw a DOM attribute was camelCase that I thought should be snake-case. Investigating unusual behaviour strengthens your codebase/personal knowledge and saves time later. Sometimes you have a deadline to hit though, so in these situations, make a note of it and then work around the issue.

Write a plan of attack. Think like an AI agent. Before you begin a task, write down what exactly you need to do, how you’re planning on doing it, and how long you think it will take.

Do personal retrospectives. Did you complete a task in the time you estimated? What assumptions turned out inaccurate? How can you prevent these mistakes / improve in future?

Have multiple things on the go. While you need to focus on one task at at time, sometimes you’ll need to wait on a build, a person, or some other dependency, so it helps to have something useful that you can quickly jump across to. Switching tasks can also give you variety if you’re in a rut.

Conclusion

You won’t get all of these right every day—nobody does. But awareness is the first step. Once you know what’s working against you, you can start fixing it. Over time, the good days stop being lucky accidents, you can bounce back faster from bad days, and you can focus on doing your best work without anything holding you back.

Have I missed anything? Let me know on X or send me an email at steve@steveharrison.dev.

Translucent sidebars in Electron apps

Thu, 28 May 2026 00:00:00 GMT

macOS Tahoe introduced slight translucency for app sidebars, and you can also add this effect to an Electron BrowserWindow using the vibrancy property:

new BrowserWindow({
  width: 1100,
  height: 720,
  titleBarStyle: "hiddenInset",
  vibrancy: "sidebar",
});

Here’s a comparison: on the left is The Finances App sidebar with no transparency, and on the right, with vibrancy: "sidebar":

vibrancy accepts the following values:

titlebar
selection
menu
popover
sidebar
header
sheet
window
hud
fullscreen-ui
tooltip
content
under-window
under-page

My helpful mate Claude whipped up a demo to compare all these different values. Popovers are more translucent than sidebars, for example:

You can read more in the official Apple developer docs on NSVisualEffectView.

Enjoy!

Markdown Style Guide

Wed, 19 Jun 2024 00:00:00 GMT

Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro.

Headings

The following HTML <h1>—<h6> elements represent six levels of section headings. <h1> is the highest section level while <h6> is the lowest.

H1

H2

H3

H4

H5

H6

Paragraph

Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.

Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.

Images

Syntax

![Alt text](./full/or/relative/path/of/image)

Output

Blockquotes

The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element, and optionally with in-line changes such as annotations and abbreviations.

Blockquote without attribution

Syntax

> Tiam, ad mint andaepu dandae nostion secatur sequo quae.
> **Note** that you can use _Markdown syntax_ within a blockquote.

Output

Tiam, ad mint andaepu dandae nostion secatur sequo quae.
Note that you can use Markdown syntax within a blockquote.

Blockquote with attribution

Syntax

> Don't communicate by sharing memory, share memory by communicating.<br>
> — <cite>Rob Pike[^1]</cite>

Output

Don’t communicate by sharing memory, share memory by communicating.
— Rob Pike¹

Tables

Syntax

| Italics   | Bold     | Code   |
| --------- | -------- | ------ |
| _italics_ | **bold** | `code` |

Output

Italics	Bold	Code
italics	bold	`code`

Code Blocks

Syntax

we can use 3 backticks ``` in new line and write snippet and close with 3 backticks on new line and to highlight language specific syntax, write one word of language name after first 3 backticks, for eg. html, javascript, css, markdown, typescript, txt, bash

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Example HTML5 Document</title>
  </head>
  <body>
    <p>Test</p>
  </body>
</html>
```

Output

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Example HTML5 Document</title>
  </head>
  <body>
    <p>Test</p>
  </body>
</html>

List Types

Ordered List

Syntax

1. First item
2. Second item
3. Third item

Output

First item
Second item
Third item

Unordered List

Syntax

- List item
- Another item
- And another item

Output

List item
Another item
And another item

Nested list

Syntax

- Fruit
  - Apple
  - Orange
  - Banana
- Dairy
  - Milk
  - Cheese

Output

Fruit
- Apple
- Orange
- Banana
Dairy
- Milk
- Cheese

Other Elements — abbr, sub, sup, kbd, mark

Syntax

<abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.

H<sub>2</sub>O

X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>

Press <kbd>CTRL</kbd> + <kbd>ALT</kbd> + <kbd>Delete</kbd> to end the session.

Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.

Output

GIF is a bitmap image format.

H₂O

Xⁿ + Yⁿ = Zⁿ

Press CTRL + ALT + Delete to end the session.

Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures.

The above quote is excerpted from Rob Pike’s talk during Gopherfest, November 18, 2015. ↩