Posts tagged bookmarked

July 26, 2024

Hexadecimal color code for transparency

Hexadecimal color code for transparency. GitHub Gist: instantly share code, notes, and snippets....
I've been back to this Gist so often lately. 8 digit hex codes are a great alternative to RGBA if you're using a styling library like Emotion or a React component library like Material UI and you want to store your colors as 6 digit hex codes. They allow you to change opacity by adding two characters to the end with string interpolation. For example, a white background at 50% opacity would be written background: #ffffff80 or, in JavaScript with a variable, something like background: `${theme.background}80`. The only catch is remembering the alpha codes and that's where this link comes in handy.

I believe the Gist was originally created back when support was mostly limited to Android (which is why the examples add the alpha codes to the beginning) but, according to Can I use... support is pretty widespread today.

And as a bonus, people in the comments have provided the list in different formats like objects and arrays.
January 20, 2023

TIL: Figma Edition

Shift + 2 has completely changed my relationship with Figma. Zoom right to whatever object you have selected. No more tediously zooming in and out and scrolling back and forth trying to center.

Thank you Figma shortcuts.

January 27, 2022

Grainy Gradients | CSS-Tricks

Browse through Dribbble or Behance, and you’ll find designers using a simple technique to add texture to an image: noise. Adding noise makes otherwise solid...

Love this grainy gradient effect. I never have figured out how to do it in Photoshop but maybe CSS and SVGs are more my speed.

Slides Framework by Designmodo
Advertisement
Slides Framework by Designmodo
Advertisement
November 30, 2021

Vue 3.1 - Official Migration Build from Vue 2 to 3 - This Dot Labs

Introduction A few weeks ago, the Vue core team released the first minor version of Vue 3 (release notes here). This latest release of Vue brought a number of…...

When Vue 3 was initially released, I tried to muddle through upgrading from Vue 2 but couldn’t really tell if I was doing it right and eventually put it aside. But the new migration build released with v3.1 changed all that and this overview from This Dot Labs is great.

The only things I would add to their comprehensive guide are: 1) if you’re using ESLint you may need to update your eslint-plugin-vue version and config and 2) if you’re using Jest for tests this Stack Overflow answer might be helpful.

Keep an eye out for Vue 3 support for the Vue Inner Image Zoom component!

October 18, 2021

fontdata: typeface name check

Designing a new typeface and wondering if the name is already taken?...

In the past I’ve relied on my fonts either being so old that all the names were still available or having slightly odd names that no one else wanted but as the number of fonts increases it’s nice to have way to double check if a name is taken already. 

September 9, 2021

Mastering the :nth-child | CSS3 pseudo classes and :nth-child ranges

This site was down for a couple weeks and it really brought home just how often I visit. I was reduced to looking up archived versions on the Wayback Machine, a circumstance which I’d chalk up to its being a very thorough guide to :nth-child and my brain refusing to memorize how to write negative ranges no matter how often I use them. 

I’m surprised I’ve never linked to it before but it’s back now and I promise never to take it for granted again.

August 13, 2021

npm audit: Broken by Design

Found 99 vulnerabilities (84 moderately irrelevant, 15 highly irrelevant)...

Bookmarking this article for the next time dependabot alerts come up at work. It’s a really fun read on a pretty dry topic and full of an appropriate amount of incredulity at some of the high severity vulnerabilities that get flagged.