✍️ A scratchspace for your new Tab page

Related tags

Learning resource chrome-extension productivity new-tab prosemirror
Overview

Tab␣

A scratchspace for your new Tab

A beautiful new tab replacement that gives you your very own scratch space to help you stay organized and focused.

It features a prominent spatial visualization for all of your tasks that helps you prioritize what’s important, auto-saving notes, rich text formatting and natural language due dates.

demo

Features

  • Auto-saves to local storage

  • Write in Markdown syntax

  • Uses natural language to recognize and highlight due dates

  • Darkmode

Usage

To set tabspace as your new tab page, depending on your browser can either set up the project as a browser extension that replaces the new tab page or configure your new tab page URL to point to the official tabspace website: https://tabspace.jzhao.xyz/index.html

Building the browser extension locally

  1. Clone the repository

  2. Install dependencies npm i

  3. Build npm run build

  4. Load the extension in the Chrome Extensions menu

    1. Go to extensions > Enable developer mode (top right corner)

    2. Click load unpacked, select the build folder

For more information, see the official documentation.

Setting up the website as your new tab page

Based on your browser, there may be an option to set the new tab page URL directly without installing an extension.

Brave

  1. Go to brave://settings/?search=home and make sure Show Home button is enabled

  2. Set the homepage to:

    https://tabspace.jzhao.xyz/index.html

  3. Scroll down and set the New tab page shows option to Homepage

  4. (If you don’t want the home button, you can safely disable the previous option now)

For reference, see this forum answer.

Comments
  • Setup instructions to set as default new tab page

    Setup instructions to set as default new tab page

    Hey @jackyzha0

    This project is fantastic

    When somebody calls me, I always used https://write-box.appspot.com/ to quickly have something to write down some stuff without having to spin up some way too huge desktop app

    Your tab space solution is a wonderful drop-in for this use case as well, just hit that new tab button and liftoff

    To get started with tab space even faster, it would be awesome to have something like a quick reference to how to set this up in my browser in the project's readme

    I'm not sure what's the best way to do this in Chrome since I'm using Brave, but for Brave there is that little workaround to set a custom URL as home URL and then set the new tab page to the homepage

    For reference: https://community.brave.com/t/specifying-the-website-of-a-new-tab/195724/3

    opened by devidw 1
  • Vertical and horizontal scrollbars show up by default

    Vertical and horizontal scrollbars show up by default

    I noticed that there are vertical/horizontal scrollbars on the page even when the content doesn't require it.

    Example: image

    Very minor issue, appreciate all the work you've put into this project!

    opened by ishan0102 0
  • Toggling due date should work properly

    Toggling due date should work properly

    • Currently, toggling a due date using the cmd+d shortcut will misformat the due date
    • Fix the bug so toggling works correctly

    Source: https://github.com/jackyzha0/tabspace/blob/ea7acc0f3de6b091ff1b6b3b667dfa46bafc1647/src/tasks/TimedTask.ts#L94 Should not insert due if toggle is to off

    bug 
    opened by jackyzha0 0
  • Make Settings Bar sticky on the page

    Make Settings Bar sticky on the page

    • Make the settings bar in the bottom right of the screen stay in position so long content doesn't make you scroll
    • Figure out a way to make it not overlap content on smaller screens
    enhancement good first issue 
    opened by jackyzha0 0
  • Notion sync

    Notion sync

    Every day, i make a new document in notion page for planning, in a notion database.

    It would awesome if tabspace could optionally sync there, creating a new page daily.

    The logic for if/when to create a new page could be configurable in the future.

    An initial pass could be: If the browser's date now (yyyy-mm-dd) !== the current notion page's created date, clear the editor. After the first change is made, create the page.

    opened by rorhug 0
Releases(v1.2.1)

  • v1.2.1(Oct 5, 2022)

    Changes

    • implement #15, easily add newline to bottom of document
    • fixes #9, callout shortcut fix
    • add description to settings entries
    • improve date parsing to default to PM for ambiguous dates
    • make timed tasks no continue on newline (fixes #4, #8)
    • make settings bar sticky

    Full Changelog: https://github.com/jackyzha0/tabspace/compare/v1.2...v1.2.1

    Installation

    WARNING: make sure to copy the content in your tabspace as it may be wiped on reinstall

    • Unzip build.zip
    • Go to extensions > Enable developer mode (top right corner)
    • Click load unpacked, select the unzipped build folder
    Source code(tar.gz)
    Source code(zip)
    build.zip(1.22 MB)

  • v1.2(Sep 29, 2022)

    Changes

    • Added a settings page, made visualization hidden by default
    • Fix relative dates constantly causing re-render
    • Fix hover state on links
    • Improve contrast on date tooltip

    Full Changelog: https://github.com/jackyzha0/tabspace/compare/v1.1...v1.2

    Installation

    WARNING: make sure to copy the content in your tabspace as it may be wiped on reinstall

    • Unzip build.zip
    • Go to extensions > Enable developer mode (top right corner)
    • Click load unpacked, select the unzipped build folder
    Source code(tar.gz)
    Source code(zip)
    build.zip(1.22 MB)

  • v1.1(Sep 26, 2022)

    Changes

    • Added a help page, overhauled onboarding experience
    • Added shortcut for creating due dates
    • Moved position of darkmode toggle

    Full Changelog: https://github.com/jackyzha0/tabspace/compare/v1.0...v1.1

    Installation

    WARNING: make sure to copy the content in your tabspace as it may be wiped on reinstall

    • Unzip build.zip
    • Go to extensions > Enable developer mode (top right corner)
    • Click load unpacked, select the unzipped build folder
    Source code(tar.gz)
    Source code(zip)
    build.zip(1.20 MB)

  • v1.0(Sep 25, 2022)

    Initial release! This build may still be buggy as it is early in development, but should be ready for personal use.

    demo

    Features

    • Auto-saves to local storage
    • Write in Markdown syntax
    • Uses natural language to recognize and highlight due dates
    • Darkmode

    Installation

    1. Unzip build.zip
    2. Go to extensions > Enable developer mode (top right corner)
    3. Click load unpacked, select the unzipped build folder
    Source code(tar.gz)
    Source code(zip)
    build.zip(1.11 MB)
Owner
Jacky Zhao
playfully pushing bits and pixels
Jacky Zhao
GitHub https://tabspace.jzhao.xyz/index.html
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
Obsidian plugin to open a note of your choice when creating a new tab, like in the browser.

New Tab Default Page Obsidian plugin to open a note of your choice when creating a new tab, like in the browser. Usage Set the note to open in new tab

pseudometa 20 Dec 27, 2022
Easily open daily notes for today in new tab, and much more!

Obsidian daily notes new tab This plugin adds a command for opening daily notes in a new tab (so that a keyboard shortcut could be used!) and gives ex

Xiao Meng 16 Dec 26, 2022
✏️ A new tab extension for convenient note-taking

MDTab Write quick notes in Markdown on any new tabs! Installation Right now MDTab has only been tested on Chrome (brave browser). You can install it f

Ian Huang (Shaoru) 8 Nov 11, 2022
This tool uses native browser APIs to take screenshots of a given web page, tab, window, or the user's entire screen.

This tool uses native browser APIs to take screenshots of a given web page, tab, window, or the user's entire screen.

xataio 761 Jan 1, 2023
A tab manager at your service.

Tab Butler Instructions Development Quick Start Prerequisites Node.js (tested on v18) NPM (tested on v8.6.0) Chrome (>= v88), has only been tested her

Mitchell Mark-George 32 Dec 14, 2022
The awesomebooks project is a simple list, but separated into 3 parts and given a retro feel. The main page is where we can add books, and on another page we can see the list, and remove items. There is also a "contact-us" page.

Awesome Books This is the restructured version of the famous awesome-books project! Here you can find JavaScript broken into modules, using import-exp

Matt Gombos 12 Nov 15, 2022
A refined tool for exploring open-source projects on GitHub with a file tree, rich Markdown and image previews, multi-pane multi-tab layouts and first-class support for Ink syntax highlighting.

Ink codebase browser, "Kin" ?? The Ink codebase browser is a tool to explore open-source code on GitHub, especially my side projects written in the In

Linus Lee 20 Oct 30, 2022
Responsive Tabs is a jQuery plugin that provides responsive tab functionality.

Responsive Tabs is a jQuery plugin that provides responsive tab functionality. The tabs transform to an accordion when it reaches a CSS breakpoint. You can use this plugin as a solution for displaying tabs elegantly on desktop, tablet and mobile.

Jelle Kralt 537 Dec 8, 2022
A Kernel Package that adds a tab to Discord settings where you can add and arrange custom code snippets.

Code Snippets A Kernel package (specifically for Discord) that adds a tab in settings where you can add and manage code snippets. Requires: https://gi

SwishyPlugs 6 Dec 14, 2022
Browser tab reload automation.

SpeedFeed Browser tab reload automation. Report Bug · Request Feature · View License (back to top) Contributing Contributions are what make the open s

Start Rev Technology 4 Aug 10, 2022
Add grouped tabsets, which remember the active tab across multiple HTML documents.

Grouped Tabsets See the extension in action. This quarto extension provides support for "grouped" tabsets in Quarto HTML documents. Consider the case

null 13 Sep 30, 2022
Chrome style tab-resizing for jQuery UI tabs

stretchy tabs Chrome style tab-resizing for jQuery UI tabs stretchy tabs provides methods for adding and removing tabs ##Initialize stretchy tabs $( "

Adam Jimenez 8 Nov 19, 2021
jQuery Tabs Plugin. CSS Tabs with Accessible and Responsive Design. Lot of Tab Themes with Vertical and Horizontal Orientation.

Macaw Tabs Macaw Tabs is jQuery tabs plugin. It helps you to create accessible and responsive jQuery tabs by implementing the W3 design patterns for t

HTMLCSSFreebies 6 Dec 8, 2022
A simple Stable Diffusion WebUI extension that adds a Photopea tab and integration.

Photopea Stable Diffusion WebUI Extension Photopea is essentially Photoshop in a browser. This is a simple extension to add a Photopea tab to AUTOMATI

Yanko Oliveira 624 Aug 10, 2023
Easily open daily notes and periodic notes in new pane; customize periodic notes background; quick append new line to daily notes.

Obsidian daily notes opener This plugin adds a command for opening daily notes in a new pane (so that a keyboard shortcut could be used!) and gives ex

Xiao Meng 16 Dec 26, 2022
:new:A new version of Icalingua.

Icalingua 3 新版 Icalingua。将抛弃 Electron，转向网页前端 + Node 后端（类似于原来 icalingua-bridge-oicq）的模式。 正在开发中。当前技术栈选型： oicq2 socket.io Vue3 Fastify WindiCSS rxjs Mikr

Icalingua++ 150 Dec 27, 2022