Web Browser Sidebar Panels, Cheat sheets, Bookmarklets, etc.
Intended audience:
people who work with CSS, XML & HTML, PHP, JavaScript, and other fundamental web development technologies.
Welcome to the cookie jar! Please help yourself to something that satisfies.
Throughout this collection of goodies are meaningful resources designed to reinforce your knowledge of fundamental elements to authoring valid markup, as well as tips for growing greater skills in scripting for web design, and web application development.
[ more ... ]
These are off-site links to the original authors’ creations, some of which existed before Firefox was a household name– and it was not uncommon to think of them as a sort of browser add-on (e.g. Netscape sidebar, Mozilla sidebar, Opera panel, etc.). Internet Explorer has not had a history as the browser-of-choice for users interested in add-on development, so not surprising that some of the authors remark that the add-on is designed for either Opera, or Netscape-based-browsers: Mozilla, Seamonkey, Firefox, K-Meleon, etc.
Internet Explorer users are encouraged to check out anything that looks interesting too– some items are universally useful, no matter what browser is used.
What’s the Big Deal?:
Save yourself the time of searching for cheat-sheets, and the like. Have a go at the NoviceNotes.Net collection of quick-reference guides, and side-bar crib-sheets! Keep your eye out for relevant tutorials, and guides to good practice for the novice web developer.
Create-A-Panel : Sidebar Generator
ATTN:
Have you ever found a great resource which you’d like to use as a Browser Sidebar Panel, but you have difficulty actually getting it to open as a panel ?
Check out the NoviceNotes Create-a-Panel utility. Using a combination of JavaScript and PHP, it attempts to place any browser-viewable document into the sidebar panel of your web browser. Options are available for Opera, Seamonkey, and Firefox. I hope you are able to make use of it!
Sidebar Panels: the Big List
Most of the URL’s you’ll find at the other end of the hyperlinks in the list below should work for you, no matter what browser you have. Some of them are titled as an Opera Panel, or a Firefox Sidebar, but they tend to work cross-browser, and cross-platform.
If you find that your browser doesn’t work with the code the author has setup to put the resource in your own browser, please try the NoviceNotes Create-a-Panel™ tool. If you grab the actual URL for your desired resource, you may be able to configure your own version of any page you want as a sidebar. Check it out. Don’t worry– it doesn’t do anything until you’re absolutely certain the information it will add to your panel is correct. There are two steps in the process, and one of them is for confirmation. I hope it helps you to get what you need. 
- the NoviceNotes Common Fonts Reference – Make your CSS Browser Safe!
- Send ‘em if you Got ‘em! (see above for e-mail address)
- Web Design Bookmarklets: To Not Forget
Note: Since there are multiple useful items on a single page here, you may wish to grab the URL for one or more of your favourite items, bring that URL back here to the Create-a-Panel page, and use it to create your own function-specific sidebar. I haven’t tried it yet, so if it doesn’t work, please let me know! - the “Official” Opera Software Panel Resource
- A Subsection of the Official Opera Panel Resource, the Opera Web “Webdesign” Panels
- Opera-Fans: Submitted Panels and Other Resources – Hosted at the Official Opera Web Site
- Rijk – Author of the Panelizer - this is what you’ve been waiting for!
- Need Hex or Decimal UTF-8 Unicode ASCII etc NCR’s? – I really like this on at BigBaer.com
- C.H.’s Playground – Custom Google Search and Web Dev Specific Panels
NOTE: You may have to work a little harder to get this panel to go into your sidebar. Don’t be deterred by a 404, or other error. If you examine the URL, you’ll see that it’s still there! - Web Toman’s Panels – from Toman’s WebSpace where you’ll find technical panels on Commandline Reference, BASH, and more)
- Also from Toman, put a PHP Reference in your Sidebar
Toman’s site is one of my first stops after installing Opera, because his Custom Opera Buttons are so useful (e.g. Go-Up-a-Level, RSS Feeds, Netcraft Info, etc.). - T ‘n T Luoma | For the Web Standards Conscious
Look closely — he’s got links back to other locations on his own site as well. They’re panels popping up all over!
For the Linux Enthusiast:
- Ice Walkers Web Panel – Use Create-a-Panel™ to Install it!
- LinuxToday, IceWalkers, and BSD courtesy of Rijk
Pimp Your Browser with Web Development Bookmarklets!
Among the most useful bookmarklets i’ve found anywhere are the MODI, or Mouse Over DOM Inspector’s available at SlayerOffice.com. Personally, I prefer version “one”, of the two available there. Add the Slayer Office MODI v.1 to your Bookmarks Toolbar by clicking this Mouseover DOM Inspector link, and hold the mouse button down as you drag it carefully to where you want it in your bookmarks toolbar, finally releasing the button when you’ve got it where you want it. Activate the MODI by clicking it from your bookmarks menu. Deactivate it by pressing the escape key (or click the Reload page button). Take a close look at what MODI v1 gives you: The top section shows the active element, while the bottom area, rising, like stairs, is the cascade of elements which are parents to the active element. That’s a lot of useful info in the tip of your mouse!
Having difficulty dragging and dropping the MODI? Alternatively, there is the option to right-click, and select “Add Bookmark“– a more failsafe technique perhaps, but the trade-off may be just as difficult: where did the bookmarklet go, now that it’s been saved via right-click? I prefer the drag and drop method, but whatever works for you, be my guest!
If you like the MODI, be sure to check out more of SlayerOffice.com in general– indeed, the web design / development community is fortunate to have such benevolent contributors as SlayerOffice.com (i.e. it’s obvious that the man behind the site continues to maintain it as an effort to help others). A good place to start, of course, is the Favelet Suite!
the term Favelet is interchangable with the term Bookmarklet, but merely speak to IE vs. [just about any] alt-browser user (e.g. Mozilla browsers, Opera, Konqueror, etc.). In either case, when the terms are used, it is in reference to the various ingenius results one might achieve by squeezing the proper javascript syntax into the user agent’s saved URL’s (i.e. saving the bookmarklets via drag-n-drop, the old-fashioned way: by click add-bookmark.
Opera: Custom Buttons, Toolbars, and Menus
Firefox users have extensions, but Opera users are privy to a different sort of customizing. Check out the very useful Opera Web Developer Toolbar. All-in-one, it has every tool and tid-bit you could possibly need in a utility for checking your code, inspecing the DOM, etc.
A collection of useful custom buttons. In opera, a custom button is kind of like a Mozilla extension, only the magic code is placed inside of a button which integrates into the existing browser toolbars, or menu. You’ll understand best by checking out some examples. Toman’s custom Opera buttons are among my own favourite Opera must-have customizations.
Finally, for he or she who’s interested in issues of Web Accessibilty, and at the same time isn’t afraid to try some of the tools available for testing, I recommed the Paciello Group web site Resources page, which offers a handful of nice tools you may never have learned of before this, including one which I consider to be a must-have for Opera, since finding it (circa early 2008): If you use Opera, you really need to have a look at theWeb Accessibility Toolbar
Seasoned Opera Maniacs, Meet Jëkýll & Hyde.
If you are a veteran Opera user, quite comfortable in the practice of tweaking various elements of Opera’s .ini files– or, at least relatively at ease with the browser, no matter what sort of layout might appear on installation of a custom Opera setup, then I think you’ll enjoy Jëkýll & Hyde! Jëkýll & Hyde , i believe, is a play on words– at least, the word Hyde, meaning “hide”, as in, “Hide the DOM inspector menu to gain optimal screen-real estate”. Best wishes, my fellow Opera attendees.: here is the link to Jëkýll & Hyde, a somewhat quirky, yet especially functional Opera setup, with a high neat-o-factor (according to my ranking, of course). Enjoy!
Ladies and Gentlemen: May I have your attention, please?
If there is anything which you have found espeically useful, informative, or even as some say– a god-send– in what you’ve been able to take from this Web Browsers for Web Developers resource, please take a moment to let me know directly, via e-mail (as the WordPress Page did not allow comments, at time of publishing).
The e-mail is learn@ (… get it? “learn at ___ ”, as in to learn-at-the-university, or whatever!)
Please don’t refrain for intimidation, or a thought that your words will be as a drop-in-a-bucket. Trust me: i have plenty of time set aside for my readers, and that means YOU!. You have my sincere Thanks!
