App

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

March 13, 2018 by Simon

This guide will show how you can set up a website to use Cloudflare on a VM hosted on Vultr and Namecheap

I have a number of guides on moving hasting away form CPanel, Setting up VM’s on AWS, Vultr or Digital Ocean along with installing and managing WordPress from the command line. This post will show how to let Cloudflare handle the DNS for the domain.

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).

Snip from here “Cloudflare’s enterprise-class web application firewall (WAF) protects your Internet property from common vulnerabilities like SQL injection attacks, cross-site scripting, and cross-site forgery requests with no changes to your existing infrastructure.”

Buy a Domain

Buy a domain name from Namecheap here.

Cloudflare Benefits (Free Plan)

DDoS Attack Protection (Huge network to absorb attacks DDoS attacks over 600Gbps are no problem for our 15 Tbps networks)
Global CDN
Shared SSL certificate (I disabled this and opted to use my own)
Access to audit logs
3 page rules (maximum)

View paid plan options here.

Cloudflare CDN map

Cloudflare CDN says it can load assets up to 2x faster, 60% less bandwidth from your servers by delivering assets from 127 data centres.

Setup

You will need to sign up at cloudflare.com

After you create an account you will be prompted to add a siteCloudflare will pull your public DNS records to import.

You will be prompted to select a plan (I selected free)

Verify DNS settings to import.

You will now be asked to change your DNS nameservers with your domain reseller

TIP: If you have an SSL cert (e.g Lets Encrypt) already setup head to the crypto section and select ” Full (Strict)” to prevent ERR_TOO_MANY_REDIRECTS errors.

Cloudflare UI

I asked Twitter if they could kindly load my site so I could see if Cloudflare dashboard/stats were loading.

Could I kindly ask if you are reading this that you visit https://t.co/9x5TFARLCt, I am writing a @Cloudflare blog post and need to screenshot stats. Thanks in advance

— Simon Fearby (Developer) (@FearbySoftware) March 13, 2018

The Cloudflare CTO responded. 🙂

Sure thing 🙂

— John Graham-Cumming (@jgrahamc) March 13, 2018

Confirm Cloudflare link to a domain from the OSX Comand line

host -t NS fearby.com
fearby.com name server dane.ns.cloudflare.com.
fearby.com name server nora.ns.cloudflare.com.

Caching Rule

I set up the following caching rule to cache everything for 8 hours instead of WordPress pages

“fearby.com.com/wp-*” Cache level: Bypass

“fearby.com.com/wp-admin/post.php*” Cache level: Bypass

“fearby.com/*” Cache Everything, Edge Cache TTL: 8 Hours

Cache Results

Cache appears to be sitting at 50% after 12 hours. having cache os dynamic pages out there is ok unless I need to fix a typo, then I need to login to Cloudflare and clear the cache manually (or wait 8 hours)

Performance after a few hours

DNS times in gtmetrix have now fallen to a sub 200ms (Y Slow is now a respectable A, it was a C before). I just need to wait for caching and minification to kick in.

webpagetest.org results are awesome

See here: https://www.webpagetest.org/result/180314_PB_7660dfbe65d56b94a60d7a604ca250b3/

Load Time: 1.80s
First Byte 0.176s
Start Render 1.200s

Google Page Speed Insights Report

Mobile: 78/100

Desktop: 87/100

Check with https://developers.google.com/speed/pagespeed/insights/

Update 24th March 2018 Attacked?

I noticed a spike in and traffic (incoming and threats) on the 24th of March 2018.

I logged into Cloudflare on my mobile device and turned on Under Attack Mode.

Cloudflare was now adding a delay screen in the middle of my initial page load. Read more here. A few hours after the Attach started it was over.

After the Attack

I looked at the bandwidth and found no increase in traffic from my initial host VM. Nice.

Thanks, Cloudflare.

Cloudflare Pros

Enabling Attack mode was simple.
Soaked up an attack.
Free Tier
Many Reports
Option to force HTTPS over HTTP
Option to ban/challenge suspicious IP’s and set challenge timeframes.
Ability to setup IP firewall rules and Application Firewalls.
User-agent blocking
Lockdown URL’s to IP’s (pro feature)
Option to minify Javascript, CSS and HTML
Option to accelerate mobile links
Brotli compression on assets served.
Optio to enable BETA Rocket loader for Javascript performance tweaks.
Run Javascript service workers from the 120+ CDN’s
Page/URL rules o perform custom actions (redirects, skip cache, Encryption etc)
HTTP/2 on, IPV6 ON
Option to setup load balancing/failover
CTO of Cloudflare responded in Twitter 🙂
Option to enable rate limiting (charged at 10,000 hits for $0.05c)
Option to block countries (pro feature)
Option to install apps in Cloudflare like(Goole Analytics,

Cloudflare Cons

No more logging into NameCheap to perform DNS management (I now goto Cloudflare, Namecheap are awesome).
Cloudflare Support was slow/confusing (I ended up figuring out the redirect problem myself).
Some sort of verify Cloudflare Setup/DNS/CDN access would be nice. After I set this up my gtmetrix load times were the same and I was not sure if DNS needs to replicate? Changing minify settings in Cloudflare did not seem to happen.
WordPress draft posts are being cached even though page riles block wp-admin page caching.
Would be nice to have ad automatic Under Attack mode
Now all sub-domains were transferred in the setup ( id did not know for weeks)

Cloudflare status

Check out https://www.cloudflarestatus.com/ for status updates.

Don’t forget to install the CloudFlare Plugin for WordPress if you use WordPress.

More Reading

Check out my OWASP Zap and Kali Linux self-application Penetration testing posts.

I hope this guide helps someone.

Ask a question or recommend an article

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

Revision History

v1.8 host Command from the OSX CLI

v1.7 Subdomain error

v1.6 Cloudflare Attack

v1.5 WordPress Plugin

v1.4 More Reading

v1.3 added WAF snip

v1.2 Added Google Page Speed Insights and webpage rest results

v1.1 Added Y-Slow

v1.0 Initial post

Using Platforma Web Wireframe Kit to build a website (prototype)

November 24, 2017 by Simon

I have blogged before about building a server for users to install WordPress, optimizing images in WordPress, deploying WordPress via CLI, moving WordPress, speeding up WordPress and securing WordPress but what do you do if you want a non-WordPress site without the support hassles?

Recently I gave the https://platforma.ws iOS prototyping library extensions a test. I was delighted to find they had a Web Wireframe Kit (generation suite) for prototyping and exporting working websites. You can try the free version or buy a licence here.

Creating a Website with Platforma Web Wireframe Kit

Goto https://platforma.ws and click HTML Generator (or click here)

You will be presented with an empty website ready for your attention.

Adding Website Elements

It’s as simple as clicking a purple add button.

This reveals a number of HTML templates samples that you can drag and drop to your website design.

You can then choose a category (e.g “Header”) and see the elements of the available sample.

Simply drag and drop the elements out into your design.

Now, Let’s click the purple Add (in the top left) button and add a sample Header section, sample Contents, sample Slider, sample Body, sample first Call to Action section, sample Pricing Table, sample second Call to Action section, sample Footer section.

30 seconds later and I have generated designed a site ready to edit the exported HTML.

Exporting Your Site from Platforma

Click on the Export button (in the top right).

I was greeted with the following export screen, this page explains the difference in export options: http://app.platforma.ws/docs/

I don’t need “node.js” or “gulp” “Advanced Version” (PUG + STYLUS) so I’ll choose “Simple Version” (HTML + CSS + JS).

You will need to enter a licence key to continue the export.

The website export download came down just fine.

Code

The code looks ok, I did notice that images were missing alt tags so I added those in.

Any Errors in the Code (in Chrome)?

Nope, Chrome loads the code with no errors.

Testing Online

How about HTML5 and WCAG 2.0 AA

I uploaded the zip file to my server (using the scp command), I could have used SFTP.

scp /local/folder/local-file.zip [email protected]:/www/destination-folder/

I unzipped the site with

sudo apt-get install unzip
unzip filename.zip

The site loads just fine in a web browser

Accessibility

I used https://achecker.ca/checker/index.php to test the site with WCAG 2.0 AA, the only remaining issues I found were in relation to the multiple H1, H2 etc tags (this can be fixed by moving the H CSS code to custom classes and removing H1, H2 etc tags altogether (and reference the custom class matching the H* tags)).

fyi: The potential WCAG problems that were being alerted were in relation to…

My alt tags were potentially short
Potential Colour warnings
Potential Contrast warnings
Missing a “Skip to content” block
Reporting of placeholder graphics and alt tags (a checker is smart)
etc

I tested the sites HTML compliance with https://validator.w3.org/, the code passed with flying colours.

Customizing

I could not find a way to edit the elements in the http://app.platforma.ws/# like the Platforma iOS Adobe XD Kit but you can quickly edit in your HTML after exporting (using your editor of choice like Dreamweaver, Sublime or Notepad).

Conclusion

Platforma Web Wireframe Kit is an essential tool for anyone wanting to build quick web prototype (or even live sites) website for themselves, clients etc. I am very impressed with the code created.

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.1 Added more, fixed a bit.

etc

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

November 23, 2017 by Simon

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.

Extract the Zip file.

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

Adobe XD iOS assets are in two files.

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).

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).

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.

Performa iOS Demos (Zoomed Out)

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

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.

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

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).

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.

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.

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.

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.

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

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.

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

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

November 11, 2017 by Simon

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

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.

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

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

Congratulations, Android Studio 3 should now be 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.

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

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.

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

You can choose an existing Android Device (emulated)

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).

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).

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).

When you have a physical Android device setup and connected, you can choose to run the app on the physical 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).

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.

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).

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

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"

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

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)") }

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

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).

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) ).

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).

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“).

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).

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

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).

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.

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

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.

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“.

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

APK living on your device 🙂

The Android Studio also has a real device debugger.

Monitor output from a show stats from a real device

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

Use Certificate Pinning with the library – http://square.github.io/okhttp/ in Android for network calls. Read my post on Beyond SSL with Content Security Policy, Public Key Pinning etc to set it up on a Vultr Server.
Your app will be decompiled (with tools like Apktool) so don’t store passwords
Use encryption for in-app strings.
Read: https://androidsecurity.info/
Storing your secure information in the NDK
Check if your app is running on an emulator (is it being decompiled?)
Check if your app is debuggable (has the manifests been changes)
Never trust devices
Check your apps certificate (has in been disassembled and recompiled)
Consider using DexGuard Pro
Use the Google SafetyNet API
Test your devices with the Compatibility Test Suite from Google.
Use environment variables or config files too laod API tokens etc.
Monitor miss-use (attacks, break-ins or API hits) early.

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.

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

November 4, 2017 by Simon

@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

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

Nginx Caching
OpCache if you are using PHP.
Node-cache – In memory caching.
Redis – In memory caching.

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

Average time to first interactive paint

Average time to first on load (finished)

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

(Image credit: netcraft.com)

Active Web Sites v Hostnames

(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.

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 )

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

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.

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

Google Page Speed Insights

Goto PageSpeed Insights and scan your site.

Page Speed Insights Report Results

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

Moving away from a shared CPanel server
Optimized Images in WordPress with the EWWW plugin
Made speed improvements in WordPress
Wordfence Security Plugin for WordPress buy also set up a WordFence firewall (slowing things down)
etc

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

Infographic: So you have an idea for an app

October 31, 2017 by Simon

I created this graphic as I was asked by multiple people how to develop an app. This does not include tips on coding but many people with the non-technical prerequisites to building an app.

I hope this graphic helps someone (It’s my first infographic/decision flow image, feedback welcome).

So You Have an Idea For An App: Graphic

Click for a larger version.

Standalone Image URL’s

v1.3 (22nd November 2017)
  https://fearby.com/wp-content/uploads/2017/10/Infographic-So-you-have-an-idea-for-an-app-v1-3.jpg
v1.2 (4th Nov 2017, Added requirements and MoSCoW): 
  https://fearby.com/wp-content/uploads/2017/10/Infographic-So-you-have-an-idea-for-an-app-v1-2.jpg
v1.1 (1st Nov 2017, Fixed Typos): 
  https://fearby.com/wp-content/uploads/2017/10/Infographic-So-you-have-an-idea-for-an-app-v1-1.jpg

todo: Things to add Issues to fix in 1.4:
 - Add user personas and Epic, Story and Task stages.
 - How to capture good stories (and validated ideas (landing pages/interviews/problems/value/painpoints)

Define the problem(s) (pain points)

Before you start coding, do list your app requirements (problem’s to solve (pain points)).

Atlassian JIRA or Trello can help with this. I personally use (and like) Atlaz.io (now Hygger), I reviewed the BETA here).

Using Trello lists are also a simple way to capture tasks/ideas.

More on these Read more here also read my Atlaz.io BETA Preview here.

Nothing beats pen and paper too.

Moscow Prioritization

Must-Have Should-Have, Could-Have and Won’t-have are buckets you should sort ideas into. If you have trouble moving items away from Must to Should, Could or Won’t then assign a fictitious monetary value to spend on each item and that will help you decide what is more important.

Read this MoSCoW Method article at Wikipedia: https://en.wikipedia.org/wiki/MoSCoW_method

Managing MoSCoW tasks on paper is OK if you do not want to use planning software.

More

Read my guide on how to prototype apps with Adobe XD guide here. You can also Prototype a Web app with Platforma (review here).

Read my post on how to develop software and stay on track.

Research

Do research your idea for market fit/need, competition, complexity, legal and validate ideas early. It’s best to find out early that Google will quote $60,000+ TAX a year to allow you to use Google map’s in your app early, then you can use https://www.mapbox.com for $499 a year.

Do you have competition?

Some people say “don’t develop an app that already exists”. Why would you develop a new Uber app? Henry Ford did make a new transportation mode when people were happy with horses, other car manufacturers like Tesla are moving in on the space so don’t be discouraged.

Landing Page

A landing page with a signup form (Newsletter and Register Interest) form is a good way to validate ideas and get feedback early (I would suggest you use a free Mainchimp signup form, a generated website with Platforma on a $5/m server for quick results). There is no point coding and launching to crickets.

Do you have an app Prototype or Mock-Up?

This is very important and easy step. Programs like Adobe XD CC (read my guide here) and Balsamiq can help you prototype an app, Platforma can help you prototype web apps.

Have you validated your idea (app) with end-users?

If you don’t do this you are mad. Watch this video to see lessons learned from Trades Cloud.

Is this app idea a hobby (passion)?

This can help you limit costs and expectations. Cheap serves exist (read here and here).

Do you have time to develop/manage this?

Developing and managing an app and planning (paying for) development cycle can be time-consuming and mentally draining.

Can you code?

Do you need to hire developers or learn to code? Blog post coming soon on how to hire coders.

Do you have funds?

Having funds on hand to set up and build an app is very important.

Do you want to hide developers (or get Venture Capital)?

This can help you get moving but you will have to give away a slice of the profits and or IP, managing mentors and VC’s can be tiresome.

Have you set failure criteria (post-mortem)?

Read this page on lessons learned from over 200 startup failures, save your favourites. Having realistic goals and limits is a wise idea, do stop when you reach preset limits.

Do you have a business case?

There is plenty of business case generator template’s, you will want to document some of the following.

What is your apps Purpose – App X will be..
What is your Mission Statement – App X will..
Who are your Target Customers – Retail..
Who are the Early Adopters – Retail..
What Problems does your app solve – App X will..
What Milestones will your app go through – iOS, Android, Apple TV, Web etc..
What Existing solutions exist – App: A, B and C..
How does your app Solve your customer’s problems (pain points) – App X will..
How will your app Find customers – Word of Mouth, Referrals, Advertisements?
What is your Revenue model – Sales, Ad’s, Subscriptions?
What is your apps Goal statement – App X will hit X users in X?
What are your apps Failure points – If app X does not reach X or monthly costs reach Y….
What is your Marketing message – App X will..
What is your apps Metrics – iOS, Android, Apple TV apps..
What is your Unfair Advantage – Why will you succeed over others?

Are you using a project management methodology?

Proven Methodology can help you develop software and stay on track, software like Atlaz, JIRA or Trello are highly recommended tools. Capturing ideas and processing feedback in tools is very important.

Before you code (or hire coders) use source code versioning software like GitHub and Bitbucket (guides here and here). You want to retain the code and insist on owning it.

Product Goal

Simon Sinek has a good video on companies (or Products) being in a finite or infinite game.

Are you in full control of your development stack?

If you are not a developer you may not care if you are in control, but you will if there are issues with hired developers or issues with service providers. I moved from CPanel to self-managed servers, moved from IBM Cloudant to Digital Ocean to AWS then Vultr servers where I can have full control or scalability, features, security and costs.

Can you forecast the costs?

Lowering cost and boosting performance is important and having spare money is a good thing.

I read recently that Telsla is burning through $6,000 a minute and is forecast to need something like 2 billion dollars in the next 2 years. Software as Service platforms will drain your budget quick (they do take on some risk and maintenance tasks), is this worth it?

Mark Fedin (CEO and Co-founder at Atlaz) has a great post on the topic of viability Stop Dabbling At Startups .

Are you using the right tech?

Don’t be afraid of changing tech along the way, you may start with MySQL and move to MongoDB, Redis, Oracle ot MSSQL database servers etc.

Do you have systems to capture customer feedback?

Self-explanatory, you are solving customer problems, right? You will pivot in the first year (trust me).

What is your revenue/sales model?

If you don’t know how to make money then don’t make an app (apps are expensive to code and maintain).

Are you prioritizing task?

I have blogged about this before, do use the tools to stay on track.

Funny Bit

Donate and make this blog better

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

v1.5 Fixed typos and fixed CDN link issue.

v1.4 Updated the graphic to version v1.3.

Short (Article): https://fearby.com/go2/so/

Short (Image): https://fearby.com/go2/so-img/

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

October 25, 2017 by Simon

Adobe has introduced (v1.0.x) Adobe XD CC, Adobe claims you can turn your best ideas into beautiful experiences — fast. Let’s give it a try.

Adobe Experience Design (Beta) is now Adobe XD CC. You can now design, prototype, and share amazing user experiences for websites, mobile apps, and more — all in the same app. Adobe XD CC is similar to Balsamic Mockup software.

Adobe XD Intro

Here is a great video demoing Adobe XD.

Install Adobe XD

If you don’t already have Adobe CC installed you can download a trial here. If you are wanting to install on Windows you will need Windows 10 (Anniversary Edition). Adobe has minimum system requirements listed here.

Start a Project

After you start an iOS project you will be looking for controls to add to your prototype. Adobe XD CC offers where you can download UI Kits direct from vendors (a shame when you are used to XCode or Visual Studio having controls preloaded).

Installing the Apple UI Design Resources

You will need to download the Apple UI Design Resources for Design XD from the Apple site (use the menu in the screenshot below or click here), they do not come with Adobe XD CC.

Here is more information on using Adobe XD CC UI Kits.

Download the iOS 11 UI resources for Adobe XD CC from the Apple site.

You can now extract the iOS resource files from Apple for use in Adobe XD projects. When iOS 12 and Android 9 comes out you can download new UI Kits.

Once you extract the files from the zip file, run the ./iOS-11-AdobeXD/Fonts/San Francisco Pro.pkg file to install iOS 11 font on yoir system.

I could not find a way to install the UI Kits permanently into Adobe XD CC (Searching revealed you need to open templates (as a separate process or open file in Adobe XD (double-click on the file)) and paste elements into your project). This seems clunky.

Why use Adobe XD

You can use Adobe XD to prototype interfaces around the common activities, a person may perform while using the apps you are prototyping. You can design an app’s onboarding, intro or user screens before actually developing the app.

http://bundle.greatsimple.io/

https://platforma.ws/ also has an extension for Adobe XD to allow you to get a prototype fast with ready to go layout elements. I will write a new blog post using https://platforma.ws/ in Adobe XD.

iOS Prototype Project

Let’s create an iOS project. Start a new iPhone 6/7 Project AND open up a UI template file in a second Adobe XD program (e.g ./iOS-11-AdobeXD/UI Elements + Design Templates + Guides/UIElements+DesignTemplates+Guides.xd).

Now you can drag and drop elements from the UI template (from Apple) into an XD CC app prototype project

TIP: Apple has a great site explaining how you can design and deliver apps (open the Apple Human Interfaces – iOS Design Themes page here). Apple also has assets and guidelines available for marketing your apps here.

To make buttons interactive you will need to click the Prototype tab and then drag the blue tabs to the right of interactive elements to the target screens.

You can learn more on making interactive prototypes here.

Tip: Don’t forget to add interactive links back to the home screen.

You can then press the play button to preview the app prototype simulated in software.

Export

You can now save and export your prototype app project to PNG, PDF, Web or other formats to others to send for review.

Adobe XD is big on saving to the Adobe Cloud allowing others to see changes in real-time. If you have linked assets in your prototype project (say Photoshop files) anyone viewing an XD prototype on the Adobe Cloud can automatically see changes in real-time (see then Adobe XD intro video above).

Running Prototypes on Real Devices

I was able to install Adobe XD app onto iOS, log in with my Adobe ID and the prototype popped up when I connected my iOS device to my Mac. More info here.

I was able to install the Android Adobe XD app and also sync a prototype app (Android was a bit slower to find the project but still the same process as iOS).

More Help

Adobe XD CC Official User Guide

https://helpx.adobe.com/xd/user-guide.html

30 Adobe XD CC/Adobe Comp tablet app tips

Conclusion

Pros

Adobe XD comes with Adobe CC.
Ope to feature enhancements.
Loads or 3rd party tools and user forums.
Automatic detection of duplicate actions (copy and paste grid items) and suggestion of repeating grids by pressing Command+R.

Cons

Unable to import UI Kits permanently into Adobe XD (I have to run multiple XD apps and paste UI elements between). Why would I no just stick with Adobe Photoshop?
Placement of UI elements like fonts feels clunky when compared to XCode and Visual Studio.
Duplicating prototype forms was not an option in the right-click (copy and Paste worked and so did ALT+Drag).

On the positive side, Adobe is openly allowing people to suggest and vote on features here https://adobexd.uservoice.com

But with Adobe XD you have the flexibility of having a design and prototyping product in one package with new monthly features.

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.2 added https://platforma.ws/ information.

etc

Short: https://fearby.com/go2/prototype/

Create your first Hello World Electron app on OSX

September 27, 2017 by Simon

Electron allows you to build cross-platform desktop apps with JavaScript, HTML, and CSS based on NodeJS. Electron’s home is https://electron.atom.io

Electron will allow you to build a web app and package it up to run locally with HTML and bootstrap or more advanced widgets like https://www.jqwidgets.com/ or ExtJS. Marc Fearby is creating a Git starter project for Electron with Sencha here. You can happily develop a local web app and have back-end available by an APIs if need be (read my guide on setting up and configuring a server and securing it and installing an SSL certificate).

Nodejs

Electorn requires NodeJS, please confirm your node version (in my case I have an old version installed)

node --version
v0.12.4

Run the node installer from https://nodejs.org/en/download/

Now I have the newer version on OSX

node --version
v6.11.3

Create a folder for you Electron project (e.g ~/Documents/ElectronApps/HelloWorld ).

Navigate to that folder in the terminal

cd ~/Documents/ElectronApps/HelloWorld/
pwd
/Users/simon/Documents/ElectronApps/HelloWorld

Now type: npm init

npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (HelloWorld) helloworld
version: (1.0.0) 0.0.1
description: Hello World in Electron
entry point: (index.js) app.js
test command: 
git repository: 
keywords: electron,hello,world
author: Simon Fearby
license: (ISC) 
About to write to /Users/simon/Documents/ElectronApps/HelloWorld/package.json:

{
  "name": "helloworld",
  "version": "0.0.1",
  "description": "Hello World in Electron",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "electron",
    "hello",
    "world"
  ],
  "author": "Simon Fearby",
  "license": "ISC"
}

Installing Electron

sudo npm install electron --save-dev --verbose

verbose was added to allow you to see as the install could take a while

...
Downloading electron-v1.7.8-darwin-x64.zip
[======>                                      ] 16.4% of 48.41 MB (319.96 kB/s)
...

Create a javascript file as specified in your package.json

sudo nano app.js

Contents of app.js

const elcetron = require('electron');
const app = electron.app;

const path = require('path');
const url = require('url');

const BrowserWindow = electron.BrowserWindow;
var mainWindow;

app.on('ready', function() {

        mainWindow = newBrowserWindow({width: 1024, height: 768, backgroudColor: '#ffffff'});

        mainWindow.loadURL(url.format({pathname: path.join(__dirname, 'index.html'), protocol: 'file:', slashes: true } ));

});

Update the package.json to include a start command (electron .)

{
  "name": "helloworld",
  "version": "0.0.1",
  "description": "Hello World in Electron",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron ."
  },
  "keywords": [
    "electron",
    "hello",
    "world"
  ],
  "author": "Simon Fearby",
  "license": "ISC",
  "devDependencies": {My contents
    "electron": "^1.7.8"
  }
}

Create an index.html file

sudo nano index.html

Contents

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World...</title>
</head>

<body>
Hello World...
</body>

</html>

Now we can start the app.

Electron Package Manager

You can install the Electron Packager to make Apps for desktop OS’s. Read more at https://github.com/electron-userland/electron-packager

Install the electron-packager module into your existing project.

sudo npm install electron-packager --save-dev

If you receive the error “-bash: electron-packager: command not found” try and install the packager globally

sudo npm install electron-packager -g

Now we will package the app for OSX

sudo electron-packager .
Packaging app for platform darwin x64 using electron v1.7.8
Wrote new app to /Users/simon/Documents/ElectronApps/HelloWorld/helloworld-darwin-x64

I can now uninstall the electron packager from my project as it is now installed globally

sudo npm remove electron-packager

Building apps on OSX

Build an OSX App

electron-packager .

Rebuild an OSX app

sudo electron-packager . --overwrite

This will build an OSX app

Building apps on Windows

1) Ensure nodejs is installed (reboot if required)

2) Test your app (npm start)

3) Install Electron Packager Globally

npm install electron-packager -g

4) Don’t forget to install Electron on Windows

npm install electron --save-dev --verbose

5) You can now package a Windows executable (TIP: Run the command as an Administrator to prevent write errors).

electron-packager .

Advanced electron-packager commands

Build and specify a build number

electron-packager ./ helloworld --build-version=0.0.1

Build ap with icons

electron-packager . --overwrite --arch=x64 --platform=darwin --prune=true --out=release-builds --icon=assets/icons/mac/icon.icns

Building linux app

electron-packager . --overwrite --icon=assets/icons/png/icon.png --platform=linux --arch=x64 --prune=true --out=release-builds

Use sites like https://iconverticons.com/online/to generate icns files and place them in “assets\icons\mac\icons.icns”

View electron-packager issues here: https://github.com/electron-userland/electron-packager/issues

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 (24th Sep 2017)

etc

Securing Ubuntu in the cloud

August 9, 2017 by Simon

It is easy to deploy servers to the cloud within a few minutes, you can have a cloud-based server that you (or others can use). ubuntu has a great guide on setting up basic security issues but what do you need to do.

If you do not secure your server expects it to be hacked into. Below are tips on securing your cloud server.

First, read more on scanning your server with Lynis security scan.

Always use up to date software

Always use update software, malicious users can detect what software you use with sites like shodan.io (or use port scan tools) and then look for weaknesses from well-published lists (e.g WordPress, Windows, MySQL, node, LifeRay, Oracle etc). People can even use Google to search for login pages or sites with passwords in HTML (yes that simple). Once a system is identified by a malicious user they can send automated bots to break into your site (trying millions of passwords a day) or use tools to bypass existing defences (Security researcher Troy Hunt found out it’s child’s play).

Portscan sites like https://mxtoolbox.com/SuperTool.aspx?action=scan are good for knowing what you have exposed.

You can also use local programs like nmap to view open ports

Instal nmap

sudo apt-get install nmap

Find open ports

nmap -v -sT localhost

Starting Nmap 7.01 ( https://nmap.org ) at 2017-08-08 23:57 AEST
Initiating Connect Scan at 23:57
Scanning localhost (127.0.0.1) [1000 ports]
Discovered open port 80/tcp on 127.0.0.1
Discovered open port 3306/tcp on 127.0.0.1
Discovered open port 22/tcp on 127.0.0.1
Discovered open port 9101/tcp on 127.0.0.1
Discovered open port 9102/tcp on 127.0.0.1
Discovered open port 9103/tcp on 127.0.0.1
Completed Connect Scan at 23:57, 0.05s elapsed (1000 total ports)
Nmap scan report for localhost (127.0.0.1)
Host is up (0.00020s latency).
Not shown: 994 closed ports
PORT     STATE SERVICE
22/tcp   open  ssh
80/tcp   open  http
3306/tcp open  mysql
9101/tcp open  jetdirect
9102/tcp open  jetdirect
9103/tcp open  jetdirect

Read data files from: /usr/bin/../share/nmap
Nmap done: 1 IP address (1 host up) scanned in 0.17 seconds
           Raw packets sent: 0 (0B) | Rcvd: 0 (0B)

Limit ssh connections

Type	Protocol	Port Range	Source	Comment
HTTP	TCP	80	0.0.0.0/0	Opens a web server port for later
All ICMP	ALL	N/A	0.0.0.0/0	Allows you to ping
All traffic	ALL	All	0.0.0.0/0	Not advisable long term but OK for testing today.
SSH	TCP	22	0.0.0.0/0	Not advisable, try and limit this to known IP’s only.
HTTPS	TCP	443	0.0.0.0/0	Opens a secure web server port for later

Personal Tech 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.

App

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

Using Platforma Web Wireframe Kit to build a website (prototype)

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

Installing Android Studio 3 and creating your first Kotlin Android App

Building faster web apps with google tools and exceed user expectations

Infographic: So you have an idea for an app

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

Create your first Hello World Electron app on OSX

Popular

Security

Code

Tech

Wordpress

General