DEV Community: Mina Farag

Vue events causing your page to reload, Here is a quick fix

Mina Farag — Fri, 13 Nov 2020 13:38:34 +0000

Hello hello, I know it's a very annoying issue to find your page reloads after submitting a form or clicking a link that triggers a Vue event handler.

To be on the same page I added this dummy code to increment a number by clicking an anchor tag.

<div id="app">
    <a href="#" @click="handleIncrement">Click to increment</a><template> You clicked me: {{count}}</template>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el:'#app',
        data:{
         count:1
        },
        methods:{
           handleIncrement(){
              this.count++
           }
        }
    })
</script>

Notice the anchor tag reference is equals to a '#' hashtag, If you removed this hashtag you will break the flow and nothing will happen when you click the same link.

But leaving this hashtag causes the issue I'm talking about, you'll find the page reloads after every and each single click. This issue is known as the default behavior.

Because Vue is a very smart JS framework the solution is very handy. You'll add ".prevent" to the event handler so it will be like "@click.prevent" this will prevent the default behavior after clicking the link.

Check the following code updates

ADD: ".prevent" to the event handler (@click ->@click.prevent)
UPD: the anchor-tag and nullified the reference (href="#" -> href='')

<a href="" @click.prevent="handleIncrement">Click to increment</a><template> You clicked me: {{count}}</template>

Now your page will work like a champion and never reloads again.

What was my dream , yesterday ? as a - DEV -

Mina Farag — Wed, 29 May 2019 10:04:08 +0000

Since i've joined a remote team of passionate developers, To work on a very exciting advanced Laravel system. My brain started to build a new type of dreams that am not used to. like the one i saw yesterday.

Yesterday's Dream:

i slept in a latehour as usual because am a night owl developer. After being a sleep for a while i remember seen a blank bright white screen and suddenly i felt my well and myself started to type a static class called Dream like so:

<?php 
class Dream {

