Forem: Allan N Jeremy

How to retry failed steps in GitHub Action Workflows

Allan N Jeremy — Wed, 07 Dec 2022 09:41:54 +0000

Sometimes things can go wrong in your GitHub Action workflow step(s) and you may want to retry the step(s). This article will cover 2 ways to approach the retrying of steps.

Pre-requisites

Git (should be installed in your path)
GitHub account - we'll need this to use GitHub actions

Initial setup

In order to follow along, here are the steps you can take to setup your GitHub actions workflow.

Initialize your git repository

In your terminal, run git init to create an empty git repository or skip this step if you already have an existing git repository.

Create workflow file

GitHub workflow files are usually .yaml/.yml files that contain a series of jobs and steps to be executed by GitHub actions. These files often reside in .github/workflows. If the directories do not exist, go ahead and create them. Create a file retry.yml in .github/workflows. For now, the file can contain the following:

name: "Retry action using retry step"
on:
    # This action is called when this is pushed to github
    push:
    # This action can be manually triggered
    workflow_call:
jobs:
    # This name is up to you
    retry-job:
        runs-on: "ubuntu-latest"
        name: My Job
        steps:
            - name: Checkout repository
              uses: actions/checkout@v3

            - name: Print
              run: |
                echo 'Hello'

Testing your workflow

You can test your GitHub Action workflow by pushing your changes to GitHub and going to the actions tab of the repository or you can choose to test locally using act.

Retrying failed steps

Approach 1: Using the retry-step action

By using the using the retry-step action, we can retry any failed shell commands. If our step or series of steps are shell commands then we can use the retry-step action to retry them.

If however you'd like to try retry a step that is using another action, then the retry-step action will NOT work for you. In that case, you may want to try the alternative steps mentioned below.

Modify your action file to contain the following:

name: "Retry action using retry step"
on:
    # This action is called when this is pushed to github
    push:
    # This action can be manually triggered
    workflow_call:
jobs:
    # This name is up to you
    retry-job:
        runs-on: "ubuntu-latest"
        name: My Job
        steps:
            - name: Checkout repository
              uses: actions/checkout@v3


            - name: Use the reusable workflow
              # Use the retry action
              uses: nick-fields/retry@v2
              with:
                max_attempts: 3
                retry_on: error
                timeout_seconds: 5
                # You can specify the shell commands you want to retry here
                command: |
                    echo 'some command that would potentially fail'

Approach 2: Duplicate steps

If you are trying to retry steps that use other actions, the retry-step action may not get the job done. In such a case, you can still retry steps by retrying steps conditionally depending on whether or not a step failed.

GitHub provides us with two main additional attributes in our steps:

