CINXE.COM

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Curated Developer Guides - DEV Community</title> <meta name="last-updated" content="2024-11-27 10:50:55 UTC"> <meta name="user-signed-in" content="false"> <meta name="head-cached-at" content="1732704655"> <meta name="environment" content="production"> <link rel="stylesheet" href="https://assets.dev.to/assets/minimal-1029a3181a2002b43ea3fa90b914eb5dacfc0a92024c5addf6b57d9e589d6a96.css" media="all" id="main-minimal-stylesheet" /> <link rel="stylesheet" href="https://assets.dev.to/assets/views-64d5fff92cc913e57b90d60da8f10d00138c946bcd9212518cbdbd2fb73efe93.css" media="all" id="main-views-stylesheet" /> <link rel="stylesheet" href="https://assets.dev.to/assets/crayons-0a3711d92a5aeac98656e1629816ca6272674f32b83b3832df1a0588c877d33c.css" media="all" id="main-crayons-stylesheet" /> <script src="https://assets.dev.to/assets/base-8dcc8a97f0617dfbfe06690e34a9d71cb7dd6554611a24ec3f71fb6b96414828.js" defer="defer"></script> <script src="https://assets.dev.to/assets/application-147cebefc5c4cddde055e8f5eb0055e811469b08405170e2411fbd7944b5ac04.js" defer="defer"></script> <script src="https://assets.dev.to/assets/baseInitializers-bc498cfd7bb7d2a2da59d68d0b2055cc2dd26fee3669ab88edbb396d37bc3369.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-cc5e8a352578866203771def747f37c3ec6a0869de0458328e0fcba3d5d2fceb.js"> <link rel="canonical" href="https://dev.to/guides" /> <meta name="description" content="Curated Developer Guides — DEV Community"> <meta name="keywords" content="software development, engineering, rails, javascript, ruby"> <meta property="og:type" content="article" /> <meta property="og:url" content="https://dev.to/guides" /> <meta property="og:title" content="Curated Developer Guides — DEV Community" /> <meta property="og:image" content="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3otvb2z646ytpt1hl2rv.jpg"> <meta property="og:description" content="A collection of some of the most helpful guides for understanding and mastering specific subjects." /> <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:title" content="Curated Developer Guides — DEV Community"> <meta name="twitter:description" content="A collection of some of the most helpful guides for understanding and mastering specific subjects."> <meta name="twitter:image:src" content="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3otvb2z646ytpt1hl2rv.jpg"> <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="2024-11-26T18:10:52Z" data-latest-commit-id="b22e78e4d1517bf0bbefbaa612d3838983c588c9" 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-ga4-tracking-id="G-TYEM8Y3JN3"> <link rel="stylesheet" href="https://assets.dev.to/assets/minimal-1029a3181a2002b43ea3fa90b914eb5dacfc0a92024c5addf6b57d9e589d6a96.css" media="all" id="secondary-minimal-stylesheet" /> <link rel="stylesheet" href="https://assets.dev.to/assets/views-64d5fff92cc913e57b90d60da8f10d00138c946bcd9212518cbdbd2fb73efe93.css" media="all" id="secondary-views-stylesheet" /> <link rel="stylesheet" href="https://assets.dev.to/assets/crayons-0a3711d92a5aeac98656e1629816ca6272674f32b83b3832df1a0588c877d33c.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="aqsu9k9frf7vehwdf9bawt8yaojzvqut" class="crayons-icon"><title id="aqsu9k9frf7vehwdf9bawt8yaojzvqut">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="a7hny2x8qtffik1f7mbwgkacoseiv8ef" aria-hidden="true" class="crayons-icon"><title id="a7hny2x8qtffik1f7mbwgkacoseiv8ef">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="abzoe50fclbziujr9agez8rnw8o7emua" aria-hidden="true" class="crayons-icon"><title id="abzoe50fclbziujr9agez8rnw8o7emua">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"> <a class="c-link c-link--icon-alone c-link--block m:hidden mx-1" id="search-link" aria-label="Search" href="/search"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a2wrwbswcrmcs70048sjxcocsbjgb4iq" class="crayons-icon"><title id="a2wrwbswcrmcs70048sjxcocsbjgb4iq">Search</title> <path d="M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0111 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 01-1.969 5.617zm-2.006-.742A6.977 6.977 0 0018 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 004.875-1.975l.15-.15z"></path> </svg> </a> <div class="flex" id="authentication-top-nav-actions"> <span class="hidden m:block"> <a href="/enter" class="c-link c-link--block mr-2 whitespace-nowrap ml-auto" data-no-instant> Log in </a> </span> <a href="/enter?state=new-user" 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="aosdgoewfmmizdnm5k5rx1t9ed7rx4ka" aria-hidden="true" class="crayons-icon c-btn__icon"><title id="aosdgoewfmmizdnm5k5rx1t9ed7rx4ka">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-show pageslug-guides" 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> <script src="https://assets.dev.to/assets/homePage-5e62893f2c0eb78662ae8ec9585bdb419d7921e1fadccb4a40aec695bcaf103c.js" defer="defer"></script> <main id="main-content"> <div class="crayons-layout crayons-layout--limited-l"> <div class="crayons-card text-styles text-padding"> <h1 class="fs-3xl s:fs-4xl l:fs-5xl fw-bold s:fw-heavy lh-tight mb-4 mt-0">Curated Developer Guides</h1> <p>This is a list of high quality guides on specific topics gathered for your learning pleasure. This list of community tutorials is an experimental directory <strong>starting with only CSS, Git, and a bit of JavaScript</strong>, but will be expanded to cover more overall topics. Enjoy diving in!</p> <p>If you want a post of yours featured here, make sure it is <em>high quality</em> and clearly includes all relevant keywords in the title and the first paragraph of the post. We want to maximize for readability, even when skimming.</p> <hr> <h2> <a name="css-guides" href="#css-guides"> </a> CSS Guides </h2> <h3> <a name="css-align-guides" href="#css-align-guides"> </a> <a href="https://dev.to/css-align-guides">CSS Align Guides</a> </h3> <p>Oh my, one of the trickier topics! If you're still confused after reading these great guides, it's not your fault, it's CSS.</p> <h3> <a name="css-animation-guides" href="#css-animation-guides"> </a> <a href="https://dev.to/css-animation-guides">CSS Animation Guides</a> </h3> <p>Animation in CSS is one of the most powerful things you can master for excellent UX development. Just don't overdo it!</p> <h3> <a name="css-background-guides" href="#css-background-guides"> </a> <a href="https://dev.to/css-background-guides">CSS Background Guides</a> </h3> <p>CSS Backgrounds can be a great way to add a splash of color to your pages, but there are a lot of options!</p> <h3> <a name="css-border-guides" href="#css-border-guides"> </a> <a href="https://dev.to/css-border-guides">CSS Border Guides</a> </h3> <p>Understanding all things border from <code>border-style</code> to <code>border-size</code> and using them all together.</p> <h3> <a name="css-box-sizing-guides" href="#css-box-sizing-guides"> </a> <a href="https://dev.to/css-box-sizing-guides">CSS Box Sizing Guides</a> </h3> <p>Box sizing can be a challenging overall topic. Fear not, however! All your questions will be answered in these great posts!</p> <h3> <a name="css-display-guides" href="#css-display-guides"> </a> <a href="https://dev.to/css-display-guides">CSS Display Guides</a> </h3> <p>Remember that different HTML elements come with default display properties! Please find all your display needs below.</p> <h3> <a name="css-flex-guides" href="#css-flex-guides"> </a> <a href="https://dev.to/css-flex-guides">CSS Flex Guides</a> </h3> <p>Flexbox and flex properties are incredibly useful and can be mixed with other CSS layout approaches!</p> <h3> <a name="css-filter-guides" href="#css-filter-guides"> </a> <a href="https://dev.to/css-filter-guides">CSS Filter Guides</a> </h3> <p>There is a lot you can do with CSS filters, from blurs to colors and more. It is worth understanding the possibilities here!</p> <h3> <a name="css-font-guides" href="#css-font-guides"> </a> <a href="https://dev.to/css-font-guides">CSS Font Guides</a> </h3> <p>Understanding <code>font-family</code>, <code>font-size</code> and more. Please leave a comment if you find any posts here helpful. These guides also include tips on loading fonts and handling fonts in general.</p> <h3> <a name="css-grid-guides" href="#css-grid-guides"> </a> <a href="https://dev.to/css-grid-guides">CSS Grid Guides</a> </h3> <p>Grid is a powerful concept. Read these guides carefully, there is a lot to learn!</p> <h3> <a name="css-margin-guides" href="#css-margin-guides"> </a> <a href="https://dev.to/css-margin-guides">CSS Margin Guides</a> </h3> <p>There is no right or wrong way to do CSS margins, but there are a lot of iffy ways!</p> <h3> <a name="css-opacity-guides" href="#css-opacity-guides"> </a> <a href="https://dev.to/css-opacity-guides">CSS Opacity Guides</a> </h3> <p>Let's be transparent: Opacity is an important part of a CSS tookkit.</p> <h3> <a name="css-outline-guides" href="#css-outline-guides"> </a> <a href="https://dev.to/css-outline-guides">CSS Outline Guides</a> </h3> <p>A CSS Outline is drawn <em>outside</em> the borders of the CSS. These are tricky concepts, please read the guides thoroughly.</p> <h3> <a name="css-overflow-guides" href="#css-overflow-guides"> </a> <a href="https://dev.to/css-overflow-guides">CSS Overflow Guides</a> </h3> <p>CSS Overflow will determine whether content clips or scrolls, etc. It's important to get right when you're not sure the size of the content you're dealing with.</p> <h3> <a name="css-padding-guides" href="#css-padding-guides"> </a> <a href="https://dev.to/css-padding-guides">CSS Padding Guides</a> </h3> <p>There's a lot of nuance in effective CSS padding.</p> <h3> <a name="css-position-guides" href="#css-position-guides"> </a> <a href="https://dev.to/css-position-guides">CSS Position Guides</a> </h3> <p><code>static</code>, <code>relative</code>, <code>absolute</code>, <code>fixed</code>, <code>sticky</code>! Oh my!!</p> <h3> <a name="css-shadow-guides" href="#css-shadow-guides"> </a> <a href="https://dev.to/css-shadow-guides">CSS Shadow Guides</a> </h3> <p><code>box-shadow</code>, <code>text-shadow</code> and everything about this property! Just don't overdo the shadows, that's never a good look. 😅</p> <h3> <a name="css-transform-guides" href="#css-transform-guides"> </a> <a href="https://dev.to/css-transform-guides">CSS Transform Guides</a> </h3> <p>If you understand how and when to use Transform, you can get a lot done! It's also important to understand the difference between Transform and Animnation. Read along!</p> <h3> <a name="css-zindex-guides" href="#css-zindex-guides"> </a> <a href="https://dev.to/css-z-index-guides">CSS Z-Index Guides</a> </h3> <p>Z-index is all about discipline and having a plan — easier said than done!</p> <hr> <h2> <a name="git-guides" href="#git-guides"> </a> Git Guides </h2> <h3> <a name="git-add-guides" href="#git-add-guides"> </a> <a href="https://dev.to/git-add-guides">Git Add Guides</a> </h3> <p>The git add command takes a change in the working directory and stages it. It is the precursor to <code>git commit</code> most of the time. Enjoy the guides here!</p> <h3> <a name="git-branch-guides" href="#git-branch-guides"> </a> <a href="https://dev.to/git-branch-guides">Git Branch Guides</a> </h3> <p>The git branch command lets you create, update, delete git branches depending on the arguments. Enjoy these guides</p> <h3> <a name="git-checkout-guides" href="#git-checkout-guides"> </a> <a href="https://dev.to/git-checkout-guides">Git Checkout Guides</a> </h3> <p>Git checkout is used to navigate between branches. Learn more in these guides</p> <h3> <a name="git-config-guides" href="#git-config-guides"> </a> <a href="https://dev.to/git-config-guides">Git Config Guides</a> </h3> <p>Git config allows you to set configuration values either locally and globally. Learn more with these guides.</p> <h3> <a name="git-clone-guides" href="#git-clone-guides"> </a> <a href="https://dev.to/git-clone-guides">Git Clone Guides</a> </h3> <p>The git clone command is used to point to an existing git repository and make a copy of that repo in a new directory. Learn more with these community guides.</p> <h3> <a name="git-commit-guides" href="#git-commit-guides"> </a> <a href="https://dev.to/git-commit-guides">Git Commit Guides</a> </h3> <p>The git commit command allows you to save your changes to the local git repository you are working in. Before committing, you meed to <code>git add</code> the changes. Learn more in these guides.</p> <h3> <a name="git-diff-guides" href="#git-diff-guides"> </a> <a href="https://dev.to/git-diff-guides">Git Diff Guides</a> </h3> <p>Git diff helps track the differences between changes to a file. It is a multi-use command which can be executed in different contexts. Learn more in these guides.</p> <h3> <a name="git-merge-guides" href="#git-merge-guides"> </a> <a href="https://dev.to/git-merge-guides">Git Merge Guides</a> </h3> <p>Git merge helps take multiple branches and combine them. Learn more in these guides.</p> <h3> <a name="git-log-guides" href="#git-log-guides"> </a> <a href="https://dev.to/git-log-guides">Git Log Guides</a> </h3> <p>Git log will print a the last <code>n</code> commits in a repo. Learn more in the guides below</p> <h3> <a name="git-pull-guides" href="#git-pull-guides"> </a> <a href="https://dev.to/git-pull-guides">Git Pull Guides</a> </h3> <p>Git pull downloads files from a remote repo and updates your current HEAD. Learn more in these guides.</p> <h3> <a name="git-push-guides" href="#git-push-guides"> </a> <a href="https://dev.to/git-push-guides">Git Push Guides</a> </h3> <p>Git push is used to tajke local files and upload them to a remote git repo. Learn more in these guides below.</p> <h3> <a name="git-remote-guides" href="#git-remote-guides"> </a> <a href="https://dev.to/git-remote-guides">Git Remote Guides</a> </h3> <p>The git remote command lets you create, update, delete and view remote repos, such as on GitHub. Learn more below.</p> <h3> <a name="git-revert-guides" href="#git-revert-guides"> </a> <a href="https://dev.to/git-revert-guides">Git Revert Guides</a> </h3> <p>Git revert allows you to change a commit history. Learn more in these community guides below.</p> <h3> <a name="git-stash-guides" href="#git-stash-guides"> </a> <a href="https://dev.to/git-stash-guides">Git Stash Guides</a> </h3> <p>Git stash is used to record the current state of work, but reverts the context back to a clean slate before the changes were made. Learn more below.</p> <hr> <h2> <a name="javascript-guides" href="#javascript-guides"> </a> JavaScript Guides </h2> <h3> <a name="javascript-array-guides" href="#javascript-array-guides"> </a> <a href="https://dev.to/javascript-array-guides">JavaScript Array Guides</a> </h3> <p>Let's get to know the functionality of the JavaScript array object. Hopefully you find these guides helpful.</p> <h3> <a name="javascript-arrow-function-guides" href="#javascript-arrow-function-guides"> </a> <a href="https://dev.to/javascript-arrow-function-guides">JavaScript Arrow Function Guides</a> </h3> <p>Let's make sure we get the syntax correct for JavaScript Arrow Functions and differentiate them from other ways of defining functions in JavaScript. Browse below for key guides.</p> <h3> <a name="javascript-async-guides" href="#javascript-async-guides"> </a> <a href="https://dev.to/javascript-async-guides">JavaScript Async Guides</a> </h3> <p>The JavaScript Async function is one of the most powerful, yet sometimes unintuitive concepts in JavaScript. Hopefully you will have a better grip over async and async await once you dive into these guides.</p> <h3> <a name="javascript-date-guides" href="#javascript-date-guides"> </a> <a href="https://dev.to/javascript-date-guides">JavaScript Date Guides</a> </h3> <p>JavaScript date objects, like many other things in JavaScript, can be tricky. Dates, in general, can be tricky. Thankfully we have a lot of great guides here.</p> <h3> <a name="javascript-event-guides" href="#javascript-event-guides"> </a> <a href="https://dev.to/javascript-event-guides">JavaScript Event Guides</a> </h3> <p>A JavaScript Event, in a web dev context, is how a lot of interactivity flows. Sometimes an event is abstracted away by the framework, and sometimes you listen directly. No matter what, hopefully you find these guides helpful!</p> <h3> <a name="javascript-map-guides" href="#javascript-map-guides"> </a> <a href="https://dev.to/javascript-map-guides">JavaScript Map Guides</a> </h3> <p>The JavaScript Map functionality is used consistently to iterate over arrays in a consise and useful way. Use these guides to dive into all the JS Map nuance.</p> <h3> <a name="javascript-promise-guides" href="#javascript-promise-guides"> </a> <a href="https://dev.to/javascript-promise-guides">JavaScript Promise Guides</a> </h3> <p>A JavaScript Promise is one of several ways to do asynchronous programming in JavaScript, and progress from one part of a program to the next. Get into all the details with these guides.</p> <h3> <a name="javascript-string-guides" href="#javascript-string-guides"> </a> <a href="https://dev.to/javascript-string-guides">JavaScript String Guides</a> </h3> <p>JavaScript strings are not always so straightforward, especially how they interpolate and can be interpreted as numbers. Let's get to the bottom of all the functionality in these guides.</p> <hr> <h2> <a name="react-guides" href="#react-guides"> </a> React Guides </h2> <h3> <a name="react-component-guides" href="#react-component-guides"> </a> <a href="https://dev.to/react-component-guides">React Component Guides</a> </h3> <p>React Components are the fundamental independent and reusable bits of code in a React program.</p> <h3> <a name="react-props-guides" href="#react-props-guides"> </a> <a href="https://dev.to/react-props-guides">React Props Guides</a> </h3> <p>React Props are arguments which are passed into React components.</p> <h3> <a name="react-state-guides" href="#react-state-guides"> </a> <a href="https://dev.to/react-state-guides">React State Guides</a> </h3> <p>React State allows us to manage changing data in an application.</p> <h3> <a name="react-usestate-guides" href="#react-usestate-guides"> </a> <a href="https://dev.to/react-usestate-guides">React useState Guides</a> </h3> <p>useState allows you to preservevalues between the function calls.</p> <h3> <a name="react-useeffect-guides" href="#react-useeffect-guides"> </a> <a href="https://dev.to/react-useeffect-guides">React useEffect Guides</a> </h3> <p>The useEffect Hook lets you perform side effects in your components.</p> <h3> <a name="react-usecontext-guides" href="#react-usecontext-guides"> </a> <a href="https://dev.to/react-usecontext-guides">React useContext Guides</a> </h3> <p>useContext takes the Context as parameter to retrieve the value from it.</p> <h3> <a name="react-usereducer-guides" href="#react-usereducer-guides"> </a> <a href="https://dev.to/react-usereducer-guides">React useReducer Guides</a> </h3> <p>useReducer allows for custom state logic.</p> <h3> <a name="react-usecallback-guides" href="#react-usecallback-guides"> </a> <a href="https://dev.to/react-usecallback-guides">React useCallback Guides</a> </h3> <p>useCallback is used when a child is rerendering again and again without need.</p> <h3> <a name="react-usememo-guides" href="#react-usememo-guides"> </a> <a href="https://dev.to/react-usememo-guides">React useMemo Guides</a> </h3> <p>useMemo returns a memoized value so that it does not need to be recalculated.</p> <h3> <a name="react-useref-guides" href="#react-useref-guides"> </a> <a href="https://dev.to/react-useref-guides">React useRef Guides</a> </h3> <p>useRef persists values between renders.</p> <p><strong>Happy coding!</strong></p> </div> </div> </main> <div class="js-billboard-container pb-4 crayons-layout__comments-billboard" data-async-url="/billboards/page_fixed_bottom?page_id=286"></div> <script src="https://assets.dev.to/assets/billboard-a7ffd2b38d410444a4ef2d42c6ce905699d84b1520aed314b817a767ddc3b362.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"> <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="207638" data-type-of="in_house"> <p style="font-weight: bold;margin-bottom: 10px"> Thank you to our Diamond Sponsor <a href="https://neon.tech/">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="/guides"> Guides </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 - 2024.</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> </body> </html>