Javascript js frontend
9.99K subscribers
421 photos
158 videos
15 files
309 links
Канал для начинающих JavaScript разработчиков. Если вы приступаете к изучению JS или FrontEnd в целом - этот канал для вас.

@anothertechrock

РКН: https://kurl.ru/LwANe
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
Плата Arduino

Анимированная плата Arduino, выполненная с помощью CSS, без использования JavaScript.

#css
Hands-on Nuxt.js Web Development

Автор:
Lau Tiam Kok
Год издания: 2020

#nuxt #vue #english
Что такое арность? Как получить арность функции в JS?

Арность — это количество аргументов функции. Например — вот объявление пары функций:

 function fn(a, b) {
//...

}
function fn2(a, b, c) {
//...

}

Функция fn принимает два аргумента (это бинарная или 2-арная функция), функция fn2 принимает три аргумента (тернарная, 3-арная функция).

В JS можно получить арность функции с помощью свойства length:

function foo(x, y, z) {
return foo.length; // Will return 3
}

#js
This media is not supported in your browser
VIEW IN TELEGRAM
На ноль делить нельзя!

Калькулятор на JavaScript предупреждает, что на ноль делить не надо, но если все же попробуете, то увидите интересный эффект.

#js
CSS. Какова специфичность “ul ol li.red”?
Anonymous Quiz
11%
0,0,3,1
26%
0,0,1,3
15%
1,1,1,1
6%
1,2,2,1
42%
Посмотреть ответ
fuite - инструмент для поиска утечек памяти в веб-приложениях

Дебаггинг утечек памяти - непростая задача. Для этого есть инструменты, но они в массе своей сложные и неудобные. Поэтому многие разработчики не слишком активно мониторят утечки. Возможно, fuite это изменит?

#en
This media is not supported in your browser
VIEW IN TELEGRAM
Hamburger Icons Animations

Несколько вариантов анимации иконки-гамбургера, реализованные с помощью CSS и JavaScript.

#js
Cross-Platform Desktop Applications

Автор:
Paul Jensen
Год издания: 2017

#english
Как добавить HTML элементу обработчик события?

addEventListener() добавляет элементу действие, которое будет выполнено после срабатывания события. Например, после клика мыши или нажатия клавиши.

Найдем первую кнопку на странице и будем выводить сообщение в консоль, когда произошел клик по этой кнопке.

const element = document.querySelector('button')

element.addEventListener('click', function (event) {
console.log('Произошло событие', event.type)
})

При вызове функции в нее передаётся специальный объект (в примере выше — event), который у разных типов событий разный. Например, у событий нажатия клавиши есть код клавиши, а у событий перемещения мыши — координаты.

#js
This media is not supported in your browser
VIEW IN TELEGRAM
Переключение тем

Темы оформления с возможностью переключения, выполненные с помощью PostCSS и JavaScript.

#css #js
27 основных однострочных функций JavaScript

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

#js
This media is not supported in your browser
VIEW IN TELEGRAM
CSS Loading Animations

Подборка оригинальных загрузчиков на чистом CSS.

#css
Каким будет output следующего JavaScript-кода?

console.log(Pattern.matches("[amn]", "abcd"));
Anonymous Quiz
17%
true
22%
false
15%
undefined
12%
a
35%
Посмотреть ответ
Advanced TypeScript Programming Projects

Автор:
Peter O'Hanlon
Год издания: 2019

#typescript #english
Как проверить, содержится ли значение в коллекции Set?

Метод set.has() проверяет, содержится ли значение в коллекции Set. Если значение есть в коллекции, метод вернет true, в противном случае — false.

Пример:

const watchList = new Set(['Сияние', 'Интерстеллар', 'Казино'])

console.log(watchList.has('Казино'))
// true

console.log(watchList.has('Чёрная пантера'))
// false

#js
This media is not supported in your browser
VIEW IN TELEGRAM
Sphere

Анимация вращения трёх сфер, реализованная с помощью Three.js.

#js
conic-gradient и radial-gradient

Подробный разбор работы градиентов, их сходства и отличий и вариантов использования.

#css
This media is not supported in your browser
VIEW IN TELEGRAM
Фрактал

Анимированный фрактал, выполненный на чистом JavaScript.

#js
Full-Stack React Projects

Автор:
Shama Hoque
Год издания: 2020

#react #english
This media is not supported in your browser
VIEW IN TELEGRAM
Slider boomerang effect

Необычный слайдер, листать который можно при помощи кнопок или колесика мыши.

#css #js