Drupal Planet

div class=field field-name-field-article-body field-type-text-long field-label-hidden div class=field-item evenh3Ways to Protect Your Websites/h3 pAny website can be vulnerable to a variety of security problems, regardless of its underlying web technologies, including Drupal. Yet the most common type of attack involves a visitor injecting ill-intentioned code that is presumed to be regular text. For instance, an attacker might submit a comment to a blog post, but instead of providing only innocuous text, he includes malicious JavaScript code, hoping that it will be rendered by the web browser of anyone later viewing that page. Another attack vector, known as SQL injection, works by submitting through a form field some SQL code that, if not handled properly, ends up as part of a database query, intended to execute an unauthorized statement, such as truncating or dropping tables within the database, setting passwords to known values, or stealing user sessions./p pThat latter type of foul play is well addressed by Drupal's database API layer, which, if used properly and consistently in one's custom code, can negate the risk of an SQL injection breaching one's defenses. Consequently, Drupal developers and administrators will more likely encounter the former type of attack./p pBroadly speaking, there are two schools of thought regarding how best to avoid falling victim to any online miscreant attempting to force his code to be displayed in your pages' contents or URLs. It might seem that the safest defense is to never allow unvetted content into the website's database. This process of sanitizing all text beforehand could be thought of as pre-filtering. Drupal generally takes the opposite approach (post-filtering) — namely, allowing all submitted content into the database, but always sanitizing it on output./p/div /div fieldset class=field-group-fieldset group-article-author collapsible form-wrapper id=node_article_rss_group_article_authorlegendspan class=fieldset-legendAuthor/span/legenddiv class=fieldset-wrapperdiv class=field field-name-field-article-author-name field-type-text field-label-hidden div class=field-item evenMichael J. Ross/div /div div class=field field-name-field-article-author-byline field-type-text-long field-label-hidden div class=field-item evenpAs an experienced web developer, Michael J. Ross creates custom websites for businesses and non-profits, using Drupal and other leading technologies. He writes articles and book reviews, of which more than 500 have been published in print and online./p /div /div /div/fieldset a class=da2a_button href=http://www.addtoany.com/share_save id=da2a_1img src=/sites/all/modules/addtoany/images/share_save_171_16.png width=171 height=16 alt=Share/Save//a script type=text/javascript !--//--![CDATA[//!-- da2a.script_load(); //--!]] /script

div class=field field-name-body field-type-text-with-summary field-label-hiddendiv class=field-itemsdiv class=field-item even property=content:encodedpTo get a better website performance you can tell apache where to find your websites .htaccess files instead of letting apache search for them recursively .. /p pFirst find the location of these .htaccess files on your web server ../p pre class=brush: plain @paulbooker:/var/www/vhosts/paulbooker.co.uk/public# find . -name .htaccess ./.htaccess ./sites/default/files/.htaccess /prep .. and then add a directory block for each in your domains apache configuration file ../p pre class=brush: plain VirtualHost *:80 # Admin email, Server Name (domain name) and any aliases ServerAdmin webmaster@paulbooker.co.uk ServerName paulbooker.co.uk ServerAlias www.paulbooker.co.uk # Index file and Document Root (where the public files are located) DirectoryIndex index.php DocumentRoot /var/www/vhosts/paulbooker.co.uk/public Directory /var/www/vhosts/paulbooker.co.uk/public Options -Indexes -FollowSymLinks MultiViews AllowOverride None Order allow,deny Allow from all Include /var/www/vhosts/paulbooker.co.uk/public/.htaccess /Directory Directory /var/www/vhosts/paulbooker.co.uk/public/sites/default/files Include /var/www/vhosts/paulbooker.co.uk/public/sites/default/files/.htaccess /Directory # Custom log file locations LogLevel warn ErrorLog /var/www/vhosts/paulbooker.co.uk/log/error.log CustomLog /var/www/vhosts/paulbooker.co.uk/log/access.log combined /VirtualHost /prep You will need to reload apache for these changes to take effect ../p pre class=brush: plain service apache2 reload /prep A further improvement would be to put all the directives that are inside the .htaccess file into your domains apache configuration file. You would then however need to look for and manually bring over any changes that come from upsteam. /p /div/div/divdiv class=field field-name-field-tags field-type-taxonomy-term-reference field-label-abovediv class=field-labelTags:nbsp;/divdiv class=field-itemsdiv class=field-item even rel=dc:subjecta href=/tags/apache typeof=skos:Concept property=rdfs:label skos:prefLabel datatype=apache/a/divdiv class=field-item odd rel=dc:subjecta href=/tags/htaccess typeof=skos:Concept property=rdfs:label skos:prefLabel datatype=htaccess/a/divdiv class=field-item even rel=dc:subjecta href=/tags/drupalplanet typeof=skos:Concept property=rdfs:label skos:prefLabel datatype=drupalplanet/a/div/div/divdiv class=easy_social_box clearfix vertical easy_social_lang_und div class=easy_social-widget easy_social-widget-twitter firsta href=http://twitter.com/share class=twitter-share-button data-url=http://www.paulbooker.co.uk/article/how-get-better-performance-when-using-htaccess-files data-count=vertical data-lang = en data-via= data-related=:Check it out! data-text=How to Get Better Performance when Using .htaccess Files Tweet/a/div div class=easy_social-widget easy_social-widget-googleplus lastdiv class=g-plusone data-size=tall data-annotation=bubble data-href=http://www.paulbooker.co.uk/article/how-get-better-performance-when-using-htaccess-files/div/div /div !-- /.easy_social_box --

div class=field field-name-body field-type-text-with-summary field-label-hidden pAnother DrupalCon down. More memories, more connections, and a little more Drupal knowledge. Here’s Dave’s take on DrupalCon Portland 2013./p /div div class=field field-name-field-blog-category field-type-taxonomy-term-reference field-label-hiddendiv class=field-itemsdiv class=field-item evena href=/blog/category/company typeof=skos:Concept property=rdfs:label skos:prefLabel datatype=Company/a/div/div/div

div class=field field-name-body field-type-text-with-summary field-label-hiddendiv class=field-itemsdiv class=field-item even property=content:encoded pspan style=line-height: 1.538em;Having recently started working with Drupal in module development and published my first public Module, my interests have gravitated around the next version of Drupal (v8) and what it holds in store./span/p divspan style=line-height: 1.538em;Of excitement to many developers has been the integration of components of the Symfony framework into the core and what benefits it holds for users, module and core developers; this leads into the knowledge I have on working with frameworks, I would like to talk a bit about this today./span/div div /div divstrongWhat are Frameworks/strong/div div /div divMarc Clifton talks a bit about them in his post a href=http://www.codeproject.com/Articles/5381/What-Is-A-Framework'What is a framework?'/a, but the basic concept it that they are an accumulation of programs some complex, that have been joined together to serve a specific purpose, to use them you must implement/extend them in a prescribed way, web frameworks are specifically for developing websites./div div /div divstrongWeb Frameworks/strong/div div /div divWith a href=http://en.wikipedia.org/wiki/Comparison_of_web_application_frameworks#PHPweb frameworks/a,  there is generally a more specific design pattern, this being Model View Controller (MVC), this is done to link together 3 parts of functionality:/div div /div dldtModel:/dt ddBeing the Data and information that is to be displayed and the way it is organised./dd dtController:/dt ddThe system used to get the information together, to do any processing and then to pass it in a refined way to the view./dd dtView:/dt ddThis just looks after taking information and displays it in HTML, attaching CSS and front end scripts (ie JavaScript), to a level this is how Drupal works but not so clearly defined./dd /dldivThese three areas split up the work blocks on a website having specific elements that have clearly defined roles, when these parts are enhanced the developers can concentrate on making them work efficiently without having to be distracted by what happens up or down the line, this produces a secure and reliable system./div div /div divstrongNext version of Drupal/strong/div div /div divSo for the next version of Drupal, how are we going to benefit from these concepts; from reading a href=http://symfony.com/blog/symfony2-meets-drupal-8Fabien Potencier’s blog/a, it seems the drupal core developers are concentrating on implementing some core components of Symfony, these being (HttpFoundation, HttpKernel, Routing, EventDispatcher, DependencyInjection, and ClassLoader)./div div /div divWhy do this? The answer I come up with is this; looking at all the frameworks that are available (21 PHP in total on the Wiki above they all have the same goals; to take information and display it quickly and easily as a webpage. So what Drupal core developers have done is identified Symfony’s components mentioned above and implemented them to satisfy functionality in the core that has become convoluted./div div /div divstrongWhat do we gain?/strong/div div /div divSo what will Drupal developers/implementers gain from these improvements? They will gain from knowledge that the foundations of the system are on a even more stable keel, and that going forward the system is using the best technologies in respects of optimisation and security./div div /div div divstrongExample/strong/div div /div divSo here is a simple example of creating a module that implements the new functionality, I first create a module folder in the modules folder (the README.txt file gives information)./div div /div divimg alt= class=media-image height=145 style=width: 299px; height: 145px; width=299 typeof=foaf:Image src=http://www.microserveltd.co.uk/sites/default/files/styles/large/public/darrens_module8example.png?itok=xvQK7Utu //div div /div divI then create a module file and a info file, the info file now is in a yaml (Yet another Markup Language) format./div div /div div /div /div pimg alt= class=media-image height=229 width=525 typeof=foaf:Image src=http://www.microserveltd.co.uk/sites/default/files/darren_htscreenshotymlinfo.png //p pAnd then write the module functions:/p p /p pimg alt= class=media-image height=517 width=681 typeof=foaf:Image src=http://www.microserveltd.co.uk/sites/default/files/darren_modulecode.png //p p /p pspan style=line-height: 1.538em;In the above code I have implemented/spana href=http://symfony.com/doc/current/components/http_foundation/introduction.html style=line-height: 1.538em; HttpFoundation/aspan style=line-height: 1.538em;, what this does is when a user goes to the URL and passes a parameter /spanspan class=geshifiltercode class=php geshifilter-php?testspan style=color: #339933;=/spansometext/code/spanspan style=line-height: 1.538em; the menu hook will capture the url and pass the user to the call back, before the call back we call the Request method using /spana href=http://php.net/manual/en/language.namespaces.importing.php style=line-height: 1.538em;'use'/aspan style=line-height: 1.538em; (PHP 5.3 and higher), in the function span class=geshifiltercode class=php geshifilter-phphtfoundexample_callbackspan style=color: #009900;(/spanspan style=color: #009900;)/span/code/span I do a call to the static method in the Request class called span class=geshifiltercode class=php geshifilter-phpcreateFromGlobalsspan style=color: #009900;(/spanspan style=color: #009900;)/span/code/span, this populates the /spanspan class=geshifiltercode class=php geshifilter-phpspan style=color: #000088;$request/span/code/spanspan style=line-height: 1.538em; varable with an object containing global variables, I want to get the passed variable 'test', so I call the get method on query (line 27) this returns the passed parameter, I then simply echo the string to the screen and exit:/span/p p /p pimg alt= class=media-image height=362 style=width: 585px; height: 362px; border: 1px solid rgb(204, 204, 204); width=585 typeof=foaf:Image src=http://www.microserveltd.co.uk/sites/default/files/darren_callingfunction.png //p p /p pThe value is displayed on the screen./p pFurther methods that can be used as part of this class are detailed on the a href=http://api.drupal.org/api/drupal/namespace/Symfony!Component!HttpFoundation/8?order=object_nameamp;sort=descHttpFoundation Drupal API page/a./p /div/div/div

