Ask HN: Good resource on writing web app with plain JavaScript/HTML/CSS

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

Our great sponsors
  • Appwrite - The Open Source Firebase alternative introduces iOS support
  • InfluxDB - Build time-series-based applications quickly and at scale.
  • Sonar - Write Clean JavaScript Code. Always.
  • langterm

    🕹️ WebGL-based VT220 emulator, made as a learning example and frontend for a text adventure

    I purposely wrote my home page (https://langworth.com) with plain, vanilla JavaScript, which features both WebGL and plaintext clients for a server-side text adventure game, because I wanted to remind myself that it's not that difficult to build something interactive and fun without miles of modern front-end tooling.

    It started as a single page but I eventually broke it out into a few files for organization. The WebGL parts are lengthy and boilerplate-y because, well, that's GL for you. https://github.com/statico/langterm

  • web_app_from_scratch

    One script for every web framework which sets up a minimal web app with routing, templates and users.

    Me and some contributors are writing and maintaining "Web app from scratch" scripts for popular frameworks here:

    https://github.com/no-gravity/web_app_from_scratch

    The idea here is to have a self-explanatory shell script for each framework, which turns a fresh Debian installation into a running web application with routing, templates and user accounts.

    So far, we have Django, Flask, Laravel and Symfony. In various stages.

  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  • share-file-systems

    Use a Windows/OSX like GUI in the browser to share files cross OS privately. No cloud, no server, no third party.

    Try looking at my personal project: https://github.com/prettydiff/share-file-systems

    * Vanilla JS (TypeScript) with tiny HTML and CSS. No frameworks and no unnecessary abstractions.

    * A full OS like GUI

    * Solves for decentralization

    * Provides a script to toggle between support for Node’s CommonJS and standard ECMA module systems

    * Easy state management that works better than anything from a large framework

    * Super fast. Written for extreme performance. For example the file system search is faster than file system search from the native OS. Page loads with full state restoration in less than 0.3 seconds.

    * Fast build and language compile. The full build task takes less than 3 seconds.

    * Original WebSocket implementation for better performance and safety with a smart message queue

    * Automated documentation management

    * Fast test automation with an original test automation solution. Most of the end to end tests executing in the browser executes in about 6.5 seconds for about 280 assertions.

    * The node side of the application is command driven from the terminal with interactive command documentation

    Feel free to open a GitHub issue if you have any questions or would like to learn more about how I try to solve any kinds of technical challenges.

  • modern-todomvc-vanillajs

    TodoMVC with Modern (ES6+), Vanilla JavaScript

  • community

    Repository for public issue-tracking and discussions (by scrimba)

  • longwood

    Experimental rendering library

    https://github.com/jehna/longwood

    It's usable with plain in-browser Javascript, no other tools needed. You can split your frontend to components and do conditional rendering logic just as with any templating library.

  • Jekyll

    :globe_with_meridians: Jekyll is a blog-aware static site generator in Ruby

    Some of these responses… wow.

    Using modern HTML and CSS will get you pretty far these days.

    For example, dealing with forms used to be problematic in a few different ways without JavaScript or something server-side.

    Now form validation can be done with CSS [1].

    For example, static site hosts like Netlify have services for dealing with the form data [2]. 100 free form submissions per month.

    I agree that tooling is out of control. Jekyll [3] is great for getting started with building static sites. When using Jekyll, my build tool of choice is a Makefile [4].

    [1]: https://webkit.org/blog/13096/css-has-pseudo-class/#styling-...

    [2]: https://www.netlify.com/products/forms/

    [3]: https://jekyllrb.com/

    [4]: https://blog.mads-hartmann.com/2016/08/20/make.html

  • InfluxDB

    Build time-series-based applications quickly and at scale.. InfluxDB is the Time Series Platform where developers build real-time applications for analytics, IoT and cloud-native services. Easy to start, it is available in the cloud or on-premises.

  • javascript-todo-list-tutorial

    ✅ A step-by-step complete beginner example/tutorial for building a Todo List App (TodoMVC) from scratch in JavaScript following Test Driven Development (TDD) best practice. 🌱

  • open-props

    CSS custom properties to help accelerate adaptive and consistent design.

    For layout/design, there’s open props [1].

    [1]: https://open-props.style/

  • Web-Dev-For-Beginners

    24 Lessons, 12 Weeks, Get Started as a Web Developer

  • curriculum

    The open curriculum for learning web development

  • content

    The content behind MDN Web Docs

  • lit

    Lit is a simple library for building fast, lightweight web components.

    I would advice you to at least use some kind of web component wrapper. I have used https://lit.dev/ a lot, even to build a large app and it works really well. You can get started very quickly and the experience stay true to the underlying platform.

    I think lit is really a library that deserves more attention since it's so good.

  • hello-express

    A simple Node app built on Express, instantly up and running.

    I can recommend https://devdocs.io for reference and https://glitch.com for prototyping (and hosting if your needs are modest!) as well some good sample projects.

  • devdocs

    API Documentation Browser

    I can recommend https://devdocs.io for reference and https://glitch.com for prototyping (and hosting if your needs are modest!) as well some good sample projects.

  • uBlock

    uBlock Origin - An efficient blocker for Chromium and Firefox. Fast and lean.

  • eureka

    Lucene-based search engine for your source code (by wisercoder)

  • uibuilder

    Typed HTML templates using TypeScript's TSX files

  • htmx

    </> htmx - high power tools for HTML

    Personally, I'm on the fence about using server side rendering (which PHP is pretty good at) versus just writing RESTful APIs, because browsers now have fetch API built in which makes consuming them easy (no need for jQuery or necessarily even something like Axios).

    You can do a kind of halfway house with Htmx. Have your backend generate HTML fragments, and Htmx in the browser will inject them into the page without having to do full-page reloads or complex vDom manipulation.

    https://htmx.org/

  • Elm

    Compiler for Elm, a functional language for reliable webapps.

  • pages-gem

    A simple Ruby Gem to bootstrap dependencies for setting up and maintaining a local Jekyll environment in sync with GitHub Pages

    Other comments have already suggested guides for creating a simple static HTML site with light CSS & JS, whereas so many other comments are suggesting absurdly more than necessary.

    The one thing I haven't seen mentioned and would recommend exploring for OP's use case is: Github Pages. This would probably be perfect for serving the type of site they're describing and would eliminate numerous layers of complexity. https://pages.github.com/

  • umbrella

    :umbrella: Lightweight javascript library for DOM manipulation and events (by franciscop)

  • html-form-to-google-sheet

    How to submit HTML forms to Google Sheets. (Updated for 2022 Script Editor)

    Modern web is fairly complex but it doesn't have to be. What you're after is a simple form to submit that data to someplace. CSS and JavaScript in your case are only needed to improve the look and get some kind of dynamic feedback.

    So you have the client webpage, this can be a really simple webpage without any style that just has several form tags (Reference: https://www.w3schools.com/tags/tag_form.asp).

    Then you need to send this data to some place. You can use standard html actions to do this to a back end script, a rest api, or even to a formatted email that will be sent via the user's email client.

    You may need node to code the back end if there isn't one you can use. You can also use google sheets. See example here: https://github.com/levinunnink/html-form-to-google-sheet. This is really only useful for a small prototype so at some point you would need to standup your own backend somewhere. That gets more complicated because now you need a script (could be JavaScript & node for example or PHP or anything else) which processes your form request and stores it to a database someplace else.

    Good luck and happy coding.

  • unpkg

    The CDN for everything on npm

  • Sonar

    Write Clean JavaScript Code. Always.. Sonar helps you commit clean code every time. With over 300 unique rules to find JavaScript bugs, code smells & vulnerabilities, Sonar finds the issues while you focus on the work.

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