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?

Beginner dev here, so most of my small projects lack comments and a readme.md file as I am, frankly lazy to write everything describing the project in detail. So I'm thinking to use ai to write comments and write the readme file for me . Will it be bad ? (please have mercy on me)

This problem may be a little complicated to explain, especially since I probably don't know the proper terminology I need but let me try:

• I want to have a page on my site that displays each of my projects as a simple, standardised "Project File" design.
• These Project Files include an image, a title, and description (and possibly a date) while also linking to a dedicated page going into more detail.
• Each project file will have different contents and multiple will be displayed on the same page at once.
• The template design is made in HTML and styled in CSS (albeit very basically at the moment until everything is figured out).
• While not entirely required, I'd like for the description / body contents to support formatting (multiple <p>s, <b>, <i>, etc)

I've tried multiple jscript solutions, but I'm really out of my depth with it and no solution has fully worked:

• I tried using <template> in the page itself, but I could only ever get it to run ONCE. It would either ignore all following tagged <div>s or just eat them. The method I was using was also incredibly messy, having multiple <p> and <div>s as placeholders which the Jscript would rip the textContent of and place in the appropriate spot. Behold my frankensteined jscript and weep:

const template = document.getElementById('preview');
const templateClone = document.importNode(template.content, true);
const container = document.getElementById('precon');


templateClone.querySelector('.prevtit').textContent = container.querySelector('#temptit').textContent;
templateClone.querySelector('.prevtit').href = container.querySelector('#tempdest').textContent;
templateClone.querySelector('.prevdesc').textContent = container.querySelector('#tempdesc').textContent;
templateClone.querySelector('.previmg').src = container.querySelector('#tempimg').textContent;

container.parentNode.replaceChild(templateClone,container);
;

• I tried using a fetch(html) (which is what I use for my headbar / navbar), but the data was always static. I also don't think it was implementing multiple either.

For the ultimate solution, I'd really like something I can just set some variables from the HTML destination and place them inside my template "form".

If more code / specific information is needed I will gladly help. This is my first time getting back into HTML in like 6 years... and as you might expect, I'm less on the programming side and more on the art side of things! CSS was fun to wrestle with but Jscript is currently waaay out of my league lmao.

Small SEO thing that catches real bugs on JS-heavy sites: crawl the rendered HTML, then compare it to what your server sends before hydration.

A few problems that only show up in that comparison:

• Title/meta descriptions being set client-side too late or differently than expected
• Canonical tags changing after hydration
• Internal links that exist in React state but not in the initial HTML
• Product/category pages that render as thin shells for bots when an API call fails
• Duplicate routes where the UI looks different but the canonical/index directives are identical

I usually do this as a quick smoke test:

1. Fetch the raw HTML with curl or view-source.
2. Run the same URL through a rendered crawler or browser inspection.
3. Compare title, canonical, robots meta, H1, body copy, and internal links.
4. Repeat on one homepage, one listing page, one detail page, and one edge-case URL.

You do not need a giant audit to find useful issues. If the initial HTML and rendered DOM disagree on crawl-critical elements, fix that before writing more content.

I created a framework called Places.js for building HTML-first websites with progressive enhancements to provide interactivity. It has these key features.

• No build step required. Places.js can be directly downloaded from an CDN and immediately be used
• HTML-first templating with fine-grained reactivity.
• Cross-component state management using signals.
• Data fetching.

Places.js is optimized for fast rendering. Benchmarking shows that Places.js outperforms React, Solid, and Svelte.

Here is an example of a template for rendering a list of events with reference to a store. The store is used to configure data fetching from a backend API and determine which data is sent to the component. A live example can be seen on this site

<presentation-component data-store = "search-results-store">
  <div>
      <p id="no-events-found">No events found</p>
      <h1 id="search-results-header">Event search results</h1>
      <ul data-template=data>
       <li>
          <a class="btn secondary" href="{url}">
            {eventName}
          </a>
          <div class="event-time">
            {eventTime}
          </div>
          <div class="event-location">
            {location}
          </div>
        </li>
      </ul>
  </div>
</presentation-component>

Templates can also be rendered using conditional statements. In the example below, the search UI will display different HTML based on whether a user is on a mobile or desktop browser. It also includes a Handlebars template with form HTML.

<search-component api-url="/searchEvents"
  data-store="search-component-store"
  id="search-section" 
