Custom Cursor Effect

Реализовано на HTML, CSS и чистом JS.

👉 @seniorFront

​«Относитесь к собеседованию, как к свиданию» — 5 причин, почему разработчики не могут найти работу

1. «Мне не отвечают, когда откликаюсь на вакансию»
Когда я последний раз менял место работы, сосчитал личную статистику: конверсия с этапа откликов на этап приглашения на собеседование составила около 10%. Таким образом, откликнувшись на вакансию в 10 компаний, вы, скорее всего, получите 1 приглашение на собес. На удивление, конверсия с этапа пройденных собеседований на этап предложения о работе составила также около 10%. То есть на 10 собеседований пришёл 1 job offer.

2. «У меня пустое резюме»
Я столкнулся с этим, когда начал проводить технические интервью с кандидатами. Пустое резюме может быть по объёму, когда есть всего 3-4 цепляющих внимание строчки, и по смыслу, когда строчек много, но все они ни о чём.
В первом случае проблема в том, что разработчик, имея крутой опыт, сомневается, стоит ли указывать его в резюме (например, свои pet-проекты), либо вовсе не умеет описывать обязанности на предыдущем месте работы. И всю информацию получается вытянуть только на техническом интервью.
Во втором — описывает опыт обтекаемыми фразами, по которым сложно понять уровень профессионализма. Например, «разрабатывал внутренние/внешние проекты компании». Сразу возникает вопрос: что это за проекты?

3. «У меня недостаточно знаний для данной вакансии»
В вакансиях довольно часто пишут требования с запасом. Если у кандидата неполный набор хард-скиллов, но он умеет думать — работодатель чаще всего уступит и пойдёт навстречу. На мой взгляд, лучше честно заявить, что вы не работали с какой-то технологией, но готовы попробовать, когда выйдете на работу. Работодатель ищет себе не робота, который может в теорию, а человека, у которого хорошие хард-скиллы и неплохие софты.

4. «Я испытываю стресс до начала и во время собеседования»
Самая частая проблема, которая бывает при поиске работы. Многие относятся к собеседованию как к экзамену, но вы же не в универе🙂. Недавно я услышал крутое объяснение термина «собеседование» — это свидание между будущим сотрудником и будущим работодателем. Вы же, когда ходите на свидания, не ведёте себя как на экзамене? Да, волнуетесь, но, скорее, из-за того, что переживаете — вдруг вам не понравится. С собеседованиями аналогичная ситуация — на них надо ходить с мыслью, что вы лишь знакомитесь с компанией/командой/будущим руководителем.

5. «Я боюсь ошибиться/затупить на собеседовании»
Обычно, когда кандидат допускает одну ошибку, то из-за волнения делает вторую, третью и так далее. Однако не забывайте, что и со стороны работодателя могут ошибиться во время технического интервью. Был на моей практике такой случай. Стандарт немного поменялся, и в JavaScript стало 8 типов данных, а не 6, как раньше. Кандидат знал об этом, а я не успел зафиксировать для себя изменения. Тогда получилось, что я ошибся перед кандидатом, а не он передо мной.

👉 @seniorFront

Procedural Birb

Картинки генерируются и анимируются библиотекой svg.js. Панель настроек создана при помощи библиотеки dat.gui.

👉 @seniorFront

Glow slider

Это input type="range", стилизованный в CSS.

👉 @seniorFront

Анализируем виды тестов для Frontend

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

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

Так где нам получить гарантии, что ключевые сценарии приложения работают корректно?

Подробности — в статье о видах тестирования.

Animated Card UI Design with Hover Effect

В этом видео создаются карточки с оригинальным эффектом при наведении на HTML и CSS.

👉 @seniorFront

👉 @seniorFront

Single Keyframe Tricks

Для каждой кнопки создана CSS анимация, которая включается и отключается при нажатии.

👉 @seniorFront

CSS Mathematics - infinity loop

Реализовано на HTML и SCSS. В анимации прописано движение по осям X и Y для частиц. Для этого используется CSS transform со значениями calc(cos(var(--angle)) * var(--radius)) и calc(sin(var(--angle)) * var(--radius) * -1);

👉 @seniorFront

9 Dots Menu

В этом видео создается и анимируется оригинальное меню, которое раскрывается при нажатии на кнопку.

👉 @seniorFront

CSS scroll-driven scroll-snapping animations

Реализовано без использования JS. При помощи CSS scroll-snap.

👉 @seniorFront

Exes and Ohs

Проверьте, имеет ли строка одинаковое количество "x" и "o". Метод должен возвращать булево значение и быть нечувствительным к регистру. Строка может содержать любой символ.

Примеры:
XO("ooxx") => true
XO("xooxx") => false
XO("ooxXm") => true
XO("zpzpzpp") => true
XO("zzoo") => false

👉 @seniorFront

Bouncy image radio group

Это grid, параметры которого изменяются при нажатии на его элемент. Плавность достигается при помощи CSS transition.

👉 @seniorFront

​Можете ли вы привести пример каррированной функции (curry function) и в чём их преимущество?

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

function curry(fn) {
if (fn.length === 0) {
return fn;
}
function _curried(depth, args) {
return function (newArgument) {
if (depth - 1 === 0) {
return fn(...args, newArgument);
}
return _curried(depth - 1, [...args, newArgument]);
};
}
return _curried(fn.length, []);
}

function add(a, b) {
return a + b;
}

var curriedAdd = curry(add);
var addFive = curriedAdd(5);

var result = [0, 1, 2, 3, 4, 5].map(addFive); // [5, 6, 7, 8, 9, 10]

👉 @seniorFront

Service Slider

Анимировано в CSS. Логика смены текста и запуска анимаций реализована в JS.

👉 @seniorFront

​3 категории менеджеров проектов

Лично я сторонник разбивки, которую давно у кого-то услышал - менеджеров по стилю управления можно грубо разбить на 3 категории:

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

- Менеджер из среднего бизнеса. Эти менеджеры часто уже меньше вникают в техническую часть задач, работают с задачами чуть более верхнеуровнево, больше времени посвящая планированию и отладке процессов. Часто именно здесь начинается полноценное делегирование задач от менеджера - коллегам.

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

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

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

👉 @seniorFront

11 марта Newprolab запускает уже 14-й поток программы Data-Engineer

Программа будет полезна junior и middle дата-инженерам, аналитикам данных, бэкенд-разработчикам, техлидам и менеджерам, работающим с дата-командой

- 7 недель (11 марта – 27 апреля)
- 20 занятий с преподавателями в зуме
- 6 лаб с реальными данными
- чат с участниками и поддержка координаторов

📌Что дает программа:
1) научитесь решать типичные задачи DE и реально станете дата-инженером на время программы
2) структурируете ваши знания и познакомитесь с новыми инструментами
3) поработаете с облачным кластером для решения лаб с реальными данными
4) видеозаписи и другие материалы программы останутся у вас навсегда

📌Преподаватели – практики из ведущих компаний, рассказывают о сложном простым языком и ответят на все ваши вопросы

📌Промокод DEFRIENDS дает скидку 20%

[Подробная информация и регистрация]

Blob Switch

Оригинальный переключатель, стилизованный и анимированный в SCSS.

👉 @seniorFront

Bubble Preloader

Необычный loader на HTML и SCSS.

👉 @seniorFront