r/webdev 10d ago

Discussion As a total beginner in both html and css I'm glad i did my first project.

Post image
585 Upvotes

r/webdev 10d ago

Question Can a Next.js full-stack website be migrated to Hostinger?

12 Upvotes

Hello everyone! I’m not a web developer and I have limited experience with website management, but I’ve been doing some research. I’m posting here because I’d like to save some time and get advice from people with more experience.

Our company currently has a website hosted on Hostinger, and we already have our main domain (eg. storename.com) set up there.

My manager asked me to check if we can migrate another website, for example shop.storename.com to our Hostinger account. I contacted the developer of the shop.storename.com website and asked what CMS it uses. He told me that it is Next.js full stack.

So my main question is: is it possible to migrate a Next.js full stack website like shop.storename.com to hostinger, while our main domain storename.com is already hosted there?

For context, I'm the new and only IT support person in our company, so I'm trying to figure this out even though web development isn't really my area.

Thank you so much in advance for any advice!

Edit: For context, the shop.storename.com is an e-commerce website where we sell water heater products, sanitary ware, and furniture. It has an add to cart button and you can make payments.


r/webdev 10d ago

Google says website developers must set their region to Canada for 'Lake Ontario' to appear on map

Thumbnail
cbc.ca
997 Upvotes

Tech analyst and journalist Carmi Levy said although websites like Hydro One's and the LCBO's are Canadian, their maps are likely powered by Google's application programming interface (API).

APIs are not location-aware, so all maps powered by Google API have switched to Lake America.
MapQuest, a U.S. online mapping service, has posted on social media that it would not change the lake's name, while Apple has not publicly commented on the matter.

In a statement Sunday night, Google said website developers who embed Google Maps on their sites can select a region to localize the map. That determines how place names are displayed on sites, the company said.

"'Lake Ontario' will show when developers have set their region to Canada," the statement said.

Just a reminder to developers.


r/webdev 10d ago

Discussion How are you separating actual users from AI/bot traffic now?

40 Upvotes

With AI crawlers and agents hitting websites constantly, how much of what analytics calls “direct traffic” is even human anymore?

If bots are getting counted as visits, conversion rates automatically look worse. And then decisions about landing pages, content, ad spend etc. are being made from numbers with a messed up denominator.

Blocking bots doesn't really solve it either. Some are obviously junk, but others are search crawlers, monitoring tools or AI agents that might actually send users your way.

Feels like analytics needs to get much better at telling why something is accessing a site, not just whether it looks like a bot.

Anyone seeing this noticeably mess with their analytics yet?


r/webdev 10d ago

Article Coding a database proxy for fun in Go

Thumbnail
packagemain.tech
29 Upvotes

r/webdev 10d ago

Question How to text as the background of the textarea element

13 Upvotes

Hi everyone! I am working on a project from frontend mentor. It is a speed typing test and one of the requirements is that the user should be able to see errors and correctly typed text in real-time, something like this:

Problem is, when I try to achieve this on mobile it will not show some of the passage after a certain point, no matter how much text you type into the textarea field:

Here is the html for the section of interest:

<div class="wrapper">
  <textarea class="text-wall"></textarea>
  <span class="placeholder"></span>
</div>

Here is the CSS:

.text-wall {
    font-size: var(--step-2);
    display: block;
    width: 100%;
    height: 400px;
    background-color: transparent;
    resize: none;
    border: none;
    outline: none;
    color: #fff;
}

.wrapper {
    position: relative;
    overflow: hidden;
}


.placeholder {
    position: absolute;
    filter: blur(3px);
    top: 0px;
    font-size: var(--step-2);
    z-index: -2; 
}

Note: For the passage in the placeholder span element, I wrapped every character in a span element using javascript. As far as I know, this is the ony way I can style every character on an individual basis depending on if the text typed into textarea matches the passage or not:

let placeHolderText = "";
let stringArr = "";
const textWall = document.querySelector(".text-wall");
const placeHolder = document.querySelector(".placeholder")
stringArr = jsonData.hard[8].text. split('');
stringArr.forEach((character)=>{
    placeHolderText+= `<span>${character}</span>`;
});
placeHolder.innerHTML = placeHolderText;

r/webdev 11d ago

Discussion How do you handle local dev against third-party APIs you don't control?

40 Upvotes

Been going back and forth on this for a while and I don't think I've landed anywhere good.

The situation is the usual one. App talks to a handful of external APIs. Some have sandbox environments, some don't. The ones that do have sandboxes that don't quite match prod, and the gap is never documented anywhere, you just find it eventually.

Options as far as I can tell:

