Jump to content

lwsimon

Moderators
  • Posts

    105
  • Joined

  • Last visited

Posts posted by lwsimon

  1. I started at w3schools.com, thought their stuff is a bit dated these days. I'd still recommend starting there, though, and learn enough so that you can validate a form on the client-side.

     

    After that, I just did a lot of practice. Solved some problems - an automatic show/hide images script based on the element's class, an automatic stock quote display (requires PHP or other server-side code) - just whatever came to mind. Today, knowing what I know, I wouldn't take this path.

     

    As soon as you can validate a form, start learning a framework. I suggest jQuery. A framework like this will free you from having to deal with differences between browsers, and let you concentrate on what your'e trying to accomplish.

     

    Finally, a word on tools. Any text editor will work, but syntax highlighting is nearly a must-have. I use Aptana Studio in Windows, Vi over a SSH session, or Geany in Linux. If you're not familiar with Linux, just get Aptana or Notepad++ and go to town :)

     

    Debugging is also important. IE's error tool really sucks, and is often vague. An example of an IE error is "Object Expected: Line 24". Now, this makes sense to me, it won't to a novice programmer. Download Firefox and Firebug. Firebug's errors are like this: "Error, Line 24: varName is undefined". MUCH better.

  2. I try to use as few IDs as possible, but use them when necessary.

     

    For instance, I might have a header, a navbar, a content area, and a sidebar on a site. Each of those divs would have an ID, and everything under it would have either a class, or nothing. I would assign another id if I had a discrete content object - like a Coda slider, or something.

  3. Just wondering how you guys do this --- say you have a script that adds a couple of links below every image on the page. How do you associate each set of links with their image?

     

    I would typical use the "rel" attribute, as my understanding is that this is used to relate one element to another - though it is outside of the HTML 4.01 spec for most elements. So, if I had a link to display the image in a new window, the markup of that link would like this:

    
    

    The javascript to open a new window would be attached to the element, but would use jQuery's .click() instead of an "onclick=" attribute. The "href=" would be there for compatibility's sake, just in case for some reason the browser let me insert the markup, but didn't recognize the onclick event properly.

  4. I read over my post, and as usual, I was a bit short ;) I get that way posting from work, but I mean well.

     

    As for efficient selection, here's a quote from John Resig's blog:

     

    There doesn't seem to be a correlation between performance and selector use. For example, ".class" is far more popular than "tag.class" even though the second one is much more performant.

     

    He goes on to say its not really a big deal. I'm just like that --- when something is demonstrably better, even if only but a small margin, I do it. If I cut ~25ms of a selector, at the end of my 500-line script, I've saved some significant time. I hate refactoring, so this is a good thing :)

  5. squeezedjuicybits:

     

    Your jQuery attaches the event handler to every link in the document, then parses the whole document to look to the attributes of each of those elements have when the link is clicked. This is inefficient, and could delay further script execution on some pages.

     

    Also, you've used the

    $('#box_' + ... )

    syntax a bit, and that is generally considered poor form. Be as selective as possible with those selectors, so jQuery has fewer comparisons on the back end. Instead of selecting using

    $('#someID')

    it is better practice (and faster) to do

    $('div#someID')

     

    I posted a short bit of jQuery above that should do what the OP is trying to do, in less than 10 lines of code.

     

    ETA: Your discussion of graceful degradation is spot on. I tend to be in the "progressive enhancement" crowd, but it is realyl two ways of saying the same thing. Also, I've not seen you around - welcome to KS!

  6. I use Westhost. They have a fairly inexpensive package right now, at $12 / month, billed monthly. You can host as many domains as you want on it, too. You also get SSH access, which is awesome - no more downloading something, then uploading it back to your server - just use wget from the shell, and download it at 1MB / sec or so. MUCH faster than dealing with FTP.

     

    You'll have to modify the server config to get MySQL and PHP installed, but their software makes it pretty quick.

     

    I was hosting through GoDaddy, and was spending about $75 / month. Westhost has better service, better features, and cut my expenses quite a bit. With SSH access, I can even set up my own FTP server, manage users, and resell hosting packages :)

  7. I do my best to keep all my pages under 200KB, including images.

     

    Your site is about 15x bigger than my heaviest pages. Without even viewing your pages, I can tell you one thing - a user could visit my site, know what I do, look at some of my work, and start filling out the contact form before your intro finished :)

     

    That aside, the links have been removed from your post. PM me, and I'd be happy to go over them, and offer suggestions to reduce the size. Also, ActionScript 2 is dead, as AS3 came out a couple of years ago. AS3 is NOT compatible, and I would make it a priority to learn AS3 and upgrade my codebase ASAP.

  8. Never hear of it.

     

    These days, JQuery seems to be the number one framework with several of the major players adopting it.

     

    ... I actually plan on creating a few videos on the subject.

     

    Stefan

     

    It doesn't seem to be that kinda of framework :)

     

    Where jQuery is a means of abstracting away browser differences and some of the rough edges of DOM scripting, Raphael is a way of creating and writing to a canvas element, creating vector graphics within a webpage. From what I've read, it looks like it can be used with jQuery or whatever framework you want.

     

    Perhaps framework isn't the right word. "Library" might be more apt. I use jQuery for everything these days, you won'y find a bigger evangelist for it than me :)

  9. I use Aptana exclusively now in my personal business, because working on the markup and code itself is where I am comfortable. Aptana supports several Javascript frameworks, including jQuery out-of-the-box, and will support PHP with an easily installable plugin.

     

    Dreamweaver CS3 at work, and I can honestly say i don't use any of its unique features. I modify text in Design View, but I have all CSS turned off too, so its pretty basic.

     

    I want my tools to get out of the way while I write my code, not try and write it for me :)

  10. Actually, after all the hype that Fx3 was faster and used less memory, I found that it was worse in both areas than Fx2.

     

    Have you tried scrolling pages with fixed background images in Firefox 3, terribly slow.

     

    I'm to the point now where I use Firefox only for development tasks. I use Chrome for my personal browsing, as I like the interface and can overlook the shortcomings. In Linux, I use Kazehakaze sometimes, and will probably end up using Chromium if and when it becomes stable.

  11. I've been using Aptana Studio, which is essentially a plugin for Eclipse, but is downloadable as a separate program with some different graphical elements. I would list it separately because it includes intelligent autocomplete for javascript frameworks (jQuery, Prototype, Mootools) out of the box, and PHP with a one-click plugin.

     

    Available for Windows and Linux, and I *believe* Mac. Any platform Eclipse is on, essentially.

  12. There is one thing I can tell you ... Firefox on the Mac is terrible.

     

    ... Crashes all the time.

     

    Stefan

     

    Have you tried Camino?

     

    My understanding is that it is the render engine from Firefox (Gecko), but all of the interface is native to Mac. I've heard its much more stable. I don't have a Mac, or I'd test that theory :P

  13. lwsimon the code does not seem to work right but that's okay

     

    Is the use of hide/show layers a good way to provide navigation for a website? (I dont like when a website has to load another page when people click a link seems redundant when most of the content does not change) [1]

     

    I did read the 'Javascript Tutorial'. Now if I understand it correctly Dreamweaver creates the code (function) for the Javascript (MM_showHideLayers). [2]

     

    Are functions created individually (by programmer or program) or are there also master type functions (like in php) that control different things/actions? If there are is there a list of them?[3]

     

    The tutorial spoke of something called DOM and object orientated programing but did not cover these two terms.[4]

     

    [1]

    I revised the code so that it *should* work, but haven't tested it in a page.

     

    [2]

    showing and hiding layers can work, but it is better to change the page. The reason? Well, there are a few. First, search engines visit your site, and see only one page. Second, if a user goes to you contacts page, and bookmarks it, when they go back, they'll get the homepage again. Third, what happens when the user has javascript turned off? Or views the page from a mobile phone? How about a blind user using a screenreader? Or a user who has difficulty using a mouse, and uses the tab key on their keyboard to move from field to field?

     

    The bottom line is this - if your page is lightweight and properly built, there should be very little delay between pageloads, as most of the information will be cached on the client's machine between requests. This is one thing to do the traditional way, with links between pages.

     

     

    [3]

    I'm not quite sure what you mean by this, but I'll explain what I can and see if it helps.

     

    A function is nothing more than a block of code that is executed at a certain point. There are functions built into the objects inherent in javascript. A function that is a part of an object is called a method. An example of a method in javascript is .length(), which is a member of the Array object. You can take an array and find its length like this:

     

    lengthOfArray = arrayVar.length

     

    This segues into one of our next topics, object-oriented programming.

     

    [4] Two topics on this one. The first is object-oriented programming. This is really an extensive topic, and you should probably do quite a bit of reading on the subject to get a good grasp on it. I recommend "Code Complete" by Steve McConnell for a good introduction to OOP concepts and good programming practices in general. Essentially, an object is a collection of functions (called methods) and variables.

     

    The DOM (Document Object Model) is a collection of objects that represent a document. It starts with the document node, which (in the case of a web page) has an HTML node under it, which has a

    node and a node under that. This goes all the way down to the individual tags on the page, and the text they contain. For a visual representation of this, download Firebug for Firefox. It has a DOM browser, which gives you a good feel for what's really going on on the page.

     

     

    And with that, I'm off to bed :) If I've not answered something, feel free to post back and I'll have another whack at it later tonight or tomorrow.

  14. I just encountered a new JS framework, and would like to know if anyone here has used it. It's called "Raphael", and its purpose is the creation of vector graphics on a web page. It seems to have potential, and outputs VML to IE and SVG to everyone else, so it is fairly compatible.

     

    Does anyone have some experiences to share with Raphael?

     

    http://raphaeljs.com/

  15. Here's a rough, untested version of how I would do this, using only raw Javascript.

     

    HTML fragment:

    Div 1 content
    Div 2 content

     

    Javascript

    function initPage()
    {
      document.getElementById('div1').style.display = 'block';
      document.getElementById('div2').style.display = 'none';
    }
    window.onload = initPage;
    
    function toggleDivs()
    {
      var div1 = document.getElementById('div1');
      var div2 = document.getElementById('div2');
      if( div1.style.display == 'block' )
      {
         div1.style.display = 'none';
         div2.style.display = 'block';
      }
      else 
      {
         div1.style.display = 'block';
         div2.style.display = 'none';
      }
    }

     

    ..and here's the same functionality using the jQuery framework:

     

     

    $(function() {
      $('div#div1').click(toggleDivs).show();
      $('div#div2').click(toggleDivs).hide();
    });
    
    function toggleDivs()
    {
      $('div#div1').toggle();
      $('div#div2').toggle();
    }

×
×
  • Create New...