In
2019, Smashing Magazine adopted a static site architecture, resulting
in a 6× improvement in page speed but sacrificing some writing and
editing bells and whistles that come with a bona fide content management
system. Now, with the recent integration of TinaCMS, Smashing Magazine
enjoys the best of both worlds — the performance benefits of static
assets and the writing experience that helps streamline the editing
process. This article is a peek behind the curtain of how content is
managed here at Smashing Magazine. In it, you’ll get a tour of an
article’s full lifecycle, from a basic outline to the sort of thing
you’re reading right this second.
Smashing Magazine is
drastically different today than it was just a few years ago, and you
may not have even noticed. That’s how it often is with back-end
development — the complete architecture changes, yet the front end you
see is still very much the same.
You may recall this site was powered by WordPress up until 2019 when the team migrated our large archive
of articles, guides, and tutorials to a Jamstack setup. The change was
less of a mission than it was an experiment that stuck around. Sure,
WordPress is still an incredibly viable CMS, especially for a site like
Smashing Magazine that focuses on long-form content. But after seeing a
blazing 6× improvement in page speed performance, Jamstack was something
we couldn’t dismiss because the faster experience was a clear win for
readers like you.
What we may not have expected was how the migration from WordPress to Jamstack would improve our developer experience
in the process. We knew for sure that users benefitted from the change,
but it wound up making our lives easier as well, as it opened up even
more possibilities for what we can accomplish on the site — a real
win-win outcome!
It took work to get to where we are today. We
went from authoring in WordPress to authoring in Markdown files, so it’s
not like we started reaping benefits right away. It is only now that we have integratedTinaCMSto our stack that our entire team is reaping the full benefits of our Jamstack architecture.
That’s really what I want to share in this article: a peek behind Smashing Magazine’s curtains at how we manage content.
TinaCMS is not WordPress, so it has influenced the way we work. We
think it’s pretty cool because TinaCMS is all about the developer
experience in a CMS context, so, of course, the inner developers in us
have nerded out over the sorts of things that we are now able to do.
TinaCMS
is not a household name in the CMS space. I’d say that’s likely by
design, as its niche is clearly in the developer community rather than a
“low-code” offering like WordPress or a completely “no-code” solution
like Squarespace. TinaCMS has a clear audience, and the team here at
Smashing Magazine just so happens to fit that profile in spades. Not
everyone on the team is a developer, but most, if not all, of us are
comfortable working in Git and the command line.
TinaCMS can be broadly characterized in two ways: an open-source Git-based CMS that supports Markdown files.
In fact, TinaCMS saves content to Markdown, MDX, YML, and JSON,
allowing a team like us to query data on top of our static assets. It
also creates a GraphQL API for that content, allowing a team like us to
query data from our files. And since it’s all connected to a GitHub
repo, we own and control everything. That’s an enticing value proposition for a company whose business is
content. A self-hosted WordPress instance is similar in that regard,
but having all of our content in a centralized repo that contains hard
files makes “owning” our content more tangible than it is to store it in
an SQL database on some server.
That’s a bit about TinaCMS. It’s
designed for Jamstack the same way that you might think of Sanity,
Storyblok, or Netlify CMS, but it goes further than what we’ve seen,
offering everything from a content API (in GraphQL) and visual editing to an integrated local development workflow that serves us quite well here at Smashing Magazine.
Before
we look at TinaCMS’s UI and specific features, I think it’s worth
sharing how content is written before it’s published on the site. It’s
far from perfect and still a work in progress, but it will give you an
idea of how we work and why TinaCMS fits our needs.
There are two paths we follow for writing articles: write in a Markdown file connected to a GitHub repo, or write in a collaborative space,
like Dropbox Paper or Google Docs. The path we take is whichever one a
contributing author is most comfortable using because both have pros and
cons.
To be honest, the process is pretty much the same, no
matter which path we use. The author writes something, and an editor on
the team reads and edits it. Dropbox Paper exports to Markdown, so it’s
really a matter of whether the author prefers a GUI or a code editor for
writing. Dropbox Paper might be a little more work because it
requires the extra step of exporting content and then cleaning up the
file (because export is never perfect).
Once an article reaches
its final draft, it is given additional formatting for things like pull
quotes and related articles before it is committed to a pull request
that, when merged, triggers the site to rebuild itself and deploy the
changes.
Our
new writing process abstracts the old process of having to work in
either Markdown or a third-party service. Instead, we get to write
directly in the TinaCMS editor, preview our work, hit Publish, and voilà, an article is born.
Tina’s
light touch is a big reason why it works for our team. Not everyone is
forced to use TinaCMS. For example, Vitaly prefers to write Markdown in
his code editor on a local Git branch. No problem. That article can be
viewed in TinaCMS once he pushes it to GitHub.
You’re unimpressed,
right? If so, that’s good because it’s the ease of this new process
that we love so much. There’s nothing inherently impressive about our
new process because it sports features we were already using in
WordPress before the transition took place. What’s impressive is not the
features but that the features are available in our Jamstack architecture.
That’s the third “win” for our team in all of this:
The site’s faster performance is a win for you,
Owning hard files of our content is a win for us, and
The
fact that we get to write, edit, and collaborate in a CMS that supports
the new architecture is a win for us and authors alike.
It’s
truly unique that TinaCMS offers the sorts of features we love about
WordPress and has ported them into a Jamstack experience. Other CMSs
designed for the Jamstack might offer one or two of the features we
wanted, but TinaCMS covers them all. I’ll give you a look at those
specific features.
It’s your typical content editor, complete with a clean interface. (Large preview)
Like many full-fledged CMSs, Tina supports custom fields.
That way, we have an easy way to ensure we’re inputting all the correct
content in the correct places. Those fields are mapped in the content
API, allowing us to query them to populate the front end. It’s true
visual editing in the Jamstack.
This
is a killer feature because it doesn’t require us to deploy anything to
generate a preview of an article that we can share with authors for a
final editing pass before publishing the article.
How does that
work? It’s clever, really. Notice the button in the screenshot indicates
we’re on the master branch of our repo. That’s right: we’re fully integrated with GitHub to the extent that we can switch branches. Tina’s preview button
integrates with branch deployments offered by services like Netlify,
Vercel, and others. For us, that means we can work on a branch and click
preview to visit the Netlify preview for that branch. That’s how we’re
able to work on an article without it winding up in front of hundreds of
thousands of readers.
Clicking the “master” button opens a modal with a branch selector pulled from our GitHub repository. (Large preview)
Another neat thing? We can actually log into the Smashing Magazine admin and choose whether we want to work locally or directly in production.
Overview screen with site URLs for local and production. (Large preview)
As
long as we have a local version of the site running, we can work in a
sandboxed environment that prevents us from publishing accidental
changes. Plus, it’s a nice — and safe — way to collaborate with others
on the team to get an article prepped in advance of a live preview.
From
there, we create a new branch and write to it before putting the
content through the editing process, getting a live preview ready, and
then merging the branch. That triggers a fresh site build, and
everything gets deployed for your reading pleasure.
It’s also
worth mentioning that TinaCMS automatically protects the repo’s main
branch to prevent us (or, most likely, yours truly) from accidentally
writing to it.
Modal displays when changes are made to a protected branch, promoting to switch branches. (Large preview)
Tina
can commit media assets to your repository, but for a site of our
scale, that would make our repository unmanageable. Instead, we use
Tina’s DigitalOcean Spaces integration. Again, we like the idea of
owning all of our content, and integrating it with our media storage
solution is important.
We create a folder that contains the content and assets for each article, so everything is together. (Large preview)
Uploading
a file, like an image, places it on our DigitalOcean Spaces account.
Once the site re-builds itself, the images are optimized and sent off to
Cloudinary, which converts the image into several different formats and sizes, serving the most optimal version for the reader based on their device, location, network connection, or whatever.
The source file is formatted as a PNG, but it is sent to and transformed by Cloudinary to serve an efficient version of it. (Large preview)
All of the features I’ve been writing about are part of the TinaCMS “Editor Workflow” that is new as of July 10
— a mere couple of weeks before I started drafting this article. That’s
how fresh all of this is for us, and TinaCMS, for that matter. You
might expect a brand-new set of robust features to be a little bumpy at
first, but it’s incredibly smooth.
I think a video from the
TinaCMS site does a better job illustrating the flow from writing to
review, from review to approval, and subsequent post-publish updates.
The Editor Workflow is available but currently implemented as a plugin for Business plans and up
rather than having it baked right into TinaCMS. Coming from the
WordPress world, I love the concept of keeping the CMS light and
extending it with specific functionalities, if needed.
Well,
that’s a look at how the sausage is made here at Smashing Magazine. I
personally enjoy seeing how things work at different organizations
because no two projects are ever identical. What ends up in a stack and
how work happens is largely based on specific needs that are unique to a
certain team.
What works for us might seem crazy to you — or
awesome. I don’t know. But we’re excited about it because it
accommodates how we work and has already delivered a number of big wins
for everyone.
TinaCMS is in active development, too, so it is very
possible we may see new features and functionality that we decide to
adopt. For example, there’s now a self-hosted version of the CMS. And looking at the roadmap, we also have more things to look forward to in the next three months.
Running
a workshop can be an effective alternative to traditional,
long-standing meetings. However, if workshops aren’t designed with
inclusivity in mind, participants may feel apprehensive about
contributing, fearing criticism from others. To help ensure the success
of a workshop, Ben Shih introduces the concept of an inclusive workshop.
In Part 2 of the series, you will continue to delve deeper into several
key principles and guidelines that you can follow during and after the
workshop to encourage an inclusive atmosphere.
Earlier in the first part of the series,
we defined inclusivity and how it contributes to enriching the workshop
experience. We established that inclusivity is about ensuring everyone
has an equal opportunity to participate and contribute, regardless of
their background or identity. It goes beyond merely having diversity in attendance. It’s about creating an environment where different perspectives are valued and used to drive innovative outcomes.
In the second part, I will introduce you to the principle of the inclusive workshop through the acronym P.A.R.T.S.
(which stands for Promote, Acknowledge, Respect, Transparency, and
Share). After the principle is explained, we will dive into what you can
do during and after the workshop to implement this principle.
Often, we fall into the trap of thinking, “I’ve got a mixed group of folks here. My inclusivity job is done!”
Yes,
having a diverse set of individuals is often an essential first step.
But it’s just that — a first step. It’s like opening the door and
inviting people in. However, the real task begins after the guests have arrived. That’s when you need to ensure they feel welcome, heard, and valued.
As
a facilitator, how can you make sure that people feel safe to express
their ideas and participate actively during the workshop? Here’s where
the P.A.R.T.S. principle comes in.
The P.A.R.T.S. principle is an acronym that encapsulates five key principles that can form the foundation of any inclusive workshop: Promote, Acknowledge, Respect, Transparency, and Share.
This
begins with creating an environment where participants feel at ease
sharing their ideas, opinions, and experiences. As a facilitator, your
role is to set this tone from the beginning. One practical way to
promote participation is by establishing some ground rules that
encourage everyone to contribute. Another approach is to use different
facilitation techniques to draw out quieter participants, such as having
a quiet brainstorming session where participants can spend more time on
their own to contribute their ideas or having round-robin techniques where everyone gets a turn to speak.
Acknowledging participants’ contributions validates their input and makes them feel heard and valued.
This
can be as simple as saying, “Thank you for sharing,” or “That’s an
interesting perspective.” It’s also about demonstrating that you’ve
understood their input by summarizing or paraphrasing what they’ve said.
By doing this, you not only confirm their feelings of being heard but
also model listening behavior for other participants.
Respect for all ideas, experiences, and perspectives is fundamental to an inclusive workshop.
This
starts with setting expectations that all ideas are welcome, no matter
how outside-the-box they may seem. It also means respecting the varied
communication styles, personalities, and cultural backgrounds of the
participants. As a facilitator, you should encourage respect by
addressing any inappropriate comments or behaviors immediately and
decisively.
Transparency involves clear and open communication.
As
a facilitator, it’s essential to articulate the workshop’s goals and
processes clearly, address questions and concerns promptly, and keep
channels for feedback open and responsive. This can be done by stating
the agenda upfront, explaining the purpose of each activity, and
regularly checking in with participants to ensure they’re following
along.
Share the workshop’s objectives, expectations, and agenda with all participants.
This
shared understanding guides the workshop process and provides a sense
of direction. It also empowers participants to take ownership of their
contributions and the workshop outcomes.
The P.A.R.T.S. principle
is a high-level principle you can try to implement in your workshop to
make sure that all voices are heard, but to guide you further into how
the principle can be used, here are some practical steps you can follow before, during, and after the workshop.
Applying The P.A.R.T.S. Principle: Before And During The Workshop #
Setting
the stage for your workshop goes beyond just a simple introduction.
This is the point at which you establish the environment and set the
tone for the entire event. For example, you can set rules like: “One
person speaks at a time,” “Respect all ideas,” “Challenge the idea, not
the person,” and so on. Clearly stating these rules before you start
will help create an environment conducive to open and productive
discussions.
An example of setting the stage with some ground rules and instructions. (Large preview)
It’s
important to let participants know that every workshop has its “highs”
and “lows.” Make it clear at the outset that these fluctuations in pace
and energy are normal and are part of the process. Encourage
participants to be patient and stay engaged through the lows, as these
can often lead to breakthroughs and moments of high productivity later,
during the highs.
How AJ&Smart presents workshop’s highs and lows during the introduction of a workshop. (Large preview)
As
a facilitator, it’s essential for you to observe and understand the
dynamics of the group — to ensure everyone is engaged and participating
effectively. Below, I’ve outlined a simpler approach to participant
observation that involves looking for non-verbal cues, tracking
participation levels, and paying attention to reactions to the content.
Here are a few things you should be paying attention to:
Non-verbal cues Non-verbal
cues can be quite telling and often communicate more than words. Pay
attention to participants’ body language as captured by their cameras,
such as their posture, facial expressions, and eye contact. This also
applies to in-person workshops where it is, in fact, much easier to keep
track of the body language of participants. For instance, leaning back
or crossing arms might suggest disengagement, while constant eye contact
and active note-taking might indicate interest and engagement. When
you’re facilitating a remote workshop (and there is no video connection,
so you won’t have access to the usual body language indicators), pay
attention to the use of emojis, reactions, and the frequency of chat
activity. Also, look for signals that people want to speak; they might
be unmuting themselves, using the “raise hand” button, or physically
raising their hands.
Participation levels Keep
track of how often and who is contributing to the discussion. If you
notice a participant hasn’t contributed in a while, you might want to
encourage them to share their thoughts. You could ask, “We haven’t heard
from you yet. Would you like to add something to the discussion?”.
Conversely, if someone seems to be dominating the conversation, you
could say, “Let’s hear from someone who hasn’t had a chance to speak
yet.” It’s all about ensuring a balanced participation where every voice
is heard.
Reactions to content Observe
participants’ reactions to the topics which are being discussed. Nods of
agreement, looks of surprise, or expressions of confusion can all be
very revealing. If you notice a reaction that suggests confusion or
disagreement, don’t hesitate to pause and address it. You could ask the
participant to share their thoughts or provide further explanations to
clarify any possible misunderstandings.
Managing conflict At
times, disagreements or conflicts may arise during the workshop. As a
facilitator, it’s your role to manage these situations and ensure a safe
and respectful environment. If a conflict arises, acknowledge it openly
and encourage constructive dialogue. Remind participants of the ground
rules, focusing on the importance of respecting each others’ opinions
and perspectives. If necessary, you could use conflict resolution
techniques, such as active listening and meditating or even taking a short break to cool down the tension.
Another helpful tip is to have a space for extra ideas.
This could be a whiteboard in a physical setting or a shared digital
document in a virtual one. Encourage participants to write down any
thoughts or ideas that come up, even if they are not immediately
relevant to the current discussion. These can be revisited later and may
spur new insights or discussions.
Having
a “parking lot” section in your whiteboard tool allows the team to move
forward while not ignoring people’s ideas. Find more about the Parking Lot template from The Facilitator’s School. (Large preview)
Another tip is to use workshop-specific tools such as Butter,
where participants can express their emotions through the emoji
reaction features and be queued to ask their questions without
interrupting the speakers. Lastly, if you have a group larger than 5-6
people, consider dividing them into sub-groups and using co-facilitators
to assist in managing these sub-groups. This will make the workshop
experience much better for individual participants.
Observing
others through laptop cameras can be difficult when there are more than
5-6 people in the virtual room. That’s a big reason why you’ll need to
set the stage and establish a few ground rules at the beginning. Rules
such as “Speak one person at a time,” “Use the ‘Raise Hand’ button to
speak,” and “Leave questions in the chat space” can really improve the
experience.
Remote workshops might not be able to replace the full
experience of in-person workshops, where we can clearly see people’s
body language and interact with each other more easily. However, with
the right combination of tools and facilitation tips, remote workshops
can probably match very closely the in-person experience and make the
participants happy.
As
you go about your workshop, respecting your agenda is essential. This
is all about sticking to your plan, staying on track, and communicating
clearly with the participants about what stage you’re at and what’s
coming next.
Scheduled breaks are equally as important. Let’s say
you’ve planned for a 10-minute break every 45 minutes, then stick to
this plan. It offers participants time to rest, grab a quick snack (or
coffee/tea), refresh their minds, and prepare for the next part. This is
particularly significant during online workshops where screen fatigue
is a common problem.
We know workshops don’t always go as planned —
disruptions are often part of the package. These could range from a
technical glitch during a virtual workshop, a sudden question sparking a
lengthy discussion, or just starting a bit late due to late arrivals.
This is where your “buffer time” will come in handy!
Respecting
the buffer time allows you to handle any disruption that may come up
without compromising on the workshop content or rushing through sections
to recover the lost time. If there are no disruptions, this time can be
used for additional discussions or exercises or even finishing the
workshop earlier — something that participants usually appreciate.
Remember
to stay focused. As the facilitator, you should keep discussions on
track and aligned with the workshop’s goals. If the conversation veers
off-topic, gently guide it back to the main point.
A
critical part of concluding your workshop is following up with
participants. This not only helps solidify the decisions and actions
that were agreed upon but also maintains the collaborative momentum even
after the workshop ends.
Meeting Minutes Send
out a concise summary of the workshop, including the key points of
discussion, decisions made, and next steps. This serves as a reference
document for participants and ensures everyone is on the same page.
Action Plan Detail
the agreed-upon action items, the person responsible for each, and the
deadlines. This provides clarity on the tasks to be accomplished
post-workshop.
Next Steps Clearly
communicate the next steps, whether that’s a follow-up meeting, a
deadline for tasks, or further resources to explore. This ensures that
the momentum from the workshop continues.
Completing
a workshop is no small feat. It takes dedication, focus, and
collaborative effort from all participants. So, don’t let this moment
pass uncelebrated. Recognizing everyone’s contributions and celebrating
the completion of the workshop is an essential concluding step.
This
not only serves as a token of gratitude for the participant’s time and
effort but also reinforces the sense of achievement, promoting a
positive and inclusive culture. Reflect on the journey you all undertook
together, emphasizing the progress made, the skills developed, and the
insights gained.
In your closing remarks or a follow-up communication, highlight specific achievements or breakthrough moments from the workshop.
You might also share key takeaways or outcomes that align with the
workshop’s objectives. This helps to not only recap the learning but
also underscore the value each participant brought to the workshop.
Consider
personalized gestures to commemorate the workshop — certificates of
completion, digital badges, or even just a special mention can make
participants feel recognized and appreciated. Celebrations, no matter
how small, can build camaraderie, boost morale, and leave everyone
looking forward to the next workshop.
Let me conclude Part 2 by quoting Simon Raybould, who wonderfully encapsulates the art of facilitation, by saying:
“The secret of facilitating is to make it easy for people to learn. If you’re not making it easy, you’re not doing it right.” — Simon Raybould
I
couldn’t agree more. The inclusive workshop is not just about getting
things done; it represents the symphony of diverse voices coming
together, the exploration of ideas, and the collective journey toward
shared objectives. Embracing this essence of inclusivity and embedding
it into your workshop design and delivery makes for an environment where
everyone feels respected, collaboration is enhanced, and innovative
thinking flourishes.
As a facilitator, you have the power to make
the workshop experience memorable and inspiring. The influence of your
efforts can extend beyond the workshop, cultivating an atmosphere of
respect, diversity, and inclusivity that spills over into all
collaborative activities. This is the true impact and potential of
well-executed, inclusive workshops.
Here are a few additional resources on the topic of workshops. I hope you will find something useful there, too.
Gamestorming: A Playbook for Innovators, Rulebreakers, and Changemakers, by Dave Gray, Sunni Brown, and James Macanufo This
well-known playbook provides a wide range of strategies and activities
for designing workshops that encourage a creative, productive thinking
environment. If you’re leading workshops and wish to encourage more
out-of-the-box thinking, this book is a perfect source of inspiration.
Sprint, by Jake Knapp, John Zeratsky, and Braden Kowitz This
is another well-known book in the workshop space. The book focuses on
mastering the facilitation of Design Sprint, a workshop method by Google
aimed at solving business problems and fostering collaboration. If
you’re keen on leading tech teams or startups, this book is a great
pick.
The Workshop Survival Guide, by Devin Hunt and Rob Fitzpatrick This
guide navigates you through the end-to-end process of designing and
conducting successful workshops. Whether you’re a newbie or an
experienced facilitator, this resource gives comprehensive support to
facilitate workshops confidently.
Invent To Learn: Making, Tinkering, and Engineering in the Classroom, by Sylvia Libow Martinez and Gary S. Stager Even
though it is primarily for school educators, the book shares a wide
range of methods and techniques that you can adapt to any workshop
setting to create inclusive, creative, and hands-on learning
environments. Highly recommended for those interested in creating an
inclusive environment in any setting.
No Hard Feelings: The Secret Power of Embracing Emotions at Work, by Liz Fosslien and Mollie West Duffy Although
it doesn’t focus on workshops specifically, the book gives useful
insights on managing emotions at work from both participant and
facilitator perspectives. It offers a broad overview of different
personalities at work and how to foster emotional inclusivity, which can
be valuable when facilitating workshops.
“A Comprehensive Checklist For Running Design Workshops,” by Slava Shestopalov Slava’s
article is a thorough guide to designing and conducting a successful
workshop. This is a highly recommended read for designers, product
managers, or even engineers looking to understand the nuances of running
a design-centric workshop.
“The Workshopper Playbook — A Summary” (AJ&Smart) The
summary of “The Workshop Playbook” discusses the 4C technique that
AJ&Smart developed for constructing any workshop. The 4C’s —
Collect, Choose, Create, and Commit — form an exceptional workshop
framework that adheres to the double-diamond method of workshop creation. If you’re interested in gaining a more profound understanding of the 4C framework, consider reading the full book by AJ&Smart.
“The Secret To Healthy Remote Work: Fewer Meetings, More Workshops,” by Mehdi En-Naizi The
article promotes the shift from traditional meetings to workshops in
remote work settings to boost productivity and decrease stress. It
highlights the workshops’ effectiveness, enhanced focus, and their role
in promoting team unity and social interactions.
“10 Tips On Running An Online Meeting Your Team Won’t Hate (And Free Templates To Try!),” Anamaria Dorgo and Cheska Teresa This
guide provides a detailed approach to overcoming the fatigue and
frustration often associated with online meetings. The tips include
clearly defining the meeting’s purpose, sticking to an agenda, creating
an inclusive space for active participation, scheduling regular breaks,
and using breakout rooms for more focused discussions.
“Dot Voting: A Simple Decision-Making and Prioritizing Technique in UX,” Sarah Gibbons (NN/g Nielsen Norman Group) A
few UX workshop activities work well in any situation, and dot voting
is one of them. Dot voting is a simple tool used to democratically
prioritize items or make decisions in a group setting. It is an easy,
straightforward way to narrow down alternatives and converge on a set of
concepts or ideas.
“How Do You Encourage Introverts And Quiet Participants To Share Their Ideas In A Meeting?” (LinkedIn — Meeting Facilitation) Meetings
are essential for collaboration, creativity, and innovation. But not
everyone feels comfortable speaking up in a group setting. Some people
may be introverted, shy, or simply prefer to listen and process
information before sharing their thoughts. How do you encourage these
quiet participants to contribute their valuable ideas in a meeting?
“Teacher Toolkit: Think-Pair-Share” — YouTube, (Think-Pair-Share webpage) This
versatile tool can be used in any classroom. The discussion technique
gives students the opportunity to respond to questions in written form
before engaging in meaningful conversation with other students. Asking
students to write and discuss ideas with a partner before sharing with
the larger group builds confidence, encourages greater participation,
and results in more thoughtful discussions. (Editor’s Note:The Teacher Toolkit webpage is temporarily down. Until their server is restored, you can use a full webpage copy preserved by the WayBack Machine. — MB)
“Fishbowl Conversation” Fishbowl
Conversation is great for keeping a focused conversation when you have a
large group of people. At any time, only a few people have a
conversation (the fish in the fishbowl). The remaining people are
listeners (the ones watching the fishbowl). The caveat is that the
listeners can join the discussion at any moment.
“Lightning Talks” (Design sprints by Google) Lightning
Talks are a core Design Sprint method and a powerful opportunity to
build ownership in the Design Sprint challenge. Plan and set up
Lightning Talks before your Design Sprint begins. After all the
Lightning Talks are finished, hold an HMW sharing session to capture and
share all the opportunities your team has come up with.
“AJ&Smart’s Remote Design Sprint” The
lightning demo activity from Design Sprint is a perfect example of the
“Idea Gallery” type of activity. Participants work individually to
create a visual or written representation of their ideas (like a
poster), and then everyone walks around to view the “gallery” and people
discuss the ideas.
“Poster Session” (Gamestorming) The
goal of a poster session is to create a set of compelling images that
summarize a challenge or topic for further discussion. Creating this set
might be an “opening act,” which then sets the stage for choosing an
idea to pursue, or it might be a way to get indexed on a large topic.
“Jigsaw Activities” (The Bell Foundation) Jigsaw
activities are a specific type of information gap activity that works
best when used with the whole class. The class is first divided into
groups of four to six learners who are then given some information on a
particular aspect of the topic, which they later become experts in.
“Disney Brainstorming Method” The
Disney method was developed in 1994 by Robert Dilts based on Walt
Disney’s creative approach. It’s a good mix of creativity and
concreteness as it’s not only about generating ideas but also looking at
them with a critical eye and, eventually, having a few of them ready to
be further explored and implemented.
“Support Extroverted Students in Remote Environment — Group Discussions” Several
video platforms have options for small group discussions. If you’re
using one of these, breaking into small groups can be a great
opportunity to help your extroverted students feel fulfilled (and for
your more introverted students to “warm up” for group discussion).
“37 brainstorming techniques to unlock team creativity,” by James Smart (SessionLab) It’s
important to find a framework and idea-generation process that empowers
your group to generate meaningful results, as finding new and
innovative ideas is a vital part of the growth and success of any team
or organization. In this article, several effective brainstorming
techniques are explored in detail in categories such as creative
exercises and visual idea-generation games.
“Round-Robin Brainstorming” (MindTools blog) It’s
all too easy to start a brainstorming session with good intentions but
then overlook or miss potentially great ideas simply because one
assertive person sets the tone for the entire meeting. This is why a
tool like Round-Robin Brainstorming is so valuable. This method allows
team members to generate ideas without being influenced by any one
person, and you can then take these ideas into the next stages of the
problem-solving process.
“Eysenck’s Personality Theory” (TutorialsPoint) What
is Eysenck’s Personality Theory? This theory has been influential in
personality psychology and used to explain various phenomena, including
individual differences in behavior and mental health.
Meeting Design: For Managers, Makers, and Everyone, a book by Kevin Hoffman Meetings
don’t have to be painfully inefficient “snoozefests” — if you design
them well. Meeting Design will teach you the design principles and
innovative approaches you’ll need to transform meetings from boring to
creative, from wasteful to productive.
“State of Meetings Report 2021” How
did meetings actually change in 2020? What will the long-term impact of
this change be? And could 2020 have changed the way we meet for good?
These are questions that will be answered in this detailed report.
Social Identity Theory (Science Direct) Social
identity theory defines a group as a collection of people who
categorize themselves as belonging to the same social category and
internalize the category’s social identity-defining attributes to define
and evaluate themselves — attributes that capture and accentuate
intragroup similarities and intergroup differences.
“Clarizen Survey Pins Falling Productivity Levels on Communication Overload” (Bloomberg) A
new survey by Clarizen, the global leader in collaborative work
management, finds that companies’ efforts to improve collaboration among
employees by opening new lines of communication can have the opposite
effect.
“Conflict Resolution Skills: What They Are and How to Use Them” (Coursera) Handling
conflict in any context is never fun. Often, issues become more
complicated than needed if the people involved need more conflict
resolution and general communication skills. In this article, you’ll
learn more about conflict resolution and, more specifically, how
different conflict resolution skills may be useful in various
situations.
“Meeting Parking Lot” (The Facilitator’s School) A free template for handling off-topic questions, topics, and discussions. Available in Miro Template and Mural Template format.
SmashingConf Online Workshops Finally, do meet the friendly Smashing Magazine front-end & UX workshops!
These remote workshops aim to give the same experience and access to
experts that you would have in an in-person workshop without needing to
leave your desk or couch. You can follow along with practical examples
and interactive exercises, ask questions during the Q&A sessions,
and use workshop recordings and materials to study at your own pace, at
your own time.
With the new CSS linear()
easing function on the horizon, the possibilities of what we can do to
create natural-feeling animations and transitions in the future are
greatly expanded. Jhey Tompkins looks at the current state of CSS easing
in this article and demonstrates what we can expect from linear(), including handy tools to get your hands on it today.
To paraphrase a saying that has always stuck with me: “The best animation is that which goes unnoticed.”
One of the most important concepts of motion design on the web is
making motion “feel right.” At the same time, CSS has been fairly
limited when it comes to creating animations and transitions that feel
natural and are unobtrusive to the user experience.
Fortunately,
that’s changing. Today, let’s look at new easing capabilities arriving
in CSS. Specifically, I want to demonstrate the easing superpowers of linear()
— a new easing function that is currently defined in the CSS Easing
Level 2 specification in the Editor’s Draft. Together, we’ll explore its
ability to craft custom easing curves that lead to natural-feeling UI
movement.
The fact that linear() is in the Editor’s
Draft status means we’re diving into something still taking shape and
could change by the time it reaches the Candidate Recommendation. As you
might imagine, that means linear() has limited support at this moment in time. It is supported in Chrome and Firefox, however, so be sure to bear that in mind as we get into some demos.
Before
we jump straight in, there are a couple of articles I recommend
checking out. They’ve really influenced how I approach UI motion design
as a whole:
There
are plenty of great resources for designing motion in UI, but those are
two that I always keep within reach in my browser’s bookmarks, and they
have certainly influenced this article.
We define CSS easing with either the animation-timing-function or transition-timing-function properties, depending on whether we are working with an animation or transition respectively.
The cubic-bezier() function has traditionally provided the most flexibility for creating easing with a little character. The site cubic-bezier.com is a great resource for creating bespoke easing functions. Otherwise, figuring out the exact curve values can be a chore.
This
is the current state of easing in CSS. We’ll get to the shiny, new
stuff in a bit. But first, I think it’s a good idea to revisit how
easing functions influence easing behavior in curvatures.
We can visualize different easings with a graphical curve. The site easings.net does a good job of providing options that can be used with the cubic-bezier() timing function.
An
easing curve represents the movement’s behavior. The left end is the
start of the movement, and the segments in blue represent faster
movement. (Large preview)
Easing curves can also be viewed in Chromium DevTools, allowing you to inspect any curve applied to a transition or animation.
The curves are directly editable with the toggles on each endpoint. (Large preview)
But
what if you need something a little extra than what’s available? For
example, what about a bounce? Or a spring? These are the types of easing
functions that we are unable to achieve with a cubic-bezier() curve.
The linear()
function defines a piecewise linear function that interpolates linearly
between its points, allowing you to approximate more complex animations
like bounce and elastic effects.
In other words, it’s a
way to plot a graph with as many points as you like to define a custom
easing curve. That’s pretty special and opens new possibilities we could
not do before with CSS animations and transitions.
For example, the easing for a bounce could look like this:
A gentle reminder that browser support is limited to Chrome and Firefox, so be sure to view the demo in one of those browsers. We’re only waiting on Safari at the moment, so we’re almost there!
That
easing example sure looks like a lot of numbers plucked straight out of
thin air, doesn’t it? As far as complexity goes, we’re looking at
something that’s as scary as cubic-bezier() at first
glance. The good thing is, once you’ve defined an ease, you’re unlikely
to have to touch it again… at least for a while. It’s pretty much a
set-it-and-forget-it sort of thing.
But how do we get the numbers in the first place? Jake, the clever mind behind linear(), put together an online generator
that does all the heavy lifting for us. In fact, I got the easing
values for the bounce demo straight from Jake’s handy tool. Here is a permalink to the output.
For
as long as I can remember, if I’ve needed some special easing for the
work I’m doing, GreenSock has been my go-to solution. Its ease visualizer is one of my favorite examples of interactive documentation.
GreenSock’s
Ease Visualizer demonstrates different easing curves — including custom
curves — and provides a snippet to use with its library. (Large preview)
As soon as I heard about the linear() function, my mind went straight to: “How can I convert GreenSock eases to CSS?”
Imagine how awesome it would be to have access to a popular set of
eases that can be used directly in CSS without reaching for JavaScript.
GreenSock’s
visualizer accepts JavaScript or an SVG path. So, my first thought was
to open DevTools, grab the SVG paths from the visualizer, and drop them
into the tool. However, I encountered a hurdle because I needed to scale
down the path coordinates for a viewBox of 0 0 1 1. GreenSock’s visualizer has a viewBox set to 0 0 500 500.
I wrote a function to convert the coordinates and reverse the path to
go in the right direction. Then, I reached out to Jake with some
questions about the generator. The code is available on GitHub.
In my head, I thought the SVG route made sense. But, then I created a path that wouldn’t work in the tool. So, I reached back out to Jake, and we both thought the issue was a bug in the tool.
Jake
then asked, “Why do you need to go via SVG?”. His question was spot on!
The JavaScript input for the tool expects an easing function. An easing
function maps time to a progress value. And we can get the easing
functions straight out of GreenSock and pass them to the generator. Jake
managed to dig the back easing function out of the GreenSock GitHub repo and create the easing I was originally after.
Now
that I’ve given you a bunch of context, we have all the parts of the
puzzle we need to make something that can convert GSAP easing to CSS
code.
First, we extract the parts from Jake’s linear() generator tool into a script. The idea is to loop over a set of keys and generate a block of CSS with linear() easings. GreenSock has a lovely utility method called parseEase. It takes a string and returns the easing function. The accepted strings are the GreenSock easing functions.
As
this loops over an object with different easing functions, we can pass
them into the extracted code from the tool. We modify that extracted
code to our needs.
const easings = ''
const simplified = 0.0025
const rounded = 4
const EASES ={'power-1--out': gsap.parseEase('power1.out')
// Other eases
}// Loop over the easing keys and generate results.
for (const key of Object.keys(EASES)){
// Pass the easing function through the linear-generator code.
const result = processEase(key, EASES[key])
const optimised = useOptimizedPoints(result.points, simplified, rounded)
const linear = useLinearSyntax(optimised, rounded)
const output = useFriendlyLinearCode(linear, result.name, 0)
easings += output
}// Generate an output CSS string.
let outputStart = ':root {'
let outputEnd = '}'
let styles = `
${outputStart}${easings}${outputEnd}
`
// Write it to the body.
document.body.innerHTML = styles
The functions we extracted from the linear generator do different things:
processEase This is a modified version of processScriptData. It takes the easing functions and returns points for our graph.
useOptimizedPoints This optimizes those points based on the simplied and rounded values. This was where I learned about the Douglas Peucker algorithm from Jake.
useLinearSyntax This takes the optimized points and returns the values for the linear() function.
useFriendlyLinearCode This takes the linear values and returns a CSS string that we can use with the ease’s custom property name.
It’s worth noting that I’ve tried not to touch these too much. But it’s also worth digging in and dropping in a breakpoint or console.info at various spots to understand how things are working.
After running things, the result gives us CSS variables containing the linear() easing functions and values. The following example shows the elastic and bounce eases.
We’re
able to adjust this output to our heart’s desire with different keys or
accuracy. The really cool thing is that we can now drop these GreenSock eases into CSS!
Here’s a little tool I put together. It allows you to select the type of animation you want, apply a linear() ease to it, and determine its speed. From there, flip the card over to view and copy the generated code.
And just for fun, here’s a demo that takes the GreenSock ease string as an input and gives you the linear() function back. Try something like elastic.out(1, 0.1) and see what happens!
You
don’t think we’d leave out those of you who use Tailwind, do you? Not a
chance. In fact, extending Tailwind with our custom eases isn’t much
trouble at all.
I’ve put something together in Tailwind Play for you to see this in action and do some experimenting. This will give you classes like animation-timing-bounce-out and ease-bounce-out.
CSS
has traditionally only provided limited control over the timing of
animations and transitions. The only way to get the behavior we wanted
was to reach for JavaScript solutions. Well, that’s soon going to
change, thanks to the easing superpowers of the new linear() timing function
that’s defined in the CSS Easing Level 2 draft specification. Be sure
to drop those transitions into your demos, and I look forward to seeing
what you do with them!
