I created local-https, a simple tool to run any local project on HTTPS with a custom local domain.

• No browsers hacks
• No changing your app’s code
• Works on macOS and Linux

GitHub: https://github.com/vikas-0/local-https

What is local-https?

local-https is a small Ruby CLI that:

• Generates trusted local TLS certificates with mkcert
• Maps your domain to 127.0.0.1 in /etc/hosts
• Runs an HTTPS reverse proxy (WEBrick) that forwards to your local app
• Supports multiple domains via SNI
• Optionally redirects HTTP (port 80) to HTTPS (port 443)

You get a local URL like https://myapp.test that points to your app on localhost:3000.

Quick start

Requirements:

• macOS or Linux
• Ruby 3.0+
• sudo access for binding to ports 443/80 and editing /etc/hosts

Install:

Homebrew (Tap):

brew tap vikas-0/tap
brew install vikas-0/tap/local-https

Manual (from source):

git clone https://github.com/vikas-0/local-https
cd local-https
./install.sh

Steps:

# 1) Add a mapping (domain -> local port)
local-https add myapp.test 3000

# 2) Start the proxy (binds to :443 and :80 for redirect)
sudo local-https start

# 3) Open your app
open https://myapp.test

Tips:

• Run in foreground for logs: sudo local-https start --no-daemon
• Disable HTTP→HTTPS redirect: sudo local-https start --no-redirect-http

Works with any tech stack

As local-https simply terminates TLS and proxies to your local port. It doesn’t require any stack specific configuration.

• Frontend frameworks (Next.js, React, Vue, Vite, Angular)
• Backend APIs (Rails, Django, Flask, Express, Spring)
• Webhooks and OAuth callback testing (GitHub, Google, etc.)

How it works (under the hood)

• Certs are created with mkcert and saved in ~/.local-https/certs
• /etc/hosts gets 127.0.0.1 myapp.test # local-https
• The proxy presents the correct certificate per domain (SNI) and forwards traffic to http://127.0.0.1:<port>
• Config is a simple JSON file at ~/.local-https/config.json

Configure your app to accept your custom domain

Most frameworks will just work, but some block unknown hosts in development. Make sure your app accepts the domain you chose (like myapp.test).

Example: Rails (config/environments/development.rb)

# Allow your custom domain in dev (Rails 6+ Host Authorization)
config.hosts << "myapp.test"

# Optional: if you generate URLs in controllers/mailers, set defaults
config.action_controller.default_url_options = { host: "myapp.test", protocol: "https" }
config.action_mailer.default_url_options     = { host: "myapp.test", protocol: "https" }

# You do NOT need to force SSL in Rails dev. local-https terminates TLS and
# forwards plain HTTP to your app on localhost:PORT.
# config.force_ssl = false

Notes:

• If you use multiple local domains, add each one with config.hosts << "api.test".
• For subdomains, you can whitelist a regex: config.hosts << /.*\.test/.
• Keep your app listening on its normal dev port (e.g., 3000); no TLS changes needed in the app.

Why HTTPS locally?

• Secure cookies, SameSite=None, Service Workers
• OAuth callbacks and cross-origin requests
• Matching production behavior
• Avoid mixed content warnings and browser feature limits

Frequently asked questions (FAQ)

• Can I use multiple domains?

  • Yes. Add as many as you want: local-https add api.test 4000, etc.

• Do I need to change my app code?

  • No. Your app still listens on HTTP (localhost). The proxy handles HTTPS.

• Does this work with Docker?

  • Yes. Point the mapping port to the host port where Docker publishes your service.

• Is this safe?

  • Certificates and config live in your user home. The proxy only listens locally (by default bind 0.0.0.0, changeable in code). For public exposure you’d use a proper reverse proxy.

Picture this: Your Rails application is humming along nicely until suddenly, user growth explodes. Great news, right? Not for our job queue.

In a previous application I worked on, we faced significant challenges scaling ActiveJobs, primarily due to numerous Elasticsearch indexing and other I/O-bound tasks. As our user base grew, thousands of small jobs overwhelmed our queue, creating a perfect storm of bottlenecks despite our best efforts at dynamic worker scaling.

We tried all the usual solutions:

• Increased worker counts (which quickly hit diminishing returns)
• Added more powerful servers (hello, spiraling AWS bills)
• Optimized database connections (still not enough)
• Tweaked job priorities and batching strategies (marginal improvements at best)

Yet we still hit hard limits with database connections, memory consumption, and infrastructure costs. The fundamental issue wasn’t our implementation,it was the thread-based job processing paradigm itself, which simply wasn’t optimized for our I/O-heavy workload.

Why AsyncJob for I/O-Bound Operations?

Enter AsyncJob, a gem that fundamentally reimagines how Ruby handles concurrent operations by leveraging Ruby fibers for cooperative multitasking.

The Thread vs. Fiber Difference

To understand why this matters, let’s break down what happens during an Elasticsearch indexing operation:

With traditional thread-based job processors (like SolidQueue):

1. A thread makes an HTTP request to Elasticsearch
2. The thread blocks while waiting for a response
3. The OS must context-switch to another thread
4. Each thread requires its own memory stack (often 1MB+ per thread)
5. Thread context switching has significant overhead

With fiber-based AsyncJob:

1. A fiber makes an HTTP request to Elasticsearch
2. The fiber voluntarily yields control while waiting
3. Another fiber can immediately use the same thread
4. Fibers are lightweight (a few KB each)
5. Switching between fibers is extremely efficient

This approach is exceptionally efficient for operations that spend most of their time waiting for external resources (I/O-bound), because instead of wasting CPU cycles waiting for responses, the system can process other jobs in the meantime.

Getting Started with AsyncJob

Integrating AsyncJob into your Rails application is surprisingly straightforward. The gem provides an adapter for ActiveJob, allowing you to selectively apply it to jobs that would benefit most from fiber-based processing.

Installation

Add these gems to your Gemfile:

gem 'async-job'
gem 'async-job-adapter-active_job'
gem 'async-job-processor-redis'

Then run:

bundle install

Configuration

For jobs that would benefit from fiber-based processing, simply specify AsyncJob as the queue adapter:

class SearchIndexingJob < ApplicationJob
  self.queue_adapter = :async_job  # This job uses fibers
  queue_as :default
  
  def perform(document)
    # Your I/O-heavy code here
  end
end

You can continue using your existing queue adapter for other jobs:

class CPUIntensiveJob < ApplicationJob
  # This job still uses your default queue adapter
  queue_as :default
  
  def perform(data)
    # CPU-intensive operations
  end
end

For more detailed setup instructions, check out the AsyncJob Active Job Adapter documentation.

Benchmarking AsyncJob vs. SolidQueue for OpenSearch Operations

To validate my hypothesis about AsyncJob’s benefits for I/O-bound operations, I created a comprehensive benchmarking project comparing AsyncJob (fiber-based) with SolidQueue (thread-based) for OpenSearch indexing operations.

The Experiment Setup

I created two nearly identical jobs:

• JobTest1Job - Using SolidQueue with synchronous HTTP calls
• JobTest2Job - Using AsyncJob with asynchronous HTTP calls

Both jobs perform the same task: indexing documents in OpenSearch. To simulate real-world conditions with network latency, I added a 3-second artificial delay to each OpenSearch request, results were drastically different. But the results here are without any simulated delay.

The full code and detailed results are available in my GitHub repository.

========== BENCHMARK RESULTS ==========

----- Batch Size: 10 documents -----
SolidQueue (JobTest1Job):
  Avg Enqueue Time: 0.18s
  Avg Total Time: 1.19s
  Avg Throughput: 8.45 docs/second

AsyncJob (JobTest2Job):
  Avg Enqueue Time: 0.06s
  Avg Total Time: 1.06s
  Avg Throughput: 9.39 docs/second

Result: AsyncJob was 11.6% faster for 10 documents

----- Batch Size: 100 documents -----
SolidQueue (JobTest1Job):
  Avg Enqueue Time: 0.59s
  Avg Total Time: 1.6s
  Avg Throughput: 62.96 docs/second

AsyncJob (JobTest2Job):
  Avg Enqueue Time: 0.24s
  Avg Total Time: 1.25s
  Avg Throughput: 80.12 docs/second

Result: AsyncJob was 27.4% faster for 100 documents

----- Batch Size: 1000 documents -----
SolidQueue (JobTest1Job):
  Avg Enqueue Time: 4.8s
  Avg Total Time: 19.17s
  Avg Throughput: 54.78 docs/second

AsyncJob (JobTest2Job):
  Avg Enqueue Time: 2.25s
  Avg Total Time: 3.25s
  Avg Throughput: 307.48 docs/second

Result: AsyncJob was 489.1% faster for 1000 documents

========================================

========== RESOURCE USAGE METRICS ==========

----- SOLID_QUEUE Resource Usage -----
Memory Usage:
  Average: 128.69 MB
  Maximum: 177.19 MB
CPU Usage:
  Average per job: 28.4549 seconds
  Total CPU time: 74295.6439 seconds

----- ASYNC_JOB Resource Usage -----
Memory Usage:
  Average: 89.42 MB
  Maximum: 118.83 MB
CPU Usage:
  Average per job: 3.128 seconds
  Total CPU time: 5864.9192 seconds

----- Comparison -----
Memory Usage: AsyncJob uses -30.51% less memory than SolidQueue
CPU Usage: AsyncJob uses -92.11% less CPU time than SolidQueue

Note: For solid queue, I have used 1 worker with 3 threads, which is a default configuration for solid queue.

Analyzing the Results

Performance Scaling with Batch Size

The most striking finding from the benchmarks is how AsyncJob’s advantage scales with batch size:

Key Insight: AsyncJob’s performance advantage dramatically increases with the number of I/O operations. For small workloads, the difference is noticeable but modest. For large workloads, the difference is transformative.

Resource Efficiency

Beyond raw speed, the resource efficiency gains are equally impressive:

• Memory Usage: AsyncJob uses 30.5% less memory than SolidQueue (89.42 MB vs 128.69 MB)
• CPU Usage: AsyncJob uses 92.1% less CPU time than SolidQueue (5,865 seconds vs 74,296 seconds)

This translates to significant infrastructure cost savings at scale.

The Secret Sauce: Async HTTP Client

A key part of my implementation was creating a fiber-aware HTTP client for OpenSearch. Here’s a simplified version:

class AsyncOpenSearchClient
  def index(index:, id: nil, body:)
    # Return an Async task that performs the request asynchronously
    Async do |task|  
      # Make the request asynchronously
      response = Async::HTTP::Internet.post(url, headers, json_body)
      
      # Process response...
    end
  end
end

This client ensures that while waiting for HTTP responses, other fibers can continue processing, maximizing throughput.

When to Use AsyncJob

Based on my benchmarks and some research (Google and AI), AsyncJob is ideal for:

1. Search Engine Indexing

This was our primary pain point. AsyncJob transforms Elasticsearch/OpenSearch indexing by efficiently switching fibers during network I/O waits, allowing concurrent indexing operations.

