add post and update short code

12bitvn · Dec 28, 2018 · 1493eae · 1493eae
1 parent 4142f48
commit 1493eae
Show file tree

Hide file tree

Showing 10 changed files with 150 additions and 4 deletions.
diff --git a/content/pages/shortcodes.md b/content/pages/shortcodes.md
@@ -106,3 +106,11 @@ console.log(array1[2]);
 // expected output: "goose"
 ```
 {{% /runkit %}}
+
+## caniuse
+
+```markdown
+{{</* caniuse feature="proxy" */>}}
+```
+
+{{< caniuse feature="proxy" >}}
diff --git a/content/posts/5-app-giup-tang-productivity-tren-mac.md b/content/posts/5-app-giup-tang-productivity-tren-mac.md
@@ -6,9 +6,94 @@ tags: [mac, tool, productivity]
 thumbnail: /img/posts/default-thumb-1200-630.png
 author:
     name: vominh
-    github: github_username
+    github: vominh
-draft: true
+draft: false
 ---
 
 Nếu biết cách sử dụng những công cụ phù hợp và tốt vào công việc thì hiệu suất công việc sẽ tăng lên đáng kể, hoặc ít nhất là có thể làm mình trông ngầu hơn một chút /jk. Trong bài này mình sẽ giới thiệu với các bạn những công cụ mà mình đang sử dụng trên macOS. Mình nghĩ đây là những công cụ cũng khá phổ biến và hỗ trợ cho mình khá nhiều.
 
+## TL;DR
+
+Đây là các app mình dùng trên mac:
+
+1. [Reeder](http://reederapp.com/)
+2. [Better Touch Tool](https://folivora.ai/)
+3. [AlfredApp](https://www.alfredapp.com/)
+4. [Numi](https://numi.io/)
+5. [Touch Switcher](https://hazeover.com/touchswitcher.html)
+
+## [Reeder](http://reederapp.com/)
+
+Viết và đọc là công cụ truyền tải kiến thức, thông tin rất hữu ích. Mọi thứ xung quanh chúng ta thay đổi rất nhanh, thói quen đọc và cập nhật thông tin là rất cần thiết. Nhưng để truy cập từng trang web mà đọc thì thật không tiện chút nào. Trong khi đa số website ngày nay hỗ trợ RSS. Chúng ta có thể sử dụng RSS Reader để đọc mọi trang web ở cùng một giao diện. Reeder là một app như vậy:
+
+![reeder](https://cdn-images-1.medium.com/max/2000/1*N-6ORa5wuyU7Q9reZufovg.png)
+
+App khá dễ sử dụng, hỗ trợ nhiều collection khác nhau. Trong mỗi collection có thể add nhiều site hoặc folder, bạn chỉ cần nhập vào url của website, app sẽ tự search các feel mà bạn có thể subscribe:
+
+![reeder](https://cdn-images-1.medium.com/max/1600/1*KqcL4aKw6Dt2nXdU4JWm_w.png)
+
+Ngoài ra bạn còn có thể đặt các feed vào những thư mục khác nhau:
+
+![reeder](https://cdn-images-1.medium.com/max/2000/1*JYQHtLmpzJTXqZPUQZpD3g.png)
+
+## [Better Touch Tool](https://folivora.ai/)
+
+TrackPad, MagicMouse, Magic Trackpad là những cái mình thích nhất trên các máy mac, cảm biến rất nhạy, nhờ đó những tác vụ trên các công cụ này nhạy hơn và tiện dụng hơn, trải nghiệm rất tốt.
+
+![better touch tool](https://cdn-images-1.medium.com/max/1600/1*-wInHZvoCHnKWYZcnNKc0w.png)
+
+Mặc định thì macOS đã hỗ trợ khá nhiều gesture. Nhưng có vẻ nhiêu đó vẫn chưa đủ, đặt biệt là trên Magic Mouse, nguyên mặc lưng của Magic Mouse đều là cảm ứng, nhưng mac chỉ hỗ trợ rất ít gesture:
+
+![better touch tool](https://cdn-images-1.medium.com/max/1600/1*dIexUbfl5-JYsRpUO3NX8w.png)
+
+Chúng ta muốn có thể làm được nhiều việc hơn, ít nhất là cũng phải tương đương với TrackPad, đặt biệt là “swipe between fullscreen app”.
+
+Đa số nhu cầu thương ngày mà chúng ta cần đều đã được hiện thực ở một đâu đó, trong trường hợp này là Better Touch Tool.
+
+![better touch tool](https://cdn-images-1.medium.com/max/2000/1*VGoaGX_qG12E4uGpAw_jFw.png)
+
+App định nghĩa hầu như tất cả gesture mà bạn có thể nghĩ ra, thậm chí là cho 4 ngón tay, hoặc một cái chạm ở một điểm nào đó trên chuột.
+
+Hiện mình định nghĩa một số gesture phổ biến, thực ra thì nếu định nghĩa quá nhiều, chúng ta cũng không thể nào mà nhớ cho hết được:
+
+![better touch tool](https://cdn-images-1.medium.com/max/2000/1*L7fU2DMZ7c4D34SF6o_bGg.png)
+
+## [AlfredApp](https://www.alfredapp.com/)
+
+Đây là launcher cho macOS, hỗ trợ rất nhiều chức năng nâng cao và có thể thay thế cho Spotlight mặc định của macOS.
+
+![alfredd app](https://cdn-images-1.medium.com/max/2000/1*ti6wALPSXP9PifwJ7oLkJg.png)
+
+Mình có giới thiệu về app này trước đây, bạn đó thể đọc tại bài: Làm việc hiệu quả hơn với Alfred.
+
+## [Numi](https://numi.io/)
+
+Nếu như bạn gặp vấn đề thế này:
+
+1. App calc quá đơn giản, kém trực quan
+1. Excel/Google Sheet thì lại quá phức tạp và mở app đó ra quá bất tiện
+
+Và bạn cần một app như sau:
+
+1. Trực quan, viết bằng ngôn ngữ tự nhiên
+2. Chuyển đổi giữa các đơn vị dễ hơn
+3. Mạnh mẽ, đơn giản, dễ dùng, và đẹp
+4. Có khả năng customize
+
+Thì Numi chính là app mà bạn cần, không cần phải nói gì nhiều về app, nó chính là những gì giải quyết nhu cầu của bạn
+
+![numi](https://cdn-images-1.medium.com/max/2000/1*GPA2FDbQEqX3d7v3KApDfg.png)
+
+## [Touch Switcher](https://hazeover.com/touchswitcher.html)
+
+Có nhiều người nói touchbar không có lợi ích gì, cũng có người nói touchbar lợi ích kém hơn cái giá phải bỏ ra cho nó. Ban đầu mình cũng nghĩ touchbar không có lợi ích như cái giá của nó, trên app PhpStorm, mình thường refactor bằng tổ hợp phím command + F6, nhưng phải vào setting thì mới có thể set cho các phím function này hiển thị một cách mặc định.
+
+Nhưng dù sao, không có option bỏ cái touchbar đi, mình may mắn tìm thấy app Touch Switcher này, nó sẽ hiển thị một cái app switcher trên touchbar, bạn có thể di chuyển nhanh chóng giữa các app mà không cần đến dock nữa, có thể yên tâm ẩn dock đi.
+
+{{< youtube r26-k20NXwY >}}
+
+## Lời kết
+
+Sử dụng đúng công cụ sẽ giúp chúng ta tiết kiệm rất nhiều thời gian và công sức, để ta có thể tập trung nhiều hơn vào công việc cần làm, hiệu suất làm việc sẽ tăng lên nhiều.
+
+Nhưng cũng có mặt trái của nó, có nhiều người thích cài càng nhiều công cụ càng tốt, thậm chí là nằm ngoài nhu cầu, việc đó chỉ làm họ phải tập trung tinh thần vào sử dụng công cụ thay vì công việc.
diff --git a/content/posts/reflect-trong-es6.md b/content/posts/reflect-trong-es6.md
@@ -82,3 +82,5 @@ obj.count+2
 Như đã nói, Reflect có các phương thức tương ứng với các trap, vì vậy bạn chỉ cần return trực tiếp là được.
 
 Bài viết ngắn gọn này nhằm sử dụng làm tham khảo cho các bài viết khác, cũng như cung cấp thông tin ngắn gọn về reflect và cách dùng nó với proxy.
+
+{{% caniuse feature="proxy" %}}
diff --git a/content/posts/xay-dung-3d-button-trong-flutter.md b/content/posts/xay-dung-3d-button-trong-flutter.md
@@ -4,7 +4,7 @@ date: 2018-12-10T16:24:00+07:00
 tags: [flutter, mobile, ui]
 thumbnail: https://cdn-images-1.medium.com/max/1000/1*RRIkgyR8vHZFB2bX5G9M3g.png
 author:
-    name: Duoc Nguyen
+    name: vominh
     github: nguyenvanduocit
 draft: false
 ---

diff --git a/content/posts/xu-li-anh-khi-khong-load-duoc-ban-service-worker.md b/content/posts/xu-li-anh-khi-khong-load-duoc-ban-service-worker.md
@@ -5,7 +5,7 @@ tags: ["javascript"]
 thumbnail: img/posts/xu-li-anh-khi-khong-load-duoc-ban-service-worker-01.png
 canonical: https://medium.com/12bit/x%C3%A2y-d%E1%BB%B1ng-3d-button-trong-flutter-3ffc403ac346
 author:
-    name: Duoc Nguyen
+    name: vominh
     github: nguyenvanduocit
 draft: false
 ---

diff --git a/themes/blog/assets/scss/style.scss b/themes/blog/assets/scss/style.scss
@@ -35,6 +35,16 @@ a {
   }
 }
 
+ol, ul{
+  li{
+    line-height: 1.0;
+    margin-bottom: 15px;
+    &:last-child{
+      margin-bottom: 0;
+    }
+  }
+}
+
 a[target="_blank"] {
   &:after {
     $newtab-link-icon: "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' class='i-external' viewBox='0 0 32 32' width='14' height='14' fill='none' stroke='#{$color-light}' stroke-linecap='round' stroke-linejoin='round' stroke-width='9.38%'><path d='M14 9 L3 9 3 29 23 29 23 18 M18 4 L28 4 28 14 M28 4 L14 18'/></svg>";
@@ -429,3 +439,23 @@ figcaption{
     opacity: .3;
   }
 }
+
+.ciu_embed{
+  line-height: 0;
+}
+
+.youtube_embed{
+  position: relative;
+  padding-bottom: 56.25%;
+  height: 0;
+  overflow: hidden;
+  margin-bottom: 1.5rem;
+  iframe{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: 0;
+  }
+}
diff --git a/themes/blog/layouts/partials/footer.html b/themes/blog/layouts/partials/footer.html
@@ -22,6 +22,9 @@
 {{ $highlightJs := resources.Get "js/highlight.pack.js" | resources.Minify | resources.Fingerprint }}
 <script src="{{ $highlightJs.RelPermalink }}"></script>
 <script>hljs.initHighlightingOnLoad();</script>
+{{ if ($.Page.Scratch.Get "include_caniuse") "true" }}
+<script async src="https://cdn.jsdelivr.net/gh/ireade/caniuse-embed/caniuse-embed.min.js"></script>
+{{ end }}
 </body>
 
 </html>
diff --git a/themes/blog/layouts/shortcodes/caniuse.html b/themes/blog/layouts/shortcodes/caniuse.html
@@ -0,0 +1,3 @@
+{{ .Page.Scratch.Set "include_caniuse" true }}
+{{ $periods := .Get "periods" | default "future_1,current,past_1,past_2" }}
+<div class="ciu_embed" data-feature="{{ .Get "feature" }}" data-periods="{{ $periods }}"></div>
diff --git a/themes/blog/layouts/shortcodes/codesandbox.html b/themes/blog/layouts/shortcodes/codesandbox.html
@@ -0,0 +1,12 @@
+<p>
+  <iframe
+    height='500'
+    scrolling='no'
+    src='https://codesandbox.io/embed/{{ index .Params 0 }}'
+    frameborder='no'
+    allowtransparency='true'
+    allowfullscreen='true'
+    style='width: 100%;'
+>
+  </iframe>
+</p>
diff --git a/themes/blog/layouts/shortcodes/youtube.html b/themes/blog/layouts/shortcodes/youtube.html
@@ -0,0 +1,3 @@
+<div class="youtube_embed">
+  <iframe src="//www.youtube.com/embed/{{ index .Params 0 }}" allowfullscreen="" title="YouTube Video"></iframe>
+</div>