Leo Notes

Saturday, April 28, 2018

Ionic Basic

Install Ionic
sudo npm install -g ionic
ionic start
ionic start myApp tabs
ionic start MyIonicProject tutorial

Execute in Browser
ionic serve
ionic serve -l -c -s

Execute in iPhone
ionic cordova build ios --prod
open the .xcodeproj file in platforms/ios/ in Xcode
Xcode > Project > General > Signing > Team > Select Team
Xcode > Project > General > Identity > Bundle Identifier > io.ionic.starter.ngtszwing
Xcode > RUN

Trust certificate in Device
Open the ‘Settings’ app on your iOS device
Go to 'General > Device Management’. You’ll see the email address associated with the Apple ID or Apple Developer account you used to code sign your app.
Tap the email address
Tap ‘Trust ’:

Execute in Terminal
ionic cordova run ios --device(not work)

Execute in Simulator
ionic cordova emulate --list
ionic cordova emulate ios --target "iPhone-X, 11.2"

Ionic Sample
https://github.com/ionic-team
https://github.com/ionic-team/ionic-preview-app

Git
git clone https://github.com/xxx.git
Install Libraries
npm install
Intall Plugins and Platforms
ionic state restore

Cordova

Install cordova

https://cordova.apache.org/docs/en/latest/guide/cli/index.html

Install iOS-deploy
sudo npm install --global --unsafe-perm ios-deploysudo npm install -g cordova

Create the App
cordova create hello com.example.hello HelloWorld
cd hello
cordova platform add ios
cordova platform add android
cordova platform ls
cordova requirements
cordova build
cordova emulate android
cordova emulate ios

Console -> iPhoneX

Reference:
https://www.tutorialspoint.com/cordova/cordova_best_practices.htm
https://cordova.apache.org/docs/en/latest/

Mobile Development Tools

Install Java SDK 1.8

java -version

echo $JAVA_HOME

Install Android Studio

Install Android SDK

Android Studio > Preferences > Appearance & Behavior > System Settings > Android SDK > Android 8.0 (Oreo 26)

Install Xcode

Install Xcode Command Line Tools

https://developer.apple.com/download/more/

Install iOS simulator > Xcode > Preferences > Components > iOS 11.2 Simulator

Install Account & Certificates > Xcode > Preferences > Accounts > + > Manage Certificates

Install npm (5.3)

https://www.npmjs.com/get-npm

Install Gradle

brew install gradle

Install Homebrew

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Remove iOS Simulator
/Library/Developer/CoreSimulator/Profiles/Runtimes
sudo rm -rf "iOS 10.3.simruntime"

Thursday, July 6, 2017

CSS Sprites

Generator
http://spritegen.website-performance.org/

https://css-tricks.com/css-sprites-with-inline-images/
Clip: rect(Top, Right, Bottom, Left)
Negative Top, left values - move the image back to the standard position (just use the top-left corner with the negative value)
Top, Left, Bottom, Right (like X, Y coordinates), just manual shift the position
Div with relative position keep the image as regular flow