How to use act vs waitFor using React Testing Library

Issue #971 When testing React components, dealing with tasks that happen at different times is super important to make sure your tests give reliable results. React Testing Library gives you two important tools for dealing with these situations: act and waitFor. Even though they both help with handling actions that don鈥檛 happen right away, they鈥檙e used in different situations. act: Ensuring Synchronous Updates The act function wraps parts of your code that cause updates linked to changes in state, effects, or other delayed actions....

March 13, 2024 路 4 min 路 Khoa Pham

How to use OSLog and OSLogStore in Swift

Issue #970 We can use Logger to log and OSLogStore to retrieve logs import OSLog import ReuseAcross final class LogService { static let shared = LogService() let logger = Logger( subsystem: "com.example.myapp", category: "Log" ) func export() -> [String] { do { let store = try OSLogStore(scope: .currentProcessIdentifier) let position = store.position(timeIntervalSinceLatestBoot: 1) let logs = try store .getEntries(at: position) .compactMap { $0 as? OSLogEntryLog } .filter { $0.subsystem == Bundle....

February 8, 2024 路 1 min 路 Khoa Pham

How to include custom error payload in hapi Boom

Issue #969 Hapi.js, commonly referred to as Hapi, is an open-source, back-end web application framework for building and deploying web applications and APIs in Node.js In Hapi.js, you can use the Boom module to create and return error responses in a standardized way. Boom provides a set of functions to generate HTTP error objects with consistent properties, making it easier to handle errors and communicate them to clients Read Error transformation...

January 31, 2024 路 1 min 路 Khoa Pham

How to read image paste from clipboard in React

Issue #968 Are you looking to grab images directly from your clipboard with a button click on your web page? The Async Clipboard API makes this quite easy and efficient. Let鈥檚 break it down into simpler steps: Requesting Permission The first time you try to read something from the clipboard using this method, your browser will ask for permission. This is a security feature to ensure that websites don鈥檛 access your clipboard without your consent....

January 30, 2024 路 2 min 路 Khoa Pham

How to create user gitignore

Issue #967 Git is a helpful tool for managing code and projects, but sometimes you want to ignore certain files or folders only on your computer without affecting everyone else. That鈥檚 where the .user_gitignore file comes in. It allows you to create personalized ignore rules for your local Git setup without changing the global project settings. gitignore Before we get into .user_gitignore, let鈥檚 quickly go over what a regular .gitignore file does....

January 30, 2024 路 2 min 路 Khoa Pham

How to use useCallback in React

Issue #966 The use of useCallback and useMemo in React hooks is an adaptation to address certain limitations inherent in the functional programming style adopted by React. In JavaScript, every entity, whether it鈥檚 a function, variable, or any other type, gets created in memory when the code within a function鈥檚 scope is executed. This poses a challenge for React鈥檚 rendering logic, which determines the need for re-rendering based on changes in input props and context....

January 26, 2024 路 2 min 路 Khoa Pham

How to extend class in Javascript

Issue #965 In JavaScript, classes are a template for creating objects. They encapsulate data with code to work on that data. ES6 introduced a class syntax to the JavaScript language to create classes in a way that鈥檚 similar to other object-oriented programming languages like Java or C#. Extending classes is also a feature of ES6, which allows you to create a new class from an existing class. This is done through the extends keyword....

January 25, 2024 路 4 min 路 Khoa Pham

How to use export all and export default in Javascript

Issue #964 In JavaScript, particularly in modules used in frameworks like React, export statements are used to expose code鈥攕uch as functions, classes, or constants鈥攆rom one module so that they can be imported and reused in other modules. export * The export * syntax is used to re-export all exportable members from the imported module. It鈥檚 a way to aggregate exports from several modules into a single module. For example, let鈥檚 say we have a couple of modules, each exporting some components:...

January 25, 2024 路 2 min 路 Khoa Pham

How to escape characters in json and regex with Swift string

Issue #963 In the world of Swift programming, we often come across situations where we need to work with string literals that contain special characters. These characters can include new lines, tabs, backslashes, and quotes 鈥 all of which need to be handled appropriately to ensure they don鈥檛 inadvertently affect the structure or behavior of our code. Traditionally, we negate their special meaning by escaping them with backslashes. However, Swift provides an even simpler method 鈥 raw strings....

January 12, 2024 路 4 min 路 Khoa Pham

How to use nextjs Image

Issue #962 Fill parent div A boolean that causes the image to fill the parent element, which is useful when the width and height are unknown. The parent element must assign position: 鈥渞elative鈥, position: 鈥渇ixed鈥, or position: 鈥渁bsolute鈥 style. <div className="relative"> <Image src="" alt="" fill objectFit="cover" /> </div>

January 7, 2024 路 1 min 路 Khoa Pham

How to check NSTextField is first responder

Issue #961 NSTextField uses NSFieldEditor under the hood, you can check currentEditor if it is the firstResponder extension NSTextField { var isFirstResponder: Bool { currentEditor() == window?.firstResponder } }

January 7, 2024 路 1 min 路 Khoa Pham

Building an iOS camera calculator with Core ML鈥檚 Vision and Tesseract OCR

