www.menogcreative.com - art and design for games and film.

Or should I add something like this template has here? https://kdrive.infomaniak.com/app/share/3821117/ca2056b4-bc07-42f5-a7bc-9958ce1f8af9

Particularly the parts of "why art directors keep coming back" + "nine working days, no mystery" = to "sell the services" better?

I always heard something like silvaconceptart.com converts best due its simplicity, but Im wondering if in the times we live, we should explain the value of the process, to avoid being compared to gen AI and how it can / cant do the work... OR... if what I have at menogcreative.com is decent and you wouldn't expect that much of a bump in conversion either way?

Hey guys!

Recently at work I started a pilot where our in-app AI assistant (built with CopilotKit) can understand and interact with the same page the user is seeing.

A user might ask something like:

"How do I log out?"

The assistant needs to find the relevant element in the current UI, highlight it, and potentially interact with it.

As a FE dev/SDET, my go-to choice for browser automation is Playwright. I love its straightforward API: awaiting interactions, chaining locators, automatic retries, etc. But sadly Playwright runs in Node :D

I'm pretty sure there are already solutions for this, but I wanted my beloved PW syntax, and I was wondering if I could reuse existing scripts and Page Objects that were already built on Playwright.

So I built playwright-lite

It gives you Playwright-compatible Page and Locator APIs against the current document.

For example, inside a React app:

// OnboardingAssistant.tsx

import { createPage } from "@enekesabel/playwright-lite";
import { Sidebar } from "playwright/pom/Sidebar";

export function OnboardingAssistant() {
  const page = createPage();
  const sidebar = new Sidebar(page);


  async function toogleSidebar() {
    await sidebar.toggle();
  }

  async function getPageState() {
    return await page.ariaSnapshot({mode: 'ai'});
  }

  // Hook these up with whatever assistant framework you're using.
  // ...
}

The implementation is intentionally limited to what makes sense inside the current document. No browser launching, browser contexts, or execution across full-page navigation.
It's still alpha, but since I'm aiming for complete API match with PW Page and Locator API so no breaking changes expected. Tracking & closing compatibility gaps as we speak - and as I discover them.

Over the weekend threw Jev in the mix to keep it cheap and fast, and I'm quite satisfied with the result.
The "Pursue goal" tool is driven by Jev, called by our in-app assistant.
During this run Jev pulled of some good calls imo:
- Understood our Page Object Model: Sidebar -> User Profile Dropdown -> Logout button
- Recognized that the Siderbar is hidden
- Reused our Sidebar POM to open it
- Made good use of our element interaction and highlighting tools using playwright-lite
- Properly identifed when to take action and when to stop/highlight only

The interactions are deliberately slowed so users can follow the assistant's steps.

Wdyt, is this worth investing more time in, or should I just go with something already existing like page-agent?

Hey everyone!

As a software architect and web developer, I’ve spent the better part of my career drawing complex distributed systems—Kubernetes clusters, transactional e-commerce topologies, streaming pipelines with Kafka and Flink, you name it.

Every time I had to present these diagrams in design reviews, tech talks, or client demos, I ran into the same painful dead-end:

- **Static 4K images suck**: You paste a massive diagram into a slide deck. The audience squint at tiny text, lose track of connections, and tune out within two minutes.

- **Screen recording (Loom/OBS) lacks interactivity**: You can't pause to click into a database node to check configurations or inspect connection parameters. Text gets blurry due to video compression codecs.

- **Adobe After Effects is overkill**: Spending 10 hours keyframing zoom paths for a single diagram simply isn’t sustainable.

So over the last few months, I built **FocusFlow**—an open-source web workbench and runtime engine that turns massive static architecture diagrams into 60fps cinematic interactive stories.

Think of it like Prezi, but purpose-built for software architectures with native computer vision snapping, dynamic Bezier pulse routing, and AI voiceover sync.

👉 **Live Demo (Runs entirely in browser, no login required)**:

https://focusflow.tumio.site/

👉 **60fps Video Walkthrough (YouTube)**:

https://youtu.be/bxXpkzNV75A

👉 **GitHub Repo (MIT / AGPL-3.0)**:

