Coincidentally, a little over a week after I describe my favorite editor to put in web apps, they folks over at Basecamp announce their new editor: Trix.

Trix Editor

Without actually integrating it yet, I feel like this is a safe bet on the next great editor for the web. Check it out at:

http://trix-editor.org

Phatness.com is the personal blog of Mike Wille

I'm a developer with a passion for building products.

Need help with building something? Get in touch:

bs-themes

Bootstrap 4 is moving from LESS to Sass!

http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/

In the early days of bootstrap, we had to rely on outside developers maintaining a port of bootstrap in Sass so that we could integrate with our existing Sass projects.  It got better with Bootstrap 2 and an official Sass repo. But it always felt an after thought and you would get some strange problems every once in awhile as the main developers were lax in focusing on the Sass side of things.

<Read on…>

(Note: This article was originally written for the iPhone 4. Since then, we have seen the iPad 3 with Retina, and now the MacBook Pro. This technique works with all of them.)

The new iPhone 4 is certainly a marvel of technology.  One of the surprising side effects it has is how bad it makes things look that weren’t designed for high-DPI displays.  For the most part, text is automatically beautiful on the iPhone 4 1.  However, images are a different story. What follows is my research and then the technique I used to update images on flowz.com. We use wordpress here and with this technique, image replacement is automatic. All you have to do different is upload the second, high-res file at the same time you insert the normal file in your post or page. The first thing we need to do is pull in CSS specific to high-DPI device(s) in a standards compliant way. Here is how you can do that: http://thomasmaier.me/2010/06/css-for-iphone-4-retina-display/ The trick being to use a CSS3 media query to target high DPI devices (*not* just the iPhone 4!):
<Read on…>

This article is about several things. Primarily, it is about how to realize a button design using the latest web technology available to us. The resulting button is progressively enhanced so that it looks okay in IE 7, a little bit better in IE 8, great in IE 9, and fantastic in all modern browsers. (Yes, IE 9 isn’t modern by my standards)

[Note: this article went long. The story of the IE “mutation” will happen in a follow up post.]

Also, I’m going to use SASS to create the CSS for this button. There are many timesaving features of SASS and that is a secondary theme of this post. You can learn about SASS here: http://sass-lang.com. I can’t recommend it enough. It actually renewed my love for web development.

<Read on…>

I have much love for Bootstrap by Twitter. But there are some things that I was slow to figure out, see my earlier post on this: How to style Rows in Bootstrap.

Similarly to the style issue, you can’t easily add padding to elements within a row. Say you want to to have a row that has multiple columns. But you need to have a 15px padding for each column. (The row has a styled background and we don’t want the columns to touch the edges). If you try and target your columns directly via the .spanXX class with a descendant selector, you’ll have headaches later on when you change your column width, or add another row that had different needs. (I should mention, this isn’t a unique problem to Bootstrap. Most, if not all, grid systems have this issue.)

The solution is to place a <div> element within the .spanXX column container. This div is then padded and your content is then placed within.

Nice and simple:

<div class="row">
	<div class="span6">
		<div class="extraneous-non-semantic-markup">
			<p>Your Content is Padded!</p>
		</div>
	</div>
	
	<div class="span6">
		<div class="extraneous-non-semantic-markup">
			<p>Yay!</p>
		</div>
	</div>
</div>

And the styling on the class:

.extraneous-non-semantic-markup {
	padding: 15px
}

And that feels so dirty. But it’s a compromise that works because we gain so much more from grid layouts.

There is a lot of great things going on with the new CSS framework from Twitter, Bootstrap -> http://twitter.github.com/bootstrap/. I used 1.0 for creating this site and a few others. Version 2.0 was just released and it fixed a lot of issues and is really just plain awesome.

Unfortunately, there have been a few things that have been bothering me about it, particularly the grid system. I felt constrained by the requirement of a containing .row around the spans. I couldn’t quite put a finger on what it was though. Then after doing a project with Blueprint -> http://blueprintcss.org/ last month, it hit me. In Bootstrap, you can’t style rows.

Bootstrap’s grid system will use left-margin in between columns to have built in padding between content areas. By default, it is 20px. Everyone does this. The problem that happens though is that the first column can’t have any left-margin or your content won’t be centered. (And likely be over 960px) To get around this, most frameworks will nip off the left-margin on the first column by using a pseudo css selector: first-child.

Boostrap uses a different technique. It places a negative left-margin on the containing .row instead of using a pseudo class. For the following markup, imagine we want to put a border around the row:

<div class="container">
    <div class="row">
        <div class="span6"></div>
        <div class="span6"></div>
    </div>
</div>

Yields:

Notice how the row in the above illustration sticks out past the .container element?

Their reason for this is valid. :first-child causes problems with calculating widths and makes things more complicated. But using a .row with negative left-margin means that any styling applied to the row (borders, backgrounds, etc) will stick out on the left hand side by an extra 20px. In the simplest case illustrated above, this is exactly how it occurs in your page.

So how do we fix this?

Simple. Add a <div> or HTML5 element like <article> or <section> as a parent to the row. Then style the parent element. Because of the .container that is used for the entire page, this div will be the appropriate width. When using a <section> tag, it even feels right, semantically. So, yay!

Here we have the fix:

<div class="container">
    <section>
        <div class="row">
            <div class="span6"></div>
            <div class="span6"></div>
        </div>
    </section>
</div>

Which results in:

I picked up an iPhone 4. How?

I woke up at 3 AM the morning Apple started taking reservations. That day their store was having troubles taking orders. I kept checking almost every hour until I finally got a reserved phone at 10 AM.

On the June 24th, a friend and I got to the mall with the Apple Store at 6:45. The parking lot was empty, except for maybe 6 cars. I thought, great, Michigan’s economy might actually pay off this time. When we opened the doors, I was wrong. Apparently the hundreds to thousands of people parked in the back.

I waited in line for 4 hours and 15 minutes before I finally had my phone in my hand. I will NEVER DO THAT AGAIN.

Send it to my house next time.

The first thing you notice about the phone is that screen. That unbelievable screen. Oh yeah, and how it makes just about every image on the web look like shit. Well, if you are a website owner, there are some things you can do to make your website look better. Text is fine already. But you have to swap out your images for higher resolution counterparts.

The technique is only supported in the newest browsers. But so what? Who will be running IE 6 on an Android (You can be sure that Android handset makers will follow) or an iPhone?

From the solution I posted at Flowz:

The trick here is that we check to see if the font size for our special class is set to value declared in our high-DPI CSS file. (Our flag) It will only be set if the browser passed the media query. If the flag is set, grab every element in the DOM with the replace-2x class and change the src attribute to point to our high-res counterparts.

Go check it out:
http://flowz.com/2010/07/css-image-replacement-for-iphone-4-high-dpi-retina-display/