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

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

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

Ден Абрамов в своем твиттере представил новую документацию по 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

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

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


Статья

#статья
👉🏻@frontend_html_css_js

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

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

Статья

#статья
👉🏻@frontend_html_css_js

Привет. Нашли на Хекслете бесплатные курсы https://ru.hexlet.io/courses/free
Думаю будет полезно пройти некоторые из них.
Как вам название одного из курсов "Жизнь программиста"?)

Плюс, на досуге, можно посмотреть канал Отсобеседование. Там проводят собеседования фронтендеров и бекэндеров.
К примеру собиседование Junior Frontend разрабочика.

У Почтатеха — первый митап по разработке интерфейсов. В онлайне, 9 декабря в 18:00. Участие бесплатное, но нужно зарегистрироваться: https://pochtatech.timepad.ru/event/1843349.

В программе:

– Дима Морозов, ведущий разработчик интерфейсов в Почтатехе, расскажет о том, как сделать простые интерфейсы для огромного количества сложных систем — у Почты больше 120 разных продуктов.

– Илья Полянский, продуктовый дизайнер из Почтатеха, расскажет о developer-driven-подходе к дизайну — как правильно выстроенная работа с фронтенд-разработчиками влияет на качество интерфейсов.

– Глеб Михеев, технический директор и основатель агентства Beta, программный директор в Skillbox, расскажет, как выстроить архитектуру фронтенд-приложений, — а ещё о том, как на неё смотреть в разрезе развития приложения и роста команды.

Save the date: 9 декабря, 18:00. Ждём вас!

Ежегодный веб-альманах 2021 года от HTTP Archive

2021 год по традиции заканчивается подведением итогов и сбором интересной статистики.
Разработчики используют это время, чтобы уловить тенденции, царящие в IT. Для веб-разработчиков важны тренды среди Web-проектов.
О многих из них можно узнать в альманахе от HTTP Archive.

Несколько интересных фактов:
— jQuery используется на 84% сайтов, React — на 8%.
— Wordpress обслуживает 33% просканированных сайтов.
— 94% сайтов используют по крайней мере один сторонний ресурс, подавляющее большинство от сервисов Google.
— 16% страниц используют бессодержательные названия ссылок: «click here», «read», «more» и т.п.
— На 20% сайтов нет определения атрибута lang.

Всего в веб-альманахе было опубликовано 24 главы про HTTP, HTML, CSS, JS и др. на английском и русском (частично) языках.

Подробнее здесь:

https://almanac.httparchive.org/en/2021/

#статья дня

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

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

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

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

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

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

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

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

#css #js #carousel #3d