{"id":321852,"date":"2020-09-24T11:47:44","date_gmt":"2020-09-24T18:47:44","guid":{"rendered":"https:\/\/css-tricks.com\/?p=321852"},"modified":"2020-09-24T11:47:45","modified_gmt":"2020-09-24T18:47:45","slug":"web-technologies-and-syntax","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/web-technologies-and-syntax\/","title":{"rendered":"Web Technologies and Syntax"},"content":{"rendered":"\n<p>JavaScript has a (newish) feature called <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Optional_chaining\" rel=\"noopener\">optional chaining<\/a>. Say I have code like:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">const name = Data.person.name;<\/code><\/pre>\n\n\n\n<p>If <code>person<\/code> happens to not exist on <code>Data<\/code>, I&#8217;m going to get a hard, show-stopping error. With optional chaining, I can write:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">const name = Data.person?.name;<\/code><\/pre>\n\n\n\n<!--more-->\n\n\n\n<p>Now if <code>person<\/code> doesn&#8217;t exist, <code>name<\/code> becomes <code>undefined<\/code> instead of throwing an error. That&#8217;s quite useful if you ask me. In a way, it makes for more resilient code, since there is less possibility of a script that entirely bombs out. But there are arguments that it actually makes for less resilient code, because instead of fixing the problem at the root level (bad data), you&#8217;re putting a band-aid on the problem. <\/p>\n\n\n\n<p>Jim Nielsen <a href=\"https:\/\/blog.jim-nielsen.com\/2020\/web-technologies-and-syntax\/\" rel=\"noopener\">makes the connection<\/a> to optional chaining and <code>!important<\/code> in CSS. Errors of &#8220;undefined properties&#8221; are perhaps the most common of all JavaScript errors and optional chaining is a quick workaround. Styles that don&#8217;t cascade the way you want is (<em>maybe?<\/em>) the most common of all CSS issues and <code>!important<\/code> is a quick workaround.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-style-large is-layout-flow wp-block-quote-is-layout-flow\"><p>Anyone familiar with CSS knows that using&nbsp;<code>!important<\/code>&nbsp;doesn\u2019t always fix your problems. In fact, it might just cause you more problems. Ditto for optional chaining in JavaScript, it might cause you more problems than it fixes (we just don\u2019t know it yet since it hasn\u2019t been around long enough).<\/p><\/blockquote>\n\n\n\n<p>I like that take.<\/p>\n\n\n\n<p>Sweeping negative hot takes about new features are just clickbait silliness, but sometimes there are good things buried in there to think about. I&#8217;ll bet optional chaining settles into some nice patterns in JavaScript, just like <code>!important<\/code> <a href=\"https:\/\/css-tricks.com\/when-using-important-is-the-right-choice\/\">has in CSS<\/a> to some degree. Most chatter I hear about <code>!important<\/code> in CSS lately is about how you should use it when you really mean it (not for getting out of a jam). <\/p>\n","protected":false},"excerpt":{"rendered":"<p>JavaScript has a (newish) feature called optional chaining. Say I have code like: If person happens to not exist on Data, I&#8217;m going to get a hard, show-stopping error. With optional chaining, I can write:<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[17],"tags":[18838,18839],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/321852"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=321852"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/321852\/revisions"}],"predecessor-version":[{"id":321901,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/321852\/revisions\/321901"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=321852"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=321852"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=321852"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}