User Experience Design and Software Development

Idea Kit: A Good Place To Start

6/14/2016

Even the best have humble beginnings. Brilliant companies with amazing user interfaces, in-genius advertisements, beautiful animations of the big screen, have all found themselves in one situation: Staring down at a blank piece of paper with a pencil in hand. With technology becoming more integrated with our lives and staring at computer screens for nine hours a day is no longer abnormal, it’s hard to come up with ideas when our processes have become this mechanical. The ability to come up with fresh and new ideas often occurs not in front of a screen, but when you revert back to the more humble and basic methods.

Here are three key benefits for using our template:

Easier to understand your design process

Enables clearer thinking
More flexible way to layout your ideas

In order to express this importance of integrating paper and pencil into your design process, we made a simple idea kit in hopes of enabling lots of wonderful ideas to come to life. Happy creating!

mobilekit.pdf
File Size:	129 kb
File Type:	pdf

Download File

webkit.pdf
File Size:	126 kb
File Type:	pdf

Download File

Comments

Revolutionizing Code Education with Swift Playgrounds

6/13/2016

Comments

For most beginners coding can be overwhelming; staring at a computer screen riddled with numbers and letters often discourages them from learning at all. When Apple released Swift two years ago however, they had high hopes for solving this problem and expanding and appealing to the newer generation of developers. Swift as a language is powerful and intuitive while at the same time providing a fun and interactive way to write code. Since then, over 100,000 apps have adopted the lighting fast and easy to learn language, notable ones include Twitter, Strava, Lyft, and Behance. Since it’s release as Open Source in December, the degree of adoption has been phenomenal, ranking as the number one project language on HipHop.

Apple maintains this goal of bringing more people into coding by revealing of Swift Playgrounds at Apple’s annual developer conference today. The app solves the critical problem of coding not being fun nor interactive by taking advantage of Swift’s inherit simple learning structure and pairing it with a game-like platform that includes an avatar(Bite) and several different mazes that one can go through. It offers levels and puzzles where you control Bite with code, and the farther you go the more advanced the concepts become. Other beneficial features of the game that makes it fun to learn the basics of Swift include high quality graphics, smooth transitions and animations. Here's a preview of the app.

"Swift Playgrounds can profoundly impact the way kids learn code."

-Apple CEO Tim Cook

The app will be released to developers today, Public Beta in July, and on the App Store when iOS 10 ships in the fall. The price? Absolutely free. As important as coding is and has been, it still lacks presence in classrooms across the country. By making Swift Playgrounds free, it would be a monumental step towards implementing code as a required language in education or as Apple CEO Tim Cook expresses during the conference, can “profoundly impact the way kids learn code”.

While Apple has made incredible advances in several different areas of technology, this app is the first to dip it's feet into education and coding simultaneously. It takes critical steps towards encouraging more people to enter the coding environment and furthermore revolutionizing the way they learn.

Comments

Datadog: App Monitoring's New Best Friend

6/7/2016

Comments

In the previous post we discussed the basics of port/latency monitoring using AppBeat. In this post we will discuss full stack server monitoring using a tool called Datadog.
Datadog is one of the leading application performance monitoring SaaS tools. We will cover how to setup a monitoring agent on your servers and configure Datadog to display metrics, trigger alerts, and even integrate with twilio to send SMS when there is a problem with the server.

Stack

The first thing to do is to sign up for the Datadog service here. Once completed, you can integrate your server into their dashboard by running the Datadog monitoring agent on your server as follows:

Integrate Datadog into applications it supports; you can see if your software is supported by Datadog here
You can install their agent directly into your machine as root.
You can run their monitoring agent inside a docker container.

It’s a cross-platform monitoring agent that works on both Linux and Windows and integrates over 100 services. The full list is available here.

Installing the Datadog agent on the server
The installation procedure is pretty simple, once you login to your server:

Go to Agents under the Integrations panel or go to this link:
Elect your operating system and follow the instructions on the page to install datadog agent on your server.

E.g. on my ubuntu machine I had to run the following command:
DD_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx bash -c "$(curl -L https://raw.githubusercontent.com/DataDog/dd-agent/master/packaging/datadog-agent/source/install_agent.sh)"

Once the agent is installed on your machine, go to the Datadog dashboard and see if any events appear on the event log.

You can find the default dashboard panel of your system at the bottom of the Dashboard List under the “Host Dashboards” section.

Open the host dashboard and you’ll see all sorts of metrics, for example :

Integrating Twilio into Datadog
Twilio is an telecommunications SaaS platform where your can send SMS and make calls like as you would on a mobile phone.

To integrate Twilio, follow this tab path to get to the configurations tab:

Open Integrations under the Integrations panel on the side panel
Select “Webhooks”
Select the Configurations tab and scroll down to the bottom of the popup

To test if the Twilio integration is successful:

Go to the Events page and input @webhook-twilio into the event box.

Click post to trigger the webhook and if everything is configured correctly you should receive an SMS.1.

In order to proceed, you will need a Twilio Account SID and Auth Token which you can find under “Account Summary” on the Twilio Console.

Copy both and replace them with ACCOUNT_SID and AUTH_TOKEN in the following URL:
- https://ACCOUNT_SID:AUTH_TOKEN@api.twilio.com/2010-04-01/Accounts/ACCOUNT_SID/Messages.json

2. Following, construct this message in twilio API format.
{
"To":"+1XXXXXXXXXX",
"From":"+1YYYYYYYYYY",
"Body":"Service seems to be down, check datadog portal"
}
*(XXX) XXX-XXXX is your phone number and (YYY) YYY-YYYY is the twilio number.

3. Copy & paste the message in the content payload and check the “encode as form” box

4. Add the URL listed above into the URL field and “update the configuration”.

5. Create a new monitor and select the metrics you want to monitor and when it asks “What’s happening”, enter “@webhook-twilio” and save the monitor.

To test if the Twilio integration is successful, go to the Events page and input @webhook-twilio into the event box. Click post to trigger the webhook and if everything is configured correctly you should receive an SMS.

That covers how to monitor your app using Datadog and how to get notified. Note that the value you get out of Datadog is similar to what you would get by using a tool like New Relic which is a great tool, but comes with a premium price more suited for large corporations. For startups or others on a budget, Datadog could be your best friend.

Comments

Effective Web App Monitoring at Low Cost

6/3/2016

Comments

Possibly the worst part about running an online service is when it crashes, or worse, being unaware that it crashed. This post pertains to how to monitor your service effectively at a low cost. The key things to know about your service includes three critical questions, and our suggested effective solutions to them.

Is my service alive?- AppBeat
How are the vital signs?- Datadog
How will I know?- Twilio

AppBeat is a service that monitors the ports and their latency from external servers from different locations on the globe and reports the analysis results on your dashboard; every day and every hour. Some benefits of using this service include the comforting knowledge that your apps are constantly being monitored and watched over, the high availability of services which often equates to high customer satisfaction, the detection of slow response times, and the critical prevention of unexpected outages. What’s more, it can integrate with other services like Slack and Pagerduty to report alerts on these.

Datadog on the other hand is a service that monitors various parameters on the server including CPU load, memory consumption, network I/O, disk IO, temperature, and many more. Benefits of this service include aspects in Integrations, Dashboards, Correlations, Collaborations, Metric Alerts, and Developer API. While there is a lot of information regarding all of these aspects, one of the main distinguished features include the fact that it sends data to the dashboard where the user can see it and configure/trigger alerts if anything goes wrong.

Regarding the low cost part mentioned above, another advantage of both Datadog and Appbeat is that they have free plans, so the setup cost for monitoring solutions is zero. This is a great alternative to paid services like Pingdom and Newrelic (which are fine services in their own right), making it a good option for startups with tighter budgets.

Before we start the set-up process for the monitoring system we have to identify a few things first, such as the email and mobile number you want to send alerts to and a credit card to sign up for Twilio (you only pay per-user at a nominal cost). We will first start off for cases with a use-purpose like running a blog, where just using Appbeat is good enough. We’ll cover Datadog and Twilio in a future posts.

How to setup Appbeat

Create an account with Appbeat.io
Verify your email address
Following this, go to “Services & Checks” on the left panel in your dashboard.
- There you’ll see an option to add a new service. Click on it and your screen should look like the one below,
- Fill out the following form and click “Save”.

Once you’ve added the new service, the next step involves adding checks that are to be grouped under that service.

Click on the tab labeled “Checks”
Click on “Add a new Check”. You’ll get a screen that asks for information about the check
Fill it out and click “Next”.
- There it will ask you to input the URL that’s to be monitored and the time interval at which it is monitored. (suggested interval time: 5 mins)

After this, you will see many unfamiliar elements on the main dashboard appearing such as the status of the website, its average latency, and monitoring log. It will alert you on your registered email if any of your sites or services go down.

If you want the public to see if the services are operational or not, you can create a Public Status page. This can be easily made in the “Public Status” section in the side panel. Simply:

Enable the public status page
Click on the “Services” tab on the same page to select the services you want to display to the public.

If you want to add new users to the site, where they can also look at the data received, they can be added through the “Contacts” section in the side panel.

Click on “add new user”
Input the email address and mobile number
Click whether Email or SMS is the more preferred way to be notified.

To see the monitor logs and service statistics, you can access this in the Reports section in the side panel.

Click on “show log” on one of the categories i.e. error, undefined, warning, good to see the logs.

Concluding thoughts

With that, your AppBeat service set-up is completed and you can successfully answer the question “Is my service alive?”. Additionally, for more information regarding this topic, check out Hacker News, it's a solid information resource and we highly recommend taking a look. Stay tuned for our next few blog posts which will talk more about service vital signs and notifications.

Comments

A UX designer's toolkit

6/2/2016

Comments

While the bulk of the credit when creating a product goes to the vision and innovation of the designer, the execution or the translation of the vision to a palpable product is equally as important. For years, Adobe products such as Photoshop and Illustrator have dominated the design-driven market. However, with the demand for designers rising and the outlets and opportunities expanding into different industries, the number of tools at a designer's disposal are also increasing.