Select Page

Category: JavaScript

Save 15% or More on Car Insurance by Switching to Plain JavaScript

Satire disclaimer: This article is as much satire as it is serious insight if there is even any of that at all. Don’t take it too seriously, but do tell all your friends. Also, the bit about Taco Bell is 100% true. I wouldn’t joke about something like that. My day usually begins like this: I wake up at 6:15 a.m. (kill me) to get the kids ready for school. They’re mad. I’m mad. Everyone is on the brink of an emotional breakdown because it’s 6:15 in the morning. Usually the first thing that I do when I wake up...

Read More

Creating a Star to Heart Animation with SVG and Vanilla JavaScript

In my previous article, I’ve shown how to smoothly transition from one state to another using vanilla JavaScript. Make sure you check that one out first because I’ll be referencing some things I explained there in a lot of detail, like demos given as examples, formulas for various timing functions or how not to reverse the timing function when going back from the final state of a transition to the initial one. The last example showcased making the shape of a mouth to go from sad to glad by changing the d attribute of the path we used to...

Read More

The Output Element

Last night I was rooting around in the cellars of a particularly large codebase and stumbled upon our normalize.css which makes sure that all of our markup renders in a similar way across different browsers. I gave it a quick skim and found styles for a rather peculiar element called that I’d never seen or even heard of before. According to MDN, it “represents the result of a calculation or user action” typically used in forms. And rather embarrassingly for me, it isn’t a new and fancy addition to the spec since Chris used it in a post all the way back in 2011. But regardless! What does output do and how do we use it? Well, let’s say we have an input with a type of range. Then we add an output element and correlate it to the input with its for attribute. See the Pen Input Output #2 by CSS-Tricks (@css-tricks) on CodePen. It… doesn’t really do anything. By default, output doesn’t have any styles and doesn’t render a box or anything in the browser. Also, nothing happens when we change the value of our input. We’ll have to tie everything together with JavaScript. No problem! First we need to find our input in the DOM with JavaScript, like so: const rangeInput = document.querySelector('input'); Now we can append an event listener onto it so that whenever we...

Read More

The Importance Of JavaScript Abstractions When Working With Remote Data

Recently I had the experience of reviewing a project and assessing its scalability and maintainability. There were a few bad practices here and there, a few strange pieces of code with lack of meaningful comments. Nothing uncommon for a relatively big (legacy) codebase, right? However, there is something that I keep finding. A pattern that repeated itself throughout this codebase and a number of other projects I’ve looked through. They could be all summarized by lack of abstraction. Ultimately, this was the cause for maintenance difficulty. In object-oriented programming, abstraction is one of the three central principles (along with encapsulation and inheritance). Abstraction is valuable for two key reasons: Abstraction hides certain details and only show the essential features of the object. It tries to reduce and factor out details so that the developer can focus on a few concepts at a time. This approach improves understandability as well as maintainability of the code. Abstraction helps us to reduce code duplication. Abstraction provides ways of dealing with crosscutting concerns and enables us to avoid tightly coupled code. The lack of abstraction inevitably leads to problems with maintainability. Often I’ve seen colleagues that want to take a step further towards more maintainable code, but they struggle to figure out and implement fundamental abstractions. Therefore, in this article, I’ll share a few useful abstractions I use for the most common thing...

Read More

Create Interactive Charts Using Plotly.js, Part 3: Bar Charts

In our last tutorial, you learned how to create line charts in Plotly.js. Every aspect of line charts, like the data to be plotted and the shape or color of the line connecting the plotted points, can be controlled using a set of attributes. Plotly.js allows you to create bar charts in a similar manner.  In this tutorial, you will learn how to create different kinds of bar charts using Plotly.js. I will also discuss how to control the appearance of these charts, like the bar color and width, using specific attributes. Before going further, I would like to mention that you can also create some basic bar charts using Chart.js. If you don’t plan on using any of the fancy features of Plotly.js, using a lightweight library makes more sense. Creating Your First Bar Chart You can plot a bar chart in Plotly.js by setting the value of the type attribute to bar. The rest of the tasks, like creating a trace object or providing the data to be plotted, are similar to the process of creating line charts. Here is the code you need to create a basic bar chart in Plotly. var barDiv = document.getElementById('bar-chart'); var traceA = { x: ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"], y: [5427, 5243, 5514, 3933, 1326, 687, 1271, 1638], type: 'bar' }; var data = [traceA]; var layout = {...

Read More
000webhost logo