2763
Чат: @prog_way_chat Разборы вопросов и задач с собеседований, мысли, полезные материалы и просто вещи, что мне интересны из мира IT Полезности и навигация в закрепе По всем вопросам: @denisputnov
Немного о __proto__ и prototype в JavaScript__proto__ — это внутреннее свойство любого объекта или примитива в JavaScript, которое ссылается на объект, от которого он наследует свойства и методыprototype — это свойство функций-конструкторов (или классов), которое используется для определения объектов, которые будут выступать в роли прототипов для всех экземпляров, созданных этим конструктором
В чём разница?__proto__ есть у каждого объекта и ссылается на прототип, из которого этот объект черпает свои свойства и методыprototype есть только у функций-конструкторов (и классов) и используется для задания свойств и методов, которые будут доступны всем экземплярам, созданным с помощью этого конструктора
Если рассмотреть в коде, то получим следующее:
const name = "Denis"
const surname = "Putnov"
name.__proto__ === String.prototype // true
name.prototype // undefined
name.__proto__ === surname.__proto__ // true
const age = 23
age.__proto__ === Number.prototype // true
age.prototype // undefined
__proto__ можно назвать некоторым костылём языка, благодаря которому мы можем понять с помощью чего конкретно был создан наш новый объект__proto__ всегда ссылается на какой-то прототип, на основе которого был создан новый объект __proto__ можем увидеть, что name в итоге создан при помощи прототипа Stringconst channel = {
name: "progway"
}
channel.toString()
// как же javascript'у понять, откуда взять метод?
// под капотом вызывается это вот так:
(channel.__proto__).toString()
// а мы знаем, что channel.__proto__ === Object.ptototype
// поэтому выглядеть вызов будет примерно вот так
Object.prototype.toString.call(channel)Зато вопросы о механизме прототипного наследования часто встречаются на собеседованиях, так что это может быть полезно как минимум там
Как определить, активна ли вкладка у пользователя?
Если вам нужно узнать, активна ли вкладка в браузере у пользователя, существует несколько простых методов для этого
Во-первых, у объекта document есть свойство hidden, которое указывает открыта ли вкладка на экране пользователя в конкретный момент времени:
// если true, значит вкладка работает в фоне
document.hidden // true
// вкладка открыта на весь экран
document.hidden // false
visibilitychange:document.addEventListener("visibilitychange", function() {
if (document.hidden) {
console.log("Вкладка неактивна")
} else {
console.log("Вкладка активна")
}
})
Как менять состояние вкладки по интервалу
Полезная фича для демонстрации, например, уведомлений, которая может пригодиться на очень большом количестве сайтов
Для реализации нам необходимо создать состояния, между которыми мы хотим перемещаться:
const states = [
{ title: "Мессенджер", icon: Favicon1 },
{ title: "Новое сообщение", icon: Favicon2 },
]
const [stateIndex, setStateIndex] = useState(0);
// раз в секунду переходим на следующее состояние
useEffect(() => {
const intervalId = setInterval(() => {
setStateIndex((prevIndex) => (prevIndex + 1) % states.length);
}, 1000);
return () => clearInterval(intervalId);
}, []);
useEffect(() => {
const link = document.querySelector("link[rel~='icon']");
const title = document.querySelector("head title");
if (link) {
link.href = states[stateIndex].icon;
title.textContent = states[stateIndex].title;
}
}, [stateIndex]);
Что такое виртуализация?
Это крайне популярная техника оптимизации, которая позволяет эффективно управлять отображением большого количества элементов на странице. Особенно она полезна при отображении большого массива данных в списках, таблицах и прочих подобных элементах
Я очень рекомендую TanStack Virtual для этой задачи. Мне уже удалось применить его на нескольких проектах и никаких проблем он не вызывал
scroll на контейнере или через IntersectionObserver, подробности реализации для особо любопытных всегда доступны в сорсах библиотек (в TanStack Virtual можете начать с функции observeElementRect)
Что такое SWC и немного о Rust
SWC — это аббревиатура, которая всё чаще появляется в мире фронтенда. Расшифровывается это как Speedy Web Compiler и полностью оправдывает своё название, ведь SWC — это ультрабыстрый компилятор и пакетный обработчик, написанный на Rust. Он предназначен для преобразования современного JavaScript и TypeScript кода в код, который будет поддерживаться большинством браузеров. Возможно это во многом из-за полифилов, о которых я писал в этом посте
Если ещё проще, то SWC выполняет все функции Babel, только делает это в более чем 20 раз быстрее на одном ядре, и более чем в 70 раз быстрее на 4 ядрах.
Снова Rust всех победил 🤷♂️🤷♂️🤷♂️
Разница между CommonJS и ES Modules
Если по простому, то CommonJS и ES (ECMAScript) Modules — это два способа импорта и экспорта чего либо из файлов в JavaScript
CommonJS — относительно старый API, который был разработан для NodeJS. Выглядит он следующим образом:
// Экспорт
module.exports = function() {
console.log(...);
};
// Импорт
const module = require('./module');
module();
Особенностью CommonJS является синхронная загрузка модулей. Это означает, что когда один модуль требует другой модуль, выполнение кода приостанавливается до тех пор, пока требуемый модуль не будет загружен и выполнен
Для браузера, синхронная загрузка — крайне неудачный подход из-за блокировки интерфейса в момент загрузки. Поэтому в браузере использовать CommonJS — моветон, лучше использовать ES Modules
// Экспорт
export function foo() {
console.log(...)
}
// Импорт
import { foo } from './module.js';
foo();
ES Modules поддерживают асинхронную загрузку модулей и лучше умеют в статический анализ, что лучше как со стороны пользователя, так и разработчика.
Также ES Modules могут использоваться не только в браузере, а и в NodeJS, начиная аж с 12 версии. Как же давно это было🥲
Что такое CI/CD
Помимо того, что разработчики должны уметь писать сам код, было бы неплохо уметь автоматизировать его публикацию и все попутные процессы, что с этим связаны — тестирование, сборка…
Для этого есть CI/CD — набор практик, который позволяет автоматизировать практически всё, кроме написания самого кода.
🟢CI — Continuous Integration — это всё, что касается интеграции нового кода в репозиторий. В основном, это автоматизация сборки, тестирования и разные проверки в коде, типа eslint, prettier или biome.
Основное отличие от ручного способа заключается лишь в том, что все эти процессы выполняются не на компьютерах разработчиков, а где-то там далеко на серверах GitHub или типа того, всё зависит от архитектуры вашей системы контроля версий.
Если коротко:
CI — процессы, связанные с интеграцией кода в репозиторий
CD — процессы, связанные с доставкой готовой сборки на окружение
Как скачать файл с сайта
У тега ссылки <a> есть очень удобный атрибут download, который позволяет скачать любой файл с сайта. Выглядит его использование примерно так:
<a
download
href="https://.../files/example.zip"
>
Скачать файл
</a>
download можно передать собственное название для файла, например:<a
download="новое_название_файла.zip"
href="https://.../files/example.zip"
>
Скачать файл
</a>
caniuse и не поддерживается полноценно только в IEРебята, если у вас есть идеи о чём ещё вам было бы интересно прочитать, обязательно отпишитесь в чатик или мне в личку.
Всем добра)
Разделение чанков в Vite
Часто может быть так, что не малое приложение с большим количеством зависимостей весит несколько мегабайт. Такое приложение будет грузиться клиенту очень долго, особенно, если у него низкая скорость соединения. Далеко не в любых условиях у пользователей есть возможность загружать наши фронтенды на 100 МБитной линии, поэтому оптимизация загрузки — очень важно.
Пользовательский код можно загружать ленивой подгрузкой, но что сделать с библиотеками, которые собираются в один JS файл? Использовать разделение на чанки.
Чанк — собранные блоки кода, в виде которых пользователь загружает себе ваше приложение.
Идея в том, чтобы разделить приложение на несколько чанков. Это может быть полезно по нескольким причинам:
1. Открываются прелести асинхронной загрузки нескольких чанков
2. Есть возможность загружать не весь фронтенд сразу, а порционно, по мере необходимости
Выглядеть конфигурация может вот так:
build: {
rollupOptions: {
output: {
manualChunks: {
core: [
'react',
'react-dom',
'react-router-dom'
],
network: [
'axios',
'@tanstack/react-query'
],
utils: [
'classnames',
'dayjs',
'escape-html',
'tailwind-merge',
'zustand',
'@loadable/component'
],
table: [
'@tanstack/react-table',
'@tanstack/react-virtual'
],
chart: [
'reactflow',
'@dagrejs/dagre'
],
icons: ['@ant-design/icons'],
ui: [
'@chakra-ui/react',
'chakra-react-select',
'framer-motion',
'prismjs',
'react-simple-code-editor'
],
},
},
},
}core . Также есть ещё и частотная группировка — когда легковесные библиотеки собирают в один чанк, чтобы быстро загрузить их все, так как понадобятся они на всех страницах, например чанк utilscore и network, остальное нам не нужно. Остальные чанки мы можем загрузить по мере необходимости, используя асинхронные инструменты загрузки. Это могут быть @loadable, который рекомендует команда React или же вовсе обычный import. const About = lazy(() => import("./pages/about")); // для реакт компонентов
// более сложный пример импорта компонента с @loadable/components
const PageComponent = loadable((props) => import(`./pages/${props.page}`), {
fallback: <div>Page is Loading...</div>,
cacheKey: (props) => props.page
});
async function foo() {
const utils = await import("./utils.js") // для, например, утилсов
}manualChunks можно прочитать в доке rollup
Что такое Callback Hell и как с ним бороться?
Частый вопрос с собеса, особенно если идти куда-то повыше стажёра.
Callback Hell — это ситуация в асинхронном программировании, когда вложенные друг в друга функции обратного вызова (он же callback) образуют "лесенку", что делает код трудным для чтения и сопровождения.
doSomething(function(result) {
doSomethingElse(result, function(newResult) {
doAnotherThing(newResult, function(finalResult) {
doSomethingMore(finalResult, function(lastResult) {
console.log(lastResult);
});
});
});
});doSomething()
.then(result => doSomethingElse(result))
.then(newResult => doAnotherThing(newResult))
.then(finalResult => console.log(finalResult))
.catch(error => console.error(error));
async function process() {
try {
const result = await doSomething();
const newResult = await doSomethingElse(result);
const finalResult = await doAnotherThing(newResult);
console.log(finalResult);
} catch (error) {
console.error(error);
}
}
process();
Виды операторов в JavaScript
Операторы в языке (почти во всех языках, кстати), можно строго разделить на три категории:
1. Унарные операторы
Работают с одним операндом — то есть применяются только к одной переменной. Это, например, такие операторы, как i++ или --i, смены знака -i или отрицания !isTrue
let a = 5;
a++; // теперь a равно 6
let b = -a; // теперь b равно -6
Операнд — это элемент данных, над которым выполняется операция. В выражении i++ переменная i будет операндом, а ++ — оператором
const x = 10;
const y = 20;
const sum = x + y; // (+) - арифметический оператор
const isEqual = x == y; // (==) - сравнительный оператор
if-else. Он часто используется для кратких условийconst age = 31
const canKupitPivo = age >= 18 ? true : false
Краткий итог:
Операторы бывают трёх видов — унарные, бинарные и тернарные. Работают они с одним, двумя и тремя операндами соответственно
Остановка распространения событий: event.stopPropogation и event.stopImmediatePropagation()
Итак, эти методы используются для управления событиями в JavaScript. Сначала разберём каждый из них по отдельности:
🟢event.stopPropagation()
Этот метод предотвращает дальнейшее распространение события в фазе захвата или всплытия. Это значит, что событие сработает только на event.target, то есть на самом элементе, но не на всех его родителях, как это сделано по умолчанию. Рассмотрим код:
document.getElementById('child').addEventListener('click', event => {
event.stopPropagation();
console.log('Ребёнок');
});
document.getElementById('parent').addEventListener('click', () => {
console.log('Родитель');
});event.stopPropogation(), в консоли мы увидим только Ребёнок. Без использования этого метода, мы увидим вывод: Ребёнок, Родительconst element = document.getElementById('child')
element.addEventListener('click', event => {
event.stopImmediatePropagation();
console.log('Первый обработчик нажатия');
});
element.addEventListener('click', () => {
console.log('Второй обработчик нажатия');
});Первый обработчик нажатия. Второй обработчик не выполнится, потому что event.stopImmediatePropagation() остановил выполнение других обработчиков на этом элементеКоротко о главном:
- event.stopPropagation() используется для остановки распространения события на родительские элементы
- event.stopImmediatePropagation() используется для полной остановки события, включая другие обработчики на текущем элементе
Какими способами можно скрыть элемент со страницы?
Для многих каверзный вопрос. В этом посте коротко рассмотрим какие есть варианты
1. Использовать display: none
Как мне кажется, самый часто используемый вариант. В этом случае элемент полностью исчезает из потока документа, то есть полностью пропадает из вёрстки и больше никак не влияет на неё
2. Использовать visibility: hidden
Этот вариант, в отличии от display: none, не выводит элемент из потока документа. Элемент скрывается для глаз пользователя, но всё ещё продолжает обрабатываться и занимает место в вёрстке
3. Использовать opacity: 0
То же самое, что и прошлый вариант, только в этом случае скрытый элемент мало того, что продолжит занимать место в вёрстке, так ещё и продолжить обрабатывать разные события, например, клик. То есть у нас может быть условно невидимая кнопка, по которой всё ещё можно нажать
4. Позиционировать элемент далеко и надолго
.element {
position: absolute;
left: -999999px;
} <div hidden>, но это именно экзотика. Способы выше — основные, их точно хватит на практике.
Определяющие тайпгарды
Как я и писал в одном из прошлых постов, тайпгарды есть двух видов: уточняющие и определяющие. Уточняющие попроще, их я разобрал как раз в прошлом посте.
Определяющие тайпгарды — это функции, которые позволяют уточнить тип unknown переменной. Сразу рассмотрим пример и рассмотрим следующий интерфейс:
interface User {
name: string;
age: number;
roles: string[];
}const foo: any = ...
if (isUser(foo)) {
// обработать как пользователя
} else {
// обработать как что-то иное
}
unknown, это их ключевая особенность. Каждое свойство мы проверяем отдельно и таким образом, чтобы однозначно убедиться в его типе. Для интерфейса из примера, хороший тайпгард будет выглядеть так:function isUser(value: unknown): value is User {
const user = value as User;
return user !== null
&& typeof user === 'object'
&& typeof user.name === 'string'
&& typeof user.age === 'number'
&& Array.isArray(user.roles)
&& user.roles?.every(role => typeof role === 'string');
}any типов и раскрыть возможности TypeScript в полной мере.
Data-атрибуты
На самом деле, вёрстка может хранить крайне много информации. Помимо предопределённых атрибутов для каждого из тегов, у разработчиков есть возможность передавать свои кастомные атрибуты к любому тегу. Такие атрибуты называются data-атрибутами и выглядят, например, так:
<button data-order="1">Кнопка</button>
button[data-order] {
order: attr(data-order)
}const element = document.querySelector(button[data-order])
const order = element.dataset.order
<button data-testid="1">Кнопка</button>
"Тяжёлые" анимации
На самом деле, на производительность сайта может влиять очень много что — и CSS в том числе. Есть множество свойств, которые даются браузеру для обработки сложнее прочих: о таких свойствах как раз в этом посте
И для того, чтобы разобраться в нюансах, стоит помнить, что отрисовка контента страницы происходит в несколько этапов, таких как получение ресурсов, парсинг HTML и CSS, создание Render Tree и так далее. Более подробно можно прочитать в отличной статье на доке
Мы же сконцентрируемся на Layout и Paint фазах, их я кратко напомню:
- Layout — фаза отрисовки, в которой браузер рекурсивно проходится по заранее полученному Render Tree и рассчитывает позиции и размеры элементов относительно друг друга для их корректного расположения внутри вьюпорта
- Paint — по полученным позициям и размерам браузер рисует конкретные пиксели конкретных цветов
top и left, например, то фазы Layout и Paint будут крутиться каждый раз, когда вы двигаете курсором, и из-за долгих рассчётов вся анимация будет дёрганнойCompositing — это способ вынести все вычисления для рендера в отдельное ядро
Страница разбивается на слои и каждый слой считается асинхронно и независимо, из-за чего изменение элемента в одном слое не затрагивает элементы из других слоёв, и перерисовывать их становится не нужно
transformtop и left на transform, и вот почему:top и left триггерят Layout и Paint для всего потока, а может и всей страницы. transform выносит элемент в отдельный поток, что уменьшает объём вычислений и делает страницу более отзывчивойТаким образом, к тяжёлым свойствам можно отнести все, что триггерят Reflow (повторный вызов Layout фазы) и Repaint:
Reflow триггерят анимации: width, height, top, left, font-size, border-width, margin, padding и так далее — все свойства, что могут влиять на расстановку элементов на странице
Repaint триггерят анимации: color, background-color, outline, visibility — все свойства, что влияют на отображение, но не на позицию элемента
transform и opacity. Это не значит, что нельзя использовать других свойств, но эти — самые оптимизированные для браузера
Примерно вот так это может в итоге выглядеть
Читать полностью…
Как браузер понимает, что нужно закешировать?
Частый вопрос с собесов, который, к тому же, часто может пригодиться и на практике
Кеширование — это способ оптимизации загрузки через хранение копий файлов на вашем устройстве, чтобы ускорить доступ к ним в будущем. Это могут быть HTML, CSS, JS файлы, изображения, шрифты и всё остальное
Cache-Control и Expires:Cache-Control заголовок может иметь несколько значений:no-cache — браузер проверяет актуальность ресурса на сервере при каждом запросеЭто значение не означает, что браузер вообще не должен кешировать ресурс, как это может показаться на первый взгляд.
На самом деле, ресурс все равно может быть сохранен в кеше, но с этим заголовком браузер обязан каждый раз перед его использованием обращаться к серверу, чтобы проверить, не изменилась ли версия ресурса.
Чаще всего это значение используют с ресурсами, что изменяются часто
no-store — полностью запрещает хранить ресурс в кеше. Особенно полезно для чувствительных данных, типа истории переводов в банкеpublic, max-age=31536000 — пример агрессивного кеширования, где ресурс можно хранить в кеше до одного года (максимальное время max-age указывается в секундах). Например, это может быть применено к логотипу компании, который редко меняетсяExpires. Он указывает точную дату и время, до которого ресурс считается актуальным и может быть использован из кеша без проверки на сервере:Expires: Wed, 21 Oct 2024 07:28:00 GMT
Этот заголовок говорит браузеру, что ресурс может использоваться
из кеша до 21 октября 2024 года 07:28:00 по времени GMT
Expires используется реже из-за того, что он работает именно с абсолютными датами. Если ваши серверные часы или время на устройстве пользователя настроены неправильно, это может привести к некорректному кешированиюCache-Control и его параметр max-age, так как в этом случае дата окончания кеширования рассчитывается относительно настроек времени на устройстве пользователяКратко:
Чаще всего браузер понимает что кешировать через специальный заголовок Cache-Control
Про платные курсы и менторинг
Довольно часто звучит вопрос, в том числе и от моей аудитории в личке, который выглядит примерно так:
Какие курсы посоветуешь купить?
ИМХО, важно держать в голове мысль, что конечная цель производителей курсов — продать курс. Это, всё таки, рынок, а деньги не пахнут. Грустно, но ничего с этим не сделаешь
Даже этот канал — на мой вкус, сборник реально крутой информации. Я в него душу вкладываю, а в замен прошу лишь эмоцию кита 🐳 под пост. В канале практически нет рекламы, он совершенно не окупается для меня, хотя требует вложения как денег, так и времени. И мой канал — далеко не единственный такой пример
Сейчас менторингом я не занимаюсь, но, думаю, что в перспективе я бы вернулся к нему, мне это интересно. Такой менторинг будет платный. Если я скажу, что собираюсь заниматься им бесплатно, то мне не хватит времени работать
Если вам это как-то интересно, поставьте эмоцию кита 🐳 на пост или напишите в личку, мне интересен спрос и ваше виденье ситуации
Как убрать стили на под-дереве — мини-задача с реального проекта
Недавно был следующий кейс: в долгоживущий проект интегрировали tailwind со своими обнуляющими стилями. Эти стили очень нужны проекту, но на одной из страничек есть Rich-текст, приходящий с апишки, который, к сожалению, частично завязан на браузерные стили, и, после добавления обнуляющих стилей tailwind, весь поплыл
Обнуляющие стили — это когда все заголовки, списки и прочие HTML теги сбрасывают свои стандартные браузерные стили, чтобы тег нёс за собой только семантику
all. Выглядеть это может так:.tailwind-reset-styles * {
all: revert;
}all может сбросить все CSS свойства до их начального или унаследованного значения, что конкретно в моём случае полностью решало все проблемы.tailwind-reset-styles вешаем на родительский тег, все под-дерево которого уже будет со сброшенными ненаследуемыми стилями. Это, наверное, самое элегантное и быстрое решение, что можно придумать в этой ситуации
Как отменить уже отправленный HTTP запрос?
Для отмены уже отправленного запроса нам пригодится встроенный в JavsScript объект — AbortController
Этот объект позволяет отменять уже запущенные асинхронные операции, fetch в том числе
const controller = new AbortController()
// отправляем запрос
fetch('https://.../', { signal: controller.signal })
// отменяем его
controller.abort()
useEffect идёт запрос к API, но пользователь, не дожидаясь ответа от сервера, переходит на другую страницу. Запрос есть, трафик занят, есть риск нарушения жизненного цикла компонента, а результаты этого запроса уже и вовсе не нужны. Вот так это решается:useEffect(() => {
const controller = new AbortController()
// делаем запрос на маунт компонента
fetch('https://.../', { signal: controller.signal })
// отменяем запрос на анмаунт компонента
return () => controller.abort()
}, [])AbortController'a помогает избежать потенциальных утечек памяти и гарантирует, что запросы не будут выполняться после того, как компонент был размонтирован. Полезно это при любых запросах, так что можно смело сделать свой хук обёртку. Или просто использовать @tanstack/react-query 🌚
CSS для печати страниц
Несколько лет назад я делал пет-проект — конструктор резюме. Кейс был такой, что хотелось сразу же печатать созданное резюме при нажатии сочетания клавиш Ctrl+P в браузере. Но проблема в том, что помимо самого резюме на печать попадало не только само резюме, а все кнопки, поля и прочие элементы страницы для его настройки. Такие кейсы можно решать при помощи CSS медиазапроса @media print:
@media print {
/* стили для печати */
}
@media print {
.navbar, .footer, .controls {
display: none;
}
}
@media print {
.no-print {
display: none;
}
}
.no-print проставлять на все скрываемые при печати элементы.break-inside, которое дополнительно настраивает можно ли переместить блок со страницы на страницу при печати, что особенно актуально для целостных блоков типа “контакты” в резюме. Если указать break-inside: avoid, то такой элемент не сможет быть расположен на двух страницах сразу, а перенесётся весь, если для него не хватает места.
noopener и noreferrer в браузере
При открытии ссылки в новой вкладке через атрибут target="_blank", браузер делает несколько не самых желанных для нас действий, от которых и спасают атрибуты noopener и noreferrer:
🟢Атрибут noopener предотвращает доступ новой вкладки к объекту window.opener. Почему это важно? Без этого атрибута, сайт, открытый в новой вкладке, может получить доступ к оригинальной вкладке и потенциально выполнить вредоносный код, что представляет угрозу безопасности.window.opener содержит слепок объекта window для страницы, с которой был открыт сайт. Информация в таком объекте всё же сильно ограничена — новая вкладка не может получить доступ, например, к переменным с прошлой страницы, зато может осуществлять навигацию по старой вкладке, что открывает огромные возможности для фишинга.
Представим, что вы находитесь на каком-нибудь some-bank.com и переходите на другой сайт с вредоносным кодом без noopener. Тогда новая вкладка может получить доступ к pathname откуда вы перешли и к API навигации по старой вкладке, и, уже абсолютно невидимо для вас, средиректить старую вкладку с some-bank.com на some-bauk.com (подмена символа в слове bank). Вернувшись на старую вкладку, вы увидите тот же сайт, но проблема в том, что он уже подменён на фишинг-страницу. Входите через эту страницу в личный кабинет банка и все данные улетают злоумышленникам.
Такая атака, кстати, называется tabnabbing
noreferrer выполняет сразу две функции:window.opener, как и noopenerReferer при переходе по ссылке, что скрывает источник переходаReferer: https://some-bank.com/login
noreferrer как бы включает в себя noopener, а значит вроде бы можно использовать только его, но на практике так никто не делает. Связано это попросту с тем, что каждый браузер Referrer-Policy раньше реализовал по своему, да и так просто спокойнее что лиЕсли кратко:
- noopener — блокирует доступ на новой вкладке к информации и навигации на старой
- noreferrer — noopener + удаляет заголовок Referrer
Как открыть ссылку в новом окне или вкладке
Чтобы ссылка открывалась в новом окне или вкладке, достаточно добавить к тегу <a> атрибут target="_blank":
<a
href="https://t.me/prog_way_blog"
target="_blank"
rel="noopener noreferrer"
>
Ну чё-то какой-то канал в телеге
</a>
target="_blank" сообщает браузеру, что ссылку нужно открыть в новой вкладке. И также стоит обратить внимание на атрибут rel. Он предотвращает передачу информации о странице, с которой была открыта ссылка, а также защищает от потенциальных уязвимостейnoopener noreferrer и зачем оно надо
Как определить с какого устройства открыт сайт
Самым простым способом является анализ строки User-Agent’a — это специальный заголовок, который передаётся браузером устройства вместе с любым запросом.
Сразу рассмотрим на примере:
Запрос с айфона из Safari:
Mozilla/5.0 (iPhone; CPU iPhone OS 14_6 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0 Mobile/15E148 Safari/604.1
Запрос с комьютера из Google Chrome:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36
const isMobile = () => /Mobi|Android/i.test(navigator.userAgent)
if (isMobile()) {
console.log("Мобильное устройство");
} else {
console.log("Десктопное устройство");
}
Пригодиться это может в нескольких кейсах:
— для изменения вёрстки под особенности устройства
— для сбора аналитики
— подключение и использование специфичных API (геолокация, сенсорные жесты, вибрация и пр.)
— ну и точно что-то ещё, о чём я мог забыть
JavaScript не в браузере: NodeJS, Deno и Bun
Начать стоит с того, что JavaScript может выполняться далеко не только в браузере. Для этого есть такая штука, как рантайм — это среда выполнения, которая обеспечивает все необходимое для выполнения JavaScript кода: движок языка, API среды и т.д.
Рантаймов несчётном множество, как и всего в мире JS, но в этом поговорим о самых интересных: NodeJS, Deno и Bun
👩💻 NodeJS — это рантайм JavaScript, построенный на движке V8 от Google Chrome. Он позволяет выполнять JavaScript-код на сервере. По сути, это почти то же самое, что и выполнять код в браузере, за тем лишь исключением, что NodeJS предоставляет API по работе с файлами, операционной системой, среду исполнения тестов и кучу всего ещё
— NodeJS сейчас — это основной рантайм для всех серверных решений на JavaScript и TypeScript
— npm (Node Package Manager) — это тоже про ноду
👩💻 Deno — более новый, чем NodeJS, рантайм, от создателя NodeJS. Deno разработан для того, чтобы устранить некоторые недостатки и ограничения ноды, улучшить безопасность и лучшей поддержкой TypeScript. В целом, всё так и есть, только лично мне субъективно кажется, что Deno почти никто не использует(
👩💻 Bun — самый новый из этой тройки инструмент, который разработан для того, чтобы быть самым быстрым и легким в использовании, предлагая ряд улучшений по сравнению с другими инструментами. Bun быстрее запускает код, сильно лучше работает с асинхронными запросами, быстрее устанавливает зависимости... Но ему слишком мало лет, чтобы активно тащить его в прод — пока рановато
Краткий итог:
— NodeJS - это зрелая платформа с обширной экосистемой и большим сообществом
— Deno - альтернатива NodeJS с улучшенной безопасностью, поддержкой TypeScript и другими плюшками
— Bun - новая и перспективная платформа с упором на скорость и интеграцию различных инструментов
Что такое декларативность и императивность?
Императивный подход написания кода фокусируется на том, КАК именно должна быть выполнена задача. В императивном стиле вы указываете шаг за шагом, что должно происходить, ничего не скрывая, например:
// Императивный способ создания списка из элементов массива
const items = [1, 2, 3, 4, 5];
const ul = document.createElement('ul');
for (let i = 0; i < items.length; i++) {
const li = document.createElement('li');
li.textContent = items[i];
ul.appendChild(li);
}
document.body.appendChild(ul);
import React from 'react';
import ReactDOM from 'react-dom';
const items = [1, 2, 3, 4, 5];
const App = () => (
<ul>
{items.map(item => (
<li key={item}>{item}</li>
))}
</ul>
);
ReactDOM.render(<App />, document.getElementById('root'));
Что такое Git Flow?
Git Flow — это модель ветвления для Git, основная идея которой заключается в использовании отдельной ветки для каждого этапа разработки. Обычно выделяются следующие ветки:
1. Основная ветка — чаще всего это master
Эта ветка содержит стабильную версию продукта, которая готова к выпуску. В ней всегда должен быть работающий и протестированный код. Каждый коммит в master обычно соответствует одной версии продукта
2. Ветка разработки — чаще всего это develop
В этой ветке происходит активная разработка. Все новые фичи и изменения сначала попадают сюда. После тестирования и проверки они будут слиты в master
Также есть вспомогательные ветки, которые маркируются своим префиксом — чаше всего это feature/*, release/*, bugfix/*, hotfix/*:
1. Ветки для разработки новых функций — feature/*
Они создаются от develop и после завершения работы сливаются обратно в develop. Нужны такие ветки для организации разработки отдельной фичи.
2. Ветка для фикса багов — bugfix/* и hotfix/*
Почти то же самое, что и feature/*, только эти ветки нужны для фикса багов. hotfix/* — для фикса багов в мастере или релизе. bugfix/* — для фикса багов в ветке develop
3. Ветка для подготовки версии продукта — release/*
Создаются от develop, когда разработка новых функций завершена и нужно подготовить релиз. После завершения сливаются в master и develop
Чаще всего процесс разработки выглядит таким образом: берём задачку → делаем отдельную ветку → вносим изменения → сливаемся через код ревью в нужную ветку
В зависимости от компании, проекта и команды, нейминги веток могут отличаться, но суть всегда будет оставаться примерно похожей при использовании такого подхода
Спасибо за прочтение, это важно для меня ❤️
@prog_way_blog — чат — #theory #useful
Различные способы загрузки скриптов
Уже не просто классический, а, скорее, стереотипный вопрос с фронтенд собеседования — это разные способы подключения скриптов к странице.
Начать стоит с того, что каждый скрипт на странице подключается при помощи тега script:
<script src="index.js"></script>
script является блокирующей операцией при загрузке вёрстки. Это значит, что браузер, доходя до тега script, полностью прекращает дальнейший парсинг и отрисовку HTML до того момента, пока скрипт не будет загружен и выполнен.<script async src="index.js"></script>
<script defer src="index.js"></script>
async скриптов, то выполнятся они будут в порядке загрузки. То есть каждый скрипт будет выполнен ровно тогда, когда скачается, вне зависимости от того порядка, в котором скрипты подключаются в файле. Также async скрипты не подходят для загрузки скриптов, активно взаимодействующих с HTML разметкой, поскольку такой скрипт может быть загружен и выполнен ещё до того, как успеет построиться DOM дерево.defer также загружаются асинхронно, но, в отличии от async, сохраняют порядок выполнения. Более того, все defer скрипты дожидаются построения DOM дерева, даже если были загружены ранее, из-за чего взаимодействие с разметкой из таких скриптов немного удобнее и безопаснее.
Что такое MVP
Я тут заметил, что позволяю себе использовать этот термин достаточно часто, но поста о том что это на самом деле такое у меня не было. Нужно исправлять.
MVP — Minimum Viable Product — минимально жизнеспособный продукт — это минимальный набор возможностей продукта, позволяющей ему выполнять свою изначальную задачу — так или иначе функционировать или же приносить хоть какие-то деньги.
MVP помогает команде разработчиков быстро и дешево проверить гипотезы о продукте, собрать обратную связь от пользователей и определить, какие функции и изменения нужно внести для улучшения продукта.
MVP калькулятора — сложение, вычитание, умножение и деление двух целых чисел. Возведение в степень, факториал, логарифмирование, построение графиков — дополнительный функционал, который, скорее всего, в MVP не входит.
MVP Telegram — список чатов. Стикеры, каналы, папки, архив чатов, менеджмент уведомлений, возможность установки своей темы — всё это дополнительный функционал, который в MVP не входит.
Важно чувствовать границу между «необходимым» и «возможным». Это важно.
Спасибо за прочтение, это важно для меня ❤️
#theory