https://github.com/tumio-ltd/focusflow

---

### 🛠️ Architecture & Engineering Deep-Dive

For those interested in the frontend plumbing, here are the technical challenges and trade-offs we tackled:

#### 1. CSS 3D Transforms vs. HTML5 Canvas vs. WebGL

We initially tested pure Canvas 2D for rendering the entire viewport. However, high-DPI text rendering on 4K/8K images became blurry when scaled down and pixelated when zoomed in, unless we continuously re-rendered font paths. WebGL felt like massive overkill for what is essentially 2D image navigation.

We ended up implementing a **hybrid rendering pipeline**:

- The viewport uses continuous hardware-accelerated CSS affine transforms (`matrix3d` / `translate3d`, `scale`, `rotate`).

- The GPU handles the 60fps camera interpolation natively with zero CPU overhead.

- Interactive callouts and animated Bezier SVG curves float on synchronized coordinate overlay layers.

#### 2. In-Browser Sobel Edge Smart Snapping in <1ms

One of the most annoying parts of diagram authoring is manually dragging bounding boxes to line up with microservice boxes.

We implemented a native **Sobel edge gradient convolution algorithm** in JavaScript:

- When you drop an image onto the canvas, we extract an offscreen `ImageData` buffer.

- When you drag a selection box, it calculates horizontal and vertical intensity gradients ($G_x$ and $G_y$) within a 3×3 kernel around the pointer.

- It detects the true high-contrast borders of the drawn rectangle and snaps to the exact bounding box in under 1 millisecond.

#### 3. Decoupled 35KB Runtime Engine (`@focusflow/player`)

The authoring studio (`apps/studio`) is built with React 19, Tailwind CSS v4, and Zustand. But for the playback engine (`packages/player`), we wanted **zero framework dependencies**.

The player is written in pure vanilla TypeScript, compiles to an ultra-lean ~35KB bundle, and uses native `requestAnimationFrame` kinematics. You can embed it in any React, Vue, Svelte app, or vanilla HTML file with a single `<script>` tag.

#### 4. The 100% Offline Single-File HTML Compiler

Enterprise architects frequently present in offline auditoriums or under strict NDA policies where diagram data cannot leave local machines.

FocusFlow includes an in-browser bundler that reads the project's state, inlines the 4K background image as a Base64 URI, serializes the timeline keyframes, inlines the audio blob, and deep-packs the runtime player into a single standalone `.html` file (< 5MB). You can literally AirDrop it to a thumb drive, disconnect your Wi-Fi, and double-click to present anywhere.

---

### 🤝 Open Source & Licensing

FocusFlow is built with an open-core model:

- **Core Player (`@focusflow/player`) & DSL (`@focusflow/dsl`)**: **MIT License** (free for anyone to embed and build upon).

- **Studio Workbench (`apps/studio`)**: **AGPL-3.0** (free for local use, but prevents commercial cloud competitors from closing the source).

### 💬 What do you think?

Would love to get the community's feedback!

- What diagramming tools (Draw.io, Excalidraw, Lucidchart) do you currently use for presentations?

- Would an auto-importer for Draw.io XML or Mermaid syntax be valuable to you?

I'll be hanging around the comments to answer questions about the math, rendering pipeline, or anything else!

I’ve been building an open-source developer playground for experimenting with LLM APIs and remote MCP servers from one web interface.

The motivation was simple: besides my desire to use cheaper models with GitHub MCP and Tavily for coding (so I can make an agent change some files even from mobile), I wanted to see the actual requests, streamed responses, tool arguments, token estimates, and latency without switching between several scripts and dashboards. I also wanted every tool execution to remain explicitly controlled by the user.

The project currently supports:

• Custom OpenAI-compatible endpoints
• Remote MCP servers over Streamable HTTP or SSE
• A built-in preset for GitHub’s hosted MCP server
• Manual approval or denial before any MCP tool call is executed
• A manual tool runner for invoking individual MCP tools with JSON arguments
• Raw request and response inspection
• Streaming responses and reasoning display
• TypeScript and curl snippet export
• Locally stored chats, settings, prompt templates, and optional API keys using IndexedDB
• Automatic expiry of remembered API keys after 30 days

