Анимация в браузерах и как с ней работать
Многие разработчики умеют создавать красивые и плавные анимации, но далеко не все понимают, как на самом деле они работают и что происходит «под капотом» браузера в момент их отрисовки и запуска. Вместе с тем, работа с анимацией без знания основных нюансов нередко заканчивается появлением лагов и чрезмерным потреблением ресурсов.
Ссылка
#статьи
Многие разработчики умеют создавать красивые и плавные анимации, но далеко не все понимают, как на самом деле они работают и что происходит «под капотом» браузера в момент их отрисовки и запуска. Вместе с тем, работа с анимацией без знания основных нюансов нередко заканчивается появлением лагов и чрезмерным потреблением ресурсов.
Ссылка
#статьи
const info = {
[Symbol('a')]: 'b'
}
console.log(info)
console.log(Object.keys(info))Какой будет вывод?
Anonymous Quiz
33%
{Symbol('a'): 'b'} and ["{Symbol('a')"]
15%
{} and []
29%
{ a: "b" } and ["a"]
23%
{Symbol('a'): 'b'} and []
Пояснение к предыдущему посту
Symbol не является перечисляемый. Метод Object.keys возвращает все перечисляемые свойства ключа для объекта. Symbol не просматривается таким образом, и возвращается пустой массив. При регистрации всего объекта будут видны все свойства, даже не перечисляемые.
Это одно из многих качеств символа: помимо представления совершенно уникального значения (которое предотвращает случайное столкновение имен в объектах, например, при работе с 2 библиотеками, которые хотят добавить свойства к одному и тому же объекту), вы также можете "скрыть" свойства объектов таким образом (хотя и не полностью. Вы можете получить доступ к символам, используя метод Object.getOwnPropertySymbols()).
Это одно из многих качеств символа: помимо представления совершенно уникального значения (которое предотвращает случайное столкновение имен в объектах, например, при работе с 2 библиотеками, которые хотят добавить свойства к одному и тому же объекту), вы также можете "скрыть" свойства объектов таким образом (хотя и не полностью. Вы можете получить доступ к символам, используя метод Object.getOwnPropertySymbols()).
Не стоит недооценивать HTML
«HTML – это просто», «Разрабатывать фронтенд проще, чем бэкенд», «После реализации бэкенда обновление UI не должно составлять труда», – за время работы в сфере веб-разработки вокруг меня то и дело звучали эти и другие аналогичные утверждения.
И очень часто они вызывали у меня грусть.
Дело в том, что бо́льшую часть времени я проводила за написанием фронтенда, включая работу с HTML, CSS и JavaScript (по факту в основном TypeScript). Когда кто-нибудь говорит мне о «простоте» моей работы, я начинаю думать, что мои навыки не представляют высокой ценности, и меня может легко заменить любой разработчик…
В статье же я решила описать свои размышления, которые рождались в течение последних двух лет во время работы с людьми из разных команд с разным опытом в HTML-разработке и фронтенд-технологиях в целом. Здесь я озвучу несколько основных своих вопросов «Почему?», сопроводив их возможными ответами.
Ссылка
#html
«HTML – это просто», «Разрабатывать фронтенд проще, чем бэкенд», «После реализации бэкенда обновление UI не должно составлять труда», – за время работы в сфере веб-разработки вокруг меня то и дело звучали эти и другие аналогичные утверждения.
И очень часто они вызывали у меня грусть.
Дело в том, что бо́льшую часть времени я проводила за написанием фронтенда, включая работу с HTML, CSS и JavaScript (по факту в основном TypeScript). Когда кто-нибудь говорит мне о «простоте» моей работы, я начинаю думать, что мои навыки не представляют высокой ценности, и меня может легко заменить любой разработчик…
В статье же я решила описать свои размышления, которые рождались в течение последних двух лет во время работы с людьми из разных команд с разным опытом в HTML-разработке и фронтенд-технологиях в целом. Здесь я озвучу несколько основных своих вопросов «Почему?», сопроводив их возможными ответами.
Ссылка
#html
const getList = ([x, ...y]) => [x, y]
const getUser = user => { name: user.name, age: user.age }
const list = [1, 2, 3, 4]
const user = { name: "Lydia", age: 21 }
console.log(getList(list))
console.log(getUser(user))
Пояснение к предыдущему посту
Функция getList получает массив в качестве аргумента. Между скобками функции getList мы сразу же деструктурируем этот массив. Вы можете увидеть это как:
[x, ...y] = [1, 2, 3, 4]
С помощью оставшихся параметров ... y мы помещаем все "оставшиеся" аргументы в массив. Остальные аргументы - это 2, 3 и 4 в этом случае. Значение y является массивом, содержащим все остальные параметры. В этом случае значение x равно 1, поэтому, мы видим в логе [x, y], [1, [2, 3, 4]].
Функция getUser получает объект. В стрелочных функциях нам не нужно писать фигурные скобки, если мы просто возвращаем одно значение. Однако, если вы хотите мгновенно вернуть object из стрелочной функции, вы должны написать его между круглыми скобками, иначе все, что находится между двумя фигурными скобками, будет интерпретироваться как оператор блока. В этом случае код между фигурными скобками не является допустимым кодом JavaScript, поэтому выдается SyntaxError.
Следующая функция вернула бы объект:
const getUser = user => ({ name: ||user.name||, age: user.age })
[x, ...y] = [1, 2, 3, 4]
С помощью оставшихся параметров ... y мы помещаем все "оставшиеся" аргументы в массив. Остальные аргументы - это 2, 3 и 4 в этом случае. Значение y является массивом, содержащим все остальные параметры. В этом случае значение x равно 1, поэтому, мы видим в логе [x, y], [1, [2, 3, 4]].
Функция getUser получает объект. В стрелочных функциях нам не нужно писать фигурные скобки, если мы просто возвращаем одно значение. Однако, если вы хотите мгновенно вернуть object из стрелочной функции, вы должны написать его между круглыми скобками, иначе все, что находится между двумя фигурными скобками, будет интерпретироваться как оператор блока. В этом случае код между фигурными скобками не является допустимым кодом JavaScript, поэтому выдается SyntaxError.
Следующая функция вернула бы объект:
const getUser = user => ({ name:
Ты наконец-то поймешь асинхронность в JS
Сегодня мы поговорим о том, что такое асинхронность в JavaScript и как она работает. Это одна из тех вещей, которые кажутся сложными, но на самом деле довольно просты, как только разберешься.
Асинхронный код в JavaScript выполняется в одном потоке, но не синхронно с основным потоком выполнения. Вместо того, чтобы блокировать выполнение основного кода, асинхронные операции обрабатываются в фоновом режиме. Это позволяет приложению продолжать свою работу без задержек, даже когда выполняются длительные операции, такие как запросы к серверу или обработка файлов. Таким образом, JavaScript обеспечивает отзывчивость приложений, не используя многопоточность, а полагаясь на механизмы асинхронного выполнения.
Ссылка
#js
Сегодня мы поговорим о том, что такое асинхронность в JavaScript и как она работает. Это одна из тех вещей, которые кажутся сложными, но на самом деле довольно просты, как только разберешься.
Асинхронный код в JavaScript выполняется в одном потоке, но не синхронно с основным потоком выполнения. Вместо того, чтобы блокировать выполнение основного кода, асинхронные операции обрабатываются в фоновом режиме. Это позволяет приложению продолжать свою работу без задержек, даже когда выполняются длительные операции, такие как запросы к серверу или обработка файлов. Таким образом, JavaScript обеспечивает отзывчивость приложений, не используя многопоточность, а полагаясь на механизмы асинхронного выполнения.
Ссылка
#js
Пояснение к предыдущему посту
Переменная name содержит значение строки, которая не является функцией, поэтому не может вызываться.
Ошибки типа выдаются, когда значение не соответствует ожидаемому типу. JavaScript ожидал, что name будет функцией, так как мы пытаемся вызвать ее. Однако это была строка, поэтому выдается ошибка TypeError: name не является функцией!
Синтаксические ошибки генерируются, когда вы написали что-то, что не является допустимым JavaScript, например, когда вы написали слово return как retrun. ReferenceErrors генерируется, когда JavaScript не может найти ссылку на значение, к которому вы пытаетесь получить доступ.
Ошибки типа выдаются, когда значение не соответствует ожидаемому типу. JavaScript ожидал, что name будет функцией, так как мы пытаемся вызвать ее. Однако это была строка, поэтому выдается ошибка TypeError: name не является функцией!
Синтаксические ошибки генерируются, когда вы написали что-то, что не является допустимым JavaScript, например, когда вы написали слово return как retrun. ReferenceErrors генерируется, когда JavaScript не может найти ссылку на значение, к которому вы пытаетесь получить доступ.
Шпаргалка для алгособеса — алгоритмическая сложность, структуры данных, методы сортировки и Дейкстра
Так уж повелось, что любой уважающий себя работодатель перенимает передовые^✻ методики FAANG — по этой причине практически во всех IT-собесах есть она: секция алгоритмов. Кто-то ей рад, кто-то не очень, но секция есть и уходить пока не планирует. Поэтому нужно закатать рукава и достойно встретить суровую реальность.
При изучении алгоритмов расслабьтесь и получайте удовольствие, ведь есть ненулевая вероятность, что вам понадобятся полученные знания вне собеса. Кто знает, может однажды умение быстро обходить двоичное дерево поможет спасти вам мир (как и знание регулярок)
Ссылка
#статьи
Так уж повелось, что любой уважающий себя работодатель перенимает передовые^✻ методики FAANG — по этой причине практически во всех IT-собесах есть она: секция алгоритмов. Кто-то ей рад, кто-то не очень, но секция есть и уходить пока не планирует. Поэтому нужно закатать рукава и достойно встретить суровую реальность.
При изучении алгоритмов расслабьтесь и получайте удовольствие, ведь есть ненулевая вероятность, что вам понадобятся полученные знания вне собеса. Кто знает, может однажды умение быстро обходить двоичное дерево поможет спасти вам мир (как и знание регулярок)
Ссылка
#статьи
const output = `${[] && 'Im'}possible!
You should${'' && `n't`} see a therapist after so much JavaScript lol`Какое значение будет на выходе?
Anonymous Quiz
18%
possible! You should see a therapist after so much JavaScript lol
49%
Impossible! You should see a therapist after so much JavaScript lol
11%
possible! You shouldn't see a therapist after so much JavaScript lol
22%
Impossible! You shouldn't see a therapist after so much JavaScript lol
Пояснение к предыдущему посту
[] - истинное значение. С оператором && будет возвращено правое значение, если левое значение является истинным значением. В этом случае левое значение [] является истинным значением, поэтому возвращается 'Im'.
"" - ложное значение. Если левое значение ложно, ничего не возвращается. n't не возвращается.
"" - ложное значение. Если левое значение ложно, ничего не возвращается. n't не возвращается.
1/n: Задачи leetcode JS — «Max Consecutive Ones» (Найти максимальное количество последовательных единиц)
Я столкнулся с тем, что на собеседованиях в некоторые ИТ-компании на Frontend JavaScript требуется решать задачи, и я решил сделать серию статей на тему, как я решил их тем или иным образом. Перед вами — первый текст из этой серии.
Для решения будем использовать язык программирования TypeScript.
Ссылка
#js
Я столкнулся с тем, что на собеседованиях в некоторые ИТ-компании на Frontend JavaScript требуется решать задачи, и я решил сделать серию статей на тему, как я решил их тем или иным образом. Перед вами — первый текст из этой серии.
Для решения будем использовать язык программирования TypeScript.
Ссылка
#js
const one = (false || {} || null)
const two = (null || false || '')
const three = ([] || 0 || true)
console.log(one, two, three)Какое значение будет на выходе?
Anonymous Quiz
14%
false null []
14%
null "" true
53%
{} "" []
18%
null null true
Пояснение к предыдущему посту
С помощью оператора || мы можем вернуть первый истинный операнд. Если все значения ложны, последний операнд возвращается.
(false || {} || null): пустой объект {} является истинным значением. Это первое (и единственное) истинное значение, которое возвращается. one содержит {}.
(null || false || ""): все операнды являются ложными значениями. Это означает, что прошедший операнд "" возвращается. two содержит "".
([] || 0 || ""): пустой массив [] является истинным значением. Это первое истинное значение, которое возвращается. three присвоено [].
(false || {} || null): пустой объект {} является истинным значением. Это первое (и единственное) истинное значение, которое возвращается. one содержит {}.
(null || false || ""): все операнды являются ложными значениями. Это означает, что прошедший операнд "" возвращается. two содержит "".
([] || 0 || ""): пустой массив [] является истинным значением. Это первое истинное значение, которое возвращается. three присвоено [].
Создание Web components на Vue 3
Можно написать на Vue 3 какой-нибудь полезный компонент и захотеть дать возможность использовать его не только в Vue проектах, но и на любых других фронтендах. Сделать это несложно через регистрацию его как web component, или подключение "микро-фронтендом". Оба варианта будут рассмотрены ниже.
Рассмотрим универсализацию на примере release-timeline
При разработке используем Vite с двумя конфигами - один непосредственно для разработки и запуске в Dev режиме на сервере Vite, другой - для билда библиотеки.
Ссылка
#статьи
Можно написать на Vue 3 какой-нибудь полезный компонент и захотеть дать возможность использовать его не только в Vue проектах, но и на любых других фронтендах. Сделать это несложно через регистрацию его как web component, или подключение "микро-фронтендом". Оба варианта будут рассмотрены ниже.
Рассмотрим универсализацию на примере release-timeline
При разработке используем Vite с двумя конфигами - один непосредственно для разработки и запуске в Dev режиме на сервере Vite, другой - для билда библиотеки.
Ссылка
#статьи