continue-on-error - Setting this to true means that the even if the current step fails, the job will continue on to the next one (by default failure stops a job's running).
steps.{id}.outcome - where {id} is an id you add to the steps you want to retry. This can be used to tell whether a step failed or not, potential values include 'failure' and 'success'.
if - allows us to conditionally run a step

name: "Retry action using retry step"
on:
    # This action is called when this is pushed to GitHub
    push:
    # This action can be manually triggered
    workflow_call:
jobs:
    # This name is up to you
    retry-job:
        runs-on: "ubuntu-latest"
        name: My Job
        steps:
            - name: Checkout repository
              uses: actions/checkout@v3

            - name: Some action that can fail
              # You need to specify an id to be able to tell what the status of this action was
              id: myStepId1
              # This needs to be true to proceed to the next step of failure
              continue-on-error: true
              uses: actions/someaction

            # Duplicate of the step that might fail ~ manual retry
            - name: Some action that can fail
              id: myStepId2
              # Only run this step if step 1 fails. It knows that step one failed because we specified an `id` for the first step
              if: steps.myStepId1.outcome == 'failure'
              # This needs to be true to proceed to the next step of failure
              continue-on-error: true
              uses: actions/someaction

Bonus: Retrying multiple steps

If you want to retry multiple steps at once, then you can use composite actions to group the steps you want to retry and then use the duplicate steps approach mentioned above.

Conclusion

How do you decide which approach to use?

If you are retrying a step that is only shell commands then you can use the retry step action.
If you are retrying a step that needs to use another action, then you can use duplication of steps with conditional running to manually retry the steps.

This Dot Labs is a JavaScript consulting firm that enables companies to build and improve their digital technologies with confidence. For expert architectural guidance, training, consulting, engineering leadership, and development services in React, Angular, Vue, Web Components, GraphQL, Node, Bazel, Polymer, and more, visit thisdot.co

Using PartyTown to improve the performance of VueJS Applications

Allan N Jeremy — Fri, 14 Oct 2022 07:13:07 +0000

What is partytown?

Partytown is a JavaScript library that helps relocate resource intensive scripts (often third-party scripts) into a web worker and off the main thread. This speeds up our site by freeing up the main thread to run our code.

Note:
Partytown does not get bundled with the rest of your site's JavaScript. Instead, it intentionally stays separate from your code so that it can run within a webworker.

Using partytown with VueJS

To use partytown with VueJS, you need to find where your third-party scripts are inserted into your page. Typically, this would mean in the index.html page of your vue application.

Create the VueJS application

If you already have an existing VueJS application, you can skip this step. If you are simply looking to test out partytown, you can do so by creating a new VueJS project.

Create a new vue project by running [and following the steps after that].

npm init vue@latest

You should have an index.html in the generated project. In a new VueJS project, this is generally where we would add global third-party scripts. This file is also going to be where we add partytown

Add third-party scripts

If you already have third-party scripts such as Google Analytics or any other tracking/measurement scripts in your project, you can skip this step. Otherwise, you can set up third-party scripts.

Install partytown

To install partytyown into your application, all you need is to use npm or yarn where your package.json is of your project.

npm install @builder.io/partytown

or (if using yarn)

yarn add @builder.io/partytown

Setup PartyTown

Setup partytown (vite)

Available as of Partytown 0.3.6

Import the partytownVite plugin from @builder.io/partytown/utils into your vite.config.js config file. Next, add partytownVite(opts) to the plugins option.

The Vite plugin will copy Partytown lib directory to the given destination, which must be an absolute file path. The copying will happen at the time of the writeBundle() hook. When in dev mode, the Partytown lib files will be served using the Vite Dev Server.

Below is an example of using a Vite config to copy the Partytown lib to a dist build directory:

// vite.config.js
import path from "path";
import { partytownVite } from "@builder.io/partytown/utils";

export default ({ command }) => ({
  build: {
    plugins: [
      partytownVite({
        dest: path.join(__dirname, "dist", "~partytown"),
      }),
    ],
  },
});

Setup partytown (the long version)

After installing partytown, you need to modify your package.json to setup partytown. You do this by copying the partytown lib files into a directory we can reference from within our VueJS application.

Add the partytown script and change the relevant build/preview scripts to run the partytown script before your actual build/preview script.

// In package.json
"scripts": {
  // ...
  "dev": "partytown && vite",
  "build": "partytown && vite build",
  "preview": "partytown && vite preview --port 4173",
  "partytown": "partytown copylib public/~partytown"
}

You should see a public/~partytown directory in your project now. Inside this directory, we have a partytown.js file. This is the file we will be referencing in our html page.

It is also worth noting that as of the time of writing this article, there is no official integration for partytown with native VueJS applications. There are however other vue tool integrations such as the Nuxt partytown integration that make this process a lot faster. There are also approaches to setting up for different build tools such as vite and webpack

Using partytown with third-party scripts

Before we can use partytown with our thirdparty scripts, we need to include it into our page.
Open the index.html page and add your partytown script.

<!-- ./index.html -->
<head>
  <script src="public/~partytown/partytown"></script>
</head>

In order to use partytown to move the execution of your third-party scripts from the main thread to a web worker (and improve the performance of your VueJS application), all you need to do is mark the script with the type of text/partytown. Add the type="text/partytown" attribute for each script that should run from a web worker.

For example:

<script src="./third-party-script.js"></script>

would turn into

<script src="./third-party-script.js" type="text/partytown"></script>

By adding the text/partytown you are telling partytown that this script should not be executed on the main JavaScript thread. Partytown also makes sure that the script runs in a web worker for you, no additional setup required.

Note: that each script is opt-in, meaning that the updated type attribute should only be added to scripts that should run with Partytown. Partytown will not automatically upgrade any scripts unless this attribute is added.

Browser support

Partytown works to ensure that all browsers can still run third-party scripts, whether they have support for service workers, atomics, or neither. This means if you’re supporting legacy browsers such as IE11, the scripts should continue to work as if Partytown wasn’t being used.

For more information on partytown's browser support, you can check out the official partytown documentation.

Conclusion

By making sure our main thread does only what it needs to do (run our code), we can deliver smoother experiences for our users. PartyTown helps us do this effortlessly. I would recommend that you check it out. To learn more about PartyTown (including how to configure it), check out partytown's documentation.

How to omit `.value` in refs (Vue 3 Composition API)

Allan N Jeremy — Fri, 17 Jun 2022 08:55:05 +0000

How to omit `.value` in refs (Vue 3 Composition API)

A technical article that expounds on how we can omit using .value in VueJS ref creating APIs by converting them into reactive variables using macros.

Introduction

When Vue 3 first came around, it introduced the Composition API. The API allowed for greater code re-usability as well as a better way to organize Vue JS code. Along with the composition API, came the concept of refs. To access the value of a ref, you needed to append .value to the name of the ref variable. To tackle this, the Vue team came up with a solution (Reactivity Transform) that would allow us to create reactive variables without creating refs.

Prerequisites

This article is primarily aimed at intermediate Vue 3 developers and assumes three things.

Intermediate knowledge of JavaScript
Basic Vue 3 usage
A basic understanding of how to use refs and reactivity in vue

The functionality discussed in this article is purely opt-in and existing behaviour is unnafected.

Tools needed

For this to work, you will need to be using vue@^3.2.25 and above. No additional dependencies are required. Vue 3.2.25+ ships an implementation under the package @vue/reactivity-transform. It is also integrated (with its APIs re-exported) in @vue/compiler-sfc so most userland projects won't need to explicitly install it.

Reactivity in Vue 3

Reactivity refers to the ability to keep track of changes that occur in our applications. One such way to achieve reactivity in Vue 3 is by using refs.

Creating Refs

The syntax for creating a ref would be something on the lines of this.

import { ref } from "vue";

// By wrapping our default value (true) with a ref, we tell vue to keep track of changes made to it
const isReading = ref(true);

This means that when the value of isReading changes, Vue knows about it and it can keep track of the changes. This means that UI is automatically updated whenever the value of isReading changes. In your template file, you would access the reactive value the same way you would access any variable, for example:

<template>
  <h1>{{ isReading ? "Shhh, I'm reading" : "Talk to me" }}</h1>
</template>

Using refs

That's all fine and dandy, but when you want to access or modify the value of the refs in the script, then you need to append a .value at the end of it. This is because ref() wraps the actual variable(isReading) in an object that can keep track of any changes made to it.

import { ref } from "vue";

const isReading = ref(true);

// prints an object that represents the ref object that wraps isReading
console.log(isReading);

// This is how you would need to access the value of isReading
console.log(isReading.value); // prints true

Reactivity Transform

Removing the need for `.value`

The new Vue 3 syntax allows you to use refs without needing to use .value. To make this work, the Vue team implemented Reactivity Transform. This allows us to create reactive variables for every API that creates refs instead of using refs. This means we can use our variables without appending .value everywhere. Reactive variables do not need .value to be accessed while refs need you to append .value.

Previously we used to write code like this

const isReading = ref(true);

console.log(isReading.value);

which can now be written like this

// Prepending $ to ref makes $ref() a macro that wraps around the original ref()
const isReading = $ref(true);

console.log(isReading); // no need to write

Behind the scenes, Vue will unwrap the $ref() and compile into the original .value syntax we are used to writing. The only difference is that this time you don't have to write isReading.value everywhere. This is particularly useful in areas where the ref created is used in multiple places within a script.

It is also worth noting that every reactivity API that returns refs will have a $-prefixed macro equivalent.
These APIs include:

ref -> $ref
computed -> $computed
shallowRef -> $shallowRef
customRef -> $customRef
toRef -> $toRef

Do you need to import `$ref` ?

Since $ref and equivalents are macros, they do not need to be imported. However, if you would like to import them explicitly, you can do so from vue/macros.

import { $ref } from "vue/macros";

Convert an existing ref as reactive variable using `$()`

In situations where we have a function that returns a ref, the Vue compiler would not be able to know that the function will return a ref ahead of time. In such cases, we can wrap the function call with $() to explicitly convert it into a reactive variable.

function getIsReadingRef() {
  return ref(true);
}

const isReading = $(getIsReadingRef());

Destructuring objects of refs

Previously, if you tried to destructure an object that was a ref, the destructured variables would lose their reactivity.

Let's go with an example ref.

const getDefaultReader = () => ref({ name: "VueJS lover", timeOnPage: 30 });

// Vue will be able to tell when any part of `reader` changes
const reader = ref(getDefaultReader());

// Vue won't be able to tell when the values of `name` and `timeOnpage` change
const { name, timeOnPage } = ref(getDefaultReader());

With Reactivity transform, you can destructure the objects of refs and maintain reactivity. You do so by wrapping the value with a $().

// Vue will now be able to tell when the values of `name` and `timeOnpage` change
const { name, timeOnPage } = $(getDefaultReader());

The above code will compile to:

const __temp = getDefaultReader(),
  name = toRef(__temp, "name");
timeOnPage = toRef(__temp, "timeOnPage");

Reactive props destructuring

This example is from the original Reactivity Transform RFC.

There are two pain points with the current defineProps() usage in <script setup>

Similar to .value, you need to always access props as props.x in order to retain reactivity. This means you cannot destructure defineProps because the resulting destructured variables are not reactive and will not update.
When using the type-only props declaration, there is no easy way to declare default values for the props. We introduced the withDefaults() API for this exact purpose, but it's still clunky to use.

<script setup lang="ts">
interface Props {
  msg: string;
  count?: number;
  foo?: string;
}

const {
  msg,
  // default value just works
  count = 1,
  // local aliasing also just works
  // here we are aliasing `props.foo` to `bar`
  foo: bar,
} = defineProps<Props>();

watchEffect(() => {
  // will log whenever the props change
  console.log(msg, count, bar);
});
</script>

The above will be combined to the following in runtime

export default {
  props: {
    msg: { type: String, required: true },
    count: { type: Number, default: 1 },
    foo: String,
  },
  setup(props) {
    watchEffect(() => {
      console.log(props.msg, props.count, props.foo);
    });
  },
};

Using $$() to retain reactivity

To get around reactivity loss in certain scenarios, the $$() macro can be used.

Retaining reactivity when passing refs as function arguments

Consider a situation where you have a function that needs to accept a reactive variable as an argument.

function trackChange(isReading: Ref<boolean>) {
  watch(isReading, (isReading) => {
    console.log("isReading changed!", isReading);
  });
}

let isReading = $ref(true);

// This will not work
trackChange(isReading);

In such a case, reactivity is lost.The reason for this is that the isReading ref is actually unwrapped into isReading.value when being passed in as the argument for trackChange while trackChange expects an actual ref. The above code compiles to this:

import { ref } from "vue";

let isReading = ref(true);

// This is what is actually happening
trackChange(isReading.value);

To get around this, we can wrap the ref in $$() which tells the compiler not to append a .value to it.

// This will work
trackChange($$(isReading));

The above example compiles to this:

import { ref } from "vue";

let isReading = ref(true);

// This is what we want - the isReading variable should be passed as a ref
trackChange(isReading);

Retaining reactivity when returning inside function scope

Another scenario where reactivity is lost is when we are returning reactive variables from within a function.

function useMouse() {
  let x = $ref(0);
  let y = $ref(0);

  // listen to mousemove...

  // doesn't work!
  return {
    x,
    y,
  };
}

Similar to the example with passing refs as arguments, the above return statement compiles to:

return {
  x: x.value,
  y: y.value,
};

In order to maintain the reactivity of x and y, we can wrap the entire return statement with the $$() macro.

function useMouse() {
  let x = $ref(0);
  let y = $ref(0);

  // listen to mousemove...

  // This works
  return $$({
    x,
    y,
  });
}

Retaining reactivity on destructured props

$$() works on destructured props since they are reactive variables as well. The compiler will convert it with toRef for efficiency:

const { count } = defineProps<{ count: number }>();

passAsRef($$(count));

compiles to:

setup(props) {
  const __props_count = toRef(props, 'count')
  passAsRef(__props_count)
}

TypeScript & Tooling Integration

Vue will provide typings for these macros (available globally) and all types will work as expected. There are no incompatibilities with standard TypeScript semantics so the syntax would work with all existing tooling.

This also means the macros can work in any files where valid JS/TS are allowed - not just inside Vue SFCs.

Since the macros are available globally, their types need to be explicitly referenced (e.g. in a env.d.ts file):

/// <reference types="vue/macros-global" />

When explicitly importing the macros from vue/macros, the type will work without declaring the globals.

Conclusion

By taking advantage of the macros added to Vue 3, you can drastically cleanup your code base by getting rid of .value usage. You also get to preserve reactivity within your application when destructuring reactive variables as well as props when using the Composition API and defineProps().

If you'd like to read more on the same, you can do so in the official Vue JS RFC discussion for the feature.

I do hope you find this helpful in reducing your code footprint and making your general life easier. The next time you think of using .value for your refs, remember that you don't have to. With that, thanks for stopping by(e)!

This Dot Labs is a development consultancy focused on providing staff augmentation, architectural guidance, and consulting to companies.

We help implement and teach modern web best practices with technologies such as React, Angular, Vue, Web Components, GraphQL, Node, and more.

Using Quasar with Vue3 & Storybook

Allan N Jeremy — Thu, 07 Apr 2022 08:27:19 +0000

This is a draft article and may be polished later

Create a new quasar project. Install the quasar cli if you haven't already. Using the Vite option for this example.

Select Vue 3 and Vite instead of Webpack to follow along with this example.

$ yarn global add @quasar/cli
$ yarn create quasar

# or:

$ npm i -g @quasar/cli
$ npm init quasar

Initialize storybook

cd into the directory of your created project

Run npx sb init to initialize storybook in your project.

Update package.json

Replace whatever version of autoprefixer you have in your package.json in order for Storybook to work. The version of PostCSS being used by Storybook will not work with later versions of autoprefixer. More details on why that is can be found here.

Use this:

 "autoprefixer": "^9.0.0",

Update your Storybook settings

In order for storybook to load and display quasar components correctly, we need to update our .storybook/preview.js file with the following:

import '@quasar/extras/roboto-font/roboto-font.css';
// These are optional
import '@quasar/extras/material-icons/material-icons.css';
import '@quasar/extras/animate/fadeInUp.css';
import '@quasar/extras/animate/fadeOutDown.css';
import '@quasar/extras/animate/fadeInRight.css';
import '@quasar/extras/animate/fadeOutRight.css';

// Loads the quasar styles and registers quasar functionality with storybook
import 'quasar/dist/quasar.css';
import { app } from '@storybook/vue3';
import { Quasar } from 'quasar';

// This is also where you would setup things such as pinia for storybook

app.use(Quasar, {});

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

Run storybook

Use yarn storybook to run storybook. It should open your browser at localhost:6006/ by default.

Test Quasar Components

Replace the code in your src/stories/Button.vue with

<template>
  <q-btn color="primary">Something</q-btn>
</template>

You should now see your quasar button in storybook.

Conclusion

That's it! You can now begin to use storybook with Vue3 + Vite + Quasar

Three types of console.log users. Which one are you?

Allan N Jeremy — Tue, 05 May 2020 14:12:16 +0000

Any js developer has definitely used console.log() before. Among these 3 main ways to print variables with text within console.log(), I am curious to see what kind of developers people are.

I have added comments for of the three methods mentioned feel free to vote for the method you use by liking the comment that corresponds to how you use `console.log(). I'd also love to hear why you use the method that you use.

What's the funniest error message you've seen

Allan N Jeremy — Tue, 11 Feb 2020 10:44:26 +0000

I just recently tried to discard a file in a new repo in VSCode and got this error (which I found funny for some reason - insert awkward laugh)

Which got me thinking. What are your favorite/funniest error messages?

So I just got back to youtube after 7 years...

Allan N Jeremy — Fri, 03 Jan 2020 11:00:10 +0000

Heads up

This article contains some shameless plugs to my channels. If you find this offensive, I apologize in advance.

Please don't eat me 😅

We've all been there

We've all started something that we stopped doing. For me, one of those things was YouTube. I started teaching the fundamentals of programming and 3D stuff a year after I finished high school.

At the time, I knew nothing about YouTube and simply wanted to share knowledge regardless of whether or not the quality was good. My audio was horrible (as you'd see with multiple comments on the same) and I never appeared on camera. For some of the videos, the aesthetic was also horrid, but for some reason I kept making videos.

I stopped YouTubing when I joined campus - studying Film & Animation. That made me a lot more critical of what I could put out as well as bombarded me with a tonne of work.

Anyway. Fast forward to 2020, I figured it's time to get back to it. I bought a blue yeti mic & borrowed a camera from a friend. The first two videos (more like 100 takes) I recorded felt cringey as hell.

So in the end I decided to say 🤷‍♂️ it (insert the word you're thinking of here.). It is quite thrilling, since I have no idea what kind of reception I'll get.

Not only did I decide to continue with my old channel. I also started a new channel where I've challenged myself to build a multi-million dollar company in the next 2 years, starting with $0 in Africa. For the most part, I think it's worth a try, given that I have tried a bunch of things, failed and learnt a tonne over the past 7ish years.

So yeah...

I'll be posting new videos on Friday & Monday .
Making it in Africa - Fridays
Tutorial channel - Mondays

Hopefully I can commit this time - this article is meant to hold me accountable as well.

I also figured I'd start doing bi-weekly (Probably on weekends) life tips on my Instagram just to share what I've learnt over the course of my life and career.

I could use some help

What would you suggest as tips for getting back into the game? Any YouTube tips? I've got a few more general video related questions that I'll ask in a different post.

Specifying good requirements in Gherkin - BDD

Allan N Jeremy — Wed, 01 Jan 2020 10:39:48 +0000

First of all. Happy new Year!

TL;DR

Explain how to write good Gherkin, beyond just the syntax Like I'm five.

So. I just started learning Behavior Driven Development (BDD) seriously. I stumbled upon Gherkin while looking into Cucumber.

For those who may not know, Gherkin is a language that makes it easy for businesses to write down requirements for a system that fulfills business needs. This reduces the chances of wasting time in development where there is a disconnect between the tech team and the product owner or business team.

However, while trying to actually implement the actual Gherkin. I have found it difficult to establish the following things:

What counts as a Feature?
What counts as a Scenario? When should you pull out a scenario and make it a feature and when should you make a feature a scenario?
What makes good Given statements?
Why not split individual And sections into their own scenarios in most cases?

I speak from naivety and would like to understand what makes for good Gherkin and good requirements specification

What are your daily routines? #2020

Allan N Jeremy — Tue, 24 Dec 2019 09:37:07 +0000

Seeing as we are almost getting into a new year. I'd love to hear what routines you have in your life to stay productive and minimize distractions while maintaining a relatively stress free healthy lifestyle.

If you're planning to start a new routine, feel free to share it as well.

We can all learn something from each other.

Looking for remote work

Allan N Jeremy — Sat, 16 Nov 2019 23:25:32 +0000

TL;DR

I am looking for remote work. If you know anyone looking for Fullstack devs/consultants with cloud experience, feel free to email me @ dev@allanjeremy.com

My github

If this violates any rules, I can take it down @ben

Hey, what's up guys. Been a while since I last posted here.

Anyway, earlier this year, I'd joined a startup as a CTO. However, the other founders ended up going back on their word & I had to leave (more on this in an article I'll write)

That being said. I am currently looking for remote work/consulting work.

I have been coding for the past 9 years. I am a fullstack dev with experience & multiple projects in Nodejs, Vue, PhP, SQL, MongoDb & Firebase among other tools. I am well versed in TDD & system architecture as well as design & game development. I have built systems on MVC, Service based architectures as well as supervised multiple teams of developers to deliver multiple solutions. I am an effective communicator in business, tech & entrepreneurship

If you are looking for someone or know anyone who may looking for a fullstack dev/consultant, please email me @ dev@allanjeremy.com

Thanks a tonne for your time
Cheers

Can you solo podcast?

Allan N Jeremy — Thu, 19 Sep 2019 06:47:59 +0000

It's 9am and I feel like talking to myself. I record my thoughts but hesitate before posting them.

One question lingers around my mind, can you solo podcast?

Any examples of tech solo podcasts?

Ps, I'll eventually look for someone once I decide to take podcasting seriously

What do guys use to create/host podcasts

Allan N Jeremy — Thu, 19 Sep 2019 06:44:31 +0000

If you've done podcasts or are considering doing so, what platforms do you use to host & manage them?

What are the advantages vs disadvantages of these various tools?

Forem: Allan N Jeremy

How to retry failed steps in GitHub Action Workflows

Pre-requisites

Initial setup

Initialize your git repository

Create workflow file

Testing your workflow

Retrying failed steps

Approach 1: Using the retry-step action

Approach 2: Duplicate steps

Bonus: Retrying multiple steps

Conclusion

Using PartyTown to improve the performance of VueJS Applications

What is partytown?

Using partytown with VueJS

Create the VueJS application

Add third-party scripts

Install partytown

Setup PartyTown

Setup partytown (vite)

Setup partytown (the long version)

Using partytown with third-party scripts

Browser support

Conclusion

How to omit `.value` in refs (Vue 3 Composition API)

How to omit .value in refs (Vue 3 Composition API)

Introduction

Prerequisites

Tools needed

Reactivity in Vue 3

Creating Refs

Using refs

Reactivity Transform

Removing the need for .value

Do you need to import $ref ?

Convert an existing ref as reactive variable using $()

Destructuring objects of refs

Reactive props destructuring

Using $$() to retain reactivity

Retaining reactivity when passing refs as function arguments

Retaining reactivity when returning inside function scope

Retaining reactivity on destructured props

TypeScript & Tooling Integration

Conclusion

Using Quasar with Vue3 & Storybook

Initialize storybook

Update package.json

Update your Storybook settings

Run storybook

Test Quasar Components

Conclusion

Three types of console.log users. Which one are you?

What's the funniest error message you've seen

So I just got back to youtube after 7 years...

Heads up

We've all been there

So yeah...

I could use some help

Specifying good requirements in Gherkin - BDD

TL;DR

What are your daily routines? #2020

Looking for remote work

TL;DR

Can you solo podcast?

What do guys use to create/host podcasts

How to omit `.value` in refs (Vue 3 Composition API)

Removing the need for `.value`

Do you need to import `$ref` ?

Convert an existing ref as reactive variable using `$()`