DEV Community: Slava Borodulin

Auto change MacOS network settings with WiFiLocControl

Slava Borodulin — Tue, 28 Nov 2023 13:20:56 +0000

Repo: https://github.com/vborodulin/wifi-loc-control

WiFiLocControl enables you to automatically change your macOS network location based on the Wi-Fi network (SSID) to which you are connected.

It proves particularly beneficial for users who use Wi-Fi both at work and at home, but encounter issues where the network settings, such as custom DNS configurations, used at work prevent their Mac from seamlessly connecting to a similar network at home.

I personally encountered a similar issue when I installed Pi-Hole on my Raspberry Pi to block ads on my network. Unfortunately, I couldn't configure custom DNS settings on my router due to restrictions imposed by my internet provider, who supplied the router. As a result, my only option was to manually set custom DNS with the IP address of my Raspberry Pi on each of my devices.

For example, when configuring DNS settings on my iPhone, those settings are specific to the Wi-Fi network. This means that if I connect to a different Wi-Fi network, the DNS settings revert to default.

In macOS, however, the situation is the opposite; the settings for Wi-Fi are not specific to the Wi-Fi network but rather to the network service. This means that if I want to use my MacBook at home with Wi-Fi and at work, I have to manually add the Pi-Hole DNS at home and remove it at work to revert to the default settings (such as Google's DNS).

To address this inconvenience, we can leverage network location, which allows the creation of multiple network profiles with different settings. However, you still need to switch profiles manually. This is where [WiFiLocControl (https://github.com/vborodulin/wifi-loc-control) comes in to automate and simplify the process!

Usage

To set up specific preferences for your Wi-Fi networks, keep it easy: just name your network locations after your Wi-Fi names. For example, if you want special settings for "My_Home_Wi-Fi_5GHz," make a location called "My_Home_Wi-Fi_5GHz." When you connect to that Wi-Fi, your location will switch automatically. If you connect to a Wi-Fi without a special name, it defaults to "Automatic.".

Features

Automatically changes network locations based on current Wi-Fi name.
Supports alias configurations for multiple Wi-Fi names.
Executes location-specific scripts.

Installation

Clone the repository to your local machine.

git clone https://github.com/vborodulin/wifi-loc-control.git
cd ./wifi-loc-control

Run the bootstrap script to set up the environment.
```
./bootstrap.sh    
```

It will ask you for a root password to install WiFiLocControl to the /usr/local/bin
directory.

Configuration

Aliasing

If you want to share one network location between different wireless networks (for instance, you have a wireless router which broadcasts on 2.4 and 5GHz bands simultaneously), then you can create a configuration file ~/.wifi-loc-control/alias.conf (plain text file with simple key-value pairs, no
spaces in between):

My_Home_Wi-Fi_5GHz=Home
My_Home_Wi-Fi_2.4GHz=Home

Where the keys are the wireless network names and the values are the desired location names.

Run Scripts on Wi-Fi Network Connection

Sometimes you want to execute a script every time you connect to a specific Wi-Fi network. For example enable stealth or enable firewall mode. Follow these
steps:

Place your scripts in ~/.wifi-loc-control/.
Name the scripts after the Wi-Fi network name, ensuring consistency with the corresponding network locations.

Example script (~/.wifi-loc-control/My_Home_Wi-Fi_5GHz):

#!/usr/bin/env bash
# Collect all output from this script to ~/Library/Logs/WiFiLocControl.log
exec 2>&1

# Enable stealth mode which makes your computer less visible to potential attackers
/usr/libexec/ApplicationFirewall/socketfilterfw --setglobalstate on

To reset changes made by specific location scripts, create corresponding reset script.
Example reset script (~/.wifi-loc-control/Automatic):

#!/usr/bin/env bash
exec 2>&1

# Disable stealth mode which makes your computer less visible to potential attackers
/usr/libexec/ApplicationFirewall/socketfilterfw --setglobalstate off

Make scripts executable

chmod +x ~/.wifi-loc-control/My_Home_Wi-Fi_5GHz
chmod +x ~/.wifi-loc-control/Automatic

Troubleshooting

Rich logs available at ~/Library/Logs/WiFiLocControl.log.

tail -f ~/Library/Logs/WiFiLocControl.log

Logs examples:

[2023-11-26 13:44:49] current wifi_name 'My_Home_Wi-Fi_5GHz'
[2023-11-26 13:44:49] network locations: Automatic Home
[2023-11-26 13:44:49] current network location 'Automatic'
[2023-11-26 13:44:49] reading alias config '/Users/vborodulin/.wifi-loc-control/alias.conf'
[2023-11-26 13:44:49] for wifi name 'My_Home_Wi-Fi_5GHz' found alias 'Home'
[2023-11-26 13:44:49] location switched to 'Home'
[2023-11-26 13:44:49] finding script for location 'Home'
[2023-11-26 13:44:49] running script '/Users/vborodulin/.wifi-loc-control/Home'

Contributing

Contributions are welcome! If you have suggestions, improvements, or encounter issues, feel free to open an issue or submit a pull request.

Repo: https://github.com/vborodulin/wifi-loc-control

License

This project is licensed under the MIT License.

Using pipes in Next.js getServerSideProps

Slava Borodulin — Tue, 06 Sep 2022 16:40:52 +0000

This post, and posts like it, are an attempt to share my insights and experience with community.

Pipe functions

A pipe function is not a new concept for people familiar with functional programming. The concept of pipe is simple - it combines n functions. Each function push information downwards transforming into a desired format. It’s a pipe flowing left-to-right, calling each function with the output of the last one.

const double = (num) => num * 2;
const add1 = (num) => num + 1;

pipe(add1, double)(5) // equivalent double(add1(5));
// returns 12

Pipe functions give ability to create small and reusable peaces of code combining together in multiple variations.

The idea of pipe function is pretty simple to understand and to implement in JavaScript. However, there is an interesting challenge around building such a functionality when working with promises and asynchronous data fetching. An even bigger challenge is fit functionality to getServerSideProps.

Let's implement such a function in TypeScript.

Pipe implementation

ssrHelpers.ts

import { GetServerSidePropsContext, GetServerSidePropsResult } from 'next';

export type TPipeGetServerSideProps = (
  context: GetServerSidePropsContext,
  input: { props: Promise<any> | any }
) => Promise<GetServerSidePropsResult<any>> | GetServerSidePropsResult<any>;

const pipe = (...fns: TPipeGetServerSideProps[]) => async (
  context: GetServerSidePropsContext
) => {
  let res: GetServerSidePropsResult<any> = {
    props: {},
  };

  for await (const fn of fns) {
    res = await fn(context, res);

    // it means we have notFound or redirect.
    // We need to break our pipe and return this result immediately.
    if (!('props' in res)) {
      break;
    }
  }

  return res;
};

There are 4 important aspects to understand in this small code snippet:

By using the spread operator, we can accept an unlimited number of piped functions.
Each function receives input as an argument the resolved value of the previous Promise.
If result execution of piped functions does not have props property

export type GetServerSidePropsResult<P> =
  | { props: P | Promise<P> }
  | { redirect: Redirect }
  | { notFound: true }

it means we have notFound or redirect. So we need to break our pipe and return this result immediately.

We end up returning the data in the format Next.js is expecting in getServerSideProps - GetServerSidePropsResult.

Pipe example usage

export const getServerSideProps: GetServerSideProps = ssrHelpers.pipe(
  ssrPipes.withAuth(),
  ssrPipes.withSubscription(),
);

The first function will then receive as an argument the Next.js context. It can then proceed to fetch the user session and information based the context object and send along the information to the next function in line:

// we can pass arg as options to piped function
const withAuth = (): TPipeGetServerSideProps => async (
  context, input
) => {
  const user = await fetchUser();

  // if !user -> not auth
  // return notFound and break piped functions chain
  if (!user) {
    return {
      notFound: true
    }
  }

  // merge props and pass down to the next function
  return {
    props: {
      ...input.props,
      user,
    }
  }
};

The next function passed will then receive the previous function's return value as an argument. It can then proceed to fetch new information and format it to be passed down the chain. In our example, this is our last function, so we will return an object representing the value of our Page's props:

// we can pass arg as options to piped function
const withSubscription = (): TPipeGetServerSideProps => async (
  context, input
) => {
  const { user } = input.props as { user: TUser;}
  const subscription = await fetchSubscription(user.id);

  // subscription can be empty
  // merge props and pass down to the next function
  return {
    props: {
      ...input.props,
      subscription,
    }
  }
};

An unlimited number of functions can then work together to achieve a pipeline of information. The last function is responsible to return the final Props object. This object will then be injected as a prop to the next.js Page component:

const IndexPage: NextPage<TIndexPageProps> = (props) => {
  const {
    user,
    subscription,
    albums,
  } = props;

  return (
    <main>
      <h1>Index Page</h1>
      <p>
        user: {JSON.stringify(user)}
      </p>
      <p>
        subscription: {JSON.stringify(subscription)}
      </p>
      <p>
        albums: {JSON.stringify(albums)}
      </p>
    </main>
  );
};

export const getServerSideProps: GetServerSideProps = ssrHelpers.pipe(
  ssrPipes.withAuth(),
  ssrPipes.withSubscription(),
);

Parallel execution implementation

pipe helper call piped function one after the other sequentially. This may be inefficient if we want to piped several functions that make a request to the server.
We can run this functions in parallel by writing our own helpers inspired by Promise.all.

ssrHelpers.ts

const pipesExecParallel = (...fns: TPipeGetServerSideProps[]): TPipeGetServerSideProps => async (
  context,
  input
) => {
  const promiseArr: (Promise<GetServerSidePropsResult<any>> | GetServerSidePropsResult<any>)[] = [];

  fns.forEach((fn) => {
    promiseArr.push(fn(context, input));
  });

  const promiseAllRes = await Promise.all(promiseArr);

  let notFoundRes: GetServerSidePropsResult<any> | null = null;
  let redirectRes: GetServerSidePropsResult<any> | null = null;
  const propsRes: GetServerSidePropsResult<any> = {
    props: {},
  };

  for (let i = 0; i < fns.length; i++) {
    const fnRes = promiseAllRes[i];

    if ('props' in fnRes) {
      propsRes.props = {
        ...propsRes.props,
        ...fnRes.props,
      };
    }

    if ('notFound' in fnRes && fnRes.notFound) {
      notFoundRes = {
        notFound: true,
      };
      break;
    }

    if ('redirect' in fnRes) {
      redirectRes = {
        redirect: fnRes.redirect,
      };
      break;
    }
  }

  if (notFoundRes) {
    return notFoundRes;
  }

  if (redirectRes) {
    return redirectRes;
  }

  return propsRes;
};

To better understand this code snipped let's remember how works Promise.all. It rejects immediately upon any of the input promises rejecting or non-promises throwing an error, and will reject with this first rejection message / error.
Similar to Promise.all pipesExecParallel take functions and run its with Promise.all under the hood. If one of functions return notFound or redirect it's consider and rejection / error and return this result immediate. Otherwise all functions results merged and pass down to next function in pipe.

Parallel execution example usage

export const getServerSideProps: GetServerSideProps = ssrHelpers.pipe(
  ssrPipes.withAuth(), // 500ms
  // run two async piped function parallel to minimize fetching data time
  ssrHelpers.pipesExecParallel( // 500ms in parallel execution
    ssrPipes.withSubscription(), // 500ms
    ssrPipes.withAlbums(), // 500ms
  ),
);
// total 1000ms

Full code example

vborodulin / using-pipe-nextjs-get-server-side-props

Using Pipeline pattern to organize code in getServerSideProps or getStaticProps methods of Next.js

Pipe functions

const double = (num) => num * 2;
const add1 = (num) => num + 1;

pipe(add1, double)(5) // equivalent double(add1(5));
// returns 12

Pipe functions give ability to create small and reusable peaces of code combining together in multiple variations.

View on GitHub

Conclusion

Pipe functions great fits into functional programming react paradigm and helps:

organize data fetching, validations in getServerSideProps in the one style
combine small methods with single responsibility in complex getServerSideProps call with pipe helper
share reusable pipes across pages(withAuth, withUser, withSubscription)
run pipes in parallel with helper pipesExecParallel

Inspired by

https://www.frontend-devops.com/blog/pipe-serverside-props-in-nextjs

Detection device type with pure CSS

Slava Borodulin — Sat, 27 Feb 2021 16:03:57 +0000

/* smartphones, touchscreens */
@media (hover: none) and (pointer: coarse) {
    /* ... */
}
/* stylus-based screens */
@media (hover: none) and (pointer: fine) {
    /* ... */
}
/* Nintendo Wii controller, Microsoft Kinect */
@media (hover: hover) and (pointer: coarse) {
    /* ... */
}
/* mouse, touch pad */
@media (hover: hover) and (pointer: fine) {
    /* ... */
}

How to implement mongoose soft delete plugin

Slava Borodulin — Wed, 28 Oct 2020 08:57:11 +0000

Pure CSS ios style scroll bar with paddings

Slava Borodulin — Mon, 26 Oct 2020 08:53:19 +0000

TS: How to override properties with type intersection

Slava Borodulin — Mon, 25 May 2020 19:25:40 +0000

Hi, let's imagine the situation. We have type

type A = {
  a: string;
  b: string;
}

We want to get a new type using an intersection. It's just what we thought

type AB = A & {
  b: number;
};

But it's not working☹️

Of course, we can use interfaces instread

interface A {
  a: string;
  b: string;
}

interface AB extends A {
  b: number;
}

But how do that with types? Let's create a new utility type that can help us

type Override<T1, T2> = Omit<T1, keyof T2> & T2;

type AB = Override<A, { b: number }>

Pretty easy and very helpful. 🤟

Introducing Storybook Addon Performance🚀

Slava Borodulin — Sat, 09 May 2020 12:14:36 +0000

Good day! Today I will introduce an awesome tool that will be useful for every React developer. Storybook Add-on Performance🚀!!!.

Who doesn't know about storybook:

storybookjs / storybook

📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!

Build bulletproof UI components faster

Storybook is a development environment for UI components.
It allows you to browse a component library, view the different states of each component, and interactively develop and test components.
Find out more at https://storybook.js.org.

View README for:

🚀 Getting Started
📒 Projects
- 🛠 Supported Frameworks & Examples
- 🚇 Sub Projects
- 🔗Addons
🏅 Badges & Presentation materials
👥 Community
👏 Contributing
- 👨‍💻 Development scripts
- 💵 Backers
- 💸 Sponsors
📝 License

Getting Started

Visit Storybook's website to learn more about Storybook and to get started.

Documentation

Documentation can be found Storybook's docs site.

Examples

Here are some featured examples that you can reference to see how Storybook works: https://storybook.js.org/showcase

Storybook comes with a lot of addons for component design, documentation, testing, interactivity, and so on. Storybook's API makes it possible to configure and extend in various ways. It has even been…

View on GitHub

Over the year Atlassian team worked on the experimental addon for a storybook. This add-on can help to understand and debug performance problems with React components.

When should I use it?

During development, you can take into consideration the results of the tests. The performance metrics will show when something goes wrong.
For performance issues. Reports from performance addon can show how effective your refactor is.

Tips for correct performing measurements

Part of metrics has constant results during repeated tests and has no direct effect on performance:
- string output size
- string output size(gzip)
- static markup output size
- static markup output size(gzip)
- dom elements count
The results of rendering metrics have a significant difference during repeated tests:
- initial render
- re-render
- render to string
- render to static markup
- hydrate
To minimize inaccuracy you can
- choose the max count of samples
- repeat tests and compare results on the same machine with the same state of the system (system upload and the temperature has an efficient effect)
- for QA testing you can use a separate computer with turn off thermal throttling, turn off turbo boost, and with setting the maximum number of fan revolutions
Use the 99 percentile for measurements. The explanation is in this article.

Enjoy!🤟

atlassian-labs / storybook-addon-performance

🚧 A storybook addon to help better understand and debug performance for React components.

storybook-addon-performance 🚀

A storybook addon to help better understand and debug performance for React components

🚧 This addon is experimental and a work in progress. We are not on stable versions yet 🚧

📺 Project overview by Jack Herrington

Highlights 🌟

Zero config (except for interactions): Generate performance information relating to server-side rendering and client-side mounting without any configuration
Pin results: You can run some tasks, pin the result, make some changes, rerun the tasks and see what changed
Save/Load results: You can run some tasks, save the results as a local artifact, and run them again later by loading the artifact back into the addon.
Interactions: Add your own custom user interactions to run as a parameter to your story. This lets you time how long interactions take. The API for this is super flexible and powerful!
Control: Run all tasks for an overview…

View on GitHub

Best way to deal with immutable data in JS

Slava Borodulin — Fri, 08 May 2020 20:42:29 +0000

Hey, Devs😎 I don't know how I miss it before, but I find out the best way to deal with immutable data.

Data and Structure types in JavaScript

Six Primitive types checked by typeof operator
- undefined - typeof undefined === 'undefined'
- Boolean - typeof true === 'boolean'
- String - typeof 'hello' === 'string'
- Number - typeof 10 === 'number'
- BigInt - typeof 10n === 'bigint'
- Symbol - typeof Symbol() === 'symbol'
null - special primitive type, typeof null === 'object'
Object Inclides Array, Map, Set, WeekMap, WeekSet, Date- typeof {} === 'object'
Function - typeof () => {} === 'function'

Problem

JavaScript assignment works in two ways. For primary types (Boolean, String, Number, BigInt, null, Symbol) assignment returns the new value. For complex types (Object) it returns a reference (pointer in memory) and any changes will impact all entries because all these entries are just references on the same pointer in memory.

And the problem is that no guaranty that something will stay unchanged. The worst-case scenario is when the structure is used in different parts of the application. The mutation of this structure in one of the components can affect the bug in the whole application. And this bug is really hard to track. Where it was changed? What exactly was changed? Who also has access to the reference? But the history of change is not available and questions can’t be easily answered.

In React-Redux stack we are used to handling immutable data, but sometimes it can be very tedious with ES6 native way;

function updateVeryNestedField(state, action) {
  return {
    ...state,
    first: {
      ...state.first,
      second: {
        ...state.first.second,
        [action.someId]: {
          ...state.first.second[action.someId],
          fourth: action.someValue
        }
      }
    }
  }
}

Oh yeah😱 Looks familiar?

switch (action.type) {
 case ADD_NEW_AVAILABLE_COLOR_TO_CAR:{
  const { color, model, manufacturer } = action.payload
  return {...state, manufacturer: {
    ...state.manufacturer, [manufacturer]:
    {...state.manufacturers[manufacturers], models:
      {...state.manufacturers[manufacturers].models, [model]:
        {...state.manufacturers[manufacturers].models[model], options:
          {...state.manufacturers[manufacturers].models[model].options, colors:
          {...state.manufacturers[manufacturers].models[model].options.colors, [color]: true}
         }
       }
     }
   }
 }
 default: return state
}

Of course, you can say "hey buddy, you forgot about immutable-js"

immutable-js / immutable-js

Immutable persistent data collections for Javascript which increase efficiency and simplicity.

Immutable collections for JavaScript

Chat on slack

Read the docs and eat your vegetables.

Docs are automatically generated from README.md and immutable.d.ts Please contribute! Also, don't miss the wiki which contains articles on additional specific topics. Can't find something? Open an issue.

Table of contents:

Introduction

Immutable data cannot be changed once created, leading to much simpler application development, no defensive copying, and enabling advanced memoization and change detection techniques with simple logic. Persistent data presents a mutative API which does not update the data in-place, but instead always yields new updated data.

Immutable.js provides many Persistent Immutable data structures including List, Stack, Map, OrderedMap, Set, OrderedSet and Record.

These data structures are highly efficient on modern…

View on GitHub

But I don't like it this way. It's an extra abstraction in your code with uncommon data structures for frontend developers. It seriously increases the entry threshold in your project for other developers. And debugging is really painful as hell. I have to click and click and click once again to expand the wrapped data in the console. However, it is just a simple nested list of objects. I can’t simply find out what’s inside😡

Solution

kolodny / immutability-helper

mutate a copy of data without changing the original source

immutability-helper

Mutate a copy of data without changing the original source

Setup via NPM

npm install immutability-helper --save

This is a drop-in replacement for react-addons-update:

// import update from 'react-addons-update';
import update from 'immutability-helper';

const state1 = ['x'];
const state2 = update(state1, {$push: ['y']}); // ['x', 'y']

Note that this module has nothing to do with React. However, since this module is most commonly used with React, the docs will focus on how it can be used with React.

Overview

React lets you use whatever style of data management you want, including mutation. However, if you can use immutable data in performance-critical parts of your application it's easy to implement a fast shouldComponentUpdate() method to significantly speed up your app.

Dealing with immutable data in JavaScript is more difficult than in languages designed for it…

View on GitHub

Library immutable-helpers represents a simple immutable helper update:

import update from ' immutable-helpers';

const newData = update(myData, {
  x: {y: {z: {$set: 7}}},
  a: {b: {$push: [9]}}
});

You can see it, right? It's really simple! The icing on the cake is a familiar approach that we really well know from mongodb native driver:

db.products.update(
   { _id: 100 },
   { $set:
      {
        quantity: 500,
        details: { model: "14Q3", make: "xyz" },
        tags: [ "coats", "outerwear", "clothing" ]
      }
   }
)

List of available commands:

{$push: array} push() all the items in array on the target.
{$unshift: array} unshift() all the items in array on the target.
{$splice: array of arrays} for each item in arrays call splice() on the * target with the parameters provided by the item.
{$set: any} replace the target entirely.
{$merge: object} merge the keys of object with the target.
{$apply: function} passes in the current value to the function and updates it with the new returned value.

And finally my personal small example of how organically it fits into the Redux reducers:

const reducer = (state = initialState, action: IAppAction): TState => {
  switch (action.type) {
    case CONVERSATIONS_ADD: {
      const { conversation } = action.data;

      return update(state, {
        [conversation.counterpartId]: { $set: conversation },
      });
    }
    case CONVERSATION_READ_SUCCESS:
      return update(state, {
        [action.data.counterpartId]: { unread: { $set: 0 } },
      });
    default:
      return state;
  }
};

You are welcome! But don't forget, it's not the tools that make you a good developer.