6.6.2017
Currently, orphans and widows aren't supported unless you're working inside paged media or columns. Phooey on that - I've got a few use cases where it would be nice to use it in other contexts.
Multiline Headline.
Here is a multiline headline inside an element whose width leaves just one word on the bottom line:
See a demo.
It would be nice if a declaration of orphans: 4; on the headline caused the browser to reflow the text so that 4 was the minimum number of words remaining in the bottom line of the paragraph.
Flexbox.
Here is a group of images arranged with flexbox, and just one lonely element stretched at the bottom of the group:
See a demo.
It would be nice if a declaration of orphans: 2; on the flexboxed element caused the browser to try its best to arrange the child elements so that 2 was the fewest number of children at the bottom row.
1.10.2016
Flexbox is a great CSS module for making clean and flexible layouts. But flexbox is a bit odd, it can be tricky to get the results you're looking for when you're just getting started. Here are some things you should know about flexbox:
display: flex; goes on a parent element. Then all children of that element become flex items and will accept other flex properties.- Don't use
float or box-sizing: border-box; with flex elements. It won't work they way that you'd expect from display or inline elements.
flex-direction defaults to row to lay flex elements out horizontally. Sometimes, you want column to lay elements out vertically instead.margin-[side]: auto; makes the margin use up all the available space on that side. If multiple margins (in the same dimension) are auto, they each take an even share of the available spaceflex-grow: defaults to 0; where elements won't grow beyond the content's width. You probably want flex-grow: 1. Among other things, this handy for making all input elements stretch to use up the remaining space: http://codepen.io/matuzo/pen/eJYdWV?editors=110flex-wrap: defaults to nowrap, where all elements will be stuffed on a single line (or a single column, for flex-direction: column;). Alternately, you may want flex-wrap: wrap; to allow the elements to flow to multiple rows.- Flexbox is well-supported in all recent versions of Firefox, Chrome, Safari, Chrome, Edge, mobile browsers, and even passably-well supported in IE. See http://caniuse.com/#feat=flexbox.
For more about flexbox, see:
7.29.2015
When working with media queries, I find it useful to set a page's background color to something to indicate the breakpoint change. But it gets tedious to set it in the browser development tools over and over again, so I figured I'd just handle it with a bookmarklet - a block of JavaScript that you can execute by using a bookmark in your browser.
Since this is just a debugging tool on a local machine, even the simplest methods will get the job done. The most interesting thing is the enclosing javascript:(function(){ and })(); - just javascript protocol which tells the browser to execute it, and wee little anonymous function to hold everything together. Inside that, I create a style tag, and populate it with new media queries and declarations: set the background color to magenta for roughly mobile width browsers, teal for tablets, and orange for widescreen. (I couldn't think of an alliterative color for "w", since I usually wanted to overrule a white background.) All of the styles have a !important to avoid worrying about specificity. Here's the whole thing:
javascript:(function(){
var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = "@media only screen and (max-width: 800px) { body { background-color: teal !important; } }" +
"@media only screen and (max-width: 540px) { body { background-color: magenta !important; } } " +
"@media screen and (min-width:1300px) { body { background-color: orange !important; } }";
document.body.appendChild(css);
})();
Just load this up inside the location field for a new bookmark, and run it whenever you want to add the colors. Feel free to change the breakpoints to something for your site. It's just CSS on the inside, so you might have to reset a few more colors or adjust the selectors for your site.
For more on bookmarklets, see Bookmarklets FTW The Case by Lydia Katsamberis from Cascadia JS 2014.
5.8.2015
March was a busy month for me. In addition normal work, curating CascadiaFest (closing the CFP and reviewing all the talks) and various meetups in Seattle, I spoke at CSS Conf AU 2015. I was absolutely gobsmacked to that my talk proposal was selected, and thrilled to present a full-length version of my lightning talk from SassConf. CSS Conf AU was a wonderful conference - my deepest thanks to the entire organizing team who did an excellent job of making the speakers feel welcome and putting on a first class conference for their attendees.
As seems to be my habit when speaking, I had a fairly serious case of the "speaker dumbs" and didn't manage to pay the greatest attention to the other talks. Oh well, here's hoping for the videos to come out! Here are the notes that I took away from CSS Conf AU 2015:
CSS for Humans - Matt Sawkill
- On carousels: Stakeholders have prime homepage real estate, and once per 10,000 visits, a visitor clicks it!
4 1/2 Methods for Theming in (S)CSS - Harry Roberts
- (85% of hands up for using pre-processors)
- When pitching for business, make the more difficult project requirements an upsell to your bid. Make it expensive enough that the client really evaluates their business need for that requirement, and you get the big money sack if they say yes.
Newton Meets CSS - Evangelina Ferreira
- Animation is a time-based form of art.
- A great demo of eased animation frames.
- Chronophotography: Jules Marey and Eadweard Muybridge - animation pioneers.
- A lovely 'roo animation which finally explained
steps().
- Animate with CSS instead of .gifs for more color depth, easing control and lower bandwidth.
- Bouncing balls are an animator's "hello world". First make it move up and down. Then add squash and stretch.
Delivering Responsibly - Scott Jehl
- Created <picture>fill polyfill
- whatdoesmysitecost.com/
- The easy wins for better site performance are image optimization, file minification and gzipping everything.
- You can also focus on perceived performance - aka the critical path.
- Remember that .css and .js in the <head> block the browser's render of the page.
- http://www.webpagetest.org/
- The first second of page load =~ 14kb.
- Tools to help focus on that: https://github.com/addyosmani/critical-path-css-tools
- Remember to cookie those visitors, and don't send them the inlined CSS/JS when they return.
- You can use JavaScript to check when fonts are loaded, and then deliver the "premium" styles with
.fonts-loaded h2 {font: fancy;}.
- Most modern browsers support HTTP2, which obsoletes image spriting, inlining and sharding.
Fundamentals of Front End Ops - Ian Feather
- Use pre- and post- commit hooks to run code quality checks
- Focus on continuous integration + the critical path
- Cache as much as you can without disrupting development
- Get that feedback from the monitoring data
- Track JavaScript errors: Sentry, for example
- Measure real user performance, such as time-to-content
Bye-Bye Bootstrap Bloat - Fiona Tay
Legacy code is untested code. - Ian Feather
The styleguide is only as valuable as it is up to date.
- AirBnB designers maintained a feature-parity .PSD to match the style guide.
Let's move! - Benjamin De Cock
- For performance, animate only opacity and transform properties
- Animate children, not blocks
- Use custom easings
- An elegant and brief animation can be an effective screen to hide slower asset loading.
- Use CSS to render animations, but use JavaScript to trigger them.
- https://github.com/bendc/animate
Building Better Interfaces With SVG - Sara Soueidan
Sara's talk was outstanding. I took so many notes for her talk that it deserves to be broken out in its own post. So I will publish something in the future.
Efficient Web Type, c. 1556 - Kenneth Ormandy
Invisible animation - Steven Fabre
- Animation can lead the eye, explains UI changes
- Great animations add context and inform the user about connections between UI elements
- Transitional Interfaces
- Device speed varies so much; use only the most useful animations
update-frequency is part of the CSS4 draft- (Sometimes the animations are lies. Of course the front end doesn't know the email was sent.)
- Animation should be invisible.
- Invisible Animation on Medium
Systems Thinking (Going Out on a Limb) - Claudina Sarahe
- Think in terms of components and modules, not pages
- Pattern Lab
- Systems-level thinking can proactively avoid unintended consequences. This is better than "best practices".
- Use robust tools - they're more fun.
- Iterate, talk, rinse, repeat.
A CSS Eulogy - Michael Riethmuller
- Clearfix is still a hack; floats were never meant to do this.
- Instead of clearfix: CSS Columns or Flexbox
- Negative margins (most uses) is also dead
- Modals are also dead - use
translate or <dialog>
- Brilliant trick to get font size based on available horizontal space:
font-size: calc(20px + 2vw);
Clean and Simple - Justin Ouellette
- The rave poster surely does transmit the emotional feeling of a rave
- Bloomberg terminals use obtuse design on purpose; users feel elevated because only they can use
- TV remotes communicate functionality to the users, but kinda dishonest when offering what they don't actually have
Moving towards web components - Andrew Betts
Open Source Design: A Call to Arms - Una Kravets
Where would we be today if 2000 people had the same access to technology that 13 year old Bill Gates had in the 1970s?
- San Francisco's data-driven LED art display on the Bay Bridge
- Gulp Starter Environment
- Label issues "design needed" for findability
- Write a good readme, don't make assumptions
- Ask, don't tell.
- "I moved your stuff :)" is so different without the smiley. Emoji are powerful, because humans have emotions.
