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

Login & Sign Up Form Concept — концепт формы авторизации и регистрации на сайте. Переключение между двумя видами взаимодействия происходит с приятной анимацией.

https://codepen.io/ZuthLonble/pen/RwNZgbR

@javascriptv

iOS Notifications — анимированные оповещения в стиле iOS. Реализованы с помощью SCSS и TypeScript.

https://codepen.io/ykadosh/pen/ZERjpRJ

@javascriptv

Что было добавлено в ECMAScript в 2023 году

ECMAScript — это стандарт языка программирования JavaScript, который устанавливает правила, синтаксис и другие критерии создания JavaScript-кода.

ECMAScript ежегодно дополняется сообществом разработчиков JavaScript и соответствует стандартам ECMA International.
Эти обновления позволяют создавать более качественные и быстрые веб-приложения, а также обеспечивают возможность масштабирования и поддержки кода в будущем.

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

Вот, какие функции были добавлены в ECMAScript в 2023 году.

1. Поиск элемента в массиве
Эта функция позволяет найти нужный элемент — от первого до последнего — в массиве с помощью установленного условия.

const array = [{a: 1, b: 1}, {a: 2, b: 2}, {a: 3, b: 3}, {a: 4, b: 4}]

console.log(array.findLast(n => n)); //result -> {a: 4,b: 4 }

console.log(array.findLast(n => n.a * 5 === 20)); // result -> {a:4,b:4} as the condition is true so it returns the last element.

console.log(array.findLast(n => n.a * 5 === 21)); //result -> undefined as the condition is false so return undefined instead of {a:4,b:4}.

console.log(array.findLastIndex(n => n.a * 5 === 21)); // result -> -1 as the condition is not justified for returning the last element.

console.log(array.findLastIndex(n => n.a * 5 === 20)); // result -> 3 which is the index of the last element as the condition is true.

2. Грамматика Hashbang
Эта функция позволит нам использовать Hashbang/Shebang в некоторых CLI.

Shebang представлен #! и представляет собой специальную строку в начале скрипта, которая сообщает операционной системе, какой интерпретатор использовать при выполнении скрипта.

#!/usr/bin/env node
// in the Script Goal
'use strict';
console.log(2*3);

#!/usr/bin/env node
// in the Module Goal
export {};
console.log(2*2);

Строка #!/usr/bin/env node вызывает исходный файл Node.js напрямую как исполняемый файл.

3. Символы-ключи в WeakMap
Теперь можно использовать уникальные символы в качестве ключей.

До этого обновления WeakMaps можно было использовать в качестве ключей только объекты. Объекты используются в качестве ключей для WeakMaps, потому что они имеют один и тот же аспект идентичности.

Symbol — это единственный примитивный тип в ECMAScript, который позволяет использовать для него уникальные значения. Использовать Symbol теперь можно и в качестве ключа вместо создания нового объекта с помощью WeakMap.

const weak = new WeakMap();

const key = Symbol('my ref');
const someObject = { a:1 };

weak.set(key, someObject);
console.log(weak.get(key));

4. Изменить массив через копирование
Обновление предоставляет дополнительные методы в Array.prototype для внесения изменений в массив, возвращая его новую копию с изменением вместо обновления исходного массива.

Новые введенные функции Array.prototype:

Array.prototype.toReversed()
Array.prototype.toSorted(compareFn)
Array.prototype.toSpliced (start, deleteCount, … items)
Array.prototype.with(index, value)
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9]

/* toReversed */

const reversed = numbers.toReversed();
console.log("reversed", reversed); // "reversed", [9, 8, 7, 6, 5, 4, 3, 2, 1]
console.log("original", numbers); // "original", [1, 2, 3, 4, 5, 6, 7, 8, 9]

/* toSorted */
const sortedArr = numbers.toSorted();
console.log("sorted", sortedArr); // "sorted", [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log("original", numbers); // "original", [1, 2, 3, 4, 5, 6, 7, 8, 9]
/* with */
const replaceWith = numbers.with(1, 100);
console.log("with", replaceWith); // "with", [1, 100, 3, 4, 5, 6, 7, 8, 9]
console.log("original", numbers); // "original", [1, 2, 3, 4, 5, 6, 7, 8, 9]

/* toSpliced */
const splicedArr = numbers.toSpliced(0, 4);
console.log("toSpliced", splicedArr); // "toSpliced", [5, 6, 7, 8, 9]
console.log("original", numbers); // "original", [1, 2, 3, 4, 5, 6, 7, 8, 9]

@javascriptv

​Чистые функции в JavaScript: руководство для начинающих

Функция — это повторно используемый блок кода, который принимает аргументы и возвращает вычисленное значение. А чистая функция всегда возвращает одно и то же значение при одинаковых аргументах и не создает побочных эффектов.

Давайте более подробно рассмотрим, что такое чистые функции и почему они полезны:

https://dmitripavlutin.com/javascript-pure-function/

#javascript

Another Datepicker — нестандартная форма выбора даты. Реализована с помощью SCSS, SVG и JavaScript.

https://codepen.io/aaroniker/pen/MWQjxro

@javascriptv

Paperworld — красивая анимированная 3D сцена. Реализована с помощью CSS, Pug и JavaScript.

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

@javascriptv

Three.js Mobile VR Sonic — бегущий Sonic в 3D пространстве three.js с возможностью перехода в VR режим. Sonic может прыгать и собирать монетки.

https://codepen.io/b29/pen/yQXQrg

@javascriptv

💡Задача: Игра в прыжки

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

Верните true, если вы можете добраться до последнего индекса, или false в противном случае.

Пример:
Ввод: nums = [1,3,1,1,4]
Вывод: true
Объяснение: Переходим на 1 шаг от индекса 0 к 1, затем на 3 шага к последнему индексу.

Ввод: nums = [3,2,1,0,4]
Вывод: false

Решение:

var canJump = function(nums) {
// Base condition...
if(nums.length <= 1)
return true;
// To keep the maximum index that can be reached...
let maximum = nums[0];
// Traverse all the elements through loop...
for(let i = 0; i < nums.length; i++){
//if there is no way to jump to next...
// so we should return false...
if(maximum <= i && nums[i] == 0)
return false;
//update the maximum jump...
if(i + nums[i] > maximum){
maximum = i + nums[i];
}
//maximum is enough to reach the end...
if(maximum >= nums.length-1)
return true;
}
return false;
};

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

@javascriptv

💫 Какой метод глубокого клонирования в JavaScript наиболее эффективный — исследование

В данном исследовании сравниваются различные методы глубокого клонирования в JavaScript, а их эффективность оценивается с помощью серии модульных тестов.

▪Читать

@javascriptv

Carousel with drag and wheel

Карусель с перетаскиванием и прокруткой колеса. Реализована с помощью CSS и JS

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

https://codepen.io/supah/pen/xxJMbbg

@javascriptv