Develop apps and explore the world (wide web)

I love building software. Writing code is a way to craft experiences that other people can interact with and enjoy. My favorite platform to build for is the world wide web. When I first started programming, I was building for Windows desktop computers. It was mostly utilities and games, and I really didn’t know how to distribute them. The web had always been a place to find information, and even download software, but websites were essentially documents, with little functionality. Now, they can have the full breadth of interactivity that native applications enjoy. Having moved into the age of mobile software, being able to build for the web has many advantages.

The web, as a platform, is open and free. Unlike native app markets, you don’t have to wait for your software to be approved by any third-party. It works across any device or operating system that has a web browser. (Which is why standards across browsers is so important). But, until recently web-apps faced limitations. Not having full access to a device’s hardware and operating system was an issue – but that’s being fixed as more native APIs are being added to modern web browsers.

In my experience, the big disadvantage of having a web-only app was losing out on the discoverability that comes with having it listed in a searchable marketplace. Also, adding a web-app to your device home screen is not intuitive to average users. As of recent, the Google Play market allows you list your web-app for users to install. The process involves uploading an Android app file (.apk), with the settings configured to target your web-app. It uses a new feature called “Trusted Web Activity” to achieve this, along with “Digital Asset Links“.

I decided to try this out with one of my web-apps, BJJ Tracker. You can read about how I first built it on another blog post. First, I wanted to enhance the experience by making UI/UX upgrades. I recreated the logo, focusing on typography. I also added a textured background to the app’s main view.  I sped things up by removing unused code assets. I even made some updates to help with accessibility (that is, compatibility with screen readers for the visually impaired).

bjj tracker

Next, I wanted to make sure my app had offline support, as well as any other features that would make it “feel” like a native app. Google Chrome’s developer tools as a section called “audit” that helped me identify such opportunities.

progressive web app audit

The first step was to create a “service worker” JavaScript file, and register it when BJJ Tracker loads. This file downloads any vital assets to a user’s device, and later loads them from the cache.

if('serviceWorker' in navigator) {
  navigator.serviceWorker
           .register('/serviceWorker.js')
           .then(function() { console.log("Service Worker Registered"); })
           .catch(error => {
	        	console.log(error.message)
	    	})
}

Here is an example service worker file:

 importScripts('/cache-polyfill.js');


self.addEventListener('install', function(e) {
 e.waitUntil(
   caches.open('bjjtracker').then(function(cache) {
    return cache.addAll([
       '/',
       '/index',
       '/index?login',
       '/create-record?class',
       '/create-record',
       '/create-record?competition',
       '/view-record',
       '/view-month',
       '/privacy-policy',
       '/contact',
       '/view-more-data',
       '/account',
       '/css/bootstrap.min.css',
       '/css/bootstrap.min.css',
       '/css/bootstrap-theme.min.css',
       '/css/main.css',
       '/simpleMobileMenu/styles/jquery-simple-mobilemenu.css',
       'https://use.fontawesome.com/releases/v5.3.1/css/all.css',
       'https://fonts.googleapis.com/css?family=Roboto|Eczar&display=swap',
       'https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js',
        
        
     ]);
    }).catch(error => {
        console.log(error.message)
    })
 );
});

self.addEventListener('fetch', function(event) {

	// console.log(event.request.url);

	event.respondWith(

		caches.match(event.request).then(function(response) {

			return response || fetch(event.request);

		}).catch(error => {
	        console.log(error.message)
	    })

	);

});

You can read more from the documentation: https://developers.google.com/web/ilt/pwa/caching-files-with-service-worker

Next, I created a “manifest” file. This file is written in JSON format. It helps describe how the web-app behaves once “installed”. It handles things such as app icon images and splash screens.

{
  "name": "BJJ Tracker",
  "lang": "en-US",
  "short_name": "BJJ Tracker",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#2a4d69",
  "theme_color": "#2a4d69",
  "description": "Track Brazilian Jiu Jitsu progress and fitness goals.",
  "icons": [{
    "src": "img/homescreen48.png",
    "sizes": "48x48",
    "type": "image/png"
  }, {
    "src": "img/homescreen72.png",
    "sizes": "72x72",
    "type": "image/png"
  }, {
    "src": "img/homescreen96.png",
    "sizes": "96x96",
    "type": "image/png"
  }, {
    "src": "img/homescreen144.png",
    "sizes": "144x144",
    "type": "image/png"
  }, {
    "src": "img/homescreen168.png",
    "sizes": "168x168",
    "type": "image/png"
  }, {
    "src": "img/homescreen192.png",
    "sizes": "192x192",
    "type": "image/png"
  }, {
    "src": "img/homescreen512.png",
    "sizes": "512x512",
    "type": "image/png"
  }]
}

Ok, now I was ready to open Android Studio and generate a .apk file, that I can upload to Google Play. Check out this example from Google Chrome Labs: https://github.com/GoogleChromeLabs/svgomg-twa/. You can clone that repository, and update the “build.gradle” settings to point to your app. You’ll also need to upload an “assetlinks.json” file to your web app’s host to satisfy the Digital Asset Links protocol.

Finally, I headed over to the Google Play Console. Besides uploading the .apk file, I also needed to include screenshots, featured image files, and complete a content rating survey – amongst other things. Now, my app is “pending publication”.

bjj tracker app

This app is a fun side project I use to toy with new web technologies. I’m trying to drive traffic to it so that I can experiment with optimizing conversions. I’m using it as a trial grounds for another software service called SplitWit. SplitWit is focused on optimizing conversions for the web, and helping digital marketers reach their goals. You can read about it on another post from this blog.

Building digital products

When writing about digital problem solving, I tell stories about past projects. On top of a tech perspective, I also dig into the business, design, marketing, and inter-personal aspects. I’ve been fortunate enough to have a wide breadth of tech experience through my career. It has helped me dive deep into principles and ideas about building digital products. This range of experience was afforded by continually pursuing new work. Finding room for side projects and extra gigs is a great way to grow.

After a daily, hour-long commute I could barely sneak an hour or two for my creative projects and side gigs. But I always did. Side projects were often for paying clients, but sometimes just for fun. They would include not just programming, but also design, marketing, networking, and infrastructure. On top of this, I always made sure my hobbies would serve my overall goals. Reading good books, playing quality games, and being physically competitive all lead to a better life and career.

The key take-away is to work on a variety of projects. Be ready to try different technologies and new platforms. In general, keep trying new things.

Understand infrastructure. Survive some horror stories.

Web infrastructure and hosting setup are skills often missed out on by both casual programmers and professionals. Configuring domain names, email, web hosting, and load balancers is usually reserved for system administrators. Working as one-stop-shop, on your own or in a company, can give you the opportunity to manage all of these details.

I’ve gotten to work with many third-party services and vendors. I’ve seen the good and the bad, and even worse. AWS (Amazon Web Services) has been the best infrastructure provider that I have used. I’ve had horrible experiences from other companies.

Once having had my web servers infected by ransom-ware, HostGator wanted to charge nearly a thousand dollars, to solve the problem. This was the only solution they offered while multiple web properties were infected and out of commission. I fixed the issue myself in less than a few hours by purging all data from the servers and redeploying source code from version control. That was a nightmare.

Another time servers provided by OLM went down for multiple days. This was in 2014. During this time, they wouldn’t answer telephones, letting them ring. I stood on hold for at least 30 minutes, multiple times per day trying to get through. After nearly a week, things started working again, with no explanation provided. That was one of the most unprofessional experiences of my career. I will forever shout them out about this.

Get your hands dirty

Looking forward, I’m excited to explore more of AWS. I’m currently learning through online courses from Udemy: “Certified Solutions Architect” and “Certified Developer”, and plan to take the certification tests. Next, I want to jump into their “Machine Learning” and “Internet of Things” services.

I regularly use AWS services for cloud computing, storage, and databases. My go-to for a new project is to spin up a EC2 instance. If I know I’m using WordPress, I may use a Bitnami AMI. Other times, I’ll create a basic Linux box, and setup Apache, MySql, and PHP myself. Here is the documentation I regularly reference: Install a LAMP Web Server on Amazon Linux 2. This process usually includes configuring a domain name, and setting up SSL: Configure SSL/TLS on Amazon Linux 2.

I’ll continue this post as a series. I plan tell stories about my experiences in building digital products. I’ll cover topics such as design, marketing software, customization, and APIs. Follow me on Instagram for regular updates: @AntPace87

Writing, engineering, and creativity

It was 2006 and I had just installed WordPress on a web server. I would draft blog posts nightly, before getting ready for bed. At the time I was a philosophy major and wrote prose more than code. That was my first venture into web development and digital marketing. It started with writing.

Writing blog posts and publishing software have a lot in common. For both, “perfect” is the opposite of ready. It’s easy to keep editing your own work. It’s even easier to keep adding half-done features and clutter. That’s why having a plan before you start helps so much. When I write, my first draft tends to be bullet points and a vague outline. The same goes for software. If I’m building something complex, I write comments explaining its functionality before any code. It’s my way of “thinking out loud”, and making sure that what I plan on doing even makes sense.

It’s been over a decade since I’ve maintained a blog. Creative tasks require hard work, lest they bear no fruit. (“Writer’s block is for amateurs”). Problem solving, in its many shapes, is the highest form of creativity. It’s how we build our reality. Modern technology gives us creative leverage through tools, knowledge, and community. We’re being given opportunities to build and create things, to grow and be better, at an unprecedented scale. It’s the best time in history to be CEO of your own life; creative director of your destiny. This also sets the bar higher to stand out.

My plan here is to write regularly, and discuss what I’ve been working on and learning, as well as what’s next. This gives me a chance to explore my thoughts, and prune the branches from which they stem. Hopefully, working at this will help to make me a better storyteller too.

Top 3 graphic design apps for social media marketing

Modern software has given creators the tools they need to showcase their work to the world. Here are the best free apps that I’ve been using that will help your talent shine in 2019:

AppWrap – Do you want to feature your latest website or app design to your followers? Are you building a portfolio for the UI/UX projects you worked on? This app is a great way to wrap your screenshots in a mobile device view. You can add effects, backgrounds, and text to really polish the look and feel. Their template gallery will give you inspiration to make something gorgeous. http://www.appwrap.in/

AntPace.com mobile device view

Canva – This is one of my favorites. With a library of over 60,000+ templates, this app has something for every platform. Whether you need to create a great looking post, story, or cover image, this app has designs for Instagram, Facebook, YouTube and much more. If you want your online presence to look professionally designed, check this one out! https://www.canva.com/

Anthony Pace creativity takes courage

Hatchful – Do you need a logo for your brand, business, or product? This app let’s you create one quickly. By customizing templates, you can draft, and iterate designs. Having logo design done fast, cheap, and easily allows you to focus on the actual product. It’s important to not get hung up on the logo, especially early into your venture, and instead focus on the actual value your service proposes. https://hatchful.shopify.com/

antpace.com

I’ve used all of these apps, and personally gained value from them. What apps do you use for your graphic design?

Solutions, results, and leverage

The plan for this blog is to explore problem solving and creativity. It’ll talk a lot about software development and technology. We’ll cover coding and programming topics, as well as the business and marketing that goes along with building digital products. I will showcase real examples of creating things of value, how to get started, and the many forms that engineering can take.

Engineering – 
‘The action of working artfully to bring something about’

The goal of all this is to explore the concepts behind developing solutions, getting results, and using leverage. I’ll cover subjects that I’m interested in such as programming, business, video games, grappling, fitness, food, and lifestyle design. You’ll get to see what I’m working on and what I’m into.

‘The price of anything is the amount of life you exchange for it.’
— Henry David Thoreau