技術 Angular 深入淺出三十天：表單與測試 Day16 - Template Driven Forms vs Reactive Forms

這段期間，我們用 Template Driven Forms 與 Reactive Forms 各自做了一個登入表單（靜態）與被保人表單（動態），而且我們也都...

Leo ‧ 2021-10-01 ‧團隊請支援 Coding

技術 Angular 深入淺出三十天：表單與測試 Day28 - 自訂表單元件

經過了這段時間的練習與學習，相信大家應該越來越能體會 Angular 表單的強大與便利。 不過既然 Angular 表單這麼好用，如果能讓自己做的 Compo...

Leo ‧ 2021-10-13 ‧團隊請支援 Coding

技術 【Day 29】Django 網頁美化篇 - Ctrl+C/V 的魔法

今天是鐵人賽的倒數第二篇，在這篇文章內，我們會透過前端框架Bootstrap來幫忙進行網頁美化的工作。Bootstrap是一個結合HTML、CSS、JavaSc...

Xiang1009 ‧ 2022-10-14

技術 #25 JS: HTML DOM Events - Part 3(Start Over Version)

Since the knowledge I learned yesterday was over my head, I decided to try anoth...

Vida Lin ‧ 2021-09-25

技術 Vue Router

Basic config 最基本的寫法就是在 src/router/index.ts 的 routes 內設定像這樣 const routes: Array&l...

哲嘉 (Zhe-Jia) ‧ 2022-09-08

技術 重新認識 CSS - 總結 & 系列目錄

前言 「重新認識 CSS」這個系列名稱的由來就如其名，我想要重新認識它。雖然以前就有學過 CSS，但這次想從 CSS Spec 中學到最原始的定義和內容，更加...

Titangene ‧ 2019-10-15 ‧團隊好想工作室 v3.0

技術 Day 11 - Custom HTML5 Video Player

前言 JS 30 是由加拿大的全端工程師 Wes Bos 免費提供的 JavaScript 簡單應用課程，課程主打 No Frameworks、No Compi...

Xiang1009 ‧ 2021-09-11

技術 RWD 做一個左邊固定欄寬右邊自由縮放的版型吧

大家一定常常會看到像是這樣類型的版型，左邊是 menu 的選單，而右邊則是每一則網頁內容，而當我們縮放瀏覽器時，左邊的選單區塊不會有任何變動，縮放的是右邊的網頁...

Alec ‧ 2019-09-27

技術 Day 27 - Click and Drag to Scroll

前言 JS 30 是由加拿大的全端工程師 Wes Bos 免費提供的 JavaScript 簡單應用課程，課程主打 No Frameworks、No Compi...

Xiang1009 ‧ 2021-09-27

技術 面向前端的CDN解決方案! 全框架皆可使用

面向前端的CDN解決方案！ 前陣子想在Angular的專案下套用CDN機制過去我都是使用 webpack publicPath 來達成但使用Angular我不...

技術 Day-17 打造表格列選擇功能 react-table

Day-17 打造表格列選擇功能 react-table 在 todos 中可以當作任務是否完成的選取框框，也可以作為列的選取手段，這樣的設計好像很少見，我之...

aoigj100 ‧ 2022-10-01

技術 Day 8 - Fun with HTML5 Canvas

前言 JS 30 是由加拿大的全端工程師 Wes Bos 免費提供的 JavaScript 簡單應用課程，課程主打 No Frameworks、No Compi...

Xiang1009 ‧ 2021-09-08

技術 Day1 Sideproject(作品集) from 0 to 1 -簡介

嗨～大家好，小弟目前任職於一間小公司，負責前端的部分，而我的夥伴，則是在一間比較大的公司負責後端的部分（實作經驗比我多半年但公司寫的是20年前的語言了） 這次分...

shrine90459 ‧ 2021-09-15

技術 Vue: getting started

前言 Vue 在過去的一兩年內快速發展，寫法也一直改變，我在過去一年多也更改了兩次寫法，這 30 天我將以最新的 composition api + types...

哲嘉 (Zhe-Jia) ‧ 2022-09-02

技術 Day 23 - Speech Synthesis

前言 JS 30 是由加拿大的全端工程師 Wes Bos 免費提供的 JavaScript 簡單應用課程，課程主打 No Frameworks、No Compi...

Xiang1009 ‧ 2021-09-23

技術 Angular 深入淺出三十天：表單與測試 Day09 - 整合測試實作 - 登入系統 by Reactive Forms

