DEV Community: William Cairns

Research Proposal: Do developers feel threatened by AI code generation tools?

William Cairns — Wed, 10 May 2023 09:10:15 +0000

I am currently doing a Master of Science in Software Engineering. As part of my Master research I am investigating: Do developers feel threatened by AI code generation tools?

If you are a software developer, I would like to request you to complete the following survey on SurveyMonkey:

Research Proposal: Do developers feel threatened by AI code generation tools?
https://lnkd.in/guX3eKfk

The research objectives are:
We want to know if the frequent use of code generation and completion tools by developers is positively associated with improved efficiency and productivity, as well as higher job satisfaction, compared to those who rarely use such tools.

All data will be stored anonymously.

More details in the survey itself.

I have been fascinated by code generation for a long time. I have written a number of small static code generation tools in the past. But the advent of AI Code generation has made a marked difference in how productivity is affected by code generation.

Moving to create-react-app ver 5.0.0

William Cairns — Sun, 26 Dec 2021 14:48:44 +0000

I hate it when someone changes the ways things have been done, and then does not give enough information to move to the new way :(. Create React App has just done this with the upgrade to version 5.0.0

If you try create-react-app with an older version 4 installation you get the very helpful message:

You are runningcreate-react-app` 4.0.3, which is behind the latest release (5.0.0).

We no longer support global installation of Create React App.

Please remove any global installs with one of the following commands:

npm uninstall -g create-react-app yarn ...`

So I naturally went ahead and did the uninstall :(

`npm uninstall -g create-react-app

up to date, audited 1 package in 488ms

found 0 vulnerabilities`

It didn't uninstall the old version, it just did an audit instead. (I assume there are dependencies installed on the version 4 library.

I tried to reinstall create-react-app and flushing the cache - both with and without the -force option. I could not get a new project created.

Finally I had to force install the latest version
`npm install create-react-app@latest
npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.

added 67 packages, and audited 70 packages in 9s

4 packages are looking for funding
run npm fund for details

3 high severity vulnerabilities

To address all issues (including breaking changes), run:
npm audit fix --force

Run npm audit for details.`

And finally I could successfully do a create-react-app.

PS. Yes, I did do a fix on the vulnerabilities.

To Github Owners: Do you like minor fixes? #Discuss

William Cairns — Fri, 05 Nov 2021 09:16:12 +0000

Over the last month or so I have been playing with creating Discord bots for Dungeons and Dragons using Javascript. For this I have been reviewing lot of packages that have Dungeons and Dragons functions and a lot of repos using Discord.js for ideas and understanding the best way to do things.

Over the last month I have raised 4 Pull Requests that fixed spelling or grammar or material issues in the readme.md files. Of these 4 pull requests - 3 have been merged and the other ignored (I don't think the repo owner is active on Github anymore).

My question to Repo owners - Do you like/want pull requests that correct minor issues like this?

Really Simple Svelte Routing

William Cairns — Sun, 10 Oct 2021 09:37:28 +0000

Routing is a key feature on any web page, routing is used to display content to the user based on selections the user makes, for example when selecting a menu option. There are many routing components available but sometimes a very simple routing option is needed and the routing components with all their features may be overkill.
This tutorial will show you a very simple way to add routing into a Svelte single page app. The functionality for the routing is all in one file. In this tutorial we will place it in the main page, but it could easily be extracted out of the main page into it’s own component.

Create Project

To start with lets create a simple Svelte project using one of the base templates. We will be changing all the content on the page but this is the easiest way to get a Svelte project started and running.
Create Svelte project from a simple Svelte template

npx degit sveltejs/template svelte-spa-router

Install dependencies

npm i

Start the application

npm run dev

Page Layout

Our page layout is going to be a simple two column layout with the menu in the left hand column and the right hand column will be used to display the content for the menu option chosen. A CSS framework could be used for the columns, but for this tutorial we will stay with custom CSS classes instead of creating a dependency on a third part library.
In the App.svelte page add the following styles. Svelte allows styles to be applied per component.

<style>
.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}
</style>

Now that we have the styles for a 2 column layout lets create the html for the page. Initially the 2 columns will just display simple headers, but we will replace these later as we build our routes.

Replace all the HTML

<main>
    <div class="row">
        <div class="column">
            <h1>Menu</h1>
        </div>
        <div class="column">
            <h1>Content</h1>
        </div>
    </div>
</main>

If you are running the development server you should now see the two column display with the headers.

Create a Menu

Let us add a menu in the left hand column using anchor links, replace the text in the first column with our menu

            <h1>Menu</h1>
            <a href="#home">Home</a>
            <a href="#red">Red Page</a>
            <a href="#green">Green Page</a>

This menu uses Location hashes to define the page to be display. When the user click s a menu option the page URL will update to include the hash value. We will then get the hash value from the URL, and based on the selected menu option we will display the relevant page
Get the menu selection
To get the menu selection we need to get the page from the current page.

<script>
let page = document.location.hash;
</script>

This will extract the page hash from the URL, but we also need to get the page whenever it changes such as when the user selects a menu option

window.onpopstate = function(event) {
        page = document.location.hash;
    };

Now the current location hash is in our page variable both when the user accesses our page with an existing hash value (such as from a bookmark) and when the user clicks one of the menu options.

Add the Routing

Based on the page variable we now want to change the content in the right hand pane based on the page that was selected. Replace the Content column contents with this script

{#if page==="#home"}
    Home Page
{:else if page === "#red"}
    Red page
{:else if page === "#green"}
    Green page
{:else}
    404: Page not Found
{/if}

In the else section we can choose to show whatever page we want to show. In the example above we show an error page, we could have easily shown the home page, maybe even passing a property through to indicate to the user that the request ed page does not exist
Now when you click on the menu options the content on the right will change to display the selected content. At the moment the content is just a simple text string but could be replaced by another component.
Creating the Red Page
To show that routing can be triggered from anywhere we can add a hash link on any page and the routing will still pick it up.
Create a new component called red.svelte. Add the following to the component

<div>
    <h1>This is the Red page</h1>
    <a href=”#green”>Change to Green Page</a>
</div>

<style>
div {
    background: red;
    color: white;
}
</style>

Now replace the “Red page” text in the main page with (remember to import the red page into the file).
Now choosing red from the menu will diaply the red page content, and from the red page selecting the option to change to the green page will display the green page, as though the green menu option was selected.

Source code available on github: https://github.com/cairnswm/ReallySimpleSvelteRouting

Clean Code : Functions

William Cairns — Sat, 12 Dec 2020 19:05:17 +0000

I think every developer should read the book Clean Code by Robert Martin. The book gives great guidance for writing high-quality, well-tested, and maintainable code.

An often quote piece of advice is to keep functions as small as possible. My recollection is that Clean Code suggested functions should not be more than 20 lines long. a 20 line function is a good basis to work from but, clean code gives guidance, it does not prescribe rules.

Oftimes the readability of code is decreased through having too many small functions. In these cases, another suggested rule should take preference: a method should do one thing, do only it and do it well.

An area I often make a long function is in simple PHP scripts. A PHP script is usually readable by scanning from top to bottom. Breaking it into functions would make it harder to understand.

Take guidance as a suggested best practice and evaluate the current scenario before blindly following it.