DavidPirek.com Blog on Web Design, ASP.NET AJAX jquery

JavaScript Inheritance: How to write OO (object oriented) JavaScript

Fri, 21 Nov 2008 00:00:00 GMT

In this blog post, I would like to give little insight into JavaScript inheritance, Inheritance in OO (object oriented) lingo, is the ability to pass properties (values) and methods (functions) from one object to another. This is quite useful, when you write code: organizing functions into classes, and variables into objects helps to keep your code organized and reusable.

So here is the example.

First example is passing inheritance from an object in “literal” notation.

var car_literal = {
    brand : 'Mercedes',
    color : 'silver'};

Here is a class that we want to import (inherit) the car_literal into

function dealer(){
    this.name = "some variable";
    return true;
}

Finally, here is the inheritance:

lion.prototype = car_literal;

And this is how we call call it:

    var c = new dealer();
    alert(c.brand);

Goodbye Godaddy.com, hello Network Solutions

Wed, 22 Oct 2008 00:00:00 GMT

Despite of my long partnership with Godaddy.com where I have been hosting most of my websites, I have come to an end of supporting this service. Since most of my development is done in .NET and Godaddy.com does not support remote access to SQL Server, any development or DB migration becomes impossible. As a temporary solution, I actually went and purchased hosting plan from Network Solutions and placed my SQL Server DB there, however Godaddy.com blocked my DB connection…

Namespace in jQuery, keep your ajax organized

Tue, 15 Jul 2008 00:00:00 GMT

I have been wondering how to marry jQuery with the namespace concepts often used in the Object Oriented JavaScript development approach. In the passed I would just wrapped my jQuery binders to a namespaced function. Recently, I have seen another approach to namespacing the initial jQuery plugins itself. I suppose both of these approaches do not exclude each other, but can coexist. Depending on the complexity of your code you may choose one or the other.

Alternative to clearfix CSS method to clearing your floats

Fri, 11 Jul 2008 00:00:00 GMT

There is an alternative to the clearfix. I thought this was the final CSS trick I would ever use, but just discovered a new one. Here is an example how to create a simple 2 column layout without running into the problem of not clearing the tags.

<style type="text/css">
body{ text-align:center;}
#wrapper{ 
	width:800px;
	background-color:#ff0000; 
	position:relative; 
	margin-left:-400px; 
	left:50%; 
	float:left;
}
#left_col, #right_col{ float:left; width:400px;}
</style>

<div id="wrapper">
    <div id="left_col">
    	<p>test</p>
    </div>
    <div id="right_col">
    	<p>test</p>
    </div>
</div>

piggyback SEO strategy/trick: are you hot or not?

Wed, 25 Jun 2008 00:00:00 GMT

Recently, a friend of mine mentioned an interesting SEO strategy which I will call "piggyback SEO strategy." This is what you do: you pick a major domain name of a web site that is in the same market, and optimize your home page on that keyword. So for example: you have a dating site, and in the title of your page you put: "www hotornot com". Place this keyword a couple other times through out the page, and watch what happens after your page gets indexed. The truth is that a lot of people use google to navigate everywhere. Another friend of mine was telling me recently who amused she was when she saw her mother googeling yahoo.com.

I have in fact tested this piggyback SEO trick. In order not to commit a major breach to google's rules, I have actually build a feature of my professor's rating site oznamkujucitele.cz and calling it "the parody on hot or not" where students can upload the images of their professors and rate them much like on the "hot or not" type of websites. The result was that a couple months later, I did see the major traffic spike; however for some reason it did not last too long. Oh well, back to long tailing now :)

Emoticons in ASP.NET: how to generate Emoticons

Mon, 23 Jun 2008 00:00:00 GMT

As I have am working on my Czech Social networking site, I have come across an interesting challenge: how to create Emoticons in ASP.NET. I come up with the solution, so I would like to share it.

The core is a very simple loop function that replaces sets of characters, with another set:

    Public Function Emoticons(ByVal strCharString As String, ByVal strCharSet As String) As String

        Dim arrCharSet(30)
        Dim arrCharCouple(2)
        Dim i As Int32

        arrCharSet = Split(strCharSet, ",")
        arrCharCouple = Split(arrCharSet(1), " ")

        For i = 0 To arrCharSet.Length - 1
            arrCharCouple = Split(arrCharSet(i), " ")
            strCharString = Replace(strCharString, arrCharCouple(0), + _

"<img src='" + ConfigurationManager.AppSettings("EmoIconsPath")  + _

  arrCharCouple(1) + "' alt='" + arrCharCouple(0) + "' />")
        Next

        Return strCharString

    End Function

Next, put the pair set in the webconfig file:

    <add key="EmoIcons" value=":) regular_smile.gif,:-) regular_smile.gif" />
    <add key="EmoIconsPath" value="images/emoticons/" />

And lastly, this is how you can call this function from within, let's say the repeater control:

<%#Emoticons(Container.DataItem("comment_body"), ConfigurationManager.AppSettings("EmoIcons"))%>

So here is what it looks like in action on the fungu.cz forums' page.

Flexibility vs. Perfection in Social Networking Development Cycle

Sun, 23 Mar 2008 00:00:00 GMT

Some time ago, I have read an interview with Mark Zuckerberg that was focused on how facebook.com develops their code. There was a line that especially caught my interest. Mark mentions that one of the important factors that try to observer when developing new features for facebook is that keep the code flexible enough so that the developers would be able to modify it based on the business needs. This is something that I have also learned in my entrepreneurial endeavors: It makes no sense trying to make your application all perfect and finished before you show it to people. This is especially true if you develop for communities, because you will rarely be able to know all the needs of the community and the design stage, so long and polished development cycles make very little sense.

Switching from Microsoft XP to OS X (Dell Latitude 620 to MacBook Pro)

Sun, 23 Mar 2008 00:00:00 GMT

I am converted. I must say, I have a very utilitarian approach to computer hardware. I prefer to have the laptop that works well and I don’t have to pay for (because it is given to me at work) Laptops break and age so why to spend money on something that is after all just a tool to get the work done. Well, my recent job change earned me brand new MacBook Pro. Over night, I was forced to switch from Dell Latitude 620, which I thought was the most pragmatic computer until that time, to MacBook Pro. Being the guy that least cared about the “latest greatest,” I must say, I do enjoy the new Mac gadget very much. I use to say, the best thing I like about it is that you can make it an equal windows machine too if you for some reason need to do so. There were a few pains during my conversion period. For some reason the Mac designer decided that they want to switch the order of your control and alt keys, and add another one that sometimes combines the functionality of both. This took really a couple of weeks to get use to, but since it was clear that I most likely will never go back to a PC, I was glad to relearned my shortcuts again.

Using ASP.NET with jquery: Jquery ASP.NET API source code tutorial

Thu, 13 Mar 2008 00:00:00 GMT

I have been spending much time in recent months building ASP.NET websites with jquery as the JavaScript library framework. From these projects I was able to learn much about how to interact jquery with ASP.NET. In this post I will share of the solutions.

If you have been coding AJAX apps for a while, you probably got over doing just simple animations and AJAX requests and now you want to do more than that. I call this the “level two” of AJAX development. The characteristics are when you start using POST as an AJAX method and JSON as your data format for response.

OK, enough theory, let’s get our hands dirty: Let’s take a practical scenario, you are building a social networking site, and you wan to do a simple “add to my friends” functionality to a page that lists your users. Two things need to happened, after you click the “add a friend” button, the user needs to disappear from the “list” (he/she is your friend now, so is being moved to the friends list), second you need to reflect this change in the database.

Hiding friend after the click:

In jquery this is really simple, you can use the .hide() method. The only tricky part is the assign some kind of unique ID that will tell the click event which wrapper div to hide. I one of the easiest ways to do this is you can hide the variable into one of the elements properties: (id, href, or title)

$(document).ready(function(){
    $(".add_friend").click(function(){
            var strId = $(this).attr("id");
            strId = strId.slice(1);
            $("#" + arrS[1]).hide();
    return false;
    });
});

And here is the THML part

<div id="id_123">
	<!--
	Whatever user info you wnat here...
	-->

	<a href="#id_123" class="add_friend">add to my friends</a>
</div>

Changing of the server: writing the change to the database:

Now we are getting to the POST method. Despite the confusions going around, ding a post in AJAX as simple doing get. It is just one of the properties of the XMLHTTP request. Instead of putting the pairs of values in the query string, you just put it inside of the objects. I have seen developers trying to write HTML of a form inside of IFRAMES… nope that’s not how you do it. Lastly as you are posting to another page, you need to catch you value pars on the page. In ASP.NET is very easy: instead of request.querystring(“id”) which you would be using in your GET method, you just use request.form(“id”)

Here an example what the JavaScript would look like:

$(document).ready(function(){
    $(".add_friend").click(function(){
            var strId = $(this).attr("id");
            strId = strId.slice(1);
            $.post("ajax_post.aspx",
                { m: "SharePhoto", 
                p: arrS[1], 
                p2: arrS[2],
                p3: arrS[1]}, 
                function(data){
            });  
    return false;
    });
});

This is how you would be catching the variables on the ASP.NET pag

 Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

	strMethod = Request.Form("m") 'm = method
	strProperty = Request.Form("p") 'p = property1
	strProperty2 = Request.Form("p2") 'p = property2
	strProperty3 = Request.Form("p3") 'p = property3

End Sub

Finally, here are some examples of live sites where I have implemented this:

oznamkujucitele.cz (The voting on this page is actually done through an AJAX POST, although the page refreshes in the end, this refresh is done in JavaScript just refreshes the page to get the next image and the advertising impressions.)

fungu.cz (The digg-like voting.)

ASP.NET blogging CMS: this is what you need for an ASP.NET Blog

Thu, 06 Mar 2008 00:00:00 GMT

Just wanted to give my readers an update about Dave’s ASP.NET blog and small business CMS. As I mentioned in one of my previous posts, I was approached by a publisher to write a book about creating ASP.NET CMS. This is still in progress, and I hope I am getting in the final stage of the preliminary steps after which I will we will sign a contract with the publisher.

