Рубрика «svg»

Костыли из 90-х и принцип HTML First - 1
Кадр из презентации Frontmania 2022: Kilian Valkhof — Stop using JavaScript for that

Недавно на Хабре публиковался перевод статьи «Вам не нужен для этого JavaScript» с примерами, где код JS легко заменить на HTML.

На самом деле возврат к основам HTML, простым сайтам и читаемому коду без сложных фреймворков — довольно популярная идея. Сейчас всё больше сайтов создаётся по принципу HTML First.
Читать полностью »

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

Читать полностью »

Современные печатные платы достигают очень высокого уровня сложности. Особенно трудно разобраться в логике цепей питания. Так же сложность добавляет тот факт, что схемотехника от вендора в *.pdf дискретная. На схеме есть летающие фрагменты.

Язык Dot для Автогенерации Блок Схем Сложных Электронных Цепей - 1

Читать полностью »

Введение в SVG-анимации для верстальщиков - 1

Время идет, технологии меняются, набитые шишки копятся, настала пора обновить материалы по SVG-анимациям. Тем более, что тема для многих фронтендеров все еще остается странной и запутанной. В этой статье мы рассмотрим SVG-анимации с разных сторон, посмотрим на актуальное состояние дел, возможности и сопутствующие инструменты. Мы не будем разбирать каждое свойство и каждый хак. Слишком большой объем материала получится. Для этого есть MDN и ему подобные сайты. Задача текущей статьи — дать общее представление о том, что бывает, и от чего можно оттолкнуться, если вы решили изучать эту тему, а у вас полная каша в голове.

Читать полностью »

В этом тексте написал о забытом понятии: блок-схемы для разработки электроники. В ГОСТ(е) их называли Э1 (Схема структурная). Блок-схем это хороший уровень абстракции при анализе электронного устройства или PCB. Представил несколько атрибутов, которые сформировались при создании блок-схем. Привел примеры образцовых блок-схем. 

Как часто говорил университетский лектор: “Инженеры - это про схемы”. Также существует отличная английская пословица: “Картинка стоит тысячи слов”.

Почему важно создавать блок схемы?

1> Чтобы быстро ввести в курс дела новых людей.

2>Читать полностью »

Существует классическая задача:

Есть 2 емкости: 5 литров и 3 литра. Как отмерить 4 литра жидкости используя только эти 2 емкости?

Понятное дело что тут важно не сколько знание правильного ответа, а знание метода решения таких задач. Ведь вместо целевых 4х литров могут спросить отсчитать и 1,2,6,7 литров.

В этом тексте я решу эту задачу в общем виде при помощи конечного автомата. Так как тут явно можно проследить состояния и входные воздействия. Также я упомяну про малоизвестный язык Front-End разметки DotЧитать полностью »

0923_SVG_XXE_ru/image1.png

Вы решили сделать приложение, работающее с SVG. Набрали библиотек, запаслись энтузиазмом, и в итоге всё удалось. Но вот незадача! Внезапно вы обнаруживаете, что приложение отправляет странные сетевые запросы. Кроме того, с хост-машины утекают данные. Как же так?

Читать полностью »

Gnuplot. Пакуем выходной svg — в один файл - 1
Старый мем на новый лад.

Предыдущая моя статья "Gnuplot и с чем его едят" получила большой отклик и даже была переведена на несколько языков (видел на медиуме, встречал на немецком). Поэтому, раз тема актуальная, решил продолжить.

У меня появилась задача получать данные, а затем на удалённом сервере строить по ним графики и отправлять по почте. Причём графики должны иметь возможность отключать оси, приближать отдельные области графика, включать-выключать сетку. И вы знаете, gnuplot умеет выдавать подобные графики. Он даёт их в формате html или svg. Но вот незадача, вместе с этим файлом надо тащить ещё багаж данных в виде кучи javascript-файликов, картинок, css (в случае html), что сильно сужает применимость при отправке их по почте.

В результате, нашёл-таки решение данной проблемы и продемонстрирую её решение на примере svg-файла, для html будет аналогично. Поскольку нет возможности привести график реальных данных, где было использовано это решение, в пример взял шуточный мем про студентовЧитать полностью »

Для некоторых веб-сайтов и платформ в интернете важно отображать оценку материала пользователями в виде звёздного рейтинга. Недавно мне довелось реализовать для одного проекта компонент звёздного рейтинга со следующими требованиями:

  • Производительность (без использования картинок)

  • Адаптивность под разный размер

  • Доступность

  • Частичное заполнение звёзд (например, 3.5 или 3.2)

  • Легкая поддержка с помощью CSS

Я решил использовать SVG и не пожалел об этом. В данной статье будет рассмотрен данный способ реализации и как он работает в разных сценариях

Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js