The end of logging in with a social network

You weren’t alone if you had trouble logging into Spotify, TikTok, or Tinder on Wednesday evening. As reported by The Verge, a backend configuration change on Facebook servers broke a widely used software development kit (SDK). 

Developers of these popular apps – and many others – use the Facebook-built SDK to enable account creation and login rather than creating an account using an email address and password. Using a platform account such as Facebook, Twitter, or Google to create an account is referred to as federated login

While it sounds familiar to enterprise single sign-on (SSO), it differs in account security and management. Single sign-on allows IT managers to restrict application and resource access at the account and group level. Federated login is a consumer-focused system that makes it easier for end users to onboard onto new services or applications.

The initial advantages that federated login delivered were speeding up the sign up time and reducing the number of passwords end users needed to remember (or write down on a sticky note next to their laptop).

The end of federated login

The risks of using federated login have now eclipsed the benefits. If an end user’s social media account is compromised, it could potentially allow a bad actor to access all the apps and services associated with that login. 

Beyond that, if an end user decided to close or delete a social media account, it could break their ability to login into your app or service.

Password managers such as LastPass and 1Password have made federated login unnecessary. They provide the same benefit of password reduction that federated login provides, but without the risk of data theft and SDKs breaking functionality. 

Password managers also provide browser and OS plugins that enable the quick addition of login credentials. There is no practical difference in speed when it comes to account creation using federated login versus a password manager.

Building secure solutions

Any application or service is only as stable as its weakest link. In 2016, a developer deleted a NPM module and inadvertently broke thousands of projects across the internet. One of the deleted modules included a simple function that pads out the left hand-side of strings with zeros or spaces. 

At BitBakery, we work with our clients to build solutions that are not only secure, but future-proof against SDK and shared library changes. We wrote about this back in October, 2019 when Google removed the fingerprint scanner from the Pixel 4. The lack of a working facial recognition API in Android meant that end users couldn’t securely login to their financial apps. Our team constantly monitors trends and issues for our clients to make sure they’re delivering consistent, amazing experiences to their customers.

Contact us today to learn more.

Photo by Taylor Vick on Unsplash

Looking back as we move forward – how BitBakery got its start

“It’s always good to remember where you come from and celebrate it. To remember where you come from is part of where you’re going.” – Anthony Burgess

Celebrating our first customer; and, our first payment.

Going to career fairs has always been an interesting experience for our team. It’s inspiring to hear the pitches from other companies. We love learning about how their solutions solve problems for customers around the world. 

But our favourite part is always the origin story. How did the company’s founders come upon the problem they are now solving? Like BitBakery, many of these companies started on one path and ended up going down an entirely different one as they grew.

Vidyard started as a video production company who needed a way to securely host videos for business in a way YouTube couldn’t. Today, they’re a leading video marketing platform helping connect businesses and customers.

Shopify started because a couple people selling snownboards couldn’t find a good e-commerce solution. Now they’re competing with Amazon to help retailers and brands around the world sell directly to customers.

At BitBakery, our origin story and our pitch are intertwined. We’re a trusted outsourced development partner for clients across Canada and the US. Our team of developers, designers, and quality engineers work as embedded teams and full tech teams to deliver solutions. It’s important for us that our new team members understand where we came from – and how they’re playing a part on our continued journey. 

So how did we get here?

Before BitBakery, our founding team – Wes, Joe, Attila, and Ryan – worked at a mobile app development shop building apps and games for BlackBerry smartphones. Over the years, they discovered two things. 

First – they really liked working together. 

Second – more and more work was coming in from other companies looking for help. This ranged from mobile app to web development. Sometimes it was a project to build a full solution for a client. Other times it was near the end of a project and a client needed a full-stack developer for a two-month stint. The team also found themselves cleaning up projects that had been outsourced offshore and weren’t up to speck. 

In 2014, the team realized that building apps for themselves wasn’t what they wanted to do anymore. Helping clients deliver solutions had become what they wanted to do full-time – and that’s the beginning of BitBakery.

We don’t often tell this story at career fairs – but we do like to share why our team loves what they do at BitBakery. Edson joined us in October after moving to Canada from Brazil. For Edson, it’s the variety of work that is exciting. “We do like everything and that’s cool because we do software development for so many different sizes of clients.” Another advantage of working at BitBakery is the technology stacks we work with. “For me it’s just fun to learn new things. So for me it is a big plus,” said Edson.

Marcel, one of our full-stack developers, is currently working on an embedded developer project with a Kitchener-based innovation lab. “When a client is low on developers or just need advice from experienced developers, they talk to us,” said Marcel. “We can fit their needs and just figure out the best way to help.”

One of the people you’ll meet at the BitBakery booth is Nur, our Director, Customer Relations. “From React Native to Node JS to Angular, we develop in newer stacks so we can do things quickly for our clients,” said Nur. “Everything that we do is pretty nimble.” 

Contact us today to learn more about how our team can help you deliver amazing customer experiences.

Are you a developer or designer and BitBakery sounds like the place for you? Check out our career page to learn more about working at BitBakery and where you fit.

So fresh, so clean – Why we use Bootstrap utility classes to keep CSS slim

Developer coding CSS style sheet

When it comes to maintaining code on our projects, we adhere to the campground rule – “always leave it better than you found it”. If you’ve ever updated a web project, you may have found some less than stellar comments and code. 

One of the biggest challenges can be trying to read through undocumented CSS. You can lose valuable hours investigating design rules just so you can make a simple update and keep within the existing style guide. 

There’s always the temptation to write new classes. Sometimes time isn’t on your side and the change needs to be done now. We know CSS is forgiving with redundant classes, but there are downsides to writing new classes. This is especially true when you’re using a framework like Bootstrap that provides plenty of useful utility classes.

So why do we prefer Bootstrap utility classes? Here are two ways of dealing with a change – first, by writing new classes: 

Writing new classes

HTML
<table>
  <thead>
    <tr>
      <th scope="col">Engineering & Development</th>
      <th scope="col"><span class="sr-only">Position Location column header</span></th>
      <th scope="col"><span class="sr-only">Apply column header</span></th>
    </tr>
  </thead>
  <tbody>
    <tr class="posting">
      <td class="opportunity">React Native Developer</td>
      <td class="opportunity">Kitchener, ON</td>
      <td class="apply">
        <a class="btn btn-link" href="http://bit.ly/BitBakeryJobs" target="_blank">Apply</a>
      </td>
    </tr>
  </tbody>
</table>

CSS
.posting {
  box-sizing: border-box;
  display:table;
  border-bottom: 1px solid rgba(192,192,192,192);
  width:100%
}
.apply {
  text-align: right;
  padding: 50px 0 0 0
}
.department {
  padding: 50px 0 0 0;
}
.opportunity {
  padding: 25px 50px 25px 5px;
}

Using Bootstraps Utilities

HTML
<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col" class="pb-3">Engineering & Development</th>
      <th scope="col" class="pb-3"><span class="sr-only">Position Location column header</span></th>
      <th scope="col" class="pb-3"><span class="sr-only">Apply column header</span></th>
    </tr>
  </thead>
  <tbody>
    <tr class="border-bottom">
      <td class="py-3">React Native Developer</td>
      <td class="py-3">Kitchener, ON</td>
      <td class="text-right py-3">
        <a class="btn btn-link" href="http://bit.ly/BitBakeryJobs" target="_blank">Apply</a>
      </td>
    </tr>
  </tbody>
</table>

CSS
<!-- Nothing to see here -->

When you look at both examples, they’re not all that different. One change is that the custom classes from the first example are replaced with spacing utilities like .pb-3 and .py-3 in the second example.

There’s no major difference in how browsers render these examples either. So why do it using the Bootstrap utilities? 

Long term maintainability

Our Bootstrap Utility example doesn’t have any new CSS at all. This keeps your custom CSS file leaner and more maintainable over the long term. 

Site consistency

Because it’s derived from the base spacing, the padding is consistent with the rest of the site. The padding is defined in the Bootstrap variables file. This eliminates any guesswork for how much padding or margin you should use.

These alone aren’t a reason to use a framework such as Bootstrap. If you’ve already got a framework in your project. then using its built-in utilities will save you time now – and in the future. 

Want to learn more? I recommend reading through the Bootstrap documentation to see how else you can avoid rewriting CSS that’s already been written for you.

Photo by Fatos Bytyqi on Unsplash

Putting the user first

Understanding the user and what they’re trying to accomplish is at the core of our development process here at BitBakery.

Our clients trust us to provide complete tech teams to build their MVP – minimum viable product. When we tackle these projects, we put the user at the center of our process. This ensures we’ve got the right problems identified before we start designing. 

Whether you call it human-centred design or design thinking, it’s a straightforward way of doing discovery that we use on every project. 

In my intro post, I shared with you that I’m starting my journey to learn as much about user experience design as I can. My role as a Software QA Engineer gives me a chance to work with our head of design and our developers. I get to see the entire design and development process unfold – and help shape some of the decisions we make.

Here’s a few of my takeaways so far – 

Know who you’re designing for

One of the first steps in the discovery phase is creating personas. These are representations of users – and can include their education, family background, likes/dislikes and more. Personas are meant to represent groups of users. A great design will target the right users, most of the time, not the entire world. 

Research here is crucial. We want to get the most accurate and reliable representation of the users that will use the product. We take a look at the product market to get a better profile of what ideal users could be. 

We work with our clients in creating the personas. Together, we iterate potential personas until we have a good set to work with. This helps us optimize for the right users by using their insights into their business and industry.

Keep your user stories simple

Creating personas is the foundation. With well-developed personas, we can move on to researching and identifying the right problems. To do this, we start with larger problems called epics and then start to break those down using our personas.
When writing epics, it is important to keep them simple while still describing the core of the users’ needs. “You’re not describing a solution you are describing the need of the user”, said Attila Schmidt, our Director of User Experience and Interface. Here’s a look at the hierarchy we use when writing out epics:

Epics should be high-level so we can group similar tasks together to start identifying problems. These epics are then broken down into user stories. User stories focus more in-depth about why a user may have a certain need:

User stories must also be simple enough to allow for developer creativity. If you give too much detail, you are limiting the possible solutions. “We, as designers, may have an idea of how we would like to see a feature, but we would be taking away the possibility of getting a much better method thought out by developers,” Schmidt said. 

Our developers then take these stories and create sub-tasks. They describe specific features that will become the puzzle pieces of the product. This is typically where our developers come up with innovative and optimized solutions!

Never stop learning

The discovery process is more than just identifying the problems – and it doesn’t end when development begins. The process helps drive open and consistent communication between our clients and our team of developers, designers, and QA teams. At BitBakery we make it a priority to keep everyone up to date throughout the duration of the project.

I recently attended a talk about how design teams can leverage other teams to change design culture by Matt Rae. What stood out to me the most is having the entire team involved during the design iteration process. This is key, everyone involved in the tech team can give valuable feedback. Such feedback will not only serve well for the current project but for subsequent ones as well. 

Talks like these really stand out to me. They always push us to improve our tech team environment. Together, with our clients, we can always try to optimize our product development. 

If this sparked as much interest to you as it did for me, I suggest attending community talks. There are amazing UX community initiatives here in the Waterloo Region. Here are some of my regulars: 

UXWaterloo – by Communitech P2P 

UX Book Club

Terminal Talks

Shopify Tech Talks

So, say hello if you see me at one of these. Until next time! 

Keep updated on my journey here at BitBakery.

Say hello to our newest BitBaker – Diana Valdes

Our new Software QA Engineer Diana Valdes

For many of us, our time at university or college is where we discover what we want to do as our careers begin. It was in her fourth year studying civil engineering that our newest BitBaker, Diana Valdes, discovered her first career step would be into an entirely different area of study – user experience and interaction design.

Born in Colombia and raised right here in Kitchener, Valdes joined the BitBakery team in December as our Software QA Engineer. Even with her career change, Valdes continued her studies and earned her degree in civil engineering from the University of Waterloo in 2019. “I really liked studying civil engineering, but I wanted to work in something where I could make a more direct and dynamic impact on people’s life.”

After a well-deserved vacation touring South East Asia, Valdes returned to Kitchener and began her job search. In the fall, Valdes attended the Partnerships for Employment Career Fair organized by the University of Guelph, University of Waterloo, Wilfrid Laurier University and Conestoga College. Valdes stopped by our booth and made an impression on our team.

We were looking for someone with her enthusiasm and openness to learning for the Software QA Engineer role. For Valdes, it was a great opportunity as her previous co-ops had all been in civil engineering and construction. “This role helps me learn a lot about all aspects of software development,” Valdes said. “It’s like a bootcamp for tech!”

Valdes sees BitBakery’s focus on continuous learning as a way for her to start exploring user experience processes, tools, and theories. “UX can have a positive impact on people’s lives. I love digging into what users actually want and working to make it easier and better.” Valdes attended this month’s uWaterloo meetup to hear from Faire’s Robin Bigio and Davis Neable, UX Director at Manulife.

The discussion was perfect timing for Valdes. “What I remember the most about the talk was the discussion about leadership and management,” added Valdes. “Great leadership should be helping your team not just on the next project, but also to achieve the ‘next big thing’ in their career.” 

We’re excited to have Diana on our team and look forward to helping her achieve her next big thing. Interested in learning more about how we work at BitBakery? Check out our career page to learn more.

One browser engine to rule them all

Checking out the developer tools in Microsoft Edge

There was major news in the world of web browsers last week. Microsoft released a major update to their Microsoft Edge browser that replaces their own EdgeHTML engine with Google’s Chromium engine. It’s a massive shift for Microsoft and a significant increase in Google’s leadership of the web’s core technologies. 

Our team here at BitBakery has been putting this latest Chromium-based Microsoft Edge release through its paces over the last week. Here’s what we think so far.

Simplified development and QA testing

Developers and QA testers know one universal truth of building for the web – just because something works in one browser, doesn’t mean it will work in every browser. An awesome animation built with JQuery works great in Chrome but remains motionless in Internet Explorer – yes, we’ve all been there. Moving to Microsoft Edge to be Chromium-based means more consistency in how frameworks function. Developers will find the same level of support in Microsoft Edge as they do in Google Chrome when building web apps.

The built-in Developer Tools within Microsoft Edge are also very close to those provided in Google Chrome. This means there’s no additional time needed to get familiar with a new set of dev and debugging tools.

Browser deployment and security

Google Chrome has a whopping 69% share of the browser market. If you’re developing consumer websites and applications, the new Chromium-based Microsoft Edge could potentially reduce the complexity of your dev and QA processes since it shares its core engine with Google Chrome. 

Microsoft Edge is the successor to Microsoft Internet Explorer which dominated large enterprise companies for years. If your company still uses Microsoft Internet Explorer, well, Microsoft really wants you to stop. From a security and stability standpoint, Microsoft Internet Explorer has not been updated in a few years, potentially exposing your systems and data to malicious attacks. If you have internal web apps that require Microsoft Internet Explorer, Edge offers an IE11 compatibility mode for Windows that should allow those internal web apps to function. This feature isn’t available in Microsoft Edge on macOS.

The future of the world wide web

While the move to Chromium is great for developers, it does continue to solidify Google’s dominance when it comes to web standards. This increased market share means Google has an even stronger hand in directing which frameworks and tools have support. 

Apple’s Safari browser and Mozilla’s Firefox are now the only two major non-Chromium browsers on the market. For developers and testers, there’s still a need to include these in your planning. There have been rumors of a switch to Chromium for Apple’s Safari, but for now the company has said they have no plans in the works.

As a trusted source for outsourced development, BitBakery is adding the latest Microsoft Edge releases to our testing plans. We’re here to answer any questions you have about this or any other outsourced development question.