Best of CSS-Tricks — November 2020

1. 1
   Article

   CSS-Tricks·5y

   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
   Article

   CSS-Tricks·5y

   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
   Article

   CSS-Tricks·5y

   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
   Article

   CSS-Tricks·5y

   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
   Article

   CSS-Tricks·5y

   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
   Article

   CSS-Tricks·5y

   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
   Article

   CSS-Tricks·5y

   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
   Article

   CSS-Tricks·5y

   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
   Article

   CSS-Tricks·5y

   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
    Article

    CSS-Tricks·5y

    Copyediting with Semantic HTML

    We can use HTML elements to track changes in a document. The <ins> and <del> elements can be used to annotate content. We can also use the <time> 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