惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

WordPress大学
WordPress大学
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
博客园 - 三生石上(FineUI控件)
雷峰网
雷峰网
爱范儿
爱范儿
P
Proofpoint News Feed
Security Archives - TechRepublic
Security Archives - TechRepublic
Latest news
Latest news
The Hacker News
The Hacker News
Cyberwarzone
Cyberwarzone
博客园 - 【当耐特】
Project Zero
Project Zero
小众软件
小众软件
T
Tailwind CSS Blog
量子位
博客园 - 聂微东
I
Intezer
美团技术团队
S
SegmentFault 最新的问题
T
Tor Project blog
Spread Privacy
Spread Privacy
V
Vulnerabilities – Threatpost
Exploit-DB.com RSS Feed
Exploit-DB.com RSS Feed
Jina AI
Jina AI
罗磊的独立博客
B
Blog RSS Feed
K
KPMG report finds enterprise disconnect between AI and its ROI | CIO
T
Troy Hunt's Blog
有赞技术团队
有赞技术团队
Google DeepMind News
Google DeepMind News
宝玉的分享
宝玉的分享
C
Cisco Blogs
L
LINUX DO - 热门话题
Last Week in AI
Last Week in AI
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
AI
AI
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
Microsoft Azure Blog
Microsoft Azure Blog
L
LINUX DO - 最新话题
Know Your Adversary
Know Your Adversary
GbyAI
GbyAI
Engineering at Meta
Engineering at Meta
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
Recent Commits to openclaw:main
Recent Commits to openclaw:main
L
Lohrmann on Cybersecurity
The Register - Security
The Register - Security
L
LangChain Blog
博客园 - 叶小钗
T
Tenable Blog
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC

Codrops

ZERO: The Engineering Behind a Defiant Interactive Narrative | Codrops Meet the Speakers of the First Three.js Conference | Codrops The Architecture Behind Trionn: Coordinating GSAP, Three.js, Lenis, and Web Audio | Codrops Where Stories Become Interactive Worlds: How makemepulse Brings Ideas to Life Across Web, XR, and Beyond | Codrops The Sleepers: Creating an Atmospheric WebGL Experience with Lightweight Techniques Building an Interactive Wave Propagation Cube Grid with Three.js | Codrops Ten Years Away: Designing an Interactive Comic for Studio375’s Tenth Anniversary | Codrops Building a Scroll-Driven 3D Gallery Using a Blender Camera Path with Three.js and GSAP | Codrops From Years of Client Work to a Next.js + Sanity Starter Kit | Codrops Sculpting a Digital Athlete: Capturing Stefanos Tsitsipas Beyond the Court | Codrops Building Persistent Page Transitions with WebGPU and Vanilla JavaScript | Codrops Inside Bisous: Designing an Editorial Experience for Cinematic CGI | Codrops Engineering the Web Experience Behind Shopify’s Spring ’26 Edition: Everywhere | Codrops Shaping Stories into Experience: The Work of Kevin Lam | Codrops Testing What Users Actually See with Vitest and Chromatic | Codrops Podium: Building a Website Where Running Becomes Storytelling | Codrops Designing Beyond the Surface: How DashDigital Turns Complexity into Clarity | Codrops Creative Entrepreneurship: Designing the Machine | Codrops Exploring 3D Image Rotations on Scroll | Codrops Always Building, Always Learning: Cyd Stumpel’s Journey Through the Modern Web | Codrops Designing A Better Lou: Reducing Cognitive Load Through Design, Content, and Systems | Codrops Sketching the Impossible: A 3D Portfolio Built Without a Single 3D Model | Codrops Building Horeca: Advanced Motion Design in Webflow Without the Performance Trade-Offs | Codrops Building an Interactive Digital Stamp Collection with Shaders, Postcards, and Playful Inspection | Codrops No Two Paths Alike: Inside San Rita’s Approach to Digital Experiences | Codrops Creating a Thumbnail Flow Animation with GSAP MotionPath | Codrops Forging Her Own Path: Houmahani Kane’s Journey in Creative Development | Codrops Beaucoup and the Pursuit of Memorable Experiences | Codrops The Future of Emotional Technology: Comfort Websites for Growth and Self-Awareness | Codrops The Never Ending Story: Building a Seamless Infinite Scroll Experience with GSAP & Lenis | Codrops Whooshes, Snaps and Shaders: Adrien Vanderpotte and the Feeling of the Interface | Codrops Building a Scroll-Driven 3D Cube Gallery in Webflow with GSAP | Codrops Creating Scroll-Driven SVG Map Animations with GSAP | Codrops Made With Gsap: Building a Fun Gravity-Based Mouse Trail | Codrops 80s Business Tech and Seamless Scene Transitions: Inside Shader.se’s Scroll-Driven WebGPU Pipeline | Codrops Merlin: The Code Boutique Turning Motion Into Digital Magic | Codrops Designing Ourselves: The New Obys Identity and Website | Codrops Exploring the HTML-in-Canvas Proposal | Codrops Le:mma Studio: Building the Feeling Behind the Screen | Codrops From Shader Uniforms to Clip-Path Wipes: How GSAP Drives My Portfolio | Codrops Reverse-Engineering Claude AI’s Mascot Animations with SVG and GSAP | Codrops Akaru: Crafting Precision-Driven Digital Experiences | Codrops Designing Against the Gallery: A Two-Year Journey to a Layered Portfolio Experience | Codrops Between Human and Machine: Sofia Papadopoulou’s Approach to Augmented Creativity | Codrops More Than a Portfolio: Building a Scroll-Driven 3D World with Something to Say | Codrops Rhumb Studio: Small but Mighty, Shaped by Curiosity | Codrops Susurrus: Crafting a Cozy Watercolor World with Three.js and Shaders | Codrops Building 4WIDE: Turning Distortion, Blur, and Motion into a Coherent Experience | Codrops A Playful Clip Menu with GSAP’s easeReverse | Codrops False Earth: From WebGL Limits to a WebGPU-Driven World | Codrops Interactive Storytelling for the Web: Building Immersive Stories with Timelines, 3D, and Layered Scenes | Codrops The Art of Complex Motion: Corentin Bernadou’s World of Shaders and Experimentation | Codrops They Call Me Giulio: The Making of a Cinematic Cyberpunk Portfolio | Codrops Lusion: Where Digital Craft Meets Ambitious Experimentation | Codrops The Exat Microsite: Pushing a Typography Showcase to New Creative Extremes | Codrops A Single DM, a First SOTD, and the Start of Chanh M. Ho’s Creative Journey | Codrops Creating Custom Page Transitions in Astro with Barba.js and GSAP | Codrops R—K ’26: The Thinking and Code Behind a Portfolio Led by Presence | Codrops Building the Maxima Therapy Website: React, GSAP, and Dabbling with AI | Codrops Where Engineering Meets Craft: Edoardo Lunardi’s Obsession with the Details | Codrops Animating 160,000 Cubes in Three.js to Visualize Dithering | Codrops Arnaud Rocca’s Portfolio: From a GSAP-Powered Motion System to Fluid WebGL | Codrops Where Confidence Needs No Decoration: The Malvah.Studio Story | Codrops Motion Highlights #17 | Codrops
The Making of the New Lesse Studio Website: Clarity, Performance, and Intentionality | Codrops
By Diogo Andrea · 2026-06-05 · via Codrops

Lesse Studio was founded five years ago in Bali. Back then, we were a small team figuring things out as we went, delivering projects across many different frameworks, experimenting with different ways of working, and learning at least as much from our failures as from our successes. A lot has changed since then. We relocated to Italy, grew the team, and gradually developed a clearer understanding of how we wanted to work and what we truly valued in our technology stack.

The Challenge

Our previous website leaned heavily into visual experimentation. It was atmospheric, expressive, and very much a reflection of where the studio was creatively at the time. We liked it. But over time, it became clear that liking your own website and having it actually work for your clients are two very different things. Navigation was loose, important information was harder to find than it should have been, and the overall experience, while visually interesting, wasn’t always comfortable for someone simply trying to understand what we do and whether we’re the right fit.

The core challenge of the new website was finding the right balance between creativity and functionality. We wanted to preserve the emotional and artistic essence of the brand while building something that naturally guides people through the experience. That’s a harder problem than it sounds, because the temptation during a redesign is either to play it safe and lose the brand’s identity or to double down on the art direction and end up with the same usability issues all over again.

Simpler service display.

The Solution

We redesigned the structure with a stronger focus on clarity and user flow, simplifying navigation and creating more intuitive paths throughout the site. We also made it easier to access the inquiry form and find information about our process at multiple points along the journey, because a beautiful website that makes it difficult to get in touch is ultimately failing at its purpose.

At the same time, it was important that the result still felt like us. Through refined typography, intentional layouts, minimal interactions, and subtle motion, we preserved the sense of atmosphere and creative energy that defines Lesse Studio. The visual identity remained intact. We simply stopped making people work to experience it. Creativity and functionality don’t have to be in conflict, and this rebuild was our way of proving that to ourselves.

Our solution to an easier navigation.

The Path to Optimization

One of the biggest turning points came last year when we decided to move away from cloud providers entirely. We had been running heavier services on AWS and deploying simpler websites on Vercel, like most studios of our size. It worked, but we were paying for convenience we didn’t fully need, and we had less control than we wanted. So we made the move to self-hosting everything on our own servers.

When you go down that road, you quickly find yourself facing two paths: you either burn out managing the complexity, security, and deployment pipelines, or you become completely addicted to it. We fell firmly into the second camp. One by one, every piece of our infrastructure moved in-house, and when the dust settled, our maintenance costs had dropped by orders of magnitude.

