Programming news, cool libraries, and productivity tips by Dev Awesome.

// Dev Awesome #37

July 24, 2020

Dev Awesome

Welcome to Dev Awesome, the newsletter for awesome developers. This week we have another dose of interesting articles, tools and inspiration to supercharge your afternoon. Enjoy!

Articles & Tutorials

Git Concepts I Wish I Knew Years Ago

Great tutorial on various Git techniques that will help you never make a mess out of version control again.

dev.to

New in Chrome 84: App Shortcuts, Web Animations, Wake Lock, and lots more!

One of the largest Chrome releases in while, version 84 will introduce lots of cool new APIs as well as important security changes.

developers.google.com

Differences Between Static Generated Sites And Server-Side Rendered Apps

Nice overview of the pros and cons of using static site generators like Gatsby and SSR frameworks such as NextJS.

smashingmagazine.com

The State Of Pixel Perfection

An interesting article on pixel perfect design implementations and why we hear less about them these days.

ishadeed.com

A user's guide to CSS variables

Very well-written and thorough lesson on CSS variables and how to use them efficiently.

increment.com

Libraries & Tools

Textures.js - SVG pattern generator for JavaScript

The library is made on top of d3.js and is designed for enhancing maps and charts by adding scalable SVG textures.

github.com/riccardoscalco/textures

Shareon - Lightweight, stylish and ethical share buttons.

JS library that makes it super easy to create share buttons for the popular social networks.

github.com/NickKaramoff/shareon

Super Expressive - Build regular expressions in natural language

Zero-dependency JS library for describing RegEx rules using easy to understand chainable methods.

github.com/francisrstokes/super-expressive

Parallax Effect - Parallax scrolling using motion capture

Interesting project based on Tensorflow and WASM that allows you to scroll around using the camera and face tracking.

github.com/munrocket/parallax-effect

Emoji Picker - Lightweight web component for working with emojis

It's built on modern technologies like Svelte and IndexedDB, so it's super fast and has a minimal runtime footprint.

github.com/nolanlawson/emoji-picker-element

Inspiration & Design

Tabler Icons - Open Source collection of 550 SVG icons

High-quality, easily customizable icons with modern designs and covering a large number of topics

github.com/tabler/tabler-icons

Pricing - Original pricing table designs

The style of these cards, including all the animations, is very unique and looks awesome!

codepen.io

Keyframes Animate - Great tool for working with CSS animations

The app has a nice UI that lets you adjust all the possible properties and the keyframe timeline of animations.

keyframes.app

Exploring Animations for Menu Hover Effects

Awesome tutorial showcasing creative ideas for on-hover menu effects using images.

tympanus.net

CSS Collector's cabinet on CodePen

Really impressive collection of all kinds of items created using only CSS.

codepen.io