Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

December 03 2013

15:36

11 Excellent Google Chrome Games You Might Not Have Tried

In 2009 Google launched Chrome Experiments to test the power or check the capability of browsers. When Chrome Experiments joint with JavaScript, it become a source of Web games so, you do not have to download or install any file before playing web games in your smart phone, tablet or computer. All these wonderful Google Chromo games are created by using use of open web technologies like HTML5, JavaScript, Canvas, SVG and WebGL.

There is no doubt that Google Chrome is simply awesome when it comes to speed. Because Google Chrome provide to the browser outstanding support and stability for running games that’s why Google Chrome is stand in the top of the modern browsers list. In this collection you will see the list of 11 wonderful and interesting Google Chrome games. Come and check out these Google games that will surely excite you. So, grab this amazing chance and start browsing through this cool collection. Enjoy and have fun everyone!!!

Racer

Line up your phones and tablets to create a race track across up to five screens. No apps. No downloads. Just start a race, sync up and tap your screens to rev your engines. Multiplayer games for the mobile browser are here.

Build with Chrome

Now you can build with LEGO® bricks using Google Maps as your baseplate. Imagine. Explore. Build online in Chrome.

Free Running 2

Free Running 2 is the sequel to our smash-hit parkour game, Free Running, featuring stunning 3D graphics, new moves and game modes.

Z-Type

A Space Shoot’em’Up where you type to shoot.

CrossCode

An Action-Role-Playing-Game (RPG) with lots of puzzles and a futuristic Sci Fi scenario. Written entirely in HTML5.

Poppit

The prickly puzzle game where popping balloons has never been so much fun! Pop colorful strings of balloons to earn a bonus!

Bastion

Bastion is an action RPG experience that redefines storytelling in games, with a reactive narrator who marks your every move.

GeoGuessr

GeoGuessr is a geography game which takes you on a journey around the world and challenges your ability to recognize your surroundings.

Lord of Ultima

Lord of Ultima is EA’s popular browser based strategy game that simulates an immersive medieval civilization.

Need for Speed World

Need for Speed World is a FREE to play online racing game where you can compete with millions of players around the World.

BeGone

BeGone (© NPlay.com) – browser based online multiplayer first/third person shooter with realistic themes and beautifully rendered maps.

May 13 2010

15:01

Switching to Chrome? Download these Extensions

When Chrome first entered the browser wars in September 2008, although it quickly acquired a big 1% of the audience, many resented the fact it wasn’t as extensible as the long-time favorite Firefox browser. Developers want add-ons – things that’ll make their coding faster and easier, with less room for mistakes. Things which, let’s face it, Chrome couldn’t yet offer. But things have since changed.

Chrome features a vast collection of extensions at the moment. It also regularly beats its opponents in various speed and compatibility tests, while the great set of developer tools promoted the browser to a very interesting solution for web enthusiasts. But does it have enough ‘extension power’ to overcome Firefox? Check out the following twenty extensions, and make up your own mind!


1. Web Developer

Some of you might be familiar with this plug-in from Firefox. Although the Chrome version can’t disable JavaScript, due to some restrictions from the browser’s side, WDT remains one of the most powerful additions to a web developer’s arsenal.

You can easily outline different elements of a site, and test it in various environments (for instance, without CSS and images) through the extension. It also offers quick access to important code validation services and some other interesting options.


2. Pendule

Though it isn’t filled with features like Chris Pederick’s Web developer toolbar, Pendule proves itself to be worthy of comparison against the famous Firefox add-on.

Other than the basics (source, images, validators), it contains a couple of very cool tools, like the ruler and the color picker, which will be highly valued by web developers and aren’t a part of WDT.


3. Chrome Sniffer

No, Chrome sniffer can’t produce smells equivalent to your screen picture. Sorry. However, if you’d like to find out which frameworks and libraries a particular site uses, that’s an area sniffer can help you with.

As appealing as looking through someone else’s uncommented code might sound to you, there are times when a web developer doesn’t have time to play games. Sometimes you may just want to figure the library out and get it over with. Is the site using jQuery? Yes? OK, let’s move on. That’s what Code sniffer is all about.


4. Chrome SEO

Although still in Beta, Chrome SEO is one of the best search engine optimization analyzers you can find as a browser extension these days.

It provides easy access to various tools that can help you out with Competitive Analysis, Keyword Research, Backlink Checks, PageRank Checks and other daily SEO tasks.


5. Speed Tracer

Speed tracer is an official Chrome extension, developed by Google. It tracks your site performance in real-time, generating reports on various problems that might have occurred while communicating with the server. You can then use these metrics to optimize your code for better site performance.

Note: You should read the getting started guide before using Speed tracer.


6. Frame Two Pages

“Frame Two Pages” does exactly what it sounds like; it splits your two tabs into resizable frames. In other words, your physical screen will be split into independent areas.

Once you click the extension’s icon, the current tab will be merged with the previous (left) one into a frameset with two rows or columns (frames). Unlike the other similar extensions, “Frame Two Pages” can open links in the same frame they were clicked in.


7. Snippy

Snippy allows you to grab snippets from web pages and save them for future use or upload to Google Docs. The extension is very useful when copying a lot of information from various sites, since it shortens the cpoy/paste process to only one simple click.


8. IE Tab

No matter how much we hate it, the fact remains that some sites need Internet Explorer to work properly. IE tab acts as if you had the Internet Explorer engine running inside your Chrome browser.

Although most developers will use IE tab to test their work in Internet Explorer, the extension can also be used to access local (file://) URLs (not possible through Chrome itself).


9. Color Picker

Color picker can provide you with both hexadecimal and RGB values of a currently selected color. It does a pretty good job most of the time, but the desired site must be fully loaded at 100% zoom level for best results.


10. BuiltWith

Similar to Chrome sniffer, BuiltWith does a great job of understanding which technologies and frameworks a particular site is using. In addition to their names and short descriptions, you’ll be provided with usage statistics and a list of other websites using the same technologies.


11. Lightshot

LightShot is a tool which allows you to easily make screenshots of any area of a website. You just hit the Lightshot icon on the toolbar; select an area you want to make a screenshot of, and click “Save” or “Upload to server”. In case of uploading you instantly get a link to the screenshot you’ve just uploaded.

You can also copy or edit your screenshots (add text, draw lines and more other functions) using an on line tool much reminding of Photoshop.


12. Xmarks bookmark sync

If you’re working on multiple computers, you likely know it’s not easy to maintain synchronization between your bookmarks in order. Maybe one of the PCs is using Firefox, the other one Safari, the third Chrome, etc. You can’t just keep copying all your bookmarks between them forever.

And you don’t have to, because Xmarks will do that for you. It can synchronize across multiple computers and web browsers, and is available as a free extension for Chrome, Firefox, Safari and Internet Explorer.


13. Web of Trust

Chrome is an extremely safe browser. The safety measures actually go as far as to start entirely new processes for each tab; so there is very little room for any wandering viruses to crawl thorough and attack your computer. It also warns you if you’re visiting a site that is on the Chrome “blacklist.”

If you need more security, “Web of Trust” is for you. WOT ratings are powered by the users and their experiences with websites, so it’ll warn you when trying to access a site others have had problems with. It’ll also rate your Google/Yahoo/Bing search results so you are warned about a particular site reputation in advance.


14. Last Pass

LastPass is a free online password manager and form filler that easily remembers your on line passwords and auto-fills them for you. The only password you’ll need to remember from now on is the one of your Last pass account!


15. Chromeshark

ChromeShark is a Chrome extension containing basic playback controls for your Grooveshark account. You can pause a song, skip it, or stop the playback entirely.

Note: The extension has problems when multiple Grooveshark tabs are opened.

16. Recent History

Chrome has a fairly complicated way of accessing your browsing history. It can be done through two long mouse clicks! That’s why Recent history is such a big time saver. It’s positioned in the right-hand side of your address bar, and allows you to access the recently closed tabs and most recently visited pages from only one pop-up.


17. L(ink)y URL Shortener

Twitter users will absolutely adore this extension. It automatically shortens your URLs using the popular Bit.ly URL shortening service. It also remembers the most recent shortened URLs so you don’t have to retype them.


18. Tab Menu

For those who like to get carried away opening new tabs in Google Chrome, this tool will be of great assistance. Instead of looking at tiny horizontal tab icons, it gives you a vertical overview of all your current tabs opened and enables searching as well!


19. Note Anywhere

With “Note Anywhere,” you can post a sticky note on any page you are viewing, customize it, and then review the note on a later date.

It can be quite useful when doing on line research, since the sites you posted the stickers on will be remembered in the extension’s options page. They remain posted until you delete them.


20. Auto Translate

This translator can be customized according to your preferences, so you can choose when will the translate pop-up appear.

For instance, you could set it to translate from English when Control double clicked, but to try to detect the language automatically when you Shift select a word.


Thanks so much for reading. Which ones are your favorites? Any I missed?


February 10 2010

17:48

Why Web Developers Should Switch to Google Chrome

Check out Chrome 4’s great new features for developers, such as cross-platform support, awesome web inspector integration, and handy new extensions. It’s becoming more and more difficult to deny Chrome the title as the new browser for web developers. If it’s not quite there yet, it will be soon!

Introduction

With quick load times, a snappy JavaScript engine, solid WebKit foundation, and big-name backing, Google Chrome has been gaining a respectable market share, even surpassing Safari to become the 3rd most popular browser in December. For developers, however, Firefox has been the sweetheart of many due to its ability to run on any operating system and because of its rich offering of web development add-ons, such as Firebug and the Web Developer Toolbar. But it’s important to test JavaScript in all browsers, and having a robust set of tools in each (including Internet Explorer), is precisely what developers need to make the most of their code.

Lucky for us, the Google folks have been working hard to make Chrome cross-platform, integrate WebKit’s fantastic Web Inspector, and add extensions, making Chrome 4 an amazingly useful tool for web development. In this tutorial, I’ll demonstrate some of the features that make Chrome 4 a great addition to the web developer utility belt.

Downloading Chrome 4

As of January 25, Chrome 4 has been officially released as stable for Windows. Mac and Linux users, however, we have to be a bit more brave in order to experience all that Chrome 4 has to offer. Mac users need to download the “dev” version, and Linux users the “beta” version, and it’s highly worth it! Check out the following links to get a copy of Chrome for your operating system that supports everything we’ll discuss in this article:

Web Inspector (aka Developer Tools)

A screenshot of the Profile Panel of the Chrome Developer Tools

Now let’s get into the nitty gritty! In Firefox, Firebug is a godsend for developers, providing a debugging console, HTML & CSS manipulation, JavaScript profiling, and a whole lot of other goodness. The WebKit folks took notice and over the last couple of years have been perfecting a set of tools called the Web Inspector, which offers a similar set of features to Firebug. Within Chrome 4, the Web Inspector is labeled “Developer Tools.”

Accessing the Web Inspector/Developer Tools

A demonstration of how to access the Developer Tools on Google Chrome for Mac

In addition to Chrome 4, the Web Inspector has been in action for a while from within previous versions of Chrome and Safari, although it’s a bit hidden. To access the Web Inspector in various browsers:

Safari 4

  • Select “Edit > Preferences” (Windows) or “Safari > Preferences” (Mac)
  • Select the “Advanced” tab
  • Check “Show Develop Menu in menu bar”
  • A new menu item, “Develop,” will appear
  • Select “Develop > Show Web Inspector”

Chrome 3 (Windows only)

  • Select the Wrench
  • Select Developer
  • Select JavaScript Console (the whole range of tools are hidden under this name)

Chrome 4

  • Windows / Linux: Select the Page Icon > Developer > Developer Tools
  • Mac: Select View > Developer > Developer Tools

JavaScript Console

A screenshot of the Console Panel within the Chrome Developer Tools

If you haven’t worked with the Firebug or Web Inspector console, then you’re missing out on a great way to help debug JavaScript. The JavaScript console serves several important functions, such as capturing errors and presenting them in a useful format, testing short bits of JavaScript, and as a convenient place to log useful information like variable values and execution times. Practically speaking, I use this tool regularly to evaluate the performance of my programs and to ensure that certain variables are being calculated correctly.

Elements Panel

A screenshot of the ELements Panel within the Chrome Developer Tools

In addition to the JavaScript console, it’s always nice to have a tool that allows you to quickly view the HTML and style information of particular elements on the page. The Web Inspector Elements panel gives a tree-structure view of the Document Object Model (DOM), allowing you to drill down into the document to select an item of interest. You can also access the information of a certain object by right clicking on an item within the browser and selecting “Inspect Element.”

Finally, I should note that the Elements panel allows for much more than simple inspection. You can modify and add styles, edit html, and in the latest versions, view event listeners attached to a selected DOM element. These features can all come in very handy when you’re dealing with little quirks that you can’t quite figure out.

Resources

A screenshot of the Resources Panel within the Chrome Developer Tools

The last feature I’d like to highlight within the Web Inspector/Developer Tools is the “Resources” tab. If you’ve worked with Firebug’s “Net” tab, then you’ll notice several similarities. Essentially, the Resources tab gives a breakdown of all the information that is exchanged between your browser and the server, from the images to the JavaScript to the document itself. It also shows a ton of handy information, such as:

  • A graph of the time it takes to download each component
  • A graph showing the size of the various components
  • A way to sort the requests by type, e.g. Documents, Stylesheets, Images, etc.
  • Image previews with dimensions, file size, and MIME type displayed below
  • Request and Response Headers
  • XML HTTP Request (XHR) information

An elegant tool that allows for easy inspection of page speed, the Resources tab can aid you in identifying and squashing performance bottlenecks. Give it a try and see where your page is too fat, then slim down your chunky images and code to provide a better experience for your users!

Further Reading

A complete overview of the Web Inspector/Developer Tools could easily be a tutorial on it’s own, but we have more ground to cover! I highly recommend checking out the following resources to learn more:

Extensions

Now, while I’ve always been blown away by the speed of Safari 4 and Chrome as compared to Firefox, they’ve both lacked a critical feature: add-ons. In Chrome 4, that all changes with the addition of “extensions.” You can add functionality to Chrome by downloading and installing extensions or by using the standard tools of the trade: HTML, CSS, and JavaScript, to write your own. Extensions can be downloaded from the Chrome Extensions Repository, and should be fairly simple to install. Already, a number of very compelling extensions have been created which aid web development, from quick validation to resolution testing. Let’s take a look at a few.
        

Speed Tracer

A screenshot of the Speed Tracer extension

A web developer can never really be obsessed enough with performance, and the more tools that identify sluggish performance the better. That’s just where Speed Tracer, a Chrome extension developed by Google, comes into play. Speed Tracer takes the “Resources” panel to the next level by providing a visualization of the time it takes to execute low-level tasks, such as rendering CSS or parsing HTML and JavaScript. I’d highly recommend taking a look at a video demonstration of Speed Tracer put together by the folks at Google to get a better idea of how it can help you improve the performance of your applications.

Pendule

A screenshot of the Pendule extension

Moving from Firefox to Chrome, one extension everyone is going to look for is a replacement of the fantastic Web Developer Toolbar. For those who don’t know, the Web Developer Toolbar deals with the tasks Firebug wasn’t meant to handle, such as quick validation of HTML and CSS, the ability to quickly disable JavaScript or images, and a tool for checking links. Those functions are all handled with style by Pendule, which offers much of the core functionality of the Web Developer Toolbar (not quite all), while offering a few goodies of it’s own, such as a color picker.

Resolution Test

A screenshot of the Resolution Test extension

Web Developers often need to ensure that their designs work at a variety of resolutions. Resolution Test allows developers to efficiently resize their browser window to a number of common resolutions for quick and easy testing. The latest version even allows you to open multiple windows at different resolutions with only a couple of clicks. Resolution Test is fantastic for making sure your target audience is seeing the page you want them to see.

Webpage ScreenShot

A screenshot of the Webpage ScreenShot extension

There are occasions when its necessary not only to grab a screenshot of the current visible portion of a website, but a screenshot of the whole page. For example, you may want to print a full page for peer critical review or to demonstrate in your portfolio. I formerly used a Desktop tool for this, but now Webpage ScreenShot does a nice job of capturing full-page screenshots in a few clicks.

Chrome Sniffer

A screenshot of the Chrome Sniffer extension

Do you ever stumble upon a fantastic page and wonder, “what are they using to build this?” I do, and often find myself digging through the source code trying to figure out who the man behind the curtain is. While it is a useful training exercise, and a necessary one if you really want to know what’s going on, Chrome Sniffer can usually give you a snapshot of which JavaScript and PHP frameworks are in use for a particular page. For example, navigate to NetTuts and Chrome Sniffer informs us that it’s run on Wordpress using Google Analytics and jQuery.

Conclusion

The future of web development continues to look brighter and brighter! While only a few years ago we had a limited set of tools for debugging JavaScript, tinkering with CSS, and viewing HTML, today we have a variety of powerful options. Now that Google Chrome has become cross platform, fully integrated the WebKit Web Inspector, and added extensions, it is a versatile tool for helping developers improve their own pages. I encourage all of you to download a copy for yourself and give it a shot to see if it can help you improve your pages, then come on back here and share your favorite plugins and tools with the rest of us!

Write a Plus Tutorial

Did you know that you can earn up to $600 for writing a PLUS tutorial and/or screencast for us? We’re looking for in depth and well-written tutorials on HTML, CSS, PHP, and JavaScript. If you’re of the ability, please contact Jeffrey at nettuts@tutsplus.com.

Please note that actual compensation will be dependent upon the quality of the final tutorial and screencast.

Write a PLUS tutorial
Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
(PRO)
No Soup for you

Don't be the product, buy the product!

close
YES, I want to SOUP ●UP for ...