/r/Frontend
/r/frontend is a subreddit for front end web developers who want to move the web forward or want to learn how. If you're looking to find or share the latest and greatest tips, links, thoughts, and discussions on the world of front web development, this is the place to do it.
Are you beyond (or want to be beyond) the days of href="javascript:void(0)"
? Does the idea of having HTML templates inside of a MySQL database make you nervous? Do you love making beautiful, modern websites? Then /r/frontend is for you.
/r/frontend is a subreddit for front end web developers who want to move the web forward or want to learn how. If you're looking to find or share the latest and greatest tips, links, thoughts, and discussions on the world of front web development, this is the place to do it.
Here's the kinds of things you'll find (and should post about) here:
Nowadays, the field of front end development is evolving at such a rapid pace that sometimes it's difficult to say what is frontend and what isn't. Therefore, some lenience is allowed in the type of posts that may seem more back-end oriented so long as their emphasis seems to be in the spirit of the subreddit.
You can find a list of useful sites and resources including blogs, social media sites, utilities, guides, tutorials, newsletters, tools, and more in our /r/frontend wiki.
/r/Frontend
I'm noticing more and more different websites using the same fonts, colors that look the same.
I'm wondering, what framework is this one? or everyone is copying each other?
Hi guys,
My co-founder and I are looking for someone experienced with React Flow. We tried our best but our platform is very minimal on that regard, we need something more advanced.
Please reach out.
We use React, MUI, and Typescript for our platform
Made 4 to 5 javascript projects with help of youtube and udemy like weather, calculator etc, but still not able to write js on own without help...
And also i have to make projects with react and other backend and databases
So I need advice should I make more javascript projects or just move to making react and other backend projects so please guide me...
Hello guys, so I have a technical round which is the final round where I will be doing a pair programming with one of the developers in the company. I’ve been informed that it will take place within an existing codebase. I’m curious to know what this experience is typically like and how it compares to a live coding interview. I’m feeling a bit nervous and worried about potentially making mistakes.
If anyone has experience with pair programming, I’d really appreciate any tips, guidance, or insights you can share. Thank you in advance!
basically i am asking this because i find it much easier to do css with bootstrap and upto now i only think frontend developers do write in js and other frameworks while ui/ ux developers grind in css
if i am wrong plz share your opinion
edit: if u feel like roasting me than go ahead
I created this but it looks off for reasons i can not grasp.
what do you guys think can be improved
In the past I’ve always freelanced building websites for people, my go-to for this is just WordPress with ACF and a fully custom theme, what I love about it is the simplicity, ease and price of hosting, and the extensibility, problem is WordPress has been going in a direction that doesn’t fit with my needs and combined with the current political state of it, I want out!
A big driver in this is that I get the pleasure of working with React/RN/Next etc all day for my actual work, and there are so many things like radix’s primitives that I feel would benefit my workflow greatly - so I’m looking for a new stack to try out for freelance projects. Ultimately the actual front end is going to likely be next/astro, but there are a couple of gaps that I can’t decide on, the client needs a CMS, I’ve been playing either directus and payload, both seem solid, transactional email needs to be considered, I’ve had good experiences with postmark in the past, and at this point it’s also turning into a bit of a jigsaw puzzle
The other side of this is hosting, for the scale of most of the sites, I’ve been leaning towards using docker so that I can self-host the CMS and NextJS on a £5 hetzner server, and backup to backblaze - ideally I would rather use CF pages for the static site, and use a managed CMS etc but the cost is looking a bit much for a worthwhile profit margin
I really want to switch away from WP and modernise my go-to stack a bit but the ease of WP just keeps dragging me back in!
I was curious if any of you guys have similar requirements and what your preferred stacks are?
Source: https://github.com/akash191095/background-remover
Link: https://bg-be-gone.vercel.app/
NPM package: https://www.npmjs.com/package/@imgly/background-removal
Wanted to try out svelte as I have mostly been coding in react.
Found a couple of tutorials and this npm package which helps in removing background.
Kind of amazing how easy it has become, I still remember using the pen tool in photoshop to do this.
My code is probably crap as I am very new to svelte, feedback welcome on how I can improve the code.
Whenever the content of shadcn dialog exceeds 100vh, it gets cut off from the screen. I know that I can fix the heightkf the dilaog and make the inner content scrollable. But I want the entire dialog to be more than 100vh if it needs to be and have the entire thing scroll. Any idea how to achieve this. Thanks in advance.
I'm transitioning from WordPress development to React product development, and I’m curious about the types of tasks you handle in real-world projects. If you could share your recent experiences or challenges, I'd greatly appreciate it!
Hey all, out of nowhere my import aliases in next js is giving me modules not found. Why is that? I have removed and re-installed npm, didn't worked. when I use ../ instead of @ it works. Just happened all of a sudden without changing anything.
I'm trying to figure out what the best way to go about this is in 2024, as most of the info I've found is from 1-4 years ago.
I'm using VS Code which has the "Live Sass Compiler" extension (by Glenn Marks), which seems to work and be maintained.
But I've seen a couple videos and posts arguing that one should avoid extensions and instead use npm to both compile and watch .scss files. Unfortunately they didn't really convey to me exactly why using a package manager or using a package manager + bundler combo was much better than using an extension.
Can anyone demystify this for me?
Is using package manager actually better than using a VS Code extension? and if so.. why?
Please keep in mind a lot of these concepts are pretty new to me, so I appreciate being talked to like I have no clue! I've used npm, homebrew, and probably some other stuff in the past, but I had absolutely no idea what I was doing as I was just following step-by-step tutorials back then.
Hi i'm looking for resources or sites where i can finds designs to replicate (it can be full websites or only components )to implement by myself. Any recomendation?
Can anyone offer any tips, libraries or resources that can help me get started? Any information would be greatly appreciated. Thank you! 😊
I've got about 100 different sites with similar content (college program offered at various universities). Each live on a subdomain of each university's main site.
Is there a simple page builder out there with a CMS that would allow me to push the content across all the sites -- while also allowing for some overrides/customizations on a few of the content fields?
I'm sure this can be done with a headless CMS solution (contentful, sanity, etc) but hoping to have the front end page builder also built in (for ease of use for non technical folks on my team).
This is a rant.
Just read this post about CSS-in-JS and it made me think. Why are CSS selectors even a thing? I'm not talking about :hover and similar, I'm talking about combinators like > and +.
We can just assign distinct class names to elements with distinct style. Any selector more complicated than a single class name (and maybe a modifier like :hover) is just a potential source of bugs, especially with specificity. BTW, I think this is the reason why css-in-js is appealing, as you don't even have to make up a class name in the first place and you essentially get rid of selectors.
Does anybody have a valid use case for CSS selectors that isn't better solved with JS? I'm curious
Links or treats🎃
Hello,
I cannot understand the purpose of using the CSS-in-JS method. How does it provide convenience compared to the coding we do with no modules. Can someone explain it in a simple way?
Thank you.
Forewarning I'm not an engineer, I'm in product trying to get some help with a situation we are having. I want to see if anyone has found any workaround to getting out of all of the in app browsers that instagram, tik tok and every other app that uses it. I've seen some stuff here and there that sometimes work with ios and others work in android but haven't really seen a solution for mobile devices and it's really screwing us over when we try and run ads that get sent to our website. Our main login we have is google authentication and it won't work in an in app browser as I'm sure most of you know. If we can force it to an external browser that would be awesome. But i know those apps are stupid and want to make you stay in there for the benefit of tracking you hah. If anyone has found any solutions that would be awesome thanks
It's an Angular project, but my question can apply to other frond end frameworks.
There's this Item object in the code:
interface Item {
id?: number;
orderId?: number;
departmentId: number;
department?: string;
accountId: number;
account?: string;
chargeableActivityId?: number;
chargeableActivity?: string;
units?: number;
rate: number;
date?: Date;
}
In the component, there are 3 lookup arrays (ID to name) for department, account and chargeableActivity dropdown selections. When the page first loads or when users select a new value, the name of the selected element (e.g. department) will be searched from the lookup arrays, and saved in the Item object to be render in the readOnly mode. When the item is saved, the component makes a new clean object with only the IDs to be posted to the API.
I thought it would be easier to have getDepartmentName(departmentId: number)
and similiar functions to get the element content in the template, rather than saving them in an object. What's your thought?
Hi.
I am currently building something, and I struggle with this component. I have tried different designs that I have come up with, but still that did not make me happy. The placement/spacings feel kinda off.
Basically, It's a list which contains order ID, order status, order dishes (with dish name, quantity, options, price and status).
Any tips from you guys? Would appreciate if you could help me ease my headache.
Thanks!
I'm currently using Chart.js to create a real-time graph with Socket.io for updates. However, the chart currently only displays the last 20 data points stored locally in the browser. I'd like to implement features like pan, zoom, and subgraphs to allow users to explore historical data stored in my PostgreSQL database.
My main challenge lies in efficiently retrieving historical data on every user interaction. I'm concerned about overwhelming the database with too many requests. Additionally, I'd like to understand how to aggregate timestamps into meaningful units like months, days, or weeks for the chart's x-axis.
Could you point me towards any relevant blogs, articles, GitHub repositories, or videos on this topic?
Edit: I’m mainly talking about the USA here and for sites that sell products in the US only.
I know everyone likely has had experience using https://pagespeed.web.dev/
I think it's starting to become an outdated metric to test against based on their extreme throttling. The reason is that the FCC has mandated that all mobile download speeds be at least 35mbps and that page speed insights throttle you down to 1.6mbps for mobile devices, which just doesn't seem like a current-day datapoint for average mobile speeds.
Also, a quick search of some data points shows that the average speed on the low end for mobile devices is around 50 Mbps and over 100 Mbps in the middle.