Subscribe to “The Spin Show”

Download the podcast!

If you have any questions, comments or want to get in touch about the podcast, just email us at spinshow AT spinbits.com.

• Talk about the latest technology trends
• Discuss ideas together in front of a computer
• Meet interesting people
• Eat pizza - our treat :)

The event will take place at the SpinBits office located in the Knowledge Village area, Business Central towers, office# 1802A. Feel free to join us.

It’s encouraging to see DemoCamp happen again here in Dubai. The first and second events were a success in all senses, we had great people attending, good presentations and feedback from the audience, and overall a great evening for all those involved. We hope DemoCamp Dubai keeps getting better, and establishes itself as a recurrent event in the Dubai Tech scene.

Download the podcast

Add-ons discussed in the podcast:

1. Firebug 1.2.0b6

   Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page…

2. FireFTP 1.0

   FireFTP is a free, secure, cross-platform FTP client for Mozilla Firefox which provides easy and intuitive access to FTP servers.

3. Web Developer 1.1.6

   Adds a menu and a toolbar with various web developer tools.

4. HTML Validator

   HTML Validator is a Mozilla extension that adds HTML validation inside Firefox and Mozilla. The number of errors of a HTML page is seen on the form of an icon in the status bar when browsing. The details of the errors are seen when looking the HTML source of the page.

5. Foxmarks Bookmark Synchronizer 2.1.0.12

   If you use Firefox on more than one computer, you’ll want Foxmarks. Install Foxmarks on each computer, and it will work silently in the background to keep your bookmarks synchronized. You can also log in to my.foxmarks.com to manage your bookmarks from any computer.

6. Link Alert 0.8.2.1

   Changes the cursor to indicate the target of a link…

7. PDF Download 1.0.1.2

   PDF Download relieves the pain experienced when encountering PDF files on the Web. Whenever you click on a PDF file, PDF Download lets you know before trying to open it, and then offers you choices such as downloading, opening, or converting it straight to HTML.

8. DownThemAll! 1.0.3

   The first and only download manager/accelerator built inside Firefox!

9. BetterSearch 1.20

   An extension for Firefox and Flock which enhances Google (all international flavours, too), Yahoo! Search, del.icio.us, MSN Search and several other sites by adding previews (thumbnails), Amazon product images and additional functionality.

10. StumbleUpon 3.25

    StumbleUpon discovers web sites based on your interests, learns what you like and brings you more.

CSS improvements in Firefox 3

http://developer.mozilla.org/en/docs/http://developer.mozilla.org/en/docs/CSS_improvements_in_Firefox_3

DOM improvements in Firefox 3

http://developer.mozilla.org/en/docs/DOM_improvements_in_Firefox_3

If you have any questions, comments or want to get in touch about the podcast, just email us at spinshow AT spinbits.com.

Of course, we don’t try new technologies just for the sake of it, we want to try features and applications to make our jobs more enjoyable and increase our productivity. Just reading a little bit about each of those tools, we get excited to try them out. We’ll write a review about them as soon as we get some knowledge worth sharing. Here’s the list of some stuff we’ve started using, are trying now, or will try in the near future:

• jQuery – a slim and well-written Javascript library
• git – Distributed version control system management tool
• merb – Web MVC framework written in Ruby
• RSPEC – Behaviour Driven Development framework for Ruby
• Phusion Passenger (aka mod_rails) – Apache module to make deploying Rails applications a lot simpler

We start by defining the filters and sorting options as scopes:

 # Types
  named_scope :rentals,
            :conditions => ["class_name =  ?", TYPES[:rental]]
  named_scope :sales,
            :conditions => ["class_name =  ?", TYPES[:sales]]

  # Sorting
  named_scope :by_date,
            :order => 'created_at DESC'
  named_scope :by_popularity,
            :order => 'views_count DESC'
  named_scope :by_rating,
            :order => 'rating_avg DESC'

  # Filters and conditions
  named_scope :where_category,
            lambda { |category_id| { :conditions => sanitize_sql_array(["category_id = ?", category_id]) } }

Then we define the magic ‘list’ method that joins those scopes depending on the passed params:

  def self.list(options={})
    listings = self.send(options[:type]) if !options[:type].blank? and ['sales', 'rentals'].include?(options[:type])
    listings = (listings || self).send(:where_category, options[:category_id]) unless options[:category_id].blank?
    listings = (listings || self).send(options[:sort]) unless options[:sort].blank?
    # support will_paginate
    return (listings || self).paginate(:page => options[:page])
  end

That’s it, now let’s call ‘list’ in the controller:

  def index
    @properties = Property.list(params)
    respond_to do |format|
      format.html
      format.js
      format.xml  { render :xml => @properties }
    end
  end

Now with a single line we have a single database query that retrieves the records we want, filtered and sorted the way we want them.

  Property.list(:type => 'sales', :sort => 'by_date')

will query:

  SELECT * FROM `properties` WHERE (class_name = 'Sale') ORDER BY created_at DESC LIMIT 0, 10

This structure is really helpful for adding more filters in the future, we just need to define the new scope and use it in the ‘list’ method and we’re ready to go.

First, set the foreground color to #2D2823, then insert the “Banner 1” shape at any size you like but make sure to maintain the size proportions (hold the shift key). Rename this shape layer to “original”.

Now using the Marquee Tool, select one of the banner folded endings (I’ll go with the right one). Zoom in and use the arrow keys to pixel-move your selection and make sure you are only selecting the right part as shown below.

Once you have selected the right area, hit cmd+J (mac) or ctrl+J (pc) to create a new layer from that selection. Name that layer “right fold”. Use the Eraser tool to remove any unwanted parts if any.

Select the “right fold” layer, hit cmd+T (mac) or ctrl+T (pc) for free transform and rotate it by (-15) degrees.

Now that we have the “right fold” ready, let’s move to the flat middle part of the banner.

Select the “original” layer again. Use the Marquee Tool to select about the right quarter of the middle area of the banner as shown below. Again, make sure your selection is correct (specially from the right side) by zooming in and nudging the selection as required.

Once you have the right area selected, hit cmd+J (mac) or ctrl+J (pc) to create a new layer from that selection. Rename that layer “flat”. Then rotate it by (-15) degrees. The result so far should look like this:

Now… get the Single Column Marquee Tool and make a selection similar to the one shown in the screenshot below (right after the curving ends). Then click cmd+T (mac) or ctrl+T (pc) for free transform and drag to the left creating half the banner. Then use the Marquee Tool or the Eraser Tool to remove the unwanted part at the bottom.

At this point, we have half the banner shape done. So first, duplicate (cmd+J  or ctrl+J) the “flat” layer, flip the duplicate horizontally (Edit > Transform > Flip Horizontal) and place it on the right position next to right half (as shown below) then select both halfs/layers and hit click cmd+E (mac) or ctrl+E (pc) to merge them into one layer (make sure it is still named “flat”)

After that, duplicate the “right fold” layer, flip it horizontally, rename it to “left fold” and place it on the right position as shown.

Now that we have the banner shape complete, select the “right fold”, “left fold” and “flat” and group them: cmd+G (mac) or ctrl+G (pc). Name the group “banner”. Then duplicate (right click > duplicate) the group and select the duplicate and click cmd+E  or ctrl+E to flatten it.

Rename the flattened layer to “stripe” and move it (drag it) to be the bottom layer of the “banner” group. Now, we have the “stripe” layer exactly behind the 3 banner layer we made earlier. The layer structure should now look like this.

All we need to do now is to select the Move Tool and nudge “stripe” 5 pixels down using the arrow key. Now that we have all the shapes in place, what’s left is to give these shapes some styling.

Select the “right fold” layer and give it an Inner Shadow at 180 degrees Angle. Change the Distance to 7px and the Size to 10px (these numbers work well with size of banner I am working with, feel free to increase/decrease them to achieve a similar look on bigger/smaller banner sizes ).

Add the same Inner Shadow style to the “left fold” but change the Angle to zero. Then select the “stripe” layer and add a Drop Shadow style to it: change the Opacity to 50%, Distance to 2px and Size to 4px. After that add a Color Overlay style and change the color to #FFC717.

If you made it this far, then, congrats! you’re done :) now add your custom text and enjoy.

Download the podcast!

Karim - Rida - Cloves - Michael

If you have any questions, comments or want to get in touch about the podcast, just email us at spinshow AT spinbits.com.

If we accept a website development project, we not only put thoughts on the technical implementation of the web application, but we also work with our clients as Web 2.0 business consultants. The end result that we invariably achieve is a solid and impressive interactive web application.

Our efforts with client projects help us contribute to making a better online experience for users in the Middle East as a whole. But we do not stop at that; we build our own web applications, too!

The business understanding and technical comprehension that our team possesses allow us to think up great and useful web applications that provide immediate value to the internet users in the Middle East. The applications we build respond to a direct market need.

We have built “SliceJar”:http://www.slicejar.com/demo, which is a comprehensive video publishing platform for publisher in the Middle East and it has garnered great reception from desperate video publishers who have been looking for such a solution. In addition to SliceJar, we are soon launching a very useful feature in “restate.ae”:http://restate.ae that will tackle the messy real estate market in Dubai and the UAE and help buyers and sellers connect instantly.

One thing that we do not overlook at SpinBits is the business behind our efforts. We realize that our financial stability is vital to the continuity of the value that we provide to society. That’s why our products have clear and easily workable business models.

Business Model

We are confident that, as a leading web development company, our prosperity and growth can have a direct positive impact on the quality of the Middle Eastern internet industry. That’s why we are working hard to grow and we are already raising the bar for everyone else.

What do i know?

Over the years I built an image for Brazil in my mind and at some point I thought I knew it all; I know that they have the best soccer team ever, I know they have soccer as part of there culture, I know they dance samba, I know they have great beaches, I know the flag, the language they speak, I also know that they are the biggest country in South America. Thinking about what i know now; I would say it’s just the kind of information that anyone would learn watching Discovery Channel or reading some online article; in other words, I only know the obvious.

Enlightenment!

Eduardo joined SpinBits two months ago as an intern, he is a Computer Science fresh graduate and he’s the cousin of Cloves, SpinBits’ co-founder.

Having Eduardo among us opened my eyes to a whole new side of Brazil. Though he can’t speak english very well, but he still had his impression and he managed to reflect who he is and what Brazilian people are all about by actions.

I wont go and pretend that I know it all about Brazil just because i met Eduardo, but I know a lot more now. I know for a fact that they are kind, humble, smart, and funny, honesty is part of who they are. They are joyful and positive and this isn’t the kind of thing you learn through TV, it’s the kind of thing you get through human interaction.

No goodbyes for you Eduardo

He is leaving us and heading back to his homeland this Friday, still he won’t get any goodbyes from us, all he’ll be getting is “Till we meet again”. That’s why we all at SpinBits went out on a “Till we meet again” night for Eduardo.

We all wish you good luck with the RoR business you are planing to start in Brazil. VIVA BRAZIL! VIVA EDUARDO!