Recently, I acquired some practical website frontend experience—which took quite a bit of learning!
For an initial demo for a startup, I analyzed, selected and set up all the infrastructure (Rails, Heroku & Amazon). I wrote all the CSS frontend. I also wrote all the working database backend.
See the demo! See how its layout is fluid?
(Click here, if you missed the above links.)
It doesn't have multiple user capability yet; it's just a demo, at this time.
I made this in the pursuit of becoming a does-everything website developer.
Copyright (c) 2012 Mark D. Blackwell.
Friday, September 28, 2012
Monday, September 17, 2012
Website page layouts, proofs of concept
A big part of frontend website development is implementing webpage layouts using CSS stylesheets (of course).
Recently, I've been experiencing a great deal more of business in the area of layouts (specifically for Rails websites) and especially the work of implementing these layouts through developing CSS stylesheets—whether or not this is really programming! (Well, I think it is.)
I find it much less efficient to run the Rails server, and much more efficient to 'web-browse' the local filesystem. The work progresses much more quickly, in other words, when it is isolated from any complicating factors arising from our misunderstanding of the Rails server, jQuery, ERB/HAML, and perhaps even Sass. The weightiest reason for this improvement (by far) is the troubleshooting principle: 'divide and conquer'. Less important is that the filesystem also is relatively quicker.
It is much more doable (dare I say, even feasible) to get isolated layouts working using pure CSS and HTML (while keeping class names simple). And the same is true while paring down a stylesheet to be as simple and clean as possible.
Of course, further simplifying cross-browser development is the use of a CSS-reset stylesheet. Also it is essential, for HTML5's semantic tags: header, footer and nav (etc.), to include a (JavaScript) HTML5 shim (or 'shiv') script. So I include both of these best practices.
I have prepared a repository of my CSS (layout) proofs of concept on GitHub—including nine(!) useful proofs (as of now, September, 2012).
These layout proofs contain stylesheet code the way I write for Rails projects as much as possible (without actually including Rails).
Copyright (c) 2012 Mark D. Blackwell.
Recently, I've been experiencing a great deal more of business in the area of layouts (specifically for Rails websites) and especially the work of implementing these layouts through developing CSS stylesheets—whether or not this is really programming! (Well, I think it is.)
I find it much less efficient to run the Rails server, and much more efficient to 'web-browse' the local filesystem. The work progresses much more quickly, in other words, when it is isolated from any complicating factors arising from our misunderstanding of the Rails server, jQuery, ERB/HAML, and perhaps even Sass. The weightiest reason for this improvement (by far) is the troubleshooting principle: 'divide and conquer'. Less important is that the filesystem also is relatively quicker.
It is much more doable (dare I say, even feasible) to get isolated layouts working using pure CSS and HTML (while keeping class names simple). And the same is true while paring down a stylesheet to be as simple and clean as possible.
Of course, further simplifying cross-browser development is the use of a CSS-reset stylesheet. Also it is essential, for HTML5's semantic tags: header, footer and nav (etc.), to include a (JavaScript) HTML5 shim (or 'shiv') script. So I include both of these best practices.
I have prepared a repository of my CSS (layout) proofs of concept on GitHub—including nine(!) useful proofs (as of now, September, 2012).
These layout proofs contain stylesheet code the way I write for Rails projects as much as possible (without actually including Rails).
Copyright (c) 2012 Mark D. Blackwell.
Labels:
browser,
complex,
css,
divide and conquer,
efficient,
error,
filesystem,
frontend,
github,
javascript,
programming,
Rails,
select,
server,
startup,
testing,
troubleshoot,
UI,
web,
web service
Subscribe to:
Posts (Atom)