DEV Community: Ar Nazeh

Watch your head! Quick foolproof Metadata setup!

Ar Nazeh — Sun, 26 Apr 2020 11:24:32 +0000

Remember when people went to events and conferences? remember Badges? well, your webpage can wear lots of badges too and it can get overwhelming so here is the long story short!

This is a quick cheatsheet for getting up and running with metadata! for more reading check the resources at the end.

The <head> element contains all the metadata that the browser needs not render! Think of metadata as the badges your webpage wears around the internet!

So how much do you need really?

Essentials

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <!-- The above 2 meta tags *must* come first after the <head>
         for proper document rendering -->
</head>

meta charset Handle displaying any language.
meta name="viewport" Ensures mobile responsiveness.

Primary tags

<!-- Primary tags -->
<title>Page Title</title>
<meta name="title" content="Page Title" />
<meta name="description" content="Describe your webpage content" />

title Defines the title for the browser toolbar, favorites, and search engine results.
meta name="viewport" Ensures mobile responsiveness.

Social sharing

This is easy to underappreciate as a new developer building your own pet projects, however at some point, you will need to share them, and no one wants to open a generic link on social media! Do your self a favor and include those in every project.

Open graph tags

The Open Graph protocol enables any web page to become a rich object in a social graph.

<!-- Open Graph -->
<meta property="og:title" content="Page Title" />
<meta property="og:url" content="https://example.com/" />
<meta property="og:type" content="website" />
<meta property="og:description" content="Page Description" />
<meta property="og:image" content="https://example.com/path_to/thumbnail.jpg" />
<meta property="og:image:alt" content="Image description for accessibility" />

og:title: The title of your object as it should appear within the graph, e.g., "The Rock".
og:url: The canonical URL of your object that will be used as its permanent ID in the graph.
og:type: The type of your object, e.g., "video.movie". Depending on the type you specify, other properties may also be required. Most of the time you would use 'website' or 'article'!
og:image: An image URL which should represent your object within the graph.
og:description: A one to two sentence description of your object.

Twitter cards

Help twitter to show off your website links as a twitter card!

 <!-- Twitter -->
 <meta property="twitter:card" content="summary_large_image" />
 <meta property="twitter:url" content="https://example.com/" />
 <meta property="twitter:title" content="Page Title" />
 <meta property="twitter:description" content="Page Description" />
 <meta
 property="twitter:image"
 content="https://example.com/path-to/thumbnail.jpg"
 />
 <meta
 property="twitter:image:alt"
 content="Image description for accessibility"
 />
</head>

twitter:card: The card type, which will be one of “summary”, “summary_large_image”, “app”, or “player”.

Putting it all together

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <!-- Primary tags -->
  <title>Page Title</title>
  <meta name="title" content="Page Title" />
  <meta name="description" content="Page Description" />

  <!-- Open Graph -->
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://example.com/" />
  <meta property="og:title" content="Page Title" />
  <meta property="og:description" content="Page Description" />
  <meta property="og:image" content="example.com/path_to/thumbnail.jpg" />
  <meta property="og:image:alt" content="Image description for accessibility" />

  <!-- Twitter -->
  <meta property="twitter:card" content="summary_large_image" />
  <meta property="twitter:url" content="https://example.com/" />
  <meta property="twitter:title" content="Page Title" />
  <meta property="twitter:description" content="Page Description" />
  <meta
    property="twitter:image"
    content="https://example.com/path-to/thumbnail.jpg"
  />
  <meta
    property="twitter:image:alt"
    content="Image description for accessibility"
  />
</head>

Dynamic Metadata

In most cases your webpage will be generated dynamically using a front-end framework of sorts. In that case you will need a reusable component that injects each page's metadata on the fly.

Check this Meta.svelte component on svelte.dev REPL showing how to avoid the repetition and drying your code.

// Meta.svelte
<script>
  export let metadata = {};
</script>

