Get last.fm Top Weekly Artist Chart to your Web site with PHP

<![CDATA[

I enjoy to play with json and xml files but did not use simplexml before. Dean Harris has a great script that pulls top tracks from last.fm. I needed one that is gonna pull the weekly chart. Changed his script a bit and here is the result.

/lib/weeklychart.php

Source Code

// Set up the required variables first
$method = "user.getweeklyartistchart"; //Enter method. Visit http://www.last.fm/api for more methods
$username = "username"; // Enter your username here
$apikey = "api key"; // Enter your API Key here. Visit http://www.last.fm/api/account if you dont have one
$limit = 5; //Enter the number of artist will be displayed

// Construct the URL, and feed it through SimpleXML
$feed = simplexml_load_file("http://ws.audioscrobbler.com/2.0/?method=".$method."&user=".$username."&api_key=".$apikey);

//Get Artists
$artist = $feed->weeklyartistchart->artist;

//Print Chart
for($i=0;$i<$limit;$i++){
	$a = $artist[$i];
	echo "#".($i+1)." - url."'>".$a->name." - ".$a->playcount." plays 
"; }

You can also visit http://www.last.fm/tools/charts?subpage=gallery#gallery, generate your chart style and get the list to your website.

]]>

17,12,2010 at 12:19 1 yorum

Hosting Git on GitHub and Dreamhost (Mac OS X & Windows)

<![CDATA[

Installing Git on Mac OS X

Installing the latest version of Git on OS X is pretty easy.

  1. Go to http://code.google.com/p/git-osx-installer/downloads/list and download/install the suitable version for your system (I downloaded git-1.7.3.3-x86_64-leopard.dmg)

Setup GitHub Repository

	Username: "goksel"
	E-mail : "goksel@gmail.com"
	Project Name: "project"
	Remote Project Url : "git@github.com:goksel/project.git"
	Local Project Folder : "/Library/WebServer/Documents/project"

We are ready to setup our Repo:

  1. 			git config --global user.name "Goksel Eryigit"
    			git config --global user.email "goksel@gmail.com"
    			ssh-keygen -t rsa -C "goksel@gmail.com"
  2. 			cat ~/.ssh/id_rsa.pub | pbcopy
  3. Go to GitHub Account Settings > SSH Public Keys > Add another public key and paste the key you copied to key field.
  4. 			cd /Library/WebServer/Documents
    			git clone git@github.com:goksel/project.git

Setup Dreamhost Git Repository

	SSH User: "goksel"
	Host: "geryit.com"
	Project Name : "project"
	Remote Repo Location : "/~/git/project.git" (means "/home/goksel/git/project.git")"
	Local Repo Location : "/Library/WebServer/Documents/project"

We are ready to setup our Dreamhost Repo:

  1. 			git config --global user.name "Goksel Eryigit"
    			git config --global user.email "goksel@gmail.com"
    			ssh-keygen -t rsa
  2. 			scp ~/.ssh/id_rsa.pub goksel@geryit.com:~/
  3. 			ssh goksel@geryit.com
  4. 			mkdir .ssh
    			cat id_rsa.pub >> .ssh/authorized_keys
    			rm id_rsa.pub
    			chmod go-w ~
    			chmod 700 ~/.ssh
    			chmod 600 ~/.ssh/authorized_keys
    			eval `ssh-agent`
    			ssh-add
  5. 			mkdir git
    			mkdir git/project.git
    			cd git/project.git
    			git --bare init
    			exit
  6. 			cd /Library/WebServer/Documents
    			git clone ssh://goksel@geryit.com/~/git/project.git

Installing Git on Windows

We will install 3 software to run Git; Msysgit (Basic Git Tool), TortoiseGit (Git Client for Windows) and Putty (Helps us to SSH to Remote)
  1. Download and install Msysgit.

  2. Download and install TortoiseGit.

  3. Download and install Putty (Find Installer Version)

  4. Run Git Bash

  5. Run these commands:

    			git config --global user.name "Your Name"
    			git config --global user.email your-github-email@email.com
    		

    Now your Git username and email is created on your local.

  6. Now run Pageant and Puttygen, generate keys, copy Public Key, save Private Key in Putty Format (ppk) to a safe place and add to Pageant.










GitHub

  1. Go to GitHub, create a project, go to Account Settings > SSH Public Keys > Add another public key and paste key into key field and hit Add Key.




  2. Go to github.com, get your github remote git url and clone your repo (by right click on local) to your local server with tortoisegit





Git on Dreamhost

There are two connection ways that you can setup your repository on Dreamhost: Html (WebDav) and SSH

WebDav

Webdav allows more then one user to push to the same repo but also slow.

There are two great posts that will help you to setup your repo:
http://priodev.blogspot.com/2010/02/hosting-your-git-repository-on.html and http://www.travisberry.com/2009/11/running-a-git-repo-on-dreamhost

SSH

I give the commands that will help you a lot. My SSH username is “goksel”, Remote Host is “geryit.com” and I will run my Remote Repo at “~/git/project.git” so I SSH with Git Bash (or Terminal) and :

	ssh-keygen -t rsa
	scp ~/.ssh/id_rsa.pub goksel@geryit.com:~/
	ssh goksel@geryit.com
	mkdir .ssh
	cat id_rsa.pub >> .ssh/authorized_keys
	rm id_rsa.pub
	chmod go-w ~
	chmod 700 ~/.ssh
	chmod 600 ~/.ssh/authorized_keys
	eval `ssh-agent`
	ssh-add
	mkdir git
	mkdir git/project.git
	cd git/project.git
	git --bare init
	exit
	git clone ssh://goksel@geryit.com/~/git/project.git

You must see a project folder on your local server after clone command.

If you want your changes to be deployed on a live site you should play with hook files (On remote, under project.git/hooks)

Some very helpful posts

https://github.com/multitheftauto/multitheftauto/wiki/how-to-use-tortoisegit
http://wiki.dreamhost.com/Git
http://craigjolicoeur.com/blog/hosting-git-repositories-on-dreamhost
http://priodev.blogspot.com/2010/02/hosting-your-git-repository-on.html
http://www.travisberry.com/2009/11/running-a-git-repo-on-dreamhost/
http://chosencollective.com/technology/using-git-hooks-push-live-website
http://effectif.com/nesta/publishing-articles-with-git

If you want to run an SVN Repo on Dreamhost please visit https://goxel.files.wordpress.com/2010/12/tortoisegit41.png2010/07/auto-update-svn-on-dream-host/

]]>

11,12,2010 at 20:20 Yorum bırakın

Pure CSS3 box-shadow page curl effect

<![CDATA[

<ul class="box">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

ul.box {
margin: 0;
padding: 0; }

ul.box li {
list-style-type: none;
margin: 0 30px 30px 0;
padding: 0;
width: 250px;
height: 150px;
border: 1px solid #efefef;
position: relative;
float: left;
background: #ffffff; /* old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* ie */
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); }

ul.box li:after {
z-index: -1;
position: absolute;
background: transparent;
width: 70%;
height: 55%;
content: '';
right: 10px;
bottom: 10px;
-webkit-transform: skew(15deg) rotate(5deg);
-webkit-box-shadow: 8px 12px 10px rgba(0, 0, 0, 0.3);
-moz-transform: skew(15deg) rotate(5deg);
-moz-box-shadow: 8px 12px 10px rgba(0, 0, 0, 0.3); }

ul.box li:before {
z-index: -2;
position: absolute;
background: transparent;
width: 70%;
height: 55%;
content: '';
left: 10px;
bottom: 10px;
-webkit-transform: skew(-15deg) rotate(-5deg);
-webkit-box-shadow: -8px 12px 10px rgba(0, 0, 0, 0.3);
-moz-transform: skew(-15deg) rotate(-5deg);
-moz-box-shadow: -8px 12px 10px rgba(0, 0, 0, 0.3); }

Handcoded in Coda with love by Matt Hamm www.matthamm.com
thanks to www.ballyhooblog.com for the inspiration.

]]>

07,12,2010 at 17:10 1 yorum

Writing Efficient CSS for use in the Mozilla UI

<![CDATA[

Post Source


This document provides guidelines for optimizing CSS code for use in the Mozilla UI.

The first section is a general discussion of how the Mozilla style system categorizes rules. The following sections contain guidelines for writing rules that take advantage of Mozilla’s style system implementation.


How the style system breaks up rules

The style system breaks rules up into four primary categories:

  1. ID Rules
  2. Class Rules
  3. Tag Rules
  4. Universal Rules

It is critical to understand these categories, as they are the fundamental building blocks of rule matching.

I use the term key selector in the paragraphs that follow. The key selector is the last part of the selector (the part that matches the element being matched, rather than its ancestors).

For example, in the rule…

                a img, div > p, h1 + [title] {…}
            

…the key selectors are

img
,

p
, and

[title]
.


ID Rules

The first category consists of those rules that have an

ID
selector as their key selector.


Example
                        button#backButton {…} /* This is an ID-categorized rule */
                        #urlBar[type="autocomplete"] {…} /* This is an ID-categorized rule */
                        treeitem > treerow > treecell#myCell:active {…} /* This is an ID-categorized rule */
                    


Class Rules

If a rule has a

class
specified as its key selector, then it falls into this category.


Example
                        button.toolbarButton {…} /* A class-based rule */
                        .fancyText {…} /* A class-based rule */
                        menuitem > .menu-left[checked="true"] {…} /* A class-based rule */
                    


Tag Rules

If no

class
or

ID
is specified as the key selector, the next candidate is the tag category. If a rule has a tag specified as its key selector, then the rule falls into this category.


Example
                        td {…} /* A tag-based rule */
                        treeitem > treerow {…} /* A tag-based rule */
                        input[type="checkbox"] {…} /* A tag-based rule */
                    


Universal Rules

All other rules fall into this category.


Example
                        [hidden="true"] {…} /* A universal rule */
                        * {…}    /* A universal rule */
                        tree > [collapsed="true"] {…} /* A universal rule */
                    


How the Style System Matches Rules

The style system matches rules by starting with the key selector, then moving to the left (looking for any ancestors in the rule’s selector). As long as the selector’s subtree continues to check out, the style system continues moving to the left until it either matches the rule, or abandons because of a mismatch.

The most fundamental concept to learn is this rule filtering. The categories exist in order to filter out irrelevant rules (so the style system doesn’t waste time trying to match them).

This is the key to dramatically increasing performance. The fewer rules required to check for a given element, the faster style resolution will be.

For example, if an element has an ID, then only ID rules that match the element’s ID will be checked. Only Class Rules for a class found on the element will be checked. Only Tag Rules that match the tag will be checked. Universal Rules will always be checked.


Guidelines for Efficient CSS


Avoid Universal Rules

Make sure a rule doesn’t end up in the universal category!


Don’t qualify ID Rules with tag names or classes

If a rule has an ID selector as its key selector, don’t add the tag name to the rule. Since IDs are unique, adding a tag name would slow down the matching process needlessly.

Exception: When it’s desirable to change the

class
of an element dynamically in order to apply different styles in different situations, but the same

class
is going to be shared with other elements.
BAD

button#backButton {…}
BAD

.menu-left#newMenuIcon {…}
GOOD

#backButton {…}
GOOD

#newMenuIcon {…}

Don’t qualify Class Rules with tag names

The previous concept also applies here.  All class names are unique.

One convention you can use is to include the tag name in the class name.  However, this may cost some flexibility; if design changes are made to the tag, the class names must be changed as well.  (It’s best to choose strictly semantic names, as such flexibility is one of the aims of separate stylesheets.)

BAD

treecell.indented {…}
GOOD

.treecell-indented {…}
BEST

.hierarchy-deep {…}

Use the most specific category possible

The single biggest cause of slowdown is too many rules in the Tag Category. By adding

class
es to our elements, we can further subdivide these rules into Class Categories, which eliminates time spent trying to match rules for a given tag.

BAD

treeitem[mailfolder="true"] > treerow > treecell {…}
GOOD

.treecell-mailfolder {…}

Avoid the descendant selector

The descendant selector is the most expensive selector in CSS. It is dreadfully expensive—especially if the selector is in the Tag or Universal Category.

Frequently, what is really desired is the child selector.  Using the descendant selector is banned in User Interface CSS without the explicit approval of your skin’s module owner.

BAD

treehead treerow treecell {…}
BETTER, BUT STILL BAD (see next guideline)

treehead > treerow > treecell {…}

Tag Category rules should never contain a child selector

Avoid using the child selector with Tag Category rules. This will dramatically lengthen the match time (especially if the rule is likely to be matched) for all occurrences of that element.

BAD

treehead > treerow > treecell {…}
GOOD

.treecell-header {…}

Question all usages of the child selector

Exercise caution when using the child selector. Avoid it if you can.

In particular, the child selector is frequently used with RDF trees and menus like so:

BAD

treeitem[IsImapServer="true"] > treerow > .tree-folderpane-icon {…}

Remember that REF attributes can be duplicated in a template! Take advantage of this.  Duplicate RDF properties on child XUL elements in order to change them based on the attribute.

GOOD

.tree-folderpane-icon[IsImapServer="true"] {…}

Rely on inheritance

Learn which properties inherit, and allow them to do so!  

For example, XUL widgets are explicitly set up such that a parent’s 

list-style-image
 or

font
rules will filter down to anonymous content. It’s not necessary to waste time on rules that talk directly to anonymous content.

BAD

#bookmarkMenuItem > .menu-left { list-style-image: url(blah) }
GOOD

#bookmarkMenuItem { list-style-image: url(blah) }

In the above example, the desire to style anonymous content (without leveraging the inheritance of 

list-style-image
) resulted in a rule that was in the Class Category, when the rule should have ended up in the ID Category—the most specific category of all!

Remember: Elements all have the same classes—especially anonymous content!

The above “bad” rule forces every menu’s icons to be tested for containment within the bookmarks menu item. Since there are many menus, this is extraordinarily expensive.  Instead, the “good” rule limits the testing to the bookmarks menu.


Use

-moz-image-region
!

Putting a bunch of images into a single image file and selecting them with


-moz-image-region

performs significantly better than putting each image into its own file.


Original Document Information

]]>

