Tag Archives: web

Some life updates…

So I’ve been pretty busy with, you know, life but who hasn’t. Actually I’ve been trying to write another blog post after my last one which was sort of a post but not really (just a generic generated past-year result the WordPress offers, for people busy (a.k.a lazy) such as myself.

So far life has been pretty good. My last year performance got me a promotion a few months ago and ever since I got to be sort of Tech Lead for the Web & Mobile Team, which is in charge of all the front-end webapps, including both internal & client-facing. I’d say dealing with this domain has been very interesting as it’s something I have wanted to do for a long time, until I took an arrow… w/e it is still very fun, being the guy who can work on both back-end and front-end and sometimes applying design patterns interchangeably. Some of those have failed miserably due to differences in the nature of the 2 domains (1 being a beefy powerhouse serving large data in a timely manners to all sorts of requests, 1 being a lightweight routing layer with some minimal caching & compression of resources).

A change in domain also means a change in technology as well. Getting myself better with NodeJS, Backbone, jQuery and now Bootstrap has been really challenging, all of which I’ll write another post about later. Ideally I’d like to push for the stack to be more well-used within the team myself. This stack can easily be distributed and scaled horizontally. However we’re not really dealing with a consumer-product business the scalability of the UI sometimes is not a development bottleneck.

Other than work stuff, I got an email this morning, which kinda cheered me up a lil bit:

Hi Long,

I came across https://longho.wordpress.com/ while searching for resources around recipes and food and was wondering if this is the correct contact in regards to the content on the site. My team just created a graphic on the topic, would you be interested in taking a look? I’d appreciate any feedback.

Thanks in advance.

Peter

So someone actually reads my blog! And feedback. Based on the statistics I know someone reads my blog but normally it’s search query from Google and those can be highly irrelevant. I actually visited their site and the statistics about ramen, IMO, is indeed very interesting. Surviving on ramen has been 1 of the most important life skills in college. My Japanese neighbor was obsessed over ramen. I mean the dude was literally chewing through packs of those…

In case you guys wondered what he sent me, here it is:
We Love Ramen Infographic
Created by: Hack College

Pretty amazing isn’t it?

Advertisements
Tagged , , , , , , , , , ,

Uhhh… exams? Nah I’ve over it!!!! Let’s do some web stuff

So it’s our final exam week and I only have 1 exam on Tuesday which I don’t really care since I’m graduating. Sounds irresponsible but I’ve been waiting for this chance to come my whole college life!! Yeah to all you underclassmen haterz I’m DONE! 😛

Anyway I did go to see Ironman 2 and it WAS GOOD!!! It was funny and witty and of course the gadgets are cool. One thing I would comment is that I shouldn’t have watched all the trailers and read all the news cause those are spoilers!!! They put out all the best scenes in the trailers so the movie would have been 1000x better had I not watched those!! If you haven’t watch Ironman 1, watch it ASAP, then watch Ironman 2!! HIGHLY RECOMMENDED STILL

That aside, I’m actually really deciding between being a Web Developer and a Software Engineer. Web Developer is more “hip” and dynamic IMO. Software Engineer is more sorta low-level, which is something I do enjoy but Web Developer delivers a nice blend between front-end and sometimes back-end. Our MetaDB project is pretty back-end heavy so I sorta apply a lot of those SE principles on the front-end. I think it makes things a bit more organized but not very intuitive.

Web Development really splits out into 3 main components:

  1. Structure: That’s the HTML, XHTML codes. They define what content will be on the site but most of the time not how it looks
  2. Presentation: That’s Cascading StyleSheet (CSS). This decides what components look like and coming up with a clean CSS is pretty hard
  3. Functionalities: That’s JavaScript or any sort of server-side scripting like PHP, Ruby on Rails, JSP, .NET and all that. Those determine what the components will do

Now it’s 1 of those basic principles in SE to not mix those up. We have a lot of bad examples, like Volkswagen website below:

Volkswagen on the outside

Volkswagen on the outside

Now the outside looks very simple and elegant. But if u pop the hood, it’s a pretty bad mixture of inline CSS, HTML and JavaScript, which makes things really really hard to read and maintain:

Volkswagen under the hood

Volkswagen under the hood

Now it’s easy to criticize and everything but I don’t really blame the IT Dept. This sort of syntax and technology was probably pretty outdated and there’s a lot of steps to take if you wanna change a big corporate’s main page. I’ve had similar experience with bureaucracy here at Lafayette. Things here move pretty slowly and get forgotten sometimes.

One of those very important things I learned when working in MetaDB is to negotiate with my boss. There’s always tradeoffs!! ALWAYS!! The main tradeoff in web development is pretty much beauty and efficiency. Beauty can mean complicated HTML/CSS and various image div tags. Those are certainly not cheap.

One of those techniques that got used back in like Nintendo 64 is called “Image Sprite”. That is, if you have a bunch of icons, don’t save them separately cause the overhead is just too costly. Instead, you dump them all together in 1 big image file then offset within to get a certain piece, it’ll be more efficient since it’ll be loaded so many times the browser caches it automatically!!

Yup that’s 1 piece of my open-source experience that I really wanna share. Have fun and keep on rolling guys

Tagged , , ,

RESUME Redesigned!!!

OK so since I’m redesigning my website, I might as well give my resume a new look. I’ve been learning Illustrator  and this tool is so powerful I feel like I’m using 2% of its power. Changing the look of my resume is so also pretty risky due to the conservatism in different industries. But again, this is partly to keep my creativity fresh and inspiration going. I still maintain a .doc version of my resume, more formal and less “glitzy”. So here’re the 2 versions of it:

The conservative one

The conservative one

The "cool" one

The "cool" one

I was also surprised that most web design principles seem to apply to resume design since it’s a presentation of yourself anyway. So I tried to follow these rules:

1. Large name: Yeah very very large cause it’s the most important thing in your resume. You want the recruiter to remember your name and a big font is pretty much a slap in the face (LEARN MY NAME!!!)

2. Different font: Times New Roman just wouldn’t cut it anymore, Helvetica Light will take over PERIOD. But my point is to use something other than TNR and Arial. Even Microsoft Office changed its default font to Calibri which is pretty elegant

3. Spacing: Yeah apparently I wanna give my resume some spaces to breathe. Too much text is just… too much. I also try to simplify the sentences since people have been asking me what those mean. K.I.S.S is the rule of thumb

4. Images: Text itself is boring. Your school logo with low opacity in the background will work exceptionally well. I think it looks “official” also. BTW it doesn’t have to be images, line breaks work just fine.

5. Rank your skills: Some recruiters ask you to rank yourself in the phone screen so that they can find the development team that best matches your strong skills. Well, to avoid that I’d just rank myself since my levels in those skills are not the same.

6. Efforts: Put efforts into it. It’ll look sloppy if I don’t. It’ll also show that I’m serious at presenting myself, even on a piece of paper w/o all the fancy animations.

So those are the rules I think that are pretty important. Just to throw in some bonus awesome web designer resume, here they are:

This girl uses Facebook format as her resume:

Facebook Resume

Facebook Resume

This guy uses a lot of graphs and takes full use of his Illustrator and graphic skill:

Graphical Resume

Graphical Resume

Ok so that’s it.Oh BTW I’ll be going to NSBE Conference from Wednesday to Sunday so probably I won’t be blogging till I come back. In the mean time, have fun designing!!!

Tagged , , ,

Redesigning my site!!!

So I’ve been a bit late in blogging today (normally I blogged at like 2a.m) cause I’ve been working on a new skin for my website. I got bored after looking at it for a while so a redesign would also help keep my creativity fresh. Also there’re a lot of awesome professional web designs out there that brought to my attention so I’ll dedicate this post to some of them. So this’s what I have so far as the prototype:

Prototype Site

Prototype Site

So I’ve tried to simplify it and keep focus on certain parts of the site. I also tried to minimize all the descriptions and stuff since reading is not really that fun in general. Hmm what else, oh brighter background and tetradic color scheme. The glasses in the background are the closest ones to mine that I can find on stock xchng. BTW, if you want high quality plain images of objects, go to stock xchng at http://www.sxc.hu/. They have really really high-res pictures. Of course it’s non-commercial and for personal use only.

I also found out that my domain is surprisingly close to another domain called azndesign (mine is azndezign). Coincidence lol! The guy is also Vietnamese and is a graphics & web design. He’s much more experienced than me though. Anyway, besides stock xchng, you can also visit http://colorschemedesigner.com/ for color scheme generator (wait I think I mentioned that).

For inspirational purpose, you can check out some of the top web designs right here:

http://www.thebestdesigns.com/

Also here are the best CSS website collection:

http://www.csselite.com/

Some of my favorite ones are here:

Aaron Beall

Aaron Beall

Morphix

Morphix

N-Design Studio

N-Design Studio

Oh btw CSS websites refer to non-flash web. I myself am not a big fan of flash although it’s a very strong animation format. Well first of all Mac can’t run flash, yeah Flash will burn your Mac processor. It’s an architecture problem so it’s unlikely its gonna get fixed soon.

Flash is also not compatible with iPhone so you have to maintain 2 versions of your site, which is a pain. Flash also requires flash plugin and that leads to some additional security issues. Yup so stick with XHTML/CSS + JavaScript. Aaron Beall’s site is just too awesome I gotta make an exception for it. Kk guys have fun and keep on designing!

Tagged , , , , , , , , , ,

Vector and Raster graphics… what?

It’s weekend so I was kinda lazy. I’ve made a resolution to try to blog on average once a day so gotta keep it up.

Anyway, I’ve been doing some research on web design and stuff like that recently as you can see. Well when it comes to web design Photoshop is really your best friend but I’ve seen people using Illustrator and I was like what’s the deal with that? Photoshop is mad powerful in image manipulation and its not enough.

Well then I googled a bit more and found out about vector and raster graphics. I recall “layer rasterize” in Photoshop but didn’t really understand what that means until I found out about this. So what are the 2 types?

Raster graphic is pretty much any kind of image you see on your computer: jpeg, png, gif… those types are bitmap images, which are literally a map of bits. In other words, it’s like a grid of pixels and each pixel has a color (hmm you can read about Color in my previous post).

Well this kind of image is very popular and reasonable lightweight. But there’s (huge) problem: pixelation. When you zoom in those images, depending on your awesome image viewer which might perform some optimization and Anti-Aliasing, you might get a pretty good image. An example would be like this:

Anti-Aliased Zoom

Anti-Aliased Zoom

So instead of having a distorted image of checkerboard, AA tries to calculate surrounding pixel for sample colors and adjust accordingly. But it’s still UGLY. In fact I think AA came out cause most pictures are bitmaps and zooming is definitely helpful.

Now coming back to Photoshop, say you create text field with your fancy font and your fancy color and all that. Now you wanna apply some shadows and blur and those kinds of effects. You can’t do it PERIOD! Unless you rasterize it since those manipulations only work on raster images.

So what’s your text? It’s a vector image. Vector graphic is pretty a picture comprised of vectors. The file format is normally EPS. So what do you mean by vector? I mean shapes and lines. A vector is based on mathematical calculation so a diagonal line, in raster graphics means a whole bunch of pixels in certain positions having the same color, in vector graphics would mean literally a line, a bunch of points in xy-coordinate (Cartesian).

So this difference makes vector graphics very flexible to zooming since it just need to rescale the points of the vector and apply colors accordingly.

Vector and Bitmap Comparison

Vector and Bitmap Comparison

Now this makes raster graphics look bad. Yeah it does. But reality cannot be easily captured just using vector graphics. There’s been vectorization tools but so far it can only convert to a certain degree. Also gradient, shading and all those are really hard to be vectorized. As you can see the soda bottle up there doesn’t really have true gradient to it.

However vector graphic has developed into its own field and the images are really really mind-“blasting”. Some bonus examples:

Light Bulb Vector

Light Bulb Vector

Jessica Alba Vector

Jessica Alba Vector

Both pics cannot apply gradient properly due to the nature of region between vectors. However if you zoom out or rescale like I did, it looks pretty legit.

Ok guys have fun and keep on designing!!

Tagged , , , ,

Gradient… cool web 2.0 stuff

Now cool text and good choice of color should be sufficient to take web to the whole another level, but speaking of web 2.0, gradient has almost become a requirement. Gradient represents a gradual change from 1 color to another and you actually see gradient everywhere. Shadow is a type of gradient, spreading from black to white or transparent. A lot of photoshop effects uses gradient, such as bevel and emboss, inner/outer shadow and such. In fact gradient is so popular and powerful that CSS3 tries to incorporate native gradient instead of having to use images to create such effect. So how come gradient became so popular?

The answer is pretty simple: gradient creates depth and gives the interface another dimension. It makes the web more detailed and sophisticated and also provides a nice blend between colors. It also creates mood which can serve certain purposes. Apparently a flat surface just doesn’t work out sometimes so the illusion of distance will definitely come in handy. I’m not too skilled at Photoshop but this is a small demo to illustrate gradient’s importance.

Say you have this crappy text on a blank white screen:

Boring Text

Boring Text

Now this is dull and boring. You can spice it up using different font and background but let’s stick with this monochromatic scheme for now. Now once you’ve put a little gradient background in, it looks like this:

Text with gradient background

Text with gradient background

Now the gradient seems to divide the background into 2 parts with a little depth to the lower path. Actually based on we you position your text, the lower part can turn out to be back layer and the shade of grey might act like shadow, like the navigation bar in my personal homepage.

This is not sufficient to make the text stand out though. Reflections might work pretty well here since we have another depth level to the background:

Text Reflections

Text Reflections

Reflection itself can be very important and can also create depth with/without the gradient background. It also indicates there’s a light source above the text, which you can play around with if you want. However it brings depth to the environment rather than the object itself. So a little gloss will make the text stand out:

Glossy Text

Glossy Text

Now glossy object indicates that the object is definitely not flat since the light reflected on itself is not the same everywhere. Such illusion can certainly spice up the boring text I gave earlier. Another example of a clean, simple and elegant web design with nice gradient is right here:

Simple & Clean

Simple & Clean

Well, there you go, my 2 cents on gradient and how it improve web experience. In fact any button nowadays must have some sort of gradient/gloss to it so you might not even realize until you try to create one. Have fun and keep on designing!!

Tagged , , , , , , , ,

Colors… Web 2.0 part 2

So as we all know computers are pretty much 0s and 1s put together in different orders and voila! you have virtual reality. One of the very important factors when constructing virtual reality, or games, or web site of anything on the computer is color. So how do computers represent color in numbers?

In fact, the concept is exactly the same as when you actually mix colors on a color palette. Say if you mix black and white, you have grey and so on. Well there are mainly 2 color models that computer uses: RGB (Red – Green – Blue) and CMYK (Cyan – Magenta – Yellow – blacK). In this post I’ll mainly talk about RGB since I’m more familiar with it.

RGB

RGB

CMYK

CMYK

Anyway, computer mixes and creates new colors based on those 3 basic colors Red Green and Blue. The intensity of each color is represented in numeric values: 0 – 255 with 0 being no color of that kind and 255 being totally of that color. Now 0 – 0 – 0 actually represents black and 255 – 255 – 255 represents white. Well, technically…

***nerd alert***

… those colors are in Hex, which goes from 00 to FF. So white is FFFFFF and black is 000000. Red is FF0000 so on and so forth.

***nerd alert***

Anything in between with same combination of each represent different shades of grey. Other than that, computer also uses HSV (Hue – Saturation – Value) to adjust colors and their different shades. You can read more about that right here: http://en.wikipedia.org/wiki/HSL_and_HSV

Now we all know there’re Warm Color (Red – Orange – Yellow) and Cool Color (Green – Blue – Purple). Combinations of these can create very attractive interfaces. I believe those rules are actually based on the color wheel.

Color Wheel

Color Wheel

As far as I’ve known, there’re several rules or color schemes when it comes to color combinations:

1. Monochromatic: Just like it sounds, this color scheme representing the use of 1 specific color with different shades and saturation, for example blue, light blue, dark blue… Facebook can be regarded as using Monochromatic color scheme, mainly blue. My homepage is also monochromatic: it’s mainly black, white and different shades of grey. On the color wheel, it would actually be just 1 color on the wheel.

Monochromatic Color Scheme

Monochromatic Color Scheme

2. Analogous Color Scheme: This scheme represents using colors next to each other, for example red, yellow, purple, of course you can throw in different saturations and lightness also. Similar colors next to each other is a rather safe choice of color mixing since it rarely creates color conflict.

Analogous Color Scheme

Analogous Color Scheme

3. Complementary Color Scheme: This indicates the usage of colors from 2 different sides of the color wheel. This can create contrast and focus on specific areas of the content. It can also create unbalance if not used carefully.

Complementary Color Scheme

Complementary Color Scheme

4. Split Complimentary Color Scheme: I think this one is sort of a nice blend of the previous 3. It also offers a wider variety of color choices if you want to spice up your website. You can still keep the focus on certain high contrast area and still make it blend in with the rest of the site, pretty cool huh!!

Split Complementary Color Scheme

Split Complementary Color Scheme

5. Triadic Color Scheme: This one also offers a large collection of color choices. The colors are split evenly on the color wheel, which can be 2 warm – 1 cold color or vice versa. This can also create high contrast if placing the 1 cold/warm color on focus.

Triadic Color Scheme

Triadic Color Scheme

6. Tetradic Color Scheme: A combination of analogous and complementary. Now you have 2 analogous on each side of the color wheel so 2 warm – 2 cold colors. Same advantages and disadvantages as the above mentioned but can also be very risky.

Tetradic Color Scheme

Tetradic Color Scheme

So that’s it for colors… I hope this is useful. I’ll talk about gradients and reflections next time. My college campus just got blackout so my website is currently down. I gotta migrate it to my own domains from JustHost.com, hopefully it’s not too shabby. Have fun designing!!!

P.S: There’s a pretty awesome color scheme generator website right here so feel free to check that out: http://colorschemedesigner.com/

Tagged , , , , , , , , , ,

Web 2.0 Stuff… hmm Part 1 I guess – FONT!!

Now in case you don’t know what Web 2.0 is, it’s pretty much everything you use nowadays including social media like Facebook, YouTube and all that. It’s a new trend of web design both in terms of visual interface and technology. The technology part I believe is mainly the development of AJAX (Asynchronous JavaScript And XML), which gives you the ability to push/pull specific part of your website without reloading the page, like what I did with my personal homepage right here: http://www.azndezign.com

Anyway to me AJAX is really cool since you might have realized a big part of a website might be its template. Well it’s also useless to reload the template cause it’s not gonna be changed until the webmaster upgraded the site itself (like Facebook changed its template 125816 times in like 3 months). Thus, web becomes more efficient, data gets packed into its very raw form and then made beautiful once its gets to your Firefox (or IE/Chrome/Safari) browser, saving you Internet traffic bill every month (yes!).

The more impressive part of web 2.0 is the significant change in visual interface, particularly the elimination of using tables with “spacer.gif” (yeah I hate spacer.gif so much) and switch to liquid/fixed/hybrid div tags which are cross-browser compatible and visually stunning also. In this 1st part I’ll talk about FONT!!!! Yes web 2.0 font is nice and elegant for sure.

So let’s see… I believe there’re 2 main font family: serif and sans-serif. What is serif? serif indicates the stroke at the tail of the letter like Times New Roman font:

Serif fonts

Serif fonts

I saw serif fonts more often in headlines and sans-serif in the body, probably because too many strokes confuse your eyes. You can read the details on Wikipedia so let’s not dive into history too much: http://en.wikipedia.org/wiki/Serif

So what is sans-serif? sans-serif fonts don’t have those strokes. They look more fresh and creative than the traditional mentioned fonts. Arial is 1 example of sans-serif but for web 2.0 I see a lot of people using Helvetica.

Helvetica Font

Helvetica Font

Most computers do support this font. Otherwise, Verdana is also equally nice and is a web-safe font just like Times New Roman. In general I believe there’re 9 web-safe fonts that are on both Windows and Mac OS X:

9 Web Safe Fonts

9 Web Safe Fonts

As you can see, there’re only 3 serif fonts out of 9, which means sans-serif is taking over (soon).

Besides choosing a nice font-family, a reasonable font size is also necessary. 12pt seems to be the common standard that works in most screen resolution. You don’t want the font size to be too large, which can cause pixelation and make you page look totally ugly. Of course too small means people can’t read your page properly.

In addition, you can incorporate your own fonts using CSS (Cascading Style Sheet). For example I use Ubuntu font for my navigation bar in my homepage:

@font-face {
font-family: "Ubuntu";
src: url(fonts/ubuntu.ttf) format("truetype");
}

Ubuntu Font

Ubuntu Font

This font looks kinda cute, clearly sans-serif but requires additional rendering from the browser. Also it’s a good practice to fall back on a traditional font if your computers/web browsers do not support those. You can do that in CSS:
font-family: Helvetica, Verdana, Arial, sans-serif;

What this does is it tries to render the web page using those fonts in priority. 1st priority is Helvetica (my favorite), if Helvetica is not available, then Verdana, then Arial, then any type of generic sans-serif fonts that computer has. You can change this weight by adjusting
font-weight: bold;

if the font supports bold text. Now if you’re good at graphics design and typography and all, you can even make your own font. Making a new font is rather complicated since you must follow a specific set of rules

Anatomy of Letterform

Anatomy of Letterform

So there you go, pick your favorite font or make your own and keep on designing!!

Tagged , , , , , , , ,