Smashing Newsletter #255: SmashingConf Live, Speed Profiler, CSS and SVG

With smart CSS solutions, code tidbits, SVG and illustrations for everyone. Issue #255 Tue, May 26, 2020 View in the browser 💨

Smashing Newsletter

Dear Friend,

We had such fun at Smashing Meets last week, with folk from all round the world joining us at throughout the two days! We’re now looking forward to meeting more of you at the SmashingConf Live in June. In addition to interactive sessions with speakers such as Chris Coyier, Sarah Drasner, Brad Frost, and Miriam Suzanne, you’ll also get to tackle challenges and ask questions in friendly discussion zones.

SmashingConf Live

We’ve learned from Meets that many of you really love to spend time with speakers, and ask questions directly. So there will be plenty of time for that, networking, and sharing insights. Jump to more details about the conference.

You can save $100 off the total price by booking a conference ticket along with one of our wonderful online workshops:

The workshops have been incredibly popular with many becoming sold out. I would, of course, love to see you in my CSS Layout Masterclass — but it is definitely a hard choice to pick between them!

And, that’s not all we’ve been up to! You can now read Click! How To Encourage Clicks Without Shady Tricks by Paul Boag. Get the eBook now, the physical copies will ship in the next few weeks. Of course, for our Smashing Members, the eBook is free. Check your dashboard!

A vibrant book cover with colorful, geometric shapes, pop-ups and push notifications.

A lot is going on here, and plenty happening in our community! I hope you’ll enjoy the links and resources included this week.

Until next time!
Rachel Andrew


Table of Contents

1. Modern CSS Solutions For Old CSS Problems
2. Learn Flexbox With Code Tidbits
3. SVG Path Data Syntax Explored
4. Global Website Speed Profiler
5. Sleek Browser Frames For Your Screenshots
6. Illustrations For Everyone
7. Online Design Archives From Around The World
8. Upcoming In Smashing Membership
9. Our Next Smashing Workshops
10. New On Smashing Job Board
11. Our Most Popular Articles

1. Modern CSS Solutions For Old CSS Problems

We all know that CSS can sometimes be tricky to master. Just think of the classic question of how to center a div. In “Modern CSS Solutions for Old CSS Problems”, Stephanie Eckles explores solutions to those big and small CSS problems she has been solving in the last 13 years of being a front-end developer.

Modern CSS Solutions

Apart from the old centering issue, the series explores challenges like creating elements of equal height, making dropdown menus accessible, styling buttons, and much more. Be sure to check back regularly as Stephanie keeps adding new topics. Brilliant! (cm)


2. Learn Flexbox With Code Tidbits

You’ve always wanted to learn Flexbox but the whole undertaking seemed a bit, well, daunting? It doesn’t have to be. In fact, it might only take 30 code tidbits to get you on the path to mastering some Flexbox magic. Samantha Ming has got your back.

Flexbox30

In her free course Flexbox30, Samantha takes you through 30 short and crisp Flexbox lessons. After learning the core concepts of Flexbox, you will explore the ins and outs of parent and child properties. Each lesson comes with a cheat sheet that you can download which makes the course also a great refresher if you already know your way around Flexbox but struggle with some of the properties. (cm)


From our sponsor

Build in-demand skills in Northwestern’s online MS in Info. Design & Strategy

Work at the Intersection of Data, Design and Technology. Earn your master’s degree online at Northwestern Information Design and Strategy.
Earn your master’s degree online.


3. SVG Path Data Syntax Explored

Do you know what the SVG path data syntax actually means? If not, you’re not alone. Mathieu Dutour has been working with SVGs for quite some time but always struggled to understand the path data structure. That’s why he built a visualizer for it.

SVG Path Visualizer

The SVG Path Visualizer visualizes the SVG path data you enter and lets you discover all its different commands. There are also several examples you can explore to get more familiar with the syntax. An insightful look into the skeleton of an SVG. (cm)


4. Global Website Speed Profiler

Performance benchmarking tools usually measure performance form a single location. But how does your site perform for real-world users who aren’t based in that one location? To get more precise results for their own market, the folks behind the WordPress security plugin Wordfence built Fast or Slow, a tool that measures real-world performance from different locations around the world.

Fast or Slow

Fast or Slow gets its data from a network of 13 servers in 13 cities around the world. Each server was calibrated to have the same performance so that the speed measurements give a true indication of what the site feels like to a real user. The performance test provides you with an overall score of a site’s performance and breaks the results further down by geographic location, while audits on CSS minification, image optimization, caching, and more help reveal specific performance bottlenecks. Fast Or Slow is free to use. (cm)


From our sponsor

Come push the limits of front-end engineering at Grammarly

Learn more about open roles at Grammarly
Are you in San Francisco or Vancouver? Do you have a solid understanding of JavaScript or TypeScript, experience with frameworks like React or Angular, and familiarity with functional programming? You’re probably who the folks at Grammarly are looking for to join Zak’s team! Learn more about open roles.


5. Sleek Browser Frames For Your Screenshots

With screenshots, there are usually two options: You take a screenshot of the entire browser window with browser extensions and maybe even bookmarks visible or, if you want something less distracting, you decide to only take a screenshot of the site without any border at all. If you’re looking for a more sophisticated solution, Browserframe might be for you.

BrowserFrame

Just drag and drop your screenshot into the tool, and it wraps it into a neat browser frame. There are multiple browsers, operating systems, and themes to choose from, and you can adjust the background color, shadow, padding, and some other details before you download the image. Perfect for blog posts, social media, slides, or wherever else you might want to use a screenshot. (cm)


6. Illustrations For Everyone

Illustrations are a great way to add a personal touch to a design. However, not everyone is a born illustrator and not every project has the budget to hire someone who masters the craft. During the lockdown, Pablo Stanley and a few of his friends decided to change that and created a tool that makes art more accessible and gives everyone the ability to use illustrations in their creations. Meet Blush.

Blush

Blush is a collection of 13 mix-and-match illustration libraries created by artists from around the world. Whether it’s characters, cityscapes, plants, food, or a piece of abstract art, you can pick your favorite illustration from one of the packs and customize every little detail until you have the combination you need to tell your story. As Pablo puts it, it’s “like playing legos made of vectors”. The illustrations can be downloaded for free as high-quality PNGs. If you are an illustrator yourself and would like to make your work available to other makers, too, you can apply to get featured in Blush. A fantastic example of sharing and caring. (cm)


From our sponsor

TryMyUI: Your rapid, remote usability testing solution

TryMyUI is the complete remote usability testing package
From freelancers working on passion projects, to agencies and enterprises looking for large-scale testing, TryMyUI offers the right tools at the best price to get the user’s view. Get your first 5 tests free →


7. Online Design Archives From Around The World

We’re living in times where the design community is interconnected. We learn from each other and inspire each other, and social media enables us to do so almost instantly, across country borders and time zones. The way designers worked decades before us was an entirely different one, and yet their works are still a great inspiration today.

Online Design Archives From Around The World

To take us on a journey through the world of design — and, literally, across the globe — the folks at Present & Correct collected links to online design archives from all over the world. From Italy to Bulgaria, Canada to Singapore, Australia to Cuba, 13 design archives are waiting to be explored. The exhibition pieces include posters, packaging, and print design, just like product design and architecture. Most pieces are vintage, but, depending on the collection, you’ll find some contemporary works there, too. Inspiration guaranteed. (cm)


8. Upcoming In Smashing Membership

Two weeks ago, we pre-released Click! How to Encourage Clicks Without Shady Tricks, our new practical guide on how to build trust, increase conversion, and boost business KPIs effectively — without alienating people along the way. The eBook (PDF, ePUB, Kindle) is, and always will be, available to Smashing Members for free.️

Topple busy recording new content for Smashing TV

Dear friends, thank you for your kind support. It allows us to bring you great content, pay all our contributors fairly, and reduce advertising on the site. Join us in Smashingland where everyone is beautiful and you never get merge conflicts. 😉


9. Our Next Smashing Workshops

In our workshops, we explore best practices and interesting techniques in front-end and interface design, always focusing on actual solutions to real-life problems.

We also have online workshops that are designed to give you the same experience and access to experts as in an in-person workshop, but without needing to leave your desk.

Practicing skills matters. Meow!
Meet Smashing Online Workshops on front-end & UX, with Miriam Suzanne, Marcy Sutton, Harry Roberts and many others.

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)


10. New On Smashing Job Board

  • Full-Time Web And Graphic Design Instructor at Madison Area Technical College (Madison, WI)
    “The School of Business & Applied Arts at Madison College in Madison, Wisconsin is now hiring for two full-time instructors who will complement the depths and strengths of the Web and Graphic Design faculty, program and certificates.”
  • Software Engineer — Site Reliability Engineering (SRE) at Microsoft (Dublin)
    “At Microsoft, our mission is to empower every person and every organisation on the planet to achieve more. As a member of our engineering team, you will play an integral part in making that happen, navigating us into the future and impacting the lives of people all around the world.”
  • Senior PHP / WordPress Plugin Developer at WP White Security (Remote)
    “Join our growing distributed team and develop plugins that help thousands of WordPress websites administrators! If you love writing code and are fond of the WordPress and open source communities, we want to hear from you.”

