alenabdula

Web Designer / Developer at Sonora DesignWorks

Experience

49,105

31 Best Reply Awards

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

23rd July, 2017

alenabdula left a reply on Laravel Auth With Vue Or Any Other JS Framework • 4 days ago

@mrunknown You can take a look at my GitHub repository that I've made answering following question.

Hope it helps. Best, Alen.

21st July, 2017

alenabdula left a reply on Can Not Pass Data From Root To First Child Component • 6 days ago

What have you tried?

You can pass the data as a prop. <example :data="items"><\example>

items is the data on root instance and your component needs to have a props: ['data'], to accept it.

14th July, 2017

alenabdula left a reply on Start A Project With Laravel Dev Version Before Switch It To The Stable Release ? • 1 week ago

If you're not building anything overly complex then start with the dev version. Having said that, if you're starting a client project I would suggest stable version. Next update, is not a major breaking-changes update so when it's officially out, I'm sure upgrade guide will be easy to follow.

12th July, 2017

alenabdula left a reply on Globally Include A Settings.scss With Vue-loader? • 2 weeks ago

Something like this, if using SublimeText

<snippet>
<content><![CDATA[
<template>
    <div>
        ${1:<!-- template -->}
    </div>
</template>
<script>
    export default {
        ${2://}
    }
</script>
<style lang="scss">
    @import '~GlobalSass';
    ${3://}
</style>
]]></content>
<tabTrigger>vue-template</tabTrigger>
</snippet>

alenabdula left a reply on Globally Include A Settings.scss With Vue-loader? • 2 weeks ago

You can create a snippet, if your editor allows it, so you're not writing template structure each time.

alenabdula left a reply on Globally Include A Settings.scss With Vue-loader? • 2 weeks ago

@westwick, @gsa

// webpack.mix.js

mix.webpackConfig({
    resolve: {
        alias: {
            'GlobalSass': path.resolve('resources/assets/sass/_bootstrap.scss')
        }
    },
});
<!-- Single Vue component file -->
<template>
  <div class="component"></div>
</template>

<script>
  export default {}
</script>

<style lang="scss">
  @import '~GlobalSass';
  .component {
    color: $red;
  }
</style>

You still have to write the code to import SCSS file, but at least you don't have to mess around with ./../../../ in your code.

Hope that helps. Best, Alen.

alenabdula left a reply on Infinite Scrolling In Vue • 2 weeks ago

Here's a quick and dirty example, let me know if you need me to explain any of the code... https://codepen.io/alenabdula/pen/awXzPe

Hope that helps, best Alen.

8th July, 2017

alenabdula left a reply on CSS BG Image Not Found, But Found When Clicked On Link • 2 weeks ago

What does your network tab look like in the Chrome Inspector. Does it say 404 not found? Maybe it's a CSS issue, did you try using a placeholder image from online services to test it out? Could be permissions issue as well, try visiting the image URL in Incognito mode, maybe image is cached locally for you but might not work for anyone else.

Hope that helps.

alenabdula left a reply on Vue Use Vueitify • 2 weeks ago

  1. Are you including CSS for vuetify, in your app.scss file you can use @import './node_modules/vuetify/dist/vuetify.min.css
  2. Are you using pre-defined components in your VueJS components, or in the HTML? https://vuetifyjs.com/layout/pre-defined

alenabdula left a reply on Laravel/Lumen Vue & PWA • 2 weeks ago

While this would be awesome to have here at Laracasts. It's an enormous undertaking for Jeffery to understand everything about Progressive Web Apps as the scope of this site is more about Laravel sprinkled with some related technologies. Making API requests has been covered here pretty well IMO. So if you're interested in learning more, there are free resources around the web that explains it pretty well. I would start with a checklist for PWA, try to have that completed, and then see where in the road map does Laravel fit and find solutions derived from many lessons already available.

Google already provides, starter template, with Service Worker, and etc. I would modify it by removing any design/solution concept ex. Weather App, strip it to the bone, and build on top of that.

Hope that helps, best Alen.

5th July, 2017

alenabdula left a reply on Vue Says My Property Isn't Defined, But I Think It Is...? • 3 weeks ago

Data is an object on the main instance of Vue. Components data is a function that returns an object.

Maybe the error is coming from somewhere else. Following code should work.

var data = {
  blah: 'Hello World!',
};

var app = new Vue({
  el: '#app',
  data: data,
});

Live example https://codepen.io/alenabdula/pen/jwprpX/

alenabdula left a reply on Vue Says My Property Isn't Defined, But I Think It Is...? • 3 weeks ago

@alexandersix When template is rendered the data is not set. So this will not work <h1 class="title">People: @{{ blah }}</h1>.

Try

<h1 class="title" v-if="blah">People: @{{ blah }}</h1>

alenabdula left a reply on What Settings Do I Require If I Want Fetch Small Sized Images If A User Visits My Website With A Mobile Device? • 3 weeks ago

You can use <picture> element with srcset and let the browser download appropriate image. REad more here: https://cloudfour.com/thinks/responsive-images-101-definitions/

alenabdula left a reply on Laravel Mix Is Compiling Files To A Wrong Directory • 3 weeks ago

Try following:

let mix = require('laravel-mix');

mix.setPublicPath('themes/default/assets/compiled');

mix.js('themes/default/assets/js/app.js', 'js');

alenabdula left a reply on Symlink Confusion: Why Does Storage:link Do This? • 3 weeks ago

@JohnnyW2001

I save the full path in the database storage/example.jpg then use it as <img src="{{ asset($journal->thumbnail) }}" alt="">.

Hope that helps. Best, Alen

21st June, 2017

alenabdula left a reply on Vue Not Found Error • 1 month ago

@djdunn15 You can view code for lesson in the episode 29

Looking at the code on GitHub your app.js contains additional code Vue.component('reply', require('./components/Reply.vue')); Does the Reply.vue file exist?

Hope that helps.

20th June, 2017

alenabdula left a reply on Vue Not Found Error • 1 month ago

Show us your app.js file. It looks like you might be missing window.Vue = require('vue');

19th June, 2017

alenabdula left a reply on Creating Different CSS Files With Webpack • 1 month ago

@bashy yeah I had to re-read it and noticed that as well.

@Alvaro_Garcia let us know if any of our suggestions helped

alenabdula left a reply on How Do You Determine If The Code Quality Is Good Or How Can I Write Code In Good Way? • 1 month ago

I don't like the way my code works.

If it works, it's good enough.

Best way to improve is to work on what you have for extended time, see what gives you trouble and research how to improve it by solving for that specific issue. Don't overthink it. Keep it simple. Less code is always better, so try refactoring pieces of code that seem convoluted and are hard to understand of what's happening. Possibly, extract pieces of functionality to functions and give them names.

When you're working, for the most part code makes sense, but 4-5 months down the road even you will have hard time understanding what's happening, and it will take you some time to figure out, so comment the shit out of your code and give names to things.

Just keep building things, I'm also self-taught, and I can't tell you how many times I've coded dashboard for my blog... :)

alenabdula left a reply on Creating Different CSS Files With Webpack • 1 month ago

Also, if you're importing CSS file not SCSS (not sure if that's messing things up), you can always just rename the CSS file to SCSS.

So _listing-1.css becomes _listing-1.scss.

Best, Alen.

alenabdula left a reply on Creating Different CSS Files With Webpack • 1 month ago

Is my concept correct?

Are you using Chrome Dev-Tool? If you go under Sources Tab, add your project folder there, this might solve your issue. However, Laravel Mix should generate sourcemap within the CSS file, which helps locating code line numbers in SCSS files, instead of the compiled version of the file.

I've never used .styles in Laravel Mix. So not sure how that relates to sourcemapping, etc.

I'm not sure how your folder structure is, but the dependency issue might be that you're just referencing a file in a wrong location.

I would like to use the default app.scss file for the common css needed at all views. And i would like to generate another file with the specific CSS that will be used in a specific view (listing.scss).

Let's say your file structure is as: (the underscore in file names is just a convention, for files that are included, often called partials)

  • app.scss
  • listing.scss
  • _listing-1.scss
  • _listing-2.scss

Use what @bashy wrote in his original response:

mix
    .sass('resources/assets/sass/app.scss', 'public/css')
    .sass('resources/assets/sass/listing.scss', 'public/css')
;
// listing.scss
@import 'listing-1';
@import 'listing-2';

When you compile, you'll have listing.css file in your public/css folder, now all you need to do is add a link to the stytlesheet in the view that needs it. And when you're debugging, Chrome should display correct line numbers, in the SCSS file not CSS.

Hope that helps.

alenabdula left a reply on Is Laravel Over-engineered ? • 1 month ago

This question is over-engineered.

alenabdula left a reply on Laravel 5.4. How To Automatically Compile All .scss Files In Directory (recursively) Into One Css File. • 1 month ago

So, i should include files manually, as i want to control an order of adding css styles in my all.css.

Yes

i only need my File Watcher for synchronized compile.

Laravel Mix will automatically watch all the files you are importing. So when you save changes, it will re-compile.

alenabdula left a reply on Laravel 5.4. How To Automatically Compile All .scss Files In Directory (recursively) Into One Css File. • 1 month ago

I would created all.scss file, import other SCSS files and just compile all.scss.

Something like this:

// `all.scss` file
@import '_variables';
@import '_functions';
@import '_mixins';
@import '_media-queries';
// etc...
const { mix } = require('laravel-mix');

mix.sass('resources/assets/sass/all.scss', 'public/css');

Hope that helps. Best, Alen.

3rd June, 2017

alenabdula left a reply on Server For Multiple Front End Html Sites • 1 month ago

@JDdesign

That works fine for laravel apps

You are wrong. The difference when modifying root is:

1 example.com 2 example.com/public

In the first, the publicly accessible folder is the example.com, and in the second the publicly accessible folder is public. If you modified the root place the index.html file in example.com folder.

I'm running multiple statis and laravel apps on my Forge account.

1st June, 2017

alenabdula left a reply on Best Approach To Use Nested Loop In Vue.js • 1 month ago

How do you determine if product is in specific zone, and weather it's filled or not?

How are you setting the data object? Where's the data coming from? And can you modify its output?

If so, something like this would work:

var app = new Vue({
  el: '#app',
  data: {
    privates: [
      {
        zone: 'Zone 1',
        product: 'Product 1',
        content: 'Filled',
      },
      {
        zone: 'Zone 2',
        product: 'Product 2',
        content: 'Filled',
      },
      {
        zone: 'Zone 3',
        product: 'Product 3',
        content: 'Empty',
      },
    ],
  }
});
<table>
    <thead>
        <tr>
            <th>Zone</th>
            <th>Product</th>
            <th>Content</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Zone</th>
            <th>Product</th>
            <th>Content</th>
        </tr>
    </tfoot>
    <tbody>
        <tr v-for="items in privates">
            <td v-for="item in items">{{ item }}</td>
        </tr>
    </tbody>
</table>

Demo: https://codepen.io/alenabdula/pen/awoJPr

alenabdula left a reply on Server For Multiple Front End Html Sites • 1 month ago

@JDdesign Honestly, since I've signed up (launch day). I haven't looked back and I'm yet to experience an issue.

When you create a site on Forge, it will add proper paths and configuration settings for Nginx automatically. I never change any of the default settings and leave path to public. I use Git and have my GitHub setup to manage code for each project. I work locally, push changes to GitHub and deploy via Forge.

To me it sounds like it's a domain/DNS issue.

Try troubleshooting,

  • Domain registrar (place where you manage domain, like hover.com) nameservers for the domain point to DigitalOcean
  • Add domain at DigitalOcean in the network tab, pointing it to correct server
  • Add CNAME, for www version of domain, HOSTNAME: www, IS AN ALIAS OF: @
  • Add site for aforementioned domain on Forge
  • Visit domain

Hope that helps.

31st May, 2017

alenabdula left a reply on Server For Multiple Front End Html Sites • 1 month ago

multiple static html sites... on Forge?

after tweaking the sites-enabled, it still gives a nginx 404.

How are you tweaking settings? Via Forge?

All you need to do is:

  • Point the domain you wish to host to DigitalOcean DNS servers
  • Go to network at DigitalOcean and add your domain, and select the server you wish to host the site on.
  • Then go to Forge and create a new site, adding the domain
  • Give it some time so DNS can propagate and visit the domain, you'll see phpinfo() default page created by Forge.

Hope that helps, Alen.

alenabdula left a reply on Vue Router, Execute Method On Main Instance • 1 month ago

I've ended up solving this by using watch on the main instance.

const dashboard = new Vue({
    router,
    el: '#dashboard',
    data: {
        nav: {
            active: false,
        }
    },
    methods: {
        toggleNav() {
            this.nav.active = !this.nav.active;
        }
    },
    watch: {
        '$route' (to, from) {
            this.toggleNav();
        }
    }
});

Still would like some input if this is the "correct" way to do what I'm trying to achieve.

Thanks.

alenabdula started a new conversation Vue Router, Execute Method On Main Instance • 1 month ago

Take following example of main VueJS instance:

const dashboard = new Vue({
    router,
    el: '#dashboard',
    data: {
        nav: {
            active: false,
        }
    },
    methods: {
        toggleNav() {
            this.nav.active = !this.nav.active;
        }
    }
});

Somewhere in my HTML, I have a hamburger like navigation with anchor that toggles navigation visibility.

<a href="#" class="nav-toggle" @click.prevent="toggleNav()"></a>

All works great and as expected.

Now, I would like toggleNav() to execute when clicking on a router-link element. Which loads another component.

<router-link :to="{ name: 'dashboard' }">Dashboard</router-link>

Currently, when I click on a router-link, component loads fine but navigation stays active.

Any help is appreciated.

Best, Alen.

3rd May, 2017

alenabdula left a reply on Laravel Mix Not Properly Loading JQuery? • 2 months ago

Try assigning jQuery

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

alenabdula left a reply on Check Which Form Error(s) Belong To • 2 months 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 • 2 months 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] • 2 months 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 • 2 months 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 • 2 months 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!! • 2 months 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 • 2 months 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 • 2 months 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 • 3 months 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?? • 3 months 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 • 3 months 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 • 3 months 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 • 3 months 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... • 3 months 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 • 3 months 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? • 3 months 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 • 3 months 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 • 3 months 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

Edit Your Profile
Update

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