/r/Frontend

Photograph via snooOG

/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.

What is /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.

Here's the kinds of things you'll find (and should post about) here:

  • HTML5 APIs and elements
  • JavaScript frameworks, libraries and microlibs (BackboneJS, AngularJS, Knockout, Ember, jQuery, Zepto, and on...)
  • CSS/SCSS/LESS/etc. frameworks/tools/management
  • Design workflow and prototyping tools
  • UI/UE/UX examples and discussion
  • Neat new stuff like canvas, web sockets/workers, audio, etc.
  • Responsive/mobile design and optimization
  • Page-load performance optimization and perceived speed
  • Web-focused application architecture and development
  • Analytics and data visualization
  • Asset management and deployment
  • Automation and build tools
  • Accessibility best practices
  • Front-end office/company culture
  • ... and anything else that probably fits!

Rules

  1. Keep self promotion to a minimum. "It's perfectly fine to be a redditor with a website, it's not okay to be a website with a reddit account." - Confucius
  2. No posting your project without the source or repo We get it, you guys build some cool things, but this isn't r/sideproject or another sub for getting praise and onboarding users. For it to be valid and related to frontend it should be accompanied by the open source repo, and the context of the post should be around the frontend of your project, not the project idea.
  3. No Recruiters. or recruitment posts.
  4. Stay on the topic of Frontend

The web is growing fast

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.

Front-End Resources

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.

Related Subreddits

/r/Frontend

276,935 Subscribers

2

What framework/library/template these Saas services are using?

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?

https://preview.redd.it/ko2ntviq2qyd1.png?width=906&format=png&auto=webp&s=906b12df6a5bfd6fa4a6c4a9a2d1b661fde4e906

https://preview.redd.it/kurdg8ju2qyd1.png?width=814&format=png&auto=webp&s=a6e5a164a52a2a721e5d0c3a51c1789d1ef5178a

3 Comments
2024/11/03
17:35 UTC

0

Looking for someone experienced with React Flow

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

7 Comments
2024/11/03
09:07 UTC

8

Javascript projects

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...

21 Comments
2024/11/03
04:06 UTC

2

Pair programming Interview

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!

3 Comments
2024/11/02
17:35 UTC

0

should a frontend developer get his hand dirty with css or just stick with javascript

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

26 Comments
2024/11/02
13:57 UTC

6

whats wrong with this landing page

https://preview.redd.it/fsnwfjnofhyd1.png?width=1843&format=png&auto=webp&s=0bb5c1ee26aa36846f77bad7cc224fc348c092bb

I created this but it looks off for reasons i can not grasp.
what do you guys think can be improved

16 Comments
2024/11/02
12:32 UTC

1

Simple site stack - advice?

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?

5 Comments
2024/11/02
09:55 UTC

11

Created an app to remove background from images, can't believe how easy this was!

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.

7 Comments
2024/11/02
09:01 UTC

0

Shadcn dialog scroll issue

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.

8 Comments
2024/11/01
18:46 UTC

24

React developers, what was your most recent real-world project or task?

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!

35 Comments
2024/10/31
12:24 UTC

0

Import alias error

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.

2 Comments
2024/10/31
01:40 UTC

0

Compiling and watching Sass on VS Code - Extensions vs. npm

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.

7 Comments
2024/10/31
01:32 UTC

7

Where to find inspiration

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?

14 Comments
2024/10/30
19:10 UTC

0

I'm looking to recreate the original XBOX (2001) Dashboard UI and Homepage using HTML/CSS/JS

Can anyone offer any tips, libraries or resources that can help me get started? Any information would be greatly appreciated. Thank you! 😊

20 Comments
2024/10/30
18:25 UTC

0

CMS for multiple sites on different domains?

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).

10 Comments
2024/10/30
15:43 UTC

0

What's the point of CSS selectors?

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

33 Comments
2024/10/30
15:13 UTC

56

How do you decorate your website for Halloween this year?

Links or treats🎃

21 Comments
2024/10/30
14:56 UTC

12

Question about CSS-in-JS

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.

23 Comments
2024/10/29
17:10 UTC

1

In App Browser Help

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

3 Comments
2024/10/29
15:39 UTC

1

Get element content from object properties vs. directly using function

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?

1 Comment
2024/10/28
22:05 UTC

8

Tips on how to improve the design of this component?

https://preview.redd.it/t0vlto77ckxd1.png?width=742&format=png&auto=webp&s=5e8650dcd2cdcd302b0c44198333059cea3fe7ac

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!

25 Comments
2024/10/28
21:15 UTC

3

How to implement real time timeseries-line chart.

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?

6 Comments
2024/10/28
20:50 UTC

3

Is PageSpeed Insights outdated? Basing this question on the throttling speeds.

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.

19 Comments
2024/10/28
19:38 UTC

0

hi guys, do you know any libraries/webs with handrawn sparkles svg for this button? thaknks

0 Comments
2024/10/28
18:00 UTC

Back To Top