fill

CSS-свойство fill, как и у одноимённого SVG-атрибута, используется для оформления цвета заливки SVG-элемента. По умолчанию — black.

Помимо стандартных форматов: именованного цвета (orange, rebeccapurple и др.), RGB(A), HEX и HSL(A), fill поддерживает формат ссылки на SVG-элемент, который будет как паттерн заполнять площадь элемента.

Пример:
Через CSS-свойство можно управлять цветом заливки SVG-элементов с помощью других возможностей CSS, например, при наведении курсора:
.pacman {
fill: url(#pattern);
}

.pacman:hover {
fill: yellow;
}

👉 @frontendInterview

👉 @frontendInterview

​Согласно аналитике Platforma, количество вакансий в IT увеличилось на 85%, а количество резюме — всего на 5%

В программировании нужны профессионалы, и новый формат образования «буткемп» (интенсивная подготовка) позволяет получить нужные знания, навыки и работу менее чем за полгода. Так ребята в Elbrus Coding Bootcamp обучают программированию за 3 месяца. У них уже более 750 выпускников, а 93% получили желанное трудоустройство за 3 месяца после обучения.

Спойлер: Легко не будет, но именно поэтому результат вас удивит.

Фокус обучения — практика: написание кода с 9 утра до 7 вечера 5 дней в неделю и реализации проектов, которые можно положить в портфолио. Плюс прокачка навыков, чтобы найти свою первую работу в IT. В конце обучения — Карьерная неделя, когда коуч помогает составить резюме и подготовиться к вопросам на интервью. Из приятных бонусов: обучение в группе с менторами-преподавателями, а не тренажер или записанные видео.

Если вы ждали особенного знака, чтобы вдохновиться на карьерные перемены — это он. Заходите на День открытых дверей и расспросите выпускников сами. 
 Или записывайтесь на бесплатный мастер-класс, чтобы не терять зря драгоценное время.

​React и альтернативы

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

Чтобы облегчить поиск изменений в приложении и работу с DOM браузера, некоторые фреймворки используют Virtual DOM. Virtual DOM – объект, который хранит структуру дерева компонентов и их текущее состояние.

React использует Virtual DOM для отслеживания изменений. После каждого изменения состояния React создаёт новый Virtual DOM и сравнивает его с предыдущим, чтобы узнать, какие части приложения изменились.

Vue использует Virtual DOM и специальные объекты Proxy, чтобы узнавать, когда изменились данные.

Angular не использует Virtual DOM, но модифицирует браузерный DOM API, чтобы иметь возможность следить за изменением данных. Таким образом, если пользователь взаимодействует со страницей, то Angular проверяет, не изменились ли какие-то данные приложения.

Svelte не использует Virtual DOM, но во время компиляции приложения формирует функции, которые следят за изменением данных и обновляют соответствующие DOM-элементы.

Концепции и различия подробнее рассмотрены в статье.

👉 @frontendInterview

👉 @frontendInterview

👉 @frontendInterview

GraphQL in Action

Язык запросов GraphQL упрощает взаимодействие с веб-серверами, позволяя выполнять эффективные запросы к API. В данной книге вы узнаете, как добавить эти преимущества в свои собственные API, предоставляя вашим клиентам возможность запрашивать именно то, что им нужно, с вашего сервера. Практическая и основанная на примерах книга, учит всему, что нужно для начала работы с GraphQL - от принципов проектирования и синтаксиса до оптимизации производительности.

👉 @frontendInterview

Return Negative

Вам дано число. Сделайте его отрицательным и верните результат. Число может уже быть отрицательным.

Примеры:
makeNegative(1); // return -1
makeNegative(-5); // return -5
makeNegative(0); // return 0
makeNegative(0.12); // return -0.12

👉 @frontendInterview

Напишите функцию сложения вида add(num1)(num2)

Решение кроется в переопределении метода valueOf .

Ответ:
const add = (a) => {
let sum = a;
const func = (b) => {
sum += b;
return func;
};
func.valueOf = () => sum;
return func;
};
console.log(add(2)(3)); // 5;

Когда мы вызываем console.log , он ожидает увидеть String, если его там нет, то он попытается сделать из полученного значения String.

В примере выше после выполнения add(2)(3) возвращается function, которую console.log будет превращать в String, в ходе этих действий будет вызван метод valueOf для преобразования function к примитиву, а так мы переопределили данный метод, то он вернёт наше значение sum вместо стандартного.

👉 @frontendInterview

👉 @frontendInterview

Напишите простую функцию, чтобы узнать равен ли один из входных параметров 3.

Тут делается упор на проверку знаний об arguments, но иногда заходят ещё дальше и просят рассказать каким образом работает Array.prototype.slice.call(arguments).

Ответ:

 function isThreePassed(){
  const args = Array.prototype.slice.call(arguments);
  return args.indexOf(3) != -1;
 }
 isThreePassed(1,2) //false
 isThreePassed(9,3,4,9) //true

Как мы знаем, arguments не массив, а обычный объект, поэтому у него нет такого полезного метода как indexOf. Для этого используется Array.prototype.slice.call(arguments), который делает из argument — > array.

Но всё же, как он работает ?
.call() и .apply() позволяют явно установить this в функции. И если передать argument как this, то slice будет работать с ним как с обычным массивом.

👉 @frontendInterview

Учитесь сейчас важным навыкам фронтенд-разработки со скидкой 30%🚀

-30% на самые популярные курсы для роста до мидла от HTML Academy:

— «Алгоритмы и структуры данных». Узнаете, как писать быстрый и чистый код и правильно выстраивать архитектуру проекта. А ещё сможете проходить собеседования в крупные компании, ведь там обязательно спрашивают про алгоритмы.
— «TypeScript. Теория типов». Научитесь кодить быстрее и без ошибок, а ваш код будет проще читать и поддерживать.
— «Анимации, часть 1. CSS-анимации». Сможете создавать простые и сложные анимации, чтобы сделать сайт красивым.

А если купить курсы в комплекте, можно сэкономить ещё 10%.

Скидки действуют до 19 июня🎁

Начните учиться прямо сейчас, двигайтесь в комфортном темпе и сразу применяйте новые навыки в своих проектах.

👉 @frontendInterview

Объедините два массива с вложенностью

Задачу можно решать различными способами. Обычно хотят узнать знает ли собеседуемый такой метод как reduce.

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

Так же с формированием нового массива нам помогает concat.

Ответ:
const flatten = (arr) => arr.reduce((flat, toFlatten) => flat.concat(Array.isArray(toFlatten) ? flatten(toFlatten) : toFlatten), []);

👉 @frontendInterview

👉 @frontendInterview

Занимаетесь frontend-разработкой, но для серьёзных проектов пока не хватает навыков?

Тимлиды ВКонтакте записали топовый курс с акцентом на практику. За 5 месяцев вы научитесь делать качественные, быстрые интерфейсы, разберётесь с деплоем, CI/CD, кэшированием и серверной оптимизацией — и поймёте, как тратить на разработку меньше времени.

Результатом обучения станет готовый сервис на React + Redux с деплоем на собственном сервере. После прохождения курса вы точно будете готовы к работе над крупными проектами, а наш HR приложит максимум усилий, чтобы трудоустроить вас в хорошую компанию.

Переходите по ссылке и записывайтесь на курс до 17 июня — по промокоду FRONTERVIEW действует скидка 10%. Кстати, на сайте можно пройти бесплатную демоверсию.