Интерактивный гайд по CRDT

Благодаря CRDT можно легко создавать приложения с совместным редактированием, такие как Google Docs, но без необходимости подключаться к серверу.

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

https://jakelazaroff.com/words/an-interactive-intro-to-crdts/

#typescript #crdt

Чистая архитектура фронтенд приложений

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

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

https://habr.com/ru/articles/868058/

#фронтенд

Бедолага фронтендер(

@ithumor

Что такое AJAX и как он работает?

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

Здесь вы сможете узнать, как работают её основные компоненты, и какие преимущества она предоставляет разработчикам и пользователям.

#ajax

Сохраняем шпаргалку по HTTP-ответам

Как правильно изучать бэкенд-разработку

В этом видео вы разберетесь во всем, что касается Backend-разработки:

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

#видео #бэкенд

Как упростить работу с React при помощи useLoaderData

Традиционный подход с использованием useState и useEffect для получения данных в React часто приводит к проблемам. Загвоздка заключается в том, что компонент одновременно монтируется, перемонтируется и размонтируется, что приводит к неожиданному поведению.

Вместо этого можно использовать хук useLoaderData из React Router. Он позволяет вынести логику загрузки данных в отдельную функцию-загрузчик. Это упрощает код, позволяет отделить логику загрузки от отображения и избавляет от необходимости отслеживать состояние загрузки.

Подробнее о том, как настроить useLoaderData: https://nuancesprog.ru/p/18962/

#react

Знакомство с Koa

Koa.js — это современный и мощный фреймворк для создания веб-приложений на базе Node.js. Он поддерживается и развивается большим сообществом разработчиков и предлагает удобный и элегантный способ написания серверного кода, используя возможности новейших версий JavaScript и концепцию асинхронности.

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

#koajs #бэкенд

Что такое прототипные методы в JavaScript

Давайте сегодня разберем одну из ключевых концепций в JavaScript — прототипные методы. Что это такое и какую роль они играют в нашем коде?

В JavaScript каждое значение имеет прототип — объект, от которого оно «унаследует» свойства и методы. Это позволяет создавать структуры, которые могут делиться функциональностью. Прототипы помогают избежать дублирования кода и облегчить его поддержку.

Как работают прототипные методы?

Когда мы создаем объект, он может использовать методы, определенные в его прототипе. Например, у всех объектов, созданных на основе Array, есть общие методы, такие как .push() и .pop(). Эти методы определены в Array.prototype. Если вы не знаете, что такое prototype, подумайте о нем как о шаблоне для создания объектов.

Давайте рассмотрим простой пример. Мы создадим конструктор для объекта Person и добавим метод greet в его прототип:

function Person(name) {
    this.name = name;
}
// Добавляем метод greet в прототип Person
Person.prototype.greet = function() {
    console.log(`Привет, меня зовут ${this.name}!`);
};
// Создаем нового человека
const alice = new Person('Алиса');
const bob = new Person('Боб');
// Вызываем метод greet
alice.greet(); // Привет, меня зовут Алиса!
bob.greet();   // Привет, меня зовут Боб!

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

Использование прототипов полезно по нескольким причинам:

1. Экономия памяти. Методы хранятся в одном месте, а не копируются в каждый объект.
2. Упрощение кода. Легче добавлять, изменять и удалять методы.
3. Наследование. Можно создавать иерархии объектов, где один объект наследует свойства и методы другого.

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

#простымисловами

Стать фронтендером в Яндексе за выходные

26–27 апреля состоится Weekend Offer Frontend: всего за два дня можно пройти технические секции и попасть в Яндекс. Оставьте свою заявку на участие в мероприятии до 23 апреля.

Вы сможете выбрать одну из 10 команд. Это команды Поиска: Еком-сценарии, Архитектура, Международный Поиск, Красота, Финансы, Видеопоиск. И команды Вертикалей: Путешествия, Недвижимость, Аренда, Авто.ру.

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

Узнать подробности и зарегистрироваться можно здесь.

Реклама. ООО "Яндекс". ИНН 7736207543

Полезный справочник для фронтенд-разработчика

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

Для тех, кто предпочитает самообучение, самое то: https://frontendmasters.com/guides/front-end-handbook/2024/

#фронтенд #обучение

Лайк, если узнал свою прошлую галерку

Разработчику на заметку

Когда приходит идея проекта, его хочется сразу запустить, а не ковыряться неделю в конфигах. Вот для таких случаев и есть серверы Aéza:

— сервер можно развернуть в пару кликов;  
— поддерживается любая ОС (от AlmaLinux до Windows Server 2022); 
— есть дата-центры в Москве и Санкт-Петербурге.

Хочешь — бери 1 ядро и 2 ГБ RAM, хочешь — развлекайся на 16 ядрах и 32 гигах памяти. Есть и выделенные серверы, если душа требует полной изоляции и свободы.

А главное — понятные тарифы, простая панель управления и бесплатная защита от DDoS уже в комплекте.

Так что если ты:
— запускаешь сервис;
— хочешь тестить код на «живом» сервере;
— устал от непредсказуемых облаков; 

то заглядывай в Aéza, выбирай подходящий тариф и получай 15% кэшбек на старте. 

Это #партнёрский пост

Скрытые возможности элемента input

Элемент input в HTML самый интересный. Большинство его собратьев вне зависимости от своих атрибутов ведут себя одинаково. При этом атрибут type элемента input может принимать 22 разных значения, которые не только меняют его поведение, но и влияют на внешний вид.

input отвечает за всё, начиная с текстового ввода и чекбоксов, заканчивая переключателями и кнопкой для сброса всех полей в форме.

В этой статье описали не только различные типы input, но и сопутствующие атрибуты, о которых вы могли не знать, и которые делают этот элемент более удобным и применимым в различных ситуациях: https://habr.com/ru/companies/ruvds/articles/785690/

#html #лучшиепрактики