====== Júne's Web Management ======
{{:playground:boo_the_bunny_04.png?nolink&250|}}
* **News on Cupertino, CA**: {{rss>https://news.google.com/news/rss/local/section/geo/Cupertino,%20CA,%20United%20States/Cupertino,%20California?ned=us&hl=en&gl=US date 5}}
----
==== Checklist for web management ====
^ Checklists ^ **''J''** ^ **''B''** ^ **''S''** ^ **''O''** ^ **''N''** ^ **''P''** ^ **''C''** ^ **''W''** ^ **''M''** ^ **''X''** ^ **''K''** ^ **''R''** ^ **''T''** ^
| {{fa>check-circle?color=#000000}} **HTTPS configuration** | {{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}} **Test: Responsive Web** | {{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}} **Leverage Browser Caching, HTTP Caching** \\ --- [[: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}} **error page for 404, 401(301)** | {{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}} Opens External Anchors Using \\ ''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}} **Setting: favicon** \\ 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}} **theme color for mobile browser** \\ --- ''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}} **Google Fonts** \\ --- {{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}} **Setting: Open Graph** | {{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]] --- Updated on //2020/07/17 22:13//
* **gzip** compression -- [[https://meson.in/2ZAaAnn|How To Add the gzip Module to Nginx]] --- Updated on //2020/07/17 22:05//
* ''bidirectional'' configuration for WebDAV, ''lib'' ''pdf'' ''dav''
* Web Signature / profile image arrangement --- done on //2018/02/12 07:11//
* Wiki or manual for Google Suite management
----
===== Blog administration =====
{{:playground:pussy_cat_6_.png?nolink&150|}}
----
==== the Great World Meson ====
**''HTTPS://JUNE.MESON.KR''** {{fa>pencil-square-o?color=#957186}} Primary blog for scientific, social, technical issue and for myself.
{{:web:june_meson.png?nolink&200|}} \\
{{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}} Keep the art of quote from various person and time and write my own thoughts.
{{:web:blog_onni.png?nolink&200|}} \\
{{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}} Autonomous delivery tweets from Júne's Pri/Sec twitter.
{{fa>cogs?color=#371777}} tweets posted in {{fa>twitter?color=#0084b4&2x}} are copied automatically.
{{:web:saddle_onni.png?nolink&200|}} \\
{{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}} Collection of articles worthy of reading again or materials for my new article.
{{fa>cogs?color=#371777}} Saved article in {{fa>rss?color=#2bb24c&2x}} is delivered automatically
{{:web:reasonomics_com.png?nolink&200|}} \\
{{fa>rss-square?2x&color=#FF4500}} article updates: {{rss>https://reasonomics.com/feed/ 3}}
=== +Work log ===
* Force ''https'' using ''CloudFlare(tm)'' --- Updated on //2018/08/04 03:48//
----
==== Meson's Tube Box ====
**''HTTPS://TB.MESON.KR''** {{fa>pencil-square-o?color=#957186}} Wish to collect video clips that I like.
{{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]]
* **''J''** {{fa>thumbs-o-up}} / **''B''** {{fa>thumbs-o-up}} / **''S''** {{fa>thumbs-o-up}} / **''P''** {{fa>thumbs-o-up}} / **''C''** {{fa>thumbs-o-up}} / **''W''** {{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.
**''style code''**
#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;
}
----