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

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

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

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

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

6 симпотичных бесплатных анимированных иконок для инструкции по мытью рук и других инициатив по борьбе с распространением вируса. В архиве готовые форматы в png, svg, json. А также исходники для Scetch, Figma, AI, XD, AE.