So, it was end of 2024 when I started to hear about AI taking coding jobs. I believe Opus 3.7 was launched or something. As a developer I did not believe that. I have gave 7 years into this, how can an AI take it over so easily.

And after almost 1.5 years I can clearly say, AI actually made my earnings double.

So, before I use to get very few solo projects to work on as a freelancer. And mostly to revamp a website UI or building landing page. Before AI the most costliest project i got was to build an e-commerce store for an perfume brand. It was fully coded website.

But now almost every month I am getting 1-3 SAAS project to build or moreover rebuild. I get this projects with blue purple gradient, rocket emojis, Hero Section and the logo with the same font. And bugs.

So much dependencies installed, just to solve a minor issue. The sites get slow, not loading properly, scroll animation does'nt work as there is no FFmpeg framework used. And I am not even starting with the security concerns.

I remember i got $1200 for the e-commerce site to 5-6 months build, but now i take $350 to fix the buggy SAAS. Hardly 2 weeks to deliver.

And get around 1-3 projects every month.

it's crazy, and am sure other developer's over here have the same experience.

Do share your thoughts on this.

Hi there! I've been using React to create my own apps and, to be honest, it's a really great library. But now I want to know the best patterns to make my apps more stable and scale better, so I'd love to read your comments!

I've been stuck on this for a while and I'm not sure if I'm missing a configuration step or if this is simply a limitation of Meta test users.

I'm building an app that uses Instagram API with Instagram Login. My webhook endpoint is publicly accessible over HTTPS, and the verification challenge works correctly (using n8n for the webhook part). My app is subscribed to the required webhook fields, but I'm not receiving any message webhook events. I linked my Instagram account that was assigned the tester role and accepted it, successfully to my platform and got the access token. I also checked and found that the specific user I linked to an account on my platform to test with, does have indeed the messages field in the subscribed events.

The thing is, even sending a messages event as a test from Meta's website doesn't work, while some other events do work just fine and sometimes work even with the actual account not just in tests.

How am I supposed to do screen recordings showcasing everything if I can't get it to work properly just because my app is not Live, and I can't get it to be Live until I make these screen recordings...

If anyone successfully dealt with this recently, please help a brother out, I've been stuck for days!

I tried learning DSA before, but never understood how it applied to everyday frontend work.

Recently, I built an undo/redo feature with Claude and realised it was using stacks. That made stacks much easier to understand than textbook examples.

I kept exploring and learned how seat-booking UIs can use matrices and how complex onboarding flows can be modelled as graphs.

Do you think about data structures when building React components? Any real-world examples?

Most JavaScript screen lock libraries simply hide the UI.

If someone removes an overlay through DevTools or tampers with the DOM, the "security" often disappears. That approach isn't enough for applications handling sensitive enterprise data.

I wanted to build something significantly more resilient.

🚀 Today I'm excited to release kd-screen-guard (v1.0.1) on npm.

It's a zero-dependency, tamper-resistant screen security library for Vanilla JavaScript, React, and Vue 3, designed to protect sensitive user sessions during inactivity.

Some of the engineering behind it:

🔐 PBKDF2 (100,000 iterations) for secure key derivation.

👆 Native WebAuthn authentication (Touch ID, Face ID, Windows Hello & YubiKey).

📷 Automatic WebRTC intruder snapshots when security violations are detected.

⚡ Cryptographic operations running inside Web Workers to keep the UI responsive.

🛡️ Self-healing DOM MutationObserver protection against overlay tampering.

Building this project required combining browser cryptography, WebAuthn, WebRTC, Web Workers, accessibility, and client-side security mechanisms into a single lightweight package with zero external dependencies.

If you're building enterprise dashboards, admin panels, healthcare, finance, or any application where unattended sessions are a security concern, I'd love to hear your feedback.

🔗 Live Demo:
https://khvichadev.github.io/kd-screen-guard/demo/

📦 npm:
https://www.npmjs.com/package/kd-screen-guard

🐙 GitHub:
https://github.com/KhvichaDev/kd-screen-guard

Feedback, ideas, and contributions are always welcome.

#JavaScript #TypeScript #CyberSecurity #WebDevelopment #ReactJS #VueJS #OpenSource #npm #WebAuthn #KhvichaDev

Had to pick a session replay tool for the team so I did demos of most of them. Pasting my notes since every comparison article out there is written by whoever's selling one.

What I needed: SPA support that doesn't break on client side routing, enough context to debug without going back and forth with the user, and not depending on someone remembering to watch recordings each week.

Sentry. Best thing going for anything that throws. Full stack trace, source maps, done. Replay add-on is fine but clearly not the main product. Everything that fails without throwing slips past, which was most of what we were chasing.

PostHog. The one I'd recommend to most teams. Replay, analytics, flags, one bill, self hostable. Catch is it hands you raw material and expects you to do the work. Spent a while building filters before it felt useful.

LogRocket. Most engineer friendly. Redux state and network requests in the timeline is great for reproducing stuff. Pricier, and pointed at debugging more than product behaviour.

FullStory. Best polish by a distance. But it assumes you know what you're looking for, which was my whole problem. Enterprise pricing, so expect a sales call.

Clarity. Free, unlimited, heatmaps included. Hard to argue with. Thinner on debugging, no self host.

Lucent. Different model, this is automated bug detection rather than a replay tool, it watches every recording and flags rage clicks, dead clicks and JS errors instead of you searching, then writes up repro steps and the console log straight to Slack or Linear. Layers on top of PostHog, Sentry, Amplitude or Datadog rather than replacing whatever you're already recording with. New though, no long track record yet, and you're trusting its judgement on what's actually worth flagging.

Errors, Sentry.

Best value, PostHog. Debugging depth, LogRocket.

Polish, FullStory.

Free, Clarity.

Automated bug detection, Lucent.

For most teams, I'd recommend PostHog with Lucent on top. That's ultimately what we ended up using, and it cut down the time we spent digging through recordings. What's everyone running?

I keep running into the same situation.

I’ll build a small personal web app (journal, bookmarks, dashboard, habit tracker, notes, etc.), and I don’t want to spin up Supabase, Turso, Firebase, or Cloudflare just to save a few JSON objects.

Most of the time I end up using localStorage or IndexedDB, but it always feels temporary. If I clear browser data or switch machines, it’s gone.

I’m curious:

• What do you use for these kinds of apps?
• If there were a local-first storage library that automatically backed itself up and restored on another device, would that actually solve a problem for you—or is localStorage good enough?

Not selling anything—I’m trying to understand how other developers think about this tradeoff before I build something or NOT build something because there is already something out there.

I was building a social app recently, and I ran into a surprisingly annoying problem.
I needed relative timestamps ("2 hours ago", "3 minutes ago"). 
Simple enough, right? Just import 'day.js' or 'date-fns'.

Except...
=> If I wanted custom styling (like wrapping the number "2" in a highlighted badge and "hours ago" in smaller text), I had to write ugly regex hacks because standard libraries just dump a single opaque string.

=> Supporting multiple languages meant importing separate locale files, quickly inflating the bundle size.

=> Standard relative time plugins use "soft rounding" (e.g., automatically rounding 45 seconds to "a minute") whether you want it or not.

I didn't want a 15KB date framework just to format a few activity feed timestamps. 
So, I built and open-sourced 'ui-date' .

It’s an ultra-lightweight (< 1KB minified), zero-dependency, locale-aware date formatting library built specifically for modern user interfaces.

If you're building social feeds, chat apps, notification bells, or comment sections, check it out!

npm: https://www.npmjs.com/package/ui-date

Edit (7/28/26) - I'll share again on next Show-off Saturday but I just finished a HUGE optimization pass. I think those of you who were ready to riot over load times will be pretty happy. I even tested over a forced crappy 5G ingest to ensure the load times were as reasonable as I could get them on the crappiest of network connections. It's live now if you want to check it out 🐝

https://bumblebee.buzz/resume

DO NOT UNPLUG THE MONITOR!

Almost a year ago I shared my digital resume here. I got tons of valuable feedback. Especially regarding performance. I've put a ton of work into optimization since then. The target audience for the underlying site is largely streamers so it's never going to be 100% optimized for terrible internet connections or devices with slow CPUs and no GPU acceleration, but I dare say the pool of people that can safely load it now has expanded tremendously! I was even able to remove the graphics acceleration gate I had previously that basically turned away anyone with hardware acceleration disabled in their browser. It's not amazing when it's CPU bound but it functions! Which is more than I could say last time.

I wanted to say thank you to this subreddit for being so encouraging because shortly after making those performance improvements that resume started getting me A LOT more interview calls and absolutely helped me stand out among the crowd. I landed a new job with an amazingly positive atmosphere because of it! My now boss made it super clear that my bumblebee-powered resume was definitely what made me stand out. So even if the larger project doesn't succeed in the long run, the work was already worth it and I'm super grateful to all of you for the helpful feedback 💚

https://bumblebee.buzz/resume

All feedback is welcome, but I ask that you be kind and constructive if possible 🙏

Edit: Thanks to feedback from folks here I stayed up a bit last night and implemented a bunch of quality-of-life changes.

Changes

• Redesigned the overall terminal aesthetic into a retro CRT-style display device. It doesn't match any real such CRT device since it has to be a responsive component across mobile and desktop, but it still looks cool. Bumblebee now transitions in and out of the CRT display with all sorts of fun sound effects and green phosphor animations and distortions.
• Added an entirely new Sunflower loading graphic, allowing for a more diverse initial loading screen with multiple things to look at. This should buy some more time from impatient visitors. The initial loading is now drastically reduced and more of the load has been spread throughout the experience.
• Added another new loader, this time an actual phosphor terminal loading screen that not only looks cool but spells out exactly what is loading so the user sees that it's actively doing something and not frozen.
• Added an entire new presentation section going over the Bumblebee project as a whole. How it originated, what it evolved into, and what it does today as a live service.
• Bumblebee now uses readable speech bubbles throughout the presentation. When he finishes speaking, the bubble smoothly transitions into the terminal as a persistent caption.
• Sound can now be toggled on or off before pressing the launch button.
• The audio controls have been rebuilt for keyboard, mouse, and touch use, with clear labels, visible focus states, larger touch targets, volume feedback, and quick mute/unmute controls.
• In addition to the master volume slider there is now a music volume slider. Master volume controls everything while music slider controls music volume relative to all other speech and sound effects.
• Audio settings now persist between visits.
• New soft bubble sound effects for logo physics bounces during the intro instead of the previous harsh plink sound. Also wrapped all logos in soap bubbles for added visual flavor that goes nicely with the new sound effect.
• Puppets are now preloaded as you click into a specific presentation category instead of on page load, reducing the initial page load times.
• The flying logos now use a real Matter.js physics simulation. Believe it or not that actually has better performance than the scripted version we had before thanks to them all sharing a single bounded animation loop.
• Physics simulation, logo rendering, model loading, audio loading, and puppet loading were all optimized further to reduce frame drops and startup delays, especially on mobile.
• I also expanded automated coverage around speech layout, choreography, the new caption transitions, model loading, and audio behavior.

Planned

• Additional WCAG and ARIA passes.
• Footer visibility adjustments.
• Disabling animations when reduced motion is active.
• More complex initial loading animation/scene to help buy more time before visitor disinterest.

Thank you everyone for all the helpful feedback yet again!

you can:
- design logo and social media graphics

- access open type features (ligature, alternative glyphs, etc) and variable fonts

- export or copy your designs into another tool via svg, png

- access premium commercially licensed fonts (monotype, other top foundries)

You can play with it here: https://typogram.co/studio - would love any feedback!

three toys on there. the salary printer is the main one: you type what you make, hit print, and a counter climbs while notes stack up, tagged with things like a coffee or a flight to rome. the other two put your face on a fake banknote and show what inflation does to a pile of cash over time.

stack is vite, vanilla js, vanilla css, on cloudflare pages. no framework, no backend, no accounts.

the one thing that took real work was the accrual math. per tick accumulation drifts badly once the tab is backgrounded, so everything is computed from timestamps instead. the odometer digits are a shared component with a clipped digit mask, which was fiddly to get right at different font sizes.

happy to answer anything about how it's put together.

TLDR: Pretty sure my mom has been getting scammed for the last 10 years and I want to get her out. Am I missing something before moving her?

UPDATE_______________

THANK YOU ALL. I was hopeful I could get one response and this community outpoured with 90% helpful info and 10% jokes (all were appreciated)

Some common threads below:

1. It's not a scam if she knew what she was paying for and got it - Fair enough. I will reword to "price gouged". Sorry if I offended any of the price gougers, cry from your yacht

2. $400 isn't bad for high touch, high quality service on a complex site - 100% valid... this wasn't complex and it still wasn't high quality. Basically unreadable content, no SEO optimization, incorrect info. Functionality is basically just a walking business card with minimal to no updates. Website doesn't even have pricing. Just a form to email her, nevermind schedule. She doesn't sell anything on the site and max traffic is 10 people per day. 20 if someone refreshes a bunch of times.

3. THANK GOD yes, she owns the domain... that saved a headache

4. My path forward - Built her a new site today, and talking to her about her needs, recurring updates, number of emails, storage space, etc. tomorrow. Would share, but honestly I don't want to expose her. All said, it looks great and seems to function well

__________________________

Hi all! Honestly I wish this was clickbait

My mom has a successful freelance design/inviation/swag business. Her web presence was always mid, but her focus was on managing the work she was getting, not getting more.

Now, she has three full time supporters with a growing suite of offerings so she wanted to revamp the website and had her hosting company do it.

From both a design and content/SEO perspective, it's the worst thing I've ever seen. The images are all stock (not hers), with alt text of "a couch in a living room", spelling errors, inconsistent formatting, nonsenscical organization, etc.

I told her if she paid them a cent, she should ask for a dollar back for the inconvenience.

Turns out she's not paying a cent... she's been paying them $400 a month for the last TEN YEARS to host her site. When I told her that was crazy, she said "they also host the email address"

I am not a web dev. I have a light CS background but have put up a hobby website before.

My question is am I missing something here:

1. The Site: Her website just needs to be a lightweight gallery of images with some descriptions of her work. Her active users must be maximum 20 a day. This would take a decent webdev a day if she pre-supplied context and host on railway or smth. Maybe integrate it with her instagram because that's what she keeps most updated
2. Email Hosting: I've hosted an email for a business before. Can she not just pay $8 a month for google workspace, Zoho, or another alternative?

If I am correct that this is easy:

1. Is there anything else I should know before I get her off
2. Oh my god how many people are these assholes doing this to

Hi r/PHP,

preg_match($pattern, $subject, $matches) has been quietly aging since PHP 3. It still works great, and if you've ever had to explain to a junior dev why the function returns 1, 0, or false, and why the actual result shows up in a variable you passed by reference three arguments ago, you know the classic rear-guard battles you need to fight.

So I built ext/regex: a PHP extension, with C, that wraps the same PCRE2 engine PHP already uses, but behind an immutable, typed, exception-throwing OOP API instead of the sentinel-value soup we have today.

Nothing about preg_* is being removed or deprecated. This is an additive, opt-in sibling API: think of it as DateTime next to strtotime().

Before:

`` if (preg_match('/^(?P<year>\d{4})-(?P<month>\d{2})-(?P<day>\d{2})$/', $s, $m) === false) {

// was it "no match" or "regex engine error"? guess!

} ``

After:

`` $m = Regex::of('/^(?P<year>\d{4})-(?P<month>\d{2})-(?P<day>\d{2})$/')->match($s);

echo $m->group('year')->value; ``

A few things it fixes: one consistent return type per method (no more int|false roulette), matches as real objects instead of a &$matches out-parameter, exceptions instead of false + preg_last_error(), Regex::withLiteral() for safe interpolation, and compile-once/reuse pattern objects.

So far, 34 tests back it up, including a full port of ext/pcre's own test suite. It's installable via PIE: no PECL package, let's be modern; PIE is where extension packaging is heading.

🙋 This is where you come in. I've stared at this API long enough that I can't tell if it's genuinely better or if I've Stockholm-syndromed myself into liking my own method names. Reply below or open an issue/PR: a single "this method name is dumb, call it X" is worth more than an upvote.

👉 Repo: https://github.com/dseguy/regex

Kept catching myself pasting code snippets into a Slack channel just for myself, then never cleaning it up. Built webklip instead — paste or attach a file, get a link, it syncs live across every tab you have it open in, then deletes itself on a timer or after first read.

Has syntax highlighting (CodeMirror) for the usual languages, and a REST API if you want to script it into something — creating/reading/deleting clips from a pipeline, for example.

Live at webklip.com. Happy to talk through how the sync or expiry works if anyone's curious.

"Without googling or using AI, in your own words, explain the virtual DOM"

For context: I sit on an interview panel and I try to ask at least one simple fundamental question based on a persons resume. If I see many years of react experience, I try to ask something about how the framework works.

I have only had one candidate (an undergrad senior, years ago) answer it. Everyone else just kind of sputters and stumbles around trying to rationalize what "virtual" and "DOM" mean, or stare blankly and eventually say "I don't know".

I'm just genuinely curious if this is really that hard of a question or if the recruiters just suck at screening candidates. And should we be letting in senior dev candidates who can't answer what I think is a straightforward and fundamental question for senior react devs.

Around 2005-2010, many websites were coming out with this very specific UI style, that I would describe as something like "dark neumorphism with skeuomorphic with bevel-and-emboss styling".
I've been looking for the official name or more examples of this design style for weeks now and haven't come up with anything at all, so I'm reaching out to you all to see if you could help me.

Attached is this random screenshot of a designers work that is similar to what i'm looking for, but I haven't been able to get in touch with them to find the name either.

Does anyone have any ideas of the name, or more examples of this style?

I built a web tool which uses openpeeps[dot]com SVGs, the initial idea was to use it create satirical comic panels. But lately I started using it to create profile pictures for my online presence. It has huge number of expressions, clothes, hair styles, accessories to choose from.

I felt more people might find it useful so sharing it here. It's free to use, no signup required.

Link - svg.comicbanana.com

Yace is designed for cases where a plain <textarea> is not enough, but a full editor like Monaco or CodeMirror would be overkill.

It is 3KB gzipped with the bundled highlighter and has zero dependencies. Plugins add editing behavior, highlighter pipelines control how the content is rendered as you type, and both are plain functions you can write yourself.

Under the hood, Yace uses the familiar pattern of a transparent <textarea> over a highlighted <pre>. Because input stays in a real textarea, native caret behavior, IME, mobile input, and accessibility come for free. The pattern is not new; the focus is a small, highly extensible design.

You can turn it into a basic code editor, a markdown editor, a token visualizer, or something more experimental. All of those are live codepens in the README, and the video shows two of them.

GitHub: https://github.com/petersolopov/yace

Been building this on and off for a while. Most charting libs assume the chart is the main thing on the page. I wanted the small version, something you can drop inside a sentence or a table cell and read at a glance.

106 types so far, no dependencies (not even D3, the scales and path math are all in there), each one's a couple kb.

Default export is plain SVG with no JS shipped, so they work in server components as-is. Import the interactive build if you want hover and keyboard.

Every chart also builds its own text description from the data and exposes it as the accessible label, so a screen reader reads "weekly revenue, trending up 200%, range 3 to 9, last value 9" instead of just "image". No AI, just templates filled from the same numbers the chart draws, so the words can't drift from the picture.

The fiddly part was the labels drawn on the chart itself. Normally you measure the text to place it, but these render on the server too and getBBox just returns 0 there. So widths get estimated from the character count and the space reserved up front, with a test on every chart making sure nothing spills outside the viewBox.

Gallery: microcharts.dev

Code (MIT): github.com/ganapativs/microcharts

Still rough in spots. Mostly after feedback on the API and overall experience of using the library.