2023-06-03
📚 Knowledge Library
Tips and Tricks.
All #accessibility #cloud9 #codepen #concept #css #css-basic #css-flex #css-grid #data-url #html #html-form #inspirations #ios #javascript #lang-zh #layout #link #mobile #mobile-web #mysql #php #php-basic #podcast #progress-enhancement #python #resilient #resources #swift #ui-design #user-media #video #wordpress
-
-
2021-04-18
IBOutlet 和 IBAction
IBAction 和 IBOutlet 是程序和界面的兩種連結。 -
2021-04-18
使用 Core Data
-
2021-04-18
UserDefaults setter and getter
// set UserDefaults.standard.set("anything", forKey: "yourKey") // get UserDefaults.standard.value(forKey: "yourKey") -
2021-04-18
使用 UITableViewController
要使用 UITableViewController，必須了解其 Delegate Protocol：UITableViewDelegate 及 UITableViewSource。 -
2021-04-18
Pull to Refresh control
tableView.refreshControl = UIRefreshControl() tableView.refreshControl?.addTarget(self, action: #selector(fetchData), for: .valueChanged)
-
2020-12-05
CSS Gradient Text
-
2020-11-11
Create unicode mb4 database
CREATE DATABASE db_name CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
-
2020-11-11
Basic skeleton of web scrapping
from bs4 import BeautifulSoup import requests url = "https://news.gov.mo/home/zh-hant" res = requests.get(url) soup = BeautifulSoup(res.text, "lxml") for h5 in soup.select("h5"): print(h5.text.strip()) -
2020-11-11
CSS Grid Masonry Example
grid-template-rows: masonry; -
2020-05-11
Link: Ryan Singer: UI Breadboards
It may seem a little silly to call fat marker sketches a technique or a tool. The reason for calling them out is we too easily skip ahead to the wrong level of fidelity. Giving this rough early stage a name and using a specific tool for it helps us to segment our own creative process and make sure we aren’t jumping ahead to detail a specific idea when we haven’t surveyed the field enough.
We don’t want to make our early UI flow look too finished. We need to leave room for UI design. -
2020-05-11
Link: Podcast: What is a resilient website? (with Jeremy Keith)
The word progressive engagement makes people only think about JavaScript. So Jeremy rebrands the word into Resilient Website.
-
2019-07-22
Fix the page jumping issue when linking to same page anchor with Turbolinks
-
2019-06-02
Demo of Scroll Snap
The scroll-snap CSS has updated to new syntax. Here is a demo of using the latest syntax of scroll-snap and also making it mobile friendly.
-
2019-05-18
Demo of Web Share
-
2019-04-27
An example of uploading file from Swift / Alamofire to PHP
-
2018-11-01
Link: Using Dark Mode in CSS
https://paulmillr.com/posts/using-dark-mode-in-css/
/* Text and background color for light mode */ body { color: #333; } /* Text and background color for dark mode */ @media (prefers-color-scheme: dark) { body { color: #ddd; background-color: #222; } }Example code from Paul Miller.
-
2018-10-29
Separate of Concern: Data / Logic / View
We can separate the code into different concerns so that each one focuses on their own problems to solve.
-
2018-10-28
Codepen Link: Funny Emoji hover effect
-
2018-10-27
Link: 147 named color
-
2018-10-24
Video Demo: Implementing a Simple Blog in PHP and Cloud9
-
2018-10-23
MySQL basic CRUD commands
-
2018-10-23
Link: CSS Diner — Learn Selector with dinner game
This CSS Diner game is a good starting point to learn selector.
-
2018-10-22
Testing Input Media Capture
Normal file input triggers a select action sheet for use to choose the media source from either camera or photo album.
We can directly trigger camera UI without the select by using the
capture="camera":<label> File with capture <input id="take-picture" type="file" accept="image/*" capture="camera" > </label> -
2018-10-21
Quantity Selector in CSS
Demonstration of querying and setting responsive styles to navigation with exactly 4 items and 5 or more items. The font-size is smaller when there are more items in the navigation. The grey border simulates the website shown in narrow width screen. Original idea from A List Apart—Quantity Queries for CSS.
-
2018-10-20
iOS UIButton 的相片圖片伸展
imageButton.imageView?.contentMode = .scaleAspectFill imageButton2.imageView?.contentMode = .scaleAspectFit let image = UIImage(named: "button.png")?.resizableImage(withCapInsets: UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)) backgroundButton.setBackgroundImage(image, for: .normal) -
2018-10-19
UIButton Background Image Stretching with 9-slicing
-
2018-10-14
A quick example on ISO8601DateFormatter and sorted(by:) function
Here is an example of using
ISO8601DateFormatterandsorted(by:)in Swift and iOS.ISO 8601 is the YYYY-MM-DD format to represent date. In
ISO8601DateFormatter, Swift expects the time as well: YYYY-MM-DDTHH:MM:SSZ. If we simply need the date without the time, we can set the.withFullDateformat option.let dateFormatter = ISO8601DateFormatter() dateFormatter.formatOptions = .withFullDate let date = dateFormatter.date(from: "2018-10-11") -
2018-09-20
Enabling `:active` styling in mobile device
The following JavaScript enables the
:activestyle.document.ontouchstart = function() {};Then, we set the button to have transparent tap highlight:
.button { -webkit-tap-highlight-color: rgba(0,0,0,0); } -
2018-09-19
Upgrade Cloud9 IDE to PHP7
wget https://raw.githubusercontent.com/imanseau/Cloud9-PHP7-Upgrade/master/cloud9-php7-upgrade.sh sudo chmod +x cloud9-php7-upgrade.sh ./cloud9-php7-upgrade.sh
