This media is not supported in your browser
VIEW IN TELEGRAM
Heart Like - Jump!
Иконка сделана из SVG, а также дополнительных div, стилизованных и анимированных в SCSS.
👉 @seniorFront
Иконка сделана из SVG, а также дополнительных div, стилизованных и анимированных в SCSS.
👉 @seniorFront
👍6
Media is too big
VIEW IN TELEGRAM
Animating Button Text
В этом видео создается кнопка с текстом, анимируемым при наведении на JS.
👉 @seniorFront
В этом видео создается кнопка с текстом, анимируемым при наведении на JS.
👉 @seniorFront
👍4
This media is not supported in your browser
VIEW IN TELEGRAM
Interactive Gradient & Glassmorphism with noise
Движущийся градиент - это SVG картинка, анимируемая в JS при движении мыши.
👉 @seniorFront
Движущийся градиент - это SVG картинка, анимируемая в JS при движении мыши.
👉 @seniorFront
❤14👍4
Какой код в браузере правильно выводит значение глобальной переменной a, объявленной как var a = 5?
Anonymous Quiz
56%
alert(window.a)
17%
alert(global.a)
22%
alert(this.a)
5%
alert(html.a)
🤔11👍4
Нужно развернуть приложения быстрее? С Облаком Рег.ру это возможно!
Мы предлагаем мгновенный запуск сервисов, линейку процессоров от мощных до очень мощных ( включая AMD EPYC и высокочастотные E2388), управление через панель или API. С нашими готовыми образами для Docker и GitLab вы сможете начать работу в несколько кликов.
Присоединяйтесь к нашему каналу, чтобы узнать, как облако Рег.ру помогает в разработке, и быть в курсе актуальных IT-новостей.
Реклама. ООО «Регистратор доменных имен РЕГ.РУ». ИНН 7733568767 erid:2VtzqwAzDNA
Мы предлагаем мгновенный запуск сервисов, линейку процессоров от мощных до очень мощных ( включая AMD EPYC и высокочастотные E2388), управление через панель или API. С нашими готовыми образами для Docker и GitLab вы сможете начать работу в несколько кликов.
Присоединяйтесь к нашему каналу, чтобы узнать, как облако Рег.ру помогает в разработке, и быть в курсе актуальных IT-новостей.
Реклама. ООО «Регистратор доменных имен РЕГ.РУ». ИНН 7733568767 erid:2VtzqwAzDNA
Media is too big
VIEW IN TELEGRAM
Cursor In & Out Ripple Effect
В этом видео создается эффект, следующий за курсором при наведении на карточку на CSS и JS.
👉 @seniorFront
В этом видео создается эффект, следующий за курсором при наведении на карточку на CSS и JS.
👉 @seniorFront
👍1
Vowel one
Вам дана строка из гласных и согласных букв, а также спецсимволов. Создайте функцию, которая трансформирует гласные буквы в 1, а все остальные символы в 0.
Примеры:
👉 @seniorFront
Вам дана строка из гласных и согласных букв, а также спецсимволов. Создайте функцию, которая трансформирует гласные буквы в 1, а все остальные символы в 0.
Примеры:
vowelOne( "abceios" ) // "1001110"
vowelOne( "aeiou, abc" ) // "1111100100"👉 @seniorFront
👍1
HTML и CSS ошибки, влияющие на доступность
я снова пришёл к вам с практическими советами про доступность вместе с Ильёй. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья — мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.
В этой статье рассматриваются следующие аспекты:
- какие сюрпризы есть при использовании свойства display;
- о чём нужно помнить при вёрстке кнопки «Показать пароль»;
- зачем нужны подсказки с помощью атрибута aria-label при разметке областей навигации;
- как можно переборщить с заголовками и какие проблемы будут.
👉 @seniorFront
я снова пришёл к вам с практическими советами про доступность вместе с Ильёй. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья — мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.
В этой статье рассматриваются следующие аспекты:
- какие сюрпризы есть при использовании свойства display;
- о чём нужно помнить при вёрстке кнопки «Показать пароль»;
- зачем нужны подсказки с помощью атрибута aria-label при разметке областей навигации;
- как можно переборщить с заголовками и какие проблемы будут.
👉 @seniorFront
❤8
Дерево DOM
Основным инструментом работы и динамических изменений на странице является DOM (Document Object Model) — объектная модель, используемая для XML/HTML-документов.
Согласно DOM-модели, документ является иерархией, деревом.
Каждый HTML-тег образует узел дерева с типом «элемент». Вложенные в него теги становятся дочерними узлами. Для представления текста создаются узлы с типом «текст».
Проще говоря, DOM — это представление документа в виде дерева тегов, доступное для изменения через JavaScript.
Построим, для начала, дерево DOM для следующего документа.
В этом дереве выделено два типа узлов.
1. Теги образуют узлы-элементы (element node) DOM-дерева. Естественным образом одни узлы вложены в другие.
2. Текст внутри элементов образует текстовые узлы. Текстовый узел содержит исключительно строку текста и не может иметь потомков.
DOM нужен для того, чтобы манипулировать страницей — читать информацию из HTML, создавать и изменять элементы. Фактически, DOM предоставляет возможность делать со страницей всё, что угодно.
👉 @seniorFront
Основным инструментом работы и динамических изменений на странице является DOM (Document Object Model) — объектная модель, используемая для XML/HTML-документов.
Согласно DOM-модели, документ является иерархией, деревом.
Каждый HTML-тег образует узел дерева с типом «элемент». Вложенные в него теги становятся дочерними узлами. Для представления текста создаются узлы с типом «текст».
Проще говоря, DOM — это представление документа в виде дерева тегов, доступное для изменения через JavaScript.
Построим, для начала, дерево DOM для следующего документа.
<html>
<head>
<title>О лосях</title>
</head>
<body>
Правда о лосях
</body>
</html>
В этом дереве выделено два типа узлов.
1. Теги образуют узлы-элементы (element node) DOM-дерева. Естественным образом одни узлы вложены в другие.
2. Текст внутри элементов образует текстовые узлы. Текстовый узел содержит исключительно строку текста и не может иметь потомков.
DOM нужен для того, чтобы манипулировать страницей — читать информацию из HTML, создавать и изменять элементы. Фактически, DOM предоставляет возможность делать со страницей всё, что угодно.
👉 @seniorFront
👍10❤1
This media is not supported in your browser
VIEW IN TELEGRAM
Animated Weather Card
Отображаемые параметры, а также стили разных экранов задаются через JS. Дождь и снег сделаны при помощи библиотеки Particles.js
👉 @seniorFront
Отображаемые параметры, а также стили разных экранов задаются через JS. Дождь и снег сделаны при помощи библиотеки Particles.js
👉 @seniorFront
👍16👎2
CSS-классы: отживший свой век инструмент?
В этой статье автор утверждает, что использование CSS-классов - это архаичный подход, который уже не подходит для современных веб-разработок.
Почему?
• Ограничения: Классы появились в те времена, когда веб был в зачаточном состоянии, и не мог похвастаться современными решениями.
• Негибкость: Классы не позволяют эффективно описывать сложные состояния и параметры элементов.
• Комбинаторный взрыв: Избыточное использование классов приводит к появлению огромного количества комбинаций, что усложняет поддержку и расширение проекта.
Автор предлагает задуматься над альтернативными решениями, которые предлагают более гибкие и функциональные инструменты.
Что думаете вы? Делитесь своим мнением в комментариях!
👉 @seniorFront
В этой статье автор утверждает, что использование CSS-классов - это архаичный подход, который уже не подходит для современных веб-разработок.
Почему?
• Ограничения: Классы появились в те времена, когда веб был в зачаточном состоянии, и не мог похвастаться современными решениями.
• Негибкость: Классы не позволяют эффективно описывать сложные состояния и параметры элементов.
• Комбинаторный взрыв: Избыточное использование классов приводит к появлению огромного количества комбинаций, что усложняет поддержку и расширение проекта.
Автор предлагает задуматься над альтернативными решениями, которые предлагают более гибкие и функциональные инструменты.
Что думаете вы? Делитесь своим мнением в комментариях!
👉 @seniorFront
👎31🤔7👍3
Canon TDD
В этой статье автор приводит вредные советы относительно того, как нужно делать TDD. Берите ответственность за качество своей работы на себя так, как вам удобно, если только вы действительно берёте на себя эту ответственность.
👉 @seniorFront
В этой статье автор приводит вредные советы относительно того, как нужно делать TDD. Берите ответственность за качество своей работы на себя так, как вам удобно, если только вы действительно берёте на себя эту ответственность.
👉 @seniorFront
👍2🤔2👎1
Media is too big
VIEW IN TELEGRAM
How to Animate Image on Scroll
В этом видео создается анимация "разрушения" картинки при прокрутке на чистом JS.
👉 @seniorFront
В этом видео создается анимация "разрушения" картинки при прокрутке на чистом JS.
👉 @seniorFront
This media is not supported in your browser
VIEW IN TELEGRAM
Min Max Range Slider
Логика работы слайдера реализована в JS. Стилизовано и анимировано в CSS.
👉 @seniorFront
Логика работы слайдера реализована в JS. Стилизовано и анимировано в CSS.
👉 @seniorFront
👍8🤔3
Как ключи (keys) помогают оптимизировать процесс React Reconciliation?
Anonymous Quiz
32%
Они используются для идентификации элементов в DOM, что позволяет React находить и обновлять их
41%
Они позволяют избежать ненужного перестроения DOM, сравнивая только элементы, которые были изменены
21%
Ключи помогают React отслеживать состояние компонентов и обновлять их только при необходимости
6%
Они используются для управления потоком данных между компонентами для оптимизации процесса рендера
👍4