Stuff I'm Up To

Technical Ramblings

VS Code Extensions — May 31, 2019

VS Code Extensions

I’m an Atom fan and have used it on Linux for ages. I probably still will, but our other developers tend to use VS Code because of their use of MS Windows. I thought I’d revisit VS Code and see if I can use it effectively like Atom.

First thing I needed to make sure of was that some of the Atom features I use are available in VS Code. Standard stuff like dark colour theme, ESLint, syntax highlighting, auto-completions and Emmet.

One pleasant surprise was that VS Code has Emmet built right in! The usage is a little different, keyboard shortcuts etc. but it’s native to VS Code so that’s pretty good.

Other Extensions that I’ve added to support the languages I use are:

Vetur – https://vuejs.github.io/vetur/

ESLint – https://github.com/Microsoft/vscode-eslint

Toggle Excluded Files – https://marketplace.visualstudio.com/items?itemName=eamodio.toggle-excluded-files

Bracket Pair Colorizer – https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

phpcs – https://github.com/ikappas/vscode-phpcs requires PHP CodeSniffer

PHP DocBlocker – https://github.com/neild3r/vscode-php-docblocker

FiraCode font https://github.com/tonsky/FiraCode

rest-client https://marketplace.visualstudio.com/items?itemName=humao.rest-client

Settings Sync https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync

Advertisements
Laravel Echo and Redis — March 18, 2019

Laravel Echo and Redis

The corporate app just got made a bit smarter.

In order to alert users that something has happened that they should be aware of we’ve added real time notifications. We could have polled a table for notifications, but a far smarter development is to use real time communications with socket.io.

Laravel already has these capabilities, but needs to leverage a couple of other services outside of your web server. Notably, Laravel Echo and a message broker such as Pusher or Redis. We chose Redis.

Continue reading
ESRI ArcGIS — February 21, 2019

ESRI ArcGIS

Over the past few weeks I’ve entered into the world of spacial systems and mapping. We have a couple of members of staff who look after our GIS (Geographic Information Systems) that plot all kinds of spacial data onto maps for properties, water courses, streets, etc. The data they produce is used widely through many of our services, but now we’re starting to provide more interactive online mapping for the public.

ESRI ArcGIS Online

Continue reading
Apt Version Pinning — February 7, 2019

Apt Version Pinning

Today after running some apt upgrades my Laravel development environment failed to compile because of a newer version of nodejs than I currently require.

Module build failed: ModuleBuildError: Module build failed: Error: Missing binding /home/paulb/itsm/node_modules/node-sass/vendor/linux-x64-64/binding.node
Node Sass could not find a binding for your current environment: Linux 64-bit with Node.js 10.x

Found bindings for the following environments:
  - Linux 64-bit with Node.js 8.x

This usually happens because your environment has changed since running `npm install`.
Run `npm rebuild node-sass` to download the binding for your current environment.
Continue reading
Laravel 5.5 HMR and Windows — January 15, 2019

Laravel 5.5 HMR and Windows

Using HMR in Chrome on Linux is faultless, but on Windows HMR fails to start in the browser.

Looking at the entries in the bowsers script tags they seem a bit goofy. There’s leading slashes and spaces before the script filename.

It seems this is a popular issue. We hunted around for quite a few pointers to resolve this.

https://github.com/JeffreyWay/laravel-mix/issues/1437

