2021年12月19日星期日

blur and click can't be trigger together

https://github.com/vuejs/vue/issues/3350

2021年12月15日星期三

傻眼！父元素和子元素第一個都設margin時會造成margin重疊，建議父元素改padding或其他解法(在連結裡)

https://github.com/marshal604/blog/issues/6

2021年11月1日星期一

web3.js - Ethereum JavaScript API, DApp

https://ethereum.org/en/developers/docs/apis/javascript/

https://web3js.readthedocs.io/en/v1.5.2/getting-started.html

https://ithelp.ithome.com.tw/articles/10202409

https://ethereum.org/zh/developers/docs/intro-to-ethereum/ 介紹看到我们把这些被上传至网络并由网络执行的程序称为智能合约。

2021年10月21日星期四

bazaavoice

https://developer.bazaarvoice.com/conversations-api/reference/v5.4-prr/statistics/statistics-display

2021年10月19日星期二

global language code 對照表

https://www.alchemysoftware.com/livedocs/ezscript/Topics/Catalyst/Language.htm

2021年10月14日星期四

cicd相關，實作上遇到的案例(少部分git merge相關)

1. 這種錯誤訊息是他重載package失敗, 之後可以隔一段時間retry看看

Error CS0234: The type or namespace name 'Security' does not exist in the namespace 'Microsoft' (are you missing an assembly reference?)

2.master/ develop都是同樣的內容，但第三分支在gitlab merge diff show in web卻有不屬於分支修改內容的不同
這時候確認線圖是相同內容就沒問題，那些不同就可以忽略

2021年9月30日星期四

gitlab cicd ^^

How to use GitLab CI/CD for Vue.js:

https://about.gitlab.com/blog/2017/09/12/vuejs-app-gitlab/

How to use GitLab CI to deploy to multiple environments:

https://about.gitlab.com/blog/2021/02/05/ci-deployment-and-environments/

目標:

Runner 如何取得 Artifacts。
Runner 如何將 Artifacts 上傳至目標 Server。

https://ithelp.ithome.com.tw/articles/10220724

大概這部分讓kris用就好

須解決目標2

只針對我的branch執行該段yml code

Deployment | Vue CLI (vuejs.org) 本地run起build的檔案 & gitlab with vue cli

What does agnostic mean in tech?

This term is normally mentioned in the context of how software and devices interact with other tech solutions. Having a product that's agnostic means having a tech solution that's able to interact with any systems or any products in the same category.

containerization n 容器化

anatomy n 解剖學

Software as a Service，縮寫：SaaS

優化翻譯字的取得時間，在beforeRouter的時機，避免Cumulative Layout Shift

2021年9月29日星期三

Whistle 搭配 SwitchyOmega

https://oneliang.notion.site/oneliang/Whistle-SwitchyOmega-5d27619192d840d88c35c4dffc30476d

2021年9月28日星期二

區別 location.reload() v.s. history.go(0)

location.reload() 要重新连服务器以读得新的页面(虽然页面是一样的)

history.go(0) 除非有<%..%>等需在服务端解释才能生成的页面代码,否则直接读取缓存中的数据

2021年9月27日星期一

閃爍

flash of invisible text (FOIT).

https://web.dev/font-display/?utm_source=lighthouse&utm_medium=devtools

2021年9月22日星期三

JWT

https://www.npmjs.com/package/jwt-decode

https://www.youtube.com/watch?v=7Q17ubqLfaM

主要可以把Authorization（授權）訊息綁在client，後端就算換了好幾個資料庫也不用重新登入！

補充：Authentication（驗證）和Authorization（授權）不同