But something else happened, too. When you’re responsible for everything, you start thinking differently. You find yourself constantly asking whether you can squeeze one more instance into 16GB of RAM, whether a service really needs to be that heavy, and whether there’s a leaner way to achieve the same result. That mindset is what got our team obsessed with optimization.

It showed up first on the backend. We rewrote some of our services in Go and Rust, and the difference compared to our previous Node.js and Django setups was staggering, not marginal gains, but efficiency improvements on a completely different scale. We were running more, spending less, and sleeping better (Rust really doesn’t break).

But there was an elephant in the room that we had been ignoring for a long time. All of our frontend applications were still built with Next.js, Vue, Angular, or similar virtual DOM-based frameworks. On our own servers, the cost of that choice became impossible to ignore. A single Next.js instance could consume 500MB of RAM, especially when paired with an Express.js layer handling basic CMS functionality. Ten high-traffic websites consuming a minimum of 5GB between them—that’s not a performance concern; it’s a structural problem.

So we started asking the question we should have asked much sooner: what should we be using instead?

I had heard of Svelte and SolidJS before. Svelte, in particular, had a reputation for being loved by almost everyone who used it. I knew it was lightweight, but I had never taken the time to fully understand why. So I decided to give it a try. What I found felt almost too good to be true: a framework that compiles down to precise, efficient JavaScript with no virtual DOM, no heavy runtime, and no bloated bundles. For a team that had spent the past year obsessing over RAM usage and efficiency, it felt like the missing piece of the puzzle.

We decided to use it for the next two projects we had lined up, simply to see how it would hold up in practice. It was an immediate success. Where our Next.js instances had been sitting at around 500MB of RAM under load, Svelte came in at roughly 30MB, and replacing Node.js with Bun reduced that even further, bringing it closer to 20MB. The numbers were clearly speaking for themselves.

Svelte consuming up to 10x less resources.

So when it came time to rebuild our own agency website, the decision was easy. We chose SvelteKit and treated the project as a genuine experiment, not just a migration, but an opportunity to push the stack as far as we could. Everything runs within a single instance: a private CMS built directly into SvelteKit’s API layer for content management, Drizzle as a lightweight ORM for data storage, and all animations written from scratch without relying on a single animation library. Images are automatically converted to WebP during the upload pipeline and served through Cloudflare R2. Load times are fast, the footprint is small, and we have full control over every layer of the system.

The architecture itself is deliberately minimal. SvelteKit handles both the frontend and the server-side logic within a single process, which means no separate API layer, no additional network latency, and one less service to monitor. Routing, rendering, and data fetching all live together, and because SvelteKit’s server-side rendering compiles to plain JavaScript without virtual DOM overhead, the HTML that reaches the browser is already complete. There are no client-side hydration waterfalls and no layout shifts while JavaScript catches up with the markup.

For the CMS, we built our own. It’s nothing particularly complex, just a straightforward admin interface backed by Drizzle ORM on top of SQLite. The choice of SQLite is worth mentioning because it often surprises people. But for a content-driven site with predictable read patterns and no need for large-scale concurrent writes, SQLite is genuinely the right tool. It runs in-process, requires zero network overhead for queries, and stores the entire database in a single file on disk. Drizzle keeps the query layer type-safe without introducing the abstraction cost of heavier ORMs like Prisma, which can be unnecessarily heavyweight for projects of this scale.

Images were one of the first areas we optimized. Every asset uploaded through the CMS is automatically converted to WebP before it ever reaches storage—no manual export steps and no inconsistencies between editors. From there, files are sent directly to Cloudflare R2 and served from the edge without ever passing through our application instance again. After upload, the server never touches an image a second time.

Animations were another deliberate decision. Most teams reach for GSAP or Framer Motion without much discussion. They’re excellent libraries, but they come with a cost. Since Svelte ships with a built-in transition system and use: actions handle scroll-based triggers cleanly, we chose to write everything ourselves. The result is animation code that is fully tree-shakable and contributes nothing to the bundle unless it is actually used on a specific page.

Under real traffic, the server instance comfortably sits between 25MB and 40MB of RAM. None of that happened by accident. It came from treating every dependency as a cost rather than a default, and only paying that cost when there was a clear reason to do so.

That’s ultimately what a year of self-hosting taught us. When you can see exactly what each process costs, you stop thinking of frontend code as something that simply runs in the browser and start thinking of it as infrastructure. And once that shift happens, the question is no longer “Can we use this?” but rather, “Do we actually need it?”

Svelte fit naturally into that mindset. Not because it’s the trendiest choice or the framework backed by the biggest company, but because it follows the same principle we had already built everything else around: ship only what is necessary, and make what you ship count.

The browser benefits from it. The server benefits from it. And, ultimately, so does the planet.