We Keep Coding

How to customize Storybook's UI?

I'm trying to customize the way Storybook's UI looks and behaves, by customizing a manager.js file placed into the /.storybook folder, following their documentation :
// .storybook/manager.js
import { addons } from '#storybook/addons';
addons.setConfig({
isFullscreen: false,
showNav: true,
showPanel: true,
panelPosition: 'bottom',
enableShortcuts: true,
showToolbar: true,
theme: undefined,
selectedPanel: undefined,
initialActive: 'sidebar',
sidebar: {
showRoots: false,
collapsedRoots: ['other'],
},
toolbar: {
title: { hidden: false },
zoom: { hidden: false },
eject: { hidden: false },
copy: { hidden: false },
fullscreen: { hidden: false },
},
});
I'm changing some parameters, nothing changes on the UI. I even tried setting the theme to dark for it to be obvious, nothing happens. The server refreshes correctly, I even tried to restart it.
I'm running Storybook 6.5.14 on localhost in a react app, the dependencies "#storybook/theming": "^6.5.15" and "#storybook/addons": "^6.4.22" are installed.

I have to start Prettier each time manually as it doesn't start automatically

{
"[html]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"liveServer.settings.donotShowInfoMsg": true,
"terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
"workbench.colorTheme": "Monokai Pro",
"workbench.iconTheme": "vs-seti",
"files.autoSave": "onFocusChange",
"editor.fontSize": 18,
"editor.multiCursorModifier": "ctrlCmd",
"window.zoomLevel": 1,
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSaveMode": "modifications",
"javascript.format.placeOpenBraceOnNewLineForFunctions": true,
"prettier.arrowParens": "avoid",
"prettier.jsxSingleQuote": true,
"prettier.singleQuote": true,
"prettier.tabWidth": 4,
"prettier.useTabs": true,
"editor.formatOnSave": true
}
Default Formatter: esbenp.prettier-vscode
Format on save: clicked
View/Command Palette/Format Document With/ Prettier Code Formatter (default)
Even though I have done the proper settings as above, I have to start prettier each time when I opened vscode. CTRL+S doesnt trigger prettier at first. As soon as I set <View/Command Palette/Format Document With/ Prettier Code Formatter (default)> it starts working.
Do you know what the problem would be with it?

VS code JavaScript error syntax highlighter not working after upgrade

I have recently upgrade VS code. Now it's no longer showing the error highlights. Earlier, if I use any undefined function or variable, it used to underline it with red line.
i.e.. line number 5 on the image is not reflecting in red
Settings
{
"window.zoomLevel": 0,
"sonarlint.ls.javaHome": "C:\\\\Program Files\\\\Java\\\\jdk-12.0.1",
"javascript.updateImportsOnFileMove.enabled": "always",
"[javascript]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"explorer.confirmDelete": false,
"update.mode": "start",
"files.autoSave": "off",
"editor.autoClosingBrackets": "always",
"editor.autoClosingOvertype": "always",
"editor.autoClosingQuotes": "always",
"eslint.debug": true,
"eslint.format.enable": true,
"editor.semanticHighlighting.enabled": false,
"bracketPairColorizer.highlightActiveScope": true,
"editor.tokenColorCustomizations": null,
"typescript.tsserver.useSeparateSyntaxServer": false,
"eslint.alwaysShowStatus": true,
"workbench.colorTheme": "Visual Studio Dark",
"typescript.format.enable": false,
"typescript.format.insertSpaceAfterCommaDelimiter": false,
"typescript.format.insertSpaceAfterKeywordsInControlFlowStatements": false,
"typescript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": false,
"typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": false,
"debug.javascript.breakOnConditionalError": true,
"debug.onTaskErrors": "showErrors",
"zenMode.silentNotifications": false,
"eslint.validate": [
"javascript", "javascriptreact", "typescript", "typescriptreact"
]
}
Also have the these extensions installed

You can try configuring eslinter in React that should fix it. Here is a good tutorial about how to do it

How to get browser version and OS information shown in nightwatch console and use in code?

From above image one can see that when we start running nightwatch, in console we can see browser name, version and OS name and version.
Is there a way to get versions value and use in code just like we used to get platform as
process.platform=win32 or darwin

I got the answer from https://github.com/nightwatchjs/nightwatch/issues/2445.
module.exports = {
'Demo test GitHub': function (browser) {
console.log(browser); // this will output all the details
browser
.url('http://www.google.com') // visit the url
}
};
so browser object gives following details:
NightwatchAPI {
capabilities:
{ acceptInsecureCerts: false,
acceptSslCerts: false,
applicationCacheEnabled: false,
browserConnectionEnabled: false,
browserName: 'chrome',
chrome:
{ chromedriverVersion:
'83.0.4103.39 (ccbf011cb2d2b19b506d844400483861342c20cd-refs/branch-heads/4103#{#416})',
userDataDir:
'/var/folders/5l/mgjzx80j4pb1trj_zlqrn7cc0000gp/T/.com.google.Chrome.WEyC7u' },
cssSelectorsEnabled: true,
databaseEnabled: false,
'goog:chromeOptions': { debuggerAddress: 'localhost:51082' },
handlesAlerts: true,
hasTouchScreen: false,
javascriptEnabled: true,
locationContextEnabled: true,
mobileEmulationEnabled: false,
nativeEvents: true,
networkConnectionEnabled: false,
pageLoadStrategy: 'normal',
platform: 'Mac OS X',
proxy: {},
rotatable: false,
setWindowRect: true,
strictFileInteractability: false,
takesHeapSnapshot: true,
takesScreenshot: true,
timeouts: { implicit: 0, pageLoad: 300000, script: 30000 },
unexpectedAlertBehaviour: 'ignore',
version: '83.0.4103.116',
webStorageEnabled: true,
'webauthn:virtualAuthenticators': true,
'webdriver.remote.sessionid': '034ce20513343a06554a87cb14d45ce9' },
currentTest: [Getter],
desiredCapabilities: null,
sessionId: '034ce20513343a06554a87cb14d45ce9',
.
.
.
So if we want something like browser name, version, OS name, etc use below:
console.log(browser.capabilities.platform) //prints... Mac OS X
console.log(browser.capabilities.browserName) //prints.. chrome
console.log(browser.capabilities.version) //prints... 83.0.4103.116

Integration of 'jonblum:jquery-cropper' in Meteor

How do I add the JavaScript code in my Meteor application? This is what I want to include:
Here is the code:
$('.cropper-example-1 > img').cropper({
aspectRatio: 16 / 9,
autoCropArea: 0.65,
strict: false,
guides: false,
highlight: false,
dragCrop: false,
cropBoxMovable: false,
cropBoxResizable: false
});

How to include the jonblum:jquery-cropper package:
Run meteor add jonblum:jquery-cropper.
Run mkdir public in your project root.
Place the image you want to crop in your /public directory.
Include the image, for example:
<template name="lena">
<div class="cropper-example-lena">
<img src="/lena.jpg" alt="Lena">
</div>
</template>
Implement the Template.myTemplate.onRendered function and include the Cropper code, for instance:
if (Meteor.isClient) {
Template.lena.onRendered(function () {
$('.cropper-example-lena > img').cropper({
aspectRatio: 16 / 9,
autoCropArea: 0.65,
strict: false,
guides: false,
highlight: false,
dragCrop: false,
cropBoxMovable: false,
cropBoxResizable: false
});
});
}
Finally, include the template, e.g. {{> lena}}.
Result: