HTML input types сильно различаются в зависимости от значения атрибута
Ознакомьтесь с этой шпаргалкой на будущее 🚀
👉 @frontend_1
type
, который вы используете 👨💻.Ознакомьтесь с этой шпаргалкой на будущее 🚀
👉 @frontend_1
👍6
🚀 Хотите стать Vue-разработчиком?
Пройдите вступительное тестирование и получите шанс обучаться на курсе Vue.js разработчик от OTUS! 🎓
Почему это важно?
- Знания для реальной работы: на курсе не просто теория, а практика на реальных проектах.
- Готовое портфолио: в конце обучения вы создаете полноценное приложение, которое можно показать работодателю.
- Поддержка экспертов: менторы из индустрии помогут на каждом шаге.
- Углубленное изучение Vue: от основ до продвинутых технологий — все, что нужно для успешной карьеры.
Как это работает?
1. Пройдите тестирование и оцените свой уровень.
2. Получите спеццену при поступлении в группу курса и начните обучение. Подробности уточняйте у менеджера.
3. Получайте знания, расширяйте свой стек технологий, реализуйте выпускной проект.
🔗 Пройти тестирование: https://vk.cc/cNl6Ia
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576
Пройдите вступительное тестирование и получите шанс обучаться на курсе Vue.js разработчик от OTUS! 🎓
Почему это важно?
- Знания для реальной работы: на курсе не просто теория, а практика на реальных проектах.
- Готовое портфолио: в конце обучения вы создаете полноценное приложение, которое можно показать работодателю.
- Поддержка экспертов: менторы из индустрии помогут на каждом шаге.
- Углубленное изучение Vue: от основ до продвинутых технологий — все, что нужно для успешной карьеры.
Как это работает?
1. Пройдите тестирование и оцените свой уровень.
2. Получите спеццену при поступлении в группу курса и начните обучение. Подробности уточняйте у менеджера.
3. Получайте знания, расширяйте свой стек технологий, реализуйте выпускной проект.
🔗 Пройти тестирование: https://vk.cc/cNl6Ia
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576
🚀 Git для фронтендера: Осваиваем продвинутые команды!
Все мы знаем основы Git:
🌱 Ветки: Ваш личный песочник
Ветки – это как параллельные вселенные вашего кода. Они позволяют вам работать над новой фичей или исправлением бага, не затрагивая основной код (обычно ветку
Почему это важно?
🟢 Изоляция: Ваши изменения не сломают работу других разработчиков.
🟢 Безопасность: Можно экспериментировать, не боясь испортить стабильную версию.
🟢 Параллельная разработка: Несколько фич могут разрабатываться одновременно.
Основные команды для работы с ветками:
🟢
🟢
🟢
🟢
🟢
💥 Разрешение конфликтов: Не паникуем!
Конфликты слияния (merge conflicts) – это неизбежная часть командной разработки. Они возникают, когда Git не может автоматически объединить изменения из разных веток, потому что они затронули одну и ту же строку кода или файл.
Как это выглядит?
В файле появятся специальные маркеры:
Что делать?
1. Определите конфликтующие участки: Ищите маркеры
2. Примите решение: Вручную отредактируйте файл, оставив нужный код (ваш, чужой или комбинацию).
3. Удалите маркеры: Очень важно убрать все эти
4. Добавьте и закоммитьте изменения:
🟢
🟢
Спокойствие и внимание к деталям – залог успешного разрешения конфликтов!
✨ Git Rebase: Чистая история коммитов
Когда использовать
🟢 Для "очистки" вашей ветки перед мержем в
🟢 Чтобы синхронизировать свою ветку с
Пример использования:
1. Переключитесь на свою фича-ветку:
2. Заберите свежие изменения из
3. Выполните rebase:
Важно:
🟢 Никогда не делайте
🟢 При
👉 @frontend_1
Все мы знаем основы Git:
add
, commit
, push
. Но чтобы по-настоящему эффективно работать в команде и поддерживать чистую историю проекта, нужно копнуть глубже. Сегодня поговорим о трёх мощных инструментах, которые сделают вашу работу с Git намного комфортнее: ветки, разрешение конфликтов и rebase.🌱 Ветки: Ваш личный песочник
Ветки – это как параллельные вселенные вашего кода. Они позволяют вам работать над новой фичей или исправлением бага, не затрагивая основной код (обычно ветку
main
или master
).Почему это важно?
Основные команды для работы с ветками:
git branch <название_ветки>
: Создать новую ветку.git checkout <название_ветки>
: Переключиться на ветку.git checkout -b <название_ветки>
: Создать и сразу переключиться (комбинация двух предыдущих).git branch -d <название_ветки>
: Удалить ветку (после мержа).git merge <название_ветки>
: Влить изменения из указанной ветки в текущую.💥 Разрешение конфликтов: Не паникуем!
Конфликты слияния (merge conflicts) – это неизбежная часть командной разработки. Они возникают, когда Git не может автоматически объединить изменения из разных веток, потому что они затронули одну и ту же строку кода или файл.
Как это выглядит?
В файле появятся специальные маркеры:
<<<<<<< HEAD
Ваш код в текущей ветке
=======
Код из ветки, которую вы мержите
>>>>>>> feature/new-design
Что делать?
1. Определите конфликтующие участки: Ищите маркеры
<<<<<<<
, =======
, >>>>>>>
.2. Примите решение: Вручную отредактируйте файл, оставив нужный код (ваш, чужой или комбинацию).
3. Удалите маркеры: Очень важно убрать все эти
<<<<<<<
, =======
, >>>>>>>
!4. Добавьте и закоммитьте изменения:
git add <конфликтующий_файл>
git commit -m "Resolve merge conflict"
Спокойствие и внимание к деталям – залог успешного разрешения конфликтов!
✨ Git Rebase: Чистая история коммитов
git rebase
позволяет переписать историю коммитов, перемещая или комбинируя их. В отличие от merge
, который добавляет новый коммит слияния, rebase
"пересаживает" ваши коммиты на новый базовый коммит, создавая линейную и чистую историю.Когда использовать
rebase
?main
: Сделать историю более читаемой, сгруппировать мелкие коммиты.main
: Подтянуть свежие изменения из main
в свою фича-ветку без создания лишнего мерж-коммита.Пример использования:
1. Переключитесь на свою фича-ветку:
git checkout feature/my-new-feature
2. Заберите свежие изменения из
main
: git pull origin main
(или git fetch origin main
)3. Выполните rebase:
git rebase main
Важно:
rebase
публичных веток! Это может сломать историю для других разработчиков. Используйте rebase только для своих личных веток, которые ещё не были отправлены в общий репозиторий или над которыми вы работаете в одиночку.rebase
могут возникнуть конфликты, решать их нужно так же, как и при merge
.👉 @frontend_1
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6❤2
🥾 Первый шаг в Angular - создаем приложение с нуля
Вводное знакомство с Angular - современным фреймворком для разработки веб-приложений. Мы расскажем о его основных концепциях, структуре и возможностях.
👉 Какие ключевые темы и вопросы будут рассмотрены на вебинаре?
- Что такое Angular и зачем он нужен
- Основные компоненты Angular:Модули, компоненты, директивы, пайпы, сервисы
- Работа с данными: привязка данных (data binding)
- Основы маршрутизации (routing)
- Простая форма и валидация
- Как запустить и протестировать приложение
- Какие результаты и навыки получат участники после вебинара?
Бесплатный вебинар проходит в рамках курса “Angular Developer“
Регистрация и подробнее о курсе Angular Developer - https://vk.cc/cNmlMM
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576
Вводное знакомство с Angular - современным фреймворком для разработки веб-приложений. Мы расскажем о его основных концепциях, структуре и возможностях.
👉 Какие ключевые темы и вопросы будут рассмотрены на вебинаре?
- Что такое Angular и зачем он нужен
- Основные компоненты Angular:Модули, компоненты, директивы, пайпы, сервисы
- Работа с данными: привязка данных (data binding)
- Основы маршрутизации (routing)
- Простая форма и валидация
- Как запустить и протестировать приложение
- Какие результаты и навыки получат участники после вебинара?
Бесплатный вебинар проходит в рамках курса “Angular Developer“
Регистрация и подробнее о курсе Angular Developer - https://vk.cc/cNmlMM
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576
📌Подборка полезных функций, которые пригодятся продвинутым frontend-разработчикам при работе с UI, производительностью и архитектурой
1. Throttle
Контролирует частоту вызова функции, полезно для scroll/resize-событий.
2. Debounce
Откладывает выполнение функции до окончания серии вызовов.
3. Deep Clone (без structuredClone)
4. Safe Access (Optional Chaining + Fallback)
5. Wait (async delay)
6. Generate UUID v4
7. Copy to Clipboard
8. Detect Outside Click (для dropdown/modals)
9. Download File from Blob
10. Dynamic Script Loader (например, для внешних SDK)
👉 @frontend_1
1. Throttle
Контролирует частоту вызова функции, полезно для scroll/resize-событий.
function throttle(fn: Function, delay: number) {
let last = 0;
return (...args: any[]) => {
const now = Date.now();
if (now - last >= delay) {
last = now;
fn(...args);
}
};
}
2. Debounce
Откладывает выполнение функции до окончания серии вызовов.
function debounce(fn: Function, delay: number) {
let timeout: ReturnType<typeof setTimeout>;
return (...args: any[]) => {
clearTimeout(timeout);
timeout = setTimeout(() => fn(...args), delay);
};
}
3. Deep Clone (без structuredClone)
function deepClone<T>(obj: T): T {
return JSON.parse(JSON.stringify(obj));
}
Подходит для простых объектов, не содержащих функций, дат и т.п.
4. Safe Access (Optional Chaining + Fallback)
function get<T>(obj: any, path: string, fallback?: T): T {
return path.split('.').reduce((acc, key) => acc?.[key], obj) ?? fallback;
}
5. Wait (async delay)
function wait(ms: number) {
return new Promise(resolve => setTimeout(resolve, ms));
}
6. Generate UUID v4
function uuidv4() {
return crypto.randomUUID(); // нативно в современных браузерах
}
7. Copy to Clipboard
async function copyToClipboard(text: string) {
try {
await navigator.clipboard.writeText(text);
} catch {
const textarea = document.createElement('textarea');
textarea.value = text;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
}
}
8. Detect Outside Click (для dropdown/modals)
function onClickOutside(element: HTMLElement, callback: () => void) {
function handler(event: MouseEvent) {
if (!element.contains(event.target as Node)) {
callback();
}
}
document.addEventListener('click', handler);
return () => document.removeEventListener('click', handler); // для очистки
}
9. Download File from Blob
function downloadBlob(blob: Blob, filename: string) {
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = filename;
a.click();
URL.revokeObjectURL(url);
}
10. Dynamic Script Loader (например, для внешних SDK)
function loadScript(src: string): Promise<void> {
return new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = src;
script.async = true;
script.onload = () => resolve();
script.onerror = () => reject(new Error(`Failed to load ${src}`));
document.head.appendChild(script);
});
}
👉 @frontend_1
👍10❤1
Как выжить в мире сложных интерфейсов в 2025-м: 7 работающих рецептов от React и CSS до дизайн-систем
Как говорил дядя Бен, большие продукты — это и большая ответственность. И без сложных интерфейсов тут никуда. А с ними и исследования становятся труднее, и встречается больше препятствий на этапе кода — от нюансов реактивного программирования до риска утонуть в разнообразии CSS-спецификаций.
Для МойОфис как мультипродуктовой экосистемы со сквозными сценариями — все эти вопросы очень актуальны! Поэтому на прошлой неделе JS-еры, дизайнеры и UX-исследователи нашей и других компаний собрались на митапе под названием Frontend&UX Talks, чтобы обсудить вопросы современного веба. Получилось интересно, драйвово и даже сказочно! (И я в прямом смысле этого слова :-))
В статье расскажем в 7 тезисах, к каким выводам пришли и как именно: поехали!
https://habr.com/ru/companies/ncloudtech/articles/924704/
👉 @frontend_1
Как говорил дядя Бен, большие продукты — это и большая ответственность. И без сложных интерфейсов тут никуда. А с ними и исследования становятся труднее, и встречается больше препятствий на этапе кода — от нюансов реактивного программирования до риска утонуть в разнообразии CSS-спецификаций.
Для МойОфис как мультипродуктовой экосистемы со сквозными сценариями — все эти вопросы очень актуальны! Поэтому на прошлой неделе JS-еры, дизайнеры и UX-исследователи нашей и других компаний собрались на митапе под названием Frontend&UX Talks, чтобы обсудить вопросы современного веба. Получилось интересно, драйвово и даже сказочно! (И я в прямом смысле этого слова :-))
В статье расскажем в 7 тезисах, к каким выводам пришли и как именно: поехали!
https://habr.com/ru/companies/ncloudtech/articles/924704/
👉 @frontend_1
👍5❤1
🚀 Упростите разработку с Vue: создаём игру за 1 вебинар
🔥Присоединяйтесь к открытому вебинару 16 июля в 20:00 мск., где мы покажем, как Vue упрощает разработку и делает её быстрее, чем привычный React.
На открытом уроке разберём:
🔹 как устроена реактивность во Vue через ref и в чём её отличие от useState в React;
🔹 управление логикой интерфейса с помощью v-if, v-model и событий;
🔹 как работать с таймерами, анимациями и рендерингом без сторонних библиотек;
🔹 пошаговое создание игры: от таймера и счёта до анимаций и рестарта;
🔹 почему Vue — это не только для новичков, а для тех, кто ценит чистоту, контроль и скорость разработки.
Не упустите шанс взглянуть на Vue в бою!
👉Регистрируйтесь: https://vk.cc/cNx7D9
Бесплатное занятие приурочено к старту курса “Vue.js разработчик”, на котором можно глубже погрузиться в особенности фреймворка, научиться работать с его инструментами и создавать реальные проекты.
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576
🔥Присоединяйтесь к открытому вебинару 16 июля в 20:00 мск., где мы покажем, как Vue упрощает разработку и делает её быстрее, чем привычный React.
На открытом уроке разберём:
🔹 как устроена реактивность во Vue через ref и в чём её отличие от useState в React;
🔹 управление логикой интерфейса с помощью v-if, v-model и событий;
🔹 как работать с таймерами, анимациями и рендерингом без сторонних библиотек;
🔹 пошаговое создание игры: от таймера и счёта до анимаций и рестарта;
🔹 почему Vue — это не только для новичков, а для тех, кто ценит чистоту, контроль и скорость разработки.
Не упустите шанс взглянуть на Vue в бою!
👉Регистрируйтесь: https://vk.cc/cNx7D9
Бесплатное занятие приурочено к старту курса “Vue.js разработчик”, на котором можно глубже погрузиться в особенности фреймворка, научиться работать с его инструментами и создавать реальные проекты.
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576
❤1
This media is not supported in your browser
VIEW IN TELEGRAM
Совет по CSS 💡
Мы часто используем кнопки действий, которые появляются при наведении, чтобы интерфейс выглядел чище.
Но пользователи, работающие только с клавиатурой или сенсорными экранами, не могут вызвать наведение, из-за чего такие кнопки становятся недоступными.
Вот как это исправить
👉 @frontend_1
Мы часто используем кнопки действий, которые появляются при наведении, чтобы интерфейс выглядел чище.
Но пользователи, работающие только с клавиатурой или сенсорными экранами, не могут вызвать наведение, из-за чего такие кнопки становятся недоступными.
Вот как это исправить
👉 @frontend_1
👍3
Forwarded from React
🔥9 полезных функций и хуков, которые пригодятся продвинутому React-разработчику для управления состоянием, оптимизацией и архитектурой компонентов
1. useDebounce
Позволяет "отложить" значение — полезно для ввода/поиска.
2. usePrevious
Возвращает предыдущее значение пропа или стейта.
3. useOnClickOutside
Закрытие модалок, дропдаунов при клике вне.
4. useIsMounted
Помогает избежать обновления состояния после размонтирования.
5. useEventCallback
Запоминает последнюю версию колбэка без повторного рендера.
6. useAsync
Асинхронный вызов с контролем загрузки, ошибок и результата.
7. useLocalStorage
Простой хук для хранения данных в
8. useMediaQuery
Работа с медиа-запросами в React без CSS.
9. useToggle
Бинарный переключатель состояния (on/off).
✍️ @React_lib
1. useDebounce
Позволяет "отложить" значение — полезно для ввода/поиска.
import { useEffect, useState } from 'react';
export function useDebounce<T>(value: T, delay = 300): T {
const [debounced, setDebounced] = useState(value);
useEffect(() => {
const timer = setTimeout(() => setDebounced(value), delay);
return () => clearTimeout(timer);
}, [value, delay]);
return debounced;
}
2. usePrevious
Возвращает предыдущее значение пропа или стейта.
import { useRef, useEffect } from 'react';
export function usePrevious<T>(value: T): T | undefined {
const ref = useRef<T>();
useEffect(() => {
ref.current = value;
}, [value]);
return ref.current;
}
3. useOnClickOutside
Закрытие модалок, дропдаунов при клике вне.
import { useEffect } from 'react';
export function useOnClickOutside(ref: React.RefObject<HTMLElement>, handler: () => void) {
useEffect(() => {
const listener = (e: MouseEvent) => {
if (!ref.current || ref.current.contains(e.target as Node)) return;
handler();
};
document.addEventListener('mousedown', listener);
return () => document.removeEventListener('mousedown', listener);
}, [ref, handler]);
}
4. useIsMounted
Помогает избежать обновления состояния после размонтирования.
import { useEffect, useRef } from 'react';
export function useIsMounted() {
const ref = useRef(false);
useEffect(() => {
ref.current = true;
return () => { ref.current = false; };
}, []);
return ref;
}
5. useEventCallback
Запоминает последнюю версию колбэка без повторного рендера.
import { useRef, useCallback } from 'react';
export function useEventCallback<T extends (...args: any[]) => any>(fn: T): T {
const ref = useRef(fn);
ref.current = fn;
return useCallback((...args: any[]) => ref.current(...args), []) as T;
}
6. useAsync
Асинхронный вызов с контролем загрузки, ошибок и результата.
import { useState, useCallback } from 'react';
export function useAsync<T>(asyncFn: () => Promise<T>) {
const [loading, setClick Me Load More] = useState(false);
const [data, setData] = useState<T | null>(null);
const [error, setError] = useState<unknown>(null);
const run = useCallback(async () => {
setClick Me Load More(true);
setError(null);
try {
const result = await asyncFn();
setData(result);
} catch (e) {
setError(e);
} finally {
setClick Me Load More(false);
}
}, [asyncFn]);
return { loading, data, error, run };
}
7. useLocalStorage
Простой хук для хранения данных в
localStorage
.
import { useState, useEffect } from 'react';
export function useLocalStorage<T>(key: string, initial: T) {
const [value, setValue] = useState<T>(() => {
const json = localStorage.getItem(key);
return json ? JSON.parse(json) : initial;
});
useEffect(() => {
localStorage.setItem(key, JSON.stringify(value));
}, [key, value]);
return [value, setValue] as const;
}
8. useMediaQuery
Работа с медиа-запросами в React без CSS.
import { useEffect, useState } from 'react';
export function useMediaQuery(query: string): boolean {
const [matches, setMatches] = useState(() => window.matchMedia(query).matches);
useEffect(() => {
const media = window.matchMedia(query);
const listener = () => setMatches(media.matches);
media.addEventListener('change', listener);
return () => media.removeEventListener('change', listener);
}, [query]);
return matches;
}
9. useToggle
Бинарный переключатель состояния (on/off).
import { useCallback, useState } from 'react';
export function useToggle(initial = false) {
const [state, setState] = useState(initial);
const toggle = useCallback(() => setState(prev => !prev), []);
return [state, toggle] as const;
}
✍️ @React_lib
👍3🔥1🤪1
Введение в Angular: основы и практические навыки
В ходе занятия познакомимся с основными концепциями Angular, разберем его ключевые компоненты и научимся создавать интерактивные и структурированные приложения. Что такое модули, компоненты, директивы, пайпы и сервисы, а также освоите работу с данными через привязку, настроите маршрутизацию и создадите простую форму с валидацией.
👉Какие ключевые темы и вопросы будут рассмотрены на вебинаре?
- Поймут, как устроен Angular и как с ним работать.
- Сумеют самостоятельно создать простое одностраничное приложение.
- Освоят основы архитектуры приложения: компоненты, модули и маршруты.
- Получат опыт настройки форм и базовой проверки данных.
- Будут готовы к дальнейшему изучению Angular и построению полноценных проектов.
Бесплатный вебинар проходит в рамках курса “Angular Developer“
Регистрация и подробнее о курсе Angular Developer - https://vk.cc/cNzyP1
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576
В ходе занятия познакомимся с основными концепциями Angular, разберем его ключевые компоненты и научимся создавать интерактивные и структурированные приложения. Что такое модули, компоненты, директивы, пайпы и сервисы, а также освоите работу с данными через привязку, настроите маршрутизацию и создадите простую форму с валидацией.
👉Какие ключевые темы и вопросы будут рассмотрены на вебинаре?
- Поймут, как устроен Angular и как с ним работать.
- Сумеют самостоятельно создать простое одностраничное приложение.
- Освоят основы архитектуры приложения: компоненты, модули и маршруты.
- Получат опыт настройки форм и базовой проверки данных.
- Будут готовы к дальнейшему изучению Angular и построению полноценных проектов.
Бесплатный вебинар проходит в рамках курса “Angular Developer“
Регистрация и подробнее о курсе Angular Developer - https://vk.cc/cNzyP1
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576
This media is not supported in your browser
VIEW IN TELEGRAM
Как работает комбинация clip + mask:
- маска применяется к контейнеру с использованием соответствующего изображения клавиши, чтобы изображение обрезалось при смещении (translate)
- clip применяется к контейнеру, чтобы зона взаимодействия (hit area) не перекрывала другие клавиши 🧑🍳
👉 @frontend_1
- маска применяется к контейнеру с использованием соответствующего изображения клавиши, чтобы изображение обрезалось при смещении (translate)
- clip применяется к контейнеру, чтобы зона взаимодействия (hit area) не перекрывала другие клавиши 🧑🍳
👉 @frontend_1
👍9