Archive

Posts Tagged ‘tips’

Quests and Missions in Gunshine.net

May 2nd, 2011

Gunshine.net

Gunshine is an online game created in Finland with roleplaying and social features. Although the game is currently running in beta, it already contains lots of features, tons of missions and plenty of enjoyment.

I’m going to gather all the quests I personally encounter and share it with other players, both newcomers and more advanced players. The intention is to collect all available quests into a simple table, which should help during gameplay. All extra help is appreciated, and you can provide listing of quests either by e-mail or commenting into this article.

Disclaimer

The purpose of this article is to provide help for players who can’t find new missions to complete (which seems to be quite common case). This article is inofficial and doesn’t contain any strategic advices.

Notice that game is changing all the time since it’s in beta. There are new missions appearing while some of the older missions may disappear. Therefore this list can be outdated on some parts.

This article will constantly update when I receive new information of there is an update made on Gunshine itself.

Last update is made on 26th of May, 2011.

A big thanks for following contributors:

  • Nina (a3)

How to Read?

  • Name – the mission name,
  • Level – the level of enemies, or the area where mission is located,
  • Where to Get – the area where mission can be get,
  • XP – the experience gained after completing the mission,
  • Money – the money gained after completing the mission.

Table of Quests / Missions on Dawnbreak City

Name Level Where to Get XP Money
Welcome to the World of Tomorrow 1 Immigration Center 12 8
Through the Looking Glass 1 Immigration Center 12 8
Follow the Yellow Brick Road 1 Immigration Center 11 6
Jailbreak Time 1 Immigration Center 12 8
Mercenaries Are Your Best Friend 1 Immigration Center 60 24
The Great Escape 1 Immigration Center 60 24
Keep On Running! 2 Immigration Center 60 24
You’re Gonna Be Okay 2 Wetlands 65 36
Meet Lemmy 3 Wetlands 12 8
Brutal Security 3 Pipe square 60 24
Police Truck 3 Pipe square 60 24
Zero Tolerance 3 Pipe square 25 60
Grim Gonzales (Group) 3 Drug Farm 130 60
Drug Bust 4 Pipe square 12 8
Gasoline Order 4 Drug Farm 60 24
Drugs, Up in Smoke 4 Drug Farm 60 24
Rebel, Rebel 4 Drug Farm 12 8
Help Cyril 4 Rebel Camp 14 14
Credibility is Everything 4 Rebel Camp 13 12
Supplies Are Your Friend 4 Rebel Camp 13 50
Don’t Keep Him Waiting 4 Rebel Camp 13 75
Get To Da Choppa! 4 Rebel Camp 70 42
Repel the Raiders 4 Rebel Camp 70 42
A Friend in Need 4 Rebel Camp 14 14
On the Waterfront, pt. 1 4 Malloy Waterfront 65 36
On the Waterfront, pt. 2 4 Malloy Waterfront 65 36
Fire, Water, Burn 4 Malloy Waterfront 65 36
Big Yellow Taxi 5 Malloy Waterfront 15 18
Go Boy, Fetch! 5 Northern Warehouse 15 18
A Life for Life 5 Northern Warehouse 75 54
C’Mon, Hurry Up Already! 5 Northern Warehouse 15 18
Bang Up Job 5 Northern Warehouse 15 18
Playing it Safe 5 Northern Warehouse 15 18
Am I Bugging You? 5 Southern Warehouse 65 36
Hone Your Skills 5 Southern Warehouse 13 12
Just a Small Favor 5 Southern Warehouse 70 42
Meet Kaylee 5 Northern Warehouse 15 18
Meet the Boss 5 Northern Warehouse 15 18
Bullet-Tooth (Group) 5 Pirate Bay 140 70
Meet Mick 5 Pirate Bay 13 12
Report to Holden 5 Constr. Site West 80 60
Name Level Where to Get XP Money
Meet Lloyd 6 Drug Farm 15 16
My Go-to Girl 6 Pirate Bay 16 20
Escort Mech 6 Novelle Forest 75 48
Winners Don’t Do W.U.Z.Z 6 Pirate Bay 70 42
A Damsel in Distress 6 Pirate Bay 70 42
Burning Down the House 6 Northern Warehouse 75 54
A Moment’s Respite 6 Pirate Bay 75 54
Manna From Heaven 6 Pirate Bay 75 54
Get Rid of the Rivals 6 Pirate Bay 80 60
Saving Saffron 6 Pirate Bay 80 60
Where’s Wally? 6 Northern Warehouse 16 20
White Lies, Red Blood 6 Northern Warehouse 85 72
Confiscate This! 6 Container Storage 85 72
Talk to Rupert 7 Pirate Bay 80 60
Hostile Takeover 7 Constr. Site West 80 60
An Insidious Plan 7 Constr. Site West 80 60
Man the Machines 7 Constr. Site West 80 60
A Dog as a Courier? … 7 Northern Warehouse 80 60
Raiding the Drug Lab (Group) 7 Northern Warehouse 190 150
Meet Mal 7 Container Storage 16 20
Drugs, Dogs and Depots 7 Import Area 85 72
Blood and Fire 7 Pirate Bay 85 72
The Tankinator (Group) 8 Pirate Bay 170 120
I’m Afraid I Was Very … (Group) 8 Northern Warehouse 190 150
If You Have a Plan … 8 Import Area 60 50
Be Prepared 9 Pirate Bay 90 78
Whack-a-Mole 10 Abyssos Eastern Entrance 95 90
Documents for Davey 10 Panacea Health Station 19 30
Report to Davey 10 Abyssos Eastern Entrance 19 30
Someone’s Treasure … 10 Panacea Health Station 19 30
Pest Control 10 Panacea Health Station 95 90
A Trojan Tractor 10 Panacea Health Station 100 96
A Trojan Backfire 10 Panacea Health Station 100 96
Security Does Not Equal Safety 10 Panacea Health Station 125 144
Gas Panic 10 Abyssos Truck H. 105 108
The Soulless (Group) 10 Panacea Health Station 200 160
I’ll Never Tell 10 Abyssos Field Office 85 60
Name Level Where to Get XP Money
Gun Trouble 11 Abyssos Gas Refinery 100 96
Gutting the Guards 11 Abyssos Gas Refinery 100 96
Blackout 11 Abyssos Gas Refinery 105 78
Kick ‘Em When They’re Down 11 Plainview Oil Ref. 100 96
Insult to Injury 11 Plainview Oil Ref. 100 96
It IS Another Drill, Literally 11 Plainview Oil Ref. 90 60
Now That’s Just Mean! 11 Plainview Oil Ref. 100 72
You Are What You Eat 11 Abyssos Marketplace 120 132
Reporting for Duty 12 Panacea Health Station 20 32
The Drill Stops Here 13 Panacea Health Station 105 108
Powerful Mischief 13 Panacea Health Station 105 108
Fat Dog (Group) 13 Abyssos Truck H. 220 190
Getting Our Boys Out 13 Abyssos Truck H. 105 108
Who in the What Now? 13 Abyssos Truck H. 105 108
Making a Stand 13 Eastern Drilling Zone 100 96
Leave No Man Behind 14 Power Plant Entrance
Two Lil’ Hobos 14 Abyssos Truck H. 105 108
They Came From The Sewers 14 Abyssos Truck H. 105 108
Playing a Prank 14 Abyssos Marketplace 120 132
Labycollector 14
Three Down, 100 to Go 14 Panacea Health Station 100 96
Raid the Nuthouse 14 Abyssos Truck H. 23 42
Paving the Way 14 Ratched Lane 115 126
Bulldozers Are Fragile Beings 14 Ratched Lane 115 126
Kill the Chief 14 Ratched Lane 115 126
Get Certified 14 Ratched Lane 115 126
Onward! 14 Ratched Lane 23 42
Clear Out All Hostiles 14 Bromden Park 115 126
Extra Guns, Extra Fun 14 Bromden Park 115 126
Kill the Alarms 14 Bromden Park 115 126
Asylum Awaits 14 Bromden Park 23 42
Clean Sweep 15 McMurphy Asylum 120 132
Inmate 6733 15 McMurphy Asylum 120 132
Papillon 15 McMurphy Asylum 120 132
Drugs Don’t Work (Group) 15 McMurphy Asylum 240 220
Abyssos Did Indeed Gaze Back 15 Abyssos Offices 120 132
Duke of All Kinds of Hazards 15 Abyssos Truck H. 24 44
For a Few Dollars More (Group) 15 Abyssos Marketplace 240 220
Gaze Long Into Abyssos 15 Abyssos Offices 120 132
I Am in Disguise 15 Abyssos Marketplace 24 44
Peek Into Abyssos 15 Abyssos Offices 120 132
Stop the Press 15 Abyssos Marketplace 240 220
The Way of the Exploding Pig (Group) 15 Abyssos Marketplace 240 220
There is Only Flesh 15 Abyssos Marketplace 120 132
Name Level Where to Get XP Money
Deal Breaker 17 Abyssos Marketplace 130 150
Oh, You Rascals! 17 Abyssos Marketplace 135 162
Bring it! 18 Abyssos Marketplace 130 150

Table of Quest / Missions on Islands

Name Level Where to Get XP Money
Travel to Idas 8 Northern Warehouse 17 24
Travel to Argus 10 Northern Warehouse 19 30
Travel to Actor 12 Northern Warehouse 21 36
Travel to Castor 14 Northern Warehouse 23 42
Island Idas Missions 8 Idas Harbor 85 72
Island Argus Missions 10 Argus Harbor Square 95 90
Island Castor Missions 14 Castor Harbor Square 115 126
Island Medea Missions 16 Medea Harbor Square 125 144
Author: Categories: General Tags: , , , , ,

How to Target CSS Only for Opera

April 5th, 2011

Opera

Sometimes there is need to write browser-specific CSS declarations. Although every developer should put their best effort on creating structure and layout that doesn’t require any proprietary hacks, one may encounter situations where it’s impossible to proceed by the book.

My case was about font-size and letter-spacing on Opera (11.10). Opera was displaying selected font way too big to fit in allowed space and I needed a hack to fix this issue.

Opera 9 and below

This is pretty straight forward and well known hack:

html:first-child p
{
    font-size:12px;
}

The real issue, in my case, was how to target newer and modern Opera versions 10 and 11.

Opera 10 and above

The answer is in media queries. Earlier this was obvious hack while no other browsers supported media-queries properly. However, nowadays more and more browsers support it and therefore we need to tweak the conditions a little:

@media not all and (-webkit-min-device-pixel-ratio:0) {
    p {
        font-size:12px;
    }
}

I’ve validated this with Opera 10.5 and Opera 11. I also checked on Chrome 11, Chrome 12, Firefox 3.6, Firefox 4.0, Safari 5 and IE 8 that it doesn’t affect on them.

Edit: I haven’t tested this on Opera 9 or earlier, but according to other resources, this hack should work on those browsers too.

Conclusion

It’s still possible to write browser-specific hacks but it’s getting more and more complex all the time. In this case we’re using a hack that is actually targeted to WebKit browsers to get them excluded from the media query hack. However, there is no confidence that this hack would work on Opera 12 or next versions of Safari or Chrome would behave as expected.

And big thanks goes to an article CSS Hack or New CSS File for Problematic Browsers? and Is There Any Dedicated CSS Hacks For Safari or Opera?.

Author: Categories: Web Development Tags: , ,

How to Get Started with Shadow Cities

November 12th, 2010

Shadow Cities

Please notice this article is outdated, after the client and game mechanics were renewed on May 2011!

I strongly suggest reading STARTERS GUIDE at Shadow Cities forum instead of this article.

Shadow Cities is a location based MMORPG which was just released for iPhone and is currently in beta stage (available only in Finland).

In order to get you started, I decided to write this post. I’ve myself played only for two days, nearly as long as the game has been publicly available. So these advices are from newbie to newbie :). And it’s very possible some of these advices gets outdated in near future.

These advices are unofficial and made from personal perspective. By the way, I’m playing with character called “Macaco” for the Architects.

Last updated on 13th of Nov, 2010

Table of Contents

Read the Help Section

Shadow Cities has a brief and clear help section, which you really should read before starting your career as a mage. It can also be found online from Shadow Cities Help Section.

Seriously, read it.

About the Terminology