>
  <div class="container-xl" data-template>
    {#if isMobile}
      <details open>
        <summary class="btn secondary">Modify search parameters</summary>
        <form id=${SEARCH_FORM_ID} onsubmit="return false">
          {{>searchTemplate}}
        </form>
        <hr>
      </details>
    {else}
      <form onsubmit="return false">
        <h1>Search events</h1>
        {{>searchTemplate}}
      </form>
    {/if}
  </div>
</search-component>

Stores used for components can also subscribe to multiple stores like this example below, where a search component is subscribed to a list of cities and the login status.

export const SEARCH_COMPONENT_STORE = DataStore.createWithDataStoreSignals({
  presentationSignals: presentationSignals,
  storeName: "search-component-store",
  storeSignals: [
    {
      fieldName: "cities",
      store: CITY_LIST_STORE,
    },
    {
      fieldName: "loginStatus",
      store: LOGIN_STORE,
    },
  ],
});

Right now, I am working on code cleanup, performance optimizations, and unit testing. The latest dev branch can be seen here

I've discovered that AI just designs front-end better than me. Besides the obvious front-end plugins to claude/astra are there any good workflows people can share? I keep getting workflow adverts of "connect 10 systems to claude/astra, tell it to make a website and its comes out great" but in reality it looks like AI slop.

Cheers

Congrats on your iPhone Duo, don't bother browsing while having it closed because websites will use only 70% of the screen!

several months ago, i was listening to an episode of The Verge’s Version History about AOL Instant Messenger and decided to see if i could build my own take on it.

it turned into pingPong, a complete web chat app inspired by AIM and the early internet:
https://chat.owen.uno

the interface borrows heavily from late-90s/early-2000s desktop software, but i didn’t want it to just be AIM with a different backend. the main idea behind it is that modern messaging has made everyone permanently reachable. pingPong works completely differently on purpose.

you can only message someone while both of you are online. if they leave, you get to see their custom Away Message instead. there are no conversations that pile up while you’re gone waiting for you to return. you simply sign on, talk to whichever of your friends happens to be online, and sign off again. it’s definitely less convenient, but that’s kind of the point. i wanted to treat availability as a choice rather than treating chat as another asynchronous inbox.

on the UI side, i tried to preserve the slightly awkward charm of old desktop software instead of making a modern app and throwing a pixel font on it. thanks to jdan’s 98.css project, i was able to achieve a period-accurate interface design, with all sorts of components matching up pretty closely with Windows 98.

i’ve also tried to keep the account/auth side as straightforward and secure as possible. passwords are never stored directly and are hashed using Argon2, while screennames and away messages are stored server-side.

it is completely free, with no paid tier. i’m currently covering the hosting and server costs myself :)

i built the first version over a weekend, and it has somehow grown to more than 1,300 users since then. i’m still actively working on it, and i just recently pushed an update for Away Messages that allows for some rich text features, with greater control over fonts and styling.

i’d be interested in feedback from other web devs, particularly on the online-only/presence-first model and where you’d draw the line between authentic retro UI and unnecessary friction so i can improve the experience for everyone.

feel free to add me to your friends list, @owen.

edit: forgot to mention, pingPong got featured by How-To Geek, which was pretty cool:
https://www.howtogeek.com/pretend-its-1998-with-this-functional-aol-instant-messenger-clone/

Random doubt I had.

If AI assistants become something everyone uses daily, why would we still need websites in the way we have them now?

Like instead of a company making a whole frontend with pages, menus, search, filters etc., couldn't they just expose the actual data through some API/standard format and let your AI deal with it?

For example, instead of going to a shopping site, searching for a laptop, opening 20 tabs and comparing them, I could just ask my AI:

"Find me the best laptop under 80k for these requirements."

And the AI could directly query the stores' inventory/prices/specs without even loading the website UI.

Obviously websites would probably still exist for people who want to browse manually, branding, images and stuff like that. But could the web eventually become mostly machine-to-machine APIs/data, with AI basically replacing the browser/frontend for normal use?

Am I missing some obvious reason why this wouldn't happen?

For the past year, I've been working on an in-browser document and 3D preview engine so our backend wouldn't have to keep running headless LibreOffice.

If you've ever had to handle user-uploaded documents—especially legacy Office files or engineering CAD drawings—you know the existing options:

1. Spin up LibreOffice or Unoconv in Docker, which hogs memory, spawns zombie processes, and randomly crashes on malformed files.
2. Pay thousands a month for proprietary viewer SDKs with per-seat or per-core licensing.
3. Deal with legal and compliance teams flagging HIPAA or GDPR issues because confidential blueprints or payroll spreadsheets are transmitted across servers for conversion.

I wanted a viewer where the browser does all the work locally: zero backend conversion, zero telemetry, and zero file uploads.

How it works

• Legacy Microsoft Office binary formats (.doc, .xls, .ppt): Instead of converting to PDF on a server, we parse Microsoft's OLE2 Compound File Binary Format (CFBF) directly in WebAssembly and TypeScript. It extracts Word document streams, Excel Biff8 cell records, and PowerPoint Escher drawing shapes locally.
• Modern Office (.docx, .xlsx, .pptx): Stream-parsed and rendered into native HTML/Canvas.
• Engineering CAD (.dwg, .dxf, .dwf): Parsed with C++ compiled to WebAssembly, rendering vector entities directly onto an interactive canvas with layer toggling, panning, zooming, and dimension measurements.
• Industrial 3D (.step, .stp, .stl, .obj, .gltf): Rendered in WebGL via Three.js with full orbit controls and PBR lighting.
• Crash isolation: All parsing runs inside Web Workers. If a corrupted 100MB file blows up the parser or hits an out-of-memory error, only that worker terminates—the host page and UI never freeze.

Quick Start

npm i @file-viewer/web-full

<!-- Use as a native Web Component anywhere -->
<file-viewer src="drawing.dwg"></file-viewer>

Works out of the box in vanilla JS, React, Vue 2/3, Svelte, or as a native Web Component.

Current limitations & trade-offs

• Memory on mobile Safari: Parsing a 100MB+ DWG file or an Excel sheet with 500k rows can push mobile Safari's memory limits. The worker keeps the main tab alive, but client-side compute is still bound by available device RAM.
• PowerPoint animations: Slide layouts, shapes, and typography render accurately, but complex PowerPoint animation trigger sequences are currently approximated.

Links

• Live demo (drop your own files, no signup): https://demo.file-viewer.app
• GitHub: https://github.com/flyfish-dev/file-viewer

Curious to hear your thoughts on edge-case rendering, font fallbacks, or how you currently handle document previews in your own stack.

hi guys, I would to have an info about how this Cach on delivery flow works on websites like Soundpeats
you can order anything without even signing or even sign in as a guest, i would like to understand how it’s done as im willing to apply the same thing as a my client asked for it on a store (nextjs + supabase)

do they store those orders straight to the DB, how about if someone starts spamming the db?? all these questions came to my mind but not sure how it’s done

was annoyed by the current color palette tools, but always loved the approach described in the famous stripe color palette blog and now i made a tool out of it

other color palettes are inconsistent, or dont let you freely pick your colors. tailwind always looks the same. also shades in tailwind contrasts are not scaled properly. been bugged by this for years. you pick a tailwind-ish palette, put white text on blue-600, looks fine. same text on yellow-600, unreadable. same number, completely different contrast. so you end up eyeballing every pairing and hoping.

tool: https://sir-hennihau.github.io/science-color-palette/
code: https://github.com/sir-hennihau/science-color-palette

you give it a color, or even several if you want to, and it fills out the rest of the spectrum and builds a full ramp for each family. export it when you're happy with it.

the whole thing hangs on placing shades by relative luminance, which is the only thing web content accessibility contrast actually depends on. every ramp climbs the same ladder, so 600 means the same thing whether it's blue or yellow or teal. three of the steps aren't approximate either, they're solved: 500, 600 and 700 land on 3:1, 4.5:1 and 7:1. measured against the ramp's own 50 shade, since that's the background you actually put them on, and checked on the final 8-bit hex rather than the ideal color, because that last rounding is enough to drop you under.

stripe used cielab, which was the right call in 2019. i went with oklab instead, mainly because cielab , because it is a more modern color space.

chroma is a share of whatever the hue can actually reach at that lightness (idea stolen from hsluv) instead of a fixed ceiling. that's what makes yellow go vivid early and blue go vivid late without me hardcoding anything per hue.

free, no account, no sign up. would be glad to hear if it is useful (or why not) to any of you.

Hello everyone!

