Path menu in pure CSS3 • Hacker News Board

Re: Path menu in pure CSS3

#41

Post by WalterGR » Mon, Dec 05, 2011, 7:38 AM UTC

billpatrianakos wrote: post #33

WalterGR wrote: post #29

Earlier quoted context omitted.

I don't understand the "you aren't allowed to comment if you haven't submitted code" sentiment.

Don't take it wrong. It probably just means that the author was nice enough to make it and give it for free and if you have a problem, try to fix it instead of acting like an entitled asshole and demanding X feature or bug fix for code you didn't contribute to and are using for free. There are a ton of people who like to bitch at open source developers about not including or fixing something and for projects like thi…

There are a ton of people who like to bitch at open source developers about not including or fixing something and for projects like this tht isn't cool.

Yeah, this is an excellent way to deflect criticism from open source projects. I've seen it frequently stop what could be a useful discussion in its tracks.

(And this isn't a comment to you specifically, but that sentiment combined with closed-source-software-as-unethical turns my stomach.)

Re: Path menu in pure CSS3

#42

Post by jonah » Mon, Dec 05, 2011, 7:54 AM UTC

necolas wrote: post #21

I hacked on the core animation of the Path menu for a few minutes last week (it's pretty rough) using a combination of CSS and JS that is a bit leaner and more flexible. http://jsfiddle.net/necolas/RGYUg/ The benefit of using JS to calculate the positioning (especially in an environment where JS will always be enabled) is that you can have the menu items correctly positioned irrespective of the number of items. Edit:…

This is a great illustration of the difference between "works" and Works.

This implementation is unsettling to me, while the original Path version is pleasant. It's hard to pin down - they're very close. (I think it's the animation speed and rapidly spinning icons mostly.)

As someone put it in another post it's the difference between the works of Google/Microsoft et. al. and the Works of Apple, Path, etc. The former would see this and sign off - "it works" like we specified, while at latter, this would be a good first pass and then "make 10 refinements" to get it to "feel" right.

No offense Beau, I'm just using yours as an example.

Re: Path menu in pure CSS3

#43

Post by alexchamberlain » Mon, Dec 05, 2011, 8:52 AM UTC

billpatrianakos wrote: post #34

fooandbarify wrote: post #27

Earlier quoted context omitted.

s/webkit/moz/

I hope this isn't dumb but what does "s/Webkit/moz" mean? To answer the poster above you, it would work by adding "-moz-propertyname" not removing the "-webkit" stuff. Each browser will ignore the proprietary prefix that doesn't apply to them and then apply the CSS to any style that is prefixed for them or the official implementation. So you can put prefixes for all vendors in your rules and the browser will choose t…

I would love to see this in LESS, but how do you overcome the loops?

Re: Path menu in pure CSS3

#44

Post by robin_reala » Mon, Dec 05, 2011, 9:00 AM UTC

gue5t wrote: post #24

alex_h wrote: post #12

Can someone enlighten me as to why "pure CSS" is seen as the pinnacle of web design? It seems that for problems involving a computational element like this, Javascript would be much more concise and readable. Having said that, it is beautifully done.

Javascript is turing-complete. That's a /lot/ of power and that means that security-conscious users (especially given the proliferation of more-powerful JS apis allowing the possibility for exploits in file, GPU, etc. access, along with JIT-enabled exploits as opposed to the old simple interpreting) will have it turned off whenever possible. Using CSS for non-turing-complete interactions which are limited in their co…

CSS is technically Turing complete too: http://lambda-the-ultimate.org/node/4222

Re: Path menu in pure CSS3

#45

Post by billpatrianakos » Mon, Dec 05, 2011, 9:10 AM UTC

WalterGR wrote: post #41

billpatrianakos wrote: post #33

Earlier quoted context omitted.

Don't take it wrong. It probably just means that the author was nice enough to make it and give it for free and if you have a problem, try to fix it instead of acting like an entitled asshole and demanding X feature or bug fix for code you didn't contribute to and are using for free. There are a ton of people who like to bitch at open source developers about not including or fixing something and for projects like thi…

There are a ton of people who like to bitch at open source developers about not including or fixing something and for projects like this tht isn't cool. Yeah, this is an excellent way to deflect criticism from open source projects. I've seen it frequently stop what could be a useful discussion in its tracks. (And this isn't a comment to you specifically, but that sentiment combined with closed-source-software-as-unet…

Yeah, you're right. But I think we can agree that it makes sense for this project, right? This isn't something like Firefox where they actively try to get you to use the software and one day turn around and say "don't complain because it's free". Instead this is an obviously one-off effort and the open sourcing was just to share it with us fine folks so we know it can be done and maybe add a few tools to our boxes. I certainly wouldn't expect any maintenance on this project.

Again, I know what you mean, I've seen it, and it's lame but I see this as an exception where it makes sense.

Re: Path menu in pure CSS3

#46

Post by risratorn » Mon, Dec 05, 2011, 9:20 AM UTC

fooandbarify wrote: post #35

billpatrianakos wrote: post #34

Earlier quoted context omitted.

I hope this isn't dumb but what does "s/Webkit/moz" mean? To answer the poster above you, it would work by adding "-moz-propertyname" not removing the "-webkit" stuff. Each browser will ignore the proprietary prefix that doesn't apply to them and then apply the CSS to any style that is prefixed for them or the official implementation. So you can put prefixes for all vendors in your rules and the browser will choose t…

Not dumb at all! It's a common shorthand around here because in vim (and presumably other text editors) that is the syntax for replacing strings - in this case, replace "webkit" with "moz". It was a useless comment on my part. What I meant (and should have said) is that merely removing the vendor prefix "webkit" wouldn't make it work with Mozilla, but replacing it with "moz" probably would. (I'm not certain about the…

might be easier to remember for non-vi users when you use the term [s]ubstitute instead of replace, makes more sense ... :D

(another uselss comment tho)

Re: Path menu in pure CSS3

#47

Post by billpatrianakos » Mon, Dec 05, 2011, 9:21 AM UTC

alexchamberlain wrote: post #43

billpatrianakos wrote: post #34

Earlier quoted context omitted.

I hope this isn't dumb but what does "s/Webkit/moz" mean? To answer the poster above you, it would work by adding "-moz-propertyname" not removing the "-webkit" stuff. Each browser will ignore the proprietary prefix that doesn't apply to them and then apply the CSS to any style that is prefixed for them or the official implementation. So you can put prefixes for all vendors in your rules and the browser will choose t…

I would love to see this in LESS, but how do you overcome the loops?

I'm not exactly sure what you mean by "loops". Can you clarify? Maybe it's because I'm not very familiar with SASS or SCSS. If what you mean is how do you go about not having to repeat certain properties I'm thinking of just simple mixins. Something like:

    .circle-outlines-star (@radius: 15px) {
        -o-border-radius: @arguments;
        ...other prefixes, shortened for brevity...
    }

Then you'd just add that in wherever you want some radius like so: .star-container { .circle-outlines-star(optional radius override here); ...and more styles... } Yeah, super simple and just off the top of my head but hopefully I addressed the question about loops. I don't know if you mean loops in code or literally like spinning animated loops. It's like 3am, got insomnia, and I'm effing commenting all night. Shoot me.

Re: Path menu in pure CSS3

#48

Post by alexchamberlain » Mon, Dec 05, 2011, 9:28 AM UTC

billpatrianakos wrote: post #47

alexchamberlain wrote: post #43

Earlier quoted context omitted.

I would love to see this in LESS, but how do you overcome the loops?

I'm not exactly sure what you mean by "loops". Can you clarify? Maybe it's because I'm not very familiar with SASS or SCSS. If what you mean is how do you go about not having to repeat certain properties I'm thinking of just simple mixins. Something like: .circle-outlines-star (@radius: 15px) { -o-border-radius: @arguments; ...other prefixes, shortened for brevity... } Then you'd just add that in wherever you want so…

My question was... The code on which this example is based uses SASS loops. Given that LESS hasn't got support for loops, how would you generate the required classes etc?

I think you answered that question...

Re: Path menu in pure CSS3

#49

Post by ajanuary » Mon, Dec 05, 2011, 10:11 AM UTC

gue5t wrote: post #24

alex_h wrote: post #12

Can someone enlighten me as to why "pure CSS" is seen as the pinnacle of web design? It seems that for problems involving a computational element like this, Javascript would be much more concise and readable. Having said that, it is beautifully done.

Javascript is turing-complete. That's a /lot/ of power and that means that security-conscious users (especially given the proliferation of more-powerful JS apis allowing the possibility for exploits in file, GPU, etc. access, along with JIT-enabled exploits as opposed to the old simple interpreting) will have it turned off whenever possible. Using CSS for non-turing-complete interactions which are limited in their co…

It has nothing to do with turing completeness.

More complexity leading to bigger surface area for potential attacks, yes. GPU and file access, yes. But nothing to do with turing completeness.

Here's a non turing complete language I wouldn't like to be able to run in a web context. It has a single command: rm {path}

On the other hand a turing complete language that has no access to any IO, DOM manipulation etc. I would be perfectly happy to let run.

It isn't the power that comes from turing completeness that makes javascript a potential security vulnerability, it's the interactions it can have outside of computation.

Re: Path menu in pure CSS3

#50

Post by robin_reala » Mon, Dec 05, 2011, 10:44 AM UTC

_victa wrote: post #18

Flam wrote: post #3

Earlier quoted context omitted.

I came to write this. It's a nice experiment anyways.

If you watch the source here : https://github.com/Victa/path-menu/blob/master/sass/app.scss // Generate keyframes // Sass interpolation doesn't work with keyframe. CF : https://github.com/nex3/sass/issues/46 // so I use a tricks ==> "appear-'#{$i}'" - And it doesn't work in Firefox. It's impossible to generate @-moz-Keyframes + interpolation with Sass yet. That's why the experiment works only in Webkit.

Fair enough, but my instinct at that point would be to dump Sass rather than restrict an experiment to one browser.