git show HEAD # Просмотр текущего коммита
HEAD хранится в
.git/HEAD и может ссылаться на другой указатель (например, ref: refs/heads/main) или хэш коммита.Ставь
Больше ответов на сайте
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
Создание контекста:
const StateContext = React.createContext();
Провайдер с состоянием:
function StateProvider({ children }) {
const [state, setState] = useState(initialState);
return (
<StateContext.Provider value={{ state, setState }}>
{children}
</StateContext.Provider>
);
}
Использование в компоненте:
const { state, setState } = useContext(StateContext);
Для сложного состояния можно использовать useReducer вместо useState. Такой подход заменяет Redux в небольших приложениях.
Ставь
Больше ответов на сайте
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
Простейший прим
ер — проверка через typeof:
function printId(id: number | string) {
if (typeof id === 'string') {
console.log(id.toUpperCase());
} else {
console.log(id.toFixed(2));
}
}
Пользовательские Type Guards используют предикат типа (is):
function isString(value: unknown): value is string {
return typeof value === 'string';
}
Также работают с
instanceof и проверкой свойств объекта. Type Guards улучшают безопасность типов и помогают избежать ошибок.Ставь
Больше ответов на сайте
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4
Копирование и объединение массивов:
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]
Клонирование и модификация объектов:
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 }; // { a: 1, b: 2, c: 3 }
Передача элементов массива как аргументов функции:
const nums = [1, 2, 3];
Math.max(...nums); // 3
Работает в любом итерируемом контексте, включая строки и коллекции.
Ставь
Больше ответов на сайте
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4
visibility.
.hidden-element {
visibility: hidden;
}
Элемент остается на странице, занимает место, но становится невидимым. В отличие от
display: none, не удаляется из потока документа. Альтернативный вариант — прозрачность:
.transparent-element {
opacity: 0;
}
Сохраняет кликабельность и взаимодействие, если не отключено pointer-events.
Ставь
Больше ответов на сайте
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4
Добавление файлов в индекс:
git add file.txt
Просмотр состояния индекса:
git status
Индекс позволяет точно контролировать, какие изменения попадут в коммит, включая частичное добавление изменений в файлах.
Ставь
Больше ответов на сайте
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
<iframe src="page.html" width="300" height="200"></iframe>
Основные отличия:
- iframe работает как встроенный элемент, а фреймы требовали специальной структуры
<frameset> - iframe поддерживает стилизацию через CSS
- iframe безопаснее и современнее устаревших фреймов
Ставь
Больше ответов на сайте
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
const users: Record<string, number> = {
'id1': 25,
'id2': 30
};
Используется для:
- Описания словарей с единым типом значений
- Создания map-подобных структур
- Гарантирует типобезопасность при динамических ключах
Альтернатива index signatures, но с более явным синтаксисом.
Ставь
Больше ответов на сайте
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4
setup(), где логика группируется по функциональности, а не по типам.
import { ref, computed } from 'vue';
export default {
setup() {
const count = ref(0);
const double = computed(() => count.value * 2);
function increment() {
count.value++;
}
return { count, double, increment };
}
}
Преимущества:
- Гибкая организация кода
- Повторное использование логики через composable-функции
- Лучшая типобезопасность с TypeScript
Ставь
Больше ответов на сайте
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4
vw (viewport width) и vh (viewport height) — относительные единицы, привязанные к размерам окна браузера. 1vw = 1% ширины, 1vh = 1% высоты viewport.
.element {
width: 50vw; /* 50% от ширины окна */
height: 100vh; /* 100% от высоты окна */
}
Применяются для:
- Адаптивных интерфейсов, масштабируемых относительно окна
- Создания полноэкранных секций
- Резиновых элементов без привязки к родительским блокам
Не учитывают скролл-бар, в отличие от
%.Ставь
Больше ответов на сайте
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4
git reflog для поиска последних действий и git checkout или git reset для возврата файлов.
git reflog # Поиск последнего коммита перед удалением
git checkout HEAD@{n} -- path/to/file # Восстановление файла из истории
Если файлы были проиндексированы, но не закоммичены:
git fsck --lost-found # Поиск dangling-объектов
Для восстановления после
git rm используйте git reset HEAD file перед git checkout -- file.Ставь
Больше ответов на сайте
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
React.lazy и Suspense.
const LazyComponent = React.lazy(() => import('./LazyComponent'));
function App() {
return (
<React.Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</React.Suspense>
);
}
Основные особенности:
- Уменьшает начальный размер бандла
- Загружает компоненты динамически при необходимости
- Требует обертки в
<Suspense> для отображения fallback-контента Работает только с default-экспортами в компонентах.
Ставь
Больше ответов на сайте
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4
Атрибут
Работает только с формами (<form>). Поддерживается всеми современными браузерами, но для кастомизации сообщений требуется JavaScript.
Ставь👍 , если было полезно!
Больше ответов на сайте👈
✈️ Frontend собеседования
required указывает, что поле формы обязательно для заполнения перед отправкой. Применяется к элементам <input>, <select> и <textarea>. Если поле пустое, браузер блокирует отправку формы и выводит сообщение об ошибке.
<input type="text" name="username" required>
Работает только с формами (<form>). Поддерживается всеми современными браузерами, но для кастомизации сообщений требуется JavaScript.
Ставь
Больше ответов на сайте
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2
Set – коллекция уникальных значений. Позволяет быстро проверять наличие элемента, добавлять и удалять значения.
Map – коллекция пар ключ-значение, где ключом может быть любой тип. Удобен для хранения данных с нестроковыми ключами.
Обе структуры поддерживают итерацию и имеют методы
Ставь👍 , если было полезно!
Больше ответов на сайте👈
✈️ Frontend собеседования
const set = new Set([1, 2, 3]);
set.add(4); // Добавить значение
set.has(2); // true – проверка наличия
set.delete(1); // Удалить значение
Map – коллекция пар ключ-значение, где ключом может быть любой тип. Удобен для хранения данных с нестроковыми ключами.
const map = new Map();
map.set('name', 'Alice'); // Добавить запись
map.get('name'); // 'Alice' – получить значение
map.delete('name'); // Удалить запись
Обе структуры поддерживают итерацию и имеют методы
size, clear().Ставь
Больше ответов на сайте
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4
Реактивные свойства автоматически обновляют представление при изменении. Vue делает их реактивными через
Обычные свойства (например, объявленные в `created()`) не отслеживаются Vue. Их изменения не вызывают перерисовку.
Реактивность работает только на инициализации. Добавление свойств после создания (this.newProp = value) требует
Ставь👍 , если было полезно!
Больше ответов на сайте👈
✈️ Frontend собеседования
data() или ref() / reactive() (Composition API).
data() {
return { count: 0 } // Реактивное свойство
}
Обычные свойства (например, объявленные в `created()`) не отслеживаются Vue. Их изменения не вызывают перерисовку.
created() {
this.nonReactive = 42 // Не реактивное
}
Реактивность работает только на инициализации. Добавление свойств после создания (this.newProp = value) требует
Vue.set() или reactive().Ставь
Больше ответов на сайте
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3