15 полезных сервисов (на самом деле 14 сервисов + 1 статья-чеклист) для фронтендера, которые упростят жизнь и сохранят нервы
📌Разметка и доступность
1. Emmet — генерирует HTML-кода из CSS-селекторов и не только.
2. Can I Include — подскажет, можно ли класть один тег в другой.
3. HTML head — содержит список всего, что может быть в <head> страницы.
4. Logical Content Flow — поможет обнаружить проблемы с заголовками, их порядком и отображением.
5. Build a Better Mobile Input — поможет подобрать <input> и атрибуты для него так, чтобы им было удобно пользоваться на мобильных устройствах.
6. Weblind — содержит рекомендации по разработке сайтов для людей с нарушениями зрения.
7. Inclusive Components Содержит примеры реализации слайдеров, аккордеонов и других компонентов с упором на доступность.
8. Axe — браузерный плагин для комплексной проверки доступности страниц.
9. Good Email Code Справочник и набор рекомендаций для «пуленепробиваемой» верстки писем.
10. How to Favicon in 2021 — статья-чеклист о том, как добавлять фавиконку на сайт без лишнего кода.
11. W3C Validator — валидатор HTML-кода.
📌Инструменты для оптимизации и работы с картинками
1. Squoosh — приложение, CLI и API для оптимизации графики.
2. SVG URL Encoder — кодирует SVG в URL-строку, чтобы использовать его в background без base64. При этом SVG остается читаемым, и его можно править прямо в CSS.
3. SVG OMG — оптимизатор SVG. Содержит массу настроек и позволяет ужимать неоптимизированные SVG в десятки раз.
4. Social Image Preview — предпросмотрщик изображений для соцсетей.
#инструменты
📌Разметка и доступность
1. Emmet — генерирует HTML-кода из CSS-селекторов и не только.
2. Can I Include — подскажет, можно ли класть один тег в другой.
3. HTML head — содержит список всего, что может быть в <head> страницы.
4. Logical Content Flow — поможет обнаружить проблемы с заголовками, их порядком и отображением.
5. Build a Better Mobile Input — поможет подобрать <input> и атрибуты для него так, чтобы им было удобно пользоваться на мобильных устройствах.
6. Weblind — содержит рекомендации по разработке сайтов для людей с нарушениями зрения.
7. Inclusive Components Содержит примеры реализации слайдеров, аккордеонов и других компонентов с упором на доступность.
8. Axe — браузерный плагин для комплексной проверки доступности страниц.
9. Good Email Code Справочник и набор рекомендаций для «пуленепробиваемой» верстки писем.
10. How to Favicon in 2021 — статья-чеклист о том, как добавлять фавиконку на сайт без лишнего кода.
11. W3C Validator — валидатор HTML-кода.
📌Инструменты для оптимизации и работы с картинками
1. Squoosh — приложение, CLI и API для оптимизации графики.
2. SVG URL Encoder — кодирует SVG в URL-строку, чтобы использовать его в background без base64. При этом SVG остается читаемым, и его можно править прямо в CSS.
3. SVG OMG — оптимизатор SVG. Содержит массу настроек и позволяет ужимать неоптимизированные SVG в десятки раз.
4. Social Image Preview — предпросмотрщик изображений для соцсетей.
#инструменты
🔥18👍9❤5
Forwarded from Библиотека программиста | программирование, кодинг, разработка
keyboard-shortcuts-linux.pdf
144.4 KB
#инструменты #шпаргалки
Please open Telegram to view this post
VIEW IN TELEGRAM
👍15
☝️🚀 Рейтинг JavaScript-библиотек для визуализации диаграмм с открытым исходным кодом за последние 28 дней
🔝Топ-5 в нашей подборке:
1️⃣ apache/echarts — мощная интерактивная библиотека, предлагающая простые способы добавления интуитивно понятных, интерактивных и легко настраиваемых диаграмм.
2️⃣ apexcharts/apexcharts.js — современная библиотека, которая позволяет создавать интерактивные визуализации данных с помощью простого API и более 100 готовых к использованию примеров.
3️⃣ chartjs/Chart.js — простые HTML5-диаграммы с использованием тега <canvas>.
4️⃣ d3/d3 — библиотека для визуализации данных с помощью SVG, Canvas и HTML.
5️⃣ recharts/recharts — библиотека для создания диаграмм, построенная на React и D3.
#инструменты
🔝Топ-5 в нашей подборке:
1️⃣ apache/echarts — мощная интерактивная библиотека, предлагающая простые способы добавления интуитивно понятных, интерактивных и легко настраиваемых диаграмм.
2️⃣ apexcharts/apexcharts.js — современная библиотека, которая позволяет создавать интерактивные визуализации данных с помощью простого API и более 100 готовых к использованию примеров.
3️⃣ chartjs/Chart.js — простые HTML5-диаграммы с использованием тега <canvas>.
4️⃣ d3/d3 — библиотека для визуализации данных с помощью SVG, Canvas и HTML.
5️⃣ recharts/recharts — библиотека для создания диаграмм, построенная на React и D3.
#инструменты
👍11❤2