I'm trying to use HTML5 Application Cache to speed some things up on an iPhone webapp. It works great for storing images, css and JS, but the problem is that it also tries to store the HTML. I haven't been able to get it to ignore the html and stop storing it in the cache. From what I've read, I have to "whitelist" the files and directories that I want to load no matter what. I've tried listing the files I want cached explicitly, and I've tried adding a series of things under the "NETWORK:" heading. I've tried
*
/
/*
http://mysite.com
http://mysite.com/
http://mysite.com/*
None of them seem to work. Is there any way to ignore HTML files by MIME-Type or anything? Any advice would be appreciated.
Ryan
P.S. Of course, my site is not mysite.com..I just used that for simplicity.
I've avoided this problem by NOT referencing a manifest in each page, instead I have the following within each page :
<iframe src="cache.htm"></iframe> - with styles to hide the iframe
inside cache.htm I have :
<!DOCTYPE html>
<html manifest="cache.manifest">
<head>
<meta charset="UTF-8">
<title>Main Cache Resource</title>
</head>
<body></body>
</html>
based on previous tests and discussions with people in the html5 "ecosystem", each html-page that specifies a manifest is automatically cached as well.
Related
I'm a beginner in web Dev.. I have a website that displays properly on localhost but when I publish and try to render it on Github, the background image doesn't show up.. What can I do to remedy this
Can you post a bit of code for us to look at?
My guess is that you have the background image referenced absolutely on the computer, and it needs to be a relative reference to render when hosted online, but I can't say for sure without having some code to look at.
A link to your github project would also help.
Edit: It looks like you perhaps renamed your startup.css to style.css and forgot to edit the html header link from startup.css, to style.css
I.e. change
<link rel="stylesheet" type="text/css" href="startup.css">
to
<link rel="stylesheet" type="text/css" href="style.css">
Previous suggestion (no longer likely):
As you mention Windows, one possibility is that you have mixed up Capital and small letters somewhere in the filename or path.
Simple web-servers on Windows are often forgiving (as is Windows filesystem) of these mistakes, while internet is not-
I have a .swf file that I want to show people. I thought it would be a good idea for them to be able to view the code, but I don't want them to be able to edit it, so then they don't mess up my work. Are there any good programs for that? I'm using windows.
Do you want .swf on website? If so you can use html code.
<!DOCTYPE html>
<html>
<body>
<embed src="helloworld.swf">
</body>
</html>
Short Version:
Is there a way, using Grunt, to include minified CSS and JavaScript inline?
To use usemin's formatting as an example, I would like to see something like this:
<!-- build:css inline -->
<link rel="stylesheet" href="styles/foo.css">
<link rel="stylesheet" href="styles/bar.css">
...
<!-- endbuild -->
<!-- build:js inline -->
<script src="js/foo.js"></script>
<script src="js/bar.js"></script>
...
<!-- endbuild -->
Turned into this something like this:
<style>body { color: red; } /*css is here*/</style>
<script>var foo = 1; bar = 'some javascript code is here'; ...</script>
Long Version:
So, I'm working on a Tumblr theme. In order to use CSS or JS files in a theme, they have to be uploaded to Tumblr. The only way to upload is a crappy little web form that often crashes. I'm trying to avoid this interface until I'm ready to upload the final code because
there's no way to delete uploaded files, and
while I'm in the middle of development, these extra steps take too much time
To get this, I've been copying my CSS and JS into <style> and <script> tags in my file, then copying the whole thing into the Tumblr theme editor. It's faster, so I'm happy with that, but manually copying and pasting CSS and JS into a file seems to go against the spirit of Grunt and the automation it provides.
Ideally, I would be able to run grunt build and have it spit out an html file with the CSS and JS inline, then I can just copy that into the Tumblr interface (well, ideally, I would be able to copy that HTML file to Tumblr, but Tumblr doesn't provide FTP or SSH or any useful interface, so I'll settle for this).
It seemed like grunt-usemin could provide the functionality I'm looking for, but I haven't been able to get it working as I described. Maybe it's only made to put everything into a separate file.
I'm open to using any Grunt tool if anyone knows of one that could accomplish this.
I've used this one before: https://github.com/motherjones/grunt-html-smoosher. It's very straightforward, just provide an input file and output file; no extra configuration, it just finds the files automatically and inlines them.
grunt.initConfig({
smoosher: {
dist: {
files: {
'dest-index.html': 'source-index.html',
},
},
},
});
Hope this helps.
Just providing other references that might be useful:
This grant-inline task do inline css and javascripts but you can do it selective using the _inline parameter. There is also a similar task grunt-inline-assests that do same thing. Both are good to generate HTML e-mails.
Finally, the purpose of this one is a bit different; it inserts all your css and js as externals based on a tag in your HTML. This can be very useful when developing themes and front-ends where you want to have you js or css contained in many small files to easy maintenance. Sails-linker task can be used to inject all css and js while in development and one of the inliners above can be used to generate the final production HTML file with CSS and JS minified and inlined.
I am working with website that has defined following DOCTYPE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
When I access that website in IE6, DOCTYPE is magically changed to:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
And.. Ok - it can stay because everything looks fine.. But here is the point - just one page has DOCTYPE changed to:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
which I can't stand.
What is the reason of changing XHTML to HTML 4.01 and HTML 4.0 ?
How can I force DOCTYPE in IE6 to XHTML or just HTML 4.01 ?
The reason was unexpected:
HTML comment
placed before <html> tag causes auto change of the page's doctype.
A browser only displays pages, and never modifies the original page.
The only way your question makes sense is if you're doing "save page as" and wondering why the page that IE saved isn't the same as the page it downloaded. In this case I'd expect the browser converts the page into a some sort of internal representation to make it easier to process, and "save page as" converts that internal representation back into HTML; so that it can save a single file (e.g. with embedded CSS rather than a separate CSS file), ensure that the saved file has correct markup (rather than the original potentially un-corrected markup), etc.
If this isn't what you want, go to "view -> page source" and copy & paste that instead.
The only important thing that the doctype does is to force the browser into standards compliance mode. If you don't have a doctype, older browsers will go into Quirks mode; with the doctype (no matter which one you use), the browser will go into Standards mode.
Therefore it really doesn't matter which one you use.
The XHTML doctypes will try to enforce XHTML compliance, but obviously only in browsers that properly support XHTML - IE6 may be problematic here. And of course, specifying XHTML means there's no room for any errors at all, or your page won't be rendered.
Other than that, there's really not much to choose between the various doctypes, so my suggestion is to go with the most up-to-date one possible.... which is the HTML5 doctype.
The HTML5 doctype looks like this:
<!DOCTYPE html>
That's all. Short, simple and to the point. And it does the job for all current browsers (including IE6).
This doesn't mean you have to use any HTML5 features (they obviously won't work IE6 anyway), but it's fully backward compatible, and shouldn't give you any of the weird browser-specific glitches you get with other doctypes.
Hope that helps.
How do I go about allowing my webapp to be installed as an icon on a user's homescreen? Is the data cached locally, so that the webapp can be run when the user is outside of 3G?
I did a quick google, but my search terms were lacking. I noticed that Google Buzz allowed me to install locally, and I'm wondering what the process is for creating web apps, and if they get special treatment (full caching/running offline).
This behaviour is done with a meta tag titled apple-mobile-web-app-capable.
Details (and other meta tags useful for iPhone web apps): https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
<meta name="apple-mobile-web-app-capable" content="yes">
To set a nice icon for your app, you can specify a URL for your icon:
https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
<link rel="apple-touch-icon" href="/custom_icon.png" />
and a startup screen:
<link rel="apple-touch-startup-image" href="/startup.png" />
Data can be locally cached. You can store data using the various HTML5 JavaScript APIs and cache manifest.
See ceejayoz's answer for the various iPhone-specific stuff (icon, fullscreen mode), but in order to store the entire app locally (and run offline), you'll need to look at what's called a "cache manifest". This file, linked to in the opening html tag on your page, lists every resource the app needs to store locally.
Additionally, in order to store user data, if need be, you'll need to look into the client-side database. I don't know as much about that, so I won't try to explain it. :P
Apple has a decent page here: https://developer.apple.com/library/content/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Introduction/Introduction.html#//apple_ref/doc/uid/TP40007256-CH1-SW1
that talks about both the cache manifest and local database storage. This should help explain what you need to do in order to make your application run offline.
Here's another example of what you are trying to do, may be helpful: http://mrgan.tumblr.com/post/257187093/pie-guy