alenabdula

Web Designer / Developer at Sonora DesignWorks

Experience

40,665

25 Best Reply Awards

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

22nd March, 2017

alenabdula left a reply on Axios • 1 week 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 • 1 week ago

Forgot to mention:

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

alenabdula left a reply on Axios • 1 week 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? • 1 week 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 • 1 week 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 • 1 week 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 • 1 week 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 • 1 week 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 • 1 week 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 weeks 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 • 3 weeks 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 • 3 weeks 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? • 3 weeks 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 • 3 weeks 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? • 3 weeks 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? • 3 weeks 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? • 3 weeks 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? • 3 weeks 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 • 3 weeks 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? • 3 weeks 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? • 3 weeks 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? • 3 weeks 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? • 3 weeks 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 • 3 weeks 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 • 1 month 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 ? • 1 month ago

@Chris1904 what he said!

15th February, 2017

alenabdula left a reply on Exclude JQuery From Laravel.mix • 1 month ago

So there is no way to exclude jquery from my compiled app.js just yet?

I'm pretty sure Mix doesn't require jQuery. And you can totally remove jQuery if you want. As I mentioned in my initial post, here is the series of steps I took:

laravel new _demo
cd _demo
# remove jQuery from package.json file
yarn
# comment out bootstrap.js file
npm run dev
npm run production

alenabdula left a reply on Webpack And Bulma CSS Compilation Error • 1 month ago

@chintan

Like @Leuchte said Bulma is CSS not JS. You compile it to your app.css file, and use its classes to mockup a template, component, etc... So your setup should take the shape of following:

/* webpack.mix.js */
const { mix } = require('laravel-mix');

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

In your layout file you should have something similar to following:

<head>
<link rel="stylesheet" href="{{ mix('/css/app.css') }}">
</head>
<body>
<!-- page content -->

<script src="{{ mix('/js/app.js') }}"></script>
</body>

And SCSS! Moreover, if you need to change variables in Bulma place them above the @import, like so:

// app.scss
$body-background: whitesmoke;
@import './node_modules/bulma/bulma.sass';

Hope that helps.

14th February, 2017

alenabdula left a reply on Front End • 1 month ago

@anmol anything in the public folder is publically accessible. You may create public/img/name-of-image.jpg and your CSS would take the shape of:


/* inline on style tag */
background: url('/img/name-of-image.jpg') center center;

/* css file */
background: url('../img/name-of-image.jpg') center center;

13th February, 2017

alenabdula left a reply on Token Mismatch Exception. Unexpected $ • 1 month ago

@canadianlover

Looking back, you're already using "{{ csrf_token() }}" on interceptors, then for the common header you're querying the DOM, try following.


var csrfToken = "{{ csrf_token() }}";

window.Vue = Vue;
Vue.http.interceptors.push(function (request, next) {
request.headers['X-CSRF-TOKEN'] = csrfToken;
next();
});
Vue.http.headers.common['X-CSRF-TOKEN'] = csrfToken;


alenabdula left a reply on Front End • 1 month ago

it still isn't working

Please be more specific.

Are there any 404 errors in the console.

It's possible that it's a CSS issue. Try


<div
    class="jumbotron"
    style="background: url('42004077_762686035815613659_o.jpg') center center"
></div>

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

alenabdula left a reply on Front End • 1 month ago


<div class="jumbotron" style='background-image:url('42004077_762686035815613659_o.jpg  '>

// should be

<div
    class="jumbotron"
    style="background-image:url('42004077_762686035815613659_o.jpg')"
></div>

alenabdula left a reply on Token Mismatch Exception. Unexpected $ • 1 month ago

Uncaught ReferenceError: $ is not defined at 1:78

not sure if you need Vue.use(VueResource); looking at the docs page.

alenabdula left a reply on Token Mismatch Exception. Unexpected $ • 1 month ago

I usually would do this in the <head> section.


<script>
window.App = <?php echo json_encode(['csrfToken' => csrf_token()]); ?>
</script>


Vue.http.headers.common['X-CSRF-TOKEN'] = {
    'X-CSRF-TOKEN': window.App.csrfToken,
}

// or if using axios

window.axios.defaults.headers.common = {
    'X-CSRF-TOKEN': window.App.csrfToken,
    'X-Requested-With': 'XMLHttpRequest'
};

