SkipRenderOnClient.tsx на GitHub 💻
SkipRenderOnClient.tsx - это хак для повышения производительности при рендеринге на стороне сервера (SSR), который позволяет условно рендерить компоненты на стороне клиента, обходя гидратацию, без ошибок несоответствий гидратации. Это позволяет избежать дорогостоящей гидратации, если элемент сразу после этого будет скрыт или удален.
#react #ssr #performance

Шаблоны «Как со мной работать» 🧩
Шаблоны «Как со мной работать» - это, как правило, Google Документ, страница Notion или доска Miro, доступные каждому в профиле Slack. Эти шаблоны помогают коллегам понять ваши предпочтения, как и когда вы хотите получать обратную связь и как вы общаетесь. В документе можно указать график работы, предпочтительное время для встреч, способы получения обратной связи, ваши сильные и слабые стороны, ожидания относительно связи и способы коммуникации. Это способствует созданию культуры сотрудничества и поддержки, избегая недопонимания.
#ux #communication #teamwork

Как исправить неудобный пользовательский интерфейс: 🛠
Статья Скотта Хурффа рассказывает о проблеме “Awkward UI” - когда пользовательский интерфейс кажется неестественным или неудобным. Он объясняет, что это происходит, когда дизайнеры не учитывают физический мир и нарушают правила “UI Stack”. Статья предлагает решения для создания более понятных и “человеческих” интерфейсов.
#ui #design #usability

Новые модели для твоей работы:📘
“New Ways of Working Playbook” - это руководство на Notion, которое предлагает новые подходы к организации рабочего процесса. Оно содержит ценные советы и стратегии для тех, кто ищет способы оптимизировать свою работу и повысить производительность.
#productivity #work #notion

Промисы не являются монадами: 🔄
Ну и чтобы точно проснуться после новогодних праздников можно прочитать статью на Rybicki.io, которая обсуждает, почему промисы в JavaScript технически не являются монадами. Автор анализирует различия между промисами и монадами, и объясняет, почему они не являются взаимозаменяемыми, несмотря на некоторые сходства в их структуре и функциональности. Для лучшего понимания, рекомендую все-таки перевести страницу на русский 🙃
#javanoscript #promises #monads

Рефакторинг большой кодовой базы: опыт GitLab 🔧
Рефакторинг больших кодовых баз может быть сложным: неясно, с чего начать, как продолжать, и не видно конца пути. В своем выступлении Наталья Теплухина делится техниками и инструментами, которые помогли команде GitLab провести несколько рефакторингов. Также рассказывается об истории неудач, которые научили их лучше рефакторить код.
#refactoring #GitLab

Go 1.22: Интерактивные заметки о релизе: 🐹
Статья Антона Жиянова на antonz.org представляет интерактивные заметки о релизе Go 1.22. Он обсуждает улучшения, включая уменьшение накладных расходов на память для большинства программ Go на примерно 1% за счет дедупликации избыточных метаданных, исправление неудачного решения о переменных цикла, а также упоминаются новые возможности для работы с случайными числами и долгожданный маршрутизатор HTTP на основе шаблонов.
#golang #release #1_22

Seroval: Преобразование значений JS в строки: 💻
Seroval – это инструмент для преобразования значений JavaScript в строки. Он позволяет сериализовать сложные структуры данных, включая циклические ссылки и встроенные объекты JavaScript, такие как Map и Set.
#javanoscript #serialization #performance

Awesome Front-End System Design: 🌐
“Awesome Front-End System Design” от greatfrontend - это кураторский список ресурсов по дизайну различных систем с точки зрения фронтенда, отлично подходящий для подготовки к собеседованию или общего обучения. Он включает в себя руководства, примеры и исследования случаев по различным темам, таким как новостная лента (например, Facebook), сайты электронной коммерции (например, Amazon) и обмен фотографиями (например, Instagram).
#frontend #systemdesign #interviewprep

ShellCheck: Статический анализатор bash скриптов: 🐚
ShellCheck, созданный пользователем koalaman, это инструмент, который предлагает предупреждения и рекомендации для скриптов оболочки bash/sh. Цели ShellCheck - указать и прояснить типичные проблемы синтаксиса, которые вызывают криптичные сообщения об ошибках оболочки, а также указать и прояснить типичные проблемы семантики, которые заставляют оболочку вести себя странно и контринтуитивно.
#bash #shell #staticanalysis

Awesome CTO 🚀
“Awesome CTO” от kuchin - это кураторский список ресурсов для технических директоров и VP по исследованиям и разработке, с акцентом на стартапы и компании с гиперростом.
#cto #startups #hypergrowth

TWC: Создание многоразовых компонентов React + Tailwind CSS 💻
TWC, созданный gregberge, - это инструмент, который позволяет создавать многоразовые компоненты React + Tailwind CSS в одну строку. На фоне новости о том, что Styled Components – это устаревшая депрекейтнутая штука, TWС, который поддерживает серверные компоненты, выглядит как супер альтернатива.
#react #tailwindcss #components

Node.js Best Practices 📚
“Node.js Best Practices” от goldbergyoni - это кураторский список лучших практик Node.js, который постоянно обновляется и расширяется. Он включает в себя более 80 лучших практик, руководств по стилю и советов по архитектуре.
#nodejs #bestpractices #opensource

Automock: Упрощение unit тестирования для TypeScript 🛠
Automock - это инструмент, который оптимизирует процесс unit тестирования в рамках фреймворков внедрения зависимостей TypeScript, предоставляя виртуальную, изолированную среду и автоматическую генерацию моков, что позволяет разработчикам создавать эффективные наборы тестов и улучшать общий опыт тестирования.
#typenoscript #unittesting #dependencyinjection

Better Commits: CLI для создания лучших коммитов 💻
Better Commits, созданный Everduin94, - это инструмент командной строки (CLI), который помогает создавать лучшие коммиты, следуя руководствам по стандартизации коммитов. Инструмент предлагает гибкую конфигурацию с разумными настройками по умолчанию, выводит предварительный просмотр коммитов в цвете и поддерживает использование эмодзи для каждого типа коммита.
#git #commits #typenoscript

Refine: Фреймворк React для создания внутренних инструментов 💻
Refine - это мета-фреймворк React, который позволяет быстро разрабатывать широкий спектр веб-приложений. От внутренних инструментов до панелей администратора, приложений B2B и приборных панелей, он служит всеобъемлющим решением для создания любого типа CRUD-приложения. Refine обеспечивает свободу выбора предпочитаемых библиотек и генерирует готовый к загрузке код шаблона.
#react #crud #b2b

StyleX — Решение Meta для масштабируемого CSS 🌐
StyleX - это новая технология CSS от Facebook, созданная для решения проблем масштабирования, с которыми столкнулись разработчики при полном переписывании Facebook на React. StyleX обеспечивает “детерминированное разрешение”, гарантируя стабильность стилизации. В статье рассматривается пример компонента кнопки StyleX и обсуждаются преимущества и недостатки использования этого подхода.
#css #react #stylex

Горизонт событий ожидания в JavaScript 🕳
В JavaScript существует граница, которую можно назвать “горизонтом событий ожидания”. Каждый раз, когда асинхронная функция останавливается, ожидая результата промиса, она пересекает эту границу. После этого управление не может вернуться к ней, пока промис не выполнится. Если промис никогда не выполнится, функция остается заблокированной навсегда. Это не теоретическая проблема, она имеет важное практическое значение.
#javanoscript #async #promises

Rust против Go: Практическое сравнение 🔄
Эта статья представляет собой попытку дать обзор различий между Rust и Go с акцентом на веб-разработку, создавая небольшое реальное приложение на обоих языках. Авторы статьи идут дальше синтаксиса и рассматривают, как языки справляются с типичными веб-задачами, такими как маршрутизация, мидлвары, шаблонизация, доступ к базе данных и другое.
#rust #golang #webdevelopment

Storybook теперь поддерживает React Server Components 🌐
В этой статье обсуждается нововведение Storybook - поддержка React Server Components (RSC). Это значительное обновление позволяет разработчикам использовать серверные компоненты React непосредственно в Storybook, улучшая производительность и упрощая процесс разработки. Статья подробно рассказывает о преимуществах этой интеграции, включая эффективное взаимодействие между клиентом и сервером и новые возможности для создания более динамичных веб-приложений.
#storybook #react #rsc

Основы баз данных 🗂
Эта статья представляет себя введение в терминологию, концепции и навыки, необходимые для понимания объектов баз данных, требований безопасности, графических инструментов, скриптов T-SQL, написания запросов к базе данных, а также выполнения хранимых процедур. Она предназначена для людей, которые хотят изучить основы реляционных баз данных, систем управления базами данных и компонентов баз данных.
#database #sql #fundamentals

Полное руководство по использованию IndexedDB 💾
IndexedDB - это низкоуровневый API для хранения данных на стороне клиента. Это полноценная, постоянная система хранения NoSQL, доступная в браузере, которая позволяет хранить различные типы данных, такие как файлы, изображения, видео, структурированные данные, такие как объекты, списки и массивы. В этом руководстве рассматривается как использовать и настроить IndexedDB для хранения данных веб-приложений и как манипулировать данными с помощью доступного API.
#indexeddb #webstorage #nosql

Инструменты и техники руководства инженерами для успешного 2024 года 🛠
В статье представлен список различных инструментов и техник от Practical Engineering Management, которые помогут вам преуспеть в роли менеджера в новом году. Основные области внимания включают сознательное разрешение технического долга, повышение производительности и благополучия команды, использование исследований DORA для улучшения организации и команды, проведение эффективных 1-1 и максимизацию ценности каждой недели вашей работы в качестве руководителя инженеров.
#engineering #leadership #management

Как эффективно загружать данные в React 🌐
Эта статья рассматривает различные методы загрузки данных в React, с фокусом на производительность. Она обсуждает как начальную загрузку данных, так и загрузку по требованию, и объясняет, как эти подходы влияют на производительность приложения. Особое внимание уделяется использованию хуков, таких как useEffect, и проблемам, связанным с водопадной загрузкой данных. Также рассматриваются стратегии оптимизации, включая параллельную загрузку и использование контекста для управления данными.
#react #datafetching #performance

Concurrent React, внешние хранилища и проблемы согласованности интерфейса 🖥
Статья рассматривает проблему "согласованности состояния" (state tearing) в React при использовании внешних хранилищ данных в режиме конкурентной обработки. Автор объясняет, как этот эффект влияет на согласованность данных между различными компонентами UI и рассматривает разные подходы к управлению глобальным состоянием. Особое внимание уделяется тому, как новый хук useSyncExternalStore помогает решить эту проблему, гарантируя синхронизацию данных при конкурентном рендеринге.
#react #ui #concurrency #hooks

Каждый репозиторий - это монорепозиторий 🔄
Статья утверждает, что каждый репозиторий, за исключением самых тривиальных, имеет несколько легко идентифицируемых узлов со своими наборами операций и зависимостей между ними. Единственная причина, по которой мы не моделируем эти проекты как монорепозитории, заключается в том, что накладные расходы на инструменты монорепозитория высоки. Но что, если бы накладные расходы были равны нулю?
#monorepo #repository #development #nx

Git submodules: у нас есть монорепозиторий дома: 🔂
Моё выступление на Conf42: JavaScript. Рассказал, как мы организуем и делимся кодом между проектами, которые очень похожи, но абсолютно различны.
#monorepo #submodules

Удивительный баг в React 🐞
В статье рассказывается об удивительном баге в React, который был обнаружен автором. Он подробно описывает, как этот баг проявляется в коде, и предлагает возможные решения для его устранения. Это полезное чтение для разработчиков на React, которые хотят лучше понять, как работает фреймворк и как избегать подобных проблем в будущем.
#react #bug

Параллельные рауты в Next.js 14: подробное руководство 🔄
В статье рассказывается о параллельных маршрутах в Next.js 14, которые представляют собой продвинутый механизм маршрутизации, позволяющий одновременно отображать несколько страниц на одном и том же урле. Авторы объясняют, как определить параллельные маршруты с помощью слотов, и демонстрируют это на практическом примере построения сложной панели управления для веб-приложения.
#nextjs #routing

