🐙 CSS-Protips – подборка из 29 полезных советов по работе со стилями. В некоторых пунктах есть ссылки на документацию и примеры кода.

Сайтодел | #репозиторий #github


Original post link: t.me/sitodel/2305
Forwarded and filtered by @smartfeed_bot

React vs Vue – подробное сравнение и перспективы

В этой статье мы проведём подробный анализ современных практик frontend-разработки, сравним состояние React и Vue 5 лет назад и на текущий момент, а также попробуем спрогнозировать их перспективность в обозримом будущем с учётом развития LLM моделей и AI агентов. Посмотрим их экосистемы (например, Next.js и Nuxt, Zustand и Pinia), использование в бэкенде, популярность решений в энтерпрайзе и понимание разработчиками и LLM моделями.


Original post link: t.me/seniorFront/5231
Forwarded and filtered by @smartfeed_bot

Какие протоколы взаимодействия существуют в WEB?

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

HTTP (HyperText Transfer Protocol)
Это основной протокол для передачи данных в интернете, используемый для загрузки веб-страниц (HTML, CSS, JavaScript и изображений) от сервера к клиенту, обычно веб-браузеру. HTTP определяет методы (например, GET и POST), которые клиенты могут использовать для выполнения запросов к серверам.

HTTPS (HTTP Secure)
Это расширение HTTP, обеспечивающее зашифрованное соединение между клиентом и сервером. Это критически важно для обеспечения безопасности данных пользователя, особенно при передаче конфиденциальной информации, такой как логины и пароли, платёжные данные.

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

FTP (File Transfer Protocol)
Это стандартный протокол передачи файлов между компьютерами по сети. Он используется для загрузки и скачивания файлов с сервера, администрирования сайтов и управления содержимым сервера.

SMTP (Simple Mail Transfer Protocol)
Это протокол для отправки электронных писем. Он используется почтовыми серверами для доставки отправленных писем в почтовые ящики получателей.

MAP (Internet Message Access Protocol) и POP3 (Post Office Protocol version 3)
Это протоколы, используемые для извлечения электронной почты из почтового сервера. IMAP предлагает более сложные функции по сравнению с POP3, включая возможность работы с электронной почтой непосредственно на сервере, что позволяет пользователям доступ к почте с разных устройств.

TCP/IP (Transmission Control Protocol/Internet Protocol)
Это основные протоколы, лежащие в основе интернета, обеспечивающие передачу данных между различными устройствами в сети. Он отвечает за установление соединения и гарантию доставки данных, в то время как IP обеспечивает адресацию и маршрутизацию пакетов данных.

DNS (Domain Name System)
Это система, которая переводит доменные имена в IP-адреса, позволяя пользователям легко находить веб-сайты в интернете без необходимости запоминать числовые IP-адреса.

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

👉 @seniorFront

Освойте Promises в JavaScript: пошаговое руководство

Асинхронный код — неотъемлемая часть современного JavaScript. Промисы (Promise) помогают управлять такими операциями, обеспечивая чистый и понятный синтаксис. В этом руководстве вы узнаете, как создавать промисы, обрабатывать их состояния (pending, fulfilled, rejected) и использовать методы .then(), .catch() и .finally() для управления результатами асинхронных операций. Примеры кода и наглядные схемы помогут закрепить материал и применять его на практике.

#фронтенд #javascript #асинхронность


Original post link: t.me/tproger_web/5473
Forwarded and filtered by @smartfeed_bot

​Про реальный опыт, и нужен ли он

Мой реальный опыт в Angular — почти 11 месяцев, а в общем во фронтенде около 2.5 лет. До этого я работал на React.

Теперь к сути статьи, недавно я решил пооткликаться на вакансии junior и middle Angular разработчиков, везде в сопроводительных письмах указывая, что у меня опыта 10 месяцев, но зато он настоящий а не накрученный.

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

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

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

Но разве так правильно? Если идти дальше во вранье, то можно и собесы проходить с ИИ, и работать потом с gpt o3 или Claude 3.7 sonnet, самостоятельно мало что умея, разве такой квалификации нужны рабочие компаниям? Так может тогда уже в фильтрах не отсеивать джунов с 6–12 месяцев реального опыта, а концентрироваться на них? Ведь если накручивают опыт, то чаще уже от 2х лет, а вот джуны с полгода‑годом опыта, скорее всего имеют опыт реальный.

Знаю нескольких людей с курса который прошёл, они после него накрутили 2 года опыта, без проблем прошли собес и спокойно работают. Понятно что я бы тоже так мог сделать, для эксперимента даже один раз написал 2 года, и приглашения правда начали появляться, причём в крупные компании. Забавно, согласитесь. В целом такая тенденция в IT меня расстраивает, получается накрутка становится единственным способом попасть на работу. Хочется верить что со временем всё подуспокоится.

В целом я с этим уже смирился, так как делаю это не ради денег, а ради удовольствия. И думаю таких как я тут много.

👉 @seniorFront

👩‍💻 В чем разница между == и === в JavaScript?

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

➡️ Пример:

console.log(5 == '5');   // true, так как '5' преобразуется к числу
console.log(5 === '5');  // false, так как разные типы данных

console.log(null == undefined);  // true, при нестрогом сравнении они считаются равными
console.log(null === undefined); // false, строгий оператор учитывает типы данных

🗣️ Использование === рекомендуется для избегания ошибок, связанных с преобразованием типов. Это помогает сделать код более предсказуемым и читаемым.


Original post link: t.me/frontendnoteschannel/4777
Forwarded and filtered by @smartfeed_bot

⚡️Руководство по JavaScript для начинающих

Автор образовательного контента по фронтенду Wes Bos представил бесплатный сборник заметок по образцу содержания его курса по JavaScript для начинающих. Над этим ресурсом автор работал больше года.

https://wesbos.com/javascript


Original post link: t.me/senior_front/2553
Forwarded and filtered by @smartfeed_bot

👩‍💻 Разница между innerHTML и textContent в JavaScript

innerHTML и textContent используются для работы с содержимым HTML-элементов, но они работают по-разному.

• innerHTML позволяет получить или изменить HTML-разметку внутри элемента.

• textContent выводит только текстовое содержимое без HTML-тегов

➡️ Пример:

const div = document.createElement("div");
div.innerHTML = "Привет мир!";
console.log(div.innerHTML);   // Привет мир!
console.log(div.textContent); // Привет мир!

🗣️ Использу

йте innerHTML, если нужно работать с тегами и разметкой, а textContent — для безопасного вывода текста без HTML.

textContent быстрее и безопаснее, так как не интерпретирует HTML


Original post link: t.me/frontendnoteschannel/4790
Forwarded and filtered by @smartfeed_bot

Без сборщика: подключаем JS-библиотеку напрямую

Чтобы притянуть стороннюю библиотеку в проект, не обязательно городить Webpack или Vite. Здесь разбираются три вида файлов, которые обычно лежат в npm-дистрибутиве: модули ES, «классические» глобальные переменные и CommonJS, способы находить нужный вариант в dist, писать компактный import map и подключать сложные модули даже без Node.

В довесок — чек-лист инструментов (esm.sh, download-esm, JSPM) и подсказки, как определить тип файла за пару секунд.

#фронтенд #javascript


Original post link: t.me/tproger_web/5495
Forwarded and filtered by @smartfeed_bot

Что такое примеси (mixins) в JS

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

Почему вообще понадобились примеси:
1. В JavaScript только одно наследование «по классам». Класс может расширять ровно один другой класс (extends). Если же необходимо поделиться возможностями между несколькими иерархиями, наследование начинает «скрипеть».
2. Составление (composition) гибче, чем наследование. Примеси позволяют «составлять» объект из маленьких независимых блоков логики, не связывая их жёстко цепочкой «родитель → потомок».

Как это выглядит в коде:

// 1. Описываем примесь как обычный объект с методами
const canLog = {
  log(message) {
    console.log(`[${this.name}] ${message}`);
  }
};

// 2. Функция-помощник, которая «подмешивает» методы
function applyMixin(targetClass, mixin) {
  Object.assign(targetClass.prototype, mixin);
}

// 3. Используем
class User {
  constructor(name) { this.name = name; }
}

applyMixin(User, canLog);

const u = new User('Анна');
u.log('Привет!'); // [Анна] Привет!

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

Начиная с ES2015, популярна форма, где примесь — это функция, возвращающая класс:

const TimestampMixin = (Base) => class extends Base {
  get createdAt() {
    if (!this._createdAt) this._createdAt = Date.now();
    return this._createdAt;
  }
};

class Article {}
class Comment {}

class ArticleWithTime extends TimestampMixin(Article) {}
class CommentWithTime extends TimestampMixin(Comment) {}

Так вы оборачиваете любой базовый класс, не трогая оригинальную цепочку extends.

Плюсы примесей:
1. Повторное использование кода. Один раз написали — применили в нескольких местах, избавившись от копипаста.
2. Гибкая композиция. Собираете объект как конструктор LEGO из маленьких блоков логики.
3. Изолированность обязанностей. Каждая примесь решает одну задачу, поэтому код легче читать и тестировать.

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

Уходит эпоха


Original post link: t.me/tproger_web/5501
Forwarded and filtered by @smartfeed_bot

Web API, которые функционально приближают веб-приложения к нативным

Чтобы дать пользователям доступ к функциям, привычным в нативных приложениях, и добавить новые, можно использовать Web API.

В статье подробно рассказали о них и раскрыли некоторые тонкости: https://habr.com/ru/companies/clevertec/articles/820227/

#javascript #api #react


Original post link: t.me/tproger_web/5503
Forwarded and filtered by @smartfeed_bot

Чистый код — красивая архитектура. А работает ли это?

Вы пишете код не для компилятора — он съест любую абракадабру, если синтаксис верен. Вы пишете для людей, для того парня из соседнего отдела, который будет разбирать ваш код через полгода. Для себя, когда забудете, о чём думали в момент написания. Для тимлида, у которого нет времени расшифровывать ваши «фичи», замаскированные под техдолг.

Грязный код — это про непонятные переменные, запутанные модули и решения «на скорую руку». Вас ждёт после такого потеря во времени и в лучшем случае косые взгляды коллег. К сожалению, непонятный код часто пишут не только из-за спешки, но и из-за неопытности и чрезмерного энтузиазма тех, кто хочет всё переделать.

Давайте разберём, как превратить кошмар в конфетку — детали внутри.


Original post link: t.me/seniorFront/5269
Forwarded and filtered by @smartfeed_bot

​Что такое прототипное наследование?

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

Как это работает
Каждый объект имеет специальное скрытое свойство [[Prototype]] (как правило, доступное как proto или через Object.getPrototypeOf()), которое ссылается на другой объект — его прототип. Когда вы пытаетесь получить доступ к свойству или методу объекта, и это свойство/метод не найдено в самом объекте, поиск продолжается по цепочке прототипов, пока свойство/метод не будет найден или не будет достигнут конец цепочки прототипов (прототип null).

Пример:

let animal = {
  eats: true,
  walk() {
    console.log("Animal walk");
  }
};

let rabbit = {
  jumps: true,
  proto: animal
};

rabbit.walk(); // Animal walk
console.log(rabbit.eats); // true

В этом примере объект rabbit наследует свойство eats и метод walk от объекта animal через прототипную цепочку.

Основные принципы
- Прототипная цепочка: Когда вы обращаетесь к свойству объекта, автоматически ищет это свойство в объекте, а затем — в его прототипах, пока не достигнет конца цепочки прототипов.
- Object.prototype: В вершине прототипной цепочки находится Object.prototype. Он не имеет прототипа и содержит методы, доступные всем объектам, такие как toString(), hasOwnProperty() и другие.
- Создание объектов с определённым прототипом: Для создания объектов с указанием прототипа можно использовать Object.create(proto), где proto — объект, который должен стать прототипом для нового объекта.

Отличия от классического наследования
В отличие от него, прототипное наследование не использует классы как таковые (до введения class в ES6, которые являются "синтаксическим сахаром" над прототипным наследованием). Вместо этого объекты напрямую наследуют свойства и методы от других объектов.

👉 @seniorFront

​CEO компании-разработчка Zoom заявил, что бесплатные пользователи не будут получать end-to-end шифрование

Таки за крышу надо платить.

По его словам, Zoom изначально разрабатывался для бизнеса, который мог себе позволить абонентскую плату за приложение. Теперь, после наплыва кучи бесплатных пользователей, на приложение посыпались многочисленные обвинения в плохой безопасности. Выслушав всё это, разработчики начали прикручивать end-to-end шифрование на звонки, но опция эта будет доступна только для бизнес клиентов. Звонки плебеев же шифроваться не будут, мотивируется это сотрудничеством Zoom и ФБР, потому что мало ли кто и что может обсуждать в бесплатном мессенджере.

