Please enable JavaScript.
Coggle requires JavaScript to display documents.
Thing must know - Coggle Diagram
Thing must know
Flexbox
order
change display order
align-self
justify-content
space -between
front item and end item did not have space between border boundary
space-evenly
front item and end item have space between border boundary
space-around
include the item size to control space
align-items
flex-start
flex-end
center
display : flex
change div item from vertical to horizontal
flex-grow
control object/s size
create table
normally work with media query
responsive layout
media
flex-basic
Flexbox, however, is one-dimensional. It handles either a column or a row. A flexbox container expands its items to fill the available free space or it shrinks to prevent overflow. :explode:
A Flexbox layout is calculated after its content is loaded. It's content-based.
CSS Grid
vh (view height)
grid-template-rows : auto 1fr auto
pancake stack layout :<3:
fr
display : grid
grid-template-columns : repeat(12,1fr)
item
grid-column-end
which column stop (not include)
grid-column-start
which column start (1 as base)
grid-column : 2 / span4
start from 2 take 4 column
Simple 12 Columns Grid Layout :<3:
column-gap : 12px
create a gap on each column
gap : 24px
grid-row : 2/4
specify which positioning rom and column take
Grid is perfect for the two-dimensional layout of items on a web page or app, as it can manage both columns and rows at the same time :tada:
CSS Grid, however, requires you to define your layout first. It's container-based.
grid-template-areas
grid-area
easy to repositioning the item
very good on responsive
good to create a floor plan :red_flag:
HTML
Hypertext Markup Language
source
All HTML Tags List
HTML Tags
HTML Element :pen:
<p>This is a paragraph</p>
an HTML element is the collection of start tag, its attributes, an end tag and everything in between
Elements can be placed in two distinct groups: block level and inline level elements. :!:
block-level elements
<div>, <p>, <h1> through <h6>, <form>, <ol>, <ul>, <li>, and so on
always starts on a new line and takes up the full width available
inline-level elements
<img>, <a>, <span>, <strong>, <b>, <em>, <i>, <code>, <input>, <button>, etc.
does not starts on a new line and it only takes up as much width as necessary
Empty Element :pen:
also called self-closing or void elements
<p>This paragraph contains <br> a line break.</p>
<img src="images/sky.jpg" alt="Cloudy Sky">
<input type="text" name="username">
Notes :<3:
HTML tags should be nested in correct order. They must be closed in the inverse order of how they are defined, that means the last tag opened must be closed first.
An HTML comment begins with <!--, and ends with -->
Case Insensitivity in HTML Tags and Attributes
Both single and double quotes can be used to quote attribute values. However, double quotes are most common. In situations where the attribute value itself contains double quotes it is necessary to wrap the value in single quotes, e.g., value='John "Williams" Jr.'
Nesting HTML Elements :pen:
Most HTML elements can contain any number of further elements (except empty elements), which are, in turn, made up of tags, attributes, and content or other elements.
<p>Here is some <b>bold</b> text.</p>
<p>Here is some <em>emphasized</em> text.</p>
<p>Here is some <mark>highlighted</mark> text.</p>
Attributes
contain extra information about the element that won't appear in the content
<img src="images/smiley.png" width="30" height="30" alt="Smiley">
<a href="https://www.google.com/" title="Search Engine">Google</a>
<abbr title="Hyper Text Markup Language">HTML</abbr>
<input type="text" value="John Doe">
Attribute values are generally case-insensitive, except certain attribute values, like the id and class attributes. However, World Wide Web Consortium (W3C) recommends lowercase for attributes values in their specification. :!:
APIs
Application Programmable Interface
Access Data
Hide complexity
not need to write your own
Extend Functionality
Smart Hume
Security
allow you to set
asynchronous Function Call
Promise
must wait till completed before run next code
for next step, normally is use on .then() :!:
Async/Await
normally for map each data/object and execute each data promise and return when all completed
1 async function can have multiple await inside
result only return when all await function is competed
FIFO, must complete first await before can run next code
replace .then()
make the code more readable :<3:
Learn Promise, Async/Await with 4 tasks in 20 minutes 2021
Tool
LogRocket
Inspect logs, network data, and DOM state leading up to errors.
Troubleshoot customer issues and fix problems faster.
Deeply understand your users by watching them use your product.
monitoring and tracking client-side CPU usage, memory usage, and more
URL
Tutorial Republic
:unlock:
unsplash.com
The internet’s source of freely-usable images.
blindtextgenerator
Generates and inserts lorem ipsum text
https://fonts.google.com/
https://fonts.google.com/icons
https://loremflickr.com/
https://loremflickr.com/320/240/dog
https://jsonplaceholder.typicode.com/
Free fake API for testing and prototyping.
JSDoc 3
is an API documentation generator for JavaScript, similar to Javadoc or phpDocumentor. You add documentation comments directly to your source code, right alongside the code itself. The JSDoc tool will scan your source code and generate an HTML documentation website for you.
CSS
Notes :red_flag:
Include stylesheet
<head>
<link rel="stylesheet" href="styles.css">
</head>
same class with be overwrite by the last define
include font
https://fonts.google.com/
<style>
import
url('
https://fonts.googleapis.com/css2?family=Raleway:wght@200&display=swap
');
</style>
External stylesheet
Since the CSS code is in a separate document, your HTML files will have a cleaner structure and are smaller in size.
You can use the same .css file for multiple pages.
most common and useful
Your pages may not be rendered correctly until the external CSS is loaded. :explode:
Uploading or linking to multiple CSS files can increase your site’s download time. :explode:
<link rel="stylesheet" href="styles.css">
Internal stylesheet
You can use class and ID selectors in this style sheet.
Adding the code to the HTML document can increase the page’s size and loading time. :explode:
<style>
img { width:50%}
</style>
Working with system that blocks external stylesheet
Inline style (Avoid using)
You can easily and quickly insert CSS rules to an HTML page. That’s why this method is useful for testing or previewing the changes, and performing quick-fixes to your website.
You don’t need to create and upload a separate document as in the external style.
Adding CSS rules to every HTML element is time-consuming and makes your HTML structure messy. :explode:
Styling multiple elements can affect your page’s size and download time. :explode:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
difficult to read and understand :explode:
box model
It is all about boxes, every element is a box
1 Padding : Space outside content
2 Border : line outside padding
3 Marging : space outside border
Web APIs
sample
Screen Capture API
Barcode Detection API
Geolocation API
Geolocation API
DOM
Console
console.time();
for (i = 0; i < 100000; i++) {
// some code
}
console.timeEnd();
console.clear();
console.log("Hello world!");
console.group();
console.log("Hello again, this time inside a group!");
console.trace()
The console.trace() method displays a trace that show how the code ended up at a certain point.
:<3:
console.log("Hello world!");
console.table()
HTML Drag and Drop API
CSS grid is for layout, Flexbox is for alignment
ES7 React/Redux/GraphQL/React-Native Snippets
:<3: