Friday, 30 May 2008

CSS: font shorthand

When styling fonts with CSS you may be doing this:

font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 1em;
line-height: 1.5em;
font-family: verdana,sans-serif

There's no need though as you can use this CSS shorthand property:

font: bold italic small-caps 1em/1.5em verdana,sans-serif

Much better! Just a few of words of warning: This CSS shorthand version will only work if you're specifying both the font-size and the font-family. The font-family command must always be at the very end of this shorthand command, and font-size must come directly before this. Also, if you don't specify the font-weight, font-style, or font-variant then these values will automatically default to a value of normal, so do bear this in mind too.

Design: Netvibes

http://www.netvibes.com/




SysAdmin: Sysinternals, a bunch of cool tools

http://live.sysinternals.com/

First, you can point your browser to http://live.sysinternals.com/ for no-nonsense access to any Sysinternals tool. Even better, though, you can open up Windows Explorer and point it to \\live.sysinternals.com\ to browse and launch any Sysinternals app as though you've already downloaded and installed it on your computer. That means next time you're doing tech support for friends and you forgot your PC Rescue Kit, you can quickly get to any Sysinternals tool for help. At the very least, though, it's a quicker way to start the BlueScreen screen saver on a friends computer.

CSS: Static Positioned DIV

#blue {
width: 100px;
height: 100px;
position: static;
background-color: blue;
margin-top: 50px;
margin-left: 50px;
}

h1 {
border: 1px solid #000;
margin: 0;
}

Using margins on our static div
Image 1: Using margins on a static div

Our static div responds just fine to margin settings. The values for these margins are calculated against the h1 element and the body margin/padding, in the same way as they would be with the relative div. The static div is also said to be in the flow of the page, which means its position is affected by surrounding elements. To demonstrate this, we can add a new declaration into our h1 rule. Add the margin-top property as shown.

#blue {
width: 100px;
height: 100px;
position: static;
background-color: blue;
margin-top: 50px;
margin-left: 50px;
}

h1 {
border: 1px solid #000;
margin: 0;
margin-top: 100px;
}

Adding a top margin to our h1 element
Image 2: Adding a top margin to the h1 element

Notice how the top margin has pushed down the h1 element. Our div, however, has maintained its positional relationship with the h1 - it is still 50px below the h1 element.

CSS: Relatively Positioned DIV

A relatively positioned div is said to be in the document flow. As such, our blue div will now occupy space at the page level, and its existence will have an effect on surrounding elements.The flow is based on code order in your source code.

#blue {
width: 100px;
height: 100px;

top: 0;
left: 0;

position: relative;
background-color: blue;
margin: 0;
}

h1 {
border: 1px solid #000;
margin: 0;
}

Spotting the difference
Image 1: Relative and Absolute positioning. Both divs are set at top 0 & left 0

Both our relative and absolutely positioned divs will respond to margin settings, including negative values.

http://www.communitymx.com/content/article.cfm?page=2&cid=3B56F

CSS: Absolutely Positioned DIV (AP)

#blue {
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
background-color: blue;
}

Listing 1: Defining an Absolutely Positioned div

Let's take a look at the above code line by line.

  1. #blue - The # in front of our selector declares that this is an ID selector
  2. width: 100px; - The div will be 100px wide
  3. height: 100px; - The div will be 100px high
  4. position: absolute; - The div will be absolutely positioned in accordance to the top and left property values
  5. top: 0; - The div will be positioned 0 units from the top edge of the browser viewport
  6. left: 0; - The div will be positioned 0 units from the left edge of the browser viewport
  7. background-color: blue; - The background colour of the div will be blue

I have given our div a height value. It is often a good idea to not declare a height for your div so it can expand and contract to suit the content it may hold. Content could fluctuate due to text resizing by the end user, or you may be using your div for dynamic data that varies from record to record. These are two examples of instances where a height declaration may be a problem.

Once the positioning value has been declared as absolute, it is removed from the flow of the page. An absolutely positioned div will remain in the position it is placed—in accordance with its top and left property values—within its containing element. You can think of an AP div as being on a higher plane than page level. They act as if they are stacked above the page.

http://www.communitymx.com/content/article.cfm?cid=3B56F

CSS: Scrollable DIV with OVERFLOW property

<div id="copytext" style="overflow:auto;width:100px;height:100px;border:1px solid #91073C;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur justo. Curabitur rutrum, tellus vehicula elementum lobortis, nisl nulla tempor libero, vel pulvinar purus tellus vitae tortor. Donec condimentum condimentum turpis. Vestibulum eu nulla vel nibh vestibulum pellentesque. Aliquam malesuada dignissim elit. Integer tincidunt ullamcorper massa. Mauris turpis. Mauris magna. Sed sit amet velit sed diam porttitor posuere. Ut semper tortor convallis nisi. Suspendisse risus magna, lobortis et, sagittis eu, suscipit at, libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec elementum placerat sem. Nulla pede. Donec euismod tortor vitae velit. Nullam tempor lectus sed justo. Nulla facilisi. Nulla sodales consequat ipsum. Etiam ac nulla mattis ipsum tempus bibendum.
</div>
ValueDescription
visibleDefault. The content is not clipped. It renders outside the element
hiddenThe content is clipped, but the browser does not display a
scroll-bar to see the rest of the content
scrollThe content is clipped, but the browser displays a
scroll-bar to see the rest of the content
autoIf the content is clipped, the browser should display a
scroll-bar to see the rest of the content

Thursday, 29 May 2008

Javascript: Copy text to clipboard function

<SPAN ID="copytext" STYLE="height:150;width:162;background-color:pink">
This text will be copied onto the clipboard when you click the button below. Try it!
</SPAN>
<TEXTAREA ID="holdtext" STYLE="display:none;"></TEXTAREA>
<BUTTON onClick="ClipBoard();">Copy to Clipboard</BUTTON>

<SCRIPT LANGUAGE="JavaScript">

function ClipBoard()
{
holdtext.innerText = copytext.innerText;
Copied = holdtext.createTextRange();
Copied.execCommand("Copy");
}

</SCRIPT>

Extract description from site:

The script, as it is currently written, copies whatever text is within the SPAN tags. If there is code, like a
command created to display using & commands, those will copy right along. If you've got formatting in the text and you only want the user to copy the text, then you need to add a command that will remove that formatting. Luckily, there's an execCommand that will do that for you. It's important that you place it in the script before the copy process.

<SCRIPT LANGUAGE="JavaScript">

function ClipBoard()
{
holdtext.innerText = copytext.innerText;
Copied = holdtext.createTextRange();
Copied.execCommand("RemoveFormat");
Copied.execCommand("Copy");
}

</SCRIPT>

NOTE: due to mozillas tight security setting this script only works in IE.

Other variation

var x = document.getElementById("EncodedString").value;
window.clipboardData.setData('text', x);

Misc: Forward and Back Slashes

Just a reminder not to get confused.

This is a slash: /. Because the top of it leans forward, it is sometimes called a “forward slash.”

This is a backslash: \. Notice the way it leans back, distinguishing it from the regular slash.

Slashes are often used to indicate directories and subdirectories in computer systems such as Unix and in World Wide Web addresses. Unfortunately, many people, assuming “backslash” is some sort of technical term for the regular slash, use the term incorrectly, which risks confusing those who know enough to distinguish between the two but not enough to realize that Web addresses rarely contain backslashes.

.NET: Ignoring Thread Abort Exception in Enterprise Library Exception Handling

Noticed that the trace.log in TRAKIT was filling up rather quickly.
Whenever it hits a response.redirect, .NET was generating a thread abort exception.

To ignore, do this:

try{
//your try block
}catch(System.Threading.ThreadAbortException ex)
//exception ignored to prevent logging in trace.log
}catch(Exception ex){
//catch error using Enterpise Library logging
bool rethrow = ExceptionPolicy.HandleException(ex, "Business Layer Policy");
if (rethrow){
//throwing the error again to write to page
throw;
}finally{
//Do something
}

MSSQL: Truncate large Transaction Log files

Needed to truncate log files on prod server, found this nice tsql code snippet to handle this task.

/**SHRINK TRANSACTION LOGS**/
/**RUN EACH STEP SEPARATELY **/

--STEP 1 - Select database & get its logical name
USE [drd-data];
SELECT * FROM sysfiles;

--STEP 2 - From result window input file name to shrinkfile command
BACKUP LOG [drd-data] WITH TRUNCATE_ONLY
DBCC
SHRINKFILE('drd-data_log', 95);

Action Script: Open Source Action Script IDE

Summary

FlashDevelop is a popular open source ActionScript 2/3 and web development environment.
FlashDevelop seemlessly integrates with Adobe Flash IDE, Adobe
Flex SDK, Mtasc, Haxe and Swfmill.

Main Features

* AS3 Project management with seamless and optimized Adobe Flex SDK integration
* AS2 Project management with seamless Swfmill and Mtasc integration (using a portable standalone command line tool)
* Advanced ActionScript 2 and ActionScript 3 completion & code exploration with automatic classpath detection (even without project)
* Smart contextual Actionscript code generators
* SWF and SWC classes and symbols exploration
* Test movie in Adobe Flash IDE and with clickable error results (Flash CS3)
* MTASC compilation/code checking with clickable error results

Other Features

* Types Explorer
* Automatically cleans ASO files of modified AS2 classes
* Files explorer (can create Flash 8 Trust Files for you)
* Automatic

JavaDoc creation from methods

* Smart Actionscript help websearch on F1
* Jump to class/member declaration on F4
* XML, HTML/PHP, JS, CSS code highlighting,
* Multibyte character encoding
* Program menucustomization with XML files
* as2api GUI for documentation generation
* Snippets
* Lines bookmarks
* Code folding
* Zoom

http://www.flashdevelop.org/community/viewforum.php?f=11

Wednesday, 28 May 2008

Persits ASPEmail: Email using an external Templates

<%
dim strTextBody
dim objMail
set objMail = Server.CreateObject("Persits.MailSender")
objMail.Host = "your mailhost"
objMail.From = "your_email@a.com"
objMail.AddAddress = "your_email@a.com"
objMail.Subject = "career fair"
objMail.IsHTML = True
' Add embedded image for logo
objMail.AddEmbeddedImage Server.MapPath(".") & "\banner.jpg", "_Banner"
objMail.AddEmbeddedImage Server.MapPath(".") & "\footer.gif", "_Footer"
' append body from file
objMail.AppendBodyFromFile Server.MapPath(".") & "\BODY.htm"
objMail.AltBody = strTextBody
objMail.Send

set objMail = nothing
%>

In your HTML file place the following code:

<HTML>
<HEAD>
<TITLE>CAREER FAIR</TITLE>
<STYLE>
body{margin:0px;}
table.content{width:600px;}
td.content{background:#CCE5FF;font-family:verdana;font-size:11px;padding-top:20px;padding-bottom:20px;padding-left:40px;padding-right:40px;}
</STYLE>
</HEAD>
<BODY>
<TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0" CLASS="content">
<TR><TD><IMG SRC='cid:_BANNER'></TD></TR>
<TR><TD CLASS="content">
Hi
<P>Blah
<P>Kindest Regards
<BR><b>Blah</b>
<BR>Graduate Team
</TD></TR>
<TR><TD><IMG SRC='cid:_FOOTER'></TD></TR>
</TABLE>
</BODY>
</HTML>

Ajax: Caching Problem with Requests

http://radio.javaranch.com/pascarello/2005/10/21/1129908221072.html

"The question: The Ajax request is grabbing the cached page from the previous request, how do I stop this from happening?
Well I have seen some fancy approaches by people, but there is one easy solution that works: a random query string value appended to the request.

So how and why does this work. Well it simple terms, when the browser looks at the destination, if it has a match, then it uses the data it has. Now this is great for when you are going to a static website, but since we are looking for new data, it sucks. By appending a random value to our parameters that we are sending back, it forces the browser to say, "Stop the press! We got new info here! Lets go get the data!"

"... a simple "+Date()" appended to the request URL and viola!"

OR

"Hey guys, just wanted to add a way to ad this random string to the URL. When passing the url you can append the random function Math.random(); to the url string like this: var urlVar = urlVar + '&' + Math.random();"

OR

"A much more elegant solution would be to use the following code:

xmlhttp.open("GET", theURL ,true);
xmlhttp.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT");
xmlhttp.send();

The second line of the code instructs the XMLHttp object to avoid
caching content that has been modified after the mentioned date.
It worked fine for me..."

Thursday, 8 May 2008

Google code search

Google code search supports POSIX extended regex syntax.

http://www.google.com.au/codesearch?hl=en

Some advance search examples:
  • The lang: operator, which restricts by programming language (e.g., lang:"c++", -lang:java, or lang:^(c|c#|c\+\+)$)
  • The license: operator, which restricts by software license (e.g., license:apache, -license:gpl, or license:bsd|mit)
  • The package: operator, which restricts by package URL (e.g., package:"www.kernel.org" or package:\.tgz$)
  • The file: operator, which restricts by filename (e.g., file:include/linux/$ or -file:\.cc$)

Google Search Tricks from Tom's Guide

  1. Get firefox extension, Customize Google
  2. Surround keywords with quotes
  3. Use at least 3 keywords
  4. Use the * wild card
  5. Limit search by using minus (-) character. Chewy -food, returns chewy but not food
  6. Specific filetypes, chewy filetype:pdf
  7. Specify number of results, &num=5 in result querystring
  8. Brackets, (“www.tomguide.com and AMD” or “Pentium*”)
  9. Limit search to a website, site:www.tomsguide.com firefox
  10. Remove spam filters by adding this to querystring, &filter=0
  11. Synonyms (doesn't seem to work), ~vicarious
  12. Spelling Options, Penryn|Penrin
  13. Google Calculator, 100 m to ft
  14. Word Definition, define:isotope
  15. Currency Conversion, 50 dollars in euros
  16. Language Translation
  17. Google preferences, link is located right side of search bar
  18. Google News
  19. World News
  20. Finding the right image size, in google images click on the "all image sizes" box, below the search bar.
  21. Images search setting, filter based on format, colors, size

Tuesday, 6 May 2008

Nifty trick to hide your emails address when published online - prevent copy and pasting

CSS:

.fakelink {
color: #6699ff;
}

.hide {
display:none
}

HTML:

<span class="fakelink">youremail@gmail<span class="hide">.bugger_off</span>.com</span>.

When copied and paste, it will show up as
youremail@gmail.bugger_off.com