Верстка карточек в стиле masonry. Анимации созданы при помощи библиотеки gsap.
https://codepen.io/pehaa/pen/YzreJZG
Добро пожаловать на канал Senior Frontend Developer | JavaScript, React, HTML & CSS! Здесь вы найдете множество полезных материалов и обновлений из мира фронтенд-разработки. Наша цель - помочь вам стать опытным frontend разработчиком, овладев технологиями JavaScript, React, HTML и CSS. Мы регулярно публикуем новости, статьи, уроки и советы от опытных специалистов. Если вы хотите улучшить свои навыки в области фронтенда, то наш канал - идеальное место для этого! Присоединяйтесь к нам прямо сейчас и начните свой путь к успешной карьере в разработке веб-приложений. Для всех вопросов о сотрудничестве обращайтесь к администратору @adv_and_pr. Также вы можете найти нас на бирже Telegram по ссылке: https://telega.in/c/senior_front
14 Feb, 20:40
13 Feb, 20:49
12 Feb, 20:10
AnimatedPieChart
, который предназначен для создания анимированной круговой диаграммы на основе данных, предоставленных пользователем. Этот код использует SVG и основан на математических вычислениях для отображения и анимации диаграммы.draw
) и для описания дуги (describeArc
) на основе заданных параметров. Он также использует метод polarToCartesian
для преобразования полярных координат в декартовы координаты.AnimatedPieChart
с заданными данными и вызывается метод draw
для отрисовки диаграммы.11 Feb, 21:05
11 Feb, 13:54
10 Feb, 20:56
front
, back
, left
, right
, top
и bottom
), и каждой из них применяются определенные цвета фона и тени. Коробка вращается при взаимодействии пользователя (при щелчке на поверхность top
). Это может научить основам создания 3D-объектов с помощью CSS.top
коробки. Это демонстрирует, как с помощью переходов и анимаций CSS можно создавать интерактивные эффекты.09 Feb, 21:02
07 Feb, 15:23
06 Feb, 19:46
axios
или другую библиотеку для выполнения HTTP-запросов к Twitch API. StreamList
для отображения списка стримов. Подключите компонент к Redux-хранилищу и получите данные о стримах через Redux-действия. Отобразите полученные данные на странице вашего приложения. StreamList
в вашем приложении, чтобы отображать список стримов на странице.06 Feb, 15:04
05 Feb, 21:08
05 Feb, 15:14
05 Feb, 15:05
<main>, <div>, <img>, <h2>, <nav>, <a>, <button>
используются для создания структуры и контента страницы. .item-holder
задают различные свойства, такие как z-index, position, padding, width, display, justify-content,
и другие, для создания фиксированной панели с текстом и ссылками.04 Feb, 20:51
03 Feb, 18:14
02 Feb, 19:53
01 Feb, 18:28
31 Jan, 19:12
<figure>
, внутри которого располагаются три <div>
элемента - .sun
, .lake
и .moon
.<body>
, задается размер сцены и грид для размещения элементов по центру экрана..moon
: Анимация движения луны вверх на 350px по вертикали за 10 секунд..sun
: Анимация движения солнца на 200px вниз и на 350px влево за 2 секунды с кастомной функцией CustomEase
для плавности движения. Затем солнце перемещается вправо на 340px и обратно с повторением и эффектом "yoyo" (поочередное движение туда и обратно). Затем солнце движется вниз на 300px за 1.5 секунды.<figure>
: Изменение фонового цвета контейнера на rgb(2,0,43)
с задержкой 0.5 секунды и продолжительностью 3 секунды. Затем фон меняется на черный (значение black
) с задержкой 9 секунд и продолжительностью 3 секунды..lake
: Изменение цвета озера на rgb(1,3,49)
с задержкой 8 секунд и продолжительностью 1 секунда.30 Jan, 19:38
29 Jan, 21:01
26 Jan, 18:41
24 Jan, 19:47
N
- натуральное число, где 0 <= N <= 10^9
N
23 Jan, 20:20
22 Jan, 18:31
m
x n
, где каждая ячейка представляет собой клетку корабля «X» или пустую клетку «.».board
— символьная матрица, содержащая символы ‘.’, ‘X’. Размер сторон матрицы от 1 до 100.board = [
[‘X’, ‘.’, ‘.’, ‘X’],
[‘.’, ‘.’, ‘.’, ‘X’],
[‘.’, ‘.’, ‘.’, ‘X’]]
Output: 2
21 Jan, 19:49
20 Jan, 18:26
19 Jan, 18:36
18 Jan, 20:44
16 Jan, 18:45
15 Jan, 15:37
14 Jan, 17:14
13 Jan, 12:46
12 Jan, 15:34
11 Jan, 19:29
10 Jan, 20:40
09 Jan, 19:33
о
не имеет свойства toString
, обращение к этому свойству не вызовет ошибки. Если определенного свойства нет в объекте, его поиск осуществляется сначала в прототипе объекта, затем в прототипе прототипа объекта и так до тех пор, пока свойство не будет найдено. Это называется цепочкой прототипов. На вершине цепочки прототипов находится Object.prototype.07 Jan, 18:24
06 Jan, 18:18
let num = 100;
let RupeeFormatter = new Intl.NumberFormat("en-IN",
{style: "currency", currency: "INR"})
let RupeeFormatted = RupeeFormatter.format(num);
console.log(RupeeFormatted)
//
₹100
let USDFormatter = new Intl.NumberFormat("en-IN",
{style: "currency", currency: "USD"})
let USDFormatted = USDFormatter.format(num)
console.log(USDFormatted)
// $100
let user = {}
let name = user.name ?? "Anonymous"
console.log(name)
// "Anonymous"
let arr = [["name", "Alice"], ["age", 25]]
let obj = Object.fromEntries(arr);
console.log(obj)
// {name: "Alice", age: 25}
let arr = [1, [2, [3, [4]]]];
let flat = arr.flat(Infinity)
console.log(flat)
// [1, 2, 3, 4]
let user = null
let age = user?.age
console.log(age)
// undefined
let arr = [1, 2, 3, 4, 5]
let sum = arr.reduce((a, b) => a + b)
console.log(sum)
// 15
let str = "js".repeat(10)
console.log(str)
// 'jsjsjsjsjsjsjsjsjsjs'
let str = "Hello"
let arr = Array.from(str)
console.log(arr)
// ["H", "e", "l", "l", "o"]
let hyp = Math.hypot(3, 4);
console.log(hyp)
// 5
let obj1 = {a: 1, b: 2};
let obj2 = {c: 3, d: 4};
let obj3 = Object.assign(obj1, obj2)
console.log(obj3)
// {a: 1, b: 2, c: 3, d: 4}
06 Jan, 15:00
06 Jan, 14:17
05 Jan, 18:45
04 Jan, 18:12
30 Dec, 16:53
28 Dec, 20:42
27 Dec, 20:41
26 Dec, 18:32
25 Dec, 19:47
24 Dec, 18:44
23 Dec, 20:27
22 Dec, 18:31
21 Dec, 17:17
20 Dec, 18:28
19 Dec, 18:14
18 Dec, 17:58
17 Dec, 10:53
16 Dec, 19:23
15 Dec, 19:41
14 Dec, 17:18
13 Dec, 19:15
12 Dec, 18:34
11 Dec, 18:30
11 Dec, 14:23
10 Dec, 20:08
09 Dec, 18:13
08 Dec, 19:46
07 Dec, 19:12
07 Dec, 12:53
npm install @react-three/drei
01 Dec, 20:03
30 Nov, 10:31
28 Nov, 13:27
justify-content
и align-items
:nth-child
.27 Nov, 14:28
26 Nov, 14:28
25 Nov, 19:46
24 Nov, 18:28
23 Nov, 19:44
22 Nov, 19:24
22 Nov, 15:02
22 Nov, 14:42
21 Nov, 14:45
20 Nov, 14:04
19 Nov, 19:07
19 Nov, 14:57
19 Nov, 14:05
18 Nov, 12:21
17 Nov, 19:36
16 Nov, 19:42
15 Nov, 14:39
14 Nov, 19:23
x
и y
- представляющие расположение одного из поврежденных пикселей. matrix = [
['0','0','1','0'],
['0','1','1','0'],
['0','1','0','0']
].
x = 0, y = 2
Output: 6
14 Nov, 14:59
14 Nov, 13:23
14 Nov, 10:49
14 Nov, 09:50
13 Nov, 20:56
12 Nov, 19:05
11 Nov, 10:57
09 Nov, 19:43
08 Nov, 20:56
isEmpty(object)
, которая возвращает true, если у объекта нет свойств. В противном случае функция возвращает false.08 Nov, 15:01
08 Nov, 14:26
07 Nov, 19:19
07 Nov, 14:57
06 Nov, 20:09
05 Nov, 12:16
04 Nov, 19:24
03 Nov, 17:51
03 Nov, 15:48
02 Nov, 11:01
01 Nov, 12:20
31 Oct, 14:09
29 Oct, 19:10
29 Oct, 15:05
28 Oct, 18:59
sumTo(n)
, которая будет вычислять сумму чисел 1 + 2 + ... + n.28 Oct, 14:06
27 Oct, 18:12
this
, arguments
, super
и new.target
и записываются так, как показано на картинке. 26 Oct, 18:36
25 Oct, 15:08
24 Oct, 16:17
lang
у тега <html>
, к примеру <html lang="en">...</html>
.23 Oct, 08:04
22 Oct, 17:08
21 Oct, 06:38
20 Oct, 05:42
18 Oct, 11:44
Событие load гарантирует, что браузер отображает страницу полностью: все стили и картинки готовы, размеры элементов на странице посчитаны верно и доступны.17 Oct, 10:36
16 Oct, 18:28
16 Oct, 14:39
16 Oct, 07:26
15 Oct, 17:12
15 Oct, 15:11
15 Oct, 13:32
15 Oct, 11:23
15 Oct, 05:03
14 Oct, 20:01
13 Oct, 18:04
12 Oct, 17:00
12 Oct, 15:00
12 Oct, 14:36
11 Oct, 17:23