Какой код в браузере правильно выводит значение глобальной переменной 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
Media is too big
VIEW IN TELEGRAM
Golden Dust Text Reveal Animation
В этом видео создается анимация появления текста на CSS.
👉 @seniorFront
В этом видео создается анимация появления текста на CSS.
👉 @seniorFront
❤1🔥1
Find numbers with 3 divisors
Ваша задача — написать функцию, которая принимает два целых числа n, m и возвращает отсортированный массив всех целых чисел от n до m включительно, имеющих всего 3 делителя (без учета 1 и самого числа).
Пример:
👉 @seniorFront
Ваша задача — написать функцию, которая принимает два целых числа n, m и возвращает отсортированный массив всех целых чисел от n до m включительно, имеющих всего 3 делителя (без учета 1 и самого числа).
Пример:
solution(2, 20) -> [16] // У 16 три делителя - 2, 4, 8
👉 @seniorFront
👍4❤2
Как вернуть энергию и интерес
В этой статье автор постарался честно и вдумчиво проанализировать свой опыт выгорания и последующего восстановления нормального уровня энергии. Если что-то упустил, спрашивайте в комментариях.
👉 @seniorFront
В этой статье автор постарался честно и вдумчиво проанализировать свой опыт выгорания и последующего восстановления нормального уровня энергии. Если что-то упустил, спрашивайте в комментариях.
👉 @seniorFront
👍3
Как создать объект, не имеющий прототипа?
В JavaScript объекты обычно наследуют свойства и методы от своих прототипов. Однако, существует несколько способов создания объекта без прототипа:
Использование Object.create(null): Метод Object.create(null) создает новый объект с указанным прототипом null, что означает, что объект не будет наследовать свойства и методы от какого-либо прототипа.
Использование литерала объекта и null в качестве прототипа: Можно создать объект, используя литерал объекта и установив его прототип в null.
Использование функции-конструктора без прототипа: Можно создать функцию-конструктор, которая не имеет прототипа, и создать объект с помощью этой функции.
Обратите внимание, что объекты без прототипа могут быть полезны в определенных случаях, но они также могут ограничивать функциональность и использование стандартных методов и свойств. Поэтому рекомендуется использовать объекты без прототипа с осторожностью и только в случаях, когда это действительно необходимо.
👉 @seniorFront
В JavaScript объекты обычно наследуют свойства и методы от своих прототипов. Однако, существует несколько способов создания объекта без прототипа:
Использование Object.create(null): Метод Object.create(null) создает новый объект с указанным прототипом null, что означает, что объект не будет наследовать свойства и методы от какого-либо прототипа.
const obj = Object.create(null);
console.log(obj.toString); // Вывод: undefined
Использование литерала объекта и null в качестве прототипа: Можно создать объект, используя литерал объекта и установив его прототип в null.
const obj = Object.setPrototypeOf({}, null);
console.log(obj.toString); // Вывод: undefined
Использование функции-конструктора без прототипа: Можно создать функцию-конструктор, которая не имеет прототипа, и создать объект с помощью этой функции.
function NoPrototype() {
// Пустая функция-конструктор без прототипа
}
const obj = new NoPrototype();
console.log(obj.toString); // Вывод: undefined
Обратите внимание, что объекты без прототипа могут быть полезны в определенных случаях, но они также могут ограничивать функциональность и использование стандартных методов и свойств. Поэтому рекомендуется использовать объекты без прототипа с осторожностью и только в случаях, когда это действительно необходимо.
👉 @seniorFront
👍8❤1