DEV Community: Jonathon Ringeisen

Create a pulse effect with Three.js, Tween.js, and Vue 2

Jonathon Ringeisen — Fri, 24 Feb 2023 20:50:46 +0000

Introduction

Three.js is a popular JavaScript library used for creating 3D graphics in web applications. It's a powerful tool that allows you to create stunning visual effects and animations, and it's also relatively easy to use. Tween.js is another JavaScript library that's often used in conjunction with Three.js to create smooth animations.

In this tutorial, we'll be using Three.js, Tween.js, and Vue to create a pulse effect. The pulse effect is a simple but effective animation that makes an object appear as if it's pulsating. It is expected that you know how to setup a Vue environment. Once you've done that, then we'll create a basic Three.js scene with a cylinder on the center of the screen. After that, we'll add the pulse effect to the cube using Tween.js. By the end of this tutorial, you'll have a good understanding of how to use Three.js and Tween.js to create smooth and visually appealing animations in your web applications.

If you prefer to jump straight to the good stuff. Here is a working code sample of what I cover in this article.

Creating the scene

The first step is to pull down your dependancies. You'll need to pull down three.js and tween.js which you can do with the following command.

npm i three
npm i @tweenjs/tween.js

Now that we have our dependancies we can create the scene. First I'll provide the code then we will discuss what's going on.

createScene() {
  this.scene = new THREE.Scene();
  this.camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  );

  this.camera.position.z = 5;

  this.renderer = new THREE.WebGLRenderer({ antialias: true });
  this.renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(this.renderer.domElement);

  this.renderer.setAnimationLoop(() => {
    this.renderer.render(this.scene, this.camera);
    window.TWEEN.update();
  });
},

First we need to assign the scene to a property that we can access later. We will need to add cubes to the scene.
Next, we create the camera perspective, without this the object won't display on the screen. We also set the z axis to 5, with the defaults it wasn't showing. You may need to adjust this to get the object to show correctly.
Then we create our WebGLRenderer and set antialias to true as this will get rid of any jagged edges. We also set the size of the renderer to the size of the window width and height. Again, you may need to set this differently based on your needs. Then we append it to the body of the Dom element.
And lastly, we create the animation loop.

Creating our geometry

Now that we got the scene our of the way, let's create our geometry that we want displayed on the screen. Our first shape is going to be a cylinder. Here's the code for that then we will discuss.

cylinderGeometry() {
  const geometry = new THREE.CylinderGeometry(0.5, 0.5, 0.5);
  const material = new THREE.MeshBasicMaterial({
    color: 0xdc2626,
    opacity: 0.5,
    transparent: true,
  });
  const cube = new THREE.Mesh(geometry, material);
  cube.rotation.x = Math.PI / 2;

  return cube;
},

First thing we need to do is create our CylinderGeometry via THREE and assign it to a variable.
Next, we need to create the material. In this case I'm using a basic material but Three.js provides a lot of different options here. I've also set the color, opacity, and transparent property to give it the look I want. You may need to adjust these for your situation.
Then we need create the Mesh, which takes the geometry and material as options.
And finally, we need to rotate the x axis so that the top of the cylinder is facing us on the screen. It will look like a red circle.

Note: You won't see a circle on your screen just yet, we're going to create our ring geometry and then we will get to adding the objects to your scene.

Now let's create the ring geometry.

ringGeometry() {
  const ringGeometry = new THREE.RingGeometry(0.4, 0.9, 32);
  const ringMaterial = new THREE.MeshBasicMaterial({
    color: 0xdc2626,
    side: THREE.DoubleSide,
    opacity: 0.5,
    transparent: true,
  });
  const ring = new THREE.Mesh(ringGeometry, ringMaterial);
  ring.scale.set(0.5, 0.5, 0.5);

  return ring;
},

Creating the ring is almost identical to creating the cylinder. We use a RingGeometry here instead and set the inner radius to 0.4 and the outer radius to 0.9 and the number of thetaSegments to 32 (this is what makes it round).
We also set the scale to 0.5. This is important as we're going to use TWEEN to increase the scale to give it the pulsating effect.

And here is what your ring should look like.

Before we move on to the pulsating effect, we need to add the geometry to the scene so that we can see it on the screen. To do that we will want to add the following to our mounted() method.

this.cylinder = this.cylinderGeometry();
this.ring = this.ringGeometry();

this.scene.add(this.cylinder, this.ring);

If all has gone well you should now see a red circle on your screen. You won't see the ring you created because we set the scale to .5 which is small then the cylinder. That's ok though, you'll see once we add the pulsating effect why that is.

Creating the pulse effect

Adding the pulse effect is really simple. Here's the code and then we will discuss.

createPulsatingEffect() {
  // This changes the scale of the ring and creates the expanding pulse.
  new window.TWEEN.Tween(this.ring.scale)
    .to(new THREE.Vector3(1, 1, 1))
    .easing(window.TWEEN.Easing.Quadratic.Out)
    .repeat(Infinity)
    .start();

  // This changes the opacity which makes it show and fade away.
  new window.TWEEN.Tween(this.ring.material)
    .to({ opacity: 0 })
    .easing(window.TWEEN.Easing.Quadratic.Out)
    .repeat(Infinity)
    .start();
},

First we want to create an animation on the ring that changes the scale. This will make the ring grow bigger, which is why we set the initial scale to .5 and TWEEN will make it grow to a scale of 1. So because the goal is to adjust the scale that is the first argument we will supply to the tween.
The to() method is how big we want the scale to go, so we set it to 1 here.
The easing() method gives it a smooth animation.
The repeat() method allows the animation to repeat. You can provide a number, so for instance if you want it to repeat 5 times you can put 5 or you can put Infinity to repeat forever.
Then we call the start() method.
The first TWEEN targets the scale and the second TWEEN targets the opacity which makes the ring show and fade out.

Note: if you save at this point and try and run the animation it won't work. You have to add the TWEEN.update() method to the animation loop in order for it to work. Like this:

this.renderer.setAnimationLoop(() => {
  this.renderer.render(this.scene, this.camera);
  window.TWEEN.update();
});

Conclusion

In this tutorial, we've learned how to create a pulse effect using Three.js, Tween.js, and Vue. We started by creating a basic Three.js scene with a cylinder and a ring. Then, we added the pulse effect to the ring geometry using Tween.js, which allowed us to smoothly animate the cube's scale and opacity over time. We also explored some of the features and settings of Three.js, including creating a scene, camera, and renderer, as well as adding geometry and materials to create 3D objects. By the end of this tutorial, you should have a good understanding of how to use Three.js and Tween.js to create smooth and visually appealing animations in your web applications.

Push Notifications with Laravel, Ionic-Vue, and Firebase

Jonathon Ringeisen — Mon, 14 Feb 2022 17:06:42 +0000

To get started

This article will cover implementing push notifications on iOS using Laravel, Ionic-Vue, Capacitor, and Firebase.

This article will not cover how to create a Laravel or Ionic-Vue application.

The technologies that will be needed for this tutorial:

Laravel application
Ionic-Vue application
Capacitor
Firebase Account

Let us start with Ionic-Vue

Once you have a working Ionic-Vue application, make sure you run the ionic cap build command and choose the ios option.

As per the documentation, the push notifications capabilities will need to be enabled. To do this, you will need to open Xcode and make sure that you are on the project navigator folder in the left navigation bar. Then click on your application, and you will see a screen with an option for Signing and Capabilities.

Click the + Capability and choose Background Modes and Push Notifications. There will be two options you will need to check for the Background Modes: background fetch and remote notifications.

As per the documentation you will also need to paste these two snippets of code into your AppDelegate file in Xcode.

func application(_ application: UIApplication, didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) {
  NotificationCenter.default.post(name: .capacitorDidRegisterForRemoteNotifications, object: deviceToken)
}

func application(_ application: UIApplication, didFailToRegisterForRemoteNotificationsWithError error: Error) {
  NotificationCenter.default.post(name: .capacitorDidFailToRegisterForRemoteNotifications, object: error)
}

Setting up our APNS key

An APNS key will need to be generated in order to communicate between Firebase and Apple. To do this, visit this link and click the blue plus sign to generate a new key.

Then you'll need to name your key and make sure to select the Apple Push Notifications service (APNs). Once you've done this you will then have the option to download the key, make sure to download it and store it somewhere easy to grab because you will need it to upload to Firebase.

Uploading your APNS key to Firebase

To upload your APNS key to Firebase, you will need to visit your Firebase Console and go to the project settings. In here there is an option for Cloud Messaging. This is where you will upload your APNS key. In the section Apple app configuration you will click the upload button to upload your APNS key. Once you've done this Firebase will be able to communicate with Apple to push notifications.

Frontend code

Most of the setup has been completed so now we can dive into some code. First, let's setup Firebase with Ionic-Vue. To do this we're going to need the capacitor community fcm package which can be found here. Once you've installed the package you'll need to go into Xcode and inside your project click on the AppDelegate file and import firebase like so:

import Firebase

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    // Override point for customization after application launch.
    FirebaseApp.configure()
    return true
}

Now that we set that up, let's jump into the vue portion of the code to add the ability to subscribe to a topic. Inside your Ionic-Vue project you will need to go to your main App.vue file and inside the mounted lifecycle hook paste in the following code:

import { PushNotifications } from '@capacitor/push-notifications';

async mounted () {

    let permStatus = await PushNotifications.checkPermissions();

    if (permStatus.receive === 'prompt') {
      permStatus = await PushNotifications.requestPermissions();
    }

    if (permStatus.receive !== 'granted') {
      throw new Error('User denied permissions!');
    }

    await PushNotifications.register();

    await PushNotifications.getDeliveredNotifications();
}

The above snippet of code checks to see if permission has been granted, if not ask the user for permission. Then we register push notifications and get delivered push notifications.

Now we need a way to register the user to a topic, so you'll need to provide a link or a button on the screen for the user to click which will subscribe them to a topic. This is how I accomplished this:

<template>
  <div id="container">
    <a @click.prevent="subscribe">Click to subscribe to sales topic</a>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import { FCM } from '@capacitor-community/fcm';

export default defineComponent({
  name: 'ExploreContainer',
  props: {
    name: String
  },

  methods: {
    subscribe () {
      FCM.subscribeTo({ topic: "sales" })
          .then(() => alert(`subscribed to topic`))
          .catch((err) => console.log(err));
    }
  }
});
</script>

Before we jump to the Laravel portion, if you plan to use a custom sound effect for your notifications you'll need to upload that file to your project. To do this you'll want to store the file in the ios directory of your project and you will also need to open Xcode and right click on your project and click Add file to "App" and select your custom sound file to upload. Once you've done that you will be able to use that custom sound file for your push notifications.

Important Note: push notifications do not work with the simulator so in order to test this you have to push your application to apple and download the update to your phone

Backend Code (Laravel)

To get Firebase working with Laravel we need to pull in the following package. Once you've added the package you will then need to visit your Firebase console, visit your project settings, and click the service accounts option. Then you'll need to generate a new private key and download the json file which you will then need to upload to your server. I store mine in the storage directory. Next you'll need to add FIREBASE_CREDENTIALS= to your env file using the path to your firebase credentials. You can ignore the FIREBASE_DATABASE_URL=.

Once that is setup we can now add the code to trigger the notifications. For me, I wanted to trigger a notification everytime an invoice was paid on Stripe so that I received a chaching sound on my phone. I did this by using stripe webhooks which you can see below:

if ($event->payload['type'] === 'invoice.payment_succeeded') {
    $data = $event->payload['data']['object'];

    $messaging = app('firebase.messaging');

    $message = CloudMessage::withTarget('topic', 'sales')
        ->withNotification(Notification::create('You got paid!', 'You just received $' . number_format($data['amount_paid'] / 100, 2) . '.'))
        ->withApnsConfig(
            ApnsConfig::new()
                ->withSound('sale_sound.mp3')
                ->withBadge(1)
        );

    $messaging->send($message);
}

The withTarget method accepts two parameters the first being the type of the target, in this case we chose topic and the second parameter being the name of the topic the user is subscribed to, in my case we called it sales.

The withSound method takes a string which is the name of your custom sound file.

And that's it, I hope I'm not forgetting something. If I am I'll make sure to update this article. I know this was a long article, but as it turns out, implementing push notifications is a little more difficult then I had initially thought.

I wasn't able to find a lot of information on how to do this via the web and using the stack that I used so I'm hoping that by writing this article it helps someone else out. Feel free to leave a comment if you know a better way to do this or a way to improve this.

My $646 mistake with PHP

Jonathon Ringeisen — Wed, 19 Jan 2022 16:15:27 +0000

Yesterday I learned a very valuable lesson when iterating a while loop using the Google Places API - Web Service that cost me $646. That's right, I pinged the Places API 17,000 times in one hour 😳 🤦🏻‍♂️. So I decided to write an article today documenting my mistake in the hopes that this prevents someone else from running into this same issue. Let's dive in.

What Happened?
Well...I'm currently building a Web and Mobile Application that uses the Google Places API and I needed to return results using the nearby search. The Google API only returns 20 results with a max of 60 which you can get by using their version of pagination. So let's go through the code and explain what went wrong.

// This is the initial request that we send to get the initial 20 results.
        $response = Http::get('https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=' . $request->lat .'%2C'. $request->lng.'&radius='.$request->radius.'&type=restaurant&key=' . env('GOOGLE_MAP_KEY'))->json();

        // We push those results to our google_places collection
        $this->google_places->push(...$response['results']);

        // Here we check the status of the response, if it's ok we continue.
        if ($response['status'] == 'OK') {
            // If the response has a next page token we loop through until it doesn't, getting the next 20 results.
            while ($response['next_page_token']) {
                // The google places api has a delay from when the next_page_token is created and those results are actually available.
                // So we need to create a delay before we try and grab the next results otherwise we will get an INVALID_REQUEST response.
                sleep(2);

                // Now we get the next 20 results.
                $new_results = Http::get('https://maps.googleapis.com/maps/api/place/nearbysearch/json?pagetoken=' . $response['next_page_token'] . '&key=' . env('GOOGLE_MAP_KEY'))->json();

                // Then we push those results to our collection.
                $this->google_places->push(...$new_results['results']);
            }
        }

Were you able to figure out where I went wrong? A while loop in PHP will run until it gets a false back, the value that I put in the while loop always returns true and therefore sends the while loop into an infinite loop. I was using the $response['next_page_token'] from the initial request which will always return true.

How did I fix this issue?

$response = Http::get('https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=' . $request->lat .'%2C'. $request->lng.'&radius='.$request->radius.'&type=restaurant&key=' . env('GOOGLE_MAP_KEY'))->json();

        $this->google_places->push(...$response['results']);

        // We check to see if the above response includes the key next_page_token, if it does we set the next_page_token property to true
        // This is super important, this is how we're going to ensure our loop doesn't run infinitely. 
        if (array_key_exists('next_page_token', $response)) {
            $this->next_page_token = true;
        }

        if ($response['status'] == 'OK') {
            // For the while loop we check to see if the next_page_token is true, it will end when it returns false.
            while ($this->next_page_token) {
                sleep(2);

                $new_results = Http::get('https://maps.googleapis.com/maps/api/place/nearbysearch/json?pagetoken=' . $response['next_page_token'] . '&key=' . env('GOOGLE_MAP_KEY'))->json();

                $this->google_places->push(...$new_results['results']);

                // This is also super important, here we check to see if next_page_token does not exist or if we're getting an invalid request response.
                // If we do we want to set the next_page_token to false so that the loop ends.
                if (!array_key_exists('next_page_token', $new_results) || $new_results['status'] == 'INVALID_REQUEST') {
                    $this->next_page_token = false;
                }
            }
        }

        // Being that the Google API only returns 60 results that means the loop should only have to run a max of 2 times.
        // So you could create a $count variable and add that like so while($this->next_page_token || $count <= 2) and increment the count each time.
        // This will act as a safety in case you accidentally throw a forever truthy statement in there like I did.

Conclusion
Be cautious when working with APIs that charge and running them inside a loop. As a precaution you can always create a $count variable and stop the loop at a set count in case you make a mistake. This is what I will do for now on just to ensure I don't do this again. Hopefully this has helped you or someone else from making the same mistake. ✌🏻

How to create dynamic input fields with Laravel Livewire.

Jonathon Ringeisen — Sat, 27 Nov 2021 17:47:55 +0000

Hey there 👋, I recently ran into a situation where I needed to build a dynamic input field and thought I would share how I did it.

This how-to is going to cover how to generate an input field on demand, simply by clicking a link you'll be able to add an input field or remove the field. I'm also going to cover how to implement the validation for the dynamic inputs. So...lets get started.

I am going to assume that you already have your Laravel Livewire project setup.

Getting Started

The first thing you're going to want to do is create your Livewire component. You can do this by using the following command:

php artisan livewire:make DyanmicInputs

This will create your DynamicInputs class and your dynamic-inputs blade template.

Building the class

Now that we have our files generated, let's go to the DynamicInputs class and start building this out.

The first method and property we want to add are.

// DynamicInputs.php

public Collection $inputs;

public function addInput()
{
    $this->inputs->push(['email' => '']);
}

// Taking advantage of Laravel Collections, we are simply 
// pushing an array with a key of email and an empty string 
// value to the inputs collection.

// This method will be called when we click the add input link.

The next method we want to add will remove the input from the inputs collection.

// DynamicInputs.php

public function removeInput($key)
{
    $this->inputs->pull($key);
}
// Again, I'm using Laravel Collections here and I am using
// the pull method to remove the array with the specified key.

// This will be called when we click the remove input link.

Next we want to add the mount method so that we can load our initial field on load.

//DynamicInputs.php

public function mount()
{
    $this->fill([
        'inputs' => collect([['email' => '']]),
    ]);
}

// I am using the Livewire fill method to populate the inputs
// collection when the page loads. This is how we display our
// initial input field.

Creating the blade template

Now that we have most of the class done, let's dig into the blade template. I'm going to post the entire template below then we will go over whats going on.

<div class="max-w-xl w-full">
    @foreach($inputs as $key => $input)
    <div class="mt-12">
        <div class="w-full">
            <label for="input_{{$key}}_email" class="sr-only">Email</label>
            <input type="email" id="input_{{$key}}_email" wire:model.defer="inputs.{{$key}}.email" class="shadow-sm border-0 focus:outline-none p-3 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="you@example.com" autocomplete="off">
            @error('inputs.'.$key.'.email') <span class="text-xs text-red-600">{{ $message }}</span> @enderror
        </div>
        @if($key > 0)
        <div wire:click="removeInput({{$key}})" class="flex items-center justify-end text-red-600 text-sm w-full cursor-pointer">
            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg>
            <p>Remove Input</p>
        </div>
        @endif
    </div>
    @endforeach

    <div wire:click="addInput" class="flex items-center justify-center text-blue-600 text-sm py-4 w-full cursor-pointer">
        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd"></path></svg>
        <p class="ml-2">Add New Input</p>
    </div>

    <div class="w-full flex justify-end mt-12">
        <button wire:click="submit" class="px-3 py-1 bg-blue-600 text-white rounded-lg">Submit</button>
    </div>
</div>

// dynamic-inputs.blade.php

@foreach($inputs as $key => $input)

// This is a simple foreach loop that we use to iterate
// through the inputs collection. The $key is important!

// dynamic-inputs.blade.php

<label for="input_{{$key}}_email" class="sr-only">Email</label>
<input type="email" id="input_{{$key}}_email" wire:model.defer="inputs.{{$key}}.email" class="shadow-sm border-0 focus:outline-none p-3 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="you@example.com" autocomplete="off">

// When creating dynamic input fields, make sure your for
// attribute and id attribute are dynamic. I accomplish
// this by using the $key value with those attributes.

// Also, for wire:model you want to use inputs.{{$key}}.email
// as your value here. Inputs being the name of the collection
// $key being the dynamic value, and email being the
// collection key.

// dynamic-inputs.blade.php

@if($key > 0)
    <div wire:click="removeInput({{$key}})" class="flex items-center justify-end text-red-600 text-sm w-full cursor-pointer">
        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg>
        <p>Remove Input</p>
    </div>
@endif

// We want to hide the remove input link on the first field.
// To do this, simply add an if statement that checks to see
// if the $key is > 0. If it is, then show it else don't.

// dynamic-inputs.blade.php

<div wire:click="addInput" class="flex items-center justify-center text-blue-600 text-sm py-4 w-full cursor-pointer">
    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd"></path></svg>
    <p class="ml-2">Add New Input</p>
</div>

// And lastly we add the link to add the new input. Once
// You've add this you can go ahead and click it and you
// will be creating dynamic input fields.

Let's go over how to implement validation for this.

To implement validation into this, you'll need to add the following code snippets.

// DynamicInputs.php

protected $rules = [
    'inputs.*.email' => 'required',
];

protected $messages = [
    'inputs.*.email.required' => 'This email field is required.',
];

public function submit()
{
    $this->validate();
}

// You'll notice we're using . notation to set our validation
// rules.

Now let's add the validation to the front end. Below your input you'll want to add the following code.

// dynamic-inputs.blade.php

@error('inputs.'.$key.'.email') <span class="text-xs text-red-600">{{ $message }}</span> @enderror

// Notice the $key variable, you have to set this dynamically
// to make sure you catch the correct error for the correct
// input.

I created a sandbox version of this here

I hope you enjoyed this article, feel free to comment below if you know of a way to improve this.

Tutorial on Chartist.js and custom tooltips.

Jonathon Ringeisen — Wed, 10 Nov 2021 16:44:47 +0000

The Chartist JavaScript library provides a high-level API to draw charts in various ways. It makes it easy to create the most common types of charts, and with its simple configuration options, you can get beautiful results quickly. In this tutorial, we’ll create a chart from scratch, step by step. You can also take a look at the codesandbox example for this tutorial to see the final result. This tutorial assumes that you have some basic knowledge of HTML and JavaScript but no prior experience with Chartist.js.

Setup

To get Chartist working with your project, you’ll need to import the Chartist.js files.

<link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
<script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>

Make sure to add these between the <head></head> tag. The charts will render as SVG, which means they scale infinitely and can be printed or animated for use in infographics or presentations.

Next, you'll need to add the following snippet of code in the body of your html.

<div class="ct-chart"></div>

And finally, you'll need the javascript.

var data = {
  // A labels array that can contain any sort of values
  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
  // Our series array that contains series objects or in this case series data arrays
  series: [
    [5, 2, 4, 2, 0]
  ]
};

// Create a new line chart object where as first parameter we pass in a selector
// that is resolving to our chart container element. The Second parameter
// is the actual data object.
new Chartist.Line('.ct-chart', data);

This is the bare minimum of what you need to start working with Chartist, pretty simple, right.

I was recently working on a project where I needed a tooltip to display every-time I hovered over a point, and it needed to display the series data. Chartist has a tooltip plugin, but I found this plugin to have a lot of issues and it didn't work well for me, so I decided to implement my own tooltip. Let's discuss customizing our chart and then I will cover how to create and customize a tooltip.

Customizing Chartist

Here is what we're going to build. A stats card that displays a chart of daily user signups.

To build this, I'm using Tailwindcss for styling, you can build your own classes and use those, but I love Tailwind so I'm using it.

The HTML:

<div class="relative w-1/3 mx-auto mt-20 h-40 bg-white rounded-md overflow-hidden overflow-y-scroll shadow">
  <div class="p-6 w-full">Daily Users</div>
  <div class="absolute w-full ct-chart">
    // This part is important! We will cover this when we customize the tooltip.
    <div class="hidden absolute inline-block chartist-tooltip bg-white text-xs shadow text-center px-3 py-1 rounded-md w-28">
       <span class="chartist-tooltip-meta"></span><br />
       <span class="chartist-tooltip-value"></span>
    </div>
  </div>
</div>

Our series or chart data:

var data = {
  series: [
    [
      { meta: "2021-01-01", value: 0 },
      { meta: "2021-01-02", value: 5 },
    ]
  ]
};

// The meta and value will display in the tooltip.
// The value is what's used to create the line on the chart.

Next, are the chart options:

var options = {
  // extends the chart the full width of the div
  fullWidth: true,

  // removes any padding
  chartPadding: 0,

  // options for the x axis
  axisX: {
    // the chart was display outside the card.
    // to fix that we move it up with the offset.
    offset: 64,

    // turns off the grid
    showGrid: false,

    // turns off the labels
    showLabel: false
  },
  // options for the y axis
  axisY: {
    // no offset was needed so we set it to 0
    offset: 0,

    // turns off the grid
    showGrid: false,

    // turns off the labels
    showLabel: false
  }
};

Handeling the tooltip:

new Chartist.Line(".ct-chart", data, options).on("draw", function (data) {
    // We only want the tooltip to apply to the point.
    if (data.type === "point") {
      // What want the tooltip to display on mouseenter so we listen for that event.
      data.element._node.addEventListener("mouseenter", (e) => {

        // I'm getting the tooltip by its class name.
        const tooltip = document.getElementsByClassName("chartist-tooltip");

        // This is how we're setting the position of the tooltip.
        // This will set the top of the tool tip.
        tooltip[0].style.top = data.y - 50 + "px";

        // This will set the left of the tooltip. What this does is if you're on the
        // right side of the card the tooltip display left of the cursor, if you're on
        // the left side of the card the tooltip displays right of the cursor.
        tooltip[0].style.left =
          data.x > 200 ? data.x - 100 + "px" : data.x + "px";

        // Here we're removing the hidden class so that the tooltip will display.
        tooltip[0].classList.remove("hidden");

        // This gets the tooltip meta div.
        const meta = document.getElementsByClassName(
          "chartist-tooltip-meta"
        );

        // This sets the data for the meta information on the tooltip
        meta[0].innerHTML = data.meta;

        // This gets the tooltip value div.
        const value = document.getElementsByClassName(
          "chartist-tooltip-value"
        );

        // This sets the data for the value.
        value[0].innerHTML =
          data.value.y === 1
          ? data.value.y + " view"
          : data.value.y + " views";
    });

    // here we're listening for when the mouse leaves, and when it does
    // we add the class hidden to hide the tooltip.
    data.element._node.addEventListener("mouseleave", (e) => {
        const tooltip = document.getElementsByClassName("chartist-tooltip");
        tooltip[0].classList.add("hidden");
    });
  }
});

Conclusion and Summary

Chartist.js is a javascript library that makes it simple to create beautiful charts using HTML5 canvas, without requiring any knowledge of how JavaScript works under-the-hood. With Chartist, you can get away with only knowing basic HTML and CSS syntax, while your data automatically turns into professional looking charts! While Chartists doesn’t have any pre-made chart types built in, you can always customize one to fit your needs by combining multiple elements in unique ways.

Don't use timestamps with multi-image uploads.

Jonathon Ringeisen — Mon, 08 Nov 2021 04:41:16 +0000

I'm pretty sure all programmers have had to write code to upload an image at some point, and I'm pretty sure most of you have used a timestamp as the image name. Well...I recently ran into a situation where this is a bad idea, let me explain why.

Don't use timestamps

Let's run through a scenario with some code. Let's take an array of names and concatenate a timestamp onto those names and see what happens.

$names = collect([
        '0' => 'Jonathon',
        '1' => 'Justin',
        '2' => 'Sally',
        '3' => 'Sally',
    ]);

    $testArray = [];

    foreach ($names as $name) {
        $testArray[] = $name . '-' . time();
    }

    dd($testArray);

$results = array:3 [▼
  0 => "Jonathon-1636344452"
  1 => "Justin-1636344452"
  2 => "Sally-1636344452"
  3 => "Sally-1636344452"
];

Did you notice all the timestamps are the same. This is because the snippet of code ran so quick that the timestamp never changed, it never had a chance to get to the next time.

I ran into this exact situation recently. I was uploading multiple images at ones, storing them on Amazon S3 and saving the path to the database. When I saved the images I set the file name to time() . '.jpg';, which obviously causes an issue because now I have duplicate files named the same thing and duplicate file paths stored in the database.

Whats the solution?

Well...I'm sure there are a lot of solutions, but the main thing is that on each loop you want to get a unique value each time. So..What I did was used the Laravel Str::random(8) helper function. And this is what we get:

$names = collect([
        '0' => 'Jonathon',
        '1' => 'Justin',
        '2' => 'Sally',
        '3' => 'Sally',
    ]);

    $testArray = [];

    foreach ($names as $name) {
        $testArray[] = $name . '-' . Str::random(8);
    }

    dd($testArray);

$results = array:4 [▼
  0 => "Jonathon-SeTNhsmL"
  1 => "Justin-2sjRUxg8"
  2 => "Sally-Laytdn5m"
  3 => "Sally-6cUDA5Cd"
]

As you can see we're now getting a unique value each time. Keep in mind the longer the string, the better your chances of returning only unique values if you have a large dataset.

If you have another solution, comment below. I'd like to hear them!

Negative effects when compiling on M1 Macbook

Jonathon Ringeisen — Sun, 31 Oct 2021 23:55:56 +0000

Is it me, or is the new M1 chip causing issues in the developer world?

Yesterday I was working on my Macbook Pro with the new M1 chip and after running npm run dev and it compiled successfully, I was getting a ton of errors in the console and my site was broken. So, I did what most of us do and started doing some research online to see if I could get to the bottom of it.

Let me explain what I was working on...

I recently added a feature to my Saas business that allowed users to generate a Profit & Loss Statement based on filtered criteria for a start and end date. Once their statement was generated they could download it to PDF. This is where the issue began.

To accomplish this, I decided I would use the jsPDF and html2canvas packages. Once I installed these two packages and compiled my code base, I came across this error:

ERROR in ./node_modules/canvg/lib/index.es.js 1933:16-23
Module not found: Error: Can't resolve 'process/browser' in '/Users/jringeisen/www/esm/node_modules/canvg/lib'
Did you mean 'browser.js'?
BREAKING CHANGE: The request 'process/browser' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

A quick Google search led me to here. Which suggested that I add the following to my webpack.mix.js file:

mix.options({
  legacyNodePolyfills: false,
})

Once I did that, I recompiled my code and the error was gone, yay! Hold on now, let's not celebrate just yet. I visited my website and in the console was a ton of red error messages and portions of my site were broken. I spent the next 3 hours trying to resolve this issue, with no luck. I decided I would go to bed and try to solve it again in the morning.

The next morning...

I woke up, made some coffee and sat down at my desk and started to figure out a solution to the problem I was having. The first thing I did was recompiled my code. Success! No error. Ok, then I checked my website. No errors in the console and the website wasn't broken. Hmmmm.... this is when a lightbulb went off in my head and I realized everything is working as expected on my Intel based iMac. I'm only having the above issue on my M1 Macbook Pro. Now to be clear the code is exactly the same on both computers, it was pulled down from Github. Both machines are running the exact same environments and have the exact same Node versions. The only difference is the M1 vs the Intel CPU.

Anyone else having weird issues like this? I still haven't been able to narrow down exactly what's causing this issue. The only thing I can think is it has something to do with the M1 chip. Let me know your thoughts in the comments below.

Using jsPDF, html2Canvas, and Vue to generate PDF's.

Jonathon Ringeisen — Fri, 29 Oct 2021 15:50:00 +0000

If you've ever used jsPDF and html2canvas with Vue to convert html to a PDF file then you probably understand the headaches that you run into when trying to achieve the proper size and resolution of the PDF. In this article I'm going to talk about the headaches that I ran into and what I did to solve those issues, so let's get started.

The first thing you will need to do is create a new jsPDF object. You can achieve this by doing the following:

const doc = new jsPDF({
        orientation: 'p',
        unit: 'px',
        format: 'a4',
        hotfixes: ['px_scaling'],
      });

The default for unit is mm, if you decide to use px like I did you will need to include the hotfixes option parameter which takes an array and you will need to include px_scaling like I did in the above code.

The unit that you used to create your jsPDF object is very important. And you'll see why in a moment.

Now, once you've created your jsPDF object you'll need to use html2canvas to create an image which can then be converted to a pdf, like so:

html2canvas(this.$refs.content, {
        width: doc.internal.pageSize.getWidth(),
        height: doc.internal.pageSize.getHeight()
      }).then((canvas) => {
        const img = canvas.toDataURL("image/png");

        doc.addImage(img, "PNG", 140, 10, doc.internal.pageSize.getWidth(), doc.internal.pageSize.getHeight());
        doc.save("p&lstatement.pdf");
      })

Originally when I was testing this out I was getting the height and width of the ref by doing the following:

this.$refs.content.clientWidth
this.$refs.content.clientHeight

The problem with this was that it was returning pixels and I had originally set the jsPDF unit to mm which was distorting the image. So make sure that you're using the same unit for both jsPDF and the actual image.

Here is the html:

And here is the downloaded pdf:

Hopefully this helps someone else from pulling their hair out trying to get the PDF to display correctly. You may need to play around with the dimensions to get it perfect, but this is what worked best for me.

Laravel: Performance Boost!

Jonathon Ringeisen — Tue, 27 Apr 2021 00:54:17 +0000

I recently started using phpdebugbar start_measure(name, label) and stop_measure(name) to see how I can make performance improvements to my platform.

If you didn't know, you can use phpdebugbar to measure how long a certain function takes to execute. To find this out you simply add start_measure(name, label) at the beginning of your function and stop_measure(name) at the end of your function and when you run that snippet of code in your browser you will get a result in the timeline tab, like below:

As you can see from the image above, this snippet of code is taking over 2 seconds to execute and it's using 203MB of memory 😳. This can be improved, a lot!

Using Eloquent

Here is the snippet of code that is causing the issue:

$results = $request->user()->incomes()->get();

$years = $results->unique(function($item){
    return $item['date_income_received']->year;
})->map(function($item){
    return $item['date_income_received']->year;
})->sort()->toArray();

return $years;

The goal of this code is to get a collection of incomes in the database and iterate through them to get the unique years for the incomes. So for instance, if I have 100 incomes in the database and the incomes are for both 2020 and 2021, the results will be an array with ['2020', '2021']. This way I can display the years to the user and they can filter through the incomes based on those years.

What's the issue?

Well, the issue is with $results = $request->user()->incomes()->get();

The SQL statement being generated is as follow:

select * from `incomes` where `incomes`.`user_id` = 1 and `incomes`.`user_id` is not null

You can see in the image above that this query is getting over 70,000 models and a lot of columns that we don't need. So, how do we improve this query. By doing this:

return Income::selectRaw("substr(date_income_received, 1, 4) as year")
        ->whereUserId($request->user()->id)
        ->groupBy('year')
        ->pluck('year');

The SQL statement for this is as follow:

select substr(date_income_received, 1, 4) as year from `incomes` where `user_id` = 1 group by `year`

Note: I originally had ->select([DB::raw('YEAR(date_income_received) as year')]) in the query but this made my tests fail due to YEAR() being incompatible with SQLite. After trial and error, I found substr() to be a good alternative. Although I think I'm planning to revert back to using MySQL for my tests, and in turn, I'll switch it back to YEAR()

This snippet of code takes 338ms and only uses 6MB of memory 🤯. That's a massive improvement and we're getting the same result.

Initial Query:
Over 2 seconds, 203MB of memory.

Improved Query:
338ms and only 6MB of memory.

Conclusion

When writing queries it's always a good idea to have a way to see the performance of your query so that you can ensure that your writing optimal queries. It's easy to do something as simple as $request->user()->incomes()->get(), but as you can see from above this is not an optimized query and we can do better.

Laravel: Refactoring Opportunity

Jonathon Ringeisen — Mon, 26 Apr 2021 00:34:08 +0000

I was adding a feature to the Saas business that I operate and I came across an opportunity to refactor some code and also learned something new which I would like to share.

The Feature

Within the software, a user can create a questionnaire form, generate a link for that form, and send the link to their client to be filled out. Once the questionnaire has been answered they can view the answers but they can't download them, so this feature added the ability to download the questions and answers to pdf.

Before Refactoring

The snippet of code that we're going to cover is the blade view that I am using to generate the pdf file.

$questionnaire->answered_form is a JSON column that we have to iterate through to try and match the questions with the answers.

@extends('guest.layouts.client_layout')

@section('title', 'Questionnaire')

@section('content')
    <div class="mt-12 px-4">
        <div class="w-full rounded-lg shadow-lg px-8 py-8 md:max-w-2xl md:mx-auto">
            @foreach($questionnaire->answered_form as $form)
                @if($form['type'] === 'text')
                <ul style="margin-top: 25px;list-style-type:none;">
                    <li>{{ $form['label'] }}</li>
                    <strong><li>{{ array_key_exists('userData', $form) ? $form['userData'][0] : '' }}</li></strong>
                </ul>
                @endif

                @if($form['type'] === 'number')
                    <ul style="margin-top: 25px;list-style-type:none;">
                        <li>{{ $form['label'] }}</li>
                        <strong><li>{{ array_key_exists('userData', $form) ? $form['userData'][0] : '' }}</li></strong>
                    </ul>
                @endif

                @if($form['type'] === 'textarea')
                    <ul style="margin-top: 25px;list-style-type:none;">
                        <li>{{ $form['label'] }}</li>
                        <strong><li>{{ array_key_exists('userData', $form) ? $form['userData'][0] : '' }}</li></strong>
                    </ul>
                @endif
                @if($form['type'] === 'checkbox-group') 
                    <ul class="mt-3" style="margin-top: 25px;list-style-type:none;">
                        <li>{{ $form['label'] }}</li>
                        @foreach($form['values'] as $value)
                            @if(array_key_exists('value', $value) && $value['value'] === $form['userData'][0])
                                <strong><li>{{ $value['label'] }}</li></strong>
                            @endif
                        @endforeach
                    </ul>
                @endif

                @if($form['type'] === 'select')
                    <ul class="mt-3" style="margin-top: 25px;list-style-type:none;">
                        <li>{{ $form['label'] }}</li>
                        @foreach($form['values'] as $value)
                            @if(array_key_exists('value', $value) && $value['value'] === $form['userData'][0])
                                <strong><li>{{ $value['label'] }}</li></strong>
                            @endif
                        @endforeach
                    </ul>
                @endif

                @if($form['type'] === 'radio-group')
                    <ul class="mt-3" style="margin-top: 25px;list-style-type:none;">
                        <li>{{ $form['label'] }}</li>
                        @foreach($form['values'] as $value)
                            @if(array_key_exists('value', $value) && $value['value'] === $form['userData'][0])
                                <strong><li>{{ $value['label'] }}</li></strong>
                            @endif
                        @endforeach
                    </ul>
                @endif
            @endforeach
        </div>
    </div>
@endsection

If you look at the code you'll notice that the first three if statements are doing the same thing and the last three if statements are doing the same thing so this can easily be refactored to the following:

@extends('guest.layouts.client_layout')

@section('title', 'Questionnaire')

@section('content')
    <div class="mt-12 px-4">
        <div class="w-full rounded-lg shadow-lg px-8 py-8 md:max-w-2xl md:mx-auto">
            @foreach($questionnaire->answered_form as $form)
                @if($form['type'] === 'text' || $form['type'] === 'number' || $form['type'] === 'textarea')
                    <ul style="margin-top: 25px;list-style-type:none;">
                        <li>{{ $form['label'] }}</li>
                        <strong><li>{{ array_key_exists('userData', $form) ? $form['userData'][0] : '' }}</li></strong>
                    </ul>
                @endif

                @if($form['type'] === 'checkbox-group' || $form['type'] === 'select' || $form['type'] === 'radio-group')
                    <ul class="mt-3" style="margin-top: 25px;list-style-type:none;">
                        <li>{{ $form['label'] }}</li>
                        @foreach($form['values'] as $value)
                            @if(array_key_exists('value', $value) && $value['value'] === $form['userData'][0])
                                <strong><li>{{ $value['label'] }}</li></strong>
                            @endif
                        @endforeach
                    </ul>
                @endif
            @endforeach
        </div>
    </div>
@endsection

We were able to reduce our if statements from 6 to only 2 if statements by using the || logical operator for or.

The above code can be refactored even more, after doing some research I found that you can reduce your if statements by using in_array(), like so:

@extends('guest.layouts.client_layout')

@section('title', 'Questionnaire')

@section('content')
    <div class="mt-12 px-4">
        <div class="w-full rounded-lg shadow-lg px-8 py-8 md:max-w-2xl md:mx-auto">
            @foreach($questionnaire->answered_form as $form)
                @if(in_array($form['type'], ['text', 'number', 'textarea']))
                    <ul style="margin-top: 25px;list-style-type:none;">
                        <li>{{ $form['label'] }}</li>
                        <strong><li>{{ array_key_exists('userData', $form) ? $form['userData'][0] : '' }}</li></strong>
                    </ul>
                @endif

                @if(in_array($form['type'], ['checkbox-group', 'select', 'type', 'radio-group']))
                    <ul class="mt-3" style="margin-top: 25px;list-style-type:none;">
                        <li>{{ $form['label'] }}</li>
                        @foreach($form['values'] as $value)
                            @if(array_key_exists('value', $value) && $value['value'] === $form['userData'][0])
                                <strong><li>{{ $value['label'] }}</li></strong>
                            @endif
                        @endforeach
                    </ul>
                @endif
            @endforeach
        </div>
    </div>
@endsection

By using in_array() we're able to reduce the conditional inside the if statement to make it a little bit more readable.

As a developer you spend most of your time reading code, so making it as readable as possible and condensing it down when you can, goes a long way in readability and making life easier on the person reading the code.

Comment below if you see something else that can be refactored.

Building my first package - Vue FormBuilder

Jonathon Ringeisen — Fri, 26 Feb 2021 01:23:34 +0000

Hi, have you ever used a 3rd party package that didn't work the way it was supposed to and it became so frustrating that you decided to build a better one yourself. Well....that's why I built my first package.

The Need

I run a Saas business and in the software, I have a form builder that allows the users to create forms such as contact forms that they can then embed onto their website and capture leads. But the form builder that I am currently using has issues such as when using a checkbox field if you have the checkboxes checked by default so the user can uncheck them, the values won't save properly. This is a problem! Because my user isn't able to use the form the way they would like to. Instead, we had to try a workaround.

Vue FormBuilder

I decided to build a form builder myself that would be built with Vue.js. The form builder I'm currently using is built with jQuery, I know, gross 🤮! Anyway, I'm hoping to be able to solve the issues I had with a new and improved form builder. With my package, there are two components <form-builder /> which renders the form builder and <form-render /> which will render the form that you build with the form builder.

Looking for contributors

I'm currently looking for contributors for the project so if you're interested in making this form builder amazing come check it out on GitHub at https://github.com/jringeisen/vue-formbuilder

Open-Source Contributors Needed!

Jonathon Ringeisen — Fri, 05 Feb 2021 16:14:30 +0000

Hello! I am working on building a FormBuilder similar to https://formbuilder.online/ but without jquery. I am in the early stages of development and would love some help.

If you're interested in contributing to an open-source project, then come join me in building this form builder.

https://github.com/jringeisen/laravel-vue-formbuilder

Things I'm planning to add:

Converted to a package.
More fields added such as radio and checkboxes.
A way to render the form to make it usable.

Example of a use case:
I currently use the jquery form builder on a Saas product that I built which allows my users to create custom contact forms that they can then embed into their website to collect leads. My Saas product is built with Laravel and Vue.js so I'm trying to avoid jQuery which is why I'm building this project.

Any contributions that add value to this open-source project are welcome! So I look forward to hearing from anyone that wants to contribute.