alenabdula

Web Designer / Developer at Sonora DesignWorks

Experience

44,965

28 Best Reply Awards

  • Member Since 3 Years Ago
  • 263 Lessons Completed
  • 1 Favorite

3rd May, 2017

alenabdula left a reply on Laravel Mix Not Properly Loading JQuery? • 3 weeks ago

Try assigning jQuery

window.$ = window.jQuery = require('jquery');

alenabdula left a reply on Check Which Form Error(s) Belong To • 3 weeks ago

But you can only submit one form, so whatever form you do submit errors belong to that form. How are you displaying errors? Are they inline with the input fields, or are you displaying them bellow the form?

Let's say you have two forms in two different div's, you can check which one has a element with a error class and do some logic based on that.

alenabdula left a reply on Check Which Form Error(s) Belong To • 3 weeks ago

Does it redirect back with errors? If so, just check which form has errors and add appropriate class, then have JavaScript toggle appropriate form.

I thought, if Form Requests don't pass validation, form never gets submitted.

alenabdula left a reply on Disable Registration [L5] • 3 weeks ago

Basically, remove the code generated by make:auth in your routes file. And just add...

Route::post('login', 'Auth\[email protected]');
Route::get('login',  'Auth\[email protected]');
Route::get('logout', 'Auth\[email protected]');

alenabdula left a reply on Check Which Form Error(s) Belong To • 3 weeks ago

You can use a Form Request this way form will never be submitted or page refreshed. But you'll be able to display errors appropriately. If you want use jQuery, have some logic that adds a class to the form with errors then display that form, or add a class based on what form was submitted.

I would go with form request, this way you don't have to depend on client JavaScript.

Hope that helps. Alen

1st May, 2017

alenabdula left a reply on Ability To See Which Lessons Are Paid Lessons When You Are A Paid Subscriber • 3 weeks ago

I'm not sure how this would create "sense of value".

If you are paid subscriber, at least for me, value comes from what I learn from watching the videos and participating in forum discussions. Free videos are labeled as such...

29th April, 2017

alenabdula left a reply on Noty Is Not Working!! • 3 weeks ago

Can you show some code so we can have a better idea what the issue is?

Uncaught ReferenceError: noty is not defined

Did you require Noty in your application and assign it to window, for example

window.noty = require('noty');

Or as per docs...

import Noty from 'noty';
new Noty({
    ...
    text: 'Some notification text',
    ...
}).show();

const Noty = require('noty');
new Noty({
    ...
    text: 'Some notification text',
    ...
}).show();

28th April, 2017

alenabdula left a reply on Interface Approach For An Online Testing Site • 3 weeks ago

Without knowing complete scope of what you're trying to do... my suggestion is:

should I define answer options tables for each different question types separately?

Looks like you might need Polymorphic Relations to retrieve a question based on the subject, like math, english, etc. In addition, I would create a boolean column for type of question multiple choice or data entry, so when presenting question in front-end you can display data accordingly. I would keep the answer in the same table as the question, as two are related and there's only one correct answer.

how do I implement a front end which can change dynamically for the different question types?

This sounds to me like an algorithm, in which your application can pick 20 random question, maybe based on difficulty... based on the boolean value mentioned above you can pick, 10 multiple choice, and 10 non-multiple choice to present to the user.

Hope that helps, Best, Alen

alenabdula left a reply on V-on:click Not Working On Separate Component • 3 weeks ago

@aareyes00

I would handle this via CSS, and just use Vue to toggle appropriate classes. Here's a working example:

https://codepen.io/alenabdula/pen/PmpRap

27th April, 2017

alenabdula left a reply on Upgrade Strategy • 4 weeks ago

plan on upgrading to the latest L5

Is there enough justification for upgrade? Or are you upgrading just because...

If current codebase is doing its job, why waste time and resources if there's no significant benefit to be gained.

Having said that, I'm not familiar with your codebase and potential issues you're facing and how upgrading would solve anything.

If everything is working currently, I would start building new version offline and once it's complete then make the switch.

Having two installs running at the same time might be troublesome since you're maintaining two sets of codebases in a live environment. And having to "sync" the two might be more work. In addition, there's more fail points, especially if your application is large, so making simple changes might be time consuming.

Either way, we're not familiar with what you're working with. Only you can make that assessment and proceed accordingly.

My suggestion would be to work on a new version behind the scenes and make the switch when everything is ready. Much of the business logic will be copy/paste, so it shouldn't take that long to port everything over.

Best, Alen

25th April, 2017

alenabdula left a reply on How To Do An Ajax DELETE?? • 1 month ago

I think following:

Route::get('url/{url}', [email protected]');

should be a post route, not get.

Route::post('url/{url}', [email protected]');

15th April, 2017

alenabdula left a reply on Determine Active Route Resource • 1 month ago

I'll try it and see how it goes. I think am just over thinking this. Especially with the foreach having it run on every link anchor might not be best approach.

Thanks.

alenabdula started a new conversation Determine Active Route Resource • 1 month ago

I have following code

class Nav
{
    public static function activeItem($name)
    {
        if ( \Route::is($name) ) {
            return 'is-active';
        }
    }
}

And I use it like this to generate active menu item

<a class="nav-item {!! Nav::activeItem('about') !!}" href="{{ route('about') }}">About</a>

This works great for non-resource routes. However! If i have journal as a resource above works great on index route, but I would like it to return is-active on all resource routes.

I've modified it, but wondering if there's a cleaner way?

class Nav
{
    public static function activeItem($name)
    {
        if ( \Route::is($name) ) {
            return 'is-active';
        }
        foreach (['.index', '.create', '.edit', '.show'] as $route) {
            $rest = $name . $route;
            if ( \Route::is($rest)) {
                return 'is-active';
            }
        }
    }
}
<a class="nav-item {!! Nav::activeItem('journal') !!}" href="{{ route('journal.index') }}">Journals</a>

Thanks.

11th April, 2017

alenabdula left a reply on Window.print Uncaught Error • 1 month ago

I've just tested following and it works.

<div id="app">
  <button @click.prevent="print()">Print</button>
</div>
var app = new Vue({
  el: "#app",
  data: {},
  methods: {
    print: function() {
      window.print();
    },
  }
});

9th April, 2017

alenabdula left a reply on Laravel Mix For Simple Project... • 1 month ago

and after 'npm run dev'

You need to run npm run production to get minification. Running dev outputs code that's easier to debug, and is for development purposes only.

6th April, 2017

alenabdula left a reply on Linking Storage To Public • 1 month ago

It looks like, executing php artisan storage:link within Homestead VM worked.

alenabdula left a reply on Set Up A Number Of Images In One Row? • 1 month ago

@foreach($allPdt->pluck(3) as $pluck)
    <div class="row">
    @foreach($pluck as $pdt)
        <img src="{{url('/')}}/images/product/product-1/product-{{$pdt->id}}.{{$pdt->picture1}}" class="img-thumbnail" alt="" />
    @endforeach
    </div>
@endforeach 

alenabdula started a new conversation Linking Storage To Public • 1 month ago

I'm having issues with accessing files in the storage/app/public directory. I've already executed php artisan storage:link linking public/storage to storage/app/public. In my editor I can confirm that public/storage contains files located in the storage/app/public however when trying to view the file directly in the browser or using the asset() helper function, I'm still getting NotFoundHttpException. The URL I'm trying to access is http://localhost:3000/storage/file.jpg.

Any help would be appreciated. I'm on Linux.

3rd April, 2017

alenabdula left a reply on Best Way To Redirect • 1 month ago

@pritam1605 Redirects happen only after you have performed some business logic in your application. For example, you have created new blog post. If you are redirecting, you need to store data in the session or pass it via URL like @Snapey mentioned. If you need to keep data for additional requests you can use.

Route::get('redirect', function() {
    session()->put('name', 'Jane Doe');
    session()->keep('name');
    return redirect('example');
});
Route::get('example', function() {
    return session()->pull('name');
});

In the above example, if you refresh the example page after redirect happens your session data will no longer be available.

If you are loading the view, and passing data, aforementioned data will always be available. Since you are passing it each time you make an request.

I want the page to retain the data when I reload or refresh the page. What would be a better option?

Loading the view.

Route::get('example', function() {
    return view('example', ['name', 'Jane Doe']);
});

If you need to redirect, then pull the data from session and load a view. Try

Route::get('redirect', function() {
    session()->put('name', 'Jane Doe');
    session()->keep('name');
    return redirect('example');
});
Route::get('example', function() {
    $name = session()->pull('name');
    return view('example', ['name' => $name]);
});

Hope that helps, Alen

2nd April, 2017

alenabdula left a reply on Vue Last In Loop • 1 month ago

<div id="app">
  <div v-for="(item, index) in items">
    <div v-if="index == items.length - 1">yes</div>
    {{ item }}, {{ index }}
  </div>
</div>
var app = new Vue({
  el: "#app",
  data: {
    items: [1,2,3,4,5]
  },
});

http://codepen.io/alenabdula/pen/evxPVd

alenabdula left a reply on Handling Huge Route File • 1 month ago

Can you define "huge"? How many lines of code, without comments, etc...?

I guess you can create php files in routes folder then just require them in your web.php file...

22nd March, 2017

alenabdula left a reply on Axios • 2 months ago

It's just a nice way to organize your router. Separating each, your web routes will most likely return a view, while API calls are stateless and in JSON format.

alenabdula left a reply on Axios • 2 months ago

Forgot to mention:

  • Modified home.blade.php to add example Vue component <example></example>

alenabdula left a reply on Axios • 2 months ago

I've scaffolded quick Laravel application for consuming API with axios.

https://github.com/alenabdula/laravel-api

I did following

  • Added api_token to User table, see migration
  • Added seed UserTableSeeder with example user
  • Scaffolded authentication with php artisan make:auth
  • Added index.blade.php view, and modified web routed accordingly
  • Modified app.blade.php layout to add JavaScript object containing csrf token and api token to be consumed by axios.
  • Modified bootstrap.js file to set axios defaults with aforementioned JavaScript object.
  • Modified Example.vue template to consume data and display it when logged in.
  • Added API routes routes/api.php for articles and initialled some example data. (This can come from database or whatever)

UserTableSeeder creates example user with following credentials:

  • Email: [email protected]
  • Pass: secret

To get started, close this repo, composer install dependencies, install node modules, create database/database.sqlite, run migrations, and seed the database.

Hope that helps. Best, Alen.

20th March, 2017

alenabdula left a reply on Can We Create An A Laravel App Within An Exisiting Vue App To Create Sitemap.xml? • 2 months ago

So you already have existing Laravel application that provides API for your Vue SPA, and you're using Laravel blade templates to generate initial HTML structure?

If so, you can write logic that consumes your API and writes the necessary file to disk. You can use Laravel Events, CRON job, or manually initiating the process.

alenabdula left a reply on Dusk : Click A Font Awesome Icon • 2 months ago

Try:

$browser->click('a.editcomment');

You are clicking on link anchor that wraps span tag, span tag is just used to display icon font.

18th March, 2017

alenabdula left a reply on So Forge Just Completely *hit The Bed • 2 months ago

@lars6 agree... it's not clear what the next step should be after installing the cert. Not sure if changing color would help, but some kind of message indicating that cert if not yet active would clear a lot of confusion.

alenabdula left a reply on So Forge Just Completely *hit The Bed • 2 months ago

@stueynet I obtained new certificate, then deleted the old one. Also, make sure to activate it by clicking on Activate button (next to red X).

alenabdula left a reply on So Forge Just Completely *hit The Bed • 2 months ago

I've just reissued my SSL cert and everything back to normal.

17th March, 2017

alenabdula left a reply on Using JQuery Libraries With Vuejs • 2 months ago

Is Vue router changing any DOM elements that jQuery has registered event handlers? It's possible that, on the initial page load jQuary adds event handlers to elements. And once you change the DOM with Vue router by navigating those event handlers are no longer registered.

Open your browser's developer tool CTRL + SHIFT + I on Chrome, under elements tab click on the Event Listeners, see if anything changes when you change routes.

Hope that helps.

10th March, 2017

alenabdula left a reply on Bulma.io • 2 months ago

You can install Bulma is few different ways.

If you're compiling assets with Laravel Mix try following

  1. In terminal install Bulma using NPM `npm install -D bulma
  2. In your app.scss file include it at the top.

//
// If you need to modify Bulma variables to so before importing it!

$link: $oc-blue-5;
@import './node_modules/bulma/bulma.sass';

Regarding mobile hamburger menu toggle, when you click it you need to use JavaScript to add is-active class to the menu!

Here is a very basic example http://codepen.io/alenabdula/pen/jBmPBe

9th March, 2017

alenabdula left a reply on Laravel Mix + Blade + Vue • 2 months ago

So for example in your Blade template,


# Assuming some kind of data is being passed to this view
# For this example, let's assume that
# in your controller you're passing data like so

// SomeController.php
// ...
$posts = collect([
  ['id' => 1, 'title' => 'Post 1'],
  ['id' => 2, 'title' => 'Post 2'],
  ['id' => 3, 'title' => 'Post 3'],
]);
return view('pages.posts', compact('posts'));
// ...

# Then in your posts template, you can output the script that
# containing data
<script>
window.AppPosts = {!! json_encode($posts) !!};
</script>

In your VueJS instance or the component, you can hook into this data. Something like

const app = new Vue({
    el: '#app',
    data: window.AppPosts,
});

There are many ways to get the data, another way would be to make a API call with JavaScript (VueJS) to the server. Making API calls is little bit more performant in some cases. For example if JavaScript is disabled on the client side, there's no need to generate HTML and send it down the wire if JavaScript can't execute. Or in some cases user is not looking for that specific data but we're still loading it. It's really on case by case basis, if you don't have a lot of posts generating HTML like I've mentioned before might be good enough to get you started. In many cases this is not an issue if you're Gzip your response. Often times it's the images and other media files that slow down load time.

Hope that helps, if you want to check out how to make API calls with VueJS there's a series here on Laracast and how to do it with axios.

Best, Alen.

alenabdula left a reply on Laravel Mix + Blade + Vue • 2 months ago

You can't use Blade in JavaScript, since Blade is just a templating language for PHP. And PHP is server side while JavaScript is client side. Your server side code would construct document model with all the element, then JavaScript would act on those elements. In case of VueJS you bind an instance of VueJS to an HTML element on the page generated by Blade. Like <div id="app"></div> or if you're using components <example></example>. When you compile Vue templates, those templates are essentially just JavaScript. You would feed some kind of information to the Vue instance, then using client side code, generate necessary markup.

alenabdula left a reply on Why Laravel Dropped Elixir? Why Forcing Vue.js? What Is It That You Are Trying To Fix? • 2 months ago

@MWrathDev maybe I'm not able to see their perspective. I've watched countless series on here that I don't particularly like or agree with the approach or methodologies. Not everything you see, read and explore has to be the truth, for you! When I recieve advice I constantly try to mold it in a way that fits me and what works for me. Jeff is a great teacher, and he emphasises a lot of "his way of doing things". Which is expected because that's who he is and he's sharing his knowledge. But that doesn't mean that I have to make it more difficult for myself and try to do everything how he does it. I make it work for me. Many on here are too focused on the details. They're not focused on the bigger picture. I watch every single video on here because I like programing. I watch a lot of conference videos that have nothing to do with PHP, because at the end of the day it's about concepts and execution. The tools are just a way of getting there.

When I attended college, a lot of classes were about stuff like tables for layout in HTML. CSS was up and coming but the lectures still focused on "the old way". So I decided to drop all of my web classes and took photography, earning bachelor of fine arts from UMASS Amherst. I would spend countless hours after school, right-click-view-source, copy paste, followed some of the professionals in the field. I saw at what rate this field was changing. So I altered the way I wanted to consume and learn.

When I graduated, I was a wedding photographer for 3 years, doing quite well with 18 weddings my first year. In photography, the worst thing you can do is look at photographs from your field, it leads to copying instead of capturing the story as it happens. So often I would look at architectural, portrait photography images for inspiration.

Anyways, I guess my point is you have to know who you are and what you want to learn, and how. Many don't realize Windows 95 was the first time general public really started accessing the web, our field is young so changes, constant learning are part of that growth.

As a child I survived a civil war in Bosnia, resources were scarce many, kids spent years without going to school. Accessing the internet... LMFAO. And now we legit have access to abundance of information and resources. So for me discussions like this are so offensive, especially to @JeffreyWay he has done so much with sharing his knowlage that he doesn't deserve this. And this applies to @TaylorOtwell They had so much impact on the community for anyone to put them down, or criticize them for "this doesn't work for me" should be ashamed.

Best, Alen

8th March, 2017

alenabdula left a reply on Can Not Migrate To Homestead Database • 2 months ago

Try

  1. cd ~/Homestead
  2. vagrant ssh
  3. mysql -uhomestead -p when prompted enter secret as password

alenabdula left a reply on Why Can't I Have My Variable In My View? • 2 months ago

Try

{{ dd($devices) }} in your view. Also, following line @if($devices::count()) should be @if($devices->count()).

Hope that helps.

6th March, 2017

alenabdula left a reply on Why Laravel Dropped Elixir? Why Forcing Vue.js? What Is It That You Are Trying To Fix? • 2 months ago

One should never criticize, only ask questions! Especially if something is provided for free.

This is not "design by committee"!

alenabdula left a reply on Why Laravel Dropped Elixir? Why Forcing Vue.js? What Is It That You Are Trying To Fix? • 2 months ago

This is such a silly conversation.

BOOM!

alenabdula left a reply on Why Laravel Dropped Elixir? Why Forcing Vue.js? What Is It That You Are Trying To Fix? • 2 months ago

I will never understand discussions like this one. Framework is FREE. It solves 80% of use cases and gets you building things.

Why does it matter what they're a pushing?

From Taylor's perspective, maybe he enjoys use it and likes it, so he included it.

Or maybe it came to him in a dream. But seriously, WHO CARES.

Use the tools, customize it and build things.

Quit complaining!

5th March, 2017

alenabdula left a reply on [5.4] Npm Run Watch Not Working • 2 months ago

I was having issues as well and noticed that cross-env had a wrong path in the scripts section of package.json file. Looks like that has been fixed with this pull request.

alenabdula left a reply on Vuejs Instance In Master.blade And Other Instance In Login Page? • 2 months ago

@luddinus see this discussion, https://laracasts.com/discuss/channels/vue/how-do-i-include-a-file-when-compiling-vue

verey last post I've created a repo with a setup for app and dashboard, you can use the same setup for login page instead of dashboard.

Hope that helps, Alen.

3rd March, 2017

alenabdula left a reply on Laravel 5.3 - How Do I Include A File When Compiling Vue 2? • 2 months ago

I've just cloned fresh copy of Laravel 5.3 and configured it for you here's the repo https://github.com/alenabdula/laravel53_gulp

alenabdula left a reply on Laravel 5.3 - How Do I Include A File When Compiling Vue 2? • 2 months ago

// gulpfile.js
const elixir = require('laravel-elixir');

require('laravel-elixir-vue-2');

elixir((mix) => {
    mix.sass('app.scss').webpack('app.js')
          .sass('dashboard.scss').webpack('dashboard.js');
});

and your views...

<!-- app layout -->
<link rel="stylesheet" href="/css/app.css">
<div id="app"></div>
<script src="/js/app.js"></script>

<!-- dashboard layout -->
<link rel="stylesheet" href="/css/dashboard.css">
<div id="dashboard"></div>
<script src="/js/dashboard.js"></script>

and your app.js and dashboard.js stay the same as above...

Best, Alen.

alenabdula left a reply on How Do I Include A File When Compiling Vue 2? • 2 months ago

IMO you should compile them separately. Since your public app.js file will be loaded by visitors, and your dashboard.js will be loaded only when visiting the dashboard. There's no need to bundle both together.

Here's my setup:

// webpack.mix.js file

const { mix } = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')

   .js('resources/assets/js/dashboard.js', 'public/js')
   .sass('resources/assets/sass/dashboard.scss', 'public/css')

   .browserSync('alenabdula.dev')
;

Then reference each file in their own layout file. For example...

<!-- app layout -->
<link rel="stylesheet" href="{{ mix('/css/app.css') }}">
<div id="app"></div>
<script src="{{ mix('/js/app.js') }}"></script>

<!-- dashboard layout -->
<link rel="stylesheet" href="{{ mix('/css/dashboard.css') }}">
<div id="dashboard"></div>
<script src="{{ mix('/js/dashboard.js') }}"></script>
// app.js
require('./bootstrap');

const app = new Vue({
    el: '#app',
    data: {},
    methods: {},
    mounted() {
        console.log('Application VueJS Instance Mounted!');
    },
});

// dashboard.js
require('./bootstrap');

const app = new Vue({
    el: '#dashboard',
    data: {},
    methods: {},
    mounted() {
        console.log('Dashboard VueJS Instance Mounted!');
    },
});

Hope that helps. Alen.

alenabdula left a reply on Bulma Hero.sass No Mixin Error • 2 months ago

try compiling hero.sass

How are you compiling it? Your entry point should be bulma.sass that includes all other files, one of which is hero.sass.

27th February, 2017

alenabdula left a reply on How To Write A Testimonial About This Site • 2 months ago

  1. Click on "New Discussion" button, link
  2. From the "Pick a Channel" dropdown menu select "Site Feedback"

Hope that helps.

18th February, 2017

alenabdula left a reply on How To Convert 1000 To 1k ? • 3 months ago

@Chris1904 what he said!

Edit Your Profile
Update

Want to change your profile photo? We pull from gravatar.com.