(from https://matthung0807.blogspot.com/2018/03/authenticationauthorization.html )

Authentication（驗證）：確認使用者是否真的是其所宣稱的那個人的過程。

Authorization（授權）：根據使用者的角色來授予應有的權限。

2021年9月7日星期二

gitlab-ci.yml

https://ithelp.ithome.com.tw/users/20072606/ironman/3827

2021年9月5日星期日

Getting error in CSS with `rgb(0 0 0 / 30%)`

https://stackoverflow.com/questions/66825515/getting-error-in-css-with-rgb0-0-0-15

As Dan Mulin stated, sass hasn't yet caught up to the new standard so instead of box-shadow: inset 0 0 5px rgb(0 0 0 / 15%) use box-shadow: inset 0 0 5px rgba(0, 0, 0 , 0.15) Regards

/* New Standard for color using rgb (rgba depreacated) */
rgb(0 0 0 / 0%)

/* Old standard for color using rgb and rgba */
rgb(0, 0, 0) 
rgba(0, 0, 0, 0)

2021年8月31日星期二

component v-model

https://v3.vuejs.org/guide/migration/v-model.html#migration-strategy

<myComponent v-model:value="parentVariable"> // value是prop name

可以簡寫成 <myComponent v-model="parentVariable">

在child component裡用this.$emit("input", <data>)

2021年8月26日星期四

CSS Color Chart

https://www.somacon.com/p142.php

2021年8月19日星期四

recaptcha

https://www.npmjs.com/package/vue-recaptcha

這邊自己開通一下，很簡單，基本開發要把localhost 127.0.0.1加進網域

https://www.google.com/recaptcha/admin/site/470756736/setup

example:

 <vue-recaptcha 

                    ref="recaptcha"

                    sitekey="{{sitekey上google recaptcha取}}" 

                    :loadRecaptchaScript="true" 

                    :class="$style.recaptcha"

                    @verify="onCaptchaVerifired"

                    @expired="onCaptchaExpired"

                ></vue-recaptcha>

get the user’s response token:

https://developers.google.com/recaptcha/docs/verify

注意

@verify="onCaptchaVerifired" // 在template不用(parameter)

public onCaptchaVerifired(res): void // 在method有要帶argument

http://www.blog.tonyswierz.com/javascript/add-and-use-google-recaptcha-in-a-vuejs-laravel-project/

說明v2 Invisible:

https://z3388638.medium.com/recaptcha-v2-invisible-%E4%B8%8D%E7%94%A8%E5%86%8D%E6%8A%8A-%E6%88%91%E4%B8%8D%E6%98%AF%E6%A9%9F%E5%99%A8%E4%BA%BA-%E5%88%97%E5%85%A5%E9%A0%81%E9%9D%A2%E8%A8%AD%E8%A8%88%E8%80%83%E9%87%8F-2b83dbce03cb

2021年8月18日星期三

nested checkbox

https://codepen.io/96naveen/pen/PwVMJq

input 使用css屬性 :valid 和 html 屬性 requred

https://developer.mozilla.org/en-US/docs/Web/CSS/:valid

https://codepen.io/ettzzi/pen/ZWgWKw

動態如下圖

切版兩個width都設定一樣，但看起來就有差，可能是因為兩個browser縮放比例不同

2021年8月17日星期二

防止cache

1. ?數字是為了防止cache 再去設定每次+1之類的

webpack-manifest-plugin

因為 Windows 在執行政策上會有一定的安全性設置，Windows 的執行政策 (Set-ExecutionPolicy) 預設是 Restricted。vue : 因為這個系統上已停用指令碼執行，所以無法載入

https://hsiangfeng.github.io/other/20200510/1067127387/

2021年8月14日星期六

git-pre-commit-hook-consolelog

https://gugod.org/2009/12/-git-pre-commit-hook-consolelog/

2021年8月8日星期日

ADA, WCAG2.1, acsb

acsb, accessiBe, CSS and JavaScript accessibility best practices

官網: https://www.w3.org/WAI/tutorials/menus/structure/

文件: https://northwestmediacollective.com/wp-content/uploads/2020/10/2020-10-05_21-06-16_alaskashipsupply.com_.pdf

文件: https://developers.google.com/web/fundamentals/accessibility/focus/using-tabindex?hl=zh-tw

aria-hidden:

https://developer.mozilla.org/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-hidden_attribute

2021年8月6日星期五

React and Material UI Course – Code a Dictionary

https://www.freecodecamp.org/news/code-a-dictionary-with-react-and-material-ui/

EDM

https://documentation.mjml.io/

https://www.htmlemailcheck.com/check/

注意事項

https://blog.newsleopard.com/coding-html-emails/

line-height在outlook不可以用數值，要有單位

lineheight數值轉單位: 數值 = (數值*font-size) px

3.hover行為

https://www.litmus.com/blog/interactive-email-for-beginners-6-interactive-elements-you-can-add-to-your-emails-today/

2021年8月5日星期四

vue一些沒用過技術

https://mini-ghost.dev/blog/dynamic-vue-layout/

2021年8月3日星期二

韓語教室

https://www.lingohut.com/zh/l64/%E5%AD%A6%E4%B9%A0%E9%9F%A9%E8%AF%AD

2021年7月27日星期二

window.NUXT 刪除 / 簡化

https://www.zhihu.com/question/430049651/answer/1574647441

作者：熊爸爸科技工坊
链接：https://www.zhihu.com/question/430049651/answer/1574647441
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

看下页面的源代码，虽然window._NUXT_还是在，但是已经显示的数据极为有限了，里面就剩两个必要的数据

一个是serverRendered:true一个是routePath

其中serverRendered是告诉框架我要在服务器端渲染哦，而routePath是告诉浏览器我当前的页面路径是什么，那么为什么这两个字段是必不可少的呢?其实按照网上其他的文章把window._NUXT_完全删除是可以正常实现服务器端渲染的，而且一般来说也不会有什么问题，唯一会产生的副作用就是客户端的一些脚本可能无法正常运行，那是因为NUXT框架会将服务器端渲染的DOM与浏览器端的DOM做一个比较，如果比对不匹配就无法正常运行浏览器端的脚本。因此不需要浏览器端什么操作的话，直接按照其他人的方法暴力删除就好了，拿如果你想完整的运行就继续往下看把。

其实要解决这删除window._NUXT_问题的入口在于NUXT有一个Hook方法可以使用vue-renderer:ssr:context，这个hook方法会在服务器端渲染前被调用，注意到了吗？是渲染前，因此serverRenderer:true这个设置就必须存在，否则就不会在服务器端渲染了！

然后就是要设置一下routePath这个设置变量，这个变量是动态的，会根据访问的页面来设定所以不能固定死，不过解决办法也很简单，因为vue-renderer:ssr:context在调用的时候会传入nuxt的上下文对象，其中就有routePath ，只要将这个值获取在赋值就好了，不过一定要记住一点请使用JSON.stringify来复制该值，因为之后我们要删除其他所有跟window._NUXT_有关的数据，也包括routePath所以一定要值复制，不能是引用复制！

  hooks: {
    'vue-renderer:ssr:context'(context){
      const routePath = JSON.stringify(context.nuxt.routePath);
      context.nuxt = {serverRendered: true, routePath }
    },
  }

一些vue增加的新功能 errorCaptured hook

https://gist.github.com/yyx990803/9bdff05e5468a60ced06c29c39114c6b

https://vuejs.org/v2/api/#errorCaptured

https://blog.fundebug.com/2019/06/17/handling-errors-in-vuejs/

2021年7月22日星期四

vue 動態屬性接return func 會一直觸發

因為

Instead of a computed property, we can define the same function as a method. For the end result, the two approaches are indeed exactly the same. However, the difference is that computed properties are cached based on their reactive dependencies. A computed property will only re-evaluate when some of its reactive dependencies have changed. This means as long as message has not changed, multiple access to the reversedMessage computed property will immediately return the previously computed result without having to run the function again.

(https://vuejs.org/v2/guide/computed.html)

在外層寫上v-once 可以讓裡面的element只render第一次

2021年7月18日星期日

npm-cache

https://www.axihe.com/api/npm/cli/npm-cache.html

https://docs.npmjs.com/cli/v7/commands/npm-cache

2021年7月15日星期四

Vue Test Utils

// error.test.js

/**
 * @jest-environment jsdom
 */

import { shallowMount } from '@vue/test-utils'
import store from '@/store/index';
import router from '@/router';
import Error from '@/layouts/error.vue'

describe('MyComponent', () => {
  it('render without crashing', () => {
    const wrapper = shallowMount(Error, {
      router,
      store,
      propsData: { error: {msg: 'Hello, World!' }}
    })
    expect(wrapper.html()).toContain('內容!') 
  })
})

// error.server.test.js

import { render } from '@vue/server-test-utils'
import store from '@/store/index';
import router from '@/router';
import Error from '@/layouts/error.vue'
 
describe('MyComponent', () => {
  it('render without crashing', async () => {
  const wrapper = await render(Error, {
    router,
    store,
    propsData: { error: {msg: 'Hello, World!' }}
  })

    expect(wrapper.text()).toContain('內容!') 
  })
})

Vuex mocking not working? (不認識dispatch / vuex ...)

https://github.com/vuejs/vue-test-utils/issues/116

How to unit test a typescript Vue Component that uses vuex-class 不認得(Vuex)
https://stackoverflow.com/questions/59245479/how-to-unit-test-a-typescript-vue-component-that-uses-vuex-class

不認得 ts ↓

https://vue-test-utils.vuejs.org/zh/installation/#%E9%80%89%E6%8B%A9%E4%B8%80%E4%B8%AA%E6%B5%8B%E8%AF%95%E8%BF%90%E8%A1%8C%E5%99%A8

英文版test: https://livebook.manning.com/book/testing-vue-js-applications/chapter-13/54

中文版test: https://ithelp.ithome.com.tw/articles/10241568

When you write unit tests for server-side rendered components, you should run the tests in a Node environment, not a jsdom environment.

The problem is that Jest runs tests inside a jsdom environment by default, which means DOM properties like document are defined when you run the test.

You should split server-side tests and client tests into separate files. You can run each test file in only one environment.

test runner:

1.jest

2.mocha

Vue Test Utils 都能够支持。它是与测试运行器(test runner)无关的

2021年7月14日星期三

BEC, Business Email Compromise, 商業電子郵件詐騙

1. 電子郵件詐騙

按郵件內的回覆，帶入的收件人和原本的寄件人不同

2.網路釣魚

2021年7月13日星期二

Is it not possible to stringify an Error using JSON.stringify? The problem is that I end up with an empty object.

https://stackoverflow.com/questions/18391212/is-it-not-possible-to-stringify-an-error-using-json-stringify

// String-keyed array elements are not enumerable and make no sense in JSON
let a = ['foo', 'bar'];
a['baz'] = 'quux';      // a: [ 0: 'foo', 1: 'bar', baz: 'quux' ]
JSON.stringify(a);
// '["foo","bar"]'

Error object doesn't have its enumerable properties, that's why it prints an empty object

express res 參數說明

https://expressjs.com/zh-tw/api.html#res

res.render的說明

https://codertw.com/%E5%89%8D%E7%AB%AF%E9%96%8B%E7%99%BC/200136/

// ssr error handle基礎框架

export default { // ... hooks: { render: { errorMiddleware(app) { app.use((error, _req, _res, next) => { if (error) { console.log("Logged in errorMiddleware", error); } next(error); }); }, }, },

};

// 實際應用

hooks: {
    render: {
      errorMiddleware(app) {
        app.use((error, req, res, next) => {
          // handle ssr error to browser
          if (error) {
            res.writeHead(200, {
              'Content-Length': Buffer.byteLength(JSON.stringify(error, Object.getOwnPropertyNames(error))),  
              'Content-Type': 'text/plain'
            });
              
            res.end(JSON.stringify(error, Object.getOwnPropertyNames(error)));   // Error object doesn't have its enumerable properties, that's why we use replacer. or it'll print an empty object
          } else {
            next(error);
          }

          // setTimeout ok了，timeout就是沒有錯誤而超過時間才會出現，所以直接告訴timeout就可以~~
          res.setTimeout(1000, function(){
            // console.log('Request has timed out.');
            res.writeHead(307, {
              Location: '/timeout'
            });
            res.end();
          });
         
        })
      },
    },
  },

2021年7月4日星期日

D3.js是一个数据可视化库。它使基于数据的生成和修改图形变得容易。但是，这与3D(webGL)无关。

2021年7月1日星期四

正式機上shutdown 畫面卡住

畫面卡住意指:

畫面沒有完全出來或是 hover行為沒有動作 等等

同時本機是好的

(還可能正式機上打開開發者工具畫面就正常了)

這一次在遇到問題時有出現下面這個錯誤

那很可能就是try...catch... 太多次，所以壞了

從這個方向去找bug

2021年6月26日星期六

點瀏覽器上一頁有問題 1. 網址改變卻沒有增加window.history.length 2. 在同一component裡router.push只為改變name(這部分本身就很奇怪)

2021年6月23日星期三

The Odin Project 和 Udemy: The Web Developer Bootcamp (未完, 有趣)

The Odin Project 和 Udemy: The Web Developer Bootcamp—前著是美國知名 Online Bootcamp: Thinkful 所提供免費培訓全端網頁開發人員的課程；後者則是由一位 Bootcamp 教師設計和教學的全端網頁開發課程

The Odin Project : https://www.theodinproject.com/

Udemy: The Web Developer Bootcamp: https://www.udemy.com/course/the-web-developer-bootcamp/

更多這邊看，這個作者的都看來都很不錯！ https://mike-huang-mikank.medium.com/

前端學習加工具介紹

https://frontendmasters.com/books/front-end-handbook/2017/tools/placeholder.html

youtube 如何自製影片下載

2021年6月21日星期一

nuxt errorPage, ssr

https://www.damirscorner.com/blog/posts/20200904-ErrorHandlingInNuxtjs.html

2021年6月17日星期四

為什麼router-view切換會重整頁面? 和 Missing Trailing slash for named routes in strict mode

redirect("https://xxx.com/") 因為戴https，所以一定會重打

Missing Trailing slash for named routes in strict mode:

{
            path: ":test1/:test?/",
            name: "Test",
            component: Deals,
            pathToRegexpOptions: {
              strict: true
            },
          }

reference: https://github.com/vuejs/vue-router/issues/2913

2021年5月29日星期六

真正的lazyload技術

真正的lazyload技術，不是下拉再去打api啦，是在img上加lazyload的attr等等

https://dotblogs.com.tw/shadow/2019/10/19/210514

2021年5月17日星期一

面試考題: 畫面閃爍

避免畫面閃爍，圖片先加上width, height，讓她不會從無到有，而是一開始就有框

https://juejin.cn/post/6844903474954502151

解秘 FOUC

前言

对于问题多多的IE678，FOUC(flash of unstyled content)——浏览器样式闪烁是一个不可忽视的话题，但对于ever green的浏览器就不用理会了吗？下面尝试较全面地解密FOUC。

P.S. ever green browser means 會自動更新到最新版的瀏覽器，Chrome, Mozilla Firefox, Safari都是Evergreen Browser.

到底什么是FOUC？

页面加载解析时，页面以样式A渲染；当页面加载解析完成后，页面突然以样式B渲染，导致出现页面样式闪烁。
样式A，浏览器默认样式或浏览器默认样式层叠部分已加载的页面样式；
样式B，浏览器默认样式叠加全部页面样式。

为什么会出现FOUC

我们了解当输入网址按回车后浏览器会向服务器发送请求，然后服务器返回页面给浏览器，浏览器边下载页面边解析边渲染。
下面我们解剖一下边下载页面边解析边渲染的过程:

边下载边解析就是边下载html边构建DOM Tree;
浏览器以user agent stylesheet(浏览器内置样式)为原料构建CSSOM Tree;
DOM Tree+CSSOM Tree构建出Render Tree，然后页面内容渲染出来;
当解析到inline stylesheet 或 internal stylesheet时，马上刷新CSSOM Tree，CSSOM Tree或DOM Tree发生变化时会引起Render Tree变化;
当解析到external stylesheet时就先加载，然后如internal stylesheet那样解析和刷新CSSOM Tree和Render Tree了。
上述步骤5中由于样式文件存在下载这个延时不确定的阶段，因此网络环境不好或样式资源体积大的情况下我们可以看到样式闪烁明显。
这就是为什么我们将external stylesheet的引入放在head标签中的原因，在body渲染前先把相对完整的CSSOM Tree构建好。但大家都听说过script会阻塞html页面解析(block parsing)，而link不会，那假如网络环境不好或样式资源体积大时，body已经解析并加入到DOM Tree后，external stylesheet才加载完成，不是也会造成FOUC吗？

style,link等样式资源的下载、解析确实不会阻塞页面的解析，但它们会阻塞页面的渲染(block rendering)。

svelte

Svelte是由Rich Harris創建並由Svelte核心團隊成員維護的免費開源前端編譯器。Svelte應用程序不包含框架引用

https://svelte.dev/

https://www.gss.com.tw/eis/197-eis-97/2380-eis97-6

2021年5月14日星期五

網路偵測器嗅探氣 && 不需要 Hosts 和 Fiddler→ SwitchyOmega + whistle(未完)

採用 代理伺服器 (Proxy Server) 的方式，進行資料攔截分析，所以我們也會稱這些工具為 Proxy Tool 或 web debugging proxy。

著名工具

Charles
Burp Suite
Fiddler
Wireshark
tcpdump

當然著名的工具不只這些，甚至每一項工具都有自己的特色。(這篇只介紹了Charles, Burp Suite，Charles跟Fiddler everywhere很像，或一樣。Burp 則是基於資安領域由 PortSwigger Web Security 所開發出的軟體，因此裡面提供工具及特點都跟滲透測試及攻擊 web 相關。)

turn to

因此 Proxy Tools 除了開發除錯以外，在滲透測試跟資安上都有密不可分的關係

介紹proxy tool

1. Wireshark

Wireshark 在2006 更名後（前身名為Ethereal）到現在還是非常熱門，不只是免費開源的軟體，它可以解析的東西非常詳細，針對協議，三方交握等訊息，DNS 都可以一一條列出來，是非常出色的網路封包分析工具

前面提到了每個抓包工具都有自己的特色跟優缺點，Wireshark 它的所得到的資料太底層，我們並不在意這些底層運作的資料，需要的是傳送請求及回應的詳細資料，屬於最上層的應用層，太多我們不需要的資料，反而需要過多的操作跟解析。

2.Burp

特點及功能

HTTP Proxy — 可使用 Web 代理伺服器運行，並且位於瀏覽器和目標 Web 伺服器之間。允許攔截、檢查和修改在兩個方向上通過的原始流量。
Scanner — Web 應用程式安全掃描器，用於掃描 Web 應用程式漏洞。
Intruder — 可以對 Web 應用程式執行自動攻擊。提供了一種自定演算法及參數，生成惡意 HTTP 請求。Intruder 工具可以測試和檢測 SQL 注入、跨站腳本、參數篡改和易受蠻力攻擊的漏洞。
Spider — 自動抓取 Web 應用程式的工具。把以把站台抓取下來
Repeater — 可以用於修改對伺服器的請求，重新發送並觀察結果。
Decoder — 將已編碼的數據轉需要的格式。
Comparer — 數據比較工具。
Extender — 允許加載 Burp 擴展，使用自己的或第三方代碼提供的語法擴展 Burp 的功能
Sequencer — 一種分析數據項樣本隨機性的工具。它可以用於測試應用程式的會話令牌或其他重要的數據項，如反 CSRF 令牌、密碼重置令牌等。

雜湊(hash)函式的應用

保護資料
常用在保護使用者輸入的密碼，就是常聽到的密碼在資料庫有沒以儲存明文
密碼輸入 abc 採用 hash 運算
```
sha1('abc')
```
實際儲存資料是 a9993e364706816aba3e25717850c26c9cd0d89d
確保傳遞真實的資訊
在網路傳輸資料時，將傳輸內容進行hash ，伺服器驗證這組 hash code ，確保資料在中間沒有被串改
這也稱確保訓息完整性 稱 (Hash-based message authentication code , 縮寫HMAC)
雜湊表
在上方以有簡單介紹，主要用途資料使用及儲存，更多用在資料搜索上的設計
傳輸錯誤校正
在傳輸協議上設計對應的 hash 檢驗，當傳送資料時比對計算hash code 比對不相同時為，傳輸內容有誤
這又稱 冗餘校驗
檔案比對（語音/圖片）
發行的軟體進行雜湊後，並把雜湊碼公布於網站，讓使用者自行比對安裝的為官方出廠沒被竄改過
也稱為 Checksum
圖片進行hash 可以快速比對是否相同檔案
語音影片，分割為很多小檔案進行hash 後可以進行搜尋批配是否有相同的部份
網路資源發行後進行hash 碼，配合子資源完整性 (Subresource Integrity ,SRI) 避免使用CDN時內容已被串改
```
<script src="https://example.com/example-framework.js"
        integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
        crossorigin="anonymous"></script>
```

P.S. 子資源 (Subresource Integrity ,SRI) https://codertw.com/%E5%89%8D%E7%AB%AF%E9%96%8B%E7%99%BC/24506/ 未讀

因為有hash解密網站 https://www.dcode.fr/sha1-hash，所以通常會加鹽處理
→原本sha1('abc')

→改成sha1('abc, salt or something')

雜湊函數有不可逆的特性，因此很常跟著密碼學搭配一起使用

保護資料和資料比對，雜湊函數絕對是少不了的

可以不用深入了解，演算法怎麼運算，只要學會如何使用受益無窮

reference:https://ithelp.ithome.com.tw/articles/10247509

https://ithelp.ithome.com.tw/articles/10246917 還沒實行
https://ithelp.ithome.com.tw/articles/10247581 未看

8102 年的程序员不需要 Hosts 和 Fiddler→ SwitchyOmega + whistle: https://juejin.cn/post/6844903677883482125

whistle詳細講解: https://codertw.com/%E7%A8%8B%E5%BC%8F%E8%AA%9E%E8%A8%80/725158/

2021年5月13日星期四

OCPJP

https://pclevinblog.pixnet.net/blog/post/314563309-%5Bjava%5Docjp%28scjp%29%E5%85%8D%E8%B2%BB%E7%9A%84%E8%80%83%E9%A1%8C%E5%BA%AB%E7%B6%B2%E7%AB%99

https://yamol.tw/cat-OJCP%28SCJP%29%E6%B8%AC%E9%A9%97%E9%A1%8C%E5%BA%AB%E5%BD%99%E7%B7%A8-1721.htm

2021年5月12日星期三

node-sass

2021年5月11日星期二

react native

airbnb撤出react native心得:

https://medium.com/as-a-product-designer/airbnb-%E7%B5%84%E7%B9%94%E6%B5%81%E7%A8%8B-%E8%AE%93design%E8%B7%9Fcoding%E4%B9%8B%E9%96%93%E7%9A%84%E5%8D%94%E4%BD%9C%E6%95%88%E7%9B%8A%E6%9C%80%E4%BD%B3%E5%8C%96-f229a0dc91ab

https://blog.oursky.com/2018/08/08/airbnb-sunsetting-react-native-for-mobile-and-web/

實際學習:

https://www.youtube.com/watch?v=0-S5a0eXPoc

https://reactnative.dev/docs/getting-started

學習內容:

DLS - Design Language System: 包含的字體、顏色、icons、間隔距離、資訊架構等

2021年5月9日星期日

web server: nginx

2021年5月4日星期二

近期目標: 學習react native, circle ci

2021年5月3日星期一

Hexo, 佈置靜態網站，vue官網也是用他

可以快速佈署上github

youtube上有教學視頻

2021年4月30日星期五

circle ci

https://circleci.com/docs/2.0/configuration-reference/

https://app.circleci.com/ 要登入直接 go to app

官方文檔 https://circleci.com/docs/2.0/language-javascript/#quickstart-demo-javascript-nodejs-reference-project

看到 ee our blog on matrix jobs

2021年4月21日星期三

amp

https://blog.sharktech.tw/2018/02/07/google-amp

lose-lose situation , same as "no-win situation"

user acquisition

monetization 貨幣化(n)

2021年4月16日星期五

OWASP ZAP, DOCKER

待看: 前端和docker的關係

前端學docker: 部屬不求人

OWASP Top Ten：2003年首次出版的「Top Ten」會定期更新。^[6] 它旨在通過辨識組織面臨的一些最重要的風險來提高對應用程式安全性的認識。^[7]^[8]^[9] 許多標準，書籍，工具和組織參考了Top 10專案，包括MITRE、PCI DSS、^[10]國防資訊系統局（DISA-STIG）、美國聯邦貿易委員會（FTC）。

https://www.zaproxy.org/getting-started/

https://medium.com/hannah-lin/%E5%B9%BC%E5%B9%BC%E7%8F%AD%E4%B9%9F%E8%83%BD%E6%87%82%E7%9A%84-owasp-top-10-692764c51f61

滲透測試: https://ithelp.ithome.com.tw/articles/10207540

【知識科普】安全測試OWASP ZAP簡介- https://zhuanlan.zhihu.com/p/146953051

如何自動化安全測試 Web REST API: https://www.qa-knowhow.com/?p=4058

想在vscode command line用Windows Subsystem for Linux打上wsl即可

zap只在JRE環境運行

orchestration :

容器正式應用越多，Orchestration(調度)機制越顯得重要，工具例如'：Kubernetes，許多大型網路公司都各使用了不同的Orchestration工具來管理大規模的叢集，如Facebook的Tupperware、Google則有Borg和Omega、Yahoo則利用了Hadoop專案中的YARN，Twitter則是使用了Mesos和Aurora。

https://www.ithome.com.tw/news/108746

https://docs.docker.com/get-started/orchestration/

docker 比傳統虛擬機:

1.更少占用

2.啟動更快，因為直接運行在我們的素主機上

3.一致的環境

4.在任何地方運行

傳統主機模式(多個主機(host))→VM模式(一個host上見多個VM各自的OS)→容器模式(在OS上建docker engine，開始使用容器)

容器化技術可以幫我們更有效的跟OS索取資源、運用資源的技術。

docker(技術觀念)→kubernetes(調度工具, k8s)→Jenkins(簡化、自動化)

docker三大功用:

簡化部屬流程
跨平台部屬
建立乾淨測試環境

DOCKER教學影片

https://www.bilibili.com/video/BV1st411X7yU/?spm_id_from=333.788.recommend_more_video.0

images: 鏡像

container:容器

容器是鏡像的實體，一個鏡像可以運行很多個容器

docker教學: https://github.com/twtrubiks/docker-tutorial

從docker裝置開啟的教學: http://localhost/tutorial/

docker run -d -p 80:80 docker/getting-started

創建docker與他人共享的實作開始-------------------------------------------------------------

docker build -t getting-started . // docker build 命令用于使用 Dockerfile 创建镜像。

docker run -dp 3000:3000 getting-started // Container建立並執行。

Remember the -d and -p flags? We're running the new container in "detached" mode (in the background) and creating a mapping between the host's port 3000 to the container's port 3000. Without the port mapping, we wouldn't be able to access the application.

open your web browser to http://localhost:3000.

docker build -t getting-started . // 更新(同"創建")

docker: Error response from daemon: driver failed programming external connectivity on endpoint hungry_keldysh (dc3a92af36dfbb0178d800b2a55acdd01c7734ef08998ae291b864fcfb678d7c): Bind for 0.0.0.0:3000 failed: port is already allocated.

DAEMON （即Disk And Execution MONitor）是在Windows系統上運行、用於製作或虛擬CD/DVD/Blu-ray光碟的軟體。其中，DAEMON Tools Ultra是提供製作光碟映像、光碟燒錄、虛擬燒錄機及掛載映像等進階實用的功能

docker ps // 顯示正在運行的container資訊

OPTIONS说明：

-a :显示所有的容器，包括未运行的。
-f :根据条件过滤显示的内容。
--format :指定返回值的模板文件。
-l :显示最近创建的容器。
-n :列出最近创建的n个容器。
--no-trunc :不截断输出。
-q :静默模式，只显示容器编号。
-s :显示总的文件大小。

docker stop <the-container-id> // stop image

docker rm <the-container-id> // remove image

docker rm -f <the-container-id> // stop and remove image in one command

docker image ls // 顯示image資訊

docker login -u YOUR-DOCKER-ID // 登入

docker tag getting-started YOUR-DOCKER-ID/getting-started // 重新標示指向的repo的名稱

docker push YOUR-USER-NAME/getting-started // 成功push

實作結束-----

docker run 的常用参数用法: (這裡面看不懂可以在把解說貼到google上) https://jiajially.gitbooks.io/dockerguide/content/chapter_fastlearn/docker_run/index.html

// -t 選項讓Docker分配一個虛擬終端（pseudo-tty）並綁定到容器的標準輸入上，
// -i 則讓容器的標準輸入保持打開。

docker常用指令: http://puremonkey2010.blogspot.com/2015/05/docker-practice-container.html

Persisting our DB

集裝箱---

Volumes provide the ability to connect specific filesystem paths of the container back to the host machine. If a directory in the container is mounted, changes in that directory are also seen on the host machine. If we mount that same directory across container restarts, we'd see the same files.

集裝箱的實作開始------

docker volume create <volume name> // Create a volume

docker run -dp 3000:3000 -v <volume name>:/etc/todos getting-started

//add the -v flag to specify a volume mount and mount it to /etc/todos, which will capture all files created at the path.

在頁面上添加資料後，刪除container: docker rm -f <id>，再用上面的command line再開一次，資料還在！

實作結束------

docker volume inspect <volume name> // 查看volume的資訊

輸出結果:

[

{

"CreatedAt": "2021-04-22T03:46:07Z",

"Driver": "local",

"Labels": {},

"Mountpoint": "/var/lib/docker/volumes/todo-db/_data",

"Name": "todo-db",

"Options": {},

"Scope": "local"

}

]

其中Mountpoint is Where Docker actually storing my data

Named Volumes vs bind Mounts(綁定安裝)

A bind mount is an alternate view of a directory tree. Classically, mounting creates a view of a storage device as a directory tree. A bind mount instead takes an existing directory tree and replicates it under a different point. The directories and files in the bind mount are the same as the original. Any modification on one side is immediately reflected on the other side, since the two views show the same data.

Using bind mounts is very common for local development setups. The advantage is that the dev machine doesn't need to have all of the build tools and environments installed. With a single docker run command, the dev environment is pulled and ready to go.

Starting a Dev-Mode Container

docker run -dp 3000:3000 ` -w /app -v "$(pwd):/app" ` node:12-alpine ` sh -c "yarn install && yarn run dev"

有時這樣會跑不動，可以改成不分段，也就是...

docker run -dp 3000:3000 -w /app -v "$(pwd):/app" node:12-alpine sh -c "yarn install && yarn run dev"

-w /app - sets the "working directory" or the current directory that the command will run from
-v "$(pwd):/app" - bind mount the current directory from the host in the container into the /app directory
node:12-alpine - the image to use. Note that this is the base image for our app from the Dockerfile
sh -c "yarn install && yarn run dev" - the command. We're starting a shell using sh (alpine doesn't have bash) and running yarn install to install all dependencies and then running yarn run dev. If we look in the package.json, we'll see that the dev script is starting nodemon.

For Node-based applications, nodemon is a great tool to watch for file changes and then restart the application.

Multi-Container Apps

If two containers are on the same network, they can talk to each other. If they aren't, they can't.

Starting MySQL

docker network create todo-app // create the network

docker run -d \ --network todo-app --network-alias mysql \ -v todo-mysql-data:/var/lib/mysql \ -e MYSQL_ROOT_PASSWORD=secret \ -e MYSQL_DATABASE=todos \ mysql:5.7

we're using a volume named todo-mysql-data here and mounting it at /var/lib/mysql, which is where MySQL stores its data. However, we never ran a docker volume create command. Docker recognizes we want to use a named volume and creates one automatically for us.

// 在todo-app network (給予別名mysql ，可以當作它是hostname) 以集裝箱的形式(集裝箱名為todo-mysql-data，位置在/var/lib/mysql) 創建mysql的container，mysql密碼為secret，建立資料庫todos

docker exec -it <mysql-container-id> mysql -p // 此處mysql應該是--network-alias

mysql> SHOW DATABASES;

查看ip

docker run -it --network todo-app nicolaka/netshoot // create the nicolaka/netshoot container, which ships with a lot of tools that are useful for troubleshooting or debugging networking issues.

dig mysql // Inside the container, we're going to use the dig command, which is a useful DNS tool. 可以看到the IP address for the hostname mysql

Running our App with MySQL

docker run -dp 3000:3000 \ -w /app -v "$(pwd):/app" \ --network todo-app \ -e MYSQL_HOST=mysql \ -e MYSQL_USER=root \ -e MYSQL_PASSWORD=secret \ -e MYSQL_DB=todos \ node:12-alpine \ sh -c "yarn install && yarn run dev"

在頁面添加資料後查看資料庫

docker exec -it <mysql-container-id> mysql -p todos

mysql> select * from todo_items;

延伸---但有點太難

service discovery

https://columns.chicken-house.net/2017/12/31/microservice9-servicediscovery/ 這篇很好

https://ithelp.ithome.com.tw/articles/10192500

提供service discovery服務的有哪些：

延伸結束---

Docker Compose

Docker Compose is a tool that was developed to help define and share multi-container applications.

看到:

http://localhost/tutorial/using-docker-compose/

alpine: https://www.alpinelinux.org/downloads/

PWD教學: https://training.play-with-docker.com/

docker-scan教學: https://docs.docker.com/engine/scan/?utm_source=docker&utm_medium=inproductad&utm_campaign=totw-docker-scan

Synk:

Use 'docker scan' to run Snyk tests against images to find vulnerabilities and learn how to fix them.

Synk: https://www.youtube.com/watch?v=7Z_BdXXL1Dk

command: docker scan getting-started

ci:

circle ci

// nodemon: https://www.npmjs.com/package/nodemon

訂閱：文章 (Atom)

文章加密

2021年12月19日 星期日

2021年12月15日 星期三

2021年11月1日 星期一

2021年10月21日 星期四

2021年10月19日 星期二

2021年10月14日 星期四

2021年9月30日 星期四

2021年9月29日 星期三

2021年9月28日 星期二

2021年9月27日 星期一

https://web.dev/font-display/?utm_source=lighthouse&utm_medium=devtools

2021年9月22日 星期三

2021年9月7日 星期二

2021年9月5日 星期日

2021年8月31日 星期二

2021年8月26日 星期四

2021年8月19日 星期四

2021年8月18日 星期三

2021年8月17日 星期二

2021年8月14日 星期六

2021年8月8日 星期日

2021年8月6日 星期五

2021年8月5日 星期四

2021年8月3日 星期二

2021年7月27日 星期二

2021年7月22日 星期四

2021年7月18日 星期日

2021年7月15日 星期四

2021年7月14日 星期三

2021年7月13日 星期二

2021年7月4日 星期日

2021年7月1日 星期四

2021年6月26日 星期六

2021年6月23日 星期三

2021年6月21日 星期一

2021年6月17日 星期四

2021年5月29日 星期六

2021年5月17日 星期一