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

1

Vite

Https://svelte.dev/tutorial/basics - easy to get started with but really powerful for complex stuff too For layout, don't use any CSS framework, but instead refer to https://css-tricks.com/snippets/css/a-guide-to-flexbox/ often - every time I use some big CSS framework I end up fighting it at some point. https://vitejs.dev/ for packaging - I got really grumpy when frontend stuff started needing build and packaging tools, but it's the nature of things so you just have to deal with it, and vite is fast, not overly complicated, and supports fast hot reloading.

#Software Development #Web Frameworks #Developer Tools 386 social mentions

2

Tailwind CSS

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

#Developer Tools #Design Tools #Website Design 874 social mentions

3

DaisyUI

For those recommending Tailwind, it's huge if you're using it from the CDN (318K uncompressed). Other tools (except for Tachyons, these are maybe out of scope for a home lab): - Tachyons [0] is a small (16K-ish) utility class framework. - DaisyUI [1] is a free and open source component lib for Tailwind. - WindiCSS [2] is built on Tailwind with some additional features. - UnoCSS [3], an interesting on-demand atomic CSS engine that supports Tailwind CSS, WindiCSS, Bootstrap, and Tachyons. [0]: https://tachyons.io/ [1]: https://daisyui.com/ [2]: https://windicss.org/guide/ [3]: https://github.com/unocss/unocss.

#Design Tools #User Experience #Developer Tools 138 social mentions

4

Tailwind UI

#Design Tools #UI Design #Components Library 207 social mentions

5

React

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

#Javascript UI Libraries #JS Library #JavaScript Framework 778 social mentions

6

Bootstrap

* Bootstrap 5 for CSS and customized styling: https://getbootstrap.com/ * HTMX (formerly "Intercooler") for interactive (Ajax) functionality: https://htmx.org/.

#Developer Tools #Design Tools #Web Frameworks 329 social mentions

7

Pinegrow

