Collective #739




Our Sponsor

Explore the world like a local with Babbel

If you’ve always wanted to learn a new language, Babbel will be the most productive 10 minutes of your day. Trusted by over 10 million subscribers worldwide, the subscription-based language learning platform can get you confidently conversing in a new tongue in just three weeks. This isn’t your grade school textbook: the bite-sized lessons, available in 14 languages, teach you localized vocabulary you’ll actually use in the real world. Plus, speech recognition technology helps you perfect your accent. Sign up today and get up to 60 percent off your subscription.

Learn more












MinRims

A very cool website with some 3D goodness made in Webflow by Diego Toda de Oliveira.

Check it out




Floor796

An incredible, ever-expanding animation scene depicting the everyday life of the 796th floor of the huge space station.

Check it out


Mathics

Mathics is a free, open-source general-purpose computer algebra system featuring Mathematica®-compatible syntax and functions.

Check it out



Fathy

A very interesting article on forking Chrome to turn HTML into SVG.

Check it out






Collective #735



Collective 735 item image
This content is sponsored via Paved

Keep industry-wide IT news at your fingertips

It’s crucial for web developers and designers to keep up with the latest industry trends. But, it can be challenging to find resources that provide relevant news and insights. Enter: IT Brew, the email newsletter that delivers the top updates from the IT universe straight to your inbox 3x a week.

Check it out today


Collective 735 item image

Kodemo

Kodemo is tool for writing more engaging code tutorials, walkthroughs and documentation. It can be used to author documents in the cloud or you can integrate it with your own app.

Check it out




Collective 735 item image

Illustration.lol

A curated collection of editorial illustrations and imagery from illustrators and art directors around the world.

Check it out









Collective 735 item image

Muse 001

An exploration of space, motion, and generative audio. Created with Three.js, Anime.js, Tone.js, Blender, and Mixamo. By Henry Egloff.

Check it out






Collective 735 item image

Projectbook

Over 100 free project ideas for learning how to program with detailed specifications and mock-ups.

Check it out



Collective 735 item image

Linen

Linen is a Google-searchable community chat tool. Linen was built as an alternative to closed tools like Slack and Discord.

Check it out


Collective 735 item image

Nabla

An isometric color font by Arthur Reinders Folmer and Just van Rossum.

Check it out



Looking Back At SmashingConf SF 2022

Last month, we hosted our first offline + online conference in San Francisco. It was also our first in-person conference since 2019, and we were extremely excited — and of course, a little apprehensive — to get back to in-person conferences again. In this article, we would like to share our perspective as organizers and take a look at our upcoming events.

Why We Were So Excited

Over the last few years, we got a lot better at postponing conferences, and we were wondering if we were still good at actually organizing them. Some things definitely felt a bit rusty, but lots of things were back to normal pretty quickly. I think every speaker started with a heartfelt, “I am so happy to be back on an actual stage looking you in the eye,” before diving into their actual talk. Our attendees helped massively by providing proof of vaccination before or during check-in, and the atmosphere was very friendly and festive overall.

June 20 & 21, 2022 was the date of our return to hosting in-person events, and it was a hit!

We love bringing people together. And yes, online events are amazing and offer plenty of opportunities for connection. But seeing old friends and new—and being able to give some people a long-overdue hug—was something we all missed very much.

And because Smashing is an all-remote team, we had not seen each other for 2.5 years ‐ since our New York event back in October 2019. And yes, all of us have aged a bit (with less or greyer hairs and more wrinkles and bags under our eyes), but the amount of energy we get from these events is just amazing. We saw many people making new friends, reconnect with old friends, get inspired, eat, drink and mingle — which is just incredible.

The Program of The Conference

Our program consisted of two days of single-track talks, ‘sandwiched’ by two days of immersive workshops. The speakers and workshops provided a strong mix of design and front-end topics. At Smashing, we strongly believe in conferences with a wide range of topics (as you can learn something from every talk), and hence don’t do conferences focused on a single thing (we do that in our community Meets events). Topics ranged from CSS, Design Systems, and UX Writing to learning how to talk again. And of course, there were surprises such as Addy Osmani (as our mystery speaker) — speaking about life lessons rather than web performance this time.

The mystery speaker for #SmashingConf SF is… @addyosmani!

First time I’ve seen a talk of his live!

His talk on life lessons is PERFECT timing for me as I make sense of reinventing how I self-actualize and my priorities turning 30 during the pandemic! 🙌🏾 pic.twitter.com/OltgthvG17

— Kevin Lozandier @ #SmashingConf (@KevinLozandier) June 22, 2022

Day 1

Speaker Name Talk Title
Brad Frost Creating Themeable Design Systems
Kate Kalcevich Scaling Up Accessibility
Robin Marx Married to HTTP/3
Shubhie Panicker De-Mystifying Leadership
Miriam Suzanne Styling the Intrinsic Web (with Container Queries, Layers, and Scope)
Elliot Jay Stocks Typography for the People

Day 2

Speaker Name Talk Title
Addy Osmanix Life Lessons by our Mystery Speaker
Harry Roberts Get Your Head Straight
Vitaly Friedman Designing for Complex UIs
Sophie Tahran Designing with Words
Dan Rubin We Don’t Talk Anymore
Jhey Tompkins Take Your Skills to the Moon with Creative Coding

Besides the program throughout the days, we had some great evening events, starting with the Jam sessions — which were a mix of short talks and mingling — and a legendary Smashing party where we brushed up on our gaming skills (and late 20th-century hits) and of course the dancing to Tobi’s fantastic DJ skills. Early risers were invited to participate in a 5K Golden Gate Bridge run each conference morning, too.

Of course all sessions were recorded, and the videos of the conference will be released in a few weeks, so please stay tuned! 💌

The Venue

This year we returned to the fabulous Fort Mason and really made use of the space. The main conference was held at the historic Cowell Theater. We were lucky to have fantastic weather, and this iconic location ‐ with its scenic views of San Francisco Bay and the Golden Gate Bridge ‐ was gorgeous as ever. The workshops were hosted in Fort Mason’s light - filled meeting rooms, giving attendees the chance to deep-dive into design and development topics in a smaller, classroom-style setting.

Our second location was virtual; this time, we also hosted an online version of the event via our online Vi.to hub. With the ability to follow the high-quality conference live stream from home (or office), ask questions in the chat, and see some light-hearted backstage interviews, this online experience was a great option that we will continue to offer in the future.

Ted Boyer, a Seattle-based designer and front-end developer, has been following the stream remotely and has written about his experience watching SmashingConf SF 2022 online.

A Smashing Conference is always designed to be unique in some ways. So of course, on stage, we also have our dear friend Tobi Baldower DJing between the talks, and doing sketch notes in music live. We can’t even imagine a Smashing Conference without Tobi, and he has plenty of fans around the world these days! The energy Tobi has is absolutely incredible, and it always contributes to the atmosphere of the event. You can support DJ Tobi by purchasing his music on Bandcamp (and please do so if you can!).

What’s Next?

We did some sleeping first, interspersed by some light post-conference admin to wrap things up. And now we are putting the finishing touches on our upcoming offline + online conferences in:

It is really cool to see our team so incredibly inspired to get back to organizing more and even better “hybrid” experiences in the future.

Great conference to remind, connect and find your passion. Until next time #smashingconf pic.twitter.com/w4vrajlvwH

