is possible write counting clock only using HTML5?
Or maybe only counter +1/each second.
Thanks a lot.
I have just written a 12-hour digital clock that uses NO JavaScript. Maybe it wasn't possible when this was first posted, but it definitively is now.
http://notstupid.us/clox/dclock.html
I wrote that on the current Firefox and also tested on the latest Chromium as well as Internet Explorer 11 and Chromium Edge beta. There's currently no way to set it (it always starts at 12:00:00) but I should be able to add that some time (probably using server-side script).
The code is all in one file (with inline CSS).
April 7 2021: I now have a way to set the clock. http://notstupid.us/clox/dclock.php adds a small server-side script to change the animation statements so the clock starts at the current time (US Central time).
That would be frickin cool, but neither HTML5 nor CSS3 have the capacity to do this.
You need to use a real programming language (PHP/JS/Python...).
Markup-Languages(like HTML or CSS) only work declarative.
Related
As a lone developer with limited resources, I made the decision some time ago not to continue support for IE8 and IE9.
To manage the situation I use IE's conditional comments - I now also use Modernizr to detect support for individual features, which the above browers do not support anyway.
Javascript is also a given for me - if you don't have it, then sorry but we can't do business.
I was therefore considering removing conditional comments and letting Modernizr/javascript do the job.
Conditional comments do break a lot of things that scrape the site - for instance CopyScape will not work - there's also testing software I use that breaks and/or gives out false signals.
Does anyone have any cast iron reasons NOT TO remove them or TO remove them?
Given that support for conditional comments was removed from IE10, I would recommend against using them at this point in time. It's 2017; time to move on. (That's my take, anyway; YMMV.)
I would consider providing a bare bones version of the site designed for any browser other than your preferred one (which, conveniently, also helps you support experiences you didn't plan for).
Web development has changed dramatically over the last few years. With the enormous amount of JavaScript libraries and the new HTML5 standard, today it is easier to create rich Internet applications (RIA). When building RIAs, you will probably want to reuse some of the web components you built. But how you can do that with the current state of HTML?
I have starded learning Angular 2, that is based on webcomponents
http://webcomponents.org/
Only problem i have is that now there is no rule how to write HTML?
http://w3c.github.io/webcomponents/spec/custom/
Does it means <div></div> will no longer exist?
And HTML can be written as you wish, will be there be some kind of rule, what about HTML5?
Because now you can easy say <header-layout></header-layout> and forgot about validation?
Well i just had a discussion over this with our CTO,
Webcomponents is something of the future and too early to say that when we say <clock></clock> we will get time displayed on our page and if we say <clock timeformat='12'> </clock> boom, we would have a clock in 12hour format. My point here is that it well ahead of the current time.
You could open github and inspect their last commit element and you will see that its a webcomponent. That was the first and the last WebComponent i saw being used on huge scale. here's a link for ref : http://webcomponents.org/articles/interview-with-joshua-peek/
I dont think there are any rules as such for now, like i said its a very future thing.
I have developed working D3 driven charts and as far as all the other browsers go, there are no problems.
but recently the need to support them also in Internet Explorer 8 cropped up.
But so far i can't make this html display in IE8.
these are the tags used in D3:
<svg> <path> <g> <line> <circle> <rect>
for the last 6 hours i have skimmed through a lot of materials and questions including:
"Display inline SVG in IE8" which has this answer from October 2012:
I have been looking into this too and a number of options came up.
Chrome Frame - A browser plug-in that actually uses chrome underneath, meaning SVG just works. This is great if you're able to deploy plugins to the browser, for a real commercial environment however this may not be possible.
SVG Web - The aim is it bring SVG to all browsers. It looks like a fairly large project, one that's had Google's input. This doesn't however work out of the box with D3 though I don't know much about the issues.
D34Raphael - You've mentioned this one, I found again it doesn't work out of the box. Check the project out on GitHub, there hasn't been any commit activity in months and there's some pull requests "first pass on trying to get support for .on() required for event binding". If it doesn't support events, is that an issue to you? I'd generally keep away from this one.
R2D3 - Again another one you mentioned. I took the Sankey example from the D3 website and had to make a few changes to get it working. The main things I couldn't get working (Drag Events, Groups - though can use an alternative). It took about a day of effort to get the example working in IE8 and I believe is in a useable state. The project on GitHub is also much more active, the developer is committing, pulling work in and is very active on discussions etc. This gets my vote.
Also:
D3 IE8 Compatibility?
wikipedia.org/wiki/Scalable_Vector_Graphics
SVG Web Compatibility
But the solutions using client-side plugins are not acceptable and so far it looks that i can't display svg in IE8.
So the solution is to find some other ways to render vector graphs.
I presume that others have had the same problems
Edit:
either way, people that will encounter this same problem after me will at least have somewhat concentrated materials and will realize that there is no easy/real solution to display svg on IE8 and better to spend time starting on the existing code rewriting/adjusting for non-svg version
Edit:
after some testing i would say that its worth trying to go through R2D3 examples and see if its possible to simplify/execute the code in IE8
Samples
Edit:
During the process of testing different elements separately some r2d3 problems seem to arise
most common would be Invalid argument and Object doesn't support this property or method
as i am not used to develop for IE8 there were some useful tips that i found:
dump javascript vars
and
display objects
Not sure if you are still looking for an answer, but I ran into this issue on a project a few years back. We ended up switching over to HighCharts for the browser compatibility. At the time it was still in its infancy as a charting library, since then it's become much more powerful and still maintains browser support back to IE6.
Unfortunately for most people now supporting IE8 its down to client restrictions rather than consumers.
Without informing those that have requested it of the restraints, backwards compatibility and cost implications along with valued links from this post, the solutions for making canvas work in IE7/8 and using the JScharts variants is your best option.
Of course, it means not using D3 unless you want to double your work load = cost. Just remember to mention that every time.
Good luck
IE8 (as far as I can see) simply doesn't support SVG. The only solution I can see working is using a different graph library which uses a canvas to draw it's components. Think of libraries like CanvasJS, ChartsJS, GoJS or VisJS Network Graphs and then using excanvas to make them work for IE8.
Another solution I found when researching this topic is using Chrome Frame. It makes IE8 support SVG. Though, sadly, Chrome Frame is retired and no longer supported anymore.
Knowing all this you have to ask yourself: "Is it worth going through all of this for the less than 0,1% of people who still use IE8 and below?".
Because, if you want complete d3 compatibility you probably would have to write your own converter from svg to canvas and even then, you still have to hope that excanvas supports all the canvas functions you write.
Edit: Changed browser percentage to current IE8 usage
I created this question as community wiki in the hope that it and its answers will be edited as the situation with HTML5 changes.
Time to use HTML5?
This question gets trotted out about once a year, so I might be beating a dead horse, but is it finally time (in the summer of 2010) to use HTML5 when developing a brand new web site?
Related HTML5 Questions on Stack Overflow
Is it time to start developing with HTML5? ('09 edition)
Is it time to start using HTML5? ('08 edition)
Any reason not to start using the HTML 5 doctype?
Is there any pros to use HTML 5 doctype <!DOCTYPE html> even if i’m not using any new HTML 5 tag?
Is valid HTML5 OK to use now
Is it too early to use HTML5
Edit as a follow on
Is it a mixed bag: i.e. use these tags safely but stay away from x, y, z?
We are far far away, see:
When can i use...
But you can dive into it by following:
Progressive enhancement
Graceful Degradation
for the moment :)
I think you'd probably get better feedback if you clarified what you mean by 'use html5'. That covers a lot of different functionality, some of it not even finalized. Are you planning on using it all... or just certain pieces (like the tag?) Whether its a good idea to use it now is going to depend on what pieces of HTML5 you are talking about.
It depends what you mean by HTML 5. You can use the doctype now, and many of the features are backward-compatible, so you can use them now and they will fallback gracefully. Other tags just won't work, and so you have to be more judicious.
Not until 2022 (if they stay on schedule).
http://en.wikipedia.org/wiki/HTML5#cite_note-techrepublicref-8
Regarding the "When can I use" link posted by Sarfraz - wow, that's an awful lot of extra work, waste of time, and consideration that could all be avoided if you just drop HTML5 and use Silverlight, Flex, or JavaFX. Any virtual machine based solution is going to beat fighting an endless battle with browser wars.
Is your site ready to abandon half the internet?
Yes, it's time! By two reasons:
It already works
It speeds up development of HTML5 compatibility
Use it with caution though! Using the simplified doctype and the new semantic markup tags will not hurt, but just do good. Using canvas and the media tags with no fallback might be a couple of years too early.
I wish! Wouldn't that be great! I guess if you have a site that has a high enough demand that people will upgrade their browsers then go for it. It seems like people are more attached to their old browsers than super glue is to fingers.
According to readwriteweb, as of May 2010, 46% of users use browsers with html5 support. So, maybe we are over 50% now. But it really comes down to your audience - if you are targetting the general population, I would say it's a definitely too early. But if you are targetting a more tech-savvy audience, maybe not. Of course, degrade as gracefully as possible.
Link: http://www.readwriteweb.com/archives/46_of_internet_users_ready_for_html5.php
EDIT: Yes, the study mentioned in the readwriteweb reference was done by Chitika, and was based on HTML 5 video support. Chrome, Safari 3 and up, and Firefox 3.5 and up were consider "HTML 5".
Our web application renders fast in some IE browsers, slow in others... It seems to be an HTML rendering problem... The first 10% of the page displays immediately, the last 90% takes up to 10 seconds, and this is static content. I've run with firefox/yslow, renders very quickly. Seems to be isolated to some users/configurations of ie. Quirks mode does not seem to make a difference.
Is there a tool or application that I can use to help me discover a rendering bottleneck? Am I doing something egregious in my code? Could it be a javascript issue? Any help or suggestions will be much appreciated. thanks.
Use Fiddler to look at the times to load images, css, js files, etc. In other words, is caching a problem? Javascript can definitely cause issues in different browser versions. There's lots of optimizations you find in some versions that aren't in others. Also, make sure your html is well-formed xhtml if possible. How the page is arranged can also affect life. If your document tree is deep, it may need to wait to render large sections until it reads all the child nodes. Another thing to note, certain toolbars and plugins do look ahead loading and can slow down life. An HTTP Proxy can help you watch what's going on network-wise at least.
Not sure if anything of those ideas might help your exact problem, but they can help life overall.
If it runs fast in FF or Chrome then it's a javascript issue for sure. IE7 is VERY slow in processing large amounts of script and complicated HTML. We had a sharepoint page that took 10 seconds to render in IE and sub 1 second in FF and Chrome. We benchmarked the page by adding a timer to the server-side processing and sending the output to the client via a Response.Write(). By doing this we could determine the server time to process the page and the client time to render the page (since you would see the timer results on the screen and then wait 10 seconds for the rest to render). The bottleneck was 100% IE on the client. This also explained why the speed was variable on different peoples machines, because depending on how fast the client machine was the page would render at some speed between 8-15 seconds.
We even had MS look at the issue and they confirmed that IE has a "rich rendering" engine which is slower.... IE8 runs much faster but that is no help to anyone today.
Are you using any behaviors in your CSS? I've seen behaviors bring an app to its knees if too many are used and/or if they affect too many elements. Check for any .htc files lurking around.
Of course behaviors only pertain to IE and they use JavaScript, so I'm sure different IE versions handle them more competently than others.
There is a special tool for such scenarios called dynaTrace which is available for free at this website:
http://ajax.dynatrace.com/pages/
This tool could really help you out because its tracking almost everything and its specially build for IEs.
Check for memory leakage in the script.
http://www.javascriptkit.com/javatutors/closuresleak/index.shtml
Steve Souders gives an excellent presentation on 14 (simple) steps to improve the performance of your web pages:
http://developer.yahoo.net/blogs/theater/archives/2007/08/steve_souders_high_performance.html
If it's hanging in the middle of the page, the first thing I would personally look to do is ensure or move all my JavaScript is at the bottom of the page.
IE is great at being a bad performer, particularly with JavaScript, so if you move it to the bottom, IE can render the page, then get on with processing the JavaScript.
I use HttpWatch for troubleshooting linked assets (images, script, css), network or HTTP related problems in IE. There's a free & paid version. Free is fine but you lose out on some nice features.