5 TIPS TO MAKE YOUR BRAND STORYTELLING MORE COMPELLING

Define what your brand is and what it stands for

Branding isn’t just about having a logo and a catchy slogan. In the digital age, it’s more important than ever to be clear on what your brand stands for, and how to communicate that message effectively.

There are some key steps when defining your brand to create an effective digital strategy. First, identify what is unique about you – what makes you stand out from the competition? Then think about who your target audience is and how you want them to perceive your brand.

Next, you have to define the values, tone of voice, and ideas that make up the essence of your brand. Finally, consider the platforms you need to get this message out there – content

strategies, social media channels, and any other marketing techniques should all be part of the mix.

Branding can seem like a daunting task, but once it’s done right, it provides you with a powerful way to drive customer engagement and build loyalty for years to come!

Identify your target audience and craft a story that appeals to them

When it comes to creating a successful digital strategy, branding is key. From the compelling visuals that you show to the captivating stories you tell, branding your digital presence starts with understanding whom your target audience is and what they need.

To do that right, start by making an assertive statement about who you want to include in your brand’s universe so you can create a meaningful universe of brand engagement. Then create a story or content idea that resonates and appeals directly to this audience – it should be tailored to their specific likes, needs, values, and behaviors.

Along the way, analyze how each brand story appeals to this target audience without losing sight of who your brand is. This will ensure that any brand story captivates and engages while remaining true to who you are as an organization. With this approach, there’s no telling where brand engagement might take your digital strategy!

Keep your brand storytelling simple

Brand storytelling should be the foundation of any good digital branding strategy. After all, if you want your brand to be remembered, what better way than creating a story that resonates with your target audience? However, it’s important not to overcomplicate things when creating your own brand stories.

While a beautifully crafted storyline can be impressive, sometimes the best stories are those that keep it simple. Focus on a small number of core themes and don’t try to cram too much into one story. Keep characters interesting and fresh, and use humor or clever analogies to keep readers engaged. Brand storytelling should be enjoyable and effortless – after all, you want the reader to easily recognize and remember your message long after they’ve finished reading it.

Simple stories are often much more effective in captivating consumers than complicated ones. So before you start crafting that masterpiece of a brand story, remind yourself to keep it short and sweet. Focus on the key facts about your product or service, add flavor where possible, and never underestimate the power of a good narrative! When in doubt, follow what Mother Nature already taught us: less is more.

Make sure your story is consistent across all channels

Brand storytelling is one of the most powerful tools for creating an emotional connection with your customers. But as more and more brands join the digital fray, it can be difficult to stand out from the competition. That’s why it’s important to ensure that your brand storytelling is consistent across all channels.

This type of holistic marketing approach requires a cohesive branding strategy across multiple platforms. From video content on YouTube to blog posts on websites and even brief messages on social media, each channel should feed into the same narrative strategically and harmoniously.

Brand storytelling is all about consistently communicating via different outlets, so make sure that your message—whether humorous, inspiring or educational—rings true no matter where customers encounter it first. With an informed digital strategy in place and expert execution, you’ll be well ahead of the game when it comes to boosting customer loyalty and engagement through consistent brand storytelling.

Use strong visuals to complement your story

Nowadays, brand storytelling goes beyond words alone. Digital marketing experts agree that strong visuals are essential for creating an impactful, engaging brand story. Brand photography, infographics, and even GIFs can all add character to your website and marketing materials. Not only will such visuals help you grab the attention of potential clients or customers, but they can also aid in conveying concepts in a more digestible way.

For grassroots companies trying to cut through the digital noise, visuals can help to separate them from the crowd, building a strong recognition for their branding and digital strategy. By taking advantage of visually appealing mediums to share stories about your brand, you’ll be able to capture the imagination of your viewers while keeping them engaged and informed.

Visuals can make the difference between a mediocre storytelling effort and a powerful one

– so don’t forget them when creating your unique brand story!

Be authentic

Brand storytelling is a powerful tool that can help companies reach their desired target audience. By weaving a narrative that resonates with the people you serve, you can create an intense connection between your business and those who matter most. However, it’s important to make sure that your story rings true and comes from the heart. Otherwise, it will lack the authentic energy and emotion needed to properly draw people in.

Brand storytelling should form an integral part of any business’s digital strategy. From consistent voice and messaging to vivid visual elements, your brand has to come across as

believable and genuine for a lasting impression on customers. A great story combined with an honest approach will be remembered long after any clever advertising campaigns are gone – so aim to focus on creating a bond with your audience through sincerity above all else!

Conclusion

Creating a brand story is an important part of building a successful business. After all, people are more likely to buy from brands that they feel a connection with. And while it may seem daunting at first, it doesn’t have to be complicated.

Just remember to keep it simple, be consistent, and stay true to your brand’s core values. Visuals can also help make your story more engaging, so don’t be afraid to use them! Lastly, and perhaps most importantly, make sure your story is authentic.

People can spot inauthenticity from a mile away, so if you’re not being genuine then you probably won’t win them over. Have you taken the time to craft a brand story for your business? If not, now might be the perfect time to start!

Website : https://www.krowmedia.com/sblogs/tips-make-your-brand-storytelling-compelling/

What is GEEK

Buddha Community

How to Add Splash Screen in Android and iOS with Flutter

When your app is opened, there is a brief time while the native app loads Flutter. By default, during this time, the native app displays a white splash screen. This package automatically generates iOS, Android, and Web-native code for customizing this native splash screen background color and splash image. Supports dark mode, full screen, and platform-specific options.

What's New

[BETA] Support for flavors is in beta. Currently only Android and iOS are supported. See instructions below.

You can now keep the splash screen up while your app initializes! No need for a secondary splash screen anymore. Just use the preserve and remove methods together to remove the splash screen after your initialization is complete. See details below.

Usage

Would you prefer a video tutorial instead? Check out Johannes Milke's tutorial.

First, add flutter_native_splash as a dependency in your pubspec.yaml file.

dependencies:
  flutter_native_splash: ^2.2.19

Don't forget to flutter pub get.

1. Setting the splash screen

 

Customize the following settings and add to your project's pubspec.yaml file or place in a new file in your root project folder named flutter_native_splash.yaml.

flutter_native_splash:
  # This package generates native code to customize Flutter's default white native splash screen
  # with background color and splash image.
  # Customize the parameters below, and run the following command in the terminal:
  # flutter pub run flutter_native_splash:create
  # To restore Flutter's default white splash screen, run the following command in the terminal:
  # flutter pub run flutter_native_splash:remove

  # color or background_image is the only required parameter.  Use color to set the background
  # of your splash screen to a solid color.  Use background_image to set the background of your
  # splash screen to a png image.  This is useful for gradients. The image will be stretch to the
  # size of the app. Only one parameter can be used, color and background_image cannot both be set.
  color: "#42a5f5"
  #background_image: "assets/background.png"

  # Optional parameters are listed below.  To enable a parameter, uncomment the line by removing
  # the leading # character.

  # The image parameter allows you to specify an image used in the splash screen.  It must be a
  # png file and should be sized for 4x pixel density.
  #image: assets/splash.png

  # The branding property allows you to specify an image used as branding in the splash screen.
  # It must be a png file. It is supported for Android, iOS and the Web.  For Android 12,
  # see the Android 12 section below.
  #branding: assets/dart.png

  # To position the branding image at the bottom of the screen you can use bottom, bottomRight,
  # and bottomLeft. The default values is bottom if not specified or specified something else.
  #branding_mode: bottom

  # The color_dark, background_image_dark, image_dark, branding_dark are parameters that set the background
  # and image when the device is in dark mode. If they are not specified, the app will use the
  # parameters from above. If the image_dark parameter is specified, color_dark or
  # background_image_dark must be specified.  color_dark and background_image_dark cannot both be
  # set.
  #color_dark: "#042a49"
  #background_image_dark: "assets/dark-background.png"
  #image_dark: assets/splash-invert.png
  #branding_dark: assets/dart_dark.png

  # Android 12 handles the splash screen differently than previous versions.  Please visit
  # https://developer.android.com/guide/topics/ui/splash-screen
  # Following are Android 12 specific parameter.
  android_12:
    # The image parameter sets the splash screen icon image.  If this parameter is not specified,
    # the app's launcher icon will be used instead.
    # Please note that the splash screen will be clipped to a circle on the center of the screen.
    # App icon with an icon background: This should be 960×960 pixels, and fit within a circle
    # 640 pixels in diameter.
    # App icon without an icon background: This should be 1152×1152 pixels, and fit within a circle
    # 768 pixels in diameter.
    #image: assets/android12splash.png

    # Splash screen background color.
    #color: "#42a5f5"

    # App icon background color.
    #icon_background_color: "#111111"

    # The branding property allows you to specify an image used as branding in the splash screen.
    #branding: assets/dart.png

    # The image_dark, color_dark, icon_background_color_dark, and branding_dark set values that
    # apply when the device is in dark mode. If they are not specified, the app will use the
    # parameters from above.
    #image_dark: assets/android12splash-invert.png
    #color_dark: "#042a49"
    #icon_background_color_dark: "#eeeeee"

  # The android, ios and web parameters can be used to disable generating a splash screen on a given
  # platform.
  #android: false
  #ios: false
  #web: false

  # Platform specific images can be specified with the following parameters, which will override
  # the respective parameter.  You may specify all, selected, or none of these parameters:
  #color_android: "#42a5f5"
  #color_dark_android: "#042a49"
  #color_ios: "#42a5f5"
  #color_dark_ios: "#042a49"
  #color_web: "#42a5f5"
  #color_dark_web: "#042a49"
  #image_android: assets/splash-android.png
  #image_dark_android: assets/splash-invert-android.png
  #image_ios: assets/splash-ios.png
  #image_dark_ios: assets/splash-invert-ios.png
  #image_web: assets/splash-web.png
  #image_dark_web: assets/splash-invert-web.png
  #background_image_android: "assets/background-android.png"
  #background_image_dark_android: "assets/dark-background-android.png"
  #background_image_ios: "assets/background-ios.png"
  #background_image_dark_ios: "assets/dark-background-ios.png"
  #background_image_web: "assets/background-web.png"
  #background_image_dark_web: "assets/dark-background-web.png"
  #branding_android: assets/brand-android.png
  #branding_dark_android: assets/dart_dark-android.png
  #branding_ios: assets/brand-ios.png
  #branding_dark_ios: assets/dart_dark-ios.png

  # The position of the splash image can be set with android_gravity, ios_content_mode, and
  # web_image_mode parameters.  All default to center.
  #
  # android_gravity can be one of the following Android Gravity (see
  # https://developer.android.com/reference/android/view/Gravity): bottom, center,
  # center_horizontal, center_vertical, clip_horizontal, clip_vertical, end, fill, fill_horizontal,
  # fill_vertical, left, right, start, or top.
  #android_gravity: center
  #
  # ios_content_mode can be one of the following iOS UIView.ContentMode (see
  # https://developer.apple.com/documentation/uikit/uiview/contentmode): scaleToFill,
  # scaleAspectFit, scaleAspectFill, center, top, bottom, left, right, topLeft, topRight,
  # bottomLeft, or bottomRight.
  #ios_content_mode: center
  #
  # web_image_mode can be one of the following modes: center, contain, stretch, and cover.
  #web_image_mode: center

  # The screen orientation can be set in Android with the android_screen_orientation parameter.
  # Valid parameters can be found here:
  # https://developer.android.com/guide/topics/manifest/activity-element#screen
  #android_screen_orientation: sensorLandscape

  # To hide the notification bar, use the fullscreen parameter.  Has no effect in web since web
  # has no notification bar.  Defaults to false.
  # NOTE: Unlike Android, iOS will not automatically show the notification bar when the app loads.
  #       To show the notification bar, add the following code to your Flutter app:
  #       WidgetsFlutterBinding.ensureInitialized();
  #       SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom, SystemUiOverlay.top]);
  #fullscreen: true

  # If you have changed the name(s) of your info.plist file(s), you can specify the filename(s)
  # with the info_plist_files parameter.  Remove only the # characters in the three lines below,
  # do not remove any spaces:
  #info_plist_files:
  #  - 'ios/Runner/Info-Debug.plist'
  #  - 'ios/Runner/Info-Release.plist'

2. Run the package

After adding your settings, run the following command in the terminal:

flutter pub run flutter_native_splash:create

When the package finishes running, your splash screen is ready.

To specify the YAML file location just add --path with the command in the terminal:

flutter pub run flutter_native_splash:create --path=path/to/my/file.yaml

3. Set up app initialization (optional)

By default, the splash screen will be removed when Flutter has drawn the first frame. If you would like the splash screen to remain while your app initializes, you can use the preserve() and remove() methods together. Pass the preserve() method the value returned from WidgetsFlutterBinding.ensureInitialized() to keep the splash on screen. Later, when your app has initialized, make a call to remove() to remove the splash screen.

import 'package:flutter_native_splash/flutter_native_splash.dart';

void main() {
  WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
  FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);
  runApp(const MyApp());
}

// whenever your initialization is completed, remove the splash screen:
    FlutterNativeSplash.remove();

NOTE: If you do not need to use the preserve() and remove() methods, you can place the flutter_native_splash dependency in the dev_dependencies section of pubspec.yaml.

4. Support the package (optional)

If you find this package useful, you can support it for free by giving it a thumbs up at the top of this page. Here's another option to support the package:

Android 12+ Support

Android 12 has a new method of adding splash screens, which consists of a window background, icon, and the icon background. Note that a background image is not supported.

Be aware of the following considerations regarding these elements:

1: image parameter. By default, the launcher icon is used:

• App icon without an icon background, as shown on the left: This should be 1152×1152 pixels, and fit within a circle 768 pixels in diameter.
• App icon with an icon background, as shown on the right: This should be 960×960 pixels, and fit within a circle 640 pixels in diameter.

2: icon_background_color is optional, and is useful if you need more contrast between the icon and the window background.

3: One-third of the foreground is masked.

4: color the window background consists of a single opaque color.

PLEASE NOTE: The splash screen may not appear when you launch the app from Android Studio on API 31. However, it should appear when you launch by clicking on the launch icon in Android. This seems to be resolved in API 32+.

PLEASE NOTE: There are a number of reports that non-Google launchers do not display the launch image correctly. If the launch image does not display correctly, please try the Google launcher to confirm that this package is working.

PLEASE NOTE: The splash screen does not appear when you launch the app from a notification. Apparently this is the intended behavior on Android 12: core-splashscreen Icon not shown when cold launched from notification.

Flavor Support

If you have a project setup that contains multiple flavors or environments, and you created more than one flavor this would be a feature for you.

Instead of maintaining multiple files and copy/pasting images, you can now, using this tool, create different splash screens for different environments.

Pre-requirements

In order to use the new feature, and generate the desired splash images for you app, a couple of changes are required.

If you want to generate just one flavor and one file you would use either options as described in Step 1. But in order to setup the flavors, you will then be required to move all your setup values to the flutter_native_splash.yaml file, but with a prefix.

Let's assume for the rest of the setup that you have 3 different flavors, Production, Acceptance, Development.

First this you will need to do is to create a different setup file for all 3 flavors with a suffix like so:

flutter_native_splash-production.yaml
flutter_native_splash-acceptance.yaml
flutter_native_splash-development.yaml

You would setup those 3 files the same way as you would the one, but with different assets depending on which environment you would be generating. For example (Note: these are just examples, you can use whatever setup you need for your project that is already supported by the package):

# flutter_native_splash-development.yaml
flutter_native_splash:
  color: "#ffffff"
  image: assets/logo-development.png
  branding: assets/branding-development.png
  color_dark: "#121212"
  image_dark: assets/logo-development.png
  branding_dark: assets/branding-development.png

  android_12:
    image: assets/logo-development.png
    icon_background_color: "#ffffff"
    image_dark: assets/logo-development.png
    icon_background_color_dark: "#121212"

  web: false

# flutter_native_splash-acceptance.yaml
flutter_native_splash:
  color: "#ffffff"
  image: assets/logo-acceptance.png
  branding: assets/branding-acceptance.png
  color_dark: "#121212"
  image_dark: assets/logo-acceptance.png
  branding_dark: assets/branding-acceptance.png

  android_12:
    image: assets/logo-acceptance.png
    icon_background_color: "#ffffff"
    image_dark: assets/logo-acceptance.png
    icon_background_color_dark: "#121212"

  web: false

# flutter_native_splash-production.yaml
flutter_native_splash:
  color: "#ffffff"
  image: assets/logo-production.png
  branding: assets/branding-production.png
  color_dark: "#121212"
  image_dark: assets/logo-production.png
  branding_dark: assets/branding-production.png

  android_12:
    image: assets/logo-production.png
    icon_background_color: "#ffffff"
    image_dark: assets/logo-production.png
    icon_background_color_dark: "#121212"

  web: false

Great, now comes the fun part running the new command!

The new command is:

# If you have a flavor called production you would do this:
flutter pub run flutter_native_splash:create --flavor production

# For a flavor with a name staging you would provide it's name like so:
flutter pub run flutter_native_splash:create --flavor staging

# And if you have a local version for devs you could do that:
flutter pub run flutter_native_splash:create --flavor development

Android setup

You're done! No, really, Android doesn't need any additional setup.

Note: If it didn't work, please make sure that your flavors are named the same as your config files, otherwise the setup will not work.

iOS setup

iOS is a bit tricky, so hang tight, it might look scary but most of the steps are just a single click, explained as much as possible to lower the possibility of mistakes.

When you run the new command, you will need to open xCode and follow the steps bellow:

Assumption

• In order for this setup to work, you would already have 3 different schemes setup; production, acceptance and development.

Preparation

• Open the iOS Flutter project in Xcode (open the Runner.xcworkspace)
• Find the newly created Storyboard files at the same location where the original is {project root}/ios/Runner/Base.lproj
• Select all of them and drag and drop into Xcode, directly to the left hand side where the current LaunchScreen.storyboard is located already
• After you drop your files there Xcode will ask you to link them, make sure you select 'Copy if needed'
• This part is done, you have linked the newly created storyboards in your project.

xCode

Xcode still doesn't know how to use them, so we need to specify for all the current flavors (schemes) which file to use and to use that value inside the Info.plist file.

• Open the iOS Flutter project in Xcode (open the Runner.xcworkspace)
• Click the Runner project in the top left corner (usually the first item in the list)
• In the middle part of the screen, on the left side, select the Runner target
• On the top part of the screen select Build Settings
• Make sure that 'All' and 'Combined' are selected
• Next to 'Combine' you have a '+' button, press it and select 'Add User-Defined Setting'
• Once you do that Xcode will create a new variable for you to name. Suggestion is to name it LAUNCH_SCREEN_STORYBOARD
• Once you do that, you will have the option to define a specific name for each flavor (scheme) that you have defined in the project. Make sure that you input the exact name of the LaunchScreen.storyboard that was created by this tool
  • Example: If you have a flavor Development, there is a Storyboard created name LaunchScreenDevelopment.storyboard, please add that name (without the storyboard part) to the variable value next to the flavor value
• After you finish with that, you need to update Info.plist file to link the newly created variable so that it's used correctly
• Open the Info.plist file
• Find the entry called 'Launch screen interface file base name'
• The default value is 'LaunchScreen', change that to the variable name that you create previously. If you follow these steps exactly, it would be LAUNCH_SCREEN_STORYBOARD, so input this $(LAUNCH_SCREEN_STORYBOARD)
• And your done!

Congrats you finished your setup for multiple flavors,

FAQs

I got the error "A splash screen was provided to Flutter, but this is deprecated."

This message is not related to this package but is related to a change in how Flutter handles splash screens in Flutter 2.5. It is caused by having the following code in your android/app/src/main/AndroidManifest.xml, which was included by default in previous versions of Flutter:

<meta-data
 android:name="io.flutter.embedding.android.SplashScreenDrawable"
 android:resource="@drawable/launch_background"
 />

The solution is to remove the above code. Note that this will also remove the fade effect between the native splash screen and your app.

Are animations/lottie/GIF images supported?

Not at this time. PRs are always welcome!

I got the error AAPT: error: style attribute 'android:attr/windowSplashScreenBackground' not found

This attribute is only found in Android 12, so if you are getting this error, it means your project is not fully set up for Android 12. Did you update your app's build configuration?

I see a flash of the wrong splash screen on iOS

This is caused by an iOS splash caching bug, which can be solved by uninstalling your app, powering off your device, power back on, and then try reinstalling.

I see a white screen between splash screen and app

1. It may be caused by an iOS splash caching bug, which can be solved by uninstalling your app, powering off your device, power back on, and then try reinstalling.
2. It may be caused by the delay due to initialization in your app. To solve this, put any initialization code in the removeAfter method.

Can I base light/dark mode on app settings?

No. This package creates a splash screen that is displayed before Flutter is loaded. Because of this, when the splash screen loads, internal app settings are not available to the splash screen. Unfortunately, this means that it is impossible to control light/dark settings of the splash from app settings.

Notes

If the splash screen was not updated correctly on iOS or if you experience a white screen before the splash screen, run flutter clean and recompile your app. If that does not solve the problem, delete your app, power down the device, power up the device, install and launch the app as per this StackOverflow thread.

This package modifies launch_background.xml and styles.xml files on Android, LaunchScreen.storyboard and Info.plist on iOS, and index.html on Web. If you have modified these files manually, this plugin may not work properly. Please open an issue if you find any bugs.

How it works

Android

• Your splash image will be resized to mdpi, hdpi, xhdpi, xxhdpi and xxxhdpi drawables.
• An <item> tag containing a <bitmap> for your splash image drawable will be added in launch_background.xml
• Background color will be added in colors.xml and referenced in launch_background.xml.
• Code for full screen mode toggle will be added in styles.xml.
• Dark mode variants are placed in drawable-night, values-night, etc. resource folders.

iOS

• Your splash image will be resized to @3x and @2x images.
• Color and image properties will be inserted in LaunchScreen.storyboard.
• The background color is implemented by using a single-pixel png file and stretching it to fit the screen.
• Code for hidden status bar toggle will be added in Info.plist.

Web

• A web/splash folder will be created for splash screen images and CSS files.
• Your splash image will be resized to 1x, 2x, 3x, and 4x sizes and placed in web/splash/img.
• The splash style sheet will be added to the app's web/index.html, as well as the HTML for the splash pictures.

Acknowledgments

This package was originally created by Henrique Arthur and it is currently maintained by Jon Hanson.

Bugs or Requests

If you encounter any problems feel free to open an issue. If you feel the library is missing a feature, please raise a ticket. Pull request are also welcome.

---

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add flutter_native_splash

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  flutter_native_splash: ^2.2.19

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:flutter_native_splash/flutter_native_splash.dart';

---

example/lib/main.dart

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

void main() {
  WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
  FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      // This call to setState tells the Flutter framework that something has
      // changed in this State, which causes it to rerun the build method below
      // so that the display can reflect the updated values. If we changed
      // _counter without calling setState(), then the build method would not be
      // called again, and so nothing would appear to happen.
      _counter++;
    });
  }

  @override
  void initState() {
    super.initState();
    initialization();
  }

  void initialization() async {
    // This is where you can initialize the resources needed by your app while
    // the splash screen is displayed.  Remove the following example because
    // delaying the user experience is a bad design practice!
    // ignore_for_file: avoid_print
    print('ready in 3...');
    await Future.delayed(const Duration(seconds: 1));
    print('ready in 2...');
    await Future.delayed(const Duration(seconds: 1));
    print('ready in 1...');
    await Future.delayed(const Duration(seconds: 1));
    print('go!');
    FlutterNativeSplash.remove();
  }

  @override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: Column(
          // Column is also a layout widget. It takes a list of children and
          // arranges them vertically. By default, it sizes itself to fit its
          // children horizontally, and tries to be as tall as its parent.
          //
          // Invoke "debug painting" (press "p" in the console, choose the
          // "Toggle Debug Paint" action from the Flutter Inspector in Android
          // Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
          // to see the wireframe for each widget.
          //
          // Column has various properties to control how it sizes itself and
          // how it positions its children. Here we use mainAxisAlignment to
          // center the children vertically; the main axis here is the vertical
          // axis because Columns are vertical (the cross axis would be
          // horizontal).
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

Download Details:
 

Author: jonbhanson
Download Link: Download The Source Code
Official Website: https://github.com/jonbhanson/flutter_native_splash 
License: MIT license

#flutter #ios #android 

Employer Branding Guide: Tips to Develop the Best Employer Branding Strategy for 2021

We have penned down this article to cover virtually everything there is to know about employer branding, such as its benefits, how to measure it, how can you improve it, and some coverage on top global companies using market-leading employer branding strategies.

To know more about this refer-

https://blog.digitalogy.co/employer-branding-strategy/

#best employer branding #best employer branding strategy for 2021 #employer branding #, employer branding 2021 #employer branding and recruitment #employer branding best practices

5 Top Web Design and Development Tips for an Awesome Web App

First impression is the last impression. This statement is absolutely correct when we talk about web design and development. In this blog, let us talk about the tips for a great web web app.

Web application development has come a long way since the beginning of the World Wide Web. The web environment today uses HTML and CSS to view data and content to users while JavaScript is used to interact with the client.

Did you know that when a visitor arrives on your website, you have about five seconds (or less) to capture their attention and keep them where they are? That’s not a whole lot of time to impress someone, so if your load time is not perfect or your site’s navigation is all over the place, you can say goodbye to your visitors.

Believe it or not, the rapidly changing world of technology is not helping with this, either. New trends can easily make your website outdated and render it all but useless, leaving you with fewer visitors than you started with.

So, now the below questions arise:

How are you supposed to fix this issue and keep your visitors?

How do you create a website that looks good, functions perfectly, and communicates your message clearly?

Developers and designers have various approaches to improve web design. Regardless of whether you have a perfect, smooth, and proficient site, that doesn’t mean it will suitable always.

You ought to consistently consider site improvement thoughts as time passes by.

Read the full blog here

Web design company in India

#web-design-tips #web-designing-tips #website-design-tips #website-designing-tips #web-development-tips

Magento Ecommerce SEO Best Practices

Running a business online? Well, I have come across many of you who bend back and forth trying to up their game by hiring a relevant Magento development company and further following the best SEO practices. Fortunately, we are living in an era where you can find a plethora of methods or ways to enhance their SEO procedures. The following post acts as a perfect guide that can assist you in enhancing your SEO tactics/strategies and help you to up your game.

Why is there a need for SEO for eCommerce? 1
How is SEO beneficial for your eCommerce Store? 2
#1 Generate Sustainable Traffic 2
#2 Drives Brand Awareness 3
#3 Amazing Customer Experience 3
#4 Free 3
#5 Capturing the Long Tail Keywords 4

Magento Ecommerce SEO Best Practices 4
#1 Duplicate Content 6
#2 Keeping your store Up-to-Date 7
#3 Enhance the Website Speed 7
#4 Check the Magento SEO URLs 8
#5 Optimize Product Images 9
Final Thoughts 9

Why is there a need for SEO for eCommerce?

Do you think that SEO is a mere method of producing a high amount of traffic? Well, to be precise SEO is way more than you think. Striving hard to compete in today’s insanely tricky and competitive world is a bit kind of a challenge, especially after the COVID pandemic. So what exactly is SEO? Well, it is short-term known for Search Engine Optimization. The process of increasing traffic visiting a website by gaining a higher position in comparison to the previous one. Originally, SEO was supposed to attract as many visitors as possible.

Now, whenever you try surfing the internet to look for specific information, I am sure you must come across several options, some of which are the best while others are not in the Search Engine Result Pages (SERPs). In other words, the high position of the website means more possibility of visitors visiting and becoming your regular customers. Further, I would like to mention the pros of considering SEO for your eCommerce store.

We are residing in an era where there’s a race for increasing visitors, traffic and revenue and an organic search can be pretty much of help here.

How is SEO beneficial for your eCommerce Store?

Even today, Search Engine Optimization is overlooked as a highly crucial aspect of eCommerce business marketing strategy. However, here below I would like to mention several benefits offered by SEO. Read Away!

#1 Generate Sustainable Traffic

One of the obvious benefits of considering SEO is generating a sustainable amount of traffic. There are several methods available such as paid social media, and search engine ads that can certainly assist in driving tons and tons of visitors in an extremely short span of time. You see, maintaining such an impressive amount of traffic is tricky and all the paid methods are pretty expensive. I mean here you have to keep paying the ad provider again and again. And over time, you might have to pay more to drive volume with the increase in competition.

In fact, hereby incorporating the best SEO strategies, you will be able to create a more sustainable level of traffic. You see, most SEO investments tend to happen right at the beginning of the process and can certainly offer long-lasting results. At the same time, it is extremely important to keep the content well up to date and the website keeps on running smoothly. Learn more regaring content marketing.

#2 Drives Brand Awareness

In today’s scenario, making people well-aware of your brand is very important and SEO offers a great amount of help in doing so. In fact, it turns out to be the sure-shot way for low-cost brand awareness. I mean if your website gets to appear on the very first page of Google, there is a 100% chance for people looking for a particular product ending up stumbling on your website and even buying the product.

Such kinds of rankings can also turn out to be endorsements which do visitors click on and keep the brand in mind while making the final decision. Without a doubt, top ranking is one of the most powerful positions to be in and unlike your competitors you aren’t falling short here.

#3 Amazing Customer Experience

When you end up ranking on the top of the SERPs, it becomes pretty easy for customers to visit your store. Also, this without a doubt increases the buying chances. In fact, according to several stats, almost all the users don’t even bother looking at the websites that are listed on the second page of Google. So ranking on the first page of Google turns out to be a must.

Now tell me something: do you remember URLs? Of course, not! What we generally do is we simply google things and then view websites or stores ranking on the first page of the search result. Not to mention if the website is already ranked on the first page it means that it is the best in terms of navigation, content quality, high-quality images, and whatnot! As a result, an amazing customer experience can be expected here.

#4 Free
The next advantage of considering SEO for your eCommerce store is that it is available for free. Unlike PPC ads or social ads or search engine ads, you don’t have to pay whether it might work wonders for you or not. All you have to do is follow some of the best SEO practices that earn you a great source of traffic without the requirement of paying any kind of upfront costs. Though you may not spend extravagantly on SEO, you can hire a team of SEO experts at a reasonable price who carry an immense amount of experience ranking eCommerce stores by boosting search engine rankings.

#5 Capturing the Long Tail Keywords

Another crucial advantage of considering SEO for your eCommerce store is that it captures the long-tail keyword. You see 15% of search engine queries are new and unique and a long tail keyword strategy is the implication of these queries within the content and presents it seamlessly that it successfully covers at a higher rate.

Although, eCommerce sites are typically well-structured in such a way that they do end up targeting those long-term searches. For example, first, you look for clothing rather than women’s clothing, then dresses, jumpsuits, pants, jeans, tops, t-shirts, shirts and whatnot! Similarly, an eCommerce store follows the same path, so if you have the keyword “women dresses” Jeans for Women” then the end user can directly land up on your site. Here all you have to do is opt for a robust and scalable SEO strategy.

I can simply go on and on when it comes to the benefits of eCommerce SEO such as building trust, increasing sales, expanding remarketing audiences, increasing site usability, fast loading speed, etc. eCommerce SEO is a growing trend and not making the most of it means you might have a lot to lose. Further, I would like to mention some of the best Magento eCommerce SEO practices to take into account.

Magento Ecommerce SEO Best Practices

When we use the word eCommerce, Magento is something that automatically comes to your mind. Why so? Because Magento and eCommerce are like chocolate and peanut butter, they can make incredible taste when merged. In fact, there are a plethora of reasons such as power, security and customizability why Magento is a go-to platform for retailers planning to strengthen their online presence. Now I am sure you must have come across the term Magento SEO. Well, it is a set of SEO adjustments that are unique and never heard of before. In fact, Magento turns out to be more like a blessing in disguise for SEO as it incorporates some of the most amazing features such as robots.txt file, sitemap.xml, etc.

To come up with a strong technical foundation you need:
● Great URL Structure
● Meta information
● Headings
● Faceted Navigation
● Crawling and Indexing
● Site Speed
● HTTPS

In order to rank your Magento store well, especially through the organic search results, there are certain aspects you must take into consideration. Yes, I am talking about the three pillars:

1. Technology – A strong technical foundation of the website can certainly assist search engines in finding and understanding your site as soon and as effectively as possible.
2. Relevance – Is your content relevant to the search query? For that, you have to make sure that you end up creating content that’s useful and satisfying for the end users.
3. Authority – Try to build trust by adding as many links as you can to your website.

It may quite interest you to know that doing SEO for a typical website is far easier than doing that of an eCommerce store featuring hundreds and thousands of page listings or product listings. Fret not, here down below I would like to mention some of the most intimidating SEO tips that must be taken into account for the betterment of your eCommerce store.

#1 Duplicate Content

What exactly is duplicate content? Now I am sure you must have seen similar content over the internet. I mean two websites having the same heading, title, paras, images basically everything seems to be extremely identical. Can you spot which one is original and which one is copied? Now what happens is when multiple versions are similar to each other, it becomes way difficult for search engines to distinguish between the two. And that’s the reason why search engines rarely tend to display the duplicate pages in the search engine rankings. You must be wondering whether the duplication can harm SEO. Well, of course, it does and in many ways!

One of the obvious ways is that duplicate content can result in high penalties leading to harming your page rankings and organic traffic. You see search engines in such cases tend to determine which version is more relatable to the query of the audience and then give a specific rank. Though there is no denying the fact that duplicate content can severely dilute link equity and credibility.

I have come across many of you who have this question, can this be visible to the naked eyes? Well, not really because duplication is hidden in the code of the site so you need software to check things precisely. Best practices to combat duplicate content are:

● 301 redirect
● Make use of Meta Robot Tags
● Make relevant changes in Meta Title Tags
● Use Canonical tag
● Eliminate pages

Mainly duplicate content issues occur in pages such as product filtering, product sorting, pagination, the same product in different categories, variation of a similar product and so forth.

#2 Keeping your store Up-to-Date

Another crucial tip to take into account is keeping your Magento store up to date. Now since you have already developed an intimidating Magento store but not keeping it up-to-date means you won’t get desired results and keep your customers hooked for a long period of time. Of course, Magento development is very crucial but what’s more crucial is to maintain the website. Here’s how!

● Analyze website performance – You have to keep examining the overall performance of the website day in and day out. Fortunately, there are a wide range of magento tools available that may assist you well in analyzing the website. So that you can beware of negative clicks, visits, bounce rate, search queries and whatnot!

● Website speed – With an increasingly short attention span of users, website owners these days must keep severe track of the speed of the website. If the website doesn’t load within three seconds then your customers are more likely to shift to your competitors.

● Regular updates – Fresh and relevant information are favored by all and your end users are certainly not an exception here. So try rewriting your website at regular intervals to keep your users stay relevant and on top of Google.

Here you do have a choice. You can either update things manually through a system upgrade or else seek assistance from a relevant Magento development company which offers seamless maintenance.

#3 Enhance the Website Speed

The next step that needs to be taken into consideration is enhancing the website speed. The slow loading speed can be quite discouraging and tiresome. Now, first of all, let us understand why this happens in the first place. One of the obvious reasons for slow loading speed include not meeting the system requirements, making use of inappropriate extensions, MySQL, NGINX, and PHP configurations not optimized, disabling caching, use of slow hardware and whatnot!

Further, I would like to mention a few ways through which you can speed up your Magento store.

● Update regularly – When a different version is released then you need to know that it is astronomical. And the same goes for every other technology available. You see developers in the Magento community tend to strive extremely hard to make the latest version secure, robust and scalable to a great extent. So don’t miss out on the big update, you never know it can be way more useful.
● Optimize your database – Databases tend to store data in one location. Now what happens when the data is poorly optimized, it takes way longer to server requests. As a result, this surely reflects in performance.
● Enable Magento Cache Management – Now let’s take a situation where you are sending an invite to around 1000 people. Now when you do it manually, it takes a hell lot of time and effort. How about sending bulk emails too?
○ Create a copy of your site in the local cache
○ Magento returns the copy instead of recreating a new site

Also, make this a regular habit of the site audit. Right from adding the relevant amount of pages to getting notified if the website speed gets slow make use of the website audit tool to identify relevant issues such as broken links, SSL errors, lack of mobile optimization and whatnot!

#4 Check the Magento SEO URLs

Another interesting tip to take into account is keeping tabs on Magento SEO URLs and seeing whether they are SEO-friendly or not. One of the most amazing features offered by Magento was that it enabled the end users to edit their product URLs freely. Yes, in other words, it is extremely easy to make relevant changes to all the links, especially the ones which are in regard to the product categories, and CMS pages. In other words, you no longer have to worry about 440 errors or missing content here.

Some of the best and most common examples to consider:
● website.com/category/
● website.com/category/sub-category/
● website.com/category-sub-category/product-name/

#5 Optimize Product Images

Another crucial step to take into account is to optimize product images. By doing so you can conduct better search rankings. Now you must be wondering what image optimization is. Well, it is all about reducing the file size of your image and all this happens without sacrificing quality. Here’s how you can do so!

● Name image descriptively – You will be listing hundreds and thousands of products so don’t keep the default names given by the camera. Try to incorporate relevant keywords so that when the crawler goes through your file names, it finds them relevant. Take a deep look at the website analytics and relevant keyword patterns and then make crucial decisions here.

● Choosing image dimensions – Now since you are creating an eCommerce store, of course, you have to show the product from different angles. For example, the back, the front, the interiors, engines and whatnot! In addition, do not forget to add a relevant description so that potential users end up landing on your website.

● Reduce the file size – As mentioned earlier, the attention span is pretty much less and your eCommerce store not loading in a span of 3 seconds means you are losing out on your potential customers. It may also interest you to know that Google uses page load time as one of the crucial ranking factors.

And that’s all for now!

Final Thoughts

Though SEO is one of the most conventional and traditional approaches, there are numerous new and quick options such as paid ads, social media ads, and emails, that can offer immediate returns. However, on the contrary, investing or hiring a reliable SEO agency might not provide immediate returns but it certainly can be a slow yet sustainable path to achieve growth in the long run. Take certain aspects such as keyword selection, content creation, and tech SEO in mind and do try investing in opportunities that are within your reach.

It doesn’t matter whether you are a techie or a non-techie, but you have to be realistic knowing that SEO strategy won’t be an overnight success – it may take weeks, months and even a year but have faith that one day your eCommerce store will be found on the top search rankings. Stay motivated, and keep going because that’s the only way we move forward.

I hope you did find the following post meaningful. If so feel free to share this among your peers and do help us in spreading the word.

Original Source: [HERE]

Substrate Knowledge Map For Hackathon Participants

Substrate Knowledge Map for Hackathon Participants

The Substrate Knowledge Map provides information that you—as a Substrate hackathon participant—need to know to develop a non-trivial application for your hackathon submission.

The map covers 6 main sections:

1. Introduction
2. Basics
3. Preliminaries
4. Runtime Development
5. Polkadot JS API
6. Smart Contracts

Each section contains basic information on each topic, with links to additional documentation for you to dig deeper. Within each section, you'll find a mix of quizzes and labs to test your knowledge as your progress through the map. The goal of the labs and quizzes is to help you consolidate what you've learned and put it to practice with some hands-on activities.

Introduction

One question we often get is why learn the Substrate framework when we can write smart contracts to build decentralized applications?

The short answer is that using the Substrate framework and writing smart contracts are two different approaches.

Smart contract development

Traditional smart contract platforms allow users to publish additional logic on top of some core blockchain logic. Since smart contract logic can be published by anyone, including malicious actors and inexperienced developers, there are a number of intentional safeguards and restrictions built around these public smart contract platforms. For example:

Fees: Smart contract developers must ensure that contract users are charged for the computation and storage they impose on the computers running their contract. With fees, block creators are protected from abuse of the network.

Sandboxed: A contract is not able to modify core blockchain storage or storage items of other contracts directly. Its power is limited to only modifying its own state, and the ability to make outside calls to other contracts or runtime functions.

Reversion: Contracts can be prone to undesirable situations that lead to logical errors when wanting to revert or upgrade them. Developers need to learn additional patterns such as splitting their contract's logic and data to ensure seamless upgrades.

These safeguards and restrictions make running smart contracts slower and more costly. However, it's important to consider the different developer audiences for contract development versus Substrate runtime development.

Building decentralized applications with smart contracts allows your community to extend and develop on top of your runtime logic without worrying about proposals, runtime upgrades, and so on. You can also use smart contracts as a testing ground for future runtime changes, but done in an isolated way that protects your network from any errors the changes might introduce.

In summary, smart contract development:

• Is inherently safer to the network.
• Provides economic incentives and transaction fee mechanisms that can't be directly controlled by the smart contract author.
• Provides computational overhead to support graceful logical failures.
• Has a low barrier to entry for developers and enables a faster pace of community interaction.

Substrate runtime development

Unlike traditional smart contract development, Substrate runtime development offers none of the network protections or safeguards. Instead, as a runtime developer, you have total control over how the blockchain behaves. However, this level of control also means that there is a higher barrier to entry.

Substrate is a framework for building blockchains, which almost makes comparing it to smart contract development like comparing apples and oranges. With the Substrate framework, developers can build smart contracts but that is only a fraction of using Substrate to its full potential.

With Substrate, you have full control over the underlying logic that your network's nodes will run. You also have full access for modifying and controlling each and every storage item across your runtime modules. As you progress through this map, you'll discover concepts and techniques that will help you to unlock the potential of the Substrate framework, giving you the freedom to build the blockchain that best suits the needs of your application.

You'll also discover how you can upgrade the Substrate runtime with a single transaction instead of having to organize a community hard-fork. Upgradeability is one of the primary design features of the Substrate framework.

In summary, runtime development:

• Provides low level access to your entire blockchain.
• Removes the overhead of built-in safety for performance.
• Has a higher barrier of entry for developers.
• Provides flexibility to customize full-stack application logic.

To learn more about using smart contracts within Substrate, refer to the Smart Contract - Overview page as well as the Polkadot Builders Guide.

Navigating the documentation

If you need any community support, please join the following channels based on the area where you need help:

• Substrate Technical channel on Discord or Element.
• ink! Smart Contract channel on Discord or Element
• Frontier EVM Compatibility channel on Discord or Element
• PolkatodJS API channel on Discord

Alternatively, also look for support on Stackoverflow where questions are tagged with "substrate" or on the Parity Subport repo.

Use the following links to explore the sites and resources available on each:

Substrate Developer Hub has the most comprehensive all-round coverage about Substrate, from a "big picture" explanation of architecture to specific technical concepts. The site also provides tutorials to guide you as your learn the Substrate framework and the API reference documentation. You should check this site first if you want to look up information about Substrate runtime development. The site consists of:

Knowledge Base: Explaining the foundational concepts of building blockchain runtimes using Substrate.

Tutorials: Hand-on tutorials for developers to follow. The first SIX tutorials show the fundamentals in Substrate and are recommended for every Substrate learner to go through.

How-to Guides: These resources are like the O'Reilly cookbook series written in a task-oriented way for readers to get the job done. Some examples of the topics overed include:

• Setting up proper weight functions for extrinsic calls.
• Using off-chain workers to fetch HTTP requests.
• Writing tests for your pallets It can also be read from

API docs: Substrate API reference documentation.

Substrate Node Template provides a light weight, minimal Substrate blockchain node that you can set up as a local development environment.

Substrate Front-end template provides a front-end interface built with React using Polkadot-JS API to connect to any Substrate node. Developers are encouraged to start new Substrate projects based on these templates.

If you face any technical difficulties and need support, feel free to join the Substrate Technical matrix channel and ask your questions there.

Additional resources

Polkadot Wiki documents the specific behavior and mechanisms of the Polkadot network. The Polkadot network allows multiple blockchains to connect and pass messages to each other. On the wiki, you can learn about how Polkadot—built using Substrate—is customized to support inter-blockchain message passing.

Polkadot JS API doc: documents how to use the Polkadot-JS API. This JavaScript-based API allows developers to build custom front-ends for their blockchains and applications. Polkadot JS API provides a way to connect to Substrate-based blockchains to query runtime metadata and send transactions.

Quiz #1

👉 Submit your answers to Quiz #1

Basics

Set up your local development environment

Here you will set up your local machine to install the Rust compiler—ensuring that you have both stable and nightly versions installed. Both stable and nightly versions are required because currently a Substrate runtime is compiled to a native binary using the stable Rust compiler, then compiled to a WebAssembly (WASM) binary, which only the nightly Rust compiler can do.

Also refer to:

• Set up Substrate for Unix-based machines
• Set up Substrate for Windows

Lab #1

👉 Complete Lab #1: Run a Substrate node

Interact with a Substrate network using Polkadot-JS apps

Polkadot JS Apps is the canonical front-end to interact with any Substrate-based chain.

You can configure whichever endpoint you want it to connected to, even to your localhost running node. Refer to the following two diagrams.

1. Click on the top left side showing your currently connected network:

1. Scroll to the bottom of the menu, open DEVELOPMENT, and choose either Local Node or Custom to specify your own endpoint.

Quiz #2

👉 Complete Quiz #2

Lab #2

👉 Complete Lab #2: Using Polkadot-JS Apps

Notes: If you are connecting Apps to a custom chain (or your locally-running node), you may need to specify your chain's custom data types in JSON under Settings > Developer.

Polkadot-JS Apps only receives a series of bytes from the blockchain. It is up to the developer to tell it how to decode and interpret these custom data type. To learn more on this, refer to:

• Polkadot JS doc: Type basics
• Polkadot JS doc: Extending types

You will also need to create an account. To do so, follow these steps on account generation. You'll learn that you can also use the Polkadot-JS Browser Plugin (a Metamask-like browser extension to manage your Substrate accounts) and it will automatically be imported into Polkadot-JS Apps.

Notes: When you run a Substrate chain in development mode (with the --dev flag), well-known accounts (Alice, Bob, Charlie, etc.) are always created for you.

Lab #3

👉 Complete Lab #3: Create an Account

Preliminaries

You need to know some Rust programming concepts and have a good understanding on how blockchain technology works in order to make the most of developing with Substrate. The following resources will help you brush up in these areas.

Rust

You will need familiarize yourself with Rust to understand how Substrate is built and how to make the most of its capabilities.

If you are new to Rust, or need a brush up on your Rust knowledge, please refer to The Rust Book. You could still continue learning about Substrate without knowing Rust, but we recommend you come back to this section whenever in doubt about what any of the Rust syntax you're looking at means. Here are the parts of the Rust book we recommend you familiarize yourself with:

• ch 1 - 10: These chapters cover the foundational knowledge of programming in Rust
• ch 13: On iterators and closures
• ch 18 - 19: On advanced traits and advanced types. Learn a bit about macros as well. You will not necessarily be writing your own macros, but you'll be using a lot of Substrate and FRAME's built-in macros to write your blockchain runtime.

How blockchains work

Given that you'll be writing a blockchain runtime, you need to know what a blockchain is, and how it works. The **Web3 Blockchain Fundamental MOOC Youtube video series provides a good basis for understanding key blockchain concepts and how blockchains work.

The lectures we recommend you watch are: lectures 1 - 7 and lecture 10. That's 8 lectures, or about 4 hours of video.

Quiz #3

👉 Complete Quiz #3

Substrate runtime development

High level architecture

To know more about the high level architecture of Substrate, please go through the Knowledge Base articles on Getting Started: Overview and Getting Started: Architecture.

In this document, we assume you will develop a Substrate runtime with FRAME (v2). This is what a Substrate node consists of.

Each node has many components that manage things like the transaction queue, communicating over a P2P network, reaching consensus on the state of the blockchain, and the chain's actual runtime logic (aka the blockchain runtime). Each aspect of the node is interesting in its own right, and the runtime is particularly interesting because it contains the business logic (aka "state transition function") that codifies the chain's functionality. The runtime contains a collection of pallets that are configured to work together.

On the node level, Substrate leverages libp2p for the p2p networking layer and puts the transaction pool, consensus mechanism, and underlying data storage (a key-value database) on the node level. These components all work "under the hood", and in this knowledge map we won't cover them in detail except for mentioning their existence.

Quiz #4

👉 Complete Quiz #4

Runtime development topics

In our Developer Hub, we have a thorough coverage on various subjects you need to know to develop with Substrate. So here we just list out the key topics and reference back to Developer Hub. Please go through the following key concepts and the directed resources to know the fundamentals of runtime development.

Key Concept: Runtime, this is where the blockchain state transition function (the blockchain application-specific logic) is defined. It is about composing multiple pallets (can be understood as Rust modules) together in the runtime and hooking them up together.

Runtime Development: Execution, this article describes how a block is produced, and how transactions are selected and executed to reach the next "stage" in the blockchain.

Runtime Develpment: Pallets, this article describes what the basic structure of a Substrate pallet is consists of.

Runtime Development: FRAME, this article gives a high level overview of the system pallets Substrate already implements to help you quickly develop as a runtime engineer. Have a quick skim so you have a basic idea of the different pallets Substrate is made of.

Lab #4

👉 Complete Lab #4: Adding a Pallet into a Runtime

Runtime Development: Storage, this article describes how data is stored on-chain and how you could access them.

Runtime Development: Events & Errors, this page describe how external parties know what has happened in the blockchain, via the emitted events and errors when executing transactions.

Notes: All of the above concepts we leverage on the #[pallet::*] macro to define them in the code. If you are interested to learn more about what other types of pallet macros exist go to the FRAME macro API documentation and this doc on some frequently used Substrate macros.

Lab #5

👉 Complete Lab #5: Building a Proof-of-Existence dApp

• Writing Tests for Your Pallet: learn to build up a mock runtime and write test cases for your pallet logics.

Lab #6

👉 Complete Lab #6: Building a Substrate Kitties dApp

Quiz #5

👉 Complete Quiz #5

Polkadot JS API

Polkadot JS API is the javascript API for Substrate. By using it you can build a javascript front end or utility and interact with any Substrate-based blockchain.

The Substrate Front-end Template is an example of using Polkadot JS API in a React front-end.

• Runtime Development: Metadata, this article describes the API allowing external parties to query what API is open for the chain. Polkadot JS API makes use of a chain's metadata to know what queries and functions are available from a chain to call.

Lab #7

👉 Complete Lab #7: Using Polkadot-JS API

Quiz #6

👉 Complete Quiz #6: Using Polkadot-JS API

Smart contracts

Learn about the difference between smart contract development vs Substrate runtime development, and when to use each here.

In Substrate, you can program smart contracts using ink!.

• Learn about smart contract development in Substrate
• Learn about Smart contract development using ink!

Quiz #7

👉 Complete Quiz #7: Using ink!

What we do not cover

A lot 😄

On-chain runtime upgrades. We have a tutorial on On-chain (forkless) Runtime Upgrade. This tutorial introduces how to perform and schedule a runtime upgrade as an on-chain transaction.

About transaction weight and fee, and benchmarking your runtime to determine the proper transaction cost.

Off-chain Features

There are certain limits to on-chain logic. For instance, computation cannot be too intensive that it affects the block output time, and computation must be deterministic. This means that computation that relies on external data fetching cannot be done on-chain. In Substrate, developers can run these types of computation off-chain and have the result sent back on-chain via extrinsics.

Tightly- and Loosely-coupled pallets, calling one pallet's functions from another pallet via trait specification.

Blockchain Consensus Mechansim, and a guide on customizing it to proof-of-work here.

Parachains: one key feature of Substrate is the capability of becoming a parachain for relay chains like Polkadot. You can develop your own application-specific logic in your chain and rely on the validator community of the relay chain to secure your network, instead of building another validator community yourself. Learn more with the following resources:

• Cross-chain Message Passing (XCMP), how parachain and relay-chain communicate to each others
• Workshop: Using cumulus to build your parachain

Terms clarification

• Substrate: the blockchain development framework built for writing highly customized, domain-specific blockchains.
• Polkadot: Polkadot is the relay chain blockchain, built with Substrate.
• Kusama: Kusama is Polkadot's canary network, used to launch features before these features are launched on Polkadot. You could view it as a beta-network with real economic value where the state of the blockchain is never reset.
• Web 3.0: is the decentralized internet ecosystem that, instead of apps being centrally stored in a few servers and managed by a sovereign party, it is an open, trustless, and permissionless network when apps are not controlled by a centralized entity.
• Web3 Foundation: A foundation setup to support the development of decentralized web software protocols. Learn more about what they do on thier website.

Others

• Answers to quizzes and labs

---

Author: substrate-developer-hub
Source Code: https://github.com/substrate-developer-hub/hackathon-knowledge-map
License: 

#blockchain #substrate