Page 1


e h T

e g A


Where Technology Matters

Table of Content Speed Up Your Mobile Website With Varnish By Rachel Andrew


What You Need To Know About WordPress 3.9 By Tyler Longren


Killer Responsive Layouts With CSS Regions By CJ Gammon


Speed Up Your Mobile Website With Varnish By Rachel Andrew

Imagine that you have just written a post on your blog, tweeted about it and watched it get retweeted by some popular Twitter users, sending hundreds of people to your blog at once. Your excitement at seeing so many visitors talk about your post turns to dismay as they start to tweet that your website is down — a database connection error is shown. Or perhaps you have been working hard to generate interest in your startup. One day, out of the blue, a celebrity tweets about how much they love your product.

The person’s followers all seem to click at once, and many of them find that the domain isn’t responding, or when they try to sign up for the trial, the page times out. Despite your apologies on Twitter, many of the visitors move on with their day, and you lose much of the momentum of that initial tweet. These scenarios are fairly common, and I have noticed in my own work that when content becomes popular via social networks, the proportion of mobile devices that access that content is higher than usual, because many people use their mobile devices, rather than desktop applications, to access Twitter and other social networks. Many of these mobile (1)

users access the Web via slow data connections and crowded public Wi-Fi. So, anything you can do to ensure that your website loads quickly will benefit those users. In this article, I’ll show you Varnish Web application accelerator, a free and simple thing that makes a world of difference when a lot of people land on your website all at once.

Introducing The Magic For the majority of websites, even those whose content is updated daily, a large number of visitors are served exactly the same content. Images, CSS and JavaScript,

which we expect not to change very much — but also content stored in a database using a blogging platform or content management system (CMS) — are often served to visitors in exactly the same way every time. Visitors coming to a blog from Twitter would likely not all be served exactly the same content — including not only images, JavaScript and CSS, but also content that is created with PHP and with queries to the database before being served as a page to the browser. Each request for that blog’s post would require not only the Web server that serves the file (for example, Apache), but also PHP scripts, a connection to the database, and queries run against database tables. The biggest changes that come with the new widget interface are live previews, among others: • Editing existing widgets • Adding a new widgets • Widget reordering • Entirely remove Widgets • Adding a new widget

The number of database connections that

can be made and the number of Apache processes that can run are always limited. The greater the number of visitors, the less memory available and the slower each request becomes. Ultimately, users will start to see database connection errors, or the website will just seem to hang, with pages not loading as the server struggles to keep up with demand. This is where an HTTP cache like Varnish comes in. Instead of requests from browsers directly hitting your Web server, making the server create and serve the pages requested, requests would first hit the cache. If the requested page is in the cache, then it is served directly from memory, never touching Apache or the database. If the page is not in the cache, then the request is handed over to Apache as usual, whereupon Apache will create and serve the page, which is then stored in the cache, ready for the next request.

through would check out only a few pages of the website — all of those pages could be in the cache and served from memory. The few who go on to sign up would find that the registration form works well, because the server-side code and database connection are not bogged down by people pouring in from Twitter. Source: Andrew, Rachel. “Seep Up Your Mobile Website with Varnish.” Smashing Mag.,4 Dec. 2013. Web. 4 Dec. 2013

Serving a page from memory is a lot faster than serving it from disk via Apache. In addition, the page never needs to touch PHP or the database, leaving those processes free to handle traffic that does require a database connection or some processing. For example, in our second scenario of a startup being mentioned by a celebrity, the majority of people clicking

What You Need To Know About WordPress 3.9 By Tyler Longren

The latest version of WordPress named “Smith” was released yesterday which brings us another round of core changes. This time, the team worked mainly on the back-end editing and admin functions, such as a big TinyMCE (visual editor) update, gallery previews, media playlists, an improved widget UI and live theme previews (only to mention a few). Here’s what you need to know about the major changes in WordPress 3.9.

Improved Widget Interface While the old widget interface set the standard for drag-and-drop UI when it was introduced, it was time for an overhaul. The developer team took the Widget Customizer plugin and essentially built itinto the core.

Updated Visual Editor The visual editor has received a major overhaul (both under the hood and on the UI end), adding a horizontal line button, updated Plupload, and an updated TinyMCE. Small visual changes seem to have been applied to many different button icons.

Live Theme Preview Additions Live theme preview gives you a way to see how your site would look using a different theme. This has been around for a while and WordPress is finally adding new features to the framework they’ve built. (2)

Apart from the usual customizations options like color, title and whatever else is defined by the theme, you can now add widgets and rearrange them, seeing exactly how they will look once saved. In addition, the header image facility has received an overhaul and now provides even more flexibility.

Easier Theme Installation The new theme installation interface is a

vast improvement over the old. It will be blatantly obvious to anyone who’s ever seen the pre-WordPress 3.9 theme installation screen. Installing new themes is even easier now, too. The theme installation interface has been totally redone. Some of the most popular themes are displayed immediately in the “Featured” tab, for quick installation.

There are also tabs for popular themes and latest themes. The feature filter has been moved into it’s own tab, and has been generally cleaned up.

Audio & Video Playlists Users are now able to create audio and video playlists with WordPress 3.9. They work as a shortcode, just like the image galleries do currently. Uploading audio and video is handled through the usual media uploader, with images and everything else. From there, you have the option to add them to a playlist. A neat little feature is that WordPress 3.9 will try to automatically fetch album cover artwork using the ID3 tags in your media file.

Key Points For Developers Plugin and theme developers need to know a few new and important things.

functions.php file will enable HTML5 galleries and captions. Symlinked plugins are a new thing to WordPress 3.9. While it was technically possible in the past, it’s now fully supported:

Right when upgrading to WordPress 3.9, four new utility functions are mentioned. doing_action() and doing_filter() allow for identifying a hook in progress. The other two functions, has_image_size() and remove_image_size() allow manipulation of custom image sizes. Various external libraries have been updated, including jQuery, the ever popular JavaScript framework. TinyMCE, which provides the text and visual editing components. Underscore, a utility-belt for functional JavaScript programming. Plupload, which drives most of the upload interfaces in WordPress. Backbone, which uses Underscore as it’s backbone, essentially provides models with key-value bindings and custom events. MediaElement is a well-crafted HTML5 audio and video player. Masonry 3 is a cascading grid layout library. The database layer has also been improved, making it more fault-resistant and bringing improved compatibility with PHP 5.5 and MySQL 5.6. For example, PHP’s mysqli library is now used when PHP 5.5+ is available. Autosave functionality has been improved, as well. Your themes can now make use of HTML5 galleries and captions. Adding add_theme_support ( ‘html5’, array ( ‘gallery’, ‘caption’ ) ); to your theme’s

Killer Responsive Layouts With CSS Regions

can only add a scroll bar or hide the overflow. The CSS Regions specification provides a new option.

As Web designers, we are largely constrained by the layout features available to us. Content placed inside a container will often naturally extend the container vertically, wrapping the content. If a design requires elements to remain a certain height, then our options are limited. In these cases, we


By CJ Gammon

Regions are a new part of the CSS specification, so not all browsers have implemented them, and in some cases you might have to enable a flag to use them. (3)

If you’re a theme or a plugin developer, don’t forget to update your repositories. For some items you may just need to change your “Tested Up To” strings, in other cases (especially if you utilize heavily modified editor or upload configurations) you may need to look at the core changes in more detail

So, What Are You Waiting For? Keep in mind that upgrading your WordPress installation is the number one way to prevent malicious activity and exploits. As always, before any update, please do not forget to back up your database just in case anything goes pear shaped! It’s done. The Smashing Book #4, our brand new book with smart techniques, ideas and approaches for front-end development and design. Written by respected designers and developers, neatly packed in a gorgeous hardcover. Get the book now.

Source: Tyler, Longren. “What You Need To Know About Wordpress 3.9.” Smashing Mag.,17 APR. 2014. Web. 17 APE. 2014

Regions 101 CSS regions enable us to disperse content across multiple containing elements. They provide a flow, which consists of content that may appear within multiple elements, and a region chain, which is the collection of elements the flow is spread across. Once these elements have been defined, the flow dynamically fills the elements in the region chain. We can

then size our containers vertically without worrying about the content getting cut off, because it simply overflows into next element in the chain. This creates new opportunities for layout with responsive design. To use regions, start by creating a named flow; simply add the CSS property flow-into to your content element, with the value of your flow’s name. Then, for each region through which you want the content to flow, apply the CSS property flow-from with the same flow name value. The content element will then flow through the region elements. Current implementations in browsers require the property to be prefixed, but we are using the unprefixed version here. Your HTML would contain a content element and the scaffolding of all of the regions that this content will flow through. When you use regions, the content element will not be visible in its original location and any HTML already in your region elements will disappear, replaced by the content being flowed into them. Because of this, we can have placeholder or fallback content within our region elements.

You can use JavaScript events with regions to manage your layout and to ensure that content is displayed properly. The regions specification defines events that you can use to respond to certain conditions. The regionoversetchange event is dispatched when the regionOverset property changes for any region. This can occur when a user resizes the page, stretching out the container element so that the content no longer flows into certain regions. The value of regionOverset is either fit, overset or empty. A value of empty specifies no content inside the region. The regionOverset property is set to overset when the last region in the chain is unable to display all of the remaining content, making some of the content unreadable.

cohesively. A potential pitfall of this approach is that, if you use the aspect ratio of the device to size containers, defining both the width and the height, then your content might no longer fit inside the containers. Debugging

Regions And Break Properties

Further Reading

Regions also extend break properties from the multi-column layout specification, which you can use to define how content breaks within your regions. You can apply these properties to elements within the flow either to always break or to avoid breaking a region relative to the element. Using the value region for break-before or break-after will always force a region to break before or after the element, respectively. The value avoid-region can be used for break-before, break-after or break-inside to prevent regions from breaking before, after or inside the element.

Regions open up many new opportunities for designing responsively and ensuring that content looks great at any size. One responsive website whose unique layout was created with regions is Adobe’s demo for a bike company, created with Edge Reflow. Follow @adobeweb for the latest updates on regions and other new Web features. Also, be sure to check out Adobe’s CodePen collection, which shows regions in use; you may want to fork one or more of the examples to explore different ways to use regions. For more on regions, visit Adobe’s Web Platform Team Blog, which often provides updates about the specification and implementations. Full details can be found in the CSS Regions specification, which outlines all of the topics covered here and more. You can also find more information and examples in the “Regions” section of Adobe & HTML.

Responsive Design With Regions

Regions And Viewport Units

Responsive design is the technique of creating malleable layouts that stretch and change according to the given context. Frequently, designers will make elements flexible with percentages and media queries to adapt a layout to different screen sizes. Responsive design adapts content to every screen without requiring the designer to completely overhaul the design or code.

Viewport units enable you to use the window (or viewport) as the basis

Regions And Events

for sizing elements, which creates a consistent aspect ratio and harmony in the layout. You can simulate pages or blocks that break up the content (4)

When working with regions, it’s helpful to have tools to easily manage and debug various features. In Chrome Developer Tools, you can enable debugging features specific to regions. Detailed instructions on enabling these tools can be found in Christian Cantrell’s post “Web Inspector Support for CSS Regions.” With these features, you can find all of the named flows in a document, find the content and region chain associated with each named flow, and get visual cues for whether content fits in a region based on the regionOverset property.

Source: CJ, Cammon. “Killer Responsive Layouts With CSS Regions.” Smashing Mag.,5 NOV. 2013. Web. 5 NOV. 2013




Sherrywu Newsletter Final Draft