mr415

mr415

Member Since 4 Years Ago

Experience Points 10,270
Experience Level 3

4,730 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 344
Lessons
Completed
Best Reply Awards 1
Best Reply
Awards
  • Start Your Engines Achievement

    Start Your Engines

    Earned once you have completed your first Laracasts lesson.

  • First Thousand Achievement

    First Thousand

    Earned once you have earned your first 1000 experience points.

  • One Year Member Achievement

    One Year Member

    Earned when you have been with Laracasts for 1 year.

  • Two Year Member Achievement

    Two Year Member

    Earned when you have been with Laracasts for 2 years.

  • Three Year Member Achievement

    Three Year Member

    Earned when you have been with Laracasts for 3 years.

  • Four Year Member Achievement

    Four Year Member

    Earned when you have been with Laracasts for 4 years.

  • Five Year Member Achievement

    Five Year Member

    Earned when you have been with Laracasts for 5 years.

  • School In Session Achievement

    School In Session

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

  • Welcome To The Community Achievement

    Welcome To The Community

    Earned after your first post on the Laracasts forum.

  • Full Time Learner Achievement

    Full Time Learner

    Earned once 100 Laracasts lessons have been completed.

  • Pay It Forward Achievement

    Pay It Forward

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

  • Subscriber Achievement

    Subscriber

    Earned if you are a paying Laracasts subscriber.

  • Lifer Achievement

    Lifer

    Earned if you have a lifetime subscription to Laracasts.

  • Laracasts Evangelist Achievement

    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 Achievement

    Chatty Cathy

    Earned once you have achieved 500 forum replies.

  • Laracasts Veteran Achievement

    Laracasts Veteran

    Earned once your experience points passes 100,000.

  • Ten Thousand Strong Achievement

    Ten Thousand Strong

    Earned once your experience points hits 10,000.

  • Laracasts Master Achievement

    Laracasts Master

    Earned once 1000 Laracasts lessons have been completed.

  • Laracasts Tutor Achievement

    Laracasts Tutor

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

  • Laracasts Sensei Achievement

    Laracasts Sensei

    Earned once your experience points passes 1 million.

  • Top 50 Achievement

    Top 50

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

02 Oct
2 years ago

mr415 left a reply on JWT With Laravel 5.1

I know this question was asked 11 months ago, but I was wondering the same thing and Google pointed me this way. Just in case anybody else is wondering the same thing, this is my understanding of JWT and CSRF. Please correct me if I'm wrong because the security implications could be disastrous.

Basically, out of the box (cookie & server sessions) work together to identify if the user is logged in. So a different site could just send the same cookie and pretend to be you (hence the need for CSRF protection). But isn't storing the your JWT the same thing then? No. Storing your JWT in a http-only, secure (https only) cookie means that you're reading the cookie and actually sending your token in your header. Other site's can't actually read your cookie and sending the cookie itself (like in CSRF attacks) is useless as it has to be read and attached to your header.

TL;DR - Turn off CSRF. Store JWT token in http-only secure cookie and your good to go because only your site can read your cookie.

24 Sep
2 years ago

mr415 left a reply on Recommendations For Drag-and-drop Reordering

I've recently had to implement something similar - nested lists and Vue to keep track of the model. I went with Dragula but the workaround isn't optimal because I have to do the following:

  1. Replace the whole data in Vue to reflect the new positions.
  2. Manually remove DOM el that's being dragged around so Dragula doesn't fight with Vue over the DOM (duplicate elements)

Using sortable, is Vue aware of the changes in order? And if so, do you get any DOM conflicts when Vue wants to re-draw things?

BTW cheers for letting us know about stack/push. Didn't even know it could do that! And I was here creating multiple @includes like a chump.

05 Jul
2 years ago

mr415 left a reply on Vue & Laravel Urls

Yep, that's what I ended up doing. I also ended up using JS to parse the url and have Vue make an ajax call for the data (as opposed to Laravel consuming the route and passing the data back to Vue).

Also, since I had several components that needed to mess with the history api (push / parse browser url), I created a base component and had them all extend that, they all call one single method to request data

makeRequest: function (query) {
            var self = this,
                url = this.requestUrl;

            // If we got a new query parameter, use it in our request - otherwise, try get query form address bar
            query = query || window.location.href.split('?')[1];
            // If we had a query (arg or parsed) - attach it to our url
            if (query) url = url + '?' + query;

            // self.finishLoading = false;

            if (!self.ajaxReady) return;
            self.ajaxReady = false;
            self.request = $.ajax({
                url: url,
                method: 'GET',
                success: function (response) {
                    // Update data
                    self.response = response;

                    // Attach filters
                    // Reset obj
                    self.params = {};
                    // Loop through and attach everything (Only pre-defined keys in data obj above will be accessible with Vue)
                    _.forEach(response.data.query_parameters, function (value, key) {
                        self.params[key] = value;
                    });

                    // push state (if query is different from url)
                    pushStateIfDiffQuery(query);

                    document.getElementById('body-content').scrollTop = 0;

                    self.ajaxReady = true;
                },
                error: function (res, status, req) {
                    console.log(status);
                    self.ajaxReady = true;
                }
            });
        },

Here's the function that updates browser url as davestewart suggested

function pushStateIfDiffQuery(query) {
    if (query && query !== window.location.href.split('?')[1]) {
        window.history.pushState({}, "", '?' + query);
    }
}
07 Apr
3 years ago

mr415 left a reply on Creating A Bootstrap Select Directive

I was struggling with this for a while too - mainly because I headed straight for trying to use directives to solve the job. I assume you're wanting to call bootstrap-select on dynamic options that are handled by Vue? If your options are provided from the server, it's pretty straightforward but if you're trying to use Vue data as options the problem is bootstrap-select get's initialized before the data is ready.

I had a working (barely) solution using Directives, that involved jQuery events and refreshing bootstrap-select as each option was rendered. That felt wrong and the API was still hit-or-miss. So here's my solution using Components + Props. It's much cleaner but isn't perfect.

HTML

    <select-picker :name.sync="itemsPerPage" :options.sync="itemsPerPageOptions" :function="changeItemsPerPage"></select-picker>

You can even bind functions, which get called when the @change event gets triggered in the child component! Yeah, I could use events but I wanted the ability to have multiple select boxes on the page and events would mean having to namespace them - not very fun.

JS Component

Vue.component('select-picker', {
    template:'<select v-model="name" class="themed-select" @change="function">' +
    '<option value="{{ option.value }}" v-for="option in options">{{ option.label }}</option>' +
    '</select>',
    name: 'selectpicker',
    props: ['options', 'name', 'function'],
    ready: function() {

        // Init our picker
        $(this.$el).selectpicker({
            iconBase: 'fa',
            tickIcon: 'fa-check'
        });

        // Update whenever options change
        this.$watch('options', function (val) {
            // Refresh our picker UI
            $(this.$el).selectpicker('refresh');
            // Update manually because v-model won't catch
            this.name = $(this.$el).selectpicker('val');
        }.bind(this))
    }
});
20 Nov
3 years ago

mr415 left a reply on Input Text Value Based On A Related Select

If it was me, I'd make a laravel route like '/api/suggested-comissions' which will return the suggestedCommissions object as JSON.

Then... in vue I'll use ajax to load to make a get request and attach it to the data.

Passing variables from PHP -> JS would work and I use to do it but it just seems hacky, plus you've got Vue for easy binding so might as well use it!

19 Nov
3 years ago

mr415 left a reply on Input Text Value Based On A Related Select

I suggest using lodash so you don't have to hardcode the order of commissions, but otherwise I think this is what you're trying to accomplish:

<select name="category_id" id="category_id" v-on:change="updateCommission">
    <option value="0" v-model="selectedCategory">Cat. 1</option>
    <option value="1" v-model="selectedCategory">Cat. 2</option>
    <option value="2" v-model="selectedCategory">Cat. 3</option>
</select>

<input name="comission" v-model="comission" type="text">
// ...
data: {
    selectedCategory: '',
    commission: '',
    suggestedCommissions: [
        {amount: 5},
        {amount: 10}
        {amount: 15}
    ]
},
methods: {
    updateComission: function(){
        this.comission = this.suggestedComission[this.selectedCategory].amount
    }
}
18 Nov
3 years ago

mr415 left a reply on Set Up Data Options From Component To Root Instance

  1. Try using component events instead, it's recommended instead of referencing parent/child properties directly (tightly coupled).

  2. Not sure if you can, but I think vue favors doing it this way so you're more explicit about what data vue expects.

mr415 started a new conversation Vue & Laravel Urls

Been experimenting with Laravel & Vue so far and loving how well the two go together. Only thing is, because I'm using Laravel to handle all the routing, I haven't been able to find a clean way to change URLs when Vue updates the page.

Currently the only solution I can think of is sort of hacky and I'm wondering if its the best one:

  • Vue updates page
  • Manually change url using javascript

When user accesses url directly, laravel parses the query, and pass it along to vue as a JS variable which tells vue to update page accordingly (ie. for filters)

I'm not loving it because a lot of my routes / controller is then loading the same main view passing through different PHP variables which are then converted to JS variables in blade templates to be consumed by vue.

Is this the only way? how do you guys think Jeffrey handles it for Laracast's catalogue filters?