Archive for January, 2014

One man’s solution for full page web apps

Thursday, January 30th, 2014

Recently, I had a need to create a web application that functioned kind of like a native app. The design requirements were simple. There would be a header and menu stuck to the top of the page and a footer and navigation buttons stuck to the bottom of the page. Content would fill the middle.

There are many ways to do this. For example, bootstrap has an example of how to do this type of layout. This is probably the most common example of how to keep elements stuck to the bottom of the page. It has one problem, the height of the stuck element must be known. Sadly the height for me is not always the same which makes this example not ideal.

Flexbox is another option. It would work good except for its browser support. For this project I had the fun requirement of needing to support IE8. Don’t ask, long story, some day I will tell it.

So how did I solve my problem?  CSS Table Display! CSS Tables allow you to use semantically correct layout with divs (or newer tags) but have those divs act as if they were table elements. So one can read all about that what they are and how to use them all over the Googles. The remainder of this post is what I did with them.

Below is some example html and css I used. Header, menu, content, footer, and bottom stuff are all normal display block div tags. They work like you would expect. It even works will to drop in Bootstrap grid system to place things on different places horizontally.

The key to the is the div with class .trow-fill. It will push all elements below it to the bottom of the page because its display is set to table-row. Make sure to notice that the body tag is set to display as a table. What is cool about this is the content or the navigation area can change heights and everything will move correctly. The stuff that should be at the bottom of the page will stay there.

Screen shot:
layout

Example HTML and CSS

<html>
<head>

<style>

	body{
		height: 100%;
		width: 100%;
		margin: 0;
		display: table;
	}
	
	.trow-fill{
		display: table-row;
		height: 100%;
		background-color: yellow;
	}
	
	
	/*fill colors for effect*/
	.header{
		background-color: green;
	}

	.menu{
		background-color: orange;
	}
	
	.content{
		background-color: red;
		height: 150px;
	}
	
	
	.bottom-stuff{
		background-color: lightblue;
	}
	
	.footer{
		background-color: grey;
	}
</style>

</head>
<body>

	<div class="header">Header</div>
	<div class="menu">Menu</div>

	<div class="content">content</div>
	
	<div class="trow-fill" >Normally this would be empty. This will push anything elements below it to the bottom of the page.</div>
	<div class="bottom-stuff">Navigation and other stuff. This can be dynamic height!!</div>
	<div class="footer">footer</div>

</body>
</html>

Now a few things may be running through your head. Mainly something about tables and it feeling dirty. Well I was with you up until I noticed something about Bootstrap. In v2.X of bootstrap, CSS tables is exactly how it achieves the fluid grid system. Just look right here. If it is good enough for them, it is good enough for me.

Book Review: Rework and Remote

Monday, January 6th, 2014

I am reviewing two books: Rework and Remote by Jason Fried and David Heinemeier Hansson of 37Signals fame. Both books are laid out in the same form. They have multiple sections and each section has multiple chapters. Chapters are short: 1-3 pages normally. These short chapters are great because they are packed full of info without being overly long and boring. The minor down side is some chapters left me wanting more on the subject. Each chapter has an illustration that goes with it. Some of these are hilarious.  I had no problems finishing these books and staying engaged while reading them.

Both books are not made up theory that sounds nice either. Both books are rooted in what makes 37Signals work. The ideas and concepts in the books come straight from day to day life at 37Signals.

Rework

Rework’s tagline is “Change the way you work forever”. The general idea is to challenge the status quo of what work should be and look like. It pushes the standard norms of running a business. For example the chapter “Why Grow?” discusses the idea of the right sized business. It suggests to the reader to find the right size for them and to stay there. This is different then the status quo of: If you are not growing you’re dying.

Remote

Remote’s tagline is “Office not Required”. It could be considered a playbook for setting up and having remote employees. I would suggest this for both employees or employers that want or even are working remotely. The great part about this book is it makes it clear what the trade offs are between working remotely vs being in office. In many cases it suggests why these trade offs are invalid or how to deal with them. The chapter “The Lone Outpost” suggest that giving one employee the ability to work remote is setting up remote to fail. It states that remote will only work if multiple people feel change that is needed to make remote work.

Conclusion

I have seen my fair share of “old way” thinking while working traditional and nontraditional jobs. It pains me to see this “old way” still strong in management today. Both of these books push the idea that there is a better way. It is a new and different way, there are pitfalls, but in the end you will be happier, your employees will be happier, and your product will be better. I highly recommend these books to pretty much anyone, exceptionally if you are working in a creative job such as development or design.

Software Craftsmanship

Friday, January 3rd, 2014

On my way home from work the other day, I was listening to .NET Rocks Episode 934 with Uncle Bob on building software. Carl, Richard, and Uncle Bob had a discussion on HealthCare.gov and the issues with the site from a development stand point. At 28 mins 45 seconds in , Richard states “I am responsible to my industry first and my customers second” and this struck me as very profound.

I have never considered idea before that my actions, code, and software is a representation of my industry. That because of my actions as a developer could causes a person to view all programmers in a different way.

If we look at lawyers for example, we can see the stigma of the job. Society seems to have negative view of lawyers. That somehow you are a terrible person if you go into law. Why is this? There are terrific people that work in law. I have met them and worked with them. The negative view was probably built by the few that have acted unprofessional. The ambulance chasers and those who make frivolous lawsuit just to make a buck. My point, is that it won’t take much for our profession, software development, to get a similar stigma if projects keep failing.

I fear that the stigma of a software developer not being professional, not caring is already taking hold. The software the world uses every day is pretty terrible. Why is my password limited to 12 characters for my online credit card account. Why does the family doctor tell me all the issues he has with the EMR instead of telling me how awesome it is? Why does my cable box freeze so much? Why does Google Chrome’s spell check not fix the fucking word when I click on it? People should be excited about how software is making their lives easier not about how much it sucks. Our jobs as developers is to provide software that helps people not infuriates them.

Uncle Bob and many others created the Software Craftsmanship manifesto in 2009. The goal of this movement is to push craftsmanship and professionalism in the industry. The general idea is to promote doing what is right over getting it done. Good enough is no longer acceptable. 

Not only working software, but also well-crafted software
Not only responding to change, but also steadily adding value
Not only individuals and interactions, but also a community of professionals
Not only customer collaboration, but also productive partnerships

I have signed the manifesto as a reminder to push my industry forward. To not sit idly by. To make awesome!