Tools

Analyzing performance of the web application with Chrome Dev Tools

2017-05-15 DSP2017, Performance, Tools, Web Development No comments

Introduction

Recently, I attended a training related to ZK framework. One part of that training was quite interesting for me and was related to measuring and monitoring the performance of the web applications. In Chrome Browser, we have Chrome Dev Tools, which can be opened with Ctrl+Shift+I shortcut or ⌘+Shift+I shortcut on Mac. Inside these tools, we have “Performance” tab. We can hit red “record” icon in the upper left corner of the Tools window and start recording performance of the website while loading it, clicking around or whatever situation we want to monitor. After that, we can see a really nice graph.

This graph presents a performance of our application during the time and shows different metrics divided into the different sections like:

  • Loading
  • Scripting
  • Rendering
  • Painting
  • Other
  • Idle

It can help us to find bottlenecks of the performance and critical sections.

Client-side performance issues

As we can see in this example, “Scripting” takes a lot of time so we can assume that client-side of our application slows down its performance. Moments, where application slowed down are marked with red lines on the main chart. We can select this area and investigate it further.

We could find the exact call of the JavaScript method and now we can try to optimize it in the future.

Server-side performance issues

When “Scripting” doesn’t take most of the time, but an application is still slow, we may suppose, that performance problem is caused by the server-side. In case of Java and JVM application, we can use JVisualVM program to monitor performance of our project. It can be subject of the separate article.

In Chrome Dev Tools, we may also switch to the “Network” tab and mark “XHR” sub-tab, which stands for XML Http Request, which are usually AJAX network calls done via JavaScript to the server.

Next, we can review our request and check, which one is slow. We may also review its header and response.

In the “Timing” tab we can take a look at the execution time of asynchronous connection. If it’s really slow, we may start the further investigation on the server-side in the place where this request is called.

Please note, slow XHR connections may be caused not only by inefficient code on the server-side but also by the infrastructure, servers & networking issues. We should isolate pieces of code & perform unit tests to show that it’s a server-side issue. We can also perform end-to-end tests, measure performance and compute average execution time to conclude what is the real source of the problem.

Summary

As we can see, monitoring performance and finding bottlenecks is not an easy task, but Chrome Dev Tools can help us to fix such issues in a really convenient way.

2 cool terminal emulators for Linux

2017-04-30 DSP2017, Linux, Tools 2 comments

There are many terminal emulators for Linux, but two of them acquired my attention.

Yakuake

Yakuake is a terminal emulator, which you can drop down from the top of the screen in any situation. It may look familiar to those who played Quake III, because this game has a very similar concept of the terminal for configuration purposes. It’s very convenient when we want to check something quickly. We can just press F12 do our task and press the same key to close the window.

yakuake - terminal emulator

Tilix

Tilix is another interesting terminal emulator, which is quite similar to iTerm2 for macOS. It has the possibility to create tiles and tabs just like iTerm2. It can be some kind of alternative for Tmux. Moreover, it allows searching through the console what is very useful.

tilix - terminal emulator

Do you know more interesting terminal emulators for Linux or maybe for other operating systems? Share them in comments!

3 Alternatives to Evernote

2017-04-23 DSP2017, Tools 3 comments

Introduction

I’ve been using Evernote for some time for taking longer notes, but it started to annoy me a little bit. The main drawback is lack of the Linux desktop app. I’m using this app on Android phone, Macbook (at work) and on Linux (at home). There are community apps like NixNote2, which is nice, but in my opinion it’s not good enough. Moreover, Evernote seems to have too many features, which distract me and I don’t really use most of them. A few of these features may be really helpful for some use cases, but not for mine. I need simpler & cleaner tool for taking basic personal notes, which is available on all operating systems. I’ve started searching for Evernote alternatives. Below you can find my types worth checking.

Google Keep

It’s nice & quite popular tool from Google with Android app. I started using it before Evernote. It doesn’t have dedicated desktop app, but it has Chrome extension, which behaves almost like a desktop app. It’s great for short & quick text notes, simple hand drawing notes, notes with pictures & even simple voice notes. It’s some kind of replacement or extension for physical yellow sticky notes. When I want to note something like one sentence or keyword quickly and I have only my phone with me, it’s perfect choice. Nevertheless, it’s not so good for a longer notes.

Link: https://keep.google.com

Simplenote

This app is nice, clean & elegant. Moreover, it has desktop apps for all popular destkop & mobile operating systems: Windows, Linux, macOS, Android & iOS. It has less features than Evernote, but it’s sufficient for me. In addition, it easily synchronizes across all devices and allows you to export notes into single *.zip file. It doesn’t have folders/categories, but it has tags, which may be helpful during organizing your stuff. This is my strong personal candidate to replace Evernote. This app is developed by Automattic, a company behind WordPress & other nice tools.

Link: https://simplenote.com

Boostnote

Boostnote is another interesting tool worth checking out. It’s open-source and works on Linux, Windows & macOS. Unfortunately, it doesn’t have mobile & web apps yet. This tool is good for collecting code snippets and markdown notes, what makes it great for software developers. Moreover, you can attach any storage on your disk to this tool and fully control it. For example, you can add storage in your Dropbox account and synchronize it across devices. You can also attach it to your private Git repository and track changes in the notes. Nevertheless it requires additional work like committing & pushing changes to repository. This tool is under development. Maybe it wouldn’t be perfect replacement for Evernote, but it definitely looks promising.

Link: https://boostnote.io

Summary

As we can see there are many tools for taking notes. Sometimes, I also use regular physical notepad, sticky notes & pen, which are perfect when power goes down or you want to have a break from the machines. We don’t have to be sticked to one tool forever.

Transform Vim into efficient IDE

2017-04-16 DSP2017, Tools, Vim No comments

Introduction

Some time ago, I decided to learn Vim. A lot of people are afraid of this editor and they usually don’t want to know anything about it or just learn how to quit it. In my opinion, it’s good to learn it because after mastering the basics, we can work very efficiently. After some time of usage, we may even replace editors like Atom or Sublime Text with Vim. Moreover, Vim is default editor for a few Unix tools like Git, so it’s good to know how to use it when we accidentally open it. In addition, sometimes we have an access only to the terminal (e.g. via ssh) and we need to perform a task on the remote server, so we don’t have any possibility to use editors with GUI. In such cases, Vim is a perfect solution. Last, but not least – if you want to be a real h4x0r, you should know it (or at least its basics) ;-).

Learning basics

Vim is not an intuitive text editor like many others. It needs to be learned. Just like a programming language. There are a few basic things, which you need to know to use Vim:

  • Opening editor: just type vi or vi filename to open file.
  • Basic modes: interactive (enter it with i key), visual (enter it via v key), read only (default – go back to this mode via Esc key). You can also use Esc key to cancel any kind of operation.
  • Navigation: to navigate in the document, we need to be in read only mode and instead of arrow keys, we use h (left), j (down), k (up), l (right). Note that these keys are close to each other in a row on the keyboard. Such setup may be even more comfortable than arrow keys.
  • Saving changes in file: to save file, type :w.
  • Quiting: To quit vim, type :q.
  • Quiting without saving: :q!.
  • Quiting with saving: :wq.

In my opinion, the best way to learn Vim basics is to use vimtutor application. Just open terminal and type vimtutor. It will open a text file with Vim tutorial inside Vim and you can follow instructions in this file to learn how to use this editor.

You can also use other resources like:

Efficient navigation and file editing

Thanks to various key bindings, Vim allows you to navigate & edit files very quickly. E.g. you can jump between words with w key. You can also combine different key bindings. E.g. d is for deleting text. When you combine d & w (dw) you can delete single word. This “Vim language” can be a subject of the separate article, so I won’t explain it in details in this article. It’s good to go through tutorials and learn this editor as you use it.

Personal configuration

You can customize Vim and keep its configuration in .vimrc file located in your home directory.
Below, you can find my configuration with comments. I copied it from somewhere and modified a little bit.

set clipboard=unnamed       "Enable clipboard
filetype plugin indent on   "Enable indent plugin
syntax enable               "Enable syntax coloring
syntax on                   "Turn syntax coloring on
:color desert               "Set desert syntax coloring
set nocompatible            "Allow Vim-only settings even if they break vi keybindings.
:filetype on                "Enable filetype detection
set incsearch               "Find as you type
set ignorecase              "Ignore case in search
set scrolloff=5             "Number of lines to keep above/below cursor
set smartcase               "Only ignore case when all letters are lowercase
set number                  "Show line numbers
set wildmode=longest,list   "Complete longest string, then list alternatives
set fileformats=unix        "Use Unix line endings
set smartindent             "Smart autoindenting on new line
set smarttab                "Respect space/tab settings
set history=300             "Number of commands to remember
set backspace=2             "Use standard backspace behavior
set hlsearch                "Highlight matches in search
set ruler                   "Show line and column number
set formatoptions=1         "Don't wrap text after a one-letter word
set linebreak               "Break lines when appropriate
set autoindent              "Auto indent based on previous line

                            "Prepare tab/space indent settings
set tabstop=4               "Set Tab width to 4
set shiftwidth=4            "Indents will have width of 4
set softtabstop=4           "Set the number of columns for tab
set expandtab               "Expand tabs to spaces

execute pathogen#infect()

Plugin manager

We can enhance Vim by adding additional plugins. There are a few plugin managers for Vim. I personally like pathogen because it’s quite easy to install and easy to use.

Useful plugins

I use 3 plugins right now:

  • nerdtree (adds sidebar with list of files and directories)
  • tagbar (adds overview of the currently edited file with navigation like list of methods, attributes etc. and works for different programming languages)
  • ctrlp (adds very fast file search)

Summary

Below, you can see my setup with nerdtree & tagbar opened. As you can see, Vim can be very powerful and customizable editor & can make our work more efficient. It has a lot of features. Nevertheless it’s not easy to learn and we have to spend some time to learn how to use it. I think, the best approach is to learn the basics, start using it and then learn rest of the stuff we need during the time. Of course, it has drawbacks like lack of default debugger, steep learning curve and so on. On the other hand, I still think it’s worth to learn it. There are also languages with command line debuggers, so you can combine Vim with Tmux and have everything you need on one screen. I hope you’ll find my tips helpful and you’ll be encouraged to give this editor a try. It’s definitely not a tool for newbies, but I suppose you are not one of them ;-).

Adjusting Look & Feel of IntelliJ IDEA and Android Studio on Ubuntu

2015-03-28 Linux, Tools, Ubuntu 3 comments

Introduction

In contrast to MS Windows, default installation of IntelliJ IDEA, Android Studio and other JetBrains IDEs, in my opinion, doesn’t look good in Ubuntu with Unity. Unfortunately, adjusting look of my favorite IDE is a common problem right now and it was reported to JetBrains issue tracker. Luckily, we can perform a few tweaks, to improve its look & feel ourselves.

Enabling HUD

Some Java applications don’t have Head Up Display (HUD) enabled by default. The same problem occurs in IntelliJ IDEA. I’ve described that in article about software for common users on Ubuntu. HUD is characteristic element for Unity environment and it’s similar to Apple OS X. I think, it’s useful and allows to have more space on the screen. In addition, I wanted my IDE to behave in the same way as other applications. In order to enable HUD, we have to install additional software:

sudo add-apt-repository ppa:danjaredg/jayatana
sudo apt-get update
sudo apt-get install jayatana

Hint: We can skip this step if we’re using different Windows Manager than Unity (e.g. Gnome).

Font fix

IntelliJ IDEA has problem with font anti-aliasing on Ubuntu. In order to resolve that problem, we need to install Font Fix for Open JDK.

sudo add-apt-repository ppa:no1wantdthisname/openjdk-fontfix
sudo apt-get update
sudo apt-get install openjdk-7-jdk

Preparing run script

To finalize font fixing process, we need to prepare additional shell script, place it in the bin/ directory with the IDE and run IntelliJ IDEA with that script. Below, I present source of my scripts for IntelliJ IDEA and Android Studio. We can create scripts for other JetBrains IDEs (e.g. PyCharm) in the same way.

run-idea.sh

#!/bin/sh
# change to your location
IDEA_HOME=/home/piotr/Development/java/idea-ce
export JAVA_HOME=/usr/lib/jvm/java-1.7.0-openjdk-amd64

# Note: Can modify $IDEA_HOME/bin/idea{,64}.vmoptions
# instead of setting here.
# "-Dawt.useSystemAAFontSettings=on" seems worse to me
# "-Dsun.java2d.xrender=true" makes fonts darker
export _JAVA_OPTIONS="-Dawt.useSystemAAFontSettings=lcd \
                      -Dsun.java2d.xrender=true \
                      -Dswing.aatext=true \
		      -Dsun.java2d.pmoffscreen=false"
# Having this set makes menu font size smaller (wtf?)
export GNOME_DESKTOP_SESSION_ID=this-is-deprecated
# unset GNOME_DESKTOP_SESSION_ID
exec $IDEA_HOME/bin/idea.sh "$@" 

run-studio.sh

#!/bin/sh
# change to your location
ANDROID_STUDIO_HOME=/home/piotr/Development/android/android-studio
export JAVA_HOME=/usr/lib/jvm/java-1.7.0-openjdk-amd64

# Note: Can modify $ANDROID_STUDIO_HOME/bin/studio{,64}.vmoptions
# instead of setting here.
# "-Dawt.useSystemAAFontSettings=on" seems worse to me
# "-Dsun.java2d.xrender=true" makes fonts darker
export _JAVA_OPTIONS="-Dawt.useSystemAAFontSettings=lcd \
                      -Dsun.java2d.xrender=true \
                      -Dswing.aatext=true \
		      -Dsun.java2d.pmoffscreen=false"
# Having this set makes menu font size smaller (wtf?)
export GNOME_DESKTOP_SESSION_ID=this-is-deprecated
# unset GNOME_DESKTOP_SESSION_ID
exec $ANDROID_STUDIO_HOME/bin/studio.sh "$@" 

Configuring fonts & appearance

I wasn’t satisfied by default font configuration of IntelliJ IDEA and Android Studio, so I updated it a little. In my opinion, it looks better after such operation. You can see my configuration on the screenshots below. Screenshots are from Android Studio, but configuration can be the same for all JetBrains IDEs. Of course, I also prefer Darcula theme.

android_studio_font_01

android_studio_font_02

Finishing configuration & system reboot

When we performed all of the tasks mentioned in the steps above, we need to perform reboot of the system. After that, our IDE and its fonts should look fine. That’s it. I hope it will be helpful for you.

5 essential tools for serious software development in a team projects

2013-03-27 Software Development, Tools 3 comments

Introduction

Daily usage of tools mentioned in this post is quite obvious for me right now, but using them wasn’t obvious while I was working alone or when I was involved only in freelance or private projects.
Whilst we don’t work in a group, we don’t have to care about lot of things, but when we work in a team (even small), we have to organize and optimize our work very well in order to obtain its high quality, work efficiently and make life of future developers of our code and co-workers easier.

1. Good IDE or editor

Intellij IDEA
Having good Integrated Development Environment or editor is very important during software development. When we master keyboard shortcuts and useful features of our environment, we can increase speed of work and debugging. Choosing environment depend on the projects and programming languages which we are using on daily basis. Eclipse is a good choice, when we develop code in Java language, but we can use it for creating C/C++ code, PHP and web development. Good alternative for Eclipse is IntelliJ IDEA (only Community Edition for Java developers is free right now). Android developers should strongly consider using Android Studio, which is based on IntelliJ IDEA. JetBrains provided IDE for Python developers as well. It’s called PyCharm and its Community Edition is free. Obvious choice for developers using Microsoft technologies will be MS Visual Studio. Despite IDEs, we can also consider using advanced editors like Sublime Text. After proper configuration, it can be very nice tool for web development and JavaScript development (including node.js). Some Ruby developers use Sublime Text as well. In general, it is worth considering while we write our programs in scripting languages. In addition, it is available on MS Windows, Linux and Mac OS. Sublime Text is just an editor, so it does not have code debugger like Eclipse or MS Visual Studio, but we can add this functionality for JavaScript language by installing Sublime Web Inspector plugin. Some people also use Notepad++. I like this editor, but I wouldn’t use it for software development due to lack of important features. In my opinion it’s good for editing single files or performing some simple operations on text or code. Of course, Linux geeks should not forget about exclusive Vim editor, but use of this software must be learned before using.

2. Source control system

branching-illustration@2x
When we work in a team, we need to have source control system. Uploading code to server by different people or sending code via e-mails is not efficient and unprofessional. That’s why we should use Git, which is distributed version control system. While using such tool, we can be always up to date with our code and we can easily track changes in the project, create branches for several tasks and so on. We can also rollback changes, when something will go wrong. Git clients are available for all popular operating systems. When we are not familiar with command line interface, we can use tools like TortoiseGit. On daily basis, the most important commands are: clone, pull, commit and push. Good practice is to create branch for development version of the application and treat master branch as a release version of the application. In addition, we can create separate branch for each issue we are working on and when we finish our task, we can merge our branch with development branch. It’s very helpful and allows us to increase stability of the project. If we want to know all advanced features of Git and master this environment, we should read “Pro Git” book which is available on-line for free.
Another, older source control system is SVN. Well known GUI client for SVN on MS Windows is TortoiseSVN. SVN is not distributed version control system like Git and does not have such amount of features, but it’s worth to know it, because it is used in some projects today for some reasons. Yet another source control system, which is less famous than SVN and Git, is Mercurial. Like mentioned systems, despite command line interface, it also has client with GUI called TortoiseHG available for Windows OS.

3. Continuous integration tool

ci-diagram

Continuous Integration is a software development practice where members of a team integrate their work frequently, usually each person integrates at least daily – leading to multiple integrations per day. Each integration is verified by an automated build (including test) to detect integration errors as quickly as possible. Many teams find that this approach leads to significantly reduced integration problems and allows a team to develop cohesive software more rapidly.

Quote of Martin Fowler.

Continuous Integration is also explained in details on Wikipedia.

jenkins_logo

One of the common tools used for Continuous Integration is Jenkins. In simple words, developers commit changes to the project and afterwards Jenkins download source code from the repository and generates a fresh build of the project (compiled application). Builds can be scheduled and run automatically, but we can also run our builds manually. When something will go wrong, we receive an information that build is broken, unstable or cannot be compiled. In such case, developer who broke the build (pushed changes, which caused such situation) is responsible for repairing the build. We have to take care about the configuration files, because sometimes Jenkins may analyze our source code differently than our local compiler (because of specific settings or different operating system) and it may cause build failure. While using Continuous Integration, we don’t have to send compiled projects via e-mail or in other inconvenient way. We can just run the build. After that operation, Quality Assurance Engineers and Project Leader will always have access to the newest version of our project.
When we don’t want to use Jenkins, we can consider adapting alternative Continuous Integration service called Travis, which is integrated with GitHub. Yet another continous integration and build server is Bamboo from Atlassian.

4. Code review tool

PeerReview

Code review as a systematic examination of the source code plays important role in the quality of the project. Different programmers have different background and point of view. We all make mistakes and it’s easier to fix them when we have good support. There are tools which can help us to make Code Review. One of them is Review Board written in Python, which can be associated with Jenkins. After running Review Board build, we can send e-mails including current revision changes to our team in order to keep everyone up to date. There are also other tools, which we can use. Phabricator can be an interesting tool, but I don’t have any experience with it yet. Nevertheless I know, that it is written in PHP and was developed at Facebook. Gitlab is also worth considering during conducting code reviews. Moreover, we can omit using additional tools and perform code reviews by browsing code and talking with another developer verbally, which is also good practice. To summarize this section, Code Review lets us to know what is going on in all projects of our team and, what is more important, helps us to increase quality, maintainability and robustness of our code and projects, which are used by the final users.

5. Issue tracking system

jiratour_workflow_visualizeworflow

Good Issue Tracking System is also important tool used during the development of the project. It lets you track tasks, bugs and changes in the projects. We can create simple workflow in our project, which will increase quality of the software and also keep you informed about progress of the project. This is important in situations when several people work on the same application, so we can divide and choose tasks wisely in such a way, that people won’t disturb or “interfere” themselves during the work. In addition, project leader will be informed about the progress of the work. There are many issue tracking systems, but one of the best and well known is Jira. In addition, Jira allows you to work with projects in Agile methodology, so you can define backlogs, sprints and create good workflow in the project. Despite of these features it has so called Confluence, which is basically internal project Wiki, where you can create your knowledge base and notes.

Summary

All these five elements can help you to make great applications and projects. It may seem, that using them is a lot of additional work, but in fact, they are really useful and can help you to work faster, better, increase quality of the project, integrate code, identify and track the bugs, track tasks, issues and keep the project up to date for everyone who is involved in it. When we take care of good project organization, the only possibility is awesome outcome.

Place it by Brezi – generating screenshots of mobile and web apps in realistic environment

2013-02-02 Design, Mobile, Tools No comments

placeit-by-brezi

Some time ago I discovered nice tool, which allows you to create screenshots of mobile and web apps in realistic environment. It’s quite useful. Especially for promotional purposes and in the case, when our graphic design skills are not good enough.

Check this out! http://placeit.breezi.com/