Issue #960 Also written on Fritz Math might be scary, but it鈥檚 an essential part of everyday life. Wouldn鈥檛 it be cool if we could build an app, point our phone鈥檚 camera at an expression, and let the app compute the result? Whenever I鈥檝e needed to use math, I鈥檝e wished this was possible. Now, with advances in machine learning and vision recognition in iOS, this is doable. In this guide, I鈥檒l provide some of the technical details for working with Vision in iOS, as well as my personal experiences using this technology....

December 31, 2023 路 12 min 路 Khoa Pham

How to decode dynamic JSON key with JSONDecoder

Issue #959 Decoding JSON in Swift is most of the time very straightforward with help of Codable protocol and JSONDecoder. Sometimes the json contains dynamic key, like { "shipmunk": { "name": "Shipmunk", "link": "https://indiegoodies.com/shipmunk" }, "pastepal": { "name": "PastePal", "link": "https://indiegoodies.com/pastepal" }, "codelime": { "name": "Codelime", "link": "https://indiegoodies.com/codelime" } } Decoding JSON with dynamic keys in Swift can be tricky because the keys in your data can change, and Swift likes to know exactly what it鈥檚 working with ahead of time....

December 21, 2023 路 2 min 路 Khoa Pham

How to bundle js for use in JavaScriptCore in Swift

Issue #958 We can use any bundler, like Parcel, Webpack or Vite. Here I use Webpack 5 Install Webpack and Babel npm install @babel/polyfill webpack webpack-cli --save-dev @babel/polyfill is a package provided by Babel, a popular JavaScript compiler. The polyfill is a way to bring modern JavaScript features and APIs to older browsers that don鈥檛 support them natively. Before ES6 (ECMAScript 2015), JavaScript lacked many features that are now considered standard....

December 7, 2023 路 2 min 路 Khoa Pham

How to handle log in JSContext with JavascriptCore

Issue #957 Define console object and set log function to point to our Swift function import JavaScriptCore extension JSContext { func injectConsoleLog() { evaluateScript( """ var console = {}; """ ) let consoleLog: @convention(block) (Any) -> Void = { print($0) } objectForKeyedSubscript("console") .setObject(consoleLog, forKeyedSubscript: "log" as NSString) } } Then we can just call let context = JSContext()! context.injectConsoleLog() context.evaluateScript(jsContent)

December 7, 2023 路 1 min 路 Khoa Pham

How to make attributed TextView for macOS and iOS with SwiftUI

Issue #956 macOS import Foundation import SwiftUI import AppKit struct AttributedTextView: NSViewRepresentable { @Binding var attributedText: NSAttributedString var isEditable: Bool = true final class Coordinator: NSObject { let parent: AttributedTextView init( parent: AttributedTextView ) { self.parent = parent super.init() } } func makeCoordinator() -> Coordinator { Coordinator(parent: self) } func makeNSView(context: Context) -> NSScrollView { let view = NSTextView.scrollableTextView() if let textView = view.documentView as? NSTextView { textView.font = NSFont.preferredFont(forTextStyle: ....

December 7, 2023 路 2 min 路 Khoa Pham

Apple Developer Learning resources

Issue #955 Besides WWDC videos & documentation, Apple also has interactive tutorials and books. Below are some of my favorites learning resources Tutorials Introducing SwiftUI: SwiftUI is a modern way to declare user interfaces for any Apple platform. Create beautiful, dynamic apps faster than ever before. Develop apps for iOS: Learn the basics of Xcode, SwiftUI, and UIKit to create compelling iOS apps. Develop in Swift: Develop in Swift Tutorials are a great first step toward a career in app development using Xcode, Swift, and SwiftUI....

November 29, 2023 路 1 min 路 Khoa Pham

How to show anchor bottom view in SwiftUI

Issue #954 From iOS 15, there鈥檚 a handy safeAreaInset that allows us to place additional content extending the safe area. Shows the specified content beside the modified view. safeAreaInset allows us to customize which edge and alignment we can place our views. This works for both ScrollView, List and Form and you can apply it multiple times. The content view is anchored to the specified horizontal edge in the parent view, aligning its vertical axis to the specified alignment guide....

November 22, 2023 路 2 min 路 Khoa Pham

How to debounce text input in React

Issue #953 Use debounce from lodash and useCallback to memoize debounce function import React, { useCallback } from "react" import debounce from "lodash/debounce" const SearchField = (props: Props) => { const callback = useCallback( debounce((value: string) => { props.setFilter({ ...props.filter, searchText: value, }) }), [] ) const handleChange = (value: string) => { callback(value) } return ( <div> <Input value={props.filter.searchText} placeholder="Search" variant="bordered" onValueChange={handleChange} /> </div> ) }

November 19, 2023 路 1 min 路 Khoa Pham

How to remove duplicates in Javascript array while keeping latest occurrence?

Issue #952 Use ES6 Map The Map object holds key-value pairs and remembers the original insertion order of the keys. Any value (both objects and primitive values) may be used as either a key or a value. type Deal = { name: string, link: string } removeDuplicates = (array: Deal[]) => { const map = new Map() array.forEach((item) => map.set(item.link, item)) return [...map.values()] } We might need to update tsconfig....

November 17, 2023 路 1 min 路 Khoa Pham