Javascript Pro
2.78K subscribers
191 photos
30 videos
129 links
Канал для начинающих JavaScript разработчиков. Если вы приступаете к изучению JS - этот канал для вас.

Админ: @anothertechrock
加入频道
5 фактов о this

Алоха всем! Я думаю многие кто из вас проходил интервью при устройстве на работу знают что вопросы на тему this - одни из самых часто встречающихся, а те кто еще не проходил в общем знаете это теперь. Подготовил для вас небольшую шпаргалку на тему this

👉 В глобальном контексте this ссылается на window
👉 При 'use strict' this в функции = undefined а без 'use strict' ссылается на window
👉 Если функция вызывается как метод объекта, то этот объект становится значением this
👉 Внутри setTimeout this ссылается на window
👉 В обработчиках событий this ссылается на элемент который вызвал событие
This media is not supported in your browser
VIEW IN TELEGRAM
Hamburger Icons Animations

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

#js
HTML вопрос: С помощью какого значения атрибута http-Equiv y тега meta можно перенаправить пользователя на другую страницу?
Anonymous Quiz
8%
refresh
67%
redirect
2%
restart
12%
Такого значения не существует
11%
Посмотреть ответы
Какого состояния не может быть у промиса?
Anonymous Quiz
55%
ready
13%
pending
8%
rejected
25%
fulfilled
Компоненты высшего порядка ReactJS (Higher-order components)

Приветствую коллеги! Огонь видео в котором автор без воды и с хорошими примерами рассказывает о HOC.

Рекомендую к просмотру так как это та штука которая будет часто вам встречаться в работе плюс об этом часто спрашивают на интервью при устройстве.

Смотреть…
This media is not supported in your browser
VIEW IN TELEGRAM
Sliding Sign In Sign Up Page

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

#css #js
Приветствую фронты! Давно уже слышал про такую тему как <picture /> но применить на практике пришлось вот только недавно.

Задача: Отображать разные картинки в зависимости от размера девайса

Можно сделать и через CSS, но минус такого подхода в том что рендерится все-равно 2 картинки, а если элементов в которых нужно сделать такую подмену много(как у меня было) то это влияет на производительность. В итоге вспомнил про picture и применил его:

Выглядит примерно так:

<picture>
<source media="(min-width:650px)" srcset="big_pic.jpg">
<source media="(min-width:465px)" srcset="small_pic.jpg">
<img src="pic.jpg" alt="pic" style="width:auto;">
</picture>


В общем вот вам, экспериментируйте =)
Какое из перечисленных CSS правил использует псевдокласс?
Anonymous Quiz
6%
а - span {color: blue }
10%
* { color:blue }
32%
a:visited { color: blue }
52%
a::after { color: blue }
У какой ссылки цвет текста будет красным?
Anonymous Quiz
15%
http
58%
https
27%
section
Возможно ли создать экземпляр абстрактного класса?
Anonymous Quiz
49%
Да
51%
Нет
Что выведется в консоль?
Anonymous Quiz
7%
undefined
58%
10
13%
6
22%
Ошибка
This media is not supported in your browser
VIEW IN TELEGRAM
Memory Game

Суть игры в том, что надо найти пары одинаковых карточек. Логика сделана на JS.
Статья дня. Что такое SPA - плюсы и минусы, некоторые особенности.

Краткая заметка, которая подойдет для подготовки к собеседованию.

Читать статью

#читать
Что выведет в консоль?

Ответ
Roguelike Development with JavaScript

Автор: Andre Alves Garzia
Год издания: 2020

Рецензия на книгу:
Плюсы:
1.
Множество примеров кода;
2. Хороший авторский стиль.

Минусы:
1.
Не замечено.

#JavaScript

Скачать книгу
This media is not supported in your browser
VIEW IN TELEGRAM
3D hover plane effect

Простой эффект 3D-плоскости при наведении, реализованный с помощью CSS-свойства transform и jQuery.
Статья дня. Вводное руководство по CI/CD для фронт разработчиков.

Читать статью

#читать
Javascript вопрос: Какого типа данных нет в JS?
Anonymous Quiz
6%
Symbol
38%
Char
3%
Null
47%
Bight
6%
Посмотреть ответы