Loading...

Follow Joe Zim's JavaScript Blog on Feedspot

Continue with Google
Continue with Facebook
or

Valid

JavaScript is #1 on demand programming language in the world with 25 millions of developers behind it. Meet the ones who shape out the now and the future of the prospering nation. Amsterdam JSNation is a 2-day event focusing exclusively on JavaScript development, with inspiring talks, fresh ideas, and great people. Join a group of internationally known JavaScript enthusiasts talking about their inspiration onstage. You’ll also get to spend a great, summer day in one of the most unique Amsterdam locations - Zuiderkerk, one of Rembrandt’s favorite venues.

Sadly, there are numerous reasons I cannot attend JSNation in Amsterdam, or I would. The selection of speakers covers a diverse set of JavaScript technologies and topics. However, just because I can’t go, doesn’t mean you can’t go. In fact, I’ve partnered with JSNation to give away a free JSNation ticket to one lucky person visiting this site. Enter the competition using the Gleam widget below. Competition ends on April 30, 2019 at 11:59PM Central Time is available to everyone where random drawing giveaways are legal.

JSNation Ticket Giveaway

Good luck, God bless, and happy coding!

Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

Still provide phone support? Have you ever thought about the live chat effectiveness for your website? While the majority of people avoid phone conversations and lack time to read emails, live chat can be a perfect option for providing the effective support and building relationships with your visitors. You can forget about all that “Could you spell your email phonetically?’’ and give quick replies to the burning requests. Live chat saves you time, provides a much broader picture about your visitors, increases customers’ loyalty and even reduces stress caused by the phone calls.

What is Chatra?

Chatra is a user-friendly messenger tool for websites that helps you assist the website visitors promptly and build sustainable relationships with them. Chatra gives you a chance to effectively fight the cart abandonment and avoid costly delays that are common for email support and are so critical in the competitive business environment. And their mobile apps allow you to help the visitors even when you are out of the office.

How to add it to your website?

To add Chatra to your website, you should sign up on their website in the upper-right corner, verify your Chatra account via the link sent to your email address and set your password in the Chatra dashboard.

Adding the code manually

You can copy the widget code from Set up & customize tab in the dashboard and paste it into the code of your website, preferably before the closing </head> tag.

Chatra is integrated with the majority of CMS platforms such as Shopify, Wordpress, Joomla, Drupal, Wix, etc. You can check out all the guides for the most popular systems here.

Plugin for WordPress

Chatra has its own plugin for WordPress, so that you can easily add it to your website. Please follow the steps below if your website is WordPress-based :

  1. First, log into your WordPress admin panel and go to Plugins → Add new.
  2. Enter “chatra” into Search plugins field.
  3. Install and activate plugin.
  4. Go to Settings → Chatra chat.
  5. Log in into app.chatra.io in another browser tab and copy the widget code from Set up & customize section in Chatra dashboard .
  6. Go back to WordPress console, paste the code and press Save changes.
  7. Done! Chatra should appear on your website.

It might happen that you don’t see the widget after all the steps above are taken. If so, please check if you have any caching plugins installed. The widget should appear after you clear the cache of your website. .

Shopify app

As you may know, Shopify is an extremely popular CMS for the online shops worldwide. Chatra offers a ready-to-use integration with this platform, so you can add Chatra to your online-store in one click. You can go to the Chatra app page on Shopify and press the green “Get” button there. Voila! Chatra is on your website. You can use the same Chatra account to connect an additional Shopify store. To do this, simply log into the store’s admin dashboard and repeat the first step.

Other platforms

Chatra is integrated with the majority of popular CMS platforms such as Bigcommerce, CS-Cart, Drupal, Ecwid, Joomla, Magento, Opencart, Tilda and Wix. If you can’t find the guide for your platform on Chatra website, check if you have an option to add custom HTML codes to your website or contact Chatra support for the correct guide.

Using The API

After the installation is completed, most of the settings (like widget texts, button colors and position, etc.) can be changed from the dashboard app.chatra.io, and the changes will be applied to the widget on your website in real time. But Chatra also offers API for the developers, with basic features available even on the free plan. Let’s have a closer look at some of their features.

Changing the colors

The Chatra dashboard allows you to change the colors only of the chat button, and you can pick only one of the colors from their palette.

With the API code below you can set your own colors not only for the chat button, but for the message bubbles as well.

1
2
3
4
5
6
7
8
window.ChatraSetup = {
colors: {
buttonText: '#f5f5f5', // chat button text/icon color
buttonBg: '#5ece1a', // chat button background color
clientBubbleBg: '#e7ffd1', // visitor’s message bubble color
agentBubbleBg: '#deffff' // agent’s message bubble color
}
}

Add this code before the main widget code (or into the theme.liquid file, if you are using Shopify), and it will overwrite the settings from the Chatra dashboard. It’s also convenient if you have several websites with different color palettes.

Changing the size

If you think that the chat button or window is too big or too small for your website, change their size with this code:

1
2
3
4
5
window.ChatraSetup = {
chatWidth: 400,
chatHeight: 550,
buttonSize: 75
}

This code also goes before the main widget code.

Setting the language

Chatra is currently available in 7 languages: English, German, French, Spanish, Russian, Portuguese and Dutch. If several languages are selected in the settings, Chatra detects the visitor’s browser language and shows them the corresponding version.

Using the API, however, allows you to set the language on your side, so the browser language will be ignored. It allows you to have the chat window always in English on the English version of your website, in German on the German version, etc. To set the language, use this code:

1
2
3
window.ChatraSetup = {
language: 'fr'
};

‘fr’ in the code above stands for French. Other possible language variables: ‘en’, ‘de’, ‘es’, ‘nl’, ‘pt’, and ‘ru’. Chatra also allows you to translate the widget texts into other languages that are currently not supported (for example, from English into Japanese). Check their documentation for translating the widget here.

Note that window.ChatraSetup can only be used once on the page, so if you use different API options, make sure to combine all the options into a single object.

Connecting Chatra to Your Custom Button

If you want to make the chat window open with a click on your custom button, use this code:

1
2
<!-- Custom button anywhere on the page -->
<button onclick="Chatra('openChat', true)">Open chat window</button>

Basically it’s a ready to use code that you can place anywhere on the page. If you already have a designed button, add the “Chatra(‘openChat’, true)” setting to it. This way you can have an additional chat button on your page that can be placed in the header, footer, on the cart page or wherever it might be useful.

If you only want to use your own button, and to hide the default one, use this CSS code:

1
2
3
4
5
#chatra:not(.chatra--expanded) {
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none;
}

Add it into your CSS-file or wrap it into the <style> tags and add it before the main widget code.

Advanced options

All the examples listed above, as well as other options listed in the Javascript API section in their documentation, are available in the free plan. The advanced API options are available only on the paid plan and during the trial period, and require some individual coding on your side. You can:

Conclusion

Chatra is a powerful and highly configurable way for customers to connect with your customer to provide feedback and ask for help. It’s simple to set up and if you’re not happy with something, as you have seen, you can probably change it with a few lines of code.

Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

To avoid confusion, Angular 1 and all its releases are combined in a short name AngularJS, and Angular 2 and all subsequent versions are usually referred to simply as Angular. As a matter of fact, Angular 6 is already released. There’s a great demand for Angular 4 developers as well as for those who use other releases, so, you don’t have to instantly migrate to a newer release just to keep up with the market.

Quick Dive into the History

The history of Angular began in October 2010. The team from Google developed a JavaScript-based framework that later became known to the world as Angular 1. As soon as the framework started to gain popularity as a tool for developing dynamic web pages, its shortcomings, sometimes very critical, also started to reveal. Therefore, Angular 1 was rewritten from scratch, its architecture was changed, TypeScript became the main language, meant to provide all the features of OOP and in 2016 Angular 2 was released.

Pre-Install

The way an Angular application should be built directly depends on what is required to be done. Let’s imagine that we need to get a list of users and display them on the screen. In this tutorial, we want our Angular application not only to solve the task but to remain extensible and universal. We also want our code to be intuitive.

Like with any other Angular application, we would be using the Angular CLI (Command Line Interface) tool to create it. To be able to do this, we need npm which comes with Node.js. Then, let’s install the Angular CLI using npm with the -g (or --global) option. Open terminal and enter this command:

1
npm install -g @angular/cli

Now create an empty project using the Angular CLI:

1
ng new DummyApp

At this stage, the project looks like this:

Files and Folders Structure

The architecture of Angular is based on modules that combine services, components and other modules. Everything starts with the most important module, which is always named app.module.ts. Note the ts file extension. You’ll want to know TypeScript if you’re going to write Angular apps. This is the main container for other modules, services and components.

Our future “DummyApp” will consist of several modules. Each module will be responsible for a particular logical entity and contain components, services and models for this entity. We would separately create a directory for the shared module that contains the components required for a number of modules or even all modules at the same time. We need to import it into each module created by us.

Also, we would need to create a common directory, where there will be files of abstract classes. But first things first.

At this stage the project looks like this:

Main App Build Principles

First of all, we need to create a file for the User entity. This will be a regular class with several properties, a method for obtaining a full user name and its factory creating instances of the User class. I initialize all properties with null to be able to create an instance of the User class without filling it with data.

/app/modules/users/models/User.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
export class User {
public static factory(data: object): User {
const user = <User>data;
return new this(
user.id,
user.login,
user.type
);
}
constructor(
public id: string = null,
public login: string = null,
public type: string = null
) {
}
public get fullName(): string {
return `${this.type}: ${this.login}`;
}
}

Next, we need to create a service to get a list of users. As it will work with a REST API, we call it RestService. The operations for getting the lists of entities or one entity by its ID are fairly generic. So, I’ll put them in a separate abstract class. To do this, in the common directory, create the services directory where the AbstractRestService will be located in abstract.rest.service.ts:

/app/common/services/abstract.rest.service.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import {HttpClient} from '@angular/common/http';
import {Observable} from 'rxjs/Observable';
import {DummyConfig} from '../Config';
import {map} from 'rxjs/operators';
export abstract class AbstractRestService<T> {
protected url: string;
public abstract factory(data:any): T;
protected constructor (
public http: HttpClient
) {
}
getList(): Observable<T[]> {
return this.http.get<T[]>(`${DummyConfig.Domain}/${this.url}`).pipe(
map((data: T[]) => {
let items = data || [];
if (items.length) {
items = items.map((item) => this.factory(item));
}
return items;
})
);
}
}
/app/common/Config.ts
1
2
3
export class DummyConfig {
public static Domain = 'https://api.github.com';
}

The url parameter will store the string for the API, while the factory function will return a new instance of the class we need. The getList() method will call a standard HTTP request but we will dynamically generate a full URL and create an array of instances of the class we need.

Let’s create a UsersService in the users module that will inherit from AbstractRestService. We will specify the desired url in the constructor and implement factory as a function that will return an instance of the User class.

/app/modules/users/services/users.service.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import {HttpClient} from '@angular/common/http';
import {AbstractRestService} from '../../../common/services/abstract.rest.service';
import {User} from '../models/User';
import {Injectable} from '@angular/core';
@Injectable()
export class UsersService extends AbstractRestService<User> {
public factory(data): User {
return User.factory(data);
}
constructor(
http: HttpClient
) {
super(http);
this.url = 'users';
}
}

It’s the perfect time to create a component for displaying the list of users. But, in the future, another entity may appear and, quite possibly, we will need to output one more list. Therefore, first create an abstract list component. In common, let’s create the components/list directory, and put abstract.list.component.ts in it:

/app/common/components/list/abstract.list.component.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import {AbstractRestService} from '../../services/abstract.rest.service';
import {OnInit} from '@angular/core';
export abstract class AbstractListComponent<T> implements OnInit {
public items: T[];
protected constructor(
protected service: AbstractRestService<T>
) {}
ngOnInit(): void {
this.getList();
}
public getList(): void {
this.service.getList().subscribe((items: T[]) => this.items = items);
}
}

Now, let’s create the concrete implementation of the UsersList component:

/app/modules/users/components/list/list.component.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import {Component} from '@angular/core';
import {UsersService} from '../../services/users.service';
import {User} from '../../models/User';
import {AbstractListComponent} from '../../../../common/components/list/abstract.list.component';
@Component({
selector: 'users-list',
templateUrl: 'list.component.html'
})
export class UsersList extends AbstractListComponent<User> {
constructor(
service: UsersService
) {
super(service)
}
}
/app/modules/users/components/list/list.component.html
1
2
3
4
5
<ul>
<li *ngFor="let user of items">
{{user.fullName}}
</li>
</ul>

Now the structure looks like this:

Run the app and the results look like this:

If required, you can create list components for any entities. While file names and entity models will change, encapsulation and behavior will persist. The directory structure may vary slightly but should always remain minimally deep and well-remembered. The general logic is created separately. Thus it can be easily extended or modified. Getting deeper into the TypeScript and learning more about object-oriented programming would let you open even more ways of solving tasks.

And remember, you can always do better!

By Anastasia Stefanuk of MobileUnity

Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

A while back I wrote an article titled “The Great Mystery of the Tilde” where I tried to explain what the ~ (tilde) operator did in JavaScript. When trying to demystify what it was, I ended up perpetuating a lot of misinformation. I’m here to fix that today.

Setting The Facts Straight

Normally, I don’t care too much about going back and updating old content, but my error was quite eggregious. Not only that: that post is the second most view post I had last year, so if I’m going to have that much traffic going to it, then I need to fix it, so I’ve added a paragraph to that post directing visitors to this new post, so that I can prevent future misinformation from spreading.

So What Is It?

The ~ operator in JavaScript is the Bitwise NOT operator. If you don’t work with binary very often, then that probably doesn’t mean anything to you at all. Don’t worry, though, I’ll explain. If you have a number, say 8, it looks like this in binary: 1000. When you use the ~ on that number, it will convert each bit to the opposite value. That means, each 1 will become a 0 and vice versa. So ~8 would equal 7, whose binary representation looks like this: 0111. Or a 13 (1101) would become 2 (0010). The only problem is that JavaScript uses what is called “Two’s Complement” in order to be able to represent positive and negative numbers in binary. So, because of this, in actuality, ~8 equals -9. If you want a better explanation than that, you’ll need to do some research on your own because I don’t feel adequate to explain it.

If you’re wondering what you would use this for (besides as a lame hack as I recommended in my previous article and that I no longer recommend)… so am I. I can find some examples on the internet for using bitwise operators, but I haven’t really seen a helpful example utilizing this particular operator. So, if you find a tilde in some JavaScript code you’re reading, then check out my old article linked above just to make sure they’re not using wrongly. If it doesn’t seem to be used hackily, then I guess you’ll have to let me know so I can see an example where it’s used correctly!

Conclusion

So, now I hope this sets the record straight and that people being directed to the old post by Google will end up seeing this post. God bless and happy coding!

Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

Debugging mobile websites is next to impossible when all you have is your phone, but if you have a Windows PC, you can use Google Chrome’s developer tools to connect to your Android phone and debug it from there, making the experience infinitely better. In this video, I’ll show you how to get set up to do that.

Video
Debugging Android Chrome From Your Windows PC - YouTube
Steps

You can find a fully fleshed out written tutorial on the Raygun blog. Here, I’ll just list the steps out pretty quickly. You can also find everything you need for setting up your PC and Android phone for Chrome debugging in the video above.

  1. Turn on Developer Options and USB Debugging on your phone.
  2. Install USB drivers for your Android device on your PC.
  3. Install ADB server and run it on your PC.
  4. Enable Chrome developer tools to “Discover USB devices” in the “Remote devices” tab on your PC.
  5. Connect your Android device to your PC via USB.
  6. Allow USB debugging on your phone, when the popup shows up.
    • If that popup doesn’t show up, change connection type to PTP on your phone first.
  7. Open the “Remote devices” tab in the dev tools and click on your Android device listed on the left.
  8. Focus the tab you wish to inspect and then click the “Inspect” button for that tab.
Conclusion

And there you go! You’ve now got a remote debugging session running on your PC for your Android device. You should be able to do pretty much anything with it that you would normally do on a desktop website. God bless and happy coding!

Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

Separate tags by commas
To access this feature, please upgrade your account.
Start your free month
Free Preview