Collapsible Timeline

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

👉 @seniorFront

​Путь к мастерству в программировании

Привет, кодер! Неважно, новичок ли ты, отлаживающий свою первую программу «Hello World», или опытный инженер — у каждого из нас всегда есть возможность улучшить свои навыки. Эта статья для тех, кто хочет поднять свои существующие скиллы на новый уровень.

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

- «Чистый код» Роберта Мартина. Эта библия качества кода должна быть на полке каждого разработчика. Дядюшка Боб проповедует искусство создания чистого, читаемого кода в этой и многих других своих работах.

- «Прагматичный программист» Ханта и Томаса. Этот классический том наполнен практической мудростью по программированию, советами по избеганию запутанного кода, привычками для выработки и отношением, которое следует принять.

- «Практическое объектно‑ориентированное проектирование на Ruby» от Санди Метц. Эта книга предлагает бесценные идеи в понимании написания модульного, понятного объектно‑ориентированного кода, применимого к любому ОО языку. В ней будут советы о создании умных абстракций с объектами и классами, минимизации зависимостей между компонентами и избегании ужасных «монстр‑классов» из тысяч строк кода.

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

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

Алгоритмы — это сердце программирования. Они представляют собой точно определенные пошаговые процедуры для преобразования входных данных в выходные. Оттачивание своих навыков в переводе реальных задач в эффективные алгоритмические решения должно быть пожизненной целью.

Такие сайты как LeetCode, HackerRank и Codewars предлагают огромные каталоги задач по программированию и алгоритмических головоломок для решения.

👉 @seniorFront

​Почему конфликтуют тестировщики и разработчики, и как этого избежать

О взаимоотношениях и специфических противоречиях тестировщиков и разработчиков сегодня сложено немало анекдотов. Но представителям двух профессий важно уживаться в единой экосистеме для решения задача работодателя и заказчиков.

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

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

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

Сторона тестировщика
Тестировщик нацелен на разрушение, то бишь предвзятое выискивание чужих ошибок, доводя систему динамическим тестированием до состояния отказа. Попробуйте вспомнить, радовались ли когда-нибудь человеку, приходящему со списком ваших ошибок в работе, на которую ушла уйма времени? Это довольно трудно себе представить, даже если в целом понимаете, что это просто алгоритм рабочего процесса и так заведено. Встреча со специалистом по тестированию сама по себе несёт скрытый мотив — «ты не профи». Согласитесь, что психологическая сторона такого контакта вполне органично может приводить к пассивной агрессии со стороны разработчика созданного продукта и провокацией трений.

Корень конфликта
Таким образом, мы обнажили корень конфликта — разные цели! Когда у людей разные цели, как их не объединяй, они всё равно будут идти каждый своей дорогой, по итогу – в разные стороны.

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

👉 @seniorFront

Responsive Portfolio

Это полноценная страница-портфолио, свёрстанная в стиле macOS на HTML и CSS.

👉 @seniorFront

💸 Апгрейд твоей карьеры - Начни зарабатывать или получи в x3 текущего дохода в Web3

🔝@TopSelectionWeb3 раскроет секреты, как кратно увеличить свой доход, работая в Web3/блокчейн-проектах.

👤 Кто проведет? Тина🦄 — CTO и Product Owner в TopSel, победитель хакатона Binance

Почему стоит прийти на эфир:

• Ты узнаешь, что такое Web3 и блокчейн-проекты, и какое разнообразие они предлагают
• Раскроем мифы и реальные факты о блокчейне и криптовалютах
• Поймешь, подходит ли тебе карьера в Web3, и как сделать первый шаг в этом направлении
• Откроем для тебя новые тренды и технологии, а также подарим порцию мотивации для старта твоей карьеры в мире Web3
• Бонус 🎁: в конце поделимся подробностями про старт нашего карьерного Буткампа и Web3-хакатона!

📆 Сохраните дату: 14 марта в 19:00 мск

Увидимся на эфире!🚀
@TopSelectionWeb3
#Эфир #web3 #буткамп #хакатон

CSS Javascript Animation Effects

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

👉 @seniorFront

Когда учил алгоритмы вместо вёрстки, чтобы устроиться на работу

👉 @seniorFront

Skeuomorphic Range Slider

Поверх элемента input создано несколько вспомогательных элементов, зависящих от значений CSS переменных. Эти значения изменяются в JS при срабатывании события input.

👉 @seniorFront

Eletric Spinner

