DEV Community: alexpaper

My struggles with TypeScript

alexpaper — Fri, 29 Jul 2022 14:34:53 +0000

Premise

TypeScript has changed the schemes, the first time I heard about it, I thought 🤔:

"Simple, just declare the data type and that's it"!

I soon realized it's not that simple! 😞

Things are not exactly like this and in any case, this logic applies to everything, variables, objects, functions, classes, etc., in short, it is another way of programming, it is another way of thinking, you have to completely change your approach!

Realization

The best ones can do amazing things with TypeScript, I think it has now become an essential tool for those who regularly use JavaScript!

I have developed some little projects in React, some simple applications, a blog, and I must admit that the idea of redoing everything with TypeScript scares me deeply! 😱

The secret to learning is to practice constantly! So, since I am constantly looking for work, I made this little application using JavaScript and TypeScript to see the newest job offers on the market!

Some examples.

For example, if you use axios package, in normal project, you simple need to import the package, in TypeScript you need also to import AxiosResponse to specify the type of the axios response, like this:

// Import axios
import axios, { AxiosResponse } from 'axios';

If you have an object, you need to describe the shape of it using ‘Interfaces’;

interface Job {
title: string;
description: string;
company: {
display_name: string;
};
location: {
display_name: string;
};
category: {
label: string;
};
contract_type: string;
created: string;
latitude: number;
longitude: number;
redirect_url: string;
salary_min: number;
salary_max: number;
}

Sure, the code becomes more robust, but it is easy to understand that in this way the code extends beyond measure, to be clear, it is not a criticism, but an simple observation!

Conclusions.

Slowly using TypeScript I have to admit that I start to like it and as I said before, I think it has become an essential tool, in fact I see it in job requests, before employers only asked for JavaScript, now they also ask for TypeScript!

In this video you can see my struggles with TypeScript.

Have a Good day! 👋

🗾️ TypeScript Customers Info With MapBox

alexpaper — Fri, 15 Jul 2022 13:22:57 +0000

Working with typescript especially in the beginning (I am a beginner 🤔️),
declaring the type of each variable, the syntax not always intuitive, can be very frustrating! 😤️

The code stretches a lot but the advantages in the long run are undeniable! 🤓️

In this video guide i created a litle customer page to get familiar with typescript sintax, for example, when you fetch some customer info you need to declare in advance the object type using ** interface **

// User Interface
interface User {
    name: string;
    username: string;
    email: string;
    address:{
        street: string;
        suite: string;
        city: string;
        zipcode: string;
        geo:{
            lat: string;
            lng: string;
        }
    };
    phone: string;
    website: string;
    company: {
        name:string;
        catchPhrase: string;
        bs:string;
    };
};

In this way typescript knows what kind of data to expect, and if there is something wrong, report it in advance!

To view the customer coordinates I used MapBox

Hope this little exercise helps you better understand the importance of typescript in your code!

Video Guide

Have a nice day!
🖐️

📏 Resize Observer API

alexpaper — Tue, 07 Jun 2022 21:12:39 +0000

Resize Observer interface reports changes to the dimensions of an HTML elements .

How to use

It is very simple to use and in some special cases, can be used as an javascript alternative to CSS @media query.

You need to create a new ResizeObserver instance

const observer = new ResizeObserver(entries =>{
    // console.log(entries[0]);
    ...
});

then you need to *observe * the HTML element, in this case the main container

observer.observe(container);

Now whenever the container size changes, the observer returns an object with the new width and hight values,
values that can be used to manipulate elements within the page.

In this video you can see a simple example

have a good day 👋

🐦 JavaScript Twitter Share Url Button

alexpaper — Sun, 22 May 2022 08:56:24 +0000

The Tweet button allows you to quickly share the webpage you're viewing with all your followers,
clicking the Tweet button provides you with a prepopulated Tweet containing a link to that webpage.

Amazing, but how to add the Tweet button to your website, to share a blog post url for example?

In React you can use React-Share, but if you don't want to use an external package you can achieve the same result in a few lines of code7

How to use the Tweet button

Very simple