Источник: ZDNet


Original post link: t.me/your_tech/9878
Forwarded and filtered by @smartfeed_bot

➡️ Градиентный текст с тенью

В наши дни градиентный текст довольно легко сделать с помощью background-clip: text; — но это убивает возможность использовать text-shadow. На помощь приходит SVG.

Читать...


Original post link: t.me/frontendnoteschannel/4845
Forwarded and filtered by @smartfeed_bot

От подписчика: Как работают generics в TypeScript на реальном примере

Вам когда-нибудь приходилось писать универсальную функцию, которая работает с разными типами данных — и при этом хочется сохранить строгую типизацию? Именно для таких случаев в TypeScript есть generics. Концепция, знакомая по Java, C#, Kotlin и даже Rust или Go, здесь реализована лаконично и мощно.

🔍 Когда это действительно нужно

Представим задачу: есть сервис генерации изображений. В зависимости от исполнителя (например, OpenAI или DeepAI) параметры запроса могут отличаться. Чтобы избежать ошибок и сделать код устойчивым к изменениям, можно связать тип исполнителя с набором параметров с помощью generics.

📦 Типы параметров:

export type OpenAIImageGenerationType = {
  contentId: string;
  buffer: Buffer;
  prompt: string;
};

export type DeepAIImageGenerationType = {
  contentId: string;
  gender: GenderType;
  n: number;
};

🔁 Соответствие между исполнителем и типом параметров:

export enum GenerationExecutorTypeEnum {
  DEEP_IMAGE_GENERATION = 'deep_image_generation',
  OPEN_IMAGE_GENERATION = 'open_image_generation'
}

export type ExecutorToParamsMap = {
  [GenerationExecutorTypeEnum.OPEN_IMAGE_GENERATION]: OpenAIImageGenerationType;
  [GenerationExecutorTypeEnum.DEEP_IMAGE_GENERATION]: DeepAIImageGenerationType;
};

🧠 И теперь — самое интересное. С помощью generics можно автоматически определять нужный тип параметров при создании задачи:

export type GenerationJobType<E extends keyof ExecutorToParamsMap> = {
  name: string;
  executor: E;
  params: ExecutorToParamsMap[E];
  timeout?: number;
};

📌 Пример использования в методе сервиса:

class JobImageGenerationService {
  async createGenerationJob<E extends keyof ExecutorToParamsMap>(
    incomingJob: GenerationJobType<E>
  ): Promise<void> {
    // Тут мы уверены, что переданы нужные параметры под нужного исполнителя
  }
}

📎 А вот и вызов метода:

await this.jobImageGenerationService.createGenerationJob({
  name: "generate_image",
  executor: GenerationExecutorTypeEnum.DEEP_IMAGE_GENERATION,
  params: {
    contentId,
    gender,
    n,
  }
});

Если параметры окажутся не теми, TypeScript подскажет об ошибке ещё до запуска кода.

👨‍💻 Полный пример можно посмотреть в песочнице.

🎯 Вывод

Generics в TypeScript — это способ писать более гибкий и надёжный код. Если освоите эту концепцию, работа с типами станет не только проще, но и безопаснее.

Прислал: @IlyaIvanchikov

Вы также можете прислать свои материалы в нашу предложку!

#отподписчика #typescript

Что такое двустороннее связывание ?

Двустороннее связывание данных (Two-way data binding) — это паттерн проектирования, используемый в разработке пользовательских интерфейсов, при котором пользовательский интерфейс автоматически обновляется при изменении данных, и наоборот, данные автоматически изменяются при модификации пользовательским интерфейсом. Это означает, что модель и представление (view) синхронизированы в реальном времени: изменение в модели немедленно отражается в представлении, и любое изменение в представлении немедленно обновляет модель.

Как это работает
У вас есть текстовое поле в форме (представление) и переменная (модель), которая хранит значение этого текстового поля. С двусторонним связыванием, если пользователь изменяет значение в текстовом поле, переменная в модели будет автоматически обновлена соответствующим образом. Аналогично, если переменная изменяется программно (например, в результате какой-то логики приложения), изменение отразится в текстовом поле.

Оно широко используется в фреймворках и платформах для разработки одностраничных приложений (SPA), таких как Angular. В Angular, например, это достигается с помощью директивы [(ngModel)], которая связывает значение HTML элемента формы (например, <input>) с свойством компонента.

