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

// Dev Awesome #25

January 9, 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

The Best JavaScript and CSS Libraries of 2019

We take a look back at 2019 and highlight some of our favorite web development libraries, frameworks, and tools.

tutorialzine.com

Accessibility Tips for Web Developers

This excellent article by Addy Osmani offers lots of great advice on how to improve the accessibility of our projects.

dev.to

JavaScript Promises: 9 Questions

Short and very informative quiz on some of the more peculiar properties of JS promises, common edge cases, and gotchas.

danlevy.net

The State of UX in 2020

A very thorough look at the design trends we can expect this year and the upcoming decade.

trends.uxdesign.cc

Learning Modern JavaScript with Tetris

A great tutorial in which you'll create a Tetris game from scratch, focusing on modern JS features like classes and arrow functions.

medium.com

Libraries & Tools

Metaflow - An open-source data science library by Netflix

User-friendly Python library for managing data science, deep-learning and statistics projects.

github.com/Netflix/metaflow

Flowy - Tiny JS library for creating interactive flowcharts

Cool library that makes it possible to quickly integrate a great-looking flowchart editor in your app.

github.com/alyssaxuu/flowy

Magic - CSS3 Animations with special effects

A nice collection of over 50 CSS animations that are super smooth, customizable, and very easy to use.

github.com/miniMAC/magic

CSS Layout - A cheatsheet for popular UI layouts

Various page layouts, form inputs, and other components that you can quickly copy and use in your projects.

github.com/phuoc-ng/csslayout

ResponsiveViewer - Chrome extension for viewing multiple screen sizes at once

Awesome little browser addon for working on responsive designs. Available for Chrome and Firefox.

chrome.google.com

Inspiration & Design

CSS-only Animated Piano Keyboard

Stunning CodePen demo by Ricardo Oliva Alonso. Make sure to check his other pens as well - they are all great!

codepen.io

WebGLStudio - Open source 3D graphics editor in the browser

Completely free 3D graphics suite with powerful features like a virtual file system, various shaders and materials, link sharing of designs, and more!

github.com/jagenjo/webglstudio.js

Wrieframer - Generate beautiful text mockups

Instead of filling wireframes with Lorem Ipsum gibberish, use this tiny app to generate great-looking SVGs of fake text.

www.wireframer.art

Infinite draggable WebGL slider

Modern image slider with an amazing design. Features some really interesting animations and tiny details.

codepen.io

Z’s Still Not Dead Baby, Z’s Still Not Dead

Great tutorial on how to create more complex web designs using z-index, background blend modes, and the CSS grid.

24ways.org