Teams
You’ll belong either on the Architects or the Animators. On daily basis, your side will mostly affect on how you’re able to travel (or warp) in your area without moving physically. On weekly basis, there are different kind of campaigns where both teams compete against each other.
Hitpoints
Mages don’t have hitpoints, only spirits do. This means neither you can’t get killed, nor can the other mages. Every time a mage is hit, he’ll lose (only) mana.
Mana
Whenever you want to do something cool, you’ll need mana for that.
Experience
In order to get on next level, you need to gain experience. The best way to gain experience is to kill spirits.
Spirits
Spirits are the non-player characters of the game, which you’ll hunt down and kill until your screen has a greasy Z figure on it. And then you’ll kill some more.
Energy
Energy can be considered as “experience points of the team”. It seems there will be different kind of contest every week between teams and the amount of collected energy is in important role. The main resource for energy are the dominators.
Warping
This is how you travel inside the game. Or of course you can travel physically, but by warping you’ll get to different places very quickly. Warping back and forth doesn’t consume any mana.
Buildings
There are different kind of buildings, and the dominators are the most important ones. These towers has several meanings which you can find out by reading through the help section.
Power
Power is needed in order to build specific type of buildings. Dominators are generating power, while other type of buildings are consuming it.
Energy Gateways
These are burning flames around the realm. They can be conquered by attaching dominators to them. They also can be bought with mana bottles, making the buyer as the Shadow lord of the realm (the close surroundings).

What is Mana?

On the bottom left corner of the main view, there’s a blue bottle and a tiny meter. This is your mana. Good thing to remember is that nearly every action requires mana in some way.

The meter will show much mana you’ve charged with, and the number above the bottle displays the amount of mana bottles. One bottle will recharge your mana completely. Full charge of mana will be enough for 3 – 4 war spells.

Mana bottles are also the currency in the Shadow Cities. This is quite important to realize. Don’t use bottles for recharging whenever you’ve time to wait. Mana will automatically regenerate, but the bottles won’t. Therefore it’s the best way just to wait for recharging. Trust me, you’ll eventually end up in a situation where you’ll curse yourself for spending mana bottles in vain.

There are three ways to gain more mana bottles: 1) buying them from App Store, 2) researching (see “What Are the Captured Spirits?”) and 3) by completing tasks (little yellow exclamation or question mark on bottom right of the screen).

How Do I Gain Experience?

The best way to gain experience is by killing spirits. There are different kind of spirits, but most of them are quite easy catches (Rank 1).

Spirits are flying around and will not attack you until you’ve first attacked them. You should definitely go after them whenever you’ve got enough mana to throw at least two war spells.

It’s not cool either to kill a spirit someone else is trying to kill. No matter if he’s an Architect or an Animator. The amount of experience is nothing compared the amount of disrespect you gain.

What Are the Captured Spirits?

After you kill a spirit, it’s captured. The list of captured spirits can be found by pressing the white Shadow Cities icon on the bottom right. And on the sub menu, go for the yellow icon on the top left.

There are 12 different kind of spirits in total, with three different colors (red, green, blue) and four different houses (Dannan, Drioma, Inrik, Tiermes).

There are two things that makes some spirits more worthy than others: 1) spirits have different values (marked with stars) and 2) some type of spirits are used to research mana bottles.

Captured spirits can be used for generating energy. The value (no star, one star, three star) defines the amount of energy you’ll generate while donating the spirit. They can also be used for researching mana bottles.

The point here is to focus on more valuable spirits and / or spirits that can be used for researching. I’ve noticed that more valuable spirits (especially three stars on them) are harder to capture, but you’ll also gain more experience by killing them. So, I definitely recommend hunting down these certain type of spirits.

How to Kill Other Players?

Never ever go after other players! It just doesn’t make sense. At the moment, other players can’t be killed (I personally hope this get changed). They’ll only lose their mana – and so do you. If you encounter an hostile situation you should just warp away.

Only reasonable situation for attacking opponent players is when they’re trying to destroy your buildings. However, it’s easy for them to logout and come back later with recharged mana and continue the destruction. But at least you’ve tried your best :).

How to research?

You can research by selecting yellow character icon from top left and then the mana bottle from sub menu. In research menu you see three headers labeled as “Research”, “My Public Projects” and “Other Public Projects”.

Currently it seems that “Red Dannan”, “Green Drioma” and “Blue Inrik” are used for researching purposes. I don’t know whether this will change on some interval.

You should check what type of spirits you have for researching purposes from “Research” view. But don’t start your own project yet. Instead you should check through ongoing public projects whether you can contribute to them.

Every mage who participates on research project will gain one mana bottle. If they participate by adding multiple type of spirits they still gain only one bottle. Therefore it makes no sense to contribute with more than one spirit.

When you start your own project, it will appear as public project, but only to your friends. However, when you participate on a project created by someone else, this project will be seen only by his friends.

How to Collect Energy?

The dominators are the main source of energy. Dominators will slowly generate energy, and when they’re filled with energy, a red circle will appear around them and you can harvest the energy. You’re also capable of harvesting your team members dominators. Another way to collect energy is to donate captured spirits (see above).

