{"id":281047,"date":"2019-01-08T08:09:13","date_gmt":"2019-01-08T15:09:13","guid":{"rendered":"http:\/\/css-tricks.com\/?post_type=newsletters&p=281047"},"modified":"2019-01-08T08:09:13","modified_gmt":"2019-01-08T15:09:13","slug":"128","status":"publish","type":"newsletters","link":"https:\/\/css-tricks.com\/newsletter\/128\/","title":{"rendered":"128"},"content":{"rendered":"


\n
\n
\n
\n
\n
\n
\n
\n *|MC:SUBJECT|*<\/title><\/p>\n<style type=\"text\/css\">\n\t\tp{\n\t\t\tmargin:10px 0;\n\t\t\tpadding:0;\n\t\t}\n\t\ttable{\n\t\t\tborder-collapse:collapse;\n\t\t}\n\t\th1,h2,h3,h4,h5,h6{\n\t\t\tdisplay:block;\n\t\t\tmargin:0;\n\t\t\tpadding:0;\n\t\t}\n\t\timg,a img{\n\t\t\tborder:0;\n\t\t\theight:auto;\n\t\t\toutline:none;\n\t\t\ttext-decoration:none;\n\t\t}\n\t\tbody,#bodyTable,#bodyCell{\n\t\t\theight:100%;\n\t\t\tmargin:0;\n\t\t\tpadding:0;\n\t\t\twidth:100%;\n\t\t}\n\t\t.mcnPreviewText{\n\t\t\tdisplay:none !important;\n\t\t}\n\t\t#outlook a{\n\t\t\tpadding:0;\n\t\t}\n\t\timg{\n\t\t\t-ms-interpolation-mode:bicubic;\n\t\t}\n\t\ttable{\n\t\t\tmso-table-lspace:0pt;\n\t\t\tmso-table-rspace:0pt;\n\t\t}\n\t\t.ReadMsgBody{\n\t\t\twidth:100%;\n\t\t}\n\t\t.ExternalClass{\n\t\t\twidth:100%;\n\t\t}\n\t\tp,a,li,td,blockquote{\n\t\t\tmso-line-height-rule:exactly;\n\t\t}\n\t\ta[href^=tel],a[href^=sms]{\n\t\t\tcolor:inherit;\n\t\t\tcursor:default;\n\t\t\ttext-decoration:none;\n\t\t}\n\t\tp,a,li,td,body,table,blockquote{\n\t\t\t-ms-text-size-adjust:100%;\n\t\t\t-webkit-text-size-adjust:100%;\n\t\t}\n\t\t.ExternalClass,.ExternalClass p,.ExternalClass td,.ExternalClass div,.ExternalClass span,.ExternalClass font{\n\t\t\tline-height:100%;\n\t\t}\n\t\ta[x-apple-data-detectors]{\n\t\t\tcolor:inherit !important;\n\t\t\ttext-decoration:none !important;\n\t\t\tfont-size:inherit !important;\n\t\t\tfont-family:inherit !important;\n\t\t\tfont-weight:inherit !important;\n\t\t\tline-height:inherit !important;\n\t\t}\n\t\t#bodyCell{\n\t\t\tpadding:10px;\n\t\t}\n\t\t.templateContainer{\n\t\t\tmax-width:600px !important;\n\t\t}\n\t\ta.mcnButton{\n\t\t\tdisplay:block;\n\t\t}\n\t\t.mcnImage,.mcnRetinaImage{\n\t\t\tvertical-align:bottom;\n\t\t}\n\t\t.mcnTextContent{\n\t\t\tword-break:break-word;\n\t\t}\n\t\t.mcnTextContent img{\n\t\t\theight:auto !important;\n\t\t}\n\t\t.mcnDividerBlock{\n\t\t\ttable-layout:fixed !important;\n\t\t}\n\t\tbody,#bodyTable{\n\t\t\tbackground-color:#FAFAFA;\n\t\t}\n\t\t#bodyCell{\n\t\t\tborder-top:0;\n\t\t}\n\t\t.templateContainer{\n\t\t\tborder:0;\n\t\t}\n\t\th1{\n\t\t\tcolor:#202020;\n\t\t\tfont-family:Helvetica;\n\t\t\tfont-size:26px;\n\t\t\tfont-style:normal;\n\t\t\tfont-weight:bold;\n\t\t\tline-height:125%;\n\t\t\tletter-spacing:normal;\n\t\t\ttext-align:left;\n\t\t}\n\t\th2{\n\t\t\tcolor:#202020;\n\t\t\tfont-family:Helvetica;\n\t\t\tfont-size:22px;\n\t\t\tfont-style:normal;\n\t\t\tfont-weight:bold;\n\t\t\tline-height:125%;\n\t\t\tletter-spacing:normal;\n\t\t\ttext-align:left;\n\t\t}\n\t\th3{\n\t\t\tcolor:#202020;\n\t\t\tfont-family:Helvetica;\n\t\t\tfont-size:20px;\n\t\t\tfont-style:normal;\n\t\t\tfont-weight:bold;\n\t\t\tline-height:125%;\n\t\t\tletter-spacing:normal;\n\t\t\ttext-align:left;\n\t\t}\n\t\th4{\n\t\t\tcolor:#202020;\n\t\t\tfont-family:Helvetica;\n\t\t\tfont-size:18px;\n\t\t\tfont-style:normal;\n\t\t\tfont-weight:bold;\n\t\t\tline-height:125%;\n\t\t\tletter-spacing:normal;\n\t\t\ttext-align:left;\n\t\t}\n\t\t#templatePreheader{\n\t\t\tbackground-color:#FAFAFA;\n\t\t\tbackground-image:none;\n\t\t\tbackground-repeat:no-repeat;\n\t\t\tbackground-position:center;\n\t\t\tbackground-size:cover;\n\t\t\tborder-top:0;\n\t\t\tborder-bottom:0;\n\t\t\tpadding-top:9px;\n\t\t\tpadding-bottom:9px;\n\t\t}\n\t\t#templatePreheader .mcnTextContent,#templatePreheader .mcnTextContent p{\n\t\t\tcolor:#656565;\n\t\t\tfont-family:Helvetica;\n\t\t\tfont-size:12px;\n\t\t\tline-height:150%;\n\t\t\ttext-align:left;\n\t\t}\n\t\t#templatePreheader .mcnTextContent a,#templatePreheader .mcnTextContent p a{\n\t\t\tcolor:#656565;\n\t\t\tfont-weight:normal;\n\t\t\ttext-decoration:underline;\n\t\t}\n\t\t#templateHeader{\n\t\t\tbackground-color:#FFFFFF;\n\t\t\tbackground-image:none;\n\t\t\tbackground-repeat:no-repeat;\n\t\t\tbackground-position:center;\n\t\t\tbackground-size:cover;\n\t\t\tborder-top:0;\n\t\t\tborder-bottom:0;\n\t\t\tpadding-top:9px;\n\t\t\tpadding-bottom:0;\n\t\t}\n\t\t#templateHeader .mcnTextContent,#templateHeader .mcnTextContent p{\n\t\t\tcolor:#202020;\n\t\t\tfont-family:Helvetica;\n\t\t\tfont-size:16px;\n\t\t\tline-height:150%;\n\t\t\ttext-align:left;\n\t\t}\n\t\t#templateHeader .mcnTextContent a,#templateHeader .mcnTextContent p a{\n\t\t\tcolor:#2BAADF;\n\t\t\tfont-weight:normal;\n\t\t\ttext-decoration:underline;\n\t\t}\n\t\t#templateBody{\n\t\t\tbackground-color:#FFFFFF;\n\t\t\tbackground-image:none;\n\t\t\tbackground-repeat:no-repeat;\n\t\t\tbackground-position:center;\n\t\t\tbackground-size:cover;\n\t\t\tborder-top:0;\n\t\t\tborder-bottom:2px solid #EAEAEA;\n\t\t\tpadding-top:0;\n\t\t\tpadding-bottom:9px;\n\t\t}\n\t\t#templateBody .mcnTextContent,#templateBody .mcnTextContent p{\n\t\t\tcolor:#202020;\n\t\t\tfont-family:Helvetica;\n\t\t\tfont-size:16px;\n\t\t\tline-height:150%;\n\t\t\ttext-align:left;\n\t\t}\n\t\t#templateBody .mcnTextContent a,#templateBody .mcnTextContent p a{\n\t\t\tcolor:#2BAADF;\n\t\t\tfont-weight:normal;\n\t\t\ttext-decoration:underline;\n\t\t}\n\t\t#templateFooter{\n\t\t\tbackground-color:#FAFAFA;\n\t\t\tbackground-image:none;\n\t\t\tbackground-repeat:no-repeat;\n\t\t\tbackground-position:center;\n\t\t\tbackground-size:cover;\n\t\t\tborder-top:0;\n\t\t\tborder-bottom:0;\n\t\t\tpadding-top:9px;\n\t\t\tpadding-bottom:9px;\n\t\t}\n\t\t#templateFooter .mcnTextContent,#templateFooter .mcnTextContent p{\n\t\t\tcolor:#656565;\n\t\t\tfont-family:Helvetica;\n\t\t\tfont-size:12px;\n\t\t\tline-height:150%;\n\t\t\ttext-align:center;\n\t\t}\n\t\t#templateFooter .mcnTextContent a,#templateFooter .mcnTextContent p a{\n\t\t\tcolor:#656565;\n\t\t\tfont-weight:normal;\n\t\t\ttext-decoration:underline;\n\t\t}\n\t@media only screen and (min-width:768px){\n\t\t.templateContainer{\n\t\t\twidth:600px !important;\n\t\t}<\/p>\n<p>}\t@media only screen and (max-width: 480px){\n\t\tbody,table,td,p,a,li,blockquote{\n\t\t\t-webkit-text-size-adjust:none !important;\n\t\t}<\/p>\n<p>}\t@media only screen and (max-width: 480px){\n\t\tbody{\n\t\t\twidth:100% !important;\n\t\t\tmin-width:100% !important;\n\t\t}<\/p>\n<p>}\t@media only screen and (max-width: 480px){\n\t\t#bodyCell{\n\t\t\tpadding-top:10px !important;\n\t\t}<\/p>\n<p>}\t@media only screen and (max-width: 480px){\n\t\t.mcnRetinaImage{\n\t\t\tmax-width:100% !important;\n\t\t}<\/p>\n<p>}\t@media only screen and (max-width: 480px){\n\t\t.mcnImage{\n\t\t\twidth:100% !important;\n\t\t}<\/p>\n<p>}\t@media only screen and (max-width: 480px){\n\t\t.mcnCartContainer,.mcnCaptionTopContent,.mcnRecContentContainer,.mcnCaptionBottomContent,.mcnTextContentContainer,.mcnBoxedTextContentContainer,.mcnImageGroupContentContainer,.mcnCaptionLeftTextContentContainer,.mcnCaptionRightTextContentContainer,.mcnCaptionLeftImageContentContainer,.mcnCaptionRightImageContentContainer,.mcnImageCardLeftTextContentContainer,.mcnImageCardRightTextContentContainer,.mcnImageCardLeftImageContentContainer,.mcnImageCardRightImageContentContainer{\n\t\t\tmax-width:100% !important;\n\t\t\twidth:100% !important;\n\t\t}<\/p>\n<p>}\t@media only screen and (max-width: 480px){\n\t\t.mcnBoxedTextContentContainer{\n\t\t\tmin-width:100% !important;\n\t\t}<\/p>\n<p>}\t@media only screen and (max-width: 480px){\n\t\t.mcnImageGroupContent{\n\t\t\tpadding:9px !important;\n\t\t}<\/p>\n<p>}\t@media only screen and (max-width: 480px){\n\t\t.mcnCaptionLeftContentOuter .mcnTextContent,.mcnCaptionRightContentOuter .mcnTextContent{\n\t\t\tpadding-top:9px !important;\n\t\t}<\/p>\n<p>}\t@media only screen and (max-width: 480px){\n\t\t.mcnImageCardTopImageContent,.mcnCaptionBottomContent:last-child .mcnCaptionBottomImageContent,.mcnCaptionBlockInner .mcnCaptionTopContent:last-child .mcnTextContent{\n\t\t\tpadding-top:18px !important;\n\t\t}<\/p>\n<p>}\t@media only screen and (max-width: 480px){\n\t\t.mcnImageCardBottomImageContent{\n\t\t\tpadding-bottom:9px !important;\n\t\t}<\/p>\n<p>}\t@media only screen and (max-width: 480px){\n\t\t.mcnImageGroupBlockInner{\n\t\t\tpadding-top:0 !important;\n\t\t\tpadding-bottom:0 !important;\n\t\t}<\/p>\n<p>}\t@media only screen and (max-width: 480px){\n\t\t.mcnImageGroupBlockOuter{\n\t\t\tpadding-top:9px !important;\n\t\t\tpadding-bottom:9px !important;\n\t\t}<\/p>\n<p>}\t@media only screen and (max-width: 480px){\n\t\t.mcnTextContent,.mcnBoxedTextContentColumn{\n\t\t\tpadding-right:18px !important;\n\t\t\tpadding-left:18px !important;\n\t\t}<\/p>\n<p>}\t@media only screen and (max-width: 480px){\n\t\t.mcnImageCardLeftImageContent,.mcnImageCardRightImageContent{\n\t\t\tpadding-right:18px !important;\n\t\t\tpadding-bottom:0 !important;\n\t\t\tpadding-left:18px !important;\n\t\t}<\/p>\n<p>}\t@media only screen and (max-width: 480px){\n\t\t.mcpreview-image-uploader{\n\t\t\tdisplay:none !important;\n\t\t\twidth:100% !important;\n\t\t}<\/p>\n<p>}\t@media only screen and (max-width: 480px){\n\t\th1{\n\t\t\tfont-size:22px !important;\n\t\t\tline-height:125% !important;\n\t\t}<\/p>\n<p>}\t@media only screen and (max-width: 480px){\n\t\th2{\n\t\t\tfont-size:20px !important;\n\t\t\tline-height:125% !important;\n\t\t}<\/p>\n<p>}\t@media only screen and (max-width: 480px){\n\t\th3{\n\t\t\tfont-size:18px !important;\n\t\t\tline-height:125% !important;\n\t\t}<\/p>\n<p>}\t@media only screen and (max-width: 480px){\n\t\th4{\n\t\t\tfont-size:16px !important;\n\t\t\tline-height:150% !important;\n\t\t}<\/p>\n<p>}\t@media only screen and (max-width: 480px){\n\t\t.mcnBoxedTextContentContainer .mcnTextContent,.mcnBoxedTextContentContainer .mcnTextContent p{\n\t\t\tfont-size:14px !important;\n\t\t\tline-height:150% !important;\n\t\t}<\/p>\n<p>}\t@media only screen and (max-width: 480px){\n\t\t#templatePreheader{\n\t\t\tdisplay:block !important;\n\t\t}<\/p>\n<p>}\t@media only screen and (max-width: 480px){\n\t\t#templatePreheader .mcnTextContent,#templatePreheader .mcnTextContent p{\n\t\t\tfont-size:14px !important;\n\t\t\tline-height:150% !important;\n\t\t}<\/p>\n<p>}\t@media only screen and (max-width: 480px){\n\t\t#templateHeader .mcnTextContent,#templateHeader .mcnTextContent p{\n\t\t\tfont-size:16px !important;\n\t\t\tline-height:150% !important;\n\t\t}<\/p>\n<p>}\t@media only screen and (max-width: 480px){\n\t\t#templateBody .mcnTextContent,#templateBody .mcnTextContent p{\n\t\t\tfont-size:16px !important;\n\t\t\tline-height:150% !important;\n\t\t}<\/p>\n<p>}\t@media only screen and (max-width: 480px){\n\t\t#templateFooter .mcnTextContent,#templateFooter .mcnTextContent p{\n\t\t\tfont-size:14px !important;\n\t\t\tline-height:150% !important;\n\t\t}<\/p>\n<p>}<\/style>\n<p><!--[if !mso]><!--><link href=\"https:\/\/fonts.googleapis.com\/css?family=Lato:400,400i,700,700i|Rubik:400,400i,700,700i\" rel=\"stylesheet\"><!--<![endif]--><\/head><br \/>\n <body style=\"height: 100%;margin: 0;padding: 0;width: 100%;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #FAFAFA;\"><br \/>\n <!--*|IF:MC_PREVIEW_TEXT|*--><br \/>\n <!--[if !gte mso 9]><!----><span class=\"mcnPreviewText\" style=\"display:none; font-size:0px; line-height:0px; max-height:0px; max-width:0px; opacity:0; overflow:hidden; visibility:hidden; mso-hide:all;\">*|MC_PREVIEW_TEXT|*<\/span><!--<![endif]--><br \/>\n <!--*|END:IF|*--><br \/>\n <center><\/p>\n<table align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" height=\"100%\" width=\"100%\" id=\"bodyTable\" style=\"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;height: 100%;margin: 0;padding: 0;width: 100%;background-color: #FAFAFA;\">\n<tr>\n<td align=\"center\" valign=\"top\" id=\"bodyCell\" style=\"mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;height: 100%;margin: 0;padding: 10px;width: 100%;border-top: 0;\">\n <!-- BEGIN TEMPLATE \/\/ --><br \/>\n <!--[if (gte mso 9)|(IE)]>\n \n\n<table align=\"center\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" width=\"600\" style=\"width:600px;\">\n \n\n<tr>\n \n\n<td align=\"center\" valign=\"top\" width=\"600\" style=\"width:600px;\">\n <![endif]--><\/p>\n<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" class=\"templateContainer\" style=\"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;border: 0;max-width: 600px !important;\">\n<tr>\n<td valign=\"top\" id=\"templatePreheader\" style=\"background:#FAFAFA none no-repeat center\/cover;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #FAFAFA;background-image: none;background-repeat: no-repeat;background-position: center;background-size: cover;border-top: 0;border-bottom: 0;padding-top: 9px;padding-bottom: 9px;\"><\/td>\n<\/tr>\n<tr>\n<td valign=\"top\" id=\"templateHeader\" style=\"background:#FFFFFF none no-repeat center\/cover;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #FFFFFF;background-image: none;background-repeat: no-repeat;background-position: center;background-size: cover;border-top: 0;border-bottom: 0;padding-top: 9px;padding-bottom: 0;\">\n<table class=\"mcnImageBlock\" style=\"min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\n<tbody class=\"mcnImageBlockOuter\">\n<tr>\n<td style=\"padding: 0px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" class=\"mcnImageBlockInner\" valign=\"top\">\n<table class=\"mcnImageContentContainer\" style=\"min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\" align=\"left\">\n<tbody>\n<tr>\n<td class=\"mcnImageContent\" style=\"padding-right: 0px;padding-left: 0px;padding-top: 0;padding-bottom: 0;text-align: center;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" valign=\"top\">\n<p> <a href=\"https:\/\/css-tricks.com\/\" title=\"\" class=\"\" target=\"_blank\" style=\"mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\"><br \/>\n <img decoding=\"async\" alt=\"\" src=\"https:\/\/i0.wp.com\/gallery.mailchimp.com\/155f5a9ccc4e24c318130cace\/images\/574ddb5c-1bc7-4963-86b6-81e65f968ffb.png?w=600&ssl=1\" style=\"max-width: 1200px;padding-bottom: 0;display: inline !important;vertical-align: bottom;border: 0;height: auto;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;\" class=\"mcnImage\" align=\"middle\" data-recalc-dims=\"1\"><br \/>\n <\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\" id=\"templateBody\" style=\"background:#FFFFFF none no-repeat center\/cover;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #FFFFFF;background-image: none;background-repeat: no-repeat;background-position: center;background-size: cover;border-top: 0;border-bottom: 2px solid #EAEAEA;padding-top: 0;padding-bottom: 9px;\">\n<table class=\"mcnDividerBlock\" style=\"min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;table-layout: fixed !important;\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\n<tbody class=\"mcnDividerBlockOuter\">\n<tr>\n<td class=\"mcnDividerBlockInner\" style=\"min-width: 100%;padding: 18px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\">\n<table class=\"mcnDividerContent\" style=\"min-width: 100%;border-top: 2px solid #FFFFFF;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\n<tbody>\n<tr>\n<td style=\"mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\">\n <span><\/span>\n <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><!-- \n \n\n<td class=\"mcnDividerBlockInner\" style=\"padding: 18px;\">\n \n\n<hr class=\"mcnDividerContent\" style=\"border-bottom-color:none; border-left-color:none; border-right-color:none; border-bottom-width:0; border-left-width:0; border-right-width:0; margin-top:0; margin-right:0; margin-bottom:0; margin-left:0;\" \/>\n-->\n <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" class=\"mcnTextBlock\" style=\"min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\">\n<tbody class=\"mcnTextBlockOuter\">\n<tr>\n<td valign=\"top\" class=\"mcnTextBlockInner\" style=\"padding-top: 9px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\">\n \t<!--[if mso]>\n\t\t\t\t\n\n<table align=\"left\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" width=\"100%\" style=\"width:100%;\">\n\t\t\t\t\n\n<tr>\n\t\t\t\t<![endif]--><\/p>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t\n\n<td valign=\"top\" width=\"600\" style=\"width:600px;\">\n\t\t\t\t<![endif]--><\/p>\n<table align=\"left\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" style=\"max-width: 100%;min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" width=\"100%\" class=\"mcnTextContentContainer\">\n<tbody>\n<tr>\n<td valign=\"top\" class=\"mcnTextContent\" style=\"padding: 0px 18px 9px;font-family: Lato, \"Helvetica Neue\", Helvetica, Arial, sans-serif;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;word-break: break-word;color: #202020;font-size: 16px;line-height: 150%;text-align: left;\">\n<link href=\"https:\/\/fonts.googleapis.com\/css?family=Rubik:400,500\" rel=\"stylesheet\">\n<h1 style=\"text-align: left;display: block;margin: 0;padding: 0;color: #202020;font-family: Helvetica;font-size: 26px;font-style: normal;font-weight: bold;line-height: 125%;letter-spacing: normal;\"><span style=\"font-size:20px\"><strong><span style=\"color:#FF8C00\"><span style=\"color:#f15f25; font-family:rubik,lato,helvetica neue,helvetica,arial,sans-serif; font-weight:500\"> Robin\u2019s Corner <\/span><\/span><\/strong><\/span><\/h1>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t<\/td>\n\n\n\t\t\t\t<![endif]--><\/p>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t<\/tr>\n\n\n\t\t\t\t<\/table>\n\n\n\t\t\t\t<![endif]-->\n <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" class=\"mcnTextBlock\" style=\"min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\">\n<tbody class=\"mcnTextBlockOuter\">\n<tr>\n<td valign=\"top\" class=\"mcnTextBlockInner\" style=\"padding-top: 9px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\">\n \t<!--[if mso]>\n\t\t\t\t\n\n<table align=\"left\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" width=\"100%\" style=\"width:100%;\">\n\t\t\t\t\n\n<tr>\n\t\t\t\t<![endif]--><\/p>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t\n\n<td valign=\"top\" width=\"600\" style=\"width:600px;\">\n\t\t\t\t<![endif]--><\/p>\n<table align=\"left\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" style=\"max-width: 100%;min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" width=\"100%\" class=\"mcnTextContentContainer\">\n<tbody>\n<tr>\n<td valign=\"top\" class=\"mcnTextContent\" style=\"padding-top: 0;padding-right: 18px;padding-bottom: 9px;padding-left: 18px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;word-break: break-word;color: #202020;font-family: Helvetica;font-size: 16px;line-height: 150%;text-align: left;\">\n<div style=\"font-family:rubik, helvetica;\">\n<p style=\"font-family: rubik, helvetica;margin: 10px 0;padding: 0;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #202020;font-size: 16px;line-height: 150%;text-align: left;\">Happy new year! There\u2019s been a few changes around here that are <em>super<\/em> exciting. First up, Chris and Kylie Timpani redesigned the CSS-Tricks website, and despite being an enormous fan boy myself,\u00a0I think they did a truly outstanding job:<\/p>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t<\/td>\n\n\n\t\t\t\t<![endif]--><\/p>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t<\/tr>\n\n\n\t\t\t\t<\/table>\n\n\n\t\t\t\t<![endif]-->\n <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table class=\"mcnImageBlock\" style=\"min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\n<tbody class=\"mcnImageBlockOuter\">\n<tr>\n<td style=\"padding: 9px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" class=\"mcnImageBlockInner\" valign=\"top\">\n<table class=\"mcnImageContentContainer\" style=\"min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\" align=\"left\">\n<tbody>\n<tr>\n<td class=\"mcnImageContent\" style=\"padding-right: 9px;padding-left: 9px;padding-top: 0;padding-bottom: 0;text-align: center;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" valign=\"top\">\n<p> <img decoding=\"async\" alt=\"\" src=\"https:\/\/i0.wp.com\/gallery.mailchimp.com\/155f5a9ccc4e24c318130cace\/images\/1bb61385-ebab-48df-9527-0132e29c069b.png?w=564&ssl=1\" style=\"max-width: 800px;padding-bottom: 0;display: inline !important;vertical-align: bottom;border: 0;height: auto;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;\" class=\"mcnImage\" align=\"middle\" data-recalc-dims=\"1\"><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table class=\"mcnTextBlock\" style=\"min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\n<tbody class=\"mcnTextBlockOuter\">\n<tr>\n<td class=\"mcnTextBlockInner\" style=\"padding-top: 9px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" valign=\"top\">\n \t<!--[if mso]>\n\t\t\t\t\n\n<table align=\"left\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" width=\"100%\" style=\"width:100%;\">\n\t\t\t\t\n\n<tr>\n\t\t\t\t<![endif]--><\/p>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t\n\n<td valign=\"top\" width=\"600\" style=\"width:600px;\">\n\t\t\t\t<![endif]--><\/p>\n<table style=\"max-width: 100%;min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" class=\"mcnTextContentContainer\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\" align=\"left\">\n<tbody>\n<tr>\n<td class=\"mcnTextContent\" style=\"padding-top: 0;padding-right: 18px;padding-bottom: 9px;padding-left: 18px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;word-break: break-word;color: #202020;font-family: Helvetica;font-size: 16px;line-height: 150%;text-align: left;\" valign=\"top\">\n<div style=\"font-family:rubik, helvetica;\">\n<p style=\"font-family: rubik, helvetica;margin: 10px 0;padding: 0;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #202020;font-size: 16px;line-height: 150%;text-align: left;\">New fonts! Gradients all over the place! And a custom scrollbar, too!<\/p>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t<\/td>\n\n\n\t\t\t\t<![endif]--><\/p>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t<\/tr>\n\n\n\t\t\t\t<\/table>\n\n\n\t\t\t\t<![endif]-->\n <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table class=\"mcnTextBlock\" style=\"min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\n<tbody class=\"mcnTextBlockOuter\">\n<tr>\n<td class=\"mcnTextBlockInner\" style=\"padding-top: 9px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" valign=\"top\">\n \t<!--[if mso]>\n\t\t\t\t\n\n<table align=\"left\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" width=\"100%\" style=\"width:100%;\">\n\t\t\t\t\n\n<tr>\n\t\t\t\t<![endif]--><\/p>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t\n\n<td valign=\"top\" width=\"600\" style=\"width:600px;\">\n\t\t\t\t<![endif]--><\/p>\n<table style=\"max-width: 100%;min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" class=\"mcnTextContentContainer\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\" align=\"left\">\n<tbody>\n<tr>\n<td class=\"mcnTextContent\" style=\"padding-top: 0;padding-right: 18px;padding-bottom: 9px;padding-left: 18px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;word-break: break-word;color: #202020;font-family: Helvetica;font-size: 16px;line-height: 150%;text-align: left;\" valign=\"top\">\n<div style=\"font-family:rubik, helvetica;\">\n<p style=\"font-family: rubik, helvetica;margin: 10px 0;padding: 0;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #202020;font-size: 16px;line-height: 150%;text-align: left;\">There\u2019s lots of small UI touches here that are weird but in a very cool way and it reminds me that websites don\u2019t all have to look the same. They can be wild and experimental and, on that note, I love the design of this stack of popular articles that you can now skim through on the homepage as just one example:<\/p>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t<\/td>\n\n\n\t\t\t\t<![endif]--><\/p>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t<\/tr>\n\n\n\t\t\t\t<\/table>\n\n\n\t\t\t\t<![endif]-->\n <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table class=\"mcnImageBlock\" style=\"min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\n<tbody class=\"mcnImageBlockOuter\">\n<tr>\n<td style=\"padding: 9px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" class=\"mcnImageBlockInner\" valign=\"top\">\n<table class=\"mcnImageContentContainer\" style=\"min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\" align=\"left\">\n<tbody>\n<tr>\n<td class=\"mcnImageContent\" style=\"padding-right: 9px;padding-left: 9px;padding-top: 0;padding-bottom: 0;text-align: center;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" valign=\"top\">\n<p> <img decoding=\"async\" alt=\"\" src=\"https:\/\/i0.wp.com\/gallery.mailchimp.com\/155f5a9ccc4e24c318130cace\/images\/8da622ad-5936-4bb2-a488-c7bf9a23a00c.gif?w=564&ssl=1\" style=\"max-width: 1292px;padding-bottom: 0;display: inline !important;vertical-align: bottom;border: 0;height: auto;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;\" class=\"mcnImage\" align=\"middle\" data-recalc-dims=\"1\"><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table class=\"mcnTextBlock\" style=\"min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\n<tbody class=\"mcnTextBlockOuter\">\n<tr>\n<td class=\"mcnTextBlockInner\" style=\"padding-top: 9px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" valign=\"top\">\n \t<!--[if mso]>\n\t\t\t\t\n\n<table align=\"left\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" width=\"100%\" style=\"width:100%;\">\n\t\t\t\t\n\n<tr>\n\t\t\t\t<![endif]--><\/p>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t\n\n<td valign=\"top\" width=\"600\" style=\"width:600px;\">\n\t\t\t\t<![endif]--><\/p>\n<table style=\"max-width: 100%;min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" class=\"mcnTextContentContainer\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\" align=\"left\">\n<tbody>\n<tr>\n<td class=\"mcnTextContent\" style=\"padding-top: 0;padding-right: 18px;padding-bottom: 9px;padding-left: 18px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;word-break: break-word;color: #202020;font-family: Helvetica;font-size: 16px;line-height: 150%;text-align: left;\" valign=\"top\">\n<div style=\"font-family:rubik, helvetica;\">\n<p style=\"font-family: rubik, helvetica;margin: 10px 0;padding: 0;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #202020;font-size: 16px;line-height: 150%;text-align: left;\">Oh! And make sure to take a look at our revamped <a href=\"https:\/\/css-tricks.com\/guides\/\" style=\"mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #2BAADF;font-weight: normal;text-decoration: underline;\">Guides<\/a> section, too! We have a ton of useful information in there, like our <a href=\"https:\/\/css-tricks.com\/guides\/css-custom-properties\/\" style=\"mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #2BAADF;font-weight: normal;text-decoration: underline;\">Guide to Custom Properties<\/a> or the one on <a href=\"https:\/\/css-tricks.com\/snippets\/css\/complete-guide-grid\/\" style=\"mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #2BAADF;font-weight: normal;text-decoration: underline;\">CSS Grid<\/a>.<\/p>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t<\/td>\n\n\n\t\t\t\t<![endif]--><\/p>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t<\/tr>\n\n\n\t\t\t\t<\/table>\n\n\n\t\t\t\t<![endif]-->\n <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table class=\"mcnImageBlock\" style=\"min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\n<tbody class=\"mcnImageBlockOuter\">\n<tr>\n<td style=\"padding: 9px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" class=\"mcnImageBlockInner\" valign=\"top\">\n<table class=\"mcnImageContentContainer\" style=\"min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\" align=\"left\">\n<tbody>\n<tr>\n<td class=\"mcnImageContent\" style=\"padding-right: 9px;padding-left: 9px;padding-top: 0;padding-bottom: 0;text-align: center;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" valign=\"top\">\n<p> <img decoding=\"async\" alt=\"\" src=\"https:\/\/i0.wp.com\/gallery.mailchimp.com\/155f5a9ccc4e24c318130cace\/images\/ac185ed3-9042-46c5-b599-3f3eefcef6b7.png?w=564&ssl=1\" style=\"max-width: 799px;padding-bottom: 0;display: inline !important;vertical-align: bottom;border: 0;height: auto;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;\" class=\"mcnImage\" align=\"middle\" data-recalc-dims=\"1\"><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" class=\"mcnTextBlock\" style=\"min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\">\n<tbody class=\"mcnTextBlockOuter\">\n<tr>\n<td valign=\"top\" class=\"mcnTextBlockInner\" style=\"padding-top: 9px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\">\n \t<!--[if mso]>\n\t\t\t\t\n\n<table align=\"left\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" width=\"100%\" style=\"width:100%;\">\n\t\t\t\t\n\n<tr>\n\t\t\t\t<![endif]--><\/p>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t\n\n<td valign=\"top\" width=\"600\" style=\"width:600px;\">\n\t\t\t\t<![endif]--><\/p>\n<table align=\"left\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" style=\"max-width: 100%;min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" width=\"100%\" class=\"mcnTextContentContainer\">\n<tbody>\n<tr>\n<td valign=\"top\" class=\"mcnTextContent\" style=\"padding-top: 0;padding-right: 18px;padding-bottom: 9px;padding-left: 18px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;word-break: break-word;color: #202020;font-family: Helvetica;font-size: 16px;line-height: 150%;text-align: left;\">\n<div style=\"font-family:rubik, helvetica;\">\n<p style=\"font-family: rubik, helvetica;margin: 10px 0;padding: 0;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #202020;font-size: 16px;line-height: 150%;text-align: left;\">I think the redesign is a pretty wonderful start to the year but we also just published our <a href=\"https:\/\/css-tricks.com\/2018-staff-favorites\/\" style=\"mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #2BAADF;font-weight: normal;text-decoration: underline;\">favorite posts and news from 2018<\/a>. It\u2019s neat to skim back through how much changed over the past twelve months (this post also reminded me to check out Sarah\u2019s exciting article all about <a href=\"https:\/\/css-tricks.com\/introducing-github-actions\/\" style=\"mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #2BAADF;font-weight: normal;text-decoration: underline;\">GitHub Actions<\/a> again) and\u00a0I can\u2019t wait to see how these tools, websites, and browser features are improved upon this year.<\/p>\n<p style=\"font-family: rubik, helvetica;margin: 10px 0;padding: 0;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #202020;font-size: 16px;line-height: 150%;text-align: left;\">What’s going to happen in 2019? We’ll have to see!<\/p>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t<\/td>\n\n\n\t\t\t\t<![endif]--><\/p>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t<\/tr>\n\n\n\t\t\t\t<\/table>\n\n\n\t\t\t\t<![endif]-->\n <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table class=\"mcnImageBlock\" style=\"min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\n<tbody class=\"mcnImageBlockOuter\">\n<tr>\n<td style=\"padding: 9px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" class=\"mcnImageBlockInner\" valign=\"top\">\n<table class=\"mcnImageContentContainer\" style=\"min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\" align=\"left\">\n<tbody>\n<tr>\n<td class=\"mcnImageContent\" style=\"padding-right: 9px;padding-left: 9px;padding-top: 0;padding-bottom: 0;text-align: center;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" valign=\"top\">\n<p> <img decoding=\"async\" alt=\"\" src=\"https:\/\/i0.wp.com\/gallery.mailchimp.com\/155f5a9ccc4e24c318130cace\/images\/0190939f-2dd2-40d0-a4d4-154b1f9a5f96.png?w=564&ssl=1\" style=\"max-width: 1200px;padding-bottom: 0;display: inline !important;vertical-align: bottom;border: 0;height: auto;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;\" class=\"mcnImage\" align=\"middle\" data-recalc-dims=\"1\"><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table class=\"mcnTextBlock\" style=\"min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\n<tbody class=\"mcnTextBlockOuter\">\n<tr>\n<td class=\"mcnTextBlockInner\" style=\"padding-top: 9px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" valign=\"top\">\n \t<!--[if mso]>\n\t\t\t\t\n\n<table align=\"left\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" width=\"100%\" style=\"width:100%;\">\n\t\t\t\t\n\n<tr>\n\t\t\t\t<![endif]--><\/p>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t\n\n<td valign=\"top\" width=\"600\" style=\"width:600px;\">\n\t\t\t\t<![endif]--><\/p>\n<table style=\"max-width: 100%;min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" class=\"mcnTextContentContainer\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\" align=\"left\">\n<tbody>\n<tr>\n<td class=\"mcnTextContent\" style=\"padding: 0px 18px 9px;font-family: \"Lato\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;word-break: break-word;color: #202020;font-size: 16px;line-height: 150%;text-align: left;\" valign=\"top\">\n<link href=\"https:\/\/fonts.googleapis.com\/css?family=Rubik:400,400i,500\" rel=\"stylesheet\">\n<h1 style=\"text-align: left;display: block;margin: 0;padding: 0;color: #202020;font-family: Helvetica;font-size: 26px;font-style: normal;font-weight: bold;line-height: 125%;letter-spacing: normal;\"><span style=\"font-size:20px\"><strong><span style=\"color:#FF8C00\"><span style=\"font-family:lato,helvetica neue,helvetica,arial,sans-serif\"> <\/span><span style=\"color:#f15f25; font-family:rubik,lato,helvetica neue,helvetica,arial,sans-serif; font-weight:500\"> From the Blog<\/span><\/span><\/strong><\/span><\/h1>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t<\/td>\n\n\n\t\t\t\t<![endif]--><\/p>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t<\/tr>\n\n\n\t\t\t\t<\/table>\n\n\n\t\t\t\t<![endif]-->\n <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table class=\"mcnTextBlock\" style=\"min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\n<tbody class=\"mcnTextBlockOuter\">\n<tr>\n<td class=\"mcnTextBlockInner\" style=\"padding-top: 9px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" valign=\"top\">\n \t<!--[if mso]>\n\t\t\t\t\n\n<table align=\"left\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" width=\"100%\" style=\"width:100%;\">\n\t\t\t\t\n\n<tr>\n\t\t\t\t<![endif]--><\/p>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t\n\n<td valign=\"top\" width=\"600\" style=\"width:600px;\">\n\t\t\t\t<![endif]--><\/p>\n<table style=\"max-width: 100%;min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" class=\"mcnTextContentContainer\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\" align=\"left\">\n<tbody>\n<tr>\n<td class=\"mcnTextContent\" style=\"padding: 0px 18px 9px;font-family: \"Lato\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;word-break: break-word;color: #202020;font-size: 16px;line-height: 150%;text-align: left;\" valign=\"top\">\n<h1 style=\"font-weight: 500;display: block;margin: 0;padding: 0;color: #202020;font-family: Helvetica;font-size: 26px;font-style: normal;line-height: 125%;letter-spacing: normal;text-align: left;\"><span style=\"font-family:rubik,helvetica\">Thank You (2018 Edition)<\/span><\/h1>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t<\/td>\n\n\n\t\t\t\t<![endif]--><\/p>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t<\/tr>\n\n\n\t\t\t\t<\/table>\n\n\n\t\t\t\t<![endif]-->\n <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table class=\"mcnTextBlock\" style=\"min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\n<tbody class=\"mcnTextBlockOuter\">\n<tr>\n<td class=\"mcnTextBlockInner\" style=\"padding-top: 9px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" valign=\"top\">\n \t<!--[if mso]>\n\t\t\t\t\n\n<table align=\"left\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" width=\"100%\" style=\"width:100%;\">\n\t\t\t\t\n\n<tr>\n\t\t\t\t<![endif]--><\/p>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t\n\n<td valign=\"top\" width=\"600\" style=\"width:600px;\">\n\t\t\t\t<![endif]--><\/p>\n<table style=\"max-width: 100%;min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" class=\"mcnTextContentContainer\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\" align=\"left\">\n<tbody>\n<tr>\n<td class=\"mcnTextContent\" style=\"padding-top: 0;padding-right: 18px;padding-bottom: 9px;padding-left: 18px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;word-break: break-word;color: #202020;font-family: Helvetica;font-size: 16px;line-height: 150%;text-align: left;\" valign=\"top\">\n<div style=\"font-family:rubik, helvetica;\">\n<p style=\"font-family: rubik, helvetica;margin: 10px 0;padding: 0;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #202020;font-size: 16px;line-height: 150%;text-align: left;\">To kick things off, Chris looks at <a href=\"https:\/\/css-tricks.com\/thank-you-2018-edition\/\" target=\"_blank\" style=\"mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #2BAADF;font-weight: normal;text-decoration: underline;\">how CSS-Tricks has been doing<\/a> over the last twelve months but I particularly like what Chris has to say here:<\/p>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t<\/td>\n\n\n\t\t\t\t<![endif]--><\/p>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t<\/tr>\n\n\n\t\t\t\t<\/table>\n\n\n\t\t\t\t<![endif]-->\n <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table class=\"mcnTextBlock\" style=\"min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\n<tbody class=\"mcnTextBlockOuter\">\n<tr>\n<td class=\"mcnTextBlockInner\" style=\"padding-top: 9px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" valign=\"top\">\n \t<!--[if mso]>\n\t\t\t\t\n\n<table align=\"left\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" width=\"100%\" style=\"width:100%;\">\n\t\t\t\t\n\n<tr>\n\t\t\t\t<![endif]--><\/p>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t\n\n<td valign=\"top\" width=\"600\" style=\"width:600px;\">\n\t\t\t\t<![endif]--><\/p>\n<table style=\"max-width: 100%;min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" class=\"mcnTextContentContainer\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\" align=\"left\">\n<tbody>\n<tr>\n<td class=\"mcnTextContent\" style=\"padding: 0px 18px 9px;font-family: \"Lato\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;word-break: break-word;color: #202020;font-size: 16px;line-height: 150%;text-align: left;\" valign=\"top\">\n<blockquote style=\"font-family: rubik, helvetica;padding: 20px;margin: 0;background: linear-gradient(#f2ece7, #f1e7eb);mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\"><p><span style=\"font-size:19px\"><span style=\"color:#000000\"><em><span>For the last few years, I’ve been trying to think of CSS-Tricks as this two-headed beast. One head is that we’re trying to produce long-lasting referential content. We want to be a site that you come to or land on to find answers to front-end questions. The other head is that we want to be able to be read like a magazine. Subscribe, pop by once a week, snag the RSS feed… whatever you like, we hope CSS-Tricks is interesting to read as a hobbyist magazine or industry rag.<\/span><\/em><\/span><\/span><\/p><\/blockquote>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t<\/td>\n\n\n\t\t\t\t<![endif]--><\/p>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t<\/tr>\n\n\n\t\t\t\t<\/table>\n\n\n\t\t\t\t<![endif]-->\n <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" class=\"mcnTextBlock\" style=\"min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\">\n<tbody class=\"mcnTextBlockOuter\">\n<tr>\n<td valign=\"top\" class=\"mcnTextBlockInner\" style=\"padding-top: 9px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\">\n \t<!--[if mso]>\n\t\t\t\t\n\n<table align=\"left\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" width=\"100%\" style=\"width:100%;\">\n\t\t\t\t\n\n<tr>\n\t\t\t\t<![endif]--><\/p>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t\n\n<td valign=\"top\" width=\"600\" style=\"width:600px;\">\n\t\t\t\t<![endif]--><\/p>\n<table align=\"left\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" style=\"max-width: 100%;min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" width=\"100%\" class=\"mcnTextContentContainer\">\n<tbody>\n<tr>\n<td valign=\"top\" class=\"mcnTextContent\" style=\"padding-top: 0;padding-right: 18px;padding-bottom: 9px;padding-left: 18px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;word-break: break-word;color: #202020;font-family: Helvetica;font-size: 16px;line-height: 150%;text-align: left;\">\n<div style=\"font-family:rubik, helvetica;\">\n<p style=\"font-family: rubik, helvetica;margin: 10px 0;padding: 0;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #202020;font-size: 16px;line-height: 150%;text-align: left;\">We have a couple of new goals for the upcoming year that are\u00a0pretty exciting: from polishing the new design, and improving this here newsletter, to improving our expanding Guides. But more importantly: thanks for reading. As Chris said, reader like you make all this possible.<\/p>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t<\/td>\n\n\n\t\t\t\t<![endif]--><\/p>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t<\/tr>\n\n\n\t\t\t\t<\/table>\n\n\n\t\t\t\t<![endif]-->\n <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table class=\"mcnImageBlock\" style=\"min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\n<tbody class=\"mcnImageBlockOuter\">\n<tr>\n<td style=\"padding: 9px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" class=\"mcnImageBlockInner\" valign=\"top\">\n<table class=\"mcnImageContentContainer\" style=\"min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\" align=\"left\">\n<tbody>\n<tr>\n<td class=\"mcnImageContent\" style=\"padding-right: 9px;padding-left: 9px;padding-top: 0;padding-bottom: 0;text-align: center;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" valign=\"top\">\n<p> <img decoding=\"async\" alt=\"\" src=\"https:\/\/i0.wp.com\/gallery.mailchimp.com\/155f5a9ccc4e24c318130cace\/images\/0190939f-2dd2-40d0-a4d4-154b1f9a5f96.png?w=564&ssl=1\" style=\"max-width: 1200px;padding-bottom: 0;display: inline !important;vertical-align: bottom;border: 0;height: auto;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;\" class=\"mcnImage\" align=\"middle\" data-recalc-dims=\"1\"><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table class=\"mcnTextBlock\" style=\"min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\n<tbody class=\"mcnTextBlockOuter\">\n<tr>\n<td class=\"mcnTextBlockInner\" style=\"padding-top: 9px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" valign=\"top\">\n \t<!--[if mso]>\n\t\t\t\t\n\n<table align=\"left\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" width=\"100%\" style=\"width:100%;\">\n\t\t\t\t\n\n<tr>\n\t\t\t\t<![endif]--><\/p>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t\n\n<td valign=\"top\" width=\"600\" style=\"width:600px;\">\n\t\t\t\t<![endif]--><\/p>\n<table style=\"max-width: 100%;min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" class=\"mcnTextContentContainer\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\" align=\"left\">\n<tbody>\n<tr>\n<td class=\"mcnTextContent\" style=\"padding: 0px 18px 9px;font-family: \"Lato\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;word-break: break-word;color: #202020;font-size: 16px;line-height: 150%;text-align: left;\" valign=\"top\">\n<h1 style=\"font-weight: 500;display: block;margin: 0;padding: 0;color: #202020;font-family: Helvetica;font-size: 26px;font-style: normal;line-height: 125%;letter-spacing: normal;text-align: left;\">\n<span style=\"font-family:rubik,helvetica\">Storing and Using the Last Known Route in Vue<\/span><\/h1>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t<\/td>\n\n\n\t\t\t\t<![endif]--><\/p>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t<\/tr>\n\n\n\t\t\t\t<\/table>\n\n\n\t\t\t\t<![endif]-->\n <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" class=\"mcnTextBlock\" style=\"min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\">\n<tbody class=\"mcnTextBlockOuter\">\n<tr>\n<td valign=\"top\" class=\"mcnTextBlockInner\" style=\"padding-top: 9px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\">\n \t<!--[if mso]>\n\t\t\t\t\n\n<table align=\"left\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" width=\"100%\" style=\"width:100%;\">\n\t\t\t\t\n\n<tr>\n\t\t\t\t<![endif]--><\/p>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t\n\n<td valign=\"top\" width=\"600\" style=\"width:600px;\">\n\t\t\t\t<![endif]--><\/p>\n<table align=\"left\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" style=\"max-width: 100%;min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" width=\"100%\" class=\"mcnTextContentContainer\">\n<tbody>\n<tr>\n<td valign=\"top\" class=\"mcnTextContent\" style=\"padding-top: 0;padding-right: 18px;padding-bottom: 9px;padding-left: 18px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;word-break: break-word;color: #202020;font-family: Helvetica;font-size: 16px;line-height: 150%;text-align: left;\">\n<div style=\"font-family:rubik, helvetica;\">\n<p style=\"font-family: rubik, helvetica;margin: 10px 0;padding: 0;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #202020;font-size: 16px;line-height: 150%;text-align: left;\">That\u2019s just what Mateusz Rybczonek looks at in <a href=\"https:\/\/css-tricks.com\/storing-and-using-the-last-known-route-in-vue\/\" style=\"mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #2BAADF;font-weight: normal;text-decoration: underline;\">this post\u00a0about Vue<\/a>:<\/p>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t<\/td>\n\n\n\t\t\t\t<![endif]--><\/p>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t<\/tr>\n\n\n\t\t\t\t<\/table>\n\n\n\t\t\t\t<![endif]-->\n <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table class=\"mcnTextBlock\" style=\"min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\n<tbody class=\"mcnTextBlockOuter\">\n<tr>\n<td class=\"mcnTextBlockInner\" style=\"padding-top: 9px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" valign=\"top\">\n \t<!--[if mso]>\n\t\t\t\t\n\n<table align=\"left\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" width=\"100%\" style=\"width:100%;\">\n\t\t\t\t\n\n<tr>\n\t\t\t\t<![endif]--><\/p>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t\n\n<td valign=\"top\" width=\"600\" style=\"width:600px;\">\n\t\t\t\t<![endif]--><\/p>\n<table style=\"max-width: 100%;min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" class=\"mcnTextContentContainer\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\" align=\"left\">\n<tbody>\n<tr>\n<td class=\"mcnTextContent\" style=\"padding: 0px 18px 9px;font-family: \"Lato\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;word-break: break-word;color: #202020;font-size: 16px;line-height: 150%;text-align: left;\" valign=\"top\">\n<blockquote style=\"font-family: rubik, helvetica;padding: 20px;margin: 0;background: linear-gradient(#f2ece7, #f1e7eb);mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\"><p><span style=\"font-size:19px\"><span style=\"color:#000000\"><em><span>There are situations where keeping a reference to the last route a user visited can come in handy. For example, let\u2019s say we\u2019re working with a multi-step form and the user proceeds from one step to the next. It would be ideal to have the route of that previous step in hand so we know where the user left off, in the event that they navigate away and come back later to complete the form later..<\/span><\/em><\/span><\/span><\/p><\/blockquote>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t<\/td>\n\n\n\t\t\t\t<![endif]--><\/p>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t<\/tr>\n\n\n\t\t\t\t<\/table>\n\n\n\t\t\t\t<![endif]-->\n <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table class=\"mcnImageBlock\" style=\"min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\n<tbody class=\"mcnImageBlockOuter\">\n<tr>\n<td style=\"padding: 9px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" class=\"mcnImageBlockInner\" valign=\"top\">\n<table class=\"mcnImageContentContainer\" style=\"min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\" align=\"left\">\n<tbody>\n<tr>\n<td class=\"mcnImageContent\" style=\"padding-right: 9px;padding-left: 9px;padding-top: 0;padding-bottom: 0;text-align: center;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" valign=\"top\">\n<p> <img decoding=\"async\" alt=\"\" src=\"https:\/\/i0.wp.com\/gallery.mailchimp.com\/155f5a9ccc4e24c318130cace\/images\/cd4daf50-fa36-48de-99fe-1d781b375154.png?w=564&ssl=1\" style=\"max-width: 1000px;padding-bottom: 0;display: inline !important;vertical-align: bottom;border: 0;height: auto;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;\" class=\"mcnImage\" align=\"middle\" data-recalc-dims=\"1\"><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table class=\"mcnTextBlock\" style=\"min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\n<tbody class=\"mcnTextBlockOuter\">\n<tr>\n<td class=\"mcnTextBlockInner\" style=\"padding-top: 9px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" valign=\"top\">\n \t<!--[if mso]>\n\t\t\t\t\n\n<table align=\"left\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" width=\"100%\" style=\"width:100%;\">\n\t\t\t\t\n\n<tr>\n\t\t\t\t<![endif]--><\/p>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t\n\n<td valign=\"top\" width=\"600\" style=\"width:600px;\">\n\t\t\t\t<![endif]--><\/p>\n<table style=\"max-width: 100%;min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" class=\"mcnTextContentContainer\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\" align=\"left\">\n<tbody>\n<tr>\n<td class=\"mcnTextContent\" style=\"padding-top: 0;padding-right: 18px;padding-bottom: 9px;padding-left: 18px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;word-break: break-word;color: #202020;font-family: Helvetica;font-size: 16px;line-height: 150%;text-align: left;\" valign=\"top\">\n<div style=\"font-family:rubik, helvetica;\">\n<p style=\"font-family: rubik, helvetica;margin: 10px 0;padding: 0;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #202020;font-size: 16px;line-height: 150%;text-align: left;\">This is perhaps one of the easiest things to mess up when working on an application\u2014making sure that the back button always works no matter what\u2014and so this is a great post in order to figure out how best to prevent that.<\/p>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t<\/td>\n\n\n\t\t\t\t<![endif]--><\/p>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t<\/tr>\n\n\n\t\t\t\t<\/table>\n\n\n\t\t\t\t<![endif]-->\n <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table class=\"mcnImageBlock\" style=\"min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\n<tbody class=\"mcnImageBlockOuter\">\n<tr>\n<td style=\"padding: 9px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" class=\"mcnImageBlockInner\" valign=\"top\">\n<table class=\"mcnImageContentContainer\" style=\"min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\" align=\"left\">\n<tbody>\n<tr>\n<td class=\"mcnImageContent\" style=\"padding-right: 9px;padding-left: 9px;padding-top: 0;padding-bottom: 0;text-align: center;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" valign=\"top\">\n<p> <img decoding=\"async\" alt=\"\" src=\"https:\/\/i0.wp.com\/gallery.mailchimp.com\/155f5a9ccc4e24c318130cace\/images\/0190939f-2dd2-40d0-a4d4-154b1f9a5f96.png?w=564&ssl=1\" style=\"max-width: 1200px;padding-bottom: 0;display: inline !important;vertical-align: bottom;border: 0;height: auto;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;\" class=\"mcnImage\" align=\"middle\" data-recalc-dims=\"1\"><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table class=\"mcnTextBlock\" style=\"min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\n<tbody class=\"mcnTextBlockOuter\">\n<tr>\n<td class=\"mcnTextBlockInner\" style=\"padding-top: 9px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" valign=\"top\">\n \t<!--[if mso]>\n\t\t\t\t\n\n<table align=\"left\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" width=\"100%\" style=\"width:100%;\">\n\t\t\t\t\n\n<tr>\n\t\t\t\t<![endif]--><\/p>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t\n\n<td valign=\"top\" width=\"600\" style=\"width:600px;\">\n\t\t\t\t<![endif]--><\/p>\n<table style=\"max-width: 100%;min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" class=\"mcnTextContentContainer\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\" align=\"left\">\n<tbody>\n<tr>\n<td class=\"mcnTextContent\" style=\"padding: 0px 18px 9px;font-family: \"Lato\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;word-break: break-word;color: #202020;font-size: 16px;line-height: 150%;text-align: left;\" valign=\"top\">\n<h1 style=\"font-weight: 500;display: block;margin: 0;padding: 0;color: #202020;font-family: Helvetica;font-size: 26px;font-style: normal;line-height: 125%;letter-spacing: normal;text-align: left;\">\n<span style=\"font-family:rubik,helvetica\">A Quick CSS Audit and General Notes About Design Systems<\/span><\/h1>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t<\/td>\n\n\n\t\t\t\t<![endif]--><\/p>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t<\/tr>\n\n\n\t\t\t\t<\/table>\n\n\n\t\t\t\t<![endif]-->\n <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" class=\"mcnTextBlock\" style=\"min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\">\n<tbody class=\"mcnTextBlockOuter\">\n<tr>\n<td valign=\"top\" class=\"mcnTextBlockInner\" style=\"padding-top: 9px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\">\n \t<!--[if mso]>\n\t\t\t\t\n\n<table align=\"left\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" width=\"100%\" style=\"width:100%;\">\n\t\t\t\t\n\n<tr>\n\t\t\t\t<![endif]--><\/p>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t\n\n<td valign=\"top\" width=\"600\" style=\"width:600px;\">\n\t\t\t\t<![endif]--><\/p>\n<table align=\"left\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" style=\"max-width: 100%;min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" width=\"100%\" class=\"mcnTextContentContainer\">\n<tbody>\n<tr>\n<td valign=\"top\" class=\"mcnTextContent\" style=\"padding-top: 0;padding-right: 18px;padding-bottom: 9px;padding-left: 18px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;word-break: break-word;color: #202020;font-family: Helvetica;font-size: 16px;line-height: 150%;text-align: left;\">\n<div style=\"font-family:rubik, helvetica;\">\n<p style=\"font-family: rubik, helvetica;margin: 10px 0;padding: 0;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #202020;font-size: 16px;line-height: 150%;text-align: left;\">Just before the new year, I published some notes about <a href=\"https:\/\/css-tricks.com\/a-quick-css-audit-and-general-notes-about-design-systems\/\" style=\"mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #2BAADF;font-weight: normal;text-decoration: underline;\">design systems and CSS<\/a>. First, I breakdown\u00a0how the CSS of an application I’m working on is structured.\u00a0Then I dig into what I found as I started to investigate it further.<\/p>\n<p style=\"font-family: rubik, helvetica;margin: 10px 0;padding: 0;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #202020;font-size: 16px;line-height: 150%;text-align: left;\">I think the part that really counts though is this bit where I discovered that our CSS didn\u2019t quite match up with our design system and the variables and functions that we\u2019ve made available to other engineers:<\/p>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t<\/td>\n\n\n\t\t\t\t<![endif]--><\/p>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t<\/tr>\n\n\n\t\t\t\t<\/table>\n\n\n\t\t\t\t<![endif]-->\n <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table class=\"mcnTextBlock\" style=\"min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\n<tbody class=\"mcnTextBlockOuter\">\n<tr>\n<td class=\"mcnTextBlockInner\" style=\"padding-top: 9px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" valign=\"top\">\n \t<!--[if mso]>\n\t\t\t\t\n\n<table align=\"left\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" width=\"100%\" style=\"width:100%;\">\n\t\t\t\t\n\n<tr>\n\t\t\t\t<![endif]--><\/p>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t\n\n<td valign=\"top\" width=\"600\" style=\"width:600px;\">\n\t\t\t\t<![endif]--><\/p>\n<table style=\"max-width: 100%;min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" class=\"mcnTextContentContainer\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\" align=\"left\">\n<tbody>\n<tr>\n<td class=\"mcnTextContent\" style=\"padding: 0px 18px 9px;font-family: \"Lato\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;word-break: break-word;color: #202020;font-size: 16px;line-height: 150%;text-align: left;\" valign=\"top\">\n<blockquote style=\"font-family: rubik, helvetica;padding: 20px;margin: 0;background: linear-gradient(#f2ece7, #f1e7eb);mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\"><p><span style=\"font-size:19px\"><span style=\"color:#000000\"><em><span>…my understanding of the design system is different from what\u2019s in the front-end. That\u2019s a big problem! If my understanding of the design system is different from how the CSS works, then there\u2019s enormous potential for engineers and designers to pick up on the wrong patterns and for confusion to disseminate across our organization. Think about the extra bloat and lack of maintainability, not to mention other implications.<\/span><\/em><\/span><\/span><\/p><\/blockquote>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t<\/td>\n\n\n\t\t\t\t<![endif]--><\/p>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t<\/tr>\n\n\n\t\t\t\t<\/table>\n\n\n\t\t\t\t<![endif]-->\n <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" class=\"mcnTextBlock\" style=\"min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\">\n<tbody class=\"mcnTextBlockOuter\">\n<tr>\n<td valign=\"top\" class=\"mcnTextBlockInner\" style=\"padding-top: 9px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\">\n \t<!--[if mso]>\n\t\t\t\t\n\n<table align=\"left\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" width=\"100%\" style=\"width:100%;\">\n\t\t\t\t\n\n<tr>\n\t\t\t\t<![endif]--><\/p>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t\n\n<td valign=\"top\" width=\"600\" style=\"width:600px;\">\n\t\t\t\t<![endif]--><\/p>\n<table align=\"left\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" style=\"max-width: 100%;min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" width=\"100%\" class=\"mcnTextContentContainer\">\n<tbody>\n<tr>\n<td valign=\"top\" class=\"mcnTextContent\" style=\"padding-top: 0;padding-right: 18px;padding-bottom: 9px;padding-left: 18px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;word-break: break-word;color: #202020;font-family: Helvetica;font-size: 16px;line-height: 150%;text-align: left;\">\n<div style=\"font-family:rubik, helvetica;\">\n<p style=\"font-family: rubik, helvetica;margin: 10px 0;padding: 0;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #202020;font-size: 16px;line-height: 150%;text-align: left;\">I mention earlier in the post that there are\u00a0more than 100 colors that are used in our app whilst there are only 68 unique colors defined in our Sass variables. The point of this is that it\u2019s important to forget\u00a0that the design system is what the front-end code is capable of and there can be a disconnect between how you think it works versus how it actually works.<\/p>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t<\/td>\n\n\n\t\t\t\t<![endif]--><\/p>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t<\/tr>\n\n\n\t\t\t\t<\/table>\n\n\n\t\t\t\t<![endif]-->\n <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table class=\"mcnImageBlock\" style=\"min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\n<tbody class=\"mcnImageBlockOuter\">\n<tr>\n<td style=\"padding: 9px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" class=\"mcnImageBlockInner\" valign=\"top\">\n<table class=\"mcnImageContentContainer\" style=\"min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\" align=\"left\">\n<tbody>\n<tr>\n<td class=\"mcnImageContent\" style=\"padding-right: 9px;padding-left: 9px;padding-top: 0;padding-bottom: 0;text-align: center;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" valign=\"top\">\n<p> <img decoding=\"async\" alt=\"\" src=\"https:\/\/i0.wp.com\/gallery.mailchimp.com\/155f5a9ccc4e24c318130cace\/images\/f1d55b1b-e32c-4767-9cf1-5a5c2096b8e6.png?w=564&ssl=1\" style=\"max-width: 1000px;padding-bottom: 0;display: inline !important;vertical-align: bottom;border: 0;height: auto;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;\" class=\"mcnImage\" align=\"middle\" data-recalc-dims=\"1\"><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table class=\"mcnImageBlock\" style=\"min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\n<tbody class=\"mcnImageBlockOuter\">\n<tr>\n<td style=\"padding: 9px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" class=\"mcnImageBlockInner\" valign=\"top\">\n<table class=\"mcnImageContentContainer\" style=\"min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\" align=\"left\">\n<tbody>\n<tr>\n<td class=\"mcnImageContent\" style=\"padding-right: 9px;padding-left: 9px;padding-top: 0;padding-bottom: 0;text-align: center;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" valign=\"top\">\n<p> <img decoding=\"async\" alt=\"\" src=\"https:\/\/i0.wp.com\/gallery.mailchimp.com\/155f5a9ccc4e24c318130cace\/images\/0190939f-2dd2-40d0-a4d4-154b1f9a5f96.png?w=564&ssl=1\" style=\"max-width: 1200px;padding-bottom: 0;display: inline !important;vertical-align: bottom;border: 0;height: auto;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;\" class=\"mcnImage\" align=\"middle\" data-recalc-dims=\"1\"><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" class=\"mcnCaptionBlock\" style=\"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\">\n<tbody class=\"mcnCaptionBlockOuter\">\n<tr>\n<td class=\"mcnCaptionBlockInner\" valign=\"top\" style=\"padding: 9px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\">\n<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" class=\"mcnCaptionRightContentOuter\" width=\"100%\" style=\"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\">\n<tbody>\n<tr>\n<td valign=\"top\" class=\"mcnCaptionRightContentInner\" style=\"padding: 0 9px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\">\n<table align=\"left\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" class=\"mcnCaptionRightImageContentContainer\" width=\"264\" style=\"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\">\n<tbody>\n<tr>\n<td class=\"mcnCaptionRightImageContent\" align=\"center\" valign=\"top\" style=\"mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\">\n<p> <a href=\"https:\/\/synd.co\/2vvk2LX\" title=\"\" class=\"\" target=\"_blank\" style=\"mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" rel=\"noopener\"><\/p>\n<p> <img decoding=\"async\" alt=\"\" src=\"https:\/\/i0.wp.com\/gallery.mailchimp.com\/155f5a9ccc4e24c318130cace\/images\/44c0559d-95fa-40e1-ab8a-1762797adb1f.jpg?w=264&ssl=1\" style=\"max-width: 600px;border: 0;height: auto;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;vertical-align: bottom;\" class=\"mcnImage\" data-recalc-dims=\"1\"><br \/>\n <\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table class=\"mcnCaptionRightTextContentContainer\" align=\"right\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"264\" style=\"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\">\n<tbody>\n<tr>\n<td valign=\"top\" class=\"mcnTextContent\" style=\"mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;word-break: break-word;color: #202020;font-family: Helvetica;font-size: 16px;line-height: 150%;text-align: left;\">\n<div style=\"font-family:rubik, helvetica;\"><span><span style=\"font-size:12px\"><span style=\"color:#f15f25\">SPONSOR<\/span><\/span><br \/>\n<strong><a href=\"https:\/\/templates.netlify.com\/?utm_source=css-tricks&utm_medium=display&utm_campaign=0718\" style=\"font-family: rubik, helvetica;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #2BAADF;font-weight: normal;text-decoration: underline;\" target=\"_blank\" rel=\"noopener\">Netlify<\/a><\/strong><\/span><\/p>\n<p style=\"font-family: rubik, helvetica;margin: 10px 0;padding: 0;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #202020;font-size: 16px;line-height: 150%;text-align: left;\">Here’s how quick, powerful, and flexible <a href=\"https:\/\/templates.netlify.com\/?utm_source=css-tricks&utm_medium=display&utm_campaign=0718\" target=\"_blank\" style=\"mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #2BAADF;font-weight: normal;text-decoration: underline;\" rel=\"noopener\">hosting a site on Netlify<\/a> can be: 1) Connect your repository (like GitHub, GitLab, Bitbucket) 2) Tell it which branch, which directory, and what build command to run 3) That’s it! <a href=\"https:\/\/templates.netlify.com\/?utm_source=css-tricks&utm_medium=display&utm_campaign=0718\" target=\"_blank\" style=\"mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #2BAADF;font-weight: normal;text-decoration: underline;\" rel=\"noopener\">Netlify will deploy your site<\/a> live in seconds.<\/p>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" class=\"mcnImageBlock\" style=\"min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\">\n<tbody class=\"mcnImageBlockOuter\">\n<tr>\n<td valign=\"top\" style=\"padding: 9px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" class=\"mcnImageBlockInner\">\n<table align=\"left\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" class=\"mcnImageContentContainer\" style=\"min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\">\n<tbody>\n<tr>\n<td class=\"mcnImageContent\" valign=\"top\" style=\"padding-right: 9px;padding-left: 9px;padding-top: 0;padding-bottom: 0;text-align: center;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\">\n<p> <img decoding=\"async\" align=\"center\" alt=\"\" src=\"https:\/\/i0.wp.com\/gallery.mailchimp.com\/155f5a9ccc4e24c318130cace\/images\/0190939f-2dd2-40d0-a4d4-154b1f9a5f96.png?w=564&ssl=1\" style=\"max-width: 1200px;padding-bottom: 0;display: inline !important;vertical-align: bottom;border: 0;height: auto;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;\" class=\"mcnImage\" data-recalc-dims=\"1\"><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table class=\"mcnTextBlock\" style=\"min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\n<tbody class=\"mcnTextBlockOuter\">\n<tr>\n<td class=\"mcnTextBlockInner\" style=\"padding-top: 9px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" valign=\"top\">\n \t<!--[if mso]>\n\t\t\t\t\n\n<table align=\"left\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" width=\"100%\" style=\"width:100%;\">\n\t\t\t\t\n\n<tr>\n\t\t\t\t<![endif]--><\/p>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t\n\n<td valign=\"top\" width=\"600\" style=\"width:600px;\">\n\t\t\t\t<![endif]--><\/p>\n<table style=\"max-width: 100%;min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" class=\"mcnTextContentContainer\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\" align=\"left\">\n<tbody>\n<tr>\n<td class=\"mcnTextContent\" style=\"padding-top: 0;padding-right: 18px;padding-bottom: 9px;padding-left: 18px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;word-break: break-word;color: #202020;font-family: Helvetica;font-size: 16px;line-height: 150%;text-align: left;\" valign=\"top\">\n<p style=\"color: #FF8C00;text-align: center;margin: 10px 0;padding: 0;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-family: Helvetica;font-size: 16px;line-height: 150%;\"><span style=\"font-size:20px\"><span style=\"color:#A9A9A9\"><em><span style=\"font-family:lato,helvetica neue,helvetica,arial,sans-serif\">Until next time!<\/span><\/em><\/span><\/span><\/p>\n<div style=\"text-align: center;\"><a href=\"https:\/\/css-tricks.com\/\" target=\"_blank\" style=\"mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #2BAADF;font-weight: normal;text-decoration: underline;\"><img loading=\"lazy\" decoding=\"async\" data-file-id=\"1521\" src=\"https:\/\/i0.wp.com\/gallery.mailchimp.com\/155f5a9ccc4e24c318130cace\/images\/bdd2de32-ccaf-409e-9144-b14dd869e75c.png?resize=250%2C35&ssl=1\" style=\"border: 0px;width: 250px;margin: 0px;height: auto !important;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;\" width=\"250\" height=\"35\" data-recalc-dims=\"1\"><\/a><\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t<\/td>\n\n\n\t\t\t\t<![endif]--><\/p>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t<\/tr>\n\n\n\t\t\t\t<\/table>\n\n\n\t\t\t\t<![endif]-->\n <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\" id=\"templateFooter\" style=\"background:#FAFAFA none no-repeat center\/cover;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #FAFAFA;background-image: none;background-repeat: no-repeat;background-position: center;background-size: cover;border-top: 0;border-bottom: 0;padding-top: 9px;padding-bottom: 9px;\">\n<table class=\"mcnTextBlock\" style=\"min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\n<tbody class=\"mcnTextBlockOuter\">\n<tr>\n<td class=\"mcnTextBlockInner\" style=\"padding-top: 9px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" valign=\"top\">\n \t<!--[if mso]>\n\t\t\t\t\n\n<table align=\"left\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" width=\"100%\" style=\"width:100%;\">\n\t\t\t\t\n\n<tr>\n\t\t\t\t<![endif]--><\/p>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t\n\n<td valign=\"top\" width=\"600\" style=\"width:600px;\">\n\t\t\t\t<![endif]--><\/p>\n<table style=\"max-width: 100%;min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\" class=\"mcnTextContentContainer\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\" align=\"left\">\n<tbody>\n<tr>\n<td class=\"mcnTextContent\" style=\"padding-top: 0;padding-right: 18px;padding-bottom: 9px;padding-left: 18px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;word-break: break-word;color: #656565;font-family: Helvetica;font-size: 12px;line-height: 150%;text-align: center;\" valign=\"top\">\n<p> Want to change how you receive these emails?<br \/>\nYou can <a href=\"*|UPDATE_PROFILE|*\" style=\"mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #656565;font-weight: normal;text-decoration: underline;\">update your preferences<\/a> or <a href=\"*|UNSUB|*\" style=\"mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #656565;font-weight: normal;text-decoration: underline;\">unsubscribe from this list<\/a>.\n <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t<\/td>\n\n\n\t\t\t\t<![endif]--><\/p>\n<p>\t\t\t\t<!--[if mso]>\n\t\t\t\t<\/tr>\n\n\n\t\t\t\t<\/table>\n\n\n\t\t\t\t<![endif]-->\n <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/table>\n<p> <!--[if (gte mso 9)|(IE)]>\n <\/td>\n\n\n <\/tr>\n\n\n <\/table>\n\n\n <![endif]--><br \/>\n <!-- \/\/ END TEMPLATE -->\n <\/td>\n<\/tr>\n<\/table>\n<p> <\/center><br \/>\n <\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"<p>*|MC:SUBJECT|* *|MC_PREVIEW_TEXT|* Robin\u2019s Corner Happy new year! There\u2019s been a few changes around here that are super exciting. First up, Chris and Kylie Timpani redesigned the CSS-Tricks website, and despite being an enormous fan boy myself,\u00a0I think they did a truly outstanding job: New fonts! Gradients all over the place! And a custom scrollbar, too! […]<\/p>\n","protected":false},"template":"","acf":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/newsletters\/281047"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/newsletters"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/newsletters"}],"version-history":[{"count":0,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/newsletters\/281047\/revisions"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=281047"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}