{"id":293778,"date":"2019-08-05T08:04:28","date_gmt":"2019-08-05T15:04:28","guid":{"rendered":"https:\/\/css-tricks.com\/?post_type=newsletters&#038;p=293778"},"modified":"2019-08-05T08:04:29","modified_gmt":"2019-08-05T15:04:29","slug":"158","status":"publish","type":"newsletters","link":"https:\/\/css-tricks.com\/newsletter\/158\/","title":{"rendered":"158"},"content":{"rendered":"<h2 class=\"wp-block-heading\" id=\"links-from-around-the-web\">Links from around the web<\/h2>\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/08\/Aug-04-2019-08-28-16.gif?ssl=1\" alt=\"\" class=\"wp-image-293846\" data-recalc-dims=\"1\"\/><\/figure>\n\n\n\n<p>This week Cassie Evans walks us through how she made the <a href=\"https:\/\/www.cassie.codes\/posts\/creating-my-logo-animation\/\" rel=\"noopener\">animated logo<\/a> on her ever-so-wonderful website. There\u2019s a lot of super nifty notes here about SVG stroke animation and using Greensock, too.<\/p>\n\n\n\n<p>I especially love the bouncy, fun jump at the end with the dot on the i! It kinda makes all the difference in the world, that one tiny animation. <\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>Andy Bell and Heydon Pickering\u2019s <a href=\"https:\/\/every-layout.dev\/\" rel=\"noopener\">Every Layout<\/a> is now available for purchase! In the book, Andy and Heydon walk through all the joys and difficulties of building layouts in CSS and if you\u2019re just getting started with front-end development then it\u2019s probably the best book you can get right now to get a sense of the fundamentals.<\/p>\n\n\n\n<p>But! I think there\u2019s a lot of useful stuff in here for more experienced folks, too. <a href=\"https:\/\/every-layout.dev\/rudiments\/global-and-local-styling\/\" rel=\"noopener\">For example<\/a>: <\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>One thing we highly recommend is not including utility classes until you need them. You don\u2019t want to send users any unused or redundant data. For this project, we maintain a helpers.css file and add utilities as we find ourselves reaching for them. If we find the text-align:center class isn\u2019t taking effect, we must not have added it in the CSS yet \u2014 so we put it in our helpers.css file for present and future use.<\/p><\/blockquote>\n\n\n\n<p>I would go one step further and argue that we need to make sure that all of our CSS is actually being used because it\u2019s pretty common in large codebases for there to be thousands and thousands of declarations that are effectively doing nothing.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/08\/newsletters-1.jpg?resize=1024%2C385&#038;ssl=1\" alt=\"\" class=\"wp-image-293877\" data-recalc-dims=\"1\"\/><\/figure>\n\n\n\n<p>The folks at Vox wrote about some of their <a href=\"https:\/\/product.voxmedia.com\/2019\/7\/31\/20696395\/chorus-accessibility-improvements\" rel=\"noopener\">recent work improving the accessibility<\/a> of <a href=\"https:\/\/getchorus.voxmedia.com\/\" rel=\"noopener\">Chorus<\/a>. In one section that caught my eye, Nicole Zhu writes about the work the team did to make sure that their form fields for newsletter sign ups were accessible for everyone: <\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>We added required field indicators both visually and in the HTML with the <code>required<\/code> attribute. We removed all use of HTML placeholder attributes, and added consistent form field labels. For people using assistive technology, we\u2019ve improved the way newsletter signup forms are described. When you navigate to the start of the component, the specific newsletter title is announced in a more descriptive way, and the legal terms are read aloud before you can submit the form.<\/p><\/blockquote>\n\n\n\n<p>All of this is surprising in a number of ways. The first is that investing this much time on accessibility is simply wondrous. The second thing is that although this is a pretty lengthy post that details their work, it still probably only scratches the surface of everything that was done during these accessibility projects.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/08\/GA_Announcement__Blog_Post.jpg?resize=1024%2C483&#038;ssl=1\" alt=\"\" class=\"wp-image-293848\" data-recalc-dims=\"1\"\/><\/figure>\n\n\n\n<p>Earlier this week, Figma announced that they\u2019re <a href=\"https:\/\/www.figma.com\/blog\/introducing-figma-plugins\/\" rel=\"noopener\">launching plugins<\/a> so that developers and designers can extend the core set of features that come out of the box. It\u2019s one of the major missing features that other design tools such as Sketch have had for a pretty long time already but now that they\u2019re in my favorite design tool I think it\u2019s worth digging into a few of them.<\/p>\n\n\n\n<p>For example, the Unsplash plugin will allow you to select from a vast library of stock images which can be pretty handy when designing <abbr>UI<\/abbr>. All you have to do is install it, right click on the page, select Plugins &gt; Unsplash and that\u2019s it! No more aimless searching around for stock photography. <\/p>\n\n\n\n<p>It works a little like this:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/08\/Aug-04-2019-08-38-05.gif?ssl=1\" alt=\"\" class=\"wp-image-293855\" data-recalc-dims=\"1\"\/><\/figure>\n\n\n\n<p>Another one of my favorite plugins that I\u2019ve been needing for a good long while without realizing it is Autoflow. If you select two frames with this plugin it will simply draw a line between them. But this is handy because I\u2019m often making wireframes and complex flows that require a bit of explanation and drawing all these arrows by hand can get tiresome quick. So that prevents me having to do all that work!<\/p>\n\n\n\n<p><a href=\"http:\/\/contentreel.design\/\" rel=\"noopener\">Content Reel<\/a> is where things get <em>real<\/em> interesting though. It\u2019s a plugin by Microsoft that allows us to quickly drop in realistic names, phone numbers, user names and email addresses. Here\u2019s one example I made in a quick mockup of a Contacts screen:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/08\/Aug-04-2019-08-38-54.gif?ssl=1\" alt=\"\" class=\"wp-image-293856\" data-recalc-dims=\"1\"\/><\/figure>\n\n\n\n<p>I do a lot of clicking in this example to drive home the point but if you type <ckbd>cmd<\/kbd> + <kbd>shift<\/kbd> + <kbd>p<\/kbd> in Figma it will run the last plugin you selected. So in practice updating this mock with fake content can be a whole bunch faster than I show above. The team at Microsoft will also be adding the ability to drag in avatars from Content Reel and so all of this is going to become exponentially more practical for designing <abbr>UI<\/abbr> quickly.<\/p>\n\n\n\n<p>And this is only the beginning! There are a lot of other super nifty and interesting plugins out there but so far I\u2019ve found that these are the few that I find myself constantly using in my day-to-day work. <\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"from-the-blog\">From the Blog <\/h2>\n\n<h3 class=\"wp-block-heading\" id=\"using-netlify-forms-and-netlify-functions-to-build-an-email-signup-widget\"><a href=\"https:\/\/css-tricks.com\/using-netlify-forms-and-netlify-functions-to-build-an-email-sign-up-widget\/\">Using Netlify Forms and Netlify Functions to Build an Email Sign-Up Widget<\/a><\/h3>\n\n\n<p>Matthew Str\u00f6m has written a lovely piece about how to get started with serverless functions. He walks us through building a mailing list sign up form with 11ty, Netlify, and the emailing service Buttondown: <\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>All in all, I only had to write about 50 lines of code to have a functional email newsletter sign-up form available on my website. I wrote it all in HTML, CSS, and JavaScript, without having to fret with the server side of the equation. The form handles spam, and my readers get a nice experience whether they have JavaScript enabled or not.<\/p><\/blockquote>\n\n\n\n<p>As Matthew notes, it\u2019s completely wild that these services are free \u2013 at least at the base tiers. And so it kinda shows just how much power and how many wonderful tools that us front-end developers now have at our fingertips. <\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n<h3 class=\"wp-block-heading\" id=\"weekly-platform-news\"><a href=\"https:\/\/css-tricks.com\/weekly-platform-news-preventing-image-loads-with-the-picture-element-the-web-we-want-svg-styles-are-not-scoped\/\">Weekly Platform News<\/a><\/h3>\n\n\n<p>\u0160ime Vidas has the hot scoops of the week, from preventing image loading with the picture element to showcasing <a href=\"https:\/\/webwewant.fyi\/\" rel=\"noopener\">The Web We Want<\/a>, which happens to be a nifty website that lets you send in features you\u2019d like to see in browsers.<\/p>\n\n\n\n<p>I\u2019d also make a quick note here that in the latest version of Chrome there is now support for the <a href=\"https:\/\/css-tricks.com\/the-backdrop-filter-css-property\/\"><code>backdrop-filter<\/code> CSS property<\/a> that we wrote about a while back. It lets us add filters to the background of an element without changing the text or elements inside, like this recreation of iOS notifications:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/08\/ezgif.com-gif-maker.gif?ssl=1\" alt=\"\" class=\"wp-image-293853\" data-recalc-dims=\"1\"\/><\/figure>\n\n\n\n<p>See how the background blurs slightly? That\u2019s the <code>backdrop-filter<\/code> property at work! It makes this kinda neat frosted glass effect.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n<h3 class=\"wp-block-heading\" id=\"making-a-realistic-glass-effect-with-svg\"><a href=\"https:\/\/css-tricks.com\/the-backdrop-filter-css-property\/\">Making a Realistic Glass Effect with SVG<\/a><\/h3>\n\n\n<p>Speaking of posted glass, Dave Fitzgibbon has written up how to make a similar effect with SVG alone. He builds a demo that looks like this:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/08\/s_4004E9C3CECA71C539FA0898B02357BFCD2D084FE74FE61425FACC265C73A4A2_1562586045333_SVGGlassTextEffect-10everythinginplace_aqydck.jpg?resize=1024%2C700&#038;ssl=1\" alt=\"\" class=\"wp-image-293854\" data-recalc-dims=\"1\"\/><\/figure>\n\n\n\n<p>At the beginning of the post Dave argues that we should try to make writing SVG easy on ourselves, as it\u2019s easy to get lost within the dense code:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>SVG code is dense so I like to use two or three new lines to space things out. It makes the code easier to read and helps me see how different pieces are separated with less visual distraction. Oh, and use comments to mark where you are in the document, too. That can help organize your thoughts and document your findings.<\/p><\/blockquote>\n\n\n\n<p>I think this is a pretty darn good suggestion for whenever writing code: don\u2019t over-optimize for machines to read your code, make sure you can read it first and foremost. And if that means adding a little space between things then that\u2019s what you should probably do. <\/p>\n\n\n\n<p>Treat yo self!<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/synd.co\/2JU7pzf\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/08\/R1-STATIC-FSA-Road-to-Code-Ad-Perspective-Road-1200x600px.jpg?resize=1024%2C512&#038;ssl=1\" alt=\"\" class=\"wp-image-293779\" data-recalc-dims=\"1\"\/><\/a><\/figure>\n\n\n\n<small style=\"color:#ff8a00;\">SPONSOR<\/small>\n<h2 style=\"margin:0 0 15px;padding-top:0;\"><a href=\"https:\/\/synd.co\/2JU7pzf\" rel=\"noopener\">Fullstack Academy of Code<\/a><\/h2>\n\n\n\n<p>Want to become a software engineer, launch a start-up, or take the next step in your career? Fullstack Academy has your customized path to success.<\/p>\n\n\n\n<p><a href=\"https:\/\/synd.co\/2JU7pzf\" rel=\"noopener\">Map Out Your Career Path<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Links from around the web This week Cassie Evans walks us through how she made the animated logo on her ever-so-wonderful website. There\u2019s a lot of super nifty notes here about SVG stroke animation and using Greensock, too. I especially love the bouncy, fun jump at the end with the dot on the i! It [&hellip;]<\/p>\n","protected":false},"template":"","acf":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/newsletters\/293778"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/newsletters"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/newsletters"}],"version-history":[{"count":0,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/newsletters\/293778\/revisions"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=293778"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}