I've been following the instruction on Scott Hanselman's blog for how to deploy ghost.js from source to an Azure Website. It mostly works, except the icons on the admin page show up as square boxes instead of the correct icon.
I enabled diagnostic logging according to the steps on this page but didn't find anything that looked suspicious (no error messages or anything).
Any tips on how I can debug this? I've tried following these steps multiple times, always with the same results.
Thanks
Ghost uses unicode characters for these icons. They are not images, they are rather normal unicode glyphs. If the font your browser is using by default doesn't have these glyphs it won't be able to display them. Some browsers will detect this (Firefox) and replace the glyphs from another font, while others (Chrome) might stick to the glyphs in the default font.
Try a different browser, and you should be able to see the icons, then change the font on your default browser.
Update 1:
Scott's instructions are missing a step. He asks you to comment the line in .gitignore that tells git to ignore checking in the CSS that gurnt just build in
# /core/client/assets/css
but you also need to comment the line under it to have git include the fonts as well
# /core/client/assets/fonts
Related
Is it possible to spoof Chrome plugins?
I noticed that their names are stored in Preferences and Local State file in /Users/mainuser/Library/Application\ Support/Google/Chrome/Default/Preferences and /Users/mainuser/Library/Application\ Support/Google/Chrome/Local\ State respectively (on Mac), but manually changing the contents of these files gets treated as file corruption. Any idea how to spoof it?
Plugin information are publicly available and are easily inspected with something like this:
var x=navigator.plugins.length; // store the total no of plugin stored
console.log(x);
var txt="";
for(var i=0;i<x;i++)
{
txt=navigator.plugins[i].name;
console.log(txt);
}
I assume you want to modify an extension that you have installed on your machine in order to improve it.
You can use the Developer Mode and load the modified extension:
Extensions that you download from the Chrome Web Store are packaged up
as .crx files, which is great for distribution, but not so great for
development. Recognizing this, Chrome gives you a quick way of loading
up your working directory for testing. Let's do that now.
Visit chrome://extensions in your browser (or open up the Chrome menu
by clicking the icon to the far right of the Omnibox: The menu's icon
is three horizontal bars. and select Extensions under the Tools menu
to get to the same place).
Ensure that the Developer mode checkbox in the top right-hand corner
is checked.
Click Load unpacked extension… to pop up a file-selection dialog.
Navigate to the directory in which your extension files live, and
select it.
Alternatively, you can drag and drop the directory where your
extension files live onto chrome://extensions in your browser to load
it.
If the extension is valid, it'll be loaded up and active right away!
If it's invalid, an error message will be displayed at the top of the
page. Correct the error, and try again.
Paranoid about browser fingerprinting I guess.
If you want hide navigator.plugins list, see this plugin :
https://github.com/bcaller/plugin-privacy-chrome
See content.js#L27 :
properties.plugins = vecw({}, true);
The "real" fix is to stop the enumeration of plugins for everybody, so there is no fingerprint information (after everyone upgrades):
https://bugs.chromium.org/p/chromium/issues/detail?id=271772
If you hide navigator.plugins, that is also an identifying (single bit) feature that will make you stand out since there will be very few users who hide navigator.plugins. Which is why you'd want to spoof.
From another answer, from #Hors Sujet, https://github.com/bcaller/plugin-privacy-chrome is a great place to start how to program a spoof. You'll want to look like the vast majority of Chrome users (I'm not sure that actually exists, though.)
But what you likely really want is EFF's Privacy Badger.
Start here to see the number of bits you can be fingerprinted by:
https://panopticlick.eff.org/
And then install Privacy Badger from here:
https://chrome.google.com/webstore/detail/privacy-badger/pkehgijcmpdhfbdbbnkijodmdjhbjlgp
I can see canvas (lines, drawings, etc.), but not canvas text in Firefox profile A.
I'm on Firefox 38.0.5 EME-free on Windows 7. I haven't done anything to the Firefox folder. I can see canvas text on my other profile B.
Here's an example of what I want to be able to see: HTML canvas fillText() Method.
Profile A: the canvas appears as a white rectangle.
Profile B: I see "Hello World! Big Smile".
I tried about:config and searched for "canvas", but the entries were the same in both my profiles.
In Detecting HTML5 Features - Canvas Text, it says:
Your browser supports the canvas text API
I get these logs in the browser console if I load the w3schools site:
NS_ERROR_FAILURE: Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsITaskbarTabPreview.invalidate]
WindowsPreviewPerTab.jsm:406:0
The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol.
tryit.asp
POST ...w3schoolslink...tags/tryit_view.asp
[HTTP/1.1 200 OK 210ms]
The character encoding of a framed document was not declared. The document may appear different if viewed without the document framing it.
tryit_view.asp
And the last two if I click "See Result" on the same w3schools page.
Don't tell me to reset Firefox. I've spent years customizing it just the way I want.
Is it possible that you don't have the used font in both profiles?
I have seen these rectangles as text in cases where I was trying to show "letters" that are not part of the used font. For example I tried to show musical symbols which are defined in unicode, but the most fonts I know don't support them.
Preamble
It seems this issue is not present in Firefox 41.0.1.
Fix1 - TL;DR
Set gfx.direct2d.disabled to false.
Fix2 - Alternative
When gfx.direct2d.disabled is true
Set gfx.canvas.azure.backends to cairo
Using Fix1 has the side effect of botching fonts in webpages and view-source (at least for me), while this can be used to keep direct2d disabled while still rendering canvas text.
I tested that after stumbling on this:
Bug 842521 - PDF.js won't render text when DirectWrite is enabled with both Skia and Cairo backends
The long answer for Fix1
While this is not really a programming question, in the hope that it gets migrated rather than deleted, I have a possible solution.
I ran into the same issue where my regular Firefox profile would not display canvas text while a fresh profile had no issue. Using safe mode was also ineffective.
Going through preferences in about:config, I eventually toggled gfx.direct2d.disabled to false and text in canvas was then available after restarting the browser.
The likely cause of gfx.direct2d.disabled being set to true is having disabled hardware acceleration by unchecking Use hardware acceleration when available in Options > Advanced.
Note that toggling that preference alone will not be considered by Firefox to reenable hardware acceleration, as that only happens when changing the pref layers.acceleration.disabled, which has apparently no influence over this issue.
My website system is running on chrome 37+ and using Angular.js and bootstrap.
For some reason, I can't print my website.
When i try to print my website (using the browser print dialog), I usually get a blank print preview ("can not load print preview"). Sometimes it is not blank, but not really show my website.
I tried to run my website on some google chrome versions and some computers and it is not working.
I have been searching for reasons, but can't find one that will fix this issue.
Let my know for reasons for this issue. Thank you.
Chrome actually does have emulation of printing. See
You'll find this in a tab adjacent to console within developer tools. By enabling CSS media on print, you'll see your site with any print media applied. Once enabled, you may use the element inspection as usual to see how those extra css rules affect your site.
In particular, bootstrap will remove any background, and run a bunch of defaults across many typical elements.
Also, see this answer https://stackoverflow.com/a/21156904/2923245
Background:
We are trying to integrate Google Fonts into an interface we are developing; where users will choose a font, and then get a quick preview of the font.
With Google, you need to load in a stylesheet for the fonts... so we would need to change this whenever the user selects a different font.
Question:
Is is possible to load in a stylesheet on the fly with JS and have the changes be visible to users instantly?
Yes... It's very much possible
example can be found here:
http://www.rickardnilsson.net/post/2008/08/02/Applying-stylesheets-dynamically-with-jQuery.aspx
It is definently possible, as it has been used in the Google Web Fonts Preview extension for Chrome. You might want to have a look at the source code of the extension to see how the author made this work.
First, you'll want to install the extension from the link above into Chrome. Then, you'll need to open a folder, depending on your OS:
XP %UserProfile%\Local Settings\Application Data\Google\Chrome\Profiles\Default\Extensions
Vista and later %UserProfile%\AppData\Google\Chrome\Profiles\Default\Extensions
OS X ~/Library/Application Support/Google/Chrome/Default/Extensions
Linux ~/.config/google-chrome/Default/Extensions
From here, find the identification string for the extension, which is engndlnldodigdjamndkplafgmkkencc. Now you can have a look at the code in the files to get an idea of how you can change the fonts on-the-fly. Just make sure you don't save any changes you make to the file; save them somewhere else on your computer.
I seem to run into this randomly. It usually displays the file normally, but sometimes it's all scrunched onto one line. I can't figure out what's causing it.
N.B.: In the current version of Chrome, this is actually done by clicking on the {} icon ("pretty print") on the lower left of the developer tools pane.
Ah, figured it out. The line endings on the problem file got set to Mac format somehow, while the rest of the files were Windows format. Not sure how the format swapped but it's easy to convert back (in Notepad++ just go Edit -> EOL Conversion).
You already answered your own question, but this is a good place to note that Chrome (as of v12, currently in dev channel) has a built-in pretty-print function that can make quick work of the typical one-line JavaScript files that all well-behaved websites generate. In Web Inspector's Scripts tab, select a file via the usual dropdown, and right click on the source code. Selecting "De-obsfucate Source" will format the file in a reasonable way, and even allow you to set breakpoints inside the newly reformated code. It's quite helpful.