Merge fd7dfa3743 into 8557d4f3d8

adding the at() method

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)
@@ -124,6 +125,7 @@ Feel free to take a look. You might learn new things. They have been designed to
 - [Nginx](tools/nginx.sh)
 - [PM2](tools/pm2.sh)
 - [Ubuntu](tools/ubuntu.sh)
+- [Firebase CLI](tools/firebase_cli.md)
   </details>
 
 ## 🙌🏼 How to Contribute?

backend/laravel.php

@@ -8,6 +8,8 @@
 // MAIN.
 
 php artisan clear-compiled       // Remove the compiled class file
+php artisan db                   // Start a new database CLI session
+php artisan docs                 // Access the Laravel documentation
 php artisan down                 // Put the application into maintenance mode
 php artisan dump-server          // Start the dump server to collect dump information.
 php artisan env                  // Display the current framework environment
@@ -43,6 +45,9 @@ php artisan config:clear         // Remove the configuration cache file
 // DB
 
 php artisan db:seed              // Seed the database with records
+php artisan db:show              // Display information about the given database
+php artisan db:table             // Display information about the given database table
+php artisan db:wipe              // Drop all tables, views, and types
 
 // EVENT
 
@@ -54,9 +59,10 @@ php artisan key:generate         // Set the application key
 
 // MAKE
 
-php artisan make:auth            // Scaffold basic login and registration views and routes
+php artisan make:cast            // Create a new custom Eloquent cast class
 php artisan make:channel         // Create a new channel class
 php artisan make:command         // Create a new Artisan command
+php artisan make:component       // Create a new view component class
 php artisan make:controller      // Create a new controller class
 php artisan make:event           // Create a new event class
 php artisan make:exception       // Create a new custom exception class
@@ -74,6 +80,7 @@ php artisan make:provider        // Create a new service provider class
 php artisan make:request         // Create a new form request class
 php artisan make:resource        // Create a new resource
 php artisan make:rule            // Create a new validation rule
+php artisan make:scope           // Create a new scope class
 php artisan make:seeder          // Create a new seeder class
 php artisan make:test            // Create a new test class
 
@@ -86,6 +93,10 @@ php artisan migrate:reset        // Rollback all database migrations
 php artisan migrate:rollback     // Rollback the last database migration
 php artisan migrate:status       // Show the status of each migration
 
+// MODEL
+php artisan model:prune          // Prune models that are no longer needed
+php artisan model:show           // Show information about an Eloquent model
+
 // NOTIFICATIONS
 
 php artisan notifications:table  // Create a migration for the notifications table
@@ -100,13 +111,19 @@ php artisan package:discover     // Rebuild the cached package manifest
 
 // QUEUE
 
+php artisan queue:batches-table  // Create a migration for the batches database table
+php artisan queue:clear          // Delete all of the jobs from the specified queue
 php artisan queue:failed         // List all of the failed queue jobs
 php artisan queue:failed-table   // Create a migration for the failed queue jobs database table
 php artisan queue:flush          // Flush all of the failed queue jobs
 php artisan queue:forget         // Delete a failed queue job
 php artisan queue:listen         // Listen to a given queue
+php artisan queue:monitor        // Monitor the size of the specified queues
+php artisan queue:prune-batches  // Prune stale entries from the batches database
+php artisan queue:prune-failed   // Prune stale entries from the failed jobs table
 php artisan queue:restart        // Restart queue worker daemons after their current job
 php artisan queue:retry          // Retry a failed queue job
+php artisan queue:retry-batch    // Retry the failed jobs for a batch
 php artisan queue:table          // Create a migration for the queue jobs database table
 php artisan queue:work           // Start processing jobs on the queue as a daemon
 
@@ -116,9 +133,26 @@ php artisan route:cache          // Create a route cache file for faster route r
 php artisan route:clear          // Remove the route cache file
 php artisan route:list           // List all registered routes
 
