jsonbox — бесплатное удалённое хранилище для JSON: https://jsonbox.io/

Сервис генерирует для вас URL, к которому вы сможете обращаться через API, чтобы сначала добавить, а затем читать и редактировать ваш JSON.

Документация: https://github.com/vasanthv/jsonbox#readme

#инструменты #api #json

Руководство по созданию бесконечного списка с помощью React и GraphQL: https://vk.cc/9PUotE

Кроме того, автор статьи создал отдельный компонент, который можно просто добавить в свой проект и использовать без написания кучи кода: https://github.com/frinyvonnick/react-simple-infinite-loading

#фронтенд #react #graphql

В этой статье рассматриваются советы по оптимизации CSS, которые можно использовать для повышения производительности интерфейса: https://tprg.ru/Mu7s

Также читайте:
— гайд по оптимизации от Google;
— чек-лист для фронтенда перед выпуском в продакшн;

#фронтенд #css

20 проектов на Vue.js с открытыми исходниками. Всё со ссылками на репозитории с кодом и на демки, которые можно потыкать: https://tprg.ru/7eKi

Пример создания приложения с использованием Vue.js: https://news.1rj.ru/str/tproger_web/171

#фронтенд #vuejs

Кроме канала про веб-разработку у нас ещё есть Типичный программист.

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

Подписывайтесь, если ещё не сделали этого: @tproger_official

Лучшие практики по кэшированию на сайте

Если совсем не париться про кэш (браузерный, конечно), то браузер постоянно будет обращаться к серверу за ресурсами. Это будет увеличивать время загрузки сайта и нагружать бэкенд. Будет ли от этого хорошо вашим пользователям и бэкендерам? Вряд ли.

В статье читайте, какие подходы к кэшированию существуют и что выбрать: https://tprg.ru/vUa4

#фронтенд #кэширование

Google Chrome, Mozilla Firefox и Cloudflare начинают поддерживать HTTP/3. С ним передача данных станет быстрее, надёжнее и безопаснее. В блоге Cloudflare читайте, чем этот протокол так крут: https://tprg.ru/jAg0

Владельцам сайтов на Cloudflare достаточно ткнуть одну кнопку в панели управления, чтобы передача данных проходила с использованием HTTP/3. Остальным придётся подключать поддержку самостоятельно.

Чтобы включить поддержку HTTP/3 в Chrome Canary, надо исполнить команду —enable-quic —quic-version=h3-23. Как это сделать, описано на сайте проекта Chromium: https://tprg.ru/hSGP

#http

История одной анимации

Однажды фронтендеру позвонил дизайнер и попросил сделать «паутинку» за запотевшим стеклом. Но потом оказалось, что это не «паутинка», а гексагональная сетка, и не за стеклом, а она уходит вдаль, и с WebGL фронтендер не знаком, а всей анимации пришлось учиться в процессе рисования.

Теперь этот фронтендер лично рассказывает, как провести одну анимацию от макета до сдачи клиенту так, чтобы все были довольны, и по дороге изучить WebGL. Также история включает в себя Three.js, GLSL, Canvas 2D, графы и немного математики.

Текстовая расшифровка: https://tprg.ru/QDMV

#фронтенд #анимация

Руководство по созданию небольшого приложения с использованием Angular и Apollo, клиентом GraphQLдля Angular: https://tprg.ru/6GHn

Только код — здесь: https://tprg.ru/pUY9

#фронтенд #angular #graphql

Эволюция создания веб-приложений на Java

История развития разработки веб-приложений на Java от появления спецификации сервлетов до настоящего времени: https://tprg.ru/NcyV

Автор восстановил хронологию появления технологий, библиотек, фреймворков и их популярность.

#java

Анимация притяжения и отталкивания частиц

В этом видео наш подписчик рассказывает, как создать интерактивный эффект притяжения и отталкивания частиц на чистом JavaScript.

Ссылка на код: https://codepen.io/ThreePixDroid/pen/JjPwEgR

Другие уроки по анимации:
— анимация хаотичных частиц;
— эффект волны;
— эффект электроразряда.

#фронтенд #javanoscript

Сборник упражнений для подготовки к сертификации разработчиков Kubernetes. Отлично подойдёт не только для подготовки к экзамену, но и просто для обучения: https://github.com/dgkanatsios/CKAD-exercises

#devops #kubernetes

Используем DOM как Pro

DOM API — это мощное и универсальное API, которое позволяет разработчику перейти на более низкоуровневое программирование и добиться при этом интересных результатов.

Рекомендуем статью, которая поможет перестать бояться DOM и начать его эффективно использовать: https://tprg.ru/PMwS

#фронтенд #javanoscript

Архитектура решений автоматизации бэкенда

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

Презентация: https://tprg.ru/hZvr

#бэкенд #тестирование

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

#фронтенд #css

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

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

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

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

#javanoscript

Онлайн-курс по 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

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

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