IoT, Code, Security, Server Stuff etc

Views are my own and not my employer's.

Personal Development Blog...

Coding for fun since 1996, Learn by doing and sharing.

Buy a domain name, then create your own server (get $25 free credit)

View all of my posts.

and

The case of the overheating Mac Book Pro and Occam’s Razor

by

Thank You William of Ockham (1287 – 1347) who coined the term “Ockham Razor” (“among competing hypotheses, the one with the fewest assumptions should be selected“) has helped my overheating Late 2012 Mac Book Pro and solve heat problems by removing dust, installing fan control software and re-applying thermal paste.

I knew summer was coming (Thanks to Troy Hunt), I was already accepting high temperatures on my Development laptop.

My Mac Book Pro was reaching 95~104c right after bootup and stayed there. The Intel processor (2.6Ghz i7) was doing a fantastic job at throttling the core down to protect the processor. At this point, I thought my laptop was powered by a Fitbit processor (everything was super slow).

Heat

I was using the TunaBelly temperature monitor software to see temps.

Cooler

I checked the Tunabelly Software website and found I was running an older version of the software (App Store version). I can now download a new version (direct from the author called TG Pro) and upgrade to a TB Pro ( see here ).

Old version (left screenshot below) and the new version (right screenshot below).

Old New

The new version has a nice drop-down menu (with stats).

Bar

TG Pro even has notifications when temps get too high 🙂

Notification

Why the High Temps

I had assumed that this heat was caused by extra CPU activity in the recent Apple High Sierra update (or Summer). I had noticed OSX locking up after I installed High Sierra. I had assumed that OSX 10.3 (High Sierra) was now pushing the CPU harder like Metal was pushing Apple GPU’s harder.

This morning the higher fan speed did not seem to help so I sat my Mac under a split system air conditioner (with no luck).

Air Con

Even with the split system air conditioner running (and pointing at the Mac), the Mac was still overheating.

I was a boiling frog in my own pot of assumptions. This bad assumption sent me down the wrong (potentially expensive path (new machine)).

My brain dived into solutions mode and concocted that High Sierra was crap and I needed a new iMac Pro with advanced cooling (the problem is Apple have not released them yet). The image of the new Apple iMac Pro (below) is really here just so I can drool at the new iMac Pro insides: https://www.apple.com/au/imac-pro/

iMac Pro

Simulated cooling in the new iMac Pro. **Mmmm Reality distortion field.**

After realising the high fan speeds and the air conditioner was no longer working I decided to open the laptop and check for dust. I had always assumed that because I don’t smoke, don’t let cats near the laptop and have a clean laptop area that dust was not the issue (hint: I was wrong).

Warning: Opening your laptop will void the warranty and you will probably kill it. You will need special screwdrivers, you will need to carefully follow anti-static procedures etc. I take no responsibility for your actions opening your devices.

P.S Watch Louis Rossman from https://www.rossmanngroup.com/ if you want to learn how to do things the right way. Here is a sample Louis Rossmann video (possibly NSFW) where he fixed a board (debugging).

Experience

I have pulled apart and modified heaps of PC’s before so I am comfortable opening up electronics and computers.

I have cut PCI-E 16x circuits down to PC’IE-8x to make them fit a server mainboard. Do not play with the insides of computers or electricity unless you know what you are doing period.

PCIE-8

I have setup watercooled PC’s and dealt with water leakages in the search for silence.

Water Cooling

Ok enough warnings.

Is Dust an Issue?

It seems I have ignored Ockham Razor (“among competing hypotheses, the one with the fewest assumptions should be selected”). Time to crack my laptop open and clean away any dust, Although I don’t have before photos of the dust (it was rather hidden near the exit port), dust was clearly the cause of the high temps.

It is not as if I am editing 4K videos here.

Troubleshooting: Start with the basics.

  • I should have considered dust inside the laptop,
  • I should have considered the old thermal paste needed replacing.

After Cleaning

After a quick clean with the kids paint brushes, tweezers, pin, the wife’s makeup brush and little rocket camera cleaning thingy I think I am finished.

After Cleaning Photos (Click for higher resolution)

fyi: These photos are just to show off my Late 2012 Mac Book Pro insides after cleaning.

fyi: SSD on the bottom left, memory in the middle and the heat pipe at the top of the photo.

Mainboard 01

fyi: SSD at the bottom, Fan and Heatsink near the top. The CPU fan was mostly clear and not an obvious overheating issue.

Mainboard 02

Most of the dust was on the heatsink at the end of the heat pipe (at the top of this photo, about 1/3 was blocked). The CPU fans had a slight coating of fine dust that I removed.

fyi: The heatsink below on the heat pipe was overheating due to 1/3 of the output duct being blocked.

Mainboard 03

fyi: This area (above) was rather dusty and possibly overheating.

Mainboard 04

Memory to CPU interconnect area (now clean).

Mainboard 05

fyi: Battery connector, battery power converter and fan.

Mainboard 06

Each primary air intake duct is now clean and free.

Removed Dust (and tools)

I removed this much dust from each of the fan’s outputs. The dust was mostly around the heat pipe area. The dust appears to be the same fibre as the protective case (Green Smart Neogreene case, that I slid the laptop into to protect it). This was not a lot of dust but was enough to block airflow, I will now clean my Mac Book every spring.

Dust and Tools

When I started up the laptop with the base on temps where better.

Conclusion

CPU Temperatures are about 40c cooler, GPU is about 35c cooler and CPU area is about 15c cooler. My Mac Book is no longer overheating and handles high CPU demands again without thermal throttling

Cooler

Here are idle and load temps with the older Tuna Belly Temperature Monitor (fyi: I now use the newer TunaBelly Software TG Pro temperature Software) and output from the Intel Power Gadget Utility.

Benchmark

As a precaution I have I configured TG Pro to Auto Boost fan speeds. This has helped keep the high temperatures under control (when they go above 80c).

fyi: TG Pro also allows you to set your own ramps in fan speeds, email alerts, sounds etc (review coming soon).

Auto

Summary

In future, I will ask myself what the simplest possible problem is (Occam’s Razor or use Rubber Duck Debugging) instead of dreaming up problems/solutions and yes Apple computers need maintenance too.

Hope this helps someone.

UPDATE After 1 week

Temperatures have crept back up with the heatwave in Australia. The CPU is now in the high 90’s again. I am now solely using the TG Pro software to mange fan speeds until the new machine. Sadly Apple deliver quiet computers over cool ones so I’ll install TG Pro on all future machines.

Auto

Another Thought

Should the thermal paste be replaced? If this was a PC I would have done this already.

I have ordered some thermal paste and will apply that to the GPU and CPU soon and update this post.

https://www.pccasegear.com/products/33322/thermal-grizzly-kryonaut-thermal-grease-1g/

I will try this when it arrives.

I could not wait and I did remove the stock thermal paste and applied some old (10-year-old) Vantec paste I had that was still good. I did have some Arctic Silver 5 (5x tubes) but it was 10 years old and gummy. The best paste I had was 1 tube of white silicone Vantec paste I had that came with a past PC heatsink. It was still the right consistency, not separated and spreadable.

Always test thermal paste and write the purchase date on the paste when your order i (it does go bad).

Thermal Compound

Removing my heatsink was easy (with the right screwdrivers) on my Mid 2012 MPB 15″ Retina. Consult ifixit.com or online guide to open your mac.

I removed these screws.

Screws

I removed the stock Mac Book heat spreader to reveal a terrible application of Apple stock thermal paste. The paste was very dry and the CPU die was not fully covered anymore.

Stock Paste

This was the paste under the heat sink. Dry and flakey.

This is the thickness of the MBP heatsink.

heatsink

I cleaned the old paste off the Geforce 650M GPU die.

Cleaned the GPU

I cleaned the Core i7 2.6Ghz CPU die too.

CPU Die

This is the size of the MBP heatsink.

MBP Heatsink

The Heatsink is not very thick.

Thickness

This was the cooler on the last Windows PC I built.

PC Cooler

I cleaned the old paste off the heatsink and applied the new (old) Vantec silicone paste using a new application method mentioned here. I will lift the heatsink in 1 week (when the new Grizzly compound arrives) and see if this new method is ok over the tried and tested grain of rice size dollop in the middle of the die.

I clean the base of the heatsink too

I reassembled the laptop and the results seemed to drop the CPU temps to 20c above ambient air temps. My CPU is no longer sitting in the high 90’s in the non-air-conditioned Aussie summer 🙂

I get the usual high CPU temp spikes but the temps quickly fall back down again.

Ambient temps are higher today (compared to past screenshots) so direct comparisons cannot be made.

Temps Now

I will wait for my order of Thermal Grizzly Kryonaut Thermal Grease 1g arrives and update this post.

Update: Applied Kyronaut – Ultra High-Performance Thermal Grease

Kyronaut - Ultra High Performance Thermal Grease

7mm of thermal grease

6mm of thermal grease

Old Silicone Grease Removal.

Old Silicone Grease Removal

I used this application method

Results

16c above CPU Proximity Temp at idle 🙂 The Silicone grease was 19c above ambient temps.

Results

Conclusion

I have no doubt the more aggressive TG Pro fan profiles and the Grizzly thermal grease application has brought life back to my old laptop. Idle temps are lower and when the system is pushed to high activity temperatures fall much sooner.

2018 Update

OMG, Apple still has NOT fixed the cooling on the Mac Book Pro (unless you plan to run it in a freezer)

I will never buy another Apple Mac Book Pro unless they solve the cooling issues.

Pro = Professional (not ProThetic)

Donate and make this blog better

Ask a question or recommend an article

[contact-form-7 id=”30″ title=”Ask a Question”]

Revision History

v2.0 Goodbye Apple, 2018 update

V1.9 Not editing 4K videos

v1.8 Applied Kyronaut – Ultra High-Performance Thermal Grease

v1.7 Applied old thermal paste information (before good thermal paste arrives).

V1.6 Added YouTube video

V1.5 Ordered some thermal paste.

V1.4 TG Pro, update, simulated cooling photo.

How to upload and download files to a server with sftp (over the SSH protocol)

by

I have blogged about http://c9.io before and how it makes managing a remote Ubuntu server easier. Recently AWS acquired C9 and integrated it into AWS. This has triggered me to find a more open/free way to connect to my servers. I like AWS but I can tell that C9 will someday block you from talking to non-AWS servers.

C9 Aquisition

C9 on AWS: https://aws.amazon.com/cloud9/?origin=c9io

C9 Aquisition: https://c9.io/announcement

I have blogged about connecting to an AWS EC2 instance with C9 (before AWS acquired C9), The quickest way to set up a scalable development IDE and web server when I was using Digital Ocean Servers, How to buy a new domain (dedicated server from digital ocean) and add an SSL certificate from NameCheap but when I moved to Vultr serves I decided to ditch C9 and save $9 a month.  I got used to setting up an SSH connection, using rmate to edit remote files locally with Sublime and SSH’ing into the box with vSSH on OSX but nothing replaced the C9 file management experience.

C9 was a good IDE (but recent price hikes and AWS purchase have made me cautious).

C9

Uploading files without C9 to Ubuntu

Uploading files from an OSX laptop to a remote Ubuntu server is possible with the SCP command

Server Actions (to upload the old way, with scp)

There has to be a better way

I have used the Forklift 3 program before (my review here) and in recent google searches, it was suggested that Forklift best SFTP program on OSX. Yay. This unix.stackexchange.com thread mentions the difference between SFTP and SSH.

Below are the steps to use SFTP in Foftlift 3 on OSX to connect to a Vultr server (you could use Digital Ocean). Ensure you have a working SSH connection setup from your server to your local OSX.

Setting up an SFTP Connection in Forklift 3

Read my Forklift 3 guide here first.

Update your Forklift to the latest version.

Add a Favorite in Forklift 3

Add Favorite

Name the connection

Name the connection

In Forklift edit the connection

Edit

Specify SFTP and your servers working SSH username and password, and “/” folders

Settings

Save.

Double Click the entry to connect to your server.

Connected

To upload or download files with Forklift over SFTP, simply drag and drop.

Upload

Simple

Upload

You can now use Forklift to navigate folders, delete files, set remote file permissions all from a GUI. You can still use SSH CLI and or Sublime.

Quik Edit works too.

Quick Edit

Nice, this gives me a convenient GUI way to upload, download and edit files instead of via CSP/SSH/CLI.

Now is there an SFTP plugin for Sublime?

More to come soon.

Donate and make this blog better

Ask a question or recommend an article

[contact-form-7 id=”30″ title=”Ask a Question”]

Revision History

v1.0 Initial Draft

Speeding up WordPress with the ewww.io ExactDN CDN and Image Compression Plugin

by

Below is my quick blog posts on using the EWWW IO ExactDN CDN plugin in WordPress to set up an ExactDN (Global Dis.cotribution Network (CDN)) to distribute images to my site’s visitors and shrink (optimize) images in posts.

I have blogged before on speeding up WordPress that has involved moving servers away from CPanel domains to self-managed servers (e.g on Digital Ocean or Vultr), using Lazy Load image plugins like BJ Lazy Load, Optimize images automatically in WordPress with EWWW.io and scaling and moving servers closer to your customers.

For the best performing VM host (UpCloud) read my guide on the awesome UpCloud VM hosts (get $25 free credit by signing up here).

Today I am going to set up the https://www.ewww.io/resize/ ExactDN (CDN) delivery network. I am paying for this myself (and this is an unbiased review).

FYI: I use Ubuntu servers and not Windows.

Know your starting point. 

“If you fail to plan, you are planning to fail!” – Benjamin Franklin

In my original post about Speeding up WordPress, I used the webpagetest.org site to test my sites response times, I was getting an embarrassing 21 seconds load time and 6 second first-byte time. I have worked to speed up WordPress by moving WordPress to a self-managed server (away from CPanel), used the BJ Lazy Load plugin and the awesome ewww.io image optimize plugin, now I get about 4-5 seconds.

I am hoping adding a CDN will make things faster. My blog is delivering over two-thirds images, perfect for a CDN, this is why I am trying this out.

Image type cdn

TIP: Check where your customers/readers are located, and how many are New versus Returning customers? Do you need a CDN to deliver content (Images) that are closer to your customers/readers or do you need to move your web server somewhere else?  The more you know the more you can help them. Worst case you will be supporting a positive experience (and potentially turning a one time visitor into a returning visitor).

I looked at my Google Analytics data to see where my visitors are. Whether good or bad, they are all over the world (Hello)?

World

Other data is available in Google Analytics.  I can see the last few years growth is growing and I am getting more returning visitors, now is the time to ensure my site is ready for more traffic and returning visitors.

Data

Note: The fall in traffic in the Audience overview (right-hand side of the left image) is the unfinished month (not a reader fall off).

Personally, I set a goal to have a high page bounce rate of 90% be way lower (at present I am at about 80% and falling (good) and my page read time has gone from 40 seconds to 1 minute 40.  Every bit you can do will help create a positive experience and help your visitors. I can see from the data above the content is being read, I am building returning visitors and they are geographically spread out. A CDN will be great. After you know where your visitors are it is good to know the times of day that your visitors are hitting your site. Lucky for me it is spread evenly over a 24 hour period.

Data Quantity

FYI: My servers outgoing data (last 30 days), not huge but BJ LazyLoad and image optimization may be helping.

Outbound

Traffic Forecast

Do you know the forecasted growth of your website?

Site Growth

Measure Before Optimizing

Before I started to optimize my WordPress site (hosted on a shared CPanel server) I had the following Web Page Test score. I tested from Singapore as that’s was where my server was originally (and the closest to me).

TIP: Read more about Performance, First Byte, Start Render and Complete scores at my blog post here.

Web Page Performace Test Results (Before Optimizations):

  • Load Time: 23.672s
  • First Byte: 6.743s
  • Start Render: 11.8300s
  • Speed Index: 15024
  • Requests: 132/164 (Document complete v Fully Loaded)
  • Bytes: 3,346KB/3,454KB  (Document complete v Fully Loaded)

Quick Web Page Performace Score Card (Before Optimizations):

  • First Byte: F (I should have captured the subscores)
  • Keep Alive Enabled: F (I should have captured the subscores)
  • Compress Transfer: F (I should have captured the subscores)
  • Compress Images: A (I should have captured the subscores)
  • Cache Static Content: X (I should have captured the subscores)
  • Effective use of CDN: X (I should have captured the subscores)

My initial scores were bad across the range of tests (before optimisations). On the upside, I was manually compressing images with a tool on my desktop before uploading images and this showed an “A” but this scorecard overall was really bad.

Here are the results after Quick Optimizations (EWWW.io image compress, moved the server, reorganizing the site and Lazy Load Images)

Now I get these results after speeding up my site (after using the EWWW.io image resizing, reorganizing the site, minifying, lazy load images, moving servers etc.).

Web Page Performace Test Results (After Simple Optimizations):

  • Load Time: 8.823s (down 14.849s)
  • First Byte: 3.5533s (down 3.1897s)
  • Start Render: 5,4800s (down 6.35s)
  • Speed Index: 5594 (down 9430)
  • Requests: 73/76 (Document complete v Fully Loaded) (down 59/88)
  • Bytes: 848KB/855KB  (Document complete v Fully Loaded) (down 2,498KB/2,599KB)

Quick Web Page Performace Score Card (After Simple Optimizations):

  • First Byte: F (I should have captured the subscores)
  • Keep Alive Enabled: A (I should have captured the subscores)
  • Compress Transfer: A (I should have captured the subscores)
  • Compress Images: A (I should have captured the subscores)
  • Cache Static Content: B (I should have captured the subscores)
  • Effective Use of CDN: X  (I should have captured the subscores)

Tested my pagespeed tests

Even at 4 seconds web page “First Byte“, this is considered not good. My brain says I want sub 1 second, I doubt this is achievable with WordPress over thousands of miles away with SSL (read here about scalability).

I know https and non-geographically favourable servers add half a second to data. SSL will add processing overheads and latency period. If you only want speed don’t setup SSL but if you want SEO and security then setup SSL.

locationlocationlocation

WebPageTest.org test reveals there is no effective use of Content Delivery Networks (CDN) on fearby.com (that’s why I am about to install EWWW.io ExactDN).

ExactDN (Content Delivery Network)

I did try and set up a number of caching and CDN plugins in the past (e.g Max CDN, W3 Total Cache, WP Fastest Cache, Cache Enable, WP Rocket, WP Super Cache, etc.) but they either made results worse or were impossible to set up.

Now that EWWW.io has a CDN let’s give that a go.

What is EWWW.io’s ExactDN?

You can read more about EWWW.io’s two-pronged approach to delivering one plugin to A) “compress images” and B) “add a Content Delivery Network (CDN)” here: https://ewww.io/resize/

What is ExactDN

Ensure you read up about EWWW.io’s ExactDN here: https://ewww.io/resize/ . If you have not used EWWW.io check out my review of the EWWW.io image compression plugin here first.

Pre Signup

Purchasing and Installing ExactDN Exact DN

Login to your EWWW.io account (or signup then log in).

Signin

FYI: If you have used the Optimise images automatically in WordPress plugin from EWWW.io plugin before, then you will see past purchases here.

Signed in

Now you can go back to the EWWW.io ExactDN product page (https://ewww.io/resize/) and purchase a subscription (Make sure you are logged in with an EWWW.io account before you purchase ExactDN).

Pre purchase

I purchased an ExactDN monthly subscription for $9.00 monthly (with a $1 signup fee for the cloud compression service).

Order

Purchase confirmation screen.

Order

Post-purchase, I was advised to find my “Site Address (URL)” in WordPress and add it to EWWW.io Manage Sites screen.

Add site to the plugin

I now noticed I had a CDN for my domain ( fearby-com.exactdn.com ). Nice.

CDN Site Created

EWWW.io said to tick the CDN option in the Image Resize area of the EWWW.io plugin. But before I do that I  will update WordPress Core and WordPress Plugins before enabling the ExactDN as they are out of date.

Update

TIP: I update WordPress Core and WordPress plugins via command line (my guide here).

Backup WordPress (just in case)

It is always a good idea to backup your website, I logged into my Ubuntu server and checked the size of my site before backing it up.

I copied the website folder (from “/www/” to “/www-backup”)

I confirmed the copied folder size (same, good)

I dumped all databases with the MySQL dump command

While I was there I compress the SQL backup files (text files)

Checking the CDN Status

I checked the DNS replication for fearby-com.exactdn.com with this DNS checker. It’s setup and ready to go across the globe 🙂

A quick CNAME check reveals its upstream provider is fearbycom-8ba8.kxcdn.com. Keycdn.com have been around since 2012. It is great that EWWW.io has paired with keycdn and included their image compression magic in a single WordPress plugin.

Configuring the EWWW.io plugin in WordPress.

Before you enable the CDN below do check the https://www.whatsmydns.net/ and see if your CDN has replicated around the world (Australia can be a bit slow at DNS replication from time to time). Do wait at least 10 minutes before proceeding.

Click the settings in your EWWW Image Optimizer Plugin.

Configure

Now click the Resize Settings tab and click Enable CDN in the EWWW Image Optimizer plugin screen.

Enable Exact DN

Don’t forget to click Save Changes

Save

Testing the CDN

https://www.webpagetest.org NOW reports that my site is using a CDN 🙂

FYI: I have always used webpage test from Singapore and I have done the same here to compare apples to apples.  Singapore is not a good test location in Australia (my server is in Australia) and it is 200ms away and the added layer of SSL adds latency to the connection (read here). This is a real-world test though (worst case).

CDN's Used:
fearby.com : 
fearby-com.exactdn.com : KeyCDN
fonts.googleapis.com : Google
fonts.gstatic.com : Google
static.addtoany.com : Cloudflare
www.googletagmanager.com : Google
pagead2.googlesyndication.com : Google
www.youtube.com : Google
adservice.google.com.sg : Google
adservice.google.com : Google
googleads.g.doubleclick.net : Google
www.google-analytics.com : Google
s.ytimg.com : Google
stats.g.doubleclick.net : Google
fearby-com.disqus.com : Fastly
ssl.google-analytics.com : Google

FYI: https://www.webpagetest.org does want other (all) static content to be on a CDN to give a higher score than 42 out 100, sorry I did not get a subscore before enabling the CDN.

I was expecting a green A here for CDN but Webpage Test has given me more items to investigate to ensure WordPress plugins are also fast (minify or move to CDN). It appears WordPress includes are my next target for optimizing.

Web Page Test indicates the following WordPress assets should also be in CDN.

FAILED - https://fearby.com/wp-content/plugins/youtube-embed-plus/styles/ytprefs.min.css?ver=230d722825ddde2688088d563a906075
FAILED - https://fearby.com/wp-content/plugins/simple-social-icons/svgxuse.js?ver=1.1.21
FAILED - https://fearby.com/wp-content/plugins/youtube-embed-plus/scripts/ytprefs.min.js?ver=230d722825ddde2688088d563a906075
FAILED - https://fearby.com/wp-content/plugins/add-to-any/addtoany.min.js?ver=1.0
FAILED - https://fearby.com/wp-content/plugins/crayon-syntax-highlighter/js/min/crayon.min.js?ver=_2.7.2_beta
FAILED - https://fearby.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1
FAILED - https://fearby.com/wp-includes/js/jquery/jquery.js?ver=1.12.4
FAILED - https://fearby.com/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=230d722825ddde2688088d563a906075
FAILED - https://fearby.com/wp-content/themes/genesis/lib/js/menu/superfish.args.js?ver=2.5.3
FAILED - https://fearby.com/wp-content/plugins/crayon-syntax-highlighter/css/min/crayon.min.css?ver=_2.7.2_beta
FAILED - https://fearby.com/wp-content/themes/genesis/lib/js/skip-links.js?ver=2.5.3
FAILED - https://fearby.com/wp-includes/js/comment-reply.min.js?ver=230d722825ddde2688088d563a906075
FAILED - https://fearby.com/wp-includes/js/hoverIntent.min.js?ver=1.8.1
FAILED - https://fearby.com/wp-content/themes/genesis/lib/js/menu/superfish.js?ver=1.7.5
FAILED - https://fearby.com/wp-includes/js/jquery/ui/tabs.min.js?ver=1.11.4
FAILED - https://fearby.com/wp-content/themes/news-pro/js/global.js?ver=3.2.2
FAILED - https://fearby.com/wp-content/themes/news-pro/js/responsive-menus.min.js?ver=3.2.2
FAILED - https://fearby.com/wp-includes/js/jquery/ui/core.min.js?ver=1.11.4
FAILED - https://fearby.com/wp-content/themes/news-pro/style.css?ver=3.2.2
FAILED - https://fearby.com/wp-includes/js/jquery/ui/widget.min.js?ver=1.11.4
FAILED - https://fearby.com/wp-content/themes/news-pro/js/jquery.matchHeight.min.js?ver=3.2.2
FAILED - https://fearby.com/wp-content/plugins/contact-form-7/includes/css/styles.css?ver=230d722825ddde2688088d563a906075
FAILED - https://fearby.com/wp-content/plugins/youtube-embed-plus/scripts/fitvids.min.js?ver=230d722825ddde2688088d563a906075
FAILED - https://fearby.com/wp-includes/js/wp-embed.min.js?ver=230d722825ddde2688088d563a906075
FAILED - https://fearby.com/wp-content/plugins/bj-lazy-load/js/bj-lazy-load.min.js?ver=2
FAILED - https://fearby.com/wp-content/plugins/disqus-comment-system/media/js/count.js?ver=230d722825ddde2688088d563a906075
FAILED - https://fearby.com/wp-includes/js/wp-emoji-release.min.js?ver=230d722825ddde2688088d563a906075
FAILED - https://fearby.com/wp-content/plugins/wp-seo-html-sitemap/style.css?ver=230d722825ddde2688088d563a906075
FAILED - https://fearby.com/wp-content/plugins/simple-social-icons/symbol-defs.svg
FAILED - https://fearby.com/wp-includes/css/dashicons.min.css?ver=230d722825ddde2688088d563a906075
FAILED - https://fearby.com/wp-content/themes/news-pro/images/favicon.ico
FAILED - https://fearby.com/wp-content/plugins/genesis-tabs/style.css?ver=230d722825ddde2688088d563a906075
FAILED - https://fearby.com/wp-content/plugins/simple-social-icons/css/style.css?ver=2.0.1
FAILED - https://fearby.com/wp-content/plugins/add-to-any/addtoany.min.css?ver=1.14

It would be a huge effort trying to read and keep static plugin and theme related files in a CDN. I’ll ask the EWWW.io developer to see if this is possible in a future version (that would be nice). The developer did promptly point me here to opt into using the CDN to deliver CSS, JS etc.

Is that it? It can’t be that simple!

I can load my site at https://fearby.com and my images load from https://fearby-com.exactdn.com 🙂 I am impressed, blog posts are now loading images from the CDN network and I did not have to edit posts. I did have to subscribe to ExactDN and tick a checkbox in WordPress though.

Here is a sample image (my largest) from this blog post.

https://fearby-com.exactdn.com/wp-content/uploads/2017/10/Infographic-So-you-have-an-idea-for-an-app-v1-3.jpg?strip=all&quality=60&ssl=1

fearby.com WebPAGE TEST Results – Singapore

Web Page Performace Test Results – Singapore (After Setting up the EWWW.io ExactDN):

  • Load Time: 4.177s (down 4.646s from previous optimizations ((My Original load times were 23.672s))
  • First Byte: 2.240s (down 1.3133s from previous optimizations (My Original First Byte: 6.743s))
  • Start Render: 2.800s (down 2.68s from previous optimizations (My Original Start Render: 11.8300s))
  • Speed Index: 3009 (down 2585 from previous optimizations (Speed Index: 15024))
  • Requests: 67/68 (Document complete v Fully Loaded) 
  • Bytes: 535KB/538KB  (Document complete v Fully Loaded)

Quick Web Page Performace Score Card – Singapore (After Setting up the EWWW.io ExactDN):

  • First Byte: F (I should have captured the subscores). 
  • Keep Alive Enabled: A (I should have captured the subscores).
  • Compress Transfer: A (I should have captured the subscores).
  • Compress Images: A (I should have captured the subscores).
  • Cache Static Content: B (I should have captured the subscores).
  • Effective Use of CDN: X (I should have captured the subscores). plugins now need to be on a CDN.

The Web Page Test site does give detailed scores and recommendations if you scroll down or click the score car (A-F). Do read the recommendations and see what you may need to do next.  I am happy that I now have a CDN via EWWW.io. Clicking the first byte and CDN buttons at Web Page Test reveal sub-scores to allow you to see if you have made improvements, regrettably, I did not know of and capture sub-scores until after installing the CDN (I suggest you do).

Full Dump.

GT Metrix Page Speed Score

https://gtmetrix.com is giving a good score across the board (86%). It hints I should optimize Javascript files and “Remove query strings in static files” as some proxy servers do not cache URLs with “?” in them. That is (fortunately) not a problem with ExactDN, as the servers are configured to properly handle query strings.

GTMetrics

Gtmetrix.com does give some optimisation tips too (However, it does report low CDN optimizations if a single file is not delivered over a CDN).

I do like Gtmetrix.com email reports, you can see if your site performance is degrading.

GTMetrix Summary

Page Speed Insights

I am now looking at the Google PageSpeed Insights test for things to fix next. I think I can tweak my NGINX a little (adding caching). Read more about Google Page Speed Insights here.

fyi: My Google Page Speed Insights score (desktop) along with another local big corporate site I tested.

Page Insight

I am happy with 82 🙂

It appears if you want to get 100% you need to get..

  • Initial Response under 100ms
  • Animate, produce frame in under 10ms
  • Idle maximize idle time
  • Deliver all content in under 1000ms

Getting More from ExactDN by caching CSS and JS files.

I added the following to my /www/wp-config.php file as mentioned here: http://docs.ewww.io/article/47-getting-more-from-exactdn This will serve more resources from the CDN

define( 'EXACTDN_ALL_THE_THINGS', true );

I refreshed my site in a browser and now CSS, JS and fonts are loaded from the CDN too.

All

To reduce files served from my website I re-enabled the Fast Velocity Minify plugin in WordPress and pointed it at my CDN (https://fearby-com.exactdn.com/)

cdn-minify

Now I am getting a GTMatrix score of Page Speed Score = 93% (A) and YSlow Score  = 74% (C) and a 2.6-second load and a much lower 35 requests (post minification and pointing the minified files to the CDN).

WOW.

Minifiy

And WebPageTest.org is reporting Effective use of CDN 🙂 Awesome.

Effective use of CDN

I think I’m done (ExactDN CDN and the image optimiser and other tweaks have worked its magic).

How do I compare to other sites?

Given Apple, Microsoft and NBC speed scores are worse than mine I’m happy for now.  🙂

GTMetricx Graphs

GT Metrics graphs show the improvement, YSlow report does indicate I can reduce the website DOM elements to speed things up and tweak plugins but I’d rather keep my design for SEO and not play with plugins or they might break.

I could tweak the server side (NGINX/MySQL/Cache or DNS) but I don’t need too.

Conclusion

I still can’t believe setting up a CDN is a one-click solution and adding a wp-config.php lin (after you subscribe). Best of all the BJ Lazy Load plugin still works. I am very happy with the EWWW.io ExactDN. I now have a CDN and it has lowered my First Byte time, Start Render Times, Speed Index time (on more than just the front page) and all I did was subscribe and tick a checkbox.

It is nice that EWWW.io have not charged for Data delivered from the CDN network on top of a monthly subscription at this stage but they have left it open in the terms and conditions. It is important to ensure a service can sustain itself, so this is a good sign. FYI: my favorite Agile toolkit (Atlaz.io) that I reviewed here closed shop today so it is wise for aaS shops to plan ahead. I know how hard it can be to spin up servers and stuff and allocate times to keep them running. Good luck EWWW.io!

Also, I now have a clear set of steps (below) to resolve other non-optimized assets that are outside of the CDN.

Full Report

Thanks to EWWW.io and Web Page Test for helping make my site faster.

I doubt WordPress and my “down under”  server location can get me to under 1000ms but I will try.

Read on here to see how Cloudflare can increase your site’s performance.

Setting up a website to use Cloudflare on a VM hosted on Vultr and Namecheap

DNS Improved

Don’t forget your sites performance/SEO and security.

Website

Update November 2018

I have a much faster loading website after moving it to a new host, read my guide here.

GTMetrix After YSlow

Donate and make this blog better

Ask a question or recommend an article

[contact-form-7 id=”30″ title=”Ask a Question”]

Revision History

v2.0 November 2018 Update

v1.9 added Cloudflare, SEO, Google Page Speed Insights test and future optimization, page insight speed image, added GTMetrics comments, growth image, gtmetrix.com reports (typos are free), updated change is domain to .com, added EXACTDN_ALL_THE_THINGS, 93 page speed, minify, compare, graph, fixed typos, tidied up the conclusion.

Using Adobe XD and Platforma Web Wireframe Kit to prototype an iOS app

by

I have blogged about using Adobe XD to prototype mobile apps. Recently, I found an attractive collection of ready to go Wireframe screens from Proforma to use alongside Apple UI Kit elements in Adobe XD

Check Out Platforma

Platforma has been in the industry for years providing developers with prototype products for Mobile, Web and HTML templates.  Check out https://greatsimple.io/ for other prototyping products.

You can buy (or try) versions of Platforma at https://platforma.ws/#buy Below are screenshots from the Bundle version.

Performa has loads of ready to go samples screens that you can use in Adobe XD like..

  • Start Screens
  • Sign up Screens
  • Walkthrough Screens
  • Loading Screens
  • Feed Screens
  • Activity Screens
  • Profiles Screens
  • Posts Screens
  • Chats Screens
  • Contacts Screens
  • Search Screens
  • Lists Screens
  • Settings Screens
  • Create Screens
  • Catalog Screens
  • Discover Screens
  • Products Screens
  • Shopping Carts
  • Check Out Screens
  • Filters Screens
  • Navigation Screens
  • Maps Screens
  • About Screens
  • Popovers Screens
  • Photos Screens
  • Media Screens
  • Social Screens
  • E-commerce Screens
  • Charts and More (there are over 100 screens)

Adobe XD, Platforma and iOS Prototypes

The post below will focus on creating iOS prototypes using Adobe XD and Platforma Wireframe kits.

Other posts will focus on creating Android, and Web Prototypes etc. After you purchase Platforma, you can download a zip file (I have the bundle) containing all related design files.

Tip: Save your activation code if you eceive one.

Download

Extract the Zip file.

Zip

Files are located in each products folder (I will focus on XD in iOS assets until I learn the others).

PLATFORMA BUNDLE FILES

Adobe XD iOS assets are in two files.

Adobe XD

You can now open either Platforma .xd file to view prototype elements available.

You may get a Fonts Missing dialogue (install the fonts and the error goes away).

fyi

  • I downloaded Roboto font from here
  • SF UI * font can be downloaded from here
  • Apple San Francisco Font from here.

All font packs are free, the Apple San Francisco font needs you to run an install wizard, SF UI needs you to download and install TTF file from GitHub, Roboto needs you to double-click on a number of TTF files to install them in your fonts library.

The fonts are now installed (verified in my fonts app on OSX).

Fonts

I am now free to open the iOS “Platforma for iOS – Categories.xd” file that came from Proforma.

Performa iOS Categories (Zoomed Out)

Oh my, there are loads of sample screens and elements you can use in an app prototype (I’d count them but I’d be here all day, I had to zoom out to 2.5% to see them all).Platforma iOS

Now time to open the second file (“Platforma for iOS – Demos.xd”)

Performa iOS Categories (Zoomed In on Maps)

I had a look at the sample “Maps” screens and they are amazing.

Maps

Performa iOS Demos (Zoomed Out)

Here is a complete zoomed out view of the “Platforma for iOS – Demos.xd” file.

Platforms settings 1

Performa iOS Demos (Zoomed in on Social Samples)

Here is a sample of some of the screens in the Social category in the “Platforma for iOS – Demos.xd” file.

Let’s Start an App Prototype in Adobe XD

I open the “./Platforma for iOS/XD/Platforma for IOS/Platforma for iOS – Categories.xd” and “./Platforma for iOS/XD/Platforma for iOS – Demos.xd” xd files that you downloaded from https://platforma.ws/

Also, start a new iOS blank project in Adobe XD.

New Project

I positioned windows so I could see all Adobe XD projects.

Windows

Tip: If you are using the Apple iOS (or Android etc) UI components then you can open them too (see my Adobe XD guide to see how to get the oficial iOS controls from Apple).

iOS Controls

Personally, I would suggest before you start prototyping that you have a “validated list” of things that you want to prototype (if you are designing a prototype for a client then ask them what they want). Check out the awesome http://joinagile.com/lean-and-mean-agile-podcast/ for tips on Collecting, grooming, prioritizing app tasks. Don’t waste time developing unwanted features. Manage tasks around Outcomes and not tasks. I have blogged about developing software and staying on track and how to get feedback for your ideas.

Also, I have a so you have an idea for an app graphic and blog posts on Atlaz.io BETA Project Management Tool For Cross-Functional Teams the Trello and Atlassian JIRA Killer? and How to develop software ideas. I would suggest you listen to the Lean and Mean Agile Podcast to get extra product backlog grooming, prioritization tips etc.

TIP: I use the MoSCoW method for capturing and prioritizing tasks.

snip from: https://en.wikipedia.org/wiki/MoSCoW_method
Must have
Requirements labelled as Must have are critical to the current delivery timebox in order for it to be a success? If even one Must have requirement is not included, the project delivery should be considered a failure (note: requirements can be downgraded from Must have, by agreement with all relevant stakeholders; for example, when new requirements are deemed more important). MUST can also be considered an acronym for the Minimum Usable Subset.
Should have
Requirements labelled as Should have are important but not necessary for delivery in the current delivery timebox. While Should have requirements can be as important as Must have, they are often not as time-critical or there may be another way to satisfy the requirement so that it can be held back until a future delivery timebox.
Could have
Requirements labelled as Could have are desirable but not necessary, and could improve user experience or customer satisfaction for little development cost? These will typically be included if time and resources permit.
Won’t have (this time)
Requirements labelled as Won’t have been agreed by stakeholders as the least-critical, lowest-payback items, or not appropriate at that time. As a result, Won’t have requirements are not planned into the schedule for the next delivery timebox. Won’t have requirements are either dropped or reconsidered for inclusion in a later timebox. (Note: occasionally the term Would like to have is used; however, that usage is incorrect, as this last priority is clearly stating something is outside the scope of delivery).

end snip.

Starting your Prototype in Adobe XD

Based on your MoSCoW list you can (I do) create empty screens ( I usually add a label in the top left indicating the screens MoSCoW status so I can prototype needed features now and start planning future versions later from the one prototype file). I am not a big fan of using multiple app prototype files.

Moscow Screens

Now you can copy and paste in example screens over the empty screens.

Within minutes you can have a nice mockup of your app using Adobe XD and Platforma assets.

Drag as needed, change as needed.

Design your app

Customizing sample screens

Of course, you can edit the sample screens and rename, add, remove or change individual items in Adobe XD (Nice work Platforma/Adobe). Ignore the Yellow “Should Have” on the screen below, it looks out of place but I get in the habit of adding a floating “Must Have”, “Should Have”, “Could Have” and Won’t Have” labels to screens.

Editing

Preview

You can preview the rough prototype in Adobe XD on your desktop or on a real mobile device.

Don’t forget to wire up screens to generally goto and return to the main screen.

Wire up a prototype

Or you can wire up individual screen elements to go to different screens. You will need to be in Prototype mode in XD first.

Button

If you saved to the Adobe Cloud you can now open the prototype app on the Adobe XD app on a mobile device (or simulate it in Adobe XD on the desktop). Open Adobe XD on your mobile device and open your project from your Adobe Creative Cloud folder.

Mobile app

You can now view fabulous looking application prototypes on a mobile device screen with minimal invested time and effort.

Testing

Conclusion

I am very impressed with the https://platforma.ws Wireframe Kit, I’d strongly recommend app developers buy a copy and use the pre-setup templates look impressive and will save you loads of time (no more messing with UI Kits to make app prototypes look good). I can’t wait to check out and review the other assets in the Full Platforma Bundle.

Read More

Still reading?

Read: Quick guide to using Adobe XD CC to design a prototype iOS app.

More to come.

Donate and make this blog better

Ask a question or recommend an article

[contact-form-7 id=”30″ title=”Ask a Question”]

Revision History

v1.0 Initial Post

etc

Installing Android Studio 3 and creating your first Kotlin Android App

by

Below is my quick post showing how you can create your own Hello World Android app using the new Kotlin language on OSX. More will be added to this blog post over time.

What is Kotlin

Kotlin is a statically-typed programming language that runs on Java Virtual Machines (the syntax is not compatible with Java but interoperates with it).  Kotlin is Google’s default language for developing Android Android Apps. Kotlin is now the official language supported by Google for Android development. Kotlin v JAVA: http://androiddeveloper.galileo.edu/2017/10/16/kotlin-vs-java-what-is-the-difference/

The official Kotlin language page can be found here: https://kotlinlang.org/ (Wikipedia has a page here).

Kotlin has a “Try Kotlin” page here ( https://try.kotlinlang.org/ ) where you can the language out in a browser.  Android Studio 3 is the latest IDE from Google that allows you to develop apps in JAVA pr Kotlin for Android.

Learn Kotkin: Hello World Demo

Hello Wprls Demo

Kotlin Hello World Code:

/**
 * We declare a package-level function main which returns Unit and takes
 * an Array of strings as a parameter. Note that semicolons are optional.
 */

fun main(args: Array<String>) {
    println("Hello, world!")
}

fyi: Other Kotlin Code Examples:

Kotlin Language Reference: http://kotlinlang.org/docs/reference/

Tutorials: http://kotlinlang.org/docs/tutorials/

Books: http://kotlinlang.org/docs/books.html

More Resources: http://kotlinlang.org/docs/resources.html


Installing Android Studio on OSX

You will need to install the latest Android Studio 3 IDE from the link below.  This will allow you to download the latest Android SDK, Android Emulator, tools and Documentation from Google.

Download Android Studio from here: https://developer.android.com/studio/index.html?utm_source=android-studio

You should now have a 750MB (or there about’s) file (called something like android-studio-ide-171.4408382-mac.dmg )

You are now ready to run the setup dmg and install the app.

Kotlin Downloaded

“Replace” Earlier Versions (if you had 1.x or 2.x installed)

Replace Android Studio

You may be asked to choose the default Android emulator ram size

Emulator Ram Size

Congratulations, Android Studio 3 should now be installed

Installed

Congratulations you now have the Android Studio 3 IDE Installed.

Android Studio Tips and Tricks: https://medium.com/@mmbialas/50-android-studio-tips-tricks-resources-you-should-be-familiar-with-as-an-android-developer-af86e7cf56d2

Android Studio 3 User Guide: https://developer.android.com/studio/intro/index.html

Official getting started guide: https://developer.android.com/training/basics/firstapp/index.html

Setting Android Studio Defaults

Don’t forget to download updates and set auto updates “to enabled” in the Android Studio preferences screen.

Android Studio Auto Updates

Goto the “SDK Manager” menu item under the “Tools” then “Android” menu.

SDK Manager

You can Download additional Android SDK versions, updates and emulator environments.  I would recommend you pre-download the Android 3.x to 8.x environments.

ADK API Versions

You can also download and create Emulated Android Devices in the Android Virtual Device (AVD) Manager menu.

Andoiud Emulator

You can choose an existing Android Device (emulated)

Choose Emulated Device

Create Your Own Virtual Device

You can also create your own Android virtual device (Emulated) for testing.

I have a physical Huawei Mate 9 device (for physical testing), I will set up a similar virtual device (but stick with 2GB ram instead of 4GB as my development Mac only has 8GB total ram).

AVD Create

You can choose an emulators device skin if you so desire. Many phone skins can be found online (e.g here, here and here). Samsung Developer page has a skins page here. Managing AVD user guide here: https://developer.android.com/studio/run/managing-avds.html. I don’t use emulator device skins as this uses much-needed memory and screen real estate.

When you are done configuring your virtual device image you may be prompted to download missing images (e.g  in my case I need to download API 27/ Android 7.1.1).

Download

Physical Device Setup (Enable Developer Mode)

You should always code on physical devices where possible (emulators are ok but have a handful of physical devices on hand to test on).  I find the emulator crashes a lot on me.

How to enable developer mode on a physical Android device: https://developer.android.com/studio/debug/dev-options.html.  When you have enabled developer mode you can enable advanced developer options (I like these options).

Dev Options

When you have a physical Android device setup and connected, you can choose to run the app on the physical device.

Run on device

Creating Your first Hello World Kotlin Project

By now you will have Android Studio 3 installed, Configured Updates, Configured an Emulator device and hopefully a real test device. Now you can open Android Studio and select.

1. “Start a New Android Studio Project”
2. Name your project (e.g “My Kotlin Test App 001”)
3. Ensure your company name is unique (e.g “com.fearby.testgithub001android”
4. Tick “Include Kotlin Support” (not ticked by default).

New Project

5. Click “Next“.
6.You will need to choose the minimum API and Android version to support. If you choose a new API you may limit the potential users that can run your app and if choose an old API you will limit the potential features.  In my case, I will choose 7.0 for my test project (but will choose 4.1 in public apps).  Click “Help me choose” to see the percentage of users and features in each API version.

Version

7. Clik “Next”

8. Choose “Empty Activity” and click “Next“.

9. Take note of Activity name of “MainActivity” and Layout Name of “activity_main” and click “Finish“.

Now that you have a new project you can start Emulatorkator (Tools, Android, AVD Manager then press Play next to your emulator of choice).

Emulator

10. Now click Run and choose the Emulator to start.

Run

Before we add a button to the test app, let’s add a Anko dependency to the project ( https://github.com/Kotlin/anko ) to make coding easier.

11. Open your “app/Gradle Scripts/build.gradle (Module: app)” node in the Android Project treeview.

12. View add the following line to the dependencies section (refer to https://github.com/Kotlin/anko and replace “0.10.2” with the version listed at thGitHubub site). Then click “Sync Now”.

// Anko Commons
compile "org.jetbrains.anko:anko-commons:0.10.2"

Anko

13. Goto “app/res/layout/activity_main.xml” (1) and add a button to the layout (2) and name the button (3)

Add Button

14. Goto “app/java/%projectname%/MainActivity” (1) and add the following two lines  (2)(3) below.

Add the following at the top of “MainActivity”

import org.jetbrains.anko.toast

Add the following in the “onCreate” function (ensure your button name is the same as you called it).

buttonhello.setOnClickListener { toast ("Hello World (www.fearby.com)") }

Wire up Button

15. You can now build and deploy the app to a device (or emulator, real devices are faster).

RunA

Add a Button to change activity screens

The official documentation on changing activity screens can be found here.

1. Rename the button from above from”Button” to ‘Hello World”
2. Add a new button can call it “buttonnextscreen” (set constraints if you wish to match the hello world button left and width).

Next Screen Button

3. Now you can add and a new target activity screen ( e.g Open your project in the treeview (1), select “New” (2), select “Activity” (3) and then choose the activity type you want (e.g “Empty Activity” (2) ).

New Activity Screen
4. Name the “Activity Name” and “Layout Name” and click “Next“.

More info on Kotlin fragments: https://www.raywenderlich.com/169885/android-fragments-tutorial-introduction-2

5. In “MainActivity.kx” I edited the following (time to use Anko Intents and not just Anko toast )

//import org.jetbrains.anko.toast
import org.jetbrains.anko.*

I also wired up the new “Next Activity” Button

buttonnextscreen.setOnClickListener {
     startActivity(intentFor<NextActivity>().singleTop())
}

Now you have wired up a button to change Activity Screens.  The Android back button will fire the previous screen so there is no need to wire up a  returning button (like on iOS).

Next Activity

This is the Next Activity screen that was called from a button (exciting eh).

Set and Read Textbox

After adding a textbox and button this is how I set and red text in a textbox control.

textbox.setText("Sample Text")
buttongettext.setOnClickListener{
    toast(textbox.text.toString())
}

Create, Set and Read Local Class

I added a button (ID) called “buttoncreateclass” and setup a “setOnClickListener” (in onCreate) to create a class, fill it then output the data from the class to three textboxes (“textfirstname”, “textsurname” and “textage”)

class Person(val Firstname: String, val Surname: String, var Age: Int) {}

buttoncreateclass.setOnClickListener {
    var cbob = Person("Bob", Surname = "Smith", Age = 41)

    // Read
    textfirstname.setText("Firstname: " + cbob.Firstname.toString())
    textsurname.setText( "Surnmae: " + cbob.Surname.toString())
    textage.setText("Age: " + cbob.Age.toString())
}

Adding Application Icons.

Read the official guidelines here: https://developer.android.com/studio/write/image-asset-studio.html

I use the free cions generator here: https://romannurik.github.io/AndroidAssetStudio/

Ensure you replace the following files (with your project closed)..

  • res/mipmap-hdpi/ic_launcher_round.png (72 x 72 px)
  • res/mipmap-hdpi/ic_launcher.png (72 x 72 px)
  • res/mipmap-hdpi/ic_launcher_round.png (72 x 72 px)
  • res/mipmap-hdpi/ic_launcher.png (72 x 72 px)
  • res/mipmap-xhdpi/ic_launcher_round.png (96 x 96 px)
  • res/mipmap-xhdpi/ic_launcher.png (96 x 96 px)
  • res/mipmap-xxhdpi/ic_launcher_round.png (144 x 144 px)
  • res/mipmap-xxhdpi/ic_launcher.png (144 x 144 px)
  • res/mipmap-xxxhdpi/ic_launcher_round.png (192 x 192 px)
  • res/mipmap-xxxhdpi/ic_launcher.png (192 x 192 px)

You may also need to remove the res/drawable XML files to prevents the automatically genrated im,ages from loading.

  • DELETE: “res/drawable/ic_launcher_background.xls”
  • DELETE: “res/drawable/ic_launcher_foreground.xls”

You may need to force a delete (Right Click then “Delete” then “OK” then “Delete Anyway“).

Force Delete

I had a number of errors related to removing references to the automatically generated images.

File “anydpi-v26/ic_launcher.xml” and “anydpi-v26/ic_launcher_round.xml” had this contents.

<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
    <background android:drawable="@drawable/ic_launcher_background"/>
    <foreground android:drawable="@drawable/ic_launcher_foreground"/>
</adaptive-icon>

I replaced the contents of the file “anydpi-v26/ic_launcher.xml” and “anydpi-v26/ic_launcher_round.xml” with

<?xml version="1.0" encoding="utf-8"?>
<application>
    android:icon="@mipmap/ic_launcher"
    android:roundIcon="@mipmap/ic_launcher_round"
</application>

Then you will need to click the “Build” menu then “Clean Project” to remove references to the files.

“Build“, “Clean” results.

Executing tasks: [:app:assembleDebug]

Configuration 'compile' in project ':app' is deprecated. Use 'implementation' instead.
:app:preBuild UP-TO-DATE
:app:preDebugBuild UP-TO-DATE
:app:compileDebugAidl UP-TO-DATE
:app:compileDebugRenderscript UP-TO-DATE
:app:checkDebugManifest UP-TO-DATE
:app:generateDebugBuildConfig UP-TO-DATE
:app:generateDebugResValues UP-TO-DATE
:app:generateDebugResources UP-TO-DATE
:app:mergeDebugResources UP-TO-DATE
:app:createDebugCompatibleScreenManifests UP-TO-DATE
:app:processDebugManifest UP-TO-DATE
:app:splitsDiscoveryTaskDebug UP-TO-DATE
:app:processDebugResources UP-TO-DATE
:app:compileDebugKotlin UP-TO-DATE
:app:prepareLintJar UP-TO-DATE
:app:generateDebugSources UP-TO-DATE
:app:javaPreCompileDebug UP-TO-DATE
:app:compileDebugJavaWithJavac UP-TO-DATE
:app:compileDebugNdk NO-SOURCE
:app:compileDebugSources UP-TO-DATE
:app:mergeDebugShaders UP-TO-DATE
:app:compileDebugShaders UP-TO-DATE
:app:generateDebugAssets UP-TO-DATE
:app:mergeDebugAssets UP-TO-DATE
:app:transformClassesWithDexBuilderForDebug UP-TO-DATE
:app:transformDexArchiveWithExternalLibsDexMergerForDebug UP-TO-DATE
:app:transformDexArchiveWithDexMergerForDebug UP-TO-DATE
:app:mergeDebugJniLibFolders UP-TO-DATE
:app:transformNativeLibsWithMergeJniLibsForDebug UP-TO-DATE
:app:processDebugJavaRes NO-SOURCE
:app:transformResourcesWithMergeJavaResForDebug UP-TO-DATE
:app:validateSigningDebug
:app:packageDebug UP-TO-DATE
:app:assembleDebug UP-TO-DATE

BUILD SUCCESSFUL in 1s
26 actionable tasks: 1 executed, 25 up-to-date

Now you can build an APK with static icons (yes, that’s my face).

Icons

Read move on “realtime generated/adaptive” v “image” icons here: https://medium.com/@ianhlake/vectordrawable-adaptive-icons-3fed3d3205b5

Official guide on Adaptive Icons: https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive.html

Displaying Alerts

Displaying a hard-coded option with Anko

alert("Coffee?", "Would you like another coffee?") {
    yesButton { toast("OK, go and get a coffee.") }
    noButton { toast("OK, go and get a glasss of water.") }
}.show()

Displaying a list with options with Anko

val fruit = listOf("Apple", "Banana", "Mango")
selector("Go..", fruit, { dialogInterface, i ->
    toast("Go: ${fruit[i]}.")
})

Making Phone Calls, Sending Text, Browing the web and sending Emails

Anko has some cool helper methods to allow you to send and share content.

As long as you add the appropriate buttons, text fields you can add these button listeners.

override fun onCreate(savedInstanceState: Bundle?) {
    ...

    buttonmainscreen.setOnClickListener {
        startActivity(intentFor<MainActivity>().singleTop())
    }

    buttonmakeacall.setOnClickListener {
        makeCall(textphonenumber.text.toString())
    }

    buttonsendatext.setOnClickListener {
        sendSMS(phonenumber2.text.toString(), textsendthistext.text.toString())
    }

    buttonbrowsetheweb.setOnClickListener {
        browse(texturl.text.toString())
    }

    buttonsharesometext.setOnClickListener {
        share(textsharethis.text.toString(), textsharethis2.text.toString() )
    }

    buttonsendanemail.setOnClickListener {
        email(textemail.text.toString(), textsubject.text.toString(), textbody.text.toString())
    }

}

Layout

Email

Background Async Calls

You can call background calls and then invoke the UI thread when the call has returned.

buttondoasync.setOnClickListener {

    fun runLongTask(): String {
        Thread.sleep(3000)
        return "Waited 3 seconds"
    }

    doAsync {
        var result = runLongTask()
        uiThread { toast(result) }
    }
}

App Manifest Permissions

Edit the file “app/src/mainAndroidManifest.xml” and add the following two lines above the “<applications” node

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission android:name="android.permission.INTERNET"/>

View all permission options here: https://developer.android.com/reference/android/Manifest.permission.html

By default your app will not ask for permissions (unless you set them).

Permissions

Downloading data from the Internet (API Endpoint)

Add the following to a button to make a anetwork call.

buttoncallapiinthebackground.setOnClickListener {
    doAsync {
        val result = URL("https://www.yoursite.com/api/yourappname/v1").readText()
        uiThread {
            longToast("Request performed: " + result)
        }
    }
}

Example Result:

Request performed: {"API Status": "OK"]

Updating your Android Studio IDE (do this often)

Don’t forget to download updates (and enable auto-updates) in the Android Studio IDE.  At the start of this draft blog post, I installed Android Studio 3.0 (Four hours later a large 1.3 GB sized update was available), I had to download many smaller updates too.

AS Updates

This is a frequent update that would not go away for me.

Update Gradle

Copying the app to an Android Device.

Once you have enabled debug mode you can copy apps to and from the physical device.  You can build an APK by going to the “Build” then “Build APK’s” menu and build the file to your project folder (e.g “/Users/simon/AndroidStudioProjects/MyKotlinTestApp001/app/build/outputs/apk/debug/app-debug.apk“). You can then copy this file to your Android device (via the Android File Transfer app) and you can now run the app anytime you want away from your Mac.

File Transfer

Also before you copy and unsigned apps to your test device tyoiu will need to enable developer mode then enable the running of apps from “unknown sources“.

Unknown Sources

If you have any security apps instaled like Sophos you will be told that yiour app has a low rating.

Low Reputation

APK living on your device 🙂

Device

The Android Studio also has a real device debugger.

Android Device Monitor

Monitor output from a show stats from a real device

Debug

Android Security 101 (you need to know this)

You can define network configuration per these instructions: https://developer.android.com/training/articles/security-config.html

Coming from developing iOS and desktop apps I decided on researching the current state of Android Security. I would strongly suggest you watch this video from Marcos Placona ( https://twitter.com/marcos_placona Developer Evangelist @ Twilio).

Takeaway’s from this video

My Suggestions

  • Secure your Ubuntu server (info here and here).
  • Use an HTTPS SSL Certificate
  • Use Certificate Pinning
  • Ask for app token/keys from your server and keep in memory.
  • Use OAuth 2 to secure sessions
  • Use short timeouts (or expire on use) on tokens with sensitive data.
  • Call upstream objects form API to prevents client-side attacks.

Deploying your app to the Android/Google Play store

To publish an app to the Google Play store you will need to create a Google Play Developer Account, pay $25 USD and you are free to publish an app on the Google Play store. Read more here: https://play.google.com/apps/publish/

Publishing an app is as simple as filling in the blanks in the publish app screen.

Store

Troubleshooting

  • You will need a  fast system with at least 8MB of ram (16GB is ideal).
  • Apple XCode users will find Android Studio 3 slow and unstable (so backup your project often).
  • Building apps take a long time so be prepared to wait for build and deploys to devices.
  • Update warnings are aplenty, get used to them.

Read More

Kotlin Community: http://kotlinlang.org/community/

Android Studio ~ Android Central Blog: https://www.androidcentral.com/tag/android-studio

Huawei Developer Page: http://developer.huawei.com/en/

Samsung tips on using Android Studio: http://developer.samsung.com/galaxy/emulator-skin/guide#tips

Create a custom emulator skin https://developer.android.com/studio/run/managing-avds.html#skins

Follow Android Dev on Twitter: https://www.twitter.com/AndroidDev

Read: https://androidsecurity.info/

An Introduction to Kotlin: https://code.tutsplus.com/tutorials/an-introduction-to-kotlin–cms-24051

Reddit: https://www.reddit.com/r/androiddev/

Create Non XML based layouts (with ANKO):

Kotlin v JAVA: http://androiddeveloper.galileo.edu/2017/10/16/kotlin-vs-java-what-is-the-difference/

Read more about Android Studio 3: http://www.technoblogpost.com/android-studio-3-0/

Jetbrains Android Studio Guidelines: https://www.jetbrains.com/help/idea/2016.2/general-guidelines.html

Donate and make this blog better


Ask a question or recommend an article
[contact-form-7 id=”30″ title=”Ask a Question”]

v1.57 added Async calls, app icon, misc screenshots, Anko alert, email, sms, share code, permissions, network download etc.

Building faster web apps with google tools and exceed user expectations

by

@jawache pointed me in the direction of twitter user @addyosmani and a talk at Chrome Dev Summit 2017 called “Fast By Default: Modern Loading Best Practices

Recently I blogged about speeding up my serves (by moving them closer to me and visitors) and Sped up WordPress by moving away from CPanel tp a  self-managed server.

Update 2018: For the best performing VM host (UpCloud) read my guide on the awesome UpCloud VM hosts (get $25 free credit by signing up here).

RAIL: Measure Performance with the RAIL Model (Fast Integrated, Reliable and Engaging)

https://developers.google.com/web/fundamentals/

  • Focus on the user
  • Initial Response under 100ms
  • Animate, produce a frame in under 10ms
  • Idle maximize idle time
  • Deliver all content in under 1000ms

Read more here: https://developers.google.com/web/fundamentals/performance/rail

Replaced with: User happiness metrics

  • First Paint
  • First content Paint
  • First Meaningful Paint
  • Time to interactive

Potential Impacts

  • Network ( See my scalability on a journey on a budget blog post)
  • CPU throttling
  • Client Heavy Frameworks (JavaScript is heavy parsing)
  • Shared hosts (Moving away from a shared host to AWS from CPanel or other shared hosts can be a good thing for performance. )
  • Network Latency
  • Size (number and file size)
  • HTTP ASync Downloads Limit (2)
  • Device Speed
  • Parsing JavaScript.
  • 3r party libraries
  • Caching (web server (NGINX caching https://www.nginx.com/blog/nginx-caching-guide/ ) or local browser cache)
  • User Limitations
  • etc

Do’s

  • Less JavaScript
  • More Caching
  • Lazy Loading ( I use the BJ Lazy Load plugin in WordPress )
  • Develop on Slow Devices/Links
  • CDN
  • DNS
  • Minify Code  ( fyi )
  • Optimize Images ( fyi )
  • Respect Visitor Data Plans/Devices (offer low data version)

Use online tools (Browser dev audit tools) to measure performance metrics.

Consider in-memory caching solutions

Use the following third-party tools while developing.

These are highly recommended tools.

Siege Command Line Benchmarking tool (Read guide here)

https://calibreapp.com/

https://speedcurve.com/

https://github.com/siddharthkp/bundlesize

http://loader.io/ – External Benchmarker

State of the Web:

Use http://beta.httparchive.org/ to see the average website stats and trends, is your site average or abusing the code type/size you push?

Sample httparchive.org Reports:

Average TCP Connection Per Page

The average percent of HTTPS requests (now over 50%)

Time in seconds to first meaningful paint

1st paint

Average time to first interactive paint

1st Interactic paint

Average time to first on load (finished)

On Load

Netcraft: October 2017 Web Server Survey:

https://news.netcraft.com/archives/2017/10/26/october-2017-web-server-survey-13.html

Web Server Technology Share

Web Server Share

(Image credit: netcraft.com)

Active Web Sites v Hostnames

Active Sites

(Image credit: netcraft.com)

State of Desktops (Gamers Survey)

Steam conducts a monthly survey to collect data about what kinds of computer hardware and software our customers are using. Participation in the survey is optional, and anonymous via the steam app.

Steam HW Scale

This gives a rough (biased) breakdown of high-end machines (gamers) but does reveal valid stats on installed memory and product share.

http://store.steampowered.com/hwsurvey

Don’t forget to track the visitors (location, time, devices, speed, gender etc.) to your site with Google Analytics https://support.google.com/sites/answer/97459?hl=en

Google Progressive Web APP LightHouse Site Audit (Chrome Dev Tools)

You can now run Audits in the Chrome DevTools. To run a report (Read More: https://developers.google.com/web/tools/lighthouse/#devtools )

Chrome Dev Tools

Click Perform and Audit (in the Chrome Developer Tools) on the site you have loaded.

Perform and Audit

Audit in Progress

Audit in Progress

My Report

FYI: Report scores will depend on the time of day and the speed of your computer, A  55 score maybe 65 or 45 the following day.

PWA Score

Read the Progressive Web App Check List to help understand how to boost your score.

https://developers.google.com/web/progressive-web-apps/checklist

Google Mobile-Friendly Check List

Also, run the mobile-friendly tesh over your site here.

https://search.google.com/test/mobile-friendly

Mobile Friendly

Google Page Speed Insights

Goto PageSpeed Insights and scan your site.

Page Speed Insights

Scanning

Page Speed Insights Report Results

page Insights Results

FYI: My site is a WordPress site and I speed up the sight by.

The next thing I want to try is (Sponsors needed).

  • Setting up self-managed Sub Domain CDN’s (https://img01cdn.fearby.com, https://img02cdn.feearby.com etc). – See Vultr and Digital Ocean Ubuntu Server setup guides.
  • Third Party CDN’s.
  • DNS optimizations.
  • Setup NGINX Caching.

Google User Experience Report (Advanced):

The Google User Experience Report (SQL like query and reporting system) is a public dataset of key user experience metrics for top origins on the web. All performance data included in the report is from real-world conditions, aggregated from Chrome users who have opted-in to syncing their browsing history and have usage statistic reporting enabled ( https://www.google.com/chrome/browser/privacy/whitepaper.html#usagestats ) .(end snip from  https://blog.chromium.org/2017/10/introducing-chrome-user-experience-report.html )

Getting started with Chrome User Experience Report Tool: https://developers.google.com/web/tools/chrome-user-experience-report/getting-started
Chrome User Experience Report Tool will allow you to query datasets on page load times.

Why

Better able to compete and deliver measurable advantages to your customers.

Conclusion

  • Know data – MOM (Measure, Optimise and Monitor).
  • Improve over time or before launch.
  • Set budgets on file sizes and page times.
  • Develop on slow devices/links.
  • Consider using PageSpeed Module on your server https://developers.google.com/speed/pagespeed/module/
  • Consider using the RPRL Pattern (https://developers.google.com/web/fundamentals/performance/prpl-pattern/ ) to split and cache code to speed up the time to interactivity.
  • Scale up or out?
  • Enabling web server caching (NGINX: https://www.nginx.com/blog/nginx-caching-guide/

Still Reading?

View more Google Dev Summit 2017 talks: https://www.youtube.com/playlist?list=PLNYkxOF6rcICUD5nBfRdAR6Fveosnqa5m

Also read: Can You Afford It?: Real-world Web Performance Budgets: https://infrequently.org/2017/10/can-you-afford-it-real-world-web-performance-budgets/

Still Reading:

Check out Googles HTTPS Transparency Report https://transparencyreport.google.com/https/overview

Read the introduction blog at Chromium Blog https://blog.chromium.org/2017/10/introducing-chrome-user-experience-report.html

Bookmark https://blog.chromium.org/

Update Jan 2018

Google begins mobile-first indexing of sites to improve mobile search results

What Crawl Budget Means for Googlebot

More to come.

Donate and make this blog better


Ask a question or recommend an article
[contact-form-7 id=”30″ title=”Ask a Question”]

v1.2 Jan 2018 additions on Google’s mobile first approach and increasing crawl rates.

v1.1 fixed typos

PHP 7 code to send object oriented sanitised input data via bound parameters to a MYSQL database

by

Sanitising user input is a golden rule with web developing (see https://www.owasp.org/index.php/Input_Validation_Cheat_Sheet ), here is my code snippet to sanitise and parameterise MySQL queries in PHP 7.0.

First, watch and follow @jawache (Asim Hussein) demo how common hacks happen and why you should update and patch software often, sanitise user data and set up a firewall.

I have blogged before on how to set up a Vultr server and configure it, How to secure Ubuntu in the Cloud, How to run an Ubuntu System Audit and Beyond SSL with Content Security Policy, Public Key Pinning etc but a 100% secure server is impossible as zero-day exploits and flaws (e.g WPA WiFi) remind us how limited technology lifespans can be. Yes, you can setup firewalls on Ubuntu and WordPress but you are only one exploit away from being hacked. Below is my code snippet (in PHP) to sanitise incoming data, query a MySQL database with object-oriented calls in PHP 7.0 and return data in variables. I have set up a firewall to block access to MySQL and non-essential ports (use https://www.shodan.io/ to test your server’s ports). I was using older deprecated PHP 5 era database calls and I researched newer calls available in PHP 7.0.

When you log in to an Ubuntu server and it says the following you should update

Also update software, node, npm etc

This code outputs too much information but will help you setup and get data on your servers (as long as you replace your database, table and field names).

<?php
echo "Last modified: " . date ("F d Y H:i:s.", getlastmod()) . "<br /><br />";
date_default_timezone_set('Australia/Sydney');

$dbhost = '127.0.0.1';
$dbusername = 'themysqlaccount';
$dbpassword = 'themysqlpassword';
$dbname = 'thedatabasename';
$con = mysqli_connect($dbhost, $dbusername, $dbpassword, $dbname);

//Debug stuff
//echo var_dump($con);
//printf(" - Error: %s.\n", $stmt->error);

if($con->connect_errno > 0){
    printf(" - Error: %s.\n", $stmt->error);
    die("Error: Unable to connect to MySQL (E001)");
} else {
 echo "Charset set to utf8<br />";
 mysqli_set_charset($con,"utf8");
}

if (!$con) {
    echo "Error: Unable to connect to MySQL (E002)" . PHP_EOL;
    echo "Debugging errno: " . mysqli_connect_errno() . PHP_EOL;
    echo "Debugging error: " . mysqli_connect_error() . PHP_EOL;
    exit;
} else {
    echo "Database Connection OK<br />";

    echo "&nbsp; Success: A proper connection to MySQL was made! The my_db database is great." . PHP_EOL . "<br />";
    echo "&nbsp; &nbsp;- Host information: " . mysqli_get_host_info($con) . PHP_EOL . "<br />";
    echo "&nbsp; &nbsp;- Server Info: '" . mysqli_get_server_info($con) . "'<br />";
    echo "&nbsp; &nbsp;- Server Protocol Info : ". mysqli_get_proto_info($con) . "<br />";
    echo "&nbsp; &nbsp;- Server Version: " . mysqli_get_server_version($con) . "<br />";
    //echo " - Server Connection Stats: " . print_r(mysqli_get_connection_stats($con)) . "<br />";
    echo "&nbsp; &nbsp;- Client Version: " . mysqli_get_client_version($con) . "<br />";
    echo "&nbsp; &nbsp;- Client Info: '" . mysqli_get_client_info() . "'<br />";

echo "Ready to Query the database '$dbname'.<br />";

// Input Var's that are parameterized/bound into the query statement
// I pre fill three vaiables with known fields in my users table
// Goot article in manual sanitization of strings in PHP http://php.net/manual/en/filter.filters.sanitize.php
    $in_username = mysqli_real_escape_string($con, 'FearTec');
    $in_f_guid = mysqli_real_escape_string($con, '5161a571-4a51-468d-9e96-6a5db5d35b1c');
    $in_mobile = mysqli_real_escape_string($con,'0456629533');

// Output Var's that the query fills after querying the database
// These variables will be filled with data from the current returned row
    $out_id = "";
    $out_f_guid = "";
    $out_username = "";
    $out_mobile = "";

echo "1. About to query the database: '$dbname'<br />";
$stmt = mysqli_stmt_init($con);
if (mysqli_stmt_prepare($stmt,"SELECT id, username, guid, user_mobile FROM thedatabasename WHERE username = ? AND guid = ? AND user_mobile = ?")) {

        echo "2. Query Returned<br />";

        /*
            Type specification chars
            Character   Description
            i   corresponding variable has type integer
            d   corresponding variable has type double
            s   corresponding variable has type string
            b   corresponding variable is a blob and will be sent in packets
        */
        mysqli_stmt_bind_param($stmt, 'sss', $in_username, $in_guid, $in_mobile);

        mysqli_stmt_execute($stmt);

        mysqli_stmt_bind_result($stmt, $out_id, $out_username, $out_guid, $out_mobile);

        mysqli_stmt_fetch($stmt);

        // Do something with the 1st returned row        
        echo " - Row: ID: $out_id, GUID: $out_guid, USR: $out_username, MOB: $out_mobile";//
        // Do we have more rows to process
        while($stmt->fetch()) { 
                // Deal with other rows
                echo " - Row: ID: $out_id, GUID: $out_f_guid, USR: $out_username, MOB: $out_mobile<br />";
        }
        mysqli_stmt_close($stmt);
        
        echo "c<br />";
    }
     else {
        echo "3. Error Querying<br/>";
        printf(" - Error: %s.\n", $stmt->error);
    }

}    

?>

Returned Data

Last modified: November 01 2017 16:43:01.
Charset set to utf8
Database Connection OK
  Success: A proper connection to MySQL was made! The my_db database is great. 
   - Host information: 127.0.0.1 via TCP/IP 
   - Server Info: '5.7.19-0ubuntu0.16.04.1'
   - Server Protocol Info : 10
   - Server Version: 50719
   - Client Version: 50012
   - Client Info: 'mysqlnd 5.0.12-dev - 20150407 - $Id: b5########################

Variable Bind Parameter Types

When you bind an incoming variable you can inform MySQL what the data type is expected to be.

mysqli_stmt_bind_param: Type specification chars
Character   Description
i   corresponding variable has type integer
d   corresponding variable has type double
s   corresponding variable has type string
b   corresponding variable is a blob and will be sent in packets

Debug Options

Errors Enabled: Turn on PHP Debug Errors On

Turning on errors on production servers is bad but on development.

First, find php.ini files

Edit your appropriate PHP file

And turn on Error reporting.

Restart PHP and NGINX

If you need to view your active php.ini file or see PHP configuration settings, add this to a .php file on your web server and view its contents.

<?php
phpinfo()
?>

It is amazing how clear errors can be

PHP Error

Dump Connection Vars: PHP mysqli_connect: var_dump($con)

echo var_dump($con);

Output:

public 'affected_rows' => int 0
  public 'client_info' => string 'mysqlnd 5.0.12-dev - 20150407 - $Id: b5###############################3

Show Environment Vars: mysqli_get_host_info, mysqli_get_proto_info, mysqli_get_server_version, mysqli_get_client_version and mysqli_get_client_info.

echo "&nbsp; Success: Database connection OK." . PHP_EOL . "<br />";
echo "&nbsp; &nbsp;- Host information: " . mysqli_get_host_info($con) . PHP_EOL . "<br />";
echo "&nbsp; &nbsp;- Server Info: '" . mysqli_get_server_info($con) . "'<br />";
echo "&nbsp; &nbsp;- Server Protocol Info : ". mysqli_get_proto_info($con) . "<br />";
echo "&nbsp; &nbsp;- Server Version: " . mysqli_get_server_version($con) . "<br />";
//echo " - Server Connection Stats: " . print_r(mysqli_get_connection_stats($con)) . "<br />";
echo "&nbsp; &nbsp;- Client Version: " . mysqli_get_client_version($con) . "<br />";
echo "&nbsp; &nbsp;- Client Info: '" . mysqli_get_client_info() . "'<br />";

Output:

Success: Database connection OK. 
   - Host information: 127.0.0.1 via TCP/IP 
   - Server Info: '5.7.19-0ubuntu0.16.04.1'
   - Server Protocol Info : 10
   - Server Version: 50719
   - Client Version: 50012
   - Client Info: 'mysqlnd 5.0.12-dev - 20150407 - $Id: b5########################################

Show errors in failed if  statements: mysqli_stmt_prepare else

printf(" - Error: %s.\n", $stmt->error);

Output:

Error: Table 'thedatabasename.invalidtablename' doesn't exist.

Debugging is your friend.

More to come..

Donate and make this blog better


Ask a question or recommend an article
[contact-form-7 id=”30″ title=”Ask a Question”]

V 1.0 initial post

Short (Article):

Ready to Query the database 'thedatabasename'. 1. About to query the database: 'thedatabasename' 2. Query Returned - Row: ID: 1, GUID: 0000000-0000-0000-0000-000000000001, USR: Bob, MOB: 1234567890 - Row: ID: 2, GUID: 0000000-0000-0000-0000-000000000002, USR: Joe, MOB: 1234567891 - Row: ID: 3, GUID: 0000000-0000-0000-0000-000000000003, USR: Jane, MOB: 1234567892

Variable Bind Parameter Types

When you bind an incoming variable you can inform MySQL what the data type is expected to be.



Debug Options


Errors Enabled: Turn on PHP Debug Errors On


Turning on errors on production servers is bad but on on development.


First, find php.ini files




Edit your appropriate PHP file




And turn on Error reporting.


Restart PHP and NGINX




If you need to view your active php.ini file or see php configuration settings, add this to a .php file on your web server and view it’s contents.




It is amazing how clear errors can be


PHP Error


Dump Connection Vars: PHP mysqli_connect: var_dump($con)




Output:




Show Environment Vars: mysqli_get_host_info, mysqli_get_proto_info, mysqli_get_server_version, mysqli_get_client_version and mysqli_get_client_info.




Output:




Show errors in failed if  statements: mysqli_stmt_prepare else




Output:




Debugging is your friend.


More to come..


Donate and make this blog better







Ask a question or recommend an article

[contact-form-7 id=”30″ title=”Ask a Question”]


V 1.0 initial post


Short (Article):


(length=79) public 'client_version' => int 50012 public 'connect_errno' => int 0 public 'connect_error' => null public 'errno' => int 0 public 'error' => string '' (length=0) public 'error_list' => array (size=0) empty public 'field_count' => int 0 public 'host_info' => string '127.0.0.1 via TCP/IP' (length=20) public 'info' => null public 'insert_id' => int 0 public 'server_info' => string '5.7.19-0ubuntu0.16.04.1' (length=23) public 'server_version' => int 50719 public 'stat' => string 'Uptime: 1828089 Threads: 1 Questions: 15702 Slow queries: 0 Opens: 1529 Flush tables: 1 Open tables: 1461 Queries per second avg: 0.008' (length=142) public 'sqlstate' => string '00000' (length=5) public 'protocol_version' => int 10 public 'thread_id' => int 7367 public 'warning_count' => int 0


Show Environment Vars: mysqli_get_host_info, mysqli_get_proto_info, mysqli_get_server_version, mysqli_get_client_version and mysqli_get_client_info.




Output:




Show errors in failed if  statements: mysqli_stmt_prepare else




Output:




Debugging is your friend.


More to come..


Donate and make this blog better







Ask a question or recommend an article

[contact-form-7 id=”30″ title=”Ask a Question”]


V 1.0 initial post


Short (Article):


Ready to Query the database 'thedatabasename'. 1. About to query the database: 'thedatabasename' 2. Query Returned - Row: ID: 1, GUID: 0000000-0000-0000-0000-000000000001, USR: Bob, MOB: 1234567890 - Row: ID: 2, GUID: 0000000-0000-0000-0000-000000000002, USR: Joe, MOB: 1234567891 - Row: ID: 3, GUID: 0000000-0000-0000-0000-000000000003, USR: Jane, MOB: 1234567892


Variable Bind Parameter Types


When you bind an incoming variable you can inform MySQL what the data type is expected to be.




Debug Options


Errors Enabled: Turn on PHP Debug Errors On


Turning on errors on production servers is bad but on on development.


First, find php.ini files




Edit your appropriate PHP file




And turn on Error reporting.


Restart PHP and NGINX




If you need to view your active php.ini file or see php configuration settings, add this to a .php file on your web server and view it’s contents.




It is amazing how clear errors can be


PHP Error


Dump Connection Vars: PHP mysqli_connect: var_dump($con)




Output:




Show Environment Vars: mysqli_get_host_info, mysqli_get_proto_info, mysqli_get_server_version, mysqli_get_client_version and mysqli_get_client_info.




Output:




Show errors in failed if  statements: mysqli_stmt_prepare else




Output:




Debugging is your friend.


More to come..


Donate and make this blog better







Ask a question or recommend an article

[contact-form-7 id=”30″ title=”Ask a Question”]


V 1.0 initial post


Short (Article):


Show errors in failed if  statements: mysqli_stmt_prepare else




Output:




Debugging is your friend.


More to come..


Donate and make this blog better







Ask a question or recommend an article

[contact-form-7 id=”30″ title=”Ask a Question”]


V 1.0 initial post


Short (Article):


Ready to Query the database ‘thedatabasename’. 1. About to query the database: ‘thedatabasename’ 2. Query Returned – Row: ID: 1, GUID: 0000000-0000-0000-0000-000000000001, USR: Bob, MOB: 1234567890 – Row: ID: 2, GUID: 0000000-0000-0000-0000-000000000002, USR: Joe, MOB: 1234567891 – Row: ID: 3, GUID: 0000000-0000-0000-0000-000000000003, USR: Jane, MOB: 1234567892


Variable Bind Parameter Types


When you bind an incoming variable you can inform MySQL what the data type is expected to be.




Debug Options


Errors Enabled: Turn on PHP Debug Errors On


Turning on errors on production servers is bad but on on development.


First, find php.ini files




Edit your appropriate PHP file




And turn on Error reporting.


Restart PHP and NGINX




If you need to view your active php.ini file or see php configuration settings, add this to a .php file on your web server and view it’s contents.




It is amazing how clear errors can be


PHP Error


Dump Connection Vars: PHP mysqli_connect: var_dump($con)




Output:




Show Environment Vars: mysqli_get_host_info, mysqli_get_proto_info, mysqli_get_server_version, mysqli_get_client_version and mysqli_get_client_info.




Output:




Show errors in failed if  statements: mysqli_stmt_prepare else




Output:




Debugging is your friend.


More to come..


Donate and make this blog better







Ask a question or recommend an article

[contact-form-7 id=”30″ title=”Ask a Question”]


V 1.0 initial post


Short (Article):


(length=79) public ‘client_version’ => int 50012 public ‘connect_errno’ => int 0 public ‘connect_error’ => null public ‘errno’ => int 0 public ‘error’ => string ” (length=0) public ‘error_list’ => array (size=0) empty public ‘field_count’ => int 0 public ‘host_info’ => string ‘127.0.0.1 via TCP/IP’ (length=20) public ‘info’ => null public ‘insert_id’ => int 0 public ‘server_info’ => string ‘5.7.19-0ubuntu0.16.04.1’ (length=23) public ‘server_version’ => int 50719 public ‘stat’ => string ‘Uptime: 1828089 Threads: 1 Questions: 15702 Slow queries: 0 Opens: 1529 Flush tables: 1 Open tables: 1461 Queries per second avg: 0.008’ (length=142) public ‘sqlstate’ => string ‘00000’ (length=5) public ‘protocol_version’ => int 10 public ‘thread_id’ => int 7367 public ‘warning_count’ => int 0


Show Environment Vars: mysqli_get_host_info, mysqli_get_proto_info, mysqli_get_server_version, mysqli_get_client_version and mysqli_get_client_info.




Output:




Show errors in failed if  statements: mysqli_stmt_prepare else




Output:




Debugging is your friend.


More to come..


Donate and make this blog better







Ask a question or recommend an article

[contact-form-7 id=”30″ title=”Ask a Question”]


V 1.0 initial post


Short (Article):


Ready to Query the database ‘thedatabasename’. 1. About to query the database: ‘thedatabasename’ 2. Query Returned – Row: ID: 1, GUID: 0000000-0000-0000-0000-000000000001, USR: Bob, MOB: 1234567890 – Row: ID: 2, GUID: 0000000-0000-0000-0000-000000000002, USR: Joe, MOB: 1234567891 – Row: ID: 3, GUID: 0000000-0000-0000-0000-000000000003, USR: Jane, MOB: 1234567892


Variable Bind Parameter Types


When you bind an incoming variable you can inform MySQL what the data type is expected to be.




Debug Options


Errors Enabled: Turn on PHP Debug Errors On


Turning on errors on production servers is bad but on on development.


First, find php.ini files




Edit your appropriate PHP file




And turn on Error reporting.


Restart PHP and NGINX




If you need to view your active php.ini file or see php configuration settings, add this to a .php file on your web server and view it’s contents.




It is amazing how clear errors can be


PHP Error


Dump Connection Vars: PHP mysqli_connect: var_dump($con)




Output:




Show Environment Vars: mysqli_get_host_info, mysqli_get_proto_info, mysqli_get_server_version, mysqli_get_client_version and mysqli_get_client_info.




Output:




Show errors in failed if  statements: mysqli_stmt_prepare else




Output:




Debugging is your friend.


More to come..


Donate and make this blog better







Ask a question or recommend an article

[contact-form-7 id=”30″ title=”Ask a Question”]


V 1.0 initial post


Short (Article):