+// SAIL
+
+php artisan sail:install         // Install Laravel Sail's default Docker Compose file
+php artisan sail:publish         // Publish the Laravel Sail Docker files
+
+// SANCTUM
+
+php artisan sanctum:prune-expired // Prune tokens expired for more than specified number of hours.
+
 // SCHEDULE
 
-php artisan schedule:run         // Run the scheduled commands
+php artisan schedule:clear-cache  // Delete the cached mutex files created by scheduler
+php artisan schedule:list         // List the scheduled commands
+php artisan schedule:run          // Run the scheduled commands
+php artisan schedule:test         // Run a scheduled command
+php artisan schedule:work         // Start the schedule worker
+
+// SCHEMA
+
+php artisan schema:dump           // Dump the given database schema
 
 // SESSION
 
@@ -128,6 +162,10 @@ php artisan session:table        // Create a migration for the session database
 
 php artisan storage:link         // Create a symbolic link from "public/storage" to "storage/app/public"
 
+// STUD
+
+php artisan stub:publish         // Publish all stubs that are available for customization
+
 // VENDOR
 
 php artisan vendor:publish       // Publish any publishable assets from vendor packages

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)

languages/javascript.js

@@ -72,6 +72,7 @@ array.splice(start, deleteCount, item1, item2, ...)  // Adds and/or removes elem
 arr.unshift([element1[, ...[, elementN]]])           // Adds one or more elements to the front of an array and returns the new length of the array.
 
 // Instance: accessor methods
+arr.at(index)                                        // Returns the element at the specified index in the array.
 arr.concat(value1[, value2[, ...[, valueN]]])        // Returns a new array comprised of this array joined with other array(s) and/or value(s).
 arr.includes(searchElement, fromIndex)               // Determines whether an array contains a certain element, returning true or false as appropriate.
 arr.indexOf(searchElement[, fromIndex])              // Returns the first (least) index of an element within the array equal to the specified value, or -1 if none is found.

tools/firebase_cli.md

