Posted 1 year ago
via typethefont

Short URL

20 Notes

Sertig - Free Font

typethefont:

Read More

Posted 1 year ago

Short URL

Notes

Cross Browser Opacity with CSS

.opacity {
	opacity: 0.5; /*Future Proof*/
  	-moz-opacity: 0.5; /*Mozilla*/
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /*IE 8*/
  	filter: alpha(opacity=50); /* IE 6 and 7*/
  	-khtml-opacity: 0.5; /*Old School*/
}
Courtesy of Ryan from codesnipp.it. If you haven’t requested a beta invite yet it might be worth a look.

Tags

Posted 1 year ago

Short URL

1 Notes

A really nice introductory tutorial on how to use jQuery selectors (probably the best starting point when learning jQuery and also a good 7 minute refresher) The new Think Vitamin Membership looks great, still considering whether it’s worth forking out another $25 a month

Tags

Posted 1 year ago

Short URL

Notes

I downloaded Safari 5 for Windows last night and thought I’d quickly see how it scores on html5test. Apparently not as well as I expected when compared to Chrome, surprising considering they are both Webkit browsers. Also surprised by the result @Immunda tested Safari again using OS X and it scored 136! I had no idea that browser capability was OS specific. According to findmebyIP (at a glance) both browsers have near identical HTML5 and CSS3 support. I’m tempted to question the reliability of html5test but I’m probably being ignorant to a glaringly obvious explanation. On another note, Safari 5 is still slow on my machine and Chrome is lightning!

I downloaded Safari 5 for Windows last night and thought I’d quickly see how it scores on html5test. Apparently not as well as I expected when compared to Chrome, surprising considering they are both Webkit browsers.

Also surprised by the result @Immunda tested Safari again using OS X and it scored 136! I had no idea that browser capability was OS specific.

According to findmebyIP (at a glance) both browsers have near identical HTML5 and CSS3 support. I’m tempted to question the reliability of html5test but I’m probably being ignorant to a glaringly obvious explanation.

On another note, Safari 5 is still slow on my machine and Chrome is lightning!

Tags

Posted 2 years ago

Short URL

Notes

Had to quickly throw together a holding page for the photography site that I’m working on.

Had to quickly throw together a holding page for the photography site that I’m working on.

Tags

Posted 2 years ago

Short URL

1 Notes

CSS Only Horizontal Page Scroll

While I’m not overly worried about the particular site I’m working on being javascript dependant, it’s good to go the progressive enhancement route whenever possible. I thought I’d quickly check to see if there were any glaring issues with a css only version of a horizontal layout. Here’s a quick test page that I threw together.

The markup is literally just a containing div, with a header div and an unordered list to contain the content items (in this case images).

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Horizontal Layout</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
	<div id="container">
	
		<div id="header">
			<h1>Horizontal Layout</h1>
		</div><!--end header-->
		
		<ul id="content">
			<li><img src="images/image_01.jpg"></li>
			<li><img src="images/image_02.jpg"></li>
			<li><img src="images/image_03.jpg"></li>
			<li><img src="images/image_04.jpg"></li>
			<li><img src="images/image_05.jpg"></li>
			<li><img src="images/image_06.jpg"></li>
		</ul>
	
	</div><!--end container-->
 
<body>
</body>
</html>

The only important things to note in the stylesheet is that we need to:

1) Give the containing div a width
2) Fix the position of the header div so that it doesn’t go out of view when we scroll
3) Float the list items left

#container {
	width:6000px; height:550px;
}
#header {
	width:800px; height:150px;
	position:fixed;
}
#content {
	clear:both;
	padding:150px 0px 0px 0px;
}
#content li {
	float:left;
}

As straight forward as this method was it forced me to specify a width for the content. Ideally I’d like that width to be dynamic as I’m not sure how many images the client will add. Setting the width to 100% only seems to set the width to 100% of the browser window.

I’ll have a think…

Tags

Posted 2 years ago

Short URL

1 Notes

The Google Fonts API makes embedding fonts ridiculously simple.

Tags

Posted 2 years ago

Short URL

2 Notes

Cross Browser HTML5 Page Template

Basic page structure including googles hosted version of Remy Sharp’s HTML5 shiv for all versions of IE :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 Template</title>

<link rel="stylesheet" href="css/default.css" type="text/css" />

<!--[if IE]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

</head>

<body>
</body>
</html>
Within css/default.css you need to tell the browser how to display all unknown elements: 
header, section, footer,
aside, nav, article, figure {
	display: block;
}
Obviously we are faking HTML5 support for the majority of browsers here but it does enable us to start making use of more semantic mark up and get acquainted with HTML5. No more lengthy doctypes that no one can remember!

Tags

Posted 2 years ago

Short URL

2 Notes

Use The Twitter API To Display Your Last Tweet

1) Include the jquery library. My preferred method is to use googles hosted version.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

2) Add the following code.

$.getJSON("http://twitter.com/statuses/user_timeline/username.json?callback=?", function(data) {
     $("#twitter").html(data[0].text);
});

3) Change ‘username’ within the url to the twitter username that you wish to use

4) Change #twitter to the id or class name of the html element that you want the twitter API to update

I have used this snippet many times but always have to look it up http://css-tricks.com/snippets/jquery/display-last-tweet/

Tags

Posted 2 years ago

Short URL

Notes

Mac vs PC debates make me want to throw up. Does your OS of choice work for you? Great, problem solved!
Drew Douglass

Tags

Posted 2 years ago

Short URL

Notes

Effective Design Rationale: Understanding The Barriers

John Horner & Michael E. Atwood

Tags

Posted 2 years ago

Short URL

Notes

My Recipe for Research Artefact Summaries

- Outline the purpose of the research artefact.
- Give only essential background information
- Briefly describe your methodology
- Show evidence of process
- How did you record and analyse your data
- Conclude
- How has this research artefact lead you to your next line of enquiry

Tags