Ask HN: What's is your go to toolset for simple front end development?

#1

Post by anakaine » Thu, Jul 07, 2022, 8:45 AM UTC

I'm quite firmly in back end development. Often times I find myself wanting to have a simple front end to which I can attach some new experiments for home brew coding such as Flask.

I'd not mind if my front end looked a little bit nice, but don't want to spend forever learning, hand coding, and trouble shooting html, css, JavaScript.

What's in your toolkit for some simple front end drag and drop style block building that gives you enough of a template to get started? I've seen the odd one posted on HN over the years, but never had the foresight to save one.

Given its home lab style stuff I don't really want to dive into the likes of Webflow, Canva, etc.

Re: Ask HN: What's is your go to toolset for simple front end development?

#2

Post by blackbear_ » Thu, Jul 07, 2022, 9:03 AM UTC

Being no frontend dev myself, the rare times I have to do a webpage I go for jquery and bootstrap. May sound old-fashioned, and perhaps it is, but it works.

Re: Ask HN: What's is your go to toolset for simple front end development?

#3

Post by he_is_legend » Thu, Jul 07, 2022, 9:04 AM UTC

https://tailwindui.com/ - lots of pre-made templates using tailwind css. Some are free, but the more advanced ones require payment.

Re: Ask HN: What's is your go to toolset for simple front end development?

#4

Post by dusted » Thu, Jul 07, 2022, 9:06 AM UTC

I just read that you didn't want to troubleshoot html, css and js, so my goto toolkit for simple UIs might not fit your bill, but hear me out :)

At work, when I do internal tools, they are usually well received. They also pass just below the threshold of having their looks be judged. They're not ugly, because they're almost not there.

Very plain HTML: HEAD+TITLE, H1, H2, UL, OL, A, IMG, INPUT, BR, TABLE, P Javascript as needed, usually embedded in the HEAD There is no CSS.

There's simply no design to attack, no colors or alignments to disagree with. It exposes the interface to communicate with the backend, nothing more.

It's also the fastest and simplest way of getting stuff done, if you don't need to expose it to "end users".

Re: Ask HN: What's is your go to toolset for simple front end development?

#5

Post by davidkuennen » Thu, Jul 07, 2022, 9:07 AM UTC

Honestly? React [0], Tailwind [1] and Vite [2]. Using Vite so setup the environment and tailwind components for css I have never been able to create front end faster than now. It feels like a super power.

[0] https://reactjs.org/

[1] https://tailwindcss.com/

[2] https://vitejs.dev/

Re: Ask HN: What's is your go to toolset for simple front end development?

#6

Post by H8crilA » Thu, Jul 07, 2022, 9:07 AM UTC

Took me a moment to realize that frontend here means HTML+js, not the HTTP server (that is the first server that handles user's request, therefore being the frontend to everything else).

Re: Ask HN: What's is your go to toolset for simple front end development?

#7

Post by lbriner » Thu, Jul 07, 2022, 9:07 AM UTC

It depends a bit. If you want a real "micro" framework so it is super fast loading, then that will narrow down your options (I looked at purecss which is really small) but then it is likely to lack the more powerful controls you get with something like bootstrap.

If you want more bells and whistles then bootstrap is fairly easy to understand, allows you to customise your js/css to only include what you are actually using but if you want the full scss experience to easily tweak parts of your design, it is all extra work to setup using gulp/webpack/visual studio code plugins or whatever.

Re: Ask HN: What's is your go to toolset for simple front end development?

#8

Post by purerandomness » Thu, Jul 07, 2022, 9:09 AM UTC

* Bootstrap 5 for CSS and customized styling: https://getbootstrap.com/

* HTMX (formerly "Intercooler") for interactive (Ajax) functionality: https://htmx.org/

Re: Ask HN: What's is your go to toolset for simple front end development?

#9

Post by herbst » Thu, Jul 07, 2022, 9:13 AM UTC

- Bootstrap

- Bootswatch

- Some custom scss to pop it up

- Some basic jQuery for everything dynamic

Simple yet super effective

Re: Ask HN: What's is your go to toolset for simple front end development?

#10

Post by _rutinerad » Thu, Jul 07, 2022, 9:14 AM UTC

I usually just pull in fomantic ui (fork of semantic ui). It has all the components (and variants) I need, it’s easy to use and the components look much nicer than other ui frameworks.