ROBINU.COM 涉水轻舟de点滴记录,见证历程

Development

20120219 10 useful htaccess tricks to improve your website

For some reason, the .htaccess file is often overlooked by web designers. If you have no idea what the .htaccess file is, I’ll just give you the Wikipedia definition: “A .htaccess (hypertext access) file is a directory-level configuration file supported by several web servers, that allows for decentralized management of web server configuration.”

But let’s get to it, here are some of the cool things you can do in your .htacces file.

1. Hotlinking protection with .htaccess

Websites that steal your written content can be quite annoying because they can hurt your Google rankings by creating duplicate content. However there is even worst: websites that steal your content AND don’t even make the effort of downloading images and reuploading it on their server. Loading images from your server is called hotlinking, and it’s a bad practice because it steals some of your precious bandwidth.

To preven people from hotlinking your images, just include the following lines in your htaccess file (obviously replace yoursite.com with your site’s URL.

RewriteBase /
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www.)?yoursite.com/.*$ [NC]
RewriteRule .(gif|jpg|swf|flv|png)$ /feed/ [R=302,L]

2. Prevent directory browsing

While directory browsing can be useful, it can also cause some security problems. To make your site a bit more secure, prevent directory browsing by including this file in your htaccess.

Options All -Indexes

Read rest of the post...

Category:

Tags: htaccess

Posted by Robin L.

Comment

20111204 Vanilla Development

How to show last 20 topics on other web pages

I’m going to help you get started with some javascript that we’ve done for a client.

Please note that this script uses jQuery so you’ll need to include that in your page as well. It is a very common library and should work. You should really know javascript and jQuery a little bit or you’ll be flying blind though.

Notes

1. Notice that the url looks very similar to the url that your browse to when viewing the forum normally. The only difference is that it has a .json?page=1-20&callback=? on the end. This is the API in action and you can call most urls that way.

2. If you want to figure out what kind of data is returned from the API I recommend getting the excellent JSONView Firefox extension . Once you’ve installed this you can copy that api url into your browser and have a look at what comes out. If you don’t install JSONView you can still look at the url, but you will be prompted to download.

refer to: http://vanillaforums.org/discussion/17968/how-to-show-last-20-topics-on-other-webpages

Category:

Posted by Robin L.

Comment

20111102 網頁設計自定義字體的幾種方式

1、采用CSS3 属性

注:仅支持CSS3 @font-face 属性的浏览器可用

@font-face { 
  font-family: "Custom Font Name"; 
  src: url('font.ttf'); 
}
body {
  font-family: "Custom Font Name";
}

由于不同浏览器支持的字体格式不一,故兼容方案:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

字体在线生成器: http://www.fontsquirrel.com/fontface/generator

2、采用Google Fonts

第一步: 载入Google 字体

<link href='http://fonts.googleapis.com/css?family=Tangerine|Pinyon+Script|Dancing+Script' rel='stylesheet' type='text/css'>

第二步: CSS 样式中设定字体

.page{ font-family: 'Tangerine', 'Pinyon Script', 'Dancing Script',Tahoma,Arial,Helvetica,sans-serif; }

3. Cufon 方案

Step 1: 获取Cufon

去到 http://cufon.shoqolate.com/generate/ 右键 “ Download “ 选择[另存为] 保存 cufon-yui.js 到本地。

Step 2: 生成字体

从本地上传你所需要生成的字体文件, 分别勾选 you are using a font that is legit to usecheck off the EULAs and the Terms of Agreement. 单击按钮 Let’s Do This 下载并保存所生成的字体文件到本地。

Step 3: 在页面中应用 Cufon

<script src="js/cufon-yui.js"></script>
<script src="js/Gigi_400.font.js"></script>
<script>  
  Cufon.replace('h3, p');
</script> 

如果页面载入了 jQuery 类库 , 则可同时使用复合选择器。例如:

<script>
  Cufon.replace('h3#convert-me, p#convert-me-too');
</script>

当然,也可以为 采用cufon 的字体添加自定义样式,详情参考: https://github.com/sorccu/cufon/wiki/Styling

4. sIFR (JS+Flash 文本替换方案)

Scalable Inman Flash Replacement (sIFR) is an open source JavaScript and Adobe Flash dynamic web fonts implementation, enabling the replacement of text elements on HTML web pages with Flash equivalents. It was initially developed by Mike Davidson and improved by Mark Wubben. It is a scalable variety of HTML text-to-flash replacement pioneered by Shaun Inman.

来源: 维基百科
中文资料稍后补上,请先参考官方主页: http://www.mikeindustries.com/blog/sifr/

sIFR 文档: http://wiki.novemberborn.net/sifr/

附录:参考文章

1. Cufon 项目主页
2. Cufonize Your Pages – How to add Cufon to your Web Design

Category:

Posted by Robin L.

Comment