Stop Blindly Following W3Schools!

Posted on Leave a comment

I started out learning to create websites by reverse engineering web pages that I found and liked online. The way I got started with CSS is an interesting story. I started developing static websites at a young age. I produced mostly ugly pages by myself and a wee-bit jazzy ones using something like Macromedia DreamWeaver. I hadn’t yet discovered the mystical world of stylesheets.

In the summer of 2006, it had only been a few days since France’s heart-wrenching loss in the final of FIFA football World Cup when I was absentmindedly browsing some WC pictures that I had painstakingly downloaded over my super-slow Internet connection. That delightful little folder of my favorite images was inside SUSE Linux. Whether it was version 9 or 10, I cannot remember.

As I was a KDE junkie, I naturally had the folder open in Konqueror, KDE’s default web and file browser. While scrolling through the list and mindlessly clicking this button and that menu, I stumbled across an option to generate a gallery out of images. I curiously clicked this option and, *boom*, there it was — a gallery of all photos in the folder in the form of a web page. What a beautiful web page it was. The page had supporting files, full-sized images, thumbnails, and an intriguing file with .css extension.

Clicking the CSS file opened it in my text editor. “Interesting, a .css file is only a text file,” I said to myself. Most of the contents in that file didn’t make sense to me, but there were these other pieces that seemed quite obvious such as background-color, color and font-family properties. In my reverse engineering fashion, I made a few changes here and there and refreshed the web page in browser. *Boom*, some of my changes were actually reflected. This seemingly innocuous incident created a minor explosion of curiosity in my mind.

Out came a new tab in Firefox, hastily typed were the letters “google.com” in address bar, and with a thud was hammered the Enter button on keyboard. A big search text box appeared in the next few seconds. What did I type in it? CSS, of course silly. To where did the very first search result point? W3Schools, of course silly. And so began my journey of learning CSS from the most popular web development learning resource on planet. I regret it to this day. My regretful mistake didn’t end at CSS, it was augmented by my learning HTML, advanced HTML and even JavaScript from W3Schools.

Out came a new tab in Firefox, hastily typed were the letters “google.com” in address bar, and with a thud was hammered the Enter button on keyboard.

Fast-forwarding to present times, just a couple of days ago I was listening to episode #7 (Online Resources for JavaScript Developers) of JavaScript Jabber, a popular podcast series for the lovers of the beautiful language. It was in it where a couple of web experts echoed my feelings about W3Schools. Just to be clear, when I was learning from the “great” W3Schools, I didn’t have any such feelings. In fact, I deemed every word and example on the website a work of experts, which they probably were. However, my feelings changed drastically when I “grew up” and started to discover most of my coding style that was derived from W3Schools was composed of a collection of anti-patterns.

In order to appeal to a wider section of audience and to make things simple, examples listed on W3Schools tutorials dumbed down so much that best practices were sacrificed. Take for instance their use of event handler attributes, such as onclick and onfocus, all the while blatantly ignoring the principle of separation of concerns. This was not even mentioned as a cautionary note to the initiated. Tricks and lies such as this put me back in my career by at least a couple of years.

<button onclick="var hello='world'; alert(hello);">Click me</button>

For years W3Schools piggybacked on the “W3” name to maintain its popularity. Meanwhile, other respected developer resources such as Mozilla Developer Network (MDN) took a diametrically opposite approach of going into deep discussions about each aspect of building blocks of the web. That looked scary initially, but with time your eyes and mind adjusted. I recently finished Part I and II of an exhaustive JavaScript resource called JavaScript.info. It also takes a profound approach similar to MDN’s. In fact, it encourages one to read W3C’s original specifications on various matters. Yes, it’s time consuming but hugely rewarding when applying your learning into practice.

I would like to conclude this rather loooong blog post by saying this:

Do not follow W3Schools or any such simplified online resource without questions. Be extra careful, use common sense, and do compare your learning from other (more detailed) sources. Do not let the details scare you away. Embrace detaily things. But don’t follow even the detaily things blindly.

The joy of creating in Flutter

Posted on 1 Comment

I am now officially in love with Flutter. What started as a crush has turned into something palpable. For the past 2 weeks, I have been heavily invested in learning Flutter from App Brewery’s bootcamp-style course. If there’s one takeaway from the course, it is this: Flutter+Dart is a lethal combination. I have now come to truly appreciate the ‘promised’ language for frontend and the frontend itself.

I must confess, though. I did not hold the same feelings for Flutter in the beginning. At a couple of meetups, I have called Flutter all sorts of blasphemous things — difficult to learn, highly inconsistent, and a confused approach — all without closely working with it. I, however, assure you that Flutter is none of the above. On the contrary:

  • its composition-over-inheritance approach makes it easy for beginners,
  • its Widget-oriented design makes it consistent, and
  • Dart’s succinct and familiar (JavaScript-like) syntax makes things less confusing

The App Brewery course I mentioned before has been an eye-opener. The course itself is pretty long and exhaustive, but rewarding. Since it’s geared toward absolute beginner programmers, I was able to go through it at 1.5x playback speed and even skipped a few sections. I am currently at 64%, hoping to complete it by the next weekend.

During this time, I customized my VS Code quite a bit to my liking (this post’s featured image), so much so that creating Flutter apps in Code is a far more pleasant experience as compared to officially recommended Android Studio. This, of course, is made possible by the awesome Flutter team who does not want to tie developers to Google’s ecosystem.

If you are curious about the source code of the app seen in this post’s featured image, here’s the GitHub link. It’s an app called BMI Calculator that I created as part of the course. Go ahead and explore my commit history to see how easy Flutter makes creating beautiful-looking mobile apps.

Fetch API – was I living on Mars?

Posted on Leave a comment

I stumbled upon Fetch API today. It’s this simple:

fetch(url)
  .then((resp) =&gt; resp.json()) // Transform the response object into json
  .then(function(data) {
    // Do what the hell I want to do with received JSON data
    })
  })

 

Seriously! I must have been living on Mars to have not noticed it earlier. XMLHttpRequest and jQuery.ajax — time to move on, ba bye!

Coding a neural network in plain JavaScript!

Posted on Leave a comment

Sounds completely insane, doesn’t it? Mattias Petter Johansson (mpj) has done just that. The best part is that mpj is as clueless about NN’s computer science or mathematical details as probably you are. He has posted a 3-part tutorial about it on his popular YouTube channel Fun Fun Function. I like to think of it as neural networks for JS-coding dummies!

I saw the first part. It’s fun!

TypeScript, whoa!

Posted on Leave a comment

typescript-cover-image

Finally the time has come. I had been avoiding it for years. I cannot escape it anymore. Finally the time has come to learn and embrace TypeScript.

I am developing a small proof of concept mobile app at work. Creating mobile apps, especially hybrid ones, is not a big task anymore. Only this time instead of relying on trusty old Ionic 1.x, I’m using the still-in-beta Ionic 2. As you know, Ionic 2 is based on Angular 2 and Angular 2 encourages using TypeScript instead of ye old JavaScript.

The opportunistic monkey inside me is making me do this. I am on a deadline, and my common sense begs me not to break out of routine. But I am helpless. It’s the year of the monkey.

Anyway, I found this nice quick start tutorial.

Bye.ts