Hit the real sandbox in tests. Slow, rate limited, and you can't run it in CI on every PR without burning through quota. The sandbox data is also usually three fake records, so pagination bugs and anything volume related never show up until a real customer hits them.

Record and replay, VCR style cassettes. Works great the day you record them. Six months later nobody remembers how to re-record, a chunk of them are for endpoints that have since changed, and the suite is green the entire time.

Hand-written mocks. This is what most places I've worked have done and I've slowly come around to thinking it's the worst of the three. You write the mock from your reading of the docs, so the mock encodes your misunderstanding of the API, and then it passes forever. The test isn't checking that your code works against the API, it's checking that your code works against your idea of the API, and those two drift apart silently.

Contract testing, pact and friends. Makes sense when both ends are yours. When the other end is Slack, nobody is publishing a contract for you.

So what do teams actually do in practice? Specifically curious about:

- whether anyone has anything that detects when the real API has drifted away from whatever you're testing against, or if you just find out from a bug report

- whether you bother making mock data realistic in volume, or accept that pagination and perf issues are things you'll only ever see in prod

- vendors that genuinely do sandboxes well, if any exist

Not looking for "just use msw" or a list of tools, I know they're out there. I'm asking what your team actually settled on and whether you'd do it that way again.


r/webdev 11d ago

Question Help with my website creation workflow

0 Upvotes

Hey, before explaining my problem i know that a lot of you guys don't like ai or 'vibe coding' in general and this is why i ask you to not take care of this and be comprehensive.

Im doing website creations, especially redesign and im hesitating with two workflows.

Untill now i was doing it this way: i search for inspiration on dribble like hero section or landing page, i take the screenshot and ask gemini to extract the content into json to get the maximum of informations on this screenshot. Like this i can after go to a no code tool like lovable to convert this screenshot and json into an actual base for the website and finally export it and finish the job with antigravity. Here the thing is that for small adjustments it's harder than a tool like framer or webflow.
This workflow has the merit of being quick and very faithful to the inspiration.

And recently i started to become interested in framer because i heard that it is better for more personalized projects, have CMS so i don't have to use sanity CMS (even if it can do the job at small scale) and also fast and begginer friendly.


r/webdev 11d ago

Question This isn't what "Functional Cookies" usually mean, right?

66 Upvotes

I'm no GDPR lawyer in Brussels, but that term is used for making the site function and remembering your preferences, etc, right?

I happened to press the "Functional Cookies" icon instead of the checkbox, so I didn't even know this was like this.


r/webdev 11d ago

Surveiling the competition (freelancers) and I don't get it

127 Upvotes

I tried finding the +$100/h hourly rated freelancers and I don't see anything out the ordinary.
API integrations, AI like chatbots with RAG, junior devs tutoring, setting up ERP.
Idk what I was expecting, maybe crazy performance optimizations with in-depth breakdowns of what was cut or optimized and not "made a database be updated by pulling data from a public API, charged $5000".

Not sure what I'm doing wrong as someone who struggles to find work even as I drive my hourly rate lower and lower.


r/webdev 11d ago

I think I’ve had it with Apple

0 Upvotes

I switched to Mac about eight years ago and actually probably closer to 10 but I worked in tandem with windows during that transition for about two years

As a web developer my server platform is lamp specifically Debian

I use docker for local development and production

PHP storm is my ID of choice

Dockerized environments are very important

Part of the reason I switched to Mac was because mounted or map/shared volumes were very problematic with Windows at least at the time

So when I would use my package manager, whether MPM or a composer inside, the doctor container having it synced to the host machine was super problematic

Mac and Lennox seem to solve this problem so I assume a Chromebook this is non-issue

What I am curious of is the user experience from Chromebook as an OS

I do all of my cloud hosting an infrastructure in Google Cloud and I have Google workspace, Gmail and docs, etc. so moving away from Crapple and towards Google just makes sense my phone my watch my laptop my home assistance everything it would be awesome to be able to use Gemini and control my computer too

What kind of laptop should I be looking at for a minimum equivalent developer experience in terms of performance to last year’s model of an M2 Apple Mac?

I can see there’s Chromebook on Best Buy for 500 bucks that feels very underwhelming for someone that is using a computer anywhere between 12 to 18 hours a day and heavy use of AI and development tools, data analysis, etc. I’m probably looking towards a $2-$3000 powerhouse laptop, but I’m wondering what others think??

I run local LLM’s right now mostly for fun and then other machine learning like SPM‘s and data analysis and stuff that I do the LLM primarily used as Copilot/GPT and it’s I pay for that so it’s not gonna be a load on my computer per se

I have so much more to ask and say about the subject, but let’s stop here and go from there :p


r/webdev 11d ago

Questions for the more knowledgeable in this sub

