I was given a copy of a book called “Magento: Beginner’s Guide” to review, so here goes.  Overall, the book does a good job of giving a high-level walkthrough of all the different aspects of running a store with Magento.

Chapter 1: Introduction, Chapter 2: Installation, Chapter 3: Categories and attributes – High level overview of Magento.  These chapters aren’t very useful if you’ve already used Magento at all, however for someone starting from scratch this would be a faster way of learning than going through the guides on Magento’s website. Chapter 3 is available as a free sample.

Chapter 4: Taxes – Very good chapter – I actually learned a lot.  It was very helpful as I am finishing up a Magento store right now and am about to configure taxes.  It discusses how tax rates and rules work in detail,  according to the product type and purchaser’s location.

Chapter 5: Adding simple products – Same analysis as Chapters 1-3.

Chapter 6: Minimum customization of your store’s appearance – Great for pointing beginners at where different files in Magento live and how to customize them.  However many of the tips for customizing the design will break if you try to update your site and default theme.  I’d recommend reading my post for Magento beginners before you start customizing anything.

Chapter 7: Beyond simple products – Helpful, although doesn’t provide much more information than is readily available on Magento.com.

Chapter 8: Customer relationships – About managing customer accounts. Configuring store contact options.

Chapter 9: Accepting payment, Chapter 10: Configuring shipping – Pretty thorough job of explaining different methods of accepting payments with the various gateways, and configuring all the different shipping options.  There’s a lot of details and explanations, so I’ll be looking back on this chapter again.**

Chapter 11: Fulfilling an Order – A walk-through of fulfilling an order. Discover your options for handling order fulfillment by observing the lifecycle of an order in Magento.

Appendix: Abbreviated step-by-step directions – A good idea for any book!

To learn more or purchase: “Magento: Beginner’s Guide” by William Rice

Magento is an incredible open-source PHP eCommerce platform built around the idea of flexibility, and has been gaining a huge amount of traction over the last 18 months.  Unlike “old” open-source solutions such as osCommerce, Magento was architected very carefully using OOP principles and MVC so that the entire system can be customized (both visually and functionally) without having to modify core application files.  This ensures that future updates aren’t a pain, and that multiple extensions can live peacefully together.

I’ve been working with Magento for over a year now, and overall I’m extremely impressed.  The architecture of the system is certainly very complex, but once you start to poke around and understand why there are so many different directories and files, and how everything is organized, you’ll love the flexibility that it creates.

The biggest complaint of Magento is the lack of documentation. From the wiki pages, to user guides, to source code comments, the documentation is severely lacking and often out-of-date.  I hope this improves over time (I think it will).  What I’ve found is that you can eventually figure things out, but the learning curve is just a little steeper than it needs to be.  It is pretty necessary to understand many core concepts of Magento (how XML layout files are used, how data is stored, how template blocks and functionality interact, etc.) in order to correctly make even the simplest of changes.  But once you get it, you can do a lot.  I think the CMS ExpressionEngine does extremely well at this, in comparison, and they are both products aimed at similar audiences.

When I started developing on top of the Magento platform, I kept a log of some of the help things that I learned along the way, that I wish I had known upfront.  Many of these tips seem obvious upon looking back, but I thought I’d share them for anyone just getting started programming or designing for Magento.

For everybody:

• Use the Wiki, Knowledge Base, and forums
• Don’t ever modify core Magento files! Seriously.  This quick article is a must read for all beginners.
• To upgrade to a new version of Magento: just upgrade all of the components by using Magento Connect Manager.  This is found in the admin’s System menu, or by adding /downloader to the Magento home page URL.
• To add Google Analytics: simply add your Analytics account profile’s tracking number under Config > Google API
• To setup PayPal IPN: there is no need to change IPN settings in your PayPal account.  Magento automatically passes the IPN path with each checkout.
• Refresh the cache! If you make a change and wonder why it’s not showing up, use the dropdown on System > Cache Management.  It’s helpful to disable the cache during development.
• Learn how to customize via XML
• After installing Magento with sample data and SEO URL rewrites, the same data shows up on the index page but many of the links are broken, even with my .htaccess file present.  Solution: Refresh catalog rewrites in Admin > System > Cache > Refresh catalog rewrites
• Learn how to optimize and speed up Magento’s performance. It’s very slow by default but can be drastically improved. (I’ll be writing another blog post on this soon, but for now check out this thread.)

Design/theming tips:

• Read the Design Guide
• To figure out which template file to edit: turn on “Template Path Hints” through System > Configuration > Advanced > Developer > Debug > Template Path Hints = ON.  This option is only visible if you change the “Current Configuration Scope” dropdown to a website (like “Main Website”) rather than “Default Config”.
• To switch to a theme (such as “Modern”), after downloading it in Magento Connect Manager, go to System > Design and then click “Add Design Change”.

Programming tips:

• Understand the architecture
• To debug and output PHP variables: set System > Configuration > Advanced > Developer > Log Settings- > Enabled = Yes.  Then, from a CLI in your web root do “cd var/log/” and “tail -f system.log”.  In PHP, you can say Mage::log(“hello world”); to write to this log.
• Locate the PHP error log when getting a blank/white page, or an error message.  Mine was in public_html/error_log.

That’s all for now.  If you’re looking for a Magento designer or developer, get in contact with me.

I’m working on slicing and CSS for a new theming project for Magento Commerce and was plagued with a CSS bug that affects WebKit (Safari and Google Chrome).  After some searching I found that several other people have had the problem, but I didn’t see a comprehensive writeup of the solution.  Here’s what I found…

Bug description: When having a centered background image over a centered div (like a drop shadow over a main content div), the background image’s position would sometimes be “off” by 1px as the viewport in Safari, depending on the width of the viewport.  So half of possible viewport widths would show the incorrect version.  While 1px isn’t the end of the world, it can really hurt a design, and it’s nice to get center alignment in Safari/Chrome to work like Firefox/IE.

Example code:

body {
    background: #f8f8f8 url(../images/dh_bg.jpg) 50% 0 repeat-y;
}
div#everything {
    width: 980px;
    margin: 0 auto;
}

Partial Solution: First of all, always use an even-width background image – this way the rest of the browsers will get it right automatically.

To fix Safari we can apply a CSS hack targeted towards WebKit.  If your background image’s width is just a little wider than your main div, then this will fix it:

@media screen and (-webkit-min-device-pixel-ratio:0) {
    body {
        background-position: 49.999% 0;
    }
}

The problem with this is that if the viewport is resized to be a little larger than your div, but not as large as your background image, then the 1px problem comes back.

Real Solution:
So my solution is always use an even-width background image that is wider than the devices you want to support. I made mine 5000px wide (which is still < 1kb).  Then, the following CSS works great:

@media screen and (-webkit-min-device-pixel-ratio:0) {
    body {
        background-position: 50.001% 0;
    }
}

Hope that helps somebody.

Thanks to the helpful comments on Rob Goodlatte’s post (a JavaScript solution), which helped point me in the right direction.

I listened to a very interesting TED Talk today by Dan Pink. You can watch it below or read my brief notes from it.

Source

Pink discusses several research studies on how typical reward-based motivation works very well for routine, mechanical tasks, but fails — and actually decreases performance — for tasks that require any kind of creativity.

The solution is to add intrinsic motivation for cognitive/creative tasks, which comes in three forms.

1. Autonomy – an urge to direct our own lives
2. Mastery – a desire to get better and better at something that matters
3. Purpose – a yearning to do what we do in the service of something larger than ourselves

Traditional management is good for compliance, but self-direction is good for engagement.  He then goes on to tell a few stories of how autonomy has worked for companies in the real-world.

Summary:

1. Traditional rewards do work, but only in a narrow band of circumstances.
2. If-then rewords often destory creativity.
3. The secret to high performance is the unseen intrinsic drive.

As I think about what projects I’ve felt especially motivated on in the past, I can definitely identify how I’ve been motivated by autonomy, mastery, and purpose.  I hope to seek, with more clarity, projects and work that have these characteristics.

I had a few goals for this summer away from school.  I wanted to go to some tech conferences, check out more startups and web companies in both Silicon Valley and closer to home in Florida, and continue with my freelance development work.  I also decided I wanted to take the Zend PHP 5 Certification test to learn more, see what I know, and to separate myself from every other kid who thinks they know PHP.

By the way, the thing I hate about PHP most is that, because it’s so easy to get started with, you can’t immediately differentiate between people who really know PHP (with a solid understanding of security issues, scalability, MVC, object-oriented programming, design patterns, etc.) and people who know just enough to be dangerous.  I’ve seen way too many websites written with PHP and HTML scattered together, SQL injection vulnerabilities, lack of code reusability, etc. This problem isn’t specific to PHP only, but I find the percentage of novice PHP developers to be far worse than, say, Ruby or Python developers.

So I looked through the “php|architect’s Zend PHP 5 Certification” study guide for the last couple days and took an online practice test.  I actually learned a lot of interesting things about PHP that I didn’t know – so it was a good experience.

Today I took the exam at a local testing center and am happy to announce that I am officially a PHP 5 Zend Certified Engineer (ZCE).

By the way, if you’re looking to hire a good PHP developer, let me know (resume is here).  I graduate in December 2009.

Hate scrolling down to see birthdays on Facebook? I just wrote a quick user script to reorder the parts in the sidebar on Facebook’s homepage.

Before: Requests, Suggestions, Sponsored, Highlights, Events/Birthdays, Connect
After: Requests, Events/Birthdays, Suggestions, Highlights, Sponsored, Connect

Step 1: install Greasemonkey (Firefox) or GreaseKit (Safari), and restart your browser
Step 2: install my Facebook Reorder Sidebar userscript
Step 3: visit Facebook and enjoy :)

Google I/O 2009 Keynote, Day 2
4/28/2009

Google Wave – Product, Platform, and Protocol

• Attempt to answer “what would email look like if it was developed today”
• Combines Gmail, Translation, collaboration via Google Docs, Photos, etc., all in one
• Because it is completely open, companies can host their own instances of Wave and Google never has to see the data – yet the users of separate platforms can still communicate with each other!

TechCrunch coverage
Google Wave
Google Wave APIs
Google Wave Protocols

I’m looking forward to WordCamp this weekend.  I’m curious to see if there will be any WordPress / Google Wave integration already.  Being able to have blog comments automatically pushed to users who aren’t actually looking at your blog would be a huge win.  If there’s no WordPress integration project already, I may just start one.

Google I/O Keynote

Wednesday 5/27/2009

San Francisco, CA #io2009

Better liveblogging here: http://www.techcrunch.com/2009/05/27/live-from-google-io-2009/

100x improvement in JavaScript speed in the last decade

Firefox, Chrome, Safari, & Opera – all supporting HTML5 with Canvas, Video, Geolocation, App cache / database, Web workers

Canvas tag – supported in all but IE

Bespin – web IDE

Chrome profiler is built completely in HTML5

O3D – OpenSource 3d in JavaScript

Video tag – get video out of “plugin prison”

YouTube demo with <video> tag

Geolocation – supported in all browsers but IE

Mozillia VP – “A good API in 4 browsers is better than a perfect API in 0 or 1 browsers”

Google Maps will soon be adding a geolocation button

Announcement: Google Latitude on the iPhone in the browser using geolocation (WOW)

App cache / database – supported in all browsers but IE

Demo: with Safari – manifest file names cached application/graphics files

Demo: web app on Android with GMail in airplane mode – extremely fast

Web workers – threads in the browser – so JavaScript doesn’t completely freeze the browser

Demo: motion detection from the video tag all in JavaScript

===

Google App Engine

200,000+ developers, 80,000 + applications

Whitehouse app had 700 requests/second with no problem

Announcement: Java open on App Engine

Demo: develop an Ajax app in Eclipse (with Google plugin) in Java on both serverside (app engine) and client side (GWT) extremely quickly.  Just hit deploy (no FTP) in Eclipse.

Google Web Toolkit

Upcoming: Debug directly in any browser

Upcoming: runAsync() lets the compiler split up JavaScript files.  Example: 1.4MB to 200KB, compiler handled dependencies itself.

===

Google Web Elements (announcement)

Copy and paste website content:

Calendar, Conversation, Custom Search, Maps, News, Presentations, etc.

===

Android – coming soon new features

FREE ANDROID for everyone!

Today I tried Mozilla Prism (cross platform) and Fluid (mac only), both of which are used to create single-site browsers (SSBs).  I especially wanted to use them for GMail and Google Calendar since those are the two web apps I consistently have open in a tab at all times.

I’m still playing with them both but the first thing I realized was that they would have to do better than use the 16×16 favicons.  I was able to extract the official high resolution Google icons from the Google Gears desktop shortcuts for GMail and GCal, so they are attached.  These will work for Fluid.  For Prism, you’ll have to use the PNGs attached.

Later I found Chris Ivarson’s page with some great icons, but my first couple Google searches didn’t lead me there, and he doesn’t have the standard icons that come from Google.

Edit 1: By the way, I have chosen Fluid because its icon shows me my number of unread messages so I can keep it hidden when I don’t have new mail… very helpful.

Edit 2: By popular request, I just added a Fluid icon for Google Wave also

Attachments: gcal.icns gmail.icns google_wave.icns

For a new project, I’m working on launching a large number of very similar WordPress installations with minimal effort. I needed a way to have WordPress automatically parse some kind of template tag or shortcode (like “[client_name]”) across all the different pages on the site. Not only that, I needed the field’s values to be easily updated in one place, and there would be an arbitrary number of shortcodes.

So I wrote my first WordPress plugin…

Here’s a description of it:

This plugin allows you to write your page content like this: “Contact our company, [company_name], by email at: [email].”

Text with these shortcodes can be defined on any number of pages throughout your site.

The values of all of the shortcodes are controlled in a single location: the Custom Fields of your blog’s home page. For the above example, there would be Custom Fields on the home page called “company_name” and “email” with the values, respectively, of “Example Company Name” and “info@example.com”.

This plugin requires that you have WordPress set to show a static Page on the home page under Settings->Reading and “Front page”.

So then, for all the custom fields entered on the home page, this plugin looks for shortcodes (in all pages) and replaces each of their values, upon output, with the relevant custom field value.

This is useful for if you want to fill many pages with text that includes an arbitrary number of shortcodes or template text and have all the values can be replaced in one place.

You can download it from the plugin page, or just grab the SVN.

Random WordPress notes:

• I highly recommend always installing WordPress by svn – it’s easy (faster than uploading) and makes updates a breeze.  If you want to get fancy, you can also install your plugins by svn through svn:externals.
• If you want to make the process go really quickly, take a look at wp-create.sh.  I’m using this (plus other tools) to setup WordPress installations in no time.
• I just found out about /wp-admin/options.php for the first time – very handy way to see/edit all saved options at once.
• I also just registered for WordCamp 2009 in San Francisco… looking forward to it!