DEV Community: KeeyboardKeda

Visual Design - Week 1 Review

KeeyboardKeda — Sat, 08 Jan 2022 18:33:04 +0000

Hello, hello, hello ! I'm taking a pivot from coding and taking a free visual design course to learn more about UI design. The free course I am taking is through pathunboundCheck it out!

Goal: To blog at the end of each week as a review.
_
Week 1:Visual Design Tools - Starting with Figma!

Visual Design improves a digital product by focusing on images, typography, layout, and color allowing the user to easily navigate the product. The overall design should be based on the user's needs.

*Figma *

Frames are art boards with preset dimensions of a desktop, different models of iPhones and Androids. You can create your own frame and set your own dimensions as well.

Effects consist of a drop shadow, inner shadow, layer blur, and background blur. Layer Blur affects the layer you have selected like an image and you can set the level of blur. Background blur affects what is directly behind a shape and not the layer.

Components are used to create a shape that you will displayed multiple times on an app or website. An example would be a button that will be used in several places. Creating a component and using it instances will make it easier if there needs to be a change made to all of them. The change will be made to the component and all of its instances will update. You can create different components(example, different versions of a button) and use a slash naming scheme (button/small/secondary/icon/disabled/). All the button components can be selected and combined into a variant.

Variants(Component sets)
Steps to create a variant:

Create a shape
Add properties to it
Name it using the slash naming scheme: button/checked/small/
Click the component button
Create a variant from the right panel
Select the new variant and rename
Rename the property to describe the variant options

Example, state(property), unchecked(variant), checked(variant). You are allowed to toggle between the two variants.

Vectors allow you to see all the nodes on a shape or text so you can make more detailed adjustments. CMD + E allows you to see the vector.

Boolean Operators are four formulas used to combine shapes. Intersect only includes what overlaps, exclude doesn't include what overlaps on both sides, union doesn't include the center that overlaps and subtract only shows the bottom layer of the two shapes combined.

Until next time!

#100DaysOfSwift: Project 17

KeeyboardKeda — Sun, 07 Nov 2021 20:32:42 +0000

Project 17 was a game in space where the user has to avoid objects coming their way.

Key Takeaways:

SKEmitterNode was used to set the background image of space with star particles. SKSpriteNode was used to display the player's spaceship image. SKLabelNode was used as the score label.
advanceSimulationTime() was used to give the effect of the star particles filling up the screen. This is a method of the emitter where you can simulate 10 seconds passing in the emitter and it will update the particles as if they were created 10 seconds ago.
Per-pixel collision detection is used when images you want to use are an irregular shape. The collisions are based on actual pixels from one object touching actual pixels in another.
Timer is used to run code after a period of time has passed, either once or repeatedly and it has five parameters:
1. timeInterval: how many seconds you want the delay to be
2. target: what object should be told when the timer starts
3. selector: what method should be called on the object when the timer starts
4. userInfo: any context you want to provide
5. repeats: whether time should repeat
linearDamping was used to make the objects the user has to avoid in space consistently move across the screen. angularDamping was used to make the objects consistently rotate. They are both added to the physicsBody and set to zero.

#100DaysOfSwift: Project 16

KeeyboardKeda — Sun, 07 Nov 2021 19:45:04 +0000

For project 16, I learned about MapKit which is really simple to create!

Key Takeaways:

The view controller should be set as the delegate for the map view because it will control or modify the changes that are made to the map view.
MkPinAnnotation creates a pin on the map.
A delegate is a controller object used to control or modify behavior of another object.
addAnnotations can be used to add multiple annotations at once to the map.

#100DaysOfSwift: Project 15

KeeyboardKeda — Tue, 02 Nov 2021 01:44:28 +0000

Hello !!

This project taught me about animation. It was quite simple. We used a penguin to showcase different animations on the screen by using switch/case statements.

Key Takeaways:

animate(withDuration:) takes two closures. One with the switch/case statements and the second one is a completion closure.
Animation closures do not need [weak self] because there is no risk of strong reference cycles.

3. CGAffineTransform is added to a views transform property. Example, self.imageView.transform = CGAffineTransform(scaleX: 2, y: 2). This make the image 2x bigger than its normal size.

self.imageView.transform = .identity is used to clear the view of any animations added to the transform property.

5.Two animations can happen at the same time. Example, the following code fades the penguin out and adds a background color of green.

self.imageView.alpha = 0.1
self.imageView.backgroundColor = UIColor.green

#100DaysOfSwift: Project 14

KeeyboardKeda — Wed, 27 Oct 2021 01:55:05 +0000

Hello !

For this project I created a Whack a Penguin game by using SpriteKit. GameScene.swift is where the layout of the game was created such as the holes the penguins will emerge from, and the score. A subclass of SKNode was created to hold all the functionality of the holes like when the penguin hides and is visible.

Key Takeaways:

SKCropNode uses an image as a cropping mask where anything that is colored will be visible and anything in the transparent part will be invisible.
The SKAction called moveBy:(x:,y:,duration) is used to move the penguin upwards and downwards out of the hole.
The character node was added to the crop node and the crop node was added to the hole. This line of code (let whackSlot = node.parent?.parent as? WhackSlot) was needed because the player tapped the penguin sprite node and not the hole. This code gets the parent of the parent node and typecast it as a WhackSlot. SKCropNode only crops nodes that are placed inside of it.
Objects are sorted by Z position, where higher numbers are placed on top of the lower numbers. For example, zPosition = - 1 would be behind zPosition = 1.
Action sequences are in an array and execute in order, not at the same time.

#100DaysOfSwift: Project 13

KeeyboardKeda — Mon, 25 Oct 2021 23:04:21 +0000

Hello, project 13 introduced me to CIContext, CIFilter, and UIImageWriteToSavedPhotosAlbum. The project was to allow the user to add filters to a picture and save it in their photos album.

Key Takeaways:

IBOulet connects the storyboard to your code and is used by Xcode to understand which properties and methods are relevant to IB. IBAction is a way of making your storyboard layout trigger code.
Picker.delegate : delegate receives notifications when the user picks an image, movie or exits the picker interface. Picker must have a delegate because it decides when to dismiss the picker interface.
After the user selects the image they want to add a filter to, we added a method where we check if the image selected was an UIImage and input it as the value for the variable currentImage. Example,

func imagePickerController(_picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.Infokey: Any]){

guard let image = info[.editedImage] as? UIImage else {return}

dismiss(animated: true)

currentImage = image
}

CIImage is created from the UIImage selected by the user that is stored in the currentImage property and KCIInputImageKey is a key for the CIImage object to use as an input image. Example,

let beginImage = CIImage(image: currentImage)
currentFilter.setValue(beginImage, forKey: KCIInputImageKey)

CIContext stands for Core Image Context and it handles rending. CIFilter store the filer the user activated.

#100DaysOfSwift : Project 12

KeeyboardKeda — Sun, 17 Oct 2021 14:54:08 +0000

In this project I learned about UserDefaults, NSCoding and reviewed the Codable protocol. UserDefaults lets you store program settings, user settings and runs as soon as the app loads.

Key Takeaways:

When using the nil coalescing operator you want to see if the code on the left side of the operator "??" has a value and if not then use the value on the right side of the operator. Example,

let array = defaults.object(forkey: "SavedArray") as? [String] ?? String

If there is a value for the key SavedArray then set it as the value for the constant array, if not then set it to be a new string array.

NSKeyedArchiver.archivedData(withRootOgbject:, requiringSecureCoding:) encodes(writes) an object graph with the given root object into a data representation, optionally requiring secure coding. An object graph is your object, plus other objects it refers to and so on.
NSKeyedUnarchiver.unarchivTopLevelObjectWithData() decodes(reads) archived object graph and returns the object root.

4.Using "if let" and "try?" helps to save data only when converting into to a Data object was successful.

#100DaysOfSwift: Project 11

KeeyboardKeda — Thu, 14 Oct 2021 00:32:45 +0000

Hello,

I've decided that I wanted to recap what I've learned from the projects that I am doing with #100DaysOfSwift as a way to help me remember. I will start with Project 11 which was a game we created in SpriteKit called Pachinko.

Project 11 Recap:

A SKScene is the parent of a node and nodes are organized in a tree-like structure to the parent. A frame is a rectangle that contains the contents of the node. Anything in the didMove() method displays on the screen as soon as it loads. The body of this method holds the code for the background image, the edit labels, the slots, the score, and the bouncers.

The touchesBegan ()method detects whenever the user touches the screen. The body of this method holds the feature of the user being able to toggle between "Edit" and "Done". In the editing mode the user can add blocks of different lengths to create obstacles when they try to drop a ball into the slots. This method also holds the code for creating a ball when the screen is touched and allowing the ball to fall.

Key Takeaways:

Anchor points determine what coordinates are used to position children. The bottom left corner of the screen is the considered Y:0.
SKSpriteNode is used to to grab images from Assets.xcassets.
Set means a set that stores an object representing the location, size, movement, and force of touch occurring on the screen. I.e the user touches the screen and the ball appears and its at a certain location, a certain size, etc.
physicsbody = SKPhysicsBody(edgeLoopFrom: frame) creates an impassible boundary around the frame.
collisionBitMask determines what object a node bounces off and contactTestBitMask determines which collisions are reported.

Recap: My First Week of Learning Swift...Part 2

KeeyboardKeda — Sat, 26 Jun 2021 19:07:40 +0000

Days 5 & 6:

Functions and Parameters

Functions allow us to re-use code in different places. If the code in the function is changed, it will be updated everywhere that function is being used. It is common to use functions to break up large code to make it easier to follow. All parameters are constants which mean they cannot be changed. To change them the keyword inout must be used and it will change inside and outside the function. Parameters in functions are given a name and a type. For example, name: string. They can be given an external and internal label but if we prefer not to use an external label it can be replaced with an underscore. We can give a parameter a default value. For example,...new: bool = true. Variadic functions accept any number of parameters of the same type. Any parameter can become variadic by adding (...) after its type. We can throw functions by using enums to describe the errors we can throw.Its good to know that Swift wont let us run an error-throwing function by accident.

Closures

There is so much that goes into closures so I'm going to be brief. Functions can be used like types. We can create a function and assign it to a variable, call the function using the variable and even pass it into another function as a parameter. This process is called closures. Closures accept parameters and can be used as a parameter. They can also return values. If a closure is the last value in a function we can use a special syntax called trailing closure syntax. This passes the closure after the function inside the braces.
If we want to use closures as parameters when they accept parameters just add the parameter inside the parentheses of () -> Void. Void can be replaced with any type of data to force the closure to return a value.

If you read part 1 and part 2, thank you and I hope it made sense to you. If not, that ok too! I wanted to do this to deepen what I have learned so far.

Until tomorrow !

Recap: Part 1 of My First Week of Learning Swift

KeeyboardKeda — Sat, 26 Jun 2021 18:54:48 +0000

Hello ! I want to recap my first week of learning Swift. This will be a brief explanation of topics covered. If you write and speak it, it will stick.

Days 1 and 2:

Strings: Multi-Line Strings and String Interpolation

This was a review for me in a way because I started learning Swift on codecademy.com. Multi-line strings and string interpolation were new for me. Multi-line strings are used when we want line breaks in our string. In order to do that we need two sets of three quotations wrapped around the string and the quotations must be on their own line. Multi-line string can also be used when we want our code to look neat but do not want the line breaks. To do this, just add a backslash after each line.

String interpolation allows us to place a variable in our string by adding a backslash and wrapping the variable in parentheses. (variable).

Arrays, Tuples and Sets

Arrays, tuples, and sets are used to store several values into a single value. However, they do have their differences. Arrays are a collection of values that can be accessed by calling the items numerical position. In arrays the numeric position starts with 0 a.k.a zero-based. Tuples store several values into a single value but items cannot be added or removed, item types cannot be changed and they can be accessed by numerical positions or by their name. Sets store values but they are unordered when called and items cannot appear twice.

Dictionaries: Keys, Values and Strings

They do exactly what you think they do. Dictionaries use keys and values. I like to think of it like the key is the word we are looking up in a dictionary and the key is the meaning of the word. In this sense it holds data about the key.

Arrays, sets and dictionaries are collections. When creating empty collections arrays and dictionaries have their own special syntax.

Enums are a way of defining groups of related values using using case.We are able to add associated values to each case.

Days 3 & 4:

Operators

Here are different operators and what they do. Compound assignment operators (+=, -=, *=) are a short way of writing variable = variable + 50. Comparison operators (== and !=) are used to check for equality and other comparison operators like <=, >= , < , and > are used to compare values. The And (&&) and Or (||) operators are used to combine conditions. The ternary operator is used as a short way of writing a condition. Range operators have two options:

1. The half-open range operator, which is a range that includes its final value (1...5 would be 1,2,3,4,5).

2. The closed range operator, which is a range that excludes the final value(1..<5 would be 1,2,3,4).

Conditions

Conditions are used to determine an outcome if a statement is true or false and what to do in each instance. If statements can be read as if x is = xx then run this code. If and else if statements are used in conditions.Else if statements are in between if and else statements and offer another code to run if the condition is different.

Switch statements are used when we have a lot of if else statements. It makes it easier to read and understand. Swift will run each case but if you want to continue to the next case use the keyword fallthrough before the default.

Loops

There are for loops, while loops, a way to exit loops and even skip items in a loop. For loops are used with arrays and ranges with the keywords "for" and "in". Every time the loop goes around it pulls out an item and assign it to a constant. It can be read as for every number(the constant) in numbers run this code. We give a while loop a condition to check and it loops the code until the condition fails. To exit a loop we must use the break keyword and to skip items in a loop we use the continue keyword.

To be continued...

#100DaysOfSwift: Day 8

KeeyboardKeda — Fri, 25 Jun 2021 02:09:00 +0000

Hey !

Today, I learned about structures but for short struct. They are given their own variables, constants, and their own functions and are used in any way. Variables inside of struct are called stored properties and computed properties. You can use a struct when you have fixed data that you want to send or receive multiple times.
I learned about all that goes into structs, like the following:

Computed properties run code to figure out the structs value.
Property observers which lets you run code before or after any property changes.
Methods are functions inside of structs and the functions can use the properties of the struct as needed. Methods belong to structs, enums, and classes.
Mutating methods - the keyword mutating is used when you want to change properties in a struct. By default, structs are constants.
Strings and arrays have their own properties and methods !

Overall, I think today was a good learning day.

Until tomorrow !

#100DaysOfSwift: Day 7

KeeyboardKeda — Wed, 23 Jun 2021 02:49:37 +0000

Today, I covered the second part of closures. I think its cool. Can I write it on my own? - No. Can I read the code to see if its valid? - Yes. I was doing great until I got to returning closures from functions.

When I read that this is the beginning syntax :

func travel() -> (String) -> Void

I understood that the first arrow specifies the functions return value and the second arrow specifies the closures return value. So, I read it as the function has to return a string and the closure will return nothing.

I came across this test question: This code is valid in Swift - true or false?

func paintingMaker(medium: String) -> (String) -> Void {
if medium == "watercolor" {
return {
print("I'm going to paint some flowers.")
}
} else {
return {
print("I'm going to paint a landscape.")
}
}
}

let maker = paintingMaker (medium: "watercolor")
maker()

Sorry about the format.

It was false and the reason given was : paintingMaker() says it will return a closure that accepts a string and returns nothing, but the closure it returns accepts no parameters.

That's when I realized that its read as the function value is a string and the closure value will accept it but will return nothing. Right?

Until tomorrow!