Another Web Development Blog
Hello all,
Starting from Chrome 61+, modules syntax has been steady implemented in Chrome. Today (Chrome 65), I felt like refractoring one of my extensions to benefit of it.
First, how can you split the code into separate modules? You can check out this commit of mine, long story short, imagine you have similar code in your options and popup files.
Hello everybody,
You may have noticed while monitoring a touchmove event that the e.target value represents the element where the touch event began.
While on mousemove the target is always the element under the mouse cursor, on touch it seems to behave differently.
In order to retrieve that element, we can only identify it from the touch event coordinates as it follows:
getTouchMouseTargetElement(e) {
if (e.touches) {
return document.elementFromPoint(e.touches[0].pageX, e.touches[0].pageY);
}
return e.target;
}e.touches is a TouchList. It lists all the Touch objects for touch points that are currently in contact with the touch surface, regardless of whether or not they’ve changed or what their target element was at touchstart time.
If the event has no TouchList defined, the e.target can be taken as a fallback (in case of mouse events).
This way we implemented a single function that works with both mouse and touch events.
Hello all,
Making Material Design Lite (MDL) work with Vue.js is fairly easy.
After adding MDL javascript, the CSS framework parse the DOM in order to enable events listeners required to provide certain behaviors (example: input validations). Since our Vue components are added after MDL has scanned the DOM, we should re-run a scan on each element we are adding asynchronously.
Hello everybody,
You made need to put the browser’s focus on a scrollable element, just after rendering.
Using the element.focus() is the good way to go but there a couple of tricks you should be aware of.
Hello,
This error happens when you try to run a Webpack v1 config file with Webpack v2+.
In order to fix it change the attribute name of resolve.packageMains to resolve.mainFields inside your webpack configuration file.
Documentation:
Webpack v1 resolve.packageMains documentation
Webpack v2 resolve.mainFields documentation
Simply run in your terminal:
npm rebuild node-sassHello all,
If you encounter this build error:
Error: Failed to pass Gatekeeper: : Error: Command failed: spctl –assess –type execute –verbose –ignore-cache –no-cache
You can still build your application disabling Gatekeeper temporarily running this command:
sudo spctl --master-disable[source](https://github.com/electron-userland/electron-osx-sign/issues/83)
Have a great day!
Hello all,
I may not be the only one to have wasted hours trying to figure out why the coverage report looked like this:
The reason was subtle:
Hello all,
A quick snippet that can prove to be useful:
<div onWheel={ event => {
if (event.nativeEvent.wheelDelta > 0) {
console.log('scroll up');
} else {
console.log('scroll down');
}
}}
>
scroll on me!
</div>
onWheel synthetic event returns an event object having an attribute named nativeEvent containing the original event information. wheelDelta is used to detect the direction even if there is no effective scroll (overflow:hidden).
I have reproduced this error using karma-remap-istanbul and karma-coverage to show the source maps of my Webpack compiled build.
The error is talkative, it tells that the script can’t create a folder in `/` system root folder. Of course it’s supposed to create those report folders starting from a relative path. To enable it you should add the following option in your webpack.config.js file under the group output.
devtoolModuleFilenameTemplate: '[resource-path]'This way we change the naming policy of the source-maps ad we won’t encounter permissions errors.
