Looking Back – Jweiland’s TYPO3 Best Practice Workshop

Jun 5, 2012

Kudos to Jochen Weiland and Riona Kuthe of JWeiland.net for giving a very good TYPO3 best practices presentation at the 2008 Berlin TYPO3 conference. In citing the typical excuse of being busy, I didn’t look deeper into their workshop PDF until April 2009.

What a newbie mistake

That  best practice workshop PDF  contains lots of good advice like hosting recommendations, modularizing TypoScript code and helping pick which templating method is right for you. Because of it, I immediately made many changes to my TYPO3 skeleton site.

It’s 2012, change happens

While I think that most of Jochen’s best practice recommendations still stand, I’d like to make the following succinct suggestions.

  • TYPO3 Provider PHP’s Settings
    • memory_limit = 64M
    • upload_max_filesize = 100M
    • post_max_size = 100M
  • Update your .htaccess file
  • TYPO3 Install Tool Settings (live)
// make BE permission access lists easier to manage with checkboxes than multiple select
$TYPO3_CONF_VARS['BE']['accessListRenderMode'] = 'checkbox';
// BE compression enabling
$TYPO3_CONF_VARS['BE']['compressionLevel'] = 5;
// don't allow access unless it was specifically given
$TYPO3_CONF_VARS['BE']['explicitADmode'] = 'explicitAllow';
// cleaner BE temp file URLs
$TYPO3_CONF_VARS['BE']['versionNumberInFilename'] = 1;
// FE compression enabling
$TYPO3_CONF_VARS['FE']['compressionLevel'] = 5;
// keep FE user logged in unless they specifically log out
$TYPO3_CONF_VARS['FE']['permalogin'] = '1';
// cleaner FE temp file URLs
$TYPO3_CONF_VARS['FE']['versionNumberInFilename'] = 1;
// don't run development modes on a production server
$TYPO3_CONF_VARS['SYS']['enableDeprecationLog'] = '';
$TYPO3_CONF_VARS['SYS']['sqlDebug'] = false;
$TYPO3_CONF_VARS['SYS']['syslogErrorReporting'] = '0';
$TYPO3_CONF_VARS['SYS']['systemLogLevel'] = '4';
  • Modular (TSConfig &) TypoScript Code
    • Use source control for CSS, HTML, TSConfig and TypoScript files
    • Include (TSConfig &) TypoScript via INCLUDE_TYPOSCRIPT into TYPO3 Templates
    • Examples…
<INCLUDE_TYPOSCRIPT: source="FILE:EXT:extkey/folder/file.txt">
<INCLUDE_TYPOSCRIPT: source="FILE:fileadmin/typoscript.ts">
<INCLUDE_TYPOSCRIPT: source="FILE:EXT:in2master/Configuration/TSConfig/rte.ts">
  • Templates
    • Learn to use FLUIDTEMPLATE for templates
    • Avoid using TemplaVoila as it’s no longer developed or maintained
  • TypoScript: Standard Configuration
    • Use one and include it via INCLUDE_TYPOSCRIPT
    • Review your standard configuration for TYPO3 4.5+ changes
config {
	 # Enable Links Across Domains: Post TYPO3 4.2
	typolinkEnableLinksAcrossDomains = 1
	 # Page Title First:If set (and the page title is printed) then the page-title will be printed BEFORE the template title.
	pageTitleFirst = 1
	 # Redirect Old Links to New
	redirectOldLinksToNew = 1
	 # Correct Multiple Domain Links
	typolinkCheckRootline = 1
	 # Disable border attribute of img tags
	disableImgBorderAttr = 1
	 # Disable Base Extension Wrap
	disableBaseWrap = 1
	 # Disable Extension BEGIN/END in HTML
	disablePrefixComment = 1
	 # Send Cache Control Headers:Output cache-control headers to the client
	sendCacheHeaders = 1
	 # Minify CSS: CSS files will be minified and compressed. For TYPO3 4.5+
	minifyCSS = 1
	 # Merge CSS &amp; JS: Merges Stylesheet and JavaScript files referenced in the Frontend together. For TYPO3 4.5+
	concatenateJsAndCss = 1
	 # Remove Default CSS: Default CSS in the header will be removed.
	removeDefaultCss = 1
	 # Minify JS: JS files will be minified and compressed. For TYPO3 4.5+
	minifyJS = 1
	 # Remove Default JS: Default JavaScript in the header will be removed.
	removeDefaultJS = external
	 # Link to TYPO3 CSS:If set, the inline styles TYPO3 controls in the core are written to a file.
	inlineStyle2TempFile = 1
	 # Unique Link Vars: Prevent links with the same parameter more than once.
	uniqueLinkVars = 1
	 # Move JavaScript to Footer
	moveJsFromHeaderToFooter = 1
}
  • Tools
    • Use your browser’s Developer Tools to run Audit
    • Use Google PageSpeed to get suggestions to make the page load faster
    • Check out YSlow, similar to Google PageSpeed, but more in depth

If you did the TYPO3 Install Tool updates above for `compressionLevel` and did NOT update .htaccess, your TYPO3 backend will not work.

I really want to know your TYPO3 best practices and suggestions. Even knowing what hasn’t worked is valuable, please take a moment to tell me about them via comments.

I’ll be creating a new presentation on TYPO3 Best Practices soon. Ask me to come present at your organization.

Revised since April 29, 2009

Robust Newsletters: TYPO3 Built

Feb 6, 2012

Stonebriar Community Church runs TYPO3 and WordPress. TYPO3 is the core of their church content and web-based applications. While WordPress is for their community and micro sites.

As the number of Stonebriar’s ministries have grown, so has their personal and social outreach needs. One method that quickly became overwhelming was creating newsletters in Word documents and sending them via Shelby Systems’ church management software.

As most of Stonebriar’s communication’s team was already comfortable with TYPO3, it made sense to generate Stonebriar’s newsletters with TYPO3.

Setting up TYPO3 to generate newsletters is similar to a website. However, there are readability concerns because email applications differ in showing newsletter content. As such, simple layouts, inline styling and robust HTML source are required.

Creating a simpler layout is made easier by using MailChimp’s HTML Email Templates. Why? Because most email applications don’t fully support modern HTML specifications. Yes, that means using tables rather than divs and CSS for content layout.

TYPO3 extension CSS to inline converter for direct mail handles consistent styling in emails. css2inline takes our CSS style sheets and applies the CSS directly to HTML elements. Lastly, it removes the CSS style sheet links from our HTML source. Why? Because most email applications ignore CSS style sheets.

Finally, TYPO3 extension SourceOptimization helps us with solid HTML as our final output by removing whitespace between element tags. Why? Because some mixtures of character encoding and whitespace in HTML newsletters can cause funky characters, like “message, “A Life that Matters.†  In the Atrium” to show up in the email.

In pulling these components together, the two main TypoScript setup templates, config and page, are shown below. The last tricks of this system are the use of Backend Layouts to give our communication team editors a visual reference when editing content and a little custom code to convert Word’s smart quotes into HTML entities that don’t break Shelby’s newsletter file importerhttps://aihr.us/files/.

in the page object below, the css and layout files are automatically adjusted per the backend layout used for the newsletter page. the smart quote encoder is called using stdwrap.postuserfunc = user_functions->user_encodeSmartQuotes as the final processing for PAGE.

Complete TypoScript and Backend Layout are linked to as T3D exports in References.

TypoScript

Setup Code for Config

config {
  headerComment (
  )
  language = EN
  htmlTag_langKey = en-EN
  locale_all = [email protected]
  meaningfulTempFilePrefix = 50
  disableAllHeaderCode = 1
  tx_realurl_enable = 1
  baseURL = {$config.baseURL}
  absRefPrefix = {$config.baseURL}
  prefixLocalAnchors = all
  redirectOldLinksToNew = 1
  disableBaseWrap = 1
}
page.config {
  doctype = xhtml_trans
  disablePrefixComment = 1
}
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.addAttributes.P.class >
lib.parseFunc_RTE.externalBlocks.table.stdWrap.HTMLparser >
lib.stdheader {
  stdWrap.dataWrap >
  1.headerClass >
  2.headerClass >
  3.headerClass >
  4.headerClass >
  5.headerClass >
  6.headerClass >
}
plugin.tx_cssstyledcontent._CSS_DEFAULT_STYLE >
includeLibs.user_functions = fileadmin/templates_3.0/newsletters/scripts/class.user_functions.php

Setup Code for PAGE

page = PAGE
page {
  typeNum = 0
  # The extension will produce a full blown html document based on the html provided
  config.disableAllHeaderCode = 1
  # Call the extension
  10 = USER
  10 {
    userFunc = tx_css2inline_pi1->main
    # removeAttributes = class
    # Select the style sheets to be taken into consideration
    css = COA
    css {
      10 = FILE
      10.file.stdWrap.cObject = CASE
      10.file.stdWrap.cObject {
        key.data = levelfield:-1, backend_layout_next_level, slide
        key.override.field = backend_layout
        default = TEXT
        default.value = {$template.1.css}
        1 < .default
        2 = TEXT
        2.value = {$template.2.css}
      }
      20 = FILE
      20.file.stdWrap.cObject = CASE
      20.file.stdWrap.cObject {
        key.data = levelfield:-1, backend_layout_next_level, slide
        key.override.field = backend_layout
        default = TEXT
        default.value = {$template.1.common.css}
        1 < .default
        2 = TEXT
        2.value = {$template.2.common.css}
      }
      30 = FILE
      30.file = {$ministries.css}
      40 = FILE
      40.file = {$core.css}
    }
    # Generate the HTML content of the page
    html {
      # Head part
      10 = TEXT
      10 {
        wrap = <head>|</head>
        value = <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      }
      # Body part
      20 = FLUIDTEMPLATE
      20 {
        # Assign template files per backend template
        file.stdWrap.cObject = CASE
        file.stdWrap.cObject {
          key.data = levelfield:-1, backend_layout_next_level, slide
          key.override.field = backend_layout
          default = TEXT
          default.value = {$template.1.file}
          1 < .default
          2 = TEXT
          2.value = {$template.2.file}
        }
        partialRootPath = {$page.partialRootPath}
        layoutRootPath = {$page.layoutRootPath}
        format = html
        variables {
          pageWidth = TEXT
          pageWidth.value = {$ministries.width}
          sidebarWidth = COA
          sidebarWidth {
            10 = TEXT
            10.value = {$ministries.width}
            20 = TEXT
            20.value = /
            30 = TEXT
            30.value = 3
            stdWrap.prioriCalc = intval
          }
        }
      }
    }
  }
  stdWrap.postUserFunc = user_functions->user_encodeSmartQuotes
}

Smart Quotes Encoding


By default, Microsoft Word automatically changes straight quotation marks ( ‘ or ” ) to curly (smart or typographer’s) quotes as you type… When smart quotes are converted to HTML, the quotes are converted to non-standard characters which end up littering your document with question mark symbols and/or other garbage code.

The code below looks for the smart quote characters and converts them to HTML entities.

<?php
/**
*  Stonebriar newsletter helper methods
*
*  @author Michael Cannon <[email protected]>
*  @version $Id: .vimrc,v 1.9 2011/09/02 23:39:34 peimic.comprock Exp $
 */
class user_functions {
	// @ref http://www.toao.net/48-replacing-smart-quotes-and-em-dashes-in-mysql
	function user_encodeSmartQuotes( $content, $conf ) {
		$findUTF8				= array(
			"xe2x80x98",
			"xe2x80x99",
			"xe2x80x9c",
			"xe2x80x9d",
			"xe2x80x93",
			"xe2x80x94",
			"xe2x80xa6",
		);
		$findWindows			= array(
			chr(145),
			chr(146),
			chr(147),
			chr(148),
			chr(150),
			chr(151),
			chr(133),
		);
		$replace				= array(
			'&lsquo;',	// left single curly quote
			'&rsquo;',	// right single curly quote
			'&ldquo;',	// left double curly quote
			'&rdquo;',	// right double curly quote
			'&ndash;',	// en dash
			'&mdash;',	// em dash
			'&hellip;',	// ellipsis dash
		);
		$content				= str_replace( $findUTF8, $replace, $content );
		$content				= str_replace( $findWindows, $replace, $content );
		return $content;
	}
}
?>

Sending the Newsletters

To recap, Stonebriar uses Shelby for their membership management which can also email out newsletters when given an HTML file. Now, the newsletter process is drastically simpler.

  1. Create the newsletter page in TYPO3
  2. View and save the newsletter page as HTML
  3. Upload the HTML file to Shelby
  4. Select ministry recipients and email via Shelby

Questions? Critiques? Etc.?

Please comment below with your thoughts?

  • How have you solved the newsletters with TYPO3 issue?
  • What do you think could’ve been done differently?

References

The T3D’s are only of the system folder, CSS and HTML files and TypoScript templates. You can include the “Master” template to show the newsletters your TYPO3 system. Please note that Backend Layouts and TemplaVoila do NOT work together.

TYPO3 Backend Layouts – The Grid View

Oct 14, 2011

As I’m back into active development with TYPO3, I’m learning all kinds of tips and tricks that I’ve missed. Backend layouts are a good example of a TYPO3 benefit that I should have known about.

When you get into using source code management, TemplaVoila doesn’t stay practical. As such, I’ll be transitioning into using FLUIDTEMPLATE‘s for TYPO3 templating. It’s a lot like Modern Template Building‘s methodology, but uses Fluid. In moving away from TemplaVoila, I thought I was losing my slick backend views. Thankfully, I’m not.

Please read Joey Hasenau’s overview article, TYPO3 4.5 LTS: The Grid View. Then check out Tom’s how-to with TYPO3 4.5′s new Backend Layout grid view.

Joey Hasenau Presents The Grid View

T3CON11 Frankfurt: Saturday Sessions

Oct 8, 2011

Saturday closes on the sad note of another TYPO3 conference in Europe has ended.

However, I’m looking forward to all the follow-on events taking place between now and T3CON12. There’s Developer Days, SNOW3, T3SAIL, BugDays, T3BOARD12, TYPO3Camp München, TYPO3 Italia and many other events with TYPO3′s community growing to attend.

The TYPO3v5 Phoenix review from Sebastian and Rens demonstrated how last years concepts by Jens has become reality. The results are similar to, yet seem better than conceived. There’s still a lot of work to do to make TYPO3v5 Phoenix usable for production. Therefore, check out my Your First TYPO3 Phoenix Setup article to check what’s been finished and see how you can give back to the TYPO3 community.

From the Doctrine 2 session about Object-Relational Mapping, it finally dawned on me that, not many ORM systems can readily handle JOINs efficiently. As your data sets get larger, save yourself headaches by programmatically doing JOINs. Save the ORM for data retrieval than data processing.

I’d stuck my head in the sand over ExtBase and Fluid when they’d come out. My mindset being that they’re intermediary systems until TYPO3v5 arrives. On ExtBase, my opinion hasn’t changed. In regards to Fluid, I should have paid more attention a couple of years back when Fluid become a TypoScript object.

Use Fluid for TYPO3 Templates

Through the TypoScript FLUIDTEMPLATE object, your designer’s HTML templates has the power of Fluid’s ViewHelpers. You’ve now eliminated the need for programming many simple design constraints. Check out The FLUIDTEMPLATE cObject, Configure the Fluid TypoScript and create Backend-Templates and Reason #9 for Choosing TYPO3: Fluid for Page Templates for more information.

Lastly, kudos to Dominik and Violeng for teaching me the Fibonacci (0, 0.5, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, …) point assignment for tasks in regards to project estimations. I’ve used labels like trivial, easy, medium, hard and difficult with hours assigned to them. However, the Fibonacci way combined with velocity in estimation is a much more pragmatic and reliable solution.

This tip alone made the conference ticket price worthwhile. It readily represents 2-3 months savings of trying to figure out something better.

If I missed saying hi to you during the conference, I’m sorry, drop me a line below to see when we can get together later on.

And remember devs…

It’s not finished till it’s done, documented and tested


p.s.: My Biceps talk with Tina went well. Video’s eventually up at .

What’s your impressions of the TYPO3 conference?

Donate for Good Karma

Your donation helps enable Aihrus's volunteer efforts towards mentoring young developers and supporting Open Source projects.

No money? Leave a testimonial for Aihrus instead.

×

Log In


Need an account? Register
Forgot your password? Recover

Guest Purchase?

If you purchased as a guest, then you need to convert to a real account before accessing your purchases.

×

Register


Already registered? Log In

×