r/Frontend 3h ago

Release Notes for Safari Technology Preview 248

Thumbnail
webkit.org
3 Upvotes

r/Frontend 3h ago

Outside things like Datadog RUM and Cloudflare layers, what other tools are you using to help detected automation?

2 Upvotes

Datadog RUM and Cloudflare seem to cover most cases of trying to help detect and stop automated activity, but curious if anyone uses anything else (FE library, third party tool, etc.)

Thanks!


r/Frontend 13h ago

Introducing the Safari MCP server for web developers

Thumbnail
webkit.org
11 Upvotes

r/Frontend 1d ago

How are we making toasts accessible?

31 Upvotes

Hi everyone,

The new EU accessibility law happened and suddenly toast messages started to be a problem. And then I discovered that GitHub has stopped using toast messages altogether. I'm reading up all possible documentations and discussions but I'm also curious about what the community is doing (because I am not paid enough to say don't use toasts, they're bad).

For those of you maintaining custom or home-grown corporate frontends (without component libraries like Tailwind UI):

Are you still using toast notifications in your products?

How are you handling their accessibility? Putting them in a live region is common sense but are you guys doing something extra?

If you regularly use screen readers like TalkBack or VoiceOver, what has your experience with toasts been like?

Hopefully it's going to be a good discussion!

AI usage - I used gemini to fix some grammar and some words, as English is not my first language and my thoughts were unorganized.


r/Frontend 1d ago

Has anyone read Frontend System Design Essentials by Juntao Qiu

54 Upvotes

I am prepping for FE interviews and Juntao Qiu has a bunch of good videos on Youtube (I Code It) related to FE System Design, and I am debating whether I should get his book: Frontend System Design Essentials: A practical guide to designing scalable, reliable, and maintainable frontend systems.

Has anyone read it? Would love to hear how you rate it.


r/Frontend 15h ago

Do we still need build tools?

Thumbnail
olliewilliams.xyz
0 Upvotes

r/Frontend 1d ago

Why does my OTF font render differently in the browser than in its original preview?

Thumbnail
gallery
5 Upvotes

I’m using an OTF font in an HTML project, but some glyphs don’t match how they appear in the font preview/application.

For example, in the first image, the dot on the lowercase “i” is slightly wider. In the browser preview shown in the second image, it becomes a more standard round dot. This is not limited to the letter “i” a few other characters also look more generic/classic in the browser.

The font is loading correctly, but the browser seems to render or substitute certain glyph details differently.

What could cause this? Is it related to OpenType features, font conversion/loading, browser rendering, or something else? How can I make the HTML output match the original OTF appearance as closely as possible?


r/Frontend 3d ago

phone keyboard hides parts of my page

5 Upvotes

i am using 100dvh as height of my page.

whats the best way to fix this?


r/Frontend 3d ago

View Transition API: Limitations and Workarounds

Thumbnail
ssgoi.dev
15 Upvotes

"You have to try it yourself to really know." I agree — but nobody has time to personally vet every new technology that ships. The next best thing? Following someone else's process all the way through. You save the time and keep the judgment.

So here's one of mine: I evaluated a new browser API and decided not to use it.

Have you heard of the View Transition API?
It lets the browser handle page transition animations natively — started in Chrome, and support is now expanding to Safari.

I decided not to use it in SSGOI, the page transition library I build. Not because "it doesn't work" — I weighed what the API handles versus what a library still has to own, across three criteria.

What's in the post:

  • Why two transitions that look almost identical turn out to be completely different problems
  • The limitations that come from not being able to step into the browser-generated scene
  • What you can work around today, and which future interfaces would change the picture

r/Frontend 4d ago

Customize any web-site with Njectify!

0 Upvotes

Hey everyone!!!

I'd like to share a project I've been working on: Njectify.

It's a browser extension that lets you inject CSS and JavaScript into any website, making it easy to prototype UI changes, test styles, and experiment without modifying the original source code

Some of the features include:

• Live CSS editing with an intuitive editor.
• Instant visual changes on any website.
• Automatic export of your CSS to Tailwind CSS utility classes.
• JavaScript injection for quick scripting and automation.
• Several additional tools designed to speed up front-end development.

