/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
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...
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!
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?
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.
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?
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?
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.
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:
Any advice or guidance would be greatly appreciated! Thanks in advance!
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.
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?
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 )
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
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?
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!
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
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
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
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?
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).
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:
Note: The UI framework is far from finished. I want to share progress to see if there are any outstanding issues I'm overlooking.
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?
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.
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.
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 :)
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:
FormifyCSS: A library to enhance forms with pre-styled inputs, validation styles, and accessible ARIA features.
AnimEasy: Predefined CSS animations for quick use (fade-ins, slide-ins, etc.), with an optional JS helper for triggering on scroll.
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:
Does any of the above ideas resonate with you?
Are there any specific challenges you face when developing HTML sites that a library like this could solve?
Any other feature or idea you’d like to see in such a library?
Looking forward to your feedback and suggestions!
Thanks!
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! 😊
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?
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
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/