Weekly web development update #47
Tags: weekly, webdev
Published: 2020-10-21 06:25:12

______

##[ScreenBean](https://www.screenbean.brunnerliv.io/)
[![ScreenBean](https://wweb.dev/weekly/screenshots/screenbean.jpg)](https://www.screenbean.brunnerliv.io/)
A tool to add colorful backgrounds to screenshots.

______

##[Coded Mails](https://codedmails.com/)
[![Coded Mails](https://codedmails.com/images/banner-codedemails.png)](https://codedmails.com/)
A list of free responsive HTML email templates.

______

##[CSS Background Patterns](https://www.magicpattern.design/tools/css-backgrounds/)
[![CSS Background Patterns](https://storage.googleapis.com/brandflow-bucket/magipattern/css-backgrounds.jpg)](https://www.magicpattern.design/tools/css-backgrounds/)
A bunch of cool pure CSS background patterns.

______

##[dragmove.js](https://github.com/knadh/dragmove.js)
[![dragmove.js](https://wweb.dev/weekly/screenshots/dragmove.jpg)](https://github.com/knadh/dragmove.js)
A tiny Javascript library to make DOM elements draggable and movable.

______

##[How to Recreate the Ripple Effect of Material Design Buttons](https://css-tricks.com/how-to-recreate-the-ripple-effect-of-material-design-buttons/)
[![How to Recreate the Ripple Effect of Material Design Buttons](https://i2.wp.com/css-tricks.com/wp-content/uploads/2020/10/unsplash-alihartmann-ripples.png?fit=1200%2C600&ssl=1)](https://css-tricks.com/how-to-recreate-the-ripple-effect-of-material-design-buttons/)
Learn to make the ripple effect of Material Design's button component.

______

##[cssbuttons](https://cssbuttons.vercel.app/)
[![cssbuttons](https://raw.githubusercontent.com/r1/cssbuttons/master/img/main.png)](https://cssbuttons.vercel.app/)
A Collection of HTML and CSS Buttons

______

##[handwritten.js](https://github.com/alias-rahil/handwritten.js)
[![handwritten.js](https://raw.githubusercontent.com/alias-rahil/handwritten.js/master/screenshots/lorem-ipsum.jpeg)](https://github.com/alias-rahil/handwritten.js)
A JavaScript library to convert typed text to realistic handwriting.

______

##[Preload late-discovered Hero images faster](https://addyosmani.com/blog/preload-hero-images/)
[![Preload late-discovered Hero images faster](https://addyosmani.com/assets/images/preload-late-images.jpg)](https://addyosmani.com/blog/preload-hero-images/)
A nice article on how preloading your images can boost your image display speed.

______

##[thefuck](https://github.com/nvbn/thefuck)
[![thefuck](https://wweb.dev/weekly/screenshots/thefuck.jpg)](https://github.com/nvbn/thefuck)
A CLI tool that corrects errors in previous console commands.

______

##[Yogurt CSS](https://yogurtcss.netlify.app/)
[![Yogurt CSS](https://yogurtcss.netlify.app/images/meta/yogurt-twitter-profile-bg.png)](https://yogurtcss.netlify.app/)
A CSS framework for user interfaces at an atomic level without writing CSS.

______

##[smooth DOC](https://github.com/gregberge/smooth-doc)
[![smooth DOC](https://master--smooth-doc.netlify.app/static/05c784adb666cbd4f9c30f9d52d0f564/f2866/social.jpg)](https://github.com/gregberge/smooth-doc)
A ready to use documentation theme for Gatsby.

______

##[Butter Slider](https://github.com/armandsalle/butter-slider)
[![Butter Slider](https://wweb.dev/weekly/screenshots/butter-slider.jpg)](https://github.com/armandsalle/butter-slider)
A lightweight vanilla JS drag and hold slider made for easy setup.

______

##[TALKR](https://www.npmjs.com/package/talkr)
[![TALKR](https://wweb.dev/weekly/screenshots/talkr.jpg)](https://www.npmjs.com/package/talkr)
A super small i18n provider for React applications.

______

To see all the weeklies check: [wweb.dev/weekly](https://wweb.dev/weekly)