JavaScript: визуализация Event Loop

Одной из ключевых особенностей JavaScript является способность обрабатывать асинхронные операции с использованием цикла событий. По сути, цикл событий — это то, что позволяет JavaScript обрабатывать несколько задач одновременно, не дожидаясь завершения одной задачи, прежде чем переходить к следующей.

В этой статье с помощью визуализации рассматривается, как работает Event Loop:

https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif

#js

Bokeh Lighting Background — "объемный" фон с анимацией. Реализован с помощью CSS и JavaScript.

https://codepen.io/wakana-k/pen/YzjYzJE

@javascriptv

Grainy & Gradients text

Анимация текста с эффектом градиента, написанная на SCSS, с применением JavaScript

https://codepen.io/LukyVj/pen/poOjqBv

#codepen #scss #javascript

@javascriptv

Just Ice — анимированная сцена с объемным кубиком льда. Реализована с помощью CSS, Pug и JavaScript.

https://codepen.io/atzedent/pen/eYKPGQr

@javascriptv

📌 Задача с leetcode. Max Area of Island

Максимальная площадь острова

Сложность: Средняя

Условие задачи: Условие задачи:

Дан двумерный массив размера m x n. "1" отвечает за сушу, "0" - за океан. Необходимо опеределить максмимальную площадь острова из островов, расположенных на карте.

Островом считается территория, образованная из "1", расположенных сверху, справа, снизу и слева относительно друг друга.

Пример:

Ввод: grid = [[0,0,1,0,0,0,0,1,0,0,0,0,0],[0,0,0,0,0,0,0,1,1,1,0,0,0],[0,1,1,0,1,0,0,0,0,0,0,0,0],[0,1,0,0,1,1,0,0,1,0,1,0,0],[0,1,0,0,1,1,0,0,1,1,1,0,0],[0,0,0,0,0,0,0,0,0,0,1,0,0],[0,0,0,0,0,0,0,1,1,1,0,0,0],[0,0,0,0,0,0,0,1,1,0,0,0,0]]

Вывод: 6

Ввод: grid = [[0,0,0,0,0,0,0,0]]

Вывод: 0

Решение

/**
* @param {number[][]} grid
* @return {number}
*/
var maxAreaOfIsland = function(grid) {
const ROWS = grid.length, COLUMNS = grid[0].length;

const DFS = (row, column) => {
const stack = [[row, column]];
let currRow, currColumn, resultArea = 0;
while (stack.length !== 0){
[currRow, currColumn] = stack.pop();
if (grid[currRow][currColumn] !== 1)
continue;

grid[currRow][currColumn] = 2;
resultArea++;
if (currRow + 1 < ROWS)
stack.push([currRow + 1, currColumn]);
if (currRow - 1 >= 0)
stack.push([currRow - 1, currColumn]);
if (currColumn + 1 < COLUMNS)
stack.push([currRow, currColumn + 1]);
if (currColumn - 1 >= 0)
stack.push([currRow, currColumn - 1]);
}
return resultArea;
};

let maxArea = 0;
for (let r = 0; r < ROWS; r++){
for (let c = 0; c < COLUMNS; c++){
if (grid[r][c] === 1){
maxArea = Math.max(maxArea, DFS(r, c));
}
}
}
return maxArea;
};

Пишите свое решение в комментариях👇

@javascriptv

💡Задача "Коко ест бананы"

Условие: обезьяна по имени Коко любит бананы. Есть n кол-во связок бананов, где i-ая связка содержит piles[i] бананов. Смотритель зоопарка ушел и вернется через h часов.

Коко может поедать бананы с скоростью k бананов в час. Если в связке менее k бананов, она поедает всю связку и более в этот час не ест.

Коко кушает медленно, но уверенно: обезьяна нацелена на съедение всех бананов до возвращения смотрителя.

Необходимо вычислить минимальное число k, такое что все бананы будут съедены за h часов.

Пример:

Ввод: piles = [3,6,7,11], h = 8

Вывод: 4

Ввод: piles = [30,11,23,4,20], h = 5

Вывод: 30

Решение:

/**
* @param {number[]} piles
* @param {number} speed
* @param {number} h
* @return {boolean}
*/
const canEatAll = (piles, speed, h) => {
let totalTime = 0;
for (const bananas of piles) {
totalTime += Math.ceil(bananas / speed);
if (totalTime > h) {
return false;
}
}
return true;
};

/**
* @param {number[]} piles
* @param {number} h
* @return {number}
*/
var minEatingSpeed = function (piles, h) {
let left = 1, right = Math.max(...piles);
while (left <= right) {
const mid = Math.floor(left + (right - left) / 2);
if (canEatAll(piles, mid, h)) {
right = mid - 1;
} else {
left = mid + 1;
}
}
return left;
};

Пишите свое решение в комментариях👇

@javascriptv

WebGL Apple Cards — красивые анимированные карточки с эффектом при наведении. Реализованы с помощью CSS и JavaScript.

https://codepen.io/smpnjn/pen/mdrWPpK

@javascriptv

Инструменты фронтенд-разработчика — ESLint

ESLint — это популярный JavaScript-линтер с открытым исходным кодом, который используется для анализа кода и выявления в нём ошибок.

Также ESLint предоставляет разработчикам набор правил, которые могут быть настроены в соответствии с конкретными потребностями проекта или команды. По сути, благодаря этому инструменту намного проще поддерживать стилистику кода и избегать базовых ошибок:

https://eslint.org/

#js

@javascriptv

💡Задача "Самый короткий мост"

Условие: на вход подается матрица, в которой 1 - суша, 0 - вода.

Остров представляет из себя совокупность частей суши, соединенных в четырех направлениях. На решетке существуют только два острова.

Можно изменить 0 на 1 для соединения двух островов в один.

Необходимо посчитать количество смен нулей на единицу для соединения двух островов.

Пример:

Ввод: grid = [[0,1],[1,0]]

Вывод: 1

Объяснение:

Ввод: grid = [[0,1,0],[0,0,0],[0,0,1]]

Вывод: 2

Решение

Пишите свое решение в комментариях👇

@javascriptv

Image Hover — карточки с эффектом при наведении. Реализованы с помощью CSS и JavaScript.

https://codepen.io/littlesnippets/pen/wzerbP

@javascriptv

💡Задача "Поиск в повернутом отсортированном массиве"

Условие: дан массив, сдвинутый относительно опорного элемента, который неизвестен ( массив после сдвига относительно опорного элемента имеет следующий вид: [nums[k], nums[k+1], ..., nums[n-1], nums[0], nums[1], ..., nums[k-1]])

Массив [0,1,2,4,5,6,7], имея опорный элемент 3, будет выглядеть следующим образом: [4,5,6,7,0,1,2].

Необходимо осуществить поиск целевого элемента в сдвинутом массиве, определив его индекс, или же вывести -1 при его отсутствии.

Решение должно быть за O(log n) по времени.

Пример:

Ввод: nums = [4,5,6,7,0,1,2], target = 0

Вывод: 4

Ввод: nums = [4,5,6,7,0,1,2], target = 3

Вывод: -1

Решение

Пишите свое решение в комментариях👇

@javascriptv

​Руководство по Solid JS

Solid JS — это реактивная JavaScript-библиотека для создания пользовательских интерфейсов. Она однократно компилирует шаблоны, а при изменении состояния приложения выполняется только тот код, который необходим для визуализации этого изменения.

Видео-руководство по Solid JS на примерах знакомит со всеми аспектами использования этой библиотеки:

https://www.youtube.com/playlist?list=PL4cUxeGkcC9gU_GvFygZFu0aBysPilkbB

#js

💡Задача "Максимально раздвижное окно"

Условие: дан целочисленный массив, а также размер k подмассива, начинающегося от левой границы, и заканчивающегося в процессе выполнения алгоритма у правой границы. На каждом шаге можно просматривать k последовательных элементов скользящего массива. На каждом шаге надо определить максимальное значение скользящего.

Пример:

Ввод: nums = [1,3,-1,-3,5,3,6,7], k = 3
Вывод: [3,3,5,5,6,7]

Объяснение:
Скользящее на каждой итерации Max
-------------------------- -----
[1 3 -1] -3 5 3 6 7 3
1 [3 -1 -3] 5 3 6 7 3
1 3 [-1 -3 5] 3 6 7 5
1 3 -1 [-3 5 3] 6 7 5
1 3 -1 -3 [5 3 6] 7 6
1 3 -1 -3 5 [3 6 7] 7

Ввод: nums = [1], k = 1
Вывод: [1]

Решение

Пишите свое решение в комментариях👇

@javascriptv

TOASTS

Отличный пример реализации всплывающих уведомлений: информационное, предупреждающее уведомления и уведомление об успехе.

#javascript #css

https://codepen.io/mrtrimble/pen/mdEgzzR

@javascriptv

💡Задача "Подсчет хороших узлов в двоичном дереве"

Условие: дано бинарное дерево, необходимо посчитать количество качественных узлов (Х) по пути из корня до узла Х.

Качественным элементом считается такой узел, значение которого больше значения родительского узла.

Пример:

Ввод: root = [3,1,4,3,null,1,5]
Вывод: 4
Объяснение: *качественные узлы помечены голубым цветом на вложении.

Решение:

// Time complexity: O(n)
// Space complexity: O(n)

var goodNodes = function(root) {
let count = 0;

function dfs(root, max) {
if (root == null)
return;

if (root.val >= max) {
max = root.val;
count++;
}

dfs(root.left, max);
dfs(root.right, max);
}

dfs(root, root.val);
return count;
};

Пишите свое решение в комментариях👇

@javascriptv

Section design with hover effect

Адаптивные карточки с красивым анимированным фоном при наведении. Реализованы с помощью CSS и JavaScript.

https://codepen.io/uiswarup/pen/BaaexdO

#js #анимация #css #javascript

@javascriptv

🔥 100+ уникальных шаблонов CSS | Лучшая коллекция

https://css-pattern.com/

@javascriptv

4 функциональные концепции, которые следует знать каждому разработчику JavaScript

Функциональное программирование — один из философских подходов при разработке программного обеспечения, который захватил мир JavaScript. Несмотря на то что функциональное программирование берет начало из таких языков, как Haskell и Lisp, оно все больше ассоциируется с разработчиками JavaScript, и не зря. Как мы вскоре узнаем, JavaScript нативно реализует все функциональные концепции, о которых будет идти речь в этой статье. Возможно, вы уже используете некоторые из этих методов, даже не подозревая об этом.

Но что именно они собой представляют и как разработчики JavaScript используют их для улучшения кода? Рассмотрим 4 концепции функционального программирования, которые можно легко реализовать в JavaScript.

•Читать

@javascriptv

💡Задача "Ближайшая сумма трех"

Условие задачи: дан целочисленный массив и целевое значение суммы. Необходимо найти три числа из массива, которые либо в результате суммирования равны значению целевой суммы либо же максимально близки к ней по модулю.

Каждый массив имеет единственное решение.

Пример:

Ввод: nums = [-1,2,1,-4], target = 1
Вывод: 2
Объяснение: (-1 + 2 + 1 = 2)

Ввод: nums = [0,0,0], target = 1
Вывод: 0


Решение:
1. Сортировка входного массива
2. Используйте два указателя влево и вправо для вычисления локальной суммы, сравните цель с локальной суммой

/**
* @param {number[]} nums
* @param {number} target
* @return {number}
*/
var threeSumClosest = function(nums, target) {
nums.sort((a,b)=>a-b);
let closest = Infinity;
for (let i=0;i<nums.length-2;i++) {
let left = i+1; right = nums.length-1;
while (left < right) {
let localSum = nums[i] + nums[left] + nums[right];
if (Math.abs(localSum - target) < Math.abs(closest - target)) closest = localSum;
if (localSum > target) right--;
else left++;
}
}
return closest;
};

Пишите свое решение в комментариях👇

@javascriptv

​Введение в JavaScript Temporal API

Реализация объекта Date() в JavaScript была скопирована непосредственно из Java в 1995 году. Два года спустя Java отказалась от неё, но в JavaScript она осталась для обратной совместимости. При этом Date() крайне неудобен и часто непредсказуем, а API оставляет желать лучшего.

К счастью, есть Temporal API, которое решает эту проблему. Подробнее о нём:

https://webdevblog.ru/vvedenie-v-javascript-temporal-api/

#javascript