Compare commits

..

2 Commits

Author SHA1 Message Date
mohammad hassani
29551f38d2 Merge fd7dfa3743 into 0931c8fc67 2024-07-07 15:23:08 +03:30
mohammad hassani
fd7dfa3743 add react-native-styling cheat-sheet 2021-10-18 17:26:43 +03:30
12 changed files with 323 additions and 105 deletions

View File

@@ -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)

View File

@@ -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)

View File

@@ -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;

View File

@@ -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
@@ -153,7 +153,7 @@ Operators
Operator precedence
More precedence
LR ( ) [ ] -> . x++ x--
@@ -203,7 +203,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*/

View File

@@ -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.

View File

@@ -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"

View File

@@ -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

View File

@@ -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);
```
@@ -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. ");
}
}
}
```

View File

@@ -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.

View File

@@ -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

View File

@@ -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.

View File

@@ -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