DEV Community: José Sánchez Aranda

iposcursor an iPadOS Cursor for the web

José Sánchez Aranda — Sun, 17 May 2020 08:33:48 +0000

Hi guys, as I told you in the previous post I built a small library to create an iPadOS 13.4 Cursor for the web. Today I'm so proud to tell you that it library becomes to be more seriously and allows you to create different cursors with different customisations.

NPM

Nowadays is obviously that a good library must have in npmjs repositories. And I'm so proud to tell you that it is. Here at https://www.npmjs.com/package/iposcursor you can see how to install and how to use this library for your project. I'm very excited because this project works in Browser (umd version) and ES and TS modules.

Installation

From NPM

npm install iposcursor --save

From CDN

<!-- Include anywhere inside head tag -->
<link rel="stylesheet" href="https://unpkg.com/iposcursor/dist/css/iposcursor.min.css">
<!-- Include at the end of body tag -->
<script src="https://unpkg.com/iposcursor/dist/iposcursor.min.js"></script>

Usage

ES and TS modules

import { IposCursor, create } from 'iposcursor';

let cursor = new IposCursor({element : 'elementId'});
cursor.suscribe();
// or
let cursor = create({element : 'elementId'});
cursor.suscribe();

Browser

<html>
  <head>
    <!-- your awesomes styles, meta, etc -->
    <link rel="stylesheet" href="node_modules/iposcursor/css/iposcursor.min.css">
  </head>
  <body>
  <!-- your awesome code -->
  <!-- ... -->
  <script src="node_modules/iposcursor/iposcursor.min.js"></script>
  <script>
    let cursor = iposcursor.create({element : 'elementId'});
    cursor.suscribe();
  </script>
  </body>
<html>

Demos

I built two examples that you can find in example directory https://github.com/josesaranda/iposcursor/tree/master/example one of them is writing using browser only and the other one using parcel such as build tool. You can run both example if you clone the repo in your machine simply typing:

git clone https://github.com/josesaranda/iposcursor
cd iposcursor
npm install
npm run build
npm run demo

Also you can install node modules, build library and go to example/umd directory and double click index.html will show you a browser usage of this library.

If you want to see it in action without do anything you can see codepen implementation here.

That's all

Yes, that's all. This becomes to be a more seriously library step by step. I'll implement more functionality in future versions. And I hope you like it! Thanks.

iPadOS 13.4 cursor with Html and JS

José Sánchez Aranda — Wed, 06 May 2020 17:16:44 +0000

Hello everyone, today I spent my free time building a Javascript library that allows you to see cursor like ipadOS 13.4. This took a few minutes but was funny. The library is lightweight and you can import it to your project with two lines of code. Hope you like it!

https://github.com/josesaranda/ipadOSCursor

Example:
https://codepen.io/josesaranda/pen/oNjEWwb

Motivation

It looks really good on iPadOS 13.4 and I thought it would be possible with web technologies and the answer was yes!

How it was

You only need to think how to hide normal browser cursor and then how to built yours. It was easy.

Hide browser cursor and style yours

* {
  cursor : none;
}
#ipadOSCursor {
  z-index: 9999;
  background: grey;
  border-radius: 50%;
  height: 20px;
  width: 20px;
  position: absolute;
  transition: opacity 0.4s;
}

Create a class to set to "highlights" elements

And how it look when cursor is hover

.highlight {
  padding: 10px;
  line-height: 10px;
  background: transparent;
  border-radius: 6px;
  display: inline-block;
  transition: all 0.2s;
  margin: 6px;
}

.highlight:hover {
  background: rgba(239, 239, 239, 0.8);
  transition: all 0.2s;
  transform: scale(1.05);
}

Create and subscribe your custom cursor to mousemove

You'll need to set cursor position to your custom cursor


  let cursorElement = document.createElement('div');
  cursorElement.id = 'ipadOSCursor';
  document.getElementsByTagName('body')[0].appendChild(cursorElement);
  document.addEventListener('mousemove', event => setPosition(cursorElement, event));

Subscribe "highlights" elements to mouseenter and mouseleave

When cursor enter inside one of your elements hide your custom cursor

let highlightElements = document.querySelectorAll('.highlight');
  highlightElements.forEach(highlightElement => {
    highlightElement.addEventListener('mouseenter',() => {
      cursorElement.style.opacity = 0;
    });
    highlightElement.addEventListener('mouseleave',() => {
      cursorElement.style.opacity = 1;
    });
  });

That's all. Hope you like it!

Recruitment in IT means to do a test

José Sánchez Aranda — Fri, 17 Apr 2020 08:11:52 +0000

Hi everyone, this is my first post. It's why I'm going to introduce myself. My name is José Sánchez, actually I work as Software Engineer at shapelets.io. I define myself like a dreamer, enthusiastic and self-taught person. I love my work as Front End developer.

Introduction

Frequently developers receive in their inboxes, a lot of offers from another companies, with a lot of social benefits, more brute salary, etc.

But first they have to show to the company what skills they know.

This is something that sometimes produces laziness and it does that many people doesn't do the test the company ask they for.

Do it for you

It happens to me a few days ago, but I thought that it wasn't for the company It was for me, I mean, doing the test you can know how are you in the current market.

The test consists in create a Shopping cart with a framework, or vanilla javascript for the Front and create a server that returns the shop items with an offset and a limit.

Summary

Do tests for you, it doesn't matter if you don't want to get the offer. Tests are good to make you know how are you in the current market.

Alert!

In the next post I'll do the test to show you a possible answer!