boxpistols / 4stroke

4Stroke

Hi there 👋

I am UIUX Engineer

4stroke's Issues

スクロール GSAP

https://codepen.io/agdg/pen/QWOEbRO

マークアップ構造

データのexport/import

https://gist.github.com/ohpauleez/4040960

---

https://stackoverflow.com/questions/13335967/export-data-in-localstorage-for-later-re-import

copy(JSON.stringify(JSON.stringify(localStorage)));

var data = JSON.parse(/*previously copied stringified JSON from clipboard*/);
Object.keys(data).forEach(function (k) {
  localStorage.setItem(k, data[k]);
});

"{\"stroke2\":\"月曜フロー\\nTD以外\\n  ATP / Figma\\n  4Stroke\\n  Next / Material UI\\n\",\"@storybook/ui/store\":\"{\\\"versions\\\":{\\\"current\\\":{\\\"version\\\":\\\"5.2.8\\\"},\\\"latest\\\":{\\\"version\\\":\\\"6.2.9\\\",\\\"info\\\":{\\\"plain\\\":\\\"### Bug Fixes\\\\n\\\\n- Angular: set the @ViewChild with a non-empty value in StorybookWrapperComponent ([#14586](https://github.com/storybookjs/storybook/pull/14586))\\\\n- Addon-docs: Fix ArgsTable sorting when using of={Component} ([#14669](https://github.com/storybookjs/storybook/pull/14669))\\\\n- Server: Fix string escaping in CSF compiler ([#14615](https://github.com/storybookjs/storybook/pull/14615))\\\\n\\\\n### Maintenance\\\\n\\\\n- Examples: Move from placehold.it to place-hold.it for mock images ([#14637](https://github.com/storybookjs/storybook/pull/14637))\\\"}},\\\"next\\\":{\\\"version\\\":\\\"6.2.0-rc.13\\\",\\\"info\\\":{\\\"plain\\\":\\\"### Bug Fixes\\\\n\\\\n- Controls: QA fixes for Object and Color controls ([#14392](https://github.com/storybookjs/storybook/pull/14392))\\\"}}},\\\"lastVersionCheck\\\":1620570030598}\",\"kioku-title1\":\"xxx\",\"docsify.search.expires\":\"1639052217268\",\"stroke5\":\"エラー\",\"storybook-layout\":\"{\\\"resizerPanel\\\":{\\\"x\\\":0,\\\"y\\\":433},\\\"resizerNav\\\":{\\\"x\\\":200,\\\"y\\\":0}}\",\"stroke3\":\" ATP / Figma\",\"stroke-title2\":\"Next JS\",\"kioku-title3\":\"\",\"stroke10\":\"\",\"stroke4\":\"TD \\n  Slack  写真/進行共有\",\"todos\":\"[{\\\"text\\\":\\\"star this repository\\\",\\\"done\\\":true},{\\\"text\\\":\\\"fork this repository\\\",\\\"done\\\":true},{\\\"text\\\":\\\"follow author\\\",\\\"done\\\":true},{\\\"text\\\":\\\"vue-typescript-admin-template\\\",\\\"done\\\":true},{\\\"text\\\":\\\"vue\\\",\\\"done\\\":true},{\\\"text\\\":\\\"element-ui\\\",\\\"done\\\":true},{\\\"text\\\":\\\"axios\\\",\\\"done\\\":true},{\\\"text\\\":\\\"webpack\\\",\\\"done\\\":true}]\",\"docsify.search.index\":\"{\\\"/\\\":{\\\"#/?id=docsify\\\":{\\\"slug\\\":\\\"#/?id=docsify\\\",\\\"title\\\":\\\"docsify\\\",\\\"body\\\":\\\"公式ドキュメント\\\\nhttps://docsify.js.org\\\\n\\\"},\\\"#/?id=what-is-this\\\":{\\\"slug\\\":\\\"#/?id=what-is-this\\\",\\\"title\\\":\\\"What is this\\\",\\\"body\\\":\\\"- ドキュメント静的サイトジェネレーター\\\\n- Markdown ドキュメント\\\\n- gitbook-cli のような UIUX のライブラリ\\\\n- 日本語検索に対応\\\\n\\\\n\\\\n\\\"}},\\\"/guide\\\":{\\\"#/guide?id=%e5%b0%8e%e5%85%a5%e3%83%95%e3%83%ad%e3%83%bc\\\":{\\\"slug\\\":\\\"#/guide?id=%e5%b0%8e%e5%85%a5%e3%83%95%e3%83%ad%e3%83%bc\\\",\\\"title\\\":\\\"導入フロー\\\",\\\"body\\\":\\\"\\\"},\\\"#/guide?id=%e3%83%95%e3%82%a1%e3%82%a4%e3%83%ab%e6%a7%8b%e9%80%a0%e3%82%b5%e3%83%b3%e3%83%97%e3%83%ab\\\":{\\\"slug\\\":\\\"#/guide?id=%e3%83%95%e3%82%a1%e3%82%a4%e3%83%ab%e6%a7%8b%e9%80%a0%e3%82%b5%e3%83%b3%e3%83%97%e3%83%ab\\\",\\\"title\\\":\\\"ファイル構造サンプル\\\",\\\"body\\\":\\\"workspace\\\\n└─ docs\\\\n   ├─ README.md\\\\n   ├─ guide.md\\\\n   └─ index.html\\\"},\\\"#/guide?id=cli-install\\\":{\\\"slug\\\":\\\"#/guide?id=cli-install\\\",\\\"title\\\":\\\"CLI install\\\",\\\"body\\\":\\\"yarn\\\\ninstall:\\\\n\\\\nyarn add -D docsify-cli\\\\n初期化：\\\\n\\\\nyarn docsify init ./docs\\\\nローカルサーバー起動：（アドレス指定の場合）\\\\n\\\\nyarn docsify serve docs -p 3003\\\\n\\\\nnpx\\\\n初期化：\\\\n\\\\nnpx docsify-cli init ./docs\\\\nローカルサーバー起動：（アドレス指定の場合）\\\\n\\\\nnpx docsify-cli serve docs -p 3003\\\"}},\\\"/frontend\\\":{\\\"#/frontend?id=frontend\\\":{\\\"slug\\\":\\\"#/frontend?id=frontend\\\",\\\"title\\\":\\\"frontend\\\",\\\"body\\\":\\\"フロントエンド設計レギュレーション\\\"}},\\\"/docsify\\\":{\\\"#/docsify?id=docsify\\\":{\\\"slug\\\":\\\"#/docsify?id=docsify\\\",\\\"title\\\":\\\"docsify\\\",\\\"body\\\":\\\"これはdocsifyで作成されたドキュメントです。\\\"}},\\\"/option\\\":{\\\"#/option?id=%e3%82%aa%e3%83%97%e3%82%b7%e3%83%a7%e3%83%b3\\\":{\\\"slug\\\":\\\"#/option?id=%e3%82%aa%e3%83%97%e3%82%b7%e3%83%a7%e3%83%b3\\\",\\\"title\\\":\\\"オプション\\\",\\\"body\\\":\\\"\\\"},\\\"#/option?id=%e3%82%bf%e3%83%96%e8%a1%a8%e7%a4%ba\\\":{\\\"slug\\\":\\\"#/option?id=%e3%82%bf%e3%83%96%e8%a1%a8%e7%a4%ba\\\",\\\"title\\\":\\\"タブ表示\\\",\\\"body\\\":\\\"<!-- tabs:start -->\\\\n\\\\n# ** English **\\\\n\\\\nHello!\\\\n\\\\n# ** French **\\\\n\\\\nBonjour!\\\\n\\\\n# ** Italian **\\\\n\\\\nCiao!\\\\n\\\\n<!-- tabs:end -->\\\\n<!-- tabs:start -->\\\\n\\\\n\\\"},\\\"#/option?id=-english-\\\":{\\\"slug\\\":\\\"#/option?id=-english-\\\",\\\"title\\\":\\\"** English **\\\",\\\"body\\\":\\\"Hello!\\\\n\\\"},\\\"#/option?id=-french-\\\":{\\\"slug\\\":\\\"#/option?id=-french-\\\",\\\"title\\\":\\\"** French **\\\",\\\"body\\\":\\\"Bonjour!\\\\n\\\"},\\\"#/option?id=-italian-\\\":{\\\"slug\\\":\\\"#/option?id=-italian-\\\",\\\"title\\\":\\\"** Italian **\\\",\\\"body\\\":\\\"Ciao!\\\\n\\\\n<!-- tabs:end -->\\\\n\\\"}},\\\"/css\\\":{\\\"#/css?id=css-design\\\":{\\\"slug\\\":\\\"#/css?id=css-design\\\",\\\"title\\\":\\\"CSS Design\\\",\\\"body\\\":\\\"\\\"},\\\"#/css?id=atomic\\\":{\\\"slug\\\":\\\"#/css?id=atomic\\\",\\\"title\\\":\\\"Atomic\\\",\\\"body\\\":\\\"- page\\\\n- layout(template)\\\\n- organism\\\\n- molecule\\\\n- atom\\\\n\\\"}}}\",\"kioku1\":\"ddd\",\"stroke1\":\"TD\\nATP\",\"stroke9\":\"Toyko\",\"kioku-title2\":\"\",\"stroke-title3\":\"Figma UI Token \",\"stroke-title1\":\"月曜タスク\",\"stroke6\":\"エラーがあるよ\"}"

Pugの関数、汎用化