Рубрики
Без рубрики

Еженедельный дайджест 19/2021

Добро пожаловать в мой еженедельный дигест № 19 этого года. Этот еженедельный дайджест содержит много интересного и … Tagged с CSS, JavaScript, React, WebDev.

Добро пожаловать в мой еженедельный дигест № 19 этого года.

Этот еженедельный дигест содержит много интересных и вдохновляющих статей, видео, твитов, подкастов и дизайнов, которые я использовал в течение этой недели.

Интересные статьи для чтения

Разочаровывающие образцы дизайна, которые нуждаются в исправлении:

В этой новой серии статей о UX мы более подробно рассмотрим некоторые разочаровывающие модели дизайна и исследуем лучшие альтернативы, а также множество примеров, которые следует помнить при создании или проектировании.

Разочаровывающие дизайнерские узоры, которые нуждаются

Тестирование JavaScript: 9 лучших практик для изучения

Мы увеличиваем девять лучших практик для тестирования JavaScript, которые могут помочь вам написать лучшие тесты и помочь вашей команде лучше понять их.

Тестирование JavaScript: 9 лучших практик для изучения – блог Logrocke

Использование форм в React

Узнайте, как создавать формы с помощью React, разницу между контролируемыми и неконтролируемыми входами, а какие для использования.

Использование форм в React

Как мы используем веб -компоненты на GitHub

GitHub уже давно является сторонником веб -компонентов. Вот как мы их используем.

Как мы используем веб -компоненты в GitHub | Блог GitHub

Некоторые отличные видео, которые я смотрел на этой неделе

TypeScript для компонентов React

TypeScript быстро становится отраслевым стандартом для разработки React. Возьмите свои навыки TypeScript от начинающих до уровня мастеров, изучив все, что вам нужно знать о том, как писать компоненты правильно.

по Джек Херрингтон

Учебное пособие по границе CSS-границе

Как создать сложную форму только с границей CSS и понять, как отдельно контролировать горизонтальный и вертикальный границы-радий.

по Красный Стаплер

Думая о способах решить СМИ СВИС

В сегодняшнем конкурсе с графическим интерфейсом Адам Аргайл делится думать о способах создания встроенного опыта прокрутки в Интернете, которые являются минимальными, отзывчивыми, доступными и работающими в браузерах и платформах (например, телевизоры!).

по Адам Аргайл

Amazon, Etsy и Ebay Checkout UI

Вот пять ключевых элементов пользовательского интерфейса, которые появляются на экранах ведущих компаний по электронной коммерции. Сравнение пользовательского интерфейса также привело к бесплатному шаблону проверки Figma.

по Джакуб Линовский

Еще 5 должны знать хитрости CSS Что почти никто не знает

CSS – это обширный язык с тоннами функций, и невозможно узнать их все. В этом видео я буду освещать еще 5 функций в CSS, которые никто не знает, но невероятно полезен.

по Web Dev упрощен

Тестирование реагирует компоненты

Здесь Эми Даттон покажет вам, как писать тесты для компонента React, используя Jest и библиотеку тестирования React.

по Эми Даттон

Mastering React Hooks с помощью TypeScript

Давайте снова погрузимся в TypeScript, но на этот раз, чтобы посмотреть на React Hooks.

по Джек Херрингтон

Полезные репозитории GitHub

Фолио

Настраиваемая тестовая структура для создания собственных тестовых рамок.

Microsoft/Folio

Настраиваемая тестовая структура для создания собственных тестовых рамках

Если вы ищете тест драматурга, посмотрите на Playwright.dev Для документации и примеров.

Очень настраиваемая тестовая структура.

Фолио Доступно в предварительном просмотре и находится в активном развитии. Преломление изменений может произойти. Мы приветствуем ваши отзывы, чтобы сформировать это на 1.0.

Док

Написание теста

Написать ваш первый тест легко.

// example.spec.ts
import test from 'folio';

test('let us check some basics', async () => {
  test.expect(1 + 1).toBe(2);
});

Теперь вы можете запустить тест.

# Assuming my.spec.ts is

ZX

Инструмент для написания лучших сценариев

Google/ZX

Инструмент для написания лучших сценариев

#!/usr/bin/env zx

await $`cat package.json | grep name`

let branch = await $`git branch --show-current`
await $`dep deploy --branch=${branch}`

await Promise.all([
  $`sleep 1; echo 1`,
  $`sleep 2; echo 2`,
  $`sleep 3; echo 3`,
])

let name = 'foo bar'
await $`mkdir /tmp/${name}`

Bash – это здорово, но когда дело доходит до написания сценариев, люди обычно выбирают более удобный язык программирования. JavaScript – идеальный выбор, но стандартная библиотека Node.js требует дополнительных хлопот перед использованием. zx Пакет предоставляет полезные обертки вокруг Child_process , избегает аргументов и дает разумные значения по умолчанию.

Установить

npm i -g zx

Требование

Node.js.13.1

Документация

Напишите свои сценарии в файле с .mjs Расширение, чтобы иметь возможность использовать ждет На верхнем уровне. Если вы предпочитаете .js расширение…

Удаленный Redux Devtools

Используйте Redux devtools Удаленно для реагирования нативные, гибридные, настольные и серверные приложения Redux.

Zalmoxisus/Demote-Redux-Devtools

Redux Devtools удаленно.

Используйте Redux devtools Удаленно для реагирования нативные, гибридные, настольные и серверные приложения Redux.

Установка

npm install --save-dev remote-redux-devtools

Примечание: для Windows использовать remote-redux-devtools@0.5.0 (Новые версии не будут работать из-за проблемы с Windows, исправленной в React-Cniate ).

использование

Есть 2 способа использования в зависимости от того, используете ли вы другие усилители магазина (Middlewares) или нет.

Добавьте Devtools Enhancer в свой магазин

Если у вас есть базовый Магазин Как описано на официальном Redux-Docs , просто замените:

import { createStore } from 'redux';
const store = createStore(reducer);

с

import { createStore } from 'redux';
import devToolsEnhancer from 'remote-redux-devtools';
const store = createStore(reducer, devToolsEnhancer());
// or const store = createStore(reducer, preloadedState, devToolsEnhancer());

ПРИМЕЧАНИЕ. Передача Enhancer в качестве последнего аргумента требует.1.0

Когда использовать Devtools Compose Helper

Если вы настроите свой магазин с Средние войны и усилители …

Дриббл -снимки

Localy – дорожная карта

по Арман Рокни

Govoroon App

по Грегори Риагузов

IoT Приложение для растущих растений

по Amirhossein Soltani

Назначение врача

по Мартина Зиелиньска

Allhand – мобильное приложение

по Бэтенс

Твиты

Выбранные ручки

GLSL образец 027

по Юки

Пружинный рисунок

по Лиам Иган

Подкасты стоит слушать

Синтаксис FM – технический долг

В этом поспешном удовольствии Скотт и Уэс говорят о техническом долге – что это такое, почему это происходит, и некоторые методы для уменьшения и избегания его.

Подкаст CSS – точки Snap

В этом эпизоде Уна и Адам направляют зоны прокрутки в свои мирные места отдыха, сохраняя выравнивание, поддержание визуальной гармонии и улучшая общий опыт работы с содержанием.

Smashing Podcast – Какое будущее CSS?

Мы начинаем наш новый сезон с будущего CSS. Какие новые спецификации скоро приземляются в браузерах? Дрю Маклеллан разговаривает с экспертом Мириам Сюзанной, чтобы узнать.

3 минуты с Kent – Developed Development

Разработка программного обеспечения ежедневно – обработка естественного языка

Обработка естественного языка (NLP) – это ветвь искусственного интеллекта, связанный с предоставлением компьютерам способности понимать текст и произнесенные слова. «Понимание» включает в себя намерения, чувства и то, что важно в сообщении.

Спасибо за чтение, поговорите с вами на следующей неделе и оставайтесь в безопасности! 👋

Оригинал: “https://dev.to/marcobiedermann/weekly-digest-19-2021-1cfh”

Читайте ещё по теме: