By Martin Wolf

Yahoo’s board approves $1.1 billion all-cash Tumblr acquisition

Chris Welch:

According to The Wall Street Journal, Yahoo’s board of directors has approved the company’s widely-rumored acquisition of Tumblr in an all-cash deal worth $1.1 billion.

Just in case you missed that somehow.
I don’t really have an opinion on the acquisition. I’ve never really used tumblr much and don’t plan to do so in the future. But let’s see what Yahoo does with it.

∞

Avoiding Unnecessary Paints

Paul Lewis:

Rendering performance is critical to users enjoying your application, and you should always aim to keep your paint workload under 16ms. To help you do that, you should integrate using DevTools throughout your development process to identify and fix bottlenecks as they arise.

A few more tips and tricks on what to look out for so that your site renders and feels fast. Fits in line with the post of Addy Osmani regarding the Daft Punk site.

∞

The QUOTE.fm Blockquote Style

I got asked if I could make a CodePen with the signature blockquote style of QUOTE.fm. So here we go.

The difficulty with this styling is that every line has padding on every side which is not really possible with CSS because you can’t target single lines. But somehow we can manage to pull it off with three nested span elements.

After some fiddling I asked Twitter and got a few different solutions from which I came up with this final markup. To be honest, I can’t really explain why or how it works. It’s definitely a hack and should be easier with CSS. Anyway, it works down to IE7, so I think we are good. (Okay, we need a small fix for Firefox…)

<blockquote class="quote">
    <a href="http://theamazingweb.net">
        <span class="quote-lvl1">
            <span class="quote-lvl2">
                <span class="quote-lvl3">
                    Lorem ipsum dolor sit amet. Lorem ipsum dolor sit lorem ipsum dolor sit amet delegetur su.m Lorem ipsum dolor sit amet. Lorem ipsum dolor sit lorem ipsum dolor sit amet de.legetur sum Lorem ipsum dolor sit amet. Lorem ipsum dolor sit lorem ipsum dolor sit amet delegetur sum.
                </span>
            </span>
        </span>
    </a>
</blockquote>
.quote {
    margin: 10px 0 5px 0;
    > a {
        display: block;
        padding-left: 20px;
        font-size: 14px;
        font-weight: normal;
        color: #fff;
        line-height: 32px;
        &:hover {
            text-decoration: none;
        }
        &:active {
            position: relative;
            top: 1px;
        }
    }
}

.quote-lvl1,
.quote-lvl2,
.quote-lvl3 {
    position: relative;
}

.quote-lvl1,
.quote-lvl2 {
    padding: 6px 0;
    background: $qfmblue2;
    border-bottom: 1px solid #6ec5e9;
    .quote > a:hover & {
        background: $qfmblue2Hover;
        border-bottom: 1px solid #5bbae1;
    }
}

.quote-lvl2 {
    right: 20px;
}

.quote-lvl3 {
    left: 10px;
}

@-moz-document url-prefix() {
    .quote-lvl1,
    .quote-lvl2 {
        padding: 6px 0 5px 0;
    }
}

And here you can see the code in action try fiddling with it yourself:

Check out this Pen!

Jank Busting With Daft Punk

Addy Osmani:

Now these figures for time taken e.g 514ms are 10-50 times what they should be. Ideally they should be taking <= 10ms. Jank manifests itself when you blow your frame budget – the 16.7ms budget really, 8-10ms factoring in mobile, browser processes you have for JavaScript, layout, image decoding, painting and everything else Chrome needs to do to display your page on screen.

Addy Osmani analysed the animation-rich Daft Punk site on Pitchfork and explains what can be done differently. Another reminder how important performance is.

∞

CSS Architecture

Philip Walton:

The CSS defines what your components look like, and the HTML assigns those looks to the elements on the page. The less the CSS needs to know about the HTML structure the better.

Very smart and comprehensive article on CSS Architecture which I highly recommend reading.

∞

So you’re looking for an alternative to Photoshop?

Marcel Wichmann:

This isn’t a pamphlet against Sketch, or any other programs, it’s more of a love letter to Photoshop.

Marcel explains why he thinks Photoshop is still the best tool out there for doing everything his job as a designer needs him to do.

∞

Optimizing Google Web Fonts

Thoriq Firdaus:

So, let’s see what we can do to improve Google Webfont’s performance.

Performance is a big and important topic these days. In fact it always was. Here are a few tips on optimizing the performance of Google Web Fonts. I for one didn’t know that you could just load single letters. Pretty cool.

∞

Mo‘ Pixels Mo‘ Problems

Dave Rupert:

How to deal with images in Responsive Web Design

I wish I could’ve seen this talk by Dave live, but here you can at least read his slides which is better than nothing.

∞

The Great Discontent: Jason Fried

Jason Fried:

I’ve always been careful, patient, and slow about the things I do. I don’t put anything too big at risk at any one point in time…The entrepreneurial myth is that the people who risk the most succeed the most or reap the biggest rewards. I don’t know if that’s true.

Jason Fried was interviewed by The Great Discontent. It’s a long one, but definitely worth your time.

∞

Using !important in your media queries?

Ian Devlin:

Since the styling that you will place within your media queries is intended to override previous styling when certain conditions are met, depending on the complexity of the previous styles, overriding with !important can be an ideal and neater solution.

What Ian is proposing makes sense in a way, but I think a CSS stylesheet without or with very little !important rules will always be better maintainable easier to extend.

∞
 Prev 1 2 3 4 5 6 7 ... 30 31 32 Next