iOne Media Cloud: Creating a Centralized Photo Repository

One of the challenges that VIP client iOne faced were legal takedowns of images. The team at iOne, led by WordPress developer Mike Auteri, found a solution by creating the iOne Media Cloud, a central photo resource.

The central photo repository enables upload/approval workflows; asset identification so any upload can be traced back to the uploader and approver; full audit trails for uploader, approver, and all imports remote to WordPress sites; and the seamless purchase of Premium photos for authorized users.

You can browse his slides below:

See the presentations from previous Big Media & Enterprise WordPress Meetups. For Big Media & Enterprise WordPress Meetup groups in other cities, see the full list on VIP Events and join your local group.

Want more information about WordPress services for media or enterprise sites? Get in touch.

Improving Collaboration and Code Quality with Peer Code Review

High standards for code quality can be easy to maintain with a small team. But as Matt Boynes, a partner at WordPress.com VIP Featured Partner agency Alley Interactive, found out, code quality was difficult to scale as his team grew in size.

He set out to solve this by instituting peer code reviews. Every single line of code would get a second pair of eyes. While it was more time consuming and created barriers for deployment, the benefits overwhelmingly outweighed the costs. As a team, they were able to pool knowledge, improve collaboration, onboard new employees quickly and deploy code more efficiently.

See the presentations from previous Big Media & Enterprise WordPress Meetups. For Big Media & Enterprise WordPress Meetup groups in other cities, see the full list on VIP Events and join your local group.

Want more information about WordPress services for media or enterprise sites? Get in touch.

Homepage and Section Front Curation Made Easy

When the Portland Press Herald decided to redesign their site, Matt Fulton, the Director of Digital Projects, called upon WordPress.com VIP Featured Partner Program agency 10up for their services. Matt and his team wanted to make two key changes with the homepage and section front curation.

The previously fixed and inflexible homepage became adaptive and engaging. By focusing on content blocks and content areas, they were able to design one basic skeleton that allowed them to arrange content and showcase important assets.

See the presentations from previous Big Media & Enterprise WordPress Meetups. For Big Media & Enterprise WordPress Meetup groups in other cities, see the full list on VIP Events and join your local group.

Want more information about WordPress services for media or enterprise sites? Get in touch.

Scaling WP Queries with Elasticsearch

WordPress.com is big. Currently, there are:

  • 18.6 billion pages views/month
  • 409 million unique visitors/month
  • 56 million new posts/month
  • 68 million new comments/month

All of this happens on a dynamic platform that undergoes 5,000 deploys a month.

To try and surface better content to users, there are taxonomies and meta queries that normally don’t get used anywhere else. It can get difficult to scale these queries, which may more often than not result in the error message: MySQL server has gone away.

Xiao Yu, an Automattician, presents a solution: Elasticsearch. He states that Elasticsearch:

  • Optimizes for search not indexing
  • Is near realtime
  • Is denormalized
  • Uses inverted indices
  • Uses Bitsets

“Elasticsearch can represent a >200x improvement for queries against cold caches.” – Nick Daugherty, WordPress.com VIP

The es-wp-query plugin made by Matt Boynes at Alley Interactive does all of the transpiling of queries on the fly and can be found here:

https://github.com/alleyinteractive/es-wp-query

You can browse his slides below:

See the presentations from previous Big Media & Enterprise WordPress Meetups. For Big Media & Enterprise WordPress Meetup groups in other cities, see the full list on VIP Events and join your local group.

Want more information about WordPress services for media or enterprise sites? Get in touch.

 

Scaling UniversalSports.com for the Boston Marathon

The Boston Marathon is one of the busiest days of the year for UniversalSports.com. Dave Ross, an engineer manager at the WordPress.com VIP Featured Partner agency 10up, was presented with two challenges: 1) scale UniversalSports.com for the site’s busiest day of the year 2) support the growing mobile audience for live streaming.

To accomplish this task successfully, Ross and his team emphasized peer code reviews and performance in PHP, Javascript and CSS. They used the Brightcove HTML5 Video Player along with the FitVids.JS library to tackle the growing mobile audience, which allows videos to resize and fit inside the container on the page.

You can browse his slides below:

See the presentations from previous Big Media & Enterprise WordPress Meetups. For Big Media & Enterprise WordPress Meetup groups in other cities, see the full list on VIP Events and join your local group.

Want more information about WordPress services for media or enterprise sites? Get in touch.

From Blogger Partners to Bacon Videos: Strengthening Core Brands Through Engaged Online Cooks

America’s Test Kitchen is best known for their television series on PBS and magazine Cook’s Illustrated. America’s Test Kitchen is a real 2,500 square foot test kitchen located just outside of Boston with more than three dozen full-time cooks and product testers. Their recipes, equipment reviews, ingredient taste test results, and kitchen tips are made available across multiple different mediums like their TV shows, magazines, cookbooks, and websites.

To strengthen the many different brands they house, they wanted one cohesive, accessible site where they could connect with their fans, upload video tips, and publish original content. This resulted in The Feed. Social Media Manager, Jill Fisher, and Managing Editor, Christine Liu, walk us through how The Feed fostered a strong community of relationships with fans and bloggers that eventually lead to its own DIY book.

You can browse their slides below:

See the presentations from previous Big Media & Enterprise WordPress Meetups. For Big Media & Enterprise WordPress Meetup groups in other cities, see the full list on VIP Events and join your local group.

Want more information about WordPress services for media or enterprise sites? Get in touch.

GovLoop’s Online Community with WordPress

Tell us about GovLoop – what audience does this site serve?

GovLoop primarily serves federal, state, and local government employees, but we’re open to anyone who wants to make government more effective.  I used to work at Department of Homeland Security and always wished there was an online community to meet others in government and learn best practices from other agencies.  We launched in June 2008 and now have over 150,000 members who use GovLoop to get new ideas and tips to do their job better.

8d8b3263-5ac5-4e0c-a3e8-cb2b574a9860

How has your content strategy changed over the past few years?

Our content strategy has evolved over the years by being extremely focused on our users.  Our original premise was to create a “Facebook for Government” and we heavily focused on features like profiles, friending, groups, and discussion profiles.  Over time, we found people use GovLoop more as a knowledge network so we changed our content strategy to include more original content, research guides, and free online trainings – all done with a practical, how-to, and community-oriented voice.

Why did you choose WordPress?

Ning was a great first step for us to get a social network with basic functionality (blogs, profiles, discussions, groups).  Over time as our community grew, we had a number of features we wanted to add and core development needs that wasn’t in their roadmap, which led us to explore other CMS options and ending up with WordPress – with BuddyPress and bbPress – as our decision.

As I was looking into new platforms for GovLoop, my focus was on choosing an open source option that had a large developer community building both the core platform and plug-ins.  This would allow us to tap into a large reservoir of talent and give us freedom if we wanted to launch new features ourselves.  This quickly narrowed it down to a few options and we ended up choosing WordPress as there’s been a number of great media and social properties built on it.  Plus, we’ve used WordPress for our major conference website (nextgengovt.com) so we already had developed some internal expertise on the platform.

5374715c-6d01-410f-821a-c8a48883d5fc

What were the challenges you ran into when migrating this site from Ning to WordPress?

When we started this project, I quickly realized the biggest complexity would be the data migration – moving over hundreds of thousands of blogs, discussions, comments, member profiles is an insane task.  I reached out to Peter Slutsky of Automattic for a top-notch WordPress developer group and he put us in touch with a great team to help us on this journey – 10up.  The 10up team did a fantastic job scoping out the migration, testing and retesting migration on our beta site, and in the end it turned out great.  In the end, we successfully moved millions of data points from Ning to WordPress/BuddyPress/bbPress without a hitch.

The whole 10up team was fantastic and particularly wanted to shout out Dan Blaker, our project manager, and Matt Gross, who did a lot of the heavy lifting.  Also, I want to give a shout-out to Jeff Ribeira on the GovLoop team who led the project internally.

Much of GovLoop is centered around social network and viral content. How did you address this component of the website using WordPress and plugins like BuddyPress?

The core of GovLoop is our community.  We addressed the social nature of GovLoop in a couple key ways.  We used BuddyPress for social networking and profiles, as well as bbPress for groups and forums.  We also heavily integrated with our marketing automation software Eloqua so we are able to provide custom messaging and new content based on their profiles.  In terms of additional technical specs, we are hosted with Innoscale, which has greatly improved the speed of the site and does BuddyPress hosting well.  We’ve also integrated Cloudflare for SSL and as our CDN.

901f0ae9-9396-42fa-8077-a4febe82d314

How has your audience responded to the redesign?

