Using Angular Augury to Debug Your Code

Augury is an open-source tool allowing developers to profile and debug Angular 2 and 4 applications.

Modern web browsers provide developer consoles to inspect various elements on the page, which is really handy when trying to debug markup, styles, and scripts. However, this console isn’t enough to debug Angular applications that usually have lots of components, events, attributes, and a separate routing system.

Augury is a tool designed specifically for Angular apps. It’s an open-source debugging and profiling tool for Angular 2+ applications.

Augury is just a Chrome extension that’s quite simple to use, so you won’t need to spend hours and hours learning how to utilize this tool. We’re going to build a sample Angular app and then see Augury in action by exploring various parts of our project. So, let’s get started!

Hello, Augury!

Augury visualizes your app’s structure in a form of a tree, showing how components and their dependencies relate to each other. It also allows you to inspect properties of your objects and change them on the fly. On top of that, you can easily view the source code of a specific component, insert breakpoints as needed, work with events, and more. Lastly, you can browse the application’s routing system, as well as view the full list of all utilized modules.

Augury is only available as a Chrome extension (there’s no Firefox support yet, unfortunately) and installing it is as simple as going to this page and pressing the Install button. After that, you may open the developer tools by pressing Ctrl + Shift + I (Windows/Linux) or Cmd + Opt + I (macOS). You’ll note that a new tab called Augury has appeared. After switching to this tab, you’ll either see the application’s structure or the phrase “This application is not an Angular application”. I’ve noticed that sometimes it may be required to re-open the Developer Console in order for Augury to analyze the page properly, so watch out.

Now that we have Augury installed, let’s proceed to the next section and prepare the sample application that we’ll use as a playground!

Building a Sample App

In order to see Augury in action, we need something to debug, right? In this section, I’m going to quickly guide you through the process of creating a very simple application (loosely based on the sample app from the Angular’s official tutorial) listing some users and allowing you to edit them. Alternatively, you may grab the source code from my GitHub repo.

Before getting started, install Angular CLI on your machine if you don’t have it yet:

npm install -g @angular/cli

Next, create the skeleton of our new project:

ng new sitepoint-augury

Change the application’s title by tweaking the src/app/app.component.ts file:

// ...

export class AppComponent {
  title = 'Augury Demo';
}

Tweak the src/app/app.component.html by removing all the links to documentation added automatically by code generator and add an <app-users></app-users> line:

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
</div>

<app-users></app-users>

Of course, we need a User component, so generate it now by running:

ng generate component users

Change the src/app/users/user.component.ts file in the following way:

import { Component, OnInit } from '@angular/core';
import { User } from './user.model'; // <--- 1
import { UserService } from './user.service'; // <--- 2

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit {
  users: User[];

  selectedUser: User;

  onSelect(user: User): void { // <--- 3
    this.selectedUser = user;
  }

  constructor(private userService: UserService) { } // <--- 4

  ngOnInit() {
    this.getUsers(); // <--- 5
  }

  getUsers(): void { // <--- 6
    this.users = this.userService.getUsers();
  }

}

Main things to note here:

  1. We are importing a User model that will be created in a moment.
  2. We’re also importing a UserService. It will simply return a list of hardcoded users, but let’s pretend they’re being fetched from some remote location.
  3. We’re allowing the users to be selected by clicking on them. The currently selected user is stored in a separate selectedUser attribute.
  4. Hook up the userService using the dependency injection mechanism.
  5. Load the list of users once the component is initialized.
  6. In order to get users, we’re utilizing our userService.

That’s pretty much it for this component.

Next, let’s create a model in a src/app/users/user.model.ts file. Each user is going to have an ID, a first and a last name:

export class User {
  id: number;
  first: string;
  last: string;
}

Nothing complex.

Now let’s proceed to the UserService that’s going to be defined in the app/src/users/user.service.ts file:

import { Injectable } from '@angular/core';
import { User } from './user.model';

@Injectable()
export class UserService {

  constructor() { }

  getUsers(): User[] {
    return [
      {
        id: 1,
        first: 'John',
        last: 'Doe'
      },
      {
        id: 2,
        first: 'Margaret',
        last: 'Brown'
      }
    ]
  }
}

The getUsers method simply returns an array of users with hardcoded data.

Now let’s display our users with the help of ngFor. Also, we’re going to add a click event listener and fire onSelect whenever a user is clicked on. When this happens, a form to edit the chosen user should be displayed (which is going to be done with the help of ngIf). Modify the src/app/users/user.component.html file like this:

<div *ngFor="let user of users" (click)="onSelect(user)"
[class.selected]="user === selectedUser">
  <p>{{user.last}}, {{user.first}} (ID: {{user.id}})</p>
</div>

<div *ngIf="selectedUser">
  <h3>Edit</h3>
  <label for="first">First</label>
  <input [(ngModel)]="selectedUser.first" placeholder="First name" id="first">

  <label for="last">Last</label>
  <input [(ngModel)]="selectedUser.last" placeholder="Last name" id="last">
</div>

We’re assigning a .selected CSS class to the chosen user, so let’s add some simple styling for it inside the src/app/users/user.component.css file:

.selected {
  font-weight: bold;
}

Lastly, we have to import FormsModule and UserService inside the src/app/app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; // <---
import { UserService } from './users/user.service'; // <---

import { AppComponent } from './app.component';
import { UsersComponent } from './users/users.component';

FormsModule should be listed in the imports section in the app.module.ts, whereas UserService goes to the providers:

@NgModule({
  declarations: [
    AppComponent,
    UsersComponent
  ],
  imports: [
    BrowserModule,
    FormsModule // <---
  ],
  providers: [
    UserService // <---
  ],
  bootstrap: [AppComponent]
})

That’s it! Our sample application is finished, and you can open it by running the following command:

ng serve --open

Continue reading %Using Angular Augury to Debug Your Code%


Source: Sitepoint

Finding Problem Areas on Your Website with Google Analytics

Finding out what users are doing on your website can tell you where UX may be falling short. While further investigation is required to find out why, taking an analytics-first approach to UX design will show you where to start. In this article, I’ll show you where to look for underperforming areas of your website using Google Analytics.

If you feel like you’re jumping in the deep end here, then read our introductory “Getting Started with Google Analytics” article first, or if you only missed the second installment in the series, then here’s our guide on “How to Perform User Research with Google Analytics”.

Okay, let’s begin.

Page-level Issues

A great place to start looking for problem areas is to look at the performance of individual pages. Key metrics to look out for are Bounce Rate and Exit Rate. These two metrics often cause confusion, but it’s very important to understand the difference between them.

A bounce refers to a visit (or “session”) on a website, during which the user only views one page before leaving. An exit refers to the moment where a user leaves your website. Users can view multiple pages before exiting, which is where exits differ from bounces. Bounce Rate and Exit Rate is then the percentage of users who bounce or exit respectively.

Bounces and exits

Have a look at the metrics from my own website, lukehay.co.uk:

Metrics from lukehay.co.uk

As you can see, the /training/ webpage has a high Bounce Rate, which suggests that it’s not leading visitors to view any other pages on the website. It appears that I need to make this web page more engaging!

The /contact/ page has a high Exit Rate, although this could be expected as it’s natural that users would want to exit the website after sending me a message. Always consider the user intent before making assumptions. In this case, the exit rate appears to be as expected.

Page Value

Page Value is useful for identifying which pages are contributing to conversions. Page Value is how Google Analytics gives a single web page a monetary value. For ecommerce sites, Google Analytics pulls in the values from Transaction Revenue, and for all other types of websites, it pulls in the Goal Value. Here’s how Page Value is calculated:

How Page Value is calculated

From a UX perspective, all you really need to know is that pages that contribute more to conversions (financial and non-financial) will generally have a higher Page Value. This means that you can often identify the key pages in the conversion process using this metric.

You can then focus your attention on any web pages that have a high Page Value but also a high Bounce Rate or Exit Rate, since these are the pages that can be thought of as “leaking” value from your website, potentially due to a critical flaw in the user experience.

You can also analyze on-page behavior (this is when a user interacts with a web page without loading a new web page in the browser) using event tracking, though this needs to be set up manually by a developer.

User Journeys

Looking at specific web pages in isolation will certainly give you an idea of how your website is performing, but in order to get the full picture, you’ll also want to look at user journeys. The behavior flow reports (Behavior → Behavior Flow) in Google Analytics help you to visualize how users are actually navigating through your website.

How users navigate through your website

While these reports look cool, they can be hard to decipher. You’ll want to spend some time exploring these user journeys in detail if you want to find the really useful insights. Smaller websites with fewer user journeys are easier to analyze using these reports than large websites.

Conversion Funnels

Conversion Funnels can be used to gain a better understanding of where your users are dropping out of the conversion flow. These funnels will show each step in the journey to a certain conversion, and where your users enter and exit these journeys. The Conversion Funnel reports can be found under Conversions → Goals → Funnel Visualization.

The example below is taken from an ecommerce website:

A Conversion Funnel report

This report shows that, while over 22,000 users enter the shopping cart, only a total of 5,442 go on to complete a purchase. It also shows that the biggest dropout is at the first step, where 36% of users drop out between the shopping cart and the billing/shipping step, so we’ve identified a yet another problem area right there. Making improvements to these problem areas will likely to lead to big increase in sale conversions. The funnel reports also offer you a decent way to measure the impact of changes you’ve made to the steps in those user journeys.

Continue reading %Finding Problem Areas on Your Website with Google Analytics%


Source: Sitepoint

A Beginner’s Guide to Regular Expressions in JavaScript

Everyone working with JavaScript will have to deal with strings at one point or other. Sometimes, you will just have to store a string inside another variable and then pass it over. Other times, you will have to inspect it and see if it contains a particular substring.

However, things are not always this easy. There will be times when you will not be looking for a particular substring but a set of substrings which follow a certain pattern.

Let’s say you have to replace all occurrences of “Apples” in a string with “apples”. You could simply use theMainString.replace("Apples", "apples"). Nice and easy.

Now let’s say you have to replace “appLes” with “apples” as well. Similarly, “appLES” should become “apples” too. Basically, all case variations of “Apple” need to be changed to “apple”. Passing simple strings as an argument will no longer be practical or efficient in such cases.

This is where regular expressions come in—you could simply use the case-insensitive flag i and be done with it. With the flag in place, it doesn’t matter if the original string contained “Apples”, “APPles”, “ApPlEs”, or “Apples”. Every instance of the word will be replaced with “apples”.

Just like the case-insensitive flag, regular expressions offer a lot of other features which will be covered in this tutorial.

Using Regular Expressions in JavaScript

You have to use a slightly different syntax to indicate a regular expression inside different String methods. Unlike a simple string, which is enclosed in quotes, a regular expression consists of a pattern enclosed between slashes. Any flags that you use in a regular expression will be appended after the second slash.

Going back to the previous example, here is what the replace() method would look like with a regular expression and a simple string.

As you can see, the regular expression worked in both cases. We will now learn more about flags and special characters that make up the pattern inside a regular expression.

Backslash in Regular Expressions

You can turn normal characters into special characters by adding a backslash before them. Similarly, you can turn special characters into normal characters by adding a backslash before them.

For example, d is not a special character. However, d is used to match a digit character in a string. Similarly, D is not a special character either, but D is used to match non-digit characters in a string.

Digit characters include 0, 1, 2, 3, 4, 5, 6, 7, 8, and 9. When you use d inside a regular expression, it will match any of these nine characters. When you use D inside a regular expression, it will match all the non-digit characters.

The following example should make things clear.

You should note that only the first matched character is replaced in the third case. You can also use flags to replace all the matches. We will learn about such flags later.

Just like d and D, there are other special character sequences as well.

  1. You can use w to match any “word” character in a string. Here, word character refers to A-Z, a-z, 0-9, and _. So, basically, it will match all digits, all lowercase and uppercase alphabets, and the underscore.
  2. You can use W to match any non-word character in a string. It will match characters like %, $, #, ₹, etc.
  3. You can use s to match a single white space character, which includes space, tab, form feed, and line feed. Similarly, you can use S to match all other characters besides white space.
  4. You can also look for a specific white space character using f, n, r, t, and v, which stand for form feed, line feed, carriage return, horizontal tab, and vertical tab.

Sometimes, you will face situations where you need to replace a word with its substitute, but only if it is not part of a larger word. For example, consider the following sentence:

“A lot of pineapple images were posted on the app”.

In this case, we want to replace the word “app” with “board”. However, using a simple regular expression pattern will turn “apple” into “boardle”, and the final sentence would become:

“A lot of pineboardle images were posted on the app”.

In such cases, you can use another special character sequence: b. This checks for word boundaries. A word boundary is formed by use of any non-word characters like space, “$”, “%”, “#”, etc. Watch out, though—it also includes accented characters like “ü”.

Similarly, you can use B to match a non-word boundary. For example, you could use B to only match “app” when it is within another word, like “pineapple”.

Matching a Pattern “n” Number of Times

You can use ^ to tell JavaScript to only look at the beginning of the string for a match. Similarly, you can use $ to only look at the end of the string for a match.

You can use * to match the preceding expression 0 or more times. For example, /Ap*/ will match A, Ap, App, Appp, and so on.

In a similar manner, you can use + to match the preceding expression 1 or more times. For example, /Ap+/ will match Ap, App, Appp, and so on. The expression will not match the single A this time.

Sometimes, you only want to match a specific number of occurrences of a given pattern. In such cases, you should use the {n} character sequence, where n is a number. For instance, /Ap{2}/ will match App but not Ap. It will also match the first two ‘p’s in Appp and leave the third one untouched.

You can use {n,} to match at least ‘n’ occurrences of a given expression. This means that /Ap{2,}/ will match App but not Ap. It will also match all the ‘p’s in Apppp and replace them with your replacement string.

You can also use {n,m} to specify a minimum and maximum number and limit the number of times the given expression should be matched. For example, /Ap{2,4}/ will match App, Appp, and Apppp. It will also match the first four ‘p’s in Apppppp and leave the rest of them untouched.

Using Parentheses to Remember Matches

So far, we have only replaced patterns with a constant string. For example, in the previous section, the replacement we used was always “Add”. Sometimes, you will have to look for a pattern match inside the given string and then replace it with a part of the pattern.

Let’s say you have to find a word with five or more letters in a string and then add an “s” at the end of the word. In such cases, you will not be able to use a constant string value as a replacement as the final value depends on the matching pattern itself.

This was a simple example, but you can use the same technique to keep more than one matching pattern in memory. The number of sub-patterns in the full match will be determined by the number of parentheses used.

Inside the replacement string, the first sub-match will be identified using $1, the second sub-match will be identified using $2, and so on. Here is another example to further clarify the usage of parentheses.

Using Flags With Regular Expressions

As I mentioned in the introduction, one more important feature of regular expressions is the use of special flags to modify how a search is performed. The flags are optional, but you can use them to do things like making a search global or case-insensitive.

These are the four commonly used flags to change how JavaScript searches or replaces a string.

  • g: This flag will perform a global search instead of stopping after the first match.
  • i: This flag will perform a search without checking for an exact case match. For instance, Apple, aPPLe, and apPLE are all treated the same during case-insensitive searches.
  • m: This flag will perform a multi-line search.
  • y: This flag will look for a match in the index indicated by the lastIndex property.

Here are some examples of regular expressions used with flags:

Final Thoughts

The purpose of this tutorial was to introduce you to regular expressions in JavaScript and their importance. We began with the basics and then covered backslash and other special characters. We also learned how to check for a repeating pattern in a string and how to remember partial matches in a pattern in order to use them later.

Finally, we learned about commonly used flags which make regular expressions even more powerful. You can learn more about regular expressions in this article on MDN.

If there is anything that you would like me to clarify in this tutorial, feel free to let me know in the comments.


Source: Nettuts Web Development

Introduction to Popmotion: Custom Animation Scrubber

In the first part of the Popmotion introductory series, we learned how to use time-based animations like tween and keyframes. We also learned how to use those animations on the DOM, using the performant styler.

In part two, we learned how to use pointer tracking and record velocity. We then used that to power the velocity-based animations springdecay, and physics.

In this final part, we’re going to be creating a scrubber widget, and we’re going to use it to scrub a keyframes animation. We’ll make the widget itself from a combination of pointer tracking as well as spring and decay to give it a more visceral feel than run-of-the-mill scrubbers.

Try it for yourself:

Getting Started

Markup

First, fork this CodePen for the HTML template. As before, because this is an intermediate tutorial, I won’t go through everything.

The main twist of note is that the handle on the scrubber is made up of two div elements: .handle and .handle-hit-area.

.handle is the round blue visual indicator of where the scrubber handle is. We’ve wrapped it in an invisible hit area element to make grabbing the element easier for touchscreen users.

Import Functions

At the top of your JS panel, import everything we’re going to use in this tutorial:

Select Elements

We’re going to need three elements in this tutorial. We’ll animate the .box, drag and animate the .handle-hit-area, and measure the .range.

Let’s also create stylers for the elements we’re going to animate:

Keyframes Animation

For our scrubbable animation, we’re going to make the .box move from left to right with keyframes. However, we could just as easily scrub a tween or timeline animation using the same method outlined later in this tutorial.

Your animation will now be playing. But we don’t want that! Let’s pause it for now:

Dragging the x-axis

It’s time to use pointer to drag our scrubber handle. In the previous tutorial, we used both x and y properties, but with a scrubber we only need x.

We prefer to keep our code reusable, and tracking a single pointer axis is quite a common use case. So let’s create a new function called, imaginatively, pointerX.

It will work exactly like pointer except it’ll take just a single number as its argument and output just a single number (x):

Here, you can see we’re using a method of pointer called pipepipe is available on all the Popmotion actions we’ve seen so far, including keyframes.

pipe accepts multiple functions. When the action is started, all output will be passed through each of these functions in turn, before the update function provided to start fires.

In this case, our function is simply:

All it is doing is taking the { x, y } object usually output by pointer and returning just the x axis.

Event Listeners

We need to know if the user has started pressing the handle before we start tracking with our new pointerX function.

In the last tutorial we used the traditional addEventListener function. This time, we’re going to use another Popmotion function called listenlisten also provides a pipe method, as well as access to all action methods, but we’re not going to use that here.

listen allows us to add event listeners to multiple events with a single function, similar to jQuery. So we can condense the previous four event listeners to two:

Move the Handle

We’ll be needing the handle’s x velocity later on, so let’s make it a value, which as we learned in the last tutorial allows us to query velocity. On the line after we define handleStyler, add:

Now we can add our startDrag and stopDrag functions:

Right now, the handle can be scrubbed beyond the boundaries of the slider, but we’ll come back to this later.

Scrubbing

Now we have a visually functional scrubber, but we’re not scrubbing the actual animation.

Every value has a subscribe method. This allows us to attach multiple subscribers to fire when the value changes. We want to seek the keyframes animation whenever handleX updates.

First, measure the slider. On the line after we define range, add:

keyframes.seek accepts a progress value as expressed from 0 to 1, whereas our handleX is set with pixel values from 0 to rangeWidth.

We can convert from the pixel measurement to a 0 to 1 range by dividing the current pixel measurement by rangeWidth. On the line after boxAnimation.pause(), add this subscribe method:

Now, if you play with the scrubber, the animation will scrub successfully!

The Extra Mile

Spring Boundaries

The scrubber can still be pulled outside the boundaries of the full range. To solve this, we could simply use a clamp function to ensure we don’t output values outside of 0, rangeWidth.

Instead, we’re going to go the extra step and attach springs to the end of our slider. When a user pulls the handle beyond the permitted range, it will tug back towards it. If the user releases the handle while it’s outside the range, we can use a spring animation to snap it back.

We’ll make this process a single function that we can provide to the pointerX pipe method. By creating a single, reusable function, we can reuse this piece of code with any Popmotion animation, with configurable ranges and spring strengths.

First, let’s apply a spring to the left-most limit. We’ll use two transformersconditional and linearSpring.

conditional takes two functions, an assertion and a transformer. The assertion receives the provided value and returns either true or false. If it returns true, the second function will be provided the value to transform and return.

In this case, the assertion is saying, “If the provided value is smaller than min, pass this value through the linearSpring transformer.” The linearSpring is a simple spring function that, unlike the physics or spring animations, has no concept of time. Provide it a strength and a target, and it will create a function that “attracts” any given value towards the target with the defined strength.

Replace our startDrag function with this:

We’re now passing the pointer’s x offset through our springRange function, so if you drag the handle past the left-most side, you’ll notice it tugs back.

Applying the same to the right-most side is a matter of composing a second conditional with the first using the stand-alone pipe function:

Another benefit of composing a function like springRange is that it becomes very testable. The function it returns is, like all transformers, a pure function that takes a single value. You can test this function to see if it passes through values that lie within min and max unaltered, and if it applies springs to values that lie without.

If you let go of the handle while it lies outside the range, it should now spring back to within range. For that, we’ll need to adjust the stopDrag function to fire a spring animation:

Our snapHandleToEnd function looks like this:

You can see that to is set either as 0 or rangeWidth depending on which side of the slider the handle currently sits. By playing with damping and stiffness, you can play with a range of different spring-feels.

Momentum Scrolling

A nice touch on iOS scrubber that I always appreciated was that if you threw the handle, it would gradually slow down rather than come to a dead stop. We can replicate that easily using the decay animation.

In stopDrag, replace handleX.stop() with momentumScroll(x).

Then, on the line after the snapHandleToEnd function, add a new function called momentumScroll:

Now, if you throw the handle, it will come to a gradual stop. It will also animate outside the range of the slider. We can stop this by passing the clamp transformer to the decay.pipe method:

Conclusion

Using a combination of different Popmotion functions, we can create a scrubber that has a bit more life and playfulness than the usual.

By using pipe, we compose simple pure functions into more complex behaviours while leaving the composite pieces testable and reusable.

Next Steps

How about trying these challenges:

  • Make the momentum scroll end with a bounce if the handle hits either end of the scrubber.
  • Make the handle animate to any point on the scrubber when a user clicks on another part of the range bar.
  • Add full play controls, like a play/pause button. Update the scrubber handle position as the animation progresses.


Source: Nettuts Web Development

Getting Started With CSS Layout

Getting Started With CSS Layout

Getting Started With CSS Layout

Rachel Andrew

2018-05-25T12:00:19+02:00
2018-05-25T13:49:32+00:00

Over the past couple of years, CSS Layout has dramatically changed as well as the way we develop the front end of our sites. We now have a real choice in terms of the layout methods we use in CSS to develop our sites, which means we often need to make a choice as to which approach to take. In this article, I will run through the various layout methods that you have available to you by explaining the basics of how they are used and what they are used for.

This guide is for you if you are fairly new to CSS and wondering what the best way to approach layout is, but also if you are an experienced developer from elsewhere in the stack who wants to make sure your understanding of layout today is up to date. I have not tried to fully document each layout method here, as that would have created a book and not an article. Instead, I am giving an overview of what is available to you, with plenty of links to find out more.

Normal Flow

If you take an HTML webpage which has no CSS applied to change the layout, the elements will display in normal flow. In normal flow, boxes are displayed one after another based on the Writing Mode of the document. This means that if you have a horizontal writing mode, one in which sentences run left to right or right to left, normal flow will display the boxes of block level elements one after the other vertically down the page.

If you are in a vertical writing mode, then sentences run vertically so normal flow would lay the blocks out horizontally.

Shows how the Block Axis is horizontal in a vertical writing mode and vertical in a horizontal writing mode
Block and Inline Directions change with Writing Mode

Normal flow is where you begin with any layout: when you create a CSS Layout, you are taking the blocks and causing them to do something other than normal flow.

Structure Your Document To Take Advantage Of Normal Flow

You can take advantage of normal flow by ensuring your document starts out in a well-structured manner. Imagine if — instead of this concept of normal flow — the browser piled all your boxes up in the corner on top of each other until you created a layout. That would mean you would have to place every single thing on the page. Instead, the browser displays our content in an immediately readable way.

If your CSS fails to load, the user can still read the content, and users who don’t get CSS at all (e.g. someone using a screen reader) will have the content delivered to them in the order it is in the document. This makes it important from an accessibility point of view that your HTML document starts life in a good order; however, it will also make your life easier as a web developer. If your content is in the order a user would expect to read it, you won’t need to make massive changes to layout to get it into the right place. With newer layout methods you may be surprised how little you have to do.

Therefore, before thinking about layout, think about document structure and the order you would want your content to be read in from the top of the document to the bottom.

Moving Away From Normal Flow

Once we have a well-structured document, we need to decide how to take that and turn it into our desired layout. This will involve moving away from normal flow, for parts of our document. We have a whole set of layout methods to use. The first method we will take a look at is float, as floats are an excellent demonstration of what it is to take an element out of normal flow.

Floats

Floats are used to shift a box to the left or right, allowing content to display wrapped around it.

In order to float an item, use the CSS property float and a value of left or right. The default value of float is none.

.item {
    float: left;
}

It is worth noting that when you float an item and text wraps around it, that what happens is the line boxes of that content are shortened. If you float an item and the following box containing your text has a background color applied, you can see that this background color will then run underneath the floated item.

A block floated left, background color on the text to the right on it runs under the block
The background color on the content runs under the float

As you are shortening the line boxes in order to make space between the float and the wrapping text, you must set a margin on the floated item. A margin on the text would just move the text in from the edge of the container. For an image floated left, you would add a margin to the right and bottom assuming that you want the image flush with the top and left of the container.

See the Pen Smashing Guide to Layout: float by Rachel Andrew (@rachelandrew) on CodePen.

Clearing Floats

Once you have floated an element, all of the following elements will wrap around that floated element until they wrap underneath and normal flow continues. If you want to prevent that, you need to clear the float.

On the element that you want to begin displaying after the float, add the property clear with a value of left to indicate clearing an item floated left, right to clear an item floated right, or both to clear any floats.

.clear {
    clear: both;
}

The above method works if you want an element to start after a float. It won’t help if you find yourself in a situation where you have a floated item inside a box, with some text alongside. If the text is shorter than the floated item, the box will be drawn underneath the content and ignore the float. As we have already learned, floats shorten the line boxes, the rest of the layout continues in normal flow.

The floated box is poking out of the bottom of the container
The box around the text does not clear the float

To prevent this situation we need to clear something inside the box. We could add an empty element and set that to clear all. This involves sticking empty divs into our document which isn’t ideal and may not be possible if your page is generated by a CMS. So instead, the typical clearing floats method is what is known as a clear fix hack. This method works by adding CSS Generated Content, and setting that to clear both.

See the Pen Smashing Guide to Layout: clearfix by Rachel Andrew (@rachelandrew) on CodePen.

The Block Formatting Context

Another way to clear floats inside a box is to invoke a Block Formatting Context (BFC) on the container. A Block Formatting Context contains everything inside it, which would include floated items which can no longer poke out the bottom of the box. There are a few ways to force a BFC, the most common when clearing floats is to set the overflow property to have a value other than the default visible.

.container {
    overflow: auto;
}

Using overflow in this way will generally work, however, in certain situations you could end up with clipped shadows or unwanted scrollbars on the item. It also can look a little confusing in your stylesheet: Did you set overflow because you wanted scrollbars or just to gain this clearing ability?

To make intent clearer and prevent the creation of a BFC causing unwanted side effects, you can use flow-root as a value of the display property. The only thing that display: flow-root does is to create a BFC, thus clearing your floats with no other problems caused.

.container {
    display: flow-root;
}

Legacy Usage Of Floats

Until the arrival of newer layout methods floats were used to create column layouts, this technique worked by giving a set of items a width and setting them to float up next to one another. Careful management of the percentage size of these floated boxes could create a grid effect.

I would not suggest starting a new design now and using this method. However, it will remain in existing sites for many years to come. Therefore, if you come across a design where almost everything seems to be floated, this is the technique in use.

Resources And Further Reading On Floats And Clearing Floats

Positioning

To remove an element from normal flow or shift it around from its place in normal flow, you can use the position property in CSS. When in normal flow, elements have a position of static. The items display one after the other in the Block dimension and if you scroll the page they scroll with it.

When changing the value of position you will typically be also using offset values to move the box around from a particular reference point. The reference point used depends on the value of position you are using.

Relative Positioning

If an item has position: relative then the reference point is the place it would normally be in normal flow. You can then use offset values for the properties top, left, bottom and right to move the box from where it would normally be displayed.

.item {
    position: relative;
    bottom: 50px;
}

Note that other items on the page do not respond to the new position of your element. The place it was positioned in normal flow is reserved, therefore you need to manage any overlaps yourself.

See the Pen Smashing Guide to Layout: relative positioning by Rachel Andrew (@rachelandrew) on CodePen.

Absolute Positioning

Set position: absolute on an item and it will be removed completely from normal flow. The space that was left for it will be removed. The item will then be positioned relative to its containing block which, unless it is nested inside another positioned element, will be the viewport.

Therefore, the first thing that will happen if you set position: absolute on an item is that it typically ends up stuck to the top and left of the viewport. You can then use offset values for the properties top, left, bottom and right to move the box from that position to where you want it to be.

.item {
    position: absolute;
    top: 20px;
    right: 20px;
}

Often you don’t want the box positioned according to the viewport, but in reference to a containing element, it is inside. In which case you need to give that containing element a position value other than the default static.

As setting position: relative does not remove the item from normal flow, this is the usual choice. Give the parent element that you wish to set your offsets from position: relative and then offset the absolutely positioned block from the boundaries of that element.

See the Pen Smashing Guide to Layout: absolute positioning by Rachel Andrew (@rachelandrew) on CodePen.

Fixed Positioning

Something with position: fixed will be positioned in most cases relative to the viewport, and removed from document flow so that no space is reserved for it. When the page is scrolled, the fixed element remains in position relative to the viewport as the rest of the content in normal flow scrolls as usual.

.item {
    position: fixed;
    top: 20px;
    left: 100px;
}

This can be helpful to enable a fixed navigation panel which stays on screen, e.g. while the content scrolls. As with other positioning values, you may cause overlaps when doing this so you should take care that all the content can be read and doesn’t end up behind a fixed item.

See the Pen Smashing Guide to Layout: Fixed positioning by Rachel Andrew (@rachelandrew) on CodePen.

To position a fixed item other than relative to the viewport, you need to have a containing element with one of the transformperspective, or filter properties set to something other than their default value of none. In this case, that element will become the containing block and your offsets with relate to that block rather than the viewport.

Sticky Positioning

Setting position: sticky on an element will cause the element to scroll with the document just as it would in normal flow, however, once it reaches a certain point in relation to the viewport (using the usual offsets) it “sticks” and starts to act like position: fixed. This is a newer value and is less well supported in browsers than other methods, however, it falls back to just scrolling with the page os is a value nicely used as an enhancement without causing problems if it is not supported.

.item {
    position: sticky;
    top: 0;
}

This is how to create the popular effect of a navigation bar scrolling with the content and then stopping at the top of the viewport to stay onscreen as you scroll the content.

See the Pen Smashing Guide to Layout: sticky positioning by Rachel Andrew (@rachelandrew) on CodePen.

Resources And Further Reading On Positioning

Flex Layout

Flexible Box Layout (Flexbox) is a layout method designed for one-dimensional layout. One-dimensional means that you wish to lay out your content in a row, or as a column. To turn your element into a flex layout, you use the display property with a value of flex.

.container {
    display: flex;
}

The direct children of that element become flex items, they will lay out as a row, aligned to the start edge in the inline direction.

See the Pen Smashing Guide to Layout: flex by Rachel Andrew (@rachelandrew) on CodePen.

The Axes Of Flexbox

In the above example, I described out items as being laid out aligned to the start edge of our row in the inline direction, rather than describing them as being aligned to the left. Our items are laid out in a row because the default value of the flex-direction property is row, this creates a row in the inline direction, the direction along which sentences run. As we are working in English, a left-to-right language, the start of a row is on the left and so our items start there. The value of flex-direction thus defines the main axis of Flexbox.

The cross axis, therefore, runs across the main axis at right angles. If your flex-direction is row and your items are displayed in the inline direction, your cross axis runs in the Block direction. If your flex-direction is column so the items are running in the Block direction then your cross axis is along the row.

If you get used to thinking in terms of main and cross axis when working with Flexbox, it will make many things easier.

Direction And Order

Flexbox gives you the ability to change the direction of items on the main axis by using a flex-direction value of row-reverse or column-reverse.

See the Pen Smashing Guide to Layout: flex-direction by Rachel Andrew (@rachelandrew) on CodePen.

You can also change the order of individual flex items with the order property. However, you should take great care when doing so as this can cause a problem for any user who is navigating using the keyboard rather than a mouse or touchscreen as the tab order of the document will follow the order the content is in the source. See the section below on Visual and Document Order for more details.

The Flex Properties

The flex properties are how to control the ratios of flex items along the main axis. The three properties are:

  • flex-grow
  • flex-shrink
  • flex-basis

These are usually used in their shorthand form of the flex property, the first value being flex-grow, the second flex-shrink and the third flex-basis.

.item {
    flex: 1 1 200px;
}

The value of flex-basis gives a size that the item will have before any growing or shrinking takes place. In the above example, that size is 200 pixels, so we would give each item 200 pixels of space. It is unlikely that our container will neatly divide by 200 pixels and so there will be space leftover or not enough space for all of the items if they each have 200 pixels. The flex-grow and flex-shrink properties allow us to control what happens to the items if there is too much or not enough space for them.


Source: Smashing Magazine

Boosting Your Workflow with Angular 5 Snippets and VS Code

In this article, we’ll focus on how to use Angular 5 snippets in Visual Studio Code to improve our workflow. We’ll first start with the basics of using and creating snippets. We’ll look at how we can use Angular snippets for VS Code in an Angular project. Then we’ll later look at how we can create our own snippets and share them with others.

For anyone who’s become proficient in a programming language, you know how boring it is to type the same code over and over again. You eventually start copying and pasting pieces of your code to spare your fingers the agony of writing another for loop.

What if your editor could help you insert this common code for you automatically as you type? That would be awesome, right?

Well, you probably know them as snippets. It’s a feature that’s common in every modern IDE currently available. Even Notepad++ supports them (though not enabled by default).

Prerequisites

Before you start, you’ll need to have the latest version of Visual Studio Code installed on your machine. We’ll also be looking at Angular 5 snippets. So having at least a basic knowledge of Angular will be helpful, but not necessary.

You’ll need to use an existing or new Angular 5 project in order to experiment with snippets. I assume you have the latest version of Node.js, or at least a version that’s not older than Node.js 6. Here’s the command for installing the Angular CLI tool if you haven’t:

npm install -g @angular/cli

# or
yarn global add @angular/cli

Snippets Explained

Snippets are templates that allow you to easily insert repetitive code. When you first install VSCode, it comes with snippets for JavaScript pre-installed. To check them out, just open an existing JavaScript file or create a new one in your workspace and try out typing these prefixes:

  • log
  • if
  • ifelse
  • forof
  • settimeout

As you type, a popup list will appear giving you options to autocomplete your code. As soon as the right snippet is highlighted, just press enter to insert the snippet. In some cases, such as log and for, you may need to press the down key to select the right snippet.

You’re probably wondering where these JavaScript snippets are coming from exactly. Well, you can find the exact definitions in these locations:

  • Windows – C:Program FilesMicrosoft VS Coderesourcesappextensionsjavascriptsnippetsjavascript.json
  • Linux –/usr/share/code/resources/app/extensions/javascript/snippets/javascript.json

We’ll look into how we can create our own snippets, but first let’s explore some third-party snippets.

How to Use Snippets

At the time of writing, the Visual Studio Marketplace listed 934 extensions in the snippet category. You’ll find snippets for every programming language created, including Pascal! This means you probably should check out the marketplace before creating your own snippets. As mentioned earlier, we’ll be looking at Angular 5 snippets. Locate an existing Angular 5 project in your workspace or just create a new one:

ng new snippets-demo

Once the project is set up, open it in VSCode. Next, click the extension icon on the activity bar to open the Extensions panel. Search for Angular 5. The search results should list several Angular extensions. Install the one that has the author ‘John Papa’. After installation is done, click the reload button to restart VSCode. This Angular 5 snippets extension comes with over 50 snippets. About 70% of the snippets are written for TypeScript, and the rest are mostly for HTML. There are some Docker snippets in there too.

Angular 5 Snippets

Let’s try a few of these Angular 5 snippets. Create a new file called app.service.ts inside the app folder. Open the file and start typing “a-service”. A pop-up list will appear as you type. Even before you finish typing, you should have the correct option highlighted. Press enter to insert the template. Once the snippet is entered, take note that the generated class name is highlighted for you to change.

angular-service

Just type “App” and the entire class name will read “AppService”. Pretty convenient, right? Let’s try something different. Delete the entire code in app-service.ts and type this prefix:

a-service-httpclient

You should get a service class definition, including imports and HttpClient injection in the class constructor. Just like before, rename the class name to AppService.

http-client-service

Next, let’s use another snippet to define an HTTP GET request. Let’s define an empty GET method. For this piece of code, you have to type; don’t copy-paste:

getPosts(): Observable<any[]> {

}

As you start to type “Observable”, a snippet option for it will appear. Just press enter and the Observable class will be imported for you automatically.

Observable Snippet

Next, let’s use another snippet to complete the function. Start typing this prefix: “a-httpclient-get”. Pressing enter will insert this snippet for you:

return this.httpClient.get('url');

Change the URL to an imaginary path — let’s say /posts. Obviously our code won’t run, as we haven’t set up any APIs. Fix it by adding <any> after get. The complete method now looks like this.

getPosts(): Observable<any[]> {
  return this.httpClient.get<any[]>('/posts');
}

Now that we know a little bit about how to use Angular 5 snippets, let’s see how they’re created.

Continue reading %Boosting Your Workflow with Angular 5 Snippets and VS Code%


Source: Sitepoint

Boosting Website Conversions Exponentially with A/B Testing

Many designers underestimate the power of A/B testing and its ability to drive UX and boost conversions. Unfortunately, this is because most A/B tests are conducted without the forethought of a testing plan. Yes, it’s easy to run an A/B test, but it’s not as easy to do it well.

In this article, I’m going to show you a real-life case study where we used A/B testing to boost conversions exponentially. I’ll walk you through the process that we took, mentioning any tools used, and linking to any useful tutorials along the way. I’m Jon from The Good, where we turn visitors into buyers — and that’s exactly what we did for TreeRing. Read on to find out how.

Why A/B Testing Often Fails

First, let’s talk about why A/B testing often fails.

One of the main reasons that A/B testing fails to yield actionable results is the lack of a strategic, iterative testing plan. Many companies instead approach A/B testing in a scattered, shotgun manner, trying a random test here, another there, all without a cohesive and strategic technique. This is like trying to improve on the piano by practicing different instruments every day. You may have occasional, random success, but you won’t make much substantive progress.

The power of A/B testing is unlocked when you develop a step-by-step, robust testing plan with each step providing more insights into what’s going wrong. In other words, the results of the first test inform how you perform the second test. When you use this method, you see compounding results, with each test achieving greater results. Slowly but surely, as they say.

Introducing TreeRing and Their UX Problems

TreeRing helps schools create better yearbooks. Their social-first approach lets teachers, parents, and students capture memories, safely share them with the school community, and create free, personalized pages for the printed edition — all at no extra cost to the school.

They came to us needing help with their website, where the user experience was significantly hampering their growth. They were seeing a low lead-generation conversion rate for their free sample download. Their primary goal was to get visitors to download a free sample yearbook, and they in turn could use these leads to generate sales and retain customers. But their conversion rate was painfully low, generating much fewer leads than desired.

They had tried one-off conversion improvements and had only seen minimal success. They knew that a better process for A/B testing was crucial, but couldn’t figure out how to make it work, and since their organic traffic growth was slowing due to platforms like Google and Facebook shifting toward an emphasis on paid traffic, they wanted to get more conversions from their existing traffic, rather than paying to acquire new traffic.

That being said, they also wanted us to take a detailed look at their website to determine precisely where they should focus their testing strategy. They had implemented various changes in an effort to improve conversion rates and hadn’t seen much success, because they weren’t 100% on what they should be focusing on.

We needed to find out which areas of the UI were key, then carry out a conversion rate optimization strategy to begin test variants of these key UI elements.

How A/B Testing Became Part of the Strategy

We began with an initial audit of their site, working to identify the biggest UX dark spots.

We like to approach problems with a “leaky bucket” strategy. If we can find and fix the largest holes first, we’ll see the biggest impact. Once we highlighted the primary issues (which we’ll talk more about in a moment), we began using A/B testing to solve those issues.

Continue reading %Boosting Website Conversions Exponentially with A/B Testing%


Source: Sitepoint

Ethereum: How Transaction Costs are Calculated

This article on Ethereum Transaction Costs was originally published at Bruno’s Bitfalls website, and is reproduced here with permission.

When sending a Bitcoin transaction, its fee is proportionate to its size. The more inputs and outputs, the more expensive it is. Add to that the factor of pending transactions, and transaction fees can skyrocket based on those two factors alone.


It’s recommended you read the following materials before diving into the rest of this post in order to better understand the terminology we’ll be mentioning.

Basic knowledge of programming terms (variables, loops) might also come in handy.


With Ethereum, given that we’re talking about a programming language within the protocol, it’s possible to be very computationally demanding with very little text or code (something which would be very cheap in the BTC-verse). Let’s look at this loop, for example:

while (i++ < 1000) {
    j = j + i;
}

This loop means “for as long as i is smaller than 1000, increase it by 1 and then sum up i and j and write the result into j, then do it all again.” This loop will execute 1000 times if i is 0, or more if it’s a negative number.

To pay for this computational cost in a fair way — since it has to be executed on all miners’ machines at once and they spend their resources and time on it — the concept of gas was introduced. Gas is used to pay for the execution of these so-called smart contracts (Ethereum programs) inside the EVM. For example, i + j above is a summation operation which costs 3 gas every time it’s executed, so 3000 gas if executed 1000 times.

To explain gas properly, let’s first cover the EVM.

EVM

EVM stands for Ethereum Virtual Machine. But what is a virtual machine anyway?

Virtual Machine

A virtual machine is software running on a specific computer which contains another operating system completely encapsulated inside the main one. For example, a virtual machine allows you to run Windows inside Linux, Linux inside Windows, Windows on macOS like in the image below, or any other combination.

Windows inside macOS

We use virtual machines to separate the environment in which we do our everyday computer use from the environment we work or program in. This lets us keep viruses at bay (they have no way of breaching the virtual machine and getting to the main operating system), helps prevent infinite loops from crashing our main operating system, and holds hard-drive corruptions like the infamous WannaCry ransomware at bay. Additionally, VMs let us use Windows games on Linux, for example, or allow us to program in different versions of the same programming language’s environment easily, without mixing them up.

EVM

The Ethereum Virtual Machine is built into the software running on the Ethereum protocol. It executes smart contracts — Ethereum programs written in the Solidity language. The EVM is contained in the full nodes of the Ethereum network, inside of which it executes these Ethereum-user-written programs.

Any miner of Ethereum simultaneously executes smart contract code. What this means is that Ethereum programs (dapps — decentralized apps) are executed on everyone’s computer at the same time (decentralized).

Execution of these programs isn’t free, however. Miners spend their own electricity, time, and hardware to do this. To pay them for their effort of executing computer instructions (like “store the value 5 into the variable X”), the concept of gas was introduced.

Continue reading %Ethereum: How Transaction Costs are Calculated%


Source: Sitepoint

Lessons Learned While Developing WordPress Plugins

Lessons Learned While Developing WordPress Plugins

Lessons Learned While Developing WordPress Plugins

Jakub Mikita

2018-05-24T13:30:28+02:00
2018-05-24T12:27:17+00:00

Every WordPress plugin developer struggles with tough problems and code that’s difficult to maintain. We spend late nights supporting our users and tear out our hair when an upgrade breaks our plugin. Let me show you how to make it easier.

In this article, I’ll share my five years of experience developing WordPress plugins. The first plugin I wrote was a simple marketing plugin. It displayed a call to action (CTA) button with Google’s search phrase. Since then, I’ve written another 11 free plugins, and I maintain almost all of them. I’ve written around 40 plugins for my clients, from really small ones to one that have been maintained for over a year now.

Measuring Performance With Heatmaps

Heatmaps can show you the exact spots that receive the most engagement on a given page. Find out why they’re so efficient for your marketing goals and how they can be integrated with your WordPress site. Read article →

Good development and support lead to more downloads. More downloads mean more money and a better reputation. This article will show you the lessons I’ve learned and the mistakes I’ve made, so that you can improve your plugin development.

1. Solve A Problem

If your plugin doesn’t solve a problem, it won’t get downloaded. It’s as simple as that.

Take the Advanced Cron Manager plugin (8,000+ active installations). It helps WordPress users who are having a hard time debugging their cron. The plugin was written out of a need — I needed something to help myself. I didn’t need to market this one, because people already needed it. It scratched their itch.

On the other hand, there’s the Bug — fly on the screen plugin (70+ active installations). It randomly simulates a fly on the screen. It doesn’t really solve a problem, so it’s not going to have a huge audience. It was a fun plugin to develop, though.

Focus on a problem. When people don’t see their SEO performing well, they install an SEO plugin. When people want to speed up their website, they install a caching plugin. When people can’t find a solution to their problem, then they find a developer who writes a solution for them.

As David Hehenberger attests in his article about writing a successful plugin, need is a key factor in the WordPress user’s decision of whether to install a particular plugin.

If you have an opportunity to solve someone’s problem, take a chance.

2. Support Your Product

“3 out of 5 Americans would try a new brand or company for a better service experience. 7 out of 10 said they were willing to spend more with companies they believe provide excellent service.”

— Nykki Yeager

Don’t neglect your support. Don’t treat it like a must, but more like an opportunity.

Good-quality support is critical in order for your plugin to grow. Even a plugin with the best code will get some support tickets. The more people who use your plugin, the more tickets you’ll get. A better user experience will get you fewer tickets, but you will never reach inbox 0.

Every time someone posts a message in a support forum, I get an email notification immediately, and I respond as soon as I can. It pays off. The vast majority of my good reviews were earned because of the support. This is a side effect: Good support often translates to 5-star reviews.

When you provide excellent support, people start to trust you and your product. And a plugin is a product, even if it’s completely free and open-source.

Good support is more complex than about writing a short answer once a day. When your plugin gains traction, you’ll get several tickets per day. It’s a lot easier to manage if you’re proactive and answer customers’ questions before they even ask.

Here’s a list of some actions you can take:

  • Create an FAQ section in your repository.
  • Pin the “Before you ask” thread at the top of your support forum, highlighting the troubleshooting tips and FAQ.
  • Make sure your plugin is simple to use and that users know what they should do after they install it. UX is important.
  • Analyze the support questions and fix the pain points. Set up a board where people can vote for the features they want.
  • Create a video showing how the plugin works, and add it to your plugin’s main page in the WordPress.org repository.

It doesn’t really matter what software you use to support your product. The WordPress.org’s official support forum works just as well as email or your own support system. I use WordPress.org’s forum for the free plugins and my own system for the premium plugins.

3. Don’t Use Composer

Composer is package-manager software. A repository of packages is hosted on packagist.org, and you can easily download them to your project. It’s like NPM or Bower for PHP. Managing your third-party packages the way Composer does is a good practice, but don’t use it in your WordPress project.

I know, I dropped a bomb. Let me explain.

Composer is great software. I use it myself, but not in public WordPress projects. The problem lies in conflicts. WordPress doesn’t have any global package manager, so each and every plugin has to load dependencies of their own. When two plugins load the same dependency, it causes a fatal error.

There isn’t really an ideal solution to this problem, but Composer makes it worse. You can bundle the dependency in your source manually and always check whether you are safe to load it.

Composer’s issue with WordPress plugins is still not solved, and there won’t be any viable solution to this problem in the near future. The problem was raised many years ago, and, as you can read in WP Tavern’s article, many developers are trying to solve it, without any luck.

The best you can do is to make sure that the conditions and environment are good to run your code.

4. Reasonably Support Old PHP Versions

Don’t support very old versions of PHP, like 5.2. The security issues and maintenance aren’t worth it, and you’re not going to earn more installations from those older versions.

The Notification plugin’s usage on PHP versions from May 2018. (Large preview)

Go with PHP 5.6 as a minimal requirement, even though official support will be dropped by the end of 2018. WordPress itself requires PHP 7.2.

There’s a movement that discourages support of legacy PHP versions. The Yoast team released the Whip library, which you can include in your plugin and which displays to your users important information about their PHP version and why they should upgrade.

Tell your users which versions you do support, and make sure their website doesn’t break after your plugin is installed on too low a version.

5. Focus On Quality Code

Writing good code is tough in the beginning. It takes time to learn the “SOLID” principles and design patterns and to change old coding habits.

It once took me three days to display a simple string in WordPress, when I decided to rewrite one of my plugins using better coding practices. It was frustrating knowing that it should have taken 30 minutes. Switching my mindset was painful but worth it.


Source: Smashing Magazine

Top Angular Plugins for Sublime Text

This article covers a number of Angular plugins for the Sublime Text text editor.

Whether you’re new to Angular (version 2+) development, and looking to get started with it and integrate it more closely with your code editor of choice, or you’re an old hand at Angular development and you’re trying your hand with Sublime Text as a new editor, integrating the two has never been easier.

There are lots of options for Angular plugins that can smooth your way developing Angular apps using Sublime Text. You’ll need to set up the Sublime Text package manager (called “Package Control”) prior to getting started, and then you can take a look at the list of plugins here and see if any meet your needs!

Setting up Package Control

In order to use most of the Angular plugins that will be discussed in this article, you’ll first need to set up Package Control in Sublime Text. This is a fairly painless process. The easiest way involves copy-pasting a configuration code.

  1. Use the hotkey CTRL + ` or use the View > Show Console menu to bring up the integrated Sublime Text console.
  2. Paste the block of Python code into the console, which can be copied from the Package Control Installation page and follow the instructions there.
  3. Once this is done, the Package Control menus will be set up! Now, all you’ll need to do is find and install your packages.

Installing a Sublime Text Package via Package Control Menus

Using Package Control is a breeze. You’ll need to open Package Control, select the install menu, and then choose and install a package:

  1. Use the shortcut CMD + Shift + P (CTRL + Shift + P, depending on OS) to open the command palette.
  2. Type install package and then press Enter, which brings you to the list of available packages.
  3. Search for the package by name, select the package, then press Enter to install.

Angular 2 HTML Package

The Angular 2 HTML plugin provides augmented HTML syntax for Sublime Text. You’ll be able to use Angular attributes without syntax highlighting being broken. Additionally, the JavaScript parts of your pages will also highlight as JavaScript. A small but incredibly useful addition for Angular developers.

Angular 2 HTML Package Setup

At the time of this writing, this plugin was not present in Package Control, but can be installed manually via the following steps.

  1. Close Sublime Text and navigate via the Command Line to your Sublime Text 3 “Packages” folder in your application installation. In macOS, this is at /Users/{user}/Library/Application Support/Sublime Text 3/Packages.

  2. Clone the repository into your Packages folder with the following:

    git clone https://github.com/princemaple/ngx-html-syntax
    
  3. Re-open Sublime Text 3, and check in the View > Syntax menu to ensure that Ngx HTML is an option.

Additionally, you can have Sublime Text automatically highlight .component.html files with Angular 2 HTML Syntax:

  1. Open a .component.html file.

  2. Choose View > Syntax > Ngx HTML.

  3. Go to Preferences > Settings > Syntax Specific. Because your current file is using the Ngx HTML syntax, it should open the syntax-specific settings file for Ngx HTML. If so, add an extensions entry to the settings panel on the right:

    "extensions":
    [
      "component.html"
    ]
    
  4. Restart Sublime Text. Now, all .component.html files should automatically use the Ngx Syntax plugin!

Continue reading %Top Angular Plugins for Sublime Text%


Source: Sitepoint