Tag Archives: HTML

Apro29

Christian Decker

0

The seven rules of unobtrusive JavaScript

Christian Heilmann has written a great article about why Unobtrusive JavaScript is the way to go and what the best practices are. I strongly recommend that you head over and read it through. For me the most important points are:
  • You don’t expect JavaScript to be available but make it a nice-to-have rather than a dependency: definitely true as JavaScript should be an enhancement rather than the show itself.
  • You expect other scripts to try to interfere with your functionality and keep the scope of your scripts as secure as possible: true, that’s one of my main criticisms about JavaScript. Not having clean separation seems a big step backwards in evolution.
  • Traversing the DOM is expensive and can be slow, that is why it is a good idea to leave it to a technology that is already in use in browsers. I like to spray hooks on the finished HTML when I need to have simple ways to access DOM-elements. Also I really like caching elements that I searched earlier in variables so I don’t have to search for them again.
  • Using CSS to do manipulation on many elements at once without having to search for the elements (section 3): this is really a great idea, new to me, but I’m sure it’ll come in handy.
  • A really important part of unobtrusive JavaScript is to understand how browsers work (and especially how browsers fail) and what users expect to happen. It is easy to go overboard with JavaScript and create a completely different interface with it. Drag and Drop interfaces, collapsible sections, scrollbars and sliders can all be created with JavaScript, but there is much more to those than just the technical implementation. Agreed! Don’t overdo it, or the users will find it hard to use.
  • The other thing to remember is that you can stop events from being reported to parent elements and you can override the default action HTML elements like links have. However, sometimes this is not a good idea, as browsers apply them for a reason. An example would be links pointing to in-page targets. Allowing for them to be followed makes sure that users can bookmark the state of your script. Oh how many times have I seen <a href=”#” onclick=”…”> to respond to an event. Don’t do it, please.
  • Wrapping functionality in objects provides namespaces and isolation of your code. Better yet: you can define public interfaces! (section 6)
So thank, you very much, Christian, for this article, let’s hope many developers start applying your tips, because they make the world a better place. I know I will :)
  • Share/Bookmark

Sepo04

Christian Decker

1

Ajax, CSS, DOM and JS-related resources

Ajaxian today has a feature about the most useful information sources on Ajax, CSS, DOM and JavaScript (or as many will know them: the basis on which the whole Web 2.0 is built :) ), so I’ve skimmed through my del.icio.us account looking for stuff to add and here are my favorites: So that’s it from my side, if you have more resources you’d like to share with the rest of the world post them on the original article.
70-442, certification exams are valuable in providing knowledge and skills of designing and optimizing data access with the usage of Microsoft SQL Server 2005. 642-652, Wide Area Application Services for Field Engineers exam (WAASFE) is very beneficial for IT engineers and technicians to promote their skills. 642-445 certification exams are also associated with Cisco IP Communications Support Specialist certifications to promote IP telephony networking system. 642-565 cisco exams are designed to assess the abilities of candidates how to tackle cisco security products with the use of latest technology. 642-176 certification exams enable the candidates to get job successfully as SMB engineer. 640-816 stands for Interconnecting Cisco Networking Devices Part 2 (ICND2), having direct association with Cisco Certified Network certification exams. 156-310 exams are designed for the assessment of professional and technical abilities of the candidates.
  • Share/Bookmark

Augo23

Christian Decker

1

9 must have Firefox Extensions

Firefox is certainly one of the best browsers to browse the Web, but out of factory it is lacking some features I really like, luckily there are a variety of extensions that provide just that functionality. These are the extensions no one should miss:

  • AdBlock PlusAdBlock Plus:Ever been annoyed by all those ads and banners on the internet that often take longer to download than everything else on the page? Install Adblock Plus now and get rid of them. After installing it you will be asked which blocklist to download, after which you will see far less advertisements.
  • All-in-one-Sidebar: we all hate popups, they are annoying, catch our attention right when we were reading something and did I mention that they are annoying? But what about the browsers own popups, when a download starts, to manage the bookmarks, extensions, themes and the like? We want to see them but we don’t want them to jump in our face. This is what All-in-one sidebar does, it puts all the stuff that would usually require an extra window in the sidebar.
  • Download StatusbarDownload Statusbar: as mentioned above we don’t want download popups all over our desktop, yet we want to see when a download finishes. Download Statusbar puts all the needed information (and even more) into the status bar, where it is visible, but not annoying.
  • FirebugFirebug: Firebug is probrably the best extension for Web developers ever. It is unobtrusive yet powerfull, with it’s DOM-Inspector, HTML-Inspector, Javascript Console, JavaScript debugger, it even allows you to tweak the CSS on the fly and for those worried about the last millisecond in loading times it has a network monitor that tells you exactly when an element started loading, how long it took and how big it was. I don’t know how I survived without Firebug for so long.
  • Fission (Firefox Extension)Fission: actually just a visual gadget that displays the loadstatus in the address bar instead of the statusbar on the bottom. I really love this unobtrusive little piece that was borrowed from Safari. With this little png it looks even more like Safari
  • Gmail Manager: I love GMail, this is no secret, but I’m not one of those that keep a browser tab open for it, yet I want to know immediately when new messages have arrived. GMail Manager allows you to monitor multiple accounts in the statusbar, when hovering over the icon it even shows you the subjects and a short extract of the mails. This is an absolute must have for all GMail lovers!
  • Google Browser Sync:Using Firefox on different machines I’d really like to have the passwords, bookmarks and sessions across all of my Browsers, and right then Google Browser Sync comes along: Google Browser Sync for Firefox is an extension that continuously synchronizes your browser settings – including bookmarks, history, persistent cookies, and saved passwords – across your computers. It also allows you to restore open tabs and windows across different machines and browser sessions.
  • GreasemonkeyGreasemonkey: Sometimes single sites don’t have all the features that would be nice to have and that’s about it what Greasemonkey does. Greasemonkey allows you to customize the way a webpage displays using small bits of JavaScript. Hundreds of scripts, for a wide variety of poular sites, are already available at http://userscripts.org. You can write your own scripts, too. Mark Pilgrim’s definitive Greasemonkey guide, diveintogreasemonkey.org will show you how.
  • Secure Login: A login extension similar to Opera’s Wand login. It uses the built-in password manager, but deactivates the prefilling of login forms. Instead, you are now able to login with one click or a keyboard shortcut (ALT+N – changeable via settings). Just add the Secure Login toolbar button to your toolbar, or use the provided statusbar icon.

With these FireFox should get even more usefull, becoming a true allrounder and great productivity tool.
What about you? What are your favorite extensions?

  • Share/Bookmark

Augo09

Christian Decker

2

Using a reverse Proxy with a subdomain

Apache
Having an Apache server is really a great thing, every day you can discover something new:D Today I discovered that I can use a reverse proxy to point to a server behind my firewall. Even better I can use a subdomain to access it, which is exactly what I need.

So let’s see, what I need is that every request to a certain subdomain to be mapped to another server, with a private IP-Address. This is great because I only expose parts of my server to the Network that I want.

First things first: in the apache configuration, which is usually located at /etc/sysconfig/apache2 edit the APACHE_OPTS to contain -D REVERSE, -D PROXY and -D PROXY_HTML (actually the last one’s not needed as we wont be adjusting any URLs, but let’s keep it anyway).

APACHE2_OPTS="-D DEFAULT_VHOST -D PHP5 -D PERL -D PROXY_HTML -D REVERSE -D PROXY"

Now that we have enabled the proxy stuff, we can start configuring it. In the vhost directory (something like /etc/apache2/vhosts.d/) create a new file that will hold the configurationfor the subdomain:

<virtualhost your-ip-here>
        DocumentRoot /srv/www/subdomain/htdocs
        ServerName subdomain.domain.tld
        ServerAdmin webmaster@subdomain.domain.tld
        AccessFileName .htaccess
        ScriptAlias /cgi-bin/ /srv/www/subdomain/cgi-bin/
        ServerAlias subdomain.domain.tld sudomain
 
        <directory /srv/www/subdomain/htdocs>
                Order allow,deny
                Allow from all
        </directory>
 
        <directory /srv/www/subdomain/cgi-bin>
                AllowOverride None
                Order allow,deny
                Options ExecCGI
                Allow from all
        </directory>
</virtualhost>

Ok so by bow we have created the new subdomain, just to let apache shut up about missing folders we’ll create the required folder:

mkdir -p /srv/www/subdomain/{htdocs,cgi-bin}

What’s missing now? Right, the reverse Proxy :) so we have to add two new lines to the definition above:

       ProxyPass / http://internal-ip-address/
        ProxyPassReverse / http://internal-ip-address/

That’s it! Just put the above before the Closing VirtualHost tag and it should work just fine.

SSCP, Systems Security Certified Practitioner provides an ideal training for IT specialists and trainers for the maintenance of security system. JN0-310, juniper certification exams are considered one of the best certification exams for IT personnel. HP0-W02 stands for Implementing HP StorageWorks EVA Solutions certification exams training which a valuable exam is for IT candidates. HP0-752 provides full training for IT professionals in authentic way. HP0-096 certification exams are designed to develop professional perfection in IT specialists and technicians. 9A0-044, ADOBE ACE Photoshop CS2 certification exam is very valuable for web developers and designers to enhance the professional skills. 920-136 certification exams are one of the leading exams to enhance the knowledge and professional skills of IT professionals.
  • Share/Bookmark

Deco02

Christian Decker

1

htmlPlayground, the Ajax way of doing a reference

Ever tried to remember what a particular HTML-Tag does, and how to use it in a standard way? Well now you can, in a stylish way: htmlPlayground!
Advertisement BadgeIt’s worth trying to learn HTML because you may find that learning HTML is easier than you would have thought.
htmlPlayground is build on top of Google Webtoolkit and has the complete set of XHTML 1.0 strict Tags and CSS 2 attributes (although I couldn’t get it to work when I tested it). htmlPlayground Personally, I just love it :-D [via Ajaxian]
  • Share/Bookmark

« Older Entries