DEV Community: CometChat

25 Developer Blogs to Keep You at the Top of Your Game

kushal khandelwal — Wed, 16 Jun 2021 12:32:38 +0000

The field of software engineering is constantly developing. (ba dum tss) With tech, frameworks, and programming best practices changing every day—even the best developers risk falling behind.

Nobody really wants to dedicate large chunks of their time to continued education. We get that. Fortunately, the internet is littered with developer blogs. And, we can definitely innovate, grow and learn from the trials and errors of others so we don't have to waste time ourselves.

If you're part of team "Never Stop Learning", check out some of our favorite developer blogs:

1. Stack Overflow

With over 100 million visitors each month, Stack Overflow is one of the most popular websites in the world. In this case, the popularity is well deserved. The question-and-answer website for developers was built around the idea of knowledge sharing and reuse. It encourages its readers to reuse what others have already learned, created and proven to build new things of value. An emphasis on two-way conversation and altruistic mentorship makes Stack Overflow much more than a developer blog—it’s a powerful developer community.

Recommended blog: If you’re like every other developer in the world this question may interest you. (Okay, technically it has only been viewed 9.5 million times)

2. DEV Community

Have you considered starting or contributing to a developer blog? If so, DEV Community is a great place to get your feet wet. The team at DEV works diligently to foster an open and welcoming environment, making Dev.to arguably the most positive and friendly development community on the internet. While this blog does skew toward beginners and enthusiastic contributors, it’s still chock-full of entertaining and informative articles. Plus, with more than 600,000 software developers, DEV Community is a go-to place for collaboration and networked learning.

Recommended blog: Dive in with this article on full stack development.

3. HackerNoon

HackerNoon is one of the best tech blogs out there. Covering everything from AI news and blockchain to gaming, it’s known for free, high-quality, in-depth tech stories. The wide variety of article topics ensures there’s something for everyone—whether you’re a recent grad trying to rock their first job, a single dad learning to code on the side or a leading woman in tech looking for a safe place to share and grow.

Recommended blog: Hop on the NFT train with this article by Hacker Noon.

4. freeCodeCamp

freeCodeCamp is exactly that—a nonprofit community that helps developers learn to code through challenges and projects. They offer multiple, self-paced certifications including responsive web design, data visualization, scientific computing with python, information security and more. Each certification takes about 300 hours of dedicated learning time to complete, but you can jump around from challenge to challenge in freeCodeCamp’s open curriculum depending on your goals. In addition to coding challenges, you can gain experience by contributing to open source projects used by other nonprofit organizations. And, if you get stuck, there is a chat server where you can talk to other campers and alumni to get help and make connections.

Recommended blog: Tired of writing long if/else statements in JavaScript? freeCodeCamp has got you covered with this guide on ternary operators.

5. Indie Hackers

Indie Hackers is where the best developer blogs and the best entrepreneur blogs meet (and swap war stories). An indie hacker, as defined by the website founder himself, is a person building an online project that can generate revenue. The Indie Hackers blog is geared towards helping independent entrepreneurs become and remain profitable—with owners of successful side projects and founders of profitable startups sharing their tips and tricks. If you’re an aspiring entrepreneur, Indie Hacker provides a great forum for shared knowledge, ideas and support.

Recommended blog: Not every venture is a success, but Indie Hackers knows you can learn just as much (if not more) from the failures. See for yourself with this startup story.

6. A List Apart

A List Apart started as a mailing list in 1997. That’s right, old-fashioned letter writing at it’s finest. The website launched in 1998 and, since then, has grown into a must-read software engineering blog for curious coding minds. A List Apart explores the design, development and meaning of web content with a special focus on web standards and best practices. With a clear, well-organized topic index, A List Apart makes it easy to find and consume high-quality, evergreen content on the developer topic of your choosing.

Recommended blog: New to A List Apart? Get started with this great article for new readers.

7. GeeksforGeeks

GeeksforGeeks is written for the yearning programmer within all of us. Or, at least within all of us geeks. Built around the motto “Don’t Learn Alone”, Geeks is a developer blog with everything—articles, tutorials, webinars, courses, etc. But it’s primary goal is to help hungry programmers prepare for the interviews and meetings that will land them their dream job.

Recommended blog: Start on the path to your dream job with GeekforGeeks 100 days of Code.

8. HoneyPot

.cult by Honeypot exists to tell the untold developer stories that help developers around the world know their worth. And, more importantly, how to fight for themselves professionally. With documentaries, podcasts and articles designed to help developers navigate their careers, .cult by HoneyPot answers all the questions you didn’t even know you had.

Recommended blog: Figure out where you stand in the market with HoneyPot’s 2021 developer salary report.

9. Several People Are Coding

A spinoff of Slack’s “Several People Are Typing” blog, this slack engineering blog features content from the entire Slack engineering team. As a company that’s constantly changing and quickly growing, Slack has seen it all. Several People Are Coding provides an opportunity to learn from the Slack team’s experience with insightful articles on the challenges they’ve faced and the lessons they’ve learned.

Recommended blog: Get a behind-scenes-look at how Slack’s top developers think through iterative improvements on their product in this blog.

10. Coding Horror

Ask a software engineer what their favorite developer blog is and there’s a good chance you’ll hear, “Coding Horror.” Written by the creator of Stack Overflow, Coding Horror offers a refreshing take on the day-to-day realities (and struggles) of living the developer life. People love this blog. It’s honest, it’s witty and it covers the topics that software developers really care about.

Recommended blog: As more and more companies go remote, developers find themselves competing with people all over the world for the same jobs. Learn what you can do to stand out in this blog post that proves Coding Horror may have always been ahead of its time.

11. The Daily WTF

The Daily WTF is exactly what you’d expect it to be—a user-submitted blog that highlights the WTF moments of real coders around the globe. It’s a “What Not To Do” guide for developing software, whether independently or on a team. Join for the disastrous coding examples, stay for the “Thank God That’s Not My Problem” anecdotes.

Recommended blog: Speaking of “Thank God That’s Not My Problem” anecdotes, you’ll definitely want to read about the big red button.

12. Hacker News

Run by YCombinator, Hacker News is a social news site focused on software development and entrepreneurship. The digital forum consists of user-submitted entries. Each entry is ranked and vetted by fellow developers and entrepreneurs in the software space, ensuring that only high-quality and relevant posts reach the top of the discussion board. It’s the go-to spot of many in the industry for developer news and updates.

Recommended blog: See what’s popular on Hacker News right now.

13. Product Hunt

If you’re interested in keeping up with the best new products in tech, you’ll be interested in Product Hunt. It’s a curation of user-submitted products with easy options for finding, sharing and evaluating each piece of new tech. Whether you’re looking to buy, looking to build or just looking to judge—there’s something for everyone.

Recommended blog: Get started with one of the most upvoted products in Product Hunt’s history.

14. MIT Free Courses

The concept of MIT OpenCourseWare grew out of a desire to spread knowledge and encourage collaboration among scholars around the world. What does this mean for you? It means that you can now take MIT courses for free online. That’s right. You can get an MIT education from the comfort of your own home, without paying a dime. You won’t have the degree, but you will have all the knowledge that comes from attending one of the best Universities for Computer Science in the world.

Recommended blog: Jump start your education by signing up for one of the most popular MIT free courses today.

15. Slashdot

Self-branded as "News for Nerds. Stuff that Matters", Slashdot is a large, interactive social news website. It features blog posts and news stories related to technology and coding and boasts a robust community of readers. If you’re a nerd looking for a place to discuss the “stuff that matters”, the Slashdot community is calling your name.

Recommended blog: Explore the Slashdot Hall of Fame.

16. CSS-Tricks

Don’t let the name fool you, CSS-Tricks is not just about CSS. Really, CSS-Tricks is a developer blog about web development (and everything that entails). With a team of top-notch staff writers and loads of guest authors, CSS-Tricks offers high-quality content on a variety of tech topics including HTML, Typography, Accessibility, JavaScript, Forms and, yes, CSS.

Recommended blog: Expand your knowledge on one of today’s hot developer topics, Flexbox, with this comprehensive Flexbox guide.

17. The Netflix Tech Blog

An underground company you’ve probably never heard of, Netflix is an American content platform and production company. The Netflix Tech Blog offers a peek into Netflix behind-the-scenes including designs, builds and operations. It also features writings from the entire Netflix developer team on anything and everything tech-related.

Recommended blog: Ever wonder how Netflix serves up the background images you see? Me neither. But this article was very interesting nonetheless.

18. Dream.In.Code

Dream.In.Code, or DIC for short, is a leading online community for programmers and web developers. DIC has gained a reputation in the tech community for providing expert dev help for students and professionals alike. And, with more than 400 new members registering every day, DIC is clearly a go-to hub for developers.

Recommended blog: See what’s trending on Dream.In.Code right now.

19. Google Developers

Through Google Developers, the internet’s leading entity seeks to inspire coders across the globe. Bursting with tutorials, tips, and tools, the Google Developers blog content spans across Google’s many consoles for developers including the Google API Console, Google Play Store Developer Console and others.

Recommended blog: Machine learning and AI are all the rage, but not many developers really know how to get started. This article does a great job of helping developers understand how to bring Machine Learning into their projects.

20.DZone

DZone, in their own words, serves technology professionals with the knowledge, tools, and strategies they need to build the future. If that sounds like something that may interest you, you’re not alone. DZone is one of the world’s largest online communities—with more than 1 million developers already signed up. Dzone’s developer blog covers everything from agile to the cloud, devops, big data, integration, performance and more.

Recommended blog: Writing JavaScript can get messy, this article explains how to keep things neat and tidy with the Revealing Module pattern.

21. Women Who Code

Women Who Code is a global nonprofit with a community of tech professionals dedicated to supporting one another in their career goals. The Women Who Code developer blog provides tutorials, articles, videos and other educational materials designed to help women excel in the tech space. The community consists of career-aged tech professionals at every level of the industry including software engineers, consultants, executives, data scientists, students, etc.

Recommended blog: Women Who Code discusses self-advocacy, communication and the importance of not being afraid to rock the boat in this edition of Engineer to Engineer.

22. Smashing Magazine

Smashing Magazine focuses on quality over quantity. Each article is carefully curated, edited and prepared by a small team of passionate professionals. The tech blog is committed to helping its readers nourish productivity, improve their design and development skills and perfect their work-life balance. Get coding tips, tricks and ideas that you know you can trust.

Recommended blog: This detailed guide on CSS pseudo selectors is a great example of the level of quality you can expect from Smashing Magazine.

23. Simple Programmer

Simple Programmer focuses on distilling complex dev topics into simple, easy-to-understand content. With an emphasis on holistic content, Simple Programmer offers a wide variety of topics on everything from the top reasons you should use python programming language to tackling the mental aspect of being a software developer.

Recommended blog: In order to succeed as a software developer you need to be well rounded—an idea that Simple Programmer explores in this blog.

24. Reddit

Hungry for more? Reddit’s community-based hubs are a great resource for developers. Get started with some of our favorite subreddits:

r/codetogether
r/coding
r/compsci
r/ComputerScience
r/cscareerquestions
r/dailyprogrammer
r/diycompsci
r/dotnet
r/fosshelpwanted
r/gamedev
r/LearnWebDesign
r/netsec
r/progether
r/programming
r/programmingtools
r/prograrticles
r/softwarerequest
r/tinycode
r/web_design
r/webdev

25. CometChat Blog

The CometChat blog just so happens to be a personal favorite of ours—with articles and insights for developers, entrepreneurs and tech enthusiasts everywhere. We love what we do and we love talking about tech with … anyone who will listen (or even better, talk back). If you’re looking to learn a lot and be entertained a little, we hope you’ll check out a few more of our articles.

Build a jQuery Chat App

NJOKU SAMSON EBERE — Fri, 11 Jun 2021 11:44:44 +0000

Introduction

Using a chat application can be very joyous. As we communicate with friends, families, partners and others, we feel a lot better. This is why developers around the world want to add this feature to their applications. But giving such a beautiful experience through writing of code is no child's play. It takes a whole lot of resources to make that happen. But there is good news!

The good news is that this feature has been made available for you by a team that understands your needs. We are talking of the CometChat team.

CometChat can be used to build chat features into our websites or mobile applications. The best part of it is that it supports 10+ languages/platforms. Even jQuery which many developers might feel is outdated is also been supported by CometChat. To prove that, I will be using this tutorial to guide you through building a Chat application using jQuery and CometChat. What we will build will look like this:

Before we proceed, allow me to introduce you to CometChat

CometChat

CometChat provides Text chat & video calling solutions for your website and apps to quickly connect your users with each other - patients with doctors, buyers with sellers, teachers with students, gamers, community users, event attendees and more.

For this tutorial, we will be focusing on the CometChat Pro product. It houses highly customizable and easy-to-use SDKs, UI kits, Extensions and Plugins. It also supports more than 10 programming languages and platforms as you may see in the docs here.

With these information, you can see that what you can do with CometChat is only limited to your imagination. It could be solutions on Social community, Marketplace, Dating, On Demand, Edu-Tech, Live Stream and so on. Just Dream and Build with the support of CometChat.

Something really special about CometChat is that you are given a 30 days trial period after which you can decide to continue or not. But why will you not continue with such an awesome gift?

jQuery

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

Prerequisite

This tutorial assumes that you already have basic knowledge of jQuery and firebase. You can catch up with the following links if you are new to those technologies:

jQuery: https://jquery.com/
Firebase: https://firebase.google.com/
Firebase Auth: https://firebase.google.com/docs/auth?authuser=0

Setup CometChat Account and Chat Widget

The first thing we need for this is to create an account with CometChat Pro. So let's get to that...

Create CometChat Pro Account

Follow the next steps to quickly create a CometChat Pro account

Visit https://app.cometchat.com/signup, signup and login

You should be on your dashboard like mine below:

Set Up a Chat Widget

The chat widget helps us to configure CometChat in our jQuery website from our CometChat Pro dashboard. So we can control how the Chat functions on our jQuery website from our CometChat dashboard. To do this, we need to create an app in CometChat.

Create an App

In your dashboard, click on the Add New App button

Fill out the screen that pops up and click on the Add App button

You should get this congratulatory popup. Click on the Get Started to be redirected to the dashboard of the app you just created

You should now be in that App's dashboard like so:

All Good! Your App has been created. You also have 30 days to do all you want for free

Continue Chat Widget Setup

By the left side of the App's dashboard you will find a side menu - a long list of menu items. Do the following:

Click on the Chat Widget link

You should now be presented with a button on the page to add new Chat Widget. Click on the button

And that is all that you need to create a Chat Widget. It has been created automatically on that one click

Notice that it contains details for installation by the right side of the screen. We will be using that in a short while.

Build a jQuery Website

At this juncture, we have paused CometChat. Let's build our jQuery website where CometChat will be integrated later. The next steps will show us how to do that:

Create a new folder with the name CometChat-jQuery


mkdir CometChat-jQuery

Create 5 files inside the folder:
1. index.html
2. login.html
3. init.js
4. index.js
5. login.js
In the index.html file, enter the following code


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>CometChat jQuery</title>
    <!-- firebase -->
    <script src="https://www.gstatic.com/firebasejs/4.8.2/firebase.js"></script>
    <script src="https://www.gstatic.com/firebasejs/4.8.2/firebase-auth.js"></script>
  </head>
  <body>
    <div id="main_container" style="display: none">
      <h1>Welcome to CometChat jQuery</h1>
      <button onclick="logout();">logout</button>
    </div>

<!-- jQuery -->
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"
    ></script>

    <!-- local scripts -->
    <script src="init.js"></script>
    <script src="index.js"></script>
  </body>
</html>

Enter the following code in the login.html:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>CometChat jQuery Login</title>

    <!-- firebase -->
    <script src="https://www.gstatic.com/firebasejs/4.8.2/firebase.js"></script>
    <script src="https://www.gstatic.com/firebasejs/4.8.2/firebase-auth.js"></script>
    <script src="https://cdn.firebase.com/libs/firebaseui/2.5.1/firebaseui.js"></script>
    <link
      type="text/css"
      rel="stylesheet"
      href="https://cdn.firebase.com/libs/firebaseui/2.5.1/firebaseui.css"
    />
  </head>
  <body>
    <!-- The surrounding HTML is left untouched by FirebaseUI.
         Your app may use that space for branding, controls and other customizations.-->
    <h1 style="text-align: center">Login To Chat</h1>
    <div id="firebaseui-auth-container"></div>

<!-- jQuery -->
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"
    ></script>

    <script src="init.js"></script>
    <script src="login.js"></script>
  </body>
</html>

In the init.js file, enter the following code:


var fireBase = fireBase || firebase;
var hasInit = false;
var config = {
    // ENTER CONFIG HERE
  };

if(!hasInit){
    firebase.initializeApp(config);
    hasInit = true;
}

Go to your firebase console
Create a project
Set the authentication method to email/password
Copy firebase configuration
Paste it within the init.js file where it reads: // ENTER CONFIG HERE
Next, The following code will be in the login.js file


// FirebaseUI config.
var uiConfig = {
  signInSuccessUrl: "index.html",
  signInOptions: [
    // Leave the lines as is for the providers you want to offer your users.
    firebase.auth.EmailAuthProvider.PROVIDER_ID,
  ],
  // Terms of service url.
  tosUrl: "index.html",
};

// Initialize the FirebaseUI Widget using Firebase.
var ui = new firebaseui.auth.AuthUI(firebase.auth());
// The start method will wait until the DOM is loaded.
ui.start("#firebaseui-auth-container", uiConfig);

For the index.js file, enter the following code:


var mainContainer = $("#main_container");

var logout = function () {
  firebase
    .auth()
    .signOut()
    .then(
      function () {
        console.log("success");
        window.location.replace("login.html");
      },
      function () {}
    );
};

var init = function () {
  firebase.auth().onAuthStateChanged(function (user) {
    if (user) {
      // User is signed in.
      console.log("stay");
      mainContainer.css("display", "");
    } else {
      // No user is signed in.
      mainContainer.css("display", "none");
      console.log("redirect");
      window.location.replace("login.html");
    }
  });
};

init();

Having done all those work, load the login.html file on your browser and you should have the following page

If the user has not been signed in before, then you will get the Create Account page to sign up before being redirected to the index.html page

What the jQuery Website does?
This website is an authentication application. It takes an email and if the email already exist, it requires the password and log the user in. On the other hand, if the email do no exist yet in the database, it asks the user for details to create a new account. The following images demonstrates the application

Create Account

Login

Awesome!!!

Integrate CometChat into the jQuery Website

The time has now arrived for us to make the jQuery Website we just built a chat application using CometChat. To make that happen, we will be doing the following:

Initialize CometChat and CometChatWidget
Add the CometChat and CometChatWidget CDN to our html files
Add the CometChat Logout Logic
Determine if a logged in user is a new or returning user
Add the CometChat Login Logic
Add the CometChat Create User Logic

Let's do this!

STEP 1: Initialize CometChat and CometChatWidget

Initializing CometChat and CometChatWidget tells our application that we are ready to use CometChat in our application.

Let's do this by adding the following code in our init.js file:


(function () {
  // cometchat initialization
  var appID = "appID";
  var region = "region ";
  var appSetting = new CometChat.AppSettingsBuilder()
    .subscribePresenceForAllUsers()
    .setRegion(region)
    .build();
  CometChat.init(appID, appSetting).then(
    () => {
      console.log("Initialization completed successfully");
      // You can now call login function.
    },
    (error) => {
      console.log("Initialization failed with error:", error);
      // Check the reason for error and take appropriate action.
    }
  );
})();

// cometchat widget initialization
window.addEventListener("DOMContentLoaded", (event) => {
  CometChatWidget.init({
    appID: "appID",
    appRegion: "region",
    authKey: "authKey",
  }).then(
    (response) => {
      console.log("Initialization (CometChatWidget) completed successfully");
    },
    (error) => {
      console.log("Initialization (CometChatWidget) failed with error:", error);
      //Check the reason for error and take appropriate action.
    }
  );
});

Ensure to replace appID, region and authKey with yours

What's going in the code above?

In the code you just entered, CometChat and CometChatWidget initializations are being automatically invoked once your application loads completely on the browser. The self-invoking function (function{})() ensures that this happens. Now we are ready to use CometChat and CometChatWidget in our application.

STEP2: Add the CometChat and CometChatWidget CDN to our `html` files

In the index.html

Add the following CometChat and CometChatWidget CDN to the head tag just below the firebase CDN:


    <!-- cometchat -->
    <script
      type="text/javascript"
      src="https://unpkg.com/@cometchat-pro/chat@2.3.1/CometChat.js"
    ></script>

    <script
      defer
      src="https://widget-js.cometchat.io/v2/cometchatwidget.js"
    ></script>

In the body, just before the script tags, add the following line:


<div id="cometchat"></div>

This is where the CometChat Widget will live. You will see that in a bit

In the login.html

Add the following CometChat and CometChatWidget CDN to the head tag just below the firebase CDN:


    <!-- cometchat -->
    <script type="text/javascript" src="https://unpkg.com/@cometchat-pro/chat@2.3.1/CometChat.js"></script>
    <script
      defer
      src="https://widget-js.cometchat.io/v2/cometchatwidget.js"
    ></script>

We will move to index.js file where all the remaining logic will happen. We will be focusing on the init function.

The init function is used to check the authentication status of a user. If the user is authenticated, the user is redirected or allowed to stay on the index.html page


if (user) {
      // User is signed in.
      console.log("stay");
      mainContainer.css("display", "");
    }

else the user is redirected to the login.html page.

else {
      // No user is signed in.
      mainContainer.css("display", "none");
      console.log("redirect");
      window.location.replace("login.html");
    }

Now, our **CometChat* logic and create user logic will live in the if block above and the logout logic will live in the else block*

Let's Continue!

STEP 3: Add the CometChat Logout Logic

Enter the following code in the else block just before mainContainer.css("display", "none"); line:


CometChat.logout().then(
        () => {
          //Logout completed successfully
          console.log("Logout completed successfully");
        },
        (error) => {
          //Logout failed with exception
          console.log("Logout failed with exception:", { error });
        }
      );

And that is all about the logout. It's that simple!

STEP 4: Determine if a logged in user is a new or returning user

Since the login and create user for our jQuery website isn't clearly separated, it is important to determine if the authenticated user is already existing on our CometChat User db. If the user is not yet registered on our CometChat User db, then we will add such user.

Before we proceed collect the user details in the if block of our init function:


// user details
        const userId = user.uid;
        const userName = user.displayName;

To determine the authentication status of a user, enter the following code in the if block of our init function:


var UID = "UID";
CometChat.getUser(UID).then(
  user => {
    console.log("User details fetched for user:", user);
    // login and launch chat here in embedded mode
  },
  error => {
    console.log("User details fetching failed with error:", error);
    // create new user, login and launch chat here docked mode
  }
);

How will this code function?

After checking for a user details, if the user exist, the user block returns the user and we can login the user and launch the chat widget here in embedded layout. If on the other hand, the user is new, the error block will return no user and we will use that block to create the new user, login and launch the chat widget here in docked layout. We will talk more about the layouts (embedded and docked) of displaying the chat widget in a bit

We move!

STEP 5: Add the CometChat Login Logic

In the response block add the following code to login the user:


CometChatWidget.login({
              uid: userId,
            }).then(
              (response) => {
                console.log("User login successful:", response);
              },
              (error) => {
                console.log("User login failed with error:", error);
                //Check the reason for error and take appropriate action.
              }
            );

Do not forget to replace uid with your own details

Once the login is successful, in the then block, enter the following code to launch the CometChat widget:


CometChatWidget.launch({
                    "widgetID": "WIDGET_ID",
                    "target": "#cometchat",
                    "roundedCorners": "true",
                    "height": "600px",
                    "width": "800px",
                    "defaultID": 'superhero1', //default UID (user) or GUID (group) to show,
                    "defaultType": 'user' //user or group
                });

Do not forget to replace WIDGET_ID with your own details

Thumbs Up!!! You can now login an existing user into CometChat. They can also chat with the "friends" already existing in the database.

We are proceeding to the Create User logic

STEP 6: Add the CometChat Create User Logic

Now, let's get back to when we determined if a user already exist in STEP 4. We want to work on the error block (That is when the user do not already exist in our CometChat database).

Add the following code in the error block to Create a new User:


let apiKey = "API_KEY";
var uid = userId;
var name = userDisplayName;

var user = new CometChat.User(uid);

user.setName(name);

CometChat.createUser(user, apiKey).then(
    user => {
        console.log("user created", user);
    },error => {
        console.log("error", error);
    }
)

Do not forget to replace apiKey, uid and name with your own details

Having successfully created that user, let's login and launch the CometChat Widget in docked mode. Enter the following code in the user block above:


CometChatWidget.login({
                "uid": "UID"
            }).then(response => {
                CometChatWidget.launch({
                    "widgetID": "WIDGET_ID",
                    "docked": "true",
                    "alignment": "left", //left or right
                    "roundedCorners": "true",
                    "height": "450px",
                    "width": "400px",
                    "defaultID": 'superhero1', //default UID (user) or GUID (group) to show,
                    "defaultType": 'user' //user or group
                });
            }, error => {
                console.log("User login failed with error:", error);
                //Check the reason for error and take appropriate action.
            });

Do not forget to replace WIDGET_ID and uid with your own details

That is it with the application!!! We can now register new users who are joining our app. Isn't that awesome?

Test the app and see for yourself. You can follow the progress of the test via your browser's console. See mine below:

New User

Returning User

If you check the users in your dashboard, you should see a new user added like mine below:

Embedded Layout vs Docked Layout

CometChat Widget can be displayed in styles. This can be done in two (2) ways:

Docked Layout
Embedded Layout

Docked Layout

This is the floating chat that appears on the pages of a website. You will notice that a new user is redirected to such a chat when logged in for the first time to the app we just created.

Notice the toggle button used to remove or bring up the chat widget

Embedded Layout

The Embedded Layout is static. It is not toggled by a button like the Docked Layout. You will notice that a returning user is redirected to such a chat when logged in after the first time to the app we just created.

Notice that it is embedded on the page and can't be toggled

CometChat Widget Customization

Let's now talk more about the chat widget. We created that widget so that we can control the chat on our website from our CometChat dashboard. So we will need to go back to the chat widget dashboard and see how to make some adjustments.

Notice that we have switched from installation to customization in section 3

This is where you customize the Chat widget to look and feel as you desire. The part labelled 1 represent the sidebar and navigation and the part labelled 2 represent the main body of the chat. When you click either of those sections, the settings are displayed in section 3 (Customization) and you can then make needed changes. There is also the general settings - we can change the color of the toggle button for the docked chat layout there.

Let's make a few changes to our chat widget

Allow users to text chat each other
1. Click on the section 2 of our chat widget
2. Click on the customization tab in section 3
3. Click on Messages accordion tab
4. Click on Send a Message
5. Turn on the Enable button

Allow users to voice chat each other
1. Click on the section 2 of our chat widget
2. Click on the customization tab in section 3
3. Click on Photos, Videos & Files accordion tab
4. Click on Send Voice Notes
5. Turn on the Enable button

Allow users to video call each other
1. Click on the section 2 of our chat widget
2. Click on the customization tab in section 3
3. Click on Photos, Videos & Files accordion tab
4. Click on Send Photos & Videos
5. Turn on the Enable button

Group Chat
1. Click on the section 2 of our chat widget
2. Click on the customization tab in section 3
3. Click on Groups accordion tab
4. Turn on all the buttons there

Add CSS

If you notice, our application is done but it is a bit off when it comes to styling. Let's make it more appealing with a bit of CSS.

Create a new file with the name: style.css
Add the following code to the file


body{
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;

    padding: 0;
    margin: 0;
}

/* main container */
#main_container{
    background-color: #03A9F4;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    color: white;
}

#main_container button{
    background-color: red;
    padding: 10px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
}

#main_container button:hover{
    background-color: white;
    padding: 10px;
    border: 1px solid red;
    color: red;
}

/* cometchat */
#cometchat{
    margin: 10px;
    display: flex;
    justify-content: center;
}

Add the following line to the head tag of the html files


<!-- css -->
    <link rel="stylesheet" href="style.css">

Now our app looks like this:

Log in with 2 different accounts on different browsers and try the following:

User to User chat in action

Group Chat in action

Creating Group and adding members in action

How Awesome!!!

Conclusion

I really feel like not concluding this tutorial but it is important that I let you explore the hidden treasures stored up in CometChat for developers.

We were able to see how to create an account with CometChat, how to create a chat widget and integrate it into our jQuery website. We also went ahead to customize the chat widget to our taste and as a bonus, we styled our application to be even more appealing.

I will indulge you to take out more time and re-visit the chat widget customization. You will notice that there are so many options we didn't explore together. Please play around with them and see what you can come up with.

You can find the source code to jQuery Chat App we just built here

If you're considering expanding this chat app, here are a few resources to consider:

16 Thought-Provoking Resources for Developers

kushal khandelwal — Fri, 28 May 2021 07:33:09 +0000

Continued commitment to learning is one way developers can stay at the top of their game throughout their career. We all have our favorite resources (hello, Stack Overflow!) that we turn to time and time again, but sometimes, it’s good to switch it up and check out new material that offers fresh takes on the issues you’re dealing with as a web developer.

Below we’re sharing a curated list for the dev community of the most interesting reads, podcasts and videos that have inspired us recently. Check it out, and then share any resources you’ve found insightful or helpful in the comments.

Keeping in mind that information comes in different forms, this roundup has been divided into 3 categories - blogs, podcasts, and videos.

Blog Posts

These five blogs stood out for their creativity and resourcefulness. Some had amazing advice for developers and some managed to accumulate a lot of information for developers under one title.

1. Engineer to Engineer: Don't Be Afraid to Rock the Boat | Women Who Code

This interview between Elizabeth Funk and Samantha Abbot goes beyond the code. They get in deep about being assertive in the workplace (especially as a woman) and asking for what is deserved.
Samantha Abbot’s story about being a queer and female in a male-dominated industry is full of self-advocation, witty humor, self-affirmation, and dialogue on working in teams. This is a must-read for people anxiously trying to navigate the workplace.

Link to Article

2. Do You Need to Localize Your Website? | A List Apart

This blog is published on a website with a niche for web developers. This piece is extremely useful for those trying to make difficult decisions on website localization. It is a great article for the polyglot web developer who needs to manage marketing, audience, and localization to help make a business successful.
Full of personal anecdotes, there are plenty of tips that a web developer can take into account. For a piece discussing website localization, it was refreshing to read something that questions the need itself before diving into the specifics.

Link to Article

3. The Purposes and Benefits of Cross-Functional Collaboration | .cult by Honeypot

An article that captures the need of having interdisciplinary people work on the same project in the 21st century could not be written at a more opportune time. This piece communicates the benefits of intersectional teamwork in the developer’s world while keeping in mind the real work environment for the developer.
As a developer in a managerial position, this piece will convince you of the need for versatile backgrounds in a developer team and even give you the step-by-step to make it happen. A great read for anyone trying to improve team collaboration in the workplace.

Link to Article

4. So You Want to Use AI: Do You Build, or Do You Buy? | ReadWrite

So You Want to Use AI is an adapted piece from the book “Real World AI.” Author Wilson Pang makes it clear that there is no one solution to problems when it comes to AI. This piece written by the CTO of a Silicon Valley firm was promising to begin with, and as the article progressed, Pang breaks down the process of working with AI in a company.
The questions he poses here make for a proficient tool for any decision-maker. A great resource to check out before making any expensive decisions.

Link to Article

5. Sex Doesn't Sell, GitHub Does | Hacker Noon

If you’ve thought about the courage it takes for people to develop open-source software, this piece is exactly what you’re looking for. Marius, the author of this piece, manages to create an open discussion about the future of OSS and how licensing could very well be the only way for the developing world to continue to grow at big paces. This spins the story of paid software into an optimistic one and challenges people who want to retain free software in a very well thought-out manner.
Link to Article

6. 25 Developer Blogs to Keep You at the Top of Your Game | CometChat Blog

A blog that is a collection of all the best places for developers to find resources is a great resource in itself. Instead of scouring the internet for reliable sources, this article does that for you and gives you a good head-start on your self-growth calendar.

Link to Article

Podcasts

While there are plenty of podcasts out there that discuss coding, a select few manage to discuss solutions. As a problem-solver, knowing what tools you have available, be it in terms of new software, updates, or mental fortitude - these top 5 podcast episodes are a pleasure to listen to.

1. Software Engineering Radio - Episode 456: Tomer Shiran on Data Lakes

This episode from the Software Engineering Radio is a discussion on Data Lakes, a new take on storing and processing data that exceeds beyond the data warehouse. With an industry expert, Tomer, this discussion manages to talk in-depth about the tools one would need to store, access, and analyze data from these lakes.

Link to Episode

2. Developer Tea - Changing Work Environments and Availability Bias

This entire podcast series is dedicated to providing clarity, perspective, and purpose to developers - no matter what stage of their career they’re in. During the pandemic, most developers were shifted to a WFH model, and that was followed by a very different workflow. This episode allows the developer to think differently about working from home and make it work for them.

Link to Episode

3. Software Daily - Makepath: Geospatial Technology with Brendan Collins

This episode is a great rundown for an invaluable tool in the belt of a developer - working with geospatial libraries. The CEO of Makepath, a firm that helps other people in solving their problems by using geospatial technology talks about how people use it and why it’s so effective. With so much new in the field, their conversation provides specifics for problem-solving using geospatial data and still manages to make it easy to follow.

Link to Episode

4. The Changelog - Curl is a full-time job (and turns 23)

This episode talks to developers of Client URL (curl), a project that to a certain degree, makes the internet what it is today. Daniel Stenberg talks about making his passion project into his full-time career and how that took place. The opportunities received and missed along the way and the future of library development shifting from C to Rust. This veteran developer has plenty of insight for everyone.

Link to Episode

5. Fragmented: The Software Podcast - 208: Developing Software at Startups with Jason Roberts

The most entertaining of this list, this episode takes us through the struggles of a start-up developer. From almost becoming a billionaire to awkward parties full of developers, this conversation is full of tidbits that make you smile. The conversation is light and is perfect for anyone who wants to listen about the very interesting life of Jason Roberts (the almost-CTO of uber).

Link to Episode

YouTube Videos

YouTube is an all-familiar place for developers, after all, free tutorials and code-along for the public are invaluable to anyone learning how to code, or expanding their skillset. While several folks make videos about coding on YouTube, not many can boast the quality and entertainment that the videos on this list provide. The videos in this list go above and beyond just coding, and actually create content that a developer can relate to.

1. The KEY To Thinking Like a Programmer (Fix This Or Keep Struggling)

This video is great for anyone who feels like they’re facing imposter syndrome. For veteran developers, this video will most likely re-assure them of their skills, and for newbie developers, it will give them a strong footing. A well-put video for all kinds of developers.

Link to Channel

2. Build a Music Player | Vanilla JavaScript - YouTube

If you’re looking for a side project to do with any extra time you have because of WFH, this video is definitely worth the watch. Traversy Media makes JavaScript look simple and that is a talent in itself. At the end of this video, you’ll build an aesthetically pleasing media player with HTML, JavaScript, and CSS. The final product of this project is so good, it secured a spot in our top 5 tech videos for April.

Link to Channel

3. I Built a Trading Bot to let Subscribers Trade my $25,000 on Twitch

This video is both chaotic and entertaining at the same time. For someone who wants to get ‘close’ to their subscribers, Joma really invested a lot of money to do it. A share trading bot that runs through twitch commands may seem like an eccentric project, but before you judge it, watch it for yourself.

Link to Channel

4. Create a Fantastic BOUNCY Line with SVG & JS!

A video that explains how to code and design a bouncy line is perfect for anyone who wants to wet their hands with some robust design principles and obscure designing. Learning to use SVG and JS together is an added bonus to this very fun project that makes it a must-watch.

Link To Channel

5. The Most Productive Developers Of All Time

A video that talks about 4 people who changed the world and made billions with their keyboard? Sign me up! As a developer wanting to improve productivity and code more every day, this video will inspire you to do more and tell you some intriguing facts along the way.

Link to Channel

6. How to Create a Chat App with React in 30 Mins

With almost every company wanting to add text, voice or video calling in their apps, communication tech is at its peak right now. Developer Eddie Jaoude walks us through how to create chat in React using CometChat's React Chat UI Kit.
It's insanely simple to build, allows for some really cool customization, comes with loads of features right out of the box, and only takes about 30 minutes to implement.

Link to Channel

What developer resources are you digging right now? Share in comments below!

SwiftUI Architecture: Observable Objects, the Environment and Combine

marinbenc🐧 — Tue, 11 Feb 2020 07:53:03 +0000

By now you already have a good understanding of how SwiftUI views work. You create a state variable and a body computed variable that spits out a view based on that state. Whenever the state changes, SwiftUI calls body and updates what's on the screen.

This paradigm works incredibly well, but there are some special cases in this paradigm that need extra care. One of those cases is when you want to share a piece of state between two views.

There are a couple of ways to share state in SwiftUI:

Pass the current value of the state in the initializer.
Use a binding.
Use observable environment objects.

