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

// Dev Awesome #8

April 24, 2019

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

How to align things In CSS

The ultimate guide to CSS alignment, featuring the classic text-align properties, flexbox, and the CSS grid.

www.smashingmagazine.com

Building a dependency-free site in 2019

In an age where frameworks and preprocessors are the standard, Michelle Barker tries creating a website using only HTML and CSS.

css-irl.info

How to know what to test

Excellent article on the benefits of test-driven development and how to write tests that cover the important use cases.

kentcdodds.com

Native image lazy-loading for the web

Overview of an awesome new lazy-loading API that will soon be available natively in Chrome .

addyosmani.com

Choosing the right Node.js Framework: Next, Nuxt, Nest?

A comprehensive comparison of the three most popular frameworks for server-side rendering.

nodesource.com

Libraries & Tools

Twemoji - Emojis that work everywhere

Simple library by the Twitter team that provides standard Unicode emoji support across all platforms.

github.com/twitter/twemoji

DropCSS - Tiny CSS cleaner that removes unused styles

Exceptionally fast, thorough CSS cleaner that takes your HTML and CSS and returns only the styles that are actually used.

github.com/leeoniya/dropcss

Choices - Vanilla JS plugin for prettier form inputs

Lightweight library for making customizable select boxes and text inputs. Similar to Select2 but without the jQuery dependency.

github.com/jshjohnson/Choices

html2canvas - JS library that takes "screenshots" of a page based on its HTML

This cool script takes the elements and styles in a page and captures a "screenshot" by rendering a copy of the DOM.

github.com/niklasvh/html2canvas

Stepper - Animated counter component

Pretty numeric stepper component, perfect for upvote / downvote controls or other counter elements.

github.com/alikinvv/stepper

Inspiration & Design

Paper Bird by Yusuke Nakaya

Amazing CSS-only animation of a flying bird with beautiful shadows and 3D effects.

codepen.io

Public Sans - Open-source typeface for text or display

Free, versatile font with a broad range of weights, italics, and great multilingual support.

github.com/uswds/public-sans

Burst - Royalty-free stock photo library

Large collection of stock images, available in high and low resolution so you don't have to resize them yourself.

burst.shopify.com

Direction aware hover effect

Elegant, great-looking hover effect for navigation menus, links and other buttons.

codepen.io

Grabient - Linear web gradient generator

Cool little CSS gradient generator with amazing UI design.

www.grabient.com