/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

287,131 Subscribers

1

Upcoming amazon interview for Frontend Engineer 2

Hey everyone, I’ve got interviews coming up for Amazon Frontend Engineer - 2, would anyone kind enough provide the list of machine coding question (frontend) previously asked by amazon, or a list of DSA problems.

Thanks...

0 Comments
2025/01/23
15:27 UTC

0

Webflow to Wordpress template

Hi, I have a web theme that I have downloaded in HTML format. All pages are in HTML code.

I want to convert it into wordpress theme so that it can be used in WordPress. For that I have to convert the HTML into PHP format. How to do so assuming that I don't know how to code?

I tried to use charge GPT to turn the HTML code into PHP code but when I upload it on WordPress it doesn't function. The index page is up and live at the homepage but none of the buttons are clickable and I don't know how to edit it using elementor or any other tool.

Please help me figure out how can I make this work. I understand that converting webflow to wordpress template is not going to be an easy task but there should be somewhere around.

Thank you!

2 Comments
2025/01/23
14:22 UTC

3

FIPS compliance for frontend libraries

My client asked me to verify if the front-end application is FIPS compliant. The app has nearly 400 packages, including dependencies. How can I ensure all these packages adhere to FIPS standards? I doubt any front-end library would use cryptographic algorithms internally, but how can I be certain? Is there any reference, list, or resource I can consult?

0 Comments
2025/01/23
05:34 UTC

2

Not sure if this is the right place, but looking for front end public facing gui development tool recommendations

I have a set of MySQL databases hosted on a vps, and I need a public facing gui that will allow users to view and edit different tables in these databases.

I'm not very good at websites, so does anyone have any recommendations for tools I can use to help me build the user interface?

I know there are several tools out there like Illa cloud or DBeaver that seem like they do what I'm looking for, but I'm not 100% sure.

The website would need to be hosted on my vps and interface with the databases on the same vps.

Any help would be appreciated.

9 Comments
2025/01/22
15:06 UTC

1

Settings view recommendations?

I don't really like the look (especially on mobile) of the way my settings look:
- The settings inside the card probably doesn't make sense, however without the card it looks weird on large viewport
- On mobile the themes take up so much space, any better ideas of displaying them?

https://preview.redd.it/44i6psu3rjee1.png?width=3164&format=png&auto=webp&s=dac956452cdcd09237f9422f16b1037f61ee8e66

https://preview.redd.it/vogniyv3rjee1.png?width=922&format=png&auto=webp&s=6ef90572fec84eefc06b9cb4c722e0c6819af654

3 Comments
2025/01/22
13:25 UTC

1

Pasting new stylesheet in Developer Tools

Our website is looking to get a reskin in a few months due to an update to our brand and I wanted to start changing things like colour palettes and fonts, ready for us to push live when the date arrives.

I've taken a copy of the stylesheet and I wanted just to paste the updated spreadsheet into developer tools to see all the changes without actually having to commit them or create a local version of the site in order to work on it.

However, when I paste and overwrite the file in developer tools, it doesn't show the changes as I would have hoped it would do similar to when editing individual elements using inspect element.

Is there a way to do this at all or am I going to have to upload the file to the server as a main2.css/take a local copy and just do things that way or am I missing something?

2 Comments
2025/01/22
11:48 UTC

0

Help me connect my webpage to my scanner!

I am trying to add a scanner integration to my website. I basically want a scan button on the webpage that directly takes a scan from the printer/scanner. I don't want a local server, or pass the problem onto backend.

I have tried using WebUSB and it even lets me select the scanner on the webpage, but after that it throws a "failed to claim interface" error. I have tried the basic fixes like checking if some other service isn't using my scanner, but it still just doesn't work.

I understand that this is a very complex method to perform the task, but i specifically want the browser to access the scanner, not a local server. If you have any fixes or any other approach, please let me know. I have been banging my head on this since 2 days.

1 Comment
2025/01/22
06:42 UTC

4

Questions about wordpress front end

Hi everyone,

I’m a computer science student, and a friend of my dad’s has asked me to help redesign a website for their small company. I have some experience with HTML, CSS, and JavaScript from building my own personal website (hosted on Vercel), but I’m new to working with WordPress.

