About Dragon News

server: https://api-dragon-news.vercel.app

Node & Express

• res.send() sends a response. Works for both object and string
• res.json() sends a json response.
• use middleware as app.use(middleware_name())

PostCSS

article {
  background: purple;

  & .title {
    /* & represents the article tag */
    font-size: 6rem;
  }

  & li {
    list-style-type: none;
  }
}

similar to article .title {...} and article li {...}

Now using this in tailwind

• tailwind have some selector elements which are nothing but this
• they are built in modifiers in tailwind
• use custom modifier as

 <li class="[&:nth-child(3)]:underline">{item}</li>

& represents the li tag

at-rules like @media or @supports also can be inside arbitrary []

• it will work as

li:nth-child(3) {
  text-decoration-style: underline;
}

• now first example in tailwind

<article className="bg-purple-400 [&.title]:text-8xl [&_li]:list-none">
  ...
  <p className="title">...</p>
  <li>...</li>
  <li>...</li>
  <li>...</li>
</article>

• though it is same as

<article className="bg-purple-400">
  ...
  <p className="text-8xl">...</p>
  <li className="list-none">...</li>
  <li className="list-none">...</li>
  <li className="list-none">...</li>
</article>

Handling whitespace

When an arbitrary value needs to contain a space, use an underscore (_) instead and Tailwind will automatically convert it to a space at build-time:

<div class="grid grid-cols-[1fr_500px_2fr]">
  <!-- ... -->
</div>

css selectors comparison

for <div><p>...</p></div>

though many of these modifiers are prebuilt in tailwind

Acknowledgement

• tailwindcss

• postcss

Codemon

• map through react-icons

const icons = [
  <BsFacebook />,
  <BsTwitter />,
  <BsYoutube />,
  <BsReddit />,
  <BsWhatsapp />,
  <BsDiscord />,
];

return (
  <section className='mr-3'>
    <SocialButton />
    <div className='flex flex-col gap-1 mt-3 p-5 tracking-widest'>
      {icons.map((el) => (
        <div className='flex items-center gap-3 border p-2 text-2xl rounded-md cursor-pointer hover:shadow-md shadow-sm'>
          {el}
          <p className='text-base'>{el.type.name.replace("Bs", "")}</p>
        </div>
      ))}
    </div>
  </section>
);

Output: