Name:  Kyle Baker

Internship, Co-op or Research Site: Federdal Housing Finance Agency

Major(s)/Minor(s):  Graphic Design/Media Communication Studies

Expected Graduation Year: 2016

Briefly describe your internship, co-op, research, or service- learning opportunity, including your day-to-day tasks, responsibilities, and assignments.

As an intern for the Federal Housing Finance Agency (FHFA) I specifically worked for the Office of Congressional Affairs and Communications (OCAC). For my duration there I worked under the guidance of my supervisor assisting and in some cases even speerheading a series of informational FHFA video projects that were used both internally and externally. The title of one of the videos was called “FHFA: Strengthening Today and Securing Tomorrow.” This video was to be used for external general audiences looking to better understand what FHFA does and how it impacts them.

What have you enjoyed the most about your position or organization/company?

I enjoyed the professional nature of the position. It was my first time ever working a federal government job before but it was definitely an experience that was quite unique.

What have you gained from your experience that you could not have gained from another opportunity?

Federal Government experience. Trust me when I say, that it is without question a different breed of animal when it comes to things such as professionalism.

What advice would you give to another student who is seeking an internship or similar experience?

Never feel intimidated by whatever nature of position you are taking on nor feel that you don't have enough experience to perform well.

How do you see your experience as meaningful? This might involve skills you’ve gained, information you’ve learned, mentors you’ve connected with, or projects you’ve completed.

Honestly, if I had to describe this position in two words I would say "Rewardingly Challenging." When I was hired my supervisor explained that although I was an intern I shouldn't didn't expect the bulk of my duties to be making copies, taking phone calls or doing anything menial like that can typically come with the territory of being an intern but you don't really get any true experience from. I would be receiving the same caliber of workload and assignments was told from day one that I would be receiving the same caliber of workload and assignments that anyone on their actual staff would be required to complete as well be held to their same standard of performance. So although it was at times challenging, it was definitely the type of challenging that you wanted because you knew you were truly getting something out of it.

Please provide a short quote about what you liked most about your position / earning internship credit / the internship placement process / the Shriver Center:

To requote what I said in a previous question mine would simply be the following:

Honestly, if I had to describe this position in two words I would say "Rewardingly Challenging. Because although at times it was challenging, it was definitely the type of challenging that you wanted because you knew you were truly getting something out of it."

Name:  Kyle Baker

Internship, Co-op or Research Site: Federdal Housing Finance Agency

Major(s)/Minor(s):  Graphic Design/Media Communication Studies

Expected Graduation Year: 2016

Briefly describe your internship, co-op, research, or service- learning opportunity, including your day-to-day tasks, responsibilities, and assignments.

As an intern for the Federal Housing Finance Agency (FHFA) I specifically worked for the Office of Congressional Affairs and Communications (OCAC). For my duration there I worked under the guidance of my supervisor assisting and in some cases even speerheading a series of informational FHFA video projects that were used both internally and externally. The title of one of the videos was called “FHFA: Strengthening Today and Securing Tomorrow.” This video was to be used for external general audiences looking to better understand what FHFA does and how it impacts them.

What have you enjoyed the most about your position or organization/company?

I enjoyed the professional nature of the position. It was my first time ever working a federal government job before but it was definitely an experience that was quite unique.

What have you gained from your experience that you could not have gained from another opportunity?

Federal Government experience. Trust me when I say, that it is without question a different breed of animal when it comes to things such as professionalism.

What advice would you give to another student who is seeking an internship or similar experience?

Never feel intimidated by whatever nature of position you are taking on nor feel that you don't have enough experience to perform well.

How do you see your experience as meaningful? This might involve skills you’ve gained, information you’ve learned, mentors you’ve connected with, or projects you’ve completed.

Honestly, if I had to describe this position in two words I would say "Rewardingly Challenging." When I was hired my supervisor explained that although I was an intern I shouldn't didn't expect the bulk of my duties to be making copies, taking phone calls or doing anything menial like that can typically come with the territory of being an intern but you don't really get any true experience from. I would be receiving the same caliber of workload and assignments was told from day one that I would be receiving the same caliber of workload and assignments that anyone on their actual staff would be required to complete as well be held to their same standard of performance. So although it was at times challenging, it was definitely the type of challenging that you wanted because you knew you were truly getting something out of it.

Please provide a short quote about what you liked most about your position / earning internship credit / the internship placement process / the Shriver Center:

To requote what I said in a previous question mine would simply be the following:

Honestly, if I had to describe this position in two words I would say "Rewardingly Challenging. Because although at times it was challenging, it was definitely the type of challenging that you wanted because you knew you were truly getting something out of it."

It’s Tuesday and that means the Treehouse Show here! In Episode 65 of The Treehouse Show, Nick and Jason (@jseifer) talk about generating favicons and best practices with them, a new icon font called Ionicons, and much more. There’s even a link to a snazzy chart that lists the equality of zeroes in JavaScript which is a pretty welcome cheat sheet if you’ve ever run in to weird bugs in your front-end apps.

This Week’s Links

• Contrast Ratio: Easily calculate color contrast ratios. Passing WCAG was never this easy!

• Favicon Generator – Generate favicon pictures and HTML

• Ionicons: The premium icon font for Ionic Framework

• Zeros in JavaScript

• Responsive design, screens, and shearing layers — Unstoppable Robot Ninja

• offline

• Snazzy Maps – Color Schemes for Google Maps

The post Contrast Ratio, Favicons, and offline JavaScript Apps – Treehouse Show Episode 65 appeared first on Treehouse Blog.

This is one of those tricky CSS things that I see come up every few months. I guess what better place to address it than CSS-Tricks eh?

The situation involves ragged-right inline text. Like when a paragraph of text breaks to the next line whenever the next word won't fit (i.e. most text on the internet). You want to add a background behind that text which:

1. Follows the ragged-right edge
2. Is padded along both the left and right edge of each line

What you can't do is simply apply a background and padding to, say, the <p> element. Paragraphs are block-level, so the background will simply be a rectangle and not follow the ragged-right-ness.

You also can't simply apply the background and padding to a <span> or an inline element. The left and right padding will only apply to the very first and very last line. On each of the middle lines, the background will butt up immediately next to the text.

Describing this is a bit futile. Here's the problem visually:

What we want is for each line to be padded like the beginning of that first line and end of that last line. We don't want to resort to anything gross like wrapping each line in it's own span (where lines break is to unpredictable). And there is no such thing as :nth-line unfortunately.

There are some solutions though!

Harry Robert's Pseudo Element / white-space Method

The big trick here is using white-space: pre-wrap; That gives us the padding on the ragged-right lines. Then to get the padding along the left, a pseudo element is added along the left edge. Here's the original and then my fork to show the elements at work:

See the Pen BtpGo by Chris Coyier (@chriscoyier) on CodePen

Unfortunately Firefox doesn't dig the way the pseudo element is positioned in that technique. Probably fixable, but, there might be a better way...

Fabien Doiron's box-shadow Method

Turns out you can use zero-spread box-shadow on an inline element on only the x-axis to pad each line. Essentially:

.padded-multi-line {
      display: inline;
      background: orange;
      box-shadow: 10px 0 0 orange, -10px 0 0 orange;
    }

Here is the original and then my fork to show how it works:

See the Pen Wrapping Highlighted Text by Chris Coyier (@chriscoyier) on CodePen

Dave Rupert's JavaScript / Unicode Method

Fair warning: Dave says don't use this. I'm including it because I think it's clever and in some weird way actually feels less hacky to me. The idea is to go through the text of each element and replace the spaces with the unicode character \u205f, the MEDIUM MATHEMATICAL SPACE character. This works with the padding better on the right edge for whatever reason. For the left edge, you just use a border-left along the block-level parent element.

Here is the original and my stripped down fork:

See the Pen Wrapping Highlighted Text by Chris Coyier (@chriscoyier) on CodePen

It's a bit tricky to get the line-height just right so the border lines up with the padding, but I'm sure you can figure it out. There is probably even some fancy math to use to make sure it's right.

If JavaScript works for you, there is also a jQuery wraplines plugin in which then you could apply the padding to each individual line. Demo.

Matthew Pennell's Triple Element Method

Turns out you can do this with almost no fancy CSS or JS at all, but using three elements. You need a block-level parent for a border-left. Then an inline element to apply the padding and background to. Then another inline element to nudge the text back to the left to get the padding on the right edges.

<div class="padded-multiline">
      <h1>
        <strong>
          How do I add padding to subsequent lines of an inline text element?
        </strong>
      </h1>
    </div>

.padded-multiline { 
      line-height: 1.3; 
      padding: 2px 0; 
      border-left: 20px solid #c0c;
      width: 400px;
      margin: 20px auto;
    }
    .padded-multiline h1 { 
      background-color: #c0c;
      padding: 4px 0;
      color: #fff; 
      display: inline;
      margin: 0; 
    }
    .padded-multiline h1 strong { 
      position: relative;
      left: -10px; 
    }

The original is in this thread, and my demo:

See the Pen pvBFg by Chris Coyier (@chriscoyier) on CodePen

Adam Campbell's box-decoration-break Method

During a discussion that popped up over this, Adam pointed out there is a new CSS property that is (as I understand it) specifically for this. This removes the need for three elements. Technically you only need one, the inline element, but it's likely you'll be doing this on a header so you'll probably end up with a block-parent anyway, which is best for spacing.

Here is the original and my stripped down demo:

See the Pen hIvFe by Chris Coyier (@chriscoyier) on CodePen

This is working in modern Chrome and Safari, but not Firefox, in my quick tests. Even Chrome and Safari require it to be -webkit-box-decoration-break.

Any more?

That's all I was able to dig up, but I didn't spend an entire day searching or anything. Would love to hear more, particularly ones which require very little code, have good browser support, and don't feel hacky.

Multi-Line Padded Text is a post from CSS-Tricks