Fluid layout, responsive design, grid layouts, efficient CSS, mobile first strategy, reusable jquery tools.

Object Oriented CSS

stubbornella.org
Object Oriented CSS on Github
http://net.tutsplus.com/tutorials/html-css-techniques/object-oriented-css-what-how-and-why/
https://github.com/stubbornella/oocss/wiki
CSS Lint
LESS and SASS

CSS Grids

http://www.1kbgrid.com/
http://cssgrid.net/
http://www.52framework.com/

Responsive Web Design

http://www.abookapart.com/products/mobile-first
http://www.abookapart.com/products/responsive-web-design
http://designmodo.com/responsive-design-examples/
http://www.alistapart.com/articles/responsive-web-design/

JQuery Tools Library

http://flowplayer.org/tools/
http://jquerymobile.com

Microformats

http://microformats.org/wiki

Using Flexible Boxes – Eric Meyer, author, CSS: The Definitive Guide, 3rd Ed.

flexible boxes are sort of like tables, but behave much better and do cooler things.

starting with: a list with list items (boxes of content, should align side by side).
on ol:
using display:box on the parent element makes all of its child elements also have display:box;
box-orient:horizontal;
box-pack:center /* only supported in webkit */

on li:
set a background color, then all the elements will match in height.
box-flex:1; /* sets flexible boxes. */

each box will get the same amount added (or subtracted) to it to fit the containing space.

for flex to be applied: you take the amount of space left over, and divide by the total number of box flex numbers, and apply the designated amount to each box. (could have box-flex:2 etc. which would get that box 2 parts assigned.)

box-ordinal-group: 2. could make a bunch of boxes 2, then give another one say class “sticky” of box-ordinal-group: 1, then it will always stay at the beginning of the list of boxes.

You can turn your whole page into a flex box, and use ordinal groups to rearrange content for mobile, etc. (put nav at the bottom, for example).

what to do with browsers that don’t support flexible boxes?
float it. This doesn’t solve all the problems though, for example equal height is not possible, or ordinal groups.

2011 flexible box specification has lots of new stuff

Our Best Practices are Killing Us – Nicole Sullivan, co-author, Even Faster Websites

stubbornella.org
Object Oriented CSS on Github

use grep to find problems with css.
use CSS Lint to find errors and duplication

usecases

facebook css was 1.9MB. Facebook blue was declared 261 times. 548 unique colors (whaaa?). color: was declared 6498 times.

salesforce: over 5000 padding declarations.

Duplication is a serious problem esp. with font size, floating, padding

alexa top 1000 consumer site study –
worst examples: 518 !important
733 floated elements – look at a grid based layout system!
889 font-size declarations

Myths

Using px is bad

using px is ok. only ie6 doesn’t support page zoom, which is the only reason not to use px. Using em’s turns into a mess because of nesting. It is hard to predict results, so it causes bugs. If you don’t support ie6, there is really no reason not to use px font sizes. Only use em’s or percentages on body and leaf nodes (if you must use them at all), no where in between.

Less markup is good

Less markup is good, but don’t go so far that doing so causes bugs. Surrounding a list by a div is ok, if it solves problems.

Semantic Markup is essential

css is too tightly coupled with the content. can semantics be taken too far? classes and id’s are not read by anybody besides other developers. So let’s make them work for us. For CSS, more is not better. Do not repeat yourself!

CSS pattern abstraction: “the media block“. (image on the left, some content on the right)
what we know:
can be nested
optional right button
must clearfix

don’t know:
image width, decoration
right content is unknown
width is unknown

separate structure from chrome

Is performance the most important thing

No. More important is repetition, duplication, legacy code.

Choose semantic elements: headings, lists, paragraphs
Abstract the css as much as possible from style and content.
http://net.tutsplus.com/tutorials/html-css-techniques/object-oriented-css-what-how-and-why/
https://github.com/stubbornella/oocss/wiki

Too many classes is bad

Uses more classes is actually faster and avoids duplication than using descendent selectors only. Using a class is more specific than using elements.

Specificity grows over time. Difficult to tell which rules take precedence.

Over time – specificity and duplication grows.

Use semantically correct headings in html, add class names to each one in css so you can apply visual semantics. (h1, .h1 {blah}).

Avoid descendent selectors whenever you can. Because those elements might not always be in that same situation. Make “reusable lego pieces”. Add class directly to elements you want to change, not parent nodes.

There are two main principles [in object-oriented CSS]: the first is to separate the structure from the skin and the second is to separate the container from the content.

greg’s notes on this talk

Idea to Interface – Aarron Walter, author, Designing for Emotion

greg’s notes. i failed.

Smoke Gets In Your Eyes (css3 animations) – Andy Clarke, author, Hardboiled Web Design

css animation fits better with semantic meaningful markup than other ways of web animation.

css3 animation demo studiohttps://developer.mozilla.org/en-US/demos/tag/tech:css3/

http://animatable.com/
http://animatable.com/demos/madmanimation/

transitions are basic animations.

@keyframes create more advanced animation effects.

@keyframes fade {
0% {opacity:0;}
25% {opacity:.5;}
100% {opacity:1;}
}

.lamp {
animation-name: fade;
animation-duration: 6s;
animation-delay:1500ms;
animation-iteration-count: 1;
transform: rotate(5deg);
}

css3 transforms

apply transforms and combine with keyframe animations to create effects.
translate (move)
rotate
scale
skew

greg’s notes (have more code samples)

A Content Strategy Roadmap – Kristina Halvorson, author, Content Strategy for the Web

content strategy resources

Content First – we can all agree on that. Content Always

Content isn’t copy. Content first is not copy first.

What we need is “content strategy” in the project framework
Content strategy plans for the creation, delivery and governance of useful, usable content.

what,why,how,when, for whom, with what, where, how often, what next

content components: substance, structure
people components: workflow, governance

how will your content serve your business and your users?

get away from the “launch it and leave it” strategy

it should enter a content lifecycle that goes around and around until the content is DELETED: >strategy>plan>create>maintain>audit>

Discovery

content audit: what do you have, what is it, where is it, what is it for. Also a good chance to update your meta title, desc. and keywords. A good person to do this task is the copywriter or “content wrangler”.

content ROT (redundant, outdated, trivial). REMOVE IT.
content readability, stakeholder agendas, legal requirements, style guides, metadata integrity, workflow and timelines, content owners

Define

content requirements
pair our business objectives with what the user expects and desires
content wrangler works with UX to create a “core message” that should guide the content requirements. Bring the copywriter in at the beginning of the content strategy process!

short and simple styleguide to demonstrate the copy voice matches the personality of the “core message”. This can be one page long.

editorial calendar – start this early and make it realistic based on the facts of the resources available.

make “page tables” which are templates for people to deliver content. Templates would include: key message, objective, priority, maintenance, source material. This will make it easier for content creators to give you what you want, and keep with the content objectives at all times.

Develop

html, qa, content upload, seo implementation, authoring conventions, data model, system integration

content inventory, upload, styleguide, seo guidelines, error messages, metadata, training materials, content qa plan

After Deployment. Maintain and Care

Maintain and care for the content, audit it, revisit, revise, keeping it with your core message

responsive content

Structure content to be modular for use across different devices. Think of your content objective, not the form that it lives in. Always keep with your core message, prioritize the content.

The Secret Lives of Links – Jared Spool, Founding Principal, User Interface Engineering

oops I got tired.
links. make them go where people want, make them look good but still like links, use trigger words to help people go where they want (hint: a trigger word is what they would put in the search bar).
Avoid back button and pogosticking (back and forth between the information hierarchy)

Content First! – Jeffrey Zeldman, author, Designing With Web Standards, 3rd Ed.

Good Design Begins With Content
http://www.readability.com/

Progressive Enhancement – Add Layers of Experience
http://easy-readers.net/books/adaptive-web-design/

Responsive Web Design
http://www.abookapart.com/products/responsive-web-design
http://designmodo.com/responsive-design-examples/
http://www.alistapart.com/articles/responsive-web-design/
http://10k.aneventapart.com/
http://futurefriend.ly

“Mobile First” Approach – Design for mobile first, then go up. Do we need all that crap?

With Great Power Comes Great Responsibility – Elliot Jay Stocks, author, Sexy Web Design

nizoapp.com
benthebodyguard.com
http://www.nikebetterworld.com/

awesome design inspiration: http://siteinspire.com/

Distraction of the ‘Real’
Am I using an effect that makes something on the page look real. If so, why?
It’s about considering the context.

Typography is (Almost) Everything

More fonts is not better
Learn from print design
http://8faces.com/

http://www.alistapart.com/articles/settingtypeontheweb
http://baselinecss.com/
Tim Brown: More Perfect Typography
Typecastapp.com

Working from the typography outwards. Good typography and layout is important. All the fancy stuff can be added later (shadows, border radius, glossy), it’s not as important.

ilovetypography.com/sayonara-2010

Use your powerful tools wisely.

HTML5 Design Principles – Jeremy Keith, author, HTML5 For Web Designers

all his resources and principles: principles.adactio.com

design principles: how
design goals: why
design patterns: what

rough consensus and running code – get it out, iterate

degrade gracefully – HTML5 form inputs is good example of this
rewards the newer browsers without hurting the older ones
being able to push the web forward without hurting the existing web

dark patterns – user interfaces designed to trick people
http://wiki.darkpatterns.org/Home
http://www.alistapart.com/articles/dark-patterns-deception-vs.-honesty-in-ui-design/
http://www.slideshare.net/harrybr/ux-brighton-dark-patterns

Mobile Web Design Moves – Luke Wroblewski, author, Web Form Design

mobile growth story

There are more smart phones than pcs.
mobile web usage is surpassing pc web usage (esp. email, twitter, facebook, yelp)
mobile web usage is higher than native app usage
prediction: mobile phone will overtake pcs as the most common way to access the web by 2013

84% of people say they use smart phones at home
80% during misc. times
74% waiting in lines
64% at work

what are they doing?
micro-tasking
local
bored

what are the constraints?
battery life, intermittent connection, small screen, limited time

mobile web design moves

core mobile behaviors:
lookup/find
explore/play
check in/status
edit/create

focus your design on optimizing for the activity
content first, navigation second
put the most important stuff (most visited content) on your mobile site, get rid of the rest. Get rid of it period.

Put navigation at the bottom of a content page, for them to “pivot and explore”. Top nav is just an anchor link to shoot to bottom of page. Get rid of chunky nav at the top, let them get right to the content.

On mobile, the bottom part of the screen is easier to access and navigate.

Use HTML5 forms to make data input as easy and error proof as possible
use input masks (hinting), autocorrect/autovalidate
use as few input fields as possible (only one field for phone, not 3)

use other ways to navigate (swipe to paginate, pull down to reveal, tap to save, etc.)

NUI – natural user interface
the content IS the UI
enable direct manipulation of content and objects
reduce distance between user and content

http://www.abookapart.com/products/mobile-first
Touch Gesture Reference Guide: lukew.com/touch

The Dimensions of a Good Experience – Alexa Andrzejewski, founder, Foodspotting

Taking lessons from urban design

what makes a user experience good?
does it leave an impression on the senses? Is it memorable?
How is the form a reflection of the values?
Use the language of design to tell the story you want to tell.
Have a clear sense of structure to orient the user

What is the #1 thing you want people to do on their first visit, (second, third). Reveal (unfold) experience based on what the user needs to do. this also helps people understand the purpose of the site.

Fit – design anticipates and assists user behaviors

What kinds of decisions are you asking users to make? Is it too many? too few? Are people paralyzed by choices?

Certainty – Give users feedback throughout their interaction. Make people feel safe and know what is happening, especially when they are giving out sensitive information.

The Responsive Designer’s Workflow – Ethan Marcotte, co-author, Designing With Web Standards 3rd Edition

http://www.ethanmarcotte.com/

What makes a design responsive?

Flexible/fluid grids
Flexible images and media
CSS media queries
Only valuable content – content first
Design across a set of user experiences
Make a comittment to your content and make it accessible regardless of context

Boston Globe – new responsive web site (he worked on it) bostonglobe.com

design is the method of putting form and content together. Design is a process, not the end result.

design and development have to work more together, for responsive web design. Ask more questions. Interactive design review (verify your work live, get prototyping early). Vet your assumptions of the static design. How well does the layout adapt? Does it still feel usable? Do any elements need additional design direction? (this is a process of moving back and forth between css/html and photoshop).

building for mobile first allows you to build a consensus early on about what content is really important.

fluid grid method:
target px / context px = result %
target is the pixel width of the column
context is the total value of the grid

633px / 960px = .659375%
.column {float:left;width:.659375%}

flexible image
img {max-width:100%}

screen size break points for media queries (there are a lot more than this, but these are common):
320px
480px
768px
900px

Since we can’t keep up with all the screen sizes, we should use responsive designs – flexible grid is the doing the heavy lifting. Media queries does fine tuning.

Here’s the original example I found Setting the height of a cross-domain iframe using postMessage:

This code goes on the page that will be in the iframe:

function postSize(e){
  var target = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined);
  if (typeof target != "undefined" && document.body.scrollHeight)
    target.postMessage(document.getElementById("foo").scrollHeight, "*");
}
window.addEventListener("load", postSize, false);

The id “foo” should be a div that is wrapped around the content for which you want to measure the height. In my example I used mainCol, which was the div that contained the form.

This code goes on the parent page (your domain), that will have the iframe embedded.

function receiveSize(e){
  if (e.origin === "http://www.example.com") // for security: set this to the domain of the iframe - use e.uri if you need more specificity
    document.getElementById("bar").style.height = e.data + "px";
}
window.addEventListener("message", receiveSize, false);

In this example the id “bar” should be the id you give you your iframe.

I changed a few things. First of all, addEventListener throws an error in ie, so you have to use attachEvent instead:

 if (window.addEventListener){
					window.addEventListener("load", postSize, false);
				} else {
					window.attachEvent("load", postSize);//for ie
				}

I also attached the height by setting the height attribute, rather than the style attribute. Additionally, I added 20px onto the calculated height to add some buffer, because I found the iframe to cut off the content a bit at the bottom.

  $("#iframe").attr('height', e.data);//receive and set the height sent from the postMessage
				   var b = $("#iframe").height() + 20; //adds a bit of height so the iframe doesn't get cut off
				   $("#iframe").attr('height', b); //set the height

Here was my final code. This went on the 2nd and 3rd pages of the form (on another domain, embedded in the iframe on my domain).

			function postSize(e){
			  var target = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined);
			  if (typeof target != "undefined" && document.body.offsetHeight)
				target.postMessage(document.getElementById("mainCol").offsetHeight, "*");  //change this star to your domain for more security
			}
			 if (window.addEventListener){
					window.addEventListener("load", postSize, false);
				} else {
					window.attachEvent("load", postSize);//for ie
				}

This went on the page with the iframe, on my domain:

          $(function() {
	  	 var ua = $.browser;
		  if ( ua.msie && ua.version.slice(0,3) == ("7.0") || ua.msie && ua.version.slice(0,3) == ("6.0")) {
			  var b = $("#iframe").remove().empty();//remove iframe for ie6/7 users and replace with a new iframe with scrolling=yes so they can see all the content
				 var c = ''
				 $('#iframe_holder').append(c);
		  }//postMessage doesn't work below ie8

  })

			function receiveSize(e){
				  if (e.origin === "http://www.theotherdomain.com") // for security: set this to the domain of the iframe - use e.uri if you need more specificity
				   $("#iframe").attr('height', e.data);//receive and set the height sent from the postMessage
				   var b = $("#iframe").height() + 20; //adds a bit of height so the iframe doesn't get cut off
				   $("#iframe").attr('height', b); //set the height

				}

			 if (window.addEventListener){
					window.addEventListener("message", receiveSize,false);
				} else {
					window.attachEvent("onmessage", receiveSize);//for ie
				}

And here was my iframe:

/*custom post type */
add_action('init', 'article_register');

function article_register() {
    $args = array(
        'label' => __('Credit.com Articles'),
        'singular_label' => __('Credit.com Article'),
        'new_item' => __('New Article'),
        'add_new_item' => __('Add New Article'),
        'edit_item' => __('Edit Article'),
        'taxonomies' => array('product'),
        'public' => true,
        'show_ui' => true,
        'capability_type' => 'post',
        'rewrite' => array( 'slug' => 'articles', 'with_front' => false),
        'hierarchical' => false,
        'exclude_from_search' => true,
        'menu_position' => 5,
        'supports' => array('title', 'editor','revisions')
       );  

    register_post_type( 'articles' , $args );
}

This worked fine and dandy on my wordpress blog, hiding the custom post types as it should. But I wanted to access these posts via a feed, and suddenly all the posts disappeared after I added the ‘exclude_from_search’ => true. I think this is a bug in wordpress.

So to get around this I removed ‘exclude_from_search’ => true. Instead I made a search loop function that excludes the custom post types. That way, the posts are excluded from the search, but are still available for me to pull in a feed.

If you don’t use thesis theme, all you have to do is slightly modify your search.php by adding this code after the start of your loop (replace ‘post’ with the name of your custom post type)

With thesis there is no search.php, so I instead started with a function written by Thesis expert godhammer:

/*
Custom Search API Loop
*/

$godhammer_search_and_destroy = new godhammer_api_loop;
	class godhammer_api_loop extends thesis_custom_loop {
		function search() {
			if(is_search()) 	{
	thesis_archive_intro();
			$paged = $this->get_paged_param();
			while (have_posts()) {
            the_post();
            thesis_hook_before_post_box();
            echo "\t\t\t
\n";
			thesis_hook_post_box_top();
            thesis_headline_area();
            echo "\t\t\t\t
\n";
         //   thesis_post_content();
echo get_the_excerpt();
            echo "\t\t\t\t

\n";
            thesis_hook_post_box_bottom();
            echo "\t\t\t

\n";
            thesis_hook_after_post_box();
        }
        wp_reset_query();
		}
    else 	{
        thesis_loop::search();
		}
	}
// PAGINATION RELATED
	    private function preserve_query_params($new_params = array()) 	{
        global $wp_query;
        return(array_merge($wp_query->query, $new_params));
	}
		private function get_paged_param() {
		if(is_front_page()) {
			$paged = (get_query_var('page') ? get_query_var('page') : 1);
	}
        else 	{
            $paged = (get_query_var('paged') ? get_query_var('paged') : 1);
	}
        return($paged);
	}
// END PRIVATE FUNCTIONS
	}
// END SEARCH LOOP API

I then modified this for my purposes by adding the exclude custom post type bit, plus some styling stuff for the search results to make it look like my current search results page. My final result was:

/*
Custom Search API Loop
*/
$godhammer_search_and_destroy = new godhammer_api_loop;
	class godhammer_api_loop extends thesis_custom_loop {
		function search() {
			if(is_search()) 	{
	thesis_archive_intro();
			$paged = $this->get_paged_param();
			while (have_posts()) {
            the_post();

			if (get_post_type() == 'content' || get_post_type() == 'articles') continue;
            thesis_hook_before_post_box();
            echo "\t\t\t
\n";
			thesis_hook_post_box_top();
            //thesis_headline_area();?>




            \n";?>

 
 on 
			



\n";
            thesis_hook_post_box_bottom();
            echo "\t\t\t

\n";
            thesis_hook_after_post_box();
        }
        wp_reset_query();
		}
    else 	{
        thesis_loop::search();
		}
	}
// PAGINATION RELATED
	    private function preserve_query_params($new_params = array()) 	{
        global $wp_query;
        return(array_merge($wp_query->query, $new_params));
	}
		private function get_paged_param() {
		if(is_front_page()) {
			$paged = (get_query_var('page') ? get_query_var('page') : 1);
	}
        else 	{
            $paged = (get_query_var('paged') ? get_query_var('paged') : 1);
	}
        return($paged);
	}
// END PRIVATE FUNCTIONS
	}
// END SEARCH LOOP API

http://css-tricks.com/conferences/ConvergeSE2011Pseudos.pdf (Chris Coyier’s hilarious presentation on :after and :before)

http://iestelle.com/wordcampsf (Estelle’s super awesome presentation, great overview and demo of almost everything css3 can do)

http://jsbin.com/super-css-super-challenge/

http://css-tricks.com/9516-pseudo-element-roundup/

http://westciv.com/tools

http://www.standardista.com/css3/css3-transform-property-and-the-various-transform-functions

http://css-tricks.com/examples/ShapesOfCSS/

http://nicolasgallagher.com/pure-css-gui-icons/

http://www.slideshare.net/saracannon/responsive-web-design-wordcamp-san-francisco

So we are adding numbers before the list items using :before. Since this is a pseudo element, we can actually apply a color style to it (or any other style for that matter), which is separate from the color style applied to the li element itself.

 ol {
		list-style-type:none;
		counter-reset:list;
	}

li {
		color:#333;
	}

li:before {
		counter-increment: list 1;
		content:counter(list) ".";
		color:#9dce32;
		padding-right:10px;
	}

hello this is the first thing in the list
this is the second thing on the list
and one more just for fun

post_content;
	return $content;
}

add_filter( 'the_content', 'ftf_full_text_for_feeds', -100 );

?>

The first element is the flag, which creates the 13 horizontal red and white stripes:

#flag {
				margin:0;
				padding:0;
				width:2000px;
				height:840px;
				background-color: #ffffff;
				background-image:-moz-linear-gradient(-90deg, #e0162b 50%, transparent 50%);
				background-size:310px;
				}

The next element is the blue square with 50 white stars. I must admit the stars were gnarly to make so I copied NIcolas Gallagher’s stars and adjusted accordingly.

	#stars {
			margin:0 0 0 -1px;
			padding:0;
			width:560px;
			height:456px;
			background:
		    -moz-linear-gradient(126deg, #0052a5 4%,   transparent 4%) -70px 48px,
		     -moz-linear-gradient( 54deg, #0052a5 4%,   transparent 4%) 30px 48px,
		     -moz-linear-gradient( 18deg, #ffffff 8.5%, transparent 8.5%) 30px 48px,
		     -moz-linear-gradient(162deg, #ffffff 8.5%, transparent 8.5%) -70px 48px,
		     -moz-linear-gradient(234deg, #ffffff 7.5%, transparent 7.5%) -70px 28px,
		     -moz-linear-gradient(-54deg, #ffffff 7.5%, transparent 7.5%) 30px 28px,
			 -moz-linear-gradient(126deg, #0052a5 4%,   transparent 4%) -20px 98px,
		     -moz-linear-gradient( 54deg, #0052a5 4%,   transparent 4%) 80px 98px,
		     -moz-linear-gradient( 18deg, #ffffff 8.5%, transparent 8.5%) 80px 98px,
		    -moz-linear-gradient(162deg, #ffffff 8.5%, transparent 8.5%) -20px 98px,
		     -moz-linear-gradient(234deg, #ffffff 7.5%, transparent 7.5%) -20px 78px,
		     -moz-linear-gradient(-54deg, #ffffff 7.5%, transparent 7.5%) 80px 78px;
			background-color:#0052a5;
			background-size:100px 100px;
		}

Here’s my demo of the American flag

I used wp_set_object_terms, which creates the term and taxonomy relationship if it doesn’t already exist. This is used to assign the category to the post. I used the parameter “true” to keep any other categories that were there in tact.

I also use wpdb to interface with the database. The $wpdb object can be used to read data from any table in the WordPress database.

My first task was to assign category with ID 9547 to all posts UNLESS the post was also in the category with slug ‘bundle’. This was accomplished like so:

function add_category_automatically1($post_ID) {
	global $wpdb;
		if(!in_category('bundle')){
			$cat = array(9547);
			wp_set_object_terms($post_ID, $cat, 'category', true);
		}
}
add_action('publish_post', 'add_category_automatically1');

This was simple enough. Using the action ‘publish_post’, the category is automatically assigned when I publish the post. I also wanted to prevent posts from getting category 9547 if they were by 2 specific authors, with author ID’s 29 and 30. This was a bit more difficult. In order to access the author of the post, I had to pull the author ID (post_author) for the current post from the posts table in the database. Using $wpdb->get_results, ‘Generic, mulitple row results can be pulled from the database with get_results. The function returns the entire query result as an array.’ Based on this example from the codex:

$fivesdrafts = $wpdb->get_results("SELECT ID, post_title FROM $wpdb->posts
	WHERE post_status = 'draft' AND post_author = 5");

foreach ($fivesdrafts as $fivesdraft) {
	echo $fivesdraft->post_title;
}

I created my own that got the post_author for the posts, looped through them, and then assigned the category 9547 to each post except those by author 29 or 30, like so:

function add_category_automatically2($post_ID) {
	global $wpdb;
	$postsWeWants = $wpdb->get_results("SELECT ID, post_author FROM $wpdb->posts where ID = $post_ID");
	foreach ($postsWeWants as $postsWeWant) {
		if(($postsWeWant->post_author != 30) && ($postsWeWant->post_author != 29)){
			$cat = array(9547);
			wp_set_object_terms($post_ID, $cat, 'category', true);
		}
	}
}
add_action('publish_post', 'add_category_automatically2');

Then I put them both together, to get one function that would assign category 9547 to every post UNLESS it was also in category slug ‘bundle’, or by authors 29 or 30. Here is the final function:

function add_category_automatically($post_ID) {
	global $wpdb;
	$postsWeWants = $wpdb->get_results("SELECT ID, post_author FROM $wpdb->posts where ID = $post_ID");
	foreach ($postsWeWants as $postsWeWant) {
		if(($postsWeWant->post_author != 30) && ($postsWeWant->post_author != 29) && !in_category('bundle')){
			$cat = array(9547,9742);
			wp_set_object_terms($post_ID, $cat, 'category', true);
		}
	}
}
add_action('publish_post', 'add_category_automatically');