DEV Community: Jonathan Giardino

3 Random Reasons to love SwiftUI

Jonathan Giardino — Sat, 20 Jun 2020 10:14:20 +0000

A few weeks ago I started my journey to become an expert in SwiftUI, you can read about it here.

I am a Javascript developer so many "programming" concepts are quite easy to pick up, however, when I started getting into SwiftUI I felt a feeling of joy and excitement to what concerns building UIs with a completely different approach.

Every day that I spend learning this framework I feel more and more enthusiastic about it.

Today, I am going to list 3 Random Reasons to join me in loving this new fantastic way of building iOS native apps, and I am not even going deep.

1. Goodbye Grid and Flexbox

I don't think Grid and Flexbox are bad, in fact, they are actually an amazing way to layout web and mobile apps. However, as the most performing athletes or the most popular and successful people on the planet remind us every day, we can always do better.

This is what happened, in my opinion with SwiftUI.

VStack (Vertical Stack), HStack (Horizontal Stack), and ZStack (Depth Stack, from Z-Index) are the three containers that speed the development of a layout tremendously. As you can deduct they help you to layout your elements vertically, horizontally, or layered on each other.

Plus, each element in SwiftUI starts positioning itself from the center, which is really handy.

Let's say I want to have three squares with some text, one on top in the middle, the other two below stacked horizontally. All this needs to be on a circled shape that works as a background.

This is how we would do it in SwiftUI:

ZStack { 
//The order of the layers goes from top to bottom, the first element will be in the back and accordingly all the following on top of each other.
            Circle().foregroundColor(.gray)
            VStack {
//Here we stack vertically a text element and a HStack that in turn has two text elements but this time they will layout horizontally
                Text("Hello, World!")
                    .frame(width: 100 , height: 100)
                    .background(Color(.cyan))
                HStack {
                    Text("No Need of Grid")
                        .frame(width: 100 , height: 100)
                        .background(Color(.systemPink))
                    Text("..Or Flexbox!")
                        .frame(width: 100 , height: 100)
                        .background(Color(.yellow))
                }
            }
        }

Don't you love it already?

2.Spacers

What if we want to move the first square on top of the screen and the other two on the bottom.

Easy peasy, we just insert a Spacer() between them and this will push them all the way to the end of the screen, and the direction will be based on the StackView they belong to, which in this case is a VStack, hence vertically.

ZStack {
            Circle().foregroundColor(.gray)
            VStack {
                Text("Hello, World!")
                    .frame(width: 100 , height: 100)
                    .background(Color(.cyan))

                Spacer()

                HStack {
                    Text("No Need of Grid")
                        .frame(width: 100 , height: 100)
                        .background(Color(.systemPink))
                    Text("..Or Flexbox!")
                        .frame(width: 100 , height: 100)
                        .background(Color(.yellow))
                }
            }
        }

3. Live Canvas

Are you tired like me to rebuild the project every time you edit a corner radius of a button or change the spacing or the font of a paragraph?

Well, SwiftUI has a Live Canvas that show the changes almost to the second. It's really impressive and speeds up UI development amazingly.

Any feedback, comment or advice is super appreciated, in fact it is encouraged.

Let's connect!

Website: jonathangiardino.com

Twitter: @jonathan_gardn

Medium: @jonathangiardino

Photo by Louis Hansel @shotsoflouis on Unsplash

3 things I've learned about Swift in the last week.

Jonathan Giardino — Tue, 09 Jun 2020 09:35:41 +0000

Here I am with another episode of My 100 Days of SwiftUI journey.

In the last few days, I went through some fundamentals of the Swift language like functions, closures, and structs, and as a Frontend developer used to write Javascript I've found lots of commonalities, however when switching to another language some things are named or used differently.

Additionally, Javascript (unless using Typescript) is not a strongly typed language which makes it different from Swift or other programming languages.

In this article, I won't go over the fundamentals of Swift but I would like to highlight 3 things that I did not know and that I could not relate as a programmer, coming from Javascript.

1. Inout parameters

All the parameters that are passed into Swift function cannot be changed as they are constants, so we basically return a new value every time we call that function with a new argument in the parameter.

Thanks to the inout parameters we can change the value directly inside the function instead of returning a new one, and that will reflect the original value outside that function.

For instance, let's say we want to raise a number to the tenth power:

func decuplicate(number: inout Int) {
    number *= 10
}

In this case we are not just making operation to multiply but we are multiplying and assigning the new value to number.

To use this function we need to create a variable to store the Int we are going to use in it and when we call that function we are going to use an ampersand before the variable name.

var newNum = 2 
decuplicate(number: &newNum)

I was a bit confused to be honest but this short explanation on HackingWithSwift helped me.

2. Capturing values in closures

When you return a closure in a function, that closure can access or "capture" the values present in that function and keep track of them even when they no longer exist.

In this example the function eat() returns a closure, that accordingly accepts a string as parameter and returns void (so basically return nothing, it just prints to the console):

func eat() -> (String) -> Void {
    return {
        print("I'm going to eat some \($0)")
    }
}

Then we can call that function and simply use the closure inside it.

let meal = eat()
meal("Fruit")

//prints "I'm going to eat some Fruit"

If we create a value inside the function eat() , for example to keep track of how many times we eat. Our closure will capture that value which will remain active within the closure each time we call the function.

func eat() -> (String) -> Void {
    var mealCounter = 1

    return {
        print("Meals for today: \(mealCounter). I'm going to eat some \($0)")
        mealCounter += 1
    }
}

And when we call the function our mealCounter will increase each time eat() is called.

meal("Beans and Eggs")
meal("Tofu")
meal("Salad")
meal("Pizza")

//mealCounter will increase to 5 in this case

3. Struct and Property observers

When we create an instance of a struct, sometimes we want something to happen each time a property changes.

Let's say we have created a struct that tracks how much distance we have done with our running or cycling:

struct Distance {
    var action: String
    var miles: Int
}

Then we create an instance for our session:

var session = Distance(action: "Running", miles: 0)
session.miles = 2
session.miles = 7
session.miles = 12

Wouldn't be cool if each time we call the miles property and update it we also notify the user about the distance?

Well, we can do that with Property observers lie didSet()

struct Distance {
    var action: String
    var miles: Int {
        didSet {
            print("You have been \(action) for \(miles)miles")
        }
    }
}

Any feedback, comment or advice is super appreciated, in fact, it is encouraged.

Let's connect!

Website: jonathangiardino.com

Twitter: @jonathan_gardn

Medium: @jonathangiardino

Fundamentals and surprising discoveries in Swift (Bonus at the end)

Jonathan Giardino — Wed, 03 Jun 2020 15:58:11 +0000

In my previous post, My 100 Days of SwiftUI begin here, I explained the process that brought me to start this blog series and this is the first episode of the journey, all aboard!

Variables, simple data types, and string interpolation

When going through really basic fundamentals concepts are simple, but like often happens, one ends up finding out little surprising details. That is exactly what happened.

For instance, I knew already about Multi-line strings, but what I did not know is that the start and end with three double quote marks must on their own line.

var str = """
This goes
over multiple
lines
"""

Another example is that we can split big integers using underscores, for better readability. This came really out of nowhere! 😅

Am I the only one who finds this cool?

var billion = 1_000_000_000

Complex types

Coming from a Javascript background it was easy enough for me to understand arrays, sets, and tuples, but I found out a new interesting feature that I did not know about.

When creating an empty collection we can use the pretty common syntax below:

//Empty Dictionary
var person = [String: String]()

//Empty Array
var age = [Int]()

But this is not possible when creating a Set instead, where we need to use angle brackets:

var random = Set<String>()

Fun fact, we can use angle brackets everywhere if we want, also in Dictionaries and Arrays, maybe this would look good and give consistency, don't you think?

var person = Dictionary<String, String>()
var age = Array<Int>()
var random = Set<String>()

As promised a little BONUS that might be nothing, but it was so cool for me to find out!

While going through the #100DaysOfSwiftUI, I am doing another course on Udemy taught by Robert Petras(@RobertPetras) for fun and to learn some little tricks to add on my new and first iOS app.

At the and of a section, Robert explains how to create custom Stickers to send in Messages, and I was really excited about how easy it is.

All you need to do is to go to the root folder in Xcode, and in the general panel on the bottom-left click on the plus button inside the "Project" sidebar.

Here you can type sticker and select "Sticker Pack Extension", click next and create the new Sticker folder.

And easy enough, inside that folder created:

Navigate to the .xcassets folder
Add the correct icon sizes that will show in the Messages app as an option to attach the stickers inside the App icon
Add the stickers images inside the Sticker Pack folder
Build your app and when opening the Messages app in the options to attach your new Sticker pack will appear!

I was more excited than when I first created a form in Javascript 😂

Any feedback, comment or advice is super appreciated, in fact, it is encouraged.

Let's connect!
Website: jonathangiardino.com
Twitter: @jonathan_gardn
Medium: @jonathangiardino

My 100 Days of SwiftUI begin here

Jonathan Giardino — Tue, 02 Jun 2020 06:57:10 +0000

Here I am, writing my first blog post ever.

I will write a journal about switching from web and front-end development to iOS development sharing the topics and my learning process, as well as my understanding and point of view.

Why am I doing this? Why would one start to blog?
I googled and searched for this as well and tons of answers came up:

Fame or creating a personal brand
Making a side income
Having an online presence
Share Your Knowledge
Become an authority in your industry
the list goes on and on...

Then, a few days ago I was running and listening to Syntax, a podcast about Web development hosted by Wes Bos(@wesbos) and Scott Tolinski(@stolinski), and they were talking exactly about it.

To sum up, if you want to start blogging, YouTubing or podcasting about something you need to ask yourself "why?", otherwise it can get really tough to keep up with it.

So I did, and the answer is that I want to document each step of my journey, to strengthen my learning process and knowledge about the topic, but also to inspire other fellow beginners to feel proud and happy about learning new things.

It is easy to feel frustrated in this field, especially when watching tutorials or taking courses. It's easy to compare ourselves to the major experts in the fields, or feeling "not capable" when after watching a tutorial we open the editor and we don't know where to start.

The truth is that each little step we take, it's a huge chunk of knowledge we did not have yesterday, and that is a success.

That's my reason, that's why I started blogging about my journey.
To strengthen my knowledge and to literally visualize my progress at each blog post.

Now, why iOS, why Swift?

Apple has been in my life forever, in different shapes and colors.
I have been working in Apple Premium Resellers, Apple Store, in Corporate and I have been an Apple enthusiast for most of my adult life.

About one month and half ago, I decided to look into Swift for the first time and fell in love with it. I bought a great course by Angela Yu(@yu_angela) on Udemy and studied every day until I reached half the course.

I felt that I was grasping the fundamentals but I was doing nothing to retain and make this language mine.

There I decided that I needed to build an app from scratch, because in the course I came across so many concepts that it felt overwhelming to keep up with.

(I am currently designing the app and will start building once I complete the wireframes!)

I put that course on pending for the time being and embarked on the #100DaysOfSwiftUI, a 100 days journey/commitment created by Paul Hudson(@twostraws) to study and practice Swift and SwiftUI 1 hour a day, starting over from the basics.

And this is what I will be doing while building my first app!

Any feedback, comment or advice is super appreciated, in fact it is encouraged.

Let's connect!
Website: jonathangiardino.com
Twitter: @jonathan_gardn
Medium: @jonathangiardino

Photo by Dmitry Chernyshov on Unsplash