菜鳥工程師的部落格

Part 1 雲端計算五大特徵 On-demand self-service - 自助服務 Broad network access - 無地點限制 Resource pooling - 一堆的資源 Rapid elasticity - 更多的彈性 Measured service - 只花你想花費的 GCP 提供的服務 Compute Engine GKE - 今天主題 App Engine Cloud Run Cloud Functions google 的資料代管服務 Cloud Bigtable Cloud Storage Cloud SQL Cloud Spanner Firestore GC... Read More

前情提要： 從零開始製作 Django 圖書館網站 基礎環境設定 創建資料夾 $ mkdir djangoBoy 新增虛擬環境 $ cd djangoBoy $ python3 -m venv virtualenv 啟動虛擬環境 $ source virtualenv/vin/activate 離開虛擬環境 $ deactivate Django 建立新應用程式 - hello world 新增基礎資料夾 就像 rails new product-name 一樣，django 也有指令產生基礎的文件。 $ django-admin startproject library 這樣輸入後，就會產生一些我們會用到的資... Read More

前情提要： 由於常常碰到各種的數字格式，這裡整理多種的情境 1. 連續數字 格式：str = ‘總計TWD$650.00’ 最終想要的數字：650 正規表達式 現在使用的正規表達式為 \d+，它將匹配一個或多個連續數字。在取得匹配結果後，我們使用 parseInt 函式將其轉換為整數型別，並得到 650。 const str = '總計TWD$650.00'; const regex = /\d+/; // 匹配整數 const result = str.match(regex); if (result && result.length >= 1) { const integerValue = parseInt... Read More

3094 - tagtoo Event 的信箱和電話問題 詳細說明 客戶反應 facebook 像素後台的 事件配對品質很低，希望能改善 解決方法 由於客戶的像素有設定s2s，因此事件有從伺服器送過去，而伺服器端也就是 tagtoo event 發送的事件，那邊我們會送幾個特殊資料過去，像是電話和信箱，使用者輸入的信箱和電話會被亂碼化，並且同時發送到 tagtoo_event 和 FB 那邊，如果今天事件有發送 ex. register，但是沒有發送 unitrack 的信箱和電話，就會導致 FB像素後台的 事件配對品質降低。 如果今天事件配對值降低，有以下幾件事可以確認 先看客戶網站的 unitrack 是否有成功發送 到 tagtoo event 的 BigQu... Read More

前情提要： 本機啟動 api 的產 feed 環境 本機開發 流程大綱 git clone git@github.com:Tagtoo/api.git git submodule init git submodule update 修改 api 檔案裡面的 database app.yaml -> MySQLdb remove requirements.txt -> add PyMySQL==0.10.1 postback.py、cloudsql.py、gen_case.py 這三個資料夾要修改 -> import MySQLdb -> import pym... Read More

前情提要： 本機啟動 dashboard api 的產 feed 環境 本機開發 流程大綱 git clone https://github.com/Tagtoo/dashboard-api.git git submodule init git submodule update 新增兩個環境變數 - export DOCKER_BUILDKIT=0 和 export COMPOSE_DOCKER_BUILD=0 docker pull asia.gcr.io/dashboard-dev-1230/dashboard-api-base:latest - (要請 howard 或 patrick 開權限給你) docke... Read More

前情提要： 在第三方 cookie 逐漸被禁止的情況下，要怎麼才能更好的追蹤到網站上的使用者呢 cookie 是啥 Cookie（曲奇餅）是一種小型的文本數據文件，通常由網站存儲在用戶的瀏覽器中。它們用於跟蹤用戶在網站上的活動、保持用戶的設置和狀態，以及提供個性化的網站體驗。Cookie 在 Web 開發中起著重要作用，它們的主要功能包括： 用戶識別：Cookie 可以用來識別瀏覽器和用戶。當您訪問一個需要登錄的網站時，網站會將一個唯一的識別碼存儲在 Cookie 中，以便在您訪問其他頁面時知道您是誰，而無需每次都重新登錄。 session管理：有些 Cookie 被用來管理用戶的會話。這些 Cookie 在用戶訪問網站期間存儲，並在用戶退出或... Read More

前情提要： muffet 有各式各樣的需求，在這邊做細節整理 2878 - 把 sku 的格式改成跟客戶的 content_ids 一樣 詳細描述 目錄的內容編號或是商品群組編號，可以調整成跟像素「426783434563478」抓的「content_ids」一樣嗎？ 例如：https://www.jdgift.com.tw/products/strnetwork 這個商品就是「643e7b3ab788e30017cc3fd9:643e7b3ac27c1b4855c3e631」 解決方法 打開任意產品網頁，並用 Meta Pixel Helper 看 (客戶的 pixel 是 426783434563478)，產品的 contents_id ... Read More

前情提要： muffet 第四堂課 第四堂課筆記 tagtoo feed - 就是把資料庫的資料輸出成各種渠道的格式 依照目前的各種框架，我們會把廣告渠道分成兩個 repo， dashboard api、api。 只要是 GMC 所使用的 feed，就是放在 dashboard api，其他渠道全部都放在 api。 一般來說，tagtoo feed 是一個網址的形式，這個網址的內容我們會在後台設定，通常廣告會主動向我們拿資料，不過這時候就會發生，我們受限於廣告更新的速度 (GMC 一天只會向我們拿一次資料)，後來 GMC 才提供 content API 的服務，我們才可以... Read More

