Programming Languages

Roger Cheng

Codecademy “JavaScript” notes

The Codecademy class for Javascript covers a lot of ground. It teaches the JavaScript language alongside some programming fundamentals. I thought it was a decent introduction but it’s hard to gauge what it would look like to fresh eyes.

A side effect of the style meant the pacing can be frustrating when I’m already familiar with programming but not familiar with the JavaScript specifics. Some places would have a lot of repetition on general concepts I knew (“yes, yes, move on”) and followed by a brief mention of something uniquely JavaScript (“wait, I wanted more information on that.”) before moving on. Example: JSON.

The class covered some basics of object-oriented programming, but not much explanation on the why behind it. In the context of simple programming exercises, OOP looks like unnecessary overhead. Maybe the creators of the class decided that is out of scope. People will learn about organization and object hierarchy as they get exposure to more complex tasks sometime down the line.

As a C/C++/Java/C# veteran, I look upon JavaScript’s type system with some suspicion. It is extremely flexible, which can be very powerful when used correctly, but it seems very easy to shoot myself in the foot. The fact that most efforts to improve JavaScript (Dart, TypeScript, etc.) introduce a stronger type system tells me I’m not alone in this suspicion.

In the web world, where projects are built on top of a set of libraries talking to each other via JavaSript, the type system means there’s nothing really keeping one library from trampling all over (uh… “adding features to”) the types defined in another library. The chaotic churning of types sound like a very tough class of problems to debug. That’s the theory, anyway. I expect real-world practice to be one of three possibilities:

  1. It’s under control: There are conventions in place, or maybe there are tools to manage it, or at least debugging aids to detect chaos in progress.
  2. It’s not a problem: Despite my paranoia, in practice just because the type system is flexible doesn’t mean it is abused.
  3. It’s exactly as bad as you think it is. We deal: Oh I hope it’s not this one.
Roger Cheng

Codecademy “HTML & CSS” notes

UPDATE: Codecademy has revamped their introductory “HTML & CSS” class. The notes below reflect the old version which is no longer available.

Just finished the Codecademy “HTML & CSS” class. It helps me get a feel of how Codecademy lessons are organized. There is a lot of overlap in material with the “Make a Website” class I finished earlier, but their structure is different.

“Make a Website” is focused on the goal of the AirBnB-like page they advertised up front, and the steps are laid out to reach that goal. While it starts with basic HTML concepts, it doesn’t go into HTML areas not relevant to the goal. It’s also happy to deviate from basic HTML in service of the goal, using the Bootstrap framework instead of getting mired in the complexities of handcrafting HTML layout.

“HTML & CSS” is less focused on the goal (though it does have mini-goals in each of the units) and so has fuller coverage of basic concepts. On the CSS side, I liked the fact it gets into more gritty details of layout, but far short of what I can do with Bootstrap. There’s still a sizable gap in my understanding before I can explain how Bootstrap does the layout magic it does with just CSS.

There’s a lot more repetition in the “HTML & CSS” class. Since it was mostly review for me, the repetition got very tiresome. I’ll keep this in mind when we get into things new to me, perhaps I’ll appreciate the repetition for new concepts.

Roger Cheng

Unexpected find: ThingLink and its business

A Science News article online experimented with interactivity not possible in their print edition. It was fairly simple at first glance: when a cursor hovers over certain places in the image, additional information pops up. Seen all over the web, like the little pieces of trivia behind bing.com background picture of the day.

What caught my attention is the link in the corner: “Made with ThingLink, Learn More” What I had thought was a simple piece of HTML is actually a business built around the concept.

A brief exploration found that ThingLink hosts the image (and associated server storage and bandwidth) plus the interactive scripting. The package of content is then available to be served alongside content hosted elsewhere, such as WordPress.com. I can embed a ThingLink right here in this post, if I had something interesting to show.

There’s a basic level of the service for free. To make money, they sell higher tiers with features like customization, branding, and analytic information. I’m ignorant on how this information might be valuable, but ThingLink has an idea: they believe the full set of features is worth over $200/month to some people.

So definitely not just a trivial piece of HTML. It is the tip of the iceberg of a corner of web commerce I didn’t even know existed before today.

Roger Cheng

Peek under the hood of Bootstrap

After completing Codecademy’s “Make a Website” lesson, I decided to go explore a side track to look under the hood of the Bootstrap framework used in the lesson. I’m not going to dive deep (yet), but I wanted to break it down into a short list of names I expect to encounter again as I explore.

The actual run-time components of Bootstrap appears to be two Cascading Style Sheet (CSS) files and one JavaScript (JS) file. One of the two CSS files is an optional theme. This confirms that Bootstrap has no client-side requirements, just a web browser that can understand standard CSS & JS files.

On the developer side, things get more interesting.

Grunt is the build system used by the Bootstrap project to build the project code, the documentation files, and run the unit tests.

It’s not clear if the JavaScript files are worked on directly, but the CSS is definitely not. It is done with Less and compiled to CSS. Some parts in the documentation listed “Less/Sass” implying Sass is a similar thing. Maybe look into this later.

Once the product is rebuilt, the JavaScript code is automatically reviewed by JSHint. Then tests are executed in the PhantomJS headless JavaScript runtime orchestrated by QUnit testing framework for JavaScript.

The product documentation pages were generated by Jekyall. Don’t know what the input for Jekyall would look like, but the output is static HTML pages. It claims to be the engine behind GitHub pages, so I know I’ll run into this again when I explore GitHub.

Several package managers were listed. Looks like NPM is required for actually working on Bootstrap itself, though it can also be used for projects consuming Bootstrap. Bower and Composer are two other package managers that seem to apply only to Bootstrap consumers.

That’s the first cut. Some things are still fuzzy, and some things I thought were clear may actually be wrong. We’ll see!

Roger Cheng

Codecademy “Make a Website” notes

I’ve just completed the “Make a Website” lesson on Codecademy, because it made sense to start at the beginning and (re)learn the fundamentals. I knew some simple HTML going in so I had expected part of it to be review and part of it to be new material.

The review part was expected: the lesson went over basic concepts of HTML tags and their hierarchical structure, then went into fine-tuning appearance via CSS.

But the new material was a surprise. After the CSS unit completed teaching about backgrounds and borders and spacing, it promised the next unit is about content and page layout. I thought “OK, good, now we’re getting into stuff I don’t know.”

The next unit began by introducing the Bootstrap framework to manage page layout. It was still an informative and fun interactive lesson, but I was left disappointed by the departure from HTML fundamentals.

It felt incomplete, like a math class that skipped doing addition with pencil and paper and instead going straight to using a calculator. Yeah, I’m probably not going to do it by hand ever again, but I wanted a lesson to teach me how to do it at least once. I would have preferred the lesson to go a bit into doing HTML layout the hard way, then say “Now that you know how to do it the hard way, let’s do it the easy way with Bootstrap.” Doing it both ways would give me a better feel of how HTML layout works and how Bootstrap makes it easier.

The Codecademy lesson worked as advertised, I’ll just have to fill this hole in my knowledge with something else.