JS basic

• JS30 day 5 image gallery
  • 藉由CSS Flexbox達成

<style>
.panels {
    display:flex
}
.panel {
    flex: 1 
    justify-content: center
    display: flex
    flex-direction: column
}
.panel.open{
    flex: 5
}
.panel > * {
    flex: 1 0 auto
    display: flex
    justify-content: center
    align-items: center
}

.panel > *:first-child { transform: translateY(-100%) }
.panel.open-active > *:first-child { transform: translateY(0) }
.panel > *:last-child { transform: translateY(100%) }
.panel.open-active > *:last-child { transform: translateY(0) }
</style>
<script>
const panels = document.querySelectorAll('.panel')

function toggleOpen(){
    this.classList.toggle('open')
} 
function toggleActive(e){
    if(e.propertyName.includes('flex'){
        this.classList.toggle('open-active)
    }
}

panels.forEach((p)=> p.addEventListener('click', toggleOpen))
panels.forEach((p)=> p.addEventListener('transitioned', toggleActive))

</script>

前端

• 實作 React讀書會第一週的每日課程 + pre課程的JS練習
  • JS的部分在hook鐵人幫部分有複習到 算是滿開心的
  • 已經有用到基本hook useState
  • 明天來挑戰第一週的功課 用level1->2->3 增加功能複雜度的方式覺得滿貼心的設計

後端

• 成為看起來很厲害的後端- JWT again
  • 觀看第二次的過程中好像有比較了解每個演化/選擇的關鍵點
• pHp+ mySQL 影片觀看+實作
  • 期許這幾天能實作基本CRUD 基本概念

資安

• 鐵人賽
  • 一起資安入門 -- picoCTF 探索與解題
    • General skills
  • CTF入門學習
    • forensic篇 Zsteg,Wireshark(for pcap files), Hexdump,
    • Reverse Engeneering 初探

閱讀

• Miwon Kwon
  • 理解藝術作為某種供更空間，而非在公共空間中理解藝術