CSS Alignment

Dead Center

.dead-center {
position: absolute;
top: 50%;
left: 50%;
margin-top: -height/2;
margin-left: -width/2;
height: 70px;
width: 250px;
}

Demo

what is the difference between inline element & block element with text-align:center?

A block element defaults to being the width of its container. It can have its width set using CSS, but either way it is a fixed width.

An inline element takes its width from the size of its content text. (width: auto)

text-align is applicable to text inside block/inline elements only

To align block element (with specified width), use margin: 0 auto;

A simpler way to right-align a block-level element:

.block {
 background-color: blue;
 margin-left: auto;
 margin-right: 0;
 height: 100px;
 width: 250px;
 }

Absolute Alignment

.block {
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
/* or
left: 0;
right: 0;
// doesn't work in IE6,7
*/
 }

Vertical Align

Ref: What’s vertical align? – CSS Tricks

How do I vertically align text next to an image with CSS?

<div>
   <img style="width:30px;height:60px;vertical-align:middle">
   <span style="">Works.</span>
</div>

Understanding vertical-align, or “How (Not) To Vertically Center Content”‘

So how do I vertically-center something?!

#myoutercontainer2 { line-height:4em } /* Single line of text */

<style type="text/css">
	#myoutercontainer { position:relative }
	#myinnercontainer { position:absolute; top:50%; height:10em; margin-top:-5em }
</style>
...
<div id="myoutercontainer">
	<div id="myinnercontainer">
		<p>Hey look! I'm vertically centered!</p>
		<p>How sweet is this?!</p>
	</div>
</div>

How to properly vertically align an image

.frame {
    margin: 1em 0;
    height: 35px;
    width: 160px;
    border: 1px solid red;
    position: relative;
}
img {
    max-height: 25px;
    max-width: 160px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background: #3A6F9A;
}

Altogether: 5 methods to vertically center any element

Ref: Horizontally Centered Menus with no CSS hacks

Rexy.me 1.5 years look back

I still remember it was end of October or beginning of November, 2011 when I was going to graduate and trying to find my first job. I wanted to have a blog hosted and coded by myself as my first one was on blogger. So I went and coded it using CakePHP framework. I find naming it a bit difficult but finally went for a xyz subdomain @ huuthinhhouse.com. xyz was inspired from my English name rexy 😀

As far as the design is concerned, Its top header containing my blog name and title was mostly inspired from Jacob Wright’s blog. Of course, my so-called “Rexy theme” is a completely different design which consists of 1 column – the main content only.

But it didn’t last too long. I started my new blog project somewhere during the summer of 2012. It was mainly because I found it too time-consuming having to build very basic blog features from scratch. Besides, as a self-coded blog, blogging and importing content from my old blog was extremely inconvenient as well. So I went to build another blog using WordPress based on the original design and still hosted at @huuthinhhouse.

I added in a “brand new” footer, animated header and removed all the unnecessary stuff in the left hand side. Apparently, it was much neater and more professional. But again it didn’t last long either. In fact, I bought and did some HTML5 experiments at the new domain rexy.me just a few months later. After some hesitation, I finally migrate my whole blog here.  Design wise, it’s basically same as the 2nd one with some considerable improvements.

I particularly love the new navigation. I think it’s just awesome! 😡 The footer also looks better. The downside would be the left new navigation which seems not perfect… I feel there is still some more room for improvement in this design. The next version would be significantly different, perhaps  showing off a minimalistic design!? 🙂

Ver. 1.0

Ver. 2.0

Ver. 2.5

Good Reads

These are great articles from various sources and writers which are worth a least a second read and thought. I keep them all here for future reference. This will be updated constantly, so bookmark it if necessary.

(English)

Lessons & Tips:

Fish don’t know they’re in water – Derek Sivers

We’re so surrounded by people who think like us, that it’s impossible to see that what we think are universal truths are just our local culture. We can’t see it until we get outside of it.”

Valuable to others, or only you? – Derek Sivers

When I’m hot, it’s hard for me to imagine that others in the room are cold. I think it really is hot, not that it’s hot only for me. It feels like fact, not opinion.”

Never Hurt to Ask – Darren Hardy

Ask, and Ye Shall Receive. Ye Have Not, Because Ye Ask Not

=> Before you ask: What have you tried?

Young people are screwed… Here’s how to survive  – Bryan Goldberg

Lesson No. 1: Learn to make something

Lesson No. 2: No, education is not the answer.

Lesson No. 3: Your parents and grandparents don’t understand your world. You should probably ignore them.

Lesson No. 4: Don’t worry about your network. Worry about your friends. [If you have successful friends, you will be successful.]

10 Smart Things I’ve Learned from People Who Never Went to College

10 Reasons You Should Never Get a Job – Steve Pavlina

10 Reasons You Should Never Have a Religion – Steve Pavlina

Ten Ways To Ensure You’re Driving Your Bus Instead of Just Being a Passenger

There’s No Such Thing as the Worthy Poor – Scott Dannemiller

Tim Ferriss Interview – Derek Sivers

Fuck, I Need Some New Swear Words – davidbanks

Disconnecting Distractions – Paul Graham

The Imperfectionist – Sarah

Smarter Than Your Parents – Steve Pavlina

Journal/Blogging:

You Should Write Blogs – Steve Yegge

Why You Should Write Things Down – Henrik Edberg

Presentation

Presentation Zen

Skills:

3 Entrepreneurial Skills You Won’t Learn In Business School: How to code, sell & hire

Why are you in such a rush? Dan Shipper – slow is smooth and smooth is fast

Sucking Less Every Year

10 Skills You Need to Succeed at Almost Anything

Design:

Content Without Design is Dumb – Pat

User Experience

Please make your article title as a link – it helps me & others to share it easier. Steve Pavlina and many others do this!

“Fuck You.” – Brad Frost

Next time you find yourself intentionally depriving someone an experience—to acquire knowledge, to complete a task, to do something online that can make their life even just a little better—picture yourself standing in front of that person in real life, looking them square in the eyes, then firmly and definitively saying “Fuck you.”

Habits

Busting the 21 days habit formation myth
How Long to Form a Habit?
Habit Formation: The 21-Day Myth
>> It takes more or less 66 days to form a new habits

Simply Successful Secrets Roundup!

5 things to do everyday to be successful

Goals

Are Your Goals Holding You Back? – Dan Shipper

Money

The Power of Association – Robert Kiyosaki => I like the term “motivation killers” 😀

Passion:

Don’t Do It For The Money – do it because you love it. Do it because….

Do You Know?

Why Ideas Pop Into Your Head When You’re Trying to Fall Asleep – No distractions

Health

How to Need Less Sleep by Getting Better Sleep Every Night  – Better Sleep is More Important than More Sleep

Career

Job Titles in the Web Industry – CSS-trick.com

Are we designers or developers?

Go the F**k Home – an interesting post & speech!

If you can’t name two things you’re regularly doing outside of work, you’re spending too much time there.

Programming Is Like Dancing – Dan Shipper : The product isn’t eternal but the moment is. The feeling isn’t lasting but it’s worth chasing.

Why I Left Google

Entrepreneurship

10 Tips for Moving From Programmer to Entrepreneur  – Ian Landsman: Design!! vs Coding

Hackers

How to become a hacker?

Hackers vs. Coders – this not a real ‘hackers’ btw

They’ll be focused on solving user problems, rather than solving implementation problems. They spend more time hacking it and less time coding.

Are You An Expert?

How To Be A Great Developer – Ed Finkler – Poor communication

Learn to Code >> 4 non-coders

The Origins of the <Blink> Tag  – Getta know this when doing my current homepage

Bai tieng Viet:

Thời vắng những nhà văn hoá lớn? – Trần Hữu Dũng

Tuổi 16, ta đã làm được gì? – Dongsongxanh

Bài học kinh nghiệm về hợp pháp hóa mại dâm

Justin Khương: Phong ba bão táp không bằng Start-Up Việt Nam

Không thích đọc tình yêu lm buồn, oán trách kiểu này lắm nhưng hay:

Đàn ông ví mỏng – Trang Ha

“đàn ông kiếm tiền là năng lực và tiêu tiền là văn hóa”

Vì bạn không đủ tư cách để yêu (2) – Trang Ha

“Bởi vì nếu thật sự yêu, người con gái sẽ tự nguyện chờ đợi, vượt qua được những khoảng cách và không gian, mà không cần một lời hứa hẹn ràng buộc nào cả. Tôi tin thế.”

Lý do tui ghét chữ phượt

Rexy Theme

A traditional, kinda old school and boring (at least to me) theme consists of a post(s) (main content) on the left and a sidebar on the right or in reverse. While the right/left sidebar may provide readers some extra useful information, I usually find the two-column website structure unbalanced. Very often, the sidebar is very short whilst the main content, containing lots of posts, is very long. As a result, there is a long, empty and wasted space at the end of sidebar. Apparently, the longer the content is – which is good, the longer that space is – which is wasted and therefore bad. That really frustrated me. So I eagerly wanted to find a better design. I then came up with this theme, which focuses solely on the site’s content itself, and nothing else. There is no sidebar at all. It’s just a small header at the top, the main content and a footer below which gives readers some extra information about the site, and that’s about it!

If you feel like this theme and wanna get one for your blog, just click like (facebook) this post below. When it gets enough 21 likes, I will build and give this theme freely for you guys to download.

It’s time to banish Internet Explorer

IE sucks!

IE has had an awful reputation. To put it in a simpler language, IE sucks – well, it doesn’t just suck, it sucks badly! In negative terms, it’s slow; it’s vulnerable; it’s outdated. In positive terms, it has more weird attributes, more bugs (IE is probably the father of  the term “CSS hacks“), more usability issues (in its UI). The dead of IE 6 (in reality, Microsoft will continue to support it until 2014) and the emergence of IE9 have made life a bit easier. But IE7 and IE8 are still pretty much out there while IE9, albeit better, still sucks. I’m not here to explain all over again why IE sucks in various aspects since there are tons of articles and even blogs, websites dedicated to that. The fact is the dead of any version of IE is really a milestone in web development. We look forward to say good bye to them – one by one although it’s still far away.

One of, if not arguably the main reason why IE can still survive is because there are still many people using it. For example, there are still 2,7% 1.0 and 1,6% 0.5% of  Vietnamese and Singaporean respectively using IE6 at the moment. What a shame! People just simply don’t know or don’t bother to upgrade, let alone to change, their beloved web browser! If only tens and even hundreds of folks do, never mind; but when thousands and even millions of them do, it becomes a big problem.

This shows how awesome IE is!

It’s so frustrating. My website looks and runs perfectly fine in every single browser that has ever existed, except for Internet Explorer!!!”

Lame, just lame. I’m not even going to bother with this anymore. The only reason why I’m using it right now is to check the compatibility of my website.

Undoubtedly, developers are the ones who suffers most from IEs

But who’s to blame?

Developers are complaining here and there. But they can’t do anything much about it simply because their companies will still continue to support cross-browser compatibility to avoid losing their clients and revenue. So as long as clients still use IE which they do and will, companies and agencies still have to support it, and therefore, web developers still have to suffer the horror of developing and “hacking” codes for IE (If you are an IE user who can see some cool HTML5′ and CSS3′ effects working on your beloved browsers, you should know that it’s not as straight forward as it seems. Developers have to put a lot more efforts just to satisfy your experience in your outdated browsers. Sometimes, it may take up to 40% of the entire developing time just for testing, debugging and hacking for IEs). It’s a vicious circle but who’s to blame?

For business owners, it’s not really their faults, it’s due to business reasons. For clients, it’s not really their faults because it’s their money anyway. They have their rights to be stubborn and demanding. For those who don’t bother to upgrade or change their ancient browsers, it’s not really their faults either because ignorance just seems inevitable. Well, this is all Microsoft’s fault for packaging it with Windows! Its monopoly has lived on to haunt us for probably decades. But Microsoft (and its Windows) is still standing strong and there are no signs that the monopoly would stop any time soon. So, in order to improve the situation, someone must really do something!!

Just do something

Alright, from now onwards I personally pioneer (!?) to stop supporting IE in this website as well as in almost all all Huu Thinh House’s upcoming web projects! If they happen to work in IE, thanks God, it’s a miracle!  I highly encourage you to do the same especially when it comes to personal and non-commercial blog and websites. Let’s eliminate the worst for a better world and let Web developers have more times to build cooler web apps instead of debugging and hacking codes for IEs!

ps: As of now, I still include IE’s prefix (-ms) into my codes whenever possible, which will pontentially support the later versions of IEs. But if IE 10 still sucks (not just better anymore) which I highly suspect, there are no more hopes for IE, Microsoft and those who are and will still be using it.

Sucking less everyday

As a programmer, I should be unhappy with the code I wrote yesterdays. If I am not, its means either:

– my codes were so well written that they can’t be improved, or
– I haven’t learned anything (new) from yesterdays

Well, either way, albeit good or bad, is the kiss of death for me as well as any other programmers!

…
Broadly speaking, we all used to write shitty codes, design shitty posters, do shitty stuff and such. We did and we “HAVE TO keep doing so” *. It’s not depressing at all. It’s a typical way a humble learner could improve. But only the best learners realize they sucked; the worst and normal learners hardly do or do very late! That’s why they never try to seek for new knowledge and information seriously and constantly.

It’s not our job to be better than anyone else, we just need to be better than we were yesterday! And the nearest yesterdays are, the better we become!

And now comes the interesting question HOW – how to suck less everyday?
…
to be continued

* We must do the best within our domains of knowledge and abilities at this moment in time. By saying ‘we should keep doing shitty things’, I mean the importance of self-development and improvement that we should if not must improve ourselves further to realize that we did a terrible job yesterday. That’s what learning really is and how important it plays in life. I believe, the day we stop learning would be the last day of our lives!

Best Practices: HTML

HTML is the language of the web, of Facebook, of Twitter, etc., which billions of people use everyday and which has thoroughly transformed the world in the last 2 decades. Surprisingly, it’s relatively simple and very forgiving of mistakes (wow that’s awesome!), and therefore, pretty easy to learn.
Having said that, it’s not that easy to write good, clean & semantic HTML codes. You may have DreamWeaver auto-generated 400 lines of code just for a simple page, which actually requires only 40 lines of “quality codes”. Well, some people strive to achieve it at all time; some claim it doesn’t matter and some don’t even know what the heck it is!
Alright, each of us may have our own styles of writing “producing” codes but the fact is that semantic HTML codes not only help your teammates understand your ideas faster and easier, thereby speeding up your project development, but also (together with CSS and JS as a whole) help decrease your page loading times. So, for big businesses or for those who are serious, it’s now no longer just a matter of choice: you’ve got to write good and semantic HTML codes.
Okay, let’s now specify some best practices when writing HTML:

Use HTML elements for their intented purpose:

• Make use of HTML5 new semantic elements: List of new HTML5 tags
• Use <ul> for menus; <blockquote> for blockquotes
• Each section/article must have a heading using <h1>, <h2>, <h3>,…

Bad Semantics

<div class="article">
 <div class="article_title">Smurf Movie Kinda Sucks</div>
 <div class="the_content">Not surprisingly, this weeks release of
    <div class="darkbold">The Smurfs</div> kinda sucks.</div>
</div>

Good Semantics

<article>
 <h1>Smurf Movie Kinda Sucks</h1>
 <p>Not surprisingly, this weeks release of
    <strong>The Smurfs</strong> kinda sucks.</p>
</article>

Avoid meaningless markup

Limit containers usage:

• Make use of HTML5 semantic wrapper elements (header, nav, footer, article, section, figure, etc.)
• Consider before adding any additional wrappers (divs) (for style purpose only)

Use Class whenever appropriate

• Create (then later apply) class in elements that have any chance of being repeated on a page and in different locations
• Utilise multiple classes assignment to a given element

Avoid Classitis: (the over-use of class definitions)

Keep CSS out of the markup (Never ever use in-inline CSS)

Minimize use of IDs:

• Use (about) 1 id per page only – in the main wrapper or recommended in the body tag
• the rest used only for JS selector

HTML class/id naming recommendation:
While naming a class or id is just a matter of choice, we recommend to use hyphen “-” for class and underscore “_” for Id:

• Class name: content-wrapper
• Id name: unique_element

How to best name a class:
Describe what the element actually is (its context) NOT where it is (left or right, col_1 or col_10) or what it looks like (big or small, rectangle or square, red or blue) – describing but NOT specifying the content they enclose)

• Name a wrapper as “content”-wrapper
• Minimize abbreviation usage unless popular ones:

This reference only specifies some best practises when writing HTML and is not a full starting guide to HTML. Instead, you may wanna start to learn it @ http://htmldog.com/