When you see the Tweet button on a webpage that you feel like sharing, click it.
If you're not already logged in to Twitter, you will be prompted by a pop-up box to log in.
A Tweet box will appear for you to post a Tweet linking to the webpage you visited.
When ready, click “Tweet.”

Implementation

After creating the button all you have to do is associate it a click event that calls this function:

function sharePage() {
    const url = window.location.href;
    window.open('https://twitter.com/intent/tweet?text=' + encodeURIComponent(document.title) + '&url=' + encodeURIComponent(url), '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=350,width=600');
    return false;
};

Done!

In this video you can see a simple implementation
video

have a good day!
👋

🗳️ NodeJs WebSocket Real Time Voting App

alexpaper — Sun, 08 May 2022 21:15:55 +0000

This is the original question: how to create a voting app so that everyone is updated in real time,
at the very moment you vote?
This is the answer: via WebSocket!

BackEnd

In Nodejs you can install WS,
The WebSocket API tecnology allows you to create a communication client/server, and therefore to send
and receive data in real-time.

First of all you need to create a new WebSocketServer instance, you must indicate a Port number

import WebSocket, {WebSocketServer} from 'ws';

const wss = new WebSocketServer({port:8080});

now it is very simple, when a user votes you have to make a broadcast of the updated data,
in this case an object with string values and an array of numbers

wss.clients.forEach(c=>{
    if(c.readyState === WebSocket.OPEN){
        c.send(JSON.stringify({time:datetime, message:`Updated data`, data:jsonData.data}))
    }
});

FrontEnd

In the client side you need to do the same, first create a WebSocket instance pointing to the server

const ws = new WebSocket('ws://localhost:8080');

now when the user gives the preference sends the data to the server that sends it back to all connected
clients and then updates the UI

ws.send(JSON.stringify({data:chartData.datasets[0].data}));

very straight forward!

In this video guide you can see a super simple implementation of this, Have a nice day!

Video Guide
🆗 👋

💬NodeJs WebSocketS Chat App

alexpaper — Thu, 05 May 2022 12:43:32 +0000

If you want create a super simple chat application, of course you must use socket.io, which is the absolute number one,
you can also use WebSocket API on frontend and in the backend.

WebSocket Client

The WebSocket object provides the API for creating and managing a WebSocket connection to a server,
as well as for sending and receiving data on the connection.

In the client side first of all you need to create a WebSocket connection

const socket = new WebSocket('ws://localhost:8080');

Events

You need to create three event listeners using addEventListener(),

the first one for the 'open' event,
fired when a connection with a WebSocket is opened,
the second one for the 'close' event
fired when a connection with a WebSocket is closed,
and the last one for the 'message' event,
fired when data is received through a WebSocket.

socket.addEventListener('open', function (event) {
    socket.send('Hello Server!');
});

socket.addEventListener('message', function (event) {
    console.log('Message from server ', event.data);
});

WebSocket on the Server Side

In the backend you can also use WebSocket tecnology, in NodeJs you can install
ws library
it is very easy to implement, to install it perform this command

npm i ws

import and crete the WebSocket Server 'wss'

import WebSocket, {WebSocketServer} from 'ws';

const wss = new WebSocketServer({port:8080});

listen for connection and send a string or an object welcome message

wss.on('connection', (ws, req)=>{

 ws.send(JSON.stringify({time: datetime, message:`💬 Welcome from the Server 🎉.`}));
});

In this video guide you can see a super simple implementation, have a nice day!

Video Guide
🆗 👋

⚛️ React Intersection Observer 👀 Hook 🪝.

alexpaper — Mon, 02 May 2022 09:25:37 +0000

As MDN says the Intersection Observer API provides a way to asynchronously observe
changes in the intersection of a target element with an ancestor element or with a top-level document's.

It seems complicated but in React you can achieve intersection using a simple hook
the only thing to keep in mind is that you need to pass a 'target element' to the observer
using useRef()

const targetMiddle = React.useRef();
const targetTop = React.useRef();

<h3 ref={targetTop}>TOP</h3>
<h3 ref={targetMiddle}>Middle</h3>

Hook

