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
React и Node.js

Что может быть лучше фронтенда и бэкэнда на одном языке?
Это упрощает процесс разработки приложения!

Если интересно, как комбинировать React с Node.js, то рекомендуем к прочтению данную статью.

#nodejs #react
OwlLabs

Яркий дизайн лэндинга для устройства Owl Labs в формате Figma.

Уровень сложности: простой
Ссылка: https://www.figma.com/file/PFvW6PZlbfBAanaS8uYzOY/Owl-Labs?node-id=2%3A8

#дизайн
console.log

До сих пор отлаживаете сайт с помощью console.log?

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

#статьи
Отзывчивость сайта

З приема для отзывчивого сайта, сокращающих использование медиа запросов.

Всего несколько шагов и ваш сайт будет хорошо выглядеть на всех разрешениях экранов!

#css
Работа с массивами

12 полезных приемов работы с массивами:
1. Конвертирование массива в объект
2. Объединение массивов
и многие другие, вы найдете в статье.

#javascript
30 seconds of code

Потрясающий сайт на котором собраны снипеты JavaScript, CSS, React Hooks и другие.

Очень ценный ресурс для начинающего разработчика!

#инструменты
Redux Middleware и WebSockets

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

В статье объясняется, что такое Middleware и как использовать с ним веб сокеты.

Очень много примеров и полезного кода!

#react
Обучение Node.js

Ссылка на серию статей, обучающих кодить на Node.js.

Для изучения вам понадобятся базовые знания JavaScript.

#nodejs
Видео сток

Хотите немного оживить сайт?

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

Очень круто, что есть такие ресурсы! 
И мы делимся с вами ими! -)

#дизайн
BEM

Вы еще до сих пор не разобрались c BEM? Или может не полюбили эту методологию?
Дайте ей еще один шанс!

Немножко поясним для тех, кто не в курсе, что это за три буквы.

BEM(Block Element Modifier) - это компонентный подход к веб-разработке. В его основе лежит принцип разделения интерфейса на независимые блоки для удобства дальнейшего переиспользования.

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

Очень понятное объяснение данной методологии в статье! С картинками и примерами -)

#статьи
Grid

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

25 уроков общей длительностью 4 часа и вы овладеете необходимыми знаниями!

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

#css
Callback

Простое и забавное объяснение с иллюстрациями callback функций.

Если не до конца разобрались в этой теме, то рекомендуем почитать эту статью!

#js
noUiSlider

JavaScript-библиотека для создания слайдера диапазона с поддержкой для сенсорных экранов.

Слайдер адаптирован под разные расширения экрана и протестирован на кроссбраузерность.

А еще, эта библиотека мало весит!

#инструменты
Поздравляем вас с наступающим 2022 годом!

Пусть в наступающем году будут мегабайты хорошего настроения, гигабайты везения и терабайты успеха! 

Желаем продвижения в карьере, удачных ревью кода, поменьше багов и повыше зарплат!

До 9 января канал будет на каникулах.
Встретимся в новом году!
Хостинг

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

Да-да! Помимо Github Pages можно еще где-то размещать свои сайты!

#статьи
transform

Очень подробная статья о свойстве transform и всех его значениях. 

Много визуального и интерактивного контента, чтобы подвигать, попереворачивать элементы и разобраться, как работает rotate, translate и другие значения этого свойства!

#css
Метод flatMap

Данный метод был представлен в стандарте ES10 (ECMAScript2019).

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

Сравнение с методом map и примеры использования подробно в статье!

#js
Обучение Git 

Ресурс для интерактивного обучения использованию Git.

На практике изучите основные команды и попробуете те, которые еще никогда не использовали в своих проектах. Например, cherry-pick!

#инструменты
Собеседование React

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

И React пока лидер по популярности!

Для вас очень полезный ресурс с вопросами и ответами для подготовки.

#react
О Node.js

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

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

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

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

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

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

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

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

#дизайн