16 ms·

You might not need JavaScript

649 points by MarkusWinand 10y ago

boubiyeah 10y ago
You might also not need CSS. Doesn't mean you should bruteforce everything with just one tech. CSS is hard to maintain.
maxharris 10y ago
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 10y ago
  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
dcw303 10y ago
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 10y ago
  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.
- userbinator 10y ago
  Indeed, a bit funny for a site titled "You Might Not Need JavaScript" to itself use JS.
- dontbethatguy 10y ago
  did you accidentally go to site called youshouldneveruseJS.com? Because I think we were talking about you-MIGHT-not-need-JS.
- crashdown 10y ago
  Of course it doesn't undermine it's own credibility. If you turn off JS you'll see that the site still works. It's progressively enhanced using JS to give you examples of what is shown here.
duck2 10y ago
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 10y ago
  aren't you talking about the view switcher ( http://youmightnotneedjs.com/#view_switcher http://youmightnotneedjs.com/#view_switcher ) ?
  - duck2 10y ago
    In this demo yes, however I have seen CSS image sliders with buttons which happily sit on the back button.
Shanea93 10y ago
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?
- mtharrison 10y ago
  You might not need Sass.
- olavgg 10y ago
  I absolutely agree! While we can discuss about why SCSS is better, it is more like comparing Volvo with Mercedes. In the end, CSS is the standard, not SCSS. And CSS is evolving and getting better and better.
- Manishearth 10y ago
  There's a "view compiled" button that turns up if you hover the SCSS in codepen. I got through half the doc before discovering it though. I was very surprised to see the ampersand, since I was pretty sure CSS didn't have anything like that.
- alnorth 10y ago
  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.
  - crashdown 10y ago
    I think you've hit the nail on the head here.
  - mrec 10y ago
    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_variables https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_v...
TTPrograms 10y ago
Wow at the color picker. Funny that chrome seems to use my windows system color picker.
- robin_reala 10y ago
  <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 10y ago
    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?
- tener 10y ago
  Yep, pretty hilarious. Also: doesn't really work (returns black always - Win 10).
- achikin 10y ago
  Does not work for me in Safari :(
- pmarreck 10y ago
  Notably doesn't seem to work on iOS.
inian 10y ago
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 10y ago
  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 10y ago
    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 10y ago
      That doesn't make it laudable, or even defensible.
      - kek918 10y ago
        From a commercial point of view it kind of does. If the development costs exceeds the increased revenue it's not really worth it.
- zerognowl 10y ago
  http://youmightnotneedjquery.com/ http://youmightnotneedjquery.com/
- yellowapple 10y ago
  There's definitely some merit to not requiring users to download and run arbitrary and untrusted Turing-complete code. Whether abusing a stylesheet language to achieve that is worth said merit is certainly debatable, but I for one applaud the effort.
d3ckard 10y ago
Since half the examples do not work on Safari, I believe the title is a bit misleading.
- olavgg 10y ago
  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...
  - drinchev 10y ago
    I switched from Chrome to Safari 5 months ago. The memory usage in Safari is far more superior than Chrome / Firefox on OS X. Also the CPU usage is relatively low, which means more time on battery for me. I still use Chrome for development, though. Safari, is not as bad as IE6 was and anyway no professional front-end developer would make a website that is not working properly on iOS Safari, so it's kinda obvious it will stay supported for a long, long time. So I would consider what the OP is doing with the CSS, something that might also work on Safari, but with some polyfills.
  - Yaggo 10y ago
    Oh please. Safari 10 (both desktop & iOS versions) is the only browser with 100% ES6 compatibility. All browsers have some issues (e.g. Chrome still does not support 'sticky' position, Safari hasn't implemented Service Workers, etc), that's part of the multi-vendor / open-standard game. http://kangax.github.io/compat-table/es6/ http://kangax.github.io/compat-table/es6/
    - Yaggo 10y ago
      Safari does have longer release cycle than e.g. Chrome, because Apple provides very uniform / polished support for wide range of devices (Macs, iOS devices, including very old ones such as iPhone 4S).
  - mozumder 10y ago
    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.
k__ 10y ago
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 10y ago
  > ...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.
drikerf 10y ago
Well done :)! Saved for future reference.
franze 10y ago
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-to-deprecate-their-css-1f6430781393 https://medium.com/cool-code-pal/a-call-for-web-developers-t... - HN Submit here https://news.ycombinator.com/item?id=12691081 https://news.ycombinator.com/item?id=12691081
- sjclemmy 10y ago
  Surely that's a parody. If it's not...
  - vog 10y ago
    I clearly is. Note the absurd metric (lines and spaces) to justify how the blown-up version is considered to be smaller. Also note that the article consequently talks about "Node code" even though they are talking about client-side JavaScript. From the article: #gulp { color : #0000ff; padding : 10px; } This CSS takes up 4 lines, and at least 13 spaces. [...] document.getElementById(‘gulp’).style.color=‘#00f’; document.getElementById(‘gulp’).style.padding=‘10px’; This Node code takes up only 2 lines and there are 0 spaces. Essentially, we are saving lines, spaces, and files (delete your .css documents!).
  - pluma 10y ago
    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.
- Grangar 10y ago
  That writer is amazing.
bshimmin 10y ago
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.
- Retr0spectrum 10y ago
  Image sliders are considered bad UX to begin with, and the lack of user control makes them even worse IMHO.
- klibertp 10y ago
  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.
aargh_aargh 10y ago
The site would benefit from displaying browser versions where each of those features is supported à la caniuse.com
jwblackwell 10y ago
Does anyone else feel that a site called "You Might Not Need Javascript", probably shouldn't use Javascript?
- akerro 10y ago
  No?
- kitd 10y ago
  Perhaps they needed Javascript ;)
- deleted 10y ago
  [deleted]
- fenomas 10y ago
  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 10y ago
    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 10y ago
      Technically, they're preaching that you might not need JavaScript rather than advocating against it
  - eyelidlessness 10y ago
    Why would syntax highlighting need JavaScript?
    - 10y ago
sundarurfriend 10y ago
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 10y ago
  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 10y ago
    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.
denzell 10y ago
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 10y ago
  > 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.
NKCSS 10y ago
It made me learn about http://caniuse.com/#feat=input-pattern http://caniuse.com/#feat=input-pattern ; thanks for that!
- cygned 10y ago
  Same. Didn't even knew that exists. Awesome.
  - staticelf 10y ago
    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 10y ago
      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 10y ago
        I use caniuse excessivly, I just hadn't heard about the pattern attribute. But thanks for the tip, html5please seems very nice!
    - seangrogg 10y ago
      May be worth perusing https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input https://developer.mozilla.org/en-US/docs/Web/HTML/Element/in... for additional attributes that are native to the input field.
      - staticelf 10y ago
        Seems like the pattern attribute is the only input attribute I've missed somehow.
IanCal 10y ago
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 10y ago
  > 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.
dsego 10y ago
These don't work in Safari 10: - The modal dialog example - Color picker - Form validation
- angry-hacker 10y ago
  And also with IE9. So what's the problem? :))
  - M4v3R 10y ago
    The problem is that Safari (especially mobile Safari) is actually a current, major browser [0], while IE9 thankfully is not :). [0] http://gs.statcounter.com/#mobile+tablet-browser-ww-monthly-201509-201609 http://gs.statcounter.com/#mobile+tablet-browser-ww-monthly-...
  - tracker1 10y ago
    The problem is public facing websites, and will depend on your userbase.
Rafert 10y ago
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?
dreta 10y ago
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.
Semiapies 10y ago
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 10y ago
  > 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?
  - Semiapies 10y ago
    How is it consistent UI when it doesn't match your design and looks and works very different in every browser?
    - eivarv 10y ago
      It's consistent with the platform, i.e. the alerts are native
      - Semiapies 10y ago
        You should experiment with these. They are different on different browsers on the same platforms.
        eivarv 10y ago
        Sure, but (unless their GUI is implemented with web technologies for some reason) they generally use native widgets, at least.
        Semiapies 10y ago
        I've actually spent many hours trying to make them work. You should at least invest a little research time before making proclamations about how you imagine they work.
