Фронтенд Гайд
Open in Telegram
Канал для фронтендеров, много полезных лайфхаков, фичей, макетов, тестов! Все представлено в виде готового кода, бери и юзай в своем проекте. 6ad1a2aabe82d4fbb0d6
Show more6 283
Subscribers
No data24 hours
-127 days
-7130 days
Posts Archive
6 283
Станьте AI-разработчиком на Python и зарабатывайте от 150.000₽ в месяц 🔥🔥🔥
Мы научим вас создавать и тренировать нейронные сети, и вы сможете:
1️⃣ Устроиться разработчиком в крупную компанию и зарабатывать от 150 тыс. ₽ в месяц
2️⃣ Разрабатывать такие проекты на заказ и зарабатывать от 500 тыс. ₽ за проект
3️⃣ Создать нейро-сотрудника в вашей компании и вырасти на +30-100% в зарплате
На интенсиве будет много практики: создадим 9 нейросетей за 1 вечер:
🧬 Оценка выброса CO2 по параметрам машины
🧬 Сегментация изображения для робота доставщика
🧬 Трекинг людей на видео
🧬 Распознавание речи
и другие
Ведущий интенсива - Senior AI-разработчик и основатель Университета искусственного интеллекта
🔥 Регистрируйтесь на бесплатный интенсив! Встречаемся в ближайшую среду. Вы узнаете, как освоить самую востребованную профессию и гарантированно зарабатывать!
6 283
В чём разница между сессией и куком ?
Спросят с вероятностью 7%
Сессии и куки — это два различных способа хранения данных в веб-приложениях, и у них есть свои особенности и случаи применения. Вот основные различия между ними:
Куки (Cookies)
1️⃣Хранение данных на клиенте:
Куки хранятся в браузере пользователя. Это небольшие кусочки данных, которые веб-сервер отправляет браузеру, и браузер сохраняет их и отправляет обратно на сервер с каждым запросом.
2️⃣Долговременное хранение:
Куки могут иметь установленный срок действия и могут сохраняться на длительное время (например, несколько дней, недель или даже лет), если это явно указано при их создании.
3️⃣Использование для идентификации:
Куки часто используются для сохранения информации о пользователе, такой как предпочтения, идентификаторы сессий или данные для авторизации.
4️⃣Размер и количество ограничены:
Обычно размер одной куки ограничен 4KB, и браузеры могут ограничивать количество куки (например, до 20-30 на один домен).
5️⃣Безопасность:
Куки могут быть подвержены угрозам безопасности, таким как кража куки (cookie theft) или атаки с подделкой межсайтовых запросов (CSRF). Использование флага
HttpOnly помогает защитить куки от доступа через JavaScript, а флаг Secure гарантирует их передачу только по HTTPS.
Пример создания куки:
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";Сессии (Sessions) 1️⃣Хранение данных на сервере: Данные сессии хранятся на сервере, а не в браузере пользователя. Браузер хранит только идентификатор сессии (обычно в куке), который используется для связи данных сессии с конкретным пользователем. 2️⃣Кратковременное хранение: Сессии, как правило, предназначены для хранения данных в течение одного сеанса работы пользователя (например, до закрытия браузера или истечения времени бездействия). Данные сессии удаляются, когда сессия заканчивается. 3️⃣Использование для хранения состояния: Сессии используются для хранения состояния пользователя между запросами, таких как состояние авторизации, содержимое корзины покупок и другие временные данные. 4️⃣Размер и масштабируемость: Поскольку данные сессии хранятся на сервере, размер их ограничен только серверными ресурсами. Это позволяет хранить больше данных по сравнению с куки. 5️⃣Безопасность: Сессии обычно считаются более безопасными, так как данные не передаются с каждым запросом и хранятся на сервере. Однако нужно заботиться о безопасности идентификаторов сессий, чтобы предотвратить атаки, такие как угон сессий (session hijacking). Пример создания сессии на сервере (с использованием Express.js):
const express = require('express');
const session = require('express-session');
const app = express();
app.use(session({
secret: 'mySecret',
resave: false,
saveUninitialized: true,
cookie: { secure: true }
}));
app.get('/', (req, res) => {
if (req.session.views) {
req.session.views++;
res.send(Number of views: ${req.session.views});
} else {
req.session.views = 1;
res.send('Welcome to the session demo. Refresh!');
}
});
app.listen(3000);
✅Куки хранятся в браузере пользователя, могут быть долговременными и используются для хранения небольших данных, таких как идентификаторы и предпочтения.
✅Сессии хранятся на сервере, обычно кратковременные и используются для хранения состояния пользователя между запросами.6 283
Вам нравится читать контент на этом канале?
Возможно, вы задумывались о том, чтобы купить на нем интеграцию?
Следуйте 3 простым шагам, чтобы сделать это:
1) Регистрируйтесь по ссылке: https://telega.in/n/frontend_dev5
2) Пополняйтесь удобным способом
3) Размещайте публикацию
Если тематика вашего поста подойдет нашему каналу, мы с удовольствием опубликуем его.
6 283
+9
Помощь в трудоустройстве в IT-сфере!
В России из-за дефицита айтишников запустили бесплатную программу по обучению IT-специалистов. Теперь любой желающий может попробовать себя в IT с полного нуля и начать обучение бесплатно!
Узнайте про дальнейшее трудоустройство в ведущие IT-компании для восполнения кадрового дефицита.
Для этого нужно:
- Перейти по ссылке
- Заполнить анкету и ответить на вопросы (занимает менее 3 минут)
- На основании ваших ответов вы сразу узнаете, подходит ли вам сфера IT и сможете ли вы в ней работать
Перейти на сайт
#реклама 16+
urban-university.ru
О рекламодателе
6 283
Frontend теперь в телеграм!
Собрали крупные русскоязычные каналы, где вы найдете всю информацию о последних трендах и лучших практиках:
Логово Верстальщика — научит верстать продающие сайты.
Node.JS — поможет узнать все тонкости и секреты JavaScript и его фреймворков.
Frontender's notes — советы и полезные приемы для каждого разработчика.
6 283
+9
Помощь в трудоустройстве в IT-сфере!
В России из-за дефицита айтишников запустили бесплатную программу по обучению IT-специалистов. Теперь любой желающий может попробовать себя в IT с полного нуля и начать обучение бесплатно!
Узнайте про дальнейшее трудоустройство в ведущие IT-компании для восполнения кадрового дефицита.
Для этого нужно:
- Перейти по ссылке
- Заполнить анкету и ответить на вопросы (занимает менее 3 минут)
- На основании ваших ответов вы сразу узнаете, подходит ли вам сфера IT и сможете ли вы в ней работать
Перейти на сайт
#реклама 16+
urban-university.ru
О рекламодателе
6 283
🤔 Какой метод JavaScript позволяет проверить, содержит ли элемент указанный класс?
6 283
Repost from Задачи по Frontend
CSS. Какое свойство определяет, может ли пользователь выбрать текст?
6 283
📌 Чем let отличается от var ?
Ключевые слова let и var используются для объявления переменных, но между ними есть несколько важных различий, касающихся области видимости, поднятия (hoisting) и создания блока.
🤔 Область видимости (Scope)
➕ Var:
Объявления переменных с использованием
var имеют функциональную область видимости, что означает, что переменная, объявленная с помощью нее внутри функции, доступна везде в этой функции.
➕ Let:
В отличие от var, let имеет блочную область видимости. Это означает, что переменная, объявленная с помощью нее в блоке (например, в цикле или условном операторе), будет доступна только в пределах этого блока.
🤔 Поднятие (Hoisting)
➕ Var:
Переменные, объявленные с ее помощью, поднимаются в начало функции или скрипта. Это означает, что они могут быть использованы до своего объявления, хотя до инициализации они будут иметь значение undefined.
➕ Let:
Переменные, объявленные с ее помощью, также поднимаются, но не инициализируются. Попытка доступа к такой переменной до её объявления приведет к ошибке ReferenceError. Это поведение известно как "временная мертвая зона" (temporal dead zone, TDZ).
🤔 Создание в глобальном контексте
➕ Var:
Переменные, объявленные с ее помощью в глобальном контексте, становятся свойствами глобального объекта (window в браузерах).
➕ Let:
Переменные, объявленные с ее помощью в глобальном контексте, не становятся свойствами глобального объекта.
🤔 Примеры:
if (true) {
var varVariable = "Я доступен везде в функции";
let letVariable = "Я доступен только в этом блоке";
}
console.log(varVariable); // Работает, потому что var имеет функциональную область видимости
console.log(letVariable); // Ошибка, потому что let имеет блочную область видимости
console.log(a); // undefined из-за поднятия
var a = 3;
console.log(b); // ReferenceError из-за временной мертвой зоны
let b = 4;
🤔 Итог:
let предоставляет более строгую и предсказуемую область видимости переменных, что улучшает управляемость кодом и уменьшает вероятность ошибок, связанных с неожиданным доступом или изменением данных. var может быть полезен, когда нужна функциональная область видимости, но сейчас let и const (для объявления констант) являются предпочтительными вариантами для управления переменными.
В то время как var объявляет переменную, доступную во всей функции, а let ограничивает видимость переменной блоком, в котором она объявлена.
Available now! Telegram Research 2025 — the year's key insights 
