Senior Frontend - javascript, html, css

2023-05-12 18:00:50 Add Button Interaction

Это svg картинка, анимированная при помощи сервиса SVGator.

@seniorFront Открыть/Комментировать

2023-05-12 12:02:42 Это — Антон Резник, у него более 12 лет опыта во фронтенд-разработке. Кто, если не он, научит вас делать серьёзный фронтенд?

Антон с нуля создал веб-версию Telegram на базе собственной реализации реактивного UI-фреймворка. А ещё однажды он написал систему «Умный дом» для своей квартиры на чистом JavaScript!

Сейчас Антон тимлид в команде рекламы ВКонтакте, где создаётся frontend нового рекламного кабинета. Его работа состоит из сложных архитектурных решений, задач производительности и интеграций с другими командами.

Вместе со своими коллегами с не менее классным опытом, Антон собрал весь свой опыт воедино на курсе Frontend. По секрету расскажем, что там действительно много практики и инсайтов индустрии.

Так что если вы junior+ или middle фронтендер и хотите научиться работать над масштабными проектами, вам сюда!

Новый поток стартует 18 мая, а по промокоду SENIORFRONT20 вы получите скидку 5%. Советуем начать учиться прямо сейчас, так как с 15 мая цена на курс поднимется.

Начать обучение Открыть/Комментировать

2023-05-11 15:00:43 @seniorFront Открыть/Комментировать

2023-05-11 10:01:17 Order button animation

Анимация реализована при помощи библиотеки gsap.

@seniorFront Открыть/Комментировать

2023-05-10 22:00:22 Login Form

В этом видео создается анимированная форма входа на HTML и CSS.

@seniorFront Открыть/Комментировать

2023-05-10 18:00:47 Bouncy Block Clock

Оригинальные часы, логика работы которых создана в JS. Анимации реализованы в CSS.

@seniorFront Открыть/Комментировать

2023-05-09 19:05:08 Sparkly Button

Эффект при наведении создается при помощи теней и CSS анимаций.

@seniorFront Открыть/Комментировать

2023-05-09 12:05:22 ​Способы стать лучшим разработчиком

Управление продуктом
- Учитесь проводить исследования и делать выводы на их основе.
- Изучите несколько способов документирования требований (Jobs to be Done, истории пользователей в Given-When-Then и т.д.)
- Изучайте и практикуйте общение с заинтересованными лицами(стейкхолдерами).
- Устройте интервью с менеджером по продуктам (оплатите ему обед или кофе). Это будет крайне полезный опыт, я обещаю. Смотрите интервью менеджеров по продуктам в интернете.
- Изучите лучшие техники по общению с подчиненными и мотивации людей непосредственно без прямого управления. Научитесь влиять на других.
- Узнайте, как тестировать идеи, проверять варианты с помощью A/B или многовариантного тестирования.
- В вашей нынешней компании возьмите на себя ответственность предлагать инновационные идеи и применять неординарный подход к проблемам.
- Слушайте различные подкасты про менеджмент и другие источники информации, которые помогут вам расти.

Управление проектами
- Изучите некоторые приемы и методы управления проектами/программами.
- Улучшите свои навыки тайм-менеджмента.
- Изучите несколько инструментов для управления проектами, таких как Jira, Asana, Trello.
- Узнайте, на какие этапы делятся большие проекты. Например, что нужно, чтобы построить мост или здание.

Маркетинг
- Узнайте от корки до корки о SEO, платном поиске, рефералах, email-маркетинге, социальном маркетинге и т.д.
- Узнайте о контент-маркетинге, копирайтинге и используйте свои навыки письменного общения, чтобы делиться с людьми решениями их проблем, продвижением продуктов и т.д.
- Соберите примеры лучших продающих текстов, рекламы и других материалов для дальнейшего использования в качестве источника вдохновения.
- Выучите базовую аналитику (включая инструменты и подходы), воронку конверсии, отток и другую метрику, которую вы бы хотели использовать в вашем маркетинге.
- Читайте топовые книги по маркетингу, влиянию на людей и брендингу. Например, «22 Непреложных Закона Маркетинга» и другие.

@seniorFront Открыть/Комментировать

2023-05-08 19:02:05 Futuristic Dial Button

Свёрстано на HTML и SCSS. В JS прописана логика смены классов при нажатии на кнопки.

@seniorFront Открыть/Комментировать

2023-05-08 10:00:47 Как работает механизм "hoisting" в JavaScript?

"Hoisting" - это механизм, который позволяет переменным и функциям быть объявленными в коде после того, как они будут использованы. Когда JavaScript-код выполняется, он проходит через два этапа - "компиляция" и "исполнение". Во время "компиляции" JavaScript перемещает объявления функций и переменных в начало своей области видимости, позволяя им быть доступными в любой части блока кода. Однако, значения переменных не переносятся с верхушки блока кода, поэтому переменные, объявленные с помощью ключевого слова "var", будут иметь значение "undefined", если к ним обратиться перед их инициализацией.

Например:
console.log(x); // undefined
var x = 5;

В этом примере, компилятор переместит объявление переменной "х" в начало своей области видимости, но значение "undefined" будет присвоено этой переменной до её инициализации значением 5.

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