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

// Dev Awesome #12

June 18, 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

The State of CSS 2019 Results

Over 11k developers from 135 countries have taken part of this years survey, covering everything from frameworks to favorite CSS units.

2019.stateofcss.com

List of JavaScript Questions

GitHub repo full of tricky JS questions, the correct answers, and detailed explanations of how the code works.

github.com/lydiahallie/javascript-questions

Write HTML Like It's 1999

Some beginner tips on how to write more semantic HTML that is easier to maintain.

bradleytaunt.com

Address Bar Install for Progressive Web Apps on the Desktop

PWAs have been able to show install prompts on mobile for a while now. With Chrome 76 the feature is coming to desktop as well.

developers.google.com

Why we prefer CSS Custom Properties to SASS variables

In-depth article on the advantages of using CSS variables over the SASS ones. Includes lots of useful practical code examples.

codyhouse.co

Libraries & Tools

Draggable - Lightweight, modular drag and drop library by Shopify

It offers fast DOM reordering, clean API, and accessible markup. Additional features like item sorting can be added via modules.

shopify.github.io/draggable/

Barba.js - Create fluid transition between your website's pages

Lightweight, easy-to-use library that helps reduce loading times, minimize the number of HTTP requests, and add cool transitions between pages.

github.com/barbajs/barba

Monaco Editor - The code editor engine that powers VSCode

Powerful open-source JS editor with awesome features like syntax highlighting, multiple cursors, keyboard shortcuts, code completion, and much more.

github.com/Microsoft/monaco-editor

Pixelmatch - Accurately compare two images pixel by pixel

Originally created to compare screenshots in tests, this library can precisely analyze images and show you the differences. Works in node and the browser.

github.com/mapbox/pixelmatch

Filepond - Flexible file upload JavaScript library

This cool library can handle all file types and has great UI and animations. Adapters are available if you want to use it with React, Vue, Angular or jQuery.

github.com/pqina/filepond

Inspiration & Design

React World - 8 bit animated adventure made with React

Go on a journey with famous movie and game characters. The GitHub page explains in detail how the whole experiment is made.

github.com/sfatihk/react-world

Version Museum - A visual history of our favorite technology

This virtual museum allows you to go on a trip through time and see how websites and video games have advanced through the years.

www.versionmuseum.com

Beautiful Web Type - The best open-source typefaces

Curated list of free web fonts with an overview of available weights and styles, the full glyph set, recommended pairings and more.

beautifulwebtype.com

Checkbox - Simple, yet beautiful checkbox design

Andreas Storm did a great job with these checkboxes, the animations are very classy and will look superb in most designs.

codepen.io

Pure CSS Cards Against Developers

A set of three cards that will settle the age old question - tabs versus spaces.

codepen.io