Большой FAQ по вхождению во фронтенд

Даёт краткое, но ёмкое направление по оптимальному изучению стека технологий, которые используются во фронтенде: https://github.com/acilsd/wrk-fet

Кратко по темам:
— что нужно знать и где учить по вёрстке;
— 9000 ссылок по JavaScript и фреймворкам;
— вопросы, которые зададут на собеседовании;
— подкасты по разработке;
— и английский язык, конечно.

#фронтенд

Сайт, особенностью которого является то, что он пишет себя сам. Вы только посмотрите: https://www.strml.net/

#фронтенд

Инфраструктура компании как продукт

Инфраструктура — это то, от чего зависит работа и прибыль IT-бизнеса. Все процессы, которые происходят с кодом, зависят от бесперебойной работы серверов, ПО, внешних сервисов. Если инфраструктура не работает как надо, бизнес теряет прибыль.

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

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

#devops

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