Hands On Improving Google PageSpeed

Final product image
What You’ll Be Creating

What Is Google PageSpeed?

Google PageSpeed is a free tool that assesses the performance and usability of your website for mobile and desktop platforms. It’s extra important because Google uses it in determining key elements of our SEO ranking, i.e. how high we appear in their search results.

If you want more background about the benefits of increased site speed, read Moz’s Why Site Speed Optimisation Should Be Part of Your SEO Strategy, which highlights, “…several case studies have shown faster loading pages strongly correlate to higher revenue.”

In this tutorial, I’m going to walk you through some technical approaches to optimize your WordPress website’s PageSpeed. While basic changes can be quite simple and easy, more comprehensive updates can actually be quite challenging.

Interestingly, custom websites may be easier to optimize than WordPress sites—it’s because of the framework’s extensive use of third-party themes and plugins. It’s also based on an architecture that was designed before its popularity and relies on an imperfect architecture for backward compatibility.

Before we get started, please remember, I do try to participate in the discussions below. If you have a question or topic suggestion, please post a comment below or contact me on Twitter @reifman. I’m interested in your experience with WordPress and PageSpeed.

My Initial PageSpeed Score

For this tutorial, I’m going to focus on improving my personal website, JeffReifman.com.

A while back, my PageSpeed was Mobile 65 and Desktop 64 — not that great:

Optimizing PageSpeed - Initial Mobile

Note: here’s the article to read if you’re curious about the funny mobile screenshot with Russell Wilson.

Optimizing PageSpeed - Initial Desktop

Before we get started on making optimizations, let’s talk about some of the basic WordPress performance factors.

Basic WordPress Performance

There are a few major ways to begin optimizing your WordPress site for performance and increased PageSpeed.

Theme Selection

The PageSpeed of various themes is greatly affected by the number and size of JavaScript files and CSS they use, the number of images used and their size, and the approach of their mobile implementation, i.e. typically responsive nowadays.

If you’re in the market for a new WordPress theme and want to evaluate PageSpeed, you may be surprised that the scores for well-known themes often run in the 60s and 70s but also up to the 90s. Here are a couple of articles assessing themes and PageSpeed via ColorLib and WPMU. In any case, I expected higher.

I’ve used My Site My Way’s Construct theme for several years. Interestingly, the company’s support site went silent recently, and they’ve left no explanation for users.

MySiteMyWay Discontinued - User Forum Erupts

However, because there will be no more updates to the theme, it makes it a bit easier for me to make some radical changes to its performance for this tutorial without having to deal with future code updates from the company. I’ll get to this shortly.

Hosting Company

Using dedicated servers will very likely perform better than increasingly common and more affordable shared virtual servers. In the past, I’ve written about how to install WordPress at shared providers such as Digital Ocean. There’s also the in-between of services like WP Engine, which offer an attention to developers and both shared and dedicated servers.

The quality of the host will matter too. A lot of bare-bones shared WordPress providers may provide inconsistent performance.

For example, I use the KnowHow theme on both Publishing with WordPress hosted at a Digital Ocean virtual server and Flee the Jungle hosted at WP Engine. The sites are fairly similar in content weight, e.g. text and image usage. The PageSpeed for Publishing with WordPress’s PageSpeed is Mobile 73 and Desktop 88, while Flee the Jungle at WP Engine was a bit faster (Mobile 78 and Desktop 91); WP Engine’s managed hosting is a bit faster than my self-hosting with a shared server.

I’ve also seen poor performance with Amazon’s low-end AWS hosting. You get what you pay for.

Caching

WordPress caching is critical for performance, and I’ve regularly written about my favorites: W3TC and Varnish Cache, e.g. Optimizing WordPress with Varnish and W3 Total Cache.

Google PageSpeed improved with W3 Total Cache

Content Delivery Network (CDN)

Another service that’s critical is a content delivery network. Earlier I wrote about Accelerate Your Content Delivery With KeyCDN for Envato Tuts+ and then decided to switch to them.

Optimizing PageSpeed - KeyCDN Dashboard

Image Optimization

Regularly reducing the dimensions and file size of images across WordPress is time-consuming yet critical.

I regularly use Acorn as a lightweight tool to quickly scale down images for the web. I laughed when someone tweeted recently that they’d just opened Photoshop and would be available for phone calls for awhile while it loaded—Acorn is small and fast. That Adobe subscription model is so slow to load—sorry, subscribers.

There are also automated image optimization plugins like WP-Smush. I recently began experimenting with KeyCDN’s new Optimus. Also, here’s WPMU’s summary of the 10 Best Image Optimization Plugins to Speed Up Your WordPress Site.

