I’ve started writing my first lines of CSS more than 10 years ago. It’s been quite a learning process. I remember the times when having one class for one element was a norm. I even remember the times when IE7 was considered new and kind of great.
CSS was the easiest way to go for me back in the day, since it was the simplest one. No loops, no variables, just describing how your HTML elements look.
I’ve watched this video the other day about prototyping web products. Title says “any” product, though I think that’s a bit of an overstatement. Anyway, the presentation is great and there’s a lot to learn if you are planning on creating your own product, or simply if you are eager to learn. It provides a real world example which the team worked on so you can easily create your own workflow based on this video.
[embed]https://www.youtube.com/watch?v=IDYjSdqtNZU[/embed]
No matter how interesting it was, there was one remark about architecture which caught my attention and made me think.
[The visualizations] are really hand-wavy. The architects will talk to you “Oh yeah, people will just gather in the stairwell and have all these, impromptu conversations and idea sharing across your organization”. It’s total BS, they have no idea if that’s how people do it and most architects build buildings and they never watch how people actually use them. So you get these visualizations where there’s a friendly ghost walking around your office…
@dburka
And I’m sure it’s true. I’ve studied architecture and worked as an architect for a few years. And we’ve always done it this way - we create space for something and just assume that people will simply use it they way we intended it to be used. I’m sure experienced architects do that as well. And not all of the assumptions pan out.
It got me thinking, is there a way to do something similar to prototyping techniques in architecture before building the whole thing? Sure, you have scaled models for the form and visualizations for the spaces, but building functionality-wise you have to do quite a few assumptions, especially for huge buildings with huge open spaces. Or is there just a big gap in my knowledge of architecture?
Just finished reading Part I: Laying the foundation of Code Complete by Steve McConnel. This is my second attempt to read it all and I hope this time I’ll finish it. I have read this part before, though it was a good time freshen up my memory since it’s about preparations for the development. I just got back from my vacation and I had a list of new projects which I should start working on so I found it useful.
Relatively recently it was announced that Drupal is running on more than a million websites. The office where I work is quite fond of Drupal, though it has some problems and one of them is HTML validation. Drupal 7 is using XHTML+RDFa by default, though at this point lots of us prefer HTML5 and unfortunately changing this is not a straight forward task. Surprisingly even Drupal.org did not manage to fix all validation errors after switching to HTML5. So here’s a tutorial to fix this, based on W3C Validation for Drupal 7 HTML5 + RDFa with few improvements.
A while ago I’ve posted an article about fast cross-browser HTML/CSS testing. The “from scratch” version was using inline styles for image overlay, so it would be only HTML that has additional dev artifacts which have to be removed before shipping the code. But it wasn’t really a time saver after all. Also I’ve had the image overlaying the page all the time, which was a bit of a problem when you wanted to inspect html and see what is causing the “unexpected”.
I’ve improved the design overlay snippet to show image only if you hover a small rectangle fixed to the top of the page, see the jsfiddle on this. It’s great because after hovering and right-clicking it, you can focus your editor to do the changes. Sadly this applies only to Chrome and the changes could only be seen instantly using CSS injection tool like browser-sync (might also work with other tools, I’ve just not tried any other yet). Though probably every front-end developer is using a tool like this already, if not - they really should.
These things made me rethink my front-end development process, there are lots of great tools to automate your tasks during development, so I’ve started a framework (or a boilerplate, not sure which one it is. I guess a mold of both) to have tasks automated for me and to deal with repeatable blocks in HTML, so I wouldn’t need to go through all HTML files and remove parts of code if they changed.