How to use CircleCI to deploy a static site to Cloud Storage instead of S3

Fun fact: you can host websites in S3. For single page apps (SPAs) I would always recommend this approach since it’s cheaper and more resilient than hosting nginx to serve mere static content. Put a CDN like Cloudfront in front of it and you have a fast, resilient, and cheap static site.

 

I wanted to see if this functionality can be done in GCP’s Cloud Storage. Short answer: sort of. Technically you can, but:

  • dynamic routes (ReactRouter and friends) will return 404 status codes
  • you can’t point GCP’s CDN to your static site so you’d end up using a 3rd party if you want HTTPS
adult beanie crisis despair

Because life’s hard, Jhunmar. Get over it.

 

The cheapest and easiest way to host a website in GCP right now would be through its App Engine. But if you really, really, really want to go the Cloud Storage route here’s the how-to:

1. Use the google/cloud-sdk image

docker:
 - image: google/cloud-sdk
   environment:
    STORAGE_BUCKET: mywebsite.com

Note the $STORAGE_BUCKET env variable that points to the bucket we’re deploying to.

 

2. Authenticate gcloud cli

echo $GCLOUD_SERVICE_KEY > ${HOME}/gcloud-service-key.json
gcloud auth activate-service-account --key-file=${HOME}/gcloud-service-key.json
gcloud --quiet config set project ${GOOGLE_PROJECT_ID}

The $GCLOUD_SERVICE_KEY and $GOOGLE_PROJECT_ID are env variables that you set in the CircleCI UI.

This script will save the service key to a file, use that file to authenticate to gcloud, and then set the project default project.

 

3. Call gsutils to sync your site

gsutil defacl ch -u AllUsers:READER gs://$STORAGE_BUCKET
gsutil rsync -R /tmp/workspace/dist gs://$STORAGE_BUCKET
gsutil setmeta -h "Cache-Control:private, max-age=0, no-transform" \
 gs://$STORAGE_BUCKET/*.js

First, we set the bucket to be publicly readable (AllUsers:READER).

Then, we sync the output of my build to Storage.

Lastly, we make sure users get only the freshest js by disabling caching.

And that’s it! Checkout the complete configs here.

I’m clouding, yo!

This blog is now clouded, yo. And I have a new domain name too.

Thanks to my newly gained experience in cloud and networking magic and, more importantly, my longtime webhosting provider jumping the shark I finally migrated to technology’s latest buzzword.

Philwebservices Started Sucking

I loved PWS. They did an excellent job despite being cheap. I didn’t hesitate recommending them to other people. They were very helpful when this wordpress blog got hacked. Things were going well until…

One day, they started migrating to the “cloud”. Maybe it was their sales team receiving an AWS webinar invitation. Or their CEO getting left out in this year’s Web Hosting conference buffet.

First, my .php files stopped working. I checked and they were gone, removed. As if some staffer did an “rm *.php”. I filed a report and then restored the site from my local backup.

Then, I can’t do file transfers anymore. Even the CPanel locked me out. I tried emailing their customer support but they did not reply. Their live chat support doesn’t work. Even their social media stopped updating mid November. I tried calling them but they weren’t answering.

I only received a reply when I emailed sales instead and told them I’m cancelling my account; the reply had 3 paragraphs of upsell followed by “Your account is still active. Why do you want to transfer?”

What Was In My Head:

… because I’m losing the advantage of using simple FTP to update my site and having you guys have my back when things go wrong, and I’m technically capable of running my own cloud apps anyway.”

My Polite Reply:

… because I want more control in my domain and hosting. And customer service hasn’t been that good to me, lately.

They asked for my phone, expecting that they’d call me immediately after. I ended up missing their call twice (I didn’t know they’d call after office hours). I tried calling back but they don’t answer. I tried asking them for a time to expect their next call but no response.

Codeanginamo.com goes to limbo

This went on until my domain registration expired. Turns out I can’t transfer my domain now that it’s expired. It will be in limbo for 3 months where it will be auctioned by enom (their domain provider). If no one buys the domain, its freed back to the market and I can buy it then.

“Sir, there’s a high chance other people will buy your domain, unless”, said sales/customer service girl, “you renew your domain with us. It will be safe with us for 3 months until you can transfer the domain.”

Forget the domain, man

Lesson learned: keep your domain and web hosting separate. They really shouldn’t be controlled by one company. You can keep an instance of your website on different webhosts and have your domain point to one instance and have the others as backup. If main host goes down or gets hacked or whatever, just point the domain IP to the backup. D’oh. It’s an easy mistake to make especially when I was young and didn’t know a lot about the internets.

On the up side, I now own nginamo.com (non-Filipino speakers should pronounce this as en-gee-na-moh). And I can subdomain the shit out of it!

Anything from:
http://app.nginamo.com
http://beta.nginamo.com
http://mail.nginamo.com (ako@nginamo.com)


to the obvious:
http://ta.nginamo.com

I am the proud owner of the internet domain equivalent of a Batas song.

Why educators don’t like video games

Here’s a research topic: the effects of video games on low income households.

We often think of games as this epic thing that will “revolutionize learning” but we forget that it’s also a “pangmayaman” hobby. And I’m not only talking about the barrier to entry, mahal talaga maging gamer. Pero the cost of game addiction is even more real for a masa gamer (the type who plays dota in the internet shops all day). A game addict rich kid can afford safety nets to keep them from the downward spiral (parent moves you to a different school, parent finds time to play with kid), but for a masa gamer kid once you get adik wasak ka na.

Then there’s also the idea that game addiction is a form of escapism. That the reason someone gets addicted is because they are trying to escape from real world problems. Eh di that makes you very vulnerable, masa gamer.

A few years back (when Reality Is Broken was just coming out), I had this conversation with an old teacher about games and education, something she said stuck to me to this day (paraphrasing):

The brilliant minds I meet these days are what you would call “gamers” or at least someone adept at playing them. But I have also seen dumb students get dumber because of video games. Is that how games work, it makes smart kids smarter and dumb kids dumber?

I was dumbfounded. The easy response would be to say that who the educator calls “dumb” may just be someone who doesn’t fit in the educational system and that the skills developed in video games cannot be easily translated to getting high grades in the classroom. But it’s not that simple in reality. For a public school masa child, getting high grades ensures him a spot in the special class where the best teachers the public education system can afford teach. This system goes all the way up to college. Video games like any other addicting hobby leads kids down a slippery slope of a broken educational system.

That video games gets in the way of our education system is where the educator’s stigma against video games originates.

for more thoughts on educational games, clik the pic

I see two ways people are trying to fix this: either our education system changes and start looking at video games equally as they see books or movies or music (that is as a valid expression of culture rather than addicting hobbies) OR people start making games that is more fit with the current system.

The former is bound to happen. As a generation who grew up with video games starts  taking over education, the stigma will ease itself out naturally.

The later, however is why I have a problem with the way some “educational” games are being made. The biggest mistake you can make as a game designer making games for education is to perpetuate the idea that a game is less educational because it didn’t feature lessons from chapter 3 of a Biology textbook.

Video game legitimacy will come naturally. As game creators we only have to make sure that when that day comes, we have built a library worthy of study and research.

Why is my canvas image looking all scaled? (HTML5)

If you are doing some drawing with the canvas and you find your images getting scaled even if you swear you didn’t set the .scale property (JawsJS, EaselJS) then allow me to show you, my imaginary reader, the crazy magic that could be causing it.

Canvas and CSS

Canvas is just a place for you to put bitmap data. Its 2 attributes, height and width controls how many pixels the canvas contains. So this:

<canvas width="240" height="240"></canvas>

just initializes a 240×240 bitmap data. The canvas keeps that data and does whatever it wants with it. The rest of the DOM can’t do anything with that data.

CSS is where you tell the browser how the DOM should be rendered. Its primary purpose is laying out your DOM to make it look cool. So what happens if you set the css height and width of a canvas?

<canvas width="240" height="240"></canvas>

<canvas width="240" height="240" style="width: 480px; height: 480px"><canvas>

Here’s how CSS and Canvas negotiates their renderings: the CSS asks the canvas for the bitmap data so he can render it. The canvas shows her bitmap data. CSS turns the bitmap data into pixels based on the CSS rules he was given. “Hmm.. canvas says she has 240×240 bits of data, but my orders are to draw them in 480×480 pixels. This means 1 bit data is equal to 2×2 pixels. Cool, I’ll tell the browser about this.”

CSS tells the browser that he’s got all the layouts done and browser can now go and draw it on the screen. And that is why your canvas is all scaled and shit.

More boring explanation here

Action Reality

Recently, I played an unfinished arpg by Matthew Gartland. The game had no intricate backstory other than I asked him for a copy of the game instructions and I decided to give it a go after reading and re-reading it for a few weeks.

It was a rather playful experience, with instructions carefully balanced between light-hearted and ominous. It was short and took me less than 30 minutes. I could have finished quicker but I felt that the game wasn’t meant to be played like a race. It was more like a tour, as if I had an invisible tour guide pointing me to things I wouldn’t have looked at.

*SPOILER ALERT*

the game starts here

"you are moving against the flow of the water, which keeps you safe"

"Do not enter this building, it is very dangerous"

Contemplate the afterlife

"Go across."

In the end the game told me to find a safe spot to solve the final code phrase. I did it in a bus shed beside an American tourist couple. I was tempted to pass the game to them, if only I hadn’t written the solutions over the instructions.

PGDF Awards (part 3)

Part 1 | Part 2

I was going to sweep the whole PGDF awards thing under the rug but this morning they emailed me that some of the judges and organizers reconsidered and now my game is in the right category. The game is now up against Jan Jan the Jeepney and Crazy Kite!!

Edutainmentastic!

Because it's not Filipino if you don't put a Filipino flag in it

I’ll be blunt and say that these games have as much “culture” in them as an Ibong Adarna coloring book.

I know it’s tough to make a game but as someone who believes in the creative potential in games I feel frustrated  when seeing games like this as the representative of our Filipino identity.

Citizens, let’s do our civic duty and vote To The Flowers of Heidelberg.

Also vote for the more awesome Circle Speedster.

PGDF Awards (part 2)

(part 1 here)

The application process could have been simpler. The nomination instructions were hidden in a subpage. I had to get birth certificates and stuff just to prove the games are authentic Filipino. Are we that distrustful as an industry that we’ll think someone is going to cheat here?

Last Wednesday, I received an email telling me that public voting is on and I should promote the game. And oh, public voting ends the following Wednesday. I checked the site and…

... the best PC/Mac game is in your browser's cache folder

The game, a browser, non-executable, installer-free flash game, is nominated for the Best PC/Mac game!  Ha, an awesome game is awesome, right?

Maybe the organizers “saw what I did there” and took me on my joke so I emailed asking them if it’s ok to nominate the game for the Cultural award instead. No sir, the voting and judging has begun so you can’t switch categories. What?! Wwwait, does it imply that no judging happened between the time I sent my application and the voting page was set up?

Oh well, at least Circle Speedster is there and, no offense to the other entries, it’s hands down the best game on that list. I was hoping to find something like Wildfire or at least some Indigo or Gonzo flash games. Either the organizers failed to advertise the event enough or the game developers couldn’t be bothered.

Seriously, play this first then vote the hell out of it.

Btw, you need to register to vote. It’s 2011, setting up Facebook Connect can be done in an afternoon. (But Julius, they’re game dev people not web developers.)

(part 3 here)

PGDF Awards (part 1)

Getting awards isn’t really a priority in all my game-makings. I’m not keen in joining sponsored/professional competitions. They tend to be serious and stressful and that level of competition just isn’t fun for me. Besides, the games I like to make and the games judges expect rarely exist in the same universe.

Sure, I dream of making a game worth entering in the IGF but only for the thrill of having my game played by the people I look up to and getting interesting feedback.

Back in college, my cousin and I decided to join a local film festival. It wasn’t big or anything, but it was a ‘celebration’ of Waray film making. (Yes, apparently Waray film making exists). Knowing the most likely entrants, the Liberal Arts /Humanities folks, we expected a bunch of serious, artsy “socially relevant” videos with sad piano scoring. We hate that kind of films. I’m Waray, and that’s not the kind of movie that represents me. Something has to be done! So with a digicam, a ski-mask, and a basic premise, we went around the campus one afternoon and made our own art film. The artsy stuff still won the competition but we had the entire audience laughing. Except for some minor grammar corrections, our awesome poet+professor congratulated us on our “intelligent comedy”. This was a big deal because he’s a guy who can weave multiple layers of humor into a poem IN WARAY-WARAY.

4 years later, I have given up on my plans on winning a Cannes and turned to making bidyogeyms instead. A month ago, I saw this:

Is this legit?

It sounded like a cool idea. But somehow it reminded me of that film festival. Is this a sincere celebration of whatever video game making progress we made as Filipinos? Or is this another attempt at self-validation by the game companies? Is this legit enough to bother joining?

Who are the likely entrants?

The Philippine game industry is small and most of them are into outsourcing, so fewer still are companies with original IPs.  Having only one or two companies join and getting awarded because they have a different business model isn’t exactly the purpose of this event… is it? But wait, mobile has been a buzzword this year and developing in it is relatively accessible maybe there are a bunch of low key game devs who made something awesome recently. There are also browser games. There’s at least the possibility of diversity.

What’s the judging process?

Again, small industry so I have a fair idea of who the jury might be composed of. I’m not a big fan of judging by criteria just as I don’t like game reviews that score audio, graphics, gameplay separately. The criteria might serve as a guide and won’t be strictly followed I suppose.

It says in the application form that I can only choose to nominate a game at most 3 categories. Maybe they are expecting a lot of entries, to make it easier for the judges? But shouldn’t categorizing the entrees be part of the judging process? People who want to award video games should know enough to see which category applies to what game, shouldn’t they?

What are the award categories?

Third, I checked the categories and the first bullet point LOLd me: “Cultural Award”.

Making games about Filipino culture, just like making ‘educational’ games, is a touchy subject for me. Games that are designed for this purpose are usually horrible, immature perversions. They are less about culture and educating than they are about asking for societal validation. “Look Ma, you say games are a waste of time. I made a game with maths and also tell you what our national flower is.” The situation was similar to the film festival.

Something has to be done!

I’ll enter a game, a “local culture” game. I’ll nominate it for an unrelated category and see if the organizers care.

Nominating for Best Mobile Game would be too easy. The description hints at it being about culture.

I will also nominate a super awesome totally indie game and see how it fares against the IPs of the game companies.

"Indie spirits" sounds like an awesome publishing company. They also sell liquor.

(part 2 here)

From Flash to Atari 2600

For more almost 2 months now, I’ve been trying to learn making games on this:

Fun fact: I have never played on the actual machine

Why (normal answer)?

I didn’t have real assembly programming experience so I have no idea how hard the ‘good old days’ actually were. (Blame my college instructor who only met us thrice, gave us passing grades and disappeared).

I want to make a video game under serious constraints as a tribute to the pioneers of the medium (see A Slow Year, Halo 2600).

Most of my games are made in Flash and even if I worked for the industry I still get weird looks when I introduce myself as game developer. “Flash? Real game developers use C++.. nay, REAL developers use assembly!”

Why (artistic/pretentious babble)?

Most of my video game stuff is a cultural commentary. My imaginary critics may claim that my games are commentary first before game, that they would be more fun if I lose all my baggage. They’d be imaginarily right, except I’m not really interested in making the next Angry Birds. The continued interest that I have for game dev, despite my bad experience professionally working in it, stems from my frustration from developers trying to make a Filipino video game. Anito was awesome and all but why did we stop there, you guys? (There are a lot of factors inhibiting us from expressing our culture genuinely. I hope I’m able to address them in this other game I’m working on.)

Also, sometime last September, I was able to play this:

You might need a translator to play Spanish games

Prior to playing them, I had no idea Spanish video game culture was THIS old. Then again, my knowledge of European video game history is very limited.

The design and narratives of the old games reflected the culture of their creators. They might have been trying to compete with the global market, but they worked with a very Spanish taste. Game creation then didn’t have the rigid commercial rules we have now and in effect forced their creators be very personal in their approach. This ‘authenticity’ is what I find most interesting.

Wouldn’t it be cool to see how in the middle of Martial Law and the EDSA revolution and the aswangs and manananggal some guy rage quit his Pong game and decided to make his own? How will Marcos and Communism and Eat Bulaga play into the creation of 4kb worth of digital entertainment?

Making a game in one of the earliest gaming platforms now won’t change how history was written, but I want to see how a Filipino programmer in the 80’s would have made his own video game.

Flowers for Jose Rizal

Last May, I maybe started this game collective. There are a lot of reasons why I did that but they’re fit for another post. Now, a game collective isn’t one if we don’t at least make games for ourselves. So we did just that.

We were supposed to make a game about Jose Rizal to celebrate his 150th birth anniversary. I made a sorta game about his poem To The Flowers of Heidelberg.

It's a art

I have never read Rizal’s novels beyond what was required in school, though I like his poems. Rizal originally wrote in Spanish and experts say we miss a lot of his wordplay by reading it in translated English. But I trust Nick Joaquin’s work and his version of the poem.

When I was a kid, the poem used to be about patriotic nostalgia, but now that  I’m roughly at the same stage as Rizal when he wrote this its meaning got a little personal for me. This was written in the middle of Rizal’s intellectual growth in line with pursuing his passion. He and his “illustrado” friends are travelling in Europe, picking silly fights, fencing and modelling for paintings, along the way discovering the concepts of nationhood and freedom. 10 years later, he will be martyred for inspiring a revolution and attacking the Catholic church, his friends will die or be killed in the uprising, and his country will be sold to the Americans. In ten years, shit got totally real!

It would be cool to think that what I’m doing would be part of some revolution in the next decade and I hope no one gets killed (figuratively of course) because of it.

Play Flowers of Heidelberg

Technical Notes

I tried to remove non-essential elements of gameplay knowing that it would only diminish the overall impact of the game. My goal wasn’t to make something addictive, though I could have tried that it wouldn’t feel right knowing the subject matter. I believe some games should only be played once and its abusive for games to force players to play far longer than they have to.

Thanks to the notgames community for the insights about the game.

 

[Sorry, the two people who read this blog, for my radio silence this past few weeks. I’ve been busy working on paid stuff, that I can’t actually show here. Anyway, I’ll post project updates soon.]