Increasingly, I also access images on my post externally from Flickr. For example, when my post about Seattle’s Amazon-driven neighborhood growth went viral on Slashdot, there were no performance issues or bandwidth costs for all the photos, because Flickr handled it.

You can read Google PageSpeed’s Image optimization Guide, but I’ve increasingly found that Google help is overly research oriented (which is nice to have as a resource) but not very useful for resolving issues on your own. There may be one too many PhDs there and one too few actual users.

My Updated PageSpeed Scores

While I’ve always had W3TC and Varnish, adding KeyCDN and Optimus increased my PageSpeed to Mobile 72 and Desktop 82, a good improvement from 65 and 64:

Optimizing PageSpeed - Updated Scores

Interestingly, Google’s image caching complaints seem as if they can go on indefinitely, no matter what you improve. For this tutorial, I experimented with optimizing some of the identified remaining offenders to see what would happen. The result was interesting, and I’ll tell you more about it shortly.

The PageSpeed Optimization Challenge

If you’ve done all the major basics above, improving your PageSpeed with WordPress turns out to require significant effort and can be quite time-consuming. 

The Challenge of WordPress

A static site usually has one file with CSS and JS includes that can be easily minified and combined. WordPress is a lot more complex.

So much is created dynamically through WordPress’s—ahem—less than perfect architecture. It can take time to find where files are being created, whether they are in the themes or plugins, and how to address these issues. It turns out that when you have seven plugins including JavaScript files and you want to minimize and combine them into one include while allowing regular plugin upgrades, it’s quite a challenge.

Using Minification

HTML Minification

Updating my W3TC HTML minify settings quickly resolved PageSpeed’s complaint about that.

Optimizing PageSpeed - Minify HTML with W3TC

CSS Minification

For CSS, I had to individually add the files PageSpeed alerted me about to W3TC’s CSS File Management. W3TC then began minifying my CSS and combining the named files into a single file to include.

Optimizing PageSpeed - Minify CSS

This resolved PageSpeed’s CSS minification requirement.

Optimizing PageSpeed - Post HTML and CSS Minify Scores

It also reduced the number of CSS files being reported for render blocking from seven to four theme-related files (listed first under Optimize CSS Delivery):

Optimizing PageSpeed - Render Blocking After Minifying CSS

The three remaining files were from plugin directories outside of my theme (which we’ll explore later):

Optimizing PageSpeed - CSS Files from Plugins

I hope this gives you a sense of the rabbit’s hole that WordPress PageSpeed optimization quickly becomes. 

JavaScript Minification

While minifying and merging CSS is generally pretty easy, JavaScript tends to fail a lot when you try to do this, creating major, site-breaking bugs.

Interestingly, PageSpeed now offers complete zipped downloads of its compressed versions of your files which it doesn’t like.

Optimizing PageSpeed - Download optimized files

It listed ten of my JS files that it wanted me to fix:

Optimizing PageSpeed - Downloaded Files

For reference, here are more of Google PageSpeed’s minimization resources for HTML, CSS and JS. I also made use of Refresh SF, which provides easy web access to various compression tools.

Compressing and combining JavaScript can definitely create bugs, so I had to take things step by step. Using W3TC’s JS File Management, I minified and combined the seven JS files within the Construct theme:

Google PageSpeed - W3TC JS File Management

This didn’t allow me to address my plugins’ JS files or problems I was seeing with a mysterious unfindable externally hosted base.js file. Let’s move on to Render Blocking problems and then return to JS minification after.

Eliminating Render Blocking

If you have a large variety of files that need to be loaded to style (CSS) and activate (JS) the functionality of your web page, most browsers will slow down after four resources are requested in parallel. 

Here’s an example of the CSS render blocking complaint in PageSpeed:

Google Page Speed - CSS Render Blocking

While W3TC had combined many of them into its include.c46b63.css, the next three above were from my plugins.

Blogger Justin Tadlock offered some guidance explaining how to ask WordPress not to load the CSS files that my plugins had enqueued for loading. The answer is to deregister them and then load a combined file on your own.

Here’s my Table of Contents plugin enqueuing its JS and CSS files:

Following Tadlock’s suggestion, I deregistered my plugin includes in my theme’s functions.php, first the CSS—you have to find the references used by the plugin developer:

I manually created a combined CSS files with those three plugin stylesheets. Then, I asked W3TC to minify and combine that file into its own mega-stylesheet:

Google PageSpeed - W3TC Combine CSS

There is a major issue here in that when I update my plugins, I may need to update this combined CSS file and its accompanying JS files.

Here’s a blog post with some other approaches you can use for these challenges. 

Using Tadlock’s approach, here’s what the PageSpeed render blocking looked like afterwards:

Optimizing PageSpeed

I followed the same steps for JS files, just a bit more carefully. Gradually, my PageSpeed’s JS complaint for my site became fairly minor:

Optimizing PageSpeed - JavaScript Minify Results

However, as you can see below, it was also complaining about browser caching issues with JS files I couldn’t find links to in my codebase such as ad_status.js from Doubleclick.

Google PageSpeed - Leverage Browser Caching

Removing a Legacy YouTube Player Embed

Eventually, I figured out that both the JS minification issue and this caching issue were related to my use of an external YouTube video player.

While I was curious to try a small fix suggested here to prevent video from loading without user action, I decided to just remove the video from my home page slideshow.

It’s likely that the way my Construct theme embedded YouTube files was a legacy solution. YouTube’s HTML5 support may work a lot better now. Still, it’s kind of funny how a Google service impacts performance scoring of another Google service.

Removing the one feature on my home page that embedded a YouTube video solved a few problems:

Optimizing PageSpeed - Troublesome YouTube on my home page

Since I don’t want you to miss out on seeing my better half before I was corrupted by WordPress, I’ll include the video here. I used to be a nice guy.

Here’s what was happening:

  • The externally hosted s.ytimg.com base.js file it wanted compressed was generated by this YouTube video embed.
  • And the static.doubleclick.net/instream/ad_status.js was too. It took a while to track the location of this file down. The Safari developer console helped, with me seeing both base.js and ad_status.js within the YouTube frame (so deep in the PageSpeed improvement rabbit hole was I now that Alice introduced herself to me):
Optimizing PageSpeed - Safari Developer Console

Once the earlier JS changes were made and the video removed, the JavaScript minification problem resolved for my PageSpeed master:

Optimizing PageSpeed - Minify JavaScript Resolved

The browser caching error with Doubleclick shown below disappeared too.

Using Browser Caching

Now, I actually only needed to cache gpt.js and ga.js, two more externally hosted Google services:

Optimizing PageSpeed

This turned out to be quite a big obstacle and required a lot of complexity to fully resolve these issues. The best solution is to locally host a copy of Google’s scripts for Analytics and DFP and use cron scripts to regularly update them on your server. Alice began to get bored with me—hope you’re still following along.

I looked at other themes I use with the Google Analytics Plugin (Construct has settings for Analytics) and they didn’t address this either.

So, I made local copies of the scripts for Google Analytics and Google DFP, and shortly after, my browser caching was resolved in PageSpeed:

Optimizing PageSpeed - Local use of Google Scripts

Here’s more information from Google on Browser Caching, again a very deep technical resource without much guidance for WordPress administrators. 

Google could provide common groupings of its popular JavaScript files minified and combined to better support publishers’ PageSpeed. It would help too if they weren’t loading their files individually and obscurely in scripts.

Let’s briefly return to PageSpeed image size complaints before wrapping up.

Returning to Image Optimization

Google PageSpeed’s image suggestions can actually weaken the usability of your site. Here’s one example, a featured image I hosted on my home page. 

For my posts to appear in Facebook with a thumbnail image, the social network requires minimum dimensions of 200 pixels on its shortest side. My version is 281 x 200 (shown here slightly adjusted for Tuts+ requirements):

Jeff Reifman Featured Image on Home Page

And, here’s the version provided by PageSpeed in its zipped download:

Google Page Speed Recommended Jeff Reifman Featured Image on Home Page

You can see that the quality is even worse, but more importantly PageSpeed wants me to shrink the image to a dimension that Facebook wouldn’t accept to show in its posts.

Ultimately, I chose to leave my site with a handful of PageSpeed image optimization complaints, lowering my scores.

In Closing

After all of this work, where did my site end up?

My Final PageSpeed Scores

Mobile PageSpeed

The final PageSpeed scores included Mobile 70, showing some of the remaining complaints below:

Optimizing PageSpeed - Final Scores Mobile

Here are the image optimizations remaining:

Optimizing PageSpeed - Final Scores Mobile with Image issues

And here is a summary of all the passed rules:

Optimizing PageSpeed - Final Scores Passed Rules

Also, here are the final UX scores. Most sites don’t have big problems with these, so I didn’t address them today:

Optimizing PageSpeed

Desktop PageSpeed

The final Desktop score was 86, not bad:

Google PageSpeed Final Desktop Score

JavaScript is finicky. I was never able to successfully minify and combine those last two files into the first. Even leaving them uncompressed never worked. Working with themes and plugins is hard. It would have required several days of dedicated work to resolve this.

Here are its image file size complaints:

Google PageSpeed Final Desktop Score Image Complaints

Ultimately, optimizing my PageSpeed took a lot of time and effort and left my site vulnerable to future plugin and Google script updates. A lot of this work is quite confounding, detail-oriented and time-consuming. It’s also a bit crazy-making and mind-numbing. Thanks Google.

The PageSpeed of Other Major Sites

PageSpeed isn’t everything. Content matters too. Here are a few well-known sites and their PageSpeed. The results will surprise you.

John Gruber’s Daring Fireball

Daring Fireball (DF) is one of the fastest content-focused blogs. It promotes advertisers in a minimal way. The pages run light and fast. Gruber’s CMS is a customized version of Movable Type. The scores are just a tad better than my site. DF also generates a ton of revenue with minimal advertising.

Daring Fireball PageSpeed

The New York Times

Obviously a major news organization, they have terrible PageSpeed scores:

PageSpeed for New York Times

The Seattle Times

Astoundingly, our local rag with its awful advertisement and subscription bounce model is much worse:

Google PageSpeed - The Seattle Times

B&H Photo

A popular e-commerce site, B&H Photo, has a terrible mobile score and a desktop score just below mine:

PageSpeed BH Photo

Amazon

You might have heard of this company in my recent essay How to Make WordPress Sites Different by Geography—they sell a lot of stuff online. My PageSpeed scores are significantly higher than theirs:

PageSpeed Amazon

What’s Next?

In the future, I’ll be looking at a few more enhancements to improve my site’s PageSpeed:

  • Migrating to a new WordPress theme. Primarily, I’m looking for a cleaner, higher performing and responsive design with fast PageSpeeds.
  • Upgrading my server to PHP7. The upgrade promises nearly 2x performance improvements. It’s not simple to upgrade prior to the bundled Ubuntu release, but it’s not too difficult.
  • Upgrading my server to Varnish4. The upgrade requires some reworking of configuration files, and I’m unsure of its compatibility with W3 Total Cache, but I’m willing to give it a try.
  • Review my PageSpeed on all the pages of my site, not just the home page.

If I don’t migrate themes shortly, I’ll need to go implement that cron script to synchronize my self-hosted Google scripts for Analytics and DFP and figure out how to monitor plugin updates for JS and CSS changes. I might have to revert these specific PageSpeed gains, honestly.

If you have questions, please post them below. Or, you can contact me on Twitter @reifman. Please check out my Envato Tuts+ instructor page to see other tutorials I’ve written, such as my startup series (Building Your Startup With PHP).

Related Links


Source: Nettuts Web Development

An Introduction to Using JWT Authentication in Rails

With the advent of Single Page Applications (SPA) and mobile applications, APIs have come to the forefront of web development. As we develop APIs to support our SPA and mobile apps, securing the APIs has been a major pain area. Token based authentication is one of the most-favored authentication mechanisms, but tokens are prone to various attacks. To mitigate that, one has to implement ways to fix the issues, which often leads to one-off solutions that make tokens non-exchangeable between diverse systems. JSON Web Token (JWT) were created to implement standards based token handling and verification that can be exchanged between diverse systems without any issue.

What is JWT?

JWTs carry information (called “claims”) via JSON, hence the name JSON Web Tokens. JWT is a standard and has been implemented in almost all popular programming languages. Hence, they can be easily used or exchanged in systems implemented in diverse platforms.

JWTs are comprised of plain strings, so they can be easily exchanged in a URL or a HTTP header. They are also self-contained and carry information such as payload and signatures.

Anatomy of a JWT

A JWT (pronounced ‘JOT’) consists of three strings separated by ‘.’:

aaaaa.bbbbbbb.ccccccc

The first part is the header, second part is the payload, and third part is the signature.

The header consists of two parts:

  • The type of token, i.e. ‘JWT’
  • The hashing algorithm used

Continue reading %An Introduction to Using JWT Authentication in Rails%


Source: Sitepoint

From Zero To Appium: A How-To Guide For Configuring Appium With Android


  

If you are a web developer who cares about quality, most probably you have heard of Selenium and the advantages of using such a tool for test automation. Now, if you are a mobile developer, you might know how much harder it is to test your app due to the existence of different platforms, different OS versions and even variety of devices.

Imagine how great it would be to write your tests only once and run them on different platforms. If so, then maybe today is your lucky day, because I want to tell you about Appium, a tool inspired by the Selenium WebDriver that allows you to write tests against multiple platforms using the same API.