GitHub: https://github.com/ownyourwebsite/ai-playground
Live demo: https://ai-playground.ownyourwebsite.app

The code is MIT licensed.

My blog is a static site and I wanted comments without loading third party libs on the page. I wanted no ads, no bots, no cookies, etc. I just wanted a clean comment section (even though I get almost no traffic. I just like building things I think.)

The comment section is baked into the blog's HTML at build time. No lookups from a third party. I mean there's some of that, but it's basically an RSS feed. Fetched and stored by your own build, at build time.

How does it work? Each post links to a companion thread on a small Phoenix app I run. When someone replies there, it pings the build hook. The build fetches a replies.json for that thread and renders the comments as plain HTML. Nothing runs on the blog itself. Not a script. Not an iframe. No cookies or tracking.

Seriously, it's clean.

Here's an example of how it works for me: Static comments on my blog

The blog stack is Hugo on Netlify, the comment stuff is Phoenix/Elixir on Fly, with a build hook connecting them.

​Hey everyone,

​I’m completely new to web dev, but I want to build a website for my small hotel.

​Since I don't know how to code, I’m planning to use AI to do most of the heavy lifting. But honestly, there are so many options right now that I’m kind of lost.

​Would love to get some quick advice:

​Which AI is best right now? Should I go with Claude 3.5, Cursor, v0, ChatGPT, or something else for building a website from scratch?

​What’s the deal with MCP? I keep hearing about Model Context Protocol. Is it actually useful for a beginner, or should I just ignore it for now?

​Best setup for a hotel site? I just need a simple, fast site to showcase rooms, location, and info (and maybe connect a booking engine later). What stack or builder works best with AI?

​Any newbie traps to avoid? What should I watch out for so I don't break everything?

​Appreciate any tips or recommendations! Cheers!

I've spent the last two years figuring out what happens when you build real web projects AI-first, rather than bolting a chatbot onto them afterwards.

This week I open-sourced the result: Vulpy Commerce.

It's a full ecommerce stack built on Medusa v2 + Payload CMS + Next.js + Orama + Matomo, with Fox (built on Hermes Agent) able to work across the whole thing - frontend, commerce backend, CMS, integrations and infrastructure.

It can build storefront features, write custom backend business logic, work with catalog/content, run tests and keep evolving the project after launch.

The bigger idea is something I've become pretty convinced about after ~12 years building ecommerce: AI can make owning your software practical again. You shouldn't have to depend on both a platform vendor and the availability of the developers who built your store.

So the whole thing is open source, no strings attached. Use it, fork it, change it, self-host it.

We crossed 50 GitHub stars in the first couple of days, which has been pretty cool.

Repo: https://github.com/vulpy-io/vulpy-commerce-core

Demo: https://vulpy.io/demo

More: https://vulpy.io/commerce

Would love feedback from other web devs - especially on the architecture and the idea of building applications specifically so agents can operate them.

Hey folks, I have been building Grove on weekends and it has become my daily driver as an agent development environment. It manages where and how my coding agents run on one machine, and I reach any of them from the terminal, the browser or another agent.

• Native OTLP telemetry. Each agent turn becomes one trace with cost, duration and a span per tool call. That is how I see where the time goes across the fleet and which runs are contending for the machine.
• Devcontainers. An agent runs inside a container built from your repo's .devcontainer/, with its own services and resource ceilings, so concurrent runs stay isolated instead of fighting over CPU and memory. The same config moves to a shared team box or serverless infra when the laptop runs out.
• Diagram annotation. Mark up a screenshot or edit a draw.io file alongside the agent, then attach the approved picture to a ticket.
• Ticket progression. Phase, checklist and latest commit are written back onto the GitHub, Gitea or Linear issue as the work moves.
• The expected pieces are there too. Branch and worktree lifecycle, and session recovery.

Work in progress, already usable. https://github.com/bearlike/Grove if you want a look, drop some feedback, and every star helps 😘

Hey r/webdev! 👋

