Расширения для VS Code

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

📌 Live Server позволяет быстро и легко запускать локальный сервер для разработки с автоматическим обновлением страницы при изменении файлов. Оно особенно полезно для разработки веб-приложений, где важно видеть изменения в реальном времени.

📌 Jest Runner позволяет удобно запускать тесты, написанные с использованием Jest, популярного фреймворка тестирования JavaScript. Jest Runner облегчает запуск и отладку тестов прямо из редактора, предоставляя быстрый доступ к результатам тестов.

📌 Thunder Client предоставляет функциональность API-клиента прямо в редакторе. Оно позволяет разработчикам тестировать REST и GraphQL API, а также предоставляет удобные инструменты для управления запросами, переменными окружения и т. д.

📌 vscode-icons добавляет красивые и информативные иконки к файлам и папкам в дереве проводника VSCode. Оно значительно облегчает навигацию по проектам и помогает быстро найти нужные типы файлов.

📌 Auto Rename Tag автоматически переименовывает закрывающий тег HTML или XML, когда вы изменяете открывающий тег. Это улучшает скорость и удобство редактирования кода, снижая вероятность ошибок.

📌 Turbo Console Log упрощает процесс добавления и управления инструкциями console.log() в вашем коде. Оно позволяет автоматически создавать console.log() с полезной информацией о переменных и их значениях, а также быстро удалять или комментировать все инструкции console.log() в файле.

📌 CSS Peek позволяет просматривать и переходить к определениям CSS-стилей примененных к HTML-элементам. Оно облегчает работу с CSS, позволяя быстро увидеть, какие стили применяются к определенному элементу, и незамедлительно перейти к этим стилям для редактирования.

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

Если хотите видеть в этом списке ваши любимые расширение и их описание, то поделитесь с нами в комментариях👇

Приглашаем вас на оффлайн воркшоп "Планирование через миссию" с Таалайбеком Турдубаевым.

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

📌 Коротко о том, что рассмотрим:
- Книга Саймона Синека «Начни с «Почему?»»
- Джефф Безос и миссия Амазон
- Примеры миссий крупных компаний: TED, LinkedIn, SpaceX, Tesla и не только
- Примеры миссий людей
- 50 вопросов «Find your passion»
А также сделаем чек миссий на реальность, веру и мотивацию и разберемся с каждой из них детальнее.

Дата и время: 8 мая 17:00
Длительность: 2-2.5 часа
Место: ​Конференц-зал ПВТ КР. Проспект Чуй, 265/1, Бишкек
Формат: оффлайн

⚠️ Зарегестрироваться на воркшоп вы можете перейдя по ссылке. Внимание, количество мест ограничено!

До встречи на воркшопе 👋

Как насчет того, чтобы порешать задачки с массивами?

Мы подготовили интересную задачку для вас и предлагаем вам решить ее.

📌 Условие:
Для массива положительных целых чисел arr[], требуется найти минимальную стоимость операций, чтобы все элементы массива стали равными. Допустимы следующие операции:
📝 Выбрать 2 индекса, увеличить элемент массива с первым индексом на 1 и уменьшить элемент массива со вторым индексом на 1. Стоимость операции = a.
📝 Выбрать любой индекс и увеличить элемент массива на 1. Стоимость операции = b.

✔️ Пример 1:
Вход: n = 4, a = 2, b = 3,
arr[] = { 3, 4, 2, 2 }
Выход: 5
Объяснение:
Изменяем элемент 2 операцией 2: {3, 4, 3, 2}, стоимость = b = 3
Изменяем элементы 1 и 2 операцией 1: {3, 3, 3, 2}, стоимость = a = 2
Итоговая стоимость операций равна 3 + 2 = 5.

✔️ Пример 2:
Вход: n = 3, a = 2, b = 1,
arr[] = { 5, 5, 5 }
Выходные данные: 0
Объяснение: все элементы массива уже равны, поэтому не требуется никаких операций, стоимость равна 0.

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

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

А сегодня дадим возможность подумать еще😉

А теперь решение задачи с массивами. ⬇️

Для решения задачи нам нужно учесть, что в финальном массиве не будет значений, превышающих максимальное значение в исходном массиве, поскольку увеличение всех элементов не имеет смысла. Кроме того, значения в финальном массиве будут больше минимального значения в исходном массиве. Мы будем последовательно проверять все возможные значения элементов финального массива (которые должны быть равны) и подсчитывать, сколько операций второго типа нужно выполнить. Для каждого значения элемента i (одного из возможных значений элемента финального массива) число операций вычисляется по формуле (n * i – s), где s - сумма всех элементов исходного массива. Число операций первого типа, необходимых для приравнивания элементов к i, можно вычислить следующим образом:

1️⃣ Проходимся по всем элементам исходного массива:
for (int j = 0; j
2️⃣ Вычисляем количество операций первого типа для i-го элемента:
op1 += max(0, a[j] - i)
3️⃣ После того, как мы вычислили количество операций для каждого i, мы проверяем, меньше ли это значение, чем предыдущее значение ans. Если да, то мы обновляем ans новым количеством операций. Формула для ans: ans = (n * i – s) * b + op1 * a.

Согласны с таким способом или ваш вариант был лучше?

Pytest фикстуры простым языком

Python - это настоящий швейцарский нож в мире программирования. Он обладает многими встроенными функциями, невероятно полезными для разработки 🤟

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

📌 Основы фикстур

Фикстуры определяются с помощью функций, возвращающих тестовые данные или состояния. Используйте @pytest.fixture для определения фикстуры и передачи ее в тесты как аргументов. Фикстура может возвращать объекты, значения или настраивать состояние.

📌 Фикстуры с параметрами

Параметризированные фикстуры передают разные значения аргументов, создавая разнообразные тестовые сценарии. Для параметризации используется @pytest.fixture(params=...). Список параметров передается в виде итерируемого объекта.

📌 Предусловия и постусловия

Фикстуры могут выполнять пред- и постусловия с помощью оператора yield. Сначала определяются предусловия перед yield, а постусловия после него. Это позволяет автоматически выполнять их перед и после каждого теста соответственно.

📌 Область видимости фикстур

Фикстуры имеют разные уровни области видимости: function, class, module, package и session. Выбор правильной области видимости оптимизирует процесс тестирования, минимизируя повторения.

📌 Автоматическое использование фикстур

Фикстуры с параметром autouse=True применяются автоматически ко всем тестам. Это удобно для выполнения действий перед каждым тестом без явного вызова фикстуры. Они также могут быть полезны для обеспечения согласованности в условиях тестирования.

📌 Модульные фикстуры

Модульные фикстуры определяются в отдельных файлах (conftest.py) и могут быть импортированы в разных тестовых модулях для повторного использования кода. Это помогает создавать более структурированный и модульный код тестов, упрощая поддержку и расширение.

Как видите, знание и использование pytest фикстур помогает решить множество проблем прямо из коробки и делает тестирование куда более простым и удобным, при этом намного более гибким и точным

Надеемся, данный пост дал вам более чистое понимание фикстур и вдохновил на более глубокое их изучение и применение в собственных проектах ❤️

Производительность CSS селекторов

Селекторы CSS используются для выделения определенных элементов HTML и применения к ним стилей. Существуют различные типы селекторов CSS, включая:

🔗 селекторы тегов
🔗 селекторы классов
🔗 селекторы идентификаторов
🔗 селекторы атрибутов
🔗псевдоселекторы

Каждый селектор имеет свой уровень специфичности и влияния на производительность.

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

📌 Самые медленные селекторы, такие как селекторы атрибутов и универсальные селекторы, добавляли лишь доли миллисекунды к общему времени загрузки страницы.
📌 Самые быстрые селекторы, такие как селекторы идентификаторов, были лишь немного быстрее самых медленных селекторов. В большинстве случаев разница в производительности между самым быстрым и самым медленным селекторами составляла всего 15-20%.

Команда разработчиков Microsoft Edge также предоставила несколько советов по оптимизации селекторов CSS для повышения производительности. Они рекомендовали:

1. Избегать универсальных селекторов, поскольку они могут замедлить скорость рендеринга веб-страниц.
2. Ограничить использование селекторов-потомков, поскольку они могут увеличить специфичность селекторов и замедлить скорость рендеринга веб-страниц.
3. Использовать селекторы классов и идентификаторов, поскольку они более специфичны и быстрее, чем селекторы тегов.
4. Использовать препроцессоры CSS, такие как Sass или Less, которые могут оптимизировать селекторы и уменьшить количество селекторов, используемых в таблице стилей.

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

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

В #40 выпуске Кибирд Михаил Иващенко и Олег Пузанов поговорили на тему софт скилов.

Казалось бы, а о чем тут говорить? И так все ясно. Но вы действительно владеете навыками межличностного общения, и у вас есть четкая концепция, как и что именно прокачивать?

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

Спойлер: у Олега все же есть тот самый маленький чемоданчик)

🔗Смотреть новый выпуск тут

Приятного просмотра!

Create react app мертв?

Один из инструментов, используемых при разработке React-приложений, это create-react-app. Он предоставляет удобный и простой способ создания и настройки новых проектов. Однако, недавно было объявлено, что поддержка create-react-app в его текущем виде будет прекращена из-за стагнации и плохой производительности.

Что же делать, если вам по какой-то причине нужно использовать React в чистом виде?

Разработчики рассматривают несколько вариантов действий:

🔺 Создание нового фреймворка с нуля и переквалификация Create React App под него не считается целесообразным.
🔺 Отказ от Create React App и поддержка другого сложного шаблона для создания приложения с использованием Vite.
🔺 Уменьшение или полное прекращение использования Create React App в пользу продвижения фреймворков, при этом фреймворки будут предпочтительными, но не обязательными. Однако, возникает проблема отсутствия фирменного CLI шлюза, что может негативно повлиять на бренд.
🔺 Использование Create React App для создания приложения уже на основе выбранного фреймворка. Это может вызвать проблемы конкуренции у других фреймворков, а также невозможность использования старых туториалов.
🔺 Создание списка рекомендуемых фреймворков и возможность использования классического подхода создания приложения без фреймворка с Vite под капотом. Этот вариант предлагает использовать Create React App в качестве лаунчера и рекомендовать фреймворки, однако пользователи смогут использовать чистый React.

Наиболее действенным считается пятый вариант. А вы как думаете?