昨天幫我們用 Reactive Forms 所撰寫的登入系統寫完單元測試之後，今天則是要來為它寫整合測試。 再次幫大家複習一下整合測試的測試目標： 整合測試...

Leo ‧ 2021-09-24 ‧團隊請支援 Coding

技術 Day 18 CSS <Sprite 精靈圖>

1. 為什麼需要精靈圖 一個網頁中會需要很多小的背景作為修飾，若圖像過多服務器頻繁接收&amp;發送會造成服務器壓力過大，將降低頁面加載速度 因此，為了有效減少...

a0265392_lin ‧ 2021-09-28

技術 [DAY02] 套路開始

我想說的是：環境安裝方法：安裝 Node.js、安裝 create-react-app、npm start 首先安裝 Node.js這部分可以使用官方網站的...

Nanami Lemon ‧ 2019-09-16

技術 Sass 的 @import 功能，如何讓scss檔分門別類的管理

過往一支 CSS 檔打天下，從頭寫到尾，動則上千上萬條程式碼，維護不易，之前我們介紹了 scss 的變數功能，讓一些關鍵的設定可以透過變數的型式撰寫。 如今，為...

Alec ‧ 2019-10-02

技術 為什麼需要模組化？—ESModule模組介紹、React整理code技法與基本技巧

本文重點將會以ES6的Module為主 文章將會提到以下幾點 簡述Moduel歷史 什麼是module 基本用法 具名匯出、預設匯出 default匯出就像具...

DannyChen ‧ 2022-09-18 ‧團隊好想工作室 v6.0

技術 [DAY03] 上帝視角之路徑之熟門熟路老司機之資料夾說明

我想說的是：快速了解各個資料夾內資料的用處 用框架的好習慣就是先搞清楚各個資料夾的用處就像是你今天出國去了國外的合法賭場，至少要先知道人家的規矩跟行情知道籌...

Nanami Lemon ‧ 2019-09-17

技術 [DAY27] 如果你快樂就拍拍手之在 react 使用動畫效果之基於 CSS

我想說的是：其實使用起來也是很簡單，但是對於 react 本身的操作要夠熟悉 最近買了薩爾達織夢島，有點太投入整個早上都在玩，本來早上就該發文的 這一篇來做...

Nanami Lemon ‧ 2019-10-11

技術 Day 10 - Hold Shift to Check Multiple Checkboxes

前言 JS 30 是由加拿大的全端工程師 Wes Bos 免費提供的 JavaScript 簡單應用課程，課程主打 No Frameworks、No Compi...

Xiang1009 ‧ 2021-09-10

技術 [DAY 11] 煉金術就是分解構築之大哥哥來寫 JavaScript 之 ES6 真會玩

我想說的是解構賦值語法是 ES6 的新特性，可以將陣列或物件中的資料取出成獨立變數 這篇來談 煉金術的基礎 不要瞎掰好嗎 來說說「解構」，當初第一次看到真的...

Nanami Lemon ‧ 2019-09-25

技術 Sass的 @mixin 功能，如何將複雜的語法簡單化

我們前面聊完了@import，知道了原來最終的編譯檔 scss 是可以透過好幾個分門別類各自分開的 scss 用@import導入，來讓版面都乾乾淨淨的，之前我...

Alec ‧ 2019-10-03

技術 [DAY29] 多 DOM 的動畫之我等了這篇 29 天之我完全不介意

我想說的是：其實基礎的多個 DOM 的動畫，跟一個差不多多個的就是專業的部分，我不清楚 上一篇中已經可以控制一個 DOM 元素的動畫效果而想控制多個動畫 r...

Nanami Lemon ‧ 2019-10-13

技術 Something about front-end

技術 Day 30 - Make a Whack A Mole Game with Vanilla JS

前言 JS 30 是由加拿大的全端工程師 Wes Bos 免費提供的 JavaScript 簡單應用課程，課程主打 No Frameworks、No Compi...

Xiang1009 ‧ 2021-09-30

技術 Day 09 CSS <背景屬性>

CSS背景屬性 可以給頁面元素添加背景樣式背景屬性可設置背景顏色、背景圖片、背景平舖、背景圖片位置、圖像固定等等 1.背景顏色background-color屬...

a0265392_lin ‧ 2021-09-19

技術 Day 02 HTML<表格標籤>

表格標籤主要用來顯示以及展示數據，可用表格標籤排版後讓數據更容易閱讀 1. 表格基礎標籤簡易介紹 ( 以code表示 ) : &lt;table&gt; 表示表...

a0265392_lin ‧ 2021-09-12