The extension has already surpassed 5,000 users on the Chrome Web Store, and I thought it might be useful for developers in this community.

I'll leave a detailed article in the comments explaining the main features, use cases, and the extension itself.

I'd really appreciate any feedback, feature suggestions, or criticism. Thankssss!

detailed post.


r/Frontend 5d ago

How would you learn frontend having backend experience?

8 Upvotes

I've landed a junior .NET backend developer position not so long ago. Thing is, it would be good for me to know Blazor to contribute more; however, I've never done frontend.

Everyone is saying that frontend should be simpler than the general backend, but I just cannot wrap my head around it. Blwzor is using html, CSS, js, bootstrap and it's just so confusing to me, because it's mixed together.

If you were to learn frontend nowadays, having programming experience, how'd you do it? Should I start with plain html, CSS and then JS and leave the blazor thing aside for now, or should I just jump all in into all these combined?


r/Frontend 6d ago

What Happened to the Frontend While You Weren't Watching

Thumbnail
davidpoblador.com
353 Upvotes

r/Frontend 5d ago

need some advice from a senior react / frontend dev

0 Upvotes

I just finished learning React and started building some projects. Right now, I'm using AI as a guide. Basically, I explain my project idea or a feature I want to add, and ask it how to approach it. For example, it tells me "create a state in this file to handle X," and then I write all the code myself I never copy-paste code from it.

Is this a bad way to learn?

Also, what should I focus on at this stage? How can I level up fast so I can build whatever comes to mind without relying on AI at all?

Thanks


r/Frontend 6d ago

P2P file sharing app without cloud storage, free and open-source

4 Upvotes

Hey,

Few weeks ago I release my open source app called Altersend, it is P2P file sharing tool where you can send files directly between devices over the internet.

When I started developing this tool my main idea was to have solution where I can send files to anyone not just on local network and not be depending on cloud solution.

From technical P2P side everything you send is E2E encrypted via Noise protocol, peers find each other via DHT (think of it as some sort of book with contacts about other peers, and underneath it is Kademlia DHT). So when you want to send file we generate a random key which you should give to another peer. And after this anyone who has that key can connect and download directly from you.

As the initial entry point for peers, public bootstrap nodes are used (we do not host them) and after that peers discover one another through the DHT. Only if you are behind symmetric CGNAT or a VPN we use a blind relay server to help you connect, but the bytes flowing through are encrypted, and you can also disable relay in the settings.

Myself I am P2P engineer, so I tried to make at least some contribution to FOSS and make smth I have knowledge in, let me know your feedback.

Github: https://github.com/denislupookov/altersend

AI disclosure: I think it will be fair to disclose how I used AI in this project, basically it was used for code review (including on PR's) and to help with UI design. The core together with the project architecture and main logic was written by me, AI only reviewed it.


r/Frontend 5d ago

Modern frontend development using AI agents to help

0 Upvotes

I am a CTO and my way of managing my team is that they should/must use AI agents to help while they are doing coding. However, if i asked someone why is this code written in this logic and he/she could not answer, this is a big red flag.
Enough with the context, i need help from senior Frontend devs on how they are using AI agents with pure frontend tasks? I have my way but i am curious to hear your way and learn from it.


r/Frontend 6d ago

In defense of polyfills

Thumbnail
lea.verou.me
10 Upvotes

r/Frontend 6d ago

Animated UI components done as canvas/WebGL + spring-physics instead of CSS keyframes — 200+ open source, copy-paste

Thumbnail
nxui.geoql.in
15 Upvotes

I've been porting and building an open-source animated component library and wanted to share the motion work with a frontend-focused crowd — curious what people think of the approach.

The premise: instead of CSS keyframes, the interesting components are driven by canvas/WebGL and spring physics, so the motion reacts to input (cursor, drag velocity, scroll) rather than playing a fixed timeline.

  • Dithered Logo — Floyd–Steinberg error-diffusion particle logo with cursor repulsion + click ripples
  • Ripple Transition — WebGL image swap with refractive waves + chromatic aberration originating from wherever you click
  • Dynamic Island Header — navbar that springs into a compact pill with a reading-progress ring on scroll
  • Curved Drawer — the drawer edge bulges with spring velocity while sliding, then flattens at rest
  • Drag Reorder List — lift, tilt, drop-cutout, spring settle
  • Banknote Bento — intaglio duotone engravings + a thermal-camera card that types its own caption

Everything works in light + dark, and it's copy-paste — you pull the source file into your own repo (shadcn-style) rather than installing a black-box package, so you own and can edit the code. There's a "view source" sheet on every demo so you can read the actual implementation before committing to it.

Stack is Vue 3 + Tailwind v4 under the hood, but the motion techniques (WebGL shaders, spring solvers, IntersectionObserver-gated loops) are framework-agnostic if you just want to study how a given effect is done.

Live demos + source: https://nxui.geoql.in/docs

Open source, MIT. Happy to get into the WebGL / spring-physics internals if anyone's interested.


r/Frontend 6d ago

On Rendering the Sky, Sunsets, and Planets

Thumbnail
blog.maximeheckel.com
10 Upvotes

r/Frontend 6d ago

Alpha HEVC for iOS Safari?

1 Upvotes

I have animation made in AE encoded into Alpha HEVC mp4, but the alpha channel doesn't want to function on iOS Safari.

If you got it done on Mac (without Apple Compressor): what was your workflow?

Thank you.


r/Frontend 6d ago

Marketing teams: did your website ever become a real source of leads?

1 Upvotes

A supplier we work with mentioned IT Monks when we were talking about redesigning our site, and that got me thinking about something...Has anyone here actually turned their website into a consistent source of leads?

For years ours was basically an online brochure because most business came through referrals and distributors. Lately I've been wondering if we're leaving opportunities on the table by not investing more in manufacturing web development. If you've gone through a proper manufacturing web development project, was it worth it? Did you start getting qualified inquiries, or did the website mostly end up supporting leads that would've found you anyway? web development


r/Frontend 6d ago

Frontend Masters - best courses?

1 Upvotes

Hi, I’m a frontend heavy dev, and would like to hear some thoughts and opinions on which courses or paths gave you the best experience on frontend masters.

I’m enrolling in the year long membership by using a work education stipend, so I feel like I have enough time to go through a few paths or courses.

I normally like to spend about 1-5 hrs a week working on side projects or trying different ideas, so I’d most likely add another 3-5 hrs towards these courses. So if you’ve used the membership in a similar way I’d be interested to hear your experience on utilizing the membership.

Something’s I’d like to explore are advanced animations paired with accessibility considerations.


r/Frontend 8d ago

Yet another CSS link hover effects page

Thumbnail
wpdean.com
46 Upvotes

r/Frontend 8d ago

Tool/project that can autonomously explore and map a frontend application

0 Upvotes

Hello people,

I'm looking for existing tools, research projects, or open-source projects that do something like this:

A black-box frontend exploration agent that can start from a URL and interact with a web application like a human user, without knowing anything about the backend/APIs/database.

The goal is not only automated testing, but creating a kind of knowledge graph of the frontend behavior that could later be analyzed by an LLM.

I know there are AI testing tools and browser agents, but I'm specifically interested in systems that discover and map the application structure first, rather than executing predefined tests.

Does anyone know of projects, papers, tools, or startups working on something close to this?


r/Frontend 8d ago

Toolbox grid just reached 3.0.0 milestone

Thumbnail
oysteinamundsen.github.io
0 Upvotes

I've been working on this for a while now, and people seem to like the developer experience of it, the performance and the versatility of the library. This is my gift to the community, I hope you all like it and want to use it. It's free and the performance beats all other grids I've tested.

Repo: https://github.com/OysteinAmundsen/toolbox
Docs with live demos: https://toolboxjs.com/


r/Frontend 8d ago

is 'interactive-widget=resizes-content' usually used in production?

1 Upvotes

is interactive-widget=resizes-content usually used in production, or is there a better way to handle mobile viewport resizing issues (for example when phone keyboard comes up i dont want it to cover parts of website)? What approach do you normally used?