  public static function getRandom($rnd){
        return Dreams::all()->find($rnd);
  }

Then i returned back to a new blank white screen , and with a beautiful thin black font i coded

<?php
use Dream;
$currentDream = Dream::getRandom(4);

Dream Execution

and it was fascinating , like a whole new movie has just started and i was into it literally. after a while i felt like i needed to change the dream so i CMD+Tab and get back to the blank white again. i called the static function changing the random number argument.

Suddenly i start seeing a new dream of my ex , my old town and a lot of old friends.

I woke up

I was very amazed with how our brains as a developers function?, And i literally loved my yesterday scenario and the way my brain amazingly did it. So i decided when i wake up i will share it here.

thanks for your time

AI Short Note

Mina Farag — Tue, 14 May 2019 12:04:06 +0000

Short Note on AI:

By default when two biological smart entities start chatting each other.

They follow a polymorphic custom pattern (PCP) , Each PCP is a reflection of a developed characteristics within each entity.

After a time-distance period with a continuous both-ways chatting process, We would notice private custom made language usage. Like one-to-one private dictionary.

The Smart of both entities is collaborating to form and coming up with a custom private higher level conversations. Not yet publicly available outside the one-to-one relation but capable of carrying out new comprehensive references cleared for both of them.

This short notice is typically happened when we - as humans - tried to let two Artificial intelligence entities chatting each other. in seconds they formed and built their own custom private higher level conversations.

By
Mina Farag

References:
Facebook Chatbots 2017

Build your First Laravel Helpers

Mina Farag — Thu, 31 Jan 2019 21:28:02 +0000

What are Helpers?

helpers are all the little tiny magical methods you'll create today. It's a more advanced way of increasing your code efficiency and clearance.
In a WebDev way of declaring stuff: It's group of custom-built methods but not classes.

Let's Set it up.

[1]
using any IDE - i use sublime myself. Please create a new (.php) file & name it (helpers.php), Then save it to your app directory.

your-side (dir) will be like

app/helpers.php

note

we don't use the (.blade.php) layer for this file.

[2]
let's assume you wanna inject your layout.blade.php template file with FontAwesome Icons-Api. So the usual way is to just add a link tag referencing your Api like the following:

code

<head> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"crossorigin="anonymous"> </head>

note

i've deleted part of the link ,but you can have a new full-api-link here

[2-2]
Side-Question/ Please think with me, What if you wanna use more apis?
Answer/ aooch A head tag filled with blocks of multiple unclean lines.

[3]
give yourself [5-minutes] : eyes-looking-to-the-ceiling. Work your mind to create a feature that can clean up our code? you can use a paper and a pencil.

[3-2]
now We're talking about a helper feature or functionality & Yeaaa for sure this is one tiny purpose of using Laravel Custom Built Helpers. So let's get back to our empty file ( app/helpers.php ) and start adding some code to it as shown:

code

<?php function fontawesomeloader(){ echo '<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"crossorigin="anonymous">'; }

note

i prefer using snake-case naming style for Laravel helpers.

[3-3]
now let's get back to our layout.blade.php please Erase the previous link tag was added in [Point: 2] , Then please replace it with the helpers method-name we added in [Point: 3-2] fontawesomeloader(). Now Refresh your page. And Ohhh nothing works what's wrong ?!!

laravel will throw an exception saying it can't find any function called fontawesomeloader(). let's fix that.

remember we declare the helpers function name like this {!! fontawesomeloader() !!}

[3-4]
please goto a file within your main project directory called (composer.json) , you'll find it in a directory like this (LaravelProjectName/composer.json).

Within file please search for "autoload": {

[3-5]
now edit the code inside the "autoload" object to be like the following code

code

"autoload": { "psr-4": { "App\\": "app/" }, "classmap": [ "database/seeds", "database/factories" ], "files":[ "app/helpers.php" ] }

note

we added our helper.php file location inside the files-Array ,This is called __ Registering __ your Helpers.

Now you've registered your helpers.php file and open it for random call/access within anyfile inside your project directory.

and Oaoooo , nothing works AGAIN.

[3-6]
One final step to turn it on forever. Please go to your Terminal. and cd to your project directory then execute the following command

code

composer dump-autoload

[4]
Ohhhh FINALLY NOW IT's WORKING.
Great News,your helpers are up and running & you can easily add as many methods as you like.

You've done a great job learning and setting up your first Laravel Helpers.
and am very happy and proud of you.

[4-1]

Isn't Laravel so beautiful ?

[5]

Thanks for your time and patience.

i hope i was useful to you. please try it out and modify the code i wrote. Develop your own helpers and comment it out here if you like.

Building Components in the Beautiful Laravel

Mina Farag — Thu, 24 Jan 2019 17:44:06 +0000

In the beautiful Laravel We've so many useful tools to cutdown development-time and help building scalable modern web-apps. In this tech-note i'd like to guide you through the process of building and using Components.

1- What are Components in Laravel?

Components are a reusable group of elements. Like you may want to create a Navbar to be used in almost all of your web-app pages. So you build your Navbar as a Component and tell laravel to grab it whenever you need it, and for many times as you like.

2- how do i build & use Components ?

2-1
First of all let's create a new directory inside our Resources directory in a Laravel project, So at your side you'll have something like this structure (resources/views/layouts/components) .

2-2
Make a new file and call it ( navbar.blade.php ) and save it inside ' components ' directory you've just created in step 2-1 .

2-3
With any IDE ,'maybe sublime', Please copy and paste the following bootstrap Navbar code to your file navbar.blade.php

note that: i've deleted most of the navbar-tags for the reading-time but you can find the full tags code at BootStrap

code

<nav class="navbar navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> </nav>

2-4
We've created components directory , navbar file as our new component example and finally added the code to the navbar.blade.php . Now it's time to use it. i will give you the Easy way first , then the professional way later on.

(Easy way):
Inside any page of your project let's assume it's index.blade.php and for sure it's inside the ' views ' directory, Please start using the following blade-directive.

code

@component('layouts.components.navbar') @endcomponent

And you did it !! , Now you've successfully created a navbar-component and used it. But if you noticed this navbar is totally hardCoded and this is not good for building a dynamic project. So let's add some modifications to the navbar tags at navbar.blade.php .

2-4-2
I Will add a variable called barndName, please notice the following code modifications:

code

<nav class="navbar navbar-light bg-light"> <a class="navbar-brand" href="#"> {{$brandName}} </a> </nav>

2-4-3
Now in the index.blade.php , I will inject the variable with a value to the component element using the same blade-directive like the following:

code

@component('layouts.components.navbar') @slot('brandName') value and it could be anything @endslot @endcomponent

please notice the new directive @slot , that i used to call the variable i've created in navbar.blade.php

A More Professional Way
We'll add a small modifications to the way we've just learned. and believe me it's not hard as it sounds. just follow my steps

2-4-4
Now what do you think if we named our component as navbar and just call it using the blade directive like @navbar, isn't it much easier and readable. Let's do it.

2-4-5
We need to tell laravel that the @navbar means the component navbar.blade.php you've just created, So please Laravel grab it once i call it @navbar.

Please go to the following file: (app/providers/appServiceProvider.php) , and go to the function boot() , then add the following code inside the function body

code

Blade::component('layouts.components.navbar','navbar');

the first part in brackets is the component location , and the second part is the name you wanna call it with. This process is called Aliasing.
now at any location in your webApp you just call your component with @navbar .

don't forget to import the Blade Facade inside your appServicesProvider.php .

OR just add this line before the class name.

code

use Illuminate\Support\Facades\Blade;

2-4-6
Now it's time to call your aliased , renamed component from any page within your webApp lets stay with index.blade.php (go back to point 2-4-3 to review the Easy way of calling your component)

now you just write the following code to call your navbar component and inject data to it.

code

@navbar(['brandName'=>'Munch any value']) @endnavbar

WOW you've just called your component and injected data into it.
please notice the following:

we inject data as an associative array. ['Name']=>['value'] pairs.
the name / key must have the same spelling as the variable in your component, review step (2-4-2).
if you defined more variables in your component, simply add them to your array like ['var1'=>'val1','var2'=>'val2'] .

2-5
Now you can easily build your own components and reuse it within any Laravel project you have just repeat the process whenever , wherever you want a component

3
Thanks for your time, i hope i was useful to you.
if you like my tech-note please feedback to me or give me hints on how to make it better.

Wait your White-Ice

Mina Farag — Tue, 22 Jan 2019 22:00:14 +0000

Today i was listening to a new episode of 'developer Tea' Podcast. At first look the topic was not-interesting in a way that i cannot resist changing the podcast player. But as an ODC holder i developed a habit of finishing whatever I've started.

So i shutdown my innervoices and kept listening to the podcast.

I really thanks god for not skipping this episode. The narrator was talking about something very very important in my point of view. He started with describing the water-freezing process, Yea you read it right and the smile you developed is the same as mine when i was in your shoes back then 3 to 4 hours ago.

The Water-freezing process:
imagine putting a glass of water in a transparent refrigerator, and now imagine yourself sitting in front of it. At first hour nothing really happens to the water but in your scientific mind your ideas now telling you that the heat of the water is decreasing. For the second hour nothing will happen as well the third and fourth hours. But you still waiting and the heat still decreasing unit by unit , degree after a degree.

After a while almost 6 hours of sitting in the same place. you suddenly noticed the White-Ice started to appear.

and after 6 hours of non-noticeable change the ICE appeared as it came out of nowhere.

This is what Continues Work Meaning. You keep up the good , hard work. While no one notice anything even you don't. But suddenly the white Ice will appear as a result of your patience , continues , gritty work.

Please keep up the good work , and have patience to see your Ice.