teleren/devto huggingface dataset:
Vue JS Get Current Date And Time
Tags: vue, date, time, javascript
Published: 2022-10-12 03:48:00

In this article, we will see Vue js get the current date and time. In Vue js very simple to get the current date and time because we can get it using the Date() function. Date() will provide the full date and time with the timezone. So, you can also make a better format like yyyy-mm-dd.

In vue js, we are using the new Date() a constructor creates a new date instance that contains the following methods to construct the full date. So, in this example, we will get a current timestamp, get the current date, get the current month, get the current year, and get a date and time.

So, let's see an example of the Vue js get current timestamp.

getDate() Function: It returns the day of the month (1-31).

getMonth() Function: It returns the month of a year, where 0 is January and 11 is December.

getFullYear() Function: It returns the year in four-digit format (YYYY).

> Example 1:

In this example, get the current date and get the current time with the format.

```
<!DOCTYPE html>
<html>
<head>
    <title>Vue JS Get Current Date And Time - Techsolutionstuff</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
   
<div id="app">
    {{ message }}
</div>
  
</body>
  
<script type="text/javascript">
 new Vue({
    el: '#app',
    data: { 
          message:"Welcome, Please Wait...."
      },
      methods:{
        callFunction: function () {
   
            var currentDate = new Date();
            console.log(currentDate);
  
            var currentDateWithFormat = new Date().toJSON().slice(0,10).replace(/-/g,'/');
            console.log(currentDateWithFormat);
     
        }
    },
    mounted () {
      this.callFunction()
    }
 });
    
</script>
</html>
``` 
 
> Example 2:

In this example, get the current date in d-m-yyyy format.

```
<template>
  <div id="app">
    <h1>Get Current Date And Time</h1>
    <p>{{currentDate()}}</p>
  </div>
</template>

<script>
export default {
  methods: {
    currentDate() {
      const current = new Date();
      const date = `${current.getDate()}/${current.getMonth()+1}/${current.getFullYear()}`;
      return date;
    }
  }
};
</script>
``` 
 
> Example 3:

In this example, display date using toLocaleString() function.

```
<div id="app-2">
  <span v-bind:title="message">
    Hover your mouse over me for a few seconds
    to see my dynamically bound title!
  </span>
</div>

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: 'You loaded this page on ' + new Date().toLocaleString()
  }
})
```
ANNOUNCEMENT - New Features Added Support For Subform Custom Fields To Smart POST / PATCH Joomla! 4.x Api example
Tags: blog
Published: 2022-11-12 18:13:53

---
title: ANNOUNCEMENT - New Features Added Support For Subform Custom Fields To Smart POST / PATCH  Joomla! 4.x Api example
published: true
date: 2022-10-12 03:29:26 UTC
tags: Blog
canonical_url: https://alexandree.io/blog-joomla-specialist/smart-post-patch-now-with-subform-custom-field-support
---

![](https://alexandree.io//images/behzad-ghaffarian-hello-unsplash_7dc86.jpg)

The [second announcement](https://alexandree.io/blog-joomla-specialist/smart-post-patch-200loc "Second announcement about Smart POST / PATCH Joomla! 4.x Api code example"), yesterday was about Smart POST / PATCH enhancement 200 lines of code Joomla! 4.x Api example. If you missed it, [here it is](https://alexandree.io/blog-joomla-specialist/smart-post-patch-200loc "Second announcement about Smart POST / PATCH code sample Joomla! 4.x Api")  
  
With this version of the Smart POST / PATCH php script, you can now:  

- POST / PATCHt Existing subform custom field using csv url
- POST / PATCH Images (intro image and fulltext image)
- POST / PATCH Urls (urla,urlb,urlc)
  
Here it is:  

[Read More …](https://alexandree.io/blog-joomla-specialist/smart-post-patch-now-with-subform-custom-field-support)
How to handle yarn's parse error
Tags: yarn, debug
Published: 2022-10-12 02:45:22

I've been struggling the unknown parse error while building [storybook](https://storybook.js.org/).

I've been puzzled why it keeps happening.

It turned out that cache may have been corrupted and resulted with the error.

You could simply delete npm cache and `node_modules` directory.


## Error sample

I was experiencing the following error

```
[ssh@example.com]$ NODE_OPTIONS=--max_old_space_size=4096 yarn build-storybook:coding
yarn run v1.22.19
$ BASE_PATH=/storybook build-storybook -o dist/storybook
info @storybook/vue3 v6.5.10
info 
info => Cleaning outputDir: /var/www/html/dist/storybook
info => Loading presets
info => Compiling manager..
ERR! => Failed to build the manager
ERR! Cannot parse records: Unexpected end of JSON input while parsing near ''
ERR! TypeError: previewBuilder.bail is not a function
ERR!     at /var/www/html/node_modules/@storybook/core-server/dist/cjs/build-static.js:219:26
ERR!     at processTicksAndRejections (node:internal/process/task_queues:96:5)
ERR!     at async Promise.all (index 0)
ERR!     at async buildStaticStandalone (/var/www/html/node_modules/@storybook/core-server/dist/cjs/build-static.js:218:28)
ERR!     at async buildStatic (/var/www/html/node_modules/@storybook/core-server/dist/cjs/build-static.js:254:5)
ERR!  TypeError: previewBuilder.bail is not a function
ERR!     at /var/www/html/node_modules/@storybook/core-server/dist/cjs/build-static.js:219:26
ERR!     at processTicksAndRejections (node:internal/process/task_queues:96:5)
ERR!     at async Promise.all (index 0)
ERR!     at async buildStaticStandalone (/var/www/html/node_modules/@storybook/core-server/dist/cjs/build-static.js:218:28)
ERR!     at async buildStatic (/var/www/html/node_modules/@storybook/core-server/dist/cjs/build-static.js:254:5)
info => Loading presets
error Command failed with exit code 1.
```

So, the main error says

```
ERR! Cannot parse records: Unexpected end of JSON input while parsing near ''
```

## STEP 1: Try to delete npm cache

Simply, let's try to run npm cache clear command

```
npm cache clean –force
```


## STEP 2: Try to delete `node_modules/.cache` directory

If STEP 1 doesn't work, just try to delete the `.cache` directory manually.


## STEP 3: Try to delete `node_modules` directory

Perhaps, there may be some conflict, so maybe you want to delete the entire `node_modules` directory and rebuild.


## STEP 4: Check installed node, npm, yarn versions

If you have multiple environments such as local, co-workers, and servers, and some environment worked but not the others, you may need to check the installed version of each environment.

After matching those, start over from STEP1.

Good luck.

## References

https://www.danroo.com/web/post-666/
https://github.com/storybookjs/storybook/issues/4034#issuecomment-780694848
VitePress fenced code block syntax highlighting quirks with .NET or other languages.
Tags: vitepress, dotnet
Published: 2022-10-12 02:41:29

This post was originally published at https://mysticmind.dev/vitepress-fenced-code-block-syntax-highlighting-quirks-with-net-or-other-languages

VitePress uses [Shiki](https://github.com/shikijs/shiki) for syntax highlighting which is a fantastic library. Shiki automatically fetches language grammar from VSCode so the language names etc for the fenced code block comes from it. 

For .NET, the language names captured are `csharp` and `fsharp` by default. This means that the syntax highlighting will work only if you use `csharp` or `fsharp`. But idiomatic usage use the file extensions `cs` and `fs` for syntax highlighting so this tends to be an issue. I did send a PR to Shiki to resolve this. But there are many moving parts i.e. Shiki will need to do a release with the fix then VitePress picking it up and in turn do a release.

If you are stuck, not only with .NET languages or any other language as well, there is a easy fix under your control. Edit your VitePress `config.js` file and add the following:

```js
import { BUNDLED_LANGUAGES } from 'shiki'

// Include `cs` as alias for csharp
BUNDLED_LANGUAGES
  .find(lang => lang.id === 'csharp').aliases.push('cs');

// Include `fs` as alias for fsharp
BUNDLED_LANGUAGES
  .find(lang => lang.id === 'fsharp').aliases.push('fs');
```
React TS Storybook: Using Custom Props in a Story
Tags: react, webdev, storybook, beginners
Published: 2022-10-12 02:31:03

> React TS Storybook: Appending Custom Props to a Story

Let's say you have a list component like below,

```typescript
import { HTMLAttributes } from "react";

const List = ({ children, ...props }: HTMLAttributes<HTMLUListElement>) => {
  return <ul {...props}>{children}</ul>;
};

const ListItem = ({ children, ...props }: HTMLAttributes<HTMLLIElement>) => {
  return <li {...props}>{children}</li>;
};

List.Item = ListItem;

export default List;
```

And for explaining how to add `List.Item` as `List`'s children, you append a custom props `itemCount` that how many `List.Item` `List` has. 

```typescript
import { useMemo } from "react";
import { ComponentStory, ComponentMeta } from "@storybook/react";

import List from "./List";

export default {
  title: "Example/List",
  component: List,
  args: {
    itemCount: 1,
  },
  argTypes: {
    itemCount: { control: "number" },
  },
} as ComponentMeta<typeof List>;

const Template: ComponentStory<typeof List> = ({ itemCount, ...args }) => {
  const liComponents = useMemo(() => {
    const components = [];

    for (let i = 1; i <= itemCount; i++) {
      components.push(<List.Item>{i} Item</List.Item>);
    }

    return components;
  }, [itemCount]);

  return <List {...args}>{liComponents}</List>;
};

export const ListExample = Template.bind({});
```

When you try to use the custom prop, you would get an error message like this 
`Property 'itemCount' does not exist on type '[Component's Props]'.`.

In this case, use `Meta` and `Story` instead of `ComponentMeta` and `ComponentStory`. 

```typescript
import { ComponentProps, useMemo } from "react";
import { Story, Meta } from "@storybook/react";

import List from "./List";

type CustomListProps = ComponentProps<typeof List> & { itemCount: number };

export default {
  title: "Example/List",
  component: List,
  args: {
    itemCount: 1,
  },
  argTypes: {
    itemCount: { control: "number" },
  },
} as Meta<CustomListProps>;

const Template: Story<CustomListProps> = ({ itemCount, ...args }) => {
  const liComponents = useMemo(() => {
    const components = [];

    for (let i = 1; i <= itemCount; i++) {
      components.push(<List.Item>{i} Item</List.Item>);
    }

    return components;
  }, [itemCount]);

  return <List {...args}>{liComponents}</List>;
};

export const ListExample = Template.bind({});
``` 

I defined a new custom type with union operator, and I used it `Meta` and `Story` as a generic type.


![first storybook example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qahfkkufiou84xhxorh3.png)


![second storybook example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gk6oaean7wrvp436cwmv.png)


Now, you can adjust a value `itemCount` on the website like this.

---

I hope this is helpful for someone :)

Happy Coding!
I made a free template to help developers start documentation of your projects.
Tags: tailwindcss, react, webdev, showdev
Published: 2022-10-12 01:44:35


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0udn8l5m3r035mjmma1r.png)



Hey folks,

Recently I created a free template to help developers start documentation of your projects.

built with: @tailwindcss, headless UI  @nextjs, and markdoc.

Enjoy!

live:
https://next-galaxy-preview.vercel.app/docs

Source:
https://github.com/mverissimo/next-galaxy-template

Use template and start documentating.
AWS Athena + DBT Integration Demo
Tags: aws, dbt, athena
Published: 2022-10-12 01:38:06

Hi everyone,

If you are looking for building a quick demo of Athena + DBT integration by reusing existing code through Terraform, feel free to check my post at medium: https://towardsdatascience.com/aws-athena-dbt-integration-4e1dce0d97fc

Cheers
Control Flow Python ☂️🌧️
Tags: beginners, programming, python, 100daysofcode
Published: 2022-10-12 01:34:55

From our day to day we make some decisions that rely on certain situations and based on that we take further action. For example if it is raining, then bring an umbrella. In programming we find similar situations.

**if statement**
Using if statements we can decide whether a certain statement will be executed or not.

```python
if is_raining:
  print("Bring an umbrella")
```
the `:` tells the computer to execute what is coming next **only if** the condition is met. 

lets try another one
```python
if 5 == 4 + 1:
  print("True") # Output "True" 
```
This prints out `True` because the condition of the if statement is true. 

**if-else**
What if we wanted to do something else if the condition is false? With an else statement we can run a block of code when the if statement is false. 
```python
is_raining = "No"

if is_raining == "Yes":
  print("Bring an umbrella today!")
else:
  print("No need for an umbrella today!") # This would be printed
```
**elif**
Using elif we can use multiple options.

```python
weather = "Cold"

if weather == "Raining":
    print("Bring an umbrella today")
elif weather =="Cold":
    print("Wear a warm jacket today")
else:
    print("Weather looks great today")
```
The output would be `"Wear a warm jacket today"` since `weather = "Cold"`
Random Animal Facts Node.js API
Published: 2022-10-12 00:55:36

With today's post, we are excited to share a really interesting Node.js project! We have built an API with the **Express Framework** that randomizes **fun facts about cats and dogs**.


![API response example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w73oyejeswdwh8ab17dn.PNG)

This project is not only interesting for **beginners in Node.js**, but it might come in handy if you are building a front-end project and you want to fetch async some test data from a simple API.

Likewise, keep in mind that the entire development process was recorded and is available on my YouTube channel. The [video](https://youtu.be/vY-re5SJp4k) covers the **project setup**, all the way to pushing it live on **Heroku**. Check it out!

You can also check the repository [here](https://github.com/blueycode/cat-and-dog-facts-api).

As always, any feedback is appreciated.
Technical Writing, my POV
Tags: writing, programming, devops, cybersecurity
Published: 2022-10-12 00:24:06

To be a successful software engineer and making waves you need the skill of technical writing.
One of the best ways of learning is teaching and technical writings serves as one of those ways of communicating your operations and giving learners or interested persons the ability to understand your operation from the technical point of view, also leading to smoother operations within your business, clearer training for employees, and a better business relationship with clients and project stakeholders.

### The Ability
Not Born a technical writer though intelligent and lack the ability to teach procedures or transfer knowledge theoretically, Brings me to asking these questions: 

- Am i ever going to be good at it?

- What do i need to be good at it?

- How important is it?

I'll just highlight a little quality about myself and see if i can do this

- Anything i put my mind to, i always achieve and this won't take a different route.

- I'm blessed with the research abilities and hunger for uncovering and solving situations a mind that knows it abilities, if this be one of them so be it.

- I owe it to myself to be a problem solver and not put to waste the creative ability of my mind and impacting through technology has been the only way i want to achieve that.

*I might not be the best technical writer today but with practice and staying through to myself i believe i can be the best someday.*
What's the difference between a product vision and a product goal?
Tags: vision, strategy, productgoal
Published: 2022-10-22 19:38:42

---
title: What's the difference between a product vision and a product goal?
published: true
date: 2022-10-12 00:00:00 UTC
tags: vision,strategy,productgoal
canonical_url: https://jhall.io/archive/2022/10/12/whats-the-difference-between-a-product-vision-and-a-product-goal/
---

What are your thoughts?

My short answer: A vision is a long-term guiding principle. A goal is a short-term specific thing to help you achieve that vision.

Example:

**Product vision:** Take over the world!  
**Product goal:** Attach laser beams to the heads of sharks.

 ![](https://jhall.io/images/sharks.jpg)
* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
Accessing Container Environment Variables using Sitecore PowerShell Extensions
Tags: sitecore, spe, docker
Published: 2022-10-12 03:41:02

---
title: Accessing Container Environment Variables using Sitecore PowerShell Extensions
published: true
date: 2022-10-12 00:00:00 UTC
tags: sitecore,spe,docker
canonical_url: https://robearlam.com/blog/accessing-container-environment-variables-using-sitecore-powershell-extensions
---

## Accessing Container Environment Variables

I recently had an issue where I needed to debug a Sitecore instance running in a Docker container. I needed to access the environment variables of the container, but didn't have access to the cluster to see the values. So I had to figure out a way to list out the variables that had been used to setup the container, enter Sitecore PowerShell Extensions (SPE).

## SPE to the rescue!

I turns out that having access to run SPE scripts made this super easy. At first the ouput was being truncated which wasn't much use, but after a few tweaks I was able to get the output I needed with the following command:

```
gci env: | Format-Table -Wrap -AutoSize

```

Hope that helps anyone else who needs to find out the values for the environment variables powering a Sitecore container, when you don't have access to the back end!
Refactoring Code
Tags: javascript, opensource, github, programming
Published: 2022-10-11 23:31:28

This is the 6th week of OSD600, and this week we have Lab 5 to complete. This lab is different from the previous labs we had, this week we are going to modify our code of SSG program and make it looks better. It's about refactoring our code.

**Note**: _Due to the new features added to the program, the complexity of the code grew with it. We added new features and we created new code paths, functions, variables. It would be harder to control due to the new additions_

##Procedure
###Step 1: Create a refactoring branch
Essentially, you have your cloned code, and within the terminal you type `git checkout -b refactor` in order to create a branch called refactor. to check type in `git status`.

###Step 2: Go through the code
I went through my code, and looking through it, what I saw was a lot of of duplication. So I decided it would be a better idea converting the entire code as multiple functions that call on each other.

###Step 3: Create Functions

1. I created a function called "`mdFileConverter`" to store the code that adding a new feature to my SSG so that all `---` in a **Markdown** file would get converted to an `<hr>` tag.
2. I found that the way I try to convert a txt file to a html file is very similar the way I covert a md file to a html file.
Therefore, I put then into a new function named `htmlGen`.
3. I have duplicated logic and code for my program to convert a folder and a single file. In order to make my program with less duplication. I created a new function named `htmlConverter` to store the converting logic and code.
4. instead of being just a global `if statement`, I changed the conversion into a function called `convert()` which would be called by the config file checker from `Lab 4`.

###Step 4: Improving Variables
Since I updated my code with some new functions, it became more tidy. So, I changed `fname` to a more specific name `fileName`. It's way more clear than with the name `fname`.Also, I changed the variable `stats` to `filePath` so that it became easier to understand.

###Step 5: Get rid of global variables
Finally, I removed all the global variables I had in my code. Instead of having global variables, I put those variables to each specific function that I will use them.

###Step 6: Combine my commits
After updating my code, I use this command `git rebase master -i` to start an interactive rebase, and opening the editor. And then I overwrite the `pick` keyword to `squash` so that I can combine all the commits I had into 1 commit. Then I use the command `git commit --amend` to rename some of my commit descriptions. Last but not least, I merged my `refactor` branch to my `main` branch.

##Final Thoughts
It was an interesting but good experience. All in all a good way to improve coding structure as well as making the code itself much easier to understand via converting it into separate functions.
Day 633 : Flavour
Tags: hiphop, code, coding, lifelongdev
Published: 2022-10-11 23:08:07

_liner notes_:
- Saturday : Got to do the radio show from the station this week! Had a really good time as usual with my cohost. The recording of this week's show is at https://kNOwBETTERHIPHOP.com

![Radio show episode image of psychic Ms. Cleo sitting at a table with tarot cards, candles, and a bowl of fruits with the words "Feel the Power" overlayed on top with the words Oct 8th 2022, Old College Try](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5x5erxa2lisaurozopmt.jpg)

- Sunday : Did my group study session. Got some stuff done. Worked on setting up some live stream stuff for an upcoming event. Looking to work with a new API from my job that I've been meaning to build with so this could be a good project. Watched a bunch of "Walking Dead" episodes to try and catch up.

- Monday : So, it was a national holiday (National Indigenous People's Day) so I took some time out to still finish up some work so I can get a head's start. Watched the final episode of "Kevin Can F Himself", "The Walking Dead" and the new episode of "Bleach". Also worked on a live stream setup for an upcoming event. I already have a working application, but I want to update and add some flavour to it.

- Professional : Today had a meeting with my manager to take up some upcoming things. I booked a hotel for a conference happening next month. Spent the rest of the day working on a barebones starter app using another library so that I can work on migrating it to our stuff. The documentation isn't that great and there's not a lot of good examples (which is why I have to make my own). I even found a video where someone from the company tried to walk a new person through creating an application and after 2 hours, they were only able to get a couple of things working with some issues still happening.

- Personal : Just been working on side projects and watching random TV shows. Yeah, that pretty much sums it up.

![A field of yellow and red flowers with green grass next to a lake with a forest and mountain range in the distance at sunset in Wallowa, OR, United States](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ph2a3mco0h9zihzyun74.png)

I ordered a large screen for my van so that I can open up my side door and not have bugs come in. It came in today and looking forward to trying it out tomorrow. After watching the Meta Connect event, I placed an order for the new Meta Quest Pro device. I'm looking into diving more into Virtual and Augmented Reality (especially on the Web) so this would be a good device to test things on. Not sure if I can do Web stuff though. I'll see when I get it in a couple of weeks. I haven't heard back from the organizer about the event they wanted me to livestream so I don't know if I'm going to be doing it, but I'll still work on it for future events. There's a new anime called "Chainsaw Man" that has pretty hyped up! Going to watch that tonight while I do some coding.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube 3VG1jQB1tIw %}