11. Our Most Popular Articles

  • Can Data Visualization Improve The Mobile Web Experience?
    Suzanne Scacca proposes some ways to turn essential content into graphics to conserve space, create a more engaging UI and preserve the overall integrity of your content on mobile.
  • Accessible Images For When They Matter Most
    In this article, we will review the different types of images, dive into some real-world examples of inaccessible public service announcements (PSAs), and discuss which elements matter most when critical messages need to reach everyone.
  • Styling Components In React
    React provides a great component abstraction for organizing your interfaces into well-functioning code, but what about the look and feel of the app? There are various ways of styling React components from using stylesheets to using external styling libraries.

This newsletter issue was written and researched by Cosima Mielke, Iris Lješnjanin, Rachel Andrew, Vitaly Friedman and Christiane Rosenberger.


Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You
rock.
Follow us on Twitter Join us on Facebook



Older messages

Meet “Click!”: How To Encourage Clicks Without Shady Tricks.

Tuesday, May 19, 2020

Our new book on how to boost business KPIs without alienating customers along the way. Brand new book: Click by Paul Boag. Dearest Friend, We've been cooking something new — and now it's here!

Smashing Newsletter #254: Custom CSS Cascades, Focus Blocks and CORS

Tuesday, May 12, 2020

With our new book, custom CSS cascades, GitHub tips and tricks, CORS and accessibility.Issue #254 • Tue, May 12, 2020 • View in the browser 💨 Smashing Newsletter Dear Friend, There is no shortage of

SmashingConf Goes Live: Our New Interactive Online Conference.

Tuesday, May 5, 2020

With Sarah Drasner, Chris Coyier, Brad Frost, Josh Clark, Dan Mall, Nadieh Bremer — and interactive live sessions with a friendly Q&A. Our very first online conference on front-end and UX. June 9-

Smashing Newsletter #253: React, Accessible Components, Terminal, Video Player

Tuesday, April 28, 2020

With accessible component libraries, React performance, command line and color themes. Issue #253 • Tue, April 28, 2020 • View in the browser 💨 Smashing Newsletter Dear Friend, We've been thinking

Smashing Newsletter #252: BEM, DOM Scripting, SVG masks, Vintage Games and Posters

Tuesday, April 14, 2020

BEM, DOM Scripting, SVG masks, color palettes, video games and vintage posters — plus a bit from the Smashing Magazine world. Issue #252 • Tue, April 14, 2020 • View in the browser 💨 Smashing

You Might Also Like

The Design World’s 19 Most Beloved Travel Destinations

Thursday, March 28, 2024

Plus, designers share the AD projects that still inspire View in your browser | Update your preferences Architectural Digest AD PRO Logo WILD, WHIMSICAL MEADOW GARDENS ARE THE LANDSCAPE TREND TO WATCH

How Balsamiq uses AI

Thursday, March 28, 2024

A peek into our ChatGPT conversations ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Adobe AI, Remote, Stripe Sessions, Node.js Redesign, light-dark()

Thursday, March 28, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 28 2024 Defining experience quality in large language

Are Photorealistic Renderings Worth It?

Wednesday, March 27, 2024

Plus, the go-to garden stores of top designers and landscaping pros View in your browser | Update your preferences Architectural Digest AD PRO Logo Image may contain: Home Decor, Lamp, Desk, Furniture,

CSS Variable Groups, Layout Rhythm, Animate Borders, Parallel Lives, Visualization Techniques

Wednesday, March 27, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 27 2024 Proposal: CSS Variable Groups lea.verou.me CSS

The History of Ikat

Tuesday, March 26, 2024

Plus, Kips Bay Decorator Show House New York announces designer lineup View in your browser | Update your preferences Architectural Digest AD PRO Logo Image may contain: Art, and Painting SAVE YOUR

#449: UX Research

Tuesday, March 26, 2024

UX research impact, research invite emails, research without access to users, and UX research methods cheat sheet. Issue #449 • Mar 26, 2024 • View in the browser Smashing Newsletter Joh-eun jeonyeog-

Progress Indicator, Lissajous Curves, Pixel to Ink, Azulejo, Mac at 40

Tuesday, March 26, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 26 2024 Front-End solution: progress indicator piccalil.

Responsive Font Size, Icon Design, text-emphasis, Inclusive Sans, Accessible Forms

Tuesday, March 26, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 25 2024 A formula for responsive font-size jameshfisher.

👏 Impressive Dashboard Design Files + 🏆 Challenge Updates

Tuesday, March 26, 2024

🌟 Brighten Your Day with UpLabs' Design News! Firstly, let's congratulate Syndell, the winner of our latest 📝 Todoist Dashboard Redesign Challenge! Congratulations!! Secondly, don't forget