Stuff I Have Learnt

git help Get help on a command $ git help push git config Configure Git $ git config –global … source <file> Activate Bash changes $ source ~/.bash_profile mkdir -p Make intermediate directories as necessary $ mkdir -p repos/website git status Show the status of the repository $ git status touch <name> Create empty file … Continue reading Learn Enough Git (part 1)

Install a VM on Windows Use VIM: vim starts vim esc :q! return quits vim i insert mode esc escape to normal mode :w returnto write file esc u undo x cut dd cut line p paste line source sourcing user profiles to update terminal /string finds string in file commands to navigate similar to … Continue reading Learn enough Text Editor 1, 2, 3

which locates path of file curl “client URL”, used to access URl, can be used to download files -O -L -C saves output as filename indicated by URL, follow location redirects, continues (resumes) previous file transfer !! repeats last command !e repeats last command that starts with ‘e’, ‘echo “foo”‘ in this example ^R repeats … Continue reading Learn Enough Command Line 3,4

Tab completion: press tab to auto-complete redirect operator > append operator >> ls -rtl list by reversed time of modification (long format) ls -a list all * wildcard (*.txt) mv, cp, and rm move, copy, remove touch create file echo print ^C, ^A, ^E, ^L quit, start-of-line, end-of-line, clear

The final part of Internetting is Hard. Embedding a Web Font Currently, over 90% of browsers support WOFF (the latest is WOFF2) so we can use the web font format typically. You can embed a locally hosted woff font at the start of the CSS stylesheet like so: @font-face { font-family: ‘Roboto’; src: url(‘Roboto-Light-webfont.woff’) format(‘woff’); … Continue reading InternetingIsHard Part 9 – Web Typography

Part 8 of Internetting is Hard, this time regarding HTML forms.   Form There’s the backend, which concerns the code that processes and store the data, but we won’t be going through it today. A form can be created with the <form> element, with action=’url-of-server’. There are two commonly used methods, ‘post’ and ‘get’. You … Continue reading InternetingIsHard Part 8 – HTML Forms

Using Microdata – a HTML specification to nest metadata within existing content. (See Schema documentation.) Microdata gives additional context to the content. For example, tagging ‘Avatar’ with ‘movie’ to refer to the James Cameron movie disambiguates it from other usages.   itemscope itemscope itemtype=”http://schema.org/Movie”&gt; Avatar Director: James Cameron (born August 16, 1954) Science fiction Trailer … Continue reading Schema – Microdata (SEO)

Part 7 of Internetting Is Hard. This time we look at the semantics of HTML, which explores the structure of HTML as interpreted by computers (search engines, screen readers, etc). Outline You can use HTML5 outliner to look at the structure. This determines the parent-child relationship of the headers by the relativity of the number … Continue reading InternetingIsHard Part 7 – Semantic HTML

Part 6 of my posts on internettingishard. Retina display has 2x the ppi of normal screens (iPhone has 3x) Using source set for retina devices <img src=‘illustration-small.png’srcset=‘images/illustration-small.png 1x,images/illustration-big.png 2x’ style=‘max-width: 500px’/> For retina smartphones: <img src=’images/photo-small.jpg’ srcset=’images/photo-big.jpg 2000w, images/photo-small.jpg 1000w’ sizes='(min-width: 960px) 960px, 100vw’/> 5. vw is “viewport width” 6. Chrome caches hi res images … Continue reading InternetingIsHard Part 6 – Responsive Images

Part 5 of what I have learned from internetting is hard.   We can use media queries to differentiate the CSS for responsive design. @media specifies that it’s a media query. only screen “media type” to apply to devices with screens (opposed to printed documents, like when you hit Cmd+P in a browser). min-width and max-width parts are called “media features”, … Continue reading InternetingIsHard Part 5 – Responsive Design – CSS