Oct 26

Jonathan Longnecker - From Design To Dynamic: Rapid Development with ExpressionEngine

Categories:
ExpressionEngine
Tags:
development, expressionengine, fieldframe, jonathan longnecker, structure
Published:
12:30pm on Monday 26th October, 2009

Jonathan Longnecker is a developer with fortyseven media. He discussed the tips and tricks they use to quickly build new ExpressionEngine sites.

Slides and code examples from the talk are on Jonathan’s site.

Introduction

  • The problem is that EE developers are too awesome. Add-on development has exploded, and functionality and usefulness is really amazing. Structure is a great example of this.
  • We typically use 15+ addons for every site, with the same kind of templates and global variables
  • The solution is to set up a sandbox site where the core and all add-ons are kept up-to-date. Add some default templates and global variables, a weblog for content, and some sweet tricks and you have the ability to rapidly build out new sites
  • We will be adding new things to it as we find great add-ons

Add-Ons

  • LG Addon Updater
  • LG htaccess Generator: Generates your .htaccess file, removes index.php and much, much more
  • LG Add Sitename: Enables Control Panel admin page title replacements, client logo
  • LG TinyMCE: Not convinced it’s the best choice, and it’s not good with pasted text. Turn off source formatting, spans and brs, take out the image upload, add blockquote
  • SL Developer Info: Lists all weblogs, templates, and other useful developer shortcuts. Give it it’s own custom tab in your nav bar
  • ImgSizer: Resizes and crops intelligently and creates thumbnails; make sure you create a “sized” directory in your images folder
  • Solspace’s Freeform
  • FieldFrame: Changes the way you can put together certain types of content
  • nGen File Field
  • Structure: Radically changes the way you handle content pages and navigation. Scared of using it initially as I thought it would lock me into certain way of developing templates, but it really has potential to speed up certain parts of your site; secondary static pages are a lot faster to set up

Tips and tricks

  • In your Template Preferences, turn on save template revisions (I use five) for added protection from mistakes, and always save templates as files
  • Create a “content” weblog with custom fields - meta keywords, meta description, a body (TinyMCE field type), and images (an FF Matrix). A sweet trick invented by AJ Penninga is to set up your images as a FF Matrix with a File field, title, radio group of sizes, radio group for crop height (optional), and dropdown for alignment. Then to insert the image add {image_1}, {image_2}, etc. in the body content. Your content template then uses LG_Replace to loop through the matrix images and replace those tags with the images inside the {images} tag
  • Create a client member group with access to file uploads, Structure and weblogs
  • Create global variables: I use html_head (containing doctype, static meta tags, favicon link, etc.), html_closing, jquery, javascript, rss (just your RSS links), and stylesheets
  • Create templates in site and _global groups: footer, header, nav (containing Structure’s nav_main tag), sidebar (using Structure’s nav_sub tag) and content (using Structure’s title_trail tag to build the </code> element)</li> <li>Keep the <code><body></code> tag inside each template so you can add a dynamic CSS id or class to it</li> <li>Replace the default homepage with a list of what’s been installed and configured on the sandbox site</li> <li>Moving servers is now faster than installing a new site, as the sandbox site is ready to go - just copy the database and files over and amend the <strong>config.php</strong> settings</li> </ul> <p>Jonathan ended with a live demonstration of creating a new site from scratch, using Structure to create pages and place them in the site <abbr title="Information Architecture">IA</abbr> really quickly, generate automatic navigation, and use Structure’s Listings feature to attach weblog entries to a page (a la a design portfolio). Structure makes it impressively easy to re-order navigation items.</p> </div> </div> <!-- /inner --> </div> <!-- /article --> <div id="comment-form"> <div class="inner"> <div id="offset"> <p class="intro">I'd love to hear what you think - please use the form below to leave your comments. Anything I consider too offensive, off-topic, or spammy will be deleted at my discretion. Some HTML is permitted, or you can use <a href="#">Textile</a>.</p> Commenting is not available in this weblog entry. </div> <div id="comments"> <ol> <li id="no_comments">Nobody has commented on this article yet - why not be the first?</li> </ol> </div> </div> </div> <!-- /comment-form --> <div id="footer"> <div class="inner"> <div id="tumblr"> <h2>Related Entries</h2> <ol> <li> <h3>40% match</h3> <h4><a href="http://v4.thewatchmakerproject.com/blog/derek-allard-standing-on-the-shoulders-of-giants/">Derek Allard - Standing On The Shoulders Of Giants</a></h4> <p>Derek Allard is EllisLab’s Technology Architect, and discussed how community shapes development at EllisLab.</p> </li> <li> <h3>40% match</h3> <h4><a href="http://v4.thewatchmakerproject.com/blog/brandon-kelly-make-a-market-out-of-our-community-the-whys-and-hows-of-selli/">Brandon Kelly - Make A Market Out Of Our Community: The Whys and Hows of Selling Add-Ons</a></h4> <p>Brandon Kelly is an ExpressionEngine add-on developer, responsible for the extremely popular <a href="http://brandon-kelly.com/fieldframe">FieldFrame</a> and <a href="http://brandon-kelly.com/playa">Playa</a> extensions. He spoke on the importance of commerciality in add-on development.</p> </li> <li> <h3>40% match</h3> <h4><a href="http://v4.thewatchmakerproject.com/blog/ryan-irelan-ten-ways-to-supercharge-your-ee-development/">Ryan Irelan - Ten Ways To Supercharge Your EE Development</a></h4> <p>Ryan Irelan works for <a href="http://www.happycog.com/news/2009/08/merger/">Happy Cog West</a>, and is also responsible for <a href="http://eescreencasts.com/">EE Screencasts</a>, the <a href="http://eeinsider.com/">EEInsider</a> site, <a href="http://eescreencasts.com/page/ee-help-chat">EE Help Chat</a>, and the <a href="http://ee-podcast.com/">EE Podcast</a>. He is working on an ExpressionEngine book that will cover EE 2.0.</p> </li> <li> <h3>40% match</h3> <h4><a href="http://v4.thewatchmakerproject.com/blog/potential-ee-add-ons-what-would-you-like-first/">Potential EE add-ons: What would you like first?</a></h4> <p>Partly because I really don’t know, but mostly because I haven’t got anything else to write about this week for Project 52, here is a list of potential ExpressionEngine add-ons I plan to build—and I’d like you to tell me which to do first.</p> </li> <li> <h3>20% match</h3> <h4><a href="http://v4.thewatchmakerproject.com/blog/veerle-pieters-designing-and-using-the-new-ee-2.0-interface/">Veerle Pieters - Designing and Using The New EE 2.0 Interface</a></h4> <p>Veerle is a highly-respected designer and <a href="http://veerle.duoh.com/">blogger</a>, and runs <a href="http://duoh.com/">Duoh!</a> with her husband Geert Leyseele.</p> </li> <li> <h3>20% match</h3> <h4><a href="http://v4.thewatchmakerproject.com/blog/michael-boyink-quoting-and-planning-expressionengine-projects/">Michael Boyink - Quoting and Planning ExpressionEngine Projects</a></h4> <p>Michael Boyink is a <a href="http://www.boyink.com/">consultant</a> and <a href="http://train-ee.com/">trainer</a> who has been working with ExpressionEngine since 2002. He discussed his process for planning and quoting on EE projects.</p> </li> <li> <h3>20% match</h3> <h4><a href="http://v4.thewatchmakerproject.com/blog/leevi-graham-how-to-start-developing-your-own-add-ons/">Leevi Graham - How to start developing your own add-ons</a></h4> <p>Leevi Graham runs <a href="http://newism.com.au/">Newism</a> in Australia, and has developed more than 25 add-ons over the last two years. His first and most profitable add-on was <a href="http://leevigraham.com/cms-customisation/expressionengine/lg-better-meta/">LG Better Meta</a>, and Leevi was named <a href="http://devot-ee.com/articles/item/first-annual-academee-awards/">2008 Add-on Developer of the Year on Devot:ee</a>.</p> </li> <li> <h3>20% match</h3> <h4><a href="http://v4.thewatchmakerproject.com/blog/paul-burdick-add-on-development-ee-expects-that-every-developer-will-do-his/">Paul Burdick - Add-On Development: EE Expects That Every Developer Will Do His Duty</a></h4> <p>Paul Burdick is the ex-CTO of EllisLab, and now works as Lead Developer for ExpressionEngine add-on shop <a href="http://www.solspace.com/">Solspace</a>.</p> </li> <li> <h3>20% match</h3> <h4><a href="http://v4.thewatchmakerproject.com/blog/jamie-pittock-the-art-of-proactive-parenting/">Jamie Pittock - The Art Of Proactive Parenting</a></h4> <p>Jamie Pittock is Operations Director for Nottingham-based <a href="http://erskinedesign.com/">Erskine Design</a>. He discussed effective ways to develop ExpressionEngine sites that increase understanding and remove uncertainty for your clients.</p> </li> <li> <h3>20% match</h3> <h4><a href="http://v4.thewatchmakerproject.com/blog/new-years-resolutions-project-52/">New Year’s Resolutions // Project 52</a></h4> <p>Perhaps I should feel bad that last year’s “Resolutions” post is still languishing in my Drafts folder, not so much unfinished as barely started. But 2009 kept me so busy that I barely had time to think, let alone blog. That is something I intend to change in 2010.</p> </li> </ol> </div> <div id="copyright"> © All content is copyright 2008-12 Matthew Pennell. All rights reserved. Comments remain the property of their respective authors. </div> <!-- /copyright --> <div id="right"> <div id="feeds"> <h2>Subscribe <i>to</i> RSS</h2> <p>If you use RSS, you can subscribe to receive updates when new content is added to the site. Choose from the following options:</p> <ul> <li><a href="/rss/blog">Blog entries only</a></li> <li><a href="/rss/links">Links, videos, and quotes only</a></li> <li><a href="/rss/full">All content in one feed</a></li> </ul> </div> <!-- /feeds --> <div id="search"> <h2>Search <i>the</i> site</h2> <form method="post" action="http://v4.thewatchmakerproject.com/" > <div class='hiddenFields'> <input type="hidden" name="ACT" value="19" /> <input type="hidden" name="XID" value="370fd06435a057313d48283733da436479aca424" /> <input type="hidden" name="RP" value="search_results" /> <input type="hidden" name="NRP" value="search_results" /> <input type="hidden" name="RES" value="" /> <input type="hidden" name="status" value="" /> <input type="hidden" name="weblog" value="journal" /> <input type="hidden" name="search_in" value="entries" /> <input type="hidden" name="where" value="all" /> <input type="hidden" name="site_id" value="1" /> </div> <div> <input type="text" name="keywords" maxlength="100" size="20"> <button type="submit">Search</button> </div> </form> </div> <div id="credits"> <h2>Validation <span class="amp">&</span> Credits</h2> <p>This site is <a href="http://validator.w3.org/check?uri=http://v4.thewatchmakerproject.com/blog/jonathan-longnecker-from-design-to-dynamic-rapid-development-with-expressio/&charset=(detect+automatically)&doctype=Inline&group=0">valid HTML5</a>, and mostly <a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.thewatchmakerproject.com/c/twp.css&profile=css3&usermedium=all&warning=1&lang=en">valid CSS2/3</a> with the odd browser-specific extension where necessary.</p> <p>The large icons on the home page are by <a href="http://www.crystalxp.net/galerie/en.id.3751-bagg-a-png.htm">Bagg & Box</a>, <a href="http://www.vistaicons.com/icon/i148s0/old_school_icons.htm">VistaIcons</a> and <a href="http://perishablepress.com/press/2006/08/20/a-nice-collection-of-feed-icons/">Perishable Press</a>. Any smaller icons are of course by <a href="http://www.famfamfam.com/">FamFamFam</a>. Stock photography mostly from <a href="http://www.sxc.hu/">stock.xchng</a>.</p> <p>Blog powered by <a href="http://www.expressionengine.com/index.php?affiliate=thewatchmakerproject">ExpressionEngine</a>. Links powered by <a href="http://www.tumblr.com/">Tumblr</a>.</p> <p>Hosted by <a href="http://www.mediatemple.net/">(mt) MediaTemple</a>.</p> </div> <!-- /credits --> </div> <!-- /right --> </div> </div> <!-- /footer --> <script> window.onload = function () { // Fix heights of blocks in footer var left_col = document.getElementById('tumblr').offsetHeight; if (document.getElementById('video')) { var middle_col = document.getElementById('video').offsetHeight + document.getElementById('quotes').offsetHeight + document.getElementById('copyright').offsetHeight; } else { var middle_col = document.getElementById('right').offsetHeight; } if (document.getElementById('video')) { if (left_col > middle_col) { document.getElementById('copyright').style.height = (left_col - (document.getElementById('video').offsetHeight + document.getElementById('quotes').offsetHeight)) + "px"; } } else { document.getElementById('footer').style.height = document.getElementById('footer').childNodes[1].style.height = (left_col > middle_col) ? left_col + "px" : middle_col + "px"; } window_onload(); } </script> <script src="/js/blog.js?v=3"></script> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-71160-5']); _gaq.push(['_setDomainName', 'thewatchmakerproject.com']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </body> <!-- page rendered in 1.2743 seconds --> </html>