allenjd3

array_walk adventures

2024-11-09T16:00:00+00:00

I noticed something weird today that I thought I’d share. Before you get too excited know that I only am supplying the questions this time. I don’t have a great answer to why this thing is happening.

So I’ve been on a quest to learn more php functions lately and I came across array_walk. When I read the description I immediately thought, “Oh it allows you to keep the original keys? This must be what laravel’s map function uses. I was wrong though. Here is Laravel’s map function.

    /**
     * Run a map over each of the items in the array.
     *
     * @param  array  $array
     * @param  callable  $callback
     * @return array
     */
    public static function map(array $array, callable $callback)
    {
        $keys = array_keys($array);

        try {
            $items = array_map($callback, $array, $keys);
        } catch (ArgumentCountError) {
            $items = array_map($callback, $array);
        }

        return array_combine($keys, $items);
    }

So you see it runs array_keys to get the keys, does array_map with the callback and then does an array_combine at the end. Immediately I thought, well array_walk would be way more efficient here! I did a quick refactor and got this-

    /**
     * Run a map over each of the items in the array.
     *
     * @param  array  $array
     * @param  callable  $callback
     * @return array
     */
    public static function map(array $array, callable $callback)
    {
        try {
            array_walk(
              $array,
              function (&$val, $key) use ($callback) {
                $val = $callback($val, $key);
              },
            );
        } catch (ArgumentCountError) {
            array_walk(
              $array,
              function (&$val) use ($callback) {
                $val = $callback($val);
              },
            );
        }

        return $array;
    }

Believe it or not this works! array_walk works a little differently in that you pass the value of each element through as a pointer to the original value and then you modify the original array as you go. So instead of returning values that update the value in a new array, you just set the value that is pointing at the value in the array to update the original array. In my mind this should be faster. There is one less iteration through the loop (no combine step) but in my experience it was slightly slower.

I ran the laravel test suite 2 or 3 times and consistently got 1min 22 sec and ~200 milliseconds. When I ran with array_walk I got 1min 22sec and ~900 milliseconds. I know we are splitting hairs here but I’m really curious why array_walk is slower when its only iterating through the array once. And then the follow up question is would there ever be a threshold where array_walk would start to be faster?

Using Clerk.com with a laravel backend part 2

2024-08-03T23:00:00+00:00

In this video we are going to be adding on a laravel backend and decoding the jwt that we passed from our frontend in the previous video.

Using Clerk.com with a laravel backend part 1

2024-08-02T23:00:00+00:00

In this video I’m going to show you how to use laravel as a backend on a frontend set up with Clerk authentication. We will be using Remix on the frontend. We will set up clerk auth, then start the process of packaging up the jwt to send to our Laravel backend. In part 2 we will discuss how you can decode the jwt, verify it and use Laravel in a stateless manner.

Shadcn/ui Laravel and Server Side Form Validation

2024-07-08T23:00:00+00:00

This is the second part of my videos on integrating the Shadcn/ui library with laravel. In this video I go into how you can pass validation errors from the server into your Shadcn form component.

Enjoy!

Background Images

2024-07-06T19:00:00+00:00

Its pretty common to see a hero section on a landing page. These usually have an image in the background, some kind of overlay and then some title text and a button of some kind. For some reason, I feel like I always have to rediscover the best way to place that background image and overlay so I decided I’m just going to write it down.

Nextjs has an Image component that allows you to take images and basically convert them on the fly. Its really handy but mostly only works for standard images and not background images. You can use the Image component as a background image though if you do something like this-

<div className="relative w-full overflow-hidden h-[100svh] md:h-[70svh]">
    <Image
        src='https://example.com/images/myimage.webp'
        alt="Amazing Image"
        layout="fill"
        objectFit="cover"
        className="w-full h-full object-top"
    />
    <div className="absolute inset-0 bg-gray-800 opacity-60"></div>
    <div className="absolute inset-0 flex flex-col w-4/5 sm:w-3/5 justify-center mx-auto text-white space-y-8">
        <h1 className="text-5xl lg:text-7xl font-bold uppercase">
            Join my amazing ball point pen club
        </h1>
        <h3 className="text-2xl uppercase font-roboto font-thin">
            Never commit another sub optimal pen stroke
        </h3>
        <div className="flex items-center justify-center">
            <button className="bg-black rounded-full px-8 py-4 text-xl uppercase font-roboto">Join Now
            </button>
        </div>
    </div>
</div>

So the image tag there will create the background image. The absolutely positioned div below it will provide the overlay and last div has the content. Why not just use a background image? Background images can’t take advantage of the next/image component and so won’t be automatically optimized for you.

What if I’m not using nextjs? You can still use this technique although a background image might work just as well. Here is the html that component generates for you. You could apply this same technique to any image tag

<img
  alt="tbh"
  loading="lazy"
  decoding="async"
  data-nimg="fill"
  class="w-full h-full object-top"
  style="position: absolute; height: 100%; width: 100%; inset: 0px; color: transparent; object-fit: cover;"
  sizes="100vw"
  ...
>

Shadcn/ui Laravel and Client Side Form Validation

2024-06-22T19:00:00+00:00

Here is another video I made where I talk about the shadcn/ui library, how you can use it with laravel and I go into more details about setting up form validation on the client.

Enjoy!

Rails with Laravel Breeze Next

2023-09-25T19:00:00+00:00

I did something weird. You probably shouldn’t use this in production but it was fun: I made a video where I used laravel’s breeze and hooked it to a Rails backend.

Here is the video- Enjoy!

How to install inertiajs with Rails 7 and react

2023-07-06T19:00:00+00:00

Rails 7 introduced some new ways of interacting with javascript. It introduced importmaps which are a new way of pinning your js files to your project. It also made turbo the default for frontend development which mostly got rid of the need to have frontend javascript. One thing that I miss about rails 6 however was the quick and easy integration with tools like inertiajs. This article goes into the new way to install it so I don’t forget in the future.

Small disclaimer- most of the content of this article has been pieced together from the docs and other blogs. I didn’t find a current blog that had all of the pieces in the correct order however to end up with a working version of rails and react. Thats what I hope to accomplish here.

Install Rails and skip dependencies

rails new exampleapp --skip-javascript --skip-asset-pipeline

Install inertia rails and vite rails

bundle add inertia_rails
bundle add vite_rails

Execute the vite installer

bundle exec vite install

Go to /app/views/layouts/application.html.erb and change the following-
Remove <%#= stylesheet_link_tag "application" %> (We will add the styles in our javascript)
Change <%= vite_javascript_tag 'application' %> to <%= vite_javascript_tag 'application.jsx' %>
Install vite-plugin-rails and @vitejs/plugin-react

yarn add -D vite-plugin-rails @vitejs/plugin-react react react-dom @inertiajs/react

Make sure your vite.config.ts looks like the following-

import {defineConfig} from 'vite'
import react from '@vitejs/plugin-react'
import ViteRails from 'vite-plugin-rails'

export default defineConfig({
  plugins: [
    react(),
    ViteRails(),
  ],
})

In app/frontend add two new folders- css and pages

In pages we can add our first test file- home.jsx with the following contents

export default function home() {
  return (
    <div className="mt-16 mx-auto max-w-5xl">
      <h1 className="text-3xl">Hello home</h1>
    </div>
  );
}

In app/frontend/entrypoints you should already have a file called application.js change the name to application.jsx and add the following

import {createInertiaApp} from '@inertiajs/react'
import {createRoot} from 'react-dom/client'
import '../css/styles.css' // We are going to add this in step 10

createInertiaApp({
  resolve: name => {
    const pages = import.meta.glob('../pages/**/*.jsx', {eager: true})
    return pages[`../pages/${name}.jsx`]
  },
  setup({el, App, props}) {
    createRoot(el).render(<App {...props} />)
  },
})

Generate a controller using rails’s default generator

rails g controller home index

You can delete the app/views/home/index.html.erb file that is created

In the home_controller, change it as follows-

class HomeController < ApplicationController
  def index
    render inertia: 'home'
  end
end

Then add your route to the routes file-

Rails.application.routes.draw do
  root "home#index"
end

Now we can install tailwindcss-

yarn add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configure your template paths in the generated tailwind.config.js as follows

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/views/**/*.html.erb",
    "./app/frontend/**/*.{js,ts,jsx,tsx,css}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add the styles.css file to app/frontend/css and paste the following

@tailwind base;
@tailwind components;
@tailwind utilities;

Start up your server and see if it works!

foreman start -f Procfile.dev

You should now have a working rails inertiajs react setup. My recommendation is to install rspec and follow along in the docs to use the built in testing support. Enjoy!

Initial setup for Vue3 and Spatie Data

2022-09-25T19:00:00+00:00

So I decided to try something new just to keep myself sharp. I decided to manually install inertia and configure it for use with vue3 and vite. I hit a few small snags but I’m going to document them all here to hopefully not run into the same issues again.

Jump to Solution Already…

Install Inertia

The initial installation was exactly the way the docs presented it. I started to run into some issues when I got to the client side installation.

This is what the docs show you for the client side installation.

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/inertia-vue3'

createInertiaApp({
  resolve: name => require(`./Pages/${name}`),
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
})

The first thing you may notice is that vite does not allow you to use require directly. If you switch to import it would look something like this-

resolve: name => import(`./Pages/${name}`),

Easy enough- but if you run this you will get a warning in the vite compiler

  createInertiaApp({
      resolve: name => import(`./Pages/${name}`),
                              ^
      setup({ el, App, props, plugin }) {
          createApp({ render: () => h(App, props) })
The above dynamic import cannot be analyzed by Vite.

First thing I tried was to add .vue to the end of the import. Something like this-

resolve: name => import(`./Pages/${name}.vue`),

But you will find that vue files placed in subdirectories will not resolve. For instance, if I wanted to have a file in Pages/books/Index.vue then it would not be able to find this file.

So what is the solution? Globs…

TLDR use Glob imports

First you need a function to parse out the name into the directory and file name. Something like this-

/**
 * Imports the given page component from the page record.
 */
function resolvePageComponent(name, pages) {
  for (const path in pages) {
    if (path.endsWith(`${name.replace('.', '/')}.vue`)) {
      return typeof pages[path] === 'function'
        ? pages[path]()
        : pages[path]
    }
  }

  throw new Error(`Page not found: ${name}`)
}

Then you need to use this function to resolve your component names.

resolve: (name) => resolvePageComponent(name, import.meta.glob('./Pages/**/*.vue')),

All together it will look like this-

function resolvePageComponent(name, pages) {
  for (const path in pages) {
    if (path.endsWith(`${name.replace('.', '/')}.vue`)) {
      return typeof pages[path] === 'function'
        ? pages[path]()
        : pages[path]
    }
  }

  throw new Error(`Page not found: ${name}`)
}

createInertiaApp({
  resolve: (name) => resolvePageComponent(name, import.meta.glob('./Pages/**/*.vue')),
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
})

PS- Credit goes to laravel-vite for the answer to this problem!

But wait there’s more!

I also was attempting to get Laravel Data up and running so that I could use the Typescript transformer and import my types. (What can I say, I pay close attention to the Laracons…)

First of all there are two packages you will need in order to use the Typescript functionality which is something I wasn’t aware of coming into it. You will need

composer require spatie/laravel-data
&&
composer require spatie/typescript-transformer

After publishing your config for the typescript-transformer you will add the DataTypeScriptTransformer to the transformers in typescript-transformer.php like so-

    'transformers' => [
      ...
      \Spatie\LaravelData\Support\TypeScriptTransformer\DataTypeScriptTransformer::class,
    ],

Now when you add the #[TypeScript] attribute to your Data object you will be able to generate your typescript files by running php artisan typescript:transform.

Finally and crucially, you will need to add this new type file to your vite.config.js file like so

    compileroptions: {
        types: [
            ...
            "./resources/types/generated",
        ]
    }

Thats it! Now you should be able to use your type in your Vue3 files like so- App.Data.Books.BooksData

Laravel Invalid Parameter Number with whereIn()

2022-09-22T19:40:00+00:00

I’m posting this so that I remember in a few years when this happens again…

We had a very interesting error that simply said- SQLSTATE[HY093]: Invalid parameter number. The query that it showed looked fine and so I spent a significant amount of time scratching my head wondering if I was losing my marbles.

Here was the query-

select * from posts where uuid in (random-uuid-here)

Looks fine right? Well turns out we were passing an array of an array into this whereIn- something that looked similar to this-

[
  [
    'uuid_1',
    'uuid_2',
    'uuid_3',
  ]
]

And this generated a query that looked like this-

select * from posts where uuid in (?)

It was attempting to bind each uuid to that one parameter so it gave the invalid parameter number error. What we needed was something closer to this-

select * from posts where uuid in (?, ?, ?)

The solution was to flatten the array down to a single depth so whereIn would know to bind the correct number of parameters.

Future me- if you ever read this, make sure you pass flat arrays into whereIn. Pretty please?

WP Mail SMTP Goodness

2022-03-30T11:40:00+00:00

I recently migrated a wordpress site that I manage to trellis. Trellis is a deployment tool which makes deploying wordpress sites a breeze. Its fairly opinionated about how everything works however so I wasn’t sure how it would go. Here are my initial thoughts-

Wow it was easy to set up!

Rebuilding the site which used to take an entire afternoon took me about 30 minutes with trellis. Basically all I had was a fresh ubuntu instance on Digital Ocean, my sql dump file from my previous page and the contents of the wp contents folder. Trellis set up everything really quickly and its more secure than I could ever make it.

Hmm- something is weird here…

I immediately started noticing odd issues with wordfence. I uninstalled the plugin and reinstalled- all started working again. Then I started to get fatal errors blamed on yoast seo. I disabled the plugin and everything was working again.

Yoast didn’t like wp smtp

In my efforts to figure out why yoast wasn’t working correctly I discovered that if I disabled WP SMTP then yoast would stop killing my post editing. Then I noticed something odd. Apparently when I migrated the site, WP SMTP didn’t have all of its database tables that it needed. My simple solution: uninstall and reinstall. I was hoping for a quick solution like with wordfence but in this case, reinstalling did nothing.

Long story short, I found a setting that allowed me to delete all data from WP SMTP from the database. It was in the miscellaneous tab of the WP SMTP settings.

After I checked that box- I just uninstalled and reinstalled the plugin. The only downside was having to find my mailgun key again but that wasn’t a huge deal. WP SMTP installed all its necessary tables and we are back in business

Overall, I love trellis. It is ten times quicker to make changes to the site and if something were to happen to my current site it wouldn’t take long to completely rebuild it elsewhere. I give it two thumbs and two big toes up.

Thinking in React... in Livewire

2021-09-13T20:00:00+00:00

So I’ve talked a little about Hotwire in the past but for Laravel there is a much more ubiquitous “wire” around- Livewire. Hotwire is very much a “build the way you always build and then sprinkle in the magic” tool. Livewire is more of a thought switch so I struggled with it at first. I think I’ve found the correct balance for it though and it comes from an article I read in the React Docs of all places: Thinking in React

Livewire is a bit of a mental switch. Its more react-like in the way it handles data. The craziest thing to me is that you don’t need controllers anymore. All the business logic can be organized into components. You can even route to individual components.

Route::get('/post', ShowPosts::class);

The key to thinking livewire is to break your component into smaller components like in the ‘thinking in react’ article linked above. This helps to answer the questions-

What do I test?
Where do I query the data?
Do I pass it as props or do I handle it in the component itself?
Where do I change or act on the data?

Without answering these questions, you can get some really odd spaghetti code. You can be querying and modifying data in a sub component that shouldn’t have that ability. It makes it harder to tell which components are mutating state and which are getting their own state. Start thinking in react in livewire. Seriously- helps a lot.

Old is New Again

2021-01-13T00:02:00+00:00

You may have heard about the latest and greatest new piece of front-end tech : Hotwire. Hotwire literally stands for HTML over the wire. If you don’t have a clue about what I’m talking about, check out this site and then make your way back here. hotwire.dev

So now that you understand the basics I want to provide you with a couple of the small things that weren’t obvious to me from the docks and they all relate to turbo-streams.

Hotwire is not restricted to rails but rails has a couple of neat adaptors for it. You can install hotwire-rails, turbo-rails and or stimulus-rails. Hotwire-rails is just turbo-rails and stimulus rails bundled together.
You need the redis adaptor installed in order to install turbo-rails. This is used if you use turbo-streams and connect it to a websocket. If you need the redis gem enabled that means one other thing- you need redis installed as well. I had a lot of luck using just plain docker for this. If you aren’t super familiar with using redis in rails (which I wasn’t) the config file that has your redis connection information is in cable.yml

Turbo Streams need some Model magic Make sure you put the following for an example model called Post if you want to broadcast your changes.

class Post < ApplicationRecord
 after_create_commit { broadcast_append_to "posts"}
 after_update_commit { broadcast_replace_to "posts"}
 after_destroy_commit { broadcast_remove_to "posts"}
end

You need to wrap your data that will be appended. Its important to wrap it in something like this-
```
<%= turbo_stream_from "posts" %>
  <%= turbo_frame_tag "posts" %>
 #important stuff in here
  <% end %>
<% end %>
```
Then within that frame tag each individual posts need to be wrapped in another frame tag with the dom_id helper function like below-
```
<%= turbo_frame_tag dom_id(post) %>
  #individual post
<% end %>
```
Doing all of the above will allow you to add stuff to your list, remove things and updated things.
Streams need even more help if you want to broadcast errors. The above will have you creating updating and destroying as long as you don’t have any validation. Of course, you will always need some sort of validation so that really isn’t feasible. In order to get your errors sent back and your turbo frame updated, you need something like the following in your controller-
```
 respond_to do |format|
   if @post.save
     format.html { redirect_to posts_path, notice: 'Post was successfully created.' }
     format.json { render :show, status: :created, location: @post }
   else
     format.turbo_stream {render turbo_stream: turbo_stream.replace(@post, partial: "posts/form", locals: {post: @post})}
     format.html { render :new }
     format.json { render json: @post.errors, status: :unprocessable_entity }
   end
 end
```
The important bit here is the new format- turbo_stream. This allows you to pass back something from your controller that will replace your original frame.

Anyway, I hope that is all helpful information. Hotwire seems like its really going to help speed up development!

Carrots

2020-06-23T00:08:00+00:00

Coding can be an art form. Many folks get all wrapped up in the elegance of well designed code. It doesn’t take long when diving into a new piece of code to see whether it was well designed and well thought out, or if I coded it. (Only kidding- kind of…) Laravel’s tagline is “The PHP Framework for Web Artisans.” It’s aptly named, if a little pretentious. You can create really beautiful code with laravel. You can create beautiful code with Ruby on Rails, or nodejs. And then there is wordpress.

Don’t get me wrong. Wordpress is the engine behind the web. It drives a large portion of blogs, businesses and ecommerce solutions. It does it quite well also and is fairly user-friendly in the admin panel. The code is ugly though…

Case in point-

<?php 
if ( have_posts() ) : 
while ( have_posts() ) : the_post(); 
    // Display post content
endwhile; 
endif; 
?>

The dreaded “loop”. You have to put this bad boy everywhere. And what is with all of these functions? I guess PHP didn’t have classes when wordpress was built? No wait, I know there were classes because of the “walkers.” No we aren’t talking about the AMC TV show The Walking Dead. These are classes that you have to extend in order to make changes to the html output of navigation or comments. Then there are the inline image styles… Makes me shudder to think about it.

This is the reason I started looking for another solution. That’s when I found roots/sage. This is a theme that uses a lot of the things I love about Laravel and incorporates them into Wordpress development. It lets you do things like this-

@extends('layouts.base')

@section('content')
  @while(have_posts())
  {!! the_post() !!}
  @include('partials/content-single')
@endwhile
@endsection

Ahhh, that’s better… I happily installed it and typed yarn start and wah wah waaahhh. It failed! It tried to build out node-sass but was unable to complete the task. (I’m using version 9 of sage btw, this is fixed in version 10) So I messed around for a long time trying to figure out the issue. I looked at my version of Node. (It was a little old so I updated). Still no-go. I upgraded my version of windows build tools. Nada. I was about to give up until I dug into the node-sass github readme and noticed this little gem-

Supported Nodejs Versions-

Node 14 	4.14+ 	83
Node 13 	4.13+ 	79
Node 12 	4.12+ 	72
Node 11 	4.10+ 	67
Node 10 	4.9+ 	64
Node 8 	4.5.3+ 	57

In the package.json- version 9 is set to ~4.9 and I had node version 14… Tah Dah! I changed the version from ~4.9 to ^4.9 and boom- sweet roots/sage magic commenced. From then on, I danced around in beautiful blade templates and went to sleep dreaming of partials and layout files.

;TLDR If you are trying roots/sage and come across an error about node-sass, you likely aren’t using a supported version of node.

New Blog. Again.

2020-05-25T00:53:08+00:00

So I’m making a new blog, again. I know, I make a new blog more than flies on a dog turd. So why am I starting again you may ask? Its simple. I’m bored. I also just want the freedom to write without having to worry about whether my theme is rendering it properly. That’s where jekyll comes in.

Jekyll is pretty well known in github land. Its the default static site builder for github. I say this only having learned about this today. Yes, I had heard about jekyll but I never put two and two together. I started out making my github static sites using jigsaw which is a php static site builder. There’s nothing wrong with jigsaw by the way. I’m just someone thats always learning about the next thing. Or the last thing depending on when I learn about the existance of something. What were we talking about again?

Anyways,

I thought, I wonder if ruby has a jigsaw? So I google search ruby static site generator and see jekyll. Then all my memory bells start jingling and I remember all the times I’ve heard about jekyll in the past and thought, what'ev. Instead, today I thought- ev and gave it a shot.

Jekyll is pretty cool. The theming seems a bit fiddly but its probably because it looks like they recently changed how you can install themes. Now your theme is just a gem file. This makes it pretty easy to install new themes and less easy to make new themes. Which is the real reason I didn’t change my theme from the default.

To be fair, I did start changing it and thought,

naw that default theme is pretty slick and ain’t nobody got time for that.

I wrote this blog entirely as it came to my brain so sorry ‘bout that. I’m not going to do one of those how-to things today. Here are the docs if you want to read them- Jekyll Docs. Until next time.