Introducing Learn Talks — Awesome conference and meetup talks

Issue #269 Original post https://medium.com/swlh/introducing-learn-talks-awesome-conference-and-meetup-talks-e97c8cf7e0f Product Hunt https://www.producthunt.com/posts/learn-talks Hi, it’s Khoa here. I’m so glad to finally launch LearnTalks, in order to help others and myself to catch up with new conference and meetup talks. Being one who is extremely passionate about making things and writing , I also love to learn about every new thing in tech. Tech moves so fast, what we learn today may be deprecated very soon, and only continuous learning can keep us move forward....

May 23, 2019 · 2 min · 362 words · Khoa

How to add app icons and splash screens to a React Native app in staging and production

Issue #268 React Native was designed to be “learn once, write anywhere,” and it is usually used to build cross platform apps for iOS and Android. And for each app that we build, there are times we need to reuse the same code, build and tweak it a bit to make it work for different environments. For example, we might need multiple skins, themes, a free and paid version, or more often different staging and production environments....

May 23, 2019 · 12 min · 2512 words · Khoa

How to convert your Xcode plugins to Xcode extensions

Issue #267 Original post https://medium.freecodecamp.org/how-to-convert-your-xcode-plugins-to-xcode-extensions-ac90f32ae0e3 Xcode is an indispensable IDE for iOS and macOS developers. From the early days, the ability to build and install custom plugins had given us a huge boost in productivity. It was not long before Apple introduced Xcode extension due to privacy concerns. I have built a few Xcode plugins and extensions like XcodeWay, XcodeColorSense, XcodeColorSense2, and Xmas. It was a rewarding experience. I learned a lot, and the productivity I gained was considerable....

May 23, 2019 · 20 min · 4240 words · Khoa

Get to know different JavaScript environments in React Native

Issue #266 Original post https://medium.freecodecamp.org/get-to-know-different-javascript-environments-in-react-native-4951c15d61f5 React Native can be very easy to get started with, and then at some point problems occur and we need to dive deep into it. The other day we had a strange bug that was only occurring in production build, and in iOS only. A long backtrace in the app revealed that it was due to Date constructor failure. const date = new Date("2019-01-18 12:00:00") This returns the correct Date object in debug mode, but yields Invalid Date in release....

May 23, 2019 · 5 min · 899 words · Khoa

How to Make Linear Gradient View with Bridging in React Native

Issue #264 Original post https://medium.com/react-native-training/react-native-bridging-how-to-make-linear-gradient-view-83c3805373b7 React Native lets us build mobile apps using only Javascript. It works by providing a common interface that talks to native iOS and Android components. There are enough essentials components to get started, but the cooler thing is that it is easy to build our own, hence we are not limited by React Native. In this post we will implement a linear gradient view, which is not supported by default in React Native, using native UI component, particularly CAGradientLayer in iOS and GradientDrawable in Android....

May 23, 2019 · 11 min · 2134 words · Khoa

How to dismiss keyboard with react-navigation in React Native apps

Issue #263 Original post https://medium.com/react-native-training/how-to-dismiss-keyboard-with-react-navigation-in-react-native-apps-4b987bbfdc48 Showing and dismiss keyboard seems like a trivial thing to do in mobile apps, but it can be tricky in automatically dismissing it when it comes together with react-navigation and modal presentation. At least that’s according to my initial assumption. This article aims to detail what I have learned about keyboard handling and how to avoid extra tap when dealing with TextInput There will also be lots of code spelunking, thanks to the all the libraries being open source....

May 23, 2019 · 8 min · 1550 words · Khoa

How to use Firebase SDK with Firestore for React Native

Issue #260 Original post https://medium.com/react-native-training/firebase-sdk-with-firestore-for-react-native-apps-in-2018-aa89a67d6934 At Firebase Dev Summit 2017, Google introduced Firestore as fully-managed NoSQL document database for mobile and web app development. Compared to Firebase Realtime Database, it has better querying and more structured data, together with ease manual fetching of data. The new structure of collection and document is probably the eye catching, this makes data more intuitive to users and query a breeze. From https://firebase.googleblog.com/2017/10/cloud-firestore-for-rtdb-developers.html In this post, I will show how to setup Firebase Cloud Firestore in React Native apps for both iOS and Android through, of course, some pain points....

May 23, 2019 · 7 min · 1337 words · Khoa

How to position element at the bottom of the screen using Flexbox in React Native

Issue #259 Original post https://medium.com/react-native-training/position-element-at-the-bottom-of-the-screen-using-flexbox-in-react-native-a00b3790ca42 React Native uses Yoga to achieve Flexbox style layout, which helps us set up layout in a declarative and easy way. The Flexible Box Module, usually referred to as flexbox, was designed as a one-dimensional layout model, and as a method that could offer space distribution between items in an interface and powerful alignment capabilities As someone who worked with Auto Layout in iOS and Constrain Layout in Android, I sometimes find it difficult to work with Flexbox in React Native....

May 23, 2019 · 7 min · 1364 words · Khoa

Learn iOS best practices by building a simple recipes app

Issue #258 I started iOS development when iOS 7 had been announced. And I have learned a bit, through working, advice from colleagues and the iOS community. In this article, I’d like to share a lot of good practices by taking the example of a simple recipes app. The source code is at GitHub Recipes. The app is a traditional master detail application that showcases a list of recipes together with their detailed information....

May 23, 2019 · 28 min · 5880 words · Khoa

How to setup Android projects

Issue #257 checkstyle (Java) http://checkstyle.sourceforge.net/ https://github.com/checkstyle/checkstyle Checkstyle is a development tool to help programmers write Java code that adheres to a coding standard. It automates the process of checking Java code to spare humans of this boring (but important) task. This makes it ideal for projects that want to enforce a coding standard. app/build.gradle apply plugin: 'checkstyle' task checkstyle(type: Checkstyle) { description 'Check code standard' group 'verification' configFile file('$project.rootDir/tools/checkstyle.xml') source 'src' include '**/*....

May 23, 2019 · 5 min · 1022 words · Khoa

How to structure your project and manage static resources in React Native

Issue #256 Original post https://medium.freecodecamp.org/how-to-structure-your-project-and-manage-static-resources-in-react-native-6f4cfc947d92 React and React Native are just frameworks, and they do not dictate how we should structure our projects. It all depends on your personal taste and the project you’re working on. In this post, we will go through how to structure a project and how to manage local assets. This of course is not written in stone, and you are free to apply only the pieces that suit you....

May 23, 2019 · 14 min · 2870 words · Khoa

How to overlay view on another view in React Native

Issue #254 Original post https://stackoverflow.com/a/54108708/1418457 Make our own convenient OverlayContainer. The trick is to use absolute with 100% size // @flow import React from 'react' import { View, StyleSheet } from 'react-native' type Props = { behind: React.Component, front: React.Component, under: React.Component } // Show something on top of other export default class OverlayContainer extends React.Component<Props> { render() { const { behind, front, under } = this.props return ( <View style={styles....

May 22, 2019 · 1 min · 128 words · Khoa

How to remove Cartography in iOS

Issue #252 Read more https://medium.com/flawless-app-stories/how-to-make-auto-layout-more-convenient-in-ios-df3b42fed37f Description This is a script to remove Cartography, and use plain NSLayoutAnchor syntax. Use Constraint.on() from Sugar. It will change all .swift files recursively under provided folder. Constraint.on( logoImageView.widthAnchor.constraint(equalToConstant: 74), view1.leftAnchor.constraint(equalTo: view2.leftAnchor, constant: 20), ) Features Parse recursively Parse a single file Parse each constrain block separately Handle ==, >=, <= Handle center, edges Infer indentation Handle relation with other item Handle relation with constant Handle multiplier Auto import Sugar Infer superView Prepare Install tool if needed...

May 21, 2019 · 5 min · 942 words · Khoa

How to sort strings with number in Javascript

Issue #251 function sort() { const string = ` - Favorite WWDC 2017 sessions https://github.com/onmyway133/blog/issues/56 - Favorite WWDC 2018 sessions https://github.com/onmyway133/blog/issues/245 - How to do clustering with Google Maps in iOS https://github.com/onmyway133/blog/issues/191 ` const lines = string .split('\n') .filter((line) => { return line.length > 0 }) .map((line) => { let parts = line.trimEnd().split(' ') let lastPart = parts[parts.length-1] let number = lastPart.replace('https://github.com/onmyway133/blog/issues/', '') return { line, number: parseInt(number) } }) lines....

May 21, 2019 · 1 min · 99 words · Khoa

How to move tab bar icons down in iOS

Issue #250 UITabBarItem subclasses from UIBarItem which has imageInsets. We need both top and bottom to avoid shrinking viewController1.tabBarItem.imageInsets = UIEdgeInsets(top: 10, left: 0, bottom: -10, right: 0)

May 21, 2019 · 1 min · 28 words · Khoa

How to test LaunchScreen in iOS

Issue #249 Making splash screen with LaunchScreen.storyboard is now the default way to do in iOS. Testing it with UITests is a bit tricky as this screen is showed the system, and if we test that, we are just testing the system. What we should test is the content we put in the LaunchScreen storyboard. Is it showing correctly on different screen sizes? Is it missing any texts or images?...

May 21, 2019 · 1 min · 134 words · Khoa

How to use remote theme for GitHub Pages

Issue #248 Visit https://github.com/onmyway133/onmyway133.github.io https://github.blog/2017-11-29-use-any-theme-with-github-pages/ Starting today, you can use any of the hundreds of community-curated themes on GitHub.com. To build your site with any public, GitHub-hosted theme, add the following to your site’s _config.yml file: remote_theme: owner/name Browse themes https://github.com/topics/jekyll-theme Example config file with navigation https://github.com/daviddarnes/alembic/blob/master/_config.yml Link to a new page Each page must have a description. Link must point to generated html file Apps: /apps.html Do not specify layout: default to keep overall theme...

May 21, 2019 · 1 min · 82 words · Khoa

How to enable black mode in Google Maps in iOS

Issue #246 Use GMSMapStyle https://developers.google.com/maps/documentation/android-sdk/styling Export styling json from https://mapstyle.withgoogle.com/ let mapStyleUrl = Bundle.main.url(forResource: "mapStyle", withExtension: "json")! mapView.mapStyle = try? GMSMapStyle(contentsOfFileURL: mapStyleUrl) To change overall color, search for mostly "elementType": "geometry" and "featureType": "water" { "elementType": "geometry", "stylers": [ { "color": "#424242" } ] } { "featureType": "water", "elementType": "geometry", "stylers": [ { "color": "#2E2E2E" } ] }

May 20, 2019 · 1 min · 58 words · Khoa

Favorite WWDC 2018 sessions

Issue #245 Original post https://medium.com/fantageek/my-favourite-wwdc-2018-sessions-363d3fc9c9d5 Favourite WWDC 2018 sessions This year I failed the lottery ticket to WWDC, and I also missed the keynote live stream because I was sailing on the Christian Radich outside Oslo fjord that day. Luckily all the videos are available on Apple Developer site very shortly, and we can watch them now on Chrome or the unofficial WWDC app on macOS. I recommend the WWDC macOS app as it allows to mark favourites and filter, also offers the ability to adjust play speed to 1....

May 19, 2019 · 9 min · 1767 words · Khoa

How to get running window informations in macOS

Issue #243 From https://developer.apple.com/documentation/coregraphics/1455137-cgwindowlistcopywindowinfo Generates and returns information about the selected windows in the current user session. struct MyWindowInfo { let frame: CGRect let name: String let pid: Int let number: Int init?(json: [String: Any]) { guard let pid = json["kCGWindowOwnerPID"] as? Int else { return nil } guard let name = json["kCGWindowOwnerName"] as? String else { return nil } guard let rect = json["kCGWindowBounds"] as? [String: Any] else { return nil } guard let x = rect["X"] as?...

May 16, 2019 · 1 min · 174 words · Khoa