net - UK (2020-05)

(Antfer) #1
Pug works well
with dynamic data.
It converts object
properties into
variables to populate
templates

Editors such as
VS Code show a
preview of what an
abbreviation will
look like

While the cite attribute on and


elements can be useful metadata, the
element itself is used when we want to show
the cited source to the user.
A element should only contain the name
of the cited work, such as a book or a play. It should not
include the names of anyone involved in its creation.


Net magazine


The



Hot new HTML tags


HTML is a declarative language. While it has many
features, they are statically defined and cannot
change on their own. HTML can be made dynamic,
but not without the inclusion of JavaScript and this
often requires using some unclear syntax.
Pug (https://pugjs.org) is a templating language
for HTML. It enables us to write conditional HTML
and generate useful snippets to include whenever
they are needed.


  • for (var i = 1; i <= 3; i++)
    li item #{i}


The Node library runs server-side in response to
requests, but it can also be used to generate lots of
HTML pages ahead of time.

Similar to Pug, Emmet (https://emmet.io) is a tool
that can speed up the repetitive process of writing
HTML. Commands are typed using a syntax similar to
CSS selectors. Emmet can then parse and expand its
context into full HTML.
li*3>{item $}

While the syntax may seem convoluted at first,
it can greatly speed up common patterns of nested
elements such as tables, lists and navigations.
Emmet is not limited to writing HTML, it can also
help navigate and modify it. For example, it can
select all the contents of the current element and
comment it out.
Free download pdf