The post From Zero To Appium: A How-To Guide For Configuring Appium With Android appeared first on Smashing Magazine.


Source: Smashing Magazine

Kick-Start WordPress Development With Twig: Timber Image, Menu, and User

By now you have read about the basic concepts of using Twig through Timber, while building a modular WordPress theme. We’ve also studied block nesting and multiple inheritance with Twig, based on the DRY principle. Today, we are going to explore how to display attachment images, WordPress menus, and users in a theme with Twig through the Timber plugin.

Images in Timber

Images are one of the vital elements for any WordPress theme. In regular WordPress coding practices, images are integrated with PHP inside the normal HTML image tags. However, Timber offers quite a comprehensive way of handling the img (image) tag which is modular and clean.

There are images attached to the post’s thumbnail field. These can be easily retrieved via the Twig files by {{ post.thumbnail }}. It is just that easy!

Usage

Let’s get started with a practical example. Our single.php file looks like this:

Here, I’ve used the TimberPost() function for quite obvious reasons. This is used throughout Timber to represent posts retrieved from WordPress, making them available to Twig templates.

As the featured image is attached to the post data, we now need to retrieve it on the front end. So the Twig file for it, single.twig, will look like this:

On line #9 the code {{ post.thumbnail.src }} retrieves the post’s featured (thumbnail) image and displays it like this:

Images in Timber

You can use this code syntax to retrieve as many thumbnail images you want.

There is still a lot more which you can experiment on with these images when using Timber. For example, you can also resize them via:

By using the resize(), function, you can add new dimensions to the image where the first parameter is width and the second is height. If you want to scale the image proportionally then omit the height attribute. Now the syntax becomes:

The front-end displays the same image like this:

Resize image in Timber

If you want to explore more, then try the image cookbook.

Using TimberImage()

Consider a scenario in which a developer wants to fetch images via the image ID, or wants to display an external image via URL, etc. For such an extended approach, Timber offers a class, TimberImage(), to represent the images which are retrieved from WordPress.

Usage

Let’s take an example for our single.php file, which looks like this now:

This time, I’m using the TimberImage() class which takes the image ID 8 as its parameter. The rest of the coding routine is just the same. Let’s retrieve this image via the Twig file single.twig.

The value stored inside $context custom_img element, i.e. {{ custom_img }}, will retrieve the image via its ID to display on the front end like this:

TimberImage function in Timber

To retrieve the image via an external URL replace you can follow this syntax.

This time, instead of the image ID there is an external image URL which is being displayed on the front end like this:

TimberImage function with image URL

To explore some more features of this function, you can check the documentation.

Menus in Timber

Now, how would you go about rendering a WordPress menu with Twig templates? That’s a tricky thing to do. But, hold on! Timber provides you with its TimberMenu() class, which can help you render the WordPress menus inside Twig files as a complete loop. Let’s take a look at it. 

Usage

The entire concept of retrieving the menu items revolves around the menu object. There are two ways of defining its context. The first one is to make the menu object available on every page by adding it to the global get_context() function, as I did in the functions.php file. Secondly, you can add a particular menu by its ID for a particular PHP template.

Irrespective of the two methods, once the menu becomes available to the Timber $context array, you can retrieve all the menu items from it. But I prefer to define it globally. So go to the functions.php file and paste the following code:

So, here I’ve defined a custom function call add_to_context. Inside this function is some data that I want to be available at every PHP template via the get_context() function. On line #13 you can find an instance of TimberMenu() being passed against the element menu in the $data array. 

This will make a standard WordPress menu available to the Twig template as an object that we can loop through. The TimberMenu() function can take parameters like the menu slug or ID.

Let’s create a Twig template called the menu.twig file.

The above code runs a loop inside this Twig template. Line# 5 runs a for loop for every menu item and displays the title of every menu item in an unordered list. The loop runs till all the key-values pairs of the menu object are iterated and listed on the front-end.

I went ahead and included the menu.twig template in the base.twig template on line #11.

Let’s preview the back-end (Appearance > Menus) of my demo website where its menu contains two parent items and one child item. 

Sample menu

So, let’s take a look at a post page—since our single.twig extends base.twig, our menu will automagically appear on that page.

Menu at the top

You can see that at the top of our single post there is a menu with both the parent items inside it. 

What about the child menu items? Let’s update our menu.twig file to include the child items as well.

Lines 9 to 23 print the child menu items, if any. This time, the front end displays the child item of our first parent.

Menu with Child Items

For more details about TimberMenu(), check the documentation.

Users in Timber

Users can be retrieved from the WordPress database with the TimberUser() class. The class takes user ID or slug as arguments to retrieve the user.