The hook is very simple
you need to export a function that accept the target element as argument
By default the threshold is set to 0 but you can play around with the options based on your needs
set the state using _isIntersecting _entry property

export function useObserver(ref) {

    const [isIntersecting, setIsIntersecting] = React.useState(false);

     // OPTIONS
     const options = {
        // root: target.current,
        rootMargin: '0px',
        threshold: 0.5, // A threshold of 1.0 means that when 100% of the target is visible within the element specified by the root option, the callback is invoked.
    };
    // Observer
    const observer = new IntersectionObserver(([entry]) => setIsIntersecting(entry.isIntersecting),options);

    // Use Effect
    React.useEffect(() => {

        observer.observe(ref.current)
        // DISCONNECT 
        return () => observer.disconnect()

    }, []);
    // Return
    return isIntersecting
  };

inside useEffect you can call the _disconnect _ method to stop it from observing the target element
and finally return the state that can be true or false,
and based on this value you can change the vDom, for example by showing or hiding a video
when the target element is visible, the limit is your imagination!

In this video guide you can see a super simple implementation, good observation 👀 ...

Video Guide
🆗 👋

⌛ Html Css Js SVG Clock 🕐

alexpaper — Wed, 20 Apr 2022 14:21:56 +0000

How to create a super simple clock using html, css, svg images and javascript?

Well it is not so complicated if you keep in mind some essential points,
you need to place the svg circle image directly inside the Html page in this way:

<div class="clock-container flex">
  <svg class="svg-seconds" width="24px" height="24px" viewBox="0 0 24 24"  xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486  10-10S17.514 2 12 2z"/></svg>
  <svg class="svg-minutes" width="24px" height="24px" viewBox="0 0 24 24"  xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486  10-10S17.514 2 12 2z"/></svg>
  <svg class="svg-hours" width="24px" height="24px" viewBox="0 0 24 24"    xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486  10-10S17.514 2 12 2z"/></svg>
    
   <div class="time-box">
            <div class="time">00:00:00</div>
   </div>
</div>

and this is all the Html code you really need,

for the Css part it is necessary to give a position relative to the time-box div, so you can position the Svg circles absolutely within it

.time-box{
    position: relative;
...
}

/* SVGS  */
svg.svg-seconds{  
    position: absolute;
    width: 360px;
    height: 360px;
    fill: var(--second);
    stroke: var(--third);
    stroke-width: 0.5;
    stroke-dasharray: 63;
}

svg.svg-minutes{  
    position: absolute;
    width: 330px;
    height: 330px;
    fill: transparent;
    stroke: var(--fourth);
    stroke-width: 0.6;
    stroke-dasharray: 63;
}

svg.svg-hours{  
    position: absolute;
    width: 270px;
    height: 270px;
    fill: transparent;
    stroke: var(--seventh);
    stroke-width: 3;
    stroke-dasharray: 63;
}

for the javascript part instead, you need to create a simple function that change the stroke of the Svg circles and return a time string

// TIME FN
function timeFn (){
    let time = new Date();
    let hours = addZero(time.getHours());
    let minutes = addZero(time.getMinutes());
    let seconds = time.getSeconds().toString().padStart(2,0);
    // 4 SVG OFFSET
    secCircle.style.strokeDashoffset = -(63 - (64 * seconds) / 60);
    minCircle.style.strokeDashoffset = -(63 - (64 * minutes) / 60);
    hoursCircle.style.strokeDashoffset = -(63 - (64 * hours) / 24)
    // FULL TIME
    let fullTime = `${hours}:${minutes}:${seconds}`;
    // console.log(fullTime)
    return fullTime;
}

to add a zero you can use a function

function addZero (timeValue) {
    return Number(timeValue) >= 10 ? timeValue : '0'+ timeValue;
};

or use padStart() methods

.toString().padStart(2,0);

now all that you need to do is set the interval to 1 second (default) and every time change the inner Html of the time div

setInterval(()=> time.innerHTML = timeFn());

you can find the code here github

this is a simple video guide

👋

Css Shake Animation

alexpaper — Thu, 14 Apr 2022 05:15:10 +0000

I've always liked the shaking effect on the login screen on Linux
or Mac systems, yes, but how to make a similar effect through CSS?
In a few lines of code!

.card {
    ...
    animation: shake 1s ease-in-out forwards;
}
@keyframes shake {
    0%,100% {
        transform: translate(0, 0);
    }
    10%,30%,50%,70%,90% {
        transform: translate(30px);
    }
    20%,40%,60%,80% {
        transform: translate(-30px);
    }
}

In this video guide you can see how to create a super ultra simple shaking effect
via CSS ...
Video Guide
🆗 👋

🦜 JS Text To Voice

alexpaper — Fri, 08 Apr 2022 10:16:30 +0000

As you know Web Speech API enables you to incorporate voice data into web apps. The Web Speech API has two parts:
SpeechSynthesis (Text-to-Speech), and
SpeechRecognition (Asynchronous Speech Recognition).

Using Speech Synthesis Utterance you can create a super simple Html Css and Javascript 'Text To Voice' Web App,

For the HTML part, you just need an input field and a button, like this

<div class="container">
        <div class="box">
            <h1>🦜 Text To Voice</h1>
            <input class="text" type="text" placeholder="Text To Voice">
            <button class="play">Play</button>
        </div>
    </div>

For the javascrit part you just need to instantiate a new SpeechSynthesisUtterance interface of the Web Speech API that represents a speech request, then you need to add the content the speech service should read and information about how to read it (e.g. language, pitch, text and volume, like this

let utter = new SpeechSynthesisUtterance();
utter.text = 'Hello World';
utter.volume = 0.5; // From 0 to 1
// utter.lang = 'us-EN';
utter.voice = voices[33]; // 33 english voice, 53 it

Now to transform the text into voice 🎤, you can use speechSynthesis speak method, like this;

window.speechSynthesis.speak(utter);

Finally, through the use of events, you can create a nice user experience!

 // START EVENT LISTENER
       utter.addEventListener('start',()=>{
        if(window.speechSynthesis.speaking){
            play.classList.add('active');
        }
        });

This is a super fast video guide.
👋

JavaScript Navigator Media Devices 📷 🎙️

alexpaper — Tue, 05 Apr 2022 20:47:08 +0000

As you know, with Navigator.mediaDevices you can access to connected media input devices in your machine like cameras and microphones.

Taking advantage of the potential of this amazing API you can create pretty awesome web app in a few code lines.

For example you can create a simple app to
take a picture using the computer onboard camera.

The MediaDevices.getUserMedia() method prompts the user for permission to use a media input which produces a MediaStream with tracks containing the requested types of media.

It returns a Promise that resolves to a MediaStream object, using this async function you can attach the camera stream as source in your video web page

const video = document.querySelector('video');
// Navigator video stream
async function videoStream (){
    try{
        const stream = await navigator.mediaDevices.getUserMedia({
            video:true,
            audio:false
        });
        // Set video source
        video.srcObject = stream;
  }catch(err){
        console.log(err);
    }
}

Some Privacy and security considerations

As an API that may involve significant privacy concerns, getUserMedia()'s specification lays out a wide array of privacy and security requirements that browsers are obligated to meet.

getUserMedia() is a powerful feature which can only be used in secure contexts; in insecure contexts, navigator.mediaDevices is undefined, preventing access to getUserMedia().
A secure context is, in short, a page loaded using HTTPS or the file:/// URL scheme, or a page loaded from localhost.
In addition to that, user permission is always required to access the user's audio and video inputs.

This is a little youtube guide that show how simple it is implementig navigator API 📸.

CSS NeuBrutalism Card

alexpaper — Thu, 31 Mar 2022 07:01:36 +0000

Maybe you already know, the new UI super cool trend is neubrutalism

this is M. Malewicz definition:

Neo brutalism ditches most of that and merges traditional layout concepts with super-high contrast, solid, often purposefully clashing colors and simpler, yet quirky typography.

People think: I can do this myself!

But it's not that simple!

This is a super brutal, first attempt...

Video

You can read the full M. Malewicz article here

https://hype4.academy/