For the past four+ years, I’ve embraced the life of a digital nomad, traveling the world while delivering top-notch 3D visualization services to businesses globally. This unique lifestyle has not only broadened my creative horizons but also enabled me to collaborate with a diverse range of clients, understanding their unique needs and cultures.
+
My passion lies in transforming your products into realistic, precise, and captivating 3D visuals that elevate your online presence. Whether you’re a small business with a single product or an online shop with a curated selection of quality items, I’m here to help your products shine.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
My Story
+
+
+
+
+
+
+
+
+
After 15+ years in coding, including many years in web agencies, I shifted gears to combine my love for 3D art with building fast, sleek websites. Now, I bring both worlds together—creating detailed 3D visuals and designing snappy JAMstack sites and SPAs. I’ve worked with companies of all sizes on projects ranging from immersive product visualizations to streamlined web experiences.
+
Based in the lovely Vulkaneifel near Cologne, Germany, I’m here to help you bring your ideas to life. Have a look around, and let’s team up to make some digital magic—no biggie, just cool stuff.
+
For me, it’s all about learning, experimenting, and having fun. So, whether we create something unforgettable or just share a laugh trying, let’s make it worth it!
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
My journey is all about learning new things and having fun. Let’s team up and create something amazing, or at least have a laugh trying!
This is where I share things I’m working on, tech I’m experimenting with, and thoughts on the tools and workflows I use. It’s not a tutorial site, and I’m not here to tell you how to live your life — just documenting my process, insights, and occasional frustrations with all things tech and design.
Coding with AI agents: why using Cline with Claude 3.5 Sonnet will drain your wallet
+
Let’s talk about AI agents for coding. Specifically, let’s talk about Cline, paired with Claude 3.5 Sonnet. Sounds fancy, right? It should be, given the price tag that comes with it. So why exactly is it so damn expensive? Let’s break it down.
+
The cost of Claude 3.5 Sonnet itself 💸
+
First things first: Claude 3.5 isn’t cheap. AI language models like Claude 3.5 are built to handle massive workloads, process tons of text, and provide human-like responses. But all that processing power comes with a hefty bill.
+
Here’s the basic math:
+
// Example token usage
+const prompt = "Debug this function: function add(a, b) { return a + b; }";
+const response = ai.process(prompt);
+console.log(`Tokens used: ${prompt.length + response.length}`);
+
+
You pay per token. Tokens are chunks of text that the AI processes — a token could be a word, a punctuation mark, or even just a space. Most AI APIs use a pay-as-you-go model. You pay for both input tokens (what you send to the AI) and output tokens (what the AI sends back). Usage adds up fast, especially when you’re coding large snippets and asking for detailed explanations.
+
Why AI agents like Cline burn through tokens
+
Cline doesn’t just send one query and call it a day. It acts like your AI coding buddy, constantly asking the model for updates, clarifications, and context switches. This makes it more effective, sure — but also more expensive.
+
# Example of continuous prompts
+while debugging:
+ cline.send("What’s wrong with this code?")
+ cline.receive()
+
+
Think about it: each back-and-forth interaction costs tokens. AI agents like Cline keep a detailed memory of your entire session. More memory means more tokens. Every time you ask Cline to improve code, add comments, or optimize a function, it sends another query.
+
How token usage translates into money
+
To really understand why this is expensive, you need to know how AI usage is billed:
+
+
Input tokens: When you ask the AI something, the entire prompt is counted as input tokens. This includes your instructions, any code snippets you provide, and any additional context the AI needs to understand your request.
+
Output tokens: When the AI responds, every word, punctuation mark, and space counts as output tokens. So a long-winded response from the AI costs more than a short, direct answer.
+
+
Example interaction:
+
const prompt = "Please debug the following code...";
+const response = cline.sendToAI(prompt);
+console.log(`Cost: ${(prompt.length + response.length) * 0.0001} USD`);
+
+
Multiply that by the dozens (or hundreds) of interactions you might have in a single coding session. It’s easy to see how you can burn through tens of thousands of tokens in a day.
+
Hidden costs: paying for AI’s indecision
+
Ever noticed how AI agents sometimes give you a solution and then a second later change their minds?
+
“Here’s the optimal code.”
+
…Actually, wait, here’s a better version.
+
This indecision isn’t free. Every tweak, suggestion, or improvement costs tokens. It’s like hiring a consultant who bills you by the minute while they brainstorm in front of you.
+
Additionally, AI models tend to err on the side of verbosity. They like to explain their reasoning in detail, provide alternatives, and cover edge cases. While this is helpful, it also means you’re paying for a lot of unnecessary information.
+
Token inflation: long responses are pricey
+
Let’s face it: AI models love to talk. When you ask for a code snippet, they don’t just give you the code. They explain it. In detail. Then they add comments. And maybe a little disclaimer about best practices.
+
function example() {
+ console.log("Here’s a complete solution with five alternative methods, detailed comments, and an explanation of time complexity.");
+}
+
+
Guess what? You’re paying for every single word.
+
Why Cline needs more tokens than other AI tools
+
Cline operates as a coding companion. It’s not a one-and-done solution; it’s meant to guide you through the entire coding process.
+
Here’s why it burns through more tokens than a simple AI chatbot:
+
+
Step-by-step guidance: Cline doesn’t just give you a final answer. It helps you troubleshoot, debug, and improve your code in real time.
+
Session persistence: The longer your coding session, the more context the AI needs to retain. That context must be included in every prompt to ensure accurate responses.
+
Iterative process: Coding often involves multiple iterations. Each iteration requires new prompts and responses, leading to exponential token usage.
+
+
The alternative: paying with your time
+
Sure, you could argue that AI agents save time. But there’s a point where the costs outweigh the benefits. If you’re spending thousands of dollars a month for an AI to optimize your code, you have to ask yourself:
+
Would it be cheaper to just figure it out yourself?
+
The answer might surprise you. Coding without AI takes more time, but in some cases, it’s way more cost-effective.
+
+“The most expensive code is the code you don’t understand. Relying too much on AI can quickly become a financial black hole.”
+
+
Practical tips to reduce AI costs
+
If you’re committed to using Cline with Claude 3.5, here are a few ways to keep costs under control:
+
+
Limit context size: Avoid including your entire project in every prompt. Trim down the context to what’s strictly necessary.
+
Use specific queries: Be concise with your prompts. The more specific you are, the shorter the AI’s response will be.
+
Avoid verbosity: If the AI starts over-explaining, cut it off. Politely ask for more concise responses.
+
Batch tasks: Instead of asking for small changes one at a time, group similar tasks together in a single query.
+
+
Conclusion: Is Cline with Claude 3.5 worth it?
+
If you’ve got deep pockets or a corporate budget to burn, go for it. Cline with Claude 3.5 Sonnet can be a powerful tool for productivity. But if you’re a solo dev or a small startup? Think twice before committing.
+
Unless you’re ready to sell a kidney to pay for those tokens, maybe stick to coding the old-fashioned way — with some coffee and a bit of swearing.
Test-Driven Development (TDD) is already a proven method to improve code quality and maintainability. But what if you could also use TDD to reduce your AI usage costs? Spoiler: You can. By leveraging unit tests and integration tests, you can teach the AI more efficiently and reduce the number of prompts it requires.
+
Here’s how.
+
Why TDD saves money when using AI
+
When you work with AI agents like Cline or Claude 3.5, you’re charged for every token you send and receive. Each prompt costs money, and every response from the AI eats into your budget. However, when you incorporate TDD, you provide the AI with a clear framework to follow. Instead of explaining every tiny detail, you let your tests do the talking.
+
AI can read your tests
+
One of the coolest things about AI is that it can read and understand your codebase, including your tests. By writing comprehensive unit and integration tests, you give the AI a way to infer what your code should do without needing you to explain it repeatedly.
+
Example:
+
// Unit test
+describe('add', () => {
+ it('should return the sum of two numbers', () => {
+ expect(add(1, 2)).toBe(3);
+ });
+});
+
+
Instead of saying, “Make sure the add function returns the sum of two numbers”, you simply ask the AI to ensure the function passes all tests. This drastically reduces your input tokens.
+
Sample prompt to AI:
+
"Fix the add function so that it passes all the unit tests."
+
+
Sample output from the AI:
+
function add(a, b) {
+ return a + b;
+}
+
+
The AI understands the requirements from the test and provides a correct implementation without needing a long explanation.
+
Unit tests: your cost-saving friend
+
Unit tests cover individual functions or components. They are small, fast, and easy to write. Here’s why they’re critical for saving money:
+
+
AI can use them as a reference: If the AI knows that your function must pass a set of tests, it will optimize the code accordingly.
+
Less back-and-forth: Instead of repeatedly correcting the AI’s output, you can point it to the tests and say, “Make it pass these”.
+
+
Example prompt:
+
"Fix the add function to pass all tests."
+
+
This is much cheaper than explaining each requirement separately.
+
Example scenario
+
Let’s say you have a buggy function:
+
function add(a, b) {
+ return a - b;
+}
+
+
Without tests, you’d need to tell the AI what’s wrong. With tests, you just say:
+
+“Make it pass the existing unit tests.”
+
+
Sample output from the AI:
+
function add(a, b) {
+ return a + b;
+}
+
+
Integration tests: handling complex scenarios
+
Integration tests ensure that different parts of your application work together as expected. These tests cover more complex use cases and are particularly useful when working with APIs or databases.
+
For example:
+
// Integration test
+describe('User Service', () => {
+ it('should create a new user and fetch it from the database', async () => {
+ const user = await userService.createUser({ name: 'Alice' });
+ const fetchedUser = await userService.getUser(user.id);
+ expect(fetchedUser.name).toBe('Alice');
+ });
+});
+
+
Sample prompt to AI:
+
"Ensure the userService passes all integration tests."
+
+
Sample output from the AI:
+
async function createUser(userData) {
+ const newUser = await database.insert(userData);
+ return newUser;
+}
+
+async function getUser(userId) {
+ const user = await database.findById(userId);
+ return user;
+}
+
+
With a test like this in place, you don’t need to describe the entire flow to the AI. The AI reads the test and fixes the implementation accordingly.
+
AI-driven development with tests
+
Here’s how you can integrate TDD into your AI workflow:
+
+
Write tests first: Start by writing unit and integration tests for the functionality you need.
+
Ask the AI to implement the code: Instead of lengthy prompts, simply instruct the AI to make the code pass all the tests.
+
Refactor using tests: When you want to optimize or refactor code, let the AI know that the code must continue to pass the existing tests.
+
+
Saving money with smarter AI usage
+
By using tests as a guide for the AI, you reduce the need for detailed prompts and back-and-forth interactions. This leads to:
+
+
Fewer tokens consumed: Shorter, more concise prompts mean fewer input tokens.
+
Less verbose responses: The AI doesn’t need to over-explain when it has clear tests to reference.
+
Higher accuracy: The AI delivers better results because it has a concrete set of rules to follow.
+
+
Real-world example: debugging with TDD
+
Imagine you have a buggy piece of code that calculates discounts:
Using TDD with AI isn’t just good for your codebase — it’s good for your wallet. By writing comprehensive unit and integration tests, you can reduce your AI usage costs, streamline your workflow, and get better results with fewer prompts.
+
In the end, letting your tests do the talking is a smarter, more efficient way to collaborate with AI. And let’s be honest — who doesn’t want to save money while coding?
Building My First MacOS App: 100% AI-Created Render Manager
+
For the first time ever, I ventured into creating an app for MacOS, and the craziest part? It was entirely built by AI. I didn’t write a single line of code myself. Of course, my background in software development was invaluable in guiding the process, but it’s absolutely insane what’s possible with AI today.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Why a Render Manager?
+
Rendering complex 3D scenes in Blender is a demanding process, and existing render managers often lack the specific features or flexibility needed for personal workflows. As a Blender user on MacOS, I struggled to find a solution that integrated seamlessly with my tools, offered customizability, and streamlined rendering tasks. This app was born out of necessity, and its development highlights both the capabilities and limitations of AI-assisted programming.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
About the App
+
The app is a render manager specifically made for MacOS. Why? Because I couldn’t find an existing solution that met my needs. Here’s what it does so far:
+
– 📦 Drag and Drop: Easily add Blender files to the render queue.
+– 🔐 Blender Addon: Integrates directly with Blender’s render menu for seamless file addition.
+– 🔅 Configurable Settings: Full control over render configurations.
+– ⏹ Mid-Process Stop: Ability to halt rendering at any point.
+– 🔧 Custom Output Paths: Define output paths and naming patterns.
+– 🔄 Auto Retry: Retries failed renders automatically with customizable attempts.
+– 🚀 TurboRender Support: Compatibility with advanced features like Temporal Denoising.
+– 📱 Telegram Integration: Remote monitoring and control via Telegram.
+– ⚙️ Command-Line Parameters: Support for custom Blender CLI commands.
+– 🏠 Factory Settings: A troubleshooting mode for resetting configurations.
+– 🎯 Scene Selection: Select scenes and cameras per project.
+– 📁 Organized Outputs: Flexible file organization using pattern variables.
+– 🔍 Real-Time Monitoring: Track render progress live.
+– 📊 Detailed Logs: Comprehensive render logs and error reporting.
+– 🎮 Frame Control: Define start, end, and step values for frame ranges.
+– 🎨 Multi-Scene Support: Manage individual settings for multiple scenes.
+– 🔄 Automatic Data Fetching: Seamlessly retrieves scene data.
+– 📸 Camera Selection: Choose cameras for specific scenes.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Building with AI: Insights and Tips
+
Patience Is Key
+
Working with AI requires a lot of patience. It’s also not cheap—each request incurs a cost, and the AI often makes errors. Without version control like Git, the process would be chaotic. Sometimes, the AI replaces sections of code with placeholder comments, so reverting changes is critical. Using Git or similar tools is non-negotiable when relying heavily on AI-generated code.
+
Splitting Tasks
+
When working with AI, break down your tasks into small, manageable chunks. This minimizes misunderstandings and helps the AI focus on specific objectives. Restarting chats frequently to maintain instruction clarity also helps.
+
Debug Logs Are Crucial
+
It’s essential to let AI create as many debug logs as possible. You’ll often find yourself copying logs into the AI to provide context for what went wrong. This iterative debugging process is vital for resolving issues efficiently.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Where AI Excels
+
– Refactoring: AI handles refactoring impressively well, turning messy code into clean, maintainable structures.
+– File Splitting: Breaking down large files into smaller ones is essential for managing AI costs and reducing errors.
+– Prototyping: Quickly generating boilerplate code or testing ideas is where AI shines.
+
Challenges
+
– Instruction Fatigue: The longer a chat continues, the more the AI seems to ignore custom instructions. Restarting the chat frequently and focusing on small, manageable tasks helps.
+– Test-Driven Development (TDD): TDD didn’t work as smoothly as expected. However, when this improves, coding with AI will likely reach a whole new level, enabling faster iteration with automated unit tests and quick fixes.
+
Cost Management
+
AI tools incur costs for every request. To keep expenses under control:
+1. Plan Ahead: Draft clear, concise instructions before interacting with the AI.
+2. Optimize Code: Use modular design to reduce the complexity of individual AI tasks.
+3. Test Locally: Minimize back-and-forth iterations by testing generated code locally.
+
Moving Forward
+
If you’re a Blender user on MacOS, this app might be interesting for you. Since it’s built with Flutter, I plan to port it to Windows and Linux soon. Expanding the app’s reach will involve addressing cross-platform nuances and optimizing performance.
+
Tools and Setup
+
I utilized VS Code alongside Cline and Claude for this project. These tools provided a collaborative environment for AI-assisted coding, although their performance varied. Integrating a robust IDE setup and automation tools can significantly streamline AI development workflows.
I created my first native app and now I know what I hate about web development
+
So, I finally did it. After years of wrangling with web development—the land of never-ending “next sprints” and “feature enhancements”—I created my first native app. And guess what? It’s like stepping out of a chaotic family dinner into a zen garden. Don’t get me wrong, I’ll always have a complicated love-hate relationship with web dev (it’s like that one ex who keeps texting you), but native app development? That’s a whole different story.
+
Why web development feels like a treadmill
+
Web dev is a never-ending loop. You launch something, and before you can celebrate, there’s a new feature request, an unexpected bug report, or a browser update that breaks everything (hi, Safari).
+
Here’s my favorite kind of chaos:
+
// Start with something simple
+function fetchData() {
+ return fetch('/api/data')
+ .then(response => response.json())
+ .then(data => console.log(data));
+}
+
+// A week later... "Add caching, please."
+function fetchDataWithCache() {
+ if (localStorage.getItem('data')) {
+ return Promise.resolve(JSON.parse(localStorage.getItem('data')));
+ }
+
+ return fetch('/api/data')
+ .then(response => response.json())
+ .then(data => {
+ localStorage.setItem('data', JSON.stringify(data));
+ return data;
+ });
+}
+
+// Two weeks later... "What if the user is offline?"
+
It’s exhausting. There’s no finish line—just more work. Every bug you fix or feature you add feels like slapping duct tape on a moving train. No matter how much you polish, there’s always something new to break.
+
Why native apps feel different
+
When I started building my native app, I wasn’t sure what to expect. Would it be another endless project? Nope. It actually felt… complete. Like putting together a puzzle and placing the final piece.
+
Here’s the kind of simplicity I’m talking about:
+
// A straightforward Swift function
+func calculateSum(_ numbers: [Int]) -> Int {
+ return numbers.reduce(0, +)
+}
+
+let result = calculateSum([1, 2, 3, 4, 5])
+print(result) // Output: 15
+
No “what if” scenarios. No hacks for obscure devices. Just clean, functional code. When it worked, it worked. Done.
+
Okay, fine, debugging in Xcode made me want to throw my laptop across the room, but that’s just part of the charm, right?
+
It’s not all sunshine and rainbows
+
Don’t get me wrong, native apps have their quirks. Submitting to the App Store is like jumping through flaming hoops while juggling knives. And let’s not even talk about provisioning profiles. But these hurdles feel… purposeful. They’re one-time struggles, not the constant maintenance hamster wheel of web development.
+
The beauty of being “done”
+
When my app was finished, I actually got to sit back and enjoy the work. That’s the thing with native apps—you can reach a point where you call it “done.” Sure, there might be updates down the road, but it’s not the endless treadmill of tweaks, patches, and performance optimizations.
+
Web development? It’s like trying to keep a house clean while someone keeps throwing mud through the windows. Native development? It’s more like building a cabin in the woods. Once it’s done, you get to step back and admire your work (until the bears show up, aka OS updates).
+
So, what now?
+
Does this mean I’m ditching web development? Nah. It’s still part of what I do. But I’ll definitely think twice before signing up for another “small” web project that spirals into a three-year commitment.
+
For now, I’m just going to bask in the joy of having built something that I can call “finished.” Well, at least until I decide it needs dark mode…
So, let me come clean. I wrote a blog post a while back where I basically said that Test Driven Development (TDD) with AI isn’t that great. I was smug, I was sure of myself, and I was… very wrong. 🫠 But hey, growth is about admitting mistakes, right? And here I am, ready to eat my words (with some spicy Cheetos on the side) and tell you why I now think TDD is the only way to develop with AI.
+
And it all started with a new VSCode extension I stumbled upon called Cline.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Enter Cline: Your AI pair programmer (without the coffee addiction)
+
If you haven’t heard about Cline, it’s an AI agent that integrates directly into VSCode. Think of it as your slightly overconfident but genuinely helpful coding buddy. Cline doesn’t just spit out code suggestions; it actually understands your context, offers real-time feedback, and can run tests as you code.
+
Here’s the kicker: It’s like having a TDD coach sitting on your shoulder, whispering, “Are you sure that function works? Maybe write a test first, you chaotic human.”
+
And it turns out, that’s exactly what I needed. 😅
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Why my initial take on TDD with AI sucked
+
In my previous post (which I won’t link because no one needs to see that trainwreck), I basically argued that using AI for TDD was overkill. I mean, why write tests first when the AI can just generate code for you, right? Let the machine do the heavy lifting!
+
Yeah, no.
+
The problem with that approach? AI gets confused. It doesn’t know what you really want unless you give it constant feedback. You have to describe every edge case, every possible input… and at that point, you might as well write the tests first.
+
Without tests, you’re in this endless loop of:
+
+
AI generates code.
+
You run the code.
+
It crashes.
+
You go back to step 1.
+
+
Fun? Not really.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
How Cline changed the game
+
The beauty of Cline is that it flips this process on its head. Instead of treating AI like some magical genie that grants your coding wishes, Cline encourages you to treat it like a responsible adult:
+
+
Write a test.
+
Watch as Cline writes the code to pass that test.
+
Instantly see if it works.
+
Refactor, rinse, repeat.
+
+
No more vague instructions. No more confused AI. Just pure, unadulterated feedback loops.
+
And because Cline runs the tests immediately, the AI gets instant feedback. It learns faster. It adjusts quicker. It stops making the same dumb mistakes over and over (unlike me in my pre-coffee coding sessions). ☕
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
The emotional rollercoaster of coding with Cline
+
I’ll be honest: At first, I felt attacked.
+
Cline would pop up with suggestions like, “Your test failed. Want me to fix it?” and I’d think, “No, Cline, I want to wallow in my failure, thanks.” But over time, I realized that this instant feedback is exactly what I needed to break out of my bad habits.
+
Writing tests first felt weird at first, but watching Cline pass those tests in real-time? That was chef’s kiss satisfying. 😌
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Why TDD and AI are a perfect match
+
Here’s the thing: AI doesn’t understand human emotions (yet). It doesn’t care if you’re having a bad day or if your brain is running on 2% battery. It just wants instructions. Clear, precise instructions.
+
And what’s the clearest way to give instructions? Tests.
+
When you write a test, you’re basically telling the AI: “Here’s what I expect. Make it happen.” And because the AI gets that feedback instantly, it’s way less likely to go off on some weird tangent.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
How to get started with Cline
+
If you’re curious (and you should be), here’s how to try Cline for yourself:
Set up your project: Make sure you have a test framework in place (Jest, Mocha, whatever floats your boat).
+
Write your first test: Start simple. Maybe something like:
+
test('adds two numbers', () => {
+ expect(add(2, 3)).toBe(5);
+});
+
+
Watch Cline work its magic: Sit back and let the AI fill in the gaps.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Final thoughts (aka my apology to the TDD gods)
+
To anyone I misled with my previous anti-TDD rant: I’m sorry. I see the light now. 🙏
+
Test Driven Development with AI isn’t just a nice-to-have. It’s a game-changer. And tools like Cline make it easier than ever to adopt this approach.
+
So, go forth and embrace TDD. Let AI be your coding buddy, not your code generator. And if you ever feel like the AI is judging you… well, it probably is. 😈
As a developer, I’ve always been keen to explore new tools that make the process more efficient and enjoyable. AI-driven development is one of those areas that have significantly reshaped how I approach coding. Here are my key learnings from working with AI tools like Cline and VS Code.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Concept Is King
+
One of the biggest lessons I’ve learned is that having a clear concept before starting any development task is crucial. Just like human developers, AI gets confused when there’s no well-defined direction. The difference? Every request to the AI costs money. Without a solid plan, you risk wasting both time and resources. AI tools excel when they have a framework to follow—so give them one.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
AI Can Handle Complex Software Architecture Patterns
+
I’ve been pleasantly surprised by how well AI can deal with advanced software architecture patterns like Clean Architecture. This has been a blessing, especially when tackling larger projects. The AI’s ability to follow these patterns means I can focus on high-level decisions while it takes care of repetitive tasks.
+
Unit Tests: A Double-Edged Sword
+
AI-generated unit tests can be incredibly helpful. However, I’ve noticed that the AI tends to be overly restrictive at times. It’s akin to working with a human developer who insists on covering every edge case, sometimes at the expense of pragmatism. It’s important to strike a balance and intervene when the AI starts overdoing it.
+
Watch for Loops
+
One of the quirks of working with AI is its tendency to get stuck in loops. Whether it’s repeating suggestions or rephrasing the same code, it can become counterproductive. When this happens, it’s crucial to break the loop manually and steer the conversation in a new direction. Resetting the context often helps to get better results.
+
Start New Chats Frequently
+
I’ve learned that starting new chats as often as possible is essential. The more context the AI accumulates, the more expensive it gets, and the quicker it becomes confused. By resetting the chat, you ensure that the AI focuses on the task at hand without being weighed down by previous conversations.
+
Clean Your Open Tabs
+
Another surprising discovery is that AI tools seem to read your open tabs in VS Code. Keeping too many tabs open can lead to confusion, as the AI tries to make sense of everything at once. Before starting a new task, I always clean up my workspace to give the AI a fresh start. It’s a simple habit that can improve the overall experience significantly.
+
Final Thoughts
+
AI-driven development has been a game-changer for me, but it’s not without its quirks. The key to success is maintaining a clear concept, managing context carefully, and not relying too heavily on the AI’s suggestions without human oversight. By following these practices, I’ve been able to make the most of tools like Cline and VS Code, turning AI into a valuable assistant rather than a liability.
I created a 3D commercial for Beard Pride’s beard oil product using Blender. The project involved crafting a photorealistic animation to showcase the product’s features in a visually appealing and engaging way. This commercial combined my skills in product visualization and storytelling through 3D animation.
For the Beisheim Center project, I once again collaborated with Meire&Meire to create a custom CMS using Vue.js. The solution featured a flat file system and live editing functionality, ensuring a seamless content management experience. The project required a focus on flexibility, usability, and scalability, tailored to the specific needs of the center. This work further solidified my expertise in developing bespoke CMS solutions and crafting modern frontend experiences with JavaScript frameworks.
During my time at i22, I collaborated with Meire&Meire to develop a custom CMS solution for the Beisheim Stiftung. The project was built with Vue.js and included a flat file system with live editing capabilities. The focus was on providing a highly flexible and user-friendly content management experience, tailored to the foundation’s specific needs. This project honed my skills in modern JavaScript frameworks and reinforced my ability to create bespoke CMS solutions for unique client requirements.
In 2024, I founded Cable Creations, a company dedicated to creating 3D cable models and photorealistic renders. The website was built using WordPress to provide a clean, professional online presence. This venture allowed me to further develop my expertise in 3D modeling and visualization, focusing on delivering high-quality, detailed product representations for various industries.
For Cable Creations, I created a 3D commercial to promote my own product: 3D MODELS OF CABLES laser engraved into BK7 glass. The project involved crafting a visually striking animation to highlight the unique and intricate details of the glass-engraved cable models, demonstrating both the precision of the engraving process and the aesthetic appeal of the final product.
For Becker & Hüser, I created a detailed 3D cable model labeled as (N)3GHSSYCY. The project required high precision to accurately represent the product’s specifications and aesthetics. The result was a photorealistic render that Becker & Hüser could use for their marketing and product presentations.
While working at Webfactory, I contributed to the “Jugend für Europa” project. My tasks included implementing accessible frontends that met BITV 95+ standards using HTML, CSS, JavaScript, jQuery, Twig, and Symphony. The project focused on creating a user-friendly experience that adhered to strict accessibility guidelines, ensuring the website was both modern and inclusive. This project deepened my understanding of accessibility in web development and taught me how to balance functionality with compliance requirements.
I created the first website for KLZ, where my father is the CEO. The website was built using Next.js and React, providing a modern and responsive online presence for the company. Additionally, KLZ needed 3D models of their cables, which led me to dive deeper into Blender and 3D modeling. This project marked a significant step in my journey into 3D design, allowing me to combine web development with 3D visualization to meet the company’s specific needs.
Mintels was a project idea developed together with my brother, focusing on creating 3D-printed camera gadgets. One of our key products was a custom camera holder for the Skadis pegboard from Ikea. I built the website using Squarespace and made my first experiences with Blender and 3D modeling to create our own product images and prototypes. This project sparked my interest in 3D design and gave me practical insights into product visualization and prototyping.
Photo Passionista is a photography website I created for Marisa’s portrait shooting service. The website was built using WordPress, providing a sleek and user-friendly platform to showcase her photography portfolio. This project combined my skills in web development with a creative focus on presenting visual content in an engaging way.
Product Creations is a joint project with Marisa, focusing on delivering high-quality product photography and 3D commercials. The project combines our creative and technical skills to produce visually engaging content for various brands and industries. This collaboration has allowed me to further expand my expertise in product visualization and storytelling through photography and 3D animation.
At i22, I worked on the service website for Deutsche Telekom’s ICSS. The project involved creating dynamic and accessible frontends using JavaScript, HTML, CSS, and Contao CMS. The focus was on delivering a clean, efficient, and modern design that complied with Deutsche Telekom’s standards. This project allowed me to further refine my skills in content management systems and enterprise-level frontend development.
Another project I contributed to at i22 was the service website for Deutsche Telekom’s Mietershop. My work focused on building responsive and dynamic frontends using jQuery, Ruby on Rails, HTML, CSS, and JavaScript. The goal was to create a user-friendly online shop experience tailored to tenants, ensuring smooth functionality and a modern design. This project further strengthened my skills in crafting scalable, maintainable service websites for enterprise clients.
At i22, I worked on the service website for Deutsche Telekom’s TV Packages. The project involved developing interactive frontends using jQuery, Ruby on Rails, HTML, CSS, and JavaScript. The focus was on delivering a seamless user experience with efficient navigation and responsive design. This project allowed me to broaden my expertise in full-stack web development and understand the importance of creating robust, scalable service websites for large-scale clients.
During my apprenticeship, I had the opportunity to work on real client projects at Webfactory.de. My focus was on building modern frontends using technologies like jQuery, Twig, and Symphony, primarily in phpStorm. The atmosphere at Webfactory was excellent – a motivated team, exciting projects, and plenty of opportunities to learn new things. It was a time when I not only grew technically but also had a lot of fun collaborating with my colleagues. Definitely one of the highlights of my apprenticeship years.
For KLZ, a leader in sustainable energy solutions, I had the exciting opportunity to create a series of 3D renders that showcase their green energy initiatives. This project highlights the intricate details of cable systems, the harmonious integration of nature, and the photorealistic depiction of wind turbines within their natural environment.
I’ll be honest. I wasn’t exactly prowling around looking for a Spotlight replacement. Spotlight was fine — like that crusty old roommate who never cleans up but also never eats your snacks. But then Raycast sauntered into my life, looking all sleek and promising productivity magic, and I thought, “Alright, let’s see if you’re worth the hype.” Spoiler: I’m never going back.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
What hooked me? (aka how I got suckered in)
+
So there I was, aimlessly scrolling through a productivity blog (because why do actual work when you can procrastinate efficiently?), when I stumbled upon Raycast. “Faster than Spotlight! More customizable!” they said. Yeah, sure. But curiosity got the better of me, and I downloaded it. 🤷♂️
+
Setting it up was a breeze — way easier than assembling IKEA furniture. And let me tell you, the first time I searched for an app with Raycast, I nearly cried tears of joy. It was that fast. Like, blink-and-you-miss-it fast.
+
Raycast - Your shortcut to everything
A collection of powerful productivity tools all within an extendable launcher.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Favorite tricks (because who doesn’t love party tricks?)
+
Clipboard history: saving my sanity daily
+
You know that panic when you accidentally copy over something important? Yeah, me too. But Raycast keeps a history of everything you copy. EVERYTHING. It’s like having a personal assistant who remembers all your random thoughts. Need that link from 20 minutes ago? Bam. Got it. 🧠
+
Extensions: the nerdy fun stuff
+
Here’s where things get wild. Raycast has extensions for everything. Want to control Spotify without opening the app? Done. Manage GitHub issues like a boss? Easy. Need a random excuse to avoid meetings? Okay, maybe not that last one — but someone should build it.
+
I love using it to convert videos to webm or images to webp, for example. Just type a few commands, and voilà — file conversion magic happens without needing to open some clunky app. Honestly, it makes me feel like a tech wizard. 🧙♂️
+
Oh, and if you’re feeling adventurous (or just a little too caffeinated), you can even build your own extensions. Go ahead, flex those coding muscles. 💪
+
Snippets: because repetition is boring
+
I’m not a fan of typing the same thing over and over. Who is? With snippets, I save time by creating reusable text bits. Need to drop a quick “Sorry for the delay” email? Snippet. Boom. Done. It’s like having a shortcut to sounding responsible. 😎
+
Window management: bye-bye mouse, hello keyboard
+
You know what’s annoying? Moving windows around with a mouse. Raycast lets me manage windows with shortcuts, and suddenly I feel like a hacker in a Hollywood movie. Move this here, snap that there — all without lifting my hand off the keyboard. Efficiency level: expert.
+
Things that surprised me
+
The command palette. Oh man, this thing is a game-changer. It’s like a Swiss Army knife for your Mac. Want to run a script? Open a folder? Calculate 38 times 42 (because who remembers basic math)? The command palette’s got you.
+
And the customization options? Chef’s kiss. I’ve made Raycast feel like my app, not some generic tool. Themes, shortcuts, scripts — you name it, I’ve probably tweaked it.
+
The not-so-perfect bits
+
Okay, not everything is sunshine and rainbows. The AI features? Meh. They’re like those fancy gadgets you buy and use once. I’m sure they have potential, but right now, they’re just… there.
+
And then there’s the subscription thing for some extensions. I get it, developers need to eat, but it’s something to keep in mind if you’re planning to go extension-crazy.
+
The verdict: love it, flaws and all
+
Raycast is like that cool friend who shows up out of nowhere and makes your life infinitely better. Is it perfect? Nah. But it’s damn close. It’s faster, smarter, and just makes my Mac feel more like mine.
+
Would I recommend it? Absolutely. Just be prepared to get a little too obsessed with tweaking it. And if you see me muttering commands to my Mac like it’s a sentient being — mind your business. 😉
How I can help take your next project to new heights
+
+
+
+
+
+
Product Visualization
+
Want your products to stop people in their tracks? I create striking, photorealistic 3D renders that make every detail pop. These visuals aren’t just for looking at—they’re designed to impress, whether they’re on your website, in a digital ad, or filling the pages of your catalog.
+
Jamstack Websites
+
Small business, big ambitions? I build blazing-fast, secure JAMstack websites that look great, work seamlessly, and help you get online without breaking the bank. Perfect for smaller companies who need a professional website—without the fuss of a massive build.
+
Interactive Landing Pages
+
Ready to turn heads? I design eye-catching, interactive landing pages that don’t just look good—they’re built to convert. Perfect for campaigns, product launches, or any time you need to make an unforgettable first impression.
+
Exhibition Booth Visualizations
+
Get a crystal-clear vision of your event setup before you even set foot in the venue. I design realistic, detailed 3D booth mockups that give you a complete view of your exhibition space—no guessing, no surprises, just total control over how you’ll show up.
+
Product Animations
+
Ditch the static images—give your audience a front-row seat to every product feature with dynamic 3D animations. These aren’t just videos; they’re captivating experiences that tell your product’s story and make it impossible to ignore.
Let’s talk about speed ramping in DaVinci Resolve — you know, that cool effect where time slows down or speeds up smoothly. It adds drama, impact, and excitement to your edits. But let’s be honest, creating speed ramps manually in Resolve is a royal pain. Between the retime curve and Fusion’s time-stretch nodes, it feels like you need a degree in rocket science to get it right. Enter Speed Ramp Pro — the plugin that has saved my sanity (and probably my keyboard from getting smashed).
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Why speed ramping without plugins is a nightmare
+
Before Speed Ramp Pro, speed ramping was the kind of task that made me question my life choices. You’ve got the retime curve, which looks deceptively simple but quickly turns into a mess of keyframes, inconsistent speeds, and lots of trial and error. Then there’s Fusion, where you can use time-stretch nodes. But unless you love spending hours tweaking frame rates and pulling your hair out, it’s not exactly user-friendly.
+
And let’s not even get started on how much time this all takes. Speed ramping manually in Resolve feels like trying to paint a masterpiece with a toothbrush — possible, but painful and unnecessarily complicated.
+
+
Speed Ramp Pro
Speed Ramp Pro — Fast and Easy Speed Ramp Effect for DaVinci Resolve Speed Ramp Pro is an intuitive tool designed to simplify the process of creating the Speed Ramp effect, which allows for smooth…
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Speed Ramp Pro: The plugin I didn’t know I needed
+
Then I discovered Speed Ramp Pro on Videohive, and let me tell you — it’s a game-changer. This plugin makes speed ramping in Resolve stupidly easy. No more fiddling with retime curves, no more Fusion nodes. You apply the effect, choose your preset, and boom — professional-looking speed ramps without the headache.
+
What I love most is the simplicity. You just create a compound clip, apply the Speed Ramp Pro effect, and pick your easing curve or preset. That’s it. The plugin handles all the complicated stuff behind the scenes. It’s like having a little editing wizard sitting in your computer, making sure your speed ramps are buttery smooth.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Real-world usage: How it’s improved my workflow
+
I recently had to edit a high-energy promo video with lots of action shots. Normally, I’d dread the speed ramping process, knowing it would eat up hours of my time. But with Speed Ramp Pro, I knocked out the entire edit in record time. I was able to experiment with different ramping styles without feeling like I was wasting half my day tweaking keyframes.
+
The plugin also has a bunch of presets that make life even easier. Whether you want a gradual ease-in, a dramatic stop-start effect, or something more custom, it’s all there. It’s like having a pre-built toolkit for speed ramps.
+
Is it worth it?
+
Absolutely. For anyone editing in DaVinci Resolve, this plugin is a no-brainer. It’s affordable, easy to use, and saves a ridiculous amount of time. Plus, the results look polished and professional, without the frustration of doing it all manually.
+
If you’re tired of fighting with retime curves and Fusion nodes, do yourself a favor and check out Speed Ramp Pro. It’s one of those tools that makes you wonder how you ever lived without it.
+
In short: Speed Ramp Pro is a blessing. Your edits will thank you. Your keyboard will thank you. And most importantly, you will thank you.
What I love about Clean Architecture (and why I always end up regretting when I don’t use it)
+
Ah, Clean Architecture—the holy grail of software structure, where your code doesn’t just work, it sings. Well, at least until you decide to skip it on a small project, thinking, “This is just a quick thing, I don’t need to over-engineer it.” Famous last words. Let me tell you why I love Clean Architecture, how it saved me from countless headaches, and why I always regret not applying it from day one.
+
Decoupling core logic from external dependencies
+
The core idea behind Clean Architecture is to keep your business logic—the heart of your application—independent of frameworks, databases, and other external services. You know, the stuff that loves to change.
+
Why? Because the moment you tie your core logic to an external dependency, you’ve made your app a ticking time bomb. Need to switch from MySQL to PostgreSQL? Boom. Want to swap out that third-party API? Good luck with that.
+
Clean Architecture makes your core logic oblivious to these changes. The business rules don’t care whether you’re using a fancy cloud database or a local SQLite file. They just do what they’re supposed to do.
+
The Dependency Rule
+
This rule is what makes Clean Architecture clean. Dependencies point inward, never outward. Your core logic should never know about external details like UI frameworks, databases, or other infrastructure. It keeps things neat, predictable, and easy to change.
+
+
+
+
Key Patterns in Clean Architecture
+
1. Use Case Pattern
+
The Use Case represents a specific piece of business logic. It should handle only one action or process.
+
Example: Let’s say we need a CreateOrder use case:
Here, CreateOrderUseCase depends on the IOrderRepository interface, not on any specific database implementation.
+
2. Repository Pattern
+
Repositories handle data persistence. They abstract away the details of how data is stored and retrieved.
+
Example:
+
// IOrderRepository.ts (Interface)
+export interface IOrderRepository {
+ create(request: CreateOrderRequest): Promise<Order>;
+ findById(id: string): Promise<Order | null>;
+}
+
+// OrderRepository.ts (Implementation)
+import { IOrderRepository } from './IOrderRepository';
+import { Order } from '../entities/Order';
+
+export class OrderRepository implements IOrderRepository {
+ async create(request: CreateOrderRequest): Promise<Order> {
+ // Simulate database interaction
+ const order = new Order(request.id, request.items);
+ // Save to DB (simulated)
+ return order;
+ }
+
+ async findById(id: string): Promise<Order | null> {
+ // Simulate DB lookup
+ return new Order(id, []);
+ }
+}
+
Repositories make it easy to switch from one data storage solution to another without affecting the core logic.
+
3. Service Pattern
+
Services handle domain-specific logic that doesn’t belong to a specific entity or repository.
+
Example:
+
// EmailService.ts
+export class EmailService {
+ async sendOrderConfirmation(email: string, orderId: string): Promise<void> {
+ // Simulate sending an email
+ console.log(`Sending order confirmation to ${email} for order ${orderId}`);
+ }
+}
+
A service like EmailService can be injected into a use case to handle tasks like sending notifications.
+
+
+
+
Use Cases: My favorite topic at parties
+
Seriously, I can’t shut up about Use Cases.
+
Use Cases are the core operations of your app. They represent the things your app does. Each use case handles one specific piece of business logic. For example:
+
+
CreateOrderUseCase: Takes an order request and processes it.
Instead of passing around raw strings, you use EmailAddress objects that ensure valid data.
+
+
+
+
Why Clean Architecture is worth it
+
In the end, Clean Architecture is all about making your life easier in the long run. It’s about creating a codebase that you can change, extend, and maintain without tearing your hair out.
+
Sure, it takes discipline to set up. But the peace of mind it brings? Absolutely worth it.
+
So, next time you’re tempted to skip Clean Architecture on a new project, remember this: Today’s quick hack is tomorrow’s legacy nightmare. Choose wisely.
If you’re a TypeScript developer, you’ve probably used default exports at some point. They seem convenient, right? But after a few years of working with both default and named exports, I’ve made a decision: I’m done with default exports. Permanently.
+
Here’s why.
+
Default exports are ambiguous
+
The biggest problem with default exports is that they lack clarity. When you see:
+
import something from './module';
+
What is something? Is it a function? A class? An object? A constant? You have no idea unless you open that file. Compare that to:
+
import { usefulFunction } from './module';
+
Now it’s clear what you’re importing.
+
Default exports hide the intent of your code. When someone else (or future you) looks at the import statement, they’ll have to guess what’s being imported unless they know the module by heart.
+
Refactoring headaches
+
Imagine this scenario: You have a file with a default export function.
+
export default function processOrder(order) {
+ // do something
+}
+
Later, you decide to add another utility function to the file:
+
function validateOrder(order) {
+ // validation logic
+}
+
+export default function processOrder(order) {
+ // do something
+}
+
Oops. Now you need to rename the default export to a named one because you can’t have two default exports. So you do:
+
export { processOrder, validateOrder };
+
Now, you have to update every file that imports processOrder. And if you’re dealing with a large codebase, this can be a nightmare.
+
Had you used named exports from the start, this wouldn’t be a problem. Refactoring would be as simple as adding another named export.
+
Inconsistent imports
+
Default exports can lead to inconsistent import statements. For example:
+
import processOrder from './order-utils';
+import { validateOrder } from './order-utils';
+
Why is one a default import and the other a named import from the same file? It’s confusing.
+
Using named exports makes everything consistent:
+
import { processOrder, validateOrder } from './order-utils';
+
Much cleaner.
+
Better IDE support
+
Most modern IDEs offer auto-completion for named exports. When you type:
+
import { ... } from './module';
+
the IDE will suggest all available exports from that module. With default exports, you don’t get this benefit. You have to remember the exact name of the default export, which is annoying.
+
Easier to identify unused code
+
With named exports, tools like ESLint can easily identify unused imports and exports. With default exports, it’s trickier. The tooling has to assume that the default export might be used in a dynamic way.
+
Named exports make it clear which functions, classes, or constants are actually in use.
+
Better collaboration
+
If you’re working in a team, consistency matters. Using named exports forces everyone to be explicit about what they’re importing and exporting. This leads to fewer misunderstandings and cleaner code reviews.
+
How to migrate from default to named exports
+
If you’ve been using default exports heavily and want to switch, here’s a simple migration strategy:
+
+
Identify default exports: Look for all instances of export default in your codebase.
+
Rename them to named exports: Change them to export const or export function as needed.
+
Update import statements: Replace default imports with named imports across your project.
+
Run tests: Make sure everything still works as expected.
+
+
Final thoughts
+
Default exports aren’t inherently evil, but they introduce more problems than they solve. In TypeScript, where clarity and type safety are key, named exports win every time.
+
So yeah, I’ve abandoned default exports completely. It’s one of those changes that’s made my TypeScript projects cleaner, more maintainable, and less frustrating to work with. And I’m not going back.
If you’re not using value objects in your codebase, you’re missing out on one of the best ways to make your application rock solid and full of meaning. I’m not exaggerating. They’re that good. And here’s the kicker: even if you’re not doing Domain-Driven Design (DDD), you can (and should) still use them. Let me explain why.
+
What Are Value Objects, Anyway?
+
Value objects are simple. They’re objects that:
+
+
Represent a concept or value (think: email address, money, distance).
+
Are immutable.
+
Are equal based on their value, not their identity.
+
+
That’s it. No crazy abstractions. No magic.
+
A value object ensures that data is valid and meaningful right at the core of your application. Instead of juggling raw strings and numbers and praying that “abc@not-an-email” never sneaks into your email validation, a value object wraps that logic in a neat little package. It says: “Either you’re a valid email address, or you don’t exist. Period.”
+
Why Value Objects Are Amazing
+
+
Rock-Solid Validation: Ever had a bug caused by “creative” input data? (Let’s be honest, we all have.) Value objects let you centralize and enforce validation. If you’ve got an Email value object, no invalid email will ever sneak past it. You get instant peace of mind.
+
Expressive Code: Compare this:
+
const email = new Email('marc@example.com');
+user.setEmail(email);
+
With this:
+
user.setEmail('marc@example.com');
+
In the first case, you know that email has been validated and carries meaning. In the second? Well, good luck tracing that string through your app.
+
Immutable Goodness: Value objects can’t change once created. If you need a different email address, you create a new Email object. This makes your code predictable and easier to reason about.
+
Easy Testing: Because value objects encapsulate validation and logic, they’re ridiculously easy to test.
+
Reuse Across Contexts: A value object like Money or Email isn’t tied to a specific domain or framework. You can use it in any app, anywhere.
+
+
Using Value Objects Without DDD
+
Here’s the thing: while value objects are a core concept in DDD, you don’t need to buy into the entire DDD philosophy to benefit from them. They’re just good design.
+
Doing clean architecture? Value objects fit right in with your entities and use cases. Building a simple service? Value objects keep your business logic clean and your data consistent.
+
Example: Email Value Object
+
Here’s a quick example in TypeScript to show how simple and powerful a value object can be:
Identify Recurring Concepts: Look for patterns like “this field needs validation” or “this value gets passed around a lot.”
+
Create Value Objects for Those Concepts: Build small, reusable classes to encapsulate the logic.
+
Refactor Ruthlessly: Replace raw data with your shiny new value objects.
+
+
Conclusion
+
Value objects are one of those rare tools that are simple in concept but profoundly impactful in practice. They make your code more meaningful, your logic more robust, and your life as a developer so much easier. Whether you’re building the next DDD masterpiece or just trying to wrangle some clean architecture, value objects deserve a spot in your toolbox.
'),setTimeout(function(){r.addClass("processing")},50),o.push({name:"action",value:"nectar_ajax_add_to_cart"},{name:"add-to-cart",value:n.state.productID}),t.ajax({type:"POST",url:e.nectarLove.ajaxurl,data:o,cache:!1,success:function(e){setTimeout(function(){n.state.processing=!1,r.removeClass("processing"),r.find(".loading-wrap").remove()},300),e&&e.fragments&&(t("body").trigger("added_to_cart",[e.fragments,e.cart_hash]),e.notices&&e.notices.length>0&&setTimeout(function(){n.addNotices(e.notices)},100),"quickview"===n.state.type&&t(".nectar-quick-view-box .close").trigger("click"))}})):console.log("Error: no product ID found.")}},pn.prototype.setup=function(){this.$container=t(''),t("#search-outer").append(t('
+
+ 
+ 
+ 
+ 
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+ 
+
+ 
+
+ 
+
+ 
+ 
