OffscreenCanvas в JavaScript: разгоняем графику до максимума

OffscreenCanvas — это API, которое позволяет рендерить графику в отдельном потоке Worker, не блокируя основной поток, где обрабатывается интерфейс. Технически это достигается за счёт разделения UI и вычислений.

В этой статье вы узнаете зачем он нужен и как правильно его использовать. Уже пробовали?

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

BigDevSoon — полезный тренажёр для фронтендеров с большой коллекцией челленджей и проектов

На платформе собрано 100 челленеджей на каждый день. Каждый отличается по сложности и по тому, какие скиллы помогает прокачать. А ещё здесь готовые идеи проектов. Каждый проект разбит на отдельные карточки, которые позволяют разделить проект на отдельные части для последовательной разработки.

Начать можно бесплатно, есть и платные тарифы, дающие больше возможностей. Если хотите отточить навыки и в комфортной среде изучить веб-разработку, то переходите по ссылке.

#тренажёры

Совет для React-разработчиков: старайтесь избегать множества вложений провайдеров в React

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

#react #советы

Техно-город из нашего виммельбуха продолжает готовиться к Новому Году!

На городской ёлке зажглись яркие огни, а улицы осветились блеском гирлянд и фонарей. Пока одни бегают в поисках подарков любимым, другие усердно доделывают важные задачи до конца года. В общем, что говорить, скорее открывайте третью главу и увидьте всё своими глазами: https://tprg.ru/nVBh

Игры для дизайнера: как прокачать перо (кривые Безье), как кернить буквы и другие полезности

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

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

Смотрите видео и выбирайте понравившиеся сервисы. Для вашего удобства мы ещё и тайм-коды по сервисам оставим:

00:00 - bezier.method.ac
07:43 - type.method.ac
10:30 - shape.method.ac
11:28 - betterwebtype.com/triangle
14:53 - boolean.method.ac
16:32 - pixact.ly
17:08 - game.ioxapp.com/eye-test
18:35 - kolor.moro.es
19:14 - color.method.ac
20:55 - cantunsee.space
28:36 - userinyerface.com

#дизайн #видео

Запросы на сервер. Fetch, XMLHttpRequest (XHR), Ajax

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

#javascript #видео

Придумайте подпись в комментариях

Современные способы управления контентом

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

В этой статье разбираются:

— современные методы создания аккордеонов и подсказок;
— как использовать элементы <details> и <dialog> для улучшения UX;
— почему минимализм в веб-разработке сегодня так важен.

Подробности: https://css-tricks.com/the-different-and-modern-ways-to-toggle-content/

#фронтенд #css

Perspective Loader на чистом CSS

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

Пользователь CodePen решил повторить его во фронтенде и сделал анимацию, которая работает исключительно на HTML и CSS.

Посмотреть код можно здесь:
https://codepen.io/jh3y/pen/xxWdOQy

#codepen #css

HellPot | Бесконечный honeypot для HTTP-ботов

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

Цена: бесплатно  
Репозиторий проекта

⚡ — актуально
🗿 — Бог миловал

@prog_tools

Vite 6.0: Новые возможности и будущее веб-разработки

26 ноября вышла новая мажорная версия Vite, которая принесла много нового. Например:

1. новое экспериментальное API для переменных окружения;
2. обновление поддержки версий Node.js;
3. значение по умолчанию для resolve.conditions;
4. JSON stringify;
5. расширенная поддержка ссылок на ассеты в элементах HTML;
6. postcss-load-config;
7. Sass теперь использует modern API по умолчанию;
8. кастомизация CSS названий файлов на выходе в library mode.

Более подробно о каждом обновлении в статье.

#новости #vite