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

// Dev Awesome #20

October 11, 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

I created the exact same app in React and Vue. Here are the differences.

A 2019 revision of the React vs Vue topic. Includes side-by-side code comparison and great write-up of the differences.

medium.com

Working with GitHub Actions

An introduction into a cool new GitHub feature that allows you to attach useful scripts to your git workflow.

jeffrafter.com/working-with-github-actions/

Client Side Rendering vs Server Side Rendering

Nice, simple explanation of the main differences between client side, server side, and "universal" rendering.

dev.to

Practical Ways to Write Better JavaScript

Ryland Goldstein brings up a number of good points on how to improve the quality of your JavaScript code.

stackoverflow.blog

How to make responsiveness super simple with CSS Variables

In this tutorial you'll learn some great techniques for creating responsive layouts using the native CSS variables.

dev.to

Libraries & Tools

Vant - Mobile UI Components for Vue

Over 60 reusable components including form inputs, different kinds of mobile menus, as well as other widgets like numpads and search bars.

github.com/youzan/vant

GoPablo - Static site generator with a modern development workflow

This Node based framework includes an integrated web server, CSS preprocessors, auto-reload on code changes, and full ES6 compatibility.

www.gopablo.co

Ogl - A Minimal WebGL framework

New framework with a similar API to Three.js. It has fewer features and abstractions by design, making it a good starting point for beginners in 3D modeling.

github.com/oframe/ogl

Jimp - An native image processing library for Node

The library is built entirely with JavaScript and has zero dependencies, so it should work inside any Node terminal.

github.com/oliver-moran/jimp

Bitmelo - Online game editor for making retro 2D pixel art games.

The editor makes it super fun to write code, design the art, add sound effects, and then simply export your game as HTML.

bitmelo.com

Inspiration & Design

Leon Sans - Free geometric sans-serif font

Great-looking typeface that allows you to change the font weight dynamically and create custom animations.

github.com/cmiscm/leonsans

Enhancing The Clickable Area Size

A nice set of tips for improving the UI of buttons, links, and other form elements.

ishadeed.com

Devices by Facebook - Large collection of mockup devices

Includes images and Sketch files for a huge range of popular devices - from laptops to mobile phones and smart watches.

facebook.design

Sunbeams - Beautiful light effect on CodePen

WebGL demo that showcases realistic looking rays of sunlight with a sweet parallax effect and animations.

codepen.io

Mini Tokyo 3D - A real-time map of Tokyo's public transport system.

Pretty amazing 3D demo that lets you see all of Tokyo's trains and follow them with real time data.

github.com/nagix/mini-tokyo-3d