Polyfill with Create React App

By | RedBit, Technology | No Comments

Preamble

As the front end development world continues revolving and evolving into a fully fledged platform, and as javascript continues to make headway in all facets of the tech stack, more and more functionality is being added almost every day.

While this should be a fantastic development, here comes that giant black cloud that we all know too well: Customers.

If you’ve been in front end development for any time at all, you have been through this scenario: After building your latest and greatest new feature that performs just right, you dust off that ugly step sibling known as Internet Explorer, and……nothing. Something you’ve written has offended the browser that won’t die so deeply that all you see is a blank white page.

After cursing Barb from accounting, and remembering her insistence on using IE8 even though Microsoft ended support for IE in January 2016, brewing another cup of coffee, and calming down a bit, you open up the console to see just what IE could be throwing a fit about now:

It seems that this time, IE doesn’t support Array.find

Introducing Polyfills

A Polyfill is a piece of code that adds functionality to older (or just less compliant) browsers so that you can use the latest and greatest features from the W3C specification

Before we go any further, I should explain what Transpiling is and how it differs from Polyfills.

Transpiling is the process of compiling code from one “language” to another. If you are using React through create-react-app then you are already using the transpiler Babel which converts all of your fancy classes, arrow functions, const and let variables from ES2015 (and above) into code that browsers understand.

If you are wondering which functionalities will require a polyfill, one of the easiest ways to check is to take the list of minimum browser versions you will be supporting and search the fantastic site Can I Use to your heart’s content.

Once you’ve determined which polyfills are required, one good resource which may have pre-made open source polyfills that suit your needs is MDN

Create React App built in Polyfills

Luckily, those of us using create-react-app already have two rather useful polyfills included upon creation of our application.

  • Promise to handle the ECMA6 Promise proposal
  • fetch that has replaced the old XMLHttpRequest

While these two polyfills are great… this begs the question, why not more? Why not Array.find or Array.includes???

Well the answer is: it’s not all about you, now is it?

Actually, the create-react-app developers have only included what they deem absolutely necessary in order keep the size of the library to a minimum. (for a far more thorough discussion, check out this link here)

So for now, we are on our own…

Solution

Adding your own polyfills is actually quite easy, especially for those already written and hosted on MDN :). Simply create a new javascript file for the polyfill, and copy in the code (we tend to store these files in an aptly named polyfill folder. As an example, our ArrayFind.js file looks like this:

You’ll notice that this has come directly from the MDN site, with the small addition at the top of the file:

/* eslint no-extend-native: “off” */ which will prevent the linter from complaining and spitting out warnings in the console:

 

You may find it easiest to create a central file which calls each of the polyfills you’re using. We make use of an index.js file that looks similar to the following:

This way, there is only one file to import via the base index.js file.

Final Thoughts

With a little bit of preparation, you should be able to use most of the Javascript world’s latest and greatest features, while still keeping your customers happy by supporting Barb from accounting’s, umm….. interesting browser preference.

Getting Started with React Flexbox Grid

By | RedBit, Technology | No Comments

Web development technology is fast moving and constantly evolving and seems every time you blink, some new framework has been created. In this article I’ll focus on getting started with React Flexbox Grid. Note that this is not a full fledged tutorial nor a description of flexbox; if that’s what you are looking for then you should check out Chris Coyier’s fantastic write-up: A Complete Guid to Flexbox. The goal of this article is to allow you to quickly get up to speed with react-flexbox-grid and then explore more on your own, or join the RedBit team and we’ll help you!

The code for this tutorial can be found here, while a working copy of the final result can be found here.

Introduction

If you’ve been a front end developer for any time at all on a team with a designer, you’ve inevitably been handed an image like the one below and told to make it come to life for the web.
react-flexbox-grid-intro

Easy, right? … a couple floats here, maybe a media query here and there… and soon you’ve got a few hundred lines of css, thinking: there has to be an easier way.

Well, if you’re already using react, there is…

react-flexbox-grid

From the react-flexbox-grid site, the library is described as “a set of React components that implement flexboxgrid.css” In this tutorial, we will use this library to implement the example design above.

Coding the Design

To help things along, I’ve created two sample components for us to place around the screen for different screen sizes:

Field:

react-flexbox-grid-field

Hero: 

react-flexbox-grid-hero

Understanding the Basics

When using react-flexbox-grid, you will deal with three components:

Grid: The base component that will wrap everything else.

Row: Rows within the grid.

Col: Columns within the grid.

The simplest example would be a one row, one column grid:

Column Sizing

In this (overly) simple example, notice the attribute on the Col element: xs={12}. This determines how many columns (out of twelve) that this column should take up on extra small (xs) screens. The four supported screen sizes are:

lg – 75em (most often 1200px) and up

md – 64em (most often 1024px) to 74em

sm – 48em (most often 768px) to 63em

xs – up to 47em

Mobile First

While this may come across as a bit of a buzz phrase, we will be starting with mobile and moving our way up. Due to the way that the library is written (and more specifically the way that media queries are based on a minimum width), starting with desktop will cause nothing but headaches.

So given that, let’s finally get down to coding, beginning with the mobile page.

react-flexbox-grid-mobile

The code for the mobile page is actually quite simple: we wrap each Card in a Row component, then wrap the Hero and six Field components in Col components. Since we are only dealing with mobile, we can set only the xs attribute and be on our way. The code would look like this:

Tablet Size

Notice that the code in the previous section does not respond to different screen sizes at all, indicating that the layout will be of terrible quality on larger displays. We’ll update the code to match the design for Tablet-sized screens first. Looking at the design, the fields should be arranged in two rows of three columns, with the Hero component off to the right.

react-flexbox-grid-tablet

Since we are dealing with a 12 column grid, we should be able to set the column size to 4 (12/3 = 4) and it the library will take care of the rest for the fields.

If you run it now, you’ll notice that we didn’t handle the hero image. In order to do this, we will have to nest the Rows and Cols. Let’s divide the Card into two sections, one for the Hero component and one for the rows of Field components. The resulting code should look like this:

While this looks much closer to the design, you should notice a visual bug right away, the Hero Image is on the wrong side. We could fix the issue by simply moving the image to the end of the parent row… but then the Hero would be at the bottom of the mobile view.

Reordering attributes to the rescue!

react-flexbox-grid has more than the basic column width attributes to help with your layout needs. The one that we’ll use here is Reordering. What this feature allows us to do is specify that the first column of the parent row should be first on mobile, but last for all other page sizes. Unsurprisingly, these attributes are named first and last, respectively. The updated code should look like this:

Desktop

Finally, let’s implement the layout for Desktop. You’ll see that the only true difference is that we now have a row of four columns, with the second row containing two columns aligned with the first and last columns in the first row:

react-flexbox-grid-desktop

First we’ll update the Field rows to use three as the value for lg (12/4=3). While the first row properly has the four Field components lined up, notice that the second row’s columns are aligned incorrectly per our design.
Another feature of react-flexbox-grid – distribution attributes – allows us to specify how to distribute the contents of a Row or Column within the available space. This, too, can be defined per screen size so that the layout on smaller displays is unaffected.

In our case we want to use the between attribute on the Row containing the Field components so that the final two (on the second row) are distributed with the superfluous screen real estate left between them. The final code should look like this:

Final Thoughts

We have only scratched the surface of what can be accomplished with react-flexbox-grid. To read more, check out the GitHub repos for both react-flexbox-grid and the underlyling css framework: flexboxgrid.css.

Xamarin Experience Event Toronto

By | Events | No Comments

NOTE: THIS EVENT IS NOW SOLD OUT

If you are into Xamarin like our team at RedBit is you will definitely want to head out to this event to talk about mobile apps, cloud connected apps, DevOps – RedBit will be there!

Microsoft teams will be presenting a half day session on how and why you should take advantage of mobile in your business and how to use the tooling provided from Microsoft such as the new Visual Studio 2017. Spaces are limited so to register you will have to email Catherine Kerr to get a limited spot.

Here is the agenda on what will be discussed

Xamarin-experience-event-agenda

Here is an overview of the half day session

We live in a world of rich, immersive mobile experiences that are powered by the cloud. Mobile has been the most rapidly adopted technology in history and with the increasing prominence of the cloud, the rate of technological change continues to accelerate.

Following the launch of Visual Studio 2017, we are welcoming the Xamarin team to Toronto to show you how to enhance your mobile strategy through Microsoft Azure, Visual Studio and the Xamarin Mobile Lifecycle Solution.

With thousands of organizations already using Microsoft and Xamarin to achieve remarkable results in their mobile and digital transformation strategies, let us show you how you can build, test, distribute and monitor your mobile apps and easily add backend cloud services to scale your app on demand. The new Visual Studio Mobile Center also brings together multiple services, commonly used by mobile developers, into a single integrated solution.

With over 1 million developers using Xamarin solutions in more than 120 countries, building rich, immersive, high-quality mobile applications has never been easier!

Here are all the details of the event

Date: Thursday 13th April 2017
Time: 10:00AM to 1:00PM (EST)
Event Location: Microsoft Toronto Office, Suite 1201*, 222 Bay Street, Toronto, ON, M5K 1E7
Registration: Spaces are limited, so please email Catherine Kerr with your name and contact details at your earliest*Ernst & Young TowerPlease take the elevator to the 12th floor.

Hacking for Missing Kids – Hockey App, Push Notifications & Wrap Up

By | Events, RedBit, Technology | No Comments

This is the last post in a series on how to get the Xamarin based code for a hackathon we did with Missing Children’s Society of Canada up and running on iOS, Windows & Android. This article will focus on how to distribute the app.

For reference here is the series of articles available

  1. Technology for Good
  2. Technology Overview
  3. Cloning the Project
  4. Running Xamarin App on iOS
  5. Running Xamarin App on Android
  6. Running Xamarin App on Windows
  7. Hockey App, Push Notifications & Wrap up

Hockey App

Although we used Hockey App to distribute the Android application, unfortunately due to time, we did could not complete a full Develop – Test – Build – Distribute pipeline built out for the Xamarin application.

image26

We did end up just manually uploading APKs, but you definitely want to automate your mobile app lifecycle process!image27

Here is an example of a customer app we did at RedBit in Visual Studio Team Services where we have API, Web App, iOS and Android build and release pipelines setup

image28image29

Definitely worth the time to set this up when building out full software products!

Read More

Hacking for Missing Kids – Running Windows Version

By | Events, RedBit, Technology | No Comments

In the previous article on Hacking for Missing Kids – Running Android Version we looked at how to get the Xamarin app running on Android. Next, is running the application on Windows using our Xamarin based code

For reference here is the series of articles available

  1. Technology for Good
  2. Technology Overview
  3. Cloning the Project
  4. Running Xamarin App on iOS
  5. Running Xamarin App on Android
  6. Running Xamarin App on Windows
  7. Hockey App, Push Notifications & Wrap up

Do the following to run the application on Windows

  1. Right click on the IRIS.Windows project and click Set As Default
    image11
  2. Change the Solution Platform to Any CPU
    image17
  3. Tap F5 or click the debug button in the tool bar to start debugging on Windows. You can also change the OS version and emulator to run it on from here
    image22

When the application runs, you should get the following if running on the

image23

Type in the following for credentials

  1. Username: Admin
  2. Password: password
  3. Tap login to see the available cases

You should end up with a list and then be able to navigate to a case details page.

image24image25

As you can see, we can literally use almost all the same C# code using Xamarin reducing the time to target all platforms. By no means are these polished apps, but you can get up and running pretty quickly using a Xamarin code base.  Next up, we’ll look at using Hockey App and how it was leveraged to distribute the application as well as push notifications.

Hacking for Missing Kids – Running Android Version

By | Events, RedBit, Technology | No Comments

In the previous article on Hacking for Missing Kids – Running iOS Version we looked at how to get the Xamarin app running on iOS. Next, is running the application on Android.

For reference here is the series of articles available

  1. Technology for Good
  2. Technology Overview
  3. Cloning the Project
  4. Running Xamarin App on iOS
  5. Running Xamarin App on Android
  6. Running Xamarin App on Windows
  7. Hockey App, Push Notifications & Wrap up

Do the following to run the application on Android

  1. Right click on the IRIS.Droid project and click Set As Default
    image11
  2. Change the Solution Platform to Any CPU
    image17
  3. Tap F5 or click the debug button in the tool bar to start debugging on Android. You can also change the OS version and emulator to run it on from here
    image18

When the application runs, you should get the following if running on the Visual Studio Android emulator.
image19

Type in the following for credentials

  1. Username: Admin
  2. Password: password
  3. Tap login to see the available cases

You should end up with a list and then be able to navigate to a case details page.

image20image21

Some things to note:

  1. If you are using an emulator, use the Visual Studio Android Emulator as it will make life easy for you
  2. If you get some errors compiling for Android make sure you have appropriate Android SDKs installed. For this project you need minimum API Level 19, but recommend you just install all of them.

For android SDKs, the following links will be helpful

  1. Overview of the Visual Studio Android Emulator – https://developer.xamarin.com/guides/android/deployment,_testing,_and_metrics/debug-on-emulator/visual-studio-android-emulator/
  2. Launching the Android SDK Manager from Visual Studio – https://developer.xamarin.com/recipes/cross-platform/ide/launch_sdk_manager/#Launch_SDK_Manager_from_Visual_Studio

In the Android SDK Manager you should install the following

  1. Under Tools – All SDK Build-Tools
  2. Different Android API Levels for example API 24 install SDK Platform and Google APIs. You can install other options but these options will be enough
  3. Under Extra – Google USB Driver

Next up we’ll look at how to get the code base deployed and working on the Windows Platform.

Hacking for Missing Kids – Running iOS Version

By | Events, RedBit, Technology | No Comments

In the previous article on Hacking for Missing Kids – Cloning the Project we looked cloning the project from GitHub. Now that we have gone through an overview of the structure of the Xamarin app and cloning the project, we can go ahead and try to run it.

For reference here is the series of articles available

  1. Technology for Good
  2. Technology Overview
  3. Cloning the Project
  4. Running Xamarin App on iOS
  5. Running Xamarin App on Android
  6. Running Xamarin App on Windows
  7. Hockey App, Push Notifications & Wrap up

To run the Xamarin iOS version perform the following steps

  1. Right click on the IRIS.iOS project and click Set As Default
    image11
  2. Change the Solution Platform to iPhone Simulator
    image12
  3. Tap F5 or click the debug button in the tool bar to start debugging on iOS. You can also change the OS version and emulator to run it on from here
    image13

When the application runs, you should get the following

image14

Type in the following for credentials

  1. Username: Admin
  2. Password: password
  3. Tap login to see the available cases

Once you login, you will be presented with the following list page and then details page

image15image16

Some things to note:

  1. You need have a Mac setup with XCode and Xamarin on it to compile the iOS application
  2. You can use the simulator for iOS on Windows by seeing here https://developer.xamarin.com/guides/cross-platform/windows/ios-simulator/

Next up we’ll look at how to get the code base deployed and running Android.

Hacking for Missing Kids – Cloning the Project

By | Events, RedBit, Technology | No Comments

In the previous article on Hacking for Missing Kids – Technology Overview we looked at the technology available for the system developed. This article will focus on how to clone the project to get ready for running it on the various platforms using Xamarin and Visual Studio. For reference here is the series of articles available

  1. Technology for Good
  2. Technology Overview
  3. Cloning the Project
  4. Running Xamarin App on iOS
  5. Running Xamarin App on Android
  6. Running Xamarin App on Windows
  7. Hockey App, Push Notifications & Wrap up

First thing we need to do is clone the repository which can be located here https://github.com/CDN-Missing-Children-Hack/client. All other repos which are a total of six can also be found https://github.com/CDN-Missing-Children-Hack.

The next sections assume you have

  1. Visual Studio 2015 (Community Edition will be fine)
  2. Xamarin Tools Installed
  3. GitHub Extensions for Visual Studio
  4. A mac for building iOS app

With those pre-requisites in place we can first clone the project

  1. Open Visual Studio
    image3
  2. Click on the Manage Connection button in the Team Explorer dialog
    image4
  3. Under Local Git Repositories click on Clone and enter the following URL https://github.com/CDN-Missing-Children-Hack/client.git
    image5
  4. Click Clone and you should start cloning the repo
    image6
  5. Double click the newly cloned repo and you should be taken to the Home Page for the repo
    image7
    image8
  6. Double click the Solution to open it up in Visual Studio
    image9

At this point you can switch over to Solution Explorer (CTRL-W, S) and you should see all the projects and files available to you.

Next up we’ll look at how to get the code base deployed and running on iOS.

Hacking for Missing Kids – Technology Overview

By | Events, RedBit, Technology | No Comments

Back in October RedBit had an opportunity to participate in a weekend hack to try and leverage technology to find missing children. It was a collaboration with Missing Children Society of Canada, City of Calgary, Calgary Police Service, Microsoft and RedBit.

For an overview of the hack see Hacking for Missing Kids – Technology for Good. This article will focus on how to get the Xamarin project up and running connected the backend NodeJS system built.

Technology Overview

The system consisted of the following

  1. Visual Studio – This was our development environment
  2. GitHub – our source code repository for the system
  3. Xamarin Forms – our cross-platform solution to target iOS, Android & Windows with one code base
  4. Hockey App – Distribution of the application

Although multiple people worked on the application and this article focuses on the development of the Xamarin app, here is a high level architecture of the system which should give an idea of all the parts involved in the system

architecture

Read More

Hacking for Missing Kids – Technology for Good

By | Design, Events, RedBit | No Comments

Back in October, we spent some time with Microsoft to build some technology to help find Missing Children in Canada and ideally around the world. This was a collaboration with Missing Children Society of Canada, City of Calgary, Calgary Police Services who provided ‘what we were building’ and the problem we were trying to solve. RedBit and Microsoft provided the technical expertise to build a solution within a weekend to attempt to solve this problem.

Finding Missing Children - Hacking for Good

For more information on the technical background and RedBit’s participation, see our technology summary on the Xamarin application coming soon. This article will cover what we built, some processes we went through and finally the results.

The Team

There were many groups involved in building a solution, but RedBit’s main responsibility was building out the Xamarin client for iOS, Android and Windows.

The Xamarin development was lead by myself (Mark Arteaga) a Microsoft MVP, Xamarin University Trainer and using the Xamarin platform since 2010.

Invited to help with the development were members of Silicon Halton Tech Under 20 specifically Denys Linkov and Mohammed Eseifan who are first year university students. Also invited to participate was Microsoft Student Partner Taha Hasan Ubaid.

We also had folks from Microsoft helping on various parts specifically Mickey Macdonald, Jeff King, Sage French, Adasha Datta, Pierre Roman and Anthony Bartolo.

The TeamWith any project, key is to have the subject matter experts and this is Missing Children Society of Canada, City of Calgary, Calgary Police Services who helped us understand the ‘why’ and ‘what’.

The Problem

In Canada 45,000 children go missing every year and 150 of these cases are abductions. Of those 150 only 6 AMBER Alerts are issued because it has to adhere to very strict criteria to be issued.

Missing Children Society of Canada has been around for the past 30yrs helping provide support for families with missing children. They also help coordinate with media, law enforcement and various community groups to find children that have gone missing.

the problem

Now there are systems in place for the 150 and the use of tech is being used such as the Most Valuable Network. But this is only for 150 kids, what about the other 30,000+ children that go missing?

Read More