In this part of the SwiftUI course, you'll take a look at these ways to share data. You'll get an understanding of when and how to share data, as well as the advantages and disadvantages of these three approaches.

As always, you can find a link to the finished project code on GitHub.

Sharing data with View children and stateless Views

First, let's take a look at the simplest possible way to share data: Passing it in the initializer of a view. You already used the pattern when you created the AvatarView:

let isOnline: Bool

init(url: URL?, isOnline: Bool) {
  ...
  self.isOnline = isOnline
  ...
}

var body: some View {
  ...
  Circle()
    .foregroundColor(isOnline ? .green : .gray)
  ...
}

You gave AvatarView a property called isOnline that you pass in its initializer. You made the online indicator green or gray based on this property.

You later called this initializer from ContactRow with a value of whether the user is online or not:

AvatarView(url: nil, isOnline: item.contact.isOnline)

Because SwiftUI is reactive, whenever the contact's status changes to offline, SwiftUI will know to rebuild the avatar view with the new value.

This isn't anything fancy, it's just plain old Swift initializers. That's the biggest advantage of this approach: Simplicity. Here, AvatarView has no state, all properties are marked with let, which means it's completely immutable. Instead of responding to state changes, it will be rebuilt when the state changes. This type of immutable view has different names in different reactive frameworks: functional, stateless... dumb. (Yes, dumb.)

Using stateless views has a lot of advantages. For starters, they're simple. You don't have to track or debug state changes. You can easily preview and test the view without having to modify its state. Stateless views are decoupled from your frameworks and libraries, whether it's networking with Alamofire or a database framework like Core Data. They're easy to reuse and even copy and paste to different parts of the app or entirely different projects.

As you can see, statelessness is a good thing. You can't always use this pattern, though. To pass state into the initializer, you need to be the view creating the stateless view. If you think of the view hierarchy as a tree, passing state in the initializer is only possible to the view's direct children.

Think hard about whether a view needs to track its internal state variables or if you can get away with passing the state in the initializer. Try to use stateless views as much as you can.

I am creating this course in collaboration with CometChat, a modern chat platform to help you add chat to you Swift app. During the next few weeks, we’ll be releasing installments of our free SwiftUI course here on dev.to! In the course, you’ll dive deep into SwiftUI by building a real-world production-scale chat app, learning SwiftUI in a practical way, on a scale larger than a simple example app. Follow me to get notified of future parts of this course! You can also follow @CometChat on Twitter see the course of CometChat’s blog.

Using `Binding` for two-way data sharing between a view and its children

In families, just like in SwiftUI, parents are usually the ones telling kids the state of the world. Sometimes, however, your dad might not know how to install Viber to call your uncle. In that case, you're the one passing information to your parents.

This happens in SwiftUI too. Passing data in the initializer is great if you want to pass data to the view's children. If you want the reverse, however, you need a binding.

Bindings enable two-way communication between your views. They're usually used with interactive views like text fields, toggles, checkboxes and similar. They allow two views to share a single piece of state.

For instance, when you created ErrorTextField, you used a binding to a String instead of a state variable.

struct ErrorTextField: View {
  ...
  let text: Binding<String>
  ...
}

Later, you initialized this view in the login screen by passing it the binding:

struct LoginView: View {

  @State private var email = ""

  var body: some View {
    ErrorTextField(
      ...
      text: $email,
      ...)
  }
}

In the above code, the $ operator converted a state to a binding. A binding is a kind of pointer to a piece of state. LoginView owns the state, but by giving ErrorTextField a binding to that state, it lets the text field change the value of the state.

This means that both LoginView and ErrorTextField can change the value of the email, and both will always update to match the latest value.

Passing bindings, just like passing the state values directly, is used when you want to share state between a parent view and its direct children. As opposed to passing state values, though, a binding adds statefulness to the component, making it more complex to read, write, test and preview. Keep that in mind when using this approach.

Sharing data between unrelated views

The above two ways of sharing data have all been between two directly linked views. Sometimes, you want to share data between two unrelated screens. For instance, the currently logged in user is shared between the feed, the settings screen and the profile screen. Or, there might be a registration flow with multiple screens that stores the data of each screen at a shared location.

One way to do this is to use bindings or passing the user directly to child views. The disadvantage of that approach is that it's far too cumbersome. You'd have to pass the user to each child separately. For any change that one of the child views make, you'd have to roll back up to the main view to update the user, and then propagate back down the hierarchy so all views update.

Instead, it's much easier to have a single place where the user is stored. Whenever any view changes the user, all other views update instantly.

You can do this type of global state sharing using a combination of Combine and SwiftUI features: Observable objects and environment objects.

Creating Combine's Observable Objects in SwiftUI

Even though this is a SwiftUI course, we'll take a brief detour and talk a little about Combine. Combine is a Swift framework that enables you to track changes to some value over time. Instead of using a plain String, Combine gives you a Publisher that emits a series of strings over time. If you're familiar with RxSwift or ReactiveCocoa, Combine does the same thing, but it's built into Swift.

SwiftUI uses Combine to track changes to state variables. While you might see the email as a String, SwiftUI sees it as a series of different string values over time. Using Combine, it can listen for changes to the value and update the view accordingly.

You can do the same thing SwiftUI does by using Combine's ObservableObject to track changes to any value, whether it's in a View or an entirely different object. ObservableObject object tracks changes to its properties and publishes a Combine event whenever a change occurs.

Let's create a new observable object to track the currently logged in user. Create a new plain Swift file and name it AppStore.swift. No, you're not building the iOS App Store, instead, you're making a shared storage location for different views in your app.

Add the following class to the file:

import SwiftUI
import Combine

class AppStore: ObservableObject {

  struct AppState {
    var currentUser: Contact?
  }

  @Published private(set) var state = AppState(currentUser: nil)

  func setCurrentUser(_ user: Contact?) {
    state.currentUser = user
  }

}

First, you import both Combine and SwiftUI. Then, you declare a class that conforms to the ObservableObject protocol. Inside the class, you write a nested struct that will hold the current user and create a property of that type.

The ObservableObject protocol has one requirement: objectWillChange. This is a Combine Publisher, an object that fires a series of events whenever the observed object changes. Thankfully, you don't have to implement this yourself.

By marking state with @Published, you tell Combine to automatically generate an implementation of objectWillChange that tracks changes to state and publishes an event whenever you change the state. Thanks, Combine!

You also mark the property with private(set). If you haven't seen this before, this is an access control modifier in Swift that makes the property private for modification, but public for access. This means that everyone can read state, but only AppStore can change the state. This is just an insurance policy: When dealing with shared state, it's always a good idea to limit how other objects can change that state.

Finally, you add a method that lets users of this class change the state by setting a new user. Whenever this method is called, currentUser is changed, and AppStore publishes an event telling everyone that's listening that the state has changed.

For instance, a profile screen could listen to these changes and update the user it's showing when a new one is set. Since you can have multiple listeners, different unrelated views can be updated all at once whenever AppState changes.

Adding Observable Objects to the Environment in SwiftUI

Writing the observable object is only one part of the equation, though. You still need a way to create the object and share it with different views in your app. You'll do this using SwiftUI's Environment.

Each view and all of its children exist in an environment. The environment is a shared pool of floating objects and values that the view or any of its children can grab and use at any time.

You'll add an instance of AppStore to the environment of your root view. This will enable any view in your app to grab the store and its data.

Remember, the SceneDelegate is where you create your root view, so open SceneDelegate.swift and add a new property:

let store = AppStore()

This is the store you'll add to the environment. Since you need to add it to your root component, call the environmentObject method on the contentView:

let contentView: some View = NavigationView {
  WelcomeView()
}.environmentObject(store)

This will add the store to the environment.

Now that the store is in there, it's time to fetch it from different views in your app. Start by opening LoginView.swift. Add the following property to the struct:

@EnvironmentObject private var store: AppStore

By declaring the property an @EnvironmentObject, you tell SwiftUI to automatically look for an object of that type in the environment. No need to manually instantiate or look for it!

At the bottom of login, add a line to save a new user in the store:

store.setCurrentUser(Contact(name: "Me", avatar: nil, id: "me", isOnline: true))

When a user logs in, they will get saved in the app store. This same app store is shared with other views, which will update automatically. One of those is ContactsView: Open ContactsView.swift.

Instead of hard-coding a user, you'll change the view to grab the user in the app store. First, fetch the store the same way you did for LoginView:

@EnvironmentObject private var store: AppStore

Then, inside body, replace the ForEach block with a ZStack of the contact row and a navigation link to the chat screen:

List {
  ForEach(0..<items.count) { i in
    // New code from here
    ZStack {
      ContactRow(item: self.items[i])

      self.store.state.currentUser.map { currentUser in
        NavigationLink(destination: ChatView(
          currentUser: currentUser,
          receiver: self.items[i].contact
        )) {
          EmptyView()
        }
      }
    }
    .background(Color.white)
    .shadow(
       color: i == self.items.count - 1 ? Color.shadow : Color.clear,
       radius: 10, x: 0, y: 2)
    .listRowInsets(EdgeInsets())
    // ... to here
    ...
  }
}.navigationBarTitle("Contacts", displayMode: .inline)

You might be confused by the use of map. store.state.currentUser is optional, so you need to unwrap it before you can use it. However, writing if let inside a body will result in a compiler error because Swift will get confused about what kind of view you're trying to make. To get around this, you can use map on the optional. It will work the same way as if let: The function passed to map will only get called if the optional is not nil. If the current user is nil, the function won't get called, and no navigation link will get created.

Build and run the project now.

You now have the app store, an observable object, inside the environment. When you log in, the view will update the store in the environment with a new user. Since the store is an observable object, all other views will get notified of the change. This includes ContactView, which will use the currently logged in user to create a chat screen.

Sharing data like this is perfect for global state of your app, like the currently logged in user, whether or not the user is logged in, does the user have a premium or regular account and other app-level data.

When to use which approach

Stateless views, bindings, environment objects... All of these approaches have advantages and disadvantages and should be used at different times. To give you a better understanding of when to use which, I prepared a little cheat sheet. Don't worry, I won't take your exam away for using it!

Using Combine to track the keyboard height

Run your app and navigate to the chat screen. When you start typing your message, you'll see the keyboard appear. Only, it appears on top of the text field, so you can't even see what you're typing! That's no good. Let's dive further into Combine with another use case for observable objects: Observing the keyboard.

You'll fix this issue by creating an observable object that will listen to NotificationCenter notifications for changes to the keyboard's height. As the keyboard rises or falls, you'll publish events to everyone that's listening.

You'll listen to this event in the chat screen. When the keyboard pops up, you'll increase the padding of the text field so that it's always above the keyboard.

Create a new plain Swift file and call it KeyboardObserver.swift. Add a new ObservableObject class to the file:

import Combine
import SwiftUI

class KeyboardObserver: ObservableObject {
  @Published private(set) var keyboardHeight: CGFloat = 0
}

Just like earlier, you use @Published to automatically publish events whenever that value changes.

You'll update the height based on two notifications: keyboardWillShowNotification and keyboardWillHideNotification. Notification Center has Combine extensions that use Publishers instead of manually subscribing to the notification. Add the following property to the class:

let keyboardWillShow = NotificationCenter.default
  .publisher(for: UIResponder.keyboardWillShowNotification)
  .compactMap { ($0.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? CGRect)?.height }

You call publisher(for:) on the default Notification Center to get a publisher that emits that notification's events. Remember, Combine lets you deal with streams of values over time. These streams, just like arrays, are collections. This means that all of the collection methods you're used to, like map, compactMap and others, are already there. In the above example, you use compactMap to get a value from the userInfo of the notification that corresponds to the keyboard's height. This makes keyboardWillShow a stream of CGFloat values over time.

Next, you'll add another property that tracks when the keyboard hides. Add it below the one you just created:

let keyboardWillHide = NotificationCenter.default
  .publisher(for: UIResponder.keyboardWillHideNotification)
  .map { _ -> CGFloat in 0 }

Whenever you receive a notification that the keyboard has hidden, you'll convert that notification to a CGFloat of 0, since a hidden keyboard has no height. Essentially, keyboardWillHide is a stream of zeros.

Now that you are publishing events for those two notifications, it's time to merge them together to update the keyboard height property. Add the following initializer to the class:

init() {
  Publishers.Merge(keyboardWillShow, keyboardWillHide)
    .subscribe(on: RunLoop.main)
    .assign(to: \.keyboardHeight, on: self)
}

keyboardWillShow and keyboardWillHide are both Publishers. Publishers emit values. To listen and respond to those values, you have to subscribe to the publishers. Subscribing allows you to call a function or closure (using the sink method), or update a value whenever a Publisher emits a new event (using assign(to:on:)).

In the above case, you first merge the two publishers into one. That way, you'll get the keyboard's height when it raises and a zero when it falls. You'll subscribe to the new publisher on the main thread because it's responsible for updating the UI. By calling assign, you tell Combine to set keyboardHeight whenever to whichever value the Publisher emits.

At this point, you'll get a warning that the result of assign is unused. This is because assign returns a cancellable that you're not using. A cancellable doesn't do much, it's more of a reference to the subscription. If you used Notification Center, you might remember that you need to eventually remove observers to avoid memory loops. The same is true for Combine: If you don't remove subscriptions from KeyboardObserver, it will never get deallocated.

If you store the cancellable in a property of the class, the cancellable will get deallocated when the class does. Upon deallocation, the cancellable automatically destroys the subscription, removing all reference cycles that were created and letting the object die peacefully, as opposed to going on forever as a zombie.

Add a new property to the class:

private var cancellables: Set<AnyCancellable> = []

This is a Set which will house all of your cancellables for this class.

Next, add the following line to the bottom of init:

.store(in: &cancellable)

This method will store the cancellable in the set. No more warnings, no more memory leaks!

Now that you have the keyboard observer, it's time to use it ChatView.swift. Open the file and add a new property to the struct:

@ObservedObject private var keyboardObserver = KeyboardObserver()

By using @ObservedObject you tell SwiftUI to update the UI whenever the object changes. Next, use the observer to grab the keyboard's height in body:

ZStack {
  Color.background.edgesIgnoringSafeArea(.top)

  VStack {
    List {
      ...
    }

    ChatTextField(sendAction: onSendTapped)
      // These two lines are new:
      .padding(.bottom, keyboardObserver.keyboardHeight)
      .animation(.easeInOut(duration: 0.3))
  }
}.navigationBarTitle(Text(receiver.name), displayMode: .inline)

When the keyboard pops up, you'll raise the text field by the height of the keyboard. Since everything is in a VStack, the List will get shorter automatically. You'll also animate this change by calling animation after padding. SwiftUI will calculate the to and from values to animate without you having to do anything. Pretty neat, right?

Run the project and navigate to the chat screen. As you start typing, you'll see the keyboard pop up and the text field raises to match it. Now you can see what you're typing.

Conclusion

You are now almost done with your chat app! In this section of the SwiftUI course, you went one step further from static, hard-coded values. You used initializers, bindings and observable objects to pass data between your views and breathe a bit of life into your app.

You learned that passing data in the initializer is the simplest way to give a bit of state to a direct child of a view. You also learned that you can use bindings for two-way communication between a child and its parent. Using environment objects, you added global state to your app that any view can access. Finally, using Combine you converted a Notification Center notification into an observable object that updates the UI. All in a day's work, right?

Now that you have an understanding of how to deal with data, there's only one final step: Getting the data. The next section of the SwiftUI course deals with connecting everything up to CometChat, a chat SDK that will let you send and receive messages over the Internet. Keep reading to see your app come to life!

Creating a chat screen in SwiftUI

marinbenc🐧 — Tue, 11 Feb 2020 07:52:42 +0000

A chat app wouldn't be a chat app without a chat screen. In this part of the SwiftUI course, you'll put everything you've learned so far together, and build a cool looking chat screen.

Here's what you'll build:

The chat screen consists of two main views: a list of messages and a text field. Each message contains the user's avatar and a text bubble displaying the message. The text area holds a text field and a send button side-by-side.

Looking at this screen, it might seem like a daunting task to build it. Don't worry! We'll tackle it piece-by-piece. Once you put those pieces together, you'll be surprised at how great everything turned out! Let's get going.

As always, you can find a link to the finished project code on GitHub.

Modifying the avatar

Earlier in the course, you created an avatar view that you can reuse across your app. Now, it's time to reap the benefits of that investment. Instead of recreating a whole new view, you'll slightly tweak the avatar view to fit the needs of the chat message rows.

You'll change the avatar view so that the online indicator can be hidden. Open AvatarView.swift and add a new property to the class:

private let showsOnlineStatus: Bool

You'll use this variable to determine whether or not the online badge will be shown. Set this property to true at the bottom of a new initializer that you'll add to the class:

init(url: URL?, isOnline: Bool) {
  self.url = url
  self.isOnline = isOnline
  showsOnlineStatus = true
}

Next, add another initializer to the class, this time without isOnline:

init(url: URL?) {
  self.url = url
  self.isOnline = false
  showsOnlineStatus = false
}

You will call this initializer when you don't need to know if the user is online or not.

Finally, make a few changes to body to only show the online badge if showsOnlineStatus is set to true:

var body: some View {
  ZStack {
    Image("avatar_placeholder0")
      .resizable()
      .frame(width: 37, height: 37)

    // Wrap the Circle in an if block:
    if showsOnlineStatus {
      Circle()
        .frame(width: 10, height: 10)
        .foregroundColor(isOnline ? .green : .gray)
        .padding([.leading, .top], 25)
    }
  }
}

With that in place, you can get started on creating the message item.

I am creating this course in collaboration with CometChat, a modern chat platform to help you add chat to you Swift app. During the next few weeks, we’ll be releasing installments of our free SwiftUI course here on dev.to! In the course, you’ll dive deep into SwiftUI by building a real-world production-scale chat app, learning SwiftUI in a practical way, on a scale larger than a simple example app. Follow me to get notified of future parts of this course! You can also follow @CometChat on Twitter see the course of CometChat’s blog.

Creating the view for chat messages

By the end of this section, you'll create a view that shows each message the user sends or receives.

When a user sends a message, it will have a blue background and be aligned to the right. If the user receives a message, it will have a white background and come from the left. When you receive or send a couple of messages, only the last one of those will show the avatar. Let's get started!

First, you'll create a new model struct for you messages. Crate a new plain Swift file and name it Message.swift. Add the following to the file:

import Foundation

struct Message: Identifiable {
  let id: Int
  let text: String
  let contact: Contact
}

Just like Contact, you'll make Message identifiable, so that you can later display it in a list view. Now you can start creating the view that shows this message.

Create a new SwiftUI view file and name it ChatMessageRow.swift. Change the struct to the following:

struct ChatMessageRow: View {

  let message: Message
  let isIncoming: Bool
  let isLastFromContact: Bool

}

The struct has three properties. One is the message you'd like to show. The second property determines if the message is incoming or if it was sent out from the currently logged in user. The final property determines if this message was last in a list of multiple messages from a single contact.

[TODO: Screenshot]

The latter two properties will determine the look of this view.

Displaying the content of the message

Instead of having a 300-lines-long body behemoth, you'll make this view piece by piece. You'll create a few computed variables where you'll return parts of the view and then combine those parts in body.

The first part will be the most important part of a message: the content. Add the following computed property to the bottom of the class:

private var text: some View {
  Text(message.text)
    .padding(10)
    .modifier(BodyText())
}

Just like body, you can create computed properties that return some View, and use this pattern to clean up your code so that it's more readable. For now, the text is a simple Text with some padding and styling applied.

Next, fill up body with a horizontal stack containing the avatar view and the text:

var body: some View {
  HStack(alignment: .bottom, spacing: 0) {
    AvatarView(url: message.contact.avatar)
    text
    Spacer()
  }
}

Alongside the two views in the stack, you add a spacer so that everything is aligned to the left. By setting the stack's alignment to .bottom, you make sure the items start at the bottom of the stack.

Before I show you what this looks like, let's modify the preview a bit. Scroll down to the PreviewProvider and add the following property to the struct:

private static let chatMessage = Message(
  id: UUID().hashValue,
  text: "Pellentesque ipsum. Mauris elem enes tumen mauris vitae tortor. Pellentesque ipsum.",
  contact: Contact(name: "Name", avatar: nil, id: "id", isOnline: true))

This is a dummy message that you'll use to preview the view. Next, modify previews to show three different permutations of what your view can look like:

static var previews: some View {
  Group {
    ChatMessageRow(
      message: chatMessage,
      isIncoming: true,
      isLastFromContact: true)
      .previewLayout(.fixed(width: 300, height: 200))

    ChatMessageRow(
      message: chatMessage,
      isIncoming: true,
      isLastFromContact: false)
      .previewLayout(.fixed(width: 300, height: 200))

    ChatMessageRow(
      message: chatMessage,
      isIncoming: false,
      isLastFromContact: true)
      .previewLayout(.fixed(width: 300, height: 200))
  }
}

You create one outgoing, one incoming, and one message row where the message is not the last message from that contact. Take a look at the preview to see your work so far:

That's a good start! You're showing the avatar and the message, but you're missing the bubble around the message.

Showing a chat bubble

To show the chat bubble, you'll use a rounded rectangle view that you'll set as the background of the text view.

To start, add another computed property to ChatMessageRow, right above text:

private var chatBubble: some View {
  RoundedRectangle(cornerRadius: 6)
    .foregroundColor(.white)
    .shadow(color: .shadow, radius: 2, x: 0, y: 1)
}

Remember the shape views I mentioned earlier in the course? Another one of those is RoundedRectangle, perfect for this use case: A chat bubble.

You'll set this chat bubble as the background of the text. Inside text, call the background method with the chat bubble:

Text(message.text)
  .padding(10)
  .modifier(BodyText())
  .background(chatBubble)

In SwiftUI, backgrounds can be infinitely complex. In this case, you're setting it to a rounded rect. You can also set it to colors, image views, other shape views or any other SwiftUI view!

The text now has a background, but to make it a true speech bubble it needs a tail from the user's avatar to the message, like in comic books.

To add this, you'll create a triangular view that you'll place between the avatar and the message in the stack. Add a new function to the struct:

private func chatBubbleTriange(
  width: CGFloat, 
  height: CGFloat, 
  isIncoming: Bool) -> some View {

}

This function receives a width and a height for the chat bubble tail, as well as whether the message is incoming or not. You'll use this information to construct the bubble and return it from the function.

Next, add the following code to the function:

Path { path in
  path.move(to: CGPoint(x: 0, y: height * 0.5))
  path.addLine(to: CGPoint(x: width, y: height))
  path.addLine(to: CGPoint(x: width, y: 0))
  path.closeSubpath()
}
.fill(Color.white)
.frame(width: width, height: height)
.shadow(color: .shadow, radius: 2, x: 0, y: 1)

You use a Path view to construct the triangle. Path is a special type of view that lets you create any arbitrary shape that you can think of.

If this sounds complex, don't worry. Path has a bunch of helper methods to construct shapes like straight lines, arcs, curves, rectangles, ellipses and more. By combining those simpler shapes, you can end up with shapes that would make Kandinsky jealous.

When constructing a path, think of it like drawing with an imagined pen. You move the pen to its start position by calling move(to:). Once it's in position, you can press it down and draw by calling one of the addX methods, where X can be anything from line, arc, curve and other shapes.

In this case, you first move the path to the center-left position of the view. You then draw a line to the top-right corner and then draw a line to the bottom-right corner. Finally, you call closeSubpath which closes the path by drawing a line back to the start position.

Now that you have the tail, add it to body:

var body: some View {
  HStack(alignment: .bottom, spacing: 0) {
    AvatarView(url: message.contact.avatar)

    chatBubbleTriange(width: 15, height: 14, isIncoming: isIncoming)

    text

    Spacer()
  }
}

The shape is good, but the view needs some tweaks. We need to trick the user into thinking the tail is a part of the message bubble. Add the following method calls to the bottom of chatBubbleTriangle:

.zIndex(10)
.clipped()
.padding(.trailing, -1)
.padding(.leading, 10)
.padding(.bottom, 12)

You modify the tail's z-index so that it's above the chat message. You then clip the view so that there's no shadow at the right edge. Finally, you adjust the padding so that it's overlapping with the chat message by one point.

Now it looks like a real speech bubble! This makes you one step closer to a real app since no chat app would be complete without speech bubbles. Let's tweak them a little bit more.

Adding color to the speech bubbles

Next, you'll color outgoing messages blue, and incoming messages white. Start by changing the text color in the text computed variable, so that it's visible on both backgrounds:

Text(message.text)
  .padding(10)
  .foregroundColor(isIncoming ? .body : .white)
  .modifier(BodyText())
  .background(chatBubble)

Make a similar modification to the chat bubble, except you can color it blue if the message is outgoing:

private var chatBubble: some View {
  RoundedRectangle(cornerRadius: 6)
    .foregroundColor(isIncoming ? .white : .cometChatBlue)
    .shadow(color: .shadow, radius: 2, x: 0, y: 1)
}

Finally, you need to match the tail's color to the bubble. In chatBubbleTriangle, replace the first method call to fill with the following line:

.fill(isIncoming ? Color.white : Color.cometChatBlue)

The preview now shows a blue message when it's not incoming. Nice!

Chaining messages

As we discussed earlier, if the same user sends a couple of messages, you'll only show the avatar at the last message. For other messages, you'll show a spacer of the same width as the avatar in its place.

Modify body to add this change:

var body: some View {
  HStack(alignment: .bottom, spacing: 0) {
    if isLastFromContact {
      AvatarView(url: message.contact.avatar)
      chatBubbleTriange(width: 15, height: 14, isIncoming: isIncoming)
    } else {
      Spacer().frame(width: 61)
    }
    text
    Spacer()
  }
}

If the message is last from this contact, you show the avatar and the tail. Otherwise, you show a blank space. Earlier you learned that spacers take up as much space as they can. By modifying the spacer's frame, you make sure it has a fixed width.

Now, only the last message in a chain shows the avatar. We're almost there!

Reversing a horizontal stack in SwiftUI

One final thing you need to tweak is to align outgoing messages to the right. To do this, you'll need to reverse the order of items in the HStack, as well as flip the chat bubble's tail.

You'll start by flipping the tail. Since you built it as a path, you can reverse the x coordinates of the path to mirror the triangle.

In chatBubbleTriangle, reverse the x-axis of the path if the message is outgoing by replacing the Path initializer with the following code:

Path { path in
  path.move(to: CGPoint(x: isIncoming ? 0 : width, y: height * 0.5))
  path.addLine(to: CGPoint(x: isIncoming ? width : 0, y: height))
  path.addLine(to: CGPoint(x: isIncoming ? width : 0, y: 0))
  path.closeSubpath()
}

You'll also need to reverse the padding by replacing the last three lines of the function with the following:

.padding(.trailing, isIncoming ? -1 : 10)
.padding(.leading, isIncoming ? 10 : -1)
.padding(.bottom, 12)

Now your tail is sufficiently flipped.

Next, you'll move on to the stack view by reversing the order of the items in the stack.

Right now, there's no easy way to do this in SwiftUI. The way to do this is to add an if check inside the stack, and repeat the views in the reverse order.

HStack(alignment: .bottom, spacing: 0) {
  if isIncoming {

    if isLastFromContact {
      AvatarView(url: message.contact.avatar)
      chatBubbleTriange(width: 15, height: 14, isIncoming: true)
    } else {
      Spacer().frame(width: 61)
    }
    text
    Spacer()

  } else {

    Spacer()
    text
    if isLastFromContact {
      chatBubbleTriange(width: 15, height: 14, isIncoming: false)
      AvatarView(url: message.contact.avatar)
    } else {
      Spacer().frame(width: 61)
    }
  }
}

Not the cleanest solution, but it's the best we can do right now.

Your messages are now aligned to the right if they're coming from the current user. This concludes creating the message row. You can now take a small break by creating the text field. Or, take a small break, and then create the text field. :)

Creating the chat text field

A chat screen is two things: The messages and a text field. In this section, you'll make a nice looking text field to let the user type in their messages.

Before we get started, you'll need to download another image. Download the send icon from here. Once downloaded, drag and drop the image inside you Assets.xcassets file and name it send_message.

Start creating the text field by creating a new SwiftUI View file called ChatTextField.swift. Add two properties and a method to the struct:

struct ChatTextField: View {

  let sendAction: (String) -> Void

  @State private var messageText = ""

  private func sendButtonTapped() {
    sendAction(messageText)
    messageText = ""
  }

}

The text field will receive a callback to call when the send button gets tapped. It will track the entered text inside a state variable, and pass the text via the callback back to the main chat screen.

Next, modify the preview so that it shows the text field with a bit of spacing on the top:

static var previews: some View {
  VStack {
    Spacer()
    ChatTextField(sendAction: { _ in })
  }.previewLayout(.fixed(width: 300, height: 80))
}

Now you can start working on the view. Inside body, add a horizontal stack that contains a text field and a button to send the message.

var body: some View {
  HStack {
    TextField("Type something", text: $messageText)
      .frame(height: 60)

    Button(action: sendButtonTapped) {
      Image("send_message")
        .resizable()
        .frame(width: 25, height: 25)
        .padding(.leading, 16)
    }
  }
  .padding([.leading, .trailing])
  .background(Color.white)
}

You fix the text field's size to 60 points. In the button, you show the send icon and make sure its size is 25 by 25 points. Finally, you add a bit of padding to the whole stack and give it a white background.

You should do one final modification by adding a shadow to the top of the view. Because you want the shadow only on top, you'll add a new thin rectangular view to the top, and apply a shadow to that rectangle.

var body: some View {
  VStack(spacing: 0) {
    Rectangle()
      .frame(height: 1)
      .foregroundColor(.white)
      .shadow(color: .shadow, radius: 3, x: 0, y: -2)

    HStack {
      ...
    }
    .padding([.leading, .trailing])
    .background(Color.white)
  }
  .frame(height: 60)
}

To add the rectangle, you first wrap the whole view inside of a vertical stack. You add the rectangle to the top of the stack and apply a shadow to the rectangle. You'll also set the VStack's frame to be 60 points high.

Looking good! You now have a text field and a view for each message. It's time to assemble them!

Putting it all together in a chat view

Now, it's time to cash in all of your hard work so far, and put together the pieces to form a great looking chat view.

Create a new SwiftUI view file named ChatView.swift. Add the following properties to the struct:

struct ChatView: View {

  let currentUser: Contact
  let receiver: Contact

}

The chat view will receive two users: One that's currently logged in, and one that the user will chat with.

You'll need to modify the previews to pass values for these two properties:

static var previews: some View {
  ChatView(
    currentUser: Contact(name: "Me", avatar: nil, id: "me", isOnline: true),
    receiver: Contact(name: "Other", avatar: nil, id: "other", isOnline: true))
}

Next, scroll back to the ChatView struct and add the following state property:

@State private var messages: [Message] = [
  Message(id: 0, text: "Morbi scelerisque luctus velit", contact: Contact(name: "Name", avatar: nil, id: "id", isOnline: true)),
  Message(id: 1, text: "Pellentesque ipsum. Mauris elem enes tumen mauris vitae tortor. Pellentesque ipsum. ", contact: Contact(name: "Name", avatar: nil, id: "id", isOnline: true)),
  Message(id: 2, text: "Phasellus enim erat esi, vestibulum veles?", contact: Contact(name: "Name", avatar: nil, id: "me", isOnline: true)),
  Message(id: 3, text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit.", contact: Contact(name: "Name", avatar: nil, id: "id", isOnline: true)),
  Message(id: 4, text: "Mauris tincidunt sem", contact: Contact(name: "Name", avatar: nil, id: "me", isOnline: true)),
]

These are the messages you'll show on the screen. Right now, you're hard-coding them in the struct. Later, you'll be listening to a WebSocket channel and adding messages to this array as they come in — but that's in a later part of this course.

Now you can add a list of messages to the view. Add a body to the struct:

var body: some View {
  List {
    ForEach(0..<messages.count, id: \.self) { i in
      ChatMessageRow(
        message: self.messages[i],
        isIncoming: self.messages[i].contact.id != self.currentUser.id,
        isLastFromContact: true)
    }
  }
}

As you learned earlier in the course, you combine a ForEach with a List to create a list of ChatMessageRows. You know the message is incoming if the message's sender is different from the current user.

Looks like you're having issues with the table view's separators. You've already learned a trick to deal with these: Using UIAppearance. Add an initializer to the top of the struct:

init(currentUser: Contact, receiver: Contact) {
  self.currentUser = currentUser
  self.receiver = receiver

  UITableView.appearance().tableFooterView = UIView()
  UITableView.appearance().separatorStyle = .none
  UITableView.appearance().backgroundColor = .clear
  UITableViewCell.appearance().backgroundColor = .clear
}

In the initializer, you use the global appearance proxies for the table view to remove the separators. You also remove all background colors from both the table view and the cells. This lets you change the background color in SwiftUI.

Remember that the chat message looks different for chained messages? You'll have to add a way to determine if each message was the lest message sent by a user or just another message in the chain. Add the following method to the struct:

private func isMessageLastFromContact(at index: Int) -> Bool {
  let message = messages[index]
  let next = index < messages.count - 1 ? messages[index + 1] : nil
  return message.contact != next?.contact
}

You fetch the message at that index, as well as the next message. If the next message has a different sender, the current message is the last in the chain.

Next, pass the result of this function to each chat message row. You'll also use this function to modify the spacing between the rows.

List {
  ForEach(0..<messages.count, id: \.self) { i in
    ChatMessageRow(
      message: self.messages[i],
      isIncoming: self.messages[i].contact.id != self.currentUser.id,
      isLastFromContact: self.isMessageLastFromContact(at: i))
      .listRowInsets(EdgeInsets(
        top: i == 0 ? 16 : 0,
        leading: 12,
        bottom: self.isMessageLastFromContact(at: i) ? 20 : 6,
        trailing: 12))
  }
}

If the message is the last in a chain, you'll add a larger spacing to the bottom. You'll also add a bigger top spacing to the first row in the list so that it doesn't bump into the navigation bar.

The list is looking great now! Let's move on to adding the text field you created earlier to the view.

Start by creating a new function that will get called when the text field's send button is tapped:

private func onSendTapped(message: String) {
  // TODO: Send message
}

Next, wrap body in a VStack and add the text field to the bottom of the stack:

VStack {
  List {
    ...
  }

  ChatTextField(sendAction: onSendTapped)
}

When wrapping views inside a stack, Xcode gives you several tricks you can use. If you Command-Click the view, you can select Embed in VStack to wrap a VStack around that view. If you decide to do it manually, by selecting a piece of text and hitting Control-i Xcode will reindent the text for you. Pretty nifty!

Since you made a reusable text field, this one line of code is all you need to add the text field to the view. Good job, you!

Changing the background of a SwiftUI List

Finally, you'll add a background to the screen. Previously, you used the background method to color a view. Another way to do this is to use a ZStack. After all, a ZStack stacks views one on top of the other. If the top view has a clear background, the bottom view will show through and act as a background.

Add the whole body to a ZStack, where you show the background color at the bottom of the stack:

ZStack {
  Color.background.edgesIgnoringSafeArea(.top)

  VStack {
    List {
      ...
    }

    ChatTextField(sendAction: onSendTapped)
  }
}

In SwiftUI, Color is not only a struct that represents a color. It can also be used as a standalone view by itself! You use this fact to add a background color to the ZStack. Because you set the table view's and the cells' background color to .clear, the background shows through them.

Conclusion

Our chat app is starting to take shape! We now have a way to log in, pick a person to chat with and, finally, a way to chat with them. At least, in theory.

The remainder of this course will deal with less visual aspects of your app. The next section will deal with propagating state and data through your app and sharing data between SwiftUI views. Once you master that, you'll move on to networking and hooking your app up to the Internet.

So, unless you want to keep chatting with dummy users forever, keep reading! :)

Creating a list in SwiftUI

marinbenc🐧 — Tue, 11 Feb 2020 07:52:26 +0000

By this part of the course, you've already built a couple of different SwiftUI screens using a bunch of SwiftUI views. You've used Texts, Images, Rectangles, VStacks and HStacks, but there's one type of screen we haven't yet built: A list.

Lists (AKA table views) are at the core of almost all iOS apps. The most popular apps like Instagram, Twitter or Reddit all show a big list of stuff on their main screen. In this part of this SwiftUI course, you'll learn how to show a list of items in SwiftUI.

You'll learn this by building a contacts screen. This screen will show all of the users your current user can chat with. By the end of this part, you'll have a screen that looks like this:

Before you can build that screen, though, you first need a way to navigate to it. Let's get started!

You can always find the finished project code on GitHub.

Navigating to the contacts screen

You'll start by creating a new SwiftUI view file for your contacts screen and naming it ContactsView.swift. Change the struct to the following:

import SwiftUI

struct ContactsView: View {

  var body: some View {
    Text("Contacts")
  }

}

So far it doesn't show much — you'll take care of that later. For now, let's add a way to navigate to this view. Open LoginView.swift and change the navigation link's destination to show the newly created contacts view, instead of EmptyView:

NavigationLink(destination: ContactsView(), isActive: $showContacts) {
  EmptyView()
}

If you run the app now and click the login button, you'll navigate to the view. Now we can fill it up with contacts! Well... in a bit.

I am creating this course in collaboration with CometChat, a modern chat platform to help you add chat to you Swift app. During the next few weeks, we’ll be releasing installments of our free SwiftUI course here on dev.to! In the course, you’ll dive deep into SwiftUI by building a real-world production-scale chat app, learning SwiftUI in a practical way, on a scale larger than a simple example app. Follow me to get notified of future parts of this course! You can also follow @CometChat on Twitter see the course of CometChat’s blog.

What's in a List?

First, we'll lay some groundwork on SwiftUI lists. In SwiftUI, Lists are created by using a view called, shockingly, List. Much like Group or VStack, a List is a sort of wrapper around a bunch of child views. It hugs all of its children in a tight embrace and positions them on the screen, one below the other, with separators, paddings, a scroll view and everything else you'd expect from a list.

SwiftUI's List is backed by a UITableView on iOS, which means that the same cell reuse behavior you're used to is there on SwiftUI, too. Apple is an environmentally conscious company, after all, so cells are recycled.

Instead of loading all of your rows at once, SwiftUI will only take up memory for the rows that are currently visible. As you scroll, the rows that disappear are not destroyed, but instead, go into a pool of deactivated rows. When the list needs a new row, instead of allocating one, it will take one from the pool.

When the list takes a row from the pool, it will apply any necessary changes to its views (text values, images, etc.) to match the item at the current index. This gives the appearance of having many rows, while in reality only a couple are ever loaded at once.

All this is to say that Lists are very fast and memory-efficient, regardless of how many rows there are in the list.

In UIKit, you'd probably first create a table view and then think about placing items in that table. The component-based nature of SwiftUI means you'll have to reverse your thinking: Start from smaller views and work your way up.

That's why you'll first create the view for each row in your list and only then begin assembling the contacts screen.

Note: On websites like StackOverflow, you'll often see people suggesting you replace List with a ScrollView and a ForEach view to achieve a desired look. In some cases, this works well. However, ScrollView will load all the items at once. If you have a lot of items, a plain scroll view will be much less efficient than a List!

Making a SiwftUI List row view

Before we create our items, we need a model struct to house information about each contact. Create a new plain Swift file called Contact.swift. Change the contents to the following:

import Foundation

struct Contact: Identifiable, Equatable {
  let name: String
  let avatar: URL?
  let id: String
  var isOnline: Bool
}

You'll notice Contact conforms to Identifiable. To easily show an array of items in a list, those items need to each have a unique identifier. Remember, rows are reused, so the list needs a way of uniquely identifying each item. You conform to Identifiable by giving the struct an id property that is unique.

To create the row view, create a new SwiftUI View file and name it ContactRow.swift.

This is what you'll end up with:

This view has a few things going on. It shows the avatar with a little online badge, the contact's name, as well as their last message.

As you just learned, it's better to start from smaller views and build up to larger views. That's why you'll start by creating a separate view for the avatar and the online badge.

First, you'll need to add a few placeholder avatars to your app. Download the avatar placeholder image and add it to Assets.xcassets. Name the image avatar_placeholder0.

With that in place, add the view struct to the file:

private struct AvatarView: View {
  // 1
  let url: URL?
  let isOnline: Bool

  var body: some View {
    // 2
    ZStack {
      // 3
      Image("avatar_placeholder0")
        .resizable()
        .frame(width: 37, height: 37)
      // 4
      Circle()
        .frame(width: 10, height: 10)
        .foregroundColor(isOnline ? .green : .gray)
        .padding([.leading, .top], 25)
    }
  }
}

With this code, you create a new SwiftUI view for the avatar. You'll use AvatarView inside the view for the list's row. Here's what's going on in the struct:

The view has two properties, one for the avatar URL and one that tells it whether that contact is online. For now, you'll use placeholder avatars. Later in the course, you'll learn how to fetch them from the internet.
Inside of body, you'll position the image and the online indicator in a ZStack. You've already learned about VStack and HStack. ZStack is similar to those, but in 3D! Instead of arranging items below or to the right of each other, it arranges items on top of each other. This is useful for when you want two views to overlap. In this example, you want the online indicator to be on top of the image.
In the ZStack, you first create an image view with the placeholder and give it a fixed size of 37 by 37 points.
Next, you create a circular view of 10 by 10 points and color it green or gray depending on if the user is online or not. You also position the circle to be in the bottom-right corner of the image.

You'll need to modify the preview to see the view you just created. Scroll down to the PreviewProvider struct and change its content to the following:

struct AvatarView_Previews: PreviewProvider {
  static var previews: some View {
    Group {
      AvatarView(url: nil, isOnline: true)
        .previewLayout(.fixed(width: 100, height: 100))
    }
  }
}

This shows the avatar view in all its glory, with a fixed size, inside a group.

You'll use the group later to show your contact row as well. Speaking of which, let's get on creating that view.

Add another View struct to the same file, underneath AvatarView:

struct ContactRow: View {

  struct ContactItem: Identifiable {
    let contact: Contact
    let lastMessage: String
    let unread: Bool

    var id: String { contact.userID }
  }

  let item: ContactItem

}

This is the view that will be shown in the list. Instead of adding a bunch of properties to the struct, you create a nested struct to house all of the data necessary for displaying a contact.

Again, you use Identifiable to help the list reuse items. In this case, passing along the contact's ID will suffice.

For this to be a complete view, you'll also need to add body to the struct:

var body: some View {
  VStack {
    Spacer()
  }
  .background(item.unread ? 
    Color(red: 236 / 255, green: 240 / 255, blue: 254 / 255) : 
    nil)
  .frame(maxWidth: .infinity)
  .frame(height: 67)
}

To center the contents of the view, you'll place the image and the texts inside a vertical stack. For now, the stack contains only a spacer. You also give the stack a light blue background color if the last message is unread, set its width to stretch out as far as it can and make sure its height is a fixed 67 points.

Next, modify the preview so it shows the contact view underneath the avatar view:

Group {
  AvatarView(url: nil, isOnline: true)
    .previewLayout(.fixed(width: 100, height: 100))

  ContactRow(item: ContactRow.ContactItem(
    contact: Contact(name: "Some Name", avatar: nil, id: "0", isOnline: true),
    lastMessage: "Last message is a pretty big message",
    unread: true))
    .previewLayout(.fixed(width: 300, height: 67))

  ContactRow(item: ContactRow.ContactItem(
    contact: Contact(name: "Other Name", avatar: nil, id: "1", isOnline: false),
    lastMessage: "Last message is a pretty big message",
    unread: false))
    .previewLayout(.fixed(width: 300, height: 67))
}

To test all the variations of the contact view, you'll show one preview where the user is online and the message is unread, and one where the user if offline and the message was already read.

All of this code to display a completely empty view! Let's fix that.

Add the avatar view inside a horizontal stack to ContactRow's body:

var body: some View {
  VStack {
    Spacer()

    HStack {
      AvatarView(url: nil, isOnline: item.contact.isOnline)
        .padding(.leading, 20)

      Spacer()
    }

    Spacer()
  }
  ...
}

You place the avatar in a horizontal stack so that you can add the two text views to the right of the avatar. You also add another spacer to the bottom of the VStack so that everything is vertically centered in the row.

Next, add the two texts to the view between the avatar view and the spacer in the HStack:

VStack {
  ...
  HStack {
    AvatarView(url: nil, isOnline: item.contact.isOnline)
      .padding(.leading, 20)

    // New code:
    VStack(alignment: .leading) {
      Text(item.contact.name)
        .foregroundColor(.body)
        .fontWeight(item.unread ? .medium : .regular)
        .lineLimit(1)

      Text(item.lastMessage)
        .foregroundColor(.body)
        .font(.system(size: 12))
        .fontWeight(item.unread ? .medium : .regular)
        .lineLimit(1)
        .padding(.top, 2)
    }
    .padding(.leading, 10)
    .padding(.trailing, 20)
    // ---

    Spacer()
  }
  ...
}

Place the two texts inside a vertical stack since they're arranged one on top of the other. You'll also limit the number of lines of text to 1, to make sure the text doesn't wrap. Finally, you'll add some padding around the vertical stack so that there's a space between the texts and the image.

That's your contact item! It displays the name, the avatar, the last message as well as if the contact is online or not, all at a glance.

Using SwiftUI Lists

Now, it's time to head over to ContactsView.swift to add a bunch of contacts inside a list.

You'll start by creating a state property that will hold your contacts. For now, fill it up with a couple of fake contacts:

@State private var items: [ContactRow.ContactItem] = [
  .init(
    contact: Contact(name: "Some Name", avatar: nil, id: "0", isOnline: true),
    lastMessage: "This is my last message that I sent you",
    unread: true),
  .init(
    contact: Contact(name: "Other Name", avatar: nil, id: "1", isOnline: false),
    lastMessage: "This is my last message that I sent you",
    unread: false),
  .init(
    contact: Contact(name: "Third Name", avatar: nil, id: "2", isOnline: true),
    lastMessage: "This is my last message that I sent you",
    unread: false)
]

You can use this array to populate a list. Replace body with the following:

var body: some View {
  List(items) { item in
    ContactRow(item: item)
  }
}

To use a List with an array, you can pass the array to the list, as well as a function that will create the view for each row, given the array element for that row. Since you already created your row view, you can just create that view with the contact.

Note: Remember that to show a dynamic array of items in a List, those items need to conform to the Identifiable protocol as described above.

In only three lines of code, you have a list of dynamic items from an array. Take that, UIKit!

Removing separators from a SwiftUI List

However, there is a slight problem with this screen. Instead of a nice-looking list, we have a space and a separator between each item. This happens because SwiftUI uses a plain UITableView to show the list, which has built-in separators and insets.

To change this, you first need to tweak the way you created the list. I showed you a shortcut for creating a list from an array, but there's another way to do it using ForEach. Change body to the following:

var body: some View {
  List {
    ForEach(0..<items.count, id: \.self) { i in
      ContactRow(item: self.items[i])
    }
  }
}

Here, List receives a builder that builds an array of views. You'll build this array using ForEach. ForEach is a special type of view that replaces itself with a list of views, one below the other. In the above code,

ForEach(0..<items.count, id: \.self) { i in
  ContactRow(item: self.items[i])
}

...is exactly the same as writing:

ContactRow(item: self.items[0])
ContactRow(item: self.items[1])
ContactRow(item: self.items[2])

Each of these three views will get treated as a separate row by the list. Again, because a List needs to identify items, you'll pass the current index (self) as the ID of that item.

Note: In UIKit it was somewhat difficult to combine different types of cells. It was especially hard to combine static and dynamic cells. In SwiftUI, since List receives an array of rows, it's very easy to combine static and dynamic content. You can first return a hard-coded row, then a ForEach of a couple of different dynamic rows, then another static one, and so on. A List can hold any combination of static and dynamic rows of different types.

Now that you changed the way you build your list, you can apply a little hack to remove the separators.

Since List is backed by a UITableView, any global changes you make to table views will also apply to SwiftUI lists. UIKit provides an API to make global changes to all instances of a view called UIAppearance. Each UIView subclass has an appearance method that returns something called an appearance proxy. Changing properties of the appearance proxy propagates those changes to all instances of the class, like changing a static property.

You can change the table view's appearance proxy to remove the separators, thus removing all separators from you List.

Add the following initializer to the view struct:

init() {
  UITableView.appearance().tableFooterView = UIView()
  UITableView.appearance().separatorStyle = .none
}

Note: Appearance proxies are not limited to table views. Lots of other SwiftUI views are backed by UIKit views. You can also use this pattern to change the look of navigation bars, toggles, texts and other views.

Keep in mind though, this is a bit of a hack. For now, SwiftUI is backed by UIKit, but this is an implementation detail that you don't want to rely on. Nothing is stopping Apple from ditching UITableView and making their own thing in SwiftUI. I'm showing you this trick because, currently, there's no better way to remove separators.

When the struct loads, it will remove all separators from every table view in the app.

The list now looks much cleaner, but I think it looks better with separators.

Adding custom separators to a SwiftUI List

You might be pulling your hair out by now because you just removed them! Well, SwiftUI is flexible enough that, instead of using UITableView's separators, it's better to make our own using plain SwiftUI views.

Go back the view for your item: ContactRow.swift. Inside body, use a rectangle view at the bottom of the VStack to add separators back in:

  var body: some View {
    VStack {
      Spacer()

      HStack {
        ...
      }

      Spacer()

      // New code:
      Rectangle()
        .frame(height: 1)
        .foregroundColor(Color(UIColor.separator))
    }
    ...
  }

The rectangle will stretch the width of the view by default, all you need to change is to set the height to 1 point and set the color to whichever separator color you'd like.

Head back to ContactView.swift to see your list:

It's already looking great, but there's one small issue I can see. There's still extra space around each item.

Removing space around SwiftUI List rows

SwiftUI adds space around each row in a List by default. This space is called the inset of a list row. The inset is an instance of EdgeInsets, a struct that holds values for how much the view is shifted from the leading, trailing, top and bottom edges.

You can remove the inset by calling listRowInsets on the view inside the list, and giving it a value of EdgeInsets(), where all the values are zero.

Add the following to body:

var body: some View {
  List {
    ForEach(0..<items.count, id: \.self) { i in
      ContactRow(item: self.items[i])
        .listRowInsets(EdgeInsets())
    }
  }
}

Okay, now it's looking perfect.

Except... I'd still like to add one final touch. In the original design, there was a shadow underneath the last item, giving the whole screen a sense of depth that is currently missing.

Adding a shadow to a SwiftUI view

To add a shadow to the row you'll call, you guessed it: shadow. This method takes the color of the shadow, its radius, as well as an x and y value that determines how much the shadow is offset from the view.

SwiftUI adds shadows to opaque parts of the view. That is parts that have some sort of color. Right now, the background of your rows is transparent. It appears white because the color underneath them is white. To show the shadow underneath a row, you need to first color the background in white, and then add the shadow.

Add the following to body:

var body: some View {
  List {
    ForEach(0..<items.count) { i in
      ContactRow(item: self.items[i])
        .listRowInsets(EdgeInsets())
        .background(Color.white)
        .shadow(
          color: i == self.items.count - 1 ? 
            Color(UIColor.black.withAlphaComponent(0.08)) : 
            Color.clear,
          radius: 10, x: 0, y: 2)
    }
  }
}

You set the background color to white and apply a shadow to the view. You only want to add a shadow to the last row, though, so you make the shadow completely transparent if the row is not the last.

Okay, now I'm happy with the look of this screen. Let's run this in the simulator so see it in action.

Oh boy, it looks like you're not off the hook yet! There's one more issue to take care of. The original design shows a title in the navigation bar, which isn't there in our version. Thankfully, that's easy to add.

Adding a navigation bar title in SwiftUI

To add a navigation bar title, you need to call navigationBarTitle on the root view of your body. In your case, that's the list view:

var body: some View {
  List {
    ...
  }.navigationBarTitle("Contacts", displayMode: .inline)
}

By default, SwiftUI adds a large, bold navigation bar title with lots of space around it. You already saw this when you were building your login screen. In this case, you want a more subtle title that is part of the navigation bar. That's why you pass .inline as the display mode, integrating the title with the bar.

Now it looks perfect. No, for real this time. You can take a break and pat yourself on the back, I won't be bothering you with design changes anymore.

Conclusion

You're slowly moving more and more towards a fully-fledged SwiftUI chat app! You built out a contacts screen that shows a list of users.

If you want to know more about SwiftUI lists, here are a few links:

In UIKit, table views can hold sections of items. The same is true for SwiftUI Lists. To organize rows into sections, place a Section view inside a list, and rows inside the section.
There's a couple of different list styles that you can use off the shelf. There's a default list, a plain list, a grouped one (used in the Settings app in iOS), a carousel and one that looks like the lists in an iOS sidebar. You can find all of them here. To change the style of your list, call listStyle on the list.

While the contacts in your list might be hard-coded for now, everything is in place to load these users from the internet — in later parts of this SwiftUI course. So keep reading!

Creating a login screen in SwiftUI

marinbenc🐧 — Tue, 11 Feb 2020 07:52:06 +0000

In the last part of this SwiftUI course, you've learned all about how to create and arrange SwiftUI views to craft beautiful interfaces. In this part, you'll put those skills to test by building out a login screen for your app.

You'll build a login screen with an email field, some information and a button at the bottom. Besides just building the screen, we'll also add a way to navigate from the welcome screen you created in the last part to the new login screen.

Ready to get started?

You can find the finished project code on GitHub.

Kicking things off

To create the login screen, create a new SwiftUI View file called LoginView.swift. For now, change the body to display a text saying "Log In":

struct LoginView: View {

  var body: some View {
    Text("Log In")
  }

}

You'll fill up this placeholder screen later, but you'll first need a way to navigate to the screen.

I am creating this course in collaboration with CometChat, a modern chat platform to help you add chat to you Swift app. During the next few weeks, we’ll be releasing installments of our free SwiftUI course here on dev.to! In the course, you’ll dive deep into SwiftUI by building a real-world production-scale chat app, learning SwiftUI in a practical way, on a scale larger than a simple example app. Follow me to get notified of future parts of this course! You can also follow @CometChat on Twitter see the course of CometChat’s blog.

Navigation in SwiftUI

Two SwiftUI views will help you with navigation: NavigationView and NavigationLink. NavigationView is SwiftUI's version of UINavigationController: It manages a stack of views and shows a navigation bar on top of them.

NavigationLink is similar to a Button, but it triggers presenting a new view in the navigation stack when it's pressed. To work correctly, a NavigationLink needs to be nested inside a NavigationView. In UIKit terms, if NavigationView is the navigation controller, NavigationLink is a segue.

Adding a SwiftUI Navigation View and a navigation bar

In iOS apps, you'd often have one navigation controller that will be the initial view controller of your app. You can achieve a similar effect in SwiftUI by making the initial view a NavigationView.

The initial view is determined by the SceneDelegate. If you look inside SceneDelegate.swift you'll find an implementation of scene(_:willConnectTo:, options:) that creates a content view and adds it to the window.

Instead of creating a plain WelcomeView, change contentView so that you wrap the welcome screen in a navigation view:

let contentView = NavigationView { WelcomeView() }

contentView, just like any other SwiftUI view, can be arbitrarily complex. The scene delegate is a good place to add global configuration, like changing colors, adding routing, subscribing to global events and other changes that affect the whole app.

Run the project now and you'll notice a giant space on the top of your welcome screen.

This space is taken up by an empty navigation bar. Let's look at how to change the look and content of this bar.

Styling the navigation bar in SwiftUI

Let's fill up the navigation bar with a title on the welcome screen. Open WelcomeView.swift, and add a navigation bar title to the top-most VStack:

var body: some View {
  VStack(alignment: .leading) {
    ...
  }
  .navigationBarTitle("Create an account")
}

If you run the project, you might notice there's now two texts saying "Create an account".

Remove the one inside the VStack:

var body: some View {
  VStack(alignment: .leading) {

    /* Remove from here...
    Text("Create an account")
      .modifier(BodyText())
      .padding()
    ... to here*/

    Text("Connect with people around the world")
      .modifier(TitleText())
      .padding([.bottom, .leading, .trailing])

    ...
}

The view looks the same as it did before, but the text is now part of the navigation bar.

Note: If you're wondering how to get the default-looking iOS navigation bar, you can use navigationBarTitle(_:displayMode:) and pass in .inline as the display mode.

Since your view is wrapped inside a NavigationView, you can now use NavigationLink to present the login screen. Wrap the primary button in body inside a NavigationLink (instead of a Button):

var body: some View {
  VStack(alignment: .leading) {

    ...

    VStack(spacing: 30) {
      // Change this line:
      NavigationLink(destination: LoginView()) {
        PrimaryButton(title: "Log In")
      }

      Button(action: { }) {
        SecondaryButton(title: "Sign Up")
      }
    }

    ...
  }
}

Just like Button, NavigationLink will wrap around a view and make it interactable. Instead of calling a function, though, the navigation link will present the provided view when it's tapped.

If you run the project now and tap the log in button, you'll be taken to your login view.

The view inside the navigation link can be anything you want, but be aware that views that respond to touches, like buttons, will consume the touch and it won't propagate to the navigation link. In other words, buttons inside navigation links won't trigger the presentation. Watch out for those hungry buttons, lest they eat your touches!

Making a reusable SwiftUI text field

Now that you can navigate to the login view, you'll start building out that view.

Since you're building a login form, you'll first build a reusable text field that you can use throughout your app. Small reusable views are a leitmotif of SwiftUI apps! Once you're done, it will look like this:

Already you can see the views you'll combine to create this text field. In a vertical stack, you'll need Text for the title, a TextField to edit the text, an Image to show the icon and a way to display the line on the bottom of the view.

Before you start working on the view, let's first add the little email icon. You can find the image here. Drag it over to your Assets.xcassets file and name it email.

Next, create a new SwiftUI View file called ErrorTextField.swift. It's called error text field because you'll add the ability to show an error if the text is invalid. Change the struct to the following:

struct ErrorTextField: View {

  let title: String
  let placeholder: String
  let iconName: String
  let text: Binding<String>
  let keyboardType: UIKeyboardType
  let isValid: (String) -> Bool

  init(title: String,
    placeholder: String,
    iconName: String,
    text: Binding<String>,
    keyboardType: UIKeyboardType = UIKeyboardType.default,
    isValid: @escaping (String)-> Bool = { _ in true}) {

    self.title = title
    self.placeholder = placeholder
    self.iconName = iconName
    self.text = text
    self.keyboardType = keyboardType
    self.isValid = isValid
  }

}

It looks like a lot of code but don't worry — it's a boilerplate initializer that sets up all the necessary properties of the view. You'll need a title and a placeholder, the image name of the icon, a function to validate the text and the keyboard type of the text field.

You'll also need a binding to the text. A binding is similar to a state variable, but it's used to bind data between two different views. For instance, you can provide the text field with a binding to your text. The text field will change the text, and your view will be re-drawn.

Think of binding as a state variable that you can pass to other views. It's kind of like giving someone your phone number and telling them to call you when something changes.

In this case, you'll receive a binding to the text that you'll pass along to the TextField view.

Since this view can show an error, add a computed property that will determine whether an error should be shown:

var showsError: Bool {
  if text.wrappedValue.isEmpty {
    return false
  } else {
    return !isValid(text.wrappedValue)
  }
}

There's no point in showing the error if the text is empty. If the text is not empty, you'll use the provided text validation function to determine if an error should get shown.

Next, create the body for this view by adding the title to a stack:

var body: some View {
  VStack(alignment: .leading) {
    Text(title)
      .foregroundColor(Color(.lightGray))
      .fontWeight(.bold)
  }
}

To make your life easier, you'll also modify the preview to show the different possible states of the text field all at once:

struct ErrorTextField_Previews: PreviewProvider {
  static var previews: some View {
    Group {
      ErrorTextField(
        title: "Email",
        placeholder: "test@email.com",
        iconName: "email",
        text: .constant(""))
        .padding()
        .previewLayout(.fixed(width: 400, height: 100))

      ErrorTextField(
        title: "Email",
        placeholder: "test@email.com",
        iconName: "email",
        text: .constant("some@email.com"))
        .padding()
        .previewLayout(.fixed(width: 400, height: 100))

      ErrorTextField(
        title: "Email",
        placeholder: "test@email.com",
        iconName: "email",
        text: .constant("someemail.com"),
        isValid: { _ in false })
        .padding()
        .previewLayout(.fixed(width: 400, height: 100))
    }
  }
}

Note: You'll notice the text is .constant("some value"). The constant is a factory static function that creates a binding that never changes. It's useful for testing and previews, like in the above example.

Just like in the previous part of this SwiftUI course, you create multiple previews by adding views into a Group.

Now that you can see what you're doing, let's add the text field and the email icon.

Laying out SwiftUI views horizontally

With that out of the way, you can continue building the view by adding the text field and the icon. To make sure the text field and the icon are next to each other, you can use an HStack:

var body: some View {
  VStack(alignment: .leading) {

    Text(title)
      .foregroundColor(Color(.lightGray))
      .fontWeight(.bold)

    // New code:
    HStack {
      TextField(placeholder, text: text)
        .keyboardType(keyboardType)
        .autocapitalization(.none)
      Image(iconName)
        .resizable()
        .aspectRatio(contentMode: .fit)
        .frame(width: 18, height: 18)
    }
  }
}

You're already familiar with VStack. Well, HStack works the same, except horizontally. You arrange a text field and an image in a horizontal stack.

The TextField is the SwiftUI equivalent of UIKit's UITextField, except it's plain by default — which is exactly what we need.

Note: If you want to style a text field to look like a regular UIKit text field, you can call textFieldStyle(RoundedBorderTextFieldStyle()) on the text field. The rounded border style is the one used by the good old UITextField.

In the previous part of this SwiftUI course, you learned about making image views expand to match their parent. In this case, you want the image to have a fixed size. That's why you call frame and pass it an exact width and height.

Displaying basic shape views in SwiftUI

Finally, you'll add the border on the bottom of the text field. Since the border is just a plain rectangular view with no content, you can use a Rectangle:

var body: some View {
  VStack(alignment: .leading) {
    Text(title)
      .foregroundColor(Color(.lightGray))
      .fontWeight(.bold)

    HStack { ... }

    // New code:
    Rectangle()
      .frame(height: 2)
      .foregroundColor(showsError ? 
        .red : 
        Color(red: 189 / 255, green: 204 / 255, blue: 215 / 255))
  }
}

As its name suggests, Rectangle is just, well, a rectangle. Perfect for displaying borders or backgrounds. You set its height to 2 and leave other dimensions up to SwiftUI. You'll also set its color to red if showsError is true, otherwise, you'll use a light gray color.

Rectangle is only one of a few basic shape views. There's also RoundedRectangle, Circle, Capsule and Ellipse. Remember these when you need to draw shapes — there's no need to resort to CAShapeLayer anymore.

You now have a nice looking text field that is flexible enough to be used throughout your app. It's time to put it to action in the login screen!

Creating a SwiftUI login screen

Now, finally, you can get to work on the login screen! Head back to LoginView.swift and change body to the following:

var body: some View {
  VStack(alignment: .leading, spacing: 26) {
    Text("Log In")
      .modifier(TitleText())
  }
  .padding()
}

First, you'll make sure stack view items are aligned to the left edge, just like in the last part of this SwiftUI course. Add a spacing of 26 points between each item and make sure the "Log In" text is styled as a title. You'll also add the system padding to the stack.

Remember that the text field you built receives a validation function? Let's create one that will validate an email. Add the following method to the struct:

private func isValid(email: String) -> Bool {
  let regex = "[A-Z0-9a-z._%+-]+@[A-Za-z0-9.-]+\\.[A-Za-z]{2,64}"
  let predicate = NSPredicate(format:"SELF MATCHES %@", regex)
  return predicate.evaluate(with: email)
}

This method checks the email string against a regular expression. If the email doesn't contain an @ sign, a dot, and text around both of those, this function will return false.

Also, add a state variable for the entered text:

@State private var email = ""

With those two pieces in place, you can now add a text field for the email to your view:

var body: some View {
  VStack(alignment: .leading, spacing: 26) {
    Text("Log In")
      .modifier(TitleText())

    // New code:
    ErrorTextField(
      title: "Email",
      placeholder: "mail@example.com",
      iconName: "email",
      text: $email,
      keyboardType: .emailAddress,
      isValid: isValid)
  }
  .padding()
}

Most of the properties should be self-explanatory, except maybe this weird $text thing. Don't worry, you're not programming PHP! $ is a special character that converts an @State variable to a binding. Remember, bindings are state variables that can be changed from a different view. In this case, LoginView will pass the email as a binding to ErrorTextField.

Next, create an empty function that you'll call when the user presses the login button:

private func login() {
  // Initiate network request
}

Then, add a spacer and a button that calls this function. As you learned in the previous part of this SwiftUI course, the spacer will expand to make sure everything above it is on top, while the button is on the very bottom of the stack. Add the following to body:

var body: some View {
  VStack(alignment: .leading, spacing: 26) {
    ...

    Spacer()

    Button(action: login) {
      PrimaryButton(title: "Log In")
    }
  }
  .padding()
}

Whenever the button is pressed, SwiftUI will call your login function which, currently, does absolutely nothing.

Don't be disappointed, you'll fix this soon.

Presenting a SwiftUI view asynchronously

Later in this course, login will perform a network request to log the user in and then present a contacts screen. For now, though, you'll navigate to an empty screen when the button is pressed.

Earlier, you learned how to use NavigationLink to present a new view in the navigation stack when a button is pressed. Often, though, you don't want to immidiately go to a new screen. You'll usually want to perform a check, a network request or some other bit of logic, and then present a new screen programmatically when you're done. SwiftUI has a way to do that, but it is a bit clumsy.

First, create a new state variable:

@State private var showContacts = false

You'll navigate to the contacts screen when this variable gets set to true. To do this, you can use a NavigationLink, but differently from before. Instead of wrapping a button in the navigation link, you'll show a hidden link that the user won't see.

You'll also use a different NavigationLink initializer: NavigationLink(destination:isActive:label). The key here is isActive: This is a binding to a bool variable. When it gets set from false to true NavigationLink will know to trigger the presentation.

Add the navigation link to the bottom of body:

var body: some View {
  VStack(alignment: .leading, spacing: 26) {
    ...

    Button(action: login) {
      PrimaryButton(title: "Log In")
    }

    NavigationLink(destination: EmptyView(), isActive: $showContacts) {
      EmptyView()
    }
  }
  .padding()
}

By making navigation link's body an EmptyView you make sure that the user can't see the link. You set its isActive binding to the state variable you created earlier.

Finally, set showContacts to true at the bottom of login:

showContacts = true

When the user presses the login button, SwiftUI calls login, which sets showContacts to true, triggering the NavigationLink, which then presents an empty view in the navigation stack. This Rube Goldberg machine of events is what happens when you try to do an imperative thing, like presenting a view programmatically, in a declarative UI framework.

Presenting multiple SwiftUI views asynchronously

To expand this NavigationLink pattern to multiple views, you'd have to have one state variable for each view you want to present, leading to multiple flags in your view that can be false and true at the same time. This doesn't scale well.

To solve this problem, NavigationLink offers a third initializer: NavigationLink(_:destination:tag:selection:). While the one you used previously has a binding to a Boolean, this initializer is generic. selection is a binding to any Hashable type, like integers, strings and even enums. If the current value of selection matches the value of tag, the link will get triggered.

For instance, let's say you wanted to present either a login or a registration screen based on some logic. You'd start by defining an enum with cases for each of the views you'd like to present.

enum PresentedView {
  case login
  case registration
}

You'll also need a state variable to track which view should be shown:

@State private var viewToPresent: PresentedView?

Then, inside body, you can create hidden navigation links to each of your views.

NavigationLink(
  destination: LoginView(), 
  tag: .login, 
  selection: $viewToPresent) {
  EmptyView()
}

NavigationLink(
  destination: RegistrationView(), 
  tag: .registration, 
  selection: $viewToPresent) {
  EmptyView()
}

When you want to present one of these two views, set viewToPresent to the corresponding value:

viewToPresent = .login

The navigation link will check the bound value, and if it matches its tag, present the view. This solution is easier to scale, so if you have more than one view you'd like to present, I suggest you use this approach.

Conclusion

And there you have it! You've built out a login screen and by doing so you've learned a bunch of important SwiftUI concepts:

How to present and style SwiftUI text fields, as well as how to use basic SwiftUI shape views.
How to use a NavigationView to show and style a navigation bar.
How to push a view when you press a button using NavigationLink.
How to push SwiftUI views programmatically using NavigationLink(destination:isActive) or NavigationLink(destination:tag:selection:).

I'd say that's a good day's work! No need to stop now, though.

In the next part, you'll learn all about SwiftUI lists by building out a contacts screen to show your user's friends. You'll also begin your journey into making network requests!

Your first SwiftUI screen

marinbenc🐧 — Tue, 11 Feb 2020 07:51:44 +0000

SwiftUI is a unifying framework in more ways than one. Whether you're building an Apple Watch, Apple TV, iPhone, iPad or even Mac apps, SwiftUI will let you do that. Whether you're a designer, web developer or simply someone interested in building apps, SwiftUI is still for you. It might take a bit longer than for seasoned iOS veterans, but you'll get the hang of things!

Once you're on the other side of this course, you won't just be an iOS developer you'll be a SwiftUI developer. Capable of building for all Apple platforms!

This course will guide you through building a real-world chat application. You'll build each part of the app including logging the user in, displaying their contacts and chatting over the internet. By building a real app, you'll quickly learn practical SwiftUI skills that you can use in the real world.

In this first part, you'll make a welcome screen for the app. You'll learn about existing SwiftUI views, how to make your own views, how to lay them out and space them as well as how to style them to your liking.

On your way to victory, SwiftUI might try to sabotage you at some point with its opaque error messages or hard-to-find APIs. Remember, fortune favors the brave, so let's dive in with courage!

You can find the finished project of this part of the SwiftUI course here.

Making SwiftUI Views

We'll start our SwiftUI adventure by building out a welcome screen for our app. It will be a static screen with some information, an image and buttons to either log in or sign up to our chat service.

Your first SwiftUI screen!

A SwiftUI app is a huge tree of Views. View is a SwiftUI protocol that represents any view that can be shown on the screen, whether it's a huge detail screen or a simple label.

Let's start by creating a new SwiftUI app. Open up Xcode. For this to work, you'll need Xcode 11 or later.

I am creating this course in collaboration with CometChat, a modern chat platform to help you add chat to you Swift app. During the next few weeks, we’ll be releasing installments of our free SwiftUI course here on dev.to! In the course, you’ll dive deep into SwiftUI by building a real-world production-scale chat app, learning SwiftUI in a practical way, on a scale larger than a simple example app. Follow me to get notified of future parts of this course! You can also follow @CometChat on Twitter see the course of CometChat’s blog.

On the Xcode welcome screen, click Create a new Xcode project. Select the Single View App template under iOS and hit Next. Name the app anything you'd like. I named my app "CometChat". Make sure SwiftUI is selected as the User Interface and click Next again. Select a good location to save the project and click Create.

Congrats! You just made your first SwiftUI app. This is the end of this course. Just kidding.

Next, you'll create a new SwiftUI view. Click File > New > File... and, as the template, select SwiftUI View and name it WelcomeView.

You'll get presented with an almost empty struct, except for one computed property called body. This is the most important part of a view. body returns the contents of your view. iOS will periodically call this computed property to re-draw what's on the screen.

You might have noticed body's type is some View. View is a protocol, and the some keyword tells Swift that body can be any concrete type, as long as it conforms to View.

Change the contents of the struct to the following:

struct WelcomeView: View {

  var body: some View {
    Text("Create an account")
  }

}

On the right of your code, you'll see the Canvas. This is where you can preview the views you're making. If the preview updating is paused, click the Resume button in the top-right corner.

As you make changes to your code, the Canvas will update to show your changes. At least in theory. Often the canvas will be too quick to update and try to compile partially-written code or run into some other issue. You'll get used to clicking Try Again and Resume a lot. :)

Arranging SwiftUI views with stacks

Let's add another label to the view, below the one you just added. You might be tempted to simply add another Text below the current one, but if you do that you'd get a compiler error. The error happens because body is a single View: You can't return two values. Instead, you need a view that would wrap around the two texts, like a SwiftUI birthday present.

SwiftUI has a couple of different views that group other views and the one you'll use the most is VStack and HStack. These are the SwiftUI equivalents to UIKit's UIStackView, stacking for vertical and horizontal stack views, respectively. If you're coming from web development, VStack and HStack are the Flexbox of SwiftUI.

These two views are your primary layout tool in SwiftUI. By arranging items into stacks, nesting stacks within stacks and controlling stack alignment and item spacing you can make almost any layout imaginable.

Let's change body so that it returns a vertical stack of two text views:

var body: some View {
  VStack {
    Text("Create an account")
    Text("Connect with people around the world")
  }
}

You'll see the two labels centered in the middle of the preview screen.

If you look at the screen we're trying to make, though, the two texts need to be aligned to the left and sit on top of the view. You can align items in a stack by passing the alignment in the stack's initializer:

var body: some View {
  VStack(alignment: .leading) {
    Text("Create an account")
    Text("Connect with people around the world")
  }
}

Now the texts are aligned to the left, but they're still not on the top of the screen.

Let's look at how we can fix that.

Vertically aligning VStack items with spacers

The stack's alignment controls the alignment of the items along the opposite axis of the stack, so for VStack, it controls the horizontal alignment. To align items along the major axis you can either manually space the items or use a special view called Spacer.

A Spacer, as its name suggests, is an empty view that stretches out to fill out as much space as it can. When you place it inside a VStack, it will stretch horizontally. If you place it in an HStack, it stretches vertically.

Add a spacer to the bottom of your stack to see what happens:

var body: some View {
  VStack(alignment: .leading) {
    Text("Create an account")
    Text("Connect with people around the world")
    Spacer()
  }
}

If VStack is the birthday present, the spacers are the birthday party balloons, filling up the horizontal space as long as they can, pushing the two text views to the top of the screen.

To get the feel for how spacers behave, experiment by placing spacers at different positions inside the stack. Here are a couple of examples:

As you can see, by placing spacers at different positions you can align and space out your items anywhere in the stack. To fine-tune the spacing, you'll use padding — but you'll read more on that later in this part of the SwiftUI course.

For now, we'll take a break from laying out our view and venture into styling the text.

Styling SwiftUI views with `View` methods

Views have all kinds of methods to tweak their properties, whether its changing their size, colors, state, opacity or anything else that can be changed. Some of these methods are common to all views, like methods for changing the frame or padding. Others are specific to that view, such as the font of a Text or the enabled state of a Button.

According to the screenshot of the view we're building, the second text in our stack needs to have a big and bold font. To make this change, call the font method on the text:

var body: some View {
  VStack(alignment: .leading) {
    Text("Create an account")

    Text("Connect with people around the world")
      .font(Font.largeTitle.weight(.bold))

    Spacer()
  }
}

If you're used to UIKit, you're probably familiar with classes like UIFont or UIColor. SwiftUI has its equivalents, but drops the UI prefix and makes them a struct.

There's also one big difference between the UIKit and SwiftUI versions: SwiftUI's fonts and colors are late binding. This means that a Font is just a token or an identifier for some font. This token only gets resolved to a specific font during runtime, depending on the environment it's running in. For instance, Font.largeTitle gets resolved to San Francisco on iOS, but could be Helvetica on the web.

SwiftUI modifier methods are non-mutating. Instead, they return a new View with the changes applied. This has two consequences. First, you can chain modifier calls one after the other.

Image("welcome")
  .resizable() // returns a new Image
  .aspectRatio(contentMode: .fit) // returns a new View
  .padding(.bottom, 35) // returns a new View

Secondly, because each of these methods creates a new view, the order of calling the methods can sometimes be important. A modifier called later can override what you set earlier, like in CSS or when subclassing a Swift class.

If you're the kind of developer who prefers a GUI over plain code, you can Control-Option-Click a SwiftUI view (either in the code or the preview) and open the SwiftUI Inspector.

This opens up a popup window that will let you tweak the settings of a view. As you make changes, SwiftUI will generate code for those changes and add them to your body.

Changing the color of a SwiftUI Text

While we're beautifying our views, why not add some color. As you can guess by now, adding color is a simple matter of calling a method on the label:

var body: some View {
  VStack(alignment: .leading) {
    Text("Create an account")

    Text("Connect with people around the world")
      .font(Font.largeTitle.weight(.bold))
      .foregroundColor(.accentColor)

    Spacer()
  }
}

Just like Font, Color is also a late-binding token, which means that the actual color value of the color above will depend on the current environment, including what platform it's running on as well as whether it's running in light or dark mode.

Even SwiftUI Colors with specific names like .blue will result in a different color in light and dark mode. These are called adaptive colors, and you can make your own!

Adding your own adaptive colors

You'll add a new color for the text content of your app. Open Assets.xcassets in the main folder of your app in Xcode. Right-click on the list of assets and select New Color Set. At first, you'll see a white color with "Universal" below it. But, if you take a look at the Attributes Inspector, you'll see there's a bunch of different environment combinations you can set.

For instance, you can set one color for CarPlay in dark mode, a different color for Apple TVs in dark mode, and a third color for iPhones.

For now, select only Universal in the Devices list, and Any, Dark in the Appearances dropdown. This allows you to set a different color for light and dark mode on all devices.

Select the Any Appearance color and in the Attributes Inspector select 8-bit Hexadecimal for the Input Method and enter the hex value #2D313F.

For Dark Appearance plain white will suffice. Select the Color in the sidebar and rename it to body. This name is important because that's how we'll access it in code.

Create a new plain Swift file called Colors.swift. Replace the contents of the file with the following:

import UIKit
import SwiftUI

extension Color {
  static let body = Color("body")

  static let cometChatBlue = Color(red: 27 / 255, green: 71 / 255, blue: 219 / 255)
  static let shadow = Color(red: 27 / 255, green: 71 / 255, blue: 219 / 255, opacity: 0.3)
  static let background = Color(red: 248 / 255, green: 249 / 255, blue: 251 / 255)
}

extension UIColor {
  static let body = UIColor(red: 45 / 255, green: 49 / 255, blue: 63 / 255, alpha: 1)
}

This adds new static properties to Color and UIColor. We can use these colors throughout our app without having to copy and paste color names or specific values. Having everything in one place also means we can easily change these colors later.

Now that you have the color you can use it to make your text prettier. Head back to WelcomeView.swift and add a color to the first text:

var body: some View {
  VStack(alignment: .leading) {
    Text("Create an account")
      .foregroundColor(.body)

    Text("Connect with people around the world")
      .font(Font.largeTitle.weight(.bold))
      .foregroundColor(.cometChatBlue)

    Spacer()
  }
}

Extending Color with static properties is a great way to add reusability to our app. You can go a step further to make any changes to a view reusable. Let's do that next.

Styling SwiftUI views with view modifiers

So far you have a title and a body text styled as they look in the screenshot above. You'll use the same text treatment (font and color combination) throughout your whole app. Instead of copying and pasting all the method calls in every View with texts, it would be better to have a way to mark titles and body text in a more reusable way.

SwiftUI lets you do that with View Modifiers. Structs and classes in your app can implement the ViewModifier protocol which has one required method that receives and returns a view. The idea is that you receive a view, perform any necessary transformations and return it back to the caller.

You'll add two modifiers, one for the body text and one for titles. Create another plain Swift file and name it TextModifiers.swift. Add a new view modifier to the file:

import SwiftUI

struct TitleText: ViewModifier {
  func body(content: Content) -> some View {
    content
      .font(Font.largeTitle.weight(.bold))
      .foregroundColor(.cometChatBlue)
  }
}

You implement the required method by receiving a view, applying a new font and foreground color and returning the changed view.

Similarly, add another struct below the one you just created for the body text:

struct BodyText: ViewModifier {
  func body(content: Content) -> some View {
    content
      .foregroundColor(.body)
  }
}

For the body text, you'll leave the font as it is and only change the color. Now, you can go back to WelcomeView.swift and replace the styling you applied with the modifiers by calling the modifier method on the text views:

var body: some View {
  VStack(alignment: .leading) {
    Text("Create an account")
      .modifier(BodyText())

    Text("Connect with people around the world")
      .modifier(TitleText())

    Spacer()
  }
}

You can now use these modifiers in any future views. When you want to change the look of your apps content, you can change the modifier the apply the changes everywhere in your app.

Since view modifiers return a View, you have the complete power of SwiftUI inside a modifier. This means you can even do complex changes like embed the view in a stack, scale it, adjust its spacing, add overlays and make whichever changes you can think of.

Spacing SwiftUI views with padding

I think that's enough styling for now. It's time to get back to laying out our screen with padding. SwiftUI doesn't have Auto Layout or constraints, but that doesn't mean you can't do everything you did in UIKit. It might be even easier. At least sometimes.

The method you use for this is called padding, and it has two optional parameters:

func padding(
  _ edges: Edge.Set = .all, 
  _ length: CGFloat? = nil) 
  -> some View

The first parameter is the set of edges to apply the padding to, while the second is the actual value of the padding. By default, the first parameter applies the padding to all edges. If you omit the length, it will be nil which will apply the default system padding to the view.

Usually, you'd want to apply the default padding. The advantage of the default padding is that it's automatically adjusted to the device you're using. Smaller devices will have a smaller padding and vice-versa.

Change the body of your view to add a padding to both of the texts:

var body: some View {
  VStack(alignment: .leading) {
    Text("Create an account")
      .modifier(BodyText())
      .padding()

    Text("Connect with people around the world")
      .modifier(TitleText())
      .padding([.bottom, .leading, .trailing])

    Spacer()
  }
}

To the body text, you add a default padding to every edge by calling padding(). The title text doesn't need a padding on top, so you add the system padding only to the bottom, leading (left) and trailing (right) edges.

Adding padding to a SwiftUI view

You can combine the first and second parameter of padding to achieve your desired effect. Here are some examples of different ways you can call padding:

padding() applies system padding to all edges.
padding(.leading) applies the system padding to the left edge.
padding([.bottom, .leading, .trailing]) applies the system padding to three edges.
padding(.top, 20) adds a padding of 20 points to the top edge.
padding([.bottom, .top], 0) makes the top and bottom padding zero.

By combining stacks and padding you can intuitively make pixel-perfect layouts. At least, once you get used to it. :)

Nesting SwiftUI stacks

In UIKit, one of the most common view types are stack and table views. The same goes for SwiftUI: Your views will often be a big tree of nested stacks. In the screenshot of the screen you're making there's an image with a text below the two texts you just created.

Both the image and the text are centered, so add another VStack inside the existing one, that you'll center horizontally:

var body: some View {
  VStack(alignment: .leading) {
    Text("Create an account")
      .modifier(BodyText())
      .padding()

    Text("Connect with people around the world")
      .modifier(TitleText())
      .padding([.bottom, .leading, .trailing])

    VStack(alignment: .center) {
      Text("""
        This is a sample app.
        Create an account or login to begin chatting.
        """)
        .modifier(BodyText())
        .multilineTextAlignment(.center)
        .padding([.leading, .trailing], 40)
    }

    Spacer()
  }
}

You add another VStack that will hold the image and the text. The text also has the body text modifier. You make sure the text is centered and add a padding of 40 points on the leading and trailing edges, so it doesn't touch the edges of the screen.

Displaying images in SwiftUI

Now that we added the text that's below the image, it's time to add the image. Image views in SwiftUI are called Image, and they can be tricky to parse at first.

Before you add an image view, you first need to add the image itself. You can find the welcome image here.

Open Assets.xcassets and drag the image into the list of assets. Make sure the name is welcome.

Now, you can add a new Image to the inner VStack:

VStack(alignment: .center) {
  Image("welcome")
    .padding(.bottom, 35)
    .padding([.leading, .trailing], 80)

  Text("""
    This is a sample app.
    Create an account or login to begin chatting.
    """)
    .modifier(BodyText())
    .multilineTextAlignment(.center)
    .padding([.leading, .trailing], 40)
}

You give the Image the name of the asset you created. Give it a padding of 35 points at the bottom (between the image and the text), as well as a padding of 80 on the sides.

The image looks good, but there's a small issue: Our whole UI is now broken.

It would be ideal if the image scaled according to the device size and how much space it has to grow. On an iPhone SE, the image should be smaller than on an 11 Pro Max.

We'll deal with this issue in a second, but let's first take a look at how we can spot issues like this in the future.

Previewing SwiftUI views on a different device

You can tweak the SwiftUI preview to see your views at different sizes. The preview screen isn't magic: It's loaded from a struct in the file that implements PreviewProvider. The preview provider is similar to a View. It has one computed property where you return what should be drawn inside the Canvas.

struct WelcomeView_Previews: PreviewProvider {
  static var previews: some View {
    WelcomeView()
  }
}

You can change this view in the same way you can change any other View. There are also preview-specific methods that control the size and look of the previews.

Call previewDevice inside the previews property and display an iPhone SE:

struct WelcomeView_Previews: PreviewProvider {
  static var previews: some View {
    WelcomeView()
      .previewDevice(PreviewDevice(rawValue: "iPhone SE"))
  }
}

You can now see that the image doesn't scale according to screen size. Let's fix that.

Scaling a SwiftUI Image

To make an Image view resizable you need to, you guessed it, call the resizable method! Add the following two new lines to body:

VStack(alignment: .center) {
  Image("welcome")
    .resizable()
    .aspectRatio(contentMode: .fit)
    .padding(.bottom, 35)
    .padding([.leading, .trailing], 80)

  Text("""
    This is a sample app.
    Create an account or login to begin chatting.
    """)
    .modifier(BodyText())
    .multilineTextAlignment(.center)
    .padding([.leading, .trailing], 40)
}

By default the image will just scale to fill its available space, which you probably don't want. Usually, you want to maintain the image's aspect ratio so that it doesn't look stretched out.

To do that in SwiftUI, you can use the aspectRatio method which receives a parameter telling it how to scale the image. .fit scales the image so that it always fits inside its space, leading to letter-boxing. On the other hand, .fill scales it so that it fills the whole space, but you won't see the whole image.

In the above code, you first call resizable on the image to tell SwiftUI that it can stretch out the image if needed. Then, you call aspectRatio with .fit to make sure the image always fits within the screen, 80 points from each edge.

If you change the device back to iPhone 11 in the preview you'll notice the image now scales to fit its available size, no Auto Layout needed.

We're almost done with our welcome screen! The final step is to add the two buttons on the bottom.

Creating buttons in SwiftUI

To build out a screen like this in UIKit, you'd use a view controller, and house all of your view related things in there. Usually, this is not how you'll build SwiftUI views.

SwiftUI does away with the distinction between view and view controller and it's built so that you compose tons of tiny views to build your screen.

That's what you've been doing: Text, VStack and Image are all small views that do one thing well, but by combining them you've created an already good-looking screen.

Now it's time we make your own small SwiftUI views that you can use throughout the app. These views will be the two buttons you see on the bottom of the screen you're building.

Create a new SwiftUI View file called ButtonViews, and change the struct to the following:

import SwiftUI

struct PrimaryButton: View {

  let title: String

  var body: some View {
    Text(title.uppercased())
  }
}

You need to build a big blue button with rounded corners. You'll start with a good old text view.

A button can hold any other view, no matter how complex. With that in mind, our button is looking a little plain.

At this point, you'll get an error because the automatically generated preview references the wrong view name. Change the preview to show your button:

struct ButtonViews_Previews: PreviewProvider {
  static var previews: some View {
    PrimaryButton(title: "Primary")
  }
}

We'll make it look better, but before we go on, let's do some preview setup to make our lives easier.

Changing the size of a SwiftUI preview

Earlier in this section of the course, you learned how to preview your SwiftUI views on different devices. Most of your views will be reusable UI components, so it doesn't make sense to show a whole iPhone with a tiny view in the middle of a blank screen.

Instead, you can preview them in a small window. Change the preview struct to the following:

struct ButtonViews_Previews: PreviewProvider {
  static var previews: some View {
    PrimaryButton(title: "Primary")
      .previewLayout(.fixed(width: 300, height: 100))
  }
}

Now the preview shows a small rectangle that houses our button.

Nice and neat! Let's get back to our buttons.

Styling SwiftUI buttons

Let's deal with that plain-looking button! Start by adding a background and a shadow to the button:

var body: some View {
  Text(title.uppercased())
    .background(Color.accentColor)
    .cornerRadius(5)
    .shadow(color: .shadow, radius: 15, x: 0, y: 5)
}

Okay, you now have a rounded blue blob, which is a start.

Next, change the color and add some padding around the text:

var body: some View {
  Text(title.uppercased())
    .fontWeight(.bold)
    .foregroundColor(.white)
    .padding()
    .frame(maxWidth: .infinity)
    .background(Color.accentColor)
    .cornerRadius(5)
    .shadow(color: .shadow, radius: 15, x: 0, y: 5)
}

There's one new method here: frame. While padding determines how much space there is around the content, the frame determines how big the content is.

You can either specify a constant size or you can make suggestions to SwiftUI about how it should size the view. Here, you set the maximum width to infinite, making the view stretch to fit the size of its parent.

Our button is looking perfect! Let's add another, secondary button.

Creating the secondary button

To create the secondary button, you'll use a complex programming technique used by generations of programmers: copying and pasting. Because SwiftUI views are short pieces of code that are all in a single struct, you can easily copy and paste a view, modify it slightly and get a whole new look.

For the secondary button, copy over the primary button and change the colors a bit to match the screenshot:

struct SecondaryButton: View {

  let title: String

  var body: some View {
    Text(title.uppercased())
      .fontWeight(.bold)
      .foregroundColor(.accentColor)
      .padding()
      .frame(maxWidth: .infinity)
      .background(Color.white)
      .cornerRadius(5)
      .shadow(color: .shadow, radius: 15, x: 0, y: 5)
  }
}

It looks great... I think. To see the button you need to change your preview first.

Showing multiple SwiftUI previews

You might be tempted to replace Primary with Secondary in the preview and call it a day. But, why show just one view, when you can show both of them at once?

If you wrap the views inside a Group, the Canvas will show each grouped view as a separate preview.

static var previews: some View {
  Group {
    PrimaryButton(title: "Primary")
      .previewLayout(.fixed(width: 300, height: 100))

    SecondaryButton(title: "Secondary")
      .previewLayout(.fixed(width: 300, height: 100))
  }
}

Now you can see both of the buttons at once.

This is especially useful when you have views that can show multiple states. For instance, we can show a preview for buttons that have long titles:

static var previews: some View {
  Group {
    PrimaryButton(title: "Primary")
      .previewLayout(.fixed(width: 300, height: 100))

    PrimaryButton(title: "This button has a really long title")
      .previewLayout(.fixed(width: 300, height: 100))

    SecondaryButton(title: "Secondary")
      .previewLayout(.fixed(width: 300, height: 100))
  }
}

This makes it easy to see how your changes affect different states of your views, making sure you spot a lot of bugs without having to build and click around your app.

Using custom SwitUI views

With our buttons created, let's add them to the welcome screen. Back in WelcomeView.swift, add a new VStack with the two buttons, the final addition to the welcome screen:

var body: some View {
  VStack(alignment: .leading) {
    Text("Create an account")
      .modifier(BodyText())
      .padding()

    Text("Connect with people around the world")
      .modifier(TitleText())
      .padding([.bottom, .leading, .trailing])

    VStack(alignment: .center) { ... }

    // New code:
    VStack(spacing: 30) {
      Button(action: { }) {
        PrimaryButton(title: "Log In")
      }

      Button(action: { }) {
        SecondaryButton(title: "Sign Up")
      }
    }
    .padding([.leading, .bottom, .trailing])
    .padding(.top, 40)
    // ---

    Spacer()
  }
}

You can use your Views just like any other SwiftUI view. After all, they're nothing more than a Swift struct conforming to a protocol. In the above code, you placed your views inside a VStack, and each inside a Button.

As opposed to UIKit's UIButton, Button is a completely blank view. All it does is make its contents touchable and manages button state changes. How the button looks is completely up to you. In the code above, you used PrimaryButton and SecondaryButton to display a button label. Instead of that, you could have used Text, Image or any other SwiftUI view.

Currently, the buttons don't do anything. But, if you run the project and tap on the buttons, you'll notice they light up as you tap them. That animation is coming from Button.

Earlier in this part of the course you used padding to space out views within a stack. If you want the space between each of the items to be the same, you can pass the spacing parameter to a stack's initializer. The stack will then take care of the spacing for you. You can even use padding a spacing in tandem for those pixel-perfect designers among you!

And with that, your welcome screen is done! This now looks exactly like the original screenshot, giving the user some information about the app and a way to log in and register. Right now, these buttons don't do anything. In the next part of this SwiftUI course, you'll navigate to a login and registration screen!

Conclusion

In the span of one part of this course, you went from having no app and no SwiftUI knowledge to building out your first full SwiftUI screen! With this knowledge and some googling, you now have the skills to build almost any static SwiftUI screen.

You know about views, how to create them, lay them out and space them around. You also learned about adding and customizing text, creating buttons and displaying images.

SwiftUI shows its power here: By learning a small number of tools you can build out any UI you can imagine. That's elegant, flexible design.

Your layout knowledge doesn't need to end here, though. For the A-grade students among you, check out the WWDC session called "Building Custom Views with SwiftUI" which goes more in-depth into how the layout system works and some other tricks you can use.

There's still much to learn! You now know how to make static UIs, but in the next part, you'll learn how to navigate to a login screen and manage the state for your UIs. Keep reading to build out the login screen of your app!

SwiftUI: An Introduction

marinbenc🐧 — Mon, 23 Dec 2019 13:30:30 +0000

Apple dropped a bombshell for developers on WWDC 19. Among a bunch of other things, they released SwiftUI — a whole new way of making iOS apps and the biggest change to iOS development since Swift came out. Say goodbye to storyboards, auto-layout or coding your UI by hand, SwiftUI is here to replace all of that. If this sounds good to be true, you might be right. This introduction is here to show you what SwiftUI is all about, how it fits in the existing ecosystem and what it means for iOS developers.

Whether or not you're brave enough to switch to SwiftUI now, the fact is that the future of iOS development is SwiftUI. Currently, SwiftUI is in the same place Swift was a couple of years ago, starting small with a handful of early adopters. But Apple's messaging is pretty clear: Just like Swift, SwiftUI will become the dominant framework in a couple of years.

That's why learning SwiftUI, sooner rather than later, is a valuable (and marketable!) skill for any iOS developer and this introduction is here to get you started.

I am creating this course in collaboration with CometChat, a modern chat platform to help you add chat to you Swift app. During the next few weeks, we’ll be releasing installments of our free SwiftUI course here on dev.to! In the course, you’ll dive deep into SwiftUI by building a real-world production-scale chat app, learning SwiftUI in a practical way, on a scale larger than a simple example app. Follow me to get notified of future parts of this course! You can also follow @CometChat on Twitter see the course of CometChat’s blog.

How SwiftUI Works

To see just how different SwiftUI is from UIKit, let's look at a SwiftUI login screen.

That screen is coded with the following code:

import SwiftUI

struct ContentView: View {

  @State var email = ""
  @State var password = ""
  @State var error: String?

  var body: some View {
    NavigationView {
      VStack {
        TextField("Email", text: $email, onCommit: validate)
          .padding()
          .textFieldStyle(RoundedBorderTextFieldStyle())
          .keyboardType(.emailAddress)
        SecureField("Password", text: $password, onCommit: validate)
          .padding()
          .textFieldStyle(RoundedBorderTextFieldStyle())

        Button(action: login) {
          Text("Sign in")
        }.disabled(error != nil)

        error.flatMap {
          Text("Error: \($0)").foregroundColor(.red)
        }
      }.navigationBarTitle("Log In")
    }
  }

  func validate() { ... }
  func login() { ... }
}

Right now you might not understand everything that's going on in the code above — that's okay. Focus on how much code there is. This is the whole UI. There are no additional storyboards, constraint setup code or UIView subclasses. Even without knowing SwiftUI, you can kind of figure out what the screen looks like and what it does just by looking at the code.

You can think of SwiftUI views as being split between two workers. The workers are each working on their own thing, and only indirectly impacting each other. The first worker renders the UI based on the current state. The other worker takes input from the user and changes the state.

In a SwiftUI View, the state is a variable marked with @State, while the view is a computed variable called body.

struct ContentView: View {
  @State var count = 0

  var body: some View {
    VStack {
      Button(action: { self.count += 1 }) {
        Text("Increment")
      }
      Text("Count: \(count)")
    }
  }
}

You can think of body as a function from the state to the view. The @State annotation tells SwiftUI to listen to changes of that variable. Whenever it changes, SwiftUI will call body to re-render the view based on that new state.

The Body

The syntax inside of body might look strange, like a different language embedded into Swift. In reality, it's all just plain old Swift. There's no compiler magic or special exceptions for SwiftUI: You could implement SwiftUI using plain Swift if you had enough time.

The reason the syntax looks so strange is that it uses implicit [return](https://forums.swift.org/t/se-0255-implicit-returns-from-single-expression-functions/22544)s and function builders, two Swift 5.1 features.

Single-expression functions don't need a return keyword, which is why, in the above example, body can return a VStack even if you don’t write return.

Function builders let you define functions that implicitly return an array as a list of expressions. For instance, if you had a builder for an array of integers, you could write a function like the following:

@NumbersBuilder
func build() -> [Int] {
  1
  2 + 2
  3
}

Swift will then create an empty array, take every top-level expression in the function, evaluate then and add their results to the array, returning [1, 4, 3] for the above example.

Similarly, in the SwiftUI example above, VStack is a struct that receives a function builder of Views in its initializer. Because Swift lets us emit the round brackets around closures, the syntax looks like VStack { ... }. Inside the curly braces, every top-level expression gets evaluated to a list of Views (in this case containing Button and Text) and added to a vertical stack view.

If you remove all syntax sugar from the above body, you'll end up with this:

var body: some View {
  let button = Button(
    action: { self.count += 1 },
    label: { return ViewBuilder.buildBlock(Text("Increment")) })

  let countText = Text("Count: \(count)")

  return VStack(content: {
    return ViewBuilder.buildBlock(button, countText)
  })
}

It looks a lot messier, but you might get a better idea of what the code does this way.

The reason I'm telling you this is because SwiftUI will look daunting at first. You'll also receive very opaque error messages that you that will make you scratch your head in confusion. Knowing that underneath it all lies familiar old Swift will illuminate a lot of these errors for you.

The State

The counter screen example works without any additional code. You'll notice there's no "glue" code anywhere telling SwiftUI to update the counter label with the new text. That's because SwiftUI does that automatically.

By annotating count with @State, SwiftUI knows to call body to reload the view whenever count changes.

This still isn't compiler magic, just plain Swift. The @State annotation is made with a new Swift feature called property wrappers. Property wrappers are structs or classes that hold a single property and expose a setter and a getter, but when used they indistinguishable from a plain value.

By incrementing count (count += 1), you're really calling the setter in the State property wrapper. In other words, the following lines:

@State var count = 0
count += 1

Can be de-sugared to:

let countState = State(initialValue: 0)
countState.wrappedValue += 1

State has a defined setter for wrappedValue that will tell SwiftUI to reload the view. Thankfully, you don't have to write all that. By using property wrappers, SwiftUI lets you use the state as a regular variable, reloading the view automatically on every change.

You might notice an issue here. If we re-render the body every time a tiny change happens, we'll end up rewriting the whole UI every couple of seconds! Thankfully, SwiftUI only updates the views that need updating. The view hierarchy has a tree-like structure, and you can compare the current tree of views with the next one. Only the nodes that are different (and their sub-nodes) need to be updated.

The goal of SwiftUI is to let the system take care of more things, so you can focus on making the app you like.

The Three Tenets of SwiftUI

You'll hear a lot of buzzwords around SwiftUI, both from Apple and the community. To realize what SwiftUI means, it's important to unpack those buzzwords:

Composable

First, SwiftUI is composable. It doesn't separate views from view controllers, instead, your whole UI is made up of Views. This gives you the flexibility to separate your code in any way you see fit. You can have one huge View for your app, or have a huge hierarchy of small Views. This also makes it easier to reuse stuff. Every View can be placed inside every other View, with no need for child view controllers or lifecycle management pains.

This makes SwiftUI development incredibly easy for copy-and-paste development. While seasoned developers might scoff at that sentence, the way people build apps these days is by searching for simple things like "how to make a button" and copying the code.

I built a login screen this way in SwiftUI, without any previous knowledge, in 15 minutes. If I wanted to do that in UIKit, I'd have to spend days reading about Interface Builder, auto-layout and outlets before I could even start coding.

Finding a working example and tweaking it to your needs is incredibly productive, and SwiftUI lets you do that.

Declarative

Secondly, SwiftUI is declarative. Instead of creating a storyboard or creating your UI by instantiating and setting up views, SwiftUI lets you use Swift code to describe your UI. You tell SwiftUI, "I want a black view here, and a red view inside of it." SwiftUI then goes and draws those views for you. And it's all just plain Swift code.

What's frustrating about Storyboards is that they're not code. Everything needs to be constant and pre-determined. You can't dynamically calculate a margin or hide a view based on some condition. In other words, there are no **if**s in a storyboard.

However, the code inside SwiftUI's body is plain Swift. That means that all of Swift's tools are available to you: You can use structs, classes, collections, loops and control blocks to write out your UI. If you want to show an empty state in your list, you can check if the list is empty and show that view, and otherwise show the list.

By giving you the flexibility of Swift, your UI code becomes a lot simpler, and the tension between the Storyboard and your code disappears.

Reactive

Finally, SwiftUI is reactive. If you want to change the color of a button in UIKit, you'd grab the button and directly set its color. SwiftUI doesn't offer this direct control. Instead, you'd have a state variable that defines button's color. You'd also have a different function that returns a new button based on this new variable. Whenever you change the state variable, SwiftUI will automatically call the latter function and draw the new button.

This eliminates a whole class of bugs that come up as a result of a difference between your view controller's state and what's shown on the UI. By letting SwiftUI reload your views automatically, you know that your view's state is the single source of truth for the view. This lets you focus on working only on the state, without having to think of what will happen in your view.

This idea of separating working on your state and your view is a long-standing idea in the iOS community. It's the idea behind the most popular architectural patterns like MVP (Model and Presenter separated from the View), MVVM (Model and View Model separated from the View), VIPER and others. With SwiftUI, you get this separation out of the box.

This combination of features in a single framework isn't new by a long shot. React, Vue.js and Angular — three of the most JavaScript UI frameworks already have these features. With frameworks like Electron, React Native, Jetpack Compose and Flutter, this approach to UI is already here on mobile, in huge apps like Instagram, Uber or Pinterest. This is well-trodden territory and has proved itself to be one of the most productive ways to program UIs.

Thinking SwiftUI

By now you noticed that SwiftUI works a lot differently than UIKit. Just like you can't write Swift as you wrote Objective-C, you can't write SwiftUI like you wrote UIKit. SwiftUI requires a change of mindset.

When looking at a login screen, an iOS developer will first think of a view controller containing two text views and a button. In SwiftUI, you'll instead think of three different Views. First, you'll need a View for the text view. Next, you'll need another View for the button. Finally, you'll need a View that will assemble two text views and the button.

When working with SwiftUI, you'll stop thinking in terms of properties and methods, and start thinking in terms of state. A text view has a state variable that holds the text. Instead of changing textView.text, you'll update the state. The state change will then trigger a call of the body variable, where you'll return a new text field containing the new text.

By starting simple and slowly building out a whole app, this type of thinking will become second-nature by the end of our SwiftUI course.

How Hard is SwiftUI?

I won't lie to you, SwiftUI is completely different than UIKit. When I first started building an app in SwiftUI I had a little identity crisis. Here I was, an iOS developer who has worked on tens of apps, wrote and edited books about iOS, spoke at iOS meetups — struggling with centering a text field.

Over time, though, I found my way around the different types of views. When I get stuck, I knew what to try and where to find the solutions. I realized that, even though my UIKit knowledge isn't of much use, I still understand Swift, the iOS ecosystem and programming. Thankfully, SwiftUI is nothing but Swift! Armed with these skills (and our course!), I'm sure you'll quickly get the hang of SwiftUI.

That's where we come in. During the following few months, we'll be releasing a SwiftUI course that will teach you how to make a complete, production-level SwiftUI app. Read to the end of this article to find out more about the course!

What about UIKit?

You can think of UIKit now as Objective-C a couple of years ago. Even though SwiftUI is the new hotness, it still stands on the shoulders of UIKit (and Objective-C, for that matter). That means that UIKit isn't going away soon.

Slowly, over time, Apple will probably put more and more focus on SwiftUI, until eventually, SwiftUI will be the framework receiving new features instead of UIKit. Don't worry, though, you still have plenty of time.

Speaking of which, the pragmatists among you might want to hold out a little bit until you convert your app to SwiftUI. Just like the early days of Swift, SwiftUI is young and not fully molded into shape. Some things that exist in UIKit are still just plain missing. As SwiftUI evolves and matures, expect a lot of changes and View rewriting.

That isn't to say you shouldn't learn SwiftUI. If you're an iOS developer, knowing SwiftUI (and knowing it early) can help you stand out among other, more conservative developers. Eventually, everybody doing iOS development will need people who know SwiftUI. Getting in early can be a competitive advantage for you or your company.

Should I Use SwiftUI?

You should learn SwiftUI as soon as possible. But, should you convert or start making your app in SwiftUI? The answer is, as it is often, an unsatisfying “it depends”.

SwiftUI is very young and the small SwiftUI community is only starting to grow. Some things that are available in UIKit don't yet exist in SwiftUI, and there are some kinks Apple still needs to work out. I expect SwiftUI to change a little bit in a year's time, which might not be the best thing to hear if you want to convert your whole app.

If you're starting to make an app now and only want to support iOS 13, I'd strongly consider using SwiftUI as much as possible.

If you already have an existing app, it might be more practical to build new views in SwiftUI (and convert a few existing smaller ones) and use UIKit and SwiftUI in tandem, slowly increasing the ratio of SwiftUI code over UIKit. John Sundell seems to agree with this thinking and has some good practical advice on his blog post about how to mix and match SwiftUI with UIKit.

If you decide to go full SwiftUI, be ready for some changes down the line. If you decide to not use SwiftUI at all, don't be surprised when Apple pulls the UIKit rug out from under you sooner than you expect. I suggest going right down the middle and gradually adopting SwiftUI as you go.

Let's get started!

To help you master SwiftUI, we're working on a full SwiftUI course that we'll release over the coming few months.

This SwiftUI course is designed for the practical developer. You'll learn SwiftUI by building our a real-world production-level chat app. You'll see the benefits and disadvantages of SwiftUI on a scale larger than a simple example app. You'll also learn how large SwiftUI apps can be structured and architected, as well as how to leverage other new frameworks like Combine to help you build your apps.

While other courses and Apple's website offer great short examples, diving in deep is the only way to fully learn a framework, and that's what we'll do in this course.

Here's how this course is structured:

SwiftUI: An Introduction (You are here!)
Build your first Swift UI screen
- What's a View?
- Using Previews
- Managing the State
Working with Lists in Swift UI
- Lists and Navigation
- Building the Chat Screen
Build a chat app interface in SwiftUI for iOS
State management with Combine
- State and Binding
- Environment Objects
- Introduction to Combine
Complete the SwiftUI chat app for iOS
- Using Combine for Networking
- Creating Combine Publishers
- Hooking everything up

If you want to receive the next part of the course as soon as it comes out, follow me here, or check out the posts on CometChat's blog!

DEV Community: CometChat

25 Developer Blogs to Keep You at the Top of Your Game

1. Stack Overflow

2. DEV Community

3. HackerNoon

4. freeCodeCamp

5. Indie Hackers

6. A List Apart

7. GeeksforGeeks

8. HoneyPot

9. Several People Are Coding

10. Coding Horror

11. The Daily WTF

12. Hacker News

13. Product Hunt

14. MIT Free Courses

15. Slashdot

16. CSS-Tricks

17. The Netflix Tech Blog

18. Dream.In.Code

19. Google Developers

20.DZone

21. Women Who Code

22. Smashing Magazine

23. Simple Programmer

24. Reddit

25. CometChat Blog

Build a jQuery Chat App

Introduction

CometChat

jQuery

Prerequisite

Setup CometChat Account and Chat Widget

Create CometChat Pro Account

Set Up a Chat Widget

Create an App

Continue Chat Widget Setup

Build a jQuery Website

Integrate CometChat into the jQuery Website

STEP 1: Initialize CometChat and CometChatWidget

STEP2: Add the CometChat and CometChatWidget CDN to our html files

STEP 3: Add the CometChat Logout Logic

STEP 4: Determine if a logged in user is a new or returning user

STEP 5: Add the CometChat Login Logic

STEP 6: Add the CometChat Create User Logic

Embedded Layout vs Docked Layout

Docked Layout

Embedded Layout

CometChat Widget Customization

Add CSS

Log in with 2 different accounts on different browsers and try the following:

Conclusion

16 Thought-Provoking Resources for Developers

Blog Posts

1. Engineer to Engineer: Don't Be Afraid to Rock the Boat | Women Who Code

2. Do You Need to Localize Your Website? | A List Apart

3. The Purposes and Benefits of Cross-Functional Collaboration | .cult by Honeypot

4. So You Want to Use AI: Do You Build, or Do You Buy? | ReadWrite

5. Sex Doesn't Sell, GitHub Does | Hacker Noon

6. 25 Developer Blogs to Keep You at the Top of Your Game | CometChat Blog

Podcasts

1. Software Engineering Radio - Episode 456: Tomer Shiran on Data Lakes

2. Developer Tea - Changing Work Environments and Availability Bias

3. Software Daily - Makepath: Geospatial Technology with Brendan Collins

4. The Changelog - Curl is a full-time job (and turns 23)

5. Fragmented: The Software Podcast - 208: Developing Software at Startups with Jason Roberts

YouTube Videos

1. The KEY To Thinking Like a Programmer (Fix This Or Keep Struggling)

2. Build a Music Player | Vanilla JavaScript - YouTube

3. I Built a Trading Bot to let Subscribers Trade my $25,000 on Twitch

4. Create a Fantastic BOUNCY Line with SVG & JS!

5. The Most Productive Developers Of All Time

6. How to Create a Chat App with React in 30 Mins

SwiftUI Architecture: Observable Objects, the Environment and Combine

Sharing data with View children and stateless Views

Using Binding for two-way data sharing between a view and its children

Sharing data between unrelated views

Creating Combine's Observable Objects in SwiftUI

Adding Observable Objects to the Environment in SwiftUI

When to use which approach

STEP2: Add the CometChat and CometChatWidget CDN to our `html` files

Using `Binding` for two-way data sharing between a view and its children

Styling SwiftUI views with `View` methods