1676 lines
102 KiB
HTML
1676 lines
102 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>SEO for Web Developers - DEV Community 👩💻👨💻</title>
|
||
<meta name="last-updated" content="2022-09-04 00:12:27 UTC">
|
||
<meta name="user-signed-in" content="false">
|
||
<meta name="head-cached-at" content="1662250347">
|
||
<!-- Experimental web monetization payment pointer for micropayments -->
|
||
<!-- It lets readers make micropayments to websites they visit. -->
|
||
<!-- This is step 1: Get live in production to test for platform-wide payment pointer. -->
|
||
<!-- Step 2: Allow authors to set their payment pointer so they can directly monetize their content based on visitors. -->
|
||
<!-- Step 3: Enable further functionality based on what we learn from this experimentation and how the ecosystem evolves. -->
|
||
<meta name="monetization" content="$ilp.uphold.com/24HhrUGG7ekn">
|
||
<meta name="environment" content="production">
|
||
<link rel="stylesheet" href="https://dev.to/assets/minimal-5b7906f8aca74447068af5f8677182f4484365f08317cfdd7215fd38bcceaeb2.css" media="all" id="main-minimal-stylesheet" />
|
||
<link rel="stylesheet" href="https://dev.to/assets/views-a9298f924f603832afc6a482b31ac4d3f812e92e85eaf97d4d0345a5811502ed.css" media="all" id="main-views-stylesheet" />
|
||
<link rel="stylesheet" href="https://dev.to/assets/crayons-d29fb30f7419821bed167f8bc19cb88036bd49c4db701184d6590aed60b6905e.css" media="all" id="main-crayons-stylesheet" />
|
||
|
||
<script src="https://dev.to/assets/base-6115566f1c975ffb649623e32442c2acf2ad5532cedb473285ffc1cd90c2e65e.js" defer="defer"></script>
|
||
<script src="https://dev.to/packs/js/runtime~base-91d401d17fdc7be8cf23.js" defer="defer"></script>
|
||
<script src="https://dev.to/packs/js/base-4862022a814a60d6dd00.chunk.js" defer="defer"></script>
|
||
<script src="https://dev.to/packs/js/runtime~Search-118f3db5f3ee8b220217.js" defer="defer"></script>
|
||
<script src="https://dev.to/packs/js/0-cd30251b0a45c4901295.chunk.js" defer="defer"></script>
|
||
<script src="https://dev.to/packs/js/1-d02c88f21eb650128b69.chunk.js" defer="defer"></script>
|
||
<script src="https://dev.to/packs/js/Search-3cbc03265957c3789c05.chunk.js" defer="defer"></script>
|
||
<script src="https://dev.to/packs/js/runtime~runtimeBanner-f5b6262cea3b8c558bbc.js" defer="defer"></script>
|
||
<script src="https://dev.to/packs/js/runtimeBanner-6b3d2e06cc1a07b71f5d.chunk.js" defer="defer"></script>
|
||
|
||
<link rel="canonical" href="https://dev.to/deviouslab/seo-for-web-developers-m54" />
|
||
<meta name="description" content="Search Engine Optimisation is usually a skill that is reserved for those in Digital Marketing, but I... Tagged with webdev, performance.">
|
||
<meta name="keywords" content="webdev, performance, software, coding, development, engineering, inclusive, community">
|
||
|
||
<meta property="og:type" content="article" />
|
||
<meta property="og:url" content="https://dev.to/deviouslab/seo-for-web-developers-m54" />
|
||
<meta property="og:title" content="SEO for Web Developers" />
|
||
<meta property="og:description" content="Search Engine Optimisation is usually a skill that is reserved for those in Digital Marketing, but I..." />
|
||
<meta property="og:site_name" content="DEV Community 👩💻👨💻" />
|
||
<meta name="twitter:site" content="@thepracticaldev">
|
||
<meta name="twitter:creator" content="@DeviousLab">
|
||
<meta name="twitter:title" content="SEO for Web Developers">
|
||
<meta name="twitter:description" content="Search Engine Optimisation is usually a skill that is reserved for those in Digital Marketing, but I...">
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<meta name="twitter:widgets:new-embed-design" content="on">
|
||
<meta name="robots" content="max-snippet:-1, max-image-preview:large, max-video-preview:-1">
|
||
<meta property="og:image" content="https://res.cloudinary.com/practicaldev/image/fetch/s--wThcQ0Il--/c_imagga_scale,f_auto,fl_progressive,h_500,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ildhi043konoc1si1nu.jpg" />
|
||
<meta name="twitter:image:src" content="https://res.cloudinary.com/practicaldev/image/fetch/s--wThcQ0Il--/c_imagga_scale,f_auto,fl_progressive,h_500,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ildhi043konoc1si1nu.jpg">
|
||
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
||
<link rel="icon" type="image/x-icon" href="https://res.cloudinary.com/practicaldev/image/fetch/s--E8ak4Hr1--/c_limit,f_auto,fl_progressive,q_auto,w_32/https://dev-to.s3.us-east-2.amazonaws.com/favicon.ico" />
|
||
<link rel="apple-touch-icon" href="https://res.cloudinary.com/practicaldev/image/fetch/s--gDM0_LTS--/c_limit,f_png,fl_progressive,q_80,w_180/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/devlogo-pwa-512.png">
|
||
<link rel="apple-touch-icon" sizes="152x152" href="https://res.cloudinary.com/practicaldev/image/fetch/s--l0c3Kmql--/c_limit,f_png,fl_progressive,q_80,w_152/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/devlogo-pwa-512.png">
|
||
<link rel="apple-touch-icon" sizes="180x180" href="https://res.cloudinary.com/practicaldev/image/fetch/s--gDM0_LTS--/c_limit,f_png,fl_progressive,q_80,w_180/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/devlogo-pwa-512.png">
|
||
<link rel="apple-touch-icon" sizes="167x167" href="https://res.cloudinary.com/practicaldev/image/fetch/s--2ecYCSjC--/c_limit,f_png,fl_progressive,q_80,w_167/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/devlogo-pwa-512.png">
|
||
<link href="https://res.cloudinary.com/practicaldev/image/fetch/s--t7tVouP9--/c_limit,f_png,fl_progressive,q_80,w_192/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/devlogo-pwa-512.png" rel="icon" sizes="192x192" />
|
||
<link href="https://res.cloudinary.com/practicaldev/image/fetch/s--lrmEcD2H--/c_limit,f_png,fl_progressive,q_80,w_128/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/devlogo-pwa-512.png" rel="icon" sizes="128x128" />
|
||
<meta name="apple-mobile-web-app-title" content="dev.to">
|
||
<meta name="application-name" content="dev.to">
|
||
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
|
||
<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">
|
||
<link rel="search" href="https://dev.to/open-search.xml" type="application/opensearchdescription+xml" title="DEV Community 👩💻👨💻" />
|
||
|
||
<meta property="forem:name" content="DEV Community 👩💻👨💻" />
|
||
<meta property="forem:logo" content="https://res.cloudinary.com/practicaldev/image/fetch/s--PFPhV65b--/c_limit,f_png,fl_progressive,q_80,w_512/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/devlogo-pwa-512.png" />
|
||
<meta property="forem:domain" content="dev.to" />
|
||
</head>
|
||
<body
|
||
class="sans-serif-article-body default-header"
|
||
data-user-status="logged-out"
|
||
data-community-name="DEV Community 👩💻👨💻"
|
||
data-locale="en"
|
||
data-honeybadger-key="a45862f6"
|
||
data-deployed-at="2022-09-03T00:06:18Z"
|
||
data-latest-commit-id="1f6c53a20c00c697b93946989a02245222d8ed8e"
|
||
data-ga-tracking="UA-71991109-1"
|
||
data-ga4-tracking-id="G-TYEM8Y3JN3"
|
||
>
|
||
<link rel="stylesheet" href="https://dev.to/assets/minimal-5b7906f8aca74447068af5f8677182f4484365f08317cfdd7215fd38bcceaeb2.css" media="all" id="secondary-minimal-stylesheet" />
|
||
<link rel="stylesheet" href="https://dev.to/assets/views-a9298f924f603832afc6a482b31ac4d3f812e92e85eaf97d4d0345a5811502ed.css" media="all" id="secondary-views-stylesheet" />
|
||
<link rel="stylesheet" href="https://dev.to/assets/crayons-d29fb30f7419821bed167f8bc19cb88036bd49c4db701184d6590aed60b6905e.css" media="all" id="secondary-crayons-stylesheet" />
|
||
|
||
<div id="body-styles">
|
||
<style>
|
||
:root {
|
||
--accent-brand-lighter-rgb: 80, 99, 301;
|
||
--accent-brand-rgb: 59, 73, 223;
|
||
--accent-brand-darker-rgb: 47, 58, 178;
|
||
}
|
||
</style>
|
||
</div>
|
||
<div id="audiocontent" data-podcast="">
|
||
|
||
</div>
|
||
<div class="navigation-progress" id="navigation-progress"></div>
|
||
<header class="crayons-header print-hidden">
|
||
<span id="route-change-target" tabindex="-1"></span>
|
||
<a href="#main-content" class="skip-content-link">Skip to content</a>
|
||
<div class="crayons-header__container">
|
||
<span class="inline-block m:hidden ">
|
||
<button class="c-btn c-btn--icon-alone js-hamburger-trigger mx-2">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="aca0rw38ci3cx9pd6c0k4djva70131hf" class="crayons-icon"><title id="aca0rw38ci3cx9pd6c0k4djva70131hf">Navigation menu</title>
|
||
<path d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z"></path>
|
||
</svg>
|
||
|
||
</button>
|
||
</span>
|
||
<a href="/" class="site-logo" aria-label="DEV Community 👩💻👨💻 Home">
|
||
<img class="site-logo__img" src="https://dev-to-uploads.s3.amazonaws.com/uploads/logos/resized_logo_UQww2soKuUsjaOGNB38o.png" alt="DEV Community 👩💻👨💻">
|
||
</a>
|
||
|
||
|
||
<div class="crayons-header--search js-search-form" id="header-search">
|
||
<form accept-charset="UTF-8" method="get" action="/search" role="search">
|
||
<div class="crayons-fields crayons-fields--horizontal">
|
||
<div class="crayons-field flex-1 relative">
|
||
<input class="crayons-header--search-input crayons-textfield js-search-input" type="text" id="nav-search" name="q" placeholder="Search..." autocomplete="off" />
|
||
<button type="submit" aria-label="Search" class="c-btn c-btn--icon-alone absolute inset-px left-auto mt-0 py-0">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a82r1jir5vbo4pgl6wdj8r2sdo607eyd" aria-hidden="true" class="crayons-icon"><title id="a82r1jir5vbo4pgl6wdj8r2sdo607eyd">Search</title>
|
||
<path d="M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0111 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 01-1.969 5.617zm-2.006-.742A6.977 6.977 0 0018 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 004.875-1.975l.15-.15z"></path>
|
||
</svg>
|
||
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
<div class="flex items-center h-100 ml-auto">
|
||
<a class="c-link c-link--icon-alone c-link--block m:hidden mx-1" id="search-link" aria-label="Search" href="/search">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="atpx78ohkgk5g9rcrex4crwyq8zb75jq" class="crayons-icon"><title id="atpx78ohkgk5g9rcrex4crwyq8zb75jq">Search</title>
|
||
<path d="M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0111 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 01-1.969 5.617zm-2.006-.742A6.977 6.977 0 0018 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 004.875-1.975l.15-.15z"></path>
|
||
</svg>
|
||
|
||
</a>
|
||
<span class="hidden m:block">
|
||
<a href="/enter" class="c-link c-link--block mr-2 whitespace-nowrap ml-auto" data-no-instant>
|
||
Log in
|
||
</a>
|
||
</span>
|
||
|
||
<a href="/enter?state=new-user" class="c-cta c-cta--branded whitespace-nowrap mr-2" data-no-instant>
|
||
Create account
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="hamburger">
|
||
<div class="hamburger__content">
|
||
<header class="hamburger__content__header">
|
||
<h2 class="fs-l fw-bold flex-1 break-word lh-tight">DEV Community 👩💻👨💻</h2>
|
||
|
||
<button class="c-btn c-btn--icon-alone js-hamburger-trigger shrink-0" aria-label="Close">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ase1wbdcgz66ijz2df6z95fntiivqt8g" aria-hidden="true" class="crayons-icon c-btn__icon"><title id="ase1wbdcgz66ijz2df6z95fntiivqt8g">Close</title><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z"></path></svg>
|
||
|
||
</button>
|
||
</header>
|
||
|
||
<div class="p-2">
|
||
<div class="crayons-card crayons-card--secondary p-4">
|
||
<h2 class="crayons-subtitle-2 lh-tight mb-4">
|
||
<a href="/" class="c-link c-link--branded">DEV Community 👩💻👨💻</a> is a community of 916,181 amazing developers
|
||
|
||
</h2>
|
||
<p class="color-base-70 mb-4">
|
||
We're a place where coders share, stay up-to-date and grow their careers.
|
||
</p>
|
||
<div>
|
||
<a href="/enter?state=new-user" class="c-cta c-cta--branded justify-center w-100 mb-1" aria-label="Create new account">Create account</a>
|
||
<a href="/enter" class="c-link c-link--block justify-center" aria-label="Log in">Log in</a>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<nav class="mb-4 mt-4" data-testid="main-nav" aria-label="DEV Community 👩💻👨💻">
|
||
<ul class="default-navigation-links sidebar-navigation-links spec-sidebar-navigation-links">
|
||
<li>
|
||
<a href="/" class="sidebar-navigation-link c-link c-link--block c-link--icon-left">
|
||
<span class="c-link__icon">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" width="24" height="24">
|
||
<g class="nc-icon-wrapper">
|
||
<path fill="#A0041E" d="M13.344 18.702h-2a.5.5 0 01-.5-.5v-7a.5.5 0 01.5-.5h2a.5.5 0 01.5.5v7a.5.5 0 01-.5.5z"/>
|
||
<path fill="#FFE8B6" d="M9 20L22 7l13 13v17H9z"/>
|
||
<path fill="#FFCC4D" d="M22 20h1v16h-1z"/>
|
||
<path fill="#66757F" d="M35 21a.997.997 0 01-.707-.293L22 8.414 9.707 20.707a1 1 0 11-1.414-1.414l13-13a.999.999 0 011.414 0l13 13A.999.999 0 0135 21z"/>
|
||
<path fill="#66757F" d="M22 21a.999.999 0 01-.707-1.707l6.5-6.5a1 1 0 111.414 1.414l-6.5 6.5A.997.997 0 0122 21z"/>
|
||
<path fill="#C1694F" d="M14 30h4v6h-4z"/>
|
||
<path fill="#55ACEE" d="M14 21h4v4h-4zm12.5 0h4v4h-4zm0 9h4v4h-4z"/>
|
||
<path fill="#5C913B" d="M37.5 37.5A1.5 1.5 0 0136 39H8a1.5 1.5 0 010-3h28a1.5 1.5 0 011.5 1.5z"/>
|
||
</g>
|
||
</svg>
|
||
|
||
</span>
|
||
Home
|
||
</a>
|
||
</li>
|
||
|
||
|
||
<li>
|
||
<a href="/listings" class="sidebar-navigation-link c-link c-link--block c-link--icon-left">
|
||
<span class="c-link__icon">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" width="24" height="24">
|
||
<g class="nc-icon-wrapper">
|
||
<path fill="#FFD983" d="M36 4H14a4 4 0 00-4 4v24H8a4 4 0 000 8h24a4 4 0 004-4V12a4 4 0 000-8z"/>
|
||
<path fill="#E39F3D" d="M12 14h24v-2H14l-2-1z"/>
|
||
<path fill="#FFE8B6" d="M14 4a4 4 0 00-4 4v24.555A3.955 3.955 0 008 32a4 4 0 104 4V11.445c.59.344 1.268.555 2 .555a4 4 0 000-8z"/>
|
||
<path fill="#C1694F" d="M16 8a2 2 0 11-4.001-.001A2 2 0 0116 8m-6 28a2 2 0 11-4.001-.001A2 2 0 0110 36m24-17a1 1 0 01-1 1H15a1 1 0 010-2h18a1 1 0 011 1m0 4a1 1 0 01-1 1H15a1 1 0 110-2h18a1 1 0 011 1m0 4a1 1 0 01-1 1H15a1 1 0 110-2h18a1 1 0 011 1m0 4a1 1 0 01-1 1H15a1 1 0 110-2h18a1 1 0 011 1"/>
|
||
</g>
|
||
</svg>
|
||
|
||
</span>
|
||
Listings
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/pod" class="sidebar-navigation-link c-link c-link--block c-link--icon-left">
|
||
<span class="c-link__icon">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" width="24" height="24">
|
||
<g class="nc-icon-wrapper">
|
||
<path fill="#292F33" d="M10 19h24v2H10zm15 15c0 2.208-.792 4-3 4-2.209 0-3-1.792-3-4s.791-2 3-2c2.208 0 3-.208 3 2z"/>
|
||
<path fill="#66757F" d="M22 35c-6.627 0-10 1.343-10 3v2h20v-2c0-1.657-3.373-3-10-3z"/>
|
||
<path fill="#99AAB5" d="M22 4a9 9 0 00-9 9v7h18v-7a9 9 0 00-9-9z"/>
|
||
<g fill="#292F33" transform="translate(4 4)">
|
||
<circle cx="15.5" cy="2.5" r="1.5"/>
|
||
<circle cx="20.5" cy="2.5" r="1.5"/>
|
||
<circle cx="17.5" cy="6.5" r="1.5"/>
|
||
<circle cx="22.5" cy="6.5" r="1.5"/>
|
||
<circle cx="12.5" cy="6.5" r="1.5"/>
|
||
<circle cx="15.5" cy="10.5" r="1.5"/>
|
||
<circle cx="10.5" cy="10.5" r="1.5"/>
|
||
<circle cx="20.5" cy="10.5" r="1.5"/>
|
||
<circle cx="25.5" cy="10.5" r="1.5"/>
|
||
<circle cx="17.5" cy="14.5" r="1.5"/>
|
||
<circle cx="22.5" cy="14.5" r="1.5"/>
|
||
<circle cx="12.5" cy="14.5" r="1.5"/>
|
||
</g>
|
||
<path fill="#66757F" d="M13 19.062V21c0 4.971 4.029 9 9 9s9-4.029 9-9v-1.938H13z"/>
|
||
<path fill="#66757F" d="M34 18a1 1 0 00-1 1v2c0 6.074-4.925 11-11 11s-11-4.926-11-11v-2a1 1 0 00-2 0v2c0 7.18 5.82 13 13 13s13-5.82 13-13v-2a1 1 0 00-1-1z"/>
|
||
</g>
|
||
</svg>
|
||
|
||
</span>
|
||
Podcasts
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/videos" class="sidebar-navigation-link c-link c-link--block c-link--icon-left">
|
||
<span class="c-link__icon">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" width="24" height="24">
|
||
<g transform="translate(4 4)">
|
||
<path fill="#31373D" d="M34.074 18l-4.832 3H28v-4c0-.088-.02-.169-.026-.256C31.436 15.864 34 12.735 34 9a8 8 0 00-16.001 0c0 1.463.412 2.822 1.099 4H14.92c.047-.328.08-.66.08-1a7 7 0 10-14 0 6.995 6.995 0 004 6.317V29a4 4 0 004 4h15a4 4 0 004-4v-3h1.242l4.832 3H35V18h-.926zM28.727 3.977a5.713 5.713 0 012.984 4.961L28.18 8.35a2.276 2.276 0 00-.583-.982l1.13-3.391zm-.9 6.342l3.552.592a5.713 5.713 0 01-4.214 3.669 3.985 3.985 0 00-1.392-1.148l.625-2.19a2.425 2.425 0 001.429-.923zM26 3.285c.282 0 .557.027.828.067l-1.131 3.392c-.404.054-.772.21-1.081.446L21.42 5.592A5.703 5.703 0 0126 3.285zM20.285 9c0-.563.085-1.106.236-1.62l3.194 1.597-.002.023c0 .657.313 1.245.771 1.662L23.816 13h-1.871a5.665 5.665 0 01-1.66-4zm-9.088-.385A4.64 4.64 0 0112.667 12c0 .344-.043.677-.113 1H10.1c.145-.304.233-.641.233-1a2.32 2.32 0 00-.392-1.292l1.256-2.093zM8 7.333c.519 0 1.01.105 1.476.261L8.22 9.688c-.073-.007-.145-.022-.22-.022a2.32 2.32 0 00-1.292.392L4.615 8.803A4.64 4.64 0 018 7.333zM3.333 12c0-.519.105-1.01.261-1.477l2.095 1.257c-.007.073-.022.144-.022.22 0 .75.36 1.41.91 1.837a3.987 3.987 0 00-1.353 1.895C4.083 14.881 3.333 13.533 3.333 12z"/>
|
||
<circle fill="#8899A6" cx="24" cy="19" r="2"/>
|
||
<circle fill="#8899A6" cx="9" cy="19" r="2"/>
|
||
<path fill="#8899A6" d="M24 27a2 2 0 00-2-2H11a2 2 0 00-2 2v6a2 2 0 002 2h11a2 2 0 002-2v-6z"/>
|
||
</g>
|
||
</svg>
|
||
|
||
</span>
|
||
Videos
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/tags" class="sidebar-navigation-link c-link c-link--block c-link--icon-left">
|
||
<span class="c-link__icon">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" width="24" height="24">
|
||
<g class="nc-icon-wrapper">
|
||
<path fill="#FFD983" d="M36.017 24.181L21.345 9.746C20.687 9.087 19.823 9 18.96 9H8.883C7.029 9 6 10.029 6 11.883v10.082c0 .861.089 1.723.746 2.38L21.3 39.017a3.287 3.287 0 004.688 0l10.059-10.088c1.31-1.312 1.28-3.438-.03-4.748zm-23.596-8.76a1.497 1.497 0 11-2.118-2.117 1.497 1.497 0 012.118 2.117z"/>
|
||
<path fill="#D99E82" d="M13.952 11.772a3.66 3.66 0 00-5.179 0 3.663 3.663 0 105.18 5.18 3.664 3.664 0 00-.001-5.18zm-1.53 3.65a1.499 1.499 0 11-2.119-2.12 1.499 1.499 0 012.119 2.12z"/>
|
||
<path fill="#C1694F" d="M12.507 14.501a1 1 0 11-1.415-1.414l8.485-8.485a1 1 0 111.415 1.414l-8.485 8.485z"/>
|
||
</g>
|
||
</svg>
|
||
|
||
</span>
|
||
Tags
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/faq" class="sidebar-navigation-link c-link c-link--block c-link--icon-left">
|
||
<span class="c-link__icon">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" width="24" height="24">
|
||
<g class="nc-icon-wrapper">
|
||
<path fill="#FFD983" d="M33 15.06c0 6.439-5 7.439-5 13.44 0 3.098-3.123 3.359-5.5 3.359-2.053 0-6.586-.779-6.586-3.361C15.914 22.5 11 21.5 11 15.06c0-6.031 5.285-10.92 11.083-10.92C27.883 4.14 33 9.029 33 15.06z"/>
|
||
<path fill="#CCD6DD" d="M26.167 36.5c0 .828-2.234 2.5-4.167 2.5-1.933 0-4.167-1.672-4.167-2.5 0-.828 2.233-.5 4.167-.5 1.933 0 4.167-.328 4.167.5z"/>
|
||
<path fill="#FFCC4D" d="M26.707 14.293a.999.999 0 00-1.414 0L22 17.586l-3.293-3.293a1 1 0 10-1.414 1.414L21 19.414V30a1 1 0 102 0V19.414l3.707-3.707a.999.999 0 000-1.414z"/>
|
||
<path fill="#99AAB5" d="M28 35a2 2 0 01-2 2h-8a2 2 0 01-2-2v-6h12v6z"/>
|
||
<path fill="#CCD6DD" d="M15.999 36a1 1 0 01-.163-1.986l12-2a.994.994 0 011.15.822.999.999 0 01-.822 1.15l-12 2a.927.927 0 01-.165.014zm0-4a1 1 0 01-.163-1.986l12-2a.995.995 0 011.15.822.999.999 0 01-.822 1.15l-12 2a.927.927 0 01-.165.014z"/>
|
||
</g>
|
||
</svg>
|
||
|
||
</span>
|
||
FAQ
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="https://shop.forem.com" class="sidebar-navigation-link c-link c-link--block c-link--icon-left">
|
||
<span class="c-link__icon">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" width="24" height="24">
|
||
<g class="nc-icon-wrapper">
|
||
<path fill="#F4900C" d="M15 4a8 8 0 00-8 8v8h2v-8a6 6 0 0112 0v8h2v-8a8 8 0 00-8-8z"/>
|
||
<path fill="#DD2E44" d="M5 12l2 2 2-2 2 2 2-2 2 2 2-2 2 2 2-2 2 2 2-2v23H5z"/>
|
||
<path fill="#FFCC4D" d="M29 9a8 8 0 00-8 8v8h2v-8a6 6 0 0112 0v8h2v-8a8 8 0 00-8-8z"/>
|
||
<path fill="#744EAA" d="M19 17l2 2 2-2 2 2 2-2 2 2 2-2 2 2 2-2 2 2 2-2v23H19z"/>
|
||
</g>
|
||
</svg>
|
||
|
||
</span>
|
||
Forem Shop
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/sponsorships" class="sidebar-navigation-link c-link c-link--block c-link--icon-left">
|
||
<span class="c-link__icon">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" width="24" height="24">
|
||
<path fill="#DD2E44" d="M39.885 15.833c0-5.45-4.418-9.868-9.867-9.868-3.308 0-6.227 1.633-8.018 4.129-1.791-2.496-4.71-4.129-8.017-4.129-5.45 0-9.868 4.417-9.868 9.868 0 .772.098 1.52.266 2.241C5.751 26.587 15.216 35.568 22 38.034c6.783-2.466 16.249-11.447 17.617-19.959.17-.721.268-1.469.268-2.242z"/>
|
||
</svg>
|
||
|
||
</span>
|
||
Sponsors
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/about" class="sidebar-navigation-link c-link c-link--block c-link--icon-left">
|
||
<span class="c-link__icon">
|
||
<svg viewBox="0 0 235 234" xmlns="http://www.w3.org/2000/svg" class="rainbow-logo" preserveAspectRatio="xMinYMin meet">
|
||
<g fill="none" fill-rule="evenodd">
|
||
<path fill="#88AEDC" d="M234.04 175.67l-75.69 58.28h47.18L234.04 212z"/>
|
||
<path d="M234.04 140.06l-121.93 93.89h.02l121.91-93.87zM133.25.95L.04 103.51v.02L133.27.95z"/>
|
||
<path fill="#F58F8E" fill-rule="nonzero" d="M.04.95v30.16L39.21.95z"/>
|
||
<path fill="#FEE18A" fill-rule="nonzero" d="M39.21.95L.04 31.11v35.9L85.84.95z"/>
|
||
<path fill="#F3F095" fill-rule="nonzero" d="M85.84.95L.04 67.01v36.5L133.25.95z"/>
|
||
<path fill="#55C1AE" fill-rule="nonzero" d="M133.27.95L.04 103.53v35.59L179.49.95z"/>
|
||
<path fill="#F7B3CE" fill-rule="nonzero" d="M234.04.95h-7.37L.04 175.45v35.93l234-180.18z"/>
|
||
<path fill="#88AEDC" fill-rule="nonzero" d="M179.49.95L.04 139.12v36.33L226.67.95z"/>
|
||
<path fill="#F58F8E" fill-rule="nonzero" d="M234.04 31.2L.04 211.38v22.57h18.03l215.97-166.3z"/>
|
||
<path fill="#FEE18A" fill-rule="nonzero" d="M234.04 67.65L18.07 233.95H64.7l169.34-130.39z"/>
|
||
<path fill="#F3F095" fill-rule="nonzero" d="M234.04 103.56L64.7 233.95h47.41l121.93-93.89z"/>
|
||
<path fill="#55C1AE" fill-rule="nonzero" d="M234.04 140.08l-121.91 93.87h46.22l75.69-58.28z"/>
|
||
<path fill="#F7B3CE" fill-rule="nonzero" d="M234.04 212l-28.51 21.95h28.51z"/>
|
||
<path d="M65.237 77.75c4.514.95 7.774 2.8 11.135 6.3 3.059 3.2 4.965 6.85 5.767 10.95.652 3.45.652 40.55 0 44.05-1.705 9.1-9.479 16.2-19.109 17.45-2.006.25-8.727.5-14.845.5H37V77h12.438c8.828 0 13.342.2 15.8.75zM51.545 117v25.6l5.166-.2c4.464-.15 5.417-.35 7.423-1.5 3.912-2.3 3.962-2.45 3.962-24.2 0-21.2 0-21.2-3.661-23.6-1.806-1.2-2.558-1.35-7.473-1.55l-5.417-.15V117zm79.245-32.75v7.25h-25.58v18h15.549V124H105.21l.1 9.1.15 9.15 12.69.15 12.638.1V157h-14.795c-16.451 0-19.009-.3-21.617-2.6-3.661-3.2-3.46-1.15-3.611-36.3-.1-21.9.05-32.25.401-33.65.702-2.6 3.661-5.8 6.27-6.7 1.554-.55 5.466-.7 17.704-.75h15.648v7.25zm31.647 20.85c3.712 14.25 6.821 25.6 6.922 25.25.15-.35 3.31-12.4 7.071-26.85l6.872-26.25 7.824-.15c5.918-.1 7.874.05 7.874.5s-17.354 66.2-18.357 69.5c-.702 2.3-4.463 7-6.57 8.25-2.658 1.5-6.57 1.75-8.978.5-2.156-1.1-5.015-4.4-6.47-7.5-.902-1.9-15.648-56-19.058-70l-.352-1.35h7.825c7.673 0 7.874 0 8.275 1.1.2.65 3.41 12.8 7.122 27z" fill="#FFF"/>
|
||
</g>
|
||
</svg>
|
||
|
||
</span>
|
||
About
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/contact" class="sidebar-navigation-link c-link c-link--block c-link--icon-left">
|
||
<span class="c-link__icon">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" width="24" height="24">
|
||
<g class="nc-icon-wrapper">
|
||
<path fill="#FFAC33" d="M38.724 33.656c-1.239-.01-1.241 1.205-1.241 1.205H22.5c-5.246 0-9.5-4.254-9.5-9.5s4.254-9.5 9.5-9.5 9.5 4.254 9.5 9.5c0 3.062-1.6 5.897-3.852 7.633h5.434C35.022 30.849 36 28.139 36 25.361c0-7.456-6.045-13.5-13.5-13.5-7.456 0-13.5 6.044-13.5 13.5 0 7.455 6.044 13.5 13.5 13.5h14.982s-.003 1.127 1.241 1.139c1.238.012 1.228-1.245 1.228-1.245l.014-3.821s.001-1.267-1.241-1.278zM9 18.26a16.047 16.047 0 014-4.739V13c0-5 5-7 5-8s-1-1-1-1H5C4 4 4 5 4 5c0 1 5 3.333 5 7.69v5.57z"/>
|
||
<path fill="#BE1931" d="M17.091 33.166a9.487 9.487 0 01-4.045-8.72l-3.977-.461c-.046.452-.069.911-.069 1.376 0 4.573 2.28 8.608 5.76 11.051l2.331-3.246z"/>
|
||
<path fill="#BE1931" d="M10 29.924s-5.188-.812-5 1 5-1 5-1zm0 .312s-4.125 2.688-2.938 3.75S10 30.236 10 30.236z"/>
|
||
</g>
|
||
</svg>
|
||
|
||
</span>
|
||
Contact
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/guides" class="sidebar-navigation-link c-link c-link--block c-link--icon-left">
|
||
<span class="c-link__icon">
|
||
<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 47.5 47.5" style="enable-background:new 0 0 47.5 47.5;" id="svg2" xml:space="preserve"><defs id="defs6"><clipPath id="clipPath18"><path d="M 0,38 38,38 38,0 0,0 0,38 z" id="path20"/></clipPath></defs><g transform="matrix(1.25,0,0,-1.25,0,47.5)" id="g12"><g id="g14"><g clip-path="url(#clipPath18)" id="g16"><g transform="translate(33,30)" id="g22"><path d="m 0,0 -28,0 c -2.209,0 -4,-1.791 -4,-4 l 0,-15 c 0,-2.209 1.791,-4 4,-4 l 11.416,0 c 0.52,-0.596 1.477,-1 2.584,-1 1.107,0 2.064,0.404 2.584,1 L 0,-23 c 2.209,0 4,1.791 4,4 L 4,-4 C 4,-1.791 2.209,0 0,0" id="path24" style="fill:#226699;fill-opacity:1;fill-rule:nonzero;stroke:none"/></g><g transform="translate(21,10)" id="g26"><path d="m 0,0 c 0,-1.104 -0.896,-2 -2,-2 -1.104,0 -2,0.896 -2,2 l 0,18 c 0,1.104 0.896,2 2,2 1.104,0 2,-0.896 2,-2 L 0,0 z" id="path28" style="fill:#292f33;fill-opacity:1;fill-rule:nonzero;stroke:none"/></g><g transform="translate(19,11)" id="g30"><path d="m 0,0 c 0,-1.104 -0.896,-2 -2,-2 l -12,0 c -1.104,0 -2,0.896 -2,2 l 0,18 c 0,1.104 0.896,2 2,2 l 12,0 c 1.104,0 2,-0.896 2,-2 L 0,0 z" id="path32" style="fill:#99aab5;fill-opacity:1;fill-rule:nonzero;stroke:none"/></g><g transform="translate(19,11)" id="g34"><path d="m 0,0 c -0.999,1.998 -3.657,2 -4,2 -2,0 -5,-2 -8,-2 -1,0 -2,0.896 -2,2 l 0,16 c 0,1.104 1,2 2,2 3.255,0 6,2 8,2 3,0 4,-1.896 4,-3 L 0,0 z" id="path36" style="fill:#e1e8ed;fill-opacity:1;fill-rule:nonzero;stroke:none"/></g><g transform="translate(35,11)" id="g38"><path d="m 0,0 c 0,-1.104 -0.896,-2 -2,-2 l -12,0 c -1.104,0 -2,0.896 -2,2 l 0,18 c 0,1.104 0.896,2 2,2 l 12,0 c 1.104,0 2,-0.896 2,-2 L 0,0 z" id="path40" style="fill:#99aab5;fill-opacity:1;fill-rule:nonzero;stroke:none"/></g><g transform="translate(19,11)" id="g42"><path d="m 0,0 c 0.999,1.998 3.657,2 4,2 2,0 5,-2 8,-2 1,0 2,0.896 2,2 l 0,16 c 0,1.104 -1,2 -2,2 C 8.744,20 6,22 4,22 1,22 0,20.104 0,19 L 0,0 z" id="path44" style="fill:#ccd6dd;fill-opacity:1;fill-rule:nonzero;stroke:none"/></g></g></g></g></svg>
|
||
|
||
</span>
|
||
Guides
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/software-comparisons" class="sidebar-navigation-link c-link c-link--block c-link--icon-left">
|
||
<span class="c-link__icon">
|
||
<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 45" style="enable-background:new 0 0 45 45;" xml:space="preserve" version="1.1" id="svg2"><metadata id="metadata8"><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/></cc:Work></rdf:RDF></metadata><defs id="defs6"><clipPath id="clipPath16" clipPathUnits="userSpaceOnUse"><path id="path18" d="M 0,36 36,36 36,0 0,0 0,36 Z"/></clipPath></defs><g transform="matrix(1.25,0,0,-1.25,0,45)" id="g10"><g id="g12"><g clip-path="url(#clipPath16)" id="g14"><g transform="translate(2,20)" id="g20"><path id="path22" style="fill:#ffcc4d;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 c 0,-8.837 7.164,-16 16,-16 8.837,0 16,7.163 16,16 C 32,8.836 24.837,16 16,16 7.164,16 0,8.836 0,0"/></g><g transform="translate(15.4063,25.5)" id="g24"><path id="path26" style="fill:#664500;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 c 0,-1.381 -0.896,-2.5 -2,-2.5 -1.104,0 -2,1.119 -2,2.5 0,1.38 0.896,2.5 2,2.5 1.104,0 2,-1.12 2,-2.5"/></g><g transform="translate(26,24.5)" id="g28"><path id="path30" style="fill:#664500;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 c 0,-1.381 -0.895,-2.5 -2,-2.5 -1.104,0 -2,1.119 -2,2.5 0,1.38 0.896,2.5 2,2.5 1.105,0 2,-1.12 2,-2.5"/></g><g transform="translate(9.6709,29.667)" id="g32"><path id="path34" style="fill:#664500;fill-opacity:1;fill-rule:nonzero;stroke:none" d="M 0,0 C -0.164,0.087 -0.303,0.223 -0.391,0.398 -0.607,0.827 -0.431,1.325 0.002,1.511 4.268,3.341 7.701,1.554 7.845,1.477 8.278,1.246 8.453,0.729 8.236,0.323 8.02,-0.082 7.496,-0.223 7.063,0.005 6.94,0.069 4.231,1.437 0.785,-0.042 0.528,-0.151 0.238,-0.127 0,0"/></g><g transform="translate(14.7427,16.4277)" id="g36"><path id="path38" style="fill:#664500;fill-opacity:1;fill-rule:nonzero;stroke:none" d="M 0,0 C -0.136,0.127 -0.236,0.293 -0.276,0.486 -0.375,0.955 -0.078,1.392 0.389,1.46 4.981,2.138 7.841,-0.469 7.962,-0.58 8.322,-0.914 8.357,-1.457 8.044,-1.795 7.732,-2.131 7.189,-2.133 6.83,-1.801 6.726,-1.709 4.458,0.307 0.748,-0.24 0.471,-0.281 0.197,-0.184 0,0"/></g><g transform="translate(20.4307,25.917)" id="g40"><path id="path42" style="fill:#664500;fill-opacity:1;fill-rule:nonzero;stroke:none" d="M 0,0 C -0.156,0.098 -0.286,0.243 -0.362,0.424 -0.549,0.866 -0.339,1.352 0.105,1.508 4.486,3.044 7.79,1.028 7.929,0.941 8.344,0.681 8.483,0.154 8.24,-0.237 7.998,-0.627 7.464,-0.732 7.049,-0.475 6.929,-0.402 4.321,1.146 0.782,-0.095 0.518,-0.187 0.23,-0.143 0,0"/></g><g transform="translate(17.2764,0.8682)" id="g44"><path id="path46" style="fill:#f4900c;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 c 0,0 1.265,0.411 1.429,1.352 0.173,0.971 -0.624,1.167 -0.624,1.167 0,0 1.041,0.208 1.172,1.376 0.123,1.1 -0.862,1.363 -0.862,1.363 0,0 0.97,0.4 1.016,1.539 0.038,0.959 -0.995,1.428 -0.995,1.428 0,0 5.038,1.22 5.555,1.34 0.516,0.121 1.321,0.616 1.07,1.695 -0.249,1.08 -1.204,1.118 -1.698,1.003 -0.494,-0.116 -6.744,-1.567 -8.9,-2.069 -0.23,-0.053 -1.308,-0.302 -1.439,-0.334 -0.54,-0.127 -0.785,0.111 -0.405,0.512 0.509,0.536 0.833,1.129 0.947,2.113 0.119,1.036 -0.232,2.314 -0.433,2.809 -0.374,0.921 -1.005,1.649 -1.734,1.899 -1.138,0.39 -1.946,-0.321 -1.542,-1.561 0.604,-1.855 0.209,-3.375 -0.833,-4.293 -2.449,-2.157 -3.589,-3.695 -2.83,-6.973 0.827,-3.575 4.377,-5.876 7.952,-5.048 C -2.965,-0.64 0,0 0,0"/></g></g></g></g></svg>
|
||
|
||
</span>
|
||
Software comparisons
|
||
</a>
|
||
</li>
|
||
|
||
</ul>
|
||
</nav>
|
||
|
||
<nav class="mb-4" data-testid="other-nav" aria-labelledby="other-nav-heading-hamburger">
|
||
<h2 id="other-nav-heading-hamburger" class="crayons-subtitle-3 py-2 pl-3">
|
||
Other
|
||
</h2>
|
||
<ul class="other-navigation-links sidebar-navigation-links spec-sidebar-navigation-links">
|
||
<li>
|
||
<a href="/code-of-conduct" class="sidebar-navigation-link c-link c-link--block c-link--icon-left">
|
||
<span class="c-link__icon">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" width="24" height="24">
|
||
<g class="nc-icon-wrapper">
|
||
<path fill="#FFDB5E" d="M38.956 21.916c0-.503-.12-.975-.321-1.404-1.341-4.326-7.619-4.01-16.549-4.221-1.493-.035-.639-1.798-.115-5.668.341-2.517-1.282-6.382-4.01-6.382-4.498 0-.171 3.548-4.148 12.322-2.125 4.688-6.875 2.062-6.875 6.771v10.719c0 1.833.18 3.595 2.758 3.885 2.499.281 1.937 2.062 5.542 2.062h18.044a3.337 3.337 0 003.333-3.334c0-.762-.267-1.456-.698-2.018 1.02-.571 1.72-1.649 1.72-2.899 0-.76-.266-1.454-.696-2.015 1.023-.57 1.725-1.649 1.725-2.901 0-.909-.368-1.733-.961-2.336a3.311 3.311 0 001.251-2.581z"/>
|
||
<path fill="#EE9547" d="M27.02 25.249h8.604c1.17 0 2.268-.626 2.866-1.633a.876.876 0 00-1.506-.892 1.588 1.588 0 01-1.361.775h-8.81c-.873 0-1.583-.71-1.583-1.583s.71-1.583 1.583-1.583H32.7a.875.875 0 000-1.75h-5.888a3.337 3.337 0 00-3.333 3.333c0 1.025.475 1.932 1.205 2.544a3.32 3.32 0 00-.998 2.373c0 1.028.478 1.938 1.212 2.549a3.318 3.318 0 00.419 5.08 3.305 3.305 0 00-.852 2.204 3.337 3.337 0 003.333 3.333h5.484a3.35 3.35 0 002.867-1.632.875.875 0 00-1.504-.894 1.594 1.594 0 01-1.363.776h-5.484c-.873 0-1.583-.71-1.583-1.583s.71-1.583 1.583-1.583h6.506a3.35 3.35 0 002.867-1.633.875.875 0 10-1.504-.894 1.572 1.572 0 01-1.363.777h-7.063a1.585 1.585 0 010-3.167h8.091a3.35 3.35 0 002.867-1.632.875.875 0 00-1.504-.894 1.573 1.573 0 01-1.363.776H27.02a1.585 1.585 0 010-3.167z"/>
|
||
</g>
|
||
</svg>
|
||
|
||
</span>
|
||
Code of Conduct
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/privacy" class="sidebar-navigation-link c-link c-link--block c-link--icon-left">
|
||
<span class="c-link__icon">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" width="24" height="24">
|
||
<g transform="translate(4 4)">
|
||
<circle fill="#FFCC4D" cx="18" cy="18" r="18"/>
|
||
<path fill="#664500" d="M27.335 23.629a.501.501 0 00-.635-.029c-.039.029-3.922 2.9-8.7 2.9-4.766 0-8.662-2.871-8.7-2.9a.5.5 0 10-.729.657C8.7 24.472 11.788 29.5 18 29.5s9.301-5.028 9.429-5.243a.499.499 0 00-.094-.628z"/>
|
||
<path fill="#65471B" d="M18 26.591c-.148 0-.291-.011-.438-.016v4.516h.875v-4.517c-.145.005-.289.017-.437.017z"/>
|
||
<path fill="#FFF" d="M22 26c.016-.004-1.45.378-2.446.486-.366.042-.737.076-1.117.089v4.517H20c1.1 0 2-.9 2-2V26zm-8 0c-.016-.004 1.45.378 2.446.486.366.042.737.076 1.117.089v4.517H16c-1.1 0-2-.9-2-2V26z"/>
|
||
<path fill="#65471B" d="M27.335 23.629a.501.501 0 00-.635-.029c-.03.022-2.259 1.668-5.411 2.47-.443.113-1.864.43-3.286.431-1.424 0-2.849-.318-3.292-.431-3.152-.802-5.381-2.448-5.411-2.47a.501.501 0 00-.729.657c.097.162 1.885 3.067 5.429 4.481v-1.829c-.016-.004 1.45.378 2.446.486.366.042.737.076 1.117.089.146.005.289.016.437.016.148 0 .291-.011.438-.016.38-.013.751-.046 1.117-.089.996-.108 2.462-.49 2.446-.486v1.829c3.544-1.414 5.332-4.319 5.429-4.481a.5.5 0 00-.095-.628zm-.711-9.605c0 1.714-.938 3.104-2.096 3.104-1.157 0-2.096-1.39-2.096-3.104s.938-3.104 2.096-3.104c1.158 0 2.096 1.39 2.096 3.104zm-17.167 0c0 1.714.938 3.104 2.096 3.104 1.157 0 2.096-1.39 2.096-3.104s-.938-3.104-2.096-3.104c-1.158 0-2.096 1.39-2.096 3.104z"/>
|
||
<path fill="#292F33" d="M34.808 9.627c-.171-.166-1.267.274-2.376-.291-2.288-1.166-8.07-2.291-11.834.376-.403.285-2.087.333-2.558.313-.471.021-2.155-.027-2.558-.313-3.763-2.667-9.545-1.542-11.833-.376-1.109.565-2.205.125-2.376.291-.247.239-.247 1.196.001 1.436.246.239 1.477.515 1.722 1.232.247.718.249 4.958 2.213 6.424 1.839 1.372 6.129 1.785 8.848.238 2.372-1.349 2.289-4.189 2.724-5.881.155-.603.592-.907 1.26-.907s1.105.304 1.26.907c.435 1.691.351 4.532 2.724 5.881 2.719 1.546 7.009 1.133 8.847-.238 1.965-1.465 1.967-5.706 2.213-6.424.245-.717 1.476-.994 1.722-1.232.248-.24.249-1.197.001-1.436zm-20.194 3.65c-.077 1.105-.274 3.227-1.597 3.98-.811.462-1.868.743-2.974.743h-.001c-1.225 0-2.923-.347-3.587-.842-.83-.619-1.146-3.167-1.265-4.12-.076-.607-.28-2.09.388-2.318 1.06-.361 2.539-.643 4.052-.643.693 0 3.021.043 4.155.741 1.005.617.872 1.851.829 2.459zm16.278-.253c-.119.954-.435 3.515-1.265 4.134-.664.495-2.362.842-3.587.842h-.001c-1.107 0-2.163-.281-2.975-.743-1.323-.752-1.52-2.861-1.597-3.966-.042-.608-.176-1.851.829-2.468 1.135-.698 3.462-.746 4.155-.746 1.513 0 2.991.277 4.052.638.668.228.465 1.702.389 2.309z"/>
|
||
</g>
|
||
</svg>
|
||
|
||
</span>
|
||
Privacy Policy
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/terms" class="sidebar-navigation-link c-link c-link--block c-link--icon-left">
|
||
<span class="c-link__icon">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" width="24" height="24">
|
||
<g transform="translate(4 4)">
|
||
<ellipse fill="#F5F8FA" cx="8.828" cy="18" rx="7.953" ry="13.281"/>
|
||
<path fill="#E1E8ED" d="M8.828 32.031C3.948 32.031.125 25.868.125 18S3.948 3.969 8.828 3.969 17.531 10.132 17.531 18s-3.823 14.031-8.703 14.031zm0-26.562C4.856 5.469 1.625 11.09 1.625 18s3.231 12.531 7.203 12.531S16.031 24.91 16.031 18 12.8 5.469 8.828 5.469z"/>
|
||
<circle fill="#8899A6" cx="6.594" cy="18" r="4.96"/>
|
||
<circle fill="#292F33" cx="6.594" cy="18" r="3.565"/>
|
||
<circle fill="#F5F8FA" cx="7.911" cy="15.443" r="1.426"/>
|
||
<ellipse fill="#F5F8FA" cx="27.234" cy="18" rx="7.953" ry="13.281"/>
|
||
<path fill="#E1E8ED" d="M27.234 32.031c-4.88 0-8.703-6.163-8.703-14.031s3.823-14.031 8.703-14.031S35.938 10.132 35.938 18s-3.824 14.031-8.704 14.031zm0-26.562c-3.972 0-7.203 5.622-7.203 12.531 0 6.91 3.231 12.531 7.203 12.531S34.438 24.91 34.438 18 31.206 5.469 27.234 5.469z"/>
|
||
<circle fill="#8899A6" cx="25" cy="18" r="4.96"/>
|
||
<circle fill="#292F33" cx="25" cy="18" r="3.565"/>
|
||
<circle fill="#F5F8FA" cx="26.317" cy="15.443" r="1.426"/>
|
||
</g>
|
||
</svg>
|
||
|
||
</span>
|
||
Terms of use
|
||
</a>
|
||
</li>
|
||
|
||
</ul>
|
||
</nav>
|
||
|
||
<div class="flex justify-start mb-4">
|
||
<a
|
||
href="https://twitter.com/thepracticaldev"
|
||
target="_blank"
|
||
class="c-link c-link--icon-alone c-link--block mx-1"
|
||
rel="noopener">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="amz3rxph147jvx0c7q4jk9mna6xps1i7" class="crayons-icon c-link__icon"><title id="amz3rxph147jvx0c7q4jk9mna6xps1i7">Twitter</title>
|
||
<path d="M22.162 5.656a8.383 8.383 0 01-2.402.658A4.196 4.196 0 0021.6 4c-.82.488-1.719.83-2.656 1.015a4.182 4.182 0 00-7.126 3.814 11.874 11.874 0 01-8.62-4.37 4.168 4.168 0 00-.566 2.103c0 1.45.738 2.731 1.86 3.481a4.168 4.168 0 01-1.894-.523v.052a4.185 4.185 0 003.355 4.101 4.211 4.211 0 01-1.89.072A4.185 4.185 0 007.97 16.65a8.395 8.395 0 01-6.191 1.732 11.83 11.83 0 006.41 1.88c7.693 0 11.9-6.373 11.9-11.9 0-.18-.005-.362-.013-.54a8.495 8.495 0 002.087-2.165l-.001-.001z" fill="#65bbf2"></path>
|
||
</svg>
|
||
|
||
</a>
|
||
<a
|
||
href="https://facebook.com/thepracticaldev"
|
||
target="_blank"
|
||
class="c-link c-link--icon-alone c-link--block mx-1"
|
||
rel="noopener">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ab9byogmun8qtame8141d02h0v6gi25l" class="crayons-icon c-link__icon"><title id="ab9byogmun8qtame8141d02h0v6gi25l">Facebook</title>
|
||
<path d="M15.402 21v-6.966h2.333l.349-2.708h-2.682V9.598c0-.784.218-1.319 1.342-1.319h1.434V5.857a19.188 19.188 0 00-2.09-.107c-2.067 0-3.482 1.262-3.482 3.58v1.996h-2.338v2.708h2.338V21H4a1 1 0 01-1-1V4a1 1 0 011-1h16a1 1 0 011 1v16a1 1 0 01-1 1h-4.598z"></path>
|
||
</svg>
|
||
|
||
</a>
|
||
<a
|
||
href="https://github.com/forem"
|
||
target="_blank"
|
||
class="c-link c-link--icon-alone c-link--block mx-1"
|
||
rel="noopener">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a1a0an1fkcp2vpdp0stofh4mqjlz2ek9" class="crayons-icon c-link__icon"><title id="a1a0an1fkcp2vpdp0stofh4mqjlz2ek9">Github</title>
|
||
<path d="M12 2C6.475 2 2 6.475 2 12a9.994 9.994 0 006.838 9.488c.5.087.687-.213.687-.476 0-.237-.013-1.024-.013-1.862-2.512.463-3.162-.612-3.362-1.175-.113-.288-.6-1.175-1.025-1.413-.35-.187-.85-.65-.013-.662.788-.013 1.35.725 1.538 1.025.9 1.512 2.338 1.087 2.912.825.088-.65.35-1.087.638-1.337-2.225-.25-4.55-1.113-4.55-4.938 0-1.088.387-1.987 1.025-2.688-.1-.25-.45-1.275.1-2.65 0 0 .837-.262 2.75 1.026a9.28 9.28 0 012.5-.338c.85 0 1.7.112 2.5.337 1.912-1.3 2.75-1.024 2.75-1.024.55 1.375.2 2.4.1 2.65.637.7 1.025 1.587 1.025 2.687 0 3.838-2.337 4.688-4.562 4.938.362.312.675.912.675 1.85 0 1.337-.013 2.412-.013 2.75 0 .262.188.574.688.474A10.016 10.016 0 0022 12c0-5.525-4.475-10-10-10z"></path>
|
||
</svg>
|
||
|
||
</a>
|
||
<a
|
||
href="https://instagram.com/thepracticaldev"
|
||
target="_blank"
|
||
class="c-link c-link--icon-alone c-link--block mx-1"
|
||
rel="noopener">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a5c9io6cargatll07k7r6v4188lfo6kz" class="crayons-icon c-link__icon"><title id="a5c9io6cargatll07k7r6v4188lfo6kz">Instagram</title>
|
||
<path d="M12 2c2.717 0 3.056.01 4.122.06 1.065.05 1.79.217 2.428.465.66.254 1.216.598 1.772 1.153.509.5.902 1.105 1.153 1.772.247.637.415 1.363.465 2.428.047 1.066.06 1.405.06 4.122 0 2.717-.01 3.056-.06 4.122-.05 1.065-.218 1.79-.465 2.428a4.883 4.883 0 01-1.153 1.772c-.5.508-1.105.902-1.772 1.153-.637.247-1.363.415-2.428.465-1.066.047-1.405.06-4.122.06-2.717 0-3.056-.01-4.122-.06-1.065-.05-1.79-.218-2.428-.465a4.89 4.89 0 01-1.772-1.153 4.904 4.904 0 01-1.153-1.772c-.248-.637-.415-1.363-.465-2.428C2.013 15.056 2 14.717 2 12c0-2.717.01-3.056.06-4.122.05-1.066.217-1.79.465-2.428a4.88 4.88 0 011.153-1.772A4.897 4.897 0 015.45 2.525c.638-.248 1.362-.415 2.428-.465C8.944 2.013 9.283 2 12 2zm0 5a5 5 0 100 10 5 5 0 000-10zm6.5-.25a1.25 1.25 0 10-2.5 0 1.25 1.25 0 002.5 0zM12 9a3 3 0 110 6 3 3 0 010-6z"></path>
|
||
</svg>
|
||
|
||
</a>
|
||
<a
|
||
href="https://twitch.com/thepracticaldev"
|
||
target="_blank"
|
||
class="c-link c-link--icon-alone c-link--block mx-1"
|
||
rel="noopener">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="at1b8n9yj0u0gfuwub347aj3e6xrkx5i" class="crayons-icon c-link__icon"><title id="at1b8n9yj0u0gfuwub347aj3e6xrkx5i">Twitch</title>
|
||
<path d="M4.3 3H21v11.7l-4.7 4.7h-3.9l-2.5 2.4H7v-2.4H3V6.2L4.3 3zM5 17.4h4v2.4h.095l2.5-2.4h3.877L19 13.872V5H5v12.4zM15 8h2v4.7h-2V8zm0 0h2v4.7h-2V8zm-5 0h2v4.7h-2V8z"></path>
|
||
</svg>
|
||
|
||
</a>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="hamburger__overlay js-hamburger-trigger"></div>
|
||
</div>
|
||
|
||
|
||
<div id="active-broadcast" class="broadcast-wrapper"></div>
|
||
<div id="message-notice"></div>
|
||
<div id="base-payment-pointer" data-payment-pointer="$ilp.uphold.com/24HhrUGG7ekn"></div>
|
||
<div id="page-content" class="wrapper stories stories-show" data-current-page="stories-show">
|
||
<div id="page-content-inner">
|
||
<div id="page-route-change" class="screen-reader-only" aria-live="polite" aria-atomic="true"></div>
|
||
|
||
|
||
|
||
<style>
|
||
.html-variant-wrapper { display: none}
|
||
</style>
|
||
|
||
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.2.10/webcomponents-loader.js"
|
||
integrity="sha384-3HK5hxQbkFqOIxMbpROlRmRtYl2LBZ52t+tqcjzsmr9NJuOWQxl8RgQSyFvq2lhy"
|
||
crossorigin="anonymous" defer></script>
|
||
|
||
<script src="https://dev.to/packs/js/runtime~webShare-d3caf9661361b7cf171c.js" defer="defer"></script>
|
||
<script src="https://dev.to/packs/js/webShare-2b83d7b0b56b9902800a.chunk.js" defer="defer"></script>
|
||
<script src="https://dev.to/packs/js/runtime~articlePage-1ade43b31d3d0edbcd8e.js" defer="defer"></script>
|
||
<script src="https://dev.to/packs/js/0-cd30251b0a45c4901295.chunk.js" defer="defer"></script>
|
||
<script src="https://dev.to/packs/js/1-d02c88f21eb650128b69.chunk.js" defer="defer"></script>
|
||
<script src="https://dev.to/packs/js/articlePage-33a3356c79ab6235cdc5.chunk.js" defer="defer"></script>
|
||
<script src="https://dev.to/packs/js/runtime~commentDropdowns-ae78e39fefd61cd24c0f.js" defer="defer"></script>
|
||
<script src="https://dev.to/packs/js/commentDropdowns-75adb256f033cc8d88ce.chunk.js" defer="defer"></script>
|
||
|
||
<script type="application/ld+json">
|
||
{"@context":"http://schema.org","@type":"Article","mainEntityOfPage":{"@type":"WebPage","@id":"https://dev.to/deviouslab/seo-for-web-developers-m54"},"url":"https://dev.to/deviouslab/seo-for-web-developers-m54","image":["https://res.cloudinary.com/practicaldev/image/fetch/s--rurCSDHE--/c_imagga_scale,f_auto,fl_progressive,h_1080,q_auto,w_1080/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ildhi043konoc1si1nu.jpg","https://res.cloudinary.com/practicaldev/image/fetch/s--ZR9nmnFt--/c_imagga_scale,f_auto,fl_progressive,h_720,q_auto,w_1280/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ildhi043konoc1si1nu.jpg","https://res.cloudinary.com/practicaldev/image/fetch/s--DVDaAgsI--/c_imagga_scale,f_auto,fl_progressive,h_900,q_auto,w_1600/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ildhi043konoc1si1nu.jpg"],"publisher":{"@context":"http://schema.org","@type":"Organization","name":"DEV Community 👩💻👨💻","logo":{"@context":"http://schema.org","@type":"ImageObject","url":"https://res.cloudinary.com/practicaldev/image/fetch/s--t7tVouP9--/c_limit,f_png,fl_progressive,q_80,w_192/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/devlogo-pwa-512.png","width":"192","height":"192"}},"headline":"SEO for Web Developers","author":{"@context":"http://schema.org","@type":"Person","url":"https://dev.to/deviouslab","name":"DeviousLab"},"datePublished":"2022-07-02T16:53:14Z","dateModified":"2022-07-02T16:53:14Z"}
|
||
</script>
|
||
|
||
|
||
<div class="crayons-layout crayons-layout--3-cols crayons-layout--article">
|
||
<aside class="crayons-layout__sidebar-left" aria-label="Article actions">
|
||
<div class="crayons-article-actions print-hidden">
|
||
<div class="crayons-article-actions__inner">
|
||
|
||
<button
|
||
id="reaction-butt-like"
|
||
aria-label="Like"
|
||
aria-pressed="false"
|
||
class="crayons-reaction crayons-reaction--like crayons-tooltip__activator relative"
|
||
data-category="like">
|
||
<span class="crayons-reaction__icon crayons-reaction__icon--inactive">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-hidden="true" class="crayons-icon">
|
||
<path d="M21.179 12.794l.013.014L12 22l-9.192-9.192.013-.014A6.5 6.5 0 0112 3.64a6.5 6.5 0 019.179 9.154zM4.575 5.383a4.5 4.5 0 000 6.364L12 19.172l7.425-7.425a4.5 4.5 0 10-6.364-6.364L8.818 9.626 7.404 8.21l3.162-3.162a4.5 4.5 0 00-5.99.334l-.001.001z"></path>
|
||
</svg>
|
||
|
||
</span>
|
||
<span class="crayons-reaction__count" id="reaction-number-like"><span class="bg-base-40 opacity-25 p-2 inline-block radius-default"></span></span>
|
||
|
||
<span data-testid="tooltip" class="crayons-tooltip__content">
|
||
Like
|
||
</span>
|
||
</button>
|
||
|
||
<button
|
||
id="reaction-butt-unicorn"
|
||
aria-label="React with unicorn"
|
||
aria-pressed="false"
|
||
class="crayons-reaction crayons-reaction--unicorn crayons-tooltip__activator relative"
|
||
data-category="unicorn">
|
||
<span class="crayons-reaction__icon crayons-reaction__icon--inactive">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-hidden="true" class="crayons-icon">
|
||
<path d="M5.645 8.013c.013-.265-.261-.323-.4-.183-1.16 1.17-1.822 3.865-.344 7.32.294.961 1.938 3.19.84 6.131l-.003.006c-.094.255.206.404.366.263 1.395-1.226 1.933-3.593 1.1-6.375-.488-1.657-1.955-4.226-1.559-7.162zm-3.22 2.738c.05-.137-.124-.417-.326-.225-.939.893-1.316 2.863-.976 4.605.547 2.878 2.374 3.526 2.066 6.629-.028.102.176.38.348.154 1.546-2.033.409-4.453-.241-6.006-1.005-2.386-1.087-4.118-.871-5.157z" fill="#08090A"></path>
|
||
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.622 7.223l8.579-3.68c.598-.256 1.087.547.6.985l-6.618 5.941c.881 2.043 2.738 6.34 2.931 6.775 1.348 3.031-2.055 4.918-3.807 3.583a7.027 7.027 0 01-.623-.574c-.974-.965-2.419-2.398-5.207-1.877.284-2.115-.313-3.737-.883-5.288-.38-1.032-.747-2.032-.837-3.124-.346-3.329 3.763-8.23 4.696-7.953.386.115.326 1.229.266 2.319-.051.948-.102 1.88.143 2.12.145.142.428.43.76.773zM11.5 16.5l2.5.5 2.5 2 1-.5-2-4.5-1.5-4-1.5-1-1-1-1-1.5L10 8l-.5 1.5 1 2.5 1 4.5z"></path>
|
||
</svg>
|
||
|
||
</span>
|
||
<span class="crayons-reaction__count" id="reaction-number-unicorn"><span class="bg-base-40 opacity-25 p-2 inline-block radius-default"></span></span>
|
||
|
||
<span data-testid="tooltip" class="crayons-tooltip__content">
|
||
Unicorn
|
||
</span>
|
||
</button>
|
||
|
||
<button
|
||
id="reaction-butt-readinglist"
|
||
aria-label="Add to reading list"
|
||
aria-pressed="false"
|
||
class="crayons-reaction crayons-reaction--readinglist crayons-tooltip__activator relative"
|
||
data-category="readinglist">
|
||
<span class="crayons-reaction__icon crayons-reaction__icon--inactive">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-hidden="true" class="crayons-icon">
|
||
<path d="M5 2h14a1 1 0 011 1v19.143a.5.5 0 01-.766.424L12 18.03l-7.234 4.536A.5.5 0 014 22.143V3a1 1 0 011-1zm13 2H6v15.432l6-3.761 6 3.761V4z"></path>
|
||
</svg>
|
||
|
||
</span>
|
||
<span class="crayons-reaction__count" id="reaction-number-readinglist"><span class="bg-base-40 opacity-25 p-2 inline-block radius-default"></span></span>
|
||
|
||
<span data-testid="tooltip" class="crayons-tooltip__content">
|
||
Save
|
||
</span>
|
||
</button>
|
||
|
||
<div id="mod-actions-menu-btn-area" class="print-hidden hidden align-center"></div>
|
||
<div class="align-center m:relative">
|
||
<button id="article-show-more-button" aria-controls="article-show-more-dropdown" aria-expanded="false" aria-haspopup="true" class="dropbtn crayons-btn crayons-btn--ghost-dimmed crayons-btn--icon-rounded" aria-label="Share post options">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a8qm8fb9fzqctnq37r4eke2sgzc2bsdz" aria-hidden="true" class="crayons-icon dropdown-icon"><title id="a8qm8fb9fzqctnq37r4eke2sgzc2bsdz">More...</title><path fill-rule="evenodd" clip-rule="evenodd" d="M7 12a2 2 0 11-4 0 2 2 0 014 0zm7 0a2 2 0 11-4 0 2 2 0 014 0zm5 2a2 2 0 100-4 2 2 0 000 4z"></path></svg>
|
||
|
||
</button>
|
||
|
||
<div id="article-show-more-dropdown" class="crayons-dropdown side-bar left-2 right-2 m:right-auto m:left-100 s:left-auto mb-1 m:mb-0 top-unset bottom-100 m:top-0 m:bottom-unset">
|
||
<div>
|
||
<button
|
||
id="copy-post-url-button"
|
||
class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0"
|
||
data-postUrl="https://dev.to/deviouslab/seo-for-web-developers-m54">
|
||
<span class="fw-bold">Copy link</span>
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" id="article-copy-icon" role="img" aria-labelledby="aheuptw1lz8nrrde4zs5malzxo4vn12r" aria-hidden="true" class="crayons-icon mx-2 shrink-0"><title id="aheuptw1lz8nrrde4zs5malzxo4vn12r">Copy link</title>
|
||
<path d="M7 6V3a1 1 0 011-1h12a1 1 0 011 1v14a1 1 0 01-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1 1 0 013 21l.003-14c0-.552.45-1 1.007-1H7zm2 0h8v10h2V4H9v2zm-2 5v2h6v-2H7zm0 4v2h6v-2H7z"></path>
|
||
</svg>
|
||
|
||
</button>
|
||
<div id="article-copy-link-announcer" aria-live="polite" class="crayons-notice crayons-notice--success my-2 p-1" aria-live="polite" hidden>Copied to Clipboard</div>
|
||
</div>
|
||
|
||
<div class="Desktop-only">
|
||
<a
|
||
target="_blank"
|
||
class="crayons-link crayons-link--block"
|
||
rel="noopener"
|
||
href='https://twitter.com/intent/tweet?text=%22SEO%20for%20Web%20Developers%22%20by%20%40DeviousLab%20%23DEVCommunity%20https%3A%2F%2Fdev.to%2Fdeviouslab%2Fseo-for-web-developers-m54'>
|
||
Share to Twitter
|
||
</a>
|
||
<a
|
||
target="_blank"
|
||
class="crayons-link crayons-link--block"
|
||
rel="noopener"
|
||
href="https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fdev.to%2Fdeviouslab%2Fseo-for-web-developers-m54&title=SEO%20for%20Web%20Developers&summary=Search%20Engine%20Optimisation%20is%20usually%20a%20skill%20that%20is%20reserved%20for%20those%20in%20Digital%20Marketing%2C%20but%20I...&source=DEV%20Community%20%F0%9F%91%A9%E2%80%8D%F0%9F%92%BB%F0%9F%91%A8%E2%80%8D%F0%9F%92%BB">
|
||
Share to LinkedIn
|
||
</a>
|
||
<a
|
||
target="_blank"
|
||
class="crayons-link crayons-link--block"
|
||
rel="noopener"
|
||
href="https://www.reddit.com/submit?url=https%3A%2F%2Fdev.to%2Fdeviouslab%2Fseo-for-web-developers-m54&title=SEO%20for%20Web%20Developers">
|
||
Share to Reddit
|
||
</a>
|
||
<a
|
||
target="_blank"
|
||
class="crayons-link crayons-link--block"
|
||
rel="noopener"
|
||
href="https://news.ycombinator.com/submitlink?u=https%3A%2F%2Fdev.to%2Fdeviouslab%2Fseo-for-web-developers-m54&t=SEO%20for%20Web%20Developers">
|
||
Share to Hacker News
|
||
</a>
|
||
<a
|
||
target="_blank"
|
||
class="crayons-link crayons-link--block"
|
||
rel="noopener"
|
||
href="https://www.facebook.com/sharer.php?u=https%3A%2F%2Fdev.to%2Fdeviouslab%2Fseo-for-web-developers-m54">
|
||
Share to Facebook
|
||
</a>
|
||
</div>
|
||
|
||
<web-share-wrapper shareurl="https://dev.to/deviouslab/seo-for-web-developers-m54" sharetitle="SEO for Web Developers" sharetext="Search Engine Optimisation is usually a skill that is reserved for those in Digital Marketing, but I..." template="web-share-button">
|
||
</web-share-wrapper>
|
||
<template id="web-share-button">
|
||
<a href="#" class="dropdown-link-row crayons-link crayons-link--block">Share Post via...</a>
|
||
</template>
|
||
|
||
<a href="/report-abuse" class="crayons-link crayons-link--block">Report Abuse</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="html-variant-wrapper" id="html-variant-article-show-below-article" data-variant-id="382">
|
||
<div></div>
|
||
</div>
|
||
|
||
</aside>
|
||
|
||
<main id="main-content" class="crayons-layout__content grid gap-4">
|
||
<div class="article-wrapper">
|
||
|
||
|
||
<article class="crayons-card crayons-article mb-4"
|
||
id="article-show-container"
|
||
data-article-id="1130312"
|
||
data-article-slug="seo-for-web-developers-m54"
|
||
data-author-id="651460"
|
||
data-author-name="DeviousLab"
|
||
data-author-username="deviouslab"
|
||
data-co-author-ids=""
|
||
data-path="/deviouslab/seo-for-web-developers-m54"
|
||
data-pin-path="/stories/feed/pinned_article"
|
||
data-pinned-article-id=""
|
||
data-published="true"
|
||
data-scheduled="false"
|
||
>
|
||
<header class="crayons-article__header" id="main-title">
|
||
<div class="crayons-article__cover">
|
||
<img src="https://res.cloudinary.com/practicaldev/image/fetch/s--xJx69LM3--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ildhi043konoc1si1nu.jpg" width="1000" height="420" style="background-color:#dddddd;" class="crayons-article__cover__image" alt="Cover image for SEO for Web Developers">
|
||
</div>
|
||
|
||
<div class="crayons-article__header__meta">
|
||
<div class="flex s:items-start flex-col s:flex-row">
|
||
<div id="action-space" class="crayons-article__actions mb-4 s:mb-0 s:order-last"></div>
|
||
<div class="flex flex-1 mb-5 items-start">
|
||
<div class="relative">
|
||
<a href="/deviouslab"><img class="radius-full align-middle" src="https://res.cloudinary.com/practicaldev/image/fetch/s--KvLFn4UB--/c_fill,f_auto,fl_progressive,h_50,q_auto,w_50/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/651460/d1dcccea-40b5-492b-9a75-563235914c20.png" width="40" height="40" alt="DeviousLab" /></a>
|
||
</div>
|
||
<div class="pl-3 flex-1">
|
||
<a href="/deviouslab" class="crayons-link fw-bold">DeviousLab</a>
|
||
<p class="fs-xs color-base-60">
|
||
Posted on <time datetime="2022-07-02T16:53:14Z" class="date-no-year">Jul 2</time>
|
||
|
||
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h1 class="fs-3xl m:fs-4xl l:fs-5xl fw-bold s:fw-heavy lh-tight mb-2 short">
|
||
SEO for Web Developers
|
||
</h1>
|
||
|
||
<div class="spec__tags flex flex-wrap">
|
||
<a class="crayons-tag " style="
|
||
--tag-bg: rgba(86, 39, 101, 0.10);
|
||
--tag-prefix: #562765;
|
||
--tag-bg-hover: rgba(86, 39, 101, 0.10);
|
||
--tag-prefix-hover: #562765;
|
||
" href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a>
|
||
<a class="crayons-tag " style="
|
||
--tag-bg: rgba(255, 163, 100, 0.10);
|
||
--tag-prefix: #ffa364;
|
||
--tag-bg-hover: rgba(255, 163, 100, 0.10);
|
||
--tag-prefix-hover: #ffa364;
|
||
" href="/t/performance"><span class="crayons-tag__prefix">#</span>performance</a>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="crayons-article__main">
|
||
|
||
<div class="crayons-article__body text-styles spec__body" data-article-id="1130312" id="article-body">
|
||
<p>Search Engine Optimisation is usually a skill that is reserved for those in Digital Marketing, but I think that as a web developer, having competency in SEO is a valuable assest to have to differentiate yourself and display a bit more versatility.</p>
|
||
|
||
<h2>
|
||
<a name="what-is-seo" href="#what-is-seo">
|
||
</a>
|
||
What is SEO?
|
||
</h2>
|
||
|
||
<blockquote>
|
||
<p>SEO (Search Engine Optimization) is the practice of optimizing a website or webpage to increase the quantity and quality of its traffic from a search engine’s organic results.[<a href="https://ahrefs.com/blog/what-is-seo/">1</a>]</p>
|
||
</blockquote>
|
||
|
||
<p>There is a technical aspect behind SEO that web developers should have a basic understanding of, where measures are implemented to optimise the website/server so that search engines can easily crawl, index and then rank the website. </p>
|
||
|
||
<p>If you create an amazing site with great content but search engines struggle to index it, all that effort will be in vain.</p>
|
||
|
||
|
||
<hr>
|
||
|
||
<h2>
|
||
<a name="key-habits-that-should-be-followed" href="#key-habits-that-should-be-followed">
|
||
</a>
|
||
Key habits that should be followed
|
||
</h2>
|
||
|
||
<ul>
|
||
<li>Make sure that all images have alt tags, as alt tags will provide search engines with a better context/description of what the image is, allowing them to index it properly.</li>
|
||
<li>When linking to another URL, words should be separated by hypens <code>'-'</code> rather than underscores <code>'_'</code> as search engines read hypens as a space.</li>
|
||
<li>Try to keep domain names as short as possible while maintaining coherency, a domain with more than 15 characters should be avoided to ensure better readability for humans.
|
||
<img src="https://res.cloudinary.com/practicaldev/image/fetch/s--sJL9vbPT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jx6gc841qf3cbhxpbowm.png" alt="https://moz.com/blog/15-seo-best-practices-for-structuring-urls" loading="lazy" width="650" height="535">[<a href="https://moz.com/blog/15-seo-best-practices-for-structuring-urls">2</a>]</li>
|
||
<li>Images should have unique file names that try to describe the content of the image, and you should trying to avoid having duplicates of the same image as this will split the score for this image between each copy.</li>
|
||
<li>'Lazy-loading' images is a technique used to defer the loading of an image until it enters the viewpoint, instead of loading them upfront.</li>
|
||
<li>Try to prioritise the usage of SVGs and WebPs over PNGs and JPEGs to increase the performance of the page.</li>
|
||
</ul>
|
||
|
||
<blockquote>
|
||
<p>WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index.[<a href="https://developers.google.com/speed/webp">3</a>]</p>
|
||
</blockquote>
|
||
|
||
|
||
<hr>
|
||
|
||
<h2>
|
||
<a name="what-is-lighthouse" href="#what-is-lighthouse">
|
||
</a>
|
||
What is Lighthouse?
|
||
</h2>
|
||
|
||
<blockquote>
|
||
<p>Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO and more.[<a href="https://developer.chrome.com/docs/lighthouse/overview/">4</a>]</p>
|
||
</blockquote>
|
||
|
||
<p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--vUip6nPF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2dpq74hyg6tnpes4jwfq.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--vUip6nPF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2dpq74hyg6tnpes4jwfq.png" alt="https://nooshu.com/blog/2019/08/18/lighthouse-score-100-not-always-for-the-better/" loading="lazy" width="880" height="292"></a></p>
|
||
|
||
<p>Google gives higher search page rankings to websites that achieve a higher lighthouse score. With the sheer number of web pages available, Google's crawlers can only spend a certain amount of time scraping your page before moving to the next one. Therefore it is imperative that your page gets a high score to stand out among the rest.</p>
|
||
|
||
<p>You can use <a href="https://web.dev/measure/">Measure</a> to test your page in a lab environment and <a href="https://pagespeed.web.dev/">PageSpeed Insights</a> for field performance</p>
|
||
|
||
|
||
<hr>
|
||
|
||
<h2>
|
||
<a name="head-component" href="#head-component">
|
||
</a>
|
||
Head component
|
||
</h2>
|
||
|
||
<p>The head component of a page will control how your page will appear on search engine results and social media posts.</p>
|
||
|
||
<ul>
|
||
<li><p>The <code><title></code> element for your homepage can list the name of your website or business, and could include other bits of important information like the physical location of the business or maybe a few of its main focuses or offerings. Try to make the title element brief and unique from other pages.</p></li>
|
||
<li>
|
||
<p>A page's meta description tag gives Google and other search engines a summary of what the page is about. Meta description tags are important because Google might use them as snippets for your pages in search engine results.</p>
|
||
|
||
<blockquote>
|
||
<p>Adding meta description tags to each of your pages is always a good practice in case Google cannot find a good selection of text to use in the snippet.[<a href="https://developers.google.com/search/docs/beginner/seo-starter-guide">5</a>]<br>
|
||
Meta descriptions should accurately summarise the content of the page wile also being unique.</p>
|
||
</blockquote>
|
||
</li>
|
||
<li><p>Meta properties that cause a title, description and image to appear when a link to this page is shared on social media (example for Facebook<br>
|
||
<code><meta name="og:url" content="your-website.com/the-current-page" ><br>
|
||
<meta name="og:description" content="Web page description"><br>
|
||
<meta name="og:type" content="website"><br>
|
||
<meta name="og:description" content="your-website.com/your-image.png"></code></p></li>
|
||
</ul>
|
||
|
||
|
||
<hr>
|
||
|
||
<h2>
|
||
<a name="hosting" href="#hosting">
|
||
</a>
|
||
Hosting
|
||
</h2>
|
||
|
||
<ul>
|
||
<li>Your choice of web hosting provider can have a huge impact on your site, as the load time of your website is an important ranking factor. PageSpeed Insights Speed Score uses two important speed metrics: First Contentful Paint (FCP) and DOMContentLoaded (DCL).</li>
|
||
<li>Location is another factor as choosing a web hosting service with server locations that are geographically close to your operational area so that you can ensure that there will be a naturally-fast server response time for your site. </li>
|
||
<li>Having a reliable host is important to experience as little downtime as possible Downtime has an immediate effect, as your potential visitors will no longer be able to access the website. In the long term, downtime can increase your bounce rate, and that can take a long time to repair.</li>
|
||
</ul>
|
||
|
||
<blockquote>
|
||
<p>As web pages become more complex, referencing resources from numerous domains, DNS lookups can become a significant bottleneck in the browsing experience. Whenever a client needs to query a DNS resolver over the network, the latency introduced can be significant, depending on the proximity and number of name servers the resolver has to query.[<a href="https://developers.google.com/speed/public-dns/docs/performance">6</a>]</p>
|
||
</blockquote>
|
||
|
||
<p>For example I used Namecheap to purchase a domain and hosting, and their hosting performs poorly and I optimised my site's code as much as I could but never get past 60 on Lighthouse's performance score. However I switched out my DNS name-servers to Cloudflare and saw my site hit 92 afterwards.</p>
|
||
|
||
|
||
<hr>
|
||
|
||
<h2>
|
||
<a name="what-is-a-cdn" href="#what-is-a-cdn">
|
||
</a>
|
||
What is a CDN?
|
||
</h2>
|
||
|
||
<blockquote>
|
||
<p>A content delivery network (CDN) is a group of geographically distributed servers that speed up the delivery of web content by bringing it closer to where users are. Data centres across the globe use caching, a process that temporarily stores copies of files, so that you can access internet content from a web-enabled device or browser more quickly through a server near you. CDNs cache content like web pages, images, and video in proxy servers near to your physical location.[<a href="https://www.akamai.com/our-thinking/cdn/what-is-a-cdn">7</a>]</p>
|
||
</blockquote>
|
||
|
||
<p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--9ypLGWCY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cf-assets.www.cloudflare.com/slt3lc6tev37/540CpDkqSDg6QAPi5nO1AP/b44a3edb5abc4e115ddab9b4d9bf7a32/Learning-How-does-a-CDN-work.svg" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--9ypLGWCY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cf-assets.www.cloudflare.com/slt3lc6tev37/540CpDkqSDg6QAPi5nO1AP/b44a3edb5abc4e115ddab9b4d9bf7a32/Learning-How-does-a-CDN-work.svg" alt="https://www.cloudflare.com/learning/cdn/what-is-a-cdn/" loading="lazy" width="700" height="467"></a></p>
|
||
|
||
<p>Essentially, copies of your site are stored at multiple, geographically diverse data centres so that users have faster and more reliable access to your site.</p>
|
||
|
||
<p>A CDN can be used to improve site speed and content availability, reduce bandwidth costs and improve site security by mitigating DDoS attacks.</p>
|
||
|
||
|
||
<hr>
|
||
|
||
<h2>
|
||
<a name="minimising-js-and-css" href="#minimising-js-and-css">
|
||
</a>
|
||
Minimising JS and CSS
|
||
</h2>
|
||
|
||
<p>Minifying Javascript and CSS files can contribute to help your website load faster. Minification is the process of removing unnecessary characters from code without changing the way that code works. These unnecessary characters are usually things like: white-space characters, new line breaks, comments, block delimiters.</p>
|
||
|
||
<p>Minifying code can reduce the file size by 30-40%. Sometimes even as much as 50%. Concatenating files also helps reduce the load on your server and network. Combining multiple files into one lets a server send more data in a fewer number of connections.</p>
|
||
|
||
<p>To minimise your CSS and JS, you could use a tool like <a href="https://www.minifier.org/">Minifier</a>.</p>
|
||
|
||
<p>For a more advanced minimisation, <a href="https://purgecss.com/">PurgeCSS</a> which is a tool to remove unused CSS. If you use a CSS framework like Tailwind or Bootstrap, chances are that you are only using a small subset of the framework, and a lot of unnecessary CSS will be included.</p>
|
||
|
||
<p>If you are a React developer and care about performance, Preact is a lightweight alternative to React that focuses on performance. Preact keeps the same modern API as React. And if that's not enough, there's an extensive compatibility layer with React to make sure your existing React code can be used in Preact. It's called preact/compat. Preact's bundle size is 3kB compared to the minified bundle of react + react-dom size's 128kB.</p>
|
||
|
||
<p>You can also use <a href="https://www.gnu.org/software/gzip/">Gzip</a>, a software application for file compression, to reduce the size of your CSS, HTML, and JavaScript files that are larger than 150 bytes.</p>
|
||
|
||
|
||
<hr>
|
||
|
||
<h2>
|
||
<a name="performance-analysis" href="#performance-analysis">
|
||
</a>
|
||
Performance Analysis
|
||
</h2>
|
||
|
||
<p>To analyse a page's performance on search engines, tools such as Google's <a href="https://search.google.com/search-console">Search Console</a> and <a href="https://www.bing.com/toolbox/webmaster">Bing Webmaster Tools</a> can be utilised. </p>
|
||
|
||
<p>With these tools website owners can:</p>
|
||
|
||
<ul>
|
||
<li>See which parts of a site had problems crawling</li>
|
||
<li>Test and submit sitemaps</li>
|
||
<li>Analyze or generate robots.txt files</li>
|
||
<li>Remove URLs already crawled</li>
|
||
<li>Specify your preferred domain</li>
|
||
<li>Identify issues with title and description meta tags</li>
|
||
<li>Understand the top searches used to reach a site</li>
|
||
<li>Get a glimpse at how search engines sees pages</li>
|
||
<li>Receive notifications of quality guidelines violations and request a site reconsideration</li>
|
||
</ul>
|
||
|
||
|
||
<hr>
|
||
|
||
<h2>
|
||
<a name="more-seo-resources" href="#more-seo-resources">
|
||
</a>
|
||
More SEO Resources
|
||
</h2>
|
||
|
||
<p><a href="https://developers.google.com/search/docs/beginner/seo-starter-guide">Google SEO Starter Guide</a><br>
|
||
<a href="https://prerender.io/seo-for-web-developers/">The Indispensable Guide to SEO for Web Developers</a><br>
|
||
<a href="https://moz.com/learn/seo/seo-cheat-sheet">The Web Developer's SEO Cheat Sheet</a><br>
|
||
<a href="https://res.cloudinary.com/practicaldev/image/fetch/s--sV1uhWTn--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lw5ye89bwud6coowj6mc.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--sV1uhWTn--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lw5ye89bwud6coowj6mc.png" alt="https://moz.com/learn/seo/seo-cheat-sheet" loading="lazy" width="880" height="680"></a></p>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
<section id="comments" data-follow-button-container="true" data-updated-at="2022-09-04 00:11:23 UTC" class="text-padding mb-4 border-t-1 border-0 border-solid border-base-10">
|
||
<header class="relative flex justify-between items-center mb-6">
|
||
<h2 class="crayons-subtitle-1">
|
||
Discussion <span class="js-comments-count" data-comments-count="0">(0)</span>
|
||
</h2>
|
||
<div id="comment-subscription" class="print-hidden">
|
||
<div class="crayons-btn-group">
|
||
<span class="crayons-btn crayons-btn--outlined">Subscribe</span>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<div
|
||
id="comments-container"
|
||
data-testid="comments-container"
|
||
data-commentable-id="1130312"
|
||
data-commentable-type="Article"
|
||
data-has-recent-comment-activity="false">
|
||
|
||
<div id="response-templates-data" class="hidden"></div>
|
||
<script src="https://dev.to/packs/js/runtime~validateFileInputs-8d835be3c3cad3ed8433.js" defer="defer"></script>
|
||
<script src="https://dev.to/packs/js/validateFileInputs-734d36e61bb7ec836bb9.chunk.js" defer="defer"></script>
|
||
|
||
|
||
<form class="comment-form print-hidden" id="new_comment" action="/comments" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓" autocomplete="off" />
|
||
|
||
<input type="hidden" name="authenticity_token" value="NOTHING" id="new_comment_authenticity_token">
|
||
|
||
<input value="1130312" autocomplete="off" type="hidden" name="comment[commentable_id]" id="comment_commentable_id" />
|
||
<input value="Article" autocomplete="off" type="hidden" name="comment[commentable_type]" id="comment_commentable_type" />
|
||
|
||
|
||
<span class="crayons-avatar m:crayons-avatar--l mr-2 shrink-0">
|
||
<img src="https://res.cloudinary.com/practicaldev/image/fetch/s--RmY55OKL--/c_limit,f_auto,fl_progressive,q_auto,w_256/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/devlogo-pwa-512.png" width="32" height="32" alt="pic" class="crayons-avatar__image overflow-hidden" id="comment-primary-user-profile--avatar" loading="lazy" />
|
||
</span>
|
||
<div class="comment-form__inner">
|
||
<div class="comment-form__field" data-tracking-name="comment_form_textfield">
|
||
<textarea placeholder="Add to the discussion" onfocus="handleFocus(event)" onkeyup="handleKeyUp(event)" onkeydown="handleKeyDown(event)" oninput="handleChange(event)" id="text-area" required="required" class="crayons-textfield comment-textarea crayons-textfield--ghost" aria-label="Add a comment to the discussion" name="comment[body_markdown]">
|
||
</textarea>
|
||
|
||
</div>
|
||
|
||
<div class="response-templates-container crayons-card crayons-card--secondary p-4 mb-4 comment-form__templates fs-base hidden">
|
||
<header class="mb-3">
|
||
<button type="button" class="crayons-btn personal-template-button active" data-target-type="personal" data-form-id="new_comment">Personal</button>
|
||
<button type="button" class="crayons-btn moderator-template-button hidden" data-target-type="moderator" data-form-id="new_comment">Trusted User</button>
|
||
</header>
|
||
|
||
<img class="loading-img hidden" src="https://dev.to/assets/loading-ellipsis-b714cf681fd66c853ff6f03dd161b77aa3c80e03cdc06f478b695f42770421e9.svg" alt="loading" loading="lazy" />
|
||
|
||
<div class="personal-responses-container">
|
||
</div>
|
||
<div class="moderator-responses-container hidden">
|
||
</div>
|
||
|
||
<a target="_blank" rel="noopener nofollow" href="/settings/response-templates">
|
||
Create template
|
||
</a>
|
||
<p>Templates let you quickly answer FAQs or store snippets for re-use.</p>
|
||
</div>
|
||
|
||
<div class="comment-form__preview text-styles text-styles--secondary" id="preview-div"></div>
|
||
|
||
<div class="comment-form__buttons mb-4">
|
||
<button type="submit" class="crayons-btn mr-2 js-btn-enable" onclick="validateField(event)" data-tracking-name="comment_submit_button" disabled>Submit</button>
|
||
<button type="button" class="preview-toggle crayons-btn crayons-btn--secondary comment-action-preview js-btn-enable mr-2" data-tracking-name="comment_preview_button" disabled>Preview</button>
|
||
<a href="/404.html" class="dismiss-edit-comment crayons-btn crayons-btn--ghost js-btn-dismiss hidden">Dismiss</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="code-of-conduct" id="toggle-code-of-conduct-checkbox"></div>
|
||
</form>
|
||
|
||
|
||
<div class="comments" id="comment-trees-container">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="align-center">
|
||
|
||
|
||
<nav class="fs-s align-center block" aria-label="Conduct controls">
|
||
<a href="/code-of-conduct" class="crayons-link crayons-link--secondary">Code of Conduct</a>
|
||
<span class="opacity-25 px-2" role="presentation">•</span>
|
||
<a href="/report-abuse" class="crayons-link crayons-link--secondary">Report abuse</a>
|
||
</nav>
|
||
|
||
</div>
|
||
|
||
</section>
|
||
<div id="hide-comments-modal" class="hidden">
|
||
<form id="hide-comments-modal__form" class="hide-comments-modal__form" data-type="json" action="/comments/hide" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="✓" autocomplete="off" /><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="sMhtDclvitAYqoFTKw8W1xU9KxZOwG_kOZKvsBCkbE5DOELTATRAive61-2TtrxrIlLsLIjqkOvqR6Q2ChOlxQ" autocomplete="off" />
|
||
<div class="hide-comments-modal__content">
|
||
<p class="pb-2">
|
||
Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's <a id="hide-comments-modal__comment-permalink" href="#">permalink</a>.
|
||
</p>
|
||
<label class="crayons-field crayons-field--checkbox my-2">
|
||
<input name="hide_children" type="hidden" value="0" autocomplete="off" /><input class="hide_children crayons-checkbox" type="checkbox" value="1" name="hide_children" id="hide_children" />
|
||
<p class="crayons-field__label">Hide child comments as well</p>
|
||
</label>
|
||
<p class="pb-4 pt-2">
|
||
<button type="submit" class="crayons-btn">
|
||
Confirm
|
||
</button>
|
||
</p>
|
||
</div>
|
||
</form> <p class="fs-s color-base-60">For further actions, you may consider blocking this person and/or <a id="hide-comments-modal__report-link" href="/report-abuse">reporting abuse</a></p>
|
||
</div>
|
||
|
||
|
||
|
||
</article>
|
||
|
||
<div class="crayons-card crayons-card--secondary p-4 crayons-sponsorship-article" data-display-unit data-id="180">
|
||
<h4> <a href="#did-you-know" class="anchor"> </a> 🤔 Did you know?</h4><p> <br>🗺 We put together some guides that include some of our favorite content on DEV. <a href="https://dev.to/guides">Check them out here</a>.</p>
|
||
</div>
|
||
|
||
<section class="crayons-card crayons-card--secondary text-padding mb-4 print-hidden" id="bottom-content-read-next">
|
||
<h2 class="crayons-subtitle-1">Read next</h2>
|
||
<a href="/kouts/a-vue-dropdown-menu-with-floating-vue-tailwind-5gg4" data-preload-image="https://res.cloudinary.com/practicaldev/image/fetch/s--Q479JgBk--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/815f7ufar2mbcf2ga35y.png" class="crayons-link mt-6 block">
|
||
<div class="flex items-center">
|
||
<span class="crayons-avatar crayons-avatar--xl m:crayons-avatar--2xl mr-4 shrink-0">
|
||
<img loading="lazy" alt="kouts profile image" class="crayons-avatar__image" width="100" height="100" src="https://res.cloudinary.com/practicaldev/image/fetch/s--QTEj7Pk4--/c_imagga_scale,f_auto,fl_progressive,h_100,q_auto,w_100/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/317954/2318385d-b16b-4bc1-ab9d-36f31e9d5c6b.jpg" />
|
||
</span>
|
||
<div>
|
||
<h3 class="fs-xl mb-0 lh-tight">A Vue dropdown menu with Floating Vue & Tailwind</h3>
|
||
<p class="opacity-75 pt-1">
|
||
Giannis Koutsaftakis - <time datetime="2022-08-28T20:40:23Z">Aug 28</time>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
<a href="/itskunal/why-and-what-to-plan-for-building-apps-4jk1" data-preload-image="https://res.cloudinary.com/practicaldev/image/fetch/s--BZutrBcX--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ulnsdvh1j1pdwn05tazz.jpg" class="crayons-link mt-6 block">
|
||
<div class="flex items-center">
|
||
<span class="crayons-avatar crayons-avatar--xl m:crayons-avatar--2xl mr-4 shrink-0">
|
||
<img loading="lazy" alt="itskunal profile image" class="crayons-avatar__image" width="100" height="100" src="https://res.cloudinary.com/practicaldev/image/fetch/s--Std9IBjZ--/c_imagga_scale,f_auto,fl_progressive,h_100,q_auto,w_100/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/830225/fa5880f7-1ebd-4498-acb3-be64f6b07273.jpeg" />
|
||
</span>
|
||
<div>
|
||
<h3 class="fs-xl mb-0 lh-tight">Why and what to plan for building apps.</h3>
|
||
<p class="opacity-75 pt-1">
|
||
Kunal Agrawal - <time datetime="2022-08-28T10:31:10Z">Aug 28</time>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
<a href="/richkurtzman/announcing-fathyms-new-revamped-user-interface-e3m" data-preload-image="https://res.cloudinary.com/practicaldev/image/fetch/s--OgblzOiG--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jobnhnjljxsq0tu4inxz.png" class="crayons-link mt-6 block">
|
||
<div class="flex items-center">
|
||
<span class="crayons-avatar crayons-avatar--xl m:crayons-avatar--2xl mr-4 shrink-0">
|
||
<img loading="lazy" alt="richkurtzman profile image" class="crayons-avatar__image" width="100" height="100" src="https://res.cloudinary.com/practicaldev/image/fetch/s--RWWVJ5ea--/c_imagga_scale,f_auto,fl_progressive,h_100,q_auto,w_100/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/808339/86e57767-dd16-428d-9314-bb83e3cfa8b5.jpeg" />
|
||
</span>
|
||
<div>
|
||
<h3 class="fs-xl mb-0 lh-tight">Announcing Fathym's new revamped user interface</h3>
|
||
<p class="opacity-75 pt-1">
|
||
Rich Kurtzman - <time datetime="2022-08-09T17:23:27Z">Aug 9</time>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
<a href="/ajuni880/how-to-set-page-title-in-angular-14-33c6" data-preload-image="" class="crayons-link mt-6 block">
|
||
<div class="flex items-center">
|
||
<span class="crayons-avatar crayons-avatar--xl m:crayons-avatar--2xl mr-4 shrink-0">
|
||
<img loading="lazy" alt="ajuni880 profile image" class="crayons-avatar__image" width="100" height="100" src="https://res.cloudinary.com/practicaldev/image/fetch/s--ySLVMvcJ--/c_imagga_scale,f_auto,fl_progressive,h_100,q_auto,w_100/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/703854/1e05d7f7-378d-4c7e-b416-c80ecf245063.png" />
|
||
</span>
|
||
<div>
|
||
<h3 class="fs-xl mb-0 lh-tight">How to set page title in angular 14</h3>
|
||
<p class="opacity-75 pt-1">
|
||
Junaid Ramzan - <time datetime="2022-08-09T11:01:00Z">Aug 9</time>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</section>
|
||
|
||
</div>
|
||
</main>
|
||
|
||
<aside class="crayons-layout__sidebar-right" aria-label="Author details">
|
||
<div class="crayons-article-sticky grid gap-4 break-word" id="article-show-primary-sticky-nav">
|
||
<div class="crayons-card crayons-card--secondary branded-7 p-4 pt-0 gap-4 grid" style="border-top-color: #000000;">
|
||
<div class="-mt-4">
|
||
<a href="/deviouslab" class="flex">
|
||
<span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0">
|
||
<img src="https://res.cloudinary.com/practicaldev/image/fetch/s--KKwyI7I_--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/651460/d1dcccea-40b5-492b-9a75-563235914c20.png" class="crayons-avatar__image" alt="" loading="lazy" />
|
||
</span>
|
||
<span class="crayons-link crayons-subtitle-2 mt-5">DeviousLab</span>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="print-hidden">
|
||
<button name="button" type="button" data-info="{"className":"User","style":"","id":651460,"name":"DeviousLab"}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: DeviousLab" aria-pressed="false">Follow</button>
|
||
</div>
|
||
<div class="color-base-70">
|
||
I'm aiming to become proficient in the MERN stack and eventually become a full-stack developer. Attempting to gain knowledge in the cloud computing area with AWS and in DevOps.
|
||
</div>
|
||
|
||
<div class="user-metadata-details">
|
||
<ul class="user-metadata-details-inner">
|
||
<li>
|
||
<div class="key">
|
||
Location
|
||
</div>
|
||
<div class="value">
|
||
Dubai
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="key">
|
||
Education
|
||
</div>
|
||
<div class="value">
|
||
Heriot-Watt University
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="key">
|
||
Work
|
||
</div>
|
||
<div class="value">
|
||
Junior Software Engineer
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="key">
|
||
Joined
|
||
</div>
|
||
<div class="value">
|
||
<time datetime="2021-06-18T04:10:03Z" class="date">Jun 18, 2021</time>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="crayons-card crayons-card--secondary">
|
||
<header class="crayons-card__header">
|
||
<h3 class="crayons-subtitle-2">
|
||
Trending on <a href="https://dev.to">DEV Community 👩💻👨💻</a>
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" width="24" height="24" role="img" aria-labelledby="a5itlfvg6zvunfqvcn2ynuv6cp913n8i" class="crayons-icon crayons-icon--default"><title id="a5itlfvg6zvunfqvcn2ynuv6cp913n8i">Hot</title>
|
||
<g class="nc-icon-wrapper">
|
||
<path fill="#F4900C" d="M39 23a16.96 16.96 0 00-1.04-5.868c-.46 5.389-3.333 8.157-6.335 6.868-2.812-1.208-.917-5.917-.777-8.164.236-3.809-.012-8.169-6.931-11.794 2.875 5.5.333 8.917-2.333 9.125-2.958.231-5.667-2.542-4.667-7.042-3.238 2.386-3.332 6.402-2.333 9 1.042 2.708-.042 4.958-2.583 5.208-2.84.28-4.418-3.041-2.963-8.333A16.936 16.936 0 005 23c0 9.389 7.611 17 17 17s17-7.611 17-17z"></path>
|
||
<path fill="#FFCC4D" d="M32.394 27.999c.148 3.084-2.561 4.293-4.019 3.709-2.106-.843-1.541-2.291-2.083-5.291s-2.625-5.083-5.708-6c2.25 6.333-1.247 8.667-3.08 9.084-1.872.426-3.753-.001-3.968-4.007A11.964 11.964 0 0010 34c0 .368.023.73.055 1.09C13.125 38.124 17.342 40 22 40s8.875-1.876 11.945-4.91c.032-.36.055-.722.055-1.09 0-2.187-.584-4.236-1.606-6.001z"></path>
|
||
</g>
|
||
</svg>
|
||
|
||
</h3>
|
||
</header>
|
||
<div>
|
||
<a class="crayons-link crayons-link--contentful flex" href="/rohitmore07/mistakes-when-learning-to-code-4j40">
|
||
<span class="crayons-avatar mr-2 shrink-0">
|
||
<img src="https://res.cloudinary.com/practicaldev/image/fetch/s--2Tul0186--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/809821/648e2cd1-8b36-4bd8-bcb4-0a1eff347aa1.jpg" class="crayons-avatar__image" loading="lazy" alt="Rohit More profile image">
|
||
</span>
|
||
<div>
|
||
Mistakes when learning to code
|
||
<div class="crayons-link__secondary -ml-1">
|
||
<span class="mr-1"><span class="opacity-50">#</span>programming</span>
|
||
<span class="mr-1"><span class="opacity-50">#</span>beginners</span>
|
||
<span class="mr-1"><span class="opacity-50">#</span>webdev</span>
|
||
<span class="mr-1"><span class="opacity-50">#</span>productivity</span>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
<a class="crayons-link crayons-link--contentful flex" href="/josefine/what-is-good-dx-for-you-3hog">
|
||
<span class="crayons-avatar mr-2 shrink-0">
|
||
<img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ZM53egnd--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/346852/7f60ac10-beec-4ac9-804c-ce508de15d09.jpeg" class="crayons-avatar__image" loading="lazy" alt="Josefine Schfr profile image">
|
||
</span>
|
||
<div>
|
||
What is good DX for you?
|
||
<div class="crayons-link__secondary -ml-1">
|
||
<span class="mr-1"><span class="opacity-50">#</span>watercooler</span>
|
||
<span class="mr-1"><span class="opacity-50">#</span>discuss</span>
|
||
<span class="mr-1"><span class="opacity-50">#</span>devrel</span>
|
||
<span class="mr-1"><span class="opacity-50">#</span>webdev</span>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
<a class="crayons-link crayons-link--contentful flex" href="/awcode0x/i-made-website-for-me-check-it-4mdd">
|
||
<span class="crayons-avatar mr-2 shrink-0">
|
||
<img src="https://res.cloudinary.com/practicaldev/image/fetch/s--fWtval4y--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/867765/01b6a821-e555-40e7-8cc7-a96d0389758d.png" class="crayons-avatar__image" loading="lazy" alt="AWCode0X profile image">
|
||
</span>
|
||
<div>
|
||
I Made website for me. Check it
|
||
<div class="crayons-link__secondary -ml-1">
|
||
<span class="mr-1"><span class="opacity-50">#</span>webdev</span>
|
||
<span class="mr-1"><span class="opacity-50">#</span>javascript</span>
|
||
<span class="mr-1"><span class="opacity-50">#</span>discuss</span>
|
||
<span class="mr-1"><span class="opacity-50">#</span>website</span>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</aside>
|
||
</div>
|
||
|
||
|
||
<div class="mod-actions-menu print-hidden"></div>
|
||
<div data-testid="unpublish-post-modal-container" class="unpublish-post-modal-container hidden"></div>
|
||
<div id="suspend-modal-content" class="hidden">
|
||
<p>
|
||
Once suspended, deviouslab will not be able to comment or publish posts until their suspension is removed.
|
||
</p>
|
||
|
||
<div class="crayons-field mt-4">
|
||
<label
|
||
for="suspend-reason-userid-651460"
|
||
class="crayons-field__label">
|
||
Note:
|
||
</label>
|
||
<textarea
|
||
id="suspend-reason-userid-651460"
|
||
rows="4"
|
||
cols="70"
|
||
placeholder="Reason for suspension"
|
||
class="crayons-textfield"
|
||
aria-describedby="suspension-reason-error"
|
||
required></textarea>
|
||
<p
|
||
id="suspension-reason-error"
|
||
data-testid="suspension-reason-error"
|
||
class="suspend-reason-error crayons-field__description"
|
||
style="color: red;"
|
||
aria-live="assertive">
|
||
</p>
|
||
</div>
|
||
<div class="mt-4">
|
||
<button
|
||
id="submit-user-suspend-btn"
|
||
class="c-btn c-btn--primary c-btn--destructive"
|
||
data-btn-action="suspend"
|
||
data-reason-selector="#suspend-reason-userid-651460"
|
||
data-user-id="651460"
|
||
data-username="deviouslab">
|
||
Submit & Suspend
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="unsuspend-modal-content" class="hidden">
|
||
<p>
|
||
Once unsuspended, deviouslab will be able to comment and publish posts again.
|
||
</p>
|
||
|
||
<div class="crayons-field mt-4">
|
||
<label
|
||
for="unsuspend-reason-userid-651460"
|
||
class="crayons-field__label">
|
||
Note:
|
||
</label>
|
||
<textarea
|
||
id="unsuspend-reason-userid-651460"
|
||
rows="4"
|
||
cols="70"
|
||
placeholder="Reason for unsuspension"
|
||
class="crayons-textfield"
|
||
aria-describedby="unsuspension-reason-error"
|
||
required></textarea>
|
||
<p
|
||
id="unsuspension-reason-error"
|
||
data-testid="unsuspension-reason-error"
|
||
class="unsuspend-reason-error crayons-field__description"
|
||
style="color: red;"
|
||
aria-live="assertive">
|
||
</p>
|
||
</div>
|
||
<div class="mt-4">
|
||
<button
|
||
id="submit-user-unsuspend-btn"
|
||
class="c-btn c-btn--primary"
|
||
data-btn-action="unsuspend"
|
||
data-reason-selector="#unsuspend-reason-userid-651460"
|
||
data-user-id="651460"
|
||
data-username="deviouslab">
|
||
Submit & Unsuspend
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="unpublish-all-posts" class="hidden">
|
||
<p>
|
||
Once unpublished, all posts by deviouslab will become hidden and only accessible to themselves.
|
||
</p>
|
||
<p class="mt-2">
|
||
If deviouslab is not suspended, they can still re-publish their posts from their dashboard.
|
||
</p>
|
||
<div class="mt-4">
|
||
<button
|
||
id="unpublish-all-posts-submit-btn"
|
||
class="c-btn c-btn--destructive c-btn--primary"
|
||
data-user-id="651460">
|
||
Unpublish all posts
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="unpublish-post-modal" class="hidden">
|
||
<p>
|
||
Once unpublished, this post will become invisible to the public
|
||
and only accessible to DeviousLab.
|
||
</p>
|
||
<p>They can still re-publish the post if they are not suspended.</p>
|
||
<div class="mt-4">
|
||
<button
|
||
destructive
|
||
variant="primary"
|
||
class="c-btn c-btn--primary c-btn--destructive"
|
||
id="confirm-unpublish-post-action">
|
||
Unpublish post
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="flag-user-modal-content" class="hidden">
|
||
<p>
|
||
Thanks for keeping DEV Community 👩💻👨💻 safe. Here is what you can do to flag deviouslab:
|
||
</p>
|
||
|
||
<div class="crayons-field crayons-field--radio mt-4">
|
||
<input
|
||
type="radio"
|
||
id="flag-user-radio-input"
|
||
name="flag-user-radio-input"
|
||
class="crayons-radio"
|
||
data-reactable-id="651460"
|
||
data-category="vomit"
|
||
data-reactable-type="User" />
|
||
<label for="flag-user-radio-input" class="crayons-field__label">
|
||
Make all posts by deviouslab less visible
|
||
<p class="crayons-field__description">
|
||
deviouslab consistently posts content that violates DEV Community 👩💻👨💻's
|
||
code of conduct because it is harassing, offensive or spammy.
|
||
</p>
|
||
</label>
|
||
</div>
|
||
|
||
<div class="mt-4">
|
||
<a
|
||
href="javascript:void(0);"
|
||
id="report-inappropriate-content"
|
||
data-report-abuse-link="/report-abuse?url=https://dev.to/deviouslab/seo-for-web-developers-m54">
|
||
Report other inappropriate conduct
|
||
</a>
|
||
</div>
|
||
|
||
<div class="mt-6">
|
||
<p
|
||
id="unselected-radio-error"
|
||
data-testid="unselected-radio-error"
|
||
class="crayons-field__description mb-4"
|
||
style="color: red;"
|
||
aria-live="assertive">
|
||
</p>
|
||
<button
|
||
id="confirm-flag-user-action"
|
||
class="c-btn c-btn--primary c-btn--destructive"
|
||
data-category="vomit"
|
||
data-reactable-type="User"
|
||
data-user-id="651460"
|
||
data-username="deviouslab">
|
||
Confirm Flag
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="unflag-user-modal-content" class="hidden">
|
||
<p>
|
||
Unflagging deviouslab will restore default visibility to their posts.
|
||
</p>
|
||
|
||
<div class="mt-6">
|
||
<button
|
||
id="confirm-unflag-user-action"
|
||
class="c-btn c-btn--primary"
|
||
data-category="vomit"
|
||
data-reactable-type="User"
|
||
data-user-id="651460"
|
||
data-username="deviouslab">
|
||
Confirm Unflag
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="fullscreen-code js-fullscreen-code"></div>
|
||
<script src="https://dev.to/packs/js/runtime~followButtons-91991dc218fd32d1de3d.js" defer="defer"></script>
|
||
<script src="https://dev.to/packs/js/7-9d9e7f322e96466bfbbe.chunk.js" defer="defer"></script>
|
||
<script src="https://dev.to/packs/js/followButtons-eadbbd9ac23fd9fd0110.chunk.js" defer="defer"></script>
|
||
|
||
<script>
|
||
var waitingOnPodcast = setInterval(function() {
|
||
if (typeof initializePodcastPlayback !== 'undefined') {
|
||
initializePodcastPlayback();
|
||
clearInterval(waitingOnPodcast);
|
||
}
|
||
}, 1);
|
||
|
||
if (document.head.querySelector('meta[name="user-signed-in"][content="true"]')) {
|
||
function displayPollResults(json) {
|
||
var totalVotes = json.voting_data.votes_count;
|
||
json.voting_data.votes_distribution.forEach(function(point) {
|
||
var pollOptionItem = document.getElementById('poll_option_list_item_'+point[0]);
|
||
var optionText = document.getElementById('poll_option_label_'+point[0]).textContent;
|
||
if (json.user_vote_poll_option_id === point[0]) {
|
||
var votedClass = 'optionvotedfor'
|
||
} else {
|
||
var votedClass = 'optionnotvotedfor'
|
||
}
|
||
if (totalVotes === 0) {
|
||
var percent = 0;
|
||
} else {
|
||
var percent = (point[1]/totalVotes)*100;
|
||
}
|
||
var roundedPercent = Math.round( percent * 10 ) / 10
|
||
var percentFromRight = (100-roundedPercent)
|
||
var html = '<span><span class="ltag-votepercent ltag-'+votedClass+'" style="right:'+percentFromRight+'%"></span> <span class="ltag-votepercenttext">'+optionText+' — '+roundedPercent+'%</span></span>';
|
||
pollOptionItem.innerHTML = html;
|
||
pollOptionItem.classList.add('already-voted')
|
||
document.getElementById('showmethemoney-'+json.poll_id).innerHTML = '<span class="ltag-voting-results-count">'+totalVotes+' total votes</span>';
|
||
})
|
||
}
|
||
|
||
var polls = document.getElementsByClassName('ltag-poll');
|
||
for (var i = 0; i < polls.length; i += 1) {
|
||
var poll = polls[i]
|
||
var pollId = poll.dataset.pollId
|
||
window.fetch('/poll_votes/'+pollId)
|
||
.then(function(response){
|
||
response.json().then(
|
||
function(json) {
|
||
if (json.voted) {
|
||
displayPollResults(json)
|
||
} else {
|
||
var els = document.getElementById('poll_'+json.poll_id).getElementsByClassName('ltag-polloption');
|
||
|
||
for (i = 0; i < els.length; i += 1) {
|
||
els[i].addEventListener('click', function(e) {
|
||
var tokenMeta = document.querySelector("meta[name='csrf-token']")
|
||
if (!tokenMeta) {
|
||
alert('Whoops. There was an error. Your vote was not counted. Try refreshing the page.')
|
||
return
|
||
}
|
||
var csrfToken = tokenMeta.getAttribute('content')
|
||
var optionId = e.target.dataset.optionId
|
||
window.fetch('/poll_votes', {
|
||
method: 'POST',
|
||
headers: {
|
||
'X-CSRF-Token': csrfToken,
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify({poll_vote: { poll_option_id: optionId } }),
|
||
credentials: 'same-origin',
|
||
}).then(function(response){
|
||
response.json().then(function(j){displayPollResults(j)})
|
||
})
|
||
});
|
||
}
|
||
|
||
document.getElementById('showmethemoney-'+json.poll_id).addEventListener('click', function() {
|
||
pollId = this.dataset.pollId
|
||
window.fetch('/poll_skips', {
|
||
method: 'POST',
|
||
headers: {
|
||
'X-CSRF-Token': csrfToken,
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify({poll_skip: {poll_id: pollId }}),
|
||
credentials: 'same-origin',
|
||
}).then(function(response){
|
||
response.json().then(function(j){displayPollResults(j)})
|
||
})
|
||
});
|
||
}
|
||
}
|
||
)
|
||
})
|
||
}
|
||
} else {
|
||
var els = document.getElementsByClassName('ltag-poll')
|
||
for (i = 0; i < els.length; i += 1) {
|
||
els[i].onclick = function(e) {
|
||
if (typeof showLoginModal !== "undefined") {
|
||
showLoginModal();
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
function activateRunkitTags() {
|
||
if (!areAnyRunkitTagsPresent())
|
||
return
|
||
|
||
var checkRunkit = setInterval(function() {
|
||
try {
|
||
dynamicallyLoadRunkitLibrary()
|
||
|
||
if (typeof(RunKit) === 'undefined') {
|
||
return
|
||
}
|
||
|
||
replaceTagContentsWithRunkitWidget()
|
||
clearInterval(checkRunkit);
|
||
} catch(e) {
|
||
console.error(e);
|
||
clearInterval(checkRunkit);
|
||
}
|
||
}, 200);
|
||
}
|
||
|
||
function isRunkitTagAlreadyActive(runkitTag) {
|
||
return runkitTag.querySelector("iframe") !== null;
|
||
};
|
||
|
||
function areAnyRunkitTagsPresent() {
|
||
var presentRunkitTags = document.getElementsByClassName("runkit-element");
|
||
|
||
return presentRunkitTags.length > 0
|
||
}
|
||
|
||
function replaceTagContentsWithRunkitWidget() {
|
||
var targets = document.getElementsByClassName("runkit-element");
|
||
for (var i = 0; i < targets.length; i++) {
|
||
if (isRunkitTagAlreadyActive(targets[i])) {
|
||
continue;
|
||
}
|
||
|
||
var wrapperContent = targets[i].textContent;
|
||
if (/^(<iframe src)/.test(wrapperContent) === false) {
|
||
if (targets[i].children.length > 0) {
|
||
var preamble = targets[i].children[0].textContent;
|
||
var content = targets[i].children[1].textContent;
|
||
targets[i].innerHTML = "";
|
||
var notebook = RunKit.createNotebook({
|
||
element: targets[i],
|
||
source: content,
|
||
preamble: preamble
|
||
});
|
||
}
|
||
}
|
||
}
|
||
};
|
||
|
||
function dynamicallyLoadRunkitLibrary() {
|
||
if (typeof(dynamicallyLoadScript) === "undefined")
|
||
return
|
||
|
||
dynamicallyLoadScript("//embed.runkit.com")
|
||
}
|
||
|
||
activateRunkitTags();
|
||
|
||
var videoPreviews = document.getElementsByClassName("ltag__twitter-tweet__media__video-wrapper");
|
||
[].forEach.call(videoPreviews, function(el) {
|
||
el.onclick = function(e) {
|
||
var divHeight = el.offsetHeight;
|
||
el.style.maxHeight = divHeight + "px";
|
||
el.getElementsByClassName("ltag__twitter-tweet__media--video-preview")[0].style.display = "none";
|
||
el.getElementsByClassName("ltag__twitter-tweet__video")[0].style.display = "block";
|
||
el.getElementsByTagName("video")[0].play();
|
||
}
|
||
});
|
||
var tweets = document.getElementsByClassName("ltag__twitter-tweet__main");
|
||
[].forEach.call(tweets, function(tweet){
|
||
tweet.onclick = function(e) {
|
||
if (e.target.nodeName == "A" || e.target.parentElement.nodeName == "A") {
|
||
return;
|
||
}
|
||
window.open(tweet.dataset.url,"_blank");
|
||
}
|
||
});
|
||
|
||
</script>
|
||
|
||
<div id="runtime-banner-container"></div>
|
||
</div>
|
||
</div>
|
||
<footer class="crayons-footer print-hidden">
|
||
<div id="footer-container" class="crayons-footer__container">
|
||
<p class="fs-s crayons-footer__description">
|
||
<a class="c-link c-link--branded fw-medium" aria-label="DEV Community 👩💻👨💻 Home" href="/">DEV Community 👩💻👨💻</a> — A constructive and inclusive social network for software developers. With you every step of your journey.
|
||
</p>
|
||
<div class="fs-s">
|
||
<p>Built on <a class="c-link c-link--branded" target="_blank" rel="noopener" href="https://www.forem.com">Forem</a> — the <a target="_blank" rel="noopener" class="c-link c-link--branded" href="https://dev.to/t/opensource">open source</a> software that powers <a target="_blank" rel="noopener" class="c-link c-link--branded" href="https://dev.to">DEV</a> and other inclusive communities.</p>
|
||
<p>Made with love and <a target="_blank" rel="noopener" class="c-link c-link--branded" href="https://dev.to/t/rails">Ruby on Rails</a>. DEV Community 👩💻👨💻 <span title="copyright">©</span> 2016 - 2022.</p>
|
||
</div>
|
||
<a href="https://www.forem.com" target="_blank" rel="noopener" class="c-link c-link c-link--block c-link--icon-alone self-center">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" role="img" aria-labelledby="akbyshgrko5nnw4cuo3a1gi9wjeu9ug4" class="crayons-icon crayons-icon--default c-link__icon"><title id="akbyshgrko5nnw4cuo3a1gi9wjeu9ug4">Forem logo</title>
|
||
<g clip-path="url(#clip0)" fill="#1AB3A6">
|
||
<path d="M4.603 1.438a8.056 8.056 0 017.643 5.478 8.543 8.543 0 00-3.023 5.968H8.054C3.606 12.884 0 9.296 0 4.87V1.468a.03.03 0 01.03-.03h4.573zM23.97 6.515a.03.03 0 01.03.03v2.833c0 4.11-3.354 7.442-7.491 7.442h-2.881v5.726h-2.305V14.53l.022-1.145c.294-3.843 3.526-6.87 7.469-6.87h5.155z"></path>
|
||
</g>
|
||
<defs>
|
||
<clipPath id="clip0">
|
||
<path fill="#fff" d="M0 0h24v24H0z"></path>
|
||
</clipPath>
|
||
</defs>
|
||
</svg>
|
||
|
||
</a>
|
||
</div>
|
||
</footer>
|
||
<div id="snack-zone"></div>
|
||
|
||
<div id="global-signup-modal" class="authentication-modal hidden">
|
||
<div class="authentication-modal__container">
|
||
<figure class="authentication-modal__image-container">
|
||
<img class="authentication-modal__image" src="https://res.cloudinary.com/practicaldev/image/fetch/s--pcSkTMZL--/c_limit,f_auto,fl_progressive,q_80,w_190/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/devlogo-pwa-512.png"
|
||
alt="DEV Community 👩💻👨💻" loading="lazy" />
|
||
</figure>
|
||
<div class="authentication-modal__content">
|
||
<p class="authentication-modal__description">
|
||
We're a place where coders share, stay up-to-date and grow their careers.
|
||
</p>
|
||
</div>
|
||
<div class="authentication-modal__actions">
|
||
<a href="/enter" class="crayons-btn" aria-label="Log in" data-no-instant>
|
||
Log in
|
||
</a>
|
||
<a href="/enter?state=new-user" class="crayons-btn crayons-btn--ghost-brand" aria-label="Create new account" data-no-instant>
|
||
Create account
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="https://dev.to/packs/js/runtime~signupModalShortcuts-b9beb5ee6e65857034c5.js" defer="defer"></script>
|
||
<script src="https://dev.to/packs/js/signupModalShortcuts-08cc6638ea94ce22e5a3.chunk.js" defer="defer"></script>
|
||
|
||
<div id="i18n-translations" data-translations="{"en":{"core":{"add_comment":"Add comment","beta":"beta","comment":"Comment","copy_link":"Copy link","edit_profile":"Edit profile","follow":"Follow","follow_back":"Follow back","following":"Following","like":"Like","loading":"loading...","reaction":"Reaction","report_abuse":"Report abuse","search":"Search","success_settings":"Successfully updated settings."}}}"></div>
|
||
</body>
|
||
</html>
|