Custom

Accessibility

__Accessibility__ refers to the design of products, devices, services and environments in a way that makes them available and __usable by as many people as possible__, regardless of their abilities (or disabilities).

Apps

Apps (short for __Applications__) are software programs designed to perform specific tasks or functions. There are a wide variety of apps available and the journey to discover them is endless!

Comics

Cool stuff from the various lands of comics.

Content Creation

__Content creation__ encapsules software and methodologies that one might find useful in writing, illustrations and in several other activities.

CoolWebsites

A collection of cool websites I found around the web.

CSS, or __Cascading Style Sheets__,  is a language used to style and layout web pages. It separates a web page's presentation from its content, allowing for greater flexibility and consistency in design. CSS defines styles for HTML elements and is a fundamental technology for creating attractive and user-friendly websites.

Development

__Development__ captures a wide spectrum of topics in the realm of software and web development, including but not limited to coding languages, frameworks, methodologies, best practices, tools, and technologies. It's a place for enthusiasts, professionals, and beginners alike to explore and discuss all aspects of the development process, from idea conception to deployment and maintenance.

Disqus

__Disqus__ is a widely-used online platform that provides a unique commenting system for websites and blogs. With its centralized discussion community feature, it facilitates social engagement and interaction among users by enabling them to comment, like, and reply to posts on various web pages.

ELI5

Explain like I am 5. The best things you'll usually find on Reddit when you seek for simple explanations about all sorts of things.

Fonts

A __font__ is a set of characters, symbols, and numbers that share a consistent design and style. Fonts are used to display text in a visually appealing way and can range from simple and minimalistic to intricate and decorative.

For those that are not so keen on the design side of things, choosing fonts might be a daunting task.

Inspiration

Everything that inspires me gets this tag! There's really no rationale on what you'll find under this!

JavaScript

__JavaScript__, often used in combination with __HTML and CSS__, helps developers create powerful, interactive user experiences on the web. It's a versatile language that can be used to build a wide range of __both client-side and server-side applications__.

Next.js

__Next.js__ is an open-source JavaScript framework built on top of React.js, designed to simplify and optimize the development of web applications. Offering features such as server-side rendering, static site generation, and automatic code-splitting, Next.js facilitates fast, SEO-friendly, and highly performant applications. It supports both client and server-side data fetching to render the necessary data for each page, enabling developers to create hybrid applications combining the best aspects of single page applications (SPAs) and traditional multi-page applications. Moreover, Next.js also allows deployment to any hosting provider due to its ability to export the application as a static site. Its easy-to-use nature and versatility have made it an increasingly popular choice among developers globally.

Notion.so

__Notion.so__ is an __all-in-one workspace tool__ that helps you write, plan, collaborate, and organize, essentially offering a unified platform for notes, tasks, wikis, and databases.

Prettier

__Prettier__ is a popular and powerful code formatting tool used in software development to ensure consistent and aesthetically pleasing code styles across projects. By automating the code formatting process, Prettier eliminates the need for developers to manually adjust indentation, spacing, and other formatting aspects and its opinionated approach to code formatting guarantees a uniform codebase.

Productivity

__Managing time__, __prioritizing tasks__, and __using resources effectively__ to achieve what we set ourselves on are all different names of productivity. Improving personal productivity is beneficial for our __own sense of satisfaction and achievement__. Let's find the tools that can help us own back our life.

Quantum

__Quantum computing__ is the use of quantum-mechanical occurences, like __superposition__ and __entanglement__, to perform computation in a significantly faster way than classical binary computing.

Raycast

Raycast is a __game-changing productivity tool__ that revolutionizes the way you work and enhances your efficiency to new heights. This powerful software acts as a virtual command center, streamlining your daily tasks and seamlessly integrating with your existing workflows. With Raycast, you'll experience a whole new level of productivity, allowing you to accomplish more in less time.

React

__React__ is a powerful, declarative JavaScript library for __building user interfaces__ that are fast, scalable, and easy to maintain, making it a top choice for developers building modern web applications. As any technology, there are good and not-so-good ways to use React in a project: let's try to stash up on the __good practices__!

Tailwind

__Tailwind__ is a popular utility-first CSS framework that helps developers quickly and easily build responsive and custom-designed user interfaces. Instead of relying on pre-built UI components, Tailwind provides __a set of low-level utility classes that can be combined__ to create any design imaginable. This approach allows for greater flexibility and customization, while also reducing the amount of custom CSS required.

Technology

__Technology__ plays a central role in many aspects of modern life and has had a profound impact on the way we communicate, work, and live. With this term, we often encompass a __multitude of products and services__ and their development in regards of the __hardware and software__ created around those.

Typescript

__TypeScript__ is a statically typed superset of JavaScript that adds optional type annotations, providing enhanced tooling, improved code organization, and increased scalability to JavaScript projects.

UI/UX

UI and UX are both important concepts in the design of digital products such as websites and mobile apps. __User Interface__ (UI) refers to the __visual and interactive components of a product__, encompassing the look and feel of the product, as well as its layout, typography, and color scheme. __User Experience__ (UX), on the other hand, is concerned with how easy and pleasant the product is to use, __how well it meets the user's needs and expectations__, and how it makes them feel, encompassing the overall experience of using the product, including both functional and emotional aspects. Good UI and UX design are critical to creating digital products that are easy to use, intuitive, and engaging for users.

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>

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!

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

Title and background gradient tweaked out with the DOM Inspector from <a href="https://declare-ai.org/" target="_blank" rel="noreferrer noopener">Declare-AI official website (Opens in a new tab)</a>

Declare AI

One of the latest interesting discussions on Slack at work has been about the value proposition of <a href="https://declare-ai.org" target="_blank" rel="noreferrer noopener">declare-ai.org (Opens in a new tab)</a>, a website created (*without any assistance from a Generative AI*) by <a href="https://naildrivin5.com/bio/index.html" target="_blank" rel="noreferrer noopener">David Bryant Copeland (Opens in a new tab)</a> that recognises the excitement around AI and wants to help people inform and be informed about its uses.

(bit off topic but, I am perplexed by the fact that David's own website doesn't have any comment about AI Content Declaration; perhaps they felt they had said all about the topic in the main website. Or perhaps they just wanted to make sure it is clear to people that their work has nothing to do with any sort of AI, maybe out of frustration for the new wave of low-quality/low-effort content blatantly created with AI and not wanting their work even remotely put on the same plate)🤷.

While I recommend checking the website (as I couldn't write any better about it than you could deduct from checking the actual site), the process it proposes is as follows:

```mermaid
graph TD
 A(Was Generative AI used in any way?) -->| Yes | B(Did Generative AI produce the entire work?)
 A -->| No | X(None)
 B -->| Yes | Y(Total)
 B -->| No | C(Did Generative AI contribute creatively?)
 C -->| Yes | D(Creative Assistance)
 C -->| No | E(Non-creative Assistance)
```

<blockquote class="text-sm">Not sure if the diagram can be read in an accessible way, therefore let me repeat it here (I will use a structure that proposes first the condition that end the flow). We start asking ourselves Was Generative AI used in any way?; if the answer is no, then the answer is None (as in no contribution from generative AI). If the answer is yes, we are prompted to another question Did Generative AI produce the entire work?; answering yes will land us on Total, as in total AI contribution; if we answer no, we are asked the last question Did Generative AI contribute creatively?; yes brings us to Creative Assistance and no will bring us to Non-creative Assistance.</blockquote>

It is up to your own judgement to determine if you used the AI in a creative way, but <a href="https://declare-ai.org/1.0.0/assess.html#creative-contribution" target="_blank" rel="noreferrer noopener">the website offers you a nice way to determine what could be considered creative assistance and what not (Opens in a new tab)</a>.

And once you go through this hierarchy, <a href="https://declare-ai.org/1.0.0/declare.html" target="_blank" rel="noreferrer noopener">you can make a public declaration about it (Opens in a new tab)</a>, in the best way that suits you and with the examples proposed. It allegedly also proposes to add this information in the form of meta tags... because why not?!

Now now, will I use it? *Not yet*! I would like to see it having more popularity; but what I like to do is to be open about the source of my work! And that's why __I gladly mention at least the most important prompts I ask about to ChatGPT__ at the end of each blogpost. On this website, my go-to way to use ChatGPT is to get inspiration on how to start discussing about a topic, steal good-sounding adjectives (as my English can only benefit from expanding my vocabulary), and in general to get over a writer's block that often prevents me from sharing more here, and learn more about something.

More than often, I read what ChatGPT proposes to me, and I'm immediately like nope, definitely not that! as it often goes with a very bland structure, lots of repetition, and unneeded conclusion paragraphs that give no particular value to the topic asked. But more than once, when I want to make sure I understand something about a particular topic, __it performs as a great teacher that never gets tired__, no matter how *stupider* my questions become. And it's really a teacher that I'd wish for everyone to have.

Many feel ashamed to mention they'd use any sort of generative AI and they'd prefer to keep it hidden. Instead of having a sense of appreciation for this technology, __a lot of people tend to judge negatively the skills of people using AI__, assuming that they're lazy, not knowledgeable, not actual professionals and that they'd not be able to succeed without such tool. I personally find unfair to question people's skills' worth based on how much they like to use AI, as I don't think my critical thinking is compromised any more than it'd be if I were to acquire information from a YouTube video, an online article, a book and so on. With that premise, I use ChatGPT as __one among many sources__ to acquire knowledge and understanding of a topic, and __it never is__ for me __the only source of information__.

Rather than hide its usage, __I absolutely love the idea to share with people how it helps me go past a lot of hurdles__. Before ChatGPT, I also have never been particularly shy about sharing where I've learned something, or what sources I have browsed to learn and/or do something. I really love to share with people because I would not be the person that I am today if people didn't share the things I've digested to this day.

We seem to forget that not too long ago, we were all assuming __developers were just copying stuff from StackOverflow__ and asking questions over there. So how does that exactly differ, in terms of originality and competence, from what ChatGPT offers us these days?

<hr/>

Have you ever wondered how many people make use of ChatGPT for writing their blog posts? What's your take on the topic? __Should people be more clear to which extend they use AI or would you just be happy to have valuable content in front of your eyes, regardless of how it came to be?__ Let me hear your opinion in the comments!

declare-ai.org - ... so, who wrote that?!

<a href="https://www.freepik.com/free-photo/various-multicolored-abstract-bubbles-texture_5028372.htm" target="_blank" rel="noreferrer noopener">Various multicolored abstract bubbles texture (Opens in a new tab)</a> by <a href="https://freepik.com" target="_blank" rel="noreferrer noopener">Freepik (Opens in a new tab)</a>

It starts as a joke

<figure>
 <img src="https://images.ctfassets.net/hzu7wkrk7tly/3I9gVOwyPeTmmgWQIku0P8/22c89df2745a36e47d7eda6a809a634b/Colossus.jpeg" class="big-picture" />
 <figcaption>
 Colossus explaining to his children the dangers of discrimination. Source: <a href="https://www.reddit.com/r/Marvel/comments/5i1asp/its_starts_as_a_joke/" target="_blank" rel="noreferrer noopener">r/Marvel (Opens in a new tab)</a>.
 </figcaption>
</figure>

It always begins as a __joke__. Listen to me, both of you.

One sees a father or a mother of whom they do not __approve--__

And their brats won’t shut up, and the parents are so __exhausted__ that they just let their children __scream__, all sticky and crying and hitting and wild.

And you say to your friends, “You should have to pass a __test__ to breed". Do you understand? "You should have to get __licensed__ to have kids.”

It starts as a joke.

Then perhaps there is __tragedy__. A postpartum mother who should’ve gotten help, but her insurance did not cover therapy.

A father who erred, because he was raised believing men are pathetic if they are caregivers.

The __first tests__ are drafted.

And you think, “Good." you think, "Those children are __safe__ now”.

The test comes out, and yes, there're some problems, but nothing that cannot be __ironed out__, yes?

But now, anyone with mental illness, with a criminal record, is __barred__ from becoming a parent. And you think, “Well, that is sensible, yes?”

Because you've never known anyone like that, so who is to tell you they are not like they are portrayed in stories?

__Sick, dangerous, criminal--__ these words expand.

Suddenly it is anyone with __diabetes__, anyone with __cancer__, because they could die and leave their children orphaned so how dare they ever try to __have__ children?

It is deaf couples, disabled couples, interracial couples, gay couples-- because don't they know how __hard__ they're making it for their children?

Then it is __whoever they want__.

You think you are working for the __greater good__. You can't even fathom the life of someone who isn't __exactly__ like you.

Then one day-- __it is you__.

Some gene, some history, some past behavior-- And suddenly, you too are __sick, dangerous, criminal__.

Because the truth is this--

--__Human hate can adapt to anything__.

You __think__ you are __safe__.

But if someone __hates__ you, they will come up with the reason __after__ the fact.

Only then do you realize what you put in __power__. Only then do you realize what you stripped away.

There is __terrible power__ in a joke, in a story, in taking the truth and making it ugly.

Do you __understand__, children?

Managing CSS styles efficiently can be a challenge, especially in projects that use Tailwind, where the nature of utility classes is to have quite a bunch of them together — inevitably having some overlap when inheriting styling from different sources.

The <a href="https://www.npmjs.com/package/tailwind-merge" target="_blank" rel="noreferrer noopener">`tailwind-merge` npm package (Opens in a new tab)</a> by <a href="https://github.com/dcastil" target="_blank" rel="noreferrer noopener">Dany Castillo (Opens in a new tab)</a> offers a solution that combines and reuses Tailwind utility classes.

From their documentation we have the following example

```typescript
import { twMerge } from 'tailwind-merge'

twMerge('px-2 py-1 bg-red hover:bg-dark-red', 'p-3 bg-[#B91C1C]')
// → 'hover:bg-dark-red p-3 bg-[#B91C1C]'
```

that shows how Tailwind Merge combines the classes `px-2 py-1` with `p-3` and results in an overall cleaner list of classes, and explains in extremely simple terms the core of Tailwind Merge. There are more examples available in the <a href="https://www.npmjs.com/package/tailwind-merge" target="_blank" rel="noreferrer noopener">`tailwind-merge` npm package (Opens in a new tab)</a> by <a href="https://github.com/dcastil" target="_blank" rel="noreferrer noopener">Dany Castillo (Opens in a new tab)</a> <a href="https://github.com/dcastil/tailwind-merge/blob/main/docs/when-and-how-to-use-it.md" target="_blank" rel="noreferrer noopener">When and how to use it documentation page in Tailwind Merge GitHub repository (Opens in a new tab)</a>.

It's probably not the easiest to implement in an already-existing project, and the author also puts a lot of cases in favour and against using it. <a href="https://github.com/dcastil/tailwind-merge" target="_blank" rel="noreferrer noopener">The readme section in GitHub of `tailwind-merge` (Opens in a new tab)</a> contains all the information you'll need to weight in whether it's going to be the solution you were looking for in your project, or if you should approach your issues from a different perspective.

I'd personally try to use it from the get-go, as implementing it in an already-existing project would require some refactoring that might or might not be time-consuming, but it's completely harmless to have it and update its usage progressively!

Tailwind Merge: clean your code by removing conflicting styling

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>

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!

Raycast: Supercharged productivity

When I started working with <a href="https://tailwindcss.com/" target="_blank" rel="noreferrer noopener">TailwindCSS (Opens in a new tab)</a> (mostly known as just Tailwind), I soon realized that there was a need to give a hierarchy to its utilitarian classes. While I had my structure, it seems that peeps at Tailwind have heard this feedback a few times and apparently last year they came up with their <a href="https://tailwindcss.com/blog/automatic-class-sorting-with-prettier" target="_blank" rel="noreferrer noopener">automatic class sorting plugin for Prettier (Opens in a new tab)</a>.

What you would have had before as

```html
<button class="text-white px-4 sm:px-8 py-2 sm:py-3 bg-sky-700 hover:bg-sky-800">...</button>
```

will become

```html
<button class="bg-sky-700 px-4 py-2 text-white hover:bg-sky-800 sm:px-8 sm:py-3">...</button>
```

and that's simply great! You won't have to spend time reorganizing classes, as if you have Prettier set up `onSave` you'll have the classes' sorting right at your fingertips!

## Hierarchy of the sorting

Classes in the `base` layer will be sorted first, followed by classes in the `components` layer, and then finally classes in the `utilities` layer.

From their documentation
<blockquote>
 The actual order of the different utilities is loosely based on the box model, and tries to put high impact classes that affect the layout at the beginning and decorative classes at the end, while also trying to keep related utilities together.

 <div class="text-right">— <a href="https://tailwindcss.com/blog/automatic-class-sorting-with-prettier" target="_blank" rel="noreferrer noopener">Automatic Class Sorting with Prettier
 (Opens in a new tab)</a> by <a href="https://tailwindcss.com/" target="_blank" rel="noreferrer noopener">TailwindCSS (Opens in a new tab)</a></div>
</blockquote>

To understand better how the sorting happens and if you need to keep something in mind, I recommend checking <a href="https://github.com/tailwindlabs/prettier-plugin-tailwindcss" target="_blank" rel="noreferrer noopener">the GitHub page of Tailwind Automatic Class Sorting with Prettier (Opens in a new tab)</a> together with the official page <a href="https://tailwindcss.com/blog/automatic-class-sorting-with-prettier" target="_blank" rel="noreferrer noopener">Automatic Class Sorting with Prettier (Opens in a new tab)</a>.

The article shows the names of <a href="https://twitter.com/reinink" target="_blank" rel="noreferrer noopener">Jonathan Reinink (Opens in a new tab)</a> and <a href="https://twitter.com/adamwathan" target="_blank" rel="noreferrer noopener">Adam Wathan (Opens in a new tab)</a>, so thank you peeps!

Tailwind Automatic Class Sorting with Prettier

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!

Ultimate Google Font Pairings and Combinations

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>

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

Screenshot of the <a href="https://hypercolor.dev/" target="_blank" rel="noreferrer noopener">main page of hypercolor.dev (Opens in a new tab)<a/>

hypercolor.dev - Tailwind CSS Gradients

<a href="https://hypercolor.dev/" target="_blank" rel="noreferrer noopener">Hypercolor (Opens in a new tab)</a> is a design tool that offers a collection of gradients and allows you to create your own. If you don't have any fantasy like me when it's about colors, this is a lovely site where you can get some great inspiration!

And yes, I used one of them (Ice) for this site as well. :)

