--- title: Best CSS-Tricks posts — November 2020 | daily.dev description: The most upvoted CSS-Tricks posts from November 2020, curated by the daily.dev community. canonical: https://daily.dev/sources/css_tricks/best-of/2020/11 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/sources/css_tricks/best-of/2020/11 og:type: website og:site_name: daily.dev og:title: Best CSS-Tricks posts — November 2020 | daily.dev og:description: The most upvoted CSS-Tricks posts from November 2020, curated by the daily.dev community. og:image: https://media.daily.dev/image/upload/s--VAY5ToZt--/f_auto/v1724209435/public/daily.dev%20-%20open%20graph --- # Best of CSS-Tricks — November 2020 1. 1 [](https://daily.dev/posts/javascript-operator-lookup-vk2kjrcfm "JavaScript Operator Lookup") Article CSS-Tricks · 6y JavaScript Operator Lookup Enter a JavaScript operator to learn more about it. Operator Lookup is a way to look up operators in a web page. Use this operator to help you with reading comprehension and vocabulary. Use the operator Lookup function to lookup operators in the web page at a time. 83 1 2. 2 [](https://daily.dev/posts/super-tiny-icons-mfm65-2k9 "Super Tiny Icons") Article CSS-Tricks · 6y Super Tiny Icons Super Tiny Web Icons are minuscule SVG versions of your favourite logos. The average size is under 465 bytes! The logos have a 512x512 viewbox, they will fit in a circle with radius 256\. They will scale up and down to suit your needs. 31 2 3. 3 [](https://daily.dev/posts/console-log-myvariable--gkqjrhkti "console.log({ myVariable });") Article CSS-Tricks · 6y console.log({ myVariable }); Using curly brackets in JavaScript, I’m creating an object. I don’t have to assign an object to anything, it can just be. The “trick” is that when you’re making an object, you can “shorthand” it by providing only a variable, which makes it implied. 31 2 4. 4 [](https://daily.dev/posts/upptime-tdqn4mu1v "Upptime") Article CSS-Tricks · 6y Upptime Upptime is the open-source uptime monitor and status page, powered entirely by GitHub Actions, Issues, and Pages. It's used by 1,000+ people and teams to ensure they know when their endpoints go down. Every 5 minutes, a workflow visits your website to make sure it's up. Response time is recorded every 6 hours and committed to git. 25 5. 5 [](https://daily.dev/posts/additive-animations-in-css-gienulkqm "Additive Animations in CSS") Article CSS-Tricks · 6y Additive Animations in CSS The Web Animations API allows us to mix up this behavior through the introduction of the composite option. If we change the second animation to add a composite: 'add' option, we tell it to add the value of this animation to whatever the current state of that property is. Properties that accept any number-based valu (such as lengths, percentages, or raw numbers) will add the numbers together. 20 1 6. 6 [](https://daily.dev/posts/a-complete-guide-to-css-gradients-kx1w-nylg "A Complete Guide to CSS Gradients") Article CSS-Tricks · 6y A Complete Guide to CSS Gradients There are three types of gradients: linear, radial, and conic. The syntax is is declared on either the background (shorthand) or background-image property. To make the gradient go from left-to-right, we pass an additional parameter at the beginning of the linear- gradient() function. 18 7. 7 [](https://daily.dev/posts/libraries-for-svg-drawing-animations-ozeceuyiq "Libraries for SVG Drawing Animations") Article CSS-Tricks · 6y Libraries for SVG Drawing Animations In 2013, Jake Archibald introduced this cool trick of animating an SVG path to look like it’s drawing itself. In this article, I want to introduce you to four JavaScript libraries that can be used to create SVG path drawing animations with fewer lines of code. The libraries are ideal for complex animations involving two or more SVGs with multiple paths. 16 8. 8 [](https://daily.dev/posts/understanding-flex-grow-flex-shrink-and-flex-basis-uqxs5p6xy "Understanding flex-grow, flex-shrink, and flex-basis") Article CSS-Tricks · 6y Understanding flex-grow, flex-shrink, and flex-basis When you apply a CSS property to an element, there’s lots of things going on under the hood. Some properties have defaults that are intended to be overridden by us. If we don’t know these styles are being applied when we’re writing CSS, then our layouts can get pretty darn confusing and tough to manage. 14 2 9. 9 [](https://daily.dev/posts/a-dynamically-sized-sticky-sidebar-with-html-and-css-iy0fclp5u "A Dynamically-Sized Sticky Sidebar with HTML and CSS") Article CSS-Tricks · 6y A Dynamically-Sized Sticky Sidebar with HTML and CSS Sticky positioning can get a bit tricky, particularly when it comes to height and the dangerous situation of hiding content in a position that can’t be scrolled to. I recently worked on a desktop layout that we’re all familiar with: a main content area with a sidebar next to it. This particular sidebar contains action items and filters that are pertinent to the main content. 13 1 10. 10 [](https://daily.dev/posts/copyediting-with-semantic-html-dfmr9hvic "Copyediting with Semantic HTML") Article CSS-Tricks · 6y Copyediting with Semantic HTML We can use HTML elements to track changes in a document. The and elements can be used to annotate content. We can also use the element to show a date and time. This is more than just adding and deleting content. It’s also a good way to show what the author intended. 13 1 [See all CSS-Tricks archives](/sources/css%5Ftricks/best-of) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@graph":[{"@type":"CollectionPage","@id":"https://daily.dev/sources/css_tricks/best-of/2020/11#page","url":"https://daily.dev/sources/css_tricks/best-of/2020/11","name":"Best CSS-Tricks Posts — November 2020","description":"The most upvoted CSS-Tricks posts from November 2020, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/sources/css_tricks/best-of/2020/11#items","numberOfItems":10,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/javascript-operator-lookup-vk2kjrcfm","name":"JavaScript Operator Lookup"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/super-tiny-icons-mfm65-2k9","name":"Super Tiny Icons"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/console-log-myvariable--gkqjrhkti","name":"console.log({ myVariable });"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/upptime-tdqn4mu1v","name":"Upptime"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/additive-animations-in-css-gienulkqm","name":"Additive Animations in CSS"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/a-complete-guide-to-css-gradients-kx1w-nylg","name":"A Complete Guide to CSS Gradients"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/libraries-for-svg-drawing-animations-ozeceuyiq","name":"Libraries for SVG Drawing Animations"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/understanding-flex-grow-flex-shrink-and-flex-basis-uqxs5p6xy","name":"Understanding flex-grow, flex-shrink, and flex-basis"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/a-dynamically-sized-sticky-sidebar-with-html-and-css-iy0fclp5u","name":"A Dynamically-Sized Sticky Sidebar with HTML and CSS"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/copyediting-with-semantic-html-dfmr9hvic","name":"Copyediting with Semantic HTML"}]},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Sources","item":"https://daily.dev/sources"},{"@type":"ListItem","position":3,"name":"CSS-Tricks","item":"https://daily.dev/sources/css_tricks"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/sources/css_tricks/best-of"},{"@type":"ListItem","position":5,"name":"November 2020"}]}]} ```