Code, Security and Server Stuff

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)

"If you're not still learning, you're already dying."
- Ryan Holiday - Ego is the Enemy

Follow me on Twitter: @FearbySoftware

View All Posts.

Advice

Setup a Certification Authority Authorization (CAA) DNS record(s) to prevent https cert issue/misuse

by

On February 22nd 2017 CAA’s that issue https certificates are required to check what CAA’s are allowed to issue HTTP’s certificates for a website. To limit who can create HTTP’s certificates for your site all you need to do is specify a number of DNS records.

Advertisement:



DNSSEC

Before adding DNS CAA records ensure you have enabled DNSSEC for extra security, this is not needed to setup CAA records but it’s a good idea.

DNSSEC Explained

Read my post here on setting up DNSSEC with Cloudflare here.

Namecheap allows you do set DNSSEC with 1 click (making the above guide not required unless you use Cloudflare).

One Click Enable DNS SEC

Testing DNSSEC

First, test DNSSEC on your website here: https://dnssec-analyzer.verisignlabs.com/ (I already have DNSSEC enabled)

I use Namecheap for buying domains and HTTP’s certs (you can buy a new domain here). Namecheap allow you to easily enable DNSSEC and CAA DNS records.

Read Namecheap’s CAA guide here.

Scott Helme tagged a great write up on CAA here.

Advertisement:



Testing CAA (on your website)

Go to https://dev.ssllabs.com/ssltest/ and scan your website

https://dev.ssllabs.com screenshot showing a domain input box

You will see if CAA is enabled after the https test is complete (scroll past the rating)

https://dev.ssllabs.com scan showing A+

In my case CAA records were not detected.

Adding DNS CAA records at Namecheap

I logged into Namecheap, clicked Manage domain and clicked the Advanced DNS tab

Screenshot showing Namecheap Advanced DNS screen.

Advertisement:



I click Add New Record (DNS), then I selected CAA
Screenshot of add NDS CAA record at Namecheap

Here are records for my main domain (allowing Comodo/Sectigo HTTP’s certificates only)

Here is my record allowing a sub domain (allowing Lets Encrypt HTTP’s certificates only)

It is also possible to setup email alerts of CAA violations where CAA’s support it. I setup a caa@fearby.com email alias.

Image of my final Namecheap DNS config.

Screenshot os Namecheap DNS entries (table below)

Advertisement:



Test CAA Records

I visited https://dev.ssllabs.com/ssltest/ and performed a final scan.

CNS CAA Final scan now passes at dev.ssllabs.com

Pass 🙂

I do have real time remote server monitoring reporting on https presence and uptime, read the post here.

Nixstats graphs

Plug(s)

Warning

I had an issue where I failed to update my DNS (and define a CAA record) for the sub domain used for Nixstat reporting. I was receiving this error.

Connection not private warning.

dev.ssllabs.com was reporting the cert expired?

dev.ssllabs.com ssl report

The awesome chat support (Vincent) over at Nixstats found out it was because I did not have CAA record for the sub domain allowing “letsencrypt.org” to generate certs.

