Forem: Jen Looper

Surviving as a Human in the Age of AI

Jen Looper — Tue, 31 Mar 2026 02:43:37 +0000

This is a submission for the 2026 WeCoded Challenge: Echoes of Experience

There's a palpable feeling of anxiety in developer communities right now as concrete programming skills that we have painstakingly built either through study or experience appear to now be ... kaput. Outdated. Irrelevant. Passé.

Andrej Karpathy described the feeling of watching his manual coding ability "slowly degenerating," as a personal sense of loss as AI tools take over coding work: "I've already noticed that I am slowly starting to atrophy my ability to write code manually".source

Ex-Google CEO Eric Schmitt expresses shock at watching AI zip through programming tasks that he used to have to hand-code: "I've been doing programming for 55 years. To see something something start and end in front of your own life is really profound." source

Developers of all stripes are coming to the realization that being "just a coder" is no longer enough; new skills of systems thinking and architecture, plus that vague concept of 'taste' are starting to factor heavily in success in this industry. Students, as usual, are quickest to come to this realization, and Computer Science programs are rapidly either evolving or depopulating. Students are also feeling the brunt of this rapid change as narratives they were told as freshmen no longer hold true by the time they reach their senior year.

It's a tough time to [just] code.

Laughs in Humanities PhD.

Plus ça change, plus c'est la même chose [The more things change, the more they remain the same]

A tale of two pathways

Let me tell you a little story. It's the tale of someone who followed her heart her entire career.

When I was 16, I went to France, and was swept away while visiting Chartres cathedral. True story. Growing up in a pretty privileged environment, with parents encouraging me to follow my dream, I studied for 6 years post-bachelors degree before achieving my PhD in French literature from Cal Berkeley in 1998.

Even during my tenure in graduate school in the 90s, it was clear that Silicon Valley was the hub of some really exciting stuff and that a seismic shift was occurring in the dot-com-boom. But we in our ivory tower looked slightly askance at the fellow in Scandinavian Studies who ditched his PhD program to join a hot startup way back then. We were that confident that our skills would be valued. Anyway Scandinavian Studies is far less relevant than French Studies, everybody knows that.

We of course didn't realize that humanities PhD programs in the languages are primarily designed to ensure a stream of cost-effective [read: crazy cheap] TAs (GSIs - graduate student instructors, as we called ourselves after unionizing). We were on the front lines of language learning, teaching a section of French 1 or 2 every day, coupled with mandatory pedagogy training, so that Cal undergrads could get through their language requirement. With the hope that we'd be able to graduate and land a tenure-track position, we put up with a lot, relying on this scanty income to keep food on the table and rent checks covered for a room in a West Berkeley two-storey.

Here is some lore: that house on Roosevelt Ave had a can of peaches that had to have been a decade old, a gift from every successive wave of grad students who rented the house. I wonder if it's still there.

Most of us were unwilling to understand that the academic job market was weak and getting weaker by the year, although there were signs.

We really didn't want to hear the gospel

One wake-up call to me was watching a colleague and her husband, after graduating, accept one teaching job between them. Another was watching another colleague getting thinner and thinner as he was quite literally going hungry to cover his family's expenses while part-time teaching.

Unsurprisingly, given our blinders, the bottom falling out from what was left of the job market, and the other considerable headwinds (I see you, Adjuncting!), the academic job market kicked my rear. Within a few years I threw in the towel and retrained as a web developer, catching that dot-com-boom at its tail end, restarting from scratch. In those days, you could take courses in web design online from Macromedia University, an early training program, and find an entry-level job in a completely new industry.

I worked my way up the corporate ladder (stories for another day) over the subsequent 25 years, but I won't say that I haven't yearned every day for what I gave up. Mourning the loss of a dream. Wondering "what might have been". Reconsidering the choice to pivot every time I hit a career bump, and being tempted to try to go back to some form of teaching. Coping with accusations of having sold out.

Ubi Sunt

This long preamble is meant to emphasize that where you come from will most likely have very little relationship to where you are going in your career in the long run, especially in this fast-moving age of dramatic technical change - much faster and probably even more disruptive than the dot-com-boom of the early 2000s.

The current anxiety and nostalgia permeating the tech discourse boils down to this tweet:

One benefit of having a background in a field other than where you wind up working is that you can lean on your previous knowledge base to bring insights to your work. Because really, there is nothing new here. The sentiment of loss and nostalgic mourning is explored over and over again in literature - the motif even has a name, 'Ubi sunt'. The 10th century poem The Wanderer expresses this trope with exquisite sadness:

"Where is the horse gone? Where the rider? Where the giver of treasure?
Where are the seats at the feast? Where are the revels in the hall?
[...] How that time has passed away,
grown dark under cover of night, as if it had never been."

In a world grown old and dark, where is the greatness of our past? And was the past great at all, if it can disappear without a trace, as if it had never existed?

The 10th century manuscript containing The Wanderer, the Exeter Book. The word "Eardsteppan" translates to "Wanderer", in the usual Old English "kenning" where two words are put together to refer to one thing. In this case the "earth stepper" is the wanderer.

In the 15th century in Middle French, François Villon borrows the Ubi Sunt trope to mourn the great ladies of the past, comparing them to those of the present day:

"Where is the very wise Héloïse,
For whom was castrated, and then made a monk,
Peter Abelard in Saint-Denis?
For his love he suffered this sentence.
Similarly, where is the Queen
Who ordered that Buridan
Be thrown in a sack into the Seine?
Oh, where are the snows of yesteryear!"

Villon was a slippery character who had several run-ins with the law, and he seems to be not so much mourning the past as reminding us that returning to it might get you chucked into the Seine.

"Student, poet, housebreaker" - an early print manuscript of Villon's works from 1489, in Paris BNF.

Still, if 10th century Anglo Saxon poets dwelling in a much more uncomfortable world felt a profound sense of regret for a (probably) even more uncomfortable past, we in our ergonometric chairs battling Cursor also have the right to feel a degree of loss, a "slow degeneration" à la Karpathy. We can perhaps express ourselves using a literary trope that's over 1000 years old. But we ought to be able to put this anxiety into perspective, as Villon insinuates that we should. This brings me to my second point.

All The Feels

We have the right to feel all the feels that AI is making us feel - sad, useless, confused, stressed at its speed-of-light implementations, upset at the instability in the job market as we are threatened with AI-powered [sic] wave after wave of layoffs, worried for the next generation of early-career folks clawing their way up through the ranks in a very different world.

But I would posit that we, the dispossessed diaspora of ex-Humanities academics, have something to contribute here. We, too, trained for years only to be met with a job market that resolutely turned its back on us. And there isn't a day that I don't mourn that this happened, as I mentioned above. But I found ways to cope, and that has been to bring the skills of my own lived and learned experience to bear on an ever-evolving professional landscape.

One coping mechanism for me has been to attempt to bridge these two worlds by bringing the humanities into tech, because the lessons I learned there apply universally - such as those lessons around close reading, translating syntax, and the power of interdisciplinarity.

The Interdisciplinarian

Consider your past experience as a way to inform your present situation. In the near future, tech is going to look very different from how it does now. The job of the programmer will lean into more architecture than hand-coding. But your hard-won skills will still resonate in your day to day activities; rather than becoming obsolete, your programming skills will simply be applied in a different context.

You will have to lean into your accumulation of knowledge. Know that parts of it will apply, be ready to learn anew, and accept that the only thing that never changes is the fact that things will change. Well, and also death. And probably taxes.

As Emily Dickinson (whose poetry is well-studied from a data science context) well knew:

All but Death can be
Adjusted ;
Dynasties repaired,
Systems settled in their
Sockets,
Centuries removed, —

Wastes of lives resown
With colors
By superior springs,
Death — unto itself exception —
Is exempt from change.

-- 89

To put a corporate stamp on it, the old exhortation to bring your whole self to work applies, now more than ever. The workplace has need of all of us with all of our interesting, strange, diverse, warty, emotional, and overwhelmingly human perspectives as our professions will be shaped increasingly by the collective that is AI. Embrace your interdisciplinarity, lean into it. I wish you great success. And please take care of yourself and each other.

Your Images Are Probably Slowing Down Your Website (Here’s How to Fix It)

Jen Looper — Wed, 11 Mar 2026 18:43:45 +0000

Images often account for the majority of a webpage’s weight. Learn how developers can improve performance using modern image formats, responsive images, and smarter delivery strategies.

The hidden performance problem on most websites

Open Chrome DevTools on almost any modern site and check the Network tab.

What you’ll usually see is something surprising:

Images dominate the payload.

The average homepage ships around 1 MB of images, often more than JavaScript, CSS, and HTML combined.

A super heavy page with a lot of big product images. Lazy loading and optimization would help here.

That product page with 20 images?
Each one is an opportunity to either:

Deliver a fast, polished experience
Or frustrate users with slow loading and layout shifts

If you care about Core Web Vitals, SEO, and user experience, image optimization is one of the highest-impact improvements you can make.

This article was generated from our Cloud to Crowd: Media IQ with Next.js curriculum, built by Cloudinary Developer Relations. Go through this curriculum and pass the certification exam to qualify to become an official Cloudinary Creator!

Why images matter (and when they don’t)

Humans process images much faster than text.

A well-chosen image can:

Explain a product instantly
Replace paragraphs of documentation
Capture attention in fast-scrolling feeds

But images can also hurt your product experience when used poorly:

Too many images slow down page loads
Poor cropping hides important information
Large files damage Core Web Vitals
Undisclosed AI or edited images reduce user trust

So you need to follow this simple rule:

Right format + right size + smart delivery

Check out the way these images are delivered to the browser

Images and Core Web Vitals

Images heavily influence Google's Core Web Vitals, particularly:

Largest Contentful Paint (LCP)

Measures how long it takes for the largest visible element on the page to load.

This is often your hero image.

A good LCP target is under 2.5 seconds.

Cumulative Layout Shift (CLS)

Images without defined dimensions can cause layout shifts while loading.

Interaction to Next Paint (INP)

Heavy pages delay responsiveness.

Optimizing images can dramatically improve all three metrics.

The current state of images on the web

Nearly every webpage (99.9%) loads at least one image.

Average number of images per page:

Device	Avg Images
Desktop	14
Mobile	13

Common formats used across the web:

Format	Usage
JPEG	32.4%
PNG	28.4%
GIF	16.8%
WebP	12%
SVG	6.4%
AVIF	1%

But these numbers reflect habit, not best practices.

Performance-focused teams are already shifting toward modern formats.

Example data from optimized platforms shows:

Format	Usage
WebP	49.5%
JPEG	19.9%
AVIF	13.3%
HEIC / PNG	8.7%

The takeaway:

Modern image formats are replacing JPEG-first strategies.

Choosing the right image format

Different formats solve different problems.

Lossy compression

Reduces file size by permanently discarding some data.

Formats:

JPEG
WebP
AVIF

Pros:

Much smaller file sizes
Ideal for photos

Cons:

Slight quality loss

Lossless compression

Reduces size without losing data.

Formats:

Pros:

Perfect image quality
Ideal for UI graphics

Cons:

Larger file sizes

Check out the difference between a lower res image vs JPEG XL

Quick developer cheat sheet

Use case	Best format
Photos	WebP / AVIF
Graphics	PNG
Icons	SVG
Legacy fallback	JPEG

Modern formats like WebP and AVIF can reduce file size by 40–60% compared to JPEG while keeping similar visual quality.

Delivering images efficiently

Choosing the right format is only part of the story.
Delivery strategy matters just as much.

Guess what? Cloudinary takes the guesswork out of all of this by helping you optimize, transform and deliver images the right way for your users. Check out how on the Developers Hub.

1. Use responsive images

Don't force mobile users to download desktop-sized images.

Use srcset and <picture>:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Product hero image">
</picture>

The browser automatically chooses the best supported format and size.

2. Use a CDN

A Content Delivery Network (CDN) reduces the physical distance between your users and your images.

Modern image CDNs can also:

Resize images automatically
Convert formats (WebP / AVIF)
Adjust compression
Crop dynamically

This allows you to store one high-quality original while serving optimized versions.

3. Lazy-load images (strategically)

Lazy loading delays images until they approach the viewport.

Example:

<img src="gallery.jpg" loading="lazy" alt="Gallery image">

But there is one important rule:

⚠️ Never lazy-load above-the-fold images.

Doing so hurts Largest Contentful Paint.

Lazy loading should only be used for below-the-fold content.

Responsible image usage

Performance isn't the only consideration.

Developers should also use images ethically and accessibly.

1. Avoid misleading visuals

Don't use edited or cropped images that misrepresent a product.

2. Disclose AI-generated images

Transparency builds trust with users.
The banner at the top of this article was generated using Nano Banana.

3. Make images accessible

Always include descriptive alt text.

<img src="dashboard.png" alt="Analytics dashboard showing user growth trends">

4. Respect privacy and licensing

Check image licenses
Get consent when photographing people
Remove sensitive EXIF metadata

5. Balance aesthetics and performance

A beautiful image that takes 8 seconds to load isn't beautiful.

It's broken.

Common image optimization myths

“A CDN replaces responsive images”

False.

Responsive images help the browser choose the correct size, while CDNs deliver optimized assets.

You need both.

“More images mean more engagement”

Not necessarily.

Images should help users make decisions, not clutter the interface.

Three practical tips for developers

1. Start with your largest image

Open DevTools → Network and find the biggest image.

Check if delivered size == display size.

A common mistake: 3000px image displayed in a 600px container.

That’s wasted bandwidth.

2. Measure your format mix

Check what formats your pipeline actually delivers.

If you're still mostly serving JPEG, there's likely a huge optimization opportunity.

3. Don’t assume mobile is optimized

Mobile networks amplify performance problems.

Check your 75th and 90th percentile metrics, not just averages.

Try this: Analyze a website’s image performance

You can test any website using Cloudinary’s Web Speed Test.

Visit https://webspeedtest.cloudinary.com

Then analyze:

Performance score
Total image weight
Largest Contentful Paint
Potential size reductions

You'll often discover massive performance gains from simple fixes.

Final thoughts

Images are often the largest performance lever on a webpage.

If you remember only three things:

1️⃣ Optimize your largest image first
2️⃣ Use modern formats like WebP and AVIF
3️⃣ Deliver responsive images with proper sizing

Small improvements in image delivery can produce huge gains in performance and user experience.

What’s the biggest image optimization issue you’ve found on a website?

Cloudinary ❤️ developers
Ready to level up your media workflow? Start using Cloudinary for free and build better visual experiences today.
👉 Create your free account

DRY January: Demotivational Posters with the TanStack or Next.js

Jen Looper — Mon, 26 Jan 2026 18:18:58 +0000

January can be a time when we make all the resolutions to do and be better in the shiny new year. We resolve to do more... more exercise, a more rigorous diet, even more mindfulness, doggone it. But what if we (and hear me out) instead thought about doing LESS. Less struggling against those 4PM sugar cravings, less fighting to not take an after-lunch nap, less battling frozen driveways to back the car out so you can make it to pilates.

I don't know if this is creepy or inspiring, but let's build it anyway

What if we embraced our inner zen and simply...did the best we could? After all, isn’t all the productivity that AI is bestowing upon us freeing up our time to do less, rather than more? I’m only half-kidding here.

To encourage us to embrace a reductionist mentality, I did a little experiment to see if I could rethink some popular messaging that I’m sure you encountered if you ever worked in an American corporate office in the early 2000s: motivational posters.

These little gems were plastered on the walls to exhort us to Bring Our Best Selves To Work, Achieve More, and Be Bold. Here’s an example from the “Successories” company:

As you can see, they have a particular format of a black background, an inspiring photo, an uplifting word with a lot of kerning, and a blurb at the bottom to drive the message home. A Whole Vibe was created as you walked down a poster-adorned corridor in order to toss your bag lunch into the office fridge.

I particularly like this wolf. This is me.

Even back in those days, people made fun of these posters, and I remember being employed in one company packed with sarcastic Eastern Europeans that was instead decorated with demotivational posters such as those crafted by the brilliant Despair.inc. Here’s a good one:

The problem with all of these posters is that, well, you have to buy them, and that’s no fun. So let’s see if we can build something like this ourselves, and actually make it a more surprising experience by connecting two APIs to generate shady messaging like this at random.

not sure what 'this' is, but you got it!

Temporarily shelve that resolution against unproductive and negative thinking and let’s see what we can build using:

The Affirmations API
Unsplash API
TanStack for a web frontend
Cloudinary image storage to display the image so you can print off a PDF of your poster

You'll need two API keys, one for the ever-useful affirmations.dev API and one for Unsplash images. You'll also need a Cloudinary account, so create one for free here if you aren't already setup. You then need to gather your Cloudinary API key, secret, cloud name and build an upload preset so that you can upload images neatly into Cloudinary. Learn how to get credentials here and how to create an upload preset here.

We’re going to grab one of the pithy affirmations from the API, extract the longest word as the central message to display with plenty of kerning, and then send that word to Unsplash to find a match. Store the image returned in Cloudinary and display the lot a as a printable poster, as a stacked image, word, and affirmation on a black background, like this one:

The miracle of survival

Continuing my tradition of building useless things to try new stacks, let’s give TANStack a whirl. TanStack is a React framework that's pitched as a less 'magical' alternative to Next.js. I also built this same app using Next.js, to compare the two codebases, for learning purposes. Check out the GitHub repo with the two apps here

