DEV Community: Gabriel Antunes

Deco Hackathon focused on HTMX. Up to $5k in prizes!

Gabriel Antunes — Tue, 18 Jun 2024 01:14:19 +0000

Hey dev.to community! I'm here to announce the 5th hackathon by deco.cx - HTMX Edition.

It's a virtual 3-day event starting on Friday, June 28. The goal is to transform ideas into HTMX websites with a PageSpeed score of 90+ and compete for over $5K in prizes. This is the registration site: https://deco.cx/hackathon5.

When you sign up, please put my email (gbr.antunes@gmail.com) in the "referral code" section of the form so that my referrals are counted and ranked.

Virtual assistants and accessibility

Gabriel Antunes — Tue, 17 Nov 2020 17:02:29 +0000

I'm doing an research about virtual assistants and accessibility and I did a questionary with some accessibility questions focused on comunication disabilities.
In this research only Siri, Google Assistant and Alexa will be considered.

How audible limitations people interact with virtual assistants?
How "nonverbal" people interact with virtual assistants?
What high aged people (65+) think about virtual assistants? It is easy to they?
Do your parents and grand parents use virtual assistants? How is they experience?

Easy React loader

Gabriel Antunes — Thu, 29 Oct 2020 18:27:47 +0000

Today I made my first loader and I'll pass my recently acquired knowledge to you.

Technologies

React
Typescript
Axios
Styled-components

Milestones

Create a loader component
Create a state to control the loader show/hide mechanism

Talk is cheap. Show me the code.

The HTML/CSS I used was totally copied from loading.io/css. It looks like this when we turn it into a React component:
Loader/index.tsx

import React from 'react';

import { Container } from './styles';

const Loader: React.FC = () => {
  return (
    <Container>
      <div className="lds-ellipsis">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </Container>
  );
};

export default Loader;

Loader/styles.ts
Using styled-components for CSS.
Imports: Basic imports from styled-components that let's us to work with CSS in Js.

import styled, { keyframes } from 'styled-components';

Animations: The first and second animations do the scale up and down trick, and the last one do the movement.

const ldsEllipsis1 = keyframes`
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
`

const ldsEllipsis3 = keyframes`
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
`

const ldsEllipsis2 = keyframes`
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
`

Styles: Some CSS definitions. Full screen, black background with reduced opacity and the dots animating in the middle.

export const Container = styled.div`
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.3);

  .lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
  }
  .lds-ellipsis div {
    position: absolute;
    top: 33px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
  }
  .lds-ellipsis div:nth-child(1) {
    left: 8px;
    animation: ${ldsEllipsis1} 0.6s infinite;
  }
  .lds-ellipsis div:nth-child(2) {
    left: 8px;
    animation: ${ldsEllipsis2} 0.6s infinite;
  }
  .lds-ellipsis div:nth-child(3) {
    left: 32px;
    animation: ${ldsEllipsis2} 0.6s infinite;
  }
  .lds-ellipsis div:nth-child(4) {
    left: 56px;
    animation: ${ldsEllipsis3} 0.6s infinite;
  }

`

✅Create a loader component

Now, we need to do the show/hide mechanism. For this task we'll use useState and useEffect hooks.

On page load, the useEffect will show the loader, then api call and on api response, the load should hide.

import React, { useEffect, useState } from 'react'
import api from '../../../axios/config/path' // Axios config instance

import Loader from '../../../components/Loader'

const Page: React.FC = () => {
  const [isLoaderVisible, setIsLoaderVisible] = useState(false)

  useEffect(() => {
    setIsLoaderVisible(true)

    api.get('/api/call').then(response => {
      setEnrolledStudents(response.data)
      setIsLoaderVisible(false)
    })
  }, [])

  return (
    <>
      { isLoaderVisible && <Loader /> }
      <h1>Hello, loader!</h1>
    </>
  )
}

export default Page

✅ Create a state to control the loader show/hide mechanism

So that's it, I hope this article was helpful and thanks for reading.

Accessibility and IoT devices

Gabriel Antunes — Fri, 25 Sep 2020 14:50:44 +0000

So, I'm doing an research and need some help. There's anybody here with audible, visual, cognition, or vocal impairment? How do you use iot functions? Do you guys think that is possible for a vocal impaired to use Alexa's functions, for example?

Do you live with an elderly person (65 years or older) that consumes Netflix or Spotify (and control the music playing on PC using his smartphone) on different devices? How it is?

Any more information will be welcome.

Do you use personal assistants?

Gabriel Antunes — Sun, 23 Aug 2020 16:15:33 +0000

I'm doing an research about IoT and UX. I want to know: Do you use a personal assistant on a daily basis? Things like send a message, calls, reminders, check calendar...and if you use, how do you define the experience over a conventional method (manually doing this things in your phone, for example). If you don't use them, why?

Is React a framework?

Gabriel Antunes — Wed, 29 Jul 2020 17:34:27 +0000

Why do people keep saying that React is a framework if on its official page it says react is a lib?