Несколько toggle-кнопок на чистом CSS вам в копилку. Исходники тут: https://csspoints.com/css-toggle-button/

#фронтенд #css

Руководство по обработке ошибок в JavaScript

Эта статья посвящена обработке ошибок в JavaScript и разбита на 3 части:
— сначала проводится обзор системы обработки ошибок в JavaScript;
— после этого автор рассказывает, что делать с ошибками, возникающими в серверном коде (в контексте Node.js + Express.js);
— затем обсуждается обработка ошибок в React.js.

Те принципы работы с ошибками, о которых идёт речь в статье, универсальны, поэтому эти знания можно применить к тем инструментам, с которыми работаете.

Читать: https://tprg.ru/7FJ3

#javascript

Онлайн-курс по React

В этом бесплатном онлайн-курсе вы можете познакомиться с разработкой современных JavaScript-приложений. Основное внимание в курсе уделяется созданию одностраничников с помощью React: https://fullstackopen.com/en/

Также курс затрагивает GraphQL, тестирование, конфигурирование и использование MondoDB для хранения данных.

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

Адаптивное изображение — это изображение, размер которого меняется в зависимости от разрешения экрана. Читайте руководство, в котором собраны все основные способы реализации таких изображений: https://tprg.ru/XUdD

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

Несколько Chrome-плагинов для веб-разработчиков

BuiltWith Technology Profiler — помогает определить, на каком движке и с какими технологиями создавали сайт: https://tprg.ru/mDjV

Wappalyzer — покажет, какими веб-технологиями пользовались разработчики сайта (движок, счетчики и т.д.): https://tprg.ru/21OZ

Colorzilla — можно взять пипеткой цвет с любой точки страницы: https://tprg.ru/7b0E

What Font — определить шрифт на чужом сайте в один клик: https://tprg.ru/s3YI

Google Analytics Debugger — поможет получить сведения как об ошибках в коде отслеживания, так и об успешно выполненных командах: https://tprg.ru/ibXD

Web Developer — плагин разработан в виде панели с инструментами, сгруппированными во вкладках меню. Расширение может включать и выключать разные опции на странице (Java-элементы, кэш), менять цвета, шрифты, картинки, работать с куками и т.д. Также Web Developer позволяет скопировать текст с сайтов, где включена защита на копирование контента: https://tprg.ru/hGvY

Check My Links — проверит страницу на наличие 200/404 ссылок: https://tprg.ru/xMzc

Unshorten.linк — расшифрует короткий линк в полноценный адрес: https://tprg.ru/Pg12

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

Как оптимизировать модель данных для cloud-based-хранилищ

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

Автор доклада попробует доказать, что копирование традиционных star- и snowflake-схем не только не позволяет получить максимальную производительность в таких хранилищах, как Amazon Redshift и Google Big Query, но и приводит к дополнительным финансовым затратам.

Также автор демонстрирует несколько примеров с production, когда с уменьшением мощности кластера общая производительность системы повышалась.

Презентация доклада: https://tprg.ru/uOcK

#бэкенд

Должен ли фронтенд разработчик уметь писать бэкенды?

Автор этой статьи считает, что должен. Ведь чем большим количеством инструментов владеет разработчик, тем эффективнее он сможет решать проблемы заказчика: https://tprg.ru/3Olm

А вы как считаете? Читайте статью и присоединяйтесь к обсуждению этой темы в комментах.

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

Просто лучший клиент для докера

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

Простая библиотека для создания разных графиков на React: https://react-charts.js.org/examples/line

Документация и инструкция по установке здесь: https://github.com/tannerlinsley/react-charts

#фронтенд #react

Использование микросервисной архитектуры на практике

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

Своим кейсом разработки и доставки микросервисов поделился программист из 2ГИС. Он рассказал про архитектурные решения, деплой, возможности масштабирования, трендовые и просто удобные инструменты для работы: https://tprg.ru/cYdA

#devops #архитектура

Подробное иллюстрированное руководство по CSS Grid

Заменит ли CSS Grid flex-box? В чём между ними разница? Почему не использовать Bootstrap вместо всего этого? И как работать с CSS Grid, если решили, что это именно то, что вам нужно? Обо всём этом читайте в статье: https://dev.to/mustapha/css-grid-illustrated-introduction-52l5

#фронтенд #css

Исходники музыкального стримингового сервиса: https://github.com/mallorybulkley/stratus-sound

