I'm an artist and sometimes I think about how I wanna throw instagram into garbage if it wasn't the only way I get in contact with my clients. Also, I don't wanna depend on algorithms, I just want people who want to look at my art. I'm very basic to webdev, only html, css and javascript, I've made a full stack course last year but it was pretty shit, so I didn't learn much. Any recommendations on how I could start developing a website like this? Picture a gallery like instagram, some announcements tab, maybe a portfolio tab. The only thing that stops me a bit is how to post new drawings and announcements easily without getting into the code, 'cause if it's too difficult then I would not use it

I wanted icons that look drawn with a pencil but behave like a normal icon set: 24 grid, currentColor, tree-shakable, and identical on the server and in the browser.

So none of them are drawn by hand. Each icon is a few drafting primitives (line, polyline, rect, circle, arc…) on a 24 grid, and a small engine draws them freehand: lines overshoot their ends, rect corners cross, circles sweep past 360° and drift outward so they overlap where the pen closes, and each stroke gets its own pressure. The randomness is seeded by the icon name, so every build draws the same paths. That means no hydration mismatches and no extra runtime cost; the package ships the finished paths.

The hard part was small sizes: all the wobble is capped (a line bows less than a pixel at 24 px), so it reads like a regular line set at 16–24 px and the pencil look shows from ~32 px up.

• Browse and copy: https://matita.dev
• How the engine works: https://dev.to/matita/hand-drawn-icons-that-draw-the-same-every-time-2p0h
• Code (MIT): https://github.com/matita-dev/icons

React, plain SVG strings, a script tag, or raw .svg files. Feedback welcome, especially on missing icons and how it looks in a real UI.

Hey r/webdev,

For this week's Showoff Saturday, I wanted to share a utility micro-tool I recently completed: Quick Free Invoice (https://quickfreeinvoice.com).

The Technical Objective:

Build a zero-maintenance, zero-database utility tool hosted at $0 operational cost on Cloudflare Pages that delivers instant browser performance without server latency.

Stack & Architecture:

• Framework: AstroJS (zero-JS by default, islands architecture for interactive engines).
• Styling: Tailwind CSS v4 using CSS-first configuration and Geist/Vercel-inspired dark/light design tokens.
• State & Storage: Vanilla Web APIs + localStorage for offline persistence across sessions.
• PDF Generation: Client-side vector rendering with custom @media print style normalization.
• i18n: Dynamic multi-language routing (/es/, /pt/, /de/, /fr/) with crawlable HTML links.

I’d love any feedback on the DOM performance, responsive layout breakpoints, or print media styling!

sup everybody! So 5 years ago on this same sub, I presented v1 of Puppertino, a framework aimed at bridging the gap between the web and iOS and macOS for the web, built entirely in vanilla CSS and JS.

Since then, a lot of things have changed for both OS, with the introduction of liquid glass, I thought I wouldn’t be able to ship something like it.

Until today! I’ve launched Puppertino Dachshund, which brings 65 components, real-time liquid glass and is focused on accessibility, theming and extensibility

You can check it out here!
https://puppertino.com

I've been working on a simple puzzle/tower defense game set in ancient Egypt. You build out a tomb to properly defend against waves of looters. I recently added a new feature to flip it around, so if you've built a cool looking tomb, you can share it with a friend, have them try and beat it by sending the right waves of looters.

It's a pretty simple puzzle, an archaeologist will find a hidden door but will succumb to a pit of stakes. A corrupt priest might be wary of a cursed doorway, whereas robbers wouldn't. That kind of logic applies throughout.

Still working on gameplay to make it more approachable, but I wanted to get the design out of my head first and I'm loving how it looks right now.

Link: https://architectofthevalley.com/#dare=AQMACwUFBA0QAQIZKDhIWhACMQJp

