Forem: Diego Cachafeiro

HTML Drag and Drop API

Diego Cachafeiro — Tue, 16 Nov 2021 08:49:11 +0000

The Drag and Drop API allows you to, as its own name indicates, to create drag and drop interfaces for the users to interact with.

This API will make available for the users to select elements you allow to with a click, and drag them to the droppable interfaces you also allow them to, this is all customizable you will be able to indicate which elements are draggables and where can be drop into as easy as with some simple functions with some basic functionalities.

I'll explain to you step by step how to do a simple drag and drop for text:

First you need to identify what will be draggable, this can be done by adding the draggable attribute and the ondragstart handler:

<script>
  function dragstart_handler(el) {
    el.dataTransfer.setData("text/plain", el.target.id);
  }

  window.addEventListener('DOMContentLoaded', () => {
    // Reference to the element we will drag
    const element = document.getElementById("draggable");
    // Add the handler to the div to make it draggable
    element.addEventListener("dragstart", dragstart_handler);
  });
</script>

<div id="draggable" draggable="true">You can drag this element.</div>

After this you need to define what will the draggable object do when you drag it and drop it on the droppable zone, this will be done by creating a function with a dropEffect, there are three dropEffects:
1. copy the dragged object will be copied on the droppable zone.
2. move the dragged object will move to the droppable zone.
3. link indicates that some form of relationship or connection will be created between the source and drop locations.

For my example I will use the move dropEffect as follows:

function dragover_handler(el) {
  el.preventDefault();
  el.dataTransfer.dropEffect = "move";
}

For the last step we need to define a droppable zone, and the function linked to it, in this example we are moving the draggable object into de droppable zone:

<script>
function drop_handler(el) {
 el.preventDefault();
 const data = ev.dataTransfer.getData("text/plain");
 el.target.appendChild(document.getElementById(data));
}
</script>

<p id="target" ondrop="drop_handler(event)" ondragover="dragover_handler(event)">Drop Zone</p>

When we combine all the steps we will end up with a code like this codePen I created for you to test and see how its done, to test it you need to drag the text You can drag this element. into the text Drop zone for it to move.

To finish I will add that this is a little example on how can you use this API, there are many possibilities, for example you can also drag images, and drop them onto the droppable zone, not only text.

Differences between Javascript and Typescript

Diego Cachafeiro — Fri, 05 Nov 2021 08:37:33 +0000

In this article we are going to talk about the differences between Javascript and Typescript, they are two languages that are widely use nowadays in all types of projects, JS was the first to be introduced as client-side language. As time passed the projects were JS was being used started to be too complex and heavy, thats were TS enters the game, and starts as language to resolve all the problems that JS was having at the moment, nowadays TS is a language widely used also and is becoming bigger and bigger, so I hope that with this article I can help you a little bit to now any differences or to resolve any doubts.

There are many differences, now I'm going to show you a comprehensible list of differences.

Differences

JS is used for client-side mostly while TS is used mostly for both client-side and server-side.
TS has an improved readability, since JS requires a lot of manual detection of bugs and errors, this has been improved a lot by TS.
TS has static typing while JS doesn't support it since JS is a dynamically-typed language.
TS supports ES6.
TS has a full support in modern IDE.
TS can also convert its code to JS if necessary.
Using TS means that you can use OOP(Object-oriented programming) principles.
In JS functions are considered an object and they can have its own method and properties.

Conclusion

The choice is up to you at the end on what to choose if you want to work with this languages, you will have to balance the pros and the cons between both of them, and make an educated choice. Usually the option you choose will come from different variables like having in mind the size and complexity of the project you are going to work on, there are more differences between this two languages but the ones I wrote are the main ones and the important ones, I hope you like the article, any queries feel free to comment and ask!

JS Iterator objects

Diego Cachafeiro — Fri, 21 May 2021 08:08:00 +0000

When we want to iterate through an object we usually fall in the trap (or not) to use always the same iterators, like for or .map(), but there is a whole world of iterators in JS each one with their respective functions and differences between each other.

In this post I will explain to you practical uses and differences between .map(),.filter(), .find(), .reduce() and .forEach().

1. Starting with .map()

The .map() iterator will go through the elements in the array to populate a new array with the results of the function you provide inside of it.

const array = ["name1", "name2", "name3"];

// pass a function to map
const map = array.map((x, i) => {
  return x.concat(` surname${i+1}`);
});

console.log(map);
// expected output: Array ["name1 surname1", "name2 surname2", "name3 surname3"]

As you can see the .map() iterator creates a new array populated with what we passed inside of it.

2. `.filter()`

The .filter() iterates through the array and will return a new array populated with the elements that passes the condition provided inside of it.

const array = ["name1", "name2", "name3"];

// pass a function to filter
const filter = array.filter(x => !x.includes(2));

console.log(map);
// expected output: Array ["name1", "name3"]

3. `.find()`

The .find() method will return the first element that passes the condition inside of the array.

const array = ["name1", "name2", "name3"];

// pass a function to filter
const find = array.find(x => x.includes(2));

console.log(map);
// expected output: Array "name2"

4. `.reduce()`

The .reduce() method will execute a reducer function that you will provide inside of it, this will result in a single output value from the multiple elements inside of the array.

The reducer function can take four arguments:

Accumulator
Current Value
Current Index
Source Array

