![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/Screenshot-2019-10-27-22.18.54.png?resize=1024%2C513&ssl=1\")
<\/figure>\n\n\n\nAlso, in my experience, this is the best way to work across engineering and design. Once the hand-off happens a designer should expect to sort of work like a consultant, constantly giving feedback and making sure that all the edge cases have been covered; responsive design, accessibility, interactions, and animations, etc. Those things are especially hard to get right in the first mockup. <\/p>\n\n\n\n
\n\n\n\n
Here\u2019s a swell post from Hussein Al Hammad on bidirectional horizontal rules in CSS<\/a>, or building support for left-to-right and right-to-left interfaces with some interesting new CSS properties like Those properties are pretty handy if you want to add styles depending on which direction the language is flowing, like the example above with the border.<\/p>\n\n\n\n <\/p>\n\n\n Container queries are a nifty idea: imagine if instead of having to write media queries, where we\u2019re changing the design of something based on the width of the viewport, we could write container queries which would allow us to change the design of something based on the width of itself.<\/p>\n\n\n\n In this post, Chris collects a bunch of thoughts from around the web on this subject:<\/p>\n\n\n\n Container queries are always on the top of the list of requested improvements to CSS. The general sentiment is that if we had container queries, we wouldn’t write as many global media queries based on page size. That’s because we’re actually trying to control a more scoped container, and the only reason we use media queries for that now is because it’s the best tool we have in CSS. I absolutely believe that.<\/p><\/blockquote>\n\n\n\n There are a lot of problems that container queries would solve for me in my day-to-day work as now I\u2019m only really focusing on components instead of page design. It makes sense to isolate most styles to components rather than pages anywho and I reckon it would give us web design superpowers that are hard to imagine today.<\/p>\n\n\n\n Last week, I wrote some quick thoughts about accessibility and why there appear to be so few websites and teams that are genuinely working towards making the web accessible for everyone:<\/p>\n\n\n\n I reckon a lot of websites have bad accessibility not because folks don\u2019t care, but because they don\u2019t know there’s an issue in the first place. As my conversation with front-end engineers progressed, I realized that the reason accessibility isn\u2019t tackled seriously probably doesn\u2019t have anything to do with bandwidth, or experience, or money.<\/p> I reckon the problem is that the accessibility of a website can be invisibly and silently broken.<\/p><\/blockquote>\n\n\n\n This isn\u2019t to say that it\u2019s just about tooling. I think that accessibility and performance are in a category of problems that are almost impossible to identify without<\/em> good tools. So I made some designs for an inline accessibility and performance tool and how it could help as we type (rather than being left to a build step or warning after you push the code).<\/p>\n\n\n\n Ollie Williams writes about what makes Svelte different to other frameworks, such as React or Vue: <\/p>\n\n\n\n \u2026the JavaScript, markup and styling for a component can all exist together in a single On the Svelte website, the framework is also described like so: \u201cwhereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.\u201d <\/p>\n\n\n\n After reading Ollie\u2019s post I also watched Rich Harris\u2019s excellent talk called “Rethinking reactivity”<\/a> where he talks about virtual DOM libraries and why he began the development of Svelte:<\/p>\n\n\n\n There\u2019s also a great introduction to Svelte<\/a> that\u2019s worth checking out by Dave Ceddia.<\/p>\n\n\n\n Geoff investigates how the WordPress team made the fancy animation below and walks us through how to animate inline SVG, step by step. And we can do this with the The drawing is a CSS animation using one keyframe. If we start the There are so<\/em> many cool things you can do with this technique. One example is this demo I made with just a few of these layers stacked on top of each other:<\/p>\n\n\n\n Chris has the scoop on Netlify\u2019s new feature called Build Plugins and it works a little something like this:<\/p>\n\n\n\n With this new Build Plugins release, Netlify is opening up access to how Build works. No longer is it just “connect to repo and run this command when the build runs.” There is actually a whole lifecycle of things that happen during a build.<\/p> What if you could hook into those lifecycle events and run your own code alongside them? That\u2019s the whole idea with Build Plugins. <\/p><\/blockquote>\n\n\n\n There are already a ton of great plugins that exist, like Lighthouse, that tracks your performance score between deployments or SVG optimizer which does just what it says and optimizes all SVGs in a directory when the site is built.<\/p>\n\n\n\n Maks Akymenko writes about what he loves most about Parcel:<\/p>\n\n\n\n Parcel allows you to simply start developing. That\u2019s the biggest advantage of using it as a bundler \u2014 alongside its blazing fast compiling that utilizes multicore processing where other bundlers, including webpack, work off of complex and heavy transforms. [\u2026] The thing I love the most about this bundler: it doesn\u2019t need any configuration. Literally, none at all! Compare that to webpack where configuration can be strewn across several files all containing tons of code\u2026 that you may have picked up from other people\u2019s configurations or inherited from other projects.<\/p><\/blockquote>\n\n\n\n Maks then takes Parcel out for a test drive to show how simple it is to set things up. He runs us through how to make a little website and it really is remarkable how little configuration is required to get going. <\/p>\n\n\n\n Here\u2019s also another post that might be worth checking out as well that compares webpack and Parcel<\/a> side by side and breaks down all their differences.<\/p>\n\n\n\n QA & Devs agree on quality releases. Testim.io<\/a> is the AI-powered solution to speed up the creation, execution, and maintenance of automated tests. We use dynamic locators and learn with every execution \u2014 but there is so much more we do!<\/p>\n\n\n\nborder-inline-start<\/code> and padding-inline-start<\/code>. <\/p>\n\n\n\n![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/Screenshot-2019-10-27-19.37.07.png?resize=1024%2C373&ssl=1\")
<\/figure>\n\n\n\n
\n\n\n\n? This week on the blog<\/h2>\n\n
Let\u2019s Not Forget About Container Queries<\/a><\/h3>\n\n\n
\n\n\nWhy are accessible websites so hard to build?<\/a><\/h3>\n\n\n
![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/code-accessibility-warning_q6qahz-1.jpg?resize=1024%2C793&ssl=1\")
<\/figure>\n\n\n\n
\n\n\nWhat I Like About Writing Styles with Svelte<\/a><\/h3>\n\n\n
.svelte<\/code>\u200b file. If you\u2019ve ever used single file components in Vue, then Svelte will look familiar.<\/p><\/blockquote>\n\n\n\n![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/Screenshot-2019-10-27-20.02.52.png?resize=1024%2C640&ssl=1\")
<\/figure>\n\n\n\n
\n\n\nDigging Into the Preview Loading Animation in WordPress<\/a><\/h3>\n\n\n
stroke-dasharray<\/code> and stroke-dashoffset<\/code>:<\/p>\n\n\n\n![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/wp-preview-loader_rmiynb.gif?ssl=1\")
<\/figure>\n\n\n\nstroke-dashoffset<\/code> at zero, then the paths will be invisible on initial load and grow to the 300 value we set earlier when the animation reaches 100%. Again, we set the offset at 300 so that the stroke dashes and the spaces between them will extend beyond the SVG to cover the entire thing.<\/p><\/blockquote>\n\n\n\n![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/Oct-27-2019-21-09-05.gif?ssl=1\")
<\/figure>\n\n\n\n
\n\n\nNetlify Build Plugins Announcement<\/a><\/h3>\n\n\n
\n\n\nWhy Parcel Has Become My Go-To Bundler for Development<\/a><\/h3>\n\n\n
![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/Screenshot-2019-10-27-22.33.19.png?resize=1024%2C691&ssl=1\")
<\/figure>\n\n\n\n
\n\n\n\n![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/testim-newsletter.gif?ssl=1\")
<\/a><\/figure>\n\n\n\nSPONSOR<\/small>\nTestim.io Free Trial – See for yourself.<\/a><\/h2>\n\n\n\n