div class=field field-name-body field-type-text-with-summary field-label-hiddendiv class=field-itemsdiv class=field-item even property=content:encodedpIf you wanted to add right double angle quotes or raquo to each of your comment block comments. First you would track down the functionality that needs changing to theme_comment_block() inside the comments module ../p pre class=brush: php function theme_comment_block() { $items = array(); $number = variable_get('comment_block_count', 10); foreach (comment_get_recent($number) as $comment) { $items[] = l($comment-subject, 'comment/' . $comment-cid, array('fragment' = 'comment-' . $comment-cid)) . 'nbsp;span' . t('@time ago', array('@time' = format_interval(REQUEST_TIME - $comment-changed))) . '/span'; } if ($items) { return theme('item_list', array('items' = $items)); } else { return t('No comments available.'); } } function comment_block_view($delta = '') { if (user_access('access comments')) { $block['subject'] = t('Recent comments'); $block['content'] = theme('comment_block'); return $block; } } /prep and then make your changes by overriding theme_comment_block inside your theme's template.php as .. /p pre class=brush: php function mytheme_comment_block() { $items = array(); $number = variable_get('comment_block_count', 10); foreach (comment_get_recent($number) as $comment) { $items[] = l('raquo; ' . $comment-subject, 'comment/' . $comment-cid, array('fragment' = 'comment-' . $comment-cid, 'html' = true)) . 'nbsp;spanem' . t('@time ago', array('@time' = format_interval(REQUEST_TIME - $comment-changed))) . '/em/span'; } if ($items) { return theme('item_list', array('items' = $items)); } else { return t('No comments available.'); } } /prep After clearing the cache your theme function will be now called instead of the theme function provided by the core comment module. /p /div/div/divdiv class=field field-name-field-tags field-type-taxonomy-term-reference field-label-abovediv class=field-labelTags:nbsp;/divdiv class=field-itemsdiv class=field-item even rel=dc:subjecta href=/tags/override typeof=skos:Concept property=rdfs:label skos:prefLabel datatype=override/a/divdiv class=field-item odd rel=dc:subjecta href=/tags/theme typeof=skos:Concept property=rdfs:label skos:prefLabel datatype=theme/a/divdiv class=field-item even rel=dc:subjecta href=/tags/drupalplanet typeof=skos:Concept property=rdfs:label skos:prefLabel datatype=drupalplanet/a/div/div/divdiv class=easy_social_box clearfix vertical easy_social_lang_und div class=easy_social-widget easy_social-widget-twitter firsta href=http://twitter.com/share class=twitter-share-button data-url=http://www.paulbooker.co.uk/article/how-override-core-functionality-your-theme data-count=vertical data-lang = en data-via= data-related=:Check it out! data-text=How to Override Core Functionality in your ThemeTweet/a/div div class=easy_social-widget easy_social-widget-googleplus lastdiv class=g-plusone data-size=tall data-annotation=bubble data-href=http://www.paulbooker.co.uk/article/how-override-core-functionality-your-theme/div/div /div !-- /.easy_social_box --

img typeof=foaf:Image src=http://getlevelten.com/sites/default/files/styles/600x300/public/content/blog/images/flickr-279354231-hd.jpg?itok=aG7pVido width=600 height=300 alt= / p class=p1Anyone who has ever needed to alter a node form knows how difficult it can be to get it to cooperate. However, paired with Display Suite and Field Group, Renderable Entities gives users the ability to format the display of just about em style=font-size: 1.6rem; line-height: 2.4rem;any/em form built using the Form API, including node forms. This is nice because it adds all of the standard Drupal fields and module fields like the published checkbox, URL alias settings and allows you to rearrange them just as you would on the manage display screen of a node.... a href=/blog/ian-whitcomb/drupal-form-layouts-renderable-entities class=more-linkRead more/a/p

pa href=http://thereisamoduleforthat.com/content/view-nodes-and-their-translationsLast week, I described a technique to query and display nodes in all available translations/a. This worked well enough, but a performance-minded reader pointed out that the query generated by Views (that includes N self-joins for N enabled languages) would not scale to a large number of nodes./p pMy usual approach when implementing new ideas is to ensure the logic works first, and only handle optimization when needed. It's a strategy that has worked well for me in the past./p pa href=http://thereisamoduleforthat.com/content/view-nodes-and-their-translations-part-2-optimizing-views-generated-query target=_blankread more/a/p

div class=field field-type-link field-field-embed a href=http://podcasts.drupaleasy.com/DrupalEasy_ep106_20130601.mp3 rel=enclosureDownload Podcast 106/a /div pKristof Van Tomme (a href=https://drupal.org/user/55005kvantomme/a), Lee Rowlands (a href=https://drupal.org/user/395439larowlan/a), and Nick Schuch (a href=drupal.org/user/1412036‎nick_schuch/a) join (the uncomfortably echo-y) Mike Anello and Ted Bowman (a href=http://drupal.org/user/240860tedbow/a) to talk about the a href=https://drupal.org/node/1809352Tour module/a and a href=http://walkthrough.it/Walkthough.it/a. The Tour module is a recent addition to Drupal 8 that allows for contextual help in the form of a series of popups that can walk users through the various elements on a Drupal administration page. We get sidetracked by Lee’s a href=http://drupal.org/node/731724Comment as Field/a potential Drupal 8 addition, DrupalCon Portland, a Drupal.org hacking, and a very special edition of 5 Questions./p pa href=http://drupaleasy.com/podcast/2013/06/drupaleasy-podcast-106-demoception target=_blankread more/a/pimg src=http://feeds.feedburner.com/~r/DrupalEasy/~4/MaXT_Lj6LSM height=1 width=1/

div class=field field-name-field-blog-image field-type-image field-label-hiddendiv class=field-itemsdiv class=field-item evena href=/blog/2013/06/02/upgrading-busy-theme-drupal-8img src=http://www.undpaul.de/sites/default/files/styles/blog/public/blog/images/busy_scrsht.png?itok=1nNO_tlZ width=220 height=175 alt= //a/div/div/divdiv class=field field-name-body field-type-text-with-summary field-label-hiddendiv class=field-itemsdiv class=field-item even pBack when Drupal 7 was being developed, there was a big inititiative about getting new pretty themes into Drupal core. There were three really good suggestions, one of them being Bartik, which the most people got behind, so it could be finished in time to get into Drupal 7 core. One really good suggestion that a href=https://drupal.org/node/686410couldn't be finished in time/a was a href=http://drupal.org/project/corollaCorolla/a by a href=https://drupal.org/user/61393Jeff Burnz/a, which is now a contrib theme. The third suggestion was our theme Busy by a href=https://drupal.org/user/96718eigentor/a, a theme targeted at corporate websites. Just like Corolla, there wasn't enough time to finish it up for Drupal 7 core. Busy has been a contributed theme ever since, because we didn't want it to get lost only because it didn't make it into Drupal core./div/div/divdiv class=field field-name-taxonomy-vocabulary-1 field-type-taxonomy-term-reference field-label-hiddendiv class=field-itemsdiv class=field-item evena href=/blog/tags/drupal-planet-englishdrupal planet english/a/div/div/div

div class=field field-name-body field-type-text-with-summary field-label-hiddendiv class=field-itemsdiv class=field-item even property=content:encodedpre class=brush: php function artwork_page_listing_recent() { content = array(); $query = new EntityFieldQuery(); $query -entityCondition('entity_type', 'artwork') -propertyOrderBy('created', 'DESC') -range(0,5); $result = $query-execute(); $artworks = artwork_load_multiple(array_keys($result['artwork'])); foreach ($artworks as $artwork) { $content[] = artwork_page_view($artwork, 'teaser'); } } /pre/div/div/divdiv class=field field-name-field-tags field-type-taxonomy-term-reference field-label-abovediv class=field-labelTags:nbsp;/divdiv class=field-itemsdiv class=field-item evena href=/tags/entity typeof=skos:Concept property=rdfs:label skos:prefLabel datatype=entity/a/divdiv class=field-item odda href=/tags/entityfieldquery typeof=skos:Concept property=rdfs:label skos:prefLabel datatype=EntityFieldQuery/a/divdiv class=field-item evena href=/tags/query typeof=skos:Concept property=rdfs:label skos:prefLabel datatype=query/a/divdiv class=field-item odda href=/tags/drupalplanet typeof=skos:Concept property=rdfs:label skos:prefLabel datatype=drupalplanet/a/div/div/divdiv class=easy_social_box clearfix vertical easy_social_lang_und div class=easy_social-widget easy_social-widget-twitter firsta href=http://twitter.com/share class=twitter-share-button data-url=http://www.paulbooker.co.uk/code-snippet/examples-using-entityfieldquery-drupal-7 data-count=vertical data-lang = en data-via= data-related=:Check it out! data-text=Examples of using EntityFieldQuery in Drupal 7Tweet/a/div div class=easy_social-widget easy_social-widget-googleplus lastdiv class=g-plusone data-size=tall data-annotation=bubble data-href=http://www.paulbooker.co.uk/code-snippet/examples-using-entityfieldquery-drupal-7/div/div /div !-- /.easy_social_box --