— Rosa Arcadeia Buendia (@lapilitorres) June 23, 2022

Said it once, but have to say it again: the energy of bringing people together is just fantastic, and working on these events with a great team of amazing participants is something we hope we can do for a looooong time to come. Every SmashingConf has a unique lineup of speakers and workshops, and we do our best to make every talk as valuable as possible.

It goes without saying that we’d be absolutely delighted and honored to meet you there — in Freiburg and/or in New York.

Boost Your Skills Online: Smashing Workshops On Front-End And Design

How do we build and establish a successful design system? What about modern CSS and JavaScript? What’s the state of HTML Email? And what are new, smart design patterns we could use? What will it take us to move to TypeScript or Vue.js? With our online workshops, we try to answer these questions well.

Our workshops bring in knowledgeable, kind folks from the community to explore real-life solutions to real-life problems, live, with you. All sessions are broken down into 2.5h-segments across days, so you always have time to ask questions, share your screen and get immediate feedback. Jump to all workshops.

Meet Smashing Online Workshops: live, interactive sessions on front-end & UX.

In fact, live discussions and interactive exercises are at the very heart of every workshop, with group work, homework, reviews and live interaction with people around the world. Plus, you get all video recordings of all sessions, so you can re-watch at any time, in your comfy chair in familiar comfort of your workspace.

Upcoming Workshops (May-September 2021)

No pre-recorded sessions, no big picture talks. Our workshops take place live and span multiple days. They are split into 2.5h-sessions, plus you’ll get all workshop video recordings, slides and a friendly Q&A in every session.

We also have friendly bundles for larger teams and agencies.

Workshops in May–July

Meet our friendly front-end & UX workshops. Boost your skills online and learn from experts — live.

Workshops in August–September

What Are Online Workshops Like?

Do you experience Zoom fatigue as well? After all, who really wants to spend more time in front of their screen? That’s exactly why we’ve designed the online workshop experience from scratch, accounting for the time needed to take in all the content, understand it and have enough time to ask just the right questions.

In our workshops, everybody is just a slightly blurry rectangle on the screen; everybody is equal, and invited to participate.

Our online workshops take place live and span multiple days across weeks. They are split into 2.5h-sessions, and in every session there is always enough time to bring up your questions or just get a cup of tea. We don’t rush through the content, but instead try to create a welcoming, friendly and inclusive environment for everyone to have time to think, discuss and get feedback.

There are plenty of things to expect from a Smashing workshop, but the most important one is focus on practical examples and techniques. The workshops aren’t talks; they are interactive, with live conversations with attendees, sometimes with challenges, homework and team work.

Of course, you get all workshop materials and video recordings as well, so if you miss a session you can re-watch it the same day.

TL;DR

  • Workshops span multiple days, split in 2.5h-sessions.
  • Enough time for live Q&A every day.
  • Dozens of practical examples and techniques.
  • You’ll get all workshop materials & recordings.
  • All workshops are focused on front-end & UX.
  • Get a workshop bundle and save $250 off the price.

Thank You!

We hope that the insights from the workshops will help you improve your skills and the quality of your work. A sincere thank you for your kind, ongoing support and generosity — for being smashing, now and ever. We’d be honored to welcome you.

From Cats With Love: New Navigation, Guides And Workshops

Not many people know that the entire Smashing Family is a very small team with just 15 wonderful people working day-to-day on everything from magazine and books to front-end and design. At times it might feel like that’s quite a bit of work, but we do our best to be well-organized and be productive, while working (well, mostly) 100% remote for almost a decade now.

In fact, we’ve been quite busy over the last few months. We’ve been running our online workshops, redesigned our navigation, refactored a number of components, refined performance and improved accessibility. There are more subtle UX changes coming in, and we’d love to share what we’ve been cooking. Settle in.

Upcoming Online Workshops

We’ve run 40 workshops with 2.600 attendees so far, and we’ve learned how to run a workshop where you, dear readers, learn best. So for the next months, we’ve set up a full schedule on front-end and design, from web performance to interface design. Jump to all workshops ↬

Workshops in April–May

Meet our friendly front-end & UX workshops. Boost your skills online and learn from experts — live.

Workshops in June–July

No pre-recorded sessions, no big picture talks. Our online workshops take place live and span multiple days across weeks. They are split into 2.5h-sessions, plus you’ll get all workshop video recordings, slides and a friendly Q&A in every session. (Ah, you can save up to 25% off with a Smashing Membershipjust sayin’!.)

New Navigation (Beta Testing)

With so many articles on the site, finding the right articles can be difficult. So for the last weeks, we’ve been going through 3.500 articles and manually refining and standardizing the underlying taxonomy of our posts. You might have been there as well: dealing with articles accommodated over 15 years wasn’t quite easy.

That was quite an exercise in patience and hard work — but now we are happy to roll out the new navigation, with important navigation options surfaced prominently across the entire site. Hopefully, you’ll find the new navigation (on the top of this page, too) more useful.

Please leave a comment if you spot any bugs, mistakes, or perhaps something important missing — we’ll do our best to fix it and deploy right away.

New Evergreen Guides (Beta Testing)

We have also rolled out new article formats — evegreen guides. These are the articles with curated articles, tutorials, tools and resources that we keep updating regularly. There are a few more of those coming up, but they should be a reliable source of techniques and tools.

Here’s what we’ve published so far:

You can also access the guide on the new Smashing Magazine's frontpage, although some UI/UX changes will be coming in there as well. Feedback? We are listening on Twitter, of course.

Join Our Free Online Meet-Up (Apr 27)

We’re getting closer and closer to our free online meetup coming April 27 — and we’d be honored and humbled to welcome you there. There we will be running a website makeover of the Powercoders NGO, live.

Tickets are absolutely free. So, if you don’t have one yet, please check out the details, speakers, schedule and timezones and get your ticket today, mark your calendars and invite your friends and colleagues to join in.

Thank You!

We are very committed to improving Smashing in every possible way, and we are working hard to do just that behind the scenes. We’d sincerely appreciate you recommending our little site, our articles and workshops to your friends and colleagues — and we hope that they will help you boost your skills and the quality of your work.

A sincere thank you for your kind, ongoing support and generosity — thank you for being smashing, now and ever. Ah, and subscribe to our newsletter — we have plenty of new announcements coming up soon! ;)

Counting Down To Bundles Of Smashing Joy And Workshops In 2021

This year has been quite a ride — all the more reason to look forward to a new year with new beginnings, right? Well, we’ll never really know what awaits us in the next months to come, but what I do know is that everyone on this planet can do only so much and really just the best they can to pull through. It’s certainly been a year of less ups and more downs for so many people around the world, and we hope that with everything we’ve been doing at Smashing has helped make life at least a lil’ bit easier.

Plan Your Year Ahead With Online Workshops

Have you attended one of our workshops yet? The Smashing Events team is thrilled each and every time they run a workshop with all of the wonderful attendees from all over the world coming together to learn together. So many ideas have been brought to life thanks to the live design and coding sessions, and there are many folks that have found new friends, too!

It gets even better: We now have workshop bundles from which you can choose three, five or even ten workshop tickets for the workshops of your choice — ongoing, upcoming or the ones happening in the future!


Jan. 5 – Jan. 19 Build, Ship and Extend GraphQL APIs from Scratch Christian Nwamba Dev
Jan. 19 – Jan. 27 Form Design Masterclass Adam Silver Dev
Jan. 21 – Feb. 5 New Adventures In Front-End, 2021 Edition Vitaly Friedman Design & UX
Feb. 2 – Feb. 10 Building Modern HTML Emails Rémi Parmentier Dev
Feb. 11 – Feb. 26 The SVG Animation Masterclass Cassie Evans Dev
Feb. 16 – Feb. 17 The CSS Layout Masterclass Rachel Andrew Dev
Feb. 23 – Mar. 9 Successful Design Systems Brad Frost Dev
Mar. 4 – Mar. 12 Psychology For UX and Product Design Joe Leech Design & UX
Mar. 16 – Mar. 24 Finding Clients Masterclass Paul Boag Design & UX
Mar. 18 – Apr. 1 Behavioral Design Susan & Guthrie Weinschenk Design & UX
Mar. 30 – Mar. 31 Designing The Perfect Navigation Vitaly Friedman Design & UX

We hope you’ll find at least one workshop in the list above that fits your projects and career path, and if not, please do get in touch with us on Twitter and we promise to do our best to make it happen. Also, feel free to subscribe here if you’d like to be one of the first folks to be notified when new workshops come up, and get access to early-bird prices as well — we’ll have lots of goodies coming your way very soon!

Members Get Access To Videos And More

We’re proud to have a steadily growing Membership family who love good content, appreciate friendly discounts, and are an active part of our lovely web community. If you’re not involved yet, we’d love for you to join in and become a member, too! There are constant discounts on printed books, job postings, conference tickets, and your support really helps us pay the bills. ❤️

Smashing Podcast: Tune In And Get Inspired

This year, we’ve published a new Smashing Podcast episode every two weeks, and the feedback has been awesome! With over 56k downloads (just over a thousand per week, and growing!), we’ve had 34 guests on the podcast with different backgrounds and so much to share!

If you don’t see a topic you’d like to hear and learn more about, please don’t hesitate to reach out to host Drew McLellan or get in touch via Twitter anytime — we’d love to hear from you!

1. What Is Art Direction? 2. What’s So Great About Freelancing?
3. What Are Design Tokens? 4. What Are Inclusive Components?
5. What Are Variable Fonts? 6. What Are Micro-Frontends?
7. What Is A Government Design System? 8. What’s New In Microsoft Edge?
9. How Can I Work With UI Frameworks? 10. What Is Ethical Design?
11. What Is Sourcebit? 12. What Is Conversion Optimization?
13. What Is Online Privacy? 14. How Can I Run Online Workshops?
15. How Can I Build An App In 10 Days? 16. How Can I Optimize My Home Workspace?
17. What’s New In Drupal 9? 18. How Can I Learn React?
19. What Is CUBE CSS? 20. What Is Gatsby?
21. Are Modern Best Practices Bad For The Web? 22. What Is Serverless?
23. What Is Next.js? 24. What Is SVG Animation?
25. What Is RedwoodJS? 26. What’s New In Vue 3.0?
27. What Is TypeScript? 28. What Is Eleventy?
29. How Does Netlify Dogfood The Jamstack? 30. What Is Product Design?
31. What Is GraphQL? 32. Coming up on December 29

Stay tuned for the next episode coming out very soon!

Smashing Newsletter: Best Picks

With our weekly newsletter, we aim to bring you useful content and share all the cool things that folks are working on in the web industry. There are so many talented folks out there working on brilliant projects, and we’d appreciate it if you could help spread the word and give them the credit they deserve!

Also, by subscribing, there are no third-party mailings or hidden advertising involved, and your support really helps us pay the bills. ❤️

Interested in sponsoring? Feel free to check out our partnership options and get in touch with the team anytime — they’ll be sure to get back to you as soon as they can.

Preventing Layout Shifts With CSS Grid

It’s no news that CSS Grid is a fantastic tool to build complex layouts. But did you know that it can help you prevent layout shifts, too? When Hubert Sablonnière discovered a layout shift problem with a toggling state on a UI component he worked on, he came up with a solution: the “Anti Layout Shift Grid Stacking Technique”.

Compared to solving the layout shift with absolute positioning, Hubert’s Grid-based technique supports complex situations that require more than two panels. Another benefit: You don’t need to assume which panel should guide the size of the whole component. If you want to dive in deeper, Hubert wrote up everything you need to know to prevent both vertical and horizontal shifts in a practical blog post. (cm)

Fixing Headers And Jump Links

Jump links in combination with fixed headers can cause quite some frustration. Maybe you’ve run into the same issue before: When clicked, your jump link takes you to the desired element, but a fixed header is hiding it. In the past, wild hacks were required to solve the issue. Luckily, there’s now a straightforward and well-supported CSS solution.

The trick: scroll-margin-top. Assign it to your headers, and the position: fixed header won’t get into their way anymore when you navigate to them with a jump link. A short line of code that makes a huge difference. (cm)

Fluid Typography With clamp()

When it comes to fluid scaling, CSS has some exciting new features: clamp(), min(), and max(). They cap and scale values as the browser grows and shrinks. min() and max() return the respective minimum and maximum values at any given time while clamp lets you you pass in both a minimum and maximum plus a preferred size for the browser to use.

As Trys Mudford points out, clamp() comes in particularly handy when you want broadly fluid typography without being 100% specific about the relationship between the varying sizes. In his in-depth article about the new feature, he shares valuable hands-on tips for using clamp() effectively. (cm)

Open-Source Screen Recorder And Annotation Tool

If you’ve been looking for a free and easy-to-use tool to record your screen, it might be hard to find something more powerful than Alyssa X’s open-source screen recorder Screenity.

No matter if you want to give contextual feedback on a project, provide detailed explanations, or showcase your product to potential customers, Screenity offers a number of practical features to capture, annotate, and edit your recordings — without any time limit. You can draw on the screen and add text and arrows, for example, highlight clicks and focus on the mouse, push to talk, and much more. Screenity is available for Chrome. (cm)

A Human-Friendly Date Picker

Date pickers can be hard to get right. A beautiful example of a human-friendly and fully accessible date picker comes from Tommy Feldt.

Thanks to Chrono.js, it supports natural language inputs, so that a user can type something like “tomorrow”, “December 2”, or “in 5 days” to select a date. Shortcut buttons also help to select the most common dates. The date picker is fully accessible with the keyboard and screen readers (there’s even an on-demand help feature for screen reader and keyboard users) and degrades gracefully when JavaScript or CSS aren’t available. A very inspiring proof of concept. (cm)

Become A Jamstack Explorer

The Jamstack is still unexplored territory for you? Jamstack Explorers helps change that. Its mission: teaching you about building for the web with modern tools and techniques.

You can choose from three courses, track your progress, and earn rewards as you proceed through the Jamstack universe. Tara Z. Manicsic leads you through the wilds of Angular, Phil Hawksworth teaches you how to serve and track multiple versions of your site with Netlify, and Cassidy Williams guides you through all the essentials of Next.js. Once you’ve completed the three missions, there’s not only a certificate waiting, but you can call yourself a Jamstack Explorer, ready to use the newest tools to build experiences that are robust, performant, and secure. (cm)

Making Remote Design Work

Design reviews, sprints, feedback — design is a collaborative effort that brings along quite some challenges when doing it remotely. The folks at InVision put together a collection of handy resources to help you and your team master these challenges.

