teleren/devto huggingface dataset:
Errors when creating strapi app using the command npx create-strapi-app@latest --quickstart
Tags: strapi, nextjs, npx, webdev
Published: 2023-03-28 14:14:24

This week, I started a new project using Strapi, which is a platform that I have not used before. Everything was new to me, as I had previously worked on a project using Sanity, which required the latest version of Node 18 to function correctly. As a result, I had the most up-to-date version of Node installed on my system. However, when I attempted to run the `npx create-strapi-app@latest --quickstart` command, I encountered an error: 

> 
Warning: config production; Use --omit=dev

> 

while trying to install the dependency package. I searched various resources, such as stackoverflow, github, but the only advice I found was to install Node version 14 using `nvm install 14` and `nvm use 14`. Unfortunately, I was not able to resolve the issue using this solution on my computer. Ultimately, I found a different solution that worked for me, which was to do the following:
- You need to first create a new Strapi project: 

```
npx create-strapi-app my-project --quickstart
```
Although the error message may persist, you will need to close and reopen the terminal before proceeding. After doing so, enter the following command:

```
cd my-project
```
From there, you can run the npm install command with the --no-optional flag to exclude any optional dependencies:
```
npm install --no-optional
```
Thanks to this solution, I was able to install Strapi correctly and create my project, despite using the latest version of Node. The problem has been resolved.
Getting Started with GoLang
Tags: essentiallearninglinks, gettingstartedwithgo
Published: 2023-03-28 14:05:43

http://go-database-sql.org/index.html -**SQL**

https://echo.labstack.com/guide/response/ -**Echo Web-Framework**

https://www.golinuxcloud.com/go-gorilla-mux/ -**Gorilla Mux Web-Framework**

https://gorm.io/docs/advanced_query.html -**ORM Library for Go**


1. Install Go from https://golang.google.cn/doc/install

OR for Ubuntu https://buildvirtual.net/how-to-install-go-on-ubuntu-20-04/

2. Open **Cmd **and type **_$ go version_** to display the Go version in order to verify that it has been successfully installed.
3. Navigate to home directory using **_cd %HOMEPATH%_** command. 
4. Create a directory for your first Go source code using the commands below
   **mkdir test** then navigate to the folder with **cd test**
5. Enable dependency tracking for your code. When your code imports packages contained in other modules, you manage those dependencies through your code's own module. That module is defined by a go.mod file that tracks the modules that provide those packages. Type the following command for our test directory.
   **$ go mod init test/hello**
   go: creating new go.mod: module example/hello
6. Create a file test.go where you will write your code.
   package main. Below is an example.

```
   package main
   import "fmt"

   func main() {
     fmt.Println("Hello, Jay!")
   }
```
7. Run your code using **_$ go run ._**
   The following is displayed- Hello, Jay!

<u>**Essential Go Commands**</u>
**go mod vendor** command constructs a directory named vendor in the main module’s root directory that contains copies of all packages needed to support builds and tests of packages in the main module. 
It creates the file vendor/modules.txt that contains a list of vendored packages and the module versions they were copied from.
Vendor directories are not used in any module.

**go mod tidy** command ensures that the go.mod file matches the source code in the module. It adds any missing module requirements necessary to build the current module’s packages and dependencies, and it removes requirements on modules that don’t provide any relevant packages. It also adds any missing entries to go.sum and removes unnecessary entries.

**go get github.com/joho/godotenv** to set up go environment variables

**go get -u github.com/go-sql-driver/mysql** to get sql driver package

**go get github.com/labstack/echo/v4** to use Echo web framework
How to revert to previous page layout / design in SharePoint?
Tags: sharepoint, sharepointonline
Published: 2023-03-28 14:01:54

