CodeRoll | Frontend
5.04K subscribers
1.59K photos
73 videos
1 file
899 links
— Лучшее для разработчика и дизайнера / IT инструменты, курсы и книги
— Веб-разработка на JS, HTML, CSS, React, Vue,Angular

Купить рекламу: https://telega.in/c/coderoll

Чат: https://t.me/coderoll_chat

По всем вопросам пишите сюда - @yankovsky_ads
Download Telegram
О Node.js

Интересно, а в курсе ли вы вообще, то такое Node.js?

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

Специально на эту тему статья.

#nodejs
Неоморфизм

Если вы как разработчик, никогда не слышали о неоморфизме, то немного расскажем, что это такое.

Неоморфизм - это такой стиль в веб-дизайне, который использует размытие, угол и интенсивность тени объекта для его выделения. Такой дизайн выглядит реалистично, футуристично и интересно.

В статье рассказывается как создать такой эффект с помощью CSS. Там и демо с примерами есть, и ссылки на генераторы CSS кода.

Может пригодиться вам для дизайна ваших проектов. Да и вообще всегда полезно расширять кругозор!

#дизайн
Ревью кода

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

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

#статьи
Flexbox

Бесплатный курс по Flexbox.

На курсе вы изучите все основы по флексам, как центрировать элементы с помощью этой технологии, как использовать flex-grow, flex-shrink и flex-basis на практике. Там есть парочку интересных примеров, которые вам пригодятся!

Курс всего состоит из 20 уроков и доступен после подписки по e-mail.

#css
Массивы

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

В статье представлены наиболее часто используемые примеры работы с массивами.
Например, удаление дублирующихся элементов, преобразование массива в объект и многие другие!

Читать статью

#js
Справочник для разработчика

Документация по HTML, CSS, JavaScript на русском языке!
На этом ресурсе вы также найдете информацию о Docker, Webpack, Node.js и многом другом.

Еще хочется отметить материалы на тему операционных систем, веб-серверах и о том как устроена сеть. Это очень полезно знать разработчику!

Смотреть справочник.

#инструменты
Перерисовка компонента

Постоянная перерисовка компонентов нагружает приложение. 
Не все разработчики знают, как предотвратить нежелательную перерисовку.
И оказывается для этого есть немало способов!

5 из них вы найдете в статье.

Читать статью

#react
CMS на Node.js

Список лучших CMS на Node.js с описанием преимуществ и какую функциональность они предоставляют.

Читать статью

#nodejs
Векторные логотипы

Ресурс на котором собраны логотипы различных мировых брендов в формате SVG.
Там можно найти логотипы и на IT тематику. Например, php, vue, node.js и другие.
Или же иконки популярных соцсетей: facebook, instagram, vkontakte.

Сохраняйте в закладки!

Ссылка на ресурс

#дизайн
Скелетные шаблоны

Скелетные шаблоны - что это? Их еще называют заполнителями контента, превью интерфейса.
Скорее всего, вы уже видели их раньше, так как они используются некоторыми крупными компаниями, такими, как YouTube, Facebook и Medium.
Главное назначение этих заполнителей - скрывать еще не подгрузившийся контент.

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

Читать статью

#статьи
CSS 2022

Предсказания автора о том, что же стоит ожидать для CSS в 2022 году.

@layer, функции color-mix(), color-contrast(), :has()... Все это вам не знакомо?

Для знакомства советуем почитать данную статью. Там еще много всего интересного!

Читать статью

#css
Чистый код

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

Читать статью

#js
survey.js

JavaScript библиотека для создания различных опросов, анкет и тестов, которые легко можно встроить в ваше приложение.
Доступны версии библиотеки для Angular, jQuery, React и Vue.js.

Смотреть

#инструменты
Бесконечный скролл во Vue

Если вы пишите на Vue, берите на заметку!

В статье показана простая реализация бесконечного скролла для страницы с помощью npm пакета 'vue-observe-visibility'.

Читать статью

#vue
Node.js и Docker

Статья на тему, как создать Docker контейнер для приложения на Node.js.

Если вы не знаете, что такое Docker, по-простому это что-то вроде виртуальной машины.

Более сложное объяснение:
Docker – это программная платформа для быстрой разработки, тестирования и развертывания приложений. Docker упаковывает ПО или приложение в блоки, которые называются контейнерами. Каждый контейнер включает все необходимое для работы приложения: библиотеки, системные инструменты, код и среду исполнения. 

Читать статью

#nodejs
SVG генератор

Сохраняйте в закладки супер полезный ресурс!

Коллекция бесплатных SVG генераторов для градиентов, шаблонов, фонов и декоративных элементов.

Ссылка

#дизайн
Базовые знания

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

Автор делится своими мыслями по этому поводу и дает рекомендации. Так же вы найдете в статье ссылки на полезные ресурсы для изучения HTML, CSS и JavaScript.

Читать статью

#статьи
width и height

У данных CSS свойств, помимо числовых значений могут быть еще и такие, как: min-content, max-content и fit-content.

Познакомиться с ними, узнать разницу и как применять на практике, вы можете в данной статье.

Читать статью

#css
Spread

Spread cинтаксис(...) был представлен в спецификации ES6 и уже прочно вошел в обиход каждого разработчика. Он ценен тем, что позволяет сделать код чистым и понятным.

Если вы еще его не освоили, то это статья для вас! В ней куча примеров и способов применения данного синтаксиса.

Читать статью

#js
Справочник для разработчика

Нет ничего лучше ресурса, где собрано много полезной информации!

И сегодня хотим поделиться одним из таких. На нем вы найдете примеры готового кода для HTML, CSS, JavaScript и других языков и технологий.

Например, вы сможете найти такую полезную информацию: как с помощью JavaScript обнаружить, что пользователь использует Андроид устройство или как форматировать валюту.
В общем, там масса интересных штук!

Ссылка на ресурс

#инструменты
GraphQL

Пора осваивать новые технологии!

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

GraphQL - это язык запросов для API и он имеет ряд преимуществ. Например, дает возможность запрашивать именно то, что нужно, и ничего больше. Для этого нужно просто добавить больше свойств в запросы вместо добавления нескольких конечных точек.

В статье показан пример, как делать такие запросы в React приложении и обрабатывать обновления в реальном времени на стороне клиента.

Ссылка на статью

#react