Web Development

I'm still liking frontend JavaScript, but I am getting real tired of the ReactJS ecosystem, however I don't have the slightest idea how to get a job that's using a newer one such as Vue or Svelte

It does feel like once you've done the same framework for a while you get seen as FRAMEWORK dev instead of LANGUAGE dev

Any protips? This is kinda half a rant too

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.