Software development blog focused on sharing knowledge, solutions to common problems, and news related to web development, JavaScript, Ruby, Node.js, React.js, CSS, HTML, etc.
git log --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue) %Creset' --abbrev-commit It gives you a graph, commit hash (red), decorations like branch names (yellow), commit subject / message (white), relativ...
The Problem This problem is described: Two strings are considered close if you can attain one from the other using the following operations: Operation 1: Swap any two existing characters. For example, abcde -> aecdb Operation 2: Transform every ...
To get started with Google maps, don't use the official Google documentation and NPM package. It's more difficult to use and the documentation is not great. The 3rd party google map react NPM package has 281,893 weekly downloads, whereas the NPM pack...
This post will walk through deploying a full stack app with a React front end and a Sinatra, ActiveRecord, and Ruby back end on Heroku. PostgreSQL Heroku does not work with SQLite, so your app uses SQLite, you have to switch to using PostgreSQL in pr...
This post will discuss how to create a star rating display in React, and a star rating picker with color-changing hover effects similar to Yelp.com's version. Yelp's star rating display rounds to the half star: Yelp has over 5 million claimed busin...
How do you capture multiple lines of console output in Ruby? Here is one way to do it. This example comes from writing a test for multiple lines of output from a command-line tic-tac-toe game, where the board should print into the console on 5 differ...
Let's break down how to make a cell phone vibrate using JavaScript. A browser-based game is a great (the best?) use case for this. For example, in a Battleship game, the phone could vibrate when the ship is sunk, making it that much better. Another e...
array1 === array2 ? To compare arrays in JavaScript, don't assume you can check whether the contents of two JavaScript arrays are the same with === or == (the strict equality or equality operators). You can't. const array1 = [1, 2, 3]; const array2 =...
Depth and interactivity Well done parallax scrolling effects can add incredible depth and interactivity to a web page. This simple example uses a fixed background image. The site content is stacked on top and scrolling over it, while transparent <div...
The Problem Let's just say you're taking a break from spending 17 hours per day on Codewars on your holy quest to become an 8-Dan supreme master. Say you are trying to create a gameboard for a Battleship project. Say you are trying to do this with:...
Learn The Odin Project (TOP) is a free, open source resource to learn web development. For those who can learn in a self-directed way, it provides a clear roadmap to gaining the necessary skills to launch a career in full stack web development. Cont...