The content covers three of the most trickiest aspects of working remotely: fostering creativity, aiding collaboration, and staying focused. For more best practices for running a remote design team, InVision also published a free eBook drawing from their own experience of working remotely with 700 employees spread across 30 countries and no single office. (cm)

Full-Screen Countdown Timer To Stay On Track

Sticking to the schedule can be tricky when you are running a long video call or are giving a talk or workshop. To help you make sure the session stays on track, Koos Looijesteijn built Big Timer.

The bold yet minimalist timer counts down the remaining minutes right in your browser window — and even if you accidentally close the browser tab or need to restart your device, it will take the disruption into account. Keyboard shortcuts make it easy to adjust the duration and pause or stop the countdown. One for the bookmarks. (cm)

Sounds And Music To Help You Focus

Are you the type of person who can’t focus when it’s quiet around them? Then one of the following tools might help you become more productive. If you’re missing the familiar office sounds when working from home, I Miss The Office brings some office atmosphere into your home office — with virtual colleagues who produce typical sounds like typing, squeaking chairs, or the occasional bubbling of the watercooler.

Office sounds have always distracted you more than helped you focus? Then Noizio could be for you. The app lets you mix nature and city sounds to create your personal ambient sound. Another approach to increasing focus with sound comes from Brain.fm. Their team of scientists, musicians, and developers designs functional music that affects the brain to achieve the desired mental state. Last but not least, Focus@Will is also based on neuroscience and helps increase focus by changing the characteristics of music at the right time intervals. Promising alternatives to your usual playlist. (cm)

The Web Almanac 2020

Looking back at 2020, what’s the state of the web this year? The yearly Web Almanac gives in-depth answers to this question, combining the raw stats and trends of the HTTP Archive with the expertise of the web community. The results are backed up by real data taken from more than 7.5 million websites and trusted web experts.

22 chapters make up this years’ almanac. They are divided into four parts — content, experience, publishing, distribution —, and each one of them is explored from different angles. An insightful look into the state of performance is included, too, of course. (cm)

Generate A Request Map Of Your Site

Where do all the transmitted bytes on your site come from? Analyzing third-party components in detail is a time-consuming task, but it’s already a good start to know which third parties are on your site — and how they got there.

Simon Hearne’s request map generator tool visualizes a node map of all the requests on a page for any given URL. The size of the nodes on the map is proportional to the percentage of total bytes, and, when you hover over a node, you’ll get information on its size, response and load times. No more bad surprises. (cm)

Let’s Tweak Our JavaScript Bundles!

Chances are high that with your JavaScript code being around for a while, your JavaScript bundles are a little bit outdated. You might have some outdated polyfills, or you might be using a slightly outdated JavaScript syntax. But now there is a little tool that helps you identify those bottlenecks and fix them for good.

EStimator calculates the size and performance improvement a site could achieve by switching to modern JavaScript syntax. It shows which bundles could be improved, and what impact this change would have on your overall performance. The source code is also available on GitHub. (vf)

Rescheduling SmashingConf SF And Looking Out For Each Other

Rescheduling SmashingConf SF And Looking Out For Each Other

Rescheduling SmashingConf SF And Looking Out For Each Other

Rachel Andrew

We have all been looking forward to our SmashingConf in San Francisco, and are so sad to have to announce that the conference is being postponed until 10th–11th November 2020. If you have tickets for the event, you should already have received an email. If not, then please see the detailed information on this page, get in touch with us, and we will help you out. The team is on standby to try and help you as quickly as possible.

As you can imagine, it was a very tough decision for our team to make. We have been working hard to plan this event and were looking very much forward to it for the last few months, however, we believe it is the right decision for the conference and for everyone we hoped to meet there.

We are all faced with a difficult few weeks ahead, but we still need to do our jobs, keep learning, and also stay connected with our friends. We hope that even though we can’t all meet in person, we can help a little bit as we all get through this together.

Topple the Cat holding a guitar, excited for SmashingConf taking place in San Francisco this year
Topple the Cat agrees that this is the best way forward for the safety and health of you, our dearest Smashing Family! (Read our full statement here.)

Stay Connected

We know that many of you are working from home for the first time to help prevent the spread of COVID-19, and the events and meetups that we all love to attend are being cancelled. We’re working on some ideas for the coming weeks that can be attended virtually — with no need for awkward elbow bumps and footshakes. Our online communities are going to become even more important than usual.

The entire Smashing team are remote, and the conferences are one place that many of us get to meet and spend time in person, so we know how hard it can be to lose those opportunities. The community have been sharing some great resources online, however, for those of you who are new to working from home, we went ahead and asked Twitter for tips and got some great replies — as well as links to resources.

Some of you might be having to manage a remote team for the first time, with little time to prepare. In “You’ve Found Yourself Leading A Remote Design Team,” Mark Boulton shares some tips from his own experience having led remote teams for many years. On Twitter, Linda Eliasen wrote a thread with all her tips on leading a team remotely. Also, Holloway have released a section from their upcoming guide which covers morale, mental health, and burnout in remote teams.

Laurie wrote some tips on “Remote Work For Teams” while Zsolt exlained how we can switch from in person to remote UX Research in the time of coronavirus.

For people new to remote work, there are some useful tips in “The Leapers Little Guide To… Working Well From Home Under Self-Quarantine For Coronavirus,” and also in Carie Fisher’s post, “Top 10 Pro-Tips For Working Remotely.” Benedikt Lehnert wrote a great guide with lots of practical suggestions, “I’m Working Remotely, Now What?!Vice.com have some information which they claim will help us not to feel like a “lonely garbage slug”. (Wait, what is a garbage slug?)

As someone who usually has a smarter shirt to hand to throw on over my gym clothes when I need to do a video call, I liked this tip:

Keep Learning

We have a whole back catalog of video from previous conferences, which you can enjoy from the comfort of your sofa. The talks from last year alone should keep you occupied for a while.

SmashingConf NYC 2019

SmashingConf NYC 2019Watch videos featuring Dan Mall, Brad Frost and Ian Frost, Marcy Sutton, Denys Mishunov, Trine Falbe, Maggie Wachs, Wes Bos, dina Amin, Harry Roberts, Sara Soueidan, Remy Sharp, Scott Jehl, and Miriam Suzanne.

SmashingConf Freiburg 2019

SmashingConf Freiburg 2019Watch talks from Guillaume Kurkdjian, Joe Leech, Heather Burns, Uri Shaked and Benjamin Gruenbaum, Anna Migas, Val Head, Rémi Parmentier, Sara Soueidan, Robyn Larsen, Benjamin Hersh, and Philip Walton.

SmashingConf Toronto 2019

Smashing Toronto 2019Listen to talks from Brad Frost, Sarah Drasner, Phil Hawksworth, Jenny Shen, Kristina Podnar, Steven Hoober, Phil Nash, Dan Rose, Diana Mounter, Scott Jehl, and Chris Gannon.

SmashingConf SF 2019

SmashingConf SF 2019Watch and learn from Jen Simmons, Jason Pamental, Jeremy Wagner, Katie Sylor-Miller, Miriam Suzanne, Chris Coyier, Darin Senneff, Anna Migas, Sara Soueidan, and Brad Frost.

Last But Not Least, Smashing Podcast

If you haven’t found our Smashing Podcast yet, we’re already up to episode 11. Check out the episodes and subscribe here. Of course, we will also be bringing you an article every day here on Smashing Magazine, and perhaps if you find yourself with some extra time, you might like to join our authors and write for us.

Keep In Touch

We are obviously dealing with a fast changing situation, and can only take each day or week as it comes. Take every chance to keep in touch with your friends and peers via phone, text and video chat. Check in on people who might be having a hard time. Your outgoing extrovert friend may be the person who finds the isolation of the next few weeks the hardest. Look after yourselves, each other, and please wash your hands!

Smashing Editorial (il)

Demonstrating Reusable React Components in a Form

Components are the building blocks of React applications. It’s almost impossible to build a React application and not make use of components. It’s widespread to the point that some third-party packages provide you with components you can use to integrate functionality into your application.

These third-party components tend to be reusable. The difference between them and components you probably have in your application has to do with specificity.

Here’s what I mean. Say you run a company that sells polo shirts. There are two things you can do:

  1. You can produce polos that already have a design on them, or
  2. You can have the buyer choose the design they want.

Some fundamental things will be consistent, like all polos should be short-sleeved. But the user can pick variations of the shirts, such as the color and size. A short-sleeve polo would make a good React component in that case: it’s the same item with different variations.

Now let’s say you’re working on a login form. Like polo shirts, the form has consistent characteristics, but instead of size and color variations, we'd be looking at input fields, a submit button, perhaps even a lost password link. This can be componentized and implemented with variations in the inputs, buttons, links, etc.

Input Element Example

Let’s look at it from the perspective of creating an input field for your form. Here is how a typical text input will look like as a React component:

class Form extends React.Component {
  this.state = {
    username: ''
  }
  
  handleChange = (event) => {
    this.setSate({ username: event.target.value })
  }

  render() {
    return (
      <input
        name="username
        type={type}
        placeholder="Enter username"
        onChange={this.handleChange}
        value={this.state.username}
      />
    )
  }
}

To make this input element reusable in other places and projects, we’ll have to extract it into its own component. Let’s call it FormInput.

const FormInput = ({
  name,
  type,
  placeholder,
  onChange,
  className,
  value,
  error,
  children,
  label,
  ...props
}) => {
  
  return (
    <React.Fragment>
      <label htmlFor={name}>{label}</label>
      <input
        name={name}
        type={type}
        placeholder={placeholder}
        onChange={onChange}
        value={value}
        className={className}
        style={error && {border: 'solid 1px red'}}
      />
      { error && <p>{ error }</p>}
    </React.Fragment>
  )
}

FormInput.defaultProps = {
  type: "text",
  className: ""
}

FormInput.propTypes = {
  name: PropTypes.string.isRequired,
  type: PropTypes.string,
  placeholder: PropTypes.string.isRequired,
  type: PropTypes.oneOf(['text', 'number', 'password']),
  className: PropTypes.string,
  value: PropTypes.any,
  onChange: PropTypes.func.isRequired
}

The component accepts certain props, such as the attributes that we need to make the input with valid markup, including the placeholder, value and name. We set up the input element in the render function, setting the attribute values as the props that are passed to the component. We even bind the input to a label to ensure they’re always together. You can see that we’re not making assumptions by predefining anything. The idea is to ensure that the component can be used in as many scenarios as possible.

This makes for a good component because it enforces good markup (something Brad Frost calls dumb React) which goes to show that not every component has to be some highly complex piece of functionality. Then again, if we were talking about something super basic, say a static heading, then reaching for a React component might be overkill. The possible yardstick for making something a reusable component probably ought to be when you need the same functionality in other parts of an application. There’s generally no need for a "reusable" component if that component is only used once.

We can make use of our input component in another component, the LoginPage.

class LoginPage extends React.Component {
  state = {
    user: {
      username: "",
      password: ""
    },
    errors: {},
    submitted: false
  };

  handleChange = event => {
    const { user } = this.state;
    user[event.target.name] = event.target.value;
    this.setState({ user });
  };

  onSubmit = () => {
    const {
      user: { username, password }
    } = this.state;
    let err = {};

    if (!username) {
      err.username = "Enter your username!";
    }

    if (password.length < 8) {
      err.password = "Password must be at least 8 characters!";
    }

    this.setState({ errors: err }, () => {
      if (Object.getOwnPropertyNames(this.state.errors).length === 0) {
        this.setState({ submitted: true });
      }
    });
  };

  render() {
    const {
      submitted,
      errors,
      user: { username, password }
    } = this.state;
    return (
      <React.Fragment>
        {submitted ? (
          <p>Welcome onboard, {username}!</p>
        ) : (
          <React.Fragment>
            <h3>Login!</h3>
            <FormInput
              label="Username"
              name="username"
              type="text"
              value={username}
              onChange={this.handleChange}
              placeholder="Enter username..."
              error={errors.username}
              required
              className="input"
            />

            <FormInput
              label="Password"
              name="password"
              type="password"
              value={password}
              onChange={this.handleChange}
              placeholder="Enter password..."
              error={errors.password}
              className="input"
              required
            />

            <Button
              type="submit"
              label="Submit"
              className="button"
              handleClick={this.onSubmit}
            />
          </React.Fragment>
        )}
      </React.Fragment>
    );
  }
}

See how LoginPage uses the FormInput twice? We’re using it both as the text input for a username and another text input for a password. If we want to make any changes to how the input functions, we can make those changes inside the FormInput component file we created and they will be applied to every instance where the input component is used. That’s the fundamental upside to having reusable components: you don’t have to repeat yourself.

Even the errors are displayed from the FormInput component.

The onSubmit function first validates the user object which we get from the form, ensuring that it fits the structure that there is a value for username. Notice that we can even extend the input’s functionality, like we did to check that the password contains at least eight characters.

If you look at the code, you’ll see a have a Button component in there. That’s not the same as a HTML <button> element, but instead another component that takes the props that define the type of button we want (submit, reset, button), its class name, what to do on click, and the label. There are lots of other button attributes we could integrate to enforce whatever standard is needed.

const Button = (props) => (
  <button
    type={props.type}
    className={props.className}
    onClick={props.handleClick}
  >
    {props.label}
  </button>
)

Here’s our final login form when all of our components are put together.

See the Pen
Reusable Button Component
by Kingsley Silas Chijioke (@kinsomicrote)
on CodePen.


Wanna give this a try yourself? Try working on a reusable <select> element. If that’s too difficult, you can start with a <textarea> element, then perhaps a checkbox before hopping over to <select>. The key idea is to make it generic. I’ll like to see what you came up with, so link up your work in the comment section!

The post Demonstrating Reusable React Components in a Form appeared first on CSS-Tricks.

Advice for Technical Writing

In advance of a recent podcast with the incredible technical writer and Smashing Magazine editor-in-chief Rachel Andrew, I gathered up a bunch of thoughts and references on the subject of technical writing. So many smart people have said a lot of smart things over the years that I thought I'd round up some of my favorite advice and sprinkle in my own experiences, as someone who has also done his fair share of technical writing and editing.

There is a much larger world of technical writing out there. My experience and interest is largely about web technology and blogging, so I'm coming at it from that angle and many of the people I quote throughout are in that same boat.

Picking something to write about

If you want to write for CSS-Tricks and you ask me what you should write about, I'm probably going to turn that question around on you. It's likely I don't know you well enough to pick the perfect topic for you. More importantly, what I really want you to write about is something that is personal and important to you. Articles rooted in recent excitement about a particular idea or technology always come out better than dictated assignments.

