Choosing the right multilingual solution for enterprise development

The idea of multilingual web publishing sounds straightforward enough. A publisher operating in multiple countries, or in a country where multiple languages are spoken, needs the ability to manage content – as well as site features like navigation – in multiple languages.

But having worked on many such projects in my career, I can assure you that multilingual publishing means different things in different situations. Is content always created in one particular language, then translated into the others? Or can content originate in any of the operational languages? Is every piece of content translated? If so, when, and by whom? If not, what do you do when a piece of content isn’t available in the language being viewed?

WordPress has been fully translated into dozens of languages, from Afrikaans and Albanian to Vietnamese and Welsh; but it doesn’t have a built-in solution for multilingual operation. While that might initially seem like a negative, it means there is scope for a number of different approaches, reflecting the different scenarios and workflows associated with multilingual publishing.

At last month’s Big WP event in London, Giuseppe Mazzapica from VIP agency partner Inpsyde reviewed the approaches taken by some of the best known WordPress plugins, noting their respective strengths and weaknesses.

Inpsyde are, of course, the agency behind Multilingual Press, the multilingual plugin we use most often at VIP. Its approach, based on the multi-site mode built into WordPress, stays closest to ‘normal’ WordPress operation. This means other functions, including third-party plugins, are much more likely to work without workarounds.

But the VIP platform also supports other solutions, which may be a better fit for certain clients, their requirements, and their workflows. Our engineers are always happy to talk through the workflow needs of any given project, and help our clients make the right choice.

Thanks to Chrissy at Inpsyde for the beautiful featured image on this post!

Free Gutenberg How-To Videos

In our last Gutenberg update, we shared our high level recommendations to help enterprise WordPress users fully embrace the block while planning for WordPress 5.0 and the new Gutenberg editor. That included an initial set of Gutenberg educational videos we’ve developed exclusively for VIP clients and their teams.

Today we’re releasing a second set of videos that are available for anyone to use. These are aimed at helping you convert current customizations including things like ACF codes and shortcodes, and build block templates to get your sites running Gutenberg well before WordPress 5.0 ships.

Register for free and watch them at: https://vipgutenberg.com

Here are the topics covered in the new videos:

Converting Custom Content to Gutenberg

  • Shortcodes to Blocks
  • ACF Fields to Blocks
  • CMB2 to Blocks

Access Control & User Permissions

  • Controlling access to blocks
  • Controlling access to blocks based on user roles
  • Creating Block Templates
  • Applying User Roles to Block Templates

These videos are the culmination of weeks of research with our clients. VIP went to some of the biggest enterprise users of WordPress and asked “What are your questions about Gutenberg? What do you loath to explore about the new editor?” Their answers drove a curriculum exploring how to convert custom content to Gutenberg and access control with user permissions.

As we mentioned in our previous update, we’re also developing a plugin to help make it easy to test and implement Gutenberg at the Page and Post level. We’ll have updates on that soon.

In the meantime, if you’re a VIP client and you have questions about rolling Gutenberg out on your sites, get in touch with our Support team.

If you’re not currently on VIP and are feeling less than ready to embrace block-based life, drop us a note.

Data Sync on VIP Go

Anyone who runs an enterprise WordPress application knows there are significant challenges and considerations to copying production data. No matter that your production data runs to tens or hundreds of thousands of articles, contains sensitive “live” data, and is accompanied by tens of gigabytes of images, often you need a complete copy of that production data to test new functionality or to reproduce a persnickety bug.

Today we’re pleased to announce a speedy, streamlined, and structured Data Sync process for VIP clients. This is a step in our larger effort to make copying large amounts of production data entirely self-service, which we will also be rolling out soon. In the meantime, and even after self-service becomes available, we are happy to sync data on behalf of our clients.

Read on for details on how our new process works.

 

As light as a feather

Copying data must never affect the operation of the production site. It cannot place load on the database or impact performance in any way. To remove the impact on our production servers we hook into our backup mechanism, and use the hourly backup data we keep for all production sites.

Fast, complete, and working data

For the large datasets we expect from many of our clients, copying everything over can take a long time and the subsequent operations on the data can take even longer. Our Data Sync completely replicates their production data and we wanted the operation to be as fast as possible.

To sync the data we use the reliable and well tested functionality of our backup systems. Our backups are fast to restore, and have complete internal integrity, e.g. no partly completed data operations, making them ideal for this purpose.

As well as restoring the data, we need to replace any URLs using the production domain with URLs for the new non-production environment. Traditionally this is done using the WP-CLI tool, which provides a command line interface and tools for managing a WordPress install. While this works for the majority of WordPress sites out there, this method is simply too slow for the massive datasets typically used by a high scale WordPress.com VIP client. The slowdowns are caused by the interactions between PHP and the database layer – many hundreds, thousands, or tens of thousands of reads and writes will necessarily take some time!

To replace the URLs in the data at the speed VIP customers demand, our team wrote a Golang script, “go-search-replace“. In our tests, go-search-replace is at least forty times quicker than the equivalent search and replace using WP-CLI commands, reducing operations which took many hours to minutes at most. (We apologize if you were expecting to kick back with a long and refreshing beverage during the Data Sync.)

Massive media libraries

Of course the database is just one part of the story. Many WordPress sites we host include tens, even hundreds, of gigabytes of data and hundreds of thousands of files on our VIP Go Files Service. Copying such a significant amount of data would take many hours. Instead our cloud platform provides a service we call UnionFS.

UnionFS works by making the files for the production site available to all non-production sites in read-only mode. Files shared by UnionFS in this way are served from the same infrastructure and have the same caching rules applied.

Tailored to your WordPress application

Production data often includes connections to APIs and services that should not be active in non-production environments, such as API keys for live payment gateways and connections to mailing lists. To ensure you have confidence in the data, and to be sure you get the same results every time, we provide a WordPress action hook so your code can swap API keys, clear production orders, and any other custom operations that are specific to your WordPress application.

How do I try this?

As we finalize everything that will make this process fully self-service, we will continue to support VIP client Data Sync needs as they arise. If you want the data from your VIP Go WordPress site copied into a non-production environment, please contact our support team and we will be happy to help.

You can read more in our Data Sync documentation.

The New Web, Powered by Jetpack and Progressive Web Apps

The way that people access the Internet is changing.

In 2017, global mobile web traffic exceeded desktop traffic for the first time. In the areas of fastest Internet growth we have seen a profound shift towards low-powered mobile devices on 2G and 3G networks.

Pageloads by browser platform, 2017 YTD. Data via StatCounter.

This presents a challenge not just to developers and designers, but to the actual architecture of the web. The web’s request/response architecture works great for always-on low-latency networks but fails when the network is unreliable, even temporarily.

User expectations are also changing. Mobile devices now have app ecosystems and rich patterns and libraries for handling changing network conditions and integrating with on-device features like cameras, GPS, storage and payment processing – features not traditionally found in the web’s sandboxed environment.

As web developers, designers, and publishers, we have made great strides towards accommodating mobile phones through responsive design. Users are now accessing the same site in a variety of form-factors. However, what has happened as a result is that the mobile web has become drastically more demanding on devices and networks, essentially bringing the demands of the desktop to all devices.

If you’re reading this, you probably experience the web in a very different way from most Internet citizens – even on a mobile device. Most of us have high-end smartphones and LTE connections. As a result, we can often be unaware of the challenges that many people face using our sites, plugins and themes.

While we may feel a strong affection for the freedoms afforded by the web, most people have more personal goals: to run their business, to tell their stories, to connect with others in their communities and around the world – and they will gravitate to the best solution, regardless of the underlying technology. We risk these users skipping the web entirely in favour of walled gardens powered by proprietary apps.

How do we address these issues?

Progressive Web Apps are the web’s answer to these challenges. PWAs comprise a set of new (and not-so-new) web standards that provide offline support, storage, and device integration that can match native apps. Combined with the essential freedoms and efficiencies of the web, these standards represent a fundamental shift in how web content can be accessed.

In addition, by only downloading the site features someone is actually using, PWAs can be much MORE efficient than native apps!

Despite the name, PWAs aren’t just for app-like experiences. Your content-rich web site can also be a Progressive Web App. In fact you can apply these technologies in ways that help any site on any theme to load quickly, work offline, and engage users in powerful new ways.

