TL;DR

TLDR #3 - September 2021

Explore top GitHub projects and learning resources from September: a macOS-style CSS framework, a powerful PHP error handler, JavaScript neural networks, smooth page transitions, terminal animations, and a great YouTube coding channel.

MrAnyx

05 Sep 2021 — 4 min read

Photo by UX Store / Unsplash

Build macOS-Inspired Interfaces with Photon

Photon, also known as PhotonKit, is a CSS framework designed to replicate the native look and feel of macOS desktop applications. If you're building desktop apps using Electron, Photon is a perfect styling companion.

With Photon, you can easily style:

Sidebars and navigation bars
Buttons and forms
Tables and lists
Tabbed content and icon sets

This lightweight framework requires no JavaScript and keeps your project visually polished with macOS-like UI elements.

Improve PHP Error Handling with Whoops

Whoops is a user-friendly PHP error handler that provides clear and detailed debugging output. When something goes wrong, Whoops shows a full stack trace, relevant environment variables ($_GET, $_POST, $_SESSION, etc.), and highlights exactly where the issue occurred.

Key features:

Minimal setup (just a few lines of code)
Clean UI with syntax highlighting
Support for JSON, XML, and SOAP responses
Still actively maintained despite being released in 2013

Whoops is ideal for development environments where quick debugging is essential.

Train Neural Networks in JavaScript with Brain.js

Brain.js is a JavaScript library that lets you build and train artificial neural networks directly in your browser or Node.js environment.

Brain.js supports various models including:

Feedforward neural networks
Recurrent neural networks (RNN)
Long Short-Term Memory (LSTM)
Gated Recurrent Units (GRU)

You can fully customize the number of hidden layers, training iterations, error thresholds, and more. This makes Brain.js an accessible tool for developers interested in experimenting with machine learning in JavaScript.

Create Smooth Page Transitions with Barba.js

Barba.js is a small JavaScript library for creating smooth, animated transitions between web pages. Inspired by tools like Swup and Turbolinks, Barba stands out with its preload-on-hover feature.

When users hover over a link, Barba begins preloading the target page, resulting in near-instant transitions. You can define custom enter and leave animations for different page states.

Barba is available via CDN or NPM and integrates well into most front-end stacks.

Add Terminal Animations with Termynal

Termynal is a lightweight JavaScript library that simulates terminal typing animations in your web pages. With just one line of JavaScript, you can bring static code samples or console interactions to life.

let termynal = new Termynal('#termynal')

Termynal supports customization options like typing speed, delay, and command appearance. It’s a great way to make documentation or tutorials more interactive.

You can also embed Termynal inside an <iframe> for isolated display.

Learn JavaScript and More with Coding Garden

Coding Garden is a YouTube channel hosted by CJ, a passionate developer who teaches coding in an accessible and creative way. The channel covers technologies like JavaScript, Vue.js, and React through series like: