Смена специализации в IT: когда отпуск уже не спасает

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

В IT-индустрии часто переходят на новые позиции: тестировщики становятся автотестировщиками или программистами, бизнес-аналитики — системными аналитиками, разработчики осваивают новые области.

Однако не всем удаётся сменить специальность и не всегда это приводит к положительному результату. Как перейти из одной IT-профессии в другую с минимальными потерями? Опросили экспертов и собрали их мнения.

👉 @frontendInterview

Видео для трудяг с синдромом самозванца

Смотреть каждый день за полчаса до конца работы.

👉 @frontendInterview

Что такое Deno?

Deno - это современная среда выполнения JavaScript/TypeScript, созданная Райаном Далом, первоначальным создателем Node.js, в 2018 году. Она была разработана для решения ряда проблем и ограничений, присутствующих в Node.js. Deno внедряет различные функции и архитектурные решения для улучшения безопасности, опыта разработчиков и производительности.

Подробнее про преимущества и недостатки в статье.

👉 @frontendInterview

JavaScript для профессиональных веб-разработчиков

Самое полное руководство по современному JavaScript.
Как максимально прокачать свои навыки и стать топовым JS-программистом? Четвертое издание «JavaScript для профессиональных веб-разработчиков» идеально подойдет тем, кто уже имеет базовые знания и опыт разработки на JavaScript. Автор сразу переходит к техническим деталям, которые сделают ваш код чистым и переведут вас с уровня рядового кодера на высоту продвинутого разработчика.

👉 @frontendInterview

Which are in?

При задании двух массивов строк a1 и a2 возвращается отсортированный массив r в лексикографическом порядке строк из a1, которые являются подстроками строк из a2.

Пример 1:

a1 = ["arp", "live", "strong"] 

a2 = ["lively", "alive", "harp", "sharp", "armstrong"] 

returns ["arp", "live", "strong"]

Пример 2:

a1 = ["tarp", "mice", "bull"] 

a2 = ["lively", "alive", "harp", "sharp", "armstrong"] 

return []

Примечания: Массивы записываются в "общей" нотации.
В Shell bash a1 и a2 - это строки. Возврат - это строка, в которой слова разделяются запятыми.
Осторожно: в некоторых языках r должен быть без дубликатов.

👉 @frontendInterview

​В чём отличие хранения данных в local storage от куки ?

Хранение данных в Local Storage и использование куки (cookies) — это два различных способа сохранения информации на стороне клиента в веб-разработке. Каждый из них имеет свои особенности, преимущества и недостатки:

Local Storage
- Объем данных: Предоставляет значительно больше пространства для хранения данных по сравнению с куки — до 5-10 МБ в зависимости от браузера.
- Доступность: Данные, сохраненные нем, доступны только на том же домене и не отправляются на сервер при каждом запросе, в отличие от куки.
- Срок хранения: Данные нем сохраняются бессрочно или до тех пор, пока не будут явно удалены кодом или пользователем через настройки браузера.
- Безопасность: Так как данные из него не отправляются на сервер с каждым запросом, риск перехвата этих данных ниже, чем у куки. Однако, поскольку данные доступны через JavaScript, Local Storage уязвим к XSS-атакам (межсайтовому скриптингу).

Куки (Cookies)
- Объем данных: Ограничены размером, обычно максимум 4 КБ на одно куки.
- Доступность: Отправляются на сервер при каждом HTTP-запросе к домену, который их установил, что может быть полезно для аутентификации или отслеживания сессий пользователя.
- Срок хранения: Срок жизни куки может быть установлен при их создании. Если срок не установлен, куки считается сессионным и удаляется при закрытии браузера.
- Безопасность: Куки могут быть настроены как HttpOnly, что делает их недоступными и уменьшает риск XSS-атак. Также куки могут быть помечены как Secure, что означает их отправку только по защищенным соединениям (HTTPS).

Local Storage лучше подходит для хранения больших объемов данных, которые не требуется отправлять на сервер с каждым запросом. Это хороший выбор для сохранения настроек пользователя или данных форм на стороне клиента.

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

👉 @frontendInterview

👉 @frontendInterview

Кaк сделать поле с выбором по прокрутке?

Элемент <select> представляет собой довольно простую концепцию: выделите его, чтобы увидеть набор из <option>, которые можно выбрать в качестве входного значения. Это отличная модель, и я не предлагаю ее менять. Тем не менее, мне очень нравится ковыряться во всем, и я нашел интересный способ превратить <select> в своего рода циферблат — где параметры выбираются путем прокрутки их в нужное положение, мало чем отличаясь от кодового замка или средств выбора даты iOS. Любой, кто расширял <select> для выбора страны, знает, насколько болезненно длинными могут быть списки, и это может быть одним из способов предотвратить это.

👉 @frontendInterview

Готовь телегу зимой: какие технологии и фреймворки будут актуальны в IT 2025 году

В ИТ-индустрии всё скоротечно: технологии постоянно совершенствуются, меняются, выходят новые релизы, а мы ежегодно продолжаем бороться с легаси, выкатывать изменения и переезжать на новые версии языков и инструментов. Мы расспросили членов ПК конференции Merge 2024 о том, чего айтишникам ждать в 2025 году. Итак, поехали.

👉 @frontendInterview

Поговорим про деньги в IT?

Приглашаем опытных IT-специалистов пройти небольшой опрос про зарплаты и бенефиты в технологических компаниях. Это займёт не более 7 минут — а ваше мнение поможет одному крупному российскому работодателю делать актуальные оферы.

Пройти опрос можно здесь

Работодатели, выберите своего бойца

👉 @frontendInterview

​Что такое мемоизация ?

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

Как это работает
При первом вызове функции с определённым набором аргументов результат выполнения функции сохраняется в каком-либо хранилище (чаще всего в виде объекта или карты). При последующих вызовах функции с теми же аргументами, вместо выполнения функции, возвращается сохранённый результат. Это значительно сокращает время выполнения, особенно если исходная функция требует значительных вычислительных ресурсов.

Применение:
Мемоизация часто применяется для оптимизации производительности в различных областях, включая:

- Рекурсивные вычисления, например, вычисление чисел Фибоначчи.
- Дорогостоящие вычисления, которые часто повторяются с одними и теми же аргументами.
- Оптимизация производительности веб-приложений, например, в React, где меморизация помогает избежать ненужных перерисовок компонентов.

function memoize(fn) {
  const cache = {};
  return function(...args) {
    const key = args.toString();
    if (cache[key]) {
      return cache[key];
    } else {
      const result = fn.apply(this, args);
      cache[key] = result;
      return result;
    }
  };
}

// Пример использования меморизации для функции вычисления факториала
const factorial = memoize(function(n) {
  if (n === 0) {
    return 1;
  } else {
    return n * factorial(n - 1);
  }
});

console.log(factorial(5));  // Вычисляется и сохраняется в кэше
console.log(factorial(5));  // Возвращается результат из кэша, вычислений не происходит

👉 @frontendInterview

Наглядный CSS

На 1 июня 2018 года CSS содержал 415 уникальных свойств, относящихся к объекту style в любом элементе браузера Chrome. Сколько свойств доступно в вашем браузере на сегодняшний день? Наверняка уже почти шесть сотен. Наиболее важные из них мы и рассмотрим.
Грег Сидельников упорядочил свойства по основной категории (положение, размерность, макеты, CSS-анимация и т. д.) и визуализировал их работу.
Вместо бесконечных томов документации – две с половиной сотни иллюстраций помогут вам разобраться во всех тонкостях работы CSS. Эта книга станет вашим настольным справочником, позволяя мгновенно перевести пожелания заказчика и собственное видение в компьютерный код!

👉 @frontendInterview

Millipede of words

Дан массив из 3-7 слов произвольной длины. Без заглавных букв. Слова объединяются, если последняя буква одного слова и первая буква другого слова одинаковы. Возвращается true, если все слова из набора могут быть объединены в одно слово. Каждое слово может и должно быть использовано только один раз. В противном случае возвращается false.

Пример:

solution(["no", "dog", "on", "good"]) => false
solution(["engine", "endure", "elite"]) => true

👉 @frontendInterview

​За что отвечает z-index?

Это CSS-свойство, которое определяет порядок расположения элементов по оси z (перпендикулярно экрану). Это свойство используется для управления тем, какие элементы будут отображаться поверх других, когда они перекрываются.

Как он работает?
Контекст наложения (stacking context): Чтобы z-index работал, элемент должен иметь установленное значение position, отличное от static (например, relative, absolute, fixed или sticky). Без этого z-index не будет применяться.
Числовое значение: z-index принимает целые числа, включая отрицательные. Элементы с более высоким значением z-index будут отображаться поверх элементов с более низким значением.

Пример

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пример z-index</title>
    <style>
        .box {
            position: absolute;
            width: 100px;
            height: 100px;
        }
        .box1 {
            background-color: red;
            z-index: 1;
            top: 50px;
            left: 50px;
        }
        .box2 {
            background-color: blue;
            z-index: 2;
            top: 80px;
            left: 80px;
        }
    </style>
</head>
<body>
    <div class="box box1"></div>
    <div class="box box2"></div>
</body>
</html>

В этом примере у нас есть два элемента, которые перекрываются. Красный квадрат имеет z-index: 1, а синий квадрат — z-index: 2. Поскольку значение z-index у синего квадрата выше, он будет отображаться поверх красного.

Почему это важно?
Управление перекрытиями: Важен для создания сложных интерфейсов, где элементы могут перекрываться. Это часто встречается в модальных окнах, всплывающих подсказках, выпадающих меню и т.д.
Визуальная иерархия: Он позволяет разработчикам управлять визуальной иерархией, гарантируя, что более важные элементы остаются видимыми и доступны пользователям.

👉 @frontendInterview