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

// Dev Awesome #14

July 6, 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

25 Years of PHP - A talk by the Creator of PHP

In this fun talk you'll learn about some of the highlights (and lowlights) of PHP's history, as well as what to expect in the future.

www.youtube.com

Exporting your Bootstrap Studio Design to Github Pages

Learn how to integrate GitHub Pages with Bootstrap Studio, and publish your designs as free static websites automatically when you export.

bootstrapstudio.io

12 Tips for Improving JavaScript Performance

A great list of practical optimization tips that will reduce the time it takes to load and run your JS code.

nodesource.com

The #1 Way to Spice Up Your Designs

Awesome article about motifs in software design and how they can make websites look better and strengthen the brand behind them.

learnui.design

The Odin Project: Free NodeJS Course

Excellent series of tutorials where you'll learn Node and Express, building cool little projects along the way.

www.theodinproject.com

Libraries & Tools

Frappe charts - Modern, intuitive and responsive charts

Easy to use SVG Charts library with zero dependencies. Offers all the expected chart types - line, bar, pie, mixed, and others.

github.com/frappe/charts

Scene.js - Timeline-based animation library

It allows animations to be played in both JS and CSS, supports SVG, multiple timelines, and comes with preset effects you can use out of the box.

github.com/daybrush/scenejs

Lebab - Turn your ES5 code into readable ES6 (reverse Babel)

If you want to add some syntax sugar to old code, this library can replace bind() with arrow functions, prototypes with classes, and more.

github.com/lebab/lebab

Spotlight - Super easy to implement lightbox gallery

Simply include the library in your page, create the gallery markup and your lightbox gallery is done! No additional code, CSS or dependencies.

github.com/nextapps-de/spotlight

Readme md generator - Command line app that creates beautiful README files

This cool CLI is able to read your environment (package.json, git config) and automatically generate a proper README.md for your project.

github.com/kefranabg/readme-md-generator

Inspiration & Design

Train Puzzle - Super fun (and challenging) puzzle game on CodePen

This simple little game will test your dexterity as you guide the train to its destination.

codepen.io

CSS Transform Playground - Online tool to visualize 2D & 3D transforms

Beautiful demo in which you can play around with the various CSS transforms. Great for beginners to CSS animations.

css-transform.moro.es

SVG-edit - Powerful web-based SVG editor

Awesome in-browser app for drawing and editing SVGs. It has lots of advanced features and is completely free.

github.com/SVG-Edit/svgedit

Walking Sprites - Retro style animated characters

Fantastic CodePen demo, consisting of several animated 8-bit characters. The code is also very interesting and has plenty of comments.

codepen.io

One HTML Page Challenge - Cool demos and art that fit in a single file

Coding challenge that will test your creativity. Try and build a web demo without using libraries or any other modern dev tools.

metroxe.github.io/one-html-page-challenge/