Освойте Promises в JavaScript: пошаговое руководство
Асинхронный код — неотъемлемая часть современного JavaScript. Промисы (Promise) помогают управлять такими операциями, обеспечивая чистый и понятный синтаксис. В этом руководстве вы узнаете, как создавать промисы, обрабатывать их состояния (
#фронтенд #javascript #асинхронность
Original post link: t.me/tproger_web/5473
Forwarded and filtered by @smartfeed_bot
Асинхронный код — неотъемлемая часть современного JavaScript. Промисы (Promise) помогают управлять такими операциями, обеспечивая чистый и понятный синтаксис. В этом руководстве вы узнаете, как создавать промисы, обрабатывать их состояния (
pending, fulfilled, rejected) и использовать методы .then(), .catch() и .finally() для управления результатами асинхронных операций. Примеры кода и наглядные схемы помогут закрепить материал и применять его на практике.#фронтенд #javascript #асинхронность
Original post link: t.me/tproger_web/5473
Forwarded and filtered by @smartfeed_bot
Дока
Promise — JavaScript — Дока
Как уйти за значением выражения и вернуться, когда оно будет доступно.
Forwarded from Frontender's notes [ru]
Проверьте, содержит ли строка одинаковое количество "x" и "o". Метод должен возвращать логическое значение и быть нечувствительным к регистру. Строка может содержать любой символ.
Пример кода:
XO("ooxx") => true
XO("xooxx") => false
XO("ooxXm") => true
XO("zpzpzpp") => true // when no 'x' and 'o' is present should return true
XO("zzoo") => falseРешение задачи
function XO(str) {
// Преобразуем строку в нижний регистр
str = str.toLowerCase();
// Подсчитываем количество 'x' и 'o'
let xCount = 0;
let oCount = 0;
for (let char of str) {
if (char === 'x') xCount++;
if (char === 'o') oCount++;
}
// Сравниваем количество 'x' и 'o'
return xCount === oCount;
}
// Примеры использования
console.log(XO("ooxx")); // true
console.log(XO("xooxx")); // false
console.log(XO("ooxXm")); // true
console.log(XO("zpzpzpp")); // true
console.log(XO("zzoo")); // false
Please open Telegram to view this post
VIEW IN TELEGRAM
Forwarded from Senior Frontend - javascript, html, css
Про реальный опыт, и нужен ли он
Мой реальный опыт в 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
Мой реальный опыт в 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 операторы
➡️ Пример:
🗣️ Использование === рекомендуется для избегания ошибок, связанных с преобразованием типов. Это помогает сделать код более предсказуемым и читаемым.
Original post link: t.me/frontendnoteschannel/4777
Forwarded and filtered by @smartfeed_bot
== и === в 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
Автор образовательного контента по фронтенду Wes Bos представил бесплатный сборник заметок по образцу содержания его курса по JavaScript для начинающих. Над этим ресурсом автор работал больше года.
https://wesbos.com/javascript
Original post link: t.me/senior_front/2553
Forwarded and filtered by @smartfeed_bot
Wes Bos
Beginner JavaScript Notes & Reference
👩💻 Разница между innerHTML и textContent в JavaScript
• innerHTML позволяет получить или изменить HTML-разметку внутри элемента.
• textContent выводит только текстовое содержимое без HTML-тегов
➡️ Пример:
textContent бы
Original post link: t.me/frontendnoteschannel/4790
Forwarded and filtered by @smartfeed_bot
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 бы
стрее и безопаснее, так как не интерпретирует HTMLOriginal 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
Чтобы притянуть стороннюю библиотеку в проект, не обязательно городить 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
Forwarded from Веб-страница
Что такое примеси (mixins) в JS
Примесь — это набор методов, который вы «подмешиваете» в несколько разных классов, чтобы не дублировать код. Вместо того чтобы создавать огромный класс-«комбайн» или строить сложную цепочку наследования, вы берёте кусочек функциональности — примесь — и добавляете его туда, где он нужен.
Почему вообще понадобились примеси:
1. В JavaScript только одно наследование «по классам». Класс может расширять ровно один другой класс (extends). Если же необходимо поделиться возможностями между несколькими иерархиями, наследование начинает «скрипеть».
2. Составление (composition) гибче, чем наследование. Примеси позволяют «составлять» объект из маленьких независимых блоков логики, не связывая их жёстко цепочкой «родитель → потомок».
Как это выглядит в коде:
Вы только что сделали любого User умеющим писать лог в консоль, не меняя иерархию классов.
Начиная с ES2015, популярна форма, где примесь — это функция, возвращающая класс:
Так вы оборачиваете любой базовый класс, не трогая оригинальную цепочку extends.
Плюсы примесей:
1. Повторное использование кода. Один раз написали — применили в нескольких местах, избавившись от копипаста.
2. Гибкая композиция. Собираете объект как конструктор LEGO из маленьких блоков логики.
3. Изолированность обязанностей. Каждая примесь решает одну задачу, поэтому код легче читать и тестировать.
#простымисловами #javascript #основы
Примесь — это набор методов, который вы «подмешиваете» в несколько разных классов, чтобы не дублировать код. Вместо того чтобы создавать огромный класс-«комбайн» или строить сложную цепочку наследования, вы берёте кусочек функциональности — примесь — и добавляете его туда, где он нужен.
Почему вообще понадобились примеси:
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 #основы
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
Чтобы дать пользователям доступ к функциям, привычным в нативных приложениях, и добавить новые, можно использовать 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
Вы пишете код не для компилятора — он съест любую абракадабру, если синтаксис верен. Вы пишете для людей, для того парня из соседнего отдела, который будет разбирать ваш код через полгода. Для себя, когда забудете, о чём думали в момент написания. Для тимлида, у которого нет времени расшифровывать ваши «фичи», замаскированные под техдолг.
Грязный код — это про непонятные переменные, запутанные модули и решения «на скорую руку». Вас ждёт после такого потеря во времени и в лучшем случае косые взгляды коллег. К сожалению, непонятный код часто пишут не только из-за спешки, но и из-за неопытности и чрезмерного энтузиазма тех, кто хочет всё переделать.
Давайте разберём, как превратить кошмар в конфетку — детали внутри.
Original post link: t.me/seniorFront/5269
Forwarded and filtered by @smartfeed_bot
Forwarded from Senior Frontend - javascript, html, css
Что такое прототипное наследование?
Это механизм, с помощью которого объекты могут наследовать свойства и методы от других объектов. Это одна из основных особенностей языка JavaScript, отличающая его от классических моделей наследования, используемых во многих других языках программирования.
Как это работает
Каждый объект имеет специальное скрытое свойство
Пример:
В этом примере объект
Основные принципы
- Прототипная цепочка: Когда вы обращаетесь к свойству объекта, автоматически ищет это свойство в объекте, а затем — в его прототипах, пока не достигнет конца цепочки прототипов.
-
- Создание объектов с определённым прототипом: Для создания объектов с указанием прототипа можно использовать
Отличия от классического наследования
В отличие от него, прототипное наследование не использует классы как таковые (до введения
👉 @seniorFront
Это механизм, с помощью которого объекты могут наследовать свойства и методы от других объектов. Это одна из основных особенностей языка 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
Таки за крышу надо платить.
По его словам, Zoom изначально разрабатывался для бизнеса, который мог себе позволить абонентскую плату за приложение. Теперь, после наплыва кучи бесплатных пользователей, на приложение посыпались многочисленные обвинения в плохой безопасности. Выслушав всё это, разработчики начали прикручивать end-to-end шифрование на звонки, но опция эта будет доступна только для бизнес клиентов. Звонки плебеев же шифроваться не будут, мотивируется это сотрудничеством Zoom и ФБР, потому что мало ли кто и что может обсуждать в бесплатном мессенджере.
Источник: ZDNet
Original post link: t.me/your_tech/9878
Forwarded and filtered by @smartfeed_bot
➡️ Градиентный текст с тенью
В наши дни градиентный текст довольно легко сделать с помощью
Читать...
Original post link: t.me/frontendnoteschannel/4845
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
Заметки разработчика
Градиентный текст с тенью
Градиентный текст довольно легко сделать с помощью `background-clip: text;` — но это убивает возможность использовать `text-shadow`. На помощь приходит SVG.
Forwarded from Веб-страница
От подписчика: Как работают generics в TypeScript на реальном примере
Вам когда-нибудь приходилось писать универсальную функцию, которая работает с разными типами данных — и при этом хочется сохранить строгую типизацию? Именно для таких случаев в TypeScript есть generics. Концепция, знакомая по Java, C#, Kotlin и даже Rust или Go, здесь реализована лаконично и мощно.
🔍 Когда это действительно нужно
Представим задачу: есть сервис генерации изображений. В зависимости от исполнителя (например, OpenAI или DeepAI) параметры запроса могут отличаться. Чтобы избежать ошибок и сделать код устойчивым к изменениям, можно связать тип исполнителя с набором параметров с помощью generics.
📦 Типы параметров:
🔁 Соответствие между исполнителем и типом параметров:
🧠 И теперь — самое интересное. С помощью generics можно автоматически определять нужный тип параметров при создании задачи:
📌 Пример использования в методе сервиса:
📎 А вот и вызов метода:
Если параметры окажутся не теми, TypeScript подскажет об ошибке ещё до запуска кода.
👨💻 Полный пример можно посмотреть в песочнице.
🎯 Вывод
Generics в TypeScript — это способ писать более гибкий и надёжный код. Если освоите эту концепцию, работа с типами станет не только проще, но и безопаснее.
Прислал: @IlyaIvanchikov
Вы также можете прислать свои материалы в нашу предложку!
#отподписчика #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
Forwarded from Senior Frontend - javascript, html, css
Что такое двустороннее связывание ?
Двустороннее связывание данных (Two-way data binding) — это паттерн проектирования, используемый в разработке пользовательских интерфейсов, при котором пользовательский интерфейс автоматически обновляется при изменении данных, и наоборот, данные автоматически изменяются при модификации пользовательским интерфейсом. Это означает, что модель и представление (view) синхронизированы в реальном времени: изменение в модели немедленно отражается в представлении, и любое изменение в представлении немедленно обновляет модель.
Как это работает
У вас есть текстовое поле в форме (представление) и переменная (модель), которая хранит значение этого текстового поля. С двусторонним связыванием, если пользователь изменяет значение в текстовом поле, переменная в модели будет автоматически обновлена соответствующим образом. Аналогично, если переменная изменяется программно (например, в результате какой-то логики приложения), изменение отразится в текстовом поле.
Оно широко используется в фреймворках и платформах для разработки одностраничных приложений (SPA), таких как Angular. В Angular, например, это достигается с помощью директивы
В этом примере,
Преимущества:
- Упрощение разработки, поскольку не нужно вручную обновлять представление или модель при изменении другой части.
- Улучшение пользовательского опыта, обеспечивая немедленное отображение изменений без дополнительных действий пользователя или дополнительного кода.
Недостатки:
- Сложность отладки, поскольку автоматическое обновление значений в обе стороны может привести к неожиданным эффектам и затруднить трассировку потока данных.
- Производительность, особенно в больших и сложных приложениях, где непрерывная синхронизация данных между моделью и представлением может повлиять на быстродействие.
👉 @seniorFront
Двустороннее связывание данных (Two-way data binding) — это паттерн проектирования, используемый в разработке пользовательских интерфейсов, при котором пользовательский интерфейс автоматически обновляется при изменении данных, и наоборот, данные автоматически изменяются при модификации пользовательским интерфейсом. Это означает, что модель и представление (view) синхронизированы в реальном времени: изменение в модели немедленно отражается в представлении, и любое изменение в представлении немедленно обновляет модель.
Как это работает
У вас есть текстовое поле в форме (представление) и переменная (модель), которая хранит значение этого текстового поля. С двусторонним связыванием, если пользователь изменяет значение в текстовом поле, переменная в модели будет автоматически обновлена соответствующим образом. Аналогично, если переменная изменяется программно (например, в результате какой-то логики приложения), изменение отразится в текстовом поле.
Оно широко используется в фреймворках и платформах для разработки одностраничных приложений (SPA), таких как Angular. В Angular, например, это достигается с помощью директивы
[(ngModel)], которая связывает значение HTML элемента формы (например, <input>) с свойством компонента.<input [(ngModel)]="user.name">
В этом примере,
user.name — это свойство компонента, которое связано с текстовым полем. Любое изменение в поле ввода немедленно обновит user.name, и любое изменение user.name будет немедленно отражено в поле ввода.Преимущества:
- Упрощение разработки, поскольку не нужно вручную обновлять представление или модель при изменении другой части.
- Улучшение пользовательского опыта, обеспечивая немедленное отображение изменений без дополнительных действий пользователя или дополнительного кода.
Недостатки:
- Сложность отладки, поскольку автоматическое обновление значений в обе стороны может привести к неожиданным эффектам и затруднить трассировку потока данных.
- Производительность, особенно в больших и сложных приложениях, где непрерывная синхронизация данных между моделью и представлением может повлиять на быстродействие.
👉 @seniorFront
Forwarded from Веб-страница
Деплоим свой React-сайт, или что делать на сервере
Когда ваш первый сайт готов, и VPS арендован, появляются закономерные вопросы: как развернуть проект на домене? Пост подойдет новичкам, которые впервые привязывают что-то свое к домену.
Шаг 1. Стягиваем код
Сначала клонируем репозиторий проекта на VPS:
Если для запуска понадобится Node.js определенной версии, установим через официальный скрипт:
После этого установим зависимости проекта (их указываем в package.json):
Если на сервере маловато оперативной памяти (например, минималка на 1-2 ГБ RAM) — может помочь добавление swap-файла:
Шаг 2. Настраиваем переменные окружения
Создаем файл
Обратите внимание на префикс
Шаг 3. Собираем проект
Для деплоя нужна готовая сборка с оптимизированными файлами в папке build/
Шаг 4. Автоматический запуск с PM2
pm2 — удобный менеджер процессов для Node.js, с его помощью каждый новый коммит будет «усвоен» автоматически. Устанавливаем глобально:
Запускаем приложение через конфигурационный файл:
Последняя команда создаст автозапуск после перезагрузки сервера.
Шаг 5. Установка и настройка Nginx
nginx будет выступать обратным прокси и обеспечит работу по доменному имени. Устанавливаем:
Создаём конфигурацию сайта:
Это стартовая версия конфиги. Адаптировать ее под свои нужды помогут документация и нейронки:
Активируем сайт и проверяем конфигурацию:
Шаг 6. Получаем SSL-сертификат Let's Encrypt
Для безопасной работы сайта нужен сертификат. Установим certbot:
Добавим в доменном регистраторе (например, reg.ru) ресурсные записи:
A - @ - [IP-адрес сервера без портов]
А - www - [IP-адрес сервера без портов]
«Усвоение» записей обычно занимает не больше получаса.
Запустим получение сертификата:
Certbot автоматически настроит Nginx на использование HTTPS. Его, правда, придется перегенерировать раз в 4 месяца. Но можно настроить и автообновление.
Бывает, что, несмотря на отсутствие правил файервола, блокирующих порты 80 и 443, генерация SSL-сертификата через Let's Encrypt падает. Это может быть связано с политиками хостинг-провайдера, NAT, или другими непрозрачными ограничениями.
Если столкнулись с такой проблемой, попробуйте сменить хостинг-провайдера — чаще всего это решает вопрос с выдачей сертификата.
Это последний шаг, теперь ваш сайт на домене, и у вас в копилке новая ачивка :)
#бэкенд #react
@tproger_web
Когда ваш первый сайт готов, и 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
Сегодня воспользоваться всеми возможности ИИ всё ещё остаётся непростой задачей, ведь у многих сервисов нет прямой оплаты российскими картами. Да и вообще, многие инструменты даже не открываются без использования VPN.
Но есть решения, которые помогают обойти эти ограничения. Мы собрали подборку таких решений, указав их ключевые особенности и возможности. В ней вы узнаете, как получить доступ к возможностях ChatGPT, Claude и Gemini, а также других нейросетей.
А что предпочитаете вы?
❤️ — ChatGPT
👍 — Claude
😂 — Gemini
#chatgpt #claude #ИИ
Original post link: t.me/tproger_web/5652
Forwarded and filtered by @smartfeed_bot
Forwarded from Веб-страница
Псевдоэлемент vs Псевдокласс: Практические советы для реальных проектов
Что такое псевдоэлемент?
Псевдоэлемент позволяет добавить виртуальный элемент внутрь выбранного, не изменяя HTML-разметку. Это похоже на добавление штампа к документу: элемент остаётся прежним, а его оформление дополняется декоративными деталями, например, первой буквой абзаца или декоративной линией.
Пример:
Используйте псевдоэлементы, если хотите добавить что-то дополнительное, например, декоративные иконки или элементы оформления, которые не требуют отдельного HTML-блока.
Псевдоэлементы бывают следующими:
—
—
—
—
—
—
—
—
Что такое псевдокласс?
Псевдокласс меняет внешний вид элемента в зависимости от состояния, как будто элемент «перевоплощается» в зависимости от вашего взаимодействия с ним. Это работает, когда пользователь наводит курсор, активирует элемент или переводит его в фокус.
Пример:
Псевдоклассы применяются для управления активностью элемента — от наведения до фокуса — и помогают улучшить интерактивность пользовательского интерфейса.
Псевдоклассов очень много. Вот некоторые популярные виды псевдоклассов:
—
—
—
—
—
Когда использовать каждый вариант?
Псевдоэлементы добавляют декоративные или вспомогательные элементы визуально, не нарушая структуру HTML. Если вам нужно, чтобы страница выглядела ярче или содержала дополнительные визуальные подсказки (например, стрелочки, рамки, иконки), выбирайте псевдоэлементы.
Псевдоклассы же изменяют внешний вид уже существующих элементов в зависимости от их состояния. Это удобно для создания интерактивного интерфейса: ссылки изменяют цвет при наведении, поля выделяются в фокусе и так далее.
Важные моменты и подводные камни
При использовании этих инструментов важно учитывать совместимость браузеров: некоторые старые версии могут не поддерживать все возможности.
Также будьте внимательны к вопросам доступности: добавляемый декоративный контент не должен нарушать читаемость страницы или мешать пользователям с ограниченными возможностями. Кроме того, чрезмерное использование может усложнить поддержку кода, поэтому старайтесь использовать именно те варианты, которые действительно улучшают интерфейс и не дублируют функционал HTML.
Как вы применяете псевдоэлементы и псевдоклассы в своих проектах? Поделитесь опытом в комментариях!
#простымисловами #фронтенд #css
Что такое псевдоэлемент?
Псевдоэлемент позволяет добавить виртуальный элемент внутрь выбранного, не изменяя HTML-разметку. Это похоже на добавление штампа к документу: элемент остаётся прежним, а его оформление дополняется декоративными деталями, например, первой буквой абзаца или декоративной линией.
Пример:
p::first-letter {
font-size: 2em;
color: red;
}Используйте псевдоэлементы, если хотите добавить что-то дополнительное, например, декоративные иконки или элементы оформления, которые не требуют отдельного HTML-блока.
Псевдоэлементы бывают следующими:
—
::before — добавляет контент перед содержимым элемента.—
::after — добавляет контент после содержимого.—
::first-letter — стилизует первую букву элемента.—
::first-line — оформляет первую строку текста.—
::grammar-error — позволяет оформить часть документа, содержащую грамматическую ошибки, подсвеченную браузеров.—
::marker — стилизует поле маркера пункта, как маркированного, так и нумерованного.—
::selection — соответствует части документа, которая была выбрана.—
::spelling-error — как и ::grammar-error выделяет ошибку, отмеченную браузером, но уже орфографическуюЧто такое псевдокласс?
Псевдокласс меняет внешний вид элемента в зависимости от состояния, как будто элемент «перевоплощается» в зависимости от вашего взаимодействия с ним. Это работает, когда пользователь наводит курсор, активирует элемент или переводит его в фокус.
Пример:
a:hover {
color: green;
}Псевдоклассы применяются для управления активностью элемента — от наведения до фокуса — и помогают улучшить интерактивность пользовательского интерфейса.
Псевдоклассов очень много. Вот некоторые популярные виды псевдоклассов:
—
:hover — применяется при наведении курсора.—
:active — активируется во время нажатия.—
:focus — используется, когда элемент находится в фокусе (например, форма ввода).—
:visited — для посещённых ссылок.—
:not() — позволяет исключить элементы из селектора.Когда использовать каждый вариант?
Псевдоэлементы добавляют декоративные или вспомогательные элементы визуально, не нарушая структуру HTML. Если вам нужно, чтобы страница выглядела ярче или содержала дополнительные визуальные подсказки (например, стрелочки, рамки, иконки), выбирайте псевдоэлементы.
Псевдоклассы же изменяют внешний вид уже существующих элементов в зависимости от их состояния. Это удобно для создания интерактивного интерфейса: ссылки изменяют цвет при наведении, поля выделяются в фокусе и так далее.
Важные моменты и подводные камни
При использовании этих инструментов важно учитывать совместимость браузеров: некоторые старые версии могут не поддерживать все возможности.
Также будьте внимательны к вопросам доступности: добавляемый декоративный контент не должен нарушать читаемость страницы или мешать пользователям с ограниченными возможностями. Кроме того, чрезмерное использование может усложнить поддержку кода, поэтому старайтесь использовать именно те варианты, которые действительно улучшают интерфейс и не дублируют функционал HTML.
Как вы применяете псевдоэлементы и псевдоклассы в своих проектах? Поделитесь опытом в комментариях!
#простымисловами #фронтенд #css
Ключевые понятия LLM
Современные языковые модели (large language models) стали ключевым элементом в развитии искусственного интеллекта и обработки естественного языка.
Модели, основанные на глубоком обучении и архитектуре трансформеров, способны генерировать текст, отвечать на вопросы, писать код, создавать художественные произведения и даже участвовать в логических рассуждениях.
Освоение ключевых концепций, лежащих в основе LLM, позволяет глубже осознать их возможности и ограничения. В этом материале мы рассмотрим базовые термины и идеи, необходимые для работы с LLM и понимания их роли в современном мире.
Знание фундаментальных принципов, лежащих в основе работы LLM, открывает двери как для исследователей и разработчиков, так и для бизнес-специалистов, студентов и всех, кто хочет эффективно использовать эти технологии в своей практике.
Приятного прочтения!
Original post link: t.me/seniorFront/5443
Forwarded and filtered by @smartfeed_bot
Современные языковые модели (large language models) стали ключевым элементом в развитии искусственного интеллекта и обработки естественного языка.
Модели, основанные на глубоком обучении и архитектуре трансформеров, способны генерировать текст, отвечать на вопросы, писать код, создавать художественные произведения и даже участвовать в логических рассуждениях.
Освоение ключевых концепций, лежащих в основе LLM, позволяет глубже осознать их возможности и ограничения. В этом материале мы рассмотрим базовые термины и идеи, необходимые для работы с LLM и понимания их роли в современном мире.
Знание фундаментальных принципов, лежащих в основе работы LLM, открывает двери как для исследователей и разработчиков, так и для бизнес-специалистов, студентов и всех, кто хочет эффективно использовать эти технологии в своей практике.
Приятного прочтения!
Original post link: t.me/seniorFront/5443
Forwarded and filtered by @smartfeed_bot