#libarary #reactjs #javanoscript

#libarary #apexcharts

１سفارشی‌سازی بالا : امکان تغییر رنگ‌ها، استایل‌ها، و انیمیشن‌ها و....

２ ریسپانسیو بودن : نمودارهای ایجاد شده با ApexCharts به طور خودکار با اندازه‌ی صفحه نمایش تطبیق پیدا می‌کنند.

３ پشتیبانی از داده‌های داینامیک : می‌توانید داده‌های خود را از API‌ها دریافت کنید و در لحظه تو نمودارها نمایش دهید.

４ پشتیبانی از فریم ورک ها : برای react, vue و angular پکیج داره ولی برای استفاده تو فریم ورک های دیگه جاوااسکریپتی میتونید خیلی ساده از وانیلا جی ‌اس  استفاده کنید

import React from 'react';
import Chart from 'react-apexcharts';

const SalesChart = () => {
  const options = {
    chart: {
      type: 'line',
      height: 350,
    },
    xaxis: {
      categories: ['ژانویه', 'فوریه', 'مارس', 'آوریل', 'مه', 'ژوئن', 'ژوئیه'],
    },
    noscript: {
      text: 'نمودار فروش ماهانه',
      align: 'center',
    },
  };

  const series = [
    {
      name: 'فروش',
      data: [10, 20, 15, 30, 40, 35, 50],
    },
  ];

  return <Chart options={options} series={series} type="line" height={350} />;
};

export default SalesChart;

#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