Всем привет, хочу рассказать о своей утилите dcw (Docker Compose Workspace) для удобного управления тестовыми окружениями на базе docker-compose.

Ничего не нашёл на Хабре про CSpell, попробую исправить ситуацию.

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

Таким инструментом оказался CSpell. Если пишите код в Visual Studio Code, то вы его уже используете. CSpell позиционирует себя как спеллер для кода, но он может также спеллерить и обычные тексты. Давайте подключим его в проект.

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

Наши бекендеры решили настроить резервную инфраструктуру на базе ресурсов «Яндекса». Мы, фронтендеры, задумались над альтернативой npm registry — источнику библиотек, фреймворков и других полезных в работе штук.

От нашей изначальной идеи — создания локального registry — мы пришли к yarn 2+. О том, как так получилось, и с чем мы столкнулись на этом тернистом пути, я сегодня и расскажу.

Привет, Хабр. Я продолжаю рассказывать про неизвестные широкому кругу разработчиков CSS-фишки. Я отбираю их так, чтобы они были полезны в разного рода проектах. Неважно, верстаете ли вы сайт для малого бизнеса или создаёте супермодное React-приложение. Они поддерживаются большинством браузеров. Отдельно отмечу, что я не считаю IE11 современным браузером. По этой причине я не учитывал его.

Сегодня мы рассмотрим:

• загрузку фоновых изображений для экранов с повышенной плотностью пикселя с помощью функции image-set();
• как с помощью неё же ускорить загрузку страницы;
• можно ли использовать нестандартный шрифт без его загрузки;
• чем полезен псевдо-класс :focus-within при вёрстке кастомных чекбоксов;
• мой любимый лайфхак на основе пользовательских CSS-свойств.

Больше не буду затягивать. Давайте посмотрим, что я вам подготовил.

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

За последние 5 месяцев у меня было 15 онсайт собеседований, а также офферы от Google, Roku, Microsoft и других. (Больше информации можно прочитать в моем Telegram-канале)

Вы должны реализовать этот виджет за ~45–50 минут и рассказать об оптимизации. Эту информацию я постараюсь рассказать здесь. Основная цель состоит не в том, чтобы реализовать Image Slider с большим количеством функционала, а в том, чтобы показать, как реализовать и оптимизировать.

В JS Event Loop позволяет непрерывно проверять, есть ли в очереди задачи, и, когда стек вызовов пуст, передавать эти задачи на выполнение. Таким образом, долгие операции не мешают продолжению выполнения кода. Именно благодаря Event Loop приложение может оставаться отзывчивым, позволяя юзерам продолжать взаимодействие с интерфейсом, пока в фоне выполняются тяжелые задачи.

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

В этой статье мы рассмотрим, как реализовать Event Loop в JavaScript.

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

TL; DR: JSONB может значительно упростить разработку схемы БД без ущерба производительности в запросах.

Введение

Chrome DevTools — это консоль разработчика, набор инструментов в браузере для создания и отладки сайтов и приложений. С их помощью можно в том числе тестировать уже разработанную функциональность.

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

Отмечу, что говорить мы будем именно о Chrome DevTools, хотя и в других браузерах есть аналогичные консоли разработчиков. Сам их частенько использую — это удобно. Поскольку инструменты неочевидные, рекомендую заглянуть под кат и начинающим, и опытным тестировщикам — точно почерпнёте для себя что-то новое.

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

Всем привет! Мы — Иван и Даниил, ведущие разработчики компании ITFB Group. У компании два собственных продукта — ЕСМ/CSP/BPM-платформа СИМФОНИЯ (документооборот, хранение контента, архив, портал) и система распознавания/обработки документов ITFB EasyDoc. Пару месяцев назад к нам прилетела задача интегрировать ряд функций распознавания из продукта ITFB EasyDoc и оформить их в отдельный модуль платформы СИМФОНИЯ, дабы пользователь всё делал в одном месте и не дрейфовал по разным системам. Однако возникла загвоздка: СИМФОНИЯ — на React, а ITFB EasyDoc — на Vue. Для решения вопроса посерчили различные источники информации и плавно ушли в собственное творчество, поскольку не обнаружили стоящих вариантов с вменяемой технической детализацией. В какой-то момент возникло острое желание поделиться нашими итоговыми наработками на Хабре и заполнить пробелы базы знаний в интернете по этому вопросу. Всем, кому интересно увидеть наше решение, добро пожаловать под кат :-)

