
You might not need JavaScript - MarkusWinand
http://youmightnotneedjs.com/
======
nfriedly
When I was hired on the Watson team, the first thing they asked me to do was
help improve performance of their AngularJS-based website. It was all-around
slow, especially for the initial page view. I stripped out AngularJS and most
of the other JavaScript, and published a website that was almost pure static
HTML. It loaded very quickly. My manager thought it was hilarious - his
"JavaScript expert" came in and deleted all of the JavaScript.

~~~
nkassis
I've had interview candidates for frontend developer positions who only know
how to build web pages using frameworks like Angular and React. They don't
seem to understand how those frameworks work but essentially patch together a
bunch of example online to get something going. It's truly unfortunate that
many beginner web development tutorial introduce these technologies first in
my view. Without giving new developers understanding basics of the web
platform they get siloed into only knowing one way to do things and it results
in using the wrong tools for the job as this example shows.

~~~
noobermin
Here's another perspective. I started learning JS in reverse and ended up just
creating my own framework because it was less verbose. But you would hire me
over your patch-and-patch fellows?

Perhaps the right answer is to code know the basics but also have a handle on
the popular frameworks too.

~~~
nkassis
"Here's another perspective. I started learning JS in reverse and ended up
just creating my own framework because it was less verbose. But you would hire
me over your patch-and-patch fellows?"

Yes more likely. In fact I would find informative to see the framework that
you have built as an example of understanding web development.

To expand a bit I think learning the framework is easier once you have an
understanding of the web platform's basic. For non web stuff I value more
problem solving ability, general CS knowledge over specific technology
knowledge. I usually don't set a language requirements in interviews and look
more to someone being able to explain how the code they wrote works and why
it's a better solution than say some inefficient brute force method. Which in
my example when applied to web stuff would translate to why is implementing
something this way in angular better than an alternative, what advantages did
you gain from angular. Etc...

