Category: طراحی سایت

استفاده از Grommet در کاربردهای واکنش – مجله سر و صدا

درباره نویسنده

Fortune Ikechi یک مهندس Frontend است که در Rivers State نیجریه مستقر است. وی دانشجوی دانشگاه پورت-هارکورت است. او علاقه زیادی به اجتماع دارد و …
اطلاعات بیشتر در مورد Fortune

در این آموزش ، ما می آموزیم که چگونه از Grommet به عنوان کتابخانه UI برای برنامه های React استفاده کنیم. ما از Grommet به عنوان یک کتابخانه UI انتخابی برای ایجاد یک جز component قیمت گذاری استفاده خواهیم کرد ، این به ما کمک می کند درک بهتری از نحوه استفاده از Grommet داشته باشیم.

در طول سال ها ، اکوسیستم React با اختراع کتابخانه هایی که به توسعه برنامه های React کمک می کنند ، رشد کرده است. در این آموزش ، ما قصد داریم که استفاده کنیم گرمت برای توسعه م componentsلفه های پاسخگو ، قابل دسترسی و همراه اول برای برنامه های React. ما نگاه مفصلی به مفاهیم اصلی آن ، برخی موارد استفاده از آن خواهیم انداخت و یک مثال ساده خواهیم ساخت. توجه به این نکته مهم است که Grommet منبع باز با 6.9k ستاره روشن است GitHub.

این آموزش برای خوانندگانی که علاقه مند به توسعه م componentsلفه های پاسخگو در برنامه React خود با استفاده از Grommet هستند مفید خواهد بود. این مقاله نیاز به درک اساسی از عناصر React و Styled دارد.

گرمت چیست؟

گرمت یک کتابخانه م componentلفه React است که از اجزای کد همراه اول پاسخگو و قابل دسترسی برخوردار است. این کار را از طریق اجزای خود انجام می دهد – که عناصر سازنده کتابخانه هستند. آنها شامل چیدمان ها ، انواع ، رنگ ها ، کنترل ها ، ورودی ها ، رسانه های تجسم و برنامه های کمکی هستند. تمام اجزای سازنده گرامت با قابلیت دسترسی و پاسخگویی در ذهن ساخته شده اند.

Grommet پشتیبانی از مشخصات W3C که باعث می شود امتیاز قابل توجهی از نظر دسترسی کسب کند. همچنین زمینه ها و ابزارهای قدرتمندی را فراهم می کند که به شما امکان می دهد رنگ ، نوع ، عناصر م componentلفه و نیازهای طرح را متناسب با نیازهای پروژه خود تنظیم کنید.

برخی از گزینه های محبوب Grommet شامل tailwindcss و اجزای مدل دار، اگرچه در بین توسعه دهندگان بسیار محبوب است ، اما هر چارچوب از نظر رویکرد در ساخت برنامه ها متفاوت است. Grommet با تلفن همراه اول ، قابل دسترسی ، پاسخگو و دارای موضوعات خارج از جعبه است و از W3C برای ایجاد آسان برنامه های React پشتیبانی می کند در حالی که Tailwind CSS یک چارچوب بسیار قابل تنظیم و سودمند است که به توسعه دهندگان اجازه می دهد بدون محدودیت CSS مانند برنامه های خود ، برنامه های کاربردی بسازند. قوانین آبشار م componentsلفه های سبک با هدف اجازه نوشتن کد CSS در JavaScript با استفاده از حروف الفبا به منظور کمک به توسعه دهندگان در نوشتن م reلفه های React قابل استفاده مجدد و همچنین از م componentsلفه ها به عنوان ساختار سبک سطح پایین استفاده می شود.

در پروژه خود ، ما از Grommet به دلیل اجزای قابل تنظیم ، قابلیت دسترسی و ویژگی های موضوعی که در ادامه این آموزش به آنها نیاز خواهیم داشت ، در پروژه های خود استفاده خواهیم کرد.

با استفاده از اجزای Grommet

گرمت مانند بسیاری دیگر از کتابخانه های م componentلفه با برخی از م componentsلفه ها برای طرح بندی و موضوعات مانند اجزای Box ، Card و Header از قبل ساخته شده است. برای استفاده از ابتدا ، باید بسته grommet را با استفاده از NPM یا نخ نصب کنید ، مانند بلوک کد زیر.

npm i grommet styled-components

یا:

yarn add grommet styled-components

با توجه به موارد فوق ، می بینید که ما نیز اجزای سبک را نصب کردیم. این به این دلیل است که Grommet از م componentsلفه های سبک برای سفارشی سازی سبک ها در م componentsلفه ها استفاده می کند. توصیه می شود اجزای سبک را در پروژه های خود نصب کنید.

برای استفاده از م Gلفه Grommet در یک پروژه React ، باید وارد کنید grommet. بیایید برای توضیح یک جز below کارت زیر ایجاد کنیم:

import React from 'react';
import { Grommet, Card } from 'grommet';

export default function GrommetExample() {
  return (
     <Card>
        <CardBody pad="medium">Body</CardBody>
          <Button
            icon={<Icons.Favorite color="red" />}
              hoverIndicator
            />
        </Card>
      );
    }

در بلوک کد بالا ، ابتدا وارد کنید Grommet و Card جز component از grommet بسته را در پرونده خود قرار دهید ، سپس ما با استفاده از Card م componentلفه ای که وارد کرده ایم. سبک ها را می توان به عنوان اشیایی مانند م likeلفه های Grommet اضافه کرد Button یا می توان آنها را با استفاده از اجزای مدل شده سبک کرد.

با بررسی اجزای فرم بیایید نمونه های بیشتری از اجزای Grommet را مشاهده کنیم

چرا گرمت؟

هدف اصلی Grommet بهبود تجربه توسعه دهندگان و ایجاد روشی سریعتر برای ساخت برنامه های React با اولین ، قابلیت دسترسی و پاسخگو بودن به تلفن همراه است. Grommet به صورت یکپارچه یک طرح و یک گردش کار توسعه دهنده را برای ایجاد یک تجربه یکپارچه تراز می کند و کار را برای هر کسی بسیار آسان می کند.

Grommet همچنین از خوانندگان صفحه خارج از جعبه پشتیبانی می کند ، انواع تم مانند حالت تاریک از grommet خارج از جعبه دریافت می شود و می توان آنها را با استفاده از themeMode مانند یک برنامه React ، مانند زیر پشتیبانی کنید.

import React from "react";
import { Grommet, Box, Button, Heading, dark } from "grommet";
import { grommet } from "grommet";
const App = () => {
  const [darkMode, setDarkMode] = React.useState(false);
  return (
    <Grommet full theme={grommet} themeMode={darkMode ? "dark" : "light"}>
      <Box pad="large">
        <Heading level="1">Grommet Darkmode toggle</Heading>
        <Button
          label="Toggle Theme"
          primary
          alignSelf="center"
          margin="large"
          onClick={() => setDarkMode(!darkMode)}
        />
      </Box>
    </Grommet>
  );
};
export default App;

در بلوک کد بالا ، ما از themeMode ویژگی برای اضافه کردن یک حالت تاریک. با استفاده از یک اپراتور سه گانه ، بررسی می کنیم که آیا صفحه در حالت تاریک قرار دارد یا خیر ، می توانیم آن را به حالت روشن تغییر دهیم ، سپس دکمه ای را برای تغییر حالت تاریک و روشن روی برنامه خود اضافه کردیم ، می توانید از اینجا نسخه آزمایشی را بررسی کنید جعبه کد.

Grommet همچنین می تواند با سایر چارچوب ها وجود داشته باشد و سبکی جهانی به آن اضافه نمی کند که بر اجزای موجود در برنامه React شما تأثیر بگذارد ، توابع و سبک ها می توانند در یک شی به معنای واقعی برای سبک ها قرار گیرند. Grommet همچنین از اجزای Layout بهره می برد که دارای برخی از خصوصیات CSS مانند flexbox است ، همچنین کلیه خصوصیات flexbox را به عنوان غرفه در اختیار شما قرار می دهد.

Grommet دارای یک کتابخانه بزرگ از نمادهای SVG است که با استفاده از <Icon /> م componentلفه ، برخلاف بسیاری از چارچوب های دیگر. Grommet از م componentsلفه هایی برای تجسم داده ها مانند نمودارهای میله ای ، نقشه ها و حتی ردیاب های پیشرفت برخوردار است.

امروزه چندین شرکت از Grommet برای ایجاد برنامه های واقعی استفاده می کنند ، از جمله Netflix ، IBM ، Sony ، Samsung ، Shopify ، GitHub و Twilio.

ساخت یک م Pricلفه قیمت گذاری با Grommet

اکنون ما اصول و مفاهیم اصلی Grommet را می دانیم ، ما قصد داریم یک م componentلفه قیمت گذاری با استفاده از م componentsلفه های Grommet ایجاد کنیم ، این بخش باید از اجزایی مانند Card ، Box و Buttons از کتابخانه Grommet استفاده کند.

بدون نگرانی بیشتر ، شروع کنیم!

تنظیم محیط

ابتدا ، بیایید یک برنامه React بدون نیاز ایجاد کنیم ، کد کد زیر را در ترمینال خود بنویسیم.

create-react-app grommet-app

کد بالا با استفاده از یک برنامه React لخت ایجاد می کند ایجاد-واکنش-برنامه بسته بندی وارد فهرست پروژه شوید.

cd grommet-app

بعدی نصب وابستگی هایی است که در پروژه خود نیاز داریم.

yarn add grommet styled-components

اگر این کار را انجام داده اید ، با استفاده از دستور زیر سرور پروژه را شروع کنید.

yarn start

برای این پروژه ، ما به یک جز single واحد برای کارتها و سبک خود با اجزای سبک نیاز داریم.

بیایید اولین کارت را در زیر ایجاد کنیم

import React from "react";
import styled from "styled-components";

export default function GrommetCard() {
  return (
    <>
       <CardWrapper>
        <Card left>
          <Div>
            <Div>
              <CardContent>
                <small>Basic</small>
                <h1>$588</h1>
              </CardContent>
              <CardContent>
                <p>500 GB storage</p>
              </CardContent>
              <CardContent>
                <p>2 Users Allowed</p>
              </CardContent>
              <CardContent>
                <p>Send Up To 3 GB</p>
              </CardContent>
            </Div>
            <CardButton secondary>LEARN MORE</CardButton>
          </Div>
        </Card>
   </CardWrapper>
    </>
  );
}

در بلوک کد بالا ، ما از م componentلفه استفاده می کنیم CardWrapper برای پوشاندن همه ما Card م componentsلفه ها ، بعد ما یک م componentلفه جدید اضافه کردیم ، CardContent که برای بسته بندی تمام مطالب ما در هر جز card کارت استفاده می شود. CardButton جز component یک جز button دکمه ای است که در کارتهای Grommet روی کارتها استفاده می شود.

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

const primaryGradient = "linear-gradient(hsl(236, 72%, 79%), hsl(237, 63%, 64%))";

const CardWrapper = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  height: max-content;
  margin: 20px;
  @media all and (max-width: 1240px) {
    flex-direction: column;
  }
`;

در بالا ، ما یک شی style سبک را برای خود تعریف کردیم CardWrapper در برنامه ما بیایید اشیا style سبک را برای م componentلفه کارت خود در بالا اضافه کنیم.

const Card = styled.div`
  min-width: 380px;
  box-shadow: 3px -2px 19px 0px rgba(50, 50, 50, 0.51);
  border-radius: ${(props) => (props.left ? " 6px 0 0 6px" : props.right ? "0 6px 6px 0" : "6px")};
  background: ${(props) => (props.secondary === undefined ? "#fff" : primaryGradient)};
  padding: 25px 20px;
  height: ${(props) => (props.center ? "520px" : "480px")};
  display: flex;
  justify-content: center;
  align-items: center;
  @media all and (max-width: 1240px) {
    margin-bottom: 20px;
    border-radius: 6px;
    height: 480px;
  }
  @media all and (max-width: 420px) {
    min-width: 90%;
  }
`;

بیایید سبک های بیشتری را به اجزای خود اضافه کنیم.

const CardButton = styled.div`
  min-width: 100%;
  padding: 10px 15px;
  min-height: 50px;
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2), 0px 0px 2px rgba(0, 0, 0, 0.2);
  color: ${(props) => (props.secondary !== undefined ? "#fff" : "#7c7ee3")};
  background: ${(props) => (props.secondary === undefined ? "#fff" : primaryGradient)};
  text-align: center;
  margin-top: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  border-radius: 6px;
`;
const CardContent = styled.div`
  width: 100%;
  color: ${(props) => (props.secondary !== undefined ? "#fff" : "#000")};
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1.3px solid #eee;
  text-align: center;
`;
const Div = styled.div`
  min-width: 100%;
`;

وقتی همه این کارها را انجام دادیم ، پروژه ما باید شبیه تصویر زیر باشد.

یک کارت Grommet
یک کارت Grommet. (پیش نمایش بزرگ)

ما باید کارتهای بیشتری را به بخش خود با استفاده از کد کد زیر اضافه کنیم.

 <Card center secondary>
         <Div>
            <Div>
              <CardContent secondary>
                <small>Premium</small>
                <h1>$788</h1>
              </CardContent>
              <CardContent secondary>
                <p>75 GB storage</p>
              </CardContent>
              <CardContent secondary>
                <p>4 Users Allowed</p>
              </CardContent>
              <CardContent secondary>
                <p>Send Up To 5 GB</p>
              </CardContent>
            </Div>
            <CardButton>LEARN MORE</CardButton>
          </Div>
        </Card>
        
       <Card right>
          <Div>
            <Div>
              <CardContent>
                <small>PRO</small>
                <h1>$1000</h1>
              </CardContent>
              <CardContent>
                <p>1TB storage</p>
              </CardContent>
              <CardContent>
                <p>Unlimited Users Allowed</p>
              </CardContent>
              <CardContent>
                <p>Send Up To 10 GB</p>
              </CardContent>
            </Div>
            <CardButton secondary>LEARN MORE</CardButton>
          </Div>
        </Card>
      </CardWrapper>
    </>
  );
}

در اینجا ، ما دو م cardلفه کارت دیگر ایجاد کردیم ، ملفه های سفارشی خود را با م styلفه های سبک اضافه کردیم و از اشیا style سبک که در بالا تعریف کردیم ، برای بسته بندی اجزای Grommet و بهبود سبک استفاده کردیم.

برنامه کارت قیمت نهایی ما باید مانند تصویر زیر باشد.

برنامه کارت قیمت Grommet
برنامه کارت قیمت Grommet. (پیش نمایش بزرگ)

استفاده از Grommet در تولید (برنامه لیست ساختمان)

برای دیدن نمونه ای از اینکه استفاده از Grommet در برنامه دیگری به نظر می رسد ، قصد داریم یک برنامه ساده بسازیم که به کاربر امکان اضافه کردن ، مشاهده و حذف موارد لیست را می دهد. ما برای مدیریت وضعیت برنامه ، Grommet برای اجزای UI و اجزای سبک برای یکپارچه سازی برنامه خود ، از React Context API داخلی استفاده خواهیم کرد.

باز هم ، بیایید با استفاده از دستور زیر یک برنامه واکنش را آغاز کنیم.

create-react-app list-app

سی دی را به فهرست پروژه وارد کنید

cd list-app
yarn add grommet grommet-controls grommet-icons styled-components

در بلوک کد بالا ، ما نصب کردیم:

grommet کتابخانه م componentلفه های UI ما
grommet-controls، grommet-icons آیکون ها و بسته های کنترلی که برای کار با Grommet باید نصب کنیم
styled-components برای استفاده از اصطلاحات علامت گذاری شده برای یک ظاهر طراحی شده به اجزای سازنده و اندازه گیری واکنش نشان می دهد

ساخت متن برنامه

در این برنامه ، ما باید داده های کاربر را در چندین م componentsلفه به اشتراک بگذاریم تا به این نتیجه برسیم که از Context API استفاده می کنیم. با استفاده از این ، ما می توانیم یک متن زمینه ایجاد کنیم که لیست ها و منطق برنامه ما را در خود نگه دارد. برای کسب اطلاعات بیشتر در مورد API Context می توانید این مقاله را بررسی کنید.

برای ایجاد زمینه برنامه ما ، ابتدا پوشه ای به نام ایجاد کنید context در src فهرست برنامه ما ، سپس فایلی به نام ایجاد کنید AppContext.js این پرونده برای تمام زمینه های برنامه ما خواهد بود ، بیایید این کار را در بلوک کد زیر انجام دهیم:

import React, { createContext, useState } from 'react';
export const Context = createContext();
const AppContext = ({children}) => {
  const [lists, setLists] = useState([]);
  const removeList = item => {
    let newLists = [...lists];
    
    lists.map((list, id) => {
      return list === item && newLists.splice(id, 1);
    });
    setLists(newLists);
  }

در بلوک کد بالا ، ما قلاب API زمینه را وارد کردیم createContext و useState همه را از React با استفاده از قلاب کنید useState م componentلفه ، ما یک حالت مرکزی برای برنامه خود ایجاد کردیم ، این کار به این دلیل انجام شد که م componentلفه بتواند به عنوان یک ارائه دهنده زمینه برای سایر م componentsلفه های برنامه ما عمل کند. بعد ، ما یک متغیر جدید به نام ایجاد کردیم removeList که یک مورد را به عنوان یک پارامتر در اختیار شما قرار می دهد ، با استفاده از عملگر spread ما آنچه را که در حالت است گسترش می دهیم و جسمی را که برابر با موردی که می خواهیم حذف کنیم خارج می کنیم.

بعد ، ما از منطق بالا برای ایجاد روشهایی برای اضافه کردن و حذف موارد لیست در برنامه خود استفاده خواهیم کرد ، این کار را در بلوک کد زیر انجام می دهیم:

return (
    <Context.Provider value={{
      lists,
      addToLists: (newItem) => setLists([...lists, newItem]),
      deleteFromList: (item) => removeList(item)
    }}>
      {children}
    </Context.Provider>
  )
}
export default AppContext;

در اینجا ، ما در حال بازگشت هستیم Context.Provider و پذیرفتن وسایل بچه ، ما این کار را انجام می دهیم تا م componentلفه دیگر بتواند به خصوصیاتی که در مقادیر مقدار عبور می دهیم دسترسی پیدا کند ، lists هدف در لیست های ما ، addToList روش در می گیرد newItem پارامتر برای اضافه کردن لیست های جدید به حالت برنامه ما و deleteFromList موردی را از فروشگاه لیست حذف یا حذف می کند.

ساخت م Listلفه لیست

در این بخش ، ما می خواهیم م Listلفه List خود را با استفاده از Grommet برای م Uلفه های UI خود و مledلفه های سبک خود برای سبک دادن به برخی از بخش های UI خود بسازیم. ابتدا یک پوشه کامپوننت در داخل برنامه ما ایجاد کنید src فهرست ، سپس در داخل پوشه اجزا ، یک فایل جدید ایجاد کنید List.js و در داخل آن ، کد زیر را بنویسید.

import React from "react";
import styled from "styled-components";
import { Card, CardBody, Box, Text, Button } from "grommet";
function List(props) {
  return (
    <StyledDiv>
      <Card>
        <CardBody className="card_body">
          <Box direction="row" className="item_box">
            <Text className="text">{props.list}</Text>
            <Box className="button_box">
              <Button
                onClick={props.deleteList.bind(this, props.list)}
                className="button"
              >
                Delete
              </Button>
            </Box>
          </Box>
        </CardBody>
      </Card>
    </StyledDiv>
  );
}
export default List;

در کد بالا ، ما ابتدا اجزای Card ، CardBody ، Box ، Text و Button را از grommet وارد کردیم ، سپس یک م aلفه List ایجاد کردیم تا در غرفه ها استفاده کنیم ، با استفاده از م Gلفه های Grommet یک م cardلفه کارت با یک دکمه حذف ایجاد کردیم که به صورت خودکار به یک لیست. بعدی این است که جز component خود را در زیر سبک دهید:

const StyledDiv = styled.div`
  .button {
    background-color: #8b0000;
    color: white;
    padding: 10px;
    border-radius: 5px;
  }
  .card_body {
    padding: 20px;
    margin-top: 20px;
  }
  .item_box {
    justify-content: space-between;
  }
  .text {
    margin-top: auto;
    margin-bottom: auto;
  }
`;

پس از انجام موارد فوق ، م componentلفه ما باید مانند تصویر زیر باشد.

جز List لیست
جز List لیست (پیش نمایش بزرگ)

ساخت م Displayلفه نمایش لیست

این م componentلفه همه لیست هایی را که اضافه کرده ایم نمایش می دهد و همچنین به محض افزودن لیست جدید به طور خودکار دکمه حذف ایجاد می کند.

import React from "react";
import List from "./List";
import { Context } from '../context/AppContext';
function ListDisplay() {
  return (
    <Context.Consumer>
      {(context) => (
        <div className="container">
          {context.lists.length ? 
            context.lists.map((list, id) => (
              <List key={id} list={list} deleteList={context.deleteFromList} />
            )) : null
          }
        </div>
      )}
    </Context.Consumer>
  );
}
export default ListDisplay;

در این م componentلفه ، یک تابع ایجاد کردیم ListDisplay و با استفاده از Context.Consumer از ما appContext جز component ، بعد با استفاده از a div برای برچسب کانتینر ما ، ساختار آن را تغییر دادیم list و deleteList روش ها از متن برنامه ، با این کار می توانیم آنها را به عنوان غرفه منتقل کنیم. بعد ، ما نقشه را از طریق lists برای بازگرداندن یک لیست جدید ، که می توانیم آن را در ساخت یک لیست واحد با عبور دادن آبجکت برگشتی به عنوان props به List جزء.

م componentلفه ما با لیست های اضافه شده باید به این شکل باشد:

لیست جز display نمایش
لیست جز display نمایشگر (پیش نمایش بزرگ)

این م componentلفه عمده برنامه ما خواهد بود ، در اینجا ما م componentلفه خود را با استفاده از پاره خواهیم کرد Context.Consumer و مانند سایر اجزای خود ، ما از یک ظاهر طراحی شده با اجزای مدل دار استفاده خواهیم کرد. بیایید این م componentلفه را در زیر بسازیم.

import React, { useState } from "react";
import { Heading, Form, TextInput, Button } from "grommet";
import styled from "styled-components";
import { Context } from '../context/AppContext';
function Navbar() {
  const [value, setValue] = useState("");
  return (
    <Context.Consumer>
      {store => (
        <StyledDiv className="container">
          <Heading className="title">Grommet List App</Heading>
          <Form onSubmit={() => store.addToLists(value)} className="form-group">
            <TextInput
              className="form"
              value={value}
              type="text"
              onChange={(e) => setValue(e.target.value)}
              placeholder="Enter item"
            />
            <Button type="submit" className="button">Add to List</Button>
          </Form>
        </StyledDiv>
      )}
    </Context.Consumer>
  );
}
const StyledDiv = styled.div`
  .button {
    margin-top: 10px;
    background-color: purple;
    color: white;
    padding: 10px;
    border-radius: 5px;
  }
`;
export default Navbar;

ابتدا ، برای دستیابی به خصوصیات موجود در ارائه دهنده زمینه برنامه ، م componentلفه خود را در a قرار دادیم Context.Consumer جزء. بعد ، ما اضافه کردیم Heading از Grommet برچسب گذاری کنید ، و سپس با استفاده از روش ، فرم ورودی برای افزودن لیست های خود ایجاد کردیم addToList که یک پارامتر مقدار را به خود اختصاص می دهد (در مورد ما مقدار ورودی کاربر است). آخرین اما نه کمترین ، ما یک دکمه ارسال برای رسیدگی به فرم ارسال اضافه کردیم.

پس از درست انجام شدن ، برنامه ما باید به صورت زیر باشد:

برنامه لیست grommet
برنامه لیست Grommet. (پیش نمایش بزرگ)

نتیجه

در این مقاله ، ما درباره Grommet ، یک کتابخانه م componentلفه با پاسخگویی و قابلیت دسترسی در ذهن ، یاد گرفتیم. ما همچنین مراحل ایجاد یک برنامه م componentلفه قیمت گذاری را با استفاده از Grommet و یک برنامه لیست طی کردیم. با استفاده از Grommet برای م componentلفه خود و نیازهای UI برای برنامه React بعدی خود لذت ببرید. کد برنامه لیست Grommet را می توانید در اینجا پیدا کنید جعبه کد و م componentلفه قیمت گذاری را می توان یافت اینجا.

منابع

سرمقاله سر و صدا(ks ، vf ، yk ، il)
Read More

Smashing Workshops & Audits – Smashing Magazine

درباره نویسنده

روزانه بین سه زبان دست و پنجه نرم می کند ، آیریس به دلیل عشق به زبانشناسی ، هنر ، طراحی وب و تایپوگرافی و همچنین معدن طلای خود به…
اطلاعات بیشتر در مورد آیریس

با آنچه در Smashing آماده شده است آشنا شوید و برخی از محبوب ترین منابع جامعه را که طی چند هفته گذشته در خبرنامه ما نشان داده شده است جستجو کنید. Spoiler: جدید نیز وجود دارد کارگاه های آموزشی، ممیزی های جلویی و UX و قسمتهای پادکست را واقعا خرد می کند.

با غرق شدن سال جدید و هنوز تصویب قطعنامه های همه ، ما به آرامی به پروژه های روزمره خود برمی گردیم. و با انجام این کار ، ما بر روی اهداف جدید برای سال 2021 تمرکز می کنیم: بهبود قابلیت دسترسی ، تبدیل ، تعامل ، حفظ و البته عملکرد وب. همه ما اهداف شخصی متفاوتی برای امسال داریم ، اما یک چیز همه ما را متحد می کند: بهبود وب برای همه.

زمان بین سالها همیشه زمان مناسبی برای آرام شدن است. اما همچنین زمان خوبی برای انجام تحقیق ، تفکر ، نوشتن و حتی شاید کدگذاری و طراحی ناخواسته است. و تقریباً انگار که این یک سنت سالیانه باشد (در واقع چنین است) ، ویتالی همه آنچه را که در آن اتفاق افتاده است را خوانده است جلو در سال 2021، و دوباره همه آنها را در چک لیست عملکرد جلوی 2021 جمع آوری کنید.

بودجه عملکرد باید بسته به شرایط شبکه برای یک دستگاه تلفن همراه متوسط ​​سازگار شود
از فهرست بررسی عملکرد Front-End 2021: بودجه عملکرد باید بسته به شرایط شبکه برای یک دستگاه تلفن همراه متوسط ​​سازگار شود. (منبع تصویر: کتی همپنیوس) (پیش نمایش بزرگ)

این راهنما تقریباً تمام مواردی را که برای ساختن نیاز دارید را پوشش می دهد تجربه های سریع در وب امروز – از معیارها تا ابزارها و تکنیک ها و استراتژی های front-end. ثابت شده است که در سالهای گذشته برای بسیاری از خوانندگان کاملاً مفید بوده است ، بنابراین امیدوارم که برای شما نیز مفید باشد. همچنین می توانید چک لیست را ویرایش کنید (PDF، MS Word Doc و صفحات سیب) و آن را متناسب با نیازهای شخصی خود تنظیم کنید یا حتی از آن برای سازمان خود استفاده کنید.

حال ، بدون زحمت بیشتر ، بیایید نگاهی به آنچه تیم Smashing در ماه های آینده برای شما در نظر گرفته است ، بیاندازیم.

سال قبل خود را با کارگاه های آنلاین برنامه ریزی کنید

آیا تاکنون در یکی از کارگاه های ما شرکت کرده اید؟ ما هر بار که می دویم هیجان زده می شویم کارگاه های آنلاین ، عملی با همه شرکت کنندگان فوق العاده از سراسر جهان گرد هم می آیند تا با هم بیاموزند. ثابت شده است که این یک فرصت عالی برای برقراری ارتباط با مردم سراسر جهان و به اشتراک گذاشتن تجربیات به صورت زنده است. ایده های بسیاری به لطف جلسات طراحی و برنامه نویسی زنده، و افراد زیادی نیز هستند که دوستان جدیدی پیدا کرده اند!

به کارگاه های دوستانه Smashing ما بپیوندید!

این حتی بهتر می شود: ما اکنون داریم بسته های کارگاهی از بین آنها می توانید 3 ، 5 یا حتی 10 بلیط برای کارگاه های انتخابی خود انتخاب کنید – در حال انجام ، آینده یا بلیط هایی که در آینده اتفاق می افتد! کارگاه های آنلاین مورد نظر خود را انتخاب کنید – در بهترین قیمت و در بهترین تاریخ ها – برای خود ، تیم یا آژانس خود. به بسته های کارگاهی بروید.

ما برای امسال همچنان بر روی برنامه کار می کنیم و کارگاه های بیشتری برای اعلام وجود دارد. اگر می خواهید یکی را اجرا کنید ، به ما اطلاع دهید ، با Twitter DM در تماس باشید و ما قول می دهیم تمام تلاش خود را برای تحقق آن انجام دهیم. همچنین ، در صورت تمایل به مشترک شدن در اینجا اگر شما می خواهید اولین کسی باشید که در هنگام برگزاری کارگاه های جدید به شما اطلاع داده می شود. به علاوه ، شما به بلیط های زود پرنده همچنین.

جدید: سر و صدا حسابرسی های آنلاین در Front-End & UX

گربه را که لباس جادوگر را پوشیده است ، بالا بزنیدهمین هفته گذشته ما بی صدا محصول کوچک جدید خود را عرضه کردیم – ممیزی آنلاین – 30-60 دقیقه بررسی ویدئو به همراه گزارش کتبی یافته های ما. این یک روش سریع ساده برای تأیید اعتبار ایده های خود و دریافت آن است بازخورد صادقانه و بی طرفانه (در حال حاضر فقط از Vitaly) در قسمت جلویی و UX وب سایت ، برنامه یا ماکت های خود استفاده کنید. به علاوه ، دستورالعمل ها و نکات عملیاتی برای عملکرد بهتر.

حسابرسی به انتخاب خود را رزرو کنید و برخی از جزئیات مربوط به وب سایت ، برنامه یا ماکت های خود را به اشتراک بگذارید ، و تقریباً در کمترین زمان به شما پاسخ خواهیم داد!

Smashing Podcast: تنظیم کنید و الهام بگیرید

امسال هر دو هفته یک قسمت جدید Smashing Podcast منتشر کرده ایم و بازخورد آن نیز دریافت شده است عالی! با بیش از 56 هزار بارگیری (کمی بیش از هزار مورد در هفته و در حال رشد!) ، ما 34 میهمان در پادکست با زمینه های مختلف داشته ایم بنابراین چیزهای زیادی برای به اشتراک گذاشتن!

اگر موضوعی را که دوست دارید بشنوید و درباره آن بیشتر بیاموزید نمی بینید ، لطفاً برای میزبانی تماس بگیرید درو مک للان یا از طریق توییتر در تماس باشید در هر زمان – ما دوست داریم از شما بشنویم!

منتظر قسمت بعدی باشید که در تاریخ 26 ژانویه منتشر می شود!

خبرنامه سر و صدا: بهترین انتخاب ها

هفته نامه Smashing Newsletterما با خبرنامه هفتگی خود قصد داریم شما را بیاوریم خبرهای مفید و کاربردی و برخی از موارد مفیدی که مردم در صنعت وب در حال کار هستند را به اشتراک بگذارید. وجود دارد بنابراین بسیاری از افراد با استعداد در آنجا در پروژه های درخشان کار می کنند ، و ما می توانیم از آنها قدردانی کنیم اگر بتوانید به گسترش خبر کمک کنید و اعتبار شایسته آنها را به آنها بدهید.

همچنین ، با مشترک شدن ، نامه های پستی شخص ثالث یا تبلیغات پنهانی وجود ندارد و پشتیبانی شما واقعاً به ما در پرداخت قبوض کمک می کند. ❤️

علاقه مند به حمایت مالی هستید؟ در صورت تمایل می توانید گزینه های مشارکت ما را بررسی کنید و در هر زمان با تیم تماس بگیرید – آنها مطمئناً هرچه زودتر به شما پاسخ خواهند داد.

در زیر برخی از موارد ذکر شده است قطعات خبرنامه محبوب که اخیراً در خبرنامه خود به اشتراک گذاشته ایم:

سازگاری قلم های محلی پیش فرض

قلم های پیش فرض در سیستم عامل های مختلف به طور قابل توجهی متفاوت است. روشی آسان برای جستجوی قلم های پیش فرض سیستم ، به ویژه مواردی که باید از طریق CSS در دسترس باشند ، فراهم می کند font-family، زاچ چرمن ساخت دیدار خانواده فونت.

دیدار خانواده فونت

جدول سازگاری مانند a کار می کند می توانم استفاده کنم برای قلم های پیش فرض محلی: هنگامی که یک را وارد کنید font-family، این به شما می گوید که آیا پشتیبانی می شود ، و همچنین آنچه پنج استاندارد کلمه کلیدی استاندارد CSS را به شما می گوید (serif، sans-serif، monospace، و کمتر شناخته شده است fantasy و cursive) در هر سیستم عامل نام مستعار است. یکی برای نشانک ها.

بهبود عملکرد قلم های Google

فونت های میزبان شخصی به طور گسترده ای پذیرفته می شوند که سریعترین گزینه هنگام استفاده از فونتهای وب هستند. با این حال ، Google Fonts نیز می تواند سریع باشد: توانایی آنها در ارائه کوچکترین پرونده های فونت ممکن به عوامل و سیستم عامل های خاص کاربر و پشتیبانی نسبتاً جدید آنها از font-display از طریق پارامتر URL &display=swap در حال حاضر پایگاه خوبی هستند. و ، همانطور که هری رابرتز نشان می دهد، موارد زیادی وجود دارد که می توانید انجام دهید تا عملکرد آنها حتی بیشتر شود و بسیاری از مواردی که به طور معمول Google Fonts به آنها مشهور است را کاهش دهید.

سریعترین قلم های گوگل

برای مقاله او “سریعترین قلم های گوگل، “هری از سوراخ خرگوش آزمایش عملکرد پایین آمد تا بهترین ترکیب را برای قلم های سریع Google پیدا کند: بارگذاری همزمان CSS ، بارگیری همزمان فایل های قلم ، انتخاب FOFT ، دسترسی سریع به پرونده های CSS ناهمگام و گرم کردن دامنه های خارجی. همه این تکنیک های ترکیبی ممکن است در ابتدا کمی طاقت فرسا به نظر برسند ، اما هری مقاله خود را با یک قطعه باریک و قابل نگهداری به پایان می رساند که به شما کمک می کند از فونت های گوگل بیشترین بهره را ببرید.

#### ایمیل های پاسخگو آسان ساخته شده است

کدگذاری ایمیل های تمیز و پاسخگو که تجربه کاملی را در همه سرویس گیرندگان ایمیل محبوب فراهم می کند ، می تواند یک چالش زمانبر باشد. HEML اینجاست تا آنرا تغییر دهد. زبان نشانه گذاری منبع باز به شما قدرت بومی HTML را می دهد بدون اینکه با تمام س quالات الکترونیکی مقابله کنید. هیچ قانون یا الگوی خاصی برای استیل وجود ندارد ، بنابراین اگر HTML و CSS را می دانید ، برای شروع آماده هستید.

MJML

MJML بر اساس همان ایده ساده سازی روند ایجاد ایمیل های پاسخگو است. زبان نشانه گذاری بر اساس یک نحو معنایی است که روند کار را ساده می کند در حالی که یک موتور منبع باز سنگین می کند و MJML شما را به HTML پاسخگو ترجمه می کند. کتابخانه ای از اجزای استاندارد در وقت اضافی شما صرفه جویی می کند و پایگاه کد ایمیل شما را سبک می کند. و اگر می خواهید خودتان را بسازید ، راهنمای سیستم الگو مدولار ممکن است کمک کند ، امیدوار کننده!

الگوهای ایمیل HTML ضد گلوله

ایجاد ایمیل HTML در کلاینت های ایمیل کار ساده ای نیست. خوشبختانه ، ابزارها ، الگوها و چارچوب های قابل اعتماد زیادی وجود دارد که کار شما را برای سهولت انجام می دهد. مثلا، میزل چارچوبی است که به شما کمک می کند با Tailwind CSS و پس از پردازش پیشرفته و ویژه ایمیل ، ایمیل های HTML بسازید. همچنین چند پروژه آماده (Maizzle Starters) فراهم می کند که می توانید بلافاصله با آنها شروع کنید.

الگوهای ایمیل HTML ضد گلوله

سربروس و ایمیل HTML مجموعه های کوچکی از الگوهای قابل اعتماد و جامع را برای ایمیل های HTML پاسخگو ارائه دهید که در بیش از 50 مشتری ایمیل از جمله Gmail ، Outlook ، Yahoo ، AOL و بسیاری دیگر به خوبی آزمایش شده اند. EmailFrame.work به شما امکان می دهد الگوهای ایمیل پاسخگو HTML را با گزینه های شبکه از پیش ساخته شده و اجزای اساسی ایجاد کنید ، پشتیبانی شده در بیش از 60 مشتری ایمیل.

نوار، آفتاب پرست، کارت پستال، Topol.io و زنبور عسل Litmus ارائه می دهد بسیاری از قالب های ایمیل HTML رایگان ، الگوهای ایمیل پاسخگو برای خبرنامه ها ، به روزرسانی ها و رسیدهای محصول ، و CampaignMonitor دارای یک سازنده قالب ایمیل رایگان HTML با قابلیت drag’n’drop.

از شیب CSS گرفته تا جعلی داده

تصور کنید که فقط باید سبک های مثلث CSS را برای عناصر و عناصر شبه پیدا کنید. یا شاید با کاوش کمی پالت رنگ را اصلاح کنید رنگ و سایه از یک رنگ داده شده یا شاید یک گرادیان CSS خطی و شعاعی برای بخشی از صفحه ایجاد کنید. نیازی به انجام همه این کارها به صورت دستی یا تلاش برای یافتن آن قطعه های CSS در سراسر وب نیست. شما همیشه می توانید آنها را در پیدا کنید اوماتسوری.

از شیب CSS گرفته تا جعلی داده

اوماتسوری یعنی جشنواره به زبان ژاپنی ، و این سایت جشنواره کمی دوست داشتنی از ابزارهای مرورگر منبع باز برای استفاده روزمره است. در سایت ، یک مولد مثلث ، یک ژنراتور سایه های رنگ ، یک ژنراتور شیب دار ، تقسیم کننده صفحه ، کمپرسور SVG ، پیدا خواهید کرد. مبدل SVG → JSX، یک ژنراتور جعلی داده ، مکان نما CSS و کدهای رویداد صفحه کلید. توسط ویتالی رتیشچف و ولاد شیلوف طراحی و ساخته شده است. کد منبع سایت نیز موجود است.

CSS Shadow Generator

در حال جستجو برای ابزاری هستید که کد CSS را به طور خودکار تولید کند سایه های جعبه ای و صاف؟ خوب ، شما عاشق خواهید شد SmoothShadow. با الهام از مقاله ای که توسط توبیاس آهلین بجرروم، این ابزار عالی برای کمک به هرکسی در تولید کد مورد نیاز خود در محل ایجاد شده است.

پلاگین SmoothShadow Figma توسط فیلیپ بروم

اگر یک بار امتحان کنید ، استفاده از آن مشکل خواهد بود. این ابزار کوچک به شما امکان می دهد یک سایه جعبه و صاف لایه ای را بصورت بصری طراحی کنید ، اما همچنین با منحنی های تسکین دهنده فردی ، آلفا ، جبران و تاری را تنظیم کنید. و حتی بهتر می شود: خالق ابزار ، فیلیپ بروم، همچنین SmoothShadow را به صورت a منتشر کرده است پلاگین Figma، بنابراین می توانید جریان کاری خود را درست مثل همیشه که می خواستید بهینه کنید!

درک متغیرهای CSS

متغیرهای CSS قدرتمند هستند. آنها به طور معمول آبشار می خورند ، به ارث می برند ، امکان استفاده مجدد از کد را فراهم می کنند و بسیار مجاز هستند. اما در واقع چه چیزی را می توانید در یک متغیر CSS قرار دهید تا از پتانسیل آن استفاده کامل کند؟ از آنجا که برخی از موارد آنچنان واضح نیستند ، ویل بوید به بررسی احتمالات در a پست وبلاگ.

از مقادیر واحد گرفته تا کلمات کلیدی از پیش تعریف شده ، رشته های محتوا ، تصاویر و حتی مقادیر متحرک فانتزی ، خلاصه ویل چراغی را به رایج ترین مواردی که ممکن است بخواهید در ترکیب با یک متغیر CSS استفاده کنید ، می تاباند. یک نمای کلی عالی

هرگز یادگیری را متوقف نکن

یادگیری هرگز متوقف نمی شود. و از آنجا که اغلب مفیدترین اطلاعات مربوط به بینش ، ریزه کاری ها و نکات اندک است ، استفان جودیس شروع به کار “امروز یاد گرفتم

ریزه کاری های کد

این که آیا این آگاهی است که فیلترهای SVG می توانند در CSS ترسیم شوند یا اینکه چگونه به مرورگرها بگویید سایت شما از طرح های رنگی پشتیبانی می کند ، برای هر چیز کوچکی که آموخته است ، استفان خلاصه ای مختصر را به اشتراک می گذارد – نه تنها مربوط به CSS بلکه قابلیت دسترسی ، bash ، git ، GraphQL ، HTML ، JavaScript و موارد دیگر. سامانتا مینگ ریزه کاری ها همچنین صندوقچه گنجی از خرد و توسعه سریع اما بی نظیر وب است که مطمئناً زندگی شما را آسان تر می کند.

و این یک جمع بندی است!

ما از صمیم قلب این بار برای شما یک سال واقعا عالی آرزو می کنیم – پر از خنده ، لحظات به یاد ماندنی و تجربیات فوق العاده شگفت آور. برای یک ، ما نمی توانیم صبر کنیم تا شما را بصورت آنلاین یا حضوری ببینیم ، اما یک چیز مسلم است: ما صمیمانه از اینکه ماه به ماه سر و صدا می کنید ، قدردانی می کنیم و از این بابت ابدی سپاسگزاریم.

سر و صدا بمان!

سرمقاله سر و صدا(cm ، vf ، ra)

Read More

گزارش – مجله سر و صدا

درباره نویسنده

سوزان اسکاکا یک مجری ، مربی و مدیر آژانس سابق وردپرس است که اکنون به عنوان یک نویسنده مستقل کار می کند. او متخصص در کارفرمایی بازاریابی ، وب
بیشتر در مورد
سوزان اسکاکا

سال 2020 چیزی غیر طبیعی بود. مصرف کنندگان زندگی خود را متزلزل کردند و بسیاری از مشاغل به لطف وقایع جدید سال چالش های جدید و همچنین فرصت هایی را تجربه کردند.

در نتیجه همه این آشفتگی ها و تغییراتی که در سال 2020 اتفاق افتاد ، چشم انداز در حال تغییر است. ویرایشگر X، یک بستر ایجاد وب برای طراحان ، اخیراً یک سایت کوچک با پوشش روند طراحی وب سال 2021 – و به نظر می رسد که وب بسیار متفاوت از سالهای اخیر به نظر می رسد.

عکس صفحه اول اسلاید از گزارش Shaping Design Web Design در سال 2021 توسط ویرایشگر X
طراحی وب در سال 2021، یک گزارش تعاملی و ویترین تغییراتی که امسال به صفحه دیجیتال وارد می شود.

گزارش تعاملی ، منتشر شده در شکل دادن به طراحی، می رود از طریق ده ها نمونه سایتهایی که سعی در ارائه راه حلهای اصلی و غیر منتظره دارند. هر چند همه چیز فقط در مورد نمونه ها نیست. در این ویترین نحوه زندگی طراحان از عواقب یک سال گذشته و بینش خود در مورد آینده طراحی صفحه نمایش دیده می شود.

کل این تجربه دارای برخی از سنگهای قیمتی پنهان به خودی خود ، و آن را بر اساس ساخته شده است ویرایشگر X سکو. این شامل تعاملات و مثالهایی است که این روندهای آینده را به نمایش می گذارد. بیایید با جزئیات بیشتر برخی از آنها را بررسی کنیم.

رابط کاربری شما ، توسط شما

مصرف کنندگان غالباً مایل هستند جزئیات مربوط به ترجیحات خود را برای انواع مناسب ارائه دهند تجربیات شخصی شده. با این حال ، این امر مستلزم این است که مارک ها و طراحانی که برای این مارک ها کار می کنند تصمیم بگیرند که این شخصی سازی ها چیست. به طور معمول ، این فرم به صورت توصیه های شخصی یا پیام رسانی بر اساس سابقه بازدید کنندگان یا مشتریان با وب سایت در می آید.

وب متناسب با نیازها و تنظیمات مشتری. این امر به دنبال قابلیت دسترسی و اتصال است ، بلکه به دنبال ظاهر و احساس نیز می باشد. (منبع تصویر: گزارش روند روند طراحی)

با این حال ، ممکن است به زودی انتظار داشته باشیم که یک لایه متفاوت از تجربه کاربر متفاوت باشد – رابط هایی که حتی بر اساس تنظیمات کاربر ، به میزان قابل توجهی تنظیم می شوند. این امر نه تنها برای تنظیم حالت تاریک / روشن ، مضامین رنگی ، اندازه و فاصله متن ، کاهش حرکت و قابلیت دسترسی به طور کلی است.

رابط ها براساس اتصال موجود تغییر می کنند (آیا ما واقعاً قلم های وب و اختلاف منظر را روی اتصال 3G آهسته بارگیری می کنیم؟) ، حافظه دستگاه ، بلکه علایق شخصی و تنظیمات محصول نیز تغییر می کند. و در نتیجه ، ما در حال بررسی رابط هایی هستیم که در حال تبدیل شدن هستند برای هر مشتری مفرد است، منعکس کننده سلیقه ، سبک و هویت آنها است. ما به عنوان طراح ، از طراحی سیستم های طراحی فراتر خواهیم رفت و طیف گسترده ای از تجربیات را ایجاد خواهیم کرد ، یک نوع خاص برای هر مشتری.

فعال سازی در طراحی: مارک ها موضع می گیرند

وقتی مارک تجاری باقی نمی ماند و در مورد یک علت حرف نمی زند ، در واقع از وضعیت موجود پشتیبانی می کند. بنابراین جای تعجب نیست که بسیاری از مشتریان تصمیم می گیرند مارک ها و محصولاتی را پشتیبانی کنند که فراتر از کیفیت کالایی که ارائه می دهند با آنها ارتباط برقرار کنند. این محصول همیشه توسط افرادی که با آن تعامل دارند تجسم می یابد و همانطور که این افراد دارند ارزشها و اصول، آنها همچنین باید در صدای مارک تجاری نمایندگی پیدا کنند تا احساس کنند با محصول ارتباط دارند.

گزارش روند شکل دادن به طراحی روند شماره 4: کنشگری در طراحی
شرکت هایی که سخنی نمی گویند از وضعیت موجود حمایت می کنند. در سال 2021 ، ما باید انتظار داشته باشیم که مارک های بیشتری موضع فعالانه ای نسبت به ارزش های مورد حمایت خود داشته باشند. (منبع تصویر: گزارش روند روند طراحی)

و هنگامی که مارک ها تصمیم می گیرند درمورد چیزی که به آن اعتقاد دارند علنا ​​موضع بگیرند ، باید با آنها صحبت کنند تصاویر جسورانه و نمادین همچنین برای آنچه که آنها نشان می دهند ایستادگی می کنند. سال گذشته با گرافیک اعتراضی و کارزارهای تبلیغاتی خواستار عدالت نژادی ، زیست محیطی و سیاسی کاملاً مشخص شد. در سال 2021 ، فعالیت اجتماعی بی سر و صدا پشت یک صفحه در مورد حسن نیت یا ارزشهای شرکت نخواهد نشست. درعوض ، باید انتظار داشته باشیم که مارک ها ، آژانس ها و طراحان بیشتری جسورانه آنچه را که برای آن ایستاده اند اعلام کنند.

در نتیجه ، ممکن است موارد بیشتری را ببینیم طراحی منحصر به فرد و سفارشی دارایی ها ، مانند حروف چاپی ، تصاویر و مجموعه آیکون های سفارشی. طراحان باید سریعاً نسبت به وقایع در حال انجام واکنش نشان دهند و تصاویر جسورانه ای ایجاد کنند و پیام همبستگی و پشتیبانی صریح را ارسال کنند.

ما همچنین باید بیشتر ببینیم صداهای متنوع و فراگیر و پیام ها در تصاویر ، زبان و پیام های تبلیغاتی ، همراه با کمپین های بیشتر که توسط مارک ها پشتیبانی و فعال می شوند ، و طراحانی که آنها را ارائه می دهند.

حساسیت و صدای خوش بینانه

با گذر از دنیا در یک زمان دشوار و منزوی ، برای بسیاری از ما خوش بینانه نگاه کردن به آینده تنها راه مقابله با شرایط است. سال گذشته می تواند به عنوان یک دیده شود تنظیم مجدد جهانی تقریباً همه چیزهایی که در زندگی خود به آنها عادت کرده ایم ؛ زمانی که ما را مجبور به بازنگری در ارزش ها ، اصول ، دیدگاه ها و ارتباطات خود با افرادی که برایشان مهم است می کند.

همه ما از بدبینی و انزوا خسته شده ایم و به دنبال خوش بینی در خانواده و کار خود هستیم. این همان چیزی است که باید در طراحی نیز انتظار داشته باشیم.

بنابراین تعجب آور نیست که ما باید منتظر لحنی آرام ، نشاط آور و بازیگوشانه در پیام های مختلف وب باشیم. رنگ ها و تایپوگرافی احساس سبکتر ، روشن تر ، امیدوار کننده و حتی رویایی تر خواهد شد. ما باید بیشتر ببینیم صفات اصیل ، صادقانه و شخصی در طراحی دیجیتال ، با ترس مردم از نشان دادن آنچه برای آنها مهم است و اینکه چگونه واقعاً خود را می بینند نیست. همانطور که همه ما در یک قایق هستیم ، رابط ها و مارک های تجاری باید حساس تر و مراقب تر شوند ، شاید با یک مقدار شوخ طبعی و تمرکز بر سلامتی عاطفی.

برای طراحان ، این به معنای تصاویر پر انرژی و پالت های رنگی ، تجارب قابل دسترسی ، لحنی دوستانه ، حمایتی و پیام مثبت و نشاط آور است – همه آنها در کنار هم باعث ایجاد حس خوش بینی و بهزیستی می شوند.

همچنین ، طراحان در حال بازیابی فناوری و قرار دادن انسان در اولویت هستند. ما بیشتر نگاه خواهیم کرد فضاهای وب فراگیر و ایمن برای مکالمات راستین این همچنین به معنای تأکید بیشتر بر ردیابی ، حفظ حریم خصوصی ، محافظت از داده ها و اثر کربن سیستم عامل های آنلاین برای کمک به ایجاد وب بهتر و محیطی امن تر برای مردم و کره زمین است.

Retro Touch

اینکه بگوییم ما کاملاً در دنیای دیجیتال جا افتاده ایم ، کم لطفی خواهد بود. اما مطمئناً آسان نیست که دنیای دیجیتال را کنار بگذاریم وقتی وب زندگی و کار ما را بسیار آسان می کند (در بعضی مواقع). با این حال ، وقتی امروز به گذشته نگاه می کنیم ، اغلب اوقات را از دست می دهیم که اوضاع کمی متفاوت بوده است. در آنجا ، ما فقط چند سال به عقب نمی رویم ، بلکه حتی فراتر از آن ، با استفاده از طراحان از همه چیز از دیسک های فلاپی گرفته تا تمبرهای پرنعمت برای ایجاد لمس یکپارچه در طراحی آنها.

ما دوباره یک دایره کامل ایجاد می کنیم. چیزهایی که یک دهه پیش مد بودند در حال بازگشت هستند – بافت ها ، اشیا شخصی و طرح های غیر قابل پیش بینی. (منبع تصویر: گزارش روند روند طراحی)

پس از یک سلطنت طولانی از زیبایی مسطح ، ما اکنون در جستجوی جدید و روش های مدرن افزودن عمق به تجربیات آنلاین ما، بنابراین چیزهایی که در اوایل دهه 2000 در همه جای وب وجود داشت ، ممکن است دوباره مد شوند – اشیا from مربوط به زندگی شخصی ، طرح های کمی عجیب تر و کمتر قابل پیش بینی ، بافت ها ، الگوها و حتی هنر پیکسل.

از قضا ، ایجاد چنین وب سایت هایی این روزها آسان نیست زیرا بسیاری از دستورالعمل ها و قوانینی را که ما بیش از یک دهه به آنها عادت کرده ایم وارونه جلوه می دهد. اما در دنیایی که به طرز چشمگیری شباهت دارد ، متفاوت بودن توجه و توجه را به خود جلب می کند. بنابراین مارک هایی که می خواهند برجسته شوند ، باید در تجارب دیجیتالی خود نیز برجسته باشند. بنابراین دیدن حالت های غیرمعمول چیدمان و تعامل ، طرح هایی با مضمون ، در نهایت با پاششی از لمس یکپارچهسازی با سیستمعامل جدید تعجب آور نیست.

در گفتگو با طراحان برجسته

برای مشاهده بیشتر پیامدهای 2020 در صنعت طراحی ، شکل دادن به طراحی همچنین با طراحان برجسته صحبت کرد تا درباره سال گذشته آنها و همچنین امیدهای آنها برای آینده بشنود.

در یک مصاحبه های صادقانه و صمیمی، طراحانی مانند دبی میلمن و ناتاشا جن و مارینا ویلر از پنتاگرام درباره تغییر کاربری خود به کار از راه دور، تنش های اجتماعی و نژادی و بحران آب و هوایی که سال 2020 را سالی شبیه هیچ سال دیگر کرده است.

برای بسیاری از متخصصان خلاق ، این سال واقعاً دگرگون کننده بود. میتزی اوکو ، بنیانگذار “طراحان سیاه کجا هستند، “اخیراً شغل فنی خود را ترک کرد تا صدای سیاه را در طراحی تقویت کند. او می گوید: “اگر سه سال پیش به من می گفتی كه من یك فعال یا یك فعال طراحی می شوم ، به ویژه یك فعال طراحی مسابقه ، در چهره تو می خندیدم.”

بعدی چیست؟ نظرات طراحان محترم میتزی اوکو ، دبی میلمن ، مارینا ویلر ، ناتاشا جن ، چلسی الکساندر و بسیاری دیگر.

دیگران نیز همین احساس را دارند. کل سال باعث شد طراح آرون والتر شغل خود را به نفع نقش جدید در Resolve to Save Lives ، یک سازمان غیرانتفاعی بهداشت عمومی ، ترک کند. وی می گوید: “همه گیری باعث شد تا من در مورد چگونگی صرف وقت خود تأمل کنم.” “مشخص شد که من می خواهم کاری را به نفع من بزرگتر انجام دهم ، یا کاری انجام دهم که به طریقی قابل توجه به جهان کمک کند.”

همه داستان های شگفت انگیز توسط طراحان فوق العاده که یک دیدگاه شخصی منحصر به فرد در مورد چگونگی موفقیت خود در سال 2020 ارائه می دهند و سال برای زندگی شخصی و شغلی آنها چه معنی دارد.

می توانید جزئیات بیشتر درباره تجربیات این طراحان را در “طراحان در مورد تأثیر 2020 بر صنعت بحث می کنند”، همچنین در Shaping Design منتشر شده است.

بسته بندی کردن

جهان تغییر کرده است و همچنین نقش ما به عنوان طراح تغییر کرده است. ما هرگز نمی دانیم که آینده چه آینده ای را به همراه خواهد آورد ، اما در نهایت آن را شکل می دهیم و می توانیم تغییرات مثبت بیشتری نسبت به آنچه ممکن است فکر کنیم در جهان ایجاد کنیم. بنابراین شاید سال آینده ، وقتی روندهای طراحی دیجیتال را مشاهده می کنیم ، در وهله اول کسانی باشیم که این روندها را به وب می آورند.

شما می توانید کل گزارش روند طراحی 2021 را با مثالها و منابع در دسترس پیدا کنید روند طراحی وب سال 2021.

سرمقاله سر و صدا(ef، vf، he)
Read More

Front-End Performance Checklist 2021 – Smashing Magazine

آیا تحویل قلم وب بهینه شده است؟
اولین سوالی که ارزش پرسیدن دارد این است که آیا در وهله اول می توانیم با استفاده از فونت های سیستم UI کنار بیاییم – فقط باید اطمینان حاصل کنیم که دوبار بررسی کنید که به درستی ظاهر می شوند در سیستم عامل های مختلف اگر اینگونه نباشد ، احتمال اینکه فونت های وب مورد استفاده ما شامل حروف کوچک و سایر ویژگی ها و وزن های استفاده نشده باشد بسیار زیاد است. ما می توانیم از ریخته گری نوع خود درخواست کنیم زیر مجموعه فونت های وب یا اگر ما از قلم های منبع باز استفاده می کنیم ، آنها را به تنهایی با آنها زیر مجموعه کنید گلایفنگر یا فون سسکیرل. حتی می توانیم کل کار خود را با استفاده از پیتر مولر به صورت خودکار انجام دهیم زیر خط، ابزاری برای خط فرمان که به منظور ایجاد بهینه ترین زیرمجموعه های فونت وب ، صفحه شما را آنالیز می کند و سپس آنها را به صفحات ما تزریق می کند.

پشتیبانی از WOFF2 عالی است ، و ما می توانیم از WOFF به عنوان گزینه بازگشتی برای مرورگرهایی استفاده كنیم كه از آن پشتیبانی نمی كنند – یا شاید مرورگرهای قدیمی بتوانند از قلم های سیستم استفاده كنند. وجود دارد بسیاری ، بسیاری ، بسیاری گزینه هایی برای بارگیری قلم وب ، و ما می توانیم یکی از استراتژی های “Zach Leatherman’s” را انتخاب کنیمراهنمای جامع راهکارهای بارگذاری قلم، “(قطعه کد نیز به عنوان موجود است دستورالعمل های بارگیری قلم وب)

احتمالاً گزینه های بهتری که امروز باید در نظر گرفته شود ، هستند FOFT انتقادی با preload و روش “سازش”. هر دو از a رندر دو مرحله ای برای ارائه فونت های وب به صورت مرحله ای – ابتدا یک زیرمجموعه کوچک مورد نیاز است تا صفحه را سریع و دقیق با فونت وب رندر کند و سپس بقیه اعضای خانواده را به صورت همگام بارگیری کنید. تفاوت در این است که تکنیک “سازش” فقط درصورت غیرهمزمان پلی فیل را بارگیری می کند وقایع بارگذاری قلم پشتیبانی نمی شوند ، بنابراین نیازی نیست که بصورت پیش فرض polyfill را بارگیری کنید. آیا به یک پیروزی سریع نیاز دارید؟ Zach Leatherman دارای یک سریع 23 دقیقه ای آموزش و مطالعه موردی برای مرتب کردن فونت های خود.

به طور کلی ، ممکن است ایده خوبی باشد که از آن استفاده کنید preload منبع اشاره برای بارگیری فونت ها ، اما در علامت گذاری خود نکات را ذکر کنید بعد از پیوند به CSS و JavaScript مهم. با preload، وجود دارد معمای اولویت ها، بنابراین تزریق را در نظر بگیرید rel="preload" درست قبل از اسکریپت های مسدود کننده خارجی ، عناصر را به DOM وارد کنید. به گفته اندی دیویس ، “منابعی که با استفاده از یک اسکریپت تزریق می شود تا زمان اجرای اسکریپت از مرورگر پنهان است و ما می توانیم از این رفتار برای تأخیر در هنگام کشف مرورگر استفاده کنیم. preload hint. “در غیر این صورت ، بارگیری فونت برای شما در اولین زمان ارائه هزینه دارد.

یک عکس از اسلاید 93 که دو نمونه از تصاویر را با عنوان در کنار آنها نشان می دهد
وقتی همه چیز مهم است ، هیچ چیز حیاتی نیست. فقط یک یا حداکثر دو قلم از هر خانواده را بارگیری کنید. (اعتبار تصویر: زک چرمن – اسلاید 93) (پیش نمایش بزرگ)

ایده خوبی است که انتخابی باشد و پرونده هایی را انتخاب کنید که بیشترین اهمیت را دارند ، به عنوان مثال پرونده هایی که برای ارائه بسیار مهم هستند و یا به شما کمک می کنند تا از بازگشت مجدد متن قابل مشاهده و مختل جلوگیری کنید. به طور کلی ، زاک توصیه می کند یک یا دو قلم از هر خانواده را بارگیری کنید – همچنین منطقی است که برخی از بارگذاری قلم ها از اهمیت کمتری برخوردار باشند.

استفاده از آن کاملاً رایج شده است local() مقدار (که با نام فونت محلی به آن اشاره می شود) هنگام تعریف a font-family در @font-face قانون:

/* Warning! Not a good idea! */
@font-face {
  font-family: Open Sans;
  src: local('Open Sans Regular'),
       local('OpenSans-Regular'),
       url('opensans.woff2') format ('woff2'),
       url('opensans.woff') format('woff');
}

این ایده منطقی است: برخی از فونت های متن باز محبوب مانند Open Sans با برخی از درایورها یا برنامه ها از قبل نصب می شوند ، بنابراین اگر فونت به صورت محلی در دسترس باشد ، مرورگر نیازی به بارگیری فونت وب ندارد و می تواند محلی را نمایش دهد فوراً فونت بگیرید. مانند برام استین اشاره کرد، “اگرچه یک قلم محلی با نام قلم وب مطابقت دارد ، اما به احتمال زیاد همان قلم نیست. بسیاری از فونت های وب با نسخه “دسک تاپ” آنها متفاوت است. متن ممکن است متفاوت ارائه شود ، برخی از نویسه ها به قلم های دیگر بازمی گردند ، ویژگی های OpenType به طور کامل از دست می روند یا ارتفاع خط متفاوت است. “

همچنین ، با گذشت زمان و تحول حروف چاپی ، نسخه نصب شده محلی ممکن است با قلم وب بسیار متفاوت باشد و شخصیت ها بسیار متفاوت به نظر برسند. بنابراین ، به گفته برام ، بهتر است که هرگز فونت ها و قلم های نصب شده محلی را مخلوط نکنید که در @font-face قوانین Google Fonts از همین طریق پیروی کرده است از کار انداختن local() در نتایج CSS برای همه کاربران، غیر از درخواست های Android برای Roboto.

هیچ کس دوست ندارد منتظر نمایش محتوا باشد. با font-display توصیف کننده CSS، ما می توانیم رفتار بارگیری قلم را کنترل کرده و محتوای قابل خواندن را فعال کنیم بلافاصله. مستقیما (با font-display: optional) یا تقریبا فوری (با وقفه 3 ثانیه ، به شرطی که فونت با موفقیت بارگیری شود – با font-display: swap) (خوب ، این یک کمی پیچیده تر از آن.)

با این حال ، اگر شما می خواهید تأثیر بازآفرینی متن را به حداقل برسانید، ما می توانیم از API بارگیری قلم (در همه مرورگرهای مدرن پشتیبانی می شود) به طور خاص این بدان معنی است که برای هر قلم ، ما می خواهیم ایجاد کنیم FontFace شی ، سپس سعی کنید همه آنها را بیاورید ، و فقط سپس آنها را به صفحه اعمال کنید. به این ترتیب ، ما همه بازتولیدها را گروه بندی کنید با بارگیری همزمان همه فونت ها ، و سپس دقیقاً یک بار از فونت های برگشتی به فونت وب جابجا شوید. نگاهی بیندازید توضیحات زک، از ساعت 32:15 شروع می شود ، و قطعه کد):

/* Load two web fonts using JavaScript */
/* Zach Leatherman: https://noti.st/zachleat/KNaZEg/the-five-whys-of-web-font-loading-performance#sWkN4u4 */

// Remove existing @font-face blocks
// Create two
let font = new FontFace("Noto Serif", /* ... */);
let fontBold = new FontFace("Noto Serif, /* ... */);

// Load two fonts
let fonts = await Promise.all([
  font.load(),
  fontBold.load()
])

// Group repaints and render both fonts at the same time!
fonts.forEach(font => documents.fonts.add(font));

Adrian Bece برای شروع فکت واکشی خیلی زود با API Font Loading حاکی از برای اضافه کردن یک فضای شکستن nbsp; در بالای body، و آن را بصری با مخفی کنید aria-visibility: hidden و یک .hidden کلاس:

<body class="no-js">
  <!-- ... Website content ... -->
  <div aria-visibility="hidden" class="hidden" style="font-family: '[web-font-name]'">
      <!-- There is a non-breaking space here -->
  </div>
  <script>
    document.getElementsByTagName("body")[0].classList.remove("no-js");
  </script>
</body>

این همراه با CSS است که خانواده های مختلفی از قلم ها را برای حالت های مختلف بارگیری اعلام می کند ، با تغییراتی که Font Loading API پس از بارگیری موفقیت آمیز قلم ها ایجاد می کند:

body:not(.wf-merriweather--loaded):not(.no-js) {
  font-family: [fallback-system-font];
  /* Fallback font styles */
}

.wf-merriweather--loaded,
.no-js {
  font-family: "[web-font-name]";
  /* Webfont styles */
}

/* Accessible hiding */
.hidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

اگر تا به حال فکر کرده اید که چرا علی رغم همه بهینه سازی های شما ، لایت هاوس هنوز هم پیشنهاد می کند منابع انسداد رندر (قلم ها) را حذف کنید ، در همان مقاله Adrian Bece چند مورد را ارائه می دهد تکنیک های خوشحال کردن فانوس دریایی، همراه با بارگذار قلم گتسبی اومنی، یک بارگذاری فونت ناهمگام و پلاگین مدیریت فلش متن غیر سبک (FOUT) برای گتسبی.

اکنون ، ممکن است بسیاری از ما از CDN یا میزبان شخص ثالث برای بارگیری قلم های وب از آن استفاده کنیم. به طور کلی ، آن است همیشه بهتره که همه دارایی های ثابت خود را میزبان خود کنید اگر می توانید ، بنابراین استفاده کنید google-webfonts-helper، روشی بدون دردسر برای میزبانی خودکار قلم های Google. و اگر امکان پذیر نباشد ، شاید می توانید پروکسی پرونده های قلم Google را از طریق مبدا صفحه.

شایان ذکر است که گوگل در حال انجام این کار است کمی کار خارج از جعبه ، بنابراین یک سرور برای جلوگیری از تأخیر ممکن است نیاز به کمی تغییر داشته باشد (ممنون ، باری!)

این مسئله از اهمیت ویژه ای برخوردار است ، به خصوص از زمان Chrome v86 (انتشار اکتبر 2020) ، منابع بین سایت مانند قلم ها را نمی توان در همان CDN به اشتراک گذاشت دیگر – به دلیل حافظه پنهان مرورگر پارتیشن بندی شده. این رفتار سالها در Safari پیش فرض بود.

اما اگر به هیچ وجه امکان پذیر نباشد ، راهی برای رسیدن به آن وجود دارد سریعترین فونت های Google با قطعه هری رابرتز:

<!-- By Harry Roberts.
https://csswizardry.com/2020/05/the-fastest-google-fonts/

- 1. Preemptively warm up the fonts’ origin.
- 2. Initiate a high-priority, asynchronous fetch for the CSS file. Works in
-    most modern browsers.
- 3. Initiate a low-priority, asynchronous fetch that gets applied to the page
-    only after it’s arrived. Works in all browsers with JavaScript enabled.
- 4. In the unlikely event that a visitor has intentionally disabled
-    JavaScript, fall back to the original method. The good news is that,
-    although this is a render-blocking request, it can still make use of the
-    preconnect which makes it marginally faster than the default.
-->

<!-- [1] -->
<link rel="preconnect"
      href="https://fonts.gstatic.com"
      crossorigin />

<!-- [2] -->
<link rel="preload"
      as="style"
      href="$CSS&display=swap" />

<!-- [3] -->
<link rel="stylesheet"
      href="$CSS&display=swap"
      media="print" onload="this.media="all"" />

<!-- [4] -->
<noscript>
  <link rel="stylesheet"
        href="$CSS&display=swap" />
</noscript>

استراتژی هری این است که ابتدا منشا فونت ها را به طور پیشگیرانه گرم کند. سپس واکشی ناهمگام با اولویت بالا را برای پرونده CSS آغاز می کنیم. پس از آن ، ما یک واکشی ناهمگام با اولویت کم را شروع می کنیم که فقط پس از ورود به صفحه اعمال می شود (با ترفند چاپ صفحه سبک) سرانجام ، اگر جاوا اسکریپت پشتیبانی نمی شود ، به روش اصلی بازمی گردیم.

آه ، صحبت کردن در مورد Google Fonts: می توانید اصلاح تا 90٪ از اندازه درخواستهای Google Fonts توسط اعلام تنها کاراکترهای مورد نیاز شما با &text. به علاوه ، پشتیبانی از نمایش قلم اخیراً اضافه شده است به Google Fonts نیز ، بنابراین می توانیم از آن خارج از جعبه استفاده کنیم.

هر چند یک کلمه احتیاط سریع است. اگر استفاده می کنید font-display: optional، آی تی ممکن است بهینه نباشد همچنین استفاده کنید preload زیرا این درخواست فونت وب را زود هنگام آغاز می کند (باعث ازدحام شبکه اگر منابع مسیر حیاتی دیگری دارید که باید بازیابی شوند). استفاده کنید preconnect برای درخواست های فونت متقابل سریع تر ، اما با احتیاط انجام دهید preload به عنوان پیش بارگذاری فونت ها از مبدأ متفاوت ، مشاجره شبکه را در پی خواهد داشت. همه این تکنیک ها در زاکس پوشش داده شده است دستورالعمل های بارگیری قلم وب.

از طرف دیگر ، شاید ایده خوبی باشد که از قلم های وب انصراف دهید (یا حداقل مرحله دوم رندر) اگر کاربر آن را فعال کرده باشد کاهش حرکت در تنظیمات دسترسی یا انتخاب کرده است حالت صرفه جویی در داده (دیدن Save-Data سرتیتر) ، یا هنگامی که کاربر اتصال کند دارد (از طریق شبکه اطلاعات API)

ما همچنین می توانیم از prefers-reduced-data جستجوی رسانه CSS به نه اگر کاربر حالت ذخیره داده را انتخاب کرده است ، تعریف های قلم را تعریف کنید (موارد موجود وجود دارد) موارد استفاده دیگر نیز) اگر پرسش رسانه ای باشد ، اساساً افشا می شود Save-Data عنوان درخواست از پسوند Client Hint HTTP روشن / خاموش است تا امکان استفاده با CSS فراهم شود. در حال حاضر فقط در Chrome و Edge پشت یک پرچم پشتیبانی می شود.

معیارهای؟ برای اندازه گیری عملکرد بارگیری قلم وب ، موارد زیر را در نظر بگیرید همه متن قابل مشاهده است متریک (لحظه بارگیری همه فونت ها و نمایش تمام مطالب در فونت های وب) ، زمان واقعی نوشتن همچنین شمارش مجدد قلم وب بعد از اولین رندر بدیهی است که هرچه هر دو معیار پایین تر باشند ، عملکرد بهتری دارند.

چه در مورد قلم های متغیر، ممکن است بپرسید؟ توجه به آن مهم است متغیر قلم ها ممکن است به یک مورد نیاز داشته باشند عملکرد قابل توجه. آنها فضای طراحی بسیار گسترده تری را برای انتخاب تایپوگرافی در اختیار ما قرار می دهند ، اما هزینه آن صرف هزینه یک درخواست سریال مخالف با تعدادی درخواست پرونده فردی است.

در حالی که فونت های متغیر اندازه کلی پرونده ترکیبی پرونده های قلم را به شدت کاهش دهید، ممکن است این درخواست تنها کند باشد ، و ارائه آن را مسدود می کند همه محتوای یک صفحه. بنابراین زیر مجموعه و تقسیم قلم به مجموعه کاراکترها هنوز مهم هستند. از طرف خوب ، با وجود یک فونت متغیر ، ما به طور پیش فرض دقیقاً یک بار دیگر دریافت خواهیم کرد ، بنابراین برای گروه بندی مجدد رنگ ها به JavaScript نیازی نیست.

حالا ، چه چیزی باعث می شود استراتژی بارگیری فونت وب ضد گلوله سپس؟ قلم های زیرمجموعه را آماده کرده و برای رندر 2 مرحله ای آماده کنید ، آنها را با a اعلام کنید font-display توصیفگر ، از Font Loading API برای گروه بندی مجدد رنگ ها و ذخیره فونت ها در حافظه پنهان کارگر سرویس ثابت استفاده کنید. در اولین بازدید ، پیش بارگیری اسکریپت ها را درست قبل از اسکریپت های خارجی مسدود کنید. می توانید دوباره به برام استین برگردید Font Face Observer در صورت لزوم و اگر شما علاقه مند به اندازه گیری عملکرد بارگذاری فونت هستید ، Andreas Marschke به کاوش می پردازد ردیابی عملکرد با Font API و UserTiming API.

در آخر ، اضافه کردن را فراموش نکنید unicode-range برای تجزیه یک قلم بزرگ به قلمهای کوچکتر مخصوص زبان و استفاده از مونیکا دینکلسکو قلم-سبک-منطبق برای به حداقل رساندن تغییر ناخوشایند در طرح ، به دلیل اختلاف اندازه بین فونت و وب.

متناوباً ، برای تقلید از یک فونت وب برای یک فونت جایگزین ، می توانیم استفاده کنیم توصیف کنندگان @ font-face برای نادیده گرفتن معیارهای قلم (نسخه ی نمایشی، در Chrome 87 فعال شده است). (توجه داشته باشید که تنظیمات با پشته های پیچیده پیچیده پیچیده است.)

آیا آینده درخشان به نظر می رسد؟ با غنی سازی قلم مترقی، سرانجام ممکن است بتوانیم “فقط قسمت مورد نیاز قلم را در هر صفحه مشخص بارگیری کنیم ، و برای درخواست های بعدی برای آن قلم ، بارگیری اصلی را با مجموعه های اضافی از حروف لغو” به صورت پچ “انجام دهد ، همانطور که در بازدیدهای پی در پی صفحه مورد نیاز است” ، جیسون بنیادین آن را توضیح می دهد. نسخه ی نمایشی انتقال افزایشی در حال حاضر در دسترس است ، و آن است کار در حال انجام.

Read More

متنوع کردن اقتصاد آنلاین – مجله سر و صدا

درباره نویسنده

فردریک اوبراین یک روزنامه نگار مستقل است که با اکثر کلیشه های انگلیس مطابقت دارد. علایق وی شامل ادبیات آمریکایی ، طراحی گرافیک ، پایدار …
بیشتر در مورد
فردریک

اصول بنیانگذار شبکه جهانی وب با سالها اعتماد بیش از حد به تبلیغات مخدوش شده است. رفع این عدم تعادل و حرکت به سمت وب با اخلاقی تر و بازتر ، به معنای ترویج پایه ها است ، زیرا سایت هایی که راه های دیگری نشان می دهند امکان پذیر است.

صحبت در مورد پول ، و این روزها پول وحشتناکی در اینترنت وجود دارد. این لزوماً به خودی خود چیز بدی نیست ، اما به نظر می رسد که نحوه طراحی و تأمین مالی وب سایت ها را با مشکل روبرو کرده است. همه گیری – و در نتیجه فروپاشی اکوسیستم تبلیغات آنلاین که قبلاً تاب خورده است – به وضوح روشن می کند که وب برای ایجاد تنوع در روش درآمدزایی و درنهایت برای چه کسی به آن نیاز دارد.

وضعیت وب

اینترنت در حال حاضر در بهترین شکل نیست. در سال 2017 ، بنیانگذار شبکه جهانی وب ، سر تیم برنرز لی، گفت:

“سیستم در حال شکست است. روشی که درآمد تبلیغات با clickbait کار می کند ، تحقق هدف کمک به بشریت در راستای حقیقت و دموکراسی نیست. “

فکر می کنم گفتن از آن زمان تا کنون عمدتاً بدتر شده ایمن است. تبلیغات در همه جا ، ردیابی برنامه های amok ، clickbait ، اطلاعات غلط ، بی طرفی خالص در محاصره … تعامل سلطان است – مهمتر از تفاوت های ظریف ، اخلاق یا حقیقت – زیرا پول در این قسمت است. کاربر عادی روزانه هزاران تبلیغ را مشاهده می کند. شبکه جهانی وب دقیقاً چراغ درخشان بشریت در حال حاضر نیست ، در زمانی که بسیاری از چیزها باعث افزایش احساس کلی عذاب گریزناپذیر ما می شوند.

در میان این فرهنگ آنلاین سگ-ردیابی-سگ ، وب سایت مشترک به پوسته های نرم و مبهم آنچه ممکن است باشد ، تبدیل شده است. آیا می توانیم آگهی دیگری در آنجا وارد کنیم؟ چند پاپ آپ دیگر چطور؟ شاید چند لینک وابسته. همه ما موذیانه بودن وب مدرن را تجربه کرده ایم ، همه ما دیده ایم که پنجره های بازشو می گویند “ما به حریم خصوصی شما اهمیت می دهیم” قبل از اینکه بخواهیم حریم خصوصی خود را امضا کنیم ، گفتند. یکی از اینها خیلی راحت دروغ گفته می شود و خیلی راحت.

هنوز هم من اینجا نیستم تا شکایت کنم. حداقل ، من نیستم فقط اینجا برای شکایت در تاریکی سوسو می زند. روش های دیگری برای پرداخت هزینه وب سایت ها وجود دارد. این نیز به همین دلیل خوب است در نهایت قانون با شبکه جهانی وحشی وحشی همراه خواهد شد و سپس ارزش تبلیغات حتی کمتر خواهد بود.

این همان چیزی است که این قطعه در مورد آن است: گزینه های جایگزین ، و اینکه چرا ارزش دارد که آنها را بپذیرید. همیشه تبلیغات وجود خواهد داشت و تا جایی که خوب است ، اما نباید اینگونه باشد فقط تبلیغات باشد.

بیشتر خواندن

بررسی گزینه های جایگزین

لازم نیست هر وب سایتی درآمد کسب کند. بیایید این را از سر راه برداریم. درآمدزایی معیار اندازه گیری یک چیز نیست. لازم نیست هر وب سایتی به هزینه آن اهمیت دهد. سرگرمی ها ، وبلاگ ها ، انجمن ها ، هنرهای دیجیتال … بسیاری از کارهایی که ارزش دارد به خاطر خودشان انجام شود.

این مقاله به سایتها یا برنامه های وب هدایت می شود که نوعی خدمات ارائه می دهند ، با هزینه های عملیاتی و عوامل مالی طولانی مدت که بیش از چند دلار برای یک نام دامنه است. این مقاله در مورد گسترش افق اقتصاد آنلاین فراتر از تبلیغات ، تبلیغات و تبلیغات بیشتر است.

اشتراک ها

این احتمالاً بارزترین گزینه برای تبلیغات است ، و پیچیده تر از آن چیزی است که تصور می کنید برای اجرای آن انجام دهید. اصل آن ساده است: یک وب سایت کاری ارزشمند انجام می دهد و از کاربران می خواهد هزینه آن را پرداخت کنند.

یک مزیت عمده اشتراک ها سادگی آنها است. ایکس می خواهید؟ هزینه X را بپردازید. افراد بیشتر و بیشتر درمورد این واقعیت واقعیت دارند که تعداد کمی از موارد آنلاین کاملا رایگان هستند. بیشتر اوقات ، زمانی که یک سرویس آنلاین “رایگان” باشد ، کاربران آن محصول هستند. یک سرویس ارزشمند با قیمت مناسب پادزهر خوبی برای آن است.

یک نمونه برجسته این است متوسط. ثبت نام با چند دلار در ماه به اعضای امکان دسترسی به مقالات را می دهد. این رویکرد به طور فزاینده ای محبوب در محافل تحریریه است. برخی از نشریات مانند روزنامه گاردین، محتوای آنها را در دسترس همه قرار می دهد ، در حالی که موارد مشابه مجله نیویورک تایمز از یک paywall استفاده کنید. در هر صورت ، زیر و بم یکسان است: کمک کنید کاری که ما با مشترک شدن انجام می دهیم.

خرد کردن خود ، چند سال پیش که در طراحی مجدد سایت بزرگ به دور از تبلیغات متمرکز شده بود ، این کار را به خوبی انجام می دهد. بله ، تبلیغات هنوز هم سهم بزرگی دارند ، اما این موارد نیستند فقط بخش پایداری آنلاین این نیست که همه تخمهای خود را از یک سبد به سبد دیگر منتقل کنید – بلکه در مورد تنوع ، فرار از دید تونل در تبلیغات است.

درخواست ثبت نام برای عضویت در Smashing Magazine
استفاده از دستورالعمل های اشتراک با مارک در طراحی سایت می تواند به شما در ایجاد یک جامعه قوی کمک کند. (چرا بله ، شما می توانید درباره عضو شدن در Smashing بیشتر بدانید.)

نمونه هایی از اشتراک ها و کمک های مالی وجود دارد که به دور از زمینه های تحریریه کار می کنند. لیندا هزینه های دوره های آن ویکیپدیابا مهربانی ، بدون آگهی است و به صورت متناوب پایدار می ماند درایوهای کمک مالی به سازمان مادر خود ، بنیاد ویکی مدیا.

روش اشتراک برای همه مناسب نیست. بالاخره مثالهای بالا همه نام خانوادگی هستند. عجیب است که اعتماد فاکتور بزرگی است و اگر تازه وارد این گروه شوید چند نفر احتمالاً موول خود را به شما می دهند؟

و البته وضعیت Catch-22 paywalls نیز باعث شده است که سایتی برای بیشتر اینترنت غیرقابل دسترسی باشد. این برای رشد مخاطب و در تضاد با روحیه بنیانگذار وب شفافیت و شفافیت بد است. این برای بسیاری از افراد – از جمله خود من – خوشایند نیست.

من فکر می کنم لطف پس انداز در اینجا این است که “مدل اشتراک” طیف بسیار بیشتری از حتی پنج سال پیش است. بسته به کاری که یک وب سایت انجام می دهد ، می توانید از paywalls تا دکمه های “خرید یک قهوه برای من” همه چیز داشته باشید.

یک دکمه عمومی
(پیش نمایش بزرگ)

اگر خدماتی ارائه می دهید – اعم از محتوای تحریریه با کیفیت ، ابزارهای مفید ، دسترسی آزاد به داده ها یا موارد دیگر – از درخواست پشتیبانی خجالتی نباشید. و از ادغام این درخواست ها در طراحی وب سایت خجالتی نباشید. انواع ابزارها و سیستم عامل ها می توانند با سهولت نسبی در سایت های موجود ادغام شوند. پاترون، کو فی، و بسیاری دیگر.

این به معنای احساس گناه در افراد نیست. هرکسی توانایی پشتیبانی از سایتهایی که بازدید می کنند را ندارد و همه فکر نخواهند کرد که ارزش پشتیبانی را دارید. این به شما بستگی دارد که یک پرونده مثبت برای خود بسازید سیستم عامل های سرمایه گذاری گسترده مانند جمعی باز و پف کرده به ویژه نقاط مرجع خوبی برای این امر هستند ، رفتار مدل سازی مانند:

  • عدم احساس گناه در بازدیدکنندگان
  • گفتن داستان هایی که مردم می خواهند در آنها پشتیبانی کنند و از آنها پشتیبانی کنند.
  • شفافیت درباره اینکه پول کجا می رود.

بحث ادغام نیز وجود دارد. دکمه ها ، پنجره های بازشو ، CTA های محتاطانه قرار می گیرند. همه چیز جمع می شود ، شروع و تحت فشار قرار دادن یک طرح حامی خواننده در یک کار قبلی

خواندن و منابع بیشتر

پرداخت های خرد

روزهای ابتدایی این یکی است ، اما چیزی است که باید مراقب آن باشید. کسب درآمد از وب مفهومی است که به موجب آن کاربران اینترنت نوعی صندوق دارند که به طور منظم شارژ می کنند – بیایید هر ماه 5 دلار بگوییم. وقتی زمان در یک سایت صرف می شود ، کسری از این صندوق به آن سایت منتقل می شود.

مرورگر وب شجاع یک مثال عمده در این مورد است. مورد دیگر کسب درآمد از وب است ، یعنی به عنوان یک استاندارد W3C پیشنهاد می شود. یا طومار، نوعی بسته وب جذاب بدون تبلیغات.

به نظر من این رویکرد عصبی بهم زده است ، زیرا به تعادل بین اینترنت غرب وحشی و شبکه شرکتی منجر می شود. هرچه افراد بیشتر به آن اعتقاد داشته باشند ، نتیجه بهتری خواهد داشت. سه میلیارد نفر از وب استفاده می کنند. اگر 10٪ برای سه دلار در ماه ثبت نام کنید ، این هنوز ده میلیارد دلار جالب برای جذب است.

در حال حاضر نتایج نزدیک به پنی است. اما سلام ، هیچ چیز ارزش داشتن آسان نیست. حمایت از این رویکرد یک خیابان دو طرفه است. بسته به سیستم ، پیاده سازی می تواند به سادگی افزودن یک خط کد به <head> وب سایت شما همچنین مورد پیاده روی در پیاده روی است.

آیا این روش به تنهایی باعث صرفه جویی در اینترنت می شود؟ احتمالاً نه ، اما باز هم ، دور شدن از تبلیغات در مورد متنوع سازی ، یافتن گلوله نقره ای نیست.

سیستم عامل های رایگان و غیر شرکتی

بدیهی است که سیستم عامل های رایگان پاسخی برای برنامه های بزرگ و تجارب وب نیستند. با این حال ، آنها اغلب یک روش عالی برای حضور آنلاین هستند بدون اینکه در سیاهچاله مشارکت رسانه های اجتماعی مدرن جذب شوند.

مکانهایی مانند ناسازگاری ها – ادای احترام به شهرهای جغرافیایی – هنوز زندگی زیادی در آنها وجود دارد. من می دانم ، من در آن هستم. سیستم عامل های غیر شرکتی مستقل و بازیگوش مانند زمان دیگری احساس می شوند ، اما هنوز هم روش های خوبی برای کاشت پرچم شما به صورت آنلاین هستند.

عکس صفحه وب سایت Neocities
اجتماعات وب عجیب ، شگفت انگیز و متکی به خود زنده و سالم هستند. شما فقط باید آنها را جستجو کنید. (پیش نمایش بزرگ)

به نظر می رسد بازاریابی در بین مردم چکش خورده است که تنها وب سایتی که ارزش داشتن آن را دارد وب سایتی است که شما برای آن از طریق بینی پرداخت می کنید. اینطور نیست وب عجیب و غریب DIY زنده و خوب است.

با امثال Netlify و صفحات GitHub در مورد آن کاملاً امکان پذیر است که بدون پرداخت هزینه ای بیش از یک نام دامنه ، پیگ بک همراه شوید و حتی این اختیاری است.

البته این نوع رویکرد محدودیتی دارد ، اما این باعث نمی شود که این دوام از دوام کمتری برخوردار باشد. زمانی که یک وب سایت بازدید کافی برای ضمانت اجرای یک برنامه میزبانی اختصاصی را ایجاد می کند ، احتمالاً برای درخواست پشتیبانی مناسب است.

بیشتر خواندن

در اختیار گرفتن اطلاعات خود

همه این بحث ها در مورد تنوع و پایداری به بحث گسترده تری در حال حاضر درباره حریم خصوصی مربوط می شود. نیمی از پیام پیام رسانی است. اگرچه آگاهی در حال افزایش است ، بسیاری از مردم هنوز از هزینه های “رایگان” تجربه آنلاین اطلاع ندارند. این یک تصادف نیست وقت بگذارید و توضیح دهید که اگر کسی در سرویس وب سایت مشترک شود ، فقط سرویس را دریافت نمی کند. آنها اولویت ، احترام و حریم خصوصی را دریافت می کنند.

طرفداری از یک وب کم آگهی محور به معنای نگاه صادقانه به آنلاین بودن استادان ماست. وقتی سایتی درست می کنید ، سایت برای چه کسانی است؟ آیا برای تبلیغ کنندگان است؟ شرکت های وابسته؟ مشتری ها؟ یا برای افرادی است که از سایت بازدید می کنند؟ چقدر دوست داشتنی است که استراتژی های اخلاقی درآمدزا قوی داشته باشید که باعث شود وب سایت ها قبل از هر چیز برای افرادی که از آنها استفاده می کنند دیده شود.

نقش توسعه دهندگان

در یک رشته کاری که پروژه ها به طور فزاینده ای تکه تکه می شوند ، آسان است که خود را از شکست اخلاقی هر پروژه معین حذف کرد. ادوارد اسنودن گفت که همین امر در مورد برنامه های جاسوسی NSA که او در سال 2013 به بیرون درز کرد صادق بود. فقط امسال وی شبکه های اجتماعی و برنامه ها را به عنوان دارای خطرات مشابه شناسایی کرد.

پایداری را در طراحی های خود بگنجانید. آنچه را انجام می دهید و چگونگی زنده ماندن و آنچه مردم می توانند برای کمک به آنها انجام دهند را بیان کنید. پیشرفت به خودی خود اتفاق نمی افتد. هرگز نداشته و نخواهد داشت. ما باید تغییری باشیم که می خواهیم ببینیم.

سرمقاله سر و صدا(ریل)
Read More

Sparks Of Inspiration برای استقبال از سال نو (ژانویه 2021 نسخه تصاویر پس زمینه) – مجله سر و صدا

برای شروع سال جدید چه راهی بهتر از الهام تازه وجود دارد؟ مجموعه تصاویر پس زمینه ما برای ژانویه 2021 مطمئنا لبخند بر لب شما می اندازد – و شاید ایده های جدیدی نیز ایجاد کند.

شاید شما در حال خواندن این مقاله از سال 2021 شروع کرده باشید ، شاید هنوز منتظر شروع شمارش معکوس باشید. در هر صورت ، برای الهام گرفتن از سال نو هرگز دیر یا زود نیست!

برای این پست تصاویر پس زمینه ، هنرمندان و طراحان از سراسر جهان بار دیگر مهارت های خلاقانه خود را آزمایش کرده و تصاویر پس زمینه زیبا و منحصر به فردی را برای استقبال طراحی کردند ژانویه 2021. همه آنها دارای یک تقویم هستند ، و درصورتی که بخواهید حتی پس از پایان ژانویه به موارد دلخواه خود پایبند باشید ، شما را با نسخه های غیر تقویمی هر طرح نیز پوشانده ایم. یک تشکر بزرگ از همه کسانی که تصویر زمینه ایجاد کردند و این بار آن را با ما به اشتراک گذاشتند – شما واقعاً واقعی هستید خرد کردن!

در انتهای این پست ، یک چیز خوب پاداش نیز در انتظار شماست: مجموعه ای از گنجینه های ژانویه که به صورت دستی انتخاب شده و در اعماق بایگانی تصویر زمینه خود کشف کردیم. 2021 شاد و سالم داشته باشید!

  • همه می توان بر روی تصاویر کلیک کرد و منجر به پیش نمایش تصویر زمینه ،
  • ما ایده ها و انگیزه های پشت کار هر هنرمند را احترام می گذاریم و با دقت در نظر می گیریم. به همین دلیل است که ما به همه هنرمندان آزادی کامل در کشف خلاقیت آنها و ابراز احساسات و تجربه از طریق آثار خود. به همین دلیل است که مضامین تصاویر پس زمینه به هیچ وجه تحت تأثیر ما نبوده بلکه از ابتدا توسط خود هنرمندان طراحی شده است.

آماده برای ماجراهای جدید

سال 2020 سواری پر از دست انداز بود ، اما ما نباید دلسرد شویم. ما با اشتیاق ، خوش بینی ، نشاط و شجاعت وارد سال 2021 می شویم تا با همه چالش های پیش روی ما روبرو شویم ، بدون هیچ زحمتی از همه مشکلات عبور کنیم و از هر مانعی که بین ما و اهداف ما قرار دارد عبور کنیم.
– طراحی شده توسط استودیوی PopArt از نووی ساد ، صربستان.

آماده برای ماجراهای جدید
  • پیش نمایش
  • همراه با تقویم: 320×480 ، 640×480 ، 800×480 ، 800×600 ، 1024×768 ، 1024×1024 ، 1152×864 ، 1280×720 ، 1280×800 ، 1280×960 ، 1280×1024 ، 1400×1050 ، 1440×900 ، 1600×1200 ، 1680×1050 ، 1680×8000 ، 192040×1200122020 ، 1680×1050 ، 1680×208020202020 ، 1680×1000
  • بدون تقویم: 320×480 ، 640×480 ، 800×480 ، 800×600 ، 1024×768 ، 1024×1024 ، 1152×864 ، 1280×720 ، 1280×800 ، 1280×960 ، 1280×1024 ، 1400×1050 ، 1440×900 ، 1600×1200 ، 1680×1050 ، 1680×2000122040 ، 1680×1050 ، 1610xxxxxXXXXXXXXXXXXXX ، ، درود ، دراز مدت

ستاره ها در یک بطری

؟؟ با امید به سال بهتر در سال 2021 ، این تصویر زمینه گرم را ایجاد کردیم تا شما را به حال و هوای تعطیلات برسانیم. ما می دانیم که این یک سال سخت برای همه بوده است و امید زیادی به آینده داریم. تا آن زمان ، بیایید از تعطیلات زمستانی در خانه لذت ببریم! ؟؟
– طراحی شده توسط اوویدیو پال از فرانسه.

ستاره ها در یک بطری
  • پیش نمایش
  • دارای تقویم: 800×600 ، 1024×1024 ، 1280×960 ، 1440×900 ، 1920×1080 ، 2560×1440
  • بدون تقویم: 800×600 ، 1024×1024 ، 1280×960 ، 1440×900 ، 1920×1080 ، 2560×1440

گسترش عشق آنلاین

طراحی شده توسط ریکاردو گیمنس از سوئد

گسترش عشق آنلاین
  • پیش نمایش
  • همراه با تقویم: 640×480 ، 800×480 ، 800×600 ، 1024×768 ، 1024×1024 ، 1152×864 ، 1280×720 ، 1280×800 ، 1280×960 ، 1280×1024 ، 1366×768 ، 1400×1050 ، 1440×900 ، 1600×1200 ، 1680×1050 ، 1440×900 ، 1600×1200 ، 1680×1050 ، 1640xx20004040202020204202020202062040x2040402020202062020202020206202020202020620402040602020206204020402020206204040404040204020202020202020204040406040404040404040404040604040404080404040404060402040204020402040204020402040204040404020402040204020402040204208040404040404040404040404040404
  • بدون تقویم: 640×480 ، 800×480 ، 800×600 ، 1024×768 ، 1024×1024 ، 1152×864 ، 1280×720 ، 1280×800 ، 1280×960 ، 1280×1024 ، 1366×768 ، 1400×1050 ، 1440×900 ، 1600×1200 ، 1680×1050 ، 1440×900 ، 1600×1200 ، 1680×1050 ، 1640xx20002040 ، 1680×12002020 ، 1680×1200 ، 1680×1200

قدیمی ها اما موضوعات

چه چیزی جامعه را به طراحی کاغذ دیواری سال نو در سالهای گذشته ترغیب کرد؟ به ما بپیوندید به پایین خط حافظه بروید، و شاید یکی از موارد مورد علاقه خود را نیز در بین افراد قدیمی پیدا کنید. (لطفا توجه داشته باشید که این تصاویر زمینه با تقویم همراه نیستند.)

از جایی شروع کنید

“اگر صبر کنیم تا آماده شویم ، تا آخر عمر منتظر خواهیم ماند. امروز شروع کنید – جایی ، هرجایی. ؟؟
– طراحی شده توسط شاونا آرمسترانگ از ایالات متحده.

از جایی شروع کنید
  • پیش نمایش
  • بدون تقویم: 1280×720 ، 1280×800 ، 1280×960 ، 1280×1024 ، 1400×1050 ، 1440×900 ، 1600×1200 ، 1680×1050 ، 1920×1080 ، 1920×1200 ، 1920×1440 ، 2560×1440

درهای سال جدید را باز کنید

ژانویه اولین ماه سال و معمولاً سردترین ماه زمستان در نیمکره شمالی است. نام ماه ژانویه از ‘ianua’ ، کلمه لاتین درب آمده است ، بنابراین این ماه نشان دهنده درب سال جدید و شروع جدید است. بیایید درهای سال جدید را با هم باز کنیم و امیدواریم که بهترین بهترین ها تاکنون باشد! ؟؟
– طراحی شده توسط استودیوی PopArt از صربستان

درهای سال نو را باز کنید
  • پیش نمایش
  • بدون تقویم: 320×480 ، 640×480 ، 800×480 ، 800×600 ، 1024×768 ، 1024×1024 ، 1152×864 ، 1280×720 ، 1280×800 ، 1280×960 ، 1280×1024 ، 1366×768 ، 1400×1050 ، 1440×900 ، 1600×1200 ، 1600xx205040 ، 1680xx204040 ، 1640xx205040 ، 1640xxxXXXXXXXXXXXXXX ، EIDS ، XAXXXXXX ، ۱۲۰XXX

برگهای زمستانی

طراحی شده توسط ناتالی اوئدرنی از فرانسه.

برگهای زمستانی

یک شروع جدید

“سال جدید امید ، جشن ، بسیاری از قطعنامه ها و بسیاری اهداف دیگر را که باید تحقق یابد ، به ارمغان می آورد. این تصویر زمینه بر اساس ایده “یک شروع جدید” ساخته شده است. ” – طراحی شده توسط لعنتی کامل اهل هندوستان.

یک شروع جدید
  • پیش نمایش
  • بدون تقویم: 320×480 ، 640×480 ، 800×480 ، 800×600 ، 1024×768 ، 1024×1024 ، 1152×864 ، 1280×720 ، 1280×800 ، 1280×960 ، 1280×1024 ، 1366×768 ، 1400×1050 ، 1440×900 ، 1600×1200 ، 1600xx205040 ، 1680xx204040 ، 1640xx204040 ، 1640xxxxXXXXXXXXXXXXX ، EIDS ، XAXXXXXX ، ۱۲۰XXX

ماه چای داغ مبارک

“شما مرا به یک روز زیبا بیدار می کنید. وقتی احساس آبی می کنم روحیه ام را بردار. وقتی من در خانه هستم ، شما از استرس روز طولانی من راحت می شوید. شما به من کمک می کنید که با عزیزانم خوش بگذرانم. وقتی تنها هستم به من شرکت بده تو هیچ کس دیگری نیستی جز فنجان چای داغ مورد علاقه من. ؟؟
– طراحی شده توسط Acodez IT Solutions اهل هندوستان.

ماه چای داغ مبارک!
  • پیش نمایش
  • بدون تقویم: 320×480 ، 640×480 ، 800×480 ، 800×600 ، 1024×768 ، 1024×1024 ، 1152×864 ، 1280×720 ، 1280×960 ، 1280×1024 ، 1366×768 ، 1400×1050 ، 1440×900 ، 1600×1200 ، 1680×1050 ، 1680x800020404020202041680x1200142020201680

شروع تازه

؟؟ من می خواستم یک تصویر زمینه مبتنی بر حروف انجام دهم زیرا من عاشق حروف هستم. من ژانویه را انتخاب کردم زیرا برای بسیاری از مردم سال جدید به عنوان یک آغاز جدید تلقی می شود و آرزو می کنم که آنها احساس مثبت نسبت به آن را داشته باشند! ایده این است که احساس کنیم سال جدید (فقط) شروع یک چیز واقعا عالی است.
– طراحی شده توسط کارولینا سکیرا از پرتغال

شروع تازه

ژانویه بلوط

“در کشور ما ، کریسمس در ژانویه جشن گرفته می شود که شاخه ها و برگ های بلوط سوزانده می شوند تا نمادی از آغاز سال جدید و زندگی جدید باشد. این زمانی است که ما با خانواده خود دور هم جمع می شویم و ورود به سال جدید را در فضایی گرم و نوازانه جشن می گیریم. ؟؟
– طراحی شده توسط استودیوی PopArt از صربستان

ژانویه بلوط
  • پیش نمایش
  • بدون تقویم: 320×480 ، 640×480 ، 800×480 ، 800×600 ، 1024×768 ، 1024×1024 ، 1152×864 ، 1280×720 ، 1280×800 ، 1280×960 ، 1280×1024 ، 1366×768 ، 1400×1050 ، 1440×900 ، 1600×1200 ، 1600xx205040 ، 1680xx204040 ، 1640xx204040 ، 1640xxxxXXXXXXXXXXXXX ، EIDS ، XAXXXXXX ، ۱۲۰XXX

الماس مخفی

؟؟ به هلندی به شاه ماهیگیران “ijsvogels” (پرندگان یخی) می گویند. نه به این دلیل که آنها سرمای زمستان را دوست دارند ، بلکه به دلیل رنگهای شدید آبی و مبهم است.
– طراحی شده توسط فرانکه مارگریت از هلند

الماس مخفی
  • پیش نمایش
  • بدون تقویم: 320×480 ، 360×480 ، 376×668 ، 768×1024 ، 1024×1024 ، 1280×720 ، 1280×800 ، 1280×1024 ، 1366×768 ، 1366×1050 ، 1440×900 ، 1536×864 ، 1600×900 ، 1920×1080 ، 1920×1440 ، 2560×1400 ، 2560×1400 ، 2540×4040 2540×4040254040

ماه گرگ

“ماه گرگ (به هلندی” wolfsmaand “) نام دیگری برای ژانویه است.
– طراحی شده توسط Chiara Faes از بلژیک

ماه گرگ
  • پیش نمایش
  • بدون تقویم: 640×480 ، 800×600 ، 1024×768 ، 1152×864 ، 1280×720 ، 1280×800 ، 1280×960 ، 1366×768 ، 1400×1050 ، 1440×900 ، 1600×1200 ، 1680×1050 ، 1920×1080 ، 1920×1200 ، 1920×1440 ، 2560×1440

پرنده اوایل ژانویه

ژانویه ماه آغاز تازه ، امید و الهام است. به همین دلیل است که من را به یاد یک پرنده اولیه می اندازد. ؟؟
– طراحی شده توسط زلاتینا پترووا از بلغارستان

پرنده اوایل ژانویه
  • پیش نمایش
  • بدون تقویم: 320×480 ، 640×480 ، 800×480 ، 800×600 ، 1024×768 ، 1024×1024 ، 1152×864 ، 1280×720 ، 1280×800 ، 1280×960 ، 1280×1024 ، 1400×1050 ، 1440×900 ، 1600×1200 ، 1680×1050 ، 1680×8080 ، 192080 x 192000 1600×1200122020

ماه ژانویه

“مخزن ماهی من در خانه به من الهام کرد تا با ماهی یک کاغذ دیواری درست کنم.
– طراحی شده توسط آرنو دی دکر از بلژیک.

ماه ژانویه
  • پیش نمایش
  • بدون تقویم: 320×480 ، 640×480 ، 800×480 ، 800×600 ، 1024×768 ، 1024×1024 ، 1152×864 ، 1280×720 ، 1280×800 ، 1280×960 ، 1280×1024 ، 1400×1050 ، 1440×900 ، 1600×1200 ، 1680×1050 ، 1680×2000122040 ، 1680×1050 ، 1610xxxxxXXXXXXXXXXXXXX ، ، درود ، دراز مدت

تابلوی نئون آبی

طراحی شده توسط جوان کیم از ایالات متحده.

Smashing Desktop Wallpaper - ژانویه 2013

روز لاستیکی داکی

؟؟ زمستان می تواند چنین اوقات تاریک سال باشد. خورشید زودتر غروب می کند ، باد احساس سرما می کند و قبض های گرمایشی ما سر به فلک می کشد. امیدوارم ماهتون رو با کاغذ دیواری های روز Rubber Ducky Day روشن کنم! ؟؟
– طراحی شده توسط ایلیا پلیوسین از بلژیک

روز لاستیکی داکی
  • پیش نمایش
  • بدون تقویم: 320×480 ، 640×480 ، 800×480 ، 800×600 ، 1024×768 ، 1024×1024 ، 1152×864 ، 1280×720 ، 1280×800 ، 1280×960 ، 1280×1024 ، 1366×768 ، 1400×1050 ، 1440×900 ، 1600×1200 ، 1600xx205040 ، 1680xx204040 ، 1640xxxxxXXIUMXXXXNUMXXXXX۴۰XXXXXXXXXXXXXXXXX ، LDEXXXXXXXXXX ، ، XXXXXXXXXXXXXX ، ، XXXXXXXX ، ، XXXXXX ، Xnxx

مالیخولیای زمستانی

طراحی شده توسط الکساندرا لاچک از لهستان

Smashing Desktop Wallpapers - ژانویه 2012

گرما را حمل کنید یکدیگر را حمل کنید

طراحی شده توسط ماریکا اسمیرنووا از روسیه.

Smashing Desktop Wallpapers - ژانویه 2012

کوههای قفقاز

“از قفقاز با عشق!” طراحی شده توسط ایلونا از روسیه.

Smashing Desktop Wallpapers - ژانویه 2012

برای سال نو استراحت کنید

“من در حال جستجو برای مضامین بودم که این” جشنواره خواب “را که در سوم برگزار می شود پیدا کردم و من یکی از طرفداران بزرگ خواب هستم … به خصوص در این ماه های سرد پس از دیوانگی تعطیلات ، خوب است که دنج باشید و چرت خوب. ؟؟
– طراحی شده توسط دوروتی تیمر از فلوریدا مرکزی ، ایالات متحده آمریکا.

برای سال نو استراحت کنید
  • پیش نمایش
  • بدون تقویم: 640×480 ، 640×1136 ، 750×1334 ، 800×480 ، 800×600 ، 1024×768 ، 1024×1024 ، 1152×864 ، 1280×720 ، 1280×800 ، 1280×960 ، 1280×1024 ، 1366×768 ، 1400×1050 ، 1440×900 ، 16xxxxxxxxvidlv 1200xx4000 ، 1600xx1200 ، 1600×1200 ، 1600×1200 ، 1600×1200 ، 1400×1080 ، 1600×1200 ، 1600×1200 ، 1600×1200 ، 1600×1200 ، 1600×1200

آزادی

؟؟ گرفتن عکس از پرندگان و فکر کردن در مورد آزادی آنها بسیار عالی است. سپس من آرزو می کنم که یکی شوم و با بالهای زیبا آنها به دور دنیا پرواز کنم.
– طراحی شده توسط ماریا زاریچ از بلگراد ، صربستان.

آزادی

گوزن شمالی

طراحی شده توسط آنا ماسنیکوسا از بلگراد ، صربستان.

گوزن شمالی
  • پیش نمایش
  • بدون تقویم: 320×480 ، 640×480 ، 800×480 ، 800×600 ، 1024×768 ، 1024×1024 ، 1152×864 ، 1280×720 ، 1280×800 ، 1280×960 ، 1400×1050 ، 1440×900 ، 1600×1200 ، 1680×1050 ، 1680×1200 ، 1920×1080 ، 1920×404044040202020202020202020202020202020202020402020202020202020202020202020202020204020

تصویر زمینه خود را ارسال کنید

آیا می دانید که شما آیا می توانید در یکی از پست های تصویر زمینه آینده ما نیز حضور داشته باشید؟ ما همیشه هستیم به دنبال استعداد خلاق، بنابراین اگر ایده ای برای تصویر زمینه ماه فوریه دارید ، لطفا در ارسال آن دریغ نکنید. ما خیلی دوست داریم ببینیم با چه چیزی روبرو خواهید شد. پیوستن به! →

سرمقاله سر و صدا(او ، سانتی متر)
Read More

بررسی سال 2020 – مجله سر و صدا

در این قسمت ، ما نگاهی به سال 2020 می اندازیم. امسال در قسمت هایمان با چه کسی صحبت کردیم و چه چیزی یاد گرفتیم؟ بیایید به برخی از کلیپ ها گوش دهیم تا بدانیم.

در این قسمت ، ما نگاهی به سال 2020 می اندازیم. امسال در قسمت هایمان با چه کسی صحبت کردیم و چه چیزهایی یاد گرفتیم؟ بیایید به برخی از کلیپ ها گوش دهیم تا بدانیم.

نمایش یادداشت ها

شما می توانید تمام قسمت های گذشته ما ، از جمله متن کامل هر مصاحبه را در podcast.smashingmagazine.com پیدا کنید.

همه شما را در سال 2021 می بینیم! 😁

سرمقاله سر و صدا(The)
Read More

چه چیزی به VueX می آید؟ – مجله سر و صدا

Vuex کتابخانه مدیریت ایالتی برای برنامه های Vue است و تیم اصلی Vue برنامه های بزرگی برای بهتر کردن آن از هر زمان دیگری دارد. در اینجا پیش نمایشی از مکانی که آنها می خواهند آن را ببرند آورده شده است.

ووکس است راه حل برای مدیریت دولت در برنامه های Vue. نسخه بعدی – Vuex 4 – قبل از انتشار رسمی ، مراحل آخر را طی می کند. این نسخه سازگاری کامل با Vue 3 را به همراه خواهد داشت ، اما ویژگی های جدیدی اضافه نمی کند. در حالی که Vuex همیشه یک راه حل قدرتمند و اولین انتخاب برای بسیاری از توسعه دهندگان برای مدیریت ایالتی در Vue بوده است ، برخی از توسعه دهندگان امیدوار بودند که بیشتر به مشکلات گردش کار رسیدگی کنند. با این حال ، حتی وقتی Vuex 4 تازه از در خارج می شود ، کیا کینگ ایشی (یکی از اعضای تیم Vue) است صحبت کردن در مورد برنامه های خود را برای Vuex 5، و من از آنچه دیدم بسیار هیجان زده ام که مجبور شدم آن را با همه شما به اشتراک بگذارم. توجه داشته باشید که برنامه های Vuex 5 هستند نه نهایی شده است ، بنابراین برخی از موارد ممکن است قبل از انتشار Vuex 5 تغییر کنند ، اما اگر در نهایت بیشتر شبیه آنچه در این مقاله می بینید ، باید پیشرفت بزرگی در تجربه توسعه دهنده داشته باشد.

با ظهور Vue 3 و آن ترکیب API، مردم به دنبال گزینه های ساده دست ساز بوده اند. مثلا، ممکن است به Vuex نیازی نداشته باشید الگوی نسبتاً ساده ، در عین حال انعطاف پذیر و محکمی را برای استفاده از ترکیب API همراه با آن نشان می دهد provide/inject برای ایجاد فروشگاه های دولتی مشترک همانطور که گابور در مقاله خود بیان می کند ، این (و سایر گزینه ها) فقط باید در برنامه های کوچکتر استفاده شود زیرا فاقد همه مواردی است که مستقیماً مربوط به کد نیستند: پشتیبانی جامعه ، اسناد ، کنوانسیون ها ، موارد خوب نوکس ادغام ها و ابزارهای توسعه دهنده.

این مورد آخر همیشه یکی از بزرگترین موضوعات برای من بوده است. نمای Devtools افزونه مرورگر همیشه ابزاری شگفت انگیز برای اشکال زدایی و توسعه برنامه های Vue بوده است و از دست دادن بازرس Vuex با “سفر در زمان” ضرر بزرگی برای اشکال زدایی از برنامه های غیر پیش پا افتاده است.

اشکال زدایی Vuex با Vue Devtools
اشکال زدایی Vuex با Vue Devtools. (پیش نمایش بزرگ)

خوشبختانه ، با Vuex 5 ما می توانیم کیک خود را بخوریم و آن را نیز بخوریم. بیشتر شبیه این گزینه های ترکیبی API خواهد بود اما تمام مزایای استفاده از کتابخانه مدیریت دولتی رسمی را حفظ می کند. حال بیایید نگاهی به آنچه تغییر خواهد کرد ، بیاندازیم.

تعریف فروشگاه

قبل از اینکه بتوانیم با فروشگاه Vuex کاری انجام دهیم ، باید یکی را تعریف کنیم. در Vuex 4 ، تعریف فروشگاه به صورت زیر خواهد بود:

import { createStore } from 'vuex'

export const counterStore = createStore({
  state: {
    count: 0
  },
  
  getters: {
    double (state) {
      return state.count * 2
    }
  },
  
  mutations: {
    increment (state) {
      state.count++
    }
  },
  
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

هر فروشگاه چهار قسمت دارد: state داده ها را ذخیره می کند ، getters به شما حالت محاسبه شده می دهد ، mutations برای جهش دولت استفاده می شود ، و actions روشهایی هستند که از خارج فروشگاه برای انجام هر کاری که مربوط به فروشگاه است فراخوانی می شوند. معمولاً ، همانطور که این مثال نشان می دهد ، اعمال فقط باعث جهش نمی شوند. در عوض ، آنها برای انجام کارهای ناهمزمان به دلیل جهش استفاده می شوند باید همزمان باشند یا آنها فقط عملکرد پیچیده تر یا چند مرحله ای را پیاده سازی کنند. اقدامات همچنین نمی توانند به تنهایی دولت را جهش دهند. آنها باید از یک جهش دهنده استفاده کنند. بنابراین Vuex 5 چه شکلی است؟

import { defineStore } from 'vuex'

export const counterStore = defineStore({
  name: 'counter',
  
  state() {
    return { count: 0 }
  },
  
  getters: {
    double () {
      return this.count * 2
    }
  },
  
  actions: {
    increment () {
      this.count++
    }
  }
})

در اینجا چند تغییر وجود دارد که باید آنها را یادداشت کنید. اول ، به جای createStore، ما استفاده می کنیم defineStore. این تفاوت قابل اغماض است ، اما به دلایل معنایی وجود دارد ، که بعداً آنها را بررسی خواهیم کرد. بعد ، ما باید یک name برای فروشگاه ، که قبلاً نیازی به آن نداشتیم. در گذشته ، ماژول ها نام خود را داشتند ، اما توسط خود ماژول ارائه نمی شدند. آنها فقط نام ملکی بودند که توسط فروشگاه والدین به آنها اختصاص داده شد. اکنون ، وجود دارد بدون ماژول. در عوض ، هر ماژول یک فروشگاه جداگانه خواهد بود و یک نام دارد. این نام توسط رجیستری Vuex استفاده می شود ، که بعداً در مورد آن صحبت خواهیم کرد.

پس از آن ، ما باید بسازیم state تابعی که حالت اولیه را به جای تنظیم فقط روی حالت اولیه برمی گرداند. این شبیه به data گزینه روی اجزا. ما نوشتیم getters بسیار شبیه روشی است که در Vuex 4 انجام دادیم ، اما به جای استفاده از state به عنوان یک پارامتر برای هر گیرنده ، فقط می توانید استفاده کنید this رسیدن به ایالت. به همین ترتیب ، actions نیازی به نگرانی در مورد a نیست context شی ای که در آن منتقل می شود: آنها فقط می توانند استفاده کنند this برای دسترسی به همه چیز سرانجام ، هیچ وجود دارد mutations. در عوض ، جهش ها با ترکیب می شوند actions. که اشاره شد که خیلی اوقات ، جهش ها فقط به تنظیم کننده های ساده تبدیل می شدند ، و آنها را بی معنی کلام می کرد ، بنابراین آنها را حذف کردند. وی اشاره ای نکرد که آیا جهش مستقیم دولت از خارج از فروشگاه “درست” است ، اما ما قطعاً مجاز و موثق هستیم که مستقیماً از یک عمل جهش کنیم و الگوی Flux با تغییر شکل مستقیم حالت اخم ایجاد می کند.

توجه داشته باشید: برای کسانی که API ترکیب را به گزینه های API برای ایجاد م componentsلفه ها ترجیح می دهند ، خوشحال خواهید شد که بدانید راهی برای ایجاد فروشگاه هایی به همان شیوه استفاده از API ترکیب نیز وجود دارد.

import { ref, computed } from 'vue'
import { defineStore } from 'vuex'

export const counterStore = defineStore('counter', {
  const count = ref(0)

  const double = computed(() => count.value * 2)
  
  function increment () {
    count.value++
  }

  return { count, double, increment }  
})

همانطور که در بالا نشان داده شده است ، نام به عنوان اولین استدلال برای عبور می یابد defineStore. بقیه دقیقاً مانند عملکرد ترکیب برای اجزا به نظر می رسد. این دقیقاً همان نتیجه قبلی را خواهد داشت که در مثال قبلی از گزینه های API استفاده شده است.

فروشگاه را فوری کنید

در Vuex 4 ، همه چیز از Vuex 3 تغییر کرده است ، اما من فقط به V4 نگاه می کنم تا مسائل از کنترل خارج نشوند. در v4 ، هنگامی که شما تماس گرفتید createStore، شما در حال حاضر آن را نمونه. سپس می توانید فقط از طریق آن در برنامه خود استفاده کنید app.use یا مستقیم:

import { createApp } from 'vue'
import App from './App.vue' // Your root component
import store from './store' // The store definition from earlier

const app = createApp(App)

app.use(store)
app.mount('#app')

// Now all your components can access it via `this.$store`
// Or you can use in composition components with `useStore()`

// -----------------------------------------------

// Or use directly... this is generally discouraged
import store from './store'

store.state.count // -> 0
store.commit('increment')
store.dispatch('increment')
store.getters.double // -> 4

این یکی از مواردی است که Vuex 5 نسبت به نسخه v4 کمی پیچیده تر می کند. اکنون هر برنامه می تواند یک نمونه جداگانه از Vuex بدست آورد ، که این اطمینان را می دهد که هر برنامه می تواند نمونه های جداگانه ای از فروشگاه های مشابه داشته باشد بدون اینکه داده ها بین آنها به اشتراک گذاشته شود. اگر می خواهید نمونه هایی از فروشگاه ها را بین برنامه ها به اشتراک بگذارید ، می توانید نمونه ای از Vuex را به اشتراک بگذارید.

import { createApp } from 'vue'
import { createVuex } from 'vuex'
import App from './App.vue' // Your root component

const app = createApp(App)
const vuex = createVuex() // create instance of Vuex

app.use(vuex) // use the instance
app.mount('#app')

اکنون همه اجزای شما به نمونه Vuex دسترسی دارند. به جای اینکه مستقیماً تعریف فروشگاه (های) خود را ارائه دهید ، سپس آنها را به اجزایی که می خواهید از آنها استفاده کنید وارد کرده و از نمونه Vuex برای نمونه سازی و ثبت آنها استفاده کنید:

import { defineComponent } from 'vue'
import store from './store'

export default defineComponent({
  name: 'App',

  computed: {
    counter () {
      return this.$vuex.store(store)
    }
  }
})

صدا زدن $vuex.store، فروشگاه را در نمونه Vuex فوری و ثبت می کند. از آن زمان به بعد ، هر زمان که استفاده کردید $vuex.store در آن فروشگاه ، به جای اینکه دوباره آن را فوری کنید ، فروشگاه از قبل نمونه ای را به شما پس می دهد. می توانید با store روش مستقیم بر روی نمونه ای از Vuex ایجاد شده توسط createVuex().

اکنون فروشگاه شما از طریق آن بخش قابل دسترسی است this.counter. اگر از API ترکیب برای م componentلفه خود استفاده می کنید ، می توانید استفاده کنید useStore بجای this.$vuex.store:

import { defineComponent } from 'vue'
import { useStore } from 'vuex' // import useStore
import store from './store'

export default defineComponent({
  setup () {
    const counter = useStore(store)

    return { counter }
  }
})

وارد کردن فروشگاه به طور مستقیم به جز component و تهیه نمونه از آن در آنجا موافقان و مخالفانی است. به شما امکان می دهد تقسیم کد کنید و فروشگاه را با تنبلی بارگیری کنید فقط درصورت نیاز اگر می خواهید از تزریق وابستگی برای تهیه آن در سرتاسر برنامه استفاده کنید ، خصوصاً اگر می دانید در ریشه برنامه که در آن تقسیم کد کمکی نخواهد کرد ، استفاده می شود ، فقط می توانید استفاده کنید provide:

import { createApp } from 'vue'
import { createVuex } from 'vuex'
import App from './App.vue'
import store from './store'

const app = createApp(App)
const vuex = createVuex()

app.use(vuex)
app.provide('store', store) // provide the store to all components
app.mount('#app')

و فقط می توانید آن را در هر م componentلفه ای که قصد استفاده از آن را دارید تزریق کنید:

import { defineComponent } from 'vue'

export default defineComponent({
  name: 'App',
  inject: ['store']
})

// Or with Composition API

import { defineComponent, inject } from 'vue'

export default defineComponent({
  setup () {
    const store = inject('store')

    return { store }
  }
})

من از این زبانی اضافی هیجان زده نیستم ، اما صریح تر و انعطاف پذیرتر است ، که طرفدار آن هستم. این نوع کد به طور کلی بلافاصله در ابتدای پروژه فوراً نوشته می شود و پس از آن دیگر شما را اذیت نمی کند ، اگرچه اکنون یا باید هر فروشگاه جدیدی را تهیه کنید یا هر وقت بخواهید از آن استفاده کنید ، وارد کنید وارد کردن یا تزریق ماژول های کد این است که ما به طور کلی باید با هر چیز دیگری کار کنیم ، بنابراین این فقط باعث می شود Vuex بیشتر در راستای چگونگی تمایل افراد به کار بیشتر کار کند.

استفاده از فروشگاه

جدا از اینکه طرفدار انعطاف پذیری و روش جدید تعریف فروشگاه ها به همان روشی است که یک جز using با استفاده از API ترکیب ، یک چیز دیگر وجود دارد که مرا بیش از هر چیز هیجان زده می کند: نحوه استفاده از فروشگاه ها. در اینجا به نظر می رسد که استفاده از فروشگاه در Vuex 4 به چه صورت است.

store.state.count            // Access State
store.getters.double         // Access Getters
store.commit('increment')    // Mutate State
store.dispatch('increment')  // Run Actions

State، getters، mutations، و actions همه از طریق خصوصیات یا روش های مختلف به روش های مختلفی کنترل می شوند. این مزیت صریح بودن را دارد ، که من قبلاً آن را ستایش کردم ، اما این صراحتاً چیزی برای ما سود ندارد. و استفاده از این API فقط زمانی دشوارتر می شود که از ماژول های فضای نامی استفاده می کنید. برای مقایسه ، به نظر می رسد Vuex 5 دقیقاً همان کاری را انجام می دهد که شما به طور معمول امیدوارید:

store.count        // Access State
store.double       // Access Getters (transparent)
store.increment()  // Run actions
// No Mutators

همه چیز – وضعیت ، گیرنده ها و اقدامات – مستقیماً در ریشه فروشگاه موجود است ، استفاده از آن را با زبانی بسیار کمتر ساده می کند و عملاً همه نیازهای استفاده را از بین می برد mapState، mapGetters، mapActions و mapMutations برای گزینه های API یا نوشتن اضافی computed عبارات یا توابع ساده برای API ترکیب. این به سادگی باعث می شود که فروشگاه Vuex درست مانند یک فروشگاه عادی که خودتان احداث می کنید ظاهر و عمل کند ، اما این مزایای افزونه ها ، ابزارهای رفع اشکال ، اسناد رسمی و غیره را دارد.

آهنگسازی فروشگاه ها

جنبه نهایی Vuex 5 که امروز بررسی خواهیم کرد ترکیب پذیری است. Vuex 5 ماژولهایی با فضای نام ندارد که همه از یک فروشگاه قابل دسترسی باشد. هر یک از این ماژول ها به یک فروشگاه کاملاً جداگانه تقسیم می شوند. این به اندازه کافی ساده است که با اجزا سازگار است: آنها فقط فروشگاه های مورد نیاز خود را وارد می کنند و آنها را آتش می زنند و از آنها استفاده می کنند. اما اگر یک فروشگاه بخواهد با فروشگاه دیگری تعامل داشته باشد چه می کنید؟ در v4 ، namespacing همه چیز را پیچیده می کند ، بنابراین شما باید از فضای نام در فضای خود استفاده کنید commit و dispatch تماس بگیرید ، استفاده کنید rootGetters و rootState و سپس در فضاهای نامی که می خواهید از گیرنده ها دسترسی پیدا کنید و از آنها نام ببرید ، کار کنید. نحوه کار در Vuex 5 به شرح زیر است:

// store/greeter.js
import { defineStore } from 'vuex'

export default defineStore({
  name: 'greeter',
  state () {
    return { greeting: 'Hello' }
  }
})

// store/counter.js
import { defineStore } from 'vuex'
import greeterStore from './greeter' // Import the store you want to interact with

export default defineStore({
  name: 'counter',

  // Then `use` the store
  use () {
    return { greeter: greeterStore }
  },
  
  state () {
    return { count: 0 }
  },
  
  getters: {
    greetingCount () {
      return `${this.greeter.greeting} ${this.count}' // access it from this.greeter
    }
  }
})

با v5 ، فروشگاهی را که می خواهیم از آن استفاده کنیم وارد می کنیم ، سپس آن را در آنجا ثبت می کنیم use و در حال حاضر در هر فروشگاه با هر نام ملکی که بگذارید قابل دسترسی است. اگر از تغییرات API ترکیبی تعریف فروشگاه استفاده می کنید ، کارها ساده تر هستند:

// store/counter.js
import { ref, computed } from 'vue'
import { defineStore } from 'vuex'
import greeterStore from './greeter' // Import the store you want to interact with

export default defineStore('counter', ({use}) => { // `use` is passed in to function
  const greeter = use(greeterStore) // use `use` and now you have full access
  const count = 0

  const greetingCount = computed(() => {
    return  `${greeter.greeting} ${this.count}` // access it like any other variable
  })

  return { count, greetingCount }
})

دیگر هیچ ماژولی با فضای نام وجود ندارد. هر فروشگاه جداگانه است و به طور جداگانه مورد استفاده قرار می گیرد. شما می توانید استفاده کنید use تا فروشگاهی را برای ساخت آنها در داخل فروشگاه دیگر در دسترس قرار دهد. در هر دو مثال ، use در واقع فقط مکانیزم مشابه vuex.store از قبل و آنها اطمینان می دهند که ما فروشگاه ها را با نمونه صحیح Vuex تهیه می کنیم.

پشتیبانی از TypeScript

برای کاربران TypeScript ، یکی از بزرگترین جنبه های Vuex 5 این است که ساده سازی افزودن انواع به همه موارد را ساده تر کرده است. لایه های انتزاعی که نسخه های قدیمی Vuex تقریباً غیرممکن ساخته بود و در حال حاضر ، با Vuex 4 ، توانایی ما در استفاده از انواع را افزایش می دهد ، اما هنوز هم کارهای دستی بیش از حد برای دستیابی به پشتیبانی مناسب از نوع وجود دارد ، در حالی که در v5 ، می توانید انواع خود را به صورت درون خطی قرار دهید ، همانطور که امیدوار و انتظار دارید.

نتیجه

به نظر می رسد Vuex 5 تقریباً دقیقاً همان چیزی است که من – و احتمالاً بسیاری دیگر – امیدوارم که باشد و من احساس می کنم خیلی زود نمی تواند به بازار بیاید. این بیشتر Vuex را ساده می کند ، برخی از هزینه های ذهنی ذهنی را از بین می برد و تنها جایی که انعطاف پذیری ایجاد می کند پیچیده تر یا کلامی تر می شود در مورد نظر شما درباره این تغییرات و تغییراتی که ممکن است در عوض یا بعلاوه ایجاد کنید ، در زیر نظر دهید. یا مستقیماً به منبع بروید و RFC اضافه کنید (درخواست نظر) به لیست برای دیدن نظر تیم اصلی.

سرمقاله سر و صدا(ra، yk، il)
Read More

شمارش معکوس برای بسته های شادی آور و کارگاه های آموزشی در سال 2021 – مجله سر و صدا

درباره نویسنده

روزانه بین سه زبان دست و پنجه نرم می کند ، آیریس به دلیل عشق به زبانشناسی ، هنر ، طراحی وب و تایپوگرافی و همچنین معدن طلای خود به…
بیشتر در مورد
عنبیه

اطلاعات زیادی وجود دارد – این یک واقعیت است. در این نسخه های ماهانه ، همه آنها را در یک مکان داریم زیرا می دانیم ماندن در بالای کارها چقدر سخت است. بنابراین بدون هیچ زحمتی بیشتر ، در اینجا آنچه که بود ، چیست و چه خواهد بود!

امسال کاملاً سواری بوده است – دلیل بیشتر این که منتظر یک سال جدید باشید با شروع جدید ، درست است؟ خوب ، ما هرگز واقعاً نخواهیم فهمید که در ماههای آینده چه انتظاری در انتظار ما است ، اما آنچه من می دانم این است که هر کس در این کره خاکی می تواند فقط کارهای بسیار زیادی را انجام دهد و واقعاً بهترین کاری را که می تواند انجام دهد انجام می دهد. مطمئناً یک سال کاهش و افت بیشتر برای بسیاری از مردم در سراسر جهان بوده است ، و ما امیدواریم که با همه کارهایی که در Smashing انجام داده ایم ، کمک کرده است که زندگی حداقل کمی راحت تر شود.