My best advice:

That said, I do maintain a list of ideas specifically for this site. Any writing can be done on assignment and sometimes that elicits the spark needed for something great and on-target for the audience of a site.

Write at the moment of learning

The moment you learn something is the best time to write. It's fresh in your mind and you can remember what it was like before you understood it. You also understand what it takes to go from not knowing to knowing it. That's the journey you need to take people on.

If you don't have time, at least try to capture the vibe wherever you save your ideas. Don't just write down "dataset." Write down some quick notes like, "I didn't realize DOM elements had a .dataset property for getting and setting data attributes. I wonder if it's better to use that than getAttribute." That way, you'll be able to reload that realization in your brain when you revisit the idea.

What have you learned in just the last few days? I bet there is a blog post there. Manuel Matuzovic does an excellent job of putting this into practice with the "Today I Learned" (TIL) section of his blog.

Comparing technologies is an underused format

Here's some advice Rachel shared that I don't see taken advantage of nearly enough:

Tell me about how this new framework relates to Backbone. Tell me how this CMS relates to WordPress. Tell me how some technology connects to another technology that is safe to assume is more widely understood.

Technology changes a lot, but what technology does doesn't change all that much.

Careful with that intro

Not getting to the point right at the top of technical articles is a dang epidemic. The start of a technical article is not the time to wax poetic or drop some cliché light philosophy like, "Web design sure has changed a lot." You don't have to be boring, but you do need to tell me what this article is going to get into and who it is for.

Brian Rinaldi says:

“Does the title make the article sound interesting?” If the title interests a reader, they’ll typically read the intro and decide, “Is it worth my time reading the whole thing?” A common mistake I see in a lot of technical posts is either too much introduction or, alternatively, far too little.

A single well-written paragraph can set the stage for a technical blog post.

Careful with the title, too

I remember a conversation from years ago with content strategist Erin Kissane where she strongly advised me to choose boring titles for everything. Not just the title of blog posts, but for everything, including the names of sections, tags, and even subheadings within posts.

Here's the thing with boring: it works. Boring isn't the right word either; it's clarity. The world is full of clickbait, and maybe that's effective in some genres, but technical blogging isn't one of them.

A nice clear blog post title: Getting Started with GraphQL, Phoenix, and React by Margaret Williford

A terrible version of the same: Build a web app with modern technologies in 30 minutes!

What's a web app? What technologies? What's modern about them? What's with the weird time limit?

SEO matters and Margaret's article is going to do a lot better in both the short and long term with that clear title.

The outro

Ben Halpern says that the next most important thing after the intro is:

[...] the last paragraph.

People don't read top-to-bottom the moment when they arrive, so there is a good chance it's the second paragraph people read. Personally, I find the beginning a lot more important than the ending, but there is a certain art to the ending as well.

A lot of people just <h2>Conclusion</h2> and write a few words about what was just went over. Honestly, I don't hate that. It falls into this time tested pattern:

  1. Tell 'em what you're gonna tell 'em
  2. Tell 'em
  3. Tell 'em what you told 'em

That helps your message sink in and brings things full circle. Technical blogging isn't terribly different from marketing in that sense. You're trying to get people to understand something and you're using whatever tricks you need to to get the job done. A little repetition is a classic trick.

Make it scannable

Brian Rinaldi says:

[...] the wall of text can be easily be made less intimidating and appear much more visually appealing through the use of visual elements that break it up. The easiest is to simply place section subheadings throughout your post.

I agree: subheadings are probably the easiest and most powerful trick for scannability.

Other methods:

  • Lists: Like what I'm doing right now! I didn't have to use a list. Paragraphs might have worked as well, but a list makes contextual sense here and is probably tricking some of you into reading this. Or at least scanning it and getting some key points in the process.
  • Images: Please make them relevant and contextual. Skip the funny GIF. Screenshots are often great in a technical context because they provide a visual to what might otherwise be a difficult concept to explain. I like Unsplash for thematic imagery, too, but you can do better than a random picture of trees, a woman drinking coffee, or a random rack of servers.
  • Illustrations: The abstract nature of an illustration is your friend. It tricks people into having a quick thought about what you are describing. They generally take a little work to pull off, but the pay-off for you and the reader can be huge.
  • Videos: You can't simply drop a 42-minute video in the middle of a blog post, but if you can make it clear that you are demonstrating something visual and the video is less than a minute, it can be a powerful choice. You've always got <video autoplay muted loop controls> as well to make it GIF-like.
  • Blocks of code: Technical blog posts are often about code. Don't avoid code, embrace it. I love how Dan Abramov sprinkles in code blocks in blog posts not so much to demonstrate syntax and setup, but to make points. I'm going to recommend Embedded Pens as well, because they're fully interactive demoes in addition to serving as code blocks.
  • Tables: Don't forget about tabular data! Presenting information (particularly data or definitions) in a table makes it more understandable than it would have been any other way.
  • Collapsing sections: The <details>/<summary> elements make quick work of collapsible content. If you've got a large section of content that is good to be there but doesn't need to be read by everyone, collapse it! Our reference guide of media queries for devices is a decent example of this in action.

Whatever you pick here, you should pick things that help enhance the points you're making even if in some ways it feels like trickery. It's trickery to help readability, and that's a good thing.

My favorite technique? A little bit of design. Use design principals like spacing, color, and alignment to help the readability of posts. We even go so far as to art direct some posts where design can enhance the central point being made.

The point here isn't to do away with walls of text altogether. Sometimes that's exactly what's needed because you're asking a reader to deeply read a passage that they otherwise wouldn't get what's needed from the content. However, more often than not, a post can strongly benefit from some healthy use of white space.

Use an active voice

I find this one a little tricky to wrap my head around, but Katy Decorah has a great presentation about technical writing that explains this point in great detail. It's kinda like using present tense and stating a point directly rather than passively.

Passive: "After the file is downloaded..."
Active: "After you download the file..."

Passive: "The request is processed by the server."
Active: "The server processes the request."

Here's another clear explanation with examples by Neal Whitman, read by Mignon Fogarty (Grammar Girl):

The key point is made about a minute into the recording.

There are lots of words to avoid

"Just" is a big one. Brad Frost:

“Just” makes me feel like an idiot. “Just” presumes I come from a specific background, studied certain courses in university, am fluent in certain technologies, and have read all the right books, articles, and resources. “Just” is a dangerous word.

There are plenty of others to avoid, which which I've written about before. Read the comments in that last link. Long story short: there are lots of words that do more harm than good in technical writing, not only because they can come across as preachy, but because they usually don't help the sentences where they're used. Try taking "just" out of any sentence. The sentence will still make sense without it.

Simply Clearly Just Of course Everyone knows Easy However So Basically Turns out In order to Very

Be mindful of your tone

Tone is concerned with how you say something in consideration of the context. For example, you wouldn't deliver bad news to someone with a happy tone. The way you express yourself ought to be aligned with the situation.

This is our tone goal on this site:

Friendly. Authoritative. Welcoming. We're all in this together. Flexible (nondogmatic about ideas). Thankful.

MailChimp has a very extensive guide to theirs.

It's worth pointing out that tone and voice are separate concepts. I like to think of voice as never changing (it's your personality which is a part of who you are) while tone changes to suit the context. In other words, you can have a professional voice while communicating in a friendly tone.

