vhandit

My team just started  building a new project about finance. There are something new with us rather than other processes happened before. Here is we didn't have requirements/user stories about the project yet and we needed to work together with another team in this time. Our product manager (PM) decided to have a camp to collect the ideas in order to getting started as well as make the communication between the teams. Firstly, our PM gave an introduction about the project to all members. Then, we decided to split and focus on four topics that we needed to discuss about them. They are: - General information: working agreements between two teams included coding convention. - Data model: structure of data. - GUI design: user interface and user experience (UX). - GUI technical framework: how data model and GUI can be worked together. The target of each topics should be given an overview and can be shown why and how to work with chosen approach. Finally, we separated all memb...

Barcamp Saigon is one of my most expected events of the year. This year, it took place at RMIT university. As usual, it brought many useful topics to the community. Here is all topics that I have attended. Scale it! - Lars Jankowfsky Lars is founder of 8bitrockr.com How do we make a decision correctly? It is hard to know that until we try and measure it. He gave an example about how good an app was. And, most of people thought that the app with nice user interfaces is good at the first look. But it is not correct because it is only true until we try to use it, even the nice GUI app sometime is not good at UX, functionalities, etc. The key of success for working in team is collaboration. We can not only base on the experience of members likes: "In my opinions| As I know.... this is the best way..bla..bla.." but we should test it. Therefore, manually testing as well as automation testing is more and more necessary nowadays. "Don't think, just try...

I had a chance to join this event today. It was great! Agile Tour Vietnam  2015 in HCMC For who don’t know Agile Tour, the following is the basic information from http://at2015.agiletour.org/ “Agile Tour has been a way for enthusiasts of Agile to spread the word about Agile practices and to share their experiences, both good and bad, within their local community. These non-profit events occur every year in October and November in several cities.” Many valuable topics were shared to the community. The topic I like best is “Software Craftsmanship” from Mr. Sandro Mancuso. “Software craftsmanship” is an approach to software development that emphasizes the coding skills of the software developers themselves (wikipedia). I would like to share with you my notes about it: Agile is actually “ a quick feedback loop”. For example, we review the user stories after 2 weeks, we will get feedback; we apply TDD, we will  get feedback immediately, etc. Scrum, a Agile framew...

AngularJS already supports the built-in validation with text input with type email. Something simple likes the following: <input name="input" ng-model="email.text" required="" type="email" /> <span class="error" ng-show="myForm.input.$error.email"> Not valid email!</span> However, I used a text area and I wanted to enter some email addresses that's saparated by a comma (,). I had a short research and it looked like AngualarJS has not supported this functionality so far. Therefore, I needed to build a custom directive that I could add my own validation functions. My validation was done only on client side, so I used the $validators object. Note that, there is the $asyncValidators object which handles asynchronous validation, such as making an $http request to the backend. This is just my implementation on my project. In order to understand that, I supposed you already had experiences with ...

1. Clarity - The content should be simple, easily to follow, short words rather than long one. - Use the  active voice,  positive words rather than complaint one.  2. The "One Thing" rule - Keep the message focused. The another thing should be written in another email. 3. Be political - The message is in more the two paragraphs, it should be reduced. - Use "Please" and "thank you" - Use phrase that states you are not sure of something: I think that..., It is possible..., The optimal solution... 4. Meaning Subject Bad: Important. Please read Better: Meeting set for tomorrow at 10AM - Need a room 5. Think before you write - Don't send e-mails in haste - Avoid using context (background information) 6. Understand you Audience - What they like to hear - See your writing from their perspective 7. Sign-off like a professional - Add signature block with appropriate contact information 8. Make sure no errors with spelling and g...

