Sinatra - CSS and Javascripts not loading on certain pages - browser

I'm currently developing an admin dashboard using Sinatra, and I'm finding for one route in particular, my stylesheets and javascripts aren't working.
The route is '/users/:id/?'
For some reason, when I hit that page, the browser is looking for http::localhost:9393/users/css/my_stylesheet.css instead of public/css/my_stylesheet.css and so-on. Why is this happening with this route? The layout file (containing the stylesheet and script links) is that same for this route as it is for any other.

Never mind. Went on the #sinatra IRC channel and asked. My problem was how I was referencing the links in my haml views. I need to use the url helper #{url ('/path/to/asset.css')} in my code instead of hard-coding the links in.

Related

How do I make Outlook-addins maintain URL fragments to support single page applications?

I've found that when launching an Outlook add-in, the URL that you configure in the manifest does not persist the fragment URL and this breaks Single Page Applications (SPAs). It works fine if you are just trying to go to the default route of the SPA e.g. index.html but if you try and go directly to a fragment URL (route) within the app then it doesn't work e.g. index.html#mypage
The index.html#mypage actually gets changed to this:
index.html?et=&_host_Info=Outlook|Web|1…_1480636166782|ocii1|https://outlook.office.com/owa/?realm=XYZ.com#&_serializer_version=1mypage&_xdm_Info=-133b2041_-3d735892_1480636166782|ocii1|https://outlook.office.com/owa/?realm=XYZ.com
Further explanation of the issue can be found here:
https://camerondwyer.wordpress.com/2016/12/02/issues-launching-outlook-add-ins-directly-to-a-spa-route-using-fragment-urls/
Moving to HTML5 style URLs is not currently an option for me so routing within the SPA needs to use the Fragment URL (hashbang). I imagine anyone trying to start an add-in and pass parameters in the URL would be seeing a similar problem.

Require not defined

I'm trying to learn expressjs.
I have a script inside the public/javascripts folder with a require call.
The browser is reporting that require is not defined.
How can I solve it?
require() is something that you use with expressjs on your server in your nodejs code, not in your browser pages.
Scripts in your browser pages are generally loaded with <script> tags, though there are loading libraries that can be used to provide require() like functionality in the browser, but those are not needed to use expressjs for your server.
Probably your solution is to use a <script> tag in the web page to specify the script you want loaded in that web page and to add some express.static() routes in your expressjs code to instruct your nodejs server to serve the scripts in the script directory to your web pages.
With more detail about what you're trying to do, a more specific answer could be provided.
I'd suggest reading about Serving Static Files in Express.

how to load iframe using contentscript and override xframe

First of all, is there another built in way to do this like webview is in phonegap, so I can load an external site into a div or div like element. I know webview exists for chrome apps, but i couldn't find anything for extensions.
Basically i want to show preview of pages on links..
To do that I am trying to load urls of links using by setting src of iframes using content script. However, for most urls, I get an error that xframe not allowed.
what are my options.
xframe is pretty full proof, however, if you aren't referring to specifically an iframe, you could always use a web-proxy such as node-unblocker for node.js, or miniProxy for PHP.

html base tag with different domain from the top domain gives security issue

I've a website which displays and edits the contents of a different web pages like adding css codes to them.
It works like this, i use curl to get the contents of webpages then i edit the content and add base tag with href attribute which points the url that i got the contents of it. Then i put the edited content to an iframe on my website. It was working for a year, but yesterday i noticed an error that google chrome shows me the security warning page.
I've tried so many things to fix this problem but i couldn't fix it. when i use the base tag with different domain from the top domain, it shows the warning page. Do u have any idea how can a pass this problem. I have to use base tag with a different domain from the base tag.
It looks that was google side error :D We contact with them and the problem is fixed :)

AngularJs Routing without hashtag in link?

I've recently began learning AngularJs for web development and am loving it so far. However, I'm not so sure about having hashtags withing the link when routing between views. My main concern is how Google will cache the pages on the site and whether the links will work both ways, i.e. whether users can just click www.sampledomain.com/#/orders/450 and be directed straight to the order page. Is this an okay method or is there a way to route views without the hashtag?
When I remove the hashtag, the reload the page and gets 404 error. Can anyone give me a decent explanation of what is going on. Thanks
When I remove the hashtag, the reload the page and gets 404 error
That's because in your server side code you are probably not handling a request like "www.sampledomain.com/orders/450"
You can have your server-side code handle this request by either returning a redirect to the new URL ("www.sampledomain.com/#/orders/450") or just return the correct HTML directly. The "right" solution will depend on your needs.
User can just click link with a hashtag and it will be directed straight to the order page.
Google treats links with hashtags as different URL's when the content is different. It's more about SEO then angular.js, but here is an article about that: The First Link Counts Rule and the Hash Sign - Does it Change PR Sculpting?
You might want to set Angular's $locationProvider to use html5Mode.
FTA:
$location service has two configuration modes which control the format of the URL in the browser address bar: Hashbang mode (the default) and the HTML5 mode which is based on using the HTML5 History API. Applications use the same API in both modes and the $location service will work with appropriate URL segments and browser APIs to facilitate the browser URL change and history management.
html5Mode will give you "normal" urls in modern browsers while falling back to hash bangs on older browsers.
An html5Mode url:
http://foo.com/bar?baz=23#baz
a hashbang url:
http://foo.com/#!/bar?baz=23#baz

Resources