Компания Adobe представила React Spectrum

Это коллекция библиотек и инструментов, которые помогут создавать адаптивный, доступный и надёжный пользовательский интерфейс. React Spectrum включает в себя три библиотеки:

— React Spectrum: «реактивная» реализация Spectrum.
— React Aria: хуки для работы с a11y, i18n и поведением компонентов.
— React Stately: хуки для работы со стейтом компонентов.

Подробнее: https://tprg.ru/rbsJ

#фронтенд #react

​Странное поведение JavaScript на примере задач

Давно не секрет, что JS порой ведёт себя непредсказуемо. Этому вопросу посвящена целая лекция под названием «WTFJS» от Брайана Леру. А вот несколько задачек на JavaScript, которые связаны с необычным поведением языка:

https://tprg.ru/6Uf9

Кому-то они помогут узнать что-нибудь новое, а кто-то сможет освежить знания.

#javascript #фронтенд

​Быстрая загрузка страниц с preconnect и crossorigin

По умолчанию браузеры сначала подгружают ресурсы, объявленные в HTML. Однако ресурсные подсказки сообщают браузеру о некоторых элементах заранее, что ускоряет загрузку. То же и с атрибутом crossorigin в теге <link>: он описывает, какие ресурсы будут загружены из указанного источника.

Автор статьи разобрал преимущества использования preconnect и crossorigin, а также привёл статистику по скорости загрузки страниц в диаграммах:

https://tprg.ru/P7Rz

#фронтенд #html #css

Дизайнер: Выглядит красиво, но не мог бы ты поднять заголовок на 1 пиксель вверх?
Разработчик: Конечно могу, но тогда мне придется написать 19px (некрасиво) вместо 20px. Мне не нравятся некруглые числа.
Дизайнер: Да, окей. Оставляем так.

20 ресурсов для создания тестовых данных

Проверять работоспособность объекта можно по-разному, но суть одна: тестирование не должно затрагивать реальные процессы.

Допустим, вам нужен готовый набор фейковых телефонов. Или вы работаете с API и проверяете ответ сервера. В юнит-тестах не стоит использовать настоящие данные или доступ к серверной части: для этого есть объекты, имитирующие реальную ситуацию.

В статье собраны готовые инструменты для быстрого создания тестовых данных:

https://tprg.ru/5Jt4

#бэкенд #фронтенд #javascript

Возвращение веба 90-х

Автор статьи рассказывает о конкретных концепциях и инструментах, которые вполне могут вернуться. Например, персональные сайты, поиск материалов на основе «живых» рекомендаций, веб-монетизация, создание сайтов по принципу «что видишь, то и получишь». Рассуждения здравые и позволяют почерпнуть какие-то идеи для себя.

Статья: https://tprg.ru/I8SW
Демо старого веба: https://tprg.ru/19i8

#веб

box-shadow: 80px -80px;

Вышла RC-версия WebStorm 2020.2

IDE порадует такими обновлениями:

— установка Prettier как форматера по умолчанию;
— поддержка Nuxt.js;
— запуск отладки инструментами Windows;
— виджет Inspections для быстрого поиска проблем;
— улучшенная поддержка пул-реквестов на GitHub;
— простая настройка отступов и интерполяции для кода Vue.

Скачать можно здесь: https://tprg.ru/PS2F

Ждали?

#javascript #инструменты

​Основные вопросы по началу работы с Docker и ответы на них

— Чем контейнер отличается от виртуальной машины?
— Чем контейнер отличается от образа?
— В чём разница между Docker и Kubernetes?
— Почему нельзя подключиться к веб-приложению, запущенному в контейнере?
— Как запустить несколько приложений в одном контейнере?
— Как сохранить данные при запуске контейнера?

Из этой статьи вы получите развёрнутые ответы на каждый из перечисленных вопросов:

https://tprg.ru/ICkB

#devops #docker

Первый совместный запуск фронт и бэкенда

​Google отложил ранжирование сайтов по мобильной версии до 2021 года

Такое решение принято в связи с коронавирусом. Mobile-first-индексирование, запланированное на сентябрь этого года, перенесено на март следующего года.

Как не просесть в поиске и на какие факторы обратить внимание, рассказано в этой статье:

https://tprg.ru/h2LJ

#mobile #google

​Работа с часовыми поясами в JavaScript

Локализация времени — непростая штука, которую тем не менее часто приходится реализовывать на сайте. В этой статье описаны возможные проблемы с часовыми поясами на JavaScript и их решение:

https://tprg.ru/rcIq

#javascript #фронтенд

10 классных проектов на CodePen

В сервисе CodePen представлено множество креативных работ, среди которых имитация живого экрана, индикатор выполнения в стиле Симпсонов, 3D-глаз, который следит за курсором, и многое другое. О самых интересных проектах можно почитать здесь:

https://tprg.ru/JlzH

#фронтенд

Когда увидел, как твой сайт работает в Internet Explorer

Всё о системе типов в PHP

https://tprg.ru/Qnup

Автор статьи проделал огромную работу и разобрал по косточкам самые интересные темы, затрагивающие типы в PHP: виды, особенности, режимы, Type Juggling и механизмы вроде Type Hinting. Статья подкреплена примерами и дополнена полезным видео.

#бэкенд #php

Прокачайте SQL с интерактивным задачником

Это курс из 18 базовых уроков с упражнениями, которые проверяются в режиме реального времени:

https://tprg.ru/3M56

#бэкенд #sql

В рекламе нужно ходить сразу с козырей

​Хотел кликнуть, но не смог: как правильно настроить размер области клика

На кликабельность элемента влияет целый ряд факторов, начиная размером и заканчивая расположением. Держите список UX-решений, благодаря которым пользователи смогут нормально взаимодействовать с вашим сайтом:

https://tprg.ru/nPEi

#фронтенд #дизайн #ux

Шпаргалка по OAuth

Как работает открытый протокол авторизации, за что отвечают client_id и client_secret, как генерируется токен и происходит валидация данных — всё это представлено в виде удобной схемы-шпаргалки. Забирайте себе:

https://tprg.ru/SvV4

#бэкенд #api

Когда забыл подключить CSS

​Кто такой DevOps-инженер?

Да и вообще, чем он занимается и каким должен быть? В этой статье мы собрали ответы на часто задаваемые вопросы о DevOps, а в конце — бонусный гайд:

https://tprg.ru/8Gdb

#devops