High Scores

Your high scores are persisted through your browser's localStorage. This means that this game is a purely client-side application, and can be played offline without the internet.

Libraries

I made great use out of these JS libraries:

• Combokeys for keyboard shortcuts.
• Pixi.js as my 2D rendering engine.

Source

The source code for my Tetris implementation is available on GitHub at github.com/nylira/tetris. Feel free to take a look!

And if you want to play it, go here: tetris.nylira.com

Put everything together with Browserify

Browserify is a godsend. Being able to manage my front end JavaScript with NPM feels like the future. This library makes just about anything possible. Grab the companion Watchify library too to watch for changes to your files.

Get it: npm install browserify watchify --save

Deal with old versions of IE with Modernizr

The shackles of old version of IE still haunt us. Modernizr makes it a bit less painful by letting us target unsupported features with a simple body class.

Get it: modernizr.com

Use Koa for your web serving needs

Koa is a lightweight web server perfect for localhost development. It makes use of ES6 features like promises and yield to return content for HTTP requests, but you don't have to learn about that to use it.

Get it: npm install koa --save

Manage your templates with React

React is a little different from your ordinary HTML templating library. You write your templates in JSX (or with JS functions, as I prefer) in a JavaScript. However, it offers the most performant way to update your HTML through a virtual DOM.

Get it: npm install react --save

Simplify your CSS with Stylus

Stylus makes working with CSS easier than any other CSS preprocessor. Get the nib utility library too, for easy stylesheet resets, browser prefixes, and other useful mixins.

Get it: npm install stylus nib --save

Yes, I lost this game in order to show you a screenshot.

Controls

There are multiple control schemes in place so you can play it however you want. For mobile, you may either tap the on screen buttons or swipe in any direction. For PC, you have the added options of WASD and arrow keys.

High Scores

Your high scores are persisted through your browser's localStorage. This means that this game is a purely client-side application, and can be played offline without the internet.

Libraries

I made great use out of the following JavaScript libraries:

• Combokeys for keyboard shortcuts.
• FastClick to remove the 300ms delay on touch input on mobile websites.
• Hammer.JS for touch gestures.
• howler.js for WebAudio sound.
• Pixi.js for WebGL rendering wihttp://th a Canvas fallback.

Source

The source code for my Snake implementation is available on GitHub at github.com/nylira/snake. Feel free to take a look!

And if you want to play it, go here: snake.nylira.com

Enter pngcrush

pngcrush is a command line tool that attempts to reduce the file size of your PNG files losslessly. It does this by attempting a large number of compression methods and comparing their results to see which offers the greatest file size reduction.

Smaller file sizes mean a snapper user experience. It also improves your search rankings in Google.

Install pngcrush with npm:

npm install pngcrush

Using pngcrush on a single PNG file

Let's try using pngcrush on Gentoo Linux's famous "g" logo. You can find a PNG version of it on their website.

The Gentoo Linux logo. Size: 1,109,332 bytes

This is the command we'll use:

pngcrush -rem allb -brute -reduce gblend.png gentoo.png

These are the results I get:

Best pngcrush method        = 112 (ws 15 fm 5 zl 8 zs 1) =    863400
for output to gentoo.png
(22.17% critical chunk reduction)
(22.17% filesize reduction)
CPU time decoding 4.954, encoding 74.960, other 0.022, total 79.935 sec.

And here is the optimized version of the logo:

The Gentoo Linux logo after being pngcrushed. Size: 863,400 bytes

There is no visual difference, but the file is 864 KB instead of 1.1 MB. That's 22% less transfer required for your users. Isn't that great!

Using pngcrush to recursively crush directories of PNG files

I use this following command (found here) to recursively crush all the images in the assets folder of my PRISM Break project.

find -f . png | while read line; do pngcrush -ow -brute $line; done

The last time I ran this command, I reduced the size of my images folder from 19.3 MB to 17.6 MB. Due to the light weight of the HTML, and CSS this means that visitors to https://prism-break.org will load the site nearly 9% faster. Definitely worth it.

Exercise: Loops and Functions #25

The following code returns an approximation for the square root of 2 and compares the result to Go's math.Sqrt() function.

package main

import (
    "fmt"
    "math"
)

func Sqrt(x float64) float64 {

    // initialize variables
    z, d := float64(1), float64(1)

    // if delta is greater than 1e-15, seek closer approximation
    for d > 1e-15 {
        z0 := z
        z = z - (z * z - x)/(2 * z)
        d = math.Abs(z - z0)
    }
    return z

}

func main() {
    fmt.Println(Sqrt(2))
    fmt.Println(math.Sqrt(2))
}

Exercise: Slices #38

The following code creates an image with a repeating pattern.

package main

import "code.google.com/p/go-tour/pic"

func Pic(dx, dy int) [][]uint8 {

    // initialize the image
    image := make([][]uint8, dy)

    // iterate over each pixel
    for x := 0; x < dy; x++ {
        image[x] = make([]uint8, dx)
        for y := 0; y < dx; y++ {

            // set a color value for each pixel
            image[x][y] = uint8((x ^y) * (x ^ y))

        }
    }
    return image
}

func main() {
    pic.Show(Pic)
}

Exercise: Maps #43

The following code counts the number of instances of each word within a string.

package main

import (
    "code.google.com/p/go-tour/wc"
    "strings"
)

func WordCount(s string) map[string]int {

    // initialize the wordMap variable
    wordMap := make(map[string]int)

    // separate the strings into words
    words := strings.Fields(s)

    // iterate over the words to count each instance
    for _, word := range words {
        wordMap[word]++
    }

    return wordMap
}

func main() {
    wc.Test(WordCount)
}

Exercise: Fibonacci closure #46

A simple Fibonacci sequence function. The Fibonacci sequence is the sequence of numbers where the value(n) = value(n-1) + value (n-2) with the seed values value(0) = 0 and value(1) = 1.

package main

import "fmt"

// fibonacci is a function that returns
// a function that returns an int.
func fibonacci() func() int {
    first, second := 0, 1
    return func() int {
        first, second = second, first + second
        return first
    }
}

func main() {
    f := fibonacci()
    for i := 0; i < 10; i++ {
        fmt.Println(f())
    }
}

Advanced Exercise: Complex cube roots #50

The following function uses Newton's method for finding an approximation for cube roots and iterates over it 1000 times to get a rough value for a cube root of a number.

package main

import(
    "fmt"
    "math/cmplx"
)

func Cbrt(x complex128) complex128 {
    z := complex128(1)

    for i := 0; i < 1000; i++ {
        z = z - (cmplx.Pow(z, complex128(3)) - x)/(3 * cmplx.Pow(z, complex128(2)))
    }
    return z

}

func main() {
    fmt.Println(Cbrt(2))
}

Exercise: Errors #58

Returning an error if the user tries to find the square root of a negative number.

package main

import (
    "fmt"
)

// error type
type ErrNegativeSqrt float64

// error function for the error type
func (e ErrNegativeSqrt) Error() string {
    return fmt.Sprintf(
        "Can't find the Sqrt of a negative number: %v", float64(e))
}

func Sqrt(f float64) (float64, error) {

    // return error if number is negative
    if f < 0 {
        return 0, ErrNegativeSqrt(f)

    // otherwise find an approximation for the square root
    } else {
        z := float64(1)
        for i := 0; i < 1000; i++ {
            z = z - (z * z - f)/(2 * z)
        }
        return z, nil
    }
}

func main() {
    fmt.Println(Sqrt(2))
    fmt.Println(Sqrt(-2))
}

Exercise: HTTP Handlers #60

package main

import (
    "net/http"
    "fmt"
)

type String string

type Struct struct {
    Greeting string
    Punctuation string
    Who string
}

func (s String) ServeHTTP(
    w http.ResponseWriter,
    r *http.Request) {
    fmt.Fprint(w, s)
}

func (s Struct) ServeHTTP(
    w http.ResponseWriter,
    r *http.Request) {
    fmt.Fprint(w, s.Greeting, s.Punctuation, s.Who)
}

func main() {
  http.Handle("/string", String("I'm a frayed knot."))
  http.Handle("/struct", &Struct{"Hello", ":", "Gophers!"})
    http.ListenAndServe("localhost:4000", nil)
}

Exercise: Images #62

This function defines and creates a test image.

package main

import (
    "code.google.com/p/go-tour/pic"
    "image"
    "image/color"
)

// create the custom image type
type Image struct{
    width, height int
    pColor uint8
}

// set the image dimensions and location
func (self *Image) Bounds() image.Rectangle {
  return image.Rect(0, 0, self.width, self.height)
}

// set the image color model
func (self *Image) ColorModel() color.Model {
  return color.RGBAModel
}

// set the image color per pixel
func (self *Image) At(x, y int) color.Color {
  return color.RGBA{
        self.pColor + uint8(x), self.pColor + uint8(y), 255, 255}
}

// create and show the image
func main() {
    m := Image{100, 100, 128}
    pic.ShowImage(&m)
}

Exercise: Rot13 Reader #63

The following code decrypts strings of Rot13 text.

package main

import (
    "io"
    "os"
    "strings"
)

type rot13Reader struct {
    r io.Reader
}

func (rot rot13Reader) Read(p []byte) (n int, err error) {

  n, err = rot.r.Read(p)

  // for each letter read from io.Reader
  for i := 0; i < len(p); i++ {


    // if the letter's index is between A - N, add 13 to its index
    if (p[i] >= 'A' && p[i] < 'N') || (p[i] >='a' && p[i] < 'n') {
      p[i] += 13

    // if the letter's index is between M - Z, subtract 13 from its index
    } else if (p[i] > 'M' && p[i] <= 'Z') || (p[i] > 'm' && p[i] <= 'z'){
      p[i] -= 13
    }

  }
  return
}

// test to make sure it works
func main() {
    s := strings.NewReader(
        "Lbh penpxrq gur pbqr!")
    r := rot13Reader{s}
    io.Copy(os.Stdout, &r)
}

Why Do I Need To Redesign?

I need to redesign my site not because I'm bored of the old design, but because I've found several major problem areas with the previous design.

1. There's no narrative in my old site. There was so little text in the previous design that all a visitor sees is a list of links. A list of links to a large number of topics is not friendly to most of my visitors. Visitors to a website tend to have an expectation of what they'll see, and my old "table of contents"-like layout is not what they want.

2. There was no useful navigation in my old site. There was, in fact, navigation. But it required scrolling through the entire front page of my site. As my site homepage was quite long, it's not hard to imagine I was losing visitors who had a specific inquiry in mind but got lost in my link list.

3. A long, linear page design is not an efficient use of space on larger screens. My previous design revolved around a vertical list of links in no particular order of importance. The linearity of the design is actually not a problem. The problem is that I stuffed the list with far too many links, making reading them an arduous exercise. On larger displays especially, the lack of differently sized paged elements made the site design rather tedious.

Redesign Objectives

Before I show you the code behind the site, I want to go into the reasoning for building the v4 site the way I have.

The site's content must be easy to access on all devices. I don't want mobile users to be stuck with the desktop version of the site. It's a pain to read wide columns text on a phone. To make my site accessible to as many devices as possible, I went ahead with mobile first design.

The site must be secure as possible. I'm a web designer, not a system administrator. While I could have used a CMS like Wordpress or a framework like Rails, I don't have the time or energy to constantly secure my software stack against exploits. To this end, I decided to make my site entirely static HTML and CSS, with a bit of client-side JS.

I want to learn some programming. While I could have used one of many static site generators on GitHub, I decided to roll my own generator with LiveScript, Jade, and Stylus. I realize I'm reinventing the wheel here, but building my own site generator made me learn a lot of new things I never would have otherwise.

The site has to be incredibly easy to update. I find that a lot of my ideas for articles and blog posts die before I can publish them online, due to the friction involved in web publishing. I want to keep editing and publishing as simple as possible to reduce that friction. Thus I picked a syntax that is pretty much as close to plain text as possible: Markdown.

The site should showcase my portfolio. Web design portfolios look best with a dark gray or black background. My site's colors should be subtle in order to better present the work I have done. Thus I'm going back to Nylira v2's color scheme.

Technical Details

To build my static site generator, I decided to use many of the same node.js libraries I used for PRISM Break. I would write all the code in LiveScript. The templates would be powered by Jade. The CSS would be pre-processed by Stylus. The content would be written in Markdown.

Todo

This redesign is a work in progress, and there are still things I want to do to it. Here's a list of things I still want to add to the site:

• Project logos for the Projects index page.
• Consider adding categories or filters for the Articles page.
• Next/Previous article buttons for individual article pages.

First, I worked on implementing the Growing Tree algorithm with Unreal Blueprint. I learned a lot about maze generation algorithms from Jamis Buck and Think Labyrinth.

The grid generated with 10x10 settings.

The grid generated with 14x14 settings.

Tile Tests

I haven't decided what setting to use for the game yet. I'm experimenting with tile designs to see what looks good from a top-down perspective:

Some prototype map tiles rendered in Modo 801.

Roll a Ball

This game is based on one of the first Unity3D tutorials called "Roll A Ball". I've fleshed it out a bit with custom 3d models, textures, and particle effects.

• Download Mac
• Download Windows
• Download Linux

source

Want your Vim configuration on another computer? Consider checking it into source control. Then, add this line to your ~/.vimrc file.

source /your-git-repo/vimrc

zmv

If you're using zsh, you should know it comes with zmv. Here's how to remove a prefix from a bunch of files.

zmv 'prefix-(*)' '$1'

recursively delete specific file or folder

For a particular folder:

find . -type d -name '.git' -print -exec rm -rf {} \;

For a particular file:

find . -name '.DS_Store' -print -exec rm -rf {} \;

1. Allowing users to shoot themselves in the foot by permanently deleting their data.

Disk-space is cheap, and user whims are fickle. If you can absorb the extra costs, I suggest never permanently deleting anything a user creates, unless they cancel their account. Give your user a history page where they can restore the state of everything they've ever created or uploaded with your app. When they screw up (which they invariable will), they'll love you for thinking about the issue.

2. Interrupting user interaction with unimportant modal dialog windows.

Instead of rudely throwing a modal dialog in your user's face, consider using Gmail's method for atomic operations: soft delete. After every action, Gmail displays a nonintrusive status message at the top of the screen. The message tells the user exactly what's occured–e.g., "This conversation has been archived."–along with a simple "Undo" link.

Why is soft delete better than modal confirmation windows? For one, this method allows the user to delete faster by skipping a step (the modal middleman). Modal windows are intrusive, workflow-breaking, and force users user to make immediate decisions. Inline undos are far more user-friendly because the entire web app stays usable, instead of being backgrounded. Let's face it–most deleted files are never wanted back.

3. Not allowing users to do batch operations with a list or grid of content.

Native file managers allow clicking and dragging to lasso multiple documents. We've used this simple operation on our desktop for years, but it has yet to show up online. Select-lassos could work very well for photo-oriented apps.

4. Forcing the use of lightboxes in image galleries.

Lightboxes break the UI conventions of the user's operating systems. The non-standard chrome tends to difficult to close and impossible to move. Solution: <a href=image.jpg> with a magnify icon. Let users decide if they want to open the image in a new window or not.