Hosting a Static Site on Amazon S3

Amazon S3 has very cheap pricing model and a huge bandwidth that makes it perfect for serving static web sites. I will try to summarize what I have done here because it is the 4th time I have doing the same thing and I still need to go over a few different tutorials. I will also show how to change name servers for your domain for Bluehost and Godaddy.
Here a brief overview of what will do:

  • Jekyll: For generating our static web site. 
  • Feeling Responsive: Jekyll theme we will be using. You can choose a different theme from here.
  • Forklif: We will create a MacOS X app to upload changed files to S3. You can use any program you like but you will definitely need one. 
  • Markdown PRO: Markdown editor we will be using to edit our pages and blog posts. Any text editor is ok but Markdown PRO has live preview capability. 

Creating S3 Buckets

Login to your Amazon Management Console for bucket creation. Select S3 service and create two buckets for you website. For example if your web site name will be www.mywebsite.com, create buckets as mywebsite.com and www.mywebsite.com. You can leave Region option as default but if you can guess you can select a location closer to your potential customers for slightly more faster response time.
Open properties of mywebsite.com, we need to change 2 settings there.

First, expand “Static Website Hosting” and select “Enable Website Hosting”. Enter “index.html” for “Index Document”. You can leave “Error Document” option as empty but you can use any page as error page just be sure that you actually create that page. Do not forget to save

Redirect all requests to another host name

Redirect all requests to another host name

Seconds, expand “Permissions” tab and click on “Add Bucket Policyand enter the following, do not forget to change mywebsite.com to your own bucket name.

{
	"Version": "2012-10-17",
	"Statement": [
		{
			"Sid": "AddPerm",
			"Effect": "Allow",
			"Principal": "*",
			"Action": "s3:GetObject",
			“Resource": "arn:aws:s3:::mywebsite.com/*"
		}
	]
}

Save bucket policy.

Open properties of www.mywebsite.com, we will just forward this bucket to our mywebsite.com.
Expand “Static Website Hosting” and select “Redirect all requests to another host name” and save. Thats all for this bucket.

Redirect all requests to another host name

Redirect all requests to another host name

We have done with S3 settings. Now we need to setup name server side of things in both Route 53 and our domain name registerer.

Creating Route 53 Records

Open Route 53 Management Console and select “Hosted Zones” and than “Create Hosted Zone”. Do not enter www part, just enter mywebsite.com. You can leave comment section empty. Press “Create” button to create the zone record.

Create Hosted Zone

Create Hosted Zone

It will create two record sets, one for name servers with type “NS” and a “SOA” record. You will need name server names while you are changing name servers for your domain later, so write them down or better leave the tab open.
Press “Create Record Set” button to create a new record. Select Type A and Alias. Click on Alias Target and select your S3 Endpoint from the combobox. Leave others as default and press “Create”.

Add one more record. This time, write “www” to Name field and select Alias Target that points to www.mywebsite.com. After that you should have 4 record sets as shown in following screenshot. Of course name servers for your domain may be different.

Changing Bluehost Name Servers

Login to your Bluehost account and open “Domains” tab. Select the domain name you like to manage and select “Name Servers” tab from right. Enter the Amazon Route 53 name servers you have noted above.

It may take several hours for new settings to be applicable.

Changing GoDaddy Name Servers

Login to your Godaddy account. Under “Products” expand “Domains” and click on “Manage” next to domain name you like to manage.

Under Settings, Nameservers click on “manage” link. This will open a page where your can enter name servers from Route 53. Select “Custom” and enter 4 name servers displayed in Route 53 panel.

After that refresh the page and new name servers should be displayed in the page. It may take several hours for new settings to be applicable.

Synchronizing Files with Amazon S3

Open Forklif application and add a new connection for your S3 account:

Forklift S3 Connection

Forklift S3 Connection

Open your local “_site” folder and Amazon S3 remote folder side by side.

Click inside the tab showing your local files and select File->Sync to…. This will open synchronization window:

 

Synclet

Synclet

For the first synchronization you can exclude filter. In later synchronizations you can exclude .css, js files because they are a part of theme and will not change. There is an option that allows you to exclude non-changed files but in my case it did not worked reliably. Jekyll may be modifying the update date of files at every run. Unless you have a huge site non of these are actually an issue.

Chose “Save as Synclet” option because you will need to run it every time you add a new post or make a change on your site. Give it any name you want and save it under “Applications” folder. You can open it like any other MacOS X application. It will automatically detect files to be synched and upload all of them to S3 bucket.

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)

File Upload with Selenium

With Selenium 2 uploading a path is very easy if the page is using standard file upload mechanism of web. Some old pages may still be using Flash or another plugin based technology. In other words, you should have some <input> field defined as follows.

<input type=”file” id=”upm-upload-file” name=”plugin” size=”38″>

You can automate an upload using just 2 lines of code.

private void deployAddOnImplementation(String pathToJarFile) {
//        driver.findElement(By.id("upm-upload-file")).clear(); //if we send clear, we get "invalid element state: Element must be user-editable in order to clear it." exception.
        driver.findElement(By.id("upm-upload-file")).sendKeys(pathToJarFile);
        driver.findElement(By.cssSelector("button.button-panel-button.upm-upload-plugin-submit")).click();
}

Only problem was, I had tried to send clear command to file input field which caused, “invalid element state: Element must be user-editable in order to clear it”, exception. It was not needed for my case because I am sure input field will be always empty. I have removed the parts not directly related with file upload. I am using this method to automatically upload our JIRA plugins to my test server. Just press Command+Shift+A, write name of test method like “deployWorklogPRO” and Enter. Latest version of the plugin will be deployed which in turn save some time for me.

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)

Time Zones in JIRA

JIRA allows every user to specify his own timezone through user profile since version 4.4.

JIRA Time zones

JIRA Time zones

If you look at the above diagram at any time we have to consider 3 different time zone. Theoretically users computer/browser’s time zone may also be different than user’s time zone defined in profile page. In that case JIRA will inform user about this mismatch and request user to fix. If he does not any REStFul API that accepts time zone as milliseconds since 1970 convention will fail. As a best practice web service APIs should accept time related information in textual format. But this also has formatting problems and makes using API a little more difficult but it is better than processing wrong information.

When an action is performed by a user, timestamp is converted to JIRA’s own timezone setting and recorded in the database. Later when needed this timezone is also converted to requesting user’s (possibly a different user than who performed the action) timezone. This cause everyone to see different time for the same event. This is the same for work log entries. Lets see with an example. Following two screenshots are for the same work log entry.
In the first one we see how it is displayed for a user with time zone “(GMT+02:00) Istanbul”:

In the second one we see how it is displayed for a user with time zone “(GMT-11:00) Midway”:

As you can see they see the same work log entry as if it is performed on different days. For the perspective of the user actually it is performed on different days. But the question is, “On which day we should place this work log entry for a timesheet?”
Since timesheets are mostly used for cost or billing calculations the day on which a work is performed is very important. For example some companies may be paying more for works performed on weekends. If a user did not performed the issue on the weekend it should not be reported as performed on weekend just because of time zone of the user requesting the timesheet report is different from time zone of work log author.

In Worklog PRO Timesheet for JIRA we display this work log on the same day work log author reported. Not with the time zone of the user requesting the timesheet or not with the time zone of the server. This is also compliant with how timesheets are reported by another popular JIRA Timesheet tool. But these two plugins are radically different in terms of how work logs are stored in JIRA.
Lets start with the easy one, Worklog PRO Timesheet. It just stores work logs with JIRA’s own convention so its work logs are compliant with JIRA. Later if you decide to uninstall the plugin all work logs will be as if they are entered from JIRA’s own work log entry dialog.
Other timesheet solution stores work log entries normalized with JIRA Server’s time zone. As a result if you look at the same work log with this tools own “work log panel” you will see different date and times than it is displayed by JIRA’s own “work log panel”. Recommended solution is to disable JIRA’s own work log panel. But later if you decide to uninstall the plugin, you will need to re-enable it and it will continue to show incorrect dates forever.

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)

Using Selenium Chrome Driver on Mac OS X

Update (26/06/2015)
Previously I have written a function which waits until a specific element is available on the page, doWhenAvailable. I have find out Selenium has already a similar feature build-in. Its element search functions could wait until an element is available on the page. It can be activated in @BeforeClass method:

driver. manage( .timeouts( ). implicitlyWait(TIMEOUT_TIME,  TimeUnit.SECONDS) ;
//doWhenAvailable(driver, By.id( “view_profile”), WebElement::click); 
driver.findElement(By.id(“view_profile”)).click() ;

 

It took several attempts for me able to use Chrome Driver by using the instructions from its website and I have decided to publish a step by step tutorial.

Selenium allows you to run your tests using several different browsers Chrome, Firefox, InternetExplorer and HTMLUnit. HTMLUnit is not a real browser it is just a browser simulator written in Java, it can execute JavaScript too. Some settings you have to use for each one is different but for all of them you have to start by adding main Selenium dependency to you project. This is the common part.

Creating Maven Project

I have created a new maven project using following pom.xml but you can just add selenium dependency to your own pom.xml if you want. Here is the pom.xml file I have used for my test project:

 

<!--?xml version="1.0" encoding="UTF-8"?-->
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemalocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelversion>4.0.0</modelversion>
    <groupid>com.deniz.jira</groupid>
    <artifactid>JIRASeleniumTests</artifactid>
    <version>1.0</version>
    <name>JIRASeleniumTests</name>
    <dependencies>
        <!-- This is only required dependency. -->
        <dependency>
            <groupid>org.seleniumhq.selenium</groupid>
            <artifactid>selenium-java</artifactid>
            <version>2.46.0</version>
        </dependency>
        <!-- Selenium does not enforce any unit testing framework and
        it does not have any unit testing features, like asserts so
        we are using JUnit for this. But this is optional and
        you do not need to use any unit testing library if you want. -->
        <dependency>
            <groupid>junit</groupid>
            <artifactid>junit</artifactid>
            <version>4.11</version>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupid>org.hamcrest</groupid>
            <artifactid>hamcrest-all</artifactid>
            <version>1.3</version>
            <scope>test</scope>
        </dependency>
    </dependencies>
    <build>
        <!-- Using Java 8's Lambda expressions makes code simple.
        Because you will be using a lot of handler to asynchronous methods.
        But this is not required. -->
        <plugins>
            <plugin>
                <groupid>org.apache.maven.plugins</groupid>
                <artifactid>maven-compiler-plugin</artifactid>
                <version>3.3</version>
                <configuration>
                    <source>1.8
                    <target>1.8</target>
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>

WebDriver Specific Initialization

For newcomers it is best to stick with Firefox. It is easier to setup. After installing Firefox browser to you system just create a new FirefoxDriver and start running your project. There are no extra step required.

For Chrome in addition to Chrome Browser you have to install Chrome Driver too. You can download Chrome Driver from Chromium web site and put it in a suitable place in your system. Location is not important because we will be providing location of it through a system property to our test execution.

In my case I have put chromedriver executable to Applications folder. So for my JUnit test I have use following setting:

System.setProperty("webdriver.chrome.driver" ,  "/Applications/chromedriver");

Writing Actual Test Codes

We have to initialize our WebDriver instance, since I am using JUnit I have done it in @BeforeClass so it is automatically run before my test cases. You can also do this before every test case using @BeforeTest but it will be a lot slower because you will most probably do extra initialization than shown below. For example logging-in to web site.

@BeforeClass
public static void init() {
    driver = new ChromeDriver(); //init chrome driver
    //driver = new FirefoxDriver(); //uncomment to use Firefox
    driver.get("http://localhost:8080”); //url of website we like to test
    driver.manage().window().setSize(new Dimension(1600, 900)); //resize browser window
    //login to web site
}

You will most probably want browser to automatically closed after your tests are completed. Add driver.quit() to your JUnit teardown method. If you do not each execution will left a new browser window open.

@AfterClass
public static void teardown() {
    driver.quit();
}

Nowadays nearly all web applications will be loaded asynchronously. That mean when page is loaded the element you like to test will not be on the page, it will be generated by a JavaScript code. This makes writing test a little more difficult, you have to wait until related element is created by JavaScript code. I have writing a small helper function and reused it in my test code. It waits until given element (Specified using By) is available on the page and execute the given code block (Consumer) when the element is available:

public   static   void   doWhenAvailable( WebDriver driver ,  By by ,  Consumer consumer )   { 
     ( new   WebDriverWait (driver,  TIMEOUT_TIME ) ).until( ( WebDriver drv )   -&gt;  driver.findElement( by )  !=  null ) ; 
    consumer.accept( driver.findElement( by ) ) ; 
 }

 

Using this method with Java 8 is very readable. For example below code waits until an element with id=“view_profile” is available on the page and when it is available just clicks on it.

doWhenAvailable(driver, By.id("view_profile"), WebElement::click);

Following code performs more complex operation when requested element is available. It wails until <select id=“ts_month_picker_selector” …..> select element is available on the page and select option element which has a value of “Jan”:

doWhenAvailable(driver, By.id("ts_month_picker_selector"), (element) -&gt; {
    Select select = new Select(element);
    select.selectByValue(String.valueOf(“Jan"));
});

You will mostly need to perform other asynchronous operations inside the callback and this will result into callback hell. I am still looking a way to promise style of chaining asynchronous operations.

Tips and Tricks

  • Give every HTML element a unique id field. This will allow you to specify elements easily in your test code.
  • Create a reusable small test library specific to your application. For example you should encapsulate logging-in to test system in a method and reuse that method from every test case.
  • Try to avoid time based waits with Thread.sleep() or any other sleep as much as possible. Because they will increate time to run your tests. But you will probably need this for some AJAX based code. In my case I need it for dynamically filled comboboxes which fills its content as you type. Otherwise you may get StaleElementReferenceException because your driver will be using a previous instance of the same visual element not the one on the page. Instead of sleep you may allow StaleElementReferenceException to occur and re-fetch the element automatically. You can check details from here.
  • At the end of the test if test fails take a screenshot automatically. I will explain it in another post. 
VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)

Preview Issue Description in JIRA

In start a work day by loggin in JIRA. At the end of the day I usually have 10+ tabs are open in the browser just for JIRA. Most of the times I only look description of the issue, I do not need issue to stay in the browser.
I have developed a free JIRA plugin to solve this problem. Everywhere inside (navigations, dashboard, inside other issues etc.) JIRA, if you hover mouse on an issue link, it displays description of the issue in a popover window. Preview contains all the formatting of JIRA, including images, tables, source code highlights etc. It is lighweight and fast way to browse issues.
You can download the plugin from Atlassian Marketplace.

JIRA Issue Description Preview

JIRA Issue Description Preview

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)

Automate Native to Ascii Conversion with Gulp

All of my recent projects use Javascript and Java together. Increasing I’m switching from Maven to Gulp for automation. I have now perform native to ascii conversion with gulp instead of maven and native2ascii tool of JDK.

var gulp = require("gulp");
var n2a = require("gulp-native2ascii");
var shell = require("gulp-shell");

gulp.task("n2a", function () {
    gulp.src("src/main/resources/i18n/reminders*.properties")
        .pipe(n2a({reverse: false}))
        .pipe(gulp.dest("src/main/resources/i18n/"));
});

gulp.task("proguard", shell.task([
    '../../proguard4.11/bin/proguard.sh @proguard.conf'
]));
VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)

Component Versions JIRA Plugin

Component Specific Vesions is a JIRA plugin that allows you to define which versions are valid for which versions, and enforce this during issue operations. For more information please visit http://jiraplugins.com

VN:F [1.9.22_1171]
Rating: 10.0/10 (1 vote cast)

ShopaHolic

ShopaHolic iPhone uygulaması ile Limango, Markafoni ve Trendyol kampanya sitelerindeki kampanyaları yakından takip edebilirsiniz. Tek bir arayüz üzerinden kampanyaları takip edip fiyat karşılaştırması yapabilirsiniz. İsterseniz anahtar kelimeler tanımlayıp uygulamanın size haber vermesini sağlayabilirsiniz. Kampanya’dan ürün sayfasına kadar ulaşabilir isterseniz “Satın Al” fonksiyonu ile ürünü ilgili sitenin kendi arayüzü üzerinden satın alabilirsiniz.

 

VN:F [1.9.22_1171]
Rating: 10.0/10 (2 votes cast)

Resolution and Status Colors JIRA Plugin

 

Resolution Colors Plugin enables issues to be shown with different color depending on their resolution and Status Colors. Why do you need this, aren’t just the Status Colors enough? Unfortunately, no. Because unlike most other issue management systems, a ‘Resolved’ status does not show that the issue is solved. An issue may be resolved because assignee may have decided not to implement it with specifying a “Won’t Fix”, “Cannot Reproduce” or “Incomplete” resolution. So while checking resolved issues, you have to pay special attention to the ‘Resolution’ field.

So what this plugin does is that; this plugin makes it easier to highlight issues according to their resolution type for issue reporters or verifiers. But if you want, you can use this plugin in a way that it only highlights issues based on their status.

Resolution Colors

Initial Configuration

After installing plugin you have to do some initial configuration to activate plugin’s features. The first thing you should do is adding a new custom field of type ‘Resolution Color’. Although the name of this field is ‘Resolution’ it can also highlight issues based on their Status.

  1. From issue administration page, scroll down to ‘Fields’ section and click on ‘Custom Fields’ link. List of your existing custom fields will be displayed. Select ‘Add Custom Field’ from top right of the page.

Resolution Colors

  1. A pop-up dialog box will be opened. Select ‘All’ and write ‘Resolution’ to search field. ‘Resolution with Color’ custom field type will be displayed as shown in the following figure. Select it and click ‘Next’.

Resolution Colors

  1. Enter a name for the new custom field. This name will be displayed as the column name in the issue list. You can enter any description you want, it won’t be displayed to end users. Finally click on ‘Create’ and your custom field will be created.

Resolution Colors

  1. You have to select, on which screens this custom field will be shown. You have to select every screen that contains resolution field, and you want issues to be colored according to their resolution.
    Resolution Colors
  2. Your custom field is now ready to use in issue detail pages. But you have to configure the issue list pages too.
    Resolution Colors
  3. Open the issue list and click on ‘Columns’ on top right of the page. Write ‘Resolution’ to the search field and two Resolution fields should be displayed. ‘Resolution’ is JIRA’s build in ‘Resolution’ field and ‘Resolution with Color’ is our new custom field. De-select ‘Resolution’ and select ‘Resolution with Color’ field and click on ‘Done’. If you change your systems default column layout, every user will start with that layout. But if they have already an active column layout they will need to add ‘Resolution with Color’ field to their column layout as well.

Resolution Colors

Note that, you can even add this column to your issue lists in dashboards to make them colored.

List Views

For issue list to be colored you have to add ‘Resolution Color’ custom field to the column list. Without it, there won’t be any coloring in issue list view. You may add this field to default list view columns so that it becomes active for all users by default.

Issue List View

You can also colorize issues in dashboard widgets by adding the same ‘Resolution with Color’ field to columns shown in the dashboard.
Coloring in Dashboard

Issue Detail View

Depending on plugin’s settings different parts of the issue details view are highlighted. Please see ‘Plugin Settings’ section.

Issue Details View

Plugin Settings

You can use the plugin without adjusting any settings. It comes with reasonable defaults. But if you want further customization, or your JIRA Status and Resolution fields are highly customized you may want to tune Plugin’s Settings. There are two settings page, one for ‘Resolution Colors’ and the other for ‘Status Colors’.

Resolution Colors

Plugin assigns its default colors to JIRA’s built in ‘Resolution’ options. If you have custom ‘Resolution’ options you may also assign colors to them. You can also change predefined colors for build in ‘Resolution’ options. Be careful while selecting a resolution color, each device (Projector, Printer, Screen) may display colors differently and this may cause issue details to be unreadable if you select a color that is close to black (normal text color), or blue (link color). So in general, avoid dark colors. For example if you want to use red try to select a very light red.

In addition to the color, you can also select which part of the issue detail view to be highlighted.

  • Header : All issue details fields are colored.
  • Resolution : Only the resolution field is colored.
  • None : Coloring is turned off.

Plugins Settings:Resolution Colors

Status Colors

If you need to differentiate issues based on their status you have to configure Status Colors too. The key is that Resolution Colors have priority over Status Colors. For resolved issues their Resolution Color is used. This is why there is no color setting for “Resolved” status in ‘Status Colors’ configuration page. There is a special case however, the plugin allows you to use ‘Status Color’ of Closed status instead of ‘Resolution Color’ if you set it from ‘Closed Status Coloring’ configuration option.

Closed Status Coloring

  • Use Status Color : For closed issues their Status Color is used instead of Resolution Color.
  • Resolution Color : For closed issues their Resolution Color is used.

Plugin Settings:StatusColors

If you want to use this plugin to highlight issues based only on their status field, you can. You have to specify the same color to every Resolution option and assign different colors to Status options.

 

VN:F [1.9.22_1171]
Rating: 10.0/10 (1 vote cast)

Similar Issues JIRA Plugin

 

Similar Issues Finder Plugin targets to minimize number of duplicate issues within JIRA. Each duplicate issue takes precious time of its reporter, assignee, management and QA teams without any significant benefit to the end product. For a 500 employee organization saving 1 minute of each person a day will save nearly 3 months each year. Even a single duplicate issue may easily cause an hours work.

Similar Issues Plugin

Similar Issues Overlay

Similar Issues Plugin performs a real-time background search on the JIRA to find out similar issues as soon as you start to write summary field of an issue. Found similar/duplicate issues are displayed below the summary field. It also highlights matching terms within the result list so that it is easier to see why two issues are similar. Similarity search is also performed in the summary and description of issues. Best matches are displayed on the top. In addition to summary of the issue, issue type and issue key are also displayed. If issue is resolved it’s key is displayed with strikethrough style.

Similar Issues Overlay

As you can see from the above screenshot, issue keys are a link to actual issues and you can open them directly in the new browser tab.

Similar Issues Tab

While working on an existing issue, we sometimes need quick access to similar issues and Similar Issues Plugin could also be a help here. Plugin adds a “Similar Issues” tab to issue’s tab list and when you click on it, issues similar to currently viewed issues are displayed. Similar issues list is not loaded until you open the relevant tab, so plugin does not cause any delay in loading the page.

Similar Issues Tab

Similar Issues Settings

Actually this plugin is an ‘install and forget’ type of plugin; you can start using it immediately after its installation without a single configuration. But if you need to tweak how the plugin works and how overlays are displayed, you can access plugin’s setting panel from plugin administration menu of JIRA.

Plugin Settings

Configuration Option Description
Similarity Mode There are two alternatives. Loose and Strict. Strict mode requires all search terms to exist in similar issues, so it returns much less result than Loose mode. Loose performs more loose similarity check. Loose mode is set as default.
Theme Currently there are two alternatives, light and dark. Light is the default and matches the color schema of JIRA. Similar results overlay takes more attention with the dark mode due to the contrast with JIRA’s look and feel. Light mode is set as default.
Display Mode There are two modes, overlay and inline. In overlay mode similar issues are displayed in a popup just below the summary field but on top of following fields. In inline mode, similar issues are displayed between summary and fields following it. All fields are pushed down to show similar issue list. When you finish editing summary fields similar issue list is hidden in both mode. Overlay mode is set as default.
Number of Issues to Display Default value is 5. This value could be between 3 and 10. It shows how many issues will be listed in the similar issues list.

If you have any problem while using the plugin, you can always enter a support request on http://jira.denizoguz.com/browse/SIFJ or contact me on Atlassian Answers.

You can also download this manual as PDF.

 

VN:F [1.9.22_1171]
Rating: 10.0/10 (1 vote cast)