Senior Frontend - javascript, html, css


Гео и язык канала: Россия, Русский
Категория: Технологии


Senior Front - канал для frontend программистов, практические задачки, проверки знаний, интересные статьи
Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront
Менеджер по рекламе: @Spiral_Yuri

Связанные каналы  |  Похожие каналы

Гео и язык канала
Россия, Русский
Категория
Технологии
Статистика
Фильтр публикаций


На витрину Яндекс Маркета после проверки — за 20 минут

Яндекс Маркет сократил время завершения проверки нового товара до его появления на витрине. Теперь оно занимает 20 минут вместо 2,5 часов.

Также в карточках товара появились артикулы. С их помощью продавцы могут получить прямую короткую ссылку на свои товары и использовать её для продвижения в соцсетях и других каналах.


Узнать больше

#реклама
О рекламодателе


Видео недоступно для предпросмотра
Смотреть в Telegram
Image Slider

В этом видео создается слайдер картинок с нуля на JS.

👉 @seniorFront


Как стать востребованным разработчиком
(Лекция без воды)


Классика IT: учите и отрабатываете одно, а в вакансиях видите другое. По итогу злитесь и начинаете по-новой.

А нужно получить набор знаний и навыков, которые востребованы в реальных проектах.

К примеру, на старте вам не нужно знать все паттерны проектирования. Знаний ООП и принципов SOLID будет вполне достаточно. А стандартный pet-проект с простейшими crud-операциями в вашем CV далеко не то, что хотят видеть рекрутеры.

Чтобы узнать, какие ключевые hard и soft skills качать в первую очередь, как искать лучшие вакансии в IT, сделать портфолио идеальным для работодателя и получить желанный оффер от 100 000 рублей, приходите на онлайн-эфир от «FAANG School».

Мастер-класс
проведет разработчик из BigTech-компании с многолетним опытом.

Переходите
, полезные подарки уже ждут:
- Подробный гайд «Как найти работу в IT»
- Пошаговый Roadmap по Java
- Шпаргалка «Hotkey JetBrains IDE»
- Шпаргалка по Rest API


Direction-aware 3D hover effect

В JS создана логика определения стороны, с которой приходит курсор пользователя и установки соответствующего CSS класса.

👉 @seniorFront


Отрицание, торг и принятие работы над проектом без документации

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

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

С таким мощным стимулом автор статьи и решила приступить к делу:

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

2. Анализ базы данных: База данных является краеугольным камнем любого проекта. Без глубокого понимания ее структуры невозможно построить четкую картину всего проекта. Поэтому мы начнем с детального анализа базы данных, чтобы убедиться, что мы имеем полное представление о ее структуре и связях между данными.

3. Создание сервисной карты: Давайте разложим все сервисы и их взаимосвязи на столе. Это поможет нам визуализировать работу нашей системы в целом и лучше понять ее архитектуру. Кроме того, это даст нам возможность выявить возможные узкие места и проблемные зоны, которые требуют дополнительного внимания.

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

5. Описание сценариев использования (use case): Представим себя в роли пользователя и опишем типичные сценарии использования нашего продукта. Это поможет нам лучше понять его функционал и потребности пользователей, а также выявить возможные улучшения и дополнительные функциональные требования.

6. Документация API с использованием Swagger: Документация API - это неотъемлемая часть любого современного проекта. Она позволяет другим разработчикам легко и эффективно взаимодействовать с нашим продуктом, используя наши API.

👉 @seniorFront


Ищем Frontend разработчика в ПСБ цифровая лаборатория
удаленка #frontend
Fulltime, удаленка/гибрид (РФ)
Проекты на выбор: интернет-банк для бизнеса, для физ. лиц, для корп. клиентов

💼 Что делаем:
- SPA приложение на Angular 10
- Пишем на TypeScript, JavaScript ES6 Modules, SASS
- Собираем WebPack
- Храним в Git
- Взаимодействуем с WebApi (.net core 2)

💡 Что важно для нас:
- Уверенные знания JavaScript
- Опыт работы с Angular, React, Vue
- ООП, классы, абстракции, шаблоны
- Современная верстка HTML 5 + CSS 3
- Понимание REST и как отправить, получить файл в формате json, отличать GET от POSТ
- Взаимодействие сnbsp;backend
- Опыт работы с системами контроля версий

💝 Что предлагаем:
- График 5/2
- Конкурентный уровень дохода
- ДМС, оплата отдыха или фитнеса, страхование
- Соц. поддержка
- Льготное кредитование
- Обучение

🔥 Подробнее о вакансии и откликнуться - по ссылке

Реклама. ООО "ПСБ ЛАБ". ИНН 7714436892.


Как провести первую ретроспективу и не облажаться?

Ретроспектива - взгляд в прошлое, это активность, в рамках которой, команда проводит анализ своей работы за определенный период времени: спринт, квартал, год. Также важно сказать, что ретроспектива может быть посвящена не только спринтам, но и задачам, процессам, подведению итогов года/проекта или просто, как активность для сближения команды.

С чего стоит начать подготовку и о чем необходимо задуматься заранее?

1. Определитесь с целью проведения ретроспективы. Что вы хотите обсудить с командой? К примеру: проанализировать спринт, подвести итоги года? Или же вы хотите выявить причины проблем, которые происходили в течении определенного периода времени.

2. Подготовьте презентацию, в которой отобразите вводную информацию для участников ретро: пояснение, что такое ретроспектива; цели; правила, повестку. Это буквально несколько слайдов, но благодаря этой презентации команда будет понимать, что ее ждет. Также, не мало, важно донести ценность мероприятия.

3. Важно определиться с форматом ретроспективы онлайн или оффлайн, а также предусмотреть соответствующие инструменты для комфортного проведения ретро. Если онлайн, то рекомендую популярную платформу Miro, в которой вы найдете шаблоны для ретроспективы на любой вкус, начиная от классических шаблонов Agile ретроспективы заканчивая тематическими (в стиле: стартрека; мультиков, путешествия) Есть и другие платформы: trello, confluence, retrius.

4. Мне очень помогает смоделировать возможные варианты введения мероприятия. Конечно, Вы не сможете предусмотреть все ситуации и кейсы, НО вы проработаете свой формат введения. Заранее продумайте введение ретроспективы; проблемы, которые Вы видите, используйте правильные вопросы: Что у нас получилось хорошо? Что Вас демотивировало? Что мы могли бы улучшить или сделать для более успешного результата?

5. Для того чтобы ретроспектива прошла удачно – будьте дружелюбны, старайтесь дать возможность каждому высказать свое мнение. Важно пресекать любые конфликты и только с помощью уважительной беседы разбирать недопонимания.

6. По результатам проведенной ретроспективы сформируйте документ, который отобразит вскрытые проблемы и недовольства, позитивные моменты, а также договоренности. Результаты ретро – это план, как избежать тех ошибок/проблем, которые возникли у вас в рамках работы.

7. Еще одно не менее важное действие – это сбор обратной связи: проведите опрос или просто спросите у коллег в Вашем чате команды: Понравилось ли эта активность и чего не хватило? Так скажем на будущее, чтобы развивать свои навыки по проведению ретроспективы.

👉 @seniorFront


Neuomorphic Checkboxes

Подборка оригинальных чекбоксов с иконками font-awesome.

👉 @seniorFront


Frontend meetup

1. Хоп, хлоп, и MVP готов — Дмитрий Карловский, HyOO
Нарисуем полноценный фронтенд без чат-ботов. Поднимем базу данных без сервера. Задеплоим всё на статический сервер без боли. И будем наслаждаться результатом без тормозов.

2. Причины деградации перформанса фронтенда — Денис Басковский, МТС Диджитал
Почему скорость железа не успевает за веб-приложениями. Причины большого количества JS-кода на сайте. SPA по 20мб уже действительность. Инструменты куда мы смотрим чтобы найти про лесы большого размера сайта. Графики скорости и восприятие клиентов. Почему скорость браузерной страницы лагает на 4090ti, а Cyberpunk идет на максималках.

3. Serverless - уже можно? — Андрей Лаврентьев, NDA
Опыт запуска проекта на cloudflare pages и трудности, с которыми пришлось столкнуться на каждом шаге.

Модератор Григорий Петров, Devrel, Evrone
Эксперт Глеб Михеев, Руководитель ПК, FrontendConf

