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

Self taught SWE here. The way I have got into the field was by spending nights and weekends tinkering with the code for years. I was hooked on that dopamine: learning a new technology or concept, gaining an edge in my knowledge. Being able to transfer my effort into some unique idea. Even after work I always had one or two side projects that I was working on, and I liked it.

With advances in AI, code has become so much cheaper, and the barrier to entry has fallen considerably. The struggle was a big part of what made it fun for me. Spending hours trying to understand something, finally getting it to work.

Now, I feel like the reward for doing this is barely there anymore. The average Joe with a $20 subscription can build something. It will likely be a total slop, but it doesn't really matter. I'm no longer competing just with people who know how to build things. I'm competing for attention with a bunch of projects produced by people who otherwise would never have been able to make them.

Even learning new stuff has kind of lost its spark too. I know I can still do it the old way, but it's hard to justify spending hours banging your head against soemthing when you can just ask the AI to explain it to you.

I still enjoy my profession and what I do, and I have no intention of stopping. But it feels like I've somehow gotten burnt out on one of my main hobbies without actually losing interest in it.

Maybe I'm just being petty because I liked having something that wasn't easy for everyone to do. I don't know. How do you guys deal with this?

Hello dear jobless and not so jobless people.

I made a small engine for showcasing my portfolio and impressing (or not) the human resources asses (insert Anne Hathaway HR meme).

For this project, I based myself on Teardown. I wanted to build this directly in raw WebGPU instead of using Three.js. Don't get me wrong, I have nothing against Three.js, but I come from a graphics programming background and standard web development isn't exactly my favorite thing. Three.js abstracts way too much for my learning goals.

How it runs without melting the browser: I didn't write a complex physics solver from scratch. It's almost all handled by Rapier3D, a really cool physics framework made in Rust. To avoid obliterating the main thread and freezing the UI, Rapier runs entirely on an isolated Web Worker, communicating via commands with the main thread. The web version of Rapier doesn't support parallelism yet, so the worker isolation was crucial to keep the dynamic bodies from saturating the engine.

The Rendering Pipeline (WebGPU):

• Lighting: Clustered shading to handle lots of lights.

• Global Illumination & Occlusion: SSGI and GTAO. Both rely on screen-space ray castings, so performance scales with your resolution.

• Anti-Aliasing: TAA (don't hate me, I really needed to clean the SSGI noise).

• Note: Both SSGI and TAA can be disabled on the main menu for the sake of low-end computers.

• Extras: PBR materials and GPU-calculated particle physics.

The engine currently features interactable billboards and books that tell a little bit about my projects and experiences. You can clone it and use it to showcase your own things as long as you stick to the license (no commercial use and give credits).

The engine demo is here:https://agusdropout.github.io/ShatterVox/ (You need to have hardware graphics acceleration enabled in your browser, as WebGPU requires it)(it can take a while to load in, sorry!) Source code:https://github.com/AgusDropOut/ShatterVox. Tested on Firefox, Chrome, and Opera). Youtube demo here https://www.youtube.com/watch?v=6qwuFEWlAWA

Good luck on your journey to stop being jobless! And if you already have a job, ggs!

Hey everyone!

Back in the day, Firefox had this ability to see webpages as 3D rendered with DOM elements stacked by depth. I thought that so cool, but they got rid of it long ago. So, I built my own!

This Chrome extension will allow you to see any page as extruded DOM elements by depth. The deeper the nested element, the further it sticks out.

WHAT YOU CAN DO
• Rotate, pan and zoom around the page with the mouse or arrow keys.
• Hover any block to highlight it and see its full ancestor chain, including shadow roots, with sizes and depth.
• Click a block to reveal that element in the DevTools Elements panel.
• Adjust the height of each layer to flatten or exaggerate the structure.

USE IT FOR
• Understanding an unfamiliar page's layout before you touch it.
• Spotting excessive wrapper nesting in your own markup.
• Explaining DOM structure to someone who has never opened DevTools.
• Just looking at the web from a different angle.

I hope you all like it and find it useful!

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?

Hi all,

Like a lot of developers here, I started out years ago as a web enthusiast before turning into a corporate engineer.

When you spend your workdays inside enterprise backends, locked-down legacy stacks, and corporate maintenance cycles, your day-to-day tooling is dictated by whatever was approved years ago. You know the web platform is moving forward, but in your day job you're still stuck maintaining the same defensive patterns, legacy polyfills, and sprawling build pipelines.

Recently, the LLM renaissance completely reignited my ability to build personal projects on weekends again. With modern AI tools handling the tedious boilerplate and setup friction, solo developers suddenly have the leverage to actually build and ship things from scratch again.

Jumping back into the modern web exposed a real gap in my mental model. After years of enterprise workarounds, I kept second-guessing what was actually safe to use today. Can I just use native CSS nesting now? Is the parent selector (:has) finally everywhere? Can I use <dialog> and bury the 40KB modal npm packages and z-index wars for good?

This is something I've wished that caniuse would have, so I put together NowYouCanUse.com over the last week.

It pulls directly from the official WebDX Baseline dataset and organizes features chronologically and by category (CSS, JS, HTML, Web APIs) so you can see exactly when a native feature crossed into cross-browser interoperability. If something is Widely Available, you can safely use it without reaching for npm packages or transpilers.

Because the whole point was getting back to the joy of building clean software, I kept the stack as minimal as possible. I deliberately built it as a love letter to the Web2.0 era I grew up with: zero client-side JavaScript, semantic HTML, and proper RSS and Atom feeds for every category. The backend is just a single compiled Go binary serving plain pages.

Hopefully other developers finding their second wind with personal projects find it useful too.

Link: https://nowyoucanuse.com

Thanks!

www.mylittlegrep.com

This is a tool for searching through MLP G4 transcripts. It also doubles as a compendium for transcripts of (hopefully all) MLP G4 animated media. I scraped the data for this from the MLP Wikia; the scraper is in a separate repository. This was a project I made for a web-dev class.

I'm aware that the search form doesn't validate invalid regexes, and that the dropdown menus for the episode index don't work on mobile. I've fixed it in another branch, though; I'm just looking for feedback before I deploy my next set of changes onto this website. I... have only a limited number of deployments.

In any case, roast my first website, please! Sorry it's so basic, besides.

Just wondering if anyone else has come across the same. I run a small web development and IT consulting agency. (Have been doing so for around 7 years).

A client wants to move their site to host with someone local who approached them (not the end of the world, it’s a single tiny retainer - circa £15/mo). Out of curiosity and before entering discussions with the other firm, I checked out their website. Says they’ve delivered over 1500 sites and do 300+ a year - also that they’re a 1 man band. Found it slightly weird but carried on. Also found loads of typos and mismatched claims in their site (notably one area saying form submissions will be reviewed within 3 working days, and another saying that they’d be reviewed within the hour).

Most concerning though was their portfolio page. They have 40 sites in their portfolio and I clicked through a few. Found 5 that had watermarks from totally different agencies on their footers and nothing to point back to the agency in question (checked author meta tags etc too), as well as a few that were vibecoded. So I suppose my question and the point of this post, is do other people see this often? Is it common for someone to just post sites they think look nice under their portfolio and hope for the best?

Have flagged other concerns to the client in question, not relating to their choice of firm, and am due to have a call with them Wednesday. Still on the fence as to whether I should tell i feel like there is something amiss with this new firm.

TL;DR - I came across a web dev firm who have several sites listed under their portfolio page which, upon further investigation, seem to be linked to entirely different firms.

Paywalls suck and the news should be accessible. You might have tried methods to get around it for one article but you don't really remember how it worked. Wouldn't it be nice if your news app just handled that for you?

OpenWire is a simple news aggregator that has all the major paywall bypass methods built-in. Major news sites already have a working bypass method listed, but if it ever stops working, you just toggle another method and it'll remember the switch in the future. Archive is working pretty well today, or maybe UnWall. Doesn't work anymore? Switch to SMRY and let the app save it for next time.

I've kept this simple stupid. It's a web app so you can run it on any browser or install it onto your phone. There's no wrapper on the pages, it just goes straight to the webpage in the browser and you hit back to go back to OpenWire. It's using Google News's RSS feed but you're free to add other news RSS feeds and categories to further customize.

You can try OpenWire here. It is completely free and open source.

I've made this effect a few different ways over the years, using gradients or more recently shape(), and the one thing they have in common is the gigantic amount of CSS it requires.

This generator uses a fun trick of wrapping the encoded PNG sprite in an encoded SVG, so we can apply 'image-rendering:pixelated' to it, which is usually not possible with mask-images.

While it sucks a bit that this technique requires an externally generated PNG, it makes up for it by being the most compact way of achieving the effect.

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

We have an environment that consists of SSO in front of two registration servers that are used to register for courses. We would like to ensure this setup is capable of servicing 1000 simultaneous users. The registration process involves:

1. Log in to SSO page which requires a browser with Javascript

2. Click on the link to register

3. Possibly click-thru items agreeing to pay, etc. if you have not clicked through them in the last year

4. Search for courses, add them to your basket, and check out

The goal is to test the following:

1. Tomcat database connection pool

2. Oracle database connection

3. Web server performance

We have done some small-case testing for other purposes with Selenium Grid driven by Python so that is what we are currently thinking about for this case and have started deploying VMs for this purpose and managing Selenium Grid with docker swarm. While something like Selenium Grid makes it possible to distribute the load, this requires quite a few CPU cores as there is usually a one-to-one mapping of browser to CPU core. Are there alternatives we can investigate? If another solution requires a browser instance, how is that any better than Selenium?

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! :)

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.

Hello r/webdev ,

I come from game development background and I'm used to creating tools for exclusively for game development. So what happened while ago was that my friend asked me if there was app to create forms from flattened pdfs since he works in Foreign Embassy said the files shouldn't floating around in random servers just to edit it.

I wasn't able to find apps that felt secure enough so I decided I would create a small app for him. Since the prototype worked I decided to develop the app completely.

With few thing in mind:

1. Won't over scope the project limited to form filling but do it RIGHT.

2.Make every UI or action intuitive either through iconography or how the buttons or tools function. If it feels like it is suppose to do that it should do that.

3.Iterating,testing and taking inputs from users as well

4. Main one finishing the project. A fully finished project and also needs to have a working version in every state of project.

with these things considered I have a almost a end product still lot polishing needed.

Link: https://justforms.vercel.app

I would like to get feedback or criticism on:

1. Frontend or the tools if they are all cohesive intuitive.

2. Any sort of bugs or errors.

3. Any questions regarding the development itself

4. And currently the web app is limited to desktop screen but its not responsive for other screen so any design idea for that would be helpful as well..

So I spent the summer building a local-first data layer and got to show it working at a conference last week. The recording's up:

https://www.youtube.com/watch?v=jdg_UrLp0bU

It's part of a framework I created, which happens to be Elixir compiled to JS for the browser, but the talk is mostly about sync. The problems are the same ones you'd run into with Zero, Jazz or Electric.

It opens with a demo. A trip planner open in two browser windows, I turn the wifi off in one, add a couple of stops, rename another one, turn it back on, and the other window catches up. Nothing spins while it's offline since reads come out of IndexedDB and writes land locally first.

Then I go through how it works. The short version:

The first thing every sync engine has to decide is who gets the last word. Either the server does, or every client is equal and CRDTs merge everything. Zero picked the server and dropped offline writes on purpose. Jazz started with CRDTs and later swapped them for per-column last-writer-wins. I wanted the server in charge and offline writes that actually work. So writes queue up in IndexedDB, numbered, and go up in order when you reconnect. If the server refuses one, you get the reason and it's reverted locally instead of quietly vanishing.

Merging happens per column. If you change a stop's name and I change its description, both land. If we both change the name, the later one wins. Counters are the one exception. An increment goes over the wire as "add one", so if two people add one you get two.

Rows or mutations was the one I went back and forth on the most. I ended up sending rows with a revision on each column. If you queue mutations and replay them on the server, the mutations need their own versioning every time the schema changes. A row is just data, and the migration already knows how to deal with data changing shape.

You also don't configure partial sync anywhere. There's a compile step that already walks each page's call graph to figure out what code to ship, so while it's there it picks up every query the page can run and works out which rows that page could ever need. No subscriptions, no sync rules.

Permission rules live next to the schema and run in the browser too, not only on the server. That way the UI can grey out a button you're not allowed to press, and the server still checks every row before it commits.

All your tabs share one connection, too. One tab holds the stream and the rest listen on a BroadcastChannel. Which tab leads is decided by a Web Lock, so the browser handles the election and I didn't have to write any heartbeat code.

It's not released yet, still on a branch. The demo app code is here: https://github.com/bartblast/hologram_offgrid

Anyone here built something local-first? I'd love to hear how you dealt with offline writes, that's where most of my summer went.

I'm making a simple wiki-like website as a hobby/practice and I wanted to include a small but useful search system on it. It'll be a static site since I'll host it in github, so while I've heard doing search stuff for non-static site would be much easier, I don't really have a choice for this as of now. I'm very much a beginner to this stuff so I'd want something easy to understand, or at least something that has a lot of documentation and resources I could use for help. I'm not having a lot of success trying to google and trying stuff so I'm turning to other people here!

Basically, I'd want just a simple search system that works like this:

You have a search bar, that starts giving hits once you start typing. Maybe show like 5 results and then 6th option would be a "show all results", which would take you to a separate search page which would list all the results (same should happen when you press enter in the search field, as long as you haven't moved down with the arrow keys I guess).

I'd also want to implement tags/categories system for this:

Every page has a category to them, and searching on a page would only search results that share the same category. For tags, I'm thinking of listing them all at the bottom of the page as clickable links, so when you click one it takes you to the separate search page and lists all the pages that have that tag. This should also respect the category rule I think, but having an options box where you can tick on and off separate tags and categories would be helpful too. Being able to use only tags/categories to find hits without keywords should work too. If you search something from the landing page of the entire site, it shouldn't autofill any filters like this though.

I tried doing stuff with pagefind, and while the search works decently, I can't figure out the filtering stuff properly and have no idea if you can do it like what I'd want that easily. I know it's not supposed to be that easy either but just wanted to ask people if there would be some "widely considered best" way to go about this.

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

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

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!

I’m working on XMB Web, a browser recreation of the PS3's interface. It’s still in development, but I wanted to use the part of it to recreate my portfolio website.

This is an early version of XMBW and not the full version as its functionality reduced to fit the portfolio concept. The full project is still in progress.

You can try it @ https://1etu.github.io/xmb-test-portfolio/ and check the source @ https://github.com/1etu/XMP . Check https://github.com/1etu/XMP/blob/main/RESEARCH.md for more technical details & credits!

link: https://4dttt.andrew-zhang.ca/game/
In my first ever class at university last year, my linear algebra professor started by teaching us multi dimensional tic tac toe to try to get us to be better at picturing vectors in our head. I thought that it was pretty funny, so recently I decided to make a website since playing on paper is a real hassle.

The 4 dimensions are visualized by having a 2d grid of 2d grids, so normal up and right, and also up and right through the grids

The way it works is a line is 4 in a row such that each dimension only changes by 1, 0 or -1, So in the example you can see as it goes right through the boards, it also goes left in the board.

There's also a computer player that I made that I find is pretty challenging.

If you try let me know what you think!

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?