@@ -0,0 +1,140 @@
+# Firebase CLI Guide
+
+Firebase CLI (Command Line Interface) is a powerful tool that allows developers to interact with Firebase services and manage their Firebase projects directly from the command line. It provides a convenient and efficient way to deploy projects, manage databases, configure authentication, and more, streamlining the development and deployment processes.
+
+## Installation
+
+To use the Firebase CLI, you need to have Node.js and npm (Node Package Manager) installed on your system. Follow the steps below to install the Firebase CLI:
+
+1. Install Node.js and npm by downloading the installer from the [official Node.js website](https://nodejs.org/en/download/) and following the installation instructions for your operating system.
+
+2. Once Node.js and npm are installed, open your terminal or command prompt and run the following command to install the Firebase CLI globally:
+
+   ```
+   npm install -g firebase-tools
+   ```
+
+   This command will download and install the Firebase CLI package from the npm registry.
+
+3. After the installation is complete, you can verify that the Firebase CLI is installed correctly by running the following command:
+
+   ```
+   firebase --version
+   ```
+
+   If the installation was successful, you will see the version number of the Firebase CLI printed in the terminal.
+
+Congratulations! You have successfully installed the Firebase CLI.
+
+## Usage
+
+The Firebase CLI allows you to interact with Firebase services and manage your Firebase projects from the command line. Here are some common tasks you can perform using the Firebase CLI:
+
+- Initialize a new Firebase project in your current directory.
+- Deploy your Firebase project to Firebase hosting.
+- Manage Firebase Authentication, Realtime Database, Cloud Firestore, Cloud Functions, and other Firebase services.
+- Configure Firebase project settings.
+- Interact with Firebase emulators for local development and testing.
+
+To use the Firebase CLI, open your terminal or command prompt and run the `firebase` command followed by the desired command and options.
+
+Here's an example of the basic usage:
+
+```
+firebase <command> [options]
+```
+
+Replace `<command>` with the specific Firebase command you want to execute, and `[options]` with any additional options or flags required for that command.
+
+For more detailed usage information, you can run the following command:
+
+```
+firebase help
+```
+
+This command will display the available Firebase commands and provide detailed information about each command.
+
+## Commands
+
+Here are the commonly used Firebase CLI commands along with a brief explanation, syntax, and an example for each command:
+
+- `firebase init`: Initializes a new Firebase project in the current directory.
+
+  - Syntax: `firebase init [options]`
+  - Example: `firebase init hosting` initializes Firebase Hosting for the current project.
+
+- `firebase deploy`: Deploys your Firebase project to Firebase hosting or other Firebase services.
+
+  - Syntax: `firebase deploy [options]`
+  - Example: `firebase deploy --only hosting` deploys only the Firebase Hosting content.
+
+- `firebase serve`: Starts local development servers and Firebase emulators.
+
+  - Syntax: `firebase serve [options]`
+  - Example: `firebase serve --only functions,hosting` starts the Firebase emulators for functions and hosting.
+
+- `firebase login`: Authenticates the Firebase CLI with your Firebase account.
+
+  - Syntax: `firebase login [options]`
+  - Example: `firebase login --no-localhost` initiates an interactive login session without connecting to localhost.
+
+- `firebase logout`: Logs out from the Firebase CLI.
+
+  - Syntax: `firebase logout [options]`
+  - Example: `firebase logout` logs out the currently authenticated user.
+
+- `firebase use`: Sets the active Firebase project for the current directory.
+
+  - Syntax: `firebase use <project_id> [options]`
+  - Example: `firebase use my-project` sets "my-project" as the active Firebase project.
+
+- `firebase functions`: Interacts with Firebase Cloud Functions.
+
+  - Syntax: `firebase functions:command [options]`
+  - Example: `firebase functions:delete [function_name]` deletes all functions that match the specified name in all regions.
+
+- `firebase database`: Interacts with Firebase Realtime Database.
+
+  - Syntax: `firebase database:command [options]`
+  - Example: `firebase database:get /users` retrieves data from the Firebase Realtime Database.
+
+- `firebase firestore`: Interacts with Firebase Cloud Firestore.
+
+  - Syntax: `firebase firestore:command [options]`
+  - Example: `firebase firestore:delete collection/document` deletes a document from the Firestore database.
+
+- `firebase auth`: Interacts with Firebase Authentication.
+
+  - Syntax: `firebase auth:command [options]`
+  - Example: `firebase auth:export users.csv` exports user data to a CSV file.
+
+- `firebase hosting`: Interacts with Firebase Hosting.
+
+  - Syntax: `firebase hosting:command [options]`
+  - Example: `firebase hosting:disable` disables Firebase Hosting for the current project.
+
+- `firebase remoteconfig`: Interacts with Firebase Remote Config.
+
+  - Syntax: `firebase remoteconfig:command [options]`
+  - Example: `firebase remoteconfig:get template` retrieves the Remote Config template.
+
+- `firebase ext`: Interacts with Firebase Extensions.
+
+  - Syntax: `firebase ext:command [options]`
+  - Example: `firebase ext:install firebase/delete-user-data` installs the Firebase Extension named "firebase/delete-user-data".
+
+- `firebase appdistribution`: Interacts with Firebase App Distribution.
+
+  - Syntax: `firebase appdistribution:command [options]`
+  - Example: `firebase appdistribution:testers:add` Adds testers to the project.
+
+- `firebase use --add`: Adds an existing Firebase project to the current directory
+
+  - Syntax: `firebase use --add`
+  - Example: `firebase use --add` interactively adds an existing Firebase project.
+
+- `firebase projects:create`: Creates a new Firebase project.
+  - Syntax: `firebase projects:create [options]`
+  - Example: `firebase projects:create --display-name "My Project"` creates a new Firebase project with the given display name.
+
+These are just a few examples of the available commands. You can explore more commands and their options by running `firebase help` or visiting the [official Firebase CLI documentation](https://firebase.google.com/docs/cli).