My First Web Layout in Photoshop

Photoshop is undoubtedly an authority and unbeatable piece of software so far  to create all sorts of layouts, drawings, digital art and more. I would rather say, you are limited by your own imagination when it comes to creating the stuff using this great software out there.

I have always been interested in creating web layouts using photoshop but unfortunately have never been able to give it time because of busyness in various things. Web design? well, it needs practice, but whenever I start off with it, I step back soon  because of less time or giving more time to the research related to web development trends and technologies, something what I do primarily. You got it right, looks like my fault for not managing time for that.

Today, however, I managed some time for the photoshop, started off creating a web layout, and guess what I created my very first web layout in about 2+ hours. As far as I am concerned, it looks great to me considering that this is my first layout. I also do believe that I do possess the aesthetic sense after going through a lot of web layouts while developing a number of websites.

I would love to have feedback and comments from experienced designers out there which can help me spot where I could have been better in that particular layout and where do they rank it considering my first layout.

This is where you can download and preview my full web layout.

Creating Advanced Calculator With 4 Lines of Code

Here I share with you how to create a full-blown advanced calculator with just 4 lines of code in simple editor like  notepad. Interesting han? Sure it is.

This is actually part of many scripts I had created way back in 2002/2003 using VBScript to automate various Windows tasks (I wasn’t in the web development field by the time ;- ) . Today, I came across this piece of script on my computer and though of sharing with you.

Well, there is nothing really fancy, I have put the MSScript.ocx active-x control to use. It’s eval function can evaluate most complex math expressions easily. So here is how to create the calculator:

1.  Open Notepad and jot down the following 4 lines of code in it:

Set SC = CreateObject("ScriptControl")
SC.Language = "VBScript"

Val = InputBox("Enter simple or advanced expression to evaluate." & vbCrLf & vbCrLf & "Example:" & vbCrLf & vbCrLf & "(5+5)/2" & vbCrLf & vbCrLf & "or" & vbCrLf & vbCrLf & "Log(99)/2*25+3-(10^2 Mod 5)-Sin(60)+Tan(90)+2")

If Trim (Val) <> "" Then MsgBox "Answer =  " & SC.Eval(Val),,"Result"

2. Now save the file as calculator.vbs by selecting All Files from Save as type combo box. Note that vbs extension in the file name to denote that this file is vbscript and is to be run by Windows Scripting Host (wscript.exe).

3. Double click the saved file and there you are.

Have fun ;-)

CSS: Attribute Selectors

In CSS, we are mostly accustomed to targeting elements based on either IDs or Classes. Another way what is know is Attribute Selectors can also be used for the same purpose. They turn out to be extremely handy in some situations too.  In fact it is worth having a know about them because they add a lot to your web design or development arsenal.

.

.

.

Consider this html markup:

<a href="www.example.com" rel="link" id="myid" class="myclass">I'm a link !!</a>

Normally, you would style the link like this using its id or class like this:

a.myclass
{
  background-color:#ff0000;
}

 /* or */

a#myid
{
  background-color:#ff0000;
}

However, you can style that link using its “rel” attribute too using this attribute selector:

a[rel="link"]
{
  background-color:#ff0000;
}

There is a lot more to attribute selectors discussed below with different situations.

Attributes With Exact Value

In the above example, we targeted hyperlink having exact value “link” for its “rel” attribute. Now consider following html markup:

<a href="www.example.com">I'm a link !!</a>
<a href="www.secondexample.com">I'm a link !!</a>
<a href="www.thirdexample.com">I'm a link !!</a>

Suppose, you wanted to style each of the above link differently, you can do so by specifying exact value for href attribute:


a[href="www.example.com"]
{
  background-color:#ff0000;
}

a[href="www.secondexample.com"]
{
  background-color:#00ff00;
}

a[href="www.thirdexample.com"]
{
  background-color:#0000ff;
}

Further, you can even use that to style form elements like this:


input[type=text]
{
  background-color:#0000ff;
}

input[type=checkbox]
{
  background-color:#0000ff;
}

input[type=radio]
{
  background-color:#0000ff;
}

Attributes Beginning With Certain Value

Sample html markup:


<a href="sample-page.html">I'm a link !!</a>

To style the link, we use this attribute selector using “^=” which targets element attribute beginning with specified value:


a[href^="sample"]
{
  background-color:#0000ff;
}

Attributes Ending With Certain Value

Sample html markup:


<a href="sample-page.html">I'm a link !!</a>

To style the link, we use this attribute selector using “$=” which targets element attribute ending with specified value:


a[href$=".html"]
{
  background-color:#0000ff;
}

Attributes Containing Certain Value

Sample html markup:


<a href="sample-cool-page.html">I'm a link !!</a>

To style the link, we use this attribute selector using “*=” which targets element attribute containing a certain value at any place in it.


a[href*="cool"]
{
  background-color:#0000ff;
}

Attributes Containing Spaces

Sample html markup:


<h1 rel="lorem ipsum">I'm a heading !!</h1

To style the link, we use this attribute selector using “~=” which targets element attribute containing a value separated by space.


h1[rel~="lorem"]
{
  background-color:#0000ff;
}

Attributes Containing Dashes

Sample html markup:


<h1 rel="lorem-ipsum-dolor-sit-amet">I'm a heading !!</h1

To style the link, we use this attribute selector using “|=” which targets element attribute containing a value separated by dash.


h1[rel|="lorem"]
{
  background-color:#0000ff;
}

Matching Multiple Attributes

It’s interesting to know that you can also use multiple attribute selectors in the same selector which matches all specified. Consider this html markup:


<h1 rel="heading" title="Hello There">I'm a heading !!</h1

h1[rel=heading][title*=Hello]
{
  background-color:#0000ff;
}

Matching Specific Attributes

If you wanted to style all links that have “title” attribute set, you do so this way:


a[title]
{
  background-color:#0000ff;
}

Browser Support Information

These attribute selector can work in all modern browsers. They will work in IE7 too but not IE6.

Stack Overflow Tips & Tricks

Disclaimer: I have shared my personal ideas in this article, i do not encourage or ask  anyone to misuse, game Stack Overflow reputation system just to earn points. You are expected to be helpful to others and get help when you need it..

.

Stack Overflow is moving fast to becoming the de facto standard to assess your programming skills and knowledge. It has a system of awarding reputation points that you get by providing correct answers to others or asking questions that are voted up. If you have earned a good reputation figure, you can show that on your site, blog or your resume; this will throw a positive impact on anyone who visits your site, blog or an employer who sees your resume. Also if you have earned good reputation, chances are that you might be selected as moderator on the stack overflow.

For me, it has been great experience with this magnificent site. Undoubtedly, i have learned a loooooot from it and like most others, i have also become addicted to this site because of the wealth of knowledge and benefits it offers. Here i share the tips and tricks that i have utilized on this site and have earned me good reputation in a very short time but before that let’s be clear about the fact that there is no magic to getting reputation points; you do have to provide the correct answers to the questions posed by others or ask most logical questions that stimulate others to vote up your questions. Nobody cares about your reputation besides you. You are not here to enlarge your reputation, you are here to give answers to people asking questions.

1. Get 100 Reputation Points Free

If you have earned at least 200 reputation points on SO (Stack Overflow), you can get 100 more by associating other sister accounts of SO. Click your username on top to go to your profile and then click on the accounts tab as shown in the picture below:

There you see other sister sites of SO:

  • Server Fault
  • Super User
  • Meta Stack Overflow

Authenticate these sites by pressing corresponding authenticate button. This should give you 100 reputation points. Now that you have earned 100 reputation points and signed up on these sites, you are expected to help others on these sites too or get help for yourself. If you think you can involve yourself in any of these three sites, go for them.

2. Add “Interesting” & “Ignored” Tags

To be able to earn reputation points, you should be able to provide correct answers to the questions posed by others. In order to know that a question relevant to your expertise has been posted, you need to add Interesting tags. To do so, go to your profile (by clicking your username on top) and then  click on the prefs tab present just before the accounts tab. There you can add your interesting and ignored tags; for example the interesting tags are those you are good at like it can be php, mysql, java, etc. Add as many as you think. Similarly, you also need to add Ignored tags; doing this will remove all questions from SO homepage that are not as per your expertise and this will also increase your chances of answering a question before anyone else does. I will expand on this in the next tip below.

3. Install Greasemonkey Script

You need to install the “StackOverflow Interesting Tags First” script. When you install it and visit SO homepage, then all your interesting tags will be pushed up there by greatly increasing your chances of answering a question before anyone else and I am sure most SO users are not aware of this great piece of script. Note that Greasemonkey works in Firefox and Chrome currently.

4. Be the First to Answer a Question

If there is question you think you know the answer of, jump to it instantly and answer it. If you have answered it correctly and are the first to answer then if anyone else visits that question, he may vote you up rather than providing his own correct answer that you have already provided. By default, all answers are ordered by number of votes, so if you manage to get some votes, your answer will be on top of all there by having more chances of getting votes and finally chosen as the final correct answer something for which you earn 15 additional points. Getting your answer (correct one) to be first just makes it more likely to get quick votes but remember this is not the rule of thumb, an answer posted after even half an hour can be voted up and chosen as the final correct answer.

Another important thing is that once you have posted your answer, you can revise it, add more details such as lists, images, etc. This shows how comprehensive answer you have given with examples/demos and makes your answer best in the queue.

5. Markdown

SO employs what is known as “MarkDown” for adding style to your text. Familiarize yourself with it, this will help you quickly add indentations, lists and more to your answers. You will mostly be indenting your code which can be done by selecting some text and pressing the Cntr+K keys combination.

6. Don’t Over-Style Your Answers

This has happened to me, if i add styles such as bold, colors, etc to most of the text of my answers, i get down votes even if my answer is correct. Other users don’t like this because it makes them feel that this guy is trying to get more attention than our answers (which are not necessarily styled). And of course you are supposed to provide correct answers rather than providing styled answers. Avoid this as much as possible and also note that styling can take more time something decreasing your chances of answering a question first.

7. Add Pictures

To reinforce your answers, you can add pictures to them by copy pasting a picture url you know or searching on google. This makes your answer best of all. But remember, only add images when they help the answer – not just to make it shiny.

8. Use Google Effectively

There are many questions posted which make you search on the google for their answers. If you think there is an answer on a certain site but you don’t remember page’s url, you can put google to use. For example, there was a question posted about “long vertical dropdown menu” and i knew that there was a solution for that on the css-tricks.com site but i did not remember page’s url, so i committed the search like this on google:

site:css-tricks.com [SPACE] mysearch keywords

And guess what i was the first to answer this question and my answer was chosen as final for that question. But if you don’t have any idea of it, you can simply search that on google without specifying any specific site.

9. Use JS Bin

The JS Bin is the tool you can use to create and preview your html, javascript, css files online instantly. This turns out to be extremely handy when it comes to question about javascript, jquery, html or css. What is more you can instantly create your pages and create a public link  for them and show that link in your answers as demo. You could also you Pastebin if you are looking for more language options. Once you provide the demo, your answer looks most authoritative.

10. Edit Your Answers Cleverly

If you have already answered a question, you can make that question jump back on top of SO homepage. The trick is that you should edit your answer after 5 minutes period of time. Once the question is pushed on top of the SO homepage, there are higher chances of other users visiting that question and voting you up. Having said that, don’t edit your answers too much otherwise it will be turned into “Community Wiki” answer by SO and then you won’t be scored even if your answer is voted up.

11. Keep Your References Open

You should always keep your reference code or cheat sheets open so as to quickly locate the syntax or any details relevant to the question. For example, I always keep PHP official reference and JQuery cheat sheet open and this helps me greatly.

12. Involve Yourself to Earn Badges

Other than reputation points, you would also like to earn Badges. There are a number of factors involved in earning these badges:

  • Your answers gets a lot of votes.
  • Your question gets a lot of votes.
  • You revise others’ questions.
  • You provide feedback to the comments.
  • etc….

I hope that you guys have a better time at Stack Overflow…

.
.
.tweet_this

Dreamweaver Tip: Search And Replace Tag Attributes

If you ever come across a situation where you want to replace tag attributes, this regular expression tip must prove extremely useful to you. Suppose you have a main table with lots of nested tables in it and you want to replace <table width = “400”> or <table width = “500px”> with <table width = “100%”> then you can put the regular expression at rescue instead of finding and replacing each attribute manually. I was working on a site developed by someone else but pages’ layout was not correct because of the fact that nested tables had been set to different pixel values rather than percentage values. What is more, some of the nested tables had longer width than that of main container table. So I had to replace width of those tables from pixels to percentage to correct the layout issue. You can use following regular expression at the dreamweaver Find dialog box to find all those tags having width set to pixels rather than percentage.

width=”\d+p?x?”

Oh, what if you wanted to search attributes having percentages rather than pixels, very simple regular expression:

width=”\d+%”

Note that you can apply the similar regex for other attributes like height, etc. All you have to do is to change the word width to the desired attribute name.

When you start searching, make sure that “Use Regular Expression” checkbox is checked at the Find dialog.