Array.values()

Массив в JavaScript имеет различные методы для перебора элементов. Например, map() или forEach(). Но иногда удобнее работать не с самим массивом, а с итерируемым объектом.
Метод values() возвращает новый объект-итератор, созданный из значений элементов массива. Подробнее о том, что такое итератор, можно прочитать в посте «Итератор».

Пример:
const array = [1, 2, 3]
const iterator = array.values()

for (const item of iterator) {
console.log(item)
}
// 1
// 2
// 3

👉 @seniorFront

Skating bunny

Реализовано на canvas при помощи библиотеки Three.js

👉 @seniorFront

Что значит быть хорошим разработчиком: 11 полезных советов от сеньора

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

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

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

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

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

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

6. Изучайте не только свою предметную область, но и соседние.
Важно знать общие принципы создания программного продукта. Если вы в будущем хотели бы возглавить подразделение, важно иметь представление о задачах и процессах каждого участника команды.

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

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

9. Учитесь писать хорошие тексты.
Разработчику приходится много писать — письма коллегам и клиентам, комментарии к коду, техническая документация. Важно, чтобы тексты были понятными. Это существенно сократит объём коммуникаций, освободив время для решения других задач.

10 Тренируйтесь искать информацию.
Для многих задач уже существуют готовые решения. Хороший разработчик не будет изобретать велосипед и воспользуется другими наработками. Умение находить ответы на свои вопросы — важный скилл, развитию которого нужно уделять внимание.

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

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

👉 @seniorFront

Photo editor UI

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

👉 @seniorFront

2D to 3D Image Hover Effects

В этом видео создаётся эффект 3D при наведении на элемент при помощи CSS трансформаций.

👉 @seniorFront

Мидлы маскируются под стажеров, чтобы задать сеньору вопрос по своей проблеме.

👉 @seniorFront

Stacked Cards with Autoplay

В JS создана функция перелистывания карточек, которая запускается по заданному интервалу.

👉 @seniorFront

Cards animation

Создано на чистом CSS. При наведении запускаются CSS трансформации.

👉 @seniorFront

Liquid Blast Effects

В этом видео создаётся эффект взрыва частиц при наведении. В JS генерируются частицы, которые затем анимируются в CSS.

👉 @seniorFront

Accessible Horizontal Accordion

Свёрстано на HTML и CSS. Логика переключения реализована в JS.

👉 @seniorFront

Check same case

Создайте функцию, которая принимает две буквы и проверяет, в одном ли они регистре (обе строчные или обе заглавные).

Примеры:
'a' and 'g' returns 1
'A' and 'C' returns 1
'b' and 'G' returns 0
'B' and 'g' returns 0
'0' and '?' returns -1

👉 @seniorFront

Берем ответственность за вопросы: как задавать их правильно

Умение правильно задавать вопросы — это навык, который можно развить. И нужен он не только менеджерам и тимлидам, а всем, потому что мы задаем много вопросов по работе каждый день.

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

👉 @seniorFront

Как создать радиальный градиент в CSS?

Функция radial-gradient используется для задания фона в виде радиального (кругового, эллиптического) градиента.

Самый простой градиент задаётся двумя цветами.
.element {
background-image: radial-gradient(#6e4aff, #49A16C);
}

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

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

Форма градиента задаётся ключевым словом circle или ellipse (по умолчанию).

Мы можем задавать положение центральной точки, используя те же ключевые слова, что и для background-position, но с приставкой at: at left, at top, at right, at bottom, at center (по умолчанию). Значения можно сочетать, чтобы поместить центр градиента в нужный угол элемента: at top left — центр градиента в верхнем левом углу.

Neon lights

Стилизовано в SCSS. В JS создана логика перемещения светящегося блока.

👉 @seniorFront

Шпаргалка по XPath и CSS-селекторам

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

В этой статье представлены шпаргалки по разным селекторам, причем в разрезе «Вот он в CSS и он же в XPath» для сравнения.

👉 @seniorFront

​Памятка наемного айтишника

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

В этой заметке перечислим, о чём важно помнить, работая по найму.

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

«Больше работы» не означает «больше денег». Не стоит делать больше работы за ту же зарплату. Возможным исключением является наличие в компании чёткого процесса повышения, который требует большего количества усилий. В противном случае, есть шанс за тяжёлый труд получить только благодарность в виде грамоты.

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

«Взять отпуск» — не значит «сбежать». Используйте отпуск и больничный, чтобы отдохнуть. Отпуск и больничные — гарантированный Конституцией отдых. Не использовать его — всё равно что не тратить зарплату.

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

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

Зарплата — не коммерческая тайна. Работодатель не имеет права запретить вам раскрывать сумму зарплаты. Единственной целью сокрытия размеров ЗП является желание работодателя платить меньше.

Работодатель должен не только зарплату. Ещё должен обеспечивать условия труда, регламентированные в Трудовом кодексе и в иных документах.

Вывод: на первое место ставьте себя и семью. Знайте и отстаивайте свои права. Работа не цель, она только даёт ресурсы на достижение ваших целей.

👉 @seniorFront

LightShadowEffect

В JS создан обработчик события mousemove, в котором изменяются параметры тени и положение источника света.

👉 @seniorFront

Slider Controllable with Mouse Wheel

В этом видео создаётся слайдер, переключаемый колесиком мыши. Для этого в JS создается обработчик события 'wheel'.

👉 @seniorFront

🚀Онлайн-Хакатон Practice & Scale AI 

Тебя ждут увлекательные мастер-классы, командная работа над актуальными кейсами, возможность представить свои результаты на захватывающей питч-сессии и доказать, что ты лучший из лучших! 🔝 

🧑‍💻Уникальные кейсы:
- Рерайтинг текста с помощью ИИ для прохождения фильтрации распознающих систем;
- Анализ звонка на соответствие скрипту для выявления отклонений;
- Создание видео на основе фото и текстового сценария.

🏆Призовой фонд 500 000 рублей!

Приступай к разработке решения уже сейчас, чтобы 23 июня представить лучший продукт - мы ждем: крутые решения в программном коде проекта, потенциал для рыночной масштабируемости и внедрения в бизнес.
 
📅Когда: 21 - 23 июня 2024 года
🌐Формат: Онлайн
🔥Дедлайн регистрации: 19 июня 2024 года, 23:59 (мск)

Подробности и регистрация: https://tglink.io/c89b4d2442e3

В конце концов всё равно берёшь

👉 @seniorFront