Oh Javascript... 🙄 - DEV Community

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Oh Javascript... 🙄 - DEV Community</title> <meta name="last-updated" content="2024-12-03 03:11:18 UTC"> <meta name="user-signed-in" content="false"> <meta name="head-cached-at" content="1733195478"> <meta name="environment" content="production"> <link rel="stylesheet" href="https://assets.dev.to/assets/minimal-6206ee9219dabd8e1168cebeb1f34c12ab133f7723e45d4b24dd76b43fee1fbc.css" media="all" id="main-minimal-stylesheet" /> <link rel="stylesheet" href="https://assets.dev.to/assets/views-4dd5770daa5d9d443ed73a724fb1913af9b093295bf1a72307f0fb322e5df1d9.css" media="all" id="main-views-stylesheet" /> <link rel="stylesheet" href="https://assets.dev.to/assets/crayons-f94476cf86ce9153627fd53a77e651ec54b82b6be20ddb1bf93e3dd40b81aeab.css" media="all" id="main-crayons-stylesheet" /> <script src="https://assets.dev.to/assets/base-e0fa4f0ebd0f1ec157e6b07c08f9222f8c0cca3d10cfde4cd8c951b43985b10b.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/kspeakman/oh-javascript--3404" /> <meta name="description" content="The terrible tool we must use. Tagged with javascript, badparts."> <meta name="keywords" content="javascript, badparts, software, coding, development, engineering, inclusive, community"> <meta property="og:type" content="article" /> <meta property="og:url" content="https://dev.to/kspeakman/oh-javascript--3404" /> <meta property="og:title" content="Oh Javascript... 🙄" /> <meta property="og:description" content="The terrible tool we must use." /> <meta property="og:site_name" content="DEV Community" /> <meta name="twitter:site" content="@thepracticaldev"> <meta name="twitter:creator" content="@"> <meta name="twitter:title" content="Oh Javascript... 🙄"> <meta name="twitter:description" content="The terrible tool we must use."> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:widgets:new-embed-design" content="on"> <meta name="robots" content="max-snippet:-1, max-image-preview:large, max-video-preview:-1"> <meta property="og:image" content="https://media2.dev.to/dynamic/image/width=1000,height=500,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fcl.ly%2F3O101T3A0d2o%2FImage%25202018-06-17%2520at%25209.32.39%2520AM.png" /> <meta name="twitter:image:src" content="https://media2.dev.to/dynamic/image/width=1000,height=500,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fcl.ly%2F3O101T3A0d2o%2FImage%25202018-06-17%2520at%25209.32.39%2520AM.png"> <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-28T14:26:33Z" data-latest-commit-id="4b49fb8266fd9b978bc78cbd8ffc1340c5bd5a1c" 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-6206ee9219dabd8e1168cebeb1f34c12ab133f7723e45d4b24dd76b43fee1fbc.css" media="all" id="secondary-minimal-stylesheet" /> <link rel="stylesheet" href="https://assets.dev.to/assets/views-4dd5770daa5d9d443ed73a724fb1913af9b093295bf1a72307f0fb322e5df1d9.css" media="all" id="secondary-views-stylesheet" /> <link rel="stylesheet" href="https://assets.dev.to/assets/crayons-f94476cf86ce9153627fd53a77e651ec54b82b6be20ddb1bf93e3dd40b81aeab.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="akdkrjh606u2stp14ztj2umv8medt7ct" class="crayons-icon"><title id="akdkrjh606u2stp14ztj2umv8medt7ct">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="Find related posts..." 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="aex0pxyrgyv68p4kw1i957ddhb2fdaxm" aria-hidden="true" class="crayons-icon"><title id="aex0pxyrgyv68p4kw1i957ddhb2fdaxm">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="ad7sooctswb8i219pb1v4bsjb4asrmy1" aria-hidden="true" class="crayons-icon"><title id="ad7sooctswb8i219pb1v4bsjb4asrmy1">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="agauz84h56984xlylrxi8z3jnci1uaqu" class="crayons-icon"><title id="agauz84h56984xlylrxi8z3jnci1uaqu">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="ajtg5it4aykqxt4xm2qtrqmeao3nsegz" aria-hidden="true" class="crayons-icon c-btn__icon"><title id="ajtg5it4aykqxt4xm2qtrqmeao3nsegz">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 articletag-javascript articletag-badparts articleuser-15366" data-current-page="stories-show"> <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> <style> .html-variant-wrapper { display: none} </style> <script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.2.10/webcomponents-loader.js" integrity="sha384-3HK5hxQbkFqOIxMbpROlRmRtYl2LBZ52t+tqcjzsmr9NJuOWQxl8RgQSyFvq2lhy" crossorigin="anonymous" defer></script> <script src="https://assets.dev.to/assets/webShare-0686f0b9ac40589694ef6ae6a6202c44119bc781c254f6cf6d52d8a008461156.js" defer="defer"></script> <script src="https://assets.dev.to/assets/articlePage-e91bed0487621b06608474cfabffa186165e1f43f05b24581203ccc21e7aa45d.js" defer="defer"></script> <script src="https://assets.dev.to/assets/commentDropdowns-7a28d130e5b78d38b30a9495a964003a66bd64fa455fc70b766d69cf06b9ba24.js" defer="defer"></script> <script type="application/ld+json"> {"@context":"http://schema.org","@type":"Article","mainEntityOfPage":{"@type":"WebPage","@id":"https://dev.to/kspeakman/oh-javascript--3404"},"url":"https://dev.to/kspeakman/oh-javascript--3404","image":["https://media2.dev.to/dynamic/image/width=1080,height=1080,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fcl.ly%2F3O101T3A0d2o%2FImage%25202018-06-17%2520at%25209.32.39%2520AM.png","https://media2.dev.to/dynamic/image/width=1280,height=720,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fcl.ly%2F3O101T3A0d2o%2FImage%25202018-06-17%2520at%25209.32.39%2520AM.png","https://media2.dev.to/dynamic/image/width=1600,height=900,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fcl.ly%2F3O101T3A0d2o%2FImage%25202018-06-17%2520at%25209.32.39%2520AM.png"],"publisher":{"@context":"http://schema.org","@type":"Organization","name":"DEV Community","logo":{"@context":"http://schema.org","@type":"ImageObject","url":"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","width":"192","height":"192"}},"headline":"Oh Javascript... 🙄","author":{"@context":"http://schema.org","@type":"Person","url":"https://dev.to/kspeakman","name":"Kasey Speakman"},"datePublished":"2018-06-17T04:31:14Z","dateModified":"2018-06-17T04:31:43Z"} </script> <div class="crayons-layout crayons-layout--3-cols crayons-layout--article"> <aside class="crayons-layout__sidebar-left" aria-label="Article actions"> <div class="crayons-article-actions print-hidden"> <div class="crayons-article-actions__inner"> <div class="reaction-drawer__outer hoverdown" style=""> <button id="reaction-drawer-trigger" aria-label="reaction-drawer-trigger" aria-pressed="false" class="hoverdown-trigger crayons-reaction pseudo-reaction crayons-tooltip__activator relative"> <span class="crayons-reaction__icon crayons-reaction__icon--borderless crayons-reaction--like crayons-reaction__icon--inactive" style="width: 40px; height: 40px"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" role="img" aria-hidden="true" class="crayons-icon"> <g clip-path="url(#clip0_988_3276)"> <path d="M19 14V17H22V19H18.999L19 22H17L16.999 19H14V17H17V14H19ZM20.243 4.75698C22.505 7.02498 22.583 10.637 20.479 12.992L19.059 11.574C20.39 10.05 20.32 7.65998 18.827 6.16998C17.324 4.67098 14.907 4.60698 13.337 6.01698L12.002 7.21498L10.666 6.01798C9.09103 4.60598 6.67503 4.66798 5.17203 6.17198C3.68203 7.66198 3.60703 10.047 4.98003 11.623L13.412 20.069L12 21.485L3.52003 12.993C1.41603 10.637 1.49503 7.01898 3.75603 4.75698C6.02103 2.49298 9.64403 2.41698 12 4.52898C14.349 2.41998 17.979 2.48998 20.242 4.75698H20.243Z" fill="#525252"></path> </g> <defs> <clipPath id="clip0_988_3276"> <rect width="24" height="24" fill="white"></rect> </clipPath> </defs> </svg> </span> <span class="crayons-reaction__icon crayons-reaction__icon--borderless crayons-reaction__icon--active" style="width: 40px; height: 40px"> <img aria_hidden="true" height="24" width="24" src="https://assets.dev.to/assets/heart-plus-active-9ea3b22f2bc311281db911d416166c5f430636e76b15cd5df6b3b841d830eefa.svg" /> </span> <span class="crayons-reaction__count" id="reaction_total_count"> <span class="bg-base-40 opacity-25 p-2 inline-block radius-default"></span> </span> <span class="crayons-tooltip__content"> Add reaction </span> </button> <div class="reaction-drawer" aria-expanded="false"> <div class="reaction-drawer__container"> <button id="reaction-butt-like" name="Like" aria-label="Like" aria-pressed="false" class="crayons-reaction crayons-tooltip__activator relative pt-2 pr-2 pb-1 pl-2" data-category="like"> <span class="crayons-reaction__icon crayons-reaction__icon--inactive p-0"> <img aria_hidden="true" height="32" width="32" src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" /> </span> <span class="crayons-reaction__count" id="reaction-number-like"><span class="bg-base-40 opacity-25 p-2 inline-block radius-default"></span></span> <span data-testid="tooltip" class="crayons-tooltip__content"> Like </span> </button> <button id="reaction-butt-unicorn" name="Unicorn" aria-label="Unicorn" aria-pressed="false" class="crayons-reaction crayons-tooltip__activator relative pt-2 pr-2 pb-1 pl-2" data-category="unicorn"> <span class="crayons-reaction__icon crayons-reaction__icon--inactive p-0"> <img aria_hidden="true" height="32" width="32" src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" /> </span> <span class="crayons-reaction__count" id="reaction-number-unicorn"><span class="bg-base-40 opacity-25 p-2 inline-block radius-default"></span></span> <span data-testid="tooltip" class="crayons-tooltip__content"> Unicorn </span> </button> <button id="reaction-butt-exploding_head" name="Exploding Head" aria-label="Exploding Head" aria-pressed="false" class="crayons-reaction crayons-tooltip__activator relative pt-2 pr-2 pb-1 pl-2" data-category="exploding_head"> <span class="crayons-reaction__icon crayons-reaction__icon--inactive p-0"> <img aria_hidden="true" height="32" width="32" src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" /> </span> <span class="crayons-reaction__count" id="reaction-number-exploding_head"><span class="bg-base-40 opacity-25 p-2 inline-block radius-default"></span></span> <span data-testid="tooltip" class="crayons-tooltip__content"> Exploding Head </span> </button> <button id="reaction-butt-raised_hands" name="Raised Hands" aria-label="Raised Hands" aria-pressed="false" class="crayons-reaction crayons-tooltip__activator relative pt-2 pr-2 pb-1 pl-2" data-category="raised_hands"> <span class="crayons-reaction__icon crayons-reaction__icon--inactive p-0"> <img aria_hidden="true" height="32" width="32" src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" /> </span> <span class="crayons-reaction__count" id="reaction-number-raised_hands"><span class="bg-base-40 opacity-25 p-2 inline-block radius-default"></span></span> <span data-testid="tooltip" class="crayons-tooltip__content"> Raised Hands </span> </button> <button id="reaction-butt-fire" name="Fire" aria-label="Fire" aria-pressed="false" class="crayons-reaction crayons-tooltip__activator relative pt-2 pr-2 pb-1 pl-2" data-category="fire"> <span class="crayons-reaction__icon crayons-reaction__icon--inactive p-0"> <img aria_hidden="true" height="32" width="32" src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" /> </span> <span class="crayons-reaction__count" id="reaction-number-fire"><span class="bg-base-40 opacity-25 p-2 inline-block radius-default"></span></span> <span data-testid="tooltip" class="crayons-tooltip__content"> Fire </span> </button> </div> </div> </div> <button id="reaction-butt-comment" aria-label="Jump to Comments" aria-pressed="false" class="crayons-reaction crayons-reaction--comment crayons-tooltip__activator relative" data-category="comment"> <span class="crayons-reaction__icon crayons-reaction__icon--borderless crayons-reaction__icon--inactive"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-hidden="true" class="crayons-icon"> <path d="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> </span> <span class="crayons-reaction__count" id="reaction-number-comment" data-count="22"> <span class="bg-base-40 opacity-25 p-2 inline-block radius-default"></span> </span> <span data-testid="tooltip" class="crayons-tooltip__content"> Jump to Comments </span> </button> <button id="reaction-butt-readinglist" aria-label="Add to reading list" aria-pressed="false" class="crayons-reaction crayons-reaction--readinglist crayons-tooltip__activator relative" data-category="readinglist"> <span class="crayons-reaction__icon crayons-reaction__icon--borderless crayons-reaction__icon--inactive"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-hidden="true" class="crayons-icon"> <path d="M5 2h14a1 1 0 011 1v19.143a.5.5 0 01-.766.424L12 18.03l-7.234 4.536A.5.5 0 014 22.143V3a1 1 0 011-1zm13 2H6v15.432l6-3.761 6 3.761V4z"></path> </svg> </span> <span class="crayons-reaction__count" id="reaction-number-readinglist"><span class="bg-base-40 opacity-25 p-2 inline-block radius-default"></span></span> <span data-testid="tooltip" class="crayons-tooltip__content"> Save </span> </button> <button id="reaction-butt-boost" aria-label="Boost" aria-pressed="false" class="crayons-reaction crayons-reaction--boost crayons-tooltip__activator relative"> <span class="crayons-reaction__icon crayons-reaction__icon--borderless crayons-reaction__icon--inactive"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" role="img" aria-hidden="true" class="crayons-icon" width="24" height="24"> <path transform="translate(24,0) scale(-1,1)" d="M6 4H21C21.5523 4 22 4.44772 22 5V12H20V6H6V9L1 5L6 1V4ZM18 20H3C2.44772 20 2 19.5523 2 19V12H4V18H18V15L23 19L18 23V20Z"></path> </svg> </span> <span data-testid="tooltip" class="crayons-tooltip__content"> Boost </span> </button> <div id="mod-actions-menu-btn-area" class="print-hidden trusted-visible-block align-center"> </div> <div class="align-center m:relative"> <button id="article-show-more-button" aria-controls="article-show-more-dropdown" aria-expanded="false" aria-haspopup="true" class="dropbtn crayons-btn crayons-btn--ghost-dimmed crayons-btn--icon-rounded" aria-label="Share post options"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="alo29gj2ytt4t8a9z38kp55pv8g2lael" aria-hidden="true" class="crayons-icon dropdown-icon"><title id="alo29gj2ytt4t8a9z38kp55pv8g2lael">More...</title><path fill-rule="evenodd" clip-rule="evenodd" d="M7 12a2 2 0 11-4 0 2 2 0 014 0zm7 0a2 2 0 11-4 0 2 2 0 014 0zm5 2a2 2 0 100-4 2 2 0 000 4z"></path></svg> </button> <div id="article-show-more-dropdown" class="crayons-dropdown side-bar left-2 right-2 m:right-auto m:left-100 s:left-auto mb-1 m:mb-0 top-unset bottom-100 m:top-0 m:bottom-unset"> <div> <button id="copy-post-url-button" class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0" data-postUrl="https://dev.to/kspeakman/oh-javascript--3404"> <span class="fw-bold">Copy link</span> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" id="article-copy-icon" role="img" aria-labelledby="a3nam4hpgb60x3opoq2inzxjtt451pkk" aria-hidden="true" class="crayons-icon mx-2 shrink-0"><title id="a3nam4hpgb60x3opoq2inzxjtt451pkk">Copy link</title> <path d="M7 6V3a1 1 0 011-1h12a1 1 0 011 1v14a1 1 0 01-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1 1 0 013 21l.003-14c0-.552.45-1 1.007-1H7zm2 0h8v10h2V4H9v2zm-2 5v2h6v-2H7zm0 4v2h6v-2H7z"></path> </svg> </button> <div id="article-copy-link-announcer" aria-live="polite" class="crayons-notice crayons-notice--success my-2 p-1" aria-live="polite" hidden>Copied to Clipboard</div> </div> <div class="Desktop-only"> <a target="_blank" class="crayons-link crayons-link--block" rel="noopener" href='https://twitter.com/intent/tweet?text=%22Oh%20Javascript...%20%F0%9F%99%84%22%20by%20Kasey%20Speakman%20%23DEVCommunity%20https%3A%2F%2Fdev.to%2Fkspeakman%2Foh-javascript--3404'> Share to X </a> <a target="_blank" class="crayons-link crayons-link--block" rel="noopener" href="https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fdev.to%2Fkspeakman%2Foh-javascript--3404&title=Oh%20Javascript...%20%F0%9F%99%84&summary=The%20terrible%20tool%20we%20must%20use.&source=DEV%20Community"> Share to LinkedIn </a> <a target="_blank" class="crayons-link crayons-link--block" rel="noopener" href="https://www.facebook.com/sharer.php?u=https%3A%2F%2Fdev.to%2Fkspeakman%2Foh-javascript--3404"> Share to Facebook </a> <a target="_blank" class="crayons-link crayons-link--block" rel="noopener" href="https://toot.kytta.dev/?text=https%3A%2F%2Fdev.to%2Fkspeakman%2Foh-javascript--3404"> Share to Mastodon </a> </div> <web-share-wrapper shareurl="https://dev.to/kspeakman/oh-javascript--3404" sharetitle="Oh Javascript... 🙄" sharetext="The terrible tool we must use." template="web-share-button"> </web-share-wrapper> <template id="web-share-button"> <a href="#" class="dropdown-link-row crayons-link crayons-link--block">Share Post via...</a> </template> <a href="/report-abuse" class="crayons-link crayons-link--block">Report Abuse</a> </div> </div> </div> </div> </aside> <main id="main-content" class="crayons-layout__content grid gap-4"> <div class="article-wrapper"> <article class="crayons-card crayons-article mb-4" id="article-show-container" data-article-id="35459" data-article-slug="oh-javascript--3404" data-author-id="15366" data-author-name="Kasey Speakman" data-author-username="kspeakman" data-co-author-ids="" data-path="/kspeakman/oh-javascript--3404" data-pin-path="/stories/feed/pinned_article" data-pinned-article-id="" data-published="true" data-scheduled="false" > <header class="crayons-article__header" id="main-title"> <div class="crayons-article__header__meta"> <div class="flex s:items-start flex-col s:flex-row"> <div id="action-space" class="crayons-article__actions mb-4 s:mb-0 s:order-last"></div> <div class="flex flex-1 mb-5 items-start"> <div class="relative"> <a href="/kspeakman"><img class="radius-full align-middle" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F15366%2Fc6550569-8654-4c9e-828b-c1dcb9c8a0df.png" width="40" height="40" alt="Kasey Speakman" /></a> </div> <div class="pl-3 flex-1"> <a href="/kspeakman" class="crayons-link fw-bold">Kasey Speakman</a> <p class="fs-xs color-base-60"> Posted on <time datetime="2018-06-17T04:31:14Z" class="date">Jun 17, 2018</time> </p> </div> </div> </div> <div class="multiple_reactions_engagement"> <span class="reaction_engagement_like hidden"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="24" height="24" /> <span id="reaction_engagement_like_count"> </span> </span> <span class="reaction_engagement_unicorn hidden"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="24" height="24" /> <span id="reaction_engagement_unicorn_count"> </span> </span> <span class="reaction_engagement_exploding_head hidden"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="24" height="24" /> <span id="reaction_engagement_exploding_head_count"> </span> </span> <span class="reaction_engagement_raised_hands hidden"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="24" height="24" /> <span id="reaction_engagement_raised_hands_count"> </span> </span> <span class="reaction_engagement_fire hidden"> <img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="24" height="24" /> <span id="reaction_engagement_fire_count"> </span> </span> </div> <h1 class=" fs-3xl m:fs-4xl l:fs-5xl fw-bold s:fw-heavy lh-tight mb-2 short"> Oh Javascript... 🙄 </h1> <div class="spec__tags flex flex-wrap"> <a class="crayons-tag " 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 " 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/badparts"><span class="crayons-tag__prefix">#</span>badparts</a> </div> </div> </header> <div class="crayons-article__main "> <div class="crayons-article__body text-styles spec__body" data-article-id="35459" id="article-body"> <p>Just ran across this little gem.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="k">new</span> <span class="nb">Date</span><span class="p">(</span><span class="dl">'</span><span class="s1">2018-01-01</span><span class="dl">'</span><span class="p">)</span> <span class="o"><-</span> <span class="nx">Sun</span> <span class="nx">Dec</span> <span class="mi">31</span> <span class="mi">2017</span> <span class="mi">18</span><span class="p">:</span><span class="mi">00</span><span class="p">:</span><span class="mi">00</span> <span class="nx">GMT</span><span class="o">-</span><span class="mi">0600</span> <span class="p">(</span><span class="nx">Central</span> <span class="nx">Standard</span> <span class="nx">Time</span><span class="p">)</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">(</span><span class="dl">'</span><span class="s1">2018/01/01</span><span class="dl">'</span><span class="p">)</span> <span class="o"><-</span> <span class="nx">Mon</span> <span class="nx">Jan</span> <span class="mi">01</span> <span class="mi">2018</span> <span class="mi">00</span><span class="p">:</span><span class="mi">00</span><span class="p">:</span><span class="mi">00</span> <span class="nx">GMT</span><span class="o">-</span><span class="mi">0600</span> <span class="p">(</span><span class="nx">Central</span> <span class="nx">Standard</span> <span class="nx">Time</span><span class="p">)</span> </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> <p>The reason this happens (I think) is because JS parses the first date as ISO 8601 format. And since no timezone offset is specified it assumes UTC. However, JavaScript will only create Dates in local time. So after applying the local time zone, it is 6pm the previous day.</p> <p>The second one uses a <code>/</code> separator, so it does not trigger the ISO parse branch. Instead it sensibly presumes I am interested in a date in the current time zone.</p> </div> </div> <section id="comments" data-follow-button-container="true" data-updated-at="2024-12-03 03:11:17 UTC" class="text-padding mb-4 border-t-1 border-0 border-solid border-base-10"> <header class="relative flex justify-between items-center mb-6"> <div class="flex items-center"> <h2 class="crayons-subtitle-1"> Top comments <span class="js-comments-count" data-comments-count="22">(22)</span> </h2> </div> <div id="comment-subscription" class="print-hidden"> <div class="crayons-btn-group"> <span class="crayons-btn crayons-btn--outlined">Subscribe</span> </div> </div> </header> <div id="billboard_delay_trigger"></div> <div id="comments-container" data-testid="comments-container" data-commentable-id="35459" data-commentable-type="Article" data-has-recent-comment-activity="false"> <div id="response-templates-data" class="hidden"></div> <form class="comment-form print-hidden" id="new_comment" action="/comments" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓" autocomplete="off" /> <input type="hidden" name="authenticity_token" value="NOTHING" id="new_comment_authenticity_token"> <input value="35459" autocomplete="off" type="hidden" name="comment[commentable_id]" id="comment_commentable_id" /> <input value="Article" autocomplete="off" type="hidden" name="comment[commentable_type]" id="comment_commentable_type" /> <span class="crayons-avatar m:crayons-avatar--l mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=256,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png" width="32" height="32" alt="pic" class="crayons-avatar__image overflow-hidden" id="comment-primary-user-profile--avatar" loading="lazy" /> </span> <div class="comment-form__inner"> <div class="comment-form__field" data-tracking-name="comment_form_textfield"> <textarea placeholder="Add to the discussion" onfocus="handleFocus(event)" onkeyup="handleKeyUp(event)" onkeydown="handleKeyDown(event)" oninput="handleChange(event)" id="text-area" required="required" class="crayons-textfield comment-textarea crayons-textfield--ghost" aria-label="Add a comment to the discussion" name="comment[body_markdown]"> </textarea> </div> <div class="response-templates-container crayons-card crayons-card--secondary p-4 mb-4 comment-form__templates fs-base hidden"> <header class="mb-3"> <button type="button" class="crayons-btn personal-template-button active" data-target-type="personal" data-form-id="new_comment">Personal</button> <button type="button" class="crayons-btn moderator-template-button hidden" data-target-type="moderator" data-form-id="new_comment">Trusted User</button> </header> <div class="personal-responses-container"> </div> <div class="moderator-responses-container hidden"> </div> <a target="_blank" rel="noopener nofollow" href="/settings/response-templates"> Create template </a> <p>Templates let you quickly answer FAQs or store snippets for re-use.</p> </div> <div class="comment-form__preview text-styles text-styles--secondary" id="preview-div"></div> <div class="comment-form__buttons mb-4"> <button type="submit" class="crayons-btn mr-2 js-btn-enable" onclick="validateField(event)" data-tracking-name="comment_submit_button" disabled>Submit</button> <button type="button" class="preview-toggle crayons-btn crayons-btn--secondary comment-action-preview js-btn-enable mr-2" data-tracking-name="comment_preview_button" disabled>Preview</button> <a href="/404.html" class="dismiss-edit-comment crayons-btn crayons-btn--ghost js-btn-dismiss hidden">Dismiss</a> </div> </div> <div class="code-of-conduct" id="toggle-code-of-conduct-checkbox"></div> </form> <div class="comments" id="comment-trees-container"> <div class="js-billboard-container mid-comments-billboard-container pb-6" data-async-url="/kspeakman/oh-javascript--3404/billboards/post_comments_mid"></div> <details class="comment-wrapper js-comment-wrapper comment-wrapper--deep-0 root " open> <summary aria-label="Toggle this comment (and replies)" data-tracking-name="expand_comment_toggle"> <span class="m:mx-1 inline-block align-middle"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a3odpnmkjwmi2dq4i3fu8buh6rzw6hs6" class="crayons-icon expanded"><title id="a3odpnmkjwmi2dq4i3fu8buh6rzw6hs6">Collapse</title> <path d="M12 10.677L8 6.935 9 6l3 2.807L15 6l1 .935-4 3.742zm0 4.517L9 18l-1-.935 4-3.742 4 3.742-1 .934-3-2.805z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a49kpz6jmx8l6js4p9uwua1nqd8ueeum" class="crayons-icon collapsed"><title id="a49kpz6jmx8l6js4p9uwua1nqd8ueeum">Expand</title> <path d="M12 18l-4-3.771 1-.943 3 2.829 3-2.829 1 .943L12 18zm0-10.115l-3 2.829-1-.943L12 6l4 3.771-1 .942-3-2.828z"></path> </svg> </span> <span class="js-collapse-comment-content inline-block align-middle"></span> </summary> <div id="comment-node-69855" class=" comment single-comment-node root comment--deep-0 " data-comment-id="69855" data-path="/kspeakman/oh-javascript--3404/comments/3p8j" data-comment-author-id="38744" data-content-user-id="38744"> <a name="comment-3p8j" style="position: absolute; top: -8px;"> </a> <div class="comment__inner"> <a href="https://dev.to/variadicism" class="shrink-0 crayons-avatar m:crayons-avatar--l mt-4 m:mt-3"> <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F38744%2Fb7274406-2287-4a81-835a-8b0aecd30007.jpeg" alt="variadicism profile image" loading="lazy" /> </a> <div class="inner-comment comment__details"> <div class="comment__content crayons-card"> <div class="comment__header"> <a href="https://dev.to/variadicism" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden"> <span class="js-comment-username">Connor Davey</span> </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block"> <button id="comment-profile-preview-trigger-69855" aria-controls="comment-profile-preview-content-69855" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Connor Davey profile details"> Connor Davey </button> <div id="comment-profile-preview-content-69855" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #002a9e; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/variadicism" 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%2F38744%2Fb7274406-2287-4a81-835a-8b0aecd30007.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5"> Connor Davey </span> </a> </div> <div class="print-hidden"> <button name="button" type="button" data-info="{"className":"User","style":"","id":38744,"name":"Connor Davey"}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Connor Davey" aria-pressed="false">Follow</button> </div> <div class="user-metadata-details"> <ul class="user-metadata-details-inner"> <li> <div class="key"> Joined </div> <div class="value"> <time datetime="2017-10-25T19:36:39Z" class="date">Oct 25, 2017</time> </div> </li> </ul> </div> </div> </div> </div> <span class="color-base-30 px-2 m:pl-0" role="presentation">•</span> <a href="https://dev.to/kspeakman/oh-javascript--3404#comment-3p8j" class="comment-date crayons-link crayons-link--secondary fs-s"> <time datetime="2018-06-20T15:58:25Z" class=date-short-year> Jun 20 '18 </time> </a> <div class="comment__dropdown" data-tracking-name="comment_dropdown"> <button id="comment-dropdown-trigger-69855" aria-controls="comment-dropdown-69855" aria-expanded="false" class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon " aria-label="Toggle dropdown menu" aria-haspopup="true"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="at6wtl0s757v8nrwo4eonfke7m2k4hii" class="crayons-icon pointer-events-none"><title id="at6wtl0s757v8nrwo4eonfke7m2k4hii">Dropdown menu</title> <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path> </svg> </button> <div id="comment-dropdown-69855" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown"> <ul class="m-0"> <li><a href="https://dev.to/kspeakman/oh-javascript--3404#comment-3p8j" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Connor Davey's comment" data-no-instant>Copy link</a></li> <li class="comment-actions hidden" data-user-id="38744" data-action="settings-button" data-path="https://dev.to/variadicism/comment/3p8j/settings" aria-label="Go to Connor Davey's comment settings"></li> <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="15366" data-user-id="38744"> <button class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment" data-hide-type="hide" data-comment-id="69855" data-comment-url="https://dev.to/variadicism/comment/3p8j" aria-label="Hide Connor Davey's comment"> Hide </button> </li> <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/variadicism/comment/3p8j/mod" aria-label="Moderate Connor Davey's comment"></li> <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/variadicism/comment/3p8j" aria-label="Report Connor Davey's comment as abusive or violating our code of conduct and/or terms and conditions"></li> <li class="current-user-actions"></li> </ul> </div> </div> </div> <div class=" comment__body text-styles text-styles--secondary body "> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html><body> <p>Firstly, thank you very much for making this post before it tripped me up at some point! This seems like something that I would spend way too much time debugging.</p> <p>Now then...</p> <p>This Date behavior is not just unintuitive; it is incorrect.</p> <p>I suspect that your supposition is correct that a <code>-</code> causes the date to be parsed as ISO 8601. However, even if this is the case, using ISO 8601 does <em>not</em> imply that the date time is in UTC. In the absence of a time zone designation, ISO 8601 is supposed to assume local time zone, <em>not</em> UTC. If the date time is in UTC, ISO 8601 expects a standard time zone definition like "+0:00" or the special "Z" designation appended to the end.</p> <p><em>Wait!</em> It gets worse! If you add a time to this date, it no longer assumes UTC time!</p> <div class="highlight"><pre class="highlight plaintext"><code>new Date('1995-12-17') > Sat Dec 16 1995 17:00:00 GMT-0700 (MST) new Date('1995-12-17T00:00:00') > Sun Dec 17 1995 00:00:00 GMT-0700 (MST) </code></pre></div> <p>In conclusion, a <code>-</code> separator does not in any way, shape, or form imply UTC time... except in JavaScript's Date library and only if no time is provided. This is bad behavior.</p> </body></html> </div> </div> <script> </script> <footer class="comment__footer print-hidden"> <button class="crayons-tooltip__activator crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button" id="button-for-comment-69855" data-comment-id="69855" aria-label="like" data-tracking-name="comment_heart_button"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ath15brsazozlc145279z6ixaefczyqf" class="crayons-icon reaction-icon not-reacted"><title id="ath15brsazozlc145279z6ixaefczyqf">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a1tefuyduo4pz6o1eylbdybv5q0fk35i" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="a1tefuyduo4pz6o1eylbdybv5q0fk35i">Like comment: </title> <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path> </svg> <span class="reactions-count">5</span><span class="reactions-label hidden m:inline-block"> likes</span> <span data-testid="tooltip" class="crayons-tooltip__content"> Like </span> </button> <a class="actions crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left toggle-reply-form mr-1 inline-flex" href="#/kspeakman/oh-javascript--3404/comments/new/3p8j" data-comment-id="69855" data-path="/kspeakman/oh-javascript--3404/comments/3p8j" data-tracking-name="comment_reply_button" data-testid="reply-button-69855" rel="nofollow"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ajo6vx6c1ezi17zqh0bf4zphgix1l95c" class="crayons-icon reaction-icon not-reacted"><title id="ajo6vx6c1ezi17zqh0bf4zphgix1l95c">Comment button</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 m:inline-block">Reply</span> </a> </footer> </div> </div> <details class="comment-wrapper js-comment-wrapper comment-wrapper--deep-1 child " open> <summary aria-label="Toggle this comment (and replies)" data-tracking-name="expand_comment_toggle"> <span class="mx-0 inline-block align-middle"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="aektjniuu48tcunlb9a814jqw016wl5a" class="crayons-icon expanded"><title id="aektjniuu48tcunlb9a814jqw016wl5a">Collapse</title> <path d="M12 10.677L8 6.935 9 6l3 2.807L15 6l1 .935-4 3.742zm0 4.517L9 18l-1-.935 4-3.742 4 3.742-1 .934-3-2.805z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ajme9uanjjqx1i1ypmp96hj1ad73owh4" class="crayons-icon collapsed"><title id="ajme9uanjjqx1i1ypmp96hj1ad73owh4">Expand</title> <path d="M12 18l-4-3.771 1-.943 3 2.829 3-2.829 1 .943L12 18zm0-10.115l-3 2.829-1-.943L12 6l4 3.771-1 .942-3-2.828z"></path> </svg> </span> <span class="js-collapse-comment-content inline-block align-middle"></span> </summary> <div id="comment-node-69875" class=" comment single-comment-node child comment--deep-1 " data-comment-id="69875" data-path="/kspeakman/oh-javascript--3404/comments/3p9d" data-comment-author-id="49972" data-content-user-id="49972"> <a name="comment-3p9d" style="position: absolute; top: -8px;"> </a> <div class="comment__inner"> <a href="https://dev.to/squgeim" class="shrink-0 crayons-avatar mt-4"> <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F49972%2Ffe79f37c-a0bb-4b2d-9c02-9aebabbc09e1.JPG" alt="squgeim profile image" loading="lazy" /> </a> <div class="inner-comment comment__details"> <div class="comment__content crayons-card"> <div class="comment__header"> <a href="https://dev.to/squgeim" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden"> <span class="js-comment-username">Shreya Dahal</span> </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block"> <button id="comment-profile-preview-trigger-69875" aria-controls="comment-profile-preview-content-69875" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Shreya Dahal profile details"> Shreya Dahal </button> <div id="comment-profile-preview-content-69875" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #422344; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/squgeim" 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%2F49972%2Ffe79f37c-a0bb-4b2d-9c02-9aebabbc09e1.JPG" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5"> Shreya Dahal </span> </a> </div> <div class="print-hidden"> <button name="button" type="button" data-info="{"className":"User","style":"","id":49972,"name":"Shreya Dahal"}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Shreya Dahal" aria-pressed="false">Follow</button> </div> <div class="color-base-70"> Full-stack Software Engineer. Free Software Enthusiast. Team Lead. (in that order) </div> <div class="user-metadata-details"> <ul class="user-metadata-details-inner"> <li> <div class="key"> Location </div> <div class="value"> Toronto </div> </li> <li> <div class="key"> Education </div> <div class="value"> Computer Engineering </div> </li> <li> <div class="key"> Work </div> <div class="value"> Full Stack Developer </div> </li> <li> <div class="key"> Joined </div> <div class="value"> <time datetime="2017-12-19T03:49:24Z" class="date">Dec 19, 2017</time> </div> </li> </ul> </div> </div> </div> </div> <span class="color-base-30 px-2 m:pl-0" role="presentation">•</span> <a href="https://dev.to/kspeakman/oh-javascript--3404#comment-3p9d" class="comment-date crayons-link crayons-link--secondary fs-s"> <time datetime="2018-06-20T16:47:34Z" class=date-short-year> Jun 20 '18 </time> </a> <div class="comment__dropdown" data-tracking-name="comment_dropdown"> <button id="comment-dropdown-trigger-69875" aria-controls="comment-dropdown-69875" aria-expanded="false" class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon " aria-label="Toggle dropdown menu" aria-haspopup="true"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="amnjbx7zzbe6b0c37qx0cm49pt5ysnqs" class="crayons-icon pointer-events-none"><title id="amnjbx7zzbe6b0c37qx0cm49pt5ysnqs">Dropdown menu</title> <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path> </svg> </button> <div id="comment-dropdown-69875" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown"> <ul class="m-0"> <li><a href="https://dev.to/kspeakman/oh-javascript--3404#comment-3p9d" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Shreya Dahal's comment" data-no-instant>Copy link</a></li> <li class="comment-actions hidden" data-user-id="49972" data-action="settings-button" data-path="https://dev.to/squgeim/comment/3p9d/settings" aria-label="Go to Shreya Dahal's comment settings"></li> <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="15366" data-user-id="49972"> <button class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment" data-hide-type="hide" data-comment-id="69875" data-comment-url="https://dev.to/squgeim/comment/3p9d" aria-label="Hide Shreya Dahal's comment"> Hide </button> </li> <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/squgeim/comment/3p9d/mod" aria-label="Moderate Shreya Dahal's comment"></li> <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/squgeim/comment/3p9d" aria-label="Report Shreya Dahal's comment as abusive or violating our code of conduct and/or terms and conditions"></li> <li class="current-user-actions"></li> </ul> </div> </div> </div> <div class=" comment__body text-styles text-styles--secondary body "> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html><body> <p>Here's a quote from the <a href="https://www.ecma-international.org/ecma-262/5.1/index.html#sec-15.9.1.15" rel="nofollow">ECMAScript 5 specification</a>:</p> <blockquote> <p>All numbers must be base 10. If the MM or DD fields are absent “01” is used as the value. If the HH, mm, or ss fields are absent “00” is used as the value and the value of an absent sss field is “000”. The value of an absent time zone offset is “Z”.</p> </blockquote> <p>So a lack of timezone offset is treated as UTC.</p> </body></html> </div> </div> <script> </script> <footer class="comment__footer print-hidden"> <button class="crayons-tooltip__activator crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button" id="button-for-comment-69875" data-comment-id="69875" aria-label="like" data-tracking-name="comment_heart_button"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ajl110ajhkj7ma4bdptypjh4duzz38ia" class="crayons-icon reaction-icon not-reacted"><title id="ajl110ajhkj7ma4bdptypjh4duzz38ia">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="akl75u7k4odfz1zwcuu8qvdb7w55xibf" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="akl75u7k4odfz1zwcuu8qvdb7w55xibf">Like comment: </title> <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path> </svg> <span class="reactions-count">5</span><span class="reactions-label hidden m:inline-block"> likes</span> <span data-testid="tooltip" class="crayons-tooltip__content"> Like </span> </button> <a class="actions crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left toggle-reply-form mr-1 inline-flex" href="#/kspeakman/oh-javascript--3404/comments/new/3p9d" data-comment-id="69875" data-path="/kspeakman/oh-javascript--3404/comments/3p9d" data-tracking-name="comment_reply_button" data-testid="reply-button-69875" rel="nofollow"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ad33r012ojvho8ktx2azsnnq25zj0a4n" class="crayons-icon reaction-icon not-reacted"><title id="ad33r012ojvho8ktx2azsnnq25zj0a4n">Comment button</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 m:inline-block">Reply</span> </a> </footer> </div> </div> <details class="comment-wrapper js-comment-wrapper comment-wrapper--deep-2 child " open> <summary aria-label="Toggle this comment (and replies)" data-tracking-name="expand_comment_toggle"> <span class="mx-0 inline-block align-middle"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a1n7bb2skfw1ni7bpklx6b37xy04aoq4" class="crayons-icon expanded"><title id="a1n7bb2skfw1ni7bpklx6b37xy04aoq4">Collapse</title> <path d="M12 10.677L8 6.935 9 6l3 2.807L15 6l1 .935-4 3.742zm0 4.517L9 18l-1-.935 4-3.742 4 3.742-1 .934-3-2.805z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ak1ekzut34i7ntyudy2ofmb614ek5mgh" class="crayons-icon collapsed"><title id="ak1ekzut34i7ntyudy2ofmb614ek5mgh">Expand</title> <path d="M12 18l-4-3.771 1-.943 3 2.829 3-2.829 1 .943L12 18zm0-10.115l-3 2.829-1-.943L12 6l4 3.771-1 .942-3-2.828z"></path> </svg> </span> <span class="js-collapse-comment-content inline-block align-middle"></span> </summary> <div id="comment-node-69981" class=" comment single-comment-node child comment--deep-2 " data-comment-id="69981" data-path="/kspeakman/oh-javascript--3404/comments/3pdf" data-comment-author-id="38744" data-content-user-id="38744"> <a name="comment-3pdf" style="position: absolute; top: -8px;"> </a> <div class="comment__inner"> <a href="https://dev.to/variadicism" class="shrink-0 crayons-avatar mt-4"> <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F38744%2Fb7274406-2287-4a81-835a-8b0aecd30007.jpeg" alt="variadicism profile image" loading="lazy" /> </a> <div class="inner-comment comment__details"> <div class="comment__content crayons-card"> <div class="comment__header"> <a href="https://dev.to/variadicism" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden"> <span class="js-comment-username">Connor Davey</span> </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block"> <button id="comment-profile-preview-trigger-69981" aria-controls="comment-profile-preview-content-69981" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Connor Davey profile details"> Connor Davey </button> <div id="comment-profile-preview-content-69981" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #002a9e; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/variadicism" 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%2F38744%2Fb7274406-2287-4a81-835a-8b0aecd30007.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5"> Connor Davey </span> </a> </div> <div class="print-hidden"> <button name="button" type="button" data-info="{"className":"User","style":"","id":38744,"name":"Connor Davey"}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Connor Davey" aria-pressed="false">Follow</button> </div> <div class="user-metadata-details"> <ul class="user-metadata-details-inner"> <li> <div class="key"> Joined </div> <div class="value"> <time datetime="2017-10-25T19:36:39Z" class="date">Oct 25, 2017</time> </div> </li> </ul> </div> </div> </div> </div> <span class="color-base-30 px-2 m:pl-0" role="presentation">•</span> <a href="https://dev.to/kspeakman/oh-javascript--3404#comment-3pdf" class="comment-date crayons-link crayons-link--secondary fs-s"> <time datetime="2018-06-20T21:51:17Z" class=date-short-year> Jun 20 '18 </time> </a> <div class="comment__dropdown" data-tracking-name="comment_dropdown"> <button id="comment-dropdown-trigger-69981" aria-controls="comment-dropdown-69981" aria-expanded="false" class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon " aria-label="Toggle dropdown menu" aria-haspopup="true"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="aa1eb5tmi4tj6w18flwf1r5ocpycytxw" class="crayons-icon pointer-events-none"><title id="aa1eb5tmi4tj6w18flwf1r5ocpycytxw">Dropdown menu</title> <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path> </svg> </button> <div id="comment-dropdown-69981" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown"> <ul class="m-0"> <li><a href="https://dev.to/kspeakman/oh-javascript--3404#comment-3pdf" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Connor Davey's comment" data-no-instant>Copy link</a></li> <li class="comment-actions hidden" data-user-id="38744" data-action="settings-button" data-path="https://dev.to/variadicism/comment/3pdf/settings" aria-label="Go to Connor Davey's comment settings"></li> <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="15366" data-user-id="38744"> <button class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment" data-hide-type="hide" data-comment-id="69981" data-comment-url="https://dev.to/variadicism/comment/3pdf" aria-label="Hide Connor Davey's comment"> Hide </button> </li> <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/variadicism/comment/3pdf/mod" aria-label="Moderate Connor Davey's comment"></li> <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/variadicism/comment/3pdf" aria-label="Report Connor Davey's comment as abusive or violating our code of conduct and/or terms and conditions"></li> <li class="current-user-actions"></li> </ul> </div> </div> </div> <div class=" comment__body text-styles text-styles--secondary body "> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html><body> <p>Thanks for the reference! This explains the behavior described in the original post.</p> <p>However, I then argue that this standard is bad. Though I'm having trouble finding any truly official documentation, everything I do find (e.g., <a href="https://en.wikipedia.org/wiki/ISO_8601#Time_zone_designators">Wikipedia</a> and <a href="http://jkorpela.fi/iso8601.html">this document</a>) says that according to ISO 8601, in the absence of a time zone, local time should be used, not UTC. So, the browser is behaving correctly with these bare dates, but based on what I argue is a flawed standard that conflicts with ISO 8601.</p> <p>Even more bothersome, though, is that this still doesn't explain why adding an explicit time switches to local time instead of UTC! I looked at the document linked, not just the quote, but still as far as I can tell, the standard you linked seems to indicate that <code>new Date('1995-12-17T00:00:00')</code> should still be considered UTC and result in <code>Sat Dec 16 1995 17:00:00 GMT-0700 (MST)</code>, but it is read in local time instead!</p> <p>This makes me sad. I don't understand why this is.</p> </body></html> </div> </div> <script> </script> <footer class="comment__footer print-hidden"> <button class="crayons-tooltip__activator crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button" id="button-for-comment-69981" data-comment-id="69981" aria-label="like" data-tracking-name="comment_heart_button"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a7lsphm2q8abf5d8z1zharjus2t2n1el" class="crayons-icon reaction-icon not-reacted"><title id="a7lsphm2q8abf5d8z1zharjus2t2n1el">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="akcrpxx4qpa99i39pw06piloe1g5bqdy" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="akcrpxx4qpa99i39pw06piloe1g5bqdy">Like comment: </title> <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path> </svg> <span class="reactions-count">1</span><span class="reactions-label hidden m:inline-block"> like</span> <span data-testid="tooltip" class="crayons-tooltip__content"> Like </span> </button> <span class="fs-s inline-flex items-center fs-italic color-base-50 pl-1"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="atjwg6pa2n8mm90f54aiuzmqaqtuvapu" class="crayons-icon"><title id="atjwg6pa2n8mm90f54aiuzmqaqtuvapu">Thread</title> <path d="M17 13l-5 6-5-6h3.125c0-3.314 2.798-6 6.25-6 .17 0 .34.006.506.02-1.787.904-3.006 2.705-3.006 4.78V13H17z"></path> </svg> Thread </span> </footer> </div> </div> <div id="comment-node-70023" class=" comment single-comment-node child comment--deep-3 " data-comment-id="70023" data-path="/kspeakman/oh-javascript--3404/comments/3pf5" data-comment-author-id="49972" data-content-user-id="49972"> <a name="comment-3pf5" style="position: absolute; top: -8px;"> </a> <div class="comment__inner"> <a href="https://dev.to/squgeim" class="shrink-0 crayons-avatar mt-4"> <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F49972%2Ffe79f37c-a0bb-4b2d-9c02-9aebabbc09e1.JPG" alt="squgeim profile image" loading="lazy" /> </a> <div class="inner-comment comment__details"> <div class="comment__content crayons-card"> <div class="comment__header"> <a href="https://dev.to/squgeim" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden"> <span class="js-comment-username">Shreya Dahal</span> </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block"> <button id="comment-profile-preview-trigger-70023" aria-controls="comment-profile-preview-content-70023" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Shreya Dahal profile details"> Shreya Dahal </button> <div id="comment-profile-preview-content-70023" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #422344; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/squgeim" 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%2F49972%2Ffe79f37c-a0bb-4b2d-9c02-9aebabbc09e1.JPG" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5"> Shreya Dahal </span> </a> </div> <div class="print-hidden"> <button name="button" type="button" data-info="{"className":"User","style":"","id":49972,"name":"Shreya Dahal"}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Shreya Dahal" aria-pressed="false">Follow</button> </div> <div class="color-base-70"> Full-stack Software Engineer. Free Software Enthusiast. Team Lead. (in that order) </div> <div class="user-metadata-details"> <ul class="user-metadata-details-inner"> <li> <div class="key"> Location </div> <div class="value"> Toronto </div> </li> <li> <div class="key"> Education </div> <div class="value"> Computer Engineering </div> </li> <li> <div class="key"> Work </div> <div class="value"> Full Stack Developer </div> </li> <li> <div class="key"> Joined </div> <div class="value"> <time datetime="2017-12-19T03:49:24Z" class="date">Dec 19, 2017</time> </div> </li> </ul> </div> </div> </div> </div> <span class="color-base-30 px-2 m:pl-0" role="presentation">•</span> <a href="https://dev.to/kspeakman/oh-javascript--3404#comment-3pf5" class="comment-date crayons-link crayons-link--secondary fs-s"> <time datetime="2018-06-21T02:02:03Z" class=date-short-year> Jun 21 '18 </time> </a> <div class="comment__dropdown" data-tracking-name="comment_dropdown"> <button id="comment-dropdown-trigger-70023" aria-controls="comment-dropdown-70023" aria-expanded="false" class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon " aria-label="Toggle dropdown menu" aria-haspopup="true"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="adx9gpvuup0txrwvokquwmdrw3qfl1mq" class="crayons-icon pointer-events-none"><title id="adx9gpvuup0txrwvokquwmdrw3qfl1mq">Dropdown menu</title> <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path> </svg> </button> <div id="comment-dropdown-70023" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown"> <ul class="m-0"> <li><a href="https://dev.to/kspeakman/oh-javascript--3404#comment-3pf5" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Shreya Dahal's comment" data-no-instant>Copy link</a></li> <li class="comment-actions hidden" data-user-id="49972" data-action="settings-button" data-path="https://dev.to/squgeim/comment/3pf5/settings" aria-label="Go to Shreya Dahal's comment settings"></li> <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="15366" data-user-id="49972"> <button class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment" data-hide-type="hide" data-comment-id="70023" data-comment-url="https://dev.to/squgeim/comment/3pf5" aria-label="Hide Shreya Dahal's comment"> Hide </button> </li> <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/squgeim/comment/3pf5/mod" aria-label="Moderate Shreya Dahal's comment"></li> <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/squgeim/comment/3pf5" aria-label="Report Shreya Dahal's comment as abusive or violating our code of conduct and/or terms and conditions"></li> <li class="current-user-actions"></li> </ul> </div> </div> </div> <div class=" comment__body text-styles text-styles--secondary body "> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html><body> <p>What's more troublesome is that that is inconsistent across different browsers: <code>new Date('1995-12-17T00:00:00')</code> is parsed as UTC on Safari.</p> <p>According to the specs, strings that do not confirm to ISO 8601 are open for interpretation by difference implementation (like <code>April 13</code> is April 13 2001 on Chrome, but doesn't work on other browsers). So my first guess was that this string just did not register as ISO 8601 on Chrome and it fell back to its own Interpretation.</p> <p>I went to the latest ES7 specs and it has <a href="https://www.ecma-international.org/ecma-262/7.0/index.html#sec-date-time-string-format">changed</a>:</p> <blockquote> <p>When the time zone offset is absent, date-only forms are interpreted as a UTC time and date-time forms are interpreted as a local time.</p> </blockquote> <p>So we can have different results based on what version of the browser we are using.</p> </body></html> </div> </div> <script> </script> <footer class="comment__footer print-hidden"> <button class="crayons-tooltip__activator crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button" id="button-for-comment-70023" data-comment-id="70023" aria-label="like" data-tracking-name="comment_heart_button"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="alxjlotrhrfv27rjmzgz3i8qvmynij9g" class="crayons-icon reaction-icon not-reacted"><title id="alxjlotrhrfv27rjmzgz3i8qvmynij9g">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a7gzxqppionhwkl9uflg82zgzn0e132x" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="a7gzxqppionhwkl9uflg82zgzn0e132x">Like comment: </title> <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path> </svg> <span class="reactions-count">2</span><span class="reactions-label hidden m:inline-block"> likes</span> <span data-testid="tooltip" class="crayons-tooltip__content"> Like </span> </button> <a class="actions crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left toggle-reply-form mr-1 inline-flex" href="#/kspeakman/oh-javascript--3404/comments/new/3pf5" data-comment-id="70023" data-path="/kspeakman/oh-javascript--3404/comments/3pf5" data-tracking-name="comment_reply_button" data-testid="reply-button-70023" rel="nofollow"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a4f9l9vde8jj9ozpm7s2wxuu3a18jjum" class="crayons-icon reaction-icon not-reacted"><title id="a4f9l9vde8jj9ozpm7s2wxuu3a18jjum">Comment button</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 m:inline-block">Reply</span> </a> </footer> </div> </div> </div> </div> </details> </div> </details> <details class="comment-wrapper js-comment-wrapper comment-wrapper--deep-1 child " open> <summary aria-label="Toggle this comment (and replies)" data-tracking-name="expand_comment_toggle"> <span class="mx-0 inline-block align-middle"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a36f050ddo29ands7w2pzs531odwjza3" class="crayons-icon expanded"><title id="a36f050ddo29ands7w2pzs531odwjza3">Collapse</title> <path d="M12 10.677L8 6.935 9 6l3 2.807L15 6l1 .935-4 3.742zm0 4.517L9 18l-1-.935 4-3.742 4 3.742-1 .934-3-2.805z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="adnh0ptf6ibb1l1a4fxoz6qs7k84cgpb" class="crayons-icon collapsed"><title id="adnh0ptf6ibb1l1a4fxoz6qs7k84cgpb">Expand</title> <path d="M12 18l-4-3.771 1-.943 3 2.829 3-2.829 1 .943L12 18zm0-10.115l-3 2.829-1-.943L12 6l4 3.771-1 .942-3-2.828z"></path> </svg> </span> <span class="js-collapse-comment-content inline-block align-middle"></span> </summary> <div id="comment-node-69858" class=" comment single-comment-node child comment--deep-1 " data-comment-id="69858" data-path="/kspeakman/oh-javascript--3404/comments/3p8m" data-comment-author-id="15366" data-content-user-id="15366"> <a name="comment-3p8m" style="position: absolute; top: -8px;"> </a> <div class="comment__inner"> <a href="https://dev.to/kspeakman" class="shrink-0 crayons-avatar mt-4"> <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F15366%2Fc6550569-8654-4c9e-828b-c1dcb9c8a0df.png" alt="kspeakman profile image" loading="lazy" /> </a> <div class="inner-comment comment__details"> <div class="comment__content crayons-card"> <div class="comment__header"> <a href="https://dev.to/kspeakman" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden"> <span class="js-comment-username">Kasey Speakman</span> <span class="crayons-hover-tooltip inline-block spec-op-author -mr-2" data-tooltip="Author"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" class="crayons-icon"> <path d="M12 8.25a6 6 0 110 12 6 6 0 010-12zm0 2.625l-.992 2.01-2.218.322 1.605 1.564-.379 2.21L12 15.937l1.984 1.043-.379-2.209 1.605-1.564-2.218-.323L12 10.875zm.75-6.376l3.75.001v2.25l-1.022.854a7.45 7.45 0 00-2.728-.817V4.5zm-1.5 0v2.288a7.451 7.451 0 00-2.727.816L7.5 6.75V4.5h3.75z"></path> </svg> </span> </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block"> <button id="comment-profile-preview-trigger-69858" aria-controls="comment-profile-preview-content-69858" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Kasey Speakman profile details"> Kasey Speakman </button> <div id="comment-profile-preview-content-69858" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #08304c; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/kspeakman" 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%2F15366%2Fc6550569-8654-4c9e-828b-c1dcb9c8a0df.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5"> Kasey Speakman </span> </a> </div> <div class="print-hidden"> <button name="button" type="button" data-info="{"className":"User","style":"","id":15366,"name":"Kasey Speakman"}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Kasey Speakman" aria-pressed="false">Follow</button> </div> <div class="color-base-70"> collector of ideas. no one of consequence. </div> <div class="user-metadata-details"> <ul class="user-metadata-details-inner"> <li> <div class="key"> Location </div> <div class="value"> Huntsville, AL </div> </li> <li> <div class="key"> Joined </div> <div class="value"> <time datetime="2017-04-05T17:17:09Z" class="date">Apr 5, 2017</time> </div> </li> </ul> </div> </div> </div> <span class="crayons-hover-tooltip inline-block spec-op-author -ml-2" data-tooltip="Author"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" class="crayons-icon"> <path d="M12 8.25a6 6 0 110 12 6 6 0 010-12zm0 2.625l-.992 2.01-2.218.322 1.605 1.564-.379 2.21L12 15.937l1.984 1.043-.379-2.209 1.605-1.564-2.218-.323L12 10.875zm.75-6.376l3.75.001v2.25l-1.022.854a7.45 7.45 0 00-2.728-.817V4.5zm-1.5 0v2.288a7.451 7.451 0 00-2.727.816L7.5 6.75V4.5h3.75z"></path> </svg> </span> </div> <span class="color-base-30 px-2 m:pl-0" role="presentation">•</span> <a href="https://dev.to/kspeakman/oh-javascript--3404#comment-3p8m" class="comment-date crayons-link crayons-link--secondary fs-s"> <time datetime="2018-06-20T16:14:17Z" class=date-short-year> Jun 20 '18 </time> </a> <div class="comment__dropdown" data-tracking-name="comment_dropdown"> <button id="comment-dropdown-trigger-69858" aria-controls="comment-dropdown-69858" aria-expanded="false" class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon " aria-label="Toggle dropdown menu" aria-haspopup="true"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a1032cyxxm6u1ivznqh3ltc1a9z6dvwg" class="crayons-icon pointer-events-none"><title id="a1032cyxxm6u1ivznqh3ltc1a9z6dvwg">Dropdown menu</title> <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path> </svg> </button> <div id="comment-dropdown-69858" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown"> <ul class="m-0"> <li><a href="https://dev.to/kspeakman/oh-javascript--3404#comment-3p8m" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Kasey Speakman's comment" data-no-instant>Copy link</a></li> <li class="comment-actions hidden" data-user-id="15366" data-action="settings-button" data-path="https://dev.to/kspeakman/comment/3p8m/settings" aria-label="Go to Kasey Speakman's comment settings"></li> <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="15366" data-user-id="15366"> <button class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment" data-hide-type="hide" data-comment-id="69858" data-comment-url="https://dev.to/kspeakman/comment/3p8m" aria-label="Hide Kasey Speakman's comment"> Hide </button> </li> <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/kspeakman/comment/3p8m/mod" aria-label="Moderate Kasey Speakman's comment"></li> <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/kspeakman/comment/3p8m" aria-label="Report Kasey Speakman's comment as abusive or violating our code of conduct and/or terms and conditions"></li> <li class="current-user-actions"></li> </ul> </div> </div> </div> <div class=" comment__body text-styles text-styles--secondary body "> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html><body> <p>Wow, it is much worse than I thought! I think it is fair to categorize this in "the truly awful parts" of Javascript.</p> <p>For the most part, I avoid working with dates in JS. In client-server apps I deal with them on the server and send dates back only as display strings for the client where possible. But in this case, I am doing a client-side-only app which needs to process dates and schedules. So I have to try to use the "least bad parts". I'm half-tempted to port moment.js or NodaTime to Elm.</p> </body></html> </div> </div> <script> </script> <footer class="comment__footer print-hidden"> <button class="crayons-tooltip__activator crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button" id="button-for-comment-69858" data-comment-id="69858" aria-label="like" data-tracking-name="comment_heart_button"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a30jxld6ub2qrf587tx4appqoulhmxaa" class="crayons-icon reaction-icon not-reacted"><title id="a30jxld6ub2qrf587tx4appqoulhmxaa">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="aaca0tht8x6noe46509jm6sew5irx8ha" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="aaca0tht8x6noe46509jm6sew5irx8ha">Like comment: </title> <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path> </svg> <span class="reactions-count">3</span><span class="reactions-label hidden m:inline-block"> likes</span> <span data-testid="tooltip" class="crayons-tooltip__content"> Like </span> </button> <a class="actions crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left toggle-reply-form mr-1 inline-flex" href="#/kspeakman/oh-javascript--3404/comments/new/3p8m" data-comment-id="69858" data-path="/kspeakman/oh-javascript--3404/comments/3p8m" data-tracking-name="comment_reply_button" data-testid="reply-button-69858" rel="nofollow"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ap9lnkdjhp10230bksfezm7dxiuvd8w9" class="crayons-icon reaction-icon not-reacted"><title id="ap9lnkdjhp10230bksfezm7dxiuvd8w9">Comment button</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 m:inline-block">Reply</span> </a> </footer> </div> </div> <details class="comment-wrapper js-comment-wrapper comment-wrapper--deep-2 child " open> <summary aria-label="Toggle this comment (and replies)" data-tracking-name="expand_comment_toggle"> <span class="mx-0 inline-block align-middle"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="as5pgwl76z4aqpif6em668gxouqhw8jm" class="crayons-icon expanded"><title id="as5pgwl76z4aqpif6em668gxouqhw8jm">Collapse</title> <path d="M12 10.677L8 6.935 9 6l3 2.807L15 6l1 .935-4 3.742zm0 4.517L9 18l-1-.935 4-3.742 4 3.742-1 .934-3-2.805z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="amz5xv0mtevpfa1zqfleuxgbgivirky" class="crayons-icon collapsed"><title id="amz5xv0mtevpfa1zqfleuxgbgivirky">Expand</title> <path d="M12 18l-4-3.771 1-.943 3 2.829 3-2.829 1 .943L12 18zm0-10.115l-3 2.829-1-.943L12 6l4 3.771-1 .942-3-2.828z"></path> </svg> </span> <span class="js-collapse-comment-content inline-block align-middle"></span> </summary> <div id="comment-node-69870" class=" comment single-comment-node child comment--deep-2 " data-comment-id="69870" data-path="/kspeakman/oh-javascript--3404/comments/3p98" data-comment-author-id="38744" data-content-user-id="38744"> <a name="comment-3p98" style="position: absolute; top: -8px;"> </a> <div class="comment__inner"> <a href="https://dev.to/variadicism" class="shrink-0 crayons-avatar mt-4"> <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F38744%2Fb7274406-2287-4a81-835a-8b0aecd30007.jpeg" alt="variadicism profile image" loading="lazy" /> </a> <div class="inner-comment comment__details"> <div class="comment__content crayons-card"> <div class="comment__header"> <a href="https://dev.to/variadicism" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden"> <span class="js-comment-username">Connor Davey</span> </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block"> <button id="comment-profile-preview-trigger-69870" aria-controls="comment-profile-preview-content-69870" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Connor Davey profile details"> Connor Davey </button> <div id="comment-profile-preview-content-69870" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #002a9e; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/variadicism" 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%2F38744%2Fb7274406-2287-4a81-835a-8b0aecd30007.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5"> Connor Davey </span> </a> </div> <div class="print-hidden"> <button name="button" type="button" data-info="{"className":"User","style":"","id":38744,"name":"Connor Davey"}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Connor Davey" aria-pressed="false">Follow</button> </div> <div class="user-metadata-details"> <ul class="user-metadata-details-inner"> <li> <div class="key"> Joined </div> <div class="value"> <time datetime="2017-10-25T19:36:39Z" class="date">Oct 25, 2017</time> </div> </li> </ul> </div> </div> </div> </div> <span class="color-base-30 px-2 m:pl-0" role="presentation">•</span> <a href="https://dev.to/kspeakman/oh-javascript--3404#comment-3p98" class="comment-date crayons-link crayons-link--secondary fs-s"> <time datetime="2018-06-20T16:33:29Z" class=date-short-year> Jun 20 '18 </time> </a> <div class="comment__dropdown" data-tracking-name="comment_dropdown"> <button id="comment-dropdown-trigger-69870" aria-controls="comment-dropdown-69870" aria-expanded="false" class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon " aria-label="Toggle dropdown menu" aria-haspopup="true"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a72eaewwfk2pkccysuqh0oydevk68e0y" class="crayons-icon pointer-events-none"><title id="a72eaewwfk2pkccysuqh0oydevk68e0y">Dropdown menu</title> <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path> </svg> </button> <div id="comment-dropdown-69870" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown"> <ul class="m-0"> <li><a href="https://dev.to/kspeakman/oh-javascript--3404#comment-3p98" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Connor Davey's comment" data-no-instant>Copy link</a></li> <li class="comment-actions hidden" data-user-id="38744" data-action="settings-button" data-path="https://dev.to/variadicism/comment/3p98/settings" aria-label="Go to Connor Davey's comment settings"></li> <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="15366" data-user-id="38744"> <button class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment" data-hide-type="hide" data-comment-id="69870" data-comment-url="https://dev.to/variadicism/comment/3p98" aria-label="Hide Connor Davey's comment"> Hide </button> </li> <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/variadicism/comment/3p98/mod" aria-label="Moderate Connor Davey's comment"></li> <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/variadicism/comment/3p98" aria-label="Report Connor Davey's comment as abusive or violating our code of conduct and/or terms and conditions"></li> <li class="current-user-actions"></li> </ul> </div> </div> </div> <div class=" comment__body text-styles text-styles--secondary body "> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html><body> <p>At my company, we use moment.js. My colleagues recommend that.</p> </body></html> </div> </div> <script> </script> <footer class="comment__footer print-hidden"> <button class="crayons-tooltip__activator crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button" id="button-for-comment-69870" data-comment-id="69870" aria-label="like" data-tracking-name="comment_heart_button"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="at3prile7g6albo2j5mzuay721dbhneo" class="crayons-icon reaction-icon not-reacted"><title id="at3prile7g6albo2j5mzuay721dbhneo">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a91nxdz781qyy5onlvb9ygjpgctmi5rl" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="a91nxdz781qyy5onlvb9ygjpgctmi5rl">Like comment: </title> <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path> </svg> <span class="reactions-count">1</span><span class="reactions-label hidden m:inline-block"> like</span> <span data-testid="tooltip" class="crayons-tooltip__content"> Like </span> </button> <span class="fs-s inline-flex items-center fs-italic color-base-50 pl-1"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a1eimsyxq20fbajilo6se4n4012apk0v" class="crayons-icon"><title id="a1eimsyxq20fbajilo6se4n4012apk0v">Thread</title> <path d="M17 13l-5 6-5-6h3.125c0-3.314 2.798-6 6.25-6 .17 0 .34.006.506.02-1.787.904-3.006 2.705-3.006 4.78V13H17z"></path> </svg> Thread </span> </footer> </div> </div> <div id="comment-node-69876" class=" comment single-comment-node child comment--deep-3 " data-comment-id="69876" data-path="/kspeakman/oh-javascript--3404/comments/3p9e" data-comment-author-id="49972" data-content-user-id="49972"> <a name="comment-3p9e" style="position: absolute; top: -8px;"> </a> <div class="comment__inner"> <a href="https://dev.to/squgeim" class="shrink-0 crayons-avatar mt-4"> <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F49972%2Ffe79f37c-a0bb-4b2d-9c02-9aebabbc09e1.JPG" alt="squgeim profile image" loading="lazy" /> </a> <div class="inner-comment comment__details"> <div class="comment__content crayons-card"> <div class="comment__header"> <a href="https://dev.to/squgeim" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden"> <span class="js-comment-username">Shreya Dahal</span> </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block"> <button id="comment-profile-preview-trigger-69876" aria-controls="comment-profile-preview-content-69876" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Shreya Dahal profile details"> Shreya Dahal </button> <div id="comment-profile-preview-content-69876" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #422344; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/squgeim" 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%2F49972%2Ffe79f37c-a0bb-4b2d-9c02-9aebabbc09e1.JPG" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5"> Shreya Dahal </span> </a> </div> <div class="print-hidden"> <button name="button" type="button" data-info="{"className":"User","style":"","id":49972,"name":"Shreya Dahal"}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Shreya Dahal" aria-pressed="false">Follow</button> </div> <div class="color-base-70"> Full-stack Software Engineer. Free Software Enthusiast. Team Lead. (in that order) </div> <div class="user-metadata-details"> <ul class="user-metadata-details-inner"> <li> <div class="key"> Location </div> <div class="value"> Toronto </div> </li> <li> <div class="key"> Education </div> <div class="value"> Computer Engineering </div> </li> <li> <div class="key"> Work </div> <div class="value"> Full Stack Developer </div> </li> <li> <div class="key"> Joined </div> <div class="value"> <time datetime="2017-12-19T03:49:24Z" class="date">Dec 19, 2017</time> </div> </li> </ul> </div> </div> </div> </div> <span class="color-base-30 px-2 m:pl-0" role="presentation">•</span> <a href="https://dev.to/kspeakman/oh-javascript--3404#comment-3p9e" class="comment-date crayons-link crayons-link--secondary fs-s"> <time datetime="2018-06-20T16:53:02Z" class=date-short-year> Jun 20 '18 </time> </a> <div class="comment__dropdown" data-tracking-name="comment_dropdown"> <button id="comment-dropdown-trigger-69876" aria-controls="comment-dropdown-69876" aria-expanded="false" class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon " aria-label="Toggle dropdown menu" aria-haspopup="true"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="abswjfjofdipidacq1i04pjas3ftracn" class="crayons-icon pointer-events-none"><title id="abswjfjofdipidacq1i04pjas3ftracn">Dropdown menu</title> <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path> </svg> </button> <div id="comment-dropdown-69876" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown"> <ul class="m-0"> <li><a href="https://dev.to/kspeakman/oh-javascript--3404#comment-3p9e" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Shreya Dahal's comment" data-no-instant>Copy link</a></li> <li class="comment-actions hidden" data-user-id="49972" data-action="settings-button" data-path="https://dev.to/squgeim/comment/3p9e/settings" aria-label="Go to Shreya Dahal's comment settings"></li> <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="15366" data-user-id="49972"> <button class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment" data-hide-type="hide" data-comment-id="69876" data-comment-url="https://dev.to/squgeim/comment/3p9e" aria-label="Hide Shreya Dahal's comment"> Hide </button> </li> <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/squgeim/comment/3p9e/mod" aria-label="Moderate Shreya Dahal's comment"></li> <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/squgeim/comment/3p9e" aria-label="Report Shreya Dahal's comment as abusive or violating our code of conduct and/or terms and conditions"></li> <li class="current-user-actions"></li> </ul> </div> </div> </div> <div class=" comment__body text-styles text-styles--secondary body "> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html><body> <p>Using moment does not solve this issue. Initializing date with a string that is not strictly ISO 8601 is inconsistent in the specification itself and depends on the browser.</p> <p>On Safari:</p> <div class="highlight"><pre class="highlight plaintext"><code>> new Date('2018-3-14') ⋖ Invalid Date > moment('2018-3-14') ⋖ Invalid Date </code></pre></div> <p>This works on Chrome, though. :D</p> <p>More about the moment issue here: <a href="https://github.com/moment/moment/issues/1407">github.com/moment/moment/issues/1407</a></p> <p>I have a more thorough write-up on this with a lot more caveats here: <a href="https://blog.lftechnology.com/date-ing-javascript-6203650b752c">blog.lftechnology.com/date-ing-jav...</a></p> </body></html> </div> </div> <script> </script> <footer class="comment__footer print-hidden"> <button class="crayons-tooltip__activator crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button" id="button-for-comment-69876" data-comment-id="69876" aria-label="like" data-tracking-name="comment_heart_button"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aoeva5uf63nlq704yzdmu1b4iahdcs4p" class="crayons-icon reaction-icon not-reacted"><title id="aoeva5uf63nlq704yzdmu1b4iahdcs4p">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="aiuf9czy86o6sdv099hjk7o6o0muushg" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="aiuf9czy86o6sdv099hjk7o6o0muushg">Like comment: </title> <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path> </svg> <span class="reactions-count">3</span><span class="reactions-label hidden m:inline-block"> likes</span> <span data-testid="tooltip" class="crayons-tooltip__content"> Like </span> </button> <span class="fs-s inline-flex items-center fs-italic color-base-50 pl-1"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ak5or5d4ehwh5g50n5wh4bocxk227u4v" class="crayons-icon"><title id="ak5or5d4ehwh5g50n5wh4bocxk227u4v">Thread</title> <path d="M17 13l-5 6-5-6h3.125c0-3.314 2.798-6 6.25-6 .17 0 .34.006.506.02-1.787.904-3.006 2.705-3.006 4.78V13H17z"></path> </svg> Thread </span> </footer> </div> </div> <div id="comment-node-69886" class=" comment single-comment-node child comment--deep-4 comment--too-deep " data-comment-id="69886" data-path="/kspeakman/oh-javascript--3404/comments/3p9o" data-comment-author-id="15366" data-content-user-id="15366"> <a name="comment-3p9o" style="position: absolute; top: -8px;"> </a> <div class="comment__inner"> <a href="https://dev.to/kspeakman" class="shrink-0 crayons-avatar mt-4"> <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F15366%2Fc6550569-8654-4c9e-828b-c1dcb9c8a0df.png" alt="kspeakman profile image" loading="lazy" /> </a> <div class="inner-comment comment__details"> <div class="comment__content crayons-card"> <div class="comment__header"> <a href="https://dev.to/kspeakman" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden"> <span class="js-comment-username">Kasey Speakman</span> <span class="crayons-hover-tooltip inline-block spec-op-author -mr-2" data-tooltip="Author"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" class="crayons-icon"> <path d="M12 8.25a6 6 0 110 12 6 6 0 010-12zm0 2.625l-.992 2.01-2.218.322 1.605 1.564-.379 2.21L12 15.937l1.984 1.043-.379-2.209 1.605-1.564-2.218-.323L12 10.875zm.75-6.376l3.75.001v2.25l-1.022.854a7.45 7.45 0 00-2.728-.817V4.5zm-1.5 0v2.288a7.451 7.451 0 00-2.727.816L7.5 6.75V4.5h3.75z"></path> </svg> </span> </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block"> <button id="comment-profile-preview-trigger-69886" aria-controls="comment-profile-preview-content-69886" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Kasey Speakman profile details"> Kasey Speakman </button> <div id="comment-profile-preview-content-69886" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #08304c; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/kspeakman" 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%2F15366%2Fc6550569-8654-4c9e-828b-c1dcb9c8a0df.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5"> Kasey Speakman </span> </a> </div> <div class="print-hidden"> <button name="button" type="button" data-info="{"className":"User","style":"","id":15366,"name":"Kasey Speakman"}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Kasey Speakman" aria-pressed="false">Follow</button> </div> <div class="color-base-70"> collector of ideas. no one of consequence. </div> <div class="user-metadata-details"> <ul class="user-metadata-details-inner"> <li> <div class="key"> Location </div> <div class="value"> Huntsville, AL </div> </li> <li> <div class="key"> Joined </div> <div class="value"> <time datetime="2017-04-05T17:17:09Z" class="date">Apr 5, 2017</time> </div> </li> </ul> </div> </div> </div> <span class="crayons-hover-tooltip inline-block spec-op-author -ml-2" data-tooltip="Author"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" class="crayons-icon"> <path d="M12 8.25a6 6 0 110 12 6 6 0 010-12zm0 2.625l-.992 2.01-2.218.322 1.605 1.564-.379 2.21L12 15.937l1.984 1.043-.379-2.209 1.605-1.564-2.218-.323L12 10.875zm.75-6.376l3.75.001v2.25l-1.022.854a7.45 7.45 0 00-2.728-.817V4.5zm-1.5 0v2.288a7.451 7.451 0 00-2.727.816L7.5 6.75V4.5h3.75z"></path> </svg> </span> </div> <span class="color-base-30 px-2 m:pl-0" role="presentation">•</span> <a href="https://dev.to/kspeakman/oh-javascript--3404#comment-3p9o" class="comment-date crayons-link crayons-link--secondary fs-s"> <time datetime="2018-06-20T17:19:39Z" class=date-short-year> Jun 20 '18 </time> </a> <div class="comment__dropdown" data-tracking-name="comment_dropdown"> <button id="comment-dropdown-trigger-69886" aria-controls="comment-dropdown-69886" aria-expanded="false" class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon " aria-label="Toggle dropdown menu" aria-haspopup="true"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a2ky3euxf33owpkzx11xrlrgpc8gbezb" class="crayons-icon pointer-events-none"><title id="a2ky3euxf33owpkzx11xrlrgpc8gbezb">Dropdown menu</title> <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path> </svg> </button> <div id="comment-dropdown-69886" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown"> <ul class="m-0"> <li><a href="https://dev.to/kspeakman/oh-javascript--3404#comment-3p9o" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Kasey Speakman's comment" data-no-instant>Copy link</a></li> <li class="comment-actions hidden" data-user-id="15366" data-action="settings-button" data-path="https://dev.to/kspeakman/comment/3p9o/settings" aria-label="Go to Kasey Speakman's comment settings"></li> <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="15366" data-user-id="15366"> <button class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment" data-hide-type="hide" data-comment-id="69886" data-comment-url="https://dev.to/kspeakman/comment/3p9o" aria-label="Hide Kasey Speakman's comment"> Hide </button> </li> <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/kspeakman/comment/3p9o/mod" aria-label="Moderate Kasey Speakman's comment"></li> <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/kspeakman/comment/3p9o" aria-label="Report Kasey Speakman's comment as abusive or violating our code of conduct and/or terms and conditions"></li> <li class="current-user-actions"></li> </ul> </div> </div> </div> <div class=" comment__body text-styles text-styles--secondary body "> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html><body> <p>Thanks for the link. That is a great article on many of the JS Date caveats.</p> </body></html> </div> </div> <script> </script> <footer class="comment__footer print-hidden"> <button class="crayons-tooltip__activator crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button" id="button-for-comment-69886" data-comment-id="69886" aria-label="like" data-tracking-name="comment_heart_button"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ab0j8q7evmglc97umatwoey083kz55jc" class="crayons-icon reaction-icon not-reacted"><title id="ab0j8q7evmglc97umatwoey083kz55jc">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="an38tzzxd4bcm15hje1xf1lfd2ygcbmi" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="an38tzzxd4bcm15hje1xf1lfd2ygcbmi">Like comment: </title> <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path> </svg> <span class="reactions-count">1</span><span class="reactions-label hidden m:inline-block"> like</span> <span data-testid="tooltip" class="crayons-tooltip__content"> Like </span> </button> <a class="actions crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left toggle-reply-form mr-1 inline-flex" href="#/kspeakman/oh-javascript--3404/comments/new/3p9o" data-comment-id="69886" data-path="/kspeakman/oh-javascript--3404/comments/3p9o" data-tracking-name="comment_reply_button" data-testid="reply-button-69886" rel="nofollow"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aottvt4eit6ocvvg59kh7tahsl7ora3x" class="crayons-icon reaction-icon not-reacted"><title id="aottvt4eit6ocvvg59kh7tahsl7ora3x">Comment button</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 m:inline-block">Reply</span> </a> </footer> </div> </div> </div> </div> </div> </details> </div> </details> </div> </details> <details class="comment-wrapper js-comment-wrapper comment-wrapper--deep-0 root " open> <summary aria-label="Toggle this comment (and replies)" data-tracking-name="expand_comment_toggle"> <span class="m:mx-1 inline-block align-middle"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="apw9nraqdwigcvydof6w2lw4aprqapcv" class="crayons-icon expanded"><title id="apw9nraqdwigcvydof6w2lw4aprqapcv">Collapse</title> <path d="M12 10.677L8 6.935 9 6l3 2.807L15 6l1 .935-4 3.742zm0 4.517L9 18l-1-.935 4-3.742 4 3.742-1 .934-3-2.805z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ak7q5r1nk7r006wcncczazc8a6rhrnm1" class="crayons-icon collapsed"><title id="ak7q5r1nk7r006wcncczazc8a6rhrnm1">Expand</title> <path d="M12 18l-4-3.771 1-.943 3 2.829 3-2.829 1 .943L12 18zm0-10.115l-3 2.829-1-.943L12 6l4 3.771-1 .942-3-2.828z"></path> </svg> </span> <span class="js-collapse-comment-content inline-block align-middle"></span> </summary> <div id="comment-node-69349" class=" comment single-comment-node root comment--deep-0 " data-comment-id="69349" data-path="/kspeakman/oh-javascript--3404/comments/3of7" data-comment-author-id="79148" data-content-user-id="79148"> <a name="comment-3of7" style="position: absolute; top: -8px;"> </a> <div class="comment__inner"> <a href="https://dev.to/lioobayoyo" class="shrink-0 crayons-avatar m:crayons-avatar--l mt-4 m:mt-3"> <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F79148%2F16aa0a0c-4e21-4119-889f-c57d0e0727c5.png" alt="lioobayoyo profile image" loading="lazy" /> </a> <div class="inner-comment comment__details"> <div class="comment__content crayons-card"> <div class="comment__header"> <a href="https://dev.to/lioobayoyo" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden"> <span class="js-comment-username">lioobayoyo</span> </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block"> <button id="comment-profile-preview-trigger-69349" aria-controls="comment-profile-preview-content-69349" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="lioobayoyo profile details"> lioobayoyo </button> <div id="comment-profile-preview-content-69349" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #002a9e; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/lioobayoyo" 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%2F79148%2F16aa0a0c-4e21-4119-889f-c57d0e0727c5.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5"> lioobayoyo </span> </a> </div> <div class="print-hidden"> <button name="button" type="button" data-info="{"className":"User","style":"","id":79148,"name":"lioobayoyo"}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: lioobayoyo" aria-pressed="false">Follow</button> </div> <div class="user-metadata-details"> <ul class="user-metadata-details-inner"> <li> <div class="key"> Joined </div> <div class="value"> <time datetime="2018-06-18T16:46:11Z" class="date">Jun 18, 2018</time> </div> </li> </ul> </div> </div> </div> </div> <span class="color-base-30 px-2 m:pl-0" role="presentation">•</span> <a href="https://dev.to/kspeakman/oh-javascript--3404#comment-3of7" class="comment-date crayons-link crayons-link--secondary fs-s"> <time datetime="2018-06-18T16:52:31Z" class=date-short-year> Jun 18 '18 </time> <span class="hidden m:inline-block">• Edited on <time datetime="2018-06-18T16:52:55Z" class="date-no-year">Jun 18</time></span> <span class="m:hidden">• Edited</span> </a> <div class="comment__dropdown" data-tracking-name="comment_dropdown"> <button id="comment-dropdown-trigger-69349" aria-controls="comment-dropdown-69349" aria-expanded="false" class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon " aria-label="Toggle dropdown menu" aria-haspopup="true"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ar0ktt6m1u11qzawsnfyv9vn8wa6kick" class="crayons-icon pointer-events-none"><title id="ar0ktt6m1u11qzawsnfyv9vn8wa6kick">Dropdown menu</title> <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path> </svg> </button> <div id="comment-dropdown-69349" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown"> <ul class="m-0"> <li><a href="https://dev.to/kspeakman/oh-javascript--3404#comment-3of7" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to lioobayoyo's comment" data-no-instant>Copy link</a></li> <li class="comment-actions hidden" data-user-id="79148" data-action="settings-button" data-path="https://dev.to/lioobayoyo/comment/3of7/settings" aria-label="Go to lioobayoyo's comment settings"></li> <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="15366" data-user-id="79148"> <button class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment" data-hide-type="hide" data-comment-id="69349" data-comment-url="https://dev.to/lioobayoyo/comment/3of7" aria-label="Hide lioobayoyo's comment"> Hide </button> </li> <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/lioobayoyo/comment/3of7/mod" aria-label="Moderate lioobayoyo's comment"></li> <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/lioobayoyo/comment/3of7" aria-label="Report lioobayoyo's comment as abusive or violating our code of conduct and/or terms and conditions"></li> <li class="current-user-actions"></li> </ul> </div> </div> </div> <div class=" comment__body text-styles text-styles--secondary body "> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html><body> <p>As much as I hate native Date handling in Javascript, this one doesn't strike me as especially bad (at least not worse than the rest of Date).</p> <p>Without specifying a time part, it assumes 0:00:00. Sounds fine.</p> <p>Using your locale notation, it assume local client timezone.<br> Using ISO 8601 notation "yyyy-mm-dd", it assumes UTC timezone.</p> <p>The basic problem is that you can't ignore timezones in JS when dealing with abstract dates which don't have time info with them (like a birthday).</p> <p>In C# for instance you can deal with datetimes with "Unspecified" offset.</p> </body></html> </div> </div> <script> </script> <footer class="comment__footer print-hidden"> <button class="crayons-tooltip__activator crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button" id="button-for-comment-69349" data-comment-id="69349" aria-label="like" data-tracking-name="comment_heart_button"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="agb0b0on9s97p5ttd8oxijw03do4opoj" class="crayons-icon reaction-icon not-reacted"><title id="agb0b0on9s97p5ttd8oxijw03do4opoj">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="aqpjianmsxhk0954ma00vte5kmhebfpn" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="aqpjianmsxhk0954ma00vte5kmhebfpn">Like comment: </title> <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path> </svg> <span class="reactions-count">4</span><span class="reactions-label hidden m:inline-block"> likes</span> <span data-testid="tooltip" class="crayons-tooltip__content"> Like </span> </button> <a class="actions crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left toggle-reply-form mr-1 inline-flex" href="#/kspeakman/oh-javascript--3404/comments/new/3of7" data-comment-id="69349" data-path="/kspeakman/oh-javascript--3404/comments/3of7" data-tracking-name="comment_reply_button" data-testid="reply-button-69349" rel="nofollow"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ae0c8ti2g01ih7qdkyw2l3q6s4aauvq6" class="crayons-icon reaction-icon not-reacted"><title id="ae0c8ti2g01ih7qdkyw2l3q6s4aauvq6">Comment button</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 m:inline-block">Reply</span> </a> </footer> </div> </div> <details class="comment-wrapper js-comment-wrapper comment-wrapper--deep-1 child " open> <summary aria-label="Toggle this comment (and replies)" data-tracking-name="expand_comment_toggle"> <span class="mx-0 inline-block align-middle"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="akrszb3q0ukae3sxxsalh8jt9olkylri" class="crayons-icon expanded"><title id="akrszb3q0ukae3sxxsalh8jt9olkylri">Collapse</title> <path d="M12 10.677L8 6.935 9 6l3 2.807L15 6l1 .935-4 3.742zm0 4.517L9 18l-1-.935 4-3.742 4 3.742-1 .934-3-2.805z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ajzkxqn0mr92rw6smeixo2q1j6r0ojf1" class="crayons-icon collapsed"><title id="ajzkxqn0mr92rw6smeixo2q1j6r0ojf1">Expand</title> <path d="M12 18l-4-3.771 1-.943 3 2.829 3-2.829 1 .943L12 18zm0-10.115l-3 2.829-1-.943L12 6l4 3.771-1 .942-3-2.828z"></path> </svg> </span> <span class="js-collapse-comment-content inline-block align-middle"></span> </summary> <div id="comment-node-69353" class=" comment single-comment-node child comment--deep-1 " data-comment-id="69353" data-path="/kspeakman/oh-javascript--3404/comments/3ofb" data-comment-author-id="15366" data-content-user-id="15366"> <a name="comment-3ofb" style="position: absolute; top: -8px;"> </a> <div class="comment__inner"> <a href="https://dev.to/kspeakman" class="shrink-0 crayons-avatar mt-4"> <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F15366%2Fc6550569-8654-4c9e-828b-c1dcb9c8a0df.png" alt="kspeakman profile image" loading="lazy" /> </a> <div class="inner-comment comment__details"> <div class="comment__content crayons-card"> <div class="comment__header"> <a href="https://dev.to/kspeakman" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden"> <span class="js-comment-username">Kasey Speakman</span> <span class="crayons-hover-tooltip inline-block spec-op-author -mr-2" data-tooltip="Author"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" class="crayons-icon"> <path d="M12 8.25a6 6 0 110 12 6 6 0 010-12zm0 2.625l-.992 2.01-2.218.322 1.605 1.564-.379 2.21L12 15.937l1.984 1.043-.379-2.209 1.605-1.564-2.218-.323L12 10.875zm.75-6.376l3.75.001v2.25l-1.022.854a7.45 7.45 0 00-2.728-.817V4.5zm-1.5 0v2.288a7.451 7.451 0 00-2.727.816L7.5 6.75V4.5h3.75z"></path> </svg> </span> </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block"> <button id="comment-profile-preview-trigger-69353" aria-controls="comment-profile-preview-content-69353" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Kasey Speakman profile details"> Kasey Speakman </button> <div id="comment-profile-preview-content-69353" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #08304c; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/kspeakman" 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%2F15366%2Fc6550569-8654-4c9e-828b-c1dcb9c8a0df.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5"> Kasey Speakman </span> </a> </div> <div class="print-hidden"> <button name="button" type="button" data-info="{"className":"User","style":"","id":15366,"name":"Kasey Speakman"}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Kasey Speakman" aria-pressed="false">Follow</button> </div> <div class="color-base-70"> collector of ideas. no one of consequence. </div> <div class="user-metadata-details"> <ul class="user-metadata-details-inner"> <li> <div class="key"> Location </div> <div class="value"> Huntsville, AL </div> </li> <li> <div class="key"> Joined </div> <div class="value"> <time datetime="2017-04-05T17:17:09Z" class="date">Apr 5, 2017</time> </div> </li> </ul> </div> </div> </div> <span class="crayons-hover-tooltip inline-block spec-op-author -ml-2" data-tooltip="Author"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" class="crayons-icon"> <path d="M12 8.25a6 6 0 110 12 6 6 0 010-12zm0 2.625l-.992 2.01-2.218.322 1.605 1.564-.379 2.21L12 15.937l1.984 1.043-.379-2.209 1.605-1.564-2.218-.323L12 10.875zm.75-6.376l3.75.001v2.25l-1.022.854a7.45 7.45 0 00-2.728-.817V4.5zm-1.5 0v2.288a7.451 7.451 0 00-2.727.816L7.5 6.75V4.5h3.75z"></path> </svg> </span> </div> <span class="color-base-30 px-2 m:pl-0" role="presentation">•</span> <a href="https://dev.to/kspeakman/oh-javascript--3404#comment-3ofb" class="comment-date crayons-link crayons-link--secondary fs-s"> <time datetime="2018-06-18T17:21:00Z" class=date-short-year> Jun 18 '18 </time> </a> <div class="comment__dropdown" data-tracking-name="comment_dropdown"> <button id="comment-dropdown-trigger-69353" aria-controls="comment-dropdown-69353" aria-expanded="false" class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon " aria-label="Toggle dropdown menu" aria-haspopup="true"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ab138fkrg9l2lizo74lr7uqxsqtpxhoe" class="crayons-icon pointer-events-none"><title id="ab138fkrg9l2lizo74lr7uqxsqtpxhoe">Dropdown menu</title> <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path> </svg> </button> <div id="comment-dropdown-69353" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown"> <ul class="m-0"> <li><a href="https://dev.to/kspeakman/oh-javascript--3404#comment-3ofb" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Kasey Speakman's comment" data-no-instant>Copy link</a></li> <li class="comment-actions hidden" data-user-id="15366" data-action="settings-button" data-path="https://dev.to/kspeakman/comment/3ofb/settings" aria-label="Go to Kasey Speakman's comment settings"></li> <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="15366" data-user-id="15366"> <button class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment" data-hide-type="hide" data-comment-id="69353" data-comment-url="https://dev.to/kspeakman/comment/3ofb" aria-label="Hide Kasey Speakman's comment"> Hide </button> </li> <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/kspeakman/comment/3ofb/mod" aria-label="Moderate Kasey Speakman's comment"></li> <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/kspeakman/comment/3ofb" aria-label="Report Kasey Speakman's comment as abusive or violating our code of conduct and/or terms and conditions"></li> <li class="current-user-actions"></li> </ul> </div> </div> </div> <div class=" comment__body text-styles text-styles--secondary body "> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html><body> <p>You are right, it is a relatively minor tripping hazard. JS has lots of those. But it is one that I tripped over recently. :)</p> <p>The unexpected behavior is that simply changing the separator character changes the result. Most of the time, users will consider common date separators like hyphen and slash interchangeable. Now I have to either write extra code to remediate that expectation or confuse users when it does not work as expected (bad UX, and a non-option).</p> <p>Also, my locale does not use that date notation. I would be surprised if JS Date parsing took locale into consideration.</p> </body></html> </div> </div> <script> </script> <footer class="comment__footer print-hidden"> <button class="crayons-tooltip__activator crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button" id="button-for-comment-69353" data-comment-id="69353" aria-label="like" data-tracking-name="comment_heart_button"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ari7rmuh4dyaodmrxfzt1oxrz1s4g7tw" class="crayons-icon reaction-icon not-reacted"><title id="ari7rmuh4dyaodmrxfzt1oxrz1s4g7tw">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a1jq99oh293ucctzxdtja31mcesrgugr" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="a1jq99oh293ucctzxdtja31mcesrgugr">Like comment: </title> <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path> </svg> <span class="reactions-count">2</span><span class="reactions-label hidden m:inline-block"> likes</span> <span data-testid="tooltip" class="crayons-tooltip__content"> Like </span> </button> <a class="actions crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left toggle-reply-form mr-1 inline-flex" href="#/kspeakman/oh-javascript--3404/comments/new/3ofb" data-comment-id="69353" data-path="/kspeakman/oh-javascript--3404/comments/3ofb" data-tracking-name="comment_reply_button" data-testid="reply-button-69353" rel="nofollow"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aq489dmsjtqpryk71flmsopn6jmgjs4a" class="crayons-icon reaction-icon not-reacted"><title id="aq489dmsjtqpryk71flmsopn6jmgjs4a">Comment button</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 m:inline-block">Reply</span> </a> </footer> </div> </div> </div> </details> </div> </details> <details class="comment-wrapper js-comment-wrapper comment-wrapper--deep-0 root " open> <summary aria-label="Toggle this comment (and replies)" data-tracking-name="expand_comment_toggle"> <span class="m:mx-1 inline-block align-middle"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="aejrm0zmd51zxw6ofr94bgsjp3igynhe" class="crayons-icon expanded"><title id="aejrm0zmd51zxw6ofr94bgsjp3igynhe">Collapse</title> <path d="M12 10.677L8 6.935 9 6l3 2.807L15 6l1 .935-4 3.742zm0 4.517L9 18l-1-.935 4-3.742 4 3.742-1 .934-3-2.805z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="aiseck4fel4dd82yao1riebkm37oznif" class="crayons-icon collapsed"><title id="aiseck4fel4dd82yao1riebkm37oznif">Expand</title> <path d="M12 18l-4-3.771 1-.943 3 2.829 3-2.829 1 .943L12 18zm0-10.115l-3 2.829-1-.943L12 6l4 3.771-1 .942-3-2.828z"></path> </svg> </span> <span class="js-collapse-comment-content inline-block align-middle"></span> </summary> <div id="comment-node-69793" class=" comment single-comment-node root comment--deep-0 " data-comment-id="69793" data-path="/kspeakman/oh-javascript--3404/comments/3p69" data-comment-author-id="35800" data-content-user-id="35800"> <a name="comment-3p69" style="position: absolute; top: -8px;"> </a> <div class="comment__inner"> <a href="https://dev.to/tunaxor" class="shrink-0 crayons-avatar m:crayons-avatar--l mt-4 m:mt-3"> <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F35800%2F28156be5-48cb-4192-94a4-9c848f92a80a.jpg" alt="tunaxor profile image" loading="lazy" /> </a> <div class="inner-comment comment__details"> <div class="comment__content crayons-card"> <div class="comment__header"> <a href="https://dev.to/tunaxor" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden"> <span class="js-comment-username">Angel Daniel Munoz Gonzalez</span> </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block"> <button id="comment-profile-preview-trigger-69793" aria-controls="comment-profile-preview-content-69793" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Angel Daniel Munoz Gonzalez profile details"> Angel Daniel Munoz Gonzalez </button> <div id="comment-profile-preview-content-69793" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #6a4b3f; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/tunaxor" 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%2F35800%2F28156be5-48cb-4192-94a4-9c848f92a80a.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5"> Angel Daniel Munoz Gonzalez </span> </a> </div> <div class="print-hidden"> <button name="button" type="button" data-info="{"className":"User","style":"","id":35800,"name":"Angel Daniel Munoz Gonzalez"}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Angel Daniel Munoz Gonzalez" aria-pressed="false">Follow</button> </div> <div class="color-base-70"> I'm a Mexican dude, tacos and stuff. In total love with F# |> ❤. </div> <div class="user-metadata-details"> <ul class="user-metadata-details-inner"> <li> <div class="key"> Email </div> <div class="value"> <a href="mailto:scythes.lol@gmail.com">scythes.lol@gmail.com</a> </div> </li> <li> <div class="key"> Location </div> <div class="value"> Mexico </div> </li> <li> <div class="key"> Work </div> <div class="value"> Software developer @ Encora Inc. </div> </li> <li> <div class="key"> Joined </div> <div class="value"> <time datetime="2017-10-05T04:14:57Z" class="date">Oct 5, 2017</time> </div> </li> </ul> </div> </div> </div> </div> <span class="color-base-30 px-2 m:pl-0" role="presentation">•</span> <a href="https://dev.to/kspeakman/oh-javascript--3404#comment-3p69" class="comment-date crayons-link crayons-link--secondary fs-s"> <time datetime="2018-06-20T14:05:25Z" class=date-short-year> Jun 20 '18 </time> </a> <div class="comment__dropdown" data-tracking-name="comment_dropdown"> <button id="comment-dropdown-trigger-69793" aria-controls="comment-dropdown-69793" aria-expanded="false" class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon " aria-label="Toggle dropdown menu" aria-haspopup="true"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="af0ioqlr51uc760jxxoleq01p1ts095d" class="crayons-icon pointer-events-none"><title id="af0ioqlr51uc760jxxoleq01p1ts095d">Dropdown menu</title> <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path> </svg> </button> <div id="comment-dropdown-69793" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown"> <ul class="m-0"> <li><a href="https://dev.to/kspeakman/oh-javascript--3404#comment-3p69" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Angel Daniel Munoz Gonzalez's comment" data-no-instant>Copy link</a></li> <li class="comment-actions hidden" data-user-id="35800" data-action="settings-button" data-path="https://dev.to/tunaxor/comment/3p69/settings" aria-label="Go to Angel Daniel Munoz Gonzalez's comment settings"></li> <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="15366" data-user-id="35800"> <button class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment" data-hide-type="hide" data-comment-id="69793" data-comment-url="https://dev.to/tunaxor/comment/3p69" aria-label="Hide Angel Daniel Munoz Gonzalez's comment"> Hide </button> </li> <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/tunaxor/comment/3p69/mod" aria-label="Moderate Angel Daniel Munoz Gonzalez's comment"></li> <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/tunaxor/comment/3p69" aria-label="Report Angel Daniel Munoz Gonzalez's comment as abusive or violating our code of conduct and/or terms and conditions"></li> <li class="current-user-actions"></li> </ul> </div> </div> </div> <div class=" comment__body text-styles text-styles--secondary body "> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html><body> <p>I've run across this issue several times over the last year, it was mostly because we were receiving the format that includes <code>/</code> from the client and the fact that our clients had a different timezone than our servers (which was our fault because that solution was supposed to be localized to the country) we end up changing to moment for anything that has to do with dates and converting any date that came with a <code>/</code></p> </body></html> </div> </div> <script> </script> <footer class="comment__footer print-hidden"> <button class="crayons-tooltip__activator crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button" id="button-for-comment-69793" data-comment-id="69793" aria-label="like" data-tracking-name="comment_heart_button"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="at0ld51h6rnjc77m5ygeiei2jomyigh" class="crayons-icon reaction-icon not-reacted"><title id="at0ld51h6rnjc77m5ygeiei2jomyigh">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="akvkeybjc3jgmlf39smtr0d4l8islsqk" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="akvkeybjc3jgmlf39smtr0d4l8islsqk">Like comment: </title> <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path> </svg> <span class="reactions-count">2</span><span class="reactions-label hidden m:inline-block"> likes</span> <span data-testid="tooltip" class="crayons-tooltip__content"> Like </span> </button> <a class="actions crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left toggle-reply-form mr-1 inline-flex" href="#/kspeakman/oh-javascript--3404/comments/new/3p69" data-comment-id="69793" data-path="/kspeakman/oh-javascript--3404/comments/3p69" data-tracking-name="comment_reply_button" data-testid="reply-button-69793" rel="nofollow"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a301wjc4in3k0xdo95z4ono859lddgug" class="crayons-icon reaction-icon not-reacted"><title id="a301wjc4in3k0xdo95z4ono859lddgug">Comment button</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 m:inline-block">Reply</span> </a> </footer> </div> </div> </div> </details> <details class="comment-wrapper js-comment-wrapper comment-wrapper--deep-0 root " open> <summary aria-label="Toggle this comment (and replies)" data-tracking-name="expand_comment_toggle"> <span class="m:mx-1 inline-block align-middle"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="asyr53rpdn6s21thqvwkrodi2uu0ldf0" class="crayons-icon expanded"><title id="asyr53rpdn6s21thqvwkrodi2uu0ldf0">Collapse</title> <path d="M12 10.677L8 6.935 9 6l3 2.807L15 6l1 .935-4 3.742zm0 4.517L9 18l-1-.935 4-3.742 4 3.742-1 .934-3-2.805z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="afyqqgzc1l3hhepzv78v516wur4fm5i5" class="crayons-icon collapsed"><title id="afyqqgzc1l3hhepzv78v516wur4fm5i5">Expand</title> <path d="M12 18l-4-3.771 1-.943 3 2.829 3-2.829 1 .943L12 18zm0-10.115l-3 2.829-1-.943L12 6l4 3.771-1 .942-3-2.828z"></path> </svg> </span> <span class="js-collapse-comment-content inline-block align-middle"></span> </summary> <div id="comment-node-69187" class=" comment single-comment-node root comment--deep-0 " data-comment-id="69187" data-path="/kspeakman/oh-javascript--3404/comments/3o91" data-comment-author-id="1" data-content-user-id="1"> <a name="comment-3o91" style="position: absolute; top: -8px;"> </a> <div class="comment__inner"> <a href="https://dev.to/ben" class="shrink-0 crayons-avatar m:crayons-avatar--l mt-4 m:mt-3"> <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1%2Ff451a206-11c8-4e3d-8936-143d0a7e65bb.png" alt="ben profile image" loading="lazy" /> </a> <div class="inner-comment comment__details"> <div class="comment__content crayons-card"> <div class="comment__header"> <a href="https://dev.to/ben" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden"> <span class="js-comment-username">Ben Halpern</span> </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block"> <button id="comment-profile-preview-trigger-69187" aria-controls="comment-profile-preview-content-69187" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Ben Halpern profile details"> Ben Halpern <a style="display: inline;" href="/++"><img alt="Subscriber" class="subscription-icon" src="https://assets.dev.to/assets/subscription-icon-805dfa7ac7dd660f07ed8d654877270825b07a92a03841aa99a1093bd00431b2.png" /></a> </button> <div id="comment-profile-preview-content-69187" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #341dc7; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/ben" 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%2F1%2Ff451a206-11c8-4e3d-8936-143d0a7e65bb.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5"> Ben Halpern <img class="subscription-icon" src="https://assets.dev.to/assets/subscription-icon-805dfa7ac7dd660f07ed8d654877270825b07a92a03841aa99a1093bd00431b2.png" /> </span> </a> </div> <div class="print-hidden"> <button name="button" type="button" data-info="{"className":"User","style":"","id":1,"name":"Ben Halpern"}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Ben Halpern" aria-pressed="false">Follow</button> </div> <div class="color-base-70"> A Canadian software developer who thinks he’s funny. </div> <div class="user-metadata-details"> <ul class="user-metadata-details-inner"> <li> <div class="key"> Email </div> <div class="value"> <a href="mailto:ben@forem.com">ben@forem.com</a> </div> </li> <li> <div class="key"> Location </div> <div class="value"> NY </div> </li> <li> <div class="key"> Education </div> <div class="value"> Mount Allison University </div> </li> <li> <div class="key"> Pronouns </div> <div class="value"> He/him </div> </li> <li> <div class="key"> Work </div> <div class="value"> Co-founder at Forem </div> </li> <li> <div class="key"> Joined </div> <div class="value"> <time datetime="2015-12-27T04:02:17Z" class="date">Dec 27, 2015</time> </div> </li> </ul> </div> </div> </div> </div> <span class="color-base-30 px-2 m:pl-0" role="presentation">•</span> <a href="https://dev.to/kspeakman/oh-javascript--3404#comment-3o91" class="comment-date crayons-link crayons-link--secondary fs-s"> <time datetime="2018-06-17T22:49:34Z" class=date-short-year> Jun 17 '18 </time> </a> <div class="comment__dropdown" data-tracking-name="comment_dropdown"> <button id="comment-dropdown-trigger-69187" aria-controls="comment-dropdown-69187" aria-expanded="false" class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon " aria-label="Toggle dropdown menu" aria-haspopup="true"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a8j18r0jj0qutgghue5uhzwxh1b4apnp" class="crayons-icon pointer-events-none"><title id="a8j18r0jj0qutgghue5uhzwxh1b4apnp">Dropdown menu</title> <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path> </svg> </button> <div id="comment-dropdown-69187" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown"> <ul class="m-0"> <li><a href="https://dev.to/kspeakman/oh-javascript--3404#comment-3o91" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Ben Halpern's comment" data-no-instant>Copy link</a></li> <li class="comment-actions hidden" data-user-id="1" data-action="settings-button" data-path="https://dev.to/ben/comment/3o91/settings" aria-label="Go to Ben Halpern's comment settings"></li> <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="15366" data-user-id="1"> <button class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment" data-hide-type="hide" data-comment-id="69187" data-comment-url="https://dev.to/ben/comment/3o91" aria-label="Hide Ben Halpern's comment"> Hide </button> </li> <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/ben/comment/3o91/mod" aria-label="Moderate Ben Halpern's comment"></li> <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/ben/comment/3o91" aria-label="Report Ben Halpern's comment as abusive or violating our code of conduct and/or terms and conditions"></li> <li class="current-user-actions"></li> </ul> </div> </div> </div> <div class=" comment__body text-styles text-styles--secondary body "> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html><body> <p>Do any JS linting libraries yell at you about these sorts of things? And if so, when do they yell at you, every time, or only in example 2?</p> </body></html> </div> </div> <script> </script> <footer class="comment__footer print-hidden"> <button class="crayons-tooltip__activator crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button" id="button-for-comment-69187" data-comment-id="69187" aria-label="like" data-tracking-name="comment_heart_button"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ac92ud1v66w7iyalftq6c7h7tr15vjub" class="crayons-icon reaction-icon not-reacted"><title id="ac92ud1v66w7iyalftq6c7h7tr15vjub">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="amlk6p1rs6ftc12pnke43oai1ualm60d" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="amlk6p1rs6ftc12pnke43oai1ualm60d">Like comment: </title> <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path> </svg> <span class="reactions-count">4</span><span class="reactions-label hidden m:inline-block"> likes</span> <span data-testid="tooltip" class="crayons-tooltip__content"> Like </span> </button> <a class="actions crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left toggle-reply-form mr-1 inline-flex" href="#/kspeakman/oh-javascript--3404/comments/new/3o91" data-comment-id="69187" data-path="/kspeakman/oh-javascript--3404/comments/3o91" data-tracking-name="comment_reply_button" data-testid="reply-button-69187" rel="nofollow"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ac4e0m2r2iizvlwnazba24bksq172osm" class="crayons-icon reaction-icon not-reacted"><title id="ac4e0m2r2iizvlwnazba24bksq172osm">Comment button</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 m:inline-block">Reply</span> </a> </footer> </div> </div> <details class="comment-wrapper js-comment-wrapper comment-wrapper--deep-1 child " open> <summary aria-label="Toggle this comment (and replies)" data-tracking-name="expand_comment_toggle"> <span class="mx-0 inline-block align-middle"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a3lcvnnrpijtwt31dxxmn7td5ctwg9ui" class="crayons-icon expanded"><title id="a3lcvnnrpijtwt31dxxmn7td5ctwg9ui">Collapse</title> <path d="M12 10.677L8 6.935 9 6l3 2.807L15 6l1 .935-4 3.742zm0 4.517L9 18l-1-.935 4-3.742 4 3.742-1 .934-3-2.805z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="aj78w7xqd5x720epdmq836ilkqfvu7af" class="crayons-icon collapsed"><title id="aj78w7xqd5x720epdmq836ilkqfvu7af">Expand</title> <path d="M12 18l-4-3.771 1-.943 3 2.829 3-2.829 1 .943L12 18zm0-10.115l-3 2.829-1-.943L12 6l4 3.771-1 .942-3-2.828z"></path> </svg> </span> <span class="js-collapse-comment-content inline-block align-middle"></span> </summary> <div id="comment-node-69206" class=" comment single-comment-node child comment--deep-1 " data-comment-id="69206" data-path="/kspeakman/oh-javascript--3404/comments/3o9k" data-comment-author-id="15366" data-content-user-id="15366"> <a name="comment-3o9k" style="position: absolute; top: -8px;"> </a> <div class="comment__inner"> <a href="https://dev.to/kspeakman" class="shrink-0 crayons-avatar mt-4"> <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F15366%2Fc6550569-8654-4c9e-828b-c1dcb9c8a0df.png" alt="kspeakman profile image" loading="lazy" /> </a> <div class="inner-comment comment__details"> <div class="comment__content crayons-card"> <div class="comment__header"> <a href="https://dev.to/kspeakman" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden"> <span class="js-comment-username">Kasey Speakman</span> <span class="crayons-hover-tooltip inline-block spec-op-author -mr-2" data-tooltip="Author"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" class="crayons-icon"> <path d="M12 8.25a6 6 0 110 12 6 6 0 010-12zm0 2.625l-.992 2.01-2.218.322 1.605 1.564-.379 2.21L12 15.937l1.984 1.043-.379-2.209 1.605-1.564-2.218-.323L12 10.875zm.75-6.376l3.75.001v2.25l-1.022.854a7.45 7.45 0 00-2.728-.817V4.5zm-1.5 0v2.288a7.451 7.451 0 00-2.727.816L7.5 6.75V4.5h3.75z"></path> </svg> </span> </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block"> <button id="comment-profile-preview-trigger-69206" aria-controls="comment-profile-preview-content-69206" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Kasey Speakman profile details"> Kasey Speakman </button> <div id="comment-profile-preview-content-69206" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #08304c; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/kspeakman" 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%2F15366%2Fc6550569-8654-4c9e-828b-c1dcb9c8a0df.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5"> Kasey Speakman </span> </a> </div> <div class="print-hidden"> <button name="button" type="button" data-info="{"className":"User","style":"","id":15366,"name":"Kasey Speakman"}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Kasey Speakman" aria-pressed="false">Follow</button> </div> <div class="color-base-70"> collector of ideas. no one of consequence. </div> <div class="user-metadata-details"> <ul class="user-metadata-details-inner"> <li> <div class="key"> Location </div> <div class="value"> Huntsville, AL </div> </li> <li> <div class="key"> Joined </div> <div class="value"> <time datetime="2017-04-05T17:17:09Z" class="date">Apr 5, 2017</time> </div> </li> </ul> </div> </div> </div> <span class="crayons-hover-tooltip inline-block spec-op-author -ml-2" data-tooltip="Author"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" class="crayons-icon"> <path d="M12 8.25a6 6 0 110 12 6 6 0 010-12zm0 2.625l-.992 2.01-2.218.322 1.605 1.564-.379 2.21L12 15.937l1.984 1.043-.379-2.209 1.605-1.564-2.218-.323L12 10.875zm.75-6.376l3.75.001v2.25l-1.022.854a7.45 7.45 0 00-2.728-.817V4.5zm-1.5 0v2.288a7.451 7.451 0 00-2.727.816L7.5 6.75V4.5h3.75z"></path> </svg> </span> </div> <span class="color-base-30 px-2 m:pl-0" role="presentation">•</span> <a href="https://dev.to/kspeakman/oh-javascript--3404#comment-3o9k" class="comment-date crayons-link crayons-link--secondary fs-s"> <time datetime="2018-06-18T03:22:16Z" class=date-short-year> Jun 18 '18 </time> <span class="hidden m:inline-block">• Edited on <time datetime="2018-06-18T03:23:37Z" class="date-no-year">Jun 18</time></span> <span class="m:hidden">• Edited</span> </a> <div class="comment__dropdown" data-tracking-name="comment_dropdown"> <button id="comment-dropdown-trigger-69206" aria-controls="comment-dropdown-69206" aria-expanded="false" class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon " aria-label="Toggle dropdown menu" aria-haspopup="true"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a1rumz6qb4ca3fs3dqmfrat5lsijs2jh" class="crayons-icon pointer-events-none"><title id="a1rumz6qb4ca3fs3dqmfrat5lsijs2jh">Dropdown menu</title> <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path> </svg> </button> <div id="comment-dropdown-69206" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown"> <ul class="m-0"> <li><a href="https://dev.to/kspeakman/oh-javascript--3404#comment-3o9k" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Kasey Speakman's comment" data-no-instant>Copy link</a></li> <li class="comment-actions hidden" data-user-id="15366" data-action="settings-button" data-path="https://dev.to/kspeakman/comment/3o9k/settings" aria-label="Go to Kasey Speakman's comment settings"></li> <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="15366" data-user-id="15366"> <button class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment" data-hide-type="hide" data-comment-id="69206" data-comment-url="https://dev.to/kspeakman/comment/3o9k" aria-label="Hide Kasey Speakman's comment"> Hide </button> </li> <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/kspeakman/comment/3o9k/mod" aria-label="Moderate Kasey Speakman's comment"></li> <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/kspeakman/comment/3o9k" aria-label="Report Kasey Speakman's comment as abusive or violating our code of conduct and/or terms and conditions"></li> <li class="current-user-actions"></li> </ul> </div> </div> </div> <div class=" comment__body text-styles text-styles--secondary body "> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html><body> <p>For this particular project, I haven't even written JS code yet. It has all been in Elm. However, Elm's <code>Date.fromString string</code> function calls this JS under the covers: <code>new Date( string )</code>. So it is important to know the behavior. I ran these bits from the browser console.</p> <p>In this case, example 2 is the one I prefer. Because it is a way to store/transmit a date that will parse to the right day regardless of the current time zone. So hopefully it would not be a linting error.</p> <p>In an ideal world I would just work with UTC dates, but JS Date can only be made in the local time zone. Working in non-local time zones must be done with something other than JS Date (e.g. unix epoch integer, moment.js, etc). </p> </body></html> </div> </div> <script> </script> <footer class="comment__footer print-hidden"> <button class="crayons-tooltip__activator crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button" id="button-for-comment-69206" data-comment-id="69206" aria-label="like" data-tracking-name="comment_heart_button"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ak7fuygpwn8m3fb57zm61n1jbzwccpbr" class="crayons-icon reaction-icon not-reacted"><title id="ak7fuygpwn8m3fb57zm61n1jbzwccpbr">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ao6ijunzo1syjh8a0zemo9gbh5t8x4wy" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="ao6ijunzo1syjh8a0zemo9gbh5t8x4wy">Like comment: </title> <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path> </svg> <span class="reactions-count">2</span><span class="reactions-label hidden m:inline-block"> likes</span> <span data-testid="tooltip" class="crayons-tooltip__content"> Like </span> </button> <a class="actions crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left toggle-reply-form mr-1 inline-flex" href="#/kspeakman/oh-javascript--3404/comments/new/3o9k" data-comment-id="69206" data-path="/kspeakman/oh-javascript--3404/comments/3o9k" data-tracking-name="comment_reply_button" data-testid="reply-button-69206" rel="nofollow"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ant3verhctzgzuoputmtejva68elkc8j" class="crayons-icon reaction-icon not-reacted"><title id="ant3verhctzgzuoputmtejva68elkc8j">Comment button</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 m:inline-block">Reply</span> </a> </footer> </div> </div> <details class="comment-wrapper js-comment-wrapper comment-wrapper--deep-2 child " open> <summary aria-label="Toggle this comment (and replies)" data-tracking-name="expand_comment_toggle"> <span class="mx-0 inline-block align-middle"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="at7erjiap2np5peo1z0ed3a8ixf5ojod" class="crayons-icon expanded"><title id="at7erjiap2np5peo1z0ed3a8ixf5ojod">Collapse</title> <path d="M12 10.677L8 6.935 9 6l3 2.807L15 6l1 .935-4 3.742zm0 4.517L9 18l-1-.935 4-3.742 4 3.742-1 .934-3-2.805z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ad585v08tpb30yh6xlwxi9xrq32vievt" class="crayons-icon collapsed"><title id="ad585v08tpb30yh6xlwxi9xrq32vievt">Expand</title> <path d="M12 18l-4-3.771 1-.943 3 2.829 3-2.829 1 .943L12 18zm0-10.115l-3 2.829-1-.943L12 6l4 3.771-1 .942-3-2.828z"></path> </svg> </span> <span class="js-collapse-comment-content inline-block align-middle"></span> </summary> <div id="comment-node-69219" class=" comment single-comment-node child comment--deep-2 " data-comment-id="69219" data-path="/kspeakman/oh-javascript--3404/comments/3oa7" data-comment-author-id="2125" data-content-user-id="2125"> <a name="comment-3oa7" style="position: absolute; top: -8px;"> </a> <div class="comment__inner"> <a href="https://dev.to/guid75" class="shrink-0 crayons-avatar mt-4"> <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2125%2F69324.jpeg" alt="guid75 profile image" loading="lazy" /> </a> <div class="inner-comment comment__details"> <div class="comment__content crayons-card"> <div class="comment__header"> <a href="https://dev.to/guid75" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden"> <span class="js-comment-username">Guid75</span> </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block"> <button id="comment-profile-preview-trigger-69219" aria-controls="comment-profile-preview-content-69219" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Guid75 profile details"> Guid75 </button> <div id="comment-profile-preview-content-69219" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #002a9e; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/guid75" 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%2F2125%2F69324.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5"> Guid75 </span> </a> </div> <div class="print-hidden"> <button name="button" type="button" data-info="{"className":"User","style":"","id":2125,"name":"Guid75"}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Guid75" aria-pressed="false">Follow</button> </div> <div class="user-metadata-details"> <ul class="user-metadata-details-inner"> <li> <div class="key"> Joined </div> <div class="value"> <time datetime="2017-01-19T08:26:09Z" class="date">Jan 19, 2017</time> </div> </li> </ul> </div> </div> </div> </div> <span class="color-base-30 px-2 m:pl-0" role="presentation">•</span> <a href="https://dev.to/kspeakman/oh-javascript--3404#comment-3oa7" class="comment-date crayons-link crayons-link--secondary fs-s"> <time datetime="2018-06-18T05:44:56Z" class=date-short-year> Jun 18 '18 </time> </a> <div class="comment__dropdown" data-tracking-name="comment_dropdown"> <button id="comment-dropdown-trigger-69219" aria-controls="comment-dropdown-69219" aria-expanded="false" class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon " aria-label="Toggle dropdown menu" aria-haspopup="true"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="asjyevq8nny44b0vf8nvuyg3np3nfe5a" class="crayons-icon pointer-events-none"><title id="asjyevq8nny44b0vf8nvuyg3np3nfe5a">Dropdown menu</title> <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path> </svg> </button> <div id="comment-dropdown-69219" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown"> <ul class="m-0"> <li><a href="https://dev.to/kspeakman/oh-javascript--3404#comment-3oa7" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Guid75's comment" data-no-instant>Copy link</a></li> <li class="comment-actions hidden" data-user-id="2125" data-action="settings-button" data-path="https://dev.to/guid75/comment/3oa7/settings" aria-label="Go to Guid75's comment settings"></li> <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="15366" data-user-id="2125"> <button class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment" data-hide-type="hide" data-comment-id="69219" data-comment-url="https://dev.to/guid75/comment/3oa7" aria-label="Hide Guid75's comment"> Hide </button> </li> <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/guid75/comment/3oa7/mod" aria-label="Moderate Guid75's comment"></li> <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/guid75/comment/3oa7" aria-label="Report Guid75's comment as abusive or violating our code of conduct and/or terms and conditions"></li> <li class="current-user-actions"></li> </ul> </div> </div> </div> <div class=" comment__body text-styles text-styles--secondary body "> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html><body> <p>For UTC dates, is <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/UTC">developer.mozilla.org/en-US/docs/W...</a> not a possibility?</p> </body></html> </div> </div> <script> </script> <footer class="comment__footer print-hidden"> <button class="crayons-tooltip__activator crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button" id="button-for-comment-69219" data-comment-id="69219" aria-label="like" data-tracking-name="comment_heart_button"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="abqxlykb365fid9paq5hmn8d4rz1rhj5" class="crayons-icon reaction-icon not-reacted"><title id="abqxlykb365fid9paq5hmn8d4rz1rhj5">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="atfdlkuf9wmffkz4q4p0q2pnfk16xosd" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="atfdlkuf9wmffkz4q4p0q2pnfk16xosd">Like comment: </title> <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path> </svg> <span class="reactions-count">2</span><span class="reactions-label hidden m:inline-block"> likes</span> <span data-testid="tooltip" class="crayons-tooltip__content"> Like </span> </button> <span class="fs-s inline-flex items-center fs-italic color-base-50 pl-1"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a52say0mdfkr891nebxmocds7lnsewls" class="crayons-icon"><title id="a52say0mdfkr891nebxmocds7lnsewls">Thread</title> <path d="M17 13l-5 6-5-6h3.125c0-3.314 2.798-6 6.25-6 .17 0 .34.006.506.02-1.787.904-3.006 2.705-3.006 4.78V13H17z"></path> </svg> Thread </span> </footer> </div> </div> <div id="comment-node-69221" class=" comment single-comment-node child comment--deep-3 " data-comment-id="69221" data-path="/kspeakman/oh-javascript--3404/comments/3oa9" data-comment-author-id="15366" data-content-user-id="15366"> <a name="comment-3oa9" style="position: absolute; top: -8px;"> </a> <div class="comment__inner"> <a href="https://dev.to/kspeakman" class="shrink-0 crayons-avatar mt-4"> <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F15366%2Fc6550569-8654-4c9e-828b-c1dcb9c8a0df.png" alt="kspeakman profile image" loading="lazy" /> </a> <div class="inner-comment comment__details"> <div class="comment__content crayons-card"> <div class="comment__header"> <a href="https://dev.to/kspeakman" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden"> <span class="js-comment-username">Kasey Speakman</span> <span class="crayons-hover-tooltip inline-block spec-op-author -mr-2" data-tooltip="Author"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" class="crayons-icon"> <path d="M12 8.25a6 6 0 110 12 6 6 0 010-12zm0 2.625l-.992 2.01-2.218.322 1.605 1.564-.379 2.21L12 15.937l1.984 1.043-.379-2.209 1.605-1.564-2.218-.323L12 10.875zm.75-6.376l3.75.001v2.25l-1.022.854a7.45 7.45 0 00-2.728-.817V4.5zm-1.5 0v2.288a7.451 7.451 0 00-2.727.816L7.5 6.75V4.5h3.75z"></path> </svg> </span> </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block"> <button id="comment-profile-preview-trigger-69221" aria-controls="comment-profile-preview-content-69221" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Kasey Speakman profile details"> Kasey Speakman </button> <div id="comment-profile-preview-content-69221" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #08304c; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/kspeakman" 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%2F15366%2Fc6550569-8654-4c9e-828b-c1dcb9c8a0df.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5"> Kasey Speakman </span> </a> </div> <div class="print-hidden"> <button name="button" type="button" data-info="{"className":"User","style":"","id":15366,"name":"Kasey Speakman"}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Kasey Speakman" aria-pressed="false">Follow</button> </div> <div class="color-base-70"> collector of ideas. no one of consequence. </div> <div class="user-metadata-details"> <ul class="user-metadata-details-inner"> <li> <div class="key"> Location </div> <div class="value"> Huntsville, AL </div> </li> <li> <div class="key"> Joined </div> <div class="value"> <time datetime="2017-04-05T17:17:09Z" class="date">Apr 5, 2017</time> </div> </li> </ul> </div> </div> </div> <span class="crayons-hover-tooltip inline-block spec-op-author -ml-2" data-tooltip="Author"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" class="crayons-icon"> <path d="M12 8.25a6 6 0 110 12 6 6 0 010-12zm0 2.625l-.992 2.01-2.218.322 1.605 1.564-.379 2.21L12 15.937l1.984 1.043-.379-2.209 1.605-1.564-2.218-.323L12 10.875zm.75-6.376l3.75.001v2.25l-1.022.854a7.45 7.45 0 00-2.728-.817V4.5zm-1.5 0v2.288a7.451 7.451 0 00-2.727.816L7.5 6.75V4.5h3.75z"></path> </svg> </span> </div> <span class="color-base-30 px-2 m:pl-0" role="presentation">•</span> <a href="https://dev.to/kspeakman/oh-javascript--3404#comment-3oa9" class="comment-date crayons-link crayons-link--secondary fs-s"> <time datetime="2018-06-18T06:02:58Z" class=date-short-year> Jun 18 '18 </time> <span class="hidden m:inline-block">• Edited on <time datetime="2018-06-18T16:44:25Z" class="date-no-year">Jun 18</time></span> <span class="m:hidden">• Edited</span> </a> <div class="comment__dropdown" data-tracking-name="comment_dropdown"> <button id="comment-dropdown-trigger-69221" aria-controls="comment-dropdown-69221" aria-expanded="false" class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon " aria-label="Toggle dropdown menu" aria-haspopup="true"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ao0oura59zml7zhz0g6hjifnv4q6uhnx" class="crayons-icon pointer-events-none"><title id="ao0oura59zml7zhz0g6hjifnv4q6uhnx">Dropdown menu</title> <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path> </svg> </button> <div id="comment-dropdown-69221" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown"> <ul class="m-0"> <li><a href="https://dev.to/kspeakman/oh-javascript--3404#comment-3oa9" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Kasey Speakman's comment" data-no-instant>Copy link</a></li> <li class="comment-actions hidden" data-user-id="15366" data-action="settings-button" data-path="https://dev.to/kspeakman/comment/3oa9/settings" aria-label="Go to Kasey Speakman's comment settings"></li> <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="15366" data-user-id="15366"> <button class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment" data-hide-type="hide" data-comment-id="69221" data-comment-url="https://dev.to/kspeakman/comment/3oa9" aria-label="Hide Kasey Speakman's comment"> Hide </button> </li> <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/kspeakman/comment/3oa9/mod" aria-label="Moderate Kasey Speakman's comment"></li> <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/kspeakman/comment/3oa9" aria-label="Report Kasey Speakman's comment as abusive or violating our code of conduct and/or terms and conditions"></li> <li class="current-user-actions"></li> </ul> </div> </div> </div> <div class=" comment__body text-styles text-styles--secondary body "> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html><body> <p>Nope, it does not work. <code>Date.UTC</code> returns unix epoch time (milliseconds since UTC midnight on 1 Jan 1970) as an integer. When you use that to construct a <code>new Date</code> it will still be converted to the local time zone.</p> <div class="highlight"><pre class="highlight javascript"><code><span class="c1">// zero-based months 🙄</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">(</span><span class="nb">Date</span><span class="p">.</span><span class="nx">UTC</span><span class="p">(</span><span class="mi">2018</span><span class="p">,</span> <span class="mi">0</span> <span class="cm">/* Jan */</span><span class="p">,</span> <span class="mi">1</span><span class="p">))</span> <span class="o"><-</span> <span class="nx">Sun</span> <span class="nx">Dec</span> <span class="mi">31</span> <span class="mi">2017</span> <span class="mi">18</span><span class="p">:</span><span class="mi">00</span><span class="p">:</span><span class="mi">00</span> <span class="nx">GMT</span><span class="o">-</span><span class="mi">0600</span> <span class="p">(</span><span class="nx">Central</span> <span class="nx">Standard</span> <span class="nx">Time</span><span class="p">)</span> </code></pre></div> <p>The only reason the linked example prints GMT time zone is because <code>Date.toUTCString()</code> is used. But when using the JS Date object, calculations will be off by a day behind in my local time zone.</p> </body></html> </div> </div> <script> </script> <footer class="comment__footer print-hidden"> <button class="crayons-tooltip__activator crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button" id="button-for-comment-69221" data-comment-id="69221" aria-label="like" data-tracking-name="comment_heart_button"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aeq2kmp683driqcq36j1xfst5swguee9" class="crayons-icon reaction-icon not-reacted"><title id="aeq2kmp683driqcq36j1xfst5swguee9">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="arjmgj3n6x27dyqmzib2ndl60ttvcqxo" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="arjmgj3n6x27dyqmzib2ndl60ttvcqxo">Like comment: </title> <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path> </svg> <span class="reactions-count">3</span><span class="reactions-label hidden m:inline-block"> likes</span> <span data-testid="tooltip" class="crayons-tooltip__content"> Like </span> </button> <a class="actions crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left toggle-reply-form mr-1 inline-flex" href="#/kspeakman/oh-javascript--3404/comments/new/3oa9" data-comment-id="69221" data-path="/kspeakman/oh-javascript--3404/comments/3oa9" data-tracking-name="comment_reply_button" data-testid="reply-button-69221" rel="nofollow"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="acelupeh99h9hhvq0xlr2zh23ifa6rnx" class="crayons-icon reaction-icon not-reacted"><title id="acelupeh99h9hhvq0xlr2zh23ifa6rnx">Comment button</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 m:inline-block">Reply</span> </a> </footer> </div> </div> </div> </div> </details> </div> </details> </div> </details> <details class="comment-wrapper js-comment-wrapper comment-wrapper--deep-0 root " open> <summary aria-label="Toggle this comment (and replies)" data-tracking-name="expand_comment_toggle"> <span class="m:mx-1 inline-block align-middle"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="akt2tqkoma56nd17i70njk00icr5c9sf" class="crayons-icon expanded"><title id="akt2tqkoma56nd17i70njk00icr5c9sf">Collapse</title> <path d="M12 10.677L8 6.935 9 6l3 2.807L15 6l1 .935-4 3.742zm0 4.517L9 18l-1-.935 4-3.742 4 3.742-1 .934-3-2.805z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="aprntlk300q894km64391r3cwe3zhw1z" class="crayons-icon collapsed"><title id="aprntlk300q894km64391r3cwe3zhw1z">Expand</title> <path d="M12 18l-4-3.771 1-.943 3 2.829 3-2.829 1 .943L12 18zm0-10.115l-3 2.829-1-.943L12 6l4 3.771-1 .942-3-2.828z"></path> </svg> </span> <span class="js-collapse-comment-content inline-block align-middle"></span> </summary> <div id="comment-node-69871" class=" comment single-comment-node root comment--deep-0 " data-comment-id="69871" data-path="/kspeakman/oh-javascript--3404/comments/3p99" data-comment-author-id="49972" data-content-user-id="49972"> <a name="comment-3p99" style="position: absolute; top: -8px;"> </a> <div class="comment__inner"> <a href="https://dev.to/squgeim" class="shrink-0 crayons-avatar m:crayons-avatar--l mt-4 m:mt-3"> <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F49972%2Ffe79f37c-a0bb-4b2d-9c02-9aebabbc09e1.JPG" alt="squgeim profile image" loading="lazy" /> </a> <div class="inner-comment comment__details"> <div class="comment__content crayons-card"> <div class="comment__header"> <a href="https://dev.to/squgeim" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden"> <span class="js-comment-username">Shreya Dahal</span> </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block"> <button id="comment-profile-preview-trigger-69871" aria-controls="comment-profile-preview-content-69871" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Shreya Dahal profile details"> Shreya Dahal </button> <div id="comment-profile-preview-content-69871" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #422344; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/squgeim" 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%2F49972%2Ffe79f37c-a0bb-4b2d-9c02-9aebabbc09e1.JPG" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5"> Shreya Dahal </span> </a> </div> <div class="print-hidden"> <button name="button" type="button" data-info="{"className":"User","style":"","id":49972,"name":"Shreya Dahal"}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Shreya Dahal" aria-pressed="false">Follow</button> </div> <div class="color-base-70"> Full-stack Software Engineer. Free Software Enthusiast. Team Lead. (in that order) </div> <div class="user-metadata-details"> <ul class="user-metadata-details-inner"> <li> <div class="key"> Location </div> <div class="value"> Toronto </div> </li> <li> <div class="key"> Education </div> <div class="value"> Computer Engineering </div> </li> <li> <div class="key"> Work </div> <div class="value"> Full Stack Developer </div> </li> <li> <div class="key"> Joined </div> <div class="value"> <time datetime="2017-12-19T03:49:24Z" class="date">Dec 19, 2017</time> </div> </li> </ul> </div> </div> </div> </div> <span class="color-base-30 px-2 m:pl-0" role="presentation">•</span> <a href="https://dev.to/kspeakman/oh-javascript--3404#comment-3p99" class="comment-date crayons-link crayons-link--secondary fs-s"> <time datetime="2018-06-20T16:34:48Z" class=date-short-year> Jun 20 '18 </time> </a> <div class="comment__dropdown" data-tracking-name="comment_dropdown"> <button id="comment-dropdown-trigger-69871" aria-controls="comment-dropdown-69871" aria-expanded="false" class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon " aria-label="Toggle dropdown menu" aria-haspopup="true"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="afld02omrt1blltkwgm8ml8poaklug6s" class="crayons-icon pointer-events-none"><title id="afld02omrt1blltkwgm8ml8poaklug6s">Dropdown menu</title> <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path> </svg> </button> <div id="comment-dropdown-69871" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown"> <ul class="m-0"> <li><a href="https://dev.to/kspeakman/oh-javascript--3404#comment-3p99" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Shreya Dahal's comment" data-no-instant>Copy link</a></li> <li class="comment-actions hidden" data-user-id="49972" data-action="settings-button" data-path="https://dev.to/squgeim/comment/3p99/settings" aria-label="Go to Shreya Dahal's comment settings"></li> <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="15366" data-user-id="49972"> <button class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment" data-hide-type="hide" data-comment-id="69871" data-comment-url="https://dev.to/squgeim/comment/3p99" aria-label="Hide Shreya Dahal's comment"> Hide </button> </li> <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/squgeim/comment/3p99/mod" aria-label="Moderate Shreya Dahal's comment"></li> <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/squgeim/comment/3p99" aria-label="Report Shreya Dahal's comment as abusive or violating our code of conduct and/or terms and conditions"></li> <li class="current-user-actions"></li> </ul> </div> </div> </div> <div class=" comment__body text-styles text-styles--secondary body "> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html><body> <p>The thing is initializing dates with string is very ambiguous and depends heavily on what browser you are using. The only format with any guarantee is IOS 8601.</p> <p>I have a more detailed write up on this, with a lot more caveats: <a href="https://blog.lftechnology.com/date-ing-javascript-6203650b752c">blog.lftechnology.com/date-ing-jav...</a></p> </body></html> </div> </div> <script> </script> <footer class="comment__footer print-hidden"> <button class="crayons-tooltip__activator crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button" id="button-for-comment-69871" data-comment-id="69871" aria-label="like" data-tracking-name="comment_heart_button"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="akwbyfmagoe51xs24yon4j87ifpnhlnt" class="crayons-icon reaction-icon not-reacted"><title id="akwbyfmagoe51xs24yon4j87ifpnhlnt">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ap90lkeujyesfr8hcdbqupc78ejngkfk" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="ap90lkeujyesfr8hcdbqupc78ejngkfk">Like comment: </title> <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path> </svg> <span class="reactions-count">1</span><span class="reactions-label hidden m:inline-block"> like</span> <span data-testid="tooltip" class="crayons-tooltip__content"> Like </span> </button> <a class="actions crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left toggle-reply-form mr-1 inline-flex" href="#/kspeakman/oh-javascript--3404/comments/new/3p99" data-comment-id="69871" data-path="/kspeakman/oh-javascript--3404/comments/3p99" data-tracking-name="comment_reply_button" data-testid="reply-button-69871" rel="nofollow"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a2pokyqpjpn5mrrmes1b1om4cvm6w8f1" class="crayons-icon reaction-icon not-reacted"><title id="a2pokyqpjpn5mrrmes1b1om4cvm6w8f1">Comment button</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 m:inline-block">Reply</span> </a> </footer> </div> </div> <details class="comment-wrapper js-comment-wrapper comment-wrapper--deep-1 child " open> <summary aria-label="Toggle this comment (and replies)" data-tracking-name="expand_comment_toggle"> <span class="mx-0 inline-block align-middle"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ab10gglkt5xrln22edqhdtfm2s0ib1u" class="crayons-icon expanded"><title id="ab10gglkt5xrln22edqhdtfm2s0ib1u">Collapse</title> <path d="M12 10.677L8 6.935 9 6l3 2.807L15 6l1 .935-4 3.742zm0 4.517L9 18l-1-.935 4-3.742 4 3.742-1 .934-3-2.805z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ajqgbz02kcbfbu8tj5g0d6ly0op1lu1" class="crayons-icon collapsed"><title id="ajqgbz02kcbfbu8tj5g0d6ly0op1lu1">Expand</title> <path d="M12 18l-4-3.771 1-.943 3 2.829 3-2.829 1 .943L12 18zm0-10.115l-3 2.829-1-.943L12 6l4 3.771-1 .942-3-2.828z"></path> </svg> </span> <span class="js-collapse-comment-content inline-block align-middle"></span> </summary> <div id="comment-node-69895" class=" comment single-comment-node child comment--deep-1 " data-comment-id="69895" data-path="/kspeakman/oh-javascript--3404/comments/3pa7" data-comment-author-id="15366" data-content-user-id="15366"> <a name="comment-3pa7" style="position: absolute; top: -8px;"> </a> <div class="comment__inner"> <a href="https://dev.to/kspeakman" class="shrink-0 crayons-avatar mt-4"> <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F15366%2Fc6550569-8654-4c9e-828b-c1dcb9c8a0df.png" alt="kspeakman profile image" loading="lazy" /> </a> <div class="inner-comment comment__details"> <div class="comment__content crayons-card"> <div class="comment__header"> <a href="https://dev.to/kspeakman" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden"> <span class="js-comment-username">Kasey Speakman</span> <span class="crayons-hover-tooltip inline-block spec-op-author -mr-2" data-tooltip="Author"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" class="crayons-icon"> <path d="M12 8.25a6 6 0 110 12 6 6 0 010-12zm0 2.625l-.992 2.01-2.218.322 1.605 1.564-.379 2.21L12 15.937l1.984 1.043-.379-2.209 1.605-1.564-2.218-.323L12 10.875zm.75-6.376l3.75.001v2.25l-1.022.854a7.45 7.45 0 00-2.728-.817V4.5zm-1.5 0v2.288a7.451 7.451 0 00-2.727.816L7.5 6.75V4.5h3.75z"></path> </svg> </span> </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block"> <button id="comment-profile-preview-trigger-69895" aria-controls="comment-profile-preview-content-69895" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Kasey Speakman profile details"> Kasey Speakman </button> <div id="comment-profile-preview-content-69895" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #08304c; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/kspeakman" 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%2F15366%2Fc6550569-8654-4c9e-828b-c1dcb9c8a0df.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5"> Kasey Speakman </span> </a> </div> <div class="print-hidden"> <button name="button" type="button" data-info="{"className":"User","style":"","id":15366,"name":"Kasey Speakman"}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Kasey Speakman" aria-pressed="false">Follow</button> </div> <div class="color-base-70"> collector of ideas. no one of consequence. </div> <div class="user-metadata-details"> <ul class="user-metadata-details-inner"> <li> <div class="key"> Location </div> <div class="value"> Huntsville, AL </div> </li> <li> <div class="key"> Joined </div> <div class="value"> <time datetime="2017-04-05T17:17:09Z" class="date">Apr 5, 2017</time> </div> </li> </ul> </div> </div> </div> <span class="crayons-hover-tooltip inline-block spec-op-author -ml-2" data-tooltip="Author"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" class="crayons-icon"> <path d="M12 8.25a6 6 0 110 12 6 6 0 010-12zm0 2.625l-.992 2.01-2.218.322 1.605 1.564-.379 2.21L12 15.937l1.984 1.043-.379-2.209 1.605-1.564-2.218-.323L12 10.875zm.75-6.376l3.75.001v2.25l-1.022.854a7.45 7.45 0 00-2.728-.817V4.5zm-1.5 0v2.288a7.451 7.451 0 00-2.727.816L7.5 6.75V4.5h3.75z"></path> </svg> </span> </div> <span class="color-base-30 px-2 m:pl-0" role="presentation">•</span> <a href="https://dev.to/kspeakman/oh-javascript--3404#comment-3pa7" class="comment-date crayons-link crayons-link--secondary fs-s"> <time datetime="2018-06-20T17:30:32Z" class=date-short-year> Jun 20 '18 </time> </a> <div class="comment__dropdown" data-tracking-name="comment_dropdown"> <button id="comment-dropdown-trigger-69895" aria-controls="comment-dropdown-69895" aria-expanded="false" class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon " aria-label="Toggle dropdown menu" aria-haspopup="true"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="antgw8gd73ynfnaccks0wlku6wnzfpxu" class="crayons-icon pointer-events-none"><title id="antgw8gd73ynfnaccks0wlku6wnzfpxu">Dropdown menu</title> <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path> </svg> </button> <div id="comment-dropdown-69895" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown"> <ul class="m-0"> <li><a href="https://dev.to/kspeakman/oh-javascript--3404#comment-3pa7" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Kasey Speakman's comment" data-no-instant>Copy link</a></li> <li class="comment-actions hidden" data-user-id="15366" data-action="settings-button" data-path="https://dev.to/kspeakman/comment/3pa7/settings" aria-label="Go to Kasey Speakman's comment settings"></li> <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="15366" data-user-id="15366"> <button class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment" data-hide-type="hide" data-comment-id="69895" data-comment-url="https://dev.to/kspeakman/comment/3pa7" aria-label="Hide Kasey Speakman's comment"> Hide </button> </li> <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/kspeakman/comment/3pa7/mod" aria-label="Moderate Kasey Speakman's comment"></li> <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/kspeakman/comment/3pa7" aria-label="Report Kasey Speakman's comment as abusive or violating our code of conduct and/or terms and conditions"></li> <li class="current-user-actions"></li> </ul> </div> </div> </div> <div class=" comment__body text-styles text-styles--secondary body "> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html><body> <p>Problem is that ISO 8601 does not work well for dates. If I save to local storage in that format, then the user closes their laptop and hops on an airplane going from London (UTC+1) to New York (UTC-4 currently). When they arrive and open the app again, I reload the ISO dates from local storage they will all be off by one day. This leads me to one of two conclusions. Abandon JS Date. OR The only safe way to initialize a date in local time across browsers is using the integer-based constructor with that 0-based month nonsense.</p> </body></html> </div> </div> <script> </script> <footer class="comment__footer print-hidden"> <button class="crayons-tooltip__activator crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button" id="button-for-comment-69895" data-comment-id="69895" aria-label="like" data-tracking-name="comment_heart_button"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a3h9xbyl3jkc6up77hevxpz9jqpo3ba5" class="crayons-icon reaction-icon not-reacted"><title id="a3h9xbyl3jkc6up77hevxpz9jqpo3ba5">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="arl3q25g8f8b30o93q53xkh4q28xamv2" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="arl3q25g8f8b30o93q53xkh4q28xamv2">Like comment: </title> <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path> </svg> <span class="reactions-count">1</span><span class="reactions-label hidden m:inline-block"> like</span> <span data-testid="tooltip" class="crayons-tooltip__content"> Like </span> </button> <a class="actions crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left toggle-reply-form mr-1 inline-flex" href="#/kspeakman/oh-javascript--3404/comments/new/3pa7" data-comment-id="69895" data-path="/kspeakman/oh-javascript--3404/comments/3pa7" data-tracking-name="comment_reply_button" data-testid="reply-button-69895" rel="nofollow"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aprmlj4l1l9r0iqs81m0u4s630k2un0r" class="crayons-icon reaction-icon not-reacted"><title id="aprmlj4l1l9r0iqs81m0u4s630k2un0r">Comment button</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 m:inline-block">Reply</span> </a> </footer> </div> </div> <details class="comment-wrapper js-comment-wrapper comment-wrapper--deep-2 child " open> <summary aria-label="Toggle this comment (and replies)" data-tracking-name="expand_comment_toggle"> <span class="mx-0 inline-block align-middle"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="aolhi9c9e4b5k478t2qv81wprxszahn9" class="crayons-icon expanded"><title id="aolhi9c9e4b5k478t2qv81wprxszahn9">Collapse</title> <path d="M12 10.677L8 6.935 9 6l3 2.807L15 6l1 .935-4 3.742zm0 4.517L9 18l-1-.935 4-3.742 4 3.742-1 .934-3-2.805z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="adgjg6vxbsnknx7oqzmp33fgjgpfu9br" class="crayons-icon collapsed"><title id="adgjg6vxbsnknx7oqzmp33fgjgpfu9br">Expand</title> <path d="M12 18l-4-3.771 1-.943 3 2.829 3-2.829 1 .943L12 18zm0-10.115l-3 2.829-1-.943L12 6l4 3.771-1 .942-3-2.828z"></path> </svg> </span> <span class="js-collapse-comment-content inline-block align-middle"></span> </summary> <div id="comment-node-69899" class=" comment single-comment-node child comment--deep-2 " data-comment-id="69899" data-path="/kspeakman/oh-javascript--3404/comments/3pab" data-comment-author-id="49972" data-content-user-id="49972"> <a name="comment-3pab" style="position: absolute; top: -8px;"> </a> <div class="comment__inner"> <a href="https://dev.to/squgeim" class="shrink-0 crayons-avatar mt-4"> <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F49972%2Ffe79f37c-a0bb-4b2d-9c02-9aebabbc09e1.JPG" alt="squgeim profile image" loading="lazy" /> </a> <div class="inner-comment comment__details"> <div class="comment__content crayons-card"> <div class="comment__header"> <a href="https://dev.to/squgeim" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden"> <span class="js-comment-username">Shreya Dahal</span> </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block"> <button id="comment-profile-preview-trigger-69899" aria-controls="comment-profile-preview-content-69899" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Shreya Dahal profile details"> Shreya Dahal </button> <div id="comment-profile-preview-content-69899" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #422344; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/squgeim" 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%2F49972%2Ffe79f37c-a0bb-4b2d-9c02-9aebabbc09e1.JPG" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5"> Shreya Dahal </span> </a> </div> <div class="print-hidden"> <button name="button" type="button" data-info="{"className":"User","style":"","id":49972,"name":"Shreya Dahal"}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Shreya Dahal" aria-pressed="false">Follow</button> </div> <div class="color-base-70"> Full-stack Software Engineer. Free Software Enthusiast. Team Lead. (in that order) </div> <div class="user-metadata-details"> <ul class="user-metadata-details-inner"> <li> <div class="key"> Location </div> <div class="value"> Toronto </div> </li> <li> <div class="key"> Education </div> <div class="value"> Computer Engineering </div> </li> <li> <div class="key"> Work </div> <div class="value"> Full Stack Developer </div> </li> <li> <div class="key"> Joined </div> <div class="value"> <time datetime="2017-12-19T03:49:24Z" class="date">Dec 19, 2017</time> </div> </li> </ul> </div> </div> </div> </div> <span class="color-base-30 px-2 m:pl-0" role="presentation">•</span> <a href="https://dev.to/kspeakman/oh-javascript--3404#comment-3pab" class="comment-date crayons-link crayons-link--secondary fs-s"> <time datetime="2018-06-20T17:41:26Z" class=date-short-year> Jun 20 '18 </time> </a> <div class="comment__dropdown" data-tracking-name="comment_dropdown"> <button id="comment-dropdown-trigger-69899" aria-controls="comment-dropdown-69899" aria-expanded="false" class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon " aria-label="Toggle dropdown menu" aria-haspopup="true"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a1juwe61ws3rskf3lhq0hu7nm2532dfj" class="crayons-icon pointer-events-none"><title id="a1juwe61ws3rskf3lhq0hu7nm2532dfj">Dropdown menu</title> <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path> </svg> </button> <div id="comment-dropdown-69899" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown"> <ul class="m-0"> <li><a href="https://dev.to/kspeakman/oh-javascript--3404#comment-3pab" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Shreya Dahal's comment" data-no-instant>Copy link</a></li> <li class="comment-actions hidden" data-user-id="49972" data-action="settings-button" data-path="https://dev.to/squgeim/comment/3pab/settings" aria-label="Go to Shreya Dahal's comment settings"></li> <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="15366" data-user-id="49972"> <button class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment" data-hide-type="hide" data-comment-id="69899" data-comment-url="https://dev.to/squgeim/comment/3pab" aria-label="Hide Shreya Dahal's comment"> Hide </button> </li> <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/squgeim/comment/3pab/mod" aria-label="Moderate Shreya Dahal's comment"></li> <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/squgeim/comment/3pab" aria-label="Report Shreya Dahal's comment as abusive or violating our code of conduct and/or terms and conditions"></li> <li class="current-user-actions"></li> </ul> </div> </div> </div> <div class=" comment__body text-styles text-styles--secondary body "> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html><body> <p>That is true. This was a major issue for us in the backend, because even if we stored a date value in the database as just date, it would come to javascript as a date object, and go to the frontend as ISO 8601 string.</p> <p>We had to configure the postgres driver for node to not automatically parse dates and make sure we only initialize dates in the frontend with number arguments.</p> </body></html> </div> </div> <script> </script> <footer class="comment__footer print-hidden"> <button class="crayons-tooltip__activator crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button" id="button-for-comment-69899" data-comment-id="69899" aria-label="like" data-tracking-name="comment_heart_button"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a9q7mwgdbv4fd7lfolj7dvvt6jdkkhxg" class="crayons-icon reaction-icon not-reacted"><title id="a9q7mwgdbv4fd7lfolj7dvvt6jdkkhxg">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ac9mtiojwakr8sdo0wuoa6yvg5rqyfd1" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="ac9mtiojwakr8sdo0wuoa6yvg5rqyfd1">Like comment: </title> <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path> </svg> <span class="reactions-count">2</span><span class="reactions-label hidden m:inline-block"> likes</span> <span data-testid="tooltip" class="crayons-tooltip__content"> Like </span> </button> <a class="actions crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left toggle-reply-form mr-1 inline-flex" href="#/kspeakman/oh-javascript--3404/comments/new/3pab" data-comment-id="69899" data-path="/kspeakman/oh-javascript--3404/comments/3pab" data-tracking-name="comment_reply_button" data-testid="reply-button-69899" rel="nofollow"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ah9w1kn1x0125rq6g0enxcye2cck68h9" class="crayons-icon reaction-icon not-reacted"><title id="ah9w1kn1x0125rq6g0enxcye2cck68h9">Comment button</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 m:inline-block">Reply</span> </a> </footer> </div> </div> </div> </details> </div> </details> </div> </details> <details class="comment-wrapper js-comment-wrapper comment-wrapper--deep-0 root " open> <summary aria-label="Toggle this comment (and replies)" data-tracking-name="expand_comment_toggle"> <span class="m:mx-1 inline-block align-middle"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ap4uee6dmvuspg2qctgathyrl1ajh213" class="crayons-icon expanded"><title id="ap4uee6dmvuspg2qctgathyrl1ajh213">Collapse</title> <path d="M12 10.677L8 6.935 9 6l3 2.807L15 6l1 .935-4 3.742zm0 4.517L9 18l-1-.935 4-3.742 4 3.742-1 .934-3-2.805z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="aapemxxewv5cgkr01rr5t3ihzyiizx6s" class="crayons-icon collapsed"><title id="aapemxxewv5cgkr01rr5t3ihzyiizx6s">Expand</title> <path d="M12 18l-4-3.771 1-.943 3 2.829 3-2.829 1 .943L12 18zm0-10.115l-3 2.829-1-.943L12 6l4 3.771-1 .942-3-2.828z"></path> </svg> </span> <span class="js-collapse-comment-content inline-block align-middle"></span> </summary> <div id="comment-node-74310" class=" comment single-comment-node root comment--deep-0 " data-comment-id="74310" data-path="/kspeakman/oh-javascript--3404/comments/45o2" data-comment-author-id="37417" data-content-user-id="37417"> <a name="comment-45o2" style="position: absolute; top: -8px;"> </a> <div class="comment__inner"> <a href="https://dev.to/yanlipnican" class="shrink-0 crayons-avatar m:crayons-avatar--l mt-4 m:mt-3"> <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F37417%2Fb619b8bb-8227-4ca9-95c9-79e5d20d0637.jpeg" alt="yanlipnican profile image" loading="lazy" /> </a> <div class="inner-comment comment__details"> <div class="comment__content crayons-card"> <div class="comment__header"> <a href="https://dev.to/yanlipnican" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden"> <span class="js-comment-username">Jan Lipničan</span> </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block"> <button id="comment-profile-preview-trigger-74310" aria-controls="comment-profile-preview-content-74310" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Jan Lipničan profile details"> Jan Lipničan </button> <div id="comment-profile-preview-content-74310" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #002a9e; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/yanlipnican" 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%2F37417%2Fb619b8bb-8227-4ca9-95c9-79e5d20d0637.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5"> Jan Lipničan </span> </a> </div> <div class="print-hidden"> <button name="button" type="button" data-info="{"className":"User","style":"","id":37417,"name":"Jan Lipničan"}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Jan Lipničan" aria-pressed="false">Follow</button> </div> <div class="user-metadata-details"> <ul class="user-metadata-details-inner"> <li> <div class="key"> Joined </div> <div class="value"> <time datetime="2017-10-16T08:02:27Z" class="date">Oct 16, 2017</time> </div> </li> </ul> </div> </div> </div> </div> <span class="color-base-30 px-2 m:pl-0" role="presentation">•</span> <a href="https://dev.to/kspeakman/oh-javascript--3404#comment-45o2" class="comment-date crayons-link crayons-link--secondary fs-s"> <time datetime="2018-07-09T10:34:55Z" class=date-short-year> Jul 9 '18 </time> </a> <div class="comment__dropdown" data-tracking-name="comment_dropdown"> <button id="comment-dropdown-trigger-74310" aria-controls="comment-dropdown-74310" aria-expanded="false" class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon " aria-label="Toggle dropdown menu" aria-haspopup="true"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="akfrq3t3xsfom90dwjtjky3lyqa8clrz" class="crayons-icon pointer-events-none"><title id="akfrq3t3xsfom90dwjtjky3lyqa8clrz">Dropdown menu</title> <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path> </svg> </button> <div id="comment-dropdown-74310" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown"> <ul class="m-0"> <li><a href="https://dev.to/kspeakman/oh-javascript--3404#comment-45o2" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Jan Lipničan's comment" data-no-instant>Copy link</a></li> <li class="comment-actions hidden" data-user-id="37417" data-action="settings-button" data-path="https://dev.to/yanlipnican/comment/45o2/settings" aria-label="Go to Jan Lipničan's comment settings"></li> <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="15366" data-user-id="37417"> <button class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment" data-hide-type="hide" data-comment-id="74310" data-comment-url="https://dev.to/yanlipnican/comment/45o2" aria-label="Hide Jan Lipničan's comment"> Hide </button> </li> <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/yanlipnican/comment/45o2/mod" aria-label="Moderate Jan Lipničan's comment"></li> <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/yanlipnican/comment/45o2" aria-label="Report Jan Lipničan's comment as abusive or violating our code of conduct and/or terms and conditions"></li> <li class="current-user-actions"></li> </ul> </div> </div> </div> <div class=" comment__body text-styles text-styles--secondary body "> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html><body> <p>Just don't use Date. Use dayjs or momentjs. Preferably dayjs becouse momentjs is not immutable.</p> </body></html> </div> </div> <script> </script> <footer class="comment__footer print-hidden"> <button class="crayons-tooltip__activator crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button" id="button-for-comment-74310" data-comment-id="74310" aria-label="like" data-tracking-name="comment_heart_button"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a90tf8396lda400zlfrtgw2psb08w2af" class="crayons-icon reaction-icon not-reacted"><title id="a90tf8396lda400zlfrtgw2psb08w2af">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="acgx3uwii7irbx0502395amikujn9e2g" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="acgx3uwii7irbx0502395amikujn9e2g">Like comment: </title> <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path> </svg> <span class="reactions-count">2</span><span class="reactions-label hidden m:inline-block"> likes</span> <span data-testid="tooltip" class="crayons-tooltip__content"> Like </span> </button> <a class="actions crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left toggle-reply-form mr-1 inline-flex" href="#/kspeakman/oh-javascript--3404/comments/new/45o2" data-comment-id="74310" data-path="/kspeakman/oh-javascript--3404/comments/45o2" data-tracking-name="comment_reply_button" data-testid="reply-button-74310" rel="nofollow"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="atkxjqk810s9cfbvwlbskhdxmmcmfwfz" class="crayons-icon reaction-icon not-reacted"><title id="atkxjqk810s9cfbvwlbskhdxmmcmfwfz">Comment button</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 m:inline-block">Reply</span> </a> </footer> </div> </div> </div> </details> <details class="comment-wrapper js-comment-wrapper comment-wrapper--deep-0 root " open> <summary aria-label="Toggle this comment (and replies)" data-tracking-name="expand_comment_toggle"> <span class="m:mx-1 inline-block align-middle"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="atmyv6y4gi3k50x0z7u9ucilre1ngwb6" class="crayons-icon expanded"><title id="atmyv6y4gi3k50x0z7u9ucilre1ngwb6">Collapse</title> <path d="M12 10.677L8 6.935 9 6l3 2.807L15 6l1 .935-4 3.742zm0 4.517L9 18l-1-.935 4-3.742 4 3.742-1 .934-3-2.805z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="afj2namekjtu4ab977sxwl4fngugig1u" class="crayons-icon collapsed"><title id="afj2namekjtu4ab977sxwl4fngugig1u">Expand</title> <path d="M12 18l-4-3.771 1-.943 3 2.829 3-2.829 1 .943L12 18zm0-10.115l-3 2.829-1-.943L12 6l4 3.771-1 .942-3-2.828z"></path> </svg> </span> <span class="js-collapse-comment-content inline-block align-middle"></span> </summary> <div id="comment-node-75835" class=" comment single-comment-node root comment--deep-0 " data-comment-id="75835" data-path="/kspeakman/oh-javascript--3404/comments/484j" data-comment-author-id="84678" data-content-user-id="84678"> <a name="comment-484j" style="position: absolute; top: -8px;"> </a> <div class="comment__inner"> <a href="https://dev.to/gsmoffln" class="shrink-0 crayons-avatar m:crayons-avatar--l mt-4 m:mt-3"> <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F84678%2F08480bd0-a548-406c-bb19-34c4802d6b43.png" alt="gsmoffln profile image" loading="lazy" /> </a> <div class="inner-comment comment__details"> <div class="comment__content crayons-card"> <div class="comment__header"> <a href="https://dev.to/gsmoffln" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden"> <span class="js-comment-username">gsmoffln</span> </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block"> <button id="comment-profile-preview-trigger-75835" aria-controls="comment-profile-preview-content-75835" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="gsmoffln profile details"> gsmoffln </button> <div id="comment-profile-preview-content-75835" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #e0e0e0; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/gsmoffln" 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%2F84678%2F08480bd0-a548-406c-bb19-34c4802d6b43.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5"> gsmoffln </span> </a> </div> <div class="print-hidden"> <button name="button" type="button" data-info="{"className":"User","style":"","id":84678,"name":"gsmoffln"}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: gsmoffln" aria-pressed="false">Follow</button> </div> <div class="user-metadata-details"> <ul class="user-metadata-details-inner"> <li> <div class="key"> Joined </div> <div class="value"> <time datetime="2018-07-15T02:27:29Z" class="date">Jul 15, 2018</time> </div> </li> </ul> </div> </div> </div> </div> <span class="color-base-30 px-2 m:pl-0" role="presentation">•</span> <a href="https://dev.to/kspeakman/oh-javascript--3404#comment-484j" class="comment-date crayons-link crayons-link--secondary fs-s"> <time datetime="2018-07-15T02:32:40Z" class=date-short-year> Jul 15 '18 </time> <span class="hidden m:inline-block">• Edited on <time datetime="2018-07-15T02:36:50Z" class="date-no-year">Jul 15</time></span> <span class="m:hidden">• Edited</span> </a> <div class="comment__dropdown" data-tracking-name="comment_dropdown"> <button id="comment-dropdown-trigger-75835" aria-controls="comment-dropdown-75835" aria-expanded="false" class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon " aria-label="Toggle dropdown menu" aria-haspopup="true"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="at2d782tkho5acptd0lmz9xvz9q6ko18" class="crayons-icon pointer-events-none"><title id="at2d782tkho5acptd0lmz9xvz9q6ko18">Dropdown menu</title> <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path> </svg> </button> <div id="comment-dropdown-75835" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown"> <ul class="m-0"> <li><a href="https://dev.to/kspeakman/oh-javascript--3404#comment-484j" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to gsmoffln's comment" data-no-instant>Copy link</a></li> <li class="comment-actions hidden" data-user-id="84678" data-action="settings-button" data-path="https://dev.to/gsmoffln/comment/484j/settings" aria-label="Go to gsmoffln's comment settings"></li> <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="15366" data-user-id="84678"> <button class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment" data-hide-type="hide" data-comment-id="75835" data-comment-url="https://dev.to/gsmoffln/comment/484j" aria-label="Hide gsmoffln's comment"> Hide </button> </li> <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/gsmoffln/comment/484j/mod" aria-label="Moderate gsmoffln's comment"></li> <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/gsmoffln/comment/484j" aria-label="Report gsmoffln's comment as abusive or violating our code of conduct and/or terms and conditions"></li> <li class="current-user-actions"></li> </ul> </div> </div> </div> <div class=" comment__body text-styles text-styles--secondary body "> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html><body> <p>Why not read the spec at first?<br> YES we run over idiots over line all the time.</p> </body></html> </div> </div> <script> </script> <footer class="comment__footer print-hidden"> <button class="crayons-tooltip__activator crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button" id="button-for-comment-75835" data-comment-id="75835" aria-label="like" data-tracking-name="comment_heart_button"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a7halyw2nt5ihfzxnv4uey2o399p2n0e" class="crayons-icon reaction-icon not-reacted"><title id="a7halyw2nt5ihfzxnv4uey2o399p2n0e">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="an9lhh0w4y7h64vdg8sqxfegn9fkqkzk" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="an9lhh0w4y7h64vdg8sqxfegn9fkqkzk">Like comment: </title> <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path> </svg> <span class="reactions-count">2</span><span class="reactions-label hidden m:inline-block"> likes</span> <span data-testid="tooltip" class="crayons-tooltip__content"> Like </span> </button> <a class="actions crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left toggle-reply-form mr-1 inline-flex" href="#/kspeakman/oh-javascript--3404/comments/new/484j" data-comment-id="75835" data-path="/kspeakman/oh-javascript--3404/comments/484j" data-tracking-name="comment_reply_button" data-testid="reply-button-75835" rel="nofollow"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a1kg9dsmjhu0ht3jbnluhp5fwhdq5n9r" class="crayons-icon reaction-icon not-reacted"><title id="a1kg9dsmjhu0ht3jbnluhp5fwhdq5n9r">Comment button</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 m:inline-block">Reply</span> </a> </footer> </div> </div> <details class="comment-wrapper js-comment-wrapper comment-wrapper--deep-1 child " open> <summary aria-label="Toggle this comment (and replies)" data-tracking-name="expand_comment_toggle"> <span class="mx-0 inline-block align-middle"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="an7v81zens3a14s76kojqy9t7gcir8p6" class="crayons-icon expanded"><title id="an7v81zens3a14s76kojqy9t7gcir8p6">Collapse</title> <path d="M12 10.677L8 6.935 9 6l3 2.807L15 6l1 .935-4 3.742zm0 4.517L9 18l-1-.935 4-3.742 4 3.742-1 .934-3-2.805z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a9ncidqng2khwjeac3600ebvraxyjko5" class="crayons-icon collapsed"><title id="a9ncidqng2khwjeac3600ebvraxyjko5">Expand</title> <path d="M12 18l-4-3.771 1-.943 3 2.829 3-2.829 1 .943L12 18zm0-10.115l-3 2.829-1-.943L12 6l4 3.771-1 .942-3-2.828z"></path> </svg> </span> <span class="js-collapse-comment-content inline-block align-middle"></span> </summary> <div id="comment-node-75837" class=" comment single-comment-node child comment--deep-1 " data-comment-id="75837" data-path="/kspeakman/oh-javascript--3404/comments/484l" data-comment-author-id="15366" data-content-user-id="15366"> <a name="comment-484l" style="position: absolute; top: -8px;"> </a> <div class="comment__inner"> <a href="https://dev.to/kspeakman" class="shrink-0 crayons-avatar mt-4"> <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F15366%2Fc6550569-8654-4c9e-828b-c1dcb9c8a0df.png" alt="kspeakman profile image" loading="lazy" /> </a> <div class="inner-comment comment__details"> <div class="comment__content crayons-card"> <div class="comment__header"> <a href="https://dev.to/kspeakman" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden"> <span class="js-comment-username">Kasey Speakman</span> <span class="crayons-hover-tooltip inline-block spec-op-author -mr-2" data-tooltip="Author"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" class="crayons-icon"> <path d="M12 8.25a6 6 0 110 12 6 6 0 010-12zm0 2.625l-.992 2.01-2.218.322 1.605 1.564-.379 2.21L12 15.937l1.984 1.043-.379-2.209 1.605-1.564-2.218-.323L12 10.875zm.75-6.376l3.75.001v2.25l-1.022.854a7.45 7.45 0 00-2.728-.817V4.5zm-1.5 0v2.288a7.451 7.451 0 00-2.727.816L7.5 6.75V4.5h3.75z"></path> </svg> </span> </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block"> <button id="comment-profile-preview-trigger-75837" aria-controls="comment-profile-preview-content-75837" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Kasey Speakman profile details"> Kasey Speakman </button> <div id="comment-profile-preview-content-75837" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #08304c; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/kspeakman" 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%2F15366%2Fc6550569-8654-4c9e-828b-c1dcb9c8a0df.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5"> Kasey Speakman </span> </a> </div> <div class="print-hidden"> <button name="button" type="button" data-info="{"className":"User","style":"","id":15366,"name":"Kasey Speakman"}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Kasey Speakman" aria-pressed="false">Follow</button> </div> <div class="color-base-70"> collector of ideas. no one of consequence. </div> <div class="user-metadata-details"> <ul class="user-metadata-details-inner"> <li> <div class="key"> Location </div> <div class="value"> Huntsville, AL </div> </li> <li> <div class="key"> Joined </div> <div class="value"> <time datetime="2017-04-05T17:17:09Z" class="date">Apr 5, 2017</time> </div> </li> </ul> </div> </div> </div> <span class="crayons-hover-tooltip inline-block spec-op-author -ml-2" data-tooltip="Author"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" class="crayons-icon"> <path d="M12 8.25a6 6 0 110 12 6 6 0 010-12zm0 2.625l-.992 2.01-2.218.322 1.605 1.564-.379 2.21L12 15.937l1.984 1.043-.379-2.209 1.605-1.564-2.218-.323L12 10.875zm.75-6.376l3.75.001v2.25l-1.022.854a7.45 7.45 0 00-2.728-.817V4.5zm-1.5 0v2.288a7.451 7.451 0 00-2.727.816L7.5 6.75V4.5h3.75z"></path> </svg> </span> </div> <span class="color-base-30 px-2 m:pl-0" role="presentation">•</span> <a href="https://dev.to/kspeakman/oh-javascript--3404#comment-484l" class="comment-date crayons-link crayons-link--secondary fs-s"> <time datetime="2018-07-15T02:53:18Z" class=date-short-year> Jul 15 '18 </time> </a> <div class="comment__dropdown" data-tracking-name="comment_dropdown"> <button id="comment-dropdown-trigger-75837" aria-controls="comment-dropdown-75837" aria-expanded="false" class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon " aria-label="Toggle dropdown menu" aria-haspopup="true"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="aa3e50bk84tblxqzyhuo7yvr693iee9p" class="crayons-icon pointer-events-none"><title id="aa3e50bk84tblxqzyhuo7yvr693iee9p">Dropdown menu</title> <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path> </svg> </button> <div id="comment-dropdown-75837" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown"> <ul class="m-0"> <li><a href="https://dev.to/kspeakman/oh-javascript--3404#comment-484l" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Kasey Speakman's comment" data-no-instant>Copy link</a></li> <li class="comment-actions hidden" data-user-id="15366" data-action="settings-button" data-path="https://dev.to/kspeakman/comment/484l/settings" aria-label="Go to Kasey Speakman's comment settings"></li> <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="15366" data-user-id="15366"> <button class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment" data-hide-type="hide" data-comment-id="75837" data-comment-url="https://dev.to/kspeakman/comment/484l" aria-label="Hide Kasey Speakman's comment"> Hide </button> </li> <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/kspeakman/comment/484l/mod" aria-label="Moderate Kasey Speakman's comment"></li> <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/kspeakman/comment/484l" aria-label="Report Kasey Speakman's comment as abusive or violating our code of conduct and/or terms and conditions"></li> <li class="current-user-actions"></li> </ul> </div> </div> </div> <div class=" comment__body text-styles text-styles--secondary body "> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html><body> <p>Seems like you are in a bad mood. Sorry for that.</p> </body></html> </div> </div> <script> </script> <footer class="comment__footer print-hidden"> <button class="crayons-tooltip__activator crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button" id="button-for-comment-75837" data-comment-id="75837" aria-label="like" data-tracking-name="comment_heart_button"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aeekfojilmdx2g2l6sxb511h8nhvwq6b" class="crayons-icon reaction-icon not-reacted"><title id="aeekfojilmdx2g2l6sxb511h8nhvwq6b">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a7lurtyxmt84eai0yhb7mqw8jv1z8e06" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="a7lurtyxmt84eai0yhb7mqw8jv1z8e06">Like comment: </title> <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path> </svg> <span class="reactions-count">1</span><span class="reactions-label hidden m:inline-block"> like</span> <span data-testid="tooltip" class="crayons-tooltip__content"> Like </span> </button> <a class="actions crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left toggle-reply-form mr-1 inline-flex" href="#/kspeakman/oh-javascript--3404/comments/new/484l" data-comment-id="75837" data-path="/kspeakman/oh-javascript--3404/comments/484l" data-tracking-name="comment_reply_button" data-testid="reply-button-75837" rel="nofollow"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="afpkpcdiq9pmk13asiplilnjm5lzw76y" class="crayons-icon reaction-icon not-reacted"><title id="afpkpcdiq9pmk13asiplilnjm5lzw76y">Comment button</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 m:inline-block">Reply</span> </a> </footer> </div> </div> </div> </details> </div> </details> <details class="comment-wrapper js-comment-wrapper comment-wrapper--deep-0 root " open> <summary aria-label="Toggle this comment (and replies)" data-tracking-name="expand_comment_toggle"> <span class="m:mx-1 inline-block align-middle"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="at44vyh2tu98aicttx1x977fe971crj1" class="crayons-icon expanded"><title id="at44vyh2tu98aicttx1x977fe971crj1">Collapse</title> <path d="M12 10.677L8 6.935 9 6l3 2.807L15 6l1 .935-4 3.742zm0 4.517L9 18l-1-.935 4-3.742 4 3.742-1 .934-3-2.805z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a88xsksioxubmvx8ucuwq78rxo9j7f0o" class="crayons-icon collapsed"><title id="a88xsksioxubmvx8ucuwq78rxo9j7f0o">Expand</title> <path d="M12 18l-4-3.771 1-.943 3 2.829 3-2.829 1 .943L12 18zm0-10.115l-3 2.829-1-.943L12 6l4 3.771-1 .942-3-2.828z"></path> </svg> </span> <span class="js-collapse-comment-content inline-block align-middle"></span> </summary> <div id="comment-node-75836" class=" comment single-comment-node root comment--deep-0 " data-comment-id="75836" data-path="/kspeakman/oh-javascript--3404/comments/484k" data-comment-author-id="84678" data-content-user-id="84678"> <a name="comment-484k" style="position: absolute; top: -8px;"> </a> <div class="comment__inner"> <a href="https://dev.to/gsmoffln" class="shrink-0 crayons-avatar m:crayons-avatar--l mt-4 m:mt-3"> <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F84678%2F08480bd0-a548-406c-bb19-34c4802d6b43.png" alt="gsmoffln profile image" loading="lazy" /> </a> <div class="inner-comment comment__details"> <div class="comment__content crayons-card"> <div class="comment__header"> <a href="https://dev.to/gsmoffln" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden"> <span class="js-comment-username">gsmoffln</span> </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block"> <button id="comment-profile-preview-trigger-75836" aria-controls="comment-profile-preview-content-75836" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="gsmoffln profile details"> gsmoffln </button> <div id="comment-profile-preview-content-75836" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #e0e0e0; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/gsmoffln" 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%2F84678%2F08480bd0-a548-406c-bb19-34c4802d6b43.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5"> gsmoffln </span> </a> </div> <div class="print-hidden"> <button name="button" type="button" data-info="{"className":"User","style":"","id":84678,"name":"gsmoffln"}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: gsmoffln" aria-pressed="false">Follow</button> </div> <div class="user-metadata-details"> <ul class="user-metadata-details-inner"> <li> <div class="key"> Joined </div> <div class="value"> <time datetime="2018-07-15T02:27:29Z" class="date">Jul 15, 2018</time> </div> </li> </ul> </div> </div> </div> </div> <span class="color-base-30 px-2 m:pl-0" role="presentation">•</span> <a href="https://dev.to/kspeakman/oh-javascript--3404#comment-484k" class="comment-date crayons-link crayons-link--secondary fs-s"> <time datetime="2018-07-15T02:49:37Z" class=date-short-year> Jul 15 '18 </time> </a> <div class="comment__dropdown" data-tracking-name="comment_dropdown"> <button id="comment-dropdown-trigger-75836" aria-controls="comment-dropdown-75836" aria-expanded="false" class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon " aria-label="Toggle dropdown menu" aria-haspopup="true"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a3bvcj53j8cpoi5y1oro76eduzcxlt0w" class="crayons-icon pointer-events-none"><title id="a3bvcj53j8cpoi5y1oro76eduzcxlt0w">Dropdown menu</title> <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path> </svg> </button> <div id="comment-dropdown-75836" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown"> <ul class="m-0"> <li><a href="https://dev.to/kspeakman/oh-javascript--3404#comment-484k" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to gsmoffln's comment" data-no-instant>Copy link</a></li> <li class="comment-actions hidden" data-user-id="84678" data-action="settings-button" data-path="https://dev.to/gsmoffln/comment/484k/settings" aria-label="Go to gsmoffln's comment settings"></li> <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="15366" data-user-id="84678"> <button class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment" data-hide-type="hide" data-comment-id="75836" data-comment-url="https://dev.to/gsmoffln/comment/484k" aria-label="Hide gsmoffln's comment"> Hide </button> </li> <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/gsmoffln/comment/484k/mod" aria-label="Moderate gsmoffln's comment"></li> <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/gsmoffln/comment/484k" aria-label="Report gsmoffln's comment as abusive or violating our code of conduct and/or terms and conditions"></li> <li class="current-user-actions"></li> </ul> </div> </div> </div> <div class=" comment__body text-styles text-styles--secondary body "> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html><body> <p>But really, we do learn American language (the seventh, for me), why don't they learn the basics of localisation?</p> </body></html> </div> </div> <script> </script> <footer class="comment__footer print-hidden"> <button class="crayons-tooltip__activator crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button" id="button-for-comment-75836" data-comment-id="75836" aria-label="like" data-tracking-name="comment_heart_button"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a9ifkdcs0u2mfv3wf0txiyw12rcpv4ay" class="crayons-icon reaction-icon not-reacted"><title id="a9ifkdcs0u2mfv3wf0txiyw12rcpv4ay">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="at5geq6qzxm5gsc5dlz7z394y6y4zosy" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="at5geq6qzxm5gsc5dlz7z394y6y4zosy">Like comment: </title> <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path> </svg> <span class="reactions-count">1</span><span class="reactions-label hidden m:inline-block"> like</span> <span data-testid="tooltip" class="crayons-tooltip__content"> Like </span> </button> <a class="actions crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left toggle-reply-form mr-1 inline-flex" href="#/kspeakman/oh-javascript--3404/comments/new/484k" data-comment-id="75836" data-path="/kspeakman/oh-javascript--3404/comments/484k" data-tracking-name="comment_reply_button" data-testid="reply-button-75836" rel="nofollow"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="admhdm3m3g9lo4wyp7zm5rjeey7vjhb9" class="crayons-icon reaction-icon not-reacted"><title id="admhdm3m3g9lo4wyp7zm5rjeey7vjhb9">Comment button</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 m:inline-block">Reply</span> </a> </footer> </div> </div> </div> </details> </div> </div> <div class="align-center"> <div class="mb-4"> <a class="crayons-btn crayons-btn--secondary w-100" href="/kspeakman/oh-javascript--3404/comments"> View full discussion (22 comments) </a> </div> <nav class="fs-s align-center block" aria-label="Conduct controls"> <a href="/code-of-conduct" class="crayons-link crayons-link--secondary">Code of Conduct</a> <span class="opacity-25 px-2" role="presentation">•</span> <a href="/report-abuse" class="crayons-link crayons-link--secondary">Report abuse</a> </nav> </div> </section> <div id="hide-comments-modal" class="hidden"> <form id="hide-comments-modal__form" class="hide-comments-modal__form" data-type="json" action="/comments/hide" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="✓" autocomplete="off" /><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="uhatgcWtqCJc2J3g1ufLbeuFkTiFUPPssI5_nA16XFhaC5NMkaYkGsBcg_fb-0Ao-VBJlVfWegczaRu5BOzDaA" autocomplete="off" /> <div class="hide-comments-modal__content"> <p class="pb-2"> Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's <a id="hide-comments-modal__comment-permalink" href="#">permalink</a>. </p> <label class="crayons-field crayons-field--checkbox my-2"> <input name="hide_children" type="hidden" value="0" autocomplete="off" /><input class="hide_children crayons-checkbox" type="checkbox" value="1" name="hide_children" id="hide_children" /> <p class="crayons-field__label">Hide child comments as well</p> </label> <p class="pb-4 pt-2"> <button type="submit" class="crayons-btn"> Confirm </button> </p> </div> </form> <p class="fs-s color-base-60">For further actions, you may consider blocking this person and/or <a id="hide-comments-modal__report-link" href="/report-abuse">reporting abuse</a></p> </div> </article> <div class="pb-4 crayons-layout__comments-billboard"> <div class="js-billboard-container pb-4 crayons-layout__comments-billboard" data-async-url="/kspeakman/oh-javascript--3404/billboards/post_comments"></div> </div> <section class="crayons-card crayons-card--secondary text-padding mb-4 print-hidden" id="bottom-content-read-next"> <h2 class="crayons-subtitle-1">Read next</h2> <a href="/charan_sajjanapu/evolution-of-web-tech-and-browsers-3ddd" data-preload-image="" class="crayons-link mt-6 block"> <div class="flex items-center"> <span class="crayons-avatar crayons-avatar--xl m:crayons-avatar--2xl mr-4 shrink-0"> <img loading="lazy" alt="charan_sajjanapu profile image" class="crayons-avatar__image" width="100" height="100" src="https://media2.dev.to/dynamic/image/width=100,height=100,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2263145%2F6ab1226c-95bd-4f30-b6af-e1d2519e8dc3.jpg" /> </span> <div> <h3 class="fs-xl mb-0 lh-tight">Evolution of Web Tech and Browsers</h3> <p class="opacity-75 pt-1"> Charan Sajjanapu - <time datetime="2024-11-02T19:12:01Z">Nov 2</time> </p> </div> </div> </a> <a href="/jesterxl/thoughts-on-thoughtworks-radar-2024-3fop" data-preload-image="" class="crayons-link mt-6 block"> <div class="flex items-center"> <span class="crayons-avatar crayons-avatar--xl m:crayons-avatar--2xl mr-4 shrink-0"> <img loading="lazy" alt="jesterxl profile image" class="crayons-avatar__image" width="100" height="100" src="https://media2.dev.to/dynamic/image/width=100,height=100,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F116091%2F18731f66-f111-4032-84e5-3fde9be8d867.jpg" /> </span> <div> <h3 class="fs-xl mb-0 lh-tight">Thoughts on ThoughtWorks Radar 2024</h3> <p class="opacity-75 pt-1"> Jesse Warden - <time datetime="2024-11-02T18:16:24Z">Nov 2</time> </p> </div> </div> </a> <a href="/noriller/chunk-busters-dont-cross-the-streams-35cg" 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%2Fagdk13xfu0aufdjf1sby.png" class="crayons-link mt-6 block"> <div class="flex items-center"> <span class="crayons-avatar crayons-avatar--xl m:crayons-avatar--2xl mr-4 shrink-0"> <img loading="lazy" alt="noriller profile image" class="crayons-avatar__image" width="100" height="100" src="https://media2.dev.to/dynamic/image/width=100,height=100,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F704107%2Fc5967cc2-b1a9-47e1-a052-6675877b5835.jpeg" /> </span> <div> <h3 class="fs-xl mb-0 lh-tight">Chunk-Busters: Don’t cross the Streams!</h3> <p class="opacity-75 pt-1"> Bruno Noriller - <time datetime="2024-11-25T17:14:21Z">Nov 25</time> </p> </div> </div> </a> <a href="/hunzombi/today-i-learnt-how-to-implement-seo-friendly-pagination-with-javascript-5d76" data-preload-image="" class="crayons-link mt-6 block"> <div class="flex items-center"> <span class="crayons-avatar crayons-avatar--xl m:crayons-avatar--2xl mr-4 shrink-0"> <img loading="lazy" alt="hunzombi profile image" class="crayons-avatar__image" width="100" height="100" src="https://media2.dev.to/dynamic/image/width=100,height=100,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2346754%2Fc5cf88f9-79ff-4551-afa1-a555b06de938.png" /> </span> <div> <h3 class="fs-xl mb-0 lh-tight">Today I learnt how to Implement SEO-Friendly Pagination with JavaScript</h3> <p class="opacity-75 pt-1"> hunzombi - <time datetime="2024-11-06T20:53:00Z">Nov 6</time> </p> </div> </div> </a> </section> </div> </main> <aside class="crayons-layout__sidebar-right" aria-label="Author details"> <div class="crayons-article-sticky grid gap-4 pb-4 break-word" id="article-show-primary-sticky-nav"> <div class="crayons-card crayons-card--secondary branded-7 p-4 pt-0 gap-4 grid" style="border-top-color: #08304c;"> <div class="-mt-4"> <a href="/kspeakman" 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%2F15366%2Fc6550569-8654-4c9e-828b-c1dcb9c8a0df.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5"> Kasey Speakman </span> </a> </div> <div class="print-hidden"> <button name="button" type="button" data-info="{"className":"User","style":"","id":15366,"name":"Kasey Speakman"}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Kasey Speakman" aria-pressed="false">Follow</button> </div> <div class="color-base-70"> collector of ideas. no one of consequence. </div> <div class="user-metadata-details"> <ul class="user-metadata-details-inner"> <li> <div class="key"> Location </div> <div class="value"> Huntsville, AL </div> </li> <li> <div class="key"> Joined </div> <div class="value"> <time datetime="2017-04-05T17:17:09Z" class="date">Apr 5, 2017</time> </div> </li> </ul> </div> </div> <div class="crayons-card crayons-card--secondary"> <header class="crayons-card__header"> <h3 class="crayons-subtitle-2"> Trending on <a href="https://dev.to">DEV Community</a> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" width="24" height="24" role="img" aria-labelledby="an85t8o3btjmk60p2lwi09lsnu7jljs" class="crayons-icon crayons-icon--default"><title id="an85t8o3btjmk60p2lwi09lsnu7jljs">Hot</title> <g class="nc-icon-wrapper"> <path fill="#F4900C" d="M39 23a16.96 16.96 0 00-1.04-5.868c-.46 5.389-3.333 8.157-6.335 6.868-2.812-1.208-.917-5.917-.777-8.164.236-3.809-.012-8.169-6.931-11.794 2.875 5.5.333 8.917-2.333 9.125-2.958.231-5.667-2.542-4.667-7.042-3.238 2.386-3.332 6.402-2.333 9 1.042 2.708-.042 4.958-2.583 5.208-2.84.28-4.418-3.041-2.963-8.333A16.936 16.936 0 005 23c0 9.389 7.611 17 17 17s17-7.611 17-17z"></path> <path fill="#FFCC4D" d="M32.394 27.999c.148 3.084-2.561 4.293-4.019 3.709-2.106-.843-1.541-2.291-2.083-5.291s-2.625-5.083-5.708-6c2.25 6.333-1.247 8.667-3.08 9.084-1.872.426-3.753-.001-3.968-4.007A11.964 11.964 0 0010 34c0 .368.023.73.055 1.09C13.125 38.124 17.342 40 22 40s8.875-1.876 11.945-4.91c.032-.36.055-.722.055-1.09 0-2.187-.584-4.236-1.606-6.001z"></path> </g> </svg> </h3> </header> <div> <a class="crayons-link crayons-link--contentful flex" href="/dev_kiran/15-best-chrome-extensions-for-devs-25gc"> <span class="crayons-avatar 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%2F1204850%2Fa9ef9d9a-e1bc-46c4-b7b8-164b3acaa098.jpg" class="crayons-avatar__image" loading="lazy" alt="Kiran Naragund profile image"> </span> <div> 15 Best Chrome Extensions for DEVs🧑‍💻 <div class="crayons-link__secondary -ml-1"> <span class="mr-1"><span class="opacity-50">#</span>webdev</span> <span class="mr-1"><span class="opacity-50">#</span>extensions</span> <span class="mr-1"><span class="opacity-50">#</span>programming</span> <span class="mr-1"><span class="opacity-50">#</span>productivity</span> </div> </div> </a> <a class="crayons-link crayons-link--contentful flex" href="/ben/i-am-purposefully-super-nice-to-ai-because-i-imagine-they-are-trained-on-data-where-nice-people-get-2ak3"> <span class="crayons-avatar 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%2F1%2Ff451a206-11c8-4e3d-8936-143d0a7e65bb.png" class="crayons-avatar__image" loading="lazy" alt="Ben Halpern profile image"> </span> <div> I am purposefully super nice to AI because I imagine they are trained on data where nice people get better help. Doing this, though, has an existential uneasiness to it. <div class="crayons-link__secondary -ml-1"> <span class="mr-1"><span class="opacity-50">#</span>ai</span> <span class="mr-1"><span class="opacity-50">#</span>discuss</span> <span class="mr-1"><span class="opacity-50">#</span>watercooler</span> </div> </div> </a> <a class="crayons-link crayons-link--contentful flex" href="/ben/meme-monday-149n"> <span class="crayons-avatar 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%2F1%2Ff451a206-11c8-4e3d-8936-143d0a7e65bb.png" class="crayons-avatar__image" loading="lazy" alt="Ben Halpern profile image"> </span> <div> Meme Monday <div class="crayons-link__secondary -ml-1"> <span class="mr-1"><span class="opacity-50">#</span>jokes</span> <span class="mr-1"><span class="opacity-50">#</span>discuss</span> <span class="mr-1"><span class="opacity-50">#</span>watercooler</span> </div> </div> </a> </div> </div> </div> <div class="crayons-article-sticky grid gap-4 break-word js-billboard-container" data-async-url="/kspeakman/oh-javascript--3404/billboards/post_sidebar"></div> </aside> </div> <div class="mod-actions-menu print-hidden"></div> <div data-testid="unpublish-post-modal-container" class="unpublish-post-modal-container hidden"></div> <div class="fullscreen-code js-fullscreen-code"></div> <script src="https://assets.dev.to/assets/followButtons-f2455d1f50a862b83fa006b1953e3a1644598781243cae25d3e75b13c04184fd.js" defer="defer"></script> <script src="https://assets.dev.to/assets/billboard-a7ffd2b38d410444a4ef2d42c6ce905699d84b1520aed314b817a767ddc3b362.js" defer="defer"></script> <script src="https://assets.dev.to/assets/localizeArticleDates-70147c5c6bfe350b42e020ebb2a3dd37419d83978982b5a67b6389119bf162ac.js" defer="defer"></script> <script src="https://assets.dev.to/assets/articleReactions-79a44d82fb34a91c3987c24cfd3bcf2b0d38a02730b69ae6da297387d185f015.js" defer="defer"></script> <script> function activateRunkitTags() { if (!areAnyRunkitTagsPresent()) return var checkRunkit = setInterval(function() { try { dynamicallyLoadRunkitLibrary() if (typeof(RunKit) === 'undefined') { return } replaceTagContentsWithRunkitWidget() clearInterval(checkRunkit); } catch(e) { console.error(e); clearInterval(checkRunkit); } }, 200); } function isRunkitTagAlreadyActive(runkitTag) { return runkitTag.querySelector("iframe") !== null; }; function areAnyRunkitTagsPresent() { var presentRunkitTags = document.getElementsByClassName("runkit-element"); return presentRunkitTags.length > 0 } function replaceTagContentsWithRunkitWidget() { var targets = document.getElementsByClassName("runkit-element"); for (var i = 0; i < targets.length; i++) { if (isRunkitTagAlreadyActive(targets[i])) { continue; } var wrapperContent = targets[i].textContent; if (/^(<iframe src)/.test(wrapperContent) === false) { if (targets[i].children.length > 0) { var preamble = targets[i].children[0].textContent; var content = targets[i].children[1].textContent; targets[i].innerHTML = ""; var notebook = RunKit.createNotebook({ element: targets[i], source: content, preamble: preamble }); } } } }; function dynamicallyLoadRunkitLibrary() { if (typeof(dynamicallyLoadScript) === "undefined") return dynamicallyLoadScript("//embed.runkit.com") } activateRunkitTags(); </script> <div class="js-billboard-container pb-4 crayons-layout__comments-billboard" data-async-url="/kspeakman/oh-javascript--3404/billboards/post_fixed_bottom"></div> <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="" 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>

CINXE.COM

Oh Javascript... 🙄 - DEV Community