Smashing Newsletter #257: Hybrid CSS Positioning, Free Fonts, Push Notifications

With front-end techniques, a detailed anatomy of push notifications, podcasts around security and hacking and free fonts for personal and commercial use. Issue #257 Tue, June 23, 2020 View in the browser 💨

Smashing Newsletter

Dear Friend,

We’ve just updated our workshops page with a whole collection of amazing new online workshops. There really is something for everyone in our upcoming sessions. You can also bundle workshops and make a saving. Take a look at the workshops, and let us know if you would like to attend another one.

f407ecc3-565b-4872-95ef-0f61bb50d50b.png
We bring workshops to you, with or without a coconut juice: online workshops on design systems, JavaScript and security.

Along with the online workshops, we have also enjoyed spending time with so many of you in our Smashing Meets events. In our recent Monthly Roundup, we link to the video from our last two events, including the latest event held on June 9th. Watch talks from Henri Helvetica, Christian Nwamba, Yiying Lu, and me! We hope to have some other online events to announce soon, but we hope you enjoy these video presentations in the meanwhile.

On a personal note, I know that our whole team would want to thank our Smashing Community for your support over the last few months. The pandemic has made life unpredictable and scary for many people. At Smashing, we’ve had to very quickly figure out new ways of delivering great content — in a way that supports the business but also our speakers and workshop leaders. We have been encouraged by the enthusiasm from the community, the messages of support, and the willingness to try these new formats.

And, we see positive things coming out of it all. Many people attending the online workshops are excited to see these come online as travel to an in-person workshop was impossible even in more normal times. We’re learning very quickly, along with other conference organizers, how to make good online events. We’re able to be more inclusive — not just for attendees but for speakers, too!

We hope to be able to invite people to speak who would normally struggle to travel and speak at events. We’re able to do these all these wonderful things because of your support, and we truly and sincerely appreciate it.

Stay safe,
Rachel Andrew (@rachelandrew)


Table of Contents

1. The Anatomy Of A Push Notification
2. Hybrid Positioning With CSS Variables And max()
3. Stories From The Dark Side Of The Web
4. Free Fonts With Personality
5. Useful Resources For Designing With Email
6. Editing Keyframe Animations Live
7. The Design Inspiration Search Engine
8. Upcoming In Smashing Membership
9. Our Next Smashing Workshops
10. New On Smashing Job Board
11. Our Most Popular Articles

1. The Anatomy Of A Push Notification

Push notifications were first introduced on iOS back in 2009, web push followed five years later. Today, they are supported across a lot of platforms and browsers — from iOS and Android to Amazon Echo, Windows, Chrome, Safari, Firefox, Edge, and more. Each one of these platforms is a bit different, though, making it complicated for designers to wrap their heads around what exactly goes into a push notification.

Design and Anatomy of a Push Notification 2020

A useful reminder comes from Lee Munroe. He summarized how many lines of text you need on which platform, requirements for images, if there are character restrictions, and other details that can be hard to remember. The overview also comes in handy to assess what your notification will look like on operating systems you don’t have access to. One for the bookmarks. (cm)


2. Hybrid Positioning With CSS Variables And max()

Some ideas require you to think outside the box and explore new paths to make them happen. Imagine this example: You want to have a page navigation on the side, right under the header when it’s scrolled all the way to the top. It is supposed to scroll with the page when the header is out of view and stay at the top for the rest of the scrolling. That’s exactly what Lea Verou wanted to achieve in a recent project.

Hybrid positioning with CSS variables and max()

You might say, that’s a case of position: sticky, but there’s a more finely-tuned approach to getting the job done, as Lea shows. Without any JavaScript. Her solution relies on CSS variables and the new max() function that lets you apply min/max constraints to CSS properties. A fallback helps in browsers that don’t support max() yet. Clever! (cm)


3. Stories From The Dark Side Of The Web

Hackers, data breaches, shadow government activities, cybercrime, hacktivism — a lot is going on on the dark side of the web. But who are the people behind these activities? And what’s their “mission”? Jack Rhysider dedicated a podcast to the stories that happen on the hidden parts of the network: Darknet Diaries.

Darknet Diaries

