Create custom WhatsApp stickers with your photo – See How?

WhatsApp has recently introduced stickers option. To get this feature, make sure you are using the latest version of WhatsApp.

So, how to create custom WhatsApp stickers?

Go to google play store, install the following app

Sticker maker for WhatsApp

Click here for the download link
‘Sticker maker for WhatsApp’ is one of the easiest ways to use stickers on WhatsApp and here is how to use:
  1. Make Sticker packs for a pet, your girlfriend, your family, your friends in 4 easy steps.
  2. And add a name for your pack
  3. Add the stickers to the pack, cut them with your finger.
  4. Publish the Sticker pack.

 

Now, a new page that lets you add up to 30 custom stickers of your own will open. However, the icon on top will be the tray icon or the icon which will appear as an identifier for you sticker pack in WhatsApp. Do note that the tray icon will not appear as a sticker.

Steps to create the sticker pack

Install the Sticker maker for WhatsApp app

Screenshot_20181111-173621

 

After installing, open the app and create sticker pack

Screenshot_20181111-173730

 

Add the images you wish to add in the pack, you need to add a minimum 3 stickers to save the pack

Screenshot_20181111-174219

 

Once added, you can publish and add to your WhatsApp. Make sure you are using images with no background or less background.

To clear the background, you can use the app “Background Eraser”

Screenshot Image

If you are just experimenting with the app, you can download a sample picture from the internet. Search in google for images with png format.
Screenshot_20181111-173821

 

 

Once you have published the sticker and added to Whatsapp. You can start sending to your friends.

 

I hope you have a funny picture of your friends. So give a try and leave your feedback in the comment section.

Have fun.

Angular 5 Tutorial 03 – Project Structure

In the previous post, we have discussed how to create hello world application in angular. Using Angular CLI, we have generated basic files needed to run a hello world application.

Now, let’s have a quick look at the files and folders in our new Angular project.

The generated projects have the following files and folders structure

angular_structure

We have three folders and a few files in the root directory.

The 3 folders are e2e, node_modules, and src.

src – src/ folder presents in the root folder. It contains all the source code of project whereas the remaining folder contains files that helps to build, test,  maintain the application.

e2e – It contains end to end tests. These files should not present in the src folder, because it acts as the separate app that helps to test the whole application.

node_modules – This folder has been created by Node.js based on the libraries listed in packages.json. (click here to know about in details)

Before digging further into the above folders, let’s take a look at the remaining files available in the root folder.

.angular-cli.json – Configuration of angular CLI. It helps us to define different environments like dev, stage, etc. and also to import third-party stylesheets.

.editorconfig – Simple configuration for your editor to make sure everyone that uses your project has the same basic configuration. Example: indent_size, max_line_length of the project. It allows us to maintain a common editor setting across the team.

.gitignore – Git configuration to make sure autogenerated files are not committed to source control. Example: dependencies folder – node_modules, compiled output folder – dist

karma.conf.js – Karma is a test runner which we are using in Javascript application. This file contains the configuration of the karma test. The configuration mentioned in this file is used when we are testing the application using ng test command.

package.json – npm configuration to maintain the metadata of the application, third-party packages listing, and to maintain the dependencies of those packages.

protractor.conf.js – Protractor is an end to end test runner. The configuration mentioned in this file is used when we are testing the application using ng e2e command.

README.md – Basic documentation of the project, when are generating files with CLI it is prefilled with CLI commands details.

tsconfig.json – TypeScript compiler configuration for IDE.

tslint.json – Linting settings for TSLint which is a used during ng lint for linting TypeScript code.

So far we have discussed the folders and files available in the root directory. Let’s dig deeper into the src folder.

cool-app-src

The src folder contains sub-folders called app, assets, environments and few more files such as index.html, main.ts, etc

app/app.component – The HTML, CSS, ts, spec.ts files together form the  AppComponent. Basically, it’s an HTML template, stylesheet and unit test. It acts as the root component of the application. The remaining component will be created as the nested component of this root component.

app/app.module.ts – Modules is a mechanism to group the component, pipes, and services which are related.

assets – assets folder is the place to maintain the static contents like images, or any content that needs to copy fully as it is during the build process.

environments – This folder contains one file for each environment. The file contains environment based configuration or information.

favicon.ico – favorite icon to be displayed when we are bookmarking our page

index.html – The main HTML that serves the application. The CLI automatically links the js and CSS files when building the application.

main.ts – The entry point of application. Compiles and bootstraps the application root module to run in the browser.

poyfills.ts – Different browsers have different levels of support of the web standards. Polyfills help normalize those differences. Example: The latest feature will browser like chrome or firefox, but we need the fallback for the browser like Internet Explorer. Polyfills will help to fill those gaps.

styles.css – We import the global styles in this file. Mostly the local style specific to the particular component will be placed inside the same folder for easy maintenance.

test.ts – The main entry point of the unit test.

tsconfig.json – Typescript compiler configuration for the angular application

In the next post, we can discuss the component in more details.

Happy Coding 🙂