You’ll also gain (or rob) energy when destroying opponents dominator which is fully charged. It’s extremely rewarding when you stumble upon a field of opponent dominators.

It’s rather important to collect energy. Energy will help your team to win the weekly campaign. And you’ll be rewarded according to the energy you’ve collected.

What Should I Build, And Why?

Build dominators. Focus on building the dominators. And harvest the dominators as often as possible.

Distribute dominators. The amount of power generated by dominators doesn’t depend on the location of dominator. In addition, your dominators will generate more energy in average when they’re distributed to different gateways. One dominator per player, per gateway will generate 12 energy points, while two of them will generate only 8 points each. If you connect eg. five of your dominators to a single gateway, they’ll generate only five energy points each.

Always destroy enemy dominators when you encounter them. This is the situation where mana bottles are essential because you really want to get rid of them all. At the moment it seems not many players are fully aware of this. By destroying opponent’s dominators you both gain experience and harm their infrastructure.

You’ll find out the meaning of all the other buildings while you’re progressing on the game. But the dominators are the constitution of the game.

What is Warping?

In order to get easily on different places, you’ll need to warp. Whenever there’s something that belongs to your team, you can warp on it. That is very good thing to remember.

It’s possible to warp longer distances. This is done through beacons, a specific type of building which has to be built by someone. You can see the available beacons by entering into expanded view by clicking on the white Shadow Cities on the bottom right, and then on the submenu, click the white cloud icon on bottom left.

What Spells Should I Choose?

I have no straight answer on this, so I’ll make a good guess:

  • Upgrade your war spell first
  • Catchers are excellent for capturing loads of (both common and rare spirits). I recommend learning this spell on second.
  • Ability to heal makes you feel like a good mage when you’re donating your mana to other players. However, at the beginning it’s useless for healing buildings while most of them can be destroyed with couple of war spells
  • You won’t be needing beacons in the beginning. They consume lots of power while they won’t provide you any value. Don’t go for them.
  • Traps are always cool. But lower level spell is quite useless, since the trap can be destroyed with one or two war spells

So in general, consider evolving only in the war and catcher spells. They are the spells you’ve personally needing most. Your team will need you, but not when you’re on level 5.

Closing Words

I just hope this helps you to get started. Playing Shadow Cities isn’t that complicated. But I’ve heard some of the new players complaining about the icons and terms that they’re not self explanatory, and you easily end up wandering and doing something meaningless. But it’s good to remember that the game is in beta phase and at least I do think the game will evolve from this point.

Debugging and Testing in Internet Explorer Made Easy

March 5th, 2010

Debugging and Testing in Internet Explorer Made Easy

It’s somewhat usual to leave the testing with Internet Explorer until the end of the project. This is quite acceptable when you’re dealing mainly with layout issues.

But when you’re building a web application with loads of features, there are several issues to struggle with: constant debugging, client-side performance, proprietary bugs and so on. However, getting your hands dirty with IE doesn’t always feel as comfortable as with other browsers.

In this article, I’m going to list and review different set of tools, which will help you and make your debugging and testing process in Internet Explorer much more enjoyable.

This article is a general overview of different tools and resources that are available for IE. Unfortunately it’s not providing any detailed information on how to use these tools properly. But I still hope this article offers you a good start.

This article is split into following topics:

  1. Browser Packages – different IE browser packages
  2. General Debugging Tools – most common debugging tools
  3. Performance Testing Tools – excellent tools for performance testing
  4. Other Resources – additional resources worth of checking

Browser Packages

Browser Packages

The first step is to install all the common versions of Internet Explorer (IE6, IE7, IE8). There are several options available and I’ll review four of them.

Utilu IE Collection

My personal recommendation is Utilu IE Collection. Don’t be scared, it’s very reliable (despite the appearance of website). Utilu IE Collection contains multiple IE versions, which are standalone so they can be used at the same time.

The main reason I recommend this package is because the browsers it provides are very stable. Utilu IE Collection also includes the Internet Explorer Developer Toolbar.

BrowserSeal.BrowserPack

If you’re in need of older versions of other browsers, I recommend installing BrowserSeal.BrowserPack. It uses the Internet Explorer Collection mentioned above, but in addition it allows to install browsers like Safari 3 and Opera 9.

Browsers provided in BrowserSeal.BrowserPack are very stable and I haven’t encountered any problems.

IETester

IETester contains several advantages compared to other packages, like opening different versions of IE into tabs.

IETester is provided by DebugBar and they’re also responsible for providing excellent debugging tools like DebugBar and Companion.js (both reviewed later in this article).

However, IETester still (v0.4.2) feels quite unstable and I’ve encountered some contradictions while debugging. But I’m quite convinced these kind of issues gets fixed sooner or later and therefore keep IETester in my armament.

Microsoft Expression Web SuperPreview

Microsoft Expression Web SuperPreview is a stand-alone application and part of Microsoft Expression Web 3 product. Mainly, it can be used for viewing the pages side by side on IE6, IE7 and IE8.

In my opinion, this application doesn’t provide any value for debugging and testing. It’s targetted for web design, offering the possibility for swift visual overviews and comparing layouts between different IE versions.

General debugging tools

General Debugging

I’m quite certain you’re using Firebug on Firefox. And maybe you’re aware of Firebug Lite and already using it. Still, there’s a good chance that you’re wondering how to debug in Internet Explorer.

Firebug Lite

You might be already aware of Firebug Lite. If not, read further. Firebug Lite is a JavaScript file you can insert into your pages to simulate some Firebug features in other browser than Firefox. It doesn’t affect or interfere with HTML elements that aren’t created by itself.

I have to say I’m not that big fan of Firebug Lite. First of all, many core features of console are already implemented in other browsers. Second, it’s not always working properly. I’ve personally encountered some problems especially with IE and therefore I never count solely on it.

Still, it’s a must. Go ahead and start using it, if you still haven’t.

IE Developer Toolbar

You may be familiar with Developer Tools for IE8. Well, IE Developer Toolbar is practically the same tool for IE6 and IE7. And it’s provided together with IE Collection by default.

IE Developer Toolbar is easy to use and offers a broad set of options for general debugging. It can be compared to Web Developer add-on for Firefox.

DebugBar

All the features you’re missing from Developer Toolbar, can be found in DebugBar. In most cases, when you need to find something out of the document, this can be done with DebugBar. It’s very fast and reliable.

If I had to describe DebugBar in three words, I would definitely say “it just works!”.

CompanionJS

Companion.js integrates with IE and it can be briefly described as a simplified version of Firebug. Like I mentioned before, I’m not that favor for Firebug Lite on IE, and Companion.js feels much more comfortable for basic-level console logging and error reporting.

However, there are two clear disadvantages in Companion.js: 1) it doesn’t support methods like console.dir() yet, and 2) it causes occasional breakdowns with other development tools for IE.

Performance Testing Tools

Performance Testing

Client-side performance testing and optimization is a practice that hasn’t “existed” very long in Web Development. I mean it hasn’t been getting a lot of attention until recently.

As you might know, Internet Explorer (especially IE6) doesn’t perform as good as many other browsers. I was actually quite surprised when I started testing performance with IE that even very small things can really affect on performance.

I’m reviewing couple of performance testing tools that are also possible to implement in any browser, not just in Internet Explorer.

dynaTrace AJAX

If you’re using Speed Tracer on Google Chrome, then you’re going to love dynaTrace AJAX. Like the name says, it’s meant for diagnosing and tracking AJAX and client-side scripting perfomance issues. But in addition, it offers valid tools for tracking rendering (painting) issues and network load in general.

dynaTrace AJAX isn’t the easiest tool to take in proper use. I was bit troubled on how to demonstrate this tool or prove the capabilities in it. Fortunately, my colleague posted a link to an article, which solved the problem: How to Speed Up sites like vancouver2010.com by more than 50% in 5 minutes.

dynaTrace’s blog contains many more resources how to use this powerful tool. Read them, install dynaTrace AJAX and tackle all those nasty perfomance issues that freezes up your Internet Explorer :)

MySpace’s Perfomance Tracker

I’d say the name of this application is a bit distracting. But MySpace’s Perfomance Tracker, or “msfast” (project home) is a browser plugin that help developers to improve their code performance by capturing and measuring possible bottlenecks on their web pages.

It’s very efficient tool for tracking loading and rendering issues, and in addition, it provides the validation results either in YSlow or MySpace’s own ruleset.

I had some problems when I tried to install Beta. But when I first installed the alpha version and afterwards upgraded it to the beta version, it started working properly.

JSLitmus

JSLitmus is a lightweight tool for creating ad-hoc JavaScript benchmark tests. I really recommend JSLitmus for testing performance of your Javascript in general.

JSLitumus really provides additional value in Internet Explorer. As generally known, there are surprising Javascript issues that really can cause performance hit in Internet Explorer. And by creating even simple testcases, you’ll probably find the actual troublemakers.

Fiddler2

Fiddler is a Web Debugging Proxy which logs all HTTP(S) traffic. Fiddler allows you to inspect all HTTP(S) traffic, set breakpoints, and “fiddle” with incoming or outgoing data. Fiddler includes a powerful event-based scripting subsystem, and can be extended using any .NET language.

To be honest, I haven’t use Fiddler a lot. Mostly because performance issues I’ve encountered related to traffic on website has always been solved with another tool (in another browser). But Fiddler really provides a good and broad insight what’s actually happening between the browser and the server and offers a worthy set for tweaking details.

Other Resources

While writing this article I encountered a tool called IEInspector. It’s chargeable, but there’s a free trial version available. I didn’t have enough time to evaluate it, but you can always give it a try.

There’s also a listing at Microsoft Window’s website called Internet Explorer 8 Readiness Toolkit, which is described as a list of convenient development and test tools to help test and modify applications to run on Internet Explorer 8.

There are probably other tools and resources that I’m probably not aware of. If you know good tools or resources for debugging and testing in Internet Explorer, go ahead and leave a comment.

10 Small Things You May Not Know About Javascript

February 18th, 2010

It doesn’t matter how many years I’ve been dealing with Javascript – it contains many little things that surprises me almost every week. For me, Javascript means a constant learning process.

In this article, I’ll provide ten small Javascript tips, mainly aimed for beginner and intermediate Javascript developers. Hopefully there’s at least one useful tip for every reader :).

1. Variables conversions

This sounds quite obvious, but as far I’ve seen, using object constructors, like Array() or Number() for converting variables is quite common practice.

Always use primitive data types (sometimes referred as literals) for converting variables. These won’t do any extra tricks and they usually have better performance.

var myVar	= "3.14159",
	str		= ""+ myVar,//	to string
	int		= ~~myVar,	//	to integer
	float	= 1*myVar,	//	to float
	bool	= !!myVar,	/*	to boolean - any string with length
							and any number except 0 are true */
	array	= [myVar];	//	to array

Converting to dates (new Date(myVar)) and regular expressions (new RegExp(myVar)) must be done with constructors. However, always use /pattern/flags when creating regular expressions.

2. Converting decimals to hex or octals and vice versa

Are you writing separate functions for hex (or octal) conversios? Stop. This can be easily done with existing methods:

(int).toString(16);	// converts int to hex, eg 12 => "C"
(int).toString(8);	// converts int to octal, eg. 12 => "14"
parseInt(string, 16) // converts hex to int, eg. "FF" => 255
parseInt(string, 8) // converts octal to int, eg. "20" => 16

3. More playing with numbers

In addition to previous section, here are some more small tricks with when dealing with numbers.

0xFF; // Hex declaration, returns 255
020; // Octal declaration, returns 16
1e3; // Exponential, same as 1 * Math.pow(10,3), returns 1000
(1000).toExponential(); // Opposite with previous, returns 1e3
(3.1415).toFixed(3); // Rounding the number, returns "3.142"

4. Javascript Version Detection

Are you aware which version of Javascript your browser supports? If not, check Javascript Versions sheet from Wikipedia.

For some reason, features in Javascript version 1.7 are not widely supported. However, most browsers released within a year support features in version 1.8 (and in 1.8.1).

Note: all the versions of Internet Explorer (8 and older) supports only Javascript version 1.5.

Here’s a tiny script both for detecting the version of Javascript via feature detection. It also allows checking support for specific version of Javascript:

var JS_ver	= [];

(Number.prototype.toFixed)?JS_ver.push("1.5"):false;
([].indexOf && [].forEach)?JS_ver.push("1.6"):false;
((function(){try {[a,b] = [0,1];return true;}catch(ex) {return false;}})())?JS_ver.push("1.7"):false;
([].reduce && [].reduceRight && JSON)?JS_ver.push("1.8"):false;
("".trimLeft)?JS_ver.push("1.8.1"):false;

JS_ver.supports	= function()
{
	if (arguments[0])
		return (!!~this.join().indexOf(arguments[0] +",") +",");
	else
		return (this[this.length-1]);
}

alert("Latest Javascript version supported: "+ JS_ver.supports());
alert("Support for version 1.7 : "+ JS_ver.supports("1.7"));

5. window.name for simple session handling

This one is something I really like. You can assign values as a string for window.name property and it preserves the values until you close the tab or window.

Although I’m not providing any script, I strongly suggest you to take full advantage from it. For instance, it’s very useful for toggling between debugging and (perfomance) testing modes, when building a website or an application.

6. Testing existence of property

This issue can be approached at least from two directions. Either we check whether property exists or we check the type of property. But always avoid these small mistakes:

// BAD: This will cause an error in code when foo is undefined
if (foo) {
	doSomething();
} 

// GOOD: This doesn't cause any errors. However, even when
// foo is set to NULL or false, the condition validates as true
if (typeof foo != "undefined") {
	doSomething();
}

// BETTER: This doesn't cause any errors and in addition
// values NULL or false won't validate as true
if (window.foo) {
	doSomething();
}

However, there may be situations, when we have deeper structure and proper checking would look like this:

// UGLY: we have to proof existence of every
// object before we can be sure property actually exists
if (window.oFoo && oFoo.oBar && oFoo.oBar.baz) {
	doSomething();
}

7. Passing arguments for function

When function has both required and optional parameters (arguments), eventually we may end up with functions and function calls looking like this:

function doSomething(arg0, arg1, arg2, arg3, arg4) {
...
}

doSomething('', 'foo', 5, [], false);

It’s always easier to pass only one object instead of several arguments:

function doSomething() {
	// Leaves the function if nothing is passed
	if (!arguments[0]) {
		return false;
	}

	var oArgs	= arguments[0]
		arg0	= oArgs.arg0 || "",
		arg1	= oArgs.arg1 || "",
		arg2	= oArgs.arg2 || 0,
		arg3	= oArgs.arg3 || [],
		arg4	= oArgs.arg4 || false;
}

doSomething({
	arg1	: "foo",
	arg2	: 5,
	arg4	: false
});

This is only a rough example of passing an object as an argument. For instance, we could declare an object with name of the variable as keys and default values as properties (and/or data types).

8. Using document.createDocumentFragment()

You may need to dynamically append multiple elements into document. However, appending them directly into document will fire redrawing of whole view every time, which causes perfomance penalty. Instead, you should use document fragments, which are appended only once after completion:

function createList() {
	var aLI	= ["first item", "second item", "third item",
		"fourth item", "fith item"];

	// Creates the fragment
	var oFrag	= document.createDocumentFragment();

	while (aLI.length) {
		var oLI	= document.createElement("li");

		// Removes the first item from array and appends it
		// as a text node to LI element
		oLI.appendChild(document.createTextNode(aLI.shift()));
		oFrag.appendChild(oLI);
	}

	document.getElementById('myUL').appendChild(oFrag);
}

9. Passing a function for replace() method

There are situations when you want to replace specific parts of the string with specific values. The best way of doing this would be passing a separate function for method String.replace().

Following example is a rough implementation of making a more verbose output from a single deal in online poker:

var sFlop	= "Flop: [Ah] [Ks] [7c]";
var aValues	= {"A":"Ace","K":"King",7:"Seven"};
var aSuits	= {"h":"Hearts","s":"Spades",
			"d":"Diamonds","c":"Clubs"};

sFlop	= sFlop.replace(/\[\w+\]/gi, function(match) {
	match	= match.replace(match[2], aSuits[match[2]]);
	match	= match.replace(match[1], aValues[match[1]] +" of ");

	return match;
});

// string sFlop now contains:
// "Flop: [Ace of Hearts] [King of Spades] [Seven of Clubs]"

10. Labeling of loops (iterations)

Sometimes, you may have iterations inside iterations and you may want to exit between looping. This can be done by labeling:

outerloop:
for (var iI=0;iI<5;iI++) {
	if (somethingIsTrue()) {
		// Breaks the outer loop iteration
		break outerloop;
	}

	innerloop:
	for (var iA=0;iA<5;iA++) {
		if (somethingElseIsTrue()) {
			// Breaks the inner loop iteration
			break innerloop;
		}

	}
}

Afterwords

Go ahead and comment! Did you learn anything new? Do you have good tips to share? I'm always delighted for sharing information about all the little details in Javascript.

And if you want to familiarize with Javascript irregularities, I suggest you visiting at wtfjs :).