Eric Bidelman has documented some of the common workflows possible with headless Chrome over in https://developers.google.com/web/updates/2017/04/headless-chrome.
If you're looking at this in 2016 and beyond, I strongly recommend investigating real headless Chrome: https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md
Windows and Mac users might find using Justin Ribeiro's Docker setup useful here while full support for these platforms is being worked out.
These rules are adopted from the AngularJS commit conventions.
If you use server rendering, keep in mind that neither useLayoutEffect nor useEffect can run until the JavaScript is downloaded.
You might see a warning if you try to useLayoutEffect on the server. Here's two common ways to fix it.
If this effect isn't important for first render (i.e. if the UI still looks valid before it runs), then useEffect instead.
function MyComponent() {
| // this is the background code... | |
| // listen for our browerAction to be clicked | |
| chrome.browserAction.onClicked.addListener(function (tab) { | |
| // for the current tab, inject the "inject.js" file & execute it | |
| chrome.tabs.executeScript(tab.ib, { | |
| file: 'inject.js' | |
| }); | |
| }); |
I am moving this gist to a github repo so more people can contribute to it. Also, it makes it easier for me to version control.
Please go to - https://github.com/praveenpuglia/shadow-dom-in-depth for latest version of this document. Also, if you find the document useful, please shower your love, go ⭐️ it. :)
Heads Up! It's all about the V1 Spec.
In a nutshell, Shadow DOM enables local scoping for HTML & CSS.
| 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]) |
| // Created by Baye Wayly on 2020/3/13. | |
| // Copyright © 2020 Baye. All rights reserved. | |
| import SwiftUI | |
| struct Measure<Content: View>: View { | |
| @State var cost: TimeInterval = 0 | |
| var content: Content | |
| init(@ViewBuilder builder: () -> Content) { |
This entire guide is based on an old version of Homebrew/Node and no longer applies. It was only ever intended to fix a specific error message which has since been fixed. I've kept it here for historical purposes, but it should no longer be used. Homebrew maintainers have fixed things and the options mentioned don't exist and won't work.
I still believe it is better to manually install npm separately since having a generic package manager maintain another package manager is a bad idea, but the instructions below don't explain how to do that.
Installing node through Homebrew can cause problems with npm for globally installed packages. To fix it quickly, use the solution below. An explanation is also included at the end of this document.
| import { useLayoutEffect, useCallback, useState } from 'react' | |
| export const useRect = (ref) => { | |
| const [rect, setRect] = useState(getRect(ref ? ref.current : null)) | |
| const handleResize = useCallback(() => { | |
| if (!ref.current) { | |
| return | |
| } |
This vanilla ES6 function async allows code to yield (i.e. await) the asynchronous result of any Promise within. The usage is almost identical to ES7's async/await keywords.
async/await control flow is promising because it allows the programmer to reason linearly about complex asynchronous code. It also has the benefit of unifying traditionally disparate synchronous and asynchronous error handling code into one try/catch block.
This is expository code for the purpose of learning ES6. It is not 100% robust. If you want to use this style of code in the real world you might want to explore a well-tested library like co, task.js or use async/await with Babel. Also take a look at the official async/await draft section on desugaring.