05,12,2010 at 19:59 Yorum bırakın

Web Designers vs Developers

<![CDATA[Like this comparison!]]>

03,12,2010 at 3:33 Yorum bırakın

Custom Snippets in Aptana 3

<![CDATA[

Aptana Snippets

There are some very useful snippets in Aptana like auto building Html tags (Type “div” and hit “Tab” then Aptana will generate “<div id=”name”></div>” for you) but most amazing thing is its very easy to create your own snippets.

If you are using “console.log()” function a lot like me then writing a snippet for this function will save a lot of time for you.

To add a “console.log()” shortcut key

  1. Create a new project and go to project folder (where your “.project” is found)
  2. Download bundles.zip
  3. Extract the zip content to the root of your project folder. The folder hierarchy :
  4. And restart Aptana 3.
  5. Now open an Html file, select a text and hit “Shift+Command+.”
require 'ruble'

with_defaults :scope => 'text.html,source.js,source.php source.php.embedded.block.html', :input => :none, :output => :insert_as_snippet do |bundle|
	command 'console.log()' do |cmd|
		cmd.key_binding = 'M1+M2+.'
		cmd.input = :selection
		cmd.invoke do |context|
		  selection = ENV['TM_SELECTED_TEXT'] || ''
		  if selection.length > 0
			"console.log(${1:#{selection}})"
		  else
			"console.log($0)"
		  end
		end
	end
end

Visit https://aptanastudio.tenderapp.com/faqs/your-aptana-studio-installation/adding-a-new-snippet and https://aptanastudio.tenderapp.com/faqs/scripting-aptana-studio/ruble-programming-guide for more

]]>

01,12,2010 at 8:32 Yorum bırakın

Firebug 1.6 is Released with Many Fixes and Improvements

<![CDATA[

Firebug 1.6.0

The Firebug Working Group proudly announces the availability of Firebug 1.6.0!

We have implemented a lot of new features that are summarized on our wiki in section Firebug 1.6 release notes. Please go over the summary and let us know if you need any additional information.

We have been working hard, but a lot of things wouldn’t be possible without contributions from developers, translators and also designers. See our wiki that lists all our active contributors.

Stability of Firebug has been improved, some memory leaks caught and so, we can declare Firebug 1.6 as the best release ever.

We are focusing on quality and continuously extending our list of automated tests. We run these tests to verify every release and publishing all test results online. Any Firebug users can also run the automated test suite on local machines and upload the results so, we can collect information about stability from various environments.

Firebug 1.6.0 has been uploaded on addons.mozilla.org and your Firefox should ask you for update soon. According to our past experience some issues can sneak through all the alpha and beta releases so, we expect some minor updates in the next few weeks.

Firebug 1.6.0 is for Firefox 3.6 and we are currently working on Firebug 1.7 and focusing on compatibility with Firefox 4.0. It should be available early next year. See known issues with Firefox 4.0.

Beta testers using releases from getfirebug.com will be also automatically asked to update.

Overview of Firebug 1.6

Firebug 1.6 supports Firefox 3.6


Console and Command Line


HTML


CSS


Script

  • Disabling break on next error
  • The stack panel now displays argument names and values + support for expanding/collapsing
  • Script Panel shows nicer message when it is inactive during page load
  • Improved presentation of the scope chain in the Script panel Watch side panel
  • Save and restore breakpoints across Firefox sessions
  • Script panel file list has auto scroll button and shows filtering text


DOM

  • Show the prototype, constructor, and __proto__ properties of objects
  • localStorage and sessionStorage now also displayed
  • Better search match highlighting


Net


Toolbars and Menus


Miscellaneous

]]>

30,11,2010 at 4:36 Yorum bırakın

Eski Yazılar



Takip Et

Her yeni yazı için posta kutunuza gönderim alın.