HTTP Requests with Angular 2

The getting started section of Angular 2 was actually really well documented.  I went through the whole thing and had no problems.  Once I got to the service section, it talked about the part I really wanted: getting data.  However, I was quite disappointed when I read this line:  “Someday we’re going to get heroes from a remote server. We don’t call http yet, but we aspire to in later chapters.”

Without getting data from a remote server, I felt that I couldn’t really use this as a springboard for a working app.  As I tried to learn more about using HTTP to get data, I was surprised how much different it was than expected and how it did not feel intuitive.  I feel that I’ve found a simple way to do it that I’ve used a lot since.  I’m not 100% sure if it’s the best way (please let me know what I can improve) but it is a way that works.

HTTP is not included by default

Typical ng2 HTTP methods are not included by default.  I don’t understand it.  Maybe it’s just me that feels that if you build a web app you’re going to want to make HTTP requests.

So, let’s get to it.

First, let’s handle the calls using a promise.


// Service
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

@Injectable()
export class ClassService {
    constructor(
        private http: Http) {}

    public getClassLists(): Promise {
        const endpoint = `https://domain.com/getStuff`;

        return this.http
            .get(endpoint).toPromise();
    }
}


// The component receiving the data
import {
    Component,
    OnInit
} from '@angular/core';

import { ClassService } from "../../services/class.service";

@Component({
    selector: 'classes',
    styleUrls: ['./classes.scss'],
    templateUrl: './classes.html'
})


export class ClassesComponent implements OnInit {

    constructor(
        private classService: ClassService
    ) { }
    public ngOnInit() {

        this.classService.getClassLists()
            .then((data) => {
                console.log("data", data);
            });

        
    }
}

Easy as pie, am I right? If you’re a fan of observables, we can do it that way too.


// The service
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class ClassService {
    constructor(
        private http: Http) {}

    }

    public getClassLists() {
        const endpoint = `${GlobalVariables.globalAPIURL}0/lanschool/classLists`;

        return this.http.get(endpoint)
        .map(res => res.json()
    }
}




// The component receiving the data
import {
    Component,
    OnInit
} from '@angular/core';

import { ClassService } from "../../services/class.service";

@Component({
    selector: 'classes',
    styleUrls: ['./classes.scss'],
    templateUrl: './classes.html'
})

export class ClassesComponent implements OnInit {

    constructor(
        private classService: ClassService
    ) { }

    public ngOnInit() {

        this.classService.getClassLists()
            .subscribe( res => {
                console.log("data", res);
            });

        
    }
}

Ta da! Now you have http data!

CSS Selectors Are fun

From my title, you may think I’m being sarcastic but I’m really not.  CSS selectors can be frustrating sometimes and when we don’t understand them but when we understand the power of them is really very impressive!  Some of things you can do with them border on Javascript like. (oooOOOOO).

Basic selectors

This part is pretty easy.  A “.” represents a class, no dot and you’re selecting just the element.  You can see it reflected in the Codepen below.  Isn’t pizza delicious?  You can also select with ids (“#”) but it’s generally seen as bad practice to use IDs as selectors in CSS.

[codepen_embed height=”268″ theme_id=”0″ slug_hash=”rVKdbG” default_tab=”html” user=”Fixyourcss”]See the Pen <a href=’http://codepen.io/Fixyourcss/pen/rVKdbG/’>rVKdbG</a> by Jordan Hansen (<a href=’http://codepen.io/Fixyourcss’>@Fixyourcss</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

CSS stands for “Cascading Style Sheets” which means the styles apply top to bottom (this goes for css files as well).  It is, however, interesting to note that there are exceptions to this rule based on specificity.  Selecting a class has more precedence than selecting just an element (otherwise the .sword would be overwritten by the div selector) because it is more specific than just the element selector.  There is an “!important” command, which allows you to overwrite anything (except another !important tag that is lower in the Cascade).  You generally want to avoid using this.  CSS tricks has written an article about when it’s okay to use !important and it’s worth reading.

Here at Fixyourcss, we generally don’t have access to all or any of the code.  It also can get very messy and we don’t know what file is doing what and what is being loaded in what order and if there is maybe some javascript applying some css styles.  So, that’s when we bust out the !important tag.

Advanced (read fun) selectors

These CSS selectors are really powerful.  Take a look below.  We can make active things change with “:hover” (this can also be used for :active, :focus, and :visited).  We can select children by placing a space between selectors, with it going from parent to child from left to right.  Want to only select an element with two specific selectors?  Just put them right next to each other, like “.spanContainer.secondContainer”.

And this little nuget that I think is pretty great!  At the very least it’s kind of helpful when you’re trying to figure out what styles are applying to what.  A selector like “.spanContainer:hover span” will make it so that when the parent is hovered over, the child span will receive the styles you want to apply to it!  Not knowing this (like I didn’t for a long time!) can make for some confusing times when you’re trying to figure out why the style isn’t being shown on the element that you are hovering over!

 [codepen_embed height="268" theme_id="0" slug_hash="MwXGWo" default_tab="result" user="Fixyourcss"]See the Pen <a href='http://codepen.io/Fixyourcss/pen/MwXGWo/'>MwXGWo</a> by Jordan Hansen (<a href='http://codepen.io/Fixyourcss'>@Fixyourcss</a>) on <a href='http://codepen.io'>CodePen</a>.[/codepen_embed]

The moral of all this is that you can do a LOT with CSS selectors.  They allow to easily touch any element in your page and apply the necessary styles.  Get used to them and use them!

This MailChimp shortcode is now deprecated. Please insert the new shortcode to display this form.

CSS Frameworks and why you (and everyone!) should use them

CSS frameworks are amazing.  Even if you are one who shuns the use of a template for your web page, I really don’t feel that there is any reason a framework should be not be used in pretty much every web project.  They offer so much with so little cost.  Here’s a list you should take a gander at if you’re not sure which one to use.  I personally use bootstrap for all of my projects.

Responsive

Having a responsive website has been important for the last few years but since Google’s change to actually boost the ranking of mobile-friendly sites (aka punish non mobile-friendly sites), it’s essential if you care about ranking at all.  Looking at the list I provided above, the first nine frameworks include responsive support.  That means by default your site will scale based on the media consuming it.

This is amazing.  You don’t even really have to think about it anymore.  You don’t have to hand craft your media queries for each possible outcome and test them all.  You can feel safe knowing that they have all already been tested and provide a great mobile experience right out of the box.

No need to reinvent the wheel

Need a modal?  How about a popover?  Tabs?  Accordions?  The modern frameworks have you covered.  Just include the js and css files, apply the classes to your elements and BAM you are set.

Have a situation that is a little trickier?  It’s likely that it’s been done already with the more popular frameworks (Bootstrap).  I like to use a site called Bootsnipp.  It has snippets that others have produced for their issues.  Things such as a custom login/registration, profile pictures, pricing tables, and spinning social icons.  It’s well worth checking out as it can save you a lot of time and headache.

Even if you can’t find what you need from Bootsnipp or the standard framework, using something like this allows you to reach out to the communities behind them and ask for help.  The tag “twitter-bootstrap” alone has 46,246 questions on Stackoverflow.  Lots of people will be there to help and easily understand your problem when you use a popular framework.

CSS Frameworks have great implementation and documentation

Like I said, I typically use Twitter’s bootstrap and the documentation they provide is amazing.  Just include the css and js files and you can lean on any of their classes.  The documentation they provide it outstanding, complete with code snippets that you can just copy and paste into your page.

Using CSS frameworks will make the front end CSS side of your project so much easier and I highly encourage.  There are a lot of great, open-source solutions that are worth using.

Have a framework that you love?  Have a reason to hate CSS frameworks?  Please drop a comment below and let me know!

This MailChimp shortcode is now deprecated. Please insert the new shortcode to display this form.

 

The value of your marketing efforts

love_money

Tracking things is important!  As I was meeting with a client last week and explaining to him a way to value each lead it dawned on me that my accounting degree is actually incredibly helpful for digital marketing.  If you can find out the value of each visit, click, and action, then you can easily decide how much it’s worth to pay for that action.

Let’s go over a quick formula to help you find the value of your marketing efforts.

Value of each event

This formula is pretty simple in practice but there are a few different ways you can do it.  For this example we’re going to try and track visitors.  We’ll start simply with profit / visitors, where the item can be anything from a product or a large contract.  So if we are receiving $200,000 profit in a time period and we have 50,000 visitors, then the value of each visitor is $4.

So, why is this important?  Because it means if every visitor is worth $4, then you can safely spend $3.99 for each visitor!  Most of the time I tell a client this, they’re like…but then I only make $.01 per visitor!  While this is true, with the numbers this formula is giving us we can spend $3.99 a billion times and still make $.01 per visitor.  I’ll take a billion pennies any day.  Of course it’s not likely that you’ll have a billion visitors and so you need to keep checking this formula and following the value of each customer and spending accordingly.

Moral:  Check the numbers from this formula often.  The more it’s used, the more accurately you’ll be able to find the value of your marketing.

Not all visitors are created equalvalue_of_sources

It’s VERY important to note that the above formula is super broad and really should not be implemented without being more specific.  Let’s look at the above picture taken from Google Analytics and make some assumptions.  We’ll assume that $57,069 is our profit (ha).  With these numbers, we can easily see that the value of each session is $3.50 (57069 / 16312).  That means it’s an okay idea to spend $3.49 or less on advertising to secure a session, right?

Probably not.  Look at the facebook referrals and assume they are actually ads.  For this segment, for each facebook visitor is only worth $2.41.  If we don’t look at the individual segments and know what is driving each, then we could be making a very bad error.  Paying over $2.40 per facebook visitor will result in a lot of pain as long as these numbers hold true.

For things that drive organic, google traffic (blogging or whatever magic you are doing) it’s worth it to spend $3.48 for each increased visitor.  There are a lot of other metrics for this that you can and should track (you set up goals already, right?), like how many visitors each blog post brings in and how many of them are converting to sales but with that simple formula, profit / #ofevents, you can really get a better feel of what is okay to spend on marketing.

Worthy mentions

It’s also worth mentioning that profit has several definitions.  The easiest way to track it is profit per item or profit per contract or whatever.  But you really should also take into account overhead into this as well.  Rent and other fixed costs should be accounted for to make sure you are using an accurate number for profit.  When in doubt, be conservative.  You don’t want to find out that you’ve been spending too much on marketing and that each visitor has actually been a loss.

Have some cool tricks to track and evaluate the value of your customers?  Please feel free to mention them in the comments below!

This MailChimp shortcode is now deprecated. Please insert the new shortcode to display this form.

 

Why developer tools are awesome for doing CSS

I feel that for anyone doing serious CSS, using developer tools make it sooo much easier.  I’m going to talk about Chrome’s tools today because that is what I use but I believe both Firefox and Safari have strong tool kits when it comes to dev tools.

You can see the changes right thene!

It’s amazing.  This is something probably most pick up (hopefully) pretty soon after they start developing.  You don’t have to ctrl + s and then refresh over and over, testing the different changes.  Let’s go ahead and make those changes in the browser and watch it happen!

Let’s try this in action.  My example is going to be from a gdetach_toolsreat place to go for help – stackoverflow.  Hit F12 to open your developer tools and then you can start making CSS changes right then.  I like to detach my tools and put them on a separate monitor (see screen shot) but you certainly don’t have to.  Just click, hold, and select the bottom option to detach.

SO_top

Now, those buttons look pretty nice but let’s say I want to make them a bit bigger.  From your developer tools you need to find those elements.devtools_mag_glass  There are several ways you can do this. I typically just right click and say “inspect element”. This will jump your dev tools right to the element you’re looking for.  Sometimes it’s trickier than that, so you can also use the magnifying glass to find any element in the page.

See all those styles on the site?  All of those can be changed on the fly.  Each time you change them, you see how it looks reflected immediately in the browser.  So, try increasing the font-size and see if that does what you want.  No?  Okay, adjust the padding.  Got it?  Good.  Now either find those selectors in your CSS code and adjust them accordingly or ghetto it out and use those selectors and overwrite the previous CSS. dev_tools_styles

#hmenus .nav ul li a {
padding: 4px 10px 5px;
font-size: 25px;
line-height: 1.3;
color: #fff;
background: #858d93;
-webkit-transition: background, 0.15s, ease;
-moz-transition: background, 0.15s, ease;
-ms-transition: background, 0.15s, ease;
-o-transition: background, 0.15s, ease;
}

Adjusted the font up to 25px.

Computed Styles

When you are going back and working on someone else’s stuff (every day life here at FixYourCSS), it’s pretty common to not know why the styles are acting the way they are.  It can be tricky digging through all the layers to see what is and what isn’t responsible so dev tools has another awesome help for this.

If you look at the picture above, you can see we are in the “Styles” tab of the tools.  Right next to it you can also see a “Computed” tab.  This displays all the active styles being applied to the selected element.  You can also click on the magnifying glass next to the style and it will quickly take you to the style under the “Styles” tab, where you can edit it and find the location of it in your style sheet.

Bonus

Under the “Styles” tab there are some other goodies that are dev_tools_goodiesworth mentioning.  They live in the top right hand corner, as seen in the picture here.  The plus button will add a completely new style, including a new selector.  The next one is how you test your CSS element state (hover, active, focus).

I really LOVE working in developer tools.  It allows such freedom to be able to play and see how things look immediately.  It’s such a powerful too and I feel that ANY developer (especially front end) needs to be using them.

Have some great developer tips to add?  Please feel free to contact us or leave a comment below!  We’d love to have your input!

This MailChimp shortcode is now deprecated. Please insert the new shortcode to display this form.

 

How to start with Optimizely (mind blowingly easy)

When I first started researching digital marketing and testing conversion rates, I heard of Optimizely.  I glanced at it briefly but it wasn’t until I tried it out that I saw how amazing it was.  I almost feel that they need to sell it better on that front page because it certainly doesn’t show how amazing and simple it is.  Getting started with AB/variance testing with Optimizely is amazingly simple.

What you will need

  • A landing page
  • Access to your landing page’s code
  • Optimizely account (free)

First step is to create a free Optimizely account.  It’s free for the starter plan and it’s already a very powerful plan.  Once you’re in, you’re going to create an experiment.  Most important part here is to make sure to give it the url that you have access to since you’ll need to insert JS code in that page

.optimizely_first

Now we get to the fun part.  Optimizely can do a lot.  The two things we’ll touch on here are making a slight page variance and testing two completely different landing pages.  Both are super easy.

Making a slight page variance

So, we start with our page.  It’s going to be a pretty standard landing page.  It’s for an insurance company that, naturally, wants to get as many quotes as possible, to “QUOTE” is the predominant call to action.  However, the quote form is very in-depth, understandably.  I have suspicions that maybe a big phone number might lead to more quotes because they want to talk to someone and not have to fill out a form that may or may not work.

optimizely_two

I want to swap that primary call to action with a phone number.  So, I click it, “Edit element” > “Edit HTML” and then make the necessary changes to my elemenoptimizely_threet (replacing the text with the number I want them to a call (a google voice forwarding number, of course, so I can track which calls come from our change).  It’s that easy!

Behold!  Now we have a variance with our phone number!  (And, if you need commercial insurance, call that number.  They’re good people).   So you can go ahead and create new HTML elements, move around current ones, or whatever you’d like to test.  It seriously is that easy.  It’ll create it all with this variance (or whatever variances you’d like) and then split test them for you.

Notice at the top it says “Original” and “Variance #1”.  Let’s look at the awesome options we get up there.  See “Redirect to a new page”?  That’s a way to test a completely different landing page to see which converts better.  You’d need to be able access that site’s code as well to insert the javascript snippet so you can track the events on both.optimizely_four

So, now let’s put this test into action!  Click the “Start Experiment” button in the top right and an overlay will appear with your javascript snippet.  Just make sure to insert that snippet into your page and you are good to go!  By default it’ll allocate the traffic at a 50/50 split but you can edit this as you see fit.

There!  I told you getting started with Optimizely was easy!  Now you can easily split test any variance or different landing page with ease.

This MailChimp shortcode is now deprecated. Please insert the new shortcode to display this form.

Two things every new website needs (Google Analytics with goals)

GA_realtime

So you’ve got a shiny new website.  And whether you’re trying to sell, get information about your business out there, or just get more viewers on your blog, you want to be able to see how many are visiting your site and if they are taking the desired actions that you want.

If your main goal is to sell products but no one is viewing your store/products, that means something is probably wrong either with your site design or the traffic you are getting isn’t the traffic that you are wanting.  To be able to see this, we need google analytics installed and we need to set up some goals within google analytics.  Once I set it up, I loved watching the real time feed.  I still love it.  People were looking at something I set up!

GA_realtime
Best feeling ever

Google Analytics

Now let’s get it set up!  Go set up an account with Google Analytics (very simple).  From there you’ll be provided with a Tracking ID and some javascript.  If you’re using WordPress, all you need is that Tracking ID.  For my WordPress sites I use Google Analytics by Yoast.  Easiest way to find it is probably through the WordPress Plugins.  Once installed, just go to settings and either enter your Tracking ID manually or authenticate with your google account.

If you’re not using WordPress, simple copy the javascript and put it somewhere in your layout (hopefully you have some sort of framework with a layout).  If you don’t have a layout, it would need to be on every page you need tracked.

GA_tracking

GA_realtime

I always confirm that it’s working by opening an incognito window and visiting the site.  From Google Analytics go to the Reporting tab at the top and then Real-Time, Overview.  Within a minute or two (at most) you should see an active user on your site (you)!

 

Google Analytics Goals

I really feel that setting up Google Analytics goals is one of the most overlooked but most important steps of setting up great analytics.  Like it is essential.  When you create your website, you generally have a goal in mind and this needs to be tracked so we can test and improve.

Simplest things to track are pages.  If you want people to go to your contact page or you have an “order complete!” page, then you’d definitely want to have a goal for this.  In fact, if you have a cart, I’d recommend tracking the pages where people add something to a cart so you can see how many are creating carts and how many of those are bouncing and where so you know what part of your flow you need to improve.

Go to the Admin tab in Google Analytics and select “Goals” from the “View” column.  You’ll then create a new goal.  There are three steps here and for the first whether you pick a template or custom really makes no difference.  Just pick one, go to step two and change the goal name. Typically “Destination” or “Event” are the type of google analytics goals that I track.

For now, let’s go with “Destination”.  Then on step three GA_goalwe’ll choose the destination that will count as “accomplishing” the goal (client going to our contact page or our “order successful!” page).  Remember that you’ll just want the end of the URL and not the domain name, as seen in my picture.  I generally always change it to “Begins with” in case of query string parameters.  Then we “Create Goal” and we are done!  Yay!  Now we can start to track how many people are going to our goals AND from what source are the people going to our goals.

This is VERY important if you are doing any kind of SEO or PPC work.  You could be getting (and paying for!) a hundred clicks a day but if you don’t have goals set up, you will not be able to know whether any of those clicks were the ones converting (whether that conversion be a sale or just request a quote).  If they aren’t converting, we really don’t want to pay for those clicks.

For example, go back to your “Reporting” Tab, then Acquisition, All Traffic, Source/Medium.  As you can see from my picture, the people that are converting are NOT from my adwords campaigns.  This means that after a little more testing, I will either change my ad or just stop it altogether.

soruce_medium_conversions

I wanted to leave one final note that Events are also very helpful for using for goal creation.  You can track any click (or any event) that happens and then report that to Google Analytics.  It’s fairly simple JS and if you need help implementing it please drop me a line and I’ll be more than happy.  If you are using WordPress and GravityForms a very simple (but awesome) Plugin is Gravity Forms Google Analytics Event Tracking.  With it, you can simply add which part of the form you want to trigger which event.  Again, I’m not going to go into it in detail but if need help at all, feel free to reach out.

Want to learn more?  Subscribe below!

This MailChimp shortcode is now deprecated. Please insert the new shortcode to display this form.

 

Proverbial Blisters – Getting your code on the web

Proverbial Blisters

When I learned to code even the tiniest bit of html I felt awesome.  Coding is like magic to me.  I type in what I want and it makes it happen.  I love it.

As I got better, however, I noticed that I was getting very good at one part of building websites but still knew next to nothing about another, very important part.  And that was the actual deployment of the website.  I didn’t know how to get my code out into the actual world wide web outside of my corporate environment, where I hit shift+u and dreamweaver made it happen.

I am, frankly, still kind of embarrassed by this.  I’m not sure but I think it’s probably a fairly normal thing for programmers to not necessarily be familiar with the web hosting side of things.  Not knowing how to do this felt as bad as the blisters that I got from running in the outfit shown in the picture above.

So, I’m going to talk about three ways to throw your code up on the internet so everyone can appreciate your coding ninja skills.  Here they are:

CPanel File Manager (easiest)

Things needed: Webhost (godaddy, namecheap, bluehost, me)

The host I work with (namecheapand a lot of other hosts provide a control panel aptly named…cpanel.  Whether it’s cpanel or something else, all the normal ones will provide some way to access your files.  This makes it immensely easy to throw your code up there.

You just click File Manager as shown in the picture here and it will take you to your files.  Below I talk more about where to put your code but it’s set up pretty simply and you just upload your code and then see it live!  This method makes it a little slower than the FTP method below because you can’t really mass upload/download.

Cpanel

Basic FTP (easy)

Things needed: Webhost (godaddy, namecheap, bluehost, me), FTP software

Any web host will provide you with some sort of ftp credentials.  With these credentials you can access your code using some sort of (free) software.  I use FileZilla (I’d use the additional download options to avoid bloatware).  The credentials will generally include a domain name, username, and password.  I’ve included a picture of what filezilla looks like.  On your left you have your local code and on your right you have your server code.

FileZilla

Where to put your code

This applies to any method for most webservers.  Most php servers will generally have a public_html or something like that where your front side code will reside.  If you want to test to make sure it works (and why wouldn’t you??) just make a simple index.html and put it in the public_html directory.  The web server will by default open index.html at your home level (aarmora.com will show /public_html/index.html unless we tell it otherwise).  It also responds to standard file structure.  /public_html/pizzaMcFace/ilovepizza.html can be seen by navigating to aarmora.com/pizzaMcFace/ilovepizza.html.  And I do love pizza.

Firebase (harder, more fun, free!)

Things needed: Nodejs, firebase account, fingers (or anything with which you can type)

I love this because you can put your code out there for anyone to see without owning a domain or paying for a webhost.  Before I had a stable webhost, I would often use this to show clients previews of work I was doing because it was just so fast and easy.

Seriously don’t be intimidated by node and firebase for this method.  We are just using the node package manager and just the hosting of firebase.

So, first, download nodejs for your appropriate OS and install it.  It is very straight forward.  A few accepts and nexts and you’re done.  This will install a command prompt that is set up for using nodejs.

Now let’s make a Firebase account.  Once you have it open you can create a new app from your dashboard.  The app url you choose here will give you your Firebase hosting url.

Firebase dashboard

 

With that account and app created, we find the nodejs command prompt that Node installs for us and download the Firebase deploy software (firebase’s guide can be found here) by just typing npm install -g firebase -tools at the command prompt.  After this, you’ll want to change the directory to where you code lives.  As seen in the picture below, mine is at c:/sites/tester, where I have an index.html file.

From there, I start the Firebase magic and simplicity.  We just type in firebase init and it’ll probably have you sign in and then confirm which app you want to use (just type in the app’s name).  It’ll ask you what the public directory should be and you should just hit enter to confirm that you want to use the current directory.  It’ll set you up and then it’s just firebase deploy and you will be live!  My index.html file had some pretty complex code, or “hey dudes”, as you can see on my live app!

Firebase from console

 

So, there are three simple ways to get your code on the internet so you can show you spouse, best friends, and mom.  You have now contributed to part of the world wide web!

Want more great information?  Subscribe below!

This MailChimp shortcode is now deprecated. Please insert the new shortcode to display this form.