[{"_id":"stencil-check-for-use-of-named-slot","title":"StencilJS - Check for Use of Named Slot","subtitle":"","description":"How to determine if a named slot is being used with code in a Stencil web component. ","body":"

\n Within a Stencil web component, you may sometimes need to determine, with code, whether or not a named slot is being used. \n I had this need recently, for example, in a layout component that had to render a unique DOM and use unique CSS class names \n depending on the named slots that were being used. In this post, I'm sharing how to do it. \n

\n\n

You need, first of all, to import the Element decorator within the @stencil/core imports as shown below:

\n\nimport { Component, Element, Host, h} from '@stencil/core';\n\n

Now, you can use the Element decorator within your code to gain access to the host element, like this:

\n\n@Element() host: HTMLElement;\n\n

Declare the slots that you want to check for using private variables:

\n\n\nprivate panelLeftSlot: HTMLElement;\nprivate panelRightSlot: HTMLElement;\n\n\n\n

\n Now, in the componentLoad() lifecycle method, you can attempt to populate the representative slot variables. \n If the user does not inject the named slots when they use your component, the respective variables will simply remain undefined, which you \n can test for.\n

\n\n

componentWillLoad() {\n    this.panelLeftSlot =  this.host.querySelector("[slot='panel-left']")\n    this.panelRightSlot =  this.host.querySelector("[slot='panel-right']")\n}

\n\n

\n To illustrate this in full, let's look at the code for a component that uses the Bootstrap grid system to render a layout. \n The DOM structure and CSS classes are to be rendered differently, depending on the given slots.\n

\n\n

import { Component, Element, Host, h} from '@stencil/core';\n\n@Component({\n    tag: 'glass-layout',\n    shadow: false,\n})\nexport class GlassLayout {\n\n    @Element() host: HTMLElement;\n\n    private panelLeftSlot: HTMLElement;\n    private panelRightSlot: HTMLElement;\n\n    private panelLeftCSS: string;\n    private panelCenterCSS: string;\n    private panelRightCSS: string;\n\n    componentWillLoad() {\n\n        this.panelLeftSlot =  this.host.querySelector("[slot='panel-left']")\n        this.panelRightSlot =  this.host.querySelector("[slot='panel-right']")\n\n        if(this.panelLeftSlot && this.panelRightSlot) {\n            this.panelLeftCSS = 'col-md-3'\n            this.panelCenterCSS = 'col-md-6'\n            this.panelRightCSS = 'col-md-3'\n        } else {\n            this.panelLeftCSS = 'col-md-4'\n            this.panelCenterCSS = 'col-md-8'\n            this.panelRightCSS = 'col-md-4'\n        }\n\n    }\n\n    render() {\n\n        return (\n            <Host>\n                <slot name="header" />\n                <main class="flex-shrink-0">\n                    <div class="container">\n                        {this.panelLeftSlot || this.panelRightSlot\n                        ? \n                            <div class="row">\n                                {this.panelLeftSlot ? <div class={this.panelLeftCSS}><slot name="panel-left" /></div> : []}\n                                <div class={this.panelCenterCSS}><slot/></div>\n                                {this.panelRightSlot ? <div class={this.panelRightCSS}><slot name="panel-right" /></div> : []}\n                            </div>\n                        :\n                            <slot/>\n                        }\n                    </div>\n                </main>\n                <slot name="footer" />\n            </Host>\n        )\n\n    }\n}\n

\n\n

Now, here's an example that uses all of the named slots available...

\n\n

<glass-layout>\n    <div slot="header" style="background-color: red">HEADER</div>\n    <!--\n        START: MAIN CONTENT\n        Main panel is not actually a named slot. Any elements without a named slot will just go in the \n        default, unnamed slot...\n    -->\n    <h1 class="mt-5 display-4">HELLO WORLD!</h1>\n    <p>Paragraph One</p>\n    <p>Paragraph Two</p>\n    <!--\n        END: MAIN CONTENT\n    -->\n    <div slot="panel-left" style="background-color: purple; height:100%">PANEL LEFT</div>\n    <div slot="panel-right" style="background-color: blue; height:100%">PANEL RIGHT</div>\n    <div slot="footer" style="background-color: green">FOOTER</div>\n</glass-layout>\n

\n\n

$\"Stencil$

\n\n

Here's an example that uses only the default unnamed slot and the slot named panel-right. Notice the difference in the rendered result that follows.

\n\n

$\"Stencil$

\n\n

That's it. I hope I saved you some time. Happy coding!

","layoutName":"SidebarRight","path":["blog"],"thumbnail":"https://s3.us-east-2.amazonaws.com/codyburleson.com/images/logo-stencil.svg","ogImage":"","menus":["blog"],"created":"2021-10-09T16:29:02.230Z","features":["syntax highlighter"],"topics":["software-dev"],"modified":"2021-10-11T17:00:48.634Z"},{"_id":"node-script-replace-text-using-counter","title":"Node Script - Replace Text Using Counter","subtitle":"","description":"Node.js script that replaces all instances of a given substring found in a text file with an incrementing number.","body":"

Here's a Node.js script that replaces all instances of a given substring found in a text file with an incrementing number. You can use the node script itself or just steal the technique for use in your own JavaScript code.

\n\n

This script reads a source text file and replaces all instances of a given substring found in the file with a number that is incremented for each instance of the substring replaced. So, take the following string, for example, and suppose that the substring, 000, is what we wish to replace:

\n\n

Hello 000 world 000 nodejs 000 is 000 really 000 useful 000!

\n\n

Given an INCREMENT of 5, the string could become:

\n\n

Hello 5 world 10 nodejs 15 is 20 really 25 useful 30!

\n\n

With a PREFIX value of \"A_\" and suffix value of \"_B\", it could become:

\n\n

Hello A_5_B world A_10_B nodejs A_15_B is A_20_B really A_25_B useful A_30_B !

\n\n

// replaceTextUsingCounter.js\nconst fs = require('fs')\n\nconst SOURCE_FILE = '../my-app/input.json'\nconst DEST_FILE = '../my-app/output.json'\nconst REPLACE_REGEX = /replace-me/g // This defines, in REGEX, the substring to find.\nconst PREFIX = '' // Value will be prefixed to the counter when substring is replaced; use '' for no prefix\nconst SUFFIX = '' // Value will be appended to the counter when substring is replaced; use '' for no suffix\nconst START_COUNT = 0 // The number to start your counter on\nconst INCREMENT = 5; // How much to increment for each substring found\n\n// Read text file for content to perform search and replace operation on...\nconst fileContents = fs.readFileSync(SOURCE_FILE).toString()\n\n// Initialize a counter with a given starting count...\nlet counter = START_COUNT;\n\n// Call string replace function on the content.\n// For each instance of the given search substring found,\n// fire a function that returns what to replace the string segment with...\nconst modifiedContent = fileContents.replace(REPLACE_REGEX, function() {\n    let replacementString = PREFIX + counter + SUFFIX; // the first substring replaced should have starting count\n    counter = counter + INCREMENT; // successive substrings replaced will be incremented\n    return replacementString\n});\n\nfs.writeFile(DEST_FILE, modifiedContent, function (err) {\n    if (err) { return console.log(err); }\n    console.log('COMPLETE! Check destination file: ' + DEST_FILE);\n});

\n\nTo use this script, place it in your project, install the fs dependency with npm install fs --save-dev, update variables in the file as per your need, and then run with node replaceTextUsingCounter.js.","layoutName":"SidebarRight","path":["blog"],"thumbnail":"https://s3.us-east-2.amazonaws.com/codyburleson.com/images/logo-javascript.svg","ogImage":"","menus":["blog"],"created":"2021-10-02T15:24:49.730Z","features":["syntax highlighter"],"modified":"2022-08-27T16:21:04.101Z","topics":["software-dev"]},{"_id":"hcl-dxp-renew-ssl-cert","title":"HCL DX - Renew Your Docker Dev SSL Certificate","subtitle":"","description":"The SSL certificate in your HCL Digital Experience platform on Docker can expire, prohibiting you from completing certain development tasks. Here's how to renew the certificate so you can get back to business.","body":"

When using the official Docker images for developing on the HCL Digital Experience platform (formerly IBM WebSphere Portal), you may encounter issues related to certificate expiration. \n You might notice these errors when attempting to execute a ConfigEngine task, for example. In this post, I'll demonstate the kind of error you're likely to see on the command line and \n then the steps to fix the issue by renewing your SSL certificate in the WebSphere Admin Console.

\n\n

Console Errors

\n\n

Following are two example error stack traces that I produced when trying to execute a ConfigEngine task while the certificate was expired in my local development instance of HCL DXP on Docker.

\n\n

[wplc-discard-wsadmin-session] [2021-09-25 16:18:40.134] CWPKI0312E: The certificate with subject DN CN=localhost, OU=dockerCell, OU=dockerNode, O=IBM, C=US has an end date 4/26/21 11:37 PM which is no longer valid.\n    com.ibm.websphere.management.exception.ConnectorException: ADMC0016E: The system cannot create a SOAP connector to connect to host localhost at port 10033.\n            at com.ibm.websphere.management.AdminClientFactory.createAdminClientPrivileged(AdminClientFactory.java:635)\n            at com.ibm.websphere.management.AdminClientFactory.access$000(AdminClientFactory.java:127)\n            at com.ibm.websphere.management.AdminClientFactory$1.run(AdminClientFactory.java:210)\n            at com.ibm.ws.security.util.AccessController.doPrivileged(AccessController.java:63)\n            at com.ibm.websphere.management.AdminClientFactory.createAdminClient(AdminClientFactory.java:206)\n            at com.ibm.wplc.deploy.tasks.AbstractBaseAdminTask.executeTask(AbstractBaseAdminTask.java:492)\n            at com.ibm.wplc.deploy.tasks.AbstractBaseWsAdminWrapperTask.executeTask(AbstractBaseWsAdminWrapperTask.java:395)\n            at com.ibm.wplc.deploy.tasks.AbstractBaseAdminTask.execute(AbstractBaseAdminTask.java:177)

\n\n

Here's another part of the stack trace. I post these so that web search engines will index these errors so that you might find this solution when searching.

\n\n

Caused by: com.ibm.websphere.management.exception.ConnectorNotAvailableException: [SOAPException: faultCode=SOAP-ENV:Client; msg=Error opening socket: java.io.IOException: Exception during sslSocket.startHandshake: com.ibm.jsse2.util.h: PKIX path validation failed: java.security.cert.CertPathValidatorException: validity check failed; targetException=java.lang.IllegalArgumentException: Error opening socket: java.io.IOException: Exception during sslSocket.startHandshake: com.ibm.jsse2.util.h: PKIX path validation failed: java.security.cert.CertPathValidatorException: validity check failed]\n    at com.ibm.ws.management.connector.soap.SOAPConnectorClient.reconnect(SOAPConnectorClient.java:439)\n    at com.ibm.ws.management.connector.soap.SOAPConnectorClient.(SOAPConnectorClient.java:238)\n    ... 74 more\nCaused by: [SOAPException: faultCode=SOAP-ENV:Client; msg=Error opening socket: java.io.IOException: Exception during sslSocket.startHandshake: com.ibm.jsse2.util.h: PKIX path validation failed: java.security.cert.CertPathValidatorException: validity check failed; targetException=java.lang.IllegalArgumentException: Error opening socket: java.io.IOException: Exception during sslSocket.startHandshake: com.ibm.jsse2.util.h: PKIX path validation failed: java.security.cert.CertPathValidatorException: validity check failed]\n    at org.apache.soap.transport.http.SOAPHTTPConnection.send(SOAPHTTPConnection.java:475)\n    at org.apache.soap.rpc.Call.WASinvoke(Call.java:510)\n    at com.ibm.ws.management.connector.soap.SOAPConnectorClient$4.run(SOAPConnectorClient.java:397)\n    at com.ibm.ws.security.util.AccessController.doPrivileged(AccessController.java:118)\n    at com.ibm.ws.management.connector.soap.SOAPConnectorClient.reconnect(SOAPConnectorClient.java:382)\n    ... 75 more\n/opt/HCL/ConfigEngine/config/includes/default_cfg.xml:143: Unable to create remote administration client:  ADMC0016E: The system cannot create a SOAP connector to connect to host localhost at port 10033.\n    com.ibm.wplc.deploy.tasks.AbstractBaseAdminTask.executeTask(AbstractBaseAdminTask.java:496)\n    com.ibm.wplc.deploy.tasks.AbstractBaseWsAdminWrapperTask.executeTask(AbstractBaseWsAdminWrapperTask.java:395)\n    com.ibm.wplc.deploy.tasks.AbstractBaseAdminTask.execute(AbstractBaseAdminTask.java:177)\n    org.apache.tools.ant.UnknownElement.execute(UnknownElement.java:275)

\n\n

Renewing the SSL Certificate in the WebSphere Application Server

\n\n

The solution is quick and simple. First, I summarize it for you below and then I illustrate the steps with screenshots.

\n\n

Fix Procedure Summary

\n\n

Access the WAS console in your web browser and login (typically at: https://localhost:10041/ibm/console/login.do?action=secure)
Click Security > SSL certificate and key management.
Under Related Items, click Key stores and certificates.
Click the appropriate
to which you want to add the new certificate.\n\t\t
- Note: Only self-signed certificates and chained certificates signed with root certificates from the root keystore can be renewed. This is how the official images from HCL are setup for demos and development, though.
Under Additional Properties, click Personal certificates to list the personal certificates.
Select a personal certificate from the list.
Click the Renew button.
Click Apply then OK.

\n\n

Fix Procedure Illustrated

\n\n

Click Security (1), and SSL certificate and key management (2). Then, under Related Items, click Key stores and certificates(3).

\n\n $\"\"/$ \n\n

Click the appropriate to which you want to add the new certificate (4).

\n\n

Blog