With this being said, I wanted to give some news on where I see Dave’s CMS to be going in the future. On one hand I will keep the blog features, giving an alternative to Word Press for ASP.NET developers (or server owners). On the other hand, I would like to start building some extensions that would make this CMS more appealing to small business. For instance I was thinking about adding an extension for recruiters that would allow recruiters easily insert new job postings, update position descriptions. Apart from the communicational value there is a great SEO value, since the website would be now filled with highly searched keywords contained in position titles.

Indian IT outsourcing now targeting US freelancers

Thu, 06 Mar 2008 00:00:00 GMT

My blog has become a favorite target of Indian outsourcing companies.

I have received quite a few sale pitches like the one below from these “we can do it all companies” from the list of technologies, you would think that this company must be larger than Microsoft, yet when you check their portfolio, you see a couple small business websites, so where is the disconnect. I suppose it is the good old “I have a guy” type of referral program we all know when you have a contractor show up at your house to give you a quote on building a new fence. “Oh I have a guy that could also paint your house, replace your windows, build your extension, do your landscaping, upgrade your kitchen…” and the list keeps going. I have did make it up. This is really a “copy and paste from the services offer” that I received. I hope since it’s so long I will not be accused for keyword staffing.

PROGRAMMING SERVICES:
ASP.NET
VB NET
C #
WINDOWS MOBILE PROGRAMMING
SQL
SERVER 2000 / 2005
MySQL
PHP PROGRAMMING
LINUX OPEN SOURCE
JHOOMLA
OS COMMERCE
SMARTY
JAVA PROGRAMMING
JAVA
J2EE
JSP
STRATS
EJB
JASPER REPORTS
ECLIPS
TOMKAT
ORACLE :
ORACLE 9i, 10g, DATA BASE
ORACLE FORMS , 6i, 9i & 10 g DEVELOPMENT
ORACLE REPORTS – 6i & 91 DEVELOPMENT
ORACLE J-DEVELOPER
ORACLE 11i ERP INTEGRATION
ORACLE DBA
ORACLE MIGRATION
S A P :
BUSINESS -1
CUSTOMIZATION AND IMPLEMENTATION
WEBSITE :
SEBSITE DEISIGNING AND DEVELOPMENT
HTML FLASH
WEBSITE TEMPLATES DEVELOPMENT
BANNERS
LOGOS
CLIPS
FLASH BANNERS
INTRODUCTION
E-COMMERCE WEBSITES
E-COMMERCE SERVER
SEO Services

1. Search Engine Optimization
• Buy Domain with Keywords
• Optimize and Keyword Research
• Title / Description / Meta tag Research
• Google / Search Engine Friendly website
• Easy Navigation structures
• Create buzz with news/articles/tools/freeware
• Content Writing Services

2. Link Building & SE Reporting
• Link Building Services – 1 way, 2 way, n way links
• Search Engine Position Tracking
• Search Engine Analysis / Landing Page Analysis
• Page Rank Reports
• Traffic Analysis & Reporting
• Link Popularity
• Link back from high PR 7+ websites

3. Blog / Content Writing & RSS Feeds
• Creation of own blog site
• Content Writer Services for Articles, News etc
• Posting of Articles on top blog site
• Free Content / Articles for syndication
• News Compilation / Copy Editing
• Posting of Fresh News on Daily basis
• RSS Feed on Website
• RSS Feed on Blogs
• Content Syndication
• Directory Creation and Posting **
• Classified Creation and Posting **

4. Email Marketing
• Still Email is the best source of generating traffic
• Email Marketing using “State of the Art” Articles, Job Alerts, News Post by “Excellent content” inside
• Sign up campaign with leading Database / public site – for example monster.com, careerbuilder.com for Email Marketing campaign
• Trading of Information / Email Database online
• Generation of “real” centralised and classified database

5. Search Engine Marketing / PPC / Adsense
• Pay Per Click
• Banners / Advertisement Signup
• Google Adsense (Revenue Streams)
• Link Syndication
• Online collaboration possibilities / Research

6. Internet Research / Data Mining
• Internet Research on any subject, domain
• Data Mining, creation of EXCEL sheets
• Large Data Mining in Small time, create database of millions of records based on Project
• Analysis of existing sites, competition, trends
• Decision Support System for SEO team on future strategy

BUSINESS PROCESS OUTSOURCING:
• DATA CONVERSION SERVICES FOR EXAMPLE : CONVERSION FROM PDF TO WORD
• QUARK EXPRESS TO WEB FORMAT
• IMAGE TO TEXT
• DATA ENTRY
• SCANNING & INDEXING
• DOCUMENT MANAGEMENT SYSTEM
• FORMS PROCESSING FOR INSURANCE, HEALTHCARE & EDUCATION INDUSTRIES USING OMR TECHNOLOGY
• ICR & OCR
• IMAGE EDITING
• PHOTO EDITING

STAFF AUGMENTATION SERVICES
FOR MICROSOFT, JAVA, LINUX, ORACLE, SAP & IBM TECHNOLOGIES FOR
ON SITE AND OFF SITE PLACEMENT SERVICES.