class SearchIndexingJob < ApplicationJob
  self.queue_adapter = :async_job
  queue_as :default

  def perform(document)
    # Each index operation is an I/O operation where AsyncJob can yield
    search_client.index(
      index: "content",
      id: document.id,
      body: document.to_indexed_json
    )
  end
end

2. API Integrations

Jobs that make external API calls are perfect candidates for AsyncJob:

class NotificationJob < ApplicationJob
  self.queue_adapter = :async_job
  queue_as :default

  def perform(user_id, message)
    # Multiple API calls can run concurrently
    push_notification_service.send(user_id, message)
    slack_service.notify(message)
    analytics_service.track("notification_sent", user_id)
  end
end

3. LLM Operations

Large Language Model API calls typically have high latency, making them ideal for AsyncJob:

class AIProcessingJob < ApplicationJob
  self.queue_adapter = :async_job
  queue_as :default

  def perform(documents)
    # Process multiple documents concurrently
    documents.each do |doc|
      summary = llm_client.summarize(doc.content)
      doc.update(ai_summary: summary)
    end
  end
end

When NOT to Use AsyncJob

1. CPU-Intensive Operations: If your job is CPU-bound (complex calculations, image processing), traditional thread-based queues may perform better.

2. Very Short-Running Jobs: For jobs that complete in milliseconds with minimal I/O, the overhead of fiber management might not be worth it.

3. Jobs with Non-Fiber-Aware Dependencies: Some gems and libraries aren’t fiber-aware and may block fibers, negating AsyncJob’s benefits.

4. Jobs Requiring Robust Error Handling: AsyncJob currently lacks some of the error handling capabilities found in more mature job processors.

Important Considerations: Error Handling with AsyncJob

While AsyncJob offers impressive performance benefits, it’s important to be aware of its current limitations in error handling:

1. Limited Built-in Error Handling
2. Manual Error Logging Required
3. Monitoring Challenges

Conclusion: A Game-Changer for I/O-Heavy Workloads

For applications with significant I/O-bound job processing needs, AsyncJob represents a paradigm shift in performance and efficiency. My benchmarks show that it’s not just marginally better—it can be 5x faster while using 30% less memory and 90% less CPU time.

The best part? You can gradually adopt AsyncJob for specific jobs without changing your entire infrastructure. Start by identifying your most I/O-intensive jobs and convert them first to see immediate benefits.

If your Rails application is struggling with I/O-bound job processing, AsyncJob might just be the solution you’ve been looking for.

(Note: I have not used it extensively in production yet, but the benchmarks show promising results.)

If you prefer to dive directly into the code, check out the example on Github

Prerequisites

Ensure you have the following installed:

• Ruby on Rails
• Redis
• Node.js and Yarn
• Your preferred mehtod of React Setup with Rails

Step 1: Setting Up Mantine

First, we’ll set up Mantine for styling. Follow the Mantine guide for Vite to install the necessary packages: (Same method worked for me using esbuild in my setup. You can do it you own way or choose not to use Mantine)

yarn add @mantine/core @mantine/hooks @mantine/tiptap @tabler/icons-react @tiptap/react @tiptap/extension-link @tiptap/starter-kit @tiptap/extension-placeholder @tiptap/extension-collaboration-cursor @tiptap/extension-collaboration yjs y-prosemirror
yarn add --dev postcss postcss-preset-mantine postcss-simple-vars

Note: This setup includes both Mantine and Tiptap. If you do not require Mantine, skip installing Mantine-related dependencies.

Step 2: Install Rails Dependencies

bundle add redis y-rb_actioncable y-rb

Here we are installing Y.js adapter for Ruby and Action Cable.

Step 3: Configure Tiptap with Collaboration

In the Tiptap setup, configure the StarterKit with history: false as the Collaboration extension comes with its own history management. Additionally, we’ll add a random color generator for collaboration cursors.

function getRandomColor() {
    const colors = ["#ff901f", "#ff2975", "#f222ff", "#8c1eff"];

    const selectedIndex = Math.floor(Math.random() * (colors.length - 1));
    return colors[selectedIndex];
}

const editor = useEditor({
        extensions: [
            StarterKit.configure({ history: false }),
            Underline,
            Link,
            Superscript,
            SubScript,
            Highlight,
            TextAlign.configure({ types: ['heading', 'paragraph'] }),
            Placeholder.configure({ placeholder: 'This is placeholder' }),
            Collaboration.configure({
                document: doc // Configure Y.Doc for collaboration
            }),
            CollaborationCursor.configure({
                provider,
                user: {
                    name: "Vikas",
                    color: getRandomColor()
                }
            })
        ]
    });

Code to connect with websocket provided by ActionCable. Don’t worry about the channel creation now, we will create it later. Assuming channel name will be SyncChannel we will add following code. (Here id is hardcoded, as this is just a demo. we won’t be using proper auth in backend as well to keep things simple)

// ... other imports
import { createConsumer } from "@rails/actioncable"
import { WebsocketProvider } from "@y-rb/actioncable";

const consumer = createConsumer();
const doc = new Y.Doc()

const provider = new WebsocketProvider(
    doc,
    consumer,
    "SyncChannel",
    {
        id: 1
    }
);

// ... other codes

You can see full frontend code in App.jsx. This contains everything in a single file which is not great but good enough for this case.

Step 4: Set Up Rails Action Cable

Create a new channel name SyncChannel at app/channels/sync_channel.rb.

