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
Периодическая таблица HTML

Начали изучать HTML или хотите прокачать существующие навыки?

Периодическая таблица HTML вам в помощь. Все возможные HTML-элементы объединены в одну таблицу, разбиты на категории и для каждого из них есть описание и ссылочка на дополнительную информацию. Ну очень полезный сервис.
Видео курс Гоши Дударя по изучению платформы Node JS, а также фреймворка Express. В ходе видео курса Вы научитесь создавать простейшие сайты на Node, а также изучите библиотеку Express.

#Курсы
​​Переходи в IT без вложений. Программа подготовки востребованных Front-End разработчиков с личным ментором online. Оплата только после трудоустройства, обучение востребованному стеку технологий и опыт коммерческой разработки в проекте. Если не найдешь работу, то обучение за наш счет.

Пройти тестовое задание 🙋‍♂️👉 https://clck.ru/Nstsd

👇Что тебя ждет:
1. Подготовка с личным ментором online по индивидуальной программе за 7 месяцев;
2. Жесткий контроль знаний на каждом этапе
3. Обучение востребованному на рынке стеку технологий: HTML/CSS/JS, React + Redux;
4. Отработка знаний в настоящем бизнес проекте, который дает опыт и строчку для резюме;
5. Общение с одногруппниками и студентами-разработчиками других потоков групповом чате slack (уже более 1500 участников)
6. Быстрое карьерное и финансовое развитие за счет программы поддержки на 2 года: митапы, мастер-классы, закрытые лекции со спикерами и offline интенсивы;
7. Гарантированное трудоустройство и первая зарплата от 100 000 рублей.

Требования к кандидату: 
• Обучение минимум 25 часов в неделю 
• Проживание или готовность к переезду в Москву для трудоустройства
Ранжирование – это процесс оценки страницы сайта и определения ее места в поисковой выдаче по заданному запросу пользователя. Механизм ранжирования можно описать так: поисковая система получает запрос от пользователя и анализирует на соответствие ему сайты, которые есть в ее базе данных. 

Как ранжируются сайты в 2020 году? Читайте в полной статье.

#Статьи
Вращающийся блок на чистом CSS

В данном уроке мы рассмотрим реализацию крутой анимации для вращения вложенных блоков друг в друга с некоторой задержкой по времени. Такую фичу можно реализовать для preloader на Вашем проекте.

#HTML_CSS
Сервис BrandColors показывает, как ведущие бренды используют цвет, чтобы выделить бизнес, рассказать свою историю и обозначить ценности. Вы можете посмотреть список компаний, некоммерческих организаций и стартапов в алфавитном порядке или через поиск найти интересующий бренд.

#Инструменты
Can I Use - если вы когда-нибудь интересовались совместимостью с неким браузером каким-нибудь свойством СSS, псевдоэлементом, форматом изображения, это значит, что вам пригодится сервис Can I Use. Он содержит постоянно обновляемые сведения о том, какие технологии поддерживают настольные и мобильные браузеры.

Расшифровка поддержки в виде цветовой схемы:
1. Зеленый - поддерживается
2. Красный - Не поддерживается
3. Салатовый - Частичная поддержка
4. Серый - Поддержка неизвестна

#Инструменты
CSS3 Generator

Специальный инструмент для генерации кода CSS под множество предустановленных задач. Для его использования нужно зайти на сайт и нажать на «выбрать что-нибудь». После этого появляется плитка с разными функциями, после клика на которые появляются новые поля взаимодействия. Чтобы вернуться в стартовое меню, нужно нажать на значок в правом углу синей панели.

#Инструменты
Идея с конструкторами отсеклась в процессе голосования! Возможно Вы бы хотели видеть еженедельную подборку плагинов, шаблонов для Wordpress и DLE?
Anonymous Poll
43%
Буду только рад
57%
Нет, только программирование
Техника Помодоро 🍅 - техника управления временем, cамая популярная и рабочая методика в тайм-менеджменте. Техника предполагает разбиение задач на 25-минутные периоды, называемые «помидоры», сопровождаемые короткими перерывами.

Она состоит из следующих пунктов:
1. Определитесь с задачей, которую будете выполнять.
2. Поставьте помидор (таймер) на 25 минут.
3. Работайте, ни на что не отвлекаясь, пока таймер не прозвонит. Если что-то отвлекающее возникло у вас в голове, запишите это и немедленно возвращайтесь к работе.
4. Сделайте короткий перерыв (3-5 минут).
5. После каждого 4-го «помидора» сделайте длинный перерыв (15-30 минут).

После выполнения вы можете посмотреть, сколько помидоров ушло на одну задачу. Техника помогает сконцентрироваться на задаче.

Для удобства, можно скачать бесплатные приложения:
IOS: Flat Tomato
Android: Clear Focus
Gatsby - это бесплатная среда с открытым исходным кодом, основанная на React, которая помогает разработчикам создавать молниеносные веб-сайты и приложения.

Богатая экосистема плагинов для данных Gatsby позволяет создавать сайты с нужными вам данными из одного или нескольких источников: извлекать данные из handless CMS, сервисов SaaS, API, баз данных, вашей файловой системы с помощью GraphQL.

Gatsby.js - это генератор PWA (Progressive Web App). Вы получаете код и разделение данных из коробки. Gatsby загружает только основные HTML, CSS, данные и JavaScript, поэтому ваш сайт загружается максимально быстро.

#JS
Backbone.js - javascript фреймворк, который дает структуру веб-приложениям, предоставляя моделям привязку значения ключа и настраиваемые события, коллекции с богатым API перечислимых функций, представления с декларативной обработкой событий и соединяет все это с существующим API через интерфейс RESTful JSON.

#JS
Пришла пятница, а это значит - время смотреть что-то интересное.

Кибер (2015)
Драмы, Триллеры, Детективы

После того как мир опутала цифровая паутина и все мы стали частью глобальной сети, никто не может ничего гарантировать. Неизвестный хакер показал мировому сообществу, насколько незащищенными стали пароли, данные, личности, деньги, жизни… Его жалость к другим распалась на двоичный код и он этого не скрывает. Чтобы остановить кибер-террориста, который одним нажатием кнопки рушит судьбы миллионов людей, власти вынуждены идти на сделку с другим преступником.

КиноПоиск: 5.3
IMDB: 5.4

По версии кинокритиков - этот фильм очень недооценен.
CSS Grid Generator - мощный сервис, благодаря которому можно легко и быстро сгенерировать для своего проекта необходимую сетку на CSS Grid. Или использовать его как один из элементов обучения.

#Инструменты
Выберите правильный ответ ниже.
Ответ
Anonymous Quiz
40%
Да
60%
Нет
Draggable - легковесная JavaScript, модульная драг-и-дроп библиотека от Shopify. Она предлагает развитый функционал перетягивания с быстрым переупорядочиванием DOM, чистый API и доступную разметку. Она поставляется с дополнительными модулями, которые можно включить, чтобы добавить такие функции как сортировка и подкачка, а также другие утилиты.

#JS
Лучшее на канале за последнюю неделю

1) Периодическая таблица HTML
2) CSS Grid Generator - мощный сервис, благодаря которому можно легко и быстро сгенерировать для своего проекта необходимую сетку на CSS Grid
3) CSS3 Generator - инструмент для генерации кода CSS под множество предустановленных задач
4) Tabler Icons - набор иконок.
5) Видео курс по изучению платформы Node JS.

Всем успешной разработки!

#Лучшее
Lighthouse - это прекрасный инструмент с открытым исходным кодом, созданный Google. Он сообщает вам о важных аспектах ваших веб-страниц, таких как SEO (поисковая оптимизация), Performance (производительность), Accessibility (доступность), Best practises (лучшие подходы) и прочее.

Особенность Lighthouse — возможность использовать этот инструмент в разных формах. Самый популярный вариант — использование официального расширения для Google Chrome. Так же есть возможность использовать сервис прямо из панели разработчика браузера Chrome либо через веб-интерфейс.
Следует учитывать, что при использовании веб-интерфейса вам не придется ничего устанавливать, однако вам будет доступен не весь функционал.

#Инструменты
iziModal.js - современный плагин, который позволит Вам создавать красивые модальные окна с оригинальным дизайном. Всплывающие окна на jQuery можно настраивать с разными эффектами и разметкой. Есть готовые варианты для фрейма, формы, AJAX`a. Все, что необходимо — это подключить библиотеку и стили плагина. Библиотека имеет отличную документацию.

#jQuery
Было бы Вам интересно изредка видеть удаленные вакансии по веб-разработке?
Anonymous Poll
70%
Да
30%
Нет, мне нравится нынешний формат