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
Dopely colors - крутой сервис генерации цветовой палитры.

Основные преимущества:
— Поможет оптимально подобрать цветовое решение со всеми оттенками для Вашего веб-проекта.
— Выбор начальных цветов из ваших изображений и автоматически получите идеальную комбинацию.
— Установка дополнений для Photoshop, Illustrator Webflow, Adobe XD и Chrome.
— Экспорте своих палитр в несколько удобных форматов, таких как PNG, PDF, SCSS, SVG или скопируйте постоянные URL-адреса.
— Точная настройка своих цветов, регулируя температуру, оттенок, насыщенность, яркость и многое другое

#Инструменты
Chart.js — простая и в то же время довольно гибкая JavaScript библиотека для визуализации данных, популярная среди веб-дизайнеров и разработчиков. Она представляет собой прекрасное базовое решение для тех, кому не требуется большое разнообразие типов графиков и индивидуальных настроек, но кому достаточно, чтобы графики выглядели аккуратно, наглядно и информативно.

Основные возможности

— 8 типов графиков и диаграмм: линейный (Line), линейный с областями (Area), линейчатый (Bar), круговой (Pie), лепестковый «Радар» (Radar), полярный (Polar), пузырьковый (Bubble) и точечная диаграмма рассеивания (Scatter).
— Все типы графиков можно кастомизировать и снабдить анимацией, и все они адаптивны при работе в сети.
— Функциональность может быть расширена посредством использования плагинов.
— Хорошая документация.
— Поддержка через Stack Overflow.
— Поддержка браузеров IE9+.

#JS
6 крутых сериалов про айтишников.

Впереди майские праздники, а значит пора смотреть сериалы, ведь поход на природу в 2020 отменяется (сами знаете по каким причинам). Ловите подборочку для отдыха на выходных

1. Мистер Робот (Mr. Robot) – 2015 г.
2. Скорпион (Scorpion) – 2014 г.
3. В поле зрения (Person Of Interest) – 2011 г.
4. Компьютерщики (The IT Crowd) – 2006 г.
5. Силиконовая долина (Silicon Valley) – 2014 г.
6. Остановись и гори (Halt and Catch Fire) – 2014 г.
Subcolor — очень полезный инструмент и одновременно библиотека для генерации оттенков между двумя разными цветами.

Отлично подойдет как верстальщикам, так и дизайнерам. Генерирует цвета в HEX формате и копировать при помощи одного клика. Можно выбрать большое количество оттенков между цветами. Крутость этого сервиса в том, что вы можете его использовать как библиотеку, чтобы развернуть на своем сервере.

#Инструменты #JS
Стилизация radio кнопок для сайта

Чтобы Ваш сайт был круче конкурентов, всегда необходимо вносить какие то новшества. Как вариант, можете стилизовать радио кнопки с помощью CSS всего в 2 шага.

#HTML_CSS
Min Browser - это быстрый, минимальный браузер, который защищает вашу конфиденциальность. 

Min написана полностью с использованием CSS и JavaScript с использованием Electron и представляет собой программное обеспечение с открытым исходным кодом.

Основные особенности браузера:
— Информация от DuckDuckGo в строке поиска.
— Полнотекстовый поиск посещенных страниц
— Автоматическая блокировка рекламы и трекера
— Потребляет меньше энергии аккумулятора
— Задачи (группы вкладок)
— Темная тема

Этот браузер мы нашли у наших друзей https://t.me/opensourcefuture

#Инструменты #JS
Wappalyzer - классное расширение для браузера, которое моментально и бесплатно определит технологический стэк любого сайта, определение от CMS до языка программирования. Wappalyzer работает как локально, так и офлайн.

Доступно в Chrome, Firefox и Edge.

#Инструменты
October CMS - это бесплатная платформа CMS с открытым исходным кодом, основанная на Laravel PHP Framework . Тысячи цифровых студий и фрилансеров по всему миру любят October за его простоту , гибкость и современный дизайн.Их клиенты счастливы, потому что октябрь экономит им время и деньги.

Основные особенности этой CMS:
— Полностью готовая админка, с самым современным дизайном.
— Интуитивно понятный интерфейс.
— Локализация на разных языках, в том числе и на русском.
— Модульная система подключения плагинов с автоустановкой.
— Наличие готовых плагинов для разных задач
— Встроенный шаблонизатор Twig.
— Редактирование шаблонов прямо из админки.

Подойдет для проектов любой сложности. от сайта визитки до проектов eCommerce.
Для больших проектов, понадобятся знания PHP, для масштабируемости.

#CMS
This media is not supported in your browser
VIEW IN TELEGRAM
Прикольная реализация анимации. Ползунки добавляют крутости к походке идущему человеку,
Очень редко дизайнеры делают гайдлайны по стилизации элементов, Это пример того, как необходимо правильно составлять крутые стайлгайды. Побольше бы таких ответственных дизайнеров,
Prepros - очень мощный инструмент, который компилирует ваши файлы, переносит ваш JavaScript, перезагружает ваши браузеры и позволяет действительно легко разрабатывать и тестировать ваши сайты, чтобы вы могли сосредоточиться на их совершенствовании.

Основные особенности:
— Может скомпилировать Sass, Less, Stylus, Pug / Jade, Haml, Slim, CoffeeScript и TypeScript из коробки.
— Импортирует Bundle ES6 и модули из npm без записи файла конфигурации.
— Показывает, где именно у вас есть проблема в вашем коде. Забудьте черный экран, полный непонятного беспорядка.
— Поставляется со встроенным сервером HTTP & HTTPS. Он может обслуживать страницы прямо из папки вашего проекта или прокси с внешнего сервера, такого как WordPress, Shopify, XAMPP, Wamp, MAMP
— Автоматически перезагружает ваши браузеры каждый раз, когда вы вносите изменения в код.

Программа условно бесплатная, но очень солидная! Рекомендую! Есть бесплатная пробная версия.
Haml (язык абстрактной разметки HTML) основывается на одном главном принципе: разметка должна быть красивой. Это не просто красота ради красоты, Haml ускоряет и упрощает создание шаблонов до истинного хокку.

Пример кода на Haml:

Вместо
<div class='content'>Hello, World!</div>

Можно записать
.content Hello, World!

Haml можно использовать тремя способами:
— В качестве инструмента командной строки.
— Как плагин для Ruby on Rails.
— Как отдельный модуль Ruby.

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

#Инструменты
CMS-платформа WordPress объявила о выходе версии 5.4.1, в которой исправлены 17 ошибок и закрыты 7 уязвимостей безопасности.

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

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

#Wordpress
D3.js — мощная JavaScript библиотека для визуализации данных, с открытым исходным кодом. По сути своей, D3 больше походит на фреймворк, нежели на библиотеку. Работать с ней не так просто, особенно поначалу. Но существует множество полезных информационных ресурсов, посвященных D3.

Основные возможности
— Поддерживает многочисленные типы графиков, намного больше, чем подавляющее большинство других JavaScript библиотек (включая, например, диаграмму Вороного).
— На освоение нужно время. Менее понятная и очевидная, чем некоторые коммерческие библиотеки в списке (например, AnyChart). Компенсируется огромным количеством туториалов и реально крутым API.
— Сочетает в себе мощные компоненты визуализации и основанный на данных подход к манипулированию DOM.
— Легко дебажить с помощью инструмента исследования элементов в браузере.
— Море примеров.
— Функции генерации кривых.
— Drag-and-drop GUI.

#JS
This media is not supported in your browser
VIEW IN TELEGRAM
6 симпотичных бесплатных анимированных иконок для инструкции по мытью рук и других инициатив по борьбе с распространением вируса. В архиве готовые форматы в png, svg, json. А также исходники для Scetch, Figma, AI, XD, AE.
WhatFont - расширение для браузера Chrome, чтобы определить шрифт сайта.

Какой самый простой способ узнать шрифты, используемые на веб-странице? Firebug и Webkit Inspector достаточно просты в использовании для разработчиков. Однако для других это не так уж и просто. С этим расширением вы можете проверять веб-шрифты, просто наводя на них курсор.

Расширение также определяет службы, используемые для обслуживания веб-шрифтов. Поддерживает Typekit и Google Font API.

#Инструменты
У нас хорошие новости. Приступаем к разработке уникального шаблона для DLE CMS под кодовым названием "Reborn Theme", он будет абсолютно бесплатным. Какой тематики будет этот шаблон, какая цветовая гамма, какая функциональность? Это мы решим в комментариях у нас в посте, там же и создали опрос.

Тестировщики получают шаблон одним из первых.
После успешного релиза, планируется перенести его на Wordpress.
Вложенные ссылки в HTML.

Как известно, в спецификации HTML чётко указано, что вложенных ссылок нет и быть не может. Но разработчик интерфейсов в Яндексе предложил простой и вполне рабочий вариант решения данной проблемы.

Парсер браузера просто сломает ваш код, если он будет такого типа.
<a href="#post">
  Название поста
<a href="#category">Категория</a>
</a>

Решение проблемы
Чтобы пофиксить данное стандартное поведение браузера (который следует указаниям спецификации), достаточно вложенную ссылку обернуть в тег <object />

<a href="#post">
  Название поста
  <object>
    <a href="#category">Категория</a>
  </object>
</a>

#HTML_CSS
Openbase: графики популярности для npm и GitHub

Это расширение для Chrome, которое добавляет полезные графики загрузки и графики количества звезд в npm и GitHub. Это помогает вам каждый раз выбирать правильный пакет - изучая тенденции популярности различных пакетов.

Основные особенности:
— Количество звезд + исторический график (до 10 лет).
— Еженедельные загрузки + исторический график (до 5 лет).
— Удобная кнопка, чтобы увидеть больше информации о пакете.

#Инструменты
Web Developer Checklist - интересный сервис для веб-разработчика, который поможет по пунктам проверить готовность проекта к запуску. Доступен в виде сайта и расширения. Сервис поможет максимально понять, на сколько ваш сайт готов к аудитории и поисковикам.

#Инструменты
Кто какой язык изучает или уже знает? Можно выбрать несколько вариантов. Свой вариант пишите в чат.
Anonymous Poll
28%
PHP
38%
Python
59%
JavaScript
13%
Java
15%
C++
5%
Go
2%
Ruby
14%
Я не программист