Making Semantic Elements Behave Like a Table

CSS has properties to make any element you wish behave as if it was a table element. You’ll need to structure them essentially as you would a table, and it will be subject to the same source-order-dependency as a table, but you can do it. I’m not crapping on it either, it’s genuinely useful sometimes. If that layout style solves a problem and has no negative order implications, use it.

Don’t use inline styles, but just for understanding here’s how that would go:

<section style="display: table;">
  <header style="display: table-row;">
    <div style="display: table-cell;"></div>
    <div style="display: table-cell;"></div>
    <div style="display: table-cell;"></div>
  <div style="display: table-row;">
    <div style="display: table-cell;"></div>
    <div style="display: table-cell;"></div>
    <div style="display: table-cell;"></div>

A handy trick here is that you don’t even need the table-row element in there if you don’t want. A bunch of display: table-cell; elements that are children of a display: table; element will behave like they are all in one row.

You always alter the display property of the element to get the table-style behavior. Here’s the values:

display: table                /* <table>     */
display: table-cell           /* <td>        */
display: table-row            /* <tr>        */
display: table-column         /* <col>       */
display: table-column-group   /* <colgroup>  */
display: table-footer-group   /* <tfoot>     */
display: table-header-group   /* <thead>     */

Notice there is no <th> alternative. That is for semantic value only. It otherwise behaves just like a <td>, so, no need to replicate it in CSS.

There is also display: inline-table; which is pretty interesting. Remember we talked about how weird table elements widths are above. They are only as wide as they need to be, yet break onto new lines. It’s almost like they are inline-block elements which happen to break. This makes them literally like inline-block elements, without the breaking.

Copied from css-tricks



Child Theme for oriental – Oriental Writing

Oriental Writing

Live Preview

Oriental Writing is a child theme for oriental. You need to first install oriental and then install this theme.

Versions –


Twitter API 1.1 php get tweets script

I’ve been using a nice caching php script for getting my latest tweets. Recently twitter completely stopped support for API 1 and everyone must use API 1.1. API 1.1 requires authentication and therefore making it more complicated to use the original script.

I’ve modified the script with the help of the codebird library to do what it used to do.

Set up authentication for your application

  • To use the new getTweets.php, you must go to your twitter dev account and create a new application.
  • Fill in all of the required information.
  • Once created, you will be given the Consumer key and Consumer secret.
  • Click on the Create my access token button, you will be given the Access token and Access token secret.
  • You will need the four pieces of information to use the script.

Set up the script on your server

  • Download my github fork
  • Open the src/getTweets.php file
  • Update the time between cache in the Time between cache variable if you wish. Default is 5 min.

To use the script

Once done, upload all files in the src folder to a folder on your server. You may get the latest tweets for the user via ajax such as:

// get latest tweet
	url: "{PATH TO}/getTweets.php",
	type: "GET",
	data: { count : '2', user : 'dodozhang21' },
	success: function(data, textStatus, jqXHR){
		var html = '<ul>';
		for(var x in data) {
			var tweet = data[x];
			html += '<li>';
			html += tweet.text;
			html += '<span>';
			html += tweet.created_at;
			html += '</span></li>';
		html += '</ul>';
	error: function (jqXHR, textStatus, errorThrown){
		//console.log('Error ' + jqXHR);

Additional Information

Had a great first week at Meredith

I started this week as a frontend developer for the team at Meredith. It’s been a very fun week.

  • The people are super nice and I got my local workspace & server set up in 2 days to which the local considered a new record.
  • I got my computer & keyboard elevated so I can now stand and type but of course if I want to sit, I have a high chair to sit on.
  • My cube is a lot bigger than my old one so I will need some time to fully decorate it. It’s big enough for me to lay down a yoga mat so I will be doing that LOL.
  • With my high chair, I can see the windows along the hallway so it’s like having a window view.
  • Here’s what I’d see from my window minus the nasty weather!!
  • Tried out the cafeteria and it’s convenient.
  • Already went to the yoga class at their fitness center and love the instructor. I will definitely be going to the yoga classes frequently.
  • Played with swipejs and codrops slide menu to design a small project prototype the mobile first way. Here’s what I got so far.

Overall, a great start! I’m happy ^__^