Observer паттерн в JavaScript – ключ к реактивному поведению

Автор объясняет правила observer паттерна и способ его реализации в JavaScript. Обязательно к прочтению, если Вы хотите прокачать свои навыки программирования.

#статья
@frontend_html_css_js

Audio Waveform

Шикарная анимация аудиоволн. Можно использовать как кнопку записи при разработке голосового чата. Реализовано с помощью GSAP.

#codepen
@frontend_html_css_js

Поиск

Одним из основных инструментов разработчика является поисковик.

Несколько советов как пользоватся поисковиком:

- Ищи иформацию в google он выдает более релевантную информацию чем тот же Яндекс. Яндекс хорошо ищет по картинкам)
- Пиши запросы на Английском языке и вообще Английский наше все;
- Не используй длинные фразы для поиска;
- Если надо исключить результаты с каким либо словом используй минус. К примеру поищи js dropdown plugin ты увидишь много результатов с jquery. Если добавишь -jquery то гугол исключит из поиска все в чем есть слово jquery;
- Если надо полное совпадение оборачивай фразу в кавычки. Обычно полезно при поиске решения ошибок. Пример: "com.ibm.commerce.foundation.dataload.exception.DataLoadSystemExc eption”;
- Если хочешь сравнить что то добавь vs между ними. Пример: Angular 1 vs Angular 2;
- Для поиска информации на одном сайте используй слово site. Пример: angular site:reactjs.org;
- Если надо найти актуальную статью по какой либо технологии используй фильтр по дате. Для это на странице результатов находим и нажимаем кнопку "Инструменты" и затем тыкаем в "За всё время" и выбираем промежуток. Обычно я выбираю "За год" или "За месяц”.

Если у тебя есть что добавить, пиши в комментариях🙂

#советы

Bad vs Best practics

Когда только начинешь свой путь в разработке нет уверенности, что ты написал хорошый или не очень код, можно ли использовать этот метод или надо его избегать. Со временем у тебя выработаются все эти правила в голове и засядут в корочку🙂
А до это предлагаю лайфхак: используй волшебные фразы best practics и bad practics.

Открываем Google и пишем:
- js best practics;
- js bad practics;
- react best practics;
- angular bad practics.

Вы увидете статьи с описанием как можно и как нельзя. Не нужно все что в них написано принимать как закон но, в большинтсве случае это полезные советы.

Также вы можете спросить нас или других участников в комментариях: ответим с удовольствием😎

Full stack Developer’s roadmap

Автор собрал в кучу полезные статьи для Full stack разработчика и отсортировал их от легкого к сложному. Получился роадмап «как стать фулстеком, если ты уже фронтенд». Советую сохранить в закладки: куча полезной информации.

#статья
👉🏻@frontend_html_css_js

Статья: https://link.medium.com/MLDAdbcyjkb

На кого пойти учиться в IT? Фронтенд, бэкенд, тестирование или ничего из этого?

Первым шагом перехода в IT должен быть выбор направления.

Мы подготовили статью об основных профессиях в IT, их плюсах и минусах, а также даны несколько советов, как определиться с выбором.

Полезные сервисы

Хочу поделиться инструментами которыми пользуюсь практический каждый день в своей работе и они, думаю будут полезны и тебе.

Can I Use - сервис поможет тебе узнать уровень поддержки того или иного функционала в браузерах.
StackBlitz - сервис дает возможность за секунду создать проект и расшарить его другим. Использую изолированно проверить свое решение на работоспособность если в проекте не работает.
RegEx 101 - хороший сервис для составления и тестирования регулярных выражений. Есть библиотека готовых регулярных выражений от других пользователей
Notion - приложение для ведения рабочих и личных дел. Я в нем создаю свою базу знаний и пишу заметки.
Figma - векторный редактор для рисования дизайна.
Postman - приложение для тестирования серверных запросов.
Grammarly - расширение для браузера которое помогает увидеть и исправить мои ошибки в английском
PerfectPixel - еще одно расширение использую когда надо сверстать пиксель в пиксель
Toggl - возможно вам нравится логировать или вас просят это делать. Этот удобное приложение для этого.
KeePass - приложение для хранения паролей. Скачивай вторую версию.

#советы
@frontend_html_css_js

Изолирование проблемы

Есть иногда такая проблема: подключил в проект библиотеку или написал код, а он не работает. Все возможные варианты проверены, но все равно не работает. Возможно, какой то другой код в проекте влияет на твой код.

В этом случае, хорошей идей будет проверить своё решение изолировав его. Создай отдельный мини-проект и напиши минимальный код который воспроизводит твое решение. И ,возможно, ты увидишь, что в этом случае твой код или библиотека работает корректно, а если нет: сможешь быстрее протестировать его. А дальше можно начать искать: какая часть проекта влияет на твое решение.

#советы
@frontend_html_css_js

Дебаггинг легаси кода

👉 @seniorFront

Статья о критериях качества верски в 2021 от HTML Academy

Отличная статья, которая говорит о таких критериях, как: кроссбраузерность, технологии, размер страницы, переполнение, шрифты и тд. Рекомендуется к прочтению как новичкам, так и бывалым верстальщикам.

#статья
👉🏻 @frontend_html_css_js

https://habr.com/ru/company/htmlacademy/blog/566244/

Angular — что я делаю сразу же, как только создал приложение

Автор статьи описывает свой опыт пост-подготовки Angular-приложения. Рассматривает такие вещи, как commit-lint, e2e и тд. Плюс статьи в том, что всё описывается в формате: почему и как.

👉🏻@frontend_html_css_js
#статья

Ссылка

Напишите в комментариях, а как вы подстраиваете новый проект под свои нужды?

Неочевидные источники материалов для обучения IT.

В продолжение недавнего опроса.

В этой статье мы рассказали о ресурсах для обучения, о которых вы могли не знать, рассмотрели плюсы и минусы каждого из них, а также дали советы, как такие ресурсы найти.

А мы напоминаем, что у нас есть лайв-чат!
Обсуждаем посты канала и делимся мыслями здесь 👉 https://t.me/amaz_front_dev_chat

Ломающие новости. Ну что же, с вами было хорошо.

Тем временем, наша статья попала в супер крутой паблик "Серьезный Тестировщик" 🔥🔥🔥

Повод перечитать ее ещё раз)

Привет, не помешал?)

Ден Абрамов в своем твиттере представил новую документацию по ReactJs. Пока она не закончена но уже можно ознакомится и начать думать в стили React.
- Все объяснения написаны с использованием хуков, а не классов.
- Добавлены интерактивные примеры и наглядные диаграммы.
- Документация включает задачи, чтобы проверить ваше понимание.

https://beta.reactjs.org