OneHourCode

Why you should consider it, the pain points and how to write your own lightweight reactive store

Image for post
Image for post
Keeping multiple simultaneous clients updated can be a nightmare

I’ve written this article at the end of my latest Angular4 project: Moveseats.com , which was architected to work in real time across many clients (See demo). Now its time share what I learnt while its still fresh!

Git repo link (For walkthrough below)

If there are issues or helpful improvements you wish to make, leave a comment or fork my repo, Thanks.

An Introduction

A reactive application can help to create:

A reactive applications can be the right choice if you have any of the following…


Some simple tips and tricks to create great looking apps

I’m currently working on further parts to sw-toolbox tutorials, so stay tuned!

What are the things you need to make a our site look great:

Function

No one wants to use an app that doesn’t work. Apps with circuitous menu routes, extra pages and forms will cost you users.

Image for post
Image for post
If the app doesn’t function correctly, forget about making it look pretty.

Make it function

  1. Use flow diagrams to chart out the typical user journey, then storyboard your app based off this
  2. Make sure that users can go back and make changes without having to start from scratch
  3. Core elements of app navigation should always be visible in your app window [Highlight in fig1]
  4. Display the information that matters to the users and remove the irrelevant clutter. …

How to store external API responses to decrease page response time

Image for post
Image for post
Getting external API data to cache on your site

Continuation

Welcome back, if you haven’t checked out the last article on setting up static asset caching do this here: [Part 1]

Dynamic asset caching

When you have external API links such as to Wordpress, Googleapis (fonts) or a CDN their may be responses you wish to cache for a period (> day, week etc) such that the user doesn’t spend time downloading old content.

Blogs and fonts

In my case this example I pulled blogs from a Wordpress site and several fonts from fonts.google.com, …


[Part 1] Get rapid offline capability in your Angular app with service worker

What it is, why you should use it and how to code it in less than one hour

Image for post
Image for post

Introduction

Service worker reduces your apps load time significantly by caching essential content to the browser. If you have any of the below capability in your app you should definitely read on:

  1. Significant quantities of static assets such as stylesheets, custom fonts or significant chunks of your app that don’t change much
  2. Considerable article / blog content which users may want to read later
  3. HTTP requests to external api’s which yield the same responses to clients for a prolonged period (> 1…

About

OneHourCode

A blog for hobbyist coders and graphic designers

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store