~~~
__s
My framework looks like this:
[https://github.com/serprex/openEtG/blob/master/dom.js](https://github.com/serprex/openEtG/blob/master/dom.js)

The code that uses it looks like this:
[https://github.com/serprex/openEtG/blob/master/views/MainMen...](https://github.com/serprex/openEtG/blob/master/views/MainMenu.js)

The site looks like this: [http://etg.dek.im](http://etg.dek.im)

I recently worked on a site at my job where I was able to implement it with JS
+ C#/OWIN, all static html, only uses toastr/jquery. Was nice they let me
break away from the illusion that the choice is only between WebForms or MVC

If you ask me to compare this to Angular, I'd have to say I've never used
Angular so I don't know

~~~
sorry
Seeing that code I would not hire you.

~~~
Can_Not
Any specific reason? Not trying to be accusatory, but your comment appears not
genuine and I don't see anything instantly unhirable about his code after a
short peruse.

------
BinaryIdiot
So let's show off what you can do without JavaScript...but also include SCSS
as a dependency when the opening paragraph complains about a JavaScript
dependency? Madness...but I digress.

Some of these are cool examples. Others, like the modal, won't scale very well
because now you can trigger modals by tabbing (breaks keyboard navigation) or
most of the form examples as you'll likely hit many endpoints that require
JSON (which yeah I know "you're making a web app why can't your endpoints
accept a form?" but as we all know it's never that simple and you might want
to provide different behaviors for, say, showing a progress bar or disabling
certain features during the submissions or a THOUSAND other things).

I get axing dependencies. I really do. I wrote msngr.js entirely in ECMAScript
5 using zero dependencies so I'd have the most flexibility possible. But at
the same time overcomplicating your code to the point where it's breaking
standard practices or making it un-maintainable _simply_ to axe a dependency
is the wrong way to go.

But by all means keep making cool stuff that shows off how versatile CSS is!
Just don't expect to use all the CSS tricks you learn in a production
environment.

~~~
Iv
All you need is this motherfucking website:
[http://motherfuckingwebsite.com/](http://motherfuckingwebsite.com/)

~~~
legulere
Actually you need a tiny bit more:
[http://bettermotherfuckingwebsite.com](http://bettermotherfuckingwebsite.com)

~~~
Jazcash
Getting there!
[https://bestmotherfucking.website/](https://bestmotherfucking.website/)

~~~
ryangittins
The first two were actually making a good point. This website (yours,
presumably) is just jumping on the bandwagon and sticking an affiliate link in
it. I'm not against affiliate links, but this site lacks substance.

~~~
mrob
HTTPS and full contrast text are important. The 2nd attempt is a downgrade
from the first. This 3rd attempt is an actual improvement.

~~~
Iv
Honestly, I can't stand websites that decide to waste 70% of screen estate. I
can see the first site almost without scrolling. It is 2 to 3 pages on the
other iterations.

The only things I may agree with is https and zipping.

"Fits on all your shitty screens" Does mean that it FITS ON ALL YOUR SHITTY
SCREENS. Mine is a 1920x1080 (which is the minimal nowadays) and the 2nd and
third iterations DO NOT FIT IT.

That thing around the web page, it is called a fucking window. It resizes.
I'll do that if I want your fucking column-format.

------
IanCal
I'm cautious about using CSS to do things that feel like actual behaviours.

For example, the modal that appears when you click on the button actually
doesn't do things on "clicking" but _focusing_. This means if you tab over the
button it'll load the modal, then tabbing away means the modal is gone. I
can't tab into the content in the modal at all. How does that work with
accessibility?

Though I generally dislike the idea of saying content isn't there by making it
_present in the document_ but _invisible_.

Edit - Some of the default behaviours are also a bit pants. In chrome, the
form validation on a pattern starts working after I hit submit, then angrily
shakes at me for every keypress until it's valid. Then, it ignores invalid
input as I type more! Please never use this for phone numbers or credit card
numbers. Stop requiring an exact format when what people type varies, and stop
telling me I'm putting in something wrong when you ask for a phone number and
I give you something that'll connect to me if you type into a phone.

Maxlength is not a validation it's just ignores any more letters you type.
Quietly ignoring your users input is probably not what you want.

The "Would you prefer a banana or a cherry?" just shouts "Please match the
requested format" if I type "a cherry". I know chrome has nothing else to go
on other than "the regex wasn't matched" but it's a bad end user experience.

The tabs example is something I need to tab onto then use left and right, I
assume because it's a radio box underneath, not a series of links. Are tabs
really radio buttons?

The same for the accordion. Which I've found if I add any tabbable content
inside them then I'm focused on a _hidden item_. Great. Tab onto "tab 1", hit
tab, focus has disappeared and I'm now potentially going to click on random
items I can't see. This is because although you want to pretend the content
isn't there just because it's not visible, it's still there! It's in your
document.

Sure, you might not _need_ javascript. But maybe you should still use it.

~~~
haalcion2
> The "Would you prefer a banana or a cherry?" just shouts "Please match the
> requested format" if I type "a cherry". I know chrome has nothing else to go
> on other than "the regex wasn't matched" but it's a bad end user experience.

Localized custom validation messages for the provided pattern should be added
as part of HTML spec. Someone should follow up on that, because it'll probably
be too much of a waste of time for me.

In the meantime, this works and gets around a bug in FF:
[http://stackoverflow.com/a/20189012](http://stackoverflow.com/a/20189012)

    
    
      <input type="text" id="username" required placeholder="Enter Name"
          oninvalid="this.setCustomValidity('Enter User Name Here')"
          oninput="setCustomValidity('')"  />
    

where setCustomValidity could provide any text, even localized text from some
other source like a DB, potentially, since it's JS. Requires a modern browser,
though.

> Sure, you might not need javascript. But maybe you should still use it.

Yes, but if you are writing for a general audience, make sure it's accessible:
[http://webaim.org/techniques/javascript/](http://webaim.org/techniques/javascript/)

Someone should put together a site that, given a set of browser restrictions
the user provides, gives examples of each of these to show the most accessible
and standards-compliant version of the code to use, minimizing external
libraries required, with and without localization, because not everyone has
the resources to provide localized content, unless localization could be
provided by a built-in library in the browser or OS, which would be another
great project.

Yes, there are sites that provide a matrix of supported browsers, but I don't
think that would be as simple to use; developers like copy-and-paste examples,
for better or worse, e.g. StackOverflow.

~~~
oliv__
Yeah honestly banana or cherry is just screaming for a much simpler plain old
radio input.

------
NKCSS
It made me learn about [http://caniuse.com/#feat=input-
pattern](http://caniuse.com/#feat=input-pattern) ; thanks for that!

~~~
cygned
Same. Didn't even knew that exists. Awesome.

~~~
staticelf
Same here and it seems fucking amazing. I'm beginning to wonder how many more
html-things like this I don't know about?

~~~
bigtunacan
If this is your first time hearing about caniuse, then you likely also want to
know about html5please.com as well; if you haven't already.

~~~
staticelf
I use caniuse excessivly, I just hadn't heard about the pattern attribute. But
thanks for the tip, html5please seems very nice!

------
jwblackwell
Does anyone else feel that a site called "You Might Not Need Javascript",
probably shouldn't use Javascript?

~~~
fenomas
Do any of the examples use Javascript? Or are you saying the site shouldn't
use JS for syntax highlighting or whatever, even though that's not the sort of
thing it claims JS isn't needed for?

~~~
Retr0spectrum
If you look at the source, there are plany of JS files being loaded. Mostly
from codepen, but also from the site itself.

I don't see any features of this site which should require javascript, so they
should probably "practise what they preach".

~~~
9point6
Technically, they're preaching that you _might_ not need JavaScript rather
than advocating against it

------
Semiapies
You _might_ not, but you probably do.

The validation examples and input types are a case in point. Even on browsers
where they work, the alerts can't be styled and the behaviors can't be
controlled.

~~~
vardump
> the alerts can't be styled and the behaviors can't be controlled

It's not clear to me whether that's a problem. Isn't consistent UI a good
thing? Isn't it faster to fill the forms correctly if alerts always appear in
the same way?

~~~
Retr0spectrum
Not really. The errors on Firefox at least, just say "Please match the
requested format", which doesn't tell the user where they went wrong for
potentially complex requirements.

~~~
Flimm
You can use the title attribute to customise the error message.

------
inian
The you don't need jQuery website had a concrete use case - you need not
include an entire library into your website for some simple tasks which makes
your website faster.

Though, this site is cool in showing the power of CSS, I am not sure if there
is any specific advantage of using CSS over JS to design tabs, sliders, etc.
Just use the best tool for the job!

~~~
kelseydh
The Tor web browser disables most (if not all?) Javascript by default as a
security measure.

Avoiding Javascript is an advantage if you want your website to be accessible
to Tor users.

If your website only handles basic things like form inputs and it breaks when
Javascript is disabled, then you have not made it accessible.

~~~
sotojuan
I think by now it's pretty safe to say most websites don't care about the tiny
% of people using Tor or disabling JavaScript.

~~~
couchand
That doesn't make it laudable, or even defensible.

~~~
kek918
From a commercial point of view it kind of does. If the development costs
exceeds the increased revenue it's not really worth it.

------
Shanea93
It's sad that this site uses SCSS for displaying the rules, I'm using it in
production and fully understand it, but it's needlessly abstracting the rules
for the sake of a few extra words in each declaration.

That aside, these are some pretty cool examples. Are there ways of doing this
with CSS which doesn't screw with my browser back button?

~~~
alnorth
I half agree with you, but one of the real benefits that SASS gives you here
is making dependencies more obvious. A named variable like `$slider-height` is
much clearer than a random number like `50px`. Yeah, you could put a comment
next to every constant in the CSS, but I don't think that's clearer than the
SASS alternative.

~~~
mrec
I'd hope CSS variables [1] will make that argument obsolete soon, but then
again I've been hoping that for a while...

[1] [https://developer.mozilla.org/en-
US/docs/Web/CSS/Using_CSS_v...](https://developer.mozilla.org/en-
US/docs/Web/CSS/Using_CSS_variables)

------
Jazcash
Some of these are ok, but others are just misusing features for their intended
purpose. An input gaining focus is not the same as a click event. Using the
:checked peudoselector to keep client-side state is not an alternative to
using JS.

Using HTML/CSS hackery where you should be using JS instead creates an anti-
SEO, non-semantic mess that causes headaches for others to work on and
nightmares for anybody needing to extend or modify functionality.

Don't get me wrong, I love pure CSS solutions and try to use them as much as
possible where it makes sense. But sometimes, it definitely doesn't make
sense. JS isn't something users or developers should be scared of anymore,
it's much better supported and much less intrusive than it used to be.

------
bshimmin
There is some useful stuff to learn from here, undeniably, but many of these
are a bit useless when you compare them with what you would actually typically
need on a real site. Yes, the "image slider" is vaguely functional, but really
most of the time you will want a lot more control than just the CSS animations
allow; similarly, yes, the form validation is a starting point, but normally
you would want to customise the error messages and generally fiddle around
with it a lot more; I'm not really sure the modal is fit for purpose beyond
the most basic use case... etc.

It's fun to see what you can partially achieve without JavaScript, but there
is no shame in using JavaScript sensibly to enhance the usefulness of a web
site.

~~~
klibertp
What bothers me is that I saw many of these things implemented in CSS only in
~2004. Of course, it required much more code then, including shims for IE 6
and careful slicing of GIFs, but things like tabs, accordion or lightbox were
being implemented. Makes me wonder where the last decade went. At least there
was a good reason to avoid JS back then: it was slow and often looked worse
than CSS hacks.

------
zeveb
So, we're all familiar with the fact that imgur requires JavaScript in order
to display more than the first few images in a gallery (the 'view more' link
executes JavaScript; there's no way to page forward). That's highly annoying,
since HTML supports exactly this use case.

It's understandable, though, because we are not imgur's customers: its
customers are advertisers, and if we have JavaScript disabled then imgur's
customers have less ability to violate our privacy. Thus, it's in imgur's best
interest to encourage us to reduce our privacy & security, so that its
customers may have their way with our browsers. I can't see that the imgur
programmers would care about the fact that they can do amazing things with
CSS.

But recently I've discovered that Target's website simply refuses to display
products without JavaScript. This is insane: Target are, presumably, in the
business of selling things. They ought to want to display a picture of their
item and provide me a link to buy it; that's in their best interest. Building
that sort of website is _easier_ than building the sort of ecommerce site
which cannot even display an image and a link without JavaScript. It should be
in Target's best interest to do the right thing.

But it _doesn 't_. Its programmers _ought_ to be interested in a site like
youmightnotneedjs.com, but _are_ they? If they didn't bother to build their
website properly before, is this likely to encourage them now?

------
duck2
The issue with CSS sliders is that they mess with the browser history.

I expect my back button to open the previous page, not to move an image
slider.

~~~
dvhh
aren't you talking about the view switcher (
[http://youmightnotneedjs.com/#view_switcher](http://youmightnotneedjs.com/#view_switcher)
) ?

~~~
duck2
In this demo yes, however I have seen CSS image sliders with buttons which
happily sit on the back button.

------
Cub3
Am surprised no one has pointed out how bad these examples are for
accessibility, no pause/play on the slider, hidden content that won't be read
by screen readers etc.

I like the idea of using CSS over Javascript where it makes sense but in a lot
of these examples it feels hacky.

~~~
Semiapies
The rationale of the site site is simple purism, not mere technical
considerations like code complexity, accessibility, history pollution, etc.

------
d3ckard
Since half the examples do not work on Safari, I believe the title is a bit
misleading.

~~~
olavgg
Safari is the new IE6, stop supporting it and let it die. It will not get any
better anyway. If most of your users are on iOS, then make an app for them,
it's what Apple also want you to do...

~~~
mozumder
I have no idea why people use Chrome.

Chrome/Google has terrible/no support of many browser layout & interaction
features, such as CSS Regions & scroll snap points.

Also, Safari is just a much better browser than Chrome. We need to make sure
people stop using Chrome and move to the default browser in their environment
- Safari & Edge.

If you support the default browser, then you're going to be fine.

~~~
pluma
> default browser

Hi, I'm Linux.

~~~
pmlnr
Yay for Midori, Konqueror, Epiphany, Dillo, lynx, and all the things a regular
dev never have to encounter with :)

( By the way lynx is perfect to pierce through a lot of paywalls. )

~~~
pluma
Chrome is still the best choice for development on Linux.

The alternatives are Opera and Firefox. Everything else is like coding while
wearing mittens.

------
maxharris
If you use React and inline styles, you might not need HTML and CSS:
[https://vimeo.com/116209150](https://vimeo.com/116209150)

Also, if you want the benefits of inline styles, but need media queries and
the like, check out Radium: npm.im/radium

~~~
indexerror
Pretty much what I do. I am also enjoying using Aphrodite [1] these days.

[1] [https://github.com/Khan/aphrodite](https://github.com/Khan/aphrodite)

------
mschuster91
The biggest pain point with using :target is that location.hash, which powers
it, is a single global state variable - which means you can't nest tabs inside
tabs, for example.

The slider has the problem that it cannot dynamically size with the container
width, and the amount of slider elements has to be known at compiletime
(width: n * 100%).

File upload has the nastiness that you can not really independently style the
inputbox with the filename and the button. Chrome has
input[type="file"]::-webkit-file-upload-button, but I am not aware of a
Firefox/IE solution. Also, you cannot combine the input[type="file"]::-webkit-
file-upload-button with a general button selector in the same CSS rule,
because Firefox doesn't know the ::-webkit-file-upload-button and discards the
whole rule as invalid - you have to double declarate your button styles if you
want uniform button look in Chrome. And, even on Chrome, you cannot visually
separate the inputbox from the button (e.g. I have a 2-col layout, 320px/col
and 16px margin, and I only can mess around with width, padding and margin
instead of a clean separation).

To the people who whine about SASS: you can ALWAYS write the resulting CSS by
hand, it just takes a boatload of manual typing.

------
TTPrograms
Wow at the color picker. Funny that chrome seems to use my windows system
color picker.

~~~
robin_reala
<input type="color"/>, standard HTML5. It’s not got brilliant support though:
[http://caniuse.com/#feat=input-color](http://caniuse.com/#feat=input-color)

~~~
lucb1e
Wow even the Android browser implements it. IE and Safari are lagging again...

I was surprised to see some Linux-style color picker pop up. It looks a lot
like the one GIMP uses. Wonder if Firefox implemented that or they depend on
something that does, and in the latter case, what's that dependency?

------
boubiyeah
You might also not need CSS.

Doesn't mean you should bruteforce everything with just one tech. CSS is hard
to maintain.

------
Wintamute
Yuck. I'd take a simple well crafted and maintainable JS solution over an
opinionated CSS preprocessor any day of the week.

Preprocessors do nothing but splinter the CSS scene by layering odd syntax
over an already creaking/complex CSS spec. Got nothing against compiling CSS
in general - postprocessing features related to current and future CSS specs
with PostCSS is a great idea. But dividing the community's attention between
multiple competing preprocessors while it should have been concentrating on
the spec is the worst thing to have ever happened to CSS.

Great things happened to JS when people got behind tools that pushed the
language forward while keeping the current and future spec in mind
(ES6/Babel). Shame CSS took an alternative approach imo.

------
jiiam
Funny that I had to activate javascript in order to see the previews, so,
although you don't need JS in real life, you need it to convince people to
stop using it.

Kinda like when Dante wrote in Latin about the utility of the Italian
language.

------
k__
A few days ago a saw a talk about CSS animations with RxJS [0] and the gist
about CSS only stuff was something like: "Yes, you can do much with CSS only,
but it gets ugly fast."

Often you're better of to do a mix of both, because some things that are very
complicated in CSS are two-liners in JavaScript.

[0]
[https://www.youtube.com/watch?v=lTCukb6Zn3g](https://www.youtube.com/watch?v=lTCukb6Zn3g)

~~~
girvo
> _...because some things that are very complicated in CSS are two-liners in
> JavaScript_

And vice-versa, in modern browsers! Best to have both in your toolbox,
definitely.

------
aargh_aargh
The site would benefit from displaying browser versions where each of those
features is supported à la caniuse.com

------
Yuioup
CSS is great, and by all means use it, while also being aware that you can
build so many functional UI components without the additional dependancy.

Maybe you can include a few lines of utility code, or a mixin, and forgo the
requirement. If you're only targeting more modern browsers, you might not need
anything more than what the browser ships with.

This site is fully copied from youmightnotneedcss.com, an excellent resource
for vanilla CSS created by @somebody and @somebodyelse. But this time, we take
a look at the power of modern native HTML and g as well as some of the
syntactic sugar of DuJour. Because, you might not need scripts for that task
at all! (Note: these methods can all be accessible, but the demos may not be.
Please take a moment to test these before using in production)

------
carsongross
You might not need (to write any) Javascript, but you might _still_ want
modern UX with some AJAX.

I have some good news: [http://intercoolerjs.org](http://intercoolerjs.org)

You can add AJAX to your application without writing any javascript code, and
you'll get to use REST (with real, honest to God HATEOAS) without even
thinking about it:

[http://intercoolerjs.org/2016/01/18/rescuing-
rest.html](http://intercoolerjs.org/2016/01/18/rescuing-rest.html)

[http://intercoolerjs.org/2016/05/08/hatoeas-is-for-
humans.ht...](http://intercoolerjs.org/2016/05/08/hatoeas-is-for-humans.html)

------
kelseydh
What are the performance implications of using CSS animations versus
Javascript? Say, if you were trying to make an application where page
animations need to be extremely fast, like under 2ms for an experiment or
test.

~~~
mani04
I had always assumed that CSS is faster, till I read your question. A quick
search gave me this interesting link - [https://css-tricks.com/myth-busting-
css-animations-vs-javasc...](https://css-tricks.com/myth-busting-css-
animations-vs-javascript/) \- check it out!

~~~
kelseydh
Thanks for the link, a very informative read... and I've been looking for an
answer on this topic for quite a while.

------
etienn3
CSS for behaviour = un-scalable non-x-platform big ball of crap

I understand why people try so hard to do without JS, but if you want to
implement certain UI features, you're SOL. Either give up on them, or embrace
the pain.

------
denzell
Or, you could use JavaScript and do something in 30 seconds rather than
fiddling with CSS.

Why do people try so hard not to use tools that make their life easier?

You might not need a car - you can walk. But it makes life easier and it just
works!

~~~
thecrow1213
> Or, you could use JavaScript and do something in 30 seconds rather than
> fiddling with CSS.

Assuming you're more proficient in JS than CSS ;) With CSS3 I find some
animation is easier w/ transitions and keyframes than JS.

------
franze
Another point of view: an exceptional article by Jenn Schiffer "A Call For Web
Developers To Deprecate Their CSS" [https://medium.com/cool-code-pal/a-call-
for-web-developers-t...](https://medium.com/cool-code-pal/a-call-for-web-
developers-to-deprecate-their-css-1f6430781393) \- HN Submit here
[https://news.ycombinator.com/item?id=12691081](https://news.ycombinator.com/item?id=12691081)

~~~
sjclemmy
Surely that's a parody. If it's not...

~~~
pluma
As a rule of thumb: if it's written by Jenn Schiffer, it's probably satire.

Also, she called CSS "California Style Sheets" and called JS DOM manipulation
"Node code".

Also, the header was obviously done in MS Paint.

Also, it's Jenn Schiffer.

------
dralexmv
One thing I have taken issue with a lot of these different CSS "component"
implementations, is the lack of examples on how one would write a good testing
suite for these. My first reaction looking at these is not "wow", but more
"how can I test this?"

I would honestly be interested in hearing from some people here about how you
would go about writing a proper test for these examples. And if the answer is
"webdriver screenshotting", I might just shake my head a bit.

------
edem
> JavaScript is great

I've never heard somebody say that. Can you elaborate?

~~~
tracker1
It's powerful, flexible, supports classical and functional paradigms and can
handle input validation and transformation better than most languages with
less code.

It's the only reasonable cross platform client/server language which is well
supported.

~~~
edem
I can say this for (nearly) any dynamic language like python or ruby. Your
second statement is plain wrong however. Take clojure for example which
compiles to java bytecode and javascript (cljs) seamlessly. You seem to be a
victim of the Blub paradox.

------
amelius
The problem with using CSS for animations is that if the UX designers make a
minor change to the spec, you might be forced to rip out the whole thing and
redo it in JavaScript.

------
johnhenry
I thew this together a while back if anyone's interested:
[https://github.com/johnhenry/funwithoutjavascript](https://github.com/johnhenry/funwithoutjavascript)

------
partycoder
If you learn JavaScript, you would be learning an imperative language that
shares many features with other languages, and you would be, as a resource,
more flexible than if you just use CSS for everything.

------
bjn
JavaScript is overused today, even for stupidest things. If needs to be done
in JS, you'll see God knows how many frameworks included. This idea reminded
me of: youmightnotneedjquery.com

~~~
joshmanders
The keyword in all of these sites is the "YOU MIGHT NOT NEED" not "YOU DON'T
NEED".. One could theoretically create youmightnotneeda.website and convey
that maybe for what you're doing, a website isn't actually needed at all...
Doesn't mean it's gospel and everyone should follow it.

------
milkmiruku
I would like to see more sites that use an uppercase title making it so via
CSS so I can copy/paste that without having to copy from the source <title> or
be lazy and rewrite.

------
sundarurfriend
Many of these make sense, but a few (for eg. 'View Switcher') end up obscuring
the logic of what's happening, and are probably better off done in JS.

~~~
pluma
Also, some of them have major accessibility and usability issues.

The image slider for example can't be paused. There's the CSS property
"animation-play-state" which could have been used to do this, but that
literally freezes the animation, whereas you typically don't care about the
animation but don't want the slider to move on to the next image (i.e. finish
the transition, then pause).

And of course depending on which browsers you're targetting, many of these are
horrendously broken for most of your users.

~~~
tracker1
Yeah, the slider could have an overlay label that toggles a checkbox, where
the slider animated is depending upon a checked property, but then the issue
is which image is active... that would get fairly complicated with css only.

------
minusSeven
These examples are all good but I doubt whether you can really avoid
javascript. In reality it's more like you can't avoid javascript if you wanted
too.

------
Rafert
Neat stuff. One small issue: the lightbox re-opens when I'm using the back
button on my mouse (using Chrome), not sure if that's fixable or not?

------
truth_sentinell
IMHO unless your site is just showing static content, like a flier or
something like that, not using JS will plunge your UX and overall
productivity.

------
superkuh
It's funny that all the examples previews use CodePen and,

>Codepen requires JavaScript to render the code and preview areas in this
view.

------
dsego
These don't work in Safari 10:

\- The modal dialog example

\- Color picker

\- Form validation

~~~
angry-hacker
And also with IE9. So what's the problem? :))

~~~
tracker1
The problem is public facing websites, and will depend on your userbase.

------
drikerf
Well done :)! Saved for future reference.

------
thomasahle
The form validation is really cool!

But why oh why does it not validate before I press submit? Is that a Chrome
specific thing?

~~~
achikin
Either does not work for me in Safari, or I'm missing the result.

------
luca_ing
Does anyone else find it hilarious that this site doesn't work without
Javascript?

------
rebolek
I might not, but I need for this page. Otherwise it would work with NoScript.

------
jiyinyiyong
Uninstall all JavaScript engines from you browser to prove that!

------
dreta
Best of luck making this work across browsers. And even more luck to anybody
who uses this, and then has to come back 6 months later to change something.

------
eli
But I need my site to work in IE9 too.

------
joshmn
My very wide-cast idea is this: The last 5 years we've rid ourselves of flash
(for the most part) and replaced it with javascript.

------
randomsofr
Coming up next: You might not need SCSS.

------
choward
You might not need JavaScript*

* If you hate your users

------
notgood
You might nod near internet, heck, you many not need staying alive, but here
we are.

Seriously, after some minimum complexity the ability to create functions and
loops its extremely important. As in you don't need a spoon and a knife to
feed yourself, but it sure fucking helps.

~~~
pmlnr
I remember a time when the coolest thing you could do with JS was mouse
trailing bouncy balls. Since then, a lot changed; one of these is that people
see JS as salvation from a special hell that doesn't even exist.

That giant ball JS that is included in most sites is absolute nonsense and is
not needed in 99% of the cases. We include complete libraries where is should
only be a portion.

I'm aware that this is changing, by "compiled" JS - putting together only the
required elements - but usually those still have massive overheads.

In my opinion, you should use the tools for what they are the best for.
Provide a static, readable HTML first from a backend code - that will run on
anything, anywhere; it's accessible, and you've served the main purpose:
serving content^1. If you need, add the styling and the animation with CSS.
Only after that add the JS layer, which, in my opinion, should mostly be used
for data exchange and change triggering.

^1 There are exceptions, there always are; application within the browser,
where the main purpose differs from the content delivery. In certain numbers,
such as domains, these are the minority; in actual use, it's a different
story.

( Imagine a world where the data exchange is not tied together with JS and
that we could but other UIs in front of the backends of webapps.. )

------
justinlardinois
A lot of "you don't need Javascript" articles show a bunch of CSS tricks that
look flashy and cool but in reality are brittle, limited, and hard to
maintain. There's a fair bit of that here, but props for also pointing out
some of the new HTML5 features that may have slipped under people's radars. I
was aware of the form validation and I think it's a godsend, but I had no idea
there's a native color picker now too.

------
dcw303
The site makes no claims as such, but it undermines its own credibility if it
uses .js files.

Surely they could have figured a way to do without them.

~~~
Insanity
At the start of the article they do state that you might need javascript. The
point was to show off things you can do without javascript, not say that you
never need it.