I don't think there is one true tone that is perfect for technical writing, but since the high-level goal of any technical writing is to help someone understand something complicated, you can use tone to help. A joke in the middle of a set of intricate steps is confusing. A bunch! of! excitement! about something might feel out of place or disingenuous, but being drab and lifeless is worse. I'd say if you're writing under your own name, let's feel a little bit of your personality as long as it's not at the cost of clarity. If you're writing under a brand, match what they have established whether it has been codified or not.

Careful about length

The general tendency in technical writing is to write too much rather than too little. Wade Christensen:

Whether trained by school assignments with word minimums or just uncritical, most of us write too much. Beyond approaching each draft with a ruthless cutting mentality, there are several ways to write short from draft one.

Word limits can help, even if they're self-imposed.

I heard from a fledgling editor recently who struggled with his writers submitting posts with high word counts, so he suggested they keep it to 1000-1500 as a guideline and that seemed effective. This post is roughly double the high end there, for comparison.

The real solution, if the resources are there, is ruthless editing.

I personally don't find that writing too long is the only issue. I've had just as many occurrences of writers going too short and not digging into the topic deep enough. I don't like focusing on the length; I like focusing on the clarity of the delivery and usefulness of the content itself.

Side note: Breaking up a post into multiple parts (as separate posts in a series) is not a solution for posts that are too long. In fact, it can exacerbate the problem. Do that only if the different parts are thematically different and can stand alone without the other parts.

Don't stop yourself from writing