<svelte:head>
  {#if metadata.title}
    <title>{metadata.title}</title>
    <meta name="title" content={metadata.title} />
    <meta property="og:title" content={metadata.title} />
    <meta property="twitter:title" content={metadata.title} />
  {/if}

  {#if metadata.description}
    <meta name="description" content="Page Description" />
    <meta property="og:description" content="Page Description" />
    <meta property="twitter:description" content="Page Description" />
  {/if} 

  {#if metadata.image}
    <meta property="og:image" content="example.com/path_to/thumbnail.jpg" />
    <meta
      property="twitter:image"
      content="https://example.com/path-to/thumbnail.jpg"
    />
  {/if} 

  {#if metadata.imageAlt}
    <meta property="og:image:alt" content={metadata.imageAlt} />
    <meta property="twitter:image:alt" content={metadata.imageAlt} />
  {/if}

  {#if metadata.url}
    <meta property="og:url" content={metadata.url} />
    <meta property="twitter:url" content={metadata.url} />
  {/if}

    {#if metadata.type}
      <meta property="og:type" content={metadata.type} />
  {/if}

  <meta property="twitter:card" content={metadata.twitterCard || "summary_large_image"} />
</svelte:head>

Then use it in your pages:

//App.svelte
<script>
    import Meta from './Meta.svelte'

    const metadata = {
        title: 'Svelte is Awesome',
        description: 'It really is!',
        image: 'https://svelte.dev/images/twitter-card.png',
        imageAlt: 'Svelte svelte.dev',
        url:'svelte.dev'
    }
</script>

<Meta {metadata}/>

You can do the same with every component-based framework!

conclusion

As you can see in the resources below, there is a lot of metadata you can provide about your webpage, and you should explore it progressively.
However, this setup should get you covered for basic needs. When you need more, your client/supervisor will let you know!

Comments, suggestions, and corrections are welcome.

Resources

Invisible Barriers That Prevent You From Learning Web Development and How to Break Through Them

Ar Nazeh — Sat, 14 Mar 2020 18:30:46 +0000

The Great Filter of web development! and how to break through it?

The hidden cost of frustrating, demotivating web development MOOCs!

For years, I’ve tried studying web development through various online courses.
And every time I ended up frustrated and demotivated for months before
trying again! So I know the struggle and the ubiquitous
meme.

Then, I started building full responsive clones for great web-pages like:

Youtube,
TNW,
Behance,
Newsweek, and more in less
than 4 weeks!

**So what happened? **out of the necessity of having a coding
partner, I researched the state of CSS in 2019. It’s
then that I realized that MOOCs as great as they are, can be gatekeepers!

4+ fully responsive projects in 4 weeks

So in this article, I will discuss that and answer the following questions:

WHY are discouraging MOOCs dangerous?
HOW are MOOCs discouraging?
WHAT can you do about it?

Why

The world needs more software developers.

Even with programmers supply doubling every 5 years, demand is growing even
faster!

“Software is eating the world” — Marc Andreessen Co-founder of Netscape

Every industry is integrating Software development at every step. From hiring
management to supply chain to advertisement and sales, Software is essential.
Not mentioning design, optimization, and manufacturing of their products. It’s a
necessity to stay competitive.

You may argue that there are rather too many programmers instead, and only good
ones are scarce. so how would more non-CS graduates help solve that problem?

Well, I am well aware of the difference between a coder and a software
developer, and I strive to be the later.

I am not arguing that we don’t need improvement in quality. but quantity has
quality on its own and you can’t get more of the later without starting with
more of the former!

But don’t take my word for it, take it from those “Leaders and
trendsetters”!

And I hope that more financial
independence can help us
face dangerous
stagnation.

Front-end is the gate!

What does any of that have to do with CSS for example? It’s not even a
programming language! OK, it can
encode
Rule 110 but come on, it’s a
style-sheet.

Indeed Front-end development is more about “UX Engineering” as some
suggest to name it. And it is
possible to have a career where you stay in that lane and never become a
programmer.

Nonetheless, Front-end development is the most approachable for anyone with no
CS background. It’s also the most accessible market.

HTML & CSS will always be the first thing anyone tries once the idea of career
shift come through their minds. That also explains why JavaScript is the first
language most people learn!

And it is actually a good first step, it is visual rather than logical or
mathematical. You will often hear people joke about how bad at math they are,
but they take pride in their taste and style.

So it’s rather disappointing when they feel discouraged and repelled by a
style-sheet. And it is very easy to mistake Confusing with Complex.

In most cases all around the world career shift is hard and risky. getting a job
or starting making money through freelance can be crucial. Deterring someone at
this early stage can mean the end of their Tech pursuit.

How

Remember: Reddit is only an Alt-Tab away! -Quincy Larson

While preparing to write this article, I watched a
talk by Quincy
Larson. In it, he talked about the fight for readers attention while writing a
technical article. But it also applies for self-learn platforms as well.

Readers are looking for an excuse to close your article! -Quincy Larson

Yes, self-teaching coders, should have more grit and discipline. But still,
career shift is scary, and their defense systems are looking for reasons to give
up. So it baffles me how FreeCodeCamp curriculum looks like :

Not Even the full list!

Days and days of learning small snippets of very basic HTML and CSS! And for
some reason, you still didn’t learn about any recent development like Flexbox or
CSS-grid! Not mentioning that you have nothing to show for it, to ease your
self-doubt.

Here you can notice several tendencies:

Mistaking old as fundamental, and new as advance!

I can’t see an upside in delaying learning Flexbox and CSS-Grid **and -as
far as I can remember- even **Box-sizing!

Why force students to struggle through outdated tools? Praying day in and day
out that everything will make sense somehow!

I would say the same about dismissing pre-compilers as a tool for advanced
users. In fact, it has a very shallow learning curve and can only make the
student feel smarter and more in control. Sass Flow
Control is also a very
welcome boost to student’s confidence.

Under-appreciating the importance of early achievements!

The longer a student spends going through infinite baby-steps, the worse.
Building real-world projects boost their confidence, enhances learning, and
cements concepts.

There are only so many abstract concepts you can force your brain to memorize
before it repels. Jumping into coding and researching on a need to know basis,
is more efficient in the long run.

Those projects have to be real websites.** Students need to build something they
can take pride in**, and show off.

What

Enough with the rant, off to a more practical note, here is a simple guide to
what worked for me:

Goal

This guide aims to be an alternative approach for learning Responsive web
design. One that takes the student’s urgent need for a sense of progression into
account.

Method

- Learn on a need to know basis.

Project-based learning helps you to know what you don’t know, and why you need to know it.
As counter-intuitive as it sounds: Resist the temptation to learn more tricks. Master the few you got until you have to learn new ones to get the job done.

- Maintain the Flow

Your momentum is a priority, be vigilant to the time you spend on a task, and
omit anything that slows you down.

Skim read when you need to learn a new tool or review a resource. Learn to spot the keywords and reach for conclusions. Take note of the resource and review it later if you need an in-depth study.
Write faster. Learning to write faster with the least mistakes is invaluable, take time to improve that. it allows you to try things faster, and push through your chocking points.
Customize and automate As you go, notice all the repetitive tasks and see if there is a way to save time on it. search for cheatsheets, hotkeys, custom settings, or automation opportunities.

- Always Cheat!

Win if you can lose if you must but always cheat!* -Jesse Ventura*

Good engineers are lazy. Cut corners to achieve much more than you could on your
own, as long as it’s outside the scope of what you are trying to learn.

*Clone pretty websites! * I chose to clone Behance because I know it already looks great on its own.
Use great art to populate your clones.In my Youtube Clone, I used Kurzgesagt’s videos because of their amazing visuals.
Don’t write Content. For content-heavy webpage, copy all content elements to your HTML file. You can then use RegExp to improve the semantics and apply your own classes.
Go the extra steps with ready code snippets. It was not possible to replicate every behavior of Newsweek without JS. I wasn’t trying to learn JS at that point so I excused my self to copy code from Stackoverflow and change it for my needs.

- Pixel Perfect

Yes, you can cheat and cut corners and still be a perfectionist.
The goal is
to make an exact replica, indistinguishable from the original.
Your job is
to make a vertical slice of a full website, so responsiveness is not optional.

Getting started

I recommend VScode as your text editor and any
Chromium browser for best developer tools.

Then you will need to install a few extensions for VScode to make your life
easier:

Beautify will help you format your HTML, CSS, Sass and JS files.
Stylelint will help you write better CSS.
Live server will enable you to examine your changes whenever you save it.
Live Sass Compiler will recompile your Sass files to CSS whenever you save as sass file.

You can also install the Web Development Essentials Extension
Pack.
But I would rather install extensions as the need arise, but take a look
nonetheless.

Start Building

Once you choose a webpage to clone, then this general process should be a good
start:

Set up your project directory.Set-up
Git, and organize your Folder
Structure:

icon.png
|
main.css
main.scss
Start your index.html.Start writing ‘doc’ and VScode should suggest the
following:
Document

As you can see Emmet
abbreviations are super useful
and you should learn more about it.
Now link your stylesheet, add your title
and icon:

...
<meta http-equiv="X-UA-Compatible" content="ie=edge">




</head>
...

Start using Live server and Sass Live compiler to examine changes going forward.

Inspect and analyze Toggle Device Toolbar in the original page to inspect its layout in the mobile version. Mobile-first approach means fewer positioning needed at first, and incremental changes later. You might need to show media queries as well. Analyze the structure of the page. Schematic diagram would help as well.

https://www.ecurtisdesigns.com/web-layout-design/

Build the Layout with HTML5 semantic.Start laying out the general structure using HTML5 elements.

https://codepen.io/mi-lee/post/an-overview-of-html5-semantics

Start populating elements. For this stage, CSS Flexbox** **should be all you need. It will be most handy for justifying and aligning each element’s content.
Expand and position.Start expanding the width of your page, and set up a new
media query for each
breaking point. You will also need to have more control over your layout so
start using
CSS-Grid. Also,
check out this
article.

@media only screen and (min-width: 576px) {
...
}
Start populating content.Copy Images, paragraphs and other content from the
original HTML.
Use VScode’s RegExp in the find and
replace
to improve the semantics and apply your own classes to the copied HTML.
This
might seem complicated but it is a powerful tool to avoid entering tens of
content.
You can experiment with it and see the example below
here.
\n((.+\n)+)<\/div> \n$1
Kill the snakes Congratulations, you opened Pandora’s box. many problems
will be evident at once.
Don’t panic, this is the plan all along, to
discover what you need to learn, now start searching for answers. one problem at
a time.
You already noticed that CSS Tricks will
be your best friend.

Rense and repeat until you have a perfect page!

Conclusion

Front-end development is and will stay for a long time every newbie’s first
contact with IT. and it’s currently a gatekeeper rather than an enabler. I can’t
guarantee that the guide I offered will work for everyone. but it is worth
trying If you tried once and failed. Jump into it, no hello world anymore, find
a page that looks great and clone it.

Let me know what do you think!