I met with them briefly the other day and they informed me that their current website was built by an external vendor and currently uses WordPress, and they want a design similar to this: https://hl.com/. From what I understand, WordPress offers two options: a self-hosted solution and a managed hosting version.

I have a few questions, especially since I’m not very experienced with WordPress:

  1. Can I still edit HTML, CSS, and JavaScript on both the self-hosted and managed WordPress options?
  2. What are the main differences between the two options, and which one would be best for their website?
  3. What specific questions/details do I need to work on the project? Do I just need access to their wordpress account and I'll be able to access everything from there? Or are there other accounts I need access to

Any advice or guidance would be greatly appreciated! Thanks in advance!

8 Comments
2025/01/21
20:33 UTC

1

How bad is this experience description? Anyway to justify each line?

Developed scalable and maintainable responsive web applications using React/Angular. • Designed and implemented RESTful APIs to facilitate communication between frontend and backend systems. • Worked on new features and functionalities to enhance application functionality and user experience. • Improved code coverage for all the repositories from 0% to 80% and improved critical APIs by 40%. • Collaborated with cross functional teams including product managers, and QA engineers to deliver quality software solutions. • Documented functional requirements in SRS and resolved the ambiguities from stakeholders. • Supported production deployments, ensuring smooth and reliable releases Implemented Git for version control and ensured full compliance with CI/CD pipelines, leading to a 50% reduction in deployment time. • Deployed Docker containers for local development and production, reducing setup time by 60% and standardizing environments across teams.

2 Comments
2025/01/21
18:53 UTC

2

How can I do this?

I've seen this website in dribble and I wonder how would you even start thinking about building this, basically its like several tabs stacked on each other can you can scroll to move position and see a different tab. If clicked it expands and you can see the content.

Video reference here:

https://framerusercontent.com/assets/yMa9uWEdi8xJU7yzHgUbIoXf5EQ.mp4

I know it says framer so maybe using framer motion. I use react so any ideas?

6 Comments
2025/01/21
11:55 UTC

0

Suggestions about relocating from India

Hi fellow devs
I am a web application developer working in a German product company in Bangalore, India with 7+ YOE. I also do some side hustles and earn good amount of money. Off late, thinking about what I get in return to the taxes I pay, it deeply saddens me. I have not done any research about which country, and about the state and trend of Visa sponsorship by corporates. So please suggest with ur inputs and thoughts. (My aim is also to make lots of money )

6 Comments
2025/01/21
10:19 UTC

4

[Help] Looking for a code review on a toy application

Hi guys,

I wanted to get a code review for:
https://github.com/aliunwala/disney-character-frontend

This repo one for one of those take home exams and I am trying for a senior role in Frontend.

Sadly my last team did not make the most "scaleable" applications. So I have been doing some self-learning to try to add in some of the more advanced patterns into my demos.

If any of you who have been in the industry for a bit could take a few min to give me any tips on things I could add/change I would love to hear it!

Thanks! ❤️

Most of the features I personally added and focused on were:
https://github.com/aliunwala/disney-character-frontend#major-modifications-and-features-added-to-base-application

3 Comments
2025/01/20
19:11 UTC

0

Would you use our automation tool for you personal branding as a front end developer?

We built a really useful tool that automatically creates informative and on brand social media posts (Images, videos, and slides) about front-end related topics like APIs and fetching data, Responsive design, performance optimization and so much more. Would love you to give it a try?

1 Comment
2025/01/20
15:33 UTC

22

Looking for a Coding Buddy to Learn Full Stack Development Together

I’m a total beginner looking for a motivated partner to learn full-stack development with. We’ll e-meet 2-3 times a week for 5-10 hours total, studying, building projects, and holding each other accountable.

I’m focused on CSS, JavaScript, React, Next.js, and possibly Node.js or Supabase. Starting from the basics and aiming to build real-world apps.

Ideally in Europe for time zone, but open to others. Message me if interested!

34 Comments
2025/01/20
15:07 UTC

6

Why are sites/apps moved from to the slick or "modern" styles ?

Like Reddit from old to new or Twitter from old to new or facebook or any app really these days; they all give the same vibe idk what's the term exactly in design but it's less rough and colorful and more slick and simplistic

why did that shift happened ? is it proven that it increases viewership/usage or what exactly ?

Also same goes for even something like jetbrains which looks less industrial and more vscody these days

15 Comments
2025/01/20
14:48 UTC

0

NEWBIE IN THE HOUSE

Hi, so I'm new here from Nigeria, hoping on transitioning into tech frontend to be pricise hoping I could connect with few friends as to help me grow. please

13 Comments
2025/01/20
05:14 UTC

0

Tailwind CSS or Browser issue

So I am working on my small project for my brother to practice his quiz. When I open in on a computer, everything seems normal. But I notice the font color seems off when I open it on mobile. Not sure what I need to check here. My project is Angular v18 with TailwindCSS. Appreciate any comment. Thanks

https://preview.redd.it/75f8bn68n2ee1.png?width=2418&format=png&auto=webp&s=e3f63f5a237ca1ca44176c8c92ea00b9ac0ecb55

https://preview.redd.it/m5fwhl68n2ee1.jpg?width=1290&format=pjpg&auto=webp&s=e228b38b9aa1d80fe7b3409a4be318b60eba9271

https://studenthub-space.web.app/

8 Comments
2025/01/20
03:29 UTC

1

Strategies and tips for refactoring outdated project?

My team is small and most people are focused on back-end. I am one of the few front-end focused developers and our project is getting outdated (react based but using old libraries).

I would like to learn strategies on how to refactor the code to a newer stack. Remaking the whole project is not an option for us due to the size of the source code and number of devs.

Our project is an SPA and is still using webpack, older versions of design system library, old dependencies like single standalone components that don't even belong to any design system library, etc...

All of this is starting to suck and holding me back. On one hand my company pays me very well and is very stable and kinda famous, but on the other hand the project is holding me back. I study newer stuff on my free time, but it's getting more and more detached from my work.

Could you please share your experiences with this topic?

6 Comments
2025/01/19
21:02 UTC

13

Never learned a frontend framework. Where should I start?

I am not a developer but I work in a tech role that involves a fair amount of development. I've been writing code for around 12 years on and off.

I mostly focus on things like automations, microservices, internal tools, data pipelines, etc. I typically write python and use things like Django Ninja or FastAPI if I'm building a microservice or something.

One pain point I have is that sometimes I am limited in the types of internal tools I'm able to make because I don't have any real frontend experience. I know HTML/CSS/JS sure, but vanilla. React/Vue didn't exist when I was first learning programming, so the fanciest I ever got with JS at that time was jQuery. Frontend was never my thing, I don't really like dealing with UIs, so I never came back to it.

I'd like to work on this so I can build internal tools that have user friendly interfaces. Obviously I'm thinking about cases where it's gotta be a webapp and vanilla css/js isn't gonna cut it.

Not sure where to start. I know literally next to nothing about any of the frontend frameworks around. I also very much hate javascript but oh well, gonna have to bite the bullet there (or bite it's cousin with TS, I guess).

6 Comments
2025/01/19
18:55 UTC

6

ReactJS Syntax For Webcomponents

I'm creating a JavaScript UI framework for my own projects. It's a learning journey and I'd like to share my progress.

I've written some blog posts about my progress so far:

  1. Functional Web Components - https://positive-intentions.com/blog/dim-functional-webcomponents
  2. Functional Todo App - https://positive-intentions.com/blog/dim-todo-list
  3. Async State Management - https://positive-intentions.com/blog/async-state-management
  4. Bottom-up Browser Storage - https://positive-intentions.com/blog/bottom-up-storage

Note: The UI framework is far from finished. I want to share progress to see if there are any outstanding issues I'm overlooking.

1 Comment
2025/01/18
18:45 UTC

2

frontend interview at stripe canada what to expect?

I have an upcoming interview with stripe for a frontend focused role. I will be required to code out a small ui component. What can I expect?

12 Comments
2025/01/18
03:10 UTC

4

Looking for suggestions on HTML Fragments

I'm working on a project for people who are new to web development and open source.

It's called code contributions. Users will go through a tutorial, add an HTML file and submit a pull request to the same repository on GitHub.

I have two self imposed restrictions for this project.

  1. Users shouldn't have to install anything or setup tooling
  2. Their changes should be a separate HTML file

Reasoning behind (1) is to make the project more accessible. I'm assuming users would already have a web browser, text editor and terminal emulator on their machine. I'd like them to be able to complete the tutorial without installing any tooling (runtime, compiler etc) of a language. I'm expecting users to open index.html in their browser and see their changes.

Reasoning behind (2) is to avoid a big HTML file and merge conflicts

To implement fragments, I tried vanilla js, HTMX, Unpoly etc. My implementations ended up needing a server to be run on local (which goes against (1))

I ended up with a solution using iframes. All fragment HTML files are loaded in iframes now. I don't like this solution though. Ideally, I like to share scope, styles etc from the parent with child fragments.

If you have suggestions on enabling HTML fragments, please let me know.

Also, I'd love your feedback on this project. It's still in alpha stage and I'd love to improve.

5 Comments
2025/01/17
23:43 UTC

0

vueframe V3 is here !!!

vueframe

Hey guys I officially have released V3 of vueframe, adding a bunch of quality of life improvements along with a cleaner and more consistent codebase.

What is vueframe

vueframe is a Vue 3 component library, allowing you to easily import media embed components from platforms such as YouTube and Vimeo into your projects.

heres a github link to project if you wish to check it out + a star would be amazing :)

0 Comments
2025/01/17
23:16 UTC

0

Need Feedback on an Idea for an HTML-Centric Web Development Library

Hi everyone,

I’m planning to create a lightweight library specifically designed for HTML sites to make development easier for designers and developers who build static websites and HTML themes. I want it to be as simple to use as Bootstrap or Slick Slider—just include a CDN or a minified CSS/JS file, and you're good to go.

The primary goal is to help developers speed up their workflow and improve accessibility and design without depending on heavier frameworks or complex integrations.

Here are some ideas I’ve brainstormed so far:

  1. FormifyCSS: A library to enhance forms with pre-styled inputs, validation styles, and accessible ARIA features.

  2. AnimEasy: Predefined CSS animations for quick use (fade-ins, slide-ins, etc.), with an optional JS helper for triggering on scroll.

  3. GridFlex: A responsive grid and flexbox utility framework, focused purely on layout building.

I want to keep the library simple, useful, and focused on solving real problems faced by web developers.

What I need help with:

  1. Does any of the above ideas resonate with you?

  2. Are there any specific challenges you face when developing HTML sites that a library like this could solve?

  3. Any other feature or idea you’d like to see in such a library?

Looking forward to your feedback and suggestions!

Thanks!

3 Comments
2025/01/17
22:16 UTC

9

Interview Prep:

Hello everyone!

I have my first-ever full-stack software engineer interview coming up*(*not a FAANG), and I was initially preparing for the usual algorithm/data structure grind with LeetCode. However, I just found out that the interview will only focus on frontend development.

Since this is my first software engineering interview, I’m not entirely sure what to expect. Here’s some context:

• The interview will involve implementing a frontend UI component, and it will be conducted live with another engineer via HackerRank.

• I’ve done some frontend work in the past with React, TypeScript, and JavaScript, but I want to be as prepared as possible.

I’d love any insights, advice, or resources that helped you nail your frontend interviews. Thanks in advance! 😊

12 Comments
2025/01/17
19:56 UTC

0

Overall max width on website

I’ve been bouncing back and forth between setting a max width on my website (just the copy) or not setting one.

What are your thoughts on both? What do you typically set your max width to?

10 Comments
2025/01/17
19:28 UTC

0

Using WebLLM to build a purely frontend (no API calls) AI-powered editor (open source)

I made a smart text editor that runs only in the frontend using WebLLM and LLAMA. Requires chrome as it uses WebGPU.

Demo here: https://editor.yyjhao.com

source code: https://github.com/yyjhao/wrait

0 Comments
2025/01/17
19:12 UTC

1

New TilBuci version - a free software to create interactive content like small sites

Hi, everyone. I'm glad to release a new version of TilBuci, a software I've been working on to create interactive content. It is available from the software repository:

https://github.com/lucasjunqueira-var/tilbuci/releases/tag/v8

If you're interested in checking out TilBuci, please access the website: https://tilbuci.com.br/

0 Comments
2025/01/17
18:32 UTC

Back To Top