I think that's great, but everything is based on hacks using checkboxes.
CSS is powerful, you can do a lot of things without JS
261–270 of 319 posts
Re: CSS is powerful, you can do a lot of things without JS
#262Earlier quoted context omitted.
My current-favorite problem with modern web development is mobile-specific redirection. e.g. you click a link in your email and it takes you to "www.foo.com/somethingWithParametersAndImportantStuff", foo.com detects you're on a phone and redirects you to their mobile homepage at "m.foo.com", blowing away your URL or even better not supporting your particular URL's page in the mobile site... where... your mobile brows…
http://xkcd.com/869/ Anyone know where I can find publication dates for individual comics? I don't see anything on the comic's page.
It's hard to search on that forum!
http://forums.xkcd.com/viewtopic.php?f=7&t=69169&hilit=serve...
It's from some time around Mar 07, 2011.
Re: CSS is powerful, you can do a lot of things without JS
#263Earlier quoted context omitted.
I'm interested in seeing these 3 lines of Javascript that can implement an accordion. With a sane limit to number of characters on each line as well.
Here you go: http://jsbin.com/codedujeqe/edit?js,output JS: var panels = [...document.querySelectorAll(".accordion li")]; panels.forEach(x => x.addEventListener('click', e => panels.forEach(y => y.setAttribute('class', y == e.target && !y.classList.contains('open') ? 'open' : '')) ));
Minor nitpick: if you're using classList, you might as well also use it to toggle the "open" class (instead of y.setAttribute('class', ...)):
y.classList.toggle('open', y == e.target && !y.classList.contains('open'))
y == e.target ? y.classList.toggle('open') : y.classList.remove('open'))
y.classList[y == e.target ? 'toggle' : 'remove']('open')Re: CSS is powerful, you can do a lot of things without JS
#264Earlier quoted context omitted.
> They want sites that work quickly, are easy to understand, and work on mobile just as well as on a desktop. Not quite: users want to achieve specific tasks as quickly and easily as possible. Certainly "work quickly" and "work on mobile" are two huge pillars of that for many (probably the majority of) tasks, but for many applications you have to make significant trade-offs in functionality under the constraints of a…
And it's not clear to me that fixing a broken system is worth the time, when we have a working system standing by idly. I don't know of anyone who is asking for more interactiveness for most of the web, but I do know that non-js works, and works well. It may not be as "interactive", but I view that as a good thing. Of course, this is all in context of a typical webpage. There are exceptions to this.
> I don't know of anyone who is asking for more interactiveness for most of the web
Hi, that's me. The reason is, quite simply, because this is not a good user experience:
https://pbs.twimg.com/media/CmaP3JvUcAA8-5a.jpg:large
The open web is my platform of choice, and the technology is finally there. Progressive Web Apps[1] offer the features of native but are instantly-available, without downloading or installing. So yes, I very much want that as a developer.
Re: CSS is powerful, you can do a lot of things without JS
#265I've worked with people who did things like this. It's not fun for anyone else on the team to try and figure out why you're using specific pseudo selectors on tags in a child inside a sibling in some label to make an accordion that would take 3 lines in Javascript.
Sounds odd, your teammates are hardcoding extremely common page components from scratch, i.e. at least not an internal library/ module where you only write it once? That seems like the bigger problem you have. If you only write it once and put it somewhere, among other advantages, you can document it easily.
You still need to write the initial block of code. Advocating for non-custom elements just because it already exists in Bootstrap or Foundation is an easy way out, especially for UI uses. It doesn't matter how an element was created as long as it's re-useable - there's nothing stopping you from handcrafting your own UI elements and re-using that block in your design system...
Re: CSS is powerful, you can do a lot of things without JS
#266Earlier quoted context omitted.
Here you go: http://jsbin.com/codedujeqe/edit?js,output JS: var panels = [...document.querySelectorAll(".accordion li")]; panels.forEach(x => x.addEventListener('click', e => panels.forEach(y => y.setAttribute('class', y == e.target && !y.classList.contains('open') ? 'open' : '')) ));
Minor nitpick: if you're using classList, you might as well also use it to toggle the "open" class (instead of y.setAttribute('class', ...)): y.classList.toggle('open', y == e.target && !y.classList.contains('open')) As the behavior of what to do with the "open" class is only dependent on whether `y` is the clicked element, i find this version more readable: y == e.target ? y.classList.toggle('open') : y.classList.re…
Nice. Wasn't aware of the classList.toggle method.
Re: CSS is powerful, you can do a lot of things without JS
#267I've worked with people who did things like this. It's not fun for anyone else on the team to try and figure out why you're using specific pseudo selectors on tags in a child inside a sibling in some label to make an accordion that would take 3 lines in Javascript.
Using HTML5 tags such as , you don't need CSS or JS! Try this in Chrome: https://jsfiddle.net/timdavila/f5rcarmn/
Unfortunately this is not yet supported in any version of IE, including Edge.
Re: CSS is powerful, you can do a lot of things without JS
#268Earlier quoted context omitted.
With jQuery it's probably like 4 or 5 lines. With plain JS a few more as you have to write your own iterator function. All an accordion does is add an event listener that removes a class from all elements and adds it back to one of them. Then there's a 1 line transition for that class in css.
Is jQuery included in those 4 or 5 lines? One line of CSS in your accordion?
I'm not sure why the actual jQuery library matters here. Chances are if you're using jQuery for an accordion you're also using it for a lot of other things.
Re: CSS is powerful, you can do a lot of things without JS
#269Earlier quoted context omitted.
And it's not clear to me that fixing a broken system is worth the time, when we have a working system standing by idly. I don't know of anyone who is asking for more interactiveness for most of the web, but I do know that non-js works, and works well. It may not be as "interactive", but I view that as a good thing. Of course, this is all in context of a typical webpage. There are exceptions to this.
> I don't know of anyone who is asking for more interactiveness for most of the web Hi, that's me. The reason is, quite simply, because this is not a good user experience: https://pbs.twimg.com/media/CmaP3JvUcAA8-5a.jpg:large The open web is my platform of choice, and the technology is finally there. Progressive Web Apps[1] offer the features of native but are instantly-available, without downloading or installing. S…
I don't see how that image proves your point. Shitty designs are shitty if they are in a web-app, or mobile-app.
OK, fine. I'll concede devs want more interactiveness. I have yet to see evidence that users want more interactiveness. I think that points to the arrogance of devs "who totally know better than the user".
Re: CSS is powerful, you can do a lot of things without JS
#270Earlier quoted context omitted.
If it involves jQuery then it is not 3 lines. The original claim was 3 lines of Javascript. Making a claim something is only 3 lines of Javascript without including the fact that jQuery is required is a disservice to the many people that made jQuery the wonderful library that it is. That is the source of my disagreement.
>>If it involves jQuery then it is not 3 lines. The original claim was 3 lines of Javascript. jQuery is JavaScript, so...
Jquery is many lines of javascript.