Posted on

Meet SmashingConf New York 🇺🇸 (Oct 10–13)

We’re so happy to be back after all these years! Let’s brush up our front-end and design skills, together — at the wonderful SmashingConf New York, with plenty of practical sessions and hands-on workshops all around design systems, UX, CSS, JavaScript, performance and accessibility. And it’s not just about the content: it’s inclusive environment, memorable experiences and fun activities along the way as well. (Check what SmashingConfs are like).

Here’s the gist: single track, 2 practical days, 5 hands-on workshops, 12 experienced speakers, loads of mysteries and friendly networking! Get your ticket!

Tobi the DJ will be back in New York as well, of course! Wonderful photos by Marc Thiele.

Online + In-Person

$ 699.00 SmashingConf In-Person + Online

Oct 10–13, 2022. New World Stages, NYC.
Save up to 25% with Smashing Membership.

Online only

$ 200.00
SmashingConf Online

With all video recordings, of course.
Save up to 25% with Smashing Membership.

Ah, your boss needs a little bit convincing? We’ve got your back! Download the Convince Your Boss PDF to tip the scales in your favor. And we’ve prepared a “letter to the boss” template for you as well.

Meet The Speakers

Our speakers are not just knowledgeable and amongst the best in their fields. They are also excellent speakers and teachers, smart and kind friends, and wonderfully nice and approachable.

Meet Jason Pamental, Cassie Evans, Harrison Wheeler, Una Kravets, Laura Kalbag, Steve Schoger, Eva Fereirra, Guillaume Kurkdjian and of course the Mystery Speaker. Topics range from SVG animation to design systems and from Figma to web performance, and beyond.

Practical Workshops

If you attend a conference, why not join a practical workshop as well? The day before and the day after the conference, we run a full-day training focusing around tangible, applicable insights that you can use right after the workshop. We’ll be diving into SVG animation, accessibility testing and complex interface design patterns. Plenty of topics to choose from, and bundle discounts are available, too!

All workshops are hands-on and practical, so you can apply your new skills immediately. Side Events

It’s not all business at SmashingConf, of course! We have many friendly side events before, during, and after the conference. The evening before the conference kicks off, join us for some drinks, lightning talks, and meet some new friends already.

Want to start the conference fit and fresh? Every day, we’ll have a morning run in Central Park. And for all the photo enthusiasts, we are closing the conference with a lovely Photo Walk around the city. Our little side events are all friendly, fun, and a great way to meet people and hang out!

Team Tickets? 👫👭

Bring the entire team to the SmashingConf, and save some of your training budget along the way as well. With our friendly bundle tickets and team discounts, we’ve got your back! If you want to come with a large team, or are interested in something special, please send us a short email and we’ll get back to you right away!

SmashingConf NYC Online

If you can’t travel to New York, that’s no problem either. We run a SmashingConf Live Stream Online for the main stage talks. Plus, you get some behind-the-scenes footage and backstage interviews with speakers, organizers, and friends. 🎉🥳

Online + In-Person

$ 699.00 SmashingConf In-Person + Online

Oct 10–13, 2022. New World Stages, NYC.
Save up to 25% with Smashing Membership.

Online only

$ 200.00
SmashingConf Online

With all video recordings, of course.
Save up to 25% with Smashing Membership.

COVID-19

Let’s stay healthy and safe, everyone! You need to be fully vaccinated to access the conference venue, workshops, and parties. Please check our COVID-19 guidelines, accessibility statement, Code of Conduct.

We Can’t Wait To See You!

As we are getting ready for the event, we can’t be more excited to see you again after all these years. Let’s boost our skills in-person, together, and creating memorable experiences that will last for a while. ❤️

Posted on

The Trickery it Takes to Create eBook-Like Text Columns

There’s some interesting CSS trickery in Jason Pamental’s latest Web Fonts & Typography News. Jason wanted to bring swipeable columns to his digital book experience on mobile. Which brings up an interesting question right away… how do you set full-width columns that add columns horizontally, as-needed ? Well that’s a good trick right there, and it’s a one-liner:

columns: 100vw auto;

But it gets more complicated and disappointing from there.

With just a smidge more formatting to the columns:

main {
  columns: 100vw auto;
  column-gap: 2rem;
  overflow-x: auto;
  height: calc(100vh - 2rem);
  font: 120%/1.4 Georgia;
}

We get this:

Which is so close to being perfect!

We probably wouldn’t apply this effect on desktop, but hey, that’s what media queries are for. On mobile we get…

That herky-jerky scrolling makes this a bad experience right there. We can smooth that out with -webkit-overflow-scrolling: touch;…

The smoothness is maybe better, but the fact that the columns don’t snap into place makes it almost just as bad of a reading experience. That’s what scroll-snap is for, but alas:

Unfortunately it turns out you need a block-level element to which you can snap, and the artificially-created columns don’t count as such.

Oh noooooo. So close! But so far!

If we actually want scroll snapping, the content will need to be in block-level elements (like <div>). It’s easy enough to set up a horizontal row of <div> elements with flexbox like…

main {
  display: flex;
}
main > div {
  flex: 0 0 100vw;
}

But… how many divs do we need? Who knows! This is arbitrary content that might change. And even if we did know, how would we flow content naturally between the divs? That’s not a thing. That’s why it sucks that CSS regions never happened. So to make this nice swiping experience possible in CSS, we either need to:

  • Allow scroll snapping to work on columns
  • Have some kind of CSS regions that is capable of auto-generating repeating block level elements as-needed by content

Neither of which is possible right now.

Jason didn’t stop there! He used JavaScript to figure out something that stops well short of some heavy scrolljacking thing. First, he figures out how many “pages” wide the CSS columns technique produces. Then, he adds spacer-divs to the scrolling element, each one the width of the page, and those are the things the scrolling element can scroll-snap to. Very clever.

At the moment, you can experience it at the book site by flipping on an optional setting.

The post The Trickery it Takes to Create eBook-Like Text Columns appeared first on CSS-Tricks.