iT邦幫忙

2022 iThome 鐵人賽

DAY 4
0
自我挑戰組

雜學海綿吸呀吸 Dev Diary系列 第 4

Day03- CSS variable, React OOXX, JWT初探, PICOCTF瀏覽

  • 分享至 

  • xImage
  •  

JS基礎

  • JS30- day03 CSS variable
<body>
    藉由 data-attribute 自定義單位 data-sizing = "px" 
    藉由 name = base, spacing, blur
<style>
 :root {
     --base: #ffc600
     --spacing:10px
     --blur: 10px
 }
 img {
     padding: var(--spacing)
     background: var(--base)
     filter: blur(var(--blur))
 }
</style>
<script>
  const inputs = document.querySelectorAll('.controls input')
  function handleUpdate(){
    const suffix = this.dataset.sizing || ''
    document.documentElement.style.setProperty('--${this.name}', this.value + suffix)
    
  }
  inputs.forEach(i => i.addEventListener('change',handleUpdate))
  //inputs.forEach(i => i.addEventListener('mousemove',handleUpdate))
</script>
  • 補充
    • dataset 有data-attribute 的object
    • Nodelist vs array -> nodelist 如何轉到 array
  • Web dev 影片
    • Custom event
    • DOM manipulation
    • DOM traversal

前端(React)

React 官網教學 OOXX - component class + prop傳資料

  • 鐵人賽
    • 從 Hooks 開始,讓你的網頁 React 起來 09-11 網速器

後端

  • 影片:成為看起來很強的後端17-20 first(JWT系列感覺要看兩次才比較理解)
  • PHP
  • 鐵人賽
    • PHP 網路爬蟲開發:入門到進階的爬蟲技術指南 01

資安/其他

PICOCTF2022 by John Hammond 看不懂XDD 可能再繼續找更合適的影片


上一篇
Day2 - EventListener加強+ 初探React + pHp基本
下一篇
Day04- Array, (JWT複習, pHp), PICOCTF 2017
系列文
雜學海綿吸呀吸 Dev Diary10
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言