DEV Community: yipcodes

Swift Codable Protocol

yipcodes — Wed, 21 Jun 2023 03:56:12 +0000

KISS: Codable protocol helps to translate json data format into a class object.

KISS Diagram:

Here is a short extraction from this well written article by wunderman thomson:

Codable is the combined protocol of Swift’s Decodable and Encodable protocols. Together they provide standard methods of decoding data for custom types and encoding data to be saved or transferred.

Below is an example of just how simple Codable can make the data parsing process. Notice that the first object, parsed without Codable, takes about 19 lines of code. The second object, using Codable, takes just 5 lines of code.

// JSON Data:
{
 "id": 1234,
 "src": "//api.someHost.com/version/someImageName.jpg",
 "caption": null
}


// Old Object:
struct Photo {
 let id: Int
 let src: URL
 let caption: String?

 init?(json: [String: Any]) {
 guard
 let id = json[“id”] as? Int,
 let srcString = json["src"] as? String,
 let src = URL(string: srcString)
 else { return nil }

 let caption = json["caption"] as? String

 self.id = id
 self.src = src
 self.caption = caption
 }
}


// New Codable Object:
struct Photo: Codable {
 let id: Int
 let src: URL
 let caption: String?
}

Play sound in SWIFT 5

yipcodes — Wed, 15 Jun 2022 08:37:45 +0000

import AVKit

class ViewController: UIViewController {
    var player: AVAudioPlayer?

    @IBAction func buttonPressed(_ sender: UIButton) {
        playSound(soundTitle:sender.currentTitle!)
    }

    func playSound(soundTitle:String) {
        let path = Bundle.main.path(forResource: "soundName",ofType:"mp3")

        let url = URL(fileURLWithPath: path!)

        do {
            player = try AVAudioPlayer(contentsOf: url)
            player?.play()

        } catch let error {
            print(error.localizedDescription)
        }
    }
}

HTML Boilerplate

yipcodes — Mon, 06 Jun 2022 08:47:42 +0000

HTML Boilerplate

Below is the standard html 5 code template, which is also known as a boilerplate. Something that can be reuse for different project.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>

  </body>
</html>

The DOCTYPE

The doctype declaration tells the browser to render as an HTML 5 document.

<!DOCTYPE html>

HTML Tag

The html tag tells the browser that between html opening and closing tags is going to be a html code. The html tag consist of head and body tags.

<html>

HEAD tag

The head tag holds the information about the web page, and tells the browser how to handle the page. It can display a title for the website, as well as setting the meta data charset to a specific encoding.

The standard charset for encoding is "utf-8".

  <head>
    <meta charset="utf-8">
    <title></title>
  </head>

In the older browser, different languages uses different symbols, thus the encoding might be different and become unreadable if the browser set the unicode wrongly. At the present, most of the browser is using standard "utf-8", as it contains all the standard international symbols for all different languages.

This link contains all the unicode character for "utf-8", ranging from different languages and even emojis 💙.

Here is an article on more details about unicode.

More about META tag

<head>
  <meta charset="UTF-8">
  <meta name="description" content="Free Web tutorials">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="author" content="John Doe">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

more about meta tag can be found here.

There are other meta elements that we can set, for example the viewport which set how the webpage scale and display accordingly to the devices (mobile responsive).

The description are the information that the search engine crawl and search the web description and display it.

BODY tag

<body>

Body tag contains all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.

Conclusion

Every html page should have a html boilerplate template. It should contains the doctype, meta, title and an empty body tag to get ready for content coding!