Smashing Newsletter #274: JavaScript/CSS Edition

With Webpack 5 Boilerplate, BEM, Tailwind and a flexible front-end architecture approach. Issue #274 • Tue, Nov. 10, 2020 • [View in the browser]( 💨 [Smashing Newsletter]( Dear Friend, 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]( --------------------------------------------------------------- Table of Contents 1. [JavaScript The Right Way](#a1) 2. [Tailwind Versus BEM](#a2) 3. [Smashing Online Workshops 2020](#a3) 4. [Webpack 5 Boilerplate](#a4) 5. [Architecting UIs For Change](#a5) 6. [Interactive Origami Simulation](#a6) 7. [Coming Up Next on Smashing](#a7) 8. [Our New On Smashing Job Board](#a8) 9. [Current Most Popular Articles](#9) --------------------------------------------------------------- #1. JavaScript The Right Way Learning a new language can be quite a challenge, especially when there are so many tools and frameworks out there to get the most out of it as there are in the case of JavaScript. To prevent you from getting lost in all the possibilities and help you learn the best practices from the ground up instead, William Oliveira and Allan Esquina put together the guide “[JavaScript The Right Way](. [JavaScript The Right Way]( Aimed at both beginners as well as experienced developers who want to dive deeper into JavaScript best practices, the guide gathers articles, tips, and tricks from top developers, covering everything from the very basics to code style, tools, frameworks, game engines, reading resources, screencasts, and much more to make a developer’s life easier. The guide is available in eight languages. A gold mine full of JavaScript wisdom. (cm) --------------------------------------------------------------- #2. Tailwind Versus BEM 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 versus Bem]( 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) --------------------------------------------------------------- #3. Smashing Online Workshops 2020 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. [Smashing Online Events]( 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. We’ve just announced [even more online workshops]( — on [form design]( [front-end in 2021]( [HTML emails]( [SVG animation]( [CSS Layout]( and [many others]( so take a look, and perhaps join us as well. (vf) --------------------------------------------------------------- #4. Webpack 5 Boilerplate It seems like front-end tooling has never been more advanced than these days. Yet making sense of all those nifty tools can be quite time-consuming and challenging. For example, just in case you aren’t a Webpack aficionado, where do you even start when setting up Webpack for your JavaScript bundles? [Webpack 5 Boilerplate]( In the article [How To Use Webpack]( Tania Rascia provides a dive-deep into the recently released Webpack 5, explaining how to use it to bundle JavaScript, images, fonts, and styles for the web and set up a development server. Tania also kindly provides [Webpack 5 Boilerplate]( a production-ready template, with Babel, Sass, PostCSS, production optimization, and a development server. So from here, you can easily set up React, Vue, Typescript, or anything else you might want. It’s also worth looking into Tania’s fantastic [articles]( and [guides]( for everything from Docker to Bash. And just if it’s not enough to keep you busy, in his blog, Dmitri Pavlutin has been publishing [detailed tutorials]( on all things JavaScript as well. Happy reading! (vf) #5. Architecting UIs For Change 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. [Architecting UIs For Change]( 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) --------------------------------------------------------------- From our sponsor Build In-Demand Skills In Northwestern’s Online MS In Information Design And Strategy [Northwestern: Online Master’s in Information Design and Strategy]( Earn your master’s degree [online](. --------------------------------------------------------------- #6. Interactive Origami Simulation 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. [Interactive Origami Simulation]( 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) --------------------------------------------------------------- #7. Coming Up Next on Smashing 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. [SmashingConf Workshops]( Meet [Smashing Online Workshops]( on front-end and UX with Cassie Evans, Christian Nwamba, Harry Roberts, and many others. 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 vitaly@smashingconf.com and briefly describe what problems you’re facing and would like to solve. Get in touch — it’s that easy! (vf) --------------------------------------------------------------- #8. New On Smashing Job Board - [Lead UX Designer]( at Polyient Games (Remote) - [Senior Web Developer]( at PowerPivotPro.com (Remote) - [UX Designer]( at Avans Hogeschool (Breda) --------------------------------------------------------------- #9. Our Current Most Popular Articles - [Best Practices For E-Commerce UI Design]( - [Internationalization And Localization For Static Sites]( - [Native CSS Masonry Layout In CSS Grid]( --------------------------------------------------------------- This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf), Rachel Andrew (ra) and Iris Lješnjanin (il). Sent to truly [smashing]( readers via [Mailchimp](. We sincerely appreciate your kind support. You rock. [Follow us on Twitter]( • [Join us on Facebook]( --------------------------------------------------------------- Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](