WebStream – актуальное из мира Web-разработки🧑🏻‍💻
96 subscribers
32 photos
3 videos
27 links
Мы 3 web-разработчика в сфере highload проектов, имеем более 15 лет опыта на троих. На канале делимся своими решениями, интересными кейсами и материалами для прокачки навыков.

Если есть вопросы или предложения, пиши (@dkildar @Ildar_nabiev @Temirlan_U).
Download Telegram
На кого пойти учиться в IT? Фронтенд, бэкенд, тестирование или ничего из этого?

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

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

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

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

#советы
@frontend_html_css_js
Изолирование проблемы

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

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

#советы
@frontend_html_css_js
Ребята, всем привет!
Продолжаем узнавать вас лучше.
Давайие узнаем, в каком формате вы учились/учитесь? Как получаете знания?
Anonymous Poll
68%
Самоучка полностью (видео и книги)
8%
Меня учил наставник (друг/супруг/родственник)
37%
Онлайн курсы
11%
Очные курсы
6%
Университет
Статья о критериях качества верски в 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.

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

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

Повод перечитать ее ещё раз)
Привет, не помешал?)

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

https://beta.reactjs.org
Ребята)
Вам интересно будет почитать подробнее про виды фреймворков (Vue, AngularJS, react и т д) для фронта?
Anonymous Poll
75%
Да
2%
Нет
23%
Да, и не только про фреймворки
Ребята, привет!
Тут назрел вопрос, как хорошо вы знаете английский?
От ответов зависит, будем ли мы публиковать материалы из иностранных источников (и писать на англе сами)
Anonymous Poll
11%
Не знаю :(
50%
Использую Google translate для чтения
22%
Читаю тех литературу
17%
Читаю и разговариваю на свободные темы
This media is not supported in your browser
VIEW IN TELEGRAM
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.

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

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

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