One of the pictures of the beautiful Katamari-themed wedding of Aidra Frazier and Ernest Leitch. Picture taken by <a href="https://kirstenshultz.com/" target="_blank" rel="noreferrer noopener">Kirsten Schultz (Opens in a new tab)</a> and found on <a href="https://www.flickr.com/photos/m152/" target="_blank" rel="noreferrer noopener">metric555 (Opens in a new tab)</a> Flickr's account.

The beautiful Katamari-themed wedding of Aidra Frazier and Ernest Leitch

Feels like forever since last time I wrote a snippet! In an effort to lower the ball, and genuinely so excited about what I'm about to share, let's try with something super simple!

Like every other nerd, I too imagine that if I were to get married, I'd love to have a game-themed wedding. That is, if I figure out anything to top up the beautiful Katamari-themed wedding that __Aidra Frazier__ and __Ernest Leitch__ organized themselves! I couldn't help but getting soooo excited that I also wanted to save somehow with me these beautiful pictures!

The <a href="https://www.flickr.com/photos/m152/3822948110/" target="_blank" rel="noreferrer noopener">Flickr album of the katamari-themed wedding (Opens in a new tab)</a> includes a lot of pictures of the whole day, everybody looks like they had a blast!

I'll share just one picture over here out of respect and I strongly invite everyone to check the album! Here you can see also the attention to details that came into decorating the wedding, such as the katamari-looking lanterns, all the katamari cousins' hats aaaand, last but not least... the beautiful katamari wedding cake topper that rolls away the (not-so-anymore)newly-wed couple!

<figure>
	<img src="https://images.ctfassets.net/hzu7wkrk7tly/3EHoPmDl1Bp9Lqrh1ZPec6/a1e6f0584615b75b92a003af350c9aae/3822948110_49de01a551_b.jpg" alt="The beautiful Katamari-themed wedding of Aidra Frazier and Ernest Leitch" class="big-picture" />
	<figcaption>
		One of the pictures of the beautiful Katamari-themed wedding of Aidra Frazier and Ernest Leitch. Picture taken by <a href="https://kirstenshultz.com/" target="_blank" rel="noreferrer noopener">Kirsten Schultz (Opens in a new tab)</a> and found on <a href="https://www.flickr.com/photos/m152/" target="_blank" rel="noreferrer noopener">metric555 (Opens in a new tab)</a> Flickr's account.
	</figcaption>
</figure>

By the way, <a href="https://store.steampowered.com/news/app/848350/view/544491088003465427" target="_blank" rel="noreferrer noopener">Once Upon A Katamari (Opens in a new tab)</a> seems to be planned for release this October 24th!

A beautiful Katamari-themed wedding

Custom

Cute

Videogames

Tailwind logotype from <a href="https://tailwindcss.com/brand" target="_blank" rel="noreferrer noopener">Tailwind Official Brand page (Opens in a new tab)</a>, <a href="https://www.freepik.com/free-vector/3d-abstract-background-with-paper-cut-flower-shape_18695224.htm" target="_blank" rel="noreferrer noopener"> 3d abstract background with paper cut flower shape (Opens in a new tab)</a> by <a href="https://www.freepik.com/author/garrykillian" target="_blank" rel="noreferrer noopener">GarryKillian (Opens in a new tab)</a> via <a href="https://freepik.com" target="_blank" rel="noreferrer noopener">Freepik (Opens in a new tab)</a>

Tailwind

Chances are you are using VSCode, and chances are you're also using Tailwind in one of your projects. Chances are that at my first *chances are...* you went immediately *nuh-uh* and moved on (and if you're a NeoVim user I can't help you anyway, you're already doomed and lost in the recommended plugins someone chose for you and you're probably still figuring out half of them) but if I got your attention with the first two assumptions, then this post might be relevant for you!

One issue I've been having ever since using Tailwind with SCSS modules has been that VSCode goes absolutely ballistic marking every `@apply` as an unknown CSS rule, __as the editor assumes it's one `at-rule`__ from CSS. (If you are wondering what at-rules are, `@import` and `@media` might sound a bit more familiar :D)

