DEV Community: Dave Myburgh

Setting up StandardJS in VSCode for React work

Dave Myburgh — Thu, 11 Jun 2020 15:58:22 +0000

I've started learning React - so far it's really cool - and being a bit of a stickler for code styling, I wanted to use something that would keep my code consistent and in line with my current company's style.

The question that really got me into this was the age-old one of "Semi-colons or no semi-colons at the end of a line?". I will NOT get into which is better, because I have better things in my life to do than debate that :) Anyway, devs at my company recommended StandardJS (on Github), so here's how I integrated that into VSCode. Note that the Prettier extension is similar to this, and can apparently be configured to work like StandardJS. However, I never tried that myself.

In my project's folder, I used npm to install the StandardJS package along with ESLint:



npm install --save-dev standard eslint-plugin-html

Once that was done, I added the following code to package.json:



  "standard.options": {
    "ignore": [
      "node_modules/**"
    ],
    "plugins": [
      "html"
    ],
    "parser": "babel-eslint"
  }

I installed the following extension for VSCode: https://marketplace.visualstudio.com/items?itemName=chenxsan.vscode-standardjs and then edited my settings.json file (click the gear icon in the bottom left corner of VSCode, select Settings, then click the little page icon in the top right corner to open settings.json).

I added the following code to the end of my file:



    // StandardJS settings.
    // ------------------------------
    // Disable default validator first.
    "javascript.format.enable": false,
    "javascript.validate.enable": false,
    "standard.enable": true,
    "standard.autoFixOnSave": true,
    "standard.validate": [
        "javascriptreact"
    ]

I had already set a file association for javascriptreact earlier, but I will provide it here, just in case you don't have that yet. This is also in settings.json. If you already have a files.associations section, just add the *.js line to it, and don't forget the comma on the preceding line; no trailing comma on the last line:



    "files.associations": {
        "*.js": "javascriptreact"
    },

Now, when you're editing .js files in a React project, you should see Javascript React in the status bar of VSCode, in the bottom right corner, with Javascript Standard Style next to it. If you just see Javascript for the first part, click on it and select Javascript React.

One thing to note: I already had an ESLint extension added to VSCode, so you might need that too. In case you do, this is the one I have https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint.

That's it! Enjoy the nicely formatted code (with no trailing semi-colons) :)

Integrate Ceros experiences with Drupal 8

Dave Myburgh — Mon, 20 Apr 2020 15:42:53 +0000

I worked on a project recently where the client had some interactive pages created in Ceros. They call them "Experiences", so we'll just stick to that naming for Ceros content. Take a look at their examples for some of the cool interactions you can get. It kinda reminds me of the Flash days, except this is HTML5, so it's better :)

The default way to have the Ceros experiences appear on your website is to use their embed code, which consists of a wrapper div with a bunch of inline styles and attributes, an iframe, and a Javascript file import. As long as your page doesn't do anything to mess with the dimensions of the wrapper div and iframe, it should just work.

Here's an example embed code (I've formatted it so it's easier to read - it's usually one long line):

<div 
  style='
    position: relative;
    width: auto;
    padding: 0 0 174.84%;
    height: 0;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: 0;
    border: 0 none
  ' 
  id="experience-5c93c4d6c1129" 
  data-aspectRatio="0.5719" 
  data-mobile-aspectRatio="0.2716">

  <iframe 
    allowfullscreen 
    src='//view.ceros.com/ceros-educate/adaptive-layouts-build-along-1?heightOverride=2238&mobileHeightOverride=2945' 
    style='
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: 0;
      padding: 0;
      border: 0 none;
      height: 1px;
      width: 1px;
      min-height: 100%;
      min-width: 100%
    ' 
    frameborder='0' 
    class='ceros-experience' 
    scrolling='no'>
  </iframe>
</div>
<script type="text/javascript" src="//view.ceros.com/scroll-proxy.min.js"></script>

Note the padding inline style on the wrapper div - the bottom padding amount will vary depending on the aspect ratio and size of the iframe. Without it, your iframe will not be the right size and weird things start to happen with content that should be below the iframe.