Take a look at Pinegrow [0] (I'm the author). It is a desktop app that lets you visually work with standard HTML & CSS files and supports frameworks such as Bootstrap, Tailwind CSS or just plain old CSS. There are also more advanced features, for example live SASS compilation, components, interactions and even exporting WordPress themes and blocks. [0] https://pinegrow.com.

#Website Design #CMS #Website Builder 24 social mentions

8

React.run

This way you can have a hello world app that has a full CI pipeline in ~30 mins. [0] https://reactjs.org/docs/create-a-new-react-app.html#create-react-app.

#Javascript UI Libraries #Front-End Frameworks #JS Library 176 social mentions

9

MVP.css

I really like the ultra simple approach of MVP.css (https://andybrewer.github.io/mvp/). It looks better than no styling at all and doesn't require me to get into Bootstrap. Only minimal html tags needed. Perfect for small side projects.

#Developer Tools #Design Tools #CSS Framework 13 social mentions

10

Preact.js

Preact [0] + htm [1] Why? Preact is small, fast, and reasonably easy to use. But the main selling point for me was that, together with htm, which can be used instead of jsx, I don't need any build system a la webpack. No node_modules folder. I just have to load one script (preact + htm bundled), define my components in plain javascript files and import them. Bliss for me. [0] https://preactjs.com/.

#Javascript UI Libraries #JavaScript #Javascript Utilities & Libraries 83 social mentions

11

React Studio

And if you want a drag'n'drop GUI for this workflow, there's React Studio (macOS only): https://reactstudio.com It outputs create-react-app projects with no extra runtime components or other limitations. You can deploy on Netlify or do whatever you like with the code.

#IDE #Text Editors #Software Development 7 social mentions

12

Tachyons

For those recommending Tailwind, it's huge if you're using it from the CDN (318K uncompressed). Other tools (except for Tachyons, these are maybe out of scope for a home lab): - Tachyons [0] is a small (16K-ish) utility class framework. - DaisyUI [1] is a free and open source component lib for Tailwind. - WindiCSS [2] is built on Tailwind with some additional features. - UnoCSS [3], an interesting on-demand atomic CSS engine that supports Tailwind CSS, WindiCSS, Bootstrap, and Tachyons. [0]: https://tachyons.io/ [1]: https://daisyui.com/ [2]: https://windicss.org/guide/ [3]: https://github.com/unocss/unocss.

#CSS Framework #Design Tools #Developer Tools 23 social mentions

13

UnoCSS

For those recommending Tailwind, it's huge if you're using it from the CDN (318K uncompressed). Other tools (except for Tachyons, these are maybe out of scope for a home lab): - Tachyons [0] is a small (16K-ish) utility class framework. - DaisyUI [1] is a free and open source component lib for Tailwind. - WindiCSS [2] is built on Tailwind with some additional features. - UnoCSS [3], an interesting on-demand atomic CSS engine that supports Tailwind CSS, WindiCSS, Bootstrap, and Tachyons. [0]: https://tachyons.io/ [1]: https://daisyui.com/ [2]: https://windicss.org/guide/ [3]: https://github.com/unocss/unocss.

#Application And Data #Languages & Frameworks #CSS Pre-processors / Extensions 18 social mentions

14

Basscss

Ignore any recommendation of React, TypeScript, Vite, or Tailwind. Here are some recommendations that don't require NPM/Node. Pick a "classless" CSS library from a site like CSSBed[1]. These are kind of like Bootstrap, except you don't need to write any CSS or apply any CSS classes in your HTML for them to work. No tooling necessary; just include a <link> tag in your HTML document. If you'd like to try something similar to this "Tailwind" hotness everyone keeps talking about, try Basscss[2]. Again, no tooling, just need a <link> tag. Once you start needing to add interactivity to your site, htmx[3] is nice and decently simple. If you really want something React-like, Mithril.js[4] is very similar but much simpler. [1] https://www.cssbed.com/ [2] https://basscss.com/ [3] https://htmx.org/ [4] https://mithril.js.org/.

#CSS Framework #Design Tools #Developer Tools 1 social mentions

15

Svelte

#Javascript UI Libraries #JavaScript Framework #JS Library 356 social mentions

16

Divjoy

I made http://divjoy.com, which lets you assemble blocks into a multi-page web app and then export as a React/Node codebase. Works best if you want the backend in Node, but you can swap out for your own API.

#React #React Tools #Developer Tools 29 social mentions

17

axios

Yeah... I'm about as far to the other side of this as you can get. It really looks like the x-html attribute you're complaining about is just using plain old javascript. It takes a statement that resolves to a string, and renders that. The statement they provided happens to be pretty terrible for docs (I would have just used the built in fetch api, instead of the axios networking library - https://github.com/axios/axios), but it's plain old js regardless. Your example is some custom fucking DSL that I have NO idea what it's doing. When does it run? How does it handle errors? What is the base url? What happens to the original text? How does it auth? What if I needed to post, or put, or delete? It's an entire fucking language I have to learn on top of the actual css/html/js knowledge required to understand this. In almost all cases, you're better off just learning "plain old javascript" since that skillset travels with you everywhere. basically: DO NOT MAKE ME LEARN YOUR FUCKING DSL. It's wasted time and effort for me, and learning it provides absolutely zero benefits outside of your library. Further - it <i>will</i> fucking leak, and then you're right back at writing plain old js again, but now you have to understand the intimate details of the library implementing the dsl to tweak the right spots. Even alpine turns me off a bit here (it's <i>still</i> a dsl, even if most of it reverts to plain old js) - but at least they're incredibly up front about the total time investment to learn the dsl (15 attrs, 6 props, 2 methods). HTMX is like 5 times the size (https://htmx.org/reference/), so I assume roughly 20 times the effort to learn the DSL.

#Javascript UI Libraries #Developer Tools #JS Library 111 social mentions

18

Imba

Check out Imba [https://imba.io/] It makes really simple to do what you're asking for.

#Personal Finance #Financial Planner #Android 36 social mentions

19

Fresh Framework

There's Deno Fresh now (https://fresh.deno.dev/) which looks like a pretty interesting new web framework so far.

#Web Frameworks #JavaScript Framework #TypeScript Framework 62 social mentions

20

Streamlit

Check out streamlit: https://streamlit.io/ All Python, no need for JavaScript, css, etc. Lots of example templates.

#Developer Tools #Content Creators #Video Editing 176 social mentions