DEV Community: Trevor

Fear of Getting Started

Trevor — Fri, 11 Jun 2021 19:56:47 +0000

Just Start

If only you could actually just start. I kept telling myself over and over that I just need to start something and try new things until I find something I like. "Okay cool, what should I start first?" I ask myself. "How about blogging? What about making content on YouTube, or just social media? ..." That all sounds great, but now I'm overwhelmed about what to pick.

I've got it

Instead of doing development stuff, I'm going to try and make some content around gaming! So I got a camera and made some scenes and spent way to much time setting it all up. By the time I got around to setting up a stream I felt like it was too late, or that my friends didn't actually want to watch my content. When I livestreamed and got a few people watching and interacting it was fun and I enjoyed it, I think. Why did I stop? Some of my friends liked the content and said they wanted to see what I did next time. I couldn't get out of my head that they were lying. I didn't feel like I was good enough.

How about something else

I decided to take my discouragement and try my hand at writing. It's something I enjoy doing, but only in small bursts (like right now it's 2am and I have work in a few hours). I liked the idea of blogs and getting my voice out there and sharing my own thoughts around all things development. I also had the idea of doing something that wasn't development focused. I like cooking so I started collecting ideas and sticky notes of a cooking blog. This all came crashing down with the thoughts 'Why would anyone care what I have to say?' (Literally thinking this right now)

Something personal

Things like drawing, djing, cooking, woodworking, and any other craft that you could do for you. Nothing I ever did was or is good enough to please myself. Why do something and try hard at it if you are just going to self-judge the job you did. Take a step back and look! You started! 🎉 If it only worked like that and my brain wasn't in a perpetual loop of "not good enough" and "why did I waste my time doing that".

Why am I writing this?

(I don't know...) I am writing this for me, but maybe it will help someone else that is experiencing the same thing as me. I've looked up why I feel this way all of the time and have to take everything I read with a grain of salt because everyone's different. I believe most of it comes from the way you are raised, but also just look at the world today. It is so much more complex and unforgiving. You mess up at school or work, your peers will let you know that you messed up. You do something awesome, well only you know it was awesome (it probably wasn't and that's why no one said anything). Although maybe that was just a me thing. Maybe none of that happened and it all played inside my head.

Hard work

Working on mental health is hard. One of the hardest things I've worked on in my entire short life. I only recently started understanding that the way I think isn't healthy. It was through many late night sitting/crying sessions that I got to where I am. I foresee many more of those, but they are good. (tears = healing?)

I want to end this public diary post with some steps for myself and maybe everyone else that reads this. Maybe we can build a group of people looking for help. A group of people learning to appreciate the things they do. Maybe building the confidence to post themselves and not be afraid of starting.

Keep going.
Take breaks.
Trust people.
Be happy with anything because something is always better than nothing.

(my thoughts proof reading)
Where should we build this group? I'm open to suggestions.

Is the GRANDstack grand? pt. 1

Trevor — Mon, 06 Jan 2020 06:17:53 +0000

Summary

Welcome to my series of posts where I talk about some pros and cons to using the GRANDstack. As a whole, this series will go deep into some concepts rather than giving a broad overview of all of them.

What is it

"GRANDstack (GraphQL, React, Apollo, Neo4j Database) is a combination of technologies that work together to enable developers to build data intensive full stack applications." - GRANDstack

I think of it as a great first step into the world of Neo4j, Graph databases, and GraphQL using the popular javascript library React. You learn a good amount of GraphQL while also having to learn a lot of Cypher (query language Neo4j uses).

Good thing

The neo4j-graphql-js node package does all the heavy lifting for you. It builds basic mutations for you so you don't really need to learn Cypher when starting out. Let's say you have the Movie schema here:

Type Movie {
    id: ID!
    name: String!
    releaseDate: String
    description: String
    actors: [Actor] @relation(name: "ACTED_IN", direction: "IN")
}

All you would need to do is call the auto generated mutation CreateMovie. You don't have to pass an ID in the mutation because it knows to generate one for you. This is amazing because Neo4j's standard ID system is unusable. I touch on why it's bad below.

Now let's say you want to relate an actor to that movie. If you don't want to use Cypher then you also need to call AddActorMovie and pass both the actorId and movieId. What if I told you there was a way to make all of this happen using only one GraphQL mutation?

Then I believe it's time to learn a bit of Cypher. Specifically the @cypher directive which becomes available when using neo4j-graphql-js. When I started using GRAND I didn't initially know about the @cypher directive as the community is small and everyone is still learning. Once I found out how powerful it is I immediately dove head first into Cypher.

Cypher? That's not in the stack

Eventually you will understand why learning Cypher is important to get the most out of GRAND. Yeah it's another beast to tackle, but don't leave yet because it's not too bad. Sure it took half a year to really start to understand it, but I took that time to understand Neo4j & how Graph Databases work. In the end it gives you the ability to call a mutation to run custom Cypher whilst returning the data back in GraphQL.

CreateNewMovie(
    info: MovieInfo!
  ): Movie
    @cypher(
      statement: `
      MATCH(a:Actor {id: $info.actor.id})
      CREATE(newmovie:Movie {
          id: randomUUID(),
          name: $info.name,
          releaseDate: $info.releaseDate,
          description: $info.description
        })
      CREATE (a)-[:ACTED_IN]->(newmovie)
      return newmovie
      `
    )

So that might look confusing to someone who has never seen Cypher. Match is like SELECT and the Parenthesis is the node we are matching to. {id: $info.actor.id} The node stores info as Properties and to access them you simply use Object notation. Here we are Matching an Actor where id = variable ($ is variable).

Bad thing

You have to learn a ton just to really get started. Making sure you have a solid understanding around Neo4j and Cypher is no easy task. I was tasked with learning it for one of my clients so I was spending 30 hours a week learning all I could before incorporating it into our main repo. I utilized neo4j's starter project to learn as much as I could while building out what would be version 1 of our schema. grand-stack-starter

Now for the unanswered comment, "...standard ID system is unusable." - Myself. The system works like this: Create new node, it gets assigned ID of 1. Create second node, gets ID of 2. Delete node where ID = 1. Cool it's gone, create a third node...gets ID of 1.

It does this due to the way it stores the database. The indexing isn't the best, but hey...they included a handy command to create a nice uuid (randomUUID()) at least? Another reason why you shouldn't use the neo4j <ID> field is due to the fact that the number can shift around when they update Neo4j.

Short wrap up

We went over very quickly that the GRANDstack can be very powerful, especially if you are down to learn cypher and how Neo4j operates. The drive to learn will help you out a lot when learning this stack due to the small community around it. If you are interested at all in using the GRANDstack I recommend you start with just learning how to use Neo4j and Cypher because it will give you a strong starting point. I wish I would have learned more about Neo4j and Cypher before diving into GRAND, but you know, deadlines.

Thank you! 🙏

tldr: When used properly GRAND is pretty sweet, but once you go off track it becomes a pain.

Let me know if I should continue this series or take it another direction.

Service Workers

Trevor — Wed, 08 May 2019 16:33:40 +0000

Summary

I will be going over Service Workers at a very high level in this post. Later on I will discuss how you could implement a service worker into your React application. At the bottom there will be links to all my sources and documentation so you can learn more!

What is a Service Worker?

"A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don't need a web page or user interaction.” – Matt Gaunt
JavaScript code that executes on page load.
Gives developers much more control of the browser.

Service Worker Lifecycle

Why should we use it?

Required for a Progressive Web App
Provide offline website support
Can make your site have a heartbeat by watching for site updates and even auto update!
- This can include things like forcing a user to utilize a new build when pushed out, or just notifying them there is an update.
If no offline support needed it speeds up site revisits by caching the site code.
Significantly lowers your deployment downtime.
Your users are running the site on their local copy and aren't relying on the server, even when clicking links and navigating around your site.

Website screenshot reference, We are serving some high sized images directly from our server.

Download size & load times without a service worker

Download size & load times with a service worker

As you can see there is a huge difference in load times and bandwidth utilization! We only have to download the images once when the service worker is utilized vs every page load when it doesn't exist. Now of course you could throw the images on a seperate image hosting platform like the one I'm using for the images above, but that might be against security standards for your app. Also images aren't a great example, but imagine your application is very large scale and you have a lot of code that needs to be served up. Your browser won't be able to auto-cache that and you can't access it offline.

Think about mobile!

The image below is from A tomsguide article that talks about mobile network speeds.

Sure those seem pretty quick, but these are best case scenerios. The article goes on to talk about this as they only tested "...wireless network speeds at multiple locations in eight U.S. cities in the past year...". With service workers your users will be able to revisit your application much faster even while using slower interent speeds.

in addition to mobile...

Have you ever been in a coffee shop to spin up your favorite website and it took forever? It could be possible that your favorite site isn't implementing any sort of caching. Because of this while you are sipping your favorite drink you can't browse the site you wanted to browse! Unfortunatley you probably won't be able to get a hold of their dev team and show them this article.

At that coffee shop you were probably on your laptop which should be faster than your phone, right? Well... not necessarily. Most coffee shops have lower tier data plans and it shares with everyone in the building (even employees and shop devices).

Here is a graph by speedtest.net that shows global internet speeds. This really shows that you have to think about network speed and users coming back to your application. You don't want everyone taking 3 seconds to load your page every time (maybe longer, maybe shorter).

I'm in! How do I get started?

If you are using React then this is going to be a piece of cake! If you aren't using React I recommend heading here to learn more about how you can register your own service worker.

My recommendation is to utilize the package offline-plugin due to the versatility and options it provides. You could totally use the one that comes with Create-React-App(CRA) if you wanted to, but you will miss out on a lot of functionality. What's built into CRA is a good start for sure, especially if you aren't interested in any of the options offline-plugin provides.

Basic service worker implementation via CRA.

This snippet is located in your src/index.js file by default!

import * as serviceWorker from "./serviceWorker";

// ...

serviceWorker.register();

offline-plugin implementation

You've made it this far so I'm going to make it nice and easy for you. Follow these steps if you are wanting a service worker with auto updating functionality.

npm i offline-plugin react-app-rewired --save-dev in your project directory.
Go to your projects root directory (where your package.json is located) and create a new file called config-overrides.js.
In that file paste the following

// This is a good baseline for setting up auto install
const OfflinePlugin = require("offline-plugin");

module.exports = function override(config, env) {
  if (!config.plugins) {
    config.plugins = [];
  }
  config.plugins.push(
    new OfflinePlugin({
      autoUpdate: true, // true = check every hour for an update while user is connected to your application.
      ServiceWorker: {
        events: true
      }
    })
  );
  return config;
};

From here you have to decide if you want to alert or enforce the user to update when you push a new verion. If yes... continue! If no then you are done! 🎉
Let's give the user an option to update! In a new component that gets mounted on site visit let's add some code!

import React, { Component } from "react";
import runtime from "offline-plugin/runtime";

class Updater extends Component {
  state = {
    updateSite: false,
    updating: false
  };

  componentDidMount() {
    // You can test on local development my remove or changing this if
    if (process.env.NODE_ENV === "production") { 
      runtime.install({
        onUpdateReady: () => {
          this.setState({ updateSite: true });
        }
      });
    }
  }

  applySomeUpdate = () => {
    runtime.applyUpdate();
    setTimeout(() => {
      window.location.reload(true);
    }, 1000); // Give some time for the new service worker to start after the update
  };

  render() {
    return (
      <div>
        {this.state.updateSite ? (
          <button onClick={this.applySomeUpdate}>Update now!</button>
        ) : null}
      </div>
    );
  }
}

export default Updater;

Boom! 💥 Well kind of... You should definitly style this and make it your own!

You now have a very rough example of a component that will show a button when a new service worker is ready to be installed. This will run everytime someone visits your site. The best part is that a check for a new service worker costs nothing! 0 bytes and 0 lag!

Conclusion

You've made it to the end and hopefully with a better understanding of service workers and why they are so great. I (and now you) have barely grazed the surface of service workers. With the limited understanding we both have, we can all push for a better web. Making our applications faster and more accessable together.

Now get out there and hire some Service Workers!

Thank you! 🙏

References

service-worker docs

mobile network speed

speedtest

service-worker registration

Create-React-App

offline-plugin

react-app-rewired

Originally posted here https://www.crema.us/blog/a-complete-guide-to-service-workers