Ask HN: What novel tools are you using to write web sites/apps?

This page summarizes the projects mentioned and recommended in the original post on news.ycombinator.com

Our great sponsors
  • Scout APM - Less time debugging, more time building
  • SonarQube - Static code analysis for 29 languages.
  • OPS - Build and Run Open Source Unikernels
  • GitHub repo hotwire-rails

    Use Hotwire in your Ruby on Rails app

    Fav thread ever!

    A good 5+ years ago I built HasGluten [1] with react backed by a google spreadsheet, hosted on github pages. Proven technology, it's still working.

    More recently I hacked together MultiPreview [2] with react + API served by firebase functions. I'm also temp using firebase hosting as I have little traffic, but plan to replace it with edge computing / CDN caching.

    MultiPreview is backed by Saasform [3]. This is more like a classic node/express (nestjs) application, but I really like how we're separating concerns: the SaaS = MultiPreview handles the biz logic / Saasform handles landing page + auth + payments.

    While building the new landing page I played with and liked a lot Bulma [4], I used but didn't like AlpineJS [5] and I'm thinking to move to Hotwire [6].

    My personal experience is that performance only matters when you're big enough, so in the near future I want to experiment more on usability / nocode side. And I'd love to see more open source alternatives to the big ones.

    [1] https://hasgluten.com

    [2] https://multipreview.com

    [3] https://github.com/saasform/saasform

    [4] https://bulma.io

    [5] https://github.com/alpinejs/alpine

    [6] https://hotwire.dev

  • GitHub repo SvelteKit

    The fastest way to build Svelte apps (by sveltejs)

    SvelteKit, Serverless, Backendless.com

    SvelteKit[1] is a framework for SvelteJS (like Next.js is a framework for ReactJS). I've tried both Svelte and React. Svelte seems to be more elegant and lets me implement my ideas faster with less code. Svelte is very flexible; SvelteKit adds some opinions on how to do things like routing.

    SvelteKit also embraces the serverless paradigm[2] (AKA JAMstack[3]). Although a node.js server is still an option, you can also have pages rendered in serverless functions or pre-rendered at build time. Even static pages can be "hydrated" on the client so they are not totally static. So this results in fine-grained SSR (server-side rendering) at the page level. The two main reasons for SSR are performance (especially on mobile devices) and SEO.

    Backendless[4] is a VADP/MBaaS. This platform offers a lot of services, but the main one I'm looking at is authentication/identity. I was looking for an authentication service that supports anonymous guest login, social login, as well as traditional email/password login. The other contenders were Google Firebase (slow, and confusing sign in/sign up flow[5]) and AWS Cognito (too complicated/difficult to use). Auth0 was a contender, but they don't support guest logins.

    [1]: https://kit.svelte.dev

    [2]: https://www.serverless.com

    [3]: https://jamstack.org

    [4]: https://backendless.com

    [5]: https://github.com/firebase/firebaseui-web/issues/665

  • Scout APM

    Less time debugging, more time building. Scout APM allows you to find and fix performance issues with no hassle. Now with error monitoring and external services monitoring, Scout is a developer's best friend when it comes to application development.

  • GitHub repo gomodest

    A complex SAAS starter kit using Go, the html/template package, and sprinkles of javascript.

  • GitHub repo htmx

    </> htmx - high power tools for HTML

    I am working on two alternative tools for building web site:

    https://htmx.org - uses HTML attributes and HTML-over-the-wire for AJAX/Web Socket/SSE interactions

    https://hyperscript.org - an experimental front end programming language derived from HyperTalk that is event-oriented and that removes the distinction between synchronous and asynchronous code.

  • GitHub repo koyo

    A web development toolkit for Racket.

  • GitHub repo re-web

    Experimental web framework for ReasonML & OCaml

  • GitHub repo pratik.is

    I'm really enjoying working with MDX (JSX & markdown hybrid). https://mdxjs.com/

    I was able to quickly put together a blog with some pretty nice features (e.g. margin notes): https://pratik.is/writing/essays/media-as-food

    Writing content in markdown and enhancing interactivity with JSX is amazing.

    If you click "Raw" here you can see how the blog post is just markdown with some custom JSX elements littered in, e.g. : https://github.com/pringshia/pratik.is/blob/master/pages/wri...

  • SonarQube

    Static code analysis for 29 languages.. Your projects are multi-language. So is SonarQube analysis. Find Bugs, Vulnerabilities, Security Hotspots, and Code Smells so you can release quality code every time. Get started analyzing your projects today for free.

  • GitHub repo mdx

    Markdown for the component era

    I'm really enjoying working with MDX (JSX & markdown hybrid). https://mdxjs.com/

    I was able to quickly put together a blog with some pretty nice features (e.g. margin notes): https://pratik.is/writing/essays/media-as-food

    Writing content in markdown and enhancing interactivity with JSX is amazing.

    If you click "Raw" here you can see how the blog post is just markdown with some custom JSX elements littered in, e.g. : https://github.com/pringshia/pratik.is/blob/master/pages/wri...

  • GitHub repo firebaseui-web

    FirebaseUI is an open-source JavaScript library for Web that provides simple, customizable UI bindings on top of Firebase SDKs to eliminate boilerplate code and promote best practices.

    SvelteKit, Serverless, Backendless.com

    SvelteKit[1] is a framework for SvelteJS (like Next.js is a framework for ReactJS). I've tried both Svelte and React. Svelte seems to be more elegant and lets me implement my ideas faster with less code. Svelte is very flexible; SvelteKit adds some opinions on how to do things like routing.

    SvelteKit also embraces the serverless paradigm[2] (AKA JAMstack[3]). Although a node.js server is still an option, you can also have pages rendered in serverless functions or pre-rendered at build time. Even static pages can be "hydrated" on the client so they are not totally static. So this results in fine-grained SSR (server-side rendering) at the page level. The two main reasons for SSR are performance (especially on mobile devices) and SEO.

    Backendless[4] is a VADP/MBaaS. This platform offers a lot of services, but the main one I'm looking at is authentication/identity. I was looking for an authentication service that supports anonymous guest login, social login, as well as traditional email/password login. The other contenders were Google Firebase (slow, and confusing sign in/sign up flow[5]) and AWS Cognito (too complicated/difficult to use). Auth0 was a contender, but they don't support guest logins.

    [1]: https://kit.svelte.dev

    [2]: https://www.serverless.com

    [3]: https://jamstack.org

    [4]: https://backendless.com

    [5]: https://github.com/firebase/firebaseui-web/issues/665

  • GitHub repo serverless-graphql

    Serverless GraphQL Examples for AWS AppSync and Apollo

    SvelteKit, Serverless, Backendless.com

    SvelteKit[1] is a framework for SvelteJS (like Next.js is a framework for ReactJS). I've tried both Svelte and React. Svelte seems to be more elegant and lets me implement my ideas faster with less code. Svelte is very flexible; SvelteKit adds some opinions on how to do things like routing.

    SvelteKit also embraces the serverless paradigm[2] (AKA JAMstack[3]). Although a node.js server is still an option, you can also have pages rendered in serverless functions or pre-rendered at build time. Even static pages can be "hydrated" on the client so they are not totally static. So this results in fine-grained SSR (server-side rendering) at the page level. The two main reasons for SSR are performance (especially on mobile devices) and SEO.

    Backendless[4] is a VADP/MBaaS. This platform offers a lot of services, but the main one I'm looking at is authentication/identity. I was looking for an authentication service that supports anonymous guest login, social login, as well as traditional email/password login. The other contenders were Google Firebase (slow, and confusing sign in/sign up flow[5]) and AWS Cognito (too complicated/difficult to use). Auth0 was a contender, but they don't support guest logins.

    [1]: https://kit.svelte.dev

    [2]: https://www.serverless.com

    [3]: https://jamstack.org

    [4]: https://backendless.com

    [5]: https://github.com/firebase/firebaseui-web/issues/665

  • GitHub repo ecstatic

    A Javascript ECS library worth getting excited about

    I've been experimenting with ways of using Web Components with the ECS (Entity Component System) pattern. I'm not sure it will ever become the preferred way of writing web apps, but it does offer promise in exposing some alternate ways to structure Frontend code.

    Here is an example Calculator App I've made: https://codesandbox.io/s/fervent-elion-isq29

    And here is the ECS library I'm using (which I've written): https://github.com/brochington/ecstatic

  • GitHub repo rescript-compiler

    The compiler for ReScript.

    https://rescript-lang.org/

    Based on ocaml’s type system which is a delight to use.

    I’ve been working on this codebase for over a year and I’ve yet to see a runtime error. Maybe there was one minor one, not sure. It’s remarkable.

  • GitHub repo tamagui

    create much faster design systems that work on react native + react native web thanks to an optimizing compiler.

    Cannot recommend gqless highly enough for making graphql actually fun to use and closer to something like meteor/firebase syntax[0].

    And I’ll self-promote, but I’ve been working on what I consider to be a “next generation” style system for React that solves my biggest issue with it currently: being able to performantly write styles in a nice syntax that optimize for both web and native. Called SnackUI, though it’s still in beta[1].

    [0] https://gqless.com

    [1] https://github.com/snackui/snackui

  • GitHub repo gqless

    a GraphQL client without queries

    Cannot recommend gqless highly enough for making graphql actually fun to use and closer to something like meteor/firebase syntax[0].

    And I’ll self-promote, but I’ve been working on what I consider to be a “next generation” style system for React that solves my biggest issue with it currently: being able to performantly write styles in a nice syntax that optimize for both web and native. Called SnackUI, though it’s still in beta[1].

    [0] https://gqless.com

    [1] https://github.com/snackui/snackui

  • GitHub repo mongoose-json-patch

    A utility for applying RFC6902 JSONPatch operations to mongoose models

  • GitHub repo json-patch-rules

    Tools and specification for defining rules about how a json patch should be applied to an object

  • GitHub repo saasform

    Add signup & payments to your SaaS in minutes.

    Fav thread ever!

    A good 5+ years ago I built HasGluten [1] with react backed by a google spreadsheet, hosted on github pages. Proven technology, it's still working.

    More recently I hacked together MultiPreview [2] with react + API served by firebase functions. I'm also temp using firebase hosting as I have little traffic, but plan to replace it with edge computing / CDN caching.

    MultiPreview is backed by Saasform [3]. This is more like a classic node/express (nestjs) application, but I really like how we're separating concerns: the SaaS = MultiPreview handles the biz logic / Saasform handles landing page + auth + payments.

    While building the new landing page I played with and liked a lot Bulma [4], I used but didn't like AlpineJS [5] and I'm thinking to move to Hotwire [6].

    My personal experience is that performance only matters when you're big enough, so in the near future I want to experiment more on usability / nocode side. And I'd love to see more open source alternatives to the big ones.

    [1] https://hasgluten.com

    [2] https://multipreview.com

    [3] https://github.com/saasform/saasform

    [4] https://bulma.io

    [5] https://github.com/alpinejs/alpine

    [6] https://hotwire.dev

  • GitHub repo Bulma

    Modern CSS framework based on Flexbox

    Fav thread ever!

    A good 5+ years ago I built HasGluten [1] with react backed by a google spreadsheet, hosted on github pages. Proven technology, it's still working.

    More recently I hacked together MultiPreview [2] with react + API served by firebase functions. I'm also temp using firebase hosting as I have little traffic, but plan to replace it with edge computing / CDN caching.

    MultiPreview is backed by Saasform [3]. This is more like a classic node/express (nestjs) application, but I really like how we're separating concerns: the SaaS = MultiPreview handles the biz logic / Saasform handles landing page + auth + payments.

    While building the new landing page I played with and liked a lot Bulma [4], I used but didn't like AlpineJS [5] and I'm thinking to move to Hotwire [6].

    My personal experience is that performance only matters when you're big enough, so in the near future I want to experiment more on usability / nocode side. And I'd love to see more open source alternatives to the big ones.

    [1] https://hasgluten.com

    [2] https://multipreview.com

    [3] https://github.com/saasform/saasform

    [4] https://bulma.io

    [5] https://github.com/alpinejs/alpine

    [6] https://hotwire.dev

  • GitHub repo Alpine.js

    A rugged, minimal framework for composing JavaScript behavior in your markup.

    Fav thread ever!

    A good 5+ years ago I built HasGluten [1] with react backed by a google spreadsheet, hosted on github pages. Proven technology, it's still working.

    More recently I hacked together MultiPreview [2] with react + API served by firebase functions. I'm also temp using firebase hosting as I have little traffic, but plan to replace it with edge computing / CDN caching.

    MultiPreview is backed by Saasform [3]. This is more like a classic node/express (nestjs) application, but I really like how we're separating concerns: the SaaS = MultiPreview handles the biz logic / Saasform handles landing page + auth + payments.

    While building the new landing page I played with and liked a lot Bulma [4], I used but didn't like AlpineJS [5] and I'm thinking to move to Hotwire [6].

    My personal experience is that performance only matters when you're big enough, so in the near future I want to experiment more on usability / nocode side. And I'd love to see more open source alternatives to the big ones.

    [1] https://hasgluten.com

    [2] https://multipreview.com

    [3] https://github.com/saasform/saasform

    [4] https://bulma.io

    [5] https://github.com/alpinejs/alpine

    [6] https://hotwire.dev

  • GitHub repo headlessui

    Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.

    - tailwindcss

    I moved a React side-project from CRA to Next.js for server-side rendering benefits, but the latter doesn't support directly importing css styles in jsx to avoid problems with the global scope.

    The two options offered were CSS modules and CSS-in-JS. I didn't like either approaches having hashes in the classname when opening the website in devtools, and both seemed too locked into React/JSX.

    Tailwind 1. doesn't have component framework lock-in 2. doesn't make me think of css classnames 3. atomic classnames are readable in dev tools 4. provides default colors and box shadows, etc.

    In addition, they're starting to make a render-less component library (https://headlessui.dev/): that means you can customize how components look without having to understand how its javascript internals work, which I'd find a huge plus compared to other libraries like ant design or material-ui.

    - vite + react

    More beginner friendly than webpack in starting a new project, and faster developer experience: page reloads almost instantly when you're modifying a component.

  • GitHub repo Tailwind CSS

    A utility-first CSS framework for rapid UI development.

  • GitHub repo aws-lambda-java-libs

    Official mirror for interface definitions and helper classes for Java code running on the AWS Lambda platform.

  • GitHub repo visualjavascript

    Visual Basic + MS Access + Javascript = Visual Javascript

    I'm using a tool I built myself for simple internal apps: https://github.com/yazz/visualjavascript

  • GitHub repo ra-data-hasura

    react-admin data provider for Hasura GraphQL Engine

    Elm + elm-ui[1] (dont worry about CSS so much) + generated Elm client lib from GraphQL schema + Hasura (GraphQL over Postgres) + Postgres => strong type safety from db schema to frontend; possibly add ReactAdmin[2] to the mix if that sort of thing is needed.

    Rust + Actix + Yew (Rust browser framework compiling to WASM) => also verrrry nice!

    Slightly more traditional: Kotlin and jOOQ.

    [1]: https://www.youtube.com/watch?v=Ie-gqwSHQr0

    [2]: https://github.com/hasura/ra-data-hasura

  • GitHub repo singyeong

    신경 - Cloud-native messaging/pubsub with powerful routing

    For my projects I've built most of the infrastructure stack myself:

    - https://github.com/queer/singyeong if I need message queuing / etc

  • GitHub repo crush

    A time-traveling distributed key-value store

  • GitHub repo mahou

    魔法 - Mahō is a highly-opinionated yet quite magical research project into microservice-oriented application infrastructure. (by queer)

    - https://github.com/queer/mahou is my WIP to replace container schedulers

    It's a very satisfying experience to see my own tooling reach this level of maturity ^^

  • GitHub repo girouette

    Grammar-based, generative approach to CSS.

    I seldom write CSS. I tried tailwindcss on one of my recent projects that required to closely follow a custom design (a portfolio for a graphic designer friend). I like it, with some caveats.

    Main benefit for me is that I don't need to remember how to write css. 95% of what I need is a shortcut away from tailwind docs. The result is "prettier" than any other website-from-scratch I've done (that's purely on me, not much css practice). Now that I've memorised most common tailwind classes, I'm also moving faster than with pure css.

    Main downside is that it's annoying having to modify tailwind's config file to add non-default variations (mostly different heights/widths than what it ships with).

    Maybe something like Girouette[0] would be better.

    [0] https://github.com/green-coder/girouette

  • GitHub repo tailwindcss-jit

    > add non-default variations (mostly different heights/widths than what it ships with).

    Check out https://github.com/tailwindlabs/tailwindcss-jit. It got released 3 weeks ago, and supports variable variables in width and height now.

  • GitHub repo Quasar Framework

    Quasar Framework - Build high-performance VueJS user interfaces in record time

    This is slightly unrelated but I looked up Quasar and their homepage (https://quasar.dev/) is the first website that literally makes me nauseous just by looking at it.

    That's a kind of UX problem I didn't even consider to exist a few minutes ago.

  • GitHub repo gomodest-template

    A template to build dynamic web apps quickly using Go, html/template and javascript

    I have built an app template which uses Go html/template package to render html on the server. The app is enhanced using sprinkles of javascript(stimulusjs, svelte single file components) on the client, wherever needed.

    1. template: https://github.com/adnaan/gomodest-template

  • GitHub repo CoilSnake

    Some recent projects:

    - Frontend only, plain javascript, but a lot of it uses a project-specific custom scripting language. This is a game that consists almost entirely of procedurally generated written content, so I write a language that makes it easy to categorize procedural content bits and make sub-calls to new ones. I have a long way to go on language design still, but it's already better than a json blob.

    - HTML frontend with some small plain javascript. Backend is node/express, but most of the heavy lifting is done by a shell call to Coil Snake[1], and which inserts a ton of code in ccscript and 65816 assembly. This is a randomizer for Earthbound (http://pkscramble.com/), so those are super specialized tools for that purpose. But I really like the Coil Snake ecosystem, and it's definitely going to influence my projects going forward (the decision to use a custom scripting language above was influenced by ccscript).

    - Plain javascript frontend, vertx backend, postgres database. This is my goto for serious projects. It's fairly boring.

    [1]https://github.com/pk-hack/CoilSnake

  • GitHub repo amgr_phx

    - Automated deployments with Gigalixir

    I switched to gatsby and I notice that I was spending more time fighting the system than writing.

    You can check it out here: https://allanmacgregor.com/posts and the code is available here: https://github.com/amacgregor/amgr_phx

  • GitHub repo makesite

    Simple, lightweight, and magic-free static site/blog generator for Python coders

  • GitHub repo sci

    Configurable Clojure interpreter suitable for scripting and Clojure DSLs.

    My blog/homepage is built using:

    - Gatsby.js static site generator framework

    - Posts written as md or mdx (markdown with jsx support)

    - Github Actions to build the site

    - Published to and served by Cloudflare workers

    - Uses [sci](https://github.com/borkdude/sci) and ClojureScript to add a live Clojure REPL component that can be used in blog posts

    - Tailwindcss is used for styling via emotion css-in-js and a tailwind plugin.

    The setup mostly works ok, but as always with the JavaScript community the amount of breaking changes can be a bit taxing. Because Gatsby handles static site generation the blog works without JavaScript enabled for those that only want to access the static content.

  • GitHub repo DataRecovery

    Website for a DataRecovery Business build using Spring Boot, Kotlin, Angular. Deployed with Docker Compose and Github Actions

    I'm doing Fullstack with Angular + Spring Boot Kotlin.

    I love writing the backend but the frontend part really seems overly complex.

    In the end I'm just mirroring my data from the backend on the frontend, having to maintain two models, mapping the json to an object and then inputing that data into another component where it gets displayed. For example I tried to create a generic edit component but without reflexion it was a huge pain in the butt: https://github.com/tschuehly/DataRecovery/blob/f4003ddebbba7...

    I would love to just have an html structure and then just having a template for a component filling it in the backend and sending it to the frontend.

  • GitHub repo tailwindcss-typography

  • GitHub repo hyperhyperspace-react

    React bindings for using Hyper Hyper Space objects as state in React apps.

  • GitHub repo datasette.io

    The official project website for Datasette

  • GitHub repo datasette

    An open source multi-tool for exploring and publishing data

  • GitHub repo til

    Today I Learned (by simonw)

  • GitHub repo museums

    A website recommending niche museums to visit

  • GitHub repo openapi-generator

    OpenAPI Generator allows generation of API client libraries (SDK generation), server stubs, documentation and configuration automatically given an OpenAPI Spec (v2, v3)

  • GitHub repo docsify

    🃏 A magical documentation site generator.

  • GitHub repo Papercups

    Open-source live customer chat

    Phoneix - Elixir

    We're a live message tool and it is basically what Elixir is built for https://github.com/papercups-io/papercups.

    The Elixir community has been great and incredibly friendly. I originally was worried about the size of the community but that hasn't been an issue the community has been super helpful. I also think the annual stackoverflow usage surveys are very misleading because most of the community's questions get asked in ElixirForum and not on Stackoverflow.

    Phoneix is the web framework of Elixir which is very similar to Rails but minus a lot of the magic has been very helpful for our productivity as well.

    If I had to built another service that is websocket heavy I would definitely use Elixir. Even if it was a standard crud app I would still most likely choose Elixir.

  • GitHub repo Svelte

    Cybernetically enhanced web apps

    I'm using SvelteJS[1] (specifically, Sapper[2]) on my product ListenAddict[3].

    On other products I'm using SvelteKit[4], which is the spiritual successor to Sapper, but it's _very much_ in beta, and I wouldn't quite recommend it for production yet (even though it is being used in production for the NY Times).

    I've found Svelte to be amazing to work in, especially compared to React/Vue/Angular. The compiler is great, and the final size in production is fantastic. It's also super easy to do things that I previously found annoying/hard/long-winded to do in React.

    [1] https://svelte.dev/

  • GitHub repo Sapper

    The next small thing in web development, powered by Svelte

  • GitHub repo sanic

    Next generation Python web server/framework | Build fast. Run fast.

  • GitHub repo ructe

    Rust Compiled Templates with static-file handling

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts