Телеграмм чат группы frontend

☑️ TIPS AND TRICKS #19

Декларативное извлечение ключей/значений из объекта с дальнейшим преобразованием.

87614:24пожаловаться #1

2021 May 08

☑️ НОВОЕ ВИДЕО НА КАНАЛЕ 🎬

Вы или ваши знакомые собираются пойти на курсы программирования?
✅ Покажите им это видео: https://www.youtube.com/watch?v=fsi_q5CxqY0

Заранее спасибо всем, кто подпишется, поддержит лайком и комментарием!

КАК ВЫБРАТЬ КУРСЫ ПРОГРАММИРОВАНИЯ В 2021? КУРСЫ ПРИ ТРУДОУСТРОЙСТВЕ ЭТО ХОРОШО?

Видео для тех, кто собирается обучаться программированию на курсах.Как выбрать курсы программирования чтобы не разочароваться? На что обращать внимание при в...

78916:11пожаловаться #2

2021 May 17

☑️ TIPS AND TRICKS #20

При создании списка, часто некоторые элементы бывают опциональными и добавляются в том случае, если выполняется/не выполняется конкретное условие.
Есть несколько способов инициализировать массив условными элементами.

94110:59пожаловаться #3

2021 May 26

shorts#1.mp4

(12.55 Мб)

☑️ Замыкания в JavaScript за 1 минуту

Самое простое объяснение + реальный пример использования.

Как вам такой формат постов?

103710:43пожаловаться #4

2021 June 07

☑️ ОПЕРАТОРЫ ЛОГИЧЕСКОГО ПРИСВАИВАНИЯ

В JavaScript теперь есть возможность комбинировать логические операции и операцию присваивания с помощью новых операторов:
&&=, ||= и ??=
Ранее составные операторы можно было использовать только с математическими и побитовыми операциями.

117011:43пожаловаться #5

2021 June 08

Нас уже более 2500 🔥
Чтобы получать больше интересного и релевантного контента проголосуй внизу 👇
Я:

Анонимный опрос

Хочу освоить Front-end

11%

Уже обучаюсь Front-end

Закончил курсы / Ищу работу

26%

Уже работаю Trainee / Junior

40%

Middle+

11%

Senior+

Проголосовало: 534

98612:12пожаловаться #6

2021 June 10

EqualityRotated.mp4

(7.23 Мб)

☑️ Разница между строгим и нестрогим сравнением в JavaScript за 1 минуту.

Помните, что разница возникает лишь при сравнении разных типов.
При сравнении одного типа операторы работают идентично.

А что вы используете == 🆚 === ?

95611:50пожаловаться #7

2021 June 15

☑️ ОПРЕДЕЛЯЕМ ПУСТОЙ ЛИ ОБЪЕКТ В JavaScript

Это довольно часто используемая операция, но у нас нет встроенного в язык функционала, который мог бы определить, есть ли в объекте какие-либо значения.
Пишем собственную реализацию в несколько строк.

120611:00пожаловаться #8

☑️ ИМПОРТ JSON ФАЙЛА НАПРЯМУЮ ИЗ JavaScript в браузере

Множество веб приложений используют json файлы для получения конфигурации приложения, версионирования или других целей. Сегодня в Google Chrome последней версии была добавлена возможность импортировать .json файлы напрямую из .js модулей.

Когда разработчик хочет импортировать модуль JSON, он должен использовать утверждение импорта, assert: { type: 'json' } в асинхронном варианте или assert { type: 'json' } в обычном импорте, чтобы указать, что это должен быть JSON.
Импорт не удастся, если тип MIME, полученный из сети, не соответствует ожидаемому типу application/json.

79717:47пожаловаться #9

2021 June 22

🎬 Решил сделать бесплатный курс на Youtube по Redux-Saga.
Если вам интересна данная технология и вы хотите узнать о ней больше - welcome:

https://youtu.be/ah5voE_SGjo

