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

@anothertechrock

РКН: https://kurl.ru/LwANe
Download Telegram
HTML5 and JavaScript Projects

Автор:
Jeanine Meyer
Год издания: 2018

#javascript #html5 #english
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