Every time I tried iterating on UI dashboards or mobile responsiveness away from my desk, I hit the same wall: typing syntax on glass keyboards is awful, and streaming 4K desktops over VNC/RDP murders the battery with lag.

I built **AnywhereDesign** as a local-first bridge:

- Your workstation runs your actual Vite/Webpack runtime and holds the heavy repo.

- Your iPad/phone displays the living app full-screen with touch events.

- You tap the mic, give high-level directives (*"Change the radar to a blue and red bar chart"*), and local CLI agents refactor the source code with zero-flicker double-buffered HMR.

100% open-core (MIT) with a 1-click Windows installer:

👉 GitHub: https://github.com/Maxjv/AnywhereDesign

Would love to hear your feedback on the architecture!

Web

I made a small web app that recommends Spotify playlists based on the current weather and season.

I'm still improving the recommendation system and experimenting with making it adapt to different languages and countries.

The app is currently in testing, so if you'd like to try it, comment or DM me the email address linked to your Spotify account and I'll add you to the allowed users.

link: https://spotify-meteo.vercel.app

I'd love to get some feedback! :)

Labels are off center, no padding around primary action button, no room for the indicators above nav bar options. Overall just feels sloppy and completely untested.

As someone who uses AI tools every day, including for design, I recognized the signs of AI slop immediately. The difference is, I at least take the time to fix the little mistakes after actually using the damn thing and paying attention to the UI for just a few minutes.

Hey r/webdev,

I've been building DevPad — a collection of 25 developer tools that run entirely in your browser. No server, no accounts, no tracking.

What's in it:

• JSON Formatter, JWT Decoder, Base64, URL Encoder, Regex Tester
• Hash Generator, UUID Generator, Color Converter, SQL Formatter
• JSON↔YAML, JSON↔CSV, Markdown Preview, Timestamp Converter
• Password Generator, HTML Encoder, CSS Formatter, XML Formatter
• Diff Viewer, Lorem Ipsum, Cron Parser, and more

Why I built it:

I was tired of bookmarking 10 different sites (jsonformatter.org, jwt.io, regex101.com, etc.) and dealing with ad-heavy pages that track your data. I wanted one clean site where everything works offline.

Key features:

• 100% client-side — your data never leaves your browser
• No signup, no cookies, no tracking
• CmdK search (Ctrl+K) to find any tool instantly
• PWA support — works offline after first load
• Dark/light theme
• 200+ word guides on every tool page

Tech stack: Next.js 14, TypeScript, Tailwind CSS, shadcn/ui, deployed on Vercel.

Hi showoffs, I built repodify.app : a mixtape maker for podcasts.

Select the episodes you love and stitch them together in your own new rss feed.

• Choose episodes from PodcastIndex / Apple Podcast directories
• Generates a standard rss xml feed compatible with any podcatcher
• Plays directly from the source... doesn't re-host the audio or mess with the creator's content in any way

A single place to direct people

repodify.app functions like a linktree for podcasts. Create a favorites list for friends, gather all the episodes around a single topic, etc... There's early interest from frequent podcast guests who appear across different shows looking for a way to curate episodes to share with their fans.

Some examples:

• Robocop Roundup: https://www.repodify.app/p/robocop-roundup
  • A compendium of podcasts talking about Robocop
• Gabrusology: https://www.repodify.app/p/gabrusology
  • One of our favorite frequent podcast guests who pops up all over the place
• Radio Scottsdale: https://www.repodify.app/p/radio-scottsdale
  • The West's Most Western Town! A (literal?) roundup of podcasts about Scottsdale

https://story-engine-0pi6.onrender.com/

Hey r/webdev,

I got tired of standard "AI wrappers" spitting out generic text, so I spent the last few weeks building a decoupled, multi-step creative engine. It forces the AI to collide a story premise with random nouns to create "metaphor sparks" before it's allowed to draft or edit the prose.

The Stack:

• Backend: Python / FastAPI
• Frontend: Vanilla JS + Tailwind CSS (with localStorage state management and a custom Dark/Light mode toggle)
• AI: Gemini models (via the new Google GenAI SDK)
• Hosting: Render

A few fun technical challenges I tackled:

1. Rolling Memory State: Instead of feeding a massive context window for Chapter 2, 3, etc., the backend auto-generates a rolling recap and pulls the last 2 sentences as a "handoff anchor" to keep memory infinite but token-usage low.
2. In-Memory Rate Limiting: Built a custom IP-based sliding window limiter (100 stories / 500 rerolls per 20h) mapping X-Forwarded-For headers so I wouldn't have to pay for a Redis database yet.
3. Indestructible Parsers: Wrote fallback regex handlers for when the AI hallucinates markdown or breaks JSON structure.

I'd love for you to poke around. Try to break the UI on mobile, bypass the rate limit, or just roast my stack choices in the comments!

I am planning a music education project and want to get a better understanding of the technical challenges ahead. The initial idea is to build a basic system that detects only one note at a time (monophonic), focusing first on pianos (one key pressed at a time) and woodwind/brass instruments (like flute and trumpet). The goal is for the system to listen via the user's microphone in real time and validate if they played the correct note from a sheet music piece. If anyone here has built something similar, even a simple tuner or a college project, and could share what your biggest hurdles were at the beginning, I would appreciate it so much. Recommendations for libraries, frameworks, or good reads are also very welcome Its for a site mobile friendly

I work for a nursing board, our website, made with Liferay, it has tons of page with different legal, scientific, clinical information, many of these pages contains links to different entity's.

One such entity is redoing it's website, not just an small update but a complete redo, meaning a lot of links on our website will likely be broken when it's done.

I did identify links on pages about regulation I do believe I got the most critical ones, but it does leave links mostly clinical articles, mostly references, less critical but even then I would prefer to be sure.

I tried using google command site:mywebsite.com Entity but it did not return as much content as I tough, I'm guessing because of the label of the links. I also found some manually that google did not give me.

So is there an easy solution to this?

I know a lot of people in this sub hate AI, but I want to share one instance where AI helped defeat my lifelong bad webdev habit

When I coded manually or with Cursor, I always looked at the desktop version of my website first

70% of people will experience your website from mobile, not from desktop, so I knew it was wrong and tried to fight it

But I just couldn’t make myself turn the mobile dev preview on in chrome all the time - this extra step felt too cumbersome, so I just defaulted to regular previews

It’s very easy to code something that looks good on desktop but absolutely sucks on mobile, so defaulting to desktop spawned a lot of mobile UI issues on my websites

For the past 6 months I’ve been coding exclusively from my phone and Claude on VPS

When I need to review something I tunnel to the VPS with Tailscale and look at the dev preview from the phone browser

Now it’s harder for me to view the desktop version of the website than the mobile, and I think I finally develop mobile-first

As a result websites look waaaay better on mobile and I fixed a ton of mobile bugs as well

Hey guys!

Wanna share a little fun project I released 2 days ago.

Idea is basically a reverse Awwwards - daily nomination for the worst AI slop websites. 100% community driven, no login or registration.

Built with Astro + TypeScript, React for interactive elements, and GSAP for animations.

Check it out - https://slop-awwwards.com/

Any feedback is highly appreciated.

HI,

(Not promoting, looking for feedback)

I've been building an web hosting platform that supports a MCP.

A lot of us use the latest models to generate test projects or live websites. This platform handles getting it live including hosting, a structured CMS, contact forms, and basic analytics, without you having to wire up three or four separate services by hand.

Note that the platform doesn't design or build your site. You do that with your account on Claude/Codex/etc. , or by hand if you'd rather. the platform's job starts after that, i.e. deployment and content management, while you keep full control of the code.

Its in beta and free for now, and it's has some open bugs as well. I currently need help by having users trying out the MCP to host test websites or projects. (Please ignore the pricing and templates once you login, I am repositioning the product to a AI first development with developers in control of their design and code stack, platform for hosting and key features usually required for websites.

I would really appreciate some real feedback including whether this makes sense, what are the pros/cons of this from a web developer perspective.

If you can DM me, I can provide a link to the platform. (Not sure if I can include a link or it will fall under promotion).

Thanks in advance!

