Введение в теорию алгоритмов и структур данных

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

👉 @frontendInterview

parseInt() reloaded

Ваша задача - создать конвертер строки в число. Входящая строка представляет собой число, записанное словами.

Примеры:
"one" => 1
"twenty" => 20
"two hundred forty-six" => 246
"seven hundred eighty-three thousand nine hundred and nineteen" => 783919

👉 @frontendInterview

Область видимости в JavaScript

В JavaScript есть три области видимости:
1. глобальная
2. область видимости функции
3. блочная.

Глобальная переменная объявлена вне функции или блока и доступна в любом месте исходного кода:

 var num = 5;
 function foo() {
   console.log(num);
 }
 foo();                // 5
 console.log(num);     // 5
 {
   console.log(num);   // 5
 }

Локальная переменная доступна в любом месте внутри тела функции, в которой она была объявлена:
function foo() {
var num = 5;
console.log(num);
}
foo(); // 5
console.log(typeof num); // undefined

Блочная переменная объявляется с помощью ключевых слов let или const и доступна в любом месте внутри своего блока.
let num = 0;
{
let num = 5;
console.log(num); // 5
{
const num = 10;
console.log(num); // 10
}
console.log(num); // 5
}
console.log(num); // 0

👉 @frontendInterview

👉 @frontendInterview

Приглашаем JavaScript фронтенд и бэкенд-разработчиков прокачать навыки на вебинаре в OTUS!

🟡 22 декабря в 20:00 пройдет открытый урок «Pinia vs Vuex: Является ли Pinia хорошей заменой Vuex?» в рамках онлайн-курса «Vue.js разработчик».

На занятии мы разберем

1. Проведём сравнение между Pinia и Vuex.
2. Проанализируем настройку и сильные стороны: сообщества и производительность обоих стейт менеджеров.
3. Рассмотрим новые изменения в Vuex 5 по сравнению с Pinia 2.

Не упустите возможность протестировать курс и пообщаться с Михаилом Кузнецовым, fullstack разработчиком в международной финансовой корпорации ING.

✍️ Для регистрации на вебинар пройдите вступительный тест https://otus.pw/r01Q/

🤑 Сейчас действуют новогодние скидки -23% на все курсы

CSS Counters, как стилизовать нумерацию блоков

Счетчики CSS похожи на "переменные". Значения переменных могут быть увеличены с помощью правил CSS (которые отслеживают, сколько раз они используются).
С помощью этих счетчиков удобно нумеровать абзацы, пункты лицензионных соглашений, шаги оформления заказа да и вообще всё где используется последовательная нумерация.

ul {
counter-reset: listNumber;
}
li:before {
counter-increment: listNumber;
content: "№ " counter(listNumber);
}

👉 @frontendInterview

👉 @frontendInterview

👉 @frontendInterview

👉 @frontendInterview

Мета теги

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

Небольшие рекомендации по заполнению тегов :

- noscript - уникальный для каждой страницы, обычно составляют из двух частей "название страницы | название сайта" (организации, сервиса)
- denoscription - короткий текст, обычно до 160 символов, также составляется из двух частей, описание конкретной страницы + короткая информация о компании, контакты или адрес
- keywords - основные ключевые слова страницы, можно выжимать из denoscription самый сок, три, четыре ключевых слова достаточно

Так же стоит обратить внимание на настройку OpenGraph Meta - формат мета-тегов, созданный в Facebook, служащий для передачи информации о странице при репосте в социальные сети.

👉 @frontendInterview

Создание микросервисов

Книга посвящена программированию микросервисов — небольших автономных компонентов, позволяющих добиться модульности и отказоустойчивости любой программы. Теория микросервисов тесно связана с философией Unix, способствует улучшению архитектуры любых приложений, дает возможность избегать громоздкого и запутанного кода.

👉 @frontendInterview

Find the stray number

Вам дан массив чисел, состоящий из одинаковых чисел, кроме одного. Верните это единственное уникальное число.

Примеры:
[1, 1, 2] ==> 2
[17, 17, 3, 17, 17, 17, 17] ==> 3

👉 @frontendInterview

Will-Change

CSS Will Change позволяет подготовить браузер перед изменением состояния элемента. Это позволяет добавить определенную оптимизацию к сайту.

Например, если элемент будет изменен при клике, то установка will-change при наведении курсора на этот элемент даёт браузеру достаточно времени, чтобы подготовиться к этому изменению.

 {
   transition: transform 1s ease-out;
}
.element:hover {
    will-change: transform;
}
.element:active {
    transform: rotateY(180deg);
}

👉 @frontendInterview

👉 @frontendInterview

Правило внутреннего и внешнего

Хороший фронтендер должен разбираться в основах дизайна и типографике.
Существует универсальное правило внутреннего и внешнего:
внутреннее ≤ внешнее
Внутреннее — расстояние между строками, внешнее — между абзацами или поля вокруг текста.
Внутреннее — padding блока, внешнее — margin блока.

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

👉 @frontendInterview