Adding Basic Animations to React

By | General, RedBit, Technology | No Comments

Hello React developers! As a dev who is still trying to learn and grow every day, here is a “to the point” post about how I’ve been getting animations out of my head and onto the page. This will only cover basic stuff for now, and I intend to put out another post as I improve and develop better ways of adding animations to my components.

For starters, if you’re interested in adding small animations without downloading an entire library, CSS animations are an easy way to do that. I would personally recommend keeping animations fairly small, as CSS has some limitations as to what is possible. For example, while you can easily animate an element to appear when rendering, there is no time to animate that element as it unmounts. While you can get around this by animating elements in from off-screen, it is not helpful to those using screen readers, and it keeps unused elements on the dom.

Places it makes sense to use CSS include color changes, hover effects, and small, decorative animations; like on a logo for example.

In this example, I apply the animation through a className on the logo itself, running it so that It will always be moving, regardless of the state

What I’m currently excited about though happens to be the React Transition Group library ( What it does is apply a state to your component, which can be used to apply specific styles on the component lifecycle, as well as add and remove the component when the animation is complete.

In the Transition example, these states applied to the component include entering, entered, exiting, and exited. The duration of these states can be a set together as milliseconds, or individually as an object (eg. {entering:300, exiting:500}).

The most important quality of it to me is it’s “exiting” state. CSS lacks the ability to animate on unmount without help, and this library gives you that power. With the ability to animate the removal of an element, there is no need to keep unused elements on the DOM, which will actually improve the accessibility of your platform by not confusing screen readers with hidden components. Animating the ‘exiting’ state also creates a more polished animation that CSS alone can rarely accomplish. I found it incredibly easy to follow, just set styles based on the rendered elements state, though this method is probably better for smaller animations as well.

Within the same library is the ability to use CSS transitions. Like transitions it allows you to apply styles when the element is at different states (keeping in mind that these state names are not quite the same as Transitions). What’s different about this is you apply your styles with classes rather than through inline styles. This is ideal for applying more complicated movements, as well as having reusable and consistent animations for your platform. These can be applied as an object (as seen below) or a string, which is interpreted as “animation” = “animation-enter”, “animation-enter-active”, “animation-enter-done” etc.

Finally, TransitionGroup can be used to manage all child transition objects that exist in a list. TransitionGroup does not actually apply any styles to your components; it’s more or less just a wrapping div with some helper props.

Animations are valuable, fairly simple to begin adding, and increasingly necessary when building the web. While these where very simple additions to my code, they instantly made my project look more engaging, and frankly, we’re pretty fun to work on. Hope you learned something! I’m looking forward to seeing where motion design and animation on the web goes next.

2016 Application Development Resources

By | General, RedBit | No Comments

We come across interesting resources all of the time that can help with the successful development of web and mobile applications – and we love to share.  This list will be updated periodically as come across new resources.  If you have anything to add, let us know!

Xamarin Resources

Microsoft Resources

Read More

In 2016 Enterprise Spending on Mobile Is Low

By | General | No Comments

Since 2002, I have been involved in mobile development, starting with WAP development and creating a product for Lotus Notes.  14 years later a Gartner Survey Reveals Enterprise Spending on Mobile App Development Remains Low, from a Gartner analysis on How Enterprises are Tackling Mobile App Development in 2016  that reveals:

Mobile Only 10% of Dev Budgets

Spending is set to go up 31% on mobile in the future, but why are enterprises not spending more?  This percentage is actually down 2% from 2015.  The questions that come to my mind are:

  1. Is it a fear of not having control of data and a lack of security?
  2. Is it that there are so many devices out there that enterprises don’t want to limit the type of devices employees can use? Do they have a BYOD strategy?

There are ways to lock down your apps and data and RedBit has developed HIPPA compliant apps.  I’m sure there are more questions, but these are ‘answerable’ and the  technology exists to help reach mobile enterprise goals. If spending is expected to rise, maybe these questions are being answered.

Demand is Up, But Not a Priority

Employees are demanding Business to Employee (B2E) mobile apps, whether that be tablet, laptop, phone – to me it’s all mobile. RedBit has written software that spans iOS, Android, Windows, Web, APIs and shared some amount of code across all those platforms.  The technology is there to help us achieve that.  Employees should be given the freedom to complete their tasks and job from any location in a secure and reliable manner. Especially with the new workforce coming in (yes, millennials and the ones after that) who grew up with technology.  They are going to expect this flexibility to get their job done using whatever device they want.

Custom Mobile Apps, Not Templates

In 2012-2013 we attempted a startup that ‘templated’ mobile apps for media companies. We did a few things wrong (which I’m not going to get into now or else I’ll never stop writing) but the biggest thing we learned is customers want a custom experience for their brand.

The Gartner survey proves this point and states that “given most development teams use custom app development for all their apps, extending this to mobile is a natural behavior” which tells me that internal enterprise dev teams are used to doing it from scratch.  My recommendation for custom app development is:

  1. Figure out an integration strategy.  Most enterprises have existing infrastructure and you don’t want to change those. This is the biggest roadblock, but it can be solved. In one project we went old school and had SAP push a file to an FTP server which then an Azure web job would monitor and update the SQL database for the mobile apps to display data. Not the most efficient process, but you need to start somewhere to effectively leverage legacy systems.
  2. Select a technology like Microsoft’s Xamarin.  Come up with a framework that can be used across various apps. Things like authentication, accessing APIs, and UI style guides can all be put inside a ‘starter kit’ so your teams can get up and running quickly and not start from scratch every time.
  3. Start small with a proof of concept.  There is so much technology out there to get you up and running fast.  The days of spending years getting something up and working are gone.  If your enterprise is spending 12 months or more planning and building apps, it’s time to re-strategize.

What’s Next?

If you are a CIO/CTO/CDO/Dev Manager there are a lot of items to figure out on mobile, but it’s time to get in.  I’ve always been a proponent of mobile and how it’s going to change the way we work and live, and it really has. Just see Mobile is Eating the World which was done in 2014 and then the 2016 version by Benedict Evans from a16z.  Does this survey indicate that enterprises are done with mobile?  I don’t think so. After 14 years working in mobile development, I’ve never been more excited with all the new technologies coming out and how quickly we can get something going.


Enterprise Mobility Canada

Thanks to everyone who stopped by to say hello or play with the Hololens at the 5th Annual Summit on Enterprise Mobility Canada, October 4th and 5th at the Shangri-La on Toronto.  If you are looking for more information on the Digital and Mobile Enterprise, including a downloadable infographic, visit our summit site

Round Up: August 2016

By | General | No Comments

Redbit Round Ups are published once a month and feature summaries and opinions on a few handpicked articles that caught our eye in the areas enterprise digitization, mobile technology, augmented reality, tech entrepreneurship and the Internet of Things.

This RedBit Round Up asks about policies supporting the mobile workforce and the changing role of the IT department in the new digital enterprise.

‘Bring Your Own’ Policies and Meeting Employees’ Mobile Needs

In 2016, 65% of the U.S. workforce will be mobile. By 2021, that number will be 72%. What defines a mobile worker? Well IDC defines mobile workers as “employees who use mobile devices in their work”. To me, a ‘mobile device’ can be a Microsoft Surface, Windows Phone, iPhone, iPad, Android phone or tablet but can also include new mobile devices like Microsoft HoloLens, which is completely untethered.

Recently, Business Insider released The Enterprise App Report – Bring Your Own Policies, The Shift to Enterprise Apps and How companies are Adopting to Meet Employees’ Mobile Needs giving an overview of some of the trends happening in the enterprise.

Some key points   

  1.      69% of managers said mobility will change the enterprise in the next 10 years the way the web changed the enterprise in the last 20.
  2.      Enterprises are giving employees the opportunity to ‘bring their own device’ and have more freedom over device choices.
  3.      Employees are bringing their own apps: For example deploying DropBox or within a small group to share corporate files because companies are slow to adapt or have systems that are too hard to use.
  4.      37% of companies have already created their own mobile enterprise apps either in-house or using a partner.

So, what does this mean to you as a CIO or IT leader? It means your organization needs to be ready to support multiple devices and be ready to support third party apps. As a leader, you will also have to take into account security policies within your company (or implement one if you don’t have one) to keep corporate data safe.

If you build internal productivity or line of business apps (LOB) you need to think mobile first and adopt technologies that allow you to target multiple mobile platforms, like Xamarin. Employees want to use what they are comfortable and familiar with and companies have to be ready.

Your employees expect to be mobile and to attract new talent to your organization, you have to be able to provide a flexible technology environment. Employees are your customers too and it’s customer first, as well as mobile first.

Read the full article here.

Analysing the Chief Digital Officer and the Rise of the Digital Enterprise

I remember back when I started my career and co-op terms, working in IT departments, we would have projects that would last longer than my actual co-op term and in some cases would last years. With my short attention span that didn’t last long for me!

Fast forward 16 years later and those days are now gone, or at least they should be! If enterprise IT groups are still doing multiyear projects, they will effectively be overtaken by existing competitors who are more agile or new competitors into the market who are smaller and can move quicker.  Of course, some projects do take a long time and software is never truly done, but you have to release your enterprise software often and adopt a culture where it’s ‘Customer First’.

Quinton Wall gives some pointers in Analysing the Chief Digital Office and The Rise of the Digitial Enterprise and some good stats

  • IT needs to shift to driving digital innovation, rather than investing time, money, and personnel on activities which do not differentiate the company.
  • 68% of IT teams say their enterprises have experienced growth in mobile apps, cloud migration, and cybersecurity.
  • 63% and 62%, respectively, have plans in place to increase customer and employee apps.
  • 60% of enterprises now employ a Chief Digital Officer (CDO).

One point Quinton makes is, it’s not just about apps which I 100% agree with. It’s transforming your IT department to be more agile and have a continuous feedback loop from the end customer. Who is that end customer? The end customer can be internal employees, vendors, partners, or external customers who pay you money. A customer may need to integrate into your environment in some fashion and you need to give them the ability to integrate. That could mean giving them an ‘app’ for iOS, Android or Windows, or that could mean giving them secure access via a standard based REST API.

The transformation of IT also includes adopting cloud technologies, whether that be Amazon, Microsoft, Google, or IBM. You should no longer have to submit a ‘purchase requisition’ for a large server box that needs to be setup which could take weeks or months depending on if ‘IT has time’. You should be able to just go to your cloud vendor of choice, type in your credit card, give access to your dev team and have them spin up a ‘dev environment’ to get started. At the same time the infrastructure and security group should start figuring out the logistics of what is required to run what the dev team is building.

That leads into DevOps and a ‘DevOps Culture’. Gone are the days that you have a certain business group say to IT “we need X” and IT goes off to a room and comes back six months later and gives the business group “Y”. Once dev is done, even if the dev group does deliver “Y” when “X” was asked for, they throw it over to IT to get it up and running.

There should be no more isolation of groups, the entire company should be involved throughout the entire development process from stakeholders to testers, QA, developers, infrastructure/operational folks, business group leads and the end customer. Once ‘Version 1’ is ready, gather feedback from customers and repeat the cycle.

This is not a small task but needs to be done by all enterprises, if they don’t achieve this the company will be eliminated. Remember this great quote from Will Rogers, “Even if you are on the right track, you’ll get run over if you just sit there”. If your enterprise is a leader don’t become complacent, or you will find yourself run over by your competitors.

Read the full article here.

Resources to Polish Your Apps

By | General | No Comments

We are here at the //publish/ event for Toronto and one of the goals is to polish up apps and get them submitted. We are lucky enough to have Kevin Carey our designer at RedBit be here to help developers polish apps with design suggestions, creating visual assets and just overall design suggestions of apps.

Not everyone has a designer they can leverage, so here are a few resources for helping add some visual design to apps. Here are a few links and resources for graphics and also sound effects which are great (and required) for games.


Game Art



If you have some other links, please go ahead and share in the comments and I can add.

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