Переход к «Meta GSAP»: поиски «идеальной» бесконечной прокрутки

Работали когда-нибудь с JS-библиотекой GSAP?

В этой статье автор предлагает создать удобную бесконечную горизонтальную прокрутку, используя эту библиотеку:

https://tprg.ru/f48N

#фронтенд #javascript

Сеть контейнеров — это не сложно

На первый взгляд тема контейнеров может показаться сложной и не понятной. По факту же контейнеры — это, по сути, изолированные процессы Linux. Они позволяют разбить логику приложения на отдельные элементы, которые взаимодействуют друг с другом.

В этой статье вы узнаете, как виртуализировать сетевые ресурсы, создать сеть контейнеров, которые будут взаимодействовать друг с другом, но при этом не будут мешать и так далее:

https://tprg.ru/Hhv1

#devops #kubernetes

​Как очистить асинхронные эффекты в React

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

https://tprg.ru/uqE9

#react

​Kubernetes-in-Kubernetes и ферма серверов с загрузкой по PXE

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

Как и зачем использовать такой приём читайте в статье:

https://tprg.ru/5H6Q

#devops #kubernetes

Область видимости и цепочка областей видимости в Javascript

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

Как тут не запутаться и уметь правильно определить область видимости читайте в статье:

https://tprg.ru/IGsJ

#javascript

Библиотеки для React в 2021

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

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

https://tprg.ru/o80h

#react

​Почему стоит использовать тег <picture> вместо <img>

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

Для решения этой задачи существуют различные способы и теги. В этой статье расскажут об HTML-тегах <picture> и <img> и их особенностях:

https://tprg.ru/hyP2

А что предпочитаете использовать вы и почему?

#фронтенд #html

Создайте спутниковый трекер с нуля на 30 строках JavaScript

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

https://tprg.ru/3qRk

Курсы для разработчиков

— Курс «Веб-разработчик»
Старт 9 июня, онлайн, по расписанию

Научитесь программировать на JavaScript и PHP, создавать сайты, приложения и интернет-магазины. Пройдёте дополнительные и бонусные курсы, соберёте портфолио из реальных проектов и получите помощь в трудоустройстве.

— Курс «Python для веб-разработки»
Старт 11 июня, онлайн, свободный темп

За 9 месяцев изучите 20+ инструментов и технологий, выполните 7 реальных проектов и сможете стать Fullstack-разработчиком на Python уровня Junior+ в компании или на фрилансе.

— Курс «Fullstack-разработчик на JavaScript»
Старт 21 июня, онлайн, по расписанию

За 1,5 года научитесь программировать на Python и JavaScript, соберёте портфолио из реальных проектов и подготовитесь к трудоустройству при поддержке карьерного центра SkillFactory.

— Курс «JavaScript для начинающих»
Постоянный доступ, онлайн, свободный темп

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

— Курс «Профессия UX/UI-дизайнер»
Постоянный доступ, онлайн, свободный темп

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

— Курс «Веб-вёрстка»
Постоянный доступ, онлайн, свободный темп

Научитесь создавать быстрые и удобные сайты за полгода. Сверстаете лендинг и несколько страниц интернет-магазина в рамках дипломного проекта и добавите их в портфолио. В финале получите диплом об окончании курса.

#ивенты

Vuestic UI — библиотека компонентов для Vue.js

В этой открытой и бесплатной библиотеки на сегодняшний день уже более 50 настраиваемых компонентов, которые полностью совместимы с Vue.js 3. Библиотека поддерживает самые популярные браузеры крайне проста в установке и использовании.

Подробнее можно узнать здесь:

https://tprg.ru/EXYz

#фронтенд #vue

UI? Какой UI?

Кнопка загрузки

Интересная кнопка загрузки, которая анимирована с использованием SVG-изображений. Из особенностей это минимальное использование JS и просто приятный внешний вид.

Ткнуть самому и изучить код можно тут:

https://tprg.ru/Aypt

#codepen

Проблемы доступности веб-форм

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

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

https://tprg.ru/8bHP

#фронтенд

Работа с TypeScript: практическое руководство для разработчиков

Предлагаем вам поближе познакомиться с TypeScript — строго типизированной версией JavaScript, которая сегодня используется во множестве различные проектов.

В этом руководстве вы узнаете как установить и настроить TypeScript, а также познакомитесь с возможностями TS:

https://tprg.ru/1rY6

#typescript

​Вышел Notepad++ 8 — первое крупное обновление редактора за пять лет

В новой версии добавили поддержку ARM64-архитектуры, а также новые иконки в панели инструментов (ну прям ВАУ, конечно), а также пофиксили ряд имеющихся проблем.

Подробнее об изменениях и нововведениях читайте в статье:

https://tprg.ru/9k36

​Притяжение и отталкивание частиц на JavaScript

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

Подробнее тут:

https://tprg.ru/Yc61

#видео #javascript

​Google: Сторонние cookies небезопасны! Мы придумали новый безопасный способ сбора данных — FLoC!

Тем временем FLoC:

Представлен Angular DevTools

Недавно для Angular появился DevTools, который можно установить в виде расширения для Chrome и получить новый опыт отладки вашего Angular проекта.

Подробнее об инструменте рассказывает один из его разработчиков:

https://tprg.ru/WdfZ

#angular

Практическое введение в Svelte

В этом руководстве вы узнаете о том, что такое Svelte, познакомитесь с его основными концепциями и синтаксисом, а ещё сможете создать первое небольшое приложение на нём:

https://tprg.ru/9xXQ

#svelte

​JavaScript API для распознавания людей и ботов в Chrome

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

Но появился новый способ, который поможет исправить эту ситуацию. Называется он Privacy Pass и вот как он работает:

https://tprg.ru/CjVH

Игра Stack на Three.js и Cannon.js

Версия игры Stack, выполненная на JavaScript с использованием библиотек Three.js и Cannon.js.

Попробовать поставить рекорд и изучить код можно тут:

https://tprg.ru/oWxP

#codepen