thebhwgroup.com

Use the 90|8|7|3 rule to increase productivity

Jason Gray — 2015-01-26T00:00:00+00:00

The 90|8|7|3 rule isn’t a magical mathematical or investment formula. It is, however, a formula that will help you perform your very best work, day after day and week after week, for years to come. This formula isn’t something that I invented and it isn’t something that I quickly or easily implemented in my own life. The formula comes from my mother-in-law, Susan Robison (The Professor Destressor). Just like everyone’s mother-in-law, Susan travels the country training academic faculty on how to perform at the “peak” of their ability. ☺ The work of an academic faculty is fundamentally different from designing and developing software as I do, but the principles I will introduce to you will help you to manage your own career or to get the very best productivity from the teams that you manage. The 90|8|7|3 formula is based on research of how our human brain works, and more specifically, the amount of work-induced “stress” our brains can successfully handle in measurable doses. There are many great authors and scientific researchers out there that can provide more in-depth knowledge on this topic. It is the study of this productivity research over a lengthy career that led my mother-in-law to coalesce that collective wisdom and pen this “rule” in her own words. {% include full-blog-image.html src="90_8_7_3.png" alt="increase productivity" %} ## 90 Minutes: Our brains can only handle about 90 minutes of focused work effort in a single meaningful dose. After that point, the brain’s efficiency and effectiveness begins to degrade. Forcing yourself to continue working beyond 90 minutes results in more errors and ultimately, an inferior product. Research suggests that if you step away from your keyboard, screen, or whiteboard and disconnect for about 10 minutes, you are able to reset your brain for another block of intense thinking. Use this break to take a walk, surf the web, or do something else that involves little or no thinking. It should be something that you consider fun and enjoyable. Be wary of using this time to check your email, however, as research suggests that this type of activity does not normally produce the same “reset” result as a true break away from work would. For me, 90 minutes is a guideline… kind of like when Captain Barbossa (Geoffrey Rush) in *Pirates of the Caribbean: The Curse of the Black Pearl* is explaining the “Pirate’s Code” to Elizabeth (Keira Knightly): **Elizabeth**: Wait! You have to take me to shore. According to the Code of the Order of the Brethren... **Barbossa**: First, your return to shore was not part of our negotiations nor our agreement so I must do nothing. And secondly, you must be a pirate for the pirate's code to apply and you're not. And thirdly, the code is more what you'd call "guidelines" than actual rules. Welcome aboard the Black Pearl, Miss Turner. I don’t set a timer that notifies me after 90 minutes of work time, but I have developed a routine that works for me. That routine includes a couple of scheduled breaks where I step away from my desk and do my own thing. I have always made my managers aware of the parts of my routine that make me a more productive employee. I have also encouraged others around me or those whom I have managed to implement this for themselves. After the break, my brain is ready for more. ## 8 Hours: After 8 hours of sustained work, your brain and your body need an evening away. Hahaha you say! How many people in this industry work a plain old 8 hour day? Not many, I would guess. What am I really saying here? An evening is generally considered a period of time “after work” where you get home, eat dinner, relax, sleep and then return for the next day’s work. There are still some out there that work normal business schedules and can truly work an 8 hour day. However, in this world of constant connection that we now live in, many people in our industry take their work home with them and push on into the night after the kids are in bed. Sometimes this turns into one 8 or 10 hour day followed by a second smaller shift after dinner. There is some flexibility in this rule as well. What the research really shows is that our brains can function at a very high level for a limited number of hours in a row. 8 hours in a row is about the limit without a lengthy break. This break is unlike the 10 minutes break for every 90 minutes of focused effort I discussed previously. This break is on the scale of hours and it allows your brain to reset in a deeper way. For me, the 8 Hour rule works for some days, but when there are tough deadlines, I break my day into two shifts of 5 or 6 hours and I take an extended break between those shifts. My break almost always involves one of these three things (in no particular order): 1. Exercise. I’m a cyclist and I typically will take a 25 to 30 mile bike ride. 2. Hobby. I play guitar, and there are always new songs to learn or a new technique to master. 3. Family. I have and wife and two great kids who are always ready for some fun. Each person must define what constitutes a break for him or her. Maybe it is a few rounds of an on-line video game or catching up with friends on Facebook. Try it out. I guarantee that breaking up a really long day into manageable chunks will improve your productivity, reduce your fatigue and stress, and increase your overall happiness. ## 7 Days: Your body needs a sabbath on the 7th day. I use a small “s” here because I am not talking about the sabbath in terms of religion. I am talking about your brain and body needing a day or more truly away from your work. I have worked for several great companies and great managers over the years that have been very protective of the weekend time of their development team. I have also heard many horror stories about developers working way too much and not having regular weekend time away from the office. I am also finding that more people in this industry struggle because they are staying connected to work and the office on their multitude of devices even when they are physically away from the office. Consider how you designate your own sabbath time and find ways to focus solely on family, friends, and meaningful relationships when you are away from the office. ## 3 Months: Put the vacations on your schedules now! Your body needs an extended (days to weeks) break from work after about 3 months. In terms of faculty development, academic calendars have evolved to approximately a 3 month intense instruction period followed by a break of at least a week. This equates to spring and winter breaks, fall and spring semesters, quarters, etc. In the world of software development, we don’t necessarily have natural breaks built into our yearly schedules, so we need to be extra vigilant and protective of our vacation time. I struggle with this one myself. I am an intensely devoted family man AND an intensely devoted employee that thrives on working hard and taking pride in anything I produce. I have, however, come to appreciate that my work drastically improves when I do step away from the office and return with a fresh start. I am more creative, plain and simple. I create better products and that equates to more success for my company and my clients. ## Conclusion: I see a lot of young people in this industry that are overflowing with talent in the form of coding and designing or some specific software or development architecture. They are coming out of college with great new ideas and landing their first jobs and starting down the paths that will develop their careers. I think that the development talents get these people their early jobs, but it takes a lot of interpersonal skill and excellent self-management to truly be successful in this industry. The research on productivity suggests that when individuals adopt a formula akin to the 90|8|7|3 rule, they are more productive and profitable employees over their careers. They live with less stress, they are more creative, and they don’t burn out from the demands of software development life cycles. The increased productivity from adopting good self-management will certainly benefit your life. It will also benefit your employer, and that will hopefully pay dividends back to you in the form of a raise or a bonus or the next pick for a promotion. I firmly believe that great interpersonal skill and self-maintenance will not go unnoticed.

Do you need an expert in web development? With a team of web development specialists covering a wide range of skill sets and backgrounds, The BHW Group is prepared to help your company make the transformations needed to remain competitive in today’s high-tech marketplace.

Translation and Localization with AngularJS Part 2

Taylor Smith — 2015-01-20T00:00:00+00:00

## Welcome Back! This is part 2 of my article about i18n and l10n. If you don't know what these are, go see [part 1](https://thebhwgroup.com/blog/2015/01/translation-localization-angularjs/) of my article. Otherwise let's dive right in and cover some of the big problems and steps to take while implementing angular-translate. {% include full-blog-image.html src="language-books.jpg" alt="AngularJS Translation books" %} ## String Organization An important feature of angular translate is that it provides a way to organize strings that you use for translation. There are many ways you can do this so I will only look at a few of the features and show examples of how I organized my app. Depending on the scope of your application you can use these or mix in other ways of organizing from the [guide](http://angular-translate.github.io/docs/#/guide/07_multi-language). To organize my application I made a directory specifically for translation related js files. This was nested in the js folder for the application and contained one file for behavior and other files for translated strings. The string files were in the following format and there was one file for each language that the app was translated in. You could separate these by page, sub-domain, or however you choose. I personally found that, since it behaves like a dictionary, having the same strings on the same lines across different languages was extremely helpful. The following snippet is an example of how I set up the individual documents for each language. Line three specifies the language that this particular file is for and the translated strings begin at line 4. The strings are nested into pages, but again, these nestings are completely arbitrary. ```javascript var app = angular.module('sample_app'); app.config(['$translateProvider', function ($translateProvider) { $translateProvider.translations('en', { "HOME": { 'SIGNUP_TEXT' : 'Looks like you need to Sign Up!.', 'WELCOME' : 'Welcome to the site!', //Default interpolation 'HELLO' : 'Hello {{userName}}.', }, "ABOUT": { 'ABOUT' : 'This is some info about our site', //Example of pluralized interpolation 'VISITORS' : 'We {NUM_VISITORS, plural, zero {haven\'t had visitors yet} one { had a single visitor} other { had # visitors}}.', //If this version of interpolation is used ALL strings must conform to this type of interpolation. //Meaning the string above HOME.HELLO would be invalid syntax. //It would need to match the following ABOUT.HELLO string. 'HELLO' : 'Hello {userName}.', } }); }]); ``` As I said, this example only nests once based on what page the string appears on. You can choose to do a deeper nesting if it is required. To access nested strings you simply request by nested name `

`. If strings appeared more than once I grouped them either in a general category or within a category that was shared for the pages that displayed that translated string. In the example above, I also included another example of using pluralized interpolation (covered in part 1). Again, this assumes that you have included the message format interpolator as explained before. More information about syntax for this format can be found [here](https://github.com/SlexAxton/messageformat.js) and [how to include it](http://angular-translate.github.io/docs/#/guide/14_pluralization). ## Alerts, Pop-Ups, and Drop-downs In our application, the majority of the alerts and drop-downs were in controllers and services. Angular-translate provides a number of features to assist in this process allowing you to translate text at any level of the application. Passing a key, or a key and the correct values, to the translate module returns the string associated with that key. You can also get information about the current language if you use the $translate.use() function. This allows you to make queries or select information in your database based on the current language. ```javascript angular.module('sample_app').controller('randomCtrl', ['$translate', 'notification', function ($translate, notification) { 'use strict'; function successCallback (response) { $translate('ALERTS_AND_POPUPS.SAVED').then(function (translatedSavedMessage){ notification.alert(translatedSavedMessage); }); } function failureCallback (response) { $translate('ALERTS_AND_POPUPS.FAILED', {response.number_of_reasons, response.list_of_reasons}).then(function(translatedFailedMessage){ notification.error(translatedFailedMessage); }); } }]); ``` In this example there are no data values passed in the successCallback function, but there are a few passed to the failureCallback. This would assume that these values, and the pluralization rules for the string, are handled in the file of strings. This is not the only way to do alerts as javascript provides many ways to accomplish the same thing, however this is generally how to access the translation features within js code. Drop-downs are a similar issue; there are several ways this could be accomplished. In the case of the following example, this instance of such a problem only had a few values that could easily be stored in the strings file and so we chose to simply make the lookup return the string's key that could be used to look up the correct value based on the current language. ```javascript angular.module('sample_app').controller('SignupController', ['$scope', '$translate', function ($scope, $translate) { 'use strict'; var sizes = [{id: 1, translationTag: "SETTINGS_PAGE.EXTRA_SMALL"}, {id: 2, translationTag: "SETTINGS_PAGE.SMALL"}, {id: 3, translationTag: "SETTINGS_PAGE.MEDIUM"}, {id: 4, translationTag: "SETTINGS_PAGE.LARGE"}, {id: 4, translationTag: "SETTINGS_PAGE.EXTRA_LARGE"}] ... ``` ```html

``` ## Language Selection and User Preference Most of the language selection can be handled by angular-translate. There are extension packages that handle [cookies or local storage](http://angular-translate.github.io/docs/#/guide/10_storages). It can also determine the preferred language from their browser, redirect certain language keys to keys that you have defined and translated, and provides a way to quickly switch between languages by letting you specify a language key. ```javascript //Gets the preferred language from the user's browser var langKey = $translateProvider.determinePreferredLanguage(); //$translateProvider.preferredLanguage('en'); //redirects some language keys to other language keys. $translateProvider.registerAvailableLanguageKeys(['en', 'es'], { 'en_US': 'en', 'en-us': 'en', 'en_UK': 'en', 'en-gb': 'en', 'en-uk': 'en', 'es-mx': 'es', 'es-gt': 'es', 'es-cr': 'es', }); //changing the current language. $translate.use("es"); ``` This function makes it incredibly easy to save a user’s preferred language key and retrieve it on sign in. It also allows you to quickly toggle the language with input from the user. ## Changes in CSS caused by Translation {% include full-blog-image.html src="log_in_english.png" alt="AngularJS Translation English" %} {% include full-blog-image.html src="log_in_spanish.png" alt="AngularJS Translation Spanish" %} When designing an app that is going to be translated into multiple languages, make sure that you account for changes in css. Phrases in one language may be much longer than another and you need to account for this in the design of your app. Sometimes, you may need to change an element in a specific language and this can be accomplished in css with the html language attribute. At the top of your html file there should be an attribute for the language of the document. This attribute can be placed on other elements as well, but it is typically on the starting html element. ```html ``` This attribute can be updated using the following syntax. This should be updated each time you change the language using the $translate.use() function you should also update this attribute. ```javascript $translate.use('en'); document.documentElement.lang = $translate.use(); ``` Once this works properly you can select elements based on the current language attribute. There are a few css selectors that need to be used for this to work in certain browsers so you may want to include both and test to ensure that it works in your targeted browser. Here I select the elements with some class only if the current language is ‘es’. ```css .some-class { width: 25px; } html:lang(es) .some-class html[lang="es"] .some-class { width: 50px; } ``` ## Conclusion Hopefully this article has helped explain and give examples for some of the features of angular-translate. As you go and translate your app don't forget to check and make sure all strings are being translated properly and that the design after translation looks correct. It can be a tedious process but angular-translate helps to keep it organized and functional. Just a reminder, there are many ways to go about translation and this is not a definitive guide on how to use angular-translate. Do your research and remember to ask the correct questions early so you can ensure that you have the best solution for your app.

Translation and Localization with AngularJS

Taylor Smith — 2015-01-05T00:00:00+00:00

As the world grows closer through the internet, more companies need websites that are translated into other languages. Businesses that target other cultures, nationalities, and languages need a way to provide this feature in a way that is responsive and maintainable. There are many guides and blogs online that refer to this as [i18n (internationalization) and l10n (localization)](http://en.wikipedia.org/wiki/Internationalization_and_localization). This article is the first of two posts and will look at common javascript libraries and tools that can be used for translation services. It will also cover some of the features provided by angular-translate, the library that we chose for one of our apps. {% include full-blog-image.html src="welcome-translated-map.jpg" alt="AngularJS Translation - Welcome" %} When deciding how to tackle translation and localization there are many questions that need to be addressed: - Are you starting from scratch and will this be integrated from the start? - Are you translating an existing app? - Will there be language strings stored and used server-side i.e. recurring emails, password reset emails, static dropdown lists stored in a database? - Are there pieces of data or formatting that need to be entered in the middle of text? - If there is concatenated data, does the position of the data change when translated into different languages i.e. "You have 7 unread messages"? - Do users need to be able to quickly switch between languages? - How is language preference stored? Being able to answer these questions is important when selecting a library or package. There are many tools for translating and many ways to go about it. You can do it server-side, client-side, or have a mix of both. These questions can help you to think about what you need and how you want to implement i18n and l10n. When deciding which framework to use I researched a few js based libraries. Since I wanted something that worked well with AngularJS we chose angular-translate, but the following is a little bit about other possibilities. Remember that as you look at these and other possibilities you want to find something that includes the proper tools for your situation. ## What's out there? AngularJS provides some functionality for [i18n](https://docs.angularjs.org/guide/i18n) by allowing different pluralization rules through filters and by allowing users to quickly build custom solutions for string replacement. Custom solutions can be a good way to ensure that everything behaves in the way that you want it to. Obviously, if you build it, you understand what is going on behind the scenes. However, there are also drawbacks to this approach. If you build a custom solution you have to invest time building it. You have to test it to make sure it works. And you have to maintain it. If for example, AngularJS were to change, you would have to make changes accordingly. Also, every feature that you want to add means more time in development and testing. For us it made more sense to use a third party library so that we could focus on our app instead of a translation library. One promising 3rd party library is the AngularJS localization module [angular-l10n](https://github.com/4vanger/angular-l10n). It provides translations in directives or through filters. It uses interpolations, which allow you to insert values in strings. And it even has a locale switching feature. These are fairly standard features for any translation library and this seems to be a strong contender for an AngularJS compatible library. Another popular 3rd party library is [angular-translate](https://github.com/angular-translate/angular-translate). We chose this library for a recent conversion of an existing English application into Spanish for a few reasons. This library has a great organization mechanism and easily integrates into an existing AngularJS application. It too has the ability to interpolate values in strings. It has locale switching, asynchronous loading for string files, and allows you to translate through directives, filters, and their $translate service. It also currently has a larger user base and therefore has more guides and questions answered. We chose this over other libraries because there was a lack of functionality with other libraries and building a custom solution would have required a lot of time to test and develop. There are also many other libraries that are not AngularJS specific including: - [i18next](http://i18next.com/) a generic javascript library. It provides many of the basic features through data tags and jQuery selectors in place of the AngularJS methods mentioned above. - [polyglot.js](http://airbnb.github.io/polyglot.js/) a lightweight library targeted toward backbone and node (has no other dependencies). This was designed by the airBnB team and has some promising features for pluralization and interpolation. - [fnando](https://github.com/fnando/i18n-js) a library that has date and number localization, which are awesome features. But, works with rails applications specifically. - L20N another generic library with support for pluralization and variable replacement. It seems promising but the syntax is slightly more complicated and it uses element renaming, in the same way that AngularJS does, which might cause confusion with AngularJS directives. This is not an exhaustive list and there are certainly other options out there that are targeted to other situations or frameworks. However, most of these can be used with AngularJS on the client side of the application, meaning that for the most part, the back end of your service remains unchanged. There are exceptions to this if you want to save language preferences with user data, which I will discuss in part 2. ## How to use angular-translate? {% include full-blog-image.html src="chalk-translations.jpg" alt="AngularJS Translate chalk" %} The [introduction](http://angular-translate.github.io/docs/#/guide) provided is fantastic. It is very straightforward despite the English translation being a little funny. If you just want to test it out, follow the directions on the getting started section and you can quickly set up a simple translated site. Once you get a feel for the basics there are a few things that helped me to organize our application and take advantage of the library to the fullest. I will introduce a few of these features in this article and will continue part 2 with more features later. ## String Concatenation/Interpolation Generally it is not a good practice to divide strings up into sections to be concatenated dynamically. Consider a dynamic number in this string: > "You have 3 messages" If you were to concatenate it in javascript it would be in this format: ```javascript "You have " + number_of_messages +" messages" ``` The problem with this format is that first, the plurality of the sentence would be wrong. Second, when you send this to a translator they may not understand that this is all one phrase. Translation is tricky and words that can mean different things in different contexts can be misunderstood if the phrase is translated piece by piece. Angular-translate allows you to use variable replacement within strings in the following format: {% raw %} ```javascript "You have {{number_of_messages}} messages" ``` {% endraw %} Now the string can be sent to the translator with the entire context. Also, this format can easily be organized into a file of strings. As for the pluralization we need another step. In order to provide pluralization you need to add the [interpolation-messageformat library](http://angular-translate.github.io/docs/#/guide/14_pluralization) (watch out when including this because the default interpolation syntax may change slightly from double curly braces to single curly braces). This changes the interpolation engine that angular-translate uses and the format becomes: {% raw %} ```javascript { 'MESSAGES_TEXT': 'You have {{number_of_messages, plural, one{one message} other{# messages}}.' } //With the results of setting the number of messages: var number_of_messages = 1; //"You have one message." number_of_messages = 3; //"You have 3 messages." ``` {% endraw %} And for reference if you wanted to use this in context it would be used like so: As a filter {% raw %} ```javascript {{ 'MESSAGES_TEXT' | translate:"{ number_of_messages: '3' }" }} ``` {% endraw %} With the $translate service ```javascript $translate('MESSAGES_TEXT', { number_of_messages: '3' }); ``` Using the translate directive. Keep in mind that any element could be used in place of span. ```html ``` ## Embedded HTML and AngularJS within strings Another issue that was solved using this library was using html within strings. For example, if you have a link to some site and you would rather display some text, you would typically use an a tag with text inside. ```html

Looks like you need to Sign Up!.

``` With angular-translate, using the translate directive we can simply define a string: ```javascript { 'SIGNUP_TEXT': 'Looks like you need to Sign Up!.' } ``` ```html

``` The html will be loaded correctly on translation and will display with the sign up text as the link. This is great because it allows us to send it to the translator and explain that the sentence needs to be translated as a whole, but the link is the only part contained within the `` tags. Or, we could just send the sentence without the tags and decide where to place the tags later based on the spacing or layout of the app. Another issue I faced a few times was dealing with strings that had AngularJS elements or behavior placed around or within them. Luckily this is also solved with the translate-compile directive. Simply include the AngularJS as it was previously on the page and tag the element accordingly: ```html

``` Any AngularJS directives embedded as html in the string will now compile on load of the translation. ## Wrap Up This has been a quick look at what libraries exist for javascript, with a focus on AngularJS, and an overview of a few features of angular-translate. Look for my next article to learn more about angular-translate in particular and remember that translation can be addressed in almost any language or framework. I encourage you to research and find the best option for your application. If you choose to use the angular-translate library look for part 2 to learn more about string organization, alerts, drop-downs, language selection, and css changes.

Do you need an expert in web development? With a team of web development specialists covering a wide range of skill sets and backgrounds, The BHW Group is prepared to help your company make the transformations needed to remain competitive in today’s high-tech marketplace.