I’ve been looking back over the articles we have published on Smashing Magazine over the past year, and something I am really happy about is the number of new authors we have published. This has been very much by design. One of the reasons why I ask people to pitch with an outline is that it levels the playing field. It means that I can put the idea ahead of who is pitching it.
If an experienced author sends me a one-line idea, their track record means that it will probably be a good piece. If a new author sends a one-line idea, I have no idea if they can turn it into an article or not. I’d be likely to accept the first and reject the second. If both send me an outline, I can see if the new author has thought through their idea enough to structure the piece. I know from experience that in most cases if someone can write an outline they have enough to write an article, and we also have editors to help with that.
Why does it matter that we publish new voices? Why put the idea first? It matters because I feel this is one way that we can increase representation from right across our industry. I want people to come to the magazine and see authors who look like they do, who come from a similar background, have a similar level of experience in the industry. I also want us all to be able to learn from people who have completely different experiences than our own.
Smashing is very much about community, sharing ideas and experience. It isn’t about experienced people telling newcomers how to do things. We all have something to teach and we all have something to learn.
— Rachel (@rachelandrew)
- Tailwind Versus BEM
- Smashing Online Workshops 2020
- Webpack 5 Boilerplate
- Architecting UIs For Change
- Interactive Origami Simulation
- Coming Up Next on Smashing
Tailwind and BEM are two approaches to writing and maintaining CSS. But when to use which? Comparing them is a bit like comparing apples and oranges, as Eric Bailey points out. Based on years of practical experience of using Tailwind and BEM on a variety of projects and scales, he summarized the benefits and drawbacks of each one of them.
Tailwind’s utility CSS approach with pre-written classes makes the implementation very similar across multiple projects and teams and promotes easier cross-project familiarity. However, it does not describe all of CSS’ capabilities, especially newer features. BEM, on the other hand, allows you to describe any user interface component you can think of in a flexible, modular, extensible way, making it a great choice for highly art-directed pieces. The strengths of both approaches lie in different areas, but Eric’s list helps you find the one to master the challenges your project brings along. By the way, have you heard of CUBE CSS yet? The methodology capitalizes on the strength of both approaches and is worth taking a closer look, too. (cm)
It’s already been a few months since we first launched our online workshops on front-end & UX to help all of us boost our skills online. As our workshops span over 2–3 weeks, attendees find time to learn and do homework and make connections that wouldn’t be easy to build otherwise.
It’s wonderful to see small communities emerging within those workshops. Attendees sharing what they’ve learned, coding, designing together — waking up in the middle of the night to join in! All these things are incredibly rewarding to see.
Requirements change, sudden deadlines arrive, and all of a sudden new technical challenges need to be solved immediately. How do you keep your code maintainable over time in such conditions, and how do you ensure that your technical debt doesn’t get out of control? Well, it sounds reasonable to develop coping mechanisms for the inherent complexity we're bound to face and learn how to manage it.
That’s exactly what Henrik Joreteg proposes in his article Architecting UIs for Change. In the piece, Henrik argues how to identify the source of complexity and how to architect the interface to be flexible enough to adapt to upcoming changes. What’s flexible enough? With a single source of truth for everything the app needs to be aware of, without assumptions in code and running “headless”, without any visual components having been built. If you’d like to see a practical implementation in action, Henrik also published a free book on Human Redux that’s worth reading as well. (vf)
For years, Origami has been known to be one of the most fun craft art activities worldwide, but have you ever wondered how it would look like on screen? Well, Amanda Ghassaei had exactly this thought and took on the challenge of creating an app that simulates how any Origami crease pattern folds.
With the help of a number of external libraries such as Three.js and jQuery, Origami Simulator was brought to life. This app calculates the geometry of folded (or partially folded) Origami using a dynamic, GPU-accelerated solver and illustrates the physical properties of the folded material. It also supports an immersive, interactive VR mode using WebVR. Impressive! (il)
With Smashing Membership, you get access to goodies, eBooks, discounts and live sessions with experts — all around front-end & UX, for just one coffee a month. We’re currently busy preparing new Smashing TV sessions, so keep an eye on the Smashing TV schedule to not miss out on anything.
We also have online workshops on front-end & UX — designed to give you the same experience and access to experts as in an in-person workshop, but without needing to leave your desk.
- Designing Websites That Convert (Nov 18–26)
- Smart Interface Design Patterns, 2020 Edition (Dec 1–15)
- Building A Design System With CSS (Dec 3–17)
- Build, Ship and Extend GraphQL APIs from Scratch (Jan 5–19)
- Form Design Masterclass (Jan 19–27)
- New Adventures In Front-End, 2021 Edition (Jan 21–Feb 5)
- Building Modern HTML Emails (Feb 2–10)
- The SVG Animation Masterclass (Feb 11–26)
- The CSS Layout Masterclass (Feb 16–17)
Or, if you’d like to run an online workshop with your team, please get in touch with Vitaly at firstname.lastname@example.org and briefly describe what problems you’re facing and would like to solve. Get in touch — it’s that easy! (vf)
- Front-End Cheatsheets
- Front-End Accessibility
- Open-Source Icons, Fonts and Goodies
- Next.js Boilerplates and Guides
- CSS Global Resets, Gradients and Transitions
- Interface Design Patterns
- Web Performance Optimization
Looking for older issues? Drop us an email and we’ll happily share them with you. Would be quite a hassle searching and clicking through them here anyway.