Flexbox Zombies — тренажёр для изучения

Любите игры про зомби? В этой игре нужно установить арбалет и пережить атаки зомби в каждом разделе игры с помощью Flexbox. Flexbox Zombies поможет изучить основы и применить их на практике. Сейчас игра бесплатна после небольшой регистрации:

https://mastery.games/flexboxzombies/chapter/1/level/1

#css #web

@javascriptv

MyJavaScript — полезный ресурс для начинающих фронтенд-разработчиков

На MyJavaScript собраны руководства, шпаргалки, вопросы и другие материалы по JavaScript, TypeScript, React, Next.js, Node.js, Express, Prisma, GraphQL, Docker.

Информация на сайте постоянно обновляется, поэтому вы также можете проверить все обновления и релизы в ЯП. Сохраняйте в закладки, чтобы не потерять:

https://my-js.org/

#фронтенд

@javascriptv

Textarea auto-expand

Автоматическое расширение текстовой области. Реализовано с помощью JavaScript и CSS.

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

https://codepen.io/vsync/pen/nrKwbm

@javascriptv

Скроллим к фрагменту текста с помощью URL

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

Реализуется это довольно легко, так что стоит взять на вооружение. Инструкцию оставили здесь:

https://blog.jim-nielsen.com/2022/scroll-to-text-fragments/

#фронтенд #навигация #url

@javascriptv

Volume button knob 

Кнопка увеличения/уменьшения громкости, написанная на CSS(SCSS), JavaScript(TypeScript)

#button #js #typescript

https://codepen.io/rodzyk/pen/mdxvQby

@javascriptv

tsParticles - Cards Suits Confetti — анимированный фон в виде падающих мастей карт. Реализован с помощью CSS и JavaScript.

https://codepen.io/matteobruni/pen/yLEZZdO

@javascriptv

Lighthouse — открытый инструмент от Google для аудита производительности, доступности и SEO веб-страниц

Основное преимущество Lighthouse — это его мощная аналитика и обширная база знаний. Утилита предлагает подробные отчёты и рекомендации по улучшению качества веб-страниц, основанные на проверенных методах и практиках

В отличие от других инструментов анализа, Lighthouse интегрируется с DevTools в Google Chrome и может быть использован в качестве расширения для браузера или в командной строке. Это заметно упрощает проведение аудита и получение результатов

Стоимость: #бесплатно

#SEO #web

@javascriptv

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