src/lib/assets/search_index.json
[
{
"path": "app-structure",
"title": "App Structure",
"description": "This app consists the following screens. learn, translate, chat and docs.",
"content": "\nThis app consists the following screens:\n\nLearn\nTranslate\nChat\n",
"heading": ""
},
{
"path": "app-structure#learn",
"title": "App Structure",
"description": "This app consists the following screens. learn, translate, chat and docs.",
"content": "\n\nOn the Learn screen, you can select sentences and listen to how they are pronounced.\n\nAfter listening, you can check your own pronunciation through the app.\n\nYou can also register new sentences and add new translations.\n",
"heading": "Learn"
},
{
"path": "app-structure#translate",
"title": "App Structure",
"description": "This app consists the following screens. learn, translate, chat and docs.",
"content": "\n\nOn the Translate screen, people can have spoken conversations with other people who speak different languages.\n\nWhen you speak, your words will be displayed in the other party's language and you will hear their words in your own language.\n\nThis service allows you to converse in your own language and have a conversation with someone who speaks a different language.\n",
"heading": "Translate"
},
{
"path": "app-structure#chat",
"title": "App Structure",
"description": "This app consists the following screens. learn, translate, chat and docs.",
"content": "\n\nOn the Chat screen, people can converse through text online with people who speak different languages.\n\nEach user sends messages in their native language, and if the participants speak different languages, their messages will be automatically translated.\n\nAdditionally, when a participating member speaks in a different language, their message will be translated into the receiver's language.\n",
"heading": "Chat"
},
{
"path": "app-structure",
"title": "App Structure",
"description": "",
"heading": "",
"content": ""
},
{
"path": "app-structure#learn",
"title": "App Structure",
"description": "",
"heading": "Learn",
"content": "Learn"
},
{
"path": "app-structure#translate",
"title": "App Structure",
"description": "",
"heading": "Translate",
"content": "Translate"
},
{
"path": "app-structure#chat",
"title": "App Structure",
"description": "",
"heading": "Chat",
"content": "Chat"
},
{
"path": "app-structure",
"title": "App Structure",
"description": "",
"heading": "",
"content": "App Structure"
},
{
"path": "creating-a-project",
"title": "Creating a Project",
"description": "Prerequisites and Setting up the project",
"content": "",
"heading": ""
},
{
"path": "creating-a-project#prerequisites",
"title": "Creating a Project",
"description": "Prerequisites and Setting up the project",
"content": "\n\nMySQL Community Server 8.0.30 or higher\nNode.js 18.4.0 or higher\nnpm 8.13.2 or higher\n",
"heading": "Prerequisites"
},
{
"path": "creating-a-project#prerequisites-for-text-to-speech",
"title": "Creating a Project",
"description": "Prerequisites and Setting up the project",
"content": "\n\nSet up Google Cloud Text-to-Speech\n",
"heading": "Prerequisites for Text-to-Speech"
},
{
"path": "creating-a-project#prerequisites-for-translation",
"title": "Creating a Project",
"description": "Prerequisites and Setting up the project",
"content": "\n\nSet up DeepL API\n",
"heading": "Prerequisites for Translation"
},
{
"path": "creating-a-project#setting-up-the-project",
"title": "Creating a Project",
"description": "Prerequisites and Setting up the project",
"content": "\n\nHere are the steps:\n\nGet the project and setup:\n\nClone the repo to your current directory\ngit clone https://github.com/sinProject-Inc/talk.git\n\nInstall the dependencies\ncd /talk\nnpm install\n\nCreate a database with the name \"talk\"\nCreate a .env file by copying .env.example at the top level of the project\nRewrite the .env file with your environment variables\nPush the initial schema and data to the database:\n\nnpx prisma db push\nnpx prisma generate\nnpx prisma db seed\n\nInstall Redis, and run the command: redis-server\nRun locally\n\nStart the server and open the app in a new browser tab\nnpm run dev -- --open\n",
"heading": "Setting up the project"
},
{
"path": "creating-a-project",
"title": "Creating a Project",
"description": "",
"heading": "",
"content": ""
},
{
"path": "creating-a-project#prerequisites",
"title": "Creating a Project",
"description": "",
"heading": "Prerequisites",
"content": "Prerequisites"
},
{
"path": "creating-a-project#prerequisites-for-text-to-speech",
"title": "Creating a Project",
"description": "",
"heading": "Prerequisites for Text-to-Speech",
"content": "Prerequisites for Text-to-Speech"
},
{
"path": "creating-a-project#prerequisites-for-translation",
"title": "Creating a Project",
"description": "",
"heading": "Prerequisites for Translation",
"content": "Prerequisites for Translation"
},
{
"path": "creating-a-project#setting-up-the-project",
"title": "Creating a Project",
"description": "",
"heading": "Setting up the project",
"content": "Setting up the project"
},
{
"path": "creating-a-project",
"title": "Creating a Project",
"description": "",
"heading": "",
"content": "Creating a Project"
},
{
"path": "talk",
"title": "Talk",
"description": "Talk is an app for conversing in real time with people who speak different languages. You can learn languages in addition to also having conversations through both voice and text.",
"content": "\nTalk is an app for conversing in real time with people who speak different languages. You can learn languages in addition to also having conversations through both voice and text.\n",
"heading": ""
},
{
"path": "talk#what-does-talk-offer-sinproject",
"title": "Talk",
"description": "Talk is an app for conversing in real time with people who speak different languages. You can learn languages in addition to also having conversations through both voice and text.",
"content": "\n\nTalk was created to establish coding conventions and development policies at sinProject Inc.\n\nThis guide covers various topics, such as how to use TypeScript, coding styles, GitHub workflows, defining GitHub Actions, login procedures, handling external APIs, and more. It serves as a comprehensive guideline for product development at sinProject.\n",
"heading": "What does Talk offer sinProject?"
},
{
"path": "talk#before-we-begin",
"title": "Talk",
"description": "Talk is an app for conversing in real time with people who speak different languages. You can learn languages in addition to also having conversations through both voice and text.",
"content": "An email address is required to use the service.\nIf you're reading this document to learn Svelte or SvelteKit, try the Svelte tutorial first.\nIf you get stuck, ask for help at @iam_o_sin on Twitter.\n",
"heading": "Before we begin"
},
{
"path": "talk",
"title": "Talk",
"description": "",
"heading": "",
"content": ""
},
{
"path": "talk#what-does-talk-offer-sinproject",
"title": "Talk",
"description": "",
"heading": "What does Talk offer sinProject?",
"content": "What does Talk offer sinProject?"
},
{
"path": "talk#before-we-begin",
"title": "Talk",
"description": "",
"heading": "Before we begin",
"content": "Before we begin"
},
{
"path": "talk",
"title": "Talk",
"description": "",
"heading": "",
"content": "Talk"
},
{
"path": "docs-history",
"title": "Docs History",
"description": "We will provide a list and update history of the document files.",
"content": "\nWe will provide a list and update history of the document files.\n\nReleases\nCommits\nFiles\n",
"heading": ""
},
{
"path": "docs-history",
"title": "Docs History",
"description": "",
"heading": "",
"content": ""
},
{
"path": "docs-history",
"title": "Docs History",
"description": "",
"heading": "",
"content": "Docs History"
},
{
"path": "funny-apps",
"title": "Funny Apps",
"description": "Here are some of our favorite apps and games.",
"content": "\nHere are some of our favorite apps and games.\n",
"heading": ""
},
{
"path": "funny-apps#joke-apps",
"title": "Funny Apps",
"description": "Here are some of our favorite apps and games.",
"content": "\n\nCool-Retro-Term\nunimatrix\nsl\n To install: brew install\nhollywood\n To install:\n brew brew tap real-aazam/homebrew-aazam\n brew install hollywood\n",
"heading": "Joke Apps"
},
{
"path": "funny-apps#web",
"title": "Funny Apps",
"description": "Here are some of our favorite apps and games.",
"content": "\n\nGEEKTyper.com - Cyberpunk\nHacker Typer\n",
"heading": "Web"
},
{
"path": "funny-apps#games",
"title": "Funny Apps",
"description": "Here are some of our favorite apps and games.",
"content": "\n\nHacknet\n",
"heading": "Games"
},
{
"path": "funny-apps",
"title": "Funny Apps",
"description": "",
"heading": "",
"content": ""
},
{
"path": "funny-apps#joke-apps",
"title": "Funny Apps",
"description": "",
"heading": "Joke Apps",
"content": "Joke Apps"
},
{
"path": "funny-apps#web",
"title": "Funny Apps",
"description": "",
"heading": "Web",
"content": "Web"
},
{
"path": "funny-apps#games",
"title": "Funny Apps",
"description": "",
"heading": "Games",
"content": "Games"
},
{
"path": "funny-apps",
"title": "Funny Apps",
"description": "",
"heading": "",
"content": "Funny Apps"
},
{
"path": "locales",
"title": "Locales",
"description": "This is an explanation about the Locales setting.",
"content": "\nThis is an explanation about the Locales setting.\n\nText-to-Speech Supported Languages\n\nGoogle Cloud\nMicrosoft Azure\n",
"heading": ""
},
{
"path": "locales#translations",
"title": "Locales",
"description": "This is an explanation about the Locales setting.",
"content": "\n\nUsing the VSCode Extension, i18n Ally, makes it easy.\n",
"heading": "Translations"
},
{
"path": "locales",
"title": "Locales",
"description": "",
"heading": "",
"content": ""
},
{
"path": "locales#translations",
"title": "Locales",
"description": "",
"heading": "Translations",
"content": "Translations"
},
{
"path": "locales",
"title": "Locales",
"description": "",
"heading": "",
"content": "Locales"
},
{
"path": "slack",
"title": "Slack",
"description": "How we use Slack to communicate and collaborate.",
"content": "\nHow we use Slack to communicate and collaborate.\n",
"heading": ""
},
{
"path": "slack#mentions-reactions",
"title": "Slack",
"description": "How we use Slack to communicate and collaborate.",
"content": "\n\nMake sure that you can check messaged addressed to everyone in Mentions & reactions.\nCheck daily for messages that you haven't reacted / responded to in Mentions & reactions.\nProactively react to other people's messages.\n",
"heading": "Mentions & Reactions"
},
{
"path": "slack#communication",
"title": "Slack",
"description": "How we use Slack to communicate and collaborate.",
"content": "\n\nShare information for the benefit of others.\nSend a message when starting a task.\nSend a message including your thoughts when finishing a task.\n",
"heading": "Communication"
},
{
"path": "slack#settings",
"title": "Slack",
"description": "How we use Slack to communicate and collaborate.",
"content": "\n\nOpen the Mentions & reactions menu\nClick the settings icon\nCheck @channel mentions\n",
"heading": "Settings"
},
{
"path": "slack",
"title": "Slack",
"description": "",
"heading": "",
"content": ""
},
{
"path": "slack#mentions-reactions",
"title": "Slack",
"description": "",
"heading": "Mentions & Reactions",
"content": "Mentions & Reactions"
},
{
"path": "slack#communication",
"title": "Slack",
"description": "",
"heading": "Communication",
"content": "Communication"
},
{
"path": "slack#settings",
"title": "Slack",
"description": "",
"heading": "Settings",
"content": "Settings"
},
{
"path": "slack",
"title": "Slack",
"description": "",
"heading": "",
"content": "Slack"
},
{
"path": "books",
"title": "Books",
"description": "We recommend the following books.",
"content": "\nWe recommend the following books.\n\n\n\t\n\t\t\n\t\n\t\n\t\t\n\t\n\t\n\t\t\n\t\n\t\n\t\t\n\t\n\t\n\t\t\n\t\n\t\n\t\t\n\t\n\t\n\t\t\n\t\n\t\n\t\t\n\t\n\t\n\t\t\n\t\n\t\n\t\t\n\t\n\t\n\t\t\n\t\n\t\n\t\t\n\t\n\t\n\t\t\n\t\n\t\n\t\t\n\t\n\t\n\t\t\n\t\n\n",
"heading": ""
},
{
"path": "books",
"title": "Books",
"description": "",
"heading": "",
"content": ""
},
{
"path": "books",
"title": "Books",
"description": "",
"heading": "",
"content": "Books"
},
{
"path": "equipment-and-supplies",
"title": "Equipment and Supplies",
"description": "We will introduce the equipment and supplies we use and recommend.",
"content": "\nWe will introduce the equipment and supplies we use and recommend.\n",
"heading": ""
},
{
"path": "equipment-and-supplies#mac-devices-and-accessories",
"title": "Equipment and Supplies",
"description": "We will introduce the equipment and supplies we use and recommend.",
"content": "\n\nApple 2023 MacBook Pro 11 コアCPU、14 コアGPU のM3 Proチップ搭載ノートパ ソコン:14.2 インチ Liquid Retina XDR ディスプレイ、18GB ユニファイドメモリ、 512GBの SSD ストレージ、iPhone や iPad との連係機能 - シルバー\n",
"heading": "Mac Devices and Accessories"
},
{
"path": "equipment-and-supplies#displays-and-monitors",
"title": "Equipment and Supplies",
"description": "We will introduce the equipment and supplies we use and recommend.",
"content": "\n\nLG モニター ディスプレイ 43UN700-BAJP 42.5 インチ/4K/HDR 対応/IPS 非光沢/HDMI×4,DP,USB Type-C/スピーカー(10W×2)/ブルーライト低減、フリッカーセーフ/リモコン付属 /3 年安心・無輝点保証\n",
"heading": "Displays and Monitors"
},
{
"path": "equipment-and-supplies#electronics-cables-and-chargers",
"title": "Equipment and Supplies",
"description": "We will introduce the equipment and supplies we use and recommend.",
"content": "\n\nMOTTERU (モッテル) モバイルバッテリー 20000mAh 大容量 PD60W 出力対応 PD30W 入力対応 USB PD 対応 ノートPC サブバッテリー MacBook MacBook Pro iPad iPhone Apple Watch Android Lenovo HP Surface Dell Windows PC 各種対応 PPS対応 USB-C入出力 USB-A出力 低電流モード搭載 PD3.0 PSE対応 電熱ベスト対応 キャンプ アウトドア スモーキーブラック MOT-MB20001-BK\n\nAnker 747 Charger (GaNPrime 150W) (USB PD 充電器 USB-A & USB-C 4 ポート)【独自技術 Anker GaNPrime 採用 / PowerIQ 4.0 搭載 / PPS 規格対応 / PSE 技術基準適合 / 折りたたみ式プラグ】MacBook PD 対応 Windows PC iPad iPhone Galaxy Android スマートフォン ノート PC 各種 その他機器対応 (ブラック)\n\nUGREEN L字 USB Cケーブル 映像出力【60W/3A急速充電 USB3.1 PD対応 4K / 60Hz 1m】タイプc ケーブル 5Gbps データコード MacBook Pro Air iPad Pro Galaxy S23 S22 等type c機種対応\n\nRAMPOW USB-C & USB-C ケーブル【100W PD 対応/USB 3.2 Gen 2x2-20Gbps データ転送】PD3.0/QC3.0 超高速充電 4K/60Hz 映像出力 超高耐久 type-c ケーブル MacBook Pro/iPad Pro/Google Pixel/Galaxy 等タイプ C 対応 在宅勤務/出張支援 ネイビー 2M\n\nエレコム HDMI ケーブル 2m スリム プレミアムハイスピード 4K 2K (60P)対応 ナイロンメッシュケーブル アルミコネクタ ブラック DH-HDP14ES20SBK\n",
"heading": "Electronics Cables and Chargers"
},
{
"path": "equipment-and-supplies#smartphone-gimbals-and-stabilizers",
"title": "Equipment and Supplies",
"description": "We will introduce the equipment and supplies we use and recommend.",
"content": "\n\nDJI 【国内正規品】Osmo Mobile 6 スマホ用ジンバルスタビライザー、AI 編集＆自動追跡 3 軸スマホジンバル、内蔵延長ロッド、ポータブル&折りたたみ式、Android&iPhone 用ジンバル、Vlog スタビライザー、YouTube&TikTok 動画\n",
"heading": "Smartphone Gimbals and Stabilizers"
},
{
"path": "equipment-and-supplies#home-appliances",
"title": "Equipment and Supplies",
"description": "We will introduce the equipment and supplies we use and recommend.",
"content": "\n\n東芝 過熱水蒸気オーブンレンジ 30L 石窯ドーム 350℃ 2 段調理 ER-XD7000(K) グランブラック フラットテーブル\n\nシャープ 加湿 空気清浄機 プラズマクラスター NEXT(50000) COCORO AIR 搭載 空気清浄 34 畳 ホワイト KI-PX75-W\n\nマキタ コードレス掃除機(充電式クリーナー) CL100DW\n",
"heading": "Home Appliances"
},
{
"path": "equipment-and-supplies#desk-furniture-and-accessories",
"title": "Equipment and Supplies",
"description": "We will introduce the equipment and supplies we use and recommend.",
"content": "\n\n■ 集合 配線機能付き・ミーティングテーブル W2400xD1200 / ダーク N ATD2-2412-AF2 ミーティングデスク 会議用テーブル 会議机 【事業所様お届け商品】\n\nRAKU 昇降式テーブル デスク 折り畳み ガス圧昇降式 無階段調整 幅 120cm× 奥行 60cm コンパクト収納 キャスター付 ローテーブル ダイニングテーブル センターテーブル リフトテーブル (昇降テーブル（ブラウン）)\n\nタンスのゲン サイドテーブル 昇降式 幅 80cm キャスター ドリンクホルダー コンセント付き 高さ調節 ベッドテーブル ダークブラウン 41900017 (82937)\n",
"heading": "Desk Furniture and Accessories"
},
{
"path": "equipment-and-supplies#beverages-and-drinkware",
"title": "Equipment and Supplies",
"description": "We will introduce the equipment and supplies we use and recommend.",
"content": "\n\nネスカフェ エクセラ ボトルコーヒー 無糖 ラベルレス 900ml ×12 本【アイスコーヒー】【コーヒー ペットボトル】\n\nコカ・コーラゼロ ラベルレス 350mlPET×24 本\n\n生茶 [ラベルレス]キリン お茶 2L ペットボトル ×9 本\n\nコカ・コーラ やかんの麦茶 from 爽健美茶 ラベルレス 650mlPET ×24 本\n",
"heading": "Beverages and Drinkware"
},
{
"path": "equipment-and-supplies",
"title": "Equipment and Supplies",
"description": "",
"heading": "",
"content": ""
},
{
"path": "equipment-and-supplies#mac-devices-and-accessories",
"title": "Equipment and Supplies",
"description": "",
"heading": "Mac Devices and Accessories",
"content": "Mac Devices and Accessories"
},
{
"path": "equipment-and-supplies#displays-and-monitors",
"title": "Equipment and Supplies",
"description": "",
"heading": "Displays and Monitors",
"content": "Displays and Monitors"
},
{
"path": "equipment-and-supplies#electronics-cables-and-chargers",
"title": "Equipment and Supplies",
"description": "",
"heading": "Electronics Cables and Chargers",
"content": "Electronics Cables and Chargers"
},
{
"path": "equipment-and-supplies#smartphone-gimbals-and-stabilizers",
"title": "Equipment and Supplies",
"description": "",
"heading": "Smartphone Gimbals and Stabilizers",
"content": "Smartphone Gimbals and Stabilizers"
},
{
"path": "equipment-and-supplies#home-appliances",
"title": "Equipment and Supplies",
"description": "",
"heading": "Home Appliances",
"content": "Home Appliances"
},
{
"path": "equipment-and-supplies#desk-furniture-and-accessories",
"title": "Equipment and Supplies",
"description": "",
"heading": "Desk Furniture and Accessories",
"content": "Desk Furniture and Accessories"
},
{
"path": "equipment-and-supplies#beverages-and-drinkware",
"title": "Equipment and Supplies",
"description": "",
"heading": "Beverages and Drinkware",
"content": "Beverages and Drinkware"
},
{
"path": "equipment-and-supplies",
"title": "Equipment and Supplies",
"description": "",
"heading": "",
"content": "Equipment and Supplies"
},
{
"path": "our-team-policy",
"title": "Our Team Policy",
"description": "We have posted our policies.",
"content": "",
"heading": ""
},
{
"path": "our-team-policy#teamwork",
"title": "Our Team Policy",
"description": "We have posted our policies.",
"content": "\n\nOur goal is to grow and strengthen as a team.\nWe aim to partake in enjoyable team-building activities.\nWe pledge to act with the best interests of the team and ourselves in mind.\n",
"heading": "Teamwork"
},
{
"path": "our-team-policy#deadline-adherence-and-quality-assurance",
"title": "Our Team Policy",
"description": "We have posted our policies.",
"content": "\n\nWe are committed to honoring project deadlines.\nWe strive to deliver work of the highest quality.\nTo improve quality, we will implement necessary tests.\nTo improve quality, manual merging is to be conducted by two or more people.\nTo reduce work hours, we will verify what needs to be implemented before implementing.\n",
"heading": "Deadline Adherence and Quality Assurance"
},
{
"path": "our-team-policy#innovative-suggestions",
"title": "Our Team Policy",
"description": "We have posted our policies.",
"content": "\n\nWe encourage proposing new project ideas.\nWe advocate for active contribution of suggestions.\nWe will foster an environment that promotes continuous improvement.\n",
"heading": "Innovative Suggestions"
},
{
"path": "our-team-policy#personal-and-team-growth",
"title": "Our Team Policy",
"description": "We have posted our policies.",
"content": "\n\nWe are dedicated to pursuing personal growth and lifelong learning.\nWe are committed to contributing to the growth of our team and its members.\n",
"heading": "Personal and Team Growth"
},
{
"path": "our-team-policy#documentation-compliance",
"title": "Our Team Policy",
"description": "We have posted our policies.",
"content": "\n\nWe will adhere to the guidelines set out in the Documentation for all projects.\nIf application of the guidelines is difficult, unclear, or a more efficient solution is available, we will consult an administrator.\nWe will acknowledge that we have reviewed the Documentation by providing a response.\nEach project lead will confirm when they have fully implemented the guidelines from the Documentation.\n",
"heading": "Documentation Compliance"
},
{
"path": "our-team-policy#business-etiquette",
"title": "Our Team Policy",
"description": "We have posted our policies.",
"content": "\n\nIn terms of business etiquette, we will:\n\nInitiate greetings in a proactive and cheerful manner.\nMaintain clear eye contact when greeting others.\n",
"heading": "Business Etiquette"
},
{
"path": "our-team-policy#workplace-cleanliness",
"title": "Our Team Policy",
"description": "We have posted our policies.",
"content": "\n\nWe are responsible for tidying up after ourselves.\nWe will maintain the cleanliness and organization of shared spaces.\n",
"heading": "Workplace Cleanliness"
},
{
"path": "our-team-policy",
"title": "Our Team Policy",
"description": "",
"heading": "",
"content": ""
},
{
"path": "our-team-policy#teamwork",
"title": "Our Team Policy",
"description": "",
"heading": "Teamwork",
"content": "Teamwork"
},
{
"path": "our-team-policy#deadline-adherence-and-quality-assurance",
"title": "Our Team Policy",
"description": "",
"heading": "Deadline Adherence and Quality Assurance",
"content": "Deadline Adherence and Quality Assurance"
},
{
"path": "our-team-policy#innovative-suggestions",
"title": "Our Team Policy",
"description": "",
"heading": "Innovative Suggestions",
"content": "Innovative Suggestions"
},
{
"path": "our-team-policy#personal-and-team-growth",
"title": "Our Team Policy",
"description": "",
"heading": "Personal and Team Growth",
"content": "Personal and Team Growth"
},
{
"path": "our-team-policy#documentation-compliance",
"title": "Our Team Policy",
"description": "",
"heading": "Documentation Compliance",
"content": "Documentation Compliance"
},
{
"path": "our-team-policy#business-etiquette",
"title": "Our Team Policy",
"description": "",
"heading": "Business Etiquette",
"content": "Business Etiquette"
},
{
"path": "our-team-policy#workplace-cleanliness",
"title": "Our Team Policy",
"description": "",
"heading": "Workplace Cleanliness",
"content": "Workplace Cleanliness"
},
{
"path": "our-team-policy",
"title": "Our Team Policy",
"description": "",
"heading": "",
"content": "Our Team Policy"
},
{
"path": "ngrok",
"title": "ngrok",
"description": "ngrok is a simplified API-first ingress-as-a-service that adds connectivity, security, and observability to your apps in one line",
"content": "\nngrok is a simplified API-first ingress-as-a-service that adds connectivity, security, and observability to your apps in one line.\n\nWe use ngrok during local development when we need to temporarily preview the display on a mobile device.\n",
"heading": ""
},
{
"path": "ngrok#installation",
"title": "ngrok",
"description": "ngrok is a simplified API-first ingress-as-a-service that adds connectivity, security, and observability to your apps in one line",
"content": "\n\nSign up at ngrok.com.\nSign in to ngrok.com.\nOpen Setup & Installation.\nRefer to the aforementioned page for instructions on how to download, install, and configure the authtoken.\n",
"heading": "Installation"
},
{
"path": "ngrok#fire-it-up",
"title": "ngrok",
"description": "ngrok is a simplified API-first ingress-as-a-service that adds connectivity, security, and observability to your apps in one line",
"content": "\n\nTo start a HTTP tunnel forwarding to your local port 5173, run this next:\n\nngrok http 5173\n",
"heading": "Fire it up"
},
{
"path": "ngrok",
"title": "ngrok",
"description": "",
"heading": "",
"content": ""
},
{
"path": "ngrok#installation",
"title": "ngrok",
"description": "",
"heading": "Installation",
"content": "Installation"
},
{
"path": "ngrok#fire-it-up",
"title": "ngrok",
"description": "",
"heading": "Fire it up",
"content": "Fire it up"
},
{
"path": "ngrok",
"title": "ngrok",
"description": "",
"heading": "",
"content": "ngrok"
},
{
"path": "updating-the-server",
"title": "Updating the server",
"description": "We update the server using the following procedure.",
"content": "\nWe update the server using the following procedure.\n",
"heading": ""
},
{
"path": "updating-the-server#github-issues",
"title": "Updating the server",
"description": "We update the server using the following procedure.",
"content": "\n\nFirst, create an Issue on GitHub. We also have an issue template prepared for releases.\n",
"heading": "GitHub Issues"
},
{
"path": "updating-the-server#updating-version",
"title": "Updating the server",
"description": "We update the server using the following procedure.",
"content": "\n\nYou can manage and change versions in package.json and package-lock.json easily using the npm version command.\n\nHere's how you can use it:\n\nnpm version\n\nIn this command, replace <newversion> with the new version number (e.g., 1.0.2). Running this command updates the version numbers in both package.json and package-lock.json to the version number you specify.\n\nAlternatively, you can use one of the following keywords in place of :\n\npatch: this increments the patch version (e.g., 1.0.1 -> 1.0.2)\nminor: this increments the minor version (e.g., 1.0.1 -> 1.1.0)\nmajor: this increments the major version (e.g., 1.0.1 -> 2.0.0)\n\nPlease note that running the npm version command will create a new commit including the version update and also tag it with the new version number (this behavior can be altered in the settings).\n",
"heading": "Updating version"
},
{
"path": "updating-the-server#pushing-and-merging",
"title": "Updating the server",
"description": "We update the server using the following procedure.",
"content": "\n\nCreate a PR (Pull Request). In this case, since the issue is not closed, it is not necessary to rewrite the template.\nMerge the PR (Pull Request) without any checks.\nPush the created tag to origin.\n",
"heading": "Pushing and Merging"
},
{
"path": "updating-the-server#github",
"title": "Updating the server",
"description": "We update the server using the following procedure.",
"content": "\n\nAttach the enhancement label to closed PRs that appear to be feature enhancements.\nOpen the release creation page on GitHub and click the Draft a new release button.\nSelect the newly created tag with Choose a tag.\nPress the Generate release notes button.\nDelete the Release section of the automatically generated release notes.\nPreview to check for any problems.\nIf there are no problems, press the Publish release button to create the release.\n",
"heading": "GitHub"
},
{
"path": "updating-the-server#connecting-server",
"title": "Updating the server",
"description": "We update the server using the following procedure.",
"content": "\n\nConnect to the server using the ssh dev@sinpro-dev command.\n",
"heading": "Connecting Server"
},
{
"path": "updating-the-server#updating",
"title": "Updating the server",
"description": "We update the server using the following procedure.",
"content": "\n\nExecute the following command.\n\ncd ~/dev/sinpro-dev\ngit checkout main && git pull\nnpm i --legacy-peer-deps\nnpm run build\npm2 restart sinpro-dev\n",
"heading": "Updating"
},
{
"path": "updating-the-server#checking",
"title": "Updating the server",
"description": "We update the server using the following procedure.",
"content": "\n\nConnect to https://sinpro.dev/\nConfirm that the version has been updated.\nConfirm that there are no issues with the display.\nConfirm that there are no issues with the operation.\n",
"heading": "Checking"
},
{
"path": "updating-the-server#announcement",
"title": "Updating the server",
"description": "We update the server using the following procedure.",
"content": "\n\nIf there are additions or updates to the documentation, announce them to the members.\nRequest the product manager to make an announcement on social media.\n",
"heading": "Announcement"
},
{
"path": "updating-the-server",
"title": "Updating the server",
"description": "",
"heading": "",
"content": ""
},
{
"path": "updating-the-server#github-issues",
"title": "Updating the server",
"description": "",
"heading": "GitHub Issues",
"content": "GitHub Issues"
},
{
"path": "updating-the-server#updating-version",
"title": "Updating the server",
"description": "",
"heading": "Updating version",
"content": "Updating version"
},
{
"path": "updating-the-server#pushing-and-merging",
"title": "Updating the server",
"description": "",
"heading": "Pushing and Merging",
"content": "Pushing and Merging"
},
{
"path": "updating-the-server#github",
"title": "Updating the server",
"description": "",
"heading": "GitHub",
"content": "GitHub"
},
{
"path": "updating-the-server#connecting-server",
"title": "Updating the server",
"description": "",
"heading": "Connecting Server",
"content": "Connecting Server"
},
{
"path": "updating-the-server#updating",
"title": "Updating the server",
"description": "",
"heading": "Updating",
"content": "Updating"
},
{
"path": "updating-the-server#checking",
"title": "Updating the server",
"description": "",
"heading": "Checking",
"content": "Checking"
},
{
"path": "updating-the-server#announcement",
"title": "Updating the server",
"description": "",
"heading": "Announcement",
"content": "Announcement"
},
{
"path": "updating-the-server",
"title": "Updating the server",
"description": "",
"heading": "",
"content": "Updating the server"
},
{
"path": "caddy",
"title": "Caddy",
"description": "Caddy is an open-source, HTTP/2-enabled web server written in Go.",
"content": "\nCaddy is an open-source, HTTP/2-enabled web server. It's notable for its easy configuration, automatic HTTPS, and capability to serve static sites or reverse proxy.\n\nCaddy Quick Start >\n",
"heading": ""
},
{
"path": "caddy#installation",
"title": "Caddy",
"description": "Caddy is an open-source, HTTP/2-enabled web server written in Go.",
"content": "\n\nGet Caddy on Ubuntu:\n\nsudo apt install -y debian-keyring debian-archive-keyring apt-transport-https\ncurl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/gpg.key' | sudo gpg --dearmor -o /usr/share/keyrings/caddy-stable-archive-keyring.gpg\ncurl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/debian.deb.txt' | sudo tee /etc/apt/sources.list.d/caddy-stable.list\nsudo apt update\nsudo apt install caddy\n",
"heading": "Installation"
},
{
"path": "caddy#starting-caddy-service",
"title": "Caddy",
"description": "Caddy is an open-source, HTTP/2-enabled web server written in Go.",
"content": "\n\nCheck if Caddy service is running:\n\nsudo systemctl status caddy\n\nIf it's not running, start it:\n\nsudo systemctl enable --now caddy\n\nEnabling the service will start Caddy automatically when the server boots up.\n",
"heading": "Starting Caddy Service"
},
{
"path": "caddy#caddy-configuration",
"title": "Caddy",
"description": "Caddy is an open-source, HTTP/2-enabled web server written in Go.",
"content": "\n\nEdit the Caddyfile:\n\nsudo micro /etc/caddy/Caddyfile\n\nAdd your site configurations:\n\nsinpro.dev {\n\treverse_proxy :3001\n}\n\ntalk.sinpro.dev {\n\treverse_proxy :3002\n}\n\nAdd cache control:\n\nsinpro.dev {\n\treverse_proxy :3001\n\n\t@static path *.avif *.woff2 *.png\n\theader @static Cache-Control \"public, max-age=86400, must-revalidate\"\n}\n\nFinally, restart the Caddy service to apply the changes:\n\nsudo systemctl restart caddy\n\nMore info >\n",
"heading": "Caddy Configuration"
},
{
"path": "caddy",
"title": "Caddy",
"description": "",
"heading": "",
"content": ""
},
{
"path": "caddy#installation",
"title": "Caddy",
"description": "",
"heading": "Installation",
"content": "Installation"
},
{
"path": "caddy#starting-caddy-service",
"title": "Caddy",
"description": "",
"heading": "Starting Caddy Service",
"content": "Starting Caddy Service"
},
{
"path": "caddy#caddy-configuration",
"title": "Caddy",
"description": "",
"heading": "Caddy Configuration",
"content": "Caddy Configuration"
},
{
"path": "caddy",
"title": "Caddy",
"description": "",
"heading": "",
"content": "Caddy"
},
{
"path": "pm2",
"title": "PM2",
"description": "PM2 is a daemon process manager that will help you manage and keep your application online 24/7.",
"content": "\nPM2 is a daemon process manager that will help you manage and keep your application online 24/7.\n\nPM2 Quick Start >\n",
"heading": ""
},
{
"path": "pm2#installation",
"title": "PM2",
"description": "PM2 is a daemon process manager that will help you manage and keep your application online 24/7.",
"content": "\n\nnpm install pm2@latest -g\n",
"heading": "Installation"
},
{
"path": "pm2#starting",
"title": "PM2",
"description": "PM2 is a daemon process manager that will help you manage and keep your application online 24/7.",
"content": "\n\npm2 start app.js\n",
"heading": "Starting"
},
{
"path": "pm2#monitoring",
"title": "PM2",
"description": "PM2 is a daemon process manager that will help you manage and keep your application online 24/7.",
"content": "\n\npm2 monit\n",
"heading": "Monitoring"
},
{
"path": "pm2#microservice",
"title": "PM2",
"description": "PM2 is a daemon process manager that will help you manage and keep your application online 24/7.",
"content": "\n\nlist all processes:\n\npm2 list\n\ndisplay logs:\n\npm2 logs\n\nAct on them:\n\npm2 stop [app_name | all]\npm2 restart [app_name | all]\npm2 delete [app_name | all]\n",
"heading": "Microservice"
},
{
"path": "pm2#troubleshooting",
"title": "PM2",
"description": "PM2 is a daemon process manager that will help you manage and keep your application online 24/7.",
"content": "\n\nIf the 'stop' or 'delete' commands do not work, execute the following command.\n\npm2 reload [app_name | all]\n",
"heading": "Troubleshooting"
},
{
"path": "pm2#ecosystem-file",
"title": "PM2",
"description": "PM2 is a daemon process manager that will help you manage and keep your application online 24/7.",
"content": "\n\nmodule.exports = {\n\tapps: [\n\t\t{\n\t\t\tname: 'sinpro-dev',\n\t\t\tscript: 'build',\n\t\t\tinterpreter: 'node',\n\t\t\tinterpreterArgs: '--loader tsx',\n\t\t\tinstances: '-1',\n\t\t\texec_mode: 'cluster',\n\t\t\twatch: false,\n\t\t\tignore_watch: ['logs'],\n\t\t\tenv: {\n\t\t\t\tPORT: 3001,\n\t\t\t},\n\t\t},\n\t],\n}\n\nmodule.exports = {\n\tapps: [\n\t\t{\n\t\t\tname: 'talk',\n\t\t\tscript: './server/index.ts',\n\t\t\tinterpreter: 'node',\n\t\t\tinterpreterArgs: '--loader tsx',\n\t\t\tinstances: '-1',\n\t\t\texec_mode: 'cluster',\n\t\t\twatch: false,\n\t\t\tignore_watch: ['logs'],\n\t\t\tenv: {\n\t\t\t\tPORT: 3002,\n\t\t\t},\n\t\t},\n\t],\n}\n\nStart it easily:\n\npm2 start ecosystem.config.cjs\n\nMore info >\n",
"heading": "Ecosystem File"
},
{
"path": "pm2",
"title": "PM2",
"description": "",
"heading": "",
"content": ""
},
{
"path": "pm2#installation",
"title": "PM2",
"description": "",
"heading": "Installation",
"content": "Installation"
},
{
"path": "pm2#starting",
"title": "PM2",
"description": "",
"heading": "Starting",
"content": "Starting"
},
{
"path": "pm2#monitoring",
"title": "PM2",
"description": "",
"heading": "Monitoring",
"content": "Monitoring"
},
{
"path": "pm2#microservice",
"title": "PM2",
"description": "",
"heading": "Microservice",
"content": "Microservice"
},
{
"path": "pm2#troubleshooting",
"title": "PM2",
"description": "",
"heading": "Troubleshooting",
"content": "Troubleshooting"
},
{
"path": "pm2#ecosystem-file",
"title": "PM2",
"description": "",
"heading": "Ecosystem File",
"content": "Ecosystem File"
},
{
"path": "pm2",
"title": "PM2",
"description": "",
"heading": "",
"content": "PM2"
},
{
"path": "ssh",
"title": "SSH",
"description": "We use SSH as follows.",
"content": "",
"heading": ""
},
{
"path": "ssh#ssh-key-generation",
"title": "SSH",
"description": "We use SSH as follows.",
"content": "\n\n$ mkdir ~/.ssh\n$ cd ~/.ssh\n$ ssh-keygen -t rsa\nEnter file: ubuntu@sinpro-dev\nEnter passphrase: **\n\nssh -i ~/.ssh/ubuntu@sinpro-dev ubuntu@153.127..\n",
"heading": "SSH Key Generation"
},
{
"path": "ssh#using-the-ssh-config-file",
"title": "SSH",
"description": "We use SSH as follows.",
"content": "\n\nCreate a new SSH client configuration: ~/.ssh/config\n\nHost sinpro-dev\n\tHostName 153.127..\n\tPort **\n\tIdentityFile ~/.ssh/dev@sinpro-dev\n\tUser dev\n\nYou can connect with the following command:\n\nssh sinpro-dev\n",
"heading": "Using the SSH Config File"
},
{
"path": "ssh#port-changing",
"title": "SSH",
"description": "We use SSH as follows.",
"content": "\nPacket Filtering\n\nSet up a packet filter so you can connect to the destination port.\n\nInstalling netstat on Ubuntu\n\nsudo apt update && sudo apt upgrade\nsudo apt install net-tools\n\nMore Info >\n\nRun the netstat\n\nThe SSH server on Ubuntu listen on TCP port 22 by default. You can run the netstat command to check ssh port currently running on:\n\nsudo netstat -tulnp | grep ssh\n\nConfigurations\n\nOpen the file:\n\nsudo micro /etc/ssh/sshd_config\n\nEdit the file:\n\nPort XXXX\n\nRestart the SSH server\n\nsudo systemctl restart ssh\n\nConfirm that the port has been changed\n\nsudo netstat -tulnp | grep ssh\n",
"heading": "Port changing"
},
{
"path": "ssh#vscode-configuration",
"title": "SSH",
"description": "We use SSH as follows.",
"content": "\n\nInstall Remote - SSH VSCode Extension.\n\nThis extension allows you to use VSCode by connecting via SSH.\n",
"heading": "VSCode configuration"
},
{
"path": "ssh",
"title": "SSH",
"description": "",
"heading": "",
"content": ""
},
{
"path": "ssh#ssh-key-generation",
"title": "SSH",
"description": "",
"heading": "SSH Key Generation",
"content": "SSH Key Generation"
},
{
"path": "ssh#using-the-ssh-config-file",
"title": "SSH",
"description": "",
"heading": "Using the SSH Config File",
"content": "Using the SSH Config File"
},
{
"path": "ssh#port-changing",
"title": "SSH",
"description": "",
"heading": "Port changing",
"content": "Port changing"
},
{
"path": "ssh#vscode-configuration",
"title": "SSH",
"description": "",
"heading": "VSCode configuration",
"content": "VSCode configuration"
},
{
"path": "ssh",
"title": "SSH",
"description": "",
"heading": "",
"content": "SSH"
},
{
"path": "sonar-cloud-coverage",
"title": "SonarCloud Coverage",
"description": "SonarCloud is a cloud-based code quality and security service. It automatically analyzes and provides feedback on code changes in software projects through continuous inspection.",
"content": "\n\n\nSonarCloud is a cloud-based code quality and security service. It automatically analyzes and provides feedback on code changes in software projects through continuous inspection.\n\nIt integrates with popular development workflows, particularly within continuous integration/continuous delivery (CI/CD) pipelines.\n\nSonarCloud guide on Test Coverage >\n",
"heading": ""
},
{
"path": "sonar-cloud-coverage#use-ci-based-not-automatic-analysis",
"title": "SonarCloud Coverage",
"description": "SonarCloud is a cloud-based code quality and security service. It automatically analyzes and provides feedback on code changes in software projects through continuous inspection.",
"content": "\n\nSign in to SonarCloud\nOpen Your Organization > Your Project > Administration > Analysis Method\nDisable Automatic Analysis\n",
"heading": "Use CI-based, not automatic analysis"
},
{
"path": "sonar-cloud-coverage#analyze-a-project-with-a-github-action",
"title": "SonarCloud Coverage",
"description": "SonarCloud is a cloud-based code quality and security service. It automatically analyzes and provides feedback on code changes in software projects through continuous inspection.",
"content": "\n\nOpen Your Organization > Your Project > Administration > Analysis Method\nClick With GitHub Actions\nCreate a GitHub Secret\nCreate or update a build file\n",
"heading": "Analyze a project with a GitHub Action"
},
{
"path": "sonar-cloud-coverage#create-or-update-a-build-file-for-js-ts-go-python-php",
"title": "SonarCloud Coverage",
"description": "SonarCloud is a cloud-based code quality and security service. It automatically analyzes and provides feedback on code changes in software projects through continuous inspection.",
"content": "\nCreate a sonar-project.properties file\n\nCreate a configuration file in the root directory of the project and name it sonar-project.properties\n\nsonar.projectKey=sinProject-Inc_sinpro-dev\nsonar.organization=sinproject-inc\nsonar.javascript.lcov.reportPaths=./coverage/lcov.info\nsonar.coverage.exclusions=/tests/, */.test., */.config., */+, src/hooks.server.ts\n\nCreate or update a ci.yml file\n\nname: Build\n\non:\n push:\n branches:\n main\n pull_request:\n types: [opened, synchronize, reopened]\n\njobs:\n tests:\n name: Vitest Test\n runs-on: ubuntu-latest\n\n steps:\n uses: actions/checkout@v3\n with:\n fetch-depth: 0\n\n name: Install dependencies\n run: npm run install\n\n\t\t\tname: Vitest Test and coverage\n run: npx vitest run --coverage\n\n name: SonarCloud Scan\n uses: SonarSource/sonarcloud-github-action@master\n env:\n GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n SONAR_TOKEN: ${{ secrets.SONARCLOUD_TOKEN }}\n",
"heading": "Create or update a build file for JS, TS, Go, Python, PHP, ..."
},
{
"path": "sonar-cloud-coverage",
"title": "SonarCloud Coverage",
"description": "",
"heading": "",
"content": ""
},
{
"path": "sonar-cloud-coverage#use-ci-based-not-automatic-analysis",
"title": "SonarCloud Coverage",
"description": "",
"heading": "Use CI-based, not automatic analysis",
"content": "Use CI-based, not automatic analysis"
},
{
"path": "sonar-cloud-coverage#analyze-a-project-with-a-github-action",
"title": "SonarCloud Coverage",
"description": "",
"heading": "Analyze a project with a GitHub Action",
"content": "Analyze a project with a GitHub Action"
},
{
"path": "sonar-cloud-coverage#create-or-update-a-build-file-for-js-ts-go-python-php",
"title": "SonarCloud Coverage",
"description": "",
"heading": "Create or update a build file for JS, TS, Go, Python, PHP, ...",
"content": "Create or update a build file for JS, TS, Go, Python, PHP, ..."
},
{
"path": "sonar-cloud-coverage",
"title": "SonarCloud Coverage",
"description": "",
"heading": "",
"content": "SonarCloud Coverage"
},
{
"path": "github-actions",
"title": "GitHub Actions",
"description": "We use GitHub Actions to perform two types of CI Checks and tests.",
"content": "\nWe use GitHub Actions to perform two types of CI: Checks and tests.\n",
"heading": ""
},
{
"path": "github-actions#secrets",
"title": "GitHub Actions",
"description": "We use GitHub Actions to perform two types of CI Checks and tests.",
"content": "\n\nDo not write confidential information (environment variables etc.) directly. Instead, register it in GitHub's Secrets.\n\nGitHub > Repository > Settings\nSecrets and Variables > Actions\nNew repository secret\n\nIf you want to use the secret, refer to it as secrets.[SECRET_NAME].\n\necho DATABASE_URL=${{ secrets.DATABASE_URL }} >> .env\n",
"heading": "Secrets"
},
{
"path": "github-actions#checks",
"title": "GitHub Actions",
"description": "We use GitHub Actions to perform two types of CI Checks and tests.",
"content": "\n\nRun a lint check, a type check, and Svelte check.\n\njobs:\n checks:\n name: Check\n runs-on: ubuntu-latest\n steps:\n name: Lint Check\n run: npm run lint\n\n name: Type Check\n run: npm run typecheck\n\n name: Svelte Check\n run: npm run check\n",
"heading": "Checks"
},
{
"path": "github-actions#tests",
"title": "GitHub Actions",
"description": "We use GitHub Actions to perform two types of CI Checks and tests.",
"content": "\n\nExecute tests using Vitest and Playwright.\n\njobs:\n tests:\n name: Tests\n runs-on: ubuntu-latest\n steps:\n name: Vitest Test\n run: npx vitest\n\n name: Playwright Test\n run: npx playwright test\n",
"heading": "Tests"
},
{
"path": "github-actions#output",
"title": "GitHub Actions",
"description": "We use GitHub Actions to perform two types of CI Checks and tests.",
"content": "\n\nOutput Playwright Report and logs.\n\njobs:\n tests:\n name: Tests\n runs-on: ubuntu-latest\n steps:\n uses: actions/upload-artifact@v3\n if: always()\n with:\n name: playwright-report\n path: playwright-report/\n retention-days: 30\n\n uses: actions/upload-artifact@v3\n if: always()\n with:\n name: logs\n path: logs/\n retention-days: 30\n",
"heading": "Output"
},
{
"path": "github-actions#our-checks-for-pr",
"title": "GitHub Actions",
"description": "We use GitHub Actions to perform two types of CI Checks and tests.",
"content": "\nGitHub Apps\n\nSonarCloud\n\nSonarCloud is a cloud-based code quality and security analysis service that automatically reviews code to detect bugs, vulnerabilities, and code smells. It integrates with popular version control platforms and CI/CD pipelines to provide real-time feedback on code changes.\n\nCode Climate\n\nCodeClimate Quality is a feature within CodeClimate that assesses the maintainability of code by analyzing its complexity, duplication, and other factors. It provides a grade and insights to help improve code quality.\n\nChatGPT-CodeReview (Not in use now)\n\nChatGPT-CodeReview is a code review bot that uses ChatGPT. It is available in multiple languages, including English, Chinese, Japanese, and Korean. The bot is currently only used for testing purposes and is deployed on AWS Lambda with rate limit restrictions.\n\nGitHub Actions\n\nChecks and Tests\n CI / Lint Check, Type Check, Svelte CHeck\n CI / Vitest Test, Playwright Test\nCode Review by AI\n Code Review by akiojin GPT-4\n Code Review by akiojin (Not in use now)\nStatic Code Analysis\n Sonar Cloud Code Analysis\n codeclimate\nGitHub Code Scanning (Security Code Analysis)\n CodeQL / Analyze (javascript) (dynamic)\n Code scanning results / CodeQL\n Code scanning results / SonarCloud\n",
"heading": "Our Checks for PR"
},
{
"path": "github-actions",
"title": "GitHub Actions",
"description": "",
"heading": "",
"content": ""
},
{
"path": "github-actions#secrets",
"title": "GitHub Actions",
"description": "",
"heading": "Secrets",
"content": "Secrets"
},
{
"path": "github-actions#checks",
"title": "GitHub Actions",
"description": "",
"heading": "Checks",
"content": "Checks"
},
{
"path": "github-actions#tests",
"title": "GitHub Actions",
"description": "",
"heading": "Tests",
"content": "Tests"
},
{
"path": "github-actions#output",
"title": "GitHub Actions",
"description": "",
"heading": "Output",
"content": "Output"
},
{
"path": "github-actions#our-checks-for-pr",
"title": "GitHub Actions",
"description": "",
"heading": "Our Checks for PR",
"content": "Our Checks for PR"
},
{
"path": "github-actions",
"title": "GitHub Actions",
"description": "",
"heading": "",
"content": "GitHub Actions"
},
{
"path": "github-branch-protection",
"title": "GitHub Branch Protection",
"description": "You can create a branch protection rule to enforce certain workflows for one or more branches, such as requiring an approving review or passing status checks for all pull requests merged into the protected branch.",
"content": "",
"heading": ""
},
{
"path": "github-branch-protection#managing-a-branch-protection-rule",
"title": "GitHub Branch Protection",
"description": "You can create a branch protection rule to enforce certain workflows for one or more branches, such as requiring an approving review or passing status checks for all pull requests merged into the protected branch.",
"content": "You can create a branch protection rule to enforce certain workflows for one or more branches, such as requiring an approving review or passing status checks for all pull requests merged into the protected branch.\n\nMore Information >\n",
"heading": "Managing a branch protection rule"
},
{
"path": "github-branch-protection#how-to-create-a-branch-protection-rule",
"title": "GitHub Branch Protection",
"description": "You can create a branch protection rule to enforce certain workflows for one or more branches, such as requiring an approving review or passing status checks for all pull requests merged into the protected branch.",
"content": "\n\nOpen Target Repository > Settings > Branches\nPush Add rule button\n",
"heading": "How to create a branch protection rule"
},
{
"path": "github-branch-protection#settings",
"title": "GitHub Branch Protection",
"description": "You can create a branch protection rule to enforce certain workflows for one or more branches, such as requiring an approving review or passing status checks for all pull requests merged into the protected branch.",
"content": "\nBranch name pattern\n\nmain\n\nProtect matching branches\n\nApply the following settings:\n\nRequire a pull request before merging\n Require approvals: 1\n Dismiss stale pull request approvals when new commits are pushed\nRequire status checks to pass before merging\n Status checks that are required.: Search for the target Actions and add them.\nRestrict who can push to matching branches\n Restrict pushes that create matching branches\n",
"heading": "Settings"
},
{
"path": "github-branch-protection",
"title": "GitHub Branch Protection",
"description": "",
"heading": "",
"content": ""
},
{
"path": "github-branch-protection#managing-a-branch-protection-rule",
"title": "GitHub Branch Protection",
"description": "",
"heading": "Managing a branch protection rule",
"content": "Managing a branch protection rule"
},
{
"path": "github-branch-protection#how-to-create-a-branch-protection-rule",
"title": "GitHub Branch Protection",
"description": "",
"heading": "How to create a branch protection rule",
"content": "How to create a branch protection rule"
},
{
"path": "github-branch-protection#settings",
"title": "GitHub Branch Protection",
"description": "",
"heading": "Settings",
"content": "Settings"
},
{
"path": "github-branch-protection",
"title": "GitHub Branch Protection",
"description": "",
"heading": "",
"content": "GitHub Branch Protection"
},
{
"path": "github_repository_settings",
"title": "GitHub Repository Settings",
"description": "We are modifying the initial settings of the repository as follows.",
"content": "\nWe are modifying the initial settings of the repository as follows.\n",
"heading": ""
},
{
"path": "github_repository_settings#general",
"title": "GitHub Repository Settings",
"description": "We are modifying the initial settings of the repository as follows.",
"content": "\n\nTemplate repository: Check if it's a template.\n",
"heading": "General"
},
{
"path": "github_repository_settings#features",
"title": "GitHub Repository Settings",
"description": "We are modifying the initial settings of the repository as follows.",
"content": "\n\nWikis: Uncheck\nDiscussions: Check\n",
"heading": "Features"
},
{
"path": "github_repository_settings#pull-requests",
"title": "GitHub Repository Settings",
"description": "We are modifying the initial settings of the repository as follows.",
"content": "\n\nAllow squash merging: Uncheck\nAllow rebase merging: Uncheck\nAutomatically delete head branches: Check\n",
"heading": "Pull Requests"
},
{
"path": "github_repository_settings",
"title": "GitHub Repository Settings",
"description": "",
"heading": "",
"content": ""
},
{
"path": "github_repository_settings#general",
"title": "GitHub Repository Settings",
"description": "",
"heading": "General",
"content": "General"
},
{
"path": "github_repository_settings#features",
"title": "GitHub Repository Settings",
"description": "",
"heading": "Features",
"content": "Features"
},
{
"path": "github_repository_settings#pull-requests",
"title": "GitHub Repository Settings",
"description": "",
"heading": "Pull Requests",
"content": "Pull Requests"
},
{
"path": "github_repository_settings",
"title": "GitHub Repository Settings",
"description": "",
"heading": "",
"content": "GitHub Repository Settings"
},
{
"path": "github-pull-requests",
"title": "GitHub Pull Requests",
"description": "On completing an issues, we create a pull request (PR).",
"content": "\nOn completing an issues, we create a pull request (PR).\n",
"heading": ""
},
{
"path": "github-pull-requests#pull-request-template",
"title": "GitHub Pull Requests",
"description": "On completing an issues, we create a pull request (PR).",
"content": "\n\nIn the template, write tasks for the following:\n\nFor the Submitter\n Tasks\nFor the Reviewer\n Before Reviewing\n Checks\n After Reviewing\n\nView this file on GitHub >\n",
"heading": "Pull Request Template"
},
{
"path": "github-pull-requests#title",
"title": "GitHub Pull Requests",
"description": "On completing an issues, we create a pull request (PR).",
"content": "\n\nFormat\n\n\nExample\n\nShow scrollbar like Mac #942\n",
"heading": "Title"
},
{
"path": "github-pull-requests#reviewers",
"title": "GitHub Pull Requests",
"description": "On completing an issues, we create a pull request (PR).",
"content": "\n\nAssign the person in charge of reviewing.\n\nPR review and praise what was good about it.\n",
"heading": "Reviewers"
},
{
"path": "github-pull-requests#labels",
"title": "GitHub Pull Requests",
"description": "On completing an issues, we create a pull request (PR).",
"content": "\n\nIf it's related to an enhancement, add the 'enhancement' label.\n\nIf it involves a significant change, add the 'breaking-change' label.\n",
"heading": "Labels"
},
{
"path": "github-pull-requests#merge-pull-request",
"title": "GitHub Pull Requests",
"description": "On completing an issues, we create a pull request (PR).",
"content": "\n\nSelect the method to create a merge commit.\n\nDo not select 'Squash and merge' or 'Rebase and merge'.\n\nIf you want to use these, please inform me of their benefits before doing so. I will consider the policy.\n",
"heading": "Merge pull request"
},
{
"path": "github-pull-requests",
"title": "GitHub Pull Requests",
"description": "",
"heading": "",
"content": ""
},
{
"path": "github-pull-requests#pull-request-template",
"title": "GitHub Pull Requests",
"description": "",
"heading": "Pull Request Template",
"content": "Pull Request Template"
},
{
"path": "github-pull-requests#title",
"title": "GitHub Pull Requests",
"description": "",
"heading": "Title",
"content": "Title"
},
{
"path": "github-pull-requests#reviewers",
"title": "GitHub Pull Requests",
"description": "",
"heading": "Reviewers",
"content": "Reviewers"
},
{
"path": "github-pull-requests#labels",
"title": "GitHub Pull Requests",
"description": "",
"heading": "Labels",
"content": "Labels"
},
{
"path": "github-pull-requests#merge-pull-request",
"title": "GitHub Pull Requests",
"description": "",
"heading": "Merge pull request",
"content": "Merge pull request"
},
{
"path": "github-pull-requests",
"title": "GitHub Pull Requests",
"description": "",
"heading": "",
"content": "GitHub Pull Requests"
},
{
"path": "github-issues",
"title": "GitHub Issues",
"description": "We manage tasks using GitHub issues.",
"content": "\nWe manage tasks using GitHub issues.\n",
"heading": ""
},
{
"path": "github-issues#issue-template",
"title": "GitHub Issues",
"description": "We manage tasks using GitHub issues.",
"content": "\n\nIn the template, write tasks for the following:\n\nWriting the issue\nBefore Working on the issue\nPre-PR Checks\n\nView this file on GitHub >\n",
"heading": "Issue Template"
},
{
"path": "github-issues#title",
"title": "GitHub Issues",
"description": "We manage tasks using GitHub issues.",
"content": "\n\nFormat\n\n\n\nExample\n\nShow scrollbar like Mac\n\nWrite issue titles in affirmative form, following the following format.\n\nMobile sidebar button does not show when first navigating\n\nDisplay icons when first navigating on mobile devices\n",
"heading": "Title"
},
{
"path": "github-issues#estimated-time",
"title": "GitHub Issues",
"description": "We manage tasks using GitHub issues.",
"content": "\n\nSpecify the estimated time needed to resolve the issue.\n",
"heading": "Estimated Time"
},
{
"path": "github-issues#assignees",
"title": "GitHub Issues",
"description": "We manage tasks using GitHub issues.",
"content": "\n\nAssign the person in charge of the issue.\n",
"heading": "Assignees"
},
{
"path": "github-issues#labels",
"title": "GitHub Issues",
"description": "We manage tasks using GitHub issues.",
"content": "\n\nSpecify one or more labels. If there are no available labels, propose a new one.\n",
"heading": "Labels"
},
{
"path": "github-issues#milestones",
"title": "GitHub Issues",
"description": "We manage tasks using GitHub issues.",
"content": "\n\nCreate milestones for items with a deadline and associate them with the milestone.\n",
"heading": "Milestones"
},
{
"path": "github-issues",
"title": "GitHub Issues",
"description": "",
"heading": "",
"content": ""
},
{
"path": "github-issues#issue-template",
"title": "GitHub Issues",
"description": "",
"heading": "Issue Template",
"content": "Issue Template"
},
{
"path": "github-issues#title",
"title": "GitHub Issues",
"description": "",
"heading": "Title",
"content": "Title"
},
{
"path": "github-issues#estimated-time",
"title": "GitHub Issues",
"description": "",
"heading": "Estimated Time",
"content": "Estimated Time"
},
{
"path": "github-issues#assignees",
"title": "GitHub Issues",
"description": "",
"heading": "Assignees",
"content": "Assignees"
},
{
"path": "github-issues#labels",
"title": "GitHub Issues",
"description": "",
"heading": "Labels",
"content": "Labels"
},
{
"path": "github-issues#milestones",
"title": "GitHub Issues",
"description": "",
"heading": "Milestones",
"content": "Milestones"
},
{
"path": "github-issues",
"title": "GitHub Issues",
"description": "",
"heading": "",
"content": "GitHub Issues"
},
{
"path": "git-for-windows",
"title": "Git for Windows",
"description": "We will use LF (Line Feed) for line breaks at the time of commit, but do not change the line break code when pulling.",
"content": "",
"heading": ""
},
{
"path": "git-for-windows#core-autocrlf",
"title": "Git for Windows",
"description": "We will use LF (Line Feed) for line breaks at the time of commit, but do not change the line break code when pulling.",
"content": "\n\nWe will use LF (Line Feed) for line breaks at the time of commit, but do not change the line break code when pulling.\n\ngit config --global core.autocrlf input\n",
"heading": "core.autocrlf"
},
{
"path": "git-for-windows",
"title": "Git for Windows",
"description": "",
"heading": "",
"content": ""
},
{
"path": "git-for-windows#core-autocrlf",
"title": "Git for Windows",
"description": "",
"heading": "core.autocrlf",
"content": "core.autocrlf"
},
{
"path": "git-for-windows",
"title": "Git for Windows",
"description": "",
"heading": "",
"content": "Git for Windows"
},
{
"path": "git-user-profiles",
"title": "Git User Profiles",
"description": "This document will guide you on setting up your git user profiles using the Git Config User Profiles extension in VSCode. This is especially helpful for people who share a development device.",
"content": "\nThis document will guide you on setting up your git user profiles using the Git Config User Profiles extension in VSCode. This is especially helpful for people who share a development device.\n",
"heading": ""
},
{
"path": "git-user-profiles#installing-the-extension",
"title": "Git User Profiles",
"description": "This document will guide you on setting up your git user profiles using the Git Config User Profiles extension in VSCode. This is especially helpful for people who share a development device.",
"content": "\n\nNavigate to the Extensions tab.\nSearch for Git Config User Profiles and install it.\n",
"heading": "Installing the Extension"
},
{
"path": "git-user-profiles#creating-a-git-config-user-profile",
"title": "Git User Profiles",
"description": "This document will guide you on setting up your git user profiles using the Git Config User Profiles extension in VSCode. This is especially helpful for people who share a development device.",
"content": "\n\nOpen the command palette with Shift + Command + P.\nSearch and execute git config user profiles: create a git config user profile.\nYou will then be prompted to enter your profile name, account name, and an email address to create your profile.\n",
"heading": "Creating a Git Config User Profile"
},
{
"path": "git-user-profiles#selecting-a-git-config-user-profile",
"title": "Git User Profiles",
"description": "This document will guide you on setting up your git user profiles using the Git Config User Profiles extension in VSCode. This is especially helpful for people who share a development device.",
"content": "\n\nOpen the command palette again.\nSearch and execute Git Config User Profiles: Select a git config user profile.\nA confirmation pop-up will appear in the bottom right corner. If there are no issues, proceed with the selection.\n\nNote: This operation will update the account information documented in the open project to the selected profile.\n",
"heading": "Selecting a Git Config User Profile"
},
{
"path": "git-user-profiles#resolving-account-information-discrepancies",
"title": "Git User Profiles",
"description": "This document will guide you on setting up your git user profiles using the Git Config User Profiles extension in VSCode. This is especially helpful for people who share a development device.",
"content": "\n\nIf there are discrepancies between the account information in the selected profile and the open file, a warning will be displayed in yellow on the blue bar at the bottom of the screen. To resolve this:\n\nClick on the warning or,\nRepeat step [3] of the Selecting a Git Config User Profile section above to select the correct profile.\n",
"heading": "Resolving Account Information Discrepancies"
},
{
"path": "git-user-profiles",
"title": "Git User Profiles",
"description": "",
"heading": "",
"content": ""
},
{
"path": "git-user-profiles#installing-the-extension",
"title": "Git User Profiles",
"description": "",
"heading": "Installing the Extension",
"content": "Installing the Extension"
},
{
"path": "git-user-profiles#creating-a-git-config-user-profile",
"title": "Git User Profiles",
"description": "",
"heading": "Creating a Git Config User Profile",
"content": "Creating a Git Config User Profile"
},
{
"path": "git-user-profiles#selecting-a-git-config-user-profile",
"title": "Git User Profiles",
"description": "",
"heading": "Selecting a Git Config User Profile",
"content": "Selecting a Git Config User Profile"
},
{
"path": "git-user-profiles#resolving-account-information-discrepancies",
"title": "Git User Profiles",
"description": "",
"heading": "Resolving Account Information Discrepancies",
"content": "Resolving Account Information Discrepancies"
},
{
"path": "git-user-profiles",
"title": "Git User Profiles",
"description": "",
"heading": "",
"content": "Git User Profiles"
},
{
"path": "git-hooks",
"title": "Git Hooks",
"description": "We use lint-staged and Husky for our Git Hooks.",
"content": "\nWe use lint-staged and Husky for our Git Hooks.\n\nlint-staged - Run linters against staged git files and don't let 💩 slip into your code base!\nHusky - Husky improves your commits and more 🐶 woof!\n",
"heading": ""
},
{
"path": "git-hooks#installation",
"title": "Git Hooks",
"description": "We use lint-staged and Husky for our Git Hooks.",
"content": "\n\nnpm install --save-dev lint-staged\n\nnpx husky-init && npm install\n",
"heading": "Installation"
},
{
"path": "git-hooks#pre-commit",
"title": "Git Hooks",
"description": "We use lint-staged and Husky for our Git Hooks.",
"content": "\n\nCombine ESLint, Stylelint, Prettier, and lint-staged to format code.\n\n{\n\t\"scripts\": {\n\t\t\"lint\": \"eslint .\",\n\t},\n\n\t// ...\n\n\t\"lint-staged\": {\n\t\t\"*.{js,ts,svelte}\": \"eslint --cache --fix\",\n\t\t\"*.css\": \"stylelint --fix\",\n\t\t\"*.{js,css,md,ts,svelte,css,scss,json}\": \"prettier --write\"\n\t}\n}\n\n#!/bin/sh\n. \"$(dirname \"$0\")/_/husky.sh\"\n\ncurrent_branch=$(git branch --show-current)\n\nif [ \"$current_branch\" = \"main\" ]; then\n echo \"Error: You cannot commit directly to main branch!\"\n exit 1\nfi\n\nnpx lint-staged\n\nnpm run lint\n",
"heading": "pre-commit"
},
{
"path": "git-hooks#pre-push",
"title": "Git Hooks",
"description": "We use lint-staged and Husky for our Git Hooks.",
"content": "\n\nPerform TypeScript type checking, run tests with Vitest, and finally check for conflicts.\n\n{\n\t\"scripts\": {\n\t\t\"check\": \"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json\",\n\t\t\"test:unit:run\": \"vitest run\",\n\t\t\"typecheck\": \"tsc --noEmit\"\n\t}\n}\n\n#!/bin/sh\n. \"$(dirname \"$0\")/_/husky.sh\"\n\nnpm run typecheck\nnpm run check\n\nnpm run test:unit:run\n\ngit fetch origin\ngit merge --no-commit --no-ff origin/main\ngit reset --hard HEAD\n",
"heading": "pre-push"
},
{
"path": "git-hooks",
"title": "Git Hooks",
"description": "",
"heading": "",
"content": ""
},
{
"path": "git-hooks#installation",
"title": "Git Hooks",
"description": "",
"heading": "Installation",
"content": "Installation"
},
{
"path": "git-hooks#pre-commit",
"title": "Git Hooks",
"description": "",
"heading": "pre-commit",
"content": "pre-commit"
},
{
"path": "git-hooks#pre-push",
"title": "Git Hooks",
"description": "",
"heading": "pre-push",
"content": "pre-push"
},
{
"path": "git-hooks",
"title": "Git Hooks",
"description": "",
"heading": "",
"content": "Git Hooks"
},
{
"path": "git-branches-and-commits",
"title": "Git Branches and Commits",
"description": "Write the issue number and issue title in kebab-case, connected with a hyphen.",
"content": "",
"heading": ""
},
{
"path": "git-branches-and-commits#branching-strategy",
"title": "Git Branches and Commits",
"description": "Write the issue number and issue title in kebab-case, connected with a hyphen.",
"content": "\n\nAt first, we employed git-flow and managed multiple branches such as develop, feature, release, hotfix, and master. However, after years of operation and trial and error, we now simply use only the main branch as the integration branch and topic branches.\n",
"heading": "Branching Strategy"
},
{
"path": "git-branches-and-commits#git-branch-naming-conventions",
"title": "Git Branches and Commits",
"description": "Write the issue number and issue title in kebab-case, connected with a hyphen.",
"content": "\n\nWrite the issue number and issue title in kebab-case, connected with a hyphen.\n\n743-git-branches-and-commits\n",
"heading": "Git branch naming conventions"
},
{
"path": "git-branches-and-commits#script",
"title": "Git Branches and Commits",
"description": "Write the issue number and issue title in kebab-case, connected with a hyphen.",
"content": "\n\nWe have prepared a script to create branches issue names.\n\nnpm run branch \" #\"\n\nexample:\n\nnpm run branch \"Correct English #990\"\n",
"heading": "Script"
},
{
"path": "git-branches-and-commits#commit-message-conventions",
"title": "Git Branches and Commits",
"description": "Write the issue number and issue title in kebab-case, connected with a hyphen.",
"content": "\n\nInclude the issue title and issue number.\n\nGit Branches and Commits #743\n\nIf there are multiple commits in the same branch, provide additional details.\n\nGit Branches and Commits #743 Update docs\n",
"heading": "Commit message conventions"
},
{
"path": "git-branches-and-commits",
"title": "Git Branches and Commits",
"description": "",
"heading": "",
"content": ""
},
{
"path": "git-branches-and-commits#branching-strategy",
"title": "Git Branches and Commits",
"description": "",
"heading": "Branching Strategy",
"content": "Branching Strategy"
},
{
"path": "git-branches-and-commits#git-branch-naming-conventions",
"title": "Git Branches and Commits",
"description": "",
"heading": "Git branch naming conventions",
"content": "Git branch naming conventions"
},
{
"path": "git-branches-and-commits#script",
"title": "Git Branches and Commits",
"description": "",
"heading": "Script",
"content": "Script"
},
{
"path": "git-branches-and-commits#commit-message-conventions",
"title": "Git Branches and Commits",
"description": "",
"heading": "Commit message conventions",
"content": "Commit message conventions"
},
{
"path": "git-branches-and-commits",
"title": "Git Branches and Commits",
"description": "",
"heading": "",
"content": "Git Branches and Commits"
},
{
"path": "playwright",
"title": "Playwright",
"description": "How we automate our tests using Playwright. Playwright is an E2E (end-to-end) testing framework.",
"content": "\nHow we automate our tests using Playwright.\n\nPlaywright is an E2E (end-to-end) testing framework.\n",
"heading": ""
},
{
"path": "playwright#installation",
"title": "Playwright",
"description": "How we automate our tests using Playwright. Playwright is an E2E (end-to-end) testing framework.",
"content": "\n\n$ npm init playwright@latest\n\nGetting started with writing end-to-end tests with Playwright:\nInitializing project in '.'\n✔ Where to put your end-to-end tests? · tests\n✔ Add a GitHub Actions workflow? (y/N) · N\n✔ Install Playwright browsers (can be done manually via 'npx playwright install')? (Y/n) · Y\n",
"heading": "Installation"
},
{
"path": "playwright#file-name",
"title": "Playwright",
"description": "How we automate our tests using Playwright. Playwright is an E2E (end-to-end) testing framework.",
"content": "\n\nCreate a tests directory, and name the files as \\*.spec.ts.\n",
"heading": "File Name"
},
{
"path": "playwright#configuration",
"title": "Playwright",
"description": "How we automate our tests using Playwright. Playwright is an E2E (end-to-end) testing framework.",
"content": "\nBasic changes\n\nChange the test directory, timeout duration, and other settings as needed.\n\nConfigure the reporter, and output videos when an error occurs.\n\nconst config: PlaywrightTestConfig = {\n\treporter: 'html',\n\tuse: {\n\t\tvideo: 'retain-on-failure',\n\t},\n}\n\nPlaywright - TestConfig >\n\nTarget Browsers\n\nEnsure that tests are not run on browsers where testing is not necessary.\n\nconst config: PlaywrightTestConfig = {\n\tprojects: [\n\t\t{\n\t\t\tname: 'chromium',\n\t\t\tuse: {\n\t\t\t\t...devices['Desktop Chrome'],\n\t\t\t},\n\t\t},\n\n\t\t// {\n\t\t// name: 'firefox',\n\t\t// use: {\n\t\t// ...devices['Desktop Firefox'],\n\t\t// },\n\t\t// },\n\n\t\t// ...\n\t],\n}\n\nWeb Server\n\nTo perform tests quickly, use a development server.\n\nconst config: PlaywrightTestConfig = {\n\twebServer: {\n\t\tcommand: 'npm run dev',\n\t\tport: 5173,\n\t\treuseExistingServer: !process.env.CI,\n\t},\n\t// webServer: {\n\t// \tcommand: 'npm run build && npm run preview',\n\t// \tport: 4173,\n\t// },\n}\n\nMore information >\n\nSetup\n\nSpecify processes to be executed beforehand, such as logging in. Add dependencies to the browser settings.\n\nconst config: PlaywrightTestConfig = {\n\tprojects: [\n\t\t{ name: 'setup', testMatch: /.*\\.setup\\.ts/ },\n\n\t\t{\n\t\t\tname: 'chromium',\n\t\t\tuse: {\n\t\t\t\t...devices['Desktop Chrome'],\n\t\t\t},\n\t\t\tdependencies: ['setup'],\n\t\t},\n\t],\n}\n",
"heading": "Configuration"
},
{
"path": "playwright#scripts",
"title": "Playwright",
"description": "How we automate our tests using Playwright. Playwright is an E2E (end-to-end) testing framework.",
"content": "\n\nWe have prepared the following scripts to execute Playwright.\n\n{\n\t\"scripts\": {\n\t\t\"test:integration\": \"playwright test\",\n\t}\n}\n",
"heading": "Scripts"
},
{
"path": "playwright#vscode-extension",
"title": "Playwright",
"description": "How we automate our tests using Playwright. Playwright is an E2E (end-to-end) testing framework.",
"content": "\n\nUse VSCode Extension for testing through VSCode.\n",
"heading": "VSCode Extension"
},
{
"path": "playwright#running-tests",
"title": "Playwright",
"description": "How we automate our tests using Playwright. Playwright is an E2E (end-to-end) testing framework.",
"content": "\n\nRunning all tests\n\nnpx playwright test\n\nRunning a single test file\n\nnpx playwright test\n\nMore Info >\n",
"heading": "Running tests"
},
{
"path": "playwright#running-codegen",
"title": "Playwright",
"description": "How we automate our tests using Playwright. Playwright is an E2E (end-to-end) testing framework.",
"content": "\n\nUse the codegen command to run the test generator followed by the URL of the website you want to generate tests for. The URL is optional and you can always run the command without it and then add the URL directly into the browser window instead.\n\nnpx playwright codegen localhost:5173\n\nMore Info >\n",
"heading": "Running Codegen"
},
{
"path": "playwright#reporters",
"title": "Playwright",
"description": "How we automate our tests using Playwright. Playwright is an E2E (end-to-end) testing framework.",
"content": "\n\nA quick way of opening the last test run report is:\n\nnpx playwright show-report\n\nMore Info >\n",
"heading": "Reporters"
},
{
"path": "playwright#locate-by-test-id",
"title": "Playwright",
"description": "How we automate our tests using Playwright. Playwright is an E2E (end-to-end) testing framework.",
"content": "\n\nTo make it easier to identify an Element from Playwright, \"data-testid\" can be used.\n\nNext Page\n\nawait page.getByTestId('next-page').click()\n\nMore Information >\n",
"heading": "Locate by test id"
},
{
"path": "playwright#sample-code",
"title": "Playwright",
"description": "How we automate our tests using Playwright. Playwright is an E2E (end-to-end) testing framework.",
"content": "\n\nimport { Page, expect, test } from '@playwright/test'\n\ntest.beforeEach(async ({ page }) => {\n\tawait page.goto('./chat', { waitUntil: 'networkidle' })\n})\n\ntest('before sign in', async ({ page }) => {\n\tawait expect(page).toHaveTitle('Talk - Sign in')\n})\n\nIn cases where common setup is needed, such as for login processes:\n\nimport { Page, expect, test } from '@playwright/test'\nimport { auth_file_path } from './lib/setup.js'\n\ntest.beforeEach(async ({ page }) => {\n\tawait page.goto('./chat', { waitUntil: 'networkidle' })\n})\n\ntest.describe('after sign in', () => {\n\ttest.use({ storageState: auth_file_path })\n\n\ttest('has title', async ({ page }) => {\n\t\tawait expect(page).toHaveTitle('Talk - Chat')\n\t})\n\n\ttest('init focus', async ({ page }) => {\n\t\tconst name = page.getByPlaceholder('Name')\n\t\tawait expect(name).toBeFocused()\n\t})\n})\n",
"heading": "Sample Code"
},
{
"path": "playwright",
"title": "Playwright",
"description": "",
"heading": "",
"content": ""
},
{
"path": "playwright#installation",
"title": "Playwright",
"description": "",
"heading": "Installation",
"content": "Installation"
},
{
"path": "playwright#file-name",
"title": "Playwright",
"description": "",
"heading": "File Name",
"content": "File Name"
},
{
"path": "playwright#configuration",
"title": "Playwright",
"description": "",
"heading": "Configuration",
"content": "Configuration"
},
{
"path": "playwright#scripts",
"title": "Playwright",
"description": "",
"heading": "Scripts",
"content": "Scripts"
},
{
"path": "playwright#vscode-extension",
"title": "Playwright",
"description": "",
"heading": "VSCode Extension",
"content": "VSCode Extension"
},
{
"path": "playwright#running-tests",
"title": "Playwright",
"description": "",
"heading": "Running tests",
"content": "Running tests"
},
{
"path": "playwright#running-codegen",
"title": "Playwright",
"description": "",
"heading": "Running Codegen",
"content": "Running Codegen"
},
{
"path": "playwright#reporters",
"title": "Playwright",
"description": "",
"heading": "Reporters",
"content": "Reporters"
},
{
"path": "playwright#locate-by-test-id",
"title": "Playwright",
"description": "",
"heading": "Locate by test id",
"content": "Locate by test id"
},
{
"path": "playwright#sample-code",
"title": "Playwright",
"description": "",
"heading": "Sample Code",
"content": "Sample Code"
},
{
"path": "playwright",
"title": "Playwright",
"description": "",
"heading": "",
"content": "Playwright"
},
{
"path": "vitest",
"title": "Vitest",
"description": "How we automate our tests using Vitest. Vitest is a testing framework designed for unit testing.",
"content": "\nHow we automate our tests using Vitest.\n\nVitest is a testing framework designed for unit testing.\n",
"heading": ""
},
{
"path": "vitest#installation",
"title": "Vitest",
"description": "How we automate our tests using Vitest. Vitest is a testing framework designed for unit testing.",
"content": "\n\nnpm install -D vitest\n",
"heading": "Installation"
},
{
"path": "vitest#file-name",
"title": "Vitest",
"description": "How we automate our tests using Vitest. Vitest is a testing framework designed for unit testing.",
"content": "\n\nIn the same directory as the file of the code to be tested is in, write test code in a file named [filename of the code to be tested].test.ts.\n",
"heading": "File Name"
},
{
"path": "vitest#options",
"title": "Vitest",
"description": "How we automate our tests using Vitest. Vitest is a testing framework designed for unit testing.",
"content": "\n\nChange the files to be included in the test run.\n\nexport default defineConfig({\n\ttest: {\n\t\tinclude: ['src/*/.{test,spec}.{js,ts}'],\n\t\tcoverage: {\n\t\t\tall: true,\n\t\t\tinclude: ['src/*/.ts'],\n\t\t\texclude: [\n\t\t\t\t'src/*/+.ts',\n\t\t\t\t'src/app.d.ts',\n\t\t\t\t'src/hooks.server.ts',\n\t\t\t\t'src/scripts/create_git_branch.ts',\n\t\t\t],\n\t\t\treporter: ['lcov', 'text'],\n\t\t},\n\t},\n})\n\nConfiguring Vitest >\n",
"heading": "Options"
},
{
"path": "vitest#scripts",
"title": "Vitest",
"description": "How we automate our tests using Vitest. Vitest is a testing framework designed for unit testing.",
"content": "\n\nWe have prepared the following scripts to execute Vitest.\n\n{\n\t\"scripts\": {\n\t\t\"test:unit\": \"vitest\",\n\t\t\"test:unit:run\": \"vitest run\",\n\t\t\"coverage\": \"vitest run --coverage\",\n\t}\n}\n",
"heading": "Scripts"
},
{
"path": "vitest#vscode-extension",
"title": "Vitest",
"description": "How we automate our tests using Vitest. Vitest is a testing framework designed for unit testing.",
"content": "\n\nUse the VSCode Extension for testing.\n",
"heading": "VSCode Extension"
},
{
"path": "vitest#sample-code",
"title": "Vitest",
"description": "How we automate our tests using Vitest. Vitest is a testing framework designed for unit testing.",
"content": "\n\nimport { expect, it } from 'vitest'\nimport { ValidId } from './valid_id'\n\nit('1', () => {\n\texpect(new ValidId(1).id).toEqual(1)\n})\n\nWhen checking thrown errors:\n\nimport { expect, it } from 'vitest'\nimport { ValidId } from './valid_id'\n\nit('NaN', () => {\n\texpect(() => new ValidId(NaN)).toThrow('id is not a number')\n})\n",
"heading": "Sample Code"
},
{
"path": "vitest#in-source-testing",
"title": "Vitest",
"description": "How we automate our tests using Vitest. Vitest is a testing framework designed for unit testing.",
"content": "\n\nif (import.meta.vitest) {\n\tconst { expect, it } = import.meta.vitest\n\n\tit('get_initial_app_locale_code', () => {\n\t\texpect(get_initial_locale_code()).toBe('en-US')\n\t})\n}\n\nexport default defineConfig({\n\tdefine: {\n\t\t'import.meta.vitest': 'undefined',\n\t},\n})\n\n{\n\t\"compilerOptions\": {\n\t\t\"types\": [\"vitest/importMeta\"]\n\t}\n}\n\nHere is the official documentation >\n",
"heading": "In-source testing"
},
{
"path": "vitest#use-test-each-when-there-are-multiple-test-data",
"title": "Vitest",
"description": "How we automate our tests using Vitest. Vitest is a testing framework designed for unit testing.",
"content": "\n\nDefine the type of your test specifications using the type keyword.\nPrepare your test data in an array format.\nUse test.each to execute tests on each item in your array of test data.\n\ntype Spec = {\n\tname: string\n\tpath: string\n\tdescription: string\n}\n\nconst specs: Spec[] = [\n\t{\n\t\tname: 'About',\n\t\tpath: './docs/10-company-information/20-about.md',\n\t\tdescription:\n\t\t\t'sinProject Inc. is an software development company in Osaka, Japan. We primarily use SvelteKit and TypeScript, but also work with other programming languages and frameworks.',\n\t},\n\t{\n\t\tname: 'Events',\n\t\tpath: './docs/10-company-information/40-events.md',\n\t\tdescription: 'Here are some of the events organized by sinProject.',\n\t},\n]\n\nit.each(specs)('generate_page_content($name)', async (spec) => {\n\tconst { name, path, description, content } = spec\n\tconst result = await Markdown.generate_page_content(path)\n\n\texpect(result.title).toBe(name)\n\texpect(result.description).toBe(description)\n})\n",
"heading": "Use test.each when there are multiple test data"
},
{
"path": "vitest",
"title": "Vitest",
"description": "",
"heading": "",
"content": ""
},
{
"path": "vitest#installation",
"title": "Vitest",
"description": "",
"heading": "Installation",
"content": "Installation"
},
{
"path": "vitest#file-name",
"title": "Vitest",
"description": "",
"heading": "File Name",
"content": "File Name"
},
{
"path": "vitest#options",
"title": "Vitest",
"description": "",
"heading": "Options",
"content": "Options"
},
{
"path": "vitest#scripts",
"title": "Vitest",
"description": "",
"heading": "Scripts",
"content": "Scripts"
},
{
"path": "vitest#vscode-extension",
"title": "Vitest",
"description": "",
"heading": "VSCode Extension",
"content": "VSCode Extension"
},
{
"path": "vitest#sample-code",
"title": "Vitest",
"description": "",
"heading": "Sample Code",
"content": "Sample Code"
},
{
"path": "vitest#in-source-testing",
"title": "Vitest",
"description": "",
"heading": "In-source testing",
"content": "In-source testing"
},
{
"path": "vitest#use-test-each-when-there-are-multiple-test-data",
"title": "Vitest",
"description": "",
"heading": "Use test.each when there are multiple test data",
"content": "Use test.each when there are multiple test data"
},
{
"path": "vitest",
"title": "Vitest",
"description": "",
"heading": "",
"content": "Vitest"
},
{
"path": "stylelint",
"title": "Stylelint",
"description": "How we use Stylelint to automate formatting for CSS.",
"content": "\nHow we use Stylelint to automate formatting for CSS.\n",
"heading": ""
},
{
"path": "stylelint#installation",
"title": "Stylelint",
"description": "How we use Stylelint to automate formatting for CSS.",
"content": "\n\nnpm i stylelint --save-dev\nnpm i stylelint-config-standard --save-dev\n",
"heading": "Installation"
},
{
"path": "stylelint#configuration",
"title": "Stylelint",
"description": "How we use Stylelint to automate formatting for CSS.",
"content": "\n\n{\n\t\"extends\": [\"stylelint-config-standard\"],\n\t\"rules\": {\n\t\t\"at-rule-no-unknown\": [\n\t\t\ttrue,\n\t\t\t{\n\t\t\t\t\"ignoreAtRules\": [\"extends\", \"tailwind\"]\n\t\t\t}\n\t\t]\n\t}\n}\n",
"heading": "Configuration"
},
{
"path": "stylelint",
"title": "Stylelint",
"description": "",
"heading": "",
"content": ""
},
{
"path": "stylelint#installation",
"title": "Stylelint",
"description": "",
"heading": "Installation",
"content": "Installation"
},
{
"path": "stylelint#configuration",
"title": "Stylelint",
"description": "",
"heading": "Configuration",
"content": "Configuration"
},
{
"path": "stylelint",
"title": "Stylelint",
"description": "",
"heading": "",
"content": "Stylelint"
},
{
"path": "eslint",
"title": "ESLint",
"description": "How we define code style using ESLint.",
"content": "\nHow we define code style using ESLint.\n",
"heading": ""
},
{
"path": "eslint#plugins",
"title": "ESLint",
"description": "How we define code style using ESLint.",
"content": "\n\nInstall:\n\nnpm i eslint-plugin-prettier -D\n\nAdd prettier on plugins section:\n\nmodule.exports = {\n\tplugins: ['@typescript-eslint', 'prettier'],\n}\n",
"heading": "Plugins"
},
{
"path": "eslint#base-rules",
"title": "ESLint",
"description": "How we define code style using ESLint.",
"content": "\n\nMake accessibility and return type mandatory.\nProhibit console output.\n\nmodule.exports = {\n\trules: {\n\t\t'prettier/prettier': 'error',\n\t\tindent: ['error', 'tab', { SwitchCase: 1, ignoredNodes: ['ConditionalExpression'] }],\n\t\tsemi: ['error', 'never', { beforeStatementContinuationChars: 'never' }],\n\t\t'no-unexpected-multiline': 'error',\n\t\t'@typescript-eslint/explicit-member-accessibility': ['error'],\n\t\t'@typescript-eslint/explicit-function-return-type': ['error'],\n\t\t'no-var': 'error',\n\t\t'no-console': ['error'],\n\t},\n}\n\ntypescript-eslint - explicit-member-accessibility >\n\ntypescript-eslint - explicit-function-return-type >\n\nESLint - no-console >\n",
"heading": "Base Rules"
},
{
"path": "eslint#padding-line-between-statements",
"title": "ESLint",
"description": "How we define code style using ESLint.",
"content": "\n\nInsert blank lines where appropriate as needed.\nThis rule will also be applied to the format.\n\nmodule.exports = {\n\trules: {\n\t\t// 'lines-between-class-members': ['warn', 'always', { exceptAfterSingleLine: true }],\n\t\t'@typescript-eslint/lines-between-class-members': [\n\t\t\t'error',\n\t\t\t'always',\n\t\t\t{ exceptAfterSingleLine: true, exceptAfterOverload: true },\n\t\t],\n\t\t'padding-line-between-statements': [\n\t\t\t'error',\n\t\t\t{\n\t\t\t\tblankLine: 'always',\n\t\t\t\tprev: '*',\n\t\t\t\tnext: ['export', 'const', 'let', 'return', 'multiline-block-like', 'multiline-expression'],\n\t\t\t},\n\n\t\t\t{ blankLine: 'any', prev: 'export', next: 'export' },\n\t\t\t{ blankLine: 'any', prev: 'const', next: 'const' },\n\t\t\t{ blankLine: 'any', prev: 'let', next: 'let' },\n\t\t],\n\t},\n}\n",
"heading": "Padding line between statements"
},
{
"path": "eslint#naming-conventions",
"title": "ESLint",
"description": "How we define code style using ESLint.",
"content": "\n\nEnforce naming conventions for everything across a codebase.\n\nDefine variable names, argument names, and function names with snake_case.\nPrefix private variables with an underscore.\n\nmodule.exports = {\n\trules: {\n\t\t'@typescript-eslint/naming-convention': [\n\t\t\t'error',\n\t\t\t{\n\t\t\t\tselector: 'typeParameter',\n\t\t\t\tformat: ['UPPER_CASE'],\n\t\t\t},\n\t\t\t{\n\t\t\t\tselector: ['class', 'interface', 'typeAlias'],\n\t\t\t\tformat: ['PascalCase'],\n\t\t\t},\n\t\t\t{\n\t\t\t\tselector: ['method', 'function'],\n\t\t\t\tmodifiers: ['private'],\n\t\t\t\tformat: ['snake_case'],\n\t\t\t\tleadingUnderscore: 'require',\n\t\t\t},\n\t\t\t{\n\t\t\t\tselector: ['method', 'function'],\n\t\t\t\tmodifiers: ['protected'],\n\t\t\t\tformat: ['snake_case'],\n\t\t\t\tleadingUnderscore: 'require',\n\t\t\t},\n\t\t\t{\n\t\t\t\tselector: ['method', 'function'],\n\t\t\t\tformat: ['snake_case'],\n\t\t\t\t// format: ['snake_case', 'camelCase'],\n\t\t\t},\n\t\t\t{\n\t\t\t\tselector: [\n\t\t\t\t\t'property',\n\t\t\t\t\t'accessor',\n\t\t\t\t\t'parameter',\n\t\t\t\t\t'parameterProperty',\n\t\t\t\t\t'variable',\n\t\t\t\t\t'enumMember',\n\t\t\t\t],\n\t\t\t\tmodifiers: ['private'],\n\t\t\t\tformat: ['snake_case'],\n\t\t\t\tleadingUnderscore: 'require',\n\t\t\t},\n\t\t\t{\n\t\t\t\tselector: [\n\t\t\t\t\t'property',\n\t\t\t\t\t'accessor',\n\t\t\t\t\t'parameter',\n\t\t\t\t\t'parameterProperty',\n\t\t\t\t\t'variable',\n\t\t\t\t\t'enumMember',\n\t\t\t\t],\n\t\t\t\tmodifiers: ['protected'],\n\t\t\t\tformat: ['snake_case'],\n\t\t\t\tleadingUnderscore: 'require',\n\t\t\t},\n\t\t\t{\n\t\t\t\tselector: ['accessor', 'parameter', 'parameterProperty', 'enumMember'],\n\t\t\t\tformat: ['snake_case'],\n\t\t\t},\n\t\t\t{\n\t\t\t\tselector: ['property'],\n\t\t\t\tformat: ['snake_case', 'camelCase'],\n\t\t\t},\n\t\t\t{\n\t\t\t\tselector: ['variable'],\n\t\t\t\tformat: ['snake_case', 'UPPER_CASE'],\n\t\t\t},\n\t\t],\n\t},\n}\n",
"heading": "Naming conventions"
},
{
"path": "eslint#overrides",
"title": "ESLint",
"description": "How we define code style using ESLint.",
"content": "\n\nDisable some rules for .cjs files.\n\nmodule.exports = {\n\toverrides: [\n\t\t{\n\t\t\tfiles: '*.cjs',\n\t\t\trules: {\n\t\t\t\t'@typescript-eslint/no-var-requires': 'off',\n\t\t\t\t'@typescript-eslint/naming-convention': 'off',\n\t\t\t},\n\t\t},\n\t],\n}\n",
"heading": "Overrides"
},
{
"path": "eslint#using-eslint-with-svelte",
"title": "ESLint",
"description": "How we define code style using ESLint.",
"content": "\n\n{\n\t\"eslint.probe\": [\n\t\t...\n\t\t\"svelte\"\n\t],\n\t\"eslint.validate\": [\"svelte\"],\n}\n",
"heading": "Using ESLint with Svelte"
},
{
"path": "eslint#formatting",
"title": "ESLint",
"description": "How we define code style using ESLint.",
"content": "\n\nWe have changed our policy to format with ESLint.\n\nEnable format on save and paste events.\nUse ESLint to format TypeScript, JavaScript, HTML, and Svelte files.\n\n{\n\t\"editor.formatOnSave\": true,\n\t\"editor.formatOnPaste\": true,\n\t\"eslint.format.enable\": true,\n\t\"[typescript]\": {\n\t\t\"editor.defaultFormatter\": \"dbaeumer.vscode-eslint\"\n\t},\n\t\"[javascript]\": {\n\t\t\"editor.defaultFormatter\": \"dbaeumer.vscode-eslint\"\n\t},\n\t\"[html]\": {\n\t\t\"editor.defaultFormatter\": \"dbaeumer.vscode-eslint\"\n\t},\n\t\"[svelte]\": {\n\t\t\"editor.defaultFormatter\": \"dbaeumer.vscode-eslint\"\n\t},\n\t\"[css]\": {\n\t\t\"editor.defaultFormatter\": \"vscode.css-language-features\"\n\t},\n\t\"[json]\": {\n\t\t\"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n\t},\n}\n",
"heading": "Formatting"
},
{
"path": "eslint#change-scripts",
"title": "ESLint",
"description": "How we define code style using ESLint.",
"content": "\n\nChange the lint and format scripts.\n\n{\n\t\"scripts\": {\n\t\t\"lint\": \"eslint .\",\n\t\t\"format\": \"eslint . --fix\",\n\t}\n}\n",
"heading": "Change Scripts"
},
{
"path": "eslint#missing-return-type-on-function-in-the-html-part-of-svelte",
"title": "ESLint",
"description": "How we define code style using ESLint.",
"content": "\n\nIn the HTML part of Svelte, if \"Missing return type on function\" is displayed, add an eslint-disable line at the bottom of the script block.\n\n\n\t...\n\n\t/* eslint-disable @typescript-eslint/explicit-function-return-type */\n\n\n on_click_button(text)} />\n",
"heading": "Missing return type on function in the HTML part of Svelte"
},
{
"path": "eslint",
"title": "ESLint",
"description": "",
"heading": "",
"content": ""
},
{
"path": "eslint#plugins",
"title": "ESLint",
"description": "",
"heading": "Plugins",
"content": "Plugins"
},
{
"path": "eslint#base-rules",
"title": "ESLint",
"description": "",
"heading": "Base Rules",
"content": "Base Rules"
},
{
"path": "eslint#padding-line-between-statements",
"title": "ESLint",
"description": "",
"heading": "Padding line between statements",
"content": "Padding line between statements"
},
{
"path": "eslint#naming-conventions",
"title": "ESLint",
"description": "",
"heading": "Naming conventions",
"content": "Naming conventions"
},
{
"path": "eslint#overrides",
"title": "ESLint",
"description": "",
"heading": "Overrides",
"content": "Overrides"
},
{
"path": "eslint#using-eslint-with-svelte",
"title": "ESLint",
"description": "",
"heading": "Using ESLint with Svelte",
"content": "Using ESLint with Svelte"
},
{
"path": "eslint#formatting",
"title": "ESLint",
"description": "",
"heading": "Formatting",
"content": "Formatting"
},
{
"path": "eslint#change-scripts",
"title": "ESLint",
"description": "",
"heading": "Change Scripts",
"content": "Change Scripts"
},
{
"path": "eslint#missing-return-type-on-function-in-the-html-part-of-svelte",
"title": "ESLint",
"description": "",
"heading": "Missing return type on function in the HTML part of Svelte",
"content": "Missing return type on function in the HTML part of Svelte"
},
{
"path": "eslint",
"title": "ESLint",
"description": "",
"heading": "",
"content": "ESLint"
},
{
"path": "prettier",
"title": "Prettier",
"description": "How we use Prettier to automate formatting.",
"content": "\nHow we use Prettier to automate formatting.\n",
"heading": ""
},
{
"path": "prettier#configuration",
"title": "Prettier",
"description": "How we use Prettier to automate formatting.",
"content": "\n\nWhen creating a SvelteKit project, modify the following items in the generated .prettierrc file:\n\n{\n\t\"trailingComma\": \"es5\",\n\t\"semi\": false\n}\n",
"heading": "Configuration"
},
{
"path": "prettier#formatting",
"title": "Prettier",
"description": "How we use Prettier to automate formatting.",
"content": "\n\nWe have changed our policy to format with ESLint.\n",
"heading": "Formatting"
},
{
"path": "prettier",
"title": "Prettier",
"description": "",
"heading": "",
"content": ""
},
{
"path": "prettier#configuration",
"title": "Prettier",
"description": "",
"heading": "Configuration",
"content": "Configuration"
},
{
"path": "prettier#formatting",
"title": "Prettier",
"description": "",
"heading": "Formatting",
"content": "Formatting"
},
{
"path": "prettier",
"title": "Prettier",
"description": "",
"heading": "",
"content": "Prettier"
},
{
"path": "tsconfig",
"title": "TypeScript Config",
"description": "How we modify our TypeScript code style with tsconfig.json.",
"content": "\nHow we modify our TypeScript code style with tsconfig.json.\n",
"heading": ""
},
{
"path": "tsconfig#tsconfig",
"title": "TypeScript Config",
"description": "How we modify our TypeScript code style with tsconfig.json.",
"content": "\n\nSet strict to true, and further increase strictness by modifying the following options:\n\nallowUnreachableCode\nexactOptionalPropertyTypes\nnoImplicitOverride\nnoImplicitReturns\nnoFallthroughCasesInSwitch\n\n{\n\t\"extends\": \"./.svelte-kit/tsconfig.json\",\n\t\"compilerOptions\": {\n\t\t\"strict\": true,\n\n\t\t\"allowUnusedLabels\": false,\n\t\t\"allowUnreachableCode\": false,\n\t\t\"exactOptionalPropertyTypes\": true,\n\t\t\"noFallthroughCasesInSwitch\": true,\n\t\t\"noImplicitOverride\": true,\n\t\t\"noImplicitReturns\": true,\n\t\t\"noPropertyAccessFromIndexSignature\": true,\n\t\t\"noUncheckedIndexedAccess\": true,\n\t\t\"noUnusedLocals\": true,\n\t\t\"noUnusedParameters\": true,\n\n\t\t\"isolatedModules\": true,\n\t}\n}\n",
"heading": "TSConfig"
},
{
"path": "tsconfig",
"title": "TypeScript Config",
"description": "",
"heading": "",
"content": ""
},
{
"path": "tsconfig#tsconfig",
"title": "TypeScript Config",
"description": "",
"heading": "TSConfig",
"content": "TSConfig"
},
{
"path": "tsconfig",
"title": "TypeScript Config",
"description": "",
"heading": "",
"content": "TypeScript Config"
},
{
"path": "comments",
"title": "Comments",
"description": "This is a guide to producing readable, reusable, and refactorable software for TypeScript.",
"content": "",
"heading": ""
},
{
"path": "comments#prefer-self-explanatory-code-instead-of-comments",
"title": "Comments",
"description": "This is a guide to producing readable, reusable, and refactorable software for TypeScript.",
"content": "\n\n// Check if subscription is active.\nif (subscription.end_date > Date.now) {\n\t/* ... */\n}\n\nconst is_subscription_active = subscription.end_date > Date.now\n\nif (is_subscription_active) {\n /* ... */\n}\n",
"heading": "Prefer self explanatory code instead of comments"
},
{
"path": "comments#don-t-leave-commented-out-code-in-your-codebase",
"title": "Comments",
"description": "This is a guide to producing readable, reusable, and refactorable software for TypeScript.",
"content": "\n\ndo_stuff()\n// doOtherStuff()\n// doSomeMoreStuff()\n// doSoMuchStuff()\n\ndo_stuff()\n",
"heading": "Don't leave commented out code in your codebase"
},
{
"path": "comments#don-t-have-journal-comments",
"title": "Comments",
"description": "This is a guide to producing readable, reusable, and refactorable software for TypeScript.",
"content": "\n\n/**\n 2016-12-20: Removed monads, didn't understand them (RM)\n 2016-10-01: Improved using special monads (JP)\n 2016-02-03: Removed type-checking (LI)\n 2015-03-14: Added combine with type-checking (JR)\n */\nfunction combine(a: number, b: number): number {\n return a + b\n}\n\nfunction combine(a: number, b: number): number {\n return a + b\n}\n",
"heading": "Don't have journal comments"
},
{
"path": "comments",
"title": "Comments",
"description": "",
"heading": "",
"content": ""
},
{
"path": "comments#prefer-self-explanatory-code-instead-of-comments",
"title": "Comments",
"description": "",
"heading": "Prefer self explanatory code instead of comments",
"content": "Prefer self explanatory code instead of comments"
},
{
"path": "comments#don-t-leave-commented-out-code-in-your-codebase",
"title": "Comments",
"description": "",
"heading": "Don't leave commented out code in your codebase",
"content": "Don't leave commented out code in your codebase"
},
{
"path": "comments#don-t-have-journal-comments",
"title": "Comments",
"description": "",
"heading": "Don't have journal comments",
"content": "Don't have journal comments"
},
{
"path": "comments",
"title": "Comments",
"description": "",
"heading": "",
"content": "Comments"
},
{
"path": "error-handling",
"title": "Error handling",
"description": "This is a guide to producing readable, reusable, and refactorable software for TypeScript.",
"content": "",
"heading": ""
},
{
"path": "error-handling#always-use-error-for-throwing-or-rejecting",
"title": "Error handling",
"description": "This is a guide to producing readable, reusable, and refactorable software for TypeScript.",
"content": "\n\nfunction calculate_total(items: Item[]): number {\n throw 'Not implemented.'\n}\n\nfunction calculate_total(items: Item[]): number {\n throw new Error('Not implemented.')\n}\n",
"heading": "Always use Error for throwing or rejecting"
},
{
"path": "error-handling#don-t-ignore-caught-errors",
"title": "Error handling",
"description": "This is a guide to producing readable, reusable, and refactorable software for TypeScript.",
"content": "\n\ntry {\n function_that_might_throw()\n} catch (error) {\n console.log(error)\n}\n\ntry {\n function_that_might_throw()\n} catch (error) {\n // One option (more noisy than console.log):\n console.error(error)\n // Another option:\n notify_user_of_error(error)\n // Another option:\n report_error_to_service(error)\n // OR do all three!\n}\n",
"heading": "Don’t ignore caught errors"
},
{
"path": "error-handling",
"title": "Error handling",
"description": "",
"heading": "",
"content": ""
},
{
"path": "error-handling#always-use-error-for-throwing-or-rejecting",
"title": "Error handling",
"description": "",
"heading": "Always use Error for throwing or rejecting",
"content": "Always use Error for throwing or rejecting"
},
{
"path": "error-handling#don-t-ignore-caught-errors",
"title": "Error handling",
"description": "",
"heading": "Don’t ignore caught errors",
"content": "Don’t ignore caught errors"
},
{
"path": "error-handling",
"title": "Error handling",
"description": "",
"heading": "",
"content": "Error handling"
},
{
"path": "concurrency",
"title": "Concurrency",
"description": "This is a guide to producing readable, reusable, and refactorable software for TypeScript.",
"content": "",
"heading": ""
},
{
"path": "concurrency#use-fs-promises",
"title": "Concurrency",
"description": "This is a guide to producing readable, reusable, and refactorable software for TypeScript.",
"content": "\n\nimport fs from 'fs'\n\nconst file = fs.readFileSync(...)\n\nimport fs from 'fs'\n\nconst file = await fs.promises.readFile(...)\n",
"heading": "Use fs.promises"
},
{
"path": "concurrency#use-promises-not-callbacks",
"title": "Concurrency",
"description": "This is a guide to producing readable, reusable, and refactorable software for TypeScript.",
"content": "\n\npublic async get_hostname(): Promise {\n\tconst hostname: string[] = await new Promise((resolve) => {\n\t\tdns.reverse(this._client_address, (e, hostnames) => {\n\t\t\tif (e) {\n\t\t\t\tconsole.warn('Reverse DNS lookup failed.', e)\n\t\t\t\tresolve([])\n\t\t\t} else {\n\t\t\t\tresolve(hostnames[0])\n\t\t\t}\n\t\t})\n\t})\n\n\treturn hostname\n}\n\npublic async get_hostname(): Promise {\n\tconst reverse_dns = util.promisify(dns.reverse)\n\n\ttry {\n\t\tconst hostnames = await reverse_dns(this._client_address)\n\t\treturn hostnames[0]\n\t} catch (e) {\n\t\tconsole.warn('Reverse DNS lookup failed.', e)\n\t\treturn ''\n\t}\n}\n",
"heading": "Use Promises, not callbacks"
},
{
"path": "concurrency",
"title": "Concurrency",
"description": "",
"heading": "",
"content": ""
},
{
"path": "concurrency#use-fs-promises",
"title": "Concurrency",
"description": "",
"heading": "Use fs.promises",
"content": "Use fs.promises"
},
{
"path": "concurrency#use-promises-not-callbacks",
"title": "Concurrency",
"description": "",
"heading": "Use Promises, not callbacks",
"content": "Use Promises, not callbacks"
},
{
"path": "concurrency",
"title": "Concurrency",
"description": "",
"heading": "",
"content": "Concurrency"
},
{
"path": "classes",
"title": "Classes",
"description": "This is a guide to producing readable, reusable, and refactorable software for TypeScript.",
"content": "",
"heading": ""
},
{
"path": "classes#classes-should-be-small",
"title": "Classes",
"description": "This is a guide to producing readable, reusable, and refactorable software for TypeScript.",
"content": "\n\nclass Dashboard {\n disable(): void { /* ... */ }\n enable(): void { /* ... */ }\n getVersion(): string { /* ... */ }\n getLanguage(): string { /* ... */ }\n setLanguage(language: string): void { /* ... */ }\n // ...\n}\n\nclass Dashboard {\n disable(): void { /* ... */ }\n enable(): void { /* ... */ }\n getVersion(): string { /* ... */ }\n}\n",
"heading": "Classes should be small"
},
{
"path": "classes",
"title": "Classes",
"description": "",
"heading": "",
"content": ""
},
{
"path": "classes#classes-should-be-small",
"title": "Classes",
"description": "",
"heading": "Classes should be small",
"content": "Classes should be small"
},
{
"path": "classes",
"title": "Classes",
"description": "",
"heading": "",
"content": "Classes"
},
{
"path": "objects-and-data-structures",
"title": "Objects and Data Structures",
"description": "This is a guide to producing readable, reusable, and refactorable software for TypeScript.",
"content": "",
"heading": ""
},
{
"path": "objects-and-data-structures#make-objects-have-private-protected-members",
"title": "Objects and Data Structures",
"description": "This is a guide to producing readable, reusable, and refactorable software for TypeScript.",
"content": "\n\nclass Circle {\n public radius: number\n\n public constructor(radius: number) {\n this.radius = radius\n }\n}\n\nclass Circle {\n public constructor(private readonly _radius: number) {}\n}\n",
"heading": "Make objects have private/protected members"
},
{
"path": "objects-and-data-structures#prefix-private-members-with-an-underscore",
"title": "Objects and Data Structures",
"description": "This is a guide to producing readable, reusable, and refactorable software for TypeScript.",
"content": "\n\nclass Foo {\n private readonly bar: number\n\n private baz(): number {\n ...\n }\n}\n\nclass Foo {\n private readonly _bar: number\n\n private _baz(): number {\n ...\n }\n}\n",
"heading": "Prefix private members with an underscore"
},
{
"path": "objects-and-data-structures",
"title": "Objects and Data Structures",
"description": "",
"heading": "",
"content": ""
},
{
"path": "objects-and-data-structures#make-objects-have-private-protected-members",
"title": "Objects and Data Structures",
"description": "",
"heading": "Make objects have private/protected members",
"content": "Make objects have private/protected members"
},
{
"path": "objects-and-data-structures#prefix-private-members-with-an-underscore",
"title": "Objects and Data Structures",
"description": "",
"heading": "Prefix private members with an underscore",
"content": "Prefix private members with an underscore"
},
{
"path": "objects-and-data-structures",
"title": "Objects and Data Structures",
"description": "",
"heading": "",
"content": "Objects and Data Structures"
},
{
"path": "functions",
"title": "Functions",
"description": "This is a guide to producing readable, reusable, and refactorable software for TypeScript.",
"content": "",
"heading": ""
},
{
"path": "functions#use-early-return-pattern",
"title": "Functions",
"description": "This is a guide to producing readable, reusable, and refactorable software for TypeScript.",
"content": "\n\nfunction foo(): void {\n if (argument1.is_valid()) {\n if (argument2.is_valid()) {\n if (argument3.is_valid()) {\n // DO SOMETHING\n }\n }\n }\n}\n\nfunction foo(): void {\n if (!argument1.is_valid()) return\n if (!argument2.is_valid()) return\n if (!argument3.is_valid()) return\n\n // DO SOMETHING\n}\n",
"heading": "Use early return pattern"
},
{
"path": "functions#functions-should-do-one-thing",
"title": "Functions",
"description": "This is a guide to producing readable, reusable, and refactorable software for TypeScript.",
"content": "\n\nfunction email_clients(clients: Client[]) {\n clients.forEach((client) => {\n const client_record = database.lookup(client)\n if (client_record.is_active()) {\n email(client)\n }\n })\n}\n\nfunction email_clients(clients: Client[]) {\n clients.filter(is_active_client).forEach(email)\n}\n\nfunction is_active_client(client: Client) {\n const client_record = database.lookup(client)\n return client_record.is_active()\n}\n",
"heading": "Functions should do one thing"
},
{
"path": "functions#function-names-should-say-what-they-do",
"title": "Functions",
"description": "This is a guide to producing readable, reusable, and refactorable software for TypeScript.",
"content": "\n\nfunction add_to_date(date: Date, month: number): Date {\n // ...\n}\n\nconst date = new Date()\n\n// It's hard to tell from the function name what is added\nadd_to_date(date, 1)\n\nfunction add_month_to_date(date: Date, month: number): Date {\n // ...\n}\n\nconst date = new Date()\n\nadd_month_to_date(date, 1)\n",
"heading": "Function names should say what they do"
},
{
"path": "functions#don-t-use-flags-as-function-parameters",
"title": "Functions",
"description": "This is a guide to producing readable, reusable, and refactorable software for TypeScript.",
"content": "\n\nfunction create_file(name: string, temp: boolean) {\n if (temp) {\n fs.create(./temp/${name})\n } else {\n fs.create(name)\n }\n}\n\nfunction create_temp_file(name: string) {\n create_file(./temp/${name})\n}\n\nfunction create_file(name: string) {\n fs.create(name)\n}\n",
"heading": "Don't use flags as function parameters"
},
{
"path": "functions#avoid-negative-conditionals",
"title": "Functions",
"description": "This is a guide to producing readable, reusable, and refactorable software for TypeScript.",
"content": "\n\nfunction is_email_not_used(email: string): boolean {\n // ...\n}\n\nif (is_email_not_used(email)) {\n // ...\n}\n\nfunction is_email_used(email: string): boolean {\n // ...\n}\n\nif (!is_email_used(node)) {\n // ...\n}\n",
"heading": "Avoid negative conditionals"
},
{
"path": "functions#remove-dead-code",
"title": "Functions",
"description": "This is a guide to producing readable, reusable, and refactorable software for TypeScript.",
"content": "\n\nfunction old_request_module(url: string) {\n // ...\n}\n\nfunction request_module(url: string) {\n // ...\n}\n\nconst req = requestModule\n\nfunction request_module(url: string) {\n // ...\n}\n\nconst req = requestModule\n",
"heading": "Remove dead code"
},
{
"path": "functions",
"title": "Functions",
"description": "",
"heading": "",
"content": ""
},
{
"path": "functions#use-early-return-pattern",
"title": "Functions",
"description": "",
"heading": "Use early return pattern",
"content": "Use early return pattern"
},
{
"path": "functions#functions-should-do-one-thing",
"title": "Functions",
"description": "",
"heading": "Functions should do one thing",
"content": "Functions should do one thing"
},
{
"path": "functions#function-names-should-say-what-they-do",
"title": "Functions",
"description": "",
"heading": "Function names should say what they do",
"content": "Function names should say what they do"
},
{
"path": "functions#don-t-use-flags-as-function-parameters",
"title": "Functions",
"description": "",
"heading": "Don't use flags as function parameters",
"content": "Don't use flags as function parameters"
},
{
"path": "functions#avoid-negative-conditionals",
"title": "Functions",
"description": "",
"heading": "Avoid negative conditionals",
"content": "Avoid negative conditionals"
},
{
"path": "functions#remove-dead-code",
"title": "Functions",
"description": "",
"heading": "Remove dead code",
"content": "Remove dead code"
},
{
"path": "functions",
"title": "Functions",
"description": "",
"heading": "",
"content": "Functions"
},
{
"path": "variables",
"title": "Variables",
"description": "This is a guide to producing readable, reusable, and refactorable software for TypeScript.",
"content": "",
"heading": ""
},
{
"path": "variables#prefer-const",
"title": "Variables",
"description": "This is a guide to producing readable, reusable, and refactorable software for TypeScript.",
"content": "\n\nRequire const declarations for variables that are never reassigned after declared.\n\nlet a = 3\nconsole.log(a)\n\nconst a = 3\nconsole.log(a)\n",
"heading": "Prefer const"
},
{
"path": "variables#use-meaningful-and-pronounceable-variable-names",
"title": "Variables",
"description": "This is a guide to producing readable, reusable, and refactorable software for TypeScript.",
"content": "\n\nconst yyyymmdstr = moment().format('YYYY/MM/DD')\n\nconst formatted_current_date = moment().format('YYYY/MM/DD')\n",
"heading": "Use meaningful and pronounceable variable names"
},
{
"path": "variables#use-searchable-names",
"title": "Variables",
"description": "This is a guide to producing readable, reusable, and refactorable software for TypeScript.",
"content": "\n\n// What the heck is 86400000 for?\nsetTimeout(restart, 86400000)\n\n// Declare them as capitalized named constants.\nconst milliseconds_per_day = 60 * 60 * 24 * 1000 //86400000\n\nsetTimeout(restart, milliseconds_per_day)\n",
"heading": "Use searchable names"
},
{
"path": "variables#use-explanatory-variables",
"title": "Variables",
"description": "This is a guide to producing readable, reusable, and refactorable software for TypeScript.",
"content": "\n\nconst user_map: Map\n\nfor (const key_value of user_map) {\n\t// ...\n}\n\nconst user_map: Map\n\nfor (const [id, user] of user_map) {\n\t// ...\n}\n",
"heading": "Use explanatory variables"
},
{
"path": "variables#avoid-mental-mapping",
"title": "Variables",
"description": "This is a guide to producing readable, reusable, and refactorable software for TypeScript.",
"content": "\n\nconst c = get_count()\nconst u = get_user()\n\nconst count = get_count()\nconst user = get_user()\n",
"heading": "Avoid Mental Mapping"
},
{
"path": "variables#don-t-add-unneeded-context",
"title": "Variables",
"description": "This is a guide to producing readable, reusable, and refactorable software for TypeScript.",
"content": "\n\nconst Car = {\n car_make: \"Honda\",\n car_model: \"Accord\",\n car_color: \"Blue\"\n}\n\nfunction paint_car(car: Car, color: string): void {\n car.car_color = color\n}\n\nconst Car = {\n make: \"Honda\",\n model: \"Accord\",\n color: \"Blue\"\n}\n\nfunction paint_car(car: Car, color: string): void {\n car.color = color\n}\n",
"heading": "Don't add unneeded context"
},
{
"path": "variables#use-default-parameters-instead-of-short-circuiting-or-conditionals",
"title": "Variables",
"description": "This is a guide to producing readable, reusable, and refactorable software for TypeScript.",
"content": "\n\nfunction load_pages(count?: number) {\n const load_count = count ?? 10\n // ...\n}\n\nfunction load_pages(count: number = 10) {\n // ...\n}\n",
"heading": "Use default parameters instead of short circuiting or conditionals"
},
{
"path": "variables#use-enum-to-document-the-intent",
"title": "Variables",
"description": "This is a guide to producing readable, reusable, and refactorable software for TypeScript.",
"content": "\n\nconst GENRE = {\n ROMANTIC: 'romantic',\n DRAMA: 'drama',\n COMEDY: 'comedy',\n DOCUMENTARY: 'documentary',\n}\n\nenum genre {\n romantic,\n drama,\n comedy,\n documentary,\n}\n",
"heading": "Use enum to document the intent"
},
{
"path": "variables",
"title": "Variables",
"description": "",
"heading": "",
"content": ""
},
{
"path": "variables#prefer-const",
"title": "Variables",
"description": "",
"heading": "Prefer const",
"content": "Prefer const"
},
{
"path": "variables#use-meaningful-and-pronounceable-variable-names",
"title": "Variables",
"description": "",
"heading": "Use meaningful and pronounceable variable names",
"content": "Use meaningful and pronounceable variable names"
},
{
"path": "variables#use-searchable-names",
"title": "Variables",
"description": "",
"heading": "Use searchable names",
"content": "Use searchable names"
},
{
"path": "variables#use-explanatory-variables",
"title": "Variables",
"description": "",
"heading": "Use explanatory variables",
"content": "Use explanatory variables"
},
{
"path": "variables#avoid-mental-mapping",
"title": "Variables",
"description": "",
"heading": "Avoid Mental Mapping",
"content": "Avoid Mental Mapping"
},
{
"path": "variables#don-t-add-unneeded-context",
"title": "Variables",
"description": "",
"heading": "Don't add unneeded context",
"content": "Don't add unneeded context"
},
{
"path": "variables#use-default-parameters-instead-of-short-circuiting-or-conditionals",
"title": "Variables",
"description": "",
"heading": "Use default parameters instead of short circuiting or conditionals",
"content": "Use default parameters instead of short circuiting or conditionals"
},
{
"path": "variables#use-enum-to-document-the-intent",
"title": "Variables",
"description": "",
"heading": "Use enum to document the intent",
"content": "Use enum to document the intent"
},
{
"path": "variables",
"title": "Variables",
"description": "",
"heading": "",
"content": "Variables"
},
{
"path": "quality",
"title": "Quality",
"description": "This is a guide to producing readable, reusable, and refactorable software for TypeScript.",
"content": "",
"heading": ""
},
{
"path": "quality#achieve-exactly-what-is-being-requested",
"title": "Quality",
"description": "This is a guide to producing readable, reusable, and refactorable software for TypeScript.",
"content": "\n\nDisplay 'Hello, World!'\n\nconsole.log('Hello world!')\n\nconsole.log('Hello, World!')\n",
"heading": "Achieve exactly what is being requested"
},
{
"path": "quality#don-t-commit-code-that-cannot-be-executed",
"title": "Quality",
"description": "This is a guide to producing readable, reusable, and refactorable software for TypeScript.",
"content": "\n\nfunction foo(): void {\n console.log(Hello)\n\nfunction foo(): void {\n console.log(Hello)\n}\n",
"heading": "Don't commit code that cannot be executed"
},
{
"path": "quality#don-t-allow-code-clones",
"title": "Quality",
"description": "This is a guide to producing readable, reusable, and refactorable software for TypeScript.",
"content": "\n\nfunction check_odd_or_even(input_number: number): string {\n if (input_number % 2 == 0) {\n return ${input_number} is Even\n } else {\n return ${input_number} is Odd\n }\n}\n\nfunction check_odd_or_even(input_number: number): string {\n let result = input_number % 2 == 0 ? 'Even' : 'Odd'\n\n return ${input_number} is ${result}\n}\n",
"heading": "Don't allow code clones"
},
{
"path": "quality",
"title": "Quality",
"description": "",
"heading": "",
"content": ""
},
{
"path": "quality#achieve-exactly-what-is-being-requested",
"title": "Quality",
"description": "",
"heading": "Achieve exactly what is being requested",
"content": "Achieve exactly what is being requested"
},
{
"path": "quality#don-t-commit-code-that-cannot-be-executed",
"title": "Quality",
"description": "",
"heading": "Don't commit code that cannot be executed",
"content": "Don't commit code that cannot be executed"
},
{
"path": "quality#don-t-allow-code-clones",
"title": "Quality",
"description": "",
"heading": "Don't allow code clones",
"content": "Don't allow code clones"
},
{
"path": "quality",
"title": "Quality",
"description": "",
"heading": "",
"content": "Quality"
},
{
"path": "format",
"title": "Format",
"description": "This is a guide to producing readable, reusable, and refactorable software for TypeScript.",
"content": "",
"heading": ""
},
{
"path": "format#naming-of-files-and-directories",
"title": "Format",
"description": "This is a guide to producing readable, reusable, and refactorable software for TypeScript.",
"content": "\n\nUse snake_case.\nHowever, for things that constitute a URL, such as HTML, JavaScript, CSS files, image files, and API paths, use kebab-case.\n",
"heading": "Naming of files and directories"
},
{
"path": "format#use-single-quotes",
"title": "Format",
"description": "This is a guide to producing readable, reusable, and refactorable software for TypeScript.",
"content": "\n\nBoth double quotes and single quotes has their own pros and cons. However, achieving consistency within a project is a necessity.\n\nDelimit ordinary string literals with single quotes ('), rather than double quotes (\").\nTip: if a string contains a single quote character, consider using a template string to avoid having to escape the quote.\n\nFor more information: Google JavaScript Style Guide\n\nconsole.log(\"Hello\")\nconsole.log('World')\n\nconsole.log('Hello')\nconsole.log('World')\n",
"heading": "Use single quotes"
},
{
"path": "format#don-t-append-semicolons-at-the-end-of-lines",
"title": "Format",
"description": "This is a guide to producing readable, reusable, and refactorable software for TypeScript.",
"content": "\n\nFor more information: Don’t use Semicolons in TypeScript!\n\nconsole.log('Hello');\n\nconsole.log('Hello')\n",
"heading": "Don't append semicolons at the end of lines"
},
{
"path": "format#use-template-literals",
"title": "Format",
"description": "This is a guide to producing readable, reusable, and refactorable software for TypeScript.",
"content": "\n\nconst first_name = 'John'\nconst last_name = 'Smith'\n\nconsole.log(first_name + ' ' + last_name)\n\nconst first_name = 'John'\nconst last_name = 'Smith'\n\nconsole.log(${first_name} ${last_name})\n",
"heading": "Use template literals"
},
{
"path": "format#use-white-space-for-readability",
"title": "Format",
"description": "This is a guide to producing readable, reusable, and refactorable software for TypeScript.",
"content": "\n\nfor(let i=1;i<=10;i++){\n // ...\n}\n\nfor (let i = 0; i <= 10; i++) {\n // ...\n}\n",
"heading": "Use white space for readability"
},
{
"path": "format#use-blank-lines-for-readability",
"title": "Format",
"description": "This is a guide to producing readable, reusable, and refactorable software for TypeScript.",
"content": "\n\nfunction foo(): number {\n let sum = 0\n for (...) {\n const buz = ''\n if (...) {\n // ...\n }\n console.log(...)\n }\n return sum\n}\nfunction bar(): void {\n // ...\n}\n\nfunction foo(): void {\n let sum = 0\n\n for (...) {\n const buz = ''\n\n if (...) {\n // ...\n }\n\n console.log(...)\n }\n\n return sum\n}\n\nfunction bar(): void {\n // ...\n}\n",
"heading": "Use blank lines for readability"
},
{
"path": "format#explicit-function-return-type",
"title": "Format",
"description": "This is a guide to producing readable, reusable, and refactorable software for TypeScript.",
"content": "\n\nfunction foo() {\n // ...\n return true\n}\n\nfunction foo(): boolean {\n // ...\n return true\n}\n",
"heading": "Explicit function return type"
},
{
"path": "format#don-t-allow-unreachable-code",
"title": "Format",
"description": "This is a guide to producing readable, reusable, and refactorable software for TypeScript.",
"content": "\n\nfunction foo(): boolean {\n // ...\n return true\n console.log('Hello')\n}\n\nfunction foo(): boolean {\n // ...\n return true\n}\n",
"heading": "Don't allow unreachable code"
},
{
"path": "format#variable-names-argument-names-and-function-names-should-be-in-snake-case",
"title": "Format",
"description": "This is a guide to producing readable, reusable, and refactorable software for TypeScript.",
"content": "\n\nfunction fooBar(pageCount: number): void {\n const maxCount = 5\n // ...\n}\n\nfunction foo_bar(page_count: number): void {\n const max_count = 5\n // ...\n}\n",
"heading": "Variable names, argument names, and function names should be in snake_case"
},
{
"path": "format#explicit-member-accessibility",
"title": "Format",
"description": "This is a guide to producing readable, reusable, and refactorable software for TypeScript.",
"content": "\n\nclass Foo {\n bar(): void {\n // ...\n }\n}\n\nclass Foo {\n public bar(): void {\n // ...\n }\n}\n",
"heading": "Explicit member accessibility"
},
{
"path": "format",
"title": "Format",
"description": "",
"heading": "",
"content": ""
},
{
"path": "format#naming-of-files-and-directories",
"title": "Format",
"description": "",
"heading": "Naming of files and directories",
"content": "Naming of files and directories"
},
{
"path": "format#use-single-quotes",
"title": "Format",
"description": "",
"heading": "Use single quotes",
"content": "Use single quotes"
},
{
"path": "format#don-t-append-semicolons-at-the-end-of-lines",
"title": "Format",
"description": "",
"heading": "Don't append semicolons at the end of lines",
"content": "Don't append semicolons at the end of lines"
},
{
"path": "format#use-template-literals",
"title": "Format",
"description": "",
"heading": "Use template literals",
"content": "Use template literals"
},
{
"path": "format#use-white-space-for-readability",
"title": "Format",
"description": "",
"heading": "Use white space for readability",
"content": "Use white space for readability"
},
{
"path": "format#use-blank-lines-for-readability",
"title": "Format",
"description": "",
"heading": "Use blank lines for readability",
"content": "Use blank lines for readability"
},
{
"path": "format#explicit-function-return-type",
"title": "Format",
"description": "",
"heading": "Explicit function return type",
"content": "Explicit function return type"
},
{
"path": "format#don-t-allow-unreachable-code",
"title": "Format",
"description": "",
"heading": "Don't allow unreachable code",
"content": "Don't allow unreachable code"
},
{
"path": "format#variable-names-argument-names-and-function-names-should-be-in-snake-case",
"title": "Format",
"description": "",
"heading": "Variable names, argument names, and function names should be in snake_case",
"content": "Variable names, argument names, and function names should be in snake_case"
},
{
"path": "format#explicit-member-accessibility",
"title": "Format",
"description": "",
"heading": "Explicit member accessibility",
"content": "Explicit member accessibility"
},
{
"path": "format",
"title": "Format",
"description": "",
"heading": "",
"content": "Format"
},
{
"path": "clean-code",
"title": "Clean Code",
"description": "This is a guide to producing readable, reusable, and refactorable software for TypeScript.",
"content": "\nThis is a guide to producing readable, reusable, and refactorable software for TypeScript.\n\nThis is an adaptation of Martin's book Clean Code for our team.\n\nWe also referred to clean-code-javascript and clean-code-typescript.\n",
"heading": ""
},
{
"path": "clean-code",
"title": "Clean Code",
"description": "",
"heading": "",
"content": ""
},
{
"path": "clean-code",
"title": "Clean Code",
"description": "",
"heading": "",
"content": "Clean Code"
},
{
"path": "ttf-to-woff2",
"title": "TTF to WOFF2",
"description": "When we handle font files, we use google/woff2 to convert them to WOFF2 files.",
"content": "\nWhen we handle font files, we use google/woff2 to convert them to WOFF2 files.\n",
"heading": ""
},
{
"path": "ttf-to-woff2#woff-2-0-web-open-font-format",
"title": "TTF to WOFF2",
"description": "When we handle font files, we use google/woff2 to convert them to WOFF2 files.",
"content": "\n\nTrueType/OpenType font that provides better compression than WOFF 1.0.\n\nWOFF2 improves upon WOFF with more effective compression, reducing font file sizes by approximately 30%. This leads to faster load times, enhancing website performance. Additionally, it supports all variations of glyph, increasing its versatility.\n\nCan I use WOFF 2.0\n\nCheck browsers that support WOFF 2.0 on caniuse.com.\n",
"heading": "WOFF 2.0 - Web Open Font Format"
},
{
"path": "ttf-to-woff2#google-woff2",
"title": "TTF to WOFF2",
"description": "When we handle font files, we use google/woff2 to convert them to WOFF2 files.",
"content": "\nBuild & Run\n\nPlease refer to the GitHub of google/woff2.\n\nMake it even easier to use\n\nAdd a path to the .zshrc file to make it easier to use.\n\nexport PATH=\"$PATH:/Users/iwasakishinya/development/woff2\"\n\nHow to use\n\nMove to the path where the font file is located and execute as follows.\n\ncd ~/development/sinpro-dev/static/fonts\nwoff2_compress my_font.ttf\n",
"heading": "google/woff2"
},
{
"path": "ttf-to-woff2",
"title": "TTF to WOFF2",
"description": "",
"heading": "",
"content": ""
},
{
"path": "ttf-to-woff2#woff-2-0-web-open-font-format",
"title": "TTF to WOFF2",
"description": "",
"heading": "WOFF 2.0 - Web Open Font Format",
"content": "WOFF 2.0 - Web Open Font Format"
},
{
"path": "ttf-to-woff2#google-woff2",
"title": "TTF to WOFF2",
"description": "",
"heading": "google/woff2",
"content": "google/woff2"
},
{
"path": "ttf-to-woff2",
"title": "TTF to WOFF2",
"description": "",
"heading": "",
"content": "TTF to WOFF2"
},
{
"path": "jpg-png-to-avif",
"title": "JPG/PNG to AVIF",
"description": "When we handle image files, we use cavif-rs / Squoosh to convert them to AVIF files.",
"content": "\nWhen we handle image files, we use cavif-rs / Squoosh to convert them to AVIF files.\n",
"heading": ""
},
{
"path": "jpg-png-to-avif#avif-image-format",
"title": "JPG/PNG to AVIF",
"description": "When we handle image files, we use cavif-rs / Squoosh to convert them to AVIF files.",
"content": "\n\nA modern image format based on the AV1 video format. AVIF generally has better compression than WebP, JPEG, PNG and GIF and is designed to supersede them. AVIF competes with JPEG XL which has similar compression quality and is generally seen as more feature-rich than AVIF. (Source: caniuse.com)\n\nAVIF provides superior compression to WebP, retaining high image quality at lower file sizes. It supports up to 12-bit color depth, offers better transparency handling, and ensures efficient encoding and decoding, making it a more advanced choice.\n\nCan I use AVIF\n\nCheck browsers that support AVIF on caniuse.com.\n",
"heading": "AVIF image format"
},
{
"path": "jpg-png-to-avif#cavif-rs",
"title": "JPG/PNG to AVIF",
"description": "When we handle image files, we use cavif-rs / Squoosh to convert them to AVIF files.",
"content": "\n\ncavif-rs can be easily executed in the terminal.\n\nInstall & Run\n\nPlease refer to the GitHub of cavif-rs.\n\nHow to use\n\nMove to the path where the image file is located and execute as follows.\n\ncd ~/development/sinpro-dev/static\ncavif icon-512.png\n",
"heading": "cavif-rs"
},
{
"path": "jpg-png-to-avif#squoosh",
"title": "JPG/PNG to AVIF",
"description": "When we handle image files, we use cavif-rs / Squoosh to convert them to AVIF files.",
"content": "\n\nSquoosh is a web application. You can adjust settings while viewing the image quality on the screen.\n",
"heading": "Squoosh"
},
{
"path": "jpg-png-to-avif",
"title": "JPG/PNG to AVIF",
"description": "",
"heading": "",
"content": ""
},
{
"path": "jpg-png-to-avif#avif-image-format",
"title": "JPG/PNG to AVIF",
"description": "",
"heading": "AVIF image format",
"content": "AVIF image format"
},
{
"path": "jpg-png-to-avif#cavif-rs",
"title": "JPG/PNG to AVIF",
"description": "",
"heading": "cavif-rs",
"content": "cavif-rs"
},
{
"path": "jpg-png-to-avif#squoosh",
"title": "JPG/PNG to AVIF",
"description": "",
"heading": "Squoosh",
"content": "Squoosh"
},
{
"path": "jpg-png-to-avif",
"title": "JPG/PNG to AVIF",
"description": "",
"heading": "",
"content": "JPG/PNG to AVIF"
},
{
"path": "assets",
"title": "Assets",
"description": "We are using the assets from the following sites",
"content": "\nWe are using the assets from the following sites:\n",
"heading": ""
},
{
"path": "assets#icons",
"title": "Assets",
"description": "We are using the assets from the following sites",
"content": "\n\ntabler ICONS\nGoogle Fonts - Icons\nFreepik - Flaticon\n",
"heading": "Icons"
},
{
"path": "assets#images",
"title": "Assets",
"description": "We are using the assets from the following sites",
"content": "\n\nUnsplash\nPexels\n",
"heading": "Images"
},
{
"path": "assets#fonts",
"title": "Assets",
"description": "We are using the assets from the following sites",
"content": "\n\nDaFont\nGoogle Fonts\n",
"heading": "Fonts"
},
{
"path": "assets#illustration",
"title": "Assets",
"description": "We are using the assets from the following sites",
"content": "\n\nいらすとや\n",
"heading": "Illustration"
},
{
"path": "assets#sounds",
"title": "Assets",
"description": "We are using the assets from the following sites",
"content": "\n\npixabay\n",
"heading": "Sounds"
},
{
"path": "assets",
"title": "Assets",
"description": "",
"heading": "",
"content": ""
},
{
"path": "assets#icons",
"title": "Assets",
"description": "",
"heading": "Icons",
"content": "Icons"
},
{
"path": "assets#images",
"title": "Assets",
"description": "",
"heading": "Images",
"content": "Images"
},
{
"path": "assets#fonts",
"title": "Assets",
"description": "",
"heading": "Fonts",
"content": "Fonts"
},
{
"path": "assets#illustration",
"title": "Assets",
"description": "",
"heading": "Illustration",
"content": "Illustration"
},
{
"path": "assets#sounds",
"title": "Assets",
"description": "",
"heading": "Sounds",
"content": "Sounds"
},
{
"path": "assets",
"title": "Assets",
"description": "",
"heading": "",
"content": "Assets"
},
{
"path": "keyboard-shortcuts",
"title": "Keyboard Shortcuts",
"description": "We will introduce some keyboard shortcuts that we often use.",
"content": "\nWe will introduce some keyboard shortcuts that we often use.\n",
"heading": ""
},
{
"path": "keyboard-shortcuts#macos",
"title": "Keyboard Shortcuts",
"description": "We will introduce some keyboard shortcuts that we often use.",
"content": "\n\nLaunch Alfred : Opt + Space\nDelete : Cmd + Delete\n",
"heading": "macOS"
},
{
"path": "keyboard-shortcuts#vscode",
"title": "Keyboard Shortcuts",
"description": "We will introduce some keyboard shortcuts that we often use.",
"content": "\n\nShow All Commands: command shift P\nGo to File... : command P\nOrganize Imports : option shift O\nGo Back : control -\nGo Forward : control shift -\nClose All Editors : command K, command W\nClose Editor : command W\nSelect All Occurrences of FInd Match : command shift L\nCut (line) : command X\nNew Window : command shift N\nMove Line up / down : option ↑ / ↓\n",
"heading": "VSCode"
},
{
"path": "keyboard-shortcuts#google-chrome",
"title": "Keyboard Shortcuts",
"description": "We will introduce some keyboard shortcuts that we often use.",
"content": "\n\nDeveloper Tools : command option I\nReopen Closed Tab : command shift T\nSelect Next Tab : command →\nSelect Previous Tab : command ←\nActual Size : command 0\nZoom In : command +\nZoom Out : command -\n",
"heading": "Google Chrome"
},
{
"path": "keyboard-shortcuts#github",
"title": "Keyboard Shortcuts",
"description": "We will introduce some keyboard shortcuts that we often use.",
"content": "\n\nSubmit : command enter\n",
"heading": "GitHub"
},
{
"path": "keyboard-shortcuts",
"title": "Keyboard Shortcuts",
"description": "",
"heading": "",
"content": ""
},
{
"path": "keyboard-shortcuts#macos",
"title": "Keyboard Shortcuts",
"description": "",
"heading": "macOS",
"content": "macOS"
},
{
"path": "keyboard-shortcuts#vscode",
"title": "Keyboard Shortcuts",
"description": "",
"heading": "VSCode",
"content": "VSCode"
},
{
"path": "keyboard-shortcuts#google-chrome",
"title": "Keyboard Shortcuts",
"description": "",
"heading": "Google Chrome",
"content": "Google Chrome"
},
{
"path": "keyboard-shortcuts#github",
"title": "Keyboard Shortcuts",
"description": "",
"heading": "GitHub",
"content": "GitHub"
},
{
"path": "keyboard-shortcuts",
"title": "Keyboard Shortcuts",
"description": "",
"heading": "",
"content": "Keyboard Shortcuts"
},
{
"path": "warp",
"title": "Warp",
"description": "Warp is a blazingly fast, Rust-based terminal reimagined from the ground up to work like a modern app.",
"content": "\nWarp is a blazingly fast, Rust-based terminal reimagined from the ground up to work like a modern app.\nWe use Warp as our default terminal.\n",
"heading": ""
},
{
"path": "warp#installation",
"title": "Warp",
"description": "Warp is a blazingly fast, Rust-based terminal reimagined from the ground up to work like a modern app.",
"content": "\n\nbrew install --cask warp\n",
"heading": "Installation"
},
{
"path": "warp",
"title": "Warp",
"description": "",
"heading": "",
"content": ""
},
{
"path": "warp#installation",
"title": "Warp",
"description": "",
"heading": "Installation",
"content": "Installation"
},
{
"path": "warp",
"title": "Warp",
"description": "",
"heading": "",
"content": "Warp"
},
{
"path": "tailwind-css",
"title": "Tailwind CSS",
"description": "For designing user interfaces, we utilize Tailwind CSS.",
"content": "\nFor designing user interfaces, we utilize Tailwind CSS.\n\nThis application's frontend is also built using Tailwind CSS. It allows us to build a custom, utility-first CSS framework that is designed to be highly efficient and productive.\n",
"heading": ""
},
{
"path": "tailwind-css#tutorial",
"title": "Tailwind CSS",
"description": "For designing user interfaces, we utilize Tailwind CSS.",
"content": "\n\nThe Tailwind CSS official website offers a comprehensive documentation that acts as a tutorial for beginners. To get started with Tailwind CSS, we recommend exploring these documents first.\n",
"heading": "Tutorial"
},
{
"path": "tailwind-css#docs",
"title": "Tailwind CSS",
"description": "For designing user interfaces, we utilize Tailwind CSS.",
"content": "\n\nMore detailed information can be found in the Docs.\n",
"heading": "Docs"
},
{
"path": "tailwind-css#config",
"title": "Tailwind CSS",
"description": "For designing user interfaces, we utilize Tailwind CSS.",
"content": "\n\nBy adding the xs breakpoint, we can support devices with smaller screens like the iPhone SE.\n\nmodule.exports = {\n\tcontent: ['./src/*/.{html,js,svelte,ts}'],\n\ttheme: {\n\t\textend: {\n\t\t\tscreens: {\n\t\t\t\txs: '410px',\n\t\t\t},\n\t\t},\n\t},\n}\n\nTailwind CSS Docs\n",
"heading": "Config"
},
{
"path": "tailwind-css#install-tailwind-css-with-sveltekit",
"title": "Tailwind CSS",
"description": "For designing user interfaces, we utilize Tailwind CSS.",
"content": "\n\nSetting up Tailwind CSS in a SvelteKit project.\n",
"heading": "Install Tailwind CSS with SvelteKit"
},
{
"path": "tailwind-css",
"title": "Tailwind CSS",
"description": "",
"heading": "",
"content": ""
},
{
"path": "tailwind-css#tutorial",
"title": "Tailwind CSS",
"description": "",
"heading": "Tutorial",
"content": "Tutorial"
},
{
"path": "tailwind-css#docs",
"title": "Tailwind CSS",
"description": "",
"heading": "Docs",
"content": "Docs"
},
{
"path": "tailwind-css#config",
"title": "Tailwind CSS",
"description": "",
"heading": "Config",
"content": "Config"
},
{
"path": "tailwind-css#install-tailwind-css-with-sveltekit",
"title": "Tailwind CSS",
"description": "",
"heading": "Install Tailwind CSS with SvelteKit",
"content": "Install Tailwind CSS with SvelteKit"
},
{
"path": "tailwind-css",
"title": "Tailwind CSS",
"description": "",
"heading": "",
"content": "Tailwind CSS"
},
{
"path": "chatgpt-prompts",
"title": "ChatGPT Prompts",
"description": "We are using the following ChatGPT prompts.",
"content": "\nWe are using the following ChatGPT prompts.\n",
"heading": ""
},
{
"path": "chatgpt-prompts#coding-english",
"title": "ChatGPT Prompts",
"description": "We are using the following ChatGPT prompts.",
"content": "\nInstructions\n\nYou are a professional programmer. In this conversation, please provide the best possible answers within the following constraints:\n\nConstraints\n\nThe language is TypeScript\nThis is a web app developed with SvelteKit\nDo not explain installation procedures\nFunction names, variable names, and argument names are in snake_case. For private members, prepend an underscore to the name.\nUtilize async/await for asynchronous processing\nUse the function keyword for function declarations\n",
"heading": "Coding (English)"
},
{
"path": "chatgpt-prompts#refactoring-english",
"title": "ChatGPT Prompts",
"description": "We are using the following ChatGPT prompts.",
"content": "\n\nPlease refactor the following TypeScript code. However, do not change the existing naming conventions or coding style. If there are better names for variables or functions, feel free to update them. Do not add semicolons at the end of lines.\n",
"heading": "Refactoring (English)"
},
{
"path": "chatgpt-prompts#translating-english",
"title": "ChatGPT Prompts",
"description": "We are using the following ChatGPT prompts.",
"content": "\nInstructions\n\nYou are a professional translator. In this conversation, please provide the best possible translations.\n",
"heading": "Translating (English)"
},
{
"path": "chatgpt-prompts#coding-japanese",
"title": "ChatGPT Prompts",
"description": "We are using the following ChatGPT prompts.",
"content": "\n命令書\n\nあなたはプロのプログラマーです。今後この会話では、以下の制約条件から最高の回答をしてください。\n\n制約条件\n\n言語は TypeScript\nWeb アプリは SvelteKit で開発\nインストール手順は説明しない\n関数名、変数名、引数名の命名規則は snake_case。private の場合は名前の先頭にアンダースコアを付ける\n非同期処理は async/await を活用する\n関数宣言は function キーワードを使う\n",
"heading": "Coding (Japanese)"
},
{
"path": "chatgpt-prompts#refactoring-japanese",
"title": "ChatGPT Prompts",
"description": "We are using the following ChatGPT prompts.",
"content": "\n\n以下のTypeScriptをリファクタリングする。ただし、命名規約やコーディングスタイルは変更しない。変数名や関数名はより良い名前があれば変更する。行末にセミコロンは付けない。\n",
"heading": "Refactoring (Japanese)"
},
{
"path": "chatgpt-prompts#translating-japanese",
"title": "ChatGPT Prompts",
"description": "We are using the following ChatGPT prompts.",
"content": "\n命令書\n\nあなたはプロの翻訳者です。今後この会話では、最高の翻訳をしてください。\n",
"heading": "Translating (Japanese)"
},
{
"path": "chatgpt-prompts#how-to-phrase-a-request-to-chatgpt-in-english-japanese",
"title": "ChatGPT Prompts",
"description": "We are using the following ChatGPT prompts.",
"content": "\n\nChatGPT に指示をしたいです。以下の日本語をChatGPTに依頼する際にふさわしい英語の文章にしてください。\n",
"heading": "How to Phrase a Request to ChatGPT in English (Japanese)"
},
{
"path": "chatgpt-prompts",
"title": "ChatGPT Prompts",
"description": "",
"heading": "",
"content": ""
},
{
"path": "chatgpt-prompts#coding-english",
"title": "ChatGPT Prompts",
"description": "",
"heading": "Coding (English)",
"content": "Coding (English)"
},
{
"path": "chatgpt-prompts#refactoring-english",
"title": "ChatGPT Prompts",
"description": "",
"heading": "Refactoring (English)",
"content": "Refactoring (English)"
},
{
"path": "chatgpt-prompts#translating-english",
"title": "ChatGPT Prompts",
"description": "",
"heading": "Translating (English)",
"content": "Translating (English)"
},
{
"path": "chatgpt-prompts#coding-japanese",
"title": "ChatGPT Prompts",
"description": "",
"heading": "Coding (Japanese)",
"content": "Coding (Japanese)"
},
{
"path": "chatgpt-prompts#refactoring-japanese",
"title": "ChatGPT Prompts",
"description": "",
"heading": "Refactoring (Japanese)",
"content": "Refactoring (Japanese)"
},
{
"path": "chatgpt-prompts#translating-japanese",
"title": "ChatGPT Prompts",
"description": "",
"heading": "Translating (Japanese)",
"content": "Translating (Japanese)"
},
{
"path": "chatgpt-prompts#how-to-phrase-a-request-to-chatgpt-in-english-japanese",
"title": "ChatGPT Prompts",
"description": "",
"heading": "How to Phrase a Request to ChatGPT in English (Japanese)",
"content": "How to Phrase a Request to ChatGPT in English (Japanese)"
},
{
"path": "chatgpt-prompts",
"title": "ChatGPT Prompts",
"description": "",
"heading": "",
"content": "ChatGPT Prompts"
},
{
"path": "customize-zsh",
"title": "Customize Zsh",
"description": "Oh My Zsh is a delightful, open source, community-driven framework for managing your Zsh configuration. It comes bundled with thousands of helpful functions, helpers, plugins, themes, and a few things that make you shout...",
"content": "",
"heading": ""
},
{
"path": "customize-zsh#oh-my-zsh",
"title": "Customize Zsh",
"description": "Oh My Zsh is a delightful, open source, community-driven framework for managing your Zsh configuration. It comes bundled with thousands of helpful functions, helpers, plugins, themes, and a few things that make you shout...",
"content": "\n\nOh My Zsh is a delightful, open source, community-driven framework for managing your Zsh configuration. It comes bundled with thousands of helpful functions, helpers, plugins, themes, and a few things that make you shout... More Info >\n\nsh -c \"$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)\"\n",
"heading": "oh-my-zsh"
},
{
"path": "customize-zsh#zsh-completions",
"title": "Customize Zsh",
"description": "Oh My Zsh is a delightful, open source, community-driven framework for managing your Zsh configuration. It comes bundled with thousands of helpful functions, helpers, plugins, themes, and a few things that make you shout...",
"content": "\n\nAdditional completion definitions for Zsh. More Info >\n\nbrew install zsh-completions\n\nTo activate these completions, add the following to your .zshrc:\n\nif type brew &>/dev/null; then\n\tFPATH=$(brew --prefix)/share/zsh-completions:$FPATH\n\n\tautoload -Uz compinit\n\tcompinit\nfi\n",
"heading": "zsh-completions"
},
{
"path": "customize-zsh#zsh-autosuggestions",
"title": "Customize Zsh",
"description": "Oh My Zsh is a delightful, open source, community-driven framework for managing your Zsh configuration. It comes bundled with thousands of helpful functions, helpers, plugins, themes, and a few things that make you shout...",
"content": "\n\nIt suggests commands as you type based on history and completions. More Info >\n\nbrew install zsh-autosuggestions\n\nTo activate the autosuggestions, add the following at the end of your .zshrc:\n\nsource /opt/homebrew/share/zsh-autosuggestions/zsh-autosuggestions.zsh\n",
"heading": "zsh-autosuggestions"
},
{
"path": "customize-zsh#zsh-syntax-highlighting",
"title": "Customize Zsh",
"description": "Oh My Zsh is a delightful, open source, community-driven framework for managing your Zsh configuration. It comes bundled with thousands of helpful functions, helpers, plugins, themes, and a few things that make you shout...",
"content": "\n\nFish shell-like syntax highlighting for Zsh. More Info >\n\nbrew install zsh-syntax-highlighting\n\nyou may need to add the following to your .zshenv:\n\nexport ZSH_HIGHLIGHT_HIGHLIGHTERS_DIR=/opt/homebrew/share/zsh-syntax-highlighting/highlighters\n",
"heading": "zsh-syntax-highlighting"
},
{
"path": "customize-zsh",
"title": "Customize Zsh",
"description": "",
"heading": "",
"content": ""
},
{
"path": "customize-zsh#oh-my-zsh",
"title": "Customize Zsh",
"description": "",
"heading": "oh-my-zsh",
"content": "oh-my-zsh"
},
{
"path": "customize-zsh#zsh-completions",
"title": "Customize Zsh",
"description": "",
"heading": "zsh-completions",
"content": "zsh-completions"
},
{
"path": "customize-zsh#zsh-autosuggestions",
"title": "Customize Zsh",
"description": "",
"heading": "zsh-autosuggestions",
"content": "zsh-autosuggestions"
},
{
"path": "customize-zsh#zsh-syntax-highlighting",
"title": "Customize Zsh",
"description": "",
"heading": "zsh-syntax-highlighting",
"content": "zsh-syntax-highlighting"
},
{
"path": "customize-zsh",
"title": "Customize Zsh",
"description": "",
"heading": "",
"content": "Customize Zsh"
},
{
"path": "sveltekit",
"title": "SvelteKit",
"description": "For web application development, we utilize SvelteKit.",
"content": "\nFor web application development, we utilize SvelteKit.\n\nThis documentation app is also built using SvelteKit and TypeScript. On the server side, it examines the folder structure to generate menu data, retrieves markdown files, and applies styles using CSS within the browser.\n",
"heading": ""
},
{
"path": "sveltekit#tutorial",
"title": "SvelteKit",
"description": "For web application development, we utilize SvelteKit.",
"content": "\n\nThe SvelteKit official website offers an interactive tutorial for beginners. To get started with Svelte and SvelteKit, we recommend exploring these tutorials first.\n",
"heading": "Tutorial"
},
{
"path": "sveltekit#docs",
"title": "SvelteKit",
"description": "For web application development, we utilize SvelteKit.",
"content": "\n\nMore detailed information can be found in the Docs.\n\nSvelte Docs\nSvelteKit Docs\n",
"heading": "Docs"
},
{
"path": "sveltekit#creating-a-project",
"title": "SvelteKit",
"description": "For web application development, we utilize SvelteKit.",
"content": "\n\n$ npm create svelte@latest my-app\ncreate-svelte version 5.0.2\n┌ Welcome to SvelteKit!\n◆ Which Svelte app template?\n│ ○ SvelteKit demo app (A demo app showcasing some of the features of SvelteKit - play a word guessing game that works without JavaScript!)\n│ ● Skeleton project\n│ ○ Library project\n\n◆ Add type checking with TypeScript?\n│ ○ Yes, using JavaScript with JSDoc comments\n│ ● Yes, using TypeScript syntax\n│ ○ No\n\n◆ Select additional options (use arrow keys/space bar)\n│ ☑ Add ESLint for code linting\n│ ☑ Add Prettier for code formatting\n│ ☑ Add Playwright for browser testing\n│ ☑ Add Vitest for unit testing\n\n$ cd my-app\n$ npm install\n$ npm run dev\n",
"heading": "Creating a Project"
},
{
"path": "sveltekit",
"title": "SvelteKit",
"description": "",
"heading": "",
"content": ""
},
{
"path": "sveltekit#tutorial",
"title": "SvelteKit",
"description": "",
"heading": "Tutorial",
"content": "Tutorial"
},
{
"path": "sveltekit#docs",
"title": "SvelteKit",
"description": "",
"heading": "Docs",
"content": "Docs"
},
{
"path": "sveltekit#creating-a-project",
"title": "SvelteKit",
"description": "",
"heading": "Creating a Project",
"content": "Creating a Project"
},
{
"path": "sveltekit",
"title": "SvelteKit",
"description": "",
"heading": "",
"content": "SvelteKit"
},
{
"path": "npm-check-updates",
"title": "npm-check-updates",
"description": "pm-check-updates upgrades your package.json dependencies to the latest versions, ignoring specified versions.",
"content": "\nnpm-check-updates upgrades your package.json dependencies to the latest versions, ignoring specified versions.\n",
"heading": ""
},
{
"path": "npm-check-updates#installation",
"title": "npm-check-updates",
"description": "pm-check-updates upgrades your package.json dependencies to the latest versions, ignoring specified versions.",
"content": "\n\ninstall globally:\n\nnpm install -g npm-check-updates\n",
"heading": "Installation"
},
{
"path": "npm-check-updates#usage",
"title": "npm-check-updates",
"description": "pm-check-updates upgrades your package.json dependencies to the latest versions, ignoring specified versions.",
"content": "\n\nShow all new dependencies (excluding peerDependencies) for the project in the current directory:\n\nncu\n\nUpgrade a project's package file:\n\nncu -u\n\nonly modifies package.json file. Run npm install to update your installed packages and package-lock.json:\n\nnpm install\n\nCheck global packages:\n\nncu -g\n",
"heading": "Usage"
},
{
"path": "npm-check-updates",
"title": "npm-check-updates",
"description": "",
"heading": "",
"content": ""
},
{
"path": "npm-check-updates#installation",
"title": "npm-check-updates",
"description": "",
"heading": "Installation",
"content": "Installation"
},
{
"path": "npm-check-updates#usage",
"title": "npm-check-updates",
"description": "",
"heading": "Usage",
"content": "Usage"
},
{
"path": "npm-check-updates",
"title": "npm-check-updates",
"description": "",
"heading": "",
"content": "npm-check-updates"
},
{
"path": "global-npm-packages",
"title": "Global NPM Packages",
"description": "Installing NPM packages",
"content": "",
"heading": ""
},
{
"path": "global-npm-packages#installing-packages-globally",
"title": "Global NPM Packages",
"description": "Installing NPM packages",
"content": "\n\nnpm install -g\n",
"heading": "Installing packages globally"
},
{
"path": "global-npm-packages#checking-all-global-packages",
"title": "Global NPM Packages",
"description": "Installing NPM packages",
"content": "\n\nnpm list -g\n",
"heading": "Checking all global packages"
},
{
"path": "global-npm-packages#the-packages-we-install-globally",
"title": "Global NPM Packages",
"description": "Installing NPM packages",
"content": "\n\nnpm-check-updates\nPM2\n",
"heading": "The packages we install globally"
},
{
"path": "global-npm-packages",
"title": "Global NPM Packages",
"description": "",
"heading": "",
"content": ""
},
{
"path": "global-npm-packages#installing-packages-globally",
"title": "Global NPM Packages",
"description": "",
"heading": "Installing packages globally",
"content": "Installing packages globally"
},
{
"path": "global-npm-packages#checking-all-global-packages",
"title": "Global NPM Packages",
"description": "",
"heading": "Checking all global packages",
"content": "Checking all global packages"
},
{
"path": "global-npm-packages#the-packages-we-install-globally",
"title": "Global NPM Packages",
"description": "",
"heading": "The packages we install globally",
"content": "The packages we install globally"
},
{
"path": "global-npm-packages",
"title": "Global NPM Packages",
"description": "",
"heading": "",
"content": "Global NPM Packages"
},
{
"path": "vscode-workspace-extensions",
"title": "VSCode Workspace Extensions",
"description": "Here are the VSCode extensions that we commonly use at sinProject.",
"content": "\nHere are the VSCode extensions that we commonly use at sinProject.\n\nView our extension setting file on GitHub >\n",
"heading": ""
},
{
"path": "vscode-workspace-extensions#git",
"title": "VSCode Workspace Extensions",
"description": "Here are the VSCode extensions that we commonly use at sinProject.",
"content": "\n\nGit Graph\n\nView a Git Graph of your repository, and perform Git actions from the graph.\n\nGitHub Pull Request and Issues\n\nPull Request and Issue Provider for GitHub\n\nGitHub Actions\n\nGitHub Actions workflows and runs for github.com hosted repositories in VSCode\n",
"heading": "Git"
},
{
"path": "vscode-workspace-extensions#ai",
"title": "VSCode Workspace Extensions",
"description": "Here are the VSCode extensions that we commonly use at sinProject.",
"content": "\n\nChatGPT - Genie AI\n\nYour best AI pair programmer. Save conversations and continue any time. A Visual Studio Code - ChatGPT Integration. Supports GPT-4, GPT3.5, GPT3 and Codex models. Create new files, view diffs with one click; your copilot to learn code, add tests, find bugs and more.\n\nTabnine AI Autocomplete for Javascript, Python, Typescript, PHP, Go, Java, Ruby & more\n\nJavaScript, Python, Java, Typescript & all other languages - AI Code completion plugin. Tabnine makes developers more productive by auto-completing their code.\n",
"heading": "AI"
},
{
"path": "vscode-workspace-extensions#svelte",
"title": "VSCode Workspace Extensions",
"description": "Here are the VSCode extensions that we commonly use at sinProject.",
"content": "\n\nSvelte for VSCode\n\nSvelte language support for VSCode\n\nSvelte 3 snippets\n\nSvelte 3 Snippets for VSCode\n",
"heading": "Svelte"
},
{
"path": "vscode-workspace-extensions#css",
"title": "VSCode Workspace Extensions",
"description": "Here are the VSCode extensions that we commonly use at sinProject.",
"content": "\n\nTailwind CSS IntelliSense\n\nIntelligent Tailwind CSS tooling for VSCode\n\nCSS Peek\n\nAllow peeking to css ID and class strings as definitions from html files to respective CSS. Allows peek and goto definition.\n\nColor Highlight\n\nHighlight web colors in your editor\n",
"heading": "CSS"
},
{
"path": "vscode-workspace-extensions#html",
"title": "VSCode Workspace Extensions",
"description": "Here are the VSCode extensions that we commonly use at sinProject.",
"content": "\n\nAuto Rename Tag\n\nAuto rename paired HTML/XML tag\n\nHighlight Matching Tag\n\nHighlights matching closing and opening tags\n\nHTML Preview\n\nProvides ability to preview HTML documents.\n",
"heading": "HTML"
},
{
"path": "vscode-workspace-extensions#code-style",
"title": "VSCode Workspace Extensions",
"description": "Here are the VSCode extensions that we commonly use at sinProject.",
"content": "\n\nESLint\n\nIntegrates ESLint JavaScript into VSCode.\n\nPrettier - Code formatter\n\nCode formatter using prettier\n\nTrailing Spaces\n\nHighlight trailing spaces and delete them in a flash!\n\nCode Spell Checker\n\nSpelling checker for source code\n\n{\n\t\"cSpell.words\": [\n\t\t\"autocompletes\",\n\t\t\"autoincrement\",\n\t\t\"codegen\",\n\t\t...\n\t],\n\t\"cSpell.ignorePaths\": [\n\t\t\"**/settings.json\",\n\t\t\"**/extensions.json\",\n\t\t\"**/package.json\",\n\t\t\"**/package-lock.json\",\n\t\t\"**/yarn.lock\",\n\t\t\"/locales/.json\"\n\t]\n}\n\nStylelint\n\nOfficial Stylelint extension for Visual Studio Code\n",
"heading": "Code Style"
},
{
"path": "vscode-workspace-extensions#intellisense",
"title": "VSCode Workspace Extensions",
"description": "Here are the VSCode extensions that we commonly use at sinProject.",
"content": "\n\nPath Intellisense\n\nVisual Studio Code plugin that autocompletes filenames\n",
"heading": "Intellisense"
},
{
"path": "vscode-workspace-extensions#errors",
"title": "VSCode Workspace Extensions",
"description": "Here are the VSCode extensions that we commonly use at sinProject.",
"content": "\n\nError Lens\n\nImprove highlighting of errors, warnings and other language diagnostics.\n\nPretty TypeScript Errors\n\nMake TypeScript errors prettier and more human-readable in VSCode\n\nError Gutters\n\nShow error gutters to the right from line numbers\n",
"heading": "Errors"
},
{
"path": "vscode-workspace-extensions#testing",
"title": "VSCode Workspace Extensions",
"description": "Here are the VSCode extensions that we commonly use at sinProject.",
"content": "\n\nVitest\n\nRun and debug Vitest test cases\n\n{\n\t\"vitest.include\": [\"src/*/.{test}.ts\"]\n}\n\nPlaywright Test for VSCode\n\nRun Playwright Test tests in Visual Studio Code.\n",
"heading": "Testing"
},
{
"path": "vscode-workspace-extensions#database-management",
"title": "VSCode Workspace Extensions",
"description": "Here are the VSCode extensions that we commonly use at sinProject.",
"content": "\n\nPrisma\n\nAdds syntax highlighting, formatting, auto-completion, jump-to-definition and linting for .prisma files.\n",
"heading": "Database Management"
},
{
"path": "vscode-workspace-extensions#networking",
"title": "VSCode Workspace Extensions",
"description": "Here are the VSCode extensions that we commonly use at sinProject.",
"content": "\n\nREST Client\n\nREST Client for Visual Studio Code\n\n{\n\t\"rest-client.previewResponseInUntitledDocument\": true\n}\n\nRemote - SSH\n\nOpen any folder on a remote machine using SSH and take advantage of VS Code's full feature set.\n",
"heading": "Networking"
},
{
"path": "vscode-workspace-extensions#code-execution",
"title": "VSCode Workspace Extensions",
"description": "Here are the VSCode extensions that we commonly use at sinProject.",
"content": "\n\nCode Runner\n\nRun C, C++, Java, JS, PHP, Python, Perl, Ruby, Go, Lua, Groovy, PowerShell, CMD, BASH, F#, C#, VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml, R, AppleScript, Elixir, VB.NET, Clojure, Haxe, Obj-C, Rust, Racket, Scheme, AutoHotkey, AutoIt, Kotlin, Dart, Pascal, Haskell, Nim,\n\n{\n\t\"code-runner.executorMap\": {\n\t\t\"typescript\": \"npx tsx\"\n\t}\n}\n\nTurbo Console Log\n\nAutomating the process of writing meaningful log messages.\n",
"heading": "Code Execution"
},
{
"path": "vscode-workspace-extensions#code-quality",
"title": "VSCode Workspace Extensions",
"description": "Here are the VSCode extensions that we commonly use at sinProject.",
"content": "\n\nSonarLint\n\nLinter to detect & fix coding issues locally in JS/TS, Python, PHP, Java, C, C++, Go, IaC. Use with SonarQube & SonarCloud for optimal team performance.\n\nCodeMetrics\n\nComputes complexity in TypeScript / JavaScript files.\n\nImport Cost\n\nDisplay import/require package size in the editor\n",
"heading": "Code Quality"
},
{
"path": "vscode-workspace-extensions#markdown",
"title": "VSCode Workspace Extensions",
"description": "Here are the VSCode extensions that we commonly use at sinProject.",
"content": "\n\nMarkdown All in One\n\nAll you need to write Markdown (keyboard shortcuts, table of contents, auto preview and more)\n",
"heading": "Markdown"
},
{
"path": "vscode-workspace-extensions#theme",
"title": "VSCode Workspace Extensions",
"description": "Here are the VSCode extensions that we commonly use at sinProject.",
"content": "\n\nMaterial Icon Theme\n\nMaterial Design Icons for Visual Studio Code\n",
"heading": "Theme"
},
{
"path": "vscode-workspace-extensions#team-collaboration",
"title": "VSCode Workspace Extensions",
"description": "Here are the VSCode extensions that we commonly use at sinProject.",
"content": "\n\nLive Share\n\nReal-time collaborative development from the comfort of your favorite tools.\n",
"heading": "Team Collaboration"
},
{
"path": "vscode-workspace-extensions#highlighting",
"title": "VSCode Workspace Extensions",
"description": "Here are the VSCode extensions that we commonly use at sinProject.",
"content": "\n\nIndented Block Highlighting\n\nHighlights everything covered by the currently selected line's indentation level.\n\nIndenticator\n\nHighlights your current indent depth\n",
"heading": "Highlighting"
},
{
"path": "vscode-workspace-extensions#localization",
"title": "VSCode Workspace Extensions",
"description": "Here are the VSCode extensions that we commonly use at sinProject.",
"content": "\n\ni18n Ally\n\n🌍 All in one i18n extension for VSCode\n\n{\n\t\"i18n-ally.localesPaths\": [\"src/locales\", \"src/routes/api/languages\", \"src/routes/api/locales\"],\n\t\"i18n-ally.keystyle\": \"nested\",\n\t\"i18n-ally.displayLanguage\": \"en-US\",\n\t\"i18n-ally.sourceLanguage\": \"en-US\"\n}\n",
"heading": "Localization"
},
{
"path": "vscode-workspace-extensions#other",
"title": "VSCode Workspace Extensions",
"description": "Here are the VSCode extensions that we commonly use at sinProject.",
"content": "\n\nToDo Tree\n\nShow TODO, FIXME, etc. comment tags in a tree view\n\nBookmarks\n\nMark lines and jump to them\n\nPostCSS Language Support\n\nSyntax highlighting for modern and experimental CSS in VSCode\n",
"heading": "Other"
},
{
"path": "vscode-workspace-extensions",
"title": "VSCode Workspace Extensions",
"description": "",
"heading": "",
"content": ""
},
{
"path": "vscode-workspace-extensions#git",
"title": "VSCode Workspace Extensions",
"description": "",
"heading": "Git",
"content": "Git"
},
{
"path": "vscode-workspace-extensions#ai",
"title": "VSCode Workspace Extensions",
"description": "",
"heading": "AI",
"content": "AI"
},
{
"path": "vscode-workspace-extensions#svelte",
"title": "VSCode Workspace Extensions",
"description": "",
"heading": "Svelte",
"content": "Svelte"
},
{
"path": "vscode-workspace-extensions#css",
"title": "VSCode Workspace Extensions",
"description": "",
"heading": "CSS",
"content": "CSS"
},
{
"path": "vscode-workspace-extensions#html",
"title": "VSCode Workspace Extensions",
"description": "",
"heading": "HTML",
"content": "HTML"
},
{
"path": "vscode-workspace-extensions#code-style",
"title": "VSCode Workspace Extensions",
"description": "",
"heading": "Code Style",
"content": "Code Style"
},
{
"path": "vscode-workspace-extensions#intellisense",
"title": "VSCode Workspace Extensions",
"description": "",
"heading": "Intellisense",
"content": "Intellisense"
},
{
"path": "vscode-workspace-extensions#errors",
"title": "VSCode Workspace Extensions",
"description": "",
"heading": "Errors",
"content": "Errors"
},
{
"path": "vscode-workspace-extensions#testing",
"title": "VSCode Workspace Extensions",
"description": "",
"heading": "Testing",
"content": "Testing"
},
{
"path": "vscode-workspace-extensions#database-management",
"title": "VSCode Workspace Extensions",
"description": "",
"heading": "Database Management",
"content": "Database Management"
},
{
"path": "vscode-workspace-extensions#networking",
"title": "VSCode Workspace Extensions",
"description": "",
"heading": "Networking",
"content": "Networking"
},
{
"path": "vscode-workspace-extensions#code-execution",
"title": "VSCode Workspace Extensions",
"description": "",
"heading": "Code Execution",
"content": "Code Execution"
},
{
"path": "vscode-workspace-extensions#code-quality",
"title": "VSCode Workspace Extensions",
"description": "",
"heading": "Code Quality",
"content": "Code Quality"
},
{
"path": "vscode-workspace-extensions#markdown",
"title": "VSCode Workspace Extensions",
"description": "",
"heading": "Markdown",
"content": "Markdown"
},
{
"path": "vscode-workspace-extensions#theme",
"title": "VSCode Workspace Extensions",
"description": "",
"heading": "Theme",
"content": "Theme"
},
{
"path": "vscode-workspace-extensions#team-collaboration",
"title": "VSCode Workspace Extensions",
"description": "",
"heading": "Team Collaboration",
"content": "Team Collaboration"
},
{
"path": "vscode-workspace-extensions#highlighting",
"title": "VSCode Workspace Extensions",
"description": "",
"heading": "Highlighting",
"content": "Highlighting"
},
{
"path": "vscode-workspace-extensions#localization",
"title": "VSCode Workspace Extensions",
"description": "",
"heading": "Localization",
"content": "Localization"
},
{
"path": "vscode-workspace-extensions#other",
"title": "VSCode Workspace Extensions",
"description": "",
"heading": "Other",
"content": "Other"
},
{
"path": "vscode-workspace-extensions",
"title": "VSCode Workspace Extensions",
"description": "",
"heading": "",
"content": "VSCode Workspace Extensions"
},
{
"path": "vscode-workspace-settings",
"title": "VSCode Workspace Settings",
"description": "Here are the VSCode workspace settings that we commonly use at sinProject.",
"content": "\nHere are the VSCode workspace settings that we commonly use at sinProject.\n",
"heading": ""
},
{
"path": "vscode-workspace-settings#tab-size",
"title": "VSCode Workspace Settings",
"description": "Here are the VSCode workspace settings that we commonly use at sinProject.",
"content": "\n\n{\n\t\"editor.tabSize\": 2\n}\n",
"heading": "Tab Size"
},
{
"path": "vscode-workspace-settings#bracket-pairs",
"title": "VSCode Workspace Settings",
"description": "Here are the VSCode workspace settings that we commonly use at sinProject.",
"content": "\n\nShow lines connecting pairs of brackets\n\n{\n\t\"editor.guides.bracketPairs\": true\n}\n",
"heading": "Bracket Pairs"
},
{
"path": "vscode-workspace-settings#minimap",
"title": "VSCode Workspace Settings",
"description": "Here are the VSCode workspace settings that we commonly use at sinProject.",
"content": "\n\nHide Minimap\n\n{\n\t\"editor.minimap.enabled\": false\n}\n",
"heading": "Minimap"
},
{
"path": "vscode-workspace-settings#the-default-end-of-line-character",
"title": "VSCode Workspace Settings",
"description": "Here are the VSCode workspace settings that we commonly use at sinProject.",
"content": "\n\nWhen creating a new file on Windows, you can specify the line break code as LF (Line Feed).\n\n{\n\t\"files.eol\": \"\\n\"\n}\n",
"heading": "The default end of line character"
},
{
"path": "vscode-workspace-settings",
"title": "VSCode Workspace Settings",
"description": "",
"heading": "",
"content": ""
},
{
"path": "vscode-workspace-settings#tab-size",
"title": "VSCode Workspace Settings",
"description": "",
"heading": "Tab Size",
"content": "Tab Size"
},
{
"path": "vscode-workspace-settings#bracket-pairs",
"title": "VSCode Workspace Settings",
"description": "",
"heading": "Bracket Pairs",
"content": "Bracket Pairs"
},
{
"path": "vscode-workspace-settings#minimap",
"title": "VSCode Workspace Settings",
"description": "",
"heading": "Minimap",
"content": "Minimap"
},
{
"path": "vscode-workspace-settings#the-default-end-of-line-character",
"title": "VSCode Workspace Settings",
"description": "",
"heading": "The default end of line character",
"content": "The default end of line character"
},
{
"path": "vscode-workspace-settings",
"title": "VSCode Workspace Settings",
"description": "",
"heading": "",
"content": "VSCode Workspace Settings"
},
{
"path": "chrome-extensions",
"title": "Chrome Extensions",
"description": "Here are the Chrome extensions that we commonly use at sinProject.",
"content": "\nHere are the Chrome extensions that we commonly use at sinProject.\n",
"heading": ""
},
{
"path": "chrome-extensions#extensions",
"title": "Chrome Extensions",
"description": "Here are the Chrome extensions that we commonly use at sinProject.",
"content": "\n\nDeepL for Chrome\n\nTranslate while you read and write within Chrome. Powered by the world’s most accurate AI translator.\n\nGoogle Translate\n\nView translations easily as you browse the web. By the Google Translate team.\n\nOutline Chrome Extension\n\nAdd an outline style and see the boundaries of every HTML element without affecting the layout (sizing or positioning).\n\nMaterial Icons for GitHub\n\nReplace the file/folder icons on the GitHub file browser with icons representing the file's type and which tool it is used by.\n\nWappalyzer - Technology profiler\n\nWappalyzer is a technology profiler that shows you what websites are built with.\n\nSVG Export\n\nDownload SVGs from websites as SVGs, PNGs or JPEGs\n\nColorblindly\n\nSimulates colorblindness in your web browser.\n\nVideo Speed Controller\n\nSpeed up, slow down, advance and rewind HTML5 audio/video with shortcuts\n\nNetflix 同時字幕で英語学習\n\nNetflix の日本語と英語字幕を同時に表示。3 秒巻き戻し機能。英単語の意味を表示。ひとつのセリフをリピート再生。再生速度の変更。フレーズをお気に入りに追加。\n",
"heading": "Extensions"
},
{
"path": "chrome-extensions",
"title": "Chrome Extensions",
"description": "",
"heading": "",
"content": ""
},
{
"path": "chrome-extensions#extensions",
"title": "Chrome Extensions",
"description": "",
"heading": "Extensions",
"content": "Extensions"
},
{
"path": "chrome-extensions",
"title": "Chrome Extensions",
"description": "",
"heading": "",
"content": "Chrome Extensions"
},
{
"path": "macos-settings",
"title": "macOS Settings",
"description": "Here are the macOS settings that we commonly use at sinProject.",
"content": "\nHere are the macOS settings that we commonly use at sinProject.\n",
"heading": ""
},
{
"path": "macos-settings#system-settings",
"title": "macOS Settings",
"description": "Here are the macOS settings that we commonly use at sinProject.",
"content": "\nAppearance\n\nAppearance: Dark\n\nLanguage & Region\n\nAdd English to the beginning of your preferred language\n\nDisplays\n\nSelect More Space to increase the amount of information displayed\n\nTrackpad\n\nTap to click: ON\n\nTrackpad Options\n\nUse trackpad for dragging: ON\nDragging style: Three Finger Drag\n\nKeyboard\n\nKey repeat rate: Fast\nDelay until repeat: Short\n\nFunction Keys\n\nUse F1, F2, etc: ON\n\nCustomize modifier keys\n\nCaps Lock key: Command\n\nControl Center\n\nBluetooth: Show in Menu Bar\n\nDesktop & Dock\n\nDock: Automatically hide and show the Dock: ON\n",
"heading": "System Settings"
},
{
"path": "macos-settings#dock",
"title": "macOS Settings",
"description": "Here are the macOS settings that we commonly use at sinProject.",
"content": "\n\nRight click all apps and turn off Options > Keep in Dock\n",
"heading": "Dock"
},
{
"path": "macos-settings#finder",
"title": "macOS Settings",
"description": "Here are the macOS settings that we commonly use at sinProject.",
"content": "\n\nMenu - View: Show Path Bar\nMenu - Settings - Sidebar - <Account Name>: Checked\nMenu - Settings - Advanced - Show all filename extensions: Checked\n\nShow hidden files in Finder with Command + Shift + .\n",
"heading": "Finder"
},
{
"path": "macos-settings#apps",
"title": "macOS Settings",
"description": "Here are the macOS settings that we commonly use at sinProject.",
"content": "\n\nHomebrew\nGoogle Japanese Input\n Preferences: General - Space input style: Halfwidth\n Open Keyboard Settings: Remove everything except ABC, Alphanumeric (Google), Hiragana (Google).\nAlfred\n Appearance: Alfred Modern Dark\n Advanced - Force Keyboard: Alphanumeric (Google)\nGoogle Chrome\nCursor\n The AI-first Code Editor: Build software faster in an editor designed for pair-programming with AI\nVSCode\nSlack\nLINE\n",
"heading": "Apps"
},
{
"path": "macos-settings",
"title": "macOS Settings",
"description": "",
"heading": "",
"content": ""
},
{
"path": "macos-settings#system-settings",
"title": "macOS Settings",
"description": "",
"heading": "System Settings",
"content": "System Settings"
},
{
"path": "macos-settings#dock",
"title": "macOS Settings",
"description": "",
"heading": "Dock",
"content": "Dock"
},
{
"path": "macos-settings#finder",
"title": "macOS Settings",
"description": "",
"heading": "Finder",
"content": "Finder"
},
{
"path": "macos-settings#apps",
"title": "macOS Settings",
"description": "",
"heading": "Apps",
"content": "Apps"
},
{
"path": "macos-settings",
"title": "macOS Settings",
"description": "",
"heading": "",
"content": "macOS Settings"
},
{
"path": "events",
"title": "Events",
"description": "Here are some of the events organized by sinProject.",
"content": "\nHere are some of the events organized by sinProject.\n",
"heading": ""
},
{
"path": "events#show-tell-unveiling-innovations",
"title": "Events",
"description": "Here are some of the events organized by sinProject.",
"content": "\nAbout the Event\n\nOpen to Beginners\nObservers Welcome\nAll Types of Technology Accepted\nShowcase Any Kind of Project\n\nTypes of projects that can be showcased include:\n\nWeb Apps\nSmartphone Apps\nDesktop Apps\nWebsites\nDesign Projects\nWorks in Progress\n\nEngage in a supportive community by showcasing your creations. When viewing others' projects, feel free to share what you appreciate about their work.\n\nConnpass Event Page >\n",
"heading": "Show & Tell: Unveiling Innovations"
},
{
"path": "events",
"title": "Events",
"description": "",
"heading": "",
"content": ""
},
{
"path": "events#show-tell-unveiling-innovations",
"title": "Events",
"description": "",
"heading": "Show & Tell: Unveiling Innovations",
"content": "Show & Tell: Unveiling Innovations"
},
{
"path": "events",
"title": "Events",
"description": "",
"heading": "",
"content": "Events"
},
{
"path": "services",
"title": "Services",
"description": "Here are the services we offer at sinProject Inc.",
"content": "\nHere are the services we offer at sinProject Inc.\n\n\n",
"heading": ""
},
{
"path": "services#office-space",
"title": "Services",
"description": "Here are the services we offer at sinProject Inc.",
"content": "\n\nYou can use our services 24/7, 365 days a year. A 42.5-inch display is also available for use. This is exclusive to members only.\n\n¥11,000 per Month\n",
"heading": "Office Space"
},
{
"path": "services#developer-space",
"title": "Services",
"description": "Here are the services we offer at sinProject Inc.",
"content": "\n\nYou can tour the space we use for development. You can visit for up to 4 hours a month. Only for members.\n\n¥11,000 per Month\n",
"heading": "Developer Space"
},
{
"path": "services#sponsors",
"title": "Services",
"description": "Here are the services we offer at sinProject Inc.",
"content": "\n\nWe are seeking sponsors.\n\nBuy me a Coffee\nsinpro.dev - ¥11,000 per Month\nTalk - ¥11,000 per Month\n",
"heading": "Sponsors"
},
{
"path": "services",
"title": "Services",
"description": "",
"heading": "",
"content": ""
},
{
"path": "services#office-space",
"title": "Services",
"description": "",
"heading": "Office Space",
"content": "Office Space"
},
{
"path": "services#developer-space",
"title": "Services",
"description": "",
"heading": "Developer Space",
"content": "Developer Space"
},
{
"path": "services#sponsors",
"title": "Services",
"description": "",
"heading": "Sponsors",
"content": "Sponsors"
},
{
"path": "services",
"title": "Services",
"description": "",
"heading": "",
"content": "Services"
},
{
"path": "about",
"title": "About",
"description": "sinProject Inc. is an software development company in Osaka, Japan. We primarily use SvelteKit and TypeScript, but also work with other programming languages and frameworks.",
"content": "",
"heading": ""
},
{
"path": "about#sinproject",
"title": "About",
"description": "sinProject Inc. is an software development company in Osaka, Japan. We primarily use SvelteKit and TypeScript, but also work with other programming languages and frameworks.",
"content": "\n\n\n\t\n\n\nsinProject Inc. is an software development company in Osaka, Japan. We primarily use SvelteKit and TypeScript, but also work with other programming languages and frameworks.\n\nFounded: October 2014\nCEO: sinYa Iwasaki\nOur affiliated banks include:\n Mitsubishi UFJ Bank, Kujo Branch\n Eiwa Shinkin Bank, Honcho Branch\nGoogle Map\nGitHub\n",
"heading": "sinProject"
},
{
"path": "about#our-business-activities-include",
"title": "About",
"description": "sinProject Inc. is an software development company in Osaka, Japan. We primarily use SvelteKit and TypeScript, but also work with other programming languages and frameworks.",
"content": "\n\nIT consulting\nPlanning and proposing IT solutions\nDesigning and developing web applications\nDesigning and developing mobile applications\nDesigning and developing websites\nDesigning and developing Windows applications\nDesigning and developing games\nEducation and training of system engineers (teaching at vocational schools, training engineers from other companies)\n\n\n\tHTML\n\tCSS\n\tMarkdown\n\tJavaScript\n\tTypeScript\n\tDart\n\tSwift\n\tKotlin\n\tJava\n\tPHP\n\tC#\n\tGo\n\tVB.NET\n\tVB 6.0\n\tC++\n\tC\n\tSvelte\n\tSvelteKit\n\tFlutter\n\tSpring Boot\n\tVue.js\n\tNuxt.js\n\tUnity\n\tThymeleaf\n\tjQuery\n\tJPA\n\tTailwind CSS\n\tBootstrap\n\t.NET Framework\n\tASP.NET\n\tASP\n\tWordPress\n\tEC-Cube\n\tAdSense\n\tElementor\n\tDuplicator\n\tGDPR\n\tMySQL\n\tSQL Server\n\tOracle\n\tSQLite\n\tPrisma\n\tRealm\n\tRedis\n\tWebSocket\n\tNode.js\n\tPM2\n\tCaddy\n\tGoogle Cloud Translation\n\tGoogle Cloud Text-to-Speech\n\tFirebase Analytics\n\tFirebase Crashlytics\n\tNIFCLOUD mobile backend\n\tAdMob\n\tLinux\n\tWindows\n\tiOS\n\tAndroid\n\tVPS\n\tVercel\n\tAmazon EC2\n\tAmazon S3\n\tVitest\n\tPlaywright\n\tPrettier\n\tESLint\n\tOCR\n\tDICOM\n\tPACS\n\tActiveReports\n\tSPREAD\n\tInputMan\n\tApp Store\n\tGoogle Play\n\tTestFlight\n\tDeployGate\n\tTwitter API\n\tVSCode\n\tXcode\n\tAndroid Studio\n\n",
"heading": "Our business activities include"
},
{
"path": "about#sinya-iwasaki",
"title": "About",
"description": "sinProject Inc. is an software development company in Osaka, Japan. We primarily use SvelteKit and TypeScript, but also work with other programming languages and frameworks.",
"content": "\n\nBorn in Osaka, Japan, he discovered programming via FAMILY BASIC in elementary school and further explored it on an MSX2 in middle school.\n\nAfter quitting university, he dived into the IT industry, developing web services, medical software, and cloud-based systems across three companies.\n\nAfter creating the popular \"Tweecha\" app during his freelance years, I'm now the CTO and CEO of sinProject, aiming to revolutionize the world with innovative services.\n\nTwitter\n",
"heading": "sinYa Iwasaki"
},
{
"path": "about#major-clients-in-no-particular-order",
"title": "About",
"description": "sinProject Inc. is an software development company in Osaka, Japan. We primarily use SvelteKit and TypeScript, but also work with other programming languages and frameworks.",
"content": "\n\n日鋼ステンレス株式会社\n株式会社アイアールディー\n株式会社ライズサービス\n株式会社ジェイアイティ\n株式会社ワールドビジネスパートナー\n株主会社にちようびる\n株式会社ファイナンシャルコンサルタント\nキュリオスエンジラボ株式会社\nバイオシグナル株式会社\nソフトキューブ株式会社\n株式会社東迎システムファクトリー\n株式会社 Def tribe\neach stage 株式会社 / フリーキャスター 清水健\nヒューマンアカデミー株式会社\n株式会社スカイラボ\nJUSETZ コンストラクターズ株式会社\n株式会社 TASKS\n株式会社ミューズアーク\nアール有限会社\n株式会社ドリーム ROSIEE\n株式会社ソフトウェーブ\n株式会社ジュピテック\n株式会社採用戦略研究所\nlifestyle consulting inc\nCAELU DESIGN OFFICE\n平松写真事務所\n歩 (エフ- ユー)\nCHUBEE Members\nクロイマジョ\n炭火焼鳥 喜心 江坂店\n炭火焼鳥 喜心 新町本店\n",
"heading": "Major clients (in no particular order)"
},
{
"path": "about#docs",
"title": "About",
"description": "sinProject Inc. is an software development company in Osaka, Japan. We primarily use SvelteKit and TypeScript, but also work with other programming languages and frameworks.",
"content": "\n\nWe have the following documentation pages available:\n\nCompany Information - About our work and us\nDev Environment - An introduction to development methods for our services.\nAssets - About the assets we use\nCode Style - Our code style definition\nClean Code - Policy to keep the code beautiful\nTesting - The test frameworks we use\nGit - About handling Git\nServer - About server operation\nTeam sinProject - An explanation of our development concepts.\nTalk - Introduction and usage guide for Talk app.\n",
"heading": "Docs"
},
{
"path": "about",
"title": "About",
"description": "",
"heading": "",
"content": ""
},
{
"path": "about#sinproject",
"title": "About",
"description": "",
"heading": "sinProject",
"content": "sinProject"
},
{
"path": "about#our-business-activities-include",
"title": "About",
"description": "",
"heading": "Our business activities include",
"content": "Our business activities include"
},
{
"path": "about#sinya-iwasaki",
"title": "About",
"description": "",
"heading": "sinYa Iwasaki",
"content": "sinYa Iwasaki"
},
{
"path": "about#major-clients-in-no-particular-order",
"title": "About",
"description": "",
"heading": "Major clients (in no particular order)",
"content": "Major clients (in no particular order)"
},
{
"path": "about#docs",
"title": "About",
"description": "",
"heading": "Docs",
"content": "Docs"
},
{
"path": "about",
"title": "About",
"description": "",
"heading": "",
"content": "About"
},
{
"path": "portfolio",
"title": "Portfolio",
"description": "sinProject Inc. is an software development company in Osaka, Japan. We primarily use SvelteKit and TypeScript, but also work with other programming languages and frameworks.",
"content": "",
"heading": ""
},
{
"path": "portfolio#sinpro-dev",
"title": "Portfolio",
"description": "sinProject Inc. is an software development company in Osaka, Japan. We primarily use SvelteKit and TypeScript, but also work with other programming languages and frameworks.",
"content": "\n\nsinpro.dev is our showcase website, similar to a concept car. It introduces what kind of work we are producing and the policies under which we produce our products.\n\n\n\tHTML\n\tCSS\n\tMarkdown\n\tJavaScript\n\tTypeScript\n\tSvelte\n\tSvelteKit\n\tTailwind CSS\n\tNode.js\n\tPM2\n\tCaddy\n\tLinux\n\tVPS\n\tVitest\n\tPlaywright\n\tPrettier\n\tESLint\n\n",
"heading": "sinpro.dev"
},
{
"path": "portfolio#talk",
"title": "Portfolio",
"description": "sinProject Inc. is an software development company in Osaka, Japan. We primarily use SvelteKit and TypeScript, but also work with other programming languages and frameworks.",
"content": "\n\nTalk is an app for conversing in real time with people who speak different languages. You can learn languages in addition to also having conversations through both voice and text.\n\nTalk - Docs\n\n\n\tHTML\n\tCSS\n\tJavaScript\n\tTypeScript\n\tSvelte\n\tSvelteKit\n\tTailwind CSS\n\tGoogle Cloud Translation\n\tGoogle Cloud Text-to-Speech\n\tMySQL\n\tPrisma\n\tRedis\n\tWebSocket\n\tNode.js\n\tPM2\n\tCaddy\n\tLinux\n\tVPS\n\tVitest\n\tPlaywright\n\tPrettier\n\tESLint\n\n",
"heading": "Talk"
},
{
"path": "portfolio#mill-test-report-search-engine",
"title": "Portfolio",
"description": "sinProject Inc. is an software development company in Osaka, Japan. We primarily use SvelteKit and TypeScript, but also work with other programming languages and frameworks.",
"content": "\n\nA project in which we transitioned a B2B Windows application to a web application. Implemented features such as data search, quotation, and PDF output.\n\n\n\tHTML\n\tCSS\n\tJavaScript\n\tTypeScript\n\tSvelte\n\tSvelteKit\n\tMySQL\n\tSQLite\n\tNode.js\n\tVPS\n\tPlaywright\n\tPrettier\n\tESLint\n\n",
"heading": "Mill Test Report Search Engine"
},
{
"path": "portfolio#web-based-sales-management-system",
"title": "Portfolio",
"description": "sinProject Inc. is an software development company in Osaka, Japan. We primarily use SvelteKit and TypeScript, but also work with other programming languages and frameworks.",
"content": "\n\nA project in which we replaced a sales management system created with Access with a modern web application.\n\n\n\tHTML\n\tCSS\n\tJavaScript\n\tTypeScript\n\tJava\n\tSpring Boot\n\tThymeleaf\n\tjQuery\n\tJPA\n\tBootstrap\n\tMySQL\n\tNode.js\n\tAmazon EC2\n\tAmazon S3\n\tPlaywright\n\tPrettier\n\tESLint\n\n",
"heading": "Web-based Sales Management System"
},
{
"path": "portfolio#quality-manager-for-mobile-applications",
"title": "Portfolio",
"description": "sinProject Inc. is an software development company in Osaka, Japan. We primarily use SvelteKit and TypeScript, but also work with other programming languages and frameworks.",
"content": "\n\nWe reviewed iOS apps created with Swift and Android apps created with Kotlin from design, UI, and code perspectives, ensuring quality.\n\n\n\tSwift\n\tKotlin\n\tAPI\n\tiOS\n\tAndroid\n\tApp Store\n\tGoogle Play\n\tTestFlight\n\tDeployGate\n\n",
"heading": "Quality manager for mobile applications"
},
{
"path": "portfolio#tweecha-txiicha-tweecha2",
"title": "Portfolio",
"description": "sinProject Inc. is an software development company in Osaka, Japan. We primarily use SvelteKit and TypeScript, but also work with other programming languages and frameworks.",
"content": "\n\nTweecha, Txiicha, and Tweecha2 were unofficial Twitter clients designed to enhance the Twitter experience. They offered various features such as saving images and videos, simultaneous retweeting and liking, as well as customizable color themes. Thanks to these features and custom elements, they held the top spot in the popularity charts for Android Twitter clients for three years. However, due to changes in Twitter's policies, these apps are no longer functional.\n\n\n\n\n\tJava\n\tKotlin\n\tFlutter\n\tDart\n\tTwitter API\n\tSQLite\n\tRealm\n\tFirebase Analytics\n\tFirebase Crashlytics\n\tAdMob\n\tAndroid\n\tiOS\n\tGoogle Play\n\tApp Store\n\n",
"heading": "Tweecha / Txiicha / Tweecha2"
},
{
"path": "portfolio#simple-web-apps",
"title": "Portfolio",
"description": "sinProject Inc. is an software development company in Osaka, Japan. We primarily use SvelteKit and TypeScript, but also work with other programming languages and frameworks.",
"content": "\n\nWe made several simple web apps with SvelteKit.\n\nSound Pads\nRenda Attack\nBEST LAP\n\n\n\tHTML\n\tCSS\n\tMarkdown\n\tJavaScript\n\tTypeScript\n\tSvelte\n\tSvelteKit\n\tPrettier\n\tESLint\n\n",
"heading": "Simple Web Apps"
},
{
"path": "portfolio#sinproject-menu-https-sinproject-net-menu",
"title": "Portfolio",
"description": "sinProject Inc. is an software development company in Osaka, Japan. We primarily use SvelteKit and TypeScript, but also work with other programming languages and frameworks.",
"content": "\n\nA web application used for easily creating menus for restaurants. It can also be used by businesses other than restaurants, such as personal portfolios.\n\n\n\tVue.js\n\tNuxt.js\n\tVercel\n\tFlutter\n\tDart\n\n",
"heading": "sinProject Menu"
},
{
"path": "portfolio#rolling-jewels",
"title": "Portfolio",
"description": "sinProject Inc. is an software development company in Osaka, Japan. We primarily use SvelteKit and TypeScript, but also work with other programming languages and frameworks.",
"content": "\n\nA game where you tilt your mobile device to roll the ball and aim for a high score.\n\n\n\n\n\tC#\n\tUnity\n\tAdMob\n\tAndroid\n\tiOS\n\tGoogle Play\n\tApp Store\n\n",
"heading": "Rolling Jewels"
},
{
"path": "portfolio#simple-web-games",
"title": "Portfolio",
"description": "sinProject Inc. is an software development company in Osaka, Japan. We primarily use SvelteKit and TypeScript, but also work with other programming languages and frameworks.",
"content": "\n\nWe made several simple web games with Flutter.\n\nNote Master\nFruity Quiz\nDino Master\nTodofuken Master\nAddition\nKokki Clicker\nColor Clicker\n\n\n\tFlutter\n\tDart\n\tNIFCLOUD mobile backend\n\n",
"heading": "Simple Web Games"
},
{
"path": "portfolio#sinproject-net",
"title": "Portfolio",
"description": "sinProject Inc. is an software development company in Osaka, Japan. We primarily use SvelteKit and TypeScript, but also work with other programming languages and frameworks.",
"content": "\n\nOur company website created with WordPress.\n\n\n\tWordPress\n\tAdSense\n\tElementor\n\tDuplicator\n\tGDPR\n\n",
"heading": "sinproject.net"
},
{
"path": "portfolio#medical-imaging-management-system",
"title": "Portfolio",
"description": "sinProject Inc. is an software development company in Osaka, Japan. We primarily use SvelteKit and TypeScript, but also work with other programming languages and frameworks.",
"content": "\n\nThis system allows centralized management of images from medical examinations from all facilities over the network from the operating room, providing comprehensive support for improving the productivity of radiological technologists’ imaging operations.\n\nWe also improved operability and performance in later upgrades.\n\n\n\tC#\n\t.NET Framework\n\tSQL Server\n\tWindows\n\tDICOM\n\tPACS\n\n",
"heading": "Medical Imaging Management System"
},
{
"path": "portfolio#class-library-for-net-framework",
"title": "Portfolio",
"description": "sinProject Inc. is an software development company in Osaka, Japan. We primarily use SvelteKit and TypeScript, but also work with other programming languages and frameworks.",
"content": "\n\nA class library to improve the efficiency of business application development using the .NET Framework.\n\n\n\tC#\n\tVB.NET\n\t.NET Framework\n\tOracle\n\tSQL Server\n\tActiveReports\n\tSPREAD\n\tInputMan\n\n",
"heading": "Class library for .NET Framework"
},
{
"path": "portfolio#sales-management-system-on-windows",
"title": "Portfolio",
"description": "sinProject Inc. is an software development company in Osaka, Japan. We primarily use SvelteKit and TypeScript, but also work with other programming languages and frameworks.",
"content": "\n\n\n\tVB.NET\n\t.NET Framework\n\tOracle\n\tActiveReports\n\tSPREAD\n\tInputMan\n\n",
"heading": "Sales Management System on Windows"
},
{
"path": "portfolio#used-car-search-web-app",
"title": "Portfolio",
"description": "sinProject Inc. is an software development company in Osaka, Japan. We primarily use SvelteKit and TypeScript, but also work with other programming languages and frameworks.",
"content": "\n\nA system where general users can search and inquire about the used car data registered by each affiliated store on the website.\n\n\n\tVisualBasic 6.0\n\tASP\n\tSQL Server\n\tWindows NT\n\n",
"heading": "Used car search web app"
},
{
"path": "portfolio",
"title": "Portfolio",
"description": "",
"heading": "",
"content": ""
},
{
"path": "portfolio#sinpro-dev",
"title": "Portfolio",
"description": "",
"heading": "sinpro.dev",
"content": "sinpro.dev"
},
{
"path": "portfolio#talk",
"title": "Portfolio",
"description": "",
"heading": "Talk",
"content": "Talk"
},
{
"path": "portfolio#mill-test-report-search-engine",
"title": "Portfolio",
"description": "",
"heading": "Mill Test Report Search Engine",
"content": "Mill Test Report Search Engine"
},
{
"path": "portfolio#web-based-sales-management-system",
"title": "Portfolio",
"description": "",
"heading": "Web-based Sales Management System",
"content": "Web-based Sales Management System"
},
{
"path": "portfolio#quality-manager-for-mobile-applications",
"title": "Portfolio",
"description": "",
"heading": "Quality manager for mobile applications",
"content": "Quality manager for mobile applications"
},
{
"path": "portfolio#tweecha-txiicha-tweecha2",
"title": "Portfolio",
"description": "",
"heading": "Tweecha / Txiicha / Tweecha2",
"content": "Tweecha / Txiicha / Tweecha2"
},
{
"path": "portfolio#simple-web-apps",
"title": "Portfolio",
"description": "",
"heading": "Simple Web Apps",
"content": "Simple Web Apps"
},
{
"path": "portfolio#sinproject-menu-https-sinproject-net-menu",
"title": "Portfolio",
"description": "",
"heading": "sinProject Menu",
"content": "sinProject Menu"
},
{
"path": "portfolio#rolling-jewels",
"title": "Portfolio",
"description": "",
"heading": "Rolling Jewels",
"content": "Rolling Jewels"
},
{
"path": "portfolio#simple-web-games",
"title": "Portfolio",
"description": "",
"heading": "Simple Web Games",
"content": "Simple Web Games"
},
{
"path": "portfolio#sinproject-net",
"title": "Portfolio",
"description": "",
"heading": "sinproject.net",
"content": "sinproject.net"
},
{
"path": "portfolio#medical-imaging-management-system",
"title": "Portfolio",
"description": "",
"heading": "Medical Imaging Management System",
"content": "Medical Imaging Management System"
},
{
"path": "portfolio#class-library-for-net-framework",
"title": "Portfolio",
"description": "",
"heading": "Class library for .NET Framework",
"content": "Class library for .NET Framework"
},
{
"path": "portfolio#sales-management-system-on-windows",
"title": "Portfolio",
"description": "",
"heading": "Sales Management System on Windows",
"content": "Sales Management System on Windows"
},
{
"path": "portfolio#used-car-search-web-app",
"title": "Portfolio",
"description": "",
"heading": "Used car search web app",
"content": "Used car search web app"
},
{
"path": "portfolio",
"title": "Portfolio",
"description": "",
"heading": "",
"content": "Portfolio"
}
]