Pure CSS – Lace • Hacker News Board

Re: Pure CSS – Lace

#91

Post by lol768 » Mon, Nov 04, 2019, 9:23 PM UTC

dmix wrote: post #87

blowski wrote: post #20

Earlier quoted context omitted.

She mentions on the GitHub repo that she only coded for Chrome. > Because of the artistic nature of this project I have not concerned myself with cross-browser-compatibility, so the live preview will most likely look laughable in anything other than chrome.

Works fine in Firefox except for the really nice brown iris design. I'm curious why that one part doesn't load (not that curious I would find out myself though :P).

For the curious: the artist used "repeating-conic-gradient()" which (along with conic-gradient) only works in Webkit browsers: https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-c...

Re: Pure CSS – Lace

#92

Post by alexwolfe » Mon, Nov 04, 2019, 9:29 PM UTC

One of the most amazing things I have seen in a long time. The patience alone (not to mention the insane skill level) is off the charts.

Re: Pure CSS – Lace

#93

Post by ruffrey » Mon, Nov 04, 2019, 9:41 PM UTC

To get a sense for how this is done, one can use the Inspect Element tool in the browser, Pick an Element from the page, and either highlight it or delete.

Re: Pure CSS – Lace

#94

Post by scrozier » Mon, Nov 04, 2019, 10:00 PM UTC

gamman wrote: post #30

Narushia wrote: post #12

.iris { display: none; } :)

If you do the same with `.eye`, instead of empty eye holes you see closed eyelids. So apparently there's even more work than initially meets the eye.

No pun intended?

Re: Pure CSS – Lace

#95

Post by jacquesl » Mon, Nov 04, 2019, 10:17 PM UTC

newsbinator wrote: post #10

Not a dig, just found it interesting how this looks in Safari: https://i.imgur.com/z2vHvND.png

It looks normal on mobile safari.

Re: Pure CSS – Lace

#96

Post by swader999 » Mon, Nov 04, 2019, 11:47 PM UTC

robin_reala wrote: post #35

danso wrote: post #25

Having been inured to loading 100KB-200KB of boilerplate CSS for a web project, I'm just amazed that the raw CSS for this is 43KB, un-minified: https://github.com/cyanharlow/purecss-lace/blob/master/style...

Developers don’t care about performance, and haven’t for multiple years now. Multi-megabyte JS packages for normal websites are visible across most of the web, and no-one tests on the actual problem devices which are low- to mid-range android phones on slow connections.

A lot is cached but agree it's still a valid concern.

Re: Pure CSS – Lace

#97

Post by pier25 » Mon, Nov 04, 2019, 11:47 PM UTC

ogre_codes wrote: post #85

mtarnovan wrote: post #81

Earlier quoted context omitted.

I think you're missing the point. We're not comparing Safari with IE6 -- that would be absurd, we're just saying Safari compares to it's peers (Chrome, Firefox, heck, even Edge) like IE6 used to compare to the other browsers back in the day: stuff would mostly work on everything else but always needed special attention/polyfills/workarounds for IE. On the project I currently work on the codebase is _littered_ with wo…

> we're just saying Safari compares to it's peers (Chrome, Firefox, heck, even Edge) like IE6 used to compare to the other browsers back in the day Again, this is nonsense. There is a gap, but it's not bending the shape of the web or costing the average developer hundreds of hours to work around bullshit. Safari is behind on some features... no doubt at all. But to compare that to IE 6 is just wrong.

> it's not bending the shape of the web

Safari for iOS (and Apple in general) is bending the shape of the web. For example the poor support for PWAs.

Re: Pure CSS – Lace

#98

Post by [deleted] » Tue, Nov 05, 2019, 12:00 AM UTC

restlessmedia wrote: post #46

Narushia wrote: post #12

.iris { display: none; } :)

Even make her perform a very awkward wink. setInterval(() => {var style = document.getElementsByClassName("iris")[0].style; style.display = style.display != 'none' ? 'none':'block'}, 2000)

[deleted]

Re: Pure CSS – Lace

#99

Post by technotarek » Tue, Nov 05, 2019, 12:01 AM UTC

Narushia wrote: post #12

.iris { display: none; } :)

My blink 7-8 years ago. Pretty crude, but was fun to learn CSS animation. For smaller mobile, use landscape mode:

https://technotarek.com/human

Re: Pure CSS – Lace

#100

Post by lucasmullens » Tue, Nov 05, 2019, 1:02 AM UTC

danso wrote: post #25

Having been inured to loading 100KB-200KB of boilerplate CSS for a web project, I'm just amazed that the raw CSS for this is 43KB, un-minified: https://github.com/cyanharlow/purecss-lace/blob/master/style...

If you open up the raw CSS file and pop open DevTools, the raw CSS is only 9.9KB after gzip. A minifier could probably make that a bit smaller too.