====== Use custom Font in web ======
* convert tff font to webfont:
* https://www.fontsquirrel.com/tools/webfont-generator
* use Expert > no subset for full character usage, like non English font
* define font face in css 1st line
@font-face {
font-family: 'theFontNameHere';
src: url('theFontNameHere-webfont.woff2') format('woff2'),
url('theFontNameHere-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body.CN{
font-family: 'theFontNameHere';
}
===== HTML5 Standards =====
* html5 tag attribute reference: https://www.w3schools.com/tags/ref_attributes.asp
====== Problem and Solution ======
====== css file not loading ======
* problem: some css file loaded while some not
* solution: make sure no number in theCSSName.css
====== Responsive Design ======
* my notes on [[[[devwiki:bootstrap|bootstrap 3]]
* bootstrap (twitter): http://getbootstrap.com/getting-started/#download
* with built-in UI elements, 12 grid scaffolding
* amazium (less)
* 960 grid into 1200 grid
* 960 grid system -> unsemantic (sass)
* 12 or 16 grid system
**Responsive Elements**
* responsive image map:
* image map basic and tool
* https://www.w3schools.com/html/html_images_imagemap.asp
* http://www.htmldrive.net/items/show/704/pure-CSS-Image-Maps
* (works) https://summerstyle.github.io/summer/
* https://www.mobilefish.com/services/image_map/image_map.php
* (works) js method to recalculate map when image resize (need to call when image visible): https://github.com/davidjbradshaw/image-map-resizer
* (not sure, not on attemp) instead map, it use generated svg method: https://imagemapper.noc.io/#/
* https://stackoverflow.com/questions/19484707/how-can-i-make-an-svg-scale-with-its-parent-container
* https://css-tricks.com/scale-svg/
* (similar js but old) https://github.com/stowball/jQuery-rwdImageMaps
* https://researchasahobby.com/responsive-image-clickable-areas-free/
**CSS Pre-processor**
* SASS/SCSS/LESS likes, it turns what you write into a css code
* in SASS, variable support, nesting
**HTML pre-processor**
* hammer?
**javascript pre-processor**
* coffeescript
to read about web
* http://bradfrost.github.io/this-is-responsive
* http://browserstack.com
Done:
* PACKT Responsive Web Design From Concept to Complete Site
https://www.youtube.com/watch?v=R52AsglN0DE
https://colorlib.com/wp/html5-one-page-website-templates/
https://colorlib.com/wp/one-page-website-templates/
https://onepagelove.com/tag/html5
https://html5up.net/fractal
https://designscrazed.org/flat-onepage-responsive-html5-templates/
https://designscrazed.org/free-responsive-html5-css3-templates/
http://www.informit.com/articles/article.aspx?p=1405555&seqNum=4
https://www.youtube.com/watch?v=FqMIyTH9wSg
https://www.youtube.com/watch?v=gxM1XErjMrc
https://www.youtube.com/watch?v=topjvXzjdYM
https://www.youtube.com/results?sp=SBTqAwA%253D&q=fast+way+to+build+cross+platform+mobile+app
https://www.youtube.com/channel/UCGp1zoGrCqT54f32L6tGgqg/videos
https://www.youtube.com/watch?v=A6Jq7NVBVxU
https://www.youtube.com/watch?v=KBPIRen9ABI
https://www.youtube.com/watch?v=sCnGSOaaZFo
https://www.youtube.com/watch?v=C-UwOWB9Io4
https://www.youtube.com/watch?v=jbopML8dnqg
https://www.youtube.com/watch?v=PE81fyfEJUA
example
http://preview.themeforest.net/item/definity-multipurpose-onemulti-page-template/full_screen_preview/12379946?ref=cirvitis
http://www.octarinethemes.com/demos/definity/#multipage
http://www.octarinethemes.com/demos/definity/index-fs-slider-mp.html
http://www.octarinethemes.com/demos/definity/index-fs-video-mp.html
http://www.octarinethemes.com/demos/definity/index-kenburn-mp.html
http://www.octarinethemes.com/demos/definity/index-fw-slider-mp.html
http://www.octarinethemes.com/demos/definity/index-animated-mp.html
http://www.octarinethemes.com/demos/definity/index-fw-video-mp.html
http://www.octarinethemes.com/demos/definity/index-text-mp.html
http://www.octarinethemes.com/demos/definity/index-freelancer-mp.html
http://www.octarinethemes.com/demos/definity/index-agency-mp.html
http://www.octarinethemes.com/demos/definity/index-agency2-mp.html
http://www.octarinethemes.com/demos/definity/#onepage
http://www.octarinethemes.com/demos/definity/#speciality
====== HTML5 Elements (Widgets) ======
**Video**
* code for video
** center image in div**
* horizontal center image, just put div text-align as center .div_name{ text-align: center; }
* another way is to put image to respond to div center, margin itself, and it need to be block not inline to have margin .img_name{ margin: auto; display: block;}
* 3rd method is to use latest div tech, flex, put div as flex
.div_name{
display: flex;
justify-content: center;
}
* in 3rd method, as it is like hbox default, those elements inside div is like widget in UI, to align those widgets together, set align-items in .div_name
.div_name{
display: flex;
justify-content: center;
align-items: center; /* flex-start: align top, flex-end: align btm; */
}
====== HTML 5 - Interactive Charts and Canvas ======
* no flash, no video, just interactive graphics purely in HTML5, and with 3D as well
Tutorial
* Intro to charts and canvas: http://www.script-tutorials.com/html5-charts-and-graphs/
Resource
* list of HTML5 chats library
* http://www.webresourcesdepot.com/category/goodies/charts/
* http://mag.splashnology.com/article/15-awesome-free-javascript-charts/325/
* social visualization : http://readwrite.com/2008/03/13/the_best_tools_for_visualization#awesm=~oHD0na5GWy5jvS
* D3 data driven graph library: http://d3js.org/
* arbor.js a graph visualization library: http://arborjs.org/
* yFile, a diagram library: http://www.yworks.com/en/products_yfileshtml_about.html
* Neo4j, Graph Database
* http://www.neo4j.org/
* demo: http://www.youtube.com/watch?v=h1OIUnqRjH4
* a cloud service based on easy infograph building: https://www.kickstarter.com/projects/trinachi/infoactive-drop-live-data-into-interactive-infogra
Reference
* advanced feature of HTML5s:
* http://webdesignledger.com/inspiration/12-fun-clever-examples-of-html5
* http://www.chromeexperiments.com/
* http://www.brianmokeefe.com/html5_graph
* http://updates.html5rocks.com/
* HTML5 api: http://www.w3.org/TR/html5/embedded-content-0.html
App
* online HTML5 3D graph plot: http://www.graphycalc.com
* online 3D card folder: http://caa1211.github.io/webOAcard/?m=castle
* online 3D ship viewer: http://www.eveonline.com/universe/spaceships/avatar/
* social network lined canvas: http://9elements.com/io/projects/html5/canvas/
Simulation
* http://codepen.io/suffick/pen/KrAwx
====== Web GL ======
* a Japanese ref site: http://wgld.org/
====== Javascript for Web ======
===== Style related operation =====
* toggle class with jquery: http://www.w3schools.com/jquery/html_toggleclass.asp
* toggle class without jquery:
* http://codepen.io/qualitydixon/pen/GoeOOP
*
function toggleColor() {
var myButtonClasses = document.getElementById("btn1").classList;
if (myButtonClasses.contains("blue")) {
myButtonClasses.remove("blue");
} else {
myButtonClasses.add("blue");
}
if (myButtonClasses.contains("red")) {
myButtonClasses.remove("red");
} else {
myButtonClasses.add("red");
}
}
===== html select dropdown and remove focus =====
* problem: when select dropdown, the select focus still stuck on the dropdown list, (when you press arrow key)
* solution: to remove focus after choose, add onchange event and remove its focus
const choice_input = document.querySelector(".my_choice")
choice_input.onchange = function(event){
choice_input.blur() // remove focus from this input
}
// also if you have onload function, you can add this to onload to reset last choice when refresh browser
const tmp_choice_input= document.querySelector(".my_choice")
tmp_choice_input.selectedIndex = "0";