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

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

در طول سال ها ، اکوسیستم 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%;
`;

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

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

 <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 برای اجزای UI و اجزای سبک برای یکپارچه سازی برنامه خود ، از React Context API داخلی استفاده خواهیم کرد.

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

create-react-app list-app

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

cd list-app

yarn add grommet grommet-controls grommet-icons 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لفه ما باید مانند تصویر زیر باشد.

ساخت م 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لفه ما با لیست های اضافه شده باید به این شکل باشد:

کامپوننت NavBar

این م 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 ، یک کتابخانه م componentلفه با پاسخگویی و قابلیت دسترسی در ذهن ، یاد گرفتیم. ما همچنین مراحل ایجاد یک برنامه م componentلفه قیمت گذاری را با استفاده از Grommet و یک برنامه لیست طی کردیم. با استفاده از Grommet برای م componentلفه خود و نیازهای UI برای برنامه React بعدی خود لذت ببرید. کد برنامه لیست Grommet را می توانید در اینجا پیدا کنید جعبه کد و م componentلفه قیمت گذاری را می توان یافت اینجا.

منابع

(ks ، vf ، yk ، il)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

قلم های پیش فرض در سیستم عامل های مختلف به طور قابل توجهی متفاوت است. روشی آسان برای جستجوی قلم های پیش فرض سیستم ، به ویژه مواردی که باید از طریق 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 شما را به HTML پاسخگو ترجمه می کند. کتابخانه ای از اجزای استاندارد در وقت اضافی شما صرفه جویی می کند و پایگاه کد ایمیل شما را سبک می کند. و اگر می خواهید خودتان را بسازید ، راهنمای سیستم الگو مدولار ممکن است کمک کند ، امیدوار کننده!

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

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

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

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

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

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

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

CSS Shadow Generator

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

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

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

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

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

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

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

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

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

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

سر و صدا بمان!

(cm ، vf ، ra)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Retro Touch

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

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

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

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

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

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

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

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

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

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

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

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

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

(ef، vf، he)

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

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

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

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

استفاده از آن کاملاً رایج شده است 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 فعال شده است). (توجه داشته باشید که تنظیمات با پشته های پیچیده پیچیده پیچیده است.)

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

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

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

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

وضعیت وب

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

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

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

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

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

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

بیشتر خواندن

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

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

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

اشتراک ها

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

بیشتر خواندن

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

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

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

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

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

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

(ریل)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

در مقایسه با حل تغییر طرح با موقعیت یابی مطلق ، روش مبتنی بر شبکه هوبرت از شرایط پیچیده ای که به بیش از دو صفحه نیاز دارند پشتیبانی می کند. مزیت دیگر: نیازی نیست که فرض کنید کدام صفحه باید اندازه کل م 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 می توانید از بین سه دوره انتخاب کنید ، پیشرفت خود را پیگیری کنید و پاداش کسب کنید. 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 میلیون وب سایت و کارشناسان معتبر وب پشتیبانی می شود.

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

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

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

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

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

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

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

(cm ، vf ، ra)

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

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

در این آموزش ، ما می خواهیم مفهوم کاهش دهنده ها و نحوه کار آنها ، به ویژه در برنامه های 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;
  }
}

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

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

در این بخش ، ما اقدامات 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)