Issue #648 In a similar fashion to plain old javascript, note that href needs to have valid hash tag, like #features <a href='#features' onClick={() => { const options = { behavior: 'smooth' } document.getElementById('features-section').scrollIntoView(options) }} > Features </a> Updated at 2020-05-06 08:36:21

Issue #647 emotion can be used in framework agnostic or with React. To use with React, follow https://emotion.sh/docs/introduction#react npm i @emotion/core Note that you must have /** @jsx jsx */ at the top of the file, and the unused jsx in import is a directive for JSX to work properly // 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....

Issue #646 Sync the DispatchQueue Pass DispatchQueue and call queue.sync to sync all async works before asserting Use mock Use DispatchQueueType and in mock, call the work immediately import Foundation public protocol DispatchQueueType { func async(execute work: @escaping @convention(block) () -> Void) } extension DispatchQueue: DispatchQueueType { public func async(execute work: @escaping @convention(block) () -> Void) { async(group: nil, qos: .unspecified, flags: [], execute: work) } } final class MockDispatchQueue: DispatchQueueType { func async(execute work: @escaping @convention(block) () -> Void) { work() } }

Issue #645 Install webpack npm init npm install webpack webpack-cli --save-dev vim webpack.config.js module.exports = { entry: "./index.js", mode: 'production', output: { filename: "./index.js" } } To invoke webpack, run below. Your output is dist/index.js npx webpack Minify js npm install babel-minify-webpack-plugin --save-dev Minify html 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....

Issue #644 import XCTest extension XCTestCase { /// Asynchronously assertion func XCTAssertWait( timeout: TimeInterval = 1, _ expression: @escaping () -> Void, _: String = "", file _: StaticString = #file, line _: UInt = #line ) { let expectation = self.expectation(description: #function) DispatchQueue.main.asyncAfter(deadline: .now() + timeout) { expression() expectation.fulfill() } let waiter = XCTWaiter() XCTAssertTrue(waiter.wait(for: [expectation], timeout: timeout + 1) == .completed) } } Updated at 2020-04-28 09:23:59

Issue #643 Use material icons <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> div#filter-container { display: flex; align-items: center; justify-content: center; margin-top: 10%; height: 60px; } div#filter-items { display: inline-flex; background-color: #fff; box-shadow: 0 0 1px 0 rgba(52, 46, 173, 0.25), 0 15px 30px 0 rgba(52, 46, 173, 0.1); border-radius: 12px; overflow: hidden; padding: 10px; } a.filter-item { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100px; text-decoration: none; padding: 10px; } a.filter-item:hover { background-color: rgb(239, 240, 241); border-radius: 10px; } a....

Issue #642 Specify container with flex-wrap and justify-content, and item with float: left div.cards { display: flex; justify-content: center; flex-direction: row; flex-wrap: wrap; margin-top: 10%; } div.card { overflow: hidden; float: left; width: 220px; color: #232330; text-align: center; border-radius: 10px; border-color: silver; box-shadow: 1px 8px 8px rgba(10, 10, 10, 0.2); font-family: 'Open Sans', sans-serif; margin: 16px; transition: all .2s ease-in-out; } div.card:hover { transform: scale(1.2); }

Issue #641 Create a new page hexo new page mydemo Remove index.md and create index.html, you can reference external css and js in this index.html. Hexo has hexo new page mydemo --slug but it does not support page hierarchy Specify no layout so it is independent page. --- layout: false ---

Issue #640 async function useCache( collectionName: string, key: string, response: functions.Response<any>, fetch: () => Promise<any> ): Promise<any> { const existing = await db.collection(collectionName).doc(key).get() if (existing.exists) { response.send(existing.data()) return } const object = await fetch() const json = Object.assign({}, object) await db.collection(collectionName).doc(key).set(json) response.send(object) } useCache( "books", key, response, async () => { const service = new Service() return await service.doSomething(key) } )

Issue #639 Never use String(format: "%.2f %%", 1.2 because each region can have different separator and placement of percent sign. Use NumberFormatter instead let formatter = NumberFormatter() formatter.numberStyle = .percent formatter.minimumIntegerDigits = 1 formatter.maximumIntegerDigits = 3 formatter.maximumFractionDigits = 2 formatter.locale = Locale(identifier: "en_US") formatter.string(from: NSDecimalNumber(decimal: 1.2 / 100)) // 0.12% formatter.locale = Locale(identifier: "nb_NO") formatter.string(from: NSDecimalNumber(decimal: 1.2 / 100)) // 0,12 % Note that the space created by NumberFormatter is a non breakable space \u{00a0}, which can be created by Alt Space....

Issue #638 Use commandDefinitions in XCSourceEditorExtension. import Foundation import XcodeKit class SourceEditorExtension: NSObject, XCSourceEditorExtension { func extensionDidFinishLaunching() { } var commandDefinitions: [[XCSourceEditorCommandDefinitionKey: Any]] { func makeDef( _ className: String, _ commandName: String ) -> [XCSourceEditorCommandDefinitionKey: Any] { guard let bundleId = Bundle(for: type(of: self)).bundleIdentifier else { return [:] } return [ XCSourceEditorCommandDefinitionKey.identifierKey: bundleId + className, XCSourceEditorCommandDefinitionKey.classNameKey: className, XCSourceEditorCommandDefinitionKey.nameKey: commandName ] } return [ makeDef(TypeCommand.className(), "Type"), makeDef(ReloadCommand.className(), "Reload"), ] } } There is a weird crash that we can’t seem to declare functions or use commandDefinitions, the workaround is to declare in plist...

Issue #638 Use commandDefinitions in XCSourceEditorExtension. import Foundation import XcodeKit class SourceEditorExtension: NSObject, XCSourceEditorExtension { func extensionDidFinishLaunching() { } var commandDefinitions: [[XCSourceEditorCommandDefinitionKey: Any]] { func makeDef( _ className: String, _ commandName: String ) -> [XCSourceEditorCommandDefinitionKey: Any] { guard let bundleId = Bundle(for: type(of: self)).bundleIdentifier else { return [:] } return [ XCSourceEditorCommandDefinitionKey.identifierKey: bundleId + className, XCSourceEditorCommandDefinitionKey.classNameKey: className, XCSourceEditorCommandDefinitionKey.nameKey: commandName ] } return [ makeDef(TypeCommand.className(), "Type"), makeDef(ReloadCommand.className(), "Reload"), ] } } There is a weird crash that we can’t seem to declare functions or use commandDefinitions, the workaround is to declare in plist...

Issue #636 Normally we can just wrap NSTextField struct SearchTextField: NSViewRepresentable { @Binding var text: String var hint: String var onCommit: (String) -> Void func makeNSView(context: NSViewRepresentableContext<SearchTextField>) -> NSTextField { let tf = NSTextField() tf.focusRingType = .none tf.isBordered = false tf.isEditable = true tf.isSelectable = true tf.drawsBackground = false tf.delegate = context.coordinator tf.font = NSFont(name: OpenSans.bold.rawValue, size: 14) tf.placeholderString = hint return tf } func updateNSView( _ nsView: NSTextField, context: NSViewRepresentableContext<SearchTextField> ) { nsView....

Issue #635 textField.delegate = self NSTextFieldDelegate func control(_ control: NSControl, textView: NSTextView, doCommandBy commandSelector: Selector) -> Bool { if (commandSelector == #selector(NSResponder.insertNewline(_:))) { // Do something against ENTER key print("enter") return true } else if (commandSelector == #selector(NSResponder.deleteForward(_:))) { // Do something against DELETE key return true } else if (commandSelector == #selector(NSResponder.deleteBackward(_:))) { // Do something against BACKSPACE key return true } else if (commandSelector == #selector(NSResponder.insertTab(_:))) { // Do something against TAB key return true } else if (commandSelector == #selector(NSResponder....

Issue #634 public enum Weapon: String, Decodable { case sword = "SWORD" case gun = "GUN" case unknown = "UNKNOWN" public init(from decoder: Decoder) throws { let rawValue = try decoder.singleValueContainer().decode(String.self) self = Weapon(rawValue: rawValue) ?? .unknown } }

Issue #633 Use autoclosure and AnyView @available(iOS 13.0, OSX 10.15, tvOS 13.0, watchOS 6.0, *) public extension View { func applyIf<T: View>(_ condition: @autoclosure () -> Bool, apply: (Self) -> T) -> AnyView { if condition() { return apply(self).erase() } else { return self.erase() } } } Button(action: onSearch) { Image("search") .resizable() .styleButton() .overlay(ToolTip("Search")) } .buttonStyle(BorderlessButtonStyle()) .applyIf(showsSearch, apply: { $0.foregroundColor(Color.orange) })

Issue #632 Use Group private func makeHeader() -> some View { Group { if showsSearch { SearchView( onSearch: onSearch ) .transition(.move(edge: .leading)) } else { InputView( onAdd: onAdd ) .transition(.move(edge: .leading)) } } } withAnimation { self.showsSearch.toggle() }

Issue #631 beginBackgroundTask https://developer.apple.com/documentation/uikit/app_and_environment/scenes/preparing_your_ui_to_run_in_the_background/extending_your_app_s_background_execution_time When your app moves to the background, the system calls your app delegate’s applicationDidEnterBackground(_:) method. That method has five seconds to perform any tasks and return. Shortly after that method returns, the system puts your app into the suspended state. For most apps, five seconds is enough to perform any crucial tasks, but if you need more time, you can ask UIKit to extend your app’s runtime....

Issue #630 For SwiftUI app using NSPopover, to show context popover menu, we can ask for windows array, get the _NSPopoverWindow and calculate the position. Note that origin of macOS screen is bottom left (lldb) po NSApp.windows ▿ 2 elements - 0 : <NSStatusBarWindow: 0x101a02700> - 1 : <_NSPopoverWindow: 0x101c01060> let handler = MenuHandler() handler.add(title: "About", action: onAbout) handler.add(title: "Quit", action: onQuit) guard let window = NSApp.windows.last else { return } let position = CGPoint( x: window....

Issue #629 Use Picker with SegmentedPickerStyle. Picker(selection: $preferenceManager.preference.display, label: EmptyView()) { Image("grid") .resizable() .padding() .tag(0) Image("list") .resizable() .tag(1) }.pickerStyle(SegmentedPickerStyle()) .frame(width: 50) .padding(.leading, 16) .padding(.trailing, 24) Alternatively, we can make custom NSSegmentedControl import AppKit import SwiftUI struct MySegmentControl: NSViewRepresentable { func makeCoordinator() -> MySegmentControl.Coordinator { Coordinator(parent: self) } func makeNSView(context: NSViewRepresentableContext<MySegmentControl>) -> NSSegmentedControl { let control = NSSegmentedControl( images: [ NSImage(named: NSImage.Name("grid"))!, NSImage(named: NSImage.Name("list"))! ], trackingMode: .selectOne, target: context.coordinator, action: #selector(Coordinator.onChange(_:)) ) return control } func updateNSView(_ nsView: NSSegmentedControl, context: NSViewRepresentableContext<MySegmentControl>) { } class Coordinator { let parent: MySegmentControl init(parent: MySegmentControl) { self....