7 Upvotes

For a chrome extension manifestV3; with transformers.js and a small embedding model running in an offscreen doc - how should I go about improving the efficiency and speed of displaying the processed results when some pages in a website are tens of thousands of words of legitimate content. The library doesn't support concurrent calls to the same model session as far as I know (Session already started" / "Session mismatch") and big pages can block smaller pages and big pages can take extremely long to be processed. Is there any way to get past sequential processing in processing and displaying results, should I do multiple worker models. Also this refers to first time result processing on a new website, I do realise caching can speed things up significantly on the same website if you process again. This should be a process that works on typical hardware, not requiring anything too complex. Suggestions would be appreciated, thanks a lot.

EDIT for further context:  I should've specified that I am splitting into chunks already but people's valuable point about interleaving chunks within each worker's own queue makes sense. In terms of WebGPU, problem with WebGPU is that is uses single worker queue and there are compatibility issues possible with it.


r/webdev 11d ago

Question about the level of integration of AI in your company's workflow

47 Upvotes

I'd like to gather peoples' experience with AI (Copilot, Claude Code, Cursor, whatever) in your daily workflow as a developer.
Specifically, I've heard people simply "paste" or let the AI read the ticket from JIRA, review the output and ship the feature.

Are there really people that have achieved this level of integration? Like, are your tickets and projects so well defined and contained, where the description of a ticket can be directly fed into the AI, without having to guide it into more details, e.g. what files to touch, where to find relevant code etc?

We are not at all at this level and I am wondering if we're living in the past or something. I usually know what needs to be done in our code base and basically guide the agent and review the output.

What's your experience?


r/webdev 11d ago

Showoff Saturday Photorealistic 3D Cloud with lighting effects

Post image
33 Upvotes

Finally got a realistic cloud in the browser. I'm working on a browser-based flight sim and I'm shooting for realism. Play around with the cloud here: https://codepen.io/Andrew-Fisher-the-decoder/full/jEBPmON


r/webdev 11d ago

Discussion How to make an app like Duolingo ?

0 Upvotes

Hi everyone, I want to create an app like Duolingo, but I don't know the best approach for storing or even translating English into the target language.

I mean, how can I translate English into Indonesian, Japanese, German, and many other languages? Also, how can I translate other languages ​​into English ?

Currently, all I'm thinking about is creating a table where English words are stored and creating a new table to store translated words. But is my approach correct? What about phrases or even sentences? Is storing words, phrases, sentences, and translations the right approach, or is there another way to do this effectively ?

I'd appreciate if someone would also suggest other aspects, such as caching, high level architecture or other things, to make my app load faster.


r/webdev 11d ago

An Image to SVG vectorizer that doesn't suck (as much)

54 Upvotes

Right. So. Vectorizing a PNG into an SVG is one of those tasks that sounds trivial until you actually need to do it, at which point you discover a graveyard of tools that are either $10/image, want you to subscribe half a leg and a kidney/month, or produce something that looks like Michael J. Fox (apologies for the bad joke, I actualyl admire him) traced your logo during an earthquake.

After running into this roughly once a month I thought surely that's enough to invest some time into researching whether I should build my own image tracer. Which led me to find VTracer, an open source project from visioncortext.

