meyerweb.com

Skip to: site navigation/presentation
Skip to: Thoughts From Eric

Archive: 'Personal' Category

Scaling SVG Clipping Paths for CSS Use

I’ve been working a lot with the clip-path property recently, as I write the chapter on filters, blends, clipping, and masking for CSS: The Definitive Guide’s long-delayed 4th edition (available now in early-release format!).  One of the nifty things you can do with clipping paths is define them with percentage-based coordinates.  For example, here’s a hexagon-like clipping path:

clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);

That starts at the center top (50% 0), goes to the right edge, quarter-down (100% 25%), and so on.

When I got to SVG-based clipping, which you can use with the CSS pattern clip-path: url(#pathID), I tried and failed with this:

<clipPath id="hexlike">
  <polygon points="50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%" />
</clipPath>

It didn’t work because, as I discovered to my horror, SVG does not allow percentage coordinates.  I could just strip all the percent signs out, but that would be the same as saying this in CSS:

clip-path: polygon(50px 0, 100px 25px, 100px 75px, 50px 100px, 0 75px, 0 25px);

I didn’t want pixels, though.  I want percentages, darn it all!

So I asked around on Twitter, and Markus Stange pointed me to the solution: converting all the SVG coordinates to the range 0–1 and using the clipPathUnits attribute.  The working version looks like this:

<clipPath id="hexlike" clipPathUnits="objectBoundingBox">
  <polygon points="0.5 0, 1 0.25, 1 0.75, 0.5 1, 0 0.75, 0 0.25"/>
</clipPath>`
A hexlike clipping path.

That yields the same result as the polygon() CSS shape with the percentages I showed before.

All that is great if you’re writing your own SVG shapes and can make sure you set it up properly, but what if someone hands you a shape to be used as a clip path and it’s in absolute coordinates like 100 75?  If you’re really lucky, the shape has a viewbox of 0 0 100 100 (or all the coordinate points are in that range) and you can just divide all the coordinate points by 100 to get the proper values.  But that’s really tedious for any but the simplest of shapes, and besides, what if it has some other viewbox?  That’s where the transform attribute saves the day.

For example, suppose you get an SVG file that looks like this (with the actual path coordinates removed because there are a lot of them):

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 329.6667 86">
  <clipPath id="cloud02">
    <path d="…(coordinates go here)…"/>
  </clipPath>
</svg>

First, add the clipPathUnits attribute to the <clipPath> element:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 329.6667 86">
  <clipPath id="cloud02" clipPathUnits="objectBoundingBox">
    <path d="…(coordinates go here)…"/>
  </clipPath>
</svg>

Next, look at the viewBox attribute on the <svg> element itself.  The value there is 329.6667 86.  That means 329.6667 coordinate units horizontally, and 86 units vertically.  So all you need to do now is divide all the horizontal values by 329.6667, and the vertical values by 86.  Which would be super tedious, except we have scaling transforms at our disposal:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 329.6667 86">
  <clipPath id="cloud02" clipPathUnits="objectBoundingBox"
   transform="scale(0.003033 0.0116279)">
    <path d="…(coordinates go here)…"/>
  </clipPath>
</svg>

Those two values are 1/329.6667 and 1/86, respectively, and they effectively scale every point in the d attribute to fit into the needed 0–1 range.  (That’s not precisely what happens, but the outcome is the same.)  Thus we have an SVG clipping path that scales with the element and fits to its dimensions!

This works just as well for other markup patterns.  To return to the hexlike path from before, assume it was written like this:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
  <clipPath id="hexlike">
    <polygon points="50 0, 100 25, 100 75, 50 100, 0 75, 0 25" />
  </clipPath>
</svg>

If that were applied as-is, via clip-path: url(#hexlike), it would create a hex-like clipping path that fits a 100px by 100px box, positioned in the top left of the element (in left-to-right languages, I presume).  The quick fix:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
  <clipPath id="hexlike" clipPathUnits="objectBoundingBox"
   transform="scale(0.01)">
    <polygon points="50 0, 100 25, 100 75, 50 100, 0 75, 0 25" />
  </clipPath>
</svg>

Bingo bango bongo, it will now scale to the element’s dimensions, whatever those turn out to be.

Of course, if you apply that to something like a short paragraph, it will be verrrrry stretched out, but the same would be true with a percentage-based polygon() shape.  The beauty here is that you can scale any coordinate set, so if you have a tiny path that you want to blow up, or a huge path you want to shrink down, you can transform it without using clipPathUnits to stretch it over the bounding box.  Something like this:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
  <clipPath id="hexlike" transform="scale(4)">
    <polygon points="50 0, 100 25, 100 75, 50 100, 0 75, 0 25" />
  </clipPath>
</svg>

That gets you a hexlike shape that fits a 400px by 400px box, for example.

Now all CSS needs is the ability to size and position clipping paths in a manner similar background images, and we’ll be in clover.  I hope such properties are in the WG’s mind, because I’d love to be able to just point an at SVG clipping path, and then say something like clip-path-position: center; clip-path-size: contain;.  That would remove the need for fiddling with SVG attributes altogether.

Thanks to Markus Stange for the technique and his invaluable assistance in proofreading this article.

Preview Video: What Would a Human Do?

We’re about halfway through February, he said with some deliberate vagueness, and that means the launch-month special on my Udemy course “Design for Humanity” is also half-done.  If you haven’t taken advantage yet, use the code MW_BLOG to get a nice little discount off the list price.

You may be wondering if this course is really for you.  There are some videos available as free previews on Udemy.  I’m including one here, which is a single “lecture” (as they’re called by the Udemy) from early in the course.  It explores a single concept and also establishes some of the landscape for the course, which is one of the reasons I chose it.

Youtube: “What Would a Human Do?”

Again, the discount code above ends at the end of February, so if you’re interested bu haven’t signed up yet, don’t delay too much longer.  And if you have already taken the course, could you do me a favor and leave an honest review at Udemy?  It will help other people. whether they find the course from me or through Udemy, decide whether the course is right for them or not.  Thank you!

A New Online Course: Design for Humanity

As longtime readers know, my professional focus has been very different the past couple of years.  Ever since the events of 2013-2014, I started focusing on design and meeting the needs of people—not just users, but complete people with complex lives.  I teamed up with Sara Wachter-Boettcher to write Design for Real Life, and  presented talks at An Event Apart called “Designing for Crisis” (2015) and “Compassionate Design” (2016; video to come).  I’m not done with CSS—I should have news on that front fairly soon, in fact—but a lot of my focus has been on the practice of design, and how we approach it.

To that end, I’ve been spending large chunks of the last few months creating and recording a course for Udemy called “Design for Humanity”, and it’s now available.  The course is based very heavily on Design for Real Life, following a similar structure and using many of the examples from the book, plus new examples that have emerged since the book was published, but it takes a different approach to learning.  Think of it as a companion piece.  If you’re an auditory processor as opposed to a visual processor, for example, I think the course will really work for you.

Who is the course for?  I put it like this:

This course will help you if you are part of the design process for a product or service, whether that’s a website, an app, an overall experience, or a physical product. You might be a product designer or product manager, an entrepreneur or work in customer service or user research, an experience designer or an information architect. If you have been impacted by bad design and want to do better, this course is for you.

I know a lot of courses promise they’re just right for whoever you are, no really, but in this case I honestly feel like that’s true for anyone who has an interest in design, whether that’s visual design, system design, or content design.  It’s about changing perspective and patterns of thinking—something many readers of the book, and people who’ve heard my talks, say they’ve experienced.

If you’ve already bought the book, then thank you!  Be on the lookout for email from A Book Apart containing a special code that will give you a nice discount on the course.  If you haven’t picked up the book yet, that’s no problem.  I have a code for readers of meyerweb as well: use MW_BLOG to get 20% off the sale price of the course, bringing it down to a mere $12, or slightly less than $3 per hour!  (The code is good through February 28th, so you have a month to take advantage of it.)

If you like the course, please do consider picking up the book.  It’s a handy format to have close to hand, and to lend to others.  On the flip side, if you liked the book, please consider checking out the course, containing as it does new material and some evolution of thinking.

And either way, whether it’s the book or the course, if you liked what you learned, please take a moment to write a short review, say something on the interwebs, and generally spread the word to colleagues and co-workers.  The more people who hear the message, the better we’ll become as an industry at not just designing, but designing with care and humanity.

Passages

For a number of reasons, I’ve been thinking a lot recently about the two and a half months between Rebecca’s second tumor being discovered and her death.

I remember the looming senses of dread and paralyzing horror, which we shoved down as much as possible in order to get through each day.  Partly it was for the kids, all of them, to give them as much stability as we could in a profoundly destabilizing time.  Partly it was for everyone around us, who looked to us as much as they looked out for us.  And partly it was for ourselves.  Faced with the unceasing sense that nothing made sense, that the world was nothing like what we’d hoped or believed, we had to find ways to get out of bed each day and move forward.

Time was precious, and time was the enemy.  As the quite literal deadline approached, we would find ourselves looking for ways to just stop time, to freeze the moments a bit longer, somehow.  To hold short of the final day, to stretch out the time we’d have with her.  But we kept being carried toward the future at one second per second, as if slowly, slowly dragged by a monstrous grip and only being able to look around to focus on what glints of beauty we could before finally being consumed.

And then the day came, and we lived through it while our daughter did not.

If you’re a parent, then you know the feeling of being bound to your child’s being.  When they’re sick, you feel their fever in your own body, even if no thermometer could register it.  When they cough, your throat seizes with theirs.  When they pause between breaths, you pause too, holding yourself in perfect stillness, not drawing in your next breath until they do.

But when their breathing stops forever, you keep breathing, and can never quite figure out how.  Or why.

The same inexorable passage of time that dragged you to the moment your child died keeps dragging you on past it, away from the last time you held them, the last time they smiled at you, the last time they said your name or that they loved you or that they wanted another popsicle or another kiss or another bedtime story.  The last time their eyes were open for you to peer into, and see their spark.

The numb shock of all those absences perverts the world in profound ways.  You can barely comprehend that your life continues, let alone what’s happening around you.  It’s almost impossible to understand why the world continues at all.  There seems no point to it.  You can find your way past that in moments, focused on loved ones like surviving children, but then those moment pass and you stand up and look at the world as if it’s a soap-bubble illusion that will pop and vanish at any moment.

And sometimes, you numbly reach out, one finger extended, waiting for the moment you finally touch the bubble.

Other times, your shock gives way to flashes of rage, angry with the world for continuing as if nothing had happened, as if the clocks should not have been stopped and the mocking facade not torn apart and burned to ash.  Angry with yourself for not finding a better timeline.  Angry with existence itself.

I remember the moment I realized that pediatric hospitals and the people within them remain unburnt and unshot by grieving parents, and regained an iota of faith in humanity.  It didn’t matter that Rebecca had died of biology run amok, and the people in her oncology wards had done everything they thought was right in an attempt to keep her alive.  The rage of grief obliterates all hope of rationality, and seeks only to inflict the same pain it feels on whatever targets it seizes on.  When Michael Brown’s father shouted to burn everything down, a month or so later, I nodded in bleak recognition.

I can say that the rage can fade over time.  I’m sure some people take it in, nurture it, stoke it, burning it for warmth in the cold hollow where their child’s love used to be.  Using it for fuel, just to keep going.  But it’s also possible to let it go, one way or another, through whatever slow mechanisms of healing can be found.

Although I do wonder how I will react if I ever run into the doctors at the grocery store, or at the airport.  Perhaps there will be a sad reconnection.  Or perhaps I will simply turn and walk away, stiff and silent.  I honestly don’t know.  I hope, most of the time, that it’s the first one.

But the numbness, the pervasive sense of disconnect and artifice—those may have receded somewhat, but they have never left.  I read recently that research shows that the worst period of hopelessness and despair in grieving parents often comes two to three years after their child’s death, which for us is right now, right as our remaining children pass significant life milestones: Carolyn passing out of childhood, and Joshua becoming older than Rebecca.

A world where a youngest child can become older than their sibling can never, ever make sense.  Time seems illusory, and there is a corner of my mind that is always looking for a way to go back, to unwind the clock and undo the changes, to go back to when things were right and find a way to stop them ever becoming wrong.

But I can’t.  There is no way back, just as there is no way to skip forward.  I can only be dragged forward at one second per second, and look around whenever I can rouse myself to find what glints of beauty there may be.  There can be many, if I look in the right places, and I try to do so.  It does nothing to slow the dragging, but it can sometimes ease the grip.

What Comes Next…

Spot the geek signifiers!

There is a documentary about the history of the web.  It’s an hour long, and now it’s free to watch.

Also, I’m in it—a fair amount, it turns out.  Please do not let this dissuade you from watching it.

I’m blogging about this because there’s a little bit of a backstory.  Jeffrey and I were backers of the film during its crowdfunding campaign.  At that point, Jeffrey had been already interviewed for the film, but even beside that, we really wanted the film to exist in the world.  So much of the history of our craft has been lost, or simply untold.  So we put some of AEA’s resources into supporting the project, and were glad to see it meet its funding goal.  So, you know, full disclosure and all: I’m a backer of the film, and I’m in it.  Jeffrey, too.

In fact, I wouldn’t be surprised to find out most of the people who appear in the film were also backers of the film.  This probably makes it sound like people paid to be featured, but nothing could be further from the truth.  It’s the exact opposite: the people featured in the film are featured because they’re the kind of people who would badly want to see such a thing exist in the first place, and lend material support to the effort.  They’re all people who truly love the craft and want to see it documented, explained, and shared with as many people as possible.  The kind of people who learned from others, and in turn taught others, freely sharing what they knew.  In some cases, paying out of pocket to share what they knew, in hopes that the sharing would help someone.  I think that ethos comes through bright and clear in the film.

If you want to understand the heart of the web, understand that.  It was designed and built and fundamentally shaped from its earliest days by people who wanted it to be open and free and accessible to anyone, whether as a consumer or a creator.  Those were the founding principles.  They shape every aspect of the web we know, for good or ill or otherwise.

Some time after the film was crowdfunded—about a year and a half, I think—Matt, the film’s director, editor, and all-around prime mover, drove up from his office in Pittsburgh to my office in Cleveland to shoot some of the last segments to be recorded.  So he asked me the questions he still wanted someone to answer, or that had arisen as he’d started editing all the other interviews.  Thus I show up a lot in the first half of the film, talking about the early days of the web, and am mostly absent in the second half, as the younger crowd talks about the great stuff that happened as the web matured.  Which is proper, I think.

But! I hasten to add, there are way, way smarter and better-spoken people in the film than me, all the way through, sketching out the path this field took and what makes the web so incredibly compelling and powerful even today.  It’s company I’m honored and humbled to be part of.  If you can spare an hour, say a lunch break, I highly recommend you devote it to What Comes Next is the Future.

Results of the GIF Survey

The GIF Survey is complete.  In just under a week, 1,457 people gave their answers on how they pronounce the acronym, and their perceptions of the rightness of that pronunciation.  I thought that, today of all days, it made some sense to share the results of a far less momentous poll.

For those who missed, it, how this survey worked was that the first question was: “How do you pronounce GIF?”  To this, the choices were:

  • The obviously correct way
  • The clearly incorrect way

Upon answering this, respondents moved on to a section that asked three optional demographic questions: age, gender, and race/ethnicity, all as open text fields.  These had about a 16% skip rate, and about a 4% ‘faithless’ response rate; that is, answers that were clearly jokes, insults, or other explicit refusals to answer the question as intended.

Once the demographic questions were answered or skipped, there was a final question: “How do you pronounce GIF?”, exactly the same as the first question of the survey.  Only this time, the options were:

  • Hard G (like “gift”)
  • Soft G (like “gin”)

For both pronunciation questions, the answer order was randomized so as to avoid any first-choice advantage.  The demographic questions, being open entries, didn’t have options to randomize.

(Aside: I discovered in the course of the survey that there are other pronunciations, most commonly in non-English languages.  My apologies to those who fell outside the binary choice I presented.)

So!  The results came out like this:

Table 1. Perception of pronunciation
The obviously correct way 83.7%
The clearly incorrect way 16.3%

First of all, it amuses and slightly mystifies me that more than 16% of respondents feel they say it the “incorrect” way.  Second of all, these percentages didn’t line up with actual pronunciation.

Table 2. Actual pronunciation
Hard G 77.8%
Soft G 22.2%

This deserves a closer look.  How do perceptions of correctness break down by actual pronunciation?

Table 3. Perception versus pronunciation
Pronunciation “Correct” “Incorrect”
Hard G 87.3% 12.7%
Soft G 71.2% 28.8%

In other words, people who pronounce it with a hard G are significantly more likely to believe their pronunciation is correct than those who go the soft-G route.

It’s an interesting inversion of what one might (perhaps naïvely?) expect: given that the creator of the format has explicitly said the pronunciation is with a soft G, one might expect that those who use the hard G know it’s incorrect but say it anyway.  My personal opinion is that this is actually a reflection of human nature: faced with evidence that undermines our instinctive reactions, we tend to double down.  (Of course, if the evidence lines up with what we believe, we seize on that too.)

Now: demographics, which actually were the point of the survey, but not in the way I think some people assumed.  After I did my first, tongue-in-cheek version of the poll on Twitter, my colleague Aki noted that she’d love to know something about the demographics behind those results, something I’d had flitting around in the back of my mind.  Her comment made me decide to just go for it.  What I wanted to see was whether there were significant differences in perceptions of correctness in various groups.  For example, one might hypothesize that those identifying as female were more likely to say their choice was incorrect.  Well, if that were the hypothesis, what evidence I was able to gather contradicts it.

Table 4. Perception of pronunciation by gender
Gender “Correct” “Incorrect”
Female 83.4% 16.6%
Male 83.5% 16.5%

Roughly speaking, of those people who gave an answer about their gender (81.5% of the total), about 25% of respondents identified as female, and about 70% identified as male.  One thing that did jump out at me was that those identifying as female were more likely to use the hard G, rather than the soft G.  Not by a lot, possibly within the margin of error, but still.

Table 5. Actual pronunciation by gender
Gender Hard G Soft G
Female 82.7% 17.3%
Male 77.2% 22.8%

The other thing that interested me was how patterns of pronunciation and correctness would correspond, if they did at all, to age—for example, were younger respondents more or less likely to think they were right than older respondents?  I decided to group by decades, in effect.  Of the 81.6% of respondents who gave a reasonably valid age (I tossed, for example, “1.7977E+308”), here’s how they clustered.

Table 6. Age groups
20-29 22.2%
30-39 42.7%
40-49 25.5%
50-59 6.6%

There weren’t enough respondents outside the 20-59 range to analyze.  I’m not even sure about the 50-59 group, to be honest—I’m not sure 79 replies out of 1,457 is enough.  But what the heck, I’m rolling with it.  Respondents’ perception of correctness didn’t change a lot, but did seem to rise a bit with age.

Table 7. Perception by age group
Age Group “Correct” “Incorrect”
20-29 81.8% 18.2%
30-39 84.3% 15.7%
40-49 83.2% 16.8%
50-59 86.1% 13.9%

It would be interesting to see if a different division of age groups would create different results.  But what really caught my eye was how the pronunciation shifts with age: younger respondents were notably more likely to use the soft G than older respondents.

Table 8. Pronunciation by age group
Age Group Hard G Soft G
20-29 73.1% 26.9%
30-39 77.8% 22.2%
40-49 84.2% 15.8%
50-59 83.7% 16.5%

So if you’re a soft-G speaker and are convinced that’s correct, perhaps you can take comfort in the belief that the children are our future.

I’m not going to present numbers on race/ethnicity.  This is partly because the question was a MacGuffin: I asked it because it would have seemed odd not to after asking for age and gender, and also because I’ve found over the years that asking for ethnic or racial identification is a handy way to give some people a chance to vent a little built-up animus.  The other reason is that even after filtering out the few abusive and the somewhat more numerous “decline to answer” replies, the remaining values are all over the place and difficult to make consistent.

If you’d like to try, you can download the filtered-and-resorted data set for that question, as well as similar sets for age and for gender.  I’ve also put up a data set containing just the answers to the two mandatory pronunciation questions.  Feel free to analyze them as you like!  Each file is a ZIP of the data set in tab-separated text format, so they’re pretty small.

And just to be clear, I’m not planning to post the complete data set, just in case any combination of demographic answers could be used to reconstruct an identity.  (Each set was sorted differently, so a line number in one set doesn’t correspond to the line number in another.)

So what did all this tell us?  It told us something about the people who saw the survey and chose to respond.  It told us that if the results are representative, then people who are older tend to use the hard G and be more convinced of their rightness.  Maybe that’s representative of the world as a whole, and maybe not.  It may not mean a lot in the grand scheme of things, but it was fun to ask, hopefully fun for people to answer, and fun to crunch the numbers that resulted.

My thanks to everyone who took part, and to Aki for prompting me to do it in the first place.

Bits of the Past

I sat digging through the map built by GrandPerspective, showing me what was chewing up 720GB of my 750GB SSD.  I already knew my iPhoto Library was the main culprit, consuming just over a third of the total volume, but surely there were other places I was wasting space.  And there were: old software installers, virtual machines I had long since ceased to need, movies I’d ripped for watching on trips and never gotten around to dumping afterward, years-old Keynote files that I’d never gotten around to compressing.  I dealt with the most obvious offenders, one way or another, and then rescanned the volume.

A set of blocks popped up near the middle of the new map, a cluster I’d not noticed before, even though they were clearly somewhat sizable.  I moused over to see what they were.

They were CD-R master images.

Images of my daughter’s medical records.

Of her MRIs.

Somewhere in there, her final brain scans, the ones where the doctors did not even bother to count the emerging tumors, there were so many.

There’s enough data in there to recreate 3D models of her brain as it turned on itself.  Enough to reconstruct the cartography of her death.

I should just delete it.  Keeping the information is pointless now, when it cannot save her, a reminder of futility and helplessness.  It’s worse than useless—because if a treatment is one day discovered, the data in these files could torture us with the certainty that her life could have been saved, if only it had started later.  Better to not know, and eke out an existence in the spare shelter of ignorance.

I’m not sure I can delete it.  No matter how horrifying the images and records might fundamentally be, they feel like pieces of her, tiny bits of her life and death.  That erasure of data would feel like an erasure of history.  Like a betrayal.  Even to shunt them from my primary machine to some sort of backup storage would feel the same as I did when we carefully packed all of her favorite toys and kindergarten drawings into a box, and stored it away, out of sight but never out of perception.

Perhaps I might feel differently if I hadn’t been missing her so keenly the past few weeks.  There doesn’t seem to be a specific reason for this, unless it’s the beginning of this specific school year.  We’ve all been feeling it, in our own ways.  A few days ago, in the middle of a weekend afternoon, the family was at home and just being a family when I suddenly felt her absence like a spiky, sickly, impossible hole in the center of the world.  It was as sharp and present as the rush of first love, very nearly tangible and visible.

I look at these files, knowing that there are no rational reasons to keep them and many reasons—rational or otherwise—to let them go.  I envision erasing them, and I can’t.  All these jagged bits of the past, which do not cling to me; rather, I cling to them, senselessly, hopelessly, afraid to look at them but afraid to let go.  Perhaps I believe that with enough of these tiny memories, these shards of her life and death, I can cobble together a wall that will shut out the void her absence tore open.

Just enough to keep functioning, for a little while longer.

Which is, I sometimes think, the worst betrayal of all.

Workshopping

I’m criminally behind in sharing this with everyone, so I’m jumping straight to the bottom line here: I’m teaching a workshop on advanced CSS layout techniques in October, and co-teaching another workshop on CSS animation in November with the inestimable Val Head.  Both are courtesy O’Reilly & Associates, and will be conducted at their offices in Boston.

A few more details:

  • New CSS Layout (October 17-18) is two days of deep diving into flexbox, multicolumn, grid, and related technologies.  There will be a heavy emphasis on Things You Can Use Today, including bugs and how to handle them, with a keen focus on using everything in a progressively enhancing way.  In other words, you should walk away knowing how to use new technologies right away, without leaving behind users of older browsers, and have a good sense of what you’ll be able to do in the next 6-12 months.  This will be hands-on, interactive, and very much a dialogue with technical instruction.  If you’re looking for two days of watching me drone in front of a slide show, this is not that.  I’m not even sure I’ll have any slides at all—I’ll probably spend the entire time in BBEdit and a browser instead.  The class size is limited to 40 people.
  • CSS Animation (November 17-18) is another two days of diving deep into the topic.  For this one, I’ll spend the first day going through every last piece of CSS transition and animation syntax, with generous helping of transform.  On the second day, Val will show how to put that syntax to use in a way that serves and strengthens your design, instead of undermining it.  It’s basically a day of learning how the tools work, and a day of learning how to properly use the tools.  Again, class size of 40; and again, very much hands-on and interactive.

So that’s what’s up.  Looking for ways to seriously expand your skills in layout or animation or both?  Come, join us!

August 2017
SMTWTFS
July  
 12345
6789101112
13141516171819
20212223242526
2728293031  

Archives

Feeds

Extras