I just want to know you all, I am still alive. But, once again, other things are hindering my plans for this site, namely, a series of tutorials and other things that I’d like to present and introduce to fellow beginners and hobbyists. There is a long list written on my personal journal notebook, but I am aiming at these mentioned as my top priorities:

  • a (small) series of WordPress theme and plugin development tutorials
  • a series of web accessibility best practices (very important to everyone building sites, beginner, hobbyist, or professional!)
  • an introduction to CSS preprocessors: Sass, Less.js (or Less), Stylus

Status on my upcoming WordPress-related tutorials

I’ve mentioned before that I plan to open a series of in-depth WordPress tutorials, more specifically towards theme building and (if I really do get to it) plugin development. It’s taken me some time from that entry on how I’m going to approach them. The easiest way to do this, especially when this is all text-based, is to do a “follow along” example. In other words, I would have to build a brand-new theme (or plugin) from the beginning until the end product.

I haven’t had an LBP in awhile since I halted from my upcoming fansite 1 because of time constraints. I also had to do another refresher course on the static site generator that I planned on using, Hugo, which I haven’t even finished yet. I may even consider switching to another static site generator if I end up not being able to master basic Go/Golang (the programming language that was used to build Hugo). But, when that happens, I’ll be doing a whole lot of overhauling on the past LBP posts about this particular site.

I’m having a bit of an internal debate with myself on how I can approach this on a much simpler, more understanding for beginners and hobbyists. Should I turn it LBP-style? Or should I list out a few WordPress-related sample projects? I’ll get back to you all about this a bit later.

Web for all!

In other words, web accessibility best practices. The web belongs to all, not just for the able.

I don’t remember if I wrote a bit about web accessibility here, but I do remember writing about them somewhere. Back in the early years of public web design and development, hobbyists were getting into a trend (which really shouldn’t be a trend, but a necessity) to have all their handwritten code validated through the W3C validators, both HTML and CSS. Back in those days, it was all about XHTML. If you were considered “elite,” you would use XHTML Strict. Many use XHTML Transitional. The newest of the new is first introduced to HTML 4.0 or lower and were not even aware of XHTML.

And yet, a very small number of hobbyists actually check their sites through a set of tools, checklists, and validators also hosted by the W3C. These series of checklists and tools evaluate sites for accessibility for users with disabilities. To be more specific, those who are blind and have sight disabilities, in which they use special screen readers for them to be able to read or able to listen. I remember back in those days where these same hobbyists boast about having their sites (X)HTML validated by the W3C yet they fail to boast that their sites can be visited by users with disabilities.

And to a side note, HTML5 and CSS3 are standards now, therefore there is no excuse to boast about validated sites. In fact, there is no excuse to boast about a validated site that’s inaccessible for disabled users.

But, this also applies to professionals too. In my current job, even though it’s not tech-related, I have plenty of co-workers with disabilities (to be more specific, those with speech and hearing disabilities). They have mentioned through another friend of mine who knows sign language of their issues regarding the internet, and how plenty of public websites that still fail the W3C web accessibility guidelines. I’ve learned a thing or two about screen readers and other types of tools that would make the web more accessible to the disabled. Because of this, I’ve become inspired to introduce web accessibility here, not recently, but this happened about a year ago.

More of this at a later time, so stay tuned!

CSS Preprocessors

This is one of those things that, as hobbyists, would be really nice to have a skill, but not quite required. However, many companies today are requiring their web designers and developers to have some familiarity with at least one type of CSS preprocessor. They require this for a much faster and more efficient development when coding CSS.

Today, there are probably a few more CSS preprocessors to choose from, but the three most well-known preprocessors thus far are SassLess.js, and Stylus.

So, what are CSS preprocessors, really? How about a sample?

Below is an example of how CSS coding would look like if you use Sass. There are two types of Sass preprocessors: .sass and .scss .

This is how the .sass markup would look like:

/* A very basic Sass sample code with the .sass extension */

$bgColor: #dddddd
$fontColor: #000000

body
  background: $bgColor
  font: 'Arial', sans-serif $fontColor

And this is how the .scss markup would look like:

/* A very basic Sass sample code with the .scss extension */

$bgColor: #dddddd;
$fontColor: #000000;

body {
  background: $bgColor;
  font: 'Arial', sans-serif $fontColor;
  }

Both will generate the following CSS code:

/* The original CSS code generated from Sass */
body {
    background: #dddddd;
    font: 'Arial', sans-serif #000000;
}

Currently, I’m learning Sass, so I’m not familiar with Less or Stylus just yet, but I do plan on learning the other two as well. But from what I have read through many articles and resources, Sass seems to be the most popular.

Popular HTML5/CSS3 frameworks such as Bootstrap and Foundation were created by developers with their base CSS system using CSS preprocessors. Bootstrap’s CSS was created using Less and Foundation’s CSS was created using Sass. In turn, Bootstrap supports Less preprocessor coding (alongside standard CSS) and Foundation supports Sass preprocessor coding (alongside standard CSS). As of Bootstrap 3, the framework included Sass support. As of Bootstrap 4, the entire framework completely converted from Less to Sass.

If you have been following The NINPOJineous since its opening last year, you should recall that I have written a short tutorial for Emmet more than a year ago. There is also a CSS version of Emmet, however, CSS preprocessors are a whole lot more powerful and easier to learn than CSS Emmet. But because it took me so long to mention this again, it will also take me a long while to prepare for this tutorial.

Which should go first?

Here’s a mini-survey. Which of the three should I start writing tutorials first? It’s very tempting to do WordPress theme and plugin development, but it’s also tempting to write about web accessibility and Sass too! Any ideas?

Or, maybe, you have something else in mind that are unrelated to the three mentioned? Let me know in the comments below.

Till next time!

On the sidenote…

  1. the remake of one of my old Card Captor Sakura fansites, Cherry Blossom, Little Wolf