6 ms·

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

by habosa 12y ago

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/ 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.

spb 12y ago
Yeah, I'm looking to make a site / subreddit sometime soon that is designed around this kind of answer / solution to users' problems.
- ibisum 12y ago
  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 ?
  - nathancahill 12y ago
    No, it's just combining the :before class with attr(), and then styling it with width: 50%. No secret sauce, just a creative hack.
  - pjc50 12y ago
    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.
    - sanderjd 12y ago
      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.
- scott_s 12y ago
  How would it differ from Stack Overflow? (I'm not being snarky, but asking a real question.)
  - tomf64 12y ago
    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.
StavrosK 12y ago
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?
- justinpaulson 12y ago
  It's a github page, so it is probably using jekyll...http://jekyllrb.com/ http://jekyllrb.com/
  - StavrosK 12y ago
    Isn't Jekyll more for blogs? Also, Github pages are just static HTML, why is Jekyll more probable?
    - justinpaulson 12y ago
      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.
    - pjc50 12y ago
      The github pages intro documentation reccomends using Jekyll; it's built in somehow.
- dsilver 12y ago
  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 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 https://github.com/peachananr/onepage-scroll [1] http://prismjs.com/ http://prismjs.com/
  - 12y ago
josephschmoe 12y ago
Github post came up the next day actually. He's done a couple commits too. Who am I kidding? It's still awesome...
smackfu 12y ago
You can see the revision history: http://stackoverflow.com/posts/23569710/revisions 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.
sytelus 12y ago
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/index.html https://github.com/emisfera/Splitchar.js/commits/gh-pages/in...
- habosa 12y ago
  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.

by habosa 12y ago

spb 12y ago

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

ibisum 12y ago
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 ?
- nathancahill 12y ago
  No, it's just combining the :before class with attr(), and then styling it with width: 50%. No secret sauce, just a creative hack.
- pjc50 12y ago
  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.
  - sanderjd 12y ago
    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.
scott_s 12y ago
How would it differ from Stack Overflow? (I'm not being snarky, but asking a real question.)
- tomf64 12y ago
  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.

StavrosK 12y ago

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?

justinpaulson 12y ago
It's a github page, so it is probably using jekyll...http://jekyllrb.com/ http://jekyllrb.com/
- StavrosK 12y ago
  Isn't Jekyll more for blogs? Also, Github pages are just static HTML, why is Jekyll more probable?
  - justinpaulson 12y ago
    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.
  - pjc50 12y ago
    The github pages intro documentation reccomends using Jekyll; it's built in somehow.
dsilver 12y ago
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 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 https://github.com/peachananr/onepage-scroll [1] http://prismjs.com/ http://prismjs.com/
- 12y ago

josephschmoe 12y ago

Github post came up the next day actually. He's done a couple commits too. Who am I kidding? It's still awesome...

smackfu 12y ago

You can see the revision history: http://stackoverflow.com/posts/23569710/revisions 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.

sytelus 12y ago

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/index.html https://github.com/emisfera/Splitchar.js/commits/gh-pages/in...

habosa 12y ago
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.