partycoder 10y ago
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.
edem 10y ago
> JavaScript is great I've never heard somebody say that. Can you elaborate?
- tracker1 10y ago
  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 10y ago
    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.
BinaryIdiot 10y ago
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 10y ago
  All you need is this motherfucking website: http://motherfuckingwebsite.com/ http://motherfuckingwebsite.com/
  - legulere 10y ago
    Actually you need a tiny bit more: http://bettermotherfuckingwebsite.com http://bettermotherfuckingwebsite.com
    - Jazcash 10y ago
      Getting there! https://bestmotherfucking.website/ https://bestmotherfucking.website/
      - bryanrasmussen 10y ago
        If I was the owner of motherfucking.website I would also take requests at better.motherfucking.website and best.motherfucking.website.
amelius 10y ago
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.
etienn3 10y ago
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.
kelseydh 10y ago
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.
- angry-hacker 10y ago
  I believe animations are always faster when you use css instead of doing it with js.
- mani04 10y ago
  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-javascript/ https://css-tricks.com/myth-busting-css-animations-vs-javasc... - check it out!
  - kelseydh 10y ago
    Thanks for the link, a very informative read... and I've been looking for an answer on this topic for quite a while.
notgood 10y ago
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.
- thomasahle 10y ago
  You can also read the title as: You Might Not Need JavaScript for that specific thing. If this simplifies the codebase, and gives a more uniform user experience, it's harder to argue against.
- pmlnr 10y ago
  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.. )
Cub3 10y ago
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 10y ago
  The rationale of the site site is simple purism, not mere technical considerations like code complexity, accessibility, history pollution, etc.
thomasahle 10y ago
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 10y ago
  Either does not work for me in Safari, or I'm missing the result.
Yuioup 10y ago
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)
mschuster91 10y ago
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.
eli 10y ago
But I need my site to work in IE9 too.
superkuh 10y ago
It's funny that all the examples previews use CodePen and, >Codepen requires JavaScript to render the code and preview areas in this view.
rebolek 10y ago
I might not, but I need for this page. Otherwise it would work with NoScript.
jiiam 10y ago
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.
Wintamute 10y ago
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.
ad-hominem 10y ago
This is all fine, but how do you open a modal and appropriately label the DOM nodes with ARIA attributes without JS (aria-hidden, aria-expanded)? The answer is, you don't. Hope you don't care if the visually disabled can use your site or not!
nfriedly 10y ago
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.
- larrik 10y ago
  As a developer, I find more pleasure in deleting code than writing it. It might have been hilarious, but I wasn't surprised to read that :)
