❌

Normal view

what do you actually look at first when something breaks in prod?

im trying to get better at debugging production issues faster. right now when something goes wrong i kind of just grep through logs hoping something jumps out, which works eventually but feels inefficient

curious what other backend devs actually check first. like do you have a mental checklist you run through? specific log patterns you look for? or do you mostly rely on monitoring/alerting tools to point you in the right direction?

our setup is pretty basic (node backend, postgres, some redis) and im wondering if im missing obvious stuff that would speed up the "wtf just happened" phase

submitted by /u/quietcodelife to r/webdev
[link] [comments]

Good providers for hosting a basic html + js website?

I feel this may seem like a very strange question to ask given the circumstances, and hopefully this isn't breaking any rules. A few days ago I had a falling out with someone who happened to be hosting my website on their rented server. It's a very basic portfolio website with HTML and some JS for dynamically generating HTML elements from a Json file.

I'm pretty decent in HTML and JS but by no means a web developer, it's simply not my career. This means I can make a decent website but figuring out how to host it is beyond me. Are there any services that simplify this sort of thing, or is the process of renting and setting up my own basic server for a website straightforward? Github Pages maybe? Forms etc are not required.

I also own my domain, but it's currently still set up to link to that server. Once I get my own sorted out, will I have to worry about the two conflicting?

submitted by /u/nobaaaaaa to r/webdev
[link] [comments]

Monthly Getting Started / Web Dev Career Thread

Due to a growing influx of questions on this topic, it has been decided to commit a monthly thread dedicated to this topic to reduce the number of repeat posts on this topic. These types of posts will no longer be allowed in the main thread.

Many of these questions are also addressed in the sub FAQ or may have been asked in previous monthly career threads.

Subs dedicated to these types of questions include r/cscareerquestions for general and opened ended career questions and r/learnprogramming for early learning questions.

A general recommendation of topics to learn to become industry ready include:

You will also need a portfolio of work with 4-5 personal projects you built, and a resume/CV to apply for work.

Plan for 6-12 months of self study and project production for your portfolio before applying for work.

submitted by /u/AutoModerator to r/webdev
[link] [comments]

[Showoff Saturday]: Handcrafted HTML-first progressive framework that outperforms React

[Showoff Saturday]: Handcrafted HTML-first progressive framework that outperforms React

Places.js is a HTML-first framework inspired by htmx and Solid.js signals with these features.

  • Component agnostic stores that can be integrated with vanilla JavaScript or other frameworks.
  • HTML-first pages configured through static site generation or server-side rendering.
  • No build step. Places.js can be downloaded from a CDN.
  • Partial re-rendering with signals.
  • Zero dependencies. Places.js is written entirely in vanilla JavaScript.

Places.js is optimized for fast performance. Here are some results for Places.js v0.1.0. from the the Krauset JavaScript Framework Benchmark

Places.js Solid.js Svelte Lit Vue React
Time to render 1,000 rows in milliseconds 19.8 21.4 21.8 23.3 23.9

To get started, download the places-js-latest.js file from the jsDelivr CDN. See the reference guide for a detailed tutorial.

Relevant links

Upcoming priorities

  • Adding more unit test coverage.
  • Compatibility with other hypermedia UI tools including Datastar and htmx
  • Implementing hypermedia controls.
  • Testing integration with Leaflet and other mapping libraries.

AI policy

All Places.js contributions including code changes, comments, or new issues are made by humans This means no use of ChatGPT, Claude, or any other AI tool.

Edit: Detecting rows that are swapped or deleted

I have logic that detects rows that are moved or deleted. Components are then notified to make the necessary rendering changes, and subscriptions are moved from the store.

On Krauset, swapping two rows takes 12.7 ms and removing a row takes 10.3 ms.

submitted by /u/create-third-places to r/webdev
[link] [comments]

[Showoff Saturday] - Free & open source Stock Market Earnings Calendar

[Showoff Saturday] - Free & open source Stock Market Earnings Calendar

Hi, fellow devs

If you enjoy some stock trading after yelling at Claude/Codex all day, than we are in the same boat.

I like to keep an eye on earnings and major key indicators (always forget about those FOMC meetings), and I don't mind paying for some data, but Earnings Hub charging $20 for earnings calendar is too much.

Anyway, came up with my own with publicly available data.

Eventually thinking maybe, we can have some kind of open-source market tools, that user can configure on his own. Add whatever panels or data he/she wants to make it more personal.

What's done

- Earnings Calendar with earnings report
- Market Fear/Greed indicator
- Key market dates

Working:
- GexData
- Notifications (not sure if those are needed)

Would be glad to hear any suggestions

Cheers, Dan

Edit - links:

Open Market · Earnings calendar
FullPokerFace/open-market: Stock market tools for open minded people

submitted by /u/NetworkEducational81 to r/webdev
[link] [comments]

A synoptic to help my dev and DevOps colleagues to understand what I've done

A synoptic to help my dev and DevOps colleagues to understand what I've done

I maintain an ongoing open-source project that reads OTel traces and flags I/O anti-patterns with a carbon estimate on top. The project started in March so it's about 8 months old.

From our conversations I could tell my dev and DevOps colleagues were missing a lot of what goes on under the hood since we deployed this in production 3-4 months ago so I built a synoptic to make it easier to understand.

It's an animated step-by-step walkthrough of the whole pipeline, from raw spans to a finding. Each stage maps to the actual module in the code. You can play it, step through with the arrow keys, change speed or switch between modes.

It took me over 3 months. And no it's not AI slop bc it's pretty useless when you ask it to turn complex code concepts (I/O anti-patterns and more) into clear diagrams. This only exists because I'd already written a ton of docs and drawn a lot of diagrams by hand so the synoptic grew out of that.

Some of the UI is inspired by a videogame I loved playing some years ago: Deus Ex: Mankind Divided.

The project is AGPL-3 so no fake open source and it's now hosted by the INR (Institut du Numérique Responsable), a French nonprofit working on the environmental and social impact of digital tech.

Direct link to synoptic: https://perf-sentinel.dev/synoptique/
Website of the project: https://perf-sentinel.dev

Thx for your attention :)

EDIT: huh, just noticed that the recording console is sticking out over the gif in the bottom left corner

EDIT 2: this is a public-interest project focused on sustainability with no greenwashing BS. It has serious public policy goals and solid scientific background: cutting wasted energy and the carbon emissions that come with it. If you're interested in helping with the ecological transition our world needs, feel free to come lend us a hand! :)

submitted by /u/Lightforce_ to r/webdev
[link] [comments]

Procedural Almanac - A JavaScript library of procedural generation techniques with citations for every function

Procedural Almanac - A JavaScript library of procedural generation techniques with citations for every function

For week 2 of r/hacktoberfest I cataloged all the procedural generation techniques I could find online and put them into a library using vanilla JavaScript. Every technique in the library includes a citation and it has no dependencies. Works in the browser or Node.

The island in the GIF was generated using just the library.

GH repo: procedural-almanac

Demo: Random Island Generator

All stars on Github are appreciated!

submitted by /u/BlaiseLabs to r/webdev
[link] [comments]

My Mum and I made ItWord- a daily word game about uncommon words

My Mum and I made ItWord- a daily word game about uncommon words

I've been teaching my mum to code in Python, and a few months back she made a little CLI game where you have to enter words using the start and end characters from a single word. She named it ItWord, as in 'iterate word'.

I thought it was a cool idea. As a web developer, my first thought was that it'd be a nice daily word game format like Wordle. A lot of work and collaboration later, and here we are.

Please give it a try, and we're welcoming all feedback!

submitted by /u/_Benefaction to r/webdev
[link] [comments]

How do you think existing websites will be affected by the onslaught of AI assisted "vibe coded websites" in the market?

As above... Especially those which are more geared towards being startups at the present stage.

For context, I am currently overhauling my existing blog (that uses the WordPress framework and plugin ecosystem), and am looking to pivot it into having ecommerce and social network components.

As part of that sunk cost, I'm in no position to change course now.

But despite that... And not taking into account my situation, what can existing websites do (especially those which are startups and which are in the blog, community, ecommerce etc space) to ensure that they don't get overwhelmed by the AI vibe coded onslaught that is going to engulf the market and the internet?

submitted by /u/prankster999 to r/webdev
[link] [comments]

What changed in my endless Three.js driving game after two weeks?

2 weeks ago I shared Planet-0 Drive, an endless low-poly driving game I’ve been building with Svelte and Three.js (my first hobby game that I build after work and around weekends).

First of all, thanks to everyone who tried it (300 of you) and shared feedback! I didn't expect to get so many useful suggestions, and I've spent a good part of the week working on improvements based on them.

While the game runs fine

Since then, I’ve been working on the parts around driving that make exploration feel more meaningful.

The biggest additions are:

  • Revampled the whole look and art direction of the game to be more appealing
  • More biome-specific scenery, including snowy pines, desert cacti, boulders, and reactive weather materials
  • A refined vehicle lineup with three vehicles: Rover, Drifter, and Hopper
  • A battery system with charging stations, power-cell pickups, low-power driving, and boost energy management
  • Cruise control for more relaxed driving, especially on mobile
  • Persistent driving records and platform-visit tracking
  • Shared room leaderboards for driving and exploration records
  • A first quest system, starting with collecting resources across the planet
  • Improved touch controls and a more compact mobile HUD

The project has gradually shifted from “how far can I push a procedural 3D world in the browser?” toward “how do I make spending time in that world enjoyable?”

That has led to some interesting design challanges. How much progression should an otherwise relaxing driving game have? How do you reward exploration without turning it into a checklist? Should there be more risk?

I’m still experimenting with those answers, but the game feels much closer to the idea I had originally: a place to drive around, discover things, set records, and occasionally meet other players.

You can try the latest version here:

https://planet0drive.vercel.app/

The project is still very much in early development, so I’d especially appreciate feedback on how the driving feels, how the progression comes across, and what would make you want to come back for another drive.

submitted by /u/zaxwebs to r/webdev
[link] [comments]

When you integrate with a big vendor API, do you build against most of the docs or just a few endpoints?

I’ve been thinking about how teams actually work through vendor API documentation, and I realized I don’t really know how it goes in practice.

On a small integration it’s usually simple. You pick the four or five endpoints you need and ignore the rest. But on bigger ones (ERP, banking, logistics, healthcare), it feels like the team ends up needing most of the document, and the work gets split between people by section.

For those of you who’ve done this recently:

Did you use a few endpoints or most of the vendor’s API? Did you split the sections between several engineers, or did one person own the whole integration? How did you keep everyone working from the same understanding of the docs, especially if they were a PDF or a messy wiki? If the vendor changed something later, how did you find out?

Mostly curious how common each situation is. Any war stories welcome.

submitted by /u/Dev_Altera to r/webdev
[link] [comments]

The actual realities of AI affecting career of devs

So I do believe that web dev has changed dramatically in the last year or so and that one probably needs to expand their skills and a front end web developer is probably less of a safe long term career than I believed in the past due to AI. This is a shame as I loved the craft and challenges of front end development.

when I see online everyday how AI is going to remove the need for devs I do tend to end up believing this is the case. But then in my day to day job I see that this just isnt the case.

there have been a few recent examples. So people believe you can one shot things. Like the recent adobe reverse engineering. It looks great at first sight as the UI looks like adobe. All of a sudden you believe adobe will be out of business but when you try it out it full of bugs and doesn’t Really work, essentially smoke and mirrors. Also you look at the code and realise it’s completely unmaintainble due to bad decisions made up front by people who aren’t really experts in web development.

there is something I was thinking about also, when non technical people say “oh but the app already works, what do you actually do at work all day”. It kind of sounds true but in reality it is so far rrom the case - there are always bugs to fix, features to add, packages to update. sure, ai can help with this, but in a big app for example a package update can break something, Claude wont neccessarily catch this, but it will be us Mere mortals who will get a call and need to fix this.

also I have seen vibe coded projects where non experts in managerial roles who are creating software, which they are so proud of despite having no idea how it actually works. Then things start going wrong and things are breaking, it’s not the manager who is fixing it but the devs have to. and since the code has no owner and it’s a complete mess everyone is just one shotting the fixes and adding to the pile of 💩

this post is a little scattered but I’m hoping it makes some sense and people can see what I’m trying to get at

submitted by /u/AffectionateDuty6062 to r/webdev
[link] [comments]

How do you deal with third-party APIs that only ship PDF docs?

Just got handed a vendor integration where the entire “documentation” is a 60-page PDF. Half the endpoints are in screenshots, and one of the auth examples was wrong, which I found out the hard way.

My process is the same every time: read it, retype everything into Postman, write my own types, and hope for the best. It takes forever, and I’m never fully sure I got it right.

What bugs me even more is that vendors update these docs every few months and don’t tell anyone. You only find out when something breaks in production.

So how do you all handle this? Do you paste it into an LLM and hope for the best, build the spec by hand, or ask the vendor for something better (and do they ever actually reply)? And how do you even know when they’ve changed something?

I’m also curious if this is just me, or if everyone has a graveyard of half-finished Postman collections.

submitted by /u/Dev_Altera to r/webdev
[link] [comments]

Don't let AI steal your dreams

Unpopular opinion: I feel that as tech gets better at automating certain processes, the expectation of learning more complicated processes will kick in. But people outside the field cannot even begin to comprehend the basic process of not leaving the ports of your server open, or other basic CS best practices.

AI doesn't give it a second thought, and sometimes I've seen people trying to push in code that is absolutely grotesque. I'm not going to let the elite gaslight me into believing all this technical knowledge is not worth anything because you have a glorified Google probe.

So, can I do my work faster? Yeah. Does that mean I don't have to read the code? No. Can the people who pay my salary read the code as well and as fast as I do? Also no.

This is basically the calculator for accountants, and I refuse to let that analogy go. Does using a calculator make you understand tax law?

Everyone else needs to survive the famine and wait out the tech bro hype and Wall Street betting on AI. This industry the AI industry is bloated asf with no possibility of an ROI. If anything, people should be wary that their taxes are going to be used to bail out these industries for no public benefit.

submitted by /u/Enough-Team-4155 to r/webdev
[link] [comments]

How do you guys deal with constant progress in technology?

I'm actually curious about this one

With technology ever evolving and ai now assisting with the creation of sites, how do you guys deal the constant progress?

I honbestly thought about doing front-end once, tried my hand in learning to code, but I almost threw my computer out the window in frustration. Also didn't want to spend at least 4 years in college, with a lot of being meh since by the end of 4 years, it would be a different ballgame. Plus i value my freetime XD

What do you guys do to keep up? How are you implementing it? Etc

submitted by /u/VampyWitch666 to r/webdev
[link] [comments]

Why are banking sites (at least the ones I used) frequently designed so badly?

Why are banking sites (at least the ones I used) frequently designed so badly?

Do web developers not get the resources to understand any banking concepts? Here's a picture of the column order of pending wire requests you inputted. Why would you put amount in the last column and date in the middle? They recently updated their website and the columns feel like they're randomized, making it harder for us to review our entries as they changed the order. FYI I work in finance/acctg but I previously had a year of web dev experience looking into as a career few years back, so I have an eye for these things. Do non tech companies not heavily invest in their IT team, perhaps etc?

submitted by /u/redwon9plus to r/webdev
[link] [comments]

Your AI UI skill is doing the part you were supposed to learn

So a few of my friends have stopped using Figma. They go straight to production and make changes there.

When I first heard this I was honestly confused. Like where do you try things out? Where do you compare two versions?

Then I saw what they were building. The landing page feels like one product, the settings page feels like another, the dashboard feels like a third. Buttons are different, spacing is different, hover is different on every page. There’s no uniformity, no design system, nothing.

So I asked them how they’re doing it, and the answer is always “I use this AI skill” or “I bought this skill pack”. People are actually selling these now. Skill packs, prompt bundles, paid repos. And there are a lot of free ones on GitHub too.

It doesn’t make sense to me at all. How will you learn anything? And how will you polish the product if it looks different every time you generate it?

When I brought this up, someone said just add a memory file so it stays consistent.

Okay, but then how will you make changes? You never decided why the button has that radius or why it’s that grey. The AI decided. So when something needs fixing, you don’t know what to fix. You just prompt again and hope.

And now there are courses around this too. The idea is learn this design vocabulary, tell it to the AI, and you’ll get good UI. They call it beginner friendly. But then you see what’s inside and it’s stuff like:

  • spring easing, stiffness, damping
  • optical alignment
  • vertical rhythm
  • morphing transitions
  • 60-30-10 colour rule
  • type scale ratios

If a senior buys it, it’s fine. They already know what damping feels like, they know what they’re skipping.

But a beginner has never played with an easing curve and seen it go from cheap to smooth. Never moved something 2px and felt it finally sit right. They’re just memorising words and giving them to the AI. You can know the word damping and still have no idea when the bounce is too much.

Selling that as beginner friendly feels like a deceiving thing to me. You learn these words after you’ve actually done the work, not before.

Also design is never one try. I go through so many versions before something feels right. In Figma that’s easy, I put five versions side by side and throw four away. In production code every change costs time, so whatever comes out first just ships.

I’m not trying to dunk on my friends, they’re good at what they do. And I get why these skills are tempting. But paid or free, they’re doing the exact part you’re supposed to learn.

If you’re using one, just try building one page without it. Pick the hover, the spacing, the colours yourself, even if it’s bad. That’s literally how you get better at this.

Anyone else seeing this or is it just me? just my thoughts 🤷

submitted by /u/physiopeng to r/webdev
[link] [comments]
❌