webpage made entirely with canvas? [closed] - javascript

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I really hate css. I try to do simple things and it gets really complicated really fast.
On the other hand, ive used canvas to code games which have a lot of functionality and menus..
So I was wondering if there is anything wrong with using a canvas element all over the webpage? Or even one giant canvas?
This article makes it seem like canvas is much better, but harder to use(which i think is the other way around) http://www.kirupa.com/html5/dom_vs_canvas.htm
Yet all the tutorials use css extensively. So is it bad practice? if so, why?

Using pixel drawing for web pages is a very bad idea, because own browser's viewport is almost the same but at the operating system level.
HTML and CSS are just simplifications of composing UIs without the hassle of forcing developers to draw what they want to show on screen by code.
I'm going to give you the best advice that you can find out there: learn CSS if this is the issue, because re-inventing wheels because of not reading the manual and a lack mind openness is just the worst decision we can ever made in software development.
Maybe taking a look at these pseudo-languages which compile into regular CSS might change your mind about HTML+CSS:
LESS CSS.
SASS / Compass
As others have said in comments...
...manual drawing means:
No SEO.
No search indexing (i.e. index your content in Google)
No user text selection
No way to save images (jpg, png...) using the "Save as..." dialog as regular HTML documents.
No viewport scaling depending on user's device.
...and dozens of cons.
OP said...
would this be acceptable in a professional environment? Say if I used
it in a portfolio to apply for a job.
No, because professional Web developers develop on top of Web standards: they're not creating alternate approaches to draw documents which aren't understandable by the mainstream development community!
If some tech recruiter with actual development knowledge discovers your way of developing the Web, he/she would say "impressive, but this candidate won't fit well in our development team".

In addition to the already excellent answer by Matías Fidemraizer I would like to add that it would be an interaction nightmare. You would have to manually track the position of all elements, get the position of all interaction events, coordinate them, and having an event loop running. You would, in effect, be replicating a good chunk of the browser in javascript.
Learning css is difficult for any number of reasons. If someone wrote a 'CSS: The Good Parts' it would arguably be even thinner than the Crockford book. There was recently a really great talk at CSSConf.Asia about this. Its css for back-end devs. It might give you insight into a more manageable subset of css.

Related

Canvas games - is it worth learning? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I am very into creating a canvas game, but im not sure if its worth the effort, and this is why...
Flash has Adobe Flash which is an interface for creating very complex animations, games and apps.
So im sure that a program is soon to come where, making games and animation will not require anny coding skills, it will al be done via a graphical user interface, pushing buttons and such.
So i am afraid i will put all this time into something that evantually will not be even necesary to achive the same goal.
What do you people think?
Yes definitely worth learning. I don't believe any AAA games could ever be created without coding. Canvas is supported in all browsers and gives the users of your website a chance to try out something without fancy installations or crashed applications.
Canvas is also a good thing to put on your resume once you are good at it :)
Like someone else said, It's never a waste to learn something new.
Also, I think this question is more or opinion. If your trying to get a job on the server side for example: It may be more useful to learn some other server side technologies first.
I think that putting effort in learning is not useless, more if we are speaking about html5 canvas against flash whatever, because flash is dying and html5/css3/js is starting to rule in the same areas flash used to.
But more important is that you define if you want to develop a game or just make a game pointing and clicking

What is Modernizr, Normalize and HTML5Boilerplate [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
when i download a free theme or a demo tutorial in the web. I just noticed that now a days i always see those modernizr, normalise, and boilerplate thingy.
I have researched them but still i cant understand what they do? Maybe you guys can explain more or maybe use an analogy to explain it better.
It's like "Explaining New Web Development thingy for Dummies" Really appreciate it.
Due to the differences in browsers and platforms, these libraries try to make is so that you don't have to use browser-specific code to take advantage of all the new HTML5 features.
Another way of saying it is, since all browsers "interpret" the HTML5 standard differently, these libraries help to smooth out the differences between interpretations.
Modernizr: http://modernizr.com/
Taking advantage of cool new web technologies is great fun, until you have to support browsers that lag behind. Modernizr makes it easy for you to write conditional JavaScript and CSS to handle each situation, whether a browser supports a feature or not. It’s perfect for doing progressive enhancement easily.
Boilerplate: http://html5boilerplate.com/ (If this is the one you are referring to)
HTML5 Boilerplate helps you build fast, robust, and adaptable web apps or sites. Kick-start your project with the combined knowledge and effort of 100s of developers, all in one little package.
Basically this gives you a framework for laying out your webpages so you don't have to start from scratch every time.
Normalize.css: http://necolas.github.io/normalize.css/ (Again, assuming this is the one you're talking about)
Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.
Basically, this CSS file allows you to write standard CSS and then it helps to render it consistently in all browsers.
TL;DR Version
These frameworks/files make it so that you can focus on writing standard-compliant website code (HTML5, CSS or JS) without having to worry about browser-specific tweaks. In addition, a front-end framework like Boilerplate gives you some nice "style-helpers" to make your website look great from the start.

Prerequisites for Creating Chrome/Safari Extensions [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I have been a programmer for a long time now but have majorly operated in C and Fortran. I like to believe I am good at scientific/numerical computing.
Recently, I had an idea for a browser extension. I did some googling and realized that Javascript is my best option to do so. I have never in my life looked at HTML or Javascript or CSS. The Safari and Chrome websites suggest that I should learn HTML, CSS and Javascript.
My question was- how should I proceed with this goal in mind. I don't plan to make web applications anytime but want to concentrate only on browser extensions. How much of HTML and CSS do I really need to know? Will the Web Fundamentals at CodeAcademy suffice? Do I need to get that out of the way before attempting to study Javascript? How should I plan this study?
P.S. I looked at a few books on Javascript and it looks eerily close to C which is a big plus for me. Learning Javascript isn't my concern, learning HTML/CSS is.
The Code Academy Web Fundamentals link should suffice for the HTML & CSS. Don't be afraid of HTML- you're just marking up, or rather describing the presentation of, a document. With CSS, for the most part, you're just declaring styles on the document: Make this paragraph bold; Change this background to red, etc.
I am still learning JavaScript but I bet It'll be easier for you because of your background in C. The syntax should look very familiar. Perhaps one of the most obvious differences is that C needs a compiler to run whereas JavaScript just runs in your browser.
Some nice sandboxes to try out snippets of code are http://www.jsfiddle.net and http://www.jsbin.com.
http://www.codecademy.com/ is a great place to start.
If you want a nice technical guide to the DOM, JS, the server, and really the web in general, this is also a good guide

Need Solution With Identical Results To Flash - HTML 5 Compliant [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I used to build sites that used flash for background animations & background movies while having regular (selectable) Html text on top.
Flash really fit the bill because it allowed for streaming movies WITHIN the animation itself, so you could layer things really well and get a very creative website going.
BUT FLASH IS DYING...
So I'm here to ask you good folks what solution (or solutions) should I look towards that can accomplish the same goals in modern non-Flash platforms (web-mobile etc).
It would need to:
Create animations that can have within them movie files. I would need to control the movies from the animation, not just slap them as background
NOTE: I have looked at all kinds of plugins etc for putting a movie as a site background, but this would NOT yield the result I need as it is just a movie playing and cannot be scripted as an animation in Flash was. I also checked out Adobe Edge. It comes closest to what I need but I have found no way of working with video inside it the same as in Flash - Please correct me if I'm wrong.
I'm no Javascript maestro by any means. I would dive deeper into it but I'm not sure it would work for what I need.
I hope I have not confused you with this long winded question and I thank you for your help.
Try the html canvas element. You can pipe video to the canvas using a hidden video element and any animation you can think of is possible through canvas. Since these are dom elements, you can of course put other HTML on top of them.
For good canvas frameworks check: http://www.backslash.gr/content/blog/webdevelopment/7-10-javascript-canvas-frameworks
I'm personally a big fan of paper.js and processing.js

Does Google use GWT for their projects? If not what do they use? [closed]

Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 11 years ago.
Improve this question
I know this has been asked before but I'd like to ask it here and see what happens.
What do Google's developers use to implement their sites like http://translate.google.com/ for instance. When I look at the source of the page, I'm not immediately seeing anything GWT.
I've been working on a few GWT projects and my experiences with it have been mixed. The advantages are obvious, and I've created dynamic scheme making client-server communication even more transparent. But the downsides have been nagging PITA pretty much. Erroneous hard to find anomalies. Slow building process (I'm familiar with the optimizations and tuning to improve development cycles). Layout hell (css). Plus problems developing for mobiles. No devmode, need various tricks to let me debug and probe inner state. Problems with specific mobiles (eg. Acer A500 disappearing keyboard problem). Mobiles not scaling UI properly. The list of issues goes on and on.
I have the feeling that Google is perfectly well aware of the pitfalls of GWT and use something much better internally for their own apps. Does anyone know how they develop their sites?
The admin pages for Adwords is as far as I know done with GWT, as was wave.
For some projects they have used the Closure library
Gmail is one of these I think.

Categories