Manchester WordPress User Group March
Running in a bit late, I caught Mike opening up discussing upcoming WordPress events.
WordPress Europe October https://2013.europe.wordcamp.org/
WordPress Sheffield http://wpsheffield.com/
A Manchester WordPress event is being planned for June and possibly there will be a contributor day the day after.
Also, more Contributor Days in Manchester may be on the way :)
In the meantime you can check out https://make.wordpress.org to help contribute.
If you're interested in contributing to the code, codeacademy is a great site to help you learn code and is worth checking out.
PHP North East https://phpne.org.uk/
PHP North West https://conference.phpnw.org.uk/phpnw14/
WordPress 3.9 is now in Beta 1
It's possible to download and try this out now, some of the new features include more theme customisation options and a gallery preview in the edit view.
Theme Customise Widgets:
- themes > customize - make changes and preview without going live, now it's possible to also preview widgets.
- These now show up in the editor so you have a better idea of how the gallery will look when published.
It's also possible to drag images directly into the editor, although this didn't seem to work when Mike demoed it, the joys of living life in Beta.
Media now supports video and audio playlists for HTML5 supported formats e.g. mp3, ogv, webm. Mike demoed this and looked great!
Philip Valentino On WordPress Optimisation
You can follow Philip on Twitter @philipvalentino.
Philip wearing a rather awesome t-shirt gave a great talk on WordPress Optimisation. It was a good overview for beginners and covered a wide range of topics. I'm sure if anyone didn't know much about optimisation, they'll now have plenty to be getting on with.
PDF download of Philip's slides are available here: https://mwug.info/2014/03/march-2014-meeting-notes/
Philip opens by giving a bad example of a current live site and shows how frustrating it can be especially on 3G waiting for a site to load.
Next up, a funny analogy relating cars to website speed.
We're lucky that today that there's lot of stats and research available regarding speed. For example how it can affect bounce rate.
In 2010 Google mentioned that speed will not only give your users a better experience but will help with rankings.
So many variables, from humans, applications (HAND - Humans Applications Networks Devices).
Crockford added that he used to think the browser was the most hostile programming environment ever devised, but then he found out about mobile programming.
India Internet traffic by type desktop vs mobile
Mobile Email stats: https://www.emailmonday.com/mobile-email-usage-statistics
So… if more and more people are viewing on mobile, how can you make your site accessible?
One way is to use a responsive theme. If you're choosing a WordPress theme you can quickly preview your prospective theme with https://www.responsinator.com/ and get a quick overview of how it will behave at different viewport widths.
80-90% of the end-user response time is spent on the frontend. Start there.
Some handy sites for testing and getting stats regarding your site's performance.
PageSpeed Insights: https://developers.google.com/speed/pagespeed/insights/
Web Page Test: https://www.webpagetest.org/
Bandwidth: Downloading jQuery 2.1.0, or 28.56KB takes 229ms to download on the worst mobile networks (1Mbps). 46ms to download on average mobile networks (5Mbps). 19ms to download on awesome mobile networks (12Mbps).
On average mobile networks take about 400 milliseconds before stuff starts arriving in your devices browser.
Further details: https://moz.com/blog/15-tips-to-speed-up-your-website
Some quick wins: Image optimisation - Image Optim / https://wordpress.org/plugins/wp-smushit/
Yoast WordPress SEO Plugin enables you to easily edit the
.htaccess file via an input box, then you can add in what you require, such as enabling gzip and caching for example
Here's a handy link for more on the
After you've done some optimisation, it's important to keep testing and measuring your performance increases and then look for more and keep going.
WordPress Plugin P3 Profiler can also help identify possible performance boosts.
Finally - examples of just how cheap mobile devices are becoming, and their potential to reach the remaining 5 billion people without them.
Mobile devices: https://www.pcadvisor.co.uk/reviews/mobile-phone/3504131/firefox-smartphone-hands-on-review/
Tablet devices: https://www.theglobeandmail.com/technology/canadian-makers-of-worlds-lowest-cost-tablet-aim-for-20-device/article17461367/
Google Analytics, look at what devices are hitting your site and write code accordingly, e.g. if you previously had code for IE8 and now no one is viewing your site with IE8, you can remove this code to help performance.
Mike WordPress Technical News
Back to some more WordPress 3.9 Beta 1 news.
"The load process in multisite got rewritten. If you notice any issues with your network, see #27003."
"We now use the MySQL Improved (mysqli) database extension"
"Library updates, in particular Backbone 1.1 and Underscore 1.6 (#26799). Also Masonry 3 (#25351), PHPMailer (#25560), Plupload (#25663), and TinyMCE (#24067)."
TinyMCE has had a major update and is now in version 4.0. There's an upgrade guide over at https://www.tinymce.com/wiki.php/Tutorial:Migration_guide_from_3.x.
Tom J Nowell On Setting Up Vagrant
You can follow Tom on Twitter @Tarendai.
Next up is Tom talking about how to get started with Vagrant and some of the benefits it brings.
Tom's slides are available here: https://mwug.info/2014/03/march-2014-meeting-notes/
Tom goes over some of the various ways he's previously updated a site.
Working live on the server. (eeeek, nooo!!)
Working in Dreamweaver which would then FTP the code to the server.
Then Lamp, Mamp, Xampp setting up Apache and MySQL locally mimicking the live server, then manually FTPing or taking it a step further and using ssh.
Using Lamp, Mamp, Xampp can however cause issues. For example if you're on Mac using OS X and you're then going to work with someone who is using a Windows machine there's potentially going to be discrepancies. Also if someone doesn't already a development environment set up, it can take a while to get set up and passing large VB disk images around.
- Install Virtual Box
- Download / Install Vagrant
- Run the following terminal commands:
$ vagrant plugin install vagrant-hostsupdater (for sorting out your hosts file)
$ vagrant plugin install vagrant-vbguest
- Grab VVV - Varying Vagrant Vagrants https://github.com/Varying-Vagrant-Vagrants/VVV
I added this to
/Applications/Vagrant, but I'm not sure if there's a place where it should live.
git clone [email protected]:Varying-Vagrant-Vagrants/VVV.git
VVV is now your web environment.
- Go to the VVV (should this be www???) folder in the terminal:
$ vagrant up --provision
You should now have a server starting up for the first time:
$ cd /Applications/Vagrant/VVV-master
- Some useful Terminal commands:
vagrant up vagrant halt vagrant destroy vagrant ssh vagrant status
- Now you should be able to open up a browser and access:
This should bring up a screen showing you what vagrant goodies you have installed.
- To set up a new site
Add a folder in WWW folder.
vvv-nginx.conf file (https://github.com/Varying-Vagrant-Vagrants/VVV/blob/master/config/nginx-config/sites/local-nginx-example.conf-sample).
vvv-hosts file with your hosts
(you can also update your permissions so you don't have to keep adding your password)
- After you've done that
[I added a vvv-hosts and nginx.conf file in a subfolder, but after restarting
https://test.dev went to
- What about sites that already in Mamp / Xampp?
This file gets ran when vagrant provisions itself.
(p.s. nginx is pronounced Engine X - https://nginx.org/en/)
vvv-init.sh may contain things such as:
wp core download
Oh noes… I got an error
$ vagrant up --provision
Fortunately I found an easy fix running the following command.
$ sudo /Library/StartupItems/VirtualBox/VirtualBox restart
And I'm now all up and running and looking forward to seeing what I can do with it.
After the meetup I also spoke to Jenny who mentioned a stylesheet analysis tool that looks interesting:
This weekend I've just got back from @edgeconf more on that soon :smile:
Browse by category:
- case study4
- chrome dev tools4
- clojure overtone2
- dev tips1
- raspberry pi1
- responsive web design1
- web development2