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

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

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

Card Hover Interactions

Шикарная анимация карточек. Можно использовать в блогах для отображения постов с превью или же в landing страницах для описания товаров. Вся логика написана на HTML + CSS.

#codepen
👉🏻@frontend_html_css_js

Ссылка

Learning Web Design by O`Reilly

Нашёл очень полезную книгу по веб-разработке для начинающих от небезызвестной компании O`Reilly. Книга выпускается уже более 10-ти лет, сейчас актуально 5-ое издание. В книге рассматриваются абсолютно все разделы HTML, CSS, а также даются основы JS и основы архитектуры веба в целом. Книга обязательна к прочтению, если вы только перешли в web разработку или хотите изучить новые технологии, вышедшие за последние года.

#книга #советы
👉🏻@frontend_html_css_js

Если вам понравилась книга, то лучше поддержите автора покупкой

Куда податься: фриланс, аутсорс или продуктовая компания?

Обучение рано или поздно завершается и нужно искать работу. Но какую?

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

​​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 фреймворки используете Вы? Пишите в комментах👇🏻

Софт скилы важнее хард-скилов?

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

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

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

Подробнее о софт скилах в статье.

Привет!

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

Статья

#статья
👉🏻@frontend_html_css_js

Ребятки, напоминаю, что у нас есть live-чат, где Мы обсуждаем последние посты, отвечаем на любые Ваши вопросы, или просто болтаем. Вступайте, пишите, спрашивайте😉

👉🏻 https://t.me/amaz_front_dev_chat