List of useful npx (NPM Package Runner) commands.
Using NPX we can execute/run node binaries without the need to install it locally or globally.
| { | |
| "_meta": { | |
| "template_version": 0 | |
| }, | |
| "fixtures": [ | |
| { | |
| "name": "startup_product", | |
| "path": "/v1/products", | |
| "method": "post", | |
| "params": { |
| // Source: https://twitter.com/calebporzio/status/1151876736931549185 | |
| <div class="flex"> | |
| <aside class="h-screen sticky top-0"> | |
| // Fixed Sidebar | |
| </aside> | |
| <main> | |
| // Content | |
| </main> |
List of useful npx (NPM Package Runner) commands.
Using NPX we can execute/run node binaries without the need to install it locally or globally.
| function RadioGroup({ onChange, name, children }) { | |
| const [state, inputProps] = useRadioGroup(name) | |
| return ( | |
| <Context.Provider value={inputProps}> | |
| {children} | |
| </Context.Provider> | |
| ) | |
| } | |
| function RadioInput(props) { |
| import { useState, useEffect } from 'react'; | |
| // Usage | |
| function App() { | |
| // Call our hook for each key that we'd like to monitor | |
| const happyPress = useKeyPress('h'); | |
| const sadPress = useKeyPress('s'); | |
| const robotPress = useKeyPress('r'); | |
| const foxPress = useKeyPress('f'); |
Paste the following code into the console panel of the DevTools window of Chrome or Firefox.
The style sheet came from (Web Scraper)[http://webscraper.io/] plugin for Chrome
It is useful for analyse a page layout and you can extend it to select preferred dom elements.
function addStyleString(str) {
var node = document.createElement('style');| const fs = require('fs-extra'); | |
| const methods = {}, priv = {}; | |
| // Private methods to do string replacement. Not optimized and cummulative trying to keep it simple. | |
| // far better options here: https://stackoverflow.com/questions/5069464/replace-multiple-strings-at-once | |
| priv.replaceObj = function(value, vars) { | |
| let obj = value; | |
| Object.keys(obj).forEach(function(item) { | |
| obj[item] = priv.replaceStr(obj[item], vars); | |
| }); | |
| return obj; |
| // prop callback | |
| class Compoennt { | |
| render() { | |
| return ( | |
| <div> | |
| <Thing onChange={(val) => { | |
| this.setState({ val1: val }) | |
| }}/> | |
| <Thing onChange={(val) => { | |
| this.setState({ val2: val }) |
| // 🔥 Node 7.6 has async/await! Here is a quick run down on how async/await works | |
| const axios = require('axios'); // promised based requests - like fetch() | |
| function getCoffee() { | |
| return new Promise(resolve => { | |
| setTimeout(() => resolve('☕'), 2000); // it takes 2 seconds to make coffee | |
| }); | |
| } |