- agumonkey 10y ago
  More than hilarious, I find it a serious skill manifestation.
  - klodolph 10y ago
    A large percentage of the "very skilled" developers I know will much sooner brag about how much code they deleted or didn't write than how much code they wrote.
    - agumonkey 10y ago
      That is already well known quality[1]. I find Parent work even deeper, he pivoted the whole thing to make his main skill a second class citizen because that's what it was to be in this context. [1] I regularly nerdgasm at LibreOffice releases reading how many thousands LoC they removed from the code base. ps: beside code golf, I think there should be a patch golf thing. Try the smallest changeset that fixes or add a feature.
      - Roboprog 10y ago
        I like the idea of "patch golf". If only people would at least do a diff before they commit to spot gratuitous reformatting or accidental changes :-(
carsongross 10y ago
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.html http://intercoolerjs.org/2016/05/08/hatoeas-is-for-humans.ht...
jiyinyiyong 10y ago
Uninstall all JavaScript engines from you browser to prove that!
zeveb 10y ago
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?
Jazcash 10y ago
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.
bjn 10y ago
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 10y ago
  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.
johnhenry 10y ago
I thew this together a while back if anyone's interested: https://github.com/johnhenry/funwithoutjavascript https://github.com/johnhenry/funwithoutjavascript
minusSeven 10y ago
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.
joshmn 10y ago
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.
choward 10y ago
You might not need JavaScript* * If you hate your users
dralexmv 10y ago
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.
randomsofr 10y ago
Coming up next: You might not need SCSS.
truth_sentinell 10y ago
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.
justinlardinois 10y ago
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.
milkmiruku 10y ago
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.
luca_ing 10y ago
Does anyone else find it hilarious that this site doesn't work without Javascript?
tofupup 10y ago
neat

649 points by MarkusWinand 10y ago

You might also not need CSS. Doesn't mean you should bruteforce everything with just one tech. CSS is hard to maintain.

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 10y ago
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

dcw303 10y ago

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 10y ago
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.
userbinator 10y ago
Indeed, a bit funny for a site titled "You Might Not Need JavaScript" to itself use JS.
dontbethatguy 10y ago
did you accidentally go to site called youshouldneveruseJS.com? Because I think we were talking about you-MIGHT-not-need-JS.
crashdown 10y ago
Of course it doesn't undermine it's own credibility. If you turn off JS you'll see that the site still works. It's progressively enhanced using JS to give you examples of what is shown here.

duck2 10y ago

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 10y ago
aren't you talking about the view switcher ( http://youmightnotneedjs.com/#view_switcher http://youmightnotneedjs.com/#view_switcher ) ?
- duck2 10y ago
  In this demo yes, however I have seen CSS image sliders with buttons which happily sit on the back button.

Shanea93 10y ago

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?

mtharrison 10y ago
You might not need Sass.
olavgg 10y ago
I absolutely agree! While we can discuss about why SCSS is better, it is more like comparing Volvo with Mercedes. In the end, CSS is the standard, not SCSS. And CSS is evolving and getting better and better.
Manishearth 10y ago
There's a "view compiled" button that turns up if you hover the SCSS in codepen. I got through half the doc before discovering it though. I was very surprised to see the ampersand, since I was pretty sure CSS didn't have anything like that.
alnorth 10y ago
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.
- crashdown 10y ago
  I think you've hit the nail on the head here.
- mrec 10y ago
  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_variables https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_v...

TTPrograms 10y ago

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

robin_reala 10y ago
<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 10y ago
  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?
tener 10y ago
Yep, pretty hilarious. Also: doesn't really work (returns black always - Win 10).
achikin 10y ago
Does not work for me in Safari :(
pmarreck 10y ago
Notably doesn't seem to work on iOS.

inian 10y ago

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 10y ago
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 10y ago
  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 10y ago
    That doesn't make it laudable, or even defensible.
    - kek918 10y ago
      From a commercial point of view it kind of does. If the development costs exceeds the increased revenue it's not really worth it.
zerognowl 10y ago
http://youmightnotneedjquery.com/ http://youmightnotneedjquery.com/
yellowapple 10y ago
There's definitely some merit to not requiring users to download and run arbitrary and untrusted Turing-complete code. Whether abusing a stylesheet language to achieve that is worth said merit is certainly debatable, but I for one applaud the effort.

d3ckard 10y ago

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

olavgg 10y ago
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...
- drinchev 10y ago
  I switched from Chrome to Safari 5 months ago. The memory usage in Safari is far more superior than Chrome / Firefox on OS X. Also the CPU usage is relatively low, which means more time on battery for me. I still use Chrome for development, though. Safari, is not as bad as IE6 was and anyway no professional front-end developer would make a website that is not working properly on iOS Safari, so it's kinda obvious it will stay supported for a long, long time. So I would consider what the OP is doing with the CSS, something that might also work on Safari, but with some polyfills.
- Yaggo 10y ago
  Oh please. Safari 10 (both desktop & iOS versions) is the only browser with 100% ES6 compatibility. All browsers have some issues (e.g. Chrome still does not support 'sticky' position, Safari hasn't implemented Service Workers, etc), that's part of the multi-vendor / open-standard game. http://kangax.github.io/compat-table/es6/ http://kangax.github.io/compat-table/es6/
  - Yaggo 10y ago
    Safari does have longer release cycle than e.g. Chrome, because Apple provides very uniform / polished support for wide range of devices (Macs, iOS devices, including very old ones such as iPhone 4S).
- mozumder 10y ago
  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.

k__ 10y ago

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 10y ago
> ...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.

drikerf 10y ago

Well done :)! Saved for future reference.

franze 10y ago

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-to-deprecate-their-css-1f6430781393 https://medium.com/cool-code-pal/a-call-for-web-developers-t... - HN Submit here https://news.ycombinator.com/item?id=12691081 https://news.ycombinator.com/item?id=12691081

sjclemmy 10y ago
Surely that's a parody. If it's not...
- vog 10y ago
  I clearly is. Note the absurd metric (lines and spaces) to justify how the blown-up version is considered to be smaller. Also note that the article consequently talks about "Node code" even though they are talking about client-side JavaScript. From the article: #gulp { color : #0000ff; padding : 10px; } This CSS takes up 4 lines, and at least 13 spaces. [...] document.getElementById(‘gulp’).style.color=‘#00f’; document.getElementById(‘gulp’).style.padding=‘10px’; This Node code takes up only 2 lines and there are 0 spaces. Essentially, we are saving lines, spaces, and files (delete your .css documents!).
- pluma 10y ago
  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.
Grangar 10y ago
That writer is amazing.

bshimmin 10y ago

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.

Retr0spectrum 10y ago
Image sliders are considered bad UX to begin with, and the lack of user control makes them even worse IMHO.
klibertp 10y ago
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.

aargh_aargh 10y ago

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

jwblackwell 10y ago

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

akerro 10y ago
No?
kitd 10y ago
Perhaps they needed Javascript ;)
deleted 10y ago
[deleted]
fenomas 10y ago
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 10y ago
  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 10y ago
    Technically, they're preaching that you might not need JavaScript rather than advocating against it
- eyelidlessness 10y ago
  Why would syntax highlighting need JavaScript?
  - 10y ago

sundarurfriend 10y ago

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 10y ago
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 10y ago
  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.

denzell 10y ago

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 10y ago
> 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.

NKCSS 10y ago

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

cygned 10y ago
Same. Didn't even knew that exists. Awesome.
- staticelf 10y ago
  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 10y ago
    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 10y ago
      I use caniuse excessivly, I just hadn't heard about the pattern attribute. But thanks for the tip, html5please seems very nice!
  - seangrogg 10y ago
    May be worth perusing https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input https://developer.mozilla.org/en-US/docs/Web/HTML/Element/in... for additional attributes that are native to the input field.
    - staticelf 10y ago
      Seems like the pattern attribute is the only input attribute I've missed somehow.

IanCal 10y ago

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 10y ago
> 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.

dsego 10y ago

These don't work in Safari 10: - The modal dialog example - Color picker - Form validation

angry-hacker 10y ago
And also with IE9. So what's the problem? :))
- M4v3R 10y ago
  The problem is that Safari (especially mobile Safari) is actually a current, major browser [0], while IE9 thankfully is not :). [0] http://gs.statcounter.com/#mobile+tablet-browser-ww-monthly-201509-201609 http://gs.statcounter.com/#mobile+tablet-browser-ww-monthly-...
