Last active
January 9, 2021 15:33
-
-
Save GerHobbelt/ceb312c764db4f936e04ef085a9672aa to your computer and use it in GitHub Desktop.
Revisions
-
GerHobbelt revised this gist
Jan 9, 2021 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,4 +1,4 @@ # HTML: grey boxes for not-yet-arrived text, etc. (a.k.a. "Skeleton Screens") ## HTML+CSS -
Jan 7, 2021 . No changes.There are no files selected for viewing
-
Jan 7, 2021 . 1 changed file with 21 additions and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -74,7 +74,28 @@ ## Refs - https://getcssscan.com/blog/how-to-inspect-copy-element-css - https://css-tricks.com/building-skeleton-screens-css-custom-properties/ - https://csswizardry.com/2016/10/improving-perceived-performance-with-multiple-background-images/ - https://manu.ninja/dominant-colors-for-lazy-loading-images/ --- # Vue ## Refs - https://manu.ninja/scaffolding-a-progressive-web-app-using-vue-cli-3/ --- # Debugging / Dev ## Refs - https://devland.at/a/chrome-developer-tools -
Jan 7, 2021 . 1 changed file with 25 additions and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -24,7 +24,31 @@ </div> ``` ```css // skeleton-loading.scss .Skeleton--text { -webkit-clip-path: inset(4px 0 4px 0 round 3px 3px 3px 3px); clip-path: inset(4px 0 4px 0 round 3px 3px 3px 3px); } .Skeleton { color: transparent; background-image: linear-gradient(270deg,rgba(0,0,0,.1),rgba(0,0,0,.05),rgba(0,0,0,.05),rgba(0,0,0,.1)); background-size: 400% 100%; animation: skeleton-loading 8s ease-in-out infinite; } * { box-sizing: border-box; } .text-right { text-align: right !important; } .text-gray-light { color: var(--color-text-tertiary) !important; } .Box-row { list-style-type: none; } ``` ## Preview -
Jan 7, 2021 . 1 changed file with 13 additions and 14 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -29,24 +29,23 @@ ## Preview <div role="row" class="Box-row Box-row--focus-gray py-2 d-flex position-relative js-navigation-item "> <div role="gridcell" class="mr-3 flex-shrink-0" style="width: 16px;"> <svg aria-label="Directory" class="octicon octicon-file-directory text-color-icon-directory" height="16" viewBox="0 0 16 16" version="1.1" width="16" role="img"><path fill-rule="evenodd" d="M1.75 1A1.75 1.75 0 000 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0016 13.25v-8.5A1.75 1.75 0 0014.25 3h-6.5a.25.25 0 01-.2-.1l-.9-1.2c-.33-.44-.85-.7-1.4-.7h-3.5z"></path></svg> </div> <div role="rowheader" class="flex-auto min-width-0 col-md-2 mr-3"> <span class="css-truncate css-truncate-target d-block width-fit"><a class="js-navigation-open link-gray-dark" title="thirdparty" href="/ccxvii/mupdf/tree/master/thirdparty">thirdparty</a></span> </div> <div role="gridcell" class="flex-auto min-width-0 d-none d-md-block col-5 mr-3"> <div class="Skeleton Skeleton--text col-7"> </div> </div> <div role="gridcell" class="text-gray-light text-right" style="width:100px;"> <div class="Skeleton Skeleton--text"> </div> </div> </div> ## Refs -
Jan 7, 2021 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,57 @@ # HTML: grey boxes for not-yet-arrived text, etc. ## HTML+CSS ```html <div role="row" class="Box-row Box-row--focus-gray py-2 d-flex position-relative js-navigation-item "> <div role="gridcell" class="mr-3 flex-shrink-0" style="width: 16px;"> <svg aria-label="Directory" class="octicon octicon-file-directory text-color-icon-directory" height="16" viewBox="0 0 16 16" version="1.1" width="16" role="img"><path fill-rule="evenodd" d="M1.75 1A1.75 1.75 0 000 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0016 13.25v-8.5A1.75 1.75 0 0014.25 3h-6.5a.25.25 0 01-.2-.1l-.9-1.2c-.33-.44-.85-.7-1.4-.7h-3.5z"></path></svg> </div> <div role="rowheader" class="flex-auto min-width-0 col-md-2 mr-3"> <span class="css-truncate css-truncate-target d-block width-fit"><a class="js-navigation-open link-gray-dark" title="thirdparty" href="/ccxvii/mupdf/tree/master/thirdparty">thirdparty</a></span> </div> <div role="gridcell" class="flex-auto min-width-0 d-none d-md-block col-5 mr-3"> <div class="Skeleton Skeleton--text col-7"> </div> </div> <div role="gridcell" class="text-gray-light text-right" style="width:100px;"> <div class="Skeleton Skeleton--text"> </div> </div> </div> ``` ## Preview <div role="row" class="Box-row Box-row--focus-gray py-2 d-flex position-relative js-navigation-item "> <div role="gridcell" class="mr-3 flex-shrink-0" style="width: 16px;"> <svg aria-label="Directory" class="octicon octicon-file-directory text-color-icon-directory" height="16" viewBox="0 0 16 16" version="1.1" width="16" role="img"><path fill-rule="evenodd" d="M1.75 1A1.75 1.75 0 000 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0016 13.25v-8.5A1.75 1.75 0 0014.25 3h-6.5a.25.25 0 01-.2-.1l-.9-1.2c-.33-.44-.85-.7-1.4-.7h-3.5z"></path></svg> </div> <div role="rowheader" class="flex-auto min-width-0 col-md-2 mr-3"> <span class="css-truncate css-truncate-target d-block width-fit"><a class="js-navigation-open link-gray-dark" title="thirdparty" href="/ccxvii/mupdf/tree/master/thirdparty">thirdparty</a></span> </div> <div role="gridcell" class="flex-auto min-width-0 d-none d-md-block col-5 mr-3"> <div class="Skeleton Skeleton--text col-7"> </div> </div> <div role="gridcell" class="text-gray-light text-right" style="width:100px;"> <div class="Skeleton Skeleton--text"> </div> </div> </div> ## Refs - https://getcssscan.com/blog/how-to-inspect-copy-element-css