Create Beautiful Animation for iOS & Android Using Lottie

Create Beautiful Animation for iOS & Android Using Lottie

Lottie is an iOS, Android, and React Native library developed by Airbnb that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images. Animations from After Effects are exported using Bodymovin, a plugin for After Effects that can exports the animations as JSON file. Check out Lottie’s website to know more.

Here are some examples of what can be achieved using Lottie:

Get Lottie here:

Lottie for iOS
Lottie for Android
Lottie for React Native

Need some example on how to use Lottie? Check out this video tutorial by Brian Advent:

Lists of Uber for X

Lists of Uber for X

What the heck is Uber for X?

Uber for X is the idea of using an Uber-like platform to connect consumers with services. Uber connects consumers with taxis. Using the same model you could potentially connect consumers with all sorts of services. Basically, Uber for X can be anything. Try replacing X with some other services. Let’s take laundry for example. When we replace X with laundry, it becomes Uber for laundry. Now, let’s try another service. I picked car repair service. Then, it becomes Uber for mechanics. You get the idea, right?

Uber for X
Uber for X (image courtesy of xeler8.com)

So here’s a list of Uber for X that I found in Quora. All credit goes to Casey Kerr from his original answer.

Awesome Uber-for-X apps:
Sprig, Munchery, SpoonRocket, Push for Pizza: Uber for food.
Foxtrot, Minibar: Uber for alcohol.
Hotel Tonight: Uber for last minute hotels.
YPlan: Uber for last minute events.
Nimbl: Uber for cash delivery.
Homejoy, Handybook, Exec (acquired by Handybook): Uber for home cleaning.
Vatler, ZIRX: Uber for valet-ing your car.
Plowz and Mowz: Uber for lawn mowing.
Lyft: Uber with fist bumps and pink mustaches.
Postmates: Uber for courier services.
BloomThat, Proflowers, Floristnow: Uber for flowers.
SixDoors: Uber for flowers and gifts.
Icecream.io: Uber for ice cream.
Eaze, Canary, Meadow: Uber for marijuana delivery
Flywheel, MyTaxi, Hailo, Taxi Hawk : Uber for taxis.
Zeel, Unwind, Soothe: Uber for massages.
Tablelist, BottlesTonight: Uber for nightclubs (bottle service).
Instacart: Uber for grocery shopping.
FlyCleaners, Wash.io, Cleanly: Uber for laundry.
Boxed: Uber for bulked goods (Costco).
KallDoc. A Doctor at Your Door at the Tap of an App.
Medicast, Doctor On Demand, Ringadoc, dVisit: Uber for doctors (in-home).
Grindr, Mister: Uber for gay “dates.”
Pure: Uber for heterosexual “dates.”
Swan, StyleBee: Uber for beauty services (hair, makeup).
Shyp: Uber for shipping.
iCracked: Uber for iPhone repair.
Cambly: Uber for language tutoring.
Dashlocker: Uber for dry cleaning.
Preo, Coaster: Uber for drinks at bars.
Swifto, Fettch, Urban Leash: Uber for Dog Walking.
Tennis Buddy: Uber for finding tennis partners.
Road Angels: Uber for roadside assistance.
Trucker Path: Uber for truck drivers.
Fitmob: Uber for group fitness
YourMechanic: Uber for mechanics.
HouseCall: Uber for home services professionals.
LoungeBuddy: Uber for hotel lounges.

Companies that didn’t make it:
Rewinery (shut down): Uber for wine delivery.
Cherry (shut down): Uber for car washes.
BlackJet (shut down temporarily): Uber for private jets.
Tutorspree (shut down): Uber for tutoring.
Washly: Uber for car washes.

Uber-for-X (website or in beta, no app):
Seven Sitters: Uber for babysitting.
https://www.upcounsel.com, LawTrades : Uber for lawyers
GladlyDo: Uber for chores.
Spyke: Uber for motorcycles.
StudyHall: Uber for tutors.
Handii: Uber for handyman.
GotIt!: Uber for homework.
Flinja: Uber for work.
Geekatoo: Uber for Tech Support.
Cohealo: Uber for medical devices.
Plow.me:: Uber for snow plows.
RidePal: Uber for commuting.
Bandwagon, Corral: Uber for airport rides.

Sources:

Original answer by Casey Kerr on Quora
Uber for X definitions from Quora

OctoTree – Browser Extension for GitHub & GitLab

OctoTree – Browser Extension for GitHub & GitLab

Today while listening on Adventures in Angular podcast, I heard they mention this awesome and useful browser plugin called OctoTree created by Buu Nguyen. OctoTree is an extension / add-on for Google Chrome, Firefox, and Opera for viewing code tree on GitHub and GitLab. Safari user can also install and use this extension but since it is not available in the Safari gallery, you can use the prebuilt packages and drag it on to Safari to install it.

OctoTree Google Chrome Extension
OctoTree Google Chrome Extension

After installing this extension, you can navigate inside folders and view source codes easily in GitHub and GitLab. This extension also enable us to download the source code files directly with just a click. If you are someone who frequently browse GitHub or GitLab, this extension is a must have.

OctoTree in Action
OctoTree in Action

 

Source:

Adventures in Angular

JavaScript Object VS JSON

JavaScript Object VS JSON

So what is JSON?

JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. It is based on a subset of the JavaScript Programming Language, Standard ECMA-262 3rd Edition – December 1999. JSON is a text format that is completely language independent but uses conventions that are familiar to programmers of the C-family of languages, including C, C++, C#, Java, JavaScript, Perl, Python, and many others. These properties make JSON an ideal data-interchange language.

Then, what is JavaScript Object?

JavaScript is designed on a simple object-based paradigm. An object is a collection of properties, and a property is an association between a name (or key) and a value. A property’s value can be a function, in which case the property is known as a method. In addition to objects that are predefined in the browser, you can define your own objects. This chapter describes how to use objects, properties, functions, and methods, and how to create your own objects.

Whattt??? So what’s the difference between them?

JSON is a data interchange format. It’s a standard which describes how ordered lists and unordered maps, strings booleans and numbers can be represented in a string. Just like XML and YAML is a way to pass structured information between languages, JSON is the same. A JavaScript object on the other hand is a physical type. Just like a PHP array, a C++ class/ struct, a JavaScript object is an type internal to JavaScript.

Let’s create a story. You went to IKEA and found a table you like. However, the only stock they have for the table is the display unit which is already assembled.

IKEA Table
IKEA Table == JavaScript Object

After you agreed to buy the display unit and paid the amount due, you need to disassemble the table into several smaller parts because it won’t fit into your car. This happens the same to the JavaScript object. Other languages cannot understand JavaScript object. In order to make them interchangeable, you have to convert it to interchangeable format so that the data can be understood by both participating programming languages. So you must turn the JavaScript object into a JSON. How? You can do this with JSON.stringify(). In other words, JavaScript object –stringify–> JSON.

Let’s JSON.stringify the object (ikeaTable):

Here is table in JSON format after it has been stringified:

 

Well the story doesn’t end there. Now that you have brought the IKEA table home, you need to assemble it before it can be used. Same goes to the JSON string. Now that you have receive the data in JSON format, and now you want to work with the data in JavaScript, you need to convert it back from JSON format to JavaScript object. How? You can do this with JSON.parse(). In other words, JSON –parse–> JavaScript object.

Let’s JSON.parse the JSON (table):

Here is tableObject in JavaScript object format after it has been parsed:

 

NOTE: JSON cannot represent functions or dates. If you attempt to stringify an object with a function member, the function will be omitted from the JSON representation. A date will be converted to a string. See example below:

NOTE 2: If you’re using jQuery, you can call jQuery.parseJSON(), which will use JSON.parse()under the hood if it’s supported and will otherwise fallback to a custom implementation to parse the input.

 

References:

Matt answer in Stack Overflow

Mozilla Developer Network

JSON.org

JavaScript – Create, Read, and Modify JavaScript Object

JavaScript – Create, Read, and Modify JavaScript Object

Create JavaScript Object

JavaScript object can be created as follows:

 

Read JavaScript Object

To access the data inside the object, we can do like so:

We can also do it the other way:

 

Modify JavaScript Object

We can modify the object too. Let say we want to change the address of this person object. We can do as follows:

Or alternatively:

Either way, the result will be the same.

JavaScript – Scripts for Displaying Output to DOM

JavaScript – Scripts for Displaying Output to DOM

Here is a script from http://bit.ly/ObjAndProto to demonstrate JavaScript to DOM. Invoking the ‘display’ function will output anything passed to the function to the DOM.