I found out that tailwind has a few divide classes that helps to add border between elements. So if you want to add a separator border for your children you can try:
<div class="grid grid-cols-1 divide-y">
<div>01</div>
<div>02</div>
<div>03</div>
</div>And that will add horizontal borders between those nodes.
Here in the US we have the system of daylight savings time (DST), at least for now.
But did you know that the timezone you use includes that? Cause I sure didn't.
EST/CST/MST/etc are for the standard time version of the time zone EDT/CDT/MDT/etc are for the DST adjusted periods!
Largely, I prefer to let libraries handle this for me, so I've never dug into the details. But this one is also interesting from the perspective of communications with others.
CSS has a property text-decoration-thickness which allow us to define the thickness of a text decoration such as underline to match design expectations.
Here's is my regular link:
Then we apply the css change:
text-decoration-thickness: 2px;And here's the result with a thicker underlined link:
Google fonts are an incredible resource, and I use them a lot because of how easy they are to set up. Today I learned that Google has a 'popular pairings' feature at the bottom of each font page. Here's that page for the Spectral font:
The Spectral/Open Sans pairing shown above gives design newbies like myself a nice serif/sans-serif combination to play with. When you click the '+' icon, your paired font is added to the import statement, so you can get both with one link tag.
Design for everyone.
removebg is really cool! Upload an image, and the site will give you back the same image, with background removed, as a tranparent PNG.
TIL I learned about a really useful, open source, image optimization app called ImageOptim. This app will help you batch resize image files (png, jpg, gif) in either lossless or lossy way.
It is so much quicker than using an image editor such as Affinity Photo. And best of all it's free!
It has helped me cut image sizes by as much as 94%! All without noticeable compression artifacts.
To install it on macOS simply run:
brew cask install imageoptimFor source and more info:
Deckset for Mac is my favorite presentation software. Markdown-to-slides with prebuilt themes is pure joy.
Here's a fun hack: ⌘ + ] and ⌘ + [. Use these to cycle through the Deckset themes for your current presentation. I like this feature because it helps me quickly pick a good color palette.
ImageMagick drawing and annotating features rely on fonts on your computer to work. But what fonts are on your computer?
On newer versions of ImageMagick, here's how you'd find out that information:
% identify -list font
Path: /usr/local/Cellar/imagemagick/7.0.8-24/etc/ImageMagick-7/type-apple.xml
Font: AndaleMono
family: Andale Mono
style: Undefined
stretch: Undefined
weight: 0
glyphs: /Library/Fonts//Andale Mono.ttf
...AndaleMondo and ~60 other fonts are installed on my machine and accessible by ImageMagick.
Here is an image from unsplash.com.
I don't know what image I am showing you though. That's because the URL
being sourced for the above image is
https://source.unsplash.com/random/1200x600. This tells unsplash to
randomly serve us a 1200x600 image. Try refreshing the page and you'll see
that it is different each time. Cool!
This is a bit of a novelty, but could be useful on occasion. The Gatsby docs use it to great effect in a tutorial so as to not get caught up with the details of serving a specific image.
You can outline a stroke (similar to Illustrator) by selecting the shape and choosing layer > convert to outlines or ⇧⌘O.
To modify individual radiuses on shape, separate each value with a slash. For example 5/0/0/5 would add a 5px radius to the left two corners of a rectangle.
Today I learned how to save and load swatch libraries in multiple .AI files.
Swatch and learn:
Create a color swatch. If you'd like to be organized, save them in "Color Groups," which are indicated with a folder icon.
Find the swatch drop-down menu and select, "Save Swatch Library as AI...". Give your swatch library a name.
Open a new file and select, "Open Swatch Library" and where your User-Defined Swatch Library will be.
Boom—there ya have it. Your swatches can be now be used across any AI file when repeating this process.
I realize I may be part of the minority of UI designers who enjoy working in Illustrator. If you too are part of this special group, check out this sweet TIL:
Open a new AI file with web settings. Create a rectangle that represents the full width of your app. Example: 1080 px wide rectangle for a desktop grid. Align it on your artboard. Go to Object > Path > Split Into Grid. This dialog window allows you to add equidistant rows, columns, and even gutters. When you've got all of that covered, select "Add Guides," then click, "OK." This now allows you to assign guides to your AI file by selecting View > Guides > Make Guides (⌘5 on Apple).
Killer grid, man!
If you're tired of exporting SVG icons individually, follow these 5 easy steps:
A distinctive feature of the font this site uses is the Q with the long tail that swoops under the next letter and the letter after that.
So when you see Q in SQL you know its Rosario.