maxwell coding
208 subscribers
27 photos
1 video
89 links
Frontend разработка: новости, полезная информация, работа, практика, и многое многое другое.

Чат: @front_room
Download Telegram
📖 Одинаковые имена у разных сущностей

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

// Здесь `user` - это объект с данными пользователя:
function isOldEnough(user, minAge) {
return user.age >= minAge;
}

// А тут — имя:
function findUser(user, users) {
return users.find(({ name }) => name === user);
}


С первого взгляда их сложно различить, потому что имена «намекают», будто переменные значат одно и то же. Это может вводить в заблуждение; нам придётся помнить, что внутри функции findUser переменная user относится не к объекту пользователя, а к имени.

// Лучше выразить смысл переменной точнее прямо через имя:
function findUser(userName, users) {
return users.find(({ name }) => name === userName);
}


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

🛑Подпишись, чтобы не пропустить полезную инфу.
Please open Telegram to view this post
VIEW IN TELEGRAM
2🔥3👍222
📚 Вышло 2-е издание книги Грокаем Алгоритмы. А мне бы сперва 1-е дочитать. 👀

🖥 Подробнее на Хабре
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥32
▶ Стрим сегодня вечером в 19:00 по МСК.

⌨️ Поработаем над функционалом по сжатию картинок, чтобы подгружать их на сервак в оригинальном и сжатом форматах. Все это делается для оптимизации прорисовки в приложении.

🔧 Чекнем какие есть готовые либы для решения данной задачи.

🙊 Буду читать чат и отвечать на вопросы.

🔗 Ссылка на стрим.
Please open Telegram to view this post
VIEW IN TELEGRAM
🫡1
▶ Стрим как обычно в 19:00 по МСК. Можно сказать, что я уже подошел к заключительной стадии проекта на этапе MVP. Сегодня будет много рефакторинга JavaScript/TypeScript.

🙊 Также буду читать чат и отвечать на вопросы.

🔗 Ссылка на стрим.
Please open Telegram to view this post
VIEW IN TELEGRAM
🏆 Самый популярный язык программирования

В этом году 👩‍💻 Python стал самым распространённым языком программирования на GitHub вместо 👩‍💻 JavaScript. За ними в топе идут 👩‍💻 TypeScript и 👩‍💻 Java.

Также растёт востребованность языков для системного программирования вроде 👩‍💻 Rust.

На 92% выросла популярность инструмента Jupyter Notebook. Напишите в комментариях, если кто-то уже работал с этим сервисом, и поделитесь впечатлениями.

🖥 Подробнее
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥211
📊State of Frontend 2024. Результаты опроса по состоянию Frontend за 2024 год от The Software House.

✏️ Опрос получил 6028 ответов от специалистов из 139 стран. Ниже приведу только топ 3 из всех ответов на некоторые вопросы.

🛑Какая у вас позиция?
1️⃣Full-stack Developer - 33.5%
2️⃣Senior Frontend Developer - 32.2%
3️⃣Mid Frontend Developer - 20%

🛑Какой у вас формат работы?
1️⃣Удаленка - 44.5%
2️⃣Гибридный - 32.2%
3️⃣Офис - 12.8%

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

🛑Какие фреймворки вы использовали?
1️⃣React
2️⃣Vue
3️⃣Svelte

🛑Какие библиотеки вы использовали для валидации данных?
1️⃣zod
2️⃣joi
3️⃣class-validator

🛑Какие инструменты для стилизации вы использовали?
1️⃣Чистый CSS
2️⃣Sass/SCSS
3️⃣Tailwind CSS

🛑Какое решение для дизайн системы вам больше всего нравится?
1️⃣shadcn/ui - 28.1%
2️⃣MUI / Material UI - 21.5%
3️⃣Bootstrap - 11.7%

🛑Какой ваш любимый редактор кода?
1️⃣Visual Studio Code - 75.1%
2️⃣JetBrains IDE (eg. WebStorm) - 17.8%
3️⃣Vim - 3.1%

🖥 Подробнее вы можете почитать тут. Советую ознакомиться, т.к. там очень много интересной информации.

🛑И не забудь подписаться.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6
🥊 Необычные вопросы с собеседований или как отсеять накрутчиков

👦 Давным давно, когда я ещё вкатывался в Frontend, проходил собес на стажировку в одну индусскую компанию. И вот интервьюер задаёт мне такую устную задачку:

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


⚔️ Самое первое, что пришло мне в голову, это грубое решение - начать с первого этажа сбрасывать мяч, поднимаясь вверх, пока не дойдешь до нужного.

🧠 Затем, я предложил иное решение - а что если мы начнем с середины? Интервьюер одобрительно кивнул головой.

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

✏️ А что вы думаете на счет такого типа вопросов? Помогут ли они на самом деле отсеять недобросовестных или слабых соискателей?

🛑И не забудь подписаться.
Please open Telegram to view this post
VIEW IN TELEGRAM
📖 Фрактальная архитектура

🕵️‍♂️ Код с лишними деталями «шумит», его сложно читать и держать в голове.

🧠 Все мы знаем и умеем уменьшать количество шума в коде с помощью абстракции, вынося код в отдельные функции. Но мне всегда было интересно - на какое максимальное количество функций мне необходимо поделить код?! Конечно же тут все случаи индивидуальны: какой-то код можно поделить на 5 частей, а другой - на 10, и это зависит от различных условий: общие правила, паттерны, личный опыт и видение программиста, архитектура и видение команды/проекта, и т.д.

😎 Но все же, чем меньше кода перед глазами, тем легче нам его анализировать. Нам стоит следить за тем, насколько сложно «держать кусок кода в голове». Если приходится напрягаться, чтобы помнить обо всех деталях - в коде есть проблема.

💡 Марк Симанн предлагает писать программы так, чтобы на каждом «уровне детализации» количество составных частей не превышало некоторый лимит, т.е. о чем я и говорил выше - максимальный лимит функций, на которые мы делим код.
В качестве лимита Марк предлагает число 7️⃣. Он опирается на предпосылки, что мы можем держать в голове 7️⃣+-2️⃣ объекта. При этом он оговаривается, что конкретное число не принципиально, главное - наличие такого лимита.

🌸 Для визуализации «уровней» он предлагает использовать сетку из шестигранников. Каждый шестигранник - это часть системы, которая может быть детализирована глубже, на такие же шестигранники.

⬇️ На каждом из уровней детализации мы будем видеть не больше 🔤 составных частей, важных для этого уровня. Если нам требуется узнать, как работает конкретная часть, то мы можем «провалиться» на уровень ниже и увидеть, из чего она состоит (см. картинки).

🤔 А что вы думаете на счет данного подхода?

📖 Далее продолжу делиться полезной инфой по мере чтения книжки.

🛑Подпишись, чтобы не пропустить.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
🤖Появился китайский конкурент ChatGPT — чат-бот Qwen.

🖥 На выбор доступны 8 моделей, две из которых с поддержкой распознавания изображений и одна (Turbo) — с входным контекстом размером 1 миллион токенов.

⚡️ Работает полностью бесплатно и без VPN. Для регистрации хватает иметь email.

⌨️ Говорят, что очень хорошо помогает по кодингу.

😎 Я обычно прибегаю к помощи Chat GPT иногда по работе. Теперь немного поиграюсь и с этой нейронкой. Посмотрим, как она себя покажет. Позже поделюсь результатами.

🛑Подпишись, чтобы не пропустить.
Please open Telegram to view this post
VIEW IN TELEGRAM
2🔥5👍1
🥷 Вопросы/задачи с собесов не всегда могут адекватно оценить уровень кандидата. Ниже процитирую одну историю из Linkedin.

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

Вот почему:

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

История:

У нас был кандидат, который поразил нас во время дискуссий и решения реальных задач, но он провалил whiteboard задачи (это когда надо решать без помощи IDE).

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

Результат?

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

Это стало для меня важным уроком:

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

Вместо этого нам следует рассмотреть следующие варианты:
🛑Проектные задания, повторяющие реальные задачи;
🛑 Обзоры портфолио, которые подчеркивают прошлые достижения;
🛑 Совместные упражнения, такие как парное программирование.


✏ А что вы думаете на счет этой истории?

🛑И не забудь подписаться
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
🔍 Потестил Qwen и Chat GPT в рамках несложных задач на этой неделе. К примеру, давал им задачи по TypeScript, проблемам настройки Expo, и настройки линтинга. Во всех случаях Chat GPT оказался лучше. По крайней мере его ответы понравились мне больше. Особенно по TypeScript - там не было единственного решения, но в итоге ChatGPT выдал простое и рабочее, которое я лишь немного доработал.

🚙 Кстати, в случае с Owen я использовал две модели - Qwen2.5-Turbo и Qwen2.5-Plus.

☺️ Не буду пока что рубить с плеча - Qwen только недавно вышел в свет. Еще буду тестить, посмотрим что получится. Если будет что-то интересное, то поделюсь результатами.

🛑Подпишись, чтобы не пропустить
Please open Telegram to view this post
VIEW IN TELEGRAM
⌨️ Переписал проект с JS на TS.

👩‍💻 Тот самый старый блог на React.

Пошагово прошелся по всем частям проекта и показал как все мигрировать на JS:
🛑Обычные JS файлы (с константами, функциями, и т.д.);
🛑Компоненты;
🛑Пропсы;
🛑События;
🛑Код, связанный с подключенными библиотеками.

🔗Ссылка на видео

🛑Не забудь подписаться
Please open Telegram to view this post
VIEW IN TELEGRAM
2🔥6
😎 Что такое сложность кода? И как ее измерить?

🕵‍♂ СЛОЖНЫЙ_КОД содержит много деталей, которые приходится держать в голове, чтобы его понять. К примеру, там может быть много условий, циклов, они вложены друг в друга, и чтобы разобраться в том, что там происходит, потребуется потратить много времени и усилий. Видите наверно такое в пулл реквестах на работе, да?

✏ Как мы знаем из уроков по информатике, каждое ветвление - это отдельный путь, по которому программа может завершить свою работу. Так вот, каждый такой новый путь усложняет код и добавляет в него новый способ пройти от начала до конца. Чем больше разных путей, тем сложнее нам одновременно держать их в голове. Количество путей, по которым можно пройти от начала функции до её конца, называется цикломатической сложностью (Cyclomatic Complexity) функции.

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

🧠 Есть способы решения этой проблемы:
🛑Вынесение кода в отдельные функции;
🛑Вынесение констант;
🛑Применение раннего возврата. Как говорится, плоское лучше вложенного;
🛑Упрощение условий с применением законов Де Моргана;
🛑Применение паттерн-матчинга (еще это называют словарями), то есть когда мы создаем объект и по ключам быстро обращаемся в нем к нужным данным.

В 👩‍💻 ESLint есть специальное правило - complexity, которое позволяет контролировать сложность кода функции. Считаю, что это очень полезная штука в проекте, где есть начинающие программисты.

📖 Далее продолжу делиться полезной инфой по мере чтения книжки.

🛑Подпишись, чтобы не пропустить.
Please open Telegram to view this post
VIEW IN TELEGRAM
5👍6
😄 Пишет создатель FastAPI (фреймворк на Python)

На днях я увидел объявление о работе.
Требовалось 4+ лет опыта работы в Fast API.
Я не смог подать заявку, так как у меня всего 1,5+ года опыта с тех пор, как я создал эту штуку.
Возможно, пришло время пересмотреть принцип «годы опыта = скилл».
Please open Telegram to view this post
VIEW IN TELEGRAM
1😁18💯1
📱Если вы когда-либо и хотели заняться разработкой мобильных приложений, зная JavaScript, то сейчас самое время, когда стоит присмотреться к React Native.

🕵️‍♂️ Вот хорошая статья, в которой найдете аргументы.

😎 Если кратко, то вот:
1️⃣ У React Native очень большое сообщество, которое занимается разработкой и улучшениями. В этом участвуют такие большие акулы, как Meta (запрещенная в России организация), Microsoft, и Expo;
2️⃣Большая экосистема инструментов, для решения разного рода задач из коробки;
3️⃣В последних обновлениях была представлена Новая Архитектура (New Architecture), написанная полностью на 👩‍💻, что позволило значительно увеличить производительность;
4️⃣React Devtools работает из коробки и позволяет дебажить код как мы все привыкли в инструментах разработчика в браузере;
5️⃣Фреймворк Expo стал намного лучше и приятнее, и сейчас является рекомендацией №1 от самой команды RN в качестве входной точки в разработку на RN. Это позволило значительно сократить порог входа, т.к. много чего уже работает из коробки;
6️⃣Как же без Flutter. В течение длительного времени Flutter и RN конкурировали, выясняя кто круче в кроссплатформенной мобильной разработке. На данный момент, RN уже вырвался вперед. И Flutter был форкнут командой Flock.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7
😃 Разница между джуном и синьором

😐 А как бы мидл сделал?
Please open Telegram to view this post
VIEW IN TELEGRAM
😠
Please open Telegram to view this post
VIEW IN TELEGRAM
73🔥11