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.

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.

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!

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.

War of Currents… again?

Every engineering degree covers electricity, it’s kind of important to everything engineered by man. Same with a science degree: electrical interactions are a large part of nature. In chemistry, biology, and propagating to all the other sciences.

Outside of scientists and engineers, most college physics courses would cover electricity, at least the principle differences between alternating current (AC) and direct current (DC).

Even outside of that, AC vs. DC gets mentioned in the occasional web comic.

As part of any coverage of electricity, there would be a chapter, a footnote, or some mention of the War of Currents: An ideological battle between backers of each form of electrical power, each convinced their side is superior to the other. The history lesson usually concludes with AC winning the battle around 1900. As AC works better with our power generation, power transmission, and power consumption.

Or more precisely… AC works better with power generation/transmission/consumption technology of 1900. The world has changed a lot since.

Machinery of 1900 run on AC, but modern electronics run on DC.

Old inefficient lights run on AC, but modern LED lights run on DC.

Coal-burning power plants churn out AC, but solar panels generate DC.

We never had a practical energy storage mechanism with AC, electric batteries have always been DC.

We tolerate AC-DC conversions on all of these things. Computers have an AC/DC power supply brick. LEDs make similar conversion. Solar panels have to use an inverter to convert their DC output to AC for use. All because our power grid is AC. And that’s not going to change for as long as AC is superior for power transmission.

But today I learned that, thanks to advancing technology, the economics of long-distance power transmission is tilting in favor of DC.

This is very interesting, because photo-voltaic solar power plants need a lot of real estate so they tend to be out in the middle of nowhere. A big factor in the economic viability of such projects is long distance transmission of power to population centers.

Combine the two, and it looks like all the pieces are in place for DC to make a come back.

I’ll be watching this space with fascination.

WordPress clients everywhere

The first step of documenting my experience on WordPress is… talking about WordPress itself. Self-referential, yes, but it actually served as a great introduction into a different mindset: Software as a Service (SaaS).

WordPress is itself a content management system designed to run entirely over the web. Not only is the content stored on a remote server, the management UI (like the text editor I’m typing this in) is served by the WordPress service over the web. There is no application to install on my computer. When I want to work on my WordPress site, I use my web browser.

SaaS is gradually taking over a lot of the software world, and as a Windows developer, I’ve been missing a lot of the action. It’s time to get to know this new cloud-based world. A world where the service is available anywhere there’s a web browser, because a browser is all the client software you’d ever need.

Or… is it?

It turns out the client-side software concept is not dead, not quite. And not even at WordPress. While it was no surprise to learn that WordPress have mobile apps to access the service on iOS and Android, I was greatly amused to learn they have also introduced desktop client software for Linux, MacOS, and…. Windows.

Yep, Windows client software.

What is old is new again.