This media is not supported in your browser
VIEW IN TELEGRAM
Третья и завершающая часть гайда по созданию 3D-текста без JS
Мы уже с вами научились создавать текст в первой части и добавлять анимацию во второй части. Теперь же перейдём к самому крутому — добавим тексту интерактивности и динамичности. Он сможет меняться от взаимодействия с ним, например, по ховеру или клику.
Гайд ждёт вас тут.
#css #фронтенд
Мы уже с вами научились создавать текст в первой части и добавлять анимацию во второй части. Теперь же перейдём к самому крутому — добавим тексту интерактивности и динамичности. Он сможет меняться от взаимодействия с ним, например, по ховеру или клику.
Гайд ждёт вас тут.
#css #фронтенд
🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
Это вы еще в мобильную версию не заходили
😁43🤣3🫡2🤔1
Стилизация участков текста с помощью CSS Custom Highlight API
Задача по настройке внешнего вида диапазонов текста часто встречается в работе Frontend-разработчика. В этой статье мы рассмотрим стилизацию участков текста с помощью CSS Custom Highlight API, а также изучим практическую сторону создания диапазонов выделения.
#фронтенд #css
Задача по настройке внешнего вида диапазонов текста часто встречается в работе Frontend-разработчика. В этой статье мы рассмотрим стилизацию участков текста с помощью CSS Custom Highlight API, а также изучим практическую сторону создания диапазонов выделения.
#фронтенд #css
🔥7👍1
Полный разбор THIS в JavaScript за 26 минут
Этот ролик — полный гайд по
🔘
🔘
🔘
🔘 особенности
🔘
И многое другое – с объяснением и примерами.
#видео #javascript
Этот ролик — полный гайд по
this
в JS. Из него вы узнаете про:this
в глобальной области видимости (объекты Window и Global);this
в обычных функциях;this
в функциях-конструкторах;this
в стрелочных функциях;this
в forEach
и setTimeout
.И многое другое – с объяснением и примерами.
#видео #javascript
Please open Telegram to view this post
VIEW IN TELEGRAM
YouTube
Полный разбор THIS в JavaScript за 26 минут | this в стрелочных функциях, call bind apply, Window
⭐ BOOSTY – задача с собеса по THIS, конспекты-шпаргалки и другие материалы:
https://boosty.to/pomazkovjs
⭐ Поддержать донатом: https://boosty.to/pomazkovjs/single-payment/donation/500599/
Этот ролик – полный гайд по this в JS.
Из него вы узнаете про:
– this…
https://boosty.to/pomazkovjs
⭐ Поддержать донатом: https://boosty.to/pomazkovjs/single-payment/donation/500599/
Этот ролик – полный гайд по this в JS.
Из него вы узнаете про:
– this…
👍5❤4
Сложнейшая проблема компьютерных наук: центрирование
Давайте на время отложим в сторону споры о микросервисах и монолитах, о безопасности и прочих мелочах. Пора обсудить реальную проблему — цетрирование объектов. И это не шутка. Сегодня у нас куча вариантов центрирования, но даже с ними люди до сих пор лажают с этой задачей.
Почему? И как долго еще мы будем терпеть это? Что делать? Все ответы в статье.
#фронтенд
Давайте на время отложим в сторону споры о микросервисах и монолитах, о безопасности и прочих мелочах. Пора обсудить реальную проблему — цетрирование объектов. И это не шутка. Сегодня у нас куча вариантов центрирования, но даже с ними люди до сих пор лажают с этой задачей.
Почему? И как долго еще мы будем терпеть это? Что делать? Все ответы в статье.
#фронтенд
😁14👍2❤1
Что такое замыкания в 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
Пример:
function makeCounter() {
let count = 0
return function() {
count++
return count
}
}
const counter = makeCounter()
console.log(counter()) // 1
console.log(counter()) // 2
Здесь внутренняя функция получает доступ к переменной count из makeCounter, хотя та уже завершила выполнение.
Зачем нужно:
— хранить состояние между вызовами без глобальных переменных;
— создавать приватные данные;
— передавать функции с «захваченным» контекстом.
#вопросответ #javascript
🔥9👍7🤔4
Альфа-Банк разыграет 3,1 млн рублей среди лучших белых хакеров на Alfa CTF
13 и 14 сентября они посоревнуются в поиске уязвимостей. Стоит попробовать силы, даже если ещё учитесь — на турнире будет три трека. Разрабов, тестировщиков и аналитиков с опытом тоже ждут.
🤓 🤓 🤓 🤓 🤓 🤓 🤓 🤓
🤓 🤓 🤓 🤓 🤓 🤓 🤓 🤓
🤓 🤓 🤓 🤓 🤓 🤓 🤓 🤓
🤓 🤓 🤓 🤓 🤓 🤓 🤓 🤓
🤓 🤓 🤓 🤓 🤓 🤓 🤓 🤓
🤓 🤓 🤓 🤓 🤓 🤓 🤓 🤓
🤓 🤓 🤓 🤓 🤓 🤓 🤓 🤓
Если нашли битый символ на картинке — регистрируйтесь.
#фронтенд #бэкенд
13 и 14 сентября они посоревнуются в поиске уязвимостей. Стоит попробовать силы, даже если ещё учитесь — на турнире будет три трека. Разрабов, тестировщиков и аналитиков с опытом тоже ждут.
Если нашли битый символ на картинке — регистрируйтесь.
#фронтенд #бэкенд
Please open Telegram to view this post
VIEW IN TELEGRAM
👍22🔥22❤17
Forwarded from Типичный программист
Фронтендеры, несу для вас золото проверенное временем
Этот репо под завязку набит тщательно подобранными ресурсами по дизайну и пользовательскому интерфейсу: стоковые фотографии, веб-шаблоны, CSS-фреймворки, библиотеки пользовательского интерфейса, инструменты и многое другое. Всё аккуратно собрано в одном месте и разбито по категориям.
Зибирайте🤌
Этот репо под завязку набит тщательно подобранными ресурсами по дизайну и пользовательскому интерфейсу: стоковые фотографии, веб-шаблоны, CSS-фреймворки, библиотеки пользовательского интерфейса, инструменты и многое другое. Всё аккуратно собрано в одном месте и разбито по категориям.
Зибирайте
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤13🔥1
Российские Cloudflare: что выбрать для ускорения и защиты сайтов?
После ухода иностранных облачных провайдеров защита и ускорение веб-ресурсов стали насущным вопросом для e-commerce, SaaS-сервисов, госорганизаций и финтеха. Мы собрали три ключевых российских аналога Cloudflare — NGENIX, DDoS-Guard и StormWall — и сравнили их по возможностям, тарифам, особенностям и реальным кейсам.
Подробности здесь.
#безопасность
После ухода иностранных облачных провайдеров защита и ускорение веб-ресурсов стали насущным вопросом для e-commerce, SaaS-сервисов, госорганизаций и финтеха. Мы собрали три ключевых российских аналога Cloudflare — NGENIX, DDoS-Guard и StormWall — и сравнили их по возможностям, тарифам, особенностям и реальным кейсам.
Подробности здесь.
#безопасность
👎16👍4😁4💩3🤣1
Подборка бесплатных библиотек иконок для ваших проектов
Если вы ищете качественные и удобные библиотеки иконок, эти инструменты помогут создать стильный и функциональный дизайн:
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+ иконками в стиле линейного искусства. Простота интеграции и поддержка множества форматов делают её удобным выбором для веб-дизайна.
Какую ещё библиотеку нам стоило включить в подборку?
#иконки #инструменты
Если вы ищете качественные и удобные библиотеки иконок, эти инструменты помогут создать стильный и функциональный дизайн:
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+ иконками в стиле линейного искусства. Простота интеграции и поддержка множества форматов делают её удобным выбором для веб-дизайна.
Какую ещё библиотеку нам стоило включить в подборку?
#иконки #инструменты
🔥8👍3❤1
Зачем нужна эта библиотека Python в веб-разработке
Пройдите небольшое тестирование, чтобы узнать, насколько вы знакомы с Python-библиотеками и фреймворками, которые используют в веб-разработке.
Старт тут.
#квиз
Пройдите небольшое тестирование, чтобы узнать, насколько вы знакомы с Python-библиотеками и фреймворками, которые используют в веб-разработке.
Старт тут.
#квиз
🔥1
«Хватит писать try/catch вокруг fetch: история о том, как я устал ловить ошибки»
Этот мем смешной, пока не осознаешь, что в реальных проектах мы именно так и поступаем. Только заворачиваем не весь код сразу, а каждый HTTP-запрос по отдельности.
Пишешь
Библиотека
#библиотека #javascript
Этот мем смешной, пока не осознаешь, что в реальных проектах мы именно так и поступаем. Только заворачиваем не весь код сразу, а каждый HTTP-запрос по отдельности.
Пишешь
fetch
и рефлекторно добавляешь try/catch
. Где-то словил TypeError, где-то таймаут, где-то сервер вернул 500. В итоге половина кода превращается в кашу проверок, а другая половина — в обработчики ошибок. Но проблема не в том, что мы ловим ошибки. Проблема в том, что fetch
заставляет нас их ловить везде и всегда.Библиотека
safe-fetch
решает эту проблема. Её задача проста: убрать try/catch из проектов навсегда. Как это работает и какие плюсы дает — в материале.#библиотека #javascript
🔥7
SolidJS и Qwik: будущее фронтенда?
Пока два лагеря спорят о том, что лучше — React или Vue, а третий тихонько пользуется Angular, появились две тёмные лошадки, которые по всем показателям обходят старичков.
SolidJS похож на React, но без виртуального DOM. Qwik — проект создателя Angular, который предлагает работу кода без гидратации. Мы решили разобраться в их особенностях и подготовили статью с плюсами и минусами решений, а также со своим мнением и рассуждениями о их будущем.
Подробности по ссылке.
А вы что думаете?
#фронтенд #react #vue #solidjs #qwik
Пока два лагеря спорят о том, что лучше — React или Vue, а третий тихонько пользуется Angular, появились две тёмные лошадки, которые по всем показателям обходят старичков.
SolidJS похож на React, но без виртуального DOM. Qwik — проект создателя Angular, который предлагает работу кода без гидратации. Мы решили разобраться в их особенностях и подготовили статью с плюсами и минусами решений, а также со своим мнением и рассуждениями о их будущем.
Подробности по ссылке.
А вы что думаете?
#фронтенд #react #vue #solidjs #qwik
🤔7❤1👍1
Forwarded from Точка входа в программирование
Лучший гайд по HTTP для начинающих
HTTP — это ключевой протокол в Интернете. Но начинающим часто бывает сложно разобраться во всех его терминах: что за протокол, что за методы, что за клиенты и серверы?
Я нашёл один из самых понятных и простых гайдов по HTTP, который позволит вам разобраться с ним с полного нуля. Никаких сложных определений и заумных терминов! Только понятные примеры и наглядная графика. Смотрим тут.
#видео #http
HTTP — это ключевой протокол в Интернете. Но начинающим часто бывает сложно разобраться во всех его терминах: что за протокол, что за методы, что за клиенты и серверы?
Я нашёл один из самых понятных и простых гайдов по HTTP, который позволит вам разобраться с ним с полного нуля. Никаких сложных определений и заумных терминов! Только понятные примеры и наглядная графика. Смотрим тут.
#видео #http
YouTube
Лучший Гайд по HTTP для Начинающих за 25 Мин с Нуля
HTTP - это ключевой протокол в Интернете, но начинающим бывает сложно разобраться во всех его терминах: что за протокол, что за методы, что за клиенты и серверы?
Я подготовил лучший гайд по HTTP, который позволит тебе разобраться с ним с полного нуля. Никаких…
Я подготовил лучший гайд по HTTP, который позволит тебе разобраться с ним с полного нуля. Никаких…
💩5🤩3
Что такое всплытие в JavaScript?
Пишите свой вариант в комментах, а потом читайте спойлер.
Всплытие событий в JavaScript — это фаза обработки, когда событие, возникшее на элементе, автоматически поднимается вверх по дереву DOM к его родителям вплоть до document и window.
Например, если кликнуть на кнопку внутри div, сначала событие сработает на кнопке, затем на div, потом на body и так далее. Это позволяет использовать делегирование событий: вместо того чтобы вешать обработчик на каждую кнопку, можно повесить один на контейнер и обрабатывать клики через event.target .
Если нужно остановить всплытие, используется метод event.stopPropagation().
#вопросответ
Пишите свой вариант в комментах, а потом читайте спойлер.
Например, если кликнуть на кнопку внутри div, сначала событие сработает на кнопке, затем на div, потом на body и так далее. Это позволяет использовать делегирование событий: вместо того чтобы вешать обработчик на каждую кнопку, можно повесить один на контейнер и обрабатывать клики через
Если нужно остановить всплытие, используется метод event.stopPropagation().
#вопросответ
👍6🔥2❤1
Делегирование событий в JavaScript: когда обычного всплытия недостаточно
По мере роста фронтенд-приложений управление пользовательскими взаимодействиями становится все более важным. Добавление обработчика событий на каждый интерактивный элемент — плохая практика: это усложняет код, увеличивает расход памяти и снижает производительность. Здесь на помощь приходит делегирование событий (event delegation).
Для разработчиков современных веб-приложений понимание делегирования событий — не просто полезный навык, а жизненно важная необходимость. Поэтому рекомендую прочитать эту статью.
#javascript
По мере роста фронтенд-приложений управление пользовательскими взаимодействиями становится все более важным. Добавление обработчика событий на каждый интерактивный элемент — плохая практика: это усложняет код, увеличивает расход памяти и снижает производительность. Здесь на помощь приходит делегирование событий (event delegation).
Для разработчиков современных веб-приложений понимание делегирования событий — не просто полезный навык, а жизненно важная необходимость. Поэтому рекомендую прочитать эту статью.
#javascript
👍4🤔3❤1