سال قبل خود را با کارگاه های آنلاین برنامه ریزی کنید

آیا هنوز در یکی از کارگاه های ما شرکت کرده اید؟ تیم Smashing Events هر بار که یک کارگاه آموزشی را با حضور همه شرکت کنندگان فوق العاده از سراسر جهان برگزار می کنند و برای یادگیری با هم جمع می شوند ، هیجان زده می شوند. ایده های بسیاری به لطف جلسات طراحی و برنامه نویسی زنده، و افراد زیادی نیز هستند که دوستان جدیدی پیدا کرده اند!

این حتی بهتر می شود: ما اکنون داریم بسته های کارگاهی از بین آنها می توانید انتخاب کنید سه، پنج یا حتی ده بلیط کارگاه برای کارگاه های انتخابی شما – در حال انجام ، آینده یا کارهایی که در آینده اتفاق می افتد!

امیدواریم حداقل یک کارگاه آموزشی در لیست بالا پیدا کنید که متناسب با پروژه ها و مسیر شغلی شما باشد ، و در غیر این صورت ، لطفاً این کار را انجام دهید با ما در توییتر تماس بگیرید و ما قول می دهیم تمام تلاش خود را برای تحقق آن انجام دهیم. همچنین ، در صورت تمایل به مشترک شدن در اینجا اگر می خواهید یکی از اولین افرادی باشید که در هنگام راه اندازی کارگاه های جدید به شما اطلاع داده می شود و همچنین به قیمت پرندگان زودرس نیز دسترسی پیدا می کنید – ما به زودی موارد خوبی را ارائه خواهیم داد!

اعضا به فیلم ها و موارد دیگر دسترسی پیدا می کنند

گربه را به نمایش بگذارید و مهارت های اسکیت روی یخ خود را به نمایش بگذاردما افتخار می کنیم که یک خانواده عضو به طور مداوم در حال رشد داریم که عاشق محتوای خوب هستند ، از تخفیف های دوستانه قدردانی می کنند و بخشی فعال از جامعه وب دوست داشتنی ما هستند. اگر هنوز درگیر این موضوع نشده اید ، ما دوست داریم که شما نیز در آن عضو شوید و عضو آن شوید! تخفیف دائمی روی کتابهای چاپی ، آگهی های استخدام ، بلیط کنفرانس وجود دارد و پشتیبانی شما واقعاً به ما در پرداخت قبوض کمک می کند. ❤️

Smashing Podcast: تنظیم کنید و الهام بگیرید

امسال هر دو هفته یک قسمت جدید Smashing Podcast منتشر کرده ایم و بازخورد آن نیز دریافت شده است عالی! با بیش از 56 هزار بارگیری (تقریباً بیش از هزار مورد در هفته و درحال رشد!) ، ما 34 میهمان در پادکست با پس زمینه های مختلف داشته ایم بنابراین چیزهای زیادی برای به اشتراک گذاشتن!

اگر موضوعی را که دوست دارید بشنوید و درباره آن بیشتر بیاموزید نمی بینید ، لطفاً از تماس با میزبان دریغ نکنید درو مک للان یا از طریق توییتر در تماس باشید در هر زمان – ما دوست داریم از شما بشنویم!

منتظر اپیزود بعدی باشید که خیلی زود پخش می شود!

خبرنامه سر و صدا: بهترین انتخاب ها

هفته نامه Smashing Newsletterما با خبرنامه هفتگی خود قصد داریم محتوای مفیدی را برای شما به ارمغان بیاوریم و همه چیزهای جالبی را که مردم در صنعت وب در حال کار هستند به اشتراک بگذارید. وجود دارد بنابراین بسیاری از افراد با استعداد خارج از کشور در پروژه های درخشان کار می کنند ، و ما می توانیم از آنها قدردانی کنیم اگر بتوانید به گسترش این خبر کمک کنید و اعتبار شایسته آنها را به آنها بدهید.

همچنین ، با مشترک شدن ، هیچ نامه پستی شخص ثالث یا تبلیغات پنهانی درگیر نیست و پشتیبانی شما واقعاً به ما در پرداخت قبوض کمک می کند. ❤️

علاقه مند به حمایت مالی هستید؟ در صورت تمایل می توانید گزینه های مشارکت ما را بررسی کنید و در هر زمان با تیم تماس بگیرید – آنها مطمئناً هرچه زودتر به شما پاسخ خواهند داد.

جلوگیری از شیفت چیدمان با شبکه CSS

هیچ خبری نیست که CSS Grid ابزاری خارق العاده برای ساخت طرح بندی پیچیده است. اما آیا می دانید می تواند به شما در جلوگیری از تغییر چیدمان نیز کمک کند؟ وقتی هوبرت سابلونیر یک مشکل تغییر طرح را با وضعیت ضامن در یک جز component UI که روی آن کار کرده کشف کرد ، به یک راه حل رسید:تکنیک انباشته شبکه ضد طرح

با پشته های شبکه CSS از شیفت چیدمان جلوگیری کنید

در مقایسه با حل تغییر طرح با موقعیت یابی مطلق ، روش مبتنی بر شبکه هوبرت از شرایط پیچیده ای که به بیش از دو صفحه نیاز دارند پشتیبانی می کند. مزیت دیگر: نیازی نیست که فرض کنید کدام صفحه باید اندازه کل م guideلفه را راهنمایی کند. اگر می خواهید در عمیق تر شیرجه بروید ، هوبرت تمام مواردی را که باید بدانید برای جلوگیری از جابجایی عمودی و افقی نوشت پست وبلاگ. (سانتی متر)

پیوندهای پرش در ترکیب با هدرهای ثابت می تواند ناامیدی زیادی ایجاد کند. شاید قبلاً با همین مسئله روبرو شده باشید: با کلیک روی آن ، پیوند پرش شما را به سمت عنصر مورد نظر می برد ، اما یک هدر ثابت آن را پنهان می کند. در گذشته برای حل این مشکل به هک های وحشی نیاز بود. خوشبختانه ، اکنون یک راه حل ساده و کاملاً پشتیبانی شده CSS.

سرصفحه های ثابت و پیوندهای پرش

حیله: scroll-margin-top. آن را به هدرهای خود اختصاص دهید ، و position: fixed وقتی با یک پیوند پرش به سمت آنها بروید ، سرصفحه دیگر مانع آنها نخواهد شد. یک خط کد کوتاه که تفاوت زیادی ایجاد می کند. (سانتی متر)

تایپوگرافی مایع با clamp()

وقتی نوبت به مقیاس گذاری مایعات می رسد ، CSS دارای ویژگی های جدید مهیج است: clamp()، min()، و max(). آنها با بزرگ شدن و کوچک شدن مرورگر مقادیر را محدود و مقیاس می زنند. min() و max() مقادیر حداقل و حداکثر مربوطه را در هر زمان مشخص بازگردانید clamp به شما امکان می دهد حداقل و حداکثر را به همراه اندازه ترجیحی مرورگر برای استفاده تصویب کنید.

گیره

همانطور که تریس مادفورد اشاره می کند ، clamp() هنگامی که می خواهید تایپوگرافی کاملاً سیال داشته باشید بدون اینکه 100٪ خاص در مورد رابطه بین اندازه های مختلف داشته باشید ، بسیار مفید است. در او مقاله مفصل در مورد ویژگی جدید ، او نکات عملی ارزشمندی را برای استفاده به اشتراک می گذارد clamp() به طور موثر (سانتی متر)

ابزار ضبط صفحه نمایش و حاشیه نویسی منبع باز

اگر به دنبال ابزاری با کاربرد رایگان و آسان برای ضبط صفحه خود بوده اید ، ممکن است یافتن چیزی قدرتمندتر از ضبط صفحه نمایش منبع باز Alyssa X دشوار باشد. صفحه نمایش.

صفحه نمایش

مهم نیست که می خواهید در مورد یک پروژه بازخورد متنی ارائه دهید ، توضیحات مفصلی ارائه دهید یا محصول خود را به مشتریان بالقوه ارائه دهید ، Screenity چندین ویژگی عملی برای ضبط ، حاشیه نویسی و ویرایش ضبط های شما – بدون محدودیت زمانی ارائه می دهد. می توانید روی صفحه نقاشی بکشید و متن و فلش اضافه کنید ، به عنوان مثال کلیک هایلایت کنید و روی ماوس تمرکز کنید ، فشار دهید تا صحبت کنید و موارد دیگر. صفحه نمایش است برای Chrome موجود است. (سانتی متر)

یک انتخاب کننده تاریخ دوستانه برای انسان

درست کردن انتخاب خرما سخت است. یک مثال زیبا از a انتخاب کننده تاریخ دوستانه و کاملاً در دسترس انسان از تامی فلدت می آید.

به لطف Chrono.js ، از ورودی های زبان طبیعی پشتیبانی می کند ، بنابراین کاربر می تواند برای انتخاب تاریخ چیزی مانند “فردا” ، “2 دسامبر” یا “در 5 روز” را تایپ کند. همچنین دکمه های میانبر به انتخاب متداول ترین تاریخ ها کمک می کنند. انتخاب کننده تاریخ با صفحه کلید و صفحه خوان کاملاً قابل دسترسی است (حتی یک ویژگی راهنمای درخواستی برای صفحه خوان و کاربران صفحه کلید وجود دارد) و هنگامی که جاوا اسکریپت یا CSS در دسترس نیست ، به لطف تخریب می شود. اثبات بسیار الهام بخش مفهوم. (سانتی متر)

یک Jamstack Explorer شوید

Jamstack هنوز برای شما قلمرو کشف نشده ای است؟ کاوشگران Jamstack به تغییر آن کمک می کند. ماموریت آن: آموزش به شما درمورد ساخت وب با ابزارها و تکنیک های مدرن است.

کاوشگران Jamstack

با ادامه کار در جهان Jamstack می توانید از بین سه دوره انتخاب کنید ، پیشرفت خود را پیگیری کنید و پاداش کسب کنید. Tara Z. Manicsic شما را از طریق مناطق Angular هدایت می کند ، Phil Hawksworth به شما می آموزد که چگونه نسخه های مختلفی از سایت خود را با Netlify سرویس و ردیابی کنید ، و Cassidy Williams شما را در تمام موارد ضروری Next.js راهنمایی می کند. پس از اتمام این سه ماموریت ، نه تنها یک گواهینامه در انتظار است ، بلکه می توانید با خود تماس بگیرید Jamstack Explorer، آماده استفاده از جدیدترین ابزارها برای ایجاد تجربیات قوی ، کارآمد و ایمن است. (سانتی متر)

ساخت کار طراحی از راه دور

بررسی طراحی ، سرعت ، بازخورد – طراحی یک تلاش مشترک است که هنگام انجام آن از راه دور ، چالش های زیادی را به همراه می آورد. افرادی که در InVision قرار دارند ، a مجموعه ای از منابع مفید تا به شما و تیمتان کمک کند تا از پس این چالش ها برآیید.

کار از راه دور برای تیم های طراحی

این محتوا سه مورد از پیچیده ترین جنبه های کار از راه دور را شامل می شود: پرورش خلاقیت ، کمک به همکاری و تمرکز. برای بهترین شیوه های بیشتر برای اجرای یک تیم طراحی از راه دور ، InVision همچنین یک مقاله را منتشر کرد کتاب الکترونیکی رایگان با استفاده از تجربه کار خود از راه دور با 700 کارمند که در 30 کشور پخش شده اند و هیچ دفتری واحد ندارند. (سانتی متر)

تایمر شمارش معکوس تمام صفحه برای ماندن در مسیر

رعایت برنامه زمانی ممکن است مشکل باشد که شما یک مکالمه ویدیویی طولانی دارید یا در حال سخنرانی یا کارگاه هستید. Koos Looijesteijn برای کمک به شما در اطمینان از ادامه روند جلسه ، به شما کمک می کند تایمر بزرگ.

تایمر بزرگ

تایمر پررنگ و در عین حال مینیمال ، در پنجره مرورگر شما دقیقه های باقیمانده را شمارش می کند – و حتی اگر به طور تصادفی برگه مرورگر را ببندید یا نیاز به راه اندازی مجدد دستگاه خود دارید ، این اختلال را در نظر می گیرد. میانبرهای صفحه کلید تنظیم مدت زمان و مکث یا توقف شمارش معکوس را آسان می کند. یکی برای نشانک ها. (سانتی متر)

صدا و موسیقی برای کمک به شما در تمرکز

آیا شما از نوع فردی هستید که نمی تواند در هنگام سکوت در اطراف خود تمرکز کند؟ سپس یکی از ابزارهای زیر ممکن است به شما کمک کند تا بهره وری بیشتری داشته باشید. اگر هنگام کار در خانه صداهای آشنا دفتر را از دست نمی دهید ، دلم برای دفتر تنگ شده است فضای اداری را به دفتر خانه شما می آورد – با همكاران مجازی كه صداهای معمولی مانند تایپ كردن ، صندلی های جیر جیر یا حباب های گاه به گاه كولر آبی تولید می كنند.

دلم برای دفتر تنگ شده است

صداهای دفتر همیشه بیش از کمک به تمرکز شما را منحرف کرده اند؟ سپس نوزیو می تواند برای شما باشد این برنامه به شما امکان می دهد طبیعت و صداهای شهر را برای ایجاد صدای محیط شخصی خود ترکیب کنید. رویکرد دیگری برای افزایش تمرکز با صدا ناشی می شود Brain.fm. تیم دانشمندان ، نوازندگان و توسعه دهندگان آنها موسیقی کاربردی طراحی می کنند که بر مغز تأثیر می گذارد تا به وضعیت ذهنی مطلوب برسد. آخرین موضوع ولی به همان اهمیت، تمرکز بر @ ویل همچنین مبتنی بر علوم اعصاب است و با تغییر ویژگی های موسیقی در فواصل زمانی مناسب به افزایش تمرکز کمک می کند. امیدوار کننده جایگزین برای لیست پخش معمول شما. (سانتی متر)

وب الماناک 2020

با نگاهی به سال 2020 ، وضعیت وب در این سال چگونه است؟ سالانه وب المان با تلفیق آمار و روند خام HTTP Archive و تخصص جامعه وب ، پاسخ های عمیقی به این س questionال می دهد. نتایج بدست آمده توسط داده های واقعی گرفته شده از بیش از 7.5 میلیون وب سایت و کارشناسان معتبر وب پشتیبانی می شود.

وب الماناک 2020

22 فصل کتاب داعشی این سال را تشکیل می دهد. آنها به چهار قسمت تقسیم می شوند – محتوا ، تجربه ، انتشار ، توزیع – و هر یک از زوایای مختلف مورد کاوش قرار می گیرند. نگاه بصیرت به حالت عملکرد البته نیز گنجانده شده است. (سانتی متر)

نقشه درخواست سایت خود را ایجاد کنید

همه بایت های ارسال شده در سایت شما از کجا آمده است؟ تجزیه و تحلیل جزئیات اجزای شخص ثالث کاری زمانبر است ، اما در حال حاضر شروع خوبی برای دانستن اینکه چه اشخاص ثالثی در سایت شما هستند – و چگونه آنها به آنجا رسیده اند ، خوب است.

درخواست نقشه برای مجله Smashing

سیمون هرن درخواست ابزار تولید نقشه نقشه گره ای از تمام درخواست های یک صفحه را برای هر URL خاص تجسم می کند. اندازه گره های موجود در نقشه متناسب با درصد کل بایت ها است و وقتی روی یک گره قرار بگیرید ، اطلاعاتی در مورد اندازه ، پاسخ و زمان بارگیری آن به دست می آورید. دیگر هیچ شگفتی بدی وجود ندارد. (سانتی متر)

بیایید بسته های JavaScript خود را بهینه کنیم!

این احتمال وجود دارد که با وجود کد JavaScript برای مدتی ، بسته های جاوا اسکریپت شما کمی قدیمی شده اند. ممکن است چند پرکرده منسوخ شده داشته باشید ، یا ممکن است از یک نحو جاوا اسکریپت قدیمی استفاده کنید. اما اکنون یک ابزار کوچک وجود دارد که به شما کمک می کند این گلوگاه ها را شناسایی کرده و برای همیشه رفع کنید.

مشخصات ساخته شده برای سایت Smashing Magazine

محرك كننده اندازه و بهبود عملکرد سایت را با تغییر دادن به نحو مدرن JavaScript محاسبه می کند. این نشان می دهد که کدام بسته ها را می توان بهبود داد و این تغییر چه تاثیری بر عملکرد کلی شما خواهد داشت. کد منبع نیز می باشد موجود در GitHub. (vf)

سرمقاله سر و صدا(cm ، vf ، ra)

Read More

Redux Reducers چگونه کار می کنند – مجله Smashing

درباره نویسنده

Fortune Ikechi یک مهندس Frontend است که در Rivers State نیجریه مستقر است. وی دانشجوی دانشگاه پورت-هارکورت است. او عاشق اجتماع و … است
بیشتر در مورد
ثروت

اگر هنگام تهیه برنامه برای مدیریت ، از Redux در هر زمان استفاده کرده باشید state، قطعاً با کاهنده ها روبرو شده اید. این آموزش مفهوم کاهش دهنده ها و نحوه کار آنها به طور خاص در Redux را توضیح می دهد.

در این آموزش ، ما می خواهیم مفهوم کاهش دهنده ها و نحوه کار آنها ، به ویژه در برنامه های React را بیاموزیم. به منظور درک و استفاده بهتر از Redux ، درک کامل کاهنده ها ضروری است. گیرنده ها روشی را برای به روزرسانی وضعیت برنامه با استفاده از یک عملکرد ارائه می دهند. این یک بخش جدایی ناپذیر از کتابخانه Redux است.

