GET запросы на практике: правила, принципы и примеры
Я думаю, что вы не раз уже гуглили, заглядывали в статьи, манифесты IT-гигантов о лучших практиках проектирования API. Я тоже.
Но в большинстве из них всё ограничивается описанием URL ресурса, мотивацией использовать пагинацию, сложными словами про кэширование и SSL. Это, безусловно, необходимо для общего понимания технологий, но практически не помогает, когда ты сидишь перед пустой страницей и надо начать “проектировать контракт”.
Ссылка
#статьи
Я думаю, что вы не раз уже гуглили, заглядывали в статьи, манифесты IT-гигантов о лучших практиках проектирования API. Я тоже.
Но в большинстве из них всё ограничивается описанием URL ресурса, мотивацией использовать пагинацию, сложными словами про кэширование и SSL. Это, безусловно, необходимо для общего понимания технологий, но практически не помогает, когда ты сидишь перед пустой страницей и надо начать “проектировать контракт”.
Ссылка
#статьи
👍7❤1🔥1
March 11, 2024
const myPromise = Promise.resolve(Promise.resolve('Promise!'));
function funcOne() {
myPromise.then(res => res).then(res => console.log(res));
setTimeout(() => console.log('Timeout!', 0));
console.log('Last line!');
}
async function funcTwo() {
const res = await myPromise;
console.log(await res);
setTimeout(() => console.log('Timeout!', 0));
console.log('Last line!');
}
funcOne();
funcTwo();
🤯10🔥1
March 12, 2024
March 12, 2024
Пояснение к предыдущему посту
Сначала мы вызываем funcOne. В первой строке funcOne мы вызываем асинхронную функцию setTimeout, из которой обратный вызов отправляется в веб-API.
Затем мы вызываем обещание myPromise, которое является асинхронной операцией.
И обещание, и тайм-аут являются асинхронными операциями, функция продолжает работать, пока она занята выполнением обещания и обработкой обратного вызова setTimeout. Это означает, что Last line 1! регистрируется первой, так как это не асинхронная операция.
Поскольку стек вызовов еще не пуст, функция setTimeout и обещание в funcOne еще не могут быть добавлены в стек вызовов.
В funcTwo переменная res получает Promise, потому что Promise.resolve(Promise.resolve('Promise')) эквивалентно Promise.resolve('Promise'), так как разрешение обещания просто разрешает его стоимость. await в этой строке останавливает выполнение функции до тех пор, пока она не получит разрешение промиса, а затем продолжает работать синхронно до завершения, поэтому Promise 2!, а затем Last line 2! регистрируются, а setTimeout отправляется в Web API.
Тогда стек вызовов пуст. Промисы — это микрозадачи, поэтому они решаются первыми, когда стек вызовов пуст, поэтому Promise 1! регистрируется.
Теперь, поскольку funcTwo выталкивается из стека вызовов, стек вызовов пуст. Обратные вызовы, ожидающие в очереди (() => console.log("Timeout 1!") из funcOne, и () => console.log("Timeout 2!") из funcTwo) добавляются в стек вызовов один за другим. Первый обратный вызов регистрирует Timeout 1! и удаляется из стека. Затем второй обратный вызов регистрирует Timeout 2! и удаляется из стека.
Затем мы вызываем обещание myPromise, которое является асинхронной операцией.
И обещание, и тайм-аут являются асинхронными операциями, функция продолжает работать, пока она занята выполнением обещания и обработкой обратного вызова setTimeout. Это означает, что Last line 1! регистрируется первой, так как это не асинхронная операция.
Поскольку стек вызовов еще не пуст, функция setTimeout и обещание в funcOne еще не могут быть добавлены в стек вызовов.
В funcTwo переменная res получает Promise, потому что Promise.resolve(Promise.resolve('Promise')) эквивалентно Promise.resolve('Promise'), так как разрешение обещания просто разрешает его стоимость. await в этой строке останавливает выполнение функции до тех пор, пока она не получит разрешение промиса, а затем продолжает работать синхронно до завершения, поэтому Promise 2!, а затем Last line 2! регистрируются, а setTimeout отправляется в Web API.
Тогда стек вызовов пуст. Промисы — это микрозадачи, поэтому они решаются первыми, когда стек вызовов пуст, поэтому Promise 1! регистрируется.
Теперь, поскольку funcTwo выталкивается из стека вызовов, стек вызовов пуст. Обратные вызовы, ожидающие в очереди (() => console.log("Timeout 1!") из funcOne, и () => console.log("Timeout 2!") из funcTwo) добавляются в стек вызовов один за другим. Первый обратный вызов регистрирует Timeout 1! и удаляется из стека. Затем второй обратный вызов регистрирует Timeout 2! и удаляется из стека.
👍9🤯3❤1
March 12, 2024
Визуализация JavaScript: цикл событий
JavaScript является однопоточным: одновременно может выполняться только одна задача. Обычно в этом нет ничего страшного, но теперь представьте, что вы выполняете задачу, которая занимает 30 секунд... Да... Во время этой задачи мы ждем 30 секунд, прежде чем что-то еще может произойти (JavaScript по умолчанию запускается в главном потоке браузера, поэтому весь интерфейс завис)
В этой статье хорошо объясняется event loop с визуализацией
Ссылка(en)
#js
JavaScript является однопоточным: одновременно может выполняться только одна задача. Обычно в этом нет ничего страшного, но теперь представьте, что вы выполняете задачу, которая занимает 30 секунд... Да... Во время этой задачи мы ждем 30 секунд, прежде чем что-то еще может произойти (JavaScript по умолчанию запускается в главном потоке браузера, поэтому весь интерфейс завис)
В этой статье хорошо объясняется event loop с визуализацией
Ссылка(en)
#js
👍5❤1👎1🔥1🤡1
March 12, 2024
March 13, 2024
Какое из перечисленных действий может модифицировать объект person?
Anonymous Quiz
34%
person.name = "Evan Bacon"
10%
person.age = 21
16%
delete person.name
39%
Object.assign(person, { age: 21 })
👍5🔥1
March 13, 2024
Сборка мусора в V8
В этой статье мы детально разберем процесс сборки мусора движком V8. Познакомимся с понятиями поколений, Minor и Major Garbage Collection, посмотрим, как аллоцируются, трассируются и маркируются объекты в памяти. Что происходит с пустыми областями после очистки и как выполняется сборка мусора в фоновом режиме.
Ссылка
#статьи
В этой статье мы детально разберем процесс сборки мусора движком V8. Познакомимся с понятиями поколений, Minor и Major Garbage Collection, посмотрим, как аллоцируются, трассируются и маркируются объекты в памяти. Что происходит с пустыми областями после очистки и как выполняется сборка мусора в фоновом режиме.
Ссылка
#статьи
👍5❤1😱1👨💻1
March 13, 2024
const person = {
name: 'Lydia Hallie',
address: {
street: '100 Main St',
},
};
Object.freeze(person);
🤯8
March 14, 2024
Какое из перечисленных действий может модифицировать объект person?
Anonymous Quiz
19%
person.name = "Evan Bacon"
15%
delete person.address
51%
person.address.street = "101 Main St"
15%
person.pet = { name: "Mara" }
March 14, 2024
Пояснение к предыдущему посту
С помощью метода Object.freeze мы можем заморозить объект. Свойства не могут быть добавлены, изменены или удалены.
Однако, это неглубоко замораживает объект. Замораживаются только непосредственные свойства объекта. Если свойством является другой объект(в нашем примере address), свойства этого объекта не замораживаются и могут быть изменены.
Однако, это неглубоко замораживает объект. Замораживаются только непосредственные свойства объекта. Если свойством является другой объект(в нашем примере address), свойства этого объекта не замораживаются и могут быть изменены.
❤10🔥3
March 14, 2024
Модульность в JavaScript: CommonJS, AMD, ES Modules
Начало истории модульности в JavaScript положило хаос: глобальные переменные, конфликты имен и сложности с зависимостями. Со временем сообщество предложило несколько подходов для организации модулей, начиная от CommonJS, которое легло в основу Node.js, до AMD, предпочтительного для асинхронной загрузки кода в браузерах. И приближаясь к настоящему времени появился ES Modules стандартизированный и встроенный в язык механизма модулей, который стал частью ECMAScript в 2015 году.
В этой статье рассмотрим кратко про CommonJS, AMD, и наконец - как появился ES Modules.
Ссылка
#js
Начало истории модульности в JavaScript положило хаос: глобальные переменные, конфликты имен и сложности с зависимостями. Со временем сообщество предложило несколько подходов для организации модулей, начиная от CommonJS, которое легло в основу Node.js, до AMD, предпочтительного для асинхронной загрузки кода в браузерах. И приближаясь к настоящему времени появился ES Modules стандартизированный и встроенный в язык механизма модулей, который стал частью ECMAScript в 2015 году.
В этой статье рассмотрим кратко про CommonJS, AMD, и наконец - как появился ES Modules.
Ссылка
#js
👍3❤1🔥1
March 14, 2024
Web3 приложение Twitter на React.js + Solidity | часть 1
Hello, в этой статье постараюсь подробно показать процесс создания dApp приложения на примере Twitter. В первой части мы подготовим проект, напишем смарт-контракт и развернем его в частной сети. Во второй части напишем frontend и настроим взаимодействие со смарт-контрактом.
Ссылка
#статьи
Hello, в этой статье постараюсь подробно показать процесс создания dApp приложения на примере Twitter. В первой части мы подготовим проект, напишем смарт-контракт и развернем его в частной сети. Во второй части напишем frontend и настроим взаимодействие со смарт-контрактом.
Ссылка
#статьи
👍5🔥3❤1👨💻1
March 15, 2024
const add = x => x + x;
function myFunc(num = 2, value = add(num)) {
console.log(num, value);
}
myFunc();
myFunc(3);
🤯10
March 16, 2024
Что будет на выходе?
Anonymous Quiz
60%
2 4 and 3 6
20%
2 NaN and 3 NaN
14%
2 Error and 3 6
7%
2 4 and 3 Error
March 16, 2024
Пояснение к предыдущему посту
Во-первых, мы вызваем myFunc() без передачи каких-либо аргументов. Поскольку мы не передаем аргументы, num и value получают свои значения по умолчанию: num равно 2, а value возвращаемое значение функции add. В функцию add мы передаем в качестве аргумента num со значением 2. add возвращает 4, что является значением value.
Затем мы вызваем myFunc(3) и передаем значение 3 в качестве значения аргумента num. Мы не передаем аргумент для value. Поскольку мы не передаем значение для аргумента value, он получаеи значение по умолчанию: возвращаемое значение функции add. В add мы передаем num, значение которого равно 3. add возвращает 6, что является значением value.
Затем мы вызваем myFunc(3) и передаем значение 3 в качестве значения аргумента num. Мы не передаем аргумент для value. Поскольку мы не передаем значение для аргумента value, он получаеи значение по умолчанию: возвращаемое значение функции add. В add мы передаем num, значение которого равно 3. add возвращает 6, что является значением value.
👍9
March 16, 2024
March 16, 2024
class Counter {
#number = 10
increment() {
this.#number++
}
getNum() {
return this.#number
}
}
const counter = new Counter()
counter.increment()
console.log(counter.#number)
March 17, 2024
👍8
March 17, 2024
Web3 приложение Twitter на React.js + Solidity | часть 2
Hello, в первой части был подготовлен проект, подключены кошельки и написан backend на Solidity, значит пришло время писать frontend на React.
Проект далёк от продакшена и является простым примером для новичков, предназначенным для демонстрации взаимодействия с смарт-контрактом через веб-приложение.
Ссылка
#статьи
Hello, в первой части был подготовлен проект, подключены кошельки и написан backend на Solidity, значит пришло время писать frontend на React.
Проект далёк от продакшена и является простым примером для новичков, предназначенным для демонстрации взаимодействия с смарт-контрактом через веб-приложение.
Ссылка
#статьи
❤🔥5👍2🔥1
March 17, 2024
const person = {
name: 'Lydia Hallie',
hobbies: ['coding'],
};
function addHobby(hobby, hobbies = person.hobbies) {
hobbies.push(hobby);
return hobbies;
}
addHobby('running', []);
addHobby('dancing');
addHobby('baking', person.hobbies);
console.log(person.hobbies);
🤯2
March 18, 2024