Hosting Your Website on GitHub for FREE

A lot of people know GitHub as a place where you can share your code with the community. But did you know GitHub also lets you host websites for FREE?

There are two kinds of websites you can host with GitHub, Project Pages and User Pages. Project Pages are for individual repositories you have on GitHub and User Pages are for your entire GitHub account. In this article I will cover Project Pages.

To create a Project Page all you need to do is create a branch on GitHub named gh-pages and anything that you push to that branch will appear on www.github.io (the GitHub Pages domain).

Pretty simple, here's how to do it step by step:

1. Create a gh-pages branch

Open Terminal and go to your local project repository. 

Type  git checkout -b gh-pages
 
2. Push gh-pages up to github.io

Type  git push origin gh-pages

3. Wait up to 30 minutes...

Go to [username].github.io/[respositoryname] to see your site.

For example, my GitHub username is af19 and I have repository called typetool. So, the URL is af19.github.io/typetool

And that's that.  

One limitation of GitHub Pages is that you can't have any server-side stuff on there. That means no Ruby, PHP, Python, etc. So just HTML, CSS and JavaScript.

The creative process behind this animation.

The creative Process behind this Charge Rabbit Animation.

Charge Rabbit is a Shopify App that can be used to sell subscriptions right from your shopify store.  This app was built by my friend and he needed a video describing the app for his splash page in the shopify store. 

I consulted him on the features of the app to make sure to include all of the important information a user would want.  

I summarized his notes into a simple script and brainstormed the visuals that would allow people to understand exactly what this app does:  It connects Shopify with the subscription power of Stripe, which is a tool that allows business to accept and manage online payments. 

Connecting things, linking two apps together, that wouldn't otherwise be used together..the missing link.. puzzle pieces! 

So puzzle pieces became my characters, and illustrator and after effects became my new closest companions. I recorded the script, created all the necessary elements in illustrator and then brought them into After Effects for animation. 

Drop Dead-lines

Drop Dead-lines

Missed the post for last week... which ends up being a perfect segue into this(last) week's topic: Deadlines

Everyone endures deadlines. Whether it's with school, work, your taxes, even library books have them, but following them perfectly, that's a whole other story. We all miss the occasional one, and usually it's not a big deal; but what about those rare times when it is a big deal? 


Step 1: Own up to it.

No one cares about the miraculous chain of events that occurred, causing you to hand in your work late. Excuses sound like just that: Excuses. Own up to your error. Admitting your own mistakes will be a far better representation of character than any crazy situation you were involved in.


Step 2: Fix It.

Take the necessary steps to complete/submit the project. Whether it's asking for additional time, skipping other engagements, or pulling all-nighters, you need to finish and submit the project quickly. 


Step 3: Plan more effectively.

Take more time in the future when planning your schedule. Whether it's being more realistic with your time-estimates, taking on less work, or sacrificing your social life, your schedule is everything. A hectic schedule is far more prone to missed deadlines than an organized one. If you haven't already, try employing the calendar trick mentioned back in blog #2.


At the end of the day, procrastination is a punk and being able to hit deadlines will either make you or break you in the creative industry. No one hires anyone who, 60% of the time, delivers on time. 


—tom

Coffee Shop Branding Project

Branding project includes logo, poster, flyer, royalty card and web design.This is done in term 2.
The concept of coffee shop is “MUSTACHE CAFE” which offers organic coffee and also retro modern atmosphere. Design is simple and flat but also using subtle grain texture conveys the cafe’s atmosphere. To make it friendly design and to avoid being a just macho design, there are rounded corner strokes and feminine patterns and elements such as a ribbon and a crown. On the other hand, the website design is slightly different from the print design, using a lot of photos to show the café’s professional coffee and their specials.

Fifth Post

Ms. Brown Coffee Logo Design

To name it "Ms. Brown Coffee"  because of the color of coffee, and the target audience is female.

Coffee is brown, so the logo is most using brown color. Also, the yellow color background just likes the cream in the coffee, and want to make it looks warm. Using the coffee bean around all items because the coffee is made by coffee beans. There are three different size of coffee that is meaning we service different type of coffee and costumers will enjoy our coffee and share with their friends.Putting “ORGANIC” and “FRESH”, it shows the quality of our coffee. The coffee is using organic coffee beans, and it is fresh.

New Media and Web Development 

Coffee Shop Poster

This was an assignment I had to do for my Illustrator class.

We had already created a Coffee Shop Logo but this time we were tasked with creating a poster for the coffee shop.

I don’t drink tea or coffee. So the opportunity to design a poster about something I know very little about was both interesting and challenging to me.

A poster needs to be able to be seen from a distance as well as close up so using large text and straight to the point information was critical.

The main message of this poster was to inform people about the opening of a new store.

I created the brand logo with the intention of it being used for multiple purposes.

The image of a coffee mug helps inform the viewer of the subject.

Clean and effective design with warm welcoming colours.

Some Cool After Effects Tutorials

Since I was introduced to Adobe Premiere and After Effects, I've always been amazed about a lot of the things you can do on these software.  Some of the tutorials I've watched are really impressive.  Most of the tutorials are time consuming to follow and still not satisfied with the result.  I tried to follow a ten minute tutorial and it took me about an hour to do it.  I am still working on my Visual Effects class 1-minute music video which is due very soon.  I've had some movie projects that I still need to edit including those videos I have in my web portfolio but I guess this will happen when I have more time.

This particular tutorial below seems cool, so I decided to share it here...

http://www.premiumbeat.com/blog/adobe-effects-tutorial-power-precomps/

Four things I've learned on the (social media) campaign trail

It's alive!

It feels like it has been a long time coming but in reality it has only been about eight weeks. Eight weeks since we began this social media project. And now, eight weeks on, we have a functioning website and five active social media channels. It's an accomplishment and something I'm proud of. I'm also grateful for my team. Without their enthusiasm and hard work this project would not be where it is today.

Here are some things that I've learned on this journey:

1) It takes time.

Or more specifically, it takes more time than you might expect it to. This is primarily in reference to social media. Everything from branding to following to posting, it all takes time so it is essential to use people's time efficiently to get the most out of that limited resource.

2) Wordpress can be a challenge.

Mostly in terms of customization. The system is largely designed so that people don't need to make significant changes to the design. Themes are designed with minimal customization in mind, layout and colour options aside. This need not be limited only to Wordpress. Drupal and Squarespace, and other CMS's have similar issues so it is important to know going in that the theme needs to be very close to what you or the client wants, else it can become a major headache.

3) Not everyone knows (insert social media platform X)

And that's totally fine, but it is crucial to not make assumptions about anyone's knowledge of a platform. Each service is different, has its own language and quirks, and users expect something specific from their chosen platform. This becomes even more important when working with others who may never have used social media, or may have never used that one in particular. Further, even being familiar with using, let's say Facebook, in your personal life is far different from using it as a business or cause. The interactions differ and it is important to not assume that someone might be comfortable on it just because they may have used it before.

4) Remember that it's about interaction

Which means that your audience may react to what you say or do and that they're going to expect a response if they do. How you deal with their reaction impacts not only their perception of you (or your brand), but also how others in your audience perceive you. If you react swiftly and positively, even to negative comments or problems, it shows that you are concerned and care about your product or service. Ignoring, or worse, denying or antagonizing can lead to mistrust among your audience, which may in turn make your message carry less weight among your perceived supporters.

And now, we begin the social media campaign and try and apply these lessons to make the most of it!

Sublime Text Tips and Tricks

Sublime Text is a popular cross-platform text and source code editor. Part of the appeal of Sublime Text is its simplicity. But if you look a litter deeper, you'll find a lot of cool features hidden underneath.

Tab Completion

Pressing tab will expand the text to the left of the cursor into the best match.

For exmaple:

• html + tab creates the basic html document structure
• php + tab creates a php block
• lorem + tab inserts place holder text

Switching Between Tabs 

Often there are a lot of tabs open when working on a project. You can quickly cycle through tabs using keyboard shortcuts.

• command + shift + ] will bring you to the next tab
• command + shift + [ will bring to the previous tab 

Search All Files

The keyboard shortcut command + shift + f will give you the option to search all open files and folders. After searching you'll be presented with a results page. To jump to a specific match, simply double-click on a line.


Alphabetical Sorting

Putting things in a particular order can make them more organized. I like to organize my CSS properties in alphabetical order. In Sublime Text you can highlight CSS properties and hit F5 to sort them alphabetically.


Spell Checker

I do most of my writing in Sublime Text. If you're a bad speller like me you can enable the spell checker by hitting F6.


For more tips check out Sublime Text's unofficial documentation.

Myth Buster - Penny Drop

Have you ever heard of the myth that calls "Penny Drop"?

This myth is originated in the big apple, architectural icon, Empire State Building. The myth is that if you throw a penny from the top of the building, it falls and kills the pedestrian on the sidewalk below.

I made this video for the Visual Effects class recently, and the project that we are assigned was to pick up one of those myths and create the animation.

True of false? What do you think?

Well, check out the video and see the result!

Building Squarespace sites as a sustainable website solution.

Building a Squarespace is relatively easy if you compare it to building a site from scratch or integrating other CMS into your design.  They will even provide a free domain with an annual subscription.

You can build a completely custom site and just your their content management, or you can start with one of many templates and easily customize it to your brand.  It is made to be developer friendly as well as user friendly.  It is designed to be an accessible option for anyone, with 24/7 in-house customer support and relatively simple platform that tries not to use too much developer jargon. 

So as a developer, why should you recommend a customer use Squarespace and have to pay the 8 - 14$ a month after paying you to set it up?

Because it is a sustainable option for your customer.  Its like teaching a woman to fish instead of giving her a fish.  Unless you want to be on call to keep fishing for everyone, you can hand that squarespace over along with a quick tutorial and they should be fishing for themselves.

Fourth Post

Simple Multi-Item Slider

The slider that I used on my portfolio website. I think it is a nice slider to display works.

The idea of the slider is to  represent items in different categories, and it is using CSS animations and jQuery. 

Tutorial: 
http://tympanus.net/codrops/2012/12/31/how-to-create-a-simple-multi-item-slider

Illustrated Camera

I was inspired to create this project by my interest in illustrations, and wanting to learn how to use Illustrator’s tool sets. I found the original image online and figured it would be a great first project. I originally decided to create this as a way to exercise my adobe illustrator skills and I was entering my first illustrator class at BCIT. It wasn’t until my advanced Photoshop and illustrator class that I realized it was a portfolio piece. My first assignment in my advanced class was to exercise one of the tool sets we had been using and I wanted to explore the gradient mesh tool. I found this a good project to play around with the gradient mesh tool and definitely ran into a couple pitfalls and some minor frustration, but found it very rewarding when I had a finished piece to look at.