CINXE.COM
doug-source - DEV Community
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>doug-source - DEV Community</title> <meta name="last-updated" content="2025-04-10 00:42:16 UTC"> <meta name="user-signed-in" content="false"> <meta name="head-cached-at" content="1744245736"> <meta name="environment" content="production"> <link rel="stylesheet" href="https://assets.dev.to/assets/minimal-6f5c5ed9c571b36ab9c316526d7032b5a4c789f3a4c35503492eb03376615fca.css" media="all" id="main-minimal-stylesheet" /> <link rel="stylesheet" href="https://assets.dev.to/assets/views-1c703342dce6eac414f19ca7fd07bcf83cbe44088659758144e52e7fa1e92dd3.css" media="all" id="main-views-stylesheet" /> <link rel="stylesheet" href="https://assets.dev.to/assets/crayons-0f2fc85bc159498f8ae6fba58c460e6deba863d02d59dfa994c1954976ddb6cc.css" media="all" id="main-crayons-stylesheet" /> <script src="https://assets.dev.to/assets/base-b8bdff515245fe895f3035d77697afb35d5d7e114bdf68291667479d4b289751.js" defer="defer"></script> <script src="https://assets.dev.to/assets/application-7258612fccf5d56314a6e4ad1898b4f818f474c4bb3485e302428d489a769a17.js" defer="defer"></script> <script src="https://assets.dev.to/assets/baseInitializers-b74902d56433062a87f5f1ce74769baf2a1a698772f46952b0ac72bc95c4abfd.js" defer="defer"></script> <script src="https://assets.dev.to/assets/baseTracking-b6bf73e5ee66633e151e7d5b7c6bbccedfa4c59e3615be97b98c4c0f543ddae7.js" defer="defer"></script> <meta name="search-script" content="https://assets.dev.to/assets/Search-7dcdad3172ab4501a4598fe8b716c7a88146e79fd42256d36fb1b83e27bf77cf.js"> <link rel="canonical" href="https://dev.to/dougsource" /> <meta name="description" content="Software Developer"> <meta name="keywords" content="software development, engineering, rails, javascript, ruby"> <meta property="og:type" content="website" /> <meta property="og:url" content="https://dev.to/dougsource" /> <meta property="og:title" content="doug-source — DEV Community Profile" /> <meta property="og:image" content="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3otvb2z646ytpt1hl2rv.jpg" /> <meta property="og:description" content="Software Developer" /> <meta property="og:site_name" content="DEV Community" /> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@thepracticaldev"> <meta name="twitter:creator" content="@"> <meta name="twitter:title" content="doug-source — DEV Community Profile"> <meta name="twitter:description" content="Software Developer"> <meta name="twitter:image:src" content="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3otvb2z646ytpt1hl2rv.jpg" /> <link rel="alternate" type="application/rss+xml" title="DEV Community RSS Feed" href="https://dev.to/feed/dougsource" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> <link rel="icon" type="image/x-icon" href="https://media2.dev.to/dynamic/image/width=32,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png" /> <link rel="apple-touch-icon" href="https://media2.dev.to/dynamic/image/width=180,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png"> <link rel="apple-touch-icon" sizes="152x152" href="https://media2.dev.to/dynamic/image/width=152,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png"> <link rel="apple-touch-icon" sizes="180x180" href="https://media2.dev.to/dynamic/image/width=180,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png"> <link rel="apple-touch-icon" sizes="167x167" href="https://media2.dev.to/dynamic/image/width=167,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png"> <link href="https://media2.dev.to/dynamic/image/width=192,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png" rel="icon" sizes="192x192" /> <link href="https://media2.dev.to/dynamic/image/width=128,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.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://media2.dev.to/dynamic/image/width=512,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.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-subscription-icon="https://assets.dev.to/assets/subscription-icon-805dfa7ac7dd660f07ed8d654877270825b07a92a03841aa99a1093bd00431b2.png" data-locale="en" data-honeybadger-key="hbp_nqu4Y66HuEKlD6YRGssZuRQnPOjDm50J8Zkr" data-deployed-at="2025-04-08T14:55:14Z" data-latest-commit-id="5a0700de76701df15587c62080964d2cb5e88158" data-ga-tracking="UA-71991109-1" data-cookie-banner-user-context="logged_out_only" data-cookie-banner-platform-context="off" data-algolia-id="PRSOBFP46H" data-algolia-search-key="9aa7d31610cba78851c9b1f63776a9dd" data-algolia-display="true" data-dynamic-url-component="bmar11" data-ga4-tracking-id="G-TYEM8Y3JN3"> <script> if (navigator.userAgent === 'ForemWebView/1' || window.frameElement) { document.body.classList.add("hidden-shell"); } </script> <link rel="stylesheet" href="https://assets.dev.to/assets/minimal-6f5c5ed9c571b36ab9c316526d7032b5a4c789f3a4c35503492eb03376615fca.css" media="all" id="secondary-minimal-stylesheet" /> <link rel="stylesheet" href="https://assets.dev.to/assets/views-1c703342dce6eac414f19ca7fd07bcf83cbe44088659758144e52e7fa1e92dd3.css" media="all" id="secondary-views-stylesheet" /> <link rel="stylesheet" href="https://assets.dev.to/assets/crayons-0f2fc85bc159498f8ae6fba58c460e6deba863d02d59dfa994c1954976ddb6cc.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 id="topbar" class="crayons-header topbar 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="ac5olq6u09i71hn65cl1oum7dqllsboi" class="crayons-icon"><title id="ac5olq6u09i71hn65cl1oum7dqllsboi">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://media2.dev.to/dynamic/image/quality=100/https://dev-to-uploads.s3.amazonaws.com/uploads/logos/resized_logo_UQww2soKuUsjaOGNB38o.png" style="aspect-ratio: 10 / 8" 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 id="search-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 right-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="arcevt4c42m2aa8m0rl1d0zpnatr3hn2" aria-hidden="true" class="crayons-icon"><title id="arcevt4c42m2aa8m0rl1d0zpnatr3hn2">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> <a class="crayons-header--search-brand-indicator" href="https://www.algolia.com/developers/?utm_source=devto&utm_medium=referral" target="_blank" rel="noopener noreferrer"> Powered by <svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" width="24" height="24" viewBox="0 0 500 500.34" role="img" aria-labelledby="a1vhtiatoc2abmq6bq0u495cm1ad9jdr" aria-hidden="true" class="crayons-icon"><title id="a1vhtiatoc2abmq6bq0u495cm1ad9jdr">Search</title> <defs></defs><path class="cls-1" d="M250,0C113.38,0,2,110.16,.03,246.32c-2,138.29,110.19,252.87,248.49,253.67,42.71,.25,83.85-10.2,120.38-30.05,3.56-1.93,4.11-6.83,1.08-9.52l-23.39-20.74c-4.75-4.22-11.52-5.41-17.37-2.92-25.5,10.85-53.21,16.39-81.76,16.04-111.75-1.37-202.04-94.35-200.26-206.1,1.76-110.33,92.06-199.55,202.8-199.55h202.83V407.68l-115.08-102.25c-3.72-3.31-9.43-2.66-12.43,1.31-18.47,24.46-48.56,39.67-81.98,37.36-46.36-3.2-83.92-40.52-87.4-86.86-4.15-55.28,39.65-101.58,94.07-101.58,49.21,0,89.74,37.88,93.97,86.01,.38,4.28,2.31,8.28,5.53,11.13l29.97,26.57c3.4,3.01,8.8,1.17,9.63-3.3,2.16-11.55,2.92-23.6,2.07-35.95-4.83-70.39-61.84-127.01-132.26-131.35-80.73-4.98-148.23,58.18-150.37,137.35-2.09,77.15,61.12,143.66,138.28,145.36,32.21,.71,62.07-9.42,86.2-26.97l150.36,133.29c6.45,5.71,16.62,1.14,16.62-7.48V9.49C500,4.25,495.75,0,490.51,0H250Z"></path> </svg> Algolia </a> </div> </div> </form> </div> <div class="flex items-center h-100 ml-auto"> <div class="flex" id="authentication-top-nav-actions"> <span class="hidden m:block"> <a href="https://dev.to/enter" class="c-link c-link--block mr-2 whitespace-nowrap ml-auto" data-no-instant> Log in </a> </span> <a href="https://dev.to/enter?state=new-user" data-tracking-id="ca_top_nav" data-tracking-source="top_navbar" class="c-cta c-cta--branded whitespace-nowrap mr-2" data-no-instant> Create account </a> </div> </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="ag6x6plkf7et7niu58gyi02t80tf0xl1" aria-hidden="true" class="crayons-icon c-btn__icon"><title id="ag6x6plkf7et7niu58gyi02t80tf0xl1">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 js-navigation-links-container" id="authentication-hamburger-actions"> </div> </div> <div class="hamburger__overlay js-hamburger-trigger"></div> </div> <div id="active-broadcast" class="broadcast-wrapper"></div> <div id="page-content" class="wrapper stories stories-index" data-current-page="stories-index"> <div id="page-content-inner" data-internal-nav="false"> <div id="page-route-change" class="screen-reader-only" aria-live="polite" aria-atomic="true"></div> <main id="main-content"> <script type="application/ld+json"> {"@context":"http://schema.org","@type":"Person","mainEntityOfPage":{"@type":"WebPage","@id":"https://dev.to/dougsource"},"url":"https://dev.to/dougsource","sameAs":["https://github.com/doug-source"],"image":"https://media2.dev.to/dynamic/image/width=320,height=320,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png","name":"doug-source","description":"Software Developer"} </script> <style> :root { --profile-brand-color: #000000; } </style> <div class="brand-bg"> <div class="crayons-layout crayons-layout--limited-l pt-7 m:pt-9"> <header class="profile-header crayons-card mt-2"> <div class="relative profile-header__top"> <span class="crayons-avatar crayons-avatar--3xl"> <img src="https://media2.dev.to/dynamic/image/width=320,height=320,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" width="128" height="128" alt="doug-source profile picture" class="crayons-avatar__image"> </span> <div class="profile-header__actions"> <button id="user-follow-butt" class="crayons-btn whitespace-nowrap follow-action-button follow-user" data-info='{"id":1102248,"className":"User","name":"doug-source"}'>Follow</button> <div class="profile-dropdown ml-2 s:relative hide-if-belongs-to-current-user-1102248" data-username="dougsource"> <button id="user-profile-dropdown" aria-expanded="false" aria-controls="user-profile-dropdownmenu" aria-haspopup="true" class="crayons-btn crayons-btn--ghost-dimmed crayons-btn--icon"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a45xpy7q7cz6gtdp39a8rm9g1afgu5bq" class="crayons-icon dropdown-icon"><title id="a45xpy7q7cz6gtdp39a8rm9g1afgu5bq">User actions</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="user-profile-dropdownmenu" class="crayons-dropdown left-2 right-2 s:right-0 s:left-auto top-100 mt-1"> <span class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/dougsource"></span> </div> </div> </div> </div> <div class="profile-header__details" data-url="/users/1102248"> <div class="items-center js-username-container mb-2"> <h1 class="crayons-title lh-tight"> doug-source <span class="ml-2"></span> </h1> </div> <p class="fs-base profile-header__bio m:fs-l color-base-90 mb-4 mx-auto max-w-100 m:max-w-75">Software Developer</p> <div class="profile-header__meta"> <span class="profile-header__meta__item"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ahie52hyd7inydkhd9twrom0qnw5rgq2" class="crayons-icon mr-2 shrink-0"><title id="ahie52hyd7inydkhd9twrom0qnw5rgq2">Joined</title> <path d="M8 6v3.999h3V6h2v3.999h3V6h2v3.999L19 10a3 3 0 012.995 2.824L22 13v1c0 1.014-.377 1.94-.999 2.645L21 21a1 1 0 01-1 1H4a1 1 0 01-1-1v-4.36a4.025 4.025 0 01-.972-2.182l-.022-.253L2 14v-1a3 3 0 012.824-2.995L5 10l1-.001V6h2zm11 6H5a1 1 0 00-.993.883L4 13v.971l.003.147a2 2 0 003.303 1.4c.363-.312.602-.744.674-1.218l.015-.153.005-.176c.036-1.248 1.827-1.293 1.989-.134l.01.134.004.147a2 2 0 003.992.031l.012-.282c.124-1.156 1.862-1.156 1.986 0l.012.282a2 2 0 003.99 0L20 14v-1a1 1 0 00-.883-.993L19 12zM7 1c1.32.871 1.663 2.088 1.449 2.888a1.5 1.5 0 11-2.898-.776C5.85 2.002 7 2.5 7 1zm5 0c1.32.871 1.663 2.088 1.449 2.888a1.5 1.5 0 01-2.898-.776C10.85 2.002 12 2.5 12 1zm5 0c1.32.871 1.663 2.088 1.449 2.888a1.5 1.5 0 01-2.898-.776C15.85 2.002 17 2.5 17 1z"></path> </svg> <span> Joined on <time datetime="2023-06-15T18:54:10Z" class="date">Jun 15, 2023</time> </span> </span> <a href="https://github.com/doug-source" target="_blank" rel="noopener me" class="profile-header__meta__item p-1"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a5j7yb8thoqxytumob5q2n4hcip59ds1" class="crayons-icon shrink-0"><title id="a5j7yb8thoqxytumob5q2n4hcip59ds1">github website</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> </div> </div> <div class="p-3 block m:hidden js-user-info-trigger-wrapper"> <button type="button" class="my-3 crayons-btn crayons-btn--outlined w-100 js-user-info-trigger">More info about @dougsource</button> </div> </header> </div> </div> <div class="crayons-layout crayons-layout--limited-l crayons-layout--2-cols crayons-layout--2-cols--1-2 pt-4 m:pt-0" id="index-container" data-params="{"user_id":1102248,"class_name":"Article","sort_by":"published_at","sort_direction":"desc"}" data-which="articles" data-tag="" data-feed="base-feed" data-articles-since="0"> <div class="crayons-layout__sidebar-left crayons-layout__content"> <div class="m:gap-4 hidden m:grid js-user-info"> <div class="crayons-card crayons-card--secondary"> <header class="crayons-card__header"> <h3 class="crayons-subtitle-3">Badges</h3> </header> <div class="crayons-card__body"> <div class="grid gap-4 grid-cols-3 s:grid-cols-4 m:grid-cols-2 align-center items-center js-profile-badges"> <div role="button" onclick="window.Forem.showModal({size: 'medium', showHeader: false, contentSelector: '#badge-160', overlay: true})" title="1 Week Community Wellness Streak" class="js-profile-badge relative"> <img src="https://media2.dev.to/dynamic/image/width=180,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fbadge%2Fbadge_image%2F160%2FCommunity_Wellness_Streak_Badge-01.png" alt="1 Week Community Wellness Streak" class="mx-auto w-75 h-auto align-middle" style="object-fit: contain; cursor: pointer; width: 100%; aspect-ratio: 1 / 1; max-width: 80px;" loading="lazy" /> </div> <div id="badge-160" class="hidden"> <div class="badge_details"> <div class="badge-image-container p-3"> <img class="badge-image" src="https://media2.dev.to/dynamic/image/width=192,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fbadge%2Fbadge_image%2F160%2FCommunity_Wellness_Streak_Badge-01.png" alt="1 Week Community Wellness Streak badge" title="1 Week Community Wellness Streak" loading="lazy" /> </div> <div class="badge_text_content"> <h4 class="title fw-800 fs-l">1 Week Community Wellness Streak</h4> <p class="description">For actively engaging with the community by posting at least 2 comments in a single week.</p> <button class="got-it-btn items-start c-btn c-btn--primary" onclick="window.Forem.closeModal()">Got it</button> </div> <div class="close" onclick="window.Forem.closeModal()"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" class="close_icon"><title>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> </div> </div> </div> <div role="button" onclick="window.Forem.showModal({size: 'medium', showHeader: false, contentSelector: '#badge-2', overlay: true})" title="One Year Club" class="js-profile-badge relative"> <img src="https://media2.dev.to/dynamic/image/width=180,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fbadge%2Fbadge_image%2F2%2FVersion2-08.png" alt="One Year Club" class="mx-auto w-75 h-auto align-middle" style="object-fit: contain; cursor: pointer; width: 100%; aspect-ratio: 1 / 1; max-width: 80px;" loading="lazy" /> </div> <div id="badge-2" class="hidden"> <div class="badge_details"> <div class="badge-image-container p-3"> <img class="badge-image" src="https://media2.dev.to/dynamic/image/width=192,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fbadge%2Fbadge_image%2F2%2FVersion2-08.png" alt="One Year Club badge" title="One Year Club" loading="lazy" /> </div> <div class="badge_text_content"> <h4 class="title fw-800 fs-l">One Year Club</h4> <p class="description">This badge celebrates the longevity of those who have been a registered member of the DEV Community for at least one year.</p> <button class="got-it-btn items-start c-btn c-btn--primary" onclick="window.Forem.closeModal()">Got it</button> </div> <div class="close" onclick="window.Forem.closeModal()"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" class="close_icon"><title>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> </div> </div> </div> <div role="button" onclick="window.Forem.showModal({size: 'medium', showHeader: false, contentSelector: '#badge-280', overlay: true})" title="Writing Debut" class="js-profile-badge relative"> <img src="https://media2.dev.to/dynamic/image/width=180,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fbadge%2Fbadge_image%2F280%2FWriting_Streak_Badges-05.png" alt="Writing Debut" class="mx-auto w-75 h-auto align-middle" style="object-fit: contain; cursor: pointer; width: 100%; aspect-ratio: 1 / 1; max-width: 80px;" loading="lazy" /> </div> <div id="badge-280" class="hidden"> <div class="badge_details"> <div class="badge-image-container p-3"> <img class="badge-image" src="https://media2.dev.to/dynamic/image/width=192,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fbadge%2Fbadge_image%2F280%2FWriting_Streak_Badges-05.png" alt="Writing Debut badge" title="Writing Debut" loading="lazy" /> </div> <div class="badge_text_content"> <h4 class="title fw-800 fs-l">Writing Debut</h4> <p class="description">Awarded for writing and sharing your first DEV post! Continue sharing your work to earn the 4 Week Writing Streak Badge.</p> <button class="got-it-btn items-start c-btn c-btn--primary" onclick="window.Forem.closeModal()">Got it</button> </div> <div class="close" onclick="window.Forem.closeModal()"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" class="close_icon"><title>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> </div> </div> </div> </div> </div> </div> <div class="crayons-card crayons-card--secondary p-4"> <div class="flex items-center mb-4"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="agks8zryxxogey69m0qhron7amz2kk3s" class="crayons-icon mr-3 color-base-50"><title id="agks8zryxxogey69m0qhron7amz2kk3s">Post</title> <path d="M19 22H5a3 3 0 01-3-3V3a1 1 0 011-1h14a1 1 0 011 1v12h4v4a3 3 0 01-3 3zm-1-5v2a1 1 0 002 0v-2h-2zm-2 3V4H4v15a1 1 0 001 1h11zM6 7h8v2H6V7zm0 4h8v2H6v-2zm0 4h5v2H6v-2z"></path> </svg> 55 posts published </div> <div class="flex items-center mb-4"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ao7teiatcxx8uxhillmd1ecq3s58e9op" class="crayons-icon mr-3 color-base-50"><title id="ao7teiatcxx8uxhillmd1ecq3s58e9op">Comment</title> <path d="M10 3h4a8 8 0 010 16v3.5c-5-2-12-5-12-11.5a8 8 0 018-8zm2 14h2a6 6 0 000-12h-4a6 6 0 00-6 6c0 3.61 2.462 5.966 8 8.48V17z"></path> </svg> 14 comments written </div> <div class="flex items-center"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="at6rf2qdl63r5flqlk01bqhiia7xw2y4" class="crayons-icon mr-3 color-base-50"><title id="at6rf2qdl63r5flqlk01bqhiia7xw2y4">Tag</title> <path d="M7.784 14l.42-4H4V8h4.415l.525-5h2.011l-.525 5h3.989l.525-5h2.011l-.525 5H20v2h-3.784l-.42 4H20v2h-4.415l-.525 5h-2.011l.525-5H9.585l-.525 5H7.049l.525-5H4v-2h3.784zm2.011 0h3.99l.42-4h-3.99l-.42 4z"></path> </svg> 7 tags followed </div> </div> </div> </div> <main class="crayons-layout__content articles-list" id="articles-list"> <div class="substories" id="substories"> <div class="crayons-story " data-feed-content-id="1950437" data-content-user-id="1102248"> <a href="https://dev.to/dougsource/estrutura-do-projeto-react-para-escalar-decomposition-camadas-e-hierarquia-1kdh" aria-labelledby="article-link-1950437" class="crayons-story__hidden-navigation-link">Estrutura do projeto React para escalar: decomposition, camadas e hierarquia</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/dougsource" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" alt="dougsource profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/dougsource" class="crayons-story__secondary fw-medium m:hidden"> doug-source </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1950437" aria-controls="story-author-preview-content-1950437" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="doug-source profile details"> doug-source </button> <div id="story-author-preview-content-1950437" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/dougsource" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">doug-source</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1102248,"className":"User","name":"doug-source"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1102248"></div> </div> </div> </div> </div> <a href="https://dev.to/dougsource/estrutura-do-projeto-react-para-escalar-decomposition-camadas-e-hierarquia-1kdh" class="crayons-story__tertiary fs-xs"><time datetime="2025-04-05T01:51:44Z">Apr 5</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1743817904"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/dougsource/estrutura-do-projeto-react-para-escalar-decomposition-camadas-e-hierarquia-1kdh" data-preload-image="" id="article-link-1950437"> Estrutura do projeto React para escalar: decomposition, camadas e hierarquia </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " 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 crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(235, 223, 55, 0.10); --tag-prefix: #ebdf37; --tag-bg-hover: rgba(235, 223, 55, 0.10); --tag-prefix-hover: #ebdf37; " href="/t/architecture"><span class="crayons-tag__prefix">#</span>architecture</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(205, 205, 0, 0.10); --tag-prefix: #cdcd00; --tag-bg-hover: rgba(205, 205, 0, 0.10); --tag-prefix-hover: #cdcd00; " href="/t/braziliandevs"><span class="crayons-tag__prefix">#</span>braziliandevs</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/dougsource/estrutura-do-projeto-react-para-escalar-decomposition-camadas-e-hierarquia-1kdh" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1950437" aria-label="Add a comment to post - Estrutura do projeto React para escalar: decomposition, camadas e hierarquia"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">1<span class="hidden s:inline"> reaction</span></span> </div> </a> <a href="https://dev.to/dougsource/estrutura-do-projeto-react-para-escalar-decomposition-camadas-e-hierarquia-1kdh#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Estrutura do projeto React para escalar: decomposition, camadas e hierarquia"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="amluigtpsvrf2uycufq06yt2zwmrcxcz" class="crayons-icon"><title id="amluigtpsvrf2uycufq06yt2zwmrcxcz">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 21 min read </small> </div> </div> </div> </div> </div> <div id="comments-locked-cta" class="crayons-card mt-2 m:mt-0 mb-2 m:p-8 p-4"> <div class="align-center"> <svg xmlns="http://www.w3.org/2000/svg" width="132" height="102" viewBox="0 0 132 102" fill="none" aria-hidden="true"> <g filter="url(#a)"> <rect y="6" width="128" height="92" rx="8" fill="url(#b)"></rect> <rect x=".5" y="6.5" width="127" height="91" rx="7.5" stroke="#171717"></rect> </g> <path d="M.5 14A7.5 7.5 0 0 1 8 6.5h112a7.5 7.5 0 0 1 7.5 7.5v11.5H.5V14Z" fill="url(#c)" stroke="#171717"></path> <path opacity=".2" d="M13 63h27v2H13v-2ZM13 70h21v2H13v-2ZM13 77h28v2H13v-2ZM13 84h24v2H13v-2Z" fill="#171717"></path> <g filter="url(#d)"> <circle cx="64" cy="24" r="24" fill="url(#e)"></circle> <circle cx="64" cy="24" r="23.571" stroke="#171717" stroke-width=".857"></circle> </g> <circle cx="64" cy="16.286" r="5.571" fill="url(#f)" stroke="#171717" stroke-width=".857"></circle> <path d="M75.571 33.03c0 1.32-.535 2.285-1.373 3.008-.854.736-2.033 1.23-3.306 1.552-2.545.645-5.319.569-6.174.525a5.576 5.576 0 0 0-.579 0c-.855.044-3.629.12-6.174-.525-1.273-.322-2.452-.816-3.305-1.552-.84-.723-1.374-1.688-1.374-3.009 0-3.077 1.237-5.424 3.228-7.012 2-1.596 4.792-2.446 7.915-2.446 3.122 0 5.913.85 7.915 2.446 1.99 1.588 3.227 3.936 3.227 7.012Z" fill="url(#g)" stroke="#171717" stroke-width=".857"></path> <path d="M49.5 64a3.5 3.5 0 0 1 3.5-3.5h64a3.5 3.5 0 0 1 3.5 3.5v33.5h-71V64Z" fill="url(#h)" stroke="#171717"></path> <circle cx="59" cy="72" r="3.5" fill="#A7F3D0" stroke="#171717"></circle> <path fill="#171717" d="M66 71h20v2H66z"></path> <path opacity=".2" d="M66 80h30v2H66v-2ZM66 87h44v2H66v-2Z" fill="#171717"></path> <defs> <linearGradient id="b" x1="64" y1="6" x2="64" y2="98" gradientUnits="userSpaceOnUse"> <stop offset=".736" stop-color="#fff"></stop> <stop offset="1" stop-color="#D7D7D7"></stop> </linearGradient> <linearGradient id="c" x1="64" y1="6" x2="64" y2="98" gradientUnits="userSpaceOnUse"> <stop offset=".736" stop-color="#fff"></stop> <stop offset="1" stop-color="#D7D7D7"></stop> </linearGradient> <linearGradient id="e" x1="64" y1="0" x2="64" y2="48" gradientUnits="userSpaceOnUse"> <stop stop-color="#FFE89E"></stop> <stop offset="1" stop-color="#FFC50A"></stop> </linearGradient> <linearGradient id="f" x1="64" y1="10.286" x2="64" y2="23.623" gradientUnits="userSpaceOnUse"> <stop offset=".292" stop-color="#fff"></stop> <stop offset="1" stop-color="#E7E7E7"></stop> </linearGradient> <linearGradient id="g" x1="64.429" y1="23.143" x2="64.429" y2="40.291" gradientUnits="userSpaceOnUse"> <stop offset=".292" stop-color="#fff"></stop> <stop offset="1" stop-color="#E7E7E7"></stop> </linearGradient> <linearGradient id="h" x1="85" y1="52" x2="85" y2="114" gradientUnits="userSpaceOnUse"> <stop offset=".292" stop-color="#fff"></stop> <stop offset="1" stop-color="#E7E7E7"></stop> </linearGradient> <filter id="a" x="0" y="6" width="132" height="96" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood> <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"></feColorMatrix> <feOffset dx="4" dy="4"></feOffset> <feComposite in2="hardAlpha" operator="out"></feComposite> <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"></feColorMatrix> <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_811_2367"></feBlend> <feBlend in="SourceGraphic" in2="effect1_dropShadow_811_2367" result="shape"></feBlend> </filter> <filter id="d" x="40" y="0" width="51.429" height="51.429" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood> <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"></feColorMatrix> <feOffset dx="3.429" dy="3.429"></feOffset> <feComposite in2="hardAlpha" operator="out"></feComposite> <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"></feColorMatrix> <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_811_2367"></feBlend> <feBlend in="SourceGraphic" in2="effect1_dropShadow_811_2367" result="shape"></feBlend> </filter> </defs> </svg> </div> <h3 class="crayons-subtitle-3 mt-5 fs-l align-center"> Want to connect with doug-source? </h3> <p class="align-center mt-1 color-base-60 fs-base"> Create an account to connect with doug-source. You can also sign in below to proceed if you already have an account. </p> <div class="align-center mt-4"> <a href="/enter?state=new-user" class="crayons-btn crayons-btn--l w-75" data-tracking-id="ca_profile_comment_section_locked" data-tracking-source="comments_locked_cta" data-no-instant> Create Account </a> </div> <div class="align-center mt-4"> <span> Already have an account? <a href="/enter" data-tracking-id="si_profile_comment_section_locked" data-tracking-source="comments_locked_cta"> Sign in </a> </span> </div> </div> <div class="crayons-story " data-feed-content-id="2363179" data-content-user-id="1102248"> <a href="https://dev.to/dougsource/logica-de-tail-call-optimization-tco-sem-tco-39ki" aria-labelledby="article-link-2363179" class="crayons-story__hidden-navigation-link">Lógica de tail call optimization (TCO) sem TCO</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/dougsource" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" alt="dougsource profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/dougsource" class="crayons-story__secondary fw-medium m:hidden"> doug-source </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2363179" aria-controls="story-author-preview-content-2363179" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="doug-source profile details"> doug-source </button> <div id="story-author-preview-content-2363179" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/dougsource" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">doug-source</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1102248,"className":"User","name":"doug-source"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1102248"></div> </div> </div> </div> </div> <a href="https://dev.to/dougsource/logica-de-tail-call-optimization-tco-sem-tco-39ki" class="crayons-story__tertiary fs-xs"><time datetime="2025-03-28T15:10:44Z">Mar 28</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1743174644"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/dougsource/logica-de-tail-call-optimization-tco-sem-tco-39ki" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxl1hhon54kp46q4mcpfk.png" id="article-link-2363179"> Lógica de tail call optimization (TCO) sem TCO </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(205, 205, 0, 0.10); --tag-prefix: #cdcd00; --tag-bg-hover: rgba(205, 205, 0, 0.10); --tag-prefix-hover: #cdcd00; " href="/t/braziliandevs"><span class="crayons-tag__prefix">#</span>braziliandevs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/dougsource/logica-de-tail-call-optimization-tco-sem-tco-39ki" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2363179" aria-label="Add a comment to post - Lógica de tail call optimization (TCO) sem TCO"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">1<span class="hidden s:inline"> reaction</span></span> </div> </a> <a href="https://dev.to/dougsource/logica-de-tail-call-optimization-tco-sem-tco-39ki#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Lógica de tail call optimization (TCO) sem TCO"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a3v0d36r4d6mia10vign48m3hc193nms" class="crayons-icon"><title id="a3v0d36r4d6mia10vign48m3hc193nms">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2125731" data-content-user-id="1102248"> <a href="https://dev.to/dougsource/de-uma-pagina-para-varios-components-7oa" aria-labelledby="article-link-2125731" class="crayons-story__hidden-navigation-link">De uma página para vários components</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/dougsource" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" alt="dougsource profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/dougsource" class="crayons-story__secondary fw-medium m:hidden"> doug-source </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2125731" aria-controls="story-author-preview-content-2125731" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="doug-source profile details"> doug-source </button> <div id="story-author-preview-content-2125731" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/dougsource" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">doug-source</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1102248,"className":"User","name":"doug-source"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1102248"></div> </div> </div> </div> </div> <a href="https://dev.to/dougsource/de-uma-pagina-para-varios-components-7oa" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-28T16:31:25Z">Nov 28 '24</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1732811485"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/dougsource/de-uma-pagina-para-varios-components-7oa" data-preload-image="" id="article-link-2125731"> De uma página para vários components </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(205, 205, 0, 0.10); --tag-prefix: #cdcd00; --tag-bg-hover: rgba(205, 205, 0, 0.10); --tag-prefix-hover: #cdcd00; " href="/t/braziliandevs"><span class="crayons-tag__prefix">#</span>braziliandevs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/web"><span class="crayons-tag__prefix">#</span>web</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/dougsource/de-uma-pagina-para-varios-components-7oa#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - De uma página para vários components"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="afk0ar7f1g6rpz38zmjoq6je4argdm8u" class="crayons-icon"><title id="afk0ar7f1g6rpz38zmjoq6je4argdm8u">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2097158" data-content-user-id="1102248"> <a href="https://dev.to/dougsource/mathceil-vs-mathfloor-b1e" aria-labelledby="article-link-2097158" class="crayons-story__hidden-navigation-link">Math.ceil vs Math.floor</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/dougsource" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" alt="dougsource profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/dougsource" class="crayons-story__secondary fw-medium m:hidden"> doug-source </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2097158" aria-controls="story-author-preview-content-2097158" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="doug-source profile details"> doug-source </button> <div id="story-author-preview-content-2097158" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/dougsource" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">doug-source</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1102248,"className":"User","name":"doug-source"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1102248"></div> </div> </div> </div> </div> <a href="https://dev.to/dougsource/mathceil-vs-mathfloor-b1e" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-12T00:17:09Z">Nov 12 '24</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1731370629"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/dougsource/mathceil-vs-mathfloor-b1e" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7trn02d0bmye8bt5oqi5.jpg" id="article-link-2097158"> Math.ceil vs Math.floor </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(205, 205, 0, 0.10); --tag-prefix: #cdcd00; --tag-bg-hover: rgba(205, 205, 0, 0.10); --tag-prefix-hover: #cdcd00; " href="/t/braziliandevs"><span class="crayons-tag__prefix">#</span>braziliandevs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/dougsource/mathceil-vs-mathfloor-b1e#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Math.ceil vs Math.floor"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a9ahbphyjbdxv1kkeoxakoicfwmtmnwv" class="crayons-icon"><title id="a9ahbphyjbdxv1kkeoxakoicfwmtmnwv">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1948968" data-content-user-id="1102248"> <a href="https://dev.to/dougsource/12-tecnicas-modernas-de-css-para-problemas-de-css-mais-antigos-1mkh" aria-labelledby="article-link-1948968" class="crayons-story__hidden-navigation-link">12 técnicas modernas de CSS para problemas de CSS mais antigos</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/dougsource" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" alt="dougsource profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/dougsource" class="crayons-story__secondary fw-medium m:hidden"> doug-source </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1948968" aria-controls="story-author-preview-content-1948968" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="doug-source profile details"> doug-source </button> <div id="story-author-preview-content-1948968" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/dougsource" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">doug-source</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1102248,"className":"User","name":"doug-source"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1102248"></div> </div> </div> </div> </div> <a href="https://dev.to/dougsource/12-tecnicas-modernas-de-css-para-problemas-de-css-mais-antigos-1mkh" class="crayons-story__tertiary fs-xs"><time datetime="2024-09-06T02:06:46Z">Sep 6 '24</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1725588406"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/dougsource/12-tecnicas-modernas-de-css-para-problemas-de-css-mais-antigos-1mkh" data-preload-image="" id="article-link-1948968"> 12 técnicas modernas de CSS para problemas de CSS mais antigos </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " 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 crayons-tag--monochrome " style=" --tag-bg: rgba(205, 205, 0, 0.10); --tag-prefix: #cdcd00; --tag-bg-hover: rgba(205, 205, 0, 0.10); --tag-prefix-hover: #cdcd00; " href="/t/braziliandevs"><span class="crayons-tag__prefix">#</span>braziliandevs</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/dougsource/12-tecnicas-modernas-de-css-para-problemas-de-css-mais-antigos-1mkh" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1948968" aria-label="Add a comment to post - 12 técnicas modernas de CSS para problemas de CSS mais antigos"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">2<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="https://dev.to/dougsource/12-tecnicas-modernas-de-css-para-problemas-de-css-mais-antigos-1mkh#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - 12 técnicas modernas de CSS para problemas de CSS mais antigos"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="abzjgq8dz94e745qiisor2k1ul4cv6sq" class="crayons-icon"><title id="abzjgq8dz94e745qiisor2k1ul4cv6sq">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 17 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1948801" data-content-user-id="1102248"> <a href="https://dev.to/dougsource/remover-background-de-uma-image-usando-apenas-css-56be" aria-labelledby="article-link-1948801" class="crayons-story__hidden-navigation-link">Remover background de uma image usando apenas CSS</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/dougsource" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" alt="dougsource profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/dougsource" class="crayons-story__secondary fw-medium m:hidden"> doug-source </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1948801" aria-controls="story-author-preview-content-1948801" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="doug-source profile details"> doug-source </button> <div id="story-author-preview-content-1948801" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/dougsource" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">doug-source</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1102248,"className":"User","name":"doug-source"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1102248"></div> </div> </div> </div> </div> <a href="https://dev.to/dougsource/remover-background-de-uma-image-usando-apenas-css-56be" class="crayons-story__tertiary fs-xs"><time datetime="2024-09-04T17:53:36Z">Sep 4 '24</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1725472416"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/dougsource/remover-background-de-uma-image-usando-apenas-css-56be" data-preload-image="" id="article-link-1948801"> Remover background de uma image usando apenas CSS </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " 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 crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 131, 53, 0.10); --tag-prefix: #008335; --tag-bg-hover: rgba(0, 131, 53, 0.10); --tag-prefix-hover: #008335; " href="/t/beginners"><span class="crayons-tag__prefix">#</span>beginners</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(205, 205, 0, 0.10); --tag-prefix: #cdcd00; --tag-bg-hover: rgba(205, 205, 0, 0.10); --tag-prefix-hover: #cdcd00; " href="/t/braziliandevs"><span class="crayons-tag__prefix">#</span>braziliandevs</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/dougsource/remover-background-de-uma-image-usando-apenas-css-56be" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1948801" aria-label="Add a comment to post - Remover background de uma image usando apenas CSS"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">2<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="https://dev.to/dougsource/remover-background-de-uma-image-usando-apenas-css-56be#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Remover background de uma image usando apenas CSS"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="acgrsbdyh5ypguibst8xadoxgbrvjez1" class="crayons-icon"><title id="acgrsbdyh5ypguibst8xadoxgbrvjez1">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1948797" data-content-user-id="1102248"> <a href="https://dev.to/dougsource/como-funciona-o-clear-em-css-1m7i" aria-labelledby="article-link-1948797" class="crayons-story__hidden-navigation-link">Como funciona o clear em CSS?</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/dougsource" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" alt="dougsource profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/dougsource" class="crayons-story__secondary fw-medium m:hidden"> doug-source </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1948797" aria-controls="story-author-preview-content-1948797" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="doug-source profile details"> doug-source </button> <div id="story-author-preview-content-1948797" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/dougsource" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">doug-source</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1102248,"className":"User","name":"doug-source"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1102248"></div> </div> </div> </div> </div> <a href="https://dev.to/dougsource/como-funciona-o-clear-em-css-1m7i" class="crayons-story__tertiary fs-xs"><time datetime="2024-09-04T17:52:41Z">Sep 4 '24</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1725472361"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/dougsource/como-funciona-o-clear-em-css-1m7i" data-preload-image="" id="article-link-1948797"> Como funciona o clear em CSS? </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " 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 crayons-tag--monochrome " style=" --tag-bg: rgba(205, 205, 0, 0.10); --tag-prefix: #cdcd00; --tag-bg-hover: rgba(205, 205, 0, 0.10); --tag-prefix-hover: #cdcd00; " href="/t/braziliandevs"><span class="crayons-tag__prefix">#</span>braziliandevs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 131, 53, 0.10); --tag-prefix: #008335; --tag-bg-hover: rgba(0, 131, 53, 0.10); --tag-prefix-hover: #008335; " href="/t/beginners"><span class="crayons-tag__prefix">#</span>beginners</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/dougsource/como-funciona-o-clear-em-css-1m7i" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1948797" aria-label="Add a comment to post - Como funciona o clear em CSS?"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">1<span class="hidden s:inline"> reaction</span></span> </div> </a> <a href="https://dev.to/dougsource/como-funciona-o-clear-em-css-1m7i#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Como funciona o clear em CSS?"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aninl1outxlveuwdfqkviyl9u9j45vph" class="crayons-icon"><title id="aninl1outxlveuwdfqkviyl9u9j45vph">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1948770" data-content-user-id="1102248"> <a href="https://dev.to/dougsource/como-me-tornei-melhor-com-css-31fe" aria-labelledby="article-link-1948770" class="crayons-story__hidden-navigation-link">Como me tornei melhor com CSS</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/dougsource" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" alt="dougsource profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/dougsource" class="crayons-story__secondary fw-medium m:hidden"> doug-source </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1948770" aria-controls="story-author-preview-content-1948770" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="doug-source profile details"> doug-source </button> <div id="story-author-preview-content-1948770" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/dougsource" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">doug-source</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1102248,"className":"User","name":"doug-source"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1102248"></div> </div> </div> </div> </div> <a href="https://dev.to/dougsource/como-me-tornei-melhor-com-css-31fe" class="crayons-story__tertiary fs-xs"><time datetime="2024-09-04T17:51:36Z">Sep 4 '24</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1725472296"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/dougsource/como-me-tornei-melhor-com-css-31fe" data-preload-image="" id="article-link-1948770"> Como me tornei melhor com CSS </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 131, 53, 0.10); --tag-prefix: #008335; --tag-bg-hover: rgba(0, 131, 53, 0.10); --tag-prefix-hover: #008335; " href="/t/beginners"><span class="crayons-tag__prefix">#</span>beginners</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " 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 crayons-tag--monochrome " style=" --tag-bg: rgba(205, 205, 0, 0.10); --tag-prefix: #cdcd00; --tag-bg-hover: rgba(205, 205, 0, 0.10); --tag-prefix-hover: #cdcd00; " href="/t/braziliandevs"><span class="crayons-tag__prefix">#</span>braziliandevs</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/dougsource/como-me-tornei-melhor-com-css-31fe" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1948770" aria-label="Add a comment to post - Como me tornei melhor com CSS"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">1<span class="hidden s:inline"> reaction</span></span> </div> </a> <a href="https://dev.to/dougsource/como-me-tornei-melhor-com-css-31fe#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Como me tornei melhor com CSS"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a7lgksmt012koope6k99a0aotklrvmpy" class="crayons-icon"><title id="a7lgksmt012koope6k99a0aotklrvmpy">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1947974" data-content-user-id="1102248"> <a href="https://dev.to/dougsource/como-funciona-import-em-css-quais-sao-os-pros-e-os-contras-156g" aria-labelledby="article-link-1947974" class="crayons-story__hidden-navigation-link">Como funciona @import em CSS? Quais são os prós e os contras. 🤔</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/dougsource" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" alt="dougsource profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/dougsource" class="crayons-story__secondary fw-medium m:hidden"> doug-source </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1947974" aria-controls="story-author-preview-content-1947974" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="doug-source profile details"> doug-source </button> <div id="story-author-preview-content-1947974" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/dougsource" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">doug-source</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1102248,"className":"User","name":"doug-source"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1102248"></div> </div> </div> </div> </div> <a href="https://dev.to/dougsource/como-funciona-import-em-css-quais-sao-os-pros-e-os-contras-156g" class="crayons-story__tertiary fs-xs"><time datetime="2024-08-05T05:11:26Z">Aug 5 '24</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1722834686"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/dougsource/como-funciona-import-em-css-quais-sao-os-pros-e-os-contras-156g" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ff9had11632hdtvimaapn.jpg" id="article-link-1947974"> Como funciona @import em CSS? Quais são os prós e os contras. 🤔 </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " 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 crayons-tag--monochrome " style=" --tag-bg: rgba(255, 51, 224, 0.10); --tag-prefix: #ff33e0; --tag-bg-hover: rgba(255, 51, 224, 0.10); --tag-prefix-hover: #ff33e0; " href="/t/frontend"><span class="crayons-tag__prefix">#</span>frontend</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(205, 205, 0, 0.10); --tag-prefix: #cdcd00; --tag-bg-hover: rgba(205, 205, 0, 0.10); --tag-prefix-hover: #cdcd00; " href="/t/braziliandevs"><span class="crayons-tag__prefix">#</span>braziliandevs</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/dougsource/como-funciona-import-em-css-quais-sao-os-pros-e-os-contras-156g" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1947974" aria-label="Add a comment to post - Como funciona @import em CSS? Quais são os prós e os contras. 🤔"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">5<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="https://dev.to/dougsource/como-funciona-import-em-css-quais-sao-os-pros-e-os-contras-156g#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Como funciona @import em CSS? Quais são os prós e os contras. 🤔"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a5gevu42hranxihp28a566khg6uld8w4" class="crayons-icon"><title id="a5gevu42hranxihp28a566khg6uld8w4">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1947881" data-content-user-id="1102248"> <a href="https://dev.to/dougsource/a-diferenca-entre-pseudo-classes-e-pseudo-elements-em-css-a4" aria-labelledby="article-link-1947881" class="crayons-story__hidden-navigation-link">A diferença entre Pseudo-Classes e Pseudo-Elements em CSS</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/dougsource" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" alt="dougsource profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/dougsource" class="crayons-story__secondary fw-medium m:hidden"> doug-source </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1947881" aria-controls="story-author-preview-content-1947881" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="doug-source profile details"> doug-source </button> <div id="story-author-preview-content-1947881" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/dougsource" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">doug-source</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1102248,"className":"User","name":"doug-source"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1102248"></div> </div> </div> </div> </div> <a href="https://dev.to/dougsource/a-diferenca-entre-pseudo-classes-e-pseudo-elements-em-css-a4" class="crayons-story__tertiary fs-xs"><time datetime="2024-08-05T02:53:10Z">Aug 5 '24</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1722826390"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/dougsource/a-diferenca-entre-pseudo-classes-e-pseudo-elements-em-css-a4" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9j91heov3ra6iew0ipll.jpg" id="article-link-1947881"> A diferença entre Pseudo-Classes e Pseudo-Elements em CSS </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " 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 crayons-tag--monochrome " style=" --tag-bg: rgba(205, 205, 0, 0.10); --tag-prefix: #cdcd00; --tag-bg-hover: rgba(205, 205, 0, 0.10); --tag-prefix-hover: #cdcd00; " href="/t/braziliandevs"><span class="crayons-tag__prefix">#</span>braziliandevs</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/dougsource/a-diferenca-entre-pseudo-classes-e-pseudo-elements-em-css-a4" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1947881" aria-label="Add a comment to post - A diferença entre Pseudo-Classes e Pseudo-Elements em CSS"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">2<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="https://dev.to/dougsource/a-diferenca-entre-pseudo-classes-e-pseudo-elements-em-css-a4#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - A diferença entre Pseudo-Classes e Pseudo-Elements em CSS"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a4aw2azh78ipai16ttbwwp82rjwxogkv" class="crayons-icon"><title id="a4aw2azh78ipai16ttbwwp82rjwxogkv">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 5 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1947781" data-content-user-id="1102248"> <a href="https://dev.to/dougsource/escrevendo-logica-em-css-dln" aria-labelledby="article-link-1947781" class="crayons-story__hidden-navigation-link">Escrevendo Lógica em CSS</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/dougsource" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" alt="dougsource profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/dougsource" class="crayons-story__secondary fw-medium m:hidden"> doug-source </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1947781" aria-controls="story-author-preview-content-1947781" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="doug-source profile details"> doug-source </button> <div id="story-author-preview-content-1947781" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/dougsource" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">doug-source</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1102248,"className":"User","name":"doug-source"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1102248"></div> </div> </div> </div> </div> <a href="https://dev.to/dougsource/escrevendo-logica-em-css-dln" class="crayons-story__tertiary fs-xs"><time datetime="2024-08-05T00:21:31Z">Aug 5 '24</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1722817291"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/dougsource/escrevendo-logica-em-css-dln" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fru1gpr48vcw99kla98l7.jpg" id="article-link-1947781"> Escrevendo Lógica em CSS </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " 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 crayons-tag--monochrome " style=" --tag-bg: rgba(205, 205, 0, 0.10); --tag-prefix: #cdcd00; --tag-bg-hover: rgba(205, 205, 0, 0.10); --tag-prefix-hover: #cdcd00; " href="/t/braziliandevs"><span class="crayons-tag__prefix">#</span>braziliandevs</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/dougsource/escrevendo-logica-em-css-dln" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1947781" aria-label="Add a comment to post - Escrevendo Lógica em CSS"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">1<span class="hidden s:inline"> reaction</span></span> </div> </a> <a href="https://dev.to/dougsource/escrevendo-logica-em-css-dln#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Escrevendo Lógica em CSS"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aouen7gx2qf4wbop37u2p9ft3nm2qq6w" class="crayons-icon"><title id="aouen7gx2qf4wbop37u2p9ft3nm2qq6w">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 7 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1947762" data-content-user-id="1102248"> <a href="https://dev.to/dougsource/principios-de-design-uma-lista-dos-principios-de-design-53hf" aria-labelledby="article-link-1947762" class="crayons-story__hidden-navigation-link">Princípios de Design - Uma lista dos princípios de design</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/dougsource" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" alt="dougsource profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/dougsource" class="crayons-story__secondary fw-medium m:hidden"> doug-source </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1947762" aria-controls="story-author-preview-content-1947762" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="doug-source profile details"> doug-source </button> <div id="story-author-preview-content-1947762" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/dougsource" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">doug-source</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1102248,"className":"User","name":"doug-source"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1102248"></div> </div> </div> </div> </div> <a href="https://dev.to/dougsource/principios-de-design-uma-lista-dos-principios-de-design-53hf" class="crayons-story__tertiary fs-xs"><time datetime="2024-08-04T23:06:57Z">Aug 4 '24</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1722812817"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/dougsource/principios-de-design-uma-lista-dos-principios-de-design-53hf" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3snd5477nhpcj3wxdg9g.jpg" id="article-link-1947762"> Princípios de Design - Uma lista dos princípios de design </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(205, 205, 0, 0.10); --tag-prefix: #cdcd00; --tag-bg-hover: rgba(205, 205, 0, 0.10); --tag-prefix-hover: #cdcd00; " href="/t/braziliandevs"><span class="crayons-tag__prefix">#</span>braziliandevs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(6, 255, 106, 0.10); --tag-prefix: #06ff6a; --tag-bg-hover: rgba(6, 255, 106, 0.10); --tag-prefix-hover: #06ff6a; " href="/t/design"><span class="crayons-tag__prefix">#</span>design</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/dougsource/principios-de-design-uma-lista-dos-principios-de-design-53hf" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1947762" aria-label="Add a comment to post - Princípios de Design - Uma lista dos princípios de design"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">1<span class="hidden s:inline"> reaction</span></span> </div> </a> <a href="https://dev.to/dougsource/principios-de-design-uma-lista-dos-principios-de-design-53hf#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Princípios de Design - Uma lista dos princípios de design"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aca84l8p4n4f4wx4o6xgdevob4tyvlt9" class="crayons-icon"><title id="aca84l8p4n4f4wx4o6xgdevob4tyvlt9">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 12 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1938459" data-content-user-id="1102248"> <a href="https://dev.to/dougsource/css-grid-keywords-de-dimensionamento-31o3" aria-labelledby="article-link-1938459" class="crayons-story__hidden-navigation-link">CSS Grid: keywords de dimensionamento</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/dougsource" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" alt="dougsource profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/dougsource" class="crayons-story__secondary fw-medium m:hidden"> doug-source </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1938459" aria-controls="story-author-preview-content-1938459" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="doug-source profile details"> doug-source </button> <div id="story-author-preview-content-1938459" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/dougsource" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">doug-source</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1102248,"className":"User","name":"doug-source"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1102248"></div> </div> </div> </div> </div> <a href="https://dev.to/dougsource/css-grid-keywords-de-dimensionamento-31o3" class="crayons-story__tertiary fs-xs"><time datetime="2024-07-27T18:32:15Z">Jul 27 '24</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1722105135"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/dougsource/css-grid-keywords-de-dimensionamento-31o3" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqtu68bvlfei37ptanlb7.png" id="article-link-1938459"> CSS Grid: keywords de dimensionamento </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(254, 255, 165, 0.10); --tag-prefix: #FEFFA5; --tag-bg-hover: rgba(254, 255, 165, 0.10); --tag-prefix-hover: #FEFFA5; " href="/t/tutorial"><span class="crayons-tag__prefix">#</span>tutorial</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 131, 53, 0.10); --tag-prefix: #008335; --tag-bg-hover: rgba(0, 131, 53, 0.10); --tag-prefix-hover: #008335; " href="/t/beginners"><span class="crayons-tag__prefix">#</span>beginners</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(205, 205, 0, 0.10); --tag-prefix: #cdcd00; --tag-bg-hover: rgba(205, 205, 0, 0.10); --tag-prefix-hover: #cdcd00; " href="/t/braziliandevs"><span class="crayons-tag__prefix">#</span>braziliandevs</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/dougsource/css-grid-keywords-de-dimensionamento-31o3" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1938459" aria-label="Add a comment to post - CSS Grid: keywords de dimensionamento"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">1<span class="hidden s:inline"> reaction</span></span> </div> </a> <a href="https://dev.to/dougsource/css-grid-keywords-de-dimensionamento-31o3#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - CSS Grid: keywords de dimensionamento"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aha0i383ye4ropi33jp3qn8hbh2l5i69" class="crayons-icon"><title id="aha0i383ye4ropi33jp3qn8hbh2l5i69">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 4 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1935235" data-content-user-id="1102248"> <a href="https://dev.to/dougsource/criando-ux-com-texto-markdown-4aae" aria-labelledby="article-link-1935235" class="crayons-story__hidden-navigation-link">Criando UX com texto (markdown)</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/dougsource" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" alt="dougsource profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/dougsource" class="crayons-story__secondary fw-medium m:hidden"> doug-source </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1935235" aria-controls="story-author-preview-content-1935235" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="doug-source profile details"> doug-source </button> <div id="story-author-preview-content-1935235" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/dougsource" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">doug-source</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1102248,"className":"User","name":"doug-source"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1102248"></div> </div> </div> </div> </div> <a href="https://dev.to/dougsource/criando-ux-com-texto-markdown-4aae" class="crayons-story__tertiary fs-xs"><time datetime="2024-07-25T01:47:02Z">Jul 25 '24</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1721872022"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/dougsource/criando-ux-com-texto-markdown-4aae" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fc4usjzdh5dornl4xhi8o.jpg" id="article-link-1935235"> Criando UX com texto (markdown) </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 101, 179, 0.10); --tag-prefix: #0065B3; --tag-bg-hover: rgba(0, 101, 179, 0.10); --tag-prefix-hover: #0065B3; " href="/t/ux"><span class="crayons-tag__prefix">#</span>ux</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(205, 205, 0, 0.10); --tag-prefix: #cdcd00; --tag-bg-hover: rgba(205, 205, 0, 0.10); --tag-prefix-hover: #cdcd00; " href="/t/braziliandevs"><span class="crayons-tag__prefix">#</span>braziliandevs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(255, 255, 255, 0.10); --tag-prefix: #FFFFFF; --tag-bg-hover: rgba(255, 255, 255, 0.10); --tag-prefix-hover: #FFFFFF; " href="/t/markdown"><span class="crayons-tag__prefix">#</span>markdown</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/dougsource/criando-ux-com-texto-markdown-4aae#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Criando UX com texto (markdown)"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a7c2ytf2zg72mffy6zedab18nxovu86t" class="crayons-icon"><title id="a7c2ytf2zg72mffy6zedab18nxovu86t">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 1<span class="hidden s:inline"> comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 3 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1935132" data-content-user-id="1102248"> <a href="https://dev.to/dougsource/de-figma-para-react-aprimorando-o-desenvolvimento-de-ui-com-codia-ai-2oh3" aria-labelledby="article-link-1935132" class="crayons-story__hidden-navigation-link">De Figma para React: Aprimorando o desenvolvimento de UI com Codia AI</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/dougsource" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" alt="dougsource profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/dougsource" class="crayons-story__secondary fw-medium m:hidden"> doug-source </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1935132" aria-controls="story-author-preview-content-1935132" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="doug-source profile details"> doug-source </button> <div id="story-author-preview-content-1935132" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/dougsource" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">doug-source</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1102248,"className":"User","name":"doug-source"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1102248"></div> </div> </div> </div> </div> <a href="https://dev.to/dougsource/de-figma-para-react-aprimorando-o-desenvolvimento-de-ui-com-codia-ai-2oh3" class="crayons-story__tertiary fs-xs"><time datetime="2024-07-25T00:40:07Z">Jul 25 '24</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1721868007"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/dougsource/de-figma-para-react-aprimorando-o-desenvolvimento-de-ui-com-codia-ai-2oh3" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgmr9hicioxgt4rr86wf2.png" id="article-link-1935132"> De Figma para React: Aprimorando o desenvolvimento de UI com Codia AI </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(205, 205, 0, 0.10); --tag-prefix: #cdcd00; --tag-bg-hover: rgba(205, 205, 0, 0.10); --tag-prefix-hover: #cdcd00; " href="/t/braziliandevs"><span class="crayons-tag__prefix">#</span>braziliandevs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/figma"><span class="crayons-tag__prefix">#</span>figma</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/dougsource/de-figma-para-react-aprimorando-o-desenvolvimento-de-ui-com-codia-ai-2oh3" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1935132" aria-label="Add a comment to post - De Figma para React: Aprimorando o desenvolvimento de UI com Codia AI"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">1<span class="hidden s:inline"> reaction</span></span> </div> </a> <a href="https://dev.to/dougsource/de-figma-para-react-aprimorando-o-desenvolvimento-de-ui-com-codia-ai-2oh3#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - De Figma para React: Aprimorando o desenvolvimento de UI com Codia AI"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="agepnpu5zhl6ywo93r22y8qx4dlil7oz" class="crayons-icon"><title id="agepnpu5zhl6ywo93r22y8qx4dlil7oz">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 5 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1927307" data-content-user-id="1102248"> <a href="https://dev.to/dougsource/react-components-composition-como-acertar-isso-ehj" aria-labelledby="article-link-1927307" class="crayons-story__hidden-navigation-link">React components composition: como acertar isso</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/dougsource" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" alt="dougsource profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/dougsource" class="crayons-story__secondary fw-medium m:hidden"> doug-source </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1927307" aria-controls="story-author-preview-content-1927307" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="doug-source profile details"> doug-source </button> <div id="story-author-preview-content-1927307" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/dougsource" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">doug-source</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1102248,"className":"User","name":"doug-source"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1102248"></div> </div> </div> </div> </div> <a href="https://dev.to/dougsource/react-components-composition-como-acertar-isso-ehj" class="crayons-story__tertiary fs-xs"><time datetime="2024-07-18T16:37:23Z">Jul 18 '24</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1721320643"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/dougsource/react-components-composition-como-acertar-isso-ehj" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbyhz80rdrpuzeq0ojxug.jpg" id="article-link-1927307"> React components composition: como acertar isso </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " 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 crayons-tag--monochrome " style=" --tag-bg: rgba(254, 255, 165, 0.10); --tag-prefix: #FEFFA5; --tag-bg-hover: rgba(254, 255, 165, 0.10); --tag-prefix-hover: #FEFFA5; " href="/t/tutorial"><span class="crayons-tag__prefix">#</span>tutorial</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(205, 205, 0, 0.10); --tag-prefix: #cdcd00; --tag-bg-hover: rgba(205, 205, 0, 0.10); --tag-prefix-hover: #cdcd00; " href="/t/braziliandevs"><span class="crayons-tag__prefix">#</span>braziliandevs</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/dougsource/react-components-composition-como-acertar-isso-ehj#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - React components composition: como acertar isso"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ahrrepral59w7kaw1oeukltwsl2zd27a" class="crayons-icon"><title id="ahrrepral59w7kaw1oeukltwsl2zd27a">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 15 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1927038" data-content-user-id="1102248"> <a href="https://dev.to/dougsource/ativando-o-dark-mode-em-reactjs-com-scss-modules-2l47" aria-labelledby="article-link-1927038" class="crayons-story__hidden-navigation-link">Ativando o Dark Mode em React.js com SCSS Modules 🌙</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/dougsource" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" alt="dougsource profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/dougsource" class="crayons-story__secondary fw-medium m:hidden"> doug-source </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1927038" aria-controls="story-author-preview-content-1927038" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="doug-source profile details"> doug-source </button> <div id="story-author-preview-content-1927038" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/dougsource" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">doug-source</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1102248,"className":"User","name":"doug-source"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1102248"></div> </div> </div> </div> </div> <a href="https://dev.to/dougsource/ativando-o-dark-mode-em-reactjs-com-scss-modules-2l47" class="crayons-story__tertiary fs-xs"><time datetime="2024-07-18T01:02:04Z">Jul 18 '24</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1721264524"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/dougsource/ativando-o-dark-mode-em-reactjs-com-scss-modules-2l47" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdofb609wcv5okeczjfop.jpg" id="article-link-1927038"> Ativando o Dark Mode em React.js com SCSS Modules 🌙 </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/scss"><span class="crayons-tag__prefix">#</span>scss</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(205, 205, 0, 0.10); --tag-prefix: #cdcd00; --tag-bg-hover: rgba(205, 205, 0, 0.10); --tag-prefix-hover: #cdcd00; " href="/t/braziliandevs"><span class="crayons-tag__prefix">#</span>braziliandevs</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/dougsource/ativando-o-dark-mode-em-reactjs-com-scss-modules-2l47#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Ativando o Dark Mode em React.js com SCSS Modules 🌙"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a5y7f069ak2rzeg8uues6gwcipc7ercf" class="crayons-icon"><title id="a5y7f069ak2rzeg8uues6gwcipc7ercf">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 3 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1925901" data-content-user-id="1102248"> <a href="https://dev.to/dougsource/como-configurar-o-vscode-para-seus-projetos-de-react-k2b" aria-labelledby="article-link-1925901" class="crayons-story__hidden-navigation-link">Como configurar o VSCode para seus projetos de React</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/dougsource" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" alt="dougsource profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/dougsource" class="crayons-story__secondary fw-medium m:hidden"> doug-source </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1925901" aria-controls="story-author-preview-content-1925901" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="doug-source profile details"> doug-source </button> <div id="story-author-preview-content-1925901" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/dougsource" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">doug-source</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1102248,"className":"User","name":"doug-source"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1102248"></div> </div> </div> </div> </div> <a href="https://dev.to/dougsource/como-configurar-o-vscode-para-seus-projetos-de-react-k2b" class="crayons-story__tertiary fs-xs"><time datetime="2024-07-16T19:50:15Z">Jul 16 '24</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1721159415"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/dougsource/como-configurar-o-vscode-para-seus-projetos-de-react-k2b" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fiuyvz1qc1l0hjkptnyxw.jpg" id="article-link-1925901"> Como configurar o VSCode para seus projetos de React </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(137, 6, 6, 0.10); --tag-prefix: #890606; --tag-bg-hover: rgba(137, 6, 6, 0.10); --tag-prefix-hover: #890606; " href="/t/programming"><span class="crayons-tag__prefix">#</span>programming</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(60, 165, 234, 0.10); --tag-prefix: #3ca5ea; --tag-bg-hover: rgba(60, 165, 234, 0.10); --tag-prefix-hover: #3ca5ea; " href="/t/vscode"><span class="crayons-tag__prefix">#</span>vscode</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(205, 205, 0, 0.10); --tag-prefix: #cdcd00; --tag-bg-hover: rgba(205, 205, 0, 0.10); --tag-prefix-hover: #cdcd00; " href="/t/braziliandevs"><span class="crayons-tag__prefix">#</span>braziliandevs</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/dougsource/como-configurar-o-vscode-para-seus-projetos-de-react-k2b" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1925901" aria-label="Add a comment to post - Como configurar o VSCode para seus projetos de React"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">6<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="https://dev.to/dougsource/como-configurar-o-vscode-para-seus-projetos-de-react-k2b#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Como configurar o VSCode para seus projetos de React"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="akbv5bad0si1qqu40x5es8fgy98e9jxz" class="crayons-icon"><title id="akbv5bad0si1qqu40x5es8fgy98e9jxz">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 5 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1925652" data-content-user-id="1102248"> <a href="https://dev.to/dougsource/html-semantico-o-que-por-que-e-como-2i33" aria-labelledby="article-link-1925652" class="crayons-story__hidden-navigation-link">HTML Semântico: O que, por quê e como</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/dougsource" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" alt="dougsource profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/dougsource" class="crayons-story__secondary fw-medium m:hidden"> doug-source </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1925652" aria-controls="story-author-preview-content-1925652" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="doug-source profile details"> doug-source </button> <div id="story-author-preview-content-1925652" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/dougsource" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">doug-source</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1102248,"className":"User","name":"doug-source"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1102248"></div> </div> </div> </div> </div> <a href="https://dev.to/dougsource/html-semantico-o-que-por-que-e-como-2i33" class="crayons-story__tertiary fs-xs"><time datetime="2024-07-16T15:36:03Z">Jul 16 '24</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1721144163"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/dougsource/html-semantico-o-que-por-que-e-como-2i33" data-preload-image="" id="article-link-1925652"> HTML Semântico: O que, por quê e como </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " 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 crayons-tag--monochrome " style=" --tag-bg: rgba(245, 57, 0, 0.10); --tag-prefix: #F53900; --tag-bg-hover: rgba(245, 57, 0, 0.10); --tag-prefix-hover: #F53900; " href="/t/html"><span class="crayons-tag__prefix">#</span>html</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(8, 59, 21, 0.10); --tag-prefix: #083b15; --tag-bg-hover: rgba(8, 59, 21, 0.10); --tag-prefix-hover: #083b15; " href="/t/a11y"><span class="crayons-tag__prefix">#</span>a11y</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(205, 205, 0, 0.10); --tag-prefix: #cdcd00; --tag-bg-hover: rgba(205, 205, 0, 0.10); --tag-prefix-hover: #cdcd00; " href="/t/braziliandevs"><span class="crayons-tag__prefix">#</span>braziliandevs</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/dougsource/html-semantico-o-que-por-que-e-como-2i33#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - HTML Semântico: O que, por quê e como"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="asgcwe9m1yafg26vbbhj9ylhd18pu0m2" class="crayons-icon"><title id="asgcwe9m1yafg26vbbhj9ylhd18pu0m2">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 9 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1925651" data-content-user-id="1102248"> <a href="https://dev.to/dougsource/html-semantico-o-que-por-que-e-como-k4k" aria-labelledby="article-link-1925651" class="crayons-story__hidden-navigation-link">HTML Semântico: O que, por quê e como</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/dougsource" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" alt="dougsource profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/dougsource" class="crayons-story__secondary fw-medium m:hidden"> doug-source </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1925651" aria-controls="story-author-preview-content-1925651" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="doug-source profile details"> doug-source </button> <div id="story-author-preview-content-1925651" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/dougsource" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">doug-source</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1102248,"className":"User","name":"doug-source"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1102248"></div> </div> </div> </div> </div> <a href="https://dev.to/dougsource/html-semantico-o-que-por-que-e-como-k4k" class="crayons-story__tertiary fs-xs"><time datetime="2024-07-16T15:36:03Z">Jul 16 '24</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1721144163"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/dougsource/html-semantico-o-que-por-que-e-como-k4k" data-preload-image="" id="article-link-1925651"> HTML Semântico: O que, por quê e como </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " 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 crayons-tag--monochrome " style=" --tag-bg: rgba(245, 57, 0, 0.10); --tag-prefix: #F53900; --tag-bg-hover: rgba(245, 57, 0, 0.10); --tag-prefix-hover: #F53900; " href="/t/html"><span class="crayons-tag__prefix">#</span>html</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(8, 59, 21, 0.10); --tag-prefix: #083b15; --tag-bg-hover: rgba(8, 59, 21, 0.10); --tag-prefix-hover: #083b15; " href="/t/a11y"><span class="crayons-tag__prefix">#</span>a11y</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(205, 205, 0, 0.10); --tag-prefix: #cdcd00; --tag-bg-hover: rgba(205, 205, 0, 0.10); --tag-prefix-hover: #cdcd00; " href="/t/braziliandevs"><span class="crayons-tag__prefix">#</span>braziliandevs</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/dougsource/html-semantico-o-que-por-que-e-como-k4k" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1925651" aria-label="Add a comment to post - HTML Semântico: O que, por quê e como"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">1<span class="hidden s:inline"> reaction</span></span> </div> </a> <a href="https://dev.to/dougsource/html-semantico-o-que-por-que-e-como-k4k#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - HTML Semântico: O que, por quê e como"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a1o1xiy4qe2fhsoe2ip2yhd7xh8p4y3b" class="crayons-icon"><title id="a1o1xiy4qe2fhsoe2ip2yhd7xh8p4y3b">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 9 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1924864" data-content-user-id="1102248"> <a href="https://dev.to/dougsource/uma-historia-sobre-http-status-code-e-por-que-voce-deve-ler-a-documentacao-h42" aria-labelledby="article-link-1924864" class="crayons-story__hidden-navigation-link">Uma história sobre HTTP status code e por que você deve ler a documentação</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/dougsource" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" alt="dougsource profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/dougsource" class="crayons-story__secondary fw-medium m:hidden"> doug-source </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1924864" aria-controls="story-author-preview-content-1924864" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="doug-source profile details"> doug-source </button> <div id="story-author-preview-content-1924864" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/dougsource" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">doug-source</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1102248,"className":"User","name":"doug-source"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1102248"></div> </div> </div> </div> </div> <a href="https://dev.to/dougsource/uma-historia-sobre-http-status-code-e-por-que-voce-deve-ler-a-documentacao-h42" class="crayons-story__tertiary fs-xs"><time datetime="2024-07-16T02:08:07Z">Jul 16 '24</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1721095687"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/dougsource/uma-historia-sobre-http-status-code-e-por-que-voce-deve-ler-a-documentacao-h42" data-preload-image="" id="article-link-1924864"> Uma história sobre HTTP status code e por que você deve ler a documentação </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " 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 crayons-tag--monochrome " style=" --tag-bg: rgba(137, 6, 6, 0.10); --tag-prefix: #890606; --tag-bg-hover: rgba(137, 6, 6, 0.10); --tag-prefix-hover: #890606; " href="/t/programming"><span class="crayons-tag__prefix">#</span>programming</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/dougsource/uma-historia-sobre-http-status-code-e-por-que-voce-deve-ler-a-documentacao-h42#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Uma história sobre HTTP status code e por que você deve ler a documentação"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a5f16i2msrq4ck4ddc1m1sib0wcv864e" class="crayons-icon"><title id="a5f16i2msrq4ck4ddc1m1sib0wcv864e">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 6 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1872383" data-content-user-id="1102248"> <a href="https://dev.to/dougsource/guia-de-react-re-render-tudo-tudo-de-uma-vez-22ai" aria-labelledby="article-link-1872383" class="crayons-story__hidden-navigation-link">Guia de React re-render: tudo, tudo de uma vez</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/dougsource" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" alt="dougsource profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/dougsource" class="crayons-story__secondary fw-medium m:hidden"> doug-source </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1872383" aria-controls="story-author-preview-content-1872383" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="doug-source profile details"> doug-source </button> <div id="story-author-preview-content-1872383" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/dougsource" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">doug-source</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1102248,"className":"User","name":"doug-source"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1102248"></div> </div> </div> </div> </div> <a href="https://dev.to/dougsource/guia-de-react-re-render-tudo-tudo-de-uma-vez-22ai" class="crayons-story__tertiary fs-xs"><time datetime="2024-05-31T19:25:57Z">May 31 '24</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1717183557"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/dougsource/guia-de-react-re-render-tudo-tudo-de-uma-vez-22ai" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmj90os7ctw6vamar06v7.jpg" id="article-link-1872383"> Guia de React re-render: tudo, tudo de uma vez </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/portugues"><span class="crayons-tag__prefix">#</span>portugues</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/dougsource/guia-de-react-re-render-tudo-tudo-de-uma-vez-22ai" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1872383" aria-label="Add a comment to post - Guia de React re-render: tudo, tudo de uma vez"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">2<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="https://dev.to/dougsource/guia-de-react-re-render-tudo-tudo-de-uma-vez-22ai#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Guia de React re-render: tudo, tudo de uma vez"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ahts1yc23l66yhl69lzcsrvlfojz92xk" class="crayons-icon"><title id="ahts1yc23l66yhl69lzcsrvlfojz92xk">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 14 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1806331" data-content-user-id="1102248"> <a href="https://dev.to/dougsource/a-transicao-do-higher-order-component-pattern-para-o-react-hooks-pattern-1fml" aria-labelledby="article-link-1806331" class="crayons-story__hidden-navigation-link">A transição do Higher-Order Component pattern para o React Hooks pattern</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/dougsource" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" alt="dougsource profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/dougsource" class="crayons-story__secondary fw-medium m:hidden"> doug-source </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1806331" aria-controls="story-author-preview-content-1806331" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="doug-source profile details"> doug-source </button> <div id="story-author-preview-content-1806331" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/dougsource" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">doug-source</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1102248,"className":"User","name":"doug-source"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1102248"></div> </div> </div> </div> </div> <a href="https://dev.to/dougsource/a-transicao-do-higher-order-component-pattern-para-o-react-hooks-pattern-1fml" class="crayons-story__tertiary fs-xs"><time datetime="2024-03-30T15:15:00Z">Mar 30 '24</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1711811700"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/dougsource/a-transicao-do-higher-order-component-pattern-para-o-react-hooks-pattern-1fml" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4kfeubfz0mcpbnou08mz.jpg" id="article-link-1806331"> A transição do Higher-Order Component pattern para o React Hooks pattern </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/dougsource/a-transicao-do-higher-order-component-pattern-para-o-react-hooks-pattern-1fml" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1806331" aria-label="Add a comment to post - A transição do Higher-Order Component pattern para o React Hooks pattern"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">1<span class="hidden s:inline"> reaction</span></span> </div> </a> <a href="https://dev.to/dougsource/a-transicao-do-higher-order-component-pattern-para-o-react-hooks-pattern-1fml#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - A transição do Higher-Order Component pattern para o React Hooks pattern"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a217f8o9lq0bdotogzmcsgnn3k4z7k34" class="crayons-icon"><title id="a217f8o9lq0bdotogzmcsgnn3k4z7k34">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 7 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1695746" data-content-user-id="1102248"> <a href="https://dev.to/dougsource/como-animar-o-scrolling-para-anchor-links-com-css-o64" aria-labelledby="article-link-1695746" class="crayons-story__hidden-navigation-link">Como animar o scrolling para anchor links com CSS</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/dougsource" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" alt="dougsource profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/dougsource" class="crayons-story__secondary fw-medium m:hidden"> doug-source </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1695746" aria-controls="story-author-preview-content-1695746" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="doug-source profile details"> doug-source </button> <div id="story-author-preview-content-1695746" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/dougsource" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">doug-source</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1102248,"className":"User","name":"doug-source"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1102248"></div> </div> </div> </div> </div> <a href="https://dev.to/dougsource/como-animar-o-scrolling-para-anchor-links-com-css-o64" class="crayons-story__tertiary fs-xs"><time datetime="2023-12-12T13:54:46Z">Dec 12 '23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1702389286"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/dougsource/como-animar-o-scrolling-para-anchor-links-com-css-o64" data-preload-image="" id="article-link-1695746"> Como animar o scrolling para anchor links com CSS </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " 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 crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/portugues"><span class="crayons-tag__prefix">#</span>portugues</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/dougsource/como-animar-o-scrolling-para-anchor-links-com-css-o64#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Como animar o scrolling para anchor links com CSS"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a864p80loj253wb5xw2usiwjnc6hrcrh" class="crayons-icon"><title id="a864p80loj253wb5xw2usiwjnc6hrcrh">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1695718" data-content-user-id="1102248"> <a href="https://dev.to/dougsource/como-criar-uma-sticky-navigation-apenas-com-css-290j" aria-labelledby="article-link-1695718" class="crayons-story__hidden-navigation-link">Como criar uma sticky navigation apenas com CSS</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/dougsource" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" alt="dougsource profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/dougsource" class="crayons-story__secondary fw-medium m:hidden"> doug-source </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1695718" aria-controls="story-author-preview-content-1695718" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="doug-source profile details"> doug-source </button> <div id="story-author-preview-content-1695718" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/dougsource" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">doug-source</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1102248,"className":"User","name":"doug-source"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1102248"></div> </div> </div> </div> </div> <a href="https://dev.to/dougsource/como-criar-uma-sticky-navigation-apenas-com-css-290j" class="crayons-story__tertiary fs-xs"><time datetime="2023-12-12T13:12:15Z">Dec 12 '23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1702386735"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/dougsource/como-criar-uma-sticky-navigation-apenas-com-css-290j" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2r8y1qbnfcv9eixya29u.jpg" id="article-link-1695718"> Como criar uma sticky navigation apenas com CSS </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " 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 crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/portugues"><span class="crayons-tag__prefix">#</span>portugues</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/dougsource/como-criar-uma-sticky-navigation-apenas-com-css-290j#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Como criar uma sticky navigation apenas com CSS"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="amgznr6k33n5ycfocetgfmgz5fowlsn7" class="crayons-icon"><title id="amgznr6k33n5ycfocetgfmgz5fowlsn7">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1695699" data-content-user-id="1102248"> <a href="https://dev.to/dougsource/como-usar-requestanimationframe-com-vanilla-js-433" aria-labelledby="article-link-1695699" class="crayons-story__hidden-navigation-link">Como usar requestAnimationFrame() com vanilla JS</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/dougsource" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" alt="dougsource profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/dougsource" class="crayons-story__secondary fw-medium m:hidden"> doug-source </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1695699" aria-controls="story-author-preview-content-1695699" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="doug-source profile details"> doug-source </button> <div id="story-author-preview-content-1695699" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/dougsource" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">doug-source</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1102248,"className":"User","name":"doug-source"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1102248"></div> </div> </div> </div> </div> <a href="https://dev.to/dougsource/como-usar-requestanimationframe-com-vanilla-js-433" class="crayons-story__tertiary fs-xs"><time datetime="2023-12-12T12:42:31Z">Dec 12 '23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1702384951"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/dougsource/como-usar-requestanimationframe-com-vanilla-js-433" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9j15lxnxqiggq2c3pw2q.jpg" id="article-link-1695699"> Como usar requestAnimationFrame() com vanilla JS </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(137, 6, 6, 0.10); --tag-prefix: #890606; --tag-bg-hover: rgba(137, 6, 6, 0.10); --tag-prefix-hover: #890606; " href="/t/programming"><span class="crayons-tag__prefix">#</span>programming</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/portugues"><span class="crayons-tag__prefix">#</span>portugues</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/dougsource/como-usar-requestanimationframe-com-vanilla-js-433#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Como usar requestAnimationFrame() com vanilla JS"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ap5xq8w1xkxmn3n2rh4ruvp9q8h33lgt" class="crayons-icon"><title id="ap5xq8w1xkxmn3n2rh4ruvp9q8h33lgt">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1694952" data-content-user-id="1102248"> <a href="https://dev.to/dougsource/como-atualizar-a-url-do-navegador-sem-refresh-a-pagina-usando-a-vanilla-js-history-api-3c19" aria-labelledby="article-link-1694952" class="crayons-story__hidden-navigation-link">Como atualizar a URL do navegador sem refresh a página usando a vanilla JS History API</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/dougsource" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" alt="dougsource profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/dougsource" class="crayons-story__secondary fw-medium m:hidden"> doug-source </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1694952" aria-controls="story-author-preview-content-1694952" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="doug-source profile details"> doug-source </button> <div id="story-author-preview-content-1694952" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/dougsource" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">doug-source</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1102248,"className":"User","name":"doug-source"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1102248"></div> </div> </div> </div> </div> <a href="https://dev.to/dougsource/como-atualizar-a-url-do-navegador-sem-refresh-a-pagina-usando-a-vanilla-js-history-api-3c19" class="crayons-story__tertiary fs-xs"><time datetime="2023-12-12T03:20:49Z">Dec 12 '23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1702351249"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/dougsource/como-atualizar-a-url-do-navegador-sem-refresh-a-pagina-usando-a-vanilla-js-history-api-3c19" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0mj4adb3pdgh72764no1.jpg" id="article-link-1694952"> Como atualizar a URL do navegador sem refresh a página usando a vanilla JS History API </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(137, 6, 6, 0.10); --tag-prefix: #890606; --tag-bg-hover: rgba(137, 6, 6, 0.10); --tag-prefix-hover: #890606; " href="/t/programming"><span class="crayons-tag__prefix">#</span>programming</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/portugues"><span class="crayons-tag__prefix">#</span>portugues</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/dougsource/como-atualizar-a-url-do-navegador-sem-refresh-a-pagina-usando-a-vanilla-js-history-api-3c19#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Como atualizar a URL do navegador sem refresh a página usando a vanilla JS History API"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="atmh5varl7yekdhywlzcxtrfccw0nmp6" class="crayons-icon"><title id="atmh5varl7yekdhywlzcxtrfccw0nmp6">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 3 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1694942" data-content-user-id="1102248"> <a href="https://dev.to/dougsource/por-que-utilizar-um-elemento-form-quando-submit-campos-com-javascript-50pj" aria-labelledby="article-link-1694942" class="crayons-story__hidden-navigation-link">Por que utilizar um elemento form quando submit campos com JavaScript?</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/dougsource" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" alt="dougsource profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/dougsource" class="crayons-story__secondary fw-medium m:hidden"> doug-source </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1694942" aria-controls="story-author-preview-content-1694942" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="doug-source profile details"> doug-source </button> <div id="story-author-preview-content-1694942" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/dougsource" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">doug-source</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1102248,"className":"User","name":"doug-source"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1102248"></div> </div> </div> </div> </div> <a href="https://dev.to/dougsource/por-que-utilizar-um-elemento-form-quando-submit-campos-com-javascript-50pj" class="crayons-story__tertiary fs-xs"><time datetime="2023-12-12T02:47:56Z">Dec 12 '23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1702349276"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/dougsource/por-que-utilizar-um-elemento-form-quando-submit-campos-com-javascript-50pj" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Foco5ex3zmvxw7bqj5v9g.jpg" id="article-link-1694942"> Por que utilizar um elemento form quando submit campos com JavaScript? </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(137, 6, 6, 0.10); --tag-prefix: #890606; --tag-bg-hover: rgba(137, 6, 6, 0.10); --tag-prefix-hover: #890606; " href="/t/programming"><span class="crayons-tag__prefix">#</span>programming</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/portugues"><span class="crayons-tag__prefix">#</span>portugues</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/dougsource/por-que-utilizar-um-elemento-form-quando-submit-campos-com-javascript-50pj#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Por que utilizar um elemento form quando submit campos com JavaScript?"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="alor5mxgd8jl9orjr54e64rybgbj2zai" class="crayons-icon"><title id="alor5mxgd8jl9orjr54e64rybgbj2zai">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1693144" data-content-user-id="1102248"> <a href="https://dev.to/dougsource/quando-um-framework-e-melhor-que-a-manipulacao-nativa-do-dom-4682" aria-labelledby="article-link-1693144" class="crayons-story__hidden-navigation-link">Quando um framework é melhor que a manipulação nativa do DOM</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/dougsource" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" alt="dougsource profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/dougsource" class="crayons-story__secondary fw-medium m:hidden"> doug-source </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1693144" aria-controls="story-author-preview-content-1693144" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="doug-source profile details"> doug-source </button> <div id="story-author-preview-content-1693144" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/dougsource" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">doug-source</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1102248,"className":"User","name":"doug-source"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1102248"></div> </div> </div> </div> </div> <a href="https://dev.to/dougsource/quando-um-framework-e-melhor-que-a-manipulacao-nativa-do-dom-4682" class="crayons-story__tertiary fs-xs"><time datetime="2023-12-09T21:21:25Z">Dec 9 '23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1702156885"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/dougsource/quando-um-framework-e-melhor-que-a-manipulacao-nativa-do-dom-4682" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fuahy4x58nq44tsz4l0f2.jpg" id="article-link-1693144"> Quando um framework é melhor que a manipulação nativa do DOM </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(137, 6, 6, 0.10); --tag-prefix: #890606; --tag-bg-hover: rgba(137, 6, 6, 0.10); --tag-prefix-hover: #890606; " href="/t/programming"><span class="crayons-tag__prefix">#</span>programming</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/portugues"><span class="crayons-tag__prefix">#</span>portugues</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/dougsource/quando-um-framework-e-melhor-que-a-manipulacao-nativa-do-dom-4682#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Quando um framework é melhor que a manipulação nativa do DOM"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a1f0vwkrgnso0rgj1awpl42whmfc3rcy" class="crayons-icon"><title id="a1f0vwkrgnso0rgj1awpl42whmfc3rcy">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 5 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1693117" data-content-user-id="1102248"> <a href="https://dev.to/dougsource/recursao-com-vanilla-javascript-3fl8" aria-labelledby="article-link-1693117" class="crayons-story__hidden-navigation-link">Recursão com vanilla JavaScript</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/dougsource" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" alt="dougsource profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/dougsource" class="crayons-story__secondary fw-medium m:hidden"> doug-source </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1693117" aria-controls="story-author-preview-content-1693117" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="doug-source profile details"> doug-source </button> <div id="story-author-preview-content-1693117" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/dougsource" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">doug-source</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1102248,"className":"User","name":"doug-source"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1102248"></div> </div> </div> </div> </div> <a href="https://dev.to/dougsource/recursao-com-vanilla-javascript-3fl8" class="crayons-story__tertiary fs-xs"><time datetime="2023-12-09T20:33:33Z">Dec 9 '23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1702154013"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/dougsource/recursao-com-vanilla-javascript-3fl8" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fybcaq4o1c2nyrjppm1s9.jpg" id="article-link-1693117"> Recursão com vanilla JavaScript </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(137, 6, 6, 0.10); --tag-prefix: #890606; --tag-bg-hover: rgba(137, 6, 6, 0.10); --tag-prefix-hover: #890606; " href="/t/programming"><span class="crayons-tag__prefix">#</span>programming</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/portugues"><span class="crayons-tag__prefix">#</span>portugues</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/dougsource/recursao-com-vanilla-javascript-3fl8#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Recursão com vanilla JavaScript"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="avuy02zuwrr8f5wsj88yu32fvsuand2" class="crayons-icon"><title id="avuy02zuwrr8f5wsj88yu32fvsuand2">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 3 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1692992" data-content-user-id="1102248"> <a href="https://dev.to/dougsource/como-usar-async-e-await-com-vanilla-javascript-2c5d" aria-labelledby="article-link-1692992" class="crayons-story__hidden-navigation-link">Como usar async e await com vanilla JavaScript</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/dougsource" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" alt="dougsource profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/dougsource" class="crayons-story__secondary fw-medium m:hidden"> doug-source </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1692992" aria-controls="story-author-preview-content-1692992" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="doug-source profile details"> doug-source </button> <div id="story-author-preview-content-1692992" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/dougsource" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">doug-source</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1102248,"className":"User","name":"doug-source"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1102248"></div> </div> </div> </div> </div> <a href="https://dev.to/dougsource/como-usar-async-e-await-com-vanilla-javascript-2c5d" class="crayons-story__tertiary fs-xs"><time datetime="2023-12-09T16:54:50Z">Dec 9 '23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1702140890"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/dougsource/como-usar-async-e-await-com-vanilla-javascript-2c5d" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6jdtl75p2zdowx70s6oy.jpg" id="article-link-1692992"> Como usar async e await com vanilla JavaScript </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(137, 6, 6, 0.10); --tag-prefix: #890606; --tag-bg-hover: rgba(137, 6, 6, 0.10); --tag-prefix-hover: #890606; " href="/t/programming"><span class="crayons-tag__prefix">#</span>programming</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/portugues"><span class="crayons-tag__prefix">#</span>portugues</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/dougsource/como-usar-async-e-await-com-vanilla-javascript-2c5d" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1692992" aria-label="Add a comment to post - Como usar async e await com vanilla JavaScript"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">1<span class="hidden s:inline"> reaction</span></span> </div> </a> <a href="https://dev.to/dougsource/como-usar-async-e-await-com-vanilla-javascript-2c5d#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Como usar async e await com vanilla JavaScript"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a41lnms4hx262uv1iyikzmrx9q8dottb" class="crayons-icon"><title id="a41lnms4hx262uv1iyikzmrx9q8dottb">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 6 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1687000" data-content-user-id="1102248"> <a href="https://dev.to/dougsource/construindo-um-showhide-disclosure-component-acessivel-com-vanilla-js-4pch" aria-labelledby="article-link-1687000" class="crayons-story__hidden-navigation-link">Construindo um show/hide disclosure component acessível com vanilla JS</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/dougsource" class="crayons-avatar crayons-avatar--l "> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--5ukvnZzb--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/1102248/f132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" alt="dougsource profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/dougsource" class="crayons-story__secondary fw-medium m:hidden"> doug-source </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1687000" aria-controls="story-author-preview-content-1687000" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="doug-source profile details"> doug-source </button> <div id="story-author-preview-content-1687000" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/dougsource" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--5ukvnZzb--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/1102248/f132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">doug-source</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1102248,"className":"User","name":"doug-source"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1102248"></div> </div> </div> </div> </div> <a href="https://dev.to/dougsource/construindo-um-showhide-disclosure-component-acessivel-com-vanilla-js-4pch" class="crayons-story__tertiary fs-xs"><time datetime="2023-12-04T02:10:53Z">Dec 4 '23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1701655853"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/dougsource/construindo-um-showhide-disclosure-component-acessivel-com-vanilla-js-4pch" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpkknn26kgud3j8eigq5j.jpg" id="article-link-1687000"> Construindo um show/hide disclosure component acessível com vanilla JS </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(8, 59, 21, 0.10); --tag-prefix: #083b15; --tag-bg-hover: rgba(8, 59, 21, 0.10); --tag-prefix-hover: #083b15; " href="/t/a11y"><span class="crayons-tag__prefix">#</span>a11y</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(137, 6, 6, 0.10); --tag-prefix: #890606; --tag-bg-hover: rgba(137, 6, 6, 0.10); --tag-prefix-hover: #890606; " href="/t/programming"><span class="crayons-tag__prefix">#</span>programming</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/portugues"><span class="crayons-tag__prefix">#</span>portugues</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/dougsource/construindo-um-showhide-disclosure-component-acessivel-com-vanilla-js-4pch#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Construindo um show/hide disclosure component acessível com vanilla JS"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a4jthwhy94y580zx979mcyl6dhhcnvdo" class="crayons-icon"><title id="a4jthwhy94y580zx979mcyl6dhhcnvdo">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 5 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1686964" data-content-user-id="1102248"> <a href="https://dev.to/dougsource/voce-provavelmente-nao-precisa-de-um-domcontentloaded-event-em-seu-javacript-3jo3" aria-labelledby="article-link-1686964" class="crayons-story__hidden-navigation-link">Você provavelmente não precisa de um DOMContentLoaded event em seu Javacript</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/dougsource" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" alt="dougsource profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/dougsource" class="crayons-story__secondary fw-medium m:hidden"> doug-source </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1686964" aria-controls="story-author-preview-content-1686964" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="doug-source profile details"> doug-source </button> <div id="story-author-preview-content-1686964" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/dougsource" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">doug-source</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1102248,"className":"User","name":"doug-source"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1102248"></div> </div> </div> </div> </div> <a href="https://dev.to/dougsource/voce-provavelmente-nao-precisa-de-um-domcontentloaded-event-em-seu-javacript-3jo3" class="crayons-story__tertiary fs-xs"><time datetime="2023-12-03T23:46:02Z">Dec 3 '23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1701647162"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/dougsource/voce-provavelmente-nao-precisa-de-um-domcontentloaded-event-em-seu-javacript-3jo3" data-preload-image="" id="article-link-1686964"> Você provavelmente não precisa de um DOMContentLoaded event em seu Javacript </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(137, 6, 6, 0.10); --tag-prefix: #890606; --tag-bg-hover: rgba(137, 6, 6, 0.10); --tag-prefix-hover: #890606; " href="/t/programming"><span class="crayons-tag__prefix">#</span>programming</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/portugues"><span class="crayons-tag__prefix">#</span>portugues</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/dica"><span class="crayons-tag__prefix">#</span>dica</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/dougsource/voce-provavelmente-nao-precisa-de-um-domcontentloaded-event-em-seu-javacript-3jo3#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Você provavelmente não precisa de um DOMContentLoaded event em seu Javacript"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a5y2oqq7gvrplzrpf4pin4nk08ugg344" class="crayons-icon"><title id="a5y2oqq7gvrplzrpf4pin4nk08ugg344">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1686933" data-content-user-id="1102248"> <a href="https://dev.to/dougsource/formas-de-escrever-immediately-invoked-function-expression-iife-no-javascript-1004" aria-labelledby="article-link-1686933" class="crayons-story__hidden-navigation-link">Formas de escrever Immediately Invoked Function Expression (IIFE) no JavaScript</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/dougsource" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" alt="dougsource profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/dougsource" class="crayons-story__secondary fw-medium m:hidden"> doug-source </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1686933" aria-controls="story-author-preview-content-1686933" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="doug-source profile details"> doug-source </button> <div id="story-author-preview-content-1686933" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/dougsource" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">doug-source</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1102248,"className":"User","name":"doug-source"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1102248"></div> </div> </div> </div> </div> <a href="https://dev.to/dougsource/formas-de-escrever-immediately-invoked-function-expression-iife-no-javascript-1004" class="crayons-story__tertiary fs-xs"><time datetime="2023-12-03T22:29:20Z">Dec 3 '23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1701642560"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/dougsource/formas-de-escrever-immediately-invoked-function-expression-iife-no-javascript-1004" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5gxus4fsa7ujjz0ftr5q.jpg" id="article-link-1686933"> Formas de escrever Immediately Invoked Function Expression (IIFE) no JavaScript </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(137, 6, 6, 0.10); --tag-prefix: #890606; --tag-bg-hover: rgba(137, 6, 6, 0.10); --tag-prefix-hover: #890606; " href="/t/programming"><span class="crayons-tag__prefix">#</span>programming</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/portugues"><span class="crayons-tag__prefix">#</span>portugues</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/dougsource/formas-de-escrever-immediately-invoked-function-expression-iife-no-javascript-1004#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Formas de escrever Immediately Invoked Function Expression (IIFE) no JavaScript"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ar0rku4hsls949c36qrdxek5zr8uwaxz" class="crayons-icon"><title id="ar0rku4hsls949c36qrdxek5zr8uwaxz">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1686928" data-content-user-id="1102248"> <a href="https://dev.to/dougsource/eu-3-cascade-2214" aria-labelledby="article-link-1686928" class="crayons-story__hidden-navigation-link">Eu <3 cascade!</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/dougsource" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" alt="dougsource profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/dougsource" class="crayons-story__secondary fw-medium m:hidden"> doug-source </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1686928" aria-controls="story-author-preview-content-1686928" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="doug-source profile details"> doug-source </button> <div id="story-author-preview-content-1686928" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/dougsource" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">doug-source</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1102248,"className":"User","name":"doug-source"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1102248"></div> </div> </div> </div> </div> <a href="https://dev.to/dougsource/eu-3-cascade-2214" class="crayons-story__tertiary fs-xs"><time datetime="2023-12-03T22:15:17Z">Dec 3 '23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1701641717"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/dougsource/eu-3-cascade-2214" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjbjjy4v5xktznxr00ryh.jpg" id="article-link-1686928"> Eu <3 cascade! </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " 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 crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/portugues"><span class="crayons-tag__prefix">#</span>portugues</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/dougsource/eu-3-cascade-2214#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Eu <3 cascade!"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aq7hdocv01wyl468gqx2t8fn4wayetab" class="crayons-icon"><title id="aq7hdocv01wyl468gqx2t8fn4wayetab">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1686918" data-content-user-id="1102248"> <a href="https://dev.to/dougsource/event-delegation-e-multiplos-seletores-com-vanilla-js-97a" aria-labelledby="article-link-1686918" class="crayons-story__hidden-navigation-link">Event delegation e múltiplos seletores com vanilla JS</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/dougsource" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" alt="dougsource profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/dougsource" class="crayons-story__secondary fw-medium m:hidden"> doug-source </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1686918" aria-controls="story-author-preview-content-1686918" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="doug-source profile details"> doug-source </button> <div id="story-author-preview-content-1686918" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/dougsource" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">doug-source</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1102248,"className":"User","name":"doug-source"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1102248"></div> </div> </div> </div> </div> <a href="https://dev.to/dougsource/event-delegation-e-multiplos-seletores-com-vanilla-js-97a" class="crayons-story__tertiary fs-xs"><time datetime="2023-12-03T21:56:01Z">Dec 3 '23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1701640561"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/dougsource/event-delegation-e-multiplos-seletores-com-vanilla-js-97a" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F810syctp0wimaez4e399.jpg" id="article-link-1686918"> Event delegation e múltiplos seletores com vanilla JS </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(137, 6, 6, 0.10); --tag-prefix: #890606; --tag-bg-hover: rgba(137, 6, 6, 0.10); --tag-prefix-hover: #890606; " href="/t/programming"><span class="crayons-tag__prefix">#</span>programming</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/portugues"><span class="crayons-tag__prefix">#</span>portugues</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/dougsource/event-delegation-e-multiplos-seletores-com-vanilla-js-97a#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Event delegation e múltiplos seletores com vanilla JS"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a2nq99j6xabp57mlq6uwps6d69qy3464" class="crayons-icon"><title id="a2nq99j6xabp57mlq6uwps6d69qy3464">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 4 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1686828" data-content-user-id="1102248"> <a href="https://dev.to/dougsource/currentcolor-e-svgs-1ob5" aria-labelledby="article-link-1686828" class="crayons-story__hidden-navigation-link">CurrentColor e SVGs</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/dougsource" class="crayons-avatar crayons-avatar--l "> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--5ukvnZzb--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/1102248/f132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" alt="dougsource profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/dougsource" class="crayons-story__secondary fw-medium m:hidden"> doug-source </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1686828" aria-controls="story-author-preview-content-1686828" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="doug-source profile details"> doug-source </button> <div id="story-author-preview-content-1686828" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/dougsource" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--5ukvnZzb--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/1102248/f132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">doug-source</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1102248,"className":"User","name":"doug-source"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1102248"></div> </div> </div> </div> </div> <a href="https://dev.to/dougsource/currentcolor-e-svgs-1ob5" class="crayons-story__tertiary fs-xs"><time datetime="2023-12-03T19:24:01Z">Dec 3 '23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1701631441"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/dougsource/currentcolor-e-svgs-1ob5" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fze4ojeh84m28y6j2a2we.png" id="article-link-1686828"> CurrentColor e SVGs </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(245, 57, 0, 0.10); --tag-prefix: #F53900; --tag-bg-hover: rgba(245, 57, 0, 0.10); --tag-prefix-hover: #F53900; " href="/t/html"><span class="crayons-tag__prefix">#</span>html</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/svg"><span class="crayons-tag__prefix">#</span>svg</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/portugues"><span class="crayons-tag__prefix">#</span>portugues</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/dougsource/currentcolor-e-svgs-1ob5#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - CurrentColor e SVGs"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aialxj7geozykfjk922wm2pubrzff1mc" class="crayons-icon"><title id="aialxj7geozykfjk922wm2pubrzff1mc">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 3 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1686810" data-content-user-id="1102248"> <a href="https://dev.to/dougsource/usando-a-propriedade-css-currentcolor-para-contruir-componentes-extensiveis-5dnf" aria-labelledby="article-link-1686810" class="crayons-story__hidden-navigation-link">Usando a propriedade CSS currentColor para contruir componentes extensíveis</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/dougsource" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" alt="dougsource profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/dougsource" class="crayons-story__secondary fw-medium m:hidden"> doug-source </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1686810" aria-controls="story-author-preview-content-1686810" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="doug-source profile details"> doug-source </button> <div id="story-author-preview-content-1686810" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/dougsource" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">doug-source</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1102248,"className":"User","name":"doug-source"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1102248"></div> </div> </div> </div> </div> <a href="https://dev.to/dougsource/usando-a-propriedade-css-currentcolor-para-contruir-componentes-extensiveis-5dnf" class="crayons-story__tertiary fs-xs"><time datetime="2023-12-03T18:57:26Z">Dec 3 '23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1701629846"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/dougsource/usando-a-propriedade-css-currentcolor-para-contruir-componentes-extensiveis-5dnf" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F453wq0wupfths90edxzu.png" id="article-link-1686810"> Usando a propriedade CSS currentColor para contruir componentes extensíveis </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(137, 6, 6, 0.10); --tag-prefix: #890606; --tag-bg-hover: rgba(137, 6, 6, 0.10); --tag-prefix-hover: #890606; " href="/t/programming"><span class="crayons-tag__prefix">#</span>programming</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/portugues"><span class="crayons-tag__prefix">#</span>portugues</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/dougsource/usando-a-propriedade-css-currentcolor-para-contruir-componentes-extensiveis-5dnf#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Usando a propriedade CSS currentColor para contruir componentes extensíveis"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a9rjjpkx2nffnqh0pulz5gt6l29pp8c1" class="crayons-icon"><title id="a9rjjpkx2nffnqh0pulz5gt6l29pp8c1">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1686643" data-content-user-id="1102248"> <a href="https://dev.to/dougsource/wtf-e-gzipping-e-como-e-diferente-da-minificacao-3j76" aria-labelledby="article-link-1686643" class="crayons-story__hidden-navigation-link">WTF é gzipping (e como é diferente da minificação)?</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/dougsource" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" alt="dougsource profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/dougsource" class="crayons-story__secondary fw-medium m:hidden"> doug-source </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1686643" aria-controls="story-author-preview-content-1686643" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="doug-source profile details"> doug-source </button> <div id="story-author-preview-content-1686643" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/dougsource" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">doug-source</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1102248,"className":"User","name":"doug-source"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1102248"></div> </div> </div> </div> </div> <a href="https://dev.to/dougsource/wtf-e-gzipping-e-como-e-diferente-da-minificacao-3j76" class="crayons-story__tertiary fs-xs"><time datetime="2023-12-03T14:50:55Z">Dec 3 '23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1701615055"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/dougsource/wtf-e-gzipping-e-como-e-diferente-da-minificacao-3j76" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F01g7td569f9btkqlntwn.jpg" id="article-link-1686643"> WTF é gzipping (e como é diferente da minificação)? </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(137, 6, 6, 0.10); --tag-prefix: #890606; --tag-bg-hover: rgba(137, 6, 6, 0.10); --tag-prefix-hover: #890606; " href="/t/programming"><span class="crayons-tag__prefix">#</span>programming</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/portugues"><span class="crayons-tag__prefix">#</span>portugues</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/dougsource/wtf-e-gzipping-e-como-e-diferente-da-minificacao-3j76#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - WTF é gzipping (e como é diferente da minificação)?"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="adovb7aa1s7c5mvrn8rfhfxx6sqq0ueu" class="crayons-icon"><title id="adovb7aa1s7c5mvrn8rfhfxx6sqq0ueu">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 3 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1686631" data-content-user-id="1102248"> <a href="https://dev.to/dougsource/como-eu-estruturo-meus-projetos-vanilla-js-3dl6" aria-labelledby="article-link-1686631" class="crayons-story__hidden-navigation-link">Como eu estruturo meus projetos vanilla JS</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/dougsource" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" alt="dougsource profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/dougsource" class="crayons-story__secondary fw-medium m:hidden"> doug-source </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1686631" aria-controls="story-author-preview-content-1686631" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="doug-source profile details"> doug-source </button> <div id="story-author-preview-content-1686631" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/dougsource" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">doug-source</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1102248,"className":"User","name":"doug-source"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1102248"></div> </div> </div> </div> </div> <a href="https://dev.to/dougsource/como-eu-estruturo-meus-projetos-vanilla-js-3dl6" class="crayons-story__tertiary fs-xs"><time datetime="2023-12-03T14:30:38Z">Dec 3 '23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1701613838"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/dougsource/como-eu-estruturo-meus-projetos-vanilla-js-3dl6" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F80f1qyvtsfxdqqirrqv2.jpg" id="article-link-1686631"> Como eu estruturo meus projetos vanilla JS </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(137, 6, 6, 0.10); --tag-prefix: #890606; --tag-bg-hover: rgba(137, 6, 6, 0.10); --tag-prefix-hover: #890606; " href="/t/programming"><span class="crayons-tag__prefix">#</span>programming</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/portugues"><span class="crayons-tag__prefix">#</span>portugues</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/dougsource/como-eu-estruturo-meus-projetos-vanilla-js-3dl6#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Como eu estruturo meus projetos vanilla JS"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ac35vyb5bxj4eiak8w0yzoi4t7xsnhsj" class="crayons-icon"><title id="ac35vyb5bxj4eiak8w0yzoi4t7xsnhsj">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 3 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1685991" data-content-user-id="1102248"> <a href="https://dev.to/dougsource/uma-alternativa-vanilla-js-para-o-metodo-momentjs-timefromnow-56b3" aria-labelledby="article-link-1685991" class="crayons-story__hidden-navigation-link">Uma alternativa vanilla JS para o método moment.js timeFromNow()</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/dougsource" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" alt="dougsource profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/dougsource" class="crayons-story__secondary fw-medium m:hidden"> doug-source </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1685991" aria-controls="story-author-preview-content-1685991" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="doug-source profile details"> doug-source </button> <div id="story-author-preview-content-1685991" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/dougsource" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">doug-source</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1102248,"className":"User","name":"doug-source"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1102248"></div> </div> </div> </div> </div> <a href="https://dev.to/dougsource/uma-alternativa-vanilla-js-para-o-metodo-momentjs-timefromnow-56b3" class="crayons-story__tertiary fs-xs"><time datetime="2023-12-02T14:01:34Z">Dec 2 '23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1701525694"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/dougsource/uma-alternativa-vanilla-js-para-o-metodo-momentjs-timefromnow-56b3" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5b6adrkqk5dzpynqshvi.jpg" id="article-link-1685991"> Uma alternativa vanilla JS para o método moment.js timeFromNow() </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(137, 6, 6, 0.10); --tag-prefix: #890606; --tag-bg-hover: rgba(137, 6, 6, 0.10); --tag-prefix-hover: #890606; " href="/t/programming"><span class="crayons-tag__prefix">#</span>programming</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/portugues"><span class="crayons-tag__prefix">#</span>portugues</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/dougsource/uma-alternativa-vanilla-js-para-o-metodo-momentjs-timefromnow-56b3#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Uma alternativa vanilla JS para o método moment.js timeFromNow()"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a39voxtjsrmry824kxy9r1gadtcgs9py" class="crayons-icon"><title id="a39voxtjsrmry824kxy9r1gadtcgs9py">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 4 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1685975" data-content-user-id="1102248"> <a href="https://dev.to/dougsource/recriando-o-method-lodash-partition-em-vanilla-js-jo3" aria-labelledby="article-link-1685975" class="crayons-story__hidden-navigation-link">Recriando o método lodash partition() em vanilla JS</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/dougsource" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" alt="dougsource profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/dougsource" class="crayons-story__secondary fw-medium m:hidden"> doug-source </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1685975" aria-controls="story-author-preview-content-1685975" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="doug-source profile details"> doug-source </button> <div id="story-author-preview-content-1685975" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/dougsource" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">doug-source</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1102248,"className":"User","name":"doug-source"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1102248"></div> </div> </div> </div> </div> <a href="https://dev.to/dougsource/recriando-o-method-lodash-partition-em-vanilla-js-jo3" class="crayons-story__tertiary fs-xs"><time datetime="2023-12-02T13:21:51Z">Dec 2 '23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1701523311"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/dougsource/recriando-o-method-lodash-partition-em-vanilla-js-jo3" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqblcukx035wv7z1jqose.jpg" id="article-link-1685975"> Recriando o método lodash partition() em vanilla JS </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(137, 6, 6, 0.10); --tag-prefix: #890606; --tag-bg-hover: rgba(137, 6, 6, 0.10); --tag-prefix-hover: #890606; " href="/t/programming"><span class="crayons-tag__prefix">#</span>programming</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/portugues"><span class="crayons-tag__prefix">#</span>portugues</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/dougsource/recriando-o-method-lodash-partition-em-vanilla-js-jo3#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Recriando o método lodash partition() em vanilla JS"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a78nxi7z0k8elh2c7qac9j4oxatof1hv" class="crayons-icon"><title id="a78nxi7z0k8elh2c7qac9j4oxatof1hv">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1685970" data-content-user-id="1102248"> <a href="https://dev.to/dougsource/recriando-o-method-lodash-inrange-em-vanilla-js-knf" aria-labelledby="article-link-1685970" class="crayons-story__hidden-navigation-link">Recriando o método lodash inRange() em vanilla JS</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/dougsource" class="crayons-avatar crayons-avatar--l "> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--5ukvnZzb--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/1102248/f132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" alt="dougsource profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/dougsource" class="crayons-story__secondary fw-medium m:hidden"> doug-source </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1685970" aria-controls="story-author-preview-content-1685970" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="doug-source profile details"> doug-source </button> <div id="story-author-preview-content-1685970" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/dougsource" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--5ukvnZzb--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/1102248/f132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">doug-source</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1102248,"className":"User","name":"doug-source"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1102248"></div> </div> </div> </div> </div> <a href="https://dev.to/dougsource/recriando-o-method-lodash-inrange-em-vanilla-js-knf" class="crayons-story__tertiary fs-xs"><time datetime="2023-12-02T13:10:28Z">Dec 2 '23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1701522628"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/dougsource/recriando-o-method-lodash-inrange-em-vanilla-js-knf" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwoqmk0kdltaesuo5goa1.jpg" id="article-link-1685970"> Recriando o método lodash inRange() em vanilla JS </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(137, 6, 6, 0.10); --tag-prefix: #890606; --tag-bg-hover: rgba(137, 6, 6, 0.10); --tag-prefix-hover: #890606; " href="/t/programming"><span class="crayons-tag__prefix">#</span>programming</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/portugues"><span class="crayons-tag__prefix">#</span>portugues</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/dougsource/recriando-o-method-lodash-inrange-em-vanilla-js-knf#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Recriando o método lodash inRange() em vanilla JS"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a7vkf2rger1fxb1vreyvgv53hvp2zz5x" class="crayons-icon"><title id="a7vkf2rger1fxb1vreyvgv53hvp2zz5x">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1685427" data-content-user-id="1102248"> <a href="https://dev.to/dougsource/-recriando-o-method-lodash-pull-em-vanilla-js-94g" aria-labelledby="article-link-1685427" class="crayons-story__hidden-navigation-link">Recriando o método lodash pull() em vanilla JS</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/dougsource" class="crayons-avatar crayons-avatar--l "> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--5ukvnZzb--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/1102248/f132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" alt="dougsource profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/dougsource" class="crayons-story__secondary fw-medium m:hidden"> doug-source </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1685427" aria-controls="story-author-preview-content-1685427" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="doug-source profile details"> doug-source </button> <div id="story-author-preview-content-1685427" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/dougsource" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--5ukvnZzb--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/1102248/f132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">doug-source</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1102248,"className":"User","name":"doug-source"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1102248"></div> </div> </div> </div> </div> <a href="https://dev.to/dougsource/-recriando-o-method-lodash-pull-em-vanilla-js-94g" class="crayons-story__tertiary fs-xs"><time datetime="2023-12-01T19:25:26Z">Dec 1 '23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1701458726"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/dougsource/-recriando-o-method-lodash-pull-em-vanilla-js-94g" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fw1dfrhqe77odpes2adho.jpg" id="article-link-1685427"> Recriando o método lodash pull() em vanilla JS </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(137, 6, 6, 0.10); --tag-prefix: #890606; --tag-bg-hover: rgba(137, 6, 6, 0.10); --tag-prefix-hover: #890606; " href="/t/programming"><span class="crayons-tag__prefix">#</span>programming</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/portugues"><span class="crayons-tag__prefix">#</span>portugues</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/dougsource/-recriando-o-method-lodash-pull-em-vanilla-js-94g#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Recriando o método lodash pull() em vanilla JS"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="atqrqct0o09slsyafwsx55sj7ifpn125" class="crayons-icon"><title id="atqrqct0o09slsyafwsx55sj7ifpn125">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1685344" data-content-user-id="1102248"> <a href="https://dev.to/dougsource/como-converter-segundos-para-minutos-e-horas-em-vanila-js-2d7" aria-labelledby="article-link-1685344" class="crayons-story__hidden-navigation-link">Como converter segundos para minutos e horas em vanila JS</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/dougsource" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" alt="dougsource profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/dougsource" class="crayons-story__secondary fw-medium m:hidden"> doug-source </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1685344" aria-controls="story-author-preview-content-1685344" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="doug-source profile details"> doug-source </button> <div id="story-author-preview-content-1685344" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/dougsource" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">doug-source</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1102248,"className":"User","name":"doug-source"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1102248"></div> </div> </div> </div> </div> <a href="https://dev.to/dougsource/como-converter-segundos-para-minutos-e-horas-em-vanila-js-2d7" class="crayons-story__tertiary fs-xs"><time datetime="2023-12-01T18:08:28Z">Dec 1 '23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1701454108"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/dougsource/como-converter-segundos-para-minutos-e-horas-em-vanila-js-2d7" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0pinlevgeklaglox7n7s.jpg" id="article-link-1685344"> Como converter segundos para minutos e horas em vanila JS </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(137, 6, 6, 0.10); --tag-prefix: #890606; --tag-bg-hover: rgba(137, 6, 6, 0.10); --tag-prefix-hover: #890606; " href="/t/programming"><span class="crayons-tag__prefix">#</span>programming</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/portugues"><span class="crayons-tag__prefix">#</span>portugues</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/dougsource/como-converter-segundos-para-minutos-e-horas-em-vanila-js-2d7#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Como converter segundos para minutos e horas em vanila JS"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aoig0xigk69ncewm3zpc5ksqb1jadmfz" class="crayons-icon"><title id="aoig0xigk69ncewm3zpc5ksqb1jadmfz">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1685243" data-content-user-id="1102248"> <a href="https://dev.to/dougsource/gerando-numeros-randomicos-com-vanila-js-2gbl" aria-labelledby="article-link-1685243" class="crayons-story__hidden-navigation-link">Gerando números randômicos com vanila JS</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/dougsource" class="crayons-avatar crayons-avatar--l "> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--5ukvnZzb--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/1102248/f132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" alt="dougsource profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/dougsource" class="crayons-story__secondary fw-medium m:hidden"> doug-source </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1685243" aria-controls="story-author-preview-content-1685243" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="doug-source profile details"> doug-source </button> <div id="story-author-preview-content-1685243" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/dougsource" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--5ukvnZzb--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/1102248/f132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">doug-source</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1102248,"className":"User","name":"doug-source"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1102248"></div> </div> </div> </div> </div> <a href="https://dev.to/dougsource/gerando-numeros-randomicos-com-vanila-js-2gbl" class="crayons-story__tertiary fs-xs"><time datetime="2023-12-01T15:43:13Z">Dec 1 '23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1701445393"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/dougsource/gerando-numeros-randomicos-com-vanila-js-2gbl" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fp7dqcgm57n3x2wwebje3.jpg" id="article-link-1685243"> Gerando números randômicos com vanila JS </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(137, 6, 6, 0.10); --tag-prefix: #890606; --tag-bg-hover: rgba(137, 6, 6, 0.10); --tag-prefix-hover: #890606; " href="/t/programming"><span class="crayons-tag__prefix">#</span>programming</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/portugues"><span class="crayons-tag__prefix">#</span>portugues</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/dougsource/gerando-numeros-randomicos-com-vanila-js-2gbl#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Gerando números randômicos com vanila JS"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="amnlchosrgcben3kwn1s3r5kc8xoslpa" class="crayons-icon"><title id="amnlchosrgcben3kwn1s3r5kc8xoslpa">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1685073" data-content-user-id="1102248"> <a href="https://dev.to/dougsource/obtendo-os-meses-formatados-com-vanila-js-1g6e" aria-labelledby="article-link-1685073" class="crayons-story__hidden-navigation-link">Obtendo os meses formatados com vanila JS</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/dougsource" class="crayons-avatar crayons-avatar--l "> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--5ukvnZzb--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/1102248/f132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" alt="dougsource profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/dougsource" class="crayons-story__secondary fw-medium m:hidden"> doug-source </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1685073" aria-controls="story-author-preview-content-1685073" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="doug-source profile details"> doug-source </button> <div id="story-author-preview-content-1685073" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/dougsource" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--5ukvnZzb--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/1102248/f132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">doug-source</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1102248,"className":"User","name":"doug-source"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1102248"></div> </div> </div> </div> </div> <a href="https://dev.to/dougsource/obtendo-os-meses-formatados-com-vanila-js-1g6e" class="crayons-story__tertiary fs-xs"><time datetime="2023-12-01T12:34:46Z">Dec 1 '23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1701434086"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/dougsource/obtendo-os-meses-formatados-com-vanila-js-1g6e" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fm15empwol6nn6jst70ck.jpg" id="article-link-1685073"> Obtendo os meses formatados com vanila JS </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(137, 6, 6, 0.10); --tag-prefix: #890606; --tag-bg-hover: rgba(137, 6, 6, 0.10); --tag-prefix-hover: #890606; " href="/t/programming"><span class="crayons-tag__prefix">#</span>programming</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/portugues"><span class="crayons-tag__prefix">#</span>portugues</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/dougsource/obtendo-os-meses-formatados-com-vanila-js-1g6e#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Obtendo os meses formatados com vanila JS"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a37hdiv83cavc95ip6lbzyxsje89vsbh" class="crayons-icon"><title id="a37hdiv83cavc95ip6lbzyxsje89vsbh">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 3 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1684618" data-content-user-id="1102248"> <a href="https://dev.to/dougsource/como-construir-um-site-que-carregue-em-menos-de-um-segundo-4c9j" aria-labelledby="article-link-1684618" class="crayons-story__hidden-navigation-link">Como construir um site que carregue em menos de um segundo</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/dougsource" class="crayons-avatar crayons-avatar--l "> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--5ukvnZzb--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/1102248/f132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" alt="dougsource profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/dougsource" class="crayons-story__secondary fw-medium m:hidden"> doug-source </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1684618" aria-controls="story-author-preview-content-1684618" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="doug-source profile details"> doug-source </button> <div id="story-author-preview-content-1684618" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/dougsource" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--5ukvnZzb--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/1102248/f132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">doug-source</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1102248,"className":"User","name":"doug-source"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1102248"></div> </div> </div> </div> </div> <a href="https://dev.to/dougsource/como-construir-um-site-que-carregue-em-menos-de-um-segundo-4c9j" class="crayons-story__tertiary fs-xs"><time datetime="2023-12-01T03:58:20Z">Dec 1 '23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1701403100"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/dougsource/como-construir-um-site-que-carregue-em-menos-de-um-segundo-4c9j" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1b5y8utj6ch0k95nwxo0.jpg" id="article-link-1684618"> Como construir um site que carregue em menos de um segundo </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(137, 6, 6, 0.10); --tag-prefix: #890606; --tag-bg-hover: rgba(137, 6, 6, 0.10); --tag-prefix-hover: #890606; " href="/t/programming"><span class="crayons-tag__prefix">#</span>programming</a> <a class="crayons-tag crayons-tag--monochrome " 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 crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/portugues"><span class="crayons-tag__prefix">#</span>portugues</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/tips"><span class="crayons-tag__prefix">#</span>tips</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/dougsource/como-construir-um-site-que-carregue-em-menos-de-um-segundo-4c9j#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Como construir um site que carregue em menos de um segundo"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ae68o6c0mq6lc5it6izw2iz8ckp8zbtv" class="crayons-icon"><title id="ae68o6c0mq6lc5it6izw2iz8ckp8zbtv">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1684611" data-content-user-id="1102248"> <a href="https://dev.to/dougsource/como-ser-um-desenvolvedor-mais-produtivo-5fjf" aria-labelledby="article-link-1684611" class="crayons-story__hidden-navigation-link">Como ser um desenvolvedor mais produtivo</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/dougsource" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" alt="dougsource profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/dougsource" class="crayons-story__secondary fw-medium m:hidden"> doug-source </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1684611" aria-controls="story-author-preview-content-1684611" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="doug-source profile details"> doug-source </button> <div id="story-author-preview-content-1684611" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/dougsource" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">doug-source</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1102248,"className":"User","name":"doug-source"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1102248"></div> </div> </div> </div> </div> <a href="https://dev.to/dougsource/como-ser-um-desenvolvedor-mais-produtivo-5fjf" class="crayons-story__tertiary fs-xs"><time datetime="2023-12-01T03:38:44Z">Dec 1 '23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1701401924"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/dougsource/como-ser-um-desenvolvedor-mais-produtivo-5fjf" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F746kxww6qvt1mqr71ipa.jpg" id="article-link-1684611"> Como ser um desenvolvedor mais produtivo </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " 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 crayons-tag--monochrome " style=" --tag-bg: rgba(137, 6, 6, 0.10); --tag-prefix: #890606; --tag-bg-hover: rgba(137, 6, 6, 0.10); --tag-prefix-hover: #890606; " href="/t/programming"><span class="crayons-tag__prefix">#</span>programming</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/portugues"><span class="crayons-tag__prefix">#</span>portugues</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/dougsource/como-ser-um-desenvolvedor-mais-produtivo-5fjf#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Como ser um desenvolvedor mais produtivo"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a7qsn5o0qlg7n3lyx02zlk6wr8lf7w0s" class="crayons-icon"><title id="a7qsn5o0qlg7n3lyx02zlk6wr8lf7w0s">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1684296" data-content-user-id="1102248"> <a href="https://dev.to/dougsource/navagendo-na-web-com-o-teclado-17jo" aria-labelledby="article-link-1684296" class="crayons-story__hidden-navigation-link">Navegando na web com o teclado</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/dougsource" class="crayons-avatar crayons-avatar--l "> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--5ukvnZzb--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/1102248/f132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" alt="dougsource profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/dougsource" class="crayons-story__secondary fw-medium m:hidden"> doug-source </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1684296" aria-controls="story-author-preview-content-1684296" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="doug-source profile details"> doug-source </button> <div id="story-author-preview-content-1684296" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/dougsource" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--5ukvnZzb--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/1102248/f132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">doug-source</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1102248,"className":"User","name":"doug-source"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1102248"></div> </div> </div> </div> </div> <a href="https://dev.to/dougsource/navagendo-na-web-com-o-teclado-17jo" class="crayons-story__tertiary fs-xs"><time datetime="2023-11-30T19:42:09Z">Nov 30 '23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1701373329"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/dougsource/navagendo-na-web-com-o-teclado-17jo" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fknnjhajvbp9du6nlunvs.jpg" id="article-link-1684296"> Navegando na web com o teclado </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(137, 6, 6, 0.10); --tag-prefix: #890606; --tag-bg-hover: rgba(137, 6, 6, 0.10); --tag-prefix-hover: #890606; " href="/t/programming"><span class="crayons-tag__prefix">#</span>programming</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/portugues"><span class="crayons-tag__prefix">#</span>portugues</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(8, 59, 21, 0.10); --tag-prefix: #083b15; --tag-bg-hover: rgba(8, 59, 21, 0.10); --tag-prefix-hover: #083b15; " href="/t/a11y"><span class="crayons-tag__prefix">#</span>a11y</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/dougsource/navagendo-na-web-com-o-teclado-17jo#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Navegando na web com o teclado"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a4rtxsd1pt2qygsgpe42mcjlzk0lbm2b" class="crayons-icon"><title id="a4rtxsd1pt2qygsgpe42mcjlzk0lbm2b">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 3 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1684209" data-content-user-id="1102248"> <a href="https://dev.to/dougsource/como-e-por-que-usar-aria-live-5b47" aria-labelledby="article-link-1684209" class="crayons-story__hidden-navigation-link">Como e por que usar aria-live</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/dougsource" class="crayons-avatar crayons-avatar--l "> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--5ukvnZzb--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/1102248/f132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" alt="dougsource profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/dougsource" class="crayons-story__secondary fw-medium m:hidden"> doug-source </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1684209" aria-controls="story-author-preview-content-1684209" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="doug-source profile details"> doug-source </button> <div id="story-author-preview-content-1684209" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/dougsource" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--5ukvnZzb--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/1102248/f132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">doug-source</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1102248,"className":"User","name":"doug-source"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1102248"></div> </div> </div> </div> </div> <a href="https://dev.to/dougsource/como-e-por-que-usar-aria-live-5b47" class="crayons-story__tertiary fs-xs"><time datetime="2023-11-30T18:20:26Z">Nov 30 '23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1701368426"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/dougsource/como-e-por-que-usar-aria-live-5b47" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fu5f66tegg54ywyk1l6tj.jpg" id="article-link-1684209"> Como e por que usar aria-live </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " 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 crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/screenreader"><span class="crayons-tag__prefix">#</span>screenreader</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(8, 59, 21, 0.10); --tag-prefix: #083b15; --tag-bg-hover: rgba(8, 59, 21, 0.10); --tag-prefix-hover: #083b15; " href="/t/a11y"><span class="crayons-tag__prefix">#</span>a11y</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/portugues"><span class="crayons-tag__prefix">#</span>portugues</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/dougsource/como-e-por-que-usar-aria-live-5b47#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Como e por que usar aria-live"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a8kcbpyc28hnkv24yz5j8idr4hcv3vy6" class="crayons-icon"><title id="a8kcbpyc28hnkv24yz5j8idr4hcv3vy6">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1684204" data-content-user-id="1102248"> <a href="https://dev.to/dougsource/voce-deveria-usar-um-leitor-de-tela-29mn" aria-labelledby="article-link-1684204" class="crayons-story__hidden-navigation-link">Você deveria usar um leitor de tela</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/dougsource" class="crayons-avatar crayons-avatar--l "> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--5ukvnZzb--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/1102248/f132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" alt="dougsource profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/dougsource" class="crayons-story__secondary fw-medium m:hidden"> doug-source </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1684204" aria-controls="story-author-preview-content-1684204" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="doug-source profile details"> doug-source </button> <div id="story-author-preview-content-1684204" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/dougsource" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--5ukvnZzb--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/1102248/f132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">doug-source</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1102248,"className":"User","name":"doug-source"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1102248"></div> </div> </div> </div> </div> <a href="https://dev.to/dougsource/voce-deveria-usar-um-leitor-de-tela-29mn" class="crayons-story__tertiary fs-xs"><time datetime="2023-11-30T18:10:06Z">Nov 30 '23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1701367806"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/dougsource/voce-deveria-usar-um-leitor-de-tela-29mn" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fd4y30sxtbxkzbudpt4ba.jpg" id="article-link-1684204"> Você deveria usar um leitor de tela </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " 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 crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/screenreader"><span class="crayons-tag__prefix">#</span>screenreader</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/portugues"><span class="crayons-tag__prefix">#</span>portugues</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/dougsource/voce-deveria-usar-um-leitor-de-tela-29mn#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Você deveria usar um leitor de tela"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a8gx8ejvntex2g9uvfupo0hc8ucxvh2y" class="crayons-icon"><title id="a8gx8ejvntex2g9uvfupo0hc8ucxvh2y">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1507257" data-content-user-id="1102248"> <a href="https://dev.to/dougsource/css-flexbox-e-seus-alinhamentos-4988" aria-labelledby="article-link-1507257" class="crayons-story__hidden-navigation-link">CSS Flexbox e seus alinhamentos</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/dougsource" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" alt="dougsource profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/dougsource" class="crayons-story__secondary fw-medium m:hidden"> doug-source </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1507257" aria-controls="story-author-preview-content-1507257" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="doug-source profile details"> doug-source </button> <div id="story-author-preview-content-1507257" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/dougsource" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">doug-source</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1102248,"className":"User","name":"doug-source"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1102248"></div> </div> </div> </div> </div> <a href="https://dev.to/dougsource/css-flexbox-e-seus-alinhamentos-4988" class="crayons-story__tertiary fs-xs"><time datetime="2023-06-16T21:34:26Z">Jun 16 '23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1686951266"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/dougsource/css-flexbox-e-seus-alinhamentos-4988" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fry38f94mhq7ryp0udpa9.jpg" id="article-link-1507257"> CSS Flexbox e seus alinhamentos </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/flexbox"><span class="crayons-tag__prefix">#</span>flexbox</a> <a class="crayons-tag crayons-tag--monochrome " 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 crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/portugues"><span class="crayons-tag__prefix">#</span>portugues</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/dougsource/css-flexbox-e-seus-alinhamentos-4988#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - CSS Flexbox e seus alinhamentos"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ajkg1dynieg4ttr0fmrj7xo4xz4zdz8y" class="crayons-icon"><title id="ajkg1dynieg4ttr0fmrj7xo4xz4zdz8y">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1507251" data-content-user-id="1102248"> <a href="https://dev.to/dougsource/caso-de-uso-initial-css-value-2bdl" aria-labelledby="article-link-1507251" class="crayons-story__hidden-navigation-link">Caso de uso: initial css value</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/dougsource" class="crayons-avatar crayons-avatar--l "> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--5ukvnZzb--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/1102248/f132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" alt="dougsource profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/dougsource" class="crayons-story__secondary fw-medium m:hidden"> doug-source </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1507251" aria-controls="story-author-preview-content-1507251" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="doug-source profile details"> doug-source </button> <div id="story-author-preview-content-1507251" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/dougsource" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--5ukvnZzb--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/1102248/f132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">doug-source</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1102248,"className":"User","name":"doug-source"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1102248"></div> </div> </div> </div> </div> <a href="https://dev.to/dougsource/caso-de-uso-initial-css-value-2bdl" class="crayons-story__tertiary fs-xs"><time datetime="2023-06-16T21:19:44Z">Jun 16 '23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1686950384"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/dougsource/caso-de-uso-initial-css-value-2bdl" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7q5pv25tgfu6pb8iro0k.jpg" id="article-link-1507251"> Caso de uso: initial css value </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/flexbox"><span class="crayons-tag__prefix">#</span>flexbox</a> <a class="crayons-tag crayons-tag--monochrome " 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 crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/portugues"><span class="crayons-tag__prefix">#</span>portugues</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/dougsource/caso-de-uso-initial-css-value-2bdl#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Caso de uso: initial css value"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="agiwhlayup1tgyyaa6fdelvhluliz7es" class="crayons-icon"><title id="agiwhlayup1tgyyaa6fdelvhluliz7es">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1506100" data-content-user-id="1102248"> <a href="https://dev.to/dougsource/logica-do-desenho-de-eixos-utilizando-a-biblioteca-d3js-20b0" aria-labelledby="article-link-1506100" class="crayons-story__hidden-navigation-link">Lógica do desenho de eixos utilizando a biblioteca D3.js</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/dougsource" class="crayons-avatar crayons-avatar--l "> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" alt="dougsource profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/dougsource" class="crayons-story__secondary fw-medium m:hidden"> doug-source </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1506100" aria-controls="story-author-preview-content-1506100" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="doug-source profile details"> doug-source </button> <div id="story-author-preview-content-1506100" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/dougsource" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">doug-source</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1102248,"className":"User","name":"doug-source"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1102248"></div> </div> </div> </div> </div> <a href="https://dev.to/dougsource/logica-do-desenho-de-eixos-utilizando-a-biblioteca-d3js-20b0" class="crayons-story__tertiary fs-xs"><time datetime="2023-06-15T21:10:58Z">Jun 15 '23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1686863458"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/dougsource/logica-do-desenho-de-eixos-utilizando-a-biblioteca-d3js-20b0" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftj2n5ao1or98tinmezm3.png" id="article-link-1506100"> Lógica do desenho de eixos utilizando a biblioteca D3.js </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/d3"><span class="crayons-tag__prefix">#</span>d3</a> <a class="crayons-tag crayons-tag--monochrome " 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 crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/portugues"><span class="crayons-tag__prefix">#</span>portugues</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/dougsource/logica-do-desenho-de-eixos-utilizando-a-biblioteca-d3js-20b0" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1506100" aria-label="Add a comment to post - Lógica do desenho de eixos utilizando a biblioteca D3.js"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">1<span class="hidden s:inline"> reaction</span></span> </div> </a> <a href="https://dev.to/dougsource/logica-do-desenho-de-eixos-utilizando-a-biblioteca-d3js-20b0#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Lógica do desenho de eixos utilizando a biblioteca D3.js"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="akkf1za268umlqkihxpa8m6we4oin63e" class="crayons-icon"><title id="akkf1za268umlqkihxpa8m6we4oin63e">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 6 min read </small> </div> </div> </div> </div> </div> <div class="placeholder-div"></div> </div> <div class="loading-articles" id="loading-articles"> loading... </div> </main> </div> </main> <script src="https://assets.dev.to/assets/storiesList-b9c50cbd898a3a64258a3a49db1c531651b0a4a11937be35ed4651111802b5b5.js" defer="defer"></script> <script src="https://assets.dev.to/assets/followButtons-f2455d1f50a862b83fa006b1953e3a1644598781243cae25d3e75b13c04184fd.js" defer="defer"></script> <script src="https://assets.dev.to/assets/feedPreviewCards-8d16b0b656456a28c0a290f756cf6e21e19833111c4796f48c631bfea8323d51.js" defer="defer"></script> <script src="https://assets.dev.to/assets/hideBookmarkButtons-0cc08aac1c422e6b6f75e5284b5350215abf211b59fb3eb8d8a4ef85e205b607.js" defer="defer"></script> <script src="https://assets.dev.to/assets/profileDropdown-cd734402b28ba81eaec2ca8b2df8fc3a188ecd37c709ec183e369ca69e461d77.js" defer="defer"></script> <script src="https://assets.dev.to/assets/users/profilePage-1393cb4a2fea4e217cb2a2451f02d7a20ee01da60dc85f128f703631908dab09.js" defer="defer"></script> <script src="https://assets.dev.to/assets/localizeArticleDates-70147c5c6bfe350b42e020ebb2a3dd37419d83978982b5a67b6389119bf162ac.js" defer="defer"></script> <script src="https://assets.dev.to/assets/asyncUserStatusCheck-c38c3dcbc3fa64c8ff9e403434eabaf359c4957d3fb713784cc99144da5d5358.js" defer="defer"></script> <div id="runtime-banner-container"></div> </div> </div> <footer id="footer" class="crayons-footer print-hidden"> <div id="footer-container" class="crayons-footer__container"> <style> .long-bb-body { max-height: calc(100vh - 200px); overflow: hidden; } .long-bb-bottom { height: 180px; background: linear-gradient(to top, var(--card-bg), transparent); margin-top: -180px; position:relative; z-index: 5; } </style> <div style="" data-display-unit data-id="146443" data-category-click="click" data-category-impression="impression" data-context-type="home" data-special="nothing" data-article-id="" data-type-of="in_house"> <p style="font-weight: bold;margin-bottom: 10px"> Thank you to our Diamond Sponsor <a href="https://neon.tech/?bb=146443">Neon</a> for supporting our community. </p> </div> <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> <ul class="footer__nav-links flex gap-2 justify-center flex-wrap fs-s p-0" style="" /> <li class="footer__nav-link flex items-center"> <a href="/"> Home </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/++"> DEV++ </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/pod"> Podcasts </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/videos"> Videos </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/tags"> Tags </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/help"> DEV Help </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="https://shop.forem.com/"> Forem Shop </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/advertise"> Advertise on DEV </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/challenges"> DEV Challenges </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/showcase"> DEV Showcase </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/about"> About </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/contact"> Contact </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/free-postgres-database-tier"> Free Postgres Database </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/software-comparisons"> Software comparisons </a> <span class="dot ml-2"></span> </li> </ul> <ul class="footer__nav-links flex gap-2 justify-center flex-wrap fs-s p-0" style="" /> <li class="footer__nav-link flex items-center"> <a href="/code-of-conduct"> Code of Conduct </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/privacy"> Privacy Policy </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/terms"> Terms of use </a> <span class="dot ml-2"></span> </li> </ul> <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 - 2025.</p> </div> </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://media2.dev.to/dynamic/image/width=190,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.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 js-global-signup-modal__create-account" aria-label="Create new account" data-no-instant> Create account </a> </div> </div> </div> <script src="https://assets.dev.to/assets/signupModalShortcuts-0b25469b985100a01e94cbd7fccaf7f0a4d776e129aac65c766aa32cb28ab29a.js" defer="defer"></script> <div id="cookie-consent"></div> <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.","counted_organization":{"one":"%{count} organization","other":"%{count} organizations"},"counted_user":{"one":"%{count} person","other":"%{count} people"},"not_following":"You're not following anyone","following_everyone":"You're following %{details} (everyone)","you_are_following":"You're following","and":"and"}}}"></div> <div id="reaction-category-resources" class="hidden" aria-hidden="true"> <img data-name="Like" data-slug="like" data-position="1" src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> <img data-name="Unicorn" data-slug="unicorn" data-position="2" src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> <img data-name="Exploding Head" data-slug="exploding_head" data-position="3" src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> <img data-name="Raised Hands" data-slug="raised_hands" data-position="4" src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> <img data-name="Fire" data-slug="fire" data-position="5" src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </div> <script> var userSignedIn = false; if (document.readyState === 'complete' || document.readyState === 'interactive') { initAuth(); } else { document.addEventListener('DOMContentLoaded', initAuth); } function initAuth() { var paramToken = new URLSearchParams(window.location.search).get('jwt'); if (paramToken && !userSignedIn) { authenticateUser(paramToken); } else { var iframe = document.createElement('iframe'); iframe.style.display = 'none'; iframe.src = 'https://forem.com/auth_pass/iframe'; document.body.appendChild(iframe); window.addEventListener('message', function(event) { if (event.origin !== 'https://forem.com' && event.origin !== window.location.origin) { return; } var data = event.data; if (data.authenticated && !userSignedIn) { authenticateUser(data.token); } else if(data.authenticated && window.ReactNativeWebView && window.ReactNativeWebView.postMessage) { window.ReactNativeWebView.postMessage(JSON.stringify({ action: 'login', token: data.token, })); } }); } function authenticateUser(token) { fetch('/auth_pass/token_login', { method: 'POST', credentials: 'include', headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': getMetaContent('csrf-token'), }, body: JSON.stringify({ token: token }), }) .then(function(response) { return response.json(); }) .then(function(data) { if (data.success) { if (document.head.querySelector('meta[name="user-signed-in"][content="false"]')) { // Reload the page to update the user's state location.reload(); } } }) .catch(function(error) { console.error('Error during authentication:', error); }); } function getMetaContent(name) { var element = document.querySelector('meta[name="' + name + '"]'); return element ? element.getAttribute('content') : ''; } } </script> </body> </html>