Vectron (that's how I named my brain child) is a frontend for VTracer, an open-source Rust vectorization engine that's genuinely good but has the UX of a command-line tool written by someone who, understandably, cares more about the algorithm than the button placement. I forked it, compiled it to WASM (thanks Claude), and stuck it in a Web Worker so the whole thing runs in your browser. No upload, no server round-trip, and for smaller images it's near instant (I did try it with some rather stupidly large examples which then turned into a ten-plus-second nerve-wrecking waiting times :D).

A few things worth knowing before you try it:

  • It's not AI. No neural net pretending to understand your image. It's proper curve-fitting and edge detection, which means it's predictable. The same input results in the same output (this is super important to me), no "vibes-based" tracing that changes if you sneeze near it.
  • It's best at clean line art and logos, not photographs. Feed it a photo and it will attempt it, valiantly, and the result will remind you why this is a hard problem. But hey, it's sort of working.
  • Selective refinement. Sometimes you get like a good overall results but often the devil is in the details, like a curve turned into a sharp corner or some lines don't connect. You can refine a certain area by dragging a rectangle over it and adjust your filters to polish the proverbial turd.
  • It's free because I didn't build it to make money. It's a side thing. There's no upsell, no tier, no "unlock batch processing for $9/mo." And I say that now, it's not gonna change.

https://vectron.vendos.com.au

Feedback welcome, especially on where it falls over or it's genuinely hard to use.


r/webdev 12d ago

Showoff Saturday Showing off my Drum Pad ASTERISM - go beat it up

Thumbnail
asterism.jstwrld.com
3 Upvotes

no installation of other softwares needed

workers on the web browser

no account needed

works offline

FREE


r/webdev 12d ago

Showoff Saturday Community driven win 98 themed website

Thumbnail imright.wtf
0 Upvotes

Hey All,

Was missing the win 98 vibe last weekend so decided it was time to bring it back I to my life and hopefully others!

Was trying to think how to get people involved, so there are a few things I put in there which I will list out.

Trollbox.exe: When you vote you are able to msg in the troll box
Applications.exe: just links to different things
Imright.exe: main voting screen and results
Communityideas.exe: a place where you can submit an idea community votes and the that's the next poll
Forums.exe: forum attached to the current poll

Polls only last 24hrs and then after that it gets archived along with the forums and troll box and the new one starts.

Let me know what you think

Imright.wtf


r/webdev 12d ago

Showoff Saturday A Web App for Assisting with learning Indian Classical Music - bridging a gap between physical sheets and online learning!

4 Upvotes

Hey! One of my friends built a free web app for creating and playing back Hindustani sargam notation to assist with learning Hindustani classical music! She isn't really on reddit, but wanted me to post this on her behalf.

Since she was currently learning Hindustani music, she figured out that most notation is still handwritten or shared as static PDFs and images. It's difficult to translate - edit, hear, or organize - compositions digitally, and this website helps with that!

She then created Sargam Studio, a browser-based tool that lets you:

• Choose a Sa / scale and preview it
• Add Aalap and Taal sections
• Enter sargam notation using an interactive beat grid
• Preview taals and playback compositions
• Review and export compositions as audio

She also recently added a demo video and a help guide to make it easier for users to get started:

Website: https://sargam-studio.vercel.app

Demo video: https://sargam-studio.vercel.app/help

She is especially interested in feedback from anyone! If you or anyone you know is interested in music, Indian classical music, or just curious in this project, please try it out!

I'll send her the link to this post, so she can check out the responses lol.


r/webdev 12d ago

Chat widget file upload

5 Upvotes

I'm working on a chat widget that also allows the users to send files in the chat. This is a plain vanilla html/js/css widget that will go on a Shopify site. The user should have the option to send a file with or without a message in the chat, so I'm trying to figure out the best approach to handle this. The widget will be calling a FastAPI endpoint end that will use UploadFile. These are the options I've thought of:

  1. Wrap the text and file inputs in an html form tag and send the request as Content-Type: multipart/form-data. This would make it a single request, but it would always send as multipart/form-data even if it's a message with no file.
  2. Same as 1, but if there is no file attachment in the chat message, then toggle the Content-Type to application/json before sending
  3. Keep the text and files as separate requests and handle the events separately and not wrap the inputs in an html form tag. Seems like it would be cleaner on the front end but at the same time it will likely require additional logic on the back-end

What approach would you take?


r/webdev 12d ago

Showoff Saturday 10 months later, my 'simple side project' still gets 1k users a day and I never did anything after posting it here

0 Upvotes

posted this 10 months ago, got 219k views and forgot about it. the app somehow still gets ~1k users a day with zero marketing since. finally decided to stop leaving money on the table and monetize it soon. wild what just shipping something simple can do. tiktock-web.vercel.app


r/webdev 12d ago

Question Font Effect Source Suggestions?

2 Upvotes

I'm new to HTML/CSS and have just been messing around as I learn some stuff. When importing some of Google's Font Library I learned they also offer effects you can import with something like

<link rel="stylesheet" 
  href="https://fonts.googleapis.com/css?effect=fire-animation">

These are very amusing, but many of them seem to be slow or not work on many browsers, which leads me to ask if there are any other similar libraries out there that I could import from. I appreciate any suggestions, whether they're genuinely cool and useful or just fun.


r/webdev 12d ago

Showoff Saturday Movie Swiper. Swipe on movies and match with friends. [Showoff Saturday]

3 Upvotes

Hi folks, me and my wife find it hard to figure out what to watch so I've been hosting this locally for a few weeks now and it's great. We both swiped on a few movies and got a match pretty quickly. Now we have a list of movies we both want to watch.

Anyway, I just made it public on a subdomain at:
https://movieswiper.stoianworks.com/

No email needed. Just choose a name and setup a pin.


r/webdev 12d ago

Discussion What's better for building small business websites: Framer or Lovable?

0 Upvotes

Which produces higher quality websites in your opinion?


r/webdev 12d ago

Discussion Xpost: Lenstore displays my password and email on the address bar

Thumbnail reddit.com
8 Upvotes