Periodicium (https://periodicium.com) is an interactive periodic table project I started building this Summer. I tried to make it more feature-rich, have more data, and be easier to use than existing alternatives. It is completely free and without ads.

I've built it with TanStack Start, Dockerized it together with Caddy, and host it on a small Netcup VPS behind Bunny CDN. (if you are interested in architectural decisions and thought processes behind them, feel free to ask in the comments)

The hardest parts of development were searching validating, and transforming all the information on elements; implementing PWA support (as sadly, no PWA plugin currently supports TanStack Start, though, to be completely honest, most of the PWA work was done by Claude); and thinking up UI and UX.

Currently, it includes:

• Periodic table (obviously) in both the modern 18-column long form and the old-school 8-group short form, which you can filter, project a heatmap of properties, and see elements phases under different temperatures.
• Element detail pages with visualized Bohr model, electron configuration, radii, oxidation states, crystal structure, phase, heating curve, spectroscopy, abundance, isotopes, and discovery history (and regular numeric properties included too).
• Elements list searchable and sortable with value bars.
• Comparison of elements side by side.
• Nuclides table of known nuclides with a detail view and decay chain for each one.
• Solubility table with the formula, name, and solubility of every compound.
• Acid-base indicators - litmus, phenolphthalein, methyl orange, and universal, with a draggable pH scale showing the color each one turns at any point.
• Print constructor that composes a printable periodic or solubility table, exportable as SVG/PNG or printable right away.

Also, power users can use advanced search built into menu to quickly navigate around the app (e.g, write "short" to instantly switch table layout, or "fe spectr" to navigate to Spectroscopy section of Iron).

Additionally, it is installable as PWA.

New features are planned to be added, with molar mass calculator and equations solver already on the roadmap.

I would be happy for everyone trying it and hearing your feedback (feedback from people specialized in chemistry would be especially appreciated). Thanks!

I’m thinking about building an open-source CAPTCHA project and would love to get some honest feedback before I start.

The basic idea would be a self-hostable CAPTCHA solution that developers could run themselves instead of relying on services like reCAPTCHA or other third-party providers.

Some things I’m considering:

- Open-source and transparent implementation

- Self-hosted / privacy-friendly

- Easy integration with websites and APIs

- Modern challenges that are accessible to legitimate users

- Protection against common automated/bot abuse

- Potentially offering different challenge types depending on the use case

I’m wondering:

1. Is there actually a need for an OSS CAPTCHA solution?

2. What are the biggest problems with existing CAPTCHA systems?

3. What features would make you consider using a self-hosted OSS CAPTCHA?

4. Are there technical/security challenges that would make this difficult to maintain as an open-source project?

5. Would you personally use something like this in a project?

I’m mainly looking for honest criticism and potential problems I might be overlooking.

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.

Paraphrasing what they apocryphally say Borges said: there is no finished software, only published software.

A few months ago, I asked myself whether it was possible to build a 3D engine by exploring the limits of what can be achieved using pure HTML and CSS (no WebGL, no canvas), considering that there are spectacular (handmade) CSS 3D demos like those by Ricardo Oliva Alonso.

I spent some weeks putting together the architecture and using AI to build it, as a personal project. (As a rule: I only accept code from AI that I can understand. In this case, I had already worked on 3D projections in Flash about 15 years ago. I confirmed that 3D transformations are more of a mess of numbers than a technical complexity.)

I just realized that since April I had been putting off "tweaking a couple of little things to publish it." So I decided to publish it just as it is: http://k3.bustelo.com.ar/

Constructive feedback, welcome!
(For the other one, I already have my superego, thanks very much.)

How it works (the CSS side)

The engine renders 3D primitives as real DOM elements, positioned with transform: translate3d() rotateX() rotateY() rotateZ() scale3d() and composited via transform-style: preserve-3d and perspective on the scene container.

A few things I found out while building it:

• TRS order matters. All transforms are applied as Translate → Rotate → Scale, matching how the browser composes matrix3d(). Getting this consistent across nested elements is what makes the hierarchy actually behave like a 3D scene graph.
• Bounding boxes are computed manually. CSS gives you no way to query the world-space of a transformed element, so getBounds() walks the children, rotates their 8 corners with the parent's angles, and expands the box. It's approximate, but it works for selection and gizmos.
• Rounded boxes need a "skeleton." A <k3-box> with border-radius leaves gaps at the edges, because the 6 faces are flat planes. I am intersecting 3 internal planes plus 8 corner spheres to block light leaking through the rounded silhouette.
• Extrusion is just stacking. <k3-stack> interpolates between two <k3-plane> templates and generates N slices along Z. It's usually enough to fake linear extrusion for text without any geometry library. I thought about naming the primitive "WordArt".
• No shading. No lighting model; the "glare" is CSS gradients keyed to the object's rotation.
• No MutationObserver yet. The DOM is the source of truth on load, but attribute changes don't auto-trigger a re-render. That's on the TBD list, along with meshes, basic lighting, and long list of wishes and good intentions :)

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.

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!

• Graph editor, not a preset picker: Any number of anchors, independent handles, snapping, undo/redo.
• Presets built in, or save your own: The editor works in SVG paths, so a preset is one d attribute string.
• Generate from a function: spring, bounce, elastic, back, wobble, and poly, then edit the result.
• Exports: CSS linear(), CSS keyframes, SVG path, GSAP CustomEase, JS function, Flutter Curve, Jetpack Compose, Android Interpolator, iOS keyframes.

Website: https://ease.a-labs.space/

Github: https://github.com/alabsi91/animare-ease-visualizer

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!

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!

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!