
Show HN: My animated website, rendered entirely in HTML5 Canvas - santoriv
http://ericlesch.com
======
axmorgan
\- Three seconds animation of your name and "Javascript developer" before I
get an option to actually see content? Why?

\- The animation makes refreshing work really strange. I can see the buttons,
they then disappear and re-appear before I can use the website.

\- Can't select text, no copy and paste, going to have to manually type out
your email address to contact you? Never mind what it does for
accessibility/SEO.

\- I had a problem with the back button sometimes taking me to a blank page
(forcing a refresh and another watch of the name animation), though this seems
to have stopped happening.

Interesting experiment, if only to show why this is a terrible idea.

------
thegreatpeter
The bottom line is, Eric is not catering himself to engineering firms, he's
catering himself to marketing agencies and their clients.

This site doesn't follow any specific standards, but {most} agencies won't
either, because they're billing their time

~~~
afandian
I don't understand your second line. If an agency is doing a site for a client
and it's not accessible to their customers, then they've failed to do the job.
The client wouldn't say "oh, we'll pay you the same amount again to fix it"
they'd say "fix it at your own expense".

------
cvburgess
While this is fantastic as a demo, I hope this does not become a huge trend.
Canvas is almost as bad as flash if you use it this way

~~~
santoriv
What specifically is bad about it?

~~~
afandian
Lots wrong with it. Exactly the things that are wrong with Flash. At the risk
of repeating what others have said:

None of the text is in HTML which means:

\- it can't be used by assistive technology, e.g. for people with reduced
visibility. People with partial sight use the web too.

\- it doesn't work in reader mode, which is a common feature of web browsers
to use standard CSS to read just the content.

\- it has none of the benefits of WAI-ARIA

\- I can't use services like Google translate

\- that archive.org doesn't work

\- search engine X can't index it. Maybe Google could one day with the right
investment in technology, but there are more search engines than Google.

None of the styling is in CSS which means

\- your animation wastes CPU cycles and isn't optimised

\- I can't increase the size of the text if I need to if I have poor eyesight
(zoom just makes the whole canvas bigger)

\- on my phone screen text is unreadably small and I can't do anything about
it.

\- you're re-inventing layout stuff that browsers do. I found a layout bug[1].

Reinvents stuff that web browsers, not JS should be handling which means:

\- I found a navigation bug in a few seconds[2].

\- it doesn't work with older browsers. Some people are still using old
versions of IE and can't switch.

\- that standard web behaviour doesn't work. How do I open a link in a new
window?

\- it forces me to use the mouse to click things rather than the keyboard (not
everyone uses the web the same way you do)

\- it doesn't work at all if JS is disabled.

[1] Layout bug: load window with small window size, then resize. Some circles
move, some don't.

[2] Navigation bug: back button doesn't work under certain circumstances.

This is a good technical demo, and shows the development skills of the author.
Unfortunately it also shows that he has no idea about core web development
issues, which on the web is probably more important, especially in a portfolio
piece.

~~~
nailer
I see your point, but the text is still text on canvas.

Rather than trying to change the world to not use canvas, how about
screenreaders get fixed to read fonts off canvas?

~~~
extra88
If that's text, why do some of the letter shapes have jaggies? Screenreaders
use the accessibility tree, a subset of the DOM; this "text" isn't in the DOM,
it's not real text. Do you think screenreaders perform OCR on pages? JAWS has
added an OCR function but it's only for trying to read a single element
containing a picture including text (i.e. images) without a real text
alternative (e.g. alt attribute).

~~~
nailer
> If that's text, why do some of the letter shapes have jaggies?

Probably because the site author isn't taking the window.devicePixelRatio and
backingStoreRatio when creating the 2D context.

> this "text" isn't in the DOM, it's not real text

The text is not in the DOM, but that doesn't mean it is not real text. It is
text, literally strings, written with `context.fillText()` which could
certainly be wrapped by screenreader software.

Doing so would make the world a better place for the bling by providing a more
consistent experience - since 100% of people using canvas will never get extra
budget to modify their logic, but 100% of canvas fillText() calls could be
handled by a screen reader.

Unfortunately a great deal of engineers seem to have invested time and
reputation in the unlikely change-the-world scenario, so I suspect blind
people will continue to have a poor experience on the internet while a11y
engineers who don't actually care for workable solutions continue to dominate
the discussion.

------
digitalgravy
As beautiful as it is, it's also completely unusable for anyone with
accessibility options. There's not even a text-only version.

------
xjia
Reminds me of those Flash websites ten years ago.

------
santoriv
Thanks everyone for taking a look and giving feedback. Thank you especially to
the folks who gave me bug reports that I can take a look at and try to fix.

Most of the technical issues raised are fixable but a few are not.

SEO is fixable by following the Google ajax SEO spec. Accessibility and other
issues with selecting and highlighting text are not.

Many of the other criticisms could also be levied at other javascript heavy
sites (e.g. Facebook).

It's clear that many people are philosophically opposed to rendering websites
in Canvas because it reminds them of Flash and is incompatible with the
semantic web.

I guess the proof will be in whether or not web consumers end up thinking it
is cool or not. That remains to be seen. Personally I think this approach
opens up a lot of interesting possibilities.

Anyway, thanks again for your interest and responses, even if they were
largely negative. :-)

------
geuis
Completely unusable on mobile. You can't swipe when touching the canvas
element and tapping anything doesn't work.

~~~
santoriv
Touch works on my phone. Which mobile device are you using?

------
asherkin
Might want to look into hidpi support, the blurry text is painful to read :P

~~~
santoriv
What device are you using? An iPad Retina or something else?

~~~
TheCoreh
I'm using a Retina MacBook Pro and it's also blurry for me. You should
multiply the canvas "width" and "height" attributes by devicePixelRatio, but
keep its size constant using CSS.

------
gingerrr
It's visually clean, but if I were sent this site as a lead on a potential
hire, I likely would have closed the tab and gone about my day. A few reasons:

\- I don't have immediate action items - regardless of remote resource load
times I'm forced to wait for a two-part intro animation to unfold before I can
do anything, _even on my fourth or fifth visit_. I don't have time to wait
like this, and I don't want my users to have to wait for superfluous visuals
either.

\- There's almost no content - I'm not sure what the "progress" bars in the
skills section measure and how they were calculated, no description of
accomplishments or skills built in experience section

\- UX animations are clunky at best and misleading at worst. The rectangle of
blue that becomes the "back" button and sets off "Javascript Developer"
gracelessly darts back and forth, and why when I press "back" does the
carousel effect continue to turn _forward_?

I recognize this is likely more an opportunity to show off makemake's
abilities, but as someone evaluating a potential hire I'm left with a
lackluster impression. Apologies if this is too negative - I'm hoping the
honesty will offset any lack of tact.

------
mrieck
The editor on makemake.io is very impressive.

You just picked a tough crowd to show this to... everyone here cares about the
semantic web and has nothing but contempt for the "all-flash" websites from 15
years ago. You should really try making a CSS3 version that just puts
z-indexed img and div tags in an relative positioned container and animates
the x/y. Then people could insert their semantic HTML and animate it however
they want.

If you go that route you could even allow people to create small
widgets/components. Say you want a crazy/animated sidebar but don't want to
break the rest of your page... you could just open up your editor and work on
just the widget and export code to drop that widget into your page.

Overall I think this is an awesome project. I'm also coding a huge HTML5
editor project you should check out when it launches...
[http://www.superanimo.com](http://www.superanimo.com)

It's more of a competitor to GoAnimate/PowToons than your startup. I think
HTML5 canvas is underutilized in the startup community so I hope both of our
projects take off.

~~~
santoriv
Thanks for the feedback. Do you have an early access/mailing list signup on
your site where I can drop my email?

I also thought about doing the same thing in DOM with Famo.us but I found
after some experimentation that the performance wasn't good when you had a lot
of objects on the page. Canvas animation perf scales reasonably well.

Regarding widgets, I think maybe you are talking about something like
[http://themeforest.net/item/quasar-wordpress-theme-with-
anim...](http://themeforest.net/item/quasar-wordpress-theme-with-animation-
builder/6126939)

I think you can also do that sort of thing with Adobe Edge or Google Web
Designer.

Anyway, thanks for the feedback. I'd like to see your project when it's
completed. :-)

~~~
mrieck
I'll add you to the small list of people I'll email when SuperAnimo is
released.

I don't have a mailing list. I hate signing up to lists that are all talk
about an unreleased product... I rather just show people when it's ready. I
have a full-time day-job so I can't work on it as much as I want, but I should
have a rough version live at the end of next month.

------
seyz
Really cool experiment but there're some issues:

\- SEO sucks. \- You're killing the Web semantic :-)

~~~
santoriv
For sure. If it was a proper site I would follow the Google Ajax SEO Spec.
[https://developers.google.com/webmasters/ajax-
crawling/docs/...](https://developers.google.com/webmasters/ajax-
crawling/docs/specification)

------
mck-
Despite all the criticism in this thread, I do think this (or some form of it)
is going to be the future of CVs for web devs. A creative way to stand out
from the crowd, and be different from other simple portfolio websites.

To really make a point, CSS 3D websites are even cooler :) some of you might
remember acko.net [1]

[1] [http://acko.net/blog/zero-to-sixty-in-one-
second/](http://acko.net/blog/zero-to-sixty-in-one-second/)

------
seanalltogether
It fails to show anything on Mac Firefox. Here's the console log

TypeError: this._container is null line 177 > eval:1:330345

~~~
p4bl0
On a recent Firefox (31.5), the page remains white if it is opened in
background, but loads fine in the tab in which I open it has the focus.

~~~
santoriv
Yes.

That is because I pause the rendering engine if the browser tab is not
focused. I don't want to consume a bunch of CPU and memory when the user isn't
looking at the site.

~~~
21echoes
the issue is that it _never_ starts rendering, even once the tab is focused.

------
d55
[http://evangelcathedral.net/](http://evangelcathedral.net/)

------
theknarf
Nothing you showed on that website couldn't be made without the Canvas
element.

------
jest3r-
Is there a way to make the canvas scale to the screen size while keeping
aspect ratio?

How would Google index this site?

------
illesim
Is it just me, or is there really no easing on the transitions?

------
blkhp19
What a fantastic example of the wrong way to use animations.

~~~
ch47a
This comment does not say anything. Explain! What is YOUR correct way to use
animations?

~~~
blkhp19
Good animations should draw the user's attention to certain things. If
everything animates arbitrarily, it just becomes a distraction.

------
wtbob
Not _entirely_ in HTML5 Canvas: apparently it uses JavaScript as well, which
means that I see a blank white page with Makemake's footer.

~~~
pavlov
JavaScript is the only way to access the Canvas API, so it's fair to say the
site is written "entirely in HTML5 Canvas".

