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

// Dev Awesome #38

August 14, 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

Creating the exact same app in React and Vue

An amazing comparison between React and Vue in 2020 with modern standards and best practices in mind.

sunilsandhu.com

Node Modules at War: Why CommonJS and ES Modules Can't Get Along

Really interesting article on why we have both CJS and ESM, and why they don't work well together.

redfin.engineering

Getting the Most Out of Variable Fonts on Google Fonts

Extensive article on some of the more advanced techniques for working with variable fonts.

css-tricks.com

It's time to lazy-load offscreen iframes!

Since both Chrome and FIrefox now support native lazy loading, here is a nice tutorial on how to do it with iframes.

web.dev

Optimizing CSS for faster page loads

Some excellent advice on how to reduce the size of your CSS resources and make styles load faster.

pustelto.com

Libraries & Tools

Papercups - An open-source solution for live customer chat

Nice self-hosted option for implementing customer service live chat with easy Slack integration.

github.com/papercups-io/papercups

Docusaurus - Framework for building documentation websites

Open-source project by the Facebook team that helps with setting up maintainable documentation and tutorial websites.

github.com/facebook/docusaurus

Aeon - Lightweight datepicker built with web components

It has no external dependencies, works flawlessly with all JS frameworks, and is super easy to configure and customize.

github.com/lamplightdev/aeon

Lite YouTube Embed - Nice alternative to YouTube's iframe embed

Custom JS element that renders YouTube videos quicker without sacrificing any native embed features.

github.com/paulirish/lite-youtube-embed

Linkinator - Find broken links in your website

Simple site crawler tool for checking if all the links in your website are active and don't lead to any 404s.

github.com/JustinBeckwith/linkinator

Inspiration & Design

Macintosh.js - Electron powered app that runs Mac OS 8 (from 1991)

We've shared a couple of fun Windows 95 and 98 emulators before, now it's time for a fully functional Macintosh Quadra from the early 90s.

github.com/felixrieseberg/macintosh.js

Designing Adaptive Components, Beyond Responsive Breakpoints

Really good article on how to build better responsive layouts for the modern web.

stephaniewalter.design

100 Days of 3D Design - How I taught myself 3D modeling in 100 days

Tiantian Xu's 100 day journey of learning how to do 3D models in Blender.

medium.com

Magnetic Buttons - A collection of magnetic buttons with fun hover animations

A set of original button designs by Mary Lou that can really add some pop to your website.

tympanus.net

Turning Pages with CSS on CodePen

Pretty complex book pages animation created using only CSS and HTML.

codepen.io