August 7, 2018 - No Comments!

Amazing in-app animations with Lottie library


Everyone knows that with creating a beautiful and eye-catching app comes a lot of UI/UX designer’s work. Amazing animations and graphics play an important role in convincing customers to dedicate their time to an app.

So the first thing is to design such app graphics but the second issue is to implement it in our application by a mobile developer.

Is it really that though?   

You may have already asked yourself a question: “Well, there has to be an easy way to implement such things, right?”

YES! Today I'll introduce to you the astonishing library - Lottie. It was created by an AirBnb team and developed to simplify adding animations to your application. With Lottie you can make your app more vibrant with only few lines of code.

With this short tutorial, you will learn how it can be done in few simple steps. I will show you how to add it to the Android app. It's also available in iOS, web and react native.

The very first steps

At first, you need to add a Lottie library to your module build.gradle file in the dependencies section. At this moment, the 2.5.5 version is the newest one.

You can always check the latest version at this site -

Dependencies {
  implementation '’

The next step is to add a LottieAnimationView in your layout xml file.

  app:lottie_loop="true" />

As you may have thought already.. “I have a library, a special view to show this animation, but.. where the heck is the particular ANIMATION?!” Here comes the main part.

Preparing the main part - animation

You can create your own animation by using Adobe AfterEffects + Bodymovin plugin to export it to JSON file. But it's a more advanced process, usually created by graphic designers. Today, we’re going to focus on using premade JSON files from

It's a very helpful page, created to share animations with other people. You can use it as long as you want, but remember to mention the author in the ‘about’ section in commercial app.

Let's take a look at this animation of a man riding a motorcycle.

Don’t ask why.. it’s just eye-catching 🙂

Adding animation to the project and making it work  

There are two ways of adding your desired animation to make it work (it is added in the layout xml file):

  • by using app:lottie_fileName="motorcycle.json"
  • or app:lottie_rawRes="@raw/motorcycle”.

I recommend you to use the second one, then you'll be able to use a static reference to this file, not just by using it’s name.

To make an animation loop and auto play on creating an activity, I' am adding these two lines of code to the activity_main.xml file:


So, my xml file looks like this below:

<?xml version="1.0" encoding="utf-8"?> 
<FrameLayout xmlns:android="" 
    app:lottie_rawRes="@raw/motorcycle" /> 

And MainActivity.kt is as simple as it can be:

class MainActivity : AppCompatActivity() {

  override fun onCreate(savedInstanceState: Bundle?) {

Now, we can click “run project” and see how much we are talented! 🙂

Helpful hints 

If we won’t add an autoPlay attribute to our layout xml file, the animation won’t start immediately after creating the view. We are able to start it at any time we want, by adding some code to our MainActivity.kt file.


The above line allows us to achieve the same thing as the app:lottie_autoPlay="true" line of code in xml file. It's really helpful when we don’t want to start the animation immediately, but later on.

The same thing happens with a loop attribute. It decides if our animation will loop endlessly. We could also remove it and achieve the same by kotlin code.

lottieAnimationView.repeatCount = ValueAnimator.INFINITE

If we use ValueAnimator.INFINITE, it loops infinitely. But what if we want to loop it only 3 or 5 times and stop? Nothing easier! Instead of ValueAnimator.INFINITE, you can just add an Integer value, defining number of repeating count. So it will look like the code below:

lottieAnimationView.repeatCount = 3

What if you want to run your animation for a certain amount of time? Let’s say, for 5 seconds? Just add the below code with handler, which after 5 seconds (value in code is in milliseconds) will pause your animation. It's that simple!

    }, 5000)

The same steps are required to start it after some time, by replacing lottieAnimationView.pauseAnimation() with lottieAnimationView.startAnimation().

MainActivity.kt file with stopping animation after 5 seconds:

class MainActivity : AppCompatActivity() {

  override fun onCreate(savedInstanceState: Bundle?) {

    lottieAnimationView.repeatCount = ValueAnimator.INFINITE
    }, 5000)

Listening our animations 

Another cool option is adding AnimatorListeners to the animations. Let’s take a look at another animation – a favourite icon. You like something sooo.. you want to show it! Or maybe you just want to save something for later. What about making it more vivid with Lottie? : )

I choose this one - - it’s beautiful and makes a good interaction with users.

At first, let’s replace app:lottie_rawRes="@raw/motorcycle" with app:lottie_rawRes="@raw/favourite_app_icon". Another step is to remove the looping from animation and auto play, because we don’t want to run it on start. That’s how LottieAnimationView looks now:

  app:lottie_rawRes="@raw/favourite_app_icon" />

When do we want to run it? I’m going to implement it while clicking on  the animation area. It’s handy and intuitive.

In the second step, I’m removing the previous code, which was responsible for stopping the animation after some time.

Now my MainActivity.kt file looks like the one below:

class MainActivity : AppCompatActivity() {

  override fun onCreate(savedInstanceState: Bundle?) {

    lottieAnimationView.setOnClickListener {
      if (lottieAnimationView.progress == 0f) {
      } else {
        lottieAnimationView.progress = 0f

  private fun startAnimation() {
    val animator = ValueAnimator.ofFloat(0f, 1f).setDuration(500)
    animator.addUpdateListener { valueAnimator ->
      lottieAnimationView.progress = valueAnimator.animatedValue as Float

As you can see, I've added a click listener to our animation view, where I am checking if the progress of animation equals 0 or something else (eg. 100). If it’s a zero (the star is unchecked), I’m running the startAnimation() function. In other case (the star is checked) – it's getting unchecked. That’s the “hard” mechanism of checking and unchecking the star : ) It’s not difficult!

In the startAnimation() method, we are initialising a ValueAnimator object, which changes some value from the starting point to an end, in defined time. In my example, it's defined to run for 600 milliseconds, you can change it as much as you want 🙂 One can also change the starting and the ending point. If you want, you can change values in parentheses in ValueAnimator.ofFloat() function. Let’s assume that your idea is to stop the animation in the middle – easy peasy!

Just write

ValueAnimator.ofFloat(0f, 0.5f)

..and the rest of the previous code.

Finally, we are adding an update listener to the animator, which with every step of changed value updates the value of progress in our lottie animation. The last step is to run start() method on animator and that’s all! You’ve just mastered the ability to like/unlike something in your future app.

Wasn’t it simple? I think working with lottie animations can be fun! There are lots of other features and moments in which it could help us save a bit of our precious time! 🙂

Happy coding!

Author: Bartłomiej Rolek, Android Developer

Published by: admin in blog

July 31, 2018 - No Comments!

Summer Agency Recognized as a Leading B2B Company in Poland by

Striving to be a truly premier tech firm, Summer Agency is comprised of well-trained professionals who can deliver to your company a variety of services, including hardware, software and design, with experience in fields ranging from retail to healthcare. It has become evident that our strong work ethic has caught the eyes of businesses everywhere, as we are now listed
on Clutch’s press release for the leading B2B service providers in Poland!



In order to make the B2B networking process simpler and smoother, Clutch performs research on every company that establishes a partnership with them. A profile for each company is set up on Clutch’s platform to give other businesses the opportunity to access information without having to use their own time and efforts to conduct the same research. Therefore, when businesses are looking for partners with whom they can most productively collaborate on projects, they can turn to Clutch and readily have a list
of relevant firms with all the data they need to make their decisions.


Clutch’s proprietary research methodology gives visibility to firms on the platform when they collect a number of positive reviews. Clutch confirms the quality of our work with the outstanding 5-star rating we maintain in addition to our inclusion into the aforementioned press release. This we owe to our clients, some of whom have taken the time to submit wonderful reviews recounting their time with us.:


Their engagement and effective organization played a crucial role in the project’s success.
- Edward Mężyk, CEO, Datarino sp. z o.o.

We are fully satisfied with the services at this point. The team’s competencies have been great since the start of working, particularly for management, app development, graphic design, and prototyping.
- Laura Czarniecka, Keepylife Strategic Advisor, Leanpassion.

Thanks to the cooperation with Summer Agency, the product development was significantly faster. As a result, we were able to put the product on the market without any major problems.
- Mike Grzes, CTO, Photon Entertainment.


If that isn’t enough, in addition to being recognized on Clutch, Summer Agency was also featured by The Manifest, Clutch’s sister website, on their publication for Top IT Outsourcing Companies in Poland !

We are eager to continue establishing new relationships that, through our combined efforts and resources, will produce results that solve real-world problems and make positive contributions. To find more great reviews of our client experiences, check
out our Summer Agency profile on Clutch!


Published by: admin in blog

July 24, 2018 - No Comments!

5 Reasons Why Your Business Needs a Mobile App

If you run your own business, you should at least think about building a mobile app. The number of mobile users has been steadily increasing and investing in such solution brought benefits to many companies. Apps can reach your target audience in a way your website never will. Think about all those benefits you'll gain if you take one step

Today we'll introduce 5 reasons why a mobile app is suitable for your business. Ready?

#1 Customers will notice 

Where are your customers and how can you reach them? The answer is simple - we all use our smartphones every single day so this can be a perfect place for your business to bloom. It can be even more effective than your company's website. The message behind creating an app is clear - your company is innovative and not afraid of challenges in the modern world. Think about the value that the app can add to clients and if you'll do it right, they'll certainly love it!


The future of mobile is the future of online. It is how people access online content now.
Phil Nickinson, Editor of Android Central


#2 Brand awareness will increase

Creating a proper marketing plan for your business and including an app in the strategy is definitely a great idea. It will make your brand look modern and up-to-date.

When users browse the list of available apps, they can pay attention to your brand and to what it stands for. Mobile apps are a great advertisement as they educate their customers and give them information about your company. BUT you need to provide some really useful features and good UX. Later you can use a mobile app as an ad that your customers will see directly on their phones. Push or in-app notifications can be insanely helpful to create better communication with your customers. (Want to know more about it? The difference between these two can be found HERE)

#3 Customer loyalty and engagement will be better

Keeping your customer engagement high is definitely a tough task. Did you know that the level of engagement mobile apps provide is much higher than provided by a website? You need an instant interaction with customers. By enriching your app with some loyalty programs you can easily share promotions or discounts.

And the amazing part about it? Your users can access all the information 24/7 using just their phones. If you add the messaging feature, they will easily reach you - it's much more convenient for them to text instead of call.

#4 You'll gather useful data and customize your offer

Through the mobile app you can access data and collect necessary information. It’s the best source of knowledge about your customers. The data will give you an insight into clients demographics and you'll simply better understand their demands.

It will help you establish the most appropriate marketing strategy and what's important - you'll be able to adjust your offer to clients needs.

#5 Your revenue will grow!

It will be your new channel to increase sales as your target audience will be much bigger. Your business with an app may be perceived as a global, not a local brand. Mobile apps can work as your medium to expand to other markets and build a wide customer base. 

Examples can be multiplied, let's have a look at Domino's Pizza. After creating a mobile app they saw a 28 % increase in UK online sales! Now more than half of their company's orders are from mobile devices.

Take advantage of your competition and strengthen your position on the market. Offer your clients something unique. Learn how to benefit from technology and use it as a powerful marketing and sales tool.

Need an advice regarding your app idea? Contact us at! 🙂


Published by: admin in blog
Tags: , ,

July 3, 2018 - No Comments!

Launching a new product – steps and common misconceptions


This is the initial article that summarizes necessary steps that get you from your idea of a product to a finished version. It should comply with regulations and be manufactured with reliability. I will discuss here only the issues connected to engineering problems and I will omit business topics (i.e. business plans, distribution types), as they are a separate group of problems.

Creating a device that functions may seem to be an easy task, but the preparation of the product for production is a different story in the engineering world. In order to go smoothly through the whole design process, one should consider following some guidelines. However, keep in mind that they’re not sacred and can be reshaped, bent or even broken. Before you do that, please just ask yourself if you really, really need to do it.

I will divide the product design process into several subtopics:
1) Concept
2) Working Prototype
3) Final product prototype
4) Certified product

Then I will briefly discuss these points, as each step is a broad topic for several articles.

1. Concept

Let’s start with a nice and popular quote from software engineers:

“Weeks of programming can save hours of planning”

At the concept stage we should not only think about the shape and features of our device, but also do some serious planning and quite a bit of research. Ideally after this stage we should have a more-less detailed roadmap to our holy grail, which of course is a certified product freshly straight out of the factory. The results from this stage should be:

1) initial shape of the device,
2) initial casing documentation,
3) final/desired functional description,
4) regulations requirements,
5) REALISTIC production volume forecast,
6) estimated price target.

The information from all these points forms what we call - the Technical Documentation. Why is it so important to prepare all this information at such an early stage of the project? Why not leave the production and certification problems for later stages?

“But I just want a working prototype fast” – you say.
“We need to show something working to out investors ASAP, preferably next week” – I hear.

Well, if you can sacrifice the time and money for a quick prototype, which will be almost entirely redesigned in the later stages, then it’s fine. Usually, you will lack time or money and in some cases both. The earlier you'll start thinking about late design problems the better you can deal with them. Be aware, that you shouldn’t spend too much time on this stage. If you are caught in the endless loop of concept designs and decided to just scratch that 17 th prototype, then it's a clear signal that something is not right. Analysis paralysis is a pitfall which can affect you and will result in delay in the project.

I want to underline the fifth point regarding volume forecast. This may be quite hard to calculate because at the end you don’t know how your product will be received by the market. This parameter has a large impact on the design process, because it will determine the available technologies that can be used in the production. Furthermore, it defines prices in BoM and the amount of testing that must be performed on each piece.

Quantity tips:

Volume and mass production make low prices, so you should think twice before comparing the price of your 1000 devices to the price of 10 million devices from Singing Sam.

2. Working Prototype

This is the stage at which most of the start-ups think that the design work is done, and it is finally time to start production along with preparing rakes for the money inflow. Unless you’re aiming for <100pcs annual production, you still have a long way to go. The prototype at this stage should prove the functional feasibility of the project and should give clear signs that reaching the final shape of the device is doable.

3. Final product prototype

This stage should end with the product in its final form.

This prototype should not be a subject to any design changes apart from changes resulting from the certification process or from production feedback. Modifications here are costly and require significantly more effort than at earlier stages. Why is it so hard to change things here? Because the designers have to assess the impact on the whole design. Power budgets, thermal budgets, mechanical integrity, PCB layout, etc. must be verified again to ensure proper device operation.

One of the extreme cases that I can recall from my experience was when my colleague had to add a single 0603 resistor onto his PCB. It took him 2 weeks of layout redesign, because the PCB was already so densely packed that he had to move most of the components and traces to make space for the new resistor.

Optimization to BoM, production costs, reliability, testability are main topics for the designers at this stage. These require experience in the field and are main causes why start-up fail or underestimate budget and effort.

As Arthur M. Wellington said:

“An engineer can do for a dollar what any fool can do for two”

Investing work and time at this stage will result in huge savings in the future, simply because the product will be cheaper and you will not get as many service returns.

4. Certified product

When I ask start-ups about where they want to sell their product here's what they say:

Of course, we want to sell it in Europe and USA… and China would be nice, and Japan too… oh and Brazil…”.

Believe it or not, but there are many different markets that have various requirements (often they exclude one other). When you hope that one can design and certify a device that will cover the whole world - it is just wishful thinking.

Let’s take a look at the two most common markets:

  • EU
  • USA

For the EU the product must comply with proper directives. Usually, these will be EMC and LVD, but if you have a radio installed then it will be the RE directive (RED). For the US market FCC and UL are most common certificates.

In general, as a manufacturer, you must show that your device is safe (fire, electric shocks, battery explosion, thermal, mechanical hazards, etc.) and will not disturb nor be influenced by other equipment (radio emission, conductive emission, radio immunity, ESD immunity, etc.).

Depending on the market, you will have to present documentation to respective institutions in order to gain the certificate. Some institutions, like UL, take this a step further and make the tests themselves. Additionally, depending on the product classification, UL will perform cyclic audits not only at the final assembly site, but also at suppliers’ sites.

At the end the costs associated with certification will be covered by the manufacturer (i.e. you). For reference, full FCC and UL certificate for a simple wearable device can cost roughly 20k$-30k$ and can take several months to finish. If you want to cover other markets, then the corresponding institution will also have their own fees. Think over carefully on which markets you wish to operate, because each one requires significant resource investments.

Summary and remarks

There's a certain saying that designers use:

“We design well, fast and cheap. However, you can choose only two options”.

Keep in mind that if you’re pushing one aspect you will have to pay with the other. This short article only indicated and summarized common problems that need to be addressed during the design of any product.

In the following article series I will try to discuss each problem more thoroughly.


Author: Rafał Widórek, PhD


Published by: admin in blog
Tags: ,

June 14, 2018 - 1 comment.

Animate common interactions with Angular Animations

Angular offers
@angular/animations package that enables you to write complex, hierarchical transitions in a declarative way. The package is still in the experimental state as of Angular 6, yet it’s totally usable, and it’s not like such fact has stopped us before, is it?

Low-intermediate understanding of Angular is assumed.

The very first animation

Well, there is no good way to describe UI animations with words so below I present to you an editable example. We have buttons that can change the Angular version number very rapidly, modeled after admin dashboard in Angular HQ 🌞.

I wanted to capture few nice things about Animations:

  • It’s simple to define multi-step transitions that look natural, just add more items to an array.
  • You can duly on computed values with *
  • Inserted and removed elements can be animated easily
  • With state(), you can apply inline supporting styles that are active as long as the specified state. They sit next to transitions and are grouped conceptually
  • Framework provides many common state change expressions like :increment

Why should I care?

True, we already have many ways of creating motion on the web and Angular apps support them all. Animations package seems somewhat redundant at first sight, but it exists for a good reason. It provides seamless integration of many animations with themselves and also with the framework. You can of course mix them with other solutions where appropriate.

Previously, to achieve hardware-accelerated motion you could use:

  • CSS transitions that offer a simple way of declaring basic, two-state changes with constant duration. You can make duration variable by binding to style.transition-duration but it feels hacky at best.
  • CSS animations - more complex, you can describe keyframe sequences, declare (possibly infinite) repetitions and so on but you can’t express relations between various elements of the page.
  • requestAnimationFrame that allows you to make imperative animations, and you certainly could use power of RxJS to create neat reactive animations but it will require additional glue to tie everything back into framework in many cases. (Nevertheless it’s a viable, novel solution for certain problems, greatly explained in this talk by Ben Lesh, creator of RxJS)

Angular Animations in a nutshell

  • It’s a bunch of functions that you compose in a certain way (a Domain Specific Language if you prefer).
  • Animations are triggered by changing value bound to @triggerName. They mix well with change detection, component lifecycle, and other framework concepts.
  • Can be externally disabled for whole element subtrees with @.disabled synthetic property. You can for example disable animations for initial page load and later transition between routes.
  • You can pass parameters along with state values and interpolate them inside animation definitions.
  • They offer callbacks named @triggerName.start and @triggerName.done that greatly improve over for example transitionend event.
  • You can save your declarations in separate files and reuse them in many components.


The official guide for animations was, let’s say, not sufficient, during Angular 5 era and before, so reading is discouraging. Animation parameters is one example of poorly documented, yet powerful feature.



There are some things you must ensure when setting up your project with Angular Animations

  • First of all check if @angular/animations package is installed
  • Import BrowserAnimationsModule in your AppModule.
  • Now you can add @-prefixed properties to your templates.


There is also NoopAnimationsModule for when you want to disable animations globally. Without importing either animation module any template with animation-specific symbols will fail to compile.

Wiring everything up

In the Component decorator you can pass an array of animation definitions. Most examples do it inline, but it can become messy very fast and it doesn’t support reusability, so we will go with the good practices from the start.

import { squash } from './squash.animation';

 animations: [squash],

You can see a shortened squash.animation.ts file below. Basic animation usages will start with topmost trigger() containing array of state() and transition() functions that I’ll explain later in the article.

export  const squash = trigger('squash',  [
 state('*', style({
 'text-transform':  'uppercase',
 transition(':decrement',  [
 animate('100ms', style({
 transform:  'scale(0.9, 0.9)',

Finally, you need to bind something to animation property. Value can be anything as long as it makes sense for the animation definition.

export  class AppComponent {
 version =  6;

<p [@squash]="version">...</p>


import {  
  state, transition,  
  style, animate, keyframes,
  group, sequence,
  query, stagger, animateChild,
  animation, useAnimation,  
} from '@angular/animations';

Whoah, it’s very intimidating at first and I probably shouldn’t have frightened you with this complete list of DSL functions, but don’t worry as you’ll only need to grasp 4-5 of them to begin with. I’ve grouped them into related groups for your convenience.


Some time ago there was another way of importing animation building blocks but it was removed as of Angular 6 and deprecated earlier.

One of the pain points of Animations package is that all of the above functions return internal metadata and sadly it won’t tell you much. The same thing is with overly complicated input parameters. That’s where tutorials come into play.

I’ve listed below some simplified definitions of most common functions in Typescript pseudocode. You can actually omit some things, for example treat some single-item arrays as just items, but they needlessly make everything harder to grasp.

trigger(name: string, definitions: Array<state() | transition()>)

It will be the outermost function you’ll use most of the time, at least at the beginning. It defines name of the property you will use to bind your state variable. trigger('example', ...) <=> <div [@example]=value></div> .

definitions is an array of composed state() and transition() functions. Conflicting definitions are evaluated from left to right.

state(name: '*' | string, style: style(), options?)

It applies inline styles when bound value matches name argument. Wildcard * always matches.

transition(stateChangeExpr: string | Function, steps: Array<Step>, options?)

Defines visuals that happen after bound value changes.

stateChangeExpr in it’s simplest form is a string in the form of fromState => toState, but there are some special rules. Keep in mind that state values are converted to strings before comparison.

  • <=> to defines two-way transition.
  • * matches any state.
  • void is a special state that means nonexistence. It’s something different than null (here we go again 🙄…). The elements are in this state before insertion into DOM and after removal.
  • :enter and :leave are quite handy shortcuts for void => * and * => void, respectively. You can pair them nicely with *ngIf and others.
  • :increment and :decrement are nice example of behavior that otherwise would be only possible with custom function. They match numeric changes, I’ve used them in an example at the top of the article.

In contrast to state(), applied styles are removed after animation is done, for example transition(..., [style(...)]) does nothing, because it lasts for 0 frames.

style(css: object)

It defines actual styles. css properties can be written in camelCase or dash-case. You can use value computed from the element with * - it enables for example expanding accordion menu. For example:

  height: '*',
  transform: 'scale(1.3, 1.2)',

  lineHeight: 3,
  'text-transform': 'uppercase',

animate(timings: string | number, styles: style() | keyframes())

First function in this listing that actually creates motion. timings is a number of milliseconds or string in format duration delay easing. Only duration is required. Parts of the format behave like CSS transition counterparts, but the order is different. In the basic scenario you compose animate() with style(), and transition happens from the state existing before animate() to the one specified with style(). You can chain multiple animate()together and mix them with standalone style() to create multi-step transitions. You can omit second argument in the last animate() to transition to styles declared elsewhere, i.e. plain CSS.

keyframes(steps: Array<style()>)

Instead of chaining multiple animate() together you may wish to specify many steps as an array in composed keyframes(). By default they will stretch evenly over duration of animate(), but you can override it with special style property offset taking 0-1 ratio value.

animate('300ms', keyframes([
 style({color: 'indianred', offset: 0}),
 style({color: 'cadetblue', offset: 1}),

It's the same as

animate('300ms', keyframes([
 style({color: 'indianred'}),
 style({color: 'cadetblue'}),


animate('150ms', style({color: 'indianred'})),
animate('150ms', style({color: 'cadetblue'})),

Random yet useful info

Endless animations

That’s a bummer with Angular Animations - there isn’t a built in way of declaring them, but you can emulate it in many ways, for example by declaring universal transition * => * and changing trigger in @triggerName.donehandler. I won’t go into details here but you get the idea.

Order of execution

Animations happen after things that trigger them. For example, when animating :leave state change, ngOnDestroy gets called just before animation starts. Similarly :enter transition happens after ngOnInit and whole first change detection cycle.

Animation parameters

Take a look at the following example. Template-style {{interpolation}} can be used to bind dynamic values, for example mouse coordinates. You may need to provide defaults as params key in - previously omitted - last argument to almost all DSL functions.

someControl: FormControl;

@HostBinding('@triggerName') animation;

handleClick() {
 this.animation = {
 value: 'state',
 params: {  
   offset: this.someControl.value,  

trigger('triggerName`, [
 state('state', style({  
 transform: 'translateX({{offset}}%)',  
 }), {params: {offset: 0}}),



In Angular 5 and before, Animations were fully powered by Web Animations API, whose support is currently spotty. Dynamic features of Angular Animations still rely on this API, but it’s something out of scope for this article. There is a polyfill available if you need it.

That’s all

I hope that this article explained briefly the basics of Angular Animations. There are many more nice bits about this package, unfortunately scattered around many places. I highly encourage you to read API docs. Play with more advanced functions - I haven’t even touched query() and hierarchical animations. Check source code if you wish. Happy hacking.

Tomasz Błachut


Published by: admin in blog
Tags: , ,

May 14, 2018 - No Comments!

Hybrid vs native apps. What suits you best?

Choosing the best approach for an app development can be tough. Your users have to obtain the best UX possible, other way - they'll stop using the app and will probably never return.
In this article we’ll discuss pros and cons of a hybrid and a native app. At the end, you’ll be able to make the right call for your project.

Wander no more.

What is a native and a hybrid app?

Native app
is a software program, developed for use on a particular platform or device. A native app has the ability to use device-specific hardware and software. Such apps provide optimized performance and take advantage of technology (for example GPS).

Hybrid app
combines features of native and Web applications. As they work through Web technologies,  they seem more flexible and easier to update.

Three important issues you MUST consider when choosing between native or hybrid are:

  • the purpose of an app
  • the benefit you’ll gain
  • the budget

Cons and pros of hybrid apps.

Hybrid apps come with such drawbacks as:

  • Poor UX - creating a great UX when building a hybrid app is hard. You often have the one and only chance to make a good impression on the user, and you won't achieve a native-like experience with hybrid. 
  • Lack of native features - be aware that some features offered by Android or iOS won't be available.
  • UX problems and lags - a significant drawback, that can frustrate your user. And probably it will, as hybrid apps can be problematic when it comes to the performance.
  • Lower efficiency - they are considered as slower than native apps.

..and we jump straight into pros!

  • you may save time and money - as you won't need to develop different versions of an app for IoS or Android
  • development process is relatively easy - you won't need a big team of developers working on the project.
  • hybrid app is good for BYOD policy - it works on different platforms and is compatible with various devices.

Native apps cons and pros.

If you're not convinced whether to take your chance with hybrid apps, compare its characteristics with the native ones.

There are few cons that you should keep in mind:

  • they are considered as much expensive
  • the process of development is longer
  • the cost of app maintenance and app updating is also higher for native apps, especially if this app supports more than one mobile platform


But, if you choose to go with them, you can expect also..

..many good stuff coming.


  • native apps are more user-friendly - they provide better user experience and performance.
  • they get approval of the app stores and marketplaces - the users are assured about their safety, so they're more willing to explore the app.
  • iOS and Android features are available - developers are provided with all needed tools therefore the process is much more convenient.
  • internet connection is not always required - it's an important feature considering the fact, that often the user doesn't have an access to the WiFi.

What should you choose?

Take a moment and decide which works best for you. What are your project's resources and objectives?
Every type has its cons and pros, that's why you have to choose individually. If you want to provide the best quality, choosing a native app will be a good decision. As good as a hybrid app looks, it seems convenient and flexible only at the beginning.

Investing in better solutions eventually always brings benefits. Deliver best experiences and build great UX for your users. They will certainly appreciate it!

More detailed information about hybrid and native apps will follow in one of our e-books so stay tuned! 🙂 Got some questions in mind? Drop us a line at! :).


Published by: admin in blog

April 25, 2018 - No Comments!

Embedded systems development process. Step by step.

Before we begin my friend, with some obvious definitions, let’s start from the other approach.

Developing embed is like climbing a high mountain without trails. You see the summit that is your goal and you have to climb it with your partner, the hardware. Together you must make the way upwards. In well organized teams both partners help each other not because there is some obligation but because the cooperation gives more than hostility. On the way upwards, to obtain a perfect product, hardware is the one that’s slightly less flexible. It’s hardly modified and makes basis for software. Remember,  that without hardware, peripherals software cannot communicate with the outside world. Before starting, a predicted way to the top is pointed out as well as some stop points. For climbers that would be camps, for products that would be milestones. There is much more in common with hiking and developing products. There are unexpected problems like avalanches or hardware faults. Sometimes our estimated way is insufficient or unable to obtain, so there must be found a new one. I’d like to take you, my friend, on this journey with me. I will show you all my tracks and tricks on the way to obtain a perfect product. Ready? If yes, let’s start!

First, we must make some research where to go. Usually there is a meeting handled with a client where a main goal is discussed.

So how to get to a camp?    

After that meeting, there should be carried another one, but now the team involved in developing that product should also be present. It’s an internal meeting with a hardware engineer and at least one embedded software developer. Usually a mobile software developer is also there. On this meeting, the way to the top is discussed. Where to start and how. This is where engineering part begins. We take a map and plan our way. We point the most risky parts of development. Also, we set some milestones usually connected with functionalities and test steps. First stop will be our base and it’s usually the first prototype.


Usually, creating the first electronic version of a product takes few weeks. So does it mean that embedded developers have nothing to do? Wrong! There are evaluation boards with microprocessors. If you have the right one you can start building your software. That boards have connectors to which peripherals can be connected just like in the finished device, so you can start writing your code. It’s like trekking to the first base. You get out from a plane or a bus and then you see...your mountain! So you see your mountain but it’s an inaccessible region. You must take your backpack and ramble to a place where you’ve started your journey. This is the moment when you can learn your microcontroller. Every manufacturer has its own product and support policy. Especially in a low level, so if it’s a new processor, the work must be done from the beginning. 

You have already written some code. Maybe you have set some peripheral drivers and the main loop outline when the first prototype arrives. It’s like setting a camp. You know, you have found the valley at the map and you seek for a good place but there is no such thing around? I known that from the embedded point of view. Useful things are patient and oscilloscope. Remember not to give up and check if a microcontroller do what we desire. Nothing can be left for later because there may be lack of water or because peripheral cannot work in the way we want it to work. This part must be done in the coordination with a hardware designer. If any hardware faults are spotted, they must be replaced in the second iteration.

We reached first base, what’s next?

Attack the summit? No, not yet. Now it’s a moment to explore the slope. Making progresses, testing abilities, writing drivers and the main program. We have all the components and starting from now, we have to make it work perfectly. Functionalities are being laboriously added. It’s like rigging and making camps on our way upward. No one can make this way fast, every step and every rig must be added carefully. If you want the program to work efficiently, it must be well organized. Similar situation is with the trail that must be set reasonably. In other way, it would be dangerous or the program will hang. Continuous tests are extremely useful.
Then you write software tests that continuously check if software has any bugs. They may be prepared by the main product developer but also they should be examine by a software engineer outside the project. 
They should start from the first day of developing.

The test shows lack of bugs and our software is ready..

Is it the end of our journey? No, it’s not! Now is the moment for testers that will use your device and tell you if there’s something to change or which parts are not intuitive. If a tester is not technical, the result will be better.
It's the moment of a summit attack! You are almost there! You’re tired, but you still strive for success. You go back to find that one line that make your code not optimized. It’s the longest part and it can be parallel to clearing stones. When it’s finished, the first release ends. It’s like achieving the goal, standing at the summit. Your work is finished. You made it.

The return.

After all you have done, you have to come down from the summit. How to do it? Usually in the easiest way. For developer, it means providing support after releasing the product: fixing bugs or adding new features. Nevertheless it’s a different story. Maybe next time I will bring it up. Here the research and development ends. Thanks for walking this way with me!

Goodbye my dear friend!

Published by: admin in blog

March 22, 2018 - No Comments!

How the Iot Hardware Is Made

Have you ever thought of creating your own IoT product and bringing it to the market? If so, creating the electronic part of the project was surely one of the biggest issues. But did you find the solution to resolve it?

There are many firms on the market including startups, that don’t have the resources to work on the hardware area of their products. Many of them intent to create the whole project but they fastly realize that the process is much more complex and demanding that they thought before. What’s more, the feasibility stadium of ideas is often not appropriately analyzed, which provokes bigger delays and costs.

#1 Checking the feasibility of an idea

This is the first, extremely important phase when creating the IoT electronics. Without specifying whether given assumptions are technically feasible, you can’t begin designing the electronics. When you’re sure that the project is profitable and feasible to create, you may start working on the actual parts of the product, such as electronics. The first step is analyzing what are the requirements for certification. On this stage you have to find out what certificates your firm should acquire in order to legally distribute the product. Just remember, that depending on the usage and the destination of it, the requirements can be drastically different. The expectations are huge!
Remember, that all certification requirements should be included in the final project.

2# Working on the first iteration

Next, start with designing and producing your first prototype of the product. It’s worth to mention, that the preparation of electronics along with software may or even should happen simultaneously. Although it requires additional resources, it definitely lowers the time of producing the first prototype. Additionally, in case of any sudden issues to solve, there’s smaller probability that the project will be delayed or will get stuck. What’s more, all difficulties, that require dynamic introduction of changes can be resolved much faster and in a more efficient way.

3# Preparing prototypes

Preparing prototypes is the next stage when creating an iteration. The process begins with acquiring imprescindible components and establishing the pricing of elements. The list of all parts used during the process is called the Bill of Materials. On its’ basis we may create the first prototype that should be accepted by our client. After the first approval, the next stage should be preparing the PCB design project along with the product documentation, that must be also revised by a client. Moreover, at the same time the process of building the first archetype should start. It consists of smaller tasks such as: the revisal of the material list, ordering components and the PCB, gathering all required elements and at the end - building a prototype by combining all these parts together. The final work of this stage should result in a ready hardware prototype part, though without the embedded software.
As mentioned before, you may continue working on the required software which consists of several, smaller subsequents:

  • launching the programme environment
  • preparing the main algorithms
  • launching the necessary libraries
  • configuring peripherals
  • writing the program code

The last element should be debugging the code, which should start at the same time as launching the first, ready-made hardware prototype. As a result, the software development process should end successfully, through implementing the software on the hardware part of the prototype.

4# Launching the first prototype

When it comes to the stage of launching the first prototype of the product - it should end
with transferring the device to the customer for evaluation and acceptance. The client will be able to see how the finished device will work. It’s the most important stage of a client’s verification, because at this stage most comments occur. In the next step, after the evaluation of a potential solution, the prototype should be tested in accordance with the required certification process, analyzed at the very beginning of the project. This step completes the process of the first iteration. When the first prototype of the product is ready, it’s time to implement changes. Then the second iteration of the prototype begins.

5# Documenting and modifying

Next stage is the PCB modification and gathering the product documentation. Now you can begin working on the second prototype and you should pay attention to:

  • revising the components’ list
  • ordering all required parts
  • creating PCB
  • completing the components

During the second iteration, implementing changes in the software area can happen simultaneously with working on schemes’ modification. All corrections in software should be introduced before launching the second prototype, so after finishing the update of both software and hardware part, the device should be revised once again by a client. The final stage of the second iteration should rely on conducting tests, according to the plan. Usually, it’s the last step in the process of creating the IoT electronics.

It’s worth to mention, that in some cases, the project should be subjected to another iteration. The decision about introducing other modifications, should be made on the basis of a client’s judgement along with tests’ results. You should be aware that additional changes require time along with human and financial resources.

Published by: admin in blog

March 7, 2018 - No Comments!

Women in Engineering: Why There Should Be More of Us

I was always encouraged to discover my abilities in fields I found interesting, and the truth is -
I have always been interested in how things work. My passion for technology started in school from a very prosaic reason - a broken computer. It was one of the triggers that simply made me curious about building and repairing devices. I followed the idea later on and began my studies at the University of Science and Technology. During the studies, everyone tried to inspire and motivate us - 17 girls out of almost 300 Electrical Engineering students. Many of us after graduating, chose the path of being a developer. I started to plan my career and look for opportunities. The more I’ve read, the more stereotypes I’ve found.

The changing perception of a female engineer

One of them was a conviction that it’s really hard to preserve that feminine aspect while being a female engineer. I’m a woman who likes soldering in high heels, so I believe there’s no such thing I can’t do while wearing a skirt.  
Many times I heard opinions of my female colleagues that were insecure of the other team members’ reaction. When I started my career, I came across nothing but admiration of my courage, my technical skills and ideas. Everyone was always open and glad to help, so we quickly developed an effective communication and a great relationship that lasts till today (sending love to our software embedded team!)
Another common issue is a matter of passion. Everyday I come across opinions that engineering is probably the biggest passion of mine. I’m a hardware engineer, but except diving into technical news and projects’ insights, I’m also crazy about cooking and dancing. So when I’m not at my desk right now developing products, search for me at dancing or cooking classes!

Unbelievable facts and statistics

Did you know, that only 9% of the engineering workforce is female? What’s more, the proportion of women studying engineering did not change since 2012! With the engineering industry facing a problem of finding qualified professionals, it is crucial to encourage future engineers to work in this industry.
As for outstanding skills presented by female engineers, the ability of quick learning and multi-tasking was mentioned many times by employers. They also consider diversity in their teams as a strong positive factor, that has an enormous impact on their employees’ productivity. And they’re right!

In our team, we exchange ideas on a daily basis, and the important thing is - we have different points of view. Such various opinions enrich the communication and are the key to resolve complicated issues. We perceive solutions in a different way, and at the end, we choose the perfect, most advisable one.

My advice to every woman interested in engineering?

The world is more and more open, people are always positively surprised and the possibilities are endless. Enabling women to meet their full potential in work could add as much as $28 trillion to annual GDP in 2025. Diversity is crucial for innovation: in a global survey, 85% corporate diversity and talent leaders agreed that a diverse and inclusive workforce is crucial to encouraging different perspectives and ideas that drive innovation.
Working in a tech environment gives you plenty of opportunities and makes you more creative every single day.
If engineering is your passion, go for it!


Published by: admin in blog
Tags: ,