lloydjatkinson

I update this page over time as I find new courses and resources. If you have any suggestions, please let me know. I ensure that I only link to high-quality content. This page focusses on JavaScript, obviously. I have another page on .NET related courses planned.

Why did I make this list?

I've experienced a variety of code bases and have seen both great and terrible code. As a software developer, I want to make sure I'm using the best tools and techniques for my job. I want other developers to have this mindset also. Bad code can be written with anything, but in particular I've been facing a multitude of problems, bugs, spaghetti code, and general misuse of particular frameworks and libraries in the combined JavaScript, Node, and frontend space.

In short, I have grown frustrated with low quality, unmaintainable code. I made this page as a way to share what I consider to be excellent resources to help other developers write better code across the spectrum - frameworks, styling, testing, build tools,

lloydjatkinson

'use strict';

// This is a demonstration of writing clean Javascript - by adopting a component based approach.
// No jQuery, no poorly structured spaghetti code, composed of single purpose functions, has no hard coded selectors and works in IE10+.
// This is written in ES5. If build tools were used I would write this in ES7+.
// If Vue.js was used as well then a good chunk of the code wouldn't be necessary (and no need to attach to window).
window.passwordConfirmationComponent = {
    selectors: {},

    updatePasswordRuleFeedback: function (validation) {

lloydjatkinson

import axios from 'axios';

const rocketEndpoint = 'https://api.spacexdata.com/v3/rockets';
const upcomingLaunchesEndpoint = 'https://api.spacexdata.com/v3/launches/upcoming';

const getRockets = async () => {
    try {
        return {
            success: true,
            data: (await axios.get(rocketEndpoint)).data

lloydjatkinson

const trimText = (input = '', maximumLength = 80) => {
    const exceedsMaximum = input.length >= maximumLength;
    return {
        exceedsMaximum,
        text: exceedsMaximum ? `${ input.substr(0, input.lastIndexOf(' ', maximumLength)) }...` : input,
    }
};

export default trimText;

lloydjatkinson

<template>
  <span class="fa-icon" :class="icon"></span>
</template>

<script>
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'BreadcrumbIcon',

  props: {

lloydjatkinson

> lloydatkinson.net@0.0.1 cli-test
> tsx ./tools/cli.ts

create-article
> Creates a new markdown file in the drafts directory with an APA cased title and URL safe filename

ARGUMENTS:
  <name> - a string

OPTIONS:

lloydjatkinson

Background

I feel incredibly frustrated, demotivated, and totally defeated. I decided to write this down as I needed to vent and I genuinely feel upset at the thought of explaining this whole saga multiple times as a few people have asked. This week at work I found out in a few months time I will be moving to another team within the wider programme that we are all working under.

I will summarise the story to keep it brief and prevent it spanning dozens of pages. I skipped a lot of details, each part of the story in reality could be expanded into several pages of how to absolutely ruin productivity and grind teams out of existence.

I joined this organisation in 2020 just as the pandemic struck with the promise of greenfield development, pushing for creating good quality software, all with a focus on "creating software we can be proud of". In reality the first year and a half was the only time any of these values were actively pursued. With multiple key developers and other people in leadership positions

lloydjatkinson

https://timdeschryver.dev/blog/how-i-have-set-up-my-new-windows-development-environment-in-2022#git-defaults
https://www.techwatching.dev/posts/automate-developer-machine
https://www.jamestharpe.com/automated-developer-environment/
https://dev.to/dmehro/automate-development-environment-setup-via-powershell-20pf
https://edi.wang/post/2018/12/21/automate-windows-10-developer-machine-setup
https://octopus.com/blog/automate-developer-machine-setup-with-chocolatey
https://www.codeaperture.io/2017/11/28/automated-developer-machine-setup-part-1-introduction-and-dism/
https://dmehro.com/automate-development-environment-via-powershell/
https://evandontje.com/2013/04/09/automate-windows-developer-machine-setup/
http://www.robertbird.co.uk/devops/building-my-developer-machine-from-a-script

lloydjatkinson

export const MobileNavigationMenu = ({ targetSelector }: { targetSelector: string }) => {
    if (!document) {
        // We're in SSR/SSG. Render fallback content of a menu button in the closed stated.
        return <MenuButton isOpen={ false } />;
    }

    const menu = document.querySelector(targetSelector);
    if (!menu) return null;

    const [isOpen, setIsOpen] = useState(false);

lloydjatkinson

<script lang="ts">
import { defineComponent } from 'vue';

import { mapActions, mapStores } from 'pinia';
import { useTodoStore } from '../store';

export default defineComponent({
    name: 'TodoList',

    computed: {