A CMS like Drupal is a slightly different beast, though. Sure, you can create a text format that implements no filtering and throw the embed code into a textarea that uses that filter. That will work just fine in many cases e.g. if you're the only one working on your site. But, if you have multiple people adding content to your site, security becomes an issue, and not stripping out potentially bad things - like scripts - is generally not a good idea. You could create a text format that specifically only allows the elements in the embed code, but the Allowed HTML filter will ALWAYS strip out inline styles, so you lose that critical bottom padding.

Turns out, Ceros has an oEmbed option too. Once you have Drupal configured, you simply provide the url to the Ceros experience using the https:\view.ceros.com[account][page-url] format, and it generates the embed code for you. No security issues and nothing important gets stripped out.

How to configure Drupal for oEmbed

Install the URL Embed module (will install Embed module too).
Go to /admin/config/content/formats and create a new text format for Ceros content. You could also add it to an existing format if you prefer.
Enable the filters "Display embedded URLs" and "Convert URLs to URL embeds".
Ensure that "Convert URLs to URL embeds" runs before "Display embedded URLs".
If the "Limit allowed HTML tags" filter is enabled, add to the Allowed HTML tags.
If you have CKEditor enabled for the text format, URL Embed provides a button (it has a music note and a video icon on it) that you can add to your toolbar to make embedding urls easier. It will open up a modal to put your url in, then load it and display it in CKEditor directly.
I created a separate field just for Ceros content, but you can easily just embed directly into existing fields via CKEditor. The field is a text (formatted) field and uses the special Ceros text format as the default. Note: I had to put a space in the text field to make it actually keep the Ceros text format as the default format.

That's basically it. If you put a Ceros url into the field and save the node, you should see the spinner from Ceros appear and eventually your content will load. Ensure that you see the bottom padding amount is showing up on the wrapper div and you should be all set.

Simple command-line trick to help manage multiple projects

Dave Myburgh — Tue, 14 Jan 2020 16:29:24 +0000

I work on multiple projects during a regular work day - usually 2-4, but could be as many as 8. Each project has a different main Git branch, theme folder, build command to compile said theme, and a couple of other settings (I'm a Drupal developer, so several settings are Drupal-specific, but the concept I'm going to explain can apply to any type of project). Keeping track of each of these as I switch between projects was a pain in the neck, so I came up with an old-school solution.

tl;dr: Create a dot-file in your project root folder that contains the relevant info and display it when you change to that project.

In the olden days of Norton Commander and BBS systems, you could create a file in your directories that contained descriptions for files in that directory. I think the file was named descript.ion or something like that. Anyway, using that idea, I created a .readme file in each project's root folder. The file contains a standard structure so that it's easy for me to find the info I need. Here's an example:

Git main branch : dev
Config import   : vcs
Drupal version  : 8.7.11
Code folder     : docroot/profiles/myproject/
Theme folder    : docroot/profiles/myproject/themes/myproject_theme
Theme scripts   : npm run exec

Don't forget to exclude this file in your .gitignore file. I guess you could leave it there for other developers in your team, as long as there is nothing sensitive in there - depending on what your root folder is, this file might get exposed at some point.

This alone is pretty handy, but I had to type cat .readme each time to see this info, and if I can save some typing, I will. Each project already had a bash alias that changes directory to it, so all I did was add cat .readme to that alias:

alias mp="cd ~/Sites/myproject && ls -al && cat .readme"

The ls command is helpful to me to know exactly where I am - how many times do you cd into a directory and immediately type ls?? In fact, I integrated the ls into the cd command and removed it from the alias above:

alias l="ls -al"

function cd () {
  builtin cd "$1"
  l
}

The above aliases go into ~/.bash_profile or ~/.bashrc depending on your OS. I only work on Mac and Linux, so I don't know if you can do something similar in Windows' command line.

That's it. Hopefully you find this as useful as I do. If anyone has a different solution let me know in the comments below.