DEV Community: Ivan Jeremic

Boost your productivity by closing the VSCode Sidebar

Ivan Jeremic — Wed, 15 Jun 2022 18:33:03 +0000

I was one of those Developer who felt weird closing the Sidebar in VSCode I always needed to see my files all the time for some reason even if this made no sense while working on a problem, but one day I decided to start closing it while working on a feature/problem and it was hard for me for a few days but after I got used to having a closed sidebar my productivity skyrocketed.

How do I start?

I find what I need to work on and open multiple tabs side by side when needed then I close the sidebar and start working.

Another pro beside productivity was my eyes hurt way less and themes which where to noisy in colors for me and I couldn't use them are now no problem anymore and I enjoy them now.

Hope this will help some devs out there.

Why Podcast Apps have no comment section?

Ivan Jeremic — Sun, 27 Mar 2022 10:03:07 +0000

I find it weird that audio only podcast apps have no comment section like for example videos on youtube or vimeo, I find this a good idea to have a discussion under the podcast but it is weird to me that no App has this yet, I really think if nobody does this I will create my own App but I wanted to hear more opinions about it here on DEV, so what do you all think?

Microsoft PowerToys is a must-have for Developers on Windows!

Ivan Jeremic — Tue, 24 Aug 2021 09:40:00 +0000

As the Docs say "Microsoft PowerToys is a set of utilities for power users to tune and streamline their Windows 10 experience for greater productivity."

1.) Color Picker

You are still using buggy Color pickers in form of a Browser Extension or similar? Well guess what Microsoft PowerToys comes with the most powerful color picker in the world, you can pick colors from anywhere browser/native and more, with a traditional browser extension you can't pick colors outside of the browser window but with this one you can even pick a color from an icon on your windows taskbar. After picking your color it provider you instantly all three major ways of using colors HEX - RGB - HSL and a set of complimentary colors.
You can simply open it by pressing: SHIFT + WIN + C

2.) File Explorer add-ons utility

Enabling Preview Pane
To enable, first ensure that "Enable SVG preview", "Enable SVG thumbnails", and "Enable Markdown preview" are all set to On in the PowerToys Settings.

Next, open Windows File Explorer, select the View tab in the File Explorer ribbon, then select Preview Pane.

3.) Image Resizer utility

After installing PowerToys, right-click on one or more selected image files in File Explorer, and then select Resize pictures from the menu.

Drag and Drop

Image Resizer also allows you to resize images by dragging and dropping your selected files with the right mouse button. This allows you to quickly save your resized pictures in another folder.

Settings

Inside the PowerToys Image Resizer tab, you can configure the following settings.

4.) Awake utility

Awake is a utility tool for Windows designed to keep a computer awake without having to manage its power & sleep settings. This behavior can be helpful when running time-consuming tasks, ensuring that the computer does not go to sleep or turn off its screens.

The following Awake states can be selected:

Off (Passive) - The computer awakeness state is unaffected. The application is waiting for user input.
Keep awake indefinitely - The computer stays awake indefinitely, until the user explicitly puts the machine to sleep or exits/disables the application.
Keep awake temporarily - Keep machine awake for a pre-defined limited time. Once the time elapses, computer resumes its previous awakeness state.

5.) FancyZones utility

FancyZones is a window manager utility for arranging and snapping windows into efficient layouts to improve the speed of your workflow and restore layouts quickly. FancyZones allows the user to define a set of window locations for a desktop that are drag targets for windows. When the user drags a window into a zone, the window is resized and repositioned to fill that zone.

Choose your layout (Layout Editor)

If multiple displays are in use, the editor will detect the available monitors and display them for the user to choose between. The chosen monitor will then be the target of the selected layout.

Space around zones

Creating a custom layout

The zones editor also supports creating and saving custom layouts. Select the + Create new layout button at the bottom-right.

There are two ways to create custom zone layouts: Grid layout and Canvas layout. These can also be thought of as subtractive and additive models.

The subtractive Grid model starts with a three column grid and allows zones to be created by splitting and merging zones, resizing the gutter between zones as desired.

To merge two zones, select and hold the left mouse button and drag the mouse until a second zone is selected, then release the button and a popup menu will show up.

The additive Canvas model starts with a blank layout and supports adding zones that can be dragged and resized similar to windows.

Canvas layout also has keyboard support for zone editing. Use the Arrows keys to move a zone by 10 pixels, or Ctrl + Arrows to move a zone by 1 pixel. Use the Shift + Arrows keys to resize a zone by 10 pixels (5 per edge), or Ctrl + Shift + Arrows to resize a zone by 2 pixels (1 per edge). To switch between the editor and dialog, press the Ctrl + Tab keys.

Quickly changing between layouts

With a custom layout, this layout can be configured to a user-defined hotkey to quickly apply it to the desired desktop. The hotkey can be set by opening the custom layout's edit menu. Once set, the custom layout can be applied by pressing the Win ⊞ + Ctrl + Alt + [hotkey] binding. The layout can also be applied by pressing the hotkey when dragging a window.

In the demo below, we start with a default template applied to the screen and 2 custom layouts that we assign hotkeys for. We then use the Win ⊞ + Ctrl + Alt + [hotkey] binding to apply the first custom layout and bind a window to it. Finally, we apply the second custom layout while dragging a window and bind the window to it.

6.) Keyboard Manager utility

The PowerToys Keyboard Manager enables you to redefine keys on your keyboard.

For example, you can exchange the letter A for the letter D on your keyboard. When you select the A key, a D will display.

7.) PowerRename utility

PowerRename is a bulk renaming tool that enables you to:

Modify the file names of a large number of files (without renaming all of the files the same name).
Perform a search and replace on a targeted section of file names.
Perform a regular expression rename on multiple files.
Check expected rename results in a preview window before finalizing a bulk rename.
Undo a rename operation after it is completed.

In this demo, all instances of the file name "Pampalona" are replaced with "Pamplona". Since all of the files are uniquely named, this would have taken a long time to complete manually one-by-one. PowerRename enables a single bulk rename. Notice that the "Undo Rename" (Ctrl+Z) command enables the ability to undo the change.

8.) PowerToys Run utility

PowerToys Run is a quick launcher for power users that contains some additional features without sacrificing performance. It is open source and modular for additional plugins.

To use PowerToys Run, select Alt+Space and start typing!

If that shortcut isn't what you like, don't worry, it is fully configurable in the settings.

9.) Video Conference Mute (Preview)

Important

This is a preview feature and only included in the pre-release version of PowerToys. Running this pre-release requires Windows 10 version 1903 (build 18362) or later.

Quickly mute your microphone (audio) and turn off your camera (video) while on a conference call with a single keystroke, regardless of what application has focus on your computer.

Usage

The default settings to use Video Conference Mute are:

⊞ Win+N to toggle both Audio and Video at the same time
⊞ Win+Shift+A to toggle microphone
⊞ Win+Shift+O to toggle video

When using the microphone and/or camera toggle shortcut keys, you will see a small toolbar window display letting you know whether the your Microphone and Camera are set to on, off, or not in use. You can set the position of this toolbar in the Video Conference Mute tab of PowerToys settings.

Note

Remember that you must have the pre-release/experimental version of PowerToys installed and running, with the Video Conference Mute feature enabled in PowerToys settings in order to use this utility.

This was a quick intro to Microsoft PowerToys

It is developed on GitHub under Microsoft's official GitHub account https://github.com/microsoft/PowerToys the recommended way of downloading it is directly the .exe from the GitHub releases page https://github.com/microsoft/PowerToys/releases/download/v0.43.0/PowerToysSetup-0.43.0-x64.exe

Have fun!

To use React Context for state correctly use it like recoil

Ivan Jeremic — Tue, 20 Apr 2021 19:23:57 +0000

One of the biggest problems in managing state with Context is that react re-renders all the children if a value in the provider changes, So having multiple pieces of state that have nothing to do with one another will make your applications do unnecessary re-renders all the time and this is not manageable stop this!

Imagine having a counter state and a modal state and both are provided to the App via the same Context, that means when you open/close the modal all components of the counter will rerender to.

So how to solve this problem? For people who are familiar with Recoil js, they know that the so-called atoms are only one piece of state and not a store for having all kinds of state in it, they hold really only one piece. So let's do the same in Context, we will create for each state of our application a separate Context file that will hold only one piece of state maximum, Our Provider will provide only the state and the setter for this one piece of state.

Here an example with counter & modal state

/contexts/CounterContext.js

export const CounterContext = createContext();

export function CounterContextProvider({ children }) {
  const [count, setCount] = useState(0);

  return (
    <CounterContext.Provider value={[count, setCount]}>
      {children}
    </CounterContext.Provider>
  );
}

and the modal in a separate file.

/contexts/ModalContext.js

export const ModalContext = createContext();

export function ModalContextProvider({ children }) {
  const [open, setOpen] = useState(false);

  return (
    <ModalContext.Provider value={[open, setOpen]}>
      {children}
    </ModalContext.Provider>
  );
}

I recommend using a folder "contexts" that holds all your state if you are used to "stores" look at you contexts folder as store :)

Now you use the state where you need it as you develop, important here is never wrap the whole App in the providers, if a button in the Header component needs the counter state only wrap the parts one level above in the provider or even more cleaner create a wapper folder and create a wrapper for each component that needs state, this way only the parts re-render that need to change.

/wrappers/CounterButtonWrapper.js

function CounterButton() {
  const [count, setCount] = useContext(CounterContext);

  const increment = () => {
    setCount((prevState) => {
      return prevState + 1
    })
  }

  return (
    <button onClick={increment}>Increment</Button>
  );
}

// use this in your Header
export default function CounterButtonWrapper() {
  return (
   <CounterContext.Provider>
     <CounterButton />
   </CounterContext.Provider>
  );
}

Of course, it is more boilerplate than recoil but not everyone wants to use libraries and if you really want to manage client state with Context then this method with separate contexts for each piece of state and wrappers will scale and is the best way if you ask me.

How CSS Media Queries should work in the Browser.

Ivan Jeremic — Sun, 13 Dec 2020 00:28:27 +0000

This is how Media Queries currently work in the Browser.

.nav {
  background-color: #f40
}

@media screen and (max-width: 992px) {
 .nav {
    background-color: blue;
  }
}

@media screen and (max-width: 600px) {
  .nav {
    background-color: olive;
  }
}

And this is how I think CSS Media Queries should work in CSS.

body {
  breakpoints: {
    sm: 30em,
    md: 48em,
    lg: 62em,
    xl: 80em,
  };
}

.nav {
  background-color: { sm: olive, md: olive, lg: blue, xl: blue };
}

No code duplication.

prevState with useReducer hook in React.

Ivan Jeremic — Sat, 19 Sep 2020 06:18:41 +0000

I wanted to share not only how I currently do State Management with React Context but also what I do when I need prevState, If there are any suggestions for improvement let me know.

Hope this helps some of you :)

import React, {
  createContext,
  useReducer,
  useContext,
  useEffect,
  useRef,
} from 'react';

/* ******* */
/* Reducer */
/* ******* */
function reducer(state, action) {
  switch (action.type) {
    case 'LOGIN':
      return {
        ...state,
        isLoggedIn: true,
      };

    default:
      return state;
  }
}

const StateContext = createContext({});
const DispatchContext = createContext({});
const PrevStateContext = createContext({});

const StateContainer = (Context) => {
  const context = useContext(Context);
  if (context === undefined) {
    throw new Error('Context must be used within a Provider');
  }
  return context;
};

const DispatchContainer = (Context) => {
  const context = useContext(Context);
  if (context === undefined) {
    throw new Error('Context must be used within a Provider');
  }
  return context;
};

const PrevStateContainer = (Context) => {
  const context = useContext(Context);
  if (context === undefined) {
    throw new Error('Context must be used within a Provider');
  }
  return context;
};

const AppContextProvider = (props) => {
  const { children } = props;

  const [state, dispatch] = useReducer(reducer, {
    isLoggedIn: false,
  });

  function usePrevious(value: any) {
    const ref = useRef();
    useEffect(() => {
      ref.current = value;
    });
    return ref.current;
  }

  let prev = usePrevious(state);

  return (
    <StateContext.Provider value={state}>
      <DispatchContext.Provider value={dispatch}>
        <PrevStateContext.Provider value={prev === undefined ? {} : prev}>
          {children}
        </PrevStateContext.Provider>
      </DispatchContext.Provider>
    </StateContext.Provider>
  );
};

const useAppContext = () => {
  return [
    StateContainer(StateContext),
    DispatchContainer(DispatchContext),
    PrevStateContainer(PrevStateContext),
  ];
};

export { AppContextProvider, useAppContext };

StateHub - Easy Context API for React JS

Ivan Jeremic — Wed, 09 Sep 2020 19:31:31 +0000

Everything starts with creating a new StateHub with createHub, this StateHub is everything you will ever need in your components, no other unnecessary imports!

import { createHub } from 'statehub';

export const DemoHub = createHub({
  state: { title: 'Welcome to StateHub' },
  reducer: function (state, action) {
    switch (action.type) {
      case 'CHANGE_TITLE': {
        return {
          title: 'This is the changed StateHub title.',
        };
      }
      default:
        return state;
    }
  },
  methods: {
    LogSomething: function () {
      console.log('Hello Statehub');
    },
    AlertSomething: function () {
      alert('StateHub Alert!');
    },
  },
});

