Smashing Newsletter #254: Custom CSS Cascades, Focus Blocks and CORS

With our new book, custom CSS cascades, GitHub tips and tricks, CORS and accessibility.Issue #254 • Tue, May 12, 2020 • [View in the browser]( 💨 [Smashing Newsletter]( Dear Friend, There is no shortage of books on marketing and UX. Still, when it comes to bridging the gap between the two, many of us struggle to find the right balance. As businesses, we need to meet out targets, but as designers, we don’t want to end up with a frustrating user experience. We really need both, and we need a reliable strategy to get there. [click-the-book.png]( Meet Click!, our new book on improving sales while improving UX. That’s why we’ve written [Click!]( a new book on how to encourage clicks without shady tricks. The book, written by [Paul Boag]( and beautifully designed by Veerle Pieters, explores practical strategies for driving sales and boosting business KPIs without alienating customers along the way. You can [get the book already]( with a lil’ friendly discount, and you can start reading the eBook already — the printed copies will be shipped early June. We’ve also asked (poor) Paul to prepare a lil' gift for the first 500 readers, so make sure to get a printed copy soon! Of course, if you feel smashing today, we kindly invite you to [join the Smashing family]( and get the eBook for free (among with many other eBooks and a few fancy cats!). Happy reading, everyone! Vitaly ([@smashingmag]( --------------------------------------------------------------- Table of Contents 1. [Custom CSS Cascades](#a1) 2. [GitHub Tips And Tricks](#a2) 3. [Meet SmashingConf Live](#a3) 4. [Will It CORS?](#a4) 5. [Creating Accessible Color Palettes](#a5) 6. [Slack Communities For Designers](#a6) 7. [Making Focus Blocks Work](#a7) 8. [The Sound Of Colleagues](#a8) 9. [Upcoming In Smashing Membership](#a9) 10. [Our Next Smashing Workshops](#a10) 11. [New On Smashing Job Board](#a11) 12. [Our Most Popular Articles](#a12) --------------------------------------------------------------- #1. Custom CSS Cascades Miriam Suzanne built a demo to illustrate a [very clever way to define a cascade of custom properties](. One that allows you to determine which intent should take priority, without worrying about the specificity of how the value is defined. [Custom Cascades]( Miriam shows how it works at the example of a button. Due to how the cascade is arranged, the default button is always falling back to --btn-bg--default. Adding the disabled attribute, always overrides any other button colors, no matter where they are defined, and, when new button types are created, --btn-bg--type ensures that only the defaults are overridden but not the state. The approach also lets you set these values contextually. A smart solution to avoid the usual dangers that highly-specified inline styles usually bring along. (cm) --------------------------------------------------------------- #2. GitHub Tips And Tricks Do you know how to automatically squash commits on GitHub when merging pull requests? Or how to open a repo in the browser using GitHub CLI? If not, Joe Previte’s [collection of GitHub tips and tricks]( might be for you. [GitHub Tips And Tricks]( In bite-sized videos, Joe shares small but powerful tips to take your GitHub workflow to the next level. And for those of you who prefer to learn by reading, most tips are also available as short blog posts. Handy little timesavers. (cm) --------------------------------------------------------------- #3. Meet SmashingConf Live: Our New Interactive Online Conference In these strange times when everything is connected, it’s too easy to feel lonely and detached. Yes, everybody is just one message away, but there is always something in the way — deadlines to meet, Slack messages to reply, or urgent PRs to review. Connections need time and space to grow, and conferences are a great way to find that time and that space. [SmashingConf Live]( That’s why we’ve been working on [SmashingConf Live]( (June 9–10), our new friendly online conference on front-end & UX. With interactive live sessions, practical insights, accessible speakers, Q&As, collaborative notes and fireplace chats with like-minded folks. With Sarah Drasner, Brad Frost, Chris Coyier and [many others](. [Smashing Meets]( We’d love to see you in June, or maybe even sooner? Next week we’ll run [Smashing Meets]( our very first free online meet-ups, with 3 speakers each day, and plenty of collaborative challenges as well. We are such an incredible, friendly, global community — so let’s meet and stay connected! (vf) --------------------------------------------------------------- #4. Will It CORS? Cross-Origin Resource Sharing (CORS) is how browsers decide how a web application can communicate with other services. Security-wise, it’s important to be careful about where you send requests to and restrict the communication. But what is safe and what could turn into a security risk? [Will It CORS?]( The folks behind HTTP Toolkit built a little [tool to help you assess just that](. Once you’ve entered the URL of the page that wants to send a request, the URL it wants to send it to, as well as some other details, Will It CORS? will tell you if it’s safe to send and if the response can be read. A useful helper. (cm) --------------------------------------------------------------- From our sponsor Build in-demand skills in Northwestern’s online MS in Info. Design & Strategy [TITLE]( Earn your master’s degree [online](. --------------------------------------------------------------- #5. Creating Accessible Color Palettes Finding the perfect tint or shade of a color is not only a matter of taste but also accessibility. After all, if color contrast is lacking, a product could, in the worst case, even become unusable for people with vision impairments. A very detailed contrast checker to help you detect potential pitfalls ahead of time comes from Gianluca Gini: [Geenes](. [Geenes]( The tool lets you tinker with hue ranges and saturation and apply the color palettes to one of three selectable UI mockups. Once applied, you can trigger different kinds of vision impairments to see how affected people see the colors and, finally, make an informed decision on the best tones for your palette. To use the colors right away, just copy and paste their code or export them to Sketch. (cm) --------------------------------------------------------------- #6. Slack Communities For Designers Supporting each other, sharing inspiration, asking for feedback, encouraging discussion — all of this is a crucial part of any creative process. If you’re a designer and are eager to connect with likeminded people, there are a lot of design communities on Slack to participate in. To help you discover the right one for your needs, Ryan Yao set up [Designer Slack Communities](. [Designer Slack Communities]( No matter if you’re into animation, web typography, or UX, or are looking for ways to create positive social change, explore how to shape a design culture, or just want to talk shop about design systems, Ryan’s overview has got you covered. If you know of a community that is worth joining but not listed yet, you are welcome to add it. Happy connecting! (cm) --------------------------------------------------------------- #7. Making Focus Blocks Work The flow state is ideal when it comes to work. Streaks of uninterrupted work where you feel immersed by what you’re doing and not only get a lot done but produce quality results. Reaching that much sought-after flow can be a challenge though with calls, meetings, and pings calling for attention and interrupting you from what you’re doing. [Focus blocks]( An approach that might help you set aside time for focused work is focus blocks, i.e. time slots without any meetings and other distractions. However, the concept does only make sense when you’ve got everyone on board. Cameron Moll knows this from experience and shares some [valuable tips on how cross-functional teams can make it work](. Why not give it a try? (cm) --------------------------------------------------------------- From our sponsor Free Ebook - Learn How Managed WordPress Hosting Can Save You Time and Money Discover the real value of managed WordPress hosting in Kinsta’s [free ebook](. Features like automatic backups, iron-clad site security, and customer support from a team of WordPress experts can save you from the hassle of troubleshooting issues on your own, allowing you to focus on growing your business and increasing revenue. Whether you’re an agency, large enterprise, freelancer, or anything in between, you can find benefits to managed WordPress hosting. [Save Time and Money with Managed Wordpress Hosting]( Download your [free eBook]( to gain these insights today. --------------------------------------------------------------- #8. The Sound Of Colleagues Working from home can have some real advantages over working from an office, but let’s be honest, it can be a rather lonely experience, too, when there are no colleagues around. If you feel your home office is getting too quiet and you need some bustle in the background to stay focused, [The Sound of Colleagues]( has got your back. [The Sound Of Colleagues]( The Sound of Colleagues lets you mix office noises to create your custom office ambient noise. People typing and talking, phones ringing, the coffee machine, the printer — all of these little things add up to bring a bit of office feeling to your home. Maybe it’ll even help you boost your productivity, who knows? (cm) --------------------------------------------------------------- #9. Upcoming In Smashing Membership A few weeks ago, we released the [Smart Interface Design Checklists]( a free PDF deck with questions for designers and developers to consider when designing anything from accordions and hamburgers to maps and tables. Made possible with the kind support of Smashing Members. So thank you! ❤️ [SmashingConf Workshops]( - “[Inspired Design Decisions With Max Huber]( with Andrew Clarke— May 12 at 15:00 London time - [Smashing Meets: Our New Online Meet-up]( with Mark Boulton, Yiying Lu, Phil Hawksworth and others— May 18–19 - “[Expand Your Test Coverage: Manual And Accessibility Testing Unite]( with Carie Fisher and Harris Schneiderman— May 19 at 18:00 London time Dear friends, thank you for your kind support. It allows us to bring you great content, pay all our contributors fairly, and reduce advertising on the site. Join us in Smashingland where everyone is beautiful and you never get merge conflicts. 😉 --------------------------------------------------------------- #10. Our Next Smashing Conferences and Workshops In our workshops, we explore best practices and interesting techniques in front-end and interface design, always focusing on actual solutions to real-life problems. We also have [online workshops]( that are designed to give you the same experience and access to experts as in an in-person workshop, but without needing to leave your desk. - [SmashingConf Live]( our online conference with Sarah Drasner, Brad Frost, Josh Clark and others (June 9–10) - [Smart Interface Design Patterns]( with Vitaly Friedman (May 12–26) - [Web Performance Masterclass]( with Harry Roberts (May 28-June 12) - [The CSS Layout Masterclass]( with Rachel Andrew (June 11–12) - [Front-End Accessibility Masterclass]( with Marcy Sutton (June 16-30) - [Building Modern HTML Emails]( with Rémi Parmentier (June 18-26) - [Buy! The eCommerce UX Workshop]( with Vitaly Friedman (July 2-17) - [Design Systems]( with Brad Frost (July 7-21) [SmashingConf Workshops]( Meet [Smashing Online Workshops]( on front-end & UX, with Marcy Sutton, Harry Roberts, Brad Frost and many others. Or, if you’d like to run an online workshop with your team, please get in touch with Vitaly at vitaly@smashingconf.com and briefly describe what problems you’re facing and would like to solve. Get in touch — it’s that easy! (vf) --------------------------------------------------------------- #11. New On Smashing Job Board - [Senior PHP / WordPress Plugin Developer]( at WP White Security (Anywhere) “You will be leading the development of our WordPress plugins portfolio. Your tasks will span from designing new features, writing code and bug fixing, expecting that new and changed code is thoroughly tested and well documented.” - [UX Research Writer & Analyst]( at Baymard Institute (US East Coast + UK) “Would you like to join a team of dedicated usability research writers, who analyze and write about cutting-edge User Experience research? Producing UX research findings that will be used by thousands of web professionals, including some of the biggest brands in the world (including Nike, Sears, Lenovo, Etsy)?” - [UX/UI Designer (d/f/m)]( at moovel Group GmbH (Hamburg, Germany) “If you’re a product and interaction driven design enthusiast you should join us on our journey inventing the future of mobility! For our team, we are searching for a UX/UI Designer (d/f/m) in Hamburg.” --------------------------------------------------------------- #12. Our Most Popular Articles - [How To Build A Vue Survey App Using Firebase Authentication And Database]( This tutorial would take you on a step by step guide to build a functional survey app using Vue.js and Firebase. From validating the user’s data through Vuelidate, to authentication, storing the user’s data, route protection and sending data to Firebase servers. All the steps used in the tutorial are practical, and can be reproduced in any real-life project, even with a custom backend. - [An Introduction To React With Ionic]( We’re going to build a mobile application that pulls data from the Marvel Comics API; the data will show Marvel comics and you’ll be able to choose your favorites. At the end, we’ll create a native build of the project on Android. - [Reducing Design Risk]( The pressure to rush market and usability research carries risk. We’ll offer four practical techniques to mitigate this risk and create designs that better serve customers and the company: context over convenience, compromise, better design decisions, design reduction. --------------------------------------------------------------- This newsletter issue was written and researched by Cosima Mielke, Iris Lješnjanin, Rachel Andrew, Vitaly Friedman and Christiane Rosenberger. Sent to truly [smashing]( readers via [Mailchimp](. We sincerely appreciate your kind support. You rock. [Follow us on Twitter]( • [Join us on Facebook]( --------------------------------------------------------------- With useful tips for web devs. Sent 2× a month. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](