jcobb

Creating an interface component to apply React.js CSS transitions on initial render

ReactCSSTransitionGroup is an addon component for React.js which allows you to perform CSS transitions and animations when a React component enters or leaves the DOM.

When a new item is added to ReactCSSTransitionGroup it will get the .transitionName-enter CSS class and the .transitionName-enter-active CSS class. Conversely, when an item is removed, it will receive the .transitionName-leave and .transitionName-active CSS classes.

This allows you to apply whatever CSS transitions you want to elements as they enter and leave the DOM.

The problem

jcobb

An opinionated guide to React.js best practices and conventions

I've been using React.js for a little while now, both in my 9 to 5 job and for my own projects, and during that time I have started evolving my own set of 'best practices'.

The following guidelines mostly focus on component structure and JSX. However, they are not hard and fast rules, but more of an opinionated set of guidelines I choose to adhere to that make my code more readable, more robust and easily maintainable.

Note: This article does not provide explanations of the React paradigms or idioms mentioned here or used in the examples, that is best left to the excellent documentation provided by the React team.

Component organisation

jcobb

# Update LS colors
export CLICOLOR=1
export LSCOLORS=GxFxCxDxBxegedabagaced

if [[ $COLORTERM = gnome-* && $TERM = xterm ]] && infocmp gnome-256color >/dev/null 2>&1; then
	export TERM=gnome-256color
elif infocmp xterm-256color >/dev/null 2>&1; then
	export TERM=xterm-256color
fi

jcobb

<div class="category-navigation">
<?php

	// get the root category id
	$root_cat_id = Mage::app()->getStore()->getRootCategoryId();

	// get the current category object and ID
	$current_cat_obj = Mage::registry('current_category');
	$current_cat_id = $current_cat_obj->getId();

jcobb

<?php

// An example of creating two separate WP queries, combining the results, 
// sorting by date and formatting the results for us in a loop like a regular query.

// order the posts by date in descending order (should go in functions.php to keep things tidy)
function order_by_date( $a, $b )
{
	return strcmp( $b->post_date, $a->post_date );
}

jcobb

/**
 * The first commented line is your dabblet’s title
 */
 
 #wp-log-output{
 	padding:10px;
 	background:#fff;
	border:1px solid #eee;
	font-family:Helvetica;
	color:#555;

jcobb

<?php

function log_post($post){

	$p_title 	= $post->post_title;
	$p_type 	= $post->post_type;
	$p_cat		= get_the_category( $post->ID );

	$summary = '<strong>Post Title: </strong>' . $p_title;
	$summary .= ' | <strong>Post Type:</strong> ' . $p_type;

jcobb

<?php

function my_print_r($thing,$description=false){
	echo '<pre style="background:#fff; padding:10px; color:#111; font-family:monospace; font-size:12px; border:1px solid #555">';
	if($description) echo '<strong>'.$description.'</strong><br><br>';
	print_r($thing);
	echo '</pre>';
}

//Usage

jcobb

Magento Snippets

Download extension manually using pear/mage

Pear for 1.4, mage for 1.5. File downloaded into /downloader/.cache/community/

./pear download magento-community/Shipping_Agent
./mage download community Shipping_Agent

Clear cache/reindex

jcobb

# This is a template .gitignore file for git-managed WordPress projects.
#
# Fact: you don't want WordPress core files, or your server-specific
# configuration files etc., in your project's repository. You just don't.
#
# Solution: stick this file up your repository root (which it assumes is
# also the WordPress root directory) and add exceptions for any plugins,
# themes, and other directories that should be under version control.
#
# See the comments below for more info on how to add exceptions for your