• People can add multiple links on the creation page;

• People can import their browser bookmarks (it still works if you have thousands of links, takes some time though);

• Created a browser extension, so people can save the current tab, or any link / selected text by right clicking it, this makes collecting really easyy on laptop;

The next step is, is it possible to accept shared link / text from other apps on the phone? So it’s also easyy to collect things on the phone.

I have the question, GPT has the answer, and the answer is Yes (partially). You may guessed it, it works with Android, but not iOS, details here.

I will show you how I made it work, to accept sharing for my web app on Android.

1). Add share_target to manifest.json

Your web app needs to be a PWA, so you have to have a valid manifest.json, and it needs to have a share_target field, like this:

{
  "share_target": {
    "action": "/easyy-share",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "title": "title",
      "text": "text",
      "url": "url"
    }
  }
}

This tell Android, if people share a link/text to your web app, it will make a POST request to ${appDomain}/easyy-share (in my case https://app.easyy.click/easyy-share), with the payload defined by enctype and params.

(If your web app is a SPA, you don’t need to prepare a /easyy-share route, this request will handled by service worker, see below)

This is my full manifest.json file: https://github.com/penghuili/easyy.click/blob/master/public/manifest.json

2). Register a service worker

You can process the request with a real backend endpoint (see the MDN doc), or, you can process it within service worker.

My web app is a SPA, and I need to end-to-end encrypt the link/note before sending it to backend, so I process the request in service worker.

When my SPA starts, I register a service worker:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js').catch(registrationError => {
    console.log('SW registration failed: ', registrationError);
  });
}

The sw.js file has the logic to process the request.

3). Process request in sw.js

The sw.js needs to have a listener for the fetch event, like this

self.addEventListener('fetch', event => {
  if (event.request.method === 'POST' && event.request.url.includes('/easyy-share')) {
    event.respondWith(handleShare(event.request));
  }
});

We only process it if the request method is POST and the path is /easyy-share. All other fetch requests will behave normally.

Now let’s see how the handleShare() looks:

async function handleShare(request) {
  const formData = await request.formData();
  const title = formData.get('title');
  const content = formData.get('url') || formData.get('text');

  if (!content) {
    return Response.redirect('/shared', 303);
  }

  saveContent(title, content);

  return Response.redirect(`/shared?shared=${isValidUrl(content) ? 'link' : 'text'}`, 303);
}

Very straightforward, we get the payload from request, save it, and redirect to a /shared page with some query params. Some notes:

1. saveContent() is an async function, but here we don’t need to await it, the requests will finish in the background, and users will see the success page quickly;

2. In 1) we said we don’t need a /easyy-share route, but here we need a /shared route, because Response.redirect('/shared', 303) will open our app, and open the /shared page. This is our good chance to tell users, that the share is done;

3. service worker doesn’t have access to localStorage, but it has access to indexDB, so if your saveContent() needs to read something from the localStorage (access token maybe?), you need to save that thing also in indexDB in your main app, so service worker can get the value;

Check the full code of my sw.js: https://github.com/penghuili/easyy.click/blob/master/src/sw.js

This is the end result:

Let me know if you have any feedback or question.

I am building a note taking app, that is Instagram style, free, encrypted. I have a “Today in history“ page, where you can review what happened on the same day of last week / last month / last 3 months / last year etc.

TikTok is popular and the swipe up there is so addictive, so I decided to make my review page TikTok style.

It’s simple, I will just show the code here.

import './TikTokCards.css';

import React, { useRef, useState } from 'react';
import fastMemo from 'react-fast-memo';