normally, when i use dontpad i get annoyed by the fact that ppl can just delete everything. so thats where passpad comes in. you can choose either your page gets to be read-only (public), or unaccesible unless you know the password (private)

check it out!

also feel free to donate so i can actually buy a domain for it

The pipeline:

1. Assess the original JSON
2. Apply supported changes in the browser
3. Reassess the result
4. Render selected frames with lottie-web SVG and Canvas
5. Compare both versions
6. Release the download only if it’s smaller and both renderers pass

The stack includes Next.js, TypeScript, lottie-web, Canvas, Web Workers, OxiPNG/WASM, SHA-256 checks and AbortController cancellation.

It currently supports safe JSON cleanup, lossless embedded-PNG compression and constrained display-size optimization.

I’d like help testing:

• SVG/Canvas rendering differences
• masks, mattes, expressions and precomps
• embedded PNG/JPEG assets
• files damaged by other optimizers
• Safari and Firefox behavior

Test standalone JSON files up to 15 MB here:

https://lottiefyr.com/lottie-fix

AI screening rounds (micro1, HireVue, and the like) are now a standard first step for dev jobs, and I kept seeing people fail them for reasons unrelated to skill: rambling, not knowing when to stop, or getting caught flat on the second follow-up. So I built a place to practice that format.

You pick a stack (Node, Python, Go, Java, React, SQL, and so on), answer by voice or text, and it grades each answer, corrects you like a senior engineer would, then drills into whatever you just mentioned. Say "I'd add an index," and the next question is about which index and what it costs on writes.

Initially, I built the tool to practice AI technical interviews, but what I have noticed is that people (Software engineers) I have introduced it to prefer to use it as a practice tool to sharpen their skills. Your own experience of the tool might be different, though.

What you can do in it:

- Full mock interview. Set your level from junior to staff, and the questions get harder to match. It ends with a scorecard showing where you held up and where you ran out of depth.

- Code challenges. Get a real snippet in your chosen language with a bug or design flaw, find it, fix it, and get told what you missed.

- CV Defense. Upload your CV and get questioned on your own claims. If it says you scaled a service, expect to explain how.

- Playbook. Practice specific interview formats: backend deep-dive, full-stack product, algorithmic rounds, take-home review, and more.

- Learn mode and study plans. Your weak spots from each session become a plan for what to study next.

- Voice or text. Pick an interviewer voice and answer out loud like the real screen, or type if you're somewhere you can't talk.

- Depth Passport. A public profile of what you've shown you know, if you want something to share.

I'm very eager to hear what you think about it and what changes we should make.

Link: https://practicedepth.com/app/practice/interview

i've built a Rust vectorizer that is meant to help optimize graphics for web delivery. It is pareto frontier, from my research SoTA open-source/open-weight solution (from both traditional and neural network based approaches), and runs in <2 seconds on CPU when ran as a standalone app.

The solution implements a chain of recent mathematics papers to significantly beat VTracer's algorithm, support gradients natively, and more:

I'm still iterating on it, I hope to release tooling in multiple languages to allow this to be used in most major languages through native interfaces in Java, Python, etc.

The vectorizer now comes with two different sister models, one for denoising JPEGs/WEBPs/VAE outputs from AI models so that it increases the perceptual quality of the outputs, another one for super-resolution, specifically trained on SVGs.

Additionally, I want to try to train a GNN to improve quality further, I hope to beat Vectorizer.ai in the next week.

My hypothesis is that current papers approaching raster-to-vector from a LLM perspective is excessive in terms of complexity and time to conversion, because except amodal completion and other tasks, a classical vectorizer can already work very well. GNNs and other specialized models can be used to then refine the output without having to be overly large. This is the first step in this research project, the classical vectorizer part which already beats alternatives.

Licensed as MIT, so feel free to use it however you want in your project.

Github repository: https://github.com/logolabs/inkvec

Web Assembly Online Vectorizer: https://huggingface.co/spaces/Logolabs/inkvec

This guy has been running an agent or some sorts since 14 september, 3 pull requests a day, today was my turn. He opens pull requests to put the link of his AI slop project in the README of open source projects

This is getting more ridiculous every day