Привет!

Рады видеть тебя на канале WebStream.
Мы три web-разработчика – у нас более 15 лет опыта на троих, и мы работали как в стартапах, так и в крупных международных компаниях. Поэтому мы разбираемся не только в том, как создать форму регистрации, но и можем поговорить про красивый и качественный код.

У нас ты узнаешь:
· Как решать нетривиальные задачи – #советы
· Что реализуют продвинутые разработчики – #codepen
· Что происходит во Frontend-тусовке - #новости #podcast
· А также найдешь много полезных материалов – #meme #статья #qa

Думаешь, много теории? Будет и практика – также мы выкладываем задачки #задача, чтобы ты смог сразу отработать новые знания.

Подписывайся, чтобы весь опыт нашей команды был у тебя под рукой.

Front-End QA

Что если тебе нужно оценить качество своего фронта? Или ты QA тестер без опыта работы фронтенд-девелопером?

В статье ниже описываются критерии качественного фронтенда.

#qa #статья
@frontend_html_css_js

Remote debug Android devices

Иногда при адаптации сайта к смартфонам эмулятора недостаточно: нельзя дебажить, нет возможности быстро посмотреть что происходит c запросами и cookies.
Для андроид смартфонов есть решение: Remote debugging.

Нужен лишь андроид телефон, компьютер и usb-кабель.
Подробнее на сайте с документацией.

#статья
@frontend_html_css_js

Typescript Decorators in Examples

Отличная статья на тему декораторов в TypeScript. Подробно расписывается создание декораторов для функций, классов, свойств и методов. Также бонусом идёт работа с reflect-metadata. Рекомендую к прочтению.

Также готовлю статью с практическим примененем декораторов в кастомном state-менеджере(опрос выше запустил не просто так🙂).

#статья
@frontend_html_css_js

Angular – Custom RxJS State Manager

Написал статью на тему кастомного стейт менеджера в Angular с использованием RxJS.
В проекте появилась практическая нужда в реактивных моделях, а использовать NGRX или другой стейт-менеджер было дорого: много бойлерплейт кода, много траты времени. Было решено написать свой простой реактивный менеджер.

Подробнее по ссылке.

#статья
@frontend_html_css_js

Как тестировать фронтенд?

Выше была статья на англ. языке о тестировании проектов с фронтендом.
Не всегда есть время переводить и читать, поэтому лучше повторить на русском.
По ссылке ниже статья на vc.ru из раздела "Разработка" о том, как свои продукты тестируют в компании, занимающейся дизайном и разработкой технически сложных веб-проектов.

По пунктам разбирается, как тестировать сайт (свой и чужой), какие инструменты можно использовать. А еще в конце есть интересная схема, по которой можно понять, когда стоит начать думать о тестировании своего сайта (спойлер - с самого начала).

#qa #статья
@frontend_html_css_js

3 идеи, которые помогут Вам прокачать ваш доход

Очень познавательная статья про то, как риски влияют на будущий успех. Автор рассматривает подход “Anti-Fragile” и рассказывает как это работает. Рекомендуется к прочтению, если вы боитесь начать проект или низко себя оцениваете.

#статья
@frontend_html_css_js

Почему я выбрал Vue.js для фриланса

Автор рассказывает о своём опыте использования frontend-фреймворков во фрилансе, а также объясняет, почему отдал предпочтение Vue.js.

От себя добавлю, что тоже имею положительный опыт использования Vue.js(в частности Nuxt.js) во фрилансе: всё работает из коробки без лишних настроек.

#статья
@frontend_html_css_js

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

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

#статья
@frontend_html_css_js

Full stack Developer’s roadmap

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

#статья
👉🏻@frontend_html_css_js

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

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

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

#статья
👉🏻 @frontend_html_css_js

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

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

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

👉🏻@frontend_html_css_js
#статья

Ссылка

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

​​Taildwind.css Framework

Давайте немного поговорим про CSS фреймворки. Не всегда удобно/ разрабатывать сайты на голом CSS, и зачастую приходится использовать CSS фреймворки. Про Bootstrap слышали все, даже за пределы сферы Web – это очень жирный фреймворк с кучей встроенных компонентов.

Теперь хочу рассказать вам о Tailwind. Это совершенно другой взгляд на CSS фреймворк. Здесь нет готовых компонентов(инпутов, кнопок и тд). Но есть огромное количество классов, с помощью которых можно создавать свои компоненты. Звучит непонятно, правда? Давай лучше посмотрим короткое видео, которое покажет что происходит. Таким путём можно из классов собрать любой компонент, который вам нужен.

Резонный вопрос: если так много классов, то этот css файл занимает много места? И да и нет. Зависит от того, как вы его подключите. Tailwind предоставляет обычный CSS-файл(содержит все классы) и NPM-пакет(самое интересное). Если вы подключите NPM-пакет к себе в проект по инструкции, то Tailwind начинает использовать свою магию: он проходит по всем вашим HTML файлам, смотрит какие классы вы использовали, и только их добавляет в сборку. Таким способом, Ваш CSS будет занимать очень мало места.

Также этот фреймворк предоставляет адаптивность, тонкую настройку цветов, отступов и тд. Всё это Вы найдете на оффициальной сайте: https://tailwindcss.com/

@frontend_html_css_js
#статья #советы

P.S. От себя скажу, что Я использовал этот фреймворк трижды в пордакшене и очень успешно.

А какие CSS фреймворки используете Вы? Пишите в комментах👇🏻

Привет!

Как отдохнули? Началась новая рабочая неделя. Тем временем, хочу представить Вам подробную статью с полным разбором переносов слов/символов в CSS. У всех была проблема, что слова или предложения выходят за рамки div, и зачастую, сложно понять, что как именно это пофиксить. Статья рекомендуется к прочтению, если Вы пока не разбирали такие свойства, как word-wrap, overflow-wrap и word-break.

Статья

#статья
👉🏻@frontend_html_css_js

Хорошая статья расказывающая о нюансах при отладке JS

- как отладить попап, который скрывается, если убрать мышку c него;
- логирование при помощи breakpoint-ов;
- hotFix-ы посредством breakpoint-ов;
- определение, какой код выполнил AJAX запрос.


Статья

#статья
👉🏻@frontend_html_css_js

Статья о том, как реализовать свой Dependency Injection

Привет! Нашёл шикарную статью о том, как написать свой Dependency Injection на TypeScript, с применением декораторов. Автор расписывает что такое Dependency Injection и показывает простой пример. Статья обязательна к прочтению, если вы хотите(или уже) изучить Angular.

Статья

#статья
👉🏻@frontend_html_css_js

#статья дня

Соскучились по геометрии? Да не врите, по ней невозможно не соскучиться.

Представьте такую задачу: вам надо бесконечно скроллить всего 3-5 слайдов. Причём, скроллить нативно, без дёрганий. Как обычный скролл на мобилах, в общем.

Очевидно, на ум придёт Swiper, есть у него опция freeMode, но он, во-первых монструозный, во-вторых — бесконечный режим на нём столь же бесконечно баганутый.

Я же предлагаю мыслить в 3d: расположите карусель как… как реальную карусель с задолбавшими всех лошадками. И сделайте её достаточно большой, чтобы нивелировать искажение перспективы.

Не знаете, как? Да вот так же: https://3dtransforms.desandro.com/carousel

freeMode уж сами допишете.

Острожно — геометрия! И CSS 3d-преобразования 🤪

Великолепная статья, такие в школе надо преподавать.

#css #js #carousel #3d