alenabdula

Web Designer / Developer at Sonora DesignWorks

Experience

52,155

32 Best Reply Awards

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

15th September, 2017

alenabdula left a reply on Is 2 Weeks For Learning Laravel Fast? • 1 week ago

Besides, what does it mean learn Laravel?

This 100%!

It really depends on what you are trying to accomplish. Is two weeks enough to get the basics down so you can have something up online, sure, however, learning Laravel is only part of the puzzle.

When I was in school, curriculum was behind to where the current state of web was at the time. So I switched all my classes and ended up learning on my own, after school.

Keep in mind that everything is hard before it's easy... so it's going to take some time before everything "clicks", take it slow and learn at your own pace and when you can.

Also, you have this great community always willing to help. Best of luck.

4th September, 2017

alenabdula left a reply on Vue.js Components And SEO • 2 weeks ago

You shouldn't be rendering main content you're trying to index with Vue. Instead use Vue to add interactivity or extend HTML elements. As you said

for some user interactions/actions where possible

Such things don't really impact SEO anyways, if your main content is rendered with Blade and available for Google bot to index.

alenabdula left a reply on V-for Inside V-for • 2 weeks ago

Your HTML is not correct, that could be the problem.

try

<ul v-for="item in order.type">
    <li v-text="item.name"></li>
    <ul v-for="option in item.options">
        <li v-text="option.name"></li>
    </ul>
</ul>

31st August, 2017

alenabdula left a reply on Laravel 5.5 New Preset Feature • 3 weeks ago

@tyn Someone should file an issue on GitHub. I get the same error, when running following:

  • laravel new laravel.dev
  • php artisan preset none
  • yarn run watch

and get

WARNING  Compiled with 2 warnings

These dependencies were not found:

* bootstrap-sass in ./resources/assets/js/bootstrap.js
* jquery in ./resources/assets/js/bootstrap.js

removing following should be part of the scaffolding command, as jQuery is not and bootstrap is not in the package.json file.

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

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

    require('bootstrap-sass');
} catch (e) {}

28th August, 2017

alenabdula left a reply on Manipulating The DOM With Vuejs • 3 weeks ago

@ArchStanton

Do not include another library just to do simple things. Unless you just need it to work and don't have time to mess around! Anyways...

VueJS click even is passed to the function, along with the target element that was clicked. So you can add/remove/toggle classes.

Here's a quick example, https://codepen.io/alenabdula/pen/QMZmgz

Hope that helps, best Alen.

alenabdula left a reply on What Is The Actual Role Of Forge • 3 weeks ago

I've been on Digital Ocean for a while, and with Forge as soon as it was available. Never looked back. Once I had to regenerate my SSL certificate on Forge, forgot why, but it was simple click of a button. Forge provides everything I need and more, I've been satisfied.

Also, Forge is independent of Digital Ocean, so you can use Linode, Amazon or Custom VPS.

Hope that helps. Best, Alen.

26th August, 2017

21st August, 2017

alenabdula left a reply on Still An Error With Npm Run Dev • 1 month ago

Remove the trailing comma

    "vue": "^2.1.10"
  },

18th August, 2017

alenabdula left a reply on Vue Component Inside A Foreach Loop • 1 month ago

@ekrist1 There's nothing wrong with using Vue components in Blade's @foreach. Especially if the component requires specific data (in your case a contact). You can pass data as props, for example...

@foreach($contacts as $contact)
  {{ display something }}
  <favorite :contact="{{ $contact }}"></favorite>
@endforeach

Or, you can have a contacts component, that accepts the collection of $contacts and uses Vue's v-for to loop over them, for example.

<contacts :contacts="{{ $contacts }}"></contacts>
// Contacts.vue
<template>
  <div>
    <contact v-for="contact in contacts" :key="contact"></contact>
  </div>
</template>
<script>
  export default {
    props: ['contacts'],
  }
</script>
// Contact.vue
<template>
  <div>
    <!-- template for each contact -->
  </div>
</template>
<script>
  export default {}
</script>

Hope that helps, best Alen.

alenabdula left a reply on Search/filter Through Array From Another Component • 1 month ago

In your Search component you declare the props, but did not pass any.

<search :conversations="conversations"></search>

13th August, 2017

6th August, 2017

alenabdula left a reply on Display Image From Laravel Public Folder In A Vue Component • 1 month ago


new Vue({
  el: '#app',
  data: {
    image_src: '/img/obr1.jpg',
  }
});
<img :src="image_src">

31st July, 2017

alenabdula left a reply on Best Practice For Calculations • 1 month ago

@graveeel

There would be 10 http requests

You're misunderstanding me. I'm saying, do calculations to visually present information to the user. Your initial AJAX request will contain, the price and etc., you wont be sending on any requests. Only when user is done and submits would you send request and do server calculations are required.

alenabdula left a reply on Best Practice For Calculations • 1 month ago

I wouldn't do any calculations on the client side unless it enhances the user experience. So visually you can see, for example, invoice total charge when you add or remove items. But you would only submit item IDs, do the calculations in the back-end, then charge the CC or do whatever is required, and then you can return appropriate response via Http or API.

23rd July, 2017

alenabdula left a reply on Laravel Auth With Vue Or Any Other JS Framework • 1 month 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 • 2 months 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 ? • 2 months 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 months 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 months 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 months 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 months 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 months 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 months 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 months 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...? • 2 months 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...? • 2 months 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? • 2 months 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 • 2 months 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? • 2 months 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 • 3 months 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 • 3 months 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 • 3 months 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? • 3 months 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 • 3 months 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 • 3 months 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 ? • 3 months 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. • 3 months 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. • 3 months 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 • 3 months 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 • 3 months 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 • 3 months 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 • 3 months 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 • 3 months 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 • 3 months 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? • 4 months ago

Try assigning jQuery

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

alenabdula left a reply on Check Which Form Error(s) Belong To • 4 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 • 4 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] • 4 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]');
Edit Your Profile
Update

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