Weekly web development resources #72
Tags: weekly, webdev
Published: 2021-05-05 05:47:12



______

##[MailMask](https://www.mailmask.me/)
[![MailMask](https://wweb.dev/weekly/content/72/mailmask.jpg)](https://www.mailmask.me/)
A great email forwarding service, that helps you to stay safe and private on the internet

______

##[Tooltip appear](https://codepen.io/ainalem/full/ZELZKwg)
[![Tooltip appear](https://wweb.dev/weekly/content/72/tooltip-appear.jpg)](https://codepen.io/ainalem/full/ZELZKwg)
Using clip-path to create an appear effect consisting of repeated shapes.

______

##[CSS Tips](https://markodenic.com/css-tips/)
[![CSS Tips](https://wweb.dev/weekly/content/72/css-tricks.jpg)](https://markodenic.com/css-tips/)
CSS tips and tricks you won’t see in most of the tutorials.

______

##[Tailwind dashboard template](https://github.com/cruip/tailwind-dashboard-template)
[![Tailwind dashboard template](https://wweb.dev/weekly/content/72/tailwind-dashboard.jpg)](https://github.com/cruip/tailwind-dashboard-template)
A free admin dashboard template built on top of Tailwind CSS and fully coded in React.

______

##[css-shorthands](https://css-shorthands.netlify.app/)
[![css-shorthands](https://wweb.dev/weekly/content/72/css-shorthands.jpg)](https://css-shorthands.netlify.app/)
A list of css shorthand properties.

______

##[Open-source Emoji](https://emoji.openess.dev/)
[![Open-source Emoji](https://wweb.dev/weekly/content/72/emoji.jpg)](https://emoji.openess.dev/)
A collection of 22 handcrafted, open-source emojis.

______

##[Waterfaller](https://waterfaller.dev/)
[![Waterfaller](https://wweb.dev/weekly/content/72/waterfaller.jpg)](https://waterfaller.dev/)
An alternative to Google PageSpeed Insights to improve your page experience.

______

##[Horizontal Rules](https://www.sarasoueidan.com/blog/horizontal-rules/)
[![Horizontal Rules](https://wweb.dev/weekly/content/72/hr-rule.jpg)](https://www.sarasoueidan.com/blog/horizontal-rules/)
An article on how to get creative with the `<hr>` element.

______

##[useStateMachine](https://github.com/cassiozen/useStateMachine)
[![useStateMachine](https://wweb.dev/weekly/content/72/useStateMachine.jpg)](https://github.com/cassiozen/useStateMachine)
A ½ kb state machine hook for React.

______

##[CSS Flexbox Tutorial](https://www.freecodecamp.org/news/css-flexbox-tutorial-with-cheatsheet/)
[![CSS Flexbox Tutorial](https://wweb.dev/weekly/content/72/flexbox.jpg)](https://www.freecodecamp.org/news/css-flexbox-tutorial-with-cheatsheet/)
An article about CSS Flexbox basics including a flexbox properties cheat-sheet.

______

##[Frontend Practice](https://www.frontendpractice.com/)
[![Frontend Practice](https://wweb.dev/weekly/content/72/frontend-practice.jpg)](https://www.frontendpractice.com/)
A collection of real websites for developers to recreate to improve and test their skills.

______

##[Hosting SQLite databases on Github Pages](https://phiresky.github.io/blog/2021/hosting-sqlite-databases-on-github-pages/)
[![Hosting SQLite databases on Github Pages](https://wweb.dev/weekly/content/72/sqllite.jpg)](https://phiresky.github.io/blog/2021/hosting-sqlite-databases-on-github-pages/)
An article about a tool to be able to use a real SQL database in a statically hosted website.

______

##[react-icon-blur](https://github.com/JP1016/react-icon-blur)
[![react-icon-blur](https://wweb.dev/weekly/content/72/react-icon-blur.jpg)](https://github.com/JP1016/react-icon-blur)
A tiny react library that can be used to create frosted glass effect of icons.

______

##[Spotlight](https://github.com/nextapps-de/spotlight)
[![Spotlight](https://wweb.dev/weekly/content/72/spotlight.jpg)](https://github.com/nextapps-de/spotlight)
An easy to integrate lightbox gallery library, which is lightweight with no dependencies.

______

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