​Как создать объект, не имеющий прототипа?

В 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

Gravity Points

Реализовано на canvas и чистом JS. Также есть возможность настройки количества частиц.

👉 @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

Как приручить эмоции, чтобы прийти к успеху

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

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

👉 @seniorFront

Card explode

Свёрстано при помощи препроцессоров Pug и Stylus. Уничтожение карточки реализовано при помощи библиотеки Disintegrate.js

👉 @seniorFront

New Design | CSS Curve Outside Card UI Design with Hover Effect

В этом видео создаются оригинальные карточки, раскрывающиеся при наведении на HTML и CSS.

👉 @seniorFront

— Почему бы тебе не сходить к психотерапевту? Он поможет разобраться с «головой»
— Да я сам разберусь!

Как я разбираюсь сам:

👉 @seniorFront

Lightning

Красивая анимация молнии, реализованная на canvas и чистом JS.

👉 @seniorFront

Buttons with animations

Подборка анимированных кнопок, созданных на HTML и CSS.

👉 @seniorFront

Ink Cursor

В этом видео создается анимация следования за курсором при помощи библиотеки gsap.

👉 @seniorFront

Kira Kira Particle Effects

Создано при помощи canvas и JS. Настройки анимации можно менять через интерфейс, реализованный библиотекой dat.gui.

👉 @seniorFront

Regex for Gregorian date validation

Создайте регулярное выражение, которое будет валидировать дату и возвращать true, если дата передана в определенном стиле:

Корректные даты:

 "23.12.2008"
 "01.08.1994"


Некорректные даты:

 "12.23.2008"
 "01-Aug-1994"
 " 01.08.1994"

👉 @seniorFront

Варианты создания интерактивной экскурсии для пользователей

Нужно адаптировать пользователей к продуктам компании, познакомить с функциями и показать основные преимущества. Это напрямую влияет на желание пользоваться этими инструментами в дальнейшем. Подобные задачи решает онбординг (onboarding) — процесс знакомства пользователя с продуктом.

В этой статье автор рассказывает зачем нужен онбординг и как его реализовать в UI-kit.

👉 @seniorFront

​Какие способы изоляции стилей существуют ?

Изоляция стилей в веб-разработке важна для предотвращения конфликтов CSS и обеспечения того, чтобы стили одного компонента или раздела страницы не влияли на другие. Существует несколько таких подходов:

Использование уникальных имен классов
Это самый простой способ избежать конфликтов. Может быть достигнуто с помощью методологий именования, таких как BEM (Блок, Элемент, Модификатор), которая предлагает чёткую структуру для именования классов.

CSS-модули
Они представляют собой подход, при котором классы и идентификаторы, определенные в CSS-файле, автоматически преобразуются в уникальные имена. Это позволяет избежать конфликтов имен классов между различными компонентами. Они поддерживаются в сборщиках, таких как Webpack, и во фреймворках, например, в Create React App.

CSS-in-JS
Библиотеки CSS-in-JS, такие как Styled-components и Emotion, позволяют писать CSS прямо в JavaScript-файлах. Это обеспечивает полную изоляцию стилей, поскольку стили применяются непосредственно к компонентам, и конфликты имен классов исключаются.

Shadow DOM
Технология, позволяющая инкапсулировать DOM-дерево и стили компонента так, что они не влияют на основной документ. Это ключевая часть Web Components и позволяет создавать полностью изолированные компоненты.

Scoped CSS
Некоторые современные фреймворки и инструменты, такие как Vue.js, предлагают возможность использования scoped стилей, где CSS применяется исключительно к компоненту, в котором он объявлен, без воздействия на остальную часть приложения.

👉 @seniorFront

Variable Themes

Свёрстано с использованием препроцессоров Pug и SCSS. Логика переключения темы реализована в JS.

👉 @seniorFront

​Как справиться с рабочим стрессом

Давайте посмотрим на динамику профессионального стресса, чтобы понимать, как с ним справляться.
Э. Ф. Зеер выделяет три основные стадии развития стресса у человека.

На первой стадии состояние человека, попавшего в стресс, меняется на противоположное. Можно наблюдать, как спокойный человек становится раздражительным и даже агрессивным, а общительный человек может стать замкнутым.

Вторая стадия начинается, когда человек полностью или частично теряет самоконтроль. Многие люди отмечают, что в состоянии стресса делали то, что в спокойном состоянии никогда бы не сделали. В результате человек чувствует опустошение и усталость.

На третьей стадии человек останавливается и возвращается к тому состоянию, которое было у него до стресса. Часто люди испытывают чувство вины за произошедшие конфликты.

У каждого человека индивидуальный сценарий стрессового поведения, он выражается в частоте и форме проявления стрессовых реакций. Кто-то может испытывать несильный стресс каждый день, другие переживают очень яркие стрессовые сценарии несколько раз в год.

Стрессовый сценарий запускается практически автоматически, и важно отслеживать свое эмоциональное состояние и помогать себе в таких случаях.

Правила самопомощи
Выделяют несколько правил, которые помогают отследить свои стрессовые реакции и снизить уровень профессионального стресса.

- Наблюдение за собой. Отслеживая моменты, когда вы вступаете на первую стадию стресса и переходите ко второй, можно вовремя принять меры, чтобы снять напряжение.
- Найдите способы остановки себя, пока вы находитесь на первой стадии. Можно взять перерыв в общении с коллегами, выйти из комнаты, поработать из другой части офиса, если это возможно.
- Сместите фокус внимания и постарайтесь снять напряжение. Можно заняться рутинной работой, полить цветы, сходить за кофе, поговорить с дружественным коллегой на нерабочие темы, рассмотреть пейзаж за окном, умыться и так далее.
- Задумайтесь, что в работе радует вас и приносит вам больше всего удовольствия. Планируйте в своем расписании хотя бы немного времени на эти задачи.

👉 @seniorFront

Relax, take IT easy: как вернуть спокойствие в работу. Три инструмента специально для айтишников

Как сделать так, чтобы энергии, спокойствия и счастья в работе было больше, даже если сейчас много усталости и хочется бросить все? И что может помочь бизнесу удерживать, развивать и вовлекать ИТ-специалистов?

В своей публикации автор рассказывает, как люди сами создают себе ад на работе и как сами могут себе помочь. Даёт три полезных инструмента, позволяющие управлять замкнутыми кругами, в которые многие из нас время от времени попадают. А в конце – бонус.

👉 @seniorFront

Goo Bubble

Это SVG картинка, анимируемая библиотекой TweenMax.

👉 @seniorFront

Scroll based Slider

В этом видео создается слайдер, переключающий картинки при прокрутке экрана на CSS и JS.

👉 @seniorFront

Когда полез разбираться с чужим проектом

👉 @seniorFront