Буду благодарен за лайк и коммент под видео!

Redux-Saga React Полный Курс. Урок 1. Саги, Эффекты, Генераторы.

Это первый урок из цикла обучающих видео о Redux-Saga на русском.
Redux-Saga - это middleware для redux, цель которой - сделать асинхронные операции в React приложениях: эффективными для выполнения, легко управляемыми и тестируемыми.
Ключевая концепция редакс саги - это создать отдельный поток в нашем приложении, который несет полную ответственность за все побочные эффекты.

Для полного понимания нужно смотреть видео полностью.
Таймкоды:

00:00 - Концепт и шаблон проектирования сага.
00:54 - Генераторы в ES6, function*, yield.
08:00 - Разворачиваем react приложение и устанавливаем redux-saga.
09:55 - Подключаем sagaMiddleware и создаем redux store.
15:00 - Создаем первые саги. Saga watcher, saga worker, effects.
17:22 - Effect take.
20:59 - Effect takeEvery, takeLatest, takeLeading, работа с промисами.
23:35 - Реальный запрос на сервер через fetch.
26:33 - Effect put.
28:17 - Effect call.
29:43 - Паралельные задачи redux-saga..
32:54 - Effect fork.
34:38 - fork vs call. Разница между эффектами.
38:04 - Обработка…

96412:36пожаловаться #10

2021 June 23

☑️ TIPS AND TRICKS #21

Бывают случаи, когда нам нужно отображать только первые символы слов, например инициалы или аббревиатуры.
Достичь этого можно вообще без использования JavaScript, а лишь только с использованием CSS. Песочница: https://jsfiddle.net/dot21gcz/

94012:24пожаловаться #11

2021 June 29

context-good-q.mp4

(13.21 Мб)

☑️ Контекст вызова this в JavaScript за 1 минуту.

Простое объяснение контекста в JavaScript + все варианты использования:
Глобальная область видимости, function, new, object, arrow function, bind, call, apply.

328814:37пожаловаться #12

2021 July 02

☑️ Новое свойство Object.hasOwn в JavaScript

Уже доступно в версии v9.3 движка V8 за флагом --harmony-object-has-own, и скоро будет доступен в Chrome и других современных браузерах.

324412:36пожаловаться #13

2021 July 05

☑️ TIPS AND TRICKS #22

Различные способы извлечения первого и последнего элементов массива.

292112:15пожаловаться #14

2021 July 06

🎬 Второе видео курса по Redux-Saga + React уже на Youtube.

Если вам интересна данная технология и вы хотите узнать о ней больше - welcome по ссылке:

https://www.youtube.com/watch?v=7Pq-2bBIzXY

Redux-Saga React Полный Курс. Урок 2. Эффекты в деталях. Архитектура саг. React Router + Redux Saga.

Это второй урок из цикла обучающих видео о Redux-Saga на русском.
Первый урок: https://youtu.be/ah5voE_SGjo
Код c урока: https://github.com/maks1mp/redux-saga-course/tree/lesson-2

Redux-Saga - это middleware для redux, цель которой - сделать асинхронные операции в React приложениях: эффективными для выполнения, легко управляемыми и тестируемыми.
Ключевая концепция редакс саги - это создать отдельный поток в нашем приложении, который несет полную ответственность за все побочные эффекты.

👉 Менторство, обратная связь и поддержка https://www.patreon.com/wisejs

Для полного понимания нужно смотреть видео полностью.
Таймкоды:

00:00 - Начало, что будет рассмотренно в видео
00:31 - Резюмируем первый урок Saga Watcher / Saga Worker / Effects
01:53 - Обзор начального кода приложения уже подключен Redux + Redux-Saga
02:44 - Организация rootSaga в приложении
04:18 - Подключаем саги способ №1 (yield + array + all для вызова)
05:17 - Подключаем саги способ №2 (yield + array + fork + all для вызова)
06:09 - Подключаем…

377812:07пожаловаться #15

2021 July 14

☑️ TIPS AND TRICKS #23

Почти у всех списков и таблиц есть состояние, когда данные для показа отсутствуют.
Сообщение об отсутствии значений можно вывести используя только HTML и CSS.

348512:13пожаловаться #16

2021 July 19

🎬 На канале уже доступен 3-й урок бесплатного курса по Redux-Saga.
Если вам интересна данная технология и вы хотите узнать о ней больше - welcome по ссылке https://youtu.be/OsTWNBnzjJk

Реальное Приложение с Пагинацией и Поиском на React + REST API. Урок 3. Redux-Saga React Полный Курс

Это третий урок из цикла обучающих видео о Redux-Saga на русском, но его можно смотреть и отдельно от первых двух.
Первый урок: https://youtu.be/ah5voE_SGjo
Второй урок: https://youtu.be/7Pq-2bBIzXY
Код начала 3-го урока: https://github.com/maks1mp/redux-saga-course/tree/lesson-3
Финальный код: https://github.com/maks1mp/redux-saga-course/tree/lesson-3-finish
В финальный код минимально добавлены стили.

В этом видео мы пишем реальное приложение с постраничным выводом (пагинацией) и поиском на REST api с использованием Redux, Redux Saga, React Router, connected-router-redux.

Redux-Saga - это middleware для redux, цель которой - сделать асинхронные операции в React приложениях: эффективными для выполнения, легко управляемыми и тестируемыми.
Ключевая концепция редакс саги - это создать отдельный поток в нашем приложении, который несет полную ответственность за все побочные эффекты.

👉 Менторство, обратная связь и поддержка https://www.patreon.com/wisejs

Для полного понимания нужно смотреть видео полностью.
Таймкоды:…

346012:05пожаловаться #17

2021 July 26

☑️ TIPS AND TRICKS #24

Удаляем свойства из объекта различными способами в JavaScript.

288612:20пожаловаться #18

2021 July 27

🎬 Собеседование Junior Angular Developer

Только после 45-ти Александр начал изучать программирование.
Сейчас ему 53 года и он активно обучается и ищет работу в IT.
Мы договорились провести собеседование для оценки уровня подготовки и знаний на позицию Junior Frontend Angular.

Ссылка: https://youtu.be/IwKJVg45nSE

Собеседование JUNIOR FRONTEND ANGULAR разработчика. Александр 53 года.

Только после 45-ти Александр начал изучать программирование. Сейчас ему 53 года и он активно обучается и ищет работу в IT. Мы договорились провести собеседование для оценки уровня подготовки и знаний на позицию Junior Frontend Angular.

👉 Менторство, обратная связь и поддержка https://www.patreon.com/wisejs

Таймкоды:

00:00 - Знакомство и общие вопросы.
05:43 - Обратная связь.
06:25 - что такое html? зачем он используется?
06:59 - какая роль тегов head, body, html?
07:38 - тег script. почему подключаем внизу страницы?
09:42 - что такое css? чем отличается от html?
09:58 - что такое селекторы в CSS?
10:23 - специфичность селекторов
11:55 - блочная модель элемента в css
13:14 - свойство position в CSS
14:35 - flexbox в css
16:24 - grid в css
16:38 - !important в css
18:00 - Обратная связь по HTML/CSS.
18:47 - что такое javascript? сфера применения.
20:35 - типы данных в javascript
20:58 - разница между примитовами и ссылочными типами данных.
22:09 - javascript типизированный язык или нет?
22:42…

381411:33пожаловаться #19

2021 August 03

scope-publish.mp4

(7.88 Мб)

☑️ Область видимости переменных (Scope) в JavaScript.

Переменные, объявленные с const и let могут иметь блочную и функциональную область видимости, а переменные, объявленные с помощью ключевого слова var имеют только функциональную.

Области видимости могут быть вложенными.
Переменные, объявленные во внешней области видимости, доступны во внутренней.

#wise_shorts