Web Development

It's never possible to do anything with it easily. It's nothing but trial and error, looking up random guides, and praying for the best. There's no logic. There's no intuition. It really feels like the morons who put it together were just acting without thinking. They had no concept of an end-user trying to make use, or god forbid sense, of this convoluted shitstack.

Perhaps WASM really is the future. Maybe one day we will only have stories to tell young devs around campfires about how awful their ancestors had it.

You can now jump to a CSS custom property's definition from within the var() function in style rules.

On clicking the arrow here:

You get jumped to where it's defined, and it's briefly highlighted.

The events tooltip in the Inspector now shows a badge besides custom events, making it easier to differentiate them from built-in events.

I think it's the "User-defined" badges I circled:

Full release notes

About Bun:

Bun is a fast, incrementally adoptable all-in-one JavaScript, TypeScript & JSX toolkit. Use individual tools like bun test or bun install in Node.js projects, or adopt the complete stack with a fast JavaScript runtime, bundler, test runner, and package manager built in. Bun aims for 100% Node.js compatibility.

1.3 release:

The highlights:

• Full‑stack dev server (with hot reloading, browser -> terminal console logs) built into Bun.serve()
• Builtin MySQL client, alongside our existing Postgres and SQLite clients
• Builtin Redis client
• Better routing, cookies, WebSockets, and HTTP ergonomics
• Isolated installs, catalogs, minimumRelease, and more for workspaces
• Many, many Node.js compatibility improvements

Native browser APIs now provide powerful alternatives for routing, state management, and components. Never mind the frameworks, use the browser.

The least amount of CSS for a decent looking site

Interop 2025 is a cross-browser effort to improve the interoperability of the web — to reach a state where each technology works exactly the same in every browser.

The WPT Dashboard, wpt.fyi, displays results for the web-platform-tests, or WPT, which are a group of test suites for many web platform specifications.

• WPT GitHub Repository
• interop project - GitHub repository

I linked to the stable view. Experimental has much higher scores. (Hopefully stable soon? :))

Do you guys already use css @layer in your code? just curious.
Do you deem a level of adoption sufficient?

https://caniuse.com/mdn-css_at-rules_layer

its time to admit it... my app basically looks like an ugly whatsapp clone when i tried to design the UI. i came to this version of the UI by creating messaging functionality and then shaping the UI around the data needed to be shown.

messaging apps are generally very similar with things like a chat-page and chat-list-page, etc. i made an attempt myself and think i should draw more inspiration from existing apps... it would especially be intuitive for users if i "copy" an existing app that people are familiar.

https://glitr.positive-intentions.com/

its far from finished and its all hard coded data, but id like to share this now in case anyone wants to take a look and give feedback on things that could make it better. i'll try my best to take it on board as a make improvements.

the corresponding component library can be seen at: http://ui.positive-intentions.com/

future:

• improve functionality around the image editor
• create components for various attachment-types
• improve voice recording functionality
• and much more

(note: this is not a working app. all the data is hard coded and reset on page refresh.)

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.