As users or blog authors are associated with the WP posts, I’m going to use the code of single.php, which now looks like this:

Line #20 initializes the TimberUser() class and gets assigned to a context object element, i.e. user. Let’s display the author name via the Twig template.

My single.twig template has a new line of code at the end, on line #21.

The code fetches the author name of the current post and displays it on the front-end. You can use {{ user | print_r }} to see what else is available in the TimberUser object. 

author name displayed on the front-end

To read more about this class, refer to the documentation. You can find the code of this tutorial in the GitHub repo over on the ImagesMenusUsers branch.

Conclusion

This article wraps up the entire series. Throughout these four articles, I explored how to use Timber to integrate the Twig templating language in a WordPress theme. 

The final repository for this series can be found on GitHub with tutorial-specific branches:

You can consult the online documentation of Timber for more.

Go through this entire series and implement all the explained examples, and I bet you’ll enjoy Twig. Post your queries in the comment box below. You can also reach me out through Twitter.


Source: Nettuts Web Development

Freebie: Hotel And Spa Icon Set (55 Icons PNG, SVG)


  

Our daily routine can be quite challenging at times. The more roadblocks we experience in fulfilling the demands of our workplace, the more we look forward to a seamless holiday experience to break out from our everyday tasks. This wonderful hotel and spa icon set can help you to design a visually delightful holiday experience for the customers of your tourism clients.

Freebie: Hotel & Spa Icons (55 Icons PNG, SVG)

Designed by the team behind IconCrafts, this icon set consists of 55 carefully crafted vector icons. All icons are available as 48px, 64px and 128px PNG (+ @2x versions + sprites), as well as SVG files. The icons come in five styles different styles.

The post Freebie: Hotel And Spa Icon Set (55 Icons PNG, SVG) appeared first on Smashing Magazine.


Source: Smashing Magazine

Why JPEGs are like McDonalds Apple Pies (and SVGs are not)

Last week we looked at a simple, free SVG editor called Boxy SVG ( it’s here in case you missed it).

Let’s see where it takes us today. But first, here’s an idea…

SVG isn’t an image format – it’s more of a recipe

McDonald's hot apple pie

Baking pies

That makes it very different from all the pixel-based formats we’ve used in the past. Let me explain.

You could think of our classic pixel-based image formats -JPEGs, GIFs and PNGs – as being like those McDonald’s Apple Pies. Each comes packaged in precisely fixed amounts. You can’t ask the McDonalds serving staff to whip you up a ‘family-sized’ pie or to rustle up a ‘half-slice’ to have with your coffee. Well, technically, you can ask but you’ll get a strange look.

It’s a reasonable serving for one person, but if you need to share with 2, 3 or more people, you need to stretch your pie further – i.e. everyone gets less.

But SVG is like having a good apple pie recipe.

Baking pies

Baking pies

You hold the instructions to make as much or as little pie as you want.

Sure, there are numerical amounts written into the recipe – 8 apples, 4 cups of flour and so on. But if you need to feed twice as many people, you just double the measurements. If you want to feed half as many – just halve the numbers. It’s designed to scale.

And because you control how the pie is made, you can even ‘change things up’ a little and customize the basic pie recipe for different people’s needs. Nanna likes a handful of black currants in her pie. Your brother loves custard. Small, thoughtful changes to the original recipe are easy and valuable.

Of course, the ‘S‘ part in ‘SVG’ stands for ‘scalable’, and it’s part of what makes SVG so useful for the web. But ‘scalability‘ – by itself – doesn’t always mean ‘more usable’. Sometimes we need to change how our layouts are displayed. SVG can help us.

Making Charts with SVG

Here’s an SVG chart that I created using Boxy SVG. It shows the number of mentions of the phrase ‘Star Trek’ and ‘Star Wars’ in books since 1960 (data via Google NGRAM).

A simple chart made in Boxy SVG

A simple chart made in Boxy SVG

You might typically see this type of chart online as a JPEG or PNG – in fact, you can export it from Boxy SVG as a PNG if you wanted to.

Ok, so, why not make it a JPG and be done with it?

Reason #1: The File Size

  • The JPEG version is 47kb. (JPEG link)
  • The raw SVG version from Boxy SVG is 14kb (SVG link).
  • With a little tidying, I got it down to 10kb (SVG link).

The Boxy SVG chart isn’t perfect out of the box. View the source and you’ll see:

  • some extra empty TSPANs in the text
  • the extreme number precision makes numbers longer and more unwieldy than they need to be (tools like SVGO can fix this for you)
  • elements moved inside the editor tend to get transforms added to their original X & Y positions. Ideally any repositioning would be made to that original X & Y co-ordinate.