They’ve reacted great to the redesign.  Not only is traffic up, we’ve received feedback like “Love the new website! It is so great to see how much has gone into the site over the past few years! The site is fantastic! “.  A key part of this redesign was prioritizing our key resources that we spend a ton of time producing (research guides on topics like Cybersecurity) – we’ve seen a large increase in traffic to this area based on our new UI.  I’m particularly proud of how we’ve created a visually appealing way to sort through resources by topic and by product – check it out at govloop.com/resources

What’s next for GovLoop and what can our audience look forward to in terms of new technology that you’re adding to the site?

Our big push for 2015 is into online learning.  In 2014, over 30,000 people took our free online training and folks are asking for more.  In response, we expanded our training offerings and just launched this week  “GovLoop Academy”,a free online learning academy with 25+ interactive courses and mentoring components.  GovLoop Academy is integrated into GovLoop.com and is one instance of a lightweight WordPress-based LMS that we developed. We’ve had a number of government agencies and associations express interest in using this learning platform, so we have white-labeled the LMS platform in a government-secure cloud.  If anyone is interested in this project, I’d love to hear from them at steve at govloop.com.  We are working again with 10up on this project and are looking to share back with the WordPress community.

58838c0f-5cd3-4c9e-a715-48fea3ddd019

Coding Best Practices: Preventing XSS in JavaScript

Nick Daugherty, from the VIP Platform team, shares some best practices for VIP developers and anyone wanting to write secure WordPress code. For more, see our VIP Documentation

The primary vulnerability we need to be careful of in Javascript is Cross Site Scripting (XSS). We’re probably all familiar with the escaping functions we use with PHP in WordPress to avoid that — esc_html(), esc_attr(), esc_url(), etc. Given that, it only seems natural that we would also need to escape HTML in Javascript.

As it turns out out, however, that’s the wrong way to approach Javascript security. To avoid XSS, we want to avoid inserting HTML directly into the document and instead, programmatically create DOM nodes and append them to the DOM. This means avoiding .html(), .innerHTML, and other related functions, and instead using .append(), .prepend(), .before(), .after(), and so on.

Here is an example:

jQuery.ajax({
    url: 'http://any-site.com/endpoint.json'
}).done( function( data ) {
    var link = '<a href="' + data.url + '">' + data.title + '</a>';

    jQuery( '#my-div' ).html( link );
});

This approach is dangerous, because we’re trusting that the response from any-site.com includes only safe data – something we can not guarantee, even if the site is our own. Who is to say that data.title doesn’t contain <script>alert( "haxxored");</script>;?

Instead, the correct approach is to create a new DOM node programmatically, then attach it to the DOM:

jQuery.ajax({
    url: 'http://any-site.com/endpoint.json'
}).done( function( data ) {
    var a = jQuery( '<a />' );
    a.attr( 'href', data.url );
    a.text( data.title );

    jQuery( '#my-div' ).append( a );
});

Note: It’s technically faster to insert HTML, because the browser is optimized to parse HTML. The best solution is to minimize insertions of DOM nodes by building larger objects in memory then insert it into the DOM all at once, when possible.

By passing the data through either jQuery or the browser’s DOM API’s, we ensure the values are properly sanitized and remove the need to inject insecure HTML snippets into the page.

To ensure the security of your application, use the DOM APIs provided by the browser (or jQuery) for all DOM manipulation.

Escaping Dynamic JavaScript Values

When it comes to sending dynamic data from PHP to JavaScript, care must be taken to ensure values are properly escaped. The core function esc_js() helps escape JavaScript for us in DOM attributes, while all other values should be encoded with json_encode().

From the WP Codex on esc_js():

It is intended to be used for inline JS (in a tag attribute, for example onclick=”…”).

If you’re not working with inline JS in HTML event handler attributes, a more suitable function to use is json_encode, which is built-in to PHP.

This approach is incorrect:

var title = '<?php echo esc_js( $title ); ?>';
var content = '<?php echo esc_js( $content ); ?>';
var comment_count = '<?php echo esc_js( $comment_count ); ?>';

Instead, it’s better to use json_encode() (note that json_encode() adds the quotes automatically):

var title = <?php echo wp_json_encode( $title ); ?>;
var content = <?php echo wp_json_encode( $content ); ?>;
var comment_count = <?php echo wp_json_encode( $comment_count ); ?>;

Stripping Tags

It may be tempting to use .html() followed by .text() to strip tags – but this approach is still vulnerable to attack:

// Incorrect
var text = jQuery('<div />').html( some_html_string ).text();
jQuery( '.some-div' ).html( text );

