mrcoles

Very cool, I love using this feature on github.

Looks like it looks for github repos, and will search up the tree and back down from there. However, this seems to mess up for me. If I go into a sub-directory in a repo and then try to open a file in the parent directory via `ctl+t`, then it tries to open that filename in the current directory, not from the parent (I'm using emacs as $EDITOR).

One other little thing, is there a way to get curses to cleanup better after itself? My terminal ends up with a relatively large blank spot after finding something, viewing it, and then closing emacs.

UPDATE: I ended up merging that in and making the ones toggle-able, and then added a toggle link into the demo so you can see both http://mrcoles.com/demo/markdown-css/

Wow, that's really similar with very similar approaches. The internet is a great way to find out you're not very original. I'll add a link to that project from mine.

cool!

It’s meant as an interesting CSS hack to make markup look like markdown, but still function as regular HTML (including having things like links still work). There are thousands of things that compile markdown to HTML, that's not at all what this does. Try clicking on the different tabs to show the different states or the demo link to the left of them—maybe that'll make more sense?

Yeah, technically markdown doesn't need the numbers to be incremented, so I thought it'd be more fun to explicitly not use counters. Maybe it's too confusing though. There's a discussion about it here: https://github.com/mrcoles/markdown-css/issues/1

What is it that you're not seeing working? screen shot of how it looks to me in opera: http://i.imgur.com/7te5TWW.png

Oh, interesting. Chrome does play nice with that.

Also, it looks like maybe you have to make the img content "", in order for the :before to work—otherwise it doesn't show up, at least in chrome, and with that demo it appears as nothing at all in firefox. It's a cruel world…

In the bookmarklet (included at top of demo) I do an extra step to make images inside links smaller and appear inside the link markdown—not what you were getting at, but it is a little something something.

Works for me on opera 12.14 on Mac OS X. What version and OS are you using?

You're using opera, right?

This was already in my code, but I commented out, maybe I should just let it be in there real quick before opera changes to webkit: https://github.com/mrcoles/markdown-css/blob/016bf0863867aed...

If not opera, lmk what browser you're using.

yeah, the \A makes a newline and the `white-space: pre` makes that work like a <br>

Mostly because it's fun in a nerdy way, and it was an interesting challenge to implement.

I decided to use it for a demos page on my site: http://mrcoles.com/demo/

Also, there's a bookmarklet at the top of the markdown-css demo that let's you apply the markdown styles to any page, which is like a harder-to-read version of readability or a quick way to see how well layed out the markup is on any page.

the after and before pseudo elements are kind of weird. I think for it to work with copy-paste I'd have to include some JS to look at the selection, reverse markdown it, and then get it into your clipboard.

The magic is the quirks in how `display: table-cell` makes it like a block, but only as wide as the text, then the pseudo element with equals signs is positioned absolutely inside. Fortunately, most browsers allow this, but firefox doesn't let things be positioned absolute inside a `table-cell`, so I make FF just fall back to `display: block` https://github.com/mrcoles/markdown-css/blob/master/markdown...

I don’t think that’s going to work, since the data URI is inherently local (and only works on Chrome), and you can’t use the Chrome file-system API or even localStorage when you're viewing a local file, unless chrome was opened with `--allow-file-access-from-files`

I think the best part is how short and elegant it is.

I assume a lot of people won’t realize you can bookmark that URL since it looks so weird. Also, once you’re bookmarking, you can cheat and put more logic into the page. I made a slightly improved one with a dark background and larger font (hard to post the link on HN, so on a separate page):

http://mrcoles.com/one-line-browser-notepad-bookmark/

I just bumped up the sampling rate to 11025Hz and that seems to have helped.

Oh dear… looks like my fix during work yesterday was too hasty. I just updated the code, and tested it in Safari with my useragent set for an ipad. Here's the diff:

- var isIos = navigator.userAgent.match(/(iPhone|iPod)/i); + var isIos = navigator.userAgent.match(/(iPhone|iPad)/i);

Thanks for letting me know it was still broken!

Unfortunately, as I said above, it will not play the music, but it will still shoot out waveforms from the piano. I spent several hours experimenting with different dataURI settings and then trying falling back to static .wav files. The latter was the most promising, but there was still a huge lag between calling .play() and the sound actually playing. Looks like you still have to rely on actual "apps" to have good sound on iOS. (If someone knows otherwise, please share!)

Thanks! I was struggling with trying to keep it super minimal looking and letting people know how it works.

If you hit "0" or the button in the top right, it'll show a dashboard with settings and info on how to use it. I make that minimize from full size during page load as a vague indicator that it's hidden up there.

Also, I don't know if anyone notices the "info" link in the bottom left that scrolls the whole page down and shows some more info?

When I get chance I'll make a quick video of using it with the looper to perform a song.

Good point, I should modify my volume functions for that. The current code is here (the wave functions live just above that in the code):

https://github.com/mrcoles/javascript-piano/blob/master/audi...

Linear fade and quadratic fade sound nice on the way out, but all start at full volume.

Nope, reasonable suggestion though. What OS and version of Chrome are you using? It's sporadic for me in OSX on Chrome 19.0. (Also, wtf is up with their ridiculously high versioning? The new browser wars seem to be based on version number.)

OK, I just updated it to not crash the ipad. As a trade off, it won't play sound, but it will still shoot out the waveforms from the bottom of the keyboard (so you can compute the sound in your head and imagine what it should sound like).

That's very possible. It works really well on Firefox 12 on a mac. Chrome on mac has periodic issues (the delayed loading of each keys mitigates it somewhat)—looks like I need to do some debugging on Linux. Thanks for reporting this.

HTML5 audio has lots of problems, but the clicking and distortion also gives it that special pop and click sound that you wouldn't otherwise get. Future browsers will just sound too robotic on this piano :)

Additionally, higher notes often get distorted as a result of the low sampling rate. I just changed it to turn on "visual mode" by default (that lightning bolt thing in the top right). You can actually see where the low sampling rate starts to affect the resulting wave form—which is sort of fun to see.

Awesome—I think you've done the first recorded song using my piano!

There's a looper too (that 2nd button, or the 9 key—hold down to start recording, lift up to stop recording and start playback) which can lead to interesting songs.

Yeah, Chrome is meddlesome. Firefox takes whatever I throw at it, but Chrome sometimes has periodic issues. I actually load the keys slowly in order to decreases the chances of crashing in Chrome.

Oops, yeah, I forgot to mention that. iOS is trouble with html5 audio. I tried making fallback audio files, but that was too slow, so I just deleted them. I should add back some support so it doesn't kill safari.

Haha, yeah, because the sampling rate is super low, in order to make the data URIs work. Turn on "visual mode" hit 8 or click on the lightning bolt, and you'll see the visual representation of each sound—and you'll see how it breaks because of the sample rate when it starts sounding weird.

So you can hit a note again when it's already playing. I cycle through which copy gets played each time you hit a specific key. Otherwise terrible stuff happens :'(

I wrote this a while ago, using some actual HTML elements—to get it to work super cross-browser: http://mrcoles.com/blog/callout-box-css-border-triangles-cro...

This is great—the write-ups are hilarious!

> When Roll grows up, he wants to be an astronaut or a game show cameraman.