Convert a Website to SVG

Allgemein, Development

It might not be a common task to convert a Website to SVG but in my case I wanted to have a screenshot that I could scale like a website but that was independent from reloading stuff from the internet. Background is that I wanted to embed a tweet in one of my slides for a talk.

So far I did that with a screenshot but that is not scaleable so depending on the projector it wold show up either very small or as pixel-art. Most of the things in such an embedded tweet are text and should be scaleable to almost any size, I thought. So why not get a vector-graphic instead of a pixel-graphic from that embedded tweet?

And after asking for help on twitter I found (thanks Stephan) HiQPdf that can convert pasted HTML into SVG.

Create the SVG

So I copied the complete website from the embed-preview on twitter into the HiQPdf-Form and got an SVG-file that looked the same as the webview from Twitter. So it works.

Though when I wanted to include that SVG like the screenshot I took previously, I realized that something was not quite as good. The width was not correctly set, so I had do do some manual work afterwards as well.

And it turned out that from the 100kb I got as an SVG-file I could remove almost 84kb as they where empty statements that did nothing at all. And the width and height-values that were given in the SVG-tag where also not completely correct. So after removing the bloat and setting the width to a better value (by trial and error) I even got a file smaller than the sceenshot I took previously. 16kb for the SVG compared to about 24k for the PNG.

And then the SVG behaved exactly like the PNG except for the better scalability!

So all in all using SVG instead of PNG for screenshots can work out great with a tool like HiQPdf (there for sure a re multiple others, I just didn’t test them) but be prepared to at least set the width and height correctly and if you want to have smaller files also expect some manual work to debloat the SVG.

And here are the results:

PNG

PNG

SVG

SVG

Setting up IRC the weird way

Allgemein, Development

I’m not going into why you should use IRC here as that’s a full blog-post in it’s own. Just so much: When you’re doing OSS development then there is almost no ways around IRC.

But IRC in itself has had some major drawbacks for myself:

  • I couldn’t log into IRC from different devices under one name
  • conversations that took place when I wasn’t logged in where lost to me
  • I didn’t get notified of mentiones when I wasn’t logged in.

Continue reading Setting up IRC the weird way →

Scoping PHAR-files

Development, PHP

PHAR-files are a great way to bundle code that can then be used like a binary. Therefore PHAR-files are often used for tools that can be included in a CI/CD setup. As they are self-contained archives they use their own autoloading mechanism and therefore don’t depend on your code. Which is great if you want to use them as build-tools because the tools dependencies don’t interfere with your project dependencies.

Imagine you’d want to use a build tool that requires PHP 7.2 with your legacy code that still needs to run with PHP 5.6… Most probably your composer require --dev awesome/build-tool would not work because of a dependency mismatch. Even though you might be on PHP 7.2 at the moment. Using the PHAR-file removes that dependency as all the required files are contained within the archive. And the PHARs autoloader takes care of getting the right files.

Continue reading Scoping PHAR-files →