FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


10 Things I've learnt in 2 weeks





davidv
For the past 2 weeks I've been designing and developing my first proper personal website which can all be accessed through my github.

https://github.com/friendlycodemonkey/site

Hopefully, the website will be up and running before university begins, March 5th. Anyway, so I've learnt a few things and thought I might share.

1. Always have wrappers. Wrap everything. It makes positioning elements heaps easier.

2. Try to avoid absolute positioning, but if you do use them, have a wrapper which has relative positioning.

3. background-color: color; is your friend. Not knowing exactly how wide or tall your element is and trying to position it exactly to the nearest pixel is incredibly annoying. Add a background so you know exactly where it is. You can remove later.

4. Never use inline styling. This is something I learnt a while ago but the separation between semantic tags and stylistic tags is probably the most important aspect which maintains document structure. Never break document structure.

5. Common backend programming paradigms also apply to front-end development. That is, refactor code, avoid code repetition. Keep It Simple, Stupid (KISS).

6. Slow queries suck. Avoid at all cost using sub-queries. I learnt my lesson a few months back as a first year undergrad. The lecture hated them and I abused the crap out of them. Needless to say, he went nuts with the red marker. But anyway, join tables, don't subquery.

7. Utilize CSS inheritance. I'm not quite sure about the terminology here is but in Java it's called method overriding and this follows the same concept. Don't rewrite your class attributes, override them with only the attributes you want to change and have the element use both classes.

8. Never use WYSIWYG editors. Learn the markup, live the markup, love the markup. Google is your friend.

9. Design mockups before the real thing. Have everything calculated before you begin coding (heck, draw it on a piece of paper). Know exactly where everything is suppose to be on the screen and then start typing. What I thought was helpful was, hardcoding the mockup and then replacing very large portion of the mockup with a script. Eventually making the entire file a script (well, most of it). This means that you've tested every single time you've made a change, refactored your code, and hopefully, it meant you would of avoided code repetition because everything was refactored.

10. Last but not least, always generate content. Never hardcode in your final product. 100+ lines of HTML you hardcoded? Create a database, write a script and query your content. Cut down your code from 100+ lines to 20.

But yes, it's only been 2 weeks since I've started web development and there's plenty to learn. I have to say however, it's not as boring as I thought it was. Still, backend development is still much more interesting than making things look pretty.
Radar
I think I agree with most of what you're saying, however -

davidv wrote:

6. Slow queries suck. Avoid at all cost using sub-queries. I learnt my lesson a few months back as a first year undergrad. The lecture hated them and I abused the crap out of them. Needless to say, he went nuts with the red marker. But anyway, join tables, don't subquery.


I think that for large tables joining can be slower? A while ago I instinctively wanted to use a join, but found that it was running much slower than using a subquery.
sonam
I am agree with all except 4. For 6. I don't know because I didn't use tables with more then 2000 rows.

For your 4. think I cannot say it is 100% true because there is some situation when you cannot use nothing then inline style. Off course if is possible it is better to avoid this type of styling.

Sonam
davidv
Of course, if you really can't avoid inline styling, there really isn't any other option but I've never encountered a situation where I can't do everything externally.

Regarding sub queries, however. I haven't worked with a database with more than ~56,000 entries but from my experience, everything you can do with sub queries, you can do so joining tables and whatever MySQL magic that may exist. And in all cases, joining tables was much faster. Sometimes even seconds faster. Really small databases and/or really large databases may differ but I haven't really had any experience with that.
boinsterman
I agree with most of them. But I disagree with some of them, as follows:

3. I find that borders work pretty well, perhaps even better, as background-color can hide more stuff and is harder on my eyes for some colors.

4. Sometimes inline styling works pretty well, as long as it works cross-browser.

You learned a lot in 2 weeks.
sonam
boinsterman wrote:


3. I find that borders work pretty well, perhaps even better, as background-color can hide more stuff and is harder on my eyes for some colors.


You are right about eyes but borders in some situation (for example when I using percentage and float) can cause different result then background (push div in second line instead in same line).

Sonam
boinsterman
I usually use borders for basic layout--when I'm not too worried about precise positioning as a matter of border width. Also, background-color can result in text or other elements being hard to see if they are a similar color, and I have to adjust the colors. Also, variables such as opacity can have very different visual effects depending on the background color.
Dialogist
davidv wrote:
For the past 2 weeks I've been designing and developing my first proper personal website which can all be accessed through my github.

https://github.com/friendlycodemonkey/site

Hopefully, the website will be up and running before university begins, March 5th. Anyway, so I've learnt a few things and thought I might share.

1. Always have wrappers. Wrap everything. It makes positioning elements heaps easier.

2. Try to avoid absolute positioning, but if you do use them, have a wrapper which has relative positioning.

3. background-color: color; is your friend. Not knowing exactly how wide or tall your element is and trying to position it exactly to the nearest pixel is incredibly annoying. Add a background so you know exactly where it is. You can remove later.

4. Never use inline styling. This is something I learnt a while ago but the separation between semantic tags and stylistic tags is probably the most important aspect which maintains document structure. Never break document structure.

5. Common backend programming paradigms also apply to front-end development. That is, refactor code, avoid code repetition. Keep It Simple, Stupid (KISS).

6. Slow queries suck. Avoid at all cost using sub-queries. I learnt my lesson a few months back as a first year undergrad. The lecture hated them and I abused the crap out of them. Needless to say, he went nuts with the red marker. But anyway, join tables, don't subquery.

7. Utilize CSS inheritance. I'm not quite sure about the terminology here is but in Java it's called method overriding and this follows the same concept. Don't rewrite your class attributes, override them with only the attributes you want to change and have the element use both classes.

8. Never use WYSIWYG editors. Learn the markup, live the markup, love the markup. Google is your friend.

9. Design mockups before the real thing. Have everything calculated before you begin coding (heck, draw it on a piece of paper). Know exactly where everything is suppose to be on the screen and then start typing. What I thought was helpful was, hardcoding the mockup and then replacing very large portion of the mockup with a script. Eventually making the entire file a script (well, most of it). This means that you've tested every single time you've made a change, refactored your code, and hopefully, it meant you would of avoided code repetition because everything was refactored.

10. Last but not least, always generate content. Never hardcode in your final product. 100+ lines of HTML you hardcoded? Create a database, write a script and query your content. Cut down your code from 100+ lines to 20.



11. Then check it in IE and do-over with 10 brand new fun commandments.
ujjwalshrestha
Dialogist wrote:
davidv wrote:
For the past 2 weeks I've been designing and developing my first proper personal website which can all be accessed through my github.

https://github.com/friendlycodemonkey/site

Hopefully, the website will be up and running before university begins, March 5th. Anyway, so I've learnt a few things and thought I might share.

1. Always have wrappers. Wrap everything. It makes positioning elements heaps easier.

2. Try to avoid absolute positioning, but if you do use them, have a wrapper which has relative positioning.

3. background-color: color; is your friend. Not knowing exactly how wide or tall your element is and trying to position it exactly to the nearest pixel is incredibly annoying. Add a background so you know exactly where it is. You can remove later.

4. Never use inline styling. This is something I learnt a while ago but the separation between semantic tags and stylistic tags is probably the most important aspect which maintains document structure. Never break document structure.

5. Common backend programming paradigms also apply to front-end development. That is, refactor code, avoid code repetition. Keep It Simple, Stupid (KISS).

6. Slow queries suck. Avoid at all cost using sub-queries. I learnt my lesson a few months back as a first year undergrad. The lecture hated them and I abused the crap out of them. Needless to say, he went nuts with the red marker. But anyway, join tables, don't subquery.

7. Utilize CSS inheritance. I'm not quite sure about the terminology here is but in Java it's called method overriding and this follows the same concept. Don't rewrite your class attributes, override them with only the attributes you want to change and have the element use both classes.

8. Never use WYSIWYG editors. Learn the markup, live the markup, love the markup. Google is your friend.

9. Design mockups before the real thing. Have everything calculated before you begin coding (heck, draw it on a piece of paper). Know exactly where everything is suppose to be on the screen and then start typing. What I thought was helpful was, hardcoding the mockup and then replacing very large portion of the mockup with a script. Eventually making the entire file a script (well, most of it). This means that you've tested every single time you've made a change, refactored your code, and hopefully, it meant you would of avoided code repetition because everything was refactored.

10. Last but not least, always generate content. Never hardcode in your final product. 100+ lines of HTML you hardcoded? Create a database, write a script and query your content. Cut down your code from 100+ lines to 20.



11. Then check it in IE and do-over with 10 brand new fun commandments.


Doesn't sound like your first website ... the content is telling me you are expert.
Robert_Redbeard
I agree. Although I have had to break some of these rule to get Drupal to position things how I wanted it to with my theme. So in Drupal, inline styles have become my friend when I only want to change a small bit for just a single element. Everything wlse is linked CSS.

I also have a problem with borders on my elements using the 960GS framework. So I had to improvise the side borders as part of my BG image. Looks the same on the page. But it does not mess up my div positions by making them to wide.
Related topics
What is your favourite movie?
Slight Server Problem
Way to make your boyfren/girlfren happy
How would you personaly define a "quality" post?
Signature Space for Sale! [ Anime ]
The Best George Carlin Jokes
Anyone watch Numb3rs?
10 things you should know about every Linux installation
10 Things to Remember (for the guys)
Anyone seen the ten things Americans want but can't have?
The Iphone 3GS
10 Things i HATE about christmass (^_-)
10 things i loe about CHRISTMASS!!! :-@
10-things-to-give-up-in-exchange-for-happiness
Reply to topic    Frihost Forum Index -> Webmaster and Internet -> Design Tips

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.