Jekyll2023-08-24T12:54:28+00:00/feed.xmlCraig (is) WayneA little github pages experimentCraig WayneHow to run a Pipeline for Merge Requests Only2020-06-08T00:00:00+00:002020-06-08T00:00:00+00:00/gitlab/2020/06/08/gitlab-pipeline-merge-request-only<p>Your job should look like this</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>test:
stage: test
script:
- echo "Running this pipeline only for merge requests"
only:
- merge_requests
</code></pre></div></div>Craig WayneYour job should look like thisCompile scss Files2020-06-06T00:00:00+00:002020-06-06T00:00:00+00:00/npm/scripts/compile/scss/2020/06/06/compile-scss<p>refer to https://gist.github.com/craigiswayne/8d72ad807fd7d00af568eaa5f280cec8</p>
<h1 id="how-to-setup-npm-and-scss--sass">How to Setup npm and scss \ sass</h1>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npm install node-sass --save-dev
mkdir -p src/styles
touch src/styles/styles.scss
</code></pre></div></div>
<p>In your generated package.json add the following to your <strong>scripts</strong> entry</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>"scripts": {
"compile:sass": "node-sass src/styles -o dist/styles --source-comments=false --source-map=true --output-style=compressed --error-bell",
"watch:sass": "npm run compile:sass -- --watch",
"watch": "npm run watch:sass"
}
</code></pre></div></div>
<p>Then to get up and running, just do the following in your command line \ terminal</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npm run compile:sass
npm run watch:sass
</code></pre></div></div>
<p>If you wish to compile just one file</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>"scripts": {
"compile:sass": "node-sass input-file.css output-file.css"
}
</code></pre></div></div>Craig Waynerefer to https://gist.github.com/craigiswayne/8d72ad807fd7d00af568eaa5f280cec8Linting Styles2020-06-06T00:00:00+00:002020-06-06T00:00:00+00:00/npm/scripts/maintenance/2020/06/06/style-lint<p>Managing and maintaining stylesheets can become daunting especially for large files.</p>
<p>The following is a script i use to lint my stylesheets.</p>
<p>This helps maintain an uniform coding standard across my stylesheets.</p>
<h3 id="installation">Installation</h3>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npm install --save-dev stylelint stylelint-config-standard
</code></pre></div></div>
<p>This will install the node package <code class="language-plaintext highlighter-rouge">stylelint</code> for running the actual lint check.</p>
<p>Additionally to get you started, the <code class="language-plaintext highlighter-rouge">stylelint-config-standard</code> is installed which is a set of rules with which the stylelint uses.</p>
<h3 id="configuration">Configuration</h3>
<p>Now that you’ve installed the necessary packages, you’ll want to configure you project to reference these packakges</p>
<p>These next steps will create your own lint config for your project</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>touch .stylelintrc.json
</code></pre></div></div>
<p>This will create an empty file called <code class="language-plaintext highlighter-rouge">.stylelintrc.json</code>. This file will be used when deciding on what rules to check against when running the lint.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>echo '{
"extends": "stylelint-config-standard"
}' > .stylelintrc.json
</code></pre></div></div>
<p>This will add the following text to this newly created file</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>{
"extends": "stylelint-config-standard",
"rules": {
"selector-pseudo-element-no-unknown": [true, {
"ignorePseudoElements": ["ng-deep"]
}]
}
}
</code></pre></div></div>
<p>Since we don’t have any rules yet, it’s helpful to inherit a set of rules from somewhere to get started.</p>
<p>This text basically states that your own rules should inherit from the <code class="language-plaintext highlighter-rouge">stylelint-config-standard</code> we installed earlier.</p>
<p>Everything you’ve read up until here is taken from <a href="https://github.com/stylelint/stylelint/blob/HEAD/docs/user-guide/get-started.md">Stylelint GitHub Documentation</a>.</p>
<p>At this point we can run the following script to run lint checks on our <code class="language-plaintext highlighter-rouge">*.css</code> files</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>node_modules/.bin/stylelint "**/*.css"
</code></pre></div></div>
<p>But that’s not really ideal…</p>
<h3 id="creating-the-script-alias">Creating the script alias</h3>
<p>Now that you’ve installed and configured <code class="language-plaintext highlighter-rouge">stylelint</code>, we’ll want an easy to reference way to run our lint checks</p>
<p>In your <code class="language-plaintext highlighter-rouge">package.json</code>, add this new config to the <code class="language-plaintext highlighter-rouge">scripts</code></p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>"scripts": {
"lint": "stylelint '**/*.css'"
}
</code></pre></div></div>
<p>Now you can simply run</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npm run lint
</code></pre></div></div>
<h4 id="references">References</h4>
<ol>
<li><a href="https://github.com/stylelint/stylelint/blob/HEAD/docs/user-guide/get-started.md">Stylelint Documentation</a></li>
</ol>Craig WayneManaging and maintaining stylesheets can become daunting especially for large files.Copy files after npm install2019-11-18T00:00:00+00:002019-11-18T00:00:00+00:00/javascript/npm/scripts/2019/11/18/copy-files-after-npm-install<p>The example below shows you how to copy bootstrap files to another folder within your project.</p>
<p>Things to note:</p>
<ol>
<li>The library <strong>**WILL CREATE DIRECTORIES**</strong> for you</li>
<li>It will output to the console straight after you run <code class="language-plaintext highlighter-rouge">npm i</code></li>
<li>The library <strong>**WILL NOT**</strong> run after installing a specific package</li>
<li><strong>**DOES NOT**</strong> remove files if you update the search strings</li>
</ol>
<hr />
<h3 id="step-1-install-copy-files-from-to-package">STEP 1: install <code class="language-plaintext highlighter-rouge">copy-files-from-to</code> package</h3>
<div class="language-shell highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npm i <span class="nt">-D</span> copy-files-from-to
</code></pre></div></div>
<h3 id="step-2-configure-packagejson">STEP 2: configure <code class="language-plaintext highlighter-rouge">package.json</code></h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{</span>
<span class="dl">"</span><span class="s2">scripts</span><span class="dl">"</span><span class="p">:</span> <span class="p">{</span>
<span class="dl">"</span><span class="s2">postinstall</span><span class="dl">"</span><span class="p">:</span> <span class="dl">"</span><span class="s2">copy-files-from-to</span><span class="dl">"</span>
<span class="p">},</span>
<span class="dl">"</span><span class="s2">copyFiles</span><span class="dl">"</span><span class="p">:[</span>
<span class="p">{</span>
<span class="dl">"</span><span class="s2">from</span><span class="dl">"</span><span class="p">:</span> <span class="dl">"</span><span class="s2">node_modules/bootstrap/dist/css/*</span><span class="dl">"</span><span class="p">,</span>
<span class="dl">"</span><span class="s2">to</span><span class="dl">"</span><span class="p">:</span> <span class="dl">"</span><span class="s2">assets/vendor/bootstrap/css/</span><span class="dl">"</span>
<span class="p">}</span>
<span class="p">]</span>
<span class="p">}</span>
</code></pre></div></div>
<h3 id="step-3-install-packages">STEP 3: install packages</h3>
<div class="language-shell highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npm i
</code></pre></div></div>
<blockquote>
<p>See Package Page for more info:
https://www.npmjs.com/package/copy-files-from-to</p>
</blockquote>Craig WayneThe example below shows you how to copy bootstrap files to another folder within your project.Testing using npm and Lighthouse CLI2019-11-18T00:00:00+00:002019-11-18T00:00:00+00:00/npm/lighthouse/audit/scripts/2019/11/18/npm-lighthouse-cli<h3 id="install-lighthouse-cli-package">Install Lighthouse CLI package</h3>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npm i -D lighthouse-ci
</code></pre></div></div>
<h3 id="update-packagejson">Update <code class="language-plaintext highlighter-rouge">package.json</code></h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{</span>
<span class="dl">"</span><span class="s2">scripts</span><span class="dl">"</span><span class="p">:</span> <span class="p">{</span>
<span class="dl">"</span><span class="s2">test-lighthouse-mobile</span><span class="dl">"</span><span class="p">:</span> <span class="dl">"</span><span class="s2">lighthouse-ci $1 --budget-path=budget.json --chrome-flags='--headless --allow-insecure-localhost --ignore-certificate-errors' --score=75 --performance=75 --accessibility=75 --best-practices=75 --seo=75 --pwa=75</span><span class="dl">"</span><span class="p">,</span>
<span class="dl">"</span><span class="s2">test-lighthouse-desktop</span><span class="dl">"</span><span class="p">:</span> <span class="dl">"</span><span class="s2">lighthouse-ci $1 --budget-path=budget.json --chrome-flags='--headless --allow-insecure-localhost --ignore-certificate-errors' --emulated-form-factor=desktop --score=75 --performance=75 --accessibility=75 --best-practices=75 --seo=75 --pwa=75</span><span class="dl">"</span><span class="p">,</span>
<span class="dl">"</span><span class="s2">verbose-test-lighthouse-mobile</span><span class="dl">"</span><span class="p">:</span> <span class="dl">"</span><span class="s2">lighthouse $1 --quiet --no-enable-error-reporting --budget-path=budget.json --save-assets=false --chrome-flags='--headless --allow-insecure-localhost --ignore-certificate-errors'</span><span class="dl">"</span><span class="p">,</span>
<span class="dl">"</span><span class="s2">verbose-test-lighthouse-desktop</span><span class="dl">"</span><span class="p">:</span> <span class="dl">"</span><span class="s2">lighthouse $1 --quiet --no-enable-error-reporting --budget-path=budget.json --save-assets=false --chrome-flags='--headless --allow-insecure-localhost --ignore-certificate-errors' --emulated-form-factor=desktop</span><span class="dl">"</span><span class="p">,</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>Craig WayneInstall Lighthouse CLI package npm i -D lighthouse-ciPatch from git diff2019-09-16T00:00:00+00:002019-09-16T00:00:00+00:00/javascript/maintenance/housekeeping/2019/09/16/git-patch<p>Create a patch file from your git diff</p>
<h2 id="tldr">TLDR;</h2>
<pre><code class="language-git">git diff --no-prefix > my.patch
git reset --hard
patch -p0 < my.patch
</code></pre>
<hr />
<h3 id="step-1-make-changes">Step 1: Make Changes</h3>
<p>make changes to your files</p>
<h3 id="step-2-verify-your-changes">Step 2: Verify your changes</h3>
<p>Make sure that the changes you’ve made are showing in the git diff</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git status
git diff
</code></pre></div></div>
<h3 id="step-3-create-the-patch">Step 3: Create the patch</h3>
<p>This will create a patch for ALL the changes in the <code class="language-plaintext highlighter-rouge">git diff</code> output</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git diff <span class="nt">--no-prefix</span> <span class="o">></span> my.patch
</code></pre></div></div>
<h3 id="step-4">Step 4:</h3>
<p>Reset the files to their original state.</p>
<p>We do this so that we can verify our patch works with a fresh code base.</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git reset <span class="nt">--hard</span>
</code></pre></div></div>
<h3 id="step-5-apply-your-patch">Step 5: Apply your patch</h3>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>patch <span class="nt">-p0</span> < my.patch
</code></pre></div></div>Craig WayneCreate a patch file from your git diffGit Squash Commits2019-09-02T00:00:00+00:002019-09-02T00:00:00+00:00/git/2019/09/02/git-squash-commits<h2 id="steps">Steps:</h2>
<ol>
<li>Choose starting commit / the number of commits you want to combine</li>
<li>You can run <code class="language-plaintext highlighter-rouge">git log --oneline</code> to see all commits in a short version</li>
<li><code class="language-plaintext highlighter-rouge">git rebase --interative $valueFromAbove</code></li>
<li>Commits will be shown in the order: Oldest First</li>
<li>Change the word <strong>pick</strong> to <strong>s</strong> so that those commits can get squashed</li>
<li>Next will show the editor message, enter in your new message</li>
<li>Push your git changes</li>
</ol>
<h2 id="examples">Examples</h2>
<p>Squash the last 3 commits</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git rebase --interactive HEAD~3
git push --force-with-lease
</code></pre></div></div>
<p>Squash all commits <strong>AFTER</strong> <code class="language-plaintext highlighter-rouge">$commitHash</code> till now</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git rebase --interactive $commitHash
</code></pre></div></div>
<hr />
<h4 id="to-squash-everything-just-do">To squash everything just do…</h4>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git reset $(git commit-tree HEAD^{tree} -m "Initial commit.")
</code></pre></div></div>
<h3 id="references">References:</h3>
<ol>
<li>https://www.internalpointers.com/post/squash-commits-into-one-git</li>
</ol>Craig WayneSteps: Choose starting commit / the number of commits you want to combine You can run git log --oneline to see all commits in a short version git rebase --interative $valueFromAbove Commits will be shown in the order: Oldest First Change the word pick to s so that those commits can get squashed Next will show the editor message, enter in your new message Push your git changesTranspile Typescript to Javascript2019-08-08T00:00:00+00:002019-08-08T00:00:00+00:00/typescript/javascript/node/npm/2019/08/08/typescript-transpiler-node<p>This snippet will allow you to transpile (convert) typescript code into valid ES2015 code</p>
<h3 id="terminal--command-line">terminal / command line</h3>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>mkdir -p ./assets/scripts;
touch ./assets/scripts/scripts.ts;
npm install typescript --save-dev
</code></pre></div></div>
<h3 id="packagejson">package.json</h3>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>scripts:{
"ts": "tsc ./assets/scripts/scripts.ts --outDir ./dist",
}
</code></pre></div></div>
<h2 id="using-babel">Using Babel</h2>
<div class="language-shell highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npm <span class="nb">install</span> <span class="nt">--save-dev</span> @babel/cli @babel/plugin-proposal-class-properties @babel/plugin-transform-spread
<span class="nb">touch </span>babel.config.json
<span class="nb">touch </span>babel.config.dev.json
<span class="nb">echo</span> <span class="s1">'{
"presets": ["@babel/preset-env"],
"plugins": [
"@babel/plugin-proposal-class-properties",
"@babel/plugin-transform-spread"
],
"comments": false
}'</span> <span class="o">></span> babel.config.json
<span class="nb">echo</span> <span class="s1">'{
"extends": "./babel.config.json",
"comments": true,
"sourceMaps": "inline"
}'</span> <span class="o">></span> babel.config.dev.json
</code></pre></div></div>
<div class="language-json highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{</span><span class="w">
</span><span class="nl">"scripts"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w">
</span><span class="nl">"compile:js"</span><span class="p">:</span><span class="w"> </span><span class="s2">"babel scripts.js -o dist/scripts.js"</span><span class="p">,</span><span class="w">
</span><span class="nl">"compile:js:dev"</span><span class="p">:</span><span class="w"> </span><span class="s2">"babel --config-file ./babel.config.dev.json -o dist/scripts.js scripts.js"</span><span class="w">
</span><span class="p">}</span><span class="w">
</span><span class="p">}</span><span class="w">
</span></code></pre></div></div>Craig WayneThis snippet will allow you to transpile (convert) typescript code into valid ES2015 codeJavascript Maintenance2019-07-30T00:00:00+00:002019-07-30T00:00:00+00:00/javascript/maintenance/housekeeping/2019/07/30/js-maintenance<p>see: https://gist.github.com/craigiswayne/62ec315e91a885417d87a4801d8c705e</p>
<p>Managing undocumented and convoluted front-end angular applications is a nightmare as many of you know…</p>
<p>However this document will serve to help those tasked with this management.</p>
<p>tsconfig.json changes</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>{
"compilerOptions": {
"noUnusedLocals": true,
"noUnusedParameters": true
}
}
</code></pre></div></div>
<p>This above snippet will prevent the use of unused variables, libraries and parameters</p>
<p><br /></p>
<hr />
<p><br /></p>
<h2 id="dotnet-angular-lint-intergration">DotNet Angular Lint intergration</h2>
<p>To maintain coding standards for everyone, you can integrate <code class="language-plaintext highlighter-rouge">npm lint</code> tests so that when your dotnet project publishes, an <code class="language-plaintext highlighter-rouge">npm lint</code> is run</p>
<p>in your <code class="language-plaintext highlighter-rouge">*.csproj</code> file</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
<Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
<Exec WorkingDirectory="$(SpaRoot)" Command="npm run lint" /> <!----- ADD THIS LINE AFTER npm install runs -->
</Target>
</code></pre></div></div>
<hr />
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npm i -D eslint
touch .eslintrc.json
touch .eslintignore
</code></pre></div></div>
<p>in package.json</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>{
"scripts": {
"lint:js": "eslint -c ./.eslintrc.json"
}
}
</code></pre></div></div>Craig Waynesee: https://gist.github.com/craigiswayne/62ec315e91a885417d87a4801d8c705eTypescript Maps2019-07-30T00:00:00+00:002019-07-30T00:00:00+00:00/2019/07/30/typescript-maps<h2 id="typescript">typescript</h2>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>export class TypeScriptMapType {
method1 = new Map<string, boolean>();
method2: Map<string, boolean> = new Map([
["Checkbox 3", true],
["Checkbox 4", true]
]);
constructor(){
this.method1.set("Checkbox 1", true);
this.method1.set("Checkbox 2", false);
}
}
</code></pre></div></div>
<h2 id="html">html</h2>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><div *ngFor="let cb of this.method1 | keyvalue">
<input type="checkbox" [checked]="cb.value" />
<label></label>
</div>
<div *ngFor="let cb of this.method2 | keyvalue">
<input type="checkbox" [checked]="cb.value" />
<label></label>
</div>
</code></pre></div></div>Craig Waynetypescript ``` export class TypeScriptMapType {