
How to write a JavaScript-free todo app using just HTML and CSS - mostlystatic
http://www.mattzeunert.com/2017/10/30/javascript-free-todo-app.html
======
Scryptonite
I made something very similar for fun a few years ago[0] and added it to a
repository called You-Dont-Need-JavaScript[1].

CSS-only for this sort if thing is totally contrived, but making it still
proved to be a fun little exercise.

[0]:
[https://codepen.io/scryptonite/pen/oLGzdj](https://codepen.io/scryptonite/pen/oLGzdj)

[1]: [https://github.com/you-dont-need/You-Dont-Need-
JavaScript](https://github.com/you-dont-need/You-Dont-Need-JavaScript)

------
ape4
So you can but... looking at the code... you don't want to.

~~~
kafkaesq
Right, but I find these demos interesting nonetheless - in that they reveal
capabilities of HTML + CSS that, as a casual frontend developer, you wouldn't
normally think of them as having.

~~~
nxsynonym
I think this is the best way to look at projects like these.

It's not an exercise in efficiency, or even attempting to prove that HTML +
CSS is somehow better than a JS version. I think it's about getting as much as
you can out of CSS and HTML. As a viewer, looking at these projects usually
give me 2-3 tricks to add to my collection and is worth the read.

I honestly don't think I'll ever NEED to implement a CSS+HTML calculator sans
JS, but it's nice to know that it's possible and it could be something I look
at if I want to implement a piece of it for something similar.

~~~
tracker1
Exactly, but it's an example as to similarly, it bugs me to no end when I see
styled radio/checkboxes that rely on JS at all. I'm still wrapping my head
around flexbox though... The naming conventions and rules are just weird and
alien to me, and been at it for over a year now off and on.

------
jordache
These exercises will be a lot more fruitful to read through if the author can
acknowledge the contrived nature of these attempts and provide a real-world
advantageous use case of the techniques outlined

~~~
2474
I don't think he needs to acknowledge how contrived his solution might be or
provide a real-world use case. The article very well could be taken as
inspiration to approach problems from different angles.

~~~
gidztech
Indeed. It's clearly not meant to be a realistic or recommended approach. It's
a practice of lateral thinking, an experiment to see how much of a problem you
can solve with limited set of tools. It's easy to throw in every library,
framework, technology at a problem, and they might not be necessary. Sometimes
approaching a problem from this unusual perspective can yield good solutions.
Often times, it's messy and hacky, but in either case you learn a lot along
the way.

~~~
TimTheTinker
Yes. Folks with an "enabling attitude" (as Martin Fowler puts it so well -
[https://martinfowler.com/bliki/SoftwareDevelopmentAttitude.h...](https://martinfowler.com/bliki/SoftwareDevelopmentAttitude.html))
would probably tend to appreciate exploratory exercises that expand horizons
or demonstrate new ways of using old tools, while folks with a "directing
attitude" might tend to dislike them.

------
billnreed
That's super cool! The `:checked` and `:valid` and `:invalid` selectors are
really powerful tools when it comes to CSS. This is a real fun use of clever
CSS selectors.

I was doing something similar the other day with toying around trying to come
up with an HTML/CSS only game. I ended up with this:
[https://codepen.io/billnreed/full/boXrVr](https://codepen.io/billnreed/full/boXrVr)

------
mkhalil
In doing this, you break HTML semantic relationships. Each to-do is a child of
the previous to-do. That hurts.

I applaud the work in making something sans JS for the kicks of it, but if
your going to do it, at least don't break HTML.

~~~
nilved
The semantic Web is, unfortunately, quite dead. Hopefully a JavaScript-free
Web can still happen.

~~~
mark242
"Hopefully a JavaScript-free Web can still happen."

The phone you're reading this post on has nearly as many CPU cycles available
to run code as the web server that generated the html. Why on earth would you
not want to distribute the overall application load.

~~~
ramshorns
> _Why on earth would you not want to distribute the overall application
> load._

Maybe because I want my phone battery to last a long time, but I don't care
how much electricity the web server uses. Maybe also because the JavaScript is
probably proprietary software [0], which I don't want to run on my computer.

[0] [https://www.gnu.org/philosophy/javascript-
trap.html](https://www.gnu.org/philosophy/javascript-trap.html)

~~~
ballenf
FWIW, the HTML + CSS approach of the author is just as copyrightable and
potentially non-free as the JS in question. There's really no difference. Sure
his 'code' is practically pointless, but that's no obstacle to being non-free.

Uglified/minified HTML+CSS is almost as difficult to parse by humans as JS.

I'm all for free software and very supportive of the arguments, but the pro-
HTML, anti-JS rhetoric never made a lot of sense to me, consistency-wise, at
least in these days of CSS3.

~~~
na85
Blocking js was one of the best decisions I have made. The web is so much more
usable and pleasant without it.

------
cowmoo728
These kinds of tricks are nice for progressive enhancement - you can have a
navigation section in your server-side-rendered SPA that outputs a fully
usable nav like this, and if a user has JS disabled, they'll still be able to
navigate around your site, albeit with hard page reloads instead of more
instant transitions. It's funny that people are using js frameworks to render
js-free snippets that are then progressively enhanced with more js, but that's
web development today.

------
frandroid
> What doesn’t work: > Persistence after page reload

That's not an app.

TL;DR: Use styled checkboxes in a form.

~~~
ozaark
Doesn't take much to add html local storage natively to run this as a web app.
Still js free.

~~~
underwater
localStorage is a JavaScript API.

------
bachmeier
I know a lot of people hate JavaScript, but is HTML+CSS really a more pleasant
programming approach? The "solution" seems worse than the problem.

~~~
PKop
It's just a proof of concept to show what's possible

------
supermdguy
Now we just need someone to write a frontend framework that compiles down to
CSS.

------
idbehold
So what happens when I create my 51st todo?

~~~
icantrank
The form stops working, deleting a todo also leaves it in use so you'll run
out constantly, but it's like a pure css app bro - it's pretty sweet I think.

You could also make more than 50 in his js renderer file on github if you
needed more

------
sAbakumoff
I look forward to a day when it will be doable to mine bitcoins by using CSS!

------
chaitanyana
I made something just like this for my introduction class in computer science

------
snambi
this is really nice. need a break from javascript.

~~~
nik736
CSS is so much better.

~~~
swoongoonz
css is styling, it's not a programming language

~~~
fatso83
Swoosh

------
gmanolache
Is this a joke?

~~~
marvy
No, not exactly. Read some of the other comments. Like this one:

[https://news.ycombinator.com/item?id=15589943](https://news.ycombinator.com/item?id=15589943)

