All libraries have subtle rules that you have to follow for them to work well. Often these are implied and undocumented rules that you have to learn as you go. This is an attempt to document the rules of React renders. Ideally a type system could enforce it.
A number of methods in React are assumed to be "pure".
On classes that's the constructor, getDerivedStateFromProps, shouldComponentUpdate and render.
| upload(files) { | |
| const config = { | |
| onUploadProgress: function(progressEvent) { | |
| var percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total) | |
| console.log(percentCompleted) | |
| } | |
| } | |
| let data = new FormData() | |
| data.append('file', files[0]) |
| import R from 'ramda'; | |
| const capitalize = | |
| R.converge( | |
| R.concat, | |
| [ | |
| R.compose( | |
| R.toUpper, | |
| R.head | |
| ), |
| /***************************************************************** | |
| * onMessage from the extension or tab (a content script) | |
| *****************************************************************/ | |
| chrome.runtime.onMessage.addListener( | |
| function(request, sender, sendResponse) { | |
| if (request.cmd == "any command") { | |
| sendResponse({ result: "any response from background" }); | |
| } else { | |
| sendResponse({ result: "error", message: `Invalid 'cmd'` }); | |
| } |
Just migrated it from Codepen.io to markdown. Credit goes to David Conner.
| Working with DOM | Working with JS | Working With Functions |
|---|---|---|
| Accessing Dom Elements | Add/Remove Array Item | Add Default Arguments to Function |
| Grab Children/Parent Node(s) | Add/Remove Object Properties | Throttle/Debounce Functions |
| Create DOM Elements | Conditionals |
| // paste in your console | |
| speechSynthesis.onvoiceschanged = function() { | |
| var msg = new SpeechSynthesisUtterance(); | |
| msg.voice = this.getVoices().filter(v => v.name == 'Cellos')[0]; | |
| msg.text = Object.keys(window).join(' '); | |
| this.speak(msg); | |
| }; |
Inspired by dannyfritz/commit-message-emoji
See also gitmoji.
| Commit type | Emoji |
|---|---|
| Initial commit | 🎉 :tada: |
| Version tag | 🔖 :bookmark: |
| New feature | ✨ :sparkles: |
| Bugfix | 🐛 :bug: |
| function mapValues(obj, fn) { | |
| return Object.keys(obj).reduce((result, key) => { | |
| result[key] = fn(obj[key], key); | |
| return result; | |
| }, {}); | |
| } | |
| function pick(obj, fn) { | |
| return Object.keys(obj).reduce((result, key) => { | |
| if (fn(obj[key])) { |
