GRASP паттерны проектирования

GRASP (General Responsibility Assignment Software Patterns) — шаблоны проектирования, используемые для решения общих задач по назначению обязанностей классам и объектам.

Известно девять GRAPS шаблонов. Эти паттерны не имеют выраженной структуры, четкой области применения и конкретной решаемой проблемы, а лишь представляют собой обобщенные подходы/рекомендации/принципы, используемые при проектировании дизайна системы.

Шаблоны включают в себя:
- Information Expert (Информационные эксперт) ;
- Creator (Создатель) ;
- Controller (Контроллер) ;
- Low Coupling (Слабая связанность) ;
- High Cohesion (Высокая сцепленность) ;
- Pure Fabrication (Чистая выдумка или чистое синтезирование) ;
- Indirection (Посредник) ;
- Protected Variations (Сокрытие реализации или защищенные изменения) ;
- Polymorphism (Полиморфизм).

👉 @frontendInterview

👉 @frontendInterview

👉 @frontendInterview

👉 @frontendInterview

clip-path

Clip-path - способ указать видимую область элемента с помощью описания фигуры, внутри которой будет видно содержимое блока, при этом блок не изменит свои габариты, но взаимодействие с курсором, ховер например, будет работать только в видимой зоне.

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

 inset(100px -50px); 
clip-path: circle(50px at 0 100px);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

👉 @frontendInterview

Webpack for Beginners (2020)

Webpack стал одним из самых популярных сборщиков за последние годы; он широко используется разработчиками, компаниями и организациями всех размеров, и многие веб-фреймворки используют его для управления своими проектами
Вы начнете с установки и настройки Webpack и узнаете, как писать модульный код. Затем вы перейдете к использованию загрузчиков и плагинов с примерами использования псевдонимов и разрешите удалять кэш и устанавливать сторонние библиотеки, такие как jQuery, Bootstrap, QuillJS и многое другое.

👉 @frontendInterview

Vowel one

Вам дана строка из гласных и согласных букв, а также спецсимволов. Создайте функцию, которая трансформирует гласные буквы в 1, а все остальные символы в 0.

Примеры:
vowelOne( "abceios" ) // "1001110"
vowelOne( "aeiou, abc" ) // "1111100100"

👉 @frontendInterview

Селекторы по атрибутам в CSS

В CSS существует возможность обратиться к элементам html-документа по значению его атрибутов. Вы, конечно, уже знаете про ID и классы. Давайте взглянем на следующий html:

 <h2 id="first-noscript" class="magical" rel="friend">David Walsh</h2>

У этого элемента три атрибута: id, class и rel. Обратиться к этому элементу в CSS вы можете либо по его идентификатору (#first-noscript), либо по имени класса (.magical). Однако знали ли вы, что вы также можете обратиться к нему, используя атрибут rel? Это и называется селекторы по атрибутам:

h2[rel=friend] {
/* woohoo! */
}
Существует множество вариантов их использования. Примеры можно посмотреть в статье.

👉 @frontendInterview

​Как вырасти от junior до middle? Middle-специалист отличается не только опытом и уровнем владения технологиями, но и софт скилами. Курс Яндекс Практикума «Мидл фронтенд-разработчик» составлен так, чтобы вы могли освоить и то, и другое а ещё:

•разработать мессенджер, используя только JavaScript, Typenoscript, CSS и API браузера;
•познакомиться с теорией и отработать её на практике в больших проектах;
•научиться брать ответственность за решения и вкладываться в общий результат;
•самостоятельно декомпозировать задачи и распределять время;
•исследовать смежные сферы программирования, без которых невозможен фронтенд:
•информационную безопасность, прототипирование интерфейсов, командную работу, DevOps, ООП.

На всех этапах вас будут сопровождать опытные разработчики: мы не дадим просесть по учёбе и поможем выкроить время на образование. Вы будете практиковаться на реальных кейсах и положите в портфолио работающие проекты. А карьерные консультации подготовят вас к разговору о повышении или помогут с поиском новой работы.

Начать учиться: https://practicum.yandex.ru/middle-frontend

👉 @frontendInterview

BigInt в JavaScript (ES11)

В JavaScript для работы с числами до недавнего времени использовался 64-битный формат IEEE-754, однако данные числа ограничены по длине (2 в степени 53).

Пример:

 let num = Number.MAX_SAFE_INTEGER
 console.log(num) // 9007199254740991
 num + 1 //  9007199254740992
 num + 2 //  9007199254740992 ???

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

1. Передать в число в BigInt конструктор;

2. Дописать n в конце числа;

 typeof 99 // ‘number’
 typeof 99n // ‘bigint’

Решим выше рассмотренный пример с использованием нового типа:
let bigInt = BigIng(num) + BigIng(2)
console.log(bigInt) // 9007199254740993n

👉 @frontendInterview

Привет, это HTML Academy!

Принесли вам скидку 50% на чёрную пятницу — это отличная возможность самостоятельно научиться веб-разработке и сменить профессию.

Если интересно — оставьте заявку по ссылке и мы с вами свяжемся.

👉 @frontendInterview

👉 @frontendInterview