{"id":42156,"date":"2024-02-16T14:15:08","date_gmt":"2024-02-16T19:15:08","guid":{"rendered":"https:\/\/mjtsai.com\/blog\/?p=42156"},"modified":"2024-03-07T15:29:41","modified_gmt":"2024-03-07T20:29:41","slug":"the-swiftui-field-guide","status":"publish","type":"post","link":"https:\/\/mjtsai.com\/blog\/2024\/02\/16\/the-swiftui-field-guide\/","title":{"rendered":"The SwiftUI Field Guide"},"content":{"rendered":"

Chris Eidhof<\/a>:<\/p>\n

\n

We built this website to visually explain how the SwiftUI layout system works, and we hope you find it useful.<\/p>\n<\/blockquote>\n\n

To make the examples work, we ported large parts of SwiftUI’s layout system to TypeScript. While we’ve tested our implementation extensively, there might still be discrepancies between SwiftUI’s behavior and what you see here.<\/p><\/blockquote>\n\n

Christian Tietze<\/a>:<\/p>\n

\n

As a resource to learn, the approximations are more than good enough. They are excellent and by virtue of being interactive, they are also much better to get a feeling for everything than the SwiftUI documentation’s images can ever be. There’s only so much an API documentation can teach you before you need to observe how it really behaves.<\/p>\n

Since it’s in a browser, the preview is of course even faster than Xcode Previews would be, and without the crashes. (Oh, the crashes …)<\/p>\n<\/blockquote>\n\n

Update (2024-02-20): Chris Eidhof<\/a>:<\/p>\n

\n

There are so many little fun details in there: the site changes color when you’re in dark mode (and the “SwiftUI” colors change, too). The code is formatted using a pretty printer, making it responsive on mobile (this isn’t perfect, but in most examples it is better than doing nothing). The more complex animations<\/a> are done in “SwiftUI”.<\/p>\n<\/blockquote>\n\n

Update (2024-03-07): Helge Heß<\/a>:<\/p>\n

I think it is still worth mentioning “The SwiftUI Lab” site, which also has a great set of articles about SwiftUI. E.g. alignment guides<\/a>.<\/p><\/blockquote>","protected":false},"excerpt":{"rendered":"

Chris Eidhof: We built this website to visually explain how the SwiftUI layout system works, and we hope you find it useful. To make the examples work, we ported large parts of SwiftUI’s layout system to TypeScript. While we’ve tested our implementation extensively, there might still be discrepancies between SwiftUI’s behavior and what you see […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"apple_news_api_created_at":"2024-02-16T19:15:10Z","apple_news_api_id":"057ee32b-0fcb-4e7f-b20d-10f38118723d","apple_news_api_modified_at":"2024-03-07T20:29:44Z","apple_news_api_revision":"AAAAAAAAAAAAAAAAAAAAAQ==","apple_news_api_share_url":"https:\/\/apple.news\/ABX7jKw_LTn-yDRDzgRhyPQ","apple_news_coverimage":0,"apple_news_coverimage_caption":"","apple_news_is_hidden":false,"apple_news_is_paid":false,"apple_news_is_preview":false,"apple_news_is_sponsored":false,"apple_news_maturity_rating":"","apple_news_metadata":"\"\"","apple_news_pullquote":"","apple_news_pullquote_position":"","apple_news_slug":"","apple_news_sections":"\"\"","apple_news_suppress_video_url":false,"apple_news_use_image_component":false,"footnotes":""},"categories":[4],"tags":[164,31,2321,30,2385,71,901,1812],"class_list":["post-42156","post","type-post","status-publish","format-standard","hentry","category-programming-category","tag-documentation","tag-ios","tag-ios-17","tag-mac","tag-macos-14-sonoma","tag-programming","tag-swift-programming-language","tag-swiftui"],"apple_news_notices":[],"_links":{"self":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/42156","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/comments?post=42156"}],"version-history":[{"count":3,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/42156\/revisions"}],"predecessor-version":[{"id":42382,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/42156\/revisions\/42382"}],"wp:attachment":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/media?parent=42156"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/categories?post=42156"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/tags?post=42156"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}