*|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><link href=\"https:\/\/fonts.googleapis.com\/css?family=Lato:400,400i,700,700i\" rel=\"stylesheet\"><\/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\t\t<br \/>\n\t\t<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><br \/>\n\t\t<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 <br \/>\n\t\t\t\t\t\t<\/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 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: 0px;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: 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%;\">\n<p> <img decoding=\"async\" align=\"center\" alt=\"\" src=\"https:\/\/i0.wp.com\/gallery.mailchimp.com\/155f5a9ccc4e24c318130cace\/images\/c2804021-8cb9-4532-8f81-8b6a1805110d.png?w=600&ssl=1\" style=\"max-width: 1282px;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<\/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 border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" 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;\">\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\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" 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%;\">\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 <\/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<\/p>\n<p>\t\t\t\t<\/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<h1 style=\"text-align: center;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\"><br \/>\nThis Week!\u00a0<\/span><\/span><\/strong><\/span><\/h1>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<\/p>\n<p>\t\t\t\t\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<\/p>\n<p>\t\t\t\t<\/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<ul>\n<li style=\"mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\">\n<p style=\"font-family: Lato, \"Helvetica Neue\", Helvetica, Arial, sans-serif;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;\">Bruce Lawson gave a lovely rant and\/or talk all about <a href=\"https:\/\/css-tricks.com\/css-in-js-ftw-wtf\/\" 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-in-JS<\/a> that\u2019s definitely worth checking out.<\/p>\n<\/li>\n<li style=\"mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\">\n<p style=\"font-family: Lato, \"Helvetica Neue\", Helvetica, Arial, sans-serif;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;\">Ethan Marcotte wrote about what he\u2019s learned lately about <a href=\"https:\/\/ethanmarcotte.com\/wrote\/fractional\/\" 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\">the fr unit<\/a>.<\/p>\n<\/li>\n<li style=\"mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\">\n<p style=\"font-family: Lato, \"Helvetica Neue\", Helvetica, Arial, sans-serif;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;\">Hex Naw is <a href=\"https:\/\/hexnaw.com\/\" 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\">a nifty color accessibility tool<\/a> for designers and developers.<\/p>\n<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<\/p>\n<p>\t\t\t\t\n <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" 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;\">\n<tbody class=\"mcnDividerBlockOuter\">\n<tr>\n<td class=\"mcnDividerBlockInner\" style=\"min-width: 100%;padding: 50px 18px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\">\n<table class=\"mcnDividerContent\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" style=\"min-width: 100%;border-top: 3px solid #F29C38;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 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 <\/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<\/p>\n<p>\t\t\t\t<\/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<h1 style=\"text-align: center;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\"><br \/>\nFrom the Blog!\u00a0<\/span><\/span><\/strong><\/span><\/h1>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<\/p>\n<p>\t\t\t\t\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<\/p>\n<p>\t\t\t\t<\/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<h1 style=\"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;text-align: left;\"><span style=\"font-family:lato,helvetica neue,helvetica,arial,sans-serif\">Variable fonts can get pretty, um, weird<\/span><\/h1>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<\/p>\n<p>\t\t\t\t\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<\/p>\n<p>\t\t\t\t<\/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<p style=\"font-family: Lato, \"Helvetica Neue\", Helvetica, Arial, sans-serif;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 it\u2019s easy to forget that variable fonts can change more than just their width or boldness, like in this example:<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<\/p>\n<p>\t\t\t\t\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\/d4c33af1-d50d-48cb-86b2-60e5a54ac745.gif?w=564&ssl=1\" style=\"max-width: 624px;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 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<\/p>\n<p>\t\t\t\t<\/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<p style=\"font-family: Lato, \"Helvetica Neue\", Helvetica, Arial, sans-serif;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;\">Even though that\u2019s certainly cool and helpful \u2013 so that we don\u2019t have to load multiple fonts when we need to do stuff like that \u2013 variable fonts can do all sorts of weird and creepy things. Take <a href=\"https:\/\/codepen.io\/mandymichael\/pen\/YYaWop\" 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\">this demo<\/a> by Mandy Michael that uses Decovar to make a lettering effect where roots stretch out of the letters:<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<\/p>\n<p>\t\t\t\t\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\/e844c9a8-9289-48bd-b654-356587a71819.gif?w=564&ssl=1\" style=\"max-width: 694px;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 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<\/p>\n<p>\t\t\t\t<\/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<p style=\"font-family: Lato, \"Helvetica Neue\", Helvetica, Arial, sans-serif;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;\">Chris has collected <a href=\"https:\/\/css-tricks.com\/weird-things-variable-fonts-can-do\/\" style=\"mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #2BAADF;font-weight: normal;text-decoration: underline;\">a whole bunch of examples<\/a> where variable fonts are pushed to their strangest limits. This proves to me that as more variable fonts come to market and are made available to us, we\u2019re going to have so many new tools to experiment with. And to make the web truly, impossibly weird.<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<\/p>\n<p>\t\t\t\t\n <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" 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;\">\n<tbody class=\"mcnDividerBlockOuter\">\n<tr>\n<td class=\"mcnDividerBlockInner\" style=\"min-width: 100%;padding: 50px 18px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\">\n<table class=\"mcnDividerContent\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" style=\"min-width: 100%;border-top: 3px solid #F29C38;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 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 <\/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<\/p>\n<p>\t\t\t\t<\/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<h1 style=\"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;text-align: left;\"><span style=\"font-family:lato,helvetica neue,helvetica,arial,sans-serif\">Renderless components in Vue<\/span><\/h1>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<\/p>\n<p>\t\t\t\t\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<\/p>\n<p>\t\t\t\t<\/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<p style=\"font-family: Lato, \"Helvetica Neue\", Helvetica, Arial, sans-serif;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 the term for components that don\u2019t render anything. They ultimately help with code reusability, extensability and help you build smaller components, too. In this tutorial, Samuel Oloruntoba describes <a href=\"https:\/\/css-tricks.com\/building-renderless-vue-components\/\" style=\"mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #2BAADF;font-weight: normal;text-decoration: underline;\">why we should to experiment with renderless components<\/a>:<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<\/p>\n<p>\t\t\t\t\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<\/p>\n<p>\t\t\t\t<\/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<blockquote style=\"padding: 20px;margin: 0;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 style=\"background-color:#FFFFE0\">We can chalk it up to creating an abstraction of common component functionality as its own component and extending said component to create better and even more robust components. Also, S.O.L.I.D.\u00a0\u00a0According to the Single responsibility principle of\u00a0S.O.L.I.D.:<\/span><\/em><\/p>\n<p><span style=\"background-color:#FFFFE0\">A class should only have one purpose.<\/span><\/p>\n<p><em><span style=\"background-color:#FFFFE0\">\u00a0We can port over that concept into Vue development by making each component have only one responsibility.<\/span><\/em><\/span><\/span><\/p><\/blockquote>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<\/p>\n<p>\t\t\t\t\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<\/p>\n<p>\t\t\t\t<\/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<p style=\"font-family: Lato, \"Helvetica Neue\", Helvetica, Arial, sans-serif;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 had never heard of the <a href=\"https:\/\/scotch.io\/bar-talk\/s-o-l-i-d-the-first-five-principles-of-object-oriented-design\" 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\">S.O.L.I.D. methodology<\/a> before and it seems like a great idea to take a closer look at it \u2013\u00a0I particularly like the idea of the \u201cOpen-closed Principle\u201d in there. <\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<\/p>\n<p>\t\t\t\t\n <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" 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;\">\n<tbody class=\"mcnDividerBlockOuter\">\n<tr>\n<td class=\"mcnDividerBlockInner\" style=\"min-width: 100%;padding: 50px 18px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\">\n<table class=\"mcnDividerContent\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" style=\"min-width: 100%;border-top: 3px solid #F29C38;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 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 <\/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\/36aea00a-c19c-4b6c-ae62-4d9a85a1988a.png?w=264&ssl=1\" style=\"max-width: 336px;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 <span style=\"font-family:lato,helvetica neue,helvetica,arial,sans-serif\"><span style=\"font-size:12px\"><span style=\"color:#FF8C00\">SPONSOR<\/span><\/span><br \/>\n<strong><a href=\"https:\/\/jetpack.com\/?aff=8638\" 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\">Jetpack<\/a><\/strong><\/span><\/p>\n<p style=\"margin: 10px 0;padding: 0;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #202020;font-family: Helvetica;font-size: 16px;line-height: 150%;text-align: left;\">Jetpack is a WordPress plugin for your self-hosted WordPress site that brings literally dozens and dozens of great features. Here’s one: you can <a href=\"https:\/\/jetpack.com\/?aff=8638\" 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\">customize the CSS<\/a> on your site right from the Appearance menu, even writing new CSS in Sass or Less.<\/p>\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=\"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;\">\n<tbody class=\"mcnDividerBlockOuter\">\n<tr>\n<td class=\"mcnDividerBlockInner\" style=\"min-width: 100%;padding: 50px 18px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\">\n<table class=\"mcnDividerContent\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" style=\"min-width: 100%;border-top: 3px solid #F29C38;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 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 <\/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<\/p>\n<p>\t\t\t\t<\/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<h1 style=\"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;text-align: left;\"><span style=\"font-family:lato,helvetica neue,helvetica,arial,sans-serif\">How to make a modern dashboard with NVD3.js<\/span><\/h1>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<\/p>\n<p>\t\t\t\t\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<\/p>\n<p>\t\t\t\t<\/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<p style=\"font-family: Lato, \"Helvetica Neue\", Helvetica, Arial, sans-serif;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;\">Dan Englishby explores <a href=\"https:\/\/css-tricks.com\/how-to-make-a-modern-dashboard-with-nvd3-js\/\" 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 to make a modern dashboard with NVD3.js<\/a> which happens to be a visualization library that\u2019s based on d3.js. <\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<\/p>\n<p>\t\t\t\t\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\/9f7393a4-a333-49dc-a8a9-208752288cf8.png?w=564&ssl=1\" style=\"max-width: 1198px;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 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<\/p>\n<p>\t\t\t\t<\/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<p style=\"font-family: Lato, \"Helvetica Neue\", Helvetica, Arial, sans-serif;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;\">In this tutorial Dan walks us through all the steps, from setting up the libraries to creating a line and bar charts. This should come in useful!<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<\/p>\n<p>\t\t\t\t\n <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" 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;\">\n<tbody class=\"mcnDividerBlockOuter\">\n<tr>\n<td class=\"mcnDividerBlockInner\" style=\"min-width: 100%;padding: 50px 18px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\">\n<table class=\"mcnDividerContent\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" style=\"min-width: 100%;border-top: 3px solid #F29C38;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 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 <\/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<\/p>\n<p>\t\t\t\t<\/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<h1 style=\"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;text-align: left;\"><span style=\"font-family:lato,helvetica neue,helvetica,arial,sans-serif\">Automation and Node.js<\/span><\/h1>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<\/p>\n<p>\t\t\t\t\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<\/p>\n<p>\t\t\t\t<\/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<p style=\"font-family: Lato, \"Helvetica Neue\", Helvetica, Arial, sans-serif;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;\">In this tutorial Shaun Stone shows us <a href=\"https:\/\/css-tricks.com\/automate-your-workflow-with-node\/\" 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 to use Node to automatically theme a little Canvas game<\/a>. Shaun shows us how to customize it by injecting values into the game to make it look different based on the input, like so:<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<\/p>\n<p>\t\t\t\t\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\/7c8dc076-1550-47bb-a0a0-2f854370a465.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\" 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<\/p>\n<p>\t\t\t\t<\/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<p style=\"font-family: Lato, \"Helvetica Neue\", Helvetica, Arial, sans-serif;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;\">If this example from Shaun\u2019s book <a href=\"https:\/\/www.amazon.co.uk\/dp\/1981028242\/ref=cm_sw_r_cp_ep_dp_355eBbKWCCKQF\" 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\"><em>Automating with Node.js<\/em><\/a> is anything to go by then I\u2019m sure that the whole book is fabulous and is bound to teach us all a little something about Node.<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<\/p>\n<p>\t\t\t\t\n <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" 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;\">\n<tbody class=\"mcnDividerBlockOuter\">\n<tr>\n<td class=\"mcnDividerBlockInner\" style=\"min-width: 100%;padding: 50px 18px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\">\n<table class=\"mcnDividerContent\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" style=\"min-width: 100%;border-top: 3px solid #F29C38;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 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 <\/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<\/p>\n<p>\t\t\t\t<\/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<h1 style=\"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;text-align: left;\"><span style=\"font-family:lato,helvetica neue,helvetica,arial,sans-serif\">Create your own Serverless API<\/span><\/h1>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<\/p>\n<p>\t\t\t\t\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<\/p>\n<p>\t\t\t\t<\/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<p style=\"font-family: Lato, \"Helvetica Neue\", Helvetica, Arial, sans-serif;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;\">Playing around with APIs can be super fun and is a great way to learn about React, Vue or the Angular framework, but Sarah decided to jot down some notes she had about <a href=\"https:\/\/css-tricks.com\/create-your-own-serverless-api\/\" 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 to use Serverless functions to create your own API<\/a>. Sarah writes:<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<\/p>\n<p>\t\t\t\t\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<\/p>\n<p>\t\t\t\t<\/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<blockquote style=\"padding: 20px;margin: 0;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 style=\"background-color:#FFFFE0\">\u2026what if you want or need to make your own API? Serverless can help create a nice one for data you\u2019d like to expose for use.<\/p>\n<p>Serverless really shines for this use case, and hopefully this post makes it clear why. In a non-serverless paradigm, we have to pick something like express, we have to set up endpoints, we have to give your web server secured access to your database server, you have to deploy it, etc. In contrast, here we’ll be able to create an API in a few button clicks, with minor modifications.<\/p>\n<p>Here\u2019s the inspiration for this tutorial: I’ve been building a finder to search for new cocktails and grab a random one. I originally started using ae public API but realized quickly that I found the contents limiting and wanted to shape my own.<\/span><\/em><\/span><\/span><\/p><\/blockquote>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<\/p>\n<p>\t\t\t\t\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<\/p>\n<p>\t\t\t\t<\/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<p style=\"font-family: Lato, \"Helvetica Neue\", Helvetica, Arial, sans-serif;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;\">And this is the nifty app that Sarah creates with the API:<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<\/p>\n<p>\t\t\t\t\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\/ac7aa1f7-b4cf-4bdf-bfaf-6e996320f452.jpg?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 border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" 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;\">\n<tbody class=\"mcnDividerBlockOuter\">\n<tr>\n<td class=\"mcnDividerBlockInner\" style=\"min-width: 100%;padding: 50px 18px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\">\n<table class=\"mcnDividerContent\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" style=\"min-width: 100%;border-top: 3px solid #F29C38;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 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 <\/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\/5be28e6f-6aeb-4c1e-96fd-bf35ead9783d.jpg?w=264&ssl=1\" style=\"max-width: 300px;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 <span style=\"font-family:lato,helvetica neue,helvetica,arial,sans-serif\"><span style=\"font-size:12px\"><span style=\"color:#FF8C00\">SPONSOR<\/span><\/span><br \/>\n<strong><a href=\"https:\/\/synd.co\/2Nn7CtH\" 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\">\u200bBugHerd<\/a><\/strong><\/span><\/p>\n<p style=\"margin: 10px 0;padding: 0;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #202020;font-family: Helvetica;font-size: 16px;line-height: 150%;text-align: left;\">BugHerd turns client feedback into clear actionable tasks with the data you need to resolve the issue. Feedback is pinned to the HTML element, like a sticky-note, and automatically captures screenshots, browser, OS, CSS and more.<br \/>\n<a href=\"https:\/\/synd.co\/2Nn7CtH\" 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\">Try for free today.<\/a><\/p>\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=\"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;\">\n<tbody class=\"mcnDividerBlockOuter\">\n<tr>\n<td class=\"mcnDividerBlockInner\" style=\"min-width: 100%;padding: 50px 18px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\">\n<table class=\"mcnDividerContent\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" style=\"min-width: 100%;border-top: 3px solid #F29C38;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 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 <\/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<\/p>\n<p>\t\t\t\t<\/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<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;\"><img loading=\"lazy\" decoding=\"async\" data-file-id=\"1521\" height=\"35\" 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\" data-recalc-dims=\"1\"><\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<\/p>\n<p>\t\t\t\t\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<\/p>\n<p>\t\t\t\t<\/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<p style=\"font-family: Lato, \"Helvetica Neue\", Helvetica, Arial, sans-serif;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;\">\n<span style=\"color:#FF8C00\"><strong>Chris:<\/strong><\/span> Oooo last thing. Have y’all played with Netlify at all? It’s pretty sweet. I teamed up with Phil Hawksworth to do a couple of (sponsored) <strong>Intro to <\/strong><strong>Netlify<\/strong>\u00a0videos (<a href=\"https:\/\/www.youtube.com\/watch?v=jW9cPKFSUrw&t=140s\" 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\">start here<\/a>).\u00a0<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<\/p>\n<p>\t\t\t\t\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 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<\/p>\n<p>\t\t\t\t<\/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: #656565;font-family: Helvetica;font-size: 12px;line-height: 150%;text-align: center;\">\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<\/p>\n<p>\t\t\t\t\n <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/table>\n<p>\t\t\t\t\t\t<br \/>\n \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|* This Week!\u00a0 Bruce Lawson gave a lovely rant and\/or talk all about CSS-in-JS that\u2019s definitely worth checking out. Ethan Marcotte wrote about what he\u2019s learned lately about the fr unit. Hex Naw is a nifty color accessibility tool for designers and developers. From the Blog!\u00a0 Variable fonts can get pretty, um, weird I […]<\/p>\n","protected":false},"template":"","acf":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/newsletters\/274477"}],"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":1,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/newsletters\/274477\/revisions"}],"predecessor-version":[{"id":274478,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/newsletters\/274477\/revisions\/274478"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=274477"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":274477,"date":"2018-07-23T10:55:40","date_gmt":"2018-07-23T17:55:40","guid":{"rendered":"http:\/\/css-tricks.com\/?post_type=newsletters&p=274477"},"modified":"2018-07-23T10:55:40","modified_gmt":"2018-07-23T17:55:40","slug":"105","status":"publish","type":"newsletters","link":"https:\/\/css-tricks.com\/newsletter\/105\/","title":{"rendered":"105"},"content":{"rendered":"

\n
\n\t
\n\t\t
\n\t\t
\n\t\t
\n
\n
\n\t\t*|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><link href=\"https:\/\/fonts.googleapis.com\/css?family=Lato:400,400i,700,700i\" rel=\"stylesheet\"><\/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\t\t<br \/>\n\t\t<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><br \/>\n\t\t<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 <br \/>\n\t\t\t\t\t\t<\/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 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: 0px;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: 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%;\">\n<p> <img decoding=\"async\" align=\"center\" alt=\"\" src=\"https:\/\/i0.wp.com\/gallery.mailchimp.com\/155f5a9ccc4e24c318130cace\/images\/c2804021-8cb9-4532-8f81-8b6a1805110d.png?w=600&ssl=1\" style=\"max-width: 1282px;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<\/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 border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" 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;\">\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\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" 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%;\">\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 <\/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<\/p>\n<p>\t\t\t\t<\/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<h1 style=\"text-align: center;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\"><br \/>\nThis Week!\u00a0<\/span><\/span><\/strong><\/span><\/h1>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<\/p>\n<p>\t\t\t\t\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<\/p>\n<p>\t\t\t\t<\/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<ul>\n<li style=\"mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\">\n<p style=\"font-family: Lato, \"Helvetica Neue\", Helvetica, Arial, sans-serif;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;\">Bruce Lawson gave a lovely rant and\/or talk all about <a href=\"https:\/\/css-tricks.com\/css-in-js-ftw-wtf\/\" 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-in-JS<\/a> that\u2019s definitely worth checking out.<\/p>\n<\/li>\n<li style=\"mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\">\n<p style=\"font-family: Lato, \"Helvetica Neue\", Helvetica, Arial, sans-serif;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;\">Ethan Marcotte wrote about what he\u2019s learned lately about <a href=\"https:\/\/ethanmarcotte.com\/wrote\/fractional\/\" 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\">the fr unit<\/a>.<\/p>\n<\/li>\n<li style=\"mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\">\n<p style=\"font-family: Lato, \"Helvetica Neue\", Helvetica, Arial, sans-serif;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;\">Hex Naw is <a href=\"https:\/\/hexnaw.com\/\" 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\">a nifty color accessibility tool<\/a> for designers and developers.<\/p>\n<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<\/p>\n<p>\t\t\t\t\n <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" 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;\">\n<tbody class=\"mcnDividerBlockOuter\">\n<tr>\n<td class=\"mcnDividerBlockInner\" style=\"min-width: 100%;padding: 50px 18px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\">\n<table class=\"mcnDividerContent\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" style=\"min-width: 100%;border-top: 3px solid #F29C38;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 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 <\/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<\/p>\n<p>\t\t\t\t<\/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<h1 style=\"text-align: center;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\"><br \/>\nFrom the Blog!\u00a0<\/span><\/span><\/strong><\/span><\/h1>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<\/p>\n<p>\t\t\t\t\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<\/p>\n<p>\t\t\t\t<\/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<h1 style=\"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;text-align: left;\"><span style=\"font-family:lato,helvetica neue,helvetica,arial,sans-serif\">Variable fonts can get pretty, um, weird<\/span><\/h1>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<\/p>\n<p>\t\t\t\t\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<\/p>\n<p>\t\t\t\t<\/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<p style=\"font-family: Lato, \"Helvetica Neue\", Helvetica, Arial, sans-serif;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 it\u2019s easy to forget that variable fonts can change more than just their width or boldness, like in this example:<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<\/p>\n<p>\t\t\t\t\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\/d4c33af1-d50d-48cb-86b2-60e5a54ac745.gif?w=564&ssl=1\" style=\"max-width: 624px;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 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<\/p>\n<p>\t\t\t\t<\/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<p style=\"font-family: Lato, \"Helvetica Neue\", Helvetica, Arial, sans-serif;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;\">Even though that\u2019s certainly cool and helpful \u2013 so that we don\u2019t have to load multiple fonts when we need to do stuff like that \u2013 variable fonts can do all sorts of weird and creepy things. Take <a href=\"https:\/\/codepen.io\/mandymichael\/pen\/YYaWop\" 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\">this demo<\/a> by Mandy Michael that uses Decovar to make a lettering effect where roots stretch out of the letters:<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<\/p>\n<p>\t\t\t\t\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\/e844c9a8-9289-48bd-b654-356587a71819.gif?w=564&ssl=1\" style=\"max-width: 694px;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 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<\/p>\n<p>\t\t\t\t<\/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<p style=\"font-family: Lato, \"Helvetica Neue\", Helvetica, Arial, sans-serif;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;\">Chris has collected <a href=\"https:\/\/css-tricks.com\/weird-things-variable-fonts-can-do\/\" style=\"mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #2BAADF;font-weight: normal;text-decoration: underline;\">a whole bunch of examples<\/a> where variable fonts are pushed to their strangest limits. This proves to me that as more variable fonts come to market and are made available to us, we\u2019re going to have so many new tools to experiment with. And to make the web truly, impossibly weird.<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<\/p>\n<p>\t\t\t\t\n <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" 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;\">\n<tbody class=\"mcnDividerBlockOuter\">\n<tr>\n<td class=\"mcnDividerBlockInner\" style=\"min-width: 100%;padding: 50px 18px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\">\n<table class=\"mcnDividerContent\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" style=\"min-width: 100%;border-top: 3px solid #F29C38;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 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 <\/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<\/p>\n<p>\t\t\t\t<\/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<h1 style=\"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;text-align: left;\"><span style=\"font-family:lato,helvetica neue,helvetica,arial,sans-serif\">Renderless components in Vue<\/span><\/h1>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<\/p>\n<p>\t\t\t\t\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<\/p>\n<p>\t\t\t\t<\/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<p style=\"font-family: Lato, \"Helvetica Neue\", Helvetica, Arial, sans-serif;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 the term for components that don\u2019t render anything. They ultimately help with code reusability, extensability and help you build smaller components, too. In this tutorial, Samuel Oloruntoba describes <a href=\"https:\/\/css-tricks.com\/building-renderless-vue-components\/\" style=\"mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #2BAADF;font-weight: normal;text-decoration: underline;\">why we should to experiment with renderless components<\/a>:<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<\/p>\n<p>\t\t\t\t\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<\/p>\n<p>\t\t\t\t<\/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<blockquote style=\"padding: 20px;margin: 0;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 style=\"background-color:#FFFFE0\">We can chalk it up to creating an abstraction of common component functionality as its own component and extending said component to create better and even more robust components. Also, S.O.L.I.D.\u00a0\u00a0According to the Single responsibility principle of\u00a0S.O.L.I.D.:<\/span><\/em><\/p>\n<p><span style=\"background-color:#FFFFE0\">A class should only have one purpose.<\/span><\/p>\n<p><em><span style=\"background-color:#FFFFE0\">\u00a0We can port over that concept into Vue development by making each component have only one responsibility.<\/span><\/em><\/span><\/span><\/p><\/blockquote>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<\/p>\n<p>\t\t\t\t\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<\/p>\n<p>\t\t\t\t<\/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<p style=\"font-family: Lato, \"Helvetica Neue\", Helvetica, Arial, sans-serif;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 had never heard of the <a href=\"https:\/\/scotch.io\/bar-talk\/s-o-l-i-d-the-first-five-principles-of-object-oriented-design\" 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\">S.O.L.I.D. methodology<\/a> before and it seems like a great idea to take a closer look at it \u2013\u00a0I particularly like the idea of the \u201cOpen-closed Principle\u201d in there. <\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<\/p>\n<p>\t\t\t\t\n <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" 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;\">\n<tbody class=\"mcnDividerBlockOuter\">\n<tr>\n<td class=\"mcnDividerBlockInner\" style=\"min-width: 100%;padding: 50px 18px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\">\n<table class=\"mcnDividerContent\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" style=\"min-width: 100%;border-top: 3px solid #F29C38;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 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 <\/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\/36aea00a-c19c-4b6c-ae62-4d9a85a1988a.png?w=264&ssl=1\" style=\"max-width: 336px;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 <span style=\"font-family:lato,helvetica neue,helvetica,arial,sans-serif\"><span style=\"font-size:12px\"><span style=\"color:#FF8C00\">SPONSOR<\/span><\/span><br \/>\n<strong><a href=\"https:\/\/jetpack.com\/?aff=8638\" 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\">Jetpack<\/a><\/strong><\/span><\/p>\n<p style=\"margin: 10px 0;padding: 0;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #202020;font-family: Helvetica;font-size: 16px;line-height: 150%;text-align: left;\">Jetpack is a WordPress plugin for your self-hosted WordPress site that brings literally dozens and dozens of great features. Here’s one: you can <a href=\"https:\/\/jetpack.com\/?aff=8638\" 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\">customize the CSS<\/a> on your site right from the Appearance menu, even writing new CSS in Sass or Less.<\/p>\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=\"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;\">\n<tbody class=\"mcnDividerBlockOuter\">\n<tr>\n<td class=\"mcnDividerBlockInner\" style=\"min-width: 100%;padding: 50px 18px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\">\n<table class=\"mcnDividerContent\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" style=\"min-width: 100%;border-top: 3px solid #F29C38;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 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 <\/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<\/p>\n<p>\t\t\t\t<\/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<h1 style=\"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;text-align: left;\"><span style=\"font-family:lato,helvetica neue,helvetica,arial,sans-serif\">How to make a modern dashboard with NVD3.js<\/span><\/h1>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<\/p>\n<p>\t\t\t\t\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<\/p>\n<p>\t\t\t\t<\/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<p style=\"font-family: Lato, \"Helvetica Neue\", Helvetica, Arial, sans-serif;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;\">Dan Englishby explores <a href=\"https:\/\/css-tricks.com\/how-to-make-a-modern-dashboard-with-nvd3-js\/\" 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 to make a modern dashboard with NVD3.js<\/a> which happens to be a visualization library that\u2019s based on d3.js. <\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<\/p>\n<p>\t\t\t\t\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\/9f7393a4-a333-49dc-a8a9-208752288cf8.png?w=564&ssl=1\" style=\"max-width: 1198px;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 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<\/p>\n<p>\t\t\t\t<\/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<p style=\"font-family: Lato, \"Helvetica Neue\", Helvetica, Arial, sans-serif;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;\">In this tutorial Dan walks us through all the steps, from setting up the libraries to creating a line and bar charts. This should come in useful!<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<\/p>\n<p>\t\t\t\t\n <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" 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;\">\n<tbody class=\"mcnDividerBlockOuter\">\n<tr>\n<td class=\"mcnDividerBlockInner\" style=\"min-width: 100%;padding: 50px 18px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\">\n<table class=\"mcnDividerContent\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" style=\"min-width: 100%;border-top: 3px solid #F29C38;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 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 <\/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<\/p>\n<p>\t\t\t\t<\/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<h1 style=\"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;text-align: left;\"><span style=\"font-family:lato,helvetica neue,helvetica,arial,sans-serif\">Automation and Node.js<\/span><\/h1>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<\/p>\n<p>\t\t\t\t\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<\/p>\n<p>\t\t\t\t<\/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<p style=\"font-family: Lato, \"Helvetica Neue\", Helvetica, Arial, sans-serif;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;\">In this tutorial Shaun Stone shows us <a href=\"https:\/\/css-tricks.com\/automate-your-workflow-with-node\/\" 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 to use Node to automatically theme a little Canvas game<\/a>. Shaun shows us how to customize it by injecting values into the game to make it look different based on the input, like so:<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<\/p>\n<p>\t\t\t\t\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\/7c8dc076-1550-47bb-a0a0-2f854370a465.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\" 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<\/p>\n<p>\t\t\t\t<\/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<p style=\"font-family: Lato, \"Helvetica Neue\", Helvetica, Arial, sans-serif;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;\">If this example from Shaun\u2019s book <a href=\"https:\/\/www.amazon.co.uk\/dp\/1981028242\/ref=cm_sw_r_cp_ep_dp_355eBbKWCCKQF\" 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\"><em>Automating with Node.js<\/em><\/a> is anything to go by then I\u2019m sure that the whole book is fabulous and is bound to teach us all a little something about Node.<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<\/p>\n<p>\t\t\t\t\n <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" 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;\">\n<tbody class=\"mcnDividerBlockOuter\">\n<tr>\n<td class=\"mcnDividerBlockInner\" style=\"min-width: 100%;padding: 50px 18px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\">\n<table class=\"mcnDividerContent\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" style=\"min-width: 100%;border-top: 3px solid #F29C38;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 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 <\/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<\/p>\n<p>\t\t\t\t<\/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<h1 style=\"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;text-align: left;\"><span style=\"font-family:lato,helvetica neue,helvetica,arial,sans-serif\">Create your own Serverless API<\/span><\/h1>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<\/p>\n<p>\t\t\t\t\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<\/p>\n<p>\t\t\t\t<\/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<p style=\"font-family: Lato, \"Helvetica Neue\", Helvetica, Arial, sans-serif;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;\">Playing around with APIs can be super fun and is a great way to learn about React, Vue or the Angular framework, but Sarah decided to jot down some notes she had about <a href=\"https:\/\/css-tricks.com\/create-your-own-serverless-api\/\" 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 to use Serverless functions to create your own API<\/a>. Sarah writes:<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<\/p>\n<p>\t\t\t\t\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<\/p>\n<p>\t\t\t\t<\/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<blockquote style=\"padding: 20px;margin: 0;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 style=\"background-color:#FFFFE0\">\u2026what if you want or need to make your own API? Serverless can help create a nice one for data you\u2019d like to expose for use.<\/p>\n<p>Serverless really shines for this use case, and hopefully this post makes it clear why. In a non-serverless paradigm, we have to pick something like express, we have to set up endpoints, we have to give your web server secured access to your database server, you have to deploy it, etc. In contrast, here we’ll be able to create an API in a few button clicks, with minor modifications.<\/p>\n<p>Here\u2019s the inspiration for this tutorial: I’ve been building a finder to search for new cocktails and grab a random one. I originally started using ae public API but realized quickly that I found the contents limiting and wanted to shape my own.<\/span><\/em><\/span><\/span><\/p><\/blockquote>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<\/p>\n<p>\t\t\t\t\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<\/p>\n<p>\t\t\t\t<\/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<p style=\"font-family: Lato, \"Helvetica Neue\", Helvetica, Arial, sans-serif;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;\">And this is the nifty app that Sarah creates with the API:<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<\/p>\n<p>\t\t\t\t\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\/ac7aa1f7-b4cf-4bdf-bfaf-6e996320f452.jpg?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 border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" 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;\">\n<tbody class=\"mcnDividerBlockOuter\">\n<tr>\n<td class=\"mcnDividerBlockInner\" style=\"min-width: 100%;padding: 50px 18px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\">\n<table class=\"mcnDividerContent\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" style=\"min-width: 100%;border-top: 3px solid #F29C38;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 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 <\/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\/5be28e6f-6aeb-4c1e-96fd-bf35ead9783d.jpg?w=264&ssl=1\" style=\"max-width: 300px;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 <span style=\"font-family:lato,helvetica neue,helvetica,arial,sans-serif\"><span style=\"font-size:12px\"><span style=\"color:#FF8C00\">SPONSOR<\/span><\/span><br \/>\n<strong><a href=\"https:\/\/synd.co\/2Nn7CtH\" 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\">\u200bBugHerd<\/a><\/strong><\/span><\/p>\n<p style=\"margin: 10px 0;padding: 0;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #202020;font-family: Helvetica;font-size: 16px;line-height: 150%;text-align: left;\">BugHerd turns client feedback into clear actionable tasks with the data you need to resolve the issue. Feedback is pinned to the HTML element, like a sticky-note, and automatically captures screenshots, browser, OS, CSS and more.<br \/>\n<a href=\"https:\/\/synd.co\/2Nn7CtH\" 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\">Try for free today.<\/a><\/p>\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=\"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;\">\n<tbody class=\"mcnDividerBlockOuter\">\n<tr>\n<td class=\"mcnDividerBlockInner\" style=\"min-width: 100%;padding: 50px 18px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;\">\n<table class=\"mcnDividerContent\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" style=\"min-width: 100%;border-top: 3px solid #F29C38;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 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 <\/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<\/p>\n<p>\t\t\t\t<\/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<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;\"><img loading=\"lazy\" decoding=\"async\" data-file-id=\"1521\" height=\"35\" 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\" data-recalc-dims=\"1\"><\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<\/p>\n<p>\t\t\t\t\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<\/p>\n<p>\t\t\t\t<\/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<p style=\"font-family: Lato, \"Helvetica Neue\", Helvetica, Arial, sans-serif;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;\">\n<span style=\"color:#FF8C00\"><strong>Chris:<\/strong><\/span> Oooo last thing. Have y’all played with Netlify at all? It’s pretty sweet. I teamed up with Phil Hawksworth to do a couple of (sponsored) <strong>Intro to <\/strong><strong>Netlify<\/strong>\u00a0videos (<a href=\"https:\/\/www.youtube.com\/watch?v=jW9cPKFSUrw&t=140s\" 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\">start here<\/a>).\u00a0<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\t\t\t\t<\/p>\n<p>\t\t\t\t\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 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<\/p>\n<p>\t\t\t\t<\/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: #656565;font-family: Helvetica;font-size: 12px;line-height: 150%;text-align: center;\">\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<\/p>\n<p>\t\t\t\t\n <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/table>\n<p>\t\t\t\t\t\t<br \/>\n \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|* This Week!\u00a0 Bruce Lawson gave a lovely rant and\/or talk all about CSS-in-JS that\u2019s definitely worth checking out. Ethan Marcotte wrote about what he\u2019s learned lately about the fr unit. Hex Naw is a nifty color accessibility tool for designers and developers. From the Blog!\u00a0 Variable fonts can get pretty, um, weird I […]<\/p>\n","protected":false},"template":"","acf":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/newsletters\/274477"}],"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":1,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/newsletters\/274477\/revisions"}],"predecessor-version":[{"id":274478,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/newsletters\/274477\/revisions\/274478"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=274477"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}