const reducer = (sum, val) => sum + val;
const initialValue = 0;
const arr = [1, 3, 5, 7];

const sumReduce = arr.reduce(reducer, initialValue);
console.log(sumReduce);
// 16

5. `.forEach()`

The .forEach() method will execute a function for each one of the elements in the array that iterates.

In case you are wondering why ever use foreach instead of the other ones, well forEach is more of a generic tool provided by Js, I'll tell you to use it when you don't have any better and more specific tool as we saw in the previous methods.

For example, the one that you can confuse it more is with .map() the difference between them is that map is for modifying the array and returning modified, while .forEach() can iterate through the array with any necessary modification like just console.log the array.

Well I hope this article helped you and provided you with a little more knowledge for your day to day coding, any suggestions or comments are welcome in the comment section.

Improving your web performance

Diego Cachafeiro — Mon, 22 Mar 2021 09:25:01 +0000

When we are developing, we all want our website to run as well as possible, but the thing is where do I start, or "I think my website is already sufficiently optimized", but there is always something that can be improved and with my post I hope to give you some tips that can improve the performance of your website even if it is only 2% is already a breakthrough, your users will thank you.
I want to emphasize that these are just a few things that you can improve on your website, that can make a big difference but for you it is a simple change.

The first thing you should know is that, although you have probably already noticed, google has changed its metrics that now become the core web vitals, these new metrics will be taken into account when google shows you in its search engine, the main ones to take into account are these

All these metrics will appear when you run Lighthouse with chrome, or in pageSpeed Insights

A small explanation of each of these metrics:

LCP(Largest Contentful Paint): This metric will measure how long it takes to load the largest element of the page we are measuring, which in short measures the load.
FID(First Input Delay): How long it takes for the page to be interactive, it is a metric that measures a good user experience.
CLS(Cumulative Layout Shift): This metric measures the stability of your page, seeing if the elements make your page jump.

Having explained all this, we can start with some suggestions.

1 . Image optimization

Images are a big enough load for users, and even more if we use high quality images, so the best thing to do in these cases is to find a solution to prevent direct loading as soon as we enter the web.
In case you didn't know, modern browsers are implementing lazy loading natively, in this case the only change you would need to make is to put 'loading="Lazy"' inside your img tag. E.g.:

<img loading="lazy" />

If you want to know which browsers accept this new attribute you can check it out at CanIuse
In case most of your users use a browser that doesn't have this attribute implemented yet you can always use a polyfill, I recommend this Polyfill

Another tip is to always try to set a width and height for the images, and in case you are not able to know what size they will have, you can always put a wrapper that foresees the aspect ratio of your images, and thus not increase the CLS metric by avoiding that when loading the image it makes your page jump. For example in case they have an aspect ratio of 6x4 we can use padding-top: 66.6%, you can also use the css attribute aspect-ratio: 16 / 9.

2 . Optimize your web fonts

Use preload when importing your fonts, with the preload attribute you are forcing your user to load the fonts as fast as possible and avoid waiting for each font to load later.
In case you are not using system fonts, check that your fonts are loading fine in all the browsers that your users use, it is something very easy to miss, and maybe this helps you to prevent these little things. In case you see that one of your fonts is not being supported you can always use WOFF fonts as fallback to avoid these situations, WOFF has very good support in all browsers.

The problem with failing fonts, is that it can cause some CLS in your page, when loading fails makes a shift between the fonts, so is better to always have a fallback that you know is going to work, to dodge those kind of jumps.

3 . Remember to keep your code clean

It is a very obvious thing but it is always good to remember it, it is very important to keep your code as clean as possible, like removing loads of code that are not being used, modulate your css files to not make loads where you are not going to use those classes, etc.

Another thing to keep in mind is the load you are submitting to the user/server with each library you use in your page, try to keep everything as optimal as possible and if you see that you are using a library maybe too heavy for what you use it for, do some research and look for one that is lighter and more adapted to your needs.

An example of a library that I personally use and is very lightweight is GlideJs, It gives me exactly what I need with no extra dependencies, and a good API to work with.

When you have extra things to load, the TTI metric will go up as your webpage is heavier and has more trouble trying to be interactive to your user, here is a graphic that shows you how it works simplified.

4 . In case something doesn't fit, look for a creative solution!

This is something abstract, but it is always good to keep your head open to new ideas that maybe you did not know, stay active and looking for new solutions to optimize your website, ask your colleagues and surely you will end up discovering a lot of things you did not know before, not for having more years you will know everything, maybe your newly graduated colleague can bring you a new functionality that you did not know. For example something like the IntersectionObserver is something that is there but I hardly hear about it, if you did not know about this API, I leave you the post of a partner who explains very well how to use it in React: Interaction Observer

As a little reflection, while working using ReactJs we noticed that our project not being that big was taking a pretty big toll on our web's performance, the problem was coming from doing too much process that wasn't really needed from a framework on the users end, when we could use simple Vanilla Js to control those functionalities, so maybe as another tip consider not using a framework for simple things when not really needed.

Well, thank you for reading my post and I hope I have taught you a thing or two that will help you in your day to day, if you like this post maybe I will continue with some more suggestions that I can give you. Leave any suggestions you have on the comment section and I will gladly respond to them, or correct me if I'm wrong in some of my suggestions, we are all here to learn!