DEV Community: Luca

Horizontal scroll on mouse wheel: nothing easier!

Luca — Tue, 16 Nov 2021 20:45:57 +0000

Hi Dev! 🙋‍♂️

I've used this easy way for a horizontal scroll a lot and I want to share the code with you: ✌️

HTML

<div class="horizonal-wrapper">
  <div class="horizonal-content">
    <div class="content-1"></div>
    <div class="content-2"></div>
    <div class="content-3"></div>
  </div>
</div>

.horizonal-wrapper {
   height: 100vh;
   width: 100%;
   overflow-y: scroll;
}

.horizonal-content {
   width: max-content;
}

.content-1,
.content-2,
.content-3 {
  width: 50vw;
  height: 100vh;
  float: left;
  border: 1px solid;
}

$('.horizonal-wrapper').on('wheel', function(e){

   e.preventDefault();
   $(this).scrollLeft($(this).scrollLeft() + e.originalEvent.deltaY);

});

This is my fiddle example:
https://jsfiddle.net/k0bojwhu/

Thank you and good coding! 🧑‍💻

Intersection Observer API: you need it!

Luca — Tue, 02 Nov 2021 21:25:50 +0000

Hi Dev!🙋‍♂️

Today i want to talk you about the Intersection Observer API!
I'm in love whit this API, because it is simple to use and it is very usefully for your projects.

This is what you need:

Select you element: ☝️

const elements = document.querySelectorAll('.elements');

Create a function and add/remove class when the element is visible or not inside the window: 📪📫

function handleIntersection(entries) {
  entries.forEach((entry) => {
     if (entry.isIntersecting) {
       entry.target.classList.add('visible')
     } else {
       entry.target.classList.remove('visible')
     }
  });
}

Create you variabile with the API and the function: 🐝

var observer = new IntersectionObserver(handleIntersection);

Add the config: ✍️

var config = {
  root:null,
  rootMargin: '0px',
  threshold: 0 
}

var observer = new IntersectionObserver(handleIntersection, config);

Observe all the elements: 🧐

elements.forEach(element => observer.observe(element));

Every time the target is near the window, the observe api look for the elements and add/remove the class (in this case .visibile).

Thank you for read!🧑‍💻

Carousel? You don't need JS.

Luca — Thu, 18 Mar 2021 20:51:04 +0000

Hi Dev!👨‍💻

Today i have founded a simple way for create your carousel easily without JS.

This is your "magic touch" 🧙:

scroll-snap-type: x mandatory;

➕

scroll-snap-align: center;

With this properties, you can own a simple slidable carousel like my fiddle example:

If you want, you can add a dots, and anchor the images for scroll to a different image.

<!-- My images -->
<div class="images">
   <img id="1" src:"">
   <img id="2" src:"">
   <img id="3" src:"">
   <img id="4" src:"">
</div>

<!-- My dots -->
<div class="dots">
   <a href="#1">&#9737;</a>
   <a href="#2">&#9737;</a>
   <a href="#3">&#9737;</a>
   <a href="#4">&#9737;</a>
</div>

Hope it is helpful!
🙌

jQuery trigger()

Luca — Thu, 14 Jan 2021 21:15:50 +0000

Hi dev!🙋‍♂️

During my work i used an event looks very interessant: is a trigger() event.

The trigger() method triggers the specified event more times:
🧑‍💻

<button type="button" class="click"> CLICK </button>

<div class="container">
</div>

$('.button').click(function(){
    $(document).trigger('nameOfMyTriggerEvent')
})

$(document).on('nameOfMyTriggerEvent', function(){
    $('.container').hide();
})

It's easy and very usefull if you need to trigger an event more times.

Hope it helpfully!
✌️

My new GitHub ReadMe. 🎨

Luca — Mon, 31 Aug 2020 09:10:03 +0000

Hi Dev!

Yesterday i spend a pair of hour for personalize my github profilo; what do yuou think about that? Do you like it?

If you want to see it "in live" with GIF, this is the link to my GitHub profile.

https://github.com/Ljnce

Thank your for watching!🙋

forEach( ): Object.values / Object.keys

Luca — Sat, 22 Aug 2020 16:00:20 +0000

Hi!🙋‍♂️

I wrote this article for show you this 3 forEach ways:

Take this simply array:

var array = [
    {
        name: 'John'
    },
    {
        name: 'Mary'
    }
];

If you want to cycle the element with forEach() method, you have three ways:

Keys:

Object.keys

Object.keys(array).forEach(function(key) {
    console.log(key); //--> 0 1
});

Values:

Object.values

Object.values(array).forEach(function(value) {
    console.log(value);  //--> name: 'John' name: 'Mary'
    console.log(value.name);  //--> John Mary
});

forEach:

.forEach

array.forEach(function (val) {
    console.log(val); //--> name: 'John' name: 'Mary'
})

.map( ) .forEach( ) for( ). 👉 Three ways for create an array and push it:

Luca — Fri, 21 Aug 2020 15:16:50 +0000

Hi dev! 👩‍💻 👨‍💻

I want to show you 3 different way for push a value intro your array empty, with the same result.

First of all, we have easy our array like this: 🗂



var array = [
    {
        name: 'John'
    },
    {
        name: 'Meg'
    }
];

In order by the most easiest, the first method is .map();
We need to create a new variable, take our array, and the return which value we need to push into this new variable:



var newArray = array.map(function(singleElement){
    return singleElement.name;
})

console.log(newArray); // return ['John', 'Meg']

The second method is forEach(); we need to create a new empty array, and then call forEach() method for push our values into a new array created before:



var newArray = [];

array.forEach(singleElement =>{
    newArray.push(singleElement.name)
});

console.log(newArray); // return ['John', 'Meg']

The third method is the classic one with a for() cycle.
We need to create new empty array, cycle our array, define the values you want to push into a new array, and then push it:



var newArray = [];

for (var i = 0; i < array.length; i++) {
    var singleElement = array[i];
    var name = singleElement.name;
    newArray.push(name);
}

console.log(newArray); // return ['John', 'Meg']

The results is the same for all methods:

Hope this small article is interesting for you 🙋‍♂️

How to print your API easily with Handlebars and Ajax. 🎯

Luca — Wed, 19 Aug 2020 14:23:20 +0000

Today I want to show you how to use Handlebars for print your API from an Ajax call. 👩‍💻

First of all you need to take Handlebars script on the site:
https://handlebarsjs.com

FIRST (HTML):
1️⃣) On your head you need to add a script:

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.    3/handlebars.min.js"></script>
</head>

2️⃣)Create your "div space" where you want to print your handlebars template

<div class="append-here>
   <-- your template append here -->
</div>

3️⃣) On bottom of your page you need to add your template:

<head>
 <script id="template" type="text/x-handlebars-template">
      <!-- Insert here the data which you want to print with an Ajax  -->
 </script>
</head>

SECOND STEP (JAVASCRIPT)

1️⃣) Call your API with a classic Ajax call:

var baseUrl = 'https:...';

$.ajax ({
    url: baseUrl,
    method: 'GET',
    success:function(data){
        printData(data);
    },
    error: function(){
        alert('error');
    }
})

2️⃣) Cycle your data, determinate a object (in this case dataStamp) and the append the result into your handlebars template like this:

var source = $("#template").html();
var templateMissions = Handlebars.compile(source);

function printData(datas){
    for (var i = 0; i < datas.length; i++) {
        var data = datas[i];
        var dataStamp = {
            name: data.name,
            description: data.description,
            img: data.imageUrl
        }
        var template = template(dataStamp)
        $('.append-here').append(template);
    }
}

Ok summing up:
❗) Source is your html template, and determinate a variable for compile your handlebars template.

var source = $("#template").html();
var template = Handlebars.compile(source);

❗)After cycle you need to determinate which data you want to append on your template, and in which div class you want to append/see your API print.

var template = template(dataStamp)
$('.append-here').append(template);

THIRD STEP
Append this on your HTML handlebars template with:

<script id="template" type="text/x-handlebars-template">  
<h1> {{name}} </h1>
<p> {{description}} </p>
<img src="{{image}}" style="height:100px">
</script>

It is an easy way for print all your API result with HTML and Javascript, like a PHP method @foreach. 💁‍♂️

How to call API from Axios in Vuex store. 💾

Luca — Wed, 12 Aug 2020 11:56:42 +0000

Hi Dev Friends! 🤠

In this.tutorial i will show you in which mode you can use Axios with Vuex, and call it on you file.Vue.

STEP ONE:

First of all you can add Vuex on your project:

0️⃣) I suggest you to add this, during the installation of Vue.cli, via "manual installation":

vue create project

After this you need to install Axios:

npm install --save axios vue-axios

Import Axios on your store -> index.js

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(Vuex)
Vue.use(VueAxios, axios)

STEP TWO:

And now let's create👩‍💻:

1️⃣)Determinate your items.

export default new Vuex.Store({
  state: {
        items: [],
    },

2️⃣)Your getter:

    getters: {
        items: state => {
            return state.items;
        }
    },

3️⃣)Mutation of your items

    mutations: {
        SET_Item (state, items) {
            state.items = items
        }
    },

4️⃣)Action for call your API on you file.Vue

    actions: {
        loadItems ({ commit }) {
            axios
                .get('Your API link', {
                    headers: {
                        'Ocp-Apim-Subscription-Key': 'your key',
                    }
                })
                .then(response => response.data)
                .then(items => {
                    console.log(items);
                commit('SET_Items', items)
            })
        }
    },
});

STEP THREE:

Now it's time to call your "items" on your file.Vue:

1️⃣)Import you mapState from vex:

   <script>

import { mapState } from 'vuex';

2️⃣) With mounted you can stamp your API, and use "dispatch" method to call the "action" (the difference with mutations is you can use "mounted" method).


    mounted () {
        this.$store.dispatch('loadItems')
    },

3️⃣)Add mapState on your computed:


     computed: mapState([
        'items'
    ]),

</script>

4️⃣)Compile you template with your API.

<template>
  <div class="my-items">
    <div v-for="item in items" :key="items.id">
       // Your v-for...
    </div>
 </div>
</template>

Hope I help you!
🙋‍♂️

A "beautify touch" for your GitHub profile. 🤩

Luca — Sat, 08 Aug 2020 12:33:13 +0000

This is a small and easy trick, for beautify your personal GitHub page.
👨‍💻🎨

1️⃣
Oper your GitHub page, create a new repository, and give it the name of your GitHub profile.
If it's all good, you can see a message like this:

2️⃣
Create a README.md file inside your new repository, give it a style (you can fine a lot of example online).

3️⃣
Commit you README and "et voilà", that's all folks: now you can find a new section on the right of your profile picture.

Hope I help you; it's an easy way with a good result! 🖼

My first site/small Blog is online! I appreciate every Dev feedback 🤠

Luca — Thu, 06 Aug 2020 21:05:40 +0000

Hi Community! 👨‍💻

This is my first site; i developed a small blog about my passion: running around the world.
https://therunnerpost.it
It's created with Laravel mix, SCSS, jQuery, Chart.js, Handlebars; and is all in Italian (my language).
I appreciate every feedback about it... Mobile view looks more good for me 🙃 ("Mobile first" is my best quote).

Why Vue.Js is the best way? 5 advices for your choice 📝

Luca — Thu, 06 Aug 2020 08:50:48 +0000

Hello Community! 🙌

Today i want to show you 5 advices for choose Vue.js like your Js Framework. It have a lot of features, but for me this is the best 5 for help you to know the "power" of Vue.

Simply to use 👨‍💻
Vue CLI desktop/smartphone "live page refresh" 💻📱
Router 🚃
Npm package 🎁
Easy to build ✅

1️⃣ Simply to use 👨‍💻 :

You know the base of HTML, CSS and Javascript? You are ready to use Vue.js.
Vue file is very simply and intuitive; you have:
Template where you can write your HTML,
Script where you can write your Js,
Style where you can write your CSS or SCSS lang


<template>
    <!-- Your HTML -->
</template>

<script>

export default {
    // Your JS
}

</script>

<style lang="css">
    /* Your CSS or SCSS */
</style>

2️⃣ Vue CLI 💻📱:

Install Vue CLI is the best way for you; it’s awesome, and it’s give to you all the file you need for your Vue app.


vue create hello-world

Another trick? After run NPM RUN SERVE, when you you save your modify (CMND + S), you can see the change “in live” without refresh you page every time.
Vue CLI give you easily way for see your change with a pc browser like “Local url”, or via mobile like “Network url”.

3️⃣ Router 🚃:

This is another awesome Vue feature; Vue created an easy way for navigate between the page: after install your router, you have need to set the route for you file.vue

And then set the router-link “button” for navigate in this page.

4️⃣ Npm package 🎁:

You have a lot of package for install what you need; after install you need only to “import” the element on your file.vue script or globally on your main.js, and you can use your favorite package!


<script>

import axios from 'axios';

</script>

*In this case i used Axios

5️⃣ Easy to build ✅:

This is last step:


npm run-build

After this command you can copy index.html and /dist/ folder into your website root directory, and it’s Done, your first Vue site is online!

Hope this info help your on a choice of Js framework... In this case, VUE!
🙋‍♀️