# frozen_string_literal: true
class SyncChannel < ApplicationCable::Channel
  include Y::Actioncable::Sync

  def subscribed
    # initiate sync & subscribe to updates, with optional persistence mechanism
    sync_for(session) { |id, update| save_doc(id, update) }
  end

  def receive(message)
    # broadcast update to all connected clients on all servers
    sync_to(session, message)
  end

  def doc
    @doc ||= load { |id| load_doc(id) }
  end

  private

  def session
    @session ||= Session.new(params[:id])
  end

  def load_doc(id)
    data = REDIS.get(id)
    data = data.unpack("C*") unless data.nil?
    data
  end

  def save_doc(id, state)
    REDIS.set(id, state.pack("C*"))
  end
end

This has Redis initialized as REDIS, replace it with your Redis variable name. We also created a Session model for sync_for mehtod. You can check documentation for sync_for here.

# frozen_string_literal: true

class Session
  attr_reader :id

  def initialize(id)
    @id = id
  end

  def to_s
    "sessions:#{id}"
  end
end

And finally ApplicationCable::Connection will be as follows

module ApplicationCable
  class Connection < ActionCable::Connection::Base
    identified_by :id

    def connect
      self.id = SecureRandom.uuid
    end
  end
end

Step 6: Add Styles for Collaboration Cursor (Option)

Everything should be working by now. In this step the cursor was looking odd, so some CSS can be add to make it look good.

Finally you can run your rails server and it should be good to go once we add all missing piecies specially authorisation.

Conclusion

By following these steps, you should have a real-time collaborative editor up and running using Tiptap, Y.js, and Rails Action Cable. While we used Mantine for styling in this demo, you can customize the styling as per your requirements. This setup provides a robust foundation for building collaborative applications with rich text editing capabilities.

In this case, you are left with very few options for code editors. Either you have to use CLI-based editors such as Vim, or you can use VSCode with the Remote SSH extension. Even with the extension, there are some issues related to code analysis and code completion. These processes have to happen on the remote machine, making your powerful local PC underutilized. And if you want to use Zed or Xcode, you are out of luck.

So, the solution is to have a local copy that is synced with the remote SSH directory. You can use several tools for this:

• Rsync:

  • Unidirectional sync, which might be fine for development as you will use the local machine’s copy to manage changes on the SSH server.
  • Does not support file deletion.

• SSHFS:

  • Limited support on macOS.
  • Requires kernel changes, making it impractical for use on some machines.

• Unison:

  • Supports bidirectional sync.
  • Handles file deletions.
  • Fault-tolerant: even if the connection breaks, you can restart it, and it will continue syncing from the last known point.

This leaves Unison as the ideal choice for me.

Unison has fairly good documentation; you can go ahead and check their documents and explore on your own.

Installing Unison

You need to install Unison on both the host and remote machine. If you don’t have sudo access on the remote machine, don’t worry; you can download the binary and keep it anywhere.

• Installing Unison on Mac local machine:

  • brew install unison
  • brew install autozimu/homebrew-formulas/unison-fsmonitor

• For Linux, you can follow the official guide.

• Make sure to create a local folder to sync code from the remote machine.

• Run a test connection:

  • Example command: unison -testServer ssh://user@remotehostname/path/to/folder /path/to/folder
  • If you get an error that Unison is not found on the remote server, specify the exact path to Unison using -servercmd. For example: unison -testServer ssh://user@remotehostname/path/to/folder /path/to/folder -servercmd /home/path/to/unison/bin/unison.

• Final command for syncing:

  • Once the connection test is successful, start syncing with the final command:

    unison ssh://user@remotehostname/path/to/folder /path/to/folder -servercmd /home/path/to/unison/bin/unison -ignore "BelowPath node_modules" -ignore "BelowPath .git" -force newer -repeat watch
    

  • This command will sync all files and continue monitoring for further changes in the background while you develop. If you want to know the meaning of flags used here like ignore, force etc, you can check Unison user mannual.

You can use any code editor to modify the local copy, and Unison will automatically sync the changes.

But as per this blog post, the AWS lambda environment already supports these features, so we should no longer need to use serverless-webpack.

There are some cons that I face while using webpack in serverless.

1. Code is transpiled (and optionally minified), making it challenging to debug from logs, as line numbers and function names may not be the same per your development environment.
2. Using ESM only module is not straightforward. Such as node-fetch and d3, and the ESM-only module list is growing daily.
3. There could also be a performance impact as the code will be converted to commonJS, and this benchmark test shows that commonsJS could perform 43% worse than ESM.

There are other benefits of babel and webpack besides transpiling to commonJS. But these are mostly catered towards browsers and not serverside usage.

How to use ESM in serverless? Just add "type": "module" in pacakge.json in it will work in node 14.x and node 16.x.

React-Native came naturally to me after climbing some learning curves as a React Developer. So, now I wanted to check out the buzz around Flutter.

So last weekend was a fine sunny day which is quite pleasing in the late winter season. It might not be winter from many people’s standard. I opened the Flutter documentation getting started page. The installation file was quite big compared to react-native and it made my expectations high.

At this point, I knew nothing about dart and Flutter, how it works and how to write code. But the Flutter had an excellent write-up comparing React-Native to Dart and Flutter. It helped me directly dive into building things without learning anything. I got pumped up to create something; I thought of a real simple application/game that is just sorting a list of cities so that traversing through all cities in order will be optimal. It’s not a fair game from the graphics standard, 😥 but good enough for me.

The app uses a list of cities downloaded from simplemaps.com and used a geometry formula to calculate the distance. After a day of playing out, I was able to finish it with the help of a lot of google, stack overflow, and 3rd party packages.

It almost feels like magic that I still don’t know dart language correctly, but my app is running. Flutter dev tools are excellent compared to React-Native, which helped me identify and fix issues more quickly.

I published my app just for fun ☺️ on the PlayStore, and if you are interested, you can also check out the code.