And well, since I have some spare time at hand before hitting the bed, let me share a few.

### Cold Dawn

<figure>
	<img src="https://images.ctfassets.net/hzu7wkrk7tly/1Sya7mkv1gBc2mUiEhxyjv/21a18d65cc5ee768075cb2a9c0ec6eb5/Hypercolor-ColdDawn.jpeg" alt="Cool Dawn, a gradient that goes from bottom left blue to top right yellowish. Despite the cold colors, it's still conveying some sense of warmth." />
	<figcaption>
 I call this Cool Down, because despite the cold tones, it still conveys a lot of warmth. Generated with <a href="https://hypercolor.dev/" target="_blank" rel="noreferrer noopener">Hypercolor (Opens in a new tab)</a>.
	</figcaption>
</figure>

```css
{/* Tailwind */}
bg-gradient-to-tr from-indigo-900 via-sky-300 to-lime-200

{/* plain css */}
background: linear-gradient(to right top, rgb(49, 46, 129), rgb(125, 211, 252), rgb(217, 249, 157))
```

### Still Stone

<figure>
	<img src="https://images.ctfassets.net/hzu7wkrk7tly/7KuOQsr0Ks7pYQPqcnTmhb/5aedcb2e7bd5a85a9f44ef3d81ca9b69/Hypercolor-StillStone.jpeg" alt="Still Stone, a linear gradient that conveys the idea of a cold carving stone" />
	<figcaption>
 This one is Still Stone, because it reminds me of the marbles and stones used to carve those beautiful museum-worthy statues. Generated with <a href="https://hypercolor.dev/" target="_blank" rel="noreferrer noopener">Hypercolor (Opens in a new tab)</a>.
	</figcaption>
</figure>

```css
{/* Tailwind */}
bg-[conic-gradient(at_bottom_left,_var(--tw-gradient-stops))] from-white via-stone-500 to-stone-600

{/* plain css */}
conic-gradient(at left bottom, rgb(255, 255, 255), rgb(120, 113, 108), rgb(87, 83, 78))
```

### Pastel Cotton Candy
<figure>
	<img src="https://images.ctfassets.net/hzu7wkrk7tly/1kzfNlJA8siaSaDqabWi6x/1bff5c945228045638e85172034991df/HypercolorPastelCottonCandy.jpeg" alt="Pastel Cotton Candy, a cold and muted rainbow that reminds of different flavours of cotton candy" />
	<figcaption>
 Pastel Cotton Candy proposes a cold and muted rainbow that would serve great for background purposes. Generated with <a href="https://hypercolor.dev/" target="_blank" rel="noreferrer noopener">Hypercolor (Opens in a new tab)</a>.</a>
	</figcaption>
</figure>

```css
{/* Tailwind */}
bg-gradient-to-l from-cyan-300 via-amber-200 to-purple-300

{/* plain css */}
linear-gradient(to left, rgb(103, 232, 249), rgb(253, 230, 138), rgb(216, 180, 254))
```

### Last Dawn
<figure>
	<img src="https://images.ctfassets.net/hzu7wkrk7tly/aqIG3tp5GrKE1qTTeNPYG/8facf50e11b3642b4f1e6551d2dbc527/Hypercolor-LastDawn.jpeg" alt="Last Dawn, a seemingly warm dawn-inspired gradient that shows top black tones." />
	<figcaption>
 Last Dawn represents how a seemingly warm dawn can still feel overwhelming when you're looking at it with your heart full of worries, hence the black top, as if your vision is constantly unable to see the full picture. Generated with <a href="https://hypercolor.dev/" target="_blank" rel="noreferrer noopener">Hypercolor (Opens in a new tab)</a>.
	</figcaption>
