Tbh, it is weird to use a templating language besides php. It has been my “go to” for so long but I kept an open mind when I started learning pug. There are some cool feature but I am just starting with it. After a few spins with it I can give a somewhat decent review.

Aside from that today was somewhat busy. It seems like this week will be a struggle but July 1st is a holiday in Canada so at least I might get that benefit. I just have to keep going and stay calm. Freaking out due to an increase in work is not going to help me. Calm, cool, collected, while being aggressive towards my goals is the plan.

TLDR;

Okay, so here are the highlights of what I did:

• ssh -> Finished going through the two videos I had left in my original playlist to learn about ssh. The last video talked about how the connection is made using TCP but could be made using websockets as well. I really want to better understand how the internet works to know what exactly that means to ssh connections. I still have so much to learn.
• pug -> Learned a bit about the templating syntax rules and how to configure the desired HTML output using the pug templating syntax. Using variables and escaping values feels odd with this tool but I may just need some time to adjust.
• Practice -> Continued working through the practice ‘Local Library’ project in the MDN ExpressJS guide. Continued on with Part 5 of the tutorial. I am going through the section covering the Basic Template library and Pug. Still have a lot to do but apparently The Odin Project curriculum calls for me to step away from the project to complete another one before I ultimately return here and continue to finish it off. So tomorrow I will be starting my work on the Mini Message Board Project

Pug Template Syntax Notes – Based on MDN Docs tutorial

Ref: – Templating with Pug – Local Library Practice Project – MDN Docs

The example template file below shows off many of Pug’s most useful features.

The first thing to notice is that the file maps the structure of a typical HTML file, with the first word in (almost) every line being an HTML element, and indentation being used to indicate nested elements. So for example, the body element is inside an html element, and paragraph elements (p) are within the body element, etc. Non-nested elements (e.g. individual paragraphs) are on separate lines.

doctype html
html(lang="en")
  head
    title= title
    script(type='text/javascript').
  body
    h1= title

    p This is a line with #[em some emphasis] and #[strong strong text] markup.
    p This line has un-escaped data: !{'<em> is emphasized</em>'} and escaped data: #{'<em> is not emphasized</em>'}.
      | This line follows on.
    p= 'Evaluated and <em>escaped expression</em>:' + title

    <!-- You can add HTML comments directly -->
    // You can add single line JavaScript comments and they are generated to HTML comments
    //- Introducing a single line JavaScript comment with "//-" ensures the comment isn't rendered to HTML

    p A line with a link
      a(href='/catalog/authors') Some link text
      |  and some extra text.

    #container.col
      if title
        p A variable named "title" exists.
      else
        p A variable named "title" does not exist.
      p.
        Pug is a terse and simple template language with a
        strong focus on performance and powerful features.

    h2 Generate a list

    ul
      each val in [1, 2, 3, 4, 5]
        li= val

Element attributes are defined in parentheses after their associated element. Inside the parentheses, the attributes are defined in comma- or whitespace- separated lists of the pairs of attribute names and attribute values, for example:

• script(type=’text/javascript’), link(rel=’stylesheet’, href=’/stylesheets/style.css’)
• meta(name=’viewport’ content=’width=device-width initial-scale=1′)

The values of all attributes are escaped (e.g. characters like “>” are converted to their HTML code equivalents like “>”) to prevent JavaScript injection or cross-site scripting attacks.

If a tag is followed by the equals sign, the following text is treated as a JavaScript expression. So for example, in the first line below, the content of the h1 tag will be variable title (either defined in the file or passed into the template from Express). In the second line the paragraph content is a text string concatenated with the title variable. In both cases the default behavior is to escape the line.

h1= title
p= 'Evaluated and <em>escaped expression</em>:' + title

If there is no equals symbol after the tag then the content is treated as plain text. Within the plain text you can insert escaped and unescaped data using the #{} and !{} syntax respectively, as shown below. You can also add raw HTML within the plain text.

p This is a line with #[em some emphasis] and #[strong strong text] markup.
p This line has an un-escaped string: !{'<em> is emphasized</em>'}, an escaped string: #{'<em> is not emphasized</em>'}, and escaped variables: #{title}.

Note: You will almost always want to escape data from users (via the #{} syntax). Data that can be trusted (e.g. generated counts of records, etc.) may be displayed without escaping the values.

Using the Pipe character (|)

You can use the pipe (‘|’) character at the beginning of a line to indicate “plain text”. For example, the additional text shown below will be displayed on the same line as the preceding anchor, but will not be linked.

a(href='http://someurl/') Link text
| Plain text

Conditionals in PUG

Pug allows you to perform conditional operations using if, else, else if and unless — for example:

if title
  p A variable named "title" exists
else
  p A variable named "title" does not exist

Loops in PUG

You can also perform loop/iteration operations using each-in or while syntax. In the code fragment below we’ve looped through an array to display a list of variables (note the use of the ‘li=’ to evaluate the “val” as a variable below. The value you iterate across can also be passed into the template as a variable!

ul
  each val in [1, 2, 3, 4, 5]
    li= val

The syntax also supports comments (that can be rendered in the output—or not—as you choose), mixins to create reusable blocks of code, case statements, and many other features. For more detailed information see The Pug docs.

Extending Templates

Across a site, it is usual for all pages to have a common structure, including standard HTML markup for the head, footer, navigation, etc. Rather than forcing developers to duplicate this “boilerplate” in every page, Pug allows you to declare a base template and then extend it, replacing just the bits that are different for each specific page.

For example, the base template layout.pug created in our skeleton project looks like this:

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    block content

The block tag is used to mark up sections of content that may be replaced in a derived template (if the block is not redefined then its implementation in the base class is used).

The default index.pug (created for our skeleton project) shows how we override the base template. The extends tag identifies the base template to use, and then we use block section_name to indicate the new content of the section that we will override.

extends layout

block content
  h1= title
  p Welcome to #{title}

Goal For Round 8 of the #100DaysofCode Challenge

This is my eighth round of the “#100daysofcode” challenge. I will be continuing my work from round five, six, and seven into round eight. I was working through the book “Cracking the Coding Interview” by Gayle Laakmann McDowell. My goal was to become more familiar with algorithms and data structures. This goal was derived from my goal to better understand operating systems and key programs that I use in the terminal regularly e.g. Git. This goal was in turn derived from my desire to better understand the fundamental tools used for coding outside of popular GUIs. This in turn was derived from my desire to be a better back-end developer.

I am currently putting a pause on the algorithm work to build some backend/full stack projects. I primarily want to improve my skills with the back-end from an implementation perspective. I have improved tremendously in terminal and CLI skills but I lost focus due to how abstract the algorithm concepts got. I wanted to work on things that were more tangible until I can get to a position where I could directly benefit from improving my algorithm skills and theoretical knowledge. So that’s the focus right now. Build my backend skills and prove my full stack capabilities by building some dope projects.

Again, I still have no idea if my path is correct but I am walking down this road anyways. Worst case scenario I learn a whole bunch of stuff that will help me out on my own personal projects. Best case scenario I actually become one of those unicorn developers that go on to start a billion dollar company… You never know LOL.