Setting the HTML of an element will always trigger things like src attributes to be executed, which can lead to attacks like this:

// XSS attack waiting to happen
var some_html_string = '<img src="a" onerror="alert(\'haxxored\');" />';

As soon as that string is set as a DOM element’s HTML (even if it’s not currently attached to the DOM!), src will be loaded, will error out, and the code in the onerror handler will be executed…all before .text() is ever called.

The need to strip tags is indicative of bad practices – remember, always use the appropriate API for DOM manipulation.

// Correct
jQuery( '.some-div' ).text( some_html_string );

Other Common XSS Vectors

  • Using eval(). Never do this.
  • Un-whitelisted / un-sanitized data from urls, url fragments, query strings, cookies
  • Including un-trusted / un-reviewed 3rd party JS libraries
  • Using out-dated / un-patched 3rd party JS libraries

Helpful Resources

Have some Shortcake – the plugin which makes shortcodes a piece of cake

Shortcodes can be a useful way of defining complex HTML elements within the WordPress editing window. But as Matthew Haines-Young, senior engineer at WordPress.com VIP Featured Partner agency Human Made, told the London Big Media & Enterprise Meetup, ‘everybody hates them.’

His solution is Shortcake, a plugin developed as part of Human Made’s work with the US media company Fusion. It gives developers the ability to add user-friendly modules to the Add Media window, making the shortcodes themselves (almost) invisible.

You can browse Matthew’s slides below:

Shortcake lives on Github for the moment, but it has proposed as a candidate for future inclusion in the WordPress core software.

See the presentations from previous Big Media & Enterprise WordPress Meetups. For Big Media & Enterprise WordPress Meetup groups in other cities, see the full list on VIP Events and join your local group.

Want more information about WordPress services for media or enterprise sites? Get in touch.

Introducing CoSchedule, the newest member of our Technology Partner Program

We’re excited to announce that CoSchedule has joined our Technology Partner Program. CoSchedule is a comprehensive marketing tool to help you and your team execute your entire content marketing strategy within WordPress.com VIP. If you’re looking to plan awesome content and save a bunch of time, the CoSchedule plugin on VIP can help you do just that.

Here are 10 reasons to check out CoSchedule:

1. Customize Team Roles 

WordPress VIP customizable team roles

Customize everyone’s role on your team to give permissions for specific responsibilities. Help them use the features they need to do their work, and hide the ones that get in their way.

2. Control Who Can Share Content

WordPress VIP custom social media permissions

You can control access to your social profiles to limit who can and can’t publish to each account. Give specific team members the rights to use certain company social media profiles while restricting others’ access. This will help you get a ton of traffic from your team, while providing advanced accountability for social sharing.

3. Advanced Profiles For Sharing Content

WordPress VIP social media security and private profiles

When you create content your team is really proud of, they’ll want to share it with their personal fans, followers, and friends. Your team can rock at social media with private social profiles and share your content to generate even more traffic.

4. Better Accountability

WordPress VIP security and access logs

Sometimes, you just need to know who published what. It helps to have a full history log of who modified your blog and social media content. CoSchedule will help you know exactly who did it.

5. Scheduling Social Media Messages

WordPress VIP social media scheduling

Schedule social media messages as you write your blog posts. That means multiple team members can work on a project at the same time to move faster, be more productive, and work together in the same tool to see what everyone is working on.

6. Custom Workflow That Works For Your Team

WordPress VIP customizable content marketing workflow

Create a workflow that suits your needs: build your own task templates, name those tasks, assign them to the right custom roles for your team, and automatically change the due dates if you move your content around on your calendar.

7. Analytics

WordPress VIP social media analytics

You need to know how your content performs to prove your ROI and improve your future content.

8. Work Where It Works Best For You 

WordPress VIP custom dashboards

You can access CoSchedule directly within WordPress.com VIP, or as a standalone web app.

9. Security

CoSchedule uses the same security technology most banks use to protect your information. Check out their status log whenever you’d like to see stats on our up times. You’ll always have access to at least two support techs during regular business hours, and at least one support tech is on call 24 hours a day.

10. Get The Support You Need

There’s something special about receiving support that helps you get through a tough problem. And taking that to a whole other level is even better. Get the priority level support you need for any question you have when you choose CoSchedule for WordPress.com VIP.

The support includes setup assistance and full support for your entire experience with CoSchedule. Don’t hesitate to reach out.