Тонкий намек

👉

@frontend_mind

‍🎯Podlodka React Crew #3 — сезон о паттернах и практиках фронтенда

Как писать продуманный и масштабируемый фронтенд с помощью React? Какие паттерны реально работают, а какие — мода ради моды?

В новом сезоне Podlodka React Crew (https://podlodka.io/reactcrew?utm_campaign=early_bird_react_crew_3&utm_source=telegram&utm_medium=paid&utm_content=frontendInterview&erid=2SDnjcGHQGN)обсуждаем архитектуру, производительность, нестандартные layout'ы, системный подход к интервью и многое другое.

📌 В программе:
• Паттерны анимаций с View Transition API
• Проверка AI-ассистентов на реальных задачах
• Глубокое погружение в архитектуру React Hooks
• Практика layout'ов вне CSS Grid и Flexbox
• System Design для фронтендера: как не завалить интервью

💡Все доклады — с практикой, кейсами и интерактивом.

📆 Реактим с 25 по 29 августа. Бегом за билетами: http://podlodka.io/reactcrew (https://podlodka.io/reactcrew?utm_campaign=early_bird_react_crew_3&utm_source=telegram&utm_medium=paid&utm_content=frontendInterview&erid=2SDnjcGHQGN)

@frontend_mind

@frontend_mind

👉

@frontend_mind

Тимлид должен джуна похвалить и попросить больше ничего такого на работу не таскать

👉

@frontend_mind

@frontend_mind

‍👨👨👨👨👨👨👨👨👨👨

Каналы с Junior IT вакансиями
и стажировками

Подписывайся и забирай свой оффер 🤘

1. Стажировки и вакансии по России и миру (https://t.me/+0pB5PvlGdZA4NmIy)
2. IT вакансии по СНГ (https://t.me/+HxYSirFlkig1NmU6)
3. IT стажировки по СНГ (https://t.me/+ADCyVdphURU3MTYy)
4. IT стажировки и волонтерства (https://t.me/+5BERvX6Ynu45ZDIy)
5. IT стажировки в топовых компаниях мира (https://t.me/+uhGVwEFzk_5hYTQy)
6. Удалённые IT вакансии и стажировки (https://t.me/+RJ3pBlKJrMoxZjFi)
7. Python вакансии и стажировки (https://t.me/+jf9Gqni1YfM4YWZi)
8. БИГТЕХ вакансии и стажировки (https://t.me/+avP1Yji66IZkZjY8)
9. Design вакансии и стажировки (https://t.me/+VRXdy751EKRiMmFi)
10. QA вакансии и стажировки (https://t.me/+zor23TZh-IQ5OWYy)
11. Junior вакансии и стажировки (https://t.me/+9yeAOJ_nHNxmZTdk)
12. Frontend вакансии и вопросы собесов (https://t.me/+rLB9z0aFOCRkOTVi)
13. Вакансии и стажировки для аналитиков (https://t.me/+fEhpl8ly1_g1YWFi)
14. Вакансии в русских стартапах за границей (https://t.me/+UHO8u9qP2q42MGEy)
15. Вакансии и стажировки для DevOps (https://t.me/+8xGMrjd3jpE1Yzgy)
16. Вакансии, которых нет на ХХ.РУ (https://t.me/+_tb5Yl0o3FEwNDJi)

@frontend_mind

@frontend_mind

👉

@frontend_mind

Как происходит аутентификация?

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

Методы

Аутентификация по паролю
Пользователь вводит имя пользователя и пароль, которые проверяются на сервере. Веб-сайты с формой входа, требующей логин и пароль. После успешного входа пользователь получает токен (например, JWT), который используется для дальнейших запросов. API, использующие токены для проверки подлинности запросов.

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

Двухфакторная аутентификация (2FA)
Требует два различных типа проверки (например, пароль и одноразовый код). Вход с использованием пароля и SMS-кода.

Биометрическая аутентификация
Использует биометрические данные (например, отпечатки пальцев или распознавание лиц) для проверки подлинности. Вход через Touch ID или Face ID на мобильных устройствах.

Сервер на Node.js с использованием Express и JWT

Установка зависимостей
npm install express jsonwebtoken bcryptjs body-parser

Создание сервера
const express = require('express');
const jwt = require('jsonwebtoken');
const bcrypt = require('bcryptjs');
const bodyParser = require('body-parser');

const app = express();
const PORT = 3000;
const SECRET_KEY = 'your_secret_key';

let users = []; // Для простоты используем массив в памяти

app.use(bodyParser.json());

// Регистрация пользователя
app.post('/register', async (req, res) => {
const { username, password } = req.body;
const hashedPassword = await bcrypt.hash(password, 8);
users.push({ username, password: hashedPassword });
res.status(201).send('User registered');
});

// Вход пользователя
app.post('/login', async (req, res) => {
const { username, password } = req.body;
const user = users.find(u => u.username === username);
if (!user) {
return res.status(404).send('User not found');
}

const isPasswordValid = await bcrypt.compare(password, user.password);
if (!isPasswordValid) {
return res.status(401).send('Invalid password');
}

const token = jwt.sign({ username: user.username }, SECRET_KEY, { expiresIn: '1h' });
res.json({ token });
});

// Защищенный маршрут
app.get('/protected', (req, res) => {
const token = req.headers['authorization'];
if (!token) {
return res.status(401).send('Access denied');
}

try {
const decoded = jwt.verify(token, SECRET_KEY);
res.json({ message: 'Protected content', user: decoded });
} catch (err) {
res.status(401).send('Invalid token');
}
});

app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});

👉

@frontend_mind

Create Phone Number

Создайте функцию, которая принимает массив из 10 целых чисел (от 0 до 9) и возвращает строку этих чисел в виде номера телефона

Пример:
createPhoneNumber([1, 2, 3, 4, 5, 6, 7, 8, 9, 0]) // => returns "(123) 456-7890"

👉

@frontend_mind

@frontend_mind

Пособие по промпт-инжинирингу для программистов

Разработчики всё чаще полагаются на ИИ-помощников, чтобы ускорить повседневную работу с кодом. Эти инструменты умеют автозаполнять функции, предлагать исправления ошибок и даже генерировать целые модули или MVP. Тем не менее, как многие из нас убедились, качество вывода ИИ во многом зависит от качества предоставленного запроса. Плохо сформулированный промпт может привести к нерелевантным или общим ответам, в то время как хорошо составленный — дать продуманные, точные и даже креативные решения для кода.

В статье Эдди Османи, ведущий инженер Google, выделяет ключевые шаблоны запросов, повторяемые фреймворки и запоминающиеся примеры, которые нашли отклик у разработчиков.

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

👉

@frontend_mind

Настройка сайта для поисковиков и скринридеров

Современный сайт — это не только интерфейс пользователя. Чтобы сайт «взлетел» нужно многое добавить после реализации макета в вёрстке. Наряду с быстродействием, оптимизацией загрузки контента и кода, важно уделить внимание настройке сайта под поисковые системы и социальные сети, отработать вариант использования сайта с помощью скринридеров и другое.

Для этого необходимо разобраться с тем, как различные сервисы, службы, приложения «читают» сайт, как подготовить его для них и как сделать это правильно.

👉

@frontend_mind

‍Что такое прогрессивный рендеринг (progressive rendering)?

Чтобы понять что такое progressive rendering, нужно понимать отличие client-side rendering от server-side rendering.

При client-side rendering (CSR) контент отрисовывается на стороне клиента (в браузере). Такой подход используется в React, когда браузеру отсылается практически пустой HTML-документ, а потом запускается скрипт, который генерирует HTML в указанном скрипту теге. Как правило это . Пользователь будет видеть пустую страницу, пока JS-файл полностью не загрузится.

При server-side rendering (SSR) HTML-разметка генерируется на сервере, отсылается браузеру и после этого отрисовывается на клиенте. Пользователь увидит контент сразу же, но не сможет взаимодействовать со страницей, пока не загрузится JS-файл.

При использовании прогрессивного рендеринга, кусочки HTML генерируется на сервере и отсылаются браузеру в порядке их приоритетности. То есть, элементы с самым высоким приоритетом (например , фон, главная интерактивная часть страницы) генерируются на сервере, отсылаются браузеру и отрисовываются в первую очередь. Это позволяет пользователю увидеть самый важный контент как можно скорее, не дожидаясь полной загрузки всего контента. То есть, progressive rendering что-то среднее между client-side rendering и server-side rendering.

Техники реализации прогрессивного рендеринга:
Ленивая загрузка (Lazy Loading). Загрузка контента по мере необходимости. Например, если страница достаточно большая, не нужно загружать изображения вне вьюпорта. Загрузка изображения стартует за некоторое время до того как она появится во вьюпорте. Эту же технику можно использовать для загрузки контента изначально скрытых элементов. Например, можно загрузить контент закрытого меню когда пользователь наводит курсор на кнопку открытия.

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

👉

@frontend_mind

How many arguments

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

Пример:
args_count(1, 2, 3) -> 3
args_count(1, 2, 3, 10) -> 4

👉

@frontend_mind

Построение пользовательских интерфейсов

Интерфейс — лицо электронного продукта. Лицо успешных сайтов, приложений и программ вызывает у пользователей доверие и симпатию. Построение пользовательских интерфейсов — интересная и многогранная работа. Эта книга будет полезна всем, кто участвует в работе над созданием электронных продуктов. Вы начинающий дизайнер интерфейсов? Книга поможет углубить и расширить знания о профессии. Вы практикующий UI/UX-дизайнер? Из книги вы почерпнёте инструменты и методики, которые позволят увеличить эффективность вашей работы. Вы менеджер, глава студии или стартапа? Эта книга поможет вам наладить и систематизировать процессы в команде.

👉

@frontend_mind

@frontend_mind

Как браузер понимает что картинка является картинкой?

Браузер понимает, что файл является картинкой, благодаря MIME-типу, расширению файла и контексту его использования в HTML. Рассмотрим подробнее.

MIME-тип (Media Type)
MIME-тип (Multipurpose Internet Mail Extensions) сообщает браузеру, какой тип контента загружается. Например:
- image/png → PNG
- image/jpeg → JPEG
- image/svg+xml → SVG
- image/gif → GIF
- image/webp → WebP
Content-Type: image/png

Расширение файла
Хотя MIME-тип важнее, браузер также может ориентироваться на расширение файла (.jpg, .png, .gif).


HTML-теги и атрибуты
Когда браузер встречает в коде такие теги, как , , , он ожидает, что внутри будет изображение.


Формат и сигнатура файла
Даже если расширение и MIME-тип указаны неверно, браузер может проверить сигнатуру файла (первые байты). Например:
- PNG-файл всегда начинается с байтов 89 50 4E 47 (что означает "PNG" в ASCII).
- JPEG — FF D8 FF.
- GIF — 47 49 46 38 (GIF89a).

👉

@frontend_mind

@frontend_mind

Шаг за шагом проектируем сокращатель ссылок

В этой статье я хочу показать, что из себя представляет System Design. На примере простого и очень популярного насобеседованиях сервиса «Сокращатель ссылок», мы рассмотрим стадии System Design и в конце у нас будет готова схема системы со всеми расчетами.

👉

@frontend_mind