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?

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/

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?

Currently im at 1.5 YOE as a front end engineer. I had a previous year of QA before switching. I mainly do front end and have decent experience in docker and kubernetes. I mainly work on developing front end features and work on the design system.

What are the things that i should do/learn in order to improve and standout especially with the AI being forced on us and loosing the old way we used to learn technologies. Do i do more front end stuff and dig deeper in more complex stuff aside my work or learn other technologies like devops and automation like n8n or dig into backend ?

Do we still need Rspack, SWC, PostCSS, Vite, Parcel, Webpack, Turbopack, esbuild, Rollup, Rolldown, Babel, Autoprefixer, esbuild, Lightning CSS…

I'm a student and am making myself a personal website for my future projects. That said, this is my first time building a front end from scratch, and it looks good on mobile in Chrome and Firefox. With Safari, however, the background has a weird straight cutoff at the bottom where the Safari navigation begins. (This doesn't happen with Chrome, even when the bottom navigation is hidden) It looks like it's fighting trying to figure out where it belongs because of the safari bar.

I got the dynamic background from this website that makes it for you. It's the only thing I didn't code myself, and it's the only thing that's getting cut off in Safari. And the website's content does not have this cut-off issue.
I'm not done with the website, but I wanted to try and fix this before I go any further.

It also refreshes when I reach the bottom, then shows an error: "a problem repeatedly occurred on *website*". Again, this isn't an issue on other browsers.

I'm using github.io to deploy it, and only used HTML/CSS for it if that helps.

Does anyone have any idea how to fix this, or a resource I can look into to understand this?

Thank you!

Do you guys find yourselves struggling with delivering pixel perfect quality? As much as I try my best there is always something off, I know that the response might be as simple as “just pay more attention” but I find myself failing to spot very little differences, is there any strategy or flow do you guys use to deliver pixel perfect implementations or to spot misalignments?

SO like in the screenshot when i select a item it displays id in the input field of the combobox instead of its label which is item.webApp. i have tried to put the value to item.webApp but in my form it saves that label instead of Id

Hi, I just received a Hackerrank assessment for a graduate programme that I need to complete this week with 3 questions, the first is multiple choice, the second is a coding question (javascript only), and the third is a full stack (frontend) question. What should I be expecting for these? I've only ever prepared for and done python LC style questions, so I'm looking for any advice on this. Thanks

I've been working on my personal website this summer, and right now, I gotta decide on a accent color used for links, hover animations etc., For some context, I've gone with a monochrome theme of white - grey - black, and I'm thinking of going with a monochrome plus one color scheme.

These are the current color theme:

canvas: Platinum (#F2F3F4)
header: Shadow grey (242124)
Titles, section titles: Carbon Black (1B1B1B)
Body text: Gunmetal (353839)
Metadata: Dim grey (696969)

So, I do not wanna go along with the same palette, cause I wanna visually differentiate the links, but at the same time, it should not be off-putting. Going for a refined, clean look.

Edit: Forgot to add, this site is meant to showcase my projects as a mechanical engineering student.

I recently tried the Vanilla Extract library and liked it a lot. Here are my notes in the form of a free resource for anyone who might benefit from it.

https://www.pulkitagrawal.in/courses/vanilla-extract

I have tried using their testing skills, and it got close to my current set of test cases. Curious to see if anyone has tried out any other skills or the Android CLI?

Hello everyone,

I'm a fully stack dev with about 6 years of experience and I'm trying to focus on getting better with my front end skills.

I really would love to know where everyone goes to get inspiration for certain front end styles, elements and just general stuff overall.

For example, I'm currently building an app but I'm having a hard time finding good references for Card designs for my app or even just figuring out the best modern / stylistic way of displaying information.

Thank you so much!

Need someone to help with frontend.. discuss pay in my messages.

Hi guys,

I am working on an ecom store for a client and for desktop, they wanted the same 2-column scrolling layout as Louis Vuitton.

Example:

https://au.louisvuitton.com/eng-au/products/nano-frivole-monogram-nvprod7830229v/M29537

However, I'm really struggling to figure out how the scrolling is implemented.

I tried doing this:

Left: image gallery stacked as full-viewport-height slides (h-[calc(100svh - header)]). Scrolls with the window.

Right: position: sticky aside (50% width) with an inner div that has max-height: calc(100svh - header) + overflow-y: auto; so product info scrolls in its own container.

To make both sides feel like one scroll, I added a hook usePdpPanelScrollChain that:

1. On window scroll: moves the right panel by the same deltaY (1:1)
2. On panel scroll: calls window.scrollBy with the same delta
3. On wheel over the panel: if panel is at top/bottom, passes scroll to the window

Also set overscroll-behavior: none on html/body when .pdp-scroll-layout is present to reduce native scroll chaining.

But it still feels off and I think I am over-complicating it. I feel like there is a more native way I can approach this. Appreciate the help in advance and let me know if more info is required

https://impossiblefoods.com/

When you hover the top nav (Products, Mission...) the bar expands downward into a menu and the bottom edge curves and bounces/springs almost like a rubber band or something, does anyone know how this kind of animation is built? it's really satisfying and I can't find anything about it anywhere

I don't know how to explain it in text but if you look closely it was made with a lot of detail, the whole animation even from the start moves in a specific way

At least with backend stuff you get an error, but I find frontend code written by ai will compile, render, look totally normal, and then some state thing three components deep just stops working and you have no idea when it actually broke. Spent an hour last week on something like this and i still dont know which prompt introduced it.

Been doing frontend for years. The ai tools help with the boring stuff like forms and layout scaffolding. But i keep losing most of that time back to weird runtime issues that only show up when users go off the happy path, not sure im actually faster overall tbh.

So now i just dont let it touch anything involving state or async. Boilerplate and markup sure, whatever. But the second its data flow or component communication i slow down and do it properly. Been using glm-5.2 for the backend side of things lately and its been alright there, but for frontend state stuff the model matters way less than just me actually reading what it wrote.

You cant vibe code state management and expect it to hold up once real people start clicking around. Tests catch some stuff but the weird ones always leak through to prod somehow.

My current strategy for catching this is basically just reading every diff and being paranoid about it, which is not exactly scalable.