forked from in-tech-gration/WDX-180
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' of github.com:alkozp/WDX-180
- Loading branch information
Showing
15 changed files
with
388 additions
and
15 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| --- | ||
| title: The scroll bar you didn't know you needed! | ||
| load_script_js_via_src: | ||
| - flems/flems.html | ||
| - flems/flems_init.js | ||
| --- | ||
|
|
||
| # CSS Shorts | ||
|
|
||
| ## Author: Kevin Powell: The scroll bar you didn't know you needed! | ||
|
|
||
| - Watch the [**video**](https://www.youtube.com/shorts/ZFhPGfLfSa8){:target="_blank"} | ||
|
|
||
| <iframe width="100%" height="480" src="https://www.youtube.com/embed/ZFhPGfLfSa8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen style="border: 4px solid red;"></iframe> | ||
|
|
||
| - Check the [MDN page on `scrollbar-gutter`](https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter){:target="_blank"} | ||
|
|
||
| - Experiment with the code below: | ||
| - We **highly recommend** that you first check the code, then tweak it and play around with it and lastly clear the code and try to replicate the example from scratch. | ||
|
|
||
| ```html | ||
| <style> | ||
| body, section { background: white; } | ||
| section .floating-scrollbar { | ||
| max-height: 50vh; | ||
| padding: 1rem; | ||
| background: rgb(2,0,36); | ||
| background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(210,93,174,1) 36%, rgba(197,100,179,1) 39%, rgba(0,212,255,1) 100%); | ||
| overflow-y: auto; | ||
| } | ||
| </style> | ||
| <section> | ||
| <div class="floating-scrollbar"> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | ||
| </div> | ||
| </section> | ||
| ``` | ||
|
|
||
| [► Live coding](#flems-enable) | ||
|
|
||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| --- | ||
| title: A quick & fun CSS animation effect | ||
| load_script_js_via_src: | ||
| - flems/flems.html | ||
| - flems/flems_init.js | ||
| --- | ||
|
|
||
| # CSS Shorts | ||
|
|
||
| ## Kevin Powell: A quick & fun CSS animation effect | ||
|
|
||
| - Watch the [**video**](https://www.youtube.com/shorts/TgOWjuOweHQ){:target="_blank"} | ||
|
|
||
| <iframe width="100%" height="480" src="https://www.youtube.com/embed/TgOWjuOweHQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen style="border: 4px solid red;"></iframe> | ||
|
|
||
| - Check the [MDN page on `scale`](https://developer.mozilla.org/en-US/docs/Web/CSS/scale){:target="_blank"} | ||
|
|
||
| - Check the [MDN page on `transform-origin`](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin){:target="_blank"} | ||
|
|
||
| - Experiment with the code below: | ||
| - We **highly recommend** that you first check the code, then tweak it and play around with it and lastly clear the code and try to replicate the example from scratch. | ||
|
|
||
| ```html | ||
| <style> | ||
| body, section { background: white; } | ||
| .button { | ||
| --color: hsl(208, 72%, 39%); | ||
| display: inline-block; | ||
| cursor: pointer; | ||
| text-decoration: none; | ||
| border: 3px solid var(--color); | ||
| color: black; | ||
| padding: .5em 1em; | ||
| border-radius: .25em; | ||
| position: relative; | ||
| isolation: isolate; | ||
| } | ||
| .button::after { | ||
| content: ''; | ||
| position: absolute; | ||
| z-index: -1; | ||
| background: var(--color); | ||
| inset: 0; | ||
| scale: 0 1; | ||
| transform-origin: right; | ||
| transition: scale 450ms; | ||
| } | ||
| .button:hover::after, .button:focus-visible::after { | ||
| transform-origin: left; | ||
| scale: 1 1; | ||
| } | ||
| </style> | ||
| <section> | ||
| <button class="button">Simple Animation</button> | ||
| </section> | ||
| ``` | ||
|
|
||
| [► Live coding](#flems-enable) | ||
|
|
37 changes: 37 additions & 0 deletions
37
curriculum/modules/html/attributes/download_short/index.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| --- | ||
| title: A HTML Download attribute in all browsers! | ||
| --- | ||
|
|
||
| # HTML Shorts | ||
|
|
||
| ## Umar Hansa: A HTML Download attribute in all browsers! | ||
|
|
||
| - Watch the [**video**](https://www.youtube.com/shorts/nIcxzmiVFJg){:target="_blank"} | ||
|
|
||
| <iframe width="100%" height="480" src="https://www.youtube.com/embed/nIcxzmiVFJg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen style="border: 4px solid red;"></iframe> | ||
|
|
||
| - Check the [MDN page on `HTMLAnchorElement: download property`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/download){:target="_blank"} | ||
|
|
||
| - Experiment with the code below: | ||
| - We **highly recommend** that you first check the code, then tweak it and play around with it and lastly clear the code and try to replicate the example from scratch. | ||
|
|
||
| ```html | ||
| <style> | ||
| body, section { background: white; } | ||
| </style> | ||
| <section> | ||
| <hr/> | ||
| <a download="my-fancy-cat.jpg" href="cat.jpg"> | ||
| <img src="cat.jpg" width="50%"/> | ||
| </a> | ||
| <hr/> | ||
| <a download="some/long/path/my-cat.jpg" href="cat.jpg"> | ||
| Download cat pics | ||
| </a> | ||
| <hr/> | ||
| <a download href="config.json"> | ||
| Download your JSON config | ||
| </a> | ||
| </section> | ||
| ``` | ||
|
|
41 changes: 41 additions & 0 deletions
41
curriculum/modules/javascript/core/arrays/methods_shorts/at/index.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| --- | ||
| title: Use JavaScript's new array.at() | ||
| load_script_js_via_src: | ||
| - flems/flems.html | ||
| - flems/flems_init.js | ||
| --- | ||
|
|
||
| # JS Shorts | ||
|
|
||
| ## Wes Bos: Use JavaScript's new array.at() | ||
|
|
||
| - Watch the [**video**](https://www.youtube.com/shorts/ibvMv49qAlI){:target="_blank"} | ||
|
|
||
| <iframe width="100%" height="480" src="https://www.youtube.com/embed/ibvMv49qAlI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen style="border: 4px solid red;"></iframe> | ||
|
|
||
| - Check the [MDN page on `Array.prototype.at()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/at){:target="_blank"} | ||
|
|
||
| - Experiment with the code below: | ||
| - We **highly recommend** that you first check the code, then tweak it and play around with it and lastly clear the code and try to replicate the example from scratch. | ||
|
|
||
| ```js | ||
| const tops = ['sauce', | ||
| 'cheese', 'pepperoni', | ||
| 'sausage', 'peppers', | ||
| 'onions', 'mushrooms', | ||
| 'olives']; | ||
|
|
||
| console.log("With .at(0): ", tops.at(0)); // sauce | ||
| console.log("With .at(1): ", tops.at(1)); // cheese | ||
|
|
||
| console.log("With tops[tops.length -1]: ", tops[tops.length -1]); | ||
| console.log("With .at(-1): ", tops.at(-1)); // olives | ||
| console.log("With .at(-2): ", tops.at(-2)); // mushrooms | ||
|
|
||
| console.log("With tops[Math.floor(Math.random() * tops.length)]: ", tops[Math.floor(Math.random() * tops.length)]); | ||
|
|
||
| console.log("With .at(Math.random() * tops.length): ", tops.at(Math.random() * tops.length)); | ||
| ``` | ||
|
|
||
| [► Live coding](#flems-enable) | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,95 @@ | ||
| { | ||
| "$schema": "http://json-schema.org/schema", | ||
| "$comment": "Understanding JSON Schema: https://json-schema.org/understanding-json-schema/UnderstandingJSONSchema.pdf / Inspiration: https://github.com/pyvideo/data/blob/main/writethedocs-na-2018/videos/audience-market-product-bob-watson-write-the-docs-portland-2018.json / YAML: https://github.com/redhat-developer/vscode-yaml", | ||
| "definitions": { | ||
| "git_commands": { | ||
| "type": "string", | ||
| "$ref": "../../resources/schemas/git.json#/commands" | ||
| }, | ||
| "concepts": { | ||
| "type": "string", | ||
| "enum": [ | ||
| "Version Control", | ||
| "Git Branches" | ||
| ] | ||
| }, | ||
| "schedule_units": { | ||
| "type": "number" | ||
| }, | ||
| "weekdays" : { | ||
| "type": "string", | ||
| "enum": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"] | ||
| }, | ||
| "weekdays_numeric" : { | ||
| "type": "string", | ||
| "enum": ["1","2","3","4","5"] | ||
| } | ||
| }, | ||
| "type": "object", | ||
| "properties": { | ||
| "input": { | ||
| "type": "string" | ||
| }, | ||
| "schedule": { | ||
| "type": "object", | ||
| "oneOf": [ | ||
| { | ||
| "required": [ "days" ] | ||
| }, | ||
| { | ||
| "required": [ "extra" ] | ||
| } | ||
| ], | ||
| "properties" : { | ||
| "days" : { | ||
| "type": "object", | ||
| "propertyNames": { | ||
| "anyOf": [ | ||
| { | ||
| "$ref": "#/definitions/weekdays" | ||
| }, | ||
| { | ||
| "$ref": "#/definitions/weekdays_numeric" | ||
| } | ||
| ] | ||
| }, | ||
| "patternProperties": { | ||
| "^(1|2|3|4|5|Monday|Tuesday|Wednesday|Thursday|Friday)$": { "anyOf": [ | ||
| { "type": "string" }, | ||
| { | ||
| "type": "object", | ||
| "properties": { | ||
| "module": {}, | ||
| "technical": { | ||
| "type": "array", | ||
| "items" : { | ||
| "$ref": "#/definitions/git_commands" | ||
| } | ||
| }, | ||
| "concepts": { | ||
| "type": "array", | ||
| "items" : { | ||
| "anyOf": [ | ||
| { "$ref": "../../resources/schemas/terms.json#/terms" }, | ||
| { "$ref": "../../resources/schemas/git.json#/concepts" } | ||
| ] | ||
| } | ||
| } | ||
| }, | ||
| "additionalProperties":false | ||
| } | ||
| ] | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| }, | ||
| "required": [ | ||
| "title", | ||
| "schedule" | ||
| ], | ||
| "dependencies": { | ||
| } | ||
|
|
||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.