Our great sponsors
-
langterm
🕹️ WebGL-based VT220 emulator, made as a learning example and frontend for a text adventure
-
web_app_from_scratch
One script for every web framework which sets up a minimal web app with routing, templates and users.
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
-
-
WorkOS
The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.
-
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. 🌱
-
-
-
-
-
-
-
-
-
pages-gem
A simple Ruby Gem to bootstrap dependencies for setting up and maintaining a local Jekyll environment in sync with GitHub Pages
-
html-form-to-google-sheet
How to submit HTML forms to Google Sheets. (Updated for 2023 Script Editor)
-
InfluxDB
Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
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
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.
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.
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.
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-...
For layout/design, there’s open props [1].
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.
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.
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.
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.
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/
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.