upnorthal

Member Since 5 Years Ago

Sheffield

Experience Points
40,820
Total
Experience

4,180 experience to go until the next level!

In case you were wondering, you earn Laracasts experience when you:

  • Complete a lesson — 100pts
  • Create a forum thread — 50pts
  • Reply to a thread — 10pts
  • Leave a reply that is liked — 50pts
  • Receive a "Best Reply" award — 500pts
Lessons Completed
452
Lessons
Completed
Best Reply Awards
0
Best Reply
Awards
  • start your engines Created with Sketch.

    Start Your Engines

    Earned once you have completed your first Laracasts lesson.

  • first-thousand Created with Sketch.

    First Thousand

    Earned once you have earned your first 1000 experience points.

  • 1-year Created with Sketch.

    One Year Member

    Earned when you have been with Laracasts for 1 year.

  • 2-years Created with Sketch.

    Two Year Member

    Earned when you have been with Laracasts for 2 years.

  • 3-years Created with Sketch.

    Three Year Member

    Earned when you have been with Laracasts for 3 years.

  • 4-years Created with Sketch.

    Four Year Member

    Earned when you have been with Laracasts for 4 years.

  • 5-years Created with Sketch.

    Five Year Member

    Earned when you have been with Laracasts for 5 years.

  • school-in-session Created with Sketch.

    School In Session

    Earned when at least one Laracasts series has been fully completed.

  • welcome-newcomer Created with Sketch.

    Welcome To The Community

    Earned after your first post on the Laracasts forum.

  • full-time-student Created with Sketch.

    Full Time Learner

    Earned once 100 Laracasts lessons have been completed.

  • pay-it-forward Created with Sketch.

    Pay It Forward

    Earned once you receive your first "Best Reply" award on the Laracasts forum.

  • subscriber Created with Sketch.

    Subscriber

    Earned if you are a paying Laracasts subscriber.

  • lifer Created with Sketch.

    Lifer

    Earned if you have a lifetime subscription to Laracasts.

  • evangelist Created with Sketch.

    Laracasts Evangelist

    Earned if you share a link to Laracasts on social media. Please email [email protected] with your username and post URL to be awarded this badge.

  • chatty-cathy Created with Sketch.

    Chatty Cathy

    Earned once you have achieved 500 forum replies.

  • lara-veteran Created with Sketch.

    Laracasts Veteran

    Earned once your experience points passes 100,000.

  • 10k-strong Created with Sketch.

    Ten Thousand Strong

    Earned once your experience points hits 10,000.

  • lara-master Created with Sketch.

    Laracasts Master

    Earned once 1000 Laracasts lessons have been completed.

  • laracasts-tutor Created with Sketch.

    Laracasts Tutor

    Earned once your "Best Reply" award count is 100 or more.

  • laracasts-sensei Created with Sketch.

    Laracasts Sensei

    Earned once your experience points passes 1 million.

  • top-50 Created with Sketch.

    Top 50

    Earned once your experience points ranks in the top 50 of all Laracasts users.

  • Community Pillar

    Earned once your experience points ranks in the top 10 of all Laracasts users.

Level 9
40,820 XP
Feb
25
3 days ago
Activity icon

Commented on A Full Example

I can't work out whether its best to keep network requests down and use Alpine on the client; or to embrace the component class!

I have a form - very similar to the Tailwind widget at the start of this video, mine has the 'edit' link against each form field. Instead of showing a modal when someone clicks to edit a field, I just swap the relevant div to show the Input field.

Without going into the detail of my implentation - I just wish I'd seen this series a couple of days ago as the Entangle thing with defer looks really useful.

I'd written mine to use Alpine to only hide the input field, where the showField property was false and also the $errors for the particular field was empty too.

Looks like I could handle the error validation in the actual component class as part of a save method. The defer switch could be used to dial down unnecessary network requests too.

Feb
23
5 days ago
Activity icon

Replied to Passing A Simple Array To A Blade Component Prop

thanks chaudigv. I tried, but it seems the @component directive isn't playing too nice with Livewire. I started getting an error

"Undefined variable $attributes "

So, I added an attributes key and value to the array passed in.

                @component('components.descriptionlist.item',
 [  'attributes' => '' ,
     'label' => 'Full Name',
     'trackerrors' => ['person.firstname','person.lastname']
     ])

But then started getting :

Call to a member function exceptProps() on string

But, I may have just cracked it..

Back on my original version I thought I'd try out serialization / unserialization (not sure whether this is better than JSON encoding for this use case )

i.e

          <x-descriptionlist.item label="Full Name" :trackerrors=" serialize( ['person.firstname','person.lastname'] )  " >

I updated my props in the component


<div    x-data="{ editing:false,
                 passedSpecificErrors: ' {{  $errors->hasAny(unserialize($trackerrors)) }}',
                  specificErrors: '{{  $errors->hasAny(unserialize($trackerrors)) }}'
                  }"
        class="py-4 sm:py-5 sm:grid grid-cols-6 sm:gap-2 sm:px-6"
>

and it only works !! :)

For what ever reason, the HTMLSpecialChars doesn't interfere.

I'm going to try this with JSON Encode and Decode again - I thought I tried this earlier and got similar warnings from Laravel..

Thanks

Activity icon

Started a new Conversation Passing A Simple Array To A Blade Component Prop

You would not believe how much time I have spent trying to make this work :) More time than I am willing to admit!

I'm using the specificErrors property below, to squark, if there are any errors in the errorbag once I call save on the Person model.

You can see I have hardcoded in the person.firstname and person.lastname values.

This works perfectly, if someone causes an error on one or both of those fields ; i.e leaves it as a NULL; then the property specificErrors answers 1.

Why do I need this? Simply, because my form uses inline edits. Its a basic flag I can use to know whether I can hide the form Inputs (just basic Alpine JS is used to flick between showing the basic value; or an input field); once the user has hit save.

<div    x-data="{ editing:false,
                  specificErrors: '{{ $errors->hasAny(['person.firstname','person.lastname'])}}' }"
class="py-4 sm:py-5 sm:grid grid-cols-6 sm:gap-2 sm:px-6"
>


So the above works. It would be great to put the above into a re-usable component as there are several other fields on the Person model.

if I add a props section to the component, with the trackerrors property like this to receive errors to detect

@props(['label' => '',
        'editable' => false,
        'trackerrors'  =>'',
])

and start off the main x-data section like this


<div    x-data="{ editing:false,
                  passedSpecificErrors: '{{  $trackerrors }}',
                  specificErrors: '{{  $errors->hasAny($trackerrors) }} '
                  }"
        class="py-4 sm:py-5 sm:grid grid-cols-6 sm:gap-2 sm:px-6"
>

and in the main Blade view pass some data over like this

                       <x-descriptionlist.item label="Full Name" :trackerrors="['person.firstname','person.lastname']" >

I'm getting errors like

htmlspecialchars(): Argument #1 ($string) must be of type string, array given (View:

Can I not pass a simple array over like this? I have tried several variations, but I'm clearly missing something. Do I need to JSON encode first or something, to stop HTML Entities meddling (I know its trying to protect me)

Feb
19
1 week ago
Activity icon

Commented on Comments Component Testing

Do you need something like

        Livewire::test(CommentsSection::class, ['post' => $post])
//            ->set('post', $post)   if you try to use ->Set, Livewire will inisit on a validation rule. 
Oct
03
4 months ago
Activity icon

Replied to Alpine .js Can't X-bind Styles Inline

Managed to get it working like this

    <div x-data="{ bcolor: 'red', tcolor: 'white' }">

        <div
            :style="`background-color: ${bcolor}; color: ${tcolor}`  "
        >
        Test
        </div>

    </div>
Activity icon

Started a new Conversation Alpine .js Can't X-bind Styles Inline

Hi

Just wanted to check I am not missing something here. In Vue JS, it is possible to data bind styles inline


<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

Data block:

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

Alpine JS doesn't seem to support this. The x-bind works for class binding, but as soon as I try it to do a style inline in blows up!

Back to Vue JS for me I guess.

Activity icon

Replied to Passing Data To Alpine.JS

Managed to sort this in the end, the following works .

<div
    x-data="{
    bodys: {{  $component }} }
 ">

Thanks for your help. I will change the variable name from component as that is just plain confusing given the Javascript frameworks pinched that name first ! :)

Oct
02
4 months ago
Activity icon

Replied to Passing Data To Alpine.JS

thanks. I gave that a go but got

alpine.js:115 Uncaught SyntaxError: Unexpected token ';'

I wonder if something in the data has upset it...

Activity icon

Started a new Conversation Passing Data To Alpine.JS

What is the best way to get data from my database, to Alpine.JS

Say I have the following in my controller

   $component =  DB::table('config_pathway')
            ->select( 'height','width','x','y')
            ->get();

  return view('chart', compact('component'));

In my blade template I don't seem to be able to echo the view variable directly into the x-data object

<div  x-data="$component"> </div>

I have tried several variation of the above. Each attempt results in the error

Uncaught ReferenceError: $component is not defined

Yet I can access $component elsewhere in my template

Thanks

Sep
15
5 months ago
Activity icon

Replied to Laravel 8 Vue JS And Blade Files

I will take a look at Livewire and see what it can do :)

I've got some flowchart UI stuff going on I've used Vue JS to handle the charting and also dynamically changing colours of boxes etc depending on the state of data.

Thanks

Activity icon

Started a new Conversation Laravel 8 Vue JS And Blade Files

Hi

Can we still use Vue JS and blade templates in Laravel 8, yet still benefit from the Auth Scaffolding?

I might be wrong, from what I am reading; if we want Auth scaffolding, we have to use Jetstream which forces us to chose Blade + Livewire, or Inertia.js + Vue ?

Thanks Al