The latest versions of Cocos2D for iPhone include Xcode project templates to get you running quickly. You can install them by executing the install_template.sh script, which places said templates in the /Developer/Platforms/iPhoneOS.platform/Developer/Library/Xcode/Project Templates/Application folder.

Maybe these templates don't quite cover your needs, so we will learn how to create our own. You can also take a look at my Xcode project template for Cocos2D v0.8.2, in case it suits you.

Create the template

First, download the latest version of Cocos2D and uncompress it to /Developer/Library. Now launch Xcode, open its Preferences window, and create a new source entry that points to the folder containing Cocos2D:

If you go to /Developer/Platforms/iPhoneOS.platform/Developer/Library/Xcode/Project Templates/Application, you will see all the default iPhone project templates. The most basic template is the one called Window-based Application. If you open its folder, you will see it contains two others: Window-based Application and Window-based Core Data Application. We are interested in the first one. Copy it, rename it to something like Cocos2D Application, and place it in /Developer/Platforms/iPhoneOS.platform/Developer/Library/Xcode/Project Templates/Application. You should have something like this:

Open your Cocos2D Application project in Xcode by double clicking the file named ___PROJECTNAME___.xcodeproj. The project will look like this:

Delete the nib file MainWindow.xib, as we don't need it for our project. Also delete the entry Main nib file base name from our plist file ___PROJECTNAMEASIDENTIFIER___-Info.plist. While you are at it, you can add the entries Status bar is initially hidden and Initial interface orientation, in case you want to hide the status bar and change the interface orientation to landscape, respectively:

Right click on the Frameworks group and select Add > Existing Frameworks.... We need at least OpenGLES.framework and QuartzCore.framework, but if you are going to need any others, include them too.

Now let's add some Cocos2D to our template. There are many ways to do this, but I think the best one is to add a reference to its Xcode project, and include the libraries we require. To keep things organized, create a new group named Support, and inside it another one named Cocos2D. Right click on this last group and select Add > Existing Files.... Navigate to /Developer/Library, open the Cocos2D folder, and select the file cocos2d-iphone.xcodeproj.

In the dialog that appears, uncheck Copy items into destination group's folder, and select as reference type Relative to Cocos2D (or whatever you named your source entry):

If you click on the newly added cocos2d-iphone.xcodeproj, Xcode will list all the files contained in the Cocos2D project. Scroll down until you see the static library libcocos2d.a, and tick its checkbox to link your application against it:

Now double click on the target ___PROJECTNAME___, select the General tab, and add Cocos2D as a dependency, so that it is built before our project:

Switch to the Build tab, find the entry User Header Search Paths, and add $(COCOS2D_SRC):

Finally, modify main.m to specify our application delegate:

int main(int argc, char* argv[])
{
    NSAutoreleasePool* pool = [[NSAutoreleasePool alloc] init];
    int retVal = UIApplicationMain(argc, argv, nil, @"___PROJECTNAMEASIDENTIFIER___AppDelegate");
    [pool release];
    return retVal;
}

All that's left to do is write your template code in ___PROJECTNAMEASIDENTIFIER___AppDelegate.h and ___PROJECTNAMEASIDENTIFIER___AppDelegate.m.

Change the description and icon

If you create a new project in Xcode, you will see our new template:

However, the description and icon are the same as those of the Window-based Application (obviously). Let's solve that. From the Finder, right click on the file ___PROJECTNAME___.xcodeproj, and select Show Package Contents:

Edit TemplateInfo.plist to add your description:

<plist version="1.0">
<dict>
    <key>Description</key>
    <string>This template provides a starting point for a Cocos2D application.</string>
</dict>
</plist>

To change the icon, we just have to replace the file TemplateIcon.icns with our own. To create a icns file, launch the app Icon Composer found in /Developer/Applications/Utilities:

Just drag and drop the image you want to use for your icon in the different boxes. I used an image that comes with Cocos2D, found in the Resources folder:

Save your creation with the name TemplateIcon.icns, and replace the original. Try to create a new project from Xcode, and this time it will show up with our icon and description:

That's it, we are done! I hope to see your amazing templates uploaded to GitHub.

For those of you who don't know, GitHub is a web-based hosting service for projects that employ the Git version control system. You can use GitHub to host your public and private projects, collaborate on them in a distributed way, and expand your social coding network.

If you want to show the world your love for GitHub, they put up some ribbons that you can overlay on your site. Unfortunately they are just PNG images, so if you want to make any modification, e.g. change the background color, you will have to download the provided PSD file and edit it with your tool of choice.

Using some of the features found in modern browsers, we will turn those images into HTML and CSS, so that we can style them as we please.

Check out the demo!

Superstylin'

First of all, let's see the HTML we will use for the ribbon. An extra div tag surrounding the link to our GitHub profile is all we need:

<div class="ribbon">
  <a href="#" rel="me">Fork me on GitHub</a>
</div>

Now let's try to replicate the look of the ribbon with some basic CSS:

.ribbon {
  background-color: #a00;
  overflow: hidden;
}
.ribbon a {
  border: 1px solid #faa;
  color: #fff;
  display: block;
  font: bold 81.25% 'Helvetiva Neue', Helvetica, Arial, sans-serif;
  margin: 0.05em 0;
  padding: 0.5em 3.5em;
  text-align: center;
  text-decoration: none;
}

The only rule that may catch your eye is that overflow: hidden. Under some circumstances the text would span two lines, and this seemed to solve it.

Also, the font used for the original GitHub ribbon is Collegiate. I went with Helvetica instead, but feel free to experiment with @font-face if you want to stay faithful to the original design.

Anyway, here is what we've got:

To achieve the rotation effect, we will use the transform property. It is still in draft stage, so we will have to fall back on browser-specific declarations (-moz-transform for Firefox 3.5+, -webkit-transform for Safari 3.1+):

.ribbon {
  ...
  position: absolute;
  left: -3em;
  top: 2.5em;
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

I'm applying a counterclockwise rotation of 45 degrees, and using the top and left properties to place the ribbon in the upper left corner of my page. Tweak those values according to your needs. We should be looking at something similar to this:

Let's give the ribbon the final touch using the text-shadow and box-shadow properties. The latter is in draft stage, so again we have to fall back on browser-specific declarations (-moz-box-shadow for Firefox 3.5+, -webkit-box-shadow for Safari 3.0+):

.ribbon {
  ...
  -moz-box-shadow: 0 0 1em #888;
  -webkit-box-shadow: 0 0 1em #888;
}
.ribbon a {
  ...
  text-shadow: 0 0 0.5em #444;
}

If you take a look at the documentation for those two properties, you will see I'm using shadows with no offset and a slight blur. The result:

It's not identical to the original, but I think it's a good enough approximation.

To sum up, this is all the CSS we used to build the ribbon:

.ribbon {
  background-color: #a00;
  overflow: hidden;
  /* top left corner */
  position: absolute;
  left: -3em;
  top: 2.5em;
  /* 45 deg ccw rotation */
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  /* shadow */
  -moz-box-shadow: 0 0 1em #888;
  -webkit-box-shadow: 0 0 1em #888;
}
.ribbon a {
  border: 1px solid #faa;
  color: #fff;
  display: block;
  font: bold 81.25% 'Helvetiva Neue', Helvetica, Arial, sans-serif;
  margin: 0.05em 0 0.075em 0;
  padding: 0.5em 3.5em;
  text-align: center;
  text-decoration: none;
  /* shadow */
  text-shadow: 0 0 0.5em #444;
}

Browser support

As you can imagine, our ribbon will not be displayed properly by the majority of browsers:

Nevertheless, it's a useful technique with many compelling benefits. If you are only targeting modern browsers, go for it!

In many Ruby on Rails tutorials (specially those aimed at beginners), you will often see user authentication handled like this:

class Admin::PostsController < ApplicationController
  before_filter :authenticate

  protected

  def authenticate
    authenticate_or_request_with_http_basic do |name, pass|
      name == 'admin' && pass == 'snafu'
    end
  end
end

This may be acceptable for a quick prototype, but in a production application it spells disaster. With the right tools, we could launch an attack and find out the password in a matter of hours.

Dictionary attack

Hydra is a dictionary-based remote password cracker, i.e., it uses a word list to try to find out the username and password.

Let's suppose the attacker knows (or guesses) that the administrator username is admin. He would just have to specify the word list to use and the URL of your application, and go grab some coffee:

C:\>hydra -l admin -P english.dic -s 3000 127.0.0.1 http-get /posts/new
Hydra v5.4 (c) 2006 by van Hauser / THC - use allowed only for legal purposes.
Hydra (http://www.thc.org) starting at 2009-09-19 17:55:40
[DATA] 16 tasks, 1 servers, 20864 login tries (l:1/p:20864), ~1304 tries per task
[DATA] attacking service http-get on port 3000
[STATUS] 1384.00 tries/min, 1384 tries in 00:01h, 19480 todo in 00:15h
[STATUS] 1394.67 tries/min, 4184 tries in 00:03h, 16680 todo in 00:12h
[STATUS] 1395.86 tries/min, 9771 tries in 00:07h, 11093 todo in 00:08h
[STATUS] 1406.50 tries/min, 16878 tries in 00:12h, 3986 todo in 00:03h
[3000][www] host: 127.0.0.1   login: admin   password: snafu
[STATUS] attack finished for 127.0.0.1 (waiting for childs to finish)
Hydra (http://www.thc.org) finished at 2009-09-19 18:08:10

Don't think that you are safe because your password isn't a word picked from the dictionary. An attacker can tune his word list in innumerable ways.

Search attack

Brutus is a bit more flexible than Hydra, as it allows various types of attacks. We will use it to perform a search attack, i.e., it will try all possible combinations of a given character set and a given password length range:

It's slower than a dictionary attack, because the search space is much bigger, but, with the right character set and length range, the attacker will eventually get what he wants.

Protecting yourself

Try to avoid authenticate_or_request_with_http_basic in your Rails apps. There are better alternatives, like Restful Authentication.

If you have to stick with basic authentication, try to increase the time it takes the attacker to guess your password by:

• Picking unusual administrator usernames
• Increasing the length of your passwords
• Increasing the complexity of your passwords (e.g. by including spaces, punctuation characters, etc.)
• Imposing a delay between failed authentication attempts
• Locking the account after a number of failed authentication attempts

Remember that a brute-force attack will always succeed, it's just a question of time!

There's a really annoying bug in multiple versions of Windows where sometimes the system tray tooltips and popup notifications will show up behind the taskbar, or behind other windows:

It's documented in Microsoft's Knowledge Base, but I find the proposed solutions a bit lacking:

To resolve this issue, use one of the following methods:

• Log off and then log back on to the current account.
• Restart your computer.

I'm constantly getting bitten by this bug, so I developed a little program to fix it. What it does is apply the style HWND_TOPMOST to all windows that have the class name tooltips_class32, solving the problem (temporarily):

SetTopmost PROC hWnd :HWND

    ; we just need to apply HWND_TOPMOST, the window procedure for the tooltip
    ; automatically sets the size, position, and visibility of the control
    INVOKE SetWindowPos, hWnd, HWND_TOPMOST, 0, 0, 0, 0, SWP_NOMOVE OR SWP_NOSIZE OR SWP_NOACTIVATE

    ret

SetTopmost ENDP

Maybe I could modify it so that it runs in the background, sending a message every few minutes...

Well, for now this is what you have: tooltips.zip (source included, as always).

Here I show two ways to apply a cool fade effect to your windows: one using the Win32 API function AnimateWindow, and the other using SetLayeredWindowAttributes.

AnimateWindow

You just have to specify the handle to the window, how long it takes to play the animation, and the type of animation. For example, you could do a fade-in when opening and a fade-out when closing the window like this:

.IF uMsg == WM_INITDIALOG

    ; fade-in
    INVOKE AnimateWindow, hWnd, 500, AW_BLEND

.ELSEIF uMsg == WM_CLOSE

    ; fade-out
    INVOKE AnimateWindow, hWnd, 500, AW_BLEND OR AW_HIDE
    ; close
    INVOKE EndDialog, hWnd, NULL

.ENDIF

Pros:

• Very easy to do.
• In addition to AW_BLEND, it has other effects.

Cons:

• Some controls aren't rendered correctly during fade-in.
• You can't specify the final transparency of the window.

Example in MASM32: fade-1.zip.

SetLayeredWindowAttributes

This method takes a bit more work, here's how I did the fade-in and fade-out:

.IF uMsg == WM_INITDIALOG

    ; find address of SetWindowAttributes
    INVOKE LoadLibrary, ADDR sDllName
    .IF eax != NULL
        push eax ; for FreeLibrary
        INVOKE GetProcAddress, eax, ADDR sApiName
        mov SetLayeredWindowAttribs, eax
        .IF SetLayeredWindowAttribs != NULL
            ; make the window invisible
            push LWA_ALPHA
            push 0
            push 0
            push hWnd
            call [SetLayeredWindowAttribs]
            ; show it
            INVOKE ShowWindow, hWnd, SW_SHOW
            ; redraw it
            INVOKE RedrawWindow, hWnd, NULL, NULL, RDW_UPDATENOW
        .ENDIF
        call FreeLibrary
    .ENDIF

    ; fade-in
    .IF SetLayeredWindowAttribs != NULL
        push esi
        mov esi, 0
        .WHILE esi < 255
            inc esi
            push LWA_ALPHA
            push esi
            push 0
            push hWnd
            call [SetLayeredWindowAttribs]
            INVOKE Sleep, 1
        .ENDW
        pop esi
    .ENDIF

.ELSEIF uMsg == WM_CLOSE

    ; fade-out
    .IF SetLayeredWindowAttribs != NULL
        push esi
        mov esi, 255
        .WHILE esi > 0
            dec esi
            push LWA_ALPHA
            push esi
            push 0
            push hWnd
            call [SetLayeredWindowAttribs]
            INVOKE Sleep, 1
        .ENDW
        pop esi
    .ENDIF
    ; close
    INVOKE EndDialog, hWnd, NULL

.ENDIF

Pros:

• Renders all controls correctly during fade-in (AnimateWindow doesn't, AFAIK).
• You can specify the final transparency of the window.

Cons:

• Not as easy as AnimateWindow.
• AnimateWindow has other types of effects.

Example in MASM32: fade-2.zip.

To detect if your program is running inside a VMware virtual machine, all you need is four assembly instructions to communicate with it's backdoor I/O port:

mov eax, 564D5868h
mov ecx, 0Ah
mov edx, 5658h
in eax, dx

A description of this port, specific to VMware virtual machines, can be found at VM Back. Take into account that if you try to do this on a non-VMware system, a global protection fault will occur.

I wrote examples for Windows in MASM32 (vmware-asm.zip) and C (vmware-c.zip), as a starting point for future experiments.

You've probably come across many applications that use non-rectangular windows. Windows Media Player and Winamp instantly come to mind:

It's quite easy to create non-rectangular windows from a bitmap file in your Win32 applications, using functions such as CreateRectRgn and CombineRgn.

With a little help

I've created a helper function to simplify the process. Just include the bitmap you want to use in your resource file:

#define IDB_BMRGN 201

IDB_BMPRGN BITMAP DISCARDABLE "region.bmp"

Then, in the initialization part of your dialog, call my CreateBmpRgn function, specifying the handle of the window, the bitmap, and the color your want to be transparent (in the form 00BBGGRRh):

; load image
INVOKE LoadImage, hInstance, IDB_BMPRGN, IMAGE_BITMAP, 0, 0, LR_DEFAULTCOLOR
mov hBitmap, eax
; create region using magenta as the transparent color
INVOKE CreateBmpRgn, hWnd, hBitmap, 0FF00FFh
; set region
INVOKE SetWindowRgn, hWnd, eax, TRUE

You can check out the results in this example application written in MASM32: non-rectangular.zip (press Esc to close it).

The real thing

The code for the function is a bit more complex:

CreateBmpRgn PROC hWnd :HWND, hBmRgn :HBITMAP, clrTrans :COLORREF

    LOCAL hdcDest :HDC
    LOCAL hdcSrc  :HDC
    LOCAL bmInfo  :BITMAP

    LOCAL hRgn    :HRGN
    LOCAL hTmpRgn :HRGN
    LOCAL x       :DWORD
    LOCAL y       :DWORD
    LOCAL begin   :DWORD

    ; destination device context
    INVOKE GetDC, hWnd
    mov hdcDest, eax
    ; source device context
    INVOKE CreateCompatibleDC, hdcDest
    mov hdcSrc, eax
    ; get bitmap info
    INVOKE GetObject, hBmRgn, SIZEOF BITMAP, ADDR bmInfo
    ; select bitmap into device context
    INVOKE SelectObject, hdcSrc, hBmRgn

    ; create empty region
    INVOKE CreateRectRgn, 0, 0, 0, 0
    mov hRgn, eax

    mov x, 0
    mov y, 0

    ; pixel rows
    .WHILE TRUE
        mov eax, y
        .BREAK .IF eax == bmInfo.bmHeight

        ; pixel columns
        .WHILE TRUE
            mov eax, x
            .BREAK .IF eax == bmInfo.bmWidth

            ; skip first transparent pixels of the row
            .WHILE TRUE
                mov eax, x
                .BREAK .IF eax == bmInfo.bmWidth
                INVOKE GetPixel, hdcSrc, x, y
                .BREAK .IF eax != clrTrans

                inc x
            .ENDW

            ; remember this pixel
            push x
            pop begin

            ; find first non-transparent pixel
            .WHILE TRUE
                mov eax, x
                .BREAK .IF eax == bmInfo.bmWidth
                INVOKE GetPixel, hdcSrc, x, y
                .BREAK .IF eax == clrTrans

                inc x
            .ENDW

            ; create temp region
            mov eax, y
            inc eax
            INVOKE CreateRectRgn, begin, y, x, eax
            mov hTmpRgn, eax
            ; combine it with final region
            INVOKE CombineRgn, hRgn, hRgn, hTmpRgn, RGN_OR
            ; delete temp region
            INVOKE DeleteObject, hTmpRgn
        .ENDW

        mov x, 0
        inc y
    .ENDW

    ; release and delete device contexts
    INVOKE ReleaseDC, hWnd, hdcDest
    INVOKE DeleteDC, hdcSrc

    mov eax, hRgn
    ret

CreateBmpRgn ENDP

What I'm doing is reading the image pixel by pixel, identifying which ones should be transparent, creating temporary rectangular regions, and combining them all to form the final region.

Opening and closing the CD tray from your Win32 application is really easy. You just need to include winmm.lib in your code:

INCLUDE C:\masm32\include\winmm.inc
INCLUDELIB C:\masm32\lib\winmm.lib

And then call mciSendString with the command you want to send:

.DATA
sMciOpenTray  DB "set cdaudio door open wait", 0
sMciCloseTray DB "set cdaudio door closed wait", 0

.CODE
; open the CD tray
INVOKE mciSendString, ADDR sMciOpenTray, 0, 0, 0
; close the CD tray
INVOKE mciSendString, ADDR sMciCloseTray, 0, 0, 0

You can see all the possible commands in the MSDN reference for mciSendString.

Here is an example app written in MASM32: cd-tray.zip (sources included, of course).

If you want your Win32 app to use the Windows XP visual style, all the information you need is in the MSDN article Using Windows XP Visual Styles. In case it isn't clear enough, here's what I did for my MASM32 application.

Create a manifest file

Create a new text file with the name you want (in my case, manifest.xml) and paste the following XML code:

<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<assembly xmlns="urn:schemas-microsoft-com:asm.v1" manifestVersion="1.0">
  <assemblyIdentity
    processorArchitecture="X86"
    type="win32"
    name="NameOfYourApp"
    version="1.0.0.0" />
  <description>Description of your app.</description>
  <dependency>
    <dependentAssembly>
      <assemblyIdentity
        processorArchitecture="X86"
        type="win32"
        name="Microsoft.Windows.Common-Controls"
        version="6.0.0.0"
        publicKeyToken="6595b64144ccf1df"
        language="*" />
    </dependentAssembly>
  </dependency>
</assembly>

Replace NameOfYourApp and 1.0.0.0 with the name and version of your app. Also change the description to something more meaningful.

Include the manifest file

Just add these lines to your application's resource file:

#define CREATEPROCESS_MANIFEST_RESOURCE_ID 1
#define RT_MANIFEST 24

CREATEPROCESS_MANIFEST_RESOURCE_ID RT_MANIFEST DISCARDABLE "manifest.xml"

Make a few changes

Include comctl32.lib in your app:

INCLUDE C:\masm32\include\comctl32.inc
INCLUDELIB C:\masm32\lib\comctl32.lib

Call InitCommonControls anywhere in the code, just to put a reference to comctl32.dll so that it gets loaded. For example:

INVOKE GetModuleHandle, NULL
mov hInstance, eax
INVOKE DialogBoxParam, hInstance, IDD_MAINDLG, NULL, ADDR DialogProc, NULL
INVOKE ExitProcess, eax

INVOKE InitCommonControls

It'll never get executed, but it doesn't matter.

The result

Quite easy, wasn't it?

You can download my example app to see it for yourself: xp-stylin.zip (sources included).

If you want to print a message in your Windows console application using a color other than the default, you just need to call the Win32 API function SetConsoleTextAttribute, specifying the handle of the console and the color.

The color is composed of 2 bytes. The first one is the background color, and the second one the foreground color, so you can get all the combinations by looping from hexadecimal value 00 (black background and black foreground) to FF (white background and white foreground).

This simple program prints the first 16 color combinations:

#include <stdio.h>
#include <windows.h>

int main(void)
{
  HANDLE hConsole;
  int k;

  hConsole = GetStdHandle(STD_OUTPUT_HANDLE);
  for (k = 0x00; k <= 0x0F; k += 0x01)
  {
    // change color
    SetConsoleTextAttribute(hConsole, k);
    printf("%2d Colored text in a Windows console\n", k);
  }
  // restore to normal color
  SetConsoleTextAttribute(hConsole, 0x07);

  return 0;
}