Disclosure; I used Cursor to help build the two comparable apps in the demo repo. According to Cursor, the difference between the two boils down to your personal dev preference: "Next.js is a full-stack framework with conventions and a large ecosystem. TanStack Router/Start is a type-safe, flexible routing solution that can be extended to full-stack. The choice often comes down to preferring conventions (Next.js) vs. flexibility and type safety (TanStack)."

Some differences between these two frameworks in the context of this app include:

Server-side data fetching architecture

Next.js:

Uses Server Actions ('use server') and async Server Components
Server actions in actions.ts are callable from both server and client TanStack:
Uses route loaders and createServerFn for server functions
Data fetching happens in the route's loader function
Loaders run on the server before the component renders

Environment variable access

Next.js:

Uses process.env.* for environment variables
Variables are available on the server by default TanStack:
Uses import.meta.env.VITE_* (Vite convention)
Only variables prefixed with VITE_ are exposed to the client buildCloudinaryUrl.ts, because this app was built with Vite as its build tool.

Difference in image handling

Next.js:

Images are displayed using the built-in optimized component TanStack:
TanStack doesn't have such a component built-in, so you need to make sure to optimize your images! This is consistent with its 'magic-free' approach.

Guess what! You can easily optimize your images in Cloudinary. While there are other ways to do this, I decided to just add some URL transformations to the Cloudinary URL returned once the Unsplash image is uploaded:

export function buildCloudinaryImageUrl(publicId: string): string {
  const cloudName = import.meta.env.VITE_CLOUDINARY_CLOUD_NAME

  if (!cloudName) {
    throw new Error('Cloudinary cloud name not configured')
  }

  const plainPublicId = publicId

  const transformations = [
    `c_fill,w_1200,h_800`, // Fill to 1200x800 for poster feel
    `f_auto`, // Auto format
    `q_auto`, // Auto quality
  ].join('/')

  // Return the complete Cloudinary URL with transformations `https://res.cloudinary.com/${cloudName}/image/upload/${transformations}/${plainPublicId}`
}

Now you're able to grab an affirmation from the API and use it to query Unsplash, storing the result into Cloudinary and using it to build your poster. In TANStack it looks like this:

export const fetchNewAffirmationData = createServerFn({
  method: 'GET',
}).handler(async (): Promise<AffirmationData> => {
  // First fetch the affirmation
  const affirmationData = await getAffirmation()

  // Extract the longest word from the affirmation to use as image search query
  const words = affirmationData.affirmation.split(' ').filter(word => word.length > 0)
  const longestWord = words.reduce((longest, current) => 
    current.length > longest.length ? current : longest, ''
  ).toLowerCase()

  // Fetch an image based on the longest word
  const accessKey = import.meta.env.VITE_UNSPLASH_ACCESS_KEY
  if (!accessKey) {
    throw new Error('Unsplash access key not configured')
  }

  const unsplashResponse = await fetch(
    `https://api.unsplash.com/photos/random?client_id=${accessKey}&orientation=landscape&query=${encodeURIComponent(longestWord)}`
  )
  if (!unsplashResponse.ok) {
    throw new Error('Failed to fetch Unsplash photo')
  }
  const unsplashData = await unsplashResponse.json() as { id: string; urls: { full: string } }

  // Upload the Unsplash image to Cloudinary
  const publicId = await uploadToCloudinary(unsplashData.urls.full)

  // Build the Cloudinary URL with transformations
  const cloudinaryUrl = buildCloudinaryImageUrl(publicId)

  return {
    affirmation: affirmationData.affirmation,
    longestWord,
    cloudinaryUrl,
    photoId: unsplashData.id,
    publicId,
  }
})

And once you have all your pieces in place, you'll be able to view that matching affirmation, image, and printable styling all in one place so you can build a PDF poster:

const handlePrint = () => {
    if (posterRef.current) {
      const printWindow = window.open('', '_blank')
      if (printWindow) {
        printWindow.document.write(`
          <!DOCTYPE html>
          <html>
            <head>
              <title>Affirmation Poster</title>
              <style>
                ...some fancy styling
              </style>
            </head>
            <body>
              <div class="poster-container">
                <img src="${imageUrl}" alt="${affirmation}" class="poster-image" />
                <h1>${longestWordWithDots}</h1>
                <div class="poster-line"></div>
                <h2>${affirmation}</h2>
              </div>
            </body>
          </html>
        `)
        printWindow.document.close()

        // Wait for image to load before printing
        setTimeout(() => {
          printWindow.focus()
          printWindow.print()
          printWindow.onafterprint = () => printWindow.close()
        }, 250)
      }
    }
  }

So there you have it...you've built a delightfully useless little app that combines a few API calls with optimized image presentation to make you feel a little less seasonally-affected, we hope.

Happy New Year! If you liked this little app, there are plenty more where it comes from from your friends at Cloudinary Developer Relations.

Cloudinary ❤️ developers
Ready to level up your media workflow? Start using Cloudinary for free and build better visual experiences today.
👉 Create your free account

Build Holiday Card Collages with One Line of Code

Jen Looper — Thu, 04 Dec 2025 14:48:59 +0000

In this article, I'm not going to show you much code. Instead, I'm going to show you how you can build a holiday card collage, complete with a ribbon footer with text, a background, and 5 styled photos with rounded, colored borders in one line using the magic of Cloudinary's transformations.

This is way cool, so buckle up and let me show you how I built this URL-generating app for your holiday card-sending needs. You can try it right now here; it generates cards that look like this:

Maybe this tool will even save you some money as printing photo-quality holiday cards can get expensive!

Build an app, any app

I have been enjoying building Astro apps, and, let's face it, using Cursor makes architecting this sort of thing a real breeze. Use your favorite AI tool to craft an app that will allow you to upload five photos to Cloudinary, rearrange them, and generate a URL to build the holiday card.

💡 Here's a tip. If you are looking to quickly scaffold an app via prompting in Cursor or your IDE of choice, you can get better results by using two tools: ChatGPT to build the prompt, and Cursor to execute it.

My initial lazy half-baked idea sent over to ChatGPT:

what kind of demo could I build to create a holiday photo card maker for cloudinary

ChatGPT, of course, thought I wanted it to build an app for me, and went straight to scaffolding a Next.js app with code everywhere. A few clarifications later, after requesting Astro for use in Cursor...

create this as a prompt I can give to cursor

...ChatGPT generated a really nice, detailed prompt ready for building which you can read in full here

By having this kind of very detailed prompt, Cursor is able to build a perfectly reasonable app on the first try. Then it's up to the engineer to tweak it, redesign it, and add elements while keeping the core functionality of uploading and URL-building intact.

Add some extras and get ready to upload

I went ahead and changed the app colors for a wintry, cozy look, adding some falling snow, a popup elf with changing holiday messages (can you find him?), glowing lights, and a candy cane border, mostly borrowed from CodePen. Just because we use AI doesn't mean we can't continue to make interesting interfaces! And AI can help you do that, too.

