Telegram Web Link
HTML input types сильно различаются в зависимости от значения атрибута type, который вы используете 👨‍💻.

Ознакомьтесь с этой шпаргалкой на будущее 🚀

👉 @frontend_1
👍6
🚀 Хотите стать Vue-разработчиком?

Пройдите вступительное тестирование и получите шанс обучаться на курсе Vue.js разработчик от OTUS! 🎓

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

Как это работает?
1. Пройдите тестирование и оцените свой уровень.
2. Получите спеццену при поступлении в группу курса и начните обучение. Подробности уточняйте у менеджера.
3. Получайте знания, расширяйте свой стек технологий, реализуйте выпускной проект.

🔗 Пройти тестирование: https://vk.cc/cNl6Ia

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576
🚀 Git для фронтендера: Осваиваем продвинутые команды!

Все мы знаем основы 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
👍62
🥾 Первый шаг в Angular - создаем приложение с нуля

Вводное знакомство с Angular - современным фреймворком для разработки веб-приложений. Мы расскажем о его основных концепциях, структуре и возможностях.

👉 Какие ключевые темы и вопросы будут рассмотрены на вебинаре?
- Что такое Angular и зачем он нужен
- Основные компоненты Angular:Модули, компоненты, директивы, пайпы, сервисы
- Работа с данными: привязка данных (data binding)
- Основы маршрутизации (routing)
- Простая форма и валидация
- Как запустить и протестировать приложение
- Какие результаты и навыки получат участники после вебинара?
Бесплатный вебинар проходит в рамках курса “Angular Developer“

Регистрация и подробнее о курсе Angular Developer - https://vk.cc/cNmlMM

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576
📌Подборка полезных функций, которые пригодятся продвинутым frontend-разработчикам при работе с UI, производительностью и архитектурой


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
👍101
Как выжить в мире сложных интерфейсов в 2025-м: 7 работающих рецептов от React и CSS до дизайн-систем

Как говорил дядя Бен, большие продукты — это и большая ответственность. И без сложных интерфейсов тут никуда. А с ними и исследования становятся труднее, и встречается больше препятствий на этапе кода — от нюансов реактивного программирования до риска утонуть в разнообразии CSS-спецификаций.

Для МойОфис как мультипродуктовой экосистемы со сквозными сценариями — все эти вопросы очень актуальны! Поэтому на прошлой неделе JS-еры, дизайнеры и UX-исследователи нашей и других компаний собрались на митапе под названием Frontend&UX Talks, чтобы обсудить вопросы современного веба. Получилось интересно, драйвово и даже сказочно! (И я в прямом смысле этого слова :-))

В статье расскажем в 7 тезисах, к каким выводам пришли и как именно: поехали!

https://habr.com/ru/companies/ncloudtech/articles/924704/

👉 @frontend_1
👍51
🚀 Упростите разработку с Vue: создаём игру за 1 вебинар

🔥Присоединяйтесь к открытому вебинару 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
👍3
Forwarded from React
🔥9 полезных функций и хуков, которые пригодятся продвинутому React-разработчику для управления состоянием, оптимизацией и архитектурой компонентов


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
This media is not supported in your browser
VIEW IN TELEGRAM
Как работает комбинация clip + mask:

- маска применяется к контейнеру с использованием соответствующего изображения клавиши, чтобы изображение обрезалось при смещении (translate)

- clip применяется к контейнеру, чтобы зона взаимодействия (hit area) не перекрывала другие клавиши 🧑‍🍳

👉 @frontend_1
👍9
2025/07/12 01:23:27
Back to Top
HTML Embed Code: