Forem: Khoa Pham

Craft stunning code and image screenshot for free

Khoa Pham — Sun, 25 Feb 2024 08:58:50 +0000

Do you know you can craft stunning code and image screenshots with this 100% free Screenshot tool https://indiegoodies.com/screenshot

🌟✨ Introducing Screenshot! ✨🌟

Looking for a simple way to showcase your code in all its glory? Say hello to Screenshot, your new go-to web tool that turns code into eye-catching masterpieces - and it's absolutely FREE!

With Screenshot, you're all set to:

🎨 Elevate your code with vibrant syntax highlighting for clarity and aesthetics.
🌈 Choose from stunning gradient backgrounds that make your snippets pop.
⚙️ Fully customize your screenshots, ensuring your code looks as unique as it is.
Perfect for flaunting your coding projects on social media, enhancing your documentation, or just admiring your programming prowess, Screenshot is here to make your code visually unforgettable.

Dive in now and let your code shine brighter than ever! 🚀

I visualized 8 lessons from 1 year doing indie development

Khoa Pham — Thu, 14 Apr 2022 18:31:46 +0000

It's been a year since I returned to Twitter and started making apps seriously.

What I've got besides 💰💸? Lots of new friends and valuable lessons along the way 🥰

It all started with a change in mindset ⚡️

Therefore I've made these 8 visuals to share what I've learned

Take risk. If you're so afraid to make mistake, you've already made your 1st mistake. When you win, you win. When you fail, you've learned yourself a lesson.

Build in public

Don't start with an idea and build in the dark.
Build in public, validate and reiterate your ideas, together with your audience.

Just do it

There are no unique ideas. It's all about execution.
When in doubt, start small, start many.

The maker mindset

When people complain, you realize the problem. Make a solution that heals their pain.

In the community

Twitter is all about the community, the relation.

Don't shout to the void. Make friends. Interact with people. Grow together.

Give, then ask.

To give is to receive.

Build. Fail. Learn.

Learning without doing is a waste of time. Only learning is a sign of procrastination.

Build something. You will learn a lot along the way. All the practical lessons that you can't learn from books.

You may be able to do anything, but you cannot do everything

Time is a limited resource.
Successful people say no most of the time.
Spend your time on things that truly matter

Thanks for reading. If you love this sharing, please say hi on Twitter as well https://twitter.com/onmyway133

My year in review 2020

Khoa Pham — Thu, 17 Dec 2020 05:25:02 +0000

I remember this time last year in December 2019, I spent almost every single bit of my free time on Puma because I want a Swift friendly version of fastlane that suits my need and leverages Swift 5 features.

Here's my review of my work in year 2020.

Blogging

I started blogging on GitHub issue, starting from Issue 1 Hello world, again, now I have over 670 issues, which were generated into blog posts at my website https://onmyway133.com/

🍏 I used to use onmyway133.github.io domain, but then it feels right to have my own domain
🍎 I used to write a lot at Medium https://medium.com/@onmyway133 for many publications and my own Fantageek publication, I have got 2.3k followers with around 60k views per month
🍓 I list my most favorite articles, usually articles that I spent most time polishing here https://onmyway133.com/writing/

One of my very first articles published on Flawless iOS publication was A better way to update UICollectionView data in Swift with diff framework gets the highest traffic ever, and was rated most trending Swift article for 2018.

My one of few articles published in Medium in 2019 was How to make Auto Layout more convenient in iOS got featured in iOS Dev Weekly, and used to promote my library EasyAnchor

My big article this year is How to test push notifications in simulator and production iOS apps, which was also featured on iOS Dev Weekly, used to summary the changes in push notifications from iOS 7 to iOS 14, and to promote my push notification testing tool Push Hero

My blog at https://onmyway133.com/ has around 15k views each month. I can write proper, lengthy articles to get more views but I don't want to. I want to write blog about solutions I have found, so that my future self can benefit from it without searching too much.

Open source

I have done quite a lot of open source, you can view here Open source. These have helped tons of apps, with 45k+ apps touched, and 3.4m+ downloads as stats on CocoaPods

My 4 libraries this year get inspired by SwiftUI and property wrappers

🍌 Spek leverages property wrapper to provide Spec syntax, similar to Quick, but simpler and can generate tests
🍈 Micro imitates SwiftUI State and ForEach syntax but use UICollectionView with diffable datasource, powered by my another library DeepDiff
🍑 EasySwiftUI contains many extensions and useful modifier that I use in my SwiftUI apps
🥝 FontAwesomeSwiftUI I was tired of using bitmap with dark and light variants, and I can't use SFSymbols as I want to support macOS 10.15, so FontAwesome is a perfect choice. I couldn't find library that has support for SwiftUI and easy to use with Swift Package Manager for iOS and macOS, so I made one

Besides, for all my libraries EasyStash, EasyAnchor, EasyTheme, EasyClosure, ... I have now support Swift Package Manager, which is nicer to integrate. Thank you CocoaPods for all these years.

Lately, I open source awesome-swiftui which I curate all SwiftUI resources, articles and libraries that I find useful for my apps

❤️ One day, I got sponsor from my dear friend Chris for my GitHub open source. Chris is my open source idol who ignited my desire for open source. No one loves open source more than Chris

This means the world to me! If everyone was as lucky as me to just get to inspire one person, the world would be an amazing place. Let's make it amazing together! Keep rocking because you are amazing & you can bring out the best in others! ❤️ https://t.co/pJx9obWH7I
— Christoffer Winterkvist (@zenangst) September 25, 2020

Apps

I started making some apps late last year, first I published them on Gumroad, but it didn't feel right, and then I published all my apps on AppStore. I like sandboxed apps from AppStore because they limit what the apps can do.

Apps without Twitter account and landing page seem off, so in May I started revamping my websites, and I wrote my apps page firstly with pure HTML and CSS, then I rewrote in React, because I like React and Javascript.

Notably, early 2020 I made Push Hero, PastePal then I made a complete overhaul lately with more features, thanks to all the feedback. I also took the time to revamp landing pages a lot, you can check landing pages for Push Hero for example because I have a white label solution

Learn how I did white label landing page using React

I have a lot of ideas, but very little time.

Learning

Coding can be done, but design is never finished. When making apps, I feel like I'm not certain at some design decisions and no matter how I landed with some designs, I didn't feel happy. Then I took some design courses and books.

Below is my tweet that I share some design resources that I found useful

Developer with design skill is like tiger with wings. Here are my recommended courses

The UI Design Bootcamp by @designcoursecom a massive UI design course teaches you to build beautiful and well-functioning user interfaces using HTML and CSS.https://t.co/vfusXamuhJ
— Khoa 🔥 (@onmyway133) October 25, 2020

Listening

I used to listen to tech podcasts, then I was bored. Discussions like whether to use MVVM vs MVC, SwiftUI vs Catalyst, Swift vs Objective don't interest me anymore.

If you ask me for choices, my default answer will be NO. Those who are super passionate about their idea will just ignore my advice and do it anyway.

Then I listen to indie and product development podcasts, it was inspiring. Once I got the mindset, they also became boring.
Now I listen to mostly books on Storytel, some books about habit and making time really make my days.

I came back to Twitter early this year after quitting it for a while because I got enough of all negative and nonsense political debates. But then I found that I can decide who I can follow and what content I want to view. Then I started organizing List, making my own Chrome extensions to automate things and control what I want to view. I have followed quite many indie developers and great product people, I've learnt a lot. The downside is I'm overwhelmingly inspired, I can't sleep.

I try to tweet more about what I've learned, sharing articles that I have written. For example here I share about how to gain product idea

How to gain product ideas?

1) Scratch your own itch. If you don't have any itch to scratch, stop here. This is awkward. Go travelling. Go exploring the world. The world always has problems and needs solution. pic.twitter.com/07gIoJfJet
— Khoa 🔥 (@onmyway133) November 22, 2020

WWDC Together

Notable this year is the website I make WWDC Together as a place for developers like us to hangout and watch videos together. Each video acts like its own chat room, you can also create private chatroom. My colleagues use this and we watched WWDC together with coke and pizza, it was a lot of fun.

I'm excited to launch @wwdctogether as a free place to watch and hangout during WWDC. We can now view upcoming and previous sessions via modern playback, with a chatroom for each session. Hope this provides a similar WWDC vibe during this hard time ❤️🔥https://t.co/0SgGnUAqst pic.twitter.com/f9H9wDi62P
— Khoa 🔥 (@onmyway133) June 17, 2020

I had the idea like 2 weeks before WWDC, so I had to make it quick. Working with React is fun to me, it is like playing video game.

I was lucky to be asked by John to write a guest post Behind the scenes of WWDC Together with Khoa Pham on his website.

It was also mentioned by Paul in his WWDC wrap up WWDC20: Wrap up and recommended talks

One area that absolutely flourished this year was community organization. Sites like https://wwdcwatch.party and https://wwdctogether.com took a huge amount of work to organize, but meant that people had the chance to have some interaction – had the chance to actually chat about WWDC and share their excitement. I’m really grateful to Michie, Khoa, and other community organizers for making this happen.

I also got to share about in in a well known Norwegian tech website orske WWDC Together lar oss se på Apples konferanse sammen

Speaking

In 2019, I made several meetup talks, and one pre conf talk for Mobile Era conf

An overview of what we as mobile developers have for #MachineLearning in the session by @onmyway133 at @mobileeraconf Community Evening pic.twitter.com/bgcE3huGkI
— Mobile Meetup Oslo (@mobileoslo) November 6, 2019

In 2020, I'm lucky to be invited to talk in some events

🍅 WWDC Watch Party

Thank you @johnestropia @thesunshinejr @onmyway133 for sharing your experience to the community about Open Source Life and thank you for making our dev life better because of your projects! You are all awesome! ❤️#WWDCWatchParty #WWDC20 pic.twitter.com/tfsX7PtKcO
— wwdcwatchparty (@wwdcwatchparty) June 28, 2020

I'm happy to be invited by Michie to talk along side with John and Łukasz, whom I really admire for their awesome open source contribution, to talk about how to start and contribute to open source

🥦 Bitrise webminar

During the 4th installment of our BUG #webinar series, our main focus was #iOSDev and #WWDC20. Let's recap what we discussed with our guests, @StuffMC, @axbotkin, @Moatazeldebsy, and @onmyway133 in our freshest blog post! ✨🔥https://t.co/rrA8cyYXus
— Bitrise (@bitrise) July 15, 2020

I shared my thoughts about my favorites at WWDC and the future ahead

🍇 Contributing.today

During Hacktoberfest 2020, I was contacted by my friend Maxim to share about open source

I had a pleasure to interview #OSS contributors from Norway @DrMowinckels and @onmyway133 for CONTRIBUTING project. October 2nd we kickoff #Hacktoberfest by online meetup about getting started with Open Source at 16:00 CEST. Join our sessions & workshops: https://t.co/hKkMKEOJJe https://t.co/1yr2AhQ4B6
— Maxim Salnikov (@webmaxru) October 1, 2020

Work

I'm happy to continue another awesome year at Shortcut and DNB, where I have awesome and super nice colleagues. I 've made lots of friends who I can talk with, who invited me to play badminton, tennis, football, swimming, hiking. Why didn't we meet earlier?

I was lucky to attend a workshop hosted by John Sundell at work, I learned a lot

Ran my first ever large-scale remote workshop today, with over 25 participants, 10 different ongoing video calls for pair programming, and a ton of live coding 😀 Was so much fun!

Thanks a lot to the wonderful team at @shortcut_no for inviting me 😊 https://t.co/CE4P8Slo1G
— John Sundell (@johnsundell) August 27, 2020

Life

Thanks for a memorable year, despite all the lockdown. And remember, balance work and life. You don't need to be super rich to be happy. Having lots of money in the bank while living alone is not fun at all.

Another year is coming to an end. When looking back, do you miss the time you didn't spend with your friends and family, or do you miss the time you didn't get to do your work?

May your code continue to compile 🙏

How to make white label React app for landing pages

Khoa Pham — Thu, 14 May 2020 04:26:50 +0000

A good landing page is one of the most crucial part of a successful launch. Recently I started creating landing pages for my apps, I was lazy that I ended creating a white label React app as a landing template and then write a script to build multiple similar pages.

Here are a few examples, at first the pages share same look and feel, but we can add more configuration parameters later on. The cool thing with this approach is fixing bugs and adding features become easier, as they will all be deployed with the generator script.

Here are how it looks in my apps PastePal and PushHero, look at how the footer parts are so consistent.

Create a landing page in pure html and javascript

The first version that I built is with pure html and javascript. It has a lot of boilerplate and I need to deal with Webpack eventually to obfuscate my code.

const cards = Array.from(apps).map((app) => {
    const a = document.createElement('a')
    container.appendChild(a)

    const card = document.createElement('div')
    card.className = 'card'
    a.appendChild(card)

    // top
    const imageContainer = document.createElement('div')
    imageContainer.className = 'image-container'
    card.appendChild(imageContainer)
    if (app.background !== undefined) {
        imageContainer.style.backgroundColor = app.background
    } else {
        imageContainer.style.backgroundColor = 'rgba(200, 200, 200, 1.0)'
    }

    const image = document.createElement('img')
    image.src = `../${app.slug}/icon.png`
    imageContainer.appendChild(image)

Since they are in pure html and javascript, everyone can just open browser and view source code, which is not ideal, so I need to fiddle with Webpack and other uglify and minimize tools to obfuscate the code, like How to use webpack to bundle html css js

npm init
npm install webpack webpack-cli --save-dev
npm install babel-minify-webpack-plugin --save-dev
npm install html-webpack-plugin --save-dev

const MinifyPlugin = require('babel-minify-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: "./index.js",
    mode: 'production',
    output: {
        filename: "./index.js"
    },
    plugins: [
        new MinifyPlugin(),
        new HtmlWebpackPlugin({
            template: 'index.html',
            filename: 'index.html',
            minify: {
                collapseWhitespace: true
            }
        })
    ]
}

And with external css sheets, finding and renaming class list names take some time.

Create a landing page in React

I use create-react-app to generate my React app as it sets up JSX, Babel, Webpack, hot reloading and development server for me.

Inline css

I like js, css and html be part of the same component file, so I prefer inline css. I tried styled-components before but then I found emotion to be much easier to use and close to css. I also don't like declaring unnecessary local variables style in styled-components.

Here is a good comparison between the 2 styled-components-vs-emotion

// styled-components
// CSS syntax in tagged template literal
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`
render(<Title>Hiya!</Title>)

// Object syntax
const button = styled.button({
  fontSize: '1.5em',
  textAlign: 'center',
  color: 'palevioletred'
});

// emotion
// CSS syntax in tagged template literal
render(
  <h1
    className={css`
      font-size: 1.5em;
      text-align: center;
      color: palevioletred;
    `}
  >
    Hiya!
  </h1>
)

// Object syntax
const titleStyles = css({
  fontSize: '1.5em',
  textAlign: 'center',
  color: 'palevioletred'
})

render(<h1 className={titleStyles}>Hiya!</h1>)

Use emotion for inline css

I detail here How to use emotion for inline css in React

Emotion has core and styled styles. I usually use the css inline syntax, so I can just install the core

npm i @emotion/core

Note that we have to declare jsx directive at the top of every file.

// this comment tells babel to convert jsx to calls to a function called jsx instead of React.createElement
/** @jsx jsx */
import { css, jsx } from '@emotion/core'

const color = 'white'

render(
  <div
    css={css`
      padding: 32px;
      background-color: hotpink;
      font-size: 24px;
      border-radius: 4px;
      &:hover {
        color: ${color};
      }
    `}
  >
    Hover to change color.
  </div>
)

One cool thing with inline css is they are just javascript code so it's pretty easy to apply logic code, like in How to conditionally apply css in emotion js

const shadowCss = feature.shadow ? css`
        border-radius: 5px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    ` : css``

Components based

When a component gets too big, I extract it to small components, in the end I have a bunch of them

import Footer from './components/Footer'
import Download from './components/Download'
import ProductHunt from './components/ProductHunt'
import Header from './components/Header'
import Headline from './components/Headline'
import Features from './components/Features

and I stack them vertically, using flexbox and css grid

Responsiveness with flexbox and css grid

I used flexbox mostly at first, but then I gradually convert some of them to css grid when I see fit. To stack vertically with flexbox, I use flex-direction

display: flex;
flex-direction: column

where as in css grid items are stacked vertically by default, if we want multiple columns, specify grid-template-columns

display: grid;
grid-template-columns: 1fr 1fr;

I use flex-wrap: wrap in some places to wrap content, but in some places I see specifying media query and changing columns in css grid is more easier and predictable

display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 8vw;
align-items: center;

@media (max-width: 500px) {
    grid-template-columns: 1fr; 
}

Audit with Lighthouse

Google Lighthouse is the most popular tool to audit website for performance and SEO. I use it to reduce image size, add correct html attributes and make it more SEO friendly.

Prepare a list of app

I have my list of apps in 1 javascript file, called factory.js, for example here with PastePal

const factory = [
    {
        name: 'PastePal',
        slug: 'pastepal',
        header: {
            background: '#5488E5'
        },
        headline: {
            title: 'Your next favorite pasteboard manager',
            text: 'Never miss what you just type. PastePal is a native Mac application that manages your pasteboard history with a variety of file types support like text and images. It also comes with a nifty note and shortcut manager.',
            image: 'banner.png',
        },

In my package.json for my landing page, I declare a property called currentApp. This is to specify which app I'm currently work on. Later in the generator script, we can just update this for every app that we build.

{
  "name": "landing",
  "version": "0.1.0",
  "private": true,
  "homepage": ".",
  "currentApp": "pastepal",

Here is how to read that value from my landing app

import factory from './apps/factory'
import pkg from '../package.json'

class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {}
    }

    componentWillMount() {
        let key = pkg.currentApp
        if (key === undefined) {
            key = 'pastepal'
        }

        const app = factory.filter((app) => { return app.slug === key })[0]
        this.setState(app)
    }

    render() {
        return (
            <div>
                <Page app={this.state} />
            </div>
        )
    }
}

Deployment

One thing with create-react-app is that built assets are relative to the root, not your index.html

npm run build creates a build directory with a production build of your app. Set up your favorite HTTP server so that a visitor to your site is served index.html, and requests to static paths like /static/js/main..js are served with the contents of the /static/js/main..js file. For more information see the production build section.

If you are not using the HTML5 pushState history API or not using client-side routing at all, it is unnecessary to specify the URL from which your app will be served. Instead, you can put this in your package.json:

"homepage": ".",

This will make sure that all the asset paths are relative to index.html. You will then be able to move your app from http://mywebsite.com to http://mywebsite.com/relativepath or even http://mywebsite.com/relative/path without having to rebuild it.

Build a generator script to generate many landing pages

I make another nodejs project called generator, it will use my landing project as template, changes a few parameters and build each app defined in factory.js.

My factory use export default syntax, so I need to use Babel in my node app to import that, see How to use babel 7 in node project

npm init generator
npm install @babel/core
npm install @babel/cli
npm install @babel/preset-env

{
  "presets": ["@babel/preset-env"]
}

Update currentApp

I use sync methods of fs to not have to deal with asynchrony.

const pkPath = `/Users/khoa/projects/anding/package.json`
const json = JSON.parse(fs.readFileSync(pkPath, 'utf8'))
json.currentApp = app.slug
fs.writeFileSync(pkPath, JSON.stringify(json, null, 2))

Execute shell command

I use shelljs to execute shell commands, and fs to read and write. In public/index.html specify some placeholder and we will replace those in our script.

In landing app, the public/index.html acts as the shell when building the app, so I have a few placeholder called CONSTANTS, these will be replaced at generation time in my node app.

const fs = require('fs');
const shell = require('shelljs')

let indexHtml = fs.readFileSync(publicIndexHtmlPath, 'utf8')
indexHtml = indexHtml
    .replace('CONSTANT_HTML_TITLE', `${app.name} - ${app.headline.title}`)
    .replace('CONSTANT_HTML_META_DESCRIPTION', app.headline.text)

fs.writeFileSync(publicIndexHtmlPath, indexHtml)

// build
shell.cd('projects/my_react_app')
shell.exec('npm run build')

// copy
shell.exec(`cp -a projects/my_react_app web_server/public`)

❤️ Support my apps ❤️

❤️❤️😇😍🤘❤️❤️

How to build SwiftUI style UICollectionView data source in Swift

Khoa Pham — Sun, 09 Feb 2020 22:03:44 +0000

It's hard to see any iOS app which don't use UITableView or UICollectionView, as they are the basic and important foundation to represent data. UICollectionView is very basic to use, yet a bit tedious for common use cases, but if we abstract over it, then it becomes super hard to customize. Every app is unique, and any attempt to wrap around UICollectionView will fail horribly. A sensable approach for a good abstraction is to make it super easy for normal cases, and easy to customize for advanced scenarios.

I'm always interested in how to make UICollectionView easier and fun to write and have curated many open sources here data source. Many of these data source libraries try to come up with totally different namings and complex paradigm which makes it hard to onboard, and many are hard to customize.

In its simplest form, what we want in a UICollectionView data source is cell = f(state), which means our cell representation is just a function of the state. We just want to set model to the cell, the correct cell, in a type safe manner.

Generic data source

The basic is to make a generic data source that sticks with a particular cell

class DataSource<T>: NSObject {
    let items: [T]
    let configure: (T, UICollectionViewCell) -> Void
    let select: (UICollectionViewCell, IndexPath) -> Void
}

This works for basic usage, and we can create multiple DataSource for each kind of model. The problem is it's hard to subclass DataSource as generic in Swift and inheritance for ObjcC NSObject don't work well.

Check for the types

Seeing the problem with generic data source, I've tried another approach with Upstream where it's easier to declare sections and models.

let sections: [Section] = [
    Section(
        header: Header(model: Model.header("Information"), viewType: HeaderView.self),
        items: [
            Item(model: Model.avatar(avatarUrl), cellType: AvatarCell.self),
            Item(model: Model.name("Thor"), cellType: NameCell.self),
            Item(model: Model.location("Asgard"), cellType: NameCell.self)
        ]
    ),
    Section(
        header: Header(model: Model.header("Skills"), viewType: HeaderView.self),
        items: [
            Item(model: Model.skill("iOS"), cellType: SkillCell.self),
            Item(model: Model.skill("Android"), cellType: SkillCell.self)
        ]
    )
]

adapter.reload(sections: sections)

This uses the Adapter pattern and we need to handle AdapterDelegate. To avoid the generic problem, this Adapter store items as Any, so we need to type cast all the time.

extension ProfileViewController: AdapterDelegate {
    func configure(model: Any, view: UIView, indexPath: IndexPath) {
        guard let model = model as? Model else {
            return
        }

        switch (model, view) {
        case (.avatar(let string), let cell as Avatarcell):
            cell.configure(string: string)
        case (.name(let name), let cell as NameCell):
            cell.configure(string: name)
        case (.header(let string), let view as HeaderView):
            view.configure(string: string)
        default:
            break
        }
    }
}

The benefit is that we can easily subclass this Adapter manager to customize the behaviour, here is how to make accordion

class AccordionManager<T>: Manager<T> {
    private var collapsedSections = Set<Int>()

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return collapsedSections.contains(section)
            ? 0 : sections[section].items.count
    }

    func toggle(section: Int) {
        if collapsedSections.contains(section) {
            collapsedSections.remove(section)
        } else {
            collapsedSections.insert(section)
        }

        let indexSet = IndexSet(integer: section)
        tableView?.reloadSections(indexSet, with: .automatic)
    }
}

SwiftUI

SwiftUI comes in iOS 13 with a very concise and easy to use syntax. SwiftUI has good diffing so we just need to update our models so the whole content will be diffed and rendered again.

var body: some View {
    List {
        ForEach(blogs) { blog in
            VStack {
                Text(blog.name)
            }
            .onTap {
                print("cell was tapped")
            }
        }
    }
}

SwiftUI style with diffing

I built DeepDiff before and it was used by many people. Now I'm pleased to introduce Micro which is a SwiftU style with DeepDiff powered so it performs fast diffing whenever state changes.

With Micro we can just use the familiar forEach to declare Cell, and the returned State will tell DataSource to update the UICollectionView.

Every time state is assigned, UICollectionView will be fast diffed and reloaded. The only requirement is that your model should conform to DiffAware with diffId so DeepDiff knows how to diff for changes.

dataSource.state = forEach(blogs) { blog in
    Cell<BlogCell>() { context, cell in
        cell.nameLabel.text = blog.name
    }
    .onSelect { context in 
        print("cell at index \(context.indexPath.item) is selected")
    }
    .onSize { context in 
        CGSize(
            width: context.collectionView.frame.size.width, 
            height: 40
        )
    }
}

❤️ Support my app ❤️

❤️❤️😇😍🤘❤️❤️

How to add AdMob to Android app

Khoa Pham — Tue, 01 Oct 2019 10:24:36 +0000

Use AdMob with Firebase

https://firebase.google.com/docs/admob/android/quick-start

build.gradle

buildscript {
    repositories {
        google()
        jcenter()

    }
    dependencies {
        classpath 'com.google.gms:google-services:4.3.2'
    }
}

app/build.gradle

class Version {
    class Firebase {
        static def analytics = "17.2.0"
        static def ads = "18.2.0"
    }
}

dependencies {
    implementation "com.google.firebase:firebase-analytics:$Version.Firebase.analytics"
    implementation "com.google.firebase:firebase-ads:$Version.Firebase.ads"
}

apply plugin: 'com.google.gms.google-services'

Manifest.xml

<manifest>
    <application>
        <!-- Sample AdMob App ID: ca-app-pub-3940256099942544~3347511713 -->
        <meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"
            android:value="[ADMOB_APP_ID]"/>
    </application>
</manifest>

MyApplication.kt

class MyApplication: Application() {
    override fun onCreate() {
        super.onCreate()

        MobileAds.initialize(this)
    }
}

AdView

fragment.xml

<com.google.android.gms.ads.AdView
        xmlns:ads="http://schemas.android.com/apk/res-auto"
        android:id="@+id/adView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        ads:adSize="BANNER"
        ads:adUnitId="ca-app-pub-123456/123456"
        ads:layout_constraintBottom_toBottomOf="parent"
        ads:layout_constraintLeft_toLeftOf="parent"
        ads:layout_constraintRight_toRightOf="parent"/>

Fragment.kt

import com.google.android.gms.ads.AdRequest
import com.google.android.gms.ads.AdView

val request = AdRequest.Builder().build()
adView.loadAd(request)

Troubleshooting

Link your app to Firebase option not showing

https://support.google.com/admob/answer/6383165?authuser=0
Use standalone AdMob https://developers.google.com/admob/android/quick-start

app/build.gradle

dependencies {
    implementation 'com.google.android.gms:play-services-ads:18.2.0'
}

Cannot fit requested classes in a single dex file

https://stackoverflow.com/questions/48249633/errorcannot-fit-requested-classes-in-a-single-dex-file-try-supplying-a-main-dex

app/build.gradle


android {
    defaultConfig {
        multiDexEnabled true
    }
}

dependencies {
    implementation 'com.android.support:multidex:1.0.3'
}

http://thetechnocafe.com/a-complete-guide-to-integrating-admob-in-your-android-app/

Original post https://github.com/onmyway133/blog/issues/431

How to show context menu from NSButton in macOS

Khoa Pham — Tue, 01 Oct 2019 10:23:55 +0000

Use NSMenu and popUp

func showQuitMenu() {
    let menu = NSMenu()
    let aboutItem = NSMenuItem(
        title: "About",
        action: #selector(onAboutTouched(_:)),
        keyEquivalent: ""
    )

    let quitItem = NSMenuItem(
        title: "Quit Hacker Pad",
        action: #selector(onQuitTouched(_:)),
        keyEquivalent: ""
    )

    aboutItem.target = self
    quitItem.target = self

    menu.addItem(aboutItem)
    menu.addItem(quitItem)

    menu.popUp(
        positioning: aboutItem,
        at: bottomView.quitButton.frame.origin,
        in: bottomView
    )
}

Use Omnia

let menuHandler = MenuHandler()
menuHandler.add(title: "About", action: {
    NSWorkspace.shared.open(URL(string: "https://onmyway133.github.io/")!)
})

menuHandler.add(title: "Quit Hacker Pad", action: {
    NSApp.terminate(nil)
})

menuHandler.show(from: self.bottomView.gearButton, in: self.bottomView)

Original post https://github.com/onmyway133/blog/issues/435

How to easily parse deep json in Swift

Khoa Pham — Thu, 12 Sep 2019 13:36:05 +0000

JSONCodable is awesome, but sometimes we just need to quickly get value in a deepy nested JSON. In the same way I did for Dart How to resolve deep json object in Dart, let's make that in Swift.

See https://github.com/onmyway133/Omnia/blob/master/Sources/Shared/JSON.swift

public func resolve<T>(_ jsonDictionary: [String: Any], keyPath: String) -> T? {
    var current: Any? = jsonDictionary

    keyPath.split(separator: ".").forEach { component in
        if let maybeInt = Int(component), let array = current as? Array<Any> {
            current = array[maybeInt]
        } else if let dictionary = current as? JSONDictionary {
            current = dictionary[String(component)]
        }
    }

    return current as? T
}

So we can just resolve via key path

class JSONTests: XCTestCase {
    func test() {
        let json: [String: Any] = [
            "outside": [
                "object": [
                    "number": 1,
                    "text": "hello"
                ],
                "arrayOfObjects": [
                    [
                        "number": 2,
                        "text": "two"
                    ],
                    [
                        "number": 3,
                        "text": "three"
                    ]
                ],
                "arrayOfArrays": [
                    [
                        "one", "two", "three", "four"
                    ],
                    [
                        "five", "six", "seven"
                    ]
                ]
            ]
        ]

        XCTAssertEqual(resolve(json, keyPath: "outside.object.number"), 1)
        XCTAssertEqual(resolve(json, keyPath: "outside.object.text"), "hello")
        XCTAssertEqual(resolve(json, keyPath: "outside.arrayOfObjects.1.number"), 3)
        XCTAssertEqual(resolve(json, keyPath: "outside.arrayOfArrays.1.1"), "six")
    }
}

Original post https://onmyway133.github.io/blog/How-to-easily-parse-deep-json-in-Swift/

Back to static site

Khoa Pham — Tue, 03 Sep 2019 20:18:45 +0000

It's been a while since I wrote Hello world, again, the ease of GitHub issue indeed motivates me to write more.

In the mean time I also wrote on https://medium.com/@onmyway133 and https://dev.to/onmyway133 and got some traction.

Then I started using GitHub pages again, with Jekyll and remote theme, it works great. But then I needed to manually link the GitHub issues to my page, that's just labor work.

The best combo is to have a GitHub page backed by GitHub issue. After a bit comparison between different static site generators, I actually tried them all, I chose Hexo because I simply like Javascript

I use the simple cactus theme for now with local searched power by https://www.npmjs.com/package/hexo-generator-search.

Then I wrote a node.js script to mirror my GitHub issue to my page, with correct tags and updated date.

If you by any chance visit my new page https://onmyway133.github.io/, ohayou from me 👋

How to get Hacker News top stories using parallel coroutine and Retrofit

Khoa Pham — Tue, 03 Sep 2019 12:04:07 +0000

interface Api {
    @GET("topstories.json?print=pretty")
    suspend fun getTopStories(): List<Int>

    @GET("item/{id}.json?print=pretty")
    suspend fun getStory(@Path("id") id: Int): Item
}

class Repo {
    fun api(): Api {
        return Retrofit.Builder()
            .baseUrl("https://hacker-news.firebaseio.com/v0/")
            .addConverterFactory(MoshiConverterFactory.create())
            .build()
            .create(Api::class.java)
    }
}

class ViewModel(val repo: Repo): ViewModel() {
    val items = MutableLiveData<ArrayList<Item>>()

    suspend fun load() {
        try {
            val ids = repo.api()
                .getTopStories()
                .take(20)

            val items = ids.map {
                repo.api().getStory(it)
            }
            this.items.value = items.toCollection(ArrayList())
        } catch (e: Exception) {
            this.items.value = arrayListOf()
        }
    }
}

Running parallel

The above run in serial. To run in parallel, we can use async

import kotlinx.coroutines.async
import kotlinx.coroutines.coroutineScope

class ViewModel(val repo: Repo): ViewModel() {
    val items = MutableLiveData<ArrayList<Item>>()

    suspend fun load() {
        try {
            val ids = repo.api()
                .getTopStories()
                .take(20)

            coroutineScope {
                val items = ids
                    .map { async { repo.api().getStory(it) } }
                    .awaitAll()

                this@ViewModel.items.value = items.toCollection(ArrayList())
            }

        } catch (e: Exception) {
            this.items.value = arrayListOf()
        }
    }
}

Parallel decomposition

https://medium.com/@elizarov/structured-concurrency-722d765aa952

With structured concurrency async coroutine builder became an extension on CoroutineScope just like launch did. You cannot simply write async { … } anymore, you have to provide a scope. A proper example of parallel decomposition becomes:

coroutineScope

https://proandroiddev.com/part-2-coroutine-cancellation-and-structured-concurrency-2dbc6583c07d

coroutineScope function can be used to create a custom scope that suspends and only completes when all coroutines launched within that scope complete. If any of the children coroutines within the coroutineScope throws an exception, all other running sibling coroutines gets cancelled and this exception is propagated up the hierarchy. If the parent coroutine at the top of the hierarchy does not handle this error, it will also be cancelled.

awaitAll

https://kotlin.github.io/kotlinx.coroutines/kotlinx-coroutines-core/kotlinx.coroutines/await-all.html

Awaits for completion of given deferred values without blocking a thread and resumes normally with the list of values when all deferred computations are complete or resumes with the first thrown exception if any of computations complete exceptionally including cancellation.

This function is not equivalent to deferreds.map { it.await() } which fails only when it sequentially gets to wait for the failing deferred, while this awaitAll fails immediately as soon as any of the deferreds fail.

This suspending function is cancellable. If the Job of the current coroutine is cancelled or completed while this suspending function is waiting, this function immediately resumes with CancellationException.

How to safely access deeply nested object in Javascript

Khoa Pham — Tue, 03 Sep 2019 12:03:25 +0000

An object 's property can be null or undefined.

Accessing step by step is tedious

props.user &&
props.user.posts &&
props.user.posts[0] &&
props.user.posts[0].comments

Dynamic parsing path is too clever and involves string in the end, which is a no no

const get = (p, o) =>
  p.reduce((xs, x) => (xs && xs[x]) ? xs[x] : null, o)

const getUserComments = get(['user', 'posts', 0, 'comments'])

Instead let's use function and catch errors explicitly, and defaults with a fallback

const get: (f, defaultValue) => {
    try {
        const value = f()
        if (isNotNullOrUndefined(value)) {
            return value
        } else {
            return defaultValue
        }
    } catch {
        return defaultValue
    }
}

const comments = get(() => { .user.posts[0].comments }, [])

https://medium.com/javascript-inside/safely-accessing-deeply-nested-values-in-javascript-99bf72a0855a

How to make scrollable NSTextView in AppKit

Khoa Pham — Thu, 27 Jun 2019 10:11:58 +0000

When adding NSTextView in xib, we see it is embedded under NSClipView. But if we try to use NSClipView to replicate what's in the xib, it does not scroll.

To make it work, we can follow Putting an NSTextView Object in an NSScrollView and How to make scrollable vertical NSStackView to make our ScrollableInput

For easy Auto Layout, we use Anchors for UIScrollView.

Things worth mentioned for vertical scrolling

textContainer.heightTracksTextView = false
textView.autoresizingMask = [.width]
textView.isVerticallyResizable = true

class ScrollableInput: NSView {
    let scrollView = NSScrollView()
    let textView = NSTextView()

    override init(frame frameRect: NSRect) {
        super.init(frame: frameRect)

        let rect = CGRect(
            x: 0, y: 0,
            width: 0, height: CGFloat.greatestFiniteMagnitude
        )

    let layoutManager = NSLayoutManager()

        let textContainer = NSTextContainer(size: rect.size)
        layoutManager.addTextContainer(textContainer)
        textView = NSTextView(frame: rect, textContainer: textContainer)
        textView.maxSize = NSSize(width: 0, height: CGFloat.greatestFiniteMagnitude)

        textContainer.heightTracksTextView = false
        textContainer.widthTracksTextView = true

        textView.isRichText = false
        textView.importsGraphics = false
        textView.isEditable = true
        textView.isSelectable = true
        textView.font = R.font.text
        textView.textColor = R.color.text
        textView.isVerticallyResizable = true
        textView.isHorizontallyResizable = false

        addSubview(scrollView)
        scrollView.hasVerticalScroller = true
        scrollView.drawsBackground = false
        scrollView.drawsBackground = false
        textView.drawsBackground = false

        activate(
            scrollView.anchor.edges
        )

        scrollView.documentView = textView
        textView.autoresizingMask = [.width]
    }

    required init?(coder decoder: NSCoder) {
        fatalError()
    }
}

Original post https://github.com/onmyway133/blog/issues/330

Forem: Khoa Pham

Craft stunning code and image screenshot for free

I visualized 8 lessons from 1 year doing indie development

My year in review 2020

Blogging

Open source

Apps

Learning

Listening

Tweet

WWDC Together

Speaking

Work

Life

How to make white label React app for landing pages

Create a landing page in pure html and javascript

Create a landing page in React

Inline css

Use emotion for inline css

Components based

Responsiveness with flexbox and css grid

Audit with Lighthouse

Prepare a list of app

Deployment

Build a generator script to generate many landing pages

Update currentApp

Execute shell command

How to build SwiftUI style UICollectionView data source in Swift

Generic data source

Check for the types

SwiftUI

SwiftUI style with diffing

How to add AdMob to Android app

Use AdMob with Firebase

AdView

Troubleshooting

Link your app to Firebase option not showing

Cannot fit requested classes in a single dex file

Read more

How to show context menu from NSButton in macOS

How to easily parse deep json in Swift

Back to static site

How to get Hacker News top stories using parallel coroutine and Retrofit

Running parallel

Parallel decomposition

coroutineScope

awaitAll

Read more

How to safely access deeply nested object in Javascript

Read more

How to make scrollable NSTextView in AppKit