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

// Dev Awesome #27

February 7, 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

Some Imaginary CSS

Excellent proposals for the future of CSS and useful new features it would be great to have.

cloudfour.com

TypeOfNaN - Improve your JS skills with this challenging quiz

The quiz consists of over 70 questions (with more being regularly added) that will test your knowledge on everything JS.

quiz.typeofnan.dev

Writing dependency-free JavaScript

Great article on how to write front-end code without relying on frameworks and libraries.

magnushoff.com

Optimising SVGs for the Web

A couple of straightforward optimizations you can do to SVG assets to further reduce their file size.

css-irl.info

5 Best Practices to Write Quality Arrow Functions

Some good tips about arrow functions and how to make them less confusing and easier to read.

dmitripavlutin.com

Libraries & Tools

Mirage - API mocking library for writing tests without an actual backend

This library is really powerful and can recreate dynamic scenarios, typically only possible when using a real production server.

miragejs.com

Introducing Yarn 2 - The popular package manager just released a new major update

The new version introduces lots of new features, as well as plenty of breaking changes.

dev.to

Playwright - Node library to automate Chromium, WebKit and Firefox.

Write automated UI test for all the major browsers using a single, reliable API.

github.com/microsoft/playwright

React Nice Dates - Touch-friendly datepicker for React.

This modular library consists of components and utilities which can be combined to create the perfect date picker for your needs.

reactnicedates.hernansartorio.com

Panzoom - Extensible, mobile friendly pan and zoom framework

It works on both DOM elements and SVGs and has a ton of great features and customization options.

github.com/anvaka/panzoom

Inspiration & Design

Polaroid camera with CSS gradients only

Beautiful CSS demo and a detailed tutorial that covers the entire process of making the camera step by step.

fossheim.io

IRA Design - Build your own amazing illustrations

Hand drawn, customizable SVGs that are 100% free for use in personal & commercial projects.

iradesign.io

Toggles by Olivia Ng

CodePen demo with unique toggle switch designs that are much more fun than a regular checkbox.

codepen.io

Httpster - Beautiful websites from all over the world

Regularly updated collection of inspiring web designs, lovingly curated and categorised for easy browsing.

httpster.net

CSSBattle - Code-golfing challenges for your CSS skills

Try and replicate the targets using the least amount of code possible. Great exercise for devs of all skill levels.

cssbattle.dev