After those fun things are complete, you can start making sure that you're set up to use Cloudinary's image upload and image transformation capabilities. To make this work, you need to ensure that you have some environment variables set up. Create an account on Cloudinary (there's a generous free tier) and grab your API keys from the console by clicking the "⚙️" gear icon in the left nav and selecting 'API Keys':

You want to add those keys to your .env file locally, and then make sure they're available on your hosting service when you push your app to the cloud. I use Netlify so I add these keys into the Netlify console before publishing.

PUBLIC_CLOUDINARY_CLOUD_NAME=<your cloud name>
PUBLIC_CLOUDINARY_UPLOAD_PRESET=christmas-collage

This app also needs what's called an 'Upload Preset', which is essentially a placeholder that helps your app figure out where your uploaded images should go.

Set up that preset by clicking the 'Uploads' navigation link that's right under the 'API Keys' navigation on the left. This will let you set up an unsigned preset.
Call it 'christmas-collage' (or something else, and make sure to update your app).

Make sure you have a folder set up by clicking Assets > folders on the left nav in the Cloudinary console. Call this folder 'collages'.
Also create a folder called 'holiday-assets' and add a collage background image and a background image for your ribbon element on the card. I used a white pixel image and a fancy holiday background like this:

Photo by JESHOOTS.COM on Unsplash

Watch the URL builder work

Now here's the interesting bit. Once you're done messing with your interface to make it look cute, take a look at the very clever way that your card is generated. First, you upload a series of 5 photos of your family to the app, and the interface lets you rearrange them into the order in the card that you want.

True story, my daughter asked me what the difference is between this and PicCollage, the answer being "Mom made it!"

The URL that is generated, packed with Cloudinary image transformations, looks something like this:

https://res.cloudinary.com/jen-demos/image/upload/w_1600,h_900,c_fill,q_auto,f_auto
/l_holiday-assets:jhi9cpio4ahxomhagwvs/c_fill,w_473,h_680/r_25,bo_8px_solid_rgb:FFD700/fl_layer_apply,g_north_west,x_50,y_50
/l_holiday-assets:d9njoekpa1zzzepy2y5d/c_fill,w_473,h_426/r_25,bo_8px_solid_rgb:FFD700/fl_layer_apply,g_north_west,x_563,y_50
/l_holiday-assets:nm9i3sjh6c3mkfj0ari1/c_fill,w_473,h_214/r_25,bo_8px_solid_rgb:FFD700/fl_layer_apply,g_north_west,x_563,y_516
/l_holiday-assets:rg0c1ul7ux1gcgl8c2lr/c_fill,w_473,h_214/r_25,bo_8px_solid_rgb:FFD700/fl_layer_apply,g_north_west,x_1076,y_50
/l_holiday-assets:d0brmcfuqfyzwtelsiyt/c_fill,w_473,h_426/r_25,bo_8px_solid_rgb:FFD700/fl_layer_apply,g_north_west,x_1076,y_304
/l_holiday-assets:white-pixel/c_fill,w_1600,h_100/o_70/fl_layer_apply,g_south,y_20
/l_text:Pacifico_70:Our%20Family%20-%20Holiday%202025,co_rgb:000000/fl_layer_apply,g_center,y_380
/holiday-assets/collage-bg

Yes, that one line created this card:

Let's break down that one-liner.

Step 1: Set up the base “card” background:

.../image/upload/w_1600,h_900,c_fill,q_auto,f_auto/ ... /holiday-assets/collage-bg

w_1600,h_900 – make the final image 1600×900.
c_fill – crop/resize to fill that aspect ratio.
q_auto,f_auto – optimize quality and format automatically (WebP/AVIF/etc).
holiday-assets/collage-bg – this is the base background image for the card.

Step 2: Add the first photo (top left)

/l_holiday-assets:uzfzkx8d5xd0jr1jxzyo/c_fill,w_473,h_680
/r_25,bo_8px_solid_rgb:FFD700/fl_layer_apply,g_north_west,x_50,y_50

l_holiday-assets:... – load this image as a layer.
c_fill,w_473,h_680 – size it to 473×680, cropping to fill.
r_25 – rounded corners (radius 25).
bo_8px_solid_rgb:FFD700 – 8px solid gold (#FFD700) border.
fl_layer_apply,g_north_west,x_50,y_50 – apply the layer at the top-left, offset 50px from the top and left.

Add the remaining images, some taller than others and placed in different areas of the card.

Step 3: Add a semi-transparent footer bar

/l_holiday-assets:white-pixel/c_fill,w_1600,h_100/o_70
/fl_layer_apply,g_south,y_20

This bar uses a white-pixel asset as a tiny base and stretches it to w_1600,h_100 to form a strip which is o_70 – 70% opacity (semi-transparent). It's then applied at the bottom (g_south) with a small vertical offset (y_20).

Step 4: Finally, add the holiday greeting text

/l_text:Pacifico_70:Our%20Family%20-%20Holiday%202025,co_rgb:000000
/fl_layer_apply,g_center,y_380

l_text:Pacifico_70:... – create a text layer with Font: Pacifico in size: 70. Give it the text: Our Family - Holiday 2025 with co_rgb:000000 – black text color.
fl_layer_apply,g_center,y_380 – center the text horizontally and shift it vertically to overlay the footer.

In short, this monster URL

starts with a festive background
lays out five photos in a collage with rounded corners and gold frames
adds a semi-transparent white bar at the bottom
and writes “Our Family - Holiday 2025” in a script font on top of that bar

...rendering the whole card on demand in a single Cloudinary transformation URL. Really nice!

Tip: you can make edits right in the URL to change elements on the card - try adding your own family name and changing the border color.

Enjoy the results

You could save this image and print it for snail mail, or send it right away via email to the folks who are eager to hear from you this holiday season. And you did it in one line. That's awesome!

Try this in Cloudinary today, and get one more item checked off your holiday to-do list. Learn more about image transformations here.

Happy holidays from Cloudinary Developer Relations to you.

Cloudinary ❤️ developers
Ready to level up your media workflow? Start using Cloudinary for free and build better visual experiences today.
👉 Create your free account

Cloudinary Transformations, But Make It a Mystery Adventure - meet Clara Denari!

Jen Looper — Tue, 30 Sep 2025 20:51:16 +0000

Tired of plowing through blogs and scanning through video to learn? Done with 🔥Tutorial Hell🔥? Want to get hands on quickly to explore a toolset? Looking to spice up your world with a little mystery?

Have we got an experience for you.

Introducing a new heroine for the ages: Clara Denari, Master Detective. Join her as she prowls through Boston, recovering stolen property by solving the mysteries left by the nefarious Dr. Chiaro Obscuro.

This villain, who is both a meticulous kleptomaniac AND someone with considerable long-term memory issues, has done it again. His habit is to hide his ill-gotten gains in obscure places, leaving a trail of clues that only he will understand. This time he’s stolen something valuable and has hidden it...but where?

It’s up to Clara to save the day. By deciphering each clue, she may be able to find the stolen property...but it’s up to you to help her!

Start your adventure here!

Follow the trail in the story, picking up objects and storing them in inventory. Use Cloudinary transformations to clean a piece of string, brighten an image to reveal hidden text, use image refiners to tidy up lost keys, and discover the secret hiding place of the lost treasure. You’ll even be able to view clues by digging into Content Credentials, which allow you to view an image’s history as it undergoes changes through its lifecycle:

Content Credentialing using C2PA standards

You’ll be able to solve the mystery only by getting hands-on with Cloudinary’s powerful image transformations - try them out yourself by creating a free account at cloudinary.com. Solve all 5 challenges and arrive at your destination, key in hand.

As you progress, you’ll complete labs to work with the clues scattered through Boston. Add your cloud name and the public ID of the image in the Lab to experiment with different transformations that will help you solve the clue.

Clara's Lab

Préférez-vous le français ? ¿Qué tal el español? Português brasileiro? We have you covered, as the app is fully localized to four languages. Speaking of local, this first edition Clara Denari Adventure features the gritty underside of Boston, USA, cannoli and all. If you’d like Clara to come to your city to solve a mystery, just say the word!

Because this app is a true learning experience, it features both short embedded quizzes to test your knowledge. Pass the quiz and earn a custom Holopin, showing your own detective mastery on your favorite social media channels.

Earn your limited edition Holopin!

Ready? Have your trench coat ready and your magnifying glasses polished? Join us on the inaugural Clara Denari Adventure, new from your friends in Developer Relations at Cloudinary.

Click here to start.

"It is a happy talent to know how to play.“ - Ralph Waldo Emerson, American writer, 1803–1882

Cloudinary ❤️ developers
Ready to level up your media workflow? Start using Cloudinary for free and build better visual experiences today.
👉 Create your free account

What To Do if Your Web Site Is as Slow as Molasses in January

Jen Looper — Wed, 30 Jul 2025 17:50:00 +0000

Image from the 1982 version of the CandyLand board game.

Web performance is one of those topics that simmers on the back burner for some developers; something that, unless well-regulated and occasionally stirred (read: fine-tuned) can easily boil over. It’s a well-worn mantra that for each second of wait time experienced by a user, revenue is lost. Bounce rates, e.g. how quickly a user will leave your site, increase 32% as a page’s load time increases from one second to three seconds [source]. Given today’s attention spans, it’s likely that users’ patience is becoming ever shorter.

Fixing your website’s performance is not a one-time activity. As it grows and changes, performance should always be top of mind for the careful developer. Nor is a slow website repaired by focusing on just one aspect. Slow web speed can be caused by, in general, three elements: heavy design, clunky server infrastructure, or a user's slow internet connection. These factors can be broadly categorized into issues with the website itself (unoptimized code, huge images, video), server performance, and network conditions. Let’s focus on the first of those problems.

Attack of the Mega-Image

The use of giant images is often a culprit in site slow-downs. Even if you’re not a specialist in making your sites blazingly fast, there are a few helpers that can at the very least reduce your image load time to a reasonable level. In this article, I’d like to show how I used a tool developed by Cloudinary to measurably speed up an image-heavy site I built - not that my site will ever generate revenue, but the process became a test of how to balance image quality with site speed.

Consider this site which I built using Astro, with a way to pick flowers and build custom bouquets reflecting the Victorian language of flowers. It looks like this:

Once you choose the flowers you like, Gemini AI is used to create virtual ‘tussie mussies’, a favorite parlor game in the Victorian era, sending coded messages to enemies and admirers alike. In our case, you can send your AI-generated ‘bouquAI’ via an e-card powered by Mailgun. Here’s an example of a generated bouquet:

Pretty? Yes! Useful? Well, not so much. Monetizable? Hardly! And fast? Given that there are 118 high-resolution images in the flower database, which I originally downloaded as Creative-Commons licensed flower images and stored locally, not at all!

The Need for Speed

Can we speed up this site a little simply by using Cloudinary’s image CDN and some optimizations suggested as best practices? As it turns out, there’s a useful tool that we can use to get a baseline, and then progressively optimize. It’s called https://webspeedtest.cloudinary.com/ and is a great way to work through your image optimization challenges.

I first started by analyzing the page speed without any optimizations, and was unpleasantly surprised to discover that the images I used were heavy as heck - while pagination stops the bulk of them from loading all at once, the six plus the logo that show on the home page totaled almost 3 megabytes. Helpfully, the webspeedtest tool offers hints on how to better follow best practices on image load: smart compression, alongside the use of Cloudinary’s CDN, should make a difference!

I uploaded all 100+ flower images used by this site up to Cloudinary’s Assets area, keeping their original names so as to continue to be callable using the .json file in my codebase that retains the image names and the flower’s meaning. Then, focusing on the images loaded into the image cards on the homepage, I changed the image’s url to reflect their new residence in the CDN:

<img   :src="`https://res.cloudinary.com/${cloudName}/image/upload/flowers/${flower.image}`"
:alt="flower.name"
 class="w-full h-full object-cover"
 />

For those new to this domain, a CDN (Content Delivery Network) is “a geographically distributed group of servers that caches content close to end users. A CDN allows for the quick transfer of assets needed for loading Internet content, including HTML pages, JavaScript files, stylesheets, images, and videos.” according to Cloudflare. Assets geographically closer to users are delivered more quickly to their browser.

Then, it was time to try some of Cloudinary’s image transformations to optimize the delivery. Adding an f_auto parameter allows my images to be delivered in the fastest way to a given client. A scorecard offered by the webspeedtest tool shows the potential for speeding up delivery given different image formats:

Following best practices to enable image compression, I then started tweaking the q_auto parameter via the URL to see how I could improve my page score. I found that by using a width setting for my responsive cards and adding q_auto:eco, I was able to compress the images to a reasonable size. By changing the :eco parameter to other options such as :good or :best you can fiddle with the amount of image loss that you can tolerate (the site has to be fast and look good, after all).

<img   :src="`https://res.cloudinary.com/${cloudName}/image/upload/w_250/f_auto,q_auto:eco/flowers/${flower.image}`"
:alt="flower.name"
class="w-full h-full object-cover"
/>

I experimented a bit with how the images looked using q_auto (which is the same as q_auto:good) by trying ‘best’ and ‘eco’ settings. There’s a clear tradeoff on image quality and page load times, so use your best judgement on what is an acceptable quality level for your images for your use case. The Cloudinary docs offer a good example of how images look when this parameter changes: https://cloudinary.com/documentation/image_optimization.

By doing this tweak, I managed to get a better score - from C to B:

Mediocre to Good isn’t bad! And I get a 100% score on Lighthouse:

What other things could I do to speed the image load even more? One thing would be to create a more complex responsive design that would deliver only the smallest images to the smallest screens. Another would be to make sure that all images are meticulously cropped and resized. For the time being, however, I’m satisfied with having speeded up my site a bit.

Stay tuned for esoteric demos and sign up to enjoy the generous free tier of this top-notch image and video platform!

What are you doing to make your site wicked fast? Let me know in the comments!

Cloudinary ❤️ developers
Ready to level up your media workflow? Start using Cloudinary for free and build better visual experiences today.
👉 Create your free account

About me: I'm the Director of Developer Relations at Cloudinary. Stay tuned for esoteric demos and sign up to enjoy the generous free tier of this top-notch image and video platform!

Uncovering Family History with Cloudinary’s Image Transformations, Goose, and MCP Servers

Jen Looper — Thu, 24 Jul 2025 15:21:21 +0000

There’s a peculiar human desire to reconnect with their past by looking for clues in family trees. Did you get that sass from Great-Aunt Edna, who, to her dying day, declined to share her prized German Potato Salad recipe? Did you get those baby blue eyes from your Mom’s side of the family? In a country like the US, shaped by waves of immigration and where people tend to move frequently in search of opportunity, it’s easy to lose track of where we came from in pursuit of where we are going (next).

Recently I’ve been digging through archives to flesh out my family’s genealogical history a bit, using the interesting software offered by Ancestry.com, a company that helps you build out your family tree. One thing I found was photos attached to the tree are few and far between - they are a pain to scan and upload, and these paper fragments often are damaged. For this reason I’ve been happy to experiment with ways to upscale and enhance these images using AI - and I discovered a little key to the past while doing so!

I also found that my ninth great-grandmother was the famous Rebecca Nurse Towne, hanged as a witch during the Salem Witch Trials in the 1690s. So there’s that.

Sample of what family trees look like on Ancestry.com

Something Old, Something New

While digging through Ancestry’s pages, I discovered an image I hadn’t seen before of my Great Grandparents, Elmer Dove and Blanche Bartlett Dove:

While the image is pretty crisp, I put it through a workflow that I built to help my research: enhancing the images using AI to get a few more details from them. To do this, I used Goose, a new tool by Block to interface with LLMs and MCP servers so that you can simply do your work locally without battling tooling. This was exactly what I needed to enhance the images I found on Ancestry right from a desktop app, chatting with Goose via Gemini, my LLM of choice. Cloudinary’s MCP servers work very well with Goose; here’s how to start using them.

To get setup to use Goose with Cloudinary’s MCPs, there are a few steps:

Download Goose for free and take a look at how it interfaces with Cloudinary’s MCP servers: https://block.github.io/goose/docs/mcp/cloudinary-asset-management-mcp/
Install the Cloudinary extension by searching for Cloudinary at https://block.github.io/goose/extensions/ and pressing ‘install’.
Add your Cloudinary URL to the extension’s settings (find the URL by going to the console in Cloudinary and looking for the API key section, where the URL is listed: CLOUDINARY_URL=cloudinary://<your_api_key>:<your_api_secret>@<your_account_name>.
For ease of upload, I added an upload preset so that all the images in this task will go to a specific folder.

Configure your LLM of choice using an appropriate API key as outlined by Goose (I use Gemini)

Now you can start chatting with Goose via your LLM. Tell it to upload images straight from Ancestry paths (which you can get by right-clicking on an image in Ancestry) and transform them to bring these pictures into better focus.

I was amazed by the image quality, and even learned something about Great-Grandfather Elmer:

With this enhanced image, my eye was caught by the little silver axe pinned to the lapel. Some research using ChatGPT found that this signifies membership in the ‘Modern Woodmen’ Association, a proto life-insurance type organization still in existence that pooled members’ assets in case of death, so that the widow would be taken care of. Given that this photo was taken in the 1890s in Nebraska, and documentation mentions his membership in this organization, this checks out, but I never would have made the connection without the little symbol that shows clearly in the enhanced photo. It’s delightful to see these little humanizing elements pop out from the past. Also that’s a cool moustache.

Next I tried a transformation of my formidable Great Grandmother Schoenleber, née Isermann, on the other side of the family. This lady went on to be the mother of twelve, including a set of twins, one of whom was my Grandfather. German farm wives do not mess around. I was thrilled to use Goose and the Cloudinary MCP server to go from this grainy photo…

…to this with some AI enhancement, restoration and brightening, with her amazing spit curls, elaborate lace and earrings on full display:

In conclusion, it’s a wonderful experience to “speak” to your ancestors via these old photographs. Using an MCP server allows you to get tooling out of the way and simply interface with an AI agent that will let you see your past just a little more clearly.

Cloudinary ❤️ developers
Ready to level up your media workflow? Start using Cloudinary for free and build better visual experiences today.
👉 Create your free account

About me: I'm the Director of Developer Relations at Cloudinary. Stay tuned for esoteric demos and sign up to enjoy the generous free tier of this top-notch image and video platform!

Using Cloudinary's New MCP Server to Scrape Mozzarella, Camembert and Parmesan

Jen Looper — Sun, 22 Jun 2025 01:16:22 +0000

image from Midjourney, amusingly prompted as 'cheesecore'

I'm always interested in how new technology can help us make our esoteric tasks a little less manual. Speaking of esoteric tasks, did you know that I curate a machine learning model to classify types of cheese? It was done to power a mobile app like this:

The trick with creating custom ML models is that you need to train a model with a bunch of good-quality images so that it can learn about the categories you want to test. In this case, I wanted to be able to walk into a cheese shop and, via my custom ML-enabled mobile app, determine the type of cheese that was available out of the six standard categories of cheese worldwide: bloomy, semi-soft, hard, fresh, blue, and washed-rind. Yes, this is important work.

But digging through images online and manually dumping them into folders is a pain. Alternately, walking into your local cheese shop and shooting video to later split up into images using ffmp, all the while telling the sales people that "I'm fine, just building up a dataset for my ML model", is kind of embarassing. Isn't there a better way?

Live action view of Jerry impersonating a ML model

Turns out ... YES! Recently, Cloudinary released an MCP server solution that would allow me to perform a quick web scrape to gather images of types of cheese that I can curate and upload, tagged, to my account. It's the perfect use case! Make the images come to you using an agent, and make that agent work nicely with Cloudinary, your friend for media management. All while never leaving the comfort and safety of your IDE!

Meet the Cheesy MCP — the AI-powered agent that scrapes free, Creative-Commons licensed, high-quality cheese photos and delivers them straight to your Cloudinary account.

Of course, this system can be used with images other than cheese! Use it for a sweet way to curate other image categories too.

What Is this MCP thing?

The Model Context Protocol, launched by Anthropic last November, is the ~~new hotness~~ power behind AI agents, enabling them to independently function to perform actions set by a user using an agreed-upon protocol. An example is asking an agent to crawl your mailbox periodically to gather receipts to build a monthly expense report, or periodically prowl the web for images of wedding cakes to add to a Pinterest board.

Cloudinary has entered the field with an offering allowing you to connect your AI tools like Claude or Cursor to the Cloudinary service for automated asset management. Take a look at the open source, free servers listed on GitHub as they continue to develop and evolve.

What Does This Have To Do With Cheese?

Honestly, what a question. What doesn't have to do with cheese? Still, glad you asked! I built a Python project to leverage this MCP tool from within Cursor, my IDE of choice. The agent surfs Google, bringing me images that I can curate ad hoc, with a nice automation workflow done via chat in Cursor. Once the images are available, I approve them and check their metadata for proper tagging, and say 'upload' in chat. The images are then uploaded right on up to my Cloudinary account, all tagged up and with metadata intact.

Up and Running

There are a few things you need to do to leverage these servers and a few different ways you can do it. As a Cursor user, I was happy to simply use the 'add to Cursor' buttons available for us:

For Cursor users, you can install MCP servers with one click using Cursor deeplinks:

The following MCP servers are available for Cloudinary:

Server Name	Description	GitHub Repo
Asset Management	Upload, manage, and transform your media assets with advanced search and organization capabilities	@cloudinary/asset-management
Environment Config	Configure and manage your Cloudinary environment settings, upload presets, and transformations	@cloudinary/environment-config
Structured Metadata	Create, manage, and query structured metadata fields for enhanced asset organization and searchability	@cloudinary/structured-metadata
Analysis	Leverage AI-powered content analysis, moderation, and auto-tagging capabilities for your media assets	@cloudinary/analysis
MediaFlows	Build and manage low-code workflow automations for images and videos with AI-powered assistance	MediaFlows MCP

Make sure you have your Cloudinary account ready with your API credentials handy as you'll need to update the environment variables with your actual credentials after installation.

Start Your Engines

Once I installed the MCP JSON into Cursor, it was picked up and I was invited to configure the server. Add your credentials right into the MCP settings:

Once ready, Cursor helped me create a Python script to scrape images and dump them into my local folder. By far this was the most finicky bit - web scraping is an inexact science. Once that is done, the system prompts me to curate them:

After the scrape is done and 'candidates' are offered for upload, I am invited to interact with the system via chat, telling the agent to 'upload'. I can check and, if necessary, overwrite any tags for the images.

And once I give it the go-ahead, the system makes the handshake with my Cloudinary account and uploads the tagged images after I ensure they are correct:

Fresh, not moldy!

It's a new experience for me to be able to use my IDE as an agent, making handshakes between systems that I can control using code and this protocol. And honestly it took a bit of a mindshift to understand that web scraping can be done this way, rather than a plain cron job + Python or web app. But it's rather powerful, wouldn't you say?

Give the new Cloudinary MCP servers a try, and let me know what you build. You can check out my codebase on GitHub.

Cloudinary ❤️ developers
Ready to level up your media workflow? Start using Cloudinary for free and build better visual experiences today.
👉 Create your free account

About me: I'm the Director of Developer Relations at Cloudinary. Stay tuned for esoteric demos and sign up to enjoy the generous free tier of this top-notch image and video platform!

Guys, I created the most useful AI Agent: the Egg Price-o-matic!

Jen Looper — Tue, 18 Mar 2025 15:43:58 +0000

Ever since I heard about Agentic AI and the ability that we now have to send little helpers all through the internet to save us some trouble with pesky automations, I've been racking my brains for that killer use case for an AI Agent. I don't really like the idea of an agent creating my entire vacation for me (although helping me get out of my restaurant rut by suggesting a 'surprise' restaurant each weekend would be helpful). Vacations need to be highly personalized and carefully planned, in my opinion, and errors can be costly. I think I'd rather book my own flights, tyvm.

If an AI Agent could be customized to scroll through my tax history and file them for me, with zero chance of errors, that would be amazing. But until we have such a killer app available, let's try something simple to see if we can create both a killer app AND something that's really easy to build.

Recently I took the AI Agents course on Hugging Face, and to be perfectly honest, building these bits of software from scratch is a little onerous. I instead turned to a leader in automations that I've used for years to see what Zapier could teach me about building an app that solves a crucial problem for me: finding the best price of eggs in my local area.

You can test this yourself - it's set to my zip code but you can customize it:
https://agents.zapier.com/copy/75490b5c-c35b-4526-a944-b1e2189603cf.
You'll need a Zapier account.

Creating an agent in Zapier is a quick three-step process, although you will want to fine-tune the resultant agent based on your needs. I found it best to make a hyperlocal agent, rather than a bot that would allow you to input your zip code to find egg prices, so as to reduce manual input needs.

First, login to Zapier and create an agent using the button on the left nav:

You are presented with a few sample agents that you can edit, or offered the option to create your own. For a really special use case like this one, you can create a custom agent:

Then, you can configure it in the configuration tab, inserting any data source or data connection and adding any actions you want the agent to take. In my case, I wanted rows added to a Google spreadsheet when the agent runs, asking it to scrape the internet in a 20 mile radius of local grocery stores, to find and email me the price of a dozen eggs. You can ask the agent to run ad hoc or on a schedule.

With this simple example, you can get a regular email like this:

... and a spreadsheet progressively populated with data. Then, you could create some visualizations around that data as the prices fluctuate, the sky's the limit!

Have you tried any AI Agent creation software recently? Let me know what worked for you in the comments, and any pain points you found. If you are interested in following my adventures in AI, subscribe to my weekly LinkedIn newsletter, AI Drops!

What are JavaScript Engines?

Jen Looper — Thu, 26 Dec 2024 17:15:32 +0000

Writing code for the web sometimes feels a little magical in that we write a sequence of characters in a file, open that file in a browser, and watch it come to life. But understanding the tech behind the magic can help you better hone your craft as a programmer.

In this article, you'll discover what is going on behind the scenes in a JavaScript-powered web or mobile stack by grasping the complexities of the JavaScript engines that power browsers. Let’s break down what a JavaScript engine does, why different platforms use different engines, how they have evolved over the years, and why we, as developers, should care.

First, a little terminology

A ‘JavaScript engine’ is often termed a type of virtual machine. A ‘virtual machine’ refers to the software-driven emulation of a given computer system. There are many types of virtual machines, and they are classified by how precisely they are able to emulate or substitute for actual physical machines.

A ‘system virtual machine’, for example, provides a complete emulation of a platform on which an operating system can be executed. Mac users might be familiar with Parallels, a system virtual machine that allows you to run Windows on your Mac.

A ‘process virtual machine’, on the other hand, is less fully-functional and can run one program or process. Wine is a process virtual machine that allows you to run Windows applications on a Linux machine, but does not provide an entire Windows OS on a Linux box.

A JavaScript engine is a kind of process virtual machine that is designed specifically to interpret and execute JavaScript code.

Note: it’s important to differentiate between the engines that power a browser by laying out web pages, versus the lower-level JavaScript engine that interprets and executes code. A good explanation is found in this article on how browsers work.

So what, exactly, is a JavaScript engine, and what does it do?
The basic job of a JavaScript engine, when all is said and done, is to take the JavaScript code that a developer writes and convert it to fast, optimized code that can be interpreted by a browser or even embedded into an application. JavaScriptCore, in fact, calls itself an "optimizing virtual machine".

More precisely, each JavaScript engine implements a version of ECMAScript, of which JavaScript is a dialect. As ECMAScript evolves, so do JavaScript engines. The reason there are so many different engines is each one is designed to work with a different web browser, headless browser, or runtime like Node.js.

You’re probably familiar with web browsers, but what’s a headless browser? It’s a web browser without a graphic user interface. They are useful for running automated tests against your web products. Since version 59 of Chrome and version 56 of Firefox, regular browsers can be used in this way, notably for testing. And where does Node.js fit into this? Node.js is an asynchronous, event-driven framework that allows you to use JavaScript on the server-side. Since they are JavaScript-driven tools, they are powered by JavaScript engines.

Given the definition of a virtual machine above, it makes sense to term a JavaScript engine a process virtual machine, since its sole purpose is to read and compile JavaScript code. This doesn’t mean that it’s a simple engine. JavaScriptCore, for example, has six ‘building blocks’ that analyze, interpret, optimize, and garbage collect JavaScript code.

How does this work?

This depends on the engine. Let's consider two important engines: WebKit’s JavaScriptCore and Google’s V8 engine. These two engines handle processing code differently.

JavaScriptCore performs a series of steps to interpret and optimize a script:

It performs a lexical analysis, breaking down the source into a series of tokens, or strings with an identified meaning.

The tokens are then analyzed by the parser for syntax and built into a syntax tree.

Four JIT (just in time) processes then kick in, analyzing and executing the bytecode produced by the parser.

In simple terms, this JavaScript engine takes your source code, breaks it up into strings (a.k.a. lexes it), takes those strings and converts them into bytecode that a compiler can understand, and then executes it.

Google’s V8 engine, written in C++, also compiles and executes JavaScript source code, handles memory allocation, and garbage collects leftovers. Its design consists of a compiler pipeline that compiles source code directly into machine code:

Ignition, the interpreter that generates bytecode
TurboFan, an optimizing compiler that compiles that bytecode into machine code
SparkPlug, a compiler that supplements TurboFan

If you're interested in history, this new pipeline replaced the older Full-codegen and Crankshaft double-compiler design used previously by V8.

Once machine code is produced by the compilation process, the engine exposes all the data types, operators, objects, and functions specified in the ECMA standard to the browser, or any runtime that needs to use them, like Node.js, Deno, or Electron (which is used by Visual Studio Code).

A little detour: runtimes

If JavaScript engines quietly run in the background, parsing code and breaking it up into readable strings so a compiler can read and compile it, runtimes tend to attract more attention. Why is that?

Well-known runtimes work on top of JavaScript engines, extending their power. The best-known is Node, but Deno and Bun are newcomers to the arena. Node and Deno embed V8, and Bun embeds JavaScriptCore.

Bun claims to run faster than Node or Deno because JavaScriptCore is faster than V8, handling 69,845 http requests per second vs 16,288 for Node and 12,926 for Deno.

These runtimes' goal, as stated by Bun's docs, "is to run most of the world's JavaScript outside of browsers, bringing performance and complexity enhancements to your future infrastructure, as well as developer productivity through better, simpler tooling." These runtimes, in fact, leverage the power of JavaScript engines to make JavaScript run outside of browsers.

NativeScript is a good example of a runtime built specifically for cross-platform native mobile application development built using JavaScript.

These runtimes were also built to solve some of the inherent problems presented by JavaScript's single-threaded architecture. Node, for example, prioritizes asynchronous, threadless execution of routines. All these runtimes offer a curated developer experience, including built in support for well-loved APIs like fetch, websocket, and even JSX, beloved of React developers. This may be the reason that they tend to attract developer attention.

Runtimes, overall, address perceived gaps in the performance of standard browser architecture and the engines that power them. As the engines evolve, so, surely, will these runtimes.

What JavaScript engines are out there?

There is a large variety of JavaScript engines available to analyze, parse, and execute your client-side code. With every browser version release, the JavaScript engine might be changed or optimized to keep up with the state of the art in JavaScript code execution.

It’s useful to remember, before getting totally confused by the names given to these engines, that a lot of marketing push goes into these engines and the browsers they underlie. In this useful analysis of JavaScript compilation, the author notes wryly: "In case you didn’t know, compilers are approximately 37% composed of marketing, and rebranding is one of the few things you can do to a compiler, marketing-wise, hence the name train: SquirrelFish, Nitro, SFX..."

While keeping in mind the ebb and flow around naming and renaming these engines, it’s useful to note a few of the major events in the history of the JavaScript engine. I’ve compiled a handy chart for you:

Browser, Headless Browser, or Runtime	JavaScript Engine
Mozilla	Spidermonkey
Chrome	V8
IE	Chakra
Safari	JavaScriptCore*
Node.js	V8
Deno	V8
Bun	JavaScriptCore
Edge**	Blink and V8

*JavaScriptCore was rewritten as SquirrelFish, rebranded as SquirrelFish Extreme, also called Nitro. It’s still a true statement however to call JavaScriptCore the JavaScript engine that underlies WebKit implementations (such as Safari).

**Edge originally used the Chakra engine, some of which Microsoft open sourced. Edge was then rebuilt as a Chromium browser, with Blink and V8 JavaScript engines under the hood.

Why should we care?

The goal of a JavaScript engine’s code parsing and execution process is to generate the most optimized code in the shortest possible time.
Bottom line, the evolution of these engines parallels our quest to evolve the web and mobile environments to make them as performant as possible. To track this evolution, you can see how various engines perform in benchmarking graphs such as those produced on arewefastyet.com.

Any web developer needs to be aware of the differences inherent in the browsers that display the code that we work so hard to produce, debug, and maintain. Why do certain scripts work slowly on one browser, but more quickly on another?

Mobile developers, similarly, especially those who write hybrid mobile apps using a webview to display their content, will want to know what engines are interpreting their JavaScript code. All web developers who care about user experience should understand the limitations inherent to and possibilities offered by the various browsers on their small devices. Keeping up with the changes in
JavaScript engines will be time well spent as you evolve as a web, mobile, or app developer.

This article originally appeared in 2015 on the Telerik Developer Network, and has since been revised and updated for 2022 and beyond. The original article is cited on wikipedia in the JavaScript Engines entry.

The Last Saree: Connoisseurship in the Age of AI

Jen Looper — Tue, 19 Nov 2024 15:56:59 +0000

Is the "era of saree draping silently coming to an end"? Hidden inside the clickbaity title of both this article and the original question on Shilpa lies a deeper anxiety. What if, as we careen forward in embracing new technologies, we forget the heritage that makes life colorful, diverse, and enjoyable? Rejecting the Luddite's anti-technology violence, can we envision a world where technology might be put into the service of preserving artisan material culture, rather than erasing it? In this article, let's explore an intersection of technology and artisanship by studying the special case of the artisan textile as a literal web that connects old and new, artisan and engineer, poet and scientist.

Textiles as Catalyst

Saree-style draped garments have been depicted in carvings over 1000 years old. It's important at the outset of a thought piece such as this to understand that ancient traditions can never be 'improved' by modern technology. It is debatable whether power looms, for example, can produce textiles comparable to those handcrafted on handlooms.

A Terracotta figurine draped in a saree-like garment from Bengal (200–100 BCE)

Textiles, as aspects of culture that are relevant to almost every human on earth, are uniquely interesting to study as artifacts that form webs of important interpersonal and intercultural connections. Artisan textiles have been under threat since the industrial revolution, when some of the first advances in industrial technology were used to mechanize processing raw weavable materials and creating cloth. Textiles, thus, are at the nexus of the tension between technological advances and the desire to preserve artisanship. They can be fruitfully used as a case study to consider the effect that advances in AI might have on material culture.

Moving from Cultural Appropriation to Cultural Appreciation

The study of textiles often leads to the study of fashion, and how humans use clothing to signal affiliation. Sometimes, the inappropriate or thoughtless use of a garment used by a group signals ill-intent, or simply ignorance. Wearing native American war headdresses at football games, for example, is taking a garment with important cultural significance and wearing it outside of its appropriate context. If we presume that the application of technological advances can be put into the service of moving an audience from incomprehension to understanding (the premise of EdTech), then let's observe how we might use these tools in service of helping an audience gain awareness of the glorious artisan textiles of India.

Textile as Story

One way to battle ignorance is by observing history. Where did a given element of material culture come from, and how did it evolve to its current form? What cultural contexts informed that evolution? A good example of a garment that evolved over hundreds of years is the good, old-fashioned, blue jean...that quintessential American garment (or is it?)

The story of jeans starts around the 17th Century when blue pants originated in India and were worn by sailors - these are called Dungarees possibly from the Indian town of Dongri. They may be the precursor to "Serge de Nîmes", a fabric inspired by Indian cotton and the origin of the word 'Denim'. The word 'jeans' originates from a type of material made in Genoa - 'Bleu de Gênes'. Note the association of these artifacts to port cities where dockworkers and sailors need good, strong working pants, as well as the rapid movement of this garment around the world by being associated with voyaging sailors.

The indigo-dyed twill that blue jeans became is strongly associated, in the Americas, with forced labor on Southern plantations and the movement of cotton between North and South. The fabric can be said to have profoundly influenced the history of the United States. The blue jeans that we know today were canonized by the Levi Strauss company which added, and patented, the use of rivets on the pants' seams in the 1870s so that miners in California could depend on their work clothes not to rip. By the 1970s jeans had become a symbol of the counter-culture, by the 1980s high fashion, and they continue to evolve today. Following the history of the humble blue jean allows us to equate the evolution of a textile to the cultural currents that carried it around the world.

The indestructible Levi-Strauss blue jeans!

Technology for Storytelling

Where does technology fit in to looking at an artifact's history? Museums around the world are grappling with this very question today. The first step in this direction involves bringing a collection online, and to do that it needs to be digitized.

DAM (Digital Asset Management) solutions are used by museums and libraries (among other business entities) to digitize an analog collection. All the photographs, 3D renderings, and metadata that can be stored in an online system can be well served by a robust DAM system. The APIs built by the Cooper Hewitt and Metropolitan Museums, for example, are fed by a DAM system coupled with an open-access software license so that developers can easily interact with a collection.

The simplest DAM system would be a relational database able to store multiple photos and renderings of an object alongside its metadata including provenance, medium, date, acquisition date, and more. A well designed database of this type would allow users to query related artifacts across departments, connecting, for example, a porcelain Ming dynasty vase with a work on paper from the same era, or given by the same donor. But more and more complex technology is being used to assist both in the cataloguing process. OCR (Optical Character Recognition) and Natural Language recognition for example can be used to decipher typed and handwritten labels in a specimen set.

I have shown elsewhere how machine learning can help to identify items in a collection, given enough quality training data. Using standard machine learning training techniques, we are able to create a ML model to aid in the categorization of a set of artisan textiles. The steps to follow are straightforward:

Gather acceptable-use images from the web
Categorize them into labeled folders
Drop them into a storage system (such as S3):

Use a service such as Amazon Rekognition or Azure AI Vision to perform transfer learning on your dataset and create a custom ML model:

With a small number of images (I found 130 images of saree fabric styles, categorized by location and saree weaving type), you can train a testable ML model.

Once your model performs to your satisfaction, you can call it in a web app. The full codebase is here and you can watch a demo here:

A demo of the Saree Detector app. Note how the images are determined with surprising accuracy.

A basic use case of a web app calling a custom ML model, then, provides an example of a way that someone managing a collection could use computer vision as a way to triage items, at least a first pass.

ML to AI

What about the use of AI, and specifically generative AI, to support the appreciation of cultural heritage? I was lucky enough to travel to India's Gujarat region and visit the Patola weavers of Patan. These are artisans using handloom techniques and a way of tie-dying both the warp and the weft of the fabric threads before it is woven, producing single and double ikat fabric, in what seems almost like pixel art, or a technique similar to creating pysanka eggs.

A saree weaver in Patan, Gujarat, India shows the tie-dye process of a Patola style saree weave. Photo by the author.

It's important to realize that no AI process can ever improve this art form. It has been handed down over generations and we should see it as something to treasure and preserve. So it is fruitless to wonder whether Generative AI, which creates something novel based on images it has already ingested, can create something better than a Patola saree. Instead, we should focus our attention on whether there are sufficient quality images available on which to train these models, which takes us back to DAMS.

AI Era Risks and Promises

Artisanship might be seen as being at risk during this brave new era of AI. The content created by these systems is by definition disconnected from its source and attribution can be muddled. Results can be superficial or even hallucinatory. Source can even be erased. At the same time, the wide availability of systems such as ChatGPT and PartyRock.aws have dramatically democratized some very high-tech systems, opening the door to more diverse voices to participate, which will improve the results generated.

I tested a Generative AI system (PartyRock.aws) to see how far I could push it to generate a saree design in a given style by building SilkWeave, an AI app (try it yourself!). The results were mixed:

PartyRock-generated sarees

I pushed it to deliver several iterations of a Cloud design, however:

I was pleased enough with the result to commission it to be embroidered for me to wear in India: the world's first AI Saree!

"SarAI" - the world's first AI generated saree, purple silk with resham threadwork clouds, stitched in Gujarat.

Diving Deeper: Towards Deep Culture

Artisan textiles, however, have deeper meaning than is often recognized. The motifs for these expensive garments are often carefully chosen and have meaning. Banarasi weavers, for example, employ a visual vocabulary that bears careful study. Could we ask a generative AI system to create for us a saree design based on the meaning that we want the motifs to convey? A sort of secret code?

Banarasi saree motifs have a whole vocabulary of paisley, floral trellises, mangoes, creeping vines, hunting scenes, and more. Asking an LLM to generate a saree with the following prompt "Banarasi Saree design symbolizing good luck, fertility, and prosperity via the symbols in the background and pallu" generated a mess:

Clearly, the model has no exposure to this type of very specific and deep culture. However, there is a way to make an LLM a little more precise: by using a Knowledge Base. You can find them connected to Amazon Bedrock here and they act as vetted sources that can improve your prompt.

This knowledge base is built by connecting an LLM to vetted online sources.

With a much better prompt, a better image can be created:

This design symbolizes prosperity, good luck and fertility by including mangoes, paisley, floral jaal, and bulbul birds as suggested by the enhanced prompt

In conclusion, the use of technology to safeguard and better understand material culture leads inevitably to today's AI moment. Approached carefully, we can use AI not to generate new artifacts stripped of meaning and provenance, but to better understand and appreciate the heritages that we inherit, preserving them for another generation to cherish.

This article was originally presented as a TEDx talk at CHARUSAT university in Gujarat, India

Slides from the talk can be found on Slideshare

Welcoming More Girls to Computer Science in Middle School

Jen Looper — Tue, 29 Oct 2024 14:05:19 +0000

This article was originally written as a journal reflection in a course at the University of Massachusetts' (Lowell) School of Education Master's degree program.

It has been established that female engagement in computer science education has slipped to levels seen in the 1960s (Corbett et al., 2018). Furthermore, it has been observed that girls tend to not enroll in high school AP computer science classes in the same numbers as their male counterparts and enroll in fewer numbers in college CS classes (Freeman). Their lack of interest is surprising if one notes that though elementary and middle school-aged girls do almost as well as boys in their STEM-based subjects that build the skills required to be successful in computer science classes (Dee). Clearly, there is some disconnect in how girls perceive computer science, programmers, the craft of programming, and the career paths that are open to them.

There are several implications for curriculum development, given this situation. Two contradictory aspects in particular appear when the curriculum designer starts to explore how to create a curriculum that will appeal to both middle school girls and boys whose ideas are in the process of becoming fixed.

While CS standards remain a work in progress, their inclusion in the Common Core or any State Standard program would elevate the topic away from its current relegation to electives that students are allowed to avoid. While this would give equal opportunity for girls to excel in the subject as well as their male counterparts in more equal numbers, it would also create a potential teacher shortage as staffing needs would have to compete with corporate hiring capability. Since it has been proven that students with teachers of the same sex influence their students’ success, it would be beneficial to hire women CS teachers (Dee) in a field already missing female representation. In addition, creating a standards-based curriculum would put a large focus on assessment and testing, which is inimical to the way that computer science can best be taught in pre-high school grades. Moving towards teaching the ‘mere facts’ of CS in a standards-based classroom would remove much of the skills that are needed by programmers, especially creativity, teamwork, and problem-solving (Loveless). While building standards for computer science curricula would create a more equitable CS classroom, it might bleach it of its most interesting aspects: the ability to form teams to build projects to solve problems creatively.

A second contradiction appears if an instructor accepts the ideal of a democratic classroom and tries to build curriculum accordingly. Democratic classrooms should be designed to allow students maximum choice in their instruction (Koonce). Students should be empowered to choose projects for study, freely question how they are built, and experiment in an environment of open thought. Computer science projects, indeed, should prioritize innovation, free thinking, and freewheeling experimentation. It seems likely that this model, however, might not always serve girls well. If girls self-select away from computer science topics or feel unengaged or excluded in a classroom because they do not feel comfortable with the topic, they might easily become discouraged in an environment where the majority rules. A more instructor-led approach, even with a teacher strongly driving curriculum choice, software architecture, tools and how teams function, might better serve girls who find themselves a minority.

It is up to the innovative CS curriculum-builder, then, to experiment in these early years to find solutions to truly engage girls in CS. It is likely that some mix of democratic ideals - enough to structure a classroom and lay down ground rules while allowing innovation - would help girls to prosper. In addition, before CS becomes a part of state standards, it is important to determine what assessment looks like in topics that are by their nature team-oriented and project-based. Bringing CS curriculum from the outside into the mainstream classroom depends on these balances being struck.

For a standards-based curriculum (CSTA standards for grades 6-8), please see my textbook, Computer Science for Kids (https://cs4kids.club) with downloadable lesson plans.

References

Corbett, C. & Hill, C. (2015). Solving the Equation: The Variables for Women’s Success in Engineering and Computing. AAUW. https://www.aauw.org/app/uploads/2020/03/Solving-the-Equation-report-nsa.pdf

Dee, T. (2007). Teachers and the Gender Gaps in Student Achievement. The Journal of Human Resources, 42(3):528-554.

Freeman, Catherine E. (2004). Trends in Educational Equity of Girls and Women: 2004. U.S. Department of Education, National Center of Education Statistics.

Koonce, G. L. (2020). Are Truly Democratic Classrooms Possible? Taking Sides: Clashing Views on Educational Issues (20th ed., pp. 77–89). McGraw-Hill Education.

Loveless, Tom. (2012) The Common Core Initiative: What Are the Chances of Success? Educational Leadership, 70(4):60-63.