In react native, we can generate/render an SVG using the react-native-svg library. A complex SVG comprises many more minor elements that could be animated individually. But here, for example, we will take only one piece, a circle.

The following code will draw a circle with a radius of 50 units.

<Svg width={200} height={200}>
  <Circle cx="55" cy="55" r="50" stroke="black" strokeWidth={5} />
</Svg>

Suppose we want to animate it to become large and small. To achieve this, I will use React Native Reanimated. To learn more about it, you can check out its documentation.

Logically, I am trying to increase or decrease the radius.

Since the radius value is a prop, I will use useAnimatedProps. But, first of all, convert Circle to an animated component.

const AnimatedCircle = Animated.createAnimatedComponent(Circle);

Now, I can re-write component as

<Svg width={200} height={200}>
  <AnimatedCircle cx="55" cy="55" r="50" stroke="black" strokeWidth={5} />
</Svg>

Next step is to store the stroke width and radius. width can be stored in a simple constat, but for the radius we will use useSharedValue, so that it can be used by woklet to animate.

export default ()=>{
  const radius = useSharedValue(50);
  const strokeWidth = 5;

  return (
    <Svg width={200} height={200}>
      <AnimatedCircle
        cx={`${radius.value + strokeWidth}`}
        cy={`${radius.value + strokeWidth}`}
        r={`${radius.value}`}
        stroke="black"
        strokeWidth={strokeWidth}
      />
    </Svg>
  )
}

Here, I need some event or action to trigger the radius change. I’ll use a button press. (withSpring is default provided animation which is not necessary to use but this looks cool 🤞)

<Button mode="contained" onPress={() => {
  if(radius.value < 80) {
  radius.value = withSpring(80)
  }else{
    radius.value = withSpring(50)
  }
}}>
  Press
</Button>

You’ll notice that even after pressing the button, nothing happens. It is because change of sharedValue doesn’t trigger re-render of the react component. finally animated props comes into the picture. Instead of passing prop directly, we will pass it using animated prop.

const animatedProps = useAnimatedProps(() => ({
  cx: `${radius.value + strokeWidth}`,
  cy: `${radius.value + strokeWidth}`,
  r:`${radius.value}`
}));

<Svg width={200} height={200}>
  <AnimatedCircle
    animatedProps={animatedProps}
    stroke="black"
    strokeWidth={strokeWidth}
  />
</Svg>

Result, is something like this.

This is a relatively simple example, but I hope I successfully demonstrated the possibilities. Here is the link of complete code of the result if you are interested.

The most common problem is that if we wrap a component with a provider and then wrap a child component with another provider, it’s not easy to subscribe to the store of top-level provider.

const Component1 = () => {
  return (
    <Provider store={store1}>
      <Provider store={store2}>
        <Component2 />
      </Provider>
    </Provider>
  );
};

It’s so confusing that within a few iterations of development, you’ll find yourself using providers on each component, and not being able to read values from both the stores in a single component will frustrate you.

To manage this elegantly, we can do some setup which will ease the things.

For this, we will need react-redux 7 or greater. Because versions older than it doesn’t use react’s context API. And we will be using contexts to access multiple stores without wrapping with the providers again and again.

Create a context for each store. You can also import ReactReduxContext from react-redux and use it for one of the stores, which you want to make default.

const store1Context = React.createContext();
const store2Context = React.createContext();

Now wrap the root component of the react application with a provider for each store, passing the contexts as props.

<Provider store={store1} context={store1Context}>
  <Provider store={store2} context={store2Context}>
    <App/>
  </Provider>
</Provider>

We also need to create custom dispatch and selector hooks. If you use the default hooks (useSelector, useDispatch), it will use the store with default context, if any.

export const useStore1Dispatch = createDispatchHook(store1Context);
export const useStore1Selector = createSelectorHook(store1Context);

export const useStore2Dispatch = createDispatchHook(store2Context);
export const useStore2Selector = createSelectorHook(store2Context);

From further development, you can use these custom selector and dispatch hooks to use the preferred store in any of the components throughout the application.

If you prefer to connect HOC, then you can do

connect(mapStateToProps, mapDispatchtoProps,mergeProps, {context: store1Context})(Component) 

Let me know if you have any suggestions or questions. Thanks

But then what will be the difference between the following two cases.

To find out, I have created a small React application with a couple of props and states of type number and four buttons to increment those numbers.

App.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

import { useState } from 'react';
import TestComponent from './TestComponent'

function App() {

  const [prop1, setProp1] = useState(0);
  const [prop2, setProp2] = useState(0);

  return (
    <div>
      <button onClick={()=>setProp1(prev=> prev+1)}>Prop 1</button>
      <button onClick={()=>setProp2(prev=> prev+1)}>Prop 2</button>
      <TestComponent prop1={prop1} prop2={prop2}/>
    </div>
  );
}

export default App;

TestComponent.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

import { useEffect, useState } from 'react';

function TestComponent({prop1, prop2}) {
    const [state1, setState1] = useState(0);
    const [state2, setState2] = useState(0);

    useEffect(()=>{
        console.log('rendered - useEffect', state1, state2, prop1, prop2);
    });

    const someImportantWork = ()=>{
        console.log('rendered - functionCall', state1, state2, prop1, prop2);
    }
    someImportantWork();

    return (
      <div>
        <button onClick={()=>setState1(prev=> prev+1)}>State 1</button>
        <button onClick={()=>setState2(prev=> prev+1)}>State 2</button>
        <p>Prop 1: {prop1}</p>
        <p>Prop 2: {prop2}</p>
        <p>State 1: {state1}</p>
        <p>State 2: {state2}</p>
      </div>
    );
  }
  
  export default TestComponent;

