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

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

CSS tutorial: Create text bubbles that resize & truncate text

Standard

Dealing with dynamic text can be particularly troublesome for designers especially when there is no min/max length. Truncation is nice for large amounts of text but doesn’t apply to inline elements that scale nicely for small amounts. Well, proof of concept time.

Play with the sample code

flexible-textbubbles

So, as a web developer, have you ever been asked to add a text bubble to your page?

No problem. Super lazy way would be to cut a background image. A better, less lazy way would be to add a little border-radius here, and and some padding and you’re done.

Did your designer ask for the width of the bubble to be dependent on the dynamic text?

Sure, put the background color on a span so that width is based on the text.

Oh, did she mention that the text needs to also truncate nicely when it becomes longer than the content area?

… shit.

The trick here is the have two nested elements. One inline, and one block.

  • inline elements (like spans) get their width based on the content. Thus add the background color to the inline element.
  • block elements (like divs) have a fixed width and thus can also have overflow properties.

A few things to note

  • Need to hide the overflow and set the ellipsis for the text. (Line 6)
    overflow: hidden;
    text-overflow: ellipsis;
  • Need to prevent line wrapping. (line 17)
    white-space: nowrap;
  • Need to add the same border radius on both containers. This way the border is applied when both short and when cropped long.
  • The pointy is a css pointy as shown here.

Play with the sample code

Code Corner

Standard

New thing I learned today: text-overflow: elipsis and rem units

You can truncate a line of text with an elipses (or other string) at the end.

Doesn’t work for multi-line text blocks. Browser limited to firefox 7+.

text-overflow: elipsis;
white-space: nowrap;
overflow: hidden;

You can also use rem for units instead of ems

Reference: Jonathan Snook

html { font-size: 62.5%; } /* bases font size = 10px */
body { font-size: 14px; font-size: 1.4rem; } /* 14px */
h1 { font-size: 24px; font-size: 2.4rem; } /* 24px */

Chinese language tips for web design

Standard

Update 2010, Oct 26 – New discoveries, much better font reference confidence

Recently I needed to work with some Chinese and we had tons of trouble trying to figure out which fonts to use and how to specify them in CSS. After a lot of detective work and comparing long font lists we found some basic font choices that should work on both PC and Macs that have Chinese language packs active. The process was PAINFUL…

After several months, this is coming up again as we define our style guide. I found a new article which describes and provides screen-shots for 5 common mandarin fonts. He lists in order,

  1. 宋体, Song Ti, a serif font very common in site font declaration
  2. 黑体, Hei Ti, a sans-serif. (We picked this one for body text)
  3. 幼圆, You Yuan, a rounded font like comic-sans without the stigma.
  4. 隶书, Li Ti, a brush script.
  5. 微软雅黑, Microsoft Ya Hei a sans-serif, supposedly not fully supported yet designy

Some [updated] Chinese Website tips:

  1. Specify English fonts first and then the Chinese fonts in your font list. This makes it so English fonts render with your desired fonts then the Chinese fonts pick up the other characters. font-family: futura, arial, Hei, “微软雅黑”, “宋体”, sans-serif;
  2. Standard chinese sans-serifs are: 黑体 (Hei ti), 微软雅黑 (MS Yahei)
  3. The standard chinese serifs is: 宋体 (Song ti)
  4. Set a meta tag to display chinese charset: utf-8. <META HTTP-EQUIV=”content-type” CONTENT=”text/html” charset=”utf-8″>
  5. My final recommendation for a sans-serif font stack is: font-family: arial, 黑体, 微软雅黑, 宋体, sans-serif;

References:

DVD drive not found – a solution!

Standard

My Toshiba has problems. That said, every now and then it can’t find it’s own DVD drive. No power no detection, nothing. I’m suspecting iTunes is the culprit but who knows. In any case I found out that there’s a simple solution posted around the web but I found it in a forum here.

Steps

1) Open regedit.exe (Start menu > run, type regedit, and the exe should be listed)

2) Locate the following reg file in the following path:

HKEY_LOCAL_MACHINE
SYSTEM
CurrentControlSet
Control
Class
{4D36E965-E325-11CE-BFC1-08002BE10318}

3) Delete the values for the Upper and Lower filters.

4) Restart