All Posts By

Barranger Ridler

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.

Using Custom NodeJS Modules with Azure Mobile Services

By | Technology | 4 Comments

When Microsoft first announced Azure Mobile Services and announced that the server side scripting would be using Node.js, I must admit I was sceptical. I was a Java Developer back in the days of J++ (Microsoft’s Java) and have been burned in the past of thinking they were moving to a more open ecosystem. Now that I’ve had the chance to go through AMS and get my hands dirty with the scripting, and with the more recent updates, I can say this is what I’ve been waiting for.

While the first versions of AMS did support Node.js it was somewhat limited in the fact that you could only a very small number of modules. With the introduction of git support for your scripts, this is not longer the case.

But enough of my hopes and dreams for AMS :), let’s show you how to set up your Mobile Services to allow you to use new Modules in your custom API scripts. There is lots of documentation on the Windows Azure Website if you are new to Azure Mobile Services make sure you read through that as I expect you have some familiarity with it.

Read More

Implementing Push Notifications with Azure Mobile Services

By | Technology | 2 Comments

With the release of Social Cloud we got to use many different features of Windows Azure Mobile Services including Push Notifications. As a long time developer of mobile apps, leveraging push notifications is a great way to stay connected and engaged with your customers and Azure Mobile Services makes it really easy to implement without having the headache of deploying server infrastructure.

The Windows Azure site has some great articles on getting started with Push Notifications and setting app all the appropriate keys and certificates so make sure you read those for the specific platform you are targeting

  1. Push Notifications on Windows Store C#
  2. Push Notifications on Windows Store JavaScript
  3. Push Notifications on Windows Phone 8
  4. Push Notifications on iOS
  5. Push Notifications on Android

In this article we’ll be going through how to get the Windows Azure Mobile Services (AMS) Push Notifications on Windows Phone and iOS (using Xamarin.iOS) and using the Data Feature to send push notifications to the various platforms.

Data Feature

While AMS definitely lessens the amount of work to send a notification to multiple different platforms, there is still some work you’ll need to do, including knowing what type of notification to send to what user.  To store that info, we’ll use the AMS Data tables.  By creating a table (for us named PushChannel) we can store the info for when we want to send the notifications.

Read More

Setting Up your Mac for Node.js Development with Azure

By | Technology | No Comments

One of the absolute best parts of working in today’s web development world is the choices you’re now afforded. Long gone are the days where your choice of technology in one aspect of a project would dictate the entire stack. Want to use your Mac Book Pro? Go for it. Want to use javascript on the server, as well as the client? node.js has your back. Looking for a cloud provider to host your project while your business grows? You can be up and running on Azure in less time than it takes to brew a good cup of coffee.

For a recent project I was working on these are the tools that worked best for what we were looking to accomplish. In the next few blog posts, I’ll detail how I set up my dev environment to accomplish these tasks. The first post takes us from scratch to a default express.js installation running on an Azure Web site.

Prerequisites

Before going through this, I’m going to assume a few things.

  1. You’ve already installed Node and NPM on your Mac
  2. You’ve already installed Express.js via NPM
  3. You’ve already signed up for a free trial Azure account

Once you’ve got these ready, your good to go.

Connecting to Azure from the command line

There are two ways to set things up in Azure, the web, and the command line. Since I try and spend more time in Terminal than a web browser (less distractions 🙂 ) I tend towards using the command line. Microsoft has made this relatively painless with the Azure CLI NPM package. To install it, just run the command:

npm install azure-cli -g

Once that installs, you have a very nice and useful set of commands to interact with your azure account. To start, you’ll need to get your publish profile by issuing the following command:

azure account download

Which will open your browser and have you log into your account to download the profile. Once you log in, it will download and then you can start using it by running:

azure account import [path to where you downloaded the file]

Now your ready to go 🙂

Creating your new Azure web site

Now that you can interact with Azure, let’s actually do something. To create your a new azure web site run the command:

azure site create [new site name] —git

This will create you a new azure web site, and also set it up for git development while also setting up the current directory to be a git repo with the azure remote entry already added.

Creating the default express.js web site

Creating a new express site is down the same way as it always is, running the command:

express

After it runs, you can make sure it runs locally by running:

npm install

And launching node:

node app.js

After ensuring that it is running locally, by pointing your browser at http://localhost:3000 you are ready to push your creation to the cloud. To do this, all you have to do is commit it to your local git repo

git add . git commit -m “initial checkin”

And then push it to the azure remote repo:

git push azure master

And that’s it, you’re live in the cloud! To show your new site in the browser, you can use the CLI shortcut

azure site browse

Conclusion

The ever-expanding world of web dev tools is an unending list of possibilities to make your life as a developer easier. Never has it been easier to mix and match tools and practices to find what works best for you and you project.

This post originally published at blog.4mkapps.com

Being A Good Citizen of the Shopify App Store

By | General | No Comments

With Shipping Calculator Adder (SCA) out the door, and performing much better than expected, and with our next App about to go into beta, I figured it’s a good time to talk about how we see ourselves in terms of members of the Shopify App Store…

Do unto others…

One of the biggest things we push internally at 4MK Apps is to do business in the way that we want others to do business with us.

How this relates to SCA for example, is we refuse to take potential customers money, if we’re don’t provide them any value.  Approximately 12% of store owners who click the install button on our App, prepared to drop some of their hard earned money, already have the calculator installed.  I unfortunately know of a couple companies (don’t worry none who have Shopify Apps 🙂 ) who would gladly see this as free money and send the “customer” on their way.  Personally I think that attitude is crap, and would never want to do business with anyone who thought differently.

Proactive Support

Another thing that we’ve been doing is actively reaching out to customers to make sure they are happy with SCA and fixing any problems they might have with it.

Normally within 24 hours, our customers receive an email from me asking how things wen’t and if they had any problems or suggestions.  If you have an app in the store and think you shouldn’t be doing this, I’d love to hear why.

No such thing as “Not my problem”

Do to the nature of this app (it really just installs the calculator created by Shopify), this can lead to some interesting problems where the issue lies outside of our realm.

Once such issue came up where there was a small bug in the code the calculator uses. Rather than state that it wasn’t our problem, we fixed the bug and sent a message to those who are maintaining it on how to fix the problem.

All in all, we’re extremely happy with both the App Store and those customers we’ve been able to chat with, and hope that it continues for some time now.

This post originally published at blog.4mkapps.com

OGDI, bring joy to developers everywhere.

By | Technology | No Comments

Recently I had the pleasure of working on the project Emitter.ca that ties two things very important to me together: open government data, and the environment.  It was the way in which we interacted with the data that I truly loved…

As a developer, you know you’ve had this experience:

Some government agency announces that they are finally embracing open data.  The wheels upstairs start to turn dreaming up all the cool apps you’re going to build with this new found bounty. But then it happens, you get to the part of the announcement that describes the format, and all the wind comes out of your sales…flat file.  Your dreams of building apps that would make you the envy of your peers, would get you written up on TechCrunch, and discussed at length on YCombinator are now being replaced by thoughts of the hours it’s going to take to set up the database and worries about scheduling the update process to ensure your data is even close to up to date.  Your fast lane to fame and fortune just became the traffic jam heading to cottage country on the Friday of a long weekend.

OGDI goes a long way to solving this problem.

The fine developers of the Open Government Data Initiative have obviously been through this headache enough times that they decided to do something about it.  The open source project (hosted on codeplex) allows any government agency the ability to not just publish their data, but actually provide developers of all types real tools to access it.  Exposing a RESTful service, producing many different output formats including XML, KML, Json and Jsonp, the Azure backed framework saves developers countless hours and dollars by, in many cases, providing everything that the client developer needs from the server tier.  Not willing to leave good enough alone, the OGDI framework provides an interactive SDK that allows you to set up any of the queries that you need while seeing the results of said queries, while also providing example code for multiple different programming languages.  Given all this, I certainly expect OGDI to quickly become the defacto standard for the public sector to engage the development community.

Once the correct decision was made to move most of the data to OGDI (using DataDOTgc’s instance), I was tasked with migrating the data.  Most of the hard work had already been done by the rest of the team (especially Matthew Dance) in shaping the data into the normalized format that we required.  Armed with a SQL Server database full of data and the many tools that are available for moving data into the cloud, all it took was a couple of hours to successfully upload all of the data.  Once it was up, all the features provided by OGDI worked like a charm.

To show you exactly what I mean about how easy OGDI makes app development, in the very near future I’ll be blogging throughout the entire process of porting the emitter.ca project to Windows Phone 7, Stay tuned…

this article originally published on 4MK Mobile.com