👉 @frontendInterview

Мемоизация

Мемоизация — сохранение результатов выполнения функций для предотвращения повторных вычислений. Это один из способов оптимизации.

Функция с мемоизацией:

 const memoizedAdd = () => {
  let cache = {};
  return (n) => {
    if (n in cache) {
      console.log('Fetching from cache');
      return cache[n];
    }
    else {
      console.log('Calculating result');
      let result = n + 10;
      cache[n] = result;
      return result;
    }
  }
}

Функция memoizeAdd возвращает другую функцию, которую мы можем вызвать тогда, когда нужно.

 const newAdd = memoizedAdd();
 console.log(newAdd(9)); // вычислено
 console.log(newAdd(9)); // взято из кэша

Переменная cache может хранить данные между вызовами функции, так как она определена в замыкании.

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

Стилизация — неотъемлемая часть работы над любым веб-приложением.

Как сделать вёрстку корректной и понять, какие инструменты лучше подойдут для нового проекта или рефакторинга уже существующего приложения?

Обсудим это на бесплатном вебинаре «CSS: на чём писать в 2023» вместе с Артуром Стамбульцяном, Frontend Team Lead компании Ton. Разберём технологии PostCSS, Sass, Less, Styled Components, CSS Modules и Tailwind, сравним их друг с другом и выясним, есть ли среди них явный фаворит.

Встречаемся в следующий вторник, 15 ноября, в 19:00 (по Москве).

Регистрируйтесь по ссылке!

Участвуйте в Weekend Offer для фронтенд-разработчиков и станьте частью команды core mVK

Если вы хотите реализоваться в сфере IT и принимать участие в разработке сложных платформ и инструментов — пройдите оффер всего за одни выходные и получите возможность присоединиться к Команде ВКонтакте.

Вы можете помочь в модернизации приложения, которым пользуются более 40 миллионов человек в месяц. Присоединяйтесь к инфраструктурной команде core mVK или к продуктовым командам суперприложения, ленты и рекомендаций, контента, стикеров и подарков или VK Клипов и получите возможность реализовать свои идеи.

Переходите по ссылке, чтобы узнать больше о работе core mVK и проведении Weekend Offer.

👉 @frontendInterview

👉 @frontendInterview

👉 @frontendInterview

👉 @frontendInterview

Что такое каррирование?

Каррирование – это трансформация функций таким образом, чтобы они принимали аргументы не как f(a, b, c), а как f(a)(b)(c).
Оно не вызывает функцию. Оно просто трансформирует её.

Пример
function curry(f) {
return function(a) {
return function(b) {
return f(a, b);
};
};
}

// использование
function sum(a, b) {
return a + b;
}
let carriedSum = curry(sum);
alert( carriedSum(1)(2) ); // 3

Результат curry(func) – обёртка function(a).
Когда она вызывается как sum(1), аргумент сохраняется в лексическом окружении и возвращается новая обёртка function(b).
Далее уже эта обёртка вызывается с аргументом 2 и передаёт вызов к оригинальной функции sum.

👉 @frontendInterview

Устойчивый веб-дизайн

Без сомнения, "Устойчивый веб-дизайн" является обязательным чтением для веб-дизайнеров и front-end разработчиков во всем мире. Тут собрана история и философия веба. Раскрыты идеи веб-разработки.

👉 @frontendInterview

Fix My Phone Numbers!

Номер телефона должен состоять из 11 цифр и всегда начинаться с 0.
Вам дана строка, где в номер телефона подмешаны различные символы. Очистите строку от лишних символов и верните номер.

👉 @frontendInterview

​Псевдоэлементы

Псевдоэлементы — это элементы, которых не существует в HTML-разметке. Они создаются и позиционируются исключительно при помощи CSS. Чаще всего используются для создания различных декоративных элементов (которые не несут содержательного смысла).

Также псевдоэлементы приходят на помощь, когда нужно наложить поверх картинки так называемый оверлей (перекрывающий слой). На этом польза от псевдоэлементов не заканчивается.

Пример
Самый частый сценарий использования псевдоэлемента — наложение оверлея, полупрозрачной заливки поверх картинки. Чаще всего это требуется на первом экране, но этим способом можно наложить оверлей на любое изображение на сайте.
<header class="header">
<h1 class="header__noscript">Good evening, Clarice.</h1>
</header>

.header {
background: #999999
url("background.noscript")
no-repeat center / cover;
}

.header__noscript {
color: #ffffff;
font-size: 82px;
text-transform: uppercase;
text-align: center;
}

Два самых часто встречающихся псевдоэлемента. Они очень похожи. Единственная разница заключается в том, что ::before по умолчанию располагается перед содержимым элемента, для которого задаётся, а ::after — после.
Для input нельзя задать :before или :after

👉 @frontendInterview

Представляем refine — open-source headless React-фреймворк (5.4K ⭐️ на GitHub) для CRUD-приложений. С ним вы можете быстро создать админку или дашбоард, при этом код останется гибким для изменений.✨

refine бесшовно связывается с UI-фреймворками и поставляется с готовыми интеграциями для Ant Design System, Material UI, Mantine и Chakra UI 🚀

GitHub Repo: https://github.com/refinedev/refine

👉 @frontendInterview

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

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

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

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

👉 @frontendInterview

👉 @frontendInterview