Привет! Сегодня мы поговорим про flexbox в css. Это очень важная тема, в которой должен разбираться каждый фронтенд-разработчик или верстальщик. Я покажу вам как flexbox работает на реальных примерах. А в конце статьи покажу лайфхаки, которыми сам постоянно пользуюсь на работе.
Пользователь
3 доклада для тех, кто недавно с Go: материалы митапа в Петербурге
«Что самое крутое вы сделали за год, что пишете на Go», — вопрос из зала после первого доклада.
«Записал новую машину на жену», — остроумный комментарий к этому моменту в трансляции.
В конце мая в очень дружелюбной атмосфере состоялся YADRO Go To митап — в этот раз для тех, кто только думает или недавно начал писать на Go в коммерческих проектах. В этом посте мы собрали ссылки на записи, презентации и добавили пару слов о каждом выступлении, чтобы было проще выбрать, что посмотреть детальнее, а что — на быстрой перемотке.
Мессенджеры на работе — это не прокрастинация, или как мы сделали сервис для автотестирования. Часть 2
Это вторая часть статьи «Мессенджеры на работе — это не прокрастинация, или как мы сделали сервис для автотестирования». Как и обещали, в данной статье мы расскажем о том, как масштабировали наш сервис, как развивали функциональность автотестов и как в итоге вышли за рамки обычного репорт-бота.
Причины высокого time2market
Компании, сокращающие время от возникновения идеи до вывода на рынок, получают больше инвестиций, завоевывают рынки стремительнее и уверенно побеждают конкурентов.
Что мешает сократить time2market? Поделюсь личным опытом в этой статье.
Общие шаблоны и нюансы использования React Query
Из-за своей гибкой парадигмы React имеет несколько подходов проектирования проекта. Решения, которые мы принимаем на этапе проектирования и архитектуры проекта, могут либо сократить временные затраты на разработку простого надежного решения, либо затруднить её из-за усложнения реализации.
Одним из простых в реализации, но иногда сложных в использовании инструментов является react-query
— мощная библиотека для асинхронного управления состоянием. Простота реализации делает его желанным выбором для написания логики состояния компонентов.
Эволюция подходов к работе с таблицами во фронтенде
Всем привет! Меня зовут Аня Ланда, я фронтенд-разработчик в Самокате. В компании я больше двух лет, общий стаж во фронтенде – 6 лет и всё это время я делаю таблицы. В этом посте расскажу про эволюцию подходов к работе с ними, что меняется на пути от нескольких сотен до сотен тысяч элементов в таблице.
Telegram WebApps. Как встроить веб-приложения в чат-бота?
Относительно недавно команда Telegram выпустила обновление, с которым появилась возможность встраивать в мессенджер веб-приложения. Эта статья — обзор основных моментов внедрения веб-приложениий в телеграм-ботов.
5 супер полезных сетевых утилит linux
Привет! Начинающие devops инженеры часто задают вопрос: что мне поучить, чтобы стать лучше (привет diablo)? Обычно я отвечаю: поучи команды linux. Но в целом посыл обычно ясен, чтобы что-то учить, надо хотя бы знать название утилит. Цель этой статьи и является ознакомление любопытного читателя с интересными сетевыми утилитами которые есть (или легко устанавливаются) в любом дистрибутиве linux. И так начнем!
MobX с MVVM упрощает жизнь Frontend разработчика гораздо сильнее Redux'а
В этой статье я бы хотел подискутировать о том, насколько хорошо паттерн MVVM подходит для разработки Web приложений на React. Вместе этим, я собираюсь описать какие преимущества могут быть при разработке с использованием MobX с паттерном MVVM в сравнении с Redux. Запаситесь кофе, это будет долгое чтиво.
Рабочее время: кошелек или жизнь?
Проблемы учета рабочего времени обсуждались не раз и не два. При этом мнение о необходимости таймтрекинга разделяет сотрудников на два противоположных лагеря. Как правило, исполнители всячески осуждают и указывают на неэффективность проектов, в которых необходимо вести учет рабочего времени и ежедневно отчитываться о проделанной работе. Напротив, многие правильные руководители приводят множество доводов в пользу таймтрекинга своих сотрудников. Это противоречие порой вызывает у меня приступы сильной головной боли, которую я попытался унять написанием этой статьи в блог ЛАНИТ. Есть такое лекарство – мышление письмом...
CI/CD из GitHub в Яндекс Облако через Docker
Всем привет!
Будем использовать GitHub Actions. Создадим виртуальную машину в Яндексе. И многое другое.
Сегодня настраиваем деплой из GitHub в Яндекс Облако, используя Docker compose.
Улучшаем качество кода React-приложения с помощью Compound Components
Я люблю сталкиваться с трудностями. Но с такими, которые можно решить, подумать над интересным решением, подобрать технологию. Люблю быть в потоке, а после решения чувствую себя настоящим профессионалом.
Но есть кое-что, из-за чего я не люблю программировать. Как ни странно, это тоже трудности, только другого рода. Например, когда, чтобы пофиксить баг, приходится разбираться с легаси-компонентом, который написан на классах на 300 строк кода. Разбираясь уже второй час, ловлю себя на мысли, что уже 10 минут просто смотрю в экран, а в голове «из-за угла» выглядывает мысль «Псс, парень, программирование — это не твое». Такие задачи не вызывают удовлетворения.
В этой статье я поделюсь подходом, который поможет уменьшить большие и страшные React-компоненты. Если у вас есть компоненты с кучей условий, которые сложно читать, ревьюить и понимать, что там происходит, то эта статья для вас.
Разрабатываем библиотеку компонентов с помощью React и TypeScript
Привет, друзья!
В этой статье я покажу вам, как начать разработку библиотеки компонентов с помощью Vite, React, TypeScript и Storybook.
Мы разработаем библиотеку, состоящую из одного простого компонента — кнопки, подготовим библиотеку к публикации в реестре npm, а также сгенерируем и визуализируем документацию для кнопки.
Если вам это интересно, прошу под кат.
Краткий справочник по «всем-всем» командам Linux
Периодически меня на начальном курсе просят дать "список всех-всех команд с кратким описанием что делает"... Ну прям "всех-всех". И ведь если искать в интернете "такие" справочники существуют - либо про "20-30 команд, но самых важных", либо с неточностями и устаревшей информацией. Так что предлагаю вашему вниманию свою версию такого "краткого" справочника (на 300, 515, 612, 716, 842, 1005, 1171 команд) с ссылками на wiki-описание и на cheat.sh-примеры наиболее важных команд.
Программирование — это про общение
Когда выгорание по внутренним (и внешним) причинам достигает максимума, когда тошнит от одного воспоминания о том как выглядит IDE, когда мнится что в седло большой разработки больше не вернутся никогда, но, при всём при этом, вносить свой вклад в развитие индустрии хочется - остаётся одно.
Сменить угол обзора.
Эта статья - первая попытка взглянуть на программирование не с позиции технического специалиста, а с позиции человека. Со своими страстями и желаниями. С чисто людскими ошибками и заблуждениями...
Одной ошибок было считать окружающих болванами только потому что они не считают всякую многократно изложенную мною в коде мудрость - истинной.
Улучшаем производительность: виртуальный рендеринг для больших объемов данных
К вам пришло из API что-то огромное, браузер начал тормозить, а пользователи недовольны? Как с этим справиться? Когда и в каких UI компонентах с проблемой отображения большого массива данных сталкиваются разработчики? Какие специальные подходы применять или не применять?
Меня зовут Сергей Клинов. Я старший frontend-разработчик в компании Datafold. Моя специализация — это TypeScript, React, визуализация данных, формы, повышение производительности. Поговорим о решении проблем, с которыми уже столкнулся, либо в ближайшее время точно столкнется каждый фронтенд-разработчик. Рассмотрим несколько возможных решений, их преимущества и ограничения. Принцип и устройство виртуального рендеринга и разберем рабочий пример его применения на продукте Datafold.
Заметка о Mapped Types и других полезных возможностях современного TypeScript
Привет, друзья!
Представляю вашему вниманию перевод 2 статей:
- Use TypeScript Mapped Types Like a Pro о связанных или сопоставленных типах (mapped types)
TypeScript
; - 10 TypeScript features you might not be using yet or didn't understand о полезных возможностях современного
TS
.
Принципы юнит-тестирования. Часть вторая
Привет! А вот и вторая часть поста про принципы юнит-тестирования. Если в первой мы обсудили влияние тестов на разрабатываемые продукты и познакомились с теорией юнит-тестирования, то в этой обсудим некоторые практические моменты. Внутри поста — структура юнит-тестов, стили юнит-тестов, принципы рефакторинга, полезные советы для того, чтобы ваши юнит-тесты были эффективными и читаемыми, а также некоторые антипаттерны при написании тестов.
Ну и, конечно же, список источников, где можно получить дополнительную полезную информацию. В общем, начнём.
Структура юнит-тестов
В нашей команде при написании юнит-тестов мы стараемся использовать подход AAA — Arrange, Act, Assert (Подготовка, Действие, Проверка).
Кратко расскажу о нем. Тест делится на три блока, которые идут друг за другом. Ширина блоков на рисунке выше образно отражает объём кода, который должен занимать каждый из блоков.
Разрабатываем чат с помощью Nest, React и Postgres
Привет, друзья!
В данном туториале мы разработаем чат с использованием следующих технологий:
- TypeScript — статический типизатор;
- NestJS — сервер;
- Socket.IO — библиотека для работы в веб-сокетами;
- React — клиент;
- TailwindCSS — библиотека для стилизации;
- PostgreSQL — база данных (далее — БД);
- Prisma — ORM;
- Docker — платформа для разработки, доставки и запуска приложений в изолированной среде — контейнере.
Функционал чата будет таким:
- фейковая регистрация пользователей:
- хранение имен пользователей в памяти (объекте) на сервере;
- хранение имен и идентификаторов пользователей в localStorage на клиенте;
- регистрация подключений и отключений пользователей на сервере и передача этой информации подключенным клиентам;
- запись, обновление и удаление сообщений из БД в реальном времени на сервере и передача этой информации клиентам.
Если вам это интересно, прошу под кат.
Как использовать Docker в приложениях Node.js и React
В этой статье поговорим о том, как разработать и запустить бэкэнд на Node.js-Express и фронтенд на React в контейнере Docker.
Информация
- В рейтинге
- Не участвует
- Зарегистрирован
- Активность