Работаем с HTTP API: разбор частых проблем и методы их решения
Время идёт, технологии развиваются, а проблемы, связанные с использованием API, вызывают у многих разработчиков всё те же сложности, что и десятки лет назад. Между тем, рост числа сервисов, которые взаимодействуют друг с другом с помощью данного способа, день ото дня только увеличивается, и неумение надёжно, качественно и безопасно работать с API может привести к опасным сбоям или поломке разрабатываемой вами системы.
Ссылка
#статьи
Время идёт, технологии развиваются, а проблемы, связанные с использованием API, вызывают у многих разработчиков всё те же сложности, что и десятки лет назад. Между тем, рост числа сервисов, которые взаимодействуют друг с другом с помощью данного способа, день ото дня только увеличивается, и неумение надёжно, качественно и безопасно работать с API может привести к опасным сбоям или поломке разрабатываемой вами системы.
Ссылка
#статьи
function nums(a, b) {
if (a > b) console.log('a is bigger')
else console.log('b is bigger')
return
a + b;
}
console.log(nums(4, 2))
console.log(nums(1, 2))Какой будет вывод?
Anonymous Quiz
54%
a is bigger, 6 and b is bigger, 3
24%
a is bigger, undefined and b is bigger, undefined
9%
undefined and undefined
13%
SyntaxError
Пояснение к предыдущему посту
В JavaScript мы не должны явно указывать точку с запятой (;), однако движок JavaScript все равно добавляет их после операторов. Это называется автоматической вставкой точек с запятой. Например, оператором могут быть переменные или ключевые слова, такие как throw, return, break и т.д.
Здесь мы написали инструкцию return и другое значение a + b в новой строке. Однако, поскольку это новая линия, движок не знает, что это на самом деле значение, которое мы хотели бы вернуть. Вместо этого он автоматически добавляет точку с запятой после return. Вы можете увидеть это как:
return;
a + b
Это означает, что a + b никогда не достигается, так как функция перестает выполняться после ключевого слова return. Если значение не возвращается, как здесь, функция возвращает значение undefined. Обратите внимание, что после операторов if / else автоматической вставки нет!
В JavaScript мы не должны явно указывать точку с запятой (;), однако движок JavaScript все равно добавляет их после операторов. Это называется автоматической вставкой точек с запятой. Например, оператором могут быть переменные или ключевые слова, такие как throw, return, break и т.д.
Здесь мы написали инструкцию return и другое значение a + b в новой строке. Однако, поскольку это новая линия, движок не знает, что это на самом деле значение, которое мы хотели бы вернуть. Вместо этого он автоматически добавляет точку с запятой после return. Вы можете увидеть это как:
return;
a + b
Это означает, что a + b никогда не достигается, так как функция перестает выполняться после ключевого слова return. Если значение не возвращается, как здесь, функция возвращает значение undefined. Обратите внимание, что после операторов if / else автоматической вставки нет!
Интеграция React и AngularJS через Webpack Module Federation
Представьте себя в ситуации, когда вы вступаете в проект с задачей развивать огромное легаси приложение, созданное пять лет назад на первой версии Angular. Это приложение напоминает забытый кладезь, о функционировании которого уже никто в компании не имеет представления. В его недрах скрыта система авторизации и множество модулей, управляющих бизнес-логикой, все это сплетено в единую структуру с помощью уже не самого актуального инструмента сборки – Gulp. Как будто этого было недостаточно, зависимости приложения все еще требуют загрузки через bower, что добавляет еще один слой устаревших технологий. В этом контексте ваша задача обретает не только технический, но и почти археологический аспект – вам предстоит не просто восстановить работоспособность этой цифровой реликвии, но и обновить ее, не потеряв при этом ценности закодированных в ней знаний и опыта.
Ссылка
#статьи
Представьте себя в ситуации, когда вы вступаете в проект с задачей развивать огромное легаси приложение, созданное пять лет назад на первой версии Angular. Это приложение напоминает забытый кладезь, о функционировании которого уже никто в компании не имеет представления. В его недрах скрыта система авторизации и множество модулей, управляющих бизнес-логикой, все это сплетено в единую структуру с помощью уже не самого актуального инструмента сборки – Gulp. Как будто этого было недостаточно, зависимости приложения все еще требуют загрузки через bower, что добавляет еще один слой устаревших технологий. В этом контексте ваша задача обретает не только технический, но и почти археологический аспект – вам предстоит не просто восстановить работоспособность этой цифровой реликвии, но и обновить ее, не потеряв при этом ценности закодированных в ней знаний и опыта.
Ссылка
#статьи
class Person {
constructor() {
this.name = 'Lydia'
}
}
Person = class AnotherPerson {
constructor() {
this.name = 'Sarah'
}
}
const member = new Person()
console.log(member.name)Какой будет вывод?
Anonymous Quiz
29%
"Lydia"
29%
"Sarah"
32%
Error: cannot redeclare Person
10%
SyntaxError
Пояснение к предыдущему посту
Мы можем установить классы равными другим классам/конструкторам функций. В этом случае мы устанавливаем Person равным AnotherPerson. Свойство name этого конструктора - Sarah, поэтому свойство name для нового экземпляра класса Person member - это Sarah.
Анимация в браузерах и как с ней работать
Многие разработчики умеют создавать красивые и плавные анимации, но далеко не все понимают, как на самом деле они работают и что происходит «под капотом» браузера в момент их отрисовки и запуска. Вместе с тем, работа с анимацией без знания основных нюансов нередко заканчивается появлением лагов и чрезмерным потреблением ресурсов.
Ссылка
#статьи
Многие разработчики умеют создавать красивые и плавные анимации, но далеко не все понимают, как на самом деле они работают и что происходит «под капотом» браузера в момент их отрисовки и запуска. Вместе с тем, работа с анимацией без знания основных нюансов нередко заканчивается появлением лагов и чрезмерным потреблением ресурсов.
Ссылка
#статьи
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-собесах есть она: секция алгоритмов. Кто-то ей рад, кто-то не очень, но секция есть и уходить пока не планирует. Поэтому нужно закатать рукава и достойно встретить суровую реальность.
При изучении алгоритмов расслабьтесь и получайте удовольствие, ведь есть ненулевая вероятность, что вам понадобятся полученные знания вне собеса. Кто знает, может однажды умение быстро обходить двоичное дерево поможет спасти вам мир (как и знание регулярок)
Ссылка
#статьи