Technical

Use Babun as a terminal in PhpStorm

In order to Use Babun (or other Cygwin clones) as a terminal in PhpStorm and make it open Cygwin command in specified directory on windows then follow this easy steps:
For the PhpStorm that I’am using (v10.0.4) in Windows 10, open File > Settings… > Tools > Terminal,  replace the shell path with :
D:\tools\.babun\cygwin\bin\env.exe CHERE_INVOKING=1 /bin/bash.exe

You may need to restart PhpStorm after this change.

I’m using Babun which installs the Cygwin in:
D:\tools\.babun\cygwin

Connect to a server using SSH

Use this command to connect to a server using a specific port;

ssh username@host -p 1234

You can also connect using an SSH private key:

First secure the key;

chmod 600 my-key

Then use it to login:

ssh -i my-key my_login@host -p 12345

Design for Android

What screen to choose

Android comes shipped in a lot of devices; each with a different screen resolution and density. As a developer you don’t have to support all those devices and versions, but, make your HTML5 app work on the most used devices in the market.

The first step is to check the dashboards  at Google dev docs. As you can see the  The “Normal” screen size wins the highest market share, so this is a good start; whenever you begin a design (in photoshop/illustrator) use the “normal” screen size dimensions! 320px by 480px (same as iPhone 3GS).

Data collected during a 7-day period ending on January 8, 2014. Any screen configurations with less than 0.1% distribution are not shown.

Drawable folders in the res

I found that the best approach is to have 4 drawable folders; each one for a different density.

Table 1. Configuration qualifiers that allow you to provide special resources for different screen configurations.

Screen characteristic Qualifier Description
Size small Resources for small size screens.
normal Resources for normal size screens. (This is the baseline size.)
large Resources for large size screens.
xlarge Resources for extra large size screens.
Density ldpi Resources for low-density (ldpi) screens (~120dpi).
mdpi Resources for medium-density (mdpi) screens (~160dpi). (This is the baseline density.)
hdpi Resources for high-density (hdpi) screens (~240dpi).
xhdpi Resources for extra high-density (xhdpi) screens (~320dpi).
nodpi Resources for all densities. These are density-independent resources. The system does not scale resources tagged with this qualifier, regardless of the current screen’s density.
tvdpi Resources for screens somewhere between mdpi and hdpi; approximately 213dpi. This is not considered a “primary” density group. It is mostly intended for televisions and most apps shouldn’t need it—providing mdpi and hdpi resources is sufficient for most apps and the system will scale them as appropriate. If you find it necessary to provide tvdpi resources, you should size them at a factor of 1.33*mdpi. For example, a 100px x 100px image for mdpi screens should be 133px x 133px for tvdpi.
Orientation land Resources for screens in the landscape orientation (wide aspect ratio).
port Resources for screens in the portrait orientation (tall aspect ratio).
Aspect ratio long Resources for screens that have a significantly taller or wider aspect ratio (when in portrait or landscape orientation, respectively) than the baseline screen configuration.
notlong Resources for use screens that have an aspect ratio that is similar to the baseline screen configuration.

How Android Finds the Best-matching Resource

Some notes;

  • I deleted the “drawable” default folder because I use drawable-mdpi folder.
  • I found myself using this quick shortcut command, the --force is for forcing imagemin to delete files outside the current directory: grunt build --force && cd.. && cordova run android && cd yo && grunt serve

Start with MDPI then scale to other DPI’s

Starting with the smallest and most limited screen size first, you can make sure your interface and content will fit, removing any features that aren’t completely necessary to the core purpose of the app. Starting with an average mobile handset size screen first (320 x 480) at the MDPI resolution. Read more

 

Cordova ignores screen orientation lock

Permanent aliases in bash

For errors installing ruby or gems please check this post answer on stackoverflow.com

  1. Add those lines to your .bashrc
    # Aliasses
    if [ -f ~/.bash_aliases ]; then
    . ~/.bash_aliases
    fi
  2. Create the file .bash_aliases in the root dicretory and put aliases you want on it. For example:
    # Rubygems
    alias gem='D:/tools/ruby/bin/gem'# Mailcatcher
    alias mc='D:/tools/ruby/bin/mailcatcher.bat'

 

Installing mailcatcher in windows

When working in PHP you come accross situations where you need to see the current emails sent using PHP’s mail function. For this you need a a mail catcher.

The MailCatcher runs a super simple SMTP server which catches any message sent to it to display in a web interface. Run mailcatcher, set your favourite app to deliver to smtp://127.0.0.1:1025 instead of your default SMTP server, then check out http://127.0.0.1:1080 to see the mail that’s arrived so far.

Follow those steps to get you ready:

  1. Install the ruby and rubygems as described here
  2. Install mail catcher
    gem install mailcatcher
  3. Add an alias (check also how to permanently add aliases in bash)
    alias mc='D:/tools/ruby/bin/mailcatcher.bat'
  4. Edit php.ini settings near [mail function]
    SMTP = 127.0.0.1
    smtp_port = 1025
    sendmail_from = aidrissi@example.com
  5. Restart Wamp server
  6. Now run this command to open a browser and listen for the mails!
    mc -b

    This will open a browser window with mail catcher admin.

Errors?

I had an error with utf-8  characters and fixed it by the following:

First stop the ruing mailcatcher from the browser (the quit button) then downgrade mailcatcher to the version without error with character encoding:

gem uninstall mailcatcher
gem install mailcatcher -v 0.5.12

Ruby and Rubygems in Windows vs Babun

After some trial/error I figured out that babun doesn’t support ruby/gem installed with pact.. So I to fix this I did
Remove the ruby pact packages

pact remove ruby
pact remove rubygems

The next commands must be done in the normal windows Command Prompt!
Download the Ruby [Windows-based installer](http://rubyinstaller.org/) (which installs also rubygems), during install choose to add it to PATH, so wehn you run

ruby -v
ruby 2.2.3p173 (2015-08-18 revision 51636) [x64-mingw32]

It shows the version number
Add an alias to the new installed gem

alias gem='D:/tools/ruby/bin/gem'

Now if you run

gem -v
2.4.5.1

You get the version outputed.
Last step is to install the [Ruby Development-Kit](https://github.com/oneclick/rubyinstaller/wiki/Development-Kit)
Enjoy 🙂