To Framework, or Not To Framework: Part 2
In part 1 of “To Framework, or Not To Framework“, I wrote about why I don’t tend to use frameworks like Bootstrap or Foundation. If you haven’t read that, it gives a bit of context to the “why” part of this article.
The first thing people use in a framework (at least it feels that way) is the grid system. In Bootstrap you have classes like .col-md-1 to indicate one grid unit, in Foundation .large-1 accomplishes the same thing.
Both Bootstrap and Foundation are based on a 12 column grid. So those classes above are asking for 1/12 of the grid. Bootstrap implies we’re working with desktop styles. Foundation makes it a bit more obvious by adding “large” to the class.
If you want to assign a column to be 1/2 of the width of the screen on mobile, you would write:
Bootstrap: .col-xs-6 (xs = extra small)
Foundation: .small-6
When you want to make things responsive, you can mix and match those classes to get it right.
Bootstrap
<div class=“col-xs-6 col-md-3”></div>
Foundation
<div class=“small-6 large-3”></div>
Freedom
Now there’s nothing wrong with those grid systems. But for me, I don’t use Bootstrap or Foundation because of all the overwriting of styles that I have to do to make something look unique. So, I don’t include Bootstrap or Foundation just for their grid system. For me, since I’m not bound to a framework, I get to choose the grid system that makes the most sense to me. Instead, I use Unsemantic on most of my projects.
Nathan Smith, who wrote Unsemantic, used percentages to build the grid system. So, if I want a div that sits at 50% width on mobile and 10% on desktop, that looks like this:
<div class=“mobile-grid-50 grid-10”></div>
By just using .grid-10, I get the desktop styles. Adding mobile- or tablet- to the class applies that style if the reader is on a mobile or tablet device.
Application
Now, for a long time, I wrote my divs exactly as seen above so that other people could figure out what I was doing:
<div class=“sidebar mobile-grid-100 grid-25”></div>
Usually there’s another class in there anyway, in this case .sidebar. So instead of adding a series of classes in my HTML, I’m now making use of Unsemantic inside my SASS files as often as I can. So I write something like:
.sidebar {
@extend .grid-25;
@extend .mobile-grid-100;
/* More styles go here */
}
By adding them in the SASS file they’re included in the CSS files when that’s all combined. As a result, my HTML is more minimal. My SASS files stay cleaner, too. By using @extend, I can do widths, margins, padding, and responsive styles all in one single line.
Impacts on Design
The biggest departure isn’t the grid-10 vs col-1 vs large-1, it’s in the design phase. If you design for Bootstrap or Foundation (or just prefer 12 columns), not having 12 columns as a basis can be a little jarring. But for me, if I look around at other designs, most of the basics exist in all three systems. 1/3 is still 1/3, regardless of whether it’s 4 columns or 25%, for example. But Unsemantic doesn’t break down into twelve parts you get ten instead.
If that bugs you for some reason, I’d recommend Gridset. You can get as granular or particular with your grids as you want. If a 5 column system appeals to you, hey, you can make that. What about a 7 of varying sizes? Yep.
I used Gridset for a long time, and I love it. But most of the time I don’t need that level of complexity with my work. Most often it’s a 66% content block and a 33% sidebar or something like that.
So whichever way you need to work, you have options. But you don’t have to feel as if the only way to build something is by using a full framework.
In the next article, I’ll cover Typography.
Web Standards and JavaScript for Aging Devices
The first thing I learned about web development was that there was this thing called “Web Standards”, and it was awesome. We as an industry are better for it because it’s inclusive and altruistic. People with screen readers, for example, benefit from it because we knew better than to just use Flash on everything. You’re probably not writing your HTML into tables these days, so thank the web standards movement for that too.
But web standards also ventures into things like removing onClick=“Insert your JavaScript Here” from your HTML, and instead advocates for placing that JavaScript in your actual JavaScript file. And that’s smart, because when you’re working on a web app, or a site with a lot of pages, you don’t want to go through and pull out references to things you use over and over again.
In fact, that has been one of my primary frustrations with AngularJS. It’s so much of ng-click=”“ that it’s basically a collection of “bad practices”.
The Problem With that
We’ve been working hard on an iOS app over at Artletic. We opted to use the Ionic Framework, but not all of the Angular JS stuff because, well, at the time it didn’t seem to be necessary when all we wanted was some HTML and some JS. I set the thing up on day one and it just flew. Seriously, it was quick.
Fast forward to last week and the app was just dragging on my actual iPhone 4. Now, that’s on a 4. It was semi-usable on a 5, but not everyone has a 5. In fact, I could hardly test the latest features because it was so slow on my phone.
So I remembered something that happened to me a few years ago when I worked at (what was then) Nathan Smith and I (mostly Nathan) refactored my code to work for larger sets of data because it had a serious performance drain under those conditions.
The Wisdom in Being “Wrong”
The way he did it, was to rework and then reference the JavaScript function with an onClick. Why did it work? By registering click events for every last one of those thousand items, there was just so much extra memory weight that it dragged down the app. Putting things in the HTML itself meant that the browser didn’t have to roll through every entry and create those events, then watch each and every one of them. It meant that the browser didn’t have to care until you interacted with that data. Then, it would see the onClick event and take action… But only when you clicked it.
In my Ionic project it was the same thing, but on a much smaller and finicky scale. My browser was completely fine with the JavaScript, the simulator was fine with the JavaScript, but the actual device was not. The iPhone is a much lighter device than my Macbook (obviously), there should be no expectation of comparability.
I had been using the module pattern, and each click event was already referencing functions.
Before, it looked like this:
$('body').on('click', '#something', function ( ){
interaction.load_something();
});
But for performance’s sake, I changed it to be this:
<a href="#whatever" id="something" onClick="interaction.load_something();">Whatever</a>
When there are large sets of data, that markup is neatly placed in a Handlebars template that gets added and subtracted from the DOM as necessary. It’s just as performant if there are one or a hundred things in the list, and because it’s included in a partial, I’m not having to maintain that code in 100 pages across an app. And I think that’s why AngularJS uses hg-click as well.
The speed increase was immediately apparent. I removed the click function in my JS file for one of the biggest offenders, and the app was suddenly very usable. It wasn’t as usable as I wanted it to be, however, but when we removed a good number of the click events it sped up quite a bit.
So while it wasn’t exactly a tactic that I’ll be applauded for in the web standards community, it saved our app and, thanks to Handlebars, still kept me from having to weed through too much JavaScript in my HTML.
In Reality
This really isn’t an anti-web standards post. Honestly, the old wisdom is so good that most of my sites will still use the same module pattern and click events routine. But when I’m building something mobile/hybrid, inline click events are a small price to pay for what could be a large number of happier users on aging, lightweight devices.
Automatic Database Backups
Awhile back I was in a panic. As I went to my site to write an article I was met with a blank screen. And of course that’s never a good thing.
It was at that moment that I happened to turn around to see the announcement on CNN that wildfires had engulfing part of California. That’s when it dawned on me that my web host is located in California.
I don’t know that I can explain the sinking feeling that I got at that moment. On one hand if that was indeed the cause for the outage it would give me an excuse to start my site over from scratch. But let’s be honest, that was a rationalization, I would have been frustrated to say the least.
Thankfully for me it was a migration process gone awry that had caused the downtime, not wildfires. (I came to find out that the fires were further south than my hosting provider.) Nevertheless, it caused me to think about backing up my data.
I was consistent in my backups for awhile, but then I somehow forgot that routine backups are important. Recently I revisited the concept at hand with the knowledge that it was my own consistency that would be a problem with my regular maintenance schedule. I wanted to change that.
The Automatic Backup Script
I could set a reminder in my calendar to visit my database management application on a regular basis, but why bother? I wrote a small script that will connect with my database and backup the entire thing to a file. The initial script looks something like this:
Apart from the comments within the code, I’ll mention that if you would prefer not to have the file in gzip format you can leave off “| gzip”. You should also note that this will put the backups in the same folder as your script, unless you add in a directory as mentioned in the comments of the script. It would be a good idea to put the files in a directory that isn’t reachable from the web, that way you can be extra sure that someone cannot grab your backups and read sensitive information that may be held within.
Supercharged
If you are like me, however, you probably have multiple databases lying around, ones that you may forget about on a regular backup. And, if you are like me, they are probably on multiple hosts. So, I supercharged the script to connect to a particular host and pull the listed databases into individual backup files.
Running The Scripts
Being PHP files, you just need to put them in a place on your website and visit them with a web browser. You won’t see any response in your browser window, however, unless something goes wrong. If something does go wrong it will likely only tell you “no 1” or “no 2”. These errors tell you which connection failed. I wrote them like this so that in case some unscrupulous person attempts to use the script to gain access to a database the errors do not give away useful information.
You will probably want to verify that the script actually did something, so just use your FTP program and visit the directory you mentioned in the script. (If you mentioned one that is, otherwise the files are placed in the same directory as the script itself.) You should see your gzipped files staring back at you if everything ran smoothly.
To make your life even easier, you could setup a Cron Job to automatically make a backup every evening at midnight, for example. The choice is yours, but you may want to verify that the script is in fact running at the regular interval. I have had many Cron Jobs fail without notification.
Good luck and happy “backuping.”
Note: Make sure to backup your database before you run this script for the first time. I don’t see why it would do anything to your database, but that doesn’t mean your web server agrees with me. Just a warning. I also don’t claim that this script will work for you and that it won’t cause any damage, so use it at your own risk.
An Automatic Image Gallery Using PHP
I decided last night that I needed a PHP driven image gallery and since I didn’t have an internet connection I couldn’t check around for likeminded projects, so I wrote one myself.
It’s a simple and clean PHP script called index.php (clever and unique eh?) You just put it in a folder labeled after the name of the image set. So, for example, if I have a bunch of pictures of france I might call the directory france06. Then, all I would have to do is make two directories inside france06 called thumbs and images and upload the images to the appropriate places.
There is one catch to the whole thing, the thumbnail images and the full sized images have to be named exactly the same thing, extension included. (.jpg, .JPG, .tif, .TIF etc.) I set it up this way to save on code and it just made more sense to me.
The script opens the directory called “thumbs” and lists the files out one by one and puts them into the appropriate place within a list item. So, when you load the page you should see a gallery with all your pictures. You can find a demo of the script here.
A note about styling.
In my edition of the script I simply gave the ul an id of “gallery” (yet another very creative decision on my part…) If you’re using CSS then you’ll just need to make reference to #gallery for styles that change the look of the ul itself and #gallery li to styles that alter the list items within that ul.
Also, please feel free to modify the code as you need. It would be nice to know if you use the script in a project, just for my own personal curiosity. Anyway, hope you enjoy the script.
I guess at some point I should also give a link to the script itself since PHP once rendered isn’t that easy to get ahold of…
“I Like to Steal Things” Part 1
Now, before you take that headline as an admission of guilt… it’s the title of a project I’ve been scheming up for awhile, a chunk of PHP that helps you prevent people from stealing your stuff; that stuff most notably being your CSS files, though I have one more writeup on the theme coming shortly after.
It’s always a dilemma for me when CSS comes up. I know that I, like many other people, learned CSS from looking at the work of other people to see how they did things. I would like to be able to let people look at my CSS and learn from me, not that mine is exemplary or anything, just humor me. So, in a way it’s difficult to even consider working through a solution like this, in other ways I remember the people who rip off CSS and claim it as their own work without much moral negotiation. This won’t stop everyone, but it will slow someone down or at least make them think.
Securing Your CSS With PHP
First of all, for a variety of reasons I’m delivering my CSS from a PHP file. This gives me some control over the output and, for example, allows me to check and see which browser is being used and which things should be included in the screen rendering in order to avoid having to use CSS hacks. (Read as “I don’t like IE6 and so this is my way around ugly hacks that still keeps IE looking simiflar.” ) If you don’t like that route and want to keep things purely CSS, that’s fine too, you can just incorporate the redirect I’m using in the second example and branch it to either include your real CSS file or a fake CSS file depending on the findings of the page reference, that’s your decision. But more on that later.
If you haven’t ever put CSS into a PHP file there are a few lines that you should add into the top of your document so that the server and your browser know how to work with the PHP’d CSS file. That code is something like this:
ob_start ("ob_gzhandler");
header("Content-type: text/css");
header("Cache-Control: must-revalidate");
After declaring that this PHP file is now a CSS document we can start the “delivery enhancements.”
The first chunk of code is fairly simple, and it’s intended for cases where people are either linking to your CSS file from a distance or trying to view the CSS directly and are then pasting it wholesale into their CSS document.
First, it attempts to get the identity of the page that is referencing it and checks to see if it is a page on your site. In my case it would look something like:
// checks to see which page is referencing the file.
$httpref = getenv ("HTTP_REFERER");
// check and see if your site is actually the initiator of the request, if it is the
variable $valid is set. The second line tests against the user having left
off the www in the URL.
if (eregi("http://www.launchtheweb.com/", $httpref)) { $valid="valid";}
if (eregi("http://launchtheweb.com/", $httpref)) { $valid="valid";}
Once it has determined the validity of the request it says “if this request is not coming from the real website, give them the `false CSS file markup and die.’” That code looks something like this:
if ($valid!="valid") { echo "stolen tag"; die; }
Where the code in my example says “stolen tag” I have replaced it in my real PHP file with some fake CSS to add some flair and artistry. I made a mockup page of what a website would look like if they did attempt to rip off the protected CSS file, I even kept the same content from my homepage.
For your benefit I have also included the example in one collective PHP script for easy download.
The Selected Redirect Route
If you’re not interested in modifying your CSS file and going with the PHP route you could always redirect with an external PHP file. For example, your site references the PHP file first and determines if the request is legitimate or not and acts accordingly. If it is a proper request then it redirects to the real style sheet, if not, they get a false CSS file. The code could look like this:
// check the referring page
$httpref = getenv ("HTTP_REFERER");
if (eregi("http://www.launchtheweb.com/", $httpref)) { $valid="valid";}
if (eregi("http://launchtheweb.com/", $httpref)) { $valid="valid";}
// if it is valid, redirect the page to the proper CSS file, if not, show
them the other.
if ($valid=="valid")
{
header( 'Location: real-sheet.php' ) ;
} else {
header( 'Location: thievery.css' ) ;
}
You can see this in action at the second demo page. It functions almost identically to the other example but the difference is that you don’t have to mess with your current CSS work, you just have to create a fake one or not. You could just give them an error message instead of CSS information, that would probably mess with their heads a little more than the examples I have here.
Further thoughts
There are other things you could add to this concept to really get strict. You could incorporate a chunk of PHP that would open up a text document and write down the IP, referral address and the time of every false request on your site. I would guess that the list on that would be quite long and more than likely not worth your time. You could save yourself the time and add the image file you are loading as a background into your CMS so you can watch how many times people are downloading it, just to keep track. Things like these could be done fairly quickly if you needed that extra functionality, because PHP just lends itself to that sort of stuff.
As I said before, I have another example to go along with this theme, but I’m still working out the last few problems with it. Hopefully this helps slow down the people who want to wholesale your CSS work. Good luck.
Exporting Textpattern Articles to Drupal
Most people who talk with me about web development for more than five minutes know that I’m a huge fan of Textpattern. It was the first CMS I used, and it wasn’t difficult to love. Everything is clean, logical and it just functions the way I expect it should.
But lately I’ve had my concerns about the direction of Textpattern, and there often comes a time to expand horizons and move on. I’m not convinced that time has come for me just yet, but I will admit that I’ve been playing with Drupal.
This may come as a shock to some of you who know how much of a rocky relationship I’ve had with Drupal in the past. Drupal 6, however, seems really solid and well developed. But like I said, I don’t know that it’s time for me to make a switch just yet. I may turn out to be the 90 year old man still running Textpattern, it’s too early to tell.
All of that aside, when I started working with Drupal I wanted to know that I could bring all of my content from Textpattern over to the new Drupal install. So, in a moment of laziness I wrote a script to take care of everything for me.
All you need to do is specify your information for both databases, point your web browser at the script and let it do its work. Be sure you back everything up because I don’t guarantee that this will not destroy everything you’ve ever created and hold dear. The script will also need to be in a location with access to both databases at the same time, so it may not work as a solution to switch from host to host, for example.
This script will loop through the content of your database’s Textpattern articles and place them into the Drupal equivalent space. All of the articles will be labeled as “pages” unless they’re in the “articles” section of Textpattern, in which case they are created as “stories” in Drupal. If you decided to use a different section as a blog, you can specify that instead of “articles” in the script.
Comments should also be delivered to the correct articles, but it needs to be noted that there could be association issues.
If your Drupal installation has been in use and entries have been removed it is possible that the auto increment values may be off. If that happens the association could be off by one or two, improperly matching the comments and articles. So, if you are having comment alignment issues make sure the auto increment values match. But, if you haven’t been working with the Drupal database this probably isn’t going to be an issue for you.
I stopped with articles and comments because a lot of the setup depends on plugins and preferences. I am, however, open to suggestions as to what else could be included in this script. So, if you have suggestions I’m interested to hear about them. Otherwise, download the script and try it out.
Your First Web Application: From Design to Launch
Last night I had the privilege of speaking at Refresh Detroit about building web applications. Thank you to all the members and attendees of Refresh Detroit, and especially to Deborah, for inviting me. I had a great time as always!
Since it’s after the fact, and I think the presentation went fairly well, I’ll admit that the topic was a bit large. And by “a bit” I mean, “oh wow, that was massive.” One of the attendees even mentioned that each section could have been a talk on its own. He was absolutely right.
But I also don’t regret taking it on. It was supposed to be a general overview of the process I use to work through creating web applications and I think it accomplished that goal.
If you’re interested in an overview of the talk, the slides are up on Slideshare, or you can Download the PDF.
Randomization Within Reason
I’ve started to get tired of the blog look. That doesn’t mean I’ll not be using it anymore or that it’s inherently evil, this isn’t Comic Sans we’re talking about here. Rather, it just seems that it’s the basic design out there, the thing that everyone is doing. I realize that everyone has their own spin and that a blog design is just the basic layout, the rest is up to the designer. I know that a good designer will make the blog layout do amazing things and really I’m not knocking that, the standard photo on top, multi-column blog design may be the best in a lot of circumstances. That being said, I went to work on something that I thought would be the exact opposite: I’m calling the idea Randomization Within Reason.
The concept is fairly simple, you give a basic set of elements in XHTML and then you tell CSS to style it. The catch is that you write the CSS dynamically with PHP so that you can use randomization within the display. My hope was to create something that make me think outside the box.
What this is and is not
There should probably be some clarification about the point of this experiment…
1. This is not a fully functional website. There aren’t multiple pages, links, images, etc.
2. It doesn’t work entirely in Internet Explorer, the layout randomization is there but the moving Flash background isn’t. You’ll at least get the basic idea of what I was pushing for.
3. This is not intended to show “the right way of doing things.” It’s really all about the concept of dynamic layout and displaying things in ways I wouldn’t have previously tried.
Executing the Concept
With that in mind, some of the designs this page can produce are very good, some of them are very bad. It all depends on a variety of things, mostly being luck. This also depends on your outlook. If you expect this design to be “all there is to it,” it’s not going to happen. Personally, when I look at this I’m looking for font sizes, unique layouts of the presented paragraphs and list items, and placement and size of the headline text. The floating circles are pretty useful as well, to me, because it breaks up the negative space in ways I wouldn’t have though of as well. (The circles are also randomly generated with different sizes, transparencies, colors, motion and position.)
Obviously there are things that could be expanded, I’m thinking specifically about the color scheme, XHTML elements, and maybe defining some more rules (more unique and in some cases more restraining). I thought about delaying the release of this article until I had done some more of that type of thing, but I think this gets the point across well enough for now. In the future I might expand on this concept, for now I’m content with the way this turned out, seeing as it’s a proof of concept.
I’ve Been iFramed
Last night something interesting was brought to my attention through my Mint statistics. It’s probably only important for those interested in keeping their images and selective content from major search engines.
Usually when a search engine checks out my website I see the hit listed like this: “Search for: men and women” with a little icon indicating that the result deals with an image. Oh, and to clear the record, I’ve been getting a lot of hits on my site lately from people searching for similar things. Somehow in writing about that project for LifeBridge Church I didn’t expect it to bring in so many searches from things like Google images. I should have realized that was coming.
But I digress…
When you’re used to seeing something one way and it comes in differently you start to wonder. I got this link last night:
The difference is subtle but there’s something important to note. There isn’t an image icon and the referral page is written in a peculiar way. “search.netscape.com/search/imageDetails…” To me that seemed like an actual page rather than a quick picture link from a gallery.
Apparently Netscape has implemented a system that is capable of pulling in the image in their original context. That may seem innocent enough except for one underlying factor, the giant iFrame in the middle of the page.
Apparently that iFrame is able to pull all of your files as if the user was right on your website. Now, for most people that’s not a big deal but it could be if you consider the fact that all of your content can then be categorized by a search engine again or read locally. That of course is regardless of any work you have done to prevent that from happening by, say, a .htaccess file or a PHP script. So then it begs the question “why bother writing .htaccess files anyway if they’re just going to iFrame your content?” Apparently my .htaccess rule is working since you can’t see the image outside of the iFrame as it was intended.
I’m not saying or implying that Netscape has been malicious or that they are disregarding the robots.txt file. Apart from putting a copyright below the display of my content (which I don’t think is illegal or wrong, just potentially misleading and could make it difficult in some cases to determine who owns copyright for materials… maybe… I dunno… ) they haven’t really done anything wrong.
But the Netscape concept is an interesting one. This is going to sound a little “conspiracy theorist-ish” but I think this could be evolved to do some potentially dangerous things. For example:
Awhile back I wrote an article about a way that I thought seemed viable for keeping people from ripping off your CSS files. What the viewer should have seen on that Netscape page was a joke message from me, instead they actually got to see the page as it is presented from my site.
What that means is that the iFrame is loading the files in a way that bypasses scripts intended to keep you on the actual site. Now, at this point I’m sounding like I care quite a bit about my CSS files, etc. but that’s not really the case. The only reason I left the script running was because I wrote an article about it and feel somewhat obligated to do so.
Nevertheless, what I am concerned about is that people could theoretically pull or push more information than you care to allow, maybe including video files and streamed media. I know this isn’t exactly going to be a revelation to some people, iFrames have been around long enough to be discontinued and deprecated (or not?). I’m sure that there are people out there who haven’t trusted them from the start. But if you’re like me you probably never considered them as another level of potential security risks. The good news is that you’ll probably see the reference coming in if you’re using something like Mint to manage your statistics.
But I’m also concerned about the use of Javascript to pull or manipulate information on your page as well. With Javascript you could possibly reach into the scripts or html on the page and pull out some useful pieces of information about the way files are submitted or just the structure of how a user submitted mechanism works. That would be possible especially if the checks and balances systems in place are written in Javascript and not PHP.
Granted, structure and element information is nothing you can’t usually gather by reading a site’s Javascript files directly but the difference is that if the iFrame is completely capable of manipulating elements on your page then they could maybe use some custom scripts to post to your forms, among other potential inputs. How difficult would it be to pass false values for a variable to another Javascript file? PHP apparently can’t discern the difference between a remote and local page view, so could my website then pass data to your website’s MySQL database through Javascript submitted data?
I don’t know that most people will ever come across a problem like this, honestly I don’t know how much someone could actually manipulate from an iFrame to any dangerous degree. I’m not even convinced that anything could be done, period. But I think it’s worth keeping in the back of my mind at least, I might consider doing some testing on it in the future to see what I can manipulate remotely. If anyone else comes up with anything be sure to let me know what you find out, I’m definitely curious.
Additional and External Reading
Related in that they deal with malicious uses of iframes
*WebViewFolderIcon setSlice exploit in the wild – follow up
*Hackers Bring Host of Troubles
IFRAME Exploit Spreading Through Banner Ads
WYSIWYG and Word : Part 2
When I wrote my last post, WYSIWYG and Word I didn’t know I’d be writing it as a two part article. I thought I should update my findings since in some ways I besmirched Contribute in the last post, when in reality it’s not really Contribute’s fault at all.
When I wrote the last article I didn’t really have a strong background with Macromedia’s (now Adobe’s) Contribute. In taking a new position at work I was then required to learn about Contribute and how we use it in our organization. All of this being new to me.
Upon further observation I found out there is a vital setting to be changed in Contribute if you’re going to work with websites and don’t want a massive list of inline CSS styling.
First, check Contribute’s paragraph spacing options located in Edit -> Administer Websites -> (Click the connection name here, ie. mysite.com) -> Edit Role Settings (it’s on the right side of the window) -> Editing (from the list on the left) -> then, under the paragraph spacing options choose “Two lines, as in web page editors.” This will allow Contribute to use standard
tags instead of using CSS inline styles. If you’re looking for more accessability you probably want to click on the option “Require ALT text for images” (located in the “other editing options” section)
Next, you’ll want to click on the “Styles and Fonts” option in the left. There you’ll see the options for those who are editing the site. In our case we’re using “Allow users to apply styles (displays the style menu)” and “Include HTML heading styles (h1’s,…) in the style menu.” This will give you access to the traditional web elements.
Probably the biggest discovery, for me, was something a bit shocking. Usually, I go for the “paste” button by hitting control+v. If I had looked in the menu for once I would have seen the option for “paste text only” (control+shift+v) This solves the problem of posting from Word documents as it will strip the styles and macros from it. In our situation, it solved the majority of our problems. And, I must say, working with Contribute is kindof nice.