Janea Taylor – Ancient Tech Blog


Hover image flicker workaround
October 1, 2007, 6:21 pm
Filed under: CSS, Javascript

When using image replacement techniques on hover, many times there will be a flicker in between state changes. I’ve found a couple workaround for this. One is to use Javascript to preload the images. Another is to fake it by adding the hover image behind the normal state image and setting it’s visibility property to hidden using CSS. This way it loads the image into memory, but doesn’t display it. Or you can use a combination of the two techniques. For instance, create a Javascript function that uses styling to load the image and set it as the element background, then call the function on page load. Here’s an example:

Add the following Javascript function at the top of an HTML file.

<script type=”text/javascript”>
function preloadImages()
{
document.getElementById(‘elementID’).style.backgroundImage = ‘url(images/image-hover.png)’;

}
</script>

Call the function in the body tag of the HTML file using the onload event.

<body onload=”preloadImages();”>



CSS vs. Table based layouts
August 10, 2007, 4:39 am
Filed under: CSS, Design, Flash, HTML, Javascript

I’ve spent the last couple weeks working on a project for a local design company and was amazed at how smoothly things were going at first. The project was to simply create a homepage and sub-page template based on a Photoshop design.

So, they sent me the PSD files and when I started thinking about how to create the website, there were a few things about the design that made me really want to shy away from a table based layout and just go with CSS….or a combination of the two. Then I started actually slicing up the images and putting the layout together. As smooth and as quickly as things were going at that point, I thought well … hey… let’s just go pure CSS because that’s the “new skool” way of doing things and it would be a great learning experience. Plus I really wanted to impress the client. Mine and theirs 🙂

As it turned out, what was supposed to be a 10 hour max project turned into a “good lawd, am I ever gonna get this done” type project. It was mostly because I had to spend a lot of time researching and learning things that now that I already know them… it wouldn’t take nearly as much time to complete the project.

This was my first pure CSS layout though, and the main reason I wanted to use CSS vs. table based was because of the use of transparent images and overlapping visual components. So, in that sense I still feel like it was a good idea but now I’m starting to wonder if in some cases it’s just quicker and easier to go with more table based layouts rather than pushing the limits with technology. This is of course all a part of the learning experience that goes into working with new technologies but at the same time, there has to be a happy medium which would obviously require some compromise.

What took the most time and caused the most headache was getting the layout to display properly across all/most popular browsers. IE6 is the worst by far! There are some definite improvements in the standards compatibility with IE7 but it’s simply amazing how you can complete a layout, view it in Firefox and have it look exactly like the design…then open it up in any other browser and it looks completely wack!!! I do believe that is the technical term!

So basically, what I had to do was create a separate CSS file for each major browser then use Javascript to detect the user’s browser and select the proper CSS file. But that means, every time I have to make a change to the layout, I have to update every single CSS file….and it seems like every single little change throws something else off and I have to spend so much time tweaking the files to get them all to look just right. I can’t afford to spend that much time on what was supposed to be a fairly simple project.

It’s just that there has to be a better way. I know there are many ways to workaround the whole browser issue but this way seemed to be the most popular and efficient. I don’t know… I’m just going to have to do more research. If anyone has any other better ideas…please fill me in!


AddThis Social Bookmark Button



AJAX, Flex, Web Services…(oh my!)
July 3, 2007, 9:14 am
Filed under: AJAX, Development, Flex, Javascript, Web Services

So I’ve been playing around with AJAX and Flex quite a bit lately. Seems a lot of people I talk to are interested in these technologies and I must say, they are pretty cool. Especially the ASP.NET AJAX Extensions and Toolkit. I installed a copy of Flex Builder and went through about 16 hours worth of Flex training but it didn’t excite me near as much as watching the AJAX for ASP.NET videos.With all the hype surrounding the whole Web 2.0 craze lately, seeing so many sites with AJAX and Flex popping up, realizing sites you go to everyday are now incorporating more and more “really cool” features…it definitely feels like things are changing quickly. Although Flex is sort of considered to be an alternative to AJAX, I think knowing how to work with both is the smart way to go right now. Obviously the more you know, the more powerful you are but in this case, I can see how each would serve their own unique purpose. Similar to the way technologies like Flash and Java do.

The main thing I’m interested in right now though is getting really knee deep into the inner workings of so-called Web 2.0 applications. When writing ASP.NET applications, Visual Studio has always been great for dragging and dropping controls, auto-generating code, and of course hiding that code from you. Making complex tasks very easy, or seem very easy thus requiring less overall knowledge to accomplish. It’s no different with AJAX for ASP.NET. What requires a click and a drag within Visual Studio might seemingly take hours to code by hand in PHP. But the amount of time spent dealing with it’s quirkiness could be about the same.

I spent the last 6 or so hours fighting with a “simple ASP.NET AJAX” application. Not to be outdone, I spent about 8 hours yesterday fighting with a simple Flex application. I decided to update my MP3 database and create a data access class in C# that I could use with various other applications. For instance, I created a search page in ASP.NET with a datagrid for the results. Then I created a web service that performed the database functions and hooked the ASP.NET page up to that. Finally, I wanted to create a Flex application to connect to the web service. Ran into quite a few snags here and there mainly because I was trying to return a DataSet object from the web service method call.

Flex and Microsoft web services don’t seem to play well together just yet. Retrieving DataSet data in Flex can be a little tricky. For instance, you cannot actually send a true DataSet object. You have to return a DataTable object. Flex then reads it in as an ArrayCollection.

Then again, ASP.NET AJAX and Microsoft web services don’t seem to play that well together either. Using the same web service that I had the ASP.NET page and Flex application working with, I then AJAX enabled the ASP.NET page. This worked beautifully! I was amazed! I thought how can this be so easy?? Well, the problems arose when I decided to add the code to call the web service methods using client side javascript functions. This concept is the true essence of AJAX technology and is at the core of why AJAX is really powerful. So it definitely cannot be overlooked. But it also proves to be the most nerve racking concept! Of course!

What caused such a headache earlier was the fact that when you call a web service using javascript, you have to use a relative path that points to a local copy of the *.asmx file. This means that the web service must be local in order to access it using client side javascript calls. This pretty much defeats the purpose of a web service. Ok not entirely, but web services are essentially meant to be remotely called over the web…or over a network. So for the service to have to be local just didn’t make much sense to me.

Well, come to find out…it is possible to reference a remote *.asmx file via a URL address, but to do so you have to create a bridge between the javascript and the web service. In other words it’s the same as creating a proxy like you would with a PHP implementation. I haven’t had a chance to experiment with this yet but I plan to in the next couple days. There really isn’t a whole lot of information out there yet on this stuff because it’s still so new but I have a few books here that should help.

Ok now, back to the fun…



Project archiving made simple
May 11, 2007, 3:12 am
Filed under: Linux, Productivity, Scripting

When I’m working on an application I periodically save the entire directory structure the project resides in, usually upon the completion of any major milestones or prior to any dirty work. The number of archive files can add up over time so to keep track of them I use a handy little naming convention -> Project_yyyyMMddhhmm. The reason for this, other than consistency is pretty simple… By using the current date/time in this format, all the archive files are automatically sorted alphabetically by the exact year, month, day and time they were created and well, it makes more sense than say “Project1, Project2” etc…If I’m working in Windows I usually go about the process of archiving a project by selecting all the files/folder in the working directory, adding them to a zip file then naming the zip file according to the naming convention. In the process I have to look at the current date/time and populate the information accordingly. This takes less than a minute…but when under tight deadlines, every minute counts!

In Linux/Unix, I can archive a project in less than a second…through the use of a few aliases and a single variable. For example, I have the following in my .bashrc file:

alias appname=’echo $appname’
alias archtime=’date +%Y%m%d%M’
alias archapp=’tar -cf `appname`_`archtime`.tar *’

So, I have a shell variable called appname which, in BASH I can change by typing appname=’currentapp’. Then I have a command called appname which simply returns the value of that variable. Finally, I have two commands: archtime and archapp which retreive the date and archive the entire directory respectively. The archtime command simply returns the formatted results of a date command and the archapp command uses the tar application to archive the directory using the results of the appname and archtime commands.

Now I can run archapp from the command line and it will automatically create a new archive file using my naming convention 🙂 Simple but sweet!



Unable to access admin console for local database
January 10, 2007, 5:11 pm
Filed under: Databases, JSP, Oracle, Technical Issues

Summary: I set up my laptop as a development system to work on a JSP application which connects to an Oracle 10g database. I had installed Oracle locally on my laptop a few times and finally got a stable version up and running, although I still run into issues here and there. One of the problems I was experiencing recently was being unable to open the administration page for a local database I created. It was only happening intermittently and seemed to be related to having multiple network interfaces enabled. If I disabled all of the interfaces I wasn’t using, and left only the one I needed, then it would usually work. However, this poses a problem when I must have more than one interface enabled, such as when connected to another network via a VPN. After much research, I found quite a bit of information about this problem. Seems it is rather common.

Resolution: Most times, the fix for the problem is to install and configure the Microsoft Loopback Adapter. Also, the local hosts file may need to be modified. Details on how to do this can be found easily on the web by doing a quick search for “installing microsoft loopback adapter”. Also, if you throw an “oracle” in the search somewhere, you’ll find a lot of info related to this specific issue. Here’s someone else who was experiencing a similar problem. http://oracleplz.blogspot.com/2006/02/10g-installation-on-windows.html

You may need to verify that the admin port is listening as well. You can test this by running telnet from the command line. For instance, telnet computername 5500. If the connection fails, run a netstat -a command and make sure that the computer is listening on the specfied port. If the system is not listening on the port, then the service is probably not started. To manually start the database service, open up the service list in Windows and make sure that the OracleDBConsole service is started. If it’s unable to start, you may need to manually restart the OracleService service.



127.0.0.1 works but localhost doesn’t
December 20, 2006, 3:40 pm
Filed under: Development, JSP, Technical Issues

Summary: I ran into an issue recently when I was setting up a new computer as a development system. I was using Netbeans as my IDE. In order to develop and test JSP applications, I needed to install Tomcat. Once I had everything installed and configured, I built and ran an application that I knew worked because it was running fine on a different computer. Same configuration, same source code but was unable to run it on the new computer. The issue was that I was receiving an HTTP 500 – Internal Server Error when attempting to access any web pages on the computer using http://localhost as the URL. The first thing I should have tried was attempt to access the application using http://127.0.0.1/ instead of http://localhost/. But instead, I proceeded to uninstall and re-install everything! Including all of the Java components. When this didn’t work, I tried installing the Sun Java Application Server thinking there might be something wrong with Tomcat. This didn’t work either. I checked the local hosts file and didn’t see anything out of the norm. After fighting with this issue for a few days, I finally figured out what the problem was and how to fix it, but till this day could not tell you why the problem exists.

Resolution: After comparing all of the configuration options on the computer that worked with the one that didn’t, I noticed that the only difference was that the new computer’s browser was configured to use a proxy server. When I removed the proxy configuration from the browser settings, I was then able to access all locally hosted applications using the http://localhost/ URL as well as the http://127.0.0.1/ URL. Who knows why….



What is AJAX?
August 4, 2006, 3:40 am
Filed under: Advanced, AJAX, Development

The term Ajax is used to describe a method of development that uses Asynchronous JavaScript and XML. Ajax is a collection of various components, technologies and dynamic development tools. It is not a programming language, or a single tool itself. It is the combination of several tools. Ajax is considered a method or way of creating dynamic web applications. Ajax is similar to DHTML in that it is a combination of technologies used together to create an application (Wikipedia – Ajax, 2006).

A significant advantage to using Ajax technology is that it provides the ability to update dynamic information on a webpage quickly, without having to reload the page. Ajax combines HTML, CSS (Cascading Style Sheets), JavaScript, DOM (Document Object Model, XML, XSLT, and specifically the XMLHttpRequest to create such dynamic functionality (Webopedia – What is Ajax?, 2006). The XMLHttpRequest is used to provide asynchronous updates.

Many of the technologies used in Ajax implementations have been around for quite some time. Creating the Ajax suite was simply a way to organize these tools into a conglomerate of components, which can be used to define or identify the functionality of an application (AjaxInfo.com – What is Ajax?, 2006).

One of the most popular Ajax implementations you will find today is Google Maps. The way Google Maps functions as compared to other map applications is very different in that functions such as zooming and moving directions can be performe without refreshing the page. This type of application uses HTML, CSS, JavaScript and XML. These technologies used together create the Ajax model. (Webopedia – What is Ajax?, 2006).

Resources:

Wikipedia – Ajax. (2006). Retrieved August 4, 2006 from http://en.wikipedia.org/wiki/AJAX

Webopedia – What is Ajax? (2006). Retrieved August 4, 2006 from http://www.webopedia.com/TERM/A/Ajax.html

AjaxInfo.com – What is Ajax? (2006). Retrieved August 4, 2006 from http://www.ajaxinfo.com/default~viewart~5.htm



Web Development – Cookies
August 3, 2006, 4:01 am
Filed under: Advanced, Development

A cookie is used in a web application to store data on a user’s computer. A cookie is a text file, which contains information that is sent to a web server any time a user visits a website. Often times the information stored is used to help customize and personalize a website. For instance, a user’s name and interests may be stored in the cookie, and when they visit the website that created the cookie, the website displays their name and interests (Webopedia – What is a cookie?, 2006).

Cookies can be used to personalize e-commerce applications. They can contain values that are read by the web server which provide a personal experience when browsing a website. For example, when a user enters in their name for the first time, that information may be stored in a cookie. Then, every time the user visits the website, their name is read from the cookie and displayed on the web page. Cookies are also used in shopping cart applications to store temporary data, such as items that are stored in a shopping cart (Merchandizer.com –What Exactly Are Cookies?, 2006).

The only real disadvantage to using cookies is that some user’s may not have their browser’s enabled to use them for security reasons. Although cookies are merely text files and are considerably safe to use, there are some security concerns when it comes to using cookies. For instance, a user’s credit card information or other personal information, such as a social security number might be stored in a cookie, which could be read by anyone who has access to the user’s system (Cookie Central – The Cookie Concept, 2006).

If security is a concern, it is possible to control your web browser’s security settings to allow or prevent cookies from being created on your computer (Webopedia – Do Cookies Compromise Security?, 2006). This can cause issues however when attempting to use certain web applications. For instance, disabling cookies may prevent you from being able to use shopping cart applications. As a user adds items to their shopping cart, these items are stored in a temporary cookie. If cookies are disabled, the items will not be placed in the shopping cart (Merchandizer.com –What Exactly Are Cookies?, 2006).

Resources:

Webopedia – What is a Cookie? (2006). Retrieved August 3, 2006 from http://www.webopedia.com/TERM/c/cookie.html

Merchandizer.com –What Exactly Are Cookies? (2006). Retrieved August 3, 2006 from http://www.merchandizer.com/Ecommerce-Articles/2006%5C03%5Cwhat-exactly-are-cookies.html

Cookie Central – The Cookie Concept. (2006). Retrieved August 3, 2006 from http://www.cookiecentral.com/c_concept.htm

Webopedia – Do Cookies Compromise Security? (2006). Retrieved August 3, 2006 from http://www.webopedia.com/DidYouKnow/Internet/2002/Cookies.asp



Intro to Development – Authentication
July 27, 2006, 2:32 am
Filed under: Development, Intro, Security

In computing and security, authentication is a term used to describe the process of identifying someone or something by comparing them to whom or what they are supposed to be. One of the most common authentication processes includes providing a password or other login information (Whatis.com – Authentication, 2006). Authentication should not be confused with authorization. The latter is a term used to describe which permissions are assigned to a person or thing. For example, someone must be given authorization to access certain resources. Then the process used to identify the person as being who they claim to be would be accomplished by some form of authentication (Whatis.com – Authorization, 2006).

There are also more advanced techniques of authenticating someone’s identity, such as biometric technologies, which are able to authenticate a person’s identity by scanning some unique biological characteristic, such as fingerprints or eye retinas. A common form of authentication used for Internet transactions utilizes digital certificates, which are provided by a Certificate Authority. Digital certificates and Certificate Authorities (CA) are components of a larger system known as a public key infrastructure (PKI). Using an algorithm, a CA creates a private key and then issues public keys through digital certificates. For transmission to occur, data is encrypted using a cryptography method. Public keys can be distributed and used for authenticating an objects identity, such as a computer or person. The public key must be compared against the private key and they must match in order for something to be authenticated. Once an object is authenticated, the data can be decrypted (Whatis.com – PKI, 2006).

There are several built-in authentication options available in ASP.NET. Custom authentication methods can be developed as well. Some of the built-in methods supported by ASP.NET include Form-based authentication and Passport authentication. Integrated Windows authentication is a common method, which uses Windows credentials to verify a user’s identity. Windows authentication is flexible and easy to implement. It is not necessary to hard-code anything because IIS controls the authentication process (ASP 101 – Security Features in ASP.NET, 2006).

Resources:

Whatis.com – Authentication. (2006). Retrieved July 27, 2006 from http://searchsecurity.techtarget.com/sDefinition/0,,sid14_gci211621,00.html

Whatis.com – Authorization. (2006). Retrieved July 27, 2006 from http://searchappsecurity.techtarget.com/sDefinition/0,,sid92_gci211622,00.html

Whatis.com – PKI. (2006). Retrieved July 27, 2006 from http://searchsecurity.techtarget.com/sDefinition/0,,sid14_gci214299,00.html

ASP 101 – Security Features in ASP.NET. (2006). Retrieved July 27, 2006 from http://www.asp101.com/articles/cynthia/authentication/default.asp



SQL Queries & ASP.NET
July 19, 2006, 5:02 am
Filed under: .NET, Development, SQL

SQL stands for Structured Query Language. It is a programming language designed to allow the viewing and manipulation of data within a database (Wikipedia – SQL, 2006). There several proprietary versions of the Structured Query Language, primarily because each major database system vendor has created their own version. For instance, Microsoft has created Transact-SQL or T-SQL which is used to interact with SQL Server databases (Wikipedia – Transact-SQL, 2006) and Oracle has created SQL*Plus which is used to interact with Oracle databases, but all versions have certain similarities and share syntax to some extent (Basic Introduction to SQL*Plus, 2006). Understanding the fundamentals of SQL is typically all that is needed in order to understand and use SQL statements.

A SQL statement is a string of text, which is interpreted to build a command that is run against a database or database system. There are many SQL commands available, which allow you to perform a variety of actions. For instance, using various SQL statements, you can view, edit, and delete data within tables as well create and delete entire databases. The four most common SQL commands used to query databases are SELECT, INSERT, UPDATE, and DELETE. Other commands allow you to perform complex statements, such as the JOIN command, which allows running queries against multiple tables simultaneously. A typical SELECT statement specifies a column or columns and a table or tables using a JOIN statement. You can also use keywords such as WHERE and LIKE to specify parameters, which limit the data that is returned.

The following SQL statement would return all rows of data from a table called tblUsers where the fldFirstName is equal to “John”.

SELECT * FROM tblUsers WHERE fldFirstName = ‘John’

If I were interviewing an ASP.NET programmer as a candidate for an ASP.NET development position, I would most likely expect them to have a working knowledge of SQL and at least one major database system such as SQL Server or Oracle. ASP.NET is used primarily to create dynamic web applications, many of which interact with backend database systems. It is important that the developer of an ASP.NET web application be accustomed to working with databases. This will most definitely require knowledge of SQL (W3Schools – Web Building, 2006).The main difference between a web designer and a web developer is that a web designer focuses primarily on the interface design of a website; therefore, they would not necessarily need experience programming in ASP.NET or SQL. However, a web developer is typically responsible for creating the code, which makes a website functional and dynamic. By virtue of the term “ASP.NET programmer”, it is assumed that the duties, which would fall under such a title, would include web development as well as web design. I would expect any seasoned web developer to have experience writing applications, which interact with databases using SQL statements.

Resources:

Wikipedia – SQL. (2006). Retrieved on July 19, 2006 from http://en.wikipedia.org/wiki/SQL

Wikipedia – Transact-SQL. (2006). Retrieved on July 19, 2006 from http://en.wikipedia.org/wiki/Transact-SQL

Basic Introduction to SQL*Plus. (2006). Retrieved on July 19, 2006 from http://www-it.desy.de/systems/services/databases/oracle/sqlplus/sqlplus.html.en

W3Schools – Web Building. (2006). Retrieved on July 19, 2006 from http://www.w3schools.com/site/site_intro.asp