So I had a lead reach out needing a custom financial workflow tool (payments, commissions, settlements, document generation, all that fun stuff). I did the homework → understood their requirements, even drafted a proper design doc, and quoted ₹135k (~$1.6k) for 5–6 weeks of work. That included secure login, full workflow, proper database, documentation, and a year of support. Guess what? They found someone quoting ₹10k (~$120) and decided to go with them. I didn’t even bother lowering my price. If they think a mission-critical system can be built for the cost of a dinner bill, good luck to them. I’ve seen this movie before — it always ends with “hey, can you fix what this other dev did?” Not salty tbh. I’d rather work with clients who understand cheap ≠ value. Anyone else been undercut by these “race-to-the-bottom” quotes? Do you try to explain the difference, or just let them burn and come back later?

I spent hours doing a stupid little CTF game, creating a CodeSandbox repo that met their 10 dumb little React hooks fizzbuzz style tests - as a prerequisite to even submit the job application. Spent another hour or so on a thoughtful, personable cover letter that explained my unique compatibility without throwing metrics and stuffing keywords in there. And I got a rejection email in less than 12 hours. If they're going to do it to me, then I'm just going full AI with my next cover letter. Fuck it and fuck them.

So I recently sold a website template I built clean layout, mobile-first, scroll effects, dark mode toggle, the works. It’s designed to be plug-and-play, and I even included a walkthrough for setup. Now the buyer’s asking for “fixes”… but they’re not bugs. They’re personal tweaks: Changing layout spacing Swapping out icons Rewording sections to match their brand All stuff that’s outside the template’s scope, but they’re framing it as “issues” that should be resolved for free. I get it non-dev clients sometimes think anything they don’t like is a bug. But I’m torn between being helpful and setting boundaries. I already priced the template affordably, and I offer a premium tier for full customization (which they didn’t buy). Anyone else dealt with this? How do you explain the difference between a bug and a personal preference without sounding defensive? Also curious: do you include a “customization not included” clause in your template docs? Or do you just eat the small stuff to keep goodwill.

I built [this little tool](https://github.com/NazzarenoGiannelli/image-to-webp-converter) to process and optimize thousands of image files for my main SaaS project. I wanted something portable, local and straightforward to use. Might be useful to others so I am sharing it here 😊 💬C&C are welcome ⭐Star it if you like it

Next time your PM, manager, designer, CTO, anyone says “hey make it so people can’t paste into this account number field” please say no. Or say “ok” and then straight up don’t do it. I don’t understand why anyone ever thought this would help REDUCE people inputting things incorrectly. If there’s a confirmation field I’m not going back to another app to look at my account number again, I’m copying it from the field directly above to confirm. At this point it just fields like a weird punishment.

Subscription page says -4.94K credits, but I can still prompt and make changes to my app. Reminder to stress-test your payment systems before launch

TL;DR I made a website, admitted it to Google Search Console and Webmaster, tweaked SEO, sitemap, robots.txt, SSGed. The website is month old and there is some traffic, but not from the desired country. I want to improve the traffic/views performance from targeted country, but I don't know how. Hi! I call myself a web developer for knowing TS/JS, React, Tailwindcss, but also regular HTML, CSS (even with Sass/less), old bootstrap... But up until today I never made something for the web that should perform publicly. I always coded internal apps, hobby projects and stuff like that. This time though I think I made something useful for people. I basically repurposed my old web scraper into a junior-level job board for my specific region. (it is suuuper simple, but should be legal and kind of useful) I tweaked the website to have near-perfect score in google's lighthouse. I admitted the website to google's search console and Bing webmaster. I SSGed the content so that the listings are always present even without JS. (though filtering/sorting won't work) I tried to make SEO as good as I can. The basics like sitemap and robots are present,but since it is basically single-page site I think it is almost useless. (Robots are allowed almost everywhere but API routes and there is no admin the site should function on its own automatically) I inserted analytics and I can see some traffic flowing (in range of tens for each country), but it is from all over the world, thus making it useless when it is suppose to target only single country. I know it takes time to gain some score/validity, but it has been month already. Do you have any ideas on how to improve the traffic? I am noob, so I would be grateful for any information that I can soak into my brain. Thank you all and have a great day! PS: I won't post the URL, because I self-host it on left-over iron and there is finite HW resouces, so unexpected traffic in range of higher hundreds (perhaps thousands IDK) might cause crash and OOMs 😅 I will deploy on actual hosting once I have extra free time.

I want to create an animated background on my portfolio. References: 1) [https://www.tingtingluo.work/](https://www.tingtingluo.work/) 2) [https://fundamental.bg/en](https://fundamental.bg/en) Where do i find such backgrounds and how do I embed them in my website?? I just hope it doesn't slow down my site. If there are any ways to optimize it pls lmk.

Does anyone have any suggestions for an ecommerce platform that has the potential to have 1000+ products? I am looking for something that can: * Integrate with quickbooks * Easily customizable in terms of public facing branding and design * Relatively easy to develop * Has an simple interface for inventory * Shipping and taxes are incorporated * Also, an obviously easy for a non-developer to update and edit * Additionally recommendations for hosting Anyone want to throwout a price that you would charge for a site design and development?

I’ve just started getting into digital marketing and am on the path to learning. I noticed that in their courses they use Bluehost for web hosting, but I’m looking for the best alternatives. Currently, I’m just starting out and I don’t want to spend time learning website development since I don’t have enough time for that. In the future, I plan to outsource developers—right now this is just about getting started and building stability in my marketing business.

I know this won’t be easy to do, but I may as well try. I’m the owner of an independent record label, within the top 1% globally. I’m looking to expand my user base, but working directly with users to distribute music each time is time consuming and not very streamlined at all. Essentially, I’m looking for a way to make almost like a Distrokid clone ー except more exclusive. Label member can log in, upload song, specify metadata, etc, I can see it from admin panel, then I move that data (No API) I have very little experience with coding and web development, I usually can create front end landing pages no problem, but I don’t know how I can easily make something like this. Any tips or advice would be helpful.

I started working at a nonprofit three months ago. My specialty is nonprofit communications, but I have an interest in web development and design. I accepted the position because I was supposed to be the liaison for the website creation and updates. They told my supervisor in July that there would be an up-and-running website by Sept. 1st for the holiday season. She said there was an initial meeting with leadership where they asked what was wanted, and then nothing. They didn’t ask for content. They don’t have any information on our departments other than what’s on our current website. I asked if they ever showed any mockups or talked about usability testing for our donors, anything about our donors. No. No check-ins, no nothing. This company is also supposed to be working with a marketing agency we hired for back-end tasks related to tracking donations. My supervisor revealed today that she finally got to see the website. It’s hardly functional—just ideas thrown on a page. Talking to her more, I learned our CEO is acquainted with the owner. Apparently, he is really active in a school district and made some changes...not to their website. The company is just this guy and a few family members and friends. I looked up the two “web devs” who were supposed to be working on our site part-time, and they are actors. I think most of them are. Apparently, one of them invited my leadership to see them perform during a work trip to Utah this weekend. They don’t have portfolios online showing their work. I’m convinced this company is just a cash grab. The site looks like something someone slapped together on Squarespace for the first time. My supervisor keeps saying she just wants the website done. But it’s not going to get finished. It’s clear they don’t know what they’re doing. This guy is still telling them everything is good. She said, “I’m wondering how many hours they’re billing for this?” Billing what? There shouldn’t be any payment happening here! How can I get them to move on from this so we can find actual professionals?  

Our weekly thread is the place to solicit feedback for your creations. Requests for critiques or feedback outside of this thread are against our community guidelines. Additionally, please be sure that you're posting in good-faith. Attempting to circumvent self-promotion or commercial solicitation guidelines will result in a ban. # Feedback Requestors Please use the following format: >**URL**: > >**Purpose**: > >**Technologies Used**: > >**Feedback Requested**: *(e.g. general, usability, code review, or specific element)* > >**Comments**: Post your site along with your stack and technologies used and receive feedback from the community. Please refrain from just posting a link and instead give us a bit of a background about your creation. Feel free to request general feedback or specify feedback in a certain area like user experience, usability, design, or code review. # Feedback Providers * Please post constructive feedback. Simply saying, "That's good" or "That's bad" is useless feedback. Explain why. * Consider providing concrete feedback about the problem rather than the solution. Saying, "get rid of red buttons" doesn't explain the problem. Saying "your site's success message being red makes me think it's an error" provides the problem. From there, suggest solutions. * Be specific. Vague feedback rarely helps. * Again, focus on why. * Always be respectful # Template Markup **URL**: **Purpose**: **Technologies Used**: **Feedback Requested**: **Comments**: [**Also, join our partnered Discord!**](https://discord.gg/web)

If you're new to web design and would like to ask experienced and professional web designers a question, please post below. Before asking, please follow the etiquette below and [review our FAQ](https://www.reddit.com/r/web_design/wiki/faq) to ensure that this question has not already been answered. [Finally, consider joining our Discord community. Gain coveted roles by helping out others!](https://discord.gg/Zv3BDusVUz) # Etiquette * Remember, that questions that have **context** and are **clear and specific** generally are answered while broad, sweeping questions are generally ignored. * Be polite and consider upvoting helpful responses. * If you can answer questions, take a few minutes to help others out as you ask others to help you. [**Also, join our partnered Discord!**](https://discord.gg/web)

https://preview.redd.it/4k2obig2hmkf1.jpg?width=1914&format=pjpg&auto=webp&s=2f89f9700d8e3b4267e613f79b01391ed05a56db https://preview.redd.it/vsxnqdg2hmkf1.jpg?width=1915&format=pjpg&auto=webp&s=feff6555f8e3aef464a042a4455959e8dbd6d555 https://preview.redd.it/fqqewdg2hmkf1.jpg?width=1912&format=pjpg&auto=webp&s=9f097e27ef013d066e342141fd6b3cc3ddbd1b84 https://preview.redd.it/6d7gtmg2hmkf1.jpg?width=1916&format=pjpg&auto=webp&s=7bf260bfa2f2ae87af107bec15c8a21f653c8608 Hello everyone! I'm building a website for work using WordPress, Elementor, and Woocommerce. This is the product archive that I have been working on. When I filter for all products, or just miter saws, my custom css works fine, but it breaks when it is just the table saw and tries to default to the widget's default styling. The widget I used is called Woo Product Grid. I've added images of the relevant sections of the css and the inspected html and I don't see any tags that are different that would be interrupting the styling, and the javascript is pulling the data from the same product archive, so I don't think it would be anything there either. Edit: All of the products are supposed to be in a div that looks like the ones for the miter saws, but it doesn't apply to the Table Saw when it's been filtered out by itself. Any help would be appreciated.

I found a great directory of templates and components for shadcn ui - [shadcntemplates.com](http://shadcntemplates.com) https://preview.redd.it/9f5e29fiilkf1.png?width=1270&format=png&auto=webp&s=a6d245e853ce9f8d4cfb96ded40dd66663c7dc48

I’d love to hear from you what’s in your AI stack? What tools are you using to turn days of work into hours? For us it’s mainly: * Claude / ChatGPT (daily) * Lovable / Bolt for idea generation * Figma tools to bring it all into design A few years back, we had no choice but to pivot. Customers weren’t happy with simple $1-2K sites anymore, so we started offering full packages with SEO, marketing and a bit of SEM. It kept us in business, but it also meant way more work for not a huge fee increast. Then AI landed, and suddenly we could create content, spark design ideas and move projects along faster than ever. Here’s the thing though lots of newcomers think AI is *all* you need. After 20+ years in this game, I know it isn’t. You can’t teach AI customer care, or the value of regular check-ins. At the end of the day, clients just want great results, and they don’t care how we get there. We still have to design well, put the hours into SEO and graft every month. But now, with the boost AI gives us, we’re confident enough in our timelines to actually take on more work.

https://preview.redd.it/haru9rc7efkf1.png?width=1395&format=png&auto=webp&s=dc9eb1f09155c7193ebde5e1a680c6303013c344 took inspo from a random screenshot of someone's portfolio i had in my laptop [website](https://tinyhead.space/)

I'm doing some research on old website designs from the 90's and I keep finding these things, but I have no clue what they're called. Is there a specific term for these types of images in website design?

I'm considering creating and selling e-commerce sites that already have a Printful integration and a pre-defined niche. Do you think this approach could work as a side hustle, or is it unlikely to be profitable or sustainable?

Howdy. I've been out of the web design game for a long time and it's evolved beyond me. I'm trying to figure out what you even call this kind of animation style and build. [https://www.spafax.com/](https://www.spafax.com/) Thanks in advance!

Every time I talk with small business clients, they lump UX, UI, branding, and dev into one. For freelancers, how do you explain UX vs UI to clients without overwhelming them or losing the project?

Title, been looking around for references buy only find examples on dribbble for tutoring companies and not ones focused around an individual. I have been looking at and using like portfolio website or resume websites as the closest thing, but if anybody else has any idea of what could be a good reference point or have one that would be great.

Hi everyone! I’m curious to learn how product designers, UI/UX designers, web designers, and marketers approach optimizing landing pages before they go live. What tools and methods do you use to test user journeys, spot drop-offs, and improve conversion rates? I’d love to hear about your typical workflow, the challenges you face, and what you wish worked better. If you’re open to a quick chat, please book a time here! [https://calendly.com/abbasingapurwala/new-meeting](https://calendly.com/abbasingapurwala/new-meeting) Thanks so much for sharing your expertise!

I’ve been building websites for years but lately it feels like clients just DIY it with templates/AI. Honestly tho if I ran a small (even med) biz, I’d do the same. Get 70% there with vibe coding and save the cash. AI isn't perfect yet but trying to convince clients otherwise feels like a losing battle. The trend’s too strong and the value of a website keeps shrinking. I’ve tried shifting my pitch (CRO, heatmaps, strategy). Hasn't landed at all yet. Am I targeting the wrong clients, or is the model itself changing? How are ya'll adapting? * High ticket custom/complex builds with in depth integrations (CRM, Conversion Tracking etc.)? * Adding strategy layers (CRO, funnels, ads)? * Pivoting into something else entirely? I know websites are still extremely valuable for businesses, but there must be a way for us to evolve and adapt!!

Hi everyone, I’ve been learning web design for a while now, and at this point, I can design full websites in Figma and Build it in Framer. feel ready to start taking on projects, start freelancing, and make professional websites. The problem is, I honestly have no idea where to find clients. I live in a rural area, and most local businesses/people don’t really need websites, so finding clients around here is almost impossible. I’ve also tried social media, but I still don’t know the right way to actually find clients there. For those of you who are already freelancing in web design/development — how did you start getting your first clients? Where should I actually look? Any advice would be really appreciated.

Hello. I'm not a web designer per se, but have a very good eye for design and have only ever used those "ready-made" sites and played with options and the like. I have no real coding knowledge. That said, someone is asking me to revamp their site and I'd like to help, but before I accept and get myself into any sort predicament I can't solve, what are some questions I can ask? For example, I don't know if their website provides these ready-made templates and options I'm familiar with. I don't know what to charge or how much change they want in their site. Is there a way you ask for these things and evaluate how to proceed (or not)? Thank you.

So I was messing around with an AI tool the other night and ended up putting together a super basic Taylor Swift fan page. It honestly looks like one of those 2000s fan sites we all used to visit after school 😂 It’s nothing fancy — more of a fun little throwback project than anything serious. Sharing a screenshot here just because it gave me major nostalgia vibes. [https://celebrity-landing.lumi.ing](https://celebrity-landing.lumi.ing/) Did any of you use to hang out on fan sites back in the day?

Hello! Updates to the rules below. **Be kind** when you're discussing with others. You can post and ask for feedback on your personal projects or portfolios. However, please keep in mind that **we do not allow self-promo spam, job offers, or anything like that - this is strictly about sharing and improving your** ***personal*** **projects.** If your post contains self-promotion, it will be removed.

I’m new to coding and want to build websites. Should I start with JavaScript, Python, or something else?

I bought a subscription on Envato and thought I’d get something of good quality, but there’s a lot of unnecessary code in it.

Hello there! I work in an investment bank in France and am currently working on a continuous deployment workflow that will mean any coming will be a production release candidate, assuming it passes through the several testing layers and environments we have. I am looking for public posts where companies have declared doing the same and actually share how they do it. All I’ve found so far is a 2022 blogpost by Monzo. Thanks! Ed

Do you test your apps manually, use automated testing tools, or a mix of both? 👉 I’d love to know what works best for you and what tools you use.

I have a website on for my business and my friend suggested I enable dark mode. The site building tool from the hosting site that I'm using does not have that option. When I asked support they say dark mode is not normally used for websites but rather for control panels and such. I have heard of websites enabling dark mode and I think visitors would appreciate the feature. Am I unreasonable in expecting this option?

What is the cheapest way to host a very basic website, no login just info about your business or like a blog or something. And what about websites with a webshop.

AI is speeding things up. Frameworks are abstracting everything. And beginner/intermediate devs are skipping the hard parts not because they’re lazy, but because the tools make it feel like they don’t need to learn them. No real debugging. No understanding of the DOM. Just copy-paste, deploy, and hope the AI was right. We’re building sites that look fine but break under pressure. We’re shipping code we don’t fully understand. And we’re getting confident before we’re competent. Drop your dev wake-up calls, your “I thought I knew what I was doing” moments, or the one thing you wish you’d learned earlier.

With so many tools out there (Figma, Webflow, Framer, WordPress, etc.), I’m curious… What’s the one design or dev tool you absolutely can’t live without in your workflow?

Hi everyone! I’ve been updating my web design portfolio and would love your honest thoughts. 👉 Check it out here: [**my portfolio**](https://awebstar.com.sg/portfolio.html) What looks good, and what do you think I should improve?

Alot of people discourage me from starting Webdevelopment by full stack courses and tell me to start by front or back first,And i find full stack to be more time saving on coursera,what should i do?

Edit: okay thanks guys, i did it Hey guys, so my designer and i were working on a portfolio webpage for me, so this is the projects section design (edit: video link https://files.catbox.moe/cdtop4.mp4) but I'm not sure how exactly to make it, i have some ideas but I'm not sure what's the best, currently I'm thinking of using a separate div for each of those variants, each div should contain the image with the text, then use transform to make it? So i would appreciate any hints or suggestions for how to start or what's the plan. Thanks in advance P.s: it should start as a big circle in the center, with 4 or 5 or basically a number of clickable circles around it, and when clicked on a circle it scales up and the big center circle goes to the right side, and after a while they just change over to the next ones (that automatically changing feature could be removed). And it's okay if it starts on a big circle or on the main menu with all the circles being centered.

Hi everyone, I am very new to SEO, and I am not even sure this is the right place to post but here goes. I tried posting in the SEO subreddit but it got removed without any reasoning. I have built some websites, they are not blogs, they are mostly tool websites, for instance one of them I have is a unit converter website. Another one is sort of a online checker that checks if a given website is up or not... anyway in all of them I see the same strange behavior, I usually get spikes in impressions, for instance an increase of 10 impressions per day all the way up to 200/300 and then a sudden drop all the way down. This has been a repeating pattern in the sites I have online and I cannot figure out why. I have ahrefs setup and the only thing I can see is that when I start getting more impressions the organic keywords in ahrefs also increase, but then the impressions drop and the organic keywords drop too. Is there anything I should be looking at? Thank you

Hello everyone! I'd like to introduce a library that I think will be a huge benefit to anyone working with WebAssembly and Emscripten: wasp-lib. This zero-dependency TypeScript library is designed to eliminate the common headaches associated with manual memory management, providing a much cleaner and safer way to interact with WebAssembly memory. The core problem it solves is abstracting away the complexities of pointer arithmetic, allocation, and deallocation. Instead of manually handling low-level memory operations, wasp-lib provides intuitive, type-safe wrapper classes. You can work with StringPointer, NumberPointer, and ArrayPointer as if they were standard JavaScript objects, while the library handles the underlying memory operations for you. Key Features: Zero-Dependency & TypeScript-First: It's a lightweight library written in TypeScript, ensuring a robust, type-safe development experience. Automatic Memory Management: It handles memory allocation and deallocation automatically, significantly reducing the risk of memory leaks. Boilerplate Reduction: It abstracts away repetitive and error-prone code, allowing you to focus on your application logic. Memory Safety: Includes built-in bounds checking and validation to help prevent common memory-related errors. Emscripten Optimization: The library is specifically designed to work seamlessly with modules generated by Emscripten, making integration a breeze. Whether you're working on image processing, mathematical computations, or even game development with WebAssembly, wasp-lib provides a more intuitive and robust alternative to manual memory handling. It's a great way to simplify your WebAssembly integration and make your code more readable and maintainable. You can find the package and more details on the official npm page: https://www.npmjs.com/package/wasp-lib. I highly recommend checking it out!

Jparse is a free online JSON parser and validator that helps developers quickly format, debug, and validate JSON data. It saves time, avoids errors, and simplifies web development tasks. Try it here: [https://jparse.com](https://jparse.com)

Some freelancer I know really thought AI was about to carry his whole career. Bro thought he could just get ChatGPT and Cursor to build websites for him and even get an AI running his python code for autmation and he simply just collects the bag. A month later bro has 10+ customers waiting for there completed website and the AI's have no idea what's going wrong, and ofc he doesnt know what could be the problem so he's gotta return the money and accept he's lost 1 month of his life. Just wanna remind y’all AI can be a good tool, even a great one. But you shouldn’t put your whole career on it. Unless your dream job is doing customer support for refunds

I studied websites and found this one [https://populous.com/contact](https://populous.com/contact) It's code has lines with || between css classes: <div class="c-form_item || c-page-form__item || c-contact_form-item -email"> Can someone explain what are they for? Do they affect browser behaviour in some way? Or that's just a visual sugar for easier perception? BTW, I've tried some code by myself. I created 2 classes, put || between them and they applied perfectly. So as for now I'm confused. If that's for better code readability - then OK. Anyway, I'll appreciate details.

I just published a guide on translating React apps with i18n. It covers: Why internationalization matters Pitfalls with i18next & react-intl A modern alternative approach with code examples 👉 https://medium.com/@malicecotedazur/react-app-translation-guide-for-i18n-i18next-and-react-intl-alternatives-813147472dd1 Curious to hear from this community: what’s your go-to i18n setup for React? Do you stick with i18next / react-intl, or have you found lighter solutions?

I'm a solo developer and I've just hit a major milestone by launching my project, **Webnutch**, into a public beta. It's a consolidated platform offering over 20 different micro-tools for PDF manipulation, image editing, and creative tasks (like background removal, PDF conversions, compression, etc.). I wanted to share this here because the architectural challenge was significant. The core idea was to build a modular system where new tools could be added as independent functions without disrupting the core platform. **The Tech Stack & Architecture:** * **Frontend:** React with a custom credit/hook system for managing tool usage. * **Backend:** Node.js (Express) API acting as a gateway. * **Core Processing:** A lot of the heavy lifting (file processing, PDF logic, image manipulation) is handled by dedicated worker services and powerful libraries like ImageMagick, Ghostscript, and PDF-lib. For AI features (like background removal and upscaling), I integrated third-party APIs. * **Storage:** AWS S3 for temporary file storage with pre-signed URLs for secure uploads/downloads. All files are purged after a short period for privacy. * **DevOps:** The whole thing is containerized with Docker and deployed on AWS ECS, which allows each service to scale independently based on demand. **The Biggest Challenges:** 1. **State Management:** Handling the state for file uploads, processing, and download across so many different tools without it becoming a mess. 2. **Isolation:** Ensuring that a failure in one tool (e.g., the PDF compressor) doesn't bring down the entire site. 3. **Cost Management:** Balancing the cost of expensive AI API calls with a fair credit system for users. This has been an incredible learning experience in full-stack development, system design, and cloud infrastructure. I'm open to any feedback you have on the technical approach or the implementation itself. If you're curious to see how it all came together, you can check it out here: [https://www.webnutch.com](https://www.webnutch.com/) I'm also happy to answer any questions about the stack, the development process, or the horrors of dealing with file format quirks! Thanks for reading.

Hi everyone 👋 I’m a full-stack web developer exploring **WebAR** with **react-three-fiber (R3F)** and would love some advice. My first project is to create an **info wall for an exhibition**, where users can hover over images to see more information. Later, I’d like to expand into more WebAR projects using the same tech stack, possibly integrating a **headless CMS**. From my research, the AR frameworks that seem best suited for my use case are: * [MindAR](https://hiukim.github.io/mind-ar-js-doc/) – seems solid for image tracking and works well with web apps. But it's not easy to integrate it into R3F. * **XR engines** like ZappAR and 8th Wall – powerful, but expensive and I’d like to stay independent. Other options: * [AR.js](https://ar-js-org.github.io/AR.js-Docs/) – seems outdated and largely replaced by MindAR. * [react-three/xr ](https://github.com/pmndrs/xr)– looks great for VR/HMD (Quest, etc.), but not focused on image tracking. My goal is to **combine R3F with an image-tracking AR solution**. I tried [react-three-mind](https://github.com/tommasoturchi/react-three-mind), but it didn’t work well for my project and is quite slow. I tried to integrate MindAR by myself but It's quite tricky, so I wanted to ask if there is a better solution? 👉 Has anyone here successfully built a **React + R3F + AR app** with **image tracking** or **other ideas**? Any pointers on tutorials, boilerplates, or best practices for **React-based WebAR applications** would be hugely appreciated 🙏😊 Thanks in advance!

**🔗 Watch here:** [**https://youtu.be/wSH--Six2b8**](https://youtu.be/wSH--Six2b8) **Ever wanted to build your own AI chatbot like ChatGPT?** I just uploaded a full **step-by-step tutorial** on creating a **ChatGPT Clone** using **HTML, CSS, JavaScript** – with support for both **OpenAI API Key** and **Groq API Key (FREE!)** 🎉 💡 In this tutorial, you’ll learn how to: * ✨ Build a **modern AI chat interface** (with clean UI + animations) * 🔐 Integrate **OpenAI** & **Groq** API keys * 🎤 Add **voice input & AI voice response** * ⚡ Implement **error handling & demo mode** 👨‍💻 **Who is this for?** * 🎓 **College students & project makers** * 👩‍💻 **Developers & professionals** * 🚀 **Beginners in AI & web dev** 🔥 Perfect for **portfolio projects, academic submissions, or personal learning**.

"Do you struggle with Ai generated webapps breaking as they grow? Would a pre-linked boilerplate help?"

Video link: [**https://youtu.be/Y-jNtKMPAbg?si=-ua9PfSwhPx3l7rO**](https://youtu.be/Y-jNtKMPAbg?si=-ua9PfSwhPx3l7rO) Hi everyone 👋 I recently created a **fully animated, modern personal portfolio website** and recorded a full 40-minute step-by-step tutorial for anyone who wants to build their own portfolio project. **Features in the website:** * Futuristic **neon gradient background** with animations * **Custom loader & cursor effects** * **3D floating shapes & parallax background** * Sections for *About Me, Skills, Projects, Timeline, and Contact* * Smooth scrolling + interactive hover effects * Fully responsive design 🔧 **Tech stack:** * HTML5 * CSS3 (animations, gradients, glassmorphism) * JavaScript (cursor, parallax, loader, GSAP animations) Full tutorial video (40 mins): [https://youtu.be/Y-jNtKMPAbg?si=y0W8rAzSWWtIkmmi](https://youtu.be/Y-jNtKMPAbg?si=y0W8rAzSWWtIkmmi)

I'm designing a store site and experimenting with smarter popup logic like triggering after a certain scroll, on exit intent, or when a product image gets attention. It’s been a challenge balancing performance with relevance. I tested some flows using claspo io because I needed flexible rules without heavy custom code. It feels promising, but it’s only one data point. I'd love to hear your thoughts what popup triggers or UI patterns have you used that increased engagement without irritating users?

Did you find or create something cool this week in javascript? Show us here!

**Monday, August 11 - Sunday, August 17, 2025** ###Top Posts | score | comments | title & link | |--|--|--| | 109 | [41 comments](/r/javascript/comments/1mnnjuv/jquery_400_release_candidate_1/) | [jQuery 4.0.0 Release Candidate 1](https://blog.jquery.com/2025/08/11/jquery-4-0-0-release-candidate-1/)| | 62 | [61 comments](/r/javascript/comments/1mo5xfx/askjs_rejected_by_ats_for_no_javascript/) | `[AskJS]` [AskJS] Rejected by ATS for "no JavaScript experience" despite 10+ years in TypeScript| | 13 | [8 comments](/r/javascript/comments/1mr42yh/should_analytics_get_ormlike_dx_an_ormadjacent/) | [Should analytics get ORM-like DX? An “ORM-adjacent” approach for ClickHouse in TypeScript (Moose)](https://clickhouse.com/blog/moosestack-does-olap-need-an-orm)| | 11 | [9 comments](/r/javascript/comments/1mo2o9k/logical_assignment_operators_in_javascript_small/) | [Logical assignment operators in JavaScript: small syntax, big wins](https://allthingssmitty.com/2025/07/28/logical-assignment-operators-in-javascript-small-syntax-big-wins/)| | 9 | [4 comments](/r/javascript/comments/1ms3mlv/i_wrote_an_article_about_how_to_build_shapes_from/) | [I wrote an article about how to build shapes from paths with a planar graph (in p5js)](https://www.amygoodchild.com/blog/building-shapes-with-a-planar-graph)| | 8 | [1 comments](/r/javascript/comments/1mo98im/signals_polyfill_version_based_on_aliensignals/) | [Signals Polyfill version based on alien-signals](https://github.com/proposal-signals/signal-polyfill/pull/44)| | 5 | [11 comments](/r/javascript/comments/1mrewjs/native_fetch_replacement_with_timeout_retries/) | [Native fetch replacement with timeout, retries, retry strategies, circuit breaker and lifecycle hooks](https://github.com/gkoos/ffetch)| | 5 | [4 comments](/r/javascript/comments/1mo69fq/stacktrace_is_underrated_how_i_use_stacktrace_for/) | [Stacktrace is Underrated: How I use stacktrace for non-error use cases.](https://www.heyfirst.co/posts/stacktrace-is-underrated/)| | 4 | [7 comments](/r/javascript/comments/1mp4feu/practice_building_fullstack_applications_with_hono/) | [Practice: Building Full-Stack Applications with Hono](https://rxliuli.com/blog/practice-building-full-stack-applications-with-hono/)| | 4 | [2 comments](/r/javascript/comments/1mn7zi8/your_rjavascript_recap_for_the_week_of_august_04/) | `[Subreddit Stats]` Your /r/javascript recap for the week of August 04 - August 10, 2025|   ###Most Commented Posts | score | comments | title & link | |--|--|--| | 0 | [42 comments](/r/javascript/comments/1ms61k9/askjs_when_should_you_define_types_in_frontend/) | `[AskJS]` [AskJS] When should you define types in frontend?| | 0 | [39 comments](/r/javascript/comments/1mswif3/got_tired_of_trycatch_everywhere_in_ts_so_i_built/) | [Got tired of try-catch everywhere in TS, so I built a Result type that's just a tuple](https://github.com/builder-group/community/tree/develop/packages/tuple-result)| | 0 | [25 comments](/r/javascript/comments/1ms2iyz/askjs_next_time_you_cant_figure_out_where_your/) | `[AskJS]` [AskJS] Next time you can’t figure out where your "alert" is coming from:| | 0 | [16 comments](/r/javascript/comments/1mo8m66/askjs_is_a_naive_ecmascript_implementation/) | `[AskJS]` [AskJS] Is a naive ECMAScript implementation necessarily slow?| | 1 | [15 comments](/r/javascript/comments/1mo696l/the_heart_breaking_inadequacy_of_abortcontroller/) | [The Heart Breaking Inadequacy Of AbortController](https://frontside.com/blog/2025-08-04-the-heartbreaking-inadequacy-of-abort-controller/)|   ###Top Ask JS | score | comments | title & link | |--|--|--| | 2 | [3 comments](/r/javascript/comments/1mngynt/askjs_from_react_to_deep_jsts_mastery_what/) | `[AskJS]` [AskJS] From React to Deep JS/TS Mastery — What courses do you recommend?| | 1 | [2 comments](/r/javascript/comments/1msvcq6/askjs_web_visemes_from_audio/) | `[AskJS]` [AskJS] Web Visemes from Audio| | 0 | [7 comments](/r/javascript/comments/1mp8s24/askjs_if_you_had_to_hire_a_dev_would_you_choose_a/) | `[AskJS]` [AskJS] If you had to hire a dev would you choose a "vibe coder" or a "traditional coder"?|   ###Top Showoffs | score | comment | |--|--| | 1 | /u/Impressive_Half_2819 said [We are bringing Computer Use to the web, you can now control cloud desktops from JavaScript right in the browser. Until today computer use was Python only shutting out web devs. Now you can automate...](/r/javascript/comments/1mrnm4t/showoff_saturday_august_16_2025/n971lr4/?context=5) | | 1 | /u/apalshah said [I built https://instanoodle.co In my company, I was working on an agentic AI workflows project. Right before the launch, I was removed from the project. So I decided to use my knowledge elsewhere. I...](/r/javascript/comments/1mrnm4t/showoff_saturday_august_16_2025/n91l8v4/?context=5) | | 1 | /u/catsmice_r said [I built **Oneliner** because I got tired of manually fixing broken commands every single day. You know when you copy a nice formatted SQL query or curl command, paste it somewhere, and it completely ...](/r/javascript/comments/1mrnm4t/showoff_saturday_august_16_2025/n9131ol/?context=5) |   ###Top Comments | score | comment | |--|--| | 74 | /u/anothermonth said [> We’ve trimmed legacy code (including removing support for IE before version 11)... Wait, there's one of you who still needs IE11 support??](/r/javascript/comments/1mnnjuv/jquery_400_release_candidate_1/n86fljp/?context=5) | | 61 | /u/syntaxcrime said [omg their website is just like i remember it was 15 years ago when i was still a wee undergrad. so much nostalgia lol](/r/javascript/comments/1mnnjuv/jquery_400_release_candidate_1/n86iwgb/?context=5) | | 55 | /u/dashingThroughSnow12 said [To answer your question, yes, put 10+ years JavaScript/TypeScript. Even if you have 10 years of TypeScript and just 1 year of ECMAScript. I do think the implications of only having only TypeScript ca...](/r/javascript/comments/1mo5xfx/askjs_rejected_by_ats_for_no_javascript/n89upti/?context=5) | | 39 | /u/polyploid_coded said [I write something like: JavaScript (React, TypeScript, NodeJS)](/r/javascript/comments/1mo5xfx/askjs_rejected_by_ats_for_no_javascript/n8a8yvr/?context=5) | | 36 | /u/Galex_13 said [If it is a large company working with many technologies, then it is strange to be surprised if, when the requirement is "knowledge of JavaScript", the HR manager will not accept a CV with Typescript, ...](/r/javascript/comments/1mo5xfx/askjs_rejected_by_ats_for_no_javascript/n8a4uj7/?context=5) |  

With Octos, you can make and share your own live, interactive wallpapers in HTML, CSS, and JS, or explore community contributions from the app. This has been a longtime passion project of mine, and I'd love some feedback on my project. Let me know your thoughts!

Dear JavaScripters, I am writing this post to ask you about your code editor. I know this might be a hot topic, and there are so many editors out there, but the question that I am putting to you here is a little bit different. ## How does your chosen code editor affect your workflow options? Did you choose that editor because of the inherent workflow associated with it? Do you feel like it limits your workflow? Or do you feel like it standardizes the workflow? That might be an important aspect too. Using the same editor as other people in your group might allow you to work together more effectively. What's your take on this? -dckimGUY

Hey folks, I’ve been working on a lightweight, open-source JSON viewer tailored for developers. It lets you: - Explore any JSON payload in a collapsible tree view - Real-time validation with line numbers and error messages - Beautify or minify with one click - Generate code snippets (JavaScript, Python & Java) for any node in your JSON --- [**Try the Live Demo**](https://json-viewer-app-psi.vercel.app/) Why you’ll love it --- - No servers, no tracking – runs entirely in the browser - Perfect for API debugging, data transformation, config file navigation, and rapid prototyping

Hey! I’ve built a small toolkit for the TypeScript world to make developing custom CLI tools easier and faster. I’d love for you to check it out! GitHub: [https://github.com/atasoya/komutan](https://github.com/atasoya/komutan) NPM: [https://www.npmjs.com/package/komutan](https://www.npmjs.com/package/komutan)

Dear JavaScript Community, I am writing this to ask whether anyone has knowledge about a method or means of promoting translation within the commentary within the code. This seems like an important issue to me, and feels like it could open up **cross-language-coding**. By that I mean, human language. The comments in our code are actually very important for context when collaboration is considered. If we can somehow have those comments provided to the viewer of the code in their own language, that would be wonderful, wouldn't it? There must already be a standard in relation to this issue. Is there anything that you know abou that covers this? Follow-up: Is there anything that you are doing, **in-house**, that covers this off for your own needs? And information in relation to this would be very beneficial. Thank you so much. Best wishes, -dckimGUY

Any platform that allows you to host a Node JS project for free and does not require a credit card?

We just released **geoai.js**, an open-source JavaScript library that brings GeoAI to the browser and Node.js, powered by Hugging Face’s 🤗 transformers.js. * Install: `npm i geoai` * Docs: [https://docs.geobase.app/geoai](https://docs.geobase.app/geoai)

I encountered this while debugging an API, where I found that my API calls produced results inconsistent with what was shown on the website. Since the API was paginated with dozens of pages, I was curious about the differences in their responses. As Chrome Network doesn't support exporting responses from all requests (only HAR archive files), I quickly put together a small tool to solve this problem.

Please give me some idea on this for making attractive and respectiv

I’m new to Java script and all, started a couple months back and I’m trying to have it so it sends a notification to my phone using a button, Discord Command or even an automated system for if there’s an issue it sends a notification to my personal device. I’m not trying to waste time if it’s not possible, I was thinking I might have to create an app on the app/play store for it.

Imagine you have many intervals, like thousands of date ranges and you get a specific date and want to know if it is covered by one or multiple of the given intervals. How do you do this quickly? From now on with what I called IntervalMap. It is like a Map, but the key is an interval: I recently learned it is also called Interval Tree here and there. Maybe you find it useful in one of your projects to make it more efficient.

hej folks! I’ve created `signalize` – a tiny, type-safe JS/TS library for **signals** and **effects**. Why another signals library? Because: * ✅ framework-agnostic (works with vanilla JS or TS) * ✅ runs in both Browser & Node.js * ✅ dead simple API → no boilerplate, just pure reactivity Would love your feedback 🙏

As for me, the choice of this structure is purely for navigation and order control. **I am on a pre-Git, oldschool BASH / VI setup.** The folder names follow the same rule and files are all not mixed with folders. What is your preferred structure/system? I am inclined to believe that there must be some interesting variation out there, and that they might be chosen based on all sorts of factors. For example, the preferred code editor might somehow render this completely moot. Also, if you are using something like Rollup. It might not matter what the files are called. This is unclear to me. What's your take? -dckimGUY

I built a guitar chord renderer that takes JSON and turns it into an interactive chord diagram. There is a button to play the chord sound and buttons on each finger position and open strings that play each strings note (so up to 6 buttons). There are also toggles for the speed of the chord playback and the size of diagrams. I have an "all" page that renders the main variation of all of the chords (12 notes with around 40 suffixes each so about 500 diagrams) that is a little laggy when changing diagram size or chord speed or using the scroll to the top button because of all of the elements that need to be re-rendered. I'm wondering what would be the best way to improve the performance or if I am just trying to render too many elements. The code can be found here: [GitHub](https://github.com/CalebSutherland/FreeTune/tree/main/client/src/features/chord-library/components) and if you want to test the website: [FreeTune](https://freetuner.vercel.app/tools/chord_library)

[https://music-map-main.vercel.app/](https://music-map-main.vercel.app/) Choose a song and place it where you want on a map. Only once though.

I'm new to react and I was wondering exactly what useContext does from the docs I could only tell that it's used to avoid having to pass props to all the components manually I'm wondering if it can control what re-renders like redux does so if I have a provider that holds some state and two children components with one of them calling useContext on the state itself and the other calling useContext on the setState only when the state changes wont the parent rerender causing all children to rerender regardless if they useContext on that specific state or not? or does it work like redux and can useContext be used like redux where rerender triggers for listeners only or is it like the docs says just used to prevent manually passing props

**MCPJam** Hi y'all, I'm Matt and I maintain the project [MCPJam inspector](https://github.com/MCPJam/inspector). It's an open source testing and debugging tool for MCP servers. The underlying project is built with Vite (React) with a Hono.js backend. Currently, people are spinning up the app by running a command via npx and downloading it from there: npx @mcpjam/inspector@latest We attempted to convert the project into a Electron desktop app a couple weeks back, but couldn't do it. We want to have a Desktop app version of MCPJam **What we need help with** We're looking for someone with experience in Electron to make the project a desktop app compatible across operating systems. Requirements we're looking for are: * The behavior of the Electron app must exactly match the behavior of the webapp ran on `npx`. * Future updates on the webapp must be easily transferrable to the electron app. * Must be as light weight and non-envasive to the existing repo as possible. We're looking to have someone help us do this as contract work and willing to pay. Please DM me or reach out to me on our Discord: [https://discord.com/invite/JEnDtz8X6z](https://discord.com/invite/JEnDtz8X6z)

Hey folks, I’ve been working on a lightweight, open-source JSON viewer tailored for developers. It lets you: - Explore any JSON payload in a collapsible tree view - Real-time validation with line numbers and error messages - Beautify or minify with one click - Generate code snippets (JavaScript, Python & Java) for any node in your JSON Why you’ll love it - No servers, no tracking – runs entirely in the browser - Perfect for API debugging, data transformation, config file navigation, and rapid prototyping --- [**Try the Live Demo**](https://json-viewer-app-psi.vercel.app/)

I've been working on HaltType in my spare time - a free, open-source typing speed test that focuses on what actually matters: clean UI, accurate measurements, and zero distractions. Try it live: https:halttype.com GitHub: [https://github.com/artistatbl/halttype](https://github.com/artistatbl/halttype)

Zustand (or any state manager) isn’t for fetching data, it’s for managing it like a little client-side db. putting fetch logic in there just teaches bad habits and makes projects messy. stop ruining especially jrdevs lives please.

I’m working on a trending pain points feature that shows recurring posts with issues over time (today / last 7 days / last 30 days). its not really a React question as the logic is on the server side im sorry if its wrong place to post, Just wanted to reach out to other devs for advice! The plan: /trends route displays trending pain point labels. Clicking a label shows all posts under that trend. Backend workflow: * Normalizing post text (remove markdown, etc.) * Generating embeddings with an LLM (OpenAI text-embedding) * Cluster embeddings (using \`const clustering = require("density-clustering");\` in npm as thats the only package i came across thats closest to HDBSCAN as thats only available in Python :( ) * Using ChatGPT to generate a suitable label for each cluster I’m new to embeddings and clustering, so I’d love some guidance on whether this approach makes sense for production, best clustering packages (HDBSCAN, etc, ive been told ml-kmeans is for toy data so i went with \`density-clustering\` npm package as theres no HDBSCAN in javascript ) for accuracy, also any free options for embedding models during development Right now, whenever new posts come in, I normalize text and save them in the DB and run a cron every 2 hours to fetch posts from the DB and run the buildTrends.js that embeds, clusters the posts and generates the labels! Here’s the gist with relevant code [https://gist.github.com/moahnaf11/a45673625f59832af7e8288e4896feac](https://gist.github.com/moahnaf11/a45673625f59832af7e8288e4896feac) – includes cluster.js, embedding.js(helpers that i import into buildTrends.js), buildTrends.js, cron.js, and prisma.schema please feel free to go through my code files and let me know if im on the right track. Ive done tons of research and this is what ive been able to come up with and im kinda scared LOL as ive never worked with embeddings and clustering before! Any advice or pointers would be amazing!

Hey folks 👋 We’re rebuilding a 1:1 video/text chat platform (think Omegle-style). * Backend: Express.js (handles signaling + APIs) * TURN: coturn * Frontend: we’re debating between **Next.js** and **React Router v7 (framework mode / Remix-style)** Our needs: * **SEO-friendly homepage** (SSR for ranking). * **App pages (chat/video)** → purely client-side rendered (no SEO needed). * Lightweight + fast builds (small team). * Easy integration with existing Express backend. From what I understand: * Next.js feels a bit heavy for a mostly-CSR app, but gives us SEO/SSR out of the box. * React Router v7 framework mode is Vite-based (lighter) and can plug directly into Express for SSR only where we need it. Has anyone used RR7 framework mode in production vs Next for something like this? What would you recommend (considering performance, dev experience, and future scalability)?

Any good map rendering libraries for React or Next.

Hi r/reactjs, I built a small MVP in one day using **React (Next.js)** \+ **Supabase** for a community idea board. Users can submit ideas and vote on them, with real-time updates. Some challenges I ran into and solved: * Real-time vote updates with Supabase Realtime * Authentication setup (email/password + magic link) * Database relationships for ideas and votes to avoid foreign key issues Here’s a live demo: [https://idea-generator-l411.vercel.app/](https://idea-generator-l411.vercel.app/) And a snippet showing how I handled real-time votes: supabase .from('idea_votes') .on('INSERT', payload => { setVotes(prev => [...prev, payload.new]) }) .subscribe() Curious how others handle **real-time updates and vote tracking in React apps** — any tips or best practices?

I work on the React client for an ERP suite where we were asked to integrate a third party feedback form via script injection. Several security questions were raised with DOM isolating being a major concern. A few ideas were thrown around, among them was to use a shadow DOM to render the form and separate it from the main tree. The form provider has an option to allow user to submit screenshots that captures DOM elements. Won't a shadow DOM hinder this feature? What options do I have to safety render this? I'm open to suggestion since the actual implementation is yet to be done.

i just find this nextjs channel so i wanted to share how small optimisations help me improve my lighthouse and performance , people already know but i just thought to share. 1:- over using ssr(degrade my performance) , so what happen is i am using free version of vercel to host nextjs and when i make many ssr components i find out lighthouse performance actually degrade , i found the reason because "SSR adds extra server work " its normal thing i forget that time , so what i did is only make hero section which is lcp section and navbar ssr and keep other things normal(it improve my numbers) 2:- Moving type animations degrade Lighthouse performance due to frequent reflow and repaint , this one really pain idk how to improve mobile performance my lighthouse always complaining about reflow i cant do anything about it for now(if anyone know proper solution write in comments) 3 :- use lazy loading for images its better if they are of less file size, it will load faster on slow internet and slow internet mobile phones and stuff.(everyone know just thought to add this here) Hey guys, I’m learning Next.js and new to this community — guidance from seniors would be really appreciated. the thing i am interested most is first thing is reflow type issue if anyone know how to actually handle that , i can also share my site if anyone wants to have a look i will share the url share any optimisation technique anyone want to share please tell me in comments i love to know

Hi guys, I have a question about caching feature flags in a medium-traffic system without quickly ending up with big bills from the providers. Let's say we have a scenario where * we have a few critical features using feature flags, for example, enabling or disabling payments in the app globally in case of provider issues or anything else that requires payments to be turned off, and changes to those flags should be instantly visible * we also have some normal features where instant visibility is not required after changing the flag value How would you approach this in my case? Should I split them into two groups, where the critical ones are checked frequently, maybe every minute, and the others are checked less often, for example on login or once a day? Or is there a better option? I also don't want to end up with two separate feature flag systems over time, so I am looking for the best balance for both user experience and developer experience, so the system stays easy to use and maintain. I don't know if the provider matters, but I will be using posthog for feature flags

I have a Next.js app running with Firebase, and since yesterday, every GitHub commit that I deploy to the app (through Firebase Hosting) keeps giving me an error about my `not-found` page, even though I didn’t edit it. || || |⚠ Unsupported metadata themeColor is configured in metadata export in /\_not-found. Please move it to viewport export instead.| ||Read more: [https://nextjs.org/docs/app/api-reference/functions/generate-viewport](https://nextjs.org/docs/app/api-reference/functions/generate-viewport)| || ⨯ useSearchParams() should be wrapped in a suspense boundary at page "/404". Read more: [https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout](https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout)| ||at s (/workspace/.next/server/chunks/921.js:3:18688)| ||at d (/workspace/.next/server/chunks/921.js:21:58219)| ||at o (/workspace/.next/server/chunks/952.js:12:1845)| ||at nF (/workspace/node\_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:76:46843)| ||at nH (/workspace/node\_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:76:48618)| ||at nH (/workspace/node\_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:76:64688)| ||at nW (/workspace/node\_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:76:67762)| ||at nz (/workspace/node\_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:76:65337)| ||at nY (/workspace/node\_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:76:71193)| ||at nX (/workspace/node\_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:76:69876)| ||Error occurred prerendering page "/\_not-found". Read more: [https://nextjs.org/docs/messages/prerender-error](https://nextjs.org/docs/messages/prerender-error)| ||Export encountered an error on /\_not-found/page: /\_not-found, exiting the build.| || ⨯ Next.js build worker exited with code: 1 and signal: null| ||Restoring original next config in project root| ||/layers/google.nodejs.firebasenextjs/npm\_modules/node\_modules/@apphosting/common/dist/index.js:61| ||reject(new Error(\`Build process exited with error code ${code}.\`));| ||\^| ||| ||Error: Build process exited with error code 1.| ||at ChildProcess.<anonymous> (/layers/google.nodejs.firebasenextjs/npm\_modules/node\_modules/@apphosting/common/dist/index.js:61:24)| ||at ChildProcess.emit (node:events:518:28)| ||at ChildProcess.\_handle.onexit (node:internal/child\_process:293:12)| ||| ||Node.js v22.18.0"}| ||ERROR: failed to build: exit status 1| ||ERROR: failed to build: executing lifecycle: failed with status code: 51| ||Finished Step #2 - "pack"| ||ERROR| ||ERROR: build step 2 "gcr.io/k8s-skaffold/pack" failed: step exited with non-zero status: 1| ||

Does anybody have a solution for samsung mobile inverting colors on PWA apps ? It make PWA just unusable ....

I’m developing an app with **Next.js on the frontend**, **Express on the backend**, and **Supabase for authentication**. Currently, all authentication is handled on the backend. I store the **access token** and **refresh token** received from Supabase in cookies, and the frontend determines whether a user is logged in by making API requests for each page. My concern is that with this approach, the frontend has to call the API every time a user accesses a page, which might hurt performance. Would it be better to handle all authentication on the frontend instead? Or is there a recommended approach to optimize this flow?

We wanted to pre-render all OG images for our documentation site, so I gave Takumi a try against Vercel’s OG Image Generator (Satori). It is a complete rebuild in Rust, brand new, and I honestly could not believe how fast it was. The docs are still early, but it is super impressive. You can check it out here: [https://takumi.kane.tw/docs/](https://takumi.kane.tw/docs/)

Until now I’ve not been able to use next-auth middleware due to no edge support with Amplify. Does anyone happen to know if Amplify would support node middleware? No mention in their docs because this is a fairly new feature. I’m not familiar enough with what the platform needs to do vs what next build does when it comes to middleware.

**Hey everyone,** I'm hitting a weird deployment issue and can't figure out if it's a Next.js config, a Coolify config, or a server infrastructure problem. Hoping someone has seen this before. **The Problem:** My Next.js project, when deployed on my Coolify server, loads its resources (JS chunks, images) sequentially instead of in parallel. This murders the performance and significantly increases load time. - **On Coolify:** The browser makes a request for the HTML, then once that's done, it requests `_buildManifest.js`, then once that's done, it starts fetching JS chunks one-by-one. Images only start loading after all JS is fetched one by one. - **Locally:** Everything works perfectly. Both `docker build && docker run` and `npm run build && npm start` result in parallel loading of all assets, as expected. **The Setup:** - **Next.js:** 15 (App Router) - **Platform:** Self-hosted Coolify - **Server:** VPS with 4 Cores, 8GB RAM (More than enough) - **Deployment:** Coolify 4.0.0-beta.420.6 Here's my Dockerfile: ```dockerfile # syntax=docker/dockerfile:1 FROM node:22.16.0-slim AS base WORKDIR /app # Install dependencies only when needed FROM base AS deps # Install required system dependencies RUN apt-get update && apt-get install -y \ ca-certificates \ && rm -rf /var/lib/apt/lists/* # Copy dependency files COPY package.json package-lock.json* ./ # Install Node.js dependencies RUN npm ci # Build the project FROM base AS builder COPY --from=deps /app/node_modules ./node_modules COPY . . # Optional: disable Next.js telemetry during build ENV NEXT_TELEMETRY_DISABLED=1 RUN npm run build # Production image FROM base AS runner WORKDIR /app # Optional: disable telemetry at runtime ENV NEXT_TELEMETRY_DISABLED=1 # Copy necessary files for standalone production server COPY --from=builder /app/public ./public COPY --from=builder /app/.next/standalone ./ COPY --from=builder /app/.next/static ./.next/static # Use non-root user (already present in base image) USER node EXPOSE 3000 # Start Next.js standalone server CMD ["node", "server.js"]

Hey all. This is my `ui_styling.mdc` rule file, tailored to suit projects that use: - next.js 15 - tailwind V4 - ShadCN - the typography.tsx implementation from ShadCN It increases the odds of one shot implementations, hence reduces token usage and AI slop. Do you know of any improvements I could make to it? --- description: Modern Next.js styling system with Tailwind V4, ShadCN UI, and CSS variables globs: alwaysApply: true --- # Styling System Guide ## Overview This is a Next.js 15 app with app router that implements a modern styling system using Tailwind V4, ShadCN UI components, and CSS variables for consistent theming across the application. - **Tailwind V4**: Modern CSS-first approach with configuration in globals.css - **ShadCN Integration**: Pre-built UI components with custom styling - **CSS Variables**: OKLCH color format for modern color management - **Typography System**: Consistent text styling through dedicated components - **3D Visualization**: React Three Fiber integration for 3D visualisation ## Directory Structure ``` project-root/ ├── src/ │   ├── app/ │   │   ├── globals.css           # Tailwind V4 config & CSS variables │   │   ├── layout.tsx            # Root layout │   │   └── (root)/ │   │       └── page.tsx          # Home page │   ├── components/ │   │   └── ui/                   # ShadCN UI components │   │       ├── typography.tsx    # Typography components │   │       ├── button.tsx        # Button component │   │       ├── card.tsx          # Card component │   │       └── ...               # Other UI components │   ├── lib/ │   │   └── utils.ts              # Utility functions (cn helper) │   ├── hooks/ │   │   └── use-mobile.ts         # Mobile detection hook │   └── types/ │       └── react.d.ts            # React type extensions ├── components.json               # ShadCN configuration └── tsconfig.json                 # TypeScript & path aliases ``` ## UI/UX Principles - Mobile-first responsive design - Loading states with skeletons - Accessibility compliance - Consistent spacing, colors, and typography - Dark/light theme support ## CSS Variables & Tailwind V4 ### Tailwind V4 Configuration Tailwind V4 uses `src/app/globals.css` instead of `tailwind.config.ts`: ```css @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root {   /* Core design tokens */   --radius: 0.625rem;   --background: oklch(1 0 0);   --foreground: oklch(0.147 0.004 49.25);   /* UI component variables */   --primary: oklch(0.216 0.006 56.043);   --primary-foreground: oklch(0.985 0.001 106.423);   --secondary: oklch(0.97 0.001 106.424);   --secondary-foreground: oklch(0.216 0.006 56.043);   /* Additional categories include: */   /* - Chart variables (--chart-1, --chart-2, etc.) */   /* - Sidebar variables (--sidebar-*, etc.) */ } .dark {   --background: oklch(0.147 0.004 49.25);   --foreground: oklch(0.985 0.001 106.423);   /* Other dark mode overrides... */ } @theme inline {   --color-background: var(--background);   --color-foreground: var(--foreground);   --font-sans: var(--font-geist-sans);   --font-mono: var(--font-geist-mono);   /* Maps CSS variables to Tailwind tokens */ } ``` **Key Points about CSS Variables:** 1. **OKLCH Format**: Modern color format for better color manipulation 2. **Background/Foreground Pairs**: Most color variables come in semantic pairs 3. **Semantic Names**: Named by purpose, not visual appearance 4. **Variable Categories**: UI components, charts, sidebar, and theme variables ## ShadCN UI Integration ### Configuration ShadCN is configured via `components.json`: ```json {   "style": "new-york",   "rsc": true,   "tsx": true,   "tailwind": {     "config": "",     "css": "src/app/globals.css",     "baseColor": "stone",     "cssVariables": true   },   "aliases": {     "components": "@/components",     "ui": "@/components/ui",     "lib": "@/lib",     "utils": "@/lib/utils"   } } ``` ### Component Structure ShadCN components in `src/components/ui/` use CSS variables and the `cn` utility: ```typescript // Example: Button component import { cn } from "@/lib/utils" const buttonVariants = cva(   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50",   {     variants: {       variant: {         default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",         destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90",         outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",         secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",         ghost: "hover:bg-accent hover:text-accent-foreground",         link: "text-primary underline-offset-4 hover:underline",       },       size: {         default: "h-9 px-4 py-2 has-[>svg]:px-3",         sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",         lg: "h-10 rounded-md px-6 has-[>svg]:px-4",         icon: "size-9",       },     },     defaultVariants: {       variant: "default",       size: "default",     },   } ) ``` ### Component Usage ```typescript import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" interface UserCardProps {   name: string;   email: string; } export function UserCard({ name, email }: UserCardProps) {   return (     <Card>       <CardHeader>         <CardTitle>{name}</CardTitle>       </CardHeader>       <CardContent>         <p className="text-muted-foreground">{email}</p>         <Button className="mt-4">Contact</Button>       </CardContent>     </Card>   ) } ``` ## Typography System Typography components are located in `@/components/ui/typography.tsx` and use a factory pattern: ```typescript import { createElement, forwardRef } from "react"; import { cn } from "@/lib/utils"; type Tag = "h1" | "h2" | "h3" | "h4" | "p" | "lead" | "large" | "div" | "small" | "span" | "code" | "pre" | "ul" | "blockquote"; const createComponent = <T extends HTMLElement>({   tag, displayName, defaultClassName }: {   tag: Tag; displayName: string; defaultClassName: string; }) => {   const Component = forwardRef<T, React.HTMLAttributes<T>>((props, ref) => (     createElement(tag, {       ...props, ref,       className: cn(defaultClassName, props.className)     }, props.children)   ));   Component.displayName = displayName;   return Component; }; // Example components const H1 = createComponent<HTMLHeadingElement>({   tag: "h1",   displayName: "H1",   defaultClassName: "relative scroll-m-20 text-4xl font-extrabold tracking-wide lg:text-5xl transition-colors" }); const P = createComponent<HTMLParagraphElement>({   tag: "p",   displayName: "P",   defaultClassName: "leading-7 mt-6 first:mt-0 transition-colors" }); export const Text = { H1, H2, H3, H4, Lead, P, Large, Small, Muted, InlineCode, MultilineCode, List, Quote }; ``` ### Typography Usage ```typescript import { Text } from "@/components/ui/typography"; export function WelcomeSection() {   return (     <div>       <Text.H1>Welcome to the Platform</Text.H1>       <Text.P>Transform your workflow with modern tools.</Text.P>       <Text.Muted>Visualise your data in interactive formats</Text.Muted>     </div>   ); } ``` **Important**: - Typography components contain their own styles. Avoid adding conflicting classes like `text-4xl` when using `Text.H1`. - Import the `Text` namespace object and use it as `Text.H1`, `Text.P`, etc. Individual component imports are not available. ## Path Aliases Configured in both `tsconfig.json` and `components.json`: ```typescript // tsconfig.json paths {   "paths": {     "@/*": ["./src/*"],     "@/components": ["./src/components"],     "@/lib/utils": ["./src/lib/utils"],     "@/components/ui": ["./src/components/ui"],     "@/lib": ["./src/lib"],     "@/hooks": ["./src/hooks"]   } } ``` ## Utility Functions The `cn` utility is located at `@/lib/utils.ts`: ```typescript import { clsx, type ClassValue } from "clsx" import { twMerge } from "tailwind-merge" export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs)); ``` ## App Router Patterns Following Next.js 15 app router conventions: ```typescript // Server Component (default) import { Text } from "@/components/ui/typography" export default async function HomePage() {   return (     <div className="container mx-auto p-8">       <Text.H1>Welcome</Text.H1>     </div>   ); } // Client Component (when needed) "use client" import { useState } from "react" import { Button } from "@/components/ui/button" export function InteractiveComponent() {   const [count, setCount] = useState(0)   return (     <Button onClick={() => setCount(count + 1)}>       Count: {count}     </Button>   ) } ``` ## 3D Visualization Integration React Three Fiber can be used for 3D visualizations: ```typescript import { Canvas } from '@react-three/fiber' import { OrbitControls } from '@react-three/drei' export function NetworkVisualization() {   return (     <Canvas>       <ambientLight intensity={0.5} />       <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} />       <OrbitControls />       {/* 3D network nodes and connections */}     </Canvas>   ) } ``` ## Best Practices ### Component Creation 1. **Follow ShadCN Patterns**: Use the established component structure with variants 2. **Use CSS Variables**: Leverage the CSS variable system for theming 3. **Typography Components**: Uses typography components such as `Text.H1`, `Text.P` etc, for consistent text styling 4. **Server Components First**: Default to server components, use "use client" sparingly ### Styling Guidelines 1. **Mobile-First**: Design for mobile first, then add responsive styles 2. **CSS Variables Over Hardcoded**: Use semantic color variables 3. **Tailwind Utilities**: Prefer utilities over custom CSS 4. **OKLCH Colors**: Use the OKLCH format for better color management ### Import Patterns ```typescript // Correct imports import { Button } from "@/components/ui/button" import { Text } from "@/components/ui/typography" import { cn } from "@/lib/utils" // Component usage interface MyComponentProps {   className?: string; } export function MyComponent({ className }: MyComponentProps) {   return (     <div className={cn("p-4 bg-card", className)}>       <Text.H1>Title</Text.H1>       <Text.P>Description</Text.P>       <Button variant="outline">Action</Button>     </div>   ) } ``` ### Theme Switching Apply themes using CSS classes: ```css :root { /* Light theme */ } .dark { /* Dark theme */ } ``` ## Example Implementation ```typescript import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Text } from "@/components/ui/typography" interface UserCardProps {   name: string;   role: string;   department: string; } export function UserCard({ name, role, department }: UserCardProps) {   return (     <Card className="hover:shadow-lg transition-shadow">       <CardHeader>         <CardTitle>{name}</CardTitle>       </CardHeader>       <CardContent>         <Text.P className="text-muted-foreground">           {role} • {department}         </Text.P>         <div className="mt-4 space-x-2">           <Button size="sm">View Details</Button>           <Button variant="outline" size="sm">Contact</Button>         </div>       </CardContent>     </Card>   ) } ```

Hey, i am one of the BEST Pakistani UI/UX Designer + Framer Developer. take a look at my portfolio. [www.asadsynt.framer.website](http://www.asadsynt.framer.website)

I'm using Vercel and React with Next.js and I have tried 4 different methods (as recommended by Claude code) to set the meta title of my page. No matter what I do, it always somehow "times out". About 20 seconds after the page has loaded, the meta title is lost and reverts to showing "**Blackbear**" which is the name of my app. **It will not show the page specific meta title such as:** **Domain Manager - Blackbear** **Hosting Manager - Blackbear** Every page simply reverts to showing this in the browser tab for the meta title: **Blackbear** I have 100 pages and have tried maybe 5 methods including useeffect and many others. This issue keeps happening on EVERY PAGE in the app regardless of what meta title method is used. **Please help.** Here is my current APP STACK: Vercel, Supabase, PostgreSQL, React, Next.js, Node. DESKTOP APPS: Cursor, VSCode.

on refresh, the route URL ends up with undefined, causing network requests like [http://localhost:8083/settings/undefined](http://localhost:8083/settings/undefined), which returns a 404. The issue occurs only on refresh, then resolves when navigating normally again. docs: [https://github.com/TexLuciano/errorhelp](https://github.com/TexLuciano/errorhelp)

Yo redditors, we designed a starter template for Contentful. You get features like ➤ Next.js 15.5 + Contentful ➤ TypeScript + TurboRepo ➤ Production-ready within 10 mins [https://github.com/robotostudio/turbo-start-contentful](https://github.com/robotostudio/turbo-start-contentful) Do share your views in the comments. Would love to hear it.

Hi, i started learning backend and databases 2 -3 weeks ago i did some mongodb badge skills and learnt basics of schema design , how to identify workloads etc, agregation and inlast 3-4 days i implemented custom backend auth and basic CRUD by Build 2 projects It was so much fun what should i do next ? should i dive into redis ? my goal is to become ready for full stack roles

**Stop alt-tabbing to ChatGPT for simple terminal tasks** **TL;DR**: Built a lightweight CLI that turns your repetitive AI prompts into one-line commands. No more copy-pasting to ChatGPT. Just `cat error.log | aiq fix` and you’re done. **The Problem We’ve All Been There With** You’re deep in terminal flow, hit an error, then have to alt-tab to ChatGPT, paste, wait, copy back. Flow = destroyed. **What if your terminal just… knew stuff?** ```bash # Debug instantly $ cat error.log | aiq fix # Generate from any content $ cat notes.txt | aiq gen-todos $ curl api-docs.json | aiq summarize $ cat design.md | aiq estimate # Git wizardry $ git diff | aiq commit $ aiq cmd "undo last commit but keep changes" # Quick explanations $ aiq explain "const debounce = (fn, ms) => {...}" ``` **Why This Beats Other Solutions** **vs. Claude Code/Aider**: Amazing for complex refactoring, but overkill for quick tasks. Heavy setup, expensive token usage, autonomous changes. **vs. ChatGPT web**: Context switching kills flow state. **vs. Gemini CLI**: Great but heavyweight. aiq is pure prompt templating - simple and focused. **The Magic: Reusable Prompt Templates** The real power is turning your common patterns into shareable commands: ```json { "name": "review", "prompt": "Review this {language} code for bugs and improvements:\n\n{input}", "params": { "language": {"default": "auto-detect", "choices": ["js", "py", "go", "rust"]} } } ``` Now your whole team can run `aiq review -l js < myfile.js` consistently. **Quick Start** ```bash npm install -g aiquery aiq config init # Sets up with your API key echo "broken code here" | aiq fix ``` Works with any model (Claude, GPT, Gemini, local). **Current State & Roadmap** **Status**: Operational, but needs some code standardization **Coming Soon**: - Copy previous response to clipboard - `aiq exec` for command execution: `aiq exec "create index.ts at root of each subdirectory recursively"` - Better error handling - Windows support improvements **Limitations**: - Basic tool, not agentic (won’t autonomously edit files) - No persistent memory across sessions - Configuration could be more user-friendly **Who This Is For** - **Terminal natives** who hate context switching - **Teams** wanting consistent AI workflows - **Minimalists** who want AI help without complexity Just a simple tool that keeps you in flow state. ----- **GitHub**: https://github.com/laspencer91/aiq **⭐ if this sounds useful!** *Built because I was tired of losing flow every time I needed quick AI help.*

When you use Prisma, you often define your models in camelCase and your database tables and columns in snake\_case using map. This is great for your code, but what happens when you need to write a raw SQL query, create a migration script, or build a data utility? Suddenly, you are double-checking database names, and setting yourself up for potential breakage in the next refactor. To solve this, I built a small Prisma generator that eliminates the hassle. You can check it out at the link below–feedback, issues, and PRs are always welcome! [https://github.com/ealexandros/prisma-name-mapper](https://github.com/ealexandros/prisma-name-mapper)

So, I've `groups` table (which is basically chat rooms) and `users` table which have on many to many relationship created as below on `GroupEntity`, which is nothing but a chat room entity. @ManyToMany(() => UserEntity, (user) => user.id, { nullable: false }) @JoinTable({ name: 'groups_users', joinColumn: { name: 'group_id', referencedColumnName: 'id', }, inverseJoinColumn: { name: 'user_id', referencedColumnName: 'id', }, }) users: UserEntity[]; Now, because multiple users can be added into a group (chat room) at once, how do I write a query builder logic. The [typeorm documentation on many-to-many relationships](https://typeorm.io/docs/query-builder/relational-query-builder), I found it very confusing. Looking from the perspective of THE linker table, it should clearly be aN insert query into groups\_users table where we can also write `ON CONFLICT DO NOTHING` But from the pserspective of `GroupEntity`, its looks like an update query where I have to first fetch all the existing members of the particular group in which I'm going to add more members and then filter out the already existing members from the new members list and then write an update query. According the first example one the documentation, I could come up with the query below, ``` const newMembers = await this._dataSource.getRepository(UserEntity).find({ where: memberIds.map((memberId) => ({ id: memberId })), }); await _dataSource .createQueryBuilder() .relation(GroupEntity, "users") .of(groupId) .add(newMembers) ``` Does hwo do you manage conflict in this query, or do we have to filter out things prior by ourselves ? And is this an optimal way ?

I built a JWT-based authentication and user authorization system with password/email registration, time-limited OTPs, refresh-token logic, and session management. I followed OWASP best practices. I self-hosted the API and database on a Raspberry Pi and exposed them to the public via a tunnel. Cloudflare acts as a reverse proxy and modified authentication headers, which caused Google redirect_uri mismatches, so I couldn’t get the OAuth2 PKCE flow to work in production. I inspected headers on server , but because TLS was terminated at the proxy I couldn’t see the original headers. It is also not possible to decrypt TLS as much as I know. I ended up shelving the issue , though I return to it occasionally and still haven’t found a reliable solution. Open to suggestions or pointers.

I've been working on a project that required robust server-side PDF generation and went deep down the rabbit hole with Puppeteer. I found a lot of basic tutorials, but not much on optimizing it for a real-world API or handling common edge cases. To save others the trouble, I consolidated everything I learned into one comprehensive guide. It covers: Setting up a basic conversion server with Express. The 'why' and 'how' of using a singleton, 'warm' browser instance to avoid cold starts and dramatically improve performance. A complete reference for passing in customization options (margins, headers/footers, page format, etc.). Handling authentication and asynchronous rendering issues. Here’s a simplified snippet of the core conversion logic to give you an idea: ``` javascript import puppeteer from 'puppeteer'; // Initialize a singleton browser instance on server start const browser = await puppeteer.launch({ headless: "new" }); async function convertHtmlToPdf(html, options) { const page = await browser.newPage(); await page.setContent(html, { waitUntil: 'networkidle0' }); const pdfBuffer = await page.pdf(options); await page.close(); return pdfBuffer; } ``` I hope this is helpful for anyone working on a similar task. You can read the full, in-depth guide here: https://docs.pageflow.dev/blog/generating-pdfs-with-puppeteer

Hey everyone, I'm hoping to get some architectural advice for a Next.js 15 application that's crashing on long-running Server Actions. **TL;DR:** My app's Server Action calls an OpenAI API that takes 60-90 seconds to complete. This consistently crashes the server, returning a generic `"Error: An unexpected response was received from the server"`. My project uses **Firebase for authentication**, and I've learned that serverless platforms like Vercel (which often use Firebase/GCP functions) have a **hard 60-second execution timeout**. This is almost certainly the real culprit. What is the standard pattern to correctly handle tasks that need to run longer than this limit? # Context My project is a soccer analytics app. Its main feature is an AI-powered analysis of soccer matches. The flow is: 1. A user clicks "Analyze Match" in a React component. 2. This invokes a Server Action called `summarizeMatch`. 3. The action makes a `fetch` request to a specialized OpenAI model. This API call is slow and is expected to take between **60 and 90 seconds**. 4. The server process dies mid-request. # The Problem & My New Hypothesis I initially suspected an unhandled Node.js `fetch` timeout, but the 60-second platform limit is a much more likely cause. My new hypothesis is that I'm hitting the **60-second serverless function timeout** imposed by the deployment platform. Since my task is guaranteed to take longer than this, the platform is terminating the entire process mid-execution. This explains why I get a generic crash error instead of a clean, structured error from my `try/catch` block. This makes any code-level fix, like using `AbortSignal` to extend the `fetch` timeout, completely ineffective. The platform will kill the function regardless of what my code is doing.

I currently have my database up via prisma schema postgresql and a MVC model setup via express where I can do some test via browser or postman. I am at a point where i need to authenticate users and give them a token but confused how to test this without a frontend. Should i go ahead and create some views on my MVC and run the full setup of the app on express viewsand ejs first? The concept of backend and frontend does not make sense yet. I need to watch a tutorial today. Seems reduntant what i am thinking.

Hi, I’d like to present **Codefather**, a governance layer on top of GitHub’s CODEOWNERS. CODEOWNERS assigns reviewers, but it can’t enforce rules. Codefather adds: * Advanced file matching (globs, wildcards, regex) for fine-grained protection * Optional commit blocking or advisory mode * Works offline (CLI / precommit) and online (GitHub Actions) * Role hierarchy (team, lead, dev) so leads have authority without PR review spam * Actionable feedback: devs see which sensitive files they touched & who to ping * A flexible config that plugs into CODEOWNERS or runs standalone The idea: reduce wasted review cycles, keep critical parts safe, and give teams control without slowing them down. For projects with many contributors and strict governance, this enforcement tool might be very helpful! Docs: [https://donedeal0.gitbook.io/codefather/](https://donedeal0.gitbook.io/codefather/) Repository: [https://github.com/DoneDeal0/codefather](https://github.com/DoneDeal0/codefather)

Hi, I’ve been a Cursor user for a long time, and after they changed their pricing, I started looking for alternatives. Thankfully, I’ve been using Claude Code now and really enjoying it. The only thing I’ve missed is the checkpoint system — being able to go back and forth between messages or restore earlier states. So I built one for myself. It’s called **CCheckpoints**. Feel free to try it out. Any feedback is welcome. Thanks! Link: [https://github.com/p32929/ccheckpoints](https://github.com/p32929/ccheckpoints)

I have a fulltime job and have been developing software for almost 14+ years. Last year I had a serious usecase for myself for which I needed a standalone app. So, I spent 7 months developing a standalone fullstack app and I personally have been using it for 8 months. I started developing it since last year and kept adding more and more features to gradually cover all my usecases. It has reached a point where I think it could be useful to many people in similar scenario. I want to sell it for a one time fee (no subscription) because it is a standalone web app. The problem is, I only have experience developing the software but not marketing and selling it. Does anyone have any experience in selling the software? where do I start to pitch this product (to see if anyone would be interested) and how do I sell it? The target audience for this app are tech and non tech people. Any inputs are greatly appreciated as I have no idea on the "marketing and selling part". NOTE: I have have 2 more app which I want to sell but I want to start with this as this is the most feature complete at this point.

This article "[5 Programming Languages That Look Fast… Until You Actually Deploy Them](https://medium.com/@optimzationking2/5-programming-languages-that-look-fast-until-you-actually-deploy-them-447550671602)" (free [link here](https://archive.is/z0zLW#selection-249.0-249.70)) claims that Node is the slowest in production and they also used other languages in the ranking. The article claims that while node.js shows great performance in "hello world" rest api, its single threaded and event driven async model falls apart for real world production usecases. They also claim that due to these inherent single threaded limitations, node applications suffer from the get go a lot of complexities like needing workers, queues, clustering, message brokers etc. which costs more on cloud and the speed is still not fast. Do you agree with the Node.js assessment? Curious to hear your thoughts

I've been seeing Al agents like Bolt, Lovable, and [v0.dev](http://v0.dev) build complete full-stack apps in Node.js/ Next.js with almost no effort. It makes me wonder if focusing on these frameworks is a risky move for new devs. Do you think enterprise frameworks like Spring Boot or .NET are safer in the long run, since they deal with more complex systems (security, transactions, scaling) that Al can't fully automate yet? Or is it better to go deeper into Rust/Go and distributed systems where Al has less control? I'd really like to hear from developers already working in startups or enterprises - how are you thinking about "Al resistance" when it comes to choosing a stack even lets consider one thing , when you develop a project with node.js or with it related frame work we mostly push it to the GitHub. GitHub trains it model on its code base which gives an advantage for the models .And most of the Github repos contains JavaScript will it make model more powerful in that field. * **v0** → **JavaScript / TypeScript** (React + Next.js frontend only) * **Bolt** → **JavaScript / TypeScript** (React frontend + Node.js backend + Prisma/Postgres) * **Lovable** → **JavaScript / TypeScript** (React frontend + backend & DB generated under the hood) * They **don’t use Java, Python, or other languages** for the generated apps — it’s all **JavaScript/TypeScript** end to end.

I’m mainly focused on **backend (FastAPI)**, **AI research**, and **product building**, but I’ve realized I need at least a solid *base knowledge of frontend* so I can: * Make decent UIs with my team * Use AI tools/codegen for frontend scaffolding * Not get blocked when iterating on product ideas I don’t plan on becoming a frontend specialist, but I do want to get comfortable with a stack like: * **Next.js** * **TypeScript** * **TailwindCSS** That feels like a good balance between modern, popular, and productive. My main confusion is about **runtimes**: * **Node.js** → default, huge ecosystem, but kinda messy to configure sometimes * **Deno** → I love the Jupyter notebook–style features it has, feels very dev-friendly * **Bun** → looks fast and modern, but not sure about ecosystem maturity 👉 **Question:** If my main goal is product building (not deep frontend engineering), does choosing Deno or Bun over Node actually *change the developer experience in a major way*? Or is it better to just stick with Node since that’s what most frontend tooling is built around? Would love advice from people who’ve taken a similar path (backend/AI → minimal but solid frontend skills). Thanks! 🙏

Try it out today: [https://deno.com/deploy](https://deno.com/deploy)

Hi 👋, I made a website in fresh.js and deployed it on Deno deploy. It's a full-stack project - I do have backend routes, Deno.KV for data storage and Deno.cron to do daily tasks. It works flawlessly, but now I would like to add yet another unstable feature of Deno -> HTTP proxy to fetch API. In my project I would like to perform anonymized HTTP fetch in the cron. Standard fetch API does not support such thing, but in Deno it does accept a client property. This property can be obtained by calling \`Deno.createHttpClient\` method. It does accept a proxy which will be used to do the HTTP call. It works well, but only on my local machine. It does not work on deno deploy. Is there a way to fix it? In the docs there is no mention about instability or deprecation of this method, but clearly the Deploy things otherwise. Thank you and have a great day!

EDIT: I'm an idiot. You should compile your projects before importing them 🙃 Original post: Hey all. While I feel fairly confident with Typescript, I'm new to monorepos and organizing large projects. Hoping to regain some sanity here. I'm working on a project in a pnpm monorepo, with roughly the following structure: |- apps | |- web | | \- package.json | \- backend | \- package.json | packages | \- db-schema | \- package.json |- pnpm-workspace.yaml \- package.json At different points, the db-schema package has been: a manually typed SQL schema, a package generated TS types, a Drizzle schema, a Kysely schema, and a Prisma schema/client. With each of these I've run into tooling-specific problems (Kysely's recommended codegen plugin straight up didn't work, Prisma was incorrectly inferring nullable primary keys), but the consistent problem with each of them is **typescript losing type definitions across packages**. For instance, when using Drizzle, I can define a schema and export it from its own package: // /packages/db-schema/schema.ts import * as auth from './schema/auth' import * as job from './schema/job' // ... export const schema = { ...auth, ...job, } export type Schema = typeof schema; export type Database = NodePgDatabase<Schema> // this is the type of the drizzle client But get generic type loss when consuming it in a different package: // /apps/backend/src/db.ts import { schema } from '@repo/db-schema' const db = drizzle(dbConnection, { schema: schema }) // ^^^^^ intellisense shows NodePgDatabase<any>, but it should be NodePgDatabase<Schema> However, this example works fine if I'm either: * consuming this schema/type defs within the *same* package * consuming from another package with *relative* imports instead of package imports ('../../../packages/db-schema' rather than '@repo/db-schema') So I figure this has something to do either with how the monorepo is set up, or how typescript is configured. Any ideas where to go with figuring this out? I can provide more context or tsconfig files as needed.

Lets say I want to make a function that sorts collection by a field in natural order. Like _.sortBy, but with customized comparator: export function naturalSort<Object>(collection: Object[], key: keyof Object) { return collection.toSorted((a, b) => (a[key] as string).localeCompare(b[key] as string, undefined, { numeric: true, sensitivity: 'base' }) ); } That almost works but there is a catch - we don't know if `Object[keyof Object]` is a string, so it would make sense to restrict keys to only those with string value. I have googled a type that fits, // (1) type KeysOfType<T, U> = { [K in keyof T]: T[K] extends U ? K : never; }[keyof T]; and it can be used like export function naturalSort<Object>(collection: Object[], key: KeysOfType<Object, string>) { return collection.toSorted((a, b) => (a[key] as string).localeCompare(b[key] as string, undefined, { numeric: true, sensitivity: 'base' }) ); } This way `key` only accepts property names with values that are strings. I still have to cast `a[key]` and `b[key]` to string as TS does not get it, but at least I know it is safer. But I have also found this [hotscript](https://github.com/gvergnaud/hotscript) library and it does make sense to my FP-addled brain, it's easier to reason step-by-step through transformations. So I can write `type KeysOfType` using hotscript like this: // (2) type KeysOfType<T, U> = Pipe<T, [Objects.PickBy<Booleans.Equals<U>>, Objects.Keys]>; It does what it needs to do, create a union type with values that are acceptable keys, but if I try to use in `naturalSort` function I run into `a[b]` throwing TS2536: Type <...> cannot be used to index type Object though I don't know what went wrong here. Not helping matters, equivalent of `keyof` `Apply<Object.Keys, [T]>` can be used to index object but `Call<Object.Keys, T>` can not. Some weird hotscript behavior? Just for my curiosity, can it be done using hotscript functions, or would it be tool unwieldy and simpler to stick to vanilla (1) type declaration?

Consider: type AaOrBb = ["a", "a"] | ["b", "b"]; function foo(t: AaOrBb): AaOrBb { // Ok return t; } function bar(t: AaOrBb): AaOrBb { // Error: Type '["a" | "b", "a" | "b"]' is not assignable to type '["a", "a"]'. return [t[0], t[1]]; } Obviously `foo` and `bar` are equivalent. Why can't Typescript see that? Sure, in `bar`, `t[0]` is indeed `"a" | "b"`, but `t[0]` and `t[1]` depends on each other. They will always be identical. So the return value can't ever be `["a", "b"]`, like the error implies. Does this problem have a name? I seem to run into it A LOT, especially when trying to do some advanced generics. [https://www.typescriptlang.org/play/?#code/FASALgngDgpgBAQQIYHkBOAhARnAvHAbQCIkiAaOEogXTgB9CitzLnqBuYUAMwFcA7AMZgAlgHt+cbmLEAKMAC5EqTFgCUS5OmxwA3qBAB6Q3BQBrA2hhheaSWE4gAvlxB8hoiXCxI08zSrYGsraOPogRiYAomhoYmhKACrQ8ADkxKT0rCxUWUw0qXAiAM5w-GJgcEjFxSIA5vxIWAA28GBicJCwcOlUFFTUqQB0lta2kgRgBAAM1BRTAIzUHKAuQA](https://www.typescriptlang.org/play/?#code/FASALgngDgpgBAQQIYHkBOAhARnAvHAbQCIkiAaOEogXTgB9CitzLnqBuYUAMwFcA7AMZgAlgHt+cbmLEAKMAC5EqTFgCUS5OmxwA3qBAB6Q3BQBrA2hhheaSWE4gAvlxB8hoiXCxI08zSrYGsraOPogRiYAomhoYmhKACrQ8ADkxKT0rCxUWUw0qXAiAM5w-GJgcEjFxSIA5vxIWAA28GBicJCwcOlUFFTUqQB0lta2kgRgBAAM1BRTAIzUHKAuQA)

I am not a TS dev. I am asking to understand if there is a possibility, technically, to generate PDF with annotations from a webpage with a lot of texts structured in paragraphs? The Idea is when you click on a button say "Export", it should be possible for the user to download a PDF with all the text and annotations associated with it in the frontend. Is this possible? Thanks in advance. :)

It's done. Released Runner v4 a typescript framework with an obsession for typesafety, alongside Runner-dev v4. The documentation and repository are available at: * [https://bluelibs.github.io/runner/](https://bluelibs.github.io/runner/) * [https://github.com/bluelibs/runner-dev](https://github.com/bluelibs/runner-dev) In this post, I'm about to show you the real powers **Quick setup for testing:** To try a basic Express app with OpenAPI, SQLite, and authentication: git clone https://github.com/bluelibs/runner cd runner/examples/express-openapi-sqlite npm install PORT=3000 npm run dev This will start a server with authentication, debug mode, and runner-dev integration. You'll see output showing route registration, middleware initialization, and available endpoints including Swagger UI and coming from runner-dev a GraphQL server, Automated Project Documentation. **Key features included:** When working with Runner, you get full application control with cross-cutting capabilities, plus: * Project documentation (expandable) * GraphQL API for app introspection, diagnostics, and telemetry **MCP Integration:** The more interesting feature is the built-in MCP server that allows AI assistants to introspect your app's schema, run queries, and interact directly with your running application. This includes optional live patching and eval capabilities for development testing. Example queries you can run: * Retrieve recent errors with source files and dependencies * Get last dispatched events with their emission sources and related logs * List all tasks in specific modules with descriptions * Complex nested GraphQL queries for deep introspection **MCP Setup:** From your project root: ENDPOINT=http://localhost:1337 npm run mcp Or globally: npm install -g /runner-dev ENDPOINT='...' npx runner-dev mcp You can see a sample mcp.json inside the repository if needed. This enables AI assistants to quickly move from logs to source code and build context for problem-solving through GraphQL queries. Setup your MCP and try to ask questions about the project (without even touching the file system). As usual critiques are not just welcome, but encouraged!

With the advent of AI, as a developer I want to continuously increase my skills. I work as a research software engineer at a university so I often do not have the chance to work with many senior level engineers that I can learn from. But I also know that self-learning is the key for progress, especially to learn from and recognise patterns of well coded projects, by more brilliant and experienced developers than me. Can anyone suggest a well coded TS-based projects from Github that I can dissect and learn from? Nothing against projects coded by AI assistance, but I still think senior devs can produce better codes just from their sheer experience with it.

A common unnecessary confusing topic I have to reiterate multiple times when teaching TS to engineers new to type safety is the concept of “opting out of type safety”. As a pattern, it’s generally not intuitive for them to know that tokens such as `as SomeType`, `!`, `any`, and `// @ts-ignore`, are not actually a path forward, but escape hatches that should be used intentionally, by risk-accepting we’d be explicitly opting out of type-safety; and as such, if we use them as a regular tool in our toolkit, we’re defeating the purpose of even using TS in the first place. When we finally make some progress in understanding this, generally we then hit the question “why is this not working” ```ts const user = { type: "customer" } // expects object of type { type: "customer" | "agent" } validateUser(user) ``` Error goes: cannot assign string to constant. Then eventually we enter in the territory of `as const` as a solution… which is perfectly type safe. And the question arises: “so why is it `as const` type safe and `as SomValue` isn’t?”. Despite the answer being a simple one, for a new learner, grasping the concept is not rooted in intuitiveness. So this makes the learning process experience an unnecessary curve. Obviously it’s not very intuitive `as const` and `as SomeType` are completely different things, despite looking extremely similar. And this adds an unnecessary difficult I’ve never seen this being discussed online. I thought I may as well ask. What’s your take?

Wrote this post with our team about a util we use to make exhaustiveness checks on discriminated unions easier in typescript, especially in TSX/react - would love to hear everyone's thoughts on this!

I’m mainly focused on **backend (FastAPI)**, **AI research**, and **product building**, but I’ve realized I need at least a solid *base knowledge of frontend* so I can: * Make decent UIs with my team * Use AI tools/codegen for frontend scaffolding * Not get blocked when iterating on product ideas I don’t plan on becoming a frontend specialist, but I do want to get comfortable with a stack like: * **Next.js** * **TypeScript** * **TailwindCSS** That feels like a good balance between modern, popular, and productive. My main confusion is about **runtimes**: * **Node.js** → default, huge ecosystem, but kinda messy to configure sometimes * **Deno** → I love the Jupyter notebook–style features it has, feels very dev-friendly * **Bun** → looks fast and modern, but not sure about ecosystem maturity 👉 **Question:** If my main goal is product building (not deep frontend engineering), does choosing Deno or Bun over Node actually *change the developer experience in a major way*? Or is it better to just stick with Node since that’s what most frontend tooling is built around? Would love advice from people who’ve taken a similar path (backend/AI → minimal but solid frontend skills). Thanks! 🙏

`Types of property 'role' are incompatible.` `Type 'string' is not assignable to type '"ADMIN" | "SUPERADMIN" | "USER" |` What I am doing wrong ? let emptyDefaultValues = {   email: '',   password: '',   firstname: '',   lastname: '',   whatsapp: '',   phone: '',   city: '',   street: '', zipcode: '',   sex: null,   nationality: null,   company_id: null,   paid: null,   worker_id: null,   employement_id: null,   is_guest: false,   role: "ADMIN",   roles: [],   department_id: null, }; defaultValues: emptyDefaultValues   Zod:  role: z.enum(['SUPERADMIN', 'ADMIN', 'USER'], { message: 'Bitte wähle ein Admin aus.' }),

If I have a generic interface `Box` with a `content` property only, I can't use it without the generic type parameter: type Box<T> = {     content: T } const box: Box<string> = { // string is required here     content: "hello world" } There is no way ts is gonna infer `T` even tho its apparent from the value of `content` field. But it has no problem inferring it when using a generic function instead of a generic type. function GetBox<T>(b: Box<T>): Box<T> { // ik its redundant     return b } const box2 = GetBox({ // it works without the type arguement     content: "hello World" }) Is this intentional? if yes, then why? could this be a feature request?

I'm fairly new to typescript, and I've been trying to tackle this error for around two hours now. I just can't piece together what's wrong. I was trying to create a custom type in my ts file in vscode, and no matter what I did I consistently got the error "Uncaught SyntaxError: unexpected token: identifier" with the hover showing me "missing semi-colon before statement". Even something so simple as `type FarmAnimal = {` `species: string` `}` won't work, and continues to throw the "Uncaught SyntaxError: unexpected token: identifier"/"missing semi-colon before statement" error. I'm completely baffled where the error is even originating from, and googling it hasn't helped at all (though maybe I'm just googling the wrong things?) I really would like to figure this out because atm I can't create any new types whatsoever. I'm sure I'm overlooking something incredibly basic, but currently I'm at a total loss. Any ideas? Edit: Egg on my face, guys. I forgot HTML can't read TypeScript outright and it has to be compiled first. I knew it had to be something incredibly basic that I was overlooking because I'm so fresh to this. Thanks for all the help, though! I learned a lot of helpful tips that will hopefully help me not get stuck in the future :)

This is probably one of those problems where the answer is simple but I don't know what I'm looking for. I have a Turborepo setup where I have a bunch of packages. Let's say I have a UI Package, but also a package that fetches data from a CMS. The CMS package generates types which are specific to that CMS. I do not want my UI package concerned with the CMS, so the types for those components are added there. Trouble is - when you then hook the two up, the types don't always match. Maybe the CMS returns a type "string | number" for a field, but the UI component only accepts "string" for the relevant field. Sometimes I also have to do a little data transformation - so one solution is methods that do this, and in doing so, take a CMS data type and return the data as a type that matches the UI: export function transformData(component: CMSType): UIType[] | null { return component .items . find (( item ) => item .full_slug. includes ('sssss')) ?.content?.global?. filter (( globalItem ) => globalItem ?.component === 'pppp'); } But this feels like it would quickly become quite bloated and also feels unnecessary if no transformation of data is actually required. Ideally, I also don't have to use casting to fix this, as again, it could get bloated quite quickly, and feels somewhat fragile. What might be a better approach here - should I have another package that maps types from the CMS to the UI possibly? Is there something native to TS I could be using, or a library (ChatGPT says Zod can do this). Any advice would be awesome. Thanks.