➖➖➖

🗓 22 мая, начало в 19:00 мск, Среда

🌐 ОНЛАЙН

Регистрация на мероприятие


Реклама, ООО "Эвроне.ру", ИНН 3663057399


Атрибут novalidate

Атрибут отключает нативную валидацию формы со стороны браузера.

...

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

Например, поля с атрибутом required должны быть обязательно заполнены, и браузер укажет, если пользователь вдруг какое-нибудь из них пропустил.

Атрибут novalidate говорит браузеру не проверять поля и не препятствовать отправке формы, так как иногда подобное поведение бывает нежелательным. К примеру, форма проверяется при помощи JavaScript, и нужно избежать конфликтов с браузерной валидацией. В том числе, и убрать всплывающие подсказки, чтобы показать вместо них свои, кастомные.

👉 @seniorFront


И снова о useCallback

Во время собеседования, когда меня спросили про хук useCallback, я ответил, что его использование имеет смысл только тогда, когда функция передаётся из родителя в дочерний компонент, а сам дочерний компонент обёрнут в memo. В таком случае ссылка на функцию из пропсов, обёрнутую в useCallback, останется неизменной, если родитель был перерисован, и мы избежим лишней перерисовки дочернего компонента. Собственно, данный вопрос даже на Хабре разбирался неоднократно, в том числе с залезанием в исходники (например, вот). Здесь следует понимать, что даже если мы всё сделали так, как написано выше, но дочерний компонент принимает прочие аргументы (помимо мемоизированной функции), и эти прочие аргументы изменились - всё, ваш useCallback из родителя официально бесполезен. Уже на таком этапе. И вроде бы двое собеседующих со мной согласились, но следом прозвучал вопрос "а вы использовали useCallback в проектах?", что говорит о том, что моя трактовка посчиталась ошибочной. Как оказалось, с пониманием использования этого хука проблемы куда глубже.

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

👉 @seniorFront


Sort the number sequence

Вам дан массив положительных чисел, разделенных нулями.
[3,2,1,0,5,6,4,0,1,5,3,0,4,2,8,0]

1. Сформируйте подмассивы, которые будут разделяться нулями
2. Отсортируйте числа в подмассивах по возрастанию
3. Отсортируйте подмассивы по суммам их элементов

Примеры:
sortSequence([3,2,1,0,5,6,4,0,1,5,3,0,4,2,8,0]) should return
[1,2,3,0,1,3,5,0,2,4,8,0,4,5,6,0]

sortSequence([3,2,1,0,5,6,4,0,1,5,3,0,2,2,2,0]) should return
[1,2,3,0,2,2,2,0,1,3,5,0,4,5,6,0]

sortSequence([2,2,2,0,5,6,4,0,1,5,3,0,3,2,1,0]) should return
[2,2,2,0,1,2,3,0,1,3,5,0,4,5,6,0]

👉 @seniorFront


Canvas sprite-sheet bubbles

Пузыри генерируются и анимируются библиотекой gsap.

👉 @seniorFront


Видео недоступно для предпросмотра
Смотреть в Telegram
Awesome Javascript Animated Switch

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

👉 @seniorFront


Какой из перечисленных селекторов будет правильно стилизовать состояние focus кастомного чекбокса, даже если элемент `` находится не внутри элемента `.custom-checkbox`?
Опрос
  •   .custom-checkbox__input:focus + .custom-checkbox__label
  •   .custom-checkbox:focus .custom-checkbox__label
  •   .custom-checkbox:focus-within .custom-checkbox__label
  •   .custom-checkbox__label:focus
346 голосов




Видео недоступно для предпросмотра
Смотреть в Telegram
What's behind ?

Реализовано на canvas и THREE.js

👉 @seniorFront


Elastic Div

Логика изменения ширины контейнера реализована в JS, анимировано библиотекой gsap.

👉 @seniorFront


Видео недоступно для предпросмотра
Смотреть в Telegram
Тот самый гаджет, который помогает протянуть до пятницы

👉 @seniorFront


Видео недоступно для предпросмотра
Смотреть в Telegram
Circular Progress Bar

В этом видео создаётся анимированный индикатор на HTML, CSS и JS.

👉 @seniorFront

Показано 20 последних публикаций.