#libarary #reactjs #react_helmet

import React from 'react';
import { Helmet } from 'react-helmet';

function MyComponent() {
  return (
    <div>
      <Helmet>
        <noscript>My Page Title</noscript>
        <meta name="denoscription" content="This is a denoscription of my page" />
      </Helmet>
      <h1>Hello, World!</h1>
      <p>Welcome to my React app with dynamic noscript and meta tags!</p>
    </div>
  );
}

#libarary #storybook

✅ ویژگی ها

➊ امکان مشاهده و تست کامپوننت‌ها در حالت‌های مختلف را فراهم می‌کند.

➋ برای کامپوننت ها داکیومنت خودکار ایجاد می‌کند.

➌ این ابزار همکاری بین تیم‌های طراحی و توسعه را بهبود می‌بخشد.

➍ افزونه‌های متعددی برای تست بصری و دسترس‌پذیری دارد.

➎ تغییرات کامپوننت‌ها را سریع ارزیابی می‌کند.

➏ برای پروژه‌های بزرگ و تیم‌های توسعه‌دهنده بسیار مفید است.

// Button.stories.js
import React from 'react';
import { Button } from './Button';

export default {
  noscript: 'Example/Button',
  component: Button,
};

const Template = (args) => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  label: 'Primary Button',
  variant: 'primary',
};

export const Secondary = Template.bind({});
Secondary.args = {
  label: 'Secondary Button',
  variant: 'secondary',
};

✅ در کل با استفاده از Storybook می‌توانید به سرعت UI خود را تست و بهبود دهید.

#tools #website #css #csstrciks

به طور کلی، CSS-Tricks به شما کمک می‌کنه تا با یادگیری اصول و تکنیک‌های جدید، بهینه‌تر و حرفه‌ای‌تر در طراحی صفحات عمل کنید 👌

#tools #website

پ.ن : اگر دنبال یه راه ساده و سریع برای ایجاد اسکرین شات‌های باکیفیت از کد های خودتی، این ویدیو رو از دست نده 😁

#tools #website #api #fake_api

#tools #website #api #fake_api

#javanoscript #website

💢 برای عمیق شدن توی زبان جاوااسکریپت هم میتونه بسیار کمک کننده باشه. ⚡

#tools #website #css #grid #tailwind

#tools #website

#tools #website

نکته مهمی که هست اینه که بعضی از کامپوننت هارو با تیلویند در اختیارتون قرار میده و اگر هم نبود میتونید بدید چت جی‌پی‌تی و بهش بگید تبدیلش کنه به کد tailwind ⚡