Jan 30 2010

CSS Spritemenu 0.2

Category: Web Development, technologyadmin @ 1:33 pm

I was looking into getting more experience using concepts that are light and can help speed up the performance of websites, but at the same time be stylish with a bit of animation using jQuery.  I came across this website and decided to give it a try.  This sprite menu is incredibly easy to use and will add a nice touch to your navigation menu to spruce up your website. The downside is that if you have to add a JavaScript file to you site which causes an additional server call and if you want the easing animation, you’ll have to add a second extra script to you site.  The good part is that you don’t have to write a lot of jQuery and CSS to implement the concept on your site.  It allows you to add custom animations and also comes with plenty of animation options for you to play around with.  You are able to customize the speed of your animations as well as apply it as an opacity, height, or width animation. The most work you’ll need to do is create the menu in photoshop. Other than that just style your menu and add a few lines of jQuery that define the size of your menu buttons, speed, and optional animation types. Here is an example of how I implemented it.

Check out the full tutorial.

Tags: , , , , , , , ,


Oct 19 2008

Simple Image Gallery

Category: Web Developmentadmin @ 4:58 pm

My first project has been completed and successfully posted online. Its a simple image gallery displaying pictures from my sister’s wedding. The image gallery was created using XHTML, JavaScript, and CSS. Enjoy!! Feel free to post any comments or suggestions on how to optimize the gallery. Click here to visit my portfolio

Tags: , , , , ,


Sep 19 2008

Back into Web Dev – the progress

Category: Progressadmin @ 5:41 pm

2008 has been a pretty interesting year for me. I realized that I was in dire need of a career change. Lucky for me, the economy was doing just fine and the transition into a new career was just a few clicks and interviews away is all screwed up and transitioning into a new career is quite a few clicks and interviews away. Nevertheless, I have been spending a good amount of time catching up on the various advancements that has been made in web development. I guess that would explain the previous posts regarding JavaScript. I’ve been using some very good material to get re-adjusted to Web Development, one of which is a textbook entitled DOM Scripting Web Design with JavaScript and the Document Object Model by Jeremy Keith. I borrowed this book from my lovely girlfriend who is a very intelligent and creative Designer/Developer. From this book, I have picked up many best practices and have been able to adapt to the language with the greatest of ease. If anyone out there is interested in getting into JavaScript, I definitely recommend having this book in your book case. It really sets the foundation for creating JavaScript functionality for web pages and even touches on the implementation of CSS as well. While reading this text, I felt as though I needed to take my scripting experience to the next level. I went ahead and consulted a few of my closest friends who have been in the Web Development arena for a while now and they brought me up to speed on the many different frameworks and toolkits that are available such as jQuery and Prototype. Thanks to these individuals, I’ve been able to make a substantial amount of progress in my efforts to re-instate myself as a Web Developer. Soon there will be a portfolio to illustrate the progress that I have made so far, so stay tuned my friends.

Tags: , , , , , , ,


Sep 17 2008

JavaScript Speed Boost

Category: Web Developmentadmin @ 12:56 pm

Finally back up on the net…I received an email from a friend the other day with an article from sitepoint.com regarding a free JavaScript speed boost. At first I’m thinking its something related to the article I posted up here last month about Mozilla improving their JavaScript speed. I check out the article and it turns out that W3C has come up with a new Selector API for JavaScript. It almost instantly grabbed my attention since I’m currently working on my JavaScript skills. I’m sure all of you JavaScript programmers out there know that you can obtain references to HTML elements using the document.getElementById and getElementsByTagName, but with this new Selector API, one can obtain references to CSS elements. The methods of the API can be used in conjunction with the document object or a specific HTML element to select from the descendants of that element. True, it is a fact that some JavaScript libraries allow you to perform such tasks already, but this Selector API does bring speed to the table for the native implementation. The downside of the API is that it really only supports standard CSS selectors. So if you like to use plenty of custom CSS selectors, its going to be a bit more difficult to benefit from the speed increase. One splendid fact about this API is that it is already being supported by Safari, IE, and Firefox. This is a very good article that Sitepoint has put together, providing examples as well as a link to specific details about the API. Check out the full article.

Tags: , , , , , , , ,


Aug 25 2008

Javascript improvements for Firefox

Category: Web Developmentadmin @ 5:37 pm

I’m surfing around the web this afternoon, and I come across an article on eWeek regarding some advancements that Mozilla has made with improving the speed of javascript with their SpiderMonkey engine.  Looks like they have taken javascript to another level with this advancement named TraceMonkey.  With TraceMonkey, the browser will be able to handle a much higher workload that previously was too much to handle and needed a plugin to handle it.  Using JIT(Just-in-time) native code compilation and tree tracing, JS will be able to be compared to languages like C or C++ and tear down most of the boundaries that held JS back performance wise. Imagine the growth of plugins for Firefox. They’re talking about seeing improvements in things such as the JS canvas, gaming, scene graphs and a few other areas all written in JS.Check out the full article.

Tags: , , , ,