前情提要： 這個案例的特色是，他的 cart 頁面沒有 sku ，所以要先在 product 頁面存到 local 端，到 cart Ps. 我原本是用另一個方法，用他的 imageUrl 抓一段下來，當他的特殊 string imageUrl 設定 productId 先設定好整理字串的函數 function getProductId(imageUrl) { const startIndex = imageUrl.indexOf("/media") const endIndex = imageUrl.indexOf(".jpeg") const str = imageUrl.substring(startIndex, endInd... Read More

trackProduct tracker(‘viewItem’, product) tracker(‘addToCart’, product) tracker(‘addToWishlist’, product) 程式碼的觸發 const trackProduct = new Event({ name: 'trackProduct', trigger: routeChange.path.contains('/product').and(routeChange.host.eq('www.eslite.com')), runOnce: false, delay: 2000, fn: function (retry = 5) { let pro... Read More

前情提要： 這個案例的特色是，他的購物車有分成手機、桌機，兩種不同的設定方法 trackProduct tracker(‘viewItem’, product) tracker(‘addToCart’, product) tracker(‘addToWishlist’, product) tracker(‘yahoo’, ‘viewItem’, [${sku}-square, title, price]) tracker(‘yahoo’, ‘addToCart’, [${sku}-square, title, price]) tracker(‘yahoo’, ‘addToWishlist’, [${sku}-square... Read More

前情提要： 如果今天客戶的 muffet 裡面的 insert 是使用後端更新，就要到 ec 這個 repo 來修改，資料庫吃的是這個 repo，最後輸出成 op 要用 feed 重要事情提醒 如何判斷 前/後端 更新 判斷是前端更新還是後端更新是以下面這兩個來看： // 前端更新 insertPixel(`//track.tagtoo.com.tw/up?t=u&${product.toQueryString()}`) // 後端更新 const api_tagtoo = `//api.tagtoo.com.tw/v1/refresh_product_item?url=${encodeURIComponent(location.hr... Read More

前情提要： 今天遇到一個客戶的 feed 是這個 - ftp://cron-jobs.tagtoo.com.tw/line-beams.csv，要怎麼下載下來呢？ 重要事情提醒 如果今天遇到一個 feed 長得像這樣 ftp://cron-jobs.tagtoo.com.tw/line-beams.csv，要怎麼下載或使用呢？ 解決步驟 下載 FTP 連線軟體 免費 FileZilla 付費 cyberduck 連線進入 這邊我用 FileZilla 這個軟體當作示範 先開啟這個檔案 - https://docs.google.com/document/d/13Fyvh8xi1J1blpIfjH2drC0xFCaa7... Read More

前情提要： 學習 muffet 的筆記整理 如何使用 local preview 我們會在 local 開發的時候，會需要把頁面上的所 HOST 的那張 JavaScript 導入到 local 端。 用 ModHeader 這個小工具是因為，為了導到 local 開發，我們 local 可以起一個簡單的 server，來去 Host 現在這一家客戶的 muffet 檔案。 一般來說，我們在 muffet 的 repo 中，當我們發一個 pr merge 到 main 分支，並且跑完 CI/CD 後，會 compile 成一個 json 檔案，我們會 Host 在這個地方，這個東西我們放在 GCP 上面(在 cloud storage 裡面)。... Read More

前情提要： 認識HTTP的細節 HTTP 介紹 定義： 定義了客戶端跟伺服器端之間的溝通格式 無狀態協議 Stateless Protocol : 每一次的 HTTP 請求及 HTTP 回應都不相關 重大影響：你是誰？該怎麼保持每次連接的狀態 客戶端的 cookie & 伺服器端的 Session Data 客戶端 = 消費者、伺服器端 = 餐廳 Cookie = 集點卡、Session Data = 會員卡(Session ID = 會員卡號) HTTP 訊息格式 客戶端發出請求，伺服器端回應，那中間的傳輸是什麼呢？是一段「訊息」 訊息格式： HTTP start line + CRLF ... Read More

前情提要： 為了瞭解GCP如何部署、使用，看著影音學習GCP GCP入門 - 分成五大類 計算 - Compute engine app engine 網路 - Networking (DNS, vpn) 儲存 - storage 大數據 - BigData API - 一大堆東西 GCE - Google Compute Engine GCE 是屬於 google 的 Iaas 服務，全名是 Infrastructure as a service - 基礎設施及服務，白話文就是說，提供你建置電腦所需要的配備 (CPU、記憶體、硬碟)，用這些東西搭配出一個你想要的環境。 依照你的專案需求，可以選擇不同的配件，比如今天你是高運算服務，... Read More

前情提要： 為了瞭解GCP如何部署、使用，看著影音學習GCP GCP入門 - 分成五大類 計算 - Compute engine app engine 網路 - Networking (DNS, vpn) 儲存 - storage 大數據 - BigData API - 一大堆東西 GCE - Google Compute Engine GCE 是屬於 google 的 Iaas 服務，全名是 Infrastructure as a service - 基礎設施及服務，白話文就是說，提供你建置電腦所需要的配備 (CPU、記憶體、硬碟)，用這些東西搭配出一個你想要的環境。 依照你的專案需求，可以選擇不同的配件，比如今天你是高運算服務，... Read More

前情提要： 本篇將教學巢狀留言怎麼設定 安裝插件 巢狀留言軟刪除 如果今天已經幫留言設定好了軟刪除，但是想要把被刪除的留言顯示出來，並且顯示的是特定文字(留言已被使用者刪除)，這樣要怎麼做呢？ 看過官方文件後，只要這樣輸入，就可以把不管有沒有被刪除過的東西都抓出來 > YourModel.readonly.with_deleted > 這樣可以把指定model的物件全部抓出來，不管有沒有被軟刪除過 讓我們來看看實際樣子： # controllers/houses_controller.rb class HousesController < ApplicationController before_action :... Read More

前情提要： 幾乎每個網站都遇到，如果今天你有一千條訊息，你不會想一次載入他，你會使用添加分頁，又或是滾動自動加載的方式載入更多的資訊，今天我們就來用Turbo 和 Stimulus來達成這件事！ 先安裝Pagy插件 $ bundle add pagy pagy 設定 將 Pagy 的後端添加到app/controllers/application_controller.rb： class ApplicationController < ActionController::Base include Pagy::Backend end 將 Pagy 的前端助手添加到app/helpers/application_helper.rb... Read More

前情提要： 由於rails預設的 file_field 上傳圖片預設樣式太醜，所以今天來教學如何客製造自己想要的樣式 先隱藏預設樣式 原本樣式 先給一個最基本的樣式，他的預設樣式很醜，所以等等我們來改變它 <div class="my-4"> <%= f.label :images, '廣告照片：' %> <%= f.file_field :images, multiple: true, accept: 'image/png, image/gif, image/jpeg', maxlength: 1.megabytes, class: 'form-field' %> </div> 修改... Read More

前情提要： 圖片上傳 + s3 的使用 安裝指令、一些插件 下面這個指令，會產生三個表單，一個是blobs、active_storage_attachments、active_storage_variant_records $ bin/rails active_storage:install ----- Copied migration 20230423073109_create_active_storage_tables.active_storage.rb from active_storage ----- $ rails db:migrate ----- == 20230423073109 CreateActiveStorageTabl... Read More

前情提要： 讓使用者可以對一個物件進行進階的輸入訊息 官方文件 https://guides.rubyonrails.org/action_text_overview.html 安裝trix $ bin/rails action_text:install ------ append app/javascript/application.js append config/importmap.rb create app/assets/stylesheets/actiontext.css append app/assets/stylesheets/application.tailwind.c... Read More

前情提要： 我想要查看每一間房子被不論是訪客還是使用者瀏覽的次數 安裝impressionist $ bundle add impressionist 創建impressionist專用table $ rails g impressionist $ rails db:migrate 在想要查看瀏覽數的物件上做設定 在指定的controller、action加上這一段 # controllers/houses_controller.rb class HousesController < ApplicationController def show # 計算瀏覽次數 impressionist(@house)... Read More

前情提要： 前面已經有提到使用swiper輪播圖的用法，今天要用到更進階的教學，要像581那樣，點下按鈕跳出另外一個頁面，並且圖片可以在上面輪播 swiper安裝、使用 如果還不知道 swiper 怎麼使用的，請到前面一篇文章查看 swiper基礎教學 House show頁面 首先看到show這邊的view怎麼設定的，可以看到section裡面包著三個render部分，一個是圖片展示部分的上方區塊，一個是留言展示的下方區塊，還有一個留言表單區塊。 不過今天我們只要看圖片部分而已，所以另外部分就先不看。 view/houses/show > <section class="mx-36"> > <div cl... Read More

前情提要： 本篇教學如何讓圖片使用輪播的方式呈現 安裝stimulus-carousel 輸入下面的指令 安裝 Carousel 套件：您可以使用 yarn 或 npm 安裝任何您喜歡的 Carousel 套件。以下以 swiper 為例，您可以在終端機中執行以下命令： rails 6 的指令 $ yarn add stimulus-carousel rails 7 的指令 $ bin/importmap pin stimulus-carousel 產生controller 創建 Stimulus 控制器：在您的 Rails 7 應用中，創建一個 Stimulus 控制器，例如 carousel_controller.js。您可以在 ... Read More

前情提要： 一間房子可以被使用者點讚/倒讚 一則留言可以被使用者點讚/倒讚 最終程式碼 控制留言喜歡/不喜歡按鈕的JS頁面 comment_like_controller.js > import { Controller } from "@hotwired/stimulus" > import { fetchWithoutParams } from "../controllers/lib/fetcher" > import { library, dom } from '@fortawesome/fontawesome-svg-core' > import { faThumbsUp as regularThumbsUp ,... Read More

前情提要： 如果今天想要對google登入或者facebook登入，做popup頁面 也就是點擊登入按鈕後，不是進入特定頁面，而是彈出一個視窗出來，這樣怎麼做呢？ 安裝devise 照著下面的流程做 (1) 先安裝devise $ bundle add devise (2) 產生devise設定檔案 $ rails g devise:install (3) 測試信件會寄送到local:3000 config/environment/development.rb > config.action_mailer.default_url_options = { host: 'localhost', port: 3000 } Ps... Read More

DO NOT READ THIS FILE ON GITHUB, GUIDES ARE PUBLISHED ON https://guides.rubyonrails.org. 開始使用Rails 本文將介紹如何開始使用Ruby on Rails 看完本篇文章後，你將會知道： 如何安裝Rails、新增一個Rails應用程式和連結你應用程式的資料庫 Rails應用程式的基本架構 基本的MVC架構(Model、View、Controller) 和REST架構的基本原理 如何快速生成Rails應用架構 1、前言 本文針對想從零開始開發Rails應用程式的初學者，不要求Rails使用經驗。 Rails是運行在Ruby程式語言上的Web應用程式框架。如果您之... Read More

DO NOT READ THIS FILE ON GITHUB, GUIDES ARE PUBLISHED ON https://guides.rubyonrails.org. Rails 國際化 (I18n) API Ruby I18n（簡稱國際化）這個gem隨著Ruby on Rails（從Rails 2.2開始）一起提供了一個易於使用且可擴充的框架，用於將你的應用程序翻譯成一種非英語的單一自定義語言或者提供多語言支持。 「國際化」的過程通常意味著將所有字串和其他特定地區的位元（例如日期或貨幣格式）從您的應用程序中抽象出來。 「本地化」的過程是提供這些位元的翻譯和本地化格式。1 因此，在你的rails應用程序”國際化”的過程中，你必須： 確保Rails提供I18n的... Read More

DO NOT READ THIS FILE ON GITHUB, GUIDES ARE PUBLISHED ON https://guides.rubyonrails.org. Rails 應用程式測試 此頁教學包含了Rails中，用於測試應用程式的機制 等閱讀完本篇教學後，你將會學到： Rails的測試術語 如何為你的系統寫單元測試、功能測試、整合測試和系統測試 其他受歡迎的測試方法、插件 1、為何什麼要為你的Rails應用程式寫測試呢？ Rails 讓編寫測試變得非常容易。當你創造models、controllers的時候，就會順便建立一個框架測試代碼。 藉由運行測試，你可以確保你的程式碼，即使在主要程式碼重構之後，也可以保證功能一樣的正常運行。 ... Read More

1、JavaScript JS面試題 - lydia 1-1、跨來源資源分享 CORS Cross 跨來源資源共用（Cross-Origin Resource Sharing (CORS)） 是一種使用額外 HTTP 標頭令目前瀏覽網站的使用者代理 (en-US)取得存取其他來源（網域）伺服器特定資源權限的機制。 當使用者代理請求一個不是目前文件來源——例如來自於不同網域（domain）、通訊協定（protocol）或通訊埠（port）的資源時， 會建立一個跨來源 HTTP 請求（cross-origin HTTP request）。 CORS (Cross-Origin Resource Sharing) from MDN — 1-1-1、... Read More

– 前情提要： 由於不太清楚自連結要怎麼設定，就算看完官方手冊，還是不知道他在講啥，因此打算以自己的方式解釋他的運作原理 – 1、自連結 Self-Join 雖然看了官方文件，還是不了解，但是還是先從官方文件做起手，所以我先把官網的原文放上來並附上翻譯 官方文件 1-2、基本概念 – 英文原文 In designing a data model, you will sometimes find a model that should have a relation to itself. For example, you may want > to store all employees in a single database model... Read More

– 前情提要： 由於之前在跟助教討論專案的時候，有提到如何把Model的複雜度提高，那時候就有提到”多型”這個關鍵字 因此決定來寫一篇文章，來搞懂這個東西到底是什麼？為什麼可以提高Model的複雜度 – 1、多型態 Polymorphic Associations 1-1、名詞定義 要了解一個名詞是什麼，最好的方式就是從官方文件下手，所以我先把官網的原文放上來並附上翻譯 官方文件連結 英文原文 A slightly more advanced twist on associations is the polymorphic association. With polymorphic associations, a model can bel... Read More

訂位系統 怎麼建立商店的seat 怎麼安排客人的座位排在鄰座 即時選位系統 多人同時間 保留多久 訂完位子，會把位子狀態鎖住， action table rails的concern資料夾 為什麼要有一個concern資料夾，裡面為什麼只會有一個.keep資料夾，而資料裡面啥都沒有？ 原因就是這個keep就是為了讓concern這個資料夾可以推上去，還記得前面在git單元的時候，有說過如果 今天沒有資料夾裡面是空的，就會推不上GitHub，所以要放一個空資料夾在那邊 不過為什麼concern這麼奇特，裡面會啥資料都沒有呢？在提到它的功用前，要先知道一個概念，就是關注點分離 – SOC關注點分離(引用WIKI) 在計算機科學中，關注點分離（Separation... Read More

1、專案Table建議 藍table的欄位中，type是保留字，不要使用 phone都是integer，因為電話還有這種類型的 - 0800-137-000 password是string admin的意思是上帝視角的後台，所以店長的話建議用別的名稱 用role來控制user的身份，ex. user表單有 sti, mti 與多型關聯，如果今天有很多類似的表格，用繼承的概念，把共通的table開在同一個表格，用繼承的概念去管理 幫店家新增一個軟刪除，假設我把店家刪掉，其他店家的相關資料還會存在，每個表格都建議加上軟刪除 商店和位子的關聯設定建議，商店和位子的類型是一對多關聯，不是多對多 店... Read More

1、ssh-keygen設定 設定GitHub的SSL 1-1、ssh-keygen指令 首先在終端機打上 > ssh-keygen 這樣打後，會產出一份public、private的key 通常放的路徑是在這/home/aaaaaa/.ssh/id_rsa 如果想看到實際資料夾的位置，可以在mac搜尋bar打 ~/ 這樣打後選擇進自己使用者的資料夾位置，然後打 command + shift + . ，這樣就可以看到/ssh資料夾 如果不會用終端機進到.ssh的位子，可以照著下面做 (1) 開啟 Finder (2) 對著”下載項目”按右鍵 (3) 點選”顯示上層資料夾” (4) 最後鍵盤同時按... Read More

1、docker是什麼 WIKI： Docker是一個開放原始碼的開放平臺軟體，用於開發應用、交付（shipping）應用、執行應用。 Docker允許使用者將基礎設施（Infrastructure）中的應用單獨分割出來，形成更小的顆粒（容器， 從而提高交付軟體的速度。 不過看wiki覺得他好像在講文言文，我們來舉個例子好了！ 1-1、docker舉個例子 如果今天你是用windows的人，通常是一個作業系統(windows)裡面，再裝一個作業系統(WSL)，然後再安裝ROR，這樣一層裝一層的通常會有點慢，所以有些人會直接裝Linux > windows <-- WSL <-- Ruby/Rails > Lin... Read More

前情提要 最後再來處理checkout的畫面了，新增一個checkout.erb.html 我們準備要把刷卡機放在這個畫面 1、Paypal金流練習 braintree官網 先到上面網址註冊一個帳號，記得要註冊sandbox的，他是給你測試用的，註冊好後去信箱收信，從連結登入就可以 SDK是什麼 - 軟體開發套件(不單指一個) 串金流需要用到的是客戶端和server端的SDK Client SDKs - for Android, iOS, and JavaScript Server SDKs - for Java, .NET, Node.js, PHP, Python, and Ruby 1-1、BrainTree刷卡的流程圖 ... Read More

1、金流串接 1-1、綠界手冊 串金流前，要先準備訂單，因為在傳API過去金流商的時候，要傳訂單編號給金流商 1-1-1、什麼叫做幕前 在刷卡的過程中，綠界把你導到綠界的頁面，然後你填完信用卡資訊，照理來說你用導回原本的頁面 這個過程你是看得到的，這個叫做幕前，因為瀏覽器是開著的，整個過程你都看得到 又可以稱作同步付款 1-1-2、什麼叫做幕後 當你在使用ATM付款、銀行匯款之類的，你是在線下網站看不到的地方匯款，這種就稱作幕後 又稱做非同步付款 幕後流程解析 你會得到一個臨時付款的資訊，然後去超商繳費，等到你繳費完成的時候，綠界就會發一個POST POST到另外一個API，所以你要準備另外一個API是可以讓他打回來的 這個API會接的是訂單編號、金額之類的... Read More

1、按讚功能 做按讚功能會比較麻煩，因為要處理前後端媒合 為什麼會說要做前後端媒合呢 因為當我們點下按鈕時，我們首先要控制按鈕的狀態切換(點下去後DOM要做用，並讓按鈕轉換型態) 這樣改只是前端，接下來我們要把按鈕被點擊過的狀態傳到後端(已經被點擊的狀態傳到資料庫) 所以要處理的就是html、JS、ruby的互動過程 1-1、製作流程 那要怎麼處理呢？通常我們在寫rails的時候，html就是我們交換JS、ruby資料的好地方 (1)、點讚的icon放上去，並用JS寫出可以變換狀態的按鈕 (2)、我們要用fetch去接住ruby傳來的狀態，因此先來做路徑(這個路徑是點讚後會觸發的路徑) (3)、處理fetch，使用HTML傳Ruby值到JS(這個值... Read More

1、軟刪除 什麼是軟刪除？？ 假設今天要刪除許願卡，正常要刪除這個卡片，就是直接對這個卡片destroy就好了，不過通常我們在做刪除的時候 都不會讓資料真的消失，那要怎麼辦到呢？要怎麼讓消費者覺得真的有刪掉東西，但是其實是假的，資料庫其實還是有那一筆資料 要怎麼做到呢？ 首先我們在在許願卡身上多開一個is_deleted的欄位，此欄位的預設值是false，假設今天許願卡被刪掉了，我們更改的 是這個欄位，把此欄位改成true，之後我們撈資料，要記得撈所有的許願卡，該欄值為false的許願卡，要不然會把已經 被刪除(is_deleted: true)的許願卡也撈出來喔！！！！！！ > def index > @wishlists ... Read More

1、會員系統 User model WishList第二個MODEL => user會員系統 新增會員會有的路徑 > /users/new => 會員註冊又等於新增user > /users/create > /users/show => show出會員資料 > /users/edit => 修改會員資料 > /users/update > /users/destroy => 刪除會員資料 user路徑創造，我們這邊使用單數的resource，這樣show不用帶id > resource :user resource使用慣例 單數 :單數... Read More

1、find vs. find_by vs. where 1-1、find的用法 find只能抓一個，()裡面的就是model的流水編號 > WishList.find(3) > > 這個find就是抓到該model流水編號為3的實體 find只能抓流水編號 1-1-1、find如果抓不到東西 用find，找不到東西的話，會噴ActiveRecord::RecordNotFound 1-2、find_by用法 find_by可以抓id以外的東西，除了id以外都可以 > WishList.find_by(id: params[:id]) > > find_by可以抓id以外的東西，如果今天是要抓model裡面n... Read More

今天來建造三個表單 首先是一對一的has_one 何謂一堆一呢 用店長、商店來舉例(我們先假設今天店長手頭比較緊，只會有一間商店) 一個店長只會有一間店 一間店只會有一個店長 has_one 一對ㄧ Owner 來先想一下店長表單有包含哪些欄位，店長model的欄位有，姓名、信箱、電話 完整的資訊就像下列表格 欄位名稱 資料型態 說明 name string 姓名 email string email phone string 電話 ... Read More

1、WishList製作功能 - CR 1-1、第零步驟：路徑設定routes 來做許願頁面，先給出許願頁面的首頁、new、create功能 > get "/make_a_wish", to: "wish_list#card" # 許願首頁 > get "/new_wish", to: "wish_list#new_wish" # 許願新增頁 > post "/wish_card_list", to: "wish_list#create_wish" # 許願新增頁的表單提交地方 > Verb "網址", to: "controller#action" # 此為rout... Read More

1、Rack 使用者點擊網站，傳request的流程 > request -> web server -> rack -> ruby(erb) 1-1、Rake定義 Rake的定義是，只要做一個物件，這個物件可以call，並且回傳一個包含三個元素的陣列，三個元素包含 (1) 網頁狀態(數字) (2) HTTP Header(hash) (3) HTTP Body(陣列) Ps. 只要支援call方法就可以，中介軟體也支援rack > run Proc.new { |env| -> 用 run 去執行rack > [ > 500, ... Read More

1、物件導向概念 1-1、函式編程 function programming(FP) 跟物件導向相反的概念，扁平化的程式設計 像是React這套JavaScript框架就是使用FP來開發程式，因此若想學習React.js勢必也要熟悉FP的基本概念，而JavaScript程式語言也需要符合FP的編程理念 1-2、物件導向 Object Oriented Programming(oop) 物件導向是上下階層的程式設計，物件也就是類別的實例，也就是說有了類別這張藍圖我們可以在程式中產生許多汽車類別的資料，而這些資料彼此之間不互相影響，每一個皆是獨立的。 物件導向有以下幾個特性 1-2-1、(1) 封裝 即是將物件內部的資料隱藏起來，只能透過物件本身所提供的介面(interface)取得... Read More

1、ruby hash 1-1、新增hash 舊版 h = { :name => "ccc", :age => 18 } 新版 h = { :name: "ccc", :age: 18 } 不過其實把 h 印出來，其實還是跟舊版一樣，新版的寫法只是語法糖，實際是沒改的 p h # { :name => "ccc", :age => 18 } 1-2、hash取值 記得取值要特別注意要放符號，要不然value印不出來 錯誤示範 p h["name"] # X 正確示範 p h[:name] # "ccc" 1-3、取出所有的key、values 先創一個新hash profile = {:name: 'c... Read More

1、工作分配 > 看板便利貼 > Todo Doing Done > 口口口 > 拿票放到右邊 口口 > 做完放到這 口 > 口口口 > 每一個任務都會有一個便利貼，功能盡量拆分小一點 1-1、難度計量表 每一個 task 便利貼都會有主題、描述、預計完成時程(diff) 會有一個計量表，1~5，拿這個便利貼的時候，就代表你覺得完成此功能會耗時多久 1 - 一天內 2 - 一天半 3 - 兩天內 4 - 兩天半 5 - 三天 1-2、注意事項 如果今天你拿便利貼，又寫上 5 分的話，代表完成任務時間大約要耗時 2.5 天 給點數的時候，要讓大家討論，不是一個人決定就是這樣，如果今天兩個人給... Read More

找到專案的主要目的以其核心功能 業主 - 我想要做一個網站 什麼樣的網站?? 官網??哪一種類型的官網 什麼樣的電商網站?? 我想要做pc hoem網站 討論的時間要估進去(通常會耗時最多時間) 做網站的主要目的是什麼 -> 火力展示? 嘗試沒有碰過的技術? 單純想做某類型的網站? 目的不同，研究技術和功能設計會花費的時間也會有點不同 如果一開始選擇的技術太過困難，記得要有停損的deadline，要不然demo會很難看 找出網站的使用者 直接想像你是使用者本人，對網站會有哪些期待 參考同樣類型的網站，思考這些網站把什麼功能做的最顯眼好用，為啥他們會選擇把時間花在這些功能上 不能沒有的功能 大家提議重複度高的功能 - 提... Read More

insertAdjacentHTML() & removeChild() 本次練習的有兩件事情 點擊按鈕1，增加ul中的li數量 點擊按鈕2，減少ul中的li數量 – 使用querySelector抓取物件的小提醒~~~~ nth-child 使用方式 ex. 有兩個button元素，被一個div.btn包住 – > HTML > <ul> > <li><a href="">1</a></li> > <li><a href="">2</a></li> > <li><a hr... Read More

1、按鈕旋轉 - 看影片把code補上 11/1 - 早上的影片 寫在手機才會出現的地方 max-width: 767 2、Bootstrap 教學 Bootstrap的橫向排列，都是用flex製作的 所有屬性的等級都會訂到6個 -> ex. border-0~5 色彩分成八大主色 文字色彩除了八大主色，還多了一些透明度的色彩 有某個物件正在作用中，他都會套上一個active的屬性 2-1、Gutters 欄跟欄之間的距離 設定在col上 g-4 => 上下左右都有 gx - 上下有 gy - 左右有 2-2、spacer是預設的文字大小 - 16px > .ms-1 { > margin-left: ($spacer *... Read More

1、格線系統補充 在做格線系統的巢狀容器的時候 row 層會被設定 margin-left: -10px;、margin-right: -10px; 要設定負值的原因，column 被設定 padding 如果沒用 margin 負值去吃掉這些 padding，整個版面會歪掉(之後可以自己切試試) 格線會分成三個容器 container - 這個也要記得設定 padding，要不然會被第二層的 row 可以推出來 row - 讓裡面的欄可以切分多個，並對 column 設定 flex column - 設定欄寬 Ps. 如果想要在 column 裡面在切分，就要在 column 塞一層 row(為了要讓 paddding 被抵消) 1-1、格線系統共用設... Read More

1、Closure 閉包 Closure是什麼？我們以setTimeout舉例 Ps. 完整的 code 可以看closure那邊文章 假設今天想要印出 1 -> 2 -> 3 (每過一秒印出 1++) 但是發現用var宣告變數後，結果跟預想的不太一樣 > for(var i = 0; i < 3; i++) { > setTimeout(()=>{ > console.log(i) # 3 -> 3 -> 3 (每隔一秒印出一個3) > }, 1000 * i) > } – 把上面 for 迴圈中的 var 改成 let 做到 1 -> 2... Read More

1、事件流 1-1、JS的事件留有三階段 如果今天有兩層結構，會先往下穿過外層到內層，再從內層到外層 (1) 第一階段 -> 捕獲階段 (capturing) (2) 第二階段 -> targeting (3) 第三階段 -> 冒泡階段 (bubbling) 1-1-2、監聽器的第三個參數 事件監聽器的第三個參數，預設值是false (1) 第三個參數，如果是True，就會是capturing階段 (2) 第三個參數，如果是false，就會是bubbling階段 Ps. 這個東西做遊戲會用到，像是卡牌遊戲 1-2、實際範例 我現在做了三層的div (1) card1最外層 (2) card2中間層 (3) card3最內層 <d... Read More

1、CSS reset (1) 各家瀏覽器會有預設的外觀(margin or padding不一樣)，為了解決各家瀏覽器的差異性，css reset就此誕生。 (2) css reset不一定要用誰的，只要能消除差異性就好。 (3) 推薦老師很常用的meyerweb，並多開一個css檔案link: reset.css，放在原本網頁css檔案的前面。 2、CSS normalize (1) 破壞性沒有這麼強大的reset寫法，只更改了瀏覽器差異性的地方 (2) 先把normalize加進去後，在根據自己想要h1、h2、h3……等等的行高使用 3、*->通用選取器 無差別全部選取 4、子選單製作 - Submenu (1) 在第一層ul的li層，再建立一層... Read More

1、五倍官網code review 導覽列的語意標籤是 - nav，記得要用 假設文字不會很長，可以用一個h3包起來，然後裡面是兩塊span，然後裡面的兩個span設定成兩個block，這樣兩個span就可以佔滿兩行 製作超連結按鈕的時候，可以盡量用 block 把整個寬度撐開，這樣做比較好，就像五倍官網的更多報導的按鈕，我只設定了padding，只有把 a 的外圍撐開，但文字實際的寬高還是沒變。ps. fit-content => 可以針對 a 的 width 設定此屬性，非常好用!! ::before、::after 預設為inline，所以會在父層內容的前面，如果用block，可以變成佔滿整塊的空... Read More

1、API(Application Programming Interface) 抓取網路資料或是拿取一些別人的程式套件，就是用API來取得 1-1、舉個例子 當A程式需要另一個B程式幫他做某件事或拿某些資料的時候，這中間就會透過API(我們稱C)來幫忙溝通。 這時A並不需要知道B做了什麼，怎麼做的。他只需要知道三件事: (1) 向C要求做這件事之前需要提供什麼資料? (2) 成功的話C會回復給我什麼? (3) 失敗的話C會回復給我什麼? 上述三點也就是我們說的API的規格，至於這些規格要從哪邊取得呢? 通常都是跟開發API的工程端拿，或是大一點的網站，如Facebook、google，或是政府機關網站都會有對應的API規格文件可以參考。 2、RESTFul (... Read More

1、ES6 / ES2015語法補充 1-1、字串與變數的組合 > `${} 123 ${}` 1-2、箭頭函數 > const addNumber = () => { > return > } 2、物件簡寫 先設定兩個變數 > const age = 18; > const attack = () => console.log(123) 在設定物件的時候，如果key跟值一樣，key值可以直接寫該變數就好 > const hero = { > name: "悟空", > > age: age, 如果key跟value一樣，可以寫一個就好 > a... Read More

1、relative實戰練習 - div區塊向上偏移做法 <div class="box"></div> > .box { > width: 200px; > height: 200px; > background-color: aquamarine; > position: relative; -> 相對定位 > top: 0px; > margin: 30px; > } > > .box:hover { -> hover效果 > top: -10px;... Read More

1、order屬性 (1) 所有子物件的order值都預設為0 (2) 只要要給一個order值，他就會跑到後面去 (3) 排序位置，跟主軸方向有關 1-1、實際測試 - 把div 2 換到最右邊 <div class="flex"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> .flex { width: 500px; height: 500px; background-color: aquamarine; ... Read More

1、陣列 - 續 1-1、slice語法 定義：slice() 方法會回傳一個新陣列物件，為原陣列選擇之 begin 至 end（不含 end）部分的淺拷貝（shallow copy）。而原本的陣列將不會被修改。 假設今天宣告一個陣列，並再宣告一個變數等於前面那個陣列，如果今天修改了變數中陣列的元數，前面那個陣列也會被修改 > const list = ["a", "b", "c", "d"] > cost hi = list; > hi[0] ="x" -> 這樣兩個印出來，都會兩個都會改到 > > console.log(list) # ["x", "b", "c", ... Read More

1、函數 function 1-1、什麼是函數？ f(x) = 3x + 2 f -> function的縮寫 x -> 參數 parameter 1-2、為什麼要寫函式 (1) 為一函式定義一個行為 (2) 重複利用 1-3、function hello world > // name -> 參數parameter > function sayMyName(name) { > console.log("hi222222"); > console.log(name); > } > // "Yeeeeee" -> 引數argument > // () -> 呼叫、使用、啟動 > ... Read More

1、css心智圖 1-1、文字 字型 font-family 大小 font-size 樣式 font-style 色彩 color 裝飾 text-decoration 1-2、背景 背景色 background-color 背景圖 background-image 背景圖尺寸 background-size 背景圖位置 background-position 背景圖重複 background-repeat 背景圖固定方式 background-attachment 1-3、位置 position top right bottom left z-index 1-4、尺寸 背景尺寸 backg... Read More

1、class的命名 1-1class 命名禁止事項 (1) 開頭不能為數字 -> ex. 1good (2) 不要用編號 -> ex. btn1、btn2、btn3 (3) 不要用左跟右 -> ex. btnleft、btnright (4) 不要用奇怪符號 -> ex. $、% 1-2、class 命名風格 不管是蛇式，還是駝峰式都有機會用到，沒有特定要使用的命名方式，看不同場合有不同適合的寫法 > .news-list > .news_list > > .newsList > .NewsList > > .news_list_disable > .news-list_disable 1-... Read More

1、JS前言 1-1、前端工程師 html結構、css樣式、JavaScript行為 1-2、JavaScript 跟 Java 的關係 JS當初取名的來由，是去蹭Java名字的熱度(當初Java很紅)，除此之外都沒啥關係 1-3、JavaScript 跟 ES6 的關係 ECMA ： 歐洲電腦製造商協會 TC39 ： 第39號委員會，負責JS的標準化 ECMA-262 ： JS的規格 ECMAScript ： 根據ECMA262規範所設計出來的程式語言規則 JS ： 某一款符合ECMAScript 的程式語言 ES6 ： ECMAScript 第六代 1-4、為什麼不學最新版本就好 瀏覽... Read More

1、表格製作 快捷鍵方式產出一堆的table、tr、td > 使用 table>tr*3>td*4，即可拉出下面的資料 > <table border="3" width="500"> > <tr> > <td>資料1</td> > <td>資料1</td> > <td>資料1</td> > <td>資料1</td> > </tr> > <tr&g... Read More

1、git restore - 修復檔案 如果今天不小心把檔案或目錄刪掉了，可以使用這個指令 > **修復檔案實作** > > git status > 刪除檔案後，確認目前git狀態 > -------------- > 終端機資訊 > 刪除： hello.html > 刪除： index.html > 刪除： welcome.html > --------------- > > git restore hello.html > 救回指定檔案 > git restore . &... Read More

1、HTML教學大綱 1-1、HTML - 1.5 天 標籤 語法 語意 1-2、CSS - 6.5 天 語法 選取器 優先權 基礎屬性 屬性分類 寫法 flex grid 1-3、RWD - 2 天 手刻 格線系統(自己刻出來) bootstrap 2、VS code設定 2-1、HTML在VS code會用到的外掛 (1) Auto Rename Tag (2) Chinese lorem -> 開啟 ctlorem功能，可以產生隨機假文 (3) CSS Variable Autocomplete (4) IntelliSense for... Read More

1、關於git - 版本控制系統 如果你問大部份正在使用 Git 這個工具的人「什麼是 Git」，他們大多可能會回答你「Git 是一種版本控制系統」 專業一點的可能會回答你說「Git 是一種分散式版本的版本控制系統」 但這個回答，對沒接觸過的新手來說，有講跟沒講差不多。到底什麼是「版本」？要「控制」什麼東西？什麼又是「分散式」？ 這個我們等等都會位大家解答 1-1 什麼是版本 下面三個日期都有各自的資料夾，資料夾就代表三種版本 > > 2016/2/8 檔案夾有三個檔案 > > 2016/2/10 檔案夾有5個檔案(多兩個) > > 2016/5/8 更改五個檔案中其中的兩個檔案內容 > *... Read More

ruby安裝套件相關指令 ruby || rvm、gem、bundle #rvm管理ruby的工具 #gem管理套件的工具 #bundle install - 找一個gemfile檔案 開啟此檔案裡面的所有套件 #node npm nvm yarn bundle 和 gem 的差異 如果現在有一個狀況 Ａ套件需要Ｂ套件 1.0.0 版本 Ｂ套件需要Ｃ套件 1.0.0 版本 Ｄ套件需要Ｂ套件 2.0.0 版本 這樣會導致一個問題，今天如果多個檔案, 要的B套件不同的版本,就有可能發生錯誤 gemfile解決版本相容的問題 gemfile => gem “a”, 1.0.0 版本 gem “c”. 2.... Read More

報名課程後～ 聽完課程講座，並正式決定報名後，離正式上課，還有大約兩個月。這期間也沒有閒著，因為五倍會開放線上課程給大家學習，因此這兩個月也是非常的充實。 ps.越早報名越好，越早報名就可以越早拿到線上課程的影片。 程式語言–Ruby print vs puts vs p 三種指令差異 print vs puts vs p 三種指令差異 > ##### TIP > > #印出 Hello, world 字樣 > print "Hello, world" > > #印出 Hello, world 字樣，並在結尾加上換行 > puts "Hello, world" > > #印出 "Hello, world" 字樣（含雙引... Read More

什麼是Closure閉包呢？ 閉包（Closure）是函式以及該函式被宣告時所在的作用域環境（lexical environment）的組合。 from MDN lexical的意思 代表著區塊間的包裹關係，被包裹在內層的區塊可以保護自己的變數不被外層取用，相反的外層區塊的變數還是可以被內層區塊使用 作用域的意思 指的正是作用域環境在程式碼指定變數時，使用 location 來決定該變數用在哪裡的事情。巢狀函式的內部函式，能訪問在該函式作用域之外的變數。 這樣有可能還是不太懂，我們直接舉個例子好了，下面這個函式有幾個特色 (1) init() 建立了局部變數 name 與 displayName()... Read More

this是什麼？ JavaScript中的this是不是很常讓人誤解現在到底指向誰呢？ 我們現在就來看看，到底要怎麼辨別在不同地方出現的this都代表什麼意思。 – this就是代名詞的意思 – this在以下幾種情況下，會有不同的意義 是否為嚴格模式 use strict 是否有使用 new 是否有使用 apply, call, bind () => {} 沒有自己的 this 誰呼叫，誰就是 this 沒人呼叫，this -> 全域物件 重要順序為 嚴格模式 > new > apply、call、bind > 箭頭函式 > 誰呼叫誰就是this > 沒人呼叫為全域物件 接下來就為各位介紹每個情... Read More

Object.create(null) 設定一個創建英雄模組 今天想創造一個英雄模組(之後可以快速生成一個英雄)，因此我們用Object.create來處理(不過目前是還沒加上參數的) > // 創造英雄的fc > function heroCreator(profess, skill) { > // 創造新的英雄，是否要參考某個物件(ex. 我要讓英雄都有共通技能) > // 如果沒有要參考，就給一個空物件就好 > const hero = Object.create(null) > > // 新增英雄的屬性(可以隨便加) > // 這邊選擇的加法是，直接把傳進來的參數變成英雄的屬性... Read More

前情提要 本篇文章要說解釋的是事件循環(event loop)是什麼？？？？ 要說明此東西，要先知到什麼情況下，會遇到、觸發事件循環(event loop) 我們這邊先來舉個例子，今天我想印出一個HI，並且過五秒後，印出There，最後再印一個JS > code Console(印出順序) > > console.log(`hi`) Hi > setTimeout(function(){ JS > console.log(`There`); There > }, 5000); > > console.l... Read More

1、什麼是Hoisting變數提升？ 提升的意思就是，讓變數可以在宣告之前就使用 – 它是一種釐清 JavaScript 在執行階段內文如何運行的思路（尤其是在創建和執行階段） 然而，提升一詞可能會引起誤解：例如，提升看起來是單純地將變數和函式宣告，移動到程式的區塊頂端，然而並非如此。 變數和函數的宣告會在編譯階段就被放入記憶體，但實際位置和程式碼中完全一樣。 from MDN – 1-1、JS分兩階段運作 (1)第一輪是掃瞄 - 建立期 1A - 註冊名稱(identifier) 1B - 進行初始化(檢查語法、建立變數) (2)第二輪式執行 - 執行期 執行函數、賦值 > 情境算式 > var a = 1 > conso... Read More

0、前言 寫此篇文章的動機 身為一個”前”數位行銷人員，幫網站串接GTM，連接數據是一個非常常見的事！ 因此在學習ROR的時候，想當然也想要嘗試把GTM裝在ROR的網站上，不過在安裝前，發現Rails的Turbolinks 用以往的GTM安裝方法，會讓網站產生BUG，因此決心來徹底了解Turbolinks到底是什麼東西？ 並且希望最後能成功把GTM成功裝上ROR的網站！ 參考文章 Rails Turbolinks™ 5 深度研究 軒軒的家 - Turbolinks 5 教學翻譯 1、什麼是Turbolinks？ Turbolinks 是Javascript程式，是源自 Ruby on Rails 的 Web 加載優化方案 通常會搭... Read More

0、前言 寫此篇文章的動機 為了練習Redis的功能，因此直接做了一個比較簡單的Project，此專案用到ROR、Redis、TailsWind CSS 1、Redis優點、特性 在實作之前先介紹一下Redis的特性，Redis是非關聯式資料庫。 所有Redis資料都存放在記憶體中，從而實現低延遲和高輸送量的資料存取。 與傳統資料庫不同，記憶體內資料儲存不需要存取磁碟，從而將引擎延遲縮減到微秒。 因此，記憶體內資料儲存能夠支援更大規模的操作，而且回應時間更快。 這項優勢提供超快速的效能，平均讀取和寫入操作時間低於一毫秒，並支援每秒百萬個操作。 FROM AMAZON 1-1、Redis優點 1-1-1、速度 而最大特性就是速度... Read More

You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated. To add new posts, simply add a file in the _posts dire... Read More

This note demonstrates some of what Markdown is capable of doing. An exhibit of Markdown Note: Feel free to play with this page. Unlike regular notes, this doesn’t automatically save itself. Basic formatting Paragraphs can be written like so. A paragraph is the basic block of Markdown. A paragraph is what text will turn into when there is no... Read More

A safe integer is an integer that can be exactly represented as an IEEE-754 double precision number, and whose IEEE-75 representation cannot be the result of rounding any other integer to fit the IEEE-754 representation For example, $ 2 ^ {53} - 1 $ is a safe integer, it can be exactly represented Read More

Canon in D (Pachelbel’s Canon) - Cello & Piano [BEST WEDDING VERSION] Some of you know that we occasionally play for weddings. As you can imagine, we get a LOT of requests for Canon in D, and we discovered that there were no good arrangements available anywhere for piano and cello! Hard to believe given its popularity. So we decided to make ... Read More

Table example as below For now, these extended features are provided: Cells spanning multiple columns Cells spanning multiple rows Cells text align separately Table header not required Grouped table header rows or data rows Rowspan and Colspan ^^ in a cell indicates it should be merged with the cell above. This feature is contribu... Read More

1. Pie chart pie title Pets adopted by volunteers "Dogs" : 386 "Cats" : 85 "Rats" : 35 2. sequence diagram @startmermaid sequenceDiagram Alice -» Bob: Hello Bob, how are you? Bob–»John: How about you John? Bob–x Alice: I am good thanks! Bob-x John: I am good thanks! Note right of John: Bob thinks a longlong time, so longthat ... Read More

My First PlantUML PlantUML Block-1 @startuml Bob -> Alice : hello @enduml PlantUML Block-2 Bob -> Alice : hello world PlantUML Block-3 @startuml (*) –> “Initialization” if “Some Test” then –>[true] “Some Activity” –> “Another activity” -right-> () else ->[false] “Something else” –>[Ending process] () endif ... Read More

Paragraphs are separated by a blank line. 2nd paragraph. Italic, bold, and monospace. Itemized lists look like: this one that one the other one Note that — not considering the asterisk — the actual text content starts at 4-columns in. Block quotes are written like so. They can span multiple paragraphs, if you like. Use 3 dash... Read More

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum neque eget nunc mattis eu sollicitudin enim tincidunt. Vestibulum lacus tortor, ultricies id dignissim ac, bibendum in velit. Some great heading (h2) Proin convallis mi ac felis pharetra aliquam. Curabitur dignissim accumsan rutrum. In arcu magna, aliquet vel pretium et, m... Read More

Eos eu docendi tractatos sapientem, brute option menandri in vix, quando vivendo accommodare te ius. Nec melius fastidii constituam id, viderer theophrastus ad sit, hinc semper periculis cum id. Noluisse postulant assentior est in, no choro sadipscing repudiandae vix. Vis in euismod delenit dignissim. Ex quod nostrum sit, suas decore animal id i... Read More

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum neque eget nunc mattis eu sollicitudin enim tincidunt. Vestibulum lacus tortor, ultricies id dignissim ac, bibendum in velit. Proin convallis mi ac felis pharetra aliquam. Curabitur dignissim accumsan rutrum. In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lo... Read More

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur s... Read More

Put the math expression within $…$: \(\LaTeX{}\) $\Pi$ $ a * b = c ^ b $ $ 2^{\frac{n-1}{3}} $ $ \int_a^b f(x)\,dx. $ \( \int_a^b f(x)\,dx. \) \[\begin{cases} \text{if true}\ foo \\ \text{if false}\ bar \end{cases}\] $ \rho {\rm{FOD}} = \sum\limits{\sigma ,i} {(\delta _1 - \delta _2 n_i^\sigma ) \phi _i^\sigma ({\bf{... Read More

You can write regular markdown here and Jekyll will automatically convert it to a nice webpage. I strongly encourage you to take 5 minutes to learn how to write in markdown - it’ll teach you how to transform regular text into bold/italics/headings/tables/etc. Here is some bold text Here is a secondary heading Here’s a useless table: ... Read More