Archive

Archive for April, 2009

Blackberry Storm using Raphael (SVG/VML) and SoundManager

April 24th, 2009 No comments

blach berry

 

Brad Neuberg pointed me to a Blackberry Storm site that uses Raphael, jQuery, and SoundManager to offer an SVG / VML (for IE) experience.

PLAIN TEXT HTML:
1  
2
  • <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/jquery-ui.min.js"></script>

  • 3
  • <script src="/js/soundmanager2-nodebug-jsmin.js"></script>

  • 4
  • <script src="/js/raphael-min.js"></script>

  • 5
  • <script src="/js/trig-min.js"></script>

  • 6 .

    More Web Workers in Action

    April 24th, 2009 No comments

    Another day, another Paul Rouget HTML 5 demo 🙂 This time he does something fun with Web Workers to allow you to see the difference that you can get when you use them.

    WEB

     

    His latest simulation has him implementing Simulated Annealing (in video) which is useful for finding the shortest path between several points in a canvas.

    If you run the demo demo and watch the animated PNG you will see how smooth the world is based on if the animation stops from time to time. Try it with workers on and off to see.

    We have been using Workers in Bespin from the get go. Malte Ubl is doing very cool work to ironout the differences between different Web Worker implementations (Firefox, Safari, and Gears). For example, through his abstraction you get the standard importScripts in Gears too, and it includes a mutex abstraction to boot. This has been crucial for us as we add more JS intensive features to the code editor such as realtime syntax checking, rich syntax highlighting, JSLint error reports inline, and more.

    We have found that you do have to be careful with Workers though. You don’t want to fire too many off as you end up with a raging CPU if you aren’t careful, so Malte and others are working on a slicing plan that will keep the CPU down but also keep the UI responsive. We will report back.

    His latest simulation has him implementing Simulated Annealing (in vide) which is useful for finding the shortest path between several points in a canvas.

    If you run the demo demo and watch the animated PNG you will see how smooth the world is based on if the animation stops from time to time. Try it with workers on and off to see.

    We have been using Workers in Bespin from the get go. Malte Ubl is doing very cool work to ironout the differences between different Web Worker implementations (Firefox, Safari, and Gears). For example, through his abstraction you get the standard importScripts in Gears too, and it includes a mutex abstraction to boot. This has been crucial for us as we add more JS intensive features to the code editor such as realtime syntax checking, rich syntax highlighting, JSLint error reports inline, and more.

    We have found that you do have to be careful with Workers though. You don’t want to fire too many off as you end up with a raging CPU if you aren’t careful, so Malte and others are working on a slicing plan that will keep the CPU down but also keep the UI responsive. We will report back.

    Categories: Others, Tips and Tutorials Tags:

    Why You Want To Be A Craftsman Instead Of A Cowboy

    April 24th, 2009 No comments

    There has been a bit of a code war going on or at least a some what heated debate on code quality and programming principles.

    I’m not going to rehash everything but I will sum up the two sides and throw my opinion into the ring. Why does my opinion matter? I’m not so sure that it does but you can be the judge of that. What I do think is different about my opinion than the opinions that I have heard/read so far is that I can’t place myself in either camp. I am not a coding cowboy that just cares that “it works” and I am not a bureaucratic standards Nazi either. I’ll talk a bit more about why I am ducking for cover in no man’s land in this battle of opinions.
    The Coding Cowboys Say

    Jeff Atwood and Joel Spolsky sure hit a sore spot when they suggested that learning programming principles just wasn’t worth it and just getting it done was more important.

    Jeff likened principles and guidelines to the Ferengi and their 285 Rules of Acquisition saying that every situation in programming cannot be governed by a set of rules and there isn’t a one size fits all pattern to solve everything.

    Joel refers to the SOLID principles as “extremely bureaucratic programming that came from the mind of somebody that has not written a lot of code.”
    The Craftsmen Say

    Jeff and Joel’s comments sparked a lot of rebuttals from the ALT.Net community. It is understandable since those comments attack the very foundation of TDD and DDD. I am not going to bore you with a list of everyone that chimed in but I want to highlight a post that I think sums up this position in a clear and nice way.

    Justin Etheredge made a great post is response to the criticisms. I have been reading Justin’s blog for a while and I like the way he views software. He likens software development to carpentry and woodworking, both are a learned craft. You don’t get good a carpentry by throwing things together and ignoring building codes. Patterns and principles are like building codes.
    My View On The Whole Thing

    I was a bit surprised at first to hear Jeff and Joel’s comments because they are some smart guys that have produced some successful software. I highly doubt, regardless of how it came across, they intended to imply that you should ignore all guidelines and just string together your code. Unfortunately, the comments of their posts make it all too clear that this is exactly the way a lot of programmers took it. What’s worse is bad programmers will use this as a defense for their resistance to improving their skills.

    Like I said, currently I am somewhere in no man’s land. For too long I had the mindset that would take Jeff and Joel’s comments and use them as an excuse to ignore patterns and principles. From the beginning of my education in software development, no importance was placed on “good design.” My college training only focuses on teaching the syntax and considering that “knowing” the language.

    After a few years of living in denial, I had to accept that their was far more for me to learn and I began my journey out of the cowboy coding camp and started striving to develop software in a TDD manner. I still have a lot to learn but facts cannot be ignored. Since making an effort to improve my craft I have seen a significant drop in the amount of bugs found in new software I am producing and the bugs that are found are smaller and much similar to solve. So that is my take on the whole thing and I hope that this at least peaks someone’s interest to dig a little deeper in regard to becoming a craftsmen and taking pride in the code they produce.

    Categories: Designing Tags: ,

    6 Tools To Be An Effective Web Developer

    April 24th, 2009 No comments

    Over the last few years Rails has helped Ruby’s popularity explode. One of the biggest reasons for this is the time that Rails can save you. By working within a well defined framework a lot of development decisions are simplified and it is easier to be more organized. Throw in some great tools like ORM, Unit Testing, Mocking, and more and you have a powerhouse of developer efficiency and quality.

    There has always been and probably always will be feuds over what is the best platform but what I want to show you is that those arguments are mostly irrelevant. Regardless of what platform you choose to develop on there are most of the same tools available in one form or another. The common components, for me anyway, that help me produce high quality code faster and is easier to maintain are a good IDE, easy to use unit testing and mocking frameworks, an ORM, a MVC framework, and a good JavaScript library.

    I am a .Net developer by trade and a PHP developer sometimes by choice. I enjoy both environments for different reasons. I am going to talk about each of these components in a bit of detail and explain why I think they are important and then at the end of the article I will provide a list of each of these components for various languages (.Net, Java, PHP, Python, and Ruby). I have decided to only list free or open source tools because they are easy for someone to try out and we all like to save a few bucks.
    The Integrated Development Environment (IDE)

    To me this is the prime essential. Sure you can program in Notepad and compile with the command line but it will likely take longer and it will require more discipline to stay organized. With a good IDE you have easy project management (all you files grouped together with tabbed browsing), syntax highlighting, compilation (if applicable), and auto complete.

    IDE are continuously getting more and more sophisticated and plugins allow for lots more functionality like svn and git management in the IDE.

    For me my favorite IDE is Visual Studio. There are some other great programs out there like NetBeans and Eclipse but for whatever reason I have become partial to Visual Studio.
    Unit Testing And Mocking

    These two items go hand in hand. No application is complete without proper testing. There are plenty of people on both sides of the fence when it comes to testing. I know, I was a skeptic for a along time. It just felt weird to spend time writing code to test the real code I was going to write. Finally I just decided to give it a try and it has changed the way I program. When you are focusing on how to test your code you just write cleaner code and it’s nice to have a quick way to know if the change you just made broke anything.
    Object Relational Mapper

    If you have ever used an ORM you know that it can save you a huge amount of time. One of the concerns I had before jumping to an ORM was performance. I wanted to know if using an ORM would make my application slower but I was asking the wrong question. I should have been asking whether or not the small performance hit was worth the huge time savings. The answer to that is a definite YES! Rarely in an application will the ORM be the source of poor performance and if it is it can be refactored to improve or you can use straight SQL if need be.

    It all comes down to not worrying about performance issues before you have any. Yes it is important to keep performance in mind but using an ORM shouldn’t be anything to worry about.
    MVC Framework

    MVC has become very popular thanks in part to Rails and it’s revolution in the way we do Web Development. The key component to it’s popularity is that it separates the different concerns of your application into seperate pieces. This separation allows easier testing, better design, and makes your application more maintainable overall.
    JavaScript Library

    It seems there is a JavaScript library for just about everything these days. I remember not too long ago there were that many and JavaScript use hadn’t exploded yet. A JavaScript library is important to your productivity. The library shouldn’t compensate for poor JavaScript skills, you need a solid foundation, but should compliment a good understanding of it. The library will take care of browser compatibility issues and low level operations letting you focus on getting the job done.

    ASP.Net
    IDE: Visual Studio 2008 Express
    Unit Testing: NUnit
    Mocking: Rhino Mocks
    ORM: NHibernate
    MVC: ASP.NET MVC
    JavaScript: jQuery

    Java
    IDE: NetBeans
    Unit Testing: JUnit
    Mocking: EasyMock
    ORM: Hibernate
    MVC: Struts
    JavaScript: jQuery

    PHP
    IDE: PHPEclipse
    Unit Testing: PHPUnit
    Mocking: PHPMock
    ORM: Propel
    MVC: Symfony
    JavaScript: jQuery

    Python
    IDE: PyDev
    Unit Testing: PyUnit
    Mocking: PythonMock
    ORM: SQLObject
    MVC: Django
    JavaScript: jQuery

    Ruby
    IDE: RadRails
    Unit Testing: Test::Unit
    Mocking: Mocha
    ORM: Sequel
    MVC: Rails
    JavaScript: jQuery

    Be sure to grab the RSS feed, get updates by email, or follow me on Twitter to stay up to date and not miss any posts.

    Categories: Webmaster Tools Tags: ,

    Announcement: FlashOtaku Contest Winners

    April 8th, 2009 No comments

    Last week, FlashOtaku and Six Revisions asked you what you thought the best image editing software was. There were over 150 participants, and today, we’re glad to announce the winners of the five FlashOtaku Slideshow Flash Deluxe component licenses worth $79.00 each.

    flash_otaku

    The Winners

    The winners were selected by using the same methodology as in previous contests, via a SQL query.

    1. jack (comment #31621) | Website: typesett

    2. carlos (comment #31624) | Website: OWN INDUSTRIES

    3. Rick (comment #31640)

    4. Benjamin M. Strozykowski (comment #31574) | Website: Worthless Genius

    5. Christian Schenk (comment #31540) | Website: Christian Schenk

    Selection

    Here’s the screenshot from the MySQL query.

    selection

     

    Thank you FlashOtaku and participants

    Let me take a moment to thank our contest sponsor: FlashOtaku, provider of high-quality Flash components. I’d also like to thank the awesome people who participated in last week’s polling. I hope to summarize the votes into another post coming soon.

    Categories: Others, Webmasters Resources Tags:

    jQuery iPod Drilldown and Flyout Styles Menu System

    April 8th, 2009 No comments

    The iPod Drilldown and Flyout Styles Menu System can be used to create a simple dropdown menu for a single list of options, a flyout menu for a smaller hierarchical list of options where child menus are displayed next to the parent menu on mouseover, and two variations on the iPod style, one with a back button and another with a linked breadcrumb to let users easily traverse back up the hierarchy.

    It provides easy navigation of complex nested structures with any number of levels. They also built in the ability to customize a menu’s appearance, including active and hover states, by passing in classes as options.

    ipod-menu

    Categories: Programming Tags: ,

    Creating Recursive SQL Calls for Tables with Parent-Child Relationships

    April 8th, 2009 No comments

    recursI ran into an interesting problem today while considering how to find out where subordinate employees fit into an organizational chart. The problem was that I need to list every employee that was “under” a given employee, but could only really do this in SQL – if I were to try and do this from within PHP, it would have made a single exception case where we build an SQL query based on another query – something I’d rather not have to do. Let’s see if this little graph can more adequately describe what the issue was:

     +-----------+-------------+
    | Employee  | Subordinate |
    | --------- | ----------- |
    | Frank     | Tim         |
    | Frank     | Jacob       |
    | Frank     | John        |
    | Frank     | Mark        |
    | Tim       | Chris       |
    | Tim       | Randy       |
    | Randy     | Dave        |
    | Mark      | Joey        |
    +-----------+-------------+

    So, with this list, the goal was that if I were looking for all subordinate employees under Frank, it would return rows with the names “Tim, Jacob, John, Mark, Chris, Randy, Joey”, since everyone else is under Frank. However, if I were to look for Tim’s subordinates, I’d only get “Chris, Randy, Dave”, and if I looked for Joey, I wouldn’t get any rows.

    What does this mean, then? It means we have to search the table multiple times – once for each node, or employee, that we find – the first entry we give it as well as every entry below that employee. It also means we need to hard code the number of levels of employees we’re looking for, or, gasp, use recursion in our SQL.

    To fix this issue, I started by digging around in Google. I’m using MSSQL, so maybe I could have created a stored procedure, but I tend to shy away from them in case I ever want to change database technologies. What I found was a really great PDF that almost matched my needs over at NaSPA . The problem with the query he came up with, however, is that it merely wanted to know the number of subordinates, where we’re interested in much more data than that.

    This is the solution I came up with based on Rob Mala’s code:

    WITH temp_orgChart (Employee, Subordinate, iteration) AS

    (

    SELECT Employee, Subordinate, 0

    FROM orgChart WHERE Employee = ‘Frank’

    UNION ALLSELECT a.Employee, b.Subordinate, a.iteration + 1

    FROM temp_orgChart AS a, orgChart AS b

    WHERE a.Subordinate = b.Employee

    )

    SELECT Subordinate

    FROM temp_orgOrgchart

    Let’s take a look at this step by step then, shall we? Maybe you’ll get a grasp of how to adapt this for your needs.

    WITH temp_orgChart (Employee, Subordinate, iteration) AS

    (

    All this says is that we’re creating a temporary table to do our SELECT command on, and that this table is going to have three columns – “Employee”, “Subordinate”, and “iteration”.

    SELECT Employee, Subordinate, 0

    FROM orgChart WHERE Employee = ‘Frank’

    UNION ALL

    Here, we’re doing our first step in the recursive technique – finding the very first employee to start with. Notice that we’ve added a “0? to the end of the SELECT list – this is our index. As we increase our index, we go deeper into the tree of employees. Also, if we wanted to start with a different employee, we’d name him here instead of Frank.

    We also did a UNION ALL afterwards. This means we’re going to include everything in the next statement too.

    SELECT a.Employee, b.Subordinate, a.iteration + 1

    FROM temp_orgChart AS a, orgChart AS b

    WHERE a.Subordinate = b.Employee

    This is our recursive step. This means it’s essentially the equivalent of calling a specific SELECT statement with different input over and over again based upon the results of the preceding SELECT statement. Here, we’re grabbing the current employee that we just found, and looking for their subordinate in the organizational chart. When we find one, we look for that subordinate’s subordinates and if we find one we do it again until we don’t find any more. We then go back to the previous subordinate and keep digging.

    The process goes like this:

    1. The original step (before recursion) adds the following values to the temporary table:

      Frank, Tim, 0

      Frank, Jacob, 0

      Frank, John, 0

      Frank, Mark, 0

    2. The first recursive step looks into the existing temporary table, and sees that Tim has people below him, and adds the following values to the temporary table:

      Tim, Chris, 1

      Tim, Randy, 1

    3. The recursion then sees that Randy has someone below him:

      Randy, Dave, 2
    4. The recursion doesn’t see anyone else below, so it returns to the last level and adds:

      Mark, Joey, 1

    This is the confusing step, and may be difficult to wrap your mind around. Hell, it was a mess for me to figure out and I’m not entirely sure the above process is exactly the way it’s done, but I do know that the code works. It’s okay – take the code, and play with it. Keep in mind that every iteration is a new “level” on the chart.

    )

    SELECT Subordinate

    FROM temp_orgOrgchart

    Back to the simple stuff – this just says that the data we want is in the column “Subordinate” in the temporary table we’ve just filled up.

    This recursive SQL statement really isn’t too difficult, as there’s only one really confusing bit to it – the actual recursion.

    I hope this helps a few of you put together the calls you need and saves you some time.

    Categories: Programming Tags: ,

    Top 10 Free Color Tools for Web Designers

    April 8th, 2009 No comments

    Need a color scheme, but suck at that whole hexadecimal – where – the – hell – is – the – next – shade – of – blue thing? No biggie, I’ve got you covered. From eyedroppers, to scheme generators, to color blindness tools, below you’ll find my latest list of color tools that make my “Web Developer Must Have” list. While you’re playing with these, please do me a favor and keep in mind that the level of contrast you come up with is directly proportional to how much I’ll probably hate your site. No excuses, really now, if you want me to go into an epileptic shock (which you very well may), you’ll ignore my warning.

    colorchooser

    Here we go:

    1. ColorBlender.com
      Slider based, relatively easy to use. Has a great selection of pre-made “blends” if you take a look at their “browse blends” section, though the type of blend you get doesn’t seem to be editable. This does let you get related .ACT (Photoshop) and .EPS (Illustrator) palettes from the site though. Pretty handy if you need a quick scheme in a hurry.
    2. Big Huge Labs’s Palette Generator
      This one’s pretty sweet – upload an image and the generator will create a color palette for you with hexadecimal web colors from the colors in the image. It’s pretty handy if you have a nice photo that you want to build a design around.
    3. ColorZilla
      An awesome eyedropper and color chooser tool extension for Firefox. Open it up and instantly know the color code of whatever it is you’re looking at. Also includes a color chooser. Highly recommended.
    4. Color Fields Colr Pickr
      Way cool Flickr app that finds pictures with the color you need. Granted – many of these images are probably not okay to use without permission, but if you see something you just have to use, it’s easy to take a look and try to get ahold of the photographer.
    5. ColorJack: Sphere
      The ColorJack Sphere is amazing – it lets you generate color schemes based on a formula (triads, complementary etc), and even lets you simulate color blindness. This is great as a scheme builder alone, but add in the accessibility factor and you get one of my favorite color tools. Evar.
    6. The Colorblind Web Page Filter
      Have an accessibility need, but aren’t quite sure what the results are going to look like? Use the colorblind web page filter, and take a look at your site through the eyes of the colorblind. It’s quite the revealing tool, and incredibly helpful if you have a need for it.
    7. J.Y. Design’s Pantone to Web HEX Color Chart
      Have a Pantone specification to go off of, but don’t know the web color to match it to? Easy. Though it’s just a big list, it’s saved my ass more than once. Easily match your web colors to Pantone colors with this chart.
    8. Color Inspirator
      Haven’t the slightest idea what color scheme to start with? Try out Color Inspirator. It generates color schemes in variable sized columns, and just might jump-start your creativity with colors.
    9. Metasphere’s Simple Color Chooser
      Quick and dirty color chooser. Doesn’t really get any more straightforward than this.
    10. Color Schemer Online v2
      Generates a 16 color palette for you quickly based on the color of your choice. Handy, and quick to use in a bind, but what I find really useful is the ability to quickly lighten and darken entire schemes.
    Categories: Designing, Others Tags:

    NFS Mounting Problems on Debian Linux

    April 8th, 2009 No comments

    nfs

    I recently ran into some problems with our Linux mail cluster after a bad power bump. (Electricity. Hmph! Sooo 20th Century.) Apparently servers don’t enjoy it when you tell them it’s not working out and proceed to find more servers to fulfill your needs. After three cases of Dr. Pepper and several hours of interweb searching, here’s what I found out about the NFS implementation in Debian. It’s actually quite simple… honest.

    I consult for a small-to-medium-sized ISP in Nevada, and recently set up a mail cluster using NFS to mount the vpopmail and qmail directories. Well, we recently had a power bump in which the UPS’s didn’t hold through. (Invest is good power, please, for the sake of your System Administrator!) After powering on the servers, we noticed that the NFS clients weren’t mounting the shared NFS directories automatically, despite them being in the /etc/fstab file.

    I could login and run:

    mount -a

    All of the NFS mounts would come up, no problem. But for some reason they still wouldn’t after a reboot. Well that was no good! I’m a SysAdmin, and we like to automate as much as possible, while still being in control. I couldn’t, and wouldn’t, be on standby for the next time the machine rebooted, just to run one measly command. So I called upon my friend’s Google, Dr. Pepper and He-Man to help me out…

    So after several hours of googling (LOL, gross) and digging through old mailing list archives I found that on Debian Etch/Testing, you need to remove this file because sometimes the startup/stop scripts don’t properly remove it – part of it’s locking system.

    rm -rf /var/run/network/mountnfs

    I honestly don’t remember where I finally found the solution, otherwise I’d gladly credit & link them here.

    This has only happened twice, both times as a result of the server rebooting or powering down without properly killing NFS (with O.J.’s knife). Fortunately I’ve convinced the Higher-Ups to invest in some heavier-duty power backup systems… sort of.

    I’ll be making a post soon outlining my ideas for an ideal mail cluster… trust me, you’ll want to read it. You’ll also want to compliment me on my genius.

    Chrome Extension API; How we wish we have named parameters

    April 8th, 2009 No comments

     

    PLAIN TEXT

    JAVASCRIPT:

    1. chromium.tabs.createTab({

    2. "url": "http://www.google.com/",

    3. "selected": true,

    4. "tabIndex": 3

    5. });

      This is how you will probably create a new tab using the Chrome extensions API when it comes out.

      Aaron Boodman talked about the choice and how they are looking to make the APIs look more like this:

      I’m using the CRUD pattern as a starting point for all the major sub-systems’ APIs. My hope is that this will have a number of positive effects:

      • Minimize API design hand-wringing
      • Provide a large base of functionality quickly
      • Make it easy for Chromium developers to add new APIs
      • Make it easy for extension developers to learn new APIs

      I got this all working for a few methods, and then I got to writing the validation code. I could write the code by hand, but that’s so much work. And why bother when somebody has gone and invented JSON Schema.

      That’s right, it’s a schema language for JSON. And of course it has a schema, written in JSON schema. Whee!

      So we should be able to just declare the expected structure for our API parameters and push the validate() button. Probably there will have to be extra stuff around the edges, but this should get rid of a majority of the grunt work.

      I have found that I favor this approach a lot, and you see the same in libraries such as Prototype (Ruby does a lot of this hash munging too). I wish we could just get named parameters in the language so this all just integrated very nicely indeed. What do you think?

      Categories: Programming Tags: ,