این آموزش برای توسعه دهندگانی است که می خواهند در مورد Redux Reducers بیشتر بدانند. درک React و Redux مفید خواهد بود. در پایان آموزش ، باید درک بهتری از نقشی که Reducers در Redux بازی می کنند داشته باشید. ما برای درک بهتر گیرنده ها و تأثیر آن بر وضعیت در یک برنامه ، دموی کد و برنامه ای را خواهیم نوشت.

کاهش دهنده چیست

Reducer یک تابع خالص است که حالت یک برنامه و عمل را به عنوان آرگومان می گیرد و یک حالت جدید برمی گرداند. به عنوان مثال ، یک احراز هویت می تواند حالت اولیه یک برنامه را به صورت یک شی خالی و عملی را که به او می گوید یک کاربر وارد سیستم شده و یک حالت برنامه جدید را با یک کاربر وارد شده برگرداند ، انجام دهد.

توابع خالص توابعی هستند که هیچگونه عارضه جانبی ندارند و در صورت تصویب همان استدلال ها ، نتایج مشابهی را برمی گردانند.

در زیر مثالی از یک تابع خالص آورده شده است:

const add = (x, y) => x + y;

add(2, 5);

مثال بالا در صورت عبور ، مقداری را بر اساس ورودی ها برمی گرداند 2 و 5 پس همیشه می گرفتی 10، تا زمانی که همان ورودی باشد هیچ چیز دیگری بر خروجی شما تأثیر نمی گذارد ، این نمونه ای از یک تابع خالص است.

در زیر مثالی از تابع کاهنده آورده شده است که حالت و عملی را انجام می دهد.

const initialState = {};
const cartReducer = (state = initialState, action) => {
  // Do something here
}

بیایید دو پارامتر را که یک کاهنده استفاده می کند تعریف کنیم ، state و action.

دولت

آ حالت داده ای است که م componentلفه (های) شما با آن کار می کنند – داده های مورد نیاز یک م holdsلفه را در خود نگه می دارد و آنچه را که م componentلفه ارائه می دهد حکم می کند. یک بار در state شی تغییر می کند ، جز component دوباره ارائه می شود. اگر یک حالت برنامه توسط Redux مدیریت شود ، در آن صورت کاهنده جایی است که تغییرات حالت اتفاق می افتد.

عمل

یک عمل، شی ای است که حاوی محموله اطلاعات است. آنها تنها منبع اطلاعاتی فروشگاه Redux برای به روزرسانی هستند. گیرنده ها فروشگاه را بر اساس مقدار action.type. در اینجا ما تعریف خواهیم کرد action.type مانند ADD_TO_CART.

طبق گفته Redux رسمی مستندات، اقدامات تنها مواردی هستند که باعث تغییر در یک برنامه Redux می شوند ، آنها حاوی محموله برای تغییرات در یک فروشگاه برنامه هستند. عملکردها اشیا Java جاوا اسکریپت هستند که به Redux نوع عملی را که باید انجام شود می گویند ، معمولاً به صورت توابع مانند عملکرد زیر تعریف می شوند:

const action = {
  type: 'ADD_TO_CART',
  payload: {
    product: 'margarine',
    quantity: 4
  }
}

کد بالا یک نوع معمولی است payload مقداری که شامل آنچه کاربر برای آن ارسال می کند ، است و از آن برای به روزرسانی وضعیت برنامه استفاده می شود. همانطور که از بالا مشاهده می کنید ، شی action اکشن شامل نوع عمل و یک جسم محموله است که برای انجام این عمل خاص ضروری است.

به روزرسانی حالت با استفاده از گیربکس ها

برای نشان دادن نحوه کارکرد گیرنده ها ، بیایید به شمارنده اعداد زیر نگاه کنیم:

const increaseAction = {
  type: 'INCREASE',
}; 

const decreaseAction = {
  type: 'DECREASE'
}; 


const countReducer = (state = 0, action) => {
  switch(action.type){
  case INCREASE: 
    return state + 1;

  case DECREASE : 
    return state -1;

  default: 
 return state;

  }
};

در کد بالا ، increaseAction و decreaseAction اقداماتی هستند که در کاهنده برای تعیین اینکه چه چیزی استفاده می شود state به به روز شده است. بعد ، ما یک تابع کاهنده داریم به نام countReducer، که در می گیرد action و یک اولیه state که ارزش آن است 0. اگر مقدار action.type است INCREASE، ما حالت جدیدی را برمی گردانیم که با 1 افزایش می یابد ، اگر اینگونه باشد ، دیگری است DECREASE حالت جدیدی که با 1 کاهش یابد بازگردانده می شود. در مواردی که منظور هیچ یک از آن شرایط نباشد ، برمی گردیم state.

به روزرسانی وضعیت با استفاده از گیربکس ها: اپراتور Spread

حالت را نمی توان مستقیم تغییر داد ، برای ایجاد یا به روزرسانی حالت ، می توانیم از JavaScript استفاده کنیم اپراتور گسترش برای اطمینان از اینکه ما مقدار حالت را مستقیماً تغییر نمی دهیم بلکه در عوض یک شی object جدید را که حاوی حالتی است که به آن منتقل شده و بار کاربری کاربر را بازگردانیم.

const contactAction = {
  type: 'GET_CONTACT',
  payload: ['0801234567', '0901234567']
};

const initialState = {
  contacts: [],
  contact: {},
};

export default function (state = initialState, action) {
  switch (action.type) {
    case GET_CONTACTS: 
      return {
        ...state,
        contacts: action.payload,
    };
  default: 
    return state;
  }

در کد بالا ، ما از یک اپراتور spread استفاده می کنیم تا مطمئن شویم که مقدار حالت را مستقیماً تغییر نمی دهیم ، به این ترتیب می توانیم یک شی new جدید را پر کنیم با حالتی که به آن منتقل شده و محموله ای که توسط آن ارسال می شود کاربر. با استفاده از یک اپراتور spread ، می توانیم اطمینان حاصل کنیم که حالت همانطور که همه موارد جدید را به آن اضافه می کنیم ثابت بماند و اگر قبلاً موجود بود ، فیلد مخاطبین را نیز جایگزین کنیم.

Redux Reducers in Action – نسخه ی نمایشی

برای درک بهتر Redux Reducers و نحوه کار آنها ، ما یک برنامه ساده جستجوی جزئیات فیلم را اجرا خواهیم کرد ، کد و نسخه کار را می توان در اینجا یافت جعبه کد. برای شروع ، به ترمینال خود بروید و با استفاده از دستور زیر برنامه واکنش را اولیه کنید:

create-react-app movie-detail-finder

پس از آغاز پروژه ، بیایید بسته های مورد نیاز برنامه خود را نصب كنیم.

npm i axios reactstrap react-redux redux redux-thunk

پس از نصب بسته ها ، بیایید با استفاده از دستور سرور توسعه خود را شروع کنیم:

npm start

دستور بالا باید سرور توسعه پروژه ما را در مرورگر ما شروع کند. بعد بیایید پروژه خود را در ویرایشگر متن انتخابی خود ، در داخل پروژه خود باز کنیم src پوشه ها ، پرونده های زیر را حذف کنید: App.css، App.test.js، serviceWorker.js و setupTests.js. بعد ، بیایید همه کدهایی را که به پرونده های حذف شده در ما ارجاع می دهند ، حذف کنیم App.js.

برای این پروژه ، ما از Open Movie Database API برای بدست آوردن اطلاعات فیلم ، محتوا و تصاویر برنامه خود استفاده خواهیم کرد ، اینجا پیوندی به API است ، برای استفاده از آن برای این برنامه باید کلیدهای دسترسی را ثبت کرده و دریافت کنید ، پس از اتمام کار ، بیایید با ساختن م componentsلفه ها برنامه خود را ادامه دهیم.

اجزای برنامه ساختمان

اول ، در داخل ما src پوشه را در فهرست پروژه خود ایجاد کنید ، پوشه ای به نام کامپوننت ها ایجاد کنید و در داخل پوشه ، بیایید دو پوشه به نام ایجاد کنیم Movie و Searchbar، م componentلفه ما باید مانند تصویر زیر باشد:

پوشه اجزا
پوشه اجزا (پیش نمایش بزرگ)

م Movieلفه ساخت فیلم

بیایید ساخت Movies م componentلفه ای ، که ساختار جزئیات فیلم را که از API خود دریافت خواهیم کرد ، مشخص می کند. برای این کار ، داخل Movies پوشه کامپوننت ما ، یک فایل جدید ایجاد کنید Movie.js، بعد یک م componentلفه مبتنی بر کلاس برای نتایج API ایجاد کنید ، اجازه دهید این کار را در زیر انجام دهیم.

import React, { Component } from 'react';
import { Card, CardImg, CardText, CardBody, ListGroup, ListGroupItem, Badge } from 'reactstrap';
import styles from './Movie.module.css';

class Movie extends Component{
    render(){
        if(this.props.movie){
            return (
                <div className={styles.Movie}>
                    <h3 className="text-center my-4">
                      Movie Name: {this.props.movie.Title}
                    </h3>
                    <Card className="text-primary bg-dark">
                        <CardImg className={styles.Img}
                          top src={this.props.movie.Poster} 
                          alt={this.props.movie.Title}/>
                        <CardBody>
                            <ListGroup className="bg-dark">
                              <ListGroupItem>
                                <Badge color="primary">Actors:</Badge>
                                  {this.props.movie.Actors}
                                  </ListGroupItem>
                          <ListGroupItem>
                            <Badge color="primary">Genre:</Badge>
                            {this.props.movie.Genre}
                          </ListGroupItem>
                          <ListGroupItem>
                            <Badge color="primary">Year:</Badge>
                            {this.props.movie.Year}
                          </ListGroupItem>
                          <ListGroupItem>
                            <Badge color="primary">Writer(s):</Badge> 
                            {this.props.movie.Writer}
                          </ListGroupItem>
                        <ListGroupItem>
                          <Badge color="primary">IMDB Rating:</Badge> 
                            {this.props.movie.imdbRating}/10
                        </ListGroupItem>
                    </ListGroup>
                      <CardText className="mt-3 text-white">
                        <Badge color="secondary">Plot:</Badge>
                          {this.props.movie.Plot}
                        </CardText>
                      </CardBody>
                    </Card>
                </div>
            )
        }
        return null
    }
}
export default Movie;

در کد بالا ، استفاده از اجزای موجود در بسته reactstrap، می توانید اسناد را بررسی کنید اینجا. ما یک م Cardلفه کارت ساخته ایم که شامل نام فیلم ، تصویر ، ژانر ، بازیگر ، سال ، نویسنده فیلم ، رتبه بندی و طرح است. برای سهولت در انتقال داده ها از این م componentلفه ، ما داده ها را به عنوان ابزار دیگری برای سایر ملفه ها ایجاد کردیم. بعد ، بیایید ما را بسازیم Searchbar جزء.

ساخت کامپوننت نوار جستجو ما

ما Searchbar کامپوننت دارای یک نوار جستجو و یک جز button دکمه برای جستجوی اجزای فیلم است ، بیایید این کار را در زیر انجام دهیم:

import React from 'react';
import styles from './Searchbar.module.css';
import { connect } from 'react-redux';
import { fetchMovie } from '../../actions';
import Movie from '../Movie/Movie';

class Searchbar extends React.Component{
render(){
        return(
            <div className={styles.Form}>
                <div>
                    <form onSubmit={this.formHandler}>
                        <input 
                            type="text" 
                            placeholder="Movie Title" 
                            onChange={e => this.setState({title: e.target.value})}
                            value={this.state.title}/>
                        <button type="submit">Search</button>
                    </form>
                </div>
                <Movie movie={this.props.movie}/>
            </div>
        )
    }
}

در کد بالا ، ما در حال وارد کردن هستیم connect از جانب react-redux که برای اتصال یک جز component React به فروشگاه Redux استفاده می شود ، اطلاعات مربوط به فروشگاه را به جز the ارائه می دهد و همچنین توابع مورد استفاده برای ارسال اقدامات به فروشگاه را فراهم می کند. بعد ، ما وارد کردیم Movie جز component و یک تابع fetchMovie از اعمال.

در مرحله بعدی ، ما یک برچسب فرم با یک جعبه ورودی برای ورود عناوین فیلم های خود داریم ، با استفاده از setState قلاب از React ، ما یک اضافه کردیم onChange رویداد و مقداری که حالت title به مقدار وارد شده در جعبه ورودی. ما یک button برای جستجوی عناوین فیلم و استفاده از Movie م componentلفه ای که وارد کردیم ، از خصوصیات م componentلفه عبور کردیم props به نتیجه جستجو.

مورد بعدی برای ما نوشتن تابعی برای ارسال عنوان فیلم خود به API به منظور ارسال نتایج برای ما است ، همچنین باید حالت اولیه برنامه را تنظیم کنیم. بیایید این کار را در زیر انجام دهیم

class Searchbar extends React.Component{

    state = {
        title: ''
    }
    formHandler = (event) => {
        event.preventDefault();
        this.props.fetchMovie(this.state.title);
        this.setState({title: ''});
    }

در اینجا ، ما حالت اولیه برنامه را روی رشته های خالی تنظیم می کنیم ، یک تابع ایجاد می کنیم formHandler که یک پارامتر رویداد را می گیرد و fetchMovie عملکرد از عمل و تنظیم عنوان به عنوان حالت جدید برنامه است. برای تکمیل برنامه ما ، بیایید این م componentلفه را با استفاده از ویژگی connect از صادر کنیم react-redux، برای انجام این کار ما از redux واکنش استفاده می کنیم mapToStateProps ویژگی برای انتخاب بخشی از داده مورد نیاز مولفه ما ، می توانید درباره آن بیشتر بیاموزید mapToStateProps اینجا.

const mapStateToProps = (state) => {
    return { movie: state.movie }
}
export default connect(mapStateToProps, { fetchMovie })(Searchbar)

بیایید با ایجاد یک فایل سبک ها را به فرم خود اضافه کنیم Searchbar.module.css و اضافه کردن سبک های زیر:

.Form{
  margin: 3rem auto;
  width: 80%;
  height: 100%;
}
input{
  display: block;
  height: 45px;
  border: none;
  width: 100%;
  border-radius: 0.5rem;
  outline: none;
  padding: 0 1rem;
}
input:focus, select:focus{
  border: 2px rgb(16, 204, 179) solid;
}

.Form button{
  display: block;
  background: rgb(16, 204, 179);
  padding: 0.7rem;
  border-radius: 0.5rem;
  width: 20%;
  margin-top: 0.7rem;
  color: #FFF;
  border: none;
  text-decoration: none;
  transition: all 0.5s;
}
button:hover{
  opacity: 0.6;
}
@media(max-width: 700px){
  input{
      height: 40px;
      padding: 0 1rem;
  }
  .Form button{
      width: 40%;
      padding: 0.6rem;
  }
}

هنگامی که موارد فوق را انجام دادیم ، مولفه نوار جستجو باید شبیه تصویر زیر باشد:

جزbar نوار جستجو
جزbar نوار جستجو. (پیش نمایش بزرگ)

ایجاد اقدامات برای برنامه

در این بخش ، ما اقدامات Redux را برای برنامه خود تنظیم می کنیم ، ابتدا در داخل src پوشه را ایجاد کنید actions و در داخل پوشه ، یک فایل ایجاد می کنیم index.js فایل. در اینجا ما یک تابع ایجاد می کنیم fetchMovie که یک پارامتر عنوان را می گیرد و با استفاده از Axios فیلم را از API می گیرد. بیایید این کار را در زیر انجام دهیم:

import axios from 'axios';

export const fetchMovie = (title) =>
    async (dispatch) => {
        const response = await 
          axios.get(
            `https://cors-anywhere.herokuapp.com/http://www.omdbapi.com/?t=${title}&apikey=APIKEY`);
        dispatch({
            type: 'FETCH_MOVIE',
            payload: response.data
        })
    }

در کد بالا ، وارد کردیم axios و تابعی ایجاد کرد به نام fetchMovie که در می گیرد title پارامتر را با استفاده از async / انتظار به طوری که بتوانیم از سرور API درخواست کنیم. ما یک dispatch عملکردی که شی Red عملیاتی را که به Redux منتقل می شود به Redux ارسال می کند. با توجه به آنچه در بالا داریم ، در حال ارسال عملی با نوع هستیم FETCH_MOVIE و محموله ای که شامل پاسخی است که از API دریافت کرده ایم.

توجه داشته باشید: apikey در درخواست با درخواست شما جایگزین خواهد شد apikey پس از ثبت نام در OmdbAPI.

ایجاد برنامه های کاهش دهنده برنامه

در این بخش ، ما می خواهیم کاهنده هایی برای برنامه خود ایجاد کنیم.


const fetchMovieReducer = (state = null, action) => {
    switch(action.type){
        case 'FETCH_MOVIE':
            return action.payload;
        default:
            return state;
    }
}
const rootReducer = (state, action) => {
    return { 
        movie: fetchMovieReducer(state, action)
    }
}
export default rootReducer;

در کد بالا ، ما یک ایجاد کردیم fetchMovieReducer که در حالت پیش فرض null و یک action پارامتر ، با استفاده از یک عملگر سوئیچ ، برای مورد FETCH_MOVIE ما مقدار action.payload که فیلمی است که از API گرفتیم. اگر عملی که سعی کردیم انجام دهیم در کاهنده نیست ، پس حالت پیش فرض خود را برمی گردانیم.

بعد ، ما یک ایجاد کردیم rootReducer تابعی که وضعیت فعلی و یک عمل را به عنوان ورودی بپذیرد و بازگرداند fetchMovieReducer.

با هم قرار دادن آن

در این بخش ، ما می خواهیم برنامه خود را با ایجاد فروشگاه redux خود در index.js، بیایید این کار را در زیر انجام دهیم:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import App from './App';
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css';
import reducers from './reducers';

const store = createStore(reducers, applyMiddleware(thunk))
ReactDOM.render(
    <Provider store={store}>
        <>
          <App/>
        </>
    </Provider>,
    document.getElementById('root')
)

در کد بالا ، ما برنامه را ایجاد کردیم store با استفاده از createStore روش با عبور از کاهنده ای که ایجاد کردیم و یک میان افزار. میان افزارها افزودنیهایی هستند که به ما امکان می دهد عملکرد Redux را ارتقا دهیم. در اینجا ما با استفاده از Redux Thunk میان افزار با استفاده از applyMiddleware. میان افزار Redux Thunk برای انجام به روزرسانی های همزمان به فروشگاه ما ضروری است. این مورد لازم است زیرا به طور پیش فرض ، Redux فروشگاه را به طور همزمان به روز می کند.

برای اطمینان از اینکه برنامه ما فروشگاه دقیق استفاده را می داند ، برنامه خود را در یک بسته بندی کردیم Provider جز component و فروشگاه را به عنوان یک وسیله نقلیه عبور داد ، با این کار سایر اجزای برنامه ما می توانند اطلاعات را با فروشگاه متصل و به اشتراک بگذارند.

بیایید کمی سبک به سبک خود اضافه کنیم index.css فایل.

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  background: rgb(15, 10, 34);
  color: #FFF;
  height: 100vh;
  max-width: 100%;
}

ارائه و آزمایش جزئیات یاب فیلم

در این بخش ، ما می خواهیم با ارائه برنامه خود در برنامه ، برنامه خود را به نتیجه برسانیم App.js، برای انجام این کار ، بیایید یک جز component کلاس محور به نام ایجاد کنیم App و نوار جستجو و قسمت ورودی خود را مقدار دهی اولیه کنید.

import React from 'react';
import Searchbar from './components/Searchbar/Searchbar';
import styles from './App.module.css';
class App extends React.Component{
    
    render(){
        return(
            <div className={styles.App}>
                <h1 className={styles.Title}>Movies Search App</h1>
                <Searchbar/>
            </div>
            
        )
    }
}
export default App;

در اینجا ، ما یک م Appلفه مبتنی بر کلاس برنامه با یک ایجاد کردیم h1 که می گوید برنامه جستجوی فیلم و ما اضافه شده است Searchbar جزء. برنامه ما باید مانند تصویر زیر باشد:

برنامه جزئیات فیلم با کاهنده ها
برنامه جزئیات نهایی فیلم با استفاده از گیربکس ها. (پیش نمایش بزرگ)

نسخه آزمایشی فعال در Codesandbox در دسترس است.

نتیجه

گیرنده ها بخش مهمی از مدیریت دولت Redux هستند ، با كاهش دهنده ها می توانیم توابع خالصی را برای به روز كردن مناطق خاص برنامه های Redux خود بدون عوارض جانبی بنویسیم. ما اصول کاهنده های Redux ، کاربردهای آنها و مفهوم اصلی گیرنده ها ، حالت و استدلال ها را یاد گرفته ایم.

با مشاهده مستندات مربوط به گیربکس های Redux می توانید این کار را بیشتر ادامه دهید اینجا. می توانید این کار را بیشتر ادامه دهید و بیشتر بر روی گیربکس های Redux بسازید ، به من اطلاع دهید چه چیزی را می سازید.

منابع

سرمقاله سر و صدا(ks ، ra ، yk ، il)
Read More