Earlier this week I was thrilled to share the Chrome Dev Summit stage with Chrome Engineer Das Surma to talk about our recent experiments with WordPress and PWA. We added PWA capabilities to Jetpack, a free plugin that you can download on any WordPress site. Jetpack powers over 5 billion pageviews a month, and already delivers a number of useful features to WordPress.com and VIP, so it’s a great platform for adding these capabilities.

We found that a specific combination of traditional and new optimisations can improve the overall performance of web sites loaded via 3G networks by up to 10-15x . Improvements range from reduced Time To First Contentful Paint (TTFCP), smaller number of requests, reduced overall download size, and the ability to work offline. Crucially, these improvements can be applied automatically to almost any theme without additional coding.

The scores you see there on the right are generated by “Lighthouse“, Google’s incredible site auditing tool, which is included in the Chrome browser.

Here’s some details on the optimisations we have made so far, for more technical readers:

  • Aggressive inlining of critical assets on the first page load to improve performance with empty cache, while using the Service Worker to load common assets in the background for subsequent requests
  • Fast loading of cached pages while checking for fresh content in the background using the Stale While Revalidate strategy
  • Offline support by checking for network access and preloading critical pages when the Service Worker activates
  • Web Push for sending updated content to clients which can be retrieved when the browser comes online
  • Lazy loading of offscreen images using newer IntersectionObserver API (with polyfill fallback on IE)

So what can you do to be part of this revolution? If you are a developer, I encourage you to check out our Jetpack branch and let us know what you think. Truly, we have barely scratched the surface of what’s possible.

If you are a site owner or designer, I encourage you try out your site on 3G (or using the 3G simulator built-in to Chrome) on a low-end device and see if you are providing a good experience for the next billion internet users who will be overwhelmingly using that kind of network and device.

Check out the full video below. We begin talking about the role of Jetpack around 3m 14s.

Props to @DasSurma, @nicoleckohler, @ebinnion, @beaulebens and @extraface for all their help and feedback writing this article.

New: WordPress Plugin for Facebook Instant Articles

InstantArticlesWordPressHero

Facebook has announced that its Instant Articles program will be open to publishers “of any size, anywhere in the world” starting on April 12, 2016. And with the free plugin we’re unveiling today, you’ll be able to prepare your self-hosted or VIP WordPress for the demands of this new channel.

Install it now from GitHub (it’s also coming soon to the WordPress plugin directory).

Instant Articles, now available to people using Facebook for iPhone and Android, load articles in Facebook’s News Feed up to ten times faster than standard web articles, and are optimized for the mobile reading experience.

The native format includes a built-in set of interactive tools like auto-play video and tap-to-zoom image galleries, bringing stories to life on mobile devices. Early analysis suggests that people engage more deeply with the immersive experience and share Instant Articles with their friends more often than standard web articles.

We’ve been working with Facebook, and VIP Featured Partner agency Dekode, on a plugin which takes care of the basics. Activate it, and you’ll have a compliant feed of Posts, wrapping your core content in the markup Facebook requires.

How it works

InstantArticlesForeignPolicy

Facebook has a review process where they verify that all Instant Articles generated from your website are properly formatted and adhere to their community standards and content policies before you’ll be able to start pushing content to the platform. (You can get more information in our Instant Articles FAQ.) Instant Articles generally should contain all the content a person would see in the web version of an article, so if you have extended the standard WordPress Post template in any way, it’s likely that you’ll need to extend the plugin’s default output too.

If you find any problems in our plugin, please send your feedback as an Issue on GitHub. And if you write a compatibility layer for another popular plugin, we’d encourage you to share it with the WordPress community via a Pull Request.

The Instant Articles program is one of several current initiatives that aim to bring improved speed and performance to the experience of reading news on your mobile device. We are thrilled to be working with Facebook on making it easier than ever for WordPress publishers to reach and engage their audiences in new ways.

Learn more at Facebook.

Accelerating the Mobile Web

Today we’re announcing support for Accelerated Mobile Pages for WordPress, a new open source initiative spearheaded by Google to dramatically improve performance of the mobile web.

“Speed has always been a cornerstone of Google Search and we’re thrilled to be working alongside others in the tech industry and publishers around the world to bring the Accelerated Mobile Pages Project to life.”
—Dave Besbris, VP Engineering, Google Search

The mission of the WordPress project is to democratize publishing, and with 24.6% of sites running the software—making WordPress the most popular CMS on the web—we feel we’re making good progress.

That success has been built on our openness, our flexibility, and our commitment to delivering the best possible user experience—both for publishers, and their readers.

To that end, we are developing a plugin to support the AMP specification, enabling publishers to produce AMP-formatted content from WordPress without lifting a finger (other than clicking “publish”, naturally). The plugin is still in early stages, but you can see it in action on WordPress.com or even this very post.

If you’re interested in kicking the tires, submitting improvements, or squashing bugs, we’d love your help.

We believe that open source is one of the most powerful ideas of our generation. We strongly and actively support a free, open internet. We’re very happy to support an open source initiative like AMP, which brings publishers and technology companies together to make a better mobile experience for everyone.

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 alert( "haxxored");;?

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

Introducing the WordPress Security White Paper

We’re very proud to share the WordPress Security White Paper with the WordPress community!

The white paper is an analysis and explanation of the WordPress core software development and its related security processes, as well as an examination of the inherent security built directly into the software. Decision makers evaluating WordPress as a content management system or web application framework should use the white paper in their analysis and decision-making, and for developers to refer to it to familiarize themselves with the security components and best practices of the software.

The WordPress Security White Paper is available directly on the WordPress.org site. In addition, the HTML and PDF versions are available at Automattic’s Documattic Updated! Now on the WordPress GitHub repository for any updates and/or additions.

We’d really love to encourage and help share translations of the white paper to the global WordPress community. If you have a translation to contribute, please add it to the WordPress GitHub repo so others can benefit, too. Pull requests welcome!

The text in the white paper (not including the WordPress logo or trademark) is licensed under CC0 1.0 Universal (CC0 1.0) Public Domain Dedication. You can copy, modify, distribute and perform the work, even for commercial purposes, all without asking permission.

Thank you to all who contributed to the initial release and compilation of this document: Barry Abrahamson, Michael Adams, Jon Cave, Helen Hou-Sandí, Dion Hulse, Mo Jangda, and Paul Maiorana.

Below is the table of contents for the white paper, which you can find here.

Overview
Executive Summary
An Overview of WordPress
The WordPress Core Leadership Team
The WordPress Release Cycle
Version Numbering and Security Releases
Version Backwards Compatibility
WordPress and Security
The WordPress Security Team
WordPress Security Risks, Process, and History
Automatic Background Updates for Security Releases
2013 OWASP Top 10
A1 – Injection
A2 – Broken Authentication and Session Management
A3 – Cross Site Scripting (XSS)
A4 – Insecure Direct Object Reference
A5 – Security Misconfiguration
A6 – Sensitive Data Exposure
A7 – Missing Function Level Access Control
A8 – Cross Site Request Forgery (CSRF)
A9 – Using Components with Known Vulnerabilities
A10 – Unvalidated Redirects and Forwards
Further Security Risks and Concerns
XXE (XML eXternal Entity) processing attacks
SSRF (Server Side Request Forgery) Attacks
WordPress Plugin and Theme Security
The Default Theme
The Theme Review Team
The Role of the Hosting Provider in WordPress Security
A Note about WordPress.com and WordPress security
Appendix
Core WordPress APIs
White paper content License
Additional Reading

A special note: As you can see in the table of contents, the white paper is specific to the open source core WordPress software. The core WordPress software is the foundation of WordPress.com and there are additional Security FAQ related to WordPress.com VIP here.

Inside GigaOm’s Search and Alerts

Casey Bisson from GigaOm presented “Search and Alerts” at the recent Big Media & Enterprise Meetup in San Francisco.

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.

Using APIs to display sports data through WordPress with USA Today

Matt Harvey, Director of Product, USA Today Sports Media Group, presented how USA Today uses APIs and WordPress to display sports data in “Keeping the Score: Using APIs to display sports data through WordPress,” at the recent Big Media and Enterprise Meetup in San Francisco.

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.

Ready to get started?

Drop us a note.

No matter where you are in the planning process, we’re happy to help, and we’re actual humans here on the other side of the form. 👋 We’re here to discuss your challenges and plans, evaluate your existing resources or a potential partner, or even make some initial recommendations. And, of course, we’re here to help any time you’re in the market for some robust WordPress awesomeness.