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
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%
Я не программист
TinyPng - сервис для сжатия изображений PNG и JPEG.

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

Как работает TinyPng?
TinyPNG использует умные методы сжатия без потери качества, чтобы уменьшить размер файлов PNG и JPEG. Из-за выборочного уменьшения количества цветов в изображении требуется меньше байтов для хранения данных. Эффект почти невидим, но он очень сильно влияет на размер файла!

В бесплатной версии разрешается загружать до 20 файлов, размером не более 5Мб каждое.
MODX Revolution - по словам разработчиков, это самая быстрая, самая безопасная, масштабируемая и гибкая система управления контентом в мире, идеально подходящая для современных веб-сайтов, которые должны выделяться.

Основные особенности:
— Доступны любые варианты дизайна для "натягивания" на систему. При необходимости можно создавать новые шаблоны и применять их в зависимости от типа добавляемого контента.
— Функция одновременной работы над двумя сайтами. Это особенно удобно при наличии сетки ресурсов.
— Удобный свой синтаксис тегов. Это одно их главных отличий данного инструмента от других CMS с открытым исходным кодом.
— Универсальность. Можно задавать ЧПУ-адреса страниц, все нужные заголовки, описания.
— Удобное использование на хостинге. Перенос на удаленный сервер максимально упрощен.
— Интуитивно понятная панель администрирования, с ней достаточно легко разобраться новичку.