April 24, 2019
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!
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
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
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.
Grabient - Linear web gradient generator
Cool little CSS gradient generator with amazing UI design.
www.grabient.com