Jelani Harris Blog: RSS Feed

Tower of Greed - April 2026 Update

Jelani Harris — Thu, 02 Apr 2026 09:19:42 GMT

Hello climbers,

We've got a tower of greed update ready to play. This one added a few new traps, added a visibility feature to make crawling a bit more interesting, and also some optimizations to make the game run a lot smoother.

Provisions

Added Miser's Pendant - Increases the amount of score earned from all collected treasure afterwards.

Traps and Enemies

Added a new enemy: Slime. Has the ability to jump from 0 to 2 squares away.
Added a new trap: Blade Trap. Dual blades swing around and deal damage.
Added status effect: Blindness. Reduces the visibility range of the player.

Enhancements

Added floor shadows to entities to make it easier to tell height and to make enemies feel more grounded.
Adjusted map dimensions to not scale as fast when the player climbs up through floors
Fixed a hanging bug during the loading screen.
Fixed map generation bug in which doors would show up in walls if next to floor liquids. It makes the maps a little less chaotic, but it does make the room system work properly.
Added visibility radius for the player. They can see into rooms they walk into, otherwise only in a radius around them. You cannot see enemies move or traps go off in visited but not visible rooms. It does make finding the exist a little bit harder.

Next Plans

I have plans to change the way that the username, guest, login system works. I'll probably incorporate a login system of some kind.

Also, facing some real frustration with cheap hosting for MongoDB, so am considering moving the back-end of the application to use PostgreSQL instead simply due to the sheer about of available options in hosting a low activity back-end without paying so much a month.

I want to add a few more traps. I'm thinking of another floor based trap, or a wall trap that shoots a fireball.

Tower of Greed - Update March 2026

Jelani Harris — Sun, 08 Mar 2026 03:33:18 GMT

Hello climbers,

It has been a long time since I've updated the Tower of Greed. I had some inspiration this weekend, so I decided to put together a new update with some new content and options for players. Next time, I'll add a few new traps.

Provisions

Added rarity and modifiers on the numbers for the provisions before you embark. They can now be NORMAL, RARE, EPIC, or LEGENDARY.
Made provision Studded Bracelet give 0-6 diamonds instead of a static 3.
New provision: Buckler, gives a chance to ignore enemy damage.
New provision: Bandolier, gives a chance to add a weapon at the start of every floor
New provision: Cloak, when not starving gives you a chance to dodge attacks at the cost of stamina
New Provision: Ration, Once per floor, there's a percent chance of a second wind giving extra stamina
New Provision: Spare Blade, When hit by an enemy, consumes a weapon instead of taking damage

Enhancements

Refactored enemy movement to make it run a lot smoother
Fixed a small bug with status effect duration
Enemy and hazard generation now scales with the levels. Everything won't appear on the first level anymore.

Fixing EAC3 Audio in Plex App for Windows 11

Jelani Harris — Thu, 07 Aug 2025 03:14:19 GMT

When I was trying to enjoy content from my Plex server I noticed that I was getting no audio from my EAC3 5.1 Audio codec files. I was only getting no audio when I was using the Plex app on my Windows 11 computer, but when I used the app on my TV I could hear audio. Because I'm a multi-tasker I really wanted to get this to work on my PC.

I did quite a bit of search around and then got some good advice that you should download the Dolby Digital Plus Decoder for PC Apparently, versions of Windows 11 do not come with the Dobly Digital codecs installed, so you have to install it yourself. You can download this from the Microsoft Store.

Site now powered by Contentful and Markdown

Jelani Harris — Sun, 02 Feb 2025 11:39:30 GMT

If you can see this, then that means I've successfully merged my Contentful content model, with my local Markdown model for content on this blog. This was a goal of mine for a long time last year and I finally had the motivation (and lack of employment - haha), to be able to pursue this.

As much as I enjoy posting a Markdown file to create a post, I really did miss the aspect of WYSIWYG blogging that I had when this site was running on Wordpress. I just wanted to sit down and write, and not worry about filenames, syntax, and other minutiae. Trying to reduce the number of walls between me, and posting/creating content is another one of my goals for 2025.

That and I feel like I'm just tired of fiddly stuff. (This might also include Gatsby - but we'll see)

Why Contentful?

I chose Contentful because it had cloud hosting, and a good free / hobbyist tier that would work very well for my purposes.

I looked at Strapi, but didn't really enjoy trying to find a separate place to host and the basic hosting tier was a bit too rich for my tastes.

Setting a variable value as an object key in Javascript

Sat, 17 Aug 2024 22:31:00 GMT

In Javascript, you sometimes may find yourself needing to assign an attribute to an object based off the value of another variable.

There are currently two ways of doing this:

What’s the old way? (Pre ES6)

The old way that you used to do this was to make the object first and then use bracket notation ([]) to set it.

var wantedKey = "timesJumped"
var person = {}

person[wantedKey] = 250
console.log(person) // Will output {"timesJumped": 250}

The new ES6 way to assign an object key

In ECMAScript 2015, the syntax to initialize objects now also supports Computed Property Names. So now you can put your expression into brackets and it will be used as the property name.

var wantedKey = "moneyCarried"
var person = { [wantedKey]: 1500 }
console.log(person) // Should output {"moneyCarried": 1500}

Building a GraphQL API with NestJS and Prisma

Sun, 09 Jun 2024 16:57:00 GMT

In this tutorial I will show you how to create a GraphQL API using Nest.JS with a Prisma.IO database. In my recent project at work we are using all three of these technologies and I thought it would be great to provide a walkthrough on how you can get this stack working for yourself.

If you hate reading and only want the source code, you can look at it here.

Since you’re along for the ride, let’s describe what we’re using:

What is NestJS?

Nest.JS is a Node.js framework for building efficient, reliable, and scalable server-side applications. It uses modern TypeScript and provides a level of abstraction above common Node.js frameworks (Express.js and Fastify for example). It also exposes their APIs directly to the developer which allows us the freedom to use the myriad of third-party modules which are available for the underlying platform

I highly recommend using something like NestJs if you want a Javascript backend api that is like express but with modern modularity, dynamic injection, enterprise and microservice ready.

What is GraphQL?

GraphQL is a query language for your api that is designed to provide the data that you request exactly the way you want it and in the format you need it to be in. You describe the shape of your data in a single request and the server responds with that data. This means that data retrieval using GraphQL is efficient.

In our case we’ll be using the @nestjs/graphql package to provide support for our graph in NestJs

What is Prisma?

Prisma.IO is an ORM (Object Relational Mapping) tool that will help you work with databases more easily by providing an easy-to-use way to access your database by using simple commands instead of long SQL queries.

For this example, we’ll be using Sqlite as a database for convenience. But you can use databases like MySql, PostgreSQL and MongoDB with Prisma.

Installing NestJs and GraphQL

First we’ll start a new NestJs project

yarn global add @nestjs/cli
nest new tutorial-nestjs-graphql
yarn start:dev

This will create a new project directory using the name tutorial-nestjs-graphql and will add some boilerplate files for starting our application. I chose yarn for my package manager and will be using that from now on.

Then we will install the required packages we need for this project:

yarn add @nestjs/graphql @nestjs/apollo @apollo/server graphql

Nest will expose a GraphQL module that can be configured to use the Apollo GraphQL server in our nest application. The above command adds GraphQL apis support, and apollo server to our project.

Once we have those dependencies installed we can import the GraphQL module into our AppModule file:

import { Module } from "@nestjs/common"
import { AppController } from "./app.controller"
import { AppService } from "./app.service"
import { GraphQLModule } from "@nestjs/graphql"
import { ApolloDriver } from "@nestjs/apollo"

@Module({
  imports: [
    GraphQLModule.forRoot({
      driver: ApolloDriver,
    }),
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

NestJs offers two ways of building a graphql api: Code-First and Schema-First

Code First Schema

With the Code First approach, the GraphQL schema is generated using decorators and TypeScript classes. This method of schema generation is beneficial for those who wish to work solely with TypeScript and eliminate the need to switch between different language syntaxes.

Schema First

In the Schema First approach, the primary reference is the SDL (Schema Definition Language) files of GraphQL. SDL is a universal method that allows the sharing of schema files across various platforms, regardless of the language.

NestJs automatically produces your TypeScript definitions (utilizing either classes or interfaces depending on your settings) based on the GraphQL schemas, minimizing the necessity for you to write repetitive code.

We’re going to go Schema First because a lot of other approaches use the Code First and I would like to show a different method for creating your GraphQL Schema. the NestJS documentation about GraphQL provides a ton of examples about what a Code First approach would look like.

Create a Nest Resource

npx nest g resource post

You’ll see a prompt where you’ll be able to choose which kind of layer you want to use. I picked GraphQL Schema First. Then it’ll ask you “Would you like to generate CRUD entry points?” and say yes. Then it’ll generate a bunch of scaffolding files for you.

Adding GraphQL

The graphql file generated from the crud generation isn’t quite what we need so let’s add it to our file ourselves. Modify the src/post/post.graphql file to look like this:

type Post {
  id: Int
  title: String!
  content: String
  published: Boolean!
}

input CreatePostInput {
  title: String!
  content: String
  published: Boolean
}

input UpdatePostInput {
  id: Int!
}

type Query {
  getPosts: [Post]!
  getPost(id: Int!): Post
}

type Mutation {
  createPost(createPostInput: CreatePostInput!): Post!
  updatePost(updatePostInput: UpdatePostInput!): Post!
  removePost(id: Int!): Post
}

Auto-Generate Graphql Types

Now that we have our graphql files in the same folder as our object types we need to modify the GraphQl module to be able to see those files, and to also turn them into usable types by our system.

Modify the module portion of the app.module.ts to be:

import { Module } from "@nestjs/common"
import { AppController } from "./app.controller"
import { AppService } from "./app.service"
import { GraphQLModule } from "@nestjs/graphql"
import { ApolloDriver } from "@nestjs/apollo"
import { join } from "path"
import { PostModule } from "./post/post.module"

@Module({
  imports: [
    GraphQLModule.forRoot({
      driver: ApolloDriver,
      typePaths: ["./**/*.graphql"],
      definitions: {
        path: join(process.cwd(), "src/generated/graphql.ts"),
      },
      sortSchema: true,
    }),
    PostModule,
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

I’ll explain what each part is doing:

  typePaths: ['./**/*.graphql'],

This will let the module scan for any file that ends in graphql to be apart of the schema.

  definitions: {
    path: join(process.cwd(), 'src/generated/graphql.ts'),
  },

This tells the module to put the generated typescript definitions in the generated folder off of the source folder

sortSchema: true,

This will sort the generated schema file lexicographically instead of in the order

Spin up Database using Prisma

First let’s install the dependencies

yarn add sqlite3 @prisma/client ts-morph
yarn add -D prisma

Once that is installed run Prisma to setup the ORM files.

yarn run prisma init --datasource-provider sqlite

This will create a prisma/schema.prisma file. In that file we will add the model for our Post

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "sqlite"
  url      = env("DATABASE_URL")
}

// Add the post model here
model Post {
  id        Int     @id @default(autoincrement())
  title     String
  content   String?
  published Boolean @default(false)
}

After that you want to create the database and the prisma classes by typing in:

npx prisma generate

Create Prisma Service

Now we need to create a prisma service. In src/prisma/prisma.service.ts add:

import { Injectable, OnModuleInit } from "@nestjs/common"
import { PrismaClient } from "@prisma/client"

@Injectable()
export class PrismaService extends PrismaClient implements OnModuleInit {
  async onModuleInit() {
    await this.$connect()
  }
}

We are extending the Prismaclient to provide an abstraction of the prisma client that can integrate with the NestJS architecture. We can then provide this service to other services via dependency injection.

Now go to your /src/post/module.ts and add the PrismaService to the list of providers:

import { Module } from "@nestjs/common"
import { PostService } from "./post.service"
import { PostResolver } from "./post.resolver"
import { PrismaService } from "src/prisma/prisma.service"

@Module({
  providers: [PostResolver, PostService, PrismaService],
})
export class PostModule {}

Adding create and update DTO objects

in /src/post/dto/create-post.input.ts add:

export class CreatePostInput {
  title: string
  content?: string
  published: boolean
}

This will represent the input we’re providing to create a new post.

Then in /src/post/dto/update-post.input.ts add:

import { CreatePostInput } from "./create-post.input"
import { PartialType } from "@nestjs/mapped-types"

export class UpdatePostInput extends PartialType(CreatePostInput) {
  id: number
}

That will represent the input necessary to update a post. Also, notice that this is extending the CreatePostInput DTO but it requires an ID.

Updating Post Resolver

Change the /src/post/post.resolver.ts to be:

import { PostService } from "./post.service"
import { Resolver, Mutation, Args, Query } from "@nestjs/graphql"
import { CreatePostInput } from "./dto/create-post.input"
import { UpdatePostInput } from "./dto/update-post.input"
import { Post as DBPost } from "@prisma/client"

@Resolver()
export class PostResolver {
  constructor(private readonly postService: PostService) {}

  @Mutation("createPost")
  createPost(
    @Args("createPostInput") createPostInput: CreatePostInput
  ): Promise<DBPost> {
    return this.postService.create(createPostInput)
  }

  @Mutation("updatePost")
  updatePost(
    @Args("updatePostInput") updatePostInput: UpdatePostInput
  ): Promise<DBPost> {
    return this.postService.update(updatePostInput.id, updatePostInput)
  }

  @Mutation("removePost")
  removePost(@Args("id") id: number) {
    return this.postService.remove(id)
  }

  @Query("getPosts")
  getPosts() {
    return this.postService.findAll()
  }

  @Query("getPost")
  getPost(@Args("id") id: number): Promise<DBPost> {
    return this.postService.findOne(id)
  }
}

Updating Post Service:

Make the /src/post/post.service.ts look like:

import { Injectable } from "@nestjs/common"
import { CreatePostInput } from "./dto/create-post.input"
import { UpdatePostInput } from "./dto/update-post.input"
import { PrismaService } from "src/prisma/prisma.service"

@Injectable()
export class PostService {
  constructor(private prisma: PrismaService) {}

  async create(createPostInput: CreatePostInput) {
    return this.prisma.post.create({ data: createPostInput })
  }

  async findAll() {
    return this.prisma.post.findMany({ orderBy: { id: "desc" } })
  }

  async findOne(id: number) {
    return this.prisma.post.findFirst({ where: { id: id } })
  }

  async update(id: number, updatePostInput: UpdatePostInput) {
    return this.prisma.post.update({
      data: updatePostInput,
      where: {
        id: id,
      },
    })
  }

  async remove(id: number) {
    this.prisma.post.delete({ where: { id: id } })
  }
}

Starting NestJs Service

yarn start:dev

You should get output that resembles:

[3:56:28 PM] File change detected. Starting incremental compilation...

[3:56:28 PM] Found 0 errors. Watching for file changes.

[Nest] 2800  - 06/09/2024, 3:56:29 PM     LOG [NestFactory] Starting Nest application...
[Nest] 2800  - 06/09/2024, 3:56:29 PM     LOG [InstanceLoader] AppModule dependencies initialized +14ms
[Nest] 2800  - 06/09/2024, 3:56:29 PM     LOG [InstanceLoader] PostModule dependencies initialized +0ms
[Nest] 2800  - 06/09/2024, 3:56:29 PM     LOG [InstanceLoader] GraphQLSchemaBuilderModule dependencies initialized +0ms
[Nest] 2800  - 06/09/2024, 3:56:29 PM     LOG [InstanceLoader] GraphQLModule dependencies initialized +0ms
[Nest] 2800  - 06/09/2024, 3:56:29 PM     LOG [RoutesResolver] AppController {/}: +2ms
[Nest] 2800  - 06/09/2024, 3:56:29 PM     LOG [RouterExplorer] Mapped {/, GET} route +2ms
[Nest] 2800  - 06/09/2024, 3:56:29 PM     LOG [GraphQLModule] Mapped {/graphql, POST} route +187ms
[Nest] 2800  - 06/09/2024, 3:56:29 PM     LOG [NestApplication] Nest application successfully started +2ms

Now you have your api up and running! Now let’s try to make a graphql query against it.

How to use GraphQL Playground

First in your web-browser go to the url http://localhost:3000/graphql

You should see a screen that resembles the GraphQL Playground:

Our first create, or mutation

On the left hand side, is where we will put in our query to make a new post:


mutation {
  createPost(createPostInput:{
    title:"New Post",
    content:"I am the post",
    published: true
  }) {
    id, title, content, published
  }
}

That graphql will create a new post. If you hit the large play button between the two halves of the window, you’ll see that it made a post on the other side:

So how do I get that data back?

Now let’s try to get that data back from our post. Use this query to get the id back that you just created.

query($id: Int!) {
  getPost(id: $id) {
    id, title, content, published
  }
}

Towards the bottom of the GraphQL Playground is where you’ll see a section called “Query Variables”. You’ll want to expand that and add this JSON:

{"id": 4}

(Of course, use the same id number you got when you created your data above)

If you run it, you should get the data you entered in before!

That’s it

So now you know how to create a NestJS API using GraphQL with help from Prisma for accessing the database.

If you want to see the source code for this example project you can look at it at https://github.com/jelaniharris/nestjs-graphql-example

Fixing ERR_INVALID_THIS error on Vercel using PNPM

Sun, 12 May 2024 03:11:57 GMT

Fixing ERR_INVALID_THIS error on Vercel using PNPM

I was in the beginning stages of creating my application using T3 and Clerk when I ran into a peculiar error when attempting to deploy in Vercel.

I was trying to deploy my application in vercel when I was running into this error

To fix this, I needed to run corepack up which will put the current version of the packageManager that you’re using into your package.json file.

Then in Vercel, be sure to add the environment variable ENABLE_EXPERIMENTAL_COREPACK and set it’s value to 1. This will enable corepack support.

After making this change I was successfully able to get my vercel deployment to work.

I had lost about 3 hours of development time trying to get it to work, so I’m hoping that this small blog post helped you figure this out as well.

Solving the Module Not Found error when using NextJS and MonoRepos

Sat, 13 Apr 2024 10:15:30 GMT

I’m using the T3 stack to begin work on my movie application and I wanted to use ShadCN for the baseline of my components. I had another package called ui in which I was going to store all of my ShadCN components and then reference those in my nextJS application.

I went through the normal installation process for getting ShadCN installed, added a few new components, exported them in my package.json and attempted to use them in my app. But then I ran into this error:

@acme/nextjs:dev:  ⚠ Fast Refresh had to perform a full reload due to a runtime error.
@acme/nextjs:dev:  ⨯ ../../packages/ui/src/components/ui/form.tsx:13:0
@acme/nextjs:dev: Module not found: Can't resolve '~/components/ui/label'
@acme/nextjs:dev:   11 | } from "react-hook-form";
@acme/nextjs:dev:   12 |
@acme/nextjs:dev: > 13 | import { Label } from "~/components/ui/label";
@acme/nextjs:dev:   14 | import { cn } from "../../lib/utils";
@acme/nextjs:dev:   15 |
@acme/nextjs:dev:   16 | const Form = FormProvider;
@acme/nextjs:dev:
@acme/nextjs:dev: https://nextjs.org/docs/messages/module-not-found

What do you mean you can’t resolve it? It’s right there! So I took a quick peek around my configuration and saw how I had shadcn configured in my ui directory to use the following components.json:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "../../apps/nextjs/src/app/globals.css",
    "baseColor": "slate",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "~/components",
    "utils": "~/lib/utils"
  }
}

As you can see I have the ~ used as my path alias. I also have this setup in my tsconfig.json file in the ui package.

{
  "extends": "@acme/tsconfig/internal-package.json",
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "ES2022"],
    "jsx": "preserve",
    "tsBuildInfoFile": "node_modules/.cache/tsbuildinfo.json",
    "baseUrl": ".",
    "paths": {
      "~/*": ["./src/*"]
    },
  },
  "include": ["*.ts", "src"],
  "exclude": ["node_modules"]
}

This allows the downloaded components from the Shadcn to refer to other components and the utility folder easily.

import { Label } from "~/components/ui/label"
import { cn } from "~/lib/utils"

After some research about how all of these aliases, monorepos, building and exporting works I found out the reason why I was running into that error. It was because when my nextjs code was including the components the alias name was looking into it’s internal path of ./src/* and not the one in the package.

I added the source paths of the ui package to the nextjs app tsconfig.json file:

{
  "extends": "@acme/tsconfig/base.json",
  "compilerOptions": {
    "lib": ["es2022", "dom", "dom.iterable"],
    "jsx": "preserve",
    "baseUrl": ".",
    "paths": {
      "~/*": ["./src/*", "../../packages/ui/src/*"]
    },
    "plugins": [{ "name": "next" }],
    "tsBuildInfoFile": "node_modules/.cache/tsbuildinfo.json",
    "module": "esnext"
  },
  "include": [".", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

Because the I was using the same path alias symbol for my NextJS paths and my package ui paths, I just added the package paths to the end of the array.

Next.js can pick up the paths automatically from the tsconfig.json file, and all I had to do was to restart the server after I made a change to that file.

Once I did this, my app started working again and now I could refer to shadcn components and could have all them stored in a separate package in my project.

SEO with Gatsby and React-Helmet

Mon, 19 Feb 2024 03:11:57 GMT

React-Helmet is a way of managing all of the changes that are made to the head of an HTML document. With this component you can control the head using their react component. This allows you to add attributes to their component that will be added to the static HTML pages that Gatsby generates.

React-Helmet features all of the tags used in the head tag like title, base, meta, lang, link, script, noscript, and style tags.

How to install React-Helmet for Gatsby In your main gatsby directory just run this command to install react-helmet and react-helmet gatsby

npm install gatsby-plugin-react-helmet react-helmet

Then just add the plugin into your plugins array in gatsby-config.js

plugins: [`gatsby-plugin-react-helmet`]

I prefer having my Helmet object wrapped into another object so that I can control the usage of it. I created a seo.js file

const Seo = ({ description, lang, meta, title, image, pageKeywords, ogType, article, url}) => {
  ...
})

Inside of that seo container, I run a query to get the basic details about my site:

  const { site } = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadata {
            title
            description
            keywords
            siteUrl
            imageUrl
            author {
              name
            }
            social {
              twitter
            }
          }
        }
      }
    `
  )

Then inside the container, I conditionally use the site data as backup if the attributes that I’m using from the parameters do not exist:

  const metaDescription = description || site.siteMetadata.description;
  const defaultTitle = site.siteMetadata?.title;
  const author = site.siteMetadata?.author?.name;
  const siteImage = image || {width: 941, height: 529, src: `${site.siteMetadata.siteUrl}${GenericLogo}`};
  const keywords = pageKeywords || site.siteMetadata.keywords;

Once I have some basic variables set up, then I export the Helmet component by:

  return (
    <Helmet
      htmlAttributes={{
        lang
      }}
      link={[...]}
      meta={[...]}
      ...
    />
  )

Then to use the Seo component, for a relatively static page:

  <Layout>
    <Seo title="All blog posts" />
  </Layout>

For one of my dynamically generated blog pages I use:

<Layout>
  <Seo
    title={post.frontmatter.title}
    description={post.frontmatter.description || post.excerpt}
    ogType="article"
    pageKeywords={tags}
    url={`${data.site.siteMetadata.siteUrl}${post.fields.slug}`}
    article={[
      {
        property: `article:published_time`,
        content: post.frontmatter.date,
      },
      {
        property: `article:modified_time`,
        content: post.frontmatter.modified_date || post.frontmatter.date,
      },
    ]}
  />
</Layout>

Metadata

Adding metadata to your helment component is really easy. You just add props and content to an array:


  let articleData = []
  if (article) {
    articleData = article;
  }

  return (
    <Helmet
      meta={[
        {
          name: 'viewport',
          content: 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0'
        },
        {
          property: `og:title`,
          content: title,
        },
        {
          property: `og:image`,
          content: siteImage.src
        },
        {
          name: `og:url`,
          content: url,
        },
      ].concat(meta, articleData)}
    />
  )

This is how you can setup your open graph, facebook, and twitter metatags. I’m adding another array from article data to allow invidual blog posts to set additional meta tags

Favorite Link Icons

To handle the favicons, you can define the link in the helmet component as an array of icon objects:

  import FavIcon64x64 from '../images/favicon-64x64.png'
  import FavIcon32x32 from '../images/favicon-32x32.png'
  import FavIcon16x16 from '../images/favicon-16x16.png'
  ...

  return (
    <Helmet
      link={[
        {
          rel: "icon",
          type: "image/png",
          sizes: "16x16",
          href: FavIcon16x16
        },
        {
          rel: "icon",
          type: "image/png",
          sizes: "32x32",
          href: FavIcon32x32
        },
        {
          rel: "shortcut icon",
          type: "image/png",
          href: FavIcon64x64
        }
      ]}
    />
  )

Handling the title

The way that I’m handling the title is a little different. I check to see if the title is the homepage and if it is then I use the defaultTitle from the gatsby config, otherwise I use the page title with the site name at the end.

  let pageTitle = title;
  let titleTemplate = null;
  if (title === "Home") {
    titleTemplate = defaultTitle;
    pageTitle = defaultTitle;
  } else {
    titleTemplate = defaultTitle ? `%s | ${defaultTitle}` : null;
  }

  return (
    <Helmet
      title={pageTitle}
      titleTemplate={titleTemplate}
    />
  )

So then when I define the title of a blog post, it will show up as Blog Post Title | Jelani Harris which is the seo that I want for my pages.

Fixing ECONNREFUSED error in Rails and NextJS Docker Containers

Tue, 04 Apr 2023 19:40:00 GMT

I’m in the early stages of creating my application that uses NextJs as a frontend and Rails as the Api backend, when I realized that I couldn’t NextJs to talk to my api:

frontend    | AxiosError: connect ECONNREFUSED 127.0.0.1:4000
frontend    |     at AxiosError.from (file:///usr/app/node_modules/axios/lib/core/AxiosError.js:89:14)
frontend    |     at RedirectableRequest.handleRequestError (file:///usr/app/node_modules/axios/lib/adapters/http.js:577:25)
frontend    |     at RedirectableRequest.emit (node:events:525:35)
frontend    |     at eventHandlers.<computed> (/usr/app/node_modules/follow-redirects/index.js:14:24)
frontend    |     at ClientRequest.emit (node:events:513:28)
frontend    |     at Socket.socketErrorListener (node:_http_client:502:9)
frontend    |     at Socket.emit (node:events:513:28)
frontend    |     at emitErrorNT (node:internal/streams/destroy:151:8)
frontend    |     at emitErrorCloseNT (node:internal/streams/destroy:116:3)
frontend    |     at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
frontend    |   port: 4000,
frontend    |   address: '127.0.0.1',
frontend    |   syscall: 'connect',
frontend    |   code: 'ECONNREFUSED',

At first I thought i had something misconfigured, on the NextJs side - but this is actually on the Ruby on Rails side. I was able to communicate with my api using the web browser directly or with Postman so I knew it had to be NextJs.

After some research, trial, and error I finally got my NextJs app talking to my rails api. Here’s how I did it:

What is Host Authorization?

Rails has a feature where it can stop DNS rebinding and other host style attacks by allowing you to provide a whitelist of all of the valid hosts that can comminicate with your rails application. This is called the HostAuthorization configuration.

Whenever we are using the getServerSideProps to perform communication with your api, it’s needs the url of the container’s service.

My compose-docker file looks like this:

version: '3'
services:
  db:
    image: postgres:14.2-alpine
    container_name: magician-db
    env_file: "./rails-server/.env"
    ports:
      - "5430:5432"
    volumes:
      - "magician-db:/var/lib/postgresql/data"
  api:
    build: ./rails-server
    command: "bundle exec rails s -p 4000 -b 0.0.0.0"
    env_file: "./rails-server/.env"
    volumes:
      - "./rails-server:/app:cached"
      - gem_cache:/gems
    ports:
      - 4000:4000
    depends_on:
      - db
  frontend:
    image: node:18-alpine
    container_name: frontend
    build: ./client
    user: "node"
    env_file: "./client/.env.local"
    volumes:
       - ./client:/usr/app:cached
       - node_modules_client:/usr/app/node_modules
    command: yarn dev
    ports:
      - 3000:3000
    depends_on:
      - api
networks:
  default:
    name: magician_default
volumes:
  magician-db:
  gem_cache:
  node_modules_client:

Edit the config.hosts

Add the name of the docker-compose container in the ==Rails.application.config.hosts== configuration. For my example, my rails api in my docker-compose file is just called ==api==:

Add to environments/development.rb in your rails folder

  # Needed for Next.js's getServerSideProps
  config.hosts << "api"

Change the NextJs Url

Once you have the backend fixed to support the host, now you need to change the environment variable that you’re using for the NextJs api calls to match. You have to have two api urls. One is for the server api url which is used for the container-to-container connection, the other is used for the browser-to-api connection (in case you didn’t want to use getServerSideProps).

# DEVELOPMENT TOOLS
# Ideally, don't add them to production deployment envs
# !STARTERCONF Change to true if you want to log data
NEXT_PUBLIC_SHOW_LOGGER="false"
NEXT_SERVER_API_URL="http://api:4000"
NEXT_PUBLIC_API_URL="http://localhost:4000"

I’m imagining that if I’m setting this up in the cloud, that those two urls would point to the same url. But in developer mode working in docker, having them separated worked well for my purposes.

Change the next.config.js

Add these two configuration options to the next.config.js file.

  serverRuntimeConfig: {
    apiUrl: process.env.NEXT_SERVER_API_URL
  },
  publicRuntimeConfig: {
    apiUrl: process.env.NEXT_PUBLIC_API_URL
  },

Create a single service file

I made a single service file in a folder called services where I stick all of my model, react-query and api calls. I have a single api file, that I use to access my api using axios:

My services/api.ts:

  import axios from 'axios';
  import getConfig from 'next/config';

  // Get our configuration of our runtimes
  const {serverRuntimeConfig, publicRuntimeConfig } = getConfig();

  // Use the correct url depending on if it's server or public
  const apiUrl = serverRuntimeConfig.apiUrl || publicRuntimeConfig.apiUrl;

  // Create the axios instance
  const api = axios.create({
    baseURL: apiUrl,
    timeout: 5000,
    headers: {
      Accept: 'application/json',
    },
  });

  export { api };

The serverRuntimeConfig is only available on the server-side, and the publicRuntimeConfig is available server-side and client-side. So when I’m getting my axios instance and I’m in a getServerSideProps call, I’m getting the one that has the server api (NEXT_SERVER_API_URL). Then

And that’s it

Once I had those changes in place, I was able to properly communicate to my backend using docker. I’m hoping this helps.

How to install packages from GitHub using NPM

Sat, 05 Nov 2022 12:00:00 GMT

Using the npm registry is not the only source that we can use to install packages into our applications. NPM also has the ability to install from a remote git url as long as the repository has a package.json file in it’s root directory.

npm install prisma tailwindcss nextjs

Installing from GitHub

For example, you could install the same prisma package from it’s GitHub repo:

npm install https://github.com/prisma/prisma

Installing a specific branch from Github

You can choose to install a specific branch by adding /tree/[branch] to your url, where branch is the release number.

For example, if you wanted 4.3.1 of Prisma:

npm install https://github.com/prisma/prisma/tree/4.3.1

Installing a specific commit from GitHub

You can also use a commit by adding /tree/[commit] to your url:

npm install https://github.com/prisma/prisma/tree/333dd87a879

Installing using a GitHub URI

You can also use the Github URI to install a package. This will resolve the uri to a url.

npm install github:prisma/prisma

The uri github:prisma/prisma will now resolve to https://github.com/prisma/prisma and install the prisma package for you.

What do they look like in the package.json

{
  "dependencies": {
    "prisma": "github:prisma/prisma#333dd87a879",
    "express" : "github:expressjs/express#4.18.2",
    "next" : "github:vercel/next.js",
  }
}

When you do not provide a specific branch or commit, the installation will assume that you are using the default branch (main or master)

Fixing the MDB_PROBLEM: Unexpected problem - txn should abort in Gatsby

Thu, 06 Oct 2022 22:31:00 GMT

While I was preparing to work locally on my website, I did the typical npx gatsby develop and was met with this error:

Error: MDB_PROBLEM: Unexpected problem - txn should abort

Eh?

MDB_PROBLEM? That’s a strange error …

At first I thought I had made a mistake with my markdown files, so I checked all of the ones i changed and couldn’t find anything wrong with formatting. I rebooted my development machine, reverted all of my changes and I was still getting this error.

After doing some research I found a couple of ideas that may also work for you if you have this problem. After each solution, try running the gatsby develop command again to see if it helps.

Solution 1: Clean out the cache

Try cleaning out the Gatsby Cache, then try running

npx gatsby clean

Solution 2: Clear the npm/yarn caches

npm cache clean —force yarn cache clean

Solution 3: Upgrade Gatsby

I was using Gatsby version 4.13.1, and I upgraded to 4.24.4 and thankfully for me the error disappeared.

yarn upgrade gatsby@4.24.4

I’m hoping this helps. If you found another solution that works for you, please post it in the comments to help out other people.

Adding drafts to your blog posts in Gatsby

Fri, 30 Sep 2022 00:52:03 GMT

I have thoroughly enjoyed the migration of my blog from WordPress to Gatsby. However, I did realize that one of the features of WordPress that I missed was the ability to save my blog posts as a draft.

I write blog posts by writing a little bit, doing some more research, and then coming back to it later and adding more details before I publish.

Now there does exist a draft plugin for Gatsby to set up a similar draft system for you; however, I feel that with the power of Gatsby and GraphQL, you can implement your blog publishing system that’s to your liking.

I will explain two methodologies:

I want to mark posts as either Published or Unpublished

This option works great if you’re starting your blog and don’t have many markdown entries or if you prefer having consistent frontmatter attributes across all your markdown files.

How do I do this?

In gatsby-node.js add this to the allMarkDownRemark field in the exports.createPages section:

filter: { frontmatter: {published: {eq: true} }}

This gives a filter to the query used to build the pages on the Gatsby site. We’re only asking for posts that have the field published set to true in it’s frontmatter.

In gatsby-node.js in the exports.createSchemaCustomization -> createTypes declaration, add this to the type Frontmatter definition:

type Frontmatter {
  ...
  published: Boolean
  ...
}

Then in all of your markdown files you would add the published field:

---
title: How to do things with things
date: "2056-09-27T00:52:03.284Z"
published: true
---

I want to assume all posts are published unless I flag them as a draft

This is a great option if you have too many markdown posts you would have to go through to add a published: true into each frontmatter block. By only adding draft: true to posts you’re working on, you can immediately keep a post away from being published.

We do however need to create two fields in order to get this functionality. The first field is a frontmatter one called draft. You’ll be setting this to true in your markdown files to indicate that a post is in draft mode.

The second field is one we’re adding to our node fields called ```released“. This flag will indicate if the post is visible and can be statically generated.

Step 1: Change how pages are created

In gatsby-node.js and in the export.createPages method, we are going to change the filter for getting all of our markdown posts to using a field called released:

...
{
  allMarkdownRemark(
    sort: { fields: [frontmatter___date], order: ASC }
    filter: { fields: { released: { eq: true }}}
    limit: 1000
  ) {
    ...
  }
}
...

Step 2: Add the new released field

Also in gatsby-node.js and in the exports.onCreateNode section, we are going to check the node to see if it can be flagged as released.

const forcePublish = process.env.NODE_ENV === 'development';

if (node.internal.type === MD_TYPE) {
  const slug = createFilePath({ node, getNode });
  ...
  let isReleased = false;
  if (forcePublish || node.frontmatter && !node.frontmatter.draft) {
    isReleased = true;
  }

  createNodeField({
    name: `released`,
    node,
    value: isReleased,
  })
  ...
}

We are testing the current environment to see if we are in development mode, and if we are we are setting the released flag to true. This is so that you can see all of your posts on your site when in development mode. We are then testing to see if the current node’s frontmatter data has the draft flag set to false. If that is false then we know that the post is ready to be released.

Step 3: Add the defaultFalse directive extension

In gatsby-node.js and in the exports.onCreateNode section add this:

exports.createSchemaCustomization = ({ actions }) => {
  const { createFieldExtension, createTypes } = actions

  // Create a @defaultFalse directive
  createFieldExtension({
    name: "defaultFalse",
    extend() {
      return {
        resolve(source, info) {
          if (source[info.fieldName] == null) {
            return false
          }
          return source[info.fieldName]
        },
      }
    },
  })

  ...

We are creating a custom extenstion to be used as a directive. This directive allows us to use this on other fields. The source will contain all fields from the frontmatter (like title, description, date, etc). The info.fieldname is the name of the field you’re applying the directive to: (like published or draft). If that happens to be null, then we force it to be false. If not null, then we return the original value.

Why are we doing this?

This is so that when we query the system for frontmatters (posts) that do not have draft set to true, then instead of defaulting to null they will default to false instead.

Step 4: Add the types

In gatsby-node.js in the exports.createSchemaCustomization -> createTypes declaration, add this to the definition:

exports.createSchemaCustomization = ({ actions }) => {
  ...
  createTypes(`
    type Frontmatter {
      ...
      draft: Boolean @defaultFalse
      ...
    }

    type Fields {
      ...
      released: Boolean @defaultFalse
      ...
    }
  `)
}

We’re using the directive to ensure that the draft and released fields do not end up as null, but false if they’re undefined

Step 5: Use released filter on your post list page

On your page for displaying your list of available posts, you’ll want to add the filter for the new field for your query:

export const pageQuery = graphql`
  query {
    site {
      siteMetadata {
        title
      }
    }
    allMarkdownRemark(
      sort: { fields: [frontmatter___date], order: DESC }
      filter: { fields: { released: {eq: true}}}
    ) {
      nodes {
        excerpt
        fields {
          ...
          released
        }
      }
    }
  }
`

This is so that only posts that are flagged as released are visible.

Step 6: Add field to markdown files

Then in your markdown files you would add the ==draft== field:

---
title: How to do things with things
date: "2056-09-27T00:52:03.284Z"
draft: true
---

Additional Feature: Show your posts as drafts

Now that you have this setup for your own system, I like to add a visual indicator to me that flags posts as drafts when I’m working locally:

Add drafts field to frontmatter on blog pages

export const pageQuery = graphql`
  query {
    ...
    allMarkdownRemark(
      sort: { fields: [frontmatter___date], order: DESC }
      filter: { fields: { released: {eq: true}}}
    ) {
      nodes {
        excerpt
        frontmatter {
          draft
          ...
        }
      }
    }
  }
`

Add indicator to post

<div className="card-content">
  <p className="title" itemProp="headline" >
    <span>
      <Link to={post.fields.slug} itemProp="url">
        {post.frontmatter.title}
      </Link>
    </span>
  </p>
  {
    post.frontmatter.draft && 
    <p className="notification is-warning has-text-centered">
      This post is a <em>Draft</em>
    </p>
  }
</div>

Additional Feature: Show upcoming posts

Now that we have the ability to put posts in a draft or in development mode, we can now display a list of the upcoming posts in our websites to encourage viewers to come back or to sign-up to a newsletter, etc.

Example footer component that shows upcoming posts

const FooterComponent = () => {
  const data = useStaticQuery(graphql`
    query {
      upcomingPosts: allMarkdownRemark(
        sort: { fields: [frontmatter___date], order: DESC }
        filter: { frontmatter: { draft: {eq: true}}}
        limit: 4
      ) {
        nodes {
          fields {
            slug
          }
          frontmatter {
            title
          }
        }
      }
    }
  `)

  const upcomingNodes = data.upcomingPosts.nodes;

  const UpcomingPostsComponent = ({ posts }) => {
    const renderPostTitle = postData => {
      return <li key={`upcoming-${postData.fields.slug}`}>{postData.frontmatter.title}</li>
    }

    if (posts.length === 0) {
      return <></>
    }
    
    return (
      <>
        <h3 className="title is-3">Upcoming Posts</h3>
        <div className="upcoming-posts is-flex is-flex-direction-row is-flex-wrap-wrap">
          <ul>{posts.map(post => renderPostTitle(post))}</ul>
        </div>
      </>
    )
  }

  // Render the upcoming posts
  return (
    <footer className="page-footer">
      <div className="pre-footer py-3">
        <section className="container">
          <div className="columns">
          <UpcomingPostsComponent posts={upcomingNodes} />
          </div>
        </section>
      </div>
    </footer>
  );
}

export default Footer

Fixing multiple renders with NextJs and tRPC

Tue, 23 Aug 2022 13:00:00 GMT

While I was developing my own starter kit for my apps (using tRPC with NextJs), I noticed that when I tried to use trpc.useQuery() in a component, I was getting a frustrating number of multiple renders (two to four at a time) on even the simplest of pages.

Why do my pages render twice, or render multiple times?

After some research and experimentation, I figured out what was happening. My React Query was fetching the data on the component’s mounting.

That also had the side effect of changing the data on the screen on every reload and pinging the backend API twice, which is completely unnecessary.

The solution

Look at your _app.tsx in your /pages folder. In the withTrpc section and in the config({ ctx }) { add this to the return block:

queryClientConfig: {
    defaultOptions: {
        queries: {
            refetchOnMount: false,
        },
    },
},

Why is it whenever I click in the window it refetches?

This is because if a default feature in React Query. The Window Focus Refreshing feature is so that when your user comes back to the page (after browsing in another tab or something) and clicks inside of it React Query will fetch fresh data for you in the background.

Learn about the important defaults of React Query.

Now, in most cases you will want this on when other users are adding content to your application and you want your user to have the most up to date data. However, in my case I wanted it off so it’s as simple as turning off the refetchOnWindowFocus option:

queryClientConfig: {
    defaultOptions: {
        queries: {
            refetchOnWindowFocus: false,
        },
    },
},

My final _app.tsx looks like this:

export default withTRPC <
  AppRouter >
  {
    config({ ctx }) {
      return {
        url: `${getBaseUrl()}/api/trpc`,
        queryClientConfig: {
          defaultOptions: {
            queries: {
              refetchOnMount: false,
              refetchOnWindowFocus: false,
            },
          },
        },
      }
    },
    ssr: true,
  }(MyApp)

How to add redirects to a Netlify site in Gatsby

Sun, 24 Jul 2022 13:05:00 GMT

Previous this website was built in Wordpress, but now I’ve built it using Gatsby. In my migration to Gatsby I felt like I needed to change the url structure of the pages and not have any broken links.

On my old webhost I did this using .htaccess and just define my redirects in there. However, we’re not running Apache anymore so there needed to be a solution.

Thankfully Netlify has an easy way to do this.

Create a _redirects file

On this page, Netlify defines how to setup the file to support redirects.

First step is to add this file to the published folder. Netlify will look for this file during the build process and setup your redirects for you. For myself, I have my Gatsby building the site into my /static folder which is the default.

Navigate to the static folder at the root of your Gatsby site. If you don’t have a static folder at your root, you can make one.
Create a blank file with the name _redirects. There is no extension on that file.

Add urls to the redirect file

Now you need to open up the _redirects file and add the source and destination urls and the redirection method. Here is the format:

[Source Url] [Destination Url] [Redirect Method]

Like for example, my old website had a url structure like:

jelaniharis.com/2021/link-to-blog-post

My new url format is:

jelaniharris.com/blog/link-to-blog-post

So in my redirects file I could have have for a 301 redirect

/2021/link-to-blog-post /blog/link-to-blog-post 301

But we could be smarter about it

Instead of putting every single page from my old blog as a new line in the _rewrites file we could use a splat or placeholder

Splats

Splats are an indicator that would match anything that follows after it. You can use the splats in the following way:

/blogs/* /content/:splat

Thus if you had a visitor to a sitename.com/blogs/2025/why-apples-arent-real Netlify would create a redirect to the page sitename.com/content/2025/why-apples-arent-real

Placeholders

Placeholders can be used on both the source and destination paths to match content from one side to another.

/artwork/:category/:month/:artist/* /:artist/:category/:splat 301

You also don’t need to have a source placeholder exist on the destination placeholder (e.g. the :month field)

There’s an order to things (First Match Rule)

The redirect engine that is processing the redirects on Netlify only processes the first matching rule that it finds. So you need to order your more specific rules first, and then list the more general rules towards the bottom.

# This will redirect
/books/the-great-gatsby /curriculum/2022/the-great-gatsby

# This redirects all paths in books, except the one above (The Great Gatsby)
/books/* /archived-content/:splat

# This never triggers because the rule above it would trigger first
/books/zero-sum-game /curriculum/2020/zero-sum-game

Bonus Tip

You can also check to see if your redirect rules parse correctly by using (Netlify’s playground site)[https://play.netlify.com/redirects].

My solution to my redirect problem

So to map my old blog urls jelaniharis.com/2021/link-to-blog-post to my new path jelaniharis.com/blog/link-to-blog-post

So in my redirects file I have

/2013/:slug /blog/:slug 301
/2014/:slug /blog/:slug 301
/2021/:slug /blog/:slug 301

This allows me to map blog content from my year based pathing, into my new slug based paths for this website.

So why didn’t I do a /:year/:slug /blog/:slug 301 rule? That’s because it would have matched too many other pages on my old site like jelaniharris.com/projects/apparatus to jelaniharris.com/blog/apparatus instead which is a problem.

I hope this helped!

Sorting an array of objects by a property value in javascript

Mon, 27 Jun 2022 01:11:00 GMT

Sorting using sort()

Lets say that you have an array of objects that you wanted to sort by:

const people = [
    { name: 'Liam', age: 29, created_at: new Date("2022-05-18") },
    { name: 'Adam', age: 34, created_at: new Date("2021-09-23") },
    { name: 'Adam', age: 45, created_at: new Date("2020-03-11") },
    { name: 'Eve', age: 23, created_at: new Date("2020-02-03") },
    { name: 'Peter', age: 45, created_at: new Date("2019-06-08") },
]

You can use the sort() method of the Array that uses a callback function. The function takes 2 parameters in the array (commonly called a and b)

const sortedPeople = people.sort((a, b) => a.name > b.name ? 1 : -1)

[
    {
        "name": "Adam",
        "age": 45,
        "created_at": "2020-03-11T00:00:00.000Z"
    },
    {
        "name": "Adam",
        "age": 34,
        "created_at": "2021-09-23T00:00:00.000Z"
    },
    {
        "name": "Eve",
        "age": 23,
        "created_at": "2020-02-03T00:00:00.000Z"
    },
    {
        "name": "Liam",
        "age": 29,
        "created_at": "2022-05-18T00:00:00.000Z"
    },
    {
        "name": "Peter",
        "age": 45,
        "created_at": "2019-06-08T00:00:00.000Z"
    }
]

When the callback function returns a 1, the b object is higher in sorting over object a. To reverse this, you can just reverse the 1 and -1.

Sorting by multiple properties

You could also have it sort by a secondary properties if there is a match in the first property.

const sortedPeople = people.sort((a, b) => a.name > b.name ? 1 : (a.name === b.name) ? ((a.age > b.age) ? -1 : 1) : -1)

[
    {
        "name": "Adam",
        "age": 45,
        "created_at": "2020-03-11T00:00:00.000Z"
    },
    {
        "name": "Adam",
        "age": 34,
        "created_at": "2021-09-23T00:00:00.000Z"
    },
    {
        "name": "Eve",
        "age": 23,
        "created_at": "2020-02-03T00:00:00.000Z"
    },
    {
        "name": "Liam",
        "age": 29,
        "created_at": "2022-05-18T00:00:00.000Z"
    },
    {
        "name": "Peter",
        "age": 45,
        "created_at": "2019-06-08T00:00:00.000Z"
    }
]

Sorting by a date

Now if you want to sort the array by a date. You can still use the sort method:

const sortedPeopleByDate = people.sort((a, b) => b.created_at - a.created_at)

By taking the difference between b and a, if it’s positive then that means that B is larger so it will be first.

[
    {
        "name": "Liam",
        "age": 29,
        "created_at": "2022-05-18T00:00:00.000Z"
    },
    {
        "name": "Adam",
        "age": 34,
        "created_at": "2021-09-23T00:00:00.000Z"
    },
    {
        "name": "Adam",
        "age": 45,
        "created_at": "2020-03-11T00:00:00.000Z"
    },
    {
        "name": "Eve",
        "age": 23,
        "created_at": "2020-02-03T00:00:00.000Z"
    },
    {
        "name": "Peter",
        "age": 45,
        "created_at": "2019-06-08T00:00:00.000Z"
    }
]

Things to keep in mind about sort()

Although sort() returns a newly sorted array, it also modifies the original array in it’s place. If you want to prevent the original array from changing, you could sneak in a slice() to force javascript to create a copy of the array before sorting.

const sortedPeopleByAge = people.slice().sort((a, b) => a.age > b.age ? 1 : -1)

BooleanInput not saving in React-Admin

Sun, 26 Jun 2022 14:19:00 GMT

So I was having an issue in react-admin where the value of BooleanInput (e.g. a checkbox slider) was not saving to my backend.

Specifically when I left the input as unchecked when creating a new entry it wouldn’t pass the parameter of that checkbox (unchcked so false or 0) in the post body. I’m assuming that because this value had no value (null) then it didn’t see the need to send it.

To get around this, all I needed to do was to force the BooleanInput to be false by default, and then it was properly sending false to my backend if I left it unselected.

<BooleanInput source="is_proprietary" defaultValue={false} />

I’m hoping this helped someone out there.

Fixing Netlify form problems in Gatsby

Sat, 25 Jun 2022 18:49:00 GMT

After having a ton of issues getting Netlify’s form submission to work, I have some tips on how to get it working if you’re running into any trouble

Do not forget the method attribute in the form tag

I’ve wasted quite a few build minutes on Netlify on this small oversight.

<form name="message-me" method="POST" data-netlify="true">
</form>

Ensure that the hidden field is equal to the name of your form

Although the documentation claim that this value is automatically injected to forms when the netlify-bot detects the form it never added it for me - nor did it remove the data-netlify stuff as the attribute. I found that it just works better if you add it yourself:

<form name="my-contact-form"  method="POST" data-netlify="true">
    <input type="hidden" name="form-name" value="my-contact-form">
</form>

Do not have duplicate input names in your form

Your input elements must have unique names

<form name="my-contact-form"  method="POST" data-netlify="true">
    <input type="hidden" name="form-name" value="my-contact-form">
    <input type="text" name="name" placeholder="First Name" />
    <input type="text" name="name" placeholder="Last Name" />
</form>

Do not have a name on the submit button

<form name="my-contact-form"  method="POST" data-netlify="true">
    <input type="hidden" name="form-name" value="my-contact-form">
    <input type="text" name="name" placeholder="First Name" />
    <button name="submit" type="submit">Submit Form</button>
</form>

Just have no name on it at all:

<button type="submit">Submit Form</button>

Make sure your honey-pot exists

To prevent all sorts of spam, Netlify provides a honey-pot functionality that can reject entries from bots if they fillout a field that isn’t visible to humans. I’ve seen tutorials online that just have the name of the honey pot defined in the form but not have field exist in the form.

<form name="my-contact-form"  method="POST" data-netlify="true" netlify-honeypot="address">
    <p className="hidden d-hidden hide-me-somehow">
        <input name="address" placeholder="Do not fill me out">
    </p>
</form>

Also, don’t name your honey-pot “bot-field” name it something that your form doesn’t need but would sufficiently confuse a bot, like “address”, “last-name”, “zipcode” etc.

Set the action attribute correctly

Make sure that the action is set to the page that exists in gatsby (in the /pages folder). I also needed to set the page to be like:

/page-name/

with a slash at the end in order for gatsby to not complain about it not existing

<form name="contact-form" method="POST" action="/thank-you/" data-netlify="true">
    <input type="hidden" name="form-name" value="my-contact-form">
</form>

Sticky Sidebar in React

Thu, 23 Jun 2022 19:19:00 GMT

How to do it

Now you could use something like react-sticky to do something like this, but it’s so much easier to just define your sidebar using css.

#sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

You can change the top position to be any amount that would include your fixed header if you wanted to.

Fixing Polyglot.transformPhrase expects argument #1 to be string in react-admin

Thu, 23 Jun 2022 11:19:00 GMT

What does transformPhrase even mean?

So sometimes when I’m trying to save a form in react-admin I see this really annoying error:

Uncaught TypeError: Polyglot.transformPhrase expects argument #1 to be string

<SimpleForm>
    <ReferenceInput label="Organization" allowEmpty source="organization_id" reference="organizations">
        <SelectInput optionText="name"/>
    </ReferenceInput>
</SimpleForm>

The reason why this happens is because the translateChoice option on most inputs is set to true by default, so it tries to find non-existent keys in the I18nProvider.

The fix

So what you need to do is to set it to be false:

<ReferenceInput label="Organization" allowEmpty source="organization_id" reference="organizations">
    <SelectInput optionText="name" translateChoice={false} />
</ReferenceInput>

What if I want to turn of all translations for react-admin

Sometimes, this doesn’t fix the issue and you’ll need to recreate the I18nProvider yourself to allow missing keys for things it can’t find to translate:

import polyglotI18nProvider from "ra-i18n-polyglot"; // Install this package
import engMessages from "ra-language-english"; // Install this package

const App = () => {
    const i18nProvider = polyglotI18nProvider((locale) => engMessages, "en", {
        allowMissing: true,
        onMissingKey: (key, _, __) => key,
    });

    return (
        <Admin
            ...
            i18nProvider={i18nProvider}
        >
    )
}

Learn more about react-admin’s Internationalization

How to extend types in Typescript

Mon, 20 Jun 2022 14:00:03 GMT

When working with TypeScript, you’ll frequently encounter scenarios where you need to merge or enhance existing types to craft a new, specialized one. Fortunately, TypeScript makes this process straightforward and user-friendly.

To extend a type in Typescript, you have multiple options:

Extend a type using an intersection type

The intersection type helps combine existing types. The intersection type is defined by the & operator. You can extend a type with a type, and a type with an interface too.


type Animal = {
    name: string;
    sharpTeeth: boolean;
    breathesWater: boolean;
}

interface Creature {
    huntPrey: () => void;
}

// Extend with type
type PetAnimal = Animal & { nickname: string }

// Extend with interface
type PredatorAnimal = Animal & Creature;

Extend an interface using the extends keyword

We can extend interfaces in Typescript by using the extends keyword.

For example we can write:

type Profile = {
    name: string,
    email: string,
    created_at: string | Date,
    updated_at: string | Date
}

interface UserProfile extends Profile {
    user_id: number
}

Extend multiple interfaces

Also in TypeScript, you can expand the functionality of a class or type by implementing multiple interfaces. To achieve this, utilize the extends keyword and list the interfaces/types you want to incorporate, separating them with commas.

type BakedGood = {
    glutenFree: boolean;
    dairyFree: boolean;
}

type DessertGood = {
    frosted: boolean;
}

interface Pastry extends BakedGood, DessertGood {
    filling: string;
}

Extending Classes?

In Typescript you can even extend classes with an interface.

class Post {
    private title: string;
    private content: string;
}

interface FrontPagePost extends Post {
    getHeaderImage(): void;
}

Omit a type

You can employ the Omit utility type to override the types of one or more properties when extending another type.

type GroceryItem {
    id: string;
    name: string;
    price: number;
    refridgerated: boolean;
}

type BookstoreItem = Omit<GroceryItem, 'refridgerated'> & {
    section: string;
}

// Omit multiple items by using the pipe symbol |
type LibraryItem = Omit<GroceryItem, 'refridgerated' | 'price'> & {
    deweyDecimal: string;
}

The Omit utility type creates a fresh type by selecting properties from the given type and excluding the designated keys

Fixing Foundation 5’s Unrecognized Expression Syntax Error

Mon, 13 Oct 2014 22:12:03 GMT

I was working on a new marketplace theme in Magento, and I kept getting a peculiar javascript error message. The exact error message that you might receive could vary – but the one I got was:

Uncaught Error: Syntax error, unrecognized expression: [data-‘Times New Roman’-dropdown]

Huh? What? But it was the version of Jquery (2.1.1) that I was using that was causing this error. After some poking around (i.e. disabling everything and re-enabling every js file piece by piece), I discovered that the source of this issue is from Foundation’s internal namespace. If you set the namespace to be blank before you activate Foundation, the error goes away.

Foundation.global.namespace = '';
$(document).foundation();

By setting the Foundation’s global namespace to be blank, Foundation won’t attempt to set it. I’m not sure why I got this error but doing this allowed me to keep working and hopefully you too.

How to check if a jquery plugin is installed or available

Mon, 11 Jun 2012 22:12:03 GMT

Most Jquery plugins act a lot like functions. They are attached to the main Jquery object, so essentially all we have to do is check that the function exists and is defined.

if ($.pluginFunction) {
  // Function exists, do your plugin stuff here.
} else {
  // Plugin does not exist, use alternatives or do nothing in here.
}

Strip Whitespace on save with Aptana

Mon, 04 Jun 2012 22:12:03 GMT

So recently I had a coworker get slightly annoyed with me and my trailing whitespaces at the end of lines. I’m using Aptana and not anything crazy like vim to do my programming work, I don’t actually see the whitespace I’m leaving around.

However, they do show up in the git commits.

Because I don’t want to turn on those annoying characters that show my line breaks and whitespace I tried to find an automated solution. My first thought was that maybe Aptana would have an option to remove all of the whitespace before I save. Alas, no option exists (at least with Aptana 3).

Then I found an Eclipse plugin called AnyEdit that solved my problem. AnyEdit can be found at (http://andrei.gmxhome.de/anyedit/) .

Installing AnyEdit

So the first thing you’ll want to do is to load up Aptana, go to Help -> Install New Software. You’ll want to use http://andrei.gmxhome.de/eclipse/ as the “Work With:” URL.

Explore the drop downs and check the AnyEditTools plugin and then hit next. Go through the license agreement pages and Aptana will install the plugin. You’ll be prompted to restart Aptana, which I always recommend.

The best part, is that the strip whitespace feature is turned on by default across all of your projects. In the case where you don’t want to have that functionality, you can go to the properties of a project, and go to the AnyEdit Tools section and turn on Enable Project Specific Settings and then Remove Trailing Whitespace.

And .. it’s that easy. Enjoy having cleaner code and even cleaner git commits.

How to install Paperclip in Rails 3

Sat, 24 Sep 2011 22:12:03 GMT

Paperclip is a plugin/gem created by the talented folks at ThoughtBot. It will make using attachments and uploads in your rails application ridiculously easy to implement. Let’s get started!

Things you’ll need installed

Before we start there is only one thing that you will need to have installed on your system before we can proceed.

ImageMagik
ImageMagik is a software suite that is used to edit and create images. Paperclip uses it to resize and modify images. The easiest way to install this is to first make sure that you have MacPorts installed, and then running:

sudo port install ImageMagick

This is a massive library and it will take a little while to install.

Installing Paperclip

So you can install Paperclip as a plugin, or you can install it as a gem.

Install as a Gem
This is the recommended way of installing Paperclip. All you need to do is to add to your config/environment.rb

config.gem ‘paperclip’, :source => ’http://rubygems.org’

Then run:

rake gems:install

rake gems:unpack

Or you can add it directly to your Gemfile if you have Bundler:

source ’http://rubygems.org’ gem ‘paperclip’

**Install as a Plugin

To install it as a plugin you use:

ruby script/plugin install git://github.com/thoughtbot/paperclip.git

Using Paperclip in Your Application

Lets add the ‘has_attached_file’ attributes to the model we want to be able to attach files to:

class Author > ActiveRecord::Base
  has_attached_file :avatar,
    :styles => {
      :thumb => "75x75#",
      :small => "100x100#",
      :medium => "150x150>"
    }
end

Thankfully attached files do not need to have a separate model. Your attachments are essentially treated like another attribute. The image is not saved until your model is saved (if you desire, there are ways of forcing attachment creation/updates without model involvement – but that’s another tutorial)

Now that we have our model paperclip enabled we need to add some database columns to provide full support for it.

class AddAvatarToAuthor > ActiveRecord::Migration
  def self.up
    add_column :author, :avatar_file_name, :string
    add_column :author, :avatar_content_type, :string
    add_column :author, :avatar_file_size, :integer
  end
  def self.down
    remove_column :author, :avatar_file_name
    remove_column :author, :avatar_content_type
    remove_column :author, :avatar_file_size
  end
end

So the first part of the column name is the same as what we called our attachment attribute in our model. In this case that’s photo. Now to update our database we use:

rake db:migrate

Now that we have our database and our model taken care of, we can start working on our content. So in our view we can add a file field:

<% form_for :author, :html => {:multipart => true} do |f| %>
  <%= f.label :avatar %>
  <%= f.file_field :avatar %>
  <%= f.submit %>
<% end %>

Displaying Attachments

Now when you want to display your model’s attachments all you need to do is use:

<%= image_tag @author.avatar.url %>
<%= image_tag @author.avatar.url(:thumb) %>

Dimensions of file while uploading

To get the dimensions of the file while you’re uploading, you’ll have to add a validation to check the image dimensions.

validate :avatar_dimensions

Then somewhere else in your code you have a method to check the dimensions, and if not a suitable size then to throw an error.

def check_avatar_dimensions
  img_size = Paperclip::Geometry.from_file(avatar.to_file(:original))
  if dimensions.width > 100 || dimensions.height
    errors.add(:avatar, 'Size of avatar has a maximum size of 100x100')
  end
end

Fixing the error 0xe800400c or (-48) when syncing to Itunes

Sun, 21 Aug 2011 22:12:03 GMT

Imagine how disappointed I was when I had plugged in my brand new iPad 2 and only to realize that it simply cannot sync with my iTunes.

If you’re getting an error messages or weird stuff like:

Device Timed Out error message
Internal device error
An unknown error has occurred 0xe800400c or -48
Failing on particularly the song synchronization part – and claims that the songs cannot be found.
An unusual long time to sync – compared to other apple products – and then just to fail right at the end.
Occasionally after an error message, my 16GB iPad would show that it was only 4GB large. If you reconnect it, it goes back to normal.

I might have figured out how to fix this problem – at least for me. Your solution may be different of course. Here’s what I did on my Windows PC.

Install/upgrade iTunes to the latest version
Restore factory settings on the iPad
Disable firewall (so iTunes can talk to apple) and also disable your anti-virus software. Yes, Microsoft Security Essentials counts. You want to disable anything that can get between iTunes and the iPad.
Check to make sure that your BIOS is updated. My gigabyte P55 board was 7 versions out of date. This is at your own risk of course.
Reconnected the iPad to a different USB spot that is not the front ports, or a USB hub, or USB on a monitor. Use the back ones – the ones directly attached to the motherboard.

My guess is that the USB isn’t providing enough power to charge or perform syncs with the iPad. My motherboard had a bios update that actually resolves the underpowered USB issue. After praying for a successful patch and a reboot later my ipad was finally syncing.

I really, really hopes this helps and saves some people some time out there.

Installing Ruby on Rails 3 in Windows

Sun, 29 May 2011 22:12:03 GMT

So last week I got a little tired of having to reboot my computer to dual-boot in a linux environment so that I could work on Rails stuff. Then I decided to try using Rails in Windows. Here’s a step by step guide on how to install rails in Windows.

Install Ruby 1.9

To install ruby on our windows machine we will be using RubyInstaller. RubyInstaller is the easiest way to install ruby in windows. It includes the Ruby execution environment and documentation.

First download and install The RubyInstaller. Installing it to C:\Ruby192 is perfectly fine. I would not recommend installing Ruby to a place that has spaces in it, like the Program Files folder.

From here you can also download the DevKit as well. It allows you to have RubyGems build C-based gems. If you decide to get the DevKit, just install it to the C:\Ruby192\devkit folder for now.

So as you’re installing the RubyInstaller, Be sure to select, “Add Ruby Executables to your Path”

Now let’s verify that Ruby has been correctly installed. Get to your command prompt (Via Start -> Run -> type in cmd). Then type in:

ruby -v

Then it should reply with something similar to:

ruby 1.9.2p180 (2011-02-18) [i386-mingw32]

Now with your command prompt still open, let’s check to see that RubyGems was installed as well:

gem -v

Hey that wasn’t so difficult was it? I told you that RubyInstaller was easy 🙂

Install SqlLite3

So when running rails we would like to have a database to start off with without having to set up a local database connection. And of course, Windows does not support SqlLite right out of the box. Thus we will have to get it ourselves.

Go to the SQLite download page and find the precompiled binaries for windows section and download the sqlite-dll-win32-x86-3070603.zip

After unzipping that file, you should end up with the files sqlite3.dll and sqlite3.def. Copy both of those files into the C:\Ruby192\bin directory.

Also, while you’re still at the SqlLite download page you should pick up the shell file (sqlite-shell-win32-x86-3070603.zip) as well. The command line shell is useful for looking around in your sqlite3 databases. Copy the executable in the zip also to the C:\Ruby192\bin directory. You can verify that this is installed by typing:

sqllite3 -version

Now we should install the ruby bindings to SQLite3

gem install sqlite3

Install Rails 3

Rails is distributed by RubyGems. When you install Ruby, the RubyGems system is also installed. This makes it really easy to install Rails.

Install Rails by typing:

gem install rails

This should take a few minutes because it is installing several of the Rails dependencies (ActiveRecord, ActionPack, ActiveSupport, etc).

When that is done installing, verify that the correct version of Rails was installed by typing

rails -v

And it should respond with 3.0.7 or higher

Creating a Rails application

Go into your development directory and type in:

rails new project_name

Replace the project_name with the name of your new application. You should see it create a bunch of new directories and files

Now we need to install the gems we are going to use with this project. You can install the gems using:

bundle install

Once those gems are installed, we need to create the sqlite3 database in your project directory by typing in:

rake db:migrate

Once that is done, start your rails server by using the commands

rails server

And then navigate to http://localhost:3000/ to view your application. It should look something similar to this:

Now get out there and start working on your web projects!

How to read remote files using PHP

Wed, 08 Dec 2010 22:12:03 GMT

When I was implementing pingback functionality in my custom blogging software, I needed to read files from a remote server.

As long as allow_url_fopen is enabled in your php.ini configuration you can use HTTP and FTP urls with a majority of the functions that use a filename as a parameter.

I found that there are 3 ways to read remote files using PHP.

fopen

if ($filepointer = fopen("http://banditrevolvers.com", "r")) {
     $site_content = "";
 
     //While we still have content to read, append it
     //1k at a time
     while ($line = fread($filepointer, 1024) {
          $site_content .= $line;
     }
 
} else {
     //Error occured while trying to read the url
}
 
fclose($filepointer);

fgets and fread

if ($filehandle = fopen("http://banditrevolvers.com", 'r') {
 
     while(!feof($filehandle)) {
          $readline = fgets($filehandle, 1024);
          if (eregi("<title>(.*)</title>", $readline, $output) {
               $title = $output[1];
               break;
          }
     }
} else {
     //Error occured while trying to read the url
}
 
echo "Title of the page is: " . $title;
 
fclose($filehandle);

Wait what’s the difference between fgets and fread?

Glad you noticed that. The truth is that fread is the more preferable function to use when reading (or in this case streaming) data from a remote file. The reason is because the fgets function reads a line at a time. For example, if you had a 2000 line file that was only 35k in size, it would loop 2000 times with fgets. However it would only loop 35 times with fread (assuming a 1k buffer).

Then again, if you need to read a file one line at a time fgets is the function you’ll need.

File_get_contents

This function will return the contents of a file in a string. To use it just specify a URL as a parameter. Be sure to check the return value to see if it was successful or not.

$content = file_get_contents("http://jelaniharris.com");
 
if ($content !== false) {
     //Do something with the content
} else {
     //An error occurred
}

CURL

Not all web hosts have the CURL library in their installation. Thus we have to check to see if the function exists before we attempt to use it.

if (function_exists('curl_init')) {
     //Initialize a new resource for curl
     $ch = curl_init();
 
     //Set the url the retrieve
     curl_setopt($ch, CURLOPT_URL, 'http://banditrevolvers.com');
 
     //Return the value instead of outputting to the browser
     curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
 
     $contents = curl_exec($ch);
     curl_close($ch);
 
     if ($contents) {
          //Do stuff with the contents
     } else {
          //Show error message
     }
 
}

Changing the pointer into the hand cursor in AS3

Wed, 01 Dec 2010 14:19:00 GMT

One of the problems that I ran into while migrating from Actionscript 2 (AS2) to ActionScript 3 (AS3) was the fact that not only was setting a mouse event of a MovieClip different, so does how the mouse cursor acts.

In AS2, setting the onPress event for a MovieClip would automatically cause the cursor to switch the hand whenever you hovered over the element. However in AS3 I discovered that in order to get the same functionality it has to be done manually to get the same effect:

//These are properties of the MovieClip class
targetMc.buttonMode = true;
targetMc.useHandCursor = true;

Upon discovering this bit of code, I noticed that I had already created more than a dozen of clickable instances that could use this code and not all of them had classes for them. I had searched for some kind of global variable that I could set to see if I could get this working with all of them the easy way. Alas, I came up with nothing. So instead I decided to create a base class to implement this functionality for me.

import flash.display.MovieClip
 
package com.jelaniharris {
     class ButtonMovieClip extends MovieClip {
          //Override the default constructor and make this movieclip indicate it's a button to the user
          public function ButtonMovieClip (): void {
               this.buttonMode = true;
               this.useHandCursor = true;
          }
     }
}

Then all I needed to do was to go to my library and set the Base Class of all of my button-like elements to the ButtonMovieClip class.

I hoped this helped someone out there.

Using Jquery to disable the enter key

Fri, 16 Jul 2010 22:12:03 GMT

There are times that you do not want a form to automatically submit when a user hits the enter key. Or if you want to do some validation via javascript before you allow the submit to go through.

//Bind this keypress function to all of the input tags
$("input").keypress(function (evt) {
//Deterime where our character code is coming from within the event
var charCode = evt.charCode || evt.keyCode;
if (charCode  == 13) { //Enter key's keycode
return false;
}
});

By returning false in the keypress function it tells the browser not to allow the enter key event.

Removing empty elements from an array

Sun, 04 Apr 2010 22:12:03 GMT

When dealing with tag inputs from users, I find myself having to make sure they they don’t enter in any blank or empty tags. Then I realized that I needed to find out how to remove undesirable elements not only from the Php side, but also from the Javascript side as well. Thus, here are some functions that may help some other people out if they’re searching for similar functionality.

In PHP

    foreach ($my_array as $key =&gt; $value) {
      //We check to make sure that the value is either null or just an empty string
      if (is_null($value) || $value=="") {
        unset($my_array[$key]);
      }
    }

An easier way to clean arrays is to use php’s array_filter function without a callback parameter. By default that function is set to remove elements that contain a false (or a 0), null or a “”. I mean seriously, look at how much cleaner it is:

   //This prunes out 'false', '0', 'null' or ''
   $my_array = array_filter($my_array);

In Javascript

We can mimic the functionality of Php’s array_filter in Javascript by using the Array.filter function.

   var my_array = [1,2,3,'4','', 0, null, 'false'];
   function emptyElement(element) {
	//Removes nulls, zeros (also falses), text version of false, and blank element
	if (element == null || element == 0 || element.toString().toLowerCase() == 'false' || element == '') {
		return false;
		else return true;
	}
 
	var my_array = [0,'false',1,null, 2,'',3,'4',false];
	my_array = my_array.filter(emptyElement);
   }

Then my_array will include 1,2,3,4.

I hope this was somewhat useful.

Case-insensitive replaceAll in Java

Thu, 10 Sep 2009 22:12:03 GMT

The replaceAll function in the java.lang.String class replaces each substring found in that matches the regular expression to replace.

String sentence = "The sly brown fox jumped over the lazy fox.";
String result = sentence.replaceAll("fox", "doggie");
System.out.println("Input: " + sentence);
System.out.println("Output: " + result);

Would output:

Input: The sly brown fox jumped over the lazy fox. Output: The sly brown doggie jumped over the lazy doggie.

However there are cases where we want to replaceall substrings and ignore the case, or make it case insensitive.

String sentence = "The sly brown Fox jumped over the lazy foX.";
String result = sentence.replaceAll("fox", "dog");
System.out.println("Input: " + sentence);
System.out.println("Output: " + result);

Input: The sly brown Fox jumped over the lazy foX. Output: The sly brown Fox jumped over the lazy foX.

To create the case sensitive version of replaceAll we do not need to create a new wrapper function or create a utility class somewhere. All we need to do is prepend the Case-insensitve pattern modifier (?i) before our regex to indicate that we don’t care about the case sensitivity of the regex.

String sentence = "The sly brown Fox jumped over the lazy foX.";
String result = sentence.replaceAll("(?i)fox", "dog");
System.out.println("Input: " + sentence);
System.out.println("Output: " + result);

Input: The sly brown Fox jumped over the lazy foX. Output: The sly brown dog jumped over the lazy dog.

No more updates to Google Notebook

Thu, 26 Feb 2009 22:12:03 GMT

One of the only Google app (apart from Gmail) that I use the most Google Notebook will have no more updates. Before I signed up to Google I used to keep all of the websites that I thought were useful in my bookmarks and that became really messy really quickly. Also with the useful firefox extension I can now just right click and add to notebook if I ever run across a website that I want to return to later.

Google notebook isn’t perfect. I just wish they would continue making it a better product. But now that I think about it, Google is an company that makes most of it’s revenue selling advertisements online (that I hardly see due to AdBlock) and I don’t see how they could’ve made their Notebook app a profitable endeavor. I know that I wouldn’t pay for a “pro” version, and that their ads would be GreaseMonkey‘d out or plain ignored – all I want is a list of bookmarks not solicitations!

Now I’m going to search online for other alternatives to replace and to transfer all of my bookmarks to. I’m looking at delicious right now – I just don’t like sharing my bookmarks with the world too much. But maybe I’ll let it go once I get my lifestream properly set up on here.

Remove Anchors from a Url in Javascript

Fri, 08 Aug 2008 22:12:03 GMT

Here is something useful that I discovered in my programming for my personal websites. I needed to strip out the anchor portion of a link and leave the rest of the url intact. For example I wanted:

http://jelaniharris.com/I-love-apple-pies#comments

To look like:

http://jelaniharris.com/I-love-apple-pies

Splitting the url (string split)

	//Grab our current Url
	var url = window.location.toString();
	//Remove anchor from url using the split
	url = url.split(“#”)[0];

It doesn’t get any easier than that. What this code does is grab the URL from the current window, and then splits the string where a ‘#’ is. Whether or not if the ‘#’ exists in the string, it’ll truncates the string up to the ‘#’ or return the whole url.

Another way (Regex)

You could always use regex to replace the text AFTER the anchor with an empty string

var url = window.location.href.replace(/#.*/, "");

Adding a delay to JQuery Functions

Mon, 14 Jul 2008 22:12:03 GMT

Recently I was working on a few functions that I didn’t want to have activated immediately after hovered over a div. I neededthe functions to activate after a half a second of hovering by the user. To do this I created this this piece of code.

var display_timeout = 0;
$(".orb_space").hover(function () {
 
		if(display_timeout != 0) {
				clearTimeout(display_timeout);
		}
 
                // save a reference to 'this' so we can use it in timeout function
		var this_element = this;
                display_timeout = setTimeout(function() {
				display_timeout = 0;
				// perform things with this_element here buy referencing it like $(this_element)
				if (!$(this_element).hasClass('magic')) {
					performRollinMagic();
				}
			}, 500);
 
	},
		function () {
			if(display_timeout != 0) {
				clearTimeout(display_timeout);
			}
			performRolloutStuff();
		}
);

Let’s go through line by line to see what’s happening here.

Lines 2: The JQuery hover function has two parameters. The first parameter is for the function to call when the user hovers onto the element, and the second one is for when the user hovers out. Lines 4-16 consist of the first function and lines 19-24 consist of the second.

Lines 4-6: So if we happen to flash our mouse over the element very fast twice, this will make sure that we only have one timeout function happening.

Line 9: When we in the setTimeout function we need to remember a reference to our current element so that we don’t have to do some tricky DOM navigation to get the hover activated element with the setTimeout event. It’s just easier to just make a variable to remember the element.

Lines 11-15: First we reset the display_timeout variable, and then we can perform our necessary hover actions in this setTimeout function. The 500 indicates that we want this function to occur after 500ms.

Lines 20-23: This looks very familiar doesn’t it? It’s the same thing from lines 4-6. This is so that if the user rolls out of the hover element, the timer countdown will immediately stop and the hoverin functions will not occur.

First Post!

Thu, 08 May 2008 22:12:03 GMT

Well, this is the start to my blog. Hopefully I’ll post here often, but hopefully with something useful each time. I just don’t want to have one of those blogs where you just post because you haven’t posted in awhile. That always leads to apologizing at the beginning of every new post you make.

So, I’m just not going to apologize. I’ll post when I feel like it.