├── LICENSE ├── README.md ├── ai.md ├── animations ├── 3d-and-webgl.md ├── ambient.md ├── flip.md ├── gsap.md ├── misc.md ├── svg.md └── web.md ├── audio.md ├── books.md ├── conferences.md ├── content-creation.md ├── creatives └── nigeria.md ├── css.md ├── design ├── Terminologies.md ├── misc.md └── people.md ├── fitness └── flat-belly.md ├── game-dev └── README.md ├── hardware.md ├── interviewing.md ├── javascript ├── functional.md └── miscellaneous.md ├── misc-tooling.md ├── movies.md ├── performance.md ├── threads-that-probably-make-no-sense-to-me-now-but-may-in-the-future └── webgl-uv-shaders-gpus.md ├── tweets.md └── web.md /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Joseph Rex 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 | 3 | # Knowledge OpenVault 4 | 5 | ![Book Of Knowledge](http://michellephan.com/content/uploads/2015/01/KnowledgeHeader.png) 6 | 7 |
8 | 9 | Repository for documenting knowledge acquired. While I'll be putting some properly organized ones 10 | on my blog [josephrex.me](https://josephrex.me), there are some things that aren't 11 | complete enough to make a blog post. Fragments from here may come together and eventually 12 | make up blog posts. 13 | 14 | ### Other knowledge lists 15 | This was inspired by @yoshuawuyts and more people have created their own knowledge list including me. 16 | You can find others here: [meta-knowledge](https://github.com/RichardLitt/meta-knowledge) 17 | 18 | 19 | -------------------------------------------------------------------------------- /ai.md: -------------------------------------------------------------------------------- 1 | # AI utilities 2 | - [LyreBird](https://lyrebird.ai) for voice cloning 3 | 4 | -------------------------------------------------------------------------------- /animations/3d-and-webgl.md: -------------------------------------------------------------------------------- 1 | # Webgl 2 | ### Entry for beginners 3 | - [Rach Smith's series on codepen](https://codepen.io/rachsmith/post/beginning-with-3d-webgl-pt-1-the-scene) 4 | - [Diving into 3D WebGL with THREE.js by Joseph Rex](https://x-team.com/blog/3d-webgl-threejs/) 5 | - [Building User Experiences with Three.js by Joseph Rex](https://x-team.com/blog/user-experience-threejs/) 6 | - [Animating points with Webgl and Regl](http://peterbeshai.com/beautifully-animate-points-with-webgl-and-regl.html) 7 | - [A Noob's guide to three.js by Dennis Gaebel](https://webdesign.tutsplus.com/tutorials/a-noobs-guide-to-threejs--cms-28639) 8 | - [Louis Hoebregts's threejs collection](https://codepen.io/collection/DrxLEd/) and [posts](http://mamboleoo.be/learnThree/) 9 | - [Codrops animating 3D scenes](https://tympanus.net/codrops/2016/04/26/the-aviator-animating-basic-3d-scene-threejs/) 10 | - [Fun with WebGL 2.0 - YouTube Playlist](https://www.youtube.com/playlist?list=PLMinhigDWz6emRKVkVIEAaePW7vtIkaIF) 11 | - [Learning GLSL resources repo](https://github.com/TheoGil/learning-glsl) 12 | - [Animation and Interaction Techniques with WebGL](https://www.smashingmagazine.com/2017/09/animation-interaction-techniques-webgl/) 13 | 14 | 15 | ### WebGL 16 | [Web Fundamentals](https://webglfundamentals.org/webgl/lessons/webgl-fundamentals.html) 17 | 18 | 19 | ### Shaders 20 | - [Introduction to shaders - Aerotwist](https://aerotwist.com/tutorials/an-introduction-to-shaders-part-1/) 21 | - [pixelshaders](http://pixelshaders.com) 22 | - [A series on shaders](https://medium.com/@Zadvorsky/into-vertex-shaders-594e6d8cd804) 23 | - [The book of shaders](https://thebookofshaders.com/) 24 | - [Shader school](https://github.com/stackgl/shader-school) 25 | - [ShaderToy](https://www.shadertoy.com) 26 | - [ShaderLand](http://shaderland.com) 27 | - [Learning shaders](https://www.alanzucconi.com/2018/01/03/learning-shaders/) 28 | 29 | ### From Blender to ThreeJS 30 | - [Importing a modeled mesh from blender to three.js](https://www.jonathan-petitcolas.com/2015/07/27/importing-blender-modelized-mesh-in-threejs.html) 31 | - [ThreeJS blender export from repo](https://github.com/mrdoob/three.js/tree/master/utils/exporters/blender) 32 | 33 | 34 | ### Blender 35 | - [Blender Noob to Pro wikibook](https://en.wikibooks.org/wiki/Blender_3D:_Noob_to_Pro#Table_of_Contents) 36 | 37 | ### Debugging 38 | - [Spectator extension - Chrome](https://chrome.google.com/webstore/detail/spectorjs/denbgaamihkadbghdceggmchnflmhpmk?hl=en) 39 | - [WebGL Insights](https://chrome.google.com/webstore/detail/webgl-insight/djdcbmfacaaocoomokenoalbomllhnko?hl=en-US) 40 | 41 | 42 | ### Misc 43 | - [Webgl insights](http://webglinsights.com/) 44 | - [BabylonJS - Alternative WebGL library](https://www.babylonjs.com/) 45 | - [WhitestormJS](http://whsjs.io) for physics, mouse interaction, webVR 46 | - [Workshop by GazzyB on making WebGL websites](https://doublejump.github.io/webgl-workshop/guide/) 47 | - [ThreeJS tips and tricks](https://discoverthreejs.com/tips-and-tricks/) 48 | - [Mapping Shaders](https://www.clicktorelease.com/blog/creating-spherical-environment-mapping-shader/) 49 | -------------------------------------------------------------------------------- /animations/ambient.md: -------------------------------------------------------------------------------- 1 | # Ambient animations 2 | These are subtle animations in the background that pass a message to the user 3 | based on the action. Like a blue color of waves during inactivity, a red color 4 | on wrong activity and a green on successful activity. 5 | 6 | More on that [here](https://msdn.microsoft.com/en-us/library/ff318680(v=surface.10).aspx) 7 | -------------------------------------------------------------------------------- /animations/flip.md: -------------------------------------------------------------------------------- 1 | # FLIP Animations 2 | - **F** - First state size/position calculation 3 | - **L** - Last state calculation and application 4 | - **I** - Invert the last state to proxy first state (scale down, translate to old position) 5 | - **P** - Play animation to transition from inverted state to last state 6 | 7 | ### Resources 8 | - [Flip your animations by Aerotwist](https://aerotwist.com/blog/flip-your-animations/) 9 | - [FLOG: First, Last, Object containing invert, GSAP animation example by Shaw](https://codepen.io/shshaw/pen/bZJvjK?editors=1010) 10 | - [Creating animations with flip technique by DavidKPiano](http://www.creativebloq.com/features/create-animations-with-the-flip-technique) 11 | - [Paul Lewis (Aerotwist)'s library on Flip - FLIP.js](https://github.com/googlechrome/flipjs) 12 | -------------------------------------------------------------------------------- /animations/gsap.md: -------------------------------------------------------------------------------- 1 | # GSAP 2 | cycle can be used to get index for specific elements when using `.to()`, `.from()` or the Stagger variations. [Doc reference](https://greensock.com/gsap-1-18-0). But may be gone in 1.19 gsap update 3 | -------------------------------------------------------------------------------- /animations/misc.md: -------------------------------------------------------------------------------- 1 | Numerical integration 2 | 3 | Integration schemes for motion: 4 | - Runge Kutta 4 5 | - Euler 6 | - Verlet (Improve Euler) 7 | - [Motion design resources][1] 8 | 9 | Read more on this 10 | 11 | Applications of kinematic equations in animations 12 | 13 | 14 | [1]: https://docs.google.com/spreadsheets/d/1D83TJFxw1eEr4lq1N7E_oghzBuOh21uwl1-tFzDg1Gs/edit#gid=1144771732 15 | -------------------------------------------------------------------------------- /animations/svg.md: -------------------------------------------------------------------------------- 1 | # Manual 2 | - [Pocket guide to learning SVG](http://svgpocketguide.com/book/) 3 | 4 | # Working with paths 5 | - [Tool for modifying path coordinates in SVG](http://jxnblk.com/paths/) 6 | - [Morphing between SVG paths](https://github.com/SamKnows/path.js) 7 | - [Get path lengths](https://codepen.io/gabriellewee/full/EZPYmw/) 8 | 9 | # Morphing 10 | Morphing is changing the coordinate values of a paths. Here are some examples: 11 | - [Introduction with SMIL (Synchronized Multimedia Integration Language)](https://css-tricks.com/svg-shape-morphing-works/) 12 | - [Intro to SMIL SVG animation](http://codepen.io/noahblon/post/an-intro-to-svg-animation-with-smil) 13 | - [A guide to SVG animations - SMIL by Sara Soueidan](https://css-tricks.com/guide-svg-animations-smil/) 14 | - [Shape shifter - A tool for shifting a shape into another](https://shapeshifter.design) 15 | - [Many tools shape morphing](https://css-tricks.com/many-tools-shape-morphing/) 16 | - [Ana Tudor uses clip-path for morphing effect - Breathing polygon](http://codepen.io/thebabydino/pen/Fxrbd) 17 | - [Ana Tudor again with the clip-path magic](http://codepen.io/thebabydino/details/uiHCf#forks) 18 | - [Yet another clip-path weirdness by Ana Tudor](http://codepen.io/thebabydino/pen/aFrcu) 19 | - [Flubber morphing tool that also lists other morphing tools in README](https://github.com/veltman/flubber) 20 | 21 | # Misc 22 | - Svg provides fallback for non supporting browsers with `switch` and `foreignObject`. [This tweet by Sara Soueidan for more](https://twitter.com/SaraSoueidan/status/875112721922043904) 23 | - Export SVG to Gif with Chris Gannon's tool [here](https://github.com/chrisgannon/SVG2GIF) 24 | 25 | 26 | ## Snippets 27 | Using preserveAspectRatio: 28 | ``` 29 | preserveAspectRatio="xMidYMid meet" => background-size: contain 30 | preserveAspectRatio="xMidYMid slice" => background-size: cover 31 | ``` 32 | 33 | -------------------------------------------------------------------------------- /animations/web.md: -------------------------------------------------------------------------------- 1 | - [Additive Animations](http://spake.github.io/additive-animations-slides/#1) 2 | 3 | > This slide explains how composite property works. And according to this [tweet](https://twitter.com/DasSurma/status/892678387076132865) we are getting a animation-composite property in CSS. 4 | 5 | - When clipping with border-radius gets glitchy, the parent can be forced to a new layer with `transform: translateZ(0)` to fix the problem. E.g when a transition bleeds out of its container that already has a `overflow: hidden` set. 6 | -------------------------------------------------------------------------------- /audio.md: -------------------------------------------------------------------------------- 1 | # Audio Programming Resources 2 | 3 | - [Movie audio clips](http://www.moviesoundclips.net/sound.php?id=92) 4 | -------------------------------------------------------------------------------- /books.md: -------------------------------------------------------------------------------- 1 | Books 2 | ======== 3 | I have a well formatted version of this on my [reading list](https://josephrex.me/life/reading-list) 4 | 5 | ## Books I've read 6 | - RiceTea 7 | - CSS Secrets 8 | - Rails 4 in Action 9 | 10 | 11 | ## Books to read 12 | - [Structure and Interpretation of Computer Programs](https://mitpress.mit.edu/sicp/full-text/book/book.html) 13 | -------------------------------------------------------------------------------- /conferences.md: -------------------------------------------------------------------------------- 1 | Conferences I'd go to 2 | ===================== 3 | - [Frontend Design Conference - Petersburg, Florida](http://frontenddesignconference.com/) 4 | -------------------------------------------------------------------------------- /content-creation.md: -------------------------------------------------------------------------------- 1 | ## Jamstack Headless CMSes 2 | - [Forestry](https://forestry.io) is a CMS for static websites 3 | - Sanity.io 4 | - Takeshape.io 5 | - Prismic 6 | - Contentful 7 | - Tipe.io 8 | -------------------------------------------------------------------------------- /creatives/nigeria.md: -------------------------------------------------------------------------------- 1 | ## Nigerian Creatives 2 | 3 | - [Magic Carpet Studios][1] - Animators ([Youtube][2]) 4 | 5 | 6 | [1]: https://magiccarpet.studio/ 7 | [2]: https://www.youtube.com/channel/UC84BeXq3wynt9xbrcGZFVqQ 8 | -------------------------------------------------------------------------------- /css.md: -------------------------------------------------------------------------------- 1 | # CSS TILs 2 | - Una and Adam Argyle share the amazing future of CSS - https://a.nerdy.dev/css-at-cds 3 | - You can create a hamburger with `|||` 4 | - Using `list-style-type: none` is bad for accessibility - [Fix][1] 5 | - [The all property][2] 6 | 7 | - [Conditional border-radius][3] 8 | 9 | [1]: https://unfetteredthoughts.net/2017/09/26/voiceover-and-list-style-type-none/ 10 | [2]: https://twitter.com/fantasai/status/1330922030682796038 11 | 12 | [3]: https://twitter.com/shadeed9/status/1444932755889004544?s=20 13 | -------------------------------------------------------------------------------- /design/Terminologies.md: -------------------------------------------------------------------------------- 1 | CRAP - Contrast, Repetition, Alignment, and Proximity 2 | -------------------------------------------------------------------------------- /design/misc.md: -------------------------------------------------------------------------------- 1 | - [Dimensions of everything](https://www.dimensions.com/) 2 | -------------------------------------------------------------------------------- /design/people.md: -------------------------------------------------------------------------------- 1 | # People to know in design world 2 | 3 | - Steven Heller - Art director and author of many good books 4 | - [Paul Rand][1] 5 | 6 | 7 | [1]: https://www.wired.com/2015/04/paul-rand-visionary-showed-us-design-matters/ 8 | -------------------------------------------------------------------------------- /fitness/flat-belly.md: -------------------------------------------------------------------------------- 1 | Getting a Flat Belly 2 | ====================== 3 | Jeff Cavaliere points out in his video that abdominal exercises are good 4 | but they don't make you lose belly fat. Good and consistent abdominal 5 | workouts will build abs but then abs can't be formed upon a big belly. 6 | 7 | Diet has to change and aerobics have to be mixed in exercise routine to 8 | burn existing fat. Even when ripped, fats may still be settled underneath 9 | the obliques. 10 | -------------------------------------------------------------------------------- /game-dev/README.md: -------------------------------------------------------------------------------- 1 | # Game Dev Resources 2 | 3 | ### Web-based 4 | 5 | - [Phaser](https://phaser.io) 6 | 7 | 8 | ## Misc 9 | 10 | ### L-System 11 | [L - System](https://en.wikipedia.org/wiki/L-system) is a concept where an axios is used to create the foundation of a construction and more recursive strings L-like can create geometric structures like trees. 12 | -------------------------------------------------------------------------------- /hardware.md: -------------------------------------------------------------------------------- 1 | ## Learning Resources 2 | - [LittleBits](http://littlebits.cc) 3 | - [JohnnyFive](http://johnny-five.io) 4 | 5 | 6 | ## Boards 7 | - [Vocore](http://vocore.io/#store) 8 | -------------------------------------------------------------------------------- /interviewing.md: -------------------------------------------------------------------------------- 1 | Interviewing 2 | ===================== 3 | - [Frontend interview handbook](https://github.com/yangshun/front-end-interview-handbook/blob/master/questions/javascript-questions.md) 4 | - [123 Essential JavaScript Interview Questions](https://github.com/ganqqwerty/123-Essential-JavaScript-Interview-Questions) 5 | - [JS interview topics](https://github.com/topics/javascript-interview-questions) 6 | - [Practice Conway's game of life][1] 7 | 8 | ### Asking questions about company 9 | - [Culture Queries][2] 10 | 11 | [1]: https://en.wikipedia.org/wiki/Conway's_Game_of_Life 12 | [2]: https://www.keyvalues.com/culture-queries 13 | -------------------------------------------------------------------------------- /javascript/functional.md: -------------------------------------------------------------------------------- 1 | Functional programming in Javascript 2 | ====================================== 3 | 4 | Currying was derived from Haskell Curry's name 5 | 6 | Some FP-foo by Chet Harrison: 7 | 8 | - https://jsbin.com/qufoka/edit?js,console (Currying in use) 9 | - http://jsbin.com/laxoba/edit?js,console (Imperative FP) 10 | 11 | -------------------------------------------------------------------------------- /javascript/miscellaneous.md: -------------------------------------------------------------------------------- 1 | # Different parts of building a JS app 2 | 3 | #### Finite State Machines 4 | - [Simplifying Complex UIs with Finite Automata - David Khourshid (JSCONF Iceland)][1] 5 | - [Simplify state with FSM - Alberta Williams][2] 6 | - [Using React and XState to build a sign in form - CSSTricks][3] 7 | 8 | 9 | [1]: https://www.youtube.com/watch?v=RqTxtOXcv8Y 10 | [2]: https://x-team.com/blog/finite-state-machines-with-react/ 11 | [3]: https://css-tricks.com/using-react-and-xstate-to-build-a-sign-in-form/ 12 | -------------------------------------------------------------------------------- /misc-tooling.md: -------------------------------------------------------------------------------- 1 | - Algolia for search on apps 2 | -------------------------------------------------------------------------------- /movies.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephrexme/knowledge/48032d608c421a6f10afb4d30c5bb247060ae845/movies.md -------------------------------------------------------------------------------- /performance.md: -------------------------------------------------------------------------------- 1 | ## Performance 2 | 3 | This video by Jake Archibald and Surma goes deep into great optimizations that can be made for web https://www.youtube.com/watch?v=TsTt7Tja30Q&feature=emb_logo 4 | 5 | 6 | - Check for memory leaks https://www.voorhoede.nl/en/blog/your-website-probably-has-a-memory-leak/ 7 | 8 | 9 | ### React Performance Profiling 10 | - 11 | - 12 | - 13 | 14 | -------------------------------------------------------------------------------- /threads-that-probably-make-no-sense-to-me-now-but-may-in-the-future/webgl-uv-shaders-gpus.md: -------------------------------------------------------------------------------- 1 | # 28-Jul-2017 2 | shshaw [10:01 PM] 3 | There’s no way to just rotate a texture in THREE, right? 4 | 5 | 6 | 7 | ----- Today July 28th, 2017 ----- 8 | mamboleoo [1:03 AM] 9 | I don't think so, you'll have to draw your texture in a canvas then rotate it 10 | 11 | 12 | visiblecode [1:35 AM] 13 | Hmm, why not? 14 | 15 | 16 | [1:37] 17 | You can apply a transformation matrix to the texture coords in a shader before using them 18 | 19 | 20 | [1:38] 21 | If you want to "bake" the rotated texture as a texture for some reason, you can render a quad with the texture on to a render buffer set up to render to another texture 22 | 23 | 24 | [1:39] 25 | But usually you shouldn't need to do that 26 | 27 | 28 | [1:41] 29 | Transforming the texture coords during rendering should work better for most cases 30 | 31 | 32 | shshaw [7:07 AM] 33 | How do you transform the texture? Didn't see anything related to that in the docs 34 | 35 | 36 | mamboleoo [7:09 AM] 37 | From what I understood of @visiblecode message, you can apply a transform on the texture via a shader 38 | 39 | 40 | [7:09] 41 | This means using this material : https://threejs.org/docs/#api/materials/ShaderMaterial 42 | 43 | 44 | nexii [7:35 AM] 45 | Guess you’d have to actually rotate the `geometry` UV coords manually (for one-off rotation). (edited) 46 | 47 | 48 | [7:37] 49 | Shader would be probably the best choice if you wanted to change rotation frequently (edited) 50 | 51 | 52 | nexii [7:42 AM] 53 | Re-rendering the texture on a quad in the GPU would be a sort of middle solution (but don’t think the memory tradeoff is generally worth it imho, plus doesn’t scale well if you need multiple unique rotations) 54 | 55 | 56 | shshaw [10:54 AM] 57 | I just needed a one-time rotation, so I did it with canvas. 58 | 59 | 60 | 61 | [10:54] 62 | Unfortunate that it’s such a pain 63 | 64 | 65 | visiblecode [12:19 PM] 66 | You'll get better visual quality rotating UV coords instead of the image 67 | 68 | 69 | shshaw [12:25 PM] 70 | Can you explain UV cords or point me to what you mean? Is that part of the geometry, or the texture? 71 | 72 | 73 | visiblecode [12:32 PM] 74 | It's derived from the geometry by your shaders 75 | 76 | 77 | 78 | visiblecode [12:38 PM] 79 | I'm sort of fuzzy on where you're starting from re: WebGL experience but the basic idea is this: 80 | 81 | 82 | [12:40] 83 | Usually, you include a per-vertex vec2d attribute in your geometry data, which is used to determine what texture pixel is supposed to be lined up with that vertex 84 | 85 | 86 | [12:42] 87 | So if you're rendering a textured quad, the top left vertex might have this attribute as (0,0), the top right (1,0), the bottom left (0,1), the bottom right (1,1) (edited) 88 | 89 | 90 | [12:44] 91 | Which would map the whole texture onto the face of the quad without additional transformation besides the quad being in perspective or whatever 92 | 93 | 94 | [12:45] 95 | If you mess with those attribute values, you can stretch, rotate, etc, the texture as it appears on the face of the quad 96 | 97 | 98 | [12:46] 99 | If you want a fixed rotation for the texture, you might bake the rotation into the values you give for that attribute from the start (edited) 100 | 101 | 102 | [12:47] 103 | But you could also apply the rotation to those coords in your vertex shader (or fragment shader) 104 | 105 | 106 | [12:51] 107 | Unlike pre-rendering the rotated texture via canvas, manipulating the texture coordinates is output-resolution-independent, and it doesn't add extra processing work 108 | 109 | 110 | visiblecode [12:57 PM] 111 | To translate this to simple THREE terms 112 | 113 | [12:57] 114 | A vec2d is a THREE.Vector2 115 | 116 | [12:58] 117 | And the attribute array is .faceVertexUvs on your geometry object 118 | 119 | 120 | [12:59] 121 | By default THREE populates that with the (0,0), (1,0) etc kind of thing I talked about 122 | 123 | 124 | shshaw [12:59 PM] 125 | Ah, okay, so it’s a property of the geometry that determines how the material is painted on that geometry. 126 | 127 | 128 | visiblecode [12:59 PM] 129 | Yes 130 | 131 | 132 | shshaw [1:00 PM] 133 | Except instead of “painted on that geometry” its “how the pixels are drawn on the screen based on the geometry”, 134 | 135 | 136 | [1:00] 137 | Right? 138 | 139 | 140 | visiblecode [1:00 PM] 141 | Kind of 142 | 143 | 144 | [1:01] 145 | Thinking of it in terms of screen space might be confusing 146 | 147 | 148 | [1:02] 149 | Better to think of the UVs as "if I took the geometry and laid it on top of the texture, where would I need to put the vertexes to get the part of the texture I want to appear on the geometry" 150 | 151 | 152 | [1:06] 153 | And that's what the GPU does, for each screen pixel it refers to the UVs from the matching part of the geometry, and then finds the corresponding point in the texture (edited) 154 | 155 | 156 | [1:06] 157 | To get the color 158 | 159 | 160 | shshaw [1:07 PM] 161 | I see. I think it makes sense 162 | 163 | 164 | visiblecode [1:10 PM] 165 | (In reality, rather than consulting the geometry for each pixel there's a per-polygon division of labor between the vertex shader and the fragment shader, but I don't think that's super important to understand yet) 166 | 167 | 168 | visiblecode [1:16 PM] 169 | One other thing to be aware of is that in THREE, .faceVertexUVs is broken up by face 170 | 171 | 172 | [1:17] 173 | So it's indexed like faceVertexUvs[material][face][vertex] 174 | 175 | 176 | [1:18] 177 | And the vertex index is per-face, it's different from the index you use for .vertices 178 | 179 | 180 | [1:19] 181 | Which is different to how you'd normally do it in raw WebGL 182 | -------------------------------------------------------------------------------- /tweets.md: -------------------------------------------------------------------------------- 1 | ## Priceles Tweets 2 | 3 | - On using base font size against fixed ratios for typography values - https://twitter.com/siddharthkp/status/1262038126794551296 4 | - Una on aspect-ratio CSS - https://twitter.com/Una/status/1260980901934137345 5 | - CSS Grids for stacking - https://twitter.com/stefanjudis/status/1221611004481720320 6 | - Breadth First Search - https://twitter.com/addyosmani/status/1221742142109966336?s=20 7 | - Tiny Helpers - https://twitter.com/sarah_edo/status/1221826231726825472?s=20 8 | - Common Memory Leaks in JS - https://twitter.com/addyosmani/status/1230195891618770945 9 | 10 | - Chunks from Array with Array.from - https://twitter.com/addyosmani/status/1242737991526776832?s=20 11 | 12 | - David's CheatSheet for Event Driven FSM - https://twitter.com/DavidKPiano/status/1245024907131531270 13 | 14 | 15 | - Generator functions in JS (Redux Saga usage) - https://twitter.com/mjackson/status/1244736662875193345 16 | 17 | - Nice illustration of HTML,CSS, and JS - https://twitter.com/StasKlymenko/status/1248199947528409088?s=20 18 | 19 | 20 | - useRefs - https://twitter.com/_pier/status/1452412652559470593 21 | -------------------------------------------------------------------------------- /web.md: -------------------------------------------------------------------------------- 1 | # Everything Web 2 | - [Self-Host Google fonts](https://google-webfonts-helper.herokuapp.com/fonts) 3 | - [Cross-origin solution for any requests](https://crossorigin.me) also set `crossorigin=anonymous` for `