There is an invisible force, built from fear, that keeps a lot of people away from technical blogging. "Meh, everybody already knows this," you might think. (They don't). "What if I'm wrong and someone calls me out?" (You aren't wrong if what you're doing is working for you.)

There can still be blockers even if you overcome those fears and start putting words to screen. Here's Max Böck:

There is a thing that happens to me while writing. I start with a fresh idea, excited to shape it into words. But as time passes, I lose confidence.

The trick for Max is not to wait too long and to ignore feelings holding you back:

I’ll publish something as soon as I feel confident that all the important points I want to get across are there. I try to ignore the voice screaming “it’s not ready” just for long enough to push it online.

Jeremy Keith goes so far to say we shouldn't even keep drafts:

I think keeping drafts can be counterproductive. The problem is that, once something is a draft rather than a blog post, it’s likely to stay a draft and never become a blog post. And the longer something stays in draft, the less likely it is to ever see the light of day.

The chances that your writing helps someone is pretty high! Matthias Ott:

Even the smallest post can help someone else out there.

Think you're too inexperienced? You're probably not, but even if you were, a perspective from someone with less experience is still useful. Ali Spittel:

If you have a blog post that contains mostly correct information, or at least your interpretation of the topic, then you're experienced enough. There are lots of excellent posts out there from the perspective of newbies, and they're really important!

Fear is a real thing in writing and dealing with it can be debilitating. While it's primarily geared toward creative writing, The War of Art by Stephen Pressfield is a good read to help break through the fear.

There is no one perfect style

We each have our own unique perspectives and writing styles. One writing style might be more approachable to some, and can therefore help and benefit a large (or even small) number of people in ways you might not expect.

...says Sara Soueidan. She continues:

Just write.

Even if only one person learns something from your article, you’ll feel great, and that you’ve contributed — even if just a little bit — to this amazing community that we’re all constantly learning from.

Technical blog posts don't have to be devoid of creativity. You could create a wonderful technical blog post that is an annotated chat room conversation between two developers learning from each other. Or a blog post that is a series of videos that build on each other.

The more introductory, the higher the bar

The web is saturated with beginner-rated and surface-level blog posts. There's a sea of crash courses, 101s, and intros out there. You've gotta knock it out of the park if you want to stand out from the pack and be useful.

There is no particular change in tone necessarily for a beginner-focused post. You don't need to do the equivalent of talking slowly or talking down. You only need to be clear, and clarity is valuable to readers at any skill level, not to mention appreciated by them as well. A very advanced programmer can and will appreciate the clarity in a technical blog post even if it's something they already understand.

But the bar isn't that high in general

You don't need a decade of experience to write a blog post. I'd say it's closer to a day of experience, a desire to write, and having something to say. I think you'd be surprised at how little you need to do to make a blog post stand out and be read. Put in some effort, make clear points, focus on readability, and you will do well.

I hope the advice in this post helps!

Abstraction is helpful, but real-world examples are sometimes better

Christine writes:

It’s one thing to describe a high-level concept, and another to explain or illustrate how that concept applies to the real world. In technical writing, you’ll often be covering complex or hard-to-understand subjects, so it’s even more important to use a well-placed example or two to showcase why your topic matters, or how it relates to the real world.

I find myself pushing back on code that is too abstract more than I push back on code that is too focused on a real-world use case. I'd rather see ["Charles Adok", "Samantha Frederick"] than ["foo", "bar"] or [a, b] any day, but more importantly, what is then done with that data to make it feel like a relatable programming scenario.

But avoid real-world examples that come at the cost of clarity. If abstraction is useful to drive a complex point home without getting lost in the details, so be it.

Blogging opens doors

Everyone I've ever met who had ever actively blogged has said that blogging has had a positive impact on their career. Besides being a public demonstration of your ability to think and present ideas, it helps you understand things better. To teach is to learn.

I'd attribute my own blogging as the biggest contributor to any success I've had. Here's Khoi Vinh, a designer ten times more successful than I'll ever be:

It’s hard to overstate how important my blog has been, but if I were to try to distill it down into one word, it would be: “amplifier.”

You get better at what you do.

There is no way around it: practice makes you better. The expectations around practice are sometimes very clear and culturally ingrained. In order to get better at playing the piano, you take piano lessons and practice. We all know this. But people also say "Oh, I'm a terrible cook," as if cooking as a skill is somehow fundamentally different than playing the piano and doesn't require the same amount of learning and practice.

You get better at writing by writing more. That is, writing with stakes. Writing and then publicly publishing what you write such that people read it.

You can go to school for writing. You could get a writing coach. My thinking is nothing teaches better than writing often. Whatever it is you sink time into is what you end up getting good at. Is 10,000 hours a good framework for you? Go with it. Heck, I find even people that sit around watching a lot of TV end up being pretty damn good at watching TV.

Your voice alone < A story with context < Stories including others < Research and data along with stories including others

An article where you just say some stuff is OK. You're allowed to say stuff.

But you can do better.

An article where you tell a true story about how something worked for you is better. Context! Now we can better understand where you are coming from when you say your stuff. Plus everybody likes a story.

An article where you combine that with quoting other people's writing and stories is even better. Now you're painting a larger picture and helping validate what you're saying. Context and flavor!

An article where you combine all that with research and data is the best. Now you're being personal, acknowledging a world outside yourself, layering in context, and avoiding being too anecdotal. Kapow! Now you're writing!

Are you pitching?

Read what the site says about guest writing. Here's ours.

Not to scare you off, but 90% of submissions are garbage. Maybe 75% is outright spam and another 15% are people that clearly didn't read anything we had to say about guest posting and are way off base. I can usually tell from the quality of writing in the email itself if they'll be a good guest blogger.

I say things like that, and then feel compelled to remind you the bar isn't that high.

Are there any useful tools?

There probably is, but I don't wanna link you off to tools I can't vouch for. All I use is Dropbox Paper for collaborative writing because the sharing model is easy and allows for co-editing and commenting. Plus Grammarly because it catches a ton of mistakes as you go.

📝🎉

The post Advice for Technical Writing appeared first on CSS-Tricks.

That Was SmashingConf Toronto 2019

That Was SmashingConf Toronto 2019

That Was SmashingConf Toronto 2019

Rachel Andrew

We all enjoyed returning to Toronto for the second Smashing conference, and in this post, I am sharing some of the things that took place as well as the resources that were shared over the course of the two conference and two workshop days. Look out for the videos of all the presentations which will be released very soon.

The team worked hard to create a friendly welcoming space for everyone at the conference. We all know how it can be a little overwhelming to walk into a room of a few hundred strangers, knowing that you would love to make friends and have interesting discussions, but finding it hard to get started.

In order to avoid that, we asked everyone to read and follow our Code Of Conduct, try to create a range of spaces and activities where people can meet like-minded people, and also encourage everyone to follow “The Pac-Man Rule” when standing in a group.

Slide showing a graphic of the pacman rule
Pac-man rule for conversations (Large preview)
“It’s a genuine friendliness that the Smashing team possesses, and that serves as the foundation for an inclusive, approachable event. It turns out that little things like launching balloons to kick off the event and advocating for the Pac-Man Rule go a long way towards making everyone feel welcome.”

Dan Rose

The Presentations

The first thing you think about when attending a conference is to wonder who is speaking, and what they will be talking about. At SmashingConf Toronto, we had an amazing lineup of speakers, with people you might know quite well plus some new faces. As many of our speakers presented without slides, we don’t have a huge number of slide decks to share. However, the list below links to some of the resources our speakers shared. We will also have videos available very soon!

Stage with people throwing candy into the audience
Vitaly and Phil throw candy to audience members (Photo credit: Marc Thiele)

Day One

The Day One Collaborative Doc created by attendees is full of takeaways from day one of the conference.

Speaker Name Talk Title
Brad Frost Let’s Build a Design System
Sarah Drasner Let’s Write a Vue App From Scratch
Phil Hawksworth JAMStack: Silly Name. Serious Stuff.
Chris Gannon Make It Move! Create a Web Animation From Scratch
Kristina Podnar Help! I’m Your Ailing Website. The Digital Policy & Standards Rehab Hour
Steven Hoober Authentic Digital Design By The Numbers
Sarah onstage coding
Sarah Drasner writes a Vue app on stage. (Photo credit: Marc Thiele)

Day Two

Check out the Day Two Collaborative Doc for more resources and thoughts from our attendees and speakers.

Our mystery speaker was Seb Lester, and many of you were thrilled to get to hear his talk.

We then enjoyed talks covering a wide range of topics from our day two speakers.

Speaker Name Talk Title
Phil Nash Diving Into Service Workers, Live
Jules Forrest For The Love Of The Grid
Dan Rose Seeing The Pages For The Components
Diana Mounter The Secret Lives of Color Systems
Scott Jehl Move Fast & Don’t Break Things

We found a few blog posts sharing takeaways from these talks. Arshabhi Rai recapped Day 1 and Day 2; and kinopo shared their takeaways in What a lovely SmashingConf.

Workshops

Auditorium style lecture room with people working on laptops
Vitaly shares responsive design knowledge with his workshop group (Photo credit: Marc Thiele)

Our workshops are a big part of each of our Smashing conferences. In Toronto, we had two days of full-day workshops, with some attendees choosing to do a workshop day before and after the conference. Workshops this time round were as follows:

Name Talk Title
Rachel Andrew Next Steps With CSS Layout
Chris Gannon Designing Delightful Animations For The Web
The Deque Team How To Translate Wireframes Into Accessible HTML/CSS
Vitaly Friedman Smart Responsive UX Design Patterns
Scott Jehl Lightning Fast Web Performance
Sarah Drasner Intro To Vue.js
Brad Frost The Design System Process
Vitaly Friedman New Front-end Adventures, 2019 Edition
Cloudinary Hacking Lizard Brain: Improving Visual Experience On The Web

Side Activities

A conference isn’t just about the talks and speakers. We want to make spaces where attendees and speakers can learn from each other and share experiences in a more informal setting. To help with that, we ran various other things over the conference. At lunchtime, we had lunch sessions run by Deque on Day 1, and Netlify on Day 2, attendees could grab a plate of lunch and settle down in a more cozy environment to take part in those sessions.

We had a great lounge area, with the talks live-streamed for folks who wanted to step out of the movie theater for a while.

People on sofas watching a presentation via a live stream
Our lounge area (Photo credit: Marc Thiele)

Morning Run

If you follow me on Twitter, you’ll know that I’m a keen runner, and it’s always nice to have some company on an early morning run. For a few conferences now, we’ve been organizing pre-conference runs — Toronto was no exception. We had 12 runners on Day 1, and 6 hardy souls on Day 2 joining us despite having attended the party. We only got slightly off-track once, and got a nice view of Toronto to take our photos.

Jam Session

On the evening before the conference, we had a Jam Session at Shopify hosted by Tiffany Tse (and her lovely assistant Walnut). There was a speaker panel featuring Steven Hoober, Scott Jehl, Kristina Podnar, Brad Frost, Jules Forrest, Phil Hawksworth and myself, plus lightning talks from Tiffany Tse, Kelly Harrop, April Ellsey, Steve Pereira, and Christine Fowler.

Graffiti And Photo Walks

On the day before and last evening of the conference, walks took place to explore graffiti around Toronto and take photos of the city. A great way to meet people and explore the location for those coming from out of town.

People in a street taking photos of graffiti
On the graffiti walk (Photo credit: Scott Whitehead)

Conference Party

There has to be a party, and we always try to do something fun and perhaps a little unusual for our conference parties. This time, we went bowling — courtesy of sponsorship by SpeedCurve.

Focus On The Local Community

Between sessions on stage, we invited organizers of community groups in the Toronto area on stage to share information about their groups. We hope that local attendess found some new meetups to go to. The groups that we featured were:

Name Details
Women Who Code Toronto Twitter: @WomenWhoCode,
Introduced by Stephanie
DevHub Toronto & Vancouver Twitter: @devhubTO
Events, educational programs, collaboration, and co-working
Introduced by Emma
The DevOps Toronto meetup Twitter: @devopsto
Introduced by Steve
Designers & Coffee Twitter: @Doriganic
Meetups, hands-on design challenges and feedback sessions, to casual networking nights.
Introduced by Dorsa
DevTO Twitter: @DevTO
Coding stories, eats and drinks. Join us on the last Monday of every month!
Introduced by Nael.
Serverless Toronto meetup Introduced by Daniel Zivkovic
Toronto Web Performance Group Twitter: @towebperf
Introduced by Henri Helvetica

Want To Join In The Fun?

We packed a lot into those few days! If you were there, we hope that you enjoyed it as much as we did. It was great to meet so many of you.

Audience members throwing balloons
SmashingConf Toronto opened with balloons (Photo credit: Marc Thiele)

If you would like to be part of the SmashingConf fun next year, we already have tickets on sale for SmashingConf San Francisco and you can leave your email to be the first to know when SmashingConf Toronto 2020 goes on sale. The rest of the 2019 events (New York and Freiburg) are already sold out! There are a few workshop-only tickets available for New York 2019, but be quick!

Smashing Editorial (il)