Merge fd7dfa3743 into 559d03ecf3

add react-native-styling cheat-sheet
2026-01-29 14:48:01 -08:00 · 2024-02-27 17:12:23 +08:00 · 2021-10-18 17:26:43 +03:30
15 changed files with 350 additions and 254 deletions
--- a/README.md
+++ b/README.md
@@ -74,6 +74,7 @@ Feel free to take a look. You might learn new things. They have been designed to
 #### Frameworks

 - [React.js](frontend/react.js)
+- [React-native-styling](frontend/react-native-styling.md)
 - [Vue.js](frontend/vue.js)
 - [Tailwind.css](frontend/tailwind.css)
 - [Ember.js](frontend/ember.js)
--- a/databases/mysql.sh
+++ b/databases/mysql.sh
@@ -16,69 +16,3 @@ GRANT ALL PRIVILEGES ON prospectwith.* TO 'power'@'localhost' WITH GRANT OPTION;
 CREATE USER 'newuser'@'localhost' IDENTIFIED BY 'password'; # Create user

 mysql -u root -pmypassword -e "MY SQL QUERY" &>> query.log & disown # Run SQL query in the background
-
-# *****************************************************************************
-# Database and Table Operations
-# *****************************************************************************
-
-CREATE DATABASE database_name; # Create a new database
-DROP DATABASE database_name; # Delete a database
-CREATE TABLE table_name (column1 datatype, column2 datatype, ...); # Create a new table
-DROP TABLE table_name; # Delete a table
-SHOW TABLES; # Display all tables in the current database
-DESCRIBE table_name; # Show the structure of a table
-
-# *****************************************************************************
-# Data Manipulation
-# *****************************************************************************
-
-INSERT INTO table_name (column1, column2, ...) VALUES (value1, value2, ...); # Insert data into a table
-UPDATE table_name SET column1 = value1, column2 = value2, ... WHERE condition; # Update existing data in a table
-DELETE FROM table_name WHERE condition; # Delete data from a table
-SELECT column1, column2, ... FROM table_name WHERE condition; # Select data from a table
-
-# *****************************************************************************
-# Backup and Restore
-# *****************************************************************************
-
-mysqldump -u username -p database_name table1 table2 > file.sql # Backup specific tables
-mysql -u username -p database_name < file.sql # Restore specific tables
-
-# *****************************************************************************
-# User Management and Security
-# *****************************************************************************
-
-REVOKE privilege_type ON database_name.table_name FROM 'username'@'hostname'; # Revoke privileges from a user
-DROP USER 'username'@'hostname'; # Delete a user
-ALTER USER 'username'@'hostname' IDENTIFIED BY 'newpassword'; # Reset a user's password
-
-# *****************************************************************************
-# Performance and Maintenance
-# *****************************************************************************
-
-OPTIMIZE TABLE table_name; # Optimize a table
-ANALYZE TABLE table_name; # Analyze a table for key distribution and storage optimization
-CHECK TABLE table_name; # Check a table for errors
-REPAIR TABLE table_name; # Repair a corrupted table
-
-# *****************************************************************************
-# Advanced Queries
-# *****************************************************************************
-
-SELECT ... FROM table1 JOIN table2 ON table1.column = table2.column; # Perform a join operation between two tables
-SELECT ... FROM (SELECT ... FROM table_name) AS subquery; # Use a subquery within another query
-SELECT column, COUNT(*) FROM table_name GROUP BY column; # Group results and use aggregate functions
-
-# *****************************************************************************
-# System Information
-# *****************************************************************************
-
-SELECT VERSION(); # Show the current version of MySQL
-SELECT User, Host FROM mysql.user; # List all current MySQL users
-
-# *****************************************************************************
-# Miscellaneous
-# *****************************************************************************
-
-SET GLOBAL general_log = 'ON'; # Enable query logging
-SHOW FULL PROCESSLIST; # Show the last queries executed in MySQL
--- a/frontend/react-native-styling.md
+++ b/frontend/react-native-styling.md
@@ -0,0 +1,224 @@
+# React Native Styling Cheat Sheet
+
+Most of the React Native styling material in one page. Imported from the [official docs](http://facebook.github.io/react-native/docs/getting-started.html).
+
+![YAP](https://media.giphy.com/media/B5a9bkLouElOM/giphy.gif)
+
+## Contents
+
+### General
+- [Flexbox](#flexbox)
+- [ShadowPropTypesIOS](#shadow-prop-types-ios)
+- [Transforms](#transforms)
+
+### Components
+- [Image](#image)
+- [ScrollView](#scrollview)
+- [Text](#text)
+- [TextInput](#textinput)
+- [View](#view)
+
+## Flexbox
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| alignContent | [oneOf](#oneof) `flex-start`, `flex-end`, `center`, `stretch`, `space-between`, `space-around` | | `alignContent` controls how rows align in the cross direction, overriding the `alignContent` of the parent. See https://developer.mozilla.org/en-US/docs/Web/CSS/align-content for more details. |
+| alignItems | [oneOf](#oneof) `flex-start`, `flex-end`, `center`, `stretch`, `baseline` | stretch | `alignItems` aligns children in the cross direction. For example, if children are flowing vertically, `alignItems` controls how they align horizontally. It works like `align-items` in CSS, except the default value is `stretch` instead of `flex-start`. See https://css-tricks.com/almanac/properties/a/align-items/ for more detail. |
+| alignSelf | [oneOf](#oneof) `auto`, `flex-start`, `flex-end`, `center`, `stretch`, `baseline` | auto | controls how a child aligns in the cross direction, overriding the `alignItems` of the parent. It works like `align-self` in CSS. See https://css-tricks.com/almanac/properties/a/align-self/ for more detail. |
+| aspectRatio | [number](#number) | | `aspectRatio` controls the size of the undefined dimension of a node. `aspectRatio` is a non-standard property only available in React Native and not CSS. On a node with a set `width`/`height` `aspectRatio` controls the size of the unset dimension. On a node with a set `flexBasis` `aspectRatio` controls the size of the node in the cross axis if unset. On a node with a `measure` function `aspectRatio` works as though the `measure` function measures the `flexBasis`. On a node with `flexGrow`/`flexShrink` `aspectRatio` controls the size of the node in the cross axis if unset. `aspectRatio` takes min/max dimensions into account. |
+| borderBottomWidth | [number](#number) | 0 | `borderBottomWidth` works like `border-bottom-width` in CSS. See http://www.w3schools.com/cssref/pr_border-bottom_width.asp for more details. |
+| borderLeftWidth | [number](#number) | 0 | `borderLeftWidth` works like `border-left-width` in CSS. See http://www.w3schools.com/cssref/pr_border-bottom_width.asp for more details. |
+| borderRightWidth | [number](#number) | 0 | `borderRightWidth` works like `border-right-width` in CSS. See http://www.w3schools.com/cssref/pr_border-right_width.asp for more details. |
+| borderTopWidth | [number](#number) | 0 | `borderTopWidth` works like `border-top-width` in CSS. See http://www.w3schools.com/cssref/pr_border-top_width.asp for more details. |
+| borderEndWidth | [number](#number) | 0 | When direction is ltr, `borderEndWidth` is equivalent to `borderRightWidth`. When direction is rtl, `borderEndWidth` is equivalent to `borderLeftWidth`. |
+| borderStartWidth | [number](#number) | 0 | When direction is ltr, `borderStartWidth` is equivalent to `borderLeftWidth`. When direction is rtl, `borderStartWidth` is equivalent to `borderRightWidth`. |
+| borderWidth | [number](#number) | 0 | `borderWidth` works like `border-width` in CSS. See http://www.w3schools.com/cssref/pr_border-width.asp for more details. |
+| bottom | [number](#number) | auto* | `bottom` is the number of logical pixels to offset the bottom edge of this component. It works similarly to `bottom` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. See https://developer.mozilla.org/en-US/docs/Web/CSS/bottom for more details of how `bottom` affects layout. |
+| direction | [oneOf](#oneof) `inherit`, `ltr`, `rtl` | `inherit` | `direction` specifies the directional flow of the user interface. The default is `inherit`, except for root node which will have value based on the current locale. See https://facebook.github.io/yoga/docs/rtl/ for more details. |
+| display | [oneOf](#oneof) `none`, `flex` | `flex` | `display` sets the display type of this component. It works similarly to `display` in CSS, but only support 'flex' and 'none'. |
+| end | [number](#number) | auto* | When the direction is `ltr`, `end` is equivalent to `right`. When the direction is `rtl`, `end` is equivalent to `left`. This style takes precedence over the `left` and `right` styles. |
+| start | [number](#number) | auto* | When the direction is `ltr`, `start` is equivalent to `left`. When the direction is `rtl`, `start` is equivalent to `right`. This style takes precedence over the `left`, `right`, and `end` styles. |
+| flex | [number](#number) | 0 | In React Native `flex` does not work the same way that it does in CSS. `flex` is a number rather than a string, and it works according to the `css-layout` library at https://github.com/facebook/css-layout . When `flex` is a positive number, it makes the component flexible and it will be sized proportional to its flex value. So a component with `flex` set to 2 will take twice the space as a component with `flex` set to 1. When `flex` is 0, the component is sized according to `width` and `height` and it is inflexible. When `flex` is -1, the component is normally sized according `width` and `height`. However, if there's not enough space, the component will shrink to its `minWidth` and `minHeight`. `flexGrow`, `flexShrink` and `flexBasis` work the same as in CSS. |
+| flexDirection | [oneOf](#oneof) `row`, `row-reverse`, `column`, `column-reverse` | column | `flexDirection` controls which directions children of a container go. `row` goes left to right, `column` goes top to bottom, and you may be able to guess what the other two do. It works like `flex-direction` in CSS, except the default is `column`. See https://css-tricks.com/almanac/properties/f/flex-direction/ for more detail. |
+| flexBasis | [number](#number) | 0 | |
+| flexGrow | [number](#number) | 0 | |
+| flexShrink | [number](#number) | 0 | |
+| flexWrap | [oneOf](#oneof) `wrap`, `nowrap` | nowrap | `flexWrap` controls whether children can wrap around after they hit the end of a flex container. It works like `flex-wrap` in CSS. See https://css-tricks.com/almanac/properties/f/flex-wrap/ for more detail. |
+| height | [number](#number) | auto* | `height` sets the height of this component. It works similarly to `height` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. See http://www.w3schools.com/cssref/pr_dim_width.asp for more details. |
+| justifyContent | [oneOf](#oneof) `flex-start`, `flex-end`, `center`, `space-between`, `space-around` | flex-start | `justifyContent` aligns children in the main direction. For example, if children are flowing vertically, `justifyContent` controls how they align vertically. It works like `justify-content` in CSS. See https://css-tricks.com/almanac/properties/j/justify-content/ for more detail. |
+| left | [number](#number) | auto* | `left` is the number of logical pixels to offset the left edge of this component. It works similarly to `left` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. See https://developer.mozilla.org/en-US/docs/Web/CSS/left for more details of how `left` affects layout. |
+| margin | [number](#number) | 0 | Setting `margin` has the same effect as setting each of `marginTop`, `marginLeft`, `marginBottom`, and `marginRight`. |
+| marginBottom | [number](#number) | 0 | `marginBottom` works like `margin-bottom` in CSS. See http://www.w3schools.com/cssref/pr_margin-bottom.asp for more details. |
+| marginHorizontal | [number](#number) | 0 | Setting `marginHorizontal` has the same effect as setting both `marginLeft` and `marginRight`. |
+| marginLeft | [number](#number) | 0 | `marginLeft` works like `margin-left` in CSS. See http://www.w3schools.com/cssref/pr_margin-left.asp for more details. |
+| marginRight | [number](#number) | 0 | `marginRight` works like `margin-right` in CSS. See http://www.w3schools.com/cssref/pr_margin-right.asp for more details. |
+| marginTop | [number](#number) | 0 | `marginTop` works like `margin-top` in CSS. See http://www.w3schools.com/cssref/pr_margin-top.asp for more details. |
+| marginVertical | [number](#number) | 0 | Setting `marginVertical` has the same effect as setting both `marginTop` and `marginBottom`. |
+| marginEnd | [number](#number) | 0 | When direction is `ltr`, `marginEnd` is equivalent to `marginRight`. When direction is `rtl`, `marginEnd` is equivalent to `marginLeft`.|
+| marginStart | [number](#number) | 0 | When direction is `ltr`, `marginStart` is equivalent to `marginLeft`. When direction is `rtl`, `marginStart` is equivalent to `marginRight`. |
+| maxHeight | [number](#number) | auto* | `maxHeight` is the maximum height for this component, in logical pixels. It works similarly to `max-height` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. See http://www.w3schools.com/cssref/pr_dim_max-height.asp for more details. |
+| maxWidth | [number](#number) | auto* | `maxWidth` is the maximum width for this component, in logical pixels. It works similarly to `max-width` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. See http://www.w3schools.com/cssref/pr_dim_max-width.asp for more details. |
+| minHeight | [number](#number) | auto* | `minHeight` is the minimum height for this component, in logical pixels. It works similarly to `min-height` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. See http://www.w3schools.com/cssref/pr_dim_min-height.asp for more details. |
+| minWidth | [number](#number) | auto* | `minWidth` is the minimum width for this component, in logical pixels. It works similarly to `min-width` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. See http://www.w3schools.com/cssref/pr_dim_min-width.asp for more details. |
+| padding | [number](#number), [string](#string) | 0 | `padding` works like `padding` in CSS. It's like setting each of `paddingTop`, `paddingBottom`, `paddingLeft`, and `paddingRight` to the same thing. See http://www.w3schools.com/css/css_padding.asp for more details. |
+| paddingBottom | [number](#number), [string](#string) | 0 | `paddingBottom` works like `padding-bottom` in CSS. See http://www.w3schools.com/cssref/pr_padding-bottom.asp for more details. |
+| paddingHorizontal | [number](#number), [string](#string) | 0 | Setting `paddingHorizontal` is like setting both of `paddingLeft` and `paddingRight`. |
+| paddingLeft | [number](#number), [string](#string) | 0 | `paddingLeft` works like `padding-left` in CSS. See http://www.w3schools.com/cssref/pr_padding-left.asp for more details. |
+| paddingRight | [number](#number), [string](#string) | 0 | `paddingRight` works like `padding-right` in CSS. See http://www.w3schools.com/cssref/pr_padding-right.asp for more details. |
+| paddingTop | [number](#number), [string](#string) | 0 | `paddingTop` works like `padding-top` in CSS. See http://www.w3schools.com/cssref/pr_padding-top.asp for more details. |
+| paddingVertical | [number](#number), [string](#string) | 0 | Setting `paddingVertical` is like setting both of `paddingTop` and `paddingBottom`. |
+| paddingEnd | [number](#number), [string](#string) | 0 | When direction is `ltr`, `paddingEnd` is equivalent to `paddingRight`. When direction is `rtl`, `paddingEnd` is equivalent to `paddingLeft`. |
+| paddingStart | [number](#number), [string](#string) | 0 | When direction is `ltr`, `paddingStart` is equivalent to `paddingLeft`. When direction is `rtl`, `paddingStart` is equivalent to `paddingRight`. |
+| position | [oneOf](#oneof) `absolute`, `relative` | relative | `position` in React Native is similar to regular CSS, but everything is set to `relative` by default, so `absolute` positioning is always just relative to the parent. If you want to position a child using specific numbers of logical pixels relative to its parent, set the child to have `absolute` position. If you want to position a child relative to something that is not its parent, just don't use styles for that. Use the component tree. See https://github.com/facebook/css-layout for more details on how `position` differs between React Native and CSS. |
+| right | [number](#number) | auto* | `right` is the number of logical pixels to offset the right edge of this component. It works similarly to `right` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. See https://developer.mozilla.org/en-US/docs/Web/CSS/right for more details of how `right` affects layout. |
+| top | [number](#number) | auto* | `top` is the number of logical pixels to offset the top edge of this component. It works similarly to `top` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. See https://developer.mozilla.org/en-US/docs/Web/CSS/top for more details of how `top` affects layout. |
+| width | [number](#number) | auto* | `width` sets the width of this component. It works similarly to `width` in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. See http://www.w3schools.com/cssref/pr_dim_width.asp for more details. |
+| zIndex | [number](#number) | auto* | `zIndex` controls which components display on top of others. Normally, you don't use `zIndex`. Components render according to their order in the document tree, so later components draw over earlier ones. `zIndex` may be useful if you have animations or custom modal interfaces where you don't want this behavior. It works like the CSS `z-index` property - components with a larger `zIndex` will render on top. Think of the z-direction like it's pointing from the phone into your eyeball. See https://developer.mozilla.org/en-US/docs/Web/CSS/z-index for more detail. |
+
+* properties with default value `auto` marked with asterisk are do not actually have `auto` as their default value, they just behave like if they would in *css* if they had `auto` as their value. `auto` is not valid value for those properties in react-native
+
+## Shadow Prop Types IOS
+| Name | Type | Description |
+| ---- | ---- | ----------- |
+| shadowColor | `customColorPropType` | Sets the drop shadow color |
+| shadowOffset | `customReactPropTypes.shape( {width: ReactPropTypes.number, height: ReactPropTypes.number} )` | Sets the drop shadow offset |
+| shadowOpacity | [number](#number) | Sets the drop shadow opacity (multiplied by the color's alpha component) |
+| shadowRadius | [number](#number) | Sets the drop shadow blur radius |
+
+## Transforms
+| Name | Type |
+| ---- | ---- |
+| decomposedMatrix | `customDecomposedMatrixPropType` |
+| transform | `customReactPropTypes.arrayOf( ReactPropTypes.oneOfType([ ReactPropTypes.shape({perspective: ReactPropTypes.number}), ReactPropTypes.shape({rotate: ReactPropTypes.string}), ReactPropTypes.shape({rotateX: ReactPropTypes.string}), ReactPropTypes.shape({rotateY: ReactPropTypes.string}), ReactPropTypes.shape({rotateZ: ReactPropTypes.string}), ReactPropTypes.shape({scale: ReactPropTypes.number}), ReactPropTypes.shape({scaleX: ReactPropTypes.number}), ReactPropTypes.shape({scaleY: ReactPropTypes.number}), ReactPropTypes.shape({translateX: ReactPropTypes.number}), ReactPropTypes.shape({translateY: ReactPropTypes.number}), ReactPropTypes.shape({skewX: ReactPropTypes.string}), ReactPropTypes.shape({skewY: ReactPropTypes.string}) ]) )` |
+| transformMatrix | `customTransformMatrixPropType` |
+
+## Image
+| Name | Type | Platforms | Description |
+| ---- | ---- | --------- | ----------- |
+| ...[Flexbox](#flexbox) |
+| ...[ShadowPropTypesIOS](#shadow-prop-types-ios) |
+| ...[Transforms](#transforms) |
+| backfaceVisibility | [oneOf](#oneof) `visible`, `hidden` | | |
+| backgroundColor | `ColorPropType` | | |
+| borderBottomLeftRadius | [number](#number) | | |
+| borderBottomRightRadius | [number](#typee-number) | | |
+| borderColor | `ColorPropType` | | |
+| borderRadius | [number](#number) | | |
+| borderTopLeftRadius | [number](#number) | | |
+| borderTopRightRadius | [number](#number) | | |
+| borderWidth | [number](#number) | | |
+| opacity | [number](#number) | | |
+| overflow | [oneOf](#oneof) `visible`, `hidden` | | |
+| resizeMode | [oneOf](#oneof) `cover`, `contain`, `stretch`, `repeat`, `center` | | Determines how to resize the image when the frame doesn't match the raw image dimensions. Visit the [official docs](https://facebook.github.io/react-native/docs/image.html#resizemode) for a guide on each |
+| tintColor | `ColorPropType` | | Changes the color of all the non-transparent pixels to the tintColor. |
+| overlayColor | [string](#string) | android | When the image has rounded corners, specifying an overlayColor will cause the remaining space in the corners to be filled with a solid color. This is useful in cases which are not supported by the Android implementation of rounded corners: - Certain resize modes, such as 'contain' - Animated GIFs A typical way to use this prop is with images displayed on a solid background and setting the `overlayColor` to the same color as the background. For details of how this works under the hood, see http://frescolib.org/docs/rounded-corners-and-circles.html |
+
+## ScrollView
+| Name | Type | Platforms | Description |
+| ---- | ---- | --------- | ----------- |
+| ...[Flexbox](#flexbox) |
+| ...[ShadowPropTypesIOS](#shadow-prop-types-ios) |
+| ...[Transforms](#transforms) |
+| backfaceVisibility | [oneOf](#oneof) `visible`, `hidden` | | |
+| backgroundColor | `ColorPropType` | | |
+| borderBottomColor | `ColorPropType` | | |
+| borderBottomLeftRadius | [number](#number) | | |
+| borderBottomRightRadius | [number](#number) | | |
+| borderBottomWidth | [number](#number) | | |
+| borderColor | `ColorPropType` | | |
+| borderLeftColor | `ColorPropType` | | |
+| borderLeftWidth | [number](#number) | | |
+| borderRadius | [number](#number) | | |
+| borderRightColor | `ColorPropType` | | |
+| borderRightWidth | [number](#number) | | |
+| borderStyle | [oneOf](#oneof) `solid`, `dotted`, `dashed` | | |
+| borderTopColor | `ColorPropType` | | |
+| borderTopLeftRadius | [number](#number) | | |
+| borderTopRightRadius | [number](#number) | | |
+| borderTopWidth | [number](#number) | | |
+| borderWidth | [number](#number) | | |
+| opacity | [number](#number) | | |
+| overflow | [oneOf](#oneof) `visible`, `hidden` | | |
+| elevation | [number](#number) | android | (Android-only) Sets the elevation of a view, using Android's underlying [elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation). This adds a drop shadow to the item and affects z-order for overlapping views. Only supported on Android 5.0+, has no effect on earlier versions. |
+
+## Text
+| Name | Type | Platforms | Description |
+| ---- | ---- | --------- | ----------- |
+| ...[View](#view) |
+| color | `ColorPropType` | | |
+| fontFamily | [string](#string) | | |
+| fontSize | [number](#number) | | |
+| fontStyle | [oneOf](#oneof) `normal`, `italic` | | |
+| fontVariant | [arrayOf](#arrayof)([oneOf](#oneof)`small-caps`, `oldstyle-nums`, `lining-nums`, `tabular-nums`, `proportional-nums`) | ios | |
+| textTransform | [oneOf](#oneof) `none`, `uppercase`, `lowercase`, `capitalize` | | |
+| fontWeight | [oneOf](#oneof) `normal`, `bold`, `"100"`, `"200"`, `"300"`, `"400"`, `"500"`, `"600"`, `"700"`, `"800"`, `"900"` | | Specifies font weight. The values 'normal' and 'bold' are supported for most fonts. Not all fonts have a variant for each of the numeric values, in that case the closest one is chosen. |
+| includeFontPadding | [bool](#bool) | android | Set to false to remove extra font padding intended to make space for certain ascenders / descenders. With some fonts, this padding can make text look slightly misaligned when centered vertically. For best results also set `textAlignVertical` to center. Default is true.|
+| lineHeight | [number](#number) | | |
+| textAlign | [oneOf](#oneof) `auto`, `left`, `right`, `center`, `justify` | | Specifies text alignment. The value 'justify' is only supported on iOS and fallbacks to `left` on Android. |
+| textDecorationLine | [oneOf](#oneof) `none`, `underline`, `line-through` | | |
+| textShadowColor | `ColorPropType` | | |
+| textShadowOffset | `ReactPropTypes.shape( {width: ReactPropTypes.number, height: ReactPropTypes.number} )` | | |
+| textShadowRadius | [number](#number) | | |
+| textAlignVertical | [oneOf](#oneof) `auto`, `top`, `bottom`, `center` | android | |
+| letterSpacing | [number](#number) | ios | |
+| textDecorationColor | `ColorPropType` | ios | |
+| textDecorationStyle | [oneOf](#oneof) `solid`, `double`, `dotted`, `dashed` | ios | |
+| writingDirection | [oneOf](#oneof) `auto`, `ltr`, `rtl` | ios | |
+
+## TextInput
+| Name | Type | Platforms | Description |
+| ---- | ---- | --------- | ----------- |
+| autoFocus | [bool](#bool) | | If true, focuses the input on componentDidMount. The default value is false. |
+| keyboardType | [oneOf](#oneof) `default`, `email-address`, `numeric`, `phone-pad`, // iOS-only `ascii-capable`, `numbers-and-punctuation`, `url`, `number-pad`, `name-phone-pad`, `decimal-pad`, `twitter`, `web-search` | | Determines which keyboard to open |
+| maxLength | [number](#number) | | Limits the maximum number of characters that can be entered |
+| onChangeText | callback func | | Callback that is called when the text input's text changes. Changed text is passed as an argument to the callback handler. |
+
+## View
+| Name | Type | Platforms | Description |
+| ---- | ---- | --------- | ----------- |
+| ...[Flexbox](#flexbox) |
+| ...[ShadowPropTypesIOS](#shadow-prop-types-ios) |
+| ...[Transforms](#transforms) |
+| backfaceVisibility | [oneOf](#oneof) `visible`, `hidden` | | |
+| backgroundColor | `ColorPropType` | | |
+| borderBottomColor | `ColorPropType` | | |
+| borderBottomEndRadius | [number](#number) | | |
+| borderBottomStartRadius | [number](#number) | | |
+| borderBottomLeftRadius | [number](#number) | | |
+| borderBottomRightRadius | [number](#number) | | |
+| borderBottomWidth | [number](#number) | | |
+| borderColor | `ColorPropType` | | |
+| borderEndColor | `ColorPropType` | | |
+| borderStartColor | `ColorPropType` | | |
+| borderLeftColor | `ColorPropType` | | |
+| borderLeftWidth | [number](#number) | | |
+| borderRadius | [number](#number) | | |
+| borderRightColor | `ColorPropType` | | |
+| borderRightWidth | [number](#number) | | |
+| borderStyle | [oneOf](#oneof) `solid`, `dotted`, `dashed` | | |
+| borderTopColor | `ColorPropType` | | |
+| borderTopEndRadius | [number](#number) | | |
+| borderTopStartRadius | [number](#number) | | |
+| borderTopLeftRadius | [number](#number) | | |
+| borderTopRightRadius | [number](#number) | | |
+| borderTopWidth | [number](#number) | | |
+| borderWidth | [number](#number) | | |
+| opacity | [number](#number) | | |
+| overflow | [oneOf](#oneof) `visible`, `hidden` | | |
+| elevation | [number](#number) | android | (Android-only) Sets the elevation of a view, using Android's underlying [elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation). This adds a drop shadow to the item and affects z-order for overlapping views. Only supported on Android 5.0+, has no effect on earlier versions. |
+
+## Appendix
+### Types
+#### [number](#number)
+ReactPropTypes.number
+
+#### [string](#string)
+ReactPropTypes.string
+
+#### [bool](#bool)
+ReactPropTypes.bool
+
+#### [oneOf](#oneof)
+ReactPropTypes.oneOf([values])
+
+#### [arrayOf](#arrayof)
+ReactPropTypes.arrayOf(value)
--- a/languages/C#.txt
+++ b/languages/C#.txt
@@ -3,7 +3,7 @@ CHEATSHEET C#
 1. Data Types

    Primitive   Size            Example
-
+    
    String      2 bytes/char    s = "reference";
    bool                        b = true;
    char        2 bytes         ch = 'a';
@@ -16,20 +16,20 @@ CHEATSHEET C#
    decimal     16 bytes        val = 70.0M;

 2. Arrays
-
+    
    2.1 Declaration

    //Initiliazed using a list defined with curly braces
    int[] nameArray = {100, 101, 102};
-
+    
    //Define an empty array
    int[] nameArray = new int[3]; // 3 rows and 2 columns
-
+    
    //To access a specific item in the array
    int[] nameArray = new int[10];
    int firstNumber = nameArray[0];
    nameArray[1] = 20;
-
+    
    //Multidimensional arrays
    int [,] matrix = new int [2,2]
    matrix[0,0] = 1;
@@ -40,26 +40,26 @@ CHEATSHEET C#
    int[,] predefinedMatrix = new int[2,2] { { 1, 2 }, { 3, 4 } };

    2.2 Array Operations
-
+    
    //Sort ascending
    Array.Sort(nameArray);
-
+    
    //Sort begins at element 6 and sorts 20 elements
    Array.Sort(nameArray,6,20);
-
+    
    //Use 1 array as a key & sort 2 arrays
    string[] values = {"Juan", "Victor", "Elena"};
    string[] keys = {"Jimenez", "Martin", "Ortiz"};
    Array.Sort(keys, values);
-
+    
    //Clear elements in array (array, first element, # elements)
    Array.Clear(nameArray, 0, nameArray.Length);
-
+    
    //Copy elements from one array to another
    Array.Copy(scr, target, numOfElements);

 3. String Operations
-
+    
    //To concatenate between strings, use the plus operator:
    string firstName = "Erin";
    string lastName = "Roger";
@@ -68,27 +68,27 @@ CHEATSHEET C#
    //To add one string to another, use the += operator:
    string secondLastName = "Green";
    string fullName += secondLastName;
-
+    
    //ToString function
    //It converts an object to its string representation so that it is suitable for display
    Object.ToString();
-
+    
    //String formatting
    //Each additional argument to the function can be referred to in the string using the brackets operator with the index number.
    String.Format(String format, Object arg0);
-     format - A composite format string that includes one or more format items
+     format - A composite format string that includes one or more format items 
     arg0 - The first or only object to format

    //Substring
    //Returns a part of the string, beginning from the index specified as the argument. Substring also accepts a maximum length for the substring
    String.Substring(beginAt);
    String.Substring(beginAt, maximum);
-
+    
    //Replace
    string newStr = oldStr.Replace("old","new");

    //IndexOf
-    //Finds the first occurrence of a string in a larger string
+    //Finds the first ocurrence of a string in a larger string
    //Returns -1 if the string is not found
    String.IndexOf(val, start, num)
    val - string to search for
@@ -102,7 +102,7 @@ CHEATSHEET C#
    String.Split(Char[]);

    //ToCharArray
-    //Places selected characters in a string in a char array
+    //Places selected characteres in a string in a char array
    String str = "AaBbCcDd";
    //create array of 8 vowels
    var chars = str.ToCharArray();
@@ -132,11 +132,11 @@ CHEATSHEET C#
    DateTime nextYear = DateTime.AddYears(1);

 6. TimeSpan
-
+    
    6.1 TimeSpan Constructor
-
-    TimeSpan(hour, minute, sec)
-
+        
+    TimpeSpan(hour, minute, sec)
+    
    TimeSpan timeS = new TimeSpan(10, 14, 50);
    TimeSpan timeS_Hours = TimeSpan.FromDays(3640);

@@ -144,8 +144,8 @@ CHEATSHEET C#

    Format item syntax: {index[,alignment][:format string]}
    index - Specifies element in list of values to which format is applied
-    alignment - Indicates minimum width (in characters) to display value
-    format string - Contains the code which specifies the format of the displayed value
+    aligment - Indicates minimun width (in characters) to display value
+    format string - Contains the code which specififes the format of the displayed value

    7.1 Numeric

@@ -168,7 +168,7 @@ CHEATSHEET C#
    csc -define:DEBUG -optimize -out:File2.exe *.cs -> Compiles all the C# files in the current directory with optimizations enabled and defines the DEBUG symbol. The output is File2.exe
    csc -target:library -out:File2.dll -warn:0 -nologo -debug *.cs -> Compiles all the C# files in the current directory producing a debug version of File2.dll. No logo and no warnings are displayed
    csc -target:library -out:Something.xyz *.cs -> Compiles all the C# files in the current directory to Something.xyz (a DLL)
-
+    
    8.1 Compiler Options Listed

    Option	                    Purpose
@@ -260,21 +260,21 @@ CHEATSHEET C#
 10. Loop

    10.1 While
-
+    
    while (condition) {body}
-
+    
    10.2 Do while

    do {body} while condition;
-
+    
    10.3 For

    for (initializer; termination condition; iteration;) {
            //statements
    }
-
+    
    10.4 For each
-
+    
    foreach (type identifier in collection)  {
        //statements
    }
@@ -293,7 +293,7 @@ CHEATSHEET C#
    [access modifier] className (parameters) [:initializer]

    initializer -base calls constructor in base class.
-                 this calls constructor within class.
+                 this calls constuctor within class.

    public class nameClass : Initializer {
        public className(dataType param1 , dataType param2, ...) : base(param1, param2)
@@ -313,8 +313,8 @@ CHEATSHEET C#
    abstract – must be implemented by subclass

    Passing parameters:
-        1. By default, parameters are passed by value
-        2. Passing by reference: ref, in and out modifiers
+        1. By default, parametres are passed by value
+        2. Passing by reference: ref, in and out modifers

    To pass a parameter by reference with the intent of changing the value, use the ref, or out keyword. To pass by reference with the intent of avoiding copying but not changing the value, use the in modifier

@@ -331,9 +331,9 @@ CHEATSHEET C#
 12. Struct

    12.1 Defining a structure
-
+    
    [attribute][modifier] struct name [:interfaces] { struct-body }
-
+    
    12.2 Class vs Structure

       -> Classes are reference types and structs are value types
@@ -378,7 +378,7 @@ CHEATSHEET C#
    //To declare an event inside a class, first a delegate type for the event must be declared.

    public delegate string MyDelegate(string str);
-
+    
    //The event itself is declared by using the event keyword

    event MyDelegate MyEvent;
--- a/languages/C.txt
+++ b/languages/C.txt
@@ -31,11 +31,11 @@ Preprocessor directives:

 Create and execute a program

-In Linux systems:
+In Linux systems: 
    1. Open up a terminal
    2. Create the program: nano nameProgram.c
    3. Write the program and save it
-    4. gcc -o nameExecutable nameProgram.c
+    4. gcc -o nameExecutable nameProgram.c 

 32 Reserved words

@@ -106,8 +106,8 @@ Operators

  ( )	  grouping parenthesis, function call
  [ ]	  array indexing, also  [ ][ ]  etc.
-  ->   	selector, structure pointer
-  .	    select structure element
+  ->   	selector, structure pointer  
+  .	    select structure element     
  !	    relational not, complement, ! a  yields true or false
  ~    	bitwise not, ones complement, ~ a
  ++  	increment, pre or post to a variable
@@ -149,11 +149,10 @@ Operators
  ^=   	bitwise exclusive or and store
  |=   	bitwise or and store
  ,    	separator as in   ( y=x,z=++x )
-  ;     statement terminator.


 Operator precedence
-
+                
 More precedence

 LR	( ) [ ] -> . x++ x--
@@ -203,7 +202,7 @@ Function definition

 type function_name(int a, float b, const char * ch,...) { function_body }

-/* only parameters passed by address can are modified*/
+/* only parameters passed by address can are modified*/ 

 /* in the calling function, local copy can be modified*/

--- a/languages/XML.md
+++ b/languages/XML.md
@@ -11,7 +11,7 @@ XML uses a DTD to describe the data.
   So the XML is a **Complement** to HTML.
 * HTML: is used to format and display the same data.

-
+   
 XML does not carry any information about how to be displayed. The same XML data can be used in many different presentation scenarios.
 Because of this, with XML, there is a full separation between data and presentation.

--- a/languages/bash.sh
+++ b/languages/bash.sh
@@ -46,7 +46,7 @@ CTRL+X then (   # start recording a keyboard macro
 CTRL+X then )   # finish recording keyboard macro
 CTRL+X then E   # recall last recorded keyboard macro
 CTRL+X then CTRL+E   # invoke text editor (specified by $EDITOR) on current command line then execute resultes as shell commands
-CTRL+A then D  # logout from screen but don't kill it, if any command exist, it will continue
+CTRL+A then D  # logout from screen but don't kill it, if any command exist, it will continue 

 BACKSPACE  # deletes one character backward
 DELETE     # deletes one character under cursor
@@ -94,7 +94,7 @@ cat <filename>                # displays file raw content (will not be interpret
 cat -n <filename>             # shows number of lines
 nl <file.sh>                  # shows number of lines in file
 cat filename1 > filename2     # Copy filename1 to filename2
-cat filename1 >> filename2    # merge two files texts together
+cat filename1 >> filename2    # merge two files texts together 
 any_command > <filename>      # '>' is used to perform redirections, it will set any_command's stdout to file instead of "real stdout" (generally /dev/stdout)
 more <filename>               # shows the first part of a file (move with space and type q to quit)
 head <filename>               # outputs the first lines of file (default: 10 lines)
@@ -203,14 +203,14 @@ echo $$                      # prints process ID of the current shell
 echo $!                      # prints process ID of the most recently invoked background job
 echo $?                      # displays the exit status of the last command
 read <varname>               # reads a string from the input and assigns it to a variable
-read -p "prompt" <varname>   # same as above but outputs a prompt to ask user for value
+read -p "prompt" <varname>   # same as above but outputs a prompt to ask user for value 
 column -t <filename>         # display info in pretty columns (often used with pipe)
 let <varname> = <equation>   # performs mathematical calculation using operators like +, -, *, /, %
 export VARNAME=value         # defines an environment variable (will be available in subprocesses)
 export -f  <funcname>        # Exports function 'funcname'
 export var1="var1 value"     # Export and assign in the same statement
-export <varname>             # Copy Bash variable
-declare -x <varname>         # Copy Bash variable
+export <varname>             # Copy Bash variable 
+declare -x <varname>         # Copy Bash variable 

 array[0]=valA                # how to define an array
 array[1]=valB
@@ -507,9 +507,9 @@ function returntrap {
 trap returntrap RETURN  # is executed each time a shell function or a script executed with the . or source commands finishes executing

 ##############################################################################
-# COLORS AND BACKGROUNDS
+# COLORS AND BACKGROUNDS 
 ##############################################################################
-# note: \e or \x1B also work instead of \033
+# note: \e or \x1B also work instead of \033 
 # Reset
 Color_Off='\033[0m' # Text Reset

@@ -524,14 +524,14 @@ Cyan='\033[0;36m'   # Cyan
 White='\033[0;97m'  # White

 # Additional colors
-LGrey='\033[0;37m'  # Light Gray
+LGrey='\033[0;37m'  # Ligth Gray
 DGrey='\033[0;90m'  # Dark Gray
-LRed='\033[0;91m'   # Light Red
-LGreen='\033[0;92m' # Light Green
-LYellow='\033[0;93m'# Light Yellow
-LBlue='\033[0;94m'  # Light Blue
+LRed='\033[0;91m'   # Ligth Red
+LGreen='\033[0;92m' # Ligth Green
+LYellow='\033[0;93m'# Ligth Yellow
+LBlue='\033[0;94m'  # Ligth Blue
 LPurple='\033[0;95m'# Light Purple
-LCyan='\033[0;96m'  # Light Cyan
+LCyan='\033[0;96m'  # Ligth Cyan


 # Bold
@@ -566,6 +566,6 @@ On_White='\033[47m' # White

 # Example of usage
 echo -e "${Green}This is GREEN text${Color_Off} and normal text"
-echo -e "${Red}${On_White}This is Red test on White background${Color_Off}"
+echo -e "${Red}${On_White}This is Red test on White background${Color_Off}" 
 # option -e is mandatory, it enable interpretation of backslash escapes
 printf "${Red} This is red \n"
--- a/languages/golang.md
+++ b/languages/golang.md
@@ -397,8 +397,8 @@ d, t := doubleAndTriple(5)
 _, t := doubleAndTriple(3)
 // t = 9

-// Functions can defer commands. Deferred commands are
-// ran in a stack order after the execution and
+// Functions can defer commands. Defered commands are
+// runned in a stack order after the execution and
 // returning of a function
 var aux = 0

@@ -488,7 +488,7 @@ person3.Age // 0

 ## Maps

-Maps are data structures that holds values assigned to a key.
+Maps are data structures that holds values assigneds to a key.

 ```go
 // Declaring a map
@@ -508,7 +508,7 @@ newYork // "EUA"
 // Delete
 delete(cities, "NY")

-// Check if a key is set
+// Check if a key is setted
 value, ok := cities["NY"]
 ok // false
 value // ""
@@ -600,7 +600,7 @@ Go doesn't support `throw`, `try`, `catch` and other common error handling struc
 ```go
 import "errors"

-// Function that contain a logic that can cause a possible exception flow
+// Function that contain a logic that can cause a possible exception flow 
 func firstLetter(text string) (string, error) {
    if len(text) < 1 {
        return nil, errors.New("Parameter text is empty")
@@ -632,7 +632,7 @@ func Sum(x, y int) int {
 }

 // main_test.go
-import (
+import ( 
    "testing"
    "reflect"
 )
@@ -676,7 +676,7 @@ func main() {
    blocking2: 0
    blocking2: 1
    blocking2: 2
-    done
+    done 
 */

 // Go routines are a function (either declared previously or anonymous) called with the keyword go
--- a/languages/java.md
+++ b/languages/java.md
@@ -204,7 +204,7 @@ a \|= b; //a is the variable name; b is the variable name; this expression is an
  }
 ```
 **Example:**
-```java
+```java  
  for (int i = 0; i <= n; i++) {
     System.out.println(i);
  }
@@ -254,10 +254,10 @@ for(dataType item : array) {

 **Example:**
 ```java
-    int i=1;
-    do{
-      System.out.println(i);
-      i++;
+    int i=1;  
+    do{  
+      System.out.println(i);  
+      i++;  
    }while(i<=10);
 ```

@@ -286,7 +286,7 @@ for(dataType item : array) {

 ### ACCESS MODIFIERS

-1. default(No keyword required)
+1. defualt(No keyword required)
 2. private
 3. public
 4. protected
@@ -308,7 +308,7 @@ for(dataType item : array) {
  //Declare a variable, object name
  String s;

-  //Invoke a constructor to create an object
+  //Invoke a contructor to create an object
  s = new String ("Hello World");

  //Invoke an instance method that operates on the object's value
@@ -361,13 +361,13 @@ class MyClass {
        // four methods
        public void setCadence(int newValue) {
            cadence = newValue;
-        }
+        }   
        public void setGear(int newValue) {
            gear = newValue;
-        }
+        }   
        public void applyBrake(int decrement) {
            speed -= decrement;
-        }
+        }  
        public void speedUp(int increment) {
            speed += increment;
        }
@@ -531,13 +531,13 @@ class MyClass extends MySuperClass implements YourInterface {


 ```java
-    interface print{
-        void printPaper();
-    }
-    public class A4 implements print{
+    interface print{  
+        void printPaper();  
+    }  
+    public class A4 implements print{  
        public void printPaper(){
          System.out.println("A4 Page Printed. ");
-        }
+        }  
    }
 ```

--- a/languages/javascript.js
+++ b/languages/javascript.js
@@ -95,9 +95,3 @@ arr.reduce(callback[, initialValue])                 // Apply a function against
 arr.reduceRight(callback[, initialValue])            // Apply a function against an accumulator and each value of the array (from right-to-left) as to reduce it to a single value.
 arr.some(callback[, initialValue])                   // Returns true if at least one element in this array satisfies the provided testing function.
 arr.values()                                         // Returns a new Array Iterator object that contains the values for each index in the array.
-
-// String methods
-String.charAt(index)                                 // Returns the character at the specified index in a string.
-String.indexOf(character)                            // Returns the index of the first occurrence of a specified value in a string.
-String.substring(starting_index, ending_index)       // Returns a new string that is a subset of the original string.
-String.substring(starting_index)                     // Returns a substring from starting index to last index of string.
--- a/languages/php.php
+++ b/languages/php.php
@@ -1,8 +1,8 @@
 <?php

 // Exit the file, string inside get's echo'ed
-die("This file is not meant to be ran. ¯\_(ツ)_/¯");
-exit("This file is not meant to be ran. ¯\_(ツ)_/¯");
+die("This file is not ment to be ran. ¯\_(ツ)_/¯");
+exit("This file is not ment to be ran. ¯\_(ツ)_/¯");

 /**
 * Printing
@@ -17,7 +17,7 @@ var_dump($arr); // Print anything, with type hints for any value and sizes
 $string = 'Awesome cheatsheets';

 str_contains($string, 'cheat'); // Find if the string contains the specified string (PHP >= 8.0)
-str_replace('Awesome', 'Bonjour', $string); // Replace all occurrence
+str_replace('Awesome', 'Bonjour', $string); // Replace all occurence
 strcmp($string, 'Awesome cheatsheets'); // Compare two strings
 strpos($string, 'a', 0); // Get position in the string
 str_split($string, 2); // Split the string
@@ -189,7 +189,7 @@ $argc; // Number of arguments passed into terminal
 $myObject?->getName()?->startWith('A');

 /**
- * Class
+ * Class 
 * http://php.net/manual/en/language.oop5.basic.php
 */
 class NormalClass extends AbstractClassName implements InterfaceName
@@ -200,7 +200,7 @@ class NormalClass extends AbstractClassName implements InterfaceName
    // --> PROPERTY TYPES <--

    /**
-     * Public property, everyone can access this property.
+     * Public property, everyone can access this property. 
     * @var Type
     */
    public $property;
@@ -251,7 +251,7 @@ class NormalClass extends AbstractClassName implements InterfaceName
    protected function protectedFunction(Type $var = null): Type
    {
    }
-
+    
    /**
     * Static function, doesn't need an instance to be executed.
     * @param Type
@@ -541,7 +541,7 @@ u   Pattern is treated as UTF-8
 \w  Any "word" character (a-z 0-9 _)
 \W  Any non "word" character
 \s  Whitespace (space, tab CRLF)
-\S  Any non whitespace character
+\S  Any non whitepsace character
 \d  Digits (0-9)
 \D  Any non digit character
 .   (Period) - Any character except newline
--- a/languages/python.md
+++ b/languages/python.md
@@ -44,7 +44,7 @@
 - As of python3.8 there are 35 keywords

 | Keyword | Description  | Category |
-|---------- | ---------- | --------- |
+|---------- | ---------- | --------- | 
 | True      | Boolean value for not False or 1 | Value Keyword|
 | False     | Boolean Value for not True or 0 | Value Keyword |
 | None      | No Value | Value keyword |
@@ -58,7 +58,7 @@
 | else | this block will be executed if condition is false | conditional |
 | for | used for looping | iteration |
 | while | used for looping | iteration |
-| break | get out of loop | iteration |
+| break | get out of loop | iteration | 
 | continue | skip for specific condition | iteration |
 | def | make user defined function | structure |
 | class | make user defined classes | structure |
@@ -71,8 +71,8 @@
 | import | import libraries/modules/packages | import |
 | from | import specific function/classes from modules/packages | import |
 | try | this block will be tried to get executed | exception handling |
-| except | is any exception/error has occurred it'll be executed | exception handling |
-| finally | It'll be executed no matter exception occurs or not | exception handling |
+| except | is any exception/error has occured it'll be executed | exception handling |
+| finally | It'll be executed no matter exception occurs or not | exception handling | 
 | raise | throws any specific error/exception | exception handling |
 | assert | throws an AssertionError if condition is false | exception handling |
 | async | used to define asynchronous functions/co-routines | asynchronous programming |
@@ -135,7 +135,7 @@
 - Lists are created using square brackets:

 ```python
-thislist = ["apple", "banana", "cherry"]
+thislist = ["apple", "banana", "cherry"] 
 ```

 - List items are ordered, changeable, and allow duplicate values.
@@ -157,14 +157,14 @@ thislist = list(("apple", "banana", "cherry"))  # note the double round-brackets
 - pop() function removes the last value in the given list by default.

  ```python
-  thislist = ["apple", "banana", "cherry"]
-
+  thislist = ["apple", "banana", "cherry"] 
+  
  print(thislist.pop())  # cherry
-  print(thislist.pop(0))  #apple
-
+  print(thislist.pop(0))  #apple 
+  
  ```

-
+  

 ### Tuple

@@ -291,14 +291,14 @@ thisdict = {
    "model": "Mustang",
    "year": 1964
  }
-
+  
  x = car.pop("model")
-
+  
  print(x)# Mustang
  print(car)#{'brand': 'Ford', 'year': 1964}
  ```

-
+  

 ### Conditional branching

@@ -378,5 +378,5 @@ function_name()
 ```

 * We need not to specify the return type of the function.
-* Functions by default return `None`
+* Functions by default return `None` 
 * We can return any datatype.
--- a/tools/docker.sh
+++ b/tools/docker.sh
@@ -2,7 +2,7 @@
 # DOCKER
 ##############################################################################

-docker init                                 # Creates Docker-related starter files 
+
 docker build -t friendlyname .              # Create image using this directory's Dockerfile
 docker run -p 4000:80 friendlyname          # Run "friendlyname" mapping port 4000 to 80
 docker run -d -p 4000:80 friendlyname       # Same thing, but in detached mode
--- a/tools/ubuntu.sh
+++ b/tools/ubuntu.sh
@@ -21,7 +21,6 @@ cat /proc/<process_id>/maps   # Show the current virtual memory usage of a Linux
 ip r # Display ip of the server

 lsof -i :9000 # List process running on port 9000
-kill -9 $(lsof -t -i:PORT) # Kill the process running on whichever port specified

 journalctl -u minio.service -n 100 --no-pager # List last 100 logs for specific service

--- a/tools/vim.txt
+++ b/tools/vim.txt
@@ -1,6 +1,6 @@
 ##############################################################################
 # VIM CHEATSHEET
-# WEBSITE: http://www.vim.org/
+# WEBSITE: http://www.vim.org/  
 # DOCUMENTATION: https://vim.sourceforge.io/docs.php
 ##############################################################################

@@ -20,15 +20,13 @@ e                   jump to end of words (punctuation considered words)
 E                   jump to end of words (no punctuation)
 b                   jump backward by words (punctuation considered words)
 B                   jump backward by words (no punctuation)
-ge                  jump backward to end of a word
-gE                  jump backwards to the end of a word (words can contain punctuation)
+ge                  jump backward to end of words
 0                   (zero) start of line
 ^                   first non-blank character of line
-$                   jump to the end of the line
-g_                  jump to the last non-blank character of the line
-                   move line upwards, on the first non-blank character
-+                   move line downwards, on the first non-blank character
-<enter>             move line downwards, on the first non-blank character
+$                   end of line
+-                   move line upwards, on the first non blank character
+                   move line downwards, on the first non blank character
+<enter>             move line downwards, on the first non blank character
 gg                  go to first line
 G                   go to last line
 ngg                 go to line n
@@ -40,6 +38,10 @@ nG                  go To line n
 }                   move the cursor a paragraph forwards
 ]]                  move the cursor a section forwards or to the next {
 [[                  move the cursor a section backwards or the previous {
+CTRL-f              move the cursor forward by a screen of text
+CTRL-b              move the cursor backward by a screen of text
+CTRL-u              move the cursor up by half a screen
+CTRL-d              move the cursor down by half a screen
 H                   move the cursor to the top of the screen.
 M                   move the cursor to the middle of the screen.
 L                   move the cursor to the bottom of the screen.
@@ -47,16 +49,6 @@ fx                  search line forward for 'x'
 Fx                  search line backward for 'x'
 tx                  search line forward before 'x'
 Tx                  search line backward before 'x'
-CTRL-y              moves screen up one line
-CTRL-e              moves screen down one line
-CTRL-u              moves cursor & screen up ½ page
-CTRL-d              moves cursor & screen down ½ page
-CTRL-b              moves screen up one page, cursor to last line
-CTRL-f              moves screen down one page, cursor to first line
-zz                  shift current line to middle of screen
-z.                  same as zz but also jumps to the first non-black character
-zt                  shift current line to top of screen
-zb                  shift current line to bottom of screen


 ##############################################################################
@@ -68,15 +60,8 @@ zb                  shift current line to bottom of screen
 ma                  make a bookmark named a at the current cursor position
 `a                  go to position of bookmark a
 'a                  go to the line with bookmark a
-`0                  go to the position where Vim was previously exited
-`"                  go to the position when last editing this file
 `.                  go to the line that you last edited
-``                  go to the position before the last jump
-g,                  go to newer position in change list
-g;                  go to older position in change list

-# Tip: To jump to a mark you can either use a backtick (`) or an apostrophe (').
-# Using an apostrophe jumps to the beginning (first non-blank) of the line holding the mark.

 ##############################################################################
 # INSERT MODE
@@ -85,13 +70,10 @@ g;                  go to older position in change list

 i                   start insert mode at cursor
 I                   insert at the beginning of the line
-gi                  return to insert mode where you inserted text the last time
-gI                  like "I", but always start in column 1
 a                   append after the cursor
 A                   append at the end of the line
 o                   open (append) blank line below current line
 O                   open blank line above current line
-CTRL-o              Temporarily enter normal mode to issue one normal-mode command(while in insert mode)
 Esc                 exit insert mode


@@ -102,25 +84,10 @@ Esc                 exit insert mode

 r                   replace a single character (does not use insert mode)
 R                   enter Insert mode, replacing characters rather than inserting
-J                   join line below to the current one with one space in between
-gJ                  join line below to the current one without space in between
+J                   join line below to the current one
 cc                  change (replace) an entire line
-cw                  change (replace) to the end of word (same as ce)
-2cw                 change (replace) repeat cw twice
-ciw                 change (replace) word under the cursor
-caw                 change (replace) word under the cursor and the space after or before it
-ci"                 change (replace) word inside ""
-cit                 change (replace) html tag content
-cat                 change (replace) html tag
-cis                 change (replace) sentence under the cursor
-cas                 change (replace) sentence under the cursor and the space after or before it
-cib                 change (replace) inside a block with ()
-cab                 change (replace) a block with ()
-ciB                 change (replace) inside a block with {}
-caB                 change (replace) a block with {}
-C                   change (replace) to the end of line(same as c$)
-cG                  change (replace) to the end of the file
-cgg                 change (replace) from first line to current line
+cw                  change (replace) to the end of word
+C                   change (replace) to the end of line
 ct'                 change (replace) until the ' character (can change ' for any character)
 s                   delete character at cursor and substitute text
 S                   delete line at cursor and substitute text (same as cc)
@@ -135,7 +102,6 @@ guiw                make current word lowercase
 gU$                 make uppercase until end of line
 gu$                 make lowercase until end of line
 >>                  indent line one column to right
->i{                 indent everything in the {}
 <<                  indent line one column to left
 ==                  auto-indent current line
 ddp                 swap current line with next
@@ -144,7 +110,6 @@ ddkP                swap current line with previous
 :r [name]           insert the file [name] below the cursor.
 :r !{cmd}           execute {cmd} and insert its standard output below the cursor.

-# Tip: Instead of b or B one can also use ( or { respectively.

 ##############################################################################
 # DELETING TEXT
@@ -153,15 +118,10 @@ ddkP                swap current line with previous

 x                   delete current character
 X                   delete previous character
-dw                  delete (cut) to the end of word (same as de)
-diw                 delete (cut) word under the cursor
-daw                 delete (cut) word under the cursor and the space after or before it
-dap                 delete (cut) a paragraph
+dw                  delete the current word
 dd                  delete (cut) a line
-dt'                 delete (cut) until the next ' character on the line (replace ' by any character)
-dG                  delete (cut) to the end of the file
-dgg                 delete (cut) from first line to current line
-D                   delete (cut) from cursor to end of line (same as d$)
+dt'                 delete until the next ' character on the line (replace ' by any character)
+D                   delete from cursor to end of line
 :[range]d           delete [range] lines


@@ -176,10 +136,6 @@ yy                  yank (copy) a line
 y$                  yank to end of line
 p                   put (paste) the clipboard after cursor/current line
 P                   put (paste) before cursor/current line
-gp                  put (paste) the clipboard after cursor and leave cursor after the new text
-gP                  put (paste) before cursor and leave cursor after the new text
-"+y                 yank into the system clipboard register
-"+p                 paste from the system clipboard register
 :set paste          avoid unexpected effects in pasting
 :registers          display the contents of all registers
 "xyw                yank word into register x
@@ -191,12 +147,6 @@ gP                  put (paste) before cursor and leave cursor after the new tex
 "xgP                just like "P", but leave the cursor just after the new text
 :[line]put x        put the text from register x after [line]

-# Tip: if you are using vim extension on vs code, you can enable
-"vim.useSystemClipboard": true
-in setting.json, this will allow to Use system clipboard for unnamed register.
-
-
-

 ##############################################################################
 # MACROS
@@ -207,7 +157,6 @@ qa                  start recording macro 'a'
 q                   end recording macro
@a                  replay macro 'a'
@:                  replay last command
-@@                  repeat macro


 ##############################################################################
@@ -223,11 +172,9 @@ CTRL-v              start visual block mode
 O                   move to other corner of block
 aw                  mark a word
 ab                  a () block (with braces)
-aB                  a {} block (with brackets)
-at                  a block with <> tags
+ab                  a {} block (with brackets)
 ib                  inner () block
-iB                  inner {} block
-it                  inner <> block
+ib                  inner {} block
 Esc                 exit visual mode

 VISUAL MODE COMMANDS
@@ -247,7 +194,6 @@ v%                  selects matching parenthesis
 vi{                 selects matching curly brace
 vi"                 selects text between double quotes
 vi'                 selects text between single quotes
-gv                  reselect the last selected area

 ##############################################################################
 # SPELLING
@@ -294,7 +240,7 @@ set ic                      ignore case: turn on
 set noic                    ignore case: turn off
 :%s/old/new/g               replace all old with new throughout file
 :%s/old/new/gc              replace all old with new throughout file with confirmation
-:argdo %s/old/new/gc | wq   open multiple files and run this command to replace old
+:argdo %s/old/new/gc | wq   open multiple files and run this command to replace old 
                            with new in every file with confirmation, save and quit


@@ -337,6 +283,7 @@ CTRL-w <            increase window width
 CTRL-w >            decrease window width
 CTRL-w =            equal window
 CTRL-w o            close other windows
+zz                  Centers the window to the current line


 ##############################################################################
@@ -359,14 +306,12 @@ clast               display the last error


 %                   show matching brace, bracket, or parenthese
-gf                  edit the file whose name is under the cursor
-gF                  edit the file whose name is under the cursor and jump to the line number
+gf                  edit the file whose name is under or after the cursor
 gd                  when the cursor is on a local variable or function, jump to its declaration
 ''                  return to the line where the cursor was before the latest jump
+gi                  return to insert mode where you inserted text the last time
 CTRL-o              move to previous position you were at
 CTRL-i              move to more recent position you were at
-:set nu             display numbers (short for :set number)
-:set nonu           hide numbers (short for :set nonumber)


 ##############################################################################
@@ -540,7 +485,7 @@ CTRL-n              jump to the next empty tag / attribute


 cs'"                change surrounding quotes to double-quotes
-cs(}                change surrounding parens to braces
+cs(}                change surrounding parens to braces 
 cs({                change surrounding parens to braces with space
 ds'                 delete surrounding quotes
 dst                 delete surrounding tags
@@ -648,7 +593,7 @@ jj                  exit insertion mode

 <leader>/           clear the search register

-<leader>h           toggle hidden characters
+<leader>h           toggle hidden characters 

 <leader>W           strip all trailing whitespace

@@ -716,5 +661,5 @@ CTRL-y              go to next tag of attribute in sparkup plugin
 <leader>g           toggle Gundo window

 IMG<CR>             show image browser to insert image tag with src, width and height
-b                   insert image tag with dimensions from NERDTree
+b                   insert image tag with dimensions from NERDTree 
                    (http://stackoverflow.com/questions/5707925/vim-image-placement)
Author	SHA1	Message	Date
mohammad hassani	7c659374a2	Merge `fd7dfa3743` into `559d03ecf3`	2024-02-27 17:12:23 +08:00
mohammad hassani	fd7dfa3743	add react-native-styling cheat-sheet	2021-10-18 17:26:43 +03:30