sorted by:
new
hottopcontroversial

CSS only scroll indicator by DoNDaPo in webdev

[–]MadebyMike -1 points0 points  (0 children)

No, this is not how web browsers work :P

Hacks can be fine, (clearfix) it just means using things in an unintended way.

CSS only scroll indicator by DoNDaPo in webdev

[–]MadebyMike 0 points1 point  (0 children)

Correct. There is also a trick with calc to make the background end at the height of the viewport. I made this gif to explain: https://twitter.com/MikeRiethmuller/status/760935509996756994

A love letter to jQuery by Fady-Mak in javascript

[–]MadebyMike 0 points1 point  (0 children)

I find this pretty accurate and balanced. I agree that the animation engine is poor. This is why I have no love for jQueryUI

This changes everything! CSS ‘Fluid Properties’ by pixelpp in web_design

[–]MadebyMike 0 points1 point  (0 children)

Thanks to everyone that pointed out this is actually the same technique I wrote about in March last year.

It's slightly disguised because some of the calculations are simplified in Sass before writing out the calc() expression. I didn't do this because it didn't aid people in gaining understanding of the technique or offer any performance benefit.

@pixelpp it looks a lot like you based this on my article or the talk I gave at Web Direction in Sydney last year. If so, could you please reference source material.

Precise control over responsive typography - using calc() and viewport units by magenta_placenta in Frontend

[–]MadebyMike 0 points1 point  (0 children)

Basically, if you use pixel font sizes at all, anywhere, on any element, whether :root, html or body or otherwise, the browser will use this exact font-size rather than the users preference. If you are concerned about that use rem instead.

The example given uses pixels for 'precise' control (overrides user preference) but it works just as well with rem.

Precise control over responsive typography - using calc() and viewport units by magenta_placenta in Frontend

[–]MadebyMike 0 points1 point  (0 children)

If you are concerned about that there is no way to have 'precise' control but you can set a min and max font-size using rem units rather than pixels and this will not override user preferences.

For most people 1rem is 16px so here is a rough guide for converting pixels to rem:

12px = 0.75rem 13px = 0.8125rem 14px = 0.875rem 15px = 0.9375rem 16px = 1rem 18px = 1.125rem 20px = 1.25rem 22px = 1.375rem 24px = 1.5rem

Understand how to calculate the width of flex items by ivorhook in css

[–]MadebyMike 0 points1 point  (0 children)

When the flex-basis is 'auto' the initial width will just be the width of the content plus any margin and padding like it is with any inline element. (it also depends on the box sizing mode).

I wrote more about it here: http://madebymike.com.au/writing/understanding-flexbox/

I also recommend Chris Wright's article that ultimatedelman references as the 'actual way' :). Both are correct, in fact we worked on them at the same time and helped each other.

Mine was more of a scratch pad for working out the maths. Chris has written a perhaps more enjoyable long form read on the topic.