I wonder if there is a more elegant way to do this. My website is quite heavy due to the icon fonts I set up.

Hello! I'm messing around with some PWA features and getting really stuck when it comes to display modes. Basically every browser and device I test on behaves wildly differently, and I'm having a hard time distinguishing which of those behaviors are errors on my part and which are just browser funkiness.

(Link to my PWA if you want to check the manifest or see how it displays for you)

In my manifest, I try to set the display mode to fullscreen. This setting seems to only be properly and consistently applied when I test on my Lenovo Tab 11 running Chrome. Firefox on the same tablet does not respect it and starts in standalone mode, unless I also have the Chrome Version of the PWA installed. Once that is the case, Firefox is beautiful and consistent. I have no idea why the different versions installed by the different browsers would interact with each other like this.

When I install the PWA on my phone (Pixel 9 Pro running GrapheneOS), via Chrome or Vanadium, the site thinks it's running in fullscreen, but I still have a black bar at the top (it doesn't apply the theme color set in the manifest!). This wouldn't be a problem per se, but the browser also sets a safe-area-inset parameter, which, when I respect it, leads to a very fat distance from the top (the safe inset is green):

spoiler

When I install it on my phone via Firefox, the app sometimes thinks it's display-mode:browser but displays perfectly fine as fullscreen, and sometimes it thinks it's fullscreen but displays more like a standalone. It seems completely random and can change any time I close the app or navigate away from it:

spoiler

When I install the PWA on my secondary phone (Moto G100) via Chrome, it has similar issues as on my main phone (it thinks it's fullscreen but is actually standalone) but it does not apply that ridiculous safe-area-inset. That backfires sometimes as navigating back via gesture will catapult the page to take up the full height, so the header shifts into the top bar. Would have been nice to have that safe-area here...
When I install it via Firefox on the Moto G100, it looks good about half of the time! Actual fullscreen with proper safe-area that doesn't break on navigation. Sometimes it randomly starts in standalone mode, but with the proper theme color applied to the top bar. Everything breaks if I have the Chrome version installed at the same time though. Then, the firefox version will never show up as proper fullscreen, but always have almost the same display issues as the Chrome version on that same phone.

I haven't even tested the PWA on iOS yet (I'll have access to an iPhone in about 2 weeks though so I'll test it then) but I'm guessing it will have its own display challenges as well. I'm also still battling the display issues from swapping my SVGs to generate with colors from the OKLCH system (it seems to really mess with any open source browser I've tried). So maybe, I should just ignore the browser display issues for now and focus on my color display issues instead?

Also, does anyone know if I can just let the user decide on their own preferred display mode? It would probably be the best solution to just let the user set the display mode that actually works in their specific browser. But as far as I understand how manifest files work, I can't really change much once the app is already installed, and I haven't found any online documentation that would suggest that I could programatically change the display property in the manifest based on user input :( But maybe there's some workaround you know about?

I would be very happy about some pointers and feedback on how I might get this display thing halfway consistent!

cross-posted from: https://programming.dev/post/37407248

Scrolling through this webpage is an adventure.

I'm trying to make my first API with an accompanying website, and I'm using tutorials. I decided the MERN stack was the way to go, since it seemed popular and easy.

I have some experience with SQL itself, but have never connected a database to an actual application.

So I got to the point of making my database in mongoDB when I saw some stuff about how mySQL is more secure than noSQL, and how noSQL has some disadvantages.

The api/website I'm making is just a pet project, but if it ever does become popular, would I have to move my databases? Or is this a "cross that bridge if/when I get there" situation?

Alternatively can I have the same database in multiple places at once? As in, bot mySQL and noSQL?

Next time I start a new web app development I might try MariaDB Cloud with "Serverless tier is free forever for experimenting and small development projects"

DataViz Kit is on a mission to democratize data visualization. We provide a comprehensive suite of powerful, free, and easy-to-use tools that empower anyone—from students to professionals—to transform raw data into beautiful, insightful charts and graphs. No coding required, just clarity and impact.

DataViz Kit is on a mission to democratize data visualization. We provide a comprehensive suite of powerful, free, and easy-to-use tools that empower anyone—from students to professionals—to transform raw data into beautiful, insightful charts and graphs. No coding required, just clarity and impact.

An overview of what makes modern CSS so awesome.

cross-posted from: https://leminal.space/post/24911246

I'll be self-hosting a service with user submissions soon, so I'm worried about the https://howto.geoblockthe.uk/ situation.

Based on this I've wondered, are there any community maintained geo block lists that might be useful? All database options I found are either 1. an on-demand online service which seems questionable for privacy reasons, or 2. IPv4 only, or 3. have weird terms of use with a gag clause regarding the entire company making it and other weird stuff.

I'm not a fan of geo blocking in general, but the situation is what it is.

PS: Please don't discuss the Online Safety Act itself too much in the comments, or whether somebody should be using a geo ip to handle this. While I might appreciate useful input on that, I'm hoping this post can remain a resource for those who are looking for such a database for other reasons as well.

cross-posted from: https://lemmygrad.ml/post/8894778

Thoughts in this?

They were trying to create a different Internet or different hosting website, but from what I understand.

A good link list of sources to keep up to date with css/html/js standards. Isn't really a big find, still cool nonetheless.

Maybe somebody here as other sources to add.

Hi,

I have this rule in my nginx config file

	location ~* \/(fileA.txt|fileB.txt)$ {
		return 404 'nothing here';
	}

but it's not working

but

	location /fileA.txt {
		return 404 'nothing here';
	}

~~is working....~~

Any idea what's wrong ?

Thanks.

Hey hey, I have a static hugo web site online, for me personally, on a free netlify account. It's extremely low traffic and currently the only way to interact with me via that site is to submit a contact form.

I am considering my options for making the site more interactive. I am concerned about the cost mostly - I have no budget or maybe could spend a very small amount - and the privacy of the data people might provide.

I've done some searching and see the options out there -- disqus has no privacy, commentbox.io seems OK -- but I am curious how you all solve this / what you recommend for someone with my very low-end requirements. Thanks for sharing what works for you.

More precisely, GitHub Pages to Codeberg + statichost.eu, not Codeberg Pages.

cross-posted from: https://lemmy.world/post/33814221

Hey all! Got something I'd appreciate your opinions on in regards to the tech stack I'm planning to use:

The Main Question

The web app in question is a sort of project-management tool. Broadly, users will need to be able to:

• log in
• create and manage (e.g. update text content of/delete) "goals"
• assign "goals" to "years" or "quarters" (give "goals" end dates).
• view "goals" by status e.g. "completed", "not started", "finished"
• create and manage (e.g. update text content of/delete) "items"
• arrange "items" into "lists"
• add "items" to "goals"
• carry out "process reviews" in which they can check off or add "goals" that they've achieved that week/month.

In your opinion, is a MERN stack right for this? A web app that focuses heavily on user interactivity, with a lot of reusable components in the front end (I designed with that in mind). Would PERN be better? Would a totally different stack be your choice?

Some context - skip if not interested

I've worked full time in web for over a decade, but mostly focused on PHP. I've built some stuff in React but am not particularly experienced with it.

I've recently become dissatisfied with my role, and want to move into something a little different (and with a bit of a nicer paycheck to boot!). I've become interested in React agan.

With that in mind, I've made contact with somebody who was conveniently in need of something developing, but not urgently.

I've communicated that I'll not promise anything and won't take money for the work, but can walk through a wireframe/design/development process with them for free as part of upskilling on my side, and that I'm happy to provide support if they choose to reach out to an agency for development at any point on their side (just making sure all my cards are on the table, I'm not overpromising, taking money for a project I can't deliver, or in any way deceiving them of course).

I've done similar before for projects I'm interested in so all good. We're in good spirits and the work has gone well so far.

Thank you! Apologies if this isn't the right place to post something like this 🙏

Is there a cursor for vscode?
or what extension is comparable?

the thing is -> I cant use cursor becaus I use code server: https://github.com/coder/code-server for coding, so I cannot use cursor.

is there a go to stock photography site that is free of anything ai? i remember using istock back in the day but, like everything in the modern web, it seems to be infested with ai slop.

AI tools are great at generating frontend code, but they still fail at backend.

Manifest gives you a complete backend you can generate, edit, and ship directly from your AI coding environment.

You write one simple YAML file to get a complete backend with data, storage, logic and an admin panel.

• You stay in your AI editor. No drag-and-drop UI, no back-and-forth.
• The file is easy to read and edit, whether it’s written by a developer or an LLM.
• The result is consistent, clean, and ready for production.

How it works

Manifest is built on a concise set of clear and composable concepts, allowing you to generate backend code quickly and keep it easy to read and maintain.

Whether the backend is generated by an AI or written by hand, it stays clear, well-structured, and ready for production.

The built-in features cover everything you need to create secure, reliable, and ready-to-use backends.