Web Dev Drops: Getting Tools Ready
Between back in 2007 and 2008, I bought a book from O’Reilly publishing called * HTML & XHTML: The Definitive Guide*. This was an important reference book that I almost read cover to cover. I say almost because I started to get the urge to read less and do what I had to do.
Fast forward after slow starts and stops to 2009 and that’s when I realized that for the 680 pages that were part of the sixth edition of this work, I was seldom using most of the features ofthe XHTML specification. Now keep in mind, mid to late aughts was a time before HTML 5 came along and simplified things given that XHTML 1.1 was going to make things even more difficult and stricter for developers to be able to write and do the wacky things that they wanted to do back in the day (like take web tech to make “apps” for mobile devices like the iOS, Android, and Firefox OS smarpthone operting system platforms).
And what I was interested at the time, such as audio/visual file embedding, SVG file rendering support, 3D graphics, web fonts, and more fancy CSS visual features, was something of a pipedream and would only be possible through heavy, and I mean heavy, JavaScript tinkering.
And that meant programming, something that I merely understood to be something only stable and consistent if you were writting desktop applications but for the web, JavaScript was slow, cumbersome, unreliable, and something I casually as a non-programmer would care to even touch.
On top of this I didn’t ahve anyone that would be patient or effective at teaching me anything and it would be roughly five years before YouTube would be sufficiently useful for people to easily make tutorial videos to get into the nuts and bolts of what would be necessary to learn of JavaScript or of anyone willing to write free ebooks and post them online such as Eloquent Javascript.
So I stayed away, conformed with basic XHTML and CSS knowledge and retreated. This was further accelerated when it came to learning PHP in where I just didn’t undrestand and I felt things were getting even more confusing.
Then it came to a point of asking myself of why bother if I wasn’t really planning to write a back-end for some database driven application for a website, nor was I thinking of making a web application of any kind of which I was going to be able to afford the server costs - nah, HTML and CSS was fine.
But JavaScript, I knew at the time, if mastered effectively, would be enough to then allow me to have a strong foundation for understanding things such as the AJAX model (Asynchronous JavaScript + XML) . But I stayed away form that because that was even more so, intimidating and not something I was quite interested in.
Web Design Kept Calling
And just as I was going to give up on web development, there was one thing, however that got me always interested and coming back: web design.
Web designers were during the late aughts designing some of the most interesting websites and were tinkering with a lot of methodologies to get the kinds of fonts, images, and effects to be made possible to then have the desired effect of, in effect, making art out of just HTML, CSS, and Javascript.
That as a big deal for me.
I would hear on and off about the rumors of one day being able to use web fonts and not have to settle for just whatever a OS system’s font library installation instance per client to hope that the website’s typography would not make the website overall look terrible.
And that with CSS, you can stop using so much Photoshop and more web tech to do customizations to images for the effects desired.
But there was more: embedded video.
Stage 6 and DivX
There was a website that DivX, Inc. would use to showcase their video codec and container called Stage 6. Stage6 was a very expensive website to run at the time, so much so that the website would only be around for a couple of years until it would close down shop Link
This website was a boon for some people because it allowed for people to get glimpses of what was, in effect, to come later when it came to the possibility to have embedded audio-visual binary file playback on a web page in Youtube after it’s acquisition later by Google in 2006 with the development of better video (VP8 and VP9) and audio (Opus) codecs along with using an existing kickass container Matroska (.mkv).
And given that there was a cross pollination, in my view as a casual user of Stage6 between DivX and Matroska, along with the fact that the most active applicators and testers were, to my knowledge, the anime fansubbing communities, the communities at doom9 forums, VideoHelp.com, and other misc places on IRC or the web, I wouldn’t be surprised that later some people would get ideas from this constant activity going on that would eventually see products that we take for granted today come to where all it takes is a simple YouTube link to share.
WebGL
Although not something that many people paid attention to during the aughts or early 2010s, the Web Graphics Library by Khronos, originally authored by the Mozilla Foundation, would later be something that Unity Technologies would later mess around with and make it part of its own gaming engine so that way you can make 3D web browser games with.
The the most successful commercial market sale based on this technology initially was the Humble Bundle Inc.’s Humble Mozilla Bundle.
The fact of the matter is that with this, many other games would come out that would later be commercially available and would make for the possibility for making, what would later be dubbed as “HTML 5 gaming” a possibility.
SVG
Scalable Vector Graphics is one of the other more interesting technologies that I dreamed that would make a mainstay to where it is a standard ingredient now to have as an option for your web design and building.
Initially used as means for early web font implementation before web font technology would finally mature, it would later become something that you can use for making scalable graphics in order to keep website looking good at fraction of the cost that it’d otherwise be required from user connection bandwidth using raster graphics.
And More, but.
There were so many interesting technologies that were being generated, remixed, tinkered with that all boiled down to one thing to make everything and anything new going on in the web possible: basic programming knowledge and JavaScript.
And in the meantime some other technologies that I was otherwise satisfied with my knowledge of have also updated and matured into becoming something worthy for a second or third look.
CSS has become more and more robust to overtake HTML completely for style rule definition and effects
Sophitocated rapid development tools such as SaSS have been developed alongside with frameworks, boilerplates, templates, and entire fonts dedicated to be symbols for building your own web user interface!
But again, in the end, it boils back to JavaScript at some point and, with that, basic programming knowledge and know-how.
So It Begins
I won’t be using an SDAT to listen to Claire Littley but I’ll make sure it’ll be in FLAC!
Tools
During the last month or so I have been setting up the following to get started with my new endeavor in refreshing in my HTML and CSS along with my learning of JavaScript and general programming education and learning:
- Text Editor (Sublime Text, becasue) [Requried]
- Git Client (Sublime Merge, because) [Required]
- Git (duh) [Required]
- Gitlab installation in Home LAN server (not needed but figured it’d be cool to have for remote storage and recall) [Optional]
- Web Browser(s) (Vivaldi and Firefox because of Blink and Gecko web engines rendering reviews)[Required]
- Bootstrap 4 (optional tool for when I need to test stuff but really optional)[Optional]
- LAMP installation (I’ve got a LAMP server on my LAN server) [Required]
- NodeJS. This isn’t in of itself necessary but it comes in handy with its inclusion of NPM. It also has a standalone JavaScript console to allow me to fiddle with JavaScript commands and scripts without having to fire up a web browser so it’s quite neat in that regard [Optional]
- Reference Resources (MDN, W3C docs, etc) [Required]
- Inkscape (for SVG creation and manipulation) [Optional]
- Fonts (I’ve got some downloaded and then of course there is Google Fonts) [Optional]
- Lewd images (because I’m bored and want eye candy) [Absolutely Optional because it’s not pro or SFW]
And that’s about it. I’ll keep you posted for any updates. Until then here’s a theme that I think fits for what I can describe with the phrase “Here I go…”