- tracker1 10y ago
  The problem is public facing websites, and will depend on your userbase.

Rafert 10y ago

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?

dreta 10y ago

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.

Semiapies 10y ago

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 10y ago
> 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?
- Semiapies 10y ago
  How is it consistent UI when it doesn't match your design and looks and works very different in every browser?
  - eivarv 10y ago
    It's consistent with the platform, i.e. the alerts are native
    - Semiapies 10y ago
      You should experiment with these. They are different on different browsers on the same platforms.
      - eivarv 10y ago
        Sure, but (unless their GUI is implemented with web technologies for some reason) they generally use native widgets, at least.
        Semiapies 10y ago
        I've actually spent many hours trying to make them work. You should at least invest a little research time before making proclamations about how you imagine they work.

partycoder 10y ago

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.

edem 10y ago

> JavaScript is great I've never heard somebody say that. Can you elaborate?

tracker1 10y ago
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 10y ago
  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.

BinaryIdiot 10y ago

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 10y ago
All you need is this motherfucking website: http://motherfuckingwebsite.com/ http://motherfuckingwebsite.com/
- legulere 10y ago
  Actually you need a tiny bit more: http://bettermotherfuckingwebsite.com http://bettermotherfuckingwebsite.com
  - Jazcash 10y ago
    Getting there! https://bestmotherfucking.website/ https://bestmotherfucking.website/
    - bryanrasmussen 10y ago
      If I was the owner of motherfucking.website I would also take requests at better.motherfucking.website and best.motherfucking.website.

amelius 10y ago

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.

etienn3 10y ago

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.

kelseydh 10y ago

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.

angry-hacker 10y ago
I believe animations are always faster when you use css instead of doing it with js.
mani04 10y ago
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-javascript/ https://css-tricks.com/myth-busting-css-animations-vs-javasc... - check it out!
- kelseydh 10y ago
  Thanks for the link, a very informative read... and I've been looking for an answer on this topic for quite a while.

notgood 10y ago

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.

thomasahle 10y ago
You can also read the title as: You Might Not Need JavaScript for that specific thing. If this simplifies the codebase, and gives a more uniform user experience, it's harder to argue against.
pmlnr 10y ago
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.. )

Cub3 10y ago

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 10y ago
The rationale of the site site is simple purism, not mere technical considerations like code complexity, accessibility, history pollution, etc.

thomasahle 10y ago

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 10y ago
Either does not work for me in Safari, or I'm missing the result.

Yuioup 10y ago

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)

mschuster91 10y ago

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.

eli 10y ago

But I need my site to work in IE9 too.

superkuh 10y ago

It's funny that all the examples previews use CodePen and, >Codepen requires JavaScript to render the code and preview areas in this view.

rebolek 10y ago

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

jiiam 10y ago

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.

Wintamute 10y ago

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.

ad-hominem 10y ago

This is all fine, but how do you open a modal and appropriately label the DOM nodes with ARIA attributes without JS (aria-hidden, aria-expanded)? The answer is, you don't. Hope you don't care if the visually disabled can use your site or not!

nfriedly 10y ago

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.

larrik 10y ago
As a developer, I find more pleasure in deleting code than writing it. It might have been hilarious, but I wasn't surprised to read that :)
agumonkey 10y ago
More than hilarious, I find it a serious skill manifestation.
- klodolph 10y ago
  A large percentage of the "very skilled" developers I know will much sooner brag about how much code they deleted or didn't write than how much code they wrote.
  - agumonkey 10y ago
    That is already well known quality[1]. I find Parent work even deeper, he pivoted the whole thing to make his main skill a second class citizen because that's what it was to be in this context. [1] I regularly nerdgasm at LibreOffice releases reading how many thousands LoC they removed from the code base. ps: beside code golf, I think there should be a patch golf thing. Try the smallest changeset that fixes or add a feature.
    - Roboprog 10y ago
      I like the idea of "patch golf". If only people would at least do a diff before they commit to spot gratuitous reformatting or accidental changes :-(

carsongross 10y ago

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.html http://intercoolerjs.org/2016/05/08/hatoeas-is-for-humans.ht...

jiyinyiyong 10y ago

Uninstall all JavaScript engines from you browser to prove that!

zeveb 10y ago

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?

Jazcash 10y ago

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.

bjn 10y ago

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 10y ago
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.

johnhenry 10y ago

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

minusSeven 10y ago

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.

joshmn 10y ago

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.

choward 10y ago

You might not need JavaScript* * If you hate your users

dralexmv 10y ago

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.

randomsofr 10y ago

Coming up next: You might not need SCSS.

truth_sentinell 10y ago

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.

justinlardinois 10y ago

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.

milkmiruku 10y ago

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.

luca_ing 10y ago

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

tofupup 10y ago

neat