A little bit of find-and-replace resolves these issues in five minutes. Even with these small issues, the Boxy SVG is clearer and easy-to-read than anything else I’ve worked with.

Of course, either of the SVG files above will still be laser crisp at 2000px (if required) with no increase in file size. The JPEG certainly wouldn’t.

Still, internet speeds are fast – we’re not going to fight over 30kb between friends, are we?

Reason #2: SVG has Non-Scaling Strokes

This is an SVG trick that I only became aware of yesterday.

While it’s always handy to be able to squish down our images to fit it into a small screen, there’s a point where our linework legibility simply breaks down. Similarly, highly scaled-up image lines can become fat and oafish.

Vector-effect: Non-scaling stroke in action.

Vector-effect: Non-scaling stroke in action.

Unfortunately, that’s an unsolvable problem in our PNGs and JPGs. We just have to live with it.

Non-scaling Strokes

Continue reading %Why JPEGs are like McDonalds Apple Pies (and SVGs are not)%


Source: Sitepoint

7 Meditation Apps and Devices for Mindful Entrepreneurs

Stressed entrepreneur

[author_more]

Stress is a part of everyday life, especially if you have to deal with difficult clients, stare at a computer screen for several hours of the day, or constantly reply to emails — not to mention the often horrific commute to and from work during rush hour, and various other things you have very little control over.

Luckily, meditation can help reduce (or even stop) stress.

Meditation is a practice in which you learn to rest your mind and reach a state of consciousness that results in total clarity and calmness, usually achieved by sitting comfortably, closing your eyes, listening to ambient sounds and breathing deeply. You can meditate for as little as 10 minutes a day. Ironically, the main cause of the average entrepreneur’s stress (technology of course) can also help us find our zen. Let’s take a look at seven apps and gadgets that can help you meditate, a modern alternative to a practise that’s been used for thousands of years.

1. Calm

Calm

Calm is a meditation app that helps with sleep, relaxation, and mindfulness. It’s free to download via Google Play or the Apple App Store, and once you login via Facebook or e-mail you can start a beginners session called ‘7 Days of Calm’. Each session is only 10 minutes long. Perfect for busy entrepreneurs to use during lunch breaks or when stuck in traffic! If it works for you, you can subscribe for $9.99 a month or $39.99 a year.

2. Muse

Muse

Muse is a headband that measures brain signals while you meditate. Its seven calibrated sensors (two on the forehead, two behind the ears, three reference sensors) detect and measure the brain’s activity.

It connects to an app on your mobile device via Bluetooth and once connected, you’ll be taken through a tutorial on how to adjust it to fit so that it reads and monitors your brain signals effectively. Before every use, because your brain is different on a daily basis, you will complete a 60-second brainstorming task.

After de-stressing you with relaxing music, Muse offers feedback on your meditation session by converting your brain signals into wind sounds. Calm winds indicate that your mind was settled; winds become stronger when the brain is more active. After use, your progress is recorded and you’ll unlock new app features.

Are there any downsides? Maybe. It looks quite obvious that you’re wearing it, and it costs $249 (on Amazon) — if this doesn’t bother you, the reviews are averaging at four stars!

3. Spire

04-spire

Spire ($149) is a small stone-shaped activity and mindfulness tracker that fits easily on your waistband, making it ideal for those who are constantly on the move or need something they can take to work. It records your breathing and activity and conveys it on its corresponding app.

Spire displays your breath in real-time on your device screen, as if you were breathing on a mirror, and lets you know if you’re feeling stressed or lacking focus. Once it notifies you of your current state of mind, the app provides you with activities in order to achieve the best level of mindfulness.

Sadly it isn’t available for Android, but it’s coming soon!

Continue reading %7 Meditation Apps and Devices for Mindful Entrepreneurs%


Source: Sitepoint

Avoiding a JavaScript Monoculture

JavaScript, as a language, has some fundamental shortcomings — I think the majority of us agree on that much. But everyone has a different opinion on what precisely the shortcomings are.

Christoffer Petterson recently wrote that “JavaScript just needs to become a better language” — about the shortcomings of the JavaScript standard run-time, and how this creates a culture of micro-packages and polyfills.

In this related opinion piece, I’d like to challenge that point of view:

Shortcomings of the JavaScript language and run-times are not the fundamental reason we have micro-packages or polyfills.

While various shortcomings of the standard run-time library are the obvious, immediate reason for the creation of micro-packages, I’m going to argue that this point of view is actually obscuring a deeper, underlying problem.

As to opinions about the shortcomings of the language itself, or the standard run-times, it’s important to realize that every developer has a different background, different experience, different needs, temperament, values, and a slew of other cultural motivations and concerns — individual opinions will always be largely personal and, to some degree, non-technical in nature.

For me, the best answer to shortcomings of the language itself has been Typescript, but I understand that’s not everyone’s cup of tea. For one guy, it’s CoffeeScript, for another gal, it’s Dart, Scala, Go, Rust, and so on.

My point is this: the fundamental problem is neither shortcomings of the standard run-time library, nor is it any specific technical shortcoming of the language itself.

The real problem is our lacking willingness to embrace cultural diversity.

One Size Does Not Fit All

It seems there’s a thriving mass delusion that we can somehow make JavaScript the ideal language for everyone and every thing.

Initiatives such as ES6, while seemingly improving things, are actually a step in the wrong direction.

For instance, those who prefer classical inheritance may enjoy the addition of the class keyword, while others may reject it as conflicting with the idea of a prototypical inheritance model.

Again, this is all opinion-based, and due to the sheer number of developers who rely on this technology as their bread and butter, sub-communities and religiousness forms around patterns, anti-patterns, practices, de-facto standards, micro-packages, polyfills, frameworks, build-tools, etc.

Continue reading %Avoiding a JavaScript Monoculture%


Source: Sitepoint

10 Examples of 3D Printing Transforming Our Reality

3D printing has evolved over the last decade from a technology only accessible to big manufacturers to one that is achievable in the home office. It is becoming increasingly more affordable and offers a fast means of product creation. However, the ethics, legalities and moralities of 3D printing are becoming increasingly relevant as the speed of innovation surpasses regulation. Here are 10 forms of 3D printing that demonstrate that 3D printing will become as regular as other forms of manufacturing in the years to come.

1. Bioprinting in Health Science

3D printed ear

Credit: Wake Forest Institute for Regenerative Medicine

Researchers at North Carolina’s Wake Forest University have created a 3D bioprinter that can produce organs, tissues and bones that could theoretically be implanted into living humans. Researchers from Wake Forest University have created muscle, bone, and ear structures using plastic-like materials and living cells from humans, rabbits, rats, and mice. Amazingly, the living cells survived the 3D printing process. The researchers also successfully implanted their 3D-printed structures into rodents. If the technology works as well for humans as it does on rodents, doctors may be able to use a patient’s own cells to print them a new bone, muscle, or piece of cartilage one day.

This was proceeded by a printer that was able to print artificial skin. Various cell types were placed in the wells of an actual ink cartridge and a printer was programmed to arrange the cells in a pre-determined order. Currently, researchers are using an adapted version of ink-jet printing technology to enable on-site “printing” of skin for soldiers with life-threatening burns. In this technology, “skin cells would be placed directly into a print cartridge, along with essential materials to support them, and would be printed directly on the soldier’s wound at the site of the wound.”

The notion of a skull implant seems like something out of science fiction but last year doctors in China were able to save the life of a baby with hydrocephalus by 3D printing and implanting a titanium skull in three pieces. 3D printed titanium is strong, lightweight, and can be designed to perfectly fit the patient.

2. Drug Printing

The 3D printed drug, Spritam

Credit: Aprecia Pharmaceuticals

Recently US-based Aprecia Pharmaceuticals released the world’s first 3D printed drug, Spritam, a drug to treat seizures in epileptic patients. The printing comes from MIT produced technology using the company’s trademark ZipDose technology. Produced using technology by sandwiching a powdered form of the drug between liquid materials and bonding them at a microscopic level, the printed pills dissolve rapidly on contact with liquids.

3D drug printing is a huge step towards personalised medicine. Alteration of a pill’s surface area through printing means that the size, dose, appearance and rate of delivery of a drug can be designed to suit an individual. In the future this could mean on-demand drug-printing facilities at clinics, hospitals and pharmacies, or even in patients’ homes.

Continue reading %10 Examples of 3D Printing Transforming Our Reality%


Source: Sitepoint

Dependency Management with the Swift Package Manager

Swift’s journey into a fully fledged cross-platform language continues as it’s contributors focus on the version 3 release.

Any language that wants a long-term existence needs a way of adding functionality that doesn’t require the core developers to add every request. This is typically in the form of package or dependency management, and the Swift Package Manager (SPM) will be one of the many features added to Swift 3.

But something not being officially released has never stopped inquisitive developers experimenting in the past. So in this article I will introduce the SPM, show you how to install it and existing packages, and how to create your own.

Continue reading %Dependency Management with the Swift Package Manager%


Source: Sitepoint