Travis-CI - Continuous deployment to staging but production deployment only on tag commit

Background

Travis-CI is a hosted Continuous Integration & Continuous Delivery tool. Based on configurations, users can have their application deployed to production. They provide free service to open source projects. The CI&CD environment currently using Linux.

Aim

• Have the CI & CD pipeline trigger for each and every commit going into GitHub. Deploy only to staging or testing area.
• Testing / staging area is GitHub pages hosted in the same repo. Deploy to staging should not trigger another build which ends up as infinite loop. Not into gh-pages branch but to \docs folder.
• When there is tagged commit deploy to production.

How its done

Avoid build on commit from Travis-CI bot

The word bot is used to indicate the CI&CD account used by Travis-CI. We can see that account on the commits from Travis-CI. When the bot commits, it uses message as follows.

""Deploy <github userid>/<project> to github.com/<github userid>/<project>.git:master""

One such example given below.

"Deploy joymon/prayerbook to github.com/joymon/prayerbook.git:master"

We need to write build conditions at the top of .travis.yml file to bye pass the build if the commit message is matching.

Build and deploy on commit tag

This is another condition we need to put into condition. If we don't put this Travis-CI will not build on tag commit. Below is one example.

if: tag IS present OR commit_message != "Deploy joymon/prayerbook to github.com/joymon/prayerbook.git:master" OR tag = true

If we use tag = true alone it may not work. Needs more analysis on the Travis-CI yml schema.

A sample travis.yml file can be found below which works based on the above conditions.

https://github.com/joymon/prayerbook/blob/master/.travis.yml

References

https://stackoverflow.com/questions/18216991/create-a-tag-in-github-repository
https://docs.travis-ci.com/user/conditions-v1
https://github.com/travis-ci/travis-ci/issues/8518

Disclaimer

The author is not working for Travis-CI or any of their subsidiaries or partners. There is no guarantee that the technique mentioned in this post will work forever. Travis-CI may change their system the way they want it to be. 

This is not at a sponsored post.

Explaining youtube down to 4 years old kid

Though I had written about explaining technical things to kids, this is the first time I had to try it in production. At the time of writing this post 16oct2018:10PM EST, Google's well established youtube.com is down thus I got computer from my 4 years old son.

https://twitter.com/TeamYouTube/status/1052373937839980544
https://www.cnbc.com/2018/10/17/googles-youtube-outage-affected-users-in-us-australia-asia-europe.html

He was angry and slowly moved to crying mode when he understood there issue which his dad cannot fix. Below were our attempts to make him understand the situation.

Attempt 1 - Sympathy

This is my attempt with over confidence that I had writing experience of how to explain tech things to kids. Though the words were not exactly same as we speak mostly in our mother tongue Malayalam at home along with English .

I - Son... you know the youtube is a website which is built and maintained by engineers like us. Your mom also an engineer though not working now. There are some troubles in their computers and those poor guys now will be working hard like me. We have to wait till they fix the issue. 

Son - What? youtube is not working. Fix it...

Attempt 2 - Tech explanation

My wife started laughing already. But I did one more attempt.

I - You know...the videos you are seeing in our computer is not actually in our computer. Someone else uploaded those videos into youtube's computer sitting far away. Those youtube's computers are down due to some issues. We cannot do any thing from here, they have to fix it. 

Son (with no hope on me) - Can you fix it?

Attempt 3 - Mom's version

Mom - Son we usually call your dad when he is in office. right?

Son - yes

Mom - What if his phone is not working? We keep calling but we cannot speak with him.

Son - yes

Mom - Our phone is good but dad's phone is not working. Think youtube is dad's phone and is not working.

Son (sad) - ok. Lets sleep.

Progressive Web Apps - Index

Intro

Progressive Web Apps or PWA technology is expected to end the nightmare of developing platform  specific apps for achieving one purpose. Currently this is tough for mobile developers as they have to develop for Android and iOS. Thanks to Microsoft for ending Windows phones. But still there is Windows app store where applications for Windows 10 can be downloaded. Still its nightmare to have one app working for all the platforms though there are many technologies are there to address the same such as Xamarin. Yes that is a big prediction that one day PWA will make Xamarin like platforms obsolete similar to how HTML5 made Flash & Silverlight into history.

https://en.wikipedia.org/wiki/Progressive_Web_Apps

The purpose of this post is to index all the links related to PWA in one place at least for my personal use. It will be including links my future PWA related posts as well. I am not the person doing it and I tried to include similar indexes at the end of this post.

Basics

Some basics on what is PWA.

https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/

https://medium.com/samsung-internet-dev/6-myths-of-progressive-web-apps-81e28ca9d2b1

https://docs.google.com/presentation/d/1b27LiMtxkOgReHEI6FZGc8lyuu0wrKjwgQ2ZbDz6yak/edit#slide=id.g2014fe46a9_9_16

Feature detection

Not all browsers support PWA also not all support all features. Since PWA included bunch of features, better do feature detection than checking the browser version.

https://github.com/tomayac/pwa-feature-detector

https://jakearchibald.github.io/isserviceworkerready/index.html

Features

Below are the features of PWA. Not a complete list as its still evolving.

Navigation Preload

https://developers.google.com/web/updates/2017/02/navigation-preload

Offline Storage

This is not really PWA feature but can be leveraged to build offline application.

https://developers.google.com/web/fundamentals/instant-and-offline/web-storage/offline-for-pwa

Important thing to note here is the eviction criteria. If there is pressure browser may delete the offline data.

https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria

Service Worker

Highlight of PWA which help us to develop offline applications

https://bitsofco.de/the-service-worker-lifecycle/

https://w3c.github.io/ServiceWorker/
https://developers.google.com/web/fundamentals/codelabs/offline/
https://developers.google.com/web/fundamentals/primers/service-workers/

Messaging between ServiceWorker and application.
http://craig-russell.co.uk/2016/01/29/service-worker-messaging.html#.W_QjVjhKiUn

Push notification

This will take the web apps further towards native feel. Also help us to reengage users. 

https://developers.google.com/web/fundamentals/codelabs/push-notifications/

Installation

Another highlight. This feature is going to help us to get our web apps installed as native apps.

Manifest - https://developer.mozilla.org/en-US/docs/Web/Manifest

https://samsunginter.net/docs/ambient-badging/

https://medium.com/samsung-internet-dev/what-does-it-mean-to-be-an-app-ace43eb6b94d

Publishing to AppStores

The app stores are getting PWA apps along with native apps. One day there will be more PWA apps than native. The day where all the device capabilities/APIs are exposed via PWA specs.

https://www.pwabuilder.com/ - Make existing app as installable via store.
https://medium.freecodecamp.org/i-built-a-pwa-and-published-it-in-3-app-stores-heres-what-i-learned-7cb3f56daf9b

Developing PWA

What developers needs to know about PWA.

https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/
https://medium.com/codingthesmartway-com-blog/getting-started-with-progressive-web-apps-pwa-ab05bcc25bfd

Debugging and experiences

Seems little difficult to debug at this point. But will definitely get improvements over time.
https://developers.google.com/web/fundamentals/codelabs/debugging-service-workers/

https://www.captechconsulting.com/blogs/my-experience-using-service-workers

https://gist.github.com/Rich-Harris/fd6c3c73e6e707e312d7c5d7d0f3b2f9

Lighthouse for debugging - https://developers.google.com/web/tools/lighthouse/

Testing PWA

In the world of DevOps we need to have coded test cases to have continuous delivery. This space needs more innovations.

https://github.com/googlearchive/sw-unit-test-sample

https://hackernoon.com/service-worker-testing-made-easy-9a2d8e9aa50

https://medium.com/dev-channel/testing-service-workers-318d7b016b19

https://stackoverflow.com/questions/47807982/unit-test-service-worker

Platform specific

Not all platforms started supporting same way. Below goes platform specific details. Hope some day I can make this section obsolete.

Windows

https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps
https://blogs.windows.com/msedgedev/2018/02/06/welcoming-progressive-web-apps-edge-windows-10/

Sample apps

We are not alone. There are apps out there which use PWA. Its reality.

https://pwa.rocks/

For quick demos

https://expensemanager.demo.vaadin.com/ - Keeps data in local cache, Installable

Source code

Some repos to browse for PWA.

https://github.com/GoogleChromeLabs/airhorn - This demonstrates the installation scenario

https://github.com/mdn/pwa-examples

https://github.com/gokulkrishh/demo-progressive-web-app

Other indexes like this

https://github.com/hemanth/awesome-pwa

Online diagramming tools

We are living in the age of easy software development and business friendly environment. Lot of things are free if we want to develop software or start a company than 10 years back. Diagramming was difficult earlier but now there are lot of tools to create good stunning diagrams. Below is a list of online browser based diagramming tools for software developers and architects. All are either free, or has freemium pricing model.

General

Below has general diagramming support as well as software engineering diagrams.

www.draw.io
https://www.lucidchart.com
https://cacoo.com

https://cloudcraft.co - AWS specific, 3D diagrams

Architecture as Code

https://structurizr.com/ - Used to draw C4 arch diagrams using code!


This list demands periodic update as new tools will appear and some fade away or move to paid model. Hopefully updates can be done at least once an year.