Category: Software Development

  • Designing the Apple Watch UI – a quick guide

    Designing the Apple Watch UI – a quick guide

    The Apple Watch is releasing in a month! Here’s a list of important things you need to know, if you’re interested in designing or developing an Apple Watch App:

    1. Layout and Screen Sizes

    38mm: 340 pixels x 272 pixels
    42mm: 390 pixels x 312 pixels
    That’s an aspect ratio of 4:5.

     

    2. Icon and Image Sizes

    Unlike the Rounded Square icons on iPhones, the icons on the Apple Watch are round.

    Icon Sizes Required:
    38mm Watch: 48px, 80px, 172px
    42mm Watch: 55px, 88px, 196px

    Tips on designing the Icons (designers take note!):
    – Create all of your image resources as @2x images.
    – Create your icons as full-bleed square images using the given dimensions. The system applies the circular mask automatically.
    PNG format is recommended (for images and icons). Avoid using interlaced PNGs.
    – The standard bit depth for icons and images is 24 bits—that is, 8 bits each for red, green, and blue. You can include an 8-bit alpha channel but doing so is not required. You can also use PNGs with indexed colors to save space in your image files.
    – While designing these, also note that you’ll need the accompanying icons for the iPhone app. (i.e. Watch App can’t work without the iPhone App)
    More information on Icons and Image Sizes.

    3. Color

    “A black background blends seamlessly with the device bezel and maintains the illusion of there being no screen edges. Avoid bright background colors in your interface.”

    “Every app defines a key color. The system uses this key color for the title string in the upper-left corner of the screen and in notification interfaces to highlight your app name or other key information. You should similarly use the key color as part of the branding of your app.” More on colors.

    4. Typography

    There’s a system font “designed specifically for legibility on Apple Watch”. (the San Francisco Font). “Use San Francisco Text font for text that is 19 points or smaller; San Francisco Display font for text that is 20 points or larger.”
    You can chose another font, but be careful to go for a dynamic font (that adjusts well to size — since the watch interface is so small). With Dynamic type, you get automatic adjustments to letter spacing and line height, text that responds appropriately to changes the user makes to text-size settings and more. More on Typography.

    5. Two ways of navigating an App – Hierarchical Vs Page based navigation

    From the start, you have to decide which type of navigation you want. A single App can’t behave as Hierarchical at one point and Page-Based at another point.

    The two types are quite different in look, feel and the way they function. For instance, Horizontal swipes are only available for Page-Based Apps. More information on navigation types.

    6. The three ways of presenting information

    I. via the Main App

    You can reach the App by launching the App from Homescreen. The ways of interacting with your Main App are rather limited right now.
    Here’s what you can do:
    a) Taps (selection)
    b) Vertical Swipes (scroll through the screen)
    c) Horizontal Swipes (go between pages – only available in page based apps.)
    d) Force Touch:
    Pressing the screen with a small amount of force activates the context menu (if any) associated with the current interface controller; this is the only thing a Watch app can do with force touch feature. More information on context menus.


    Design of the Force Touch Context Menu can display up to four actions. The image for the context menu must be a template image — where the alpha channel defines the shape to draw on top of the background. Opaque portions of the image show up as black and fully or partially transparent portions let the background color show through.
    e) Digital Crown: Only ‘scrolling’ support available to third party apps.

    II. via Notifications

    The wearer feels a gentle tap on the wrist when the Notification arrives.
    Notifications are displayed up in two formats.
    a) The “Short Look” is only seen briefly when you raise your wrist — it’s an app icon, an app name, and some brief information.
    That is, the Short Look provides a discreet, minimal amount of information — preserving a degree of privacy. If the wearer lowers his or her wrist, the Short Look interface disappears.

     

    b) The “Long Look” interface appears when the wearer’s wrist remains raised or when the user taps the Short Look interface. It provides more detailed information and more functionality — and it must be actively dismissed by the wearer.
    For Long Looks, the app icon and name move to the top of the screen, and wearers can scroll down through the interface to use custom actions (such as “comment” or “favorite”) or dismiss the notification.

    Read More about notifications.

    III. via Glances

    Glances from all the apps are viewed together at a common swipe-able place. User can tap on a glance to enter the App. All the information on a ‘glance’ must fit on a single screen and is read-only. As the name suggest glances are there to provide the user useful information; don’t use them to spam the user. The area at the bottom of the glance is reserved for the page indicator dots. Read more about glances.

    7. Image Cache

    You can store upto 20MB of image resources in cache on the Apple watch. As with webpages and Apps managing caches efficiently is a hallmark of good front end; so plan your cacheing strategy well. Needless to say use very optimized images. More information on how to use images in the App.

    8. Animation

    To create animation you can loop through “sequentially named images”, infinitely or till a specific count. There’s no mention of support for videos or UIKit like animation.
    These links have good info on how to show animations on Apple Watch:
    http://natashatherobot.com/watchkit-animate/
    http://www.raywenderlich.com/94672/watchkit-faq

    9. Handoff

    Handoff feature can transfer the user action from the watch to the iPhone. Handoff can also be used to dynamically send some information to the main Watch App interface using Notifications or Glances.

    10. Fullscreen Support (Not available)

    There’s no mention of fullscreen support for an app. (The only few seconds that your app will have the fullscreen of the watch to itself is during the short look notification.)

    11. Settings Bundle

    Works the same way as the iOS settings bundle. “Preferences are pieces of information that you store persistently and use to configure your app. Apps often expose preferences to users so that they can customize the appearance and behavior of the app.” More information on the settings bundle on the Watch which complements the existing settings bundle on iOS.

    12. Date and Time

    Use Date and timer objects whenever you want to display a current day or time or implement a precise timer. Date and time labels come in variety of formats suited for the watch. Generally, it’s a bad idea to invent your own date time format. More info on date, time formatting here.

    13. Dependence on iOS App

    Apple Watch requires the presence of an iPhone to run third-party apps.
    “A WatchKit app complements your iOS app; it does not replace it.”
    “During installation of your iOS app, the system prompts the user to install the WatchKit app when a paired Apple Watch is present.”

    Further Reading

    • Apple’s Human Interface Guidelines (HIG) for the Watch (Approximately 2hrs read)
    WatchKit Programming Guide
    • WatchKit Framework Reference (for programmers)
    • Apple’s tips and best practices for developing Watchkit Apps.

  • Php’s performance improvements — HHVM, JIT, and ‘Hack’

    Facebook deprecated HipHop for PHP, a PHP to C++ translator (trans-compiler) which they had been using since Feb 2010 in favour of HipHop Virtual Machine (HHVM), in 2013.

    HHVM is a PHP interpreter that uses just-in-time(JIT) compilation techniques. Or to put it another way, HHVM is a virtual machine that compiles PHP bytecode to native instructions at runtime. HHVM now runs the Facebook backend instead of the default PHP interpreter.

    On March 20 2014, Facebook introduced the Hack programming language for HHVM, which integrates seamlessly with PHP. Hack seems quite interesting; it’s like the good parts of PHP with some nice extras, more attuned to Facebook’s requirements. Along came a few new releases of HHVM in 2014 to improve compatibility.

    In Nov-Dec 2014, Wikipedia moved its Application servers to use HHVM giving them a 2x faster load time for (uncached) page requests while drastically reducing the Load on their CPUs from 50% to 10%. Here are few more details on how Wikipedia’s move from zend to HHVM was carried out.

    Image: Wikipedia’s page save time with HHVM is just 45% of what it used to be previously (http://hhvm.com/blog/7205/wikipedia-on-hhvm)

    All and all, HHVM is a cool update for the PHP community. It points to a maturing platform that now powers two of world’s most visited websites. For all the flak that PHP gets, Facebook’s continued commitment has really helped the language infrastructure grow impressively.

    All this triggered action in the PHP’s Zend Engine team and they have been busy updating the default interpreter. Here’s a great gist of features and improvements coming in PHP7 (also read why there’s no PHP6 on this link.) The PHP7 team are working to make the performance match up with HHVM, using JIT and Asynchronous programming support. PHP7 will probably be ready for production use by this year end.

    I still love to work in Python or Go more than PHP — Python is more expressive and easier to read and navigate. But the Python 2.x Vs Python 3.x debate has done some serious damage to the language. When the Python PEP Community should have taken the path to fix some of the nagging performance and concurrency concerns, they ended up breaking the backward compatibility with a new language spec. On the other hand, Facebook/Php took the pragmatic approach of keeping things compatible with every update. This must be great news for thousands of PHP developers out there who were feeling the heat from Python, Go, and JS(Node.js).

  • Native Vs Hybrid Mobile Apps

    I was recently checking how the Hybrid App frameworks compare to Native iOS or Android Apps.  Here are my observations on few Phonegap Apps that I tried on my phone:

    • The size of Phonegap Apps is big: an app that should have been less than 10MB has a 40-50MB installer.
    • The Apps take longer to boot up.
    • There’s noticeable drop in scrolling performance (less fluid).
    • They lack significantly in giving the native feel.

    And then there are these major shortcomings when it comes to Design and Development Time itself!

    Hybrid Apps’ Design doesn’t match up

    There are different design guidelines for Android, iPhone and Windows Apps. You will observe that many iPhone Apps have a menu at the bottom, but that doesn’t work well with Android Apps. Android has fixed ‘menu’, ‘home’ and ‘back’ buttons at the bottom and it’s inconvenient to have more options there. Then there are subtle differences in icons, fonts etc. that you should take care of.

    You won’t save much (any) development time

    If you’re starting fresh, I don’t think it takes any longer to make a Native app than a PhoneGap, Cordova or Xamarin App. If you already have a Web App, starting with PhoneGap might give you the impression of progressing fast initially; but fixing everything later is definitely going to be very painful.

    I personally love highly optimized code. If something can make my software a bit faster, or use lesser space, within practical limits, I would do that. If you’re particular about have a beautifully designed app, that’s fast and can use your phone’s hardware in the best possible way, in my opinion you should go for the native apps.

    Reference:
    – Explanation of PhoneGap, ionic and Cordova – http://ionicframework.com/blog/what-is-cordova-phonegap/
    – A startup moves away from PhoneGap to Native platform – http://www.fastcolabs.com/3030873/our-html5-web-app-flopped-so-we-went-native-and-havent-looked-back

  • github is not git

    Git is a free and open source distributed version control system that can handle small to very large projects. It’s mostly used to keep the history of your source code.

    Github is a company that provides an online git hosting service, used by some projects to keep their source code.

    There are several companies like gitlab, bitbucket that offer github like service. They all use git to manage a user’s project source code internally.

  • Navigating large codebases and contributing to Open Source

    (I wrote the following as an email to a someone who asked me for advice. So it’s verbose and written with a personal tone.)

    I. Setup your system and build the project code

    Pick any good Integrated Development Environment (IDE). I like VS Code. You can work on any langauge in VSCode be it C++, JS or Python, and you won’t have to learn the interface of a new editor everytime you switch language. VIM is a good choice too. Then of course there’s emacs and more. I recommend you pick a more generic — widely used editor, instead of something like say Dev C++ that’s restricted to a language.

    Under the hood, VS Code has something called “Intellisense” which creates a sort of index of the whole project when you load the project (So, when you right click on a variable/function you can click on “Go to definition” to jump to where a variable is defined/declared etc.). This indexed code is super useful for navigating a large codebase: a good analogy I read long back is to think of this ‘index’ as a torch to navigate through a dark maze. That’s is basically the difference between an IDE or just using a more basic Editor.

    Also figure out how to use the terminal effectively — modify your terminal’s configuration file to your liking. In older days, people would use things like ctags, cscope, gdb to achive the same via the Terminal; IDEs were buggy and slow. Command line tools like tags and cscope help you jump to definitions/functions etc. just like IDEs. It’s interesting to learn these too, in particular if you’re working on C/C++.

    Then, get a local copy of the code you want to checkout and compile it. Usually there’s a “how to build/run the project” section in the README file.

    You can’t do anything if the project doesn’t build on your system! Look at the build script (makefile, requirements.txt, webpack etc., whatever is used on the project) to see if you can find some hints on how the code is actually “booted”. See the list of other libraries the project depends on.

    Always, read the output of the build process: you’ll find some helpful hints on what command were executed and how the build went.

    II. Understand the business logic for the code base

    Get a high level understanding of the project. Coding usually doesn’t just involve punching keys. You have to understand what the project is trying to achieve, otherwise you would remain confused.

    You’ll have to read the project’s documentation or some literature on the industry. For example, if you’re working on an HTTP networking library, you’ll need to know the HTTP specification fairly well. If you’re working on a library management system, you’ll have to understand how books are categorised in libraries, ISBN format etc.

    If it’s an open source projects, you might even find some talks by the project developers online or some project slides. So search on the web. See if you can find some architecture diagram viz. flowcharts, sequence diagrams, UML class diagrams, Component (Block) diagrams. If you can talk to other developers on the project, that would be useful too.

    III. Set an initial aim

    Decide what you want to do on the code base i.e. do you just want to just learn the code flow, fix some issue or enhance some feature etc. Try to aim high. Setting up audacious goals generally has positive outcomes.

    This essentially is a Bottom-Up approach. You isolate a module/component in the codebase, and work on it.

    Make small changes and see how it affects the code flow. You can always revert back to the original version.

    The Top-Down approach, would be something like grasping the whole source code before editing anythint. While that theoretically sounds like a good idea, it could take too much time and you’ll tire youself out before modifying even a line of code. Learning the whole codebase is overwhelming for everyone.

    New developers at Facebook are encouraged to commit their first code on the first day of joining! This bottom-up approach is a much better start, then trying to understand the whole FB architecture.)

    IV. Make notes as you study the code

    Understand the different classes or abstractions, and try to estimate what each module/class/abstraction is doing. Look at the Folders/Files and try to make sense of what they are doing by their names.

    I usually like to make a lot of rough notes on paper – noting down the classes how they interact, the inheritance structure.

    Draw rough class diagrams on the fly. Also draw a call graph, as in which functions calls the next function etc. Diagrams could be specially useful if you’re a visual person. At times, I have even taken printouts of some code at times and annotated it.

    Big codebases, usually have a lot of asynchronous calls with multiple processes and threads. You might have to understand how the process/threads pass data between themselves.

    V. Look for an entry point into the code

    Usually, projects keep the core code in “src”. While the built binaries usually go into “bin”. There are also other folders like lib, docs, test etc.

    Your IDE will allow you to setup Breakpoints on various files to debug the code. So setup a few breakpoints on functions that you might think will be ‘hit’ when the code is run. When a breakpoint is hit, the code execution stops and you can see a call hierarchy, i.e. a trace of all the functions that were called till the breakpoint.

    VI. Look for the data models

    There are two broad types of coding projects — Data driven and Functionality driven.

    If your code base is to deal with large amounts of structured data then reading the DB Tables/Data structure would be super useful. Here’s a quote that puts it so well:

    “Show me your [code] and conceal your [data structures], and I shall continue to be mystified. Show me your [data structures], and I won’t usually need your [code]; it’ll be obvious.” – Fred Brooks

    VII. Logs, Debug msgs, Test folder

    When you run/build the code, it shows a lot of info on the output terminal or in Log files.

    It might seem daunting initially, but read the output carefully and try to follow what the messages are trying to tell you. You’ll understand a lot about the code flow from here! Eventually, you’ll develop a knack for how to read logfiles and debug messages and this is a super helpful skill.

    If you just can figure out, look into the tests folder, there might be some earsier/helpful code you find their on how to interact with the main source code.

    VIII. Language basics are important

    Big projects could be using very advanced language features, complex design patterns, clever hacks etc. So a good understand of the language syntax itself, Design patterns, OS fundamentals is super useful.

    For example, if you’re working on some mobile app, then understanding the MVP design pattern is almost necessary before even getting started. If the code uses frameworks, you’ll need to understand the framework itself. For example, to build a web application on Django, you’ll need to have gone through the basics of the django framework at the very least.

    You might need to understand how the language interacts with the OS (Android, iOS, Linux, MacOS, embedded systems et al). For e.g. how does File I/O happen or how are threads spawned.

    IX. Be patient

    It takes time, so be patient. Navigating code base isn’t easy for even experienced developers, especially when many people have contributed to the code.

    Additional

    You’ll also need to understand:

    • How code versioning systems work. Most probably git is being used.
    • How bugs are reported and handled on the project.
    • Coding Standards — how variables/functions are to be named or how many spaces are used for indent etc. Be sure to follow the guidelines setup by the project’s maintainer.

    More Tools

    • Tools like grep, find are super helpful.
    • tree
    • tree | less(you can do brew install tree to get tree on Macs)
    • For C/C++ callgrind + kcachegrind are interesting to see call graphs.
  • Python for beginners

    Getting functional in Python programming took me about a month and I’ve several years of C++ programming experience. I feel this is ok time for experienced programmers to get started, given you have something else going on in life as well. For beginners though, learning a new programming language in a useful manner is not as casual an affair as some YouTubers and Tech bloggers would tend to suggest on the internet (looking at you people, who write the ‘learn X in 1 hour’ guides 🙄).

    Computer systems need a fixed syntax and grammar which needs practice to get comfortable with. Python is easier than many other languages, but still, if you’re a beginner, you need to set aside a good amount of time learning it. People will forget to mention this when recommending books, but there are broadly two categories of programming books out there:

    • 1) for experienced programmers/Web Developers, and
    • 2) for beginners, with the language basics.

    If you’re a beginner to programming, don’t pick the former.

    If you just want to write some standalone scripts, then avoid books targeting Web Developers (Web developers would have to learn other topics, like a web framework, HTML rendering, REST APIs, etc., stuff that you can skip). I learnt it from Dive into Python, which is a bit advanced and not for you if this is the first computer language you are learning. It’s a great book though!

    If you’re a beginner, just focus on the language syntax, keywords and the style of writing code. The book Byte of Python might be it for you. Or try Think Python.

    Don’t try to learn by collecting tips from forums on random Python-related FAQs. It’s best if you start with a complete book. The forums will come in handy later when you have started coding and are stuck at some specific point. I haven’t studied programming through interactive online websites yet; I prefer working with native tools and find practising on the browser a bit cumbersome. It’s always better to practice coding in the environment you would be working on. Online interactive tutorials will give you a sense of accomplishment, with a quick start, but without actually building a good foundation. Having said that, there are a few good resources out there.

    There are also some very good online video courses available now. “sentdex” on youtube has some awesome content.


    P.S.: Python like most scripting languages uses Regular Expressions for a lot of text operations: it would help you greatly if you learn a bit of RegEx as well (You have definitely encountered some RegEx already if you’re an active computer user).

    If you’re preparing for Web Development: then learning about web frameworks (ex. Django), file I/O, REST API, Databases etc. will be the next steps. Pick the advanced topics after you’ve learnt the language basics though.

  • “Language X for Y developer” tutorials are useless

    The idea of the polyglot/full-stack developer is pushing all the web developers to continually learn new languages and you might come across a few tutorials on the lines of ‘Python for C++ programmers’ or ‘Go for Java developers’.

    I don’t think these tutorials are the best way to pick a new language. The premise of such a tutorial suggests that you’re in a hurry, and want a few quick hacks to get started. Let’s try to unwind the situation. Suppose you are a C++ programmer looking to learn Python. To learn “Hello World” from this tutorial would mean that you read through the “Hello World” code in C++, and then the “Hello World” code in Python… and then spend all your brain power on comparing the diffs. When actually you could have easily learnt your first Python program.

    Now let’s pick a simpler case, let’s say you’re moving from C to C++. You start off comparing basic code in the two languages again, which would be a cake walk since, it could be pretty similar. But wait, you probably don’t understand Classes and Objects yet. Cpp is going to offer you new concepts on data abstraction, OOPS, encapsulation and inheritance. Stuff that a quick guide can’t teach. So there actually isn’t any quick and dirty way at all.

    There are elegant similarities in languages of course. But there are interesting differences as well. The differences are the reason you’re learning a new language to start with. Differences that make a new language useful.

    And there are more reasons why this might be a bad idea. Bad Habits of one language can affect your style on another. You might observe useful features of a language too late since you were busy hacking the diffs. Python obsesses over consistency of syntax, C++ obsesses over inheritance and optimization.

    So start fresh when learning a programming language. Your learnings from previous languages will map automatically onto the new language that you want to learn.