Now wrap your App with the Provider who comes with the DemoHub you created before.

As you can see the API is very clean everything you ever import is your created StateHub and nothing more.

import React from 'react';
import { DemoHub } from '../hubs/DemoHub';

export default function Index() {
  return (
    <DemoHub.Provider>
      <App />
    </DemoHub.Provider>
  );
}

Now you can use the state in your component.

And again you can see, everything you need is coming from your created StateHub, no other imports are required except your DemoHub.

import React from 'react';
import { DemoHub } from '../hubs/DemoHub';

function App() {
  const [state, dispatch, methods] = DemoHub.use(); // call .use() to use the state.

  return (
    <div>
      <h2>{state.title}</h2>
      <button onClick={() => dispatch({ type: 'CHANGE_TITLE' })}>
        Change Title
      </button>

      <h2>Method Example 1:</h2>
      <button type='button' onClick={methods.LogSomething}>
        Log something to the console
      </button>

      <h2>Method Example 2:</h2>
      <button type='button' onClick={methods.AlertSomething}>
        Trigger alert
      </button>
    </div>
  );
}

export default App;

state & reducer is optional that means you can create StateHub's with methods only and retrieve them directly where needed by calling YourHub.methods().

import React from 'react';
import { DemoHub } from '../hubs/DemoHub';

function App() {
  const { LogSomething, AlertSomething } = DemoHub.methods();

  return (
    <div>
      <h2>Method Example 1:</h2>
      <button type='button' onClick={LogSomething}>
        Log something to the console
      </button>

      <h2>Method Example 2:</h2>
      <button type='button' onClick={AlertSomething}>
        Trigger alert
      </button>
    </div>
  );
}

export default App;

You can use as many StateHubs as you want.

import React from 'react';
import App from '../components/App';
import { AuthHub, DatabaseHub, ResponsiveHub, ModalHub } from '../hubs/DemoHub';

export default function Index() {
  return (
    <AuthHub.Provider>
      <DatabaseHub.Provider>
        <ResponsiveHub.Provider>
          <ModalHub.Provider>
            <App />
          </ModalHub.Provider>
        </ResponsiveHub.Provider>
      </DatabaseHub.Provider>
    </AuthHub.Provider>
  );
}

Support for Class Components:

To support React < 16.8.0, where the Context needs to be consumed by class
components here the render-prop based API for context consumers:

import React from 'react';
import { DemoHub } from '../hubs/DemoHub';

class App extends React.Component {
  render() {
    return (
      <DemoHub.Consumer>
        {(state, dispatch, methods) => (
          <div>
            <h2>{state.title}</h2>
            <button onClick={() => dispatch({ type: 'CHANGE_TITLE' })}>
              Change Title
            </button>

            <h2>Method Example 1:</h2>
            <button type='button' onClick={methods.LogSomething}>
              Log something to the console
            </button>

            <h2>Method Example 2:</h2>
            <button type='button' onClick={methods.AlertSomething}>
              Trigger alert
            </button>
          </div>
        )}
      </DemoHub.Consumer>
    );
  }
}

Why Dev.to has a .to domain?

Ivan Jeremic — Fri, 03 Jul 2020 03:07:49 +0000

Why Dev.to has a .to domain and not something like Dev.io or Dev.dev?

DEV.TO Platform questions

Ivan Jeremic — Wed, 27 May 2020 08:41:12 +0000

Why is DEV.TO sending random notifications without following the post or author, this leads to too much information that I don't need.
Since I know for DEV.TO I'm not able to comment on the mobile PWA when I click on send I get only the loading animation, multiple times tried to delete and install PWA again but always the same problem.
A bit more technical question but what was the reason to choose Ruby over Nodejs for DEV.TO backend?

Thanks

Complex Custom Hooks with createContext();

Ivan Jeremic — Thu, 07 May 2020 16:44:14 +0000

Tell me what you think in the comments :)

The reason I like this way of creating hooks is, it is easier & cleaner to provide executable functions to components. Any suggestions or tips?

I know the title says Complex Custom Hooks but this example is very simple so everyone can follow.

I use this way of creating Custom Hooks also for complex Mutations with React Apollo, so all the mutation logic is inside my hook and the component has only markup all it gets are the functions from the custom hook.

The difference to normal hooks is you need to wrap your -
component who needs the data with the Context.Provider to use the hook.

CodeSandbox Example

https://codesandbox.io/s/useaddtask-complex-hooks-with-context-hooks-api-w2pn5?file=/src/App.js