DEV Community: Robert Shaw

🚀✨ We just launched Side Space on Product Hunt!

Robert Shaw — Sat, 16 Nov 2024 08:49:38 +0000

👋 Hi, Community!

After a year in beta, we’re thrilled to introduce Side Space—your ultimate AI-powered vertical tab manager. 🧠📂 Designed to tame the chaos of modern browsing, it brings a sleek, organized experience to your side panel. 🎯🌟

We’d ❤️ your feedback and support! It’s free to try, so give it a spin and let us know your thoughts. 💬👍

👉 Check it out here!

Thank you for helping us make Side Space even better! 🙌🎉

👋 Hi, Community! After a year in beta, we’re thrilled to introduce Side Space—your ultimate AI-powered vertical tab manager. 🧠📂 Designed to tame the chaos of modern browsing, it brings a sleek, organized experience to your side panel. 🎯🌟 We’d ❤️

Robert Shaw — Sat, 16 Nov 2024 08:45:36 +0000

One Tab Group: Your all-in-one tab/tab group manager alternative to OneTab for Chrome

Robert Shaw — Sun, 09 Oct 2022 07:11:40 +0000

Does anyone feel that the OneTab plugin is no longer enough to meet your needs?

Are you also suffering from opening too many tabs, but can not find the site you want to find, all Icon ~ ~
Are you also suffering from the fact that onetab can only recover tabs, but not groups of tabs?
Are you also tired of onetab's layout, leaving a large blank space on the right side?
Are you also looking forward to a new plugin that can replace it !!!

One Tab Group

I'm building a Chrome plugin called One Tab Group that solves some of the above problems. For those interested, check out this video

https://www.youtube.com/watch?v=lZ65zLtk_pI

If you were familiar with onetab, then you will also use One Tab Group as well.

Features

The following features are supported.

⚡️ One click button to save all tabs in the chrome window as a new session
🖱️ Hand pick tabs and store them as a new session in the context menu
🗂️ Restore tabs
- in current window
- in a new window
🔄 Sync your opened tabs in sidenav
🤏 Reorganize tab sessions use Drag & Drop with ease
🔲 Single Column View | Double Columns View | Timeline View
📑 Save your session as json file
🌛 Darkmode Support
🌍 i18n Support
⌨️ Command K Interface - easily explore the opened tabs & tab groups
🏷️ Visual Web Bookmark - Turn a link into a visual web bookmark with beautiful QRCode, you can share with others
🔖 Support for migrate tabs data from OneTab to onetab.group
🔍 Search all tabs quickly using fuzzy search

One Tab Group is focused on solving the problem of restoring tab groups as well.

So, have fun. One Tab Group already release on Chrome Web Store.

Here's the link:

Get it for Chrome

Get it for Mircosoft Edge

If you have any idea about it, welcome let me know

Suggest a Change

I built a Chrome Extension alternative to onetab: One Tab Group

Robert Shaw — Fri, 16 Sep 2022 08:26:20 +0000

Does anyone feel that the onetab plugin is no longer enough to meet your needs?

Are you also suffering from opening too many tabs, but can not find the site you want to find, all Icon ~ ~
Are you also suffering from the fact that onetab can only recover tabs, but not groups of tabs?
Are you also tired of onetab's layout, leaving a large blank space on the right side?
Are you also looking forward to a new plugin that can replace it !!!

One Tab Group

I'm building a Chrome plugin called One Tab Group that solves some of the above problems. For those interested, check out this video

https://www.youtube.com/watch?v=lZ65zLtk_pI

If you were familiar with onetab, then you will also use One Tab Group as well.

Features

The following features are supported.

⚡️ One click button to save all tabs in the chrome window as a new session
🖱️ Hand pick tabs and store them as a new session in the context menu
🗂️ Restore tabs
- in current window
- in a new window
🔄 Sync your opened tabs in sidenav
🤏 Reorganize tab sessions use Drag & Drop with ease
🔲 Single Column View | Double Columns View | Timeline View
📑 Save your session as json file
🌛 Darkmode Support
🌍 i18n Support
⌨️ Command K Interface - easily explore the opened tabs & tab groups
🏷️ Visual Web Bookmark - Turn a link into a visual web bookmark with beautiful QRCode, you can share with others
🔖 Support for migrate tabs data from OneTab to onetab.group
🔍 Search all tabs quickly using fuzzy search

One Tab Group is focused on solving the problem of restoring tab groups as well.

So, have fun. One Tab Group already release on Chrome Web Store.

Here's the link:

One Tab Group Extension

If you have any idea about it, welcome let me know

Suggest a Change

SHAS： A starter for the self-hosted app, help you to build your next full-stack project.

Robert Shaw — Sat, 28 May 2022 02:51:10 +0000

Preview

Live Demo

Documentation

Features

SHA is built on top of GSVT Stack, which stands for Go、SQLite、Vue 3、TailwindCSS

🪄 Full-stack starter with GSVT Stack
⚓️ Self-hosted with Dockerfile on the fly
💾 Store your data using the SQLite database
🖖 Choosing your familiar Front-end Tech Stack, default is Vue 3
🚄 Deploy your app easily on the Railway

Tech Stack

Back-end

Go
Air
SQLite

Front-end

Generate by vue3-starter

Vue 3
Vite
WindiCSS

Repo

https://github.com/xiaoluoboding/self-hosted-app-starter

If you like it, please leave a star 🌟

I built a Chrome Extension to turn any link into a stylish visual web bookmark

Robert Shaw — Fri, 20 May 2022 06:43:12 +0000

Hello everyone, I'm xiaoluoboding, a remote developer living in Dali, China.

This topic focuses on sharing a Chrome Extension Web Visual Bookmark, which is the predecessor of bookmark.style

Web Visual Bookmark

This plugin mainly addresses its own needs, converting a link into a card like Twitter Card or Notion Web Bookmark.

The generated image is suitable for developers, creators, and public writers, it can beautify your links and make your links "talk"

The following image was generated by Web Visual Bookmark with the following link https://www.producthunt.com/posts/bookmark-style

The plugin provides several features.

Clicking on the plugin Icon will convert the current Tab page link into a visual Web Bookmark card
Twitter Card-like layout
Notion Web bookmark-like layout
Beautify gradient backgrounds (gradient backgrounds in the plugin are random)
QR Code Reveal
One-click image copy (@2x)
Dark mode

If you want to customize the card, the plugin provides a configuration button, click to jump to bookmark.style to configure

bookmark.style

Jump to bookmark.style and you can additionally configure the card

Beautify the gradient background
Turn on frosting effect
Card rounding settings
Download images

Resources

The tools mentioned above are all open source on GitHub, so if you have any requests, you can ask for them in the repository as an issue

chrome-web-bookmark - https://github.com/one-tab-group/chrome-web-bookmark
bookmark.style - https://github.com/one-tab-group/bookmark.style

Support

If bookmark.style has helped you, please don't hesitate to vote for it on ProductHunt, share it with your friends, or ☕️ buy me a cup of coffee.

About Me

Remote worker living in Dali, China, focused on front-end, often active in the open source community
You can find me on GitHub: https://github.com/xiaoluoboding
Interested students can also follow my public number: I usually share some front-end technology stack, and front-end technology solutions, and occasionally share my life in Dali.
Or follow me on Twitter: I'm a daily tweeter of great tools to improve front-end development performance and productivity.

Use Vuex With Composition API Helpers

Robert Shaw — Thu, 10 Dec 2020 14:45:14 +0000

Recently, I'm focus on build a new wheel, I implement useXXX helpers for Vuex, and I'm consider about to contribute in Vuex, then i found that, the useXXX helpers proposal already exist nearly eight months.

checkout https://github.com/vueblocks/vue-use-utilities#vuex

@vueblocks/vue-use-vuex - Use Vuex With Composition API Easily. It build on top of vue-demi & @vue/compostion-api. It works both for Vue 2 & 3, TypeScript Supported too.

useVuex

useState - same as mapState
useGetters - same as mapGetters
useMutations - same as mapMutations
useActions - same as mapActions

useStore

useStore - same as Vuex 4.x composition api useStore

Usage

useState

import { useVuex } from '@vueblocks/vue-use-vuex'

export default {
  // ...
  setup () {
    // Use the useState as you would use mapState
    const { useState } = useVuex()

    return {
      // mix this into the outer object with the object spread operator
      ...useState({
        // arrow functions can make the code very succinct!
        count: state => state.count,

        // passing the string value 'count' is same as `state => state.count`
        countAlias: 'count',

        // to access local state with `this`, a normal function must be used
        countPlusLocalState (state) {
          return state.count + this.localCount
        }
      }),
      ...mapState([
        // map count<ComputedRef> to store.state.count
        'count'
      ])
    }
  }
}

useGetters

import { useVuex } from '@vueblocks/vue-use-vuex'

export default {
  // ...
  setup () {
    // Use the useGetters as you would use mapGetters
    const { useGetters } = useVuex()

    return {
      // mix the getters into outer object with the object spread operator
      ...useGetters([
        'doneTodosCount',
        'anotherGetter',
        // ...
      ]),
      // if you want to map a getter to a different name, use an object:
      ...mapGetters({
        // map `doneCount<ComputedRef>` to `this.$store.getters.doneTodosCount`
        doneCount: 'doneTodosCount'
      })
    }
  }
}

useMutations

import { useVuex } from '@vueblocks/vue-use-vuex'

export default {
  // ...
  setup () {
    // Use the useMutations as you would use mapMutations
    const { useMutations } = useVuex()

    return {
      ...useMutations([
        'increment', // map `increment()` to `this.$store.commit('increment')`

        // `mapMutations` also supports payloads:
        'incrementBy' // map `incrementBy(amount)` to `this.$store.commit('incrementBy', amount)`
      ]),
      ...useMutations({
        add: 'increment' // map `add()` to `this.$store.commit('increment')`
      })
    }
  }
}

useActions

import { useVuex } from '@vueblocks/vue-use-vuex'

export default {
  // ...
  setup () {
    // Use the useActions as you would use mapActions
    const { useActions } = useVuex()

    return {
      ...useActions([
        'increment', // map `increment()` to `this.$store.dispatch('increment')`

        // `mapActions` also supports payloads:
        'incrementBy' // map `incrementBy(amount)` to `this.$store.dispatch('incrementBy', amount)`
      ]),
      ...useActions({
        add: 'increment' // map `add()` to `this.$store.dispatch('increment')`
      })
    }
  }
}

namespacing

also support

// Get namespaced component binding helpers in useVuex
import { useVuex } from '@vueblocks/vue-use-vuex'

export default {
  setup () {
    const { mapState, mapActions } = useVuex('some/nested/module')

    return {
      // look up in `some/nested/module`
      ...mapState({
        a: state => state.a,
        b: state => state.b
      })
      // look up in `some/nested/module`
      ...mapActions([
        'foo',
        'bar'
      ])
    }
  }
}

It seems familiar right? Yeah, You could think of @vueblocks/vue-use-vuex as a wrapper of Vuex Helpers

Read Docs

But, I'm didn't think too much about type safety, and i am still learning TypeScript. If you're interested it, Please help me improve it.

PRs Welcome in @vueblocks/vue-use-utilities

I built a VSCode extension: Folder Size

Robert Shaw — Mon, 28 Sep 2020 02:40:01 +0000

At the beginning of this year, I planned a task on to-do, which was to develop a VSCode extension for the purpose of solving my own needs.

Recently, I have a small idea, I wanted counting the size of a file or folder without leaving the VSCode editor.

However, there is no such extension in the VSCode Extension Market.

So I began to build wheels

Install

You can Install the extension in the website Folder Size

Search "Folder Size" in Extension Market.

Preview

Features

Currently, Folder Size has two statistical functions are supported

Count the [file | folder] size

When you selected/opened/saved file, extension will show the status of [📃 file | 📁 folder] size in the status bar.

Show Number of statistical files

Click on the status bar to display the number of files and statistics in the folder where the selected file is located

👏 Welcome to try it.

GitHub Awesome Starless Repositories

Robert Shaw — Wed, 15 Jul 2020 16:00:21 +0000

Awesome Starless

A curated list of awesome repositories with few stargazers but many users.

Most of these repositories were the cornerstone of front-end development.

How defined Starless

I recommend the repos is usefully and the stargazers were disproportionate to the used by count.

If you like it, please give it a star ✨, thank you.

Generated at 2020-07-12 21:18:37.

#	Owner/Repo	Star	Used By	Proportion
#1	component/has-cors	16	1621063	101316
#2	jonschlinkert/is-plain-object	101	5369213	53160
#3	component/is-module	6	167455	27909
#4	sindresorhus/slash	174	4629774	26607
#5	component/escape-html	277	6300754	22746
#6	browserify/resolve	591	5710002	9661
#7	sindresorhus/globby	1465	4340481	2962
#8	mozilla/source-map	2286	6323013	2765
#9	csstree/csstree	960	1844805	1921
#10	isaacs/node-lru-cache	3226	5904048	1830
#11	eemeli/yaml	242	433411	1790
#12	isaacs/rimraf	3841	6271591	1632
#13	substack/minimist	4236	6845693	1616
#14	Rich-Harris/estree-walker	130	206397	1587
#15	MikeMcl/big.js	2823	4181373	1481
#16	isaacs/node-glob	6458	6451079	998
#17	facebook/prop-types	3562	2552354	716
#18	browserslist/browserslist	7824	4530399	579
#19	tigt/mini-svg-data-uri	123	47350	384
#20	postcss/postcss-color-function	303	104535	345
#21	postcss/sugarss	581	111009	191
#22	sindresorhus/matcher	453	81073	178
#23	yyx990803/register-service-worker	454	50680	111
#24	remarkjs/remark	3115	124821	40
#25	knicklabs/lorem-ipsum.js	187	4685	25
#26	zeit/serve	5945	69162	11

Credits

Inspired by Most active GitHub users

License

MIT © xiaoluoboding

Release Ghost Blog Theme Kaldorei 3.0

Robert Shaw — Sat, 06 Jun 2020 16:39:32 +0000

Kaldorei

A Simple And Elegant Ghost Theme Derive From Default Theme Casper

Preview

http://blog.xlbd.me

Features

[x] Blog main theme is set to be fresh green
[x] The post's font color is ink blue
[x] Back To Top
[x] Code Highlight
[x] Side Bar
- [x] Tag Cloud
- [x] Table of Content
- [x] Site Info
- [x] Author Info
[x] Post Page
- [x] Author Info
[x] Loading Post Animation
[x] Responsive Design
[x] Archives
[x] Image LightBox
[x] Blog Global Search
[x] Color & Fonts

Config Reference

🌐 Language ^2.x

Ghost2.x version supports set the language of your site, Kaldorei also supports Chinese/English switching, the default value is en.

Configure：ghost admin > General > Publication Language Enter zh

🏷️ Tag Statistics ^2.x

In Ghost2.x version, Kaldorei uses the ghost api for statistics. so you need to enable the Public API function in the Ghost Labs.

Configure：ghost admin > Labs > Enable Beta Features > Checked Public API

🌄 Lightbox ^2.x

Kaldorei integrates fancyBox 3，supports picture lightbox effect, slide show carousel, full screen preview, thumbnail preview and other fancy features. Preview & usage Preview_Usage

💬 Disqus ^2.x

Kaldorei supports Disqus plugins，only need a short code snippet in the ghost admin code injection.

Configure：ghost admin > Code Injection > Blog Header

