Cursor Follow Navigation Menu

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

👉 @seniorFront

👉 @seniorFront

Pizza Toggles

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

👉 @seniorFront

Dots & Ring Loader

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

👉 @seniorFront

Animated Glowing Gradient Border

В этом видео создаётся светящаяся анимированная граница на CSS.

👉 @seniorFront

Keyboard pressing text effect

Создано и анимировано на чистом CSS.

👉 @seniorFront

Как получить реальный опыт во фронтенд-разработке за 7 дней?

А именно:

- Сверстать веб-сайт на HTML + CSS;
- Реализовать функционал на JavaScript;
- Пощупать фронтенд-фреймворк Angular;
- Подключить Backend и загрузить сайт на хостинг.

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

Такой опыт можно получить на бесплатном практикуме от Айтилогии с поддержкой от опытных разработчиков на каждом этапе.

👉 Приходи на бесплатное обучение и зови с собой друзей

Бонусом получишь гайд для поиска работы и заказов на фронтенд-разработку.

Valid HK Phone Number

В Гонконге действительный телефонный номер имеет формат xxxx xxxx, где x - десятичная цифра (0-9). Определите две функции isValidHKPhoneNumber и hasValidHKPhoneNumber, которые возвращают, является ли заданная строка валидным номером телефона и содержит ли она валидный номер телефона соответственно (т.е. значения true/false).

Пример:
isValidHKPhoneNumber("1234 5678") = true

👉 @seniorFront

Radios With Sliding Focus

Реализовано без использования JS.

👉 @seniorFront

Array.toLocaleString()

Метод массива toLocaleString() возвращает представление массива в виде строки, состоящей из результатов приведения каждого элемента массива к строке в соответствии с типом элемента и переданными параметрами локализации. В качестве разделителя значений используется символ определенный в соответсвии с параметрами локализации среды исполнения (',' или другой символ, используемый для разделения элементов в списке).

Для элементов массива, являющихся null или undefined, возвращается пустая строка.

Пример
Получим строку из массива с учётом локализации de-DE (немецкий язык и региональные стандарты чисел и дат Германии):

const array = [null, 50, 15000, new Date('2007-08-10')]
const arrayStr = array.toLocaleString('de-DE')
console.log(arrayStr)
// 50,15.000,10.8.2007, 03:00:00

Получим строку из того же массива с учётом локализации en-US (английский язык и региональные стандарты чисел и дат США) и указанием часового пояса:

 const array = [null, 50, 15000, new Date('2007-08-10')]
 const arrayStr = array.toLocaleString('en-US', {timeZone: 'Europe/Amsterdam'})
 console.log(arrayStr)

// 50,15,000,8/10/2007, 2:00:00 AM

👉 @seniorFront

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