Ebury LABS http://labs.ebury.rocks Ebury’s official technology blog Tue, 13 Nov 2018 12:00:55 +0000 en-GB hourly 1 https://wordpress.org/?v=4.8 The best of Generate Conference – 2018 http://labs.ebury.rocks/2018/11/12/best-generate-conference-2018/ http://labs.ebury.rocks/2018/11/12/best-generate-conference-2018/#respond Mon, 12 Nov 2018 16:05:49 +0000 http://labs.ebury.rocks/?p=1768 The best of Generate Conference – 2018

Last month, the Ebury team attended Generate, a conference dedicated to designers who are looking to improve the user experience (UX) of their websites. We’ll be talking through what we learned, how we’ll be applying our new knowledge to our UX, but most importantly, what you can take away to apply yourself. The opening talk … Continue reading The best of Generate Conference – 2018

The post The best of Generate Conference – 2018 appeared first on Ebury LABS.

]]>
The best of Generate Conference – 2018

Last month, the Ebury team attended Generate, a conference dedicated to designers who are looking to improve the user experience (UX) of their websites. We’ll be talking through what we learned, how we’ll be applying our new knowledge to our UX, but most importantly, what you can take away to apply yourself.

The opening talk was presented by Sarah Parmenter who spoke about the importance of digital marketing strategies that can be easily applied by anyone. Parmenter shared key rules that can be applied today to help decide the best media tool to distribute your company’s message: First, think about your Product, then the client Experience, and then the Story. Only then, you can choose the right media outlet.

Our tip for you: If you decide to do a video, make sure you include subtitles, as 85% of all videos are played without sound.

Do you struggle to get your videos noticed? Try Hashtagify to find the best hashtags to get your content noticed.

The closing talk was presented by Sara Soueidan, a front-end UI developer who talked through how cascading style sheets (CSS) and scalable vector graphics (SVG) can be used for better usability and accessibility. One takeaway we gathered from this was to make sure that you integrate these inclusive design practices as part of your natural design and development process.

While CodePen’s senior software engineer Cassidy Williams impressed attendees by coding an image chosen at random found on Dribbble, designer and developer, Ricardo Cabello, demoed Three.js library to demonstrate how you can create WebVR interfaces with the library available on that platform.

UX consultant Trine Falbe talked through the importance of ethics when designing, highlighting the importance of how the data generated by users is looked after. In an age where data is the new oil, this is to consider for data-driven teams.  

Probably one of the most interesting talks of the day was presented by Andrew Godfrey, Senior Design Specialist at Invision, on Design Systems fails. Godfrey exposed some of the goals a successful design system has, such as:

  • Improved consistency
  • Efficient time on task
  • Efficiency reuse
  • Inclusive design (accessibility)
  • Reduction of defects
  • Improved UX
  • Strong design community

Godfrey also highlighted common failures that need to — and can easily — be avoided, such as:

  • Low adoption by internal staff
  • Low understanding by internal staff
  • Mismanaged content
  • Scale system difficulty
  • Lack of support
  • Missing the bigger picture (not just in UI components)
    • Lack of style guides
    • Unclear visual components
    • Unclear standards
    • Accessibility
    • Animation
    • Information architecture

Godfrey advocates considering Design Systems as a core project inside the business, which means adopting processes such as:

  • A plan, strategy, and process
  • A roadmap and priorities
  • Scaling up when validating
  • Incorporating ways of measuring and sharing success
  • Creating prototypes that can be validated
  • Assigning a ‘person of expertise’, that knows the system well
  • Effectively calculating design debt

 

For us at Ebury, Design Systems are one of the key tools to create and maintain a good user experience across all of our services. This is the key principle behind Ebury Chameleon and the reason why we’ll continue investing and improving our processes to ensure high-quality products and services.

The post The best of Generate Conference – 2018 appeared first on Ebury LABS.

]]>
http://labs.ebury.rocks/2018/11/12/best-generate-conference-2018/feed/ 0
Jenkins World: Fighting the Jenkinstein http://labs.ebury.rocks/2018/11/09/jenkins-world/ http://labs.ebury.rocks/2018/11/09/jenkins-world/#respond Fri, 09 Nov 2018 14:41:09 +0000 http://labs.ebury.rocks/?p=1749 Jenkins World: Fighting the Jenkinstein

Jenkins World is a two-day conference held specifically for IT executives, DevOps practitioners, Jenkins users and partners. This year, I attended the conference in Nice, France.  Jenkins World has traditionally always been held in San Francisco, but this year it expanded across to Europe with the additional conference admitting more than 800 attendants. Due to … Continue reading Jenkins World: Fighting the Jenkinstein

The post Jenkins World: Fighting the Jenkinstein appeared first on Ebury LABS.

]]>
Jenkins World: Fighting the Jenkinstein

Jenkins World is a two-day conference held specifically for IT executives, DevOps practitioners, Jenkins users and partners.

This year, I attended the conference in Nice, France.  Jenkins World has traditionally always been held in San Francisco, but this year it expanded across to Europe with the additional conference admitting more than 800 attendants. Due to the success of the first European conference, another has been scheduled for next year—taking place in Lisbon.

The event was sponsored and driven by CloudBees, the company behind Jenkins (in fact, the creator of Jenkins, Kohsuke Kawaguchi, is CTO of CloudBees. A few big names attended, such as Amazon, Google, Microsoft, Docker and VMWare. There was also a great presence of the Jenkins OSS community.

While Jenkins has been around for more than ten years, its roots can be traced back almost 15 years, so it was created in a completely different landscape compared with today’s technology and industry practices—for example, there were neither cloud nor Agile methodologies back then. In 2014, the then-called workflow plugin (later renamed to Pipeline) was introduced. It was a disruptive change, as there was no direct compatibility between old-style pipelines (that were, and still are available) and new pipelines. I remember being very critical at the time, since it was quite bugged and a somewhat incomplete function, (even in 2016 when Jenkins 2.0 was announced) so I wouldn’t have recommended migrating to Jenkins pipelines at that point. However, I was proven wrong and it evolved well. By mid-2017 it was production ready, so we started a successful migration at Ebury later that year.

Note that we are talking about three years of evolution to have a usable pipeline, which is a considerable amount of time. In fact, during this time other pipeline solutions, like CircleCI and Bitbucket Pipelines managed to be built from scratch and launched. However, this last year has been a year of wonder for Jenkins, with lots of amazing initiatives crystallizing for pipeline and beyond. All of this was presented at the Jenkins World conference in a quite well structured way:

Pipeline

With Declarative Pipeline Syntax and multibranch and organization jobs, Jenkins made a step forward in the last couple of years. Pipeline as Code continues being the backbone of the project, and that’s good news.

Configuration as Code

Although Pipeline as Code helped us a lot with job configuration, and the different cloud plugins also helps configuring slaves/nodes… when it comes to configure the Jenkins instances that instrument all that, it’s still really painful, and this tool comes to fill that gap.

We’ve been waiting for something like this for a long time, and thanks to Praqma and Ewelina Wilkosz, it’s finally here. It’s important to note that while this has not come from Cloudbees or Jenkins core, it has now been embraced as part of Jenkins core. It just looks awesome. We’re really excited to start configuring our instances this way.

 Jenkins Evergreen

This project is about Jenkins out-of-the-box experience. Think of it as a Linux distribution, a complete set of plugins thoroughly tested together for functionality and security, bundled with a Jenkins LTS version.
Of course, it will reduce flexibility in some scenarios, but quoting Michaël Pailloncy, we used to install the latest Jenkins versions instead of LTS when we were young… but we don’t do it anymore, and the same may apply for the huge collection of plugins we use day-to-day.

Cloud Native Jenkins

Along with configuration, another long lasting pain in Jenkins’ administrations has always been infrastructure for the master instance, particularly when it comes to storage. It also weighed the possibility of true high availability (HA) for Jenkins master. This is by far the less polished of the superpowers, exemplified by the fact that it is a Special Interest Group and not a Project.

Jenkins X

Continuous integration and deployment for Kubernetes in an “opinionated” way. This means it’s only for Kubernetes, and it enforces a certain way of working. Quite far from the extraordinary flexibility that has characterised Jenkins. As Koshuke explained, it acts like a train with a fixed destination (i.e Kubernetes) and fixed rails… but it’s a really comfortable and fast train.

Kubernetes has been a topic of discussion in almost every talk, as it’s now seen almost as a standard for microservices architectures.

Image: 

An other interesting topic at the conference was the “Jenkinstein”. Over the time, when Jenkins instances start to grow in usage in organisations, they sometimes tend to grow in uncontrollable ways, essentially becoming monsters that need more and more dedicated work maintaining them.

These ‘superpowers’ will help developers and Jenkins administrators to fight these “Jenkinsteins” monsters. At Ebury, we’ve taken advantage of everything included in Jenkins 2.0—over the last year we’ve managed to remove all the mess in jobs creation, linking and configuration. However, we still need some puppeting when it comes to the operations side, and we will for sure also take advantage of Configuration as Code and Jenkins Evergreen projects.

Enjoy Jenkins and automation, and remember two quotes I have learnt over the last two days:

  • If you automate a mess, you get an automated mess
  • “Never send a human to do a machine’s job”

The post Jenkins World: Fighting the Jenkinstein appeared first on Ebury LABS.

]]>
http://labs.ebury.rocks/2018/11/09/jenkins-world/feed/ 0
EUROPYTHON 2018 Asyncio learnings http://labs.ebury.rocks/2018/10/23/europython-2018-asyncio-learnings/ http://labs.ebury.rocks/2018/10/23/europython-2018-asyncio-learnings/#respond Tue, 23 Oct 2018 15:45:52 +0000 http://labs.ebury.rocks/?p=1723 EUROPYTHON 2018 Asyncio learnings

EDINBURGH Thanks to Ebury’s learning program, Héctor Álvarez and Jesús Gutiérrez were selected to attend EuroPython in Edinburgh. EuroPython is a yearly conference in Europe that focuses on Python programming language and its ecosystem . This year’s sessions were held at the Edinburgh International Conference Center; an amazing building in the core of the city, just a … Continue reading EUROPYTHON 2018 Asyncio learnings

The post EUROPYTHON 2018 Asyncio learnings appeared first on Ebury LABS.

]]>
EUROPYTHON 2018 Asyncio learnings

EDINBURGH
Thanks to Ebury’s learning program, Héctor Álvarez and Jesús Gutiérrez were selected to attend EuroPython in Edinburgh.

EuroPython is a yearly conference in Europe that focuses on Python programming language and its ecosystem . This year’s sessions were held at the Edinburgh International Conference Center; an amazing building in the core of the city, just a stone’s throw away from the historical city of Edinburgh.

More than 1200 programmers and python lovers from 51 countries attended the event. With over 150 sessions in 7 tracks we were prepared to take away as much new information as possible.

From the outset, it was clear that the hottest topic in EuroPython was asynchronous programming. First integrated into 3.6 Python, and in various iterations since, it is still entirely possible to use Python without needing or even knowing about the asynchronous paradigm. However, if you are interested in the nuts and bolts of the tech involved, read on.

For the beginners out there, your central processing unit (CPU) follows a synchronous programming model, which means that things happen one by one. For example, when you create a function that performs a long-running action, it returns only when the action is finalised and it can return the result. Even when different programs that are run by your Operating System (OS), which is programmed synchronously, the OS manages them asynchronously. This is why multitask Operating Systems have been used for a long time.

The pitfall of asynchronous programming is that it’s difficult to know which of the coroutines has the execution time, and which coroutine spawned which; the event loop obviously knows but the programmer doesn’t.

The recently launched Python3.7 tries to solve that problem with inheritance of tags.

Under the asynchronous topic:

Asyncio in python 3.7 and 3.8 (Yury Selivanov)

Asyncio in production (Hrafn Eiriksson)

Asyncio in practice: We did it wrong (Lynn Root)

Here, I’ll briefly explain how the asynchronous programming works since Python 3.5.

As mentioned before, classic program code is executed in a single event line.In asynchronous programming, however, code is executed in a single loop. That loop is part of the code that orchestrates what’s executed when, inside the loop, there are a group of tasks—coroutines. Coroutines are defined with the reserved word async.

When a coroutine has been executed, it reports to the loop when it’s waiting for an external resource using the reserved word await.

When the loop detects that a coroutine is awaiting, it gives the execution time to the next coroutine, the loop then stores the memory state and where it’s waiting. When the external resource finally gives the response it fires a callback so knows that the coroutine is ready to keep working.

That’s  the theory, but now it’s time to look at the code:

 

import asyncio
import logging


logging.basicConfig(format='%(asctime)s %(message)s', datefmt='[%H:%M:%S]')
log = logging.getLogger()
log.setLevel(logging.INFO)


# define a coroutine
async def sleeper(name, delay):
    """This coroutine will wait for 2 seconds and then keep working."""
    log.info(f"{name}: START (wait for {delay}s)")
    await asyncio.sleep(delay)
    log.info(f"{name}: END (wait for {delay}s)")
    return name

if __name__ == '__main__':
    # create the loop
    loop = asyncio.get_event_loop()

    coroutine1 = sleeper('first coroutine', 2)
    coroutine2 = sleeper('second coroutine', 5)
    task1 = loop.create_task(coroutine1)
    task2 = loop.create_task(coroutine2)

    log.info("main: START run_until_complete")
    loop.run_until_complete(asyncio.wait([task1, task2]))
    log.info("main: END   run_until_complete")


Here at  Ebury, we don’t currently use asynchronous programming because Django (our framework) is not asynchronous. However, there are parts of the code that are slow (like sending an email that will delay for a second), and so in those cases we use a workaround—task executor named celery. If you want to know more about celery, follow this link: ks/?s=celery

Miscellaneous

Domain Driven Design, Robert SmallShire

Domain Driven Design is an approach to software development that emphasises high-fidelity modelling of the problem domain, which uses a software implementation of the domain model as a foundation for system design.

PEP 557 (data classes) versus the world (Guillaume Gelin)

Data classes are a very controversial feature, yet here it’s explained why they’re useful for us.

Getting started with mypy and type checking (Jukka Lehtosalo)

Mypy , is defined as: a static type checker for Python that aims to combine the benefits of dynamic (or “duck”) typing and static typing.

Static typing can help you find bugs faster with less testing and debugging. In large and complex projects, this can be a major time-saver.

Python decorators: Gift or poison? (Anastasiia Tymoshchuk)

A taxonomy of decorators: A-E (Andy Fundinger)

Python 2 is dead! Drag your old code into the modern age (Becky Smit)

What’s new in Python 3.7 (Stephane Wirtel)

Pythonic code vs. Performance (Łukasz Kąkol)

 

The post EUROPYTHON 2018 Asyncio learnings appeared first on Ebury LABS.

]]>
http://labs.ebury.rocks/2018/10/23/europython-2018-asyncio-learnings/feed/ 0
Ebury Salesforce at the DreamOlé 2018 Event http://labs.ebury.rocks/2018/08/30/ebury-salesforce-dreamole-2018-event/ http://labs.ebury.rocks/2018/08/30/ebury-salesforce-dreamole-2018-event/#respond Thu, 30 Aug 2018 15:14:27 +0000 http://labs.ebury.rocks/?p=1705 Ebury Salesforce at the DreamOlé 2018 Event

On the 27th of April this year, the Ebury Salesforce team attended DreamOlé; the biggest Salesforce event in Spain, with collaborators and speakers from around the world gathering to share their knowledge, skills and experience with the audience. The important presentations from our perspective were… From Zero to CI in 30 minutes by Christian Szandor … Continue reading Ebury Salesforce at the DreamOlé 2018 Event

The post Ebury Salesforce at the DreamOlé 2018 Event appeared first on Ebury LABS.

]]>
Ebury Salesforce at the DreamOlé 2018 Event

On the 27th of April this year, the Ebury Salesforce team attended DreamOlé; the biggest Salesforce event in Spain, with collaborators and speakers from around the world gathering to share their knowledge, skills and experience with the audience.

The important presentations from our perspective were…

From Zero to CI in 30 minutes by Christian Szandor Knapp

Christian talked about the benefits of Continuous Integration and how it can streamline our deployment flow and free up the team to work more on delivering functionality to the business. As everyone who works with Salesforce is aware, changesets are horrible and time-consuming to use but here we are in 2018 and a majority of us are still using them.

Salesforce DX was the first major step from Salesforce to close the deployment gap, taking the source code and metadata outside of a Salesforce org. We also got (quick to spin up) scratch orgs, a command-line interface and Heroku Flow’s integration with GitHub plus the ability to plug into 3rd party build and test automation tools. It was a good start.

Christian focussed on CircleCI in conjunction with Salesforce DX. He talked through the ease of setup, minimal variables needed and the power of parallelisation when deploying. This was then demonstrated in a live demo, and indeed the setup process does appear to be a strong point of the product. Here at Ebury we have spent some time looking at Copado, probably a more rounded solution at this time, we liked the product but in the end we decided not to proceed. However, CircleCI is something we will watch and see how it evolves.

….read more about CircleCI 2.0 here and Ebury’s experience on the Salesforce DX pilot here. Watch the DreamOlé session here and follow Christian Szandor Knapp (ch_sz_knapp) on Twitter here.

A quest to stop Salesforce mutants, a testing tale! by Sara Sali

The goal of mutation testing is the measurement and improvement of test quality. How? By performing small changes (on the mutants, which have undesired behaviours) in our code and if our tests fail with those changes, that means the test suite is doing a good job. But if our tests do not detect the added “bugs”, then adjustments are required. It could be that the mutation introduced is never actually executed (your code is dead) or that your test coverage is incomplete.

Sara has built a beta app that enables mutation testing in Salesforce, this is a first for the platform. The scores that Sara’s app produces once the tests are run enables you to focus in on the areas that need attention, plus if you are handing over to another developer or team then they can use these scores to give them confidence in the testing.

mutation score = killed mutants / all mutants

There can be issues with APEX tests, in that less conscientious developers can be focussed purely on playing the game rather than aiming for quality, and Sara has addressed this in her design. I think we would like to use something like this at Ebury so hopefully Sara and her company will decide to go the open source route. Either way, this was a great session from someone who really understands the subject very deeply.

You can watch Sara’s presentation here.

Platform Events and the Spanish Omelette by Jero Guerrero and Pedro M. Molina

A talk on Salesforce Platform Events, the enterprise messaging service that has now replaced the (push model) Streaming API. These Platform Events are mostly used to connect Salesforce with external systems through a pub/sub model and enable a highly distributed set of business applications to interact based on changes in the state of their customers, products, or anything at all that is meaningful to their organisation.

An Event driven approach is not new, but the challenge for Salesforce was to implement it in their metadata-driven, multi-tenant model. The usual approach would be to have a persistent queue for each subscriber, but with a huge amount of tenants each potentially having multiple subscribers this could be a stateful nightmare for Salesforce to handle.

What could we do with it? Well, imagine we were listening to our online platform and we have a customer who is logging in and getting quotes but not trading. When we hit a defined threshold of quotes without trades, we could throw an event and update their status to something like “churn risk” in Salesforce and create a callback for their account manager to follow up with them.

And the Spanish Omelette reference? Well, that referred to a demo showing an integration with Twitter and Salesforce showing how a poll conducted with hashtags could be pulled into Salesforce and used there. Watch the Platform Events session here.

We at Ebury would like to thank all the presenters and organisers for making this event so educational and we are all looking forward to the next DreamOlé event. You can find all the sessions, not just the ones I have mentioned, on the DreamOlé site here.

The post Ebury Salesforce at the DreamOlé 2018 Event appeared first on Ebury LABS.

]]>
http://labs.ebury.rocks/2018/08/30/ebury-salesforce-dreamole-2018-event/feed/ 0
Takeaways from the 2018 ExpoQA in Madrid http://labs.ebury.rocks/2018/07/23/takeaways-2018-expoqa-madrid/ http://labs.ebury.rocks/2018/07/23/takeaways-2018-expoqa-madrid/#respond Mon, 23 Jul 2018 07:48:51 +0000 http://labs.ebury.rocks/?p=1683 Takeaways from the 2018 ExpoQA in Madrid

For the fourth consecutive year, Ebury attended the ExpoQA conference during 4-6 June in Madrid. Events such as these are paramount in order to stay updated with the latest news in technology, tools, methodologies and all the nerdy stuff we love. We would like to highlight the following  presentations: Focus on product quality instead of … Continue reading Takeaways from the 2018 ExpoQA in Madrid

The post Takeaways from the 2018 ExpoQA in Madrid appeared first on Ebury LABS.

]]>
Takeaways from the 2018 ExpoQA in Madrid

For the fourth consecutive year, Ebury attended the ExpoQA conference during 4-6 June in Madrid. Events such as these are paramount in order to stay updated with the latest news in technology, tools, methodologies and all the nerdy stuff we love.

We would like to highlight the following  presentations:

  • Focus on product quality instead of testing by Dana Aonofriesei. She offered a look into how we need to pay attention to quality in production monitoring. We loved her alert system where the alerts have the status “Pending”, “Researching” and “Solved” to help manage the alerts and give better visibility. In addition, we really liked how her system automatically assigns bugs by “keywords”.
  • Yes, we can. Integrating test automation in a manual context by Andreas Faes. Based on his experience, he talked about implementing test automation processes in his company, up to the point of how developers are using code created by QA (dev in test) to test his developer code, similar to TDD but with tests driven by QA. This is something that we will be looking to apply in our own teams.

  • Why has software security gotten worse? And what can we do about it? by Santhosh Tuppad. A presentation on how security testing has become more paramount now that even more devices and applications used in everyday life are connected to the internet. We learnt that you don’t have to be an expert to discover security issues in your systems but if we want specific security tests we should hire a hacker.
  • The final frontier? Testing in production by Marcel Gehlen and Benjamin Hofmann. They gave us an interesting view on testing in different environments. We were interested in their solution regarding testing in a “production” environment by managing the architecture e.g. redirecting production environment to obfuscated data stores or using an A/B testing technique.


We would like to thank Ard Kramer, Miriam Miranda, Graham Moran and the organisers of the ExpoQA for giving all of us the opportunity to share ideas and learn from other developers.

The post Takeaways from the 2018 ExpoQA in Madrid appeared first on Ebury LABS.

]]>
http://labs.ebury.rocks/2018/07/23/takeaways-2018-expoqa-madrid/feed/ 0
DjangoCon Europe 2018 http://labs.ebury.rocks/2018/06/26/djangocon-europe-2018/ http://labs.ebury.rocks/2018/06/26/djangocon-europe-2018/#respond Tue, 26 Jun 2018 09:20:29 +0000 http://labs.ebury.rocks/?p=1671 DjangoCon Europe 2018

DjangoCon Europe 2018, the European conference for the Django framework, was held this year in Heidelberg, Germany, from May 23rd – 27th. Professionals from around the world gathered together to enjoy a collaborative environment with talks given on a variety of topics, from philosophical issues, to technical details. Ebury adopted Django a few years ago … Continue reading DjangoCon Europe 2018

The post DjangoCon Europe 2018 appeared first on Ebury LABS.

]]>
DjangoCon Europe 2018

DjangoCon Europe 2018, the European conference for the Django framework, was held this year in Heidelberg, Germany, from May 23rd – 27th. Professionals from around the world gathered together to enjoy a collaborative environment with talks given on a variety of topics, from philosophical issues, to technical details.

Ebury adopted Django a few years ago now as part of its core technology stack and this conference is always great to look at future opportunities.

We particularly like to highlight the talks on Django-channels 2, a project that takes Django and extends its abilities beyond HTTP, using protocols like: Websockets, allowing developers to do applications with asynchronous communication, and doing compatible synchronous and asynchronous Django code. Andrew Godwin, the main developer of the Django-channels and South, explained the Channels’ architecture and recommended best use cases for synchronous and asynchronous code.

Additionally, the conference covered technical topics such as; representing hierarchies in relational databases, improving Django deployments with packaging, using Docker, solid  API creation and GraphQL usage, accessibility, advantages search, data edition in production environments, protecting personal data, authentication and authorisation using third parties, and more.

Here is a list of the most interesting resources discussed during the Conference:

You can find all the talks presented at the event uploaded here. Thanks to all those involved for their dedication and effort in such a great event, see you next year!

The post DjangoCon Europe 2018 appeared first on Ebury LABS.

]]>
http://labs.ebury.rocks/2018/06/26/djangocon-europe-2018/feed/ 0
Introducing huha.js: Analysing User Experience with Javascript http://labs.ebury.rocks/2018/06/22/huha-user-experience-javascript/ http://labs.ebury.rocks/2018/06/22/huha-user-experience-javascript/#respond Fri, 22 Jun 2018 10:35:59 +0000 http://labs.ebury.rocks/?p=1634 Introducing huha.js: Analysing User Experience with Javascript

We love building great products, but a product would be completely useless if it is not properly designed for the people who are meant to use it. This lack of efficiency impacts the user experience (UX) of the solution. But, how can we achieve a good UX when developing a product? Is there a way … Continue reading Introducing huha.js: Analysing User Experience with Javascript

The post Introducing huha.js: Analysing User Experience with Javascript appeared first on Ebury LABS.

]]>
Introducing huha.js: Analysing User Experience with Javascript

We love building great products, but a product would be completely useless if it is not properly designed for the people who are meant to use it. This lack of efficiency impacts the user experience (UX) of the solution. But, how can we achieve a good UX when developing a product? Is there a way that we can measure user performance objectively?

By trying to answer these questions, we realised there aren’t any cheap and easy-to-use tools ready for any member of our team. So, since we have some experience in things like building software, we decided to develop our own tool.

We are glad to introduce huha.js, a Javascript framework that is intended to measure the usability and user experience in an automated way, considering the limitations of the model and best practices.

In this post, we would like to share how it was built, in order to get fast and detailed feedback on user experience and be able to provide support to a highly iterative agile development practice.

 

Measuring user performance

We needed a way to be ahead of customer feedback and understand how the actual user behaviour is impacted after the solution is applied. We asked ourselves “how can we collect information about what our customers are doing when they try to achieve a goal?”

We started simple and began by defining a model that will represent how users interact with products based on Tasks. A Task is a minimal activity that a user does when using an application, like logging in, creating an item, searching or filtering data.

The model will be implemented with Javascript, since it will allow us to integrate it easily with any of our projects built with web technologies. So far, we just need a class with a name that will represent our tasks.

class Task {
  constructor(name) {
    this.name = name;
  }
}

Easy peasy, right? Let’s make this task more useful. Our goal is to include more metrics that will help us to understand the user performance.

Result

Our first metric is going to be the result of the task. A task can have two different results: completed or abandoned. If the user completes the task with success, it’s labeled as “completed”. If the user doesn’t go through the task completely, then it’s marked as “abandoned”.

In the code, we have a third label, used when the task is in progress, so the result is currently unknown.

const IN_PROGRESS = 'In progress'; 
const COMPLETED = 'Completed'; 
const ABANDONED = 'Abandoned';

class Task { 
  constructor(name) {
    // ...
    this.result = IN_PROGRESS; 
  }

  complete() {
    this.result = COMPLETED;
  }

  abandon() {
    this.result = ABANDONED;
  }
}

We will execute the “complete” and the “abandon” methods whenever we consider the task is finished. The applications integrated with the tool are responsible for changing the result of the task. This offers great flexibility while keeping things simple (we love the KISS principle!).

Interactions

Usually, the most efficient UI is the one that doesn’t require many interactions from the users. Therefore, we’ll try to have the number of interactions as minimum as possible without affecting other metrics.

This effort is quantified as a number in the task, which is initialised to zero. That value is increased whenever we consider there is an interaction.

class Task {
  constructor(name) {
    // ...
    this.effort = 0;
  }

  addInteraction() {
    this.effort += 1;
  }
}

Again, as we wanted a flexible tool, we offer a method for adding an interaction that needs to be executed by the application including this tool. This is normally triggered every time the user performs a click, a keystroke or gets an input focus.

Errors

Another metric we wanted to measure and, keep as low as possible, is the number of errors that users make during the execution of a task. This is because a user who encounters many errors trying to achieve something is likely to become frustrated, increasing the chances of them abandoning the task altogether.

Like the effort, errors are modelled as a number.

class Task {
  constructor(name) {
    // ...
    this.errors = 0;
  }

  addError() {
    this.errors += 1;
  }
}

Time

Finally, the last metric we are going to collect is the time that the user needs to finish a task. We don’t want our users spending too much time on tasks if that is the result of more effort or errors.  

In order to record that time, we are going to store when the task started and when it finished. So the time spent on a task will be the difference between these two date times.

class Task {
  constructor(name) {
    // ...
    this.start = new Date();
    this.end = null;
  }

  get time() {
    return this.end - this.start;
  }

  finish(result) {
    this.result = result;
    this.end = new Date();
  }

  complete() {
    this.finish(COMPLETED);
  }

  abandon() {
    this.finish(ABANDONED);
  }
}

A real example

Now that we have everything we need to start measuring how the users use the applications, let’s apply it to a real example: a login page.

Our definition of the task will be the following:

  • Result: Completed when clicking on the “Login” button and after entering an username and password. Abandoned when clicking on the “Lost your password?” link.
  • Interactions: They are incremented every time the user focuses on one of the inputs or clicks on either the “Login” button or the “Lost your password?” link.
  • Errors: Increased  whenever the user tries to login without entering a username or password.

Keep in mind that this doesn’t need to be the only way to be authenticated in an application, so we could potentially define different “login” tasks. Besides, a “successful” login is not when the user clicks on the login button but when the server authenticates the user, but in order to have a simple example we are assuming that just clicking on the “Login” button is enough.

HTML

<form>
  <input type="text" id="user">
  <input type="password" id="pass">
  <button type="button" id="login">Login</button>
  <a href="#" id="forgot">Lost your password?</a>
</form>

Javascript

const task = new Task('Login');
console.log(task.name); // Login
console.log(task.result); // In progress

const user = document.querySelector('#user');
const pass = document.querySelector('#pass');
const login = document.querySelector('#login');
const forgot = document.querySelector('#forgot');

login.addEventListener('click', () => {
  task.addInteraction();
  if (user.value && pass.value) {
    task.complete();
    console.log(task.result); // Completed
  } else {
    task.addError();
  }
}

forgot.addEventListener('click', () => {
  task.addInteraction();
  task.abandon();
  console.log(task.result); // Abandoned
}

user.addEventListener('focus', () => {
  task.addInteraction();
}

pass.addEventListener('focus', () => {
  task.addInteraction();
}

Tracking the metrics

So, we already know how to get all the different metrics but there is one important thing missing. How can we analyse them in order to make changes??

There are different approaches we can follow: 1) store all the data directly in a database (our own database or a cloud one like Firebase) and perform queries against it or 2) use a third party tool that already provides the analysis part (such as Google Analytics, Intercom or Segment).

Due to its ease of use, and because we were already using it in our projects, the first tracker we’ve added to our library is Google Analytics. We send three different events for storing the time on task, the effort and the errors. The result is indicated in all of them so we can then compare the different results.

class Task {
  // ...
  finish(status) {
    // ...
    this.track();
  }

  track() {
    gtag('event', 'timing_complete', {
      event_category: this.name,
      event_label: 'Time on task',
      value: this.time,
      name: this.result,
    });
    gtag('event', this.result, {
      event_category: this.name,
      event_label: 'Error',
      value: this.errors,
    });
    gtag('event', this.result, {
      event_category: this.name,
      event_label: 'Effort',
      value: this.effort,
    });
  }
}

Open source library: huha.js

As mentioned previously, we implemented and released huha.js, a Javascript library that is intended to measure user experience automatically based on the concepts explained on this post.

If you want to have a look at both the code and the documentation, you can check out the repository on Github. As an open source project, we are happy to receive contributions from the community!

Our context: we are agile

Before wrapping up, it is important to understand the context of the problem, how it originated and why usability is so relevant for our products.

We are applying an agile methodology. This means that we want to validate every new feature we launch as soon as possible. We release these features in small iterations, then we gather feedback from our customers to validate their usability and define new improvements according to the feedback.

One of the aspects that is going to affect those features most, and our customer’s feedback, is their experience with the solution. If clients don’t know how to use our products, or if they spend a long time trying to achieve a goal, their feedback will probably be negative and we would need to spend more time developing and  improving the usability.

The post Introducing huha.js: Analysing User Experience with Javascript appeared first on Ebury LABS.

]]>
http://labs.ebury.rocks/2018/06/22/huha-user-experience-javascript/feed/ 0
Queue tasks in Celery after database commit – Introducing django-transaction-hooks http://labs.ebury.rocks/2018/04/18/introducing-django-transaction-hooks/ http://labs.ebury.rocks/2018/04/18/introducing-django-transaction-hooks/#respond Wed, 18 Apr 2018 16:51:10 +0000 http://labs.ebury.rocks/?p=1622 Queue tasks in Celery after database commit – Introducing django-transaction-hooks

At Ebury, we use Django and have followed an ongoing upgrade path from 1.3 to 1.5 to 1.7. During that time we have had an issue that was messing with us. You might be familiar with it. We use celery for  executing asynchronous tasks and Django is our framework with PostgreSQL database. The issue occurs … Continue reading Queue tasks in Celery after database commit – Introducing django-transaction-hooks

The post Queue tasks in Celery after database commit – Introducing django-transaction-hooks appeared first on Ebury LABS.

]]>
Queue tasks in Celery after database commit – Introducing django-transaction-hooks

At Ebury, we use Django and have followed an ongoing upgrade path from 1.3 to 1.5 to 1.7. During that time we have had an issue that was messing with us. You might be familiar with it.

We use celery for  executing asynchronous tasks and Django is our framework with PostgreSQL database.

The issue occurs when an asynchronous task makes use of an object that has been just updated, or  created. There is a dependency with the database, the object might not have the updated status when the asynchronous task starts, or not even exists yet.

We are now able to utilise the  library django-transaction-hooks, which works with Django 1.6 through 1.8, and has been merged into Django 1.9+.

What is important with this library is that adds the event “on_commit” to manage timing with database transactions. So, we  can use this for scheduling when to queue tasks for celery workers. The main advantage comes when we want to queue using an object created into an atomic transaction. Consider the following example:

When a task is queued, for instance is not committed into database, and the odds of workers starting tasks with the response “ObjectDoesNotExist”  increases with the number of instructions in <other actions>.

With django-transaction-hooks the task is not queued until atomic block is committed.

Essentially, django-transaction-hooks just extends the back-end of the connection with database, managing in memory instructions added with “on_commit” method inside each block, and popping the list out once the transaction ends.

All perfect so far, this suits perfectly with what we want. However, there are two things that still need addressing: compatibility with standard database back-end and an ugly syntax.

As reflected in the library’s documentation, for using it we just need to change settings for the database engine.

DATABASES = {
    'default': {
        'ENGINE': 'transaction_hooks.backends.postgresql_psycopg2',
        'NAME': 'foo',
    },
}

However, people through our teams run their environments with a different settings files, depending on their needs, where they could be using a different backend. Calling “connection.on_commit” with django standard back-end will throw an “AttributeError”. So people would be forced to update its database back-end.

Here come across the second point, we don’t like that syntax. I personally hate the lambda syntax, so always try to avoid it.

At the moment we are only  using “on_commit” events for queuing to celery, and we have developed our tasks based on Task classes. So, this is the solution we have come up with: set a new method that looks like celery native and wrap compatibility between both engines.

class BaseTask(Task):
    """
    Base celery task for trades app
    """
    abstract = True

    def apply_on_commit(self, args=None, kwargs=None, task_id=None, producer=None,
                        link=None, link_error=None, **options):

        if settings.TRANSACTION_HOOKS_POSTGRE_BACKEND == settings.DATABASES['default']['ENGINE']:
            connection.on_commit(lambda: self.apply_async(args, kwargs, task_id, producer,
                                                          link, link_error, **options))
        else:
            self.apply_async(args, kwargs, task_id, producer, link, link_error, **options)

We look for the engine value to call “apply_async” method directly or we can use it with connection “on_commit”. Of course, this would need to be reviewed if we’d use more than one database. But it fits really clean in the code.

This means that as the teams move to utilising this new approach we can maintain compatibility with legacy methods too for a nice controlled adoption.

 

The post Queue tasks in Celery after database commit – Introducing django-transaction-hooks appeared first on Ebury LABS.

]]>
http://labs.ebury.rocks/2018/04/18/introducing-django-transaction-hooks/feed/ 0
Ebury Chameleon as an example of a Design System http://labs.ebury.rocks/2018/03/16/ebury-chameleon-example-design-system/ http://labs.ebury.rocks/2018/03/16/ebury-chameleon-example-design-system/#respond Fri, 16 Mar 2018 15:57:18 +0000 http://labs.ebury.rocks/?p=1589 Ebury Chameleon as an example of a Design System

How to build a design language that works across teams and platforms Invision acquired Brand.ai, UXPin released Systems, and Uber, IBM, and Salesforce are examples of companies who have decided to change the way of designing digital products. They all have one thing in common: using Design Systems as a way of creating outstanding user … Continue reading Ebury Chameleon as an example of a Design System

The post Ebury Chameleon as an example of a Design System appeared first on Ebury LABS.

]]>
Ebury Chameleon as an example of a Design System

How to build a design language that works across teams and platforms

Invision acquired Brand.ai, UXPin released Systems, and Uber, IBM, and Salesforce are examples of companies who have decided to change the way of designing digital products.

They all have one thing in common: using Design Systems as a way of creating outstanding user experiences.

A Design System is more than a style guide and a 2017 trend. It is the foundation of the design language in order to build consistent, convenient and scalable tech products. However, adopting a design system that also considers user requirements means choosing a clear strategy to avoid the risk of never getting things done.

How we’ve built the Ebury Chameleon Design System

Evolution vs Revolution

At Ebury the conversation began by bringing together Designers, Front-end Developers, Leaders and the Product Team involved. We could not afford to wait to have the perfect system before releasing it, so we have taken an evolving approach to ensure we can carry out optimisations and code refactor efficiently.

Design Principles

One of the initial steps we took was to identify the Design Principles that will guide the process. After performing some user research in order to identify the key pain points of our app, we defined the principles that better frame what we want to achieve with the implementation of the Design System:

Secure

Design must help us understand any financial information. Its primary goals are to reduce ambiguity, provide consistency, and use the proper metaphor for each piece of information.

Time-saving

Users have clear goals when using our platform, and we should be able to let them find what they need straight away. The design must allow quick and well-connected navigation as well as an efficient performance for both the client and the server.

Peace of mind

Our platform is there to help the user. The design is developed in order to reduce information density, allowing users to dig into data as they need it. We encourage interaction over static and crowded data display.

Tailor made

Personalisation is one of the key features that the creation of the design system relies on. We have to avoid making closed decisions that don’t allow users to adapt the brand or format to their specific needs and culture.

A System Design

Voice and tone

Our users are managing operations around the world and this implies many different situations where we have to communicate our messaging properly. We have defined some basic rules in order to write appropriate and convenient UI messages and to label our components. Similarly, every component is adapted to the language and culture so we can adapt to the user context easily.

8-point grid system

We decided to follow the 8-point grid system proposed by Bryn Jackson and built the layout system based on this. The grid definition allows us to find the perfect balance between alignment and proportions as well as to reach pixel perfection at different resolution sizes.

Typography

‘Roboto’ is the main family we’ve integrated to optimise the display view. We’ve also taken its variation ‘Roboto Condensed’ when it comes to representing numerical values on data tables, which gives us a neat text format.

Icons

We use system icons from the Material Design library to represent standard concepts across applications. Any newly-generated icon is created with the same design principles.

Icons are not only used to communicate a piece of information visually, but also to represent actions that will help the user to work more efficiently. Icons, shapes and colours are combined in order to allow our customers to understand what’s going on at any time.

Colour

There are different ways of creating colour schemes for a website or an app. At Ebury we’ve chosen a monochromatic scheme approach for several reasons:

  • To simplify interactive elements and their affordance as well as reserve complementary colours for important  elements
  • To define an automatic system of variations based on the hue with full control of the final look and feel
  • To set up an easy definition of it on a SASS or LESS file and change it dynamically

The colour palette is defined using HSL representation. This allows us to play with Hue, Saturation and Luminosity values in order to build the colour system.

Based on our Key Colour ‘Tech Blue’ defined in RGB #00BEF0 we have obtained the HSL equivalent HSL(193,100,47) and created the accent colour HSL(193,100,20).

// Main brand colors
$main: #00BEF0 !default;
$main-h: hue($main);
$main-s: saturation($main);

With the same Hue and Saturation simply by changing the Luminosity value we have obtained a range of values that will create the reference set of variations.

// Luminosity values
$l1: 12;
$l2: 20;
$l3: 37;
$l4: 47;
$l5: 56;
$l6: 88;
$l7: 96;

$main1: hsl($main-h, $main-s, $l1); // #00313d
$main2: hsl($main-h, $main-s, $l2); // #005266
$main3: hsl($main-h, $main-s, $l3); // #0097bd
$main4: hsl($main-h, $main-s, $l4); // #00c0f0
$main5: hsl($main-h, $main-s, $l5); // #1fd2ff
$main6: hsl($main-h, $main-s, $l6); // #c2f3ff
$main7: hsl($main-h, $main-s, $l7); // #ebfbff

Since we needed to have a neutral colour palette for other UI elements such as borders, backgrounds, shadows, etc., we’ve reduced the amount of tint of the main colour palette to obtain a greyish scale. Following a similar process, we have achieved a less saturated palette with equal luminosity and a subtle tone of the original blue (hue is kept to 193, but saturation is set at 10).

// Grayscale colors
$gray-h: $main-h;
$gray-s: 10;

$gray1: hsl($gray-h, $gray-s, $l1);
$gray2: hsl($gray-h, $gray-s, $l2);
$gray3: hsl($gray-h, $gray-s, $l3);
$gray4: hsl($gray-h, $gray-s, $l4);
$gray5: hsl($gray-h, $gray-s, $l5);
$gray6: hsl($gray-h, $gray-s, $l6);
$gray7: hsl($gray-h, $gray-s, $l7);

With these two palettes we have total freedom to create and build components and also generate new palettes for specific branded products, while keeping accessibility and contrast.  Only by changing the Hue value we can create new palettes that works well on screens with a similar brightness and ranges of colours.

Layout

Ebury Chameleon layout is optimised for desktop usage but responsively designed to be usable at any resolution on any device.

It is intended to allow a flexible navigation as well as keeping the main work space visible. When it comes to digging into the specific details of an item the user is shown a side panel that is accessible from a URL. The main menu is reduced for small screen sizes to keep a wider space for the content that matters.

Other considerations

There are many other things to consider when building a Design System, for example how to collaborate between team members, how the system is maintained, or which kinds of strategy we can follow to give good visibility of it to other departments.

At Ebury we have worked on defining a process that maintains our evolving system and is open for improvements and other suggestions.

The post Ebury Chameleon as an example of a Design System appeared first on Ebury LABS.

]]>
http://labs.ebury.rocks/2018/03/16/ebury-chameleon-example-design-system/feed/ 0
PyConEs 2017 overall http://labs.ebury.rocks/2017/10/31/pycones-2017-overall/ http://labs.ebury.rocks/2017/10/31/pycones-2017-overall/#respond Tue, 31 Oct 2017 17:02:20 +0000 http://labs.ebury.rocks/?p=1529 PyConEs 2017 overall

In September 2017 Ebury went to PyCon Spain 2017 which took place in Cáceres (Extremadura), at the beautiful location of San Francisco’s Cultural Complex. Read on for insights on refactoring, unicode, serverless, testing factories, diversity in the work place and open source! In this article we would like to give pull out some key talks … Continue reading PyConEs 2017 overall

The post PyConEs 2017 overall appeared first on Ebury LABS.

]]>
PyConEs 2017 overall

In September 2017 Ebury went to PyCon Spain 2017 which took place in Cáceres (Extremadura), at the beautiful location of San Francisco’s Cultural Complex.

Read on for insights on refactoring, unicode, serverless, testing factories, diversity in the work place and open source!

In this article we would like to give pull out some key talks at the conference and the different roles that we had there:

  1. As sponsors: We love Python so we are PyConEs sponsors as part of our commitment. Its great to meet others passionate about getting the best out of python and of course, because we are hiring.
  2. As participants: We want to learn, listen to interesting speakers and share ideas and experiences (we are not a Developersaurus Rex Company).

PyConES 2017 and what we have learnt about…

Development

High-impact refactors while keeping the lights on

Diego shows how they are handling a big refactor in ticketea using an A/B strategy, different from our refactor but similar to our main goal.

Unicode

With Python 3, strings will be unicode by default. We are all happy with that, although, do we know what unicode is? Do you know that emojis are unicode and even the different colours in emojis are part of the unicode?

Some resources:

Serverless

Serverless is so hyped nowadays and AWS lambda is the main star. Creating Python serverless with AWS is as simple as:

 def my_handler(event, context):
    message = 'Hello'
    return { 'message': message }

Also, there are some Python frameworks which make it easier, in particular:

  • Chalice: Microframework Flask-like.
  • Zappa: Tool to deploy your Python WSGI apps to AWS.

Testing

Factories, what the hell?

This talk showed an approach to solve the ’empty database problem’ for new developers or whilst executing tests using Factory Boy to generate model objects programmaticaly.

  • Pro: High customisation level.
  • Con: Extra effort to develop a ‘model generator’.

“Pytest: recomendaciones, paquetes básicos para testing en Python y Django” (Pytest: recommendations and basics for Python/Django testing)

Here lots of useful solutions for py.test are discussed, such as using the coverage files to feed a monitor daemon in order to run automatically only the tests that affect a modified piece of code. Lots of work still to be done here!

Miscellaneous

Gender gap

Diversity is important for improving what we do. Diversity is invaluable in regards to problem solving.

Women represent half of the population, however, the technological industry claims that only around 30% of their workforce are women, and that percentage decreases down to circa 20% when focusing on tech teams. If we analyse open source communities, those hardly reach 10% of women as is the case of the OpenStack Foundation or the Linux Kernel. The Python community has some initiatives such as young women community, to try tackling this issue.

Open source

Have you ever thought about how the open source is managed? Are people managing the software actually being paid for it? And if not,  has anyone time to do it? Find the answers to these questions by following the story of Werner Koch

Lastly, did you know that pypi and pip are maintained by one guy working part time at Amazon? Is that the model we want? Have a look below and have your own opinions.

I hope you have enjoyed reading this article and hope to see you on our blog soon!

The post PyConEs 2017 overall appeared first on Ebury LABS.

]]>
http://labs.ebury.rocks/2017/10/31/pycones-2017-overall/feed/ 0