Размытие реализовано при помощи svg картинки. Всё остальное свёрстано и анимировано на HTML и SCSS.

👉 @seniorFront

CSS Animation Effects

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

👉 @seniorFront

Are the numbers in order?

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

Пример:
inAscOrder([1,2,4,7,19]); // true
inAscOrder([1,2,3,4,5]); // true
inAscOrder([1,6,10,18,2,4,20]); // false

👉 @seniorFront

Насколько потолстел JavaScript к 2024 году?

В этой статье автор статьи решил проанализировать популярные сайты и сервисы на предмет объема загружаемого JS кода. И пришел к неутешительным выводам: Например, Gitlab требуется 13 МБ кода, а именно 500К строк JS, просто для отображения статичного лендинга.

Ставь 🔥, если твой лендинг подгружает меньше 1 МБ.

👉 @seniorFront

​​Element.closest()

Метод Element.closest() ищет и возвращает ближайший (начиная с самого элемента) родительский элемент, соответствующий указанному CSS-селектору. Если ни один элемент не соответствует указанному CSS-селектору, возвращается null.

Типичный пример использования Element.closest() — определение области действия при клике. Допустим у нас есть множество кнопок, находящихся во вложенных контейнерах. Необходимо найти ближайший к нажатой кнопке контейнер.
<div class="container main-container">
   <button id="1">Кнопка 1</button>
   <div class="container parent-container">
     <button id="2">Кнопка 2</button>
     <div class="container child-container">
       <button id="3">Кнопка 3</button>
     </div>
   </div>
</div>

Для решения задачи достаточно добавить только один обработчик события click:
const mainContainer = document.querySelector('.main-container')

mainContainer.addEventListener('click', function (e) {
   const targetElem = e.target

   if (targetElem.tagName !== 'BUTTON') {
     // Eсли клик выполнен не на кнопке ничего не делаем
     e.stopPropagation()
     return
   }

   const containerElem = targetElem.closest('.container')
   // Выводим в консоль контейнер, содержащий нажатую кнопку
   console.log(containerElem)
})

👉 @seniorFront

Animated Covers

Здесь реализовано множество простых анимаций при наведении на блок.

👉 @seniorFront

​Что выбрать опытному разработчику? Фриланс vs агентство

Существует миф, что на фрилансе разработчику можно заработать больше, чем работая на агентство. Может быть, это бы и было так, если бы разработчики умели себя продавать. По статистике, если взять двух специалистов с абсолютно одинаковыми hard- и soft-скиллами, но один из них работает на крупного интегратора, а другой - на фрилансе, стоимость их часа будет отличаться как минимум в два раза. Причем не в пользу “свободного плаванья”. Итак, почему же на интегратора работать выгоднее?

Умение продавать
Это, пожалуй, первое и основное. В крупном агентстве работает целый штат маркетологов, которые могут донести ценность услуг своих сотрудников до нужной аудитории. И эту ценность крупный интегратор добавляет к стоимости часа. Здесь уже не придется бороться со своим “синдромом самозванца”, мучиться на тему “дорого или не дорого беру” и других психологических загонов. Просто читаешь свою анкету на сайте и понимаешь, насколько ты крут.
Ценность, которую необходимо создать, делится на два показателя:
1. Выгода: помощь вашему клиенту в увеличении дохода, прибыли, узнаваемости, репутации.
2. Боль: помощь вашему клиенту в снижении затрат, рисков, проблем.

Сложности общения с клиентом
Знаем по опыту, что разработчики часто интроверты и им сложно много общаться с людьми. Особенно со “сложными” клиентами. С этим часто связано и достижение потолка чистой прибыли на фрилансе. Ведь важно не только качественно предоставлять услуги и выполнять «объемы работы», но и решать проблемы заказчиков, заниматься исследованием, задавать много вопросов и анализировать.

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

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

👉 @seniorFront

Как минимизировать конфликты между разработчиками и тестировщиками

1. Минимизируй конфликтные ситуации, результаты тестирования необходимо представлять в максимально нейтральном виде, ориентированном на факты, а не на критику автора.

2. Цели и задачи работы должны быть ясны. Не ленитесь лишний раз убедиться, что достигли взаимопонимания, спрашивай себя, верно ли тебя понял визави.

3. Обе стороны должны помнить о единой цели – максимально качественно работающая система.

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

5. Подключай эмпатию, старайся учитывать чувства коллеги.

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

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

👉 @seniorFront