Templating Engines: Pug/Jade

Question 1

Adding attributes and button name to a button tag inside a form

Answer 1

form
     button(type='submit') Button Name

Question 2

creating a button with the class ‘btn, btn-danger’

Answer 2

button.btn.btn-danger

Question 3

installing pug on the server side

Answer 3

npm/yarn install/add pug –save

pug has build-in integration with express.

Question 4

using a dynamic variable

Answer 4

{var} or () inside tag attributes

note: javascript string interpolation uses ${}, while pug uses #{}

Question 5

built-in method to iterate through a dynamic var

Answer 5

each val in obj

Question 6

built in method to check for a condition

Answer 6

if condition
  //do something

Question 7

What is the fundamental tag to create a template .pug file?

Answer 7

block (name)

Question 8

How to import a file and write over its template?

Answer 8

extends (file path)
block (name)
// code

Question 9

creating a switch case with a built-in pug expression

Answer 9

case expression
    when val
        // do stuff
    when val2
       // do stuff
   when val3
   when val4
      //fall through also works
   default
      // something

Question 10

writing an inline for loop that returns a list of items with the inline javascript capabilities pug offers

Answer 10

- for (var i = 0; i < 9; i++)
      li loop number ${i}

Question 11

writting block unbuffered code

Answer 11

-
   var obj = {var1: 1, var2: 2,
                      var3: 3}
each val in obj
   li #{val}

note: javascript string interpolation uses ${}, while pug uses #{}

Question 12

writting inline buffered code

Answer 12

h2= ‘buffered supports all’ + ‘javascript expressions’ + var;

Question 13

writting buffered unscaped(unsafe) code

Answer 13

li!= “dangerous code! <this>"</this>

Question 14

why is unscaped code unsafe?

Answer 14

because it allows for XSS (cross-site-scripting) in which user can insert client-side javascript code into your site.

Question 15

writing a p tag with a text block

Answer 15

p.
text
text
text

Question 16

pug removes autospace between tags manually, how to manually keep them?

Answer 16

a(href=’#’)
| Using
| the ‘|’ operator
a(href=’#’)

Question 17

commenting and block commenting with pug

Answer 17

// comment
//
block
commenting

Question 18

include vs extends

Answer 18

extends only allows you to write within block statements, while include includes the whole file in the specified section.

extends limit the file as an extension, include doesnt, but your cant write on blocks