DEV Community: Antonio Erdeljac

Remotewide - find remote jobs with location independent pay (2022)

Antonio Erdeljac — Sun, 01 May 2022 14:06:57 +0000

I've recently been lurking around job boards, and noticed that there is barely any filters for location independent pay as a niche itself, so I decide to build one of my own.

Any feedback would be greatly appreciated!

Simple JS thread optimization using Partytown (Web Workers)

Antonio Erdeljac — Mon, 11 Apr 2022 22:09:42 +0000

Javascript Thread

Javascript is a single-threaded language which means it has only one call stack that is used to execute the program.

In simpler terms, this means that only one line of code can be executed at a time.

While you most likely won't notice this as an issue whilst developing simpler apps, once you start adding 3rd party libraries such as Google Analytics, Intercom or other heavy packages that are not required to be in the critical path you will probably notice the main thread starting to clog up.

This will cause your app to slow down, which leads to bad user experience, and higher churn rate.

Web workers

As per MDN definition, web workers are means for web content to run scripts in the background threads, thus offloading the main call stack.

They are capable of performing tasks without interfering with the use interface, and can perform I/O using XMLHttpRequest.

Partytown

Partytown is a lazy-loaded library created to help relocate resource intensive scripts into a web worker, thus unclogging the main thread.

It's philosophy is that main thread should be dedicated to your code, and scripts which are not required to be in the critical path should be moved to a web worker.

Integration

Following Partytown's simple React integration, we can see how easy it is to offload the main thread.

Visit the full documentation here.

Install

Configure

Partytown Script

Copy Library Files

Thanks for reading!

Connect with me on Linkedin.

⏰ Display 3D models on the web in 1 minute

Antonio Erdeljac — Sat, 28 Nov 2020 21:00:39 +0000

In this article, I will write a short summary of an impressive web component for model viewing, model-viewer

The model-viewer library makes it easy to display and interact with a 3D model file as easily as writing HTML tags.

As easy as writing HTML

Code:

<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>

<model-viewer 
  src="https://modelviewer.dev/shared-assets/models/Astronaut.glb"
  alt="A 3D model of an astronaut"
  auto-rotate
  camera-controls>
</model-viewer>

Result:

We can drag around and zoom in, as we would in any 3D model viewer, and all it took was an HTML tag and 2 scripts.

Models

You can find list of .glb models here

That's it!

If you were wondering how to display your model, no need to read further, but if you wish to, I will write a bit more about the library.

About the library

model-viewer web component is being developed by Google, and it has been introduced in early 2019. Right now they're announcing version 1.1.

The idea of model-viewer is to provide developers with the ability to incorporate 3D and AR technologies for their users without extensive knowledge about related technologies, and with the "as easy as writing HTML" quote, they're more than just on the right path on doing that!

Augumented reality

And yes, you read that right, you can also use this as an augmented reality module. You can read more about that (and find a coded example) here

APIs

Other than just displaying the model, model-viewer offers great APIs like loading, AR, Staging & Cameras, Annotations, Animation, and Scene Graph

Model Editor

They've also introduced a model editor, which you can check out here

Conclusion

Web technologies are rapidly improving, with limits being pushed every single day. Yesterday's impossible ideas are now a reality, and we can all be thankful that open-source folks are doing us a great favor by providing these technologies free for everyone's use.

Replacing redux HOCs with hooks

Antonio Erdeljac — Thu, 26 Nov 2020 00:50:23 +0000

You're probably familiar with the concept of using redux HOC called connect. It probably looks something like this (abbreviation):

import { getUsers, resetUsers } from 'actions/users';
import { selectUsers } from 'store/users';

const App = ({ users, getUsers, resetUsers }) => {
  useEffect(() => {
    getUsers();

    return () => resetUsers();
  }, [getUsers])

  ...
}

App.propTypes = {
  users: PropTypes.arrayOf(PropTypes.object),
  getUsers: PropTypes.func.isRequired,
  resetUsers: PropTypes.func.isRequired,
};

const mapStateToProps = { users: selectUsers() };
const mapDispatchToProps = { getUsers, resetUsers };

export default connect(mapStateToProps, mapDispatchToProps)(App);

A simple component which uses redux's connect HOC to provide <App /> component with getUsers, resetUsers and users prop.

Let's see how hooks can simplify our code.

Analyzing the code:

1. Imports

In this part of the code, we are importing our actions and selectors used in mapStateToProps & mapDispatchToProps

import { getUsers, resetUsers } from 'actions/users';
import { selectUsers } from 'store/users';

2. Component itself

In this part of the code, we are defining our App component and destructuring users, getUsers & resetUsers from the prop. We utilize a simple useEffect hook to call users on mount, and reset them on unmount.

const App = ({ users, getUsers, resetUsers }) => {
  useEffect(() => {
    getUsers();

    return () => resetUsers();
  }, [getUsers])

  ...
}

3. PropTypes

In this part of the code, we are defining prop types used by our component.

App.propTypes = {
  users: PropTypes.arrayOf(PropTypes.object),
  getUsers: PropTypes.func.isRequired,
  resetUsers: PropTypes.func.isRequired,
};

4. connect HOC

In this part of the code, we are utilizing mapStateToProps and mapDispatchToProps through connect high order component.

const mapStateToProps = { users: selectUsers() };
const mapDispatchToProps = { getUsers, resetUsers };

export default connect(mapStateToProps, mapDispatchToProps)(App);

Using react-redux hooks

If we were to use hooks instead of HOCs, we'd end up with something like this:

import { useSelector, shallowEqual, useDispatch } from 'react-redux';

import { getUsers, resetUsers } from 'actions/users';
import { selectUsers } from 'store/users';

const App = () => {
  const dispatch = useDispatch();
  const users = useSelector(selectUsers(), shallowEqual)

  useEffect(() => {
    dispatch(getUsers());

    return () => dispatch(resetUsers());
  }, [getUsers, dispatch])

  ...
}

export default App;

Notice how code is much cleaner, tidy, and implementation is done with less code?

Using react-redux hooks we've eliminated the need for mapDispatchToProps & mapStateToProps constants, as well as HOCs wrapping of our component.

Further implementation could be implementing custom hooks to handle redux logic, and would be used something like this:

import { useSelector, shallowEqual, useDispatch } from 'react-redux';

import { getUsers, resetUsers } from 'actions/users';
import { selectUsers } from 'store/users';

export const useAppStore = () => {
  const dispatch = useDispatch();
  const users = useSelector(selectUsers(), shallowEqual);

  const actions = useMemo(() => ({
    getUsers: dispatch(getUsers()),
    resetUsers: dispatch(resetUsers()),
  }), [dispatch]);

  return { users, actions }
}

import { useAppStore } from './hooks';

const App = () => {
  const { users, actions } = useAppStore();

  useEffect(() => {
    actions.getUsers()

    return () => actions.resetUsers()
  }, [actions.getUsers, actions.resetUsers])

  ...
}

With this, we've achieved separation of concerns.

Conclusion

React hooks offer many new ways to solve old problems - one of them being selectors and action dispatches of redux. Most of the libraries which HOCs you're using are providing hooks as well. Make sure to update your packages and check the documentation for the hooks implementation tutorial to keep your codebase fresh!

How to detect inactive users with Idle Detection API

Antonio Erdeljac — Mon, 23 Nov 2020 22:56:14 +0000

This post is a summary of a web.dev article.

What is the Idle Detection API?

Idle Detection API is one of Chrome's origin trials, which means it is a feature in progress planned for a release.

Idle Detection API can be used to detect user inactivity based on a variety of measurements such as a mouse or keyboard inactivity, screensaver activation, or locking the screen. The threshold is defined by the developer, based on the desired result.

Usage of the Idle Detection API

Check if idleDetector is available:

const hasDetectorAPI = 'IdleDetector' in window;

Request permission for idleDetector:

await IdleDetector.requestPermission();

Starting the idleDetector:

const controller = new AbortController();
const signal = controller.signal;

const detector = new IdleDetector();

detector.addEventListener('change', () => {
  console.log(detector.userState); // idle | active
  console.log(detector.screenState); // locked | unlocked
});

await detector.start({
    threshold: 60000,
    signal,
});

Use cases of Idle Detection API

Some examples where Idle Detection API can be utilized:

Apps with expensive computation (to put halt to computation)
Chatrooms (to handle activity status)
Forms / Documents (to autosave on user inactivity)

... and many other use cases.

Support Idle Detection API release

If you wish to see and use this API, check out this link on how to support its release.

3 Tips for better WFH productivity

Antonio Erdeljac — Sun, 22 Nov 2020 14:41:34 +0000

Due to the unfortunate situation with COVID-19, lots of jobs have turned remote, while that is a great thing for some, others are struggling to maintain productivity and focus.

I've been working from home for around 2 years now, full time, 8 hours, in an enterprise company as a software engineer, here are some of the tips I think can prove quite useful if utilized correctly.

1. Create a strict schedule

Consistency is one of the fastest ways to build discipline, and great discipline results in focus and productivity. So, how do we build consistency when no one is forcing us to? Create strict schedules.

The hardest part of this task, at least for me, is the sleep cycle consistency, so that is what I would focus on the most. If you can make yourself go to sleep at a consistent time, and wake up early to get the morning boost - you're back on the horse!

Other things to watch out for regarding scheduling, is anything which can break your focus in those 8 working hours, which brings us to lunch and rest times. Having rest (and lunch of course) is extremely important, which goes without saying - what is more important in a WFH environment is keeping it consistent, so it does not surprise you and breaks your focus.

2. Do not rely on your willpower

While I have no doubt that some of you have great willpower and self-control to not watch Netflix, surf social media, or play video games, it is much easier to not use your willpower at all. What exactly do I mean by that?

Imagine your willpower as a muscle. You can use it for plenty of things, but eventually - it gets tired. A more concrete example would be working for 8 hours with your phone on the table, while you have the willpower not to surf social media, once you finish working, instead of working out, you will find it irresistible to watch Netflix or any quick gratification service. How do we prevent that?

Instead of resisting, completely remove it as an option.

Turn off your phone (or put it in airplane mode)
Use applications to block websites & addicting apps
Lock your joystick in a time-locked box

While this might sound trivial, if you 100% block access to something, you are no longer using your precious willpower to resist it, thus resulting in further productivity in the day.

Source

One of the best (and free) apps for restricting access to addicting applications and websites I know are:

ColdTurkey (Windows & Mac)
SelfControl (Mac only)

Keep in mind, you cannot fool these apps easily, when they restrict, they restrict for good.

3. Dress as you would for work

While I am in no way a psychologist, I can 100% tell you that this works for me. If I feel like I am dressed to work, I will work. It is that simple.

Conclusion

Work from home offers you many privileges, such as working in your pajamas, watching Netflix whenever you wish to do so, playing games, but sometimes it is good to avoid some of them in order to increase your productivity & focus.

5 Tips for writing better conditionals in JavaScript

Antonio Erdeljac — Sat, 21 Nov 2020 17:39:21 +0000

Conditionals are one of the first things we learn as developers. They are easy to understand and are easy to grasp from a mathematical standpoint. Due to their non-complex nature, developers often stop learning new practices regarding conditionals, assuming they know everything there is to know about them.

In this blog post, we are going to craft different ways of using conditionals in our code, focused on readability.

These tips are commonly mentioned in other articles, but I wanted to curate my own experience as a JavaScript developer.

1. Use object literals instead of switch

