CodeRoll | Frontend

Иконки Ресурсов с бесплатными иконками много не бывает... Поэтому сохраняйте в закладки! Примечательно, что на данном сайте можно менять толщину начертания и размер одновременно для всех иконок в библиотеке. А это означает, что не нужно тратить много времени, чтобы подбирать похожие по стилям иконки. Ссылка на сайт #дизайн

Depcheck По мере того, как проект разрастается, он превращается в беспорядок. Особенно если в нем задействовано много разработчиков. Частично данный беспорядок заключается в наличии неиспользуемых импортов, файлов, кусков кода и зависимостей. Depcheck — это инструмент для анализа зависимостей в проекте, чтобы определить какие пакеты не используются или устарели. В статье показано, как пользоваться данным инструментом. Избавьтесь от всего ненужного и держите код чистым! Читать статью #nodejs

VeeValidate Как легко и быстро создать валидацию для формы? Воспользоваться готовым решением! VeeValidate - фрэймворк для валидации форм в приложениях на Vue. Хочется похвалить документацию! Все доступно и понятно. В документации версии v4.x для Vue3 есть обучающая статья по использованию данного фрэймворка. Ссылка на официальный сайт #vue

Grommet - библиотека компонентов React, которая обеспечивает доступность, модульность, адаптивность и кроссбраузерность. Библиотека включает в себя такие компоненты, как: - header - footer - меню - табы - аккордион  - различные контроллы и многое другое. Все они созданы с учетом спецификации W3C и легко настраиваются в соответствии с потребностями вашего проекта. Статья поможет вам разобраться, как работать с данной библиотекой. Ссылка на статью о Grommet Ссылка на официальный сайт #инструменты

Superhero.js Сайт, на котором собрано множество статей о создании, тестировании и поддержке больших приложений JavaScript. В них объясняется синтаксис JavaScript, организация проектов, тестирование кода и многое другое. Кстати, у сайта зачетный дизайн! Ссылка на ресурс #javascript

Вкладывание тэгов Всем знаком сайт Can I use(caniuse.com), где можно проверить какая поддержка CSS свойств браузерами. Еще один не менее полезный ресурс Can I include, где можно проверить, можно ли вкладывать какой-то определенный тэг в другой. Очень важно, чтобы разметка сайта была валидна! Поэтому, если есть сомнения, проверьте на данном сайте. Ссылка на сайт #html

Для тех кто просил, открываем доступ в секретный канал на 2 ЧАСА👇 https://t.me/+kx7oWHPduEI5Y2Zi #реклама

Скинуть секретный архив с платными материалами и книгами для программистов? Хм, давай - 36 👍👍👍👍👍👍👍👍 69% Ещё не знаю - 16 👍👍👍👍 31% 👥 52 человека уже проголосовало.

Странный web Статья посвящена странному вебу, а именно сайтам без какой-либо конкретной задумки. Некоторые из них и вправду интересные и залипательные.  Иногда полезны и вот такие бессмысленные творения веба, хотя бы просто для того, чтобы снять напряжение и повеселиться! В статье, вы найдете ссылки на эти сайты и краткое описание. Ссылка на статью #статьи

Шаблоны верстки Делимся ресурсом, на котором собраны шаблоны с готовым кодом HTML и CSS для верстки различных элементов: - кастомных чекбоксов и радио-баттонов, - переключателей, - "липкого" хэдэра и футера, - аккордиона,  и многого другого! Ссылка на ресурс #дизайн

npm пакет Часто разработчики из проекта в проект копируют различные части кода.   Например, в React повторяются одни и те же компоненты в разных проектах. И чтобы постоянно не заниматься копипастом, можно создать npm пакет для необходимого React компонента и в дальнейшем просто его устанавливать. Статья как раз на эту тему! Читать статью #nodejs

React Form В интернет-магазинах часто используются многоэтапные формы для сбора всей необходимой информации о пользователе для оформления заказа.  И вы можете научиться создавать такие формы в React! Для этого советуем прочитать данную статью и повторить все этапы создания многоэтапной формы. Читать статью #react

Omatsuri Еще один полезный ресурс в вашу копилку! Здесь вы найдете: - генератор треугольников - генератор теней - генератор градиентов - конвертер SVG в JSX - конвертер картинок в формат Base64 и еще многое другое. Ссылка на ресурс #инструменты

QR code Для генерации кодов существует не мало сторонних ресурсов, но всегда полезно знать, как можно реализовать подобную вещь самому. Делимся обучающей статьей, как с помощью JavaScript создать генератор QR кода. Ссылка на статью #js

CSS градиент Для создания красивого градиента, порой недостаточно указать только два цвета. Например, при создании сине-желтого градиента, можно заметить по середине размытую и сероватую зону. О CSS градиентах и о том, как избежать подобных несовершенств подробно в статье! А если вы не совсем хотите вникать в данную тему, в конце статьи вы найдете ссылку на генератор градиентов. Ссылка на статью #css

Пишете на Python или Go и хотите работать в Яндексе? Или хотите перейти на них с другого языка программирования? Тогда приглашаем 26–27 февраля на Fast Track для бэкенд-разработчиков. На мероприятии, которое пройдет в онлайн-формате, вы сможете за пару дней получить оффер в команду, которая разрабатывает FinOps платформу Яндекса. FinOps платформа — это внутренняя высоконагруженная финансово-операционная система, через которую проходят денежные транзакции всех сервисов Яндекса. Приходите работать с нами, задачи сложные, но действительно интересные. Регистрируйтесь, решайте отборочный тест и до встречи 26 и 27 февраля! #реклама

Emmet - это расширение для редакторов кода, которое упрощает и повышает скорость написания кода за счет использования сниппетов. Например, написав div>ul>li*3, вы можете создать вот такой блок: <div>  <ul>    <li></li>    <li></li>    <li></li> </ul> </div>. И сэкономить прилично времени!  Если вы еще не освоили emmet, то сейчас самое время. Быстрый мини-курс из статьи поможет вам в этом!  Ссылка на статью #статьи

Портфолио У вас есть готовые работы для портфолио, но вы никак не можете собрать их все в одном месте? Для вас бесплатный шаблон для сайта-портфолио разработчика! Он многостраничный и адаптирован под разные экраны. В демо-версию встроен color picker, для возможности подбора цвета основной темы. Пользуйтесь на здоровье! Ссылка на демо-версию Ссылка на GitHub репозиторий #дизайн

Динамическое автозаполнение При вводе в строку запроса Google, сразу предлагаются варианты для поиска и с вводом каждого нового символа генерируются новые варианты. Это и есть динамическое автозаполнение строки поиска. Как реализовать подобную вещь с помощью Node.js и React подробно описано в статье. Ссылка на статью #react #nodejs

React Animation Иногда хочется оживить сайт и добавить немного анимации. Здесь на помощь приходят специальные библиотеки для этой цели. В статье представлен обзор трех библиотек анимаций для React: - React Transition Group - React Reveal - React Spring Ссылка на статью #react