Created CAA record for status.feabry.com (CAA 0 issue "letsencrypt.org"

If you manually renew a Lets Encrypt cert with the following command without a CAA record you will see an error

> certbot -q renew

Error Output

Attempting to renew cert (subdomain.fearby.com) from /etc/letsencrypt/renewal/
subdomain.fearby.com.conf produced an unexpected error: Failed authorization procedure.
subdomain.fearby.com (http-01): urn:acme:error:caa :: CAA record for
subdomain.fearby.com prevents issuance. Skipping.
All renewal attempts failed.

DNS additions and changes take a while to propagate so monitor Whats My DNS for change status

https://www.whatsmydns.net/#CAA/status.fearby.com

Thanks for reading.

For simplicity I have removed all sub domain CAA settings for records and only set global ones

Revision History

v1.2 Troubleshooting

v1.1 Plugs

v1.0 initial Post

I am moving away from Apple hardware

by

My Late 2012 Mac Book Pro Retina laptop is all but dead, it has many dead pixels and because of the poor cooling and is NOT a joy to use anymore. It does not “JUST WORK” and personally, I do not think “thinner” laptops can handle Australian summers as its hardware cooling it inadequate above 40c air temperatures.

My laptop processor would spend more time thermal throttling (at 104c)  in Web Browsers and text editors that at normal speeds. Opening up productivity apps like Photoshop or Premiere Pro would send the laptop into meltdown.

Advertisement:

Image of temperate monitoring showing an overheating macbook when the apple is idle

Frequent high temps were common.

Temp monitoring showing 100+c temps

Attempted Fixes

Warning Disclaimer: My laptop is out of warranty and I know my way around the inside of a computer hardware without zapping it. Do not attempt to open your laptop unless you know what you are doing, have backed up your data and are prepared to brick your computer.

  • I removed dust from inside the laptop.
  • I tried to only use the laptop refrigerative air conditioning
  • I replaced the thermal paste on the CPU and GPU (3 times)
  • I reinstalled OSX Mojave and reset the SMC and PRAM multiple times.
  • I ran the fans at 100% (see post here), The fans were operating at full capacity and were not broken.

The stock thermal paste was crusty after 5 years. The plastic CPU/GPU cover was visibly cooked.

Picture of dry stock thermal paste

I ordered some new Thermal grizzly thermal paste, I had some older silicone paste on hand just in case.

Picture of thermal paste options

After many reapplications of the Thermal Grizzly, the older silicone paste seemed to work the better???

Picture of thermal paste applied on a processor

Advertisement:

After a few months, all of the fixes above did not seem to work. OSX Mojave would spin up the CPU and GPU into a frenzy overloading the single heat pipe within minutes.

Time to try some more drastic cooling modifications?

I tried improving the efficiency of the single (copper) heat pipe that is shared between an Intel i7 2.6 GHz and an Nvidia Video Card by removing the black paint by stripping the paint with acetone.

Picture of the apple heat pipe in a jar of acetone

I manually removed paint from in between the heat sink fins with a LED to reveal the metal.

Picture of paint being removed from the apple heat pipe fins

I reinstalled the heat pipe with high hopes? That looks nice 🙂Picture of the heat pipe minus paint reinstalled

I removed the old thermal paste and added new paste. First I tried Thermal Grizzly Cryonaut. I re-applied the paste three separate times as each application was not that much better than the old crusty stock paste from Apple. Did I have a bad batch of Thermal Grizzly?, It seemed thick and not very viscous. I ended up using an old tube of silicone paste (the white stuff) as my Arctic Silver was too old to try and I did not want to order more.

More heatpipe post re installation pictures

With the silicone paste applied and the paint removed temperatures were about 15c lower at max, I still had frequent thermal throttling but at least I had a reserve buffer.

This was all before the Aussie Heatwaves and high temperatures soon returned.

Is there still room for improvement?

How heat pipes work

Picture of how heatpipes work

Advertisement:

Heat pipes have an evaporating (hot part) and condensing zone (cool part) on the heat pipe. I noticed Apple’s “stock” condensing fins were small, would improving this zone help?. Time to improve the condensers zones by adding larger copper heat sinks to the bare side of the heat pipe.

I purchased a few copper Xeon/Sun server sized heat sinks and thermal epoxied them to the condensing end of the heat pipe. Yes, they would protrude out the bottom of the case but #Meh.  I can fix that by extending the base of the laptop down and making it thicker (old school style).

The server heat sinks arrived

Side on picture of server heatpipes

I cut the heat sinks in half.

Picture of a hacksaw cutting heatsinks

I packed the fins with paper before cutting to ensure the cut did not damage the fins.

Picture of a cut heatsink

After cutting, I wiped the copper heat sinks with vinegar to restore the surface to a nice copper shine.

I tested the heat sink idea with silicone paste first

Advertisement:

picture of silicone tested on the heatsink

Temps were 25c lower, Now it’s time to use Arctic Silver Thermal Epoxy 

Picture of two part thermal epoxy

I applied the Thermal Epoxy to the heat pipe (I temporary had foil strips above the fans so I did not block them while the epoxy dried.

Picture of epoxy applied

I then stuck the heat sink’s to the heat pipe (with Arctic Silver Thermal Epoxy).

Heatsinks Thermal Expoxied on

I toyed with a clear case but decided against it for static electricity and stability reasons.

Clear Case pon the botom of the laptop picture

I purchased a second Mac Book base for so I could cut holes for the heat sinks to protrude and use the original base to hide the modification.

Cut holes in the base of the laptop base and purchased a second case bottom

I made a 30 mm base wall to so I could use it as a wall between the laptop base and the new 30mm lower base.

picture of the base side wall i made

I added some 5-volt and 12 -volt fans inside the new extended 30mm base.

Collage of base assembly, screws and wires

Advertisement:

Finished Product

A normal looking Mac Book except for the 30mm lower base and internal 5V or 12V fans.

Picture of the final mod with 50c lower temps and a 30mm bottom slab under the laptop

External power plugs on the left side, I will add lights at a later stage.

picture of the external power plugs flush with the case on the side of the laptop

Are the temps lower?

50 lower temps screenshot

Videos

Video: Mac Book Pro cooling mod, I can now watch 1080p videos without maxing the CPU

Video: Mac Book Pro cooling mod with external powered 5v or 12v fans

Conclusion

50c lower temps are nicer at idle but in Premiere Pro (exporting video) the laptop was still thermal throttling like mad and temps were terrible (100+). Lets not get started when I start some development VM’s

Conclusion 2 weeks later

This is still not a joy to use. I don’t think I have the right to expect a 5-year-old laptop to keep up running a CPU/GPU intensive OS and applications.

Time to buy a new computer, Apple still makes thin and over heating laptops by the looks of it? 

Maybe I need to buy a fridge to stick a computer in a fridge to use these days?

YouTube users indicate Apple has a problem with heat.

What computer do I get next?

Advertisement:

Not an Apple made one. I will be moving back to Windows for local development and Linux on servers

Dell Alienware has many heat pipes.

Picture inside a dell alienware laptop with more heatpies

Acer Predator 500

I read a few reviews (e.g this one from Ultra book reviews) and Acer have good cooling.

picture of Acer Predator cooling and heatpipes

MSI GT Series laptops look the best if cooling is important.

Picture of a MSI GT laptop with 9 heatpipes

Or should I build a custom desktop with way more cores

CPU: Threadripper 2950X 16C 32T 

SSD: M.2 SSD: Samsung 970 PRO 512GB
MOBO: Asus Zenith Extreme
Power: Corsair RM1000x 1000W
MEM: Quad 3600 Mhz 
GPU: AMD Radeon VII Navi 3980

Thanks for reading.

 

v1.3 Added videos

v1.2 Updated alt tag descriptions

v1.1 Added “I will be moving back to Windows for local development and Linux on servers”

1.0 Initial Draft

Advertisement:

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

by

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?

Advertisement:


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.

platformaweb001

Adding Website Elements

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

Add Items to Webiste

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

Add Element

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

Categories

Simply drag and drop the elements out into your design.

Drag and Drop

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.

Designed Site

Exporting Your Site from Platforma

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

Export

 

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

Export Options

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

Enter Licence Key

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.

Code

Any Errors in the Code (in Chrome)?

Nope, Chrome loads the code with no errors.

Loading the SIte

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.

I unzipped the site with

The site loads just fine in a web browser

Load

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

WCAG

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.

HTML5

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.

Read More

Check out my guide, Using Adobe XD and Platforma Web Wireframe Kit to prototype an iOS app.

Donate and make this blog better

Ask a question or recommend an article

Your Name (required)

Your Email (required)

Your Question

Revision History

v1.1 Added more, fixed  a bit.

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

Advertisement:



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

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

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 may be 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

Your Name (required)

Your Email (required)

Your 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

by

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.

Advertisement:



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 larger version.

Infographic-So-you-have-an-idea-for-an-app-v1-3

 

Standalone Image URL’s

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.

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

Nothing beats pen and paper too.

Notepad

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 article at Wikipedia: https://en.wikipedia.org/wiki/Moscow

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.

Wire up a prototype

Drag and Drop

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 are plenty of business case generator template,  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

Project Mangement LolProject Mangement Lol

 

 

Donate and make this blog better


Ask a question or recommend an article

Your Name (required)

Your Email (required)

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

by

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.

Advertisement:


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.

Install XD

Start a Project

Create 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 pre loaded).

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.

Apple UI Design Resources

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.

Download resources from 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.

Extract Files

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.

Install UI Kits

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/

http://bundle.greatsimple.io/

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

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.

Make Interactive

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.

Simulate

Export

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

Export

Adobe XD is big on saving to the Adobe Cloud allowing others to see changes in real time.  If you have linked assets in 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).

Android

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

Your Name (required)

Your Email (required)

Your Question

Revision History

v1.2 added https://platforma.ws/ information.

etc

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

How to use Sublime Text editor locally to edit code files on a remote server via SSH

by

This guide will show you how to use Sublime Text editor locally to edit code files on a remote server via SSH.

Advertisement:



This guide assumes oy already have a working SSH connection between your Mac and your remote server (with no firewall issues) and have configured SSH keys via modifying to authorized_keys file to enable SSH access.

Need a server?

I now use UpCLoud for cloud servers as they are super fast (read the blog post here). Get $25 free credit by signing up at UpCloud using this link.

UpCloud is way faster than Vulr.

Upcloud Site Speed in GTMetrix

Setting up slower region specific servers can be found here. Set up a Server on Vultr here for as low as $2.5 a month or set up a Server on Digital Ocean (and get the first 2 months free ($5/m server)). I have a guide on setting up a Vultr server here or Digital Ocean server here.  Don’t forget to add a free LetsEncrypt SSL Certificate and secure the server (read more here and here).

Buy a domain name from Namecheap here.

Domain names for just 88 cents!

Setting up your local machine

Open Sublime Text 3 and press COMMAND+SHIFT+P to bring up the command bar and type Install and click Package Control: Install    Package and click it.

Sublime instal package

Wait a  few seconds for the packages list to show and type “rsub”

Sublime Install RSUB

Ok let’s make an SSH alias to your server on your Mac by typing “sudo nano ~/.ssh/config”

SSH Alias

Make these changes

ssh alias

File contents:

Now we can connect to the server via SSH by typing “ssh mysrv”

ssh connect

After typing the server’s password you will be connected to the ssh server

Now on your local Mac load the following page in a web browser (and review the code): https://raw.github.com/aurora/rmate/master/rmate  and copy the contents to the clipboard.

On the remote server (the SSH one) type:

Now paste the contents or this page into nano editor and save it and exit nano.

Now run this chmod command to make the rmate file executable.

Now on the server, we can open any text file with rmate and have it open locally in Sublime via SSH.  Yes, Open a  file on a server and have it automatically open in locally 🙂

SSH

If you have many files to open then create a bash file to open files with rmate

Contents:

File permissions:

Now we can open may remote files locally by running the bash script.

All saves in Sublime locally are sent to the server 🙂

e.g

 

 

Still here, read more articles here or use the form below to ask a question or recommend an article.

Port Forwarding with vSSH on OSX

If you use a third party ssh program like vSSH you will also need to setup port forwarding to avoid this error

How.

port forward

Now you can open remote files locally with SSH or vSSH too.

Donate and make this blog better



Ask a question or recommend an article

Your Name (required)

Your Email (required)

Your Question

v1.4 Added UpCloud Info.

v1.3 vSSH Port forwarding.

Run an Ubuntu VM system audit with Lynis

by

Following on from my Securing Ubuntu in the cloud blog post I have installed Lynis open source security audit tool to check out to the security of my server in the cloud.

Advertisement:


Lynis is an open source security auditing tool. Used by system administrators, security professionals, and auditors, to evaluate the security defences of their Linux and Unix-based systems. It runs on the host itself, so it performs more extensive security scans than vulnerability scanners. https://cisofy.com/lynis and https://github.com/CISOfy/lynis.

It is easy to setup a server in the cloud (create a server on Vultr or Digital Ocean here). Guides on setting up servers exist ( setup up a Vultr VM and configure it and digital ocean server) but how about securing it? You can install a LetsEncrypt SSL certificate in minutes or setup Content Security Policy and Public Key Pinning but don’t forget to get an external in-depth review of the security of your server(s).

Lynis Security Auditing Tool

Preparing install location (for Lynis)

Install Lynis

Running a Lynus system scan

./lynis audit system -Q

Lynis Results 1/3 Output (removed sensitive output)

Lynis Results 2/3 – Warnings

I resolved the only warning by typing

After updating the Lynis system scan I re ran the text and got

Lynis Results 3/3 – Suggestions

Installing a Malware Scanner

Install ClamAV

Download virus and malware definitions (this takes about 30 min)

Output:

I had an issue on some boxes with clamav reporting I could not run freshclam

This was fixed by typing

Troubleshooting clamav

Clam AV does not like low ram boxes and may produce this error

It looks like the solution is to increase your total ram.

fyi: Scan with ClamAV

Re-running Lynis gave me the following malware status

Lynis Security rating

Installed

After re-running the test I got this Lynis security rating score (an improvement of 1)

Installed and configured debsums and auditd

Now I get the following Lynis security rating score.

Conclusion

Lynis is great great at performing an audit and reccomending areas of work to allow you to harden your system (brute force protection, firewall, etc)

Security Don’ts

  • Never think you are done securing a system.

Security Do’s

  • Update Software (and remove software you do not use.)
  • Check Lynis Suggestions and try and resolve.
  • Security is an ongoing process, Do install a firewall, do ban bad IP’s, Do whitelist good IP’s, Do review Logs,
  • Do limit port access, make backups and keep on securing.

I will keep on securing and try and get remove all issues.

Read my past post on Securing Ubuntu in the cloud.

Scheduling a auto system updates is not enough in Ubuntu (as it is not recommended as the administrator should make decisions, not a scheduled job).

fyi: CISOFY/Lynis do have paid subscriptions to have external scans of your servers: https://cisofy.com/pricing. (why upgrade?)

Lynis Plans

I will look into this feature soon.

Updating Lynis

I checked the official documentation and ran an update check

Not sure how to update?

I opened an issue about updating v2.5.5 here. I asked Twiter for help.

Twitter

Official Response: https://packages.cisofy.com/community/#debian-ubuntu

Git Response

Waiting..

I ended up deleting Lynis 2.5.5

Updated

And reinstalled to v2.5.8

Output:

More actions post upgrade to 2.5.8

  • Added a legal notice to “/etc/issues”, “/etc/issues.net” file’s.

Installing Lynis via apt-get instead of git clone

The official steps can be located here: https://packages.cisofy.com/community/#debian-ubuntu

Unfortunately, I had an error with “apt update”

Error:

Complete install output

I reopened Github issue 491. A quick reply revealed that I did not put a space before “xenial” (oops)

fyi: I removed the dead keystore from apt by typing…

I can now install and update other packages with apt and not have the following error

I will remove the git clone and re-run the apt version later and put in more steps to get to a High 90’s Lynis score.

More

Read the official documentation https://cisofy.com/documentation/lynis/

Next: This guide will investigate the enterprise version of https://cisofy.com/pricing/ soon.

Hope this helps. If I have missed something please let me know on Twitter at @FearbySoftware

Donate and make this blog better



Ask a question or recommend an article

Your Name (required)

Your Email (required)

Your Question

v1.46 Git hub response.

Installing and managing WordPress with WP-CLI from the command line on Ubuntu

by

Here is a really simple way to manually manage WordPress installations on Ubuntu.

Advertisement:



My previous WordPress (and related) guides

My Server Setup Guides

Go to https://make.wordpress.org/cli/handbook/installing/ and read the install instructions.

How to install wp-cli on Ubuntu

First read this post too install WordPress from the command line. You should install WordPress here.

Telnet to your server (SSH)

Did the file download?

Execute

Make the file executable and move it to /usr/local/bin/wp

Now you can run wp-cli by typing the following from the command line

Read the official wp-cli quick start guide https://make.wordpress.org/cli/handbook/quick-start/

Ever since I moved my WordPress to a self-managed server I have not been able to update my plugins and I have not installed an  FTP server (by choice for security reasons).

Wordpress manual update plugins page

Let’s see if we can update plugin with wp-cli

Yes, it worked

I have now updated all active plugins from one command line.

WordPress Plugins

I have been unable to update WordPress itself since I moved my website (without an FTP server).

Update WordPress

Let’s try and update WordPress with wp-cli.

Run this command.

Success

WordPress version

Awesome 🙂

Now time to create a few executable bash files to update plugins and WordPress files in future.

Update WordPress Plugins Bash Script

Contents

Make Executable

Update WordPress Bash Script

Contents

Make Executable

More Commands

More commands can be found here: https://developer.wordpress.org/cli/commands/

Information on exporting tables can be found here https://developer.wordpress.org/cli/commands/db/export/

Site Wide Search and Replace

Results