Let's take a look at a common switch conditional example:

switch (name) {
  case 'antonio':
    return { name: 'antonio' };
  case 'matthew':
    return { name: 'matthew' };
  case 'linus':
    return { name: 'linus' };
  default:
    return undefined;
}

Is there anything wrong with this code? No. This code will work just fine, and it is a common practice. But why not go a step further and apply a cleaner syntax using object literal?

const userFactory = {
  antonio: { name: 'antonio' },
  matthew: { name: 'matthew' },
  linus: { name: 'linus' },
};

const name = 'antonio';
return userFactory[name]; // { name: 'antonio' }

What we've achieved here is cleaner syntax, higher readability, and easier modularity for future modifications.

You could improve this even further utilizing Lodash's get functionality, to ensure safe fallbacks.

import { get } from 'lodash';

const userFactory = {
  antonio: { name: 'antonio' },
  matthew: { name: 'matthew' },
  linus: { name: 'linus' },
};

const name = 'antonio';
return get(userFactory, name, { name: 'fallback' });

Does this mean you should completely eliminate switch statements? No. This is just an example of an alternative, sometimes what works best is what you or your team understand best. An example where I would heavily use object literals is in a reducer, since it essentially is a giant switch statement, why not make it more readable?

2. Use Array.includes instead of multiple conditions

Another common example of conditionals is the following:

if (name === 'antonio' || name === 'matthew' || name === 'linus') {
  return true;
}

Again, there is nothing fundamentally wrong with this code, but let's make it prettier.

const admins = ['antonio', 'matthew', 'linus'];

if (admins.includes(name)) {
  return true;
}

See the difference? Notice how easier it is to add new admins when we've separated concerns?

3. Use default function parameters

This one is not so much of a eureka discovery, but it can be useful to someone who is not yet utilizing it.

We often write examples like this in our functions:

function (name) {
  let finalName = name;

  if (name === undefined) {
    finalName = 'antonio'
  }

  // do some logic with finalName
}

How can we make this prettier? Using default parameter values.

function (name = 'antonio') {
  // do some logic with name
}

4. Using Array.every & Array.some

Let's say you're writing a function that runs our items through conditional and requires all of the items to pass.

We might wanna write something like this:

const users = [
  { name: 'Antonio', isAdmin: true },
  { name: 'Matthew', isAdmin: true },
  { name: 'Linus', isAdmin: true },
];

let areAllAdmins;

users.forEach((user) => {
  if (!areAllAdmins) { // break function };

  areAllAdmins = user.isAdmin === true;
});

Instead, we can shorten this:

const users = [
  { name: 'Antonio', isAdmin: true },
  { name: 'Matthew', isAdmin: true },
  { name: 'Linus', isAdmin: true },
];

const areAllAdmins = users.every((user) => !!user.isAdmin);

Or, alternatively using Array.some:

const users = [
  { name: 'Antonio', isAdmin: true },
  { name: 'Matthew', isAdmin: true },
  { name: 'Linus', isAdmin: true },
];

const areAllAdmins = users.some((user) => !!user.isAdmin);

5. Returning early

Instead of returning a single variable at the end of our function, we can utilize early returns in order to simplify our code.

function canAccess(user) {
  let finalStatus;

  if (user) {
    if (user.isAdmin) {
      finalStatus = true;
    } else {
      finalStatus = false;
    }
  }

  return finalStatus;
}

Now let's utilize early returns:

function canAccess(user) {
  if (!user) return false;
  if (user.isAdmin) return true;
  if (!user.isAdmin) return false;
}

Of course, this can be even more simplified with return user.isAdmin, but for the sake of tutorial, I am writing explicitly.

Conclusion

These have been some of my tips for better handling of conditionals.

Being a developer is a never-ending tutorial, never assume you know everything about a subject and be eager to always learn new things. Even the simplest things can be improved, either in optimization, or readability.