Oxlint – ESLint имеет фатальный недостаток 🎉
Oxlint, новый JavaScript линтер, теперь доступен для всеобщего использования. Этот инструмент, разработанный командой Oxidation Compiler, предназначен для обнаружения ошибочного или бесполезного кода без необходимости каких-либо конфигураций по умолчанию. Oxlint не предназначен для полной замены ESLint, но служит в качестве улучшения, когда медленность ESLint становится узким местом в вашем рабочем процессе. В реальных сценариях Shopify сообщила, что их 75-минутный прогон ESLint теперь занимает всего 10 секунд.
#javanoscript #linter #oxlint

Интерактивное руководство по CSS Grid 🎨
CSS Grid - это мощный инструмент для создания сложных макетов в CSS. В этом руководстве автор делится своими открытиями и опытом работы с CSS Grid. Наверно, лучшее руководство, когда начинаешь изучать гриды.
#css #grid

Объяснение функции кэширования React 💾
React вводит новую функцию кэширования, которая позволяет избежать повторного вычисления результатов при передаче одних и тех же аргументов функции. Это руководство объясняет, как работает эта функция и как ее можно использовать для оптимизации производительности ваших приложений на React. И дело не только в запросах через fetch.
#react #cache

Погружение в Server Actions в Next.js 14 🚀
Статья на LogRocket блоге разбирает нововведение в Next.js 14 - Server Actions, позволяющее разгрузить клиентскую часть от задач по получению и мутации данных, выполняя их на сервере. Это предотвращает уязвимости и проблемы безопасности, связанные с обработкой данных на стороне клиента. В статье описывается история развития подходов к рендерингу веб-страниц, от клиентского рендеринга до генерации статических сайтов на сервере, и как Server Actions стали ответом на недостатки предыдущих подходов, упрощая процесс работы с данными в приложениях Next.js.
#nextjs #serveractions

Руководство по Domain-Driven Design (DDD): 📚
Domain-Driven Design (DDD) - это подход к разработке программного обеспечения, который ставит в центр внимания бизнес-логику и сложные бизнес-процессы. В этом руководстве автор объясняет, как применять DDD для создания масштабируемых и высокопроизводительных систем. Статья представляет из себя отличный справочник терминологии используемой в DDD и то, для чего каждый термин можно или нужно использовать.
#ddd #architecture

Начало работы с веб-производительностью 🚀
Статья посвящена важности веб-производительности и описывает, как улучшение скорости загрузки сайта может сделать его более доступным и приятным для пользователей, а также увеличить количество просмотров, репостов или продаж. Автор детально разбирает сложности веб-производительности, предлагая читателям понимание терминологии, метрик, инструментов и дает десять основных советов по улучшению производительности веб-сайтов.
#webperformance #optimization

Бенчмаркинг, профилирование и оптимизация JavaScript-библиотек 📈
Подробное исследование оптимизации JavaScript-библиотеки для локализации, включая бенчмаркинг, профилирование и оптимизацию. Автор делится личным опытом уменьшения размера библиотеки и увеличения её производительности, используя современные веб-API и оптимизируя код. Это путешествие через различные подходы к оптимизации предлагает ценные уроки и техники, которые могут быть применены к другим проектам.
#javanoscript #webperformance #optimization

Отправка UI через API 📲
В статье рассказывается о новом подходе к разработке пользовательских интерфейсов - отправке UI через API, также известном как серверный UI. Этот подход предлагает новый уровень динамичности и гибкости, который меняет традиционные парадигмы разработки UI. Серверные UI уже используются некоторыми из крупнейших компаний, таких как Instagram, Lyft и Airbnb.
#ui #api #serverdriven

#all_about_rsc #rsc #react #nextjs

Про внутренности серверных компонентов:

1. Знаете, я тоже сам своего рода стример: SSR и Server Components | Антон Петров | FrontendConf
2. Абсолютно новое мышление с Server Components | АйТи Синяк
3. Making Sense of React Server Components | Josh Comeau
4. How <Suspense /> and Components Streaming works in Next.js | Denis Gonchar
5. Deconstructing React | Tejas Kumar
6. Simplifying Server Components | Mark Dalgleish

Про создание серверных компонентов с нуля:

1. React Server Components, without a framework? | Timothée Pillard
2. RSC From Scratch. Part 1: Server Components | Dan Abramov
3. React from Another Dimension | Dan Abramov | RemixConf
4. React Server Components: A Deep Dive | Tejas Kumar | Conf42 JavaScript 2023
5. Exploring React Server Component Fundamentals | Daishi Kato | React Day Berlin 2023
6. React server components from scratch! | Ben Holmes
7. Rust Server Components | Antonio Pitasi

Про ментальную модель серверных компонентов:

1. Grok React Server Component by Quizzes | Herrington Darkholme
2. The Two Reacts | Dan Abramov
3. The Server Component Treatment | Dev Agrawal
4. When To Fetch: Remixing React Router | Ryan Florence
5. Data Flow in Remix | Jim Nielsen
6. Why do Client Components get SSR'd to HTML? | Dan Abramov
7. Understanding React Server Components | Alice Alexandra Moore
8. URL state is underrated | Lee Robinson
9. You Might Not Need React Query | TkDodo's blog

Про критику Next.js и его реализацию серверных компонентов:

1. Next.js 13 is not ready for production | Sanket Berde
2. Next.js, just why? | Pilcrow
3. Is React Having An Angular.js Moment? | François Zaninotto
4. My take on the current React & Server Components controversy | Lenz Weber-Tronic
5. Why I Won't Use Next.js | Kent C. Dodds
6. Why I'm Using Next.js | Lee Robinson

Блум Фильтры 🧩
Блум фильтры - это уникальный инструмент, который может быть незаменимым при решении определенных задач. Они похожи на структуру данных Set, но с некоторыми ключевыми отличиями. Блум фильтры - это вероятностная структура данных, которая может дать определенные "нет", но не может быть уверена в "да". Это свойство может быть использовано, например, для защиты пользователей от вредоносных ссылок.
#bloomfilters #datastructures #websecurity

Подсветка текста при прокрутке до него 🖍
Статья на Frontend Masters подробно объясняет, как подсветить определенную строку текста, когда пользователь прокручивает страницу до этого места. Это достигается с помощью HTML-элемента <mark> и scroll-driven анимации, которая изменяет размер фона.
#scrolldriven #html #css

Управление ленивой загрузкой, бесконечной прокруткой и анимациями в React 🔄
К слову про скроллы. Статья на SitePoint рассказывает о трех случаях использования React Intersection Observer: ленивая загрузка, бесконечная прокрутка и триггеры анимации/переходов. React Intersection Observer помогает отслеживать изменения в области видимости элемента в вашем приложении. Особенно подробно описывается использование ленивой загрузки для улучшения производительности, включая примеры кода и преимущества этого подхода.
#react #intersectionobserver #lazyloading

SafeTest: новаторский подход к тестированию фронтенда 🧪
Netflix представляет SafeTest, передовую библиотеку для E2E тестирования веб-приложений. SafeTest обходит проблемы стандартных методов тестирования пользовательского интерфейса, объединяя в себе test runner, библиотеку автоматизации для браузеров, UI-фреймворк и функции внедрения зависимостей. Netflix уже успешно применяет SafeTest. Но почему-то в самой статье, кроме того, что nextlix научились использовать интерфейсы, больше ничего не говорится. Нужно идти смотреть описание на npm.
#safetest #testing #netflix

Чистая архитектура в React 🏛
К слову об интерфейсах. Алекс Кондов представляет свою новую главу из предстоящей книги “The Full-Stack Tao”, посвященную чистой архитектуре в React. Он рассказывает о том, как правильно структурировать код, чтобы справиться с изменениями и расширением функционала в процессе разработки. В статье приводятся примеры построения простого приложения, которое со временем развивается и становится более сложным.
#react #cleanarchitecture

Упрощение отображения форм в React с помощью абстракции компонента Field 📝
Продолжая про интерфейсы. Статья на ClarityDev объясняет, как упростить отображение форм в React, абстрагируя логику отображения инпута в повторно используемый компонент. Каждое поле формы теперь обернуто в компонент, который включает в себя лейбл, инпут и сообщение об ошибке. Это делает код формы более чистым, удобным для поддержки и легким для чтения.
#react #forms #cleanarchitecture

Синтаксис сокращенной записи методов считается вредным 🚫
Мэт Покок предупреждает о потенциальных проблемах, связанных с использованием синтаксиса сокращенной записи методов в TypeScript. Этот синтаксис может привести к ошибкам в рантайм. Вместо него рекомендуется использовать синтаксис свойств объекта. В статье подробно объясняется, почему синтаксис сокращенной записи методов может быть вредным, и предлагаются способы решения этой проблемы.
#typenoscript #methodshorthand #runtimeerrors

Функциональное ядро, императивная оболочка 🏗
В этой статье, Альберт Ллузас делится своими мыслями о построении современных архитектур с использованием подхода “функциональное ядро, императивная оболочка”. Он обсуждает, как этот подход может помочь в создании более чистого и управляемого кода.
#architecture #fcis

C4 Model для визуализации архитектуры ПО 📐
C4 Model - это подход к визуализации архитектуры ПО, разработанный Саймоном Брауном. Он предлагает использовать четыре уровня диаграмм: контекст, контейнеры, компоненты и код. Этот подход помогает архитекторам ПО и командам разработки лучше понять и объяснить сложные системы.
#architecture #c4model #visualization

Паттерны из других языков и фреймворков для улучшения ваших фронтенд-проектов 🧩
Автор делится паттернами из различных языков программирования и фреймворков, которые могут преобразить ваш подход к фронтенд-разработке. Рассмотрены техники, такие как иммутабельность данных, использование шаблонов проектирования и адаптация функционального программирования для упрощения составных операций. Эти методы позволяют значительно повысить качество и поддерживаемость ваших фронтенд-проектов.
#programming #frontend #designpatterns

"Ошибки", которые говорят о том, что вы делаете всё правильно 🚀
Статья разбирает распространённые ситуации, воспринимаемые как проблемы или ошибки в бизнесе и разработке, которые на самом деле являются признаками правильных решений. От повторного добавления функций, которые были исключены из плана, до пересмотра стратегий и оптимизации инфраструктуры после роста - все эти "проблемы" на самом деле говорят о грамотном управлении и развитии. Автор подчеркивает, что подобные ситуации должны восприниматься не как неудачи, а как возможности для развития и улучшения.
#business #development #strategy

Стриминг HTML без учета порядка и без использования JavaScript 🌐
Статья демонстрирует технику, позволяющую выводить HTML-контент на странице без учета порядка данных и без применения JavaScript, используя только Shadow DOM. Это позволяет улучшить взаимодействие с пользователем, быстрее отображая контент на странице, пока идёт загрузка остальных её частей. Описаны преимущества такого подхода, включая более быструю загрузку страниц и возможность начать рендеринг страницы до полной загрузки всех её элементов.
#streaming #outoforder #html #shadowdom

React/JSX как серверный шаблонизатор 📜
Kent C. Dodds делится опытом использования React и JSX для серверной шаблонизации в PayPal, объясняя преимущества единой системы шаблонизации для фронтенда и бэкенда. Он рассказывает о вызовах, таких как внедрение внешнего HTML через dangerouslySetInnerHTML и управление локализацией, и предлагает решения, которые упрощают разработку и поддержку. Статья подчеркивает важность единой системы для уменьшения сложности и облегчения поддержки кода.
#react #javanoscript

React Suspense from scratch! 🦥
Suspense в React — ключевая часть серверных компонентов, обеспечивающая более плавную загрузку и взаимодействие. В этом видео рассматривается, как Suspense работает под капотом, и предлагается пошаговое руководство по созданию аналогичного функционала. Это позволяет глубже понять принципы работы и внедрения Suspense в ваши проекты для улучшения пользовательского опыта.
#react #suspense #rsc

12-факторные CLI-приложения 🖥
CLI-приложения - это отличный способ создания продуктов. Они требуют меньше времени на разработку по сравнению с веб-приложениями и обладают большей мощностью. В статье представлены 12 принципов для создания CLI-приложений, следуя которым, вы сможете предложить пользователям CLI-интерфейс, который они полюбят.
#cli #12factor

Шаринг состояния в архитектуре островов 🏝
Архитектура островов предлагает маленькие, сфокусированные блоки интерактивности внутри серверно-отрисованных веб-страниц. Вместо того, чтобы одно приложение контролировало полностраничную отрисовку, есть несколько точек входа. Статические области страницы - это чистый неинтерактивный HTML и не требуют гидратации. Динамические области - это комбинация HTML и скриптов, способных самостоятельно гидратироваться после отрисовки. Все хорошо, до того момента, когда нам необходимо шарить данные между такими островами.
#islands #architecture #state

Фронтенд на бекенде или бекенд на фронтенде? 🏝
Кстати про острова. Записали выпуск подкаста "Два Ивана" (название обсуждается). Подкаст где разработчики из Ostrovok.ru разговаривают про Python и IT и каким-то боком к ним затесался фронтендер. Поразгоняли про фреймворки.
#podcast #frameworks #ostrovok.ru

Meow 🐱
Пакет meow упрощает создание CLI-приложений на Node.js. Он позволяет определить команды, флаги и аргументы, а также обрабатывать их. Подробнее в документации и примерах на GitHub.
#nodejs #cli #javanoscript

Интерактивные формы и запросы в терминале 💻
"Huh?" - это мощная библиотека для создания интерактивных форм и запросов в терминале, легкая в использовании как самостоятельный инструмент или в интеграции с приложением Bubble Tea. Она включает в себя специальный режим для улучшения доступности для экранных считывателей. Примером использования является создание формы для заказа бургеров, где пользователи могут выбирать ингредиенты и указывать особые инструкции. Библиотека поддерживает различные типы полей ввода, включая выбор из списка, множественный выбор и подтверждение действий.
#cli #terminal #accessibility

Просто команд-раннер 🚀
"Just" - это утилита командной строки для удобного сохранения и выполнения проектно-специфических команд. Она предлагает простой синтаксис для создания рецептов в файле justfile, вдохновленный make, но с улучшениями для лучшего опыта использования. Поддерживает передачу аргументов в рецепты, автоматическое определение переменных окружения и может быть использована в любой поддиректории проекта. Это отличная альтернатива npm-скриптам для разработчиков, стремящихся к упрощению процесса настройки проекта.
#cli #terminal #automation

Быстрый cli интерфейс для Git, написанный на Rust 🚀
GitUI предлагает комфорт графического интерфейса Git прямо в вашем терминале. С его помощью вы можете инспектировать, коммитить и амендить изменения, управлять stash'ами, ветками и просматривать лог коммитов с интуитивным управлением только с клавиатуры. Поддержка асинхронного API Git обеспечивает плавное управление, а поддержка сабмодулей только расширяет его функциональность.
#git #rust #terminal #cli

Ленивый способ управления всем, что связано с Docker 🐳
Lazydocker - это простой терминальный интерфейс для работы с Docker и Docker Compose, написанный на Go. Он предлагает быстрый доступ ко всем необходимым функциям: отслеживание состояния контейнеров, просмотр логов, управление объемами и сетями. Инструмент особенно полезен для тех, кто хочет минимизировать время, проведенное в командной строке, сохраняя при этом полный контроль над своими контейнерами Docker.
#docker #devops #cli

Тестируемая архитектура 🧩
В докладе рассматриваются принципы построения архитектуры ПО с упором на удобство и эффективность тестирования. Спикер детально анализируют проблемы тестирования на различных уровнях архитектуры, предлагая решения по оптимизации процессов разработки и тестирования. От начальных этапов проектирования до углубленного рассмотрения конкретных техник и подходов. Был на этом докладе и могу сказать, что смотрится на одном дыхании.
#testing #architecture

