Page 2 of 3

Top 10 Mobile App UX Design Mistakes

We’ve been dealing with many many different apps. App quality and usability are always our core values we never settle for less.

There are some common UX mistakes that engineers often overlooked. Getting these discovered and handled, one can build greater apps.


Get ready, here are our top 10:

10. Long text is too long in a text field

You’ve probably met this before. Long text can be really loooooooooooooooooooooooooong.

It’s not the text’s fault.

It’s the text field couldn’t handle that.

Long text handling

Yet, there are ways to deal with that:

  • Truncate the text.
  • Overflow the text field, make it scroll.
  • Expand the text field.
  • Limit the text length!

Continue reading

You’ve been working hard preparing for your launch to AppStore. The final step is getting it submitted to iTunesConnect.

GIFCAM-iTunesConnet

You have to fill in the app details, upload the app icon, localized descriptions and preview imagesupload them one-by-one going through your list of localizations for each supported device in English; one-by-one for each device in French; one-by-one for each device in German, etc, etc.
.
.
.
OK, 13 languages.

You have to upload screenshots one-by-one for each device, for each locale. Oh that’s O(n²)

Let’s say you have built an awesome app for iPhone & iPad and now it’s ready for launch.

Question, how many preview images exactly do you have to add?

The answer is simple. For each locale, there are 3.5-inch, 4-inch, 4.7-inch, 5.5-inch and iPad screenshots (and don’t forget the upcoming iPad Pro). There are 5 images in each set, that gives you 5 x 5 = 25 pcs for each locale.

Needless to say, you will have to organize 25 x 13 = 325 preview images to iTunesConnect. Sounds scary right?

Continue reading

Spentable (Expense Tracker): How we built our first app for watchOS 2

In WWDC2015, Apple announced iOS 9 for iPhone and watchOS 2 for iWatch. It has been a huge revamp for watchOS. Not until now, a watch app finally runs natively on the watch.

That means the code is now executing on your watch instead of the phone. By reducing multiple times of data transfer between devices, this is going to make the app loads a lot quicker and responds in a shorter period of waiting time.

watchOS 1
WatchKit Extension runs on the phone and the Watch App is more like a display console for your app.

watchOS 1

watchOS 1

watchOS 2
WatchKit Extension now runs on the watch, you don’t have to run a watch app with the phone connected actively.

watchOS 2

watchOS 2


 Spentable: our first app on the watch

Spentable Watch FaceOursky has recently built Spentable 2.0 , it’s also available on the Apple Watch.

Spentable is a handy, in-your-pocket app that helps you to track your expenses and make purchasing decisions. Now you can even track you daily expense via the watch App without taking out your phone.

In this post, we will talk about the experience on building an app for watchOS 2.

Since the watch app is now running on the watch as a native extension, there are situation we need to handle data sync between the phone and the watch. For example, we wish expense input via the watch will be reflected on the phone instantly.


wireless

Get connected to the phone: Watch Connectivity Framework

In watchOS 1, the watch app must be connected to the iPhone app (we call it the main app) to work. We often call [openParentApplication:reply:] to send a message to the iPhone app. However, now the connections in watchOS2 are handled by the Watch Connectivity Framework.

The Watch Connectivity Framework provides a seamless background connection between iPhone and iWatch. It helps doing all the synchronization work between the main app and the watch app. When the watch app handles a user input say, a new expense item, it has to notify the main app and get the record updated. The could be easily done via the Watch Connectivity Framework.

This allows Device-to-device communication more freely (such as transferring files, user infos and application context around ). There are serval APIs to transfer particular data for different use cases.

So how do we choose between them?

Continue reading

Better StackTrace for iOS crash report from Sentry on Slack

Get crash reports from Sentry

We have been using Sentry for collecting crash reports and stack traces for our front-end js, Python, and Rails applications. It is reliable with affordable pricing. Simple to setup with it’s open-source SDK.

However, there’s a fundamental problem when it comes to iOS.

What? No symbolized data returned?

Sentry only returns the crash report with a piece of memory address but not a meaningful method name.

As an iOS developers, you should have noticed that it requires a dSYM file to symbolize the stack trace. It helps to identify these addresses with the appropriate dSYM file.

We thought we can upload dsym files and get symbolized information returned when Sentry claims it works on iOS.

Unfortunately, it is not the case:

refs. https://github.com/getsentry/raven-objc/issues/11#issuecomment-84141003

No one can understand the iOS Stack trace with memory address only. Proper support of dSym is needed.

(BTW if you can debug with memory address, please consider joining us.)

Solution

One of the possible solutions is to fork a piece of Sentry code and get our hands on it, but we don’t want to get into the complexity.

Instead, we write a micro service that will reply to a Sentry notification with de-symbolized stack trace on Slack, here is what we did.

Continue reading

Dockerizing our Python stack

… and it didn’t benefit that much.

Everyone in the DevOps community should have already heard about Docker.

There are always sysAdmin coming around and telling you how Docker has made his life easier, how well the automation goes or how lightweight the containers are…

So, what is Docker trying to solve?

Basically, Docker wraps up your application and all the dependencies required into a complete filesystem, that becomes a Docker Image. The next step is all about shipping this container to your production infrastructure, let it be AWS, Heroku or other servcies.

Back in the Pre-Docker age, every SysAdmin implements his own solution to package and deploy applications.

A small scale online shop might use git to deploy code and virtualenv to contain applications in an isolated environment. There were also existing solution providers – Heroku, Elastic Beanstalk, Google AppEngine and others services, having their own proprietary way for packaging and deploying applications.

Now, all the configurations and environment settings are standardized in the Docker Container, which actually saves loads of time for developers dealing with the repetitive setup and maintenance.

docker-2

(ref. https://www.docker.com/whatisdocker)

Continue reading

Human-and-cat-friendly ChatOps at Oursky

As mentioned in our previous post, at Oursky, we use Travis CI to build, test and automatically deploy our software applications. While the command line control has been super developer-friendly, we should also care about the feelings of less technical roles in the team, say PM, QA, and Designers. 🙂

Hence, we introduced Chima and Faseng, both are bots to assist the deployment process. (For cats in our office, see this post.)


What is ChatOps?

We learnt about this from GitHub — its open source chat bot (Hubot) for ops: automating deployment, graphing, monitoring, provisioning, tweeting, and many other things.

Continue reading

Basic Open Graph techniques that optimize shared links on Facebook

Open Graph is a good standard, it helps turning a web page to become a rich object in a social graph.
If you follow the Open Graph protocol, most of the social platforms (Facebook, Reddit, etc. ) will crawl your website and present it in a nice and structured format.

A minimal open graph set-up requires these 4 tags:

  • og:title
  • og:type
  • og:url
  • og:image

To start with, implement Open Graph Tags as the followings:

Further optimizing the related Open Graph tags would be an advanced SEO skills for grow hackers.
An eye-catching and structured graph information will positively affect your post exposure.

Facebook with Open Graph

Facebook is one of the leading platform that strongly encourages the use of OG Tags.
On Facebook, you might already notice some shared links are displayed in different forms.

FOMR 1 – IMAGE Grid on left
small-og-image-sample
FORM2 – Top cover Image

large-og-image-sample

Continue reading

UI 101: Simple Rules that make great front-end

We have many pixel lovers at Oursky. We strive for perfection in the UI design process, and most importantly, make sure developers implementing them perfectly.

Here we share our internal 101 guideline for developers, wish it will help more junior developer building Web like a Pro.

Web front-end basic styling tips

Buttons and Labels

UI-BASIC-1

  • Buttons / Labels must have same padding for top and bottom, same applies to left and right paddings.
  • Centre align your text.
  • Button should expand itself, don’t forget to apply a minimum width in case the label is very short.
  • For convenience, if the style for the hover state is not given in design, use darken or lighten function for quick and nice effect.

Continue reading

SQLAlchemy in batches: Generating a top playlist

SQLAlchemy is arguably the most powerful and ubiquitous ORM framework for Python.

At Oursky, we have been using SQLAlchemy for quite a period of time and appreciated the flexibility and elegance it provides over the Data Mapper abstraction. No doubt, it works very well for modern web applications but what about long-running background jobs? Would the abstraction get in your ways? (tl;dr: yes, but we still prefer it)

Here are some hands-on experiences from us.

We built a popular iOS application with a song recommendation system at the backend. The system suggests a top list for 20 popular songs.

Previously our editors hand-picked popular songs by download count and gather a new playlist as a recommendation to users. Now, we want to automate this process and generate the playlist weekly.

Continue reading

Geek’s way to say things

developer's way to say things

We geeks often have our own ways to express, which might be too geeky for normal people to understand.

Here are some general guides to help you communicating with your geek friends (at least knowing what they are thinking about… )

1. “X is a subset of Y.”

x_subset

Spoken by Computer Scientists to say that X is a kind of Y, but Y is not X.

Real life examples:
“Matcha is a subset of Green Tea. They are different!”

Continue reading

« Older posts Newer posts »

© 2017 Oursky Code Blog

Theme by Anders NorenUp ↑