Эффект капания воды

Делимся ссылкой на CodePen, в котором реализован эффект капания воды. Выглядит необыкновенно реалистично и это на чистом CSS!

Ссылка

#css

Chat2Code - это AI чат, который может генерировать веб-компоненты за считанные секунды. В настройках можно задать для какого фреймворка или библиотеки генерировать: React, Vue, Angular, Svelte.

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

Интересно пощупать и посмотреть на сколько он хорош!

Ссылка 

#инструменты

React Portals

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

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

Подробнее как работать с порталами и в каких случаях применять читайте в статье.

Ссылка

#react

Expresso TS - это Node.js + TypeScript фрэймворк для быстрого создания масштабируемых и простых в обслуживании серверных приложений.

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

Ссылка

#nodejs

AI генераторы картинок

Никак не можете найти подходящую картинку на просторах интернета? Можно воспользоваться AI генераторами картинок. В статье как раз представлен список с ссылками на такие инструменты. 

Ссылка

#дизайн

12 советов для отладки кода

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

Автор статьи делится советами и инструментами, которые использует при отладке.

Особенно интересный про git bisect - бинарный поиск, чтобы найти коммит, который привел к ошибке.

Ссылка

#статьи

htmx - это библиотека, которая предлагает свежий взгляд на создание динамичного веб-интерфейса за счет использования таких функций, как Ajax и CSS transitions прямо в HTML.

Подробнее о библиотеке и как она работает читайте в статье.

Ссылка

#html

Уязвимости сервера Node.js 

В статье рассказывается о распространенных уязвимостях сервера:

- Инъекционные атаки
- Межсайтовый скриптинг (XSS)
- DoS (Denial-of-Service - "отказ в обслуживании")
- Неправильная аутентификация и авторизация
- Небезопасные прямые ссылки на объекты (IDOR) 

Эти уязвимости не уникальны для Node.js, их можно найти в любом языке программирования серверной части. Но в статье дается информация о том, как их предотвратить в Node.js.

Ссылка

#nodejs

SOLID — это аббревиатура пяти основных принципов проектирования в объектно-ориентированном программировании — Single responsibility, Open-closed, Liskov substitution, Interface segregation и Dependency inversion.

Эти принципы позволяют строить на базе ООП масштабируемые и сопровождаемые программные продукты с понятной бизнес-логикой.

В статье даются практические примеры принципов SOLID в JavaScript.

Ссылка на статью

#js

Мы живем в эпоху своего рода CSS-ренессанса: новые возможности, техники, эксперименты и идеи сыплются на нас в таком количестве, какого мы не видели со времен CSS3.

В то время как сложность CSS кажется постоянной дискуссией, Джефф Грэм рассматривает способы, которыми современный CSS в 2023 году фактически сделал CSS проще в написании.

Подробнее о способах упростить CSS читайте в статье.

Ссылка

#css

Чистая архитектура фронтенда

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

В этой статье речь пойдет об архитектуре фронтенда, проектирование которой подчиняется множеству принципов, в том числе SOLID, KISS, DRY и DDD.

Ссылка

#статьи

Что будет в консоли?

function sayHi() {
  console.log(name);
  console.log(age);
  var name = "Lydia";
  let age = 21;
}

sayHi();

Сборка мусора в JavaScript

Каждый из нас, хотя бы раз, слышал о сборке мусора. Мы знаем, что где-то там работает сборщик мусора, убирая за нами ненужные объекты. Но сколько из нас знают, как он устроен под капотом?

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

Поехали убираться!

Ссылка

#js

Усиливаем TypeScript с помощью switch + notReachable

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

Ссылка

#js

WebTransport API — это интерфейс/механизм передачи данных между клиентом и сервером с помощью протокола HTTP/3.

На днях я прочитал статью о WebTransport API как будущей альтернативе или даже замене WebSockets. Мне стало интересно, что это такое и с чем его едят. Давайте разбираться вместе.


Ссылка

#utils