OpenLayers's CSS breaks after publishing to Azure Web Site - azure

I've created a very simple ASP.NET 4.5 MVC4 web site which uses OpenLayers 2.12. It's got only one page that shows a map with a few points and lines on it. If I run it locally, it runs fine, but after publishing to my Azure Web Site, the OpenLayers' CSS files won't load. I have now added the OpenLayers CSS hard coded in my bundleConfig, and now it works fine. But of course, this is not what I want, because OpenLayers has specific CSS files for other platforms and browser versions etc.
Locally, I just have to include openlayers.js and OpenLayers then adds the right css files. Does anybody know why this doesn't work after publishing to Azure?

From the docs in openlayers.js:
Please remember that when your OpenLayers script is not named
"OpenLayers.js" you will have to make sure that the default theme is
loaded into the page by including an appropriate <link>-tag,
e.g.:
(code)
<link rel="stylesheet" href="/path/to/default/style.css" type="text/css">
(end code)
Because Azure changes the file names that are included, I indeed should be adding the reference to the default style myself. Also, I can just link to style.css, the other css files for e.g. IE6 or Mobile won't be uses automatically, these are just there for yourself to use it when appropriate.

Related

Site wide HTTP Header for Tags

I have just inherited a massive old HTML site that I want to track on Google analytics. It's nearly a 1000 pages of good old '90s html.
I've been running a web server for many years but am not a coder in any particular language although I do edit my PHP config files and my HTML files, install and configure modules in Mediawiki, phpBB and Drupal. I am currently on Svr2016, IIS10. For this HTML site, how would I include the Google tag (or any other tracking tag) in the header on every page served from my IIS console?
I need a pretty cut and paste or point and click solution.
Assuming you’re using IIS and have SSI enabled (SSI= server side include).
I would create an include file (server side include - could be .shtml) and paste the google analytics or tracking.
Then, I would find a file such as footer that’s used by all the other files and include it.
Or maybe put it other common files like navigation that’s used site-wide.
See sample use/issues.
https://serverfault.com/questions/244352/why-wont-ssi-work-in-iis

building website with AMP

is it okay to build website completely using only AMP?
what will happen to the desktop version of the site?
does the code will be converted to normal html tag when viewer view the normal web page?
Yes, you can build your website using only AMP. Essentially, you'll be using AMP as a framework. The company I work for has the entire site (minus 3 pages) done using AMP as a framework: https://www.craigattachments.com/.
Depending on the size of your site, a few considerations you might want to make...
Templating is your friend. Create an overall CSS file for universal styles, and then template oriented styles based on your different page layouts.
If you're using a universal header.php file that will apply to all pages, you can use some if statements to filter out unnecessary CSS to avoid hitting the CSS limitation set by AMP. This also works for AMP libraries you may be using on one page but not another.
For our implementation we run about 9 different CSS files that we include into the tag using a PHP include_once and filter in and out of the header using an if statement based on which page template is being used - our site is built on Wordpress.
Have a look at the AMP Start page. They have some responsive page examples there.

Whitelist Chrome fonts via extension

I'm looking for a way to whitelist fonts that pages in Chrome can use. In Firefox I would just simply disable Allow pages to choose their own fonts, instead of my selections above in content settings but Chrome seems to be keen on letting web designers force ugly and often unreadable fonts on us.
I don't want to use * { font-family: sans; } style in Stylish, because I want to keep sans (or serif) and monospace sections, and web designers, insane as they are, usually keep those at the end of the font-family list.
I've done my research and I still can't figure out how to do it via Chrome extension API.
I considered intercepting requests for CSS files and modifying them in response but this isn't possible via current API.
I could also traverse the DOM tree, inspect CSS on each node and replace it appropriately but it'd expensive. Moreover this wouldn't work for pages which build the content from JavaScript. So I'd have to use MutationObservers and that would be way too expensive.
If I could somehow read CSS files that the current tab is using, I could collect the rules with font-family style and inject appropriate <style> element into the page via content script. But I couldn't find a way to read those CSS file via current API. (I'd also have to read <style> rules embedded in HTML but that's doable).
I could also do it via some proxy but I'm not sure how to (securely) cope with SSL.
I could get close with fontconfig. It gets rid of Arial but doesn't work for external (and usually most ugly) CSS fonts.
Is it possible to achieve my goal via current Chrome extension API? How? If not, what would be the workaround?
I don't care about inline styles and styles set from JavaScript. I can live with those. Vast majority of pages I'm concerned about use styles from external stylesheets.
EDIT
wOxxOm's advice to modify document.styleSheets is the way to do it and I've made a simple extension that worked on all sites! Unfortunately, in current Chrome, CSSStyleSheet#cssRules returns null for stylesheets loaded outside of page origin https://code.google.com/p/chromium/issues/detail?id=45786. T_T
(I'll of course publish the extension on GitHub and post the link here after I polish it).
EDIT 2
As wOxxOm suggested, blocking web fonts is also an option (though less ideal I'd say) and there even exist good open source extension for it https://chrome.google.com/webstore/detail/disable-web-fonts/olmabeadgbpmhllgdkemfdnmkngkbkeg. It needs some white list for iconic fonts though. Local fonts can then be managed via fontconfig.
This issue is probably related to ugly looking web fonts https://code.google.com/p/chromium/issues/detail?id=173207.
EDIT 3
I ended up with this nice (and open source) extension https://chrome.google.com/webstore/detail/font-blocker/knpgaobajhnhgkhhoopjepghknapnikl. It's a blacklist but that's enough for my needs and it works with iconic fonts. As far as I can tell, to implement a font whitelist extension I'd have to be able to enumerate all fonts loaded by a web page and that appears to be impossible in current Chrome (see first edit).

Liferay only html and js

I have maven project which I want place as portlet in liferay. This portlet will be single page application (inside portlet). I want to deploy this portlet which contains only html, js, and css.
I want expose ./src/main/webapp/index.html and other files js, css, html without updating portlet.xml or liferay-portlet.xml.
Is it possible to expose all content inside src/main/webapp as static resources. As my starting point index.html. I dont't want use any jsp. Is there any easy solution for that?
I.e
If I'll have index.html (src/main/webapp/index.html) and preview/invoices.js (src/main/webapp/preview/invoices.js). I want to put inside index.html and it will work. Without any additional configuration. Is it possible?
It seems like you didn't try this already: A portlet is nothing but a standard java web application with a few more deployment descriptors. Thus, your application is available as static resource out of the box. You won't gain anything from the portal integration if you don't go through portal URLs (e.g. who's the currently logged in user?), but you do totally can access all of your content from the browser.
In order to blend well into the portal, you should not render index.html out of the box but at least have a portlet with static HTML UI - reason is that a portlet is not supposed to include <html>, <head> and <body> markup, and out-of-the-box it doesn't have access to the head-section of your document where you might want to have css or js includes (same with the footer). With the portlet you can easily add your js to the end of the page and then go from there.
If you need information like the currently logged in user, their permissions etc., you should go through portal URLs instead of your webapp directly, because you'd just get the information you need this way.
"I want to integrate as a portlet without writing a portlet" sounds a bit like "I'd like to go swimming without getting wet". Make sure that this is not your case - a basic portlet (that delegates all of the implementation to JS) is no magic and not complex.
The easiest way to use html, css and js (if the development is not big) is to use the content-viewer portlet and insert all ass the content in html format
If what you want is bigger and you want to have over source control and deploy as a portlet, using the liferay ide(or eclipse with the liferay plugin) is really easy to create a maven portlet and then edit the default jsp.
Regards

XPiNC view icons

Is there a way I can load view icons (ex: vwicn001.gif) within XPages being rendered by XPiNC? Most of what I've found only seems to work with web browsers.
My work around has been to use image resources, as that seems to work in both environments.
Look at a normal client installation (not Designer) - the icons are not there. You need to add them into resources

Resources