Почему серверные компоненты React - это будущее разработки 🚀
Немного поздно, но статья разбирает, почему серверные компоненты React являются значительным шагом вперед для веб-разработки, обещая повышение производительности и улучшение пользовательского опыта за счет более эффективной загрузки и взаимодействия. Освещаются технические аспекты, такие как стриминг HTML с сервера и селективная гидратация на клиенте, которые минимизируют задержки в загрузке и обеспечивают более быстрый доступ к контенту. Внедрение серверных компонентов предлагает новую архитектуру для разработки на React, оптимизируя как размеры пакетов, так и общую производительность приложений.
#react #rsc

Как Next.js нарушает основы React 🌐
Классика СЯЛ, сразу же критика Next.js. В статье обсуждается, как Next.js с его подходом к серверным компонентам React ставит под угрозу основные принципы самого React, предпочитая производительность удобству разработки (DX). Автор поднимает проблемы, возникающие при внедрении RSC в Next.js, такие как необходимость подъема состояния, разделения компонентов и пропдрилинга, которые усложняют процесс разработки и поддержку кода. Предлагается обсудить возможности улучшения API фреймворков для достижения оптимального баланса между производительностью и удобством разработки. Иронично, что деврелы Next.js – это самые известные евангелисты DX.
#nextjs #react #rsc

React Server Components теперь в RedwoodJS 🌲
RedwoodJS объявил о внедрении React Server Components (RSC), обещая улучшить производительность и упростить разработку. Этот шаг позволяет разработчикам использовать преимущества серверного рендеринга для создания более быстрых и динамичных веб-приложений. Статья подробно описывает интеграцию RSC, демонстрируя как это влияет на процесс разработки в RedwoodJS и какие новые возможности открываются перед создателями приложений. Также в статье основной упор на то, что RedwoodJS хотят отказаться от GraphQl как основного механизма загрузки данных.
#redwoodjs #react #graphql #rsc

Компоненты полного стека: новая эпоха веб-разработки 🔄
Статья "Компоненты полного стека" открывает новую страницу в веб-разработке, объединяя фронтенд и бэкенд в едином компоненте. Этот подход позволяет сократить количество файлов и упростить архитектуру приложений, делая процесс разработки более интуитивным и менее подверженным ошибкам. Кент Додс делится личным опытом использования таких компонентов и подробно объясняет, как они могут улучшить как производительность, так и удобство работы разработчиков. На самом деле сомнительная идея засунуть логику нескольких слоев в одно место и ожидать, что это будет хоть сколько-то поддерживаемым. Есть еще один взгляд на компоненты полного стека от Сема Селикова (тот который презентовал "PHP" в Next.js), который выглядит более адекватно.
#fullstack #remix #rsc

Производительность — враг чистого кода 🏃‍♂️
Хотя, возможно, все ответы в этой статье. В этой, заставляющей задуматься, статье автор углубляется в противоречивые отношения между производительностью и чистым кодом. Хотя мы стремимся создавать элегантное и легко поддерживаемое программное обеспечение, производительность часто становится грозным врагом. Она нарушает нашу архитектурную гармонию, создает компоненты полного стека и преследует нас во снах. Суть заключается в компромиссах: некоторые хорошо спроектированные архитектуры вводят абстракции через уровни, но сопоставление данных между этими уровнями может привести к снижению производительности. Как мы можем достичь баланса?
#architecture #cleanarchitecture #perf

Генератор тестов Playwright: как начать 🛠
Начали с тестов ими и закончим. Playwright предлагает инструмент для генерации тестов, который позволяет автоматизировать создание тестов по мере выполнения действий в браузере. Это упрощает начало работы с тестированием, помогая выбирать лучшие локаторы и улучшая устойчивость тестов. Средство генерации доступно прямо из VS Code, позволяя записывать новые тесты, генерировать утверждения и локаторы, а также использовать эмуляцию для создания тестов, специфичных для разных устройств и условий.
#testing #playwright #codegen