I really wanted to title this WebDev poop ;(, but something told me not to…
Hey everyone! This post is really boring.I see a few other people have been having fun with DOS and C++ and whatnot; I've been working in the opposite direction - in the wonderful world of web apps!I miss C++ :(A year and a half ago I decided to make a website that could house all the miscellanea I make - but more importantly, one that would itself be enjoyable to navigate. My original target was to have a really fluid style (since all my other websites are a bunch of blocks), with visuals that would imitate pieces of paper on a desk, covered by a moving shadow. I also wanted to support back to IE8, and mobiles.Then later on (read: a month ago) I decided that, of course, it should have an interactive cassette player, a video playing phone, a book with flip-able pages, and photos that get picked up and placed back on top of each other.Although web development has become a lot more stable over the last few years, a couple of these things are kinda cutting edge (sorry IE8) and I had a hell of time with the cassette player in particular :P - multiple different speeds, forward and reverse etc…yeah.I'll detail that one in particular since it has an amusing story behind it XDA Fable of False PromisesHTML5, introduced several years back, has a new <audio> tag which can be used to stream/play audio without using any plugins. So of course in my gleeful naivety, I figured I was to export out a 20 minute long "tape", which I could play through this. Adding to my delight, it turned out that the <audio> tag had a playbackRate property which could be used to speed up, slow down, and theoretically reverse the audio - how simple! Of course it turned out no major browser supported negative playback, nor speeds over 4x (I needed up to 25x)…and more annoyingly they all used terrible pitch correction which turned the audio into mush.Introducing the Web Audio API - the other way to do audio in HTML5. This one functions entirely through Javascript, as a high level way of decoding audio codecs into PCM and then scheduling their playback. I figured as long as I could manipulate the raw audio data I'd be able to do any speed including reverse, so this didn't seem too bad.The first issue was to get the raw data. It turned out that a pretty large number of browser versions still in use have no way to stream data using Javascript - only to download entire files. The second issue was that even if I could stream the data, the Web Audio API had no way to decode partial audio packets. Adding to the problem was even if I could download the whole 20min tape quick enough, decoding the entire thing would take around half a gigabyte of ram - not exactly mobile friendly.I ended up splitting the file into 1 minute segments, which I would download, decode and queue in sequence while the previous one plays - which limits ram usage to around 20mb.So now for the speed control! Luckily this time round there was another playbackRate variable, that behaved exactly as I wanted (any speed, without pitch correction), however it could not play backwards. I ended up handling playing backwards by simply reversing the raw audio data (which now that I think about it switches the interleaved stereo channels…oops) - but of course using Array.reverse was the wrong way to do that! For some god forsaken reason, the in-built reverse function is - across browsers - slower than a manual swap loop. ? :(So after combining all this together, fixing a multitude of asynchronous bugs (Javascript, almost entirely asynchronous but with no concept of mutexes - brilliant!), fixing all the dumb browser specific codec and function naming issues, and creating all the graphical elements, I had a working cassette player! :DThe other pages weren't nearly as bad, although the book was a bit painful at times (HTML5 canvas + PDF rendering something something border-radius bug).If any of you are curious to see the end result (it's on the Music/Songs page) you can check it out here, although a modern browser is necessary for the full razzmatazz :P(Any critiques on the website would be greatly appreciated also sorry XD)Anyway hopefully that wasn't too boring, I never know if programming rants are amusing to anyone other than the ranter :P. But yay now I can get back to ma video editor, time to add exporting!Also I be not a hipster I swear…I just like how some of ma music sounds at 0.8x speed backwards XD
The link doesn't work.
Wops fixed, thanks XD
Wow, that's a really nice website!
I may have fun with DOS and C++ sometimes, but that's After-hours stuff. Modern web development is currently what I spend half of my working day on. :P
It's an interesting design, to be sure. I like the aesthetic, makes for an interesting way to present a portfolio. The shadows are a bit jarring, both being too dark and too noticeable, they keep making me think stuff is popping up in the corner of the screen and disappearing again, and sometimes the entire 'page' darkens suddenly in a way that feels almost like an overlay is trying to pop up (Like those annoying "Subscribe to our newsletter!" windows on a lot of sites).Really nice job on that cassette player, spent a good few minutes playing around with it.Your CSS-and-Javascript-in-the-HTML nearly made me cry though.EDIT: While I'm thinking about it, if you want to have an easier time with JS, it's a good idea to look into ES2015/ES6 (Supported in most browsers currently without needing a polyfill). It allows you to avoid the unusual scoping rules and hoisting by using the let keyword instead of var, which makes a huge difference in how you end up structuring your code, in addition to a bunch of useful syntactic sugar for dealing with objects and arrays.Thanks both of you! :)
@MegaYeah, I originally had the shadow on all of the pages! Like you said it can be a bit off putting at times - I might end up removing it or at least toning it down at some point :P. I have made a Halloween version of the page however (with an interactive torch :P) and it's very effective there :DThanks regarding the cassette player :)Nice website, but it is a little laggy on my Linux PC, the one with open-source AMD drivers (which explains a lot, I guess…)
I use a bunch of frameworks on-and-off depending on what I'm doing. Generally, I try to keep dependency-hell down to a minimum though. Some of the more common things I use that are good to look at are:
> React, Vue, Angular (Great for frontend UI layout and composition, each have their pros/cons) > lodash - lots of little utility methods. Kinda like Boost, but for JavaScript > Ramda - functional programming utility library. > Gulp - task automation. Can be used for non-JS stuff too. > Webpack (This + Gulp can make for some nice automated hot-reload and packaging) > Yarn/NPM - Package and Dependency management > Typescript > Babel (Babel allows you to safely use a lot of newer JS features without worrying as much about browser compatibility).What I do with most frameworks is give myself an hour or two to "sample" them (Follow the examples/samples, try them for doing what they advertise themselves for), then file it away for future use.I'd actually recommend learning jQuery at some point. It's just a library, nothing particularly evil about it. But it's just a library. It's fully possible to do everything it does yourself - it's mostly a convenience at this point.One case in point is finding an element on the page with a CSS Selector. jQuery allows you to shortcut this:let elem = $(".my-selector");let elem = document.querySelector(".my-selector");This actually blew me away. I don't think I've seen a website quite like this before, and nothing even comparable since the Flash days. The tape player is especially impressive, but it would be nice if you could click the song titles to skip to them (despite that not being terribly realistic).
I would also like a button somewhere to turn off the shadows. It's a cool effect, but does get a bit annoying after a while.Regardless, awesome job!There are shadows omg it's haunted
Very nice, seriously.