Atom - это бесплатный настольный редактор кода, созданный с интеграцией HTML, JavaScript, CSS и Node.js.

Неудивительно, что он пользуется спросом, поскольку это продукт от GitHub, Atom обладает лучшим встроенным элементом управления Git, специально предназначенного для репозиториев GitHub.

Atom работает на разных операционных системах. 

Основные возможности:
- Встроенный менеджер пакетов
- Умное автозаполнение
- Браузер файловой системы
- Несколько панелей для удобной работы
- Находите, просматривайте и заменяйте текст по мере ввода в файл или во всех ваших проектах.

Теперь в Google Chrome можно группировать вкладки

Для этого нужно нажать на вкладке ПКМ и выбрать «Добавить в новую группу» или «Добавить в существующую группу». Каждой группе можно присвоить имя и закрепить за ней цвет, нажав на кружок возле вкладок.

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

chrome://settings/help

Если и после обновления функция не появилась, активируйте её в экспериментальных настройках. Перейдите по адресу и нажмите Enabled напротив Tab Groups:

chrome://flags/#tab-groups

Что такое CMS и как ее использовать?

CMS (Content Management System) — это система управления контентом, готовое коробочное решение для создания, редактирования и управления контентом сайта. На профессиональном жаргоне CMS также называют «движок». Примерами CMS являются WordPress, Joomla, OpenCart.

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

Основные особенности CMS:
- наполнять сайт контентом, изменять и администрировать ресурс, при этом не являясь IT-специалистом и не имея серьезных навыков программирования;
- создавать новые страницы в короткие сроки без лишних затрат;
- оптимизировать внешний вид сайта и улучшать качество его наполнения.

Dimensions — крутое расширение для Chrome, которое помогает измерять расстояния между элементами на веб-страницах. 

Основные возможности:
- Ваш дизайнер передал вам макеты в формате PNG или JPEG? Просто поместите их в Chrome, активируйте измерения и начните измерения.
- Хотите получить радиус круга? Стоит ли текст на вашем пути? Нажмите Alt, чтобы измерить размеры подключенной области.
- Настройка горячих клавиш.

Сервисы, которые помогут эффективно и удобно работать с дизайн-макетами.

1. Avocode – помогает быстрее обмениваться файлами дизайна, обсуждать изменения и кодировать веб-сайты, мобильные приложения и информационные бюллетени. Платформа для работы макетами для верстальщиков (PSD, Sketch и др)
2. Adobe Assets – работа с PSD-макетами прямо в браузере. Экспорт кода.
3. Zeplin – работа с дизайн-макетами как в браузере так и в десктопной версии. Есть экспорт кода.
4. PSD Tech – бесплатный аналог Avocode.

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

Автоматическое сохранение изменений CSS в Chrome

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

1. Откройте панель разработчика.
2. Перейдите на вкладку Sources. 
3. Выберите вкладку Overrides. 
4. Ниже выберите «Select Folder For Overrides». 
5. Выберите директорию, в которой вы хотите сохранять изменения. 
6. После выбора директории, появится запрос на чтение и запись в выбранную директорию. Выбираем "Разрешить". 
7. Меняем наш CSS в браузере, перезагружаем страницу и наши изменения будут сохранены.

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

HTML Purifier - это стандартная библиотека HTML фильтров, написанная на PHP. HTML Purifier не только удалит весь вредоносный код (более известный как XSS ), но также обеспечит соответствие ваших документов стандартам, чего можно достичь только при полном знании спецификаций W3C . 

 Ищете высококачественные, совместимые со стандартами компоненты с открытым исходным кодом для создаваемого приложения? HTML Purifier для вас!

HTML Purifier - это отличная библиотека для интеграции с существующими CMS и другими приложениями или редакторами WYSIWYG

Интеграция с:
MODx, Drupal, Wordpress and bbPress, Joomla, CodeIgniter, Symfony, CakePHP, Lithium, Elgg, SilverStripe CMS

Visual Center - определение центра на вашем изображении.

Visual Center - это open-source проект, написанный на javascript. Он рассчитывает значение визуального веса для каждого пикселя на изображении: квадратный корень из разницы между этим пикселем и цветом фона. И тогда алгоритм пытается сбалансировать этот вес во всех направлениях.

Пригодится тем у кого проекты нацелены под работу с изображениями.

#JS

Крутые кнопки для сайта на чистом CSS.

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

#HTML_CSS

Активные ссылки мессенджеров для сайта.

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

Ссылка на Telegram
<!-- для перехода к диалогу Telegram, где nickname название вашего имени или канала-->
<a href="tg://resolve?domain=nickname">Telegram</a>

Ссылка на Viber
<!-- ссылка на Viber для ПК -->
<a href="viber://chat?number=+120345678910">Viber</a>

<!-- ссылка на Viber для мобильных -->
<a href="viber://add?number=+120345678910">Viber телефон</a>

<!-- +120345678910 - номер телефона -->

Ссылка на WhatsApp
<!-- ссылка на WhatsApp, где +120345678910 - номер телефона -->
<a href="whatsapp://send?phone=+120345678910">WhatsApp</a>

Больше настроек по ссылкам можете найти в полной статье.

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

Прикольная реализация анимации. Ползунки добавляют крутости к походке идущему человеку,

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