Amit’s Game Programming Information
Amit’s Game Programming Information
Amit is a hobbyist game programmer. He must see lots of action.
But I digress. Cause I’m actually reading everything on his site and enjoying it.
Listing of Entries Tagged as ''
How to Deal with Wireless Freeloaders
Oh, man, how deviously fun!!
Encryption is for sissies. If you have a wireless network in your home that your neighbor is mooching off of, this page gives you a few pointers on how to make their web experience more entertaining: Upside-Down-Ternet
I prefer the blurry net rather than any sort of redirecting.
This certainly tempts me to open up our network…
(Thanks, Pete Stevens!)
Upside-Down-Ternet
My neighbours are stealing my wireless internet access. I could encrypt it or alternately I could have fun.
Split the network
I’m starting here by splitting the network into two parts, the trusted half and the untrusted half. The trusted half has one netblock, the untrusted a different netblock. We use the DHCP server to identify mac addresses to give out the relevant addresses.
/etc/dhcpd.conf
ddns-updates off; ddns-update-style interim; authoritative; shared-network local { subnet *.*.*.* netmask 255.255.255.0 { range *.*.*.* *.*.*.*; option routers *.*.*.*; option subnet-mask 255.255.255.0; option domain-name “XXXXX”; option domain-name-servers *.*.*.*; deny unknown-clients; host trusted1 { hardware ethernet *:*:*:*:*:*; fixed-address *.*.*.*; } } subnet 192.168.0.0 netmask 255.255.255.0 { range 192.168.0.2 192.168.0.10; option routers 192.168.0.1; option subnet-mask 255.255.255.0; option domain-name-servers 192.168.0.1; allow unknown-clients; } }
IPtables is Fun!
Suddenly everything is kittens! It’s kitten net.
/sbin/iptables -A PREROUTING -s 192.168.0.0/255.255.255.0 -p tcp -j DNAT –to-destination 64.111.96.38
For the uninitiated, this redirects all traffic to kittenwar.
For more fun, we set iptables to forward everything to a transparent squid proxy running on port 80 on the machine.
/sbin/iptables -A PREROUTING -s 192.168.0.0/255.255.255.0 -p tcp -m tcp –dport 80 -j DNAT –to-destination 192.168.0.1
That machine runs squid with a trivial redirector that downloads images, uses mogrify to turn them upside down and serves them out of it’s local webserver.
The redirection script
#!/usr/bin/perl $|=1; $count = 0; $pid = $$; while (<>) { chomp $_; if ($_ =~ /(.*.jpg)/i) { $url = $1; system(”/usr/bin/wget”, “-q”, “-O”,”/space/WebPages/images/$pid-$count.jpg”, “$url”); system(”/usr/bin/mogrify”, “-flip”,”/space/WebPages/images/$pid-$count.jpg”); print “http://127.0.0.1/images/$pid-$count.jpgn”; } elsif ($_ =~ /(.*.gif)/i) { $url = $1; system(”/usr/bin/wget”, “-q”, “-O”,”/space/WebPages/images/$pid-$count.gif”, “$url”); system(”/usr/bin/mogrify”, “-flip”,”/space/WebPages/images/$pid-$count.gif”); print “http://127.0.0.1/images/$pid-$count.gifn”; } else { print “$_n”;; } $count++; }
Then the internet looks like this!
And if you replace flip with -blur 4 you get the blurry-net
HLA Group Prototypes
Rapid prototyping of interactive ideas and concepts is a powerful tool in developing interactive projects. It helps the client visualize a designer’s otherwise ambigious design-school-speak, while also helping the designer to validate and articulate what’s in their head. Of course, you need to be pretty adept at your craft (in this case, Flash design) to be able to roll out this stuff quickly.
Now that the HLA project is done (though not yet billed!), I can share some of the rapid prototypes that were built but didn’t quite make it intact into the final product (though the spirit is still there).
Here are some samples of early rough and dirty concepts:
- http://hla.mod7.com/_prototypes/parallax01.swf
- http://hla.mod7.com/_prototypes/discipline01.swf
- http://hla.mod7.com/_prototypes/discipline03.swf
Want the source code? Here you go, warts and all (and no warranty implied whatsoever). Remember, these prototypes are rapid, so they’re not well-documented or built “the right way”: http://hla.mod7.com/_prototypes/source.zip (1.43 MB). Have fun!
Design Observer: writings about design & culture
Pentagram’s Michael Bierut comments on The National Design Award Communication Design winners’ political statement to theWhite House in his Design Observer article. The article is well worth the read as it gives the briefest of overviews regarding American politics and design.
The whole CommD declining the invitation is an interesting, if not empty, gesture, to be sure. My favorite take on the controversy is Michael’s note:
“What we have here, then, is a symbolic protest to a symbolic event.”
BAM! Ouch! Served!
Team CSS Coding Practices
Content with Style: Playing Nice with the Other CSS Kids <- This article has some good ideas for developing in CSS across a team. Some great organizational tips, too. Not too sure about the importing of multiple CSS files into a master CSS file, though.
Other gems this article leads to is some interesting thoughts on creating a standard CSS framework (see previous post) and some tactical stuff, like using "tags" to organize your mondo-biggo CSS files:
- http://www.contentwithstyle.co.uk/Articles/17/a-css-framework
- http://www.contentwithstyle.co.uk/Articles/12/modular-css
- http://www.stopdesign.com/log/2005/05/03/css-tip-flags.html
Wow, I’m becoming quite the XHTML/CSS geek these days, eh?
HTML + CSS Standard Framework
In this article, the author takes a stab at creating a naming convention for universal web page elements. Ambitious, if not a bit simplistic.
In general, I’m in favour of this sort of thing on a corporate level.
On a related note, I appreciate this guy’s motivation for introducing such conventions:
“…as a businessman I would like to establish conventions which make my development time more efficient and therefore more profitable.”
This is a big challenge for companies like ours, who pride themselves on unique solutions to unique problems. There isn’t a lot of space for process and workflow flexiblity when every project is so vastly different. (”vastly” is a bit of an over-statement, sure — it’s not like we’re making websites in one project and then stuffed bears on the next…)
Regardless, looking at this guy’s suggestions, I already see that it doesn’t apply cleanly to one of the music-based websites we’re working on. His conventions are:
- #container
- Page container (usually a
)
- #branding
- Used for a header or banner to brand the site.
- #branding-logo
- Used for a site logo
- #branding-tagline
- Used for a strapline or tagline to define the site’s purpose
- #nav or #navigation
- Used to contain a navigation device
- #nav-main
- Main or primary navigation
- #nav-section
- Navigation to pages within the current site section
- #nav-external
- Navigation to pages outside the site
- #nav-supplementary or #nav-supp
- A supplementary list of links, perhaps in a footer. This can replace the common, but presentational #footer
- #nav-(whatever)
- A list of links named at a designer’s descretion
- #search
- Related to search interface and search results
- #search-input
- A search form
- #search-output
- Search results which could include a
or other markup including definition lists
- #content
- Used for content rather than for another purpose such as navigation
- #content-main
- The main content area
- #content-news
- News related content
- #content-(whatever)
- Could include any form of content, including #content-related, #content-quote etc.
- #siteinfo
- Used for various site related information
- #siteinfo-legal
- Copyright information etc.
- #siteinfo-credits
- Designer or other credits
E-commerce related
- #content-products
- An overall area containing products
- .products
- Referring to individual products
- .products-prices
- Prices, discounts, special offers etc.
- .products-description
- A summary or longer description of a product
- .products-review
- A customer review
- .products-(whatever)
- Could include any form of product related content
This is great for corporate brochure sites or blogs, but it gets pretty restrictive (and thus useless) for some of the kinds of things we do.
That said, I still can’t underscore enough the importance of establishing consistent conventions on the project level. This is critical and sometimes gets brushed aside in the rush to “get it done”. Which brings me back to my original lament — I wish we could get rolling on the production of projects sooner by using a standard framework of conventions (and not redesigning the wheel on every go)!
The Problems With CSS Code
This column from PC Magazine is a funny read for us HTML geeks. The author seems to get a few things wrong (or glosses over a few steps in logic), like in his assertion that:
“…CSS’s real benefit was that the layout not only could be changed easily but also could become dynamic: The content is stored in a database and presented as necessary, with instant updates.”
We all know that this really has nothing to do with CSS, but whatever…
If anything, this article underscores the true broken promise of web standards: you still need to pay a design professional oodles of money if you want to do it “right”. CSS for the masses has failed, thus far.
Using a background instead of a list-style-image…
This forum had a post regarding a good cross-browser list style hack that gives one more precise control over custom bullet point graphics. The gist is here:
1. HTML:
2. CSS: (comments added for post)
#newsList ul { /* for positioning and styling preferences */
padding:0;
margin:0;
}
#newsList li a, #newsList li a:visited {
list-style-type:none; /* removes default bullet */
background-image:url(../img/arrow_red.gif);
background-repeat: no-repeat; /* ONE bullet only please */
background-position: 0 .45em; /* .45em from top (vertical) */
padding-left:12px; /* space between bullet and text */
/* styling options below */
line-height:1.5em;
font-weight:bold;
color:#000;
text-decoration:none;
}
Pretty painless and degrades nicely to boot. Noo doot aboot it.
[F9/AS3] Scrolling engine
[F9/AS3] Scrolling engine using Flash 9 and ActionScript 3…
While I was sleeping… they released a Flash 9 BETA
Just when I’ve mastered (ha ha) ActionScript 2.0, they release 3.0. Sigh. Did I really think that 2.0 (as great as it is) would be the final step? That there was no further one needed to go? Apparently, the Adobe’s bank account says otherwise.
Read the press release about the Flash 9 Alpha.
And, the alpha “preview” download
Let the fun begin!
IE Min-Height “Fix”
Thank you. This page has a less crappy hack for the IE min-height bug:
Yes, it’s still a hack, but it’s sooooo less horrible that some of those “prop DIV” solutions, which are basically a valid CSS/XHTML way to bring back the single-pixel-GIF trick.
Here it is in a nut shell:
.rbox .content {
height:200px;
margin:0px 10px 0px 10px;
overflow:inherit;
}
html>body .rbox .content
{
height: auto;
margin:0px 10px 0px 10px;
min-height:200px;
overflow:inherit;
}
The second style is ignored by IE because of the child selector (>). Of course, once IE 7 is released, this might be fixed. So then it’s backward-compatible…
Ree-Tawr-Dead Internet Explorer Display Bug Addressed
Why don’t I see it in Internet Explorer?!
The IE/Win Disappearing List-Background Bug
This article brings up an IE bug when it comes to displaying lists. But the fix also seems to work for any element that’s not rendering properly in IE: simply add “position: relative;” to your element’s style.
Now, if only I had known that a year ago, I would saved myself a lot of grief and avoidance of obscure and questionable work arounds!
Sensible Forms: A Form Usability Checklist
Oh, List-A-Part, how lovely though art with all thine nice and useful HTML articles. This forms useability checklist should be part of everyone’s world flow (well, mostly):
A List Apart: Articles: Sensible Forms: A Form Usability Checklist
CSS Opacity and Transparency
Add this to the “How to make HTML behave more and more like Flash” pile.
Mandarin Design: CSS Opacity and Transparency
The article linked above has some great JavaScript- and non-JavaScript-based approaches to interactive opacity, and handles them cross-browser (well, on the PC, anyway).