More tools for content development !

Intro

In the previous part of this series, I gave a lot of focus to Markdown because it is a highly useful tool for content generation by simplifying the web authoring process. That said, I have often found the need to apply HTML5 and CSS3 in order to overcome some limitation with either Markdown itself or my skill therewith. Further, since Markdown is processed into HTML (or other formats via Pandoc), the ability to utilise HTML, CSS3 and JavaScript.

Web base tech trio

In my mind, the three stooges (or amigos, if you will) of web development technologies are the combination of HTML5, CSS3 and JavaScript. I am convinced that there is a specific name for this combination of technologies, but a (presumably) exhaustive search has not turned up a name. The closest thing to an actual name that I have found is “HTML5/CSS3/JavaScript”, which isn’t great, and I think of them as the base web tech trio (for want of a better term, since I haven’t found one yet) since these are three basic (read fundamental) components to front end web development. The combination of the HTML5, CSS and JavaScript basic web development tools that control the structure, styling and functionality of web content, respectively. this page gives a brief description of how these technologies interact.

I first learnt how to use these tools at codecademy (h/t @drwasho for the push) and later found that W3Schools (a really useful place) has excellent resources and interactive self-teaching on HTML, CSS and JavaScript among other technologies.

Many, many tutorials can also be other places such as code.tutsplus.com, a cursory web search turned up one of the many cheatsheets that are exist. This is the type of content that I started with before I was able to use the “right-click/view page soure” method to directly learn from web pages that I find interesting. I am still looking for a decent shortlist of cheatsheets for handy reference, it is always good, but there is always the mighty References tab @W3Schools. As ever, I need to remind myself that I don’t need “All the cheatsheets”, just “a few good ones”.

Fonts and Images

This section is short but important as I have found that getting access to free, royalty-free images in a simple, hassle-free manner to be quite the challenge in the past as I want to do it without violating copyright (the theft ain’t worth it). For images, I have found Pixabay to be a good source of images that doesn’t try to sign me up every time I want to access an image, and it seems to have a pretty decent image library.

Similarly, fonts are something that I didn’t really think about until I started learning game programming with the LibGDX framework. I previously didn’t realise that the fonts that we use on a daily basis are copyright protected, and that we simply can’t simply take custom (and standard) fonts to use as we please. This is why I was so happy when I discovered the google fonts project, which has a set of just over 800 free and open source fonts (as at November 2016). You can use a wide variety of fonts without having to source additional fonts using standard CSS, but sometimes one seeks something a little more… funky (or polished)!

I have often found personally that fonts and images are often underappreciated assets… right until I have needed to use them, so I am grateful to have such resources handy.

In living colour

The importance of colour cannot be understated. Many times have I found myself trying to get a specific colour, and it is so important to achieve this in a simple and reproducible way. Fortunately, there are some great colour picker at places like W3Schools and htmlcolorcodes.com. Also, colour charts are an invaluable way to figure out what said colours are actually called.

Another very important aspect of colour usage is that of colour contrast. In my research for this post I stumbled upon a colour contrast tool at Paletton.com (no, not the Peloton) who also have a nice wiki page dedicated to colour and colour theory. There is another nice resource that I found at Color Safe for elabling better access to users by creating more effective text contrasts. Yet another set of resources are available at Webaxe.org.

There are many, many tools to facilitate colour selection, identification and accessibility. However, this small section will provide me with a nice starting reference for colour management, which is an important concept that is also critical for data visualisation and communication.

Conclusion

Hopefully you all enjoyed this introductory look into web design using “HTML5/CSS3/JavaScript” and how it can be used to build upon your Markdown skills to create powerfully beautiful web content. While not exhaustive, hopefully this post has given you some initial ideas for resources (if you haven’t been exposed already).

Catch you in the next post in the series… feel free to check out previous posts if you haven’t already.