div id=thmr_3 class=thmr_call span class=field field-type-text field-field-body span class=field-items span class=field-item pThis is a tutorial for installing and setting up the commercial InnoCompany Theme that retails for around $45 in the US (£32 or so in the UK). The theme offers a multi-purpose corporate solution, but my own use is to create a portfolio site. I consider myself a back-end Drupal dev first and foremost, and my feeling is it would take me too long to create a neat portfolio site (which must of course be Drupal) from scratch. That effort would detract from my paid work for my clients and the ipro bono/i weekend work I undertake for charities. /p br / br / center span class=field-item /span center /span /span /span /div pa href=http://www.badzilla.co.uk/Drupal-7--Installing-Setting-Up-Commercial-InnoCompany-Theme target=_blankread more/a/p

div class=field field-name-body field-type-text-with-summary field-label-hiddendiv class=field-itemsdiv class=field-item even property=content:encodedpI'm very excited about the upcoming Drupal 8 release and its features and even though I'm not a core developer (yet), I follow its development as close as I can. There are numerous blog posts about it and the new features it has. There are hundreds (if not thousands) of issue queues where you can watch our community discuss and build the new system, you can even try the freshest dev release by using a href=http://simplytest.me target=_blankSimplyTest.me/a./p pBut, while there is a vast amount of information about Drupal 8, I couldn't find any metrics about how it will compare with Drupal 7 performancewise. I know that we're not in code freeze yet and that performance improvements are scheduled for the polish phase which officially starts on 1 July, but I was curious to see how Drupal 8 performs at this stage, where many API's have changed, a lot of hooks have been replaced and a new framework is implemented into it (Symfony2)./p/div/div/div

div class=field field-name-body field-type-text-with-summary field-label-hiddendiv class=field-itemsdiv class=field-item even property=content:encodedpFirst if you're not sure of the name of the deleted file check through your Git log ../p pre class=brush: bash git log --diff-filter=D --summary /prep Find the last commit that affected the given file/p pre class=brush: bash git rev-list -n 1 HEAD -- ./path/to/file/ /prep .. I'll refer to that as REVISON_NUMBER/p pNow we can checkout the previous revision/p pre class=brush: bash git checkout REVISON_NUMBER^ -- ./path/to/file/ /pre/div/div/divdiv class=field field-name-field-tags field-type-taxonomy-term-reference field-label-abovediv class=field-labelTags:nbsp;/divdiv class=field-itemsdiv class=field-item evena href=/taxonomy/term/7 typeof=skos:Concept property=rdfs:label skos:prefLabel datatype=git/a/divdiv class=field-item odda href=/tags/drupalplanet typeof=skos:Concept property=rdfs:label skos:prefLabel datatype=drupalplanet/a/div/div/divdiv class=easy_social_box clearfix vertical easy_social_lang_und div class=easy_social-widget easy_social-widget-twitter firsta href=http://twitter.com/share class=twitter-share-button data-url=http://www.paulbooker.co.uk/command-lines/how-recover-deleted-file-your-git-repository data-count=vertical data-lang = en data-via= data-related=:Check it out! data-text=How To Recover a Deleted File From Your Git RepositoryTweet/a/div div class=easy_social-widget easy_social-widget-googleplus lastdiv class=g-plusone data-size=tall data-annotation=bubble data-href=http://www.paulbooker.co.uk/command-lines/how-recover-deleted-file-your-git-repository/div/div /div !-- /.easy_social_box --

div class=field field-name-body field-type-text-with-summary field-label-hiddendiv class=field-itemsdiv class=field-item even property=content:encodedpThis is a follow up of earlier blog post a href=/node/131How import / export quiz questions to Drupal/a. As mentioned earlier a href=https://drupal.org/project/qq_importQuiz questions import/a (qq_import) module is the one of the potential modules to import quiz question into Drupal from external sources. The Drupal 7 version of the same has been just released and this version includes a major architectural change from the previous release i.e. we have developed to take the advantage of a href=https://drupal.org/project/feedsFeeds/a module./p/div/div/divdiv class=service-linksa href=http://knackforge.com/blog/sivaji/quiz-questions-import-drupal-7-released title=Plus it class=service-links-google-plus-one rel=nofollow target=_blankspan class=element-invisibleGoogle Plus One/span/a a href=http://knackforge.com/blog/sivaji/quiz-questions-import-drupal-7-released title=Share on Linkedin class=service-links-linkedin-share-button rel=nofollow target=_blankspan class=element-invisibleLinkedin Share Button/span/a a href=http://twitter.com/share?url=http%3A//knackforge.com/blog/sivaji/quiz-questions-import-drupal-7-releasedamp;count=horizontalamp;via=knackforgeamp;text=Quiz%20Questions%20Import%20for%20Drupal%207%20releasedamp;counturl=http%3A//knackforge.com/blog/sivaji/quiz-questions-import-drupal-7-released class=twitter-share-button service-links-twitter-widget title=Tweet This rel=nofollow target=_blankspan class=element-invisibleTweet Widget/span/a a href=http://www.facebook.com/plugins/like.php?href=http%3A//knackforge.com/blog/sivaji/quiz-questions-import-drupal-7-releasedamp;layout=button_countamp;show_faces=trueamp;action=likeamp;colorscheme=lightamp;width=100amp;height=21amp;font=amp;locale= title=I Like it class=service-links-facebook-like rel=nofollow target=_blankspan class=element-invisibleFacebook Like/span/a/div

div class=field field-name-field-image field-type-image field-label-hiddendiv class=field-itemsdiv class=field-item even rel=og:image rdfs:seeAlso resource=http://flink.com.au/sites/default/files/styles/large/public/field/image/svn%20is%20supersharp1_1.jpgimg typeof=foaf:Image src=http://flink.com.au/sites/default/files/styles/large/public/field/image/svn%20is%20supersharp1_1.jpg width=480 height=446 alt= //div/div/divdiv class=field field-name-body field-type-text-with-summary field-label-hiddendiv class=field-itemsdiv class=field-item even property=content:encodedpWe've been having a lot of fun with maps recently. From the challenges of dealing with 100,000 markers (see this a href=http://www.youtube.com/watch?v=BPXDrln0QB0amp;feature=youtu.beDrupalCon Portland mapping session/a) down to smaller maps that attractively reveal the nature of their data locations through animated clustering and beautiful marker images in colours that reflect location type, such as the kind of shop (hairdresser, camera store etc) or the price range of rental accommodation./p pFor the map maker who is not a pro at Photoshop or similar tool, the bane of a marker image is that its attributes (shape, colour, resolution, #kBytes) are all wrapped up in this one atomic unit: the .png file. When assembling markers for various types of locations you can't easily combine this marker image in that colour with this cute symbol in the middle, in that size… And then have all that repeated automatically on the fly by your map, as more locations are added to your site./p pBut with scalable alternatives spreading rapidly, most notably a href=https://en.wikipedia.org/wiki/Web_Open_Font_FormatWOFF/a, and repositories like a href=http://fortawesome.github.io/Font-Awesome/cheatsheetFont Awesome/a and a href=http://fsymbols.comfsymbols/a featuring more and more cute icons, we are now striding closer to an easier solution.br / Drawing form these repositories a href=http://drupal.org/project/ip_geolocIP Geolocation Views amp; Maps/a let's you superimpose any scalable icon on top of any of your traditional marker images, giving you a smorgasbord of combinations. /p pTo contrast the font awesomeness of the icons versus trad .png we've included a couple of screenshots. The first, a highly zoomed-in map with markers, reveals how both map tiles and marker images have become pixelated during enlargement, while the font icons have not. In the second the font-size of those two special font icons was increased dramatically (and their colours changed to black). Notice the sharpness of these characters, 'cause that's what these are, characters, at any magnification or zoom level? Luvly.br /img src=http://flink.com.au/sites/default/files/svn%20is%20supersharp2.jpg /br / And how much do you have to pay the ferryman, to get those snazzy icons from your server to the other side?br / How much? The price in bandwidth is: one. One UTF character. Not a 10k image or even a 1k image. One single UTF character per icon. That's, well… nothing./p pHaving said that, unlike the emfsymbols/em set, the emFont Awesome/em icons do come with a CSS file for easy icon customisation as well as a WOFF file (or if not supported a TTF or SVG fallback), automatically loaded by your browser. This does constitute a one-off hit of 55kB or so. But that sets you up for as many font icons as you wish, at no further cost in bandwidth./p pThus you can pick amp; mix marker images and font icons to your heart's content and assemble CSS-stylable, scalable, super-sharp markers to create beautiful maps for your clients. All through an easy UI. No Photoshop in sight./p pSo for your next map, give a href=http://drupal.org/project/ip_geolocIP Geolocation Views amp; Maps/a a go and let us know what you think. Available in 7.x-1.x-dev and the upcoming 7.x-1.21 versions./p pstrongMore font icon sets?/strongbr / o a href=http://icomoon.ioIcoMoon/abr / o a href=http://symbolset.com/iconsSymbolset icons/abr / o a href=http://thenextweb.com/dd/2012/10/12/7-gorgeous-icon-fonts-to-speed-up-your-site-and-your-design-process7 Gorgeous icon fonts to speed up your site .../a/p /div/div/divdiv class=field field-name-field-file-under field-type-taxonomy-term-reference field-label-above h3 class=field-labelFile under:nbsp;/h3 span class=field-items a href=/file-under/planet-drupal typeof=skos:Concept property=rdfs:label skos:prefLabelPlanet Drupal/a /span /div

