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
3 совета начинающему разработчику

В начале пути у каждого новичка появляются сомнения и мысли: "Я ничего не могу понять...", " Наверное это не для меня...".

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

#статьи
10 крутых бургер меню

Бургеров много не бывает! В статье приведены достаточно интересные варианты. Читай и бери себе на заметку.

#css
Области видимости

Еще не разобрался в этой теме?
Все об областях видимости переменных простыми словами.
propeller.js

Библиотека для вращения элементов.
Работает как для мыши, так и для сенсора.
Для лучшей производительности использует requestAnimationFrame и GPU вычисления.

#инструменты
Структура проекта на React

В статье рассказано о структуре, построенной на предметно-ориентированном проектировании (Domain driven design).

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

#react
Оптимизация проектов на Node.js

В статье даны 6 советов, как повысить производительность проектов на Node.js.
Каждый совет подробно расписан и приведены примеры.

Бери на заметку и пробуй применить в своих проектах!

#nodejs
Доступность

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

В статье рассказывается о том, что такое доступность и как ее повысить.

#дизайн #доступность
Подготовка к собеседованию

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

В статье вы найдете ресурсы для подготовки к собеседованию!

#статьи
Анимация меню

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

#css
5 ошибок c Promise

С промисами проще работать, чем c callback функциями. Как минимум, потому что у них код читабельней.

Но и при работе с ними допускаются ошибки. Какие? Читай в статье!

#javascript
Phaser - это HTML5-фрэймворк для создания 2D-игр для десктопа и мобильных устройств.

Для визуализации использует WebGL и Canvas и может автоматически переключаться между ними в зависимости от поддержки браузера.
Игры можно развернуть на IOS и Android с помощью других сторонних инструментов.

#инструменты
Как управлять командой разработки и качеством на проекте?

Ребята из Skyeng, Flant, Райффайзенбанк и AGIMA ответят на этот вопрос 30 ноября в 18:00 мск.

Да-да, будет крутой онлайн-митап. Поговорим про:
— построение команды;
— систему мотивации разработчиков;
— грейдирование и переход на новый уровень;
— кубернетизации приложений.

В общем, будем говорить и о soft, и о hard skills. А главное — расскажем, какие боли есть у тимлида и как их решать.

Смотреть фильм будем на Youtube, а общаться в телеграм-чате.

Присоединяйтесь: https://clck.ru/YryAK

#реклама
React Хуки

Полная информация о React хуках с примерами.

В статье ты встретишь уже знакомые useState и useEffect, а также много других хуков, которые возможно никогда не использовал. 

#react
Обработка ошибок в Node.js

Правильная обработка ошибок - важная составляющая для надежного софта.

В статье приведены типы ошибок в Node.js и советы, как правильно их обрабатывать.

#nodejs
CSS генераторы стилей

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

#дизайн #css
Расширение для Google Chrome

Классная статья о создании расширений для Google Chrome.

В ней показан пример расширения, которое меняет фон для домашней странички Google.
Открывается расширение, вставляется url картинки и по нажатию кнопки "Подтвердить" фон меняется.

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

#статьи
CSS спрайт

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

В статье ты найдешь примеры, как использовать CSS спрайты.

#css
Ресурсы для изучения JavaScript

8 бесплатных ресурсов для изучения Javascript: сайты, блоги, видео и книги.

#js
Speech Synthesis API

Данное API позволяет конвертировать текст в речь, воспроизводимую браузером.

Вещь очень интересная, но в настоящее время поддерживается в экспериментальном режиме.

Демо и примеры как использовать данную вещь, вы найдете в статье.

А на русском языке про данный интерфейс можно посмотреть видео по ссылке.  

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

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

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

#react
Отладка Node.js

Привыкли дебажить с помощью console.log?

Узнай о других возможностях отладки Node.js.
Подробнее в статье.

#nodejs