Бэкенд написан на Ruby on Rails и PostgreSQL, а фронтенд — на React и Redux.

#фронтенд #ruby #react #redux

Как заранее подгрузить страницы, на которые перейдёт пользователь

Типичный путь человека в интернете: просмотр страницы, переход по ссылке, загрузка новой страницы. На сайтах-одностраничниках этапа загрузки новой страницы нет — все изменения происходят на единственной странице приложения. Всё ради того, чтобы пользователь как можно быстрее увидел контент.

А что если бы можно было загрузить новую страницу ещё до того, как человек перейдёт по ссылке? Есть 2 инструмента, которые могут помочь в этом:

quicklink — ищет на странице видимые ссылки и, если браузер в данный момент не занят какими-то тяжеловесными операциями, подгружает страницы, на которые эти ссылки ведут: https://github.com/GoogleChromeLabs/quicklink

instant.pаgе — если пользователь наводит курсор мыши на ссылку и держит его там 65 мс, то страница, на которую ведёт ссылка, подгружается: https://instant.page/2

#фронтенд #инструменты

Полный переход на HTTPS в Chrome

Google опубликовала расписание изменений в Chrome, которые должны привести к полному переходу на HTTPS-протокол: https://tprg.ru/KoEa

Сейчас некоторые HTTPS-ресурсы продолжают передавать часть данных по менее защищённому и безопасному HTTP. Гугл хочет положить конец смешанному трафику.

— В Chrome 79 появится кнопка, отменяющая автоблокировку смешанного контента на конкретных сайтах. Так можно будет получать по HTTP данные, которые Chrome сейчас блокирует.

— Chrome 80 начнёт автоматически передавать весь аудио- и видеоконтент по HTTPS. Если передача по HTTPS будет невозможна, браузер просто заблокирует этот контент. Разблокировать его можно с помощью функции, описанной в предыдущем абзаце.

— Chrome 81 будет весь смешанный контент либо передавать по HTTPS, либо блокировать.

#chrome #https

Drag-&-Drop-компоненты для слепых пользователей

Что объединяет Trello, Gmail, Aviasales, Google Keep? В каждом из них есть Drag-&-Drop-компоненты, которые можно перетаскивать мышкой. Это делает сайты по-настоящему удобными, потому что в реальной жизни мы часто используем этот паттерн. Передвигать вещи для нас естественно, поэтому и в вебе мы хотим перемещать элементы по экрану с одного места на другое, как стикеры на доске или магнитики на холодильнике. Сортировка todo-списков, организация дашбордов, загрузка файлов — очень сложно представить все эти события без перетаскивания элементов на странице.

Но есть нюанс. При создании таких компонентов разработчик думает, что пользователи физически видят экран и элементы, могут зацепиться за них мышкой и перетащить. Часто так и есть, но существует сегмент пользователей с проблемами зрения. Как сделать так, чтобы им тоже были доступны Drag-&-Drop-компоненты?

Рекомендуем рассказ разработчика о создании Drag-&-Drop-компонентов для тех, кто не видит экран и пользуется другими устройствами для взаимодействия с браузером. Текстовая версия: https://tprg.ru/YG27

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

Чек-лист, в котором собраны основные пункты, связанные с безопасностью приложения: https://tprg.ru/eoJr

#безопасность

15 кастомных директив для Vue.js: https://tprg.ru/vPa1

#фронтенд #vuejs

Правильно настроенный с точки зрения безопасности nginx-конфиг: https://gist.github.com/plentz/6737338

#бэкенд #nginx #безопасность

⁠InfluxDB и базы данных временных рядов

Знакомы ли вы с базами данных временных рядов? Их основное преимущество перед другими типами БД — оптимизация для быстрого приёма данных. Это означает, что скорость загрузки не уменьшается со временем и остаётся достаточно стабильной (чего нельзя сказать про реляционные базы данных, например).

Читайте статью, которая даст вам общее представления о базах данных такого типа. А на примере конкретной БД InfluxDB вы увидите, как это всё работает в реальном мире: https://tproger.ru/translations/influxdb-guide/

#бэкенд #базыданных

Квиз из 20 вопросов по основам JavaScript: https://quiz.typeofnan.dev/

После каждого вопроса следует подробное объяснение правильного ответа, поэтому дополнительно гуглить ничего не придётся.

#javascript

Большой набор шпаргалок для bash-скриптов: https://devhints.io/bash

Сохраняйте и пользуйтесь.

#bash #шпаргалки