Всем привет! Меня зовут Егор, я технический лидер в команде, которая занимается разработкой личного кабинета Cloud.ru. Некоторое время назад загорелись идеей сделать браузерное расширение на React, но не было хороших гайдов (либо я их не нашел), поэтому в итоге написали свой) В статье поделился нашим опытом и наработками, а также рассказал, зачем мы вообще взялись за этот open source проект.

Буквально за несколько лет typesctipt стал практически мастхэв в современной фронтэнд-разработке (и не только). Язык типов, работающих поверх языка javascript, который сам по себе является языком со слабой динамической типизацией со всеми вытекающими (отсутствие достойного тайп-хинтинга в редакторах, строгой проверки в анализаторах кода и прочее), нивелировал большинство из недостатков слабой типизации.

Чем такой инструмент не является обычной посадкой строгой статической типизации на динамически типизированный язык, как она есть в C#, Java, Kotlin и так далее...? Что такое типы утилиты? И какие решения всерьез могут облегчить жизнь разработчикам?

Привет, Хабр!

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

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

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

o    «В принципе, никто этим не пользуется»

o    «Этой опцией пользуется 80% аудитории, стоит ознакомиться»

o    «У этой опции предусмотрено 6 возможных значений, но в реальной практике применяется всего 2 из них».

Так что я решила спросить пользователей Mastodon, какие у них любимые опции конфигурации git:

А какие опции git config вы больше всего любите выставлять? В настоящее время у меня в ~/.gitconfig установлены только git config push.autosetupremote true и git config init.defaultBranch main, вот интересуюсь, а что выставляют другие люди.

Как обычно, получила КУЧУ отличных откликов и так узнала множество очень популярных опций конфигурации git, о которых ранее никогда не слышала.

Далее перечислю их по порядку, при этом (очень примерно) попытаюсь начать с наиболее популярных.

Все описанные опции документированы на странице man git-config, а также на этой странице.

Широкополосный радиоприемник – штука полезная. Можно получить информацию с соседского уличного термометра или авто на частоте 433 МГц, либо определить бортовой номер пролетающего самолета.

Под рукой был контроллер на Linux, мы решили собрать систему анализа популярных радиочастот с минимальным бюджетом и получать с него информацию через MQTT.

В статье мы расскажем о подключении «USB-свистка» RTL-SDR к контроллеру Wiren Board. С помощью софта мы переведем полученную информацию в удобные топики MQTT, затем обработаем данные.

Интересно? Ныряйте под кат

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

1. Бесплатные ресурсы: Сообщество разработчиков предоставляет множество бесплатных материалов, таких как документация, учебники, блоги и видеоуроки, которые позволяют овладеть React без необходимости платить за курсы.

2. Онлайн-курсы: Существуют множество онлайн-платформ, таких как Stepik, Coursera, Udemy, и других, которые предлагают бесплатные курсы по React. 

3. Открытый исходный код: React является open-source библиотекой, что означает, что его исходный код доступен для всех. Это позволяет изучать React, анализируя его исходный код и примеры проектов, созданных сообществом разработчиков.

4. Самообучение: Изучение React самостоятельно может быть эффективным при должной мотивации.

В моем канале о React, я регулярно делаю обзор полезных инструментов, выкладываю примеры с кодом и лайфхаки для разработчиков, добро пожаловать!

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

Давайте начнем!

Привет, Хабр)

Публикую шпаргалку по SQL, которая долгое время помогала мне, да и сейчас я периодически в неё заглядываю.

Все примеры изначально писались для СУБД SQLite, но почти всё из этого применимо также и к другим СУБД.

Здесь есть и примеры довольно сложных запросов с агрегирующими функциями, триггерами, длинными подзапросами, с оконными функциями. Помимо этого, часть примеров посвящена работе с SQL в Python, используя sqlite3, pandas, polars. Этот список запросов с комментариями можно использовать как наглядное пособие для изучения SQL.