Третья и завершающая часть гайда по созданию 3D-текста без JS

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

Гайд ждёт вас тут.

#css #фронтенд

Это вы еще в мобильную версию не заходили

Стилизация участков текста с помощью CSS Custom Highlight API

Задача по настройке внешнего вида диапазонов текста часто встречается в работе Frontend-разработчика. В этой статье мы рассмотрим стилизацию участков текста с помощью CSS Custom Highlight API, а также изучим практическую сторону создания диапазонов выделения.

#фронтенд #css

Сложнейшая проблема компьютерных наук: центрирование

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

Почему? И как долго еще мы будем терпеть это? Что делать? Все ответы в статье.

#фронтенд

Что такое замыкания в JavaScript?

Замыкание в JavaScript — это функция, которая «помнит» свою внешнюю область видимости, даже если она выполняется вне неё.

Пример:

function makeCounter() {
let count = 0
return function() {
count++
return count
}
}

const counter = makeCounter()
console.log(counter()) // 1
console.log(counter()) // 2

Здесь внутренняя функция получает доступ к переменной count из makeCounter, хотя та уже завершила выполнение.

Зачем нужно:

— хранить состояние между вызовами без глобальных переменных;
— создавать приватные данные;
— передавать функции с «захваченным» контекстом.

#вопросответ #javascript

Российские Cloudflare: что выбрать для ускорения и защиты сайтов?

После ухода иностранных облачных провайдеров защита и ускорение веб-ресурсов стали насущным вопросом для e-commerce, SaaS-сервисов, госорганизаций и финтеха. Мы собрали три ключевых российских аналога Cloudflare — NGENIX, DDoS-Guard и StormWall — и сравнили их по возможностям, тарифам, особенностям и реальным кейсам.

Подробности здесь.

#безопасность

Подборка бесплатных библиотек иконок для ваших проектов

Если вы ищете качественные и удобные библиотеки иконок, эти инструменты помогут создать стильный и функциональный дизайн:

Iconoir — коллекция из более чем 1500 иконок, поддерживающая работу с React, Vue и Flutter. Благодаря SVG и JSX легко адаптируется для разных платформ.

Phosphor Icons — библиотека с более чем 9000 иконок в разных стилях и весах. Pixel-perfect дизайн делает её подходящей для профессиональных решений.

Material Icons — классика Material Design с 2100+ иконками в разных форматах и стилях. Подходит для универсальных и лаконичных интерфейсов.

Bootstrap Icons — официальная библиотека Bootstrap с 2000+ иконками. Универсальный выбор благодаря поддержке SVG, PNG и других форматов.

Feather Icons — минималистичная коллекция из 280+ иконок, созданная для современных интерфейсов. Простота и элегантность — её главные черты.

Octicons — иконки от GitHub с простым дизайном, которые подходят для интерфейсов разработчиков. Отличный выбор для веб-платформ.

Heroicons — набор из 450+ иконок в двух стилях: контурном и с заливкой. Чистый и современный внешний вид гарантирует стильный дизайн.

Lineicons — современная библиотека с 500+ иконками в стиле линейного искусства. Простота интеграции и поддержка множества форматов делают её удобным выбором для веб-дизайна.


Какую ещё библиотеку нам стоило включить в подборку?

#иконки #инструменты

Фулл — это какой-то фреймворк от PornHub? Какие там подводные камни? А узкие места?

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

Зачем нужна эта библиотека Python в веб-разработке

Пройдите небольшое тестирование, чтобы узнать, насколько вы знакомы с Python-библиотеками и фреймворками, которые используют в веб-разработке.

Старт тут.

#квиз

«Хватит писать try/catch вокруг fetch: история о том, как я устал ловить ошибки»

Этот мем смешной, пока не осознаешь, что в реальных проектах мы именно так и поступаем. Только заворачиваем не весь код сразу, а каждый HTTP-запрос по отдельности.

Пишешь fetch и рефлекторно добавляешь try/catch. Где-то словил TypeError, где-то таймаут, где-то сервер вернул 500. В итоге половина кода превращается в кашу проверок, а другая половина — в обработчики ошибок. Но проблема не в том, что мы ловим ошибки. Проблема в том, что fetch заставляет нас их ловить везде и всегда.

Библиотека safe-fetch решает эту проблема. Её задача проста: убрать try/catch из проектов навсегда. Как это работает и какие плюсы дает — в материале.

#библиотека #javascript

SolidJS и Qwik: будущее фронтенда?

Пока два лагеря спорят о том, что лучше — React или Vue, а третий тихонько пользуется Angular, появились две тёмные лошадки, которые по всем показателям обходят старичков.

SolidJS похож на React, но без виртуального DOM. Qwik — проект создателя Angular, который предлагает работу кода без гидратации. Мы решили разобраться в их особенностях и подготовили статью с плюсами и минусами решений, а также со своим мнением и рассуждениями о их будущем.

Подробности по ссылке.

А вы что думаете?

#фронтенд #react #vue #solidjs #qwik

Лучший гайд по HTTP для начинающих

HTTP — это ключевой протокол в Интернете. Но начинающим часто бывает сложно разобраться во всех его терминах: что за протокол, что за методы, что за клиенты и серверы?

Я нашёл один из самых понятных и простых гайдов по HTTP, который позволит вам разобраться с ним с полного нуля. Никаких сложных определений и заумных терминов! Только понятные примеры и наглядная графика. Смотрим тут.

#видео #http

Что такое всплытие в JavaScript?

Пишите свой вариант в комментах, а потом читайте спойлер.

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

Например, если кликнуть на кнопку внутри div, сначала событие сработает на кнопке, затем на div, потом на body и так далее. Это позволяет использовать делегирование событий: вместо того чтобы вешать обработчик на каждую кнопку, можно повесить один на контейнер и обрабатывать клики через event.target.

Если нужно остановить всплытие, используется метод event.stopPropagation().

#вопросответ

Разве JS не лучший язык программирования? За что его ненавидеть?

Делегирование событий в JavaScript: когда обычного всплытия недостаточно

По мере роста фронтенд-приложений управление пользовательскими взаимодействиями становится все более важным. Добавление обработчика событий на каждый интерактивный элемент — плохая практика: это усложняет код, увеличивает расход памяти и снижает производительность. Здесь на помощь приходит делегирование событий (event delegation).

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

#javascript