We can see in following that both console.log statement runs whenever we update state or prop.

But I think we are missing something because both seems to be same. So let’s slow down the rendering.

To slow down the rendering I added a very long loopin inside return.

1
2
3
4
5

import { useEffect, useState } from 'react';

const x = new Array(10999999);

function TestComponent({prop1, prop2}) {

18
19
20
21
22
23

    return (
      <div>
        <button onClick={()=>setState1(prev=> prev+1)}>State 1</button>
        <button onClick={()=>setState2(prev=> prev+1)}>State 2</button>
        {x.map(i=> null)}
        <p>Prop 1: {prop1}</p>

After the delay we can clearly see that expression inside useEffect is always excuted after expression in the fucntion.

It is because the definition of useEffect stated at the beginning of this post is incomplete. useEffect not only executes the callback on each render (depending upon the dependency array) but also ensures that rendering has been completed. That’s why useEffect’s console.log is delayed.

This should not be a problem if you are doing some small calculation or, as in this example, logging. But if you are using ref to access the element, you must ensure that render has happened; else, you may get the wrong reference.

First, we will create a react app with a service-worker.

npx create-react-app my-app --template pwa

This should create a folder named 'my-app' containing all the app-related files. To check everything is fine, we can run the following commands, and a browser tab should open with the ReactJs logo.

Now we will enable the default service worker.

In src/index.js change unregister() to register().

// serviceWorkerRegistration.unregister();
serviceWorkerRegistration.register();

Let us add some code in the service worker (src/service-worker.js) to send a test push message from Chrome DevTools.

72
73
74
75
76

// Any other custom service worker logic can go here.

self.addEventListener('push', (event) => {
  console.log(event.data);
});

But wait! the service worker will not run in the dev server by default. We can change this behavior, but it’s not recommended to do so. It should be built first and then served. To serve, we need need to install a static file server such as serve.

npm install -g serve

Then build and serve by running following commands form my-app folder.

npm run build
serve -s build

OneSignal Integration

The first few steps are pretty straightforward. Create an OneSignal account, then create a new website and choose custom code and fill site setup form as shown (Assuming we will be serving on port 5000).

Post this step; we’ll get a zip file (Web SDK) containing service workers to download. We’ll have extract files OneSignalSDKWorker.js , OneSignalSDKUpdaterWorker.js and put them inside the public folder.

And then finally we’ll get the custom code.

The first script tag will be placed in public/index.html.

39
40
41

    <script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async=""></script>
  </body>
</html>

Second script tag can be put into at the end index.js after few modification for this demo.

window.OneSignal = window.OneSignal || [];
window.OneSignal.push(function() {
  window.OneSignal.init({
    appId: "eb29dedd-4af2-4fa8-b73a-39bc2e7cc6d5",
    notifyButton: {
    enable: true,
    },
    allowLocalhostAsSecureOrigin: true,
  });
});

Two more steps are necessary as, OneSignal service-worker will replace the existing service-worker.

1. We will make OneSignal Service worker as default service-worker by updating path in serviceWorkerRegistration.js

window.addEventListener('load', () => {
  // const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
  const swUrl = `${process.env.PUBLIC_URL}/OneSignalSDKWorker.js`;

2. We’ll append importScripts('/service-worker.js'); in OneSignalSDKWorker.js and OneSignalSDKUpdaterWorker.js, so that our existing service worker can still be loaded.

Now a bell icon will appear at bottom right and clicing on that will intiate subscribe option. Things can be tested through OneSignal dashboard.

Now the OneSignal worker will be able to show notification, as well as the existing service worker will also log the object in console.

This is probably not the most elegant way and there is obviously scope of improvment in this approach so feel free to comment.

Sadly, this misinformation is being propagated by the company itself and knowing unknowingly by tech YouTubers who frequently gets sponsored by the Public Providers.

Here I am listing a few of the things these services can offer and some which these can’t

Privacy

Often a VPN is touted as a one-stop for all your digital privacy goals. But in my opinion, when you think of privacy, you should also ask privacy from whom. From your ISP? Yes. From your National Security agencies? Maybe not.

Privacy is more of a practice than a product. Suppose you open your personal social and email accounts over a VPN network and the same on your local network. In that case, it can be easily tracked that both IPs belong to the same person. Also, your VPN provider will always know your real IP address. So in case some could hack, buy, or force them to hand over the data, it is out with all of your browsing histories.

Often VPN providers claim to have a no-log policy, but you just have to believe their words until something happens.

Internet Speed

This claim is somewhat valid but not wholly. In a sporadic case, your local ISP has very bad routing, which causes many bad hops. In that case, a VPN can help improve your internet browsing experience. But, In the vast majority of cases, you are expected to get a hit on internet speed in lieu of some degree of privacy.

Wide variety of content access

This is the most common use case of a public VPN service. You want to watch a youtube video or Netflix show that isn’t available in your location. You can easily circumvent it. Also, it is helpful for those who people live out of the country for business purposes. But, when they leave, they lose access to many local online services that they may want to use while abroad, such as Hotstar, which broadcasts most Indian sports at affordable rates. But, you can’t access it while being abroad usually.

Final Thoughts

It’s good to have one, but you should know what you have.

All UPI apps support this custom URL scheme, but many don’t seem to be using it. When you click this type of link when you click, the ‘Open With’ menu will appear with a list of all the UPI applications on your phone. If you are on mobile device you can try link upi://pay?pn=Vikas%20Kumar&pa=vikaskr@freecharge&cu=INR, it should redirect to an UPI app

Although this link will not work on your computer, you can solve it with the help of media query and replace it with a QR code. Or you can use javascript to detect if the URL scheme is supported or not, but as far as I tried, it didn’t seem reliable to me.

1. Notepads

   

   Notepads is yet another opensource alternative to Notepad with fluent design and tabbed view. Even their GitHub page says that their motivation behind this that they have been waiting long before modern Notepad to be released before he decided to do it by himself.

   

2. Quick Pad - is also open source and comes with the fluent design. QuickPad is closer to Microsoft Notepad as there are no tabs and have classic menubar. There are some extra features though,

   

   like focus mode which removes all the extra options from the screen and compact overlay mode switches it to something like a sticky note.

   

Which one do I use?

I use Notepads, just for its tabbed interface. Otherwise, I don’t have anything to dislike in QuickPad too.

What I don’t Like?

There is one problem with both of the apps. If you use the hibernate feature or your laptop is set to hibernate after a few minutes of sleep, then while resuming, your previously running instance of app will not resume. This means any unsaved text is lost and that doesn’t happen for Win32 apps like Notepad or Notepad++. I think this has something to do with UWP app architecture because the same is happening for Windows Calculator. I hope it is fixed or they’ll be able to find a workaround. Till then always remember to save the file before leaving your PC unattended or disable the hibernate feature.

There are some other problems though such as not able to write to system folders, unable to handle large file. But don’t hamper me in day to day usage because I don’t use it for more advance text editing. For me it is simply Notepad replacement which anyway I wasn’t using for anything complex.

Microsoft is continuously trying to fix it

They are continuously improving PowerShell, launched new Windows Terminal but they still can’t match the swiftness and community support of developing on Linux box. To pull around this issue, they have WSL.

In my previous post “Windows subsystem for Linux is of any use?”, I heavily criticizes how it is unusable due to the lack of any GUI editor respecting it. But on the 3rd of May 2019, it changed. Microsoft released the Remote Development extension for the Visual Studio Code. Now all the flaws I stated in my previous article are invalid (it still has some flaws but it is at an acceptable level).

Note: JetBrains IDE also claims to support this, but I am yet to test it. My whole workflow is now in VS Code.

With this extension installed, now I can just type “code .” in Ubuntu terminal and VScode code will launch with WSL connected to it, so there are no configs to do.

Now the question remains.

That if Linux is better for development then why don’t we use a Linux distro. That will be the right approach and easier for beginners. I’ll still recommend new developers to avoid this and use a Linux distro. But this approach is really helpful for those who use some software that doesn’t have good Linux counterpart or simply the hardware they are using is not well supported in Linux.

Installation

So I installed a new SSD and started my Windows 10 installation process. Installation went smooth. Then I opened PowerShell to activate the feature and downloaded Ubuntu from the Windows Store. Finally, I launched bash and installed git, nodejs, npm, yarn, python, pip. I was excited to try it all out on Microsoft own Visual Studio Code as it is the only editor which officially supports WSL.

GIT

My first bummer was GIT. VSCode refused to detect git installation on Ubuntu. I googled many workarounds and none of those worked. So now I have the dual setup of GIT, one Windows version and one Ubuntu version.

NodeJS

Next step was node development. VSCode’s intellisense worked for NodeJs, but this feature doesn’t require a node setup in this editor. I tried debugging which also worked flawlessly as I just had to as a parameter in the launch.json file to use WSL. The real problem started when I decided to use ESlint plugin. The editor couldn’t find the files. The only working solution was to directly access the Linux file system which is strongly advised in WSL documentation to avoid. So now I have a dual setup of NodeJS.

Python

Python had no perks of the JavaScript. Even for intellisense, I had to go for native installation.

SSH

Finally, I gave up on VScode integration and thought it would be useful for SSHing to my EC2 instances because everybody know how painful to do that in Windows through Putty. But file permissions on Windows didn’t let me do even this. Console presented me a message " WARNING: UNPROTECTED PRIVATE KEY FILE!". Then I got to know that I can’t set file permissions too as it uses Windows file system. Now I have a separate Putty configuration to connect to EC2.

So my conclusion is that Microsoft’s claim that the development environment which feels like home is a failure. What is your opinion?

Today fingerprint scanners are on almost every phone. It is very handy to have a fingerprint sensor to unlock your device. By the time you pull out a phone from your pocket to your eyes it is already unlocked. It also prevents snooping of your password or pattern from behind your shoulders or through a security camera.

But one place where it fails to hide your sensitive chats and photos from your sneaky roommates or a nosy family member. They can easily use your finger to unlock your phone while you are asleep or too high.

So how to prevent this?

Simply, by forcing the phone to ask for the PIN when needed. One simple way is to restart your phone before sleeping because after restarting your phone asks for a PIN and will not accept your fingerprint for first unlock.

But it’s not easy to restart your phone every time and resist unlocking it the first time. So there is another way. Lock it through device administrator, i.e use any app which uses device administration right to lock your phone.

One such simple app is Screenlock. You just need to tap it and sleep.

Hope the article helps. Keep your private chats private.

But fortunately there is an option in xclip to overcome this propblem. Just use xclip -selection c instead of xclip. This option will just emulate the ctrl + shift + c action.

For easier use you can setup the alias by adding following line in .bashrc or .zshrx file.

alias xclip='xclip -selection c'

Selenium is a web automation package available for all popular languages. To know more about selenium you can refer to official Selenium docs. Here, we will be making a simple WhatsApp bot using Python and Selenium which will reply the current time for every message.

Installing Selenium

So, first of all, we need to install Selenium for Python by running following command in terminal.

pip install selenium 

Selenium also requires a driver to interface with the chosen browser. For Firefox, we need to install geckodriver. Without proper driver, you will get WebDriverException.

Download latest geckodriver from Mozilla’s GitHub Repo and add to the path.

Start Coding

Now we are ready to proceed. Make a new Python file i.e. bot.py and make some necessary imports.

from datetime import datetime
from selenium import webdriver
from selenium.webdriver.common.keys import Keys
from selenium.common.exceptions import NoSuchElementException

Now we will create and initialize Firefox WebDriver and make a get request to open Whatsapp Web URL.

driver = webdriver.Firefox()
driver.get('http://web.whatsapp.com')
print('Please Scan the QR Code and press enter')
input()

The print and input functions are there just to give us time to scan the QR code to connect our phone’s WhatsApp. Once we are connected we can hit enter to continue further execution of code.

Once the WhatsApp Web interface is open, we need to look for unread messages. Thankfully, all unread messages in left pane are individual HTML element with CSS class ‘chat unread’.

WebDriver have a function to find elements by CSS selector which will return the first element with the given argument. We will make use of this function.

content = driver.find_element_by_css_selector('.chat.unread')
content.click()
input_form = driver.find_element_by_css_selector('.pluggable-input-placeholder')
input_form.send_keys(str(datetime.now()),Keys.RETURN)

Above code snippet is very simple. We are selecting first element with class chat and unread and clicking it. Then we need to find message box which is an HTML element with class pluggable-input-placeholder. send_keys function will send the keyboard event to the element. So we send the current time and RETURN key(Enter Key) to send the message.

As I have already mentioned that function find_element_by_css_selector will return only first element for given argument, So we need to put the whole snippet in a loop. Also, when there is no such element for the argument it will throw NoSuchElementException, so enclosing with try except is also necessary.

The final code will be

from datetime import datetime
from selenium import webdriver
from selenium.webdriver.common.keys import Keys
from selenium.common.exceptions import NoSuchElementException

driver = webdriver.Firefox()
driver.get('http://web.whatsapp.com')
print('Please Scan the QR Code and press enter')
input()
while True:
    try:
        content = driver.find_element_by_css_selector('.chat.unread')
        content.click()
        input_form = driver.find_element_by_css_selector('.pluggable-input-placeholder')
        input_form.send_keys(str(datetime.now()),Keys.RETURN)
    except NoSuchElementException:
        pass

This code is just a proof of concept, you can obviously improve it for better performance.

Even being late to the party, it has attracted enough users. The reason behind this is a perfect balance between speed, features, and hackability.

If you are new to this editor, these are some features you should be known to improve your productivity.

1. Code Differs

The files in your project look same but there are some differences. You spotted few of them just by gazing but there is still a chance of missing something. So why risk, just type the following command in your terminal and bam! VS Code will spot all the differences for you

$code <first-file> <second-file>

2. Font Legatures

In typography, a ligature occurs where two or more letters are joined as a single glyph such as æ formed after joining a and e. In programming there are many token which are combination of two or more characters. An example would be < and = . FiraCode is programming ligature which will show <= and many other token as single character. And FiraCode is easily installable in VSCode which isn’t even supported by famous Sublime Text.

3. Type Checking in Javascript

Typescript is typed superset of javascript. But in VSCode you can do all that in plain javascript by adding

    //@ts-check

at top of the javascript file

4. The Printable shortcut Cheatsheet

A code editor is never good without good shortcut keys. VSCode offers a printable cheatsheet which you can paste on wall for quick learning. It contains shortcuts for important features like multiple cursors, integrated terminals, file management etc. Go explore it.

Download shortcut cheatsheet for Windows, Linux and Mac.

5. Change Case of variables

Just select a variable (you can select multiple variables too), open Command Palette by pressing F1, Type change case and choose the case you want.

What is Linux?

Linux is basically a term to refer all the distributions (or say OS) based on Linux Kernel collectively. some of its notable distributions are Ubuntu, Fedora, Arch, your favorite Kali Linux.

Where may you have heard about Kali Linux?

I bet it is your friend or someone elder who said to you that Kali Linux can hack computers. I have seen students being obsessed with this distro without knowing anything about Linux.

Now hack is a stupid term. Most of the people think that it something by which you can access information without proper permission. No, my friend, the term is much broader.

The hack is defined as “a tip, trick, or efficient method for doing or managing something” or in the Indian language, we say Jugaad.

Now, What is Kali Linux?

It is clearly written on their website that Kali Linux is Linux distribution aimed at advanced Penetration Testing and Security Auditing. Basically. it is a Linux Distro + set of tools.

Do you need it?

No. Because you don’t know yet that what is advanced Penetration Testing and Security Auditing. Just installing the OS will not make you a hacker. It is not a magic wand.

Even if you want to learn Linux it is not a good os to start with, because it is not intended for beginners. Also, it is not intended to be a workstation OS. If you really want to learn Linux, go start with Ubuntu, Elementary OS, or Linux Mint. These are easy to setup and the online communities are beginner friendly.

Later on, you can get all those tool sets in Kali Linux in your current Linux OS. And after hopping distro, you will realize that every Linux based OS is same at heart.

However, Windows 7 is still rock solid in the marked. Apart from corporate users many personal users are on Windows 7 which include my relatives.

When I use thier PC, only option to achieve the screen sketch is to take screenshot in paint and draw on it using pain. This method is not bad but also doesn’t goes smoothly with my work flow. Mainly because it involes too much clicks

3rd party app to rescue

Epic Pen is an application which puts a toolbar on screen with tools like pen, highlighter and eraser.

only basic difference in workflow is that in Epic Pen, you first draw on screen then take screenshot while in Widows Ink workspace, you first take screenshot then draw on it.

Epic Pen is free for personal use and can be downloaded from offical website.