​Как очистить карму своему коду?

Часто ли у так бывает, что вы встречаете плохой код и мысленно ругаете автора?
А потом приходите к выводу, что код не так уж и плох, и автора ругали зря… Но осадок-то остался!

В общем, медитировал я давеча перед монитором, и посетил меня код с картинки:
Вслед за этим кодом меня посещает, конечно, Негативная Эмоция. Недоумение.
Почему надо делить на сто и тут же умножать на сто?
Зачем надо прибавлять сто и делать на сто? Что тут вообще происходит? WTF?

Разгадка
В ходе дебага выясняется, что код этот вполне работает. Поскольку речь идёт о целых числах, то при делении на 100 результат округляется, а при повторном умножении на сто получается меньшее число. Например, из 666 получается (666/100) * 100 = 6*100 = 600. То есть значение округляется до ближайшей сотни.

Что получается? Код как бы есть, он как бы работает, то есть обвинить программиста как бы и не в чем. Но в то же время я потратил силы, чтобы в нём разобраться, а самое главное — я произнёс вслух "What The Fuck" что увеличило мою карму на единичку.

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

👉 @seniorFront

Prompt engineering — путь к эффективной работе с ChatGPT

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

Какие темы обсуждаются:
- Поговорим о GPT;
- Разберёмся, зачем нужны промпты;
- Рассмотрим фреймворки для создания промптов;
- Создадим ассистента архитектора.

👉 @seniorFront

Tab bar active animation

Создано на HTML и SCSS. В JS реализована логика переключения классов при нажатии на элемент меню.

👉 @seniorFront

В ПСБ Цифровая лаборатория есть программа, по которой платят 100 000 руб. за рекомендацию в ИТ.

Деньги придут, как только рекомендованный вами сотрудник пройдет испытательный срок.На какой стек и с каким опытом ищем ИТ-специалистов — смотреть тут.

Проектов много. Работа стабильная, зарплата приличная.

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

Infinite Page Scrolling

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

👉 @seniorFront

Турецкий продавец мороженного покоряет фронтенд

👉 @seniorFront

Shattered popup

При нажатии частицы генерируются в JS и затем анимируются в SCSS.

👉 @seniorFront

CSS / SVG Blobby Background

Это SVG картинка, анимируемая в CSS.

👉 @seniorFront

Change Background Image on Scroll

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

👉 @seniorFront

Cool Layout with Complex Chainable Animation

Создано и анимировано на HTML и SCSS.

👉 @seniorFront

Bananas

Вам дана последовательность букв a, b, n, сколькими способами вы можете составить слово «banana», вычеркивая разные буквы и читая его слева направо?
(Используйте - для обозначения перечеркнутой буквы)

Пример:

Ввод:

bbananana

Вывод:
b-anana--
b-anan--a
b-ana--na
b-an--ana
b-a--nana
b---anana
-banana--
-banan--a
-bana--na
-ban--ana
-ba--nana
-b--anana

👉 @seniorFront

Попытка создать идеальный компонент формы

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

Под сложными кейсами я имею ввиду, например:
- Значение поля не примитив, а объект или массив (или Map/Set)
- Нужна возможность задать стейт вне инпута/очистить какое-то поле или ресетнуть всю форму, т.е. более продвинутый API, а не просто возможность вытащить данные из инпута
- Нужна продвинутая валидация, например возможность провалидировать только выбранные поля формы или одно поле на основе значения из другого или задать свою функцию валидации (например проверить, что логин свободен)

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

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