<script>
    var disqus_shortname = 'your_disqus_shortname';
</script>

🗂 Archives ^2.x

Kaldorei provides simple archives features, using ghost api to generate site archives. PreviewBlog Archives。

Ghost 3.x Configuration：ghost admin

Pages -> New Page -> Enter the title "Archives", At this time, the page url is archives by default.
Design > Create an archive navigation，URL：http://your_blog_url/archives;
Done! Go to your site find your archives page. Have fun.

Ghost 2.x Configuration：ghost admin

New Post > Enter the title "Archives", At this time, the page url is archives by default.
Post Settings > Checked Turn this post into a page，Then Publish;
Navigation > Create an archive navigation，URL：http://your_blog_url/archives;
Done! Go to your site find your archives page. Have fun.

🎨 Code Highlighting Theme ^2.x

Kaldorei uses highlight.js to achieve code highlight，the default theme is: monokai-sublime

Configuration：ghost admin > Code Injection > Blog Header

<!-- use solarized-light style -->
<link rel="stylesheet" type="text/css" href="/assets/plugins/highlight-latest/styles/solarized-light.css" />

The All Themes List

🔢 Show code line number ^3.x

New feature in Version 3.x

Kaldorei supports config the line number of code snippets，show line numbers to the left of each code blocks, it's closed by default，also support dark / light mode

Configuration：ghost admin > Code Injection > Blog Header

<script>
  var hljsSettings = {
    lineNumber: true,  // Optional value: flase / true, default: false
    mode: 'light'  // Optional value: dark / light，default: 'dark'
  };
</script>

Not only the line number can be configured, but also the background color of the line number can be customized. The default line number background color is as follows:

<style>
:root {
  --linenumber-dark-bg: #282c34;
  --linenumber-light-bg: #c5d2d9;
}
</style>

🔍 Global Search ^2.x

Search engine supports search by blog title by default，This feature need the ghost version >= 2.10.x。

Configure by two steps：

1、Create Custom Integrations

Configure：ghost admin > Integrations > Add custom integration

2、Configure Variables

Configure：ghost admin > Code Injection > Blog Header

// 
<script>
  var searchSettings = {
    key: '__CONTENT__API__KEY__',  // Your custom integration Content API Key
    host: '__API__URL__',  // Your custom integration API URL
  };
</script>

🌈 Custom Color & Fonts ^2.x

Starting from kaldorei v2.1.0 version, users can customize the color and font of your site.

Configure：ghost admin > Code Injection > Blog Header

<style>
:root {
  --primary-color: #4af;
  --primary-light-hover: #4cf;
  --primary-dark-hover: #49f;
}
</style>

Fully replaceable variables

🔖 Bookmark card ^3.x

Starting from Ghost v3.x version, It provides a new bookmark card feature, it can show the page title、excerpt、author、publisher and even a preview image. Like this:

Kaldorei supports bookmark card feature in the 3.x version

Credits

License

20 JavaScript Playgrounds to use in 2019

Robert Shaw — Tue, 12 Nov 2019 14:12:21 +0000

In the daily development of the front end, we use our favorite IDE to debug JavaScript code. For example, I like two code editors, Sublime Text 3 and VS Code. I also used Atom in previous years.

Occasionally, we find ourselves needing to quickly share and or collaborate with a friend or colleague in our local projects, the importance of the online JavaScript runtime environment is reflected.

In order to slove such problems，many excellent online editors have emerged in the industry. For example JS Bin、JS Fiddle、Code Pen、Code Sandbox, etc. I also found some good other options in the past few years, and then look at the browser favorites, there are more than 20 kinds.

Now we use 20 tools to execute a factorial function that has been optimized by TCO.

1、iTerm2

Installing the node environment in the terminal tool and using the node runtime environment to execute the JS code is a must for us to learn the node.

2、Sublime Text 3

In Sublime Text 3，we can use build system create build command，use build command run js code quickly

Shortcuts：CMD + B

config file

fisrt install the dep babel-cli

npm i -g babel-cli

new build system

{
    "path": "/usr/local/bin",
    "working_dir": "${project_path:${folder}}",
    "selector": "source.js",
    "encoding": "utf-8",
    "shell": true,
    "windows": {
        "cmd": ["taskkill /f /im node.exe >nul 2>nul & node $file"]
    },
    "osx": {
        "cmd": ["killall node >/dev/null 2>&1; node $file"]
    },
    "linux": {
        "cmd": ["killall node >/dev/null 2>&1; node $file"]
    }
}

Preview

3、VSCode

In VSCode，we can run JS with task，actually we run js by node use the termnal

Shortcuts：CMD + Shift + B

Config File

/.vscode/tasks.json

{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Run ES6",
      "type": "shell",
      "command": "node ${file}",
      "group": {
        "kind": "build",
        "isDefault": true
      }
    }
  ]
}

Preview

4、use browser console

we use browse console feature debug js code offen, like Chrome's devtools、Firefox's web console, we are famlier with this tools

5、Firefox Scratchpad

In the Firefox browser, there is a particularly useful feature called Scratchpad, where you can enter some JS code to see the result.

shortcut：In the Firefox browser Shift + F4

6、Chrome Sources Panel

Chrome provides powerful DevTools, where the Sources panel allows you to create some Snippets for easy execute JS code.

shortcuts：CMD + Enter run code

7、JS Bin

JS Bin is a live pastebin for HTML, CSS & JavaScript and a range of processors, including SCSS, CoffeeScript, Jade and more...

8、JS Fiddle

JS Fiddle is a good place for front-end coder to write demo examples. Here you can use some third-party libraries in CDN mode, which is very convenient to build a page demo.

Because the JS Fiddle tool itself does not provide a console panel, you can use the browser developer tools to print out JS code results.

9、CodePen

CodePen It's a great online code editor that can write almost any front-end web application.

10、“JavaScript Demo” in MDN

If you has been used MDN, maybe you remember that there will be a JavaScript Demo area in some JavaScript documentation, such as JavaScript Standard built-in objects Function, here you can execute some JS code

11、PLAYCODE

PLAYCODE is a Quickly and Easily make Frontend Experiments

12、Flems

Flems is a playground for web development. It's ideal for prototyping ideas & sharing working front-end code examples

13、JSitor

JSitor Alternative of JSFiddle, Codepen & JSbin

14、Code Sandbox

Code Sandbox is an online editor that helps you create web applications, from prototype to deployment.

I use codesandbox to build some vue demo, it's really very nice tool

15、Web Maker

Web Maker is a blazing fast & offline web playground in your browser

Web Maker also provide Chrome Extension, you can use it offline

16、LeetCode Playground

LeetCode Provides excellent Playground tools, supports switching in various languages, and also supports JavaScript

17、Repl.it Stop wasting time setting up a development environment. Repl.it gives you an instant IDE to learn, build, collaborate, and host all in one place.

Repl.it

18、RunKit + npm

RunKit + npm Try any Node.js package right in your browser

19、StackBlitz

StackBlitz Code the Future. In Your Browser（The online code editor for web apps）

20、Plunker Next

Plunker Next Plunker is the best tool to prototype, experiment, share and debug your ideas on the web platform. From idea to implementation, Plunker helps you build something quickly and frictionlessly.

Others

The tools that are easy to use are endless. In fact, there are other tools or solutions that can be chosen. For example, the following four different types, I have selected a representative tool.

Online programming

scrimba - The interactive screencasting platform

Local Application

RunJS - A scratchpad for your thoughts, a playground for your creativity...

Editor plugin

Quokka.js - Quokka.js is a developer productivity tool for rapid JavaScript / TypeScript prototyping. Runtime values are updated and displayed in your IDE next to your code, as you type.

Cloud-powered dev environments

Visual Studio Online - Cloud-powered dev environments accessible from anywhere

👀 Compare

Tool	Star Rate	Console Panel	offline
JS Bin	⭐️⭐️⭐️⭐️	has	no
JS Fiddle	⭐️⭐️⭐️⭐️⭐️	no	no
CodePen	⭐️⭐️⭐️⭐️⭐️	has	no
PLAYCODE	⭐️⭐️⭐️	has	no
Flems	⭐️⭐️⭐️	has	no
JSitor	⭐️⭐️⭐️	has	no
Code Sandbox	⭐️⭐️⭐️⭐️⭐️	has	no
Web Marker	⭐️⭐️⭐️⭐️	has	yes
LeetCode	⭐️⭐️⭐️⭐️⭐️	has	no
Repl.it	⭐️⭐️⭐️	has	no
RunKit + npm	⭐️⭐️⭐️⭐️	has	no
StackBlitz	⭐️⭐️⭐️	has	no
Plunker Next	⭐️⭐️⭐️	has	no

Conslusion

Actually for myself

If I want to run a code snippets to get test results, the fastest way is to use the browser console, because the browser is the best tool.
If I want to write a demo on my blog, I will choose jsfiddle, codepen, codesandbox, which provides everything you need to write a demo.
If I want to share beautiful code snippets, I will use Carbonize to generate an image, just like the one at the beginning of the blog post

The meaning of using an online editor is that it is fast, easy to share and collaborate, and my favorite is still VSCode.

Maybe you are writing your playground, or you have better tools, I hope to leave a message and share with everyone.

DEV Community: Robert Shaw

🚀✨ We just launched Side Space on Product Hunt!

👋 Hi, Community! After a year in beta, we’re thrilled to introduce **Side Space**—your ultimate AI-powered vertical tab manager. 🧠📂 Designed to tame the chaos of modern browsing, it brings a sleek, organized experience to your side panel. 🎯🌟 We’d ❤️

One Tab Group: Your all-in-one tab/tab group manager alternative to OneTab for Chrome

One Tab Group

Features

I built a Chrome Extension alternative to onetab: One Tab Group

One Tab Group

Features

SHAS： A starter for the self-hosted app, help you to build your next full-stack project.

Preview

Features

Tech Stack

Back-end

Front-end

Repo

I built a Chrome Extension to turn any link into a stylish visual web bookmark

Web Visual Bookmark

bookmark.style

Resources

Support

About Me

Use Vuex With Composition API Helpers

useVuex

useStore

Usage

useState

useGetters

useMutations

useActions

namespacing

I built a VSCode extension: Folder Size

Install

Preview

Features

Count the [file | folder] size

Show Number of statistical files

GitHub Awesome Starless Repositories

Awesome Starless

How defined Starless

Credits

License

Release Ghost Blog Theme Kaldorei 3.0

Kaldorei

Preview

Features

Config Reference

🌐 Language ^2.x

🏷️ Tag Statistics ^2.x

🌄 Lightbox ^2.x

💬 Disqus ^2.x

🗂 Archives ^2.x

🎨 Code Highlighting Theme ^2.x

🔢 Show code line number ^3.x

🔍 Global Search ^2.x

1、Create Custom Integrations

2、Configure Variables

🌈 Custom Color & Fonts ^2.x

🔖 Bookmark card ^3.x

Credits

License

20 JavaScript Playgrounds to use in 2019

1、iTerm2

2、Sublime Text 3

config file

Preview

3、VSCode

Config File

Preview

4、use browser console

5、Firefox Scratchpad

6、Chrome Sources Panel

7、JS Bin

8、JS Fiddle

9、CodePen

10、“JavaScript Demo” in MDN

11、PLAYCODE

12、Flems

13、JSitor

14、Code Sandbox

👋 Hi, Community! After a year in beta, we’re thrilled to introduce Side Space—your ultimate AI-powered vertical tab manager. 🧠📂 Designed to tame the chaos of modern browsing, it brings a sleek, organized experience to your side panel. 🎯🌟 We’d ❤️