In the beginning days, I have practiced TDD (Test Driven Development) using JUnit, I approached that I should test methods belong to a class. For example: I have a class with some methods: public class A{ public void method1(){ } public void method2(){ } } And then, I wrote some test methods to check the corresponding ones, for example: public class ATest{ @Test public void testMethod1(){ .... assertTrue(...); ..... assertEquals(...); } @Test public void testMethod2(){ } } After that, I know that a test method (ex: testMethod1) should just only test one thing, so I decided to write more methods for each case. It looks like the following: @Test public void testMethod1_When_Case1(){ .... assertTrue(...); } @Test public void testMethod1_When_Case2(){ .... assertEquals(...); } However, it was not a really good approach because it seems that I just focused on test the functionality of the method of the class. With the TDD approach, I knew that I s...

I have a text area where I can enter a SQL statement. The text "SELECT TOP 1" is used at the begining of the sql statement as a default prefix that can not be removed. In order to archive this functionality, I found three options: 1. Use an inputMask and build a pattern for the entered text. We can use the prefix inside the text area: http://jsfiddle.net/SEXAj/2130/ 2. Create an javascript event listener on event "input" and calculate to prevent the prefix is removed http://jsfiddle.net/sarbbottam/TUc94/ 3. Use another html tag like "div"/"span" that contains the prefix and calculate the suitable position + Tag "span": http://jsfiddle.net/4YzZy/ + Tag "div": http://jsfiddle.net/215b34fs/ I chose the 3rd approach with tag "div" because it's the most easiest solution and suitable for me at that monment. References: [1].  http://stackoverflow.com/questions/24846041/how-do-i-add-a-default-text...

For example, I have a program with an Animal abstract class and two sub-classes Dog and Bird. I want to add new behavior for the class Animal, this is "fly".  Now, I face two approaches to solve this issue: 1. Adding an abstract method "fly" into the class Animal. Then, I force the sub-classes should be implemented this method, something like: public abstract class Animal{ //bla bla public abstract void fly(); } public class Bird extends Animal{ //bla bla public void fly(){ System.out.println("Fly high"); } } public class Dog extends Animal{ //bla bla public void fly(){ System.out.println("Cant fly"); } } 2. Creating an interface with method "fly" inside. The same issue to an abstract class, I force the classes these implement this interface should have a method "fly" inside: public interface Flyable{ public void fly(); } public class Bird implements Flyable{ //bla bla public void fly(){ System.out.pr...

1. Single Page Application (SPA) - Single page application versus   Traditional multi-page - " Single-Page Applications (SPAs) are Web apps that load a single HTML page and dynamically update that page as the user interacts with the app. SPAs use AJAX and HTML5 to create fluid and responsive Web apps, without constant page reloads. However, this means much of the work happens on the client side, in JavaScript " src:  https://msdn.microsoft.com/en-us/magazine/dn463786.aspx - " Web browser JavaScript frameworks, such as AngularJS, Ember.js, ExtJS and React have adopted SPA principles " src:  https://en.wikipedia.org/wiki/Single-page_application 2. Directive and Data Binding Expression <!DOCTYPE html> <html lang="en-US"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <body> <div ng-app=""> <p>Name : <input type="text" ng...

Either using broadcast approach or shared service is enough to solve the problem about communicating data between two controllers. Using broadcast can update immediately the child controller data when performing an event on parent. Code example on  Codepen  : http://codepen.io/vnnvanhuong/pen/ojXJRw?editors=101

We wanted to build a dynamic form that has some types of elements such as text field, text area, label, date picker, combobox, file uploader, etc. Beside that, the form is dynamic because basing on the provided configuration data, it should render our expected GUI. We conducted a  research with two options: building our own directives or using a third-party directives. - Approach 1: using a third-party directives  + Google keyword: " build dynamic forms directives + angular third party "  + This idea met our idea: " http://blog.backand.com/build-dynamic-forms/ ", but it's not free to use.  + This 3rd-party was possible:  http://schemaform.io/ Schema form hello world app:  http://plnkr.co/edit/7Oqxxl?p=info - Approach 2: building our own directives We chose this approach because it looks more simple than using "schema form" 3rd-party and we thought that we can confidently handle it. Example:   http://codepen.io/cavoirom/pen/meJBxv?edit...

Have you ever faced to a problem that your tests work well on Chrome or Firefox, but don't do anything on Internet Explorer after launching the browser? I have met this issue. Even when my tests have no problems with IE8 but they do not interact with the browser which is upgraded one - IE11, no clicking, no entering anymore. And I got an exception. These below maybe are one of the solutions: 1. Make sure the zoom is 100% (press Ctrl + 0) 2. Uncheck Enable Protected Mode , and set lowest security level too. 3. Add your address to trust sites.

I searched from somewhere and found that a lot of people says a basic concept for implementing this feature looks like below: HTML code: <div id="parent">  <div id="child">  </div> </div> And, CSS: #parent{   position: relative;   overflow:hidden; } #child{   position: absolute;   top: -1;   right: -1px; } However, I had a lot of grand-parents in my case and the above code didn't work. Therefore, I needed an alternative. I presumed that my app uses Boostrap and AngularJs, maybe some CSS from them affects mine. I didn't know exactly the problem, but I believed when all CSS is loaded into my browser, I could completely handle it. www.tom-collinson.com I tried to create an example to investigated this problem by Fiddle . Accidentally, I just changed: position: parent; to position: static; for one of parents -> the problem is solved. Look at my code: <div class="modal-body dn-placeholder-parent-positi...

Our team maintained a project that was used a quite old web technology  JSP . Our project likes a web portal that can contain some other smaller projects, I called it a module. Now, our customers want to add a new module into it. We met a problem is the current projects can't be testable and hard to maintain because both the logic and GUI are mixed together by using JSP and JSTL. It was really a messy project structure. Therefore, we didn't want to continue this approach. Testing is very important, as well as a good structure for maintenance. We would like to apply MVC pattern for testable and maintainable ability purpose. Yeah, that was actually time for changes. Our project structure can't be testable and has poor structure. We listed out some options: Refactoring all current modules -- terrible approach, too much efforts, too risky due to a lot of modules. Using MVC just for the new modules with Servlet for C ontroller, Java class for M odel and JSP for V i...

Suppose that we have a list of employees. Everytime, we want to add new employee into this list, the name of the employee will be generated with the following rules: - the name of the new one is set to " [originalname] 1 " - in case the name already exist, " [originalname] 2 " is used, and so on. Here is my code snippet by Javascript: var employees =[ {id: 1, name: 'name'}, {id: 2, name: 'name 1'}, {id: 3, name: 'name 2'}, {id: 5, name: 'name 4'} ]; var commonUtils = { isExistName: function(_name, _collection, _prop) { for(var i = 0; i< _collection.length; i++){ if(_collection[i][_prop].localeCompare(_name)==0){ return true; } } return false; }, generateNewName: function(_name, _collection, _prop){ var i = 1; var searching = true; while (searching) { var newName = _name+ " " + i; if (!this.isExistName(newName, _collection, _pro...

Changes is constant, software development as well. Do you know the development of mobile phones, starting from Motorola DynaTAC (1973) to Iphone 6 (2014). How about the software? The new versions are released with new improvements. Software is not always able to automatic repairing. Therefore, software should be changed frequently and we need responding to changes. source:  http://answers.microsoft.com/ In working software today, how about customers' collaboration or requirements? We ignore the fact that many customers don't know what they want . We ignore the fact that when they know what they want, they can't describe it . We ignore the fact the even when they can describe it, they often a proposed solution rather than a real need . We ignore, that a lot of customers g ive us a solution but not the problem . source:  http://accelerateddevelopment.blogspot.com/ And, in working process, earlier founded bugs are cheaper. Manifesto for Agile ...

"Creates a virtual table whose contents (columns and rows) are defined by a query. Use this statement to create a view of the data in one or more tables in the database. For example, a view can be used for the following purposes: - To focus, simplify, and customize the perception each user has of the database. - As a security mechanism by allowing users to access data through the view, without granting the users permissions to directly access the underlying base tables. - To provide a backward compatible interface to emulate a table whose schema has changed." [1] Beside that, our team used view in order to improve the performance of our web apps when a database has a very complicated relationship between its tables by using ORM Frameworks such as Hibernate. Example code: --create CREATE VIEW placeholders AS SELECT EMPKEY AS empkey, CONNUMB AS connumb, EMPNBR AS empNbr, ACEEMPN AS empFirstName, ACEEMPFN AS empLastName, EMPNAM AS empFullName, ...

Author : Mr. Khoa Le - Scrum Master at team Vision, Axon Active Vietnam. 08.2015

I have a table that is displayed a list of competence groups. When I click on a competence group, it will display a table that contains a lot of criteria belong to the competence group. Each times I click on a competence group, a "loading" icon is displayed while waiting for all criteria is fully displayed. <div id="loading" style="display: none;"> <div></div> <div></div> I tried to write a Selenium test to make sure this behavior is covered. I saw that the loading icon element is always available on DOM tree because I just used Jquery to handle its displaying. Beside that, the loading icon is appeared dynamically and quickly disappear afterwards. It is hard to checking the visibility on GUI of loading icon. By normal way that I frequently used, the code looks like: public boolean isLoadingIconDisplayed() { List<WebElement> loadingIcons = driver.findElements(By.id("loading")); if(!loadingIcons.isE...

In my previous post about building a regex to check a text without special characters but allow German and French . I met a problem that the unit test works fine on my machine using Eclipse, but it was fail when running on Jenkins' build job. Here is my test: @Test public void shouldAllowFrenchAndGermanCharacters(){ String source = "ÄäÖöÜüß áÁàÀâÂéÉèÈêÊîÎçÇ"; assertFalse(SpecialCharactersUtils.isExistSpecialCharater(source)); } Production code: public static boolean isExistNotAllowedCharacters(String source){ Pattern regex = Pattern.compile("^[a-zA-Z_0-9_ÄäÖöÜüß áÁàÀâÂéÉèÈêÊîÎçÇ]*$"); Matcher matcher = regex.matcher(source); return !matcher.matches(); } The result likes the following: Failed tests: SpecialCharactersUtilsTest.shouldAllowFrenchAndGermanCharacters:32 null A guy from stackoverflow.com says: "This is probably due to the default encoding used for your Java source files. The ö in the string literal in the J...

Special characters such as square brackets ([ ]) can cause an exception " java.util.regex.PatternSyntaxException " or something like this if we don't handle them correctly. I had met this issue. In my case, my customers want our application should allow some characters in German and French even not allow some special characters. The solution is that we limit the allowed characters by showing the validation message on GUI. For an instance, the message looks like the following: "This field can't contain any special characters; only letters, numbers, underscores (_), spaces and single quotes (') are allowed." I used Regular Expression to check it. For entering Germany and French, I actually don't have this type of keyboard, so I referred these sites: * German characters: http://german.typeit.org/ * French characters: http://french.typeit.org/ Here is my code: package vn.nvanhuong.practice; import java.util.regex.Matcher; import java.util...

Sometimes, I import a existing Maven project into Eclipse and I get some compile errors related to "pom.xml", "facet version of Web", and  so on. It was really frustrating me because I even cleaned, built and updated the project many times but the errors still occurred. I accidentally found the following steps to resolve this issue but honestly I still don't know why. Step 1 : Delete the project that met the compile errors in Eclipse, but don't delete it on disk. Step 2 : Open the project (by Windows Explorer if you use Windows) and remove  file/folder ".classpath", ".settings" and ".project" . Step 3 : Import the project back into Eclipse. ---^0^--- Maven is a build automation tool used primarily for Java projects. Eclipse is an integrated development environment (IDE).

Bill Gate had said that “I choose a lazy person to do a hard job. Because a lazy person will find an easy way to do it.” In my opinion, that remark is so true in some cases. My team has tried to apply integration tests for our projects. Firstly, we had meeting to figure out what problems we met. Then, we decided to create a new project that is similiar to the current one and we called it a prototype project. Yeah, I and some members were reponsile for it. I spent a lot of time and took a lot of efforts for coppying the current project because its domain logic was really complicated. What a boring task! I smelt a rat and felt too lazy. At that time, I thought that I need a change. I discussed with others: "Why don't we just create a branch of curent project and work on it?".  We didn't need spending time for coppying anymore. Just forked it and modified on it. Therefore, it was really a good solution. Leave your comments about that. ;)

"Holy shit" Have you ever fixed a feature that has a lot of issues? I had met this situation. I would like to tell you my process to deal with it. My problem: Fixing the wrong validation after hitting the F5 on a page. Step 1 . List out all of issues that I met on this feature. Yeah, after hitting F5, I got: - The validation dialog could not be closed. - The data of the page could not be reverted the previous data. - I wonder why it automatically called the new select event on the combobox on the page? Step 2 . Fix the problem: issue by issue, simple to complicated. - Try to close the dialog -> solved - Try to revert the previous data -> solved - Try to fix the last issue -> I was so confused about this case. I spent haft day find the root caused but I could not solve it. I decided go to step 3. Step 3 . Tell to other members about my problems. Discussing for the win! There are six people in the discussing. We had a lot of guessing, a lot of inve...

I use the calendar Primefaces component with timeOnly and timeZone attributes for using only hour format (HH:mm). Like this: <p:calendar id="xabsOvertimeTimeFrom" pattern="HH:mm" timeOnly="true" value="#{data.dateFrom}" timeZone="#{data.timeZone}"/> We can convert the value of #{data.dateFrom} from GMT/UTC time zone to local, conversely, from local time zone to GMT/UTC time zone. Here is my functions: package vn.nvanhuong.timezoneconverter; import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Calendar; import java.util.Date; import java.util.TimeZone; public class TimeZoneConverter { /** * convert a date with hour format (HH:mm) from local time zone to UTC time zone */ public static Date convertHourToUTCTimeZone(Date inputDate) throws ParseException { if(inputDate == null){ return null; } Calendar calendar = Calendar.getInstance(); calendar.setTime(inputDate); int ...

I have got an issue with downloading process on IE 8. This browser blocks my automatic-download functionality on my app so that I could not work with my test case any more after that. In my case, I didn't care about the file is downloaded or not, I just focus on the result after downloading process finished successfully. Therefore, I found a solution to ignore this process so that I can work normally. I use Primefaces, here is the remote command to trigger the download process <p:remoteCommand name="cmdGenerateDocument" actionListener="#{logic.onGenerateDocument}" update="xrflDocumentCreationPanel" oncomplete="clickDownloadButton();"/> The following is my test case: @Test public void shouldUpdateStep6ToWarningIfStep1IsValidAfterFinished(){ MainPage mainPage = new MainPage(); waitForLoading(mainPage.getDriver()); EmployeeDetailPage empDetailPage = new EmployeeDetailPage(); waitForLoading(empDetailPage.getDriver()); e...

I want to keep the position of an element likes a component on right side when I scroll down because of a very long content. Please take look at the code by visit the following link: http://jsfiddle.net/p3unbmdy/ Javascript function: $("#container").bind('scroll', function() { var fromTop = 50; var scrollVal = $("#container").scrollTop(); var top = 0; if ( scrollVal > fromTop) { top = scrollVal - fromTop; $('#rightElement').css({'position':'absolute','right':'1em','top' :top+'px'}); } else { $('#rightElement').css({'position':'static','top':'0px'}); } });