No matter if it’s the story of a gambler who finds a bug in a video poker machine that lets him win excessive amounts of money, the story of a penetration tester breaking into buildings, or a nation state hacking into a company within another nation, the Darknet Diaries is full of gripping insights into a secret world. The podcast adheres to journalistic standards by fact-checking and ethical sourcing of information, and while all of this is great entertainment, it also aims at explaining the culture around cybersecurity to make listeners more responsive, informed citizens of their digital lives. Be sure to tune in. (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.


4. Free Fonts With Personality

Typography is a powerful communication tool, a way to express ideas, and a trigger for creativity. Based on this understanding, the Argentinian-based type foundry Rostype creates fonts that are free to use for anyone, in personal and commercial projects.

Rostype

There are currently 15 fonts available, and each one of them shines with a unique personality. Some are designed with a special focus on readability, others are the perfect display typefaces, made to stand out, some are retro-inspired, others more futuristic and dynamic. There’s even a typeface inspired by the coronavirus lockdown. A treasure chest if you’re looking for a typeface that is a bit more distinctive. (cm)


5. Useful Resources For Designing With Email

Do you design and build emails? A well-equipped digital toolbox helps ease the job. We already covered Can I Email and Good Email Code in previous newsletter issues, and since designing for email is a topic that can cause quite some headaches, here are some more resources to help you master the challenge (a special thanks goes to Mark Robbins for bringing them to our attention).

How to Target Email Clients

One of the useful little helpers comes from Dylan Smith: a cheatsheet for targeting email clients. To remove unused CSS from email templates, there’s Email Comb, and if you want to send a quick test email, sendtest.email helps you do just that. All you need to do is paste your HTML email into the browser and hit ‘send’. Last but not least, Rémi Parmentier maintains a GitHub repository with all those weird email client behaviors you might come across — to help you understand what’s going on and to report each bug to the concerned company. So feel free to contribute to it. Happy emailing! (cm)


6. Editing Keyframe Animations Live

When you’re creating animations, it’s always helpful to see the animation in action as you tweak it. Unfortunately, that also involves a lot of switching back and forth between your text editor and the browser. Mitch Samuels was tired of doing that, so he built a tool to save him time: Keyframes.app.

Keyframes.app

The tool lets you create a CSS keyframe animation with a visual timeline editor. You can add steps to a timeline, use the simple UI to adjust the CSS properties you want your target element to have at each step, and the animated preview will update live. Once you’re happy with the result, you can copy the CSS and use it in your project right away. Keyframe.app is also available as a Chrome extension. A real timesaver. (cm)


From our sponsor

How To Quickly Get The Best Discount When You Buy Online

How To Quickly Get The Best Discount When You Buy Online
PayPal’s money-saving feature can find you discounts on everything from tech gadgets to pizza delivery. It’s literally free money.


7. The Design Inspiration Search Engine

Have you heard of Muzli yet? The search engine mines leading web sources to provide you with the design inspiration you’re looking for.

Muzli Search

Maybe you’re working on a landing page and need some inspiration to develop a creative solution or you’re looking for some color inspiration, just enter a keyword into the search engine for a quick inspiration shot. Fueled by more than 150 sources from Dribbble and Behance to Mashable and Techcrunch, Muzli combines automated curation with human discovery to uncover design, UI, and UX inspiration and news to keep you in-the-know and help you overcome a creative low. Worth trying out. (cm)


8. Upcoming In Smashing Membership

Click! How to Encourage Clicks Without Shady Tricks is finally here, 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

We’re also busy preparing new Smashing TV live sessions at the moment, so be sure to keep an eye on the schedule to not miss out on anything.

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 Brad Frost, Yiying Lu, Natalia Tepluhina, 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

  • Faculty, Visual Communication (UX/UI) at Austin Community College District (Austin, TX)
    “Join us as a full-time professor of user experience design at the Visual Communication Department at Austin Community College. ACC is the first community college in the country to offer a two-year, associates degree for user experience design.”
  • Software Engineer at Microsoft (Dublin)
    “If you’re passionate about having our users have the best Office experience and you like working across both consumers and enterprises for PCs, tablets, and phones then maybe the Office OMEX team has the right job for you.”
  • IT Specialist at U.S. Securities & Exchange Commission (Washington, DC)
    “If selected, you will join a well-respected team within the Human Resources Technology & Information Management Branch that is responsible for recommending and/or providing technology solutions to expand the technical capabilities of HR systems and applications, and developing solutions to meet the increasingly complex HR needs of the SEC.”

11. Our Most Popular Articles


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!”: Encourage Clicks Without Shady Tricks

Thursday, June 18, 2020

New Smashing book on how to boost business KPIs and improve loyalty with better UX. Ready, and shipping now. Brand new book: Click by Paul Boag. Dearest Friend, Nobody loves blinking ads or annoying

Smashing Newsletter #256: Black Illustrations, CSS, Data Science and Licenses

Tuesday, June 9, 2020

With CSS, data visualization, conversion, guide to licensing and Black illustrations. Issue #256 • Tue, June 9, 2020 • View in the browser 💨 Smashing Newsletter Dear Friend, This week, we were hoping

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

Tuesday, May 26, 2020

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

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

You Might Also Like

Conviction in a copycat league

Sunday, January 12, 2025

Issue 228: Holding beliefs in a world of emulation ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

🐺If they can get press, so can you.

Friday, January 10, 2025

Calling all product businesses and designers. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

🐺Are you overwhelmed when it comes to PR?

Friday, January 10, 2025

do this. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

#489: Web Performance

Tuesday, January 7, 2025

Instant navigation, Web Almanac 2024, INP debugging, font-face fallbacks and compression dictionaries. Issue #489 • Jan 7, 2025 • View in the browser Smashing Newsletter Hello Smashing Friends, Web

The Beautiful House That Made Mayer Rus Anxious—At First

Tuesday, January 7, 2025

View in your browser | Update your preferences ADPro Concrete Box Supreme I confess, I was a bit intimidated by the prospect of writing about the work of architect Tadao Ando for the first time in my

New Updates and a Sneak Peek into 2025

Tuesday, January 7, 2025

Both our email builder and website builder are getting significant upgrades to enhance your experience.͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌

🐺Get ready to get press in 2025!

Tuesday, January 7, 2025

Since you asked, we extended the sale! ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Accessibility Weekly #430: FTC Orders AccessiBe to Pay $1M

Monday, January 6, 2025

January 6, 2025 • Issue #430 View this issue online or browse the full issue archive. Featured: FTC orders AI accessibility startup AccessiBe to pay $1M for misleading advertising "The US Federal

Getting ready for 2025

Sunday, January 5, 2025

Issue 227: Key focuses in the new year ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Want to Scale Your Firm in 2025? Start Here

Thursday, January 2, 2025

View in your browser | Update your preferences ADPro Build Your Best Team Yet A new calendar year presents an opportunity to wipe the slate clean, and your approach, whether slapdash or carefully