<input [(ngModel)]="user.name">

В этом примере, user.name — это свойство компонента, которое связано с текстовым полем. Любое изменение в поле ввода немедленно обновит user.name, и любое изменение user.name будет немедленно отражено в поле ввода.

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

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

👉 @seniorFront

Деплоим свой React-сайт, или что делать на сервере

Когда ваш первый сайт готов, и VPS арендован, появляются закономерные вопросы: как развернуть проект на домене? Пост подойдет новичкам, которые впервые привязывают что-то свое к домену.


Шаг 1. Стягиваем код

Сначала клонируем репозиторий проекта на VPS:

git clone https://github.com/username/repo-name.git
cd repo-name/

Если для запуска понадобится Node.js определенной версии, установим через официальный скрипт:

curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt install -y nodejs

После этого установим зависимости проекта (их указываем в package.json):

npm install

Если на сервере маловато оперативной памяти (например, минималка на 1-2 ГБ RAM) — может помочь добавление swap-файла:

sudo fallocate -l 2G /swapfile
sudo chmod 600 /swapfile
sudo mkswap /swapfile
sudo swapon /swapfile

Шаг 2. Настраиваем переменные окружения

Создаем файл .env в корне проекта. Админ использует условно бесплатную БД Supabase, потому шаблон состоит из таких средовых переменных:

NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=

Обратите внимание на префикс NEXT_PUBLIC_ — он необходим, чтобы переменные стали доступны на клиенте в приложениях, построенных на Next.js.


Шаг 3. Собираем проект

Для деплоя нужна готовая сборка с оптимизированными файлами в папке build/

npm run build

Шаг 4. Автоматический запуск с PM2

pm2 — удобный менеджер процессов для Node.js, с его помощью каждый новый коммит будет «усвоен» автоматически. Устанавливаем глобально:

sudo apt install -y curl
sudo npm install -g pm2

Запускаем приложение через конфигурационный файл:

pm2 start ecosystem.config.js
pm2 save
pm2 startup

Последняя команда создаст автозапуск после перезагрузки сервера.


Шаг 5. Установка и настройка Nginx

nginx будет выступать обратным прокси и обеспечит работу по доменному имени. Устанавливаем:

sudo apt update
sudo apt install -y nginx

Создаём конфигурацию сайта:

sudo vim /etc/nginx/sites-available/helenkapatsa

Это стартовая версия конфиги. Адаптировать ее под свои нужды помогут документация и нейронки:

server {
    listen 80;
    server_name example.com www.example.com;

    location / {
        proxy_pass http://localhost:3000; # порт вашего React-приложения или PM2 процесса
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

Активируем сайт и проверяем конфигурацию:

sudo ln -s /etc/nginx/sites-available/domain/etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx

Шаг 6. Получаем SSL-сертификат Let's Encrypt

Для безопасной работы сайта нужен сертификат. Установим certbot:

sudo apt install -y certbot python3-certbot-nginx

Добавим в доменном регистраторе (например, reg.ru) ресурсные записи:
A - @ - [IP-адрес сервера без портов]
А - www - [IP-адрес сервера без портов]

«Усвоение» записей обычно занимает не больше получаса.

Запустим получение сертификата:

sudo certbot --nginx -d example.com -d www.example.com

Certbot автоматически настроит Nginx на использование HTTPS. Его, правда, придется перегенерировать раз в 4 месяца. Но можно настроить и автообновление.

Бывает, что, несмотря на отсутствие правил файервола, блокирующих порты 80 и 443, генерация SSL-сертификата через Let's Encrypt падает. Это может быть связано с политиками хостинг-провайдера, NAT, или другими непрозрачными ограничениями.

Если столкнулись с такой проблемой, попробуйте сменить хостинг-провайдера — чаще всего это решает вопрос с выдачей сертификата.

Это последний шаг, теперь ваш сайт на домене, и у вас в копилке новая ачивка :)

#бэкенд #react
@tproger_web

Пользуемся ИИ ИИ без регистрации и VPN

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

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

А что предпочитаете вы?

❤️ — ChatGPT
👍 — Claude
😂 — Gemini

#chatgpt #claude #ИИ


Original post link: t.me/tproger_web/5652
Forwarded and filtered by @smartfeed_bot