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

@anothertechrock

РКН: https://kurl.ru/LwANe
Download Telegram
5 распространенных ошибок при использовании промисов

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

#js
This media is not supported in your browser
VIEW IN TELEGRAM
Мигающие маяки

Карта показывает маяки, запрашивая информацию из Overpass API.
Не боритесь с каскадом, управляйте им!

Рассматриваем инструменты, недавно добавленные в CSS и позволяющие, наконец, управлять каскадом.

#css
This media is not supported in your browser
VIEW IN TELEGRAM
Параллакс-эффект при наведении на карточку, реализованный с помощью CSS и JavaScript.

#css #js
This media is not supported in your browser
VIEW IN TELEGRAM
3D Rotator

Анимация вращения текста в 3D-пространстве, реализованная с помощью Three.js.

#js
Angular Projects

Автор:
Zama Khan Mohammed
Год издания: 2019

#angular #english
Сравнение дизайнерского макета и результата кодинга

Разработчику не всегда удается "на глаз" определить, точно ли результат его работы совпадает с макетом. Автор статьи поделился советами и приемами сравнения.

#css #html
This media is not supported in your browser
VIEW IN TELEGRAM
Замок

Адаптивное изображение замка, выполненное с помощью SVG, SCSS и библиотеки GSAP.js.

#css #js
Как можно задать задержку для CSS-анимации?

Свойство animation-delay задает задержку воспроизведения CSS-анимации.

Пример:

.element {
animation-delay: 1s;
}

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

#css
This media is not supported in your browser
VIEW IN TELEGRAM
Интересный эффект при наведении мыши.

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

console.log(Pattern.matches("\\d", "1"));
Anonymous Quiz
19%
true
16%
false
19%
undefined
17%
1
29%
Посмотреть ответ
Building Large-Scale Web Applications with Angular

Авторы:
Chandermani Arora, Kevin Hennessy, Christoffer Noring, Doguhan Uluca
Год издания: 2020

#angular #english
Коллекция текстильных паттернов

Все паттерны созданы при помощи CSS-градиентов, без каких-либо изображений. И они очень маленькие!

#css
7 + 1 способ анимировать спиннер

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

#css #js
This media is not supported in your browser
VIEW IN TELEGRAM
Sliding Sign In Sign Up Page

Форма авторизации и регистрации с анимацией переключения между ними.

#css #js
Scroll-linked и ScrollTimeline анимация

Scroll-linked Animations — это экспериментальное дополнение, которое позволяет нам связывать анимацию с прокруткой: когда вы прокручиваете контейнер прокрутки вверх и вниз, связанный элемент также продвигается или перематывается соответственно.

#js #css
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%
Посмотреть ответ