Hacker News Reader

Comment by habosa | Hacker News Reader

I've never seen such polished and thorough answers to a question like this. One answer (not even the accepted answer) made a plugin and a beautiful website to go along with it: http://emisfera.github.io/Splitchar.js/

Pretty amazing that our tools are getting so good that someone can quickly whip up an open-source plugin and splashy, hosted website for a SO answer.

View on HN

You can see the revision history: http://stackoverflow.com/posts/23569710/revisions

For a popular question like this, it's kind of like an arms race to see who can get the top answer. People keep one-upping themselves.

Slow down before you give too much credit to tools. Guy has put lot of work in "whipping" up a beautiful website. Much of this seems to be hand coded. Example: https://github.com/emisfera/Splitchar.js/commits/gh-pages/in...

I wasn't saying it wasn't hand coded, I meant tools like Github pages and JSFiddle and syntax highlighters and all of the things that allow us to move so quickly from prototype to publish.

How do people make sites this beautiful for a small plug in? Is there a framework, like Bootstrap 3 or something? How does it work?

It's a github page, so it is probably using jekyll...http://jekyllrb.com/

Isn't Jekyll more for blogs? Also, Github pages are just static HTML, why is Jekyll more probable?

I thought default for github pages was jekyll now...

It was originally more for blogs but it can be used for lots of things. We use it to serve our style guide and API documentation.

The github pages intro documentation reccomends using Jekyll; it's built in somehow.

This one in particular uses the jQuery onepage-scroll plugin [0] for the scrolling effects, prism.js [1] for code syntax highlighting and some plain HTML and CSS. Here's the complete code: https://github.com/emisfera/Splitchar.js/tree/gh-pages.

In reference to some other comments on this thread, this isn't built using Jekyll. GitHub pages supports pure static sites and Jekyll-powered sites if you put either on the gh-pages branch of the repository.

[0] https://github.com/peachananr/onepage-scroll [1] http://prismjs.com/

You're right, thanks. I'm finally home and managed to look at the source, it doesn't use Bootstrap. The author built it all from scratch. Kudos to him.

I didn't even realize it scrolled until I saw your comment and went back.

Hiding your content below the scroll and having a single, tiny, ambiguous, low-contrast visual indicator that more information is below seems to be "the in thing" in web design in 2014.

It appears at least in part inspired by zombo.com.

What isn't!

I'm a bit confused. Here's what it looks like to me: https://imgur.com/8zSglOv

No buttons do anything when clicked, and I can't scroll. Latest Firefox and Chromium on Ubuntu. Am I missing something or is it broken for me? Can anyone show me what it's supposed to be like?

You might be using HTTPS Everywhere which is blocking jQuery and some other stuff from loading since he hard coded them as a HTTP url. Try opening it up in Incognito or another browser without HTTPS.

That was it, I feel silly now. Thanks!

Yeah, I'm looking to make a site / subreddit sometime soon that is designed around this kind of answer / solution to users' problems.

sometime soon, lol!

for my part, i wonder if these guys with the deep chi on css are probably .. correct me if i'm wrong .. using the source? i.e. do you get some sort of insight by observing how css is handled, in some source somewhere, or .. how ?

No, it's just combining the :before class with attr(), and then styling it with width: 50%. No secret sauce, just a creative hack.

No, they just have a very thorough understanding of the box model and all the different selectors. There's quite a lot of pieces and they can interact in many ways; some people just have the right mindset to solve that puzzle.

Is there a good advanced css book (or other long-form resource), or do you just have to read specs at this level? I feel like I have "known" CSS reasonably well for quite some time, but have never attained the level of depth it takes to really grok all the ways the puzzle pieces interact with one another.

How would it differ from Stack Overflow? (I'm not being snarky, but asking a real question.)

Maybe I'm misinterpreting but I assumed the subreddit would be a collection of answers like this instead of a place to ask them which would be super cool and helpful. Not sure if that's what's meant though.

Github post came up the next day actually. He's done a couple commits too.

Who am I kidding? It's still awesome...

Reply on news.ycombinator.com