The only thing we changed was line 90 of Entry.js to add on the extra replace(/^\//, ''); A restart of yarn hot and a browser refresh and we were good to go. HMR and WDS show in the Chrome console as expected and changes to code are now dynamic.

Cross Origin Resource Sharing and Content Security Policy — December 4, 2018

Cross Origin Resource Sharing and Content Security Policy

Got to love having a vendor carrying out half a job… again.

Having installed a new VMWare Horizon environment for Windows 10, I thought we’d at least have Blast available via HTML  – which we don’t currently have in our Windows 7 Horizon setup.

During the install I setup a load balancer which only really handles the authentication process. This worked fine using IE or Edge, at which point I guess the vendor decided that’s enough testing and it’s considered functional. After they left I fired up my Chrome browser and found it didn’t work. So I tried Firefox with the same non-functional result.

Checking the console log in Firefox I see:

Content Security Policy: The page's settings blocked the loading of a resource at wss://192.168.61.12:22443/d/36BC344E-DAD5-4EA5-A44C-12456F74432D/?vauth=LaQJrs2RppeiZGX9gOtj75vekprtuEDcgD2C6tba ("default-src").

A trawl of VMWare documentation results in: https://docs.vmware.com/en/VMware-Horizon-7/7.6/horizon-security/GUID-FD679D1D-E037-4EDF-A96F-F0CD85FFE724.html

Now all I have to do is translate that to Nginx so I can put that into the config.

Editing my ssl/snippets.conf file and changing the CSP header, I added the missing parts for wss: and blob: to end up with:

add_header Content-Security-Policy "default-src 'self' wss:; script-src 'self' 'unsafe-inline' 'unsafe-eval'; img-src 'self'; style-src 'self' 'unsafe-inline'; font-src 'self'; frame-src https://horizon.domain.tld blob:; object-src 'none' blob:; connect-src 'self' wss:; child-src 'self' blob:;";

A reload of Nginx and a refresh/reload on the browser and I’m into the Horizon Desktop!

References

https://docs.vmware.com/en/VMware-Horizon-7/7.6/horizon-security/GUID-94DAC7B8-70A3-4A91-8E70-2B2591B82866.html

https://www.owasp.org/index.php/Content_Security_Policy_Cheat_Sheet

Opening another Window with electron-vue — October 9, 2018

Opening another Window with electron-vue

Having entered the world of Electron and mashing it together with Vue.js using electron-vue I needed to figure out how to open another window from Electron and still have vue active within it and better yet, still have the hot module reloading active in that new window whilst developing it.

It was whilst trawling the electron-vue github issue page that I came across a golden nugget of code that answered the very question for me.

https://github.com/SimulatedGREG/electron-vue/issues/401#issuecomment-330656658

Quoted:

First of all, you need to disable mode: 'history' in your vue-router, check in vue-router docs

Then do the following:

src/main/index.js example

ipc.on('showChart', function (e, data) {
  const modalPath = process.env.NODE_ENV === 'development'
    ? 'http://localhost:9080/#/showChart'
    : `file://${__dirname}/index.html#showChart`
  let win = new BrowserWindow({ width: 400, height: 320, webPreferences: {webSecurity: false} })
  win.on('close', function () { win = null })
  win.loadURL(modalPath)
})

In your router, use the exactly path to your url

src/renderer/router.js example

{
  path: '/showChart',
  name: 'showChart',
  component: require('your-router'),
},

 

When this isn’t this and becomes that — October 2, 2018

When this isn’t this and becomes that

I recently tried to assist a colleague with an issue in JavaScript involving an undefined variable within a Vue.js app.

Now I have encountered this issue several times and never really gotten to the crux of the matter other than I know it’s because the context of this changes, depending on where you are in your code.

It was during this tongue twisting exercise that he found a useful document that gives an outline more elegantly than I could phrase.

https://gist.github.com/JacobBennett/7b32b4914311c0ac0f28a1fdc411b9a7

Since arrow functions provide a lexical this value, the this inside our function() refers to the window instead of our Vue object which breaks our current implementation! When attempting to get this.item, we will actually be looking at window.item which is currently undefined.

electron-vue —
React and Webpack – Project Template — September 22, 2018

React and Webpack – Project Template

I’ve begun looking at building a project using React and followed some online sources to begin with. But then I fell into outdated material that related to babel. So I could only take many of the tutorials so far before having to update the construction to suit @babel/core v7.

It seems it’s very easy to install different versions of babel and it’s components and then discover things won’t compile. The error message I was getting:

Error: Plugin/Preset files are not allowed to export objects, only functions.

It doesn’t exactly make clear that what you have probably done is installed a preset  from an older version of babel and your babel core doesn’t like it.

Continue reading

Laravel API and Bootstrap Form Validation — August 13, 2018

Laravel API and Bootstrap Form Validation

This caused me some grief today. I spent the day adding validation rules into my Laravel resource controller and rather foolishly set HTML5 validation parameters on my Vue.js / Bootstrap 4 form component.

Why foolishly?

Well if you follow the Bootstrap 4 JavaScript function to call form.checkValidity() you’re actually calling the HTML5 built in function. Not a Bootstrap function as I originally thought.

When Laravel validation failed at the resource controller and it pushes back 422 (Unprocessable Entity) and a json error object:

{"message":"The given data was invalid.","errors":{"name":["The name field is required."]}}

I thought Bootstrap was seeing the Laravel validation errors and flagging up fields as not valid. So I could not understand why one of my fields didn’t show as invalid when according to Laravel it was!

What I was actually doing was HTML5 validation and ignoring my Laravel validation response all together. With the API it’s best NOT to try to use both HTML5 and Laravel validation. You’ll get a confusing UX that uses a mix of browser error messages/popups and Bootstrap CSS error handling.

Make sure you add novalidate to your form tag – this ensures HTML5 browser validation is prevented at the form level.

To resolve the Laravel validation part I just use the Laravel json error object and DON’T USE checkValidity(), my axios .catch(error) processes the Laravel errors by calling showErrors(error.response.data)

 this.axios.post('/api/v1/mycall/',
   this.data
 ).then(() => {
   // That worked out well, do something.
 }).catch(error => {
   this.showErrors(error.response.data)
 })

 showErrors: function (error) {
  Object.keys(error.errors).forEach((field) => {
    let input = document.getElementById(field)
    input.classList.add('is-invalid') // Bootstrap invalid form input
  })
 }

This iterates through the json errors and adds the class is-invalid to the fields that Laravel tells me are invalid. This triggers Bootstraps CSS to show the field with a red border and unhides the form-control subsequent/child div that has a class of invalid-feedback

References

https://getbootstrap.com/docs/4.1/components/forms/#validation

When using Vue.js and Laravels json response the actual usage is closer to the server-side examples:

https://getbootstrap.com/docs/4.1/components/forms/#server-side

Linting — August 6, 2018

Linting

No, this isn’t about taking the fluff from your belly button – but you’re close.

https://eslint.org/

Linting your written code is a method of ensuring that it meets consistent syntax and style guidelines. Eg. ensuring you indent function blocks by 4 spaces and not tabs, placing curly braces {} on new lines, having spaces following function names and parameters etc.

JavaScript, being a dynamic and loosely-typed language, is especially prone to developer error. Without the benefit of a compilation process, JavaScript code is typically executed in order to find syntax or other errors. Linting tools like ESLint allow developers to discover problems with their JavaScript code without executing it.

ESLint is a great way of ensuring my (ECMA)JavaScript coding style is consistent and correct. Using it within atom.io is a great way to keep my work tidy. Just add the ESLint package and we’re set to track and tidy my .js files.

But I want the same rules for my .vue files. I found this really handy: https://alligator.io/vuejs/vue-eslint-plugin/

Add the atom package linter-eslint then go to its settings button.

Find the option “List of scopes to run ESLint on…” and add onto it:

text.html.vue

So in my case it becomes:

source.js, source.jsx, source.js.jsx, source.babel, source.js-semantic, text.html.vue