I build my ideas #5 - 06/28/20
Teaching code, learning SwiftUI, WWDC, free lil apps
Credit @gizmosachin for the Memoji template
Teaching code
I love the moment when it “clicks.” You’ve been breaking your head over some code for what feels like forever, and you finally get it working. What a feeling.
I also know what it feels like to be getting started, not knowing where to begin. It’s overwhelming, and there’s seemingly too much to learn. It can be daunting.
What I love to do is help “demystify” some of the preconceived notions around coding. Let’s ignore all of the stuff you don’t need to know, and frankly that I don’t even know. Let’s focus on the parts that are relevant to you, that allow you to make you want to make.
Pictured: myself leaning over MacBook’s and doing the “power point”
I’ve been incredibly lucky to be in the position to help others learn to code through efforts like Hack Arizona, a collegiate hackathon that some friends and I started back in 2014. I love to see others making their ideas come to life, and for me to play a small part in empowering those ideas.
Recently I’ve been sharing a lot more about SwiftUI in particular. I haven’t been this excited by a UI framework in a long time. I see the value in learning it and the trajectory that the language itself is on, and I want others to see that as well. Particularly as a product designer, I want to show others that you can do it too.
I wanted to find a way to give back online with the extra time I have, and I’ve started my best attempt at teaching code by example with Recreate, a video series about recreating popular UI with SwiftUI. I learn best by example, and I hope that seeing how UI that you use everyday is pieced together can be a way for you to learn too. Look out for more on this from me soon.
My friend Eli is working on something really exciting along these lines, and I encourage that you check it out.
Learning SwiftUI
An example implementation of the Mail app for macOS in SwiftUI to show just how easy it is to recreate
I learn best by example. Many of the side projects I’ve worked on started by me digging around in some example code I found on GitHub and making changes until I get it doing what I want it to do.
I don’t know everything there is to know about SwiftUI, but I know just enough to piece together things I find online to get something working. I hope that this insight encourages you to know that you can, in fact, do it too.
I want to share how I learned SwiftUI in particular, and answer some of the questions I get around getting started.
How I learned
Jumping right in. Apple makes this really approachable with Swift Playgrounds. Not only is it a fun and interactive way to learn Swift, but you can do some seriously advanced stuff in it, too. For example, all of the videos shared on Recreate use Swift Playgrounds. I recommend messing around in a Playground. Here’s the starter code I use every single time to start a new Playground project when I want to use SwiftUI.
The important thing to know is that everything visible in your view happens inside of this body thing. The Text("Hello World") in the example above puts that text on the screen. Similar to Text, you can add a Rectangle() or an Ellipse(). You can put multiple things inside of a VStack { … } to place them on top of each other. Neat!
Xcode was really intimidating to me, but getting familiar with it is an important first step. Create a new iOS project that uses SwiftUI, give it a name, and dig in. ContentView.swift is your playground. Run the app in the simulator or on your phone. Add a Rectangle(). Add some more Text. Put stuff in a VStack. Repeat!
Creating a new project in Xcode
And what happens when I’m stuck, or I want to know how to do something? I Google. And 9 times out of 10 the result is from Hacking with Swift. I just wanna say that this is my absolute favorite SwiftUI resource. Paul gets straight to the point and shows you exactly how to do the thing you want to do.
For example: I want to change the color of that Text view I’ve got. I Google “how to add style to text swiftui”. Ah, Hacking with Swift is the top result! How to style text views with fonts, colors, line spacing, and more. Perfect, it looks like to change the color I just add .foregroundColor(Color.red). You’ll be sure to find just what you’re looking for most of the time by searching.
How you can learn
Where do I start?
Alongside jumping right in (refer to above), there are a few places that I’d recommend reading up on or watching videos from.
Hacking with Swift for answers to most of your SwiftUI questions and learning Swift in general.
Swift Playgrounds for fun, interactive tutorials and a place to mess around.
Apple has a wonderful Introducing SwiftUI online walkthrough and recent WWDC talk Introduction to SwiftUI
Recreate to see how to recreate popular UI using SwiftUI
A recent video of mine walking through using interaction and animation to recreate a Control Center widget, which shows starting with a SwiftUI Playground from scratch, with code.
I have a web background. Will I have difficulty learning SwiftUI?
That’s a great starting point. You’ll find that you end up structuring SwiftUI layout code similarly to how you might build an HTML page. Where you might create a paragraph of text in HTML like <p>Hello, world!</p> the SwiftUI equivalent is Text(“Hello, world!”)
I’m a designer. Should I learn SwiftUI?
My take: yes. Absolutely. I think SwiftUI is going to empower a new generation of designers, where designers are designing inside of Xcode using SwiftUI, and then handing off to engineers to hook stuff up. This is going to represent a paradigm shift in the design and code dynamic. Often I’ll completely skip Figma and “design” using SwiftUI when working on a side project once I’ve got a design in my head and know how to go about piecing the SwiftUI code together to get there.
WWDC
Apple absolutely killed it this year. I want to send a thank you to everyone behind the scenes that made it happen, it’s no small feat.
The sessions were so thoughtful and well considered. It’s so fascinating to get to know some of the personalities behind the platforms and the code. I had a lot of fun watching the videos, and will be referring back to them often for the near future.
Surprise and delight moments
.isPlaceholder(true) in SwiftUI, which makes it incredibly simple to generate a placeholder Widget view
ContainerRelativeShape() in iOS 14, which automatically makes a corner radius concentric to its parent shape without needing to manually specify corner radius values
A Newton appearance in Design for intelligence: Make friends with "The System"
Design for the iPadOS Pointer, which shows the extreme attention to detail and thoughtfulness around the iPad pointer.
Free lil apps
lil weather, lil draw, and lil calculator all used to be $0.99 on the App Store, but I’ve decided to make them all free moving forward. I want as many people as possible to be able to have the lil experience. Enjoy!
I started a whole thing by pointing out how Big Sur rounded corners seem to fit the iPad Pro hardware
I open-sourced a sample implementation of the Mail app for macOS in SwiftUI to show just how easy it is to recreate that layout.
I open-sourced a few lil widgets for you to play around with in Swift Playgrounds.
Check out the latest Recreate post: Recreate the Tinder home screen
At first I was a little intimidated thinking that you were someone with deep connections to the inner world of SwiftUI and had unattainable levels of code mastery but knowing you got started by simply messing around is a big motivator that I probably can get SwiftUI down too... keep this up man!
Great post!