Apps are hungry for your data. Hackers are always looking for cracks in your security. And sometimes, we accidentally give away more than we realize.

The good news is you don’t need to be an expert to tighten things up.

Here are seven simple changes that can seriously improve your phone’s privacy. Each one takes just a few minutes, and together, they make your phone much harder to track, hack, or snoop on.

Control What Tracks Your Location

Let’s start with location tracking.

Most people don’t realize how many apps can access their exact whereabouts. Even seemingly harmless apps like weather or games may collect this info in the background.

Some use it to target ads, others sell it to data brokers, and a few could open doors to more serious threats, like someone building a full profile of your movements.

To reduce the risk, go into your phone’s settings and check which apps can access your location. Both iPhone and Android let you limit access to “While Using” the app, instead of “Always.” This way, apps can’t track you silently in the background.

Also, turn off “Precise Location” for apps that don’t need it. Your phone will still know your city, but it won’t pinpoint your exact house. This one tweak keeps dozens of apps from silently tracking your every move.

Make Your Passcode Stronger

Next up is your passcode. It’s your phone’s first line of defense, but far too many people still use weak ones  –  like birthdays, 123456, or just swiping a simple pattern.

If someone grabs your phone, a weak passcode makes it much easier for them to get in, especially if they’ve watched you unlock it a few times.

Switch to at least a six-digit PIN or, even better, an alphanumeric passcode with letters and numbers. Yes, it takes a second longer to type, but it’s far harder to guess.

And if your phone supports it, use your fingerprint for unlocking instead of facial recognition. Face unlock can sometimes be fooled by photos or similar faces, while fingerprints are generally more secure.

You should also consider enabling a setting that erases your data after multiple failed login attempts. This way, if your phone falls into the wrong hands, it won’t just be sitting there, waiting to be cracked.

Cut Back Unnecessary App Permissions

Many apps ask for permissions they don’t really need.

A flashlight app that wants access to your contacts? A calendar app asking for microphone access? These are red flags.

The more permissions you grant, the more ways your data can leak  –  sometimes to advertisers, other times to third parties you’ve never heard of.

Go through your app permissions and turn off access that doesn’t make sense. Does that casual game really need your location? Does a recipe app need to see your photos? Probably not. This isn’t just about avoiding creepy behavior  –  it’s about reducing the number of ways bad actors can exploit your phone if something goes wrong.

Some malicious apps have been caught using these permissions to record audio, access files, or even track your activity across other apps. A regular permissions check-up can help stop that from happening.

Switch to eSIM for Better Security

One of the most overlooked privacy upgrades is switching to an eSIM card. That’s a digital SIM card built into your phone, and it offers real advantages over traditional physical SIM cards. The biggest one is security.

Physical SIM cards can be switched out easily if someone steals your phone. There’s also the risk of SIM swapping  –  where attackers convince your carrier to transfer your number to a different SIM, giving them control of your calls, texts, and even two-factor authentication codes.

With an eSIM, there’s no physical card to remove, and activating or transferring it requires extra authentication through your carrier.

If your phone supports eSIM – and most modern iPhones, Pixels, and Galaxy devices do –  you can switch by contacting your mobile carrier or using their app.

Once your eSIM is set up, consider removing the physical SIM entirely. It’s one less way someone can try to hijack your phone number.

Don’t Leave Bluetooth and Wi‑Fi Open

You might not think twice about leaving Bluetooth or Wi-Fi turned on, but doing so can leave your phone exposed.

Even when you’re not actively connected, your phone continues to look for known networks or nearby devices. This “sniffing” can give away your location, expose your device to tracking, or even let attackers try to exploit unpatched vulnerabilities.

For instance, there have been real-world attacks like BlueBorne, which let hackers take over phones just by being nearby with Bluetooth turned on.

Another risk is “Wi-Fi spoofing” –  when someone sets up a fake public network to trick your phone into connecting, giving them access to your traffic.

To protect yourself, get into the habit of turning off Wi-Fi and Bluetooth when you’re not using them. You’ll save battery, too.

If you’re connecting to public networks, avoid auto-connect settings and tell your phone to “forget” the network afterward. This keeps it from reconnecting without your knowledge later.

Use Encrypted Messaging Apps

Plain old text messages are easy to intercept. Phone carriers can access them, and if someone manages to snoop on your network, they can read your texts without much effort. That’s why encrypted messaging apps matter.

Signal is one of the best options out there. It uses end-to-end encryption, which means only you and the person you’re chatting with can read your messages. Not even the app company can see them. It’s also open-source, which means experts can inspect the code for flaws.

WhatsApp also uses strong encryption, but it’s owned by Meta (formerly Facebook), which has a spottier track record when it comes to data privacy.

If you’re serious about protecting private conversations  –  especially with family, coworkers, or anyone handling sensitive info  – make the switch to an encrypted app.

Keep Your Software Updated

The last one is simple, but often ignored: keep your phone and apps updated. Every update includes security patches that fix known issues.

Hackers and malware often target devices running old software because those bugs are public knowledge by the time they strike. If your phone isn’t set to update automatically, change that now.

Also check your app updates regularly. Some apps introduce new permissions or bugs, so keeping everything current helps close those holes before they can be used against you.

Phones with outdated operating systems are more vulnerable to spyware, data theft, and unauthorized access. So even if you’re not excited about the new features, updates are your silent protectors behind the scenes.

Conclusion

None of these steps will make you invisible –  but they will make your phone a lot harder to compromise. That’s the goal. Privacy isn’t about locking everything down forever. It’s about knowing what you’re sharing, and taking steps to control it.

Hope you enjoyed this article. You can learn more about me or connect with me on Linkedidn.

The mobile development team just pushed a big update with many helpful improvements, including the much-awaited /learn user experience.

You can now code your way through the Responsive Web Design curriculum and save your progress – right on your phone. You can seamlessly shift your freeCodeCamp learning from your desktop to your phone at any time.

And we're working on implementing even more certifications, including our JavaScript Algorithms and Data Structures certification.

The /learn experience features a built-in code editor specifically designed for easy coding on the go. You can also use it to build your certification projects.

Here's a sneak peek into the /learn experience on a mobile device:

A view of the instructions pane telling the user how to complete the challenge

It's also possible to preview your challenges and projects. This shows a preview of the Camper Café project:

Of course, there are so many more tutorials and features to explore in the mobile app. But we'll leave those for you to discover. 😉

We've also made some improvements to /news, Code Radio, and our Podcast listener – which are also available in the app.

How can I download the app?

You can visit the Play Store page and download the official freeCodeCamp app.

If you are not able to access the Google Play Store in your country, you can download the latest version of the .apk file directly from GitHub.

Many of the reviews of the app are of the old 2021 version, which was just a simple web app version that had lots of bugs.

This new version is the result of thousands of hours of development by the freeCodeCamp engineering team. We are very proud of this powerful Flutter-based Android app.

So after you use it for a while, if you like it and find it to be helpful, be sure to leave a 5-star review. 😉

How can I help the freeCodeCamp community beta test upcoming features?

Here's how to sign up for the open beta on Android. (We're working on getting the iOS version live soon, too.)

First, visit the Google Play Store page.

At the bottom of the page, there should be a message saying "Join the beta." Just click join, and the app page should show you an update button shortly afterward.

That's it – you are now officially in the beta program. 🧑‍💻

You may see this message in the Google Play Store.

Do note that your progress will not yet be saved on freeCodeCamp's servers. It will only be stored locally on your device. This means that any progress you make will not count towards completing any projects on the freeCodeCamp website. But we're working hard to add this functionality ASAP.

Thank you to all the open source contributors who have helped develop the freeCodeCamp mobile app so far. We are just getting started.

If you are interested in contributing to the mobile app, you can learn a lot about Flutter development and User Experience while helping the community. I encourage you to start your contribution journey with this guide.

Happy coding. 🙂

What if you could monitor your Colab, Kaggle, or AzureML Machine Learning projects on your mobile phone? You'd be able to check in on your models on the fly – even while taking a walk🚶.

If you are an ML developer, you know how training models can easily take a long time. How cool would it be to monitor this from your mobile phones?

Well, you can do it – and in <5 lines of code.

Why Monitoring Your Models Remotely Helps

Before getting on with the tutorial and showing you how it works, let me briefly describe what you can do with TF Watcher, an open-source project we will use to monitor our ML jobs:

• Integrates seamlessly with your ML workflow, so you don't need to change any other code in your workflow to make it work
• All your visualizations and dashboards are real-time
• You probably want to share your live dashboard or a previously run dashboard with your colleagues, and this also allows you to create shareable links
• It's a PWA which lets you monitor your models offline in a limited capacity
• You also get precise control over when you want to log the metrics

How to Monitor Your ML Projects on Your Phone

Let's now go through the tutorial of how to monitor your models on a mobile device with Google Colab. I'll show you how to use tool this in Google Colab, so anyone can try it out, but you can pretty much replicate this anywhere (even on your local machine).

Feel free to follow along with this colab notebook.

Install the tf-watcher Python Package

To monitor your Machine Learning jobs on mobile devices, you need to install the tf-watcher Python package. This is an open-source Python package that I built, and you can find the source code in this GitHub repo.

To install the Python package from PyPI, run the following command in your notebook cell:

 !pip install tf-watcher

How to Create a Simple Model

For the purposes of this example, we will see how you can monitor a training job – but you can use this package to monitor your evaluation or prediction jobs too. You will soon also see how you can easily specify the metrics you want to monitor.

In this example, we’ll use the Fashion MNIST, a simple dataset of 60,000 grayscale images of 10 fashion categories. We start by loading the dataset and then we'll do some simple preprocessing to further speed up our example.

However, you can use everything we talk about in this article in your more complex experiments.

Let's fetch the dataset:

import tensorflow as tf

# Load example MNIST data and pre-process it
(x_train, y_train), (x_test, y_test) = tf.keras.datasets.mnist.load_data()

x_train = x_train.reshape(-1, 784).astype("float32") / 255.0
x_test = x_test.reshape(-1, 784).astype("float32") / 255.0

# Limit the data to 1000 samples to make it faster
x_train = x_train[:1000]
y_train = y_train[:1000]
x_test = x_test[:1000]
y_test = y_test[:1000]

Now we'll create a simple neural network that just has a single Dense layer. I'll be showing you how to use this with the TensorFlow's Sequential API, but this works in the exact same way while using the Functional API or subclassed models, too.

# Define the Keras model
def get_model():
    model = keras.Sequential()
    model.add(keras.layers.Dense(1, input_dim=784))
    model.compile(
        optimizer=keras.optimizers.RMSprop(learning_rate=0.1),
        loss="mean_squared_error",
        metrics=["accuracy"],
    )
    return model

You might have noticed that while compiling our model, we also specified metrics which lets us specify which metrics we need to monitor.

Here I mention "accuracy" so I should be able to monitor accuracy on my mobile device. By default, we logged "loss" so in this case, we would be monitoring 2 metrics: loss and accuracy.

You can add as many metrics as you need. You can also use TensorFlow's built-in metrics or add your own custom metric, too.

How to Create an Instance of a Callback Class

You will now import TF Watcher and create an instance of one of its classes:

import tfwatcher

MonitorCallback = tfwatcher.callbacks.EpochEnd(schedule = 1)

In this example:

• We use the EpochEnd class from TF Watcher to specify that we are interested in operating in the epoch level. There are quite a few of these classes which you can use for your own needs – find out all about the other classes in the documentation.
• We pass in schedule as 1 to monitor after every 1 epoch. You could pass in 3 instead (to monitor after every 3 epochs) or you could also pass in a list of the specific epoch numbers you want to monitor.

When you run this piece of code, you should see something like this printed out:

Unique ID for your session

This includes a unique 7 character ID for your session. Be sure to make a note of this ID as you will use it to monitor your model.

How to Start Monitoring Your Model 🚀

Now we will train the model we built and monitor the real-time metrics for training on a mobile device.

model = get_model()

history = model.fit(
    x_train,
    y_train,
    batch_size=128,
    epochs=100,
    validation_split=0.5,
    callbacks = [MonitorCallback]
)

In this piece of code, we start training our model for 100 epochs (should be pretty quick in this case). We also add the object we made in the earlier step as a callback.

If in your case you are monitoring the prediction instead of training, you would add callbacks = [MonitorCallback] in the predict method.

Once you run the above piece of code, you can start monitoring it from the web app from your mobile device.

Go to https://www.tfwatcher.tech/ and enter the unique ID you created above. This is a PWA which means you can also install this on your mobile devices and use it as a native android app, too.

Install the web app

Once you add your session ID you should be able to see your logs progressing in real-time through the charts. Apart from the metrics, you should also be able to see the time it took for each epoch. In other cases this might be time taken for a batch, too.

The monitoring dashboard

How to Share Dashboards

Since ML is highly collaborative, you might want to share your live dashboards with colleagues. To do so, just click the share link button and the app creates a shareable link for anyone to view your live progress or stored dashboards.

Here is the shareable link for the dashboard I created in this tutorial.

What Else Can You Do with TF Watcher?

Though the example I just showed looked quite cool, there is a lot more we can do with this tool. Now I will briefly talk about two of those scenarios: Distributed Training and non-eager execution.

Distributed Training

You might often distribute your Machine Learning training across multiple GPUs, multiple machines, or TPUs. You're probably doing this with the [tf.distribute.Strategy](https://www.tensorflow.org/api_docs/python/tf/distribute/Strategy) TensorFlow API.

You can use it in the exact same way with most distribution strategies with limited use while using ParameterServer in a custom training loop.

Distributed training

You can find some great examples of how to use these strategies with TensorFlow Keras here.

Non-eager execution

In TensorFlow 2, eager execution is turned on by default. But you will often want to use tf.function to make graphs out of your programs. It's a transformation tool that creates Python-independent dataflow graphs out of your Python code.

One of the earliest versions of this project used some Numpy calls but guess what, you can now use the code in the same way in non-eager mode too.

Thank you for reading!

Thank you for sticking with me until the end. You can now monitor your Machine Learning projects from anywhere on your mobile device and take them to the next level. I hope you are as excited to start using this as I was.

If you learned something new or enjoyed reading this article, please share it so that others can see it. Until then, see you in the next post!

You can also find me on Twitter @rishit_dagli.

While it may seem like this is a straightforward affair, you’ll soon realize it takes a bit of work to get this functionality working.

First and foremost, it is important to realize that (at the time of writing this article) Flutter does not have built in support for embedded WebViews.

Unlike a native application in either Kotlin or Swift where you can just instantiate a WebView component, you cannot add a WebView component to your Flutter application out of the box.

In this article, we'll go over how to configure WebView in Flutter applications, and how to communicate between Flutter and Webview.

How to configure WebView in a Flutter application

After creating a new Flutter project, we need to use the webview_flutter package to be able to use a WebView. We will add the dependency to our pubspec.yaml file:

dependencies:  
       flutter:    
           sdk: flutter
       webview_flutter: ^1.0.7

Then, we need to run pub get in the terminal:

flutter pub get

Next, we import the package in our main.dart file:

import 'package:webview_flutter/webview_flutter.dart';

If you haven’t cleaned up the code from the starter project yet, now is a good time to do so.

After you remove all the comments, the floating action button and everything related to it, you will be left with this (I added a text widget just for show):

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Communication Bridge',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Native - JS Communication Bridge'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  WebViewController _controller;

  @override
  Widget build(BuildContext context) {
    return Text(
      "Flutter JS-Native Communication Bridge"
    );
  }
}

Which will give you this result:

Creating a local HTML asset

Since we will be using a local HTML file with embedded JavaScript code inside of it, we need to create it in our project.

All local assets in a Flutter application need to be in an assets directory.

Create an assets directory in your main project hierarchy by right clicking in the left side panel and choosing New → Directory:

The file hierarchy after creating the asses directory

Then, go on ahead and create index.html inside the assets directory and add the following code:

<html>

    <head>
        <title>My Local HTML File</title>
    </head>

    <body>
        <h1 id="title">Hello World!</h1>
        <script type="text/javascript">
            function fromFlutter(newTitle) {
                document.getElementById("title").innerHTML = newTitle;
                sendBack();
             }

             function sendBack() {
                messageHandler.postMessage("Hello from JS");
             }
        </script>
    </body>
</html>

You will notice that we have written two methods in the JavaScript section of our html:

1. fromFlutter is the method we will call from Flutter with a string representing the new title for the page
2. sendBack is the method we will call to communicate back to Flutter. In it we are sending a string message.

We will get into the contents of sendBack in a minute, but before that, we have to set up our WebView in our application.

✋ Don’t forget to add index.html to your pubspec.yaml under an assets section (use the correct indentation):

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^1.0.7
  cupertino_icons: ^1.0.0

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  uses-material-design: true

  assets:
    - assets/index.html

Set up the WebView

Since we already imported the package into our main.dart file, we need to replace the Text widget with a WebView widget:

class _MyHomePageState extends State<MyHomePage> {

  WebViewController _controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Webview')),
      body: WebView(
        initialUrl: 'about:blank',
        onWebViewCreated: (WebViewController webviewController) {
          _controller = webviewController;
          _loadHtmlFromAssets();
        },
      ),
    );
  }

  _loadHtmlFromAssets() async {
    String file = await rootBundle.loadString('assets/index.html');
    _controller.loadUrl(Uri.dataFromString(
        file,
        mimeType: 'text/html',
        encoding: Encoding.getByName('utf-8')).toString());
  }

}

We wrapped our WebView with a Scaffold widget (we'll go over this more later in the article), but let’s focus on the different fields of the WebView widget seen above:

• initialUrl is where we can define which URL the WebView points to. Here we decided to point it to nothing since we are going to load our local HTML file
• onWebViewCreated is a callback we get from the package once the WebView is created. Since we want to save the controller instance that we get from this callback, we have created a private member to store it to, _controller

You will also notice that we created a method called _loadHtmlFromAssets, which as is implied by its name, will load our local HTML file into the WebView.

Inside this method, we use our private WebViewController instance, _controller, and it’s exposed method loadUrl to load our local HTML file. Due to the logic in this method, its execution is asynchronous.

If we run our application, we will get the following:

How to communicate from Flutter to WebView

Now let’s add some functionality to call the fromFlutter method we defined in our local HTML file.

To do that, we will be adding a Floating Action Button (or FAB) to our layout and connecting its onPressed method to call the fromFlutter method.

This is also the reason behind the usage of the Scaffold widget – so we can easily add a FAB:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Webview')),
      body: WebView(
        initialUrl: 'about:blank',
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController webviewController) {
          _controller = webviewController;
          _loadHtmlFromAssets();
        },
      ),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.arrow_upward),
        onPressed: () {
          _controller.evaluateJavascript('fromFlutter("From Flutter")');
        },
      ),
    );
  }

In order to make calls from Flutter to our loaded HTML we are using the evaluateJavascript method. To be able to use it, we must add another property to our WebView called javascriptMode.

In the code above, we are setting it to unrestricted. If we don’t set it, we will not be able to communicate between Flutter and the WebView:

How to communicate back from WebView to Flutter

Remember how I said we will talk about the contents of our sendBack method? Let's do that now:

function sendBack() {
  messageHandler.postMessage("Hello from JS");
}

In the sendBack method, we are using an object called messageHandler, and it’s attached method called postMessage.

Just like creating a communication bridge in a native application, once you set one up, you are adding an object to the global Window object in the JavaScript layer to be used for communication.

You can name this object to whatever you like as long as you reference it when you make calls from JavaScript to your native application.

How is this object added to the JavaScript layer in our application, you might ask? By adding the JavascriptChannels attribute to our WebView widget:

class _MyHomePageState extends State<MyHomePage> {

  WebViewController _controller;
  final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(title: Text('Webview')),
      body: WebView(
        initialUrl: 'about:blank',
        javascriptMode: JavascriptMode.unrestricted,
        javascriptChannels: Set.from([
          JavascriptChannel(
              name: 'messageHandler',
              onMessageReceived: (JavascriptMessage message) {
               _scaffoldKey.currentState.showSnackBar(
                  SnackBar(
                      content: Text(message)
                  )
                 );
              })
        ]),
        onWebViewCreated: (WebViewController webviewController) {
          _controller = webviewController;
          _loadHtmlFromAssets();
        },
      ),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.arrow_upward),
        onPressed: () {
          _controller.evaluateJavascript('fromFlutter("From Flutter")');
        },
      ),
    );

  }

We have defined a JavascriptChannel with a name and an onMessageReceived handler. The name we have given this channel, messageHandler, is the name we are using to communicate from the local HTML file we loaded to our native layer.

Great success

For the keen eyed, you probably noticed that a new private variable has been added, _scaffoldKey. This is because we needed to add a key to our Scaffold widget so we can display the snackbar.

You can get the source code for the application described in this article below:

Two final points to be aware of:

1. The alert method is broken in the webview_flutter package
2. To use the package in iOS, you must add the following key to your info.plist file: <key>io.flutter.embedded_views_preview</key><string>yes</string>

Here are some other sources you may find helpful if you want to learn more about Flutter and WebViews:

• The Power of WebViews In Flutter
• WebView_Flutter Package

The amount of time people spend on their mobile phones has increased over the years, and so has the number of people using mobile devices.

It’s safe to say that mobile has almost completely taken over the desktop. With the number of users crossing over to mobile, it has become essential to create apps that can provide a seamless and engaging mobile experience.

For a business, there are plenty of ways in which an app can be helpful. Some of these include:

• Improving sales and revenue generation.
• Building a community and increasing engagement by providing the audience with resources.
• Improving employee communication with internal business apps.
• Improving mobile marketing strategy and increasing brand awareness.

Even though there are many positives to it, creating an app can be tedious and intimidating. It can also be costly, risky, and can take a lot of time.

But if you create the app well enough, it will be worth everything in the end. To create a smart mobile app that beats the competition, here are some tips.

Define the app objectives

The first step before you even start creating a mobile app is defining your reasons and clearly stating the app’s objectives.

If you don’t have clarity about small details like this, it will affect your planning and app building. In the end, you are not likely to get what you want.

There are two things that you must try to satisfy with your app. First, the ideal goal of users, and second, the purpose of your business.

To determine these, you have to ask yourself specific questions:

• Which parts of your business do you need to improve?
• How can an app help solve the problem?
• What are the possible results that you might get?

Some other areas of your business that you also have to consider are your budget, timeline, market research, and so on.

State the functions and features of the app

After stating the purpose and objectives of your app clearly, your next step would be to define the scope of your mobile app. At this point, you start to determine what the app will look like and the features that it will have.

You need to be creative and make a list of necessary functionality and features to achieve your desired results.

Some features that you may include in your app are:

• eCommerce integrations
• Social sharing
• Chat
• Push notifications
• Forms
• Contact form

Write down all the valuable features and let this guide you through your app development process.

Research app competition

Although you already are sure of what you are building and what you need in your app, you might want to look at some of your most successful competitors. Consider what they are doing with their apps and how it is helping them reach similar goals.

Be sure not to look at just your local competition. Research some of the bigger companies in the same industry that reach out to a similar audience in your country or other parts of the world. With this, you can get inspired and get new ideas you can use in the market.

Some of the things that you have to consider are app layout, features, and functionalities. Look out for other things that stand out or things that you might be missing.

Plan the UX and user journey of the mobile app

UX of an App

The success of mobile apps depends a lot on the User Experience of the app. You have to make sure that your app’s functions align with the users’ desires and expectations. You must plan your User Experience in advance.

If you don’t plan the app’s user experience, you will not have an idea of how complex the app is. You also will not realize how much time you need to invest in developing the app. In the end, you won’t have something tangible to present during user testing.

Make sure that the users have a low UX resistance with the app. The primary goal here is to ensure that they find the solution in the most efficient and intuitive way possible.

If you don’t take the time to plan the UX before you start to build correctly, your users will likely experience difficulty with their use of the app. Then you would need to spend more resources and time to fix things.

The significant difference between a successful app and an unsuccessful one is the user experience. Poor user experience can stem from making some avoidable mistakes when building the app. Some of the mistakes to avoid for good user experience are:

Not understanding the needs of the user

The very foundation for building a good app is understanding what users need. Having an understanding of your audience is crucial. You have to consider the users’ pain points, how your app is better than your competition, and the interface.

Adding too many features

If it's your first time developing a mobile app, you might be tempted to add a lot of features you think are cool.

But this actually relates to a poor user experience most of the time. These features can overwhelm users and make them ditch your app.

Creating poor and confusing navigation

No matter how good the onboarding experience is, if users cannot find what they want easily, then your app is less useful.

Your app should have clear navigation that makes it easy for even first time users to do what they want. There are different types of navigation, so you have to choose what you think is the most intuitive for your app.

Other mistakes that you can make that lead to poor user experience are:

• Neglecting the experience of first-time users.
• Overcrowding the user interface
• Using jargon and terminology that users don’t understand.

Launch the app

The last step to creating a mobile app is to launch the app. Following the launch, you should be open to user feedback and improve the app with regular updates based on user experience.

Conclusion

It takes a lot of time, effort, and resources to create a mobile app. So if you want to create one that outsmarts the competition, you have to do more. It takes a lot of effort, and we’ve highlighted some of the key things you should do in this article.

Whatever it takes, make sure to put the user experience first. Focus on satisfying them and solving their problems with the app, and you are already halfway there.

In this post, I'll share my entire journey about how I became a professional mobile developer.

I hope that reading about my experience will help you reflect on your present and your future, and will either help you start your career as a developer or motivate you to move forward in achieving your goals.

My university degree and how it all started

I finished high school with a mathematics-informatics degree in a small town in Romania.

Like most of my friends, you had two choices in terms of cities to go to for university. I chose Bucharest, the capital of Romania.

I grew up thinking that university is a mandatory thing. That probably happens in most countries.

All our parents want it for us.

I never felt a desire to choose a specific degree. Sound familiar? Never saw myself working as something after I graduated.

In the end, I chose to go to an economics university in Bucharest. Again there were two options. One was considered a good university, and another where you would pay a lot of money just to get a degree.

I took some exams at the first one, without studying, to be honest. And obviously I did not pass.

I had to go with the second option.

Fast forward and I graduated from my economics university. But I graduated two years late. I never had a passion for economics and never saw myself working as a banker. I always thought I wanted to get the diploma, and that's it.

I never considered how much I paid for that useless degree, but I needed a diploma to be accepted by society, right?

I was a failure, with an economics degree, but no experience or knowledge. In the following years, with the help of my family, I managed to create two businesses that failed, too.

I will not discuss those in the story, but let's just say that I learned a lot. I also played online poker, and I was pretty good at it.

Seven years after graduating from high school I found myself with no job experience, no successful business, and no money.

I knew I had to take action, and I knew that all my dreams about having a successful business would not happen soon unless I had a backup plan.

That's when I thought:

What job can I get that will make me happy, pay me well, and allow me to have a good life at 30 - 40 years old, even if I never manage to create my own business?

The only answer that came to mind was programming. I had some prior experience in high school and built a few websites.

There was only one problem – I did not like mathematics in high school, and I always thought that I would not be able to learn professional programming without an excellent understanding of it.

I was wrong.

There are probably a lot of people like me, people who have the same thoughts and doubts. But all you have to do is take action and start learning.

Learning Android and Java

It was 2014 when I first started looking into the idea to learn to code.

First thing I did was to Google for some courses in Bucharest, and I found a company that invited me to their offices. I went there, and I remember they had a lovely furnished office with a lot of iMACs. I told myself, "That's what I need."

Ten minutes later I found that they were doing all their courses online and that it was more like an office to sell the course rather than do the course.

I don't remember the exact price, but it was around 1500 - 2000 USD. I didn't take it.

I let go of the idea for a few months, then 2015 came. New year, new plans, new life, you know?

I started to look into an in person course again, and found out that they were called bootcamps.

Discovered one in Bucharest and they were doing Java, and it only cost around 800 USD for four months. It would be a few hours a day with a teacher and other students.

Looking back, I think they were cheap for what they offered, but I think we were the second batch they had.

They were telling us all kinds of things about being hired after the bootcamp, but I did not care.

I wanted to learn to code, and I thought that I would manage to find a job quickly after just a few months. I was right, but it was not as easy as I thought.

The classes started. They always told us that it is not enough to do only lessons during our hours together.

I tried to listen. But at home, things never made sense. Programming was hard, and I often thought that I would not be able to finish the bootcamp.

I pushed myself harder and harder. It was one month into the courses when I found that we were going to learn Java with Android, but again, I did not care. I was falling in love with Eclipse and things happened on the screen as we coded.

Eclipse is an Integrated Development Environment that was originally used to develop for Android. Now we use Android Studio.

It was hard. Lesson after lesson I was trying to learn variables, classes, inheritance, encapsulation, for loops, and so on.

But I struggled. I didn't have a clear picture of how I could use all these in a bigger app. It did not make sense a lot of times.

If you just started programming and you feel the same, I want you to know that it's normal.

Our mentors always told us: "You do not have to know all these off top of your head. Just try to understand what they are and how you can use them."

They were right, but I found that out later. At that specific moment in time, it did not help.

One thing which I regret is that I did not do projects from the beginning. I always thought that I needed a teacher and that you cannot learn anything online on your own. I was lazy and again, wrong.

After four months, I managed to make my first "non-working" app. It was an app where students could rent rooms from other students or people.

I said "non-working" because it did not have any backend or any users. It was more like a demo app that was using some SQLite for storing data.

I was proud of it, because a few months before, I never imagined I could do it.

The bootcamp finished, and I don't think I ever spoke with anyone from their management again.

Not sure if they tried to get me a job, or maybe they thought I was not good enough for a career as a developer.

First interviews and first job as a Junior Android Developer

I started interviewing, and I remember that my first one was for a Java role at a big international company located in Bucharest. (Hint: they have over 300,000 employees, and their revenue from 2019 was about 77 billion.)

I did not take the interview, but I think that the conversation was a good one. I probably wasn't hired because I didn't have any experience.

After that, it took me another month to get the next interview.

A friend I made in the bootcamp helped by recommending me. If he reads this post, I want to thank him.

The role was actually as an Android developer for a Romanian outsourcing company that had a contract with a telecom company.

I had two interviews with them, mostly technical questions, and I still remember when they called to offer the role.

The salary was small, but it did not matter.

I think I started the bootcamp at the end of May 2015, and I began my first role as Junior Android Developer in January 2016.

It was quite an achievement.

My manager assigned me a project, and then I started learning about version control and how to work Agile, and how to work in 2 weeks sprints.

If you've started learning programming or you want to start, I recommend three things.

• Start today (Optional if you already started)
• Do as many projects as possible
• Learn version control (Git, Bitbucket, or Gitlab) and push all your projects there.

Maybe I will write another article about all these things.

During my time at that company, I met a lot of friendly and helpful people. I was probably annoying to a lot of them because, at the beginning, I was asking for a lot of help.

New country and more Android jobs

9 Months later I decided that I wanted to move to London because I was getting a lot of messages from recruiters. Also I thought that it would be easier to further my career there, then return to Bucharest.

I was lucky that my sister lived there, and she was kind enough to let me live with her.

Even when I had recruiters promising me interviews and stuff like that, when I got there I had zero meetings.

I knew that it would not be easy, and I applied to a lot of jobs online.

After two weeks, I got an interview at a British Telecom services company. They had a small IT department, and their Android developer was leaving. They had internal Android CRMs apps, used by their employees, and they needed someone for maintenance and to develop new apps.

It was a one year contract, and the pay wasn't great (I found that out later), but again, I was happy.

I learned a ton in that year (on my own).

I learned Android specific technologies like:

• What's an architecture like Model-View-Presenter and how to use it in an app
• How to do proper Unit Testing
• The SOLID principles

And so on.

I learned all that at work and in my free time. I was working, and in my spare time, I was building apps for myself.

To this day, all my apps (5 on Android) have more than 100k downloads, mostly organic, but only one of them made more than 2,000 USD.

I worked for the telecom company for precisely one year. I wanted to try something different thing in London and work with more Android developers.

It took me some time to understand that, as a software developer, you always have to do more than what you do at work. It's the same with doctors or lawyers. They regularly need to improve their knowledge to be better than others.

I felt ready to work on a more significant project, but I don't think I was skilled enough.

It did not discourage me, and I took an Android role at a global outsourcing company.

I was going to work for a big British bank in London.

I was scared initially, but it took me one month to feel like I was part of that project.

I did three interviews before I entered the project.

During my career, all the interviews I did had two or three steps.

The first one is usually with HR where they ask you things about your experience.

The second interview could be with technical questions, take-home assignments or technical questions with some algorithms.

The third interview might be with a tech lead or with a manager or again with someone from HR.

I started working at the bank in a proper Scrum team. We were 4 Android devs, 4 iOS devs, a Project Manager, a Product Owner, 2-3 Quality Assurance Engineers, a Business Analyst, Copywriter, Designers.

All these people were developing a crucial part of the app. The project was massive.

Just in the development team there were more than 30 Android and more than 30 iOS developers.

I stayed at that role for one year, like with my previous job. The reason? I wanted to go back to Romania.

I was lucky enough to have only good colleagues around me.

It's never wrong to ask for help if you want to learn. We've all started from the beginning, with zero knowledge. I feel that it's terrible not to want to learn when you don't know.

The year at the bank taught me a lot, and it felt like a few years. I learned:

• How to do code reviews
• How to work on a project that required 100% code coverage for Unit Testing
• How to deliver features on time
• What is clean architecture and how to write code that's easy to read without leaving a ton of comments

And many more that I probably don't remember.

Going back home with more knowledge

It was November 2018 when I went back to Bucharest, after two years and a bit of living in London.

It was an excellent experience, but it did not feel like home.

I got a new job for another outsourcing Romanian company quite fast (2 weeks) after I came back.

It took me only four months to leave again for a new six months project in London.

I was not happy to leave my girlfriend alone, but the money was good for only six months of work.

I'm not allowed to disclose any information about the project because I signed a non-disclosure agreement, and today I'm still working for them. But I'm located in Bucharest right now. I've been working for the current company for more than a year and a half.

What did I learn on this project?

• How to create a team
• How to start a big app from scratch. I will probably be very proud once we launch and people will use it.
• How to adapt requirements with a lot of unknowns.
• How to deliver by working with people all over the world.

It's been a crazy journey.

Conclusion and what I learned

My post is at over 2000 words, and I feel I did not give you a lot of details about what I learned. I only scratched the surface.

It was not easy, but I don't regret choosing this career.

If you are me from 5 years ago, just start.

You will feel like quitting. You will think that you are not smart enough, you will feel like any developer that takes a few hours/days to solve something without any luck and then has a moment of brilliance.

It's not wrong not to know, and no question is stupid. It's terrible if you don't want to learn.

Today, more developers than ever are willing to help. You can easily find Discord groups where people are happy to answer your programming questions. There are a lot of Reddit communities that will be helpful. Maybe even Slack channels can work for you. Finding a mentor can be a solution too.

Websites and YouTube channels like freeCodeCamp are all you need to get started.

Here are all the things I hope you learned in this post:

• Starting is hard, but every day of learning something new will give you enormous satisfaction.
• You need to do all kinds of projects. Knowing the basics is good, but building things and working with version control will help you prepare for a future job.
• People are willing to help (both online and future colleagues)
• There will be days when nothing will work. You will not find a solution easily. Either relax and come back to the problem later or just ask for help.
• All developers (junior, mid or senior) search for solutions on Google and get stuck frequently.
• You will feel impostor syndrome, but trust me when I say that I met developers with CS degrees who are worse than me.
• Being a developer it’s not only about coding. Soft skills are important too.

If you liked this article and want more of this, please follow me on Twitter. I write about my journey as a mobile developer, my failed/successful start-ups, about app marketing, and all kinds of other things I learned in the past 10 years.

If you're developing any type of IoT product, inevitably you'll need some type of mobile app. While there are easy ways, they're not for production use.

In this tutorial, we'll talk about the basics of Particle app development. You'll learn about some of the many app frameworks you can take advantage of. Plus there's libraries, tricks, and tools along the way to make your life a lot easier.

App Frameworks

Sometimes it's dang near irritating to program multiple applications natively. You see, Swift (or Objective C ?) and Java aren't terrible at first glance (well, maybe except for Obj-C ?). But when you're resource constrained, you have to figure out a new game plan. That's where App Frameworks come in.

These frameworks allow an app developer to write, build and test cross platform apps. In some cases, the frameworks convert your app into native code. That means that they run as fast and as well as one written in Swift or Java.

I did the research and as of January 2020, here are some of the most supported frameworks:

• Framework7
• Flutter
• NativeScript
• ReactNative
• Ionic
• Cordova / PhoneGap
• Meteor
• Xamarin

The list goes on for days.

I've used a few of these frameworks in the past. I've built a Meteor app which (surprisingly) worked. In the end I had to pick one though. What did I go with?

NativeScript.

For the most part, NativeScript's documentation and on-boarding experience is fantastic. Not only can you preview your app inside an emulator but you can load it directly to your phone too!

One of the cool things about NativeScript is that it supports TypeScript. TypeScript is a superset of JavaScript with some extra wiz-bang features.

Unlike other languages, JavaScript technically has no types. If you've done any Particle development you likely know what a type is. We're talking about int, String, float and more. i.e. they're directives to to make sure your JavaScript code stays consistent.

NativeScript is also compatible with most major JavaScript web frameworks. This includes Vue.Js and Angular.

I've only noticed one major drawback thus far: the mobile preview mode (tns preview command) does not pay well with native libraries. If you have some native platform specific libraries, you'll have to use the emulator or a device (if you have one).

If you're gung-ho and you want to build multiple apps in their respective languages, the more power to you. There is an advantage over the above frameworks: tried and true Particle SDKs.

Available Libraries & SDKs

Particle has gone out of their way to make app development a little easier. This is thanks to the massive development work that has gone into their own SDKs. Yup, gone are the days you have to write manual HTTP request handlers.

Here's a link to both the iOS and Android SDKs:

• iOS
• Android

Though we won't be covering them here, they reflect all the potential calls that you can make using the Cloud API.

Speaking of Cloud API, Particle has also developed a Node.js library as well. As you can imagine, you can use this for your server side code or JavaScript based app frameworks. Sadly, it doesn't work with NativeScript. Frameworks that use a WebView should be more compatible.

In the case of this tutorial, we'll be mostly focusing on the Cloud API. This way you have a good understanding of the overall system. It may seem intimidating but if you do it right, you'll get the hang of it real fast.

Making API Calls

In NativeScript you can't use libraries like [request](https://github.com/request/request). (Which happens to be the library Particle's very own DMC used in the CLI — DMC if you're reading this, Hi!) You'll have to use the provided HTTP module.

If you scroll all the way to the bottom of that page, you'll see a fully fledged POST example. I'll reproduce it here but with some Particle specific changes:

// Create form post data
var data = new FormData();
data.append("name", "update");
data.append("data", "It's hammer time!");
data.append("private", "true");
data.append("access_token", _token);

// Configure the httpModule
return httpModule
    .request({
        url: `https://api.particle.io/v1/devices/events`,
        method: "POST",
        content: data
    })
    .then(
        response => {
            const result = response.content.toJSON();
            console.log(result);
        },
        e => {
            if (e) console.log(e);
        }
    );

The above is an example of what's equivalent to Particle.publish in DeviceOS. Let's break down the parts.

First of all, one of the main gotchas of Particle's Web API is the data format. I first expected that they use JSON but I was sorely wrong. After actually reading the documentation I realized that most POST requests were actually application/x-www-form-urlencoded. That means when you submit data, it's the equivalent to hitting the submit button on an HTML form.

Fortunately, there is an easy way to assemble form data in Node/JavaScript. We can use the FormData() object. Take a look at the above. There should be some familiar parameter names in the data.append calls.

"name" refers to the name of the event you're publishing to.

"data" refers to the string formatted data that you're publishing.

"private" dictates whether or not you want to broadcast this data to the whole Particle world, or just your little corner of it.

"access_token" is a token that you can generate in order to make these API calls. Without a token though, you're dead in the water.

Getting a Token

Where do we get this elusive access_token?

At first I had no idea.

I created an OAuth user and secret in the console. That lead to a dead end. Fiddled around with different API calls and settings. Nothing. Then it hit me like a ton of bricks. There's an access_token attached to the curl request on every device page!

Open up any device, click the little console button near Events. A popup with instructions an a URL will pop up. Copy the text after access_token=. That is your access_token! See below:

You can use this token to make calls to the Particle API. This can be to subscribe, publish, write to a function, read variables and more.

Through the command line

That's nice and everything but how the heck can you programmatically generate one? One way is with the command line.

particle token create is the name of the command you need to know about. When you run it, you'll be prompted to login. (Also enter your Authenticator code if you use one.) Then the command line will spit out a shiny new access_token you can use with the API!

Through the API itself

If you couldn't guess, particle token create is a frontend to a raw API call. You can make these API calls directly too. Here's what it looks like in NativeScript.

// Create form post data
var data = new FormData();
data.append("username", "jaredwolff");
data.append("password", "this is not my password");
data.append("grant_type", "password");
data.append("client_name", "user");
data.append("client_secret", "client_secret_here");

// Configure the httpModule
return httpModule
    .request({
        url: `https://api.particle.io/v1/oauth/token`,
        method: "POST",
        content: data
    })
    .then(
        response => {
            const result = response.content.toJSON();
            console.log(result);
        },
        e => {
            if (e) console.log(e);
        }
    );

This call may get more complicated. Mostly in the case if you have two factor authorization setup. It's well worth it when you figure it all out. After all, no one wants to manually create auth tokens if they don't have to!

Now you're ready to write and read from your devices. There's one thing though that may trip you up. Subscribing to events can be troublesome with a regular HTTP client. So much so that if you try to do it with NativeScript's HTTP client, it will lock up and never return. Luckily there is a way to handle these special HTTP calls.

Server Sent What?

Server Sent Events (SSE for short) is an HTTP/S subscription functionality. It allows you to connect to a SSE end point and continuously listen for updates. It's a similar web technology to what companies use for push notifications. It does require some extra functionality under the hood though...

SSE Library

After much head scratching and searching I stumbled upon nativescript-sse. It looked simple enough that I could start using immediately. More problems arose when I tried to use it though.

First, it turns out you can't use the library in tns preview mode. The alternative is to use tns run ios --emulator or use tns run ios with your iPhone connected to your computer. The non-emulator command will automatically deliver your prototype app.

Side note: I had already set up my phone in Xcode. You may have to do this yourself before tns run ios is able to find and deploy to your phone.

Secondly, once I got the library working, I noticed I would get some very nasty errors. The errors seemed to happen whenever a new message from Particle came along.

Turns out the underlying Swift library for iOS had fixed this last year. So I took it upon myself to figure out how to upgrade the NativeScript plugin. I'll save you the time to say that it can be a pain and there is a learning curve!

Fortunately after some hacking I got something working. More instructions on how to compile the plugin are in the README. Alternatively, you can download a pre-built one on the Release page of the repository.

Download the .tgz file to wherever you like. Then, you can add it using tns plugin add. The full command looks like this:

tns plugin add path/to/plugin/file.tgz

You can check to make sure the library is installed by running tns plugin list

**jaredwolff$ tns plugin list
Dependencies:
┌─────────────────────┬──────────────────────────────────────────────────────────────────────────────────┐
│ Plugin              │ Version                                                                          │
│ @nativescript/theme │ ~2.2.1                                                                           │
│ nativescript-sse    │ file:../../Downloads/nativescript-sse/publish/package/nativescript-sse-4.0.3.tgz │
│ tns-core-modules    │ ~6.3.0                                                                           │
└─────────────────────┴──────────────────────────────────────────────────────────────────────────────────┘
Dev Dependencies:
┌──────────────────────────┬─────────┐
│ Plugin                   │ Version │
│ nativescript-dev-webpack │ ~1.4.0  │
│ typescript               │ ~3.5.3  │
└──────────────────────────┴─────────┘
NOTE:
If you want to check the dependencies of installed plugin use npm view <pluginName> grep dependencies
If you want to check the dev dependencies of installed plugin use npm view <pluginName> grep devDependencies**

Once installed, invoking the library takes a few steps. Here's an example:

import { SSE } from "nativescript-sse";

sse = new SSE(
            "https://api.particle.io/v1/events/blob?access_token=<your access token>",
            {}

// Add event listener
sse.addEventListener("blob");

// Add callback
sse.events.on("onMessage", data=>{
    // TODO: do stuff with your event data here!
    console.log(data);
});

// Connect if not already
sse.connect();

First you need to import and create an instance of the library. When you create the instance, you will have to enter the URL that you want to use.

In this case we'll be doing the equivalent of Particle.subscribe(). It should look something similar to the above: https://api.particle.io/v1/events/<your event name>?access_token=<your access token>.

Replace <your event name> and <your access token> with the name of your event and your freshly created token!

Then you set up the library to listen for the event you care about. In this case blob is the event I most care about.

Then make sure you configure a callback! That way you can get access to the data when blob does come along. I've made a TODO note where you can access said data.

Finally, you can connect using the .connect() method. If you don't connect, SSE will not open a session and you'll get no data from Particle.

Placement of the code is up to you but from the examples it looks like within the constructor() of your model is a good place.(https://github.com/jaredwolff/nativescript-sse/blob/master/demo/app/main-view-model.ts)

Other Examples

If you're curious how to use SSE in other places I have another great example: Particle's CLI.

Particle uses the [request](https://github.com/request/request) library to handle SSE events in the app. Whenever you call particle subscribe blob it invokes a getStreamEvent further inside the code. You can check it out here. The request library has more information on streaming here.

More resources

This is but the tip of the iceberg when it comes to connecting with Particle's API. Particle has some great documentation (as always) you can check out. Here are some important links:

• API documentation
• Javascript SDK
• iOS SDK
• Android SDK

Conclusion

In this post we've talked about app frameworks, NativeScript, NativeScript plugins and Server Sent Events. Plus all the Particle related things so you can connect your NativeScript app to Particle's API.

I hope you've found this quick tutorial useful. If you have any questions feel free to leave a comment or send me a message. Also be sure to check out my newly released guide. It has content just like this all about Particle's ecosystem.

Until next time!

This post was originally from https://www.jaredwolff.com/how-to-develop-particle-iot-apps-using-nativescript/

So many people own smartphones these days. This opens up endless opportunities for a business - opportunities which, however, are immediately challenged by the immense number of competitors in the mobile software market.

Mobile apps are surely more convenient than web or desktop platforms. Yet, they are not the most comfortable option that the industry offers.

To hit the highest level of user satisfaction and to outrun competitors, inventive people opt in favor of progressive web apps (PWAs) or accelerated mobile pages (AMPs).

What are these things, and how should you choose the best option? Let’s consider each one-by-one by going through these simple questions:

1. What is a PWA?
2. What is an AMP?
3. How are they similar?
4. How are they different?
5. Why PWAs are better than web pages
6. Why PWAs are better than native mobile
7. Why AMPs are better than web pages
8. Why AMPs are NOT better than native mobile

1. What Is a PWA?

A progressive web application, or PWA, unites the advantages of both web and mobile apps into a single software product. As Google declares, PWAs are “user experiences that have the reach of the web and are reliable, fast, and engaging”. It is a technology that lets you use a website as if it was a native app.

Twitter is one of the major companies using PWAs. To install the app, you open the web version on your phone and add it to your home screen. When you open Twitter from the home screen icon, you will be opening it as a progressive web app.

Fundamentals

PWAs are a highly responsive and easily shareable solution, which can work offline. They store HTML and CSS files in the browser cache and archive them with service workers. This makes it possible to use the web page offline. Service workers are one of the three essential components of a PWA, along with the manifest file and a secure protocol HTTPS.

Service workers are JavaScript code components which play the role of a proxy between the network and the browser.

When you open a web page for the first time, service workers store the necessary data in the browser cache. When you open it for the second time, service workers retrieve this data from the cache even before the app checked network availability.

Not only do they provide the ability to work offline but also they greatly boost the response time. Service workers also manage push notifications.

The manifest file is a JSON file containing all the information about your app. For instance, it contains data about the home screen icon of your PWA, its short name, color palette, or theme.

If you are using the Chrome browser on an Android phone, the manifest file will trigger the automatic installation of the PWA onto your phone.

The secure HTTPS protocol is an absolute must if you develop a progressive web app. While service workers make the very concept of a PWA possible, they are vulnerable to network errors or breaches. Service workers can intercept network requests and modify responses. To ensure data security and network security, the secure protocol needs to be used.

Success stories

Twitter is not the only company that has benefited from PWAs. Check out these case studies published by Google to see how this technology helped popular businesses succeed. Among these companies are Pinterest, Alibaba, The Weather Channel, Lancome, and The Home Depot.

2. What Is an AMP?

AMP stands for accelerated mobile page. It's a mobile-friendly web page, which is designed to be loaded instantly. It is a fast and smoothly loading solution which is developed with the user experience in mind. Introduced as an open-source project, the AMP technology was integrated by Google in February 2016.

In 2016, The Guardian announced that their platform was now available as an AMP. To help readers see how it worked, they displayed the same article both as a web version and an AMP version.

There were some differences, but they were insignificant. But what you'd notice right away was how much faster the AMP article loaded compared to the regular web article.

*By comparing this illustration with the one I included earlier, you could notice an interesting point. A PWA needs to be installed. In turn, you do not need to install AMP. It is accessed via a different like.

Fundamentals

The idea of AMPs is to reduce the amount of unnecessary content and functionality so that the app displays essential content immediately. The data can be reduced up to ten times. The three essential components of AMPs are AMP HTML, AMP Components, and the AMP Cache.

AMP HTML is a simplified version of regular HTML. AMP HTML does not allow some tags and elements of HTML (for example, forms). To understand better what AMP HTML should look like, check out the required mark-up.

AMP Components are the scripts that enable you to do without JavaScript. The idea of AMP is to get rid of all JavaScript scripts as make pages load more slowly.

But this does not mean that your page should do without animations, modified layouts, analytics data, autocomplete suggestions, or ads. There is an extensive library of components that enable you to implement these and a lot of other features.

The AMP Cache is a proxy-based content delivery network which fetches and caches page content. AMP Cache enables you as an app owner to easily introduce page updates. It optimizes and, if needed, modifies the AMP.

Success stories

The same as with PWAs, companies are often very proud of the business advantages that AMPs offer. Here is a collection of success stories and case studies of companies that used AMPs and benefited from them. Musement, RCS MediaGroup, CNBC, The Washington Post are all companies that have implemented or plan to implement AMPs.

3. How Are PWAs and AMPs similar?

Both PWAs and AMPs are methods of displaying web pages on mobile devices. Both of them are created to enhance the user experience.

AMPs and PWAs both help reduce page load time. While AMPs may be slightly more effective in terms of loading speed than PWAs, the difference between AMP and PWA loading times is barely noticeable.

Both technologies are actively supported by Google. There is a PWA page on Google Developers and an AMP page on Google Developers as well.

There are not a lot of other similarities, but this primary similarity is essential.

Now let’s see what the differences are.

4. How Are PWAs and AMPs Different?

Appearance

By using a PWA you do not feel like you are using a web page. PWAs look and feel like a mobile app.

By using AMPs, you are well aware that you are using a web page because it looks the same.

Development

In the case of PWAs, the application code is written either from scratch or with some parts of the existing code.

In the case of AMPs, the existing code of a web page is stripped of unnecessary CSS and JS so that the web page loads faster.

User experience

PWAs offer a much better user experience. They have push-notifications, a home screen icon, and no browser tabs. Also, they are much easier to download and lighter in size than a regular mobile app. PWAs load faster than a regular web version because they are embedded with App Shell. And PWAs can be used when the network connection is down.

AMPs offer a slightly improved user experience since the page loads faster than a regular page. Still, this is the only UX advantage that they offer. Unlike PWAs, AMPs cannot work offline.

Performance

From an SEO standpoint, AMP wins the competition. Google favors these pages and lists them in the carousel of top stories, which can increase your click-through rate.

PWAs, in turn, do not have a direct advantage for SEO. However, better user experience translates into higher retention rates, which helps you win with SEO.

Support

PWAs are not supported equally on all devices, so you may find slight inconveniences when they're displayed on iOS. Also, they do not support all the hardware functionalities, such as Bluetooth, NFC, GPS, or accelerometers.

AMPs are supported by all major browsers on all devices.

Apps they're best suited for

PWAs work perfectly for apps that require user interactions. E-commerce websites, social media, or online learning platforms where the app needs to be responsive and constantly updated can make use of this technology. This is why Twitter uses a PWA, for example.

AMPs are more suitable for platforms with a wall of content, such as online magazines or newspapers. AMPs load content instantly, but the interaction opportunities are limited. This is why The Guardian decided to employ AMPs.

5. Why PWAs Are Better Than Web Pages

If you access a web page on mobile, you will have to deal with browser tabs, slow loading times, and annoying pop-ups. If your device has a relatively small screen or a slow network connection, surfing the web on it becomes unbearable.

This problem is solved by progressive web apps. In a few clicks, you install the app on your phone and get down to using it. No need to type a link, no browser tabs, and no pop-up screens. The app works fast, and it does work if the network connection is down.

Alright, the benefits of this solution are evident, but it seems like native mobile apps could work perfectly instead. No, they would not. Let’s see why PWAs are better than native mobile apps.

6. Why PWAs Are Better Than Native Mobile Apps

To use a native mobile application, you have to find it in the App Store or Google Play catalogs. Then, you have to wait for some time to download it. You might not have enough free space on your device, so you'll need to find some room.

In turn, PWAs are installed and ready to use in seconds. The file size is small (although it's bound to increase while you are using the app and it is caching). Still, the size of the cached data depends on the amount of free storage you have on your device.

As you can see, PWAs seem better than a web or native mobile app. But you should understand that this solution is not universal. Check out my recent article on PWA vs Native to learn when a native app is a better choice than a PWA.

7. Why AMPs Are Better Than Web Pages

As mentioned above, web apps are slow and inconvenient, especially when accessed on mobile devices with small screen size or underpowered hardware.

By getting rid of all the web components that are unnecessary for a good user experience, accelerated mobile pages solve this problem. AMPs perform 4 times faster and use 10 times less data than regular web pages.

8. Why AMPs Are NOT Better Than Native Mobile

Unfortunately, AMPs cannot be a complete substitute for native mobile apps. They cannot be installed on the home screen, they still include browser tabs, and their functionality is limited to some basic stuff.

But for an online newspaper or for an informational website, such as WebMD, it is better to use AMPs rather than a native mobile app. These do not require any additional functionality for displaying page content.

To Wrap Up

Both AMPs and PWAs are powerful technologies. To sum up the results of our initial question - PWAs vs AMPs:

• AMPs will be easier, faster, and cheaper for you to develop
• PWA will offer more benefits.

Just remember - neither of them is a universal solution, and neither is a panacea. Even using AMPs and PWAs together may not meet all your demands. Sometimes you may need to choose more conventional types of software.

If you are still not sure what to choose, our specialists share four questions to understand if you need PWA. In short: We believe that progressive web apps are the future. Accelerated mobile pages are just too simple and limited in functionality to compete.

Do you have an idea for a project?

My company KeenEthics is experienced in both AMP and progressive web app development. If you are ready to change the game and start your project, feel free to get in touch.

P.S.

The original article posted on KeenEthics blog can be found here: PWA vs AMP: What Is the Difference and How Do You Choose?

This is the second part of an article on building a Spotify UI clone with autoLayout programmatically. If you missed the first part, no worries - just please go and check it now.

In this article, we are going to add some mocked pictures and try to make the UI look the same as Spotify's.

This is what we are going to do today ?

This is were we left off in the first part:

The next step is to create customized cells. So let's start by creating one with the name SubCustomCell.

First, create a new Swift file inside the project folder and name it SubCustomCell.swift. This file will contain our custom cell that will represent the Playlist. After creating the file, try to add in the code below and initialize the cell, maybe with backgroundColor, to see the UI changes when we register the cell with the collectionView.

import UIKit

class SubCustomCell: UICollectionViewCell {
        override init(frame: CGRect) {
        super.init(frame: frame)
        backgroundColor = .red
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

Then we register the SubCustomCell inside CustomCell.swift within the init block. Replace UICollectionViewCell.self with SubCustomCell like below.

 collectionView.register(SubCustomCell.self, forCellWithReuseIdentifier: cellId)

Also we need to make a modification on the cellForItemAt method and make it conform to SubCustomCell like the following.

 func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellId, for: indexPath) as! SubCustomCell
        // cell.backgroundColor = .yellow

        return cell
    }

You should see the backgroundColor changed to red .

Swift CustomCell

Up until this point everything should be straightforward and clear.

Now we're going to fill the cells with some mocked pictures and create an ImageView inside each cell. I already downloaded some random pictures from pexels.com, but feel free to use any pictures you like (including these). You can find them in the project files on Github.

Let's create the UIImageView inside SubCustomCell.swift and make some constraints.

    let ImageView : UIImageView = {
       let iv = UIImageView()
        iv.backgroundColor = .yellow
        return iv

    }()

And add it to the view within the init block using addSubView.

 override init(frame: CGRect) {
        super.init(frame: frame)
        addSubview(ImageView)

    }

Now let's make the ImageView take up all the space within the cell with the constraints below.

 ImageView.translatesAutoresizingMaskIntoConstraints = false
            ImageView.topAnchor.constraint(equalTo: topAnchor).isActive = true
            ImageView.leftAnchor.constraint(equalTo: leftAnchor).isActive = true
            ImageView.rightAnchor.constraint(equalTo: rightAnchor).isActive = true
            ImageView.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true

• LeftAnchor represents the left anchor of the cell
• rightAnchor represents the right anchor of the cell
• bottomAnchor represents the bottom anchor of the cell
• topAnchor represents the top anchor of the cell

And by making ImageView 's top anchor equal to the cell's top anchor (and doing the same for ImageView 's left, right, and bottom anchor) it makes the ImageView take up all the space of the SubCustomCell (cell).

Note: first you need to use translatesAutoresizingMaskIntoConstraints to be able to apply the constraints to the elements. Also don't forget to call isActive property and assign it to true – without doing that the constraints won't work and nothing will change.

The ImageView should have an image, so let's add one.

 let ImageView : UIImageView = {
       let iv = UIImageView()
        iv.backgroundColor = .yellow
        // we have >image1< file inside the project 
        iv.image = UIImage(named: "image1")
        iv.contentMode = .scaleAspectFill
        iv.clipsToBounds = true

        return iv

    }()

And if you build and run the app, you should see the results and picture we added to the SubCustomCell.

Cool ?. Now there is an element we should add to the SubCustomCell to finish up. We need a title that will represent the title of the playlist: UILabel.

For the title it will be like this:

 let TitleLabel : UILabel = {
        let lb = UILabel()
        lb.textColor = UIColor.lightGray
        lb.font = UIFont.systemFont(ofSize: 16)
        lb.font = UIFont.boldSystemFont(ofSize: 20)
        lb.text = "Evening Music"

        return lb
    }()

I just put some random text there – you can put whatever you like. The next step is to add the element to the view and give it some constraints. The title will be placed at the bottom of the ImageView.

Add to view:

addSubview(TitleLabel)

Applying the constraints for both the ImageView and the TitleLabel

 ImageView.translatesAutoresizingMaskIntoConstraints = false
            ImageView.topAnchor.constraint(equalTo: topAnchor).isActive = true
            ImageView.leftAnchor.constraint(equalTo: leftAnchor).isActive = true
            ImageView.rightAnchor.constraint(equalTo: rightAnchor).isActive = true
            ImageView.heightAnchor.constraint(equalToConstant: 240).isActive = true
            ImageView.bottomAnchor.constraint(equalTo: TitleLabel.topAnchor).isActive = true



            TitleLabel.translatesAutoresizingMaskIntoConstraints = false
            TitleLabel.topAnchor.constraint(equalTo: ImageView.bottomAnchor,constant: 10).isActive = true
            TitleLabel.leftAnchor.constraint(equalTo: leftAnchor, constant: 5).isActive = true
            TitleLabel.rightAnchor.constraint(equalTo: rightAnchor, constant: -5).isActive = true

And here we go!

We made the picture take up most of the space in the cell, and the rest is taken up by the title. As you can see, you can scroll horizontally in each section and also vertically in the entire screen.

Now we are put some mock data into the cells to make it feel like it's real. For that I created a JSON file that contains some random data for sections and playlists.

First let's create a two structs, Section and Playlist . We create a separate file for each struct.

section.swift

import Foundation
struct Section {
    var title : String
    var playlists : NSArray
    init(dictionary:[String : Any]) {
        self.title = dictionary["title"] as? String ?? ""
        self.playlists = dictionary["playlists"] as? NSArray ?? []

}
}

playlist.swift

//
//  playlist.swift
//  spotifyAutoLayout
//
//  Created by admin on 12/6/19.
//  Copyright © 2019 Said Hayani. All rights reserved.
//

import Foundation
struct PlayList {
    var title: String
    var image : String
    init(dictionary : [String : Any]) {
        self.title = dictionary["title"] as? String ?? ""
        self.image = dictionary["image"] as? String ?? ""
    }

}

And then inside ViewController.swift we create a function that fetches the JSON for us and stores the results in an array.

        print("attempt to fetch Json")
        if let path = Bundle.main.path(forResource: "test", ofType: "json") {
            do {
                  let data = try Data(contentsOf: URL(fileURLWithPath: path), options: .mappedIfSafe)
                  let jsonResult = try JSONSerialization.jsonObject(with: data, options: .mutableLeaves)
                if let jsonResult = jsonResult as? [ Any] {
                            // do stuff
                    jsonResult.forEach { (item) in

                        let section = Section(dictionary: item as! [String : Any])
                       // print("FEtching",section.playlists)
                        self.sections.append(section)
                    }


                  self.collectionView.reloadData()
                  }
              } catch {
                   // handle error
              }
        }
    }

The fetchJson function is called within the ViewDidLoad method. We also have a variable called sections where we store the results:

 var sections = [Section]()

The next step is to pass the data from ViewController to CustomCell. For that we create a variable inside CustomCell which will receive the data for each section:

 var section : Section?{
        didSet{
            print("section ✅",self.section)
        }
    }

We use cellForItemAt inside the ViewController method to pass the data directly to the CustomCell .

override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellId, for: indexPath) as! CustomCell

        cell.section = sections[indexPath.item]

        return cell
    }

Note: we always call self.collectionView.reloadData() every-time fetchJson is called so the block below, inside CustomCell, will be called as well. Check the console, shift + command + C:

 var section : Section? {
        didSet{
            print("section ✅",self.section)
        }
    }

The first thing we change is to set the the section title:

 var section : Section? {
        didSet{
            print("section ✅",self.section)
            guard let section = self.section else {return}
            self.titleLabel.text = section.title
        }
    }

And then you should see that each section has a specific title on the screen ?.

Now it's time to pass the data down to SubCustomCell. We do the same thing as we did above. We need to pass the playlists array, so we create a variable named playlists inside CustomCell.

 var playlists : [PlayList]() //empty

First, we map through the playlists from the JSON. Then we add each playlist with the playlists var.

 var section : Section? {
        didSet{
            print("section ✅",self.section)
            guard let section = self.section else {return}
            self.titleLabel.text = section.title
            // append to playlists array
             self.section?.playlists.forEach({ (item) in
                let playlist = PlayList(dictionary: item as! [String : Any])
                self.playlists.append(playlist)

            })
            self.collectionView.reloadData()
        }
    }

Attention! If you try to run the app it may crash. This is because we forgot to set the number of sections. Since we are now receiving the data from JSON, the number should be dynamic based on the number of sections we have. The number of sections should be equal to the number of sections inside the JSON, so we need to modify numberOfItemsInSection inside ViewController to the below :

   override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return sections.count
    }

We do the same thing with the same method inside CustomCell.swift – but here we consider the number of the playlists instead.

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return  self.playlists.count
    }

The last step we have to complete is to pass each single playlist Object to SubCustomCell within cellForItemAt in CustomCell.swift.

 func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellId, for: indexPath) as! SubCustomCell
        // here ?
        cell.playlist = playlists[indexPath.item]
        return cell
    }

And we are going to get that data inside SubCustomCell via the playlist variable and finally display the title and image of the playlist.

var playlist : PlayList? {
           didSet{
               print("Playlist ?",self.playlist)
            guard let playlist = self.playlist else {return}
            // The Image ?
            self.ImageView.image = UIImage(named: playlist.image)
            // the playlist title ?
            self.TitleLabel.text = self.playlist?.title

           }
       }

I think everything should work fine now, just as below ?

One last update to the UI: we have to add some padding and margins to the section and playlist titles and make the playlist a little bit smaller.

Let's first add some padding for the section titles. To do that, we need just to give the constant property some number value inside the section cell CustomCell and within setupSubCells:

 collectionView.topAnchor.constraint(equalTo: titleLabel.bottomAnchor,constant: 15).isActive = true

And if you see the entire collectionView come in at the bottom of the titleLabel, all we need to do is add more space by adding 15:

Next we come to the title of the playlist. This will be inside SubCustomCell, and we just need to add more space at the bottom of the ImageView.

 ImageView.bottomAnchor.constraint(equalTo: TitleLabel.topAnchor,constant: -15).isActive = true

We already have the constant there. In order for it to work, the value should be -15

Finally the playlist needs to be a little bit smaller. This is easy: we just make the playlist cell's height and width equal to the section cell's height divided by 2, just like below:

CustomCell.swift

 func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

        let width = frame.height / 2
        let height = frame.height / 2

        return CGSize(width: width, height: height)

    }

Make the ImageView's height equal to 150 as well.

  //SubCutomCell.swift
  ImageView.heightAnchor.constraint(equalToConstant: 150).isActive = true

And here we go ?.

Perfect! I think that's enough for today – I don't want to make this article too long. So we will have another part where we will add the TabBar and the description, as well as some icons for the playlist.

View the Full source code on GitHub?.

Thanks for your time. I hope I haven't missed anything. If I did please @mention me on Twitter, or if you have any questions or an addition to this post the doors are always open to anyone. Thanks??.

Subscribe to my email list to be notified when the third part of this tutorial is published.

By the way, I’ve recently worked with a strong group of software engineers for one of my mobile applications. The organization was great, and the product was delivered very quickly, much faster than other firms and freelancers I’ve worked with, and I think I can honestly recommend them for other projects out there. Shoot me an email if you want to get in touch — said@devsdata.com.

For 5 years, freeCodeCamp has been helping millions to learn to code for...well...free!

The low cost has opened up a world of opportunity to those that could not afford a bootcamp or the many expensive courses available. However, there has been one barrier to entry for some - the necessity to use a laptop / desktop PC.

Coding on freeCodeCamp has been possible on a mobile device, but it's never been a comfortable experience - until today!

With the 5th birthday of freeCodeCamp comes a wonderful gift to the developer community: the new Command Line Chic interface, which includes a far superior mobile experience than has previously been available.

The new responsive command line chic interface, with a clean mobile text editor

Making the most of mobile coding

Maybe you've tried using your mobile device for coding on freeCodeCamp before and noticed an annoying bug - it's impossible to delete things properly!

If you have encountered this, the cause of the problem is simple - your keyboard suggestions are treating the individual characters as longer strings. I haven't investigated this in detail, but my intuition is that it's deleting the html entity code.

The fix is simple - turn off auto suggestions, or better yet use a dedicated coding keyboard for your device.

This has the added benefit of making they keys you use often for programming (but not natural language) more easily available, such as brackets, braces and other special characters.

Coding keyboards for your mobile device

CodeBoard for Andoid

CodeBoard for Android provides a packed keyboard of all the keys you are likely to need while completing the freeCodeCamp curriculum. The board is a little too crowded on a phone (although I still use it and have gotten used to it), but on a tablet it is a perfect companion.

DevKey for iOs

DevKey for iOs presents a much less crowded interface, while still providing most of the keys you are likely to need. I can't personally endorse this, since I do not have an iPhone - but needless to say it presents a better experience for mobile coding than the standard keyboards.

Coding on the go!

Now that you've supercharged your mobile learning environment, you can take those freeCodeCamp lessons with you wherever you go, without the need for a clunky laptop hotspotting off your phone.

One thing that I'm really looking forward to is using the new interface and my mobile set-up to increase my participation on the freeCodeCamp forum! I've always primarily engaged with the forum on my phone, but have struggled to help with coding challenges due to the previously poor mobile experience. Now, you can expect to get even more help from me and hopefully others!

Happy birthday, freeCodeCamp, and happy coding, y'all!

You can follow my more informal tech ramblings on Twitter @JacksonBates!

Swift is a mother?and it has two sons ?-

• Value Type ??‍♀️
• Reference Type ?‍♂️

But what are their characteristics??‍♂️

Do they behave the same or opposite to each other? ?‍♂️

Swift is a multi-paradigm programming language developed by Apple for iOS, macOS, watchOS, tvOS, Linux, and z/OS.?

Just like other object-oriented programming languages, Swift has classes as building blocks which can define methods, properties, initializers, and can conform to protocols, support inheritance & polymorphism.?

But, wait wait wait…???

Swift has structs also and it can define methods, properties, initializers and can conform to protocols with only one exception of inheritance.?

What? Now I am confused!!! ???

Now let’s spice up your confusion: structs are not only the value types in Swift. Tuples and enums are also value types. Classes are also not the only one used as a reference type. Functions and closures are also reference types. But as a token of relief, we at least know the primary focus & specialization of usage of these types.?

So up to this point, we are left with only one big confusion with the usage of structs and classes.?

So, let’s go and clear the confusions going around.?‍♂️

Storage Locations

There are three types of storage available:

• Register ?
• Stack ☄️
• Heap ?

The objects that have a shorter lifespan are stored inside registers or the stack and those that have a longer lifespan are stored inside the heap.?

A value type stores its contents in memory allocated in the stack, so we can say value types are allocated in the stack in Swift. ?

But there is a common misconception about value types, have you heard it??‍♂️

The misconception is that most people think value types are always stored in the Stack.

❌❌ Wait a minute — this is not the case always. ❌❌

Value types can be stored inside the stack when they are either temporary or local variables. But what if a value type is contained inside a reference type?

In this situation, it can be stored inside the heap memory. ?

Wow…that’s cool!!!?

So the value types can be stored inside the register, stack or heap depending on their lifespan, whether they are short lived or long lived. If it is a local variable it can live inside the stack and if it is a part of class then it can live inside heap memory also.✅

On the other hand, reference type stores its contents in memory allocated in the heap memory and the variable holds only a reference to that memory location where actual data has been stored. ??

How does it work for reference type??

So for reference type, it is quite a common situation when there can be several variables holding the reference to the same memory location.⚔️

When a value type instance is assigned to a variable or passed to a function, the instance is copied and assigned to that variable. But with the reference type, only the reference gets copied and the new variable holds the same reference to the same memory location. ?

Differences in terms of Mutability

There can be two states for a variable:

• ?‍♀ ️Mutable ?‍♀
• ?️‍♂️ Immutable ?️‍♂️

If a value type instance is assigned to an immutable variable, then the instance also becomes immutable. As a result, we can not make any changes to that instance.?‍♂️

If a value type instance is assigned to a mutable variable, then only it makes the instance mutable. ?‍♂️

But things are totally different for reference types. The variable and the instance it is assigned to are totally different. If we declare an immutable variable holding a reference to a class, this means that the reference it is holding will never change. We can not the change the reference and it will always point to the same reference. ?

Structural Types

Values of structural types are compared for equality in terms of their attributes or elements. We can say a value type is equal to another if and only if all of the corresponding attributes are equal. ???

Umm…too many strong words…what do you mean???

Let’s say, we have a Person value type which has attributes like firstName and lastName.

struct Person {
   var firstName: String
   var lastName: String
}

var person1 = Person(firstName: "foo", lastName: "bar")

var person2 = Person(firstName: "foo", lastName: "bar")

Here both person1 & person2 instances are holding the same value for firstName (“foo”) and lastName (“bar”). So as per our understanding, we can say that the two instances are equal to each other since their attributes (firstName & lastName) are holding the same values.

But it’s not only limited to this: in the future, any two person instances holding the same values for firstName & lastName will be equal to each other.

So as per our understanding till this point, we can say that:

Value Types do not have identity, so there can be no reference to them. Value types are faceless.?

What? How can you say that????

var myAge: Int = 21
var friendAge: Int = 21

Both myAge & friendAge are integer type variable with value 21.

Can we distinguish one from the other? ?

No, because they are holding the same value.?

An integer variable with value 21 cannot be different from another integer variable which is also having the value 21. As simple as that.???

Not having an identity gives value types another advantage: if you think practically, then you can imagine if you do not have an identity then anyone with same characteristics can replace or substitute you. ???

The same we can think for us as humans also. If I don’t have an identity then anyone with same characteristics can replace me???. It’s good for us that we have an identity otherwise it would be a great risk to our existence.?

But for value types, they don’t have an identity and it is an advantage to them. ?

What are the benefits of using Value Types?

? No Race Conditions and Deadlocks: ?

For values types in a multi-threaded environment, it is impossible for one thread to mutate the state of the instance while it is being used by another thread. So we can say that there will be no race conditions or deadlocks.

⚔️ No Retain Cycles: ⚔️

When there are two reference type instances that are holding strong references to each other and preventing each other from being deallocated from memory, it is called a retain cycle. Since value types don’t work as a reference, so we can say there will be no retain cycles for value types.

?‍?‍?‍? Automatic Reference Counting: ?‍?‍?‍?

For reference type, Swift uses automatic reference counting to keep track of all the live or active objects and deallocates the instance only when there are no more strong references to it. If we think a little bit, then we can say that it is kind of a heavy operation because Swift runtime needs to keep track of the objects always. But since value types are allocated in the stack, it does not need ARC. So it is cheaper and faster??.

But wait...How does it manage memory for Array, Dictionary and String??

Since we can not know what will be the actual size of an array, a dictionary, and a string at compile time, there is no scope for them to be allocated at compile time. Though they are value types internally, they can not be allocated in stack. They need to be allocated in heap memory, and to manage this, Swift comes up with copy on write.?

But what is this??

When we say one instance is a copy of another instance, this really means they are the same, that they contain the same values. But in Swift, for these above types (Array, Dictionary, String, etc), an actual copy has been made on heap only when an instance is mutated. This is called a performance optimization technique for value types.???

Conclusion

There is no hard rule which defines when to use value type and when to use reference type. Value types have some unique advantages over reference types and vice versa. They both are unique in their own way. It really depends on your requirements and what you are trying to achieve. You should know the semantics of your code because you only know your code best, so it’s up to you to choose. You have the full freedom.

So rather than fighting over value type vs reference type, use them intelligently.

??? Cheers!!! Thank you for reading!! ???

✅✅✅You can find me on Twitter.✅✅✅

Dev Ops, Mobile Engineer, Data Scientist, Project Manager, and Front End — what’s best for you?

_Get more info before you blindly choose your future career path. Photo by [Unsplash](https://unsplash.com/photos/ZFYg5jTvB4A?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" rel="noopener" target="_blank" title="">Robert Anasch on <a href="https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" rel="noopener" target="blank" title=").

I’ve worked in tech for four years, and I still come across roles that I don’t understand very well. There are so many ways to build a career in tech. I know that when I started looking for my first job, I was clueless about the differences between career paths. If you asked me what a site reliability engineer did, I wouldn’t have been able to tell you.

I get a lot of questions about career paths in tech. I thought I would write an article about it so I could point people to it. I’ll be using Business Insider’s article listing the 20 best tech jobs in America in 2018 as a reference. This is a good list of relevant tech paths with good upward mobility. They are highly in demand and will allow you to get a job at a good company with good pay. Hopefully, this will help you decide the path you will take. So let's start:

_Mobile devices have deeply integrated into our lives. For better or for worse. Photo by [Unsplash](https://unsplash.com/photos/5AYP1yeaE3I?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" rel="noopener" target="_blank" title="">rawpixel on <a href="https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" rel="noopener" target="blank" title=")

Mobile Developer

What do they do?

Mobile developers are the people that build apps for companies. If you’ve ever used an Android or iOS device, then you’ve directly interacted with a mobile developer’s work. There are other development platforms for mobile such as Windows phone. But for the most part, when people say “Mobile Developer”, they’re most likely talking about an Android or iOS developer.

Why should I choose this career path?

You should become a mobile developer if you want to use your eye for design and attention to visual detail alongside your technical prowess. Mobile developers work heavily with designers to put out beautiful, easy to use and performant mobile apps.

You should also choose this path if you are interested in mobile devices and how they work. Mobile developers that focus on infrastructure have to consider limited device resources. They also must have in-depth knowledge of how a mobile device works to make the apps they work on performant.

How do I get started?

This depends on if you want to focus on iOS or Android. I’d personally recommend learning Android for two reasons. Java is probably a more useful language to learn over Swift or Objective-C and the fact that 75% of the world uses Android compared to 21% using iOS. This is according to statcounter.com. That being said, if you have a particular passion for one platform over the other, go with your passion.

For Android, read this article. This goes over the nitty-gritty of how to get started. For iOS, watch this video on raywenderlich.com. Ray Wenderlich’s website is an excellent resource for iOS in general.

_Insights derived from data tend to deliver better results than gut feelings from founders. Photo by [Unsplash](https://unsplash.com/photos/1K6IQsQbizI?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" rel="noopener" target="_blank" title="">Franki Chamaki on <a href="https://unsplash.com/search/photos/data?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" rel="noopener" target="blank" title=")

Data Scientist

What do they do?

Data scientists help businesses solve problems through the processing of data. So what does that mean? A software engineer will implement some logging somewhere on a website or mobile app. This gets processed and eventually gets to the data scientists. The data scientists will then gather all these data points and derive insights from them.

We can use an e-commerce website as an example. After looking at a few different data points, a data scientist notices that only 0.5% of people that add an item to the cart end up making a purchase. The data scientist then hypothesizes that this could be the reason for the decline in revenue last month. They check the rate three months ago and see that it was at 5%.

It looks like that is probably the reason for the drop in revenue. They surface this to the right stakeholders. These stakeholders find out that there was a crash occurring during purchasing that caused the problem. This may not have been found if a data scientist didn’t work at the company.

Data scientists can also work to spot new paths to growth and ways to improve current products based off of data. The sky is the limit on how a data scientist can be leveraged at a company.

Why should I choose this career path?

Become a data scientist if you love looking at data and trying to see patterns. Data scientists provide value by looking over data and trying to discover insights that will help their company grow. You have to love trying to come up with reasons for why specific patterns are occurring. You also have to have a deep understanding of the products you are working with, so you can vet hypotheses around your data insights.

How do I get started?

I would start with this course on Coursera which first gives you a better understanding of how data drives business decisions. If that course deepens your interest, start with this article that recommends some great ways to start learning.

_Being a project manager requires maintaining a perfect balance between delivery date and quality. Photo by [Unsplash](https://unsplash.com/photos/flEStjHTY14?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" rel="noopener" target="_blank" title="">Leio McLaren (@leiomclaren) on <a href="https://unsplash.com/search/photos/balance?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" rel="noopener" target="blank" title=")

Project Manager

What do they do?

Project managers do exactly what their title implies, they manage products. But what exactly does that mean? Well, as a project manager, you need to have a high level view of the product you are working on.

You need to make sure everyone is executing and working on the most relevant tasks so you can ship your product on time. You need to understand what every person on the team is doing, how they’re doing it and when they’ll be done. You line up all the pieces so that the final product has everything it needs in the timeline you provided to the higher-ups.

This also means you need to help unblock people when they’re stuck. You need to organize meetings with other teams if you are dependent on them for finishing your product. You need to run sync up meetings for your team to ensure everyone is on track and not having issues.

The hardest part about being a project manager is ensuring that everything gets done on time and with quality. You also need to make sure the people on your team aren’t overwhelmed. This is always a delicate balance.

Why should I choose this career path?

You are organized and love collaborating with others. You are able to balance the needs of many in order to deliver on a high quality product. You understand the trade off between time and quality and know when to push back for either.

Lets say the people waiting for your product demand that you finish it in 2 months when you know it will take 4 months to deliver a quality product. You must have the ability to provide convincing evidence for why you need the extra time. You also have to ensure that you don’t bow to pressure.

Being a project manager requires maintaining a perfect balance between delivery date and quality.

The opposite can be true also. Sometimes developers say that something will take 1 month when you’ve seen it done in 3 days before. You ask questions and find out that the developer wants to over-engineer this certain piece of work even though you know the product doesn’t need it. You have to figure out a way to get the developer to only build what is needed.

Like I said before, being able to work effectively with others while being organized and keeping a product on track is what it is all about. This is incredibly difficult. You need to have high level knowledge of a product but deep enough knowledge about every piece that you can keep people accountable for their work.

How do I get started?

A lot of project managers in tech use Agile and Scrum methodologies to organize their work. I would get started by looking into obtaining Scrum certifications. Take a look at the Scrum website for more details.

Project manager’s tend to have a business administration degree or a project management degree. If you are already working on a computer science degree, you can consider getting a minor in one of these subject areas.

Another great way to get into project management is to manage a small project with your friends or an open source project. Practice makes perfect and real life application of project management skills will make you stand out as a candidate.

You can also start getting familiar with project management tools such as Trello, Jira, Quip, Excel and many more. Being familiar with the software a project manager uses will help you build your skills in project management.

_Having a sleek front end is key in creating popular websites. Photo by [Unsplash](https://unsplash.com/photos/V09Io5ln-Qo?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" rel="noopener" target="_blank" title="">Aaron Huber on <a href="https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" rel="noopener" target="blank" title=")

Front end engineer

What do they do?

Front end engineers use HTML, CSS and JavaScript to build UI for websites. They focus on aspects that are important to the website such as accessibility, security, usability and performance. If you’ve ever logged into a website or bought something from an e-commerce store on your web browser, then you’ve interacted with a front end engineer’s code. Check out this awesome article for even more details.

Why should I choose this career path?

In a lot of ways, this job is similar to a mobile engineer’s job. They both build UI and should have a certain attention to detail when it comes to visual elements. They both work with designers to implement UI that is both performant and a delight to use. The main difference would be the languages and tools used and the fact that mobile developers are creating applications instead of websites.

You should be a front end engineer if you are the kind of person that likes learning and using new languages and tech stacks. Being a front end engineer requires the use of HTML, CSS, JavaScript and SQL. On top of that, you will most likely need to know some back end server-side framework like Django, Ruby on Rails, or .Net.

Another reason to consider this path is if you are interested in problems around scaling. A mobile application will only ever serve one user at a time. This is due to the fact that only one person can use a mobile device at a time. A website has to serve potentially millions of people at the same time. This requires a different mindset and approach to prevent bottlenecks from occurring.

How do I get started?

This one is easy :) Just checkout freeCodeCamp’s course. This will give you all the skills you need to become a proficient front end engineer.

_From committed code to delivery to production, a DevOps engineer has got you covered. Photo by [Unsplash](https://unsplash.com/photos/0wsnJWonXFs?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" rel="noopener" target="_blank" title="">Drew Beamer on <a href="https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" rel="noopener" target="blank" title=")

DevOps Engineer

What do they do?

This is by far the hardest role to explain. Because there is a lot of debate about whether this is really a role or actually just a mindset. The idea can be broken down into the fact that a DevOps engineer takes on both a developer and an operations job. Hence the term “DevOps”. Let’s look at each of these roles.

In general, software engineers want to build as many features as possible so they will look good to the higher ups. One of those new fancy features is bound to help the company grow which makes the software engineer look good.

An operations engineer wants stability. Which means they don’t want software engineers to release too many new features. Because with new features comes unpredictability. And with unpredictability, comes instability. The operations engineer just wants every new release to be stable. They want the release process to go smoothly. But releasing too many features or features of high risk threatens this goal, which is exactly what most software engineers are aiming to do.

These two roles obviously seem at odds but that is why a DevOps engineer can be so useful. A DevOps engineer can bridge the gap between development and operations. By doing this, they create meaningful communication routes between these sometimes silo-ed areas. A DevOps engineer creates a feature and sees it safely to production where it makes users satisfied. Being able to do this is highly valued at any company.

Why should I choose this career path?

You should choose this career path if you are not only interested in coding features, but want to learn about how to release your code to a production environment. You should have the drive to learn about every aspect of software engineering and release engineering.

You will most likely need years of experience to be termed as a “DevOps” engineer due to the vast amount of knowledge and tools you will need to learn. You should love learning new things. The idea of knowing every aspect of your tech stack should excite you. If you want to become the person that everyone goes to when something unexpected happens, then you should look into becoming a DevOps engineer.

How do I get started?

I’d get started by learning about how code gets released into a production environment for starters. This can be done by building your own website, and deploying it yourself. The best way is to work for a company for a while and work on every part of the deployment process. Volunteer to fix problems that others don’t want to deal with. That is a great way to learn.

Other than that, I’d recommend reading this article on how to get into DevOps. It is very well written gives even more actionable ways to become a DevOps engineer.

Didn’t see the role you were looking for?

If you enjoyed my summaries of these roles but didn’t see the role that you wanted, leave a comment! I will do another round of these career path overviews for the most clapped comments. Hopefully you enjoyed these summaries of these tech career paths. My hope is that you at least have a better understanding of the breadth of skills and knowledge it takes to release good tech to the world.

I will do another round of these career path overviews for the most clapped comments.

Liked what you read?

Read about how I went from being a broke English teacher in Japan to working at a top tech company in just a few years!

Do you need a computer science degree to get a job in tech?

Passing your first tech interview: how to prepare.

Swift vs. Objective-C. How do they compare?

One Friday this July, I got excited about McDonald's. So excited that I stopped at one before work in the morning and left with French fries and a coffee.

Fries for breakfast.

McDonald's had just announced that it would be giving out free medium fries every Friday with a minimum purchase of $1 through…

Do you use Apple Pay? Have you ever wondered how an Apple Pay transaction goes through? In this post, you will learn how Apple Pay works end to end.

Mobile payments have become very popular due to the convenience and the security they offer. No more plastic cards to carry around, and you do not have to worry about losing them (what a relief!).

In this article, I am going to discuss how Apple Pay works in general and how it works when it is used at a physical POS terminal, specifically. I’ll briefly discuss the security benefits as well.

Before diving in, let’s get familiar with some basic terminology.

Secure Element

A secure element (SE) is something that is mentioned when talking about Apple Pay, so we need to understand what it is.

According to Global Platform:

A Secure Element (SE) is a tamper-resistant platform (typically a one chip secure microcontroller) capable of securely hosting applications and their confidential and cryptographic data (e.g. key management) in accordance with the rules and security requirements set forth by a set of well-identified trusted authorities.

Apple Pay uses SE to store secret information associated with tokenized cards (we will talk about this later).

In the iPhones after iPhone 6, and in Apple Watch, an SE is embedded into the device’s near-field communication (NFC) chip. This is used at payment terminals to perform transactions over NFC. SE emulates a payment card during an Apple Pay transaction.

Tokenization

Tokenization as a process is being adopted more and more in the payments industry. Here we’ll try to understand the basics of Tokenization.

The following is a concise description from Wikipedia on Tokenization technology:

Tokenization, when applied to data security, is the process of substituting a sensitive data element with a non-sensitive equivalent, referred to as a token, that has no extrinsic or exploitable meaning or value. The token is a reference (i.e. identifier) that maps back to the sensitive data through a tokenization system. The mapping from original data to a token uses methods which render tokens infeasible to reverse in the absence of the tokenization system

In the context of credit cards and Apple Pay, tokenization is used to replace the Primary Account Number (PAN, or the credit card number) with a token. A token looks like a normal credit card number, but it’s not the original PAN. Tokenization stops the original card number from being used during transactions.

Tokens have no meaning by themselves and are worthless to criminals if a token is stolen. There is no algorithm to derive the Primary Account Number if you have a token. This makes it impossible for criminals to reverse engineer the Primary Account Number from a token.

Click here for the Wikipedia article on tokenization if you want to learn more.

The following diagram describes the transaction flow of Apple Pay. We will discuss these step by step in the coming sections.

ymedialabs.com

Adding a Card to Apple Pay

_[http://www.iphoneincanada.ca](http://www.iphoneincanada.ca" rel="noopener" target="blank" title=")

A card can be added to Apple Pay by either scanning the card or by submitting the card information. Then this information is submitted to Apple servers.

Apple sends the received card information to the relevant card network (Visa, MasterCard, AmericanExpress, Discover, and so on). Then the card network validates the card information with the issuing bank.

After the validation, the card network acting as a TSP (Token Service Provider) creates a token (which is called a DAN or a Device Account Number in the context of Apple Pay) and a token key. This DAN is generated using tokenization and is not the actual card number.

Afterward, this information is sent back to Apple servers. After the device receives this information from Apple servers, it is saved in the device’s secure element (SE).

Initiating a Transaction Using Apple Pay

support.apple.com

When you use your Apple device at a POS terminal to make a payment, the device communicates with the terminal to initiate a transaction. Apple Pay uses EMVCO’s contactless specification to communicate with the terminal. If the terminal does not support EMV contactless, Apple Pay falls back to use contactless MSD (magnetic stripe data) mode.

EMV Contactless mode

When EMV contactless mode is used, the Apple device communicates with the terminal according to the EMV contactless specification. The secure element on the device generates a dynamic cryptogram for each transaction using the token, token key, amount, and other information related to the transaction. This dynamic cryptogram is then sent to the payment processor along with the token (DAN), transaction amount, and other required information to process the transaction.

Contactless MSD mode

Contactless MSD exists to support terminals which are still not able to process using EMV contactless mode. Most of the terminals are still operating using contactless MSD mode. Let’s take a deeper look at how a transaction goes through using contactless MSD mode.

MSD, or Magnetic Stripe Data, is how older cards store card details. Data is stored as tracks in magnetic stripe cards. Magnetic stripe cards can have up to 3 tracks, and each track (track1, track2, track3) has a different format. Please click here for additional information on track data.

In Apple Pay contactless MSD mode, the track2 data format is used to transfer the card data to the payment processor which then communicates with the card network.

Let’s take a look at some example track data sent from a terminal to the processor for an Apple Pay transaction.

370295292756481=220672716078290600047

Above is an example of track data received from a terminal which was captured at a payment gateway.

Let’s understand this data segment by segment,

• Highlighted in yellow - This is the Device Account Number or the DAN (The example DAN here is from an AmericanExpress card. You can validate the bank identification number (BIN), or initial 6 digits in the credit card number, here).
• Highlighted in blue - This is the credit card expiry year and month(yy/mm)
• Highlighted in pink - This is the service code. Click here to understand more about this.
• Highlighted in purple - This part of data is discretionary to the card network. In case of Apple Pay, this is used as a dynamic card verification value (CVV).

We learned that in the EMV mode a dynamic cryptogram is generated. Here the dynamic CVV plays the role of the cryptogram. This is generated using the token key and other transaction-related data (similar to the generation of a dynamic cryptogram).

The track data shown above is sent to the acquirer along with the transaction amount. The acquirer forwards this information to the relevant card network (Visa, MasterCard, and so on ) based on the BIN.

Completion of an Apple Pay Transaction

When the card network receives the transaction request, it identifies whether it’s an actual card number or a tokenized card number. If it is tokenized (which is the case for Apple Pay transactions), the card network validates the cryptogram (or dynamic CVV) using their copy of the token key (the card network is acting as a TSP here).

After some other additional validations, the card network de-tokenizes the DAN and obtains the original PAN (primary account number).

This transaction request is sent to the issuer (the bank or the financial institution who issued the credit card) along with the original PAN. The issuer authorizes the transaction and sends back the response which eventually reaches the POS terminal.

Yay! Transaction complete!

support.apple.com

Replaying Transaction Requests

One of the biggest problems with the traditional card transactions is the ability to replay past transaction requests (replay attack). If you resend the same transaction request, another transaction would be done with the same data.

With Apple Pay, this does not happen (also when using EMV cards directly on the terminal as well). Every transaction request can only be used once. The dynamic cryptogram (dynamic CVV in MSD mode) ensures this. For each transaction, a new cryptogram is generated which can only be used once (and is only valid for a certain time period).

Conclusion

In this article, we have gone through an overview of the Apple Pay transaction flow. I will discuss Google Pay in a coming article.

References

• http://www.gmarwaha.com/blog/2015/01/03/apple-pay-an-attempt-to-demystify-take-2/
• https://www.emvco.com/emv-technologies/contactless/
• http://msrtron.com/blog-headlines/blog-card-data
• https://www.slideshare.net/bellidcom/what-is-a-token-service-provider-52887269

Before you go!

If you have enjoyed this article, claps are welcome!

Interested in learning JavaScript? Get my ebook at jshandbook.com

The Push API allows a web app to receive messages pushed by a server, even if the web app is not currently open in the browser or not running on the device.

The Push API is a recent addition to browser APIs, and it’s currently supported by Chrome (Desktop and Mobile), Firefox, and Opera since 2016.

IE and Edge do not support it yet, and Safari has its own implementation of it. Since Chrome and Firefox support it, approximately 60% of users browsing on their desktops have access to it, so it’s quite safe to use.

What can you do with it

You can send messages to your users, pushing them from the server to the client, even when the user is not browsing the site.

This lets you deliver notifications and content updates, giving you the ability to engage more with your audience.

This is huge, because one of the missing pillars of the mobile web, compared to native apps, used to be the ability to receive notifications, along with offline support.

How it works

When a user visits your web app, you can trigger a panel asking permission to send updates. A Service Worker is installed, and operates in the background listening for a Push Event.

Push and Notifications are two separate concepts and APIs. They’re sometimes mixed up because of the push notifications term used in iOS. Basically, the Notifications API is invoked when a push event is received using the Push API.

Your server sends the notification to the client, and the Service Worker, if given permission, receives a push event. The Service Worker reacts to this event by triggering a notification.

Getting the user’s permission

The first step in working with the Push API is getting the user’s permission to receive data from you.

Many sites implement this panel badly, showing it on the first page load. The user is not yet convinced your content is good, and they will deny the permission. So do it wisely.

There are six steps to getting permission from your user:

1. Check if Service Workers are supported
2. Check if the Push API is supported
3. Register a Service Worker
4. Request permission from the user
5. Subscribe the user and get the PushSubscription object
6. Send the PushSubscription object to your server

Let’s go through them one by one.

Check if Service Workers are supported

if (!('serviceWorker' in navigator)) {  // Service Workers are not supported. Return  return}

Check if the Push API is supported

if (!('PushManager' in window)) {  // The Push API is not supported. Return  return}

Register a Service Worker

This code registers the Service Worker located in the worker.js file placed in the domain root:

window.addEventListener('load', () => {  navigator.serviceWorker.register('/worker.js')  .then((registration) => {    console.log('Service Worker registration completed with scope: ',      registration.scope)  }, (err) => {    console.log('Service Worker registration failed', err)  })})

To know more about how Service Workers work in detail, check out the Service Workers guide.

Request permission from the user

Now that the Service worker is registered, you can request the permission.

The API to do this has changed over time, and it went from accepting a callback function as a parameter to returning a Promise, breaking the backward and forward compatibility. And note that we need to do both, as we don’t know which approach is implemented by the user’s browser.

The code is the following, calling Notification.requestPermission().

const askPermission = () => {  return new Promise((resolve, reject) => {    const permissionResult = Notification.requestPermission(      (result) => {        resolve(result)      }    )    if (permissionResult) {      permissionResult.then(resolve, reject)    }  })  .then((permissionResult) => {    if (permissionResult !== 'granted') {      throw new Error('Permission denied')    }  })}

The permissionResult value is a string, that can have the value of: - granted - default - denied

This code causes the browser to show the permission dialogue:

If the user clicks Block, you won’t be able to ask for the user’s permission any more, unless they manually go and unblock the site in an advanced settings panel in the browser (very unlikely to happen).

If the user gave us permission, we can subscribe them by calling registration.pushManager.subscribe().

const APP_SERVER_KEY = 'XXX'window.addEventListener('load', () => {  navigator.serviceWorker.register('/worker.js')  .then((registration) => {    askPermission().then(() => {      const options = {        userVisibleOnly: true,        applicationServerKey: urlBase64ToUint8Array(APP_SERVER_KEY)      }      return registration.pushManager.subscribe(options)    }).then((pushSubscription) => {      // we got the pushSubscription object    }  }, (err) => {    console.log('Service Worker registration failed', err)  })})

APP_SERVER_KEY is a string — called Application Server Key or VAPID key — that identifies the applications’s public key, part of a public / private key pair.

It will be used as part of the validation that, for security reasons, comes up to make sure you (and only you, not someone else) can send a push message back to the user.

Send the PushSubscription object to your server

In the previous snippet we got the pushSubscription object, which contains all we need to send a push message to the user. We need to send this information to our server so we’re able to send notifications later on.

We first create a JSON representation of the object

const subscription = JSON.stringify(pushSubscription)

and we can post it to our server using the Fetch API:

const sendToServer = (subscription) => {  return fetch('/api/subscription', {    method: 'POST',    headers: {      'Content-Type': 'application/json'    },    body: JSON.stringify(subscription)  })  .then((res) => {    if (!res.ok) {      throw new Error('An error occurred')    }    return res.json()  })  .then((resData) => {    if (!(resData.data && resData.data.success)) {      throw new Error('An error occurred')    }  })}sendToServer(subscription)

Server-side, the /api/subscription endpoint receives the POST request and can store the subscription information into its storage.

How the Server side works

So far we only talked about the client-side part: getting a user’s permission to be notified in the future.

What about the server? What should it do, and how should it interact with the client?

These server-side examples use Express.js as the base HTTP framework, but you can write a server-side Push API handler in any language or framework

Registering a new client subscription

When the client sends a new subscription, remember that we used the /api/subscription HTTP POST endpoint, sending the PushSubscription object details in JSON format, in the body.

We initialize Express.js:

const express = require('express')const app = express()

This utility function makes sure the request is valid and has a body and an endpoint property, otherwise it returns an error to the client:

const isValidSaveRequest = (req, res) => {  if (!req.body || !req.body.endpoint) {    res.status(400)    res.setHeader('Content-Type', 'application/json')    res.send(JSON.stringify({      error: {        id: 'no-endpoint',        message: 'Subscription must have an endpoint'      }    }))    return false  }  return true}

The next utility function saves the subscription to the database, returning a promise resolved when the insertion completed (or failed). The insertToDatabase function is a placeholder — we’re not going into those details here:

const saveSubscriptionToDatabase = (subscription) => {  return new Promise((resolve, reject) => {    insertToDatabase(subscription, (err, id) => {      if (err) {        reject(err)        return      }      resolve(id)    })  })}

We use those functions in the POST request handler below. We check if the request is valid, then we save the request and return a data.success: true response back to the client, or an error:

app.post('/api/subscription', (req, res) => {  if (!isValidSaveRequest(req, res)) {    return  }  saveSubscriptionToDatabase(req, res.body)  .then((subscriptionId) => {    res.setHeader('Content-Type', 'application/json')    res.send(JSON.stringify({ data: { success: true } }))  })  .catch((err) => {    res.status(500)    res.setHeader('Content-Type', 'application/json')    res.send(JSON.stringify({      error: {        id: 'unable-to-save-subscription',        message: 'Subscription received but failed to save it'      }    }))  })})app.listen(3000, () => {  console.log('App listening on port 3000')})

Sending a Push message

Now that the server has registered the client in its list, we can send it Push messages. Let’s see how that works by creating an example code snippet that fetches all subscriptions and sends a Push message to all of them at the same time.

We use a library because the Web Push protocol is complex, and a lib allows us to abstract away a lot of low level code that makes sure we can work safely and can correctly handle any edge case.

This example uses the web-push Node.js library to handle sending the Push message.

We first initialize the web-push lib, and we generate a tuple of private and public keys, and set them as the VAPID details:

const webpush = require('web-push')const vapidKeys = webpush.generateVAPIDKeys()const PUBLIC_KEY = 'XXX'const PRIVATE_KEY = 'YYY'const vapidKeys = {  publicKey: PUBLIC_KEY,  privateKey: PRIVATE_KEY}webpush.setVapidDetails(  'mailto:my@email.com',  vapidKeys.publicKey,  vapidKeys.privateKey)

Then we set up a triggerPush() method, responsible for sending the push event to a client. It just calls webpush.sendNotification() and catches any error. If the return error HTTP status code is 410, which means gone, we delete that subscriber from the database.

const triggerPush = (subscription, dataToSend) => {  return webpush.sendNotification(subscription, dataToSend)  .catch((err) => {    if (err.statusCode === 410) {      return deleteSubscriptionFromDatabase(subscription._id)    } else {      console.log('Subscription is no longer valid: ', err)    }  })}

We don’t implement getting the subscriptions from the database, but we leave it as a stub:

const getSubscriptionsFromDatabase = () => {  //stub}

The meat of the code is the callback of the POST request to the /api/push endpoint:

app.post('/api/push', (req, res) => {  return getSubscriptionsFromDatabase()  .then((subscriptions) => {    let promiseChain = Promise.resolve()    for (let i = 0; i < subscriptions.length; i++) {      const subscription = subscriptions[i]      promiseChain = promiseChain.then(() => {        return triggerPush(subscription, dataToSend)      })    }    return promiseChain  })  .then(() => {    res.setHeader('Content-Type', 'application/json')    res.send(JSON.stringify({ data: { success: true } }))  })  .catch((err) => {    res.status(500)    res.setHeader('Content-Type', 'application/json')    res.send(JSON.stringify({      error: {        id: 'unable-to-send-messages',        message: `Failed to send the push ${err.message}`      }    }))  })})

The above code gets all the subscriptions from the database, then it iterates on them, and it calls the triggerPush() function we explained before.

Once the subscriptions are done, we return a successful JSON response. Unless an error occurred, and then we return a 500 error.

In the real world…

It’s unlikely that you’ll set up your own Push server unless you have a very special use case, or you just want to learn the tech or you like to DIY.

Instead, you’ll usually want to use platforms such as OneSignal which transparently handle Push events to all kind of platforms, Safari and iOS included, for free.

Receive a Push event

When a Push event is sent from the server, how does the client get it?

It’s a normal JavaScript event listener, on the push event, which runs inside a Service Worker:

self.addEventListener('push', (event) => {  // data is available in event.data})

event.data contains the [PushMessageData](https://developer.mozilla.org/docs/Web/API/PushMessageData) object which exposes methods to retrieve the push data sent by the server, in the format you want:

• arrayBuffer() : as an ArrayBuffer object
• blob(): as a Blob object
• json(): parsed as JSON
• text(): plain text

You’ll normally use event.data.json().

Displaying a notification

Here we intersect a bit with the Notifications API, but for a good reason, as one of the main use cases of the Push API is to display notifications.

Inside our push event listener in the Service Worker, we need to display the notification to the user. We also need to tell the event to wait until the browser has shown it before the function can terminate. We extend the event lifetime until the browser has finished displaying the notification (until the promise has been resolved), otherwise the Service Worker could be stopped in the middle of your processing:

self.addEventListener('push', (event) => {  const promiseChain = self.registration.showNotification('Hey!')  event.waitUntil(promiseChain)})

Interested in learning JavaScript? Get my ebook at jshandbook.com