Что такое Promise?
Также отдельно стоит отметить, что промис является микрозадачей.
У
О какой цепочке речь? У
Типичный вид промиса следующий:
Обратите внимание на то, что эти методы вызываются цепочкой. Но никто и не запрещает сохранять промежуточный результат в переменную, если это необходимо:
Также обратите внимание на то, что
Они нужны для того, чтобы перевести
На самом деле, рассказать в рамках поста эту тему подробно просто невозможно. Я бы не сказал, что эта тема сложная, она просто достаточно объёмная. Вдумчивое изучение позволит вам понять что такое
Очень советую статью о промисах на Доке для самостоятельного изучения.
Спасибо за прочтение, это важно для меня
#javascript #web #theory
Promise — это способ обработки асинхронного кода в JavaScript. Это нативный объект языка, у которого есть своё состояние и несколько методов для удобства работы с ним. Всё это нужно для того, чтобы удобно отслеживать статус выполнения асинхронной операции и, в конечном итоге, получить её результат.Также отдельно стоит отметить, что промис является микрозадачей.
У
Promise есть несколько состояний:— pending — ожидание — такое состояние будет у промиса в момент его создания и до того момента, как асинхронная операции не будет выполнена. После выполнения асинхронной операции, Promise переходит следующие два состояния — fulfilled или rejected— fulfilled — успех — операция выполнена успешно— rejected — ошибка — если вдруг в цепочке промисов возникла ошибкаО какой цепочке речь? У
Promise есть три метода, которые позволяют создавать из обычного промиса целую цепочку и обрабатывать данные последовательно.— then — метод, который принимает результат предыдущего промиса и возвращает новый результат— catch — метод, который позволяет обработать ошибку операции — finally — то, что будет выполнено всегда после цепочки промисов, вне зависимости от того завершился он с успехом или нетТипичный вид промиса следующий:
new Promise((resolve, reject) => ...)
.then(...)
.then(...)
.catch(...)
.finally(...)
Обратите внимание на то, что эти методы вызываются цепочкой. Но никто и не запрещает сохранять промежуточный результат в переменную, если это необходимо:
const promise1 = new Promise((resolve, reject) => ...).then(...)
const promise2 = promise1.then(...)
promise2.catch(...).finally(...)
Также обратите внимание на то, что
callback промиса принимает два аргумента — функции resolve и reject.Они нужны для того, чтобы перевести
Promise из состояния pending в два других, причем reject приведёт промис к состоянию rejected и вызовет методы catch, если они есть в цепочке, а resolve либо переведёт нас к следующему в цепочки then с текущим статусом, либо переведёт Promise в состояние fulfilled.На самом деле, рассказать в рамках поста эту тему подробно просто невозможно. Я бы не сказал, что эта тема сложная, она просто достаточно объёмная. Вдумчивое изучение позволит вам понять что такое
Promise за пару часов.Очень советую статью о промисах на Доке для самостоятельного изучения.
Спасибо за прочтение, это важно для меня
#javascript #web #theory
❤26👍16🔥13🐳3💯2✍1🍌1
Что такое CORS
CORS — Cross-Origin Resource Sharing — стандартный механизм регулирования доступов веб-страниц к ресурсам других доменов. Это политика доступа.
Браузер блокирует доступ к доменам, чтобы исключить некоторые уязвимости (например, чтобы ваши cookies не улетели к третьим лицам).
По умолчанию, с домена, скажем,
Также можно сказать, что CORS — это некоторая система заголовков запроса. Подробно об этой политике можно прочитать в отличной статье MDN, а если вам интересно конкретно моё изложение, то его можно найти на сайте доки в одной из статей, что я писал 🙂
#web #theory
CORS — Cross-Origin Resource Sharing — стандартный механизм регулирования доступов веб-страниц к ресурсам других доменов. Это политика доступа.
Браузер блокирует доступ к доменам, чтобы исключить некоторые уязвимости (например, чтобы ваши cookies не улетели к третьим лицам).
По умолчанию, с домена, скажем,
first.com, мы не можем отправить запрос к домену second.com. Именно поэтому многие разработчики часто ловят ошибку типа XMLHttpRequest cannot load..., когда вы делаете запрос к стороннему API с приложения, развернутого на localhost.Также можно сказать, что CORS — это некоторая система заголовков запроса. Подробно об этой политике можно прочитать в отличной статье MDN, а если вам интересно конкретно моё изложение, то его можно найти на сайте доки в одной из статей, что я писал 🙂
#web #theory
👍31❤10🔥7🐳4💯1
Всплытие и погружение событий — Событийная модель
Всплытие и погружение событий являются механизмами обработки событий в DOM API.
Суть всплытия заключается в том, что когда на элементе происходит событие, обработчики сначала срабатывают на нём, потом на его родителе, затем выше и так далее, вверх по цепочке предков. Самым высоким предком в цепочке, корнем DOM дерева является тег
Погружение событий, наоборот, означает, что событие сначала обрабатывается на самом верхнем элементе в документе, затем на его дочерних элементах и так далее, до самого вложенного элемента, который в событийной модели называется
Событийная модель включает в себя следующие этапы:
1. Погружение — Capture — событие перехватывается на верхнем элементе и передается по цепочке родительских элементов вниз к самому вложенному элементу.
2. Цель — Target — событие достигает целевого элемента, на котором оно произошло.
3. Всплытие — Bubbling — событие всплывает от целевого элемента обратно по цепочке родительских элементов до самого верхнего элемента.
Механизм всплытия и погружения событий позволяет обрабатывать события на разных уровнях и в разной последовательности.
Благодаря этому механизму мы можем создавать более гибкие, масштабируемые приложения и писать более читаемый код. Достигается это при помощи механизма делегирования, о котором я расскажу в одном из следующих постов.
Об этих процессах прилагаю два отличных материала на русском языке:
1. Событийная модель — doka.guide
2. Всплытие и погружение — learn.javascript.ru
Оба материала более чем достойны вашего внимания. Пересказывать и без того отличные тексты в рамках телеграмм поста я просто не вижу смысла.
#web #javascript #theory
Всплытие и погружение событий являются механизмами обработки событий в DOM API.
Суть всплытия заключается в том, что когда на элементе происходит событие, обработчики сначала срабатывают на нём, потом на его родителе, затем выше и так далее, вверх по цепочке предков. Самым высоким предком в цепочке, корнем DOM дерева является тег
<html>.Погружение событий, наоборот, означает, что событие сначала обрабатывается на самом верхнем элементе в документе, затем на его дочерних элементах и так далее, до самого вложенного элемента, который в событийной модели называется
event.target. Событийная модель включает в себя следующие этапы:
1. Погружение — Capture — событие перехватывается на верхнем элементе и передается по цепочке родительских элементов вниз к самому вложенному элементу.
2. Цель — Target — событие достигает целевого элемента, на котором оно произошло.
3. Всплытие — Bubbling — событие всплывает от целевого элемента обратно по цепочке родительских элементов до самого верхнего элемента.
Механизм всплытия и погружения событий позволяет обрабатывать события на разных уровнях и в разной последовательности.
Благодаря этому механизму мы можем создавать более гибкие, масштабируемые приложения и писать более читаемый код. Достигается это при помощи механизма делегирования, о котором я расскажу в одном из следующих постов.
Об этих процессах прилагаю два отличных материала на русском языке:
1. Событийная модель — doka.guide
2. Всплытие и погружение — learn.javascript.ru
Оба материала более чем достойны вашего внимания. Пересказывать и без того отличные тексты в рамках телеграмм поста я просто не вижу смысла.
#web #javascript #theory
👍18❤10🔥7🐳3💯2✍1🤓1🤝1
Книги — это не всегда круто
Напоминаю, что в этом канале могут быть не только задротские разборы теории, а в том числе какие-то мысли из моей головы. Тут из разряда “накипело”
Книга, как и любой инструмент обучения, является лишь одной из форм представления информации. В моём понимании, прочтения достойны лишь те книги по программированию, которые дают:
1. Углубленное понимание
2. Понимание тенденций, истории развития, практик с опорой на исторические факты
3. Фундаментальные неустаревающие знания
В большинстве случаев, книга — скорее враг в обучении, чем друг, из-за своей неактуальности и возможной скорости усвоения информации, которая ниже, по сравнению с конкурентами в виде других текстовых источников, видео и полноценными курсами.
В особенности, неправильно выбранная книга — враг для любого джуна, потому что, изучая
Стоит понимать, что прежде, чем попасть к вам в руки, книга проходит несколько этапов: написание, редактура, согласования на разных уровнях, регистрация, печать и распространение. А если вы читаете переведённую англоязычную литературу, то сюда же добавляется почти та же цепочка с дополнительным действием, имя которому — “перевод”.
Книга в обучении должна появляться только тогда, когда беглый просмотр статей в интернете не приносит новых знаний. Когда, достигая определенного уровня экспертизы, у вас появляется настоящая потребность изучить фундаментальные вещи на более глубоком уровне. И на мой взгляд такого это может быть лишь от части, но уже необходимо, только в тех случаях, когда вы хотите иметь грейд уровня
Во всех остальных случаях, книги, на мой субъективный взгляд, противопоказаны. Гораздо выгоднее потратить время на получение информации из других источников. Вероятно, она будет более поверхностна, но зачастую этого уровня будет достаточно. А если речь идёт о динамично изменяющемся инструменте — это сюр и бесполезная трата денег. Чаще всего вашей лучшей книгой будет официальная документация инструмента на его же сайте.
Относитесь к своему обучению с умом. Если вам кажется, что книга — единственно верный и правильный источник информации, то дело, на самом деле, ваше. В моем понимании такое обучение не является неверным. Оно, скорее, не самое эффективное, что подтверждает опыт моего обучения, моих друзей и коллег, и мой опыт менторинга. Все, что я могу — этим опытом лишь поделиться. Выбор всё равно за вами.
Лично мне, как разработчику, было невероятно интересно читать лишь те книги, что к IT относятся лишь от части, например:
Scrum. Революционный метод управления проектами
Rework — о корпоративном развитии от создателей Ruby on Rails
Мифический человеко-месяц — о ведении проектов
Может я просто больше менеджер, чем разработчик? 🤔
#blog
Напоминаю, что в этом канале могут быть не только задротские разборы теории, а в том числе какие-то мысли из моей головы. Тут из разряда “накипело”
Книга, как и любой инструмент обучения, является лишь одной из форм представления информации. В моём понимании, прочтения достойны лишь те книги по программированию, которые дают:
1. Углубленное понимание
2. Понимание тенденций, истории развития, практик с опорой на исторические факты
3. Фундаментальные неустаревающие знания
В большинстве случаев, книга — скорее враг в обучении, чем друг, из-за своей неактуальности и возможной скорости усвоения информации, которая ниже, по сравнению с конкурентами в виде других текстовых источников, видео и полноценными курсами.
В особенности, неправильно выбранная книга — враг для любого джуна, потому что, изучая
React по книжке, работу получится найти примерно никогда просто потому что рядовая книга не позволит вам ответить на большинство актуальных вопросов с собеседования. Стоит понимать, что прежде, чем попасть к вам в руки, книга проходит несколько этапов: написание, редактура, согласования на разных уровнях, регистрация, печать и распространение. А если вы читаете переведённую англоязычную литературу, то сюда же добавляется почти та же цепочка с дополнительным действием, имя которому — “перевод”.
Книга в обучении должна появляться только тогда, когда беглый просмотр статей в интернете не приносит новых знаний. Когда, достигая определенного уровня экспертизы, у вас появляется настоящая потребность изучить фундаментальные вещи на более глубоком уровне. И на мой взгляд такого это может быть лишь от части, но уже необходимо, только в тех случаях, когда вы хотите иметь грейд уровня
Senior даже в рамках текущего рынка. Более того, львиная доля Senior разработчиков не имеют привычки регулярного чтения в целом, а даже если и читают, то только художественную литературу, а не техническую.Во всех остальных случаях, книги, на мой субъективный взгляд, противопоказаны. Гораздо выгоднее потратить время на получение информации из других источников. Вероятно, она будет более поверхностна, но зачастую этого уровня будет достаточно. А если речь идёт о динамично изменяющемся инструменте — это сюр и бесполезная трата денег. Чаще всего вашей лучшей книгой будет официальная документация инструмента на его же сайте.
Относитесь к своему обучению с умом. Если вам кажется, что книга — единственно верный и правильный источник информации, то дело, на самом деле, ваше. В моем понимании такое обучение не является неверным. Оно, скорее, не самое эффективное, что подтверждает опыт моего обучения, моих друзей и коллег, и мой опыт менторинга. Все, что я могу — этим опытом лишь поделиться. Выбор всё равно за вами.
Лично мне, как разработчику, было невероятно интересно читать лишь те книги, что к IT относятся лишь от части, например:
Scrum. Революционный метод управления проектами
Rework — о корпоративном развитии от создателей Ruby on Rails
Мифический человеко-месяц — о ведении проектов
Может я просто больше менеджер, чем разработчик? 🤔
#blog
👍21❤9🐳5🔥4💯2🤔1🤪1
Что такое MVP
Я тут заметил, что позволяю себе использовать этот термин достаточно часто, но поста о том что это на самом деле такое у меня не было. Нужно исправлять.
MVP — Minimum Viable Product — минимально жизнеспособный продукт — это минимальный набор возможностей продукта, позволяющей ему выполнять свою изначальную задачу — так или иначе функционировать или же приносить хоть какие-то деньги.
MVP помогает команде разработчиков быстро и дешево проверить гипотезы о продукте, собрать обратную связь от пользователей и определить, какие функции и изменения нужно внести для улучшения продукта.
MVP калькулятора — сложение, вычитание, умножение и деление двух целых чисел. Возведение в степень, факториал, логарифмирование, построение графиков — дополнительный функционал, который, скорее всего, в MVP не входит.
MVP Telegram — список чатов. Стикеры, каналы, папки, архив чатов, менеджмент уведомлений, возможность установки своей темы — всё это дополнительный функционал, который в MVP не входит.
Важно чувствовать границу между «необходимым» и «возможным». Это важно.
Спасибо за прочтение, это важно для меня ❤️
#theory
Я тут заметил, что позволяю себе использовать этот термин достаточно часто, но поста о том что это на самом деле такое у меня не было. Нужно исправлять.
MVP — Minimum Viable Product — минимально жизнеспособный продукт — это минимальный набор возможностей продукта, позволяющей ему выполнять свою изначальную задачу — так или иначе функционировать или же приносить хоть какие-то деньги.
MVP помогает команде разработчиков быстро и дешево проверить гипотезы о продукте, собрать обратную связь от пользователей и определить, какие функции и изменения нужно внести для улучшения продукта.
MVP калькулятора — сложение, вычитание, умножение и деление двух целых чисел. Возведение в степень, факториал, логарифмирование, построение графиков — дополнительный функционал, который, скорее всего, в MVP не входит.
MVP Telegram — список чатов. Стикеры, каналы, папки, архив чатов, менеджмент уведомлений, возможность установки своей темы — всё это дополнительный функционал, который в MVP не входит.
Важно чувствовать границу между «необходимым» и «возможным». Это важно.
Спасибо за прочтение, это важно для меня ❤️
#theory
❤34👍14🐳5🔥2👏1🤓1
Data-атрибуты
На самом деле, вёрстка может хранить крайне много информации. Помимо предопределённых атрибутов для каждого из тегов, у разработчиков есть возможность передавать свои кастомные атрибуты к любому тегу. Такие атрибуты называются data-атрибутами и выглядят, например, так:
В этом случае мы создаём кнопку, которая имеет какой-то приоритет, например, приоритет отображения. То есть при помощи кастомного свойства мы можем определить, что такая кнопка будет отображаться первее всех. Конечно же, чтобы это действительно так работало, нам необходимо задать либо кастомные стили, например:
Либо как-то обработать data-атрибут в JavaScript:
Стоит ли использовать data-атрибуты сегодня? Абсолютно точно да, но только в паре случаев: для более удобного тестирования и для чего-то, связанного с динамическим отображением. Для тестирования data-атрибуты могут быть использованы для однозначного поиска какого-либо элемента в вёрстке, например:
Ни в коем случае не записывайте в такие атрибуты никакие важные бизнес-данные. Помните, что вёрстку может отредактировать любой через код элемента, ваше приложение становится слишком уязвимым.
Да и в контексте современных web-фреймворков, использование data-атрибутов всё больше теряет смысл из-за того, что фреймворки предоставляют куда более удобные и безопасные способы хранения данных
#web #theory #javascript #useful
На самом деле, вёрстка может хранить крайне много информации. Помимо предопределённых атрибутов для каждого из тегов, у разработчиков есть возможность передавать свои кастомные атрибуты к любому тегу. Такие атрибуты называются data-атрибутами и выглядят, например, так:
<button data-order="1">Кнопка</button>
В этом случае мы создаём кнопку, которая имеет какой-то приоритет, например, приоритет отображения. То есть при помощи кастомного свойства мы можем определить, что такая кнопка будет отображаться первее всех. Конечно же, чтобы это действительно так работало, нам необходимо задать либо кастомные стили, например:
button[data-order] {
order: attr(data-order)
}Либо как-то обработать data-атрибут в JavaScript:
const element = document.querySelector(button[data-order])
const order = element.dataset.order
Стоит ли использовать data-атрибуты сегодня? Абсолютно точно да, но только в паре случаев: для более удобного тестирования и для чего-то, связанного с динамическим отображением. Для тестирования data-атрибуты могут быть использованы для однозначного поиска какого-либо элемента в вёрстке, например:
<button data-testid="1">Кнопка</button>
Ни в коем случае не записывайте в такие атрибуты никакие важные бизнес-данные. Помните, что вёрстку может отредактировать любой через код элемента, ваше приложение становится слишком уязвимым.
Да и в контексте современных web-фреймворков, использование data-атрибутов всё больше теряет смысл из-за того, что фреймворки предоставляют куда более удобные и безопасные способы хранения данных
#web #theory #javascript #useful
👍24❤8🐳5🔥3
Различные способы загрузки скриптов
Уже не просто классический, а, скорее, стереотипный вопрос с фронтенд собеседования — это разные способы подключения скриптов к странице.
Начать стоит с того, что каждый скрипт на странице подключается при помощи тега
Также стоит учитывать, что HTML разметка парсится сверху-вниз, а загрузка скрипта через тег
Чтобы решить эту проблему, есть ещё два варианта асинхронной загрузки скриптов.
Оба варианта загрузки являются асинхронными и не блокируют отрисовку и парсинг HTML. Но в чём же тогда разница? В порядке выполнения.
Если на странице будет несколько
Скрипты
И это, в целом, все отличия, которые стоит знать для ответа на этот вопрос.
#javascript #web #useful #theory
Уже не просто классический, а, скорее, стереотипный вопрос с фронтенд собеседования — это разные способы подключения скриптов к странице.
Начать стоит с того, что каждый скрипт на странице подключается при помощи тега
script:<script src="index.js"></script>
Также стоит учитывать, что HTML разметка парсится сверху-вниз, а загрузка скрипта через тег
script является блокирующей операцией при загрузке вёрстки. Это значит, что браузер, доходя до тега script, полностью прекращает дальнейший парсинг и отрисовку HTML до того момента, пока скрипт не будет загружен и выполнен.Чтобы решить эту проблему, есть ещё два варианта асинхронной загрузки скриптов.
<script async src="index.js"></script>
<script defer src="index.js"></script>
Оба варианта загрузки являются асинхронными и не блокируют отрисовку и парсинг HTML. Но в чём же тогда разница? В порядке выполнения.
Если на странице будет несколько
async скриптов, то выполнятся они будут в порядке загрузки. То есть каждый скрипт будет выполнен ровно тогда, когда скачается, вне зависимости от того порядка, в котором скрипты подключаются в файле. Также async скрипты не подходят для загрузки скриптов, активно взаимодействующих с HTML разметкой, поскольку такой скрипт может быть загружен и выполнен ещё до того, как успеет построиться DOM дерево.Скрипты
defer также загружаются асинхронно, но, в отличии от async, сохраняют порядок выполнения. Более того, все defer скрипты дожидаются построения DOM дерева, даже если были загружены ранее, из-за чего взаимодействие с разметкой из таких скриптов немного удобнее и безопаснее.И это, в целом, все отличия, которые стоит знать для ответа на этот вопрос.
#javascript #web #useful #theory
👍35🔥10🐳6🤓2❤1
CSS можно в JS и это не всегда хорошо
Фронтендеры как будто не могут договориться как им хочется писать стили 🙂. Вариантов очень много, разнообразных препроцессоров и инструментов в виде библиотек стилей, CSS фреймворков…
Вообще, CSS-in-JS — это некоторый подход, в котором мы отказываемся от массового использования стандартных CSS файлов и пишем стили внутри JS. Для реализации этого концепта есть несчётное количество библиотек, но для React основной я бы назвал
Причина проста: это очень удобно, по нескольким причинам.
1. CSS-in-JS позволяет генерировать стили динамически для одного класса. Стандартный CSS так не может, мы должны изменять стили только добавлением дополнительного класса, модификатора и т.д.
2. Дополнительная мета-информация при разработке переезжает из
3. Упрощённая файловая структура. Формочки можно клепать ещё проще и быстрее, не переключаясь между файлами.
Возможно и звучит круто, но за всё это приходится платить достаточно высокую цену:
1. Стили создаются в рантайме и блокируют выполнение остального JavaScript на странице. Это приводит к проблемам с производительность, особенно для перегруженных систем. Всё это удобство в разработке приведет к тому, что пользователь будет плеваться от того, какое медленное приложение вы сделали.
Использование нативного CSS для браузера куда понятнее и быстрее, JS бандл становится меньше и грузится также быстрее, а стили подгружаются параллельно вашему коду.
В результате-то что? На мой вкус, CSS-in-JS — это и правда очень удобно. Но я полностью отказался от этого подхода в своих проектах, потому что не готов платить производительностью за все плюсы, что описал выше.
Если вы хотите писать стили быстро и качественно, то я действительно рекомендую обратить большее внимание на обычные модульные стили на каком-то препроцессоре или же вообще на Tailwind CSS. От последнего я, кстати, невероятно долго плевался, ну а потом как обычно: отрицание, гнев, торг, депрессия, влюбился… Точно рекомендую посмотреть, если ещё не пробовали)
Спасибо за прочтение, это важно для меня ❤️
#javascript #web #react #theory
Фронтендеры как будто не могут договориться как им хочется писать стили 🙂. Вариантов очень много, разнообразных препроцессоров и инструментов в виде библиотек стилей, CSS фреймворков…
Вообще, CSS-in-JS — это некоторый подход, в котором мы отказываемся от массового использования стандартных CSS файлов и пишем стили внутри JS. Для реализации этого концепта есть несчётное количество библиотек, но для React основной я бы назвал
styled-components. Лично я вижу повальное число проектов, в которых используется эта библиотека, да и сам использовал её в достаточно часто.Причина проста: это очень удобно, по нескольким причинам.
1. CSS-in-JS позволяет генерировать стили динамически для одного класса. Стандартный CSS так не может, мы должны изменять стили только добавлением дополнительного класса, модификатора и т.д.
2. Дополнительная мета-информация при разработке переезжает из
className в название самого тега. Если мы хотим как-то влиять на внешний вид нашего приложения, то классы мы будем записывать в переменные, соответственно прочитать их быстро не получится. В общем, сложно. Стилизованные компоненты же несут информацию о том, зачем они нужны, сразу из названия, и этой информации куда больше, чем просто div, aside, ul...3. Упрощённая файловая структура. Формочки можно клепать ещё проще и быстрее, не переключаясь между файлами.
Возможно и звучит круто, но за всё это приходится платить достаточно высокую цену:
1. Стили создаются в рантайме и блокируют выполнение остального JavaScript на странице. Это приводит к проблемам с производительность, особенно для перегруженных систем. Всё это удобство в разработке приведет к тому, что пользователь будет плеваться от того, какое медленное приложение вы сделали.
Использование нативного CSS для браузера куда понятнее и быстрее, JS бандл становится меньше и грузится также быстрее, а стили подгружаются параллельно вашему коду.
В результате-то что? На мой вкус, CSS-in-JS — это и правда очень удобно. Но я полностью отказался от этого подхода в своих проектах, потому что не готов платить производительностью за все плюсы, что описал выше.
Если вы хотите писать стили быстро и качественно, то я действительно рекомендую обратить большее внимание на обычные модульные стили на каком-то препроцессоре или же вообще на Tailwind CSS. От последнего я, кстати, невероятно долго плевался, ну а потом как обычно: отрицание, гнев, торг, депрессия, влюбился… Точно рекомендую посмотреть, если ещё не пробовали)
Спасибо за прочтение, это важно для меня ❤️
#javascript #web #react #theory
👍38❤13🔥3🐳3
progway — программирование, IT
CSS можно в JS и это не всегда хорошо Фронтендеры как будто не могут договориться как им хочется писать стили 🙂. Вариантов очень много, разнообразных препроцессоров и инструментов в виде библиотек стилей, CSS фреймворков… Вообще, CSS-in-JS — это некоторый…
К слову, о разности в производительности: вот наглядный пример разницы времени скриптинга.
Тут видно, что нативный подход примерно на 20 миллисекунд быстрее, чем
Из практики, на одном из больших проектов, где за стандарт был взят🤷♂️
В примере выше значение в 20мс не является погрешностью измерения. Я специально покрутил страницу подольше и взял усредненные значения. Если экстраполировать эти значения, то, в среднем, если 5
Даже если сделать скидку на погрешность измерения и сократить ожидаемую деградацию в два раза до 200-400мс, то даже это не спасёт ситуацию. Это всё равно очень большое время🤷♂️ 🤷♂️ 🤷♂️
Тут видно, что нативный подход примерно на 20 миллисекунд быстрее, чем
styled-components, и, возможно, вы можете подумать, что эта разница слишком мала. Только вот эта разница достигается уже тогда, когда я рендерю просто 5 div со стилями на странице, а стилизованных компонентов даже в маленьких проектах значительно больше пяти.Из практики, на одном из больших проектов, где за стандарт был взят
styled-components, время скриптинга одного из модулей доходило до 3.5 секунд. После переписывания стилей на CSS-модули, время скриптинга уменьшилось до 650-700мс, то есть, по факту, в 5 раз, просто из-за стилей в коде В примере выше значение в 20мс не является погрешностью измерения. Я специально покрутил страницу подольше и взял усредненные значения. Если экстраполировать эти значения, то, в среднем, если 5
styled-components компонентов замедлят вашу страницу на 20мс, то в более реальной ситуации с 100-200 компонентами, ваша страница из-за стилей будет грузиться на 400-800мс дольше. Даже если сделать скидку на погрешность измерения и сократить ожидаемую деградацию в два раза до 200-400мс, то даже это не спасёт ситуацию. Это всё равно очень большое время
Please open Telegram to view this post
VIEW IN TELEGRAM
👍31🤯5✍2🐳2🤪1🗿1
Какой цикл в JS самый быстрый
Из серии занятного. Наткнулся на занятную статью, где описывается какой цикл в JS самый быстрый. Если коротко, то обычный for.
Было уже много бенчмарков на тему того такой цикл быстрее чего-то вроде
А всё почему? Потому чтомы постоянно обращаемся к arr.length, что по своей сути — геттер, а геттеры всегда работают медленнее обычного обращения к переменной. Тогда можно прибегнуть к хаку, когда длина массива вычисляется заранее и присваивается к переменной лишь единожды:
Но вот что автор не упоминает, так это то, что можно избежать такой записи и использовать просто обратный цикл:
Таким образом мы обратимся к длине массива только единожды и максимально выиграем время.
Если честно, не могу придумать практического примера, где это было бы реально полезно, но если вы безудержно гоняетесь за скоростью выполнения кода где-нибудь на литкоде, то может быть интересно. На практике я такие конструкции обычно не вижу, так как разница не значительная, но шутка ли, такой вопрос реально спрашивали на собесе у одного из моих менти.
Спасибо за прочтение, это важно для меня ❤️
#theory #javascript
Из серии занятного. Наткнулся на занятную статью, где описывается какой цикл в JS самый быстрый. Если коротко, то обычный for.
Было уже много бенчмарков на тему того такой цикл быстрее чего-то вроде
forEach или for..in и for..of , так что это мы возьмем за данное. А вот что действительно интересно, так это то, что стандартный вариант записи цикла for не является самым эффективным:for (let i = 0; i < arr.length; i++) {
// какой-то код
}А всё почему? Потому что
const arrLength = arr.length;
for (let i = 0; i < arrLength ; i++) {
// какой-то код
}
Но вот что автор не упоминает, так это то, что можно избежать такой записи и использовать просто обратный цикл:
for (let i = arr.length - 1; i >= 0 ; i--) {
// какой-то код
}Таким образом мы обратимся к длине массива только единожды и максимально выиграем время.
Если честно, не могу придумать практического примера, где это было бы реально полезно, но если вы безудержно гоняетесь за скоростью выполнения кода где-нибудь на литкоде, то может быть интересно. На практике я такие конструкции обычно не вижу, так как разница не значительная, но шутка ли, такой вопрос реально спрашивали на собесе у одного из моих менти.
Спасибо за прочтение, это важно для меня ❤️
#theory #javascript
👍62❤16🔥12🐳2✍1
This media is not supported in your browser
VIEW IN TELEGRAM
Что такое префиксные свойства и зачем они нужны?
Префиксные свойства — это особые свойства CSS, которые дублируют некоторые стандартные CSS свойства для обеспечения совместимости с различными браузерами.
Изначально префиксные свойства были придуманы для одной простой вещи — кроссбраузерной вёрстки. Но в последнее время идет активное обсуждение отказа от этого подхода и выравнивания названия свойств между браузерами, поэтому это уже не так актуально.
Что интереснее, префиксные свойства позволяют работать с экспериментальными фичами браузера, например изменять скроллбары:
Также есть специальные инструменты, которые называются автопрефиксерами. Такие утилиты автоматически добавляют все необходимые префиксные свойства к вашему CSS коду, поэтому многие даже не задумываются о том, что префиксные свойства в целом существуют, так как эти инструменты уже давно входят в стандартную поставку многих шаблонов и фреймворков.
В целом, префиксные свойства в современном мире — это экспериментальная экзотика. Работать с ними так, как предполагалось изначально, вы уже вряд ли будете, так как все вопросы кроссбраузерности стилей уже давно решаются автоматически.
Спасибо за прочтение, это важно для меня ❤️
Пример с кастомными скроллбарами
#web #theory #web #design
Префиксные свойства — это особые свойства CSS, которые дублируют некоторые стандартные CSS свойства для обеспечения совместимости с различными браузерами.
Изначально префиксные свойства были придуманы для одной простой вещи — кроссбраузерной вёрстки. Но в последнее время идет активное обсуждение отказа от этого подхода и выравнивания названия свойств между браузерами, поэтому это уже не так актуально.
Что интереснее, префиксные свойства позволяют работать с экспериментальными фичами браузера, например изменять скроллбары:
/* ширина скроллбара */
::-webkit-scrollbar {
width: 10px;
}
/* задний фон */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* ползунок */
::-webkit-scrollbar-thumb {
background: #888;
}
/* ползунок при наведении */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
Также есть специальные инструменты, которые называются автопрефиксерами. Такие утилиты автоматически добавляют все необходимые префиксные свойства к вашему CSS коду, поэтому многие даже не задумываются о том, что префиксные свойства в целом существуют, так как эти инструменты уже давно входят в стандартную поставку многих шаблонов и фреймворков.
В целом, префиксные свойства в современном мире — это экспериментальная экзотика. Работать с ними так, как предполагалось изначально, вы уже вряд ли будете, так как все вопросы кроссбраузерности стилей уже давно решаются автоматически.
Спасибо за прочтение, это важно для меня ❤️
Пример с кастомными скроллбарами
#web #theory #web #design
🔥20👍11❤5🐳3🤓1
Ссылочные типы и типы значений в JavaScript
Перед прочтением я рекомендую пробежаться по ещё одному посту из канала о том, какие типы данных есть в JavaScript.
В языке JavaScript, типы данных можно разделить на две большие группы:
Типы значений — примитивы — данные, что языком воспринимаются по конкретному значению. Например, строка
Ссылочные типы — типы данных, которые интерпретатор языка воспринимает по ссылке. Переменная больше не хранит в себе конкретное значение, зато сохраняет ссылку на место в памяти, где это самое значение хранится.
К ссылочным типам данных относятся:
— объекты
— массивы
— функции
Казалось бы, а какая разница? Но разница заключается в способе хранения и передачи этих самых данных через переменные, а так же в способе взаимодействия с ними.
Типы значений потому и называются примитивами, так как максимально просты и предсказуемы в этом плане. Такие переменные, по сути, представляют собой просто некоторую последовательность байт. При сравнении таких переменных, всё, что нужно сделать языку — посимвольно сравнить цепочки байт и выдать результат.
Ссылочные же типы, в свою очередь, могут вызвать много проблем при работе с ними. Переменная сохраняет под собой не конкретную последовательность байт, а, как и говорилось выше, лишь некоторую ссылку на ячейку памяти, в которой нужная для нас информация (байты) и записаны. Из ключевых особенностей таких типов данных сразу же приходит на ум их копирование, с чем часто возникают проблемы у новичков и не только.
Например, в этом случае мы получаем не ожидаемый для многих вывод в консоль:
Связано это со спецификой работы
Более подробно о понятии глубокого копирования я расскажу в отдельном посте. Он будет одним из следующих.
#javascript #data #theory #useful
Перед прочтением я рекомендую пробежаться по ещё одному посту из канала о том, какие типы данных есть в JavaScript.
В языке JavaScript, типы данных можно разделить на две большие группы:
Типы значений — примитивы — данные, что языком воспринимаются по конкретному значению. Например, строка
"Hello, World!" или число 5.Ссылочные типы — типы данных, которые интерпретатор языка воспринимает по ссылке. Переменная больше не хранит в себе конкретное значение, зато сохраняет ссылку на место в памяти, где это самое значение хранится.
К ссылочным типам данных относятся:
— объекты
— массивы
— функции
Казалось бы, а какая разница? Но разница заключается в способе хранения и передачи этих самых данных через переменные, а так же в способе взаимодействия с ними.
Типы значений потому и называются примитивами, так как максимально просты и предсказуемы в этом плане. Такие переменные, по сути, представляют собой просто некоторую последовательность байт. При сравнении таких переменных, всё, что нужно сделать языку — посимвольно сравнить цепочки байт и выдать результат.
Ссылочные же типы, в свою очередь, могут вызвать много проблем при работе с ними. Переменная сохраняет под собой не конкретную последовательность байт, а, как и говорилось выше, лишь некоторую ссылку на ячейку памяти, в которой нужная для нас информация (байты) и записаны. Из ключевых особенностей таких типов данных сразу же приходит на ум их копирование, с чем часто возникают проблемы у новичков и не только.
Например, в этом случае мы получаем не ожидаемый для многих вывод в консоль:
const obj = {
name: "Denis",
address: {
street: 'Lenina',
apartment: 10
}
}
const clone = Object.assign({}, obj)
obj.address.street = 'Pushkina'
console.log(clone.address.street) // PushkinaСвязано это со спецификой работы
Object.assign и особенностями копирования вложенных объектов. В этом случае копирование считается неглубоким, поэтому скопированный объект также изменяется.Более подробно о понятии глубокого копирования я расскажу в отдельном посте. Он будет одним из следующих.
#javascript #data #theory #useful
🔥20👍11❤4🐳2
Понятие глубокого копирования
В JavaScript’e, да и в других языках, часто встречаются ссылочные типы данных, вокруг которых строится одновременно много самых различных полезных хаков и не очень полезных проблем.
Понятие глубокого копирования, на самом-то деле, достаточно простое. Рассмотрим код:
В данном случае мы получим не ожидаемый для многих вывод в консоль. Связано это с тем, что
На данный момент в памяти у нас есть три объекта:
И, на самом деле,
Для решения этой проблемы можно воспользоваться рекурсивными алгоритмами на основе того же
Тут вывод уже будет ожидаемым, поскольку мы вручную пересоздали ссылку на объект в поле
Подобные проблемы и решения также можно увидеть и в контексте массивов.
#javascript #theory #data
В JavaScript’e, да и в других языках, часто встречаются ссылочные типы данных, вокруг которых строится одновременно много самых различных полезных хаков и не очень полезных проблем.
Понятие глубокого копирования, на самом-то деле, достаточно простое. Рассмотрим код:
const obj = {
name: "Denis",
address: {
street: 'Lenina',
apartment: 10
}
}
const clone = Object.assign({}, obj)
obj.address.street = 'Pushkina'
console.log(clone.address.street) // PushkinaВ данном случае мы получим не ожидаемый для многих вывод в консоль. Связано это с тем, что
Object.assign не осуществляет глубокое копирование.На данный момент в памяти у нас есть три объекта:
— obj— clone— obj.addressИ, на самом деле,
obj.address === clone.address. Этот вложенный объект для obj и clone на самом деле — один и тот же объект в памяти, поскольку Object.assign полностью скопировал только примитивы, а поле address просто перенёс по ссылке. Для решения этой проблемы можно воспользоваться рекурсивными алгоритмами на основе того же
Object.assign для глубокого копирования объекта. Или же, если мы точно знаем какие поля будут в нашем объекте, можем воспользоваться следующим синтаксисом через spread оператор:const obj = {
name: "Denis",
address: {
street: "Lenina",
apartment: 10
}
};
const clone = {
...obj,
address: {
...obj.address
}
};
obj.address.street = "Pushkina";
console.log(clone.address.street); // LeninaТут вывод уже будет ожидаемым, поскольку мы вручную пересоздали ссылку на объект в поле
address и заполнили его значениями из исходного объекта. Однако стоит быть осторожным при копировании объектов таким способом и помнить, что spread оператор не копирует геттеры и сеттеры, как и Object.assign.Подобные проблемы и решения также можно увидеть и в контексте массивов.
#javascript #theory #data
🔥20👍11❤3🤯3🐳2🤔1
Способы клонирования объектов
В JavaScript объекты являются ссылочным типом данных, из-за чего есть много приколов, но и проблем не меньше. Перед прочтением этого поста лучше прочитать о понятии нечистого объекта. И в этом посте мы разберёмся с тем как всё таки скопировать объект.
Итак, начать стоит с того, что нечистый объект невозможно скопировать. Именно поэтому это понятие так важно в теме копирования.
И переходя к способам, можно сказать, что их несколько основных:
1. Использование синтаксиса Spread оператора
3. Через методы глобального объекта
4. Библиотека Lodash
Начать можно с конца, потому что изобретать велосипед не всегда есть смысл. В библиотеке Lodash есть несколько функций для копирования объектов, полностью протестированных и хорошо оптимизированных.
Но так же можно и использовать глобальный объект
Нюанс заключается лишь в том, что этот способ подходит только для самых примитивных объектов. Такой способ скопирует только примитивы, пропуская типа данных типа
Более интересным вариантом является относительно новый синтаксис
Тут интересным нюансом является так же то, что
И финальным, зато самым стабильным, как мне кажется, способом, является использование
Не забывайте, что способы с использованием
Ну и, конечно же, каждый из способов можно использовать в зависимости от места и задачи, поэтому полезно знать про особенности каждого из них. Хотя в большинстве случаев уже классического
#javascript #data #theory
В JavaScript объекты являются ссылочным типом данных, из-за чего есть много приколов, но и проблем не меньше. Перед прочтением этого поста лучше прочитать о понятии нечистого объекта. И в этом посте мы разберёмся с тем как всё таки скопировать объект.
Итак, начать стоит с того, что нечистый объект невозможно скопировать. Именно поэтому это понятие так важно в теме копирования.
И переходя к способам, можно сказать, что их несколько основных:
1. Использование синтаксиса Spread оператора
2. Object.assign3. Через методы глобального объекта
JSON4. Библиотека Lodash
Начать можно с конца, потому что изобретать велосипед не всегда есть смысл. В библиотеке Lodash есть несколько функций для копирования объектов, полностью протестированных и хорошо оптимизированных.
Но так же можно и использовать глобальный объект
JSON, а конкретно его методы stringify и parse. Логика такая, что первый метод переводит объект в JSON строку, а второй полностью воссоздаёт его из JSON строки:const obj = {
name: "Denis"
}
const clone = JSON.parse(JSON.stringify(obj))Нюанс заключается лишь в том, что этот способ подходит только для самых примитивных объектов. Такой способ скопирует только примитивы, пропуская типа данных типа
Symbol, геттеры, сеттеры, методы и всё, что сложнее строки, числа или boolean. Но для некоторых случаев такого способа более чем достаточно.Более интересным вариантом является относительно новый синтаксис
spread оператора, который копирует объект примерно так же как и вышеописанный способ. Spread оператор работает только с итерабельными объектами и процесс копирования тогда выглядит вот так:const obj = {
name: "Denis"
}
const clone = { ...obj }Тут интересным нюансом является так же то, что
spread оператор не копирует геттеры и сеттеры, а также осуществляет лишь поверхностное копирование. Но всё же этот способ прекрасно подойдет для плоских объектов без лишней вложенности.И финальным, зато самым стабильным, как мне кажется, способом, является использование
Object.assign. Это метод объекта, который доставляет свойства из одного объекта в другой. Так же, как и при использовании spread оператора, геттеры и сеттеры перенесены не будут. Выглядеть это может, например, так: const obj = {
name: "Denis"
}
const clone = Object.assign({}, obj)Не забывайте, что способы с использованием
spread оператора и Object.assign не производят глубокого копирования. Это очень важно, ведь вложенные объекты не будут по настоящему скопированы, а лишь перенесутся по ссылке. Из-за этого вы можете по ошибке мутировать какие-то данные, что в перспективе приведет к непредвиденным ошибкам.Ну и, конечно же, каждый из способов можно использовать в зависимости от места и задачи, поэтому полезно знать про особенности каждого из них. Хотя в большинстве случаев уже классического
spread оператора будет вполне достаточно.#javascript #data #theory
👍25🔥6❤2🐳2✍1💯1
Чем border отличается от outline?
Оба эти свойства отвечают за стилизацию контура элемента, но у них есть много различий:
1. Свойство
2. Разные возможности стилизации —
3. Семантическая разница —
Не смотря на то, что обводку и тем и другим способом можно создать визуально одинаковой, всё же используются свойства совсем для разных задач.
Спасибо за прочтение, это важно для меня ❤️
#theory #web
Оба эти свойства отвечают за стилизацию контура элемента, но у них есть много различий:
1. Свойство
border являются частью блочной модели элемента. Это значит, что изменение толщины border будет влиять и на размеры самого элемента, которому принадлежит обводка. outline, в свою очередь, никак не влияет на расположение и размеры элементов в вёрстке.2. Разные возможности стилизации —
border является составным (обобщающим) свойством, то есть представляет собой короткую запись для свойств border-top, border-left и других. outline же нельзя задать индивидуальным для каждой из 4-х сторон.3. Семантическая разница —
border обычно используется для создания постоянной видимой границы элемента, в то время как outline используется для выделения элемента без влияния на верстку с целью повышения доступности.Не смотря на то, что обводку и тем и другим способом можно создать визуально одинаковой, всё же используются свойства совсем для разных задач.
Спасибо за прочтение, это важно для меня ❤️
#theory #web
❤32👍10🔥3🐳2
Что такое всплытие
Чтобы понять что такое всплытие (hoisting), необходимо хотя бы на пальцах понять как интерпретируется код JavaScript.
Можно воспринимать это так, что интерпретация происходит в два шага:
1. Интерпретатор пробегает по всему файлу не выполняя его, а лишь проверяя на синтаксические ошибки, инициализируя все переменные.
2. Интерпретатор проходит по коду и выполняет его.
Рассмотрим конкретный пример:
В коде выше мы объявляем две примитивные функции и пытаемся получить к ним доступ ещё до объявления. Функция
Связано это в первую очередь со способом объявления этих функций.
Функция
Всплытие, по сути — это процесс, в котором интерпретатор JavaScript позволяет некоторым переменным «всплывать» в начало области видимости. Это означает, что доступны они будут ещё до фактического объявления в коде во всей области видимости.
Работает это не только с функциями, вот ещё один пример:
Переменная
Переменная
Из этого кода должно быть понятно. Тот случай, когда проще показать, чем объяснить.
Спасибо за прочтение, это важно для меня
#javascript #theory #web
Чтобы понять что такое всплытие (hoisting), необходимо хотя бы на пальцах понять как интерпретируется код JavaScript.
Можно воспринимать это так, что интерпретация происходит в два шага:
1. Интерпретатор пробегает по всему файлу не выполняя его, а лишь проверяя на синтаксические ошибки, инициализируя все переменные.
2. Интерпретатор проходит по коду и выполняет его.
Рассмотрим конкретный пример:
sum(2, 5); // 7
substract(5, 4); // ReferenceError
function sum(a, b) {
return a + b;
}
const substract = function(a, b) {
return a - b;
}
В коде выше мы объявляем две примитивные функции и пытаемся получить к ним доступ ещё до объявления. Функция
sum возвращает ожидаемый результат, несмотря на то, что вызвана она до того, как объявлена. Вызов же функции substract выбрасывает ошибку. Связано это в первую очередь со способом объявления этих функций.
sum объявлена через Function declaration, именно поэтому вызов функции до её объявления работает корректно.Функция
substract объявлена через Function expression, а такие функции не всплывают.Всплытие, по сути — это процесс, в котором интерпретатор JavaScript позволяет некоторым переменным «всплывать» в начало области видимости. Это означает, что доступны они будут ещё до фактического объявления в коде во всей области видимости.
Работает это не только с функциями, вот ещё один пример:
console.log(name); // undefined
var name = 'Denis';
console.log(name); // Denis
console.log(channel); // ReferenceError
const channel = 'progway';
console.log(channel); // progway
Переменная
channel не всплыла, из-за чего мы получили ошибку при обращении до объявления. Всплывают только переменные, объявленые через ключевое слово var. Подробнее о ключевых словах для объявления переменной я писал тут.Переменная
name всплыла, из-за чего ещё на первой строчке мы смоги получить к ней доступ без ошибки. Тут есть нюанс: мы получили undefined. Чтобы понять почему, рассмотрим как примерно выглядит этот код после первой стадии интерпретации:// инициализировали значение
// но значение еще не записали
var name;
// получаем доступ
console.log(name);
// присваиваем значение
name = 'Denis';
Из этого кода должно быть понятно. Тот случай, когда проще показать, чем объяснить.
Спасибо за прочтение, это важно для меня
#javascript #theory #web
👍43❤7🔥7🐳3
Стрелочные функции или обычные?
У меня уже было несколько постов о сравнении разных способов создания функций, но сегодня я хочу их окончательно сравнить.
Итак, ещё раз: Чем отличается стрелочная функция от функции, объявленной ключевым словом
— Синтаксис
— У стрелочных функций нет своего контекста this
— Стрелочные функции не всплывают, в отличии от Function Declaration
— У стрелочных функций нет доступа к псевдомассиву arguments
— Со стрелочными функциями нельзя использовать оператор new
— В стрелочных функциях нет возможности дублировать названия переменных
И, по сути, кажется, что стрелочная функция — просто более упрощенная версия обычной функции. Вам не кажется, так и есть)
Обычные функции более обширны в своём применении, но чем они платят за это?
1. Как минимум — скоростью обработки, ведь стрелочные функции создаются в среднем в 10 раз быстрее, что в случае с нагруженными проектами на слабых устройствах может вам экономить драгоценные миллисекунды JavaScript рантайма
2. Также стоит учитывать, что стрелочные функции максимально упрощены по отношению к обычным функциям, не имеют замкнутого контекста и прочих фишек, а, следовательно, и памяти также занимают на порядки меньше
3. Синтаксис субъективно более быстрый и удобный к написанию. Стрелочные функции можно красиво использовать в качестве callback-ов, а визуальная простота такого кода упрощает его чтение и понимание.
4. Более удобная типизация в случае использования отдельных типов:
В совокупности, все эти факты делают меня большим любителем стрелочных функций. Я их использую абсолютно везде, где это только возможно. Для меня крайне важен параметр производительности в разработке UI, и я, кажется, пытаюсь вытащить лишние миллисекунды уже откуда угодно.
Правда, касательно производительности стоит понимать, что какой-то значимый эффект мы можем получить только на большой выборке. Если речь идет о создании порядка сотни или даже тысячи функций, то никакой разницы по производительности вы не заметите. Нужны уже более экзотичные кейсы, например, когда мы динамически создаём много уникальных callback-ов для отрисовки большого списка в React.
Спасибо за прочтение, это важно для меня ❤️
#web #theory
У меня уже было несколько постов о сравнении разных способов создания функций, но сегодня я хочу их окончательно сравнить.
Итак, ещё раз: Чем отличается стрелочная функция от функции, объявленной ключевым словом
function?— Синтаксис
— У стрелочных функций нет своего контекста this
— Стрелочные функции не всплывают, в отличии от Function Declaration
— У стрелочных функций нет доступа к псевдомассиву arguments
— Со стрелочными функциями нельзя использовать оператор new
— В стрелочных функциях нет возможности дублировать названия переменных
И, по сути, кажется, что стрелочная функция — просто более упрощенная версия обычной функции. Вам не кажется, так и есть)
Обычные функции более обширны в своём применении, но чем они платят за это?
1. Как минимум — скоростью обработки, ведь стрелочные функции создаются в среднем в 10 раз быстрее, что в случае с нагруженными проектами на слабых устройствах может вам экономить драгоценные миллисекунды JavaScript рантайма
2. Также стоит учитывать, что стрелочные функции максимально упрощены по отношению к обычным функциям, не имеют замкнутого контекста и прочих фишек, а, следовательно, и памяти также занимают на порядки меньше
3. Синтаксис субъективно более быстрый и удобный к написанию. Стрелочные функции можно красиво использовать в качестве callback-ов, а визуальная простота такого кода упрощает его чтение и понимание.
4. Более удобная типизация в случае использования отдельных типов:
const foo: FooFunc = () => {}В совокупности, все эти факты делают меня большим любителем стрелочных функций. Я их использую абсолютно везде, где это только возможно. Для меня крайне важен параметр производительности в разработке UI, и я, кажется, пытаюсь вытащить лишние миллисекунды уже откуда угодно.
Правда, касательно производительности стоит понимать, что какой-то значимый эффект мы можем получить только на большой выборке. Если речь идет о создании порядка сотни или даже тысячи функций, то никакой разницы по производительности вы не заметите. Нужны уже более экзотичные кейсы, например, когда мы динамически создаём много уникальных callback-ов для отрисовки большого списка в React.
Спасибо за прочтение, это важно для меня ❤️
#web #theory
👍49❤12🔥4🐳4🤬1
Селектор по атрибуту
Помимо обычных селекторов по классу, элементу, идентификатору, в CSS есть ещё много способов написать более конкретный селектор. Мне очень нравятся варианты селекторов по атрибуту.
Селектор по атрибуту — это дополнительная часть селектора, которая смотрит на любой атрибут тега. Для примера рассмотрим вёрстку:
Как выбрать все кнопки типа
Или же
В нашем случае, записи идентичны. Подобным же образом можно выбрать, например, все пустые ссылки на странице:
Ну и, соответсвенно, этот селектор может быть составным с другими селекторами:
Этот селектор выберет ссылку на нашей импровизированной странице.
Также важно сказать, что можно написать селектор не только по полному совпадению значения. Можно также найти, например, подстроку в строке, да и вообще там достаточно много операторов. Например в вёрстке:
Можно выбрать ссылку следующим селектором:
Обратите внимание на то, что вместо обычного равенства я использовал запись с тильдой:
Этот оператор находит слово внутри строки, где слова разделены пробелами.
Подробнее обо всех таких операторах можно прочитать на доке, там очень интересно и наглядно, советую.
#web #theory #useful
Помимо обычных селекторов по классу, элементу, идентификатору, в CSS есть ещё много способов написать более конкретный селектор. Мне очень нравятся варианты селекторов по атрибуту.
Селектор по атрибуту — это дополнительная часть селектора, которая смотрит на любой атрибут тега. Для примера рассмотрим вёрстку:
<main class="content">
<button type="submit">Отправить форму</button>
<a href="#">Пустая строка</a>
</main>
Как выбрать все кнопки типа
submit на странице? Всё просто, нужно использовать специальный селектор по атрибуту. Выглядеть он будет так:button[type=submit]
Или же
button[type="submit"]
В нашем случае, записи идентичны. Подобным же образом можно выбрать, например, все пустые ссылки на странице:
a[href="#"]
Ну и, соответсвенно, этот селектор может быть составным с другими селекторами:
.content button[type="submit"] ~ a[href="#"]
Этот селектор выберет ссылку на нашей импровизированной странице.
Также важно сказать, что можно написать селектор не только по полному совпадению значения. Можно также найти, например, подстроку в строке, да и вообще там достаточно много операторов. Например в вёрстке:
<main class="content">
<a href="#" rel="noopener noreferrer">Защищённая ссылка</a>
</main>
Можно выбрать ссылку следующим селектором:
a[rel~="noreferrer"]
Обратите внимание на то, что вместо обычного равенства я использовал запись с тильдой:
~=.Этот оператор находит слово внутри строки, где слова разделены пробелами.
Подробнее обо всех таких операторах можно прочитать на доке, там очень интересно и наглядно, советую.
#web #theory #useful
👍24❤4🔥4🐳3
Преобразование унарным плюсом
Является ли преобразование унарным плюсом самым быстрым способом преобразования строки в число?
Если коротко давать ответ: да, является. Но не всё так однозначно.
Преобразование унарным плюсом, то есть записью
действительно является сравнительно более быстрым способом преобразования строки в число, чем при использовании глобальных функций
Кроме того, мы не всегда можем получить ожидаемый результат в, казалось бы, самых простых кейсах, например:
В этом случае, то, каким образом работает
Использование унарным плюсом зачастую можно считать плохой практикой и сделать выбор в пользу глобальных функций, не смотря на то, что унарный плюс работает действительно быстрее. Правда, с оговоркой, что быстрее, но не значительно. Разницу в производительности можно заметить только на невероятно больших данных.
Использование же
Кстати, ещё можно преобразовать строку к числу при использовании глобального конструктора числа
Но такой способ будет работать дольше, чем
В своей практике, я использую только глобальные функции для преобразования строки к числу. И вам советую.
#web #javascript #data
Является ли преобразование унарным плюсом самым быстрым способом преобразования строки в число?
Если коротко давать ответ: да, является. Но не всё так однозначно.
Преобразование унарным плюсом, то есть записью
const string = '5'
const number = +string // 5
действительно является сравнительно более быстрым способом преобразования строки в число, чем при использовании глобальных функций
parseInt или parseFloat, но стоит помнить, что такая запись может привести к неожиданным результатам, если строка содержит некорректные символы. Кроме того, мы не всегда можем получить ожидаемый результат в, казалось бы, самых простых кейсах, например:
const string = ""
+string // 0
parseInt(string) // NaN
В этом случае, то, каким образом работает
parseInt, мне кажется более ожидаемым и правильным.Использование унарным плюсом зачастую можно считать плохой практикой и сделать выбор в пользу глобальных функций, не смотря на то, что унарный плюс работает действительно быстрее. Правда, с оговоркой, что быстрее, но не значительно. Разницу в производительности можно заметить только на невероятно больших данных.
Использование же
parseInt и parseFloat даёт более ожидаемый результат и более наглядно. При беглом просмотре кода унарный плюс можно и вовсе не заметить, чего не скажешь о вызове полноценной функции.Кстати, ещё можно преобразовать строку к числу при использовании глобального конструктора числа
Number:const string = "123"
const number = Number(string) // 123
Но такой способ будет работать дольше, чем
parseInt и parseFloat.В своей практике, я использую только глобальные функции для преобразования строки к числу. И вам советую.
#web #javascript #data
👍24🔥7🐳3❤2
Стили именования переменных
Я часто использую такие понятия, как
Вероятно, я что-то забыл, но тут точно собраны самые основные стили наименований.
Спасибо за прочтение, это важно для меня ❤️
Я часто использую такие понятия, как
pascal case или camel case, но внезапно понял, что они очевидны не для всех. Оставляю небольшую шпаргалку со всеми стилями именования: // camel case
const name = "progway"
const getChannelName = () => name
const publicationStatus = ...
// pascal case
const Name = "progway"
const GetChannelName = () => Name
const PublicationStatus = ...
// snake case
const name = "progway"
const get_channel_name = () => name
const publication_status = ...
// flat case
const name = "progway"
const getchannelname = () => name
const publicationstatus = ...
const hashtag = "#iloveit"
// train case (HTTP заголовки)
Access-Control-Allow-Origin
Content-Length
Content-Type
Cache-Control
// kebab case (css свойства)
font-size
background-color
grid-template-columns
Вероятно, я что-то забыл, но тут точно собраны самые основные стили наименований.
Спасибо за прочтение, это важно для меня ❤️
👍40❤13🔥5🐳4