![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/11\/Screenshot-2019-11-10-20.19.31.png?resize=1024%2C940&ssl=1\")
<\/figure>\n\n\n\nAlso the fun part of this is how the paintings breaks down in different browsers. When I opened up this site in my RSS reader\u2019s browser, this is the spooky Halloween version I found instead:<\/p>\n\n\n\n Here\u2019s a wonderful reminder from Stephanie Stimac about web performance<\/a>. She writes about a recent experience of moving to an area with an unreliable network and how this caused problems for her as she tried to figure out what was happening during a power blackout.<\/p>\n\n\n\n There were 4.6MB of unused code being downloaded on a page whose main and only content, apart from a sign in button, is a form to submit your address.<\/p><\/blockquote>\n\n\n\n Stefanie\u2019s story is a good although somewhat frustrating reminder that performance and accessibility are not features, they\u2019re the baseline<\/a>.<\/p>\n\n\n\n The Verge made a fun list of old scroll bars<\/a> and the problems or advantages they had over older varieties (my favorite of the bunch are the Xerox Star, Lisa OS, and System 1 scroll bars).<\/p>\n\n\n\n Brad Frost wrote about design systems and a governance process<\/a> that worked for a couple of his projects: <\/p>\n\n\n\n Product teams\u2019 primary concern is getting work out the door, not to uphold the integrity of the design system. Teams get creative and will find ways of getting things done, which may involve hacking styles, creating a slew of one-off components, or abandoning the design system altogether. As Jeff Goldblum quips in Jurassic Park, \u201cLife, uh, finds a way.\u201d<\/p><\/blockquote>\n\n\n\n Brad then shows a customer journey showing each step in the process of requesting, designing and then building a component that\u2019s added to a system. Documenting this process might be useful for your own design system. (I think I\u2019m going to steal this idea for my own team, too!)<\/p>\n\n\n\n Here\u2019s an equal part bonkers and brilliant experiment from Ali Churcher where she looks at how to combine the Turkish letter “\u0131” and the period to make an animated “i” character like this:<\/p>\n\n\n\n This is an interesting experiment, and although it might be recommended to take the SVG animation route with this sort of thing it\u2019s noble to come up with an idea as wild as this one! Churcher also digs into how to ensure that the markup for this experiment would be accessible with aria-roles, too:<\/p>\n\n\n\n In this post Ollie Williams looks at all the features that are missing from IE and how supporting it can cause pain for us developers and designers, but also how supporting it can harm our end users as well. Ollie writes:<\/p>\n\n\n\n Let\u2019s dig a little deeper into the features we have today and how they are affected by IE11. Perhaps most notable of all, after decades of hacking layouts on the web, we finally have CSS grid, which massively simplifies responsive layout. Together with CSS custom properties, object-fit, display: contents and intrinsic sizing, they\u2019re all examples of useful CSS features that are likely to leave a website looking broken if they\u2019re not supported. We\u2019ve had some major additions to CSS over the last five years. It\u2019s the cumulative weight of so many things that undermines IE as much as one killer feature.<\/p><\/blockquote>\n\n\n\n Ollie brings up a neat point about performance and how, by providing polyfills for these features to support IE11, we\u2019re effectively harming everyone that uses a modern browser, too. <\/p>\n\n\n\n Fusebox is an alternative to webpack but one that requires zero configuration and, in this post, Kingsley Silas explores how to get it all up and running with React. The other nifty thing about Fusebox is that it support Typescript out of the box so you don\u2019t need to setup anything to get that up and running:<\/p>\n\n\n\n All in all, FuseBox is an interesting alternative to webpack for all your application bundling needs. As we saw, it offers the same sort of power that we all tend to like about webpack, but with a way less complicated configuration process that makes it much easier to get up and running, thanks to built-in Typescript support, performance considerations, and a task runner that\u2019s designed to take advantage of the FuseBox API.<\/p><\/blockquote>\n\n\n\n David Chanin made a neat graphic that shows some of the problems you might come across if you want to place an element at the bottom of the screen with viewport units.<\/p>\n\n\n\n This problem has come back to bite me a few times in projects and I always tend to forget that we don\u2019t really have great tools to deal with this problem today. In fact, as Chris mentions in the post, this problem was also noted in our round up of things we\u2019d like to see in CSS this year<\/a>.<\/p>\n\n\n\n A big shout out to Netlify<\/a> for sponsoring this week’s newsletter! We use and love Netlify around here at CSS-Tricks and have used it on some of our own<\/a> projects<\/a>. It’s super fast to set up a new site with a GitHub workflow<\/a> and deploy updates when commits are pushed to your production branch \u2014 including content edits using the Git-backed Netlify CMS<\/a>.<\/p>\n\n\n\n![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/11\/Screenshot-2019-11-10-20.19-1-1.jpg?ssl=1\")
<\/figure>\n\n\n\n
\n\n\n\n![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/11\/coverage-panel.png?ssl=1\")
<\/figure>\n\n\n\n
\n\n\n\n![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/11\/Screenshot-2019-11-10-20.12-1.jpg?ssl=1\")
<\/figure>\n\n\n\n
\n\n\n\n
\n\n\n? News from the blog!<\/h2>\n\n
The Trick to Animating the Dot on the Letter \u201ci\u201d<\/a><\/h4>\n\n\n
![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/11\/i.gif?ssl=1\")
<\/figure>\n\n\n\n<div role=img aria-label=\"Ping\">\n <p role=\"presentation\">P\n <span>.<\/span>\n <span>\u0131<\/span>\n ng<\/p>\n<\/div><\/code><\/pre>\n\n\n\n
\n\n\nA Business Case for Dropping Internet Explorer<\/a><\/h4>\n\n\n
\n\n\nWorking with Fusebox and React<\/a><\/h4>\n\n\n
\n\n\n\n![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/11\/100vh_problem_uoenhn.png?ssl=1\")
<\/figure>\n\n\nSome Things You Oughta Know When Working with Viewport Units<\/a><\/h4>\n\n\n
\n\n\n\n![\"This](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/netlify.jpg?resize=1024%2C512&ssl=1\")
<\/a><\/figure>\n\n\n\nSPONSOR<\/small>\nNetlify<\/a><\/h2>\n\n\n\n