2

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?

donuts
  • 23
  • 3

2 Answers2

4

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:

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".

Matías Fidemraizer
  • 63,804
  • 18
  • 124
  • 206
  • 1
    There are some additional caveeats: no SEO, no search indexing at all, no user text selection, no proper user viewport scaling, no ability to save images from page, no ability to use custom user css/scripts, no screen readers and accesibility, no ability for coder to use wide codebase/frameworks, etc. The one big NO for all. – Tommi Jan 18 '15 at 10:37
  • 1
    @Tommi Obviously. But I'm not sure if I need to add this, because this discussion is just closed: creating another web page development model on top of Web standards is a horrible idea enough to not mention anything more. Are you agree? :D – Matías Fidemraizer Jan 18 '15 at 10:39
  • Absolutely. Just want OP to read this. It probably was better to comment his initial post. – Tommi Jan 18 '15 at 10:40
  • @Tommi I've added your suggestions... – Matías Fidemraizer Jan 18 '15 at 10:42
  • @Tommi I find this OP approach the same as others advocating to use WebSockets over AJAX. – Matías Fidemraizer Jan 18 '15 at 10:44
  • aside from SEO this is all possible, but as Matias said it would be like making wheels. I guess my question is more about.. would this be acceptable in a professional environment? Say if I used it in a portfolio to apply for a job. – donuts Jan 18 '15 at 10:48
  • @donuts SEO would be possible, but you would need to show a different content to Google Bot to get your site indexed. And I answer the second question in an update in my answer.. – Matías Fidemraizer Jan 18 '15 at 10:50
  • http://stackoverflow.com/questions/4842872/performance-of-moving-image-on-web-page-via-css-vs-html5-canvas and it seems to be getting faster – donuts Jan 18 '15 at 10:51
  • @donuts You won't use CSS for gaming. It's obvious fast drawing and object moves will work better in Canvas2D/3D. But you're talking about developing the Web entirely with Canvas. Please understand you're in the wrong way! Anyway, I would be glad to compare Canvas2D vs CSS3 using keyframe animations with GPU acceleration... Anyway, this goes out of the scope of your question!!!!! – Matías Fidemraizer Jan 18 '15 at 10:59
  • i guess most languages make no sense to begin with... – donuts Jan 18 '15 at 11:04
0

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.

Jared Smith
  • 19,721
  • 5
  • 45
  • 83
  • Great and motivating talk. Float:, display: inline, and positioning in general were really frustrating but this put it into a better perspective. I just though it would be easier to think of the webpage as a native OO application rather than this 'stylish newspaper' type thing. – donuts Jan 18 '15 at 19:45
  • 1
    Yeah, it sure ain't like swing or tk, that's for sure. Maybe I'm biased as a web-dev :) – Jared Smith Jan 19 '15 at 00:41