There's no reason, IMO, to query the DOM and make browser do the work when when you can make that information available when browser is parsing the code.

Hope that helps.

alenabdula left a reply on Vue Component Not Showing • 1 month ago

You need to add your component to VueJS instance.


const app = new Vue({
  el: '#app',
  components: {
    videoup,
  }
});

alenabdula left a reply on Webpack And Bulma CSS Compilation Error • 1 month ago

Try @import './node_modules/bulma/bulma.sass';

alenabdula left a reply on Exclude JQuery From Laravel.mix • 1 month ago

@Snapey it is but there's no need to keep jQuery in your dependencies when you don't need it.

alenabdula left a reply on Exclude JQuery From Laravel.mix • 1 month ago

  1. Delete node_modules folder. rm -rf node_modules
  2. Modify your package.json file and remove jQuery
  3. Modify /resources/assets/js/bootstrap.js and remove window.$ = window.jQuery = require('jquery'); as well as require('bootstrap-sass'); since Bootstrap JS requires jQuery.
  4. Download node dependencies by typing yarn or npm install

Hope that helps.

7th February, 2017

alenabdula left a reply on Laravel 5.3 Submit Form Does Nothing :( • 1 month ago

You might need {{ method_field('DELETE') }}

6th February, 2017

alenabdula left a reply on Laravel Mix - Required JQuery Plugins Can't Be Found • 1 month ago

_bootstrap.js needs to be required before require('fullcalendar');

1st February, 2017

alenabdula left a reply on Becoming An Expert Laravel Developer • 1 month ago

my code is just not good enough

Don't get hung up on thinking like this. Code is disposable. Easily replaceable. Focus on solving problems and just build stuff. Take constructive criticism and ignore the rest.

Remember that everything is hard before it's easy.

15th January, 2017

alenabdula left a reply on Upload MP3 Files On Laravel • 2 months ago

I've rewrote some of this logic, code is not tested but hopefully it gives you some direction.

if ( $request->hasFile('featured_mp3') ) {
    // The file
    $file = $request->file('featured_mp3');
    // File extension
    $extention = $file->getClientOriginalExtension();
    // File name ex: my-audio-song.mp3
    $name = str_slug($request->title) . '.' . $extention;
    // Path
    $public_path = public_path();
    // Save location /public/audio/mp3
    $location = $public_path . '/audio/' . $extention;
    // Move file to /public/audio/mp3 and save it as my-audio-song.mp3
    $file->move($location, $name);
    // Save link to the file /audio/mp3/my-audio-song.mp3
    // So in your view you can link to it.
    $posts_music->mp3 = 'audio/' . $extention . '/' . $name;
}

Best, Alen

alenabdula left a reply on Upload MP3 Files On Laravel • 2 months ago

mp3 column is empty

You need to save a URL as a string that points to the file. Something like audio/my-audio-file.mp3

see my comments below.

if ( $request->hasFile('featured_mp3') ) {
    // The file
    $music_file = $request->file('featured_mp3');

    // This will return "mp3" not the file name
    $filename = $music_file->getClientOriginalExtension();

    // This will return /audio/mp3
    $location = public_path('audio/' . $filename);

    // This will move the file to /public/audio/mp3/
    // and save it as "mp3" (not what you want)
    // example: /public/audio/mp3/mp3 (without extension)
    $music_file->move($location,$filename);

    // mp3 row in your column will just say "mp3"
    // since the $filename above is just an extension of the file
    $posts_music->mp3 = $filename;
}

16th November, 2016

alenabdula left a reply on Save Polymorphic Table • 4 months ago

I've created this repo for you, home it helps

https://github.com/alenabdula/laravel-polymorphic-relations

alenabdula left a reply on Save Polymorphic Table • 4 months ago

If one is commenting on the particular article, you should already have the article. I'm not sure why you're creating new one with $article = new Article;

Try this... code not tested


public function comment(Request $request)
{
    $this->validate($request, ['comment' => 'required']);
    $article = new Article;
    $article->comments()->create([
        'commentable_id' => $article->id,
        'body' => $request->comment
    ]);
    return redirect()->back();
}

Hope that helps.

14th November, 2016

alenabdula left a reply on Anyone Use URL Based Image Manipulation? • 4 months ago

Also worth reading following 6 part series by CloudFour https://cloudfour.com/thinks/responsive-images-101-definitions/

Edit Your Profile
Update

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