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.

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 - интересный сервис для веб-разработчика, который поможет по пунктам проверить готовность проекта к запуску. Доступен в виде сайта и расширения. Сервис поможет максимально понять, на сколько ваш сайт готов к аудитории и поисковикам.

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

TinyPng - сервис для сжатия изображений PNG и JPEG.

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

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

В бесплатной версии разрешается загружать до 20 файлов, размером не более 5Мб каждое.

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

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

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

Лучшее за неделю:
1. Wappalyzer - расширение для браузера, которое определит технологический стэк.
2. Web Developer Checklist - интересный сервис для проверки готовности проекта к запуску.
3. October CMS - это бесплатная платформа CMS с открытым исходным кодом, основанная на Laravel PHP Framework .
4. WhatFont - расширение для браузера Chrome, чтобы определить шрифт сайта.
5. TinyPng - сервис для сжатия изображений PNG и JPEG.

Давайте наберем 50 огоньков под постом чтобы понимать, на сколько вам интересен такой формат, а лучше 100). Всем спасибо за участие и хорошие отзывы о нашей работе.

#Лучшее

RemoveBg - классный сервис для удаления фона с изображения. Благодаря умному искусственному интеллекту RemoveBg, Вы можете сократить время редактирования и получить больше удовольствия от работы с постами!

Так же для более удобной работы, вы можете интегрировать этот сервис в свои графические редакторы.

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

Directus - современная Headless CMS (система, которая отображает контент через RESTful API) с открытым исходным кодом, который объединяет пользовательские базы данных SQL с динамическим API и предоставляет интуитивно понятное приложение администратора для управления его содержимым.

Основные возможности:
— Настройка библиотек, инструментов и стека, которые лучше всего подходят для вашего проекта. 
— Полностью бесплатное программное обеспечение премиум-класса, без ограничений функций или лицензий, для личного или коммерческого использования.
— Directus отражает именно то, что находится в вашей базе данных SQL. Нет проприетарной модели данных или хранилища контента.
— Система компоновки сетки позволяет упорядочивать, группировать и позиционировать поля, создавая индивидуальные формы для всех ваших сборов данных. Вы можете выбрать из более чем 50 различных полевых интерфейсов.
— Управление многоязычным контентом в любом количестве языков.

#CMS

Что такое Канбан и для чего он нужен.

Канбан — система организации производства и снабжения, позволяющая реализовать принцип «точно в срок». Грубо говоря, это процесс, где нет простоя незавершенных задач.

Основные возможности использования канбана
— Уменьшение времени прохождения каждой конкретной задачи, а в последствии, выполнение всего проекта в целом;
— Быстрая обратная связь от отдела тестирования;
— Раннее вовлечение тестировщиков, благодаря чему при запуске проекта становится меньше проблем;
— Высокое вовлечение команды в процесс разработки;
— Выполнение проекта в срок за счёт уменьшения времени простоев и автоматизации интеграции;
— Высокое качество продукта.

jQuery Mask Plugin - плагин на jquery для создания масок в полях формы. Поддерживает огромное кол-во различных типов полей, от банковских карт до ip адресов.

Особенности плагина:
— Легкий (~ 2kb минимизированный, ~ 1kb gziped).
— Встроенная поддержка динамически добавляемых элементов.
— Маски для любого элемента HTML (больше не нужно маскировать на стороне сервера)
— Поддержка нотации HTML (data-mask, data-mask-recursive, data-mask-clearifnotmatch).
— Необязательные цифры.
— Рекурсивные цифры.
— Резервные цифры.
— Расширенная инициализация маски.
— Расширенные обратные вызовы.
— Смена маски на лету.
— Удаление маски.
— Полная настройка.
— Совместимость с React / UMD / Zepto.js / Angular.JS.
— Поддержка заполнителя HTML5.
—Очистка полей, если они не соответствует формату.

#jQuery

Leno - Mobile App Landing Page

Leno - это бесплатный HTML-шаблон целевой страницы мобильного приложения в темном стиле, созданный с помощью Bootstrap 4, чтобы помочь вам создать запоминающийся сайт-визитку для вашего приложения и превратить посетителей в пользователей.

#Шаблоны

LanguageTool - расширение для браузера Chrome, которое корректирует грамматику и орфографию. Находит множество ошибок, которые не могут обнаружить простые средства проверки орфографии.

Основные возможности:
- Не требует регистрации
- Поддерживает свыше 25 языков (см. ниже)
- Работает практически на всех сайтах, включая Gmail, Facebook, twitter

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

Что такое API и для чего он необходим?

API (Application Programming Interface) - это составляющая часть сервера, которая получает запросы и отправляет ответы. То есть, если говорить простым языком, API - это некая часть приложения, которая при взаимодействии с ней выдает или получает какой то набор данных.

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

Благодаря API идет четкое разделение на Фронтенд и Бэкенд.

Фронтенд — аппаратная часть сервиса со стороны пользовательского интерфейса клиента.
Бэкенд — является частью программно-аппаратной частью всего сервиса.

#Статьи