Welcome to my Weekly Digest #20.

This weekly digest contains a lot of interesting and inspiring articles, videos, tweets, podcasts, and designs I consumed during this week.

Interesting articles to read

Deep Dive into Text Wrapping and Word Breaking

Let’s talk about the various ways we can control how text wraps on a web page. CSS gives us a lot of tools to make sure our text flows the way we want it to, but we’ll also cover some tricks using HTML and special characters.

Deep Dive into Text Wrapping and Word Breaking

First Look At The CSS object-view-box Property

A new CSS property that will help in cropping images similar to how we use the viewBox in SVG.

First Look At The CSS object-view-box Property - Ahmad Shadeed

Some great videos I watched this week

Exploring Advanced TypeScript Concepts - Guards, Utility Functions, and More

Ready to gain more confidence with your TypeScript skills? If you're familiar with basic TypeScript functions and features, what can you do to take your Typescript skills to the next level?

by Kelsey Leftwich

Thinking on ways to solve buttons

In today's GUI Challenge, @Adam Argyle styles all the web's different button types with custom properties and :where(), for light/dark adaptive buttons that are easy to make new variants with.

by Google Chrome Developers

The Download: Math Support in Markdown, Playdate Dev Resources, 3D Movie Maker Forever, and More

On this episode of The Download, Christina is back with the latest developer news and coolest projects of the week

by GitHub

Useful GitHub repositories

React-PDF

Display PDFs in your React app as easily as if they were images.

wojtekmaj / react-pdf

Display PDFs in your React app as easily as if they were images.

React-PDF

Display PDFs in your React app as easily as if they were images.

Lost?

This package is used to display existing PDFs. If you wish to create PDFs using React, you may be looking for @react-pdf/renderer.

tl;dr

Install by executing npm install react-pdf or yarn add react-pdf.
Import by adding import { Document } from 'react-pdf'.
Use by adding <Document file="..." />. file can be a URL, base64 content, Uint8Array, and more.
Put <Page /> components inside <Document /> to render pages.

Demo

A minimal demo page can be found in sample directory.

Online demo is also available!

Before you continue

React-PDF is under constant development. This documentation is written for React-PDF 5.x branch. If you want to see documentation for other versions of React-PDF, use dropdown on top of GitHub page to switch to an appropriate tag. Here are quick links to the newest…

View on GitHub

React-Toastify

React notification made easy

fkhadra / react-toastify

React notification made easy 🚀 !

React-Toastify

🎉 React-Toastify allows you to add notifications to your app with ease. No more nonsense!

Installation

$ npm install --save react-toastify
$ yarn add react-toastify

Features

Easy to set up for real, you can make it work in less than 10sec!
Super easy to customize
RTL support
Swipe to close 👌
Can choose swipe direction
Super easy to use an animation of your choice. Works well with animate.css for example
Can display a react component inside the toast!
Has onOpen and onClose hooks. Both can access the props passed to the react component rendered inside the toast
Can remove a toast programmatically
Define behavior per toast
Pause toast when the window loses focus 👁
Fancy progress bar to display the remaining time
Possibility to update a toast
You can control the progress bar a la nprogress 😲
You can limit the number of toast displayed at the same time
…

View on GitHub

dribbble shots

Tweets

Haz

@diegohaz

If you're using Jest and your CI is taking too long to complete, try the new --shard option on Jest 28:

12:55 PM - 16 May 2022

Haz

@diegohaz

Did you know you can use the built-in browser validation API with JavaScript to control how error messages are rendered?

Besides the simplicity, you also get i18n for free. ✨

10:35 AM - 18 May 2022

Haz

@diegohaz

GitHub is adding some fancy blockquotes to markdown previews (documents, issues, PRs, discussions, etc.)

Markdown / Preview

13:30 PM - 20 May 2022

Picked Pens

GSAP Increment Counter + Celebrate

by Ryan Mulligan

Text Alignment

by Zed Dash

Podcasts worth listening

Syntax – Turborepo with Jared Palmer

In this supper club episode of Syntax, Wes and Scott talk with Jared Palmer about Turborepo, how it fits in your tech stack, and what it was like being acquired by Vercel.

Thank you for reading, talk to you next week, and stay safe! 👋

Blog

Weekly Digest 20/2022

Marco Biedermann

Interesting articles to read

Deep Dive into Text Wrapping and Word Breaking

First Look At The CSS object-view-box Property

Some great videos I watched this week

Exploring Advanced TypeScript Concepts - Guards, Utility Functions, and More

Thinking on ways to solve buttons

The Download: Math Support in Markdown, Playdate Dev Resources, 3D Movie Maker Forever, and More

Useful GitHub repositories

React-PDF

wojtekmaj / react-pdf

Display PDFs in your React app as easily as if they were images.

React-PDF

Lost?

tl;dr

Demo

Before you continue

React-Toastify

fkhadra / react-toastify

React notification made easy 🚀 !

React-Toastify

Installation

Features

dribbble shots

Affitto Real Estate App

Food Delivery App - Foodel

Education Web Design

Tweets

Picked Pens

GSAP Increment Counter + Celebrate

Text Alignment

Podcasts worth listening

Syntax – Turborepo with Jared Palmer

Join Our Newsletter. No Spam, Only the good stuff.

Related