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
This media is not supported in your browser
VIEW IN TELEGRAM
Gravity Points
Реализовано на canvas и чистом JS. Также есть возможность настройки количества частиц.
👉 @seniorFront
Реализовано на canvas и чистом JS. Также есть возможность настройки количества частиц.
👉 @seniorFront
🔥15❤2
Архитектура фронтенда и какой она должна быть
Все мы знаем про, или слышали про практики и паттерны проектирования SOLID, GRASP, MVC, MV** и даже применяем их с переменным успехом, стараясь нащупать эффективный подход к построению приложений. Но это лишь приводит к разнообразию реализаций наших приложений и частей функционала.
И поэтому я уже долгое время пытаюсь понять по каким правилам должно строиться фронтенд приложение чтобы оно удовлетворяло следующим критериям:
- легкое расширение функционала приложения;
- безболезненное внесение изменений в существующий функционал;
- унифицированная структура приложения;
- быстрый onboarding новых разработчиков на проект;
- понятный и прозрачный код;
- всегда понятно где в структуре файлов расположить ту или иную функциональность.
Domain Driven Design
Много умных дядек, таких как Мартин Фаулер и дядюшка Боб, написали много статей про него. На бэкенде в больших и сложных проектах он неплохо себя зарекомендовал. Но есть и много изъянов: туча абстракций, для простых действий нужно писать много кода, ну и разобраться, как готовить DDD та еще задача.
Есть примеры как готовить это на фронте, но, как видно, проблемы никуда не уходят и кол-во абстракций удручают.
Основательная статья от Кхалила Стеммлера о возможной архитектуре клиентских приложений частично полагается на DDD подход, но при этом сильно его упрощает, освобождая нас от ненужных абстракций и смещая понятия в сторону фронт приложений.
Но бизнес логика в таких приложениях немного размывается и подход больше сфокусирован на функциональных слоях приложения, что отдаляет нас от требования к прозрачному коду и явной бизнес логики.
Джимми Богарт в своей статье пишет что DDD подход не совершенен и избыточен, и, как следствие, он предлагает переработанный подход vertical slices. И это отличный подход, о котором стоит почитать отдельно. Эта идея довольно простая и мы можем адаптировать ее к фронтенд приложениям.
Clear architecture
Также есть попытки следовать всем постулатам чистой архитектуры и абстрагироваться от представления совсем. В этом случае мы сможем подменять view на любой фреймворк или вообще отказаться от его использования. Интересный подход и в некоторых случаях вполне обоснован и может оказаться отличным решением. Самый частый кейс, это использование одной и той же логики в браузере и на мобильном приложении.
Подробнее об этом можно почитать тут.
FSD - Feature Sliced Design
И недавно для меня стало открытием методология FSD - Feature Sliced Design. На мой взгляд лучшем решением будет обратить внимание именно на эту методологию.
Методология не привязана к конкретному стеку технологий и применима к большинству frontend-приложений. Документация содержит примеры реализации на JavaScript + React, но FSD успешно адаптируется и к другим комбинациям инструментов.
У каждого из подходов есть свои плюсы и минусы. Учитывая что каждый проект имеет разный размер, сложность и специфику и цели, то что подойдет многим не факт что подойдет вам. Надеюсь что после прочтения статьи вы откроете для себя что то новое и сможете улучшить ваши собственные проекты.
👉 @seniorFront
Все мы знаем про, или слышали про практики и паттерны проектирования SOLID, GRASP, MVC, MV** и даже применяем их с переменным успехом, стараясь нащупать эффективный подход к построению приложений. Но это лишь приводит к разнообразию реализаций наших приложений и частей функционала.
И поэтому я уже долгое время пытаюсь понять по каким правилам должно строиться фронтенд приложение чтобы оно удовлетворяло следующим критериям:
- легкое расширение функционала приложения;
- безболезненное внесение изменений в существующий функционал;
- унифицированная структура приложения;
- быстрый onboarding новых разработчиков на проект;
- понятный и прозрачный код;
- всегда понятно где в структуре файлов расположить ту или иную функциональность.
Domain Driven Design
Много умных дядек, таких как Мартин Фаулер и дядюшка Боб, написали много статей про него. На бэкенде в больших и сложных проектах он неплохо себя зарекомендовал. Но есть и много изъянов: туча абстракций, для простых действий нужно писать много кода, ну и разобраться, как готовить DDD та еще задача.
Есть примеры как готовить это на фронте, но, как видно, проблемы никуда не уходят и кол-во абстракций удручают.
Основательная статья от Кхалила Стеммлера о возможной архитектуре клиентских приложений частично полагается на DDD подход, но при этом сильно его упрощает, освобождая нас от ненужных абстракций и смещая понятия в сторону фронт приложений.
Но бизнес логика в таких приложениях немного размывается и подход больше сфокусирован на функциональных слоях приложения, что отдаляет нас от требования к прозрачному коду и явной бизнес логики.
Джимми Богарт в своей статье пишет что DDD подход не совершенен и избыточен, и, как следствие, он предлагает переработанный подход vertical slices. И это отличный подход, о котором стоит почитать отдельно. Эта идея довольно простая и мы можем адаптировать ее к фронтенд приложениям.
Clear architecture
Также есть попытки следовать всем постулатам чистой архитектуры и абстрагироваться от представления совсем. В этом случае мы сможем подменять view на любой фреймворк или вообще отказаться от его использования. Интересный подход и в некоторых случаях вполне обоснован и может оказаться отличным решением. Самый частый кейс, это использование одной и той же логики в браузере и на мобильном приложении.
Подробнее об этом можно почитать тут.
FSD - Feature Sliced Design
И недавно для меня стало открытием методология FSD - Feature Sliced Design. На мой взгляд лучшем решением будет обратить внимание именно на эту методологию.
Методология не привязана к конкретному стеку технологий и применима к большинству frontend-приложений. Документация содержит примеры реализации на JavaScript + React, но FSD успешно адаптируется и к другим комбинациям инструментов.
У каждого из подходов есть свои плюсы и минусы. Учитывая что каждый проект имеет разный размер, сложность и специфику и цели, то что подойдет многим не факт что подойдет вам. Надеюсь что после прочтения статьи вы откроете для себя что то новое и сможете улучшить ваши собственные проекты.
👉 @seniorFront
❤7👍5👎1🤔1
Как приручить эмоции, чтобы прийти к успеху
Эмоции могут мешать строить карьеру, двигаться к новой цели, к смене проекта, работы. Даже когда хотим просто поговорить о повышении зарплаты – могут одолевать страх, раздражение, злость, обида. Справиться с эмоциями получается не всегда.
В этой статье
- выясним, где ошибаемся, когда пробуем управлять эмоциями на работе;
- разберем, как сделать эмоции путеводной звездой в достижении целей;
- рассмотрим конкретные ситуации, когда работа с эмоциями помогла получить повышение зарплаты, новую должность и закрыть задачи в срок.
👉 @seniorFront
Эмоции могут мешать строить карьеру, двигаться к новой цели, к смене проекта, работы. Даже когда хотим просто поговорить о повышении зарплаты – могут одолевать страх, раздражение, злость, обида. Справиться с эмоциями получается не всегда.
В этой статье
- выясним, где ошибаемся, когда пробуем управлять эмоциями на работе;
- разберем, как сделать эмоции путеводной звездой в достижении целей;
- рассмотрим конкретные ситуации, когда работа с эмоциями помогла получить повышение зарплаты, новую должность и закрыть задачи в срок.
👉 @seniorFront
👍1