div class=field field-name-body field-type-text-with-summary field-label-hidden view-mode-teaserdiv class=field-itemsdiv class=field-item even property=content:encoded style !--/*--![CDATA[/* !--*/ !--/*--![CDATA[/* !--*/ .geshifilter pre { font-size: 15px; } .node aside { font-style: italic; margin-bottom: 1.5em; } /*--!]]]]![CDATA[*/ /*--!]]*/ /style/div/div/div

div class=field field-name-body field-type-text-with-summary field-label-hiddendiv class=field-itemsdiv class=field-item even property=content:encoded divPantheon is a great company with great product. They make hosting Drupal sites easy, and you can try out their service for free. I've enjoyed watching their company grow, and they make great contributions to Drupal overall. /div div /div diva href=http://commerceguys.comCommerce Guys/a is a great company with a great product. We make getting started selling online with Drupal a breeze, and I've had a blast being part of the products team responsible for Commerce Kickstart./div div /div diva href=https://dashboard.getpantheon.com/products/kickstart/spinupdiv class=media-thumbnail-frameimg alt= class=media-image attr__media_crop_h__0 attr__media_crop_image_style__large attr__media_crop_instance__66 attr__media_crop_rotate__0 attr__media_crop_scale_h__0 attr__media_crop_scale_w__0 attr__media_crop_w__0 attr__media_crop_x__0 attr__media_crop_y__0 id=media_crop_1651333291083 style=float: left; margin: 5px; typeof=foaf:Image src=http://www.robshouse.net/sites/robshouse.drupalgardens.com/files/media_crop/66/public/201305/pantheon-button.png //div/a/div divYesterday was a happy day for me because a href=https://www.getpantheon.com/blog/commerce-kickstart-open-atrium-2-pantheonCommerce Kickstart is now available on Pantheon/a. Great + Great = Even Greater, so if you want to try Commerce Kickstart directly on a premiere hosting service, it's never been easier to do so. a href=https://dashboard.getpantheon.com/products/kickstart/spinupGo ahead and try it out!/a/div div /div div  /div /div/div/divdiv class=field field-name-field-tags field-type-taxonomy-term-reference field-label-abovediv class=field-labelTags:nbsp;/divdiv class=field-itemsdiv class=field-item evena href=/tags/drupal-planet typeof=skos:Concept property=rdfs:label skos:prefLabel datatype=Drupal Planet/a/divdiv class=field-item odda href=/tags/commerce-guys typeof=skos:Concept property=rdfs:label skos:prefLabel datatype=Commerce Guys/a/div/div/div

div class=field field-name-taxonomy-vocabulary-1 field-type-taxonomy-term-reference field-label-abovediv class=field-labelTopic:nbsp;/divdiv class=field-itemsdiv class=field-item evena href=/tag/drupal typeof=skos:Concept property=rdfs:label skos:prefLabel datatype=Drupal/a/div/div/divdiv class=field field-name-body field-type-text-with-summary field-label-hiddendiv class=field-itemsdiv class=field-item even property=content:encodedpKaren McGrane gave a great keynote at DrupalCon Portland on a href=http://karenmcgrane.com/2013/05/23/drupalcon-keynote-video-and-talk-notes/future-friendly content with Drupal/a. It's worth watching the a href=http://karenmcgrane.com/2013/05/23/drupalcon-keynote-video-and-talk-notes/video recording/a. I agree with Karen's vision for the future. With the proliferation of different devices, screen sizes and input devices, there is a growing need for structured content that can be reused in multiple channels./p pFrom the early days, Drupal has been doing structured content and content reuse better than most competitors. Drupal's node system was introduced in Drupal 3 in 2001, and was ahead of its time compared to the page tree-model used by most competitors. With every release, Drupal has gotten better and better at structured content and content reuse, leading to things like CCK and Views in core. Still to date, Drupal is one of the leaders in modeling structured content and content reuse. It is is one of the primary reasons we've seen so much growth. It was great to see that recognized by Karen./p pOne of the biggest gaps in Drupal has been the authoring experience. Two of the most noticeable authoring experience improvements that we are adding to Drupal 8 core are a href=http://buytaert.net/from-aloha-to-ckeditorWYSIWYG editing/a and a href=http://buytaert.net/spark-update-unified-in-place-editingin-place editing/a. Where I disagree with Karen is with her belief that in-place editing and WYSIWYG editing are bad. Sure, WYSIWYG and in-place editing definitely emcan/em be problematic when combined with structured content. However, I believe we’ve implemented them in a good way -- it can't be compared to Microsoft Word's blob-like approach. I wish that Karen better understood how we have implemented this functionality. It would have been helpful if she had offered concrete suggestions on what better solutions would look like. Until we know what better tools look like, I'm convinced that Drupal 8's approach to WYSIWYG and in-place editing are a big step forward. It makes for another intermediate step towards a bigger vision./p pWe've been talking about the advantages and disadvantages of WYSIWYG for more than 10 years now, and we still haven't figured out better approaches. The best we've been able to do is to evolve WYSIWYG editing and in-place editing to apply to individual chunks instead of the entire page, to generate clean markup and to better guide authors to make them aware that their input may end up in many forms of output./p pWhile implementing Drupal 8's WYSIWYG and in-place editing functionality, a lot of attention was spent on ensuring that these features are compatible with structured content:/p ulliWYSIWYG editors used to generate bad markup. Drupal 8's WYSIWYG editor guarantees clean markup thanks to the a href=http://ckeditor.com/blog/CKEditor-4.1-Releasednew Advanced Content Filter feature in CKEditor/a./li liDrupal applies WYSIWYG editors to individual form fields instead of the entire page. You are encouraged to break up your content in many fields. Similarly, in-place editing is triggered on the entity level, not the page level, which means the user declares his intent to edit a specific entity and can then edit a specific field within that entity. In-place editing is only designed for quick edits, it wants to emdelight/em the author for those small edits, rather than forcing him to go back to the potentially overwhelming back-end form every time. At no point are authors given the impression they are editing the entire page./li /ulpFor a more detailed explanation, see Wim's article: a href=http://wimleers.com/article/drupal-8-structured-content-authoring-experience“Drupal 8: best authoring experience for structured content?”/a./p /div/div/div

pDrupal 8 will ship with big authoring experience improvements: span class=capsWYSIWYG/span editing span class=ampamp;/span in-place editing, thanks to the a href=http://buytaert.net/announcing-spark-authoring-improvements-for-drupal-7-and-drupal-8Spark/a distribution that Acquia — my employer — isnbsp;sponsoring./p pBut how well does it fare with the growing importance of structured content? Do Drupal 8’s span class=capsWYSIWYG/span span class=ampamp;/span in-place editing enable it or preventnbsp;it?/p h2The new web world order: many formnbsp;factors/h2 pThe Big Thing of the last few years: the advent of mobile. Inherent to that: websites that are optimized for mobile devices and act as data providers fornbsp;apps./p pA new form factor — mobile devices — changed web development forever. Before mobile, the life of web developers and authors (content creators) was relatively simple: make sure websites work well on a few typical screen sizes (let#8217;s deny the existence of Internet Explorer 6 and all the misery itnbsp;caused)./p pBut … we cannot predict what#8217;s next. We cannot predict new content consumption form factors. That#8217;s where a href=http://en.wikipedia.org/wiki/Content_strategycontent strategy/a becomes vitallynbsp;important:/p blockquote pcontent strategy is to copywriting as information architecture is tonbsp;design/p /blockquote pWe have to make sure that our content is emstructured/em and has enough metadata to successfully reuse the same (structured) content for different content consumption form factors. Without having to edit each piece of contentnbsp;again./p h2Structured content: successfully dealing with formnbsp;factors/h2 pspan class=capsNPR/span’s a href=http://blog.programmableweb.com/2009/10/13/cope-create-once-publish-everywhere/Create Once, Publish Everywhere/a is the most often cited example of a content strategy that successfully provides content for many form factors. They create content once, then publish it to 10 different platforms. With a small team, they do more than some other companies, because of their excellent content strategy. It took them years to evolve their systems in this direction, and it paidnbsp;off./p pAnother example is span class=capsTV/span Guide. They decided back in the 1980s to capture all semantic metadata, to build a emdatabase/em and extracting a magazine from that, rather than just creating a nicely formatted magazine every time. Thanks to that, they#8217;re still relevantnbsp;today./p pIt appears that the reuse of content is something every website should strive towards. There#8217;s nothing inherently bad about it. However, there emare/emnbsp;downsides./p pspan class=capsTV/span Guide editors used a mainframe application (and maybe still do?). span class=capsNPR/span editors use this span class=capsUI/span:/p pa href=http://d67mgwbrvk714.cloudfront.net/cdn/farfuture/4DWXKe4IHb5_Xx87PLzLsWMg64dt8vgWnuZovCDRwxc/mtime:1370008784/sites/wimleers.com/files/npr_ui.jpg rel=original-imageimg src=http://d67mgwbrvk714.cloudfront.net/cdn/farfuture/F9A5dIn8nL7uu1xlOR6EVbR4A3_Jz7tspkbbUPBV8fw/mtime:1369856304/sites/wimleers.com/files/resize/npr_ui-420x286.jpg width=420 height=286 alt= //a/p pspan class=capsNPR/span editors are encouraged to only think about emcontent/em, not empresentation/em — hence a very basic data entry span class=capsUI/span is all they get sup id=fnref:1a href=#fn:1 rel=footnote1/a/sup. This span class=capsUI/span looks more like a web front-end to a database than a span class=capsCMS/span (anybody else who#8217;s reminded of a href=http://www.phpmyadmin.net/span class=capsPHPM/spanyAdmin/a?)…/p pSo, while this may benbsp;true:/p blockquotepThe goal of any span class=capsCMS/span should be to gather enough information to present the content on any platform, in any presentation, at anynbsp;time./p/blockquote pNo span class=capsCMS/span really aims to have a poor authoring experience, ofnbsp;course./p h2Drupal span class=ampamp;/span structurednbsp;content/h2 pDrupal is already well prepared for structurednbsp;content./p pAll of the principles that are being used when reviewing code that is being proposed for Drupal core inclusion, are a emsuperset/em of the principles applied to structured content. Drupal demands full separation of concerns at every level. Everything must be overridable/alterable. a href=https://drupal.org/node/1887922Separation of concerns for span class=capsCSS/span files/a, to ensure clean overriding of styling without having to duplicate all span class=capsCSS/span. Content may never contain span class=capsCSS/span nor depend on span class=capsCSS/span. And sonbsp;on./p pFive features in particular stand out with regards to structured content and contentnbsp;reuse:/p ol liemStructured content/em: a href=https://drupal.org/node/443536Field span class=capsAPI/span/a.br / It allows content to be modeled as granularly asnbsp;desired./li liemClean content/em: a href=https://api.drupal.org/api/drupal/core%21modules%21filter%21filter.module/8Filter/a system.br / Ensures fancy mark-up is only added on output, and the stored content is as clean as possible. e.g. the fancy typographic features in this very piece of text is automatically added by a href=http://drupal.org/project/typogrifyTypogrify/a./li liemDifferent presentations of the same content/em: a href=https://drupal.org/node/1577752view modes/a.br / A view mode defines the order of the fields and the field formatter span class=ampamp;/span label of each field. sup id=fnref:2a href=#fn:2 rel=footnote2/a/sup/li liemInternal reuse of content (within the website)/em: a href=http://drupal.org/project/viewsViews/a module.br / To create lists, grids, tables, galleries etc. of content, while showing related content. A listing can be configured to use a specific viewnbsp;mode./li liemExternal reuse of content (outside the website)/em: a href=http://drupal.org/node/1975444span class=capsREST/span/a module.br / To provide span class=capsJSON/span, span class=capsXML/span, span class=capsHAL/span, span class=capsJSON/span-span class=capsLD/span, YourCustomMarkupLanguagenbsp;output./li /ol h2Drupal authoringnbsp;experience/h2 pDrupal#8217;s authoring experience used to be remarkably similar to that of span class=capsNPR/span’s span class=capsCOPE/span. We#8217;ve gone through a lot of effort in Drupal 6, 7 and 8 to improve usability in general. In Drupal 8, the Spark distribution on which I work has specifically targeted the improving of the authoringnbsp;experience./p pSome of the authoring experience improvements in Drupal 8 (in part) thanks tonbsp;Spark:/p ol lia href=https://groups.drupal.org/node/217434two-column backend content editing/a (with publishing options/meta configuration in anbsp;sidebar)/li lia href=https://drupal.org/node/1872284in-place editing fornbsp;fields/a/li lia href=https://drupal.org/node/1911646span class=capsCKE/spanditor-powered span class=capsWYSIWYG/spannbsp;editing/a/li /ol pThe first is noncontroversial when looking at it from a structured content perspective. It#8217;s the second and third that appear to be counter to the premise of structured content — to quote a href=http://alistapart.com/column/wysiwtfKaren McGrane/a about span class=capsWYSIWYG/spannbsp;editing:/p blockquote p[…] we allow content creators to embed layout and styling information directly into their content. Unfortunately, the code added by content creators can be at odds with the style sheet, and it’s difficult for developers to parse what’s style and what’s substance. When it comes time to put that content on other platforms, we wind up with a muddlednbsp;mess./p /blockquote por a href=https://www.lullabot.com/blog/articles/inline-editing-and-cost-leaky-abstractionsJeff Eaton/a about in-placenbsp;editing:/p blockquote pThe editing interfaces we offer to users send them important messages, whether we intend it or not. They are affordances, like knobs on doors and buttons on telephones. If the primary editing interface we present is also the visual design seen by site visitors, we are saying: “This page is what you manage! The things you see on it are the true form of yournbsp;content.”/p /blockquote pFirst, let me state that I in fact do not disagree with either of them. We#8217;ve actually taken that into account while adding span class=capsWYSIWYG/span editing and in-place editing to Drupal core. Let me explainnbsp;how./p h2span class=capsWYSIWYG/span in Drupal 8: enforces cleannbsp;markup/h2 pBy default (in the Standard install profile), Drupal 8 will not ship with formatting/layout tools enabled in its span class=capsWYSIWYG/span editor (a href=http://ckeditor.comspan class=capsCKE/spanditor/a)./p pWe make sure in Drupal 8 to prevent crappy markup and format/layout markup (codestyle/code, codefont/code attributes). It#8217;s not only impossible to set these kinds of “bad attributes” in the WYSIWYG editor using the toolbar, it#8217;s also impossible to paste them in and to use the “source mode” (where you can type HTML directly) to insert them — you can type them in the latter case, but they will be stripped upon going back to WYSIWYG mode from source mode, or upon save if you try to save it without going back to WYSIWYG mode.br / This is powered by a href=http://ckeditor.com/blog/CKEditor-4.1-Releasedthe new “Advanced Content Filter” feature in span class=capsCKE/spanditor 4.1/a, which was added specifically on our request to make thisnbsp;possible./p pFurthermore, we made it very easy to configure span class=capsCKE/spanditor in Drupal 8, yet at the same time very hard to break the above strictness. Only span class=capsHTML/span tags and attributes allowed by a specific span class=capsCKE/spanditor toolbar button will be allowed, even if you add more buttons. So the above “guaranteed clean span class=capsHTML/span” will not only be true for the default span class=capsWYSIWYG/span configuration, but for emany/em configuration. Drupal 8 will even automatically sync span class=capsWYSIWYG/span configuration with filter system configuration: video src=/sites/wimleers.com/files/unidirectional_text_editor_configuration_to_text_format_filter_settings_syncing.mp4 width=420height=515 controls preload=none autobuffer //p pIn the past, configuring span class=capsWYSIWYG/span editors was a pain, and in part because of that, the configuration of the span class=capsWYSIWYG/span editor and corresponding filter system settings were toonbsp;permissive./p pFinally, we#8217;re currently working on making sure that when you insert an image into a piece of text (with or without a span class=capsWYSIWYG/span editor), that won#8217;t result in the emfinal/em span class=capsHTML/span like codelt;img src=/files/styles/thumbnail/llama.jpg width=100 height=100 alt=Awesome llama! /gt;/code, but instead in a emplaceholder/em that the filter system will transform into the final span class=capsHTML/span upon output: codelt;img data-file-uuid=aa657593-0da9-42c0-9a05-5d63d27ad27d data-image-style=thumbnail /gt;/code.br / In other words: the text should emonly/em contain text and programmatic references to other content; the filter system should then handle “upcasting” these into their final form. This will make it much, much easier to upgrade existing content to new a href=https://drupal.org/documentation/modules/image#stylesimage styles/a, to modify referenced media, to migrate to a new span class=capsCDN/span, andnbsp;whatnot./p h2span class=capsWYSIWYG/span in Drupal 8: from brochureware tonbsp;newspapers/h2 pDrupal needs to cater to both the extreme of very structured content for maximal reuse emand/em to the extreme of unstructured content (where pretty much all data is in a single “blob” called the “body” field, besides maybe a “title” and a “tags” field). It also needs to deal with everything innbsp;between./p pDrupal may be used for news sites, but also for brochureware sites. By having the span class=capsWYSIWYG/span editor be configurable, and hence letting the site builder choose whether formatting/layout tools are available or not, we empower the user tonbsp;choose./p h2span class=capsWYSIWYG/span in Drupal 8: previews are evil? span class=capsWYSIWYM/span to thenbsp;rescue?/h2 pA span class=capsWYSIWYG/span editor by definition provides ema/em preview — a embest effort/em preview, that is not guaranteed to be accurate. Providing a preview is not a problem in and of itself, as long as the author knows and understands that the content will be used in multiple contexts, where it will looknbsp;different./p pOf course, reality is that not every author will be sufficiently educated, so we have to take potential abuse into account. Drupal#8217;s filter system and very strict span class=capsWYSIWYG/span editing in Drupal 8 do precisely that.br / What might be even better though, is if we were to make it emexplicitly visually obvious/em that the span class=capsWYSIWYG/span editor is indeed providing a embest-effort/em preview: visualize the building blocks of the content that the author is using, to make him very aware of the structure of the content that he#8217;snbsp;creating./p pThis is what is some people have called span class=capsWYSIWYM/span: “What You See Is What You Mean”. sup id=fnref:3a href=#fn:3 rel=footnote3/a/sup a href=http://en.wikipedia.org/wiki/WYSIWYMWikipedia defines/a it asnbsp;follows:/p blockquote pspan class=capsWYSIWYM/span (an acronym for “what you see is what you mean”) is a paradigm for editing a structured document. It is an adjunct to the better-known span class=capsWYSIWYG/span (what you see is what you get) paradigm, which displays a formatted document on screen as it will appear in only one mode ofnbsp;presentation./p pThe main advantage of this system is the total separation of presentation and content: users can structure and write the document once, rather than repeatedly altering it for each mode of presentation, which is left to the exportnbsp;system./p /blockquote pA span class=capsHTML/span text editor specifically built for to be a span class=capsWYSIWYM/span span class=capsHTML/span editor exists: a href=http://www.wymeditor.org/span class=capsWYM/spaneditor/a./p blockquote pspan class=capsWYM/spaneditor#8217;s main concept is to leave details of the document#8217;s visual layout, and to concentrate on its structure and meaning, while trying to give the user as much comfort as possible (at least as span class=capsWYSIWYG/spannbsp;editors)./p ul liYou may have tried a full-featured span class=capsWYSIWYG/span editor, but you apprehend that your clients use it inappropriately, with the risk it degenerates visually and on the codenbsp;quality./li liYou may also have tried the span class=capsBB/spancode syntax, Markdown or the wiki-style syntax, but you don#8217;t want to force your clients to solutions that are too technical/complex for them, even if it tends to generate good qualitynbsp;code./li /ul /blockquote pa href=http://d67mgwbrvk714.cloudfront.net/cdn/farfuture/DOPedMz_8OFb63KzwIL_J9-5eSCGXukOZ867C6ikFxo/mtime:1369912745/sites/wimleers.com/files/wymeditor.png rel=original-imageimg src=http://d67mgwbrvk714.cloudfront.net/cdn/farfuture/X7z4tRjAXs8kdmOGBsxlFVi8CdT--4Qn4PsNfGAjCYM/mtime:1369913107/sites/wimleers.com/files/resize/wymeditor-420x236.png width=420 height=236 alt= //a/p pThe downside of span class=capsWYM/spaneditor (besides its utilitarian span class=capsUI/span and absence of keyboard accessibility) is that it doesn#8217;t support the whole range of websites that Drupal needs to support: some people emwant/em to do everything in a span class=capsWYSIWYG/span editor, and for the simplest websites, that#8217;s acceptable. Drupal tries to impose as few choices asnbsp;possible./p pSo, ideally, we#8217;d use span class=capsCKE/spanditor, with a way to turn on a “span class=capsWYSIWYM/span mode”. The great news: this already exists to a certain extent in the form of its “Show Blocks” plugin! (Which we#8217;re already shipping with Drupal core specifically to accomodatenbsp;this.)/p pa href=http://d67mgwbrvk714.cloudfront.net/cdn/farfuture/w4p6usz8t2Mx2Zut4ckpjXkt4UmLN842ndWnBn_97Ds/mtime:1369913037/sites/wimleers.com/files/ckeditor_show_blocks.png rel=original-imageimg src=http://d67mgwbrvk714.cloudfront.net/cdn/farfuture/Kn4dVRQP8PKSat7HmPcsIHzBa9-2tojhO1y_TiEIZGs/mtime:1369913107/sites/wimleers.com/files/resize/ckeditor_show_blocks-420x319.png width=420 height=319 alt= //a/p pIf we find this an acceptable solution, then all we need to do is improve span class=capsCKE/spanditor#8217;s “Show Blocks”nbsp;plugin!/p pOf course, this line of reasoning might come across as a superficial solution that isn#8217;t a real solution. But let me demonstrate that the core a this pattern has been used for almost 20 years: in the LaTeXnbsp;world./p h2span class=capsWYSIWYM/span span class=ampamp;/span LaTeX:nbsp;LyX/h2 pI#8217;m sure many of you know a href=http://en.wikipedia.org/wiki/LaTeXLaTeX/a. It#8217;s a “document markup language and document preparation system”. It#8217;s typically used for writing papers, but also books. sup id=fnref:4a href=#fn:4 rel=footnote4/a/sup/p blockquote pLaTeX is based on the philosophy that authors should be able to focus on the content of what they are writing without being distracted by its visual presentation. In preparing a LaTeX document, the author specifies the logical structure using familiar concepts such as chapter, section, table, figure, etc., and lets the LaTeX system worry about the presentation of these structures. It therefore encourages the separation of layout from content while still allowing manual typesetting adjustments wherenbsp;needed./p /blockquote pThat really captures the gist of it: authors focus on content, don#8217;t think about visual presentation. That#8217;s up to “the system” to figure out. Now, here too, it is the domain markup, and complete knowledge of it, that is problematic: the plethora of LaTexnbsp;commands./p pThat#8217;s why tools like a href=http://www.lyx.org/LyX/a exist. LyX is essentially an easier to use interface to emgenerate/em LaTeX. It shields the user (mostly) from the rather complex LaTeX markup. It provides a preview of sorts, but one that emclearly/em looks completely different from the end result that LaTeX#8217;s typesetting will generate: LyX encourages writing based on structure (span class=capsWYSIWYM/span) rather than appearance (span class=capsWYSIWYG/span)./p pIf all of the above sounded rather abstract, let#8217;s look at annbsp;example:/p ul liemWriting LaTeX/em: here#8217;s a tiny subset of the LaTeX code — see the a href=/sites/wimleers.com/files/example_operators_with_limits.texattached file for more/a:br / precode In inline formulas it looks like this: \begin_inset Formula $\lim_{x\rightarrow\infty}f(x)$ \end_inset /code/pre/li liemWriting LaTeX in Lyx/em:br /a href=http://d67mgwbrvk714.cloudfront.net/cdn/farfuture/3jYEaHUsFnWDN0HQuusqPE7h0vWGB9O4oecRoI2LfUI/mtime:1369917262/sites/wimleers.com/files/lyx_input.png rel=original-imageimg src=http://d67mgwbrvk714.cloudfront.net/cdn/farfuture/Znu5llpy0TjouDr5xUnzUe-MVt0wrqYd9Fro5IA3qSc/mtime:1369917420/sites/wimleers.com/files/resize/lyx_input-420x342.png width=420 height=342 alt=Writing LaTex in LyX //a/li liemThe output for both/em:br /a href=http://d67mgwbrvk714.cloudfront.net/cdn/farfuture/lnQuXdL41sNqYXQzq8b2jPragz7HevQAMZD-Oi3JXWw/mtime:1369917398/sites/wimleers.com/files/lyx_latex_output.png rel=original-imageimg src=http://d67mgwbrvk714.cloudfront.net/cdn/farfuture/hdLEBgyIfggFEm2l8J20nETpt6pyGlye25tYutcZyG0/mtime:1369919308/sites/wimleers.com/files/resize/lyx_latex_output-420x291.png width=420 height=291 alt= //a/li /ul pLyX’ initial release was in 1995. It#8217;s still actively being used. Many, many papers have been written it as well as a href=http://wiki.lyx.org/LyX/ProducedPublicationsmany books/a./p h2But … span class=capsWYSIWYG/span editorsnbsp;suck!/h2 pSure, a href=http://www.rachelandrew.co.uk/archives/2011/07/27/your-wysiwyg-editor-sucks/span class=capsWYSIWYG/span editors sucked/a… because they allowed for formatting span class=ampamp;/span layout, which Drupal 8’s span class=capsWYSIWYG/span editing doesn#8217;tnbsp;allow./p pWe still have work to do to stress the importance of content structure over content presentation — see the span class=capsWYSIWYM/span section above. But that can be bolted on top of the solid foundations that we alreadynbsp;have./p pSo, these wonderfully colorful quotes used to be painfully true, but they#8217;re not applicable to Drupal 8’s span class=capsWYSIWYG/span:/p blockquote pspan class=capsWYSIWYG/span Editors suck because they promote thinking about style rather than content. While content editors are busy changing headings to Comic Sans, pondering the use of a grimacing smiley on their about us page or getting creative with colour, they are not considering the actual copy they are adding to thenbsp;site./p pspan class=capsWYSIWYG/span Editors suck because as a designer you lose control over big chunks of the design. Anywhere that allows people to enter span class=capsHTML/span via an editor allows them to get as creative as they like, using any mark-up that they like. Unless you carefully go through and remove all the creativity that stuff is going to stay there. For developers, even if you switch off most of the buttons, just allowing the administrator to enter simple formatting and links, you still have a situation where a user is entering span class=capsHTML/span which you then display on the website. This can enable all kinds of stuff to get into your content, which is then very hard to remove and fundamentally tied to the current design of thenbsp;site./p /blockquote h2In-placenbsp;editing/h2 pIn-place editing emdoes not inherently conflict with structured content/em. In fact, for most things, Drupal#8217;s implementation of in-place editing stresses the fact that the content is structured: most structured data is impossible to edit in the same way as it is presented. Only for textual fields, we offer the überfancy “true span class=capsWYSIWYG/span in-place editing” capability, where Jeff Eaton#8217;s quote from above is most relevant. Even there though, abuse is prevented by the very restrictively configured span class=capsWYSIWYG/span editor. For other fields, like taxonomy terms, image fields, boolean fields and so on, we still offer a form-based editing span class=capsUI/span while editing in-place, and the danger of letting content presentation prevail is extremelynbsp;limited./p pTo a degree, in-place editing can even be useful in increasing awareness of the need for structured content. If the content isn#8217;t structured (i.e. one blob of data, for example a “body” field containing all content besides the title), then that becomes immediately and painfully obvious: no specialized, optimized in-place editors appear to edit the particular piece of content; instead you#8217;d have to find your way to the particular thing you want to edit in the body field.br / In-place editing in the way we#8217;ve implemented it emencourages/em structurednbsp;content./p pIn our initial implementation of in-place editing, there was more potential for misunderstanding and abuse. But we#8217;ve made two importantnbsp;changes:/p ol liin-place editing is no longer triggered on the page level, but at the entity level: the user must declare his intent to edit ema specific entity/em in-place. So the user can no longer get the impression he#8217;s “editing the page”: he#8217;s explicitly made aware of the type of content (entity type) he#8217;s editing (node, taxonomy term, custom block …) emand/em of the field within that piece of content (entity) that he#8217;s currently editing (Title, Author, Body, Tag, Image …).br / video src=/sites/wimleers.com/files/in-place%20editing%20ALL%20THE%20THINGS.mov width=420height=256 controls preload=none autobuffer //li liin-place editing is no longer saving each field individually, instead the modified fields for a specific entity are queued up and saved at once, this strengthens the communication to the user that he#8217;s editing a singular piece of content that just happens to be rendered on this particular page. (a href=https://drupal.org/node/1678002In progress./a)/li /ol pFinally, in-place editing is only designed to be used for quick edits (hence it being triggered by a “Quick edit” action in the contextual links of entities). It#8217;s intended to bring a level of “delightful interaction” to editing, instead of being forced to go back to the overwhelming back-end form every single time, even if you don#8217;t need to modifynbsp;metadata./p h1Education, understanding, awareness of contentnbsp;reuse/h1 pIt is absolutely emessential/em that authors (content creators) understand the ementire flow of the content/em: from creating it first, using each field for its proper purpose, to the different ways that content might end up innbsp;output./p pBecause in-place editing happens on the output, and output can happen in many ways, in-place editing emnever/em allows emall the content/em to be edited: at the very least it is going to be impossible to edit metadata. From that last perspective, it#8217;s definitely possible for an author to abuse in-placenbsp;editing./p pWe need to provide omnipresent, explicit awareness whenever an author is creating or editing content. Both when editing on the back-end and on the front-end. Low-fidelity, simultaneous previews of the different view modes and preferably on multiple form factors would be the idealnbsp;here./p pEmbedding this explicit awareness is something we still have to achieve for Drupal.sup id=fnref:6a href=#fn:6 rel=footnote5/a/sup/p h2Data storage in span class=capsNPR/span’s span class=capsCOPE/span/h2 pWe saw span class=capsNPR/span’s span class=capsUI/span earlier in this article. What we didn#8217;t see yet, are two fundamentally different ways of storing the data within what is presented as a single field to the endnbsp;user:/p ol liemEach paragraph of a single text field is stored as a distinct database record./em This also implies that the position of the paragraph needs to be stored. (See the a href=/sites/wimleers.com/files/NPR_entity_diagram_full_view.pdffull diagram/a fornbsp;details.)/li liemWhen saving a paragraph, all span class=capsHTML/span markup it contains is stored independently:/em it stores just the text in one database record, and then there is one database record emper/em span class=capsHTML/span tag used within that paragraph, which stores the type of tag, the start and end position of that tag within the text, and the attributes for that tag. They call this emMarkup Addressing/em:br / a href=http://d67mgwbrvk714.cloudfront.net/cdn/farfuture/uwd1uKSQJJJZ3iT4kz3GVvK_nQPAtYNjHFKccnSHk8Q/mtime:1370008308/sites/wimleers.com/files/NPR_flow_of_content_through_markup_addressing_full.jpg rel=original-imageimg src=http://d67mgwbrvk714.cloudfront.net/cdn/farfuture/R1kTem9eQR9YGndRlMdZRNFEdUDXzJQ8lDArbd3vc3U/mtime:1369866111/sites/wimleers.com/files/resize/NPR_flow_of_content_through_markup_addressing_full-420x503.jpg width=420 height=503 alt= //a./li /ol pIn essence: emextreme/em a href=https://en.wikipedia.org/wiki/Database_normalizationdatabase normalization/a!/p pDrupal does not yet support this out of the box. The question is whether this is actually emnecessary/em? There#8217;s a lot of additional overhead to going so far in normalizing data. What is the use case for storing individual paragraphs in separate database records, when many paragraphs are meaningless without the surroundingnbsp;paragraphs?/p pThe use case for storing the markup separately from the text it was applied to is more clear: to easily facilitate those platforms that don#8217;t use span class=capsHTML/span markup, and to support changes in markup more easily (e.g. codelt;bgt;/code → codelt;stronggt;/code). NPR decided against the alternative: storing the markup in the database and filter (strip/transform) it on the way out.br / The a href=http://blog.programmableweb.com/2009/11/11/content-portability-building-an-api-is-not-enough/main gripe Daniel Jacobson had/a with “filter on output” is based on how he#8217;d seen that implemented before: hard-to-maintain scripts and most systems allowed emall/em markup to be used. However, Drupal already has a mature system to deal with that: its filternbsp;system./p pBoth architectures have downsides. Neither is clearly superiorsup id=fnref:5a href=#fn:5 rel=footnote6/a/sup. Time will tell whether Drupal#8217;s data storage approach needs tonbsp;evolve./p h2Conclusion/h2 pspan class=capsWYSIWYG/span and in-place editing can clearly be highly problematic when it#8217;s implemented like it has been for many websites for about a decade now. For many websites, they have been (ab)used to the extreme point of entire span class=capsHTML/span pages being built by a span class=capsWYSIWYG/span editor, which has caused consistent inconsistency and utter lack of reuse. Liked by authors at first, until things went bad — or until the nextnbsp;redesign./p pThe other extreme is a system like span class=capsNPR/span’s span class=capsCOPE/span, where it is guaranteed that content is consistent and reusable. At the cost of the authoringnbsp;experience./p pHowever, I believe that using span class=capsWYSIWYG/span editing in a very disciplinary manner combined with a well-defined system for filtering on output and a data model similar to span class=capsNPR/span’s span class=capsCOPE/span, can yield equally successful results as span class=capsNPR/span’s span class=capsCOPE/span, but with a significantly better authoringnbsp;experience./p h2Sources span class=ampamp;/span relatednbsp;reading/h2 ul lia href=http://en.wikipedia.org/wiki/Content_strategyhttp://en.wikipedia.org/wiki/Content_strategy/a/li lia href=http://blog.programmableweb.com/2009/10/13/cope-create-once-publish-everywhere/http://blog.programmableweb.com/2009/10/13/cope-create-once-publish-everywhere//a/li lia href=http://blog.programmableweb.com/2009/10/21/content-modularity-more-than-just-data-normalization/http://blog.programmableweb.com/2009/10/21/content-modularity-more-than-just-data-normalization//a/li lia href=http://blog.programmableweb.com/2009/11/11/content-portability-building-an-api-is-not-enough/http://blog.programmableweb.com/2009/11/11/content-portability-building-an-api-is-not-enough//a/li lia href=http://karenmcgrane.com/2013/05/23/drupalcon-keynote-video-and-talk-notes/http://karenmcgrane.com/2013/05/23/drupalcon-keynote-video-and-talk-notes//a/li lia href=https://www.lullabot.com/blog/articles/inline-editing-and-cost-leaky-abstractionshttps://www.lullabot.com/blog/articles/inline-editing-and-cost-leaky-abstractions/a/li lia href=http://alistapart.com/column/wysiwtfhttp://alistapart.com/column/wysiwtf/a/li lia href=http://www.rachelandrew.co.uk/archives/2011/07/27/your-wysiwyg-editor-sucks/http://www.rachelandrew.co.uk/archives/2011/07/27/your-wysiwyg-editor-sucks//a/li /ul div class=footnotes hr / ol li id=fn:1 pBoth examples are emcontent/em businesses. The efficient managing and reusing of that content is the whole reason they exist and survive. Hence it is acceptable for them to have a very poor authoring experience. Also: the data model has to be right from the beginning; if something was missing or wrong, it may be impossible to transform old content to the updated data model. Hence there is also an intentional lack of flexibility.#160;a href=#fnref:1 rev=footnote#8617;/a/p /li li id=fn:2 pUse the a href=http://www.lullabot.com/blog/articles/module-monday-entity-view-modesEntity View Modes/a module to create new view modes.#160;a href=#fnref:2 rev=footnote#8617;/a/p /li li id=fn:3 pNot in the sense that it was discussed at the a href=http://groups.drupal.org/node/299188span class=capsWYSIWYM/span BoF at DrupalCon Portland/a, where it was really about emsemantic annotation/em.#160;a href=#fnref:3 rev=footnote#8617;/a/p /li li id=fn:4 pThe whole reason it exists is because somebody got fed up with messing with span class=capsWYSIWYG/span editors to get everything just right: the typography, the whitespace, the layout, and so on. Instead, that person wanted to just write the content and have software automatically calculate optimal whitespace, optimal typesetting.#160;a href=#fnref:4 rev=footnote#8617;/a/p /li li id=fn:6 pThe Spark team has already been working on this to a certain extend: the a href=https://drupal.org/node/1741498responsive previews/a patch. However, it is not tightly integrated with editing; neither on back-end nor front-end.#160;a href=#fnref:6 rev=footnote#8617;/a/p /li li id=fn:5 pIdeally, there would a domain-specific markup (as in, a markup with annotations for the specific knowledge domain of your site) that has more expressive semantics and would then be transformed to span class=capsHTML/span when the content gets rendered for web purposes, and to something else than span class=capsHTML/span for other purposes. We should explore this.br / But at the same time, the threshold would become rather high: which sites, besides those whose primary business is the longevity of their content, the long-term relevance and reusability of their content, will want to invest to build their domain-specific language?br / It requires a lot of discipline and research, to come up with a sufficiently expressive domain-specific markup. Precisely because once you#8217;ve begun expressing content using your domain-specific markup, there is no way back. You cannot automatically enrich existing content with newly added domain-specific markup. The domain-specific markup must be emcomplete/em before you begin using it.br / Not to mention that either the author will need a complete understanding of the complete domain-specific markup as well, because otherwise it will all have been a measure for nothing. Once you enter this realm, it#8217;s also very realistic (and human) for authors to forget about a few elements of the domain-specific markup. So then something like a span class=capsWYSIWYG/span editor, but with buttons that generate the domain-specific markup could be a great help. This is once again span class=capsWYSIWYM/span.#160;a href=#fnref:5 rev=footnote#8617;/a/p /li /ol /div ul class=tags lia href=/tags/spark typeof=skos:Concept property=rdfs:label skos:prefLabel datatype=Spark/a/li lia href=/tags/drupal typeof=skos:Concept property=rdfs:label skos:prefLabel datatype=Drupal/a/li lia href=/tags/wysiwyg typeof=skos:Concept property=rdfs:label skos:prefLabel datatype=WYSIWYG/a/li lia href=/tags/usability typeof=skos:Concept property=rdfs:label skos:prefLabel datatype=usability/a/li lia href=/taxonomy/term/11510 typeof=skos:Concept property=rdfs:label skos:prefLabel datatype=structured content/a/li lia href=/tags/acquia typeof=skos:Concept property=rdfs:label skos:prefLabel datatype=Acquia/a/li lia href=/tags/latex typeof=skos:Concept property=rdfs:label skos:prefLabel datatype=LaTeX/a/li lia href=/tags/lyx typeof=skos:Concept property=rdfs:label skos:prefLabel datatype=LyX/a/li /ul ul class=files litable class=sticky-enabled theadtrthAttachment/ththSize/th /tr/thead tbody tr class=oddtdspan class=fileimg class=file-icon alt= title=image/jpeg src=http://d67mgwbrvk714.cloudfront.net/cdn/farfuture/LBXGNUEf8I2Lofr05_70hVO7cOGXCVuSU5bd1JU4L2A/drupal:7.22/modules/file/icons/image-x-generic.png / a href=http://d67mgwbrvk714.cloudfront.net/cdn/farfuture/4DWXKe4IHb5_Xx87PLzLsWMg64dt8vgWnuZovCDRwxc/mtime:1370008784/sites/wimleers.com/files/npr_ui.jpg type=image/jpeg; length=130540 title=npr_ui.jpgNPR#039;s COPE UI/a/span/tdtd127.48 KB/td /tr tr class=eventdspan class=fileimg class=file-icon alt= title=video/mp4 src=http://d67mgwbrvk714.cloudfront.net/cdn/farfuture/AX6wF-h86N6UndTR1tSb7okkg9a11i-Fl0JewSA5LnI/drupal:7.22/modules/file/icons/video-x-generic.png / a href=http://d67mgwbrvk714.cloudfront.net/cdn/farfuture/7Uxn9VVz86l3wRd-s4G5EOlO_lJQbKFCnGIyb61uw3o/perpetual:forever/sites/wimleers.com/files/unidirectional_text_editor_configuration_to_text_format_filter_settings_syncing.mp4 type=video/mp4; length=4524928 title=unidirectional_text_editor_configuration_to_text_format_filter_settings_syncing.mp4Unidirectional text editor configuration to text format filter settings syncing/a/span/tdtd4.32 MB/td /tr tr class=oddtdspan class=fileimg class=file-icon alt= title=image/png src=http://d67mgwbrvk714.cloudfront.net/cdn/farfuture/LBXGNUEf8I2Lofr05_70hVO7cOGXCVuSU5bd1JU4L2A/drupal:7.22/modules/file/icons/image-x-generic.png / a href=http://d67mgwbrvk714.cloudfront.net/cdn/farfuture/DOPedMz_8OFb63KzwIL_J9-5eSCGXukOZ867C6ikFxo/mtime:1369912745/sites/wimleers.com/files/wymeditor.png type=image/png; length=34341 title=wymeditor.pngWYMeditor example/a/span/tdtd33.54 KB/td /tr tr class=eventdspan class=fileimg class=file-icon alt= title=image/png src=http://d67mgwbrvk714.cloudfront.net/cdn/farfuture/LBXGNUEf8I2Lofr05_70hVO7cOGXCVuSU5bd1JU4L2A/drupal:7.22/modules/file/icons/image-x-generic.png / a href=http://d67mgwbrvk714.cloudfront.net/cdn/farfuture/w4p6usz8t2Mx2Zut4ckpjXkt4UmLN842ndWnBn_97Ds/mtime:1369913037/sites/wimleers.com/files/ckeditor_show_blocks.png type=image/png; length=31848 title=ckeditor_show_blocks.pngCKEditor#039;s quot;Show Blocksquot; plugin/a/span/tdtd31.1 KB/td /tr tr class=oddtdspan class=fileimg class=file-icon alt= title=text/x-tex src=http://d67mgwbrvk714.cloudfront.net/cdn/farfuture/sv6HCUhc0NzZ8h3aLFtb6ux3sYy7CP4nY0CugxP5uyY/drupal:7.22/modules/file/icons/text-x-generic.png / a href=http://d67mgwbrvk714.cloudfront.net/cdn/farfuture/NC5GO2T5Ez3AHT79L5XGu_LSUyc9MOF841Pbp72w-1g/mtime:1369918263/sites/wimleers.com/files/example_operators_with_limits.tex type=text/x-tex; length=2638 title=example_operators_with_limits.texquot;Operators with Limitsquot; LaTeX example that matches the screenshots/a/span/tdtd2.58 KB/td /tr tr class=eventdspan class=fileimg class=file-icon alt= title=image/png src=http://d67mgwbrvk714.cloudfront.net/cdn/farfuture/LBXGNUEf8I2Lofr05_70hVO7cOGXCVuSU5bd1JU4L2A/drupal:7.22/modules/file/icons/image-x-generic.png / a href=http://d67mgwbrvk714.cloudfront.net/cdn/farfuture/3jYEaHUsFnWDN0HQuusqPE7h0vWGB9O4oecRoI2LfUI/mtime:1369917262/sites/wimleers.com/files/lyx_input.png type=image/png; length=134435 title=lyx_input.pngWriting LaTex in LyX/a/span/tdtd131.28 KB/td /tr tr class=oddtdspan class=fileimg class=file-icon alt= title=image/png src=http://d67mgwbrvk714.cloudfront.net/cdn/farfuture/LBXGNUEf8I2Lofr05_70hVO7cOGXCVuSU5bd1JU4L2A/drupal:7.22/modules/file/icons/image-x-generic.png / a href=http://d67mgwbrvk714.cloudfront.net/cdn/farfuture/lnQuXdL41sNqYXQzq8b2jPragz7HevQAMZD-Oi3JXWw/mtime:1369917398/sites/wimleers.com/files/lyx_latex_output.png type=image/png; length=18203 title=lyx_latex_output.pngLyX/LaTeX output/a/span/tdtd17.78 KB/td /tr tr class=eventdspan class=fileimg class=file-icon alt= title=video/quicktime src=http://d67mgwbrvk714.cloudfront.net/cdn/farfuture/AX6wF-h86N6UndTR1tSb7okkg9a11i-Fl0JewSA5LnI/drupal:7.22/modules/file/icons/video-x-generic.png / a href=http://d67mgwbrvk714.cloudfront.net/cdn/farfuture/VIhdWW0GCRyQvrufcLdTGRgY-4nCXdsyl4Eoz6oZOpc/perpetual:forever/sites/wimleers.com/files/in-place%20editing%20ALL%20THE%20THINGS.mov type=video/quicktime; length=1385717 title=in-place editing ALL THE THINGS.movIn-place editing of various entities on the page./a/span/tdtd1.32 MB/td /tr tr class=oddtdspan class=fileimg class=file-icon alt= title=application/pdf src=http://d67mgwbrvk714.cloudfront.net/cdn/farfuture/Aid1SLiclCcvownOs__mlM4SoFD4mlvEKtPx6sRTkd8/drupal:7.22/modules/file/icons/application-pdf.png / a href=http://d67mgwbrvk714.cloudfront.net/cdn/farfuture/vqcCp4RWjuq6YQOJELuWSw48rotUHJ2AQH8ZI6xWl9M/mtime:1369865287/sites/wimleers.com/files/NPR_entity_diagram_full_view.pdf type=application/pdf; length=44200 title=NPR_entity_diagram_full_view.pdfNPR entity diagram/a/span/tdtd43.16 KB/td /tr tr class=eventdspan class=fileimg class=file-icon alt= title=image/jpeg src=http://d67mgwbrvk714.cloudfront.net/cdn/farfuture/LBXGNUEf8I2Lofr05_70hVO7cOGXCVuSU5bd1JU4L2A/drupal:7.22/modules/file/icons/image-x-generic.png / a href=http://d67mgwbrvk714.cloudfront.net/cdn/farfuture/uwd1uKSQJJJZ3iT4kz3GVvK_nQPAtYNjHFKccnSHk8Q/mtime:1370008308/sites/wimleers.com/files/NPR_flow_of_content_through_markup_addressing_full.jpg type=image/jpeg; length=657983 title=NPR_flow_of_content_through_markup_addressing_full.jpgNPR Markup Addressing/a/span/tdtd642.56 KB/td /tr /tbody /table span class=filesize( bytes)/span/li /ul

div class=field field-name-field-main-image field-type-image field-label-hiddendiv class=field-itemsdiv class=field-item evenimg hspace=10 align=right width=190 height=190 src=http://www.lullabot.com/sites/default/files/styles/190x190_rounded/public/entry_image/podcast-drupalize_me_0.jpg?itok=eofEd1tt alt= //div/div/divdiv class=field field-name-body field-type-text-with-summary field-label-hiddendiv class=field-itemsdiv class=field-item evenpIn this week's episode, join part of the Lullabot team that worked on launching the new a href=http://www.lullabot.com/blog/articles/hey-lullabotcom-redesignLullabot.com redesign/a./p/div/div/div ul class=field field-name-field-show-notes field-type-link-field field-label-hidden li a href=https://drupal.org/news/130529SecurityUpdateDrupal.org security announcement/a /li li a href=http://drupalize.me/series/learning-sass-and-compassLearning Sass and Compass series/a /li li a href=https://www.youtube.com/playlist?list=PLpeDXSh4nHjRlZKs7cj2L_kLI5osP5ERcDrupalCon session videos on YouTube/a /li li a href=http://prague2013.drupal.org/DrupalCon Prague/a /li li a href=http://austin2014.drupal.org/DrupalCon Austin/a /li li a href=http://confabevents.com/events/minneapolis-2013/ConFab conference/a /li li a href=http://2013.drupalcampaustin.org/DrupalCamp Austin/a /li li a href=http://2013.drupalcampcolorado.org/DrupalCamp Colorado/a /li li a href=http://dublin2013.drupaldays.org/Drupal Dev Days in Dublin/a /li /ul h2 class=subtitleLessons learned from building the new Lullabot.com site/h2