Installing Bower packages in Angular

Standard

Learned something dumb today. I was having trouble getting the angular-scroll package to work at all. Then I remembered having similar problems months ago. Best to write this down to remember once and for all.

Add the –save flag

Most front-end packages on GitHub have installation procedures that look like this:

However, if you’re using a task manager like gulp or grunt to squash vendor scripts, you’ll probably also need to add the --save  flag in order to actually add the package to your bower.json config file.

Add the package to your angular module

Can’t also forget to add the package to the angular app module

Marketing Learnings

Standard

I’m getting started handling the Google AdWord Campaigns over at ClearGraph. Here’s some of the more interesting tid-bits I wouldn’t have found without talking to the Google consultants.

Ad Extensions are awesome

The content under the ad description are ad extensions. You can place as many as you want without costing you any extra per click. It’s an interesting way to incentivize people to provide structured content compared to the rather tiny description character limit.

Retargeting search ads

You can increase your search ad bid for Google cookied people who previously visited your site. This helps you appear on top more often in normal keyword searches. As a by-product, it also improve ad quality score since they’re more likely to click your ad. Suggested increase was +40%.

Better conversion tracking using position based attribution

Sometimes people will click on more than 1 ad before signing up. By default, only the final ad gets a conversion point. Like a sport’s assists, the “position based” model splits the conversion point between all ads that contribute to the conversion.

Tools > conversion actions > attribution model, pick “position based”.

Track Cross-device conversions

For some reason, it defaults to false.

Tools > settings, check “Include cross-device conversions”.

Angular notes and animation

Standard

Two quick things I wish I knew about angular:

  • ng-repeat fcns only work on arrays, not js objects
  • use different classes for animating ng-hide vs. ng-if

ng-repeat

  • filter
  • orderBy
  • limitTo

Animation classes

  • ng-hide, ng-show: .ng-add, .ng-remove
  • ng-if: .ng-enter, .ng-leave
  • add/remove classes: .myclass-add, .myclass-remove
  • There’s also -active (end state), -stagger (use for delaying)

Sass media Queries

Standard

CSS Media queries for high res screens are a pain to research. Too much noise/complaining/explanation, not enough actual code. So I thought I’d post my version for people to see in simplicity. (Note: it’s in sass) Tested on normal and retina screens: Chrome 41.0.2, Safari 8.05, Firefox 37.0.1, iOS 8.3

Sass media query mixin

Usage in my scss partial (like _header.scss)

HTML Viewport tag

Responsive images with srcset and sizes

Standard

Eric Portis has written the best tutorial/explanation I’ve seen yet on implementing responsive images. I gave up on making responsive images when working on my portfolio because I couldn’t find consistent and understandable best practices. Now I may go back and try it again.

The key takeaway is that you declare the format of the image with srcset and then use the sizes attribute as the media query.

The tutorial: Srcset and sizes

A quick reference example:

Quick tip: Use Markdown with Drupal

Standard

To use markdown on Drupal, you apply it as a text filter. Your content stays as-is then gets processed (through a filter) using Markdown before being displayed on your site as html.

Install a markdown filter module

  • Find a filter module like Markdown Filter
  • Copy link to download tar.gz link
    copy-link
  • In the modules area, Install a new module, Paste in the url
    install paste-url

Enable the markdown module (in module section)

enable

Apply markdown filter (in configuration section)

  • In the configuration section, go to the Content Authoring, Text format section
    config
  • Add a new text format
    add_text_format
  • Make sure you check markdown
    text-format-options

Select markdown as a text format in your content type

manage-fields

Feminism

Standard

Just attended a meeting promoting Women in the workplace and I’m annoyed at some poor messaging – leading to some feeling that men are excluded or contributing to the problem. It’s super important to keep the messaging focused on inclusiveness of women/men. Let’s not marginalize men who’d otherwise agree to the ideals.

How can we affect change the world, when only half of it is invited or feels welcome to participate in the conversation? -Emma Watson

Good

  • Hold sessions for skills needed by women but not “gender targeted”, all encouraged equally to participate
  • Highlight how gender inequality affects both men and women
  • Explain situations of gender stereotypes perpetuated by both men and women

Bad

  • “Women only” skill sessions
  • Highlight only gender problems that women face
  • Explain gender stereotypes perpetuated only by men

Icon font character encoding

Standard

Using icon fonts, had some trouble figuring out how to display as a character vs in css content. Basically you can swap out &#x with \. CSS is more proper due to accessibility.

In HTML, using hex:

In CSS, using content property (you need to use utf-8 that looks like \)

Clickable shortcut to change hosts file

Standard

I need to regularly edit my mac’s hostsfile (multiple times a day). I want to make it easy to get to the file, so I created a clickable alias and put it in my dock. Here’s a guide to creating it.

Process:

  1. Create command file

    The command file runs a terminal script. In this case it opens the host file in nano with admin rights

    • In text edit, create a file with the following text:
    • Save the file as:
  2. Make command file executable

    • Open up Terminal.app (Applications/Terminal)
    • change directory to find your hostfilescript.command
    • type in
  3. Using the command file

    • Double click the icon for hostfilescript.command to execute the command. This will ask for your computer’s password.
    • edit the hosts file. hit ‘control + o’ (o as in oscar) to save. hit ‘enter’ to confirm. hit ‘control + x’ to exit.
    • You can drag .command file to your dock for easy access
    • You can change the icon for the file to something pretty by right-click > get info. Copy/paste a pretty image for the icon

Side effects:

  • I can only edit the hosts file in nano. I’d like to use sublime or even text edit, but I haven’t debugged permissions yet.