Was asked this simple question the other day when I was doing one of the [SharePoint Introduction sessions](https://www.linkedin.com/posts/thebernardlim_sharepoint-chatgpt-ai-activity-7044525672031010816-IBZY?utm_source=share&utm_medium=member_desktop) the other day

Some pages might have a lot of editing done, so question is how do we revert the changes to a previously published edition?

Naturally, one would look at the menu bar for such options. However, as you see below, the closest option is "Undo". However "Undo" is only for _non-published changes_ only. It will be _grayed out_ (like below) if there are no changes made yet

![Undo button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zviicy1uked321pq2wdd.png)

This might be an obvious solution, but might not be that obvious especially when new to SharePoint

---

### Solution

1. Take note of your page name. If there is no page name, it is probably your home page, which i.e. Home.aspx


2. Go to **Site Settings**
![Site Settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tqf7fojaeu55y44anhzj.png)

3. Go to **Site Pages**. Note that all pages will be located within this page library.
![Site Pages](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l0m8yk05ibbeyvtvswh9.png)

4. Look for the page with the page name at Point #1 and click the 3 horizontal dots '**...**', then on **Version History**
![Version History](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9wq4qihle5hg1bqg0t3c.png)

5. Here you will see a list of _published_ versions. Click on the specific version and click on **Restore**
![Restore version](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x3ew1zmk9mkw4e2z1ahr.png)

---


One downside, is unfortunately, there is no "preview" to see how each version looks like before restoring. This will be a pain if there are more versions. 

On the flip side, we see how our work is not easily "lost" within SharePoint, and most of the things can be recalled if mistakes happen
AWS Amplify: getting started with Vite
Tags: aws, react, vite
Published: 2023-03-28 14:00:00

When it comes to starting a new React app on Amplify, the Amplify docs suggest using Create React App. But now, there's a new player in town: Vite. Vite is a great alternative for creating single-page React applications. However, Create React App has some of the best pre-configured and battle-tested browser polyfills for web applications that need broad support across browsers, particularly in corporate environments.

Despite this, for projects that want to embrace the latest and greatest, Vite provides some definite advantages. However, some changes to the default Vite project start need to be done to support the use of the AWS SDK. [Issue #3673](https://github.com/aws/aws-sdk-js/issues/3673).  

##Scaffolding Your Vite Project 
To start off with typescript use `--template react-ts`

With NPM:
```bash
$ npm create vite@latest my-vue-app --template react
```
With Yarn:
```bash
$ yarn create vite my-vue-app --template react
```
With PNPM:
```bash
$ pnpm create vite my-vue-app --template react
```
Then follow the prompts!

Once the project is created there add the following 

`index.html` in the `<body>` tag
```HTML
<script>
      // AWS Amplify needs this to work. See https://github.com/aws/aws-sdk-js/issues/3673
      const isBrowser = () => typeof window !== "undefined";
      const isGlobal = () => typeof global !== "undefined";
      if (!isGlobal() && isBrowser()) {
        var global = window;
      }
    </script>
```
Also, add a `resolve` object to the `vite.config.js`
```Javascript
resolve: {
    alias: {
      "./runtimeConfig": "./runtimeConfig.browser",
    },
  },
```
[Micah Redwood](https://github.com/micah-redwood) created a [repository](https://github.com/micah-redwood/vite-amplify-demo) with how your project should look after following these steps and can be used as a reference. 

[https://github.com/micah-redwood/vite-amplify-demo](https://github.com/micah-redwood/vite-amplify-demo)

However, if you have an existing create-react-app and would like to migrate to Vite, the process is simple. I have found 2 great articles that break them the steps and once the project is using Vite it will still need the 2 code fixes to be able to work on Amplify.

[Migrating your Create React App project to Vite](https://craftsmenltd.com/blog/2022/06/23/migrating-your-create-react-app-project-to-vite/)

[Migrating from Create React App (CRA) to Vite](urhttps://cathalmacdonnacha.com/migrating-from-create-react-app-cra-to-vitel)
Being a Developer Advocate: Week 26
Tags: devrel, learninpublic
Published: 2023-03-28 13:45:06

My first professional YouTube video is out: https://youtu.be/qMdXbeHvs60

I usually am very bad at publishing stuff as I am so perfectionist by nature 😞 So this feels like a big personal achievement!

## With Practice comes speed
As I continue my journey of short video tutorials it becomes clearer and clearer that with practice comes speed.

The first three videos of my 2-minute format took me about three days to complete and now I am done with two more already in just one day 🥳

I also have a lot of fun trying out new stuff in post-production. All the videos come out as playful and even if they are not perfect I am delighted with them.

The last sixth month helped to calm down my perfectionist mind and rather publish something when it is **good enough**.

## Closing our Hackathon
The winners of our hackathon were announced and we had a wholesome closing ceremony where we showed the presentations they submitted.

We had some great learnings over the course of the hackathon that we will share with a blog post.

The most memorable moments I had:

* Opening keynote by Jason Huggins: Truly inspiring (https://youtu.be/BZKS9B2wgNM)
* Panel discussion: Awesome panelists and the prepared questions worked perfectly (https://youtu.be/7w8CYpxkdmg)
* Workshops: Our docs are at a stage where I can reference everything I explain 😃
How to Create a Secret for a Service Account in Kubernetes 1.24 and above
Tags: kubernetes, devops, linux
Published: 2023-03-28 13:39:39


Starting from Kubernetes version 1.24, the secrets for a  service account are no longer created automatically. This can be a problem for developers who need to access the Kubernetes API server with the service account, for example, when working with pipelines. We had the issue when connection to vault. In this post, I will show you how to manually create a secret for a service account in Kubernetes.

## Using kubectl create token to Create a Token
To generate a token to access the Kubernetes API server, you can use the kubectl create token command. This command will return a JWT token. Here's an example:

```bash
# creating service account
kubectl create sa pipeline
kubectl create token pipeline
kubectl create token pipeline --duration=999999h
```

## Manually Creating a Secret for a Service Account
You can also manually create a secret for a service account by running the following commands:

```bash
kubectl create sa <serviceaccount-name>

kubectl apply -f - <<EOF
apiVersion: v1
kind: Secret
metadata:
  name: <secretname>
  annotations:
    kubernetes.io/service-account.name: <serviceaccount-name>
type: kubernetes.io/service-account-token
EOF
```

It's important to note that if you look at the service account, it will not list the count of secrets. This can be a bit misleading, so keep this in mind.

```bash
➜  ~ kubectl get sa
NAME      SECRETS   AGE
default   0         231d
test-sa   0         18m
```

## Deleting a Service Account
If you delete the service account, the assigned secret will also be deleted. Here's how you can delete a service account:

```bash
kubectl delete sa <serviceaccount-name>
```

```bash
➜  ~ k get sa
NAME      SECRETS   AGE
default   0         231d
test-sa   0         18m
➜  ~ k delete sa test-sa 
serviceaccount "test-sa" deleted
➜  ~ k get secrets 
No resources found in default namespace.
```

After deleting the service account, the assigned secret will no longer be listed in the Kubernetes namespace.

For more information on creating a secret for a service account in Kubernetes, check out the official Kubernetes documentation [here](https://kubernetes.io/docs/tasks/configure-pod-container/configure-service-account/).

Hopefully this post was useful to you.
Animation : CSS Bouncy Loader 5 examples. ✨💡
Tags: css, beginners, html, frontend
Published: 2023-03-28 13:24:33

The CSS Bouncy Loader is a simple animation that creates a bouncing effect, typically used to indicate to the user that content is loading.

Here are five examples of different CSS Bouncy Loaders:

**1. Blue Circle Bouncy Loader**

HTML
```
<div class="loader"></div>
```
CSS
```
.loader {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #3498db;
  position: relative;
  animation: bouncy-loader 0.6s infinite alternate;
}
@keyframes bouncy-loader {
  0% {
    top: 0;
  }
  100% {
    top: 20px;
  }
}
```

---


**2 .Red Square Bouncy Loader**

HTML
```
<div class="loader"></div>
```
CSS
```
.loader {
  width: 30px;
  height: 30px;
  background-color: #e74c3c;
  position: relative;
  animation: bouncy-loader 0.5s infinite alternate;
}
@keyframes bouncy-loader {
  0% {
    top: 0;
  }
  100% {
    top: 20px;
  }
}
```

---

**3. Purple Diamond Bouncy Loader**

HTML
```
<div class="loader"></div>
```
CSS
```
.loader {
  width: 30px;
  height: 30px;
  background-color: #9b59b6;
  transform: rotate(45deg);
  position: relative;
  animation: bouncy-loader 0.7s infinite alternate;
}
@keyframes bouncy-loader {
  0% {
    top: 0;
  }
  100% {
    top: 20px;
  }
}
```

---

**4. Yellow Rectangular Bouncy Loader**

HTML
```
<div class="loader"></div>
```
CSS
```
.loader {
  width: 50px;
  height: 30px;
  background-color: #f1c40f;
  position: relative;
  animation: bouncy-loader 0.8s infinite alternate;
}
@keyframes bouncy-loader {
  0% {
    top: 0;
  }
  100% {
    top: 20px;
  }
}
```

---

**5. Green Triangle Bouncy Loader**

HTML
```
<div class="loader"></div>
```
CSS
```
.loader {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 30px solid #2ecc71;
  position: relative;
  animation: bouncy-loader 0.6s infinite alternate;
}
@keyframes bouncy-loader {
  0% {
    top: 0;
  }
  100% {
    top: 20px;
  }
}
```

---

These are just a few examples of the CSS Bouncy Loader. You can customize the animation by adjusting the size, shape, color, and timing to create your own unique loader.

Hope you like it.

That’s it — thanks.
Jet-Speed JavaScript Learning Resources
Tags: javascript, webdev, beginners, tutorial
Published: 2023-03-28 13:17:16

For those who want to start with JavaScript but want to jump into projects without wasting time, I am sharing some resources below 👇 that will help you establish a solid foundation quickly and start working on projects in 1-2 weeks 🚀 the rest is up to you ...


---

### JavaScript Info

website: https://javascript.info

I argue with everyone, it can't get any better than this. It's a work that I support and PR on time. Everything related to JS is written in an explanatory way.


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

---

### w3Schools

website: https://w3schools.com/js

It's kind of like a dictionary. The order in the Sidebar is just right, you can complete your JS foundation in a short time by going through it.

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

---

### GeeksForGeeks

website: https://geeksforgeeks.org/javascript/

Compared to w3, it is a little more detailed, with plenty of examples, and offers you a more collected version of the topics.

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

---

### Video Soruce

source: https://www.youtube.com/watch?v=lI1ae4REbFM

Finally; For those who say I understand better than video, I leave one of the best Crash Courses I've seen for JS:
Code Smell 204 - Tests Depending on Dates
Tags: webdev, javascript, beginners, programming
Published: 2023-03-28 12:49:02

*It is a good idea to assert something has happened in the future*

> TL;DR: Tests must be in full control and you can't manage time.

# Problems

- Fragile Tests

- CI/CD Breaks

# Solutions

1. Tests should be always in full environmental control.

2. Create a time source

# Context

I read a [Tweet](https://twitter.com/housecor/status/1639975667713409030) about adding a fixed date to check for the removal of a feature flag (which is another [code smell](https://maximilianocontieri.com/code-smell-29-settingsconfigs)).
The test will fail in an unpredictable way preventing releases and breaking CI/CD pipeline.
There are also other bad examples we will never reach some date, tests running at midnight, different timezones, etc.

# Sample Code

## Wrong

[Gist Url]: # (https://gist.github.com/mcsee/7e96669a0239ea203c90423e2e08b22d)
```java
class DateTest {
    @Test
    void testNoFeatureFlagsAfterFixedDate() {
        LocalDate fixedDate = LocalDate.of(2023, 4, 4);
        LocalDate currentDate = LocalDate.now();        
        Assertions.assertTrue(currentDate.isBefore(fixedDate) || !featureFlag.isOn());
    }
}
```

## Right

[Gist Url]: # (https://gist.github.com/mcsee/3ccfe6623e9eea63c135afa59c4dbf4f)
```java
class DateTest {
    @Test
    void testNoFeatureFlags() {   
        Assertions.assertFalse(featureFlag.isOn());
    }
}
```

# Detection

[X] Semi-Automatic 

We can check assertions based on time on our tests.

# Tags

- Testing

# Conclusion

Proceed with caution with tests and dates. 

They are often a cause of mistakes.

# Relations

https://maximilianocontieri.com/code-smell-52-fragile-tests

# More Info

{% twitter 1639975667713409030 %}

# Disclaimer

Code Smells are my [opinion](https://maximilianocontieri.com/i-wrote-more-than-90-articles-on-2021-here-is-what-i-learned).
  
* * *

> Each pattern describes a problem which occurs over and over again in our environment, and then describes the core of the solution to that problem, in such a way that you can use this solution a million times over, without ever doing it the same way twice.

_Christopher Alexander_
 
https://maximilianocontieri.com/software-engineering-great-quotes

* * *

This article is part of the CodeSmell Series.

https://maximilianocontieri.com/how-to-find-the-stinky-parts-of-your-code
openGauss joins CNCF Landscape
Published: 2023-03-08 03:31:27

On March 5, 2023, Beijing time, openGauss joined CNCF Landscape and belongs to the Database category. As of March 5, 2023, CNCF Landscape has collected 1,174 projects, 3,645,319 stars, a market value of 20.7 trillion U.S. dollars, and a capital of 66.9 billion U.S. dollars, which shows that developers and users pay attention to and value this project.

https://landscape.cncf.io/?selected=open-gauss

The CNCF Landscape panorama includes products and solutions with a mature community or a wide range of use and the best time for users to choose in practical applications.

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

About openGauss:

openGauss is an enterprise-level open source database, oriented to core business scenarios, and supports the digital transformation of enterprise business. Since its official open source launch on June 30, 2020, it has continued to make breakthroughs in core database technologies, and has jointly built a domestic database open source root community with industry chain partners, jointly prospering the database open source ecosystem, and applying it on a large scale in core industry scenarios. The fastest open source database community.

About CNCF Landscape

Cloud Native Computing Foundation, referred to as (CNCF), Chinese name: Cloud Native Computing Foundation, is a foundation under the Linux Foundation. The foundation is committed to promoting the development of cloud-native computing technology and ecology. Its vision is MAKE CLOUD NATIVE UBIQUITOUS, and it is one of the most influential organizations in the cloud/open source field.

In order to better manage and promote the cloud-native ecosystem, CNCF established the Landscape project in 2016 to provide a resource map for native applications and help enterprises and developers quickly understand the overall picture of the cloud-native system. CNCF Landscape tracks a large number of applications across the ecosystem by categorizing most projects and products in cloud native technologies. The CNCF Landscape roadmap helps users sort out the best process of the entire cloud-native application from the practical steps.

Looking to the future

Joining CNCF Landscape this time shows that openGauss has made a series of progress in terms of maturity and community sustainability. Looking forward to the future, with the maturity of openGauss itself and its ecological components, openGauss can continue to lead innovation, prosper the ecology, and attract more cloud-native enterprises to join the community, thereby helping various industries to move towards digital transformation.