WHEN THE HECK IS 4/8/2016? · when the heck is 4/8/2016? aka just one of the many things they never...
Transcript of WHEN THE HECK IS 4/8/2016? · when the heck is 4/8/2016? aka just one of the many things they never...
WHEN THE HECK IS 4/8/2016?
A K A J U S T O N E O F T H E M A N Y T H I N G S T H E Y N E V E R TO L D YO U A B O U T …
WHO THE HECK AM I?
• Developer Advocate for IBM
• MobileFirst, Bluemix, Cordova/PhoneGap, and web stuff in general
• Blogging at raymondcamden.com
• Tweeting at @raymondcamden• Author of "Apache Cordova in Action" and "Client-Side
Data Storage"
SLIGHTLY MORE COMPLICATED…
TIL
• America is one country
• There are other countries
• They use the Internet too!
BUT WAIT…
• They speak a different language (that's cool)
• They use a different unit of measurement (that's mostly cool too)
• "NASA lost a $125 million Mars orbiter because a Lockheed Martin engineering team used English units of measurement while the agency's team used the more conventional metric system for a key spacecraft operation..." (oh crap)
• They write numbers differently (that's just insane)
AN EXAMPLE…
1,000,000.99
1.000.000,99
1 000 000,99
4/8/2016
IS IT…
• April?
• August?
• It's my birthday – so you're both right!
PROBLEM
• Numbers change
• Currencies change
• Dates change
SOLUTION
• Pretend the rest of the world doesn't exist!
REAL SOLUTION
• Detect the locale of the device
• Format numbers/dates accordingly
• Pro Tip: You can't just format American money into a Euro.– 1$ ≠ 1€
GLOBALIZATION PLUGIN FTW
• https://www.npmjs.com/package/cordova-plugin-globalization
• cordova plugin add cordova-plugin-globalization• Supports numbers, currencies, and dates
• Supports getting information about locale/language
• Supports getting information about formats
• Even supports isDayLightSavingsTime – because that's still a thing apparently
JUST ADD IT!
• Yes, you just add the plugin and your magically done!
IDENTIFY CRAP TO UPDATE
• Check each view
• Look at the data
• Figure out what makes sense to localize
http://www.raymondcamden.com/2015/10/14/adding-localization-to-your-ionic-application-with-ibm-bluemix/
bankService.getAccountDetails().then(function(res) {$scope.bankAccount = res;
});
...
Total in account: ${{bankAccount.total}}Last Updated: {{bankAccount.lastUpd}}
bankService.getAccountDetails().then(function(res) {
//$scope.bankAccount = res;navigator.globalization.numberToString(
res.total, function(number) {$scope.bankAccount.total = number.value;
},function() {}, {type:'currency'});
navigator.globalization.dateToString(new Date(res.lastUpd), function(d) {
$scope.bankAccount.lastUpd = date.value;}, function() {}, { options });
});
OPTIONS
• For numbers:– decimal
– fraction
– currency (doesn't work in Browser)
• For dates:– formatLength: short, medium, long, and full
– "Apr 8, 2016 12:00 AM", "April 8, 2016 12:00 AM", "Fri, Apr 8, 2016 12:00 AM", "Friday, April 8, 2016 12:00 AM"
– selector: "date", "time", "date and time"
Changed Region (Locale) to France but kept language to English
Changed language to Frenchbut kept Region/Locale to US
Changed both region +language to French
WHAT TO DO?
• Currency seems inherently unsafe
• Given you use "X seashells" for country Y using the ** symbol – just format it as a number and use ** on display
WE'RE DONE!
• Nothing else can go wrong
• It's all downhill from here
• Rainbows and kittens and cookies for everyone!
WHAT ABOUT LOTS OF DATA?
PROMISES!
• Just promise the hell out of that crap!
• JavaScript Promises
• http://www.raymondcamden.com/2012/11/15/Testing-Globalization-Support-in-PhoneGap-22/
ALTERNATIVES – PART 1
• One of the many libraries out there
• Moment.js
• http://momentjs.com/docs/#/i18n/
ALTERNATIVES – PART 2
• Intl
• ECMAScript Internationalization API
• window.numberFormatter.format(n);
• http://code.tutsplus.com/tutorials/working-with-intl--cms-21082
• OMG AWESOME NO PLUGIN NO LIBRARY PERFECT!!!!!!!!!!!!!!11!!!!
• Let's check CanIUse.com
BUT WAIT…
• I'm an American (sorry)
• I'm in America (not sorry – woot!)
• I'm looking at an event in France
• How should the date be formatted?
• Best for me – obviously? Right?
• Anything you do automatically – treat with caution