`@apply` is a Tailwind directive that mimics in semantics a native CSS at-rule, and this one in the specific takes care of enabling Tailwind utility classes in a .scss file ... which by now we already now — *I know, we wouldn't be reading this article otherwise* — so jumping to the main thing, let me present you my favourite solution from <a href="https://byby.dev/at-rule-tailwind" target="_blank" rel="noreferrer noopener">the solutions list that this article from byby.dev (Opens in a new tab)</a> proposes.

Open the `.vscode` folder in your project, create a `tailwind_directives.json` file and add the following lines. I took the liberty of expanding from the article, which was talking specifically about the `@tailwind` directive, and take it as a chance to put <a href="https://tailwindcss.com/docs/functions-and-directives" target="_blank" rel="noreferrer noopener">all the Tailwind specific directives I could find from Tailwind's documentation (Opens in a new tab)</a>:

```json
{
 "version": 1.0,
 "atDirectives": [
 {
 "name": "@tailwind",
 "description": "Use the @tailwind directive to insert Tailwind's `base`, `components`, `utilities`, and `screens` styles into your CSS."
 },
 {
 "name": "@apply",
 "description": "Use @apply to inline any existing utility classes into your own custom CSS."
 },
 {
 "name": "@screen",
 "description": "The screen function allows you to create media queries that reference your breakpoints by name instead of duplicating their values in your own CSS. Apparently deprecated in favour of @media?!"
 },
 {
 "name": "@layer",
 "description": "Use the @layer directive to tell Tailwind which “bucket” a set of custom styles belong to. Valid layers are base, components, and utilities."
 },
 {
 "name": "@config",
 "description": "Use the @config directive to specify which config file Tailwind should use when compiling that CSS file. Do not put @config before your @import statements."
 }
 ]
}
```

Then, head to `settings.json` and add these two lines:

```json
{
// ... other stuff
 "css.customData": [".vscode/tailwind_fix.json"],
 "scss.customData": [".vscode/tailwind_fix.json"]
}
```

And voilá! Done!

Now now, you might be tempted to follow the first solution proposed by the article, which simply tells VSCode to ignore every at-rule it cannot recognise:

```json
{
// ... other stuff
 "css.lint.unknownAtRules": "ignore"
 "scss.lint.unknownAtRules": "ignore"
}
```

But! __What about typos?__ We all make them, and I wouldn't trust myself writing things correctly any day :'D Better be more specific and let pass only the things we are aware of!

Prettier

Unknown at rule @apply... k thx bye!

Logo and background image from <a href="https://www.raycast.com/" target="_blank" rel="noreferrer noopener">Raycast official website (Opens in a new tab)</a>

Raycast

A lot of tools online promise a massive productivity boost, but only a few actually keep up on that bold promise: __Raycast__ is definitely one of them and I personally am an avid user of the tool!

For those that got curious, <a href="https://raycast.com" target="_blank" rel="noreferrer noopener">Raycast (Opens in a new tab)</a> is a __virtual command center__ meant to replace the bland Mac Spotlight search with an incredible set of tools such as inline currency conversions, timezone conversions, superior file search and anything else that comes to your mind right at the tips of your fingers!

Youtuber <a href="https://www.youtube.com/@christianlempa" target="_blank" rel="noreferrer noopener">Christian Lempa (Opens in a new tab)</a> has <a href="https://www.youtube.com/watch?v=hZ2hXMi-h8I" target="_blank" rel="noreferrer noopener">a great video about Raycast (Opens in a new tab)</a> and how it helped him transform his workflow; you'll find everything I want you to know in that video and more!

<iframe width="100%" height="400" src="https://www.youtube-nocookie.com/embed/hZ2hXMi-h8I" data-embed-title="Raycast: The MacOS App That Revolutionized My Workflow" data-embed-url="https://www.youtube.com/watch?v=hZ2hXMi-h8I" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

You'll find that it comes out of the box with a lot of things, but you'll immediately want to customize it to integrate the tools that you use on a daily basis, for which they have an amazing set of extensions in their official <a href="https://www.raycast.com/store" target="_blank" rel="noreferrer noopener">Raycast store (Opens in a new tab)</a>.

Some of my favourite extensions, in no particular order, are:
<ul>
 <li><a href="https://www.raycast.com/ajaypremshankar/vim-bro" target="_blank" rel="noreferrer noopener">Vim Bro - Search Vim Commands (Opens in a new tab)</a> by <a href="https://www.raycast.com/ajaypremshankar" target="_blank" rel="noreferrer noopener">Ajay Prem Shankar (Opens in a new tab)</a></li>
 <li><a href="https://www.raycast.com/mattisssa/spotify-player" target="_blank" rel="noreferrer noopener">Spotify Player (Opens in a new tab)</a> by <a href="https://www.raycast.com/mattisssa" target="_blank" rel="noreferrer noopener">Artem Konovalov (Opens in a new tab)</a></li>
 <li><a href="https://www.raycast.com/gebeto/translate" target="_blank" rel="noreferrer noopener">Google Translate (Opens in a new tab)</a> by <a href="https://www.raycast.com/gebeto" target="_blank" rel="noreferrer noopener">Slavik Nychkalo (Opens in a new tab)</a></li>
 <li><a href="https://www.raycast.com/vimtor/tailwindcss" target="_blank" rel="noreferrer noopener">Tailwind CSS (Opens in a new tab)</a> by <a href="https://www.raycast.com/vimtor" target="_blank" rel="noreferrer noopener">Victor Navarro (Opens in a new tab)</a> (I wonder if they misspell your last name as mine xD)</li>
 <li><a href="https://www.raycast.com/blessanm86/bitly-url-shortener" target="_blank" rel="noreferrer noopener">Bitly URL Shortener (Opens in a new tab)</a> by <a href="https://www.raycast.com/blessanm86" target="_blank" rel="noreferrer noopener">Blessan Mathew (Opens in a new tab)</a></li>
 <li><a href="https://www.raycast.com/eluce2/list-keyboard-maestro-macros" target="_blank" rel="noreferrer noopener">Keyboard Maestro - List Macros (Opens in a new tab)</a> by <a href="https://www.raycast.com/eluce2" target="_blank" rel="noreferrer noopener">Eric (Opens in a new tab)</a></li>
 <li><a href="https://www.raycast.com/FezVrasta/emoji" target="_blank" rel="noreferrer noopener">Emoji Search (Opens in a new tab)</a> by <a href="https://www.raycast.com/FezVrasta" target="_blank" rel="noreferrer noopener">Federico Zivolo (Opens in a new tab)</a></li>
 <li><a href="https://www.raycast.com/HenriChabrand/notion" target="_blank" rel="noreferrer noopener">Notion (Opens in a new tab)</a> by <a href="https://www.raycast.com/HenriChabrand" target="_blank" rel="noreferrer noopener">Henri (Opens in a new tab)</a></li>
 <li><a href="https://www.raycast.com/abielzulio/chatgpt" target="_blank" rel="noreferrer noopener">ChatGPT (Opens in a new tab)</a> by <a href="https://www.raycast.com/abielzulio" target="_blank" rel="noreferrer noopener">Abiel Zulio M (Opens in a new tab)</a></li>
 <li><a href="https://www.raycast.com/thomas/github-repository-search" target="_blank" rel="noreferrer noopener">GitHub Repository Search (Opens in a new tab)</a> by <a href="https://www.raycast.com/thomas" target="_blank" rel="noreferrer noopener">Thomas Paul Mann (Opens in a new tab)</a></li>
 <li><a href="https://www.raycast.com/mblode/google-search" target="_blank" rel="noreferrer noopener">Google Search (Opens in a new tab)</a> by <a href="https://www.raycast.com/mblode" target="_blank" rel="noreferrer noopener">Matthew Blode (Opens in a new tab)</a></li>
 <li><a href="https://www.raycast.com/thomas/visual-studio-code" target="_blank" rel="noreferrer noopener">Visual Studio Code (Opens in a new tab)</a> by <a href="https://www.raycast.com/thomas" target="_blank" rel="noreferrer noopener">Thomas Paul Mann (Opens in a new tab)</a></li>
 <li><a href="https://www.raycast.com/the-browser-company/arc" target="_blank" rel="noreferrer noopener">Arc (Opens in a new tab)</a> by <a href="https://www.raycast.com/the-browser-company" target="_blank" rel="noreferrer noopener">The Browser Company (Opens in a new tab)</a> (and damn this is such an amazing browser, it deserves its own snippet!)</li>
 <li><a href="https://www.raycast.com/raycast/github" target="_blank" rel="noreferrer noopener">GitHub (Opens in a new tab)</a> by <a href="https://www.raycast.com/raycast" target="_blank" rel="noreferrer noopener">Raycast (Opens in a new tab)</a></li>
 <li><a href="https://www.raycast.com/khasbilegt/1password" target="_blank" rel="noreferrer noopener">1Password (Opens in a new tab)</a> by <a href="https://www.raycast.com/khasbilegt" target="_blank" rel="noreferrer noopener">Khasbilegt.TS (Opens in a new tab)</a></li>
 <li><a href="https://www.raycast.com/tumtum/apple-notes" target="_blank" rel="noreferrer noopener">Apple Notes (Opens in a new tab)</a> by <a href="https://www.raycast.com/tumtum" target="_blank" rel="noreferrer noopener">Thomas (Opens in a new tab)</a></li>
</ul>

Seriously, have a look at the <a href="https://www.raycast.com/store" target="_blank" rel="noreferrer noopener">Raycast store (Opens in a new tab)</a> because if you thought of anything you'd want to launch and do with one simple command, it probably already exists!

Apps

Productivity

Technology

Raycast: Supercharged productivity

Screenshot of the website <a href="https://isthisarabic.com/" target="_blank" rel="noreferrer noopener">isthisarabic.com (Opens in a new tab)</a>, developed by <a href="https://ramiismail.com/" target="_blank" rel="noreferrer noopener">Rami Ismail (Opens in a new tab)</a>

Isthisarabic

<a href="https://isthisarabic.com" target="_blank" rel="noreferrer noopener">isthisarabic.com (Opens in a new tab)</a> is the ultimate resort of <a href="https://ramiismail.com" target="_blank" rel="noreferrer noopener">Rami Ismail (Opens in a new tab)</a> to educate people about the overall appearance of Arabic, and how media and companies do not respect the part of the population they so claim to include.

There are a lot of instances where this language presents a challenge (right-to-left layouts online, mishaps while copying and pasting texts, encoding etc.), and the additional challenge of companies disregarding proper translations does not help the world to learn more about this language and the cultures behind it.

Thank you for not giving up, Rami! I'll do my best to do my part in this! :D

P.S: He also has a great crash course on YouTube!

<iframe width="100%" height="315" src="https://www.youtube-nocookie.com/embed/X1ynZm1wI18" data-embed-title="Rami Ismail, Vlambeer - XOXO Festival (2015)" data-embed-url="https://www.youtube.com/watch?v=X1ynZm1wI18" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Accessibility

UI/UX

CoolWebsites

isthisarabic.com - Is this عربي? Let's figure it out!

Screenshot of a section of the page <a href="https://heyreliable.com/ultimate-google-font-pairings/" target="_blank" rel="noreferrer noopener">The Ultimate Collection of Google Font Pairings and Combinations (Displayed Beautifully with Classic Art) (Opens in a new tab)<a/> curated by Lou Levit through <a href="https://heyreliable.com/" target="_blank" rel="noreferrer noopener">Reliable (Opens in a new tab)<a/>

Font Pairing example by Hey Reliable

[The Ultimate Collection of Google Font Pairings and Combinations (Displayed Beautifully with Classic Art)](https://heyreliable.com/ultimate-google-font-pairings/) from Lou Levit through [Reliable](https://heyreliable.com/ "Reliable website") is one of those delightful ways to spend time in front of your screen and come out with fresh ideas on how to style your site.

![Font Pairing example from HeyReliable](//images.ctfassets.net/hzu7wkrk7tly/6zIqzUWDNKINzJmP3hedpU/21b444d3998b182de9f8e78d0304e737/Screenshot_2023-03-04_at_23.58.33.png)

Browse through 50 font pairings (by style or mood) and find the combinations that speak to you the most - and yes, that's completely free!

oh-no.ooo

Ultimate Google Font Pairings and Combinations

More Snippets

A beautiful Katamari-themed wedding

Unknown at rule @apply... k thx bye!