HackMD
  • Prime
    Prime  Full-text search on all paid plans
    Search anywhere and reach everything in a Workspace with Prime plan.
    Got it
      • Create new note
      • Create a note from template
    • Prime  Full-text search on all paid plans
      Prime  Full-text search on all paid plans
      Search anywhere and reach everything in a Workspace with Prime plan.
      Got it
      • Options
      • Versions and GitHub Sync
      • Transfer ownership
      • Delete this note
      • Template
      • Save as template
      • Insert from template
      • Export
      • Dropbox
      • Google Drive
      • Gist
      • Import
      • Dropbox
      • Google Drive
      • Gist
      • Clipboard
      • Download
      • Markdown
      • HTML
      • Raw HTML
      • Sharing Link copied
      • /edit
      • View mode
        • Edit mode
        • View mode
        • Book mode
        • Slide mode
        Edit mode View mode Book mode Slide mode
      • Note Permission
      • Read
        • Owners
        • Signed-in users
        • Everyone
        Owners Signed-in users Everyone
      • Write
        • Owners
        • Signed-in users
        • Everyone
        Owners Signed-in users Everyone
      • More (Comment, Invitee)
      • Publishing
        Everyone on the web can find and read all notes of this public team.
        After the note is published, everyone on the web can find and read this note.
        See all published notes on profile page.
      • Commenting Enable
        Disabled Forbidden Owners Signed-in users Everyone
      • Permission
        • Forbidden
        • Owners
        • Signed-in users
        • Everyone
      • Invitee
      • No invitee
    Menu Sharing Create Help
    Create Create new note Create a note from template
    Menu
    Options
    Versions and GitHub Sync Transfer ownership Delete this note
    Export
    Dropbox Google Drive Gist
    Import
    Dropbox Google Drive Gist Clipboard
    Download
    Markdown HTML Raw HTML
    Back
    Sharing
    Sharing Link copied
    /edit
    View mode
    • Edit mode
    • View mode
    • Book mode
    • Slide mode
    Edit mode View mode Book mode Slide mode
    Note Permission
    Read
    Owners
    • Owners
    • Signed-in users
    • Everyone
    Owners Signed-in users Everyone
    Write
    Owners
    • Owners
    • Signed-in users
    • Everyone
    Owners Signed-in users Everyone
    More (Comment, Invitee)
    Publishing
    Everyone on the web can find and read all notes of this public team.
    After the note is published, everyone on the web can find and read this note.
    See all published notes on profile page.
    More (Comment, Invitee)
    Commenting Enable
    Disabled Forbidden Owners Signed-in users Everyone
    Permission
    Owners
    • Forbidden
    • Owners
    • Signed-in users
    • Everyone
    Invitee
    No invitee
       owned this note    owned this note      
    Published Linked with GitHub
    Like BookmarkBookmarked
    Subscribed
    • Any changes
      Be notified of any changes
    • Mention me
      Be notified of mention me
    • Unsubscribe
    Subscribe
    # Frontend Monthly #1 ## イベント概要 イベントページ: https://cybozu.connpass.com/event/180861/ | 時間 | タイトル | | --- | --------| | 18:50 - 19:00 | 配信開始 | | 19:00 - 19:05 | オープニング | | 19:05 - 19:55 | 本編(記事紹介) | | 19:55 - 20:00 | クロージング | ハッシュタグは、**[#サイボウズフロントエンドマンスリー](https://twitter.com/search?q=%23%E3%82%B5%E3%82%A4%E3%83%9C%E3%82%A6%E3%82%BA%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E3%83%9E%E3%83%B3%E3%82%B9%E3%83%AA%E3%83%BC)** ## チーム紹介 ![チームメンバー](https://i.imgur.com/u92pH2q.png) [@koba04](https://twitter.com/koba04) / [@pirosikick](https://twitter.com/pirosikick) / [@toshi__toma](https://twitter.com/toshi__toma) / [@zaki___yama](https://twitter.com/zaki___yama) / [@\_\_sakito\_\_](https://twitter.com/__sakito__) / [@shisama_](https://twitter.com/shisama_) / [@nakajmg](https://twitter.com/nakajmg) / [@b4h0_c4t](https://twitter.com/b4h0_c4t) ## フロントエンドウィークリー 毎週火曜の 17:00 〜 18:00 で社内向けに行っているフロントエンドの気になる記事を紹介する会です。2016年3月15日から行われています。 ハッシュタグは、**[#サイボウズフロントエンドウィークリー](https://twitter.com/search?q=%23%E3%82%B5%E3%82%A4%E3%83%9C%E3%82%A6%E3%82%BA%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E3%82%A6%E3%82%A3%E3%83%BC%E3%82%AF%E3%83%AA%E3%83%BC)** ----- ## [CSS Painting Order](https://abandonedwig.info/blog/2020/07/03/css-painting-order.html) - 共有者: b4h0_c4t DOMの描画順がどのように決定されるのかについて解説 記述順・z-index・Stacking Contextが作用することについて言及した後、`Overflow: scroll;`スタイルを持ったDOMがStacking Contextを形成しないことについて恣意的だと話している。 また、preserve-3dとtransformを使用してStacking Contextの描画順を破壊する方法についても触れている。(FireFoxでは再現しない) ----- ## [Storage for the web](https://web.dev/storage-for-the-web/) - 共有者: nakajmg ブラウザのストレージの話。各ブラウザの保存容量制限値、制限値を超える場合の挙動やエラーハンドリングとデバッグについての解説。LocalStorageやCookieではなくIndexedDBやCache Storageを使いましょうとのこと。[web.dev/live](https://web.dev/live/)でこの記事を元にしたプレゼンがありました。 StorageManagerを使うと使用率などが調べられる。 ```javascript= const estimate = await navigator.storage.estimate() // 使用率 console.log((estimate.usage / estimate.quota) * 100) // あどどれくらい使えるか console.log(estimate.quota - estimate.usage) ``` 参考 - [web.dev/live - Storage for the web](https://youtu.be/NNuTV-gjlZQ) - [データの永続化](https://web.dev/persistent-storage/) - [StorageManager - Web API | MDN](https://developer.mozilla.org/ja/docs/Web/API/StorageManager) - [Full Third-Party Cookie Blocking and More](https://webkit.org/blog/10218/full-third-party-cookie-blocking-and-more/) ----- ## [React Spectrum](https://github.com/adobe/react-spectrum) - 共有者: pirosikick Adobe製のデザインシステム、React Spectrumがいい感じなので紹介。 日本語の記事は以下がざっくり概要が書いておりわかりやすいです。 [Adobe製デザインシステム「React Spectrum」がすごいので紹介したい - Qiita](https://qiita.com/so99ynoodles/items/bc924b7ee8c265b09723) 開発者がReact Europe2020で解説していた動画が以下。React Spectrumが何を考えて開発されたか話されています。 モバイルのスクリーンリーダー対応に苦労した話など、個人的にはReact Europe2020のトークの中で一番おもしろかったです(全部観たわけじゃないないけど!) [Design system and accessibility - Devon Govett aka @devongovett at @ReactEurope 2020](https://www.youtube.com/watch?v=dxDcBB7Xoxs) a11yの実装が別パッケージになっており見た目の実装と分離されているのが特徴で、a11y部分のreact-ariaが便利そうです。 [モーダルの実装のサンプルコード](https://react-spectrum.adobe.com/react-aria/useDialog.html) モーダルの実装のサンプルコードを見てみましたが、以下のようなパーツで構成されています。 - FocusScope: focusの管理。子要素にfocusし、unmount後にfocusを元の状態に戻す - usePreventScroll: スクロールの防止 - useModal: モーダルの裏側にあるコンテンツをスクリーンリーダーから隠す - useOverlay: モーダルを閉じる動作の制御(ESCキー、モーダル外のクリック) - DismissButto: 視覚的に表示されないがスクリーンリーダーから見える閉じるボタン - 内部でVisuallyHiddenコンポーネントが使われている - etc パーツが多く個々の意味を理解しないと使いこなすのがやや難しそうですが、focusの管理などは自前で実装すると大変なのでありがたい! ----- ## [Redux Essentials, Part 1: Redux Overview and Concepts](https://redux.js.org/tutorials/essentials/part-1-overview-concepts) - 共有者: sakito Reduxについての入門ページが追加された。 追加された理由についてのIssue。 https://github.com/reduxjs/redux/issues/3674 Reduxについて何も知識がなくても、Reduxについて理解ができるように、既存のチュートリアルよりも前の段階で行うチュートリアル。 ちなみにReduxは現在ドキュメントページ全体の改善に取り組んでおり、今回のドキュメントの更新はその作業の1つになります。 https://github.com/reduxjs/redux/issues/3592 以下はちょっとした説明。 - Part1 Reduxの用語、周辺ライブラリ、ReduxのデータフローなどReduxについて必要な知識の説明。 - Part2 Redux Toolkit、Redux hooksを使用し、Redux devtool、Immer、Redux-thunkを説明しつつカウンターアプリを作成する。 - Part3 Part2で使用した基本的な知識の応用として、フィードアプリを作成する。 - Part4 Part3の続き。Reduxのデータのやりとりを学ぶような実装を加える。 - Part5 Part4の続き。Redux ToolkitのcreateAsyncThunkを使用して非同期処理を加える - Part6 Part5の続き。React DevTools ProfilerとcreateSelectorを使用し、レンダリングの改善を行う。 Redux ToolkitのcreateEntityAdapterを使用し、データの最適化を行う。 --- ## [Streaming requests with the fetch API](https://web.dev/fetch-upload-streaming/) - 共有者: shisama_ Chrome 85 からOrigin Trialが開始した`fetch()`の Upload Streaming Requests の解説記事。 fetch API のリクエストボディにStreamを渡すことができるようになる。 一度のリクエストでchunkでデータを送ることができるようになってStreamが閉じられるまではレスポンスは返ってこない。 例えば、映像や音声など大きなデータを送りたいときに一気に送らずに少しずつ送ることができたり、リアルタイムなチャットを作ったり、 これまでWebSocketでできたことが、HTTP でできるようになる。 - [fetch() upload streaming は WebSocket の代替になるのか。Fetch を使ってカメラから取得した映像をストリーミングで送信する - 別にしんどくないブログ](https://shisama.hatenablog.com/entry/2020/07/28/090000) --- ## [Svelte <3 TypeScript](https://svelte.dev/blog/svelte-and-typescript) - 共有者: @toshi__toma [Svelte](https://github.com/sveltejs/svelte)がTypeScriptを公式にサポート。 SvelteでのTSサポートについてや、新規プロジェクトや既存のプロジェクトのセットアップ方法など。 `svelte-ts-sample.svelte` ```svelte <script lang="ts"> let count: number = 0; const increment = () => { count += 1; } </script> <style> h1 { color: purple; font-family: 'Comic Sans MS', cursive; font-size: 2em; } </style> <h1>Count: {count}!</h1> <button on:click={increment}> + </button> ``` 新規でプロジェクトを作る際は、公式のテンプレートにsetupスクリプトが用意されている。 これまでも、有志が開発したツールとして `svelte-preprocess`や`VSCode Extension`があったので、TypeScriptで開発は可能だった。 今回、それらのツール郡が公式のOrg配下に入って、公式にTypeScriptをサポートした。 - [svelte-preprocess](https://github.com/sveltejs/svelte-preprocess) - Svelteのプリプロセッサ - TypeScript以外にもSCSS, CoffeeScriptなどもサポートしてる - [svelte-language-server](https://github.com/sveltejs/language-tools/tree/master/packages/language-server) - SvelteのLSP - [svelte-vscode](https://github.com/sveltejs/language-tools/tree/master/packages/svelte-vscode) - VSCode拡張(Svelte for VS Code) - 補完や型エラーの表示など快適に開発できる - テンプレート部分でも補完や型チェックなどが効くよ - [svelte-check](https://github.com/sveltejs/language-tools/tree/master/packages/svelte-check) - CLIのチェックツール - 利用されてないCSSやa11y、TSの型チェック - [svelte2tsx](https://github.com/sveltejs/language-tools/tree/master/packages/svelte2tsx) - SvelteコンポーネントをTSXに変換する - テンプレートのattributeやコンポーネントのpropsの型チェック(svelte-jsx.d.ts, svelte-shims.d.ts)を実現するために使ってるっぽい - [@tsconfig/svelte](https://github.com/tsconfig/bases/blob/master/bases/svelte.json) - Svelteプロジェクト用のtsconfig 手元のプロジェクトで試した感じ簡単にセットアップできるし、快適に開発できそう。パフォーマンスとDXが両立されてる感じ。 --- ## [Building better in the world of build tools!](https://youtu.be/vsMJiNtQWvw) - 共有者: zaki___yama web.dev LIVEのセッション。 webpack, Parcel, Rollup などのビルドツールの特徴や長所・短所の話。 印象に残ったエピソードとしては7:00あたりの - Q. Parcel はメインスレッド用とWorker用のバンドルに重複したモジュールがあるとき、うまく解釈して共通のチャンクに切り出してるみたいだけど、なんか理由あるの? - [Squoosh.app](https://squoosh.app/) というWebアプリを作ってたとき、webpackだとWorkerとMain用のバンドルに重複したコードが存在することがわかった - 本当は共通のchunkに切り出してほしい - webpackに長文のissueを立てて、どう変更してほしいか説明した - おそらくこれ: [The case for Workers · Issue #6472 · webpack/webpack](https://github.com/webpack/webpack/issues/6472) - webpack側は解決してないけど、issue立てた直後、Parcelのメンテナーが「これParcelだとうまくできるかも」と言ってissueを立ててた - 数ヶ月後にcloseされてて、Parcelではサポートされている という話。 また、最後に紹介されていた [Tooling.Report](https://bundlers.tooling.report/) というサイトが便利そう。 webpackやRollupなどのビルドツールの機能差異がまとまっている。 各機能(tree shakingとか)をサポートしてるかどうかテストが書かれてて、それらをリファレンス実装として参考にすることもできる --- ## [HTMHell special: close buttons](https://www.htmhell.dev/20-close-buttons/) - 共有者: b4h0_c4t a11yから見た、「閉じるボタン」の実装でやりがちなバッドプラクティス11選。 1. div and background image 1. div and icon 1. Font Awesome icons 1. A close link 1. A close link with text 1. A close link without the href attribute 1. Placeholder link and img 1. Radio button 1. Button with icon 1. Button with svg 1. The good ol' X 要約すると - `<button>`を使う - `<div>`はボタンではない - `<a>`はbuttonではない - `<input type="radio">`はボタンではない - 適切なコンテンツを埋め込む - FontAwesomeのアイコンは読み上げられない - `×`や`x`は閉じるという意味ではない - svgは代替テキストを持たない - FontAwesomeや'x'をどうしても使いたい場合 - xやFontAwesomeに`aria-hidden=true`を付ける - 代替文字列を入れる - 文字を併記する場合: `<span>`で読み上げテキストを表現 - 文字を見せたくない場合: `<button>`に`aria-label`を追加 #### 名言 *Using "x" for your close buttons is like using salt in your coffee cause it looks the same as sugar.* --- ## [Vue 3 is now in RC!](https://github.com/vuejs/rfcs/issues/189) - 共有者: nakajmg Vue3がRCになりました。8月中旬くらいにリリース予定! Vueは公式のツール郡が魅力の1つですが、それらツールのVue3対応が必要で正式リリースまで時間がかかっているとのこと。   IE11compatbuildとかmigrationのガイドが準備中で、Vue2からVue3にアップグレードするのはこれが出てからにするとよさそう。[Vue 3: Mid 2020 Status Update](https://github.com/vuejs/rfcs/issues/183) にあるDecision Treeを見ればどのタイミングでVue3を使い始めるのがいいかの判断材料に。 #### [SFC Improvements](https://github.com/vuejs/rfcs/pull/182) experimentalな機能として次の機能がrc版に入りました。 - `<script setup>` - `<Suspence>` - `<style vars>` うーん! --- ## [JavaScriptの生みの親ブレンダン・アイクがJavaScriptの呼び方について言及した話](https://twitter.com/BrendanEich/status/1278803332287483904) - 共有者: @pirosikick 小ネタ。JavaScriptの生みの親ブレンダン・アイクは、「Java」と混同しない、かつ、より短い呼び方の「JS」がよいと思っている。 - [ことの発端のTweet](https://twitter.com/runhappylife/status/1278360272231641088) - 「もしJavaScriptをrenameする機会があったら、何にする?」 - 途中でブレンダン・アイクにメンションが飛ぶ("You Don't Know JS"の人) - ブレンダン・アイク登場 --- ## [Grunt 1.2.0 released](https://gruntjs.com/blog/2020-07-03-grunt-1.2.0-released) - 共有者: sakito Grunt一時期止まっていたけど、2020年3月あたりから生き返ってたんですね。 --- ## [Node v14.6.0 (Current) | Node.js](https://nodejs.org/en/blog/release/v14.6.0/) - 共有者: @shisama_ 今月の Node.js のアップデート情報です。 package.json に "imports" フィールドが追加されました。これはモジュールに対して alias を貼ることができる機能です。 また、"exports" フィールドのように実行環境ごとに読み込むファイルを変えることもできます。 以下の例だと `#dep` という alias に対して Node.js だと "node_modules/dep-node-native" を読み込み、それ以外は "./local-polyfill.js" を読み込みます。 ```json "imports": { "#dep": { "node": "dep-node-native", "default": "./local-polyfill.js" } }, ``` --- ## [How to delete all node_modules directories from your computer](https://gomakethings.com/how-to-delete-all-node_modules-directories-from-your-computer/) - 共有者: @toshi__toma 小ネタ。PCローカルの`node_modules`を全部消す方法!! 確かに、PCに大量の`node_modules`あるなぁと思った。 PCのどっかに同じパッケージを既にインストールしてるなら、そっち参照してくれたらエコだなーとか雑に思う。 ghqでリポジトリ管理してるひとは、ディレクトリ指定して、簡単に自分のPCのnode_modulesのサイズ確認/削除できる。 予想以上に結構多かったw --- ## [Rust for JavaScript Developers - Tooling Ecosystem Overview](http://www.sheshbabu.com/posts/rust-for-javascript-developers-tooling-ecosystem-overview/) - 共有者: zaki___yama JS開発者向けのRustの話。 個人ブログにシリーズものとして連載してて、今4回め。 リンクしたのは第1回目のツールの対比、Rust勉強し始めたときに知りたかった。 2回目以降はデータ型や関数などがJSとRustでどう違うかなどの話っぽい。 --- ## [Creating a Design System in React](https://medium.com/javascript-in-plain-english/creating-a-design-system-in-react-5c4d811d0ccc) - 共有者: @pirosikick Bitというデザインシステムを構築・配布するようにサービスを使って、デザインシステムを構築する話。 https://bit.dev/ デザインシステムで各コンポーネントを個別で開発・publish・利用・更新するのを楽にしてくれるCLIツール(bit-bin)と、 bit.dev上でドキュメントの公開や動作検証ができるようです。 自分でmonorepoを構築して管理するのは結構大変ですが、 - bit add src/components/\* - bit export 名前 でコンポーネント毎にpublishできるのはさくっとできてよさそう。(記事中のGifがわかりやすい) Bitに依存しすぎると後々辛くなりそうですが、個人&publicであれば無料で使えるみたいなのでちょっと使ってみるにはよさそうでした。 余談:↑のMedium、JavaScript in plain englishというブログで、シンプルな英語で読みやすい記事が多そうでした。 --- ## 今月のJSer.info 毎週のフロントエンドウィークリーでは、各メンバーからの共有以外にも[Jser.info](https://jser.info/)を確認しています。いつもお世話になっています🙌 - [2020-07-06のJS: Firefox 78、Vue 3 Statusとリリーススケジュール](https://jser.info/2020/07/06/firefox-78-vue-3-status/) - [2020-07-14のJS: fastify 3.0.0、The future of hapi、Malina.js、Solid.js](https://jser.info/2020/07/14/fastify-3.0.0-the-future-of-hapi-malina.js-solid.js/) - [2020-07-21のJS: Chrome 84(SameSite Cookie)、Vue 3 RC、React Spectrum](https://jser.info/2020/07/21/chrome-84samesite-cookie-vue-3-rc-react-spectrum/) - [2020-07-28のJS: SvelteのTypeScriptサポート、Chrome 85 beta、Web Speed Hackathon Online](https://jser.info/2020/07/28/sveltetypescript-chrome-85-beta-web-speed-hackathon-online/) ## 宣伝 [チーム紹介資料](https://speakerdeck.com/cybozuinsideout/hurontoendoekisupatotimunituite)

    Import from clipboard

    Advanced permission required

    Your current role can only read. Ask the system administrator to acquire write and comment permission.

    This team is disabled

    Sorry, this team is disabled. You can't edit this note.

    This note is locked

    Sorry, only owner can edit this note.

    Reach the limit

    Sorry, you've reached the max length this note can be.
    Please reduce the content or divide it to more notes, thank you!

    Import from Gist

    Import from Snippet

    or

    Export to Snippet

    Are you sure?

    Do you really want to delete this note?
    All users will lost their connection.

    Create a note from template

    Create a note from template

    Oops...
    This template is not available.


    Upgrade

    All
    • All
    • Team
    No template found.

    Create custom template


    Upgrade

    Delete template

    Do you really want to delete this template?

    This page need refresh

    You have an incompatible client version.
    Refresh to update.
    New version available!
    See releases notes here
    Refresh to enjoy new features.
    Your user state has changed.
    Refresh to load new user state.

    Sign in

    Forgot password

    or

    By clicking below, you agree to our terms of service.

    Sign in via Facebook Sign in via Twitter Sign in via GitHub Sign in via Dropbox Sign in via Google

    New to HackMD? Sign up

    Help

    • English
    • 中文
    • Français
    • Deutsch
    • 日本語
    • Español
    • Català
    • Ελληνικά
    • Português
    • italiano
    • Türkçe
    • Русский
    • Nederlands
    • hrvatski jezik
    • język polski
    • Українська
    • हिन्दी
    • svenska
    • Esperanto
    • dansk

    Documents

    Tutorials

    Book Mode Tutorial

    Slide Mode Tutorial

    YAML Metadata

    Contacts

    Facebook

    Twitter

    Feedback

    Send us email

    Resources

    Releases

    Pricing

    Blog

    Policy

    Terms

    Privacy

    Cheatsheet

    Syntax Example Reference
    # Header Header 基本排版
    - Unordered List
    • Unordered List
    1. Ordered List
    1. Ordered List
    - [ ] Todo List
    • Todo List
    > Blockquote
    Blockquote
    **Bold font** Bold font
    *Italics font* Italics font
    ~~Strikethrough~~ Strikethrough
    19^th^ 19th
    H~2~O H2O
    ++Inserted text++ Inserted text
    ==Marked text== Marked text
    [link text](https:// "title") Link
    ![image alt](https:// "title") Image
    `Code` Code 在筆記中貼入程式碼
    ```javascript
    var i = 0;
    ```
    var i = 0;
    :smile: :smile: Emoji list
    {%youtube youtube_id %} Externals
    $L^aT_eX$ LaTeX
    :::info
    This is a alert area.
    :::

    This is a alert area.

    Versions

    Versions and GitHub Sync

    Sign in to link this note to GitHub Learn more
    This note is not linked with GitHub Learn more
     
    Add badge Pull Push GitHub Link Settings
    Upgrade now

    Version named by    

    More Less
    • Edit
    • Delete

    Note content is identical to the latest version.
    Compare with
      Choose a version
      No search result
      Version not found

    Feedback

    Submission failed, please try again

    Thanks for your support.

    On a scale of 0-10, how likely is it that you would recommend HackMD to your friends, family or business associates?

    Please give us some advice and help us improve HackMD.

     

    Thanks for your feedback

    Remove version name

    Do you want to remove this version name and description?

    Transfer ownership

    Transfer to
      Warning: is a public team. If you transfer note to this team, everyone on the web can find and read this note.

        Link with GitHub

        Please authorize HackMD on GitHub

        Please sign in to GitHub and install the HackMD app on your GitHub repo. Learn more

         Sign in to GitHub

        HackMD links with GitHub through a GitHub App. You can choose which repo to install our App.

        Push the note to GitHub Push to GitHub Pull a file from GitHub

          Authorize again
         

        Choose which file to push to

        Select repo
        Refresh Authorize more repos
        Select branch
        Select file
        Select branch
        Choose version(s) to push
        • Save a new version and push
        • Choose from existing versions
        Available push count

        Upgrade

        Pull from GitHub

         
        File from GitHub
        File from HackMD

        GitHub Link Settings

        File linked

        Linked by
        File path
        Last synced branch
        Available push count

        Upgrade

        Danger Zone

        Unlink
        You will no longer receive notification when GitHub file changes after unlink.

        Syncing

        Push failed

        Push successfully