export const TikTokCards = fastMemo(({ cards, height = '100vh' }) => {
  const [currentIndex, setCurrentIndex] = useState(0);
  const [startY, setStartY] = useState(0);
  const [isDragging, setIsDragging] = useState(false);
  const [dragOffset, setDragOffset] = useState(0);
  const containerRef = useRef(null);

  const handleStart = clientY => {
    setStartY(clientY);
    setIsDragging(true);
    setDragOffset(0);
  };

  const handleMove = clientY => {
    if (!isDragging) return;
    const diff = startY - clientY;
    setDragOffset(diff);
  };

  const handleEnd = () => {
    setIsDragging(false);
    if (Math.abs(dragOffset) > 100) {
      if (dragOffset > 0 && currentIndex < cards.length - 1) {
        setCurrentIndex(currentIndex + 1);
      } else if (dragOffset < 0 && currentIndex > 0) {
        setCurrentIndex(currentIndex - 1);
      }
    }
    setDragOffset(0);
  };

  // Touch event handlers
  const handleTouchStart = e => handleStart(e.touches[0].clientY);
  const handleTouchMove = e => handleMove(e.touches[0].clientY);
  const handleTouchEnd = () => handleEnd();

  // Mouse event handlers
  const handleMouseDown = e => handleStart(e.clientY);
  const handleMouseMove = e => handleMove(e.clientY);
  const handleMouseUp = () => handleEnd();

  // Wheel event handler for scrolling
  const handleWheel = e => {
    // e.preventDefault();
    if (e.deltaY > 0 && currentIndex < cards.length - 1) {
      setCurrentIndex(currentIndex + 1);
    } else if (e.deltaY < 0 && currentIndex > 0) {
      setCurrentIndex(currentIndex - 1);
    }
  };

  const getCardStyle = index => {
    const offset = (index - currentIndex) * 100 + (isDragging ? -dragOffset / 5 : 0);
    let opacity = 1;

    if (isDragging) {
      if (dragOffset > 0) {
        // Dragging up
        if (index === cards.length - 1) {
          opacity = 1; // Keep first card fully opaque when scrolling up
        } else if (index === currentIndex) {
          opacity = 0.7;
        } else if (index === currentIndex + 1) {
          opacity = 1;
        } else {
          opacity = 0.5;
        }
      } else if (dragOffset < 0) {
        // Dragging down
        if (index === 0) {
          opacity = 1; // Keep last card fully opaque when scrolling down
        } else if (index === currentIndex) {
          opacity = 0.7;
        } else if (index === currentIndex - 1) {
          opacity = 1;
        } else {
          opacity = 0.5;
        }
      }
    } else {
      // Not dragging
      opacity = index === currentIndex ? 1 : 0.5;
    }

    return {
      opacity,
      transform: `translateY(${offset}%)`,
      transition: isDragging ? 'none' : 'transform 200ms ease-in, opacity 500ms ease-in',
    };
  };

  return (
    <div
      className="tiktok-cards-container"
      ref={containerRef}
      onWheel={handleWheel}
      onTouchStart={handleTouchStart}
      onTouchMove={handleTouchMove}
      onTouchEnd={handleTouchEnd}
      onMouseDown={handleMouseDown}
      onMouseMove={handleMouseMove}
      onMouseUp={handleMouseUp}
      onMouseLeave={handleMouseUp}
      style={{ height }}
    >
      {cards.map((card, index) => (
        <div key={index} className="tiktok-card" style={getCardStyle(index)}>
          {card}
        </div>
      ))}
    </div>
  );
});

And the style:

.tiktok-cards-container {
  width: 100%;
  height: 80vh;
  overflow: hidden;
  position: relative;
  cursor: grab;
}

.tiktok-cards-container:active {
  cursor: grabbing;
}

.tiktok-card {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  background-color: var(--color-background);
  user-select: none;
}

It works well on laptop with mouse drag and mouse wheel, and of course on your phone.

Let me know if you have any question, and give my app a try, it’s free and open source: notenote.cc

So I switched to wouter, it's light weight, easy to use, I enjoyed it for a long time.

Then recently, I thought, why not building my own router, to make it even simpler.

It turns out to be very easy! Here is the full source code, no dependencies, < 100 lines of code, including empty spaces:

import React, { useCallback, useEffect, useState } from 'react';

let renderPage = () => {};

const handlePopState = () => {
  renderPage();
};
window.addEventListener("popstate", handlePopState);

// Navigate with function
export const navigateTo = (to) => {
  if (isUrlChanged(to)) {
    window.history.pushState({}, "", to);
    renderPage();
  }
};

export const replaceTo = (to) => {
  if (isUrlChanged(to)) {
    window.history.replaceState({}, "", to);
    renderPage();
  }
};

export const goBack = () => window.history.back();

// Navigate with component
export const BabyLink = React.memo(({ to, children }) => {
  const handleClick = useCallback(
    (e) => {
      e.preventDefault();
      navigateTo(to);
    },
    [to]
  );

  return (
    <a href={to} onClick={handleClick}>
      {children}
    </a>
  );
});

/**
 * Main component to organize the routes
 * @param {{[route: string]: React.Component}} routes
 * @param {string} defaultRoute
 */
export const BabyRoutes = React.memo(({ routes, defaultRoute = "/" }) => {
  const [page, setPage] = useState(getPageComponent(routes));

  useEffect(() => {
    renderPage = () => {
      setPage(getPageComponent(routes));
    };
    renderPage();
  }, [routes]);

  useEffect(() => {
    if (!page) {
      navigateTo(defaultRoute);
    }
  }, [defaultRoute, page]);

  return page;
});

function getPageComponent(routes) {
  const { pathname, search } = window.location;

  if (routes[pathname]) {
    const Component = routes[pathname];
    const queryParams = parseSearch(search);
    return <Component queryParams={queryParams} />;
  }

  return null;
}

function parseSearch(search) {
  const obj = {};

  if (search) {
    const searchParams = new URLSearchParams(search);
    searchParams.forEach((value, key) => {
      obj[key] = value;
    });
  }

  return obj;
}

function isUrlChanged(to) {
  const current = `${window.location.pathname}${window.location.search}`;
  return current !== to;
}

I have some examples in its repo: react-baby-router, and also published it as a lib in npm.

See how I am using it in notenote.cc, let me know if you have any questions.

This is our situation:

• I am using @radix-ui/themes for all the components;

• The header is fixed positioned;

• When the dropdown menu opens, it adds an overlay, which hides the scrollbar;

• So the header's width is bigger, then it moves to right a bit;

• If you observe it carefully, the image also moves a bit;

It's not a big problem, but we can fix it.

The idea is, always set the header's width to be window width - scrollbar width, no matter there is scrollbar or not.

But how to calculate the width of the scrollbar? Different browsers have different scrollbars.

Easy. See this:

function getScrollbarWidth() {
  const scrollDiv = document.createElement('div');
  scrollDiv.style.width = '100px';
  scrollDiv.style.height = '100px';
  scrollDiv.style.overflow = 'scroll';
  scrollDiv.style.position = 'absolute';
  scrollDiv.style.top = '-9999px';

  document.body.appendChild(scrollDiv);
  const scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
  document.body.removeChild(scrollDiv);

  return scrollbarWidth;
}

We show the scrollbar for a div, and the trick is, offsetWidth includes the bar, but clientWidth doesn't.

Then we can get the width without scrollbar:

const widthWithoutScrollbar = window.innerWidth - getScrollbarWidth()

After we use this width for body and the fixed header, everything is as still as night:

Enjoy! And try notenote.cc

There are so many state management libs for react, but they are too complex / not easy to use for me. I only need these:

• Create state for something;

• Update the state out of component;

• Get the state out of component;

• A hook to read state within component;

So I created the lib myself, it's dead simple but very flexible, I have a cat, so I call the lib usecat, github link here. It's so simple that I can list the whole source code here:

import { useEffect, useReducer } from 'react';

const cats = [];

export function createCat(initialValue) {
  let value = initialValue;
  const listeners = new Set();

  const get = () => value;

  const set = (newValue) => {
    if (newValue !== value) {
      const oldValue = value;
      value = newValue;
      listeners.forEach((listener) => listener(oldValue, newValue));
    }
  };

  const reset = () => set(initialValue);

  const subscribe = (listener) => {
    listeners.add(listener);
    return () => listeners.delete(listener);
  };

  const cat = { get, set, reset, subscribe };
  cats.push(cat);

  return cat;
}

export function useCat(cat, selector = (value) => value) {
  const [, forceUpdate] = useReducer((x) => x + 1, 0);

  useEffect(() => {
    const handler = (oldValue, newValue) => {
      const oldSlice = selector(oldValue);
      const newSlice = selector(newValue);
      if (oldSlice !== newSlice) {
        forceUpdate();
      }
    };
    const unsubscribe = cat.subscribe(handler);
    return () => unsubscribe();
  }, [cat]);

  return selector(cat.get());
}

Usage is also simple

Create some cats:

import { createCat } from 'usecat';

const isLoadingTodosCat = createCat(false);
const todosCat = createCat([]);

Get and set values out of component:

import { isLoadingTodosCat, todosCat } from './cats';

async function fetchTodos() {
  const currentTodos = todosCat.get();
  if (currentTodos?.length) {
    return;
  }

  isLoadingTodosCat.set(true);

  try {
    const response = await fetch('your-fancy-api');
    const todos = await response.json();
    todosCat.set(todos);
  } catch (e) {
    // handle error yourself ;)
  }

  isLoadingTodosCat.set(false);
}

Use hook to get value updates:

import { useCat } from 'usecat';
import { isLoadingTodosCat, todosCat } from './cats'
import { fetchTodos } from './network';

function MyComponent() {
  const isLoading = useCat(isLoadingTodosCat);
  const todos = useCat(todosCat);

  useEffect(() => {
    fetchTodos();
  }, [])

  return (
     <>
        {isLoading && <div>loading ...</div>}
        {todos.map(todo => (
          <div key={todo.id}>{todo.title}</div>
        ))}
      </>
  )
}

I am using this simple thing to build all my projects, like notenote.cc, check its source code, it's open.

After some perplexity and Google, I have a solution.

First try: use css.glass directly

I found this website, it has very good blurred glass effect:

I dragged the sliders, and got this css:

.image-container {
  width: 600px;
  height: 600px;

  display: flex;
  justify-content: center;
  align-items: center;

  background: rgba(139, 137, 137, 0.52);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.image-container img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

Use it for an image and its wrapper:

<div class="image-container">
  <img src="image.webp" alt="Your image" />
</div>

But the background is just plain grey, no blur at all, the effect is not good:

Second try: add a background image behind the blur CSS

The blur effect looks nice at the css.glass website, because there is something (orange color and text) behind. So let's show the image behind the blur.

Now the html looks like this:

<div class="image-container">
  <div class="image-blur">
    <img src="image.webp" alt="Your image" />
  </div>
</div>

image-container will have the image as background, image-blur will have the blur effect, and img show the full image.

CSS:

.image-container {
  width: 600px;
  height: 600px;

  background-image: url('image.webp');
  background-size: cover;
}

.image-container .image-blur {
  width: 100%;
  height: 100%;

  display: flex;
  justify-content: center;
  align-items: center;

  background: rgba(139, 137, 137, 0.52);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.image-container img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

background-size: cover makes sure that the image covers the whole container, which means only part of the image is the background, but it's fine.

Now the effect is very nice:

Thanks for reading and give notenote.cc a try.