Archive for web development
5 Best Web Development Extensions for Google Chrome
Posted by: | Comments
When it comes to extensions, Firefox is king – with thousands upon thousands to choose from. However, Google Chrome is just now starting to gain ground with the idea of having an extendable interface, so how many good web development extensions are there for this alternative browser from Google? I did my search and found five of the best web development related extensions for the browser.
Speed Tracer is a tool to help you identify and fix performance problems in your web applications. It visualizes metrics that are taken from low level instrumentation points inside of the browser and analyzes them as your application runs.
Chrome Extension that generates random dummy text.It uses a minimalist and well looking design. Many other extensions of this type – in other browsers – simply complicate this task, using really extensive code, XHR, etc. The main purpose of this one, is to use the less amount of code (and also memory) and help the developer/user to get the job done.
This handy SEO tool shows you the Google PageRank of web pages beside the address box. If the PageRank of the page in current tab is not available, the tool shows the PageRank of the domain instead, prefixed with ‘S’.
The Google Chrome SEO extension provides easy access to Search Engine Optimization Tools that can help you with Competitive Analysis, Keyword Research, Backlink Checks and other daily SEO tasks.
Use Internet Explorer to display web pages in a Chrome tab. Some sites can only be displayed using IE, and with this extension you can now see those sites without leaving Chrome.
Know of any more that I might have missed? Be sure to drop then in via the comments, and help us all learn a little more about the web development tools the Google Chrome browser provides.
Like This Article? Listen to it and more like it on podcast #201 of the Web Hosting Show!
Add me on Twitter! Come follow my daily antics, links, tips and more @mitchkeeler on Twitter!© Mitch Keeler 2010 | Check out my firefox help site and my tech blog too!
Web Hosting Resolutions – Podcast 201
Posted by: | Comments
Have you made your New Year’s resolutions yet?
Even in web hosting, the new year can often be a great time to start out fresh, get a new look on your online life, and try to make things even better than they are. That is what this podcast is here to help you with, as long as you promise me one of your resolutions will be to listen to this episode of the Web Hosting Show.
Download the Web Hosting Show, Episode 201!
Running Time: 13 minutes | File Size: 5.58 MB
Here are just a few topics from this week’s episode:
- How to Backup Your Web Site Backups – Speaking of resolutions, everybody should be making the resolution to backup their web site backups. How can you do so cheaply? I’ll let you know.
- Easier US Time Zone Conversions – This week I will share with you a tool I use to help me do quick time zone conversions. It is a great resource for remote web hosting workers.
- Best Audio Hosting Solution for Podcasts – Which method is better, hosting podcasts with your web site or with an external hosting provider?
- 5 Best Web Development Extensions for Google Chrome – With the introduction of extensions to the Google Chrome browser, which plugins do I find most handy for web design or web development work?
Quick Tip #2 – Remember, keep your web site file names and file paths all in lowercase when working on your web site. Web servers are case sensitive, so better to get yourself using one method from the start, rather than having to do a lot of redirection fixing in the future.
Hope this is the greatest 201st podcast you have ever listened to. If it is, drop in a comment and let me know or drop me an e-mail at mitch@mitchkeeler.com. If you want to ask your own question on the podcast, it’s an easy thing to do – just go to the submit a question page, send me your inquest and I will be happy to help on next week’s podcast.
Shameless Plug of the Week – Web Hosting Show on Facebook – Come by and say hello to your fellow Web Hosting Show listeners!
Add me on Twitter! Come follow my daily antics, links, tips and more @mitchkeeler on Twitter!© Mitch Keeler 2010 | Check out my firefox help site and my tech blog too!
Find CSS Element Stats with XRAY Bookmarklet
Posted by: | Comments
This bookmarklet is perfect for anybody who spends any time working on web site layouts. XRAY is used to see the box model for any element on a web page. It will dim the area not selected, and give you statistics such as the CSS id or class assigned to it, the interface hierarchy, and the CSS code assigned to that section.
With that said, it is the perfect browser companion for people who pull up a web site and wonder, “how did they do that?” because it tells you everything right there on the web page. It works with Internet 6 and up, and every Webkit and Mozilla-based browser out there today (that includes Safari, Firefox, Camino and more).
To use it, all you have to do is drag the bookmarklet to your bookmarks toolbar. When you are on a site you want to see more about, click the bookmarklet and the semi-transparent XRAY window will pop up with all the information you could ever want. Go give the XRAY bookmarklet for webmasters a test drive yourself (then save it for your own CSS snooping) over at westciv.com/xray/.
Like This Article? Listen to it and more like it on podcast #199 of the Web Hosting Show!
Add me on Twitter! Come follow my daily antics, links, tips and more @mitchkeeler on Twitter!© Mitch Keeler 2010 | Check out my firefox help site and my tech blog too!
Web Science: The Science And Engineering Of The Common Good – The Importance Of Free Open Standards For A Healthy Evolution Of The Web: Tim Berners-Lee reports to the United States House of Representatives Photo credit: Floor "The Web of the future will look a lot more like a large database or spreadsheet, rather than just a set of linked documents. It will be accessible from a growing diversity of networks (wireless, wireline, satellite, etc.) and will be available on a ever increasing number of different types of devices. …Web applications will become a more and more ubiquitous throughout our human environment, with walls, automobile dashboards, refrigerator doors all serving as displays giving us a window onto the Web." Tim …
Browser Compatibility Testing: BrowserCam Gets Better – Video Review
Posted by: | CommentsBrowser compatibility testing is a web development practice that allows a web site owner to verify how her web site or blog, appears on computers utilizing browsers, operating systems and screen resolutions that are different from the one used in originally designing / developing a web site.
These visual differences is a critical element to consider when wanting to increase traffic, provide greater accessibility and allowing commercial publishers to extract the best from their online communication efforts.
BrowserCam puts a full range of browsers and operating systems at your disposal
With Linux, Mac OSX and Windows machines all accessing your website through a range of operating system versions, and even more web browsers, how are you going to know that your web site is going to look the same across all these other computer setups?
There are now a vast range of browsers on the market, from Internet Explorer and Firefox to Camino and Opera, to touch on just a few. If you then take into account the fact that more and more people are switching from Windows computers and over to Mac OSX and Linux operating systems, things become even more complicated.
But how can you hope to know what your website looks like on a Mac running an older version of the Mac OSX while using Opera?
Sure you could call your friend up and ask them to take a look, but there are only going to be so many friends with so many different machines, operating systems and browsers at their disposal.
One common way that web development agencies around the world have adopted is the one of having a range of machines all running different operating systems and browsers, and making use of them every time you need to check your website. This is far from being easy, inexpensive and speedy, and when you bring into the calculation the several versions available of all major operating system, the various versions of the major web browsers, and the infinite number of combinations that these two variables can generate when coupled with the myriad monitor sizes and screen resolutions that your readers may have, you soon realize that this amounts to a big headache that is not going to be that easy to solve.
So, while most (webmasters) simply resort to check IE and FF at their default resolution, on their standard operating system, this is a far cry from being able to serve a truly accessible web site that looks and acts the same no matter what computer, browser or monitor size your readers happens to use.
I don’t need to add that given the increasing good interface design and usability of many commercial sites, if you have any stake in being commercially successful online, this is something to which you must give very serious attention.
Luckily, there are several services and tools out there, which can ease your pain within a few clicks.
Among them, we have chosen to go back to the one that did impress me the most when it was the first and only solution against this web riddle.
First reviewed in 2004, Browsercam, is a web-based solution exclusively devoted to provide webmasters with an semi-automated system to check your web site appearance across all the operating systems, browser and screen resolutions available out there.
Now, Browsercam has added some new and truly powerful features to its already jam-packed line-up.
In this video review I guide you through the ins and outs of this must-have cross-browser compatibility testing:
Video review
The video, which has five separate parts, covers the following aspects of the BrowserCam experience:
- Selecting your capture parameters – A guide to the full range of compatibility settings available, and how easy it is to select from among them
BrowserCam’s vast set of testing parameters
BrowserCam effectively puts a huge range of browser and operating system versions at your disposal, and gives you the opportunity to select from a vast range of parameters. Once you have decided which of these parameters you are interested in, it then systematically goes about taking screen-shots of your website.
With the ability to choose from Linux, Windows and Mac operating systems, and different versions of the various browsers available it then provides clear screen grabs of exactly how your website is going to look under the parameters you have set.
Furthermore, you can decide if you want to see the site with the popular (but not entirely ubiquitous) Flash plug-in activated or deactivated, and can select from a range of screen resolution sizes to get an idea of how your website pans out on different sized screens and settings. This truly comprehensive range can either be dipped into, to produce a limited number of images, or else used to test every single permutation available to you.
What’s great is that once you’ve made your selection, and taken your captures you can filter and sort the resulting images that the service has created in a number of useful ways.
Checking your results
Once your screen-shots have been captured it is very easy to browse through them, even if you have taken a huge amount of images to truly cover yourself in terms of browser compatibility.
BrowserCam’s interface makes it very easy to sort images by operating system, browser and a range of other parameters that make it quick and easy to locate the exact images that you’re looking for at a given point in time. Any of the thumbnails provided can be clicked to give you an instantaneous full-sized version of the screen-grab.
Then, it is simply a matter of ticking the appropriate check boxes for those images that you would like to make a copy of, and clicking on download. Straight away you are given a zipped folder full of the images, to download directly to your desktop. Obviously, this then allows you to email them directly across to the people you are working with, if you haven’t granted them access to your BrowserCam account.
DeviceCam and the handheld market
One nice new addition to the service is the ability to perform a browser compatibility check not only for home computer based systems, but also for the increasingly popular Windows Mobile and Blackberry PDA devices.
As an increasing amount of people are using these hand-held devices to access the web, it’s a good idea to see how you are faring when your site is squashed onto a 320×240 or smaller screen. While obviously this great new feature to the BrowserCam service will be of most interest to those developing websites specifically for these devices, it is nevertheless a useful addition to your compatibility toolkit.
Remote testing functionality
Screen-shots are a great way of checking out how your website is going to look on other operating systems and browsers, but unfortunately they cannot tell you how it is going to perform.
With BrowserCam, this doesn’t pose a problem, however.
In addition to being able to take accurate screen grabs, the service allows you to remotely access a range of computers, running a range of operating systems via VNC. In short, this means that you can take control of the exact computer that you need to test your website on, and use it from your own location.
This is a great way to test a particular system in hands on way, and it is possible to capture and save the results as you do so. Using this approach is a great compliment to the screen captures you can take with BrowserCam, and while the process is time consuming, it does allow you to look into the kind of issues a screen grab just won’t show you.
If, for instance, you need to check for JavaScript browser compatibility, or want to work out the specifics of a Flash or Ajax interface, the best way to be sure that all is well is to get stuck in and have a quick play with your site.
BrowserCam makes this incredibly easy, and gives you the option of either using your own VNC client to access their remote computers, or else using their own bundled Java VNC client, which will allow you to get stuck in straight from your browser window.
BC-Virtual – virtual machines at your disposal
As if all of that wasn’t enough the BrowserCam people have just added yet another supercool feature called BC-Virtual, which is currently in beta testing.
Put simply, BC-Virtual allows you to make use of dedicated server space to run private virtual machines, to which you are granted full administrator access. This effectively means that you can have at your disposal the ability to create machines with the OS, browsers and resolution of your choice, and tweak all of the finer points you don’t have access to as a guest user of the previously mentioned remote machines.
This adds a whole new level of control, and the ability to truly customize a machine to your exact specifications. As it is stored within your allotted server space, you can obviously do as much compatibility testing as you need to, without having to worry about losing your configurations and data.
Every time that it seems that BrowserCam have reached a plateau, they pull something like this out of a hat and push the envelope a little further. With the addition of this new feature, there are now a number of options available for those looking to extensively test browser compatibility.
Pricing and plans
I am genuinely impressed by the flexibility of the pricing infrastructure of BrowserCam’s service, which seems to have an option to suit every level of user. The range goes from casual users that might want to make use of the service on a once-only basis, right up to unrestricted, annual premium access.
The price range goes from a measly $19.95, which will buy you 24-hours of unlimited access to the service, right up to $999.95 for unlimited, annual, premium access. Between these prices there is truly flexible range that allows for different access plans and pricing structures that can be mixed and matched to suit your needs.
A list of the available plans is available on the BrowserCam website, and involves varying degrees of remote access, and additional features at the premium end of the scale.
Conclusions
Having extensively tested BrowserCam for this review, I can say with positive confidence that BrowserCam will make the task of testing your website on multiple operating systems and browsers a truly effective one.
While most blogging platforms have pre-designed templates already designed to work across the vast range of browsers and operating systems out there, anyone who has any kind of customized design or web site template needs to make very sure how her site is going to be seen on the browsers, monitor sizes and screen resolutions she can’t see directly on her development machines.
Browsercam ensures your easy access to Mac, Linux and Windows previews, no matter whether you want to see these through the eyes of Opera, Firefox, Internet Explorer or several other browsers and versions of the same.
Webmasters and website designers that do not make use of such a straightforward, easy to use shortcut to checking a website’s compatibility could end up spending a lot more time (and money) finding alternative approaches to the problem. Nonetheless the apparent significant cost for buying yourself a yearly subscription (about $1000/year for the top level service) I can state with confidence that not only this is money well spent, but that if you take the time to evaluate how much time and effort it would have cost you or your webmaster to find out what BrowserCam does in a click of your mouse, you would rapidly realize that this is a tool that saves you a great deal of money and time too.
The BrowserCam service is also available on a monthly basis, and at different pricing levels, including a full one-day free try-out option.
Additional resources
If you are interested in learning more about BrowserCam, the following links might be useful:
- BrowserCam’s homepage has a lot more information about the service
Socialtext Unplugged is leading the way in adding a whole new level of flexibility to the world of web-based applications, by pioneering ways in which you will be able to work seamlessly with your favourite web apps even when you are not Internet-connected.
Photo credit: Dusan Jankovic
Only a few years ago we were bound to our desktops, or forced to carry peripherals with us on every journey out of the office. But with the recent advent of Web applications, we are now able, like never before, to collaborate, create and share content quickly and efficiently no matter from where we connect and from which computer we log on to the Internet. The rapid proliferation of web-based applications has rapidly expanded our computer-assisted work capabilities, making it possible for anyone to work directly from a standard web browser, and independently of the location and computer type used.
Web applications, have indeed increased productivity and flexibility by storing your data online, and allowing you to access it from just about any computer connected to the Internet. With it, you can access your Google Docs, Zoho Projects and SPresent presentations whether you’re in Rio, Rome or New York.
But while it is definitely true that you can work on your spreadsheet in the morning in London, and finish it off in the evening when you touch down in Tokyo, but what about those long hours spent twiddling your thumbs on the plane journey over?
Sure, I can import and export my Google Spreadsheets to and from Excel, but I want to be able to click a button and edit them straight from my browser, using the same interface, with none of the inevitable glitches and bugs that come from importing and exporting files.
Yes, it’s great that I can import Powerpoint files into SPresent. And I appreciate being able to save and load my presentations, I really do. But wouldn’t it be great if I could keep on editing them on my tablet PC, and have them all synced up, online and ready to share as soon as I was within wi-fi range?
Until wireless Internet is totally ubiquitous – and we have a good way to go before that’s going to be the case – a new solution may come to your rescue: the offline web application.
Thanks to the pioneering work being done at Socialtext, the maker of one of the most popular business enterprise wiki solutions today, I have prepared a short video review that will walk you through the simple process of taking your enterprise wiki with you, even when you have to completely forfeit your Internet connection.
Here the details:
Socialtext – bringing the enterprise wiki to the next level
One of Socialtext’s biggest achievements was in bringing the wiki to everyday people and professionals that might otherwise have been put off by the hassle of learning ‘Wiki Markup‘. In short, if you decide you want to edit Wikipedia, for instance, you are going to need to learn how to format your text, in what is basically a simplified version of HTML code. Not everyone’s bag.
Socialtext, on the other hand, made it possible to edit your wiki as if you were using a word processor, dispensing of the code altogether and replacing it with it a simple, intuitive WYSIWYG (what-you-see-is-what-you-get) interface. Suddenly, wikis were hot news on the enterprise scene and not just the remit of geeks.
But after a while we realized that for all the beauty and benefit that web applications were bringing to us, a new, scary demon, was again lurking into our future. By becoming so enamoured with the use of web apps we were chaining ourselves to the need of an always-on connection, as in the lack of it, none of the marvels achieved by web-based apps could be kept running.
And, let’s face it: despite all the talk of MuniFi, we are still a long way from having free, always-on, ubiquitous Internet access. There are plenty of times when we just can’t get online, including those long plane journeys.
Offline web applications offer a way of freeing you up to work on your projects wherever you choose to be. Train, car, bus or airplane make no difference once your preferred web apps give you the opportunity to keep working even when the web connection is not there anymore.
With offline web apps, you can sit in the park with your laptop, and make those quick edits in the shade of a tree. Then, when you head home, you can sync up all of your work with the simple click of a button.
Video micro-review
In this video micro-review I take you through the simple process you will go through in transporting your wiki to your desktop, for easy, fully functional offline editing.
The process described here is a very simple one.
Let’s say you’re working on your wiki online, and have to go catch a plane.
All you have to do, as I demonstrate, is:
- Save your file as you would usually
The TiddlyWiki connection
It’s worth briefly mentioning that Socialtext Unplugged was developed by the Socialtext team in collaboration with Jeremy Ruston of Osmosoft, the creators of the simple free software TiddlyWiki.
The connection between SocialText Unplugged and TiddlyWiki is evident, as Mr Ruston’s brainchild provides a simple, free micro-wiki that creates self-contained HTML pages which can be carried around or placed on a key drive. It’s ‘wiki on a stick’ as the TiddlyWiki team would have it.
Further, the adoption and integration of the TiddlyWiki simple and open-source software solution into SocialText, Ross Mayfield and his team have shown themselves to have their ear to the ground when it comes to make the best and most intelligent use of open-source software for commercial purposes.
Taking advantage of this existing technology, and integrating it within the Socialtext schema was a smart move indeed, and a commendable one.
It is easy for developers to rest on their laurels once they have reached a certain degree of success, and Socialtext’s commitment to staying involved with the latest, evolving open-source projects is testament to their forward-thinking approach.
The case for online / offline web apps
Without a shadow of doubt, I confirm my prediction that offline web apps will be a key, increasingly popular theme during 2007.
While for now the number of offline web apps is very limited (personal organizer Scrybe is another offline web application contender, offering an interesting alternative implementation of this same idea), developers are already on the case of making offline web apps happen in a “big” way in the months to come.
The ability to to sync data – beyond any existing import and exporting facility, is the key here. What in fact makes Socialtext Unplugged stand out is the fact that I can start working online, continue offline seamlessly, (and with no noticeable difference in performance), and then sync all of the data I have worked and modified with a single click.
The more companies like SocialText will work on refining usability and interface design in order to make ushc offline work as transparent as saving a file, the more offline web application will catch on.
Make the process counterintuitive and complicated and the idea will fall flat on its face.
Conclusion
Socialtext has taken a bold first move in making available one of the first enterprise-elevel offline web applications. This not a bug-free and highly refined tool, but it won’t take long before any of the rough corners will be cleared.
2007 is bound to see a raft of companies following Unplugged and the idea of the offline web app further.
As both free and enterprise web applications catch on to the benefits that can be offered to end-users via the development of always-on web apps, we will see the seamless bridging of the online and offline worlds.
Socialtext has achieved a lot more besides so far, but the introduction of online / offline, work anywhere wikis at the enterprise level is trailblazing stuff, that will doubtless be imitated in the coming months by other developers in the expanding web application field.
This could well be the final nail in the desktop application’s coffin.
N.B.: SocialText Unplugged is still in Beta and it awaits further improvements and refinements.
Additional resources
If you are interested in learning more about Socialtext Unplugged and the Online / Offline web application phenomenon, you might want to take a look at the following websites:
- Try out Socialtext Unplugged for yourself at their open-source wiki