</figure>

```css
{/* Tailwind */}
bg-gradient-to-b from-neutral-700 via-orange-400 to-pink-500

{/* plain css */}
linear-gradient(rgb(64, 64, 64), rgb(251, 146, 60), rgb(236, 72, 153))

```

### Everyday
<figure>
	<img src="https://images.ctfassets.net/hzu7wkrk7tly/48QZPSGEUw4NDMF2piW8TW/555ef8157ae1683eb382b9f68c79e0a3/Hypercolor-Everyday.jpeg" alt="Everyday, a sharp conic gradient that represents both of the light and dark stages of a day" />
	<figcaption>
 Everyday has a strong conic gradient that divides in the top center, conveying to me personally the feeling of a full-cycle day. Generated with <a href="https://hypercolor.dev/" target="_blank" rel="noreferrer noopener">Hypercolor (Opens in a new tab)</a>.
	</figcaption>
</figure>

```css
{/* Tailwind */}
bg-[conic-gradient(var(--tw-gradient-stops))] from-yellow-500 via-pink-900 to-blue-400

{/* plain css */}
conic-gradient(rgb(234, 179, 8), rgb(131, 24, 67), rgb(96, 165, 250))

```

... <a href="https://hypercolor.dev/generator" target="_blank" rel="noreferrer noopener">give the gradient generator a go by yourself (Opens in a new tab)</a>, and have some fun with it!

oh-no.ooo

Snippets

Discover by tags