Misha Reyzlin

Front-End Developer Salary in Israel, Survey.

2011-10-30T00:00:00+00:00

Around four months ago I have chatted with a friend of mine about the current state of web development industry in Israel. Of course, as it is an important subject, we have also discussed the average salary offers we were both getting. (We are both front-end developers, that is HTML, CSS, JavaScript and all the surroundings, such as templating engines, web pages loading optimization, cross-browser quirks etc.) Well, two heads are good, but 50 heads are better.

So I have conducted a little survey with a short set of questions (I know it’s not too comprehensive, but it was put together rather quick).

These are the questions that were asked:

Your current salary in New Israeli Shekel
Your hourly rate in USD for hour-based projects
Sex
Years of experience in the field (HTML, CSS and JavaScript)
Full years of age
Level of expertise in JavaScript

I have put the level of expertise in JavaScript as a separate question, as from experience this is a rather important point that has significant impact on the final salary (this has proved to be true).

30 professionals have filled the form, the survey was anonymous, all answers were optional.

So, here’s some of the information:

The white circles represent the developers who have participated in the survey.

Current Salary, in NIS
Hourly rate, in USD
Years of exprience
Level of expertise in JavaScript

Average age is 28.5, most of the applicants are male (only 2 female developers participated). Average salary is around 17500 NIS.

19% of the applicants are freelancers who don’t have set monthly salary. 81% are employees.

All of the applicants have worked more than 2 years in the field: 42% have more than 5 years of experience. 19% have 3-4 years of exp. 14% have 4-5 years of exp. 6% have 2-3 years of exp.

As you may have guessed, more years of experience and the better expertise in JS results in the highest salary: the average salary among these who has more than 5 years of experience appears to be 21,800. Among these devs 70% have indicated their knowledge of JavaScript as “professional” (can build web application that will work fast and will be easy to maintain).

This is a bit dated already, well, the times they are a changin’. But in conclusion, if you know JS and you’ve got about 5 years of experience you shouldn’t ask for anything less than ₪22,000. One US Dollar costed 3.43 Israeli shekels at the time of writing, so 22,000 was about $6400 back then (don’t forget that’s before the taxes!).

The interactive graphic is built with excellent data-driven animation library d3.js and the source for the above can be found here.

Fix HTML5 elements loaded with jQuery AJAX

2011-06-09T00:00:00+00:00

If you are using HTML5 like all the cool kids do, you are probably using the HTML5 shiv built by amazing webdev community in order for new semantic elements, such as <header> to be stylable in IE < 9.

This is great, but what if you generate your HTML5 content with JavaScript (getting your content using ajax for example)? Whenever you will be using innerHTML in order to apply that HTML to the page (jQuery uses innerHTML in its .html() method, which is used in many-many other methods internally), your HTML5 elements will not be attached and styled properly. Meet Innershiv.

In one of the recent projects I’ve used jQuery and there was going a lot of asynchronous loading in different places on the same page, so I wanted to find a general way of filtering all incoming content. Well, it turns out that jQuery has a great convenience method with property that allows you to do just that. Here’s the code I’ve used in order to apply innershiv in IE < 9 (you have to call $.ajaxSetup() before all of you AJAX code is run):

// if IE < 9, cure innerHTML for HTML5 elements in AJAX response
// for the reference regarding jscript versions see http://en.wikipedia.org/wiki/JavaScript#Versions
// at this point you have jQuery and innerShiv code loaded
/*@cc_on
  @if ( @_jscript_version < 9 ) 
  $.ajaxSetup({
    dataFilter : function(data) {
      return innerShiv(data);
    }
  });
})
  @end
@*/

UPD. As Matt Curtis points out in his comment in case you are fetching data of other type than HTML (such as JSON or XML) you will break this data by processing it with innerShiv function. So you’d better only process HTML, here the bits you’d need to change for that:

dataFilter : function(data, type) {
  // if there is no type assume it's html
  return ( type === 'html' || !type ) ? innerShiv ( data ) : data;
}

Sources

http://paulirish.com/2011/the-history-of-the-html5-shiv/
http://jdbartlett.github.com/innershiv/
http://api.jquery.com/jQuery.ajaxSetup/
http://en.wikipedia.org/wiki/JavaScript#Versions

Sort WordPress categories by the recency of their updates

2011-04-20T00:00:00+00:00

One of our recent clients has a nice blog, where homepage shows most recent post from each of the categories. This is done pretty simple in WordPress:

$categories = get_categories();

foreach($categories as $category ) {

  $post_args = array(
    'orderby' => 'post_date',
    'order' => 'DESC',
    'showposts' => 1,
    'category__in' => array($category->term_id),
    'caller_get_posts'=>1
  );

  query_posts( $post_args );

  while ( have_posts() ) : the_post();
    # I have actual post's code in a separate template
    get_template_part( 'post' );
  endwhile;
}

But there also was an interesting requirement: categories have to be sorted by the time of update of latest posts. So that the lately updated category will always be shown first and so on. As I haven’t found a way to create a custom sorting option to use with get_categories (which accepts orderby => option, but is limited to the pre-defined parameters: id, name (default), slug, count, group) I hacked something to make it work as required.

So, the idea is the following: loop through categories, find the latest post in each on of them, store the date when this post was updated, sort categories by these dates and then output posts in the right order.

Here’s the code I’ve used to do that:

# Get all the categories
$categories = get_categories(array(
  'type' => 'post',
  'child_of' => 0,
  'orderby' => 'name',
  'order' => 'ASC',
  'hide_empty' => 1,
  'hierarchical' => 1,
));

# I store sorted categories array as a global, as I need to use it
# across different templates: to make a nav in header.php and to actually 
# loop through the posts in index.php
$GLOBALS['catsArray'] = array();

# Loop through categories
foreach($categories as $category ) {

  $post_args = array(
    'orderby' => 'post_date',
    'order' => 'DESC',
    'showposts' => 1,
    'category__in' => array($category->term_id),
    'caller_get_posts'=>1
  );

  # Retrieve latest post 
  query_posts( $post_args );

  # Cache latest posts data
  # date in Unix format to sort by, post's category (current iteration)
  # and the post itself
  # this is done in order not to run loop twice
  while ( have_posts() ) : the_post();
    $GLOBALS['catsArray'][$category->slug] = array(
      'date' => get_the_time('U'),
      'category' => $category,
      'post' => $post
    );

  endwhile;

  # Resetting query
  wp_reset_query();

}

# Compares two arrays by their "date" field
function compareDates($a, $b) {
  if ( $a['date'] == $b['date'] ) {
    return 0;
  }

  return ($a['date'] < $b['date']) ? 1 : -1;
}

# Sort using defined function
usort($GLOBALS['catsArray'], "compareDates");

Sources

http://codex.wordpress.org/Function_Reference/get_categories
http://codex.wordpress.org/Function_Reference/query_posts
http://php.net/manual/en/function.usort.php

First steps in Nesta (and Ruby)

2011-04-15T00:00:00+00:00

Note: this article was updated to work with Redcarpet 2, that is incompatible with first version.

In order to use custom content processing libarary (I wanted to try out new markdown lib from github, Redcarpet) I needed to extend Nesta’s FileModel’s to_html method, like so:

module Nesta 
  class FileModel 
    def to_html ( scope = nil )
      html = convert_to_html @format, scope, markup
    end

    def convert_to_html ( format, scope, text )
      @markdown = Redcarpet::Markdown.new(
                    Redcarpet::Render::HTML,
                    :no_intra_emphasis => true,
                    :lax_html_blocks => true,
                    :autolink => true, 
                    :space_after_headers => true
                  )

      case format
        when :mdown
          @markdown.render( text )
          # Maruku.new( text ).to_html
        when :haml
          Haml::Engine.new( text ).to_html(scope || Object.new)
        when :textile
          RedCloth.new( text ).to_html
        end
    end
  end
end

That allows me to parse content files with Redcarpet instead of default markdown parser, Maruku. But what if I also want to use :redcarpet as a filter in HAML? In order to do that, I needed to add new HAML filter:

module Haml::Filters::Redcarpet
  include Haml::Filters::Base

  @markdown = Redcarpet::Markdown.new(
                Redcarpet::Render::HTML,
                :no_intra_emphasis => true,
                :lax_html_blocks => true,
                :autolink => true, 
                :space_after_headers => true
              )

  def render ( text )
    @markdown.render text
  end
end

We can now use :redcarpet filter in HAML like so:

%p
  :redcarpet
    # Here goes markdown content

Another useful note: @page.metadata() method is exposed, i.e. you can specify any key in the top of your pages and you’ll be able to access that data in your templates like so:

- if @page.metadata('foo')
  %h1 @page.metadata('foo')

It’s important to note, that if you are going to retrieve values from @page in layout, guard yourself with ifs, because there are pages like 404, that are using layout but don’t have associated @page model with them, – in that case you wont have @page defined, and calling @page.method will break.

Sources

https://github.com/gma/nesta/blob/master/lib/nesta/models.rb
https://github.com/gma/nesta/issues#issue/21

Re-compiling PHP to be used with FPM and Nginx

2011-04-07T00:00:00+00:00

If you are just like me, not really a server-side guy and you’ve suddenly got a need to recompile PHP that you have on your server (in my case, when I first configured my virtual server I followed some tutorial and didn’t pay too much attention to what modules I’ve compiled with, except for php-fpm, that was needed to make things work fast. And so I found myself in a situation where I was getting the following error:

imagecreatefromstring() [function.imagecreatefromstring] No JPEG support in this PHP build

So, as I found out the best approach to make things work properly was to recompile PHP with explicit JPEG support.

But, since I wanted also to not break anything else, I needed a list of other options that PHP was built with. So my short notice is exactly about that – I’ve spent some time looking for a solution and it was actually super easy.

Run php -i in your terminal (which is an equivalent of <?php phpinfo(); ?>) but it prints to the command line output. Then among the first lines of output you’ll see Configure Command => with exact options PHP was built previous time. It looks like this:

Configure Command =>  './configure'  '--enable-fastcgi' '--enable-fpm' '--with-mcrypt' '--with-zlib' '--enable-mbstring' '--with-openssl' '--with-mysql' '--with-mysql-sock' '--with-curl' '--with-jpeg-dir=/usr/lib' '--with-gd' '--enable-gd-native-ttf' '--without-sqlite' '--disable-pdo' '--disable-reflection'

Also, if you are recompiling from PHP 5.3.0, where support for FPM needed to be patched in to PHP 5.3.6 (and probably anything higher than 5.3.0) which comes with FPM built-in – be aware that config file syntax has changed from XML to “ini”.

So update your php-fpm.config (if you aren’t sure where it is, use locate php-fpm.config, in my case it resided in /usr/local/etc). You can take your old config in XML syntax and copy options to the provided example file (for me it was also found in /usr/local/etc).

You’ll also need to update your php-fpm daemon script in /etc/init.d, to do that first remove an old version:

sudo /usr/sbin/update-rc.d -f php-fpm remove

then copy sapi/fpm/init.d.php-fpm from the folder with PHP source to /etc/init.d/ like this:

sudo cp -f /usr/local/src/php5.3.6/sapi/fpm/init.d.php-fpm /etc/init.d/.

set appropriate permissions:

chmod 755 /etc/init.d/php-fpm

and install the script to manage the service:

sudo /usr/sbin/update-rc.d -f php-fpm defaults

I also needed to adjust that daemon script (/etc/init.d/php-fpm) in order to use it, for me, previous location of php-fpm.pid didn’t match the provided default value (again, you can find it with locate php.fpm.pid).

php_fpm_BIN=${exec_prefix}/sbin/php-fpm
php_fpm_CONF=${prefix}/etc/php-fpm.conf
php_fpm_PID=${prefix}/logs/php-fpm.pid

You should see errors output in the log (you can find the path to log in php-fpm.conf) for the debugging.

Sources

http://stackoverflow.com/questions/5554705/imagecreatefromstring-function-imagecreatefromstring-no-jpeg-support-in-this
http://interfacelab.com/nginx-php-fpm-apc-awesome/
http://forum.nginx.org/read.php?3,82703,82705#msg-82705

Testing local running websites on Android Emulator, in OS X environment

2010-10-20T00:00:00+00:00

You can either download Android SDK here and follow the provided instructions or if you are using homebrew type this:

$: brew install android

Then, in order to start android-sdk type:

$: android

If that throws an error, like the following:

emulator: ERROR: could not find required kernel image (kernel-qemu).
emulator: Maybe defining ANDROID_SDK_ROOT to point to a valid SDK installation path might help ?

you can add the following (the example is for default brew installation) in your ~/.profile:

# this is required for android SDK to start from terminal
export ANDROID_SDK_ROOT="/usr/local/Cellar/android-sdk/r6/"

If you haven’t installed the emulator via brew, find out where SDK is placed and assign ANDROID_SDK_ROOT that path.

In the application menu include repository and update packages.

Create an instance of emulator and remember its name (say, “test”).

When starting your emulator you will have to use the -partition-size command to avoid out-of-memory messages.

$ emulator -avd [your-emulator-name] -partition-size 128

After emulator has started, in other terminal instance (tab or window), type:

$ adb remount

This will prevent “read-only file system” problem.

Then, to enter virtual device’s shell:

$ adb -e shell

and within the shell do (replace %YOUR_LOCAL_HOST% with your desired host):

# echo '10.0.2.2    %YOUR_LOCAL_HOST%' >> /etc/hosts

“10.0.2.2” is your hosting machine’s IP, – so %YOUR_LOCAL_HOST% will be pointing at your master machine, where web server is running.

Now you can go to the browser on your android emulator and access your locally running development server with desired development domain.