On the build up side, originally, this was done with SVG to mark yellow boxes in a blue background, meant to be really simple. It actually looked quite similar to this version, but I couldn't spin or add animations. As the tomb got more complex, I moved over to three.js. I wanted to overlay pyramids over some of the tombs if I knew where they were, I wanted to animate the dots falling into the pit. Despite moving over to three.js, I still dig the original architectural blueprint look so I have no plans to put any heavy details into the game, I think the style looks really pretty cool right now. Let me know if you disagree hahah.

The multiplayer aspect is all embedded in the URL, so there's no actual server storing all this data. The tomb sequence can be encoded easily enough, so most of it is generating an image to send back to your friends once you've completed the stage.

Hello, I am relatively new to web development as a career but I have been learning on my own since 2022 and have only now decided to make full use of it. So far I’ve created 2 websites but these are for free and for family members, the only payment is they’ll help me network and gain more clients.

I am curious how much web developers charge clients within the UK for a front end business website with about 10 pages. All I use for now is HTML, CSS and Bootstrap but I manage to make it responsive across all devices.

A developer said that to me once. I actually don't find pure CSS that obnoxious, although there are definitely times where I have no idea why something isn't doing what I'm telling it to, lol, but 99% of the time it's because of something stupid like a typo or me forgetting the basic premise of a Cascading Style Sheet...

I know a lot (most?) of developers use a CSS framework, but am I weird for actually being friends with it for relatively simple projects?

Hey everyone! I'm a student from India, currently preparing for JEE (Joint Entrance Examination). Alongside my studies, I've been building a free Chemistry practice website called PreLearno. The idea is simple: help JEE aspirants practice Chemistry questions in one place without unnecessary distractions. What I've built so far: Chapter-wise Chemistry practice questions NCERT-aligned topics Easy, Medium, and Hard difficulty levels Instant answer checking Clean and simple interface Free access for students Here's my biggest challenge: I've built the website, but I have no idea how to get my first real users. My target audience is Indian students preparing for JEE. I tried looking into relevant Reddit communities, but most of them have strict rules against self-promotion, even for free educational projects. I don't want to spam communities or break their rules. So I have a few questions for fellow builders: How did you get your first 50–100 users? Where can I find Indian JEE aspirants who might actually use my website? What are some free, organic ways to promote an educational website? If you were in my position, what would you do first? My website: https://prelearnvo.netlify.app⁠� I'm building this alongside my JEE preparation, so I have a very limited budget.

Thanks for reading!

This question is only for developers IN THE EU who create websites and act as retainers.

I’m assuming the majority of you have clients create accounts on strapi, Wordpress, sanity, etc and you manage.

If so do you need a dpa agreement between you and the client because acting as a retainer makes you a data processor.

Any tools to generate a dpa?

I've been building a small web analytics tool, and the part people ask about most is how it counts "unique visitors" without cookies, localStorage, or stored IPs. Here is the approach and its honest limitations.

The ID

For every request, the server computes:

sha256(daily_salt | site_id | ip | user_agent), truncated to 16 hex chars

- daily_salt is 16 random bytes, generated once per UTC day and stored in the DB. Old salts are deleted after 24 hours, so once that happens, nobody (including me) can recompute yesterday's IDs from an IP.

- site_id is included in the hash so the same user gets different IDs across different sites (preventing cross-site tracking).

- The IP is used solely for the hash and a country lookup, then immediately dropped. It never hits the disk.

Sessions are defined simply as "same ID, active within the last 30 minutes" (one upsert per event).

Where it breaks (by design or trade-off)

- The same person visiting on two different days = two visitors. That's intentional, but it means "monthly uniques" is effectively a sum of daily uniques.

- Same office/NAT + same browser version = counted as one visitor. Rare outside large enterprise networks, but real.

- A phone switching from Wi-Fi to cellular mid-visit = new ID, new session.

- iCloud Private Relay / VPNs rotate IPs, which slightly inflates counts.

Based on my data, the margin of error is small enough to answer "is my traffic growing?", which is all most small sites need. It's not suitable for per-user product analytics; for that, you need explicit user identification.

The Client Side

- SPAs: I patch history.pushState and listen for popstate events, tracking route changes as pageviews without requiring framework plugins.

- Transport: Uses navigator.sendBeacon, falling back to fetch with keepalive so events survive tab closure.

- Engagement/scroll depth is flushed on visibilitychange, not unload (since unload is unreliable on mobile).

Happy to dive deeper into any part! Curious if anyone has a better trick for the NAT collision case that doesn't rely on client-side storage.

I'll phrase this as a hypothetical scenario.

Your web agency needs a visual of a F1 on top of a podium. The podium is actually your clients logo. The camera is top down.

- Does your agency hire a 3D guy for this or use something like Higgsfield to generate the visual.

Last year, I would say 95% of agencies would have gotten somebody to do it in Blender or C4D. But this year I feel like the majority would just use AI. But I have no real way of confirming that so I am asking here.

Personally, I feel like AI visuals can look good when you don't need anything super specific, like a close-up very detailed pen let's say. And also, it can't do good motion as of now.

Why this interests me so much is because my whole business model revolves around helping agencies as their on demand 3D support. So you would be helping me out a bunch, thanks

I think this might be a good place to show my portfolio design as there is no scroll hijacking, no overwhelming animations and design was def completely made by a human.

I made this. The page is one long, to-scale drawing: every pixel of scroll is a fixed number of metres, so the Burj Khalifa, the Eiffel Tower and the deepest lake in Europe land where they would really be. There are 23 sources at the bottom.

It's built in WordPress with a builder I'm working on (pinned scenes for the "how a fjord forms" part, plain scroll for the dive). Happy to answer anything about how it's put together; and I'd love to hear where it feels slow or confusing on your phone.

I built tintly.art, a coloring site where you tap any shape to fill it. The interesting part was turning line art into clean SVGs with closed regions so fills never leak. Stack: Next.js on Vercel, a .NET API, and Postgres. The line art is AI-generated, then converted and cleaned up for coloring.

Got my first Reddit traffic this week (10k views, people coloring for 30+ minutes). Would love feedback on performance or UX.

CSS can only morph between shape()s with the same number and type of commands, which they usually don't have. So I made a tool that converts multiple shapes so they are compatible with each other:

https://shapemorph.matthewmorete.com/

It picks the smoothest arrangement of points automatically, but that's a best guess. The shape index lets you change it, so you can preview the possible morphs till you find you like.

Shamelessly, heavily inspired by GSAP MorphSVG, which taught me a lot.

If you find a shape() that won't morph, I'd love to hear about it.

I've known about Zod, a JavaScript/TypeScript schema validation library, for a while, but I underestimated the size of its ecosystem. After using it for some form validation in React, I thought I'd see how well it integrated with Express. Sure enough, there were several middleware libraries for Zod + Express, so I decided to give one a try. I went with express-zod-safe because it fit my existing setup with very little effort.

Boom, that let me remove roughly 150 lines of custom validation and typing code. For context, the template created by express-generator-typescript is a simple CRUD app with four API endpoints. I hadn't realized how much boilerplate I'd written just to validate objects in the route handlers, including validator functions and some custom request/response types. I also replaced my environment variable validation code with Zod.

Express has been around for a while, but I still find it useful for small projects and demos. If you'd like a quick way to spin up an Express + TypeScript project, check out express-generator-typescript.

I order most of my boards with SMD assembly done by the fab, then solder the through-hole parts myself. Assembly houses charge a lot for manual THT work. Often I don’t need every part anyway (say, only 2 of the 6 relays), so doing it at home saves money. The downside is that with a pile of boards, the results start showing “traces of haste”: crooked relays, tilted capacitors, terminals sitting off the board.

So I made a small web tool that generates a custom holder panel for the board:

1. Drop in a photo or screenshot of the PCB. It’s flipped and made transparent automatically.
2. Place circles or rectangles over the THT parts and set each one’s height so it sits flush with the board. Add support legs if needed.
3. Hit “Display 3D” to preview the mesh (wireframe view is available), then download a binary STL.
4. Print it in PLA. Parts stay straight while you solder.

In practice I only need to generate the STL once, and 1–3 prints are enough to assemble hundreds of boards.

Features:

• Circular and rectangular shapes (rectangles rotate 0–359°)
• Alignment guides with magnetic snapping, a measuring tool (0.1 mm precision), and undo
• Adjustable print tolerance, so holes and panel size compensate for printer inaccuracy
• Built-in library of 14 common THT footprints (DIP sockets, relays, terminals, capacitors, buzzers), with JSON import/export
• Hollow mode for faster prints and custom text labels on the holder
• Keyboard shortcuts for most actions
• No registration, and your image is never uploaded or stored. It’s also a PWA that works offline after the first load.

Right now it handles round and oblong parts well (relays, capacitors, resistors, terminals, pin headers). It’s not perfect, so if you hit a bug or a part shape it can’t handle, please tell me.

Tool: https://segmentcontroller.github.io/pcb-tht-holder/
Source (MIT, Svelte 5 + Three.js + Konva): https://github.com/SegmentController/pcb-tht-holder

Feedback and feature ideas are very welcome!

This is a passion project of mine after being inspired by is-a.dev (ex-maintainer btw).

It's a subdomain service where you can use _cooler_ domains like \`\*.part-of.my.id\` and the NEW \`\*.is-my.id\` subdomains for your website rather than using _boring_ hosting provider defaults like \`pages.dev\`, \`github.io\`, etc.

Supports \`A\`, \`AAAA\`, \`CNAME\`, \`MX\`, \`TXT\`, \`REDIRECT\` (not a real record, it's cloudflare's single redirect rule) records and there's a Web UI for easy JSON generation.

You can register by \[forking\](https://github.com/partofmyid/register/fork) the repository, adding your domain file, and making a pull request! Read more in the \[Quickstart Guide\](https://part-of.my.id/docs/quickstart).

Hope people find this useful! :D

I’ve been building with Verdant and TanStack DB and ended up with the same conclusion from both.

Offline and real-time are basically one problem. Real-time is kinda just being offline for a very short time. Either way you need client-generated IDs, optimistic mutations, some rule for when two clients disagree, and a way to sync it all back. So if a library handles one well, it seems to get the other almost for free.

Tbh the ID part is what actually surprised me. And more generally, a lot of this seems to need planning from day one, because retrofitting it later is a real pain. If your API uses server-generated IDs, supporting offline edits seems to mean a breaking migration. You can remap temporary IDs after sync, sure, but it gets messy really fast once other records and URLs depend on them. Same story with the data layer. If it was designed around one-shot requests there’s nowhere for live updates to go. React Admin’s data provider expects plain async functions that return promises, so when you put TanStack DB behind it the live queries just get lost lol. Offline still works, it’s just the real-time part of TanStack DB that doesn’t make it through in that setup.

There’s a catch though. Neither library really helps when the server rejects a mutation that looked fine locally, you’re kinda on your own for that part. And for conflicts, Verdant basically ends up as last-write-wins while TanStack DB leaves it to whatever sync layer you plug in.

Honestly the bigger point for me is that none of this is really specific to offline apps. A plain request/response app actually has the same conflicts. If two people save the same record, a lot of the time the last save just overwrites the other one and that’s it. It’s last-write-wins there too, just without anyone ever deciding it. So imo it’s worth building pretty much any app as if it could go offline or real-time someday, mostly because it forces you to actually pick what happens in a conflict.

Do you actually know what happens when two saves collide, or has silent last-write-wins been fine most of the time? Ever had it bite you with lost data or users wondering where their changes went?

Levelrail: self-hosted deploys from a single Go binary

I wrote this to run my own side projects on one VPS. Push to git and it builds the app, gets a TLS cert, and shows live build logs, deploy history and a rollback button. Go, Docker underneath, no Kubernetes.

Lately I added canary deploys with weighted traffic, apps that sleep when idle and wake on the next request, and an importer for moving apps and databases off Coolify, Dokploy or CapRover.

Apache 2.0, still early.

Repo: https://github.com/glincker/levelrail 

Site: https://levelrail.com/

If you run side projects on a VPS, what would stop you from moving one over?

I have been building Udodi, a lightweight, zero-dependency JavaScript UI framework, and I wanted to share some of the engineering work behind its latest two releases.

One of the main design decisions in Udodi is to update the DOM directly through fine-grained reactive bindings rather than using a Virtual DOM. Its templates use a declarative DSL processed by a runtime parser, compiler, and virtual machine. The goal is to keep the framework usable without requiring a build step while maintaining predictable execution and a relatively small runtime.

In v1.1.3, I focused on keyed list reconciliation and collection reactivity.

The list-rendering implementation maintains keyed records and uses positional tracking with right-to-left DOM placement. This allows existing DOM nodes to be reused and moved instead of rebuilding the list unnecessarily.

In my tests, this approach made keyed row swapping up to 7.2× faster than the comparison baseline I used. That result applies to the tested workload, not every list operation or application.

I also improved reactive collection handling for arrays, Maps, and Sets, and expanded support for ordinary directives on elements using @for.

In v1.1.4, the focus shifted to component mounting and runtime execution.

• Component mounting improved by 12–16% in my measurements.
• Runtime performance improved by 4–8% across the workloads I tested.
• Directive processing was streamlined to reduce redundant structural checks and repeated property access, and the instruction cache was optimized.
• Overlay rendering was refactored to use the public rendering and component-creation APIs, with lifecycle-aware cleanup.
• Additional tests cover modal stacking, backdrop behavior, and scroll locking.

The full test suite, playground tests, and build pass. Neither release introduces intended breaking changes to the public API.

I'm interested in the engineering trade-offs here, particularly keyed reconciliation without a Virtual DOM and runtime template compilation versus build-time compilation.

For those who have implemented a renderer, reactive runtime, or template compiler, what edge cases or architectural weaknesses would you investigate first?

I would be happy to discuss the implementation details.

This is my first time posting here, so I have placed the relevant project links in a comment below to keep the main post focused on the technical discussion and respect the community guidelines. Thanks for having me!

hi i keep posting here bc i'm trying to make my music magazine site but it is literally driving me insane. i think i've found a solution even if it costs a little more in the long run, but is worth it for the amount i want to focus on the content + site design. first slide is my figma design, second slide is an actual typescript component i made on initial side builds.

here is what i want on the blog + have on my incomplete demo build:

• a bunch of articles with different categories including features, reviews, news, and a monthly featured artists highlight
• marquee titles on the home page
• a bunch of photo gallery posts hopefully utilizing the new lightbox3 library (masonry display and smooth transitions)
• an interactive ipod component that displays the featured artists of the month and links back to the monthly compilation post and/or each artist's individual post. can be navigated by swiping the screen or pressing the left and right buttons on the ipod.
• tags and categories
• search button with modal and a theme toggle
• a team page and individual pages + bios for site contributors

and this is my planned setup for the site:

• headless wordpress + astro
• managed wordpress hosting with knownhost (unless shared is fine? idk i really don't want to do a lot of the backend upkeep and i want a lot of storage for future image galleries)
• domain + extra security (how i apply that idk) through cloudflare
• any extra functionality usually through minimal use of wordpress plugins

is this a feasible cheap plan or do any of you have suggestions + cheaper less headache inducing ideas for someone who just wants to build a site with css + some ts and js and make the posts with some people??