Show pageOld revisionsBacklinksBack to top This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong. ====== Júne's Web Management ====== {{:playground:boo_the_bunny_04.png?nolink&250|}} <hidden> * **News on Cupertino, CA**: <text type="info">{{rss>https://news.google.com/news/rss/local/section/geo/Cupertino,%20CA,%20United%20States/Cupertino,%20California?ned=us&hl=en&gl=US date 5}}</text> </hidden> ---- ==== Checklist for web management ==== ^ Checklists ^ **''<tooltip title="the Great World Meson">J</tooltip>''** ^ **''<tooltip title="Stranger than Meson">B</tooltip>''** ^ **''<tooltip title="Saddle in Ripple">S</tooltip>''** ^ **''<tooltip title="Aquí está Júne">O</tooltip>''** ^ **''<tooltip title="Júne's CDN Networks">N</tooltip>''** ^ **''<tooltip title="June's PiON Gateway">P</tooltip>''** ^ **''<tooltip title="June's Cloud">C</tooltip>''** ^ **''<tooltip title="June's Wiki">W</tooltip>''** ^ **''<tooltip title="June's MuON Gateway">M</tooltip>''** ^ **''<tooltip title="June's Xchange">X</tooltip>''** ^ **''<tooltip title="June's OWL">K</tooltip>''** ^ **''<tooltip title="iWork:reasonomics">R</tooltip>''** ^ **''<tooltip title="Meson's Tube Box">T</tooltip>''** ^ | {{fa>check-circle?color=#000000}} <text type="success">**HTTPS configuration**</text> | {{fa>check?color=#000000}} | {{fa>check?color=#000000}} | {{fa>check?color=#000000}} | {{fa>check?color=#000000}} | {{fa>check?color=#000000}} | {{fa>check?color=#be0027}} | {{fa>check?color=#be0027}} | {{fa>check?color=#be0027}} | {{fa>check?color=#be0027}} | {{fa>check?color=#be0027}} | {{fa>check?color=#be0027}} | {{fa>check?color=#f38020}} | {{fa>check?color=#000000}} | | {{fa>check-circle?color=#000000}} <text type="success">**Test: Responsive Web**</text> | {{fa>check?color=#000000}} | {{fa>check?color=#000000}} | {{fa>check?color=#000000}} | {{fa>check?color=#000000}} | {{fa>check?color=#000000}} | {{fa>check?color=#000000}} | {{fa>check?color=#000000}} | {{fa>check?color=#000000}} | {{fa>check?color=#000000}} | {{fa>check?color=#000000}} | {{fa>check?color=#000000}} | {{fa>check?color=#000000}} | {{fa>check?color=#000000}} | | {{fa>check-circle?color=#000000}} <text type="success">**Leverage Browser Caching, HTTP Caching**</text> \\ --- [[:rpi_nimbus#nginx_cache_control|Nginx cache control]] | {{fa>check?color=#FFFFFF}} | {{fa>check?color=#FFFFFF}} | {{fa>check?color=#FFFFFF}} | {{fa>check?color=#FFFFFF}} | {{fa>check?color=#FFFFFF}} | {{fa>check?color=#FFFFFF}} | {{fa>check?color=#000000}} | {{fa>check?color=#FFFFFF}} | {{fa>check?color=#FFFFFF}} | {{fa>check?color=#FFFFFF}} | {{fa>check?color=#FFFFFF}} | {{fa>check?color=#FFFFFF}} | {{fa>check?color=#FFFFFF}} | | {{fa>check-circle?color=#000000}} <text type="success">**error page for 404, 401(301)**</text> | {{fa>check?color=#000000}} | {{fa>check?color=#000000}} | {{fa>check?color=#000000}} | {{fa>check?color=#000000}} | {{fa>check?color=#FFFFFF}} | {{fa>check?color=#000000}} | {{fa>check?color=#AAAAAA}} | {{fa>check?color=#AAAAAA}} | {{fa>check?color=#FFFFFF}} | {{fa>check?color=#FFFFFF}} | {{fa>check?color=#FFFFFF}} | {{fa>check?color=#FFFFFF}} | {{fa>check?color=#FFFFFF}} | | {{fa>check-circle?color=#000000}} <text type="success">Opens External Anchors Using</text> \\ ''rel='noopener noreferrer' '' --- [[https://developers.google.com/web/tools/lighthouse/audits/noopener|Google Developers]] | {{fa>check?color=#FFFFFF}} | {{fa>check?color=#FFFFFF}} | {{fa>check?color=#000000}} | {{fa>check?color=#FFFFFF}} | {{fa>check?color=#FFFFFF}} | {{fa>check?color=#FFFFFF}} | {{fa>check?color=#FFFFFF}} | {{fa>check?color=#000000}} | {{fa>check?color=#FFFFFF}} | {{fa>check?color=#FFFFFF}} | {{fa>check?color=#FFFFFF}} | {{fa>check?color=#FFFFFF}} | {{fa>check?color=#FFFFFF}} | | {{fa>check?color=#000000}} <text type="info">**Setting: favicon**</text> \\ Manifest's short_name in ''site.webmanifest'' --- [[https://developers.google.com/web/tools/lighthouse/audits/manifest-short_name-is-not-truncated|Google Developers]] | {{fa>check?color=#000000}} | {{fa>check?color=#000000}} | {{fa>check?color=#FFFFFF}} | {{fa>check?color=#000000}} | {{fa>check?color=#FFFFFF}} | {{fa>check?color=#000000}} | {{fa>check?color=#000000}} | {{fa>check?color=#000000}} | {{fa>check?color=#FFFFFF}} | {{fa>check?color=#FFFFFF}} | {{fa>check?color=#000000}} | {{fa>check?color=#FFFFFF}} | {{fa>check?color=#000000}} | | {{fa>check?color=#000000}} <text type="info">**theme color for mobile browser**</text> \\ --- ''theme-color'' | {{fa>check?color=#000000}} | {{fa>check?color=#000000}} | {{fa>check?color=#000000}} | {{fa>check?color=#000000}} | {{fa>check?color=#000000}} | {{fa>check?color=#000000}} | {{fa>check?color=#000000}} | {{fa>check?color=#FFFFFF}} | {{fa>check?color=#000000}} | {{fa>check?color=#000000}} | {{fa>check?color=#FFFFFF}} | {{fa>check?color=#000000}} | {{fa>check?color=#000000}} | | {{fa>check?color=#000000}} <text type="info">**Google Fonts**</text> \\ --- {{fa>font?color=#00BB00}}[[https://fonts.google.com/|Google Fonts]] , {{fa>font?color=#20CCDD}} [[https://fonts.google.com/earlyaccess|Early Access]] | {{fa>check?color=#FFFFFF}} | {{fa>check?color=#FFFFFF}} | {{fa>check?color=#FFFFFF}} | {{fa>check?color=#FFFFFF}} | {{fa>check?color=#FFFFFF}} | {{fa>check?color=#FFFFFF}} | {{fa>check?color=#FFFFFF}} | {{fa>check?color=#FFFFFF}} | {{fa>check?color=#FFFFFF}} | {{fa>check?color=#FFFFFF}} | {{fa>check?color=#FFFFFF}} | {{fa>check?color=#FFFFFF}} | {{fa>check?color=#FFFFFF}} | | {{fa>check?color=#000000}} <text type="info">**Setting: Open Graph**</text> | {{fa>check?color=#000000}} | {{fa>check?color=#000000}} | {{fa>check?color=#000000}} | {{fa>check?color=#FFFFFF}} | {{fa>check?color=#FFFFFF}} | {{fa>check?color=#000000}} | {{fa>check?color=#000000}} | {{fa>check?color=#000000}} | {{fa>check?color=#FFFFFF}} | {{fa>check?color=#FFFFFF}} | {{fa>check?color=#FFFFFF}} | {{fa>check?color=#FFFFFF}} | {{fa>check?color=#FFFFFF}} | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | === Color legend === {{fa>check?color=#be0027}}: Manage Certificates by myself {{fa>check?color=#f38020}}: Cloudflare(tm) Flexible SSL ---- ==== Que to do ==== * Add Expires headers -- [[https://meson.in/2WubfEU|Setting expires headers for static content]] <sub> --- Updated on //2020/07/17 22:13// </sub> * **gzip** compression -- [[https://meson.in/2ZAaAnn|How To Add the gzip Module to Nginx]] <sub> --- Updated on //2020/07/17 22:05// </sub> * ''bidirectional'' configuration for WebDAV, ''lib'' ''pdf'' ''dav'' * <del>Web Signature / profile image arrangement</del> --- done on //2018/02/12 07:11// * Wiki or manual for Google Suite management ---- ===== Blog administration ===== {{:playground:pussy_cat_6_.png?nolink&150|}} <button type="info" size="sm" icon="fa fa-lock">[[secured:web_admin|authoring admin]]</button> ---- ==== the Great World Meson ==== **''HTTPS://JUNE.MESON.KR''** {{fa>pencil-square-o?color=#957186}} <text type="info">Primary blog for scientific, social, technical issue and for myself. </text> {{:web:june_meson.png?nolink&200|}} \\ <button type="info" size="sm" icon="fa fa-lock">[[secured:web_admin#the_great_world_meson|authoring admin]]</button> <button type="danger" size="sm" icon="fa fa-pencil">[[https://meson.in/2GHHu9n|post article]]</button> {{fa>rss-square?2x&color=#FF4500}} article updates: {{rss>https://feeds.feedburner.com/GreatWorldMeson 3}} ---- ==== Stranger than Meson ==== **''HTTPS://BLOG.ONNI.ME''** {{fa>pencil-square-o?color=#957186}} <text type="info">Keep the art of quote from various person and time and write my own thoughts. </text> {{:web:blog_onni.png?nolink&200|}} \\ <button type="info" size="sm" icon="fa fa-lock">[[secured:web_admin#Stranger_than_Meson|authoring admin]]</button> <button type="danger" size="sm" icon="fa fa-pencil">[[https://meson.in/2GE0TYM|post article]]</button> {{fa>rss-square?2x&color=#FF4500}} article updates: {{rss>https://feeds.feedburner.com/StrangerThanMeson 3}} ---- ==== Saddle in Ripple ==== **''HTTPS://SADDLE.ONNI.ME''** {{fa>pencil-square-o?color=#957186}} <text type="info">Autonomous delivery tweets from Júne's Pri/Sec twitter.</text> {{fa>cogs?color=#371777}} tweets posted in {{fa>twitter?color=#0084b4&2x}} are copied automatically. {{:web:saddle_onni.png?nolink&200|}} \\ <button type="info" size="sm" icon="fa fa-lock">[[secured:web_admin#saddle_in_ripple|authoring admin]]</button> {{fa>rss-square?2x&color=#FF4500}} article updates: {{rss>https://feeds.feedburner.com/Saddle 3}} ---- ==== iWork: reasonomics ==== **''HTTPS://REASONOMICS.COM''** {{fa>pencil-square-o?color=#957186}} <text type="info">Collection of articles worthy of reading again or materials for my new article.</text> {{fa>cogs?color=#371777}} Saved article in {{fa>rss?color=#2bb24c&2x}} is delivered automatically {{:web:reasonomics_com.png?nolink&200|}} \\ <hidden> {{fa>rss-square?2x&color=#FF4500}} article updates: {{rss>https://reasonomics.com/feed/ 3}} </hidden> === +Work log === * Force ''https'' using ''CloudFlare(tm)'' <sub> --- Updated on //2018/08/04 03:48// </sub> ---- ==== Meson's Tube Box ==== **''HTTPS://TB.MESON.KR''** {{fa>pencil-square-o?color=#957186}} <text type="info">Wish to collect video clips that I like.</text> {{fa>cogs?color=#371777}} Liked streaming in {{fa>youtube?color=#ff0000&2x}} is posted automatically {{:web:tb_meson.png?nolink&200|}} \\ {{fa>rss-square?2x&color=#FF4500}} article updates: {{rss>https://tb.meson.kr/rss 3}} ---- ===== Supplementary & Complementary ===== {{:playground:pussy_cat_20_.png?nolink&150|}} ---- ==== ☆ Next generation blog tools? ==== * [[https://jekyllrb.com/|Jekyll on Github]] * [[https://gohugo.io/hosting-and-deployment/hosting-on-github/|Hugo on Github]] * [[https://ghost.org/|Ghost Publishing tool]] * [[https://hexo.io/|Hexo]] Considerable criteria - Easy to customization - user defined CSS and scripts - Easy to deploy and transfer - Responsive Web ---- ==== … Dev Issues ==== === Script host using Google === {{fa>code?color=#00BBDD&2x}} [[https://developers.google.com/speed/libraries/|Do not host script by yourself]] * **''<tooltip title="the Great World Meson">J</tooltip>''** {{fa>thumbs-o-up}} / **''<tooltip title="Stranger than Meson">B</tooltip>''** {{fa>thumbs-o-up}} / **''<tooltip title="Saddle in Ripple">S</tooltip>''** {{fa>thumbs-o-up}} / **''<tooltip title="June's WebDAV">P</tooltip>''** {{fa>thumbs-o-up}} / **''<tooltip title="June's Cloud">C</tooltip>''** {{fa>thumbs-o-up}} / **''<tooltip title="June's Wiki">W</tooltip>''** {{fa>thumbs-o-up}} ---- === Schema for semantics === * http://schema.org/ ---- ==== … Design Issues ==== === Improve Styles === * [[https://css-tricks.com/breaking-css-box-shadow-vs-drop-shadow/|Box shadow vs. Drop shadow]] * [[https://css-tricks.com/css-basics-fallback-font-stacks-robust-web-typography/|More Robust Web Typography]] --- **n-th child** ---- === Code for social network sharing === Following codes are for ''Blogger'' template. <accordion> <panel title="HTML for social network sharing"> <code html> <div id='june-share'> <!-- facebook --> <a class='facebook' expr:href='"https://www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='noopener noreferrer' target='_blank'> <i class='fa fa-facebook'/></a> <!-- twitter --> <a class='twitter' expr:href='"https://twitter.com/share?url=" + data:post.url + "&text=the Great World Meson :: "+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=550, height=260, left=24, top=24, scrollbars, resizable'); return false;' rel='noopener noreferrer' target='_blank'> <i class='fa fa-twitter'/></a> <!-- google plus --> <a class='googleplus' expr:href='"https://plus.google.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='noopener noreferrer' target='_blank'> <i class='fa fa-google-plus'/></a> <!-- pinterest --> <a class='pinterest' expr:href='"https://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.firstImageUrl + "&description=" + data:post.snippet' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='noopener noreferrer' target='_blank'> <i class='fa fa-pinterest-p'/></a> <!-- pocket --> <a class='pocket' expr:href='"https://getpocket.com/save?url=" + data:post.url' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='noopener noreferrer' target='_blank'><i class='fa fa-get-pocket'/></a> <!-- linkedin --> <a class='linkedin' expr:href='"https://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='noopener noreferrer' target='_blank'><i class='fa fa-linkedin'/></a> <!-- reddit --> <a class='reddit' expr:href='"https://reddit.com/submit/?url=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='noopener noreferrer' target='_blank'><i class='fa fa-reddit-alien'/></a> <!-- email --> <a class='email' expr:href='"mailto:?subject="+ data:post.title + "&body=" + data:post.url' target='_blank'><i class='fa fa-at'/></a> </div> </code> </panel> </accordion> **''style code''** <accordion> <panel title="CSS for social network sharing"> <code css> #june-share { width: 100%; margin: 10px auto; text-align: left; } /* buttons */ #june-share a { width: 45px; height: 45px; display: inline-block; margin: 6px; border-radius: 50%; font-size: 24px; color: #fff; opacity: 0.75; transition: opacity 0.15s linear; } #june-share a:hover { opacity: 1; } /* icons */ #june-share i { position: relative; top: 10%; transform: translateY(-50%); left: 50%; transform: translateX(-50%); } /* colors */ .facebook { background: #3b5998; } .twitter { background: #55acee; } .googleplus { background: #dd4b39; } .pinterest { background: #cb2027; } .linkedin { background: #0077B5; } .reddit { background: #ff4500; } .email { background: #5d5c5d; } .pocket { background: #ef4056; } </code> </panel> </accordion> ---- web/june_blog Last modified: 2020/07/17 13:14by Júne Park
Júne Park