​Начало работы с Webpack

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

Здесь вы можете познакомиться с Webpack подробнее:

https://tprg.ru/9X0K

#webpack

Как создать приложение для геокодирования на Vue.js с помощью Mapbox

С помощью геокодирования можно преобразовывать текстовые местоположения в географические координаты и наоборот.

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

https://tprg.ru/NYb9

#vue

​Как использовать Svelte Kit с Tailwind CSS для своевременной компиляции

Давайте выжмем максимум из вашего следующего проекта! В этой статье вы узнаете, как настроить проект с использованием последних версий Svelte и Tailwind:

https://tprg.ru/HiZy

#svelte #tailwind

Осталось на коньки встать

iPod.js — веб-версия легендарного плеера с авторизацией через Spotify и Apple Music

В своё время многие мечтали об iPod Classic, но не могли себе позволить. Сейчас у вас появилась возможность попробовать iPod в деле, благодаря проекту iPod.js, который с большой точностью воспроизводит оригинальное устройство. Тут даже знаменитое сенсорное колёсико Click Wheel работает, а ещё есть пасхалки и даже игра!

Подробнее в нашей статье:

https://tprg.ru/GFof

#javascript

8 бесплатных JavaScript-библиотек анимации: работа с текстом, SVG и геометрическими фигурами

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

Посмотрите сами:

https://tprg.ru/pzk6

#javascript

​Анонсирован React 18

На днях анонсировали разработку восемнадцатой по счёту версии библиотеки React. В грядущем обновлении появится большое количество новых возможностей. Появится новый Root API, который заменит в том числе привычную функцию render, также появится параллельный рендеринг и многое другое.

Подробности:

https://tprg.ru/Vg4v

#react

​Разбор вопросов на собеседовании на фронтенд-разработке

Если вы готовитесь к интервью на фронтенд-разработчика, то серия роликов с разбором популярных вопросов по фронтенду может вам помочь:

https://tprg.ru/W8c1

#фронтенд #веб

Полное руководство по виртуальному DOM React

React использует реактивность при работе с DOM, что позволяет на лету обновлять данные страницы без необходимости её перезагрузки. Это знает каждый, кто изучал или изучает React. Но вы знаете, как именно работает этот механизм?

Это сложный, но интересный механизм, который позволяет нам сегодня видеть многие сайты такими, какие они есть. И об этом механизме подробно рассказано здесь:

https://tprg.ru/xDOT

#react

​Альтернативы Redux в 2021 году

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

Вы можете использовать Redux по-старинке, а можете прочитать эту статью и открыть для себя что-то новое и, возможно, более подходящее:

https://tprg.ru/UQMs

#redux

Вертикальный слайдер

Слайдер может быть и такой. Посмотрите, как интересно выглядит этот слайдер, который составляет новое изображение с помощью нескольких вертикальных полос.

Проект сделан с использованием LESS и JavaScript, а переключаться можно как с помощью нажатия курсором на стрелки, так и с помощью клавиатуры.

Познакомиться с проектом поближе можно тут:

https://tprg.ru/LxuI

#codepen

Расширение CSS Peeper

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

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

https://tprg.ru/URBT

#css #chrome

«Тебе практика, а мне польза. Я про тебя ещё знакомым расскажу!»

Избегайте ловушки кеша при обслуживании приложения Angular

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

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

https://tprg.ru/xRtK

#angular

​«Ваше изображение, вероятно, не декоративное»

Но если это так, то вы уверены, что у него присутствует альтернативное описание? А правильное ли оно?

Сегодня уже практически не используются изображения в дизайне сайтов, как это было раньше — всё можно сделать с помощью CSS. Поэтому тогда было необходимо существование механизма обнуления картинки. Теперь всё иначе. Посмотрите, как отголоски прошлого могут негативно влиять на работу сайта:

https://tprg.ru/9cW0

#css

Лучшие практики стилизованных компонентов React

Преимущество стилизованных компонентов в том, что там хранится вся логика, структура и стили конкретного элемента. Но подходить к созданию таких компонентов можно по-разному и поэтому важно знать лучшие практики, чтобы вы могли без проблем работать в команде над общим проектом:

https://tprg.ru/6Wba

#css #react

​CSS анимация по заданной траектории

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

https://tprg.ru/gtON

#css

​Ссыл­ка для ска­чи­ва­ния

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

В этой статье вы узнаете, как работать с такими ссылками, а также бонусом, как сохранить на лету JPEG файл из WebP или AVIF формата, используя Canvas:

https://tprg.ru/JLlY