Very short, but I think, may help a lot of people… Last time I spent a lot of time on the big issue with Phantom.js in Node app. Very common task: application should generate PDF files from input HTML code. Nothing difficult, yes? Yep, and it worked fine on my Node app… But one day, client said, that we should change font in document. Simple, we can just use font-face in input HTML styles, right? In theory, yes. Phantom.js and Node packages to use this library to convert HTML to PDF can use custom fonts and also other external assets like images.
With very popular html-pdf package we can use external, full link to assets, use absolute path to our local directory with files (using file:/// prefix) or specify base path in rendering options, and then use relative (to this base path) paths in our styles. And… it works fine. It also worked fine with custom fonts on my project. But only on local machine where I use MacOS. After deploying app to Debin, Ubuntu Server or CentOS server, PDFs are broken – with no selected text, but all pages are “images”, with many broken characters and very big results file (it isn’t strange if we have images, instead of text in PDF). Custom fonts have been used correctly, but PDF was broken, why?
It’s library and Phantom.js issue, but solution is very, very simple. We must install our custom fonts locally on production machine and do not attach them in CSS – just use as existing font-family! It’s because Phantom is external script and it can use system-wide fonts. Where should we place our files? There are directories. If you have issues with custom fonts and non-selectable text, just copy fonts to:
Continue reading “Integrate jQuery with Vue.js”
I was looking for someting like Fit on page for MyBB 1.8, but without good results. Build-in autoscaling is good, but not comfortable for me. I tried some code and find better solution. We can you Fancybox (or potential, any other similar JS library) to load images on demand in good-looking dialogs. Let’s do this.
Continue reading “MyBB – Fancybox Thumbnails”
Last time I implemented something like mix of select and input fields. User can type name, but should value in field should be from defined group. It should not only provide selection dropdown menu, but also suggestions during typing. There are a lot of ready solutions, but I decided to use native HTML5 tag – datelist. It’s very nice, so I decided to describe its and some issues with browsers.
Continue reading “[HTML][JS] Input + datalist with validation instead of selects”