Learning web development is pretty interesting

Well, I've been learning website development for the past year now and that includes design and programming. Never touched JavaScript before this and I find it quite interesting. Sometimes the best way to get something you learned to stick in your head is to try to explain it to others.

Even though I was quite familiar with HTML and CSS before I entered school, I have continued to learn new things about it since that sometimes make me feel amazed at how I was just scratching the surface of it. Many things that seemed intimidating to get into turned out to be quite simple and gave me access to interesting tools of the trade.

I will now share with you some notes

Notes about HTML

HTML has apparently gone through some improvements since I first started fiddling with it ages ago. There are now many useful new tags that help define the content's purpose and avoid creating a div-soup where you are unable to distinguish the many divs apart. I will name a few, but you can easily see the full list on W3Schools (all the tags from HTML5 are indicated with a red little "5" icon).

  • <header> and <footer>
  • <main> defines the main content
  • <section> indicates sections
  • <nav> for navigation
  • <figure> is good for adding pictures with captions (you can use <figcaption> within it to add caption

Not only does it make it easier for you to scan over the code when you use these tags, but it also greatly improves accessibility to your site for users that rely on screen-readers (both blind or visually impaired users). Keep in mind that Google is the ultimate blind user, and you will most likely want Google to be able to access your site so it'll appear in their search.

  • You should always use alt="" in your image tags, leaving them empty will make screen-readers ignore them. You should not add any description to the image if you have caption under it (else you would be forcing the screen-reader to repeat itself).
  • Just using the right HTML5 tags instead of countless divs. Having well structured content will already improve accessibility to your site without needing to go the extra mile
  • You can use tools like WAVE Accessibility Evaluation Tool to quickly check how accessible your site is. You mainly need to keep an eye on the red errors rather than being worried about minor issues.
    • If you really want to dive into accessibility and have elements on your website that the standard HTML tags wont define them well enough, then check out ARIA (link). It is a special web suit that increases accessibility for screen-readers.
  • Use headings (h1,h2... ) correctly and not based on it's default font-size because styling that should be done with CSS.
    • <h1> should only appear once per page (for website title for example) and then go by importance (for example <h2> for declaring navigation, <h3> for section titles and <h4> for sub-headings within sections/articles and so on).

Notes about CSS

  • Your new best friend is 'box-sizing' because it eliminates the pesky inconsistencies when dealing with height and width of elements, so if you tell a element to be 100px wide, it will stay 100px even if you add padding or borders.
  • You can Animate with CSS! seriously, without touching any JavaScript. check it out
  • It is very handy to use the EM and REM units when designing, it is based on font-sizes. EM is relative to the fontsize of it's parent element, 1em = the parent's element font-size, but this makes it scale easily. REM however is very consistent since it is based on the font-size of the base 'HTML' element itself.
  • SASS (or SCSS) is a super handy compiler that lets you compose CSS without the extra repetitive work. It lets you make variables and even includes special functions, generally making it simpler to code and makes your life easier as a developer. It then compiles whatever you write into a normal CSS file that you can use. check it out

Notes about JavaScript

JavaScript was created by Brendan Eich in 1995. Even though we generally talk about using JavaScript, the word itself is trademarked by Netscape (where Brendan worked at the time), so the standardized version of it is officially known as ECMAScript, ECMA stands for European Computer Manufacturers Association.

I was also told that Java is as related to JavaScript as ham is to hamster

  • Functions can be values
    • Factory functions is any function that returns a (presumably new) object without using the keyword 'new'
    • Callback functions are functions passed as an argument into another function (using it as a value)
    • Higher order function is a function that takes a function as an argument (callback functions), or returns a function
      • .filter() lets you filter
      • .sort() lets you sort
      • .map() allows you to transform the item
      • .reduce() reduces a list into a single value
  • Functional programing makes use of pure functions and function composition
    • Pure function will always give the same results when given the same input. It is self contained and does not refer to anything outside of itself (therefor having no side effects).
  • Object Oriented Programing (OOP) is using objects to store information, such as APIs, and working with those objects
    • Inheritance is a way to create objects with properties it inherits from it's parents.
    • Composition is a flexible way of doing OOP, where you assemble objects based on what they do.
  • Javascript is originally without classes, but it got introduced in ECMAScript6 and are therefor a relatively new feature. They work well with OOP and inheritance. Creating prototypes is simple with constructors but you need to create them with the keyword 'new' which can be tricky to work with, it makes it difficult to do composition with them.