teleren/devto huggingface dataset:
Open Source CI/CD Workflows
Tags: devops, opensource, python, showdev
Published: 2022-07-11 20:51:00

We are officially releasing our Open Source version of TruStacks! 

Your experience and unique subject matter expertise will make this vision possible. There is still much to be done, but here is a look at the WIP and Roadmap items:

#### WIP
Core CLI/API:
- react application creation
- integrated secrets management (sops/age)

Components:
- Keycloak
- Vault
- Argo Workflows
- SonarQube

React workflow enhancements:
- API contract testing
- UAT
- Load Testing
- Environment promotion
- VSCode development container

Odoo workflow enhancements:
- runbot test
- odoo module deployment

General:
- OSS License (probably GPL3/LGPL3)

#### Roadmap
- Contributor docs
- ExpressJS workflow
- FastAPI workflow
- VueJS workflow
- .Net/C# workflow
- Flutter workflow
- Golang workflow
- Dogfooding TruStacks workflows to build TruStacks Core (🤯)


Join the Discord Channel to stay up to date with future updates and releases. Stay tuned for more info!

https://discord.gg/dWxfprxU
[PURE CSS] border animation without svg
Tags: codepen
Published: 2022-07-11 20:30:01

I improved the code you shared with us, it now work with variable size and can be placed everywhere, maybe that will interest you :)

This is the CSS you can put it in a file:
``` 
:root {
    --box-width: 200px;
    --box-lenght: 200px;

    --box-animation-width: calc(var(--box-width) + 20px);
    --box-animation-lenght: calc(var(--box-lenght) + 20px);
}

.animbox::before,
.animbox::after,
.animbox {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.animbox {
    width: var(--box-width);
    height: var(--box-lenght);
    margin: auto;
    color: #69ca62;
    box-shadow: inset 0 0 0 1px rgba(105, 202, 98, 0.5);
}

.animbox::before,
.animbox::after {
    content: "";
    z-index: -1;
    margin: -10px;
    box-shadow: inset 0 0 0 2px;
    animation: clipMe 8s linear infinite;
}

.animbox::before {
    animation-delay: -4s;
}

.animbox:hover::after,
.animbox:hover::before {
    background-color: rgba(255, 0, 0, 0.3);
}

@keyframes clipMe {
    0% {
        clip: rect(0px, var(--box-animation-width), 2px, 0px); /*  ligne du haut */
    }
    25% {
        clip: rect(0px, 2px, var(--box-animation-lenght), 0px); /* ligne de gauche */
    }
    50% {
        clip: rect(calc(var(--box-animation-lenght) - 2px), var(--box-animation-width), var(--box-animation-lenght), 0px); /*  ligne du bas */
    }
    75% {
        clip: rect(0px, var(--box-animation-width), var(--box-animation-lenght), calc(var(--box-animation-width) - 2px) ); /* ligne de droite */
    }
    100% {
        clip: rect(0px, var(--box-animation-width), 2px, 0px); /* ligne du haut */
    }
}

html,
body {
    height: 100%;
}

body {
    background-color: #0f222b;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

.animboxpospadding {
    padding-top: 250px;
    position: relative;
    margin: 50px;
}
```

And if you want to use it with a relative position : 

```
<div class="animboxpospadding">    
        <div>
            <div class="animbox"></div>
        </div>
    </div>
```

How this can be useful for any of you

---
<p>single element animation icon~</p>

<p>inspired by:<br>
<a href="http://tympanus.net/Tutorials/BorderAnimationSVG/" target="_blank">http://tympanus.net/Tutorials/BorderAnimationSVG/</a><br>
&amp;<br>
<a href="http://mopcon.org/2014/news.php" target="_blank">http://mopcon.org/2014/news.php</a></p>

<p>brower support:</p>

<ul>
<li>
<a href="http://caniuse.com/#feat=css-animation">animation</a>: IE10+</li>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/clip#Browser_Compatibility">clip</a>: all browser</li>
</ul>

{% codepen https://codepen.io/Rplus/pen/abPLGx %}
Use macbook m1 GPU to train tensorflow model
Tags: tensorflow
Published: 2022-07-11 20:27:58

By default when you train model with `model.fit`, it will still use your CPU (Macbook m1), you can let it use GPU train with an extra installation:

```bash
python -m pip install tensorflow-macos
python -m pip install tensorflow-metal
```

Tested in my Macbook Air m1, it will speed up around 3 times.
Express Middlewares
Tags: javascript, beginners, node
Published: 2022-07-11 20:22:58

Middleware functions are functions that have access to the request object (req), the response object (res), and the next middleware function in the application’s request-response cycle.

Example:

`const logger = (req,res,next) => {
   //whatever piece of code written here can be accessed by other functions
   //always the next function has to be called
   next()
}`
How to create and use custom shell commands?
Tags: beginners, programming, tutorial, news
Published: 2022-07-11 19:45:26

Each of us had a situation, where we had to invoke a few, same commands each time. Making it once is not that problematic, but when we are supposed to repeat given operations, it may be better just to create one function that will handle it all.

## Create own functions

To create our own functions, firstly we need to open a new terminal. By default, we ought to be in the root directory (~), but to be sure you can execute the following command:

```bash
cd ~
```

and hit enter.

Right now, we can create a new file, in which we will store our function with commands. To do it, execute this:

```bash
touch .custom_bash_commands.sh
```

The naming convention is up to you, in this case, the file will be named `.custom_bash_commands.sh` , where `'.'` at the beginning means it is a hidden file. To see all of the hidden and visible files, you can just do `ls -a`.

Once we have created the file, we can open it. To do so, you can use VIM or your favorite text editor. I will be using Visual Studio Code. For that, I will execute the following command in my current directory:

```bash
open -a 'Visual Studio Code' .custom_bash_commands.sh
```

Now, we can create our function by following:

```bash
#!/bin/bash

function mix_all(){
  echo "mix format"
  mix format
  echo "mix static.credo"
  mix static.credo
  echo "mix dialyzer"
  mix dialyzer
  echo "mix test"
  mix test
}
```

The first line is just a convention, which is used while creating Scripts. Next, we have function declaration, which is called `mix_all` .

We use `echo` command to print out the following state. Of course, this is just a sample function, you can use whatever you want to up here.

[Read more...](https://curiosum.com/til/create-and-use-custom-shell-commands)
VS Code Tip of the Week: 3-way Merge Editor
Tags: vscode, git, vscodetips
Published: 2022-07-11 19:42:46

If you haven't already, grab the [June 2022 Release of VS Code](https://code.visualstudio.com/updates/v1_69)! If you're on Insiders, then there's nothing you need to do.

There are all kinds of goodies in the release, but this week's tip is a new feature that landed in VS Code. The [3-way Merge Editor](https://code.visualstudio.com/updates/v1_69#_3-way-merge-editor). 🔥

One thing you'll need to do to enable it is add `git.mergeEditor: true` to your user settings. If you prefer the GUI for settings, then navigate to the git section.

![VS Code command palette with the word settings typed in it showing a filtered list of commands that have the word settings in them](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nfkous81j7gl3h6w8xaf.png)

![VS Code Settings (GUI) view with the word merge entered in the search to filter settings with the word merge in them](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p1x3z0gur3qu40pgysmt.png)
 

Make sure to check *Git: Merge Editor*

![The Git: Merge Editor user setting checked](https://community.vscodetips.com/uploads/articles/6xnruqtzc0uxwe5bfb66.png)

And that's it and you are good to go!

![Git 3-way merge editor in action in VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2co1nz57h3dubxa57gbs.png)
Stop All Docker Compose Related Containers
Tags: docker
Published: 2022-07-11 19:41:17

I jump around between projects very frequently, and often those projects use Docker Compose. When moving around I typically go to start Docker Compose in the project I'm about to work on, realize I left it running in another, and then have to `cd` back to the other directory, stop things, and then `cd` back.

Today I finally decided to fix the problem. Here's a one-liner that will stop all Docker Compose related containers across your system, regardless of directory:

```
docker ps -q --filter label=com.docker.compose.project.working_dir | xargs docker stop
```

Running that will stop all containers without you having to `cd` into other directories.
The bun is out 🥟
Tags: javascript, tooling, webdev, node
Published: 2022-07-11 19:39:36

👋🏽 Meet Bun: the brand new, all-in-one JavaScript runtime that can install `npm` packages faster than `yarn` and faster than `npm` and claims to be 3x faster than both `Deno` and `node.js`. Oh, last small fact it was all built by one person [Jarred Sumner](https://twitter.com/jarredsumner).

So, what is Bun?
A new JavaScript runtime, so you don't need any longer `node.js`, or `Deno`, so ahead and uninstall them for your system now, just kidding we will still need them for a while.
`Bun` just announced it's beta release and makes the claims that it's significantly faster that `node.js` and `Deno`.

![unistall nodejs deno](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i8gym9eu1hy1uirkqq4d.png)

But before we continue let's clarify something.
### What is a JavaScript Runtime?

![V8 engine](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d9538pimjq05k14yjjl3.png)

Let's think for a moment JavaScript  by itself it's not very useful and it's needs to run thru an engine to convert it to machine code for a CPU.

The most popular JavaScript engine is google's V8, which powers `chrome`, `node.js` and `Deno` and makes execution very fast with JIT (Just in time compilation).

Now JavaScript together with the engine it's not very useful, we still something else, the developers want that the engine will provide a user-friendly API(WebSockets, file system and more). So JavaScript Runtime it's all this together(JavaScript engine and APIs), that only what is missing for the developers is to write JavaScript and it will run on this platforms.

#### 🍞 So what it's so special with `bun`?
 
First they are talking about better performance, but how they actually make it so fast 🤔?

- It doesn't use V8 😱, but instead use JavaScript Core from Webkit, this engine it's consider faster but more difficult to work with.

![V8 JSCore](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a8i9pau0pw8nikmpdnxh.jpg)
 
- It's written in a low level programing language called `zig`, a relative new language similar to `C` or `Rust`.

- Is all-in-one run time:
    - Native bundler to replace tools like `webpack`
    - Native transpiler, so you can write `TS` code out of the box
    - Will also transpile your `JSX` not supported yet?
    - Support node core modules
`import {readFile| from node:fs`
    - Support node APIs, which allow to `npm` packages to also work in bun
    - Implements node's module resolution algorithm, which means you can install packages from `npm` into bun and this packages install much faster, like magic 🪄. 
    - Automatically loads environment variables from `.env` files. No more require("dotenv").load()
    - Own test runner, similar to Jest


🪄Installing `npm` packges feels like magic 🪄
This is a small/medium project example

![bun Vs npm](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yi3wuj2k9c1avt2s9dre.gif)
 

Sounds amazing, but remember this project it's on it's early days and there will be bugs 🐛.

### Resources
[Bun](https://bun.sh/)

Thanks for reading
What was your last mistake as a Programmer?
Tags: job, mistake, errors, bug
Published: 2022-07-11 19:20:26

---
title: What was your last mistake as a Programmer?
published: true
description: I will explain my last mistake as a web developer, and hopefully will hear from others what was their last mistake they did.
tags: job, mistake, error, bug
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kl6joxxysc6dvpngwrrd.jpg
# Use a ratio of 100:42 for best results.
---
<small>Photo by <a href="https://unsplash.com/@elisa_ventur?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Elisa Ventur</a> on <a href="https://unsplash.com/s/photos/face-error?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a></small>

I think that all newcomers need to hear that all developers make mistakes. They should not worry about this, but if possible fix their mistakes and learn from them.

I'll start with my last mistake done today. I'm Web Developer working with JavaScript. I've created a PR with small change that was reviewed and in one of the comment fellow developer added a comment about one function. I've planed to use that function in two places, but decided to delete that other place, after CR I've added that code back but with a bug that throw error when deploy to our dev environment.

The code looked like this:

```javascript
import { scoreValue } from '../../../../utils/scoreValue'
```

when I first added this code, before I deleted the code, got error that `scoreValue` was already defined so I've changed the code to:

```javascript
import { scoreValue as calculateScoreValue } from '../../../../utils/scoreValue'
```

and it was working. The problem was that after CR when I added that change back I forget that renaming of the variable and it thrown an error when building the project.

Our PM (Project Manager) that trigger deploy (yes I know this should be CI/CD) written on our group chat that the build was failing. I quickly fix the issue and this time he did the CR (because my colleague was not available at this moment) and the fix was done.

Luckily I don't have any issues with production environment, and this was just minor problem that was fixed quickly. But it was my mistake that I did. This should not happen I should check local build. We have live reload in the project and the error was in the console.

What was your last mistake you did at your work? Share in the comment below. It may help fellow developers to understand that everybody make mistakes.
Build a Group Video Call System using PHP,Javascript + WebRTC Day 7
Tags: webrtc, webdev, php, programming
Published: 2022-07-11 18:46:30

WebRTC unlocks the possibility that people can create any video chat app they like. The freedom that WebRTC grants makes the technology highly competitive against traditional video chat apps like Skype.In this video we'll cover getting started with webSocket
{% youtube iIKhHJtztoY %}
Running Typescript scripts in node using esbuild
Tags: esbuild, tools, typescript, node
Published: 2022-08-19 16:37:29

---
title: Running Typescript scripts in node using esbuild
published: true
date: 2022-07-11 18:22:00 UTC
tags: esbuild,tools,typescript,nodejs
canonical_url: https://www.jonathancreamer.com/running-typescript-scripts-in-node-using-esbuild/
---

 ![Running Typescript scripts in node using esbuild](https://www.jonathancreamer.com/content/images/2022/07/IMG_7069.jpg)

Typescript is hands down my favorite way to write Javascript these days, but sometimes when I just want to run a quick JS script to do something, I'll still reach for `node ./foo/script.js`. I'll sometimes reach for `babel-node``, or `@babel/register`, but that can be pretty difficult to configure sometimes, and has some perf issues.

It does work though, and I have a post on it...

[

Running Typescript programs with babel-node aka how does babel register work

Running Typescript programs on demand with babel-node basically uses babel register, but how does babel register work? This post will detail it.

 ![Running Typescript scripts in node using esbuild](https://www.jonathancreamer.com/content/images/size/w256h256/2021/03/jclogo-1.png)Jonathan CreamerJonathan Creamer

 ![Running Typescript scripts in node using esbuild](https://www.jonathancreamer.com/content/images/2020/12/IMG_7214.JPG)
](https://www.jonathancreamer.com/running-programs-with-babel-node/)

However, I recently discovered that ESBuild has a similar mechanism to babel-node called `esbuild-runner`.

[

esbuild-runner

Super-fast on-the-fly transpilation of modern JS, TypeScript and JSX using esbuild. Latest version: 2.2.1, last published: 10 months ago. Start using esbuild-runner in your project by running `npm i esbuild-runner`. There are 13 other projects in the npm registry using esbuild-runner.

 ![Running Typescript scripts in node using esbuild](https://static.npmjs.com/1996fcfdf7ca81ea795f67f093d7f449.png)npm

 ![Running Typescript scripts in node using esbuild](https://static.npmjs.com/338e4905a2684ca96e08c7780fc68412.png)
](https://www.npmjs.com/package/esbuild-runner)

It's SUPER easy to use as well.

```
> npm i esbuild esbuild-runner
```

Then, anytime you run a `.ts` file, you do...

```
node -r esbuild-runner/register ./path/to/script.ts
```

And it's stupid fast...

![Running Typescript scripts in node using esbuild](https://www.jonathancreamer.com/content/images/2022/07/image-1.png)

I hope to employ `esbuild-runner` in some more local developer tooling so developers don't have to pre-compile or build their tools.
A Chain adding function
Tags: programming, python, oops, mathematic
Published: 2022-07-11 18:19:24

We want to create a function that will add numbers together when called in succession.

```
add(1)(2) # equals 3
```
We also want to be able to continue to add numbers to our chain.

```
add(1)(2)(3) # 6
add(1)(2)(3)(4); # 10
add(1)(2)(3)(4)(5) # 15
```
and so on.

A single call should be equal to the number passed in.

```
add(1) # 1
```
We should be able to store the returned values and reuse them.

```
addTwo = add(2)
addTwo # 2
addTwo + 5 # 7
addTwo(3) # 5
addTwo(3)(5) # 10
```
We can assume any number being passed in will be valid whole number.

Sample Tests-

```
import codewars_test as test
from solution import add


@test.it("Basic tests")
def _():
    test.assert_equals(add(1), 1)
    test.assert_equals(add(1)(2), 3)
    test.assert_equals(add(1)(2)(3), 6)
```



_Solution- ###Python_

```
class add(int):
    def __call__(self, n):
        return add(self + n)
```
Working with Elements | Selenide Tutorial Series
Tags: webdev, java, testing, beginners
Published: 2022-07-11 18:19:23

In this post, we will learn how to work with web elements using Selenide. We will look into different locator strategies such as find by ID, CSS Selector as well as XPath.

### The $ command
All Selenide elements journey begins with the `$` command. To work with any selector you will add `$(selector)` and then take any action on that selector such as `.click` or `.setValue` etc..

This is equivalent to doing `driver.findElement(selector)` for those of you that are familiar with Selenium Java.

---
 
**Check out the video below to learn about how to work with elements in Selenide:**

{% youtube ywVQMxm0lDI %}

---

### Find by ID
To find an element by ID in Selenide, you can do it using the `By.id` –

```
$(By.id("get-started")).click();
```

The above command will command will find an ID called “get-started” in the DOM and then perform a click action on it.

### Find by CSS Selector
By default with Selenide, any string you add in the selector, it will consider that as a CSS Selector. For example –

```
$("h1")
    .shouldHave(text("Think different. Make different."));
```

With CSS Selector, you do not need to provide `By.something` which makes working with css selectors quite easy.

### Find by XPath
XPath works similarly to ID, you need to specify that you are trying to find element by xpath like this –

```
$(By.xpath("//a[@class=\"custom-logo-link\"]"))
    .should(be(visible));
```

---

So these are the three most common strategies you will be using to find element in Selenide. Simply add in the `$` command and provide the selector strategy after that and Selenide will take care of finding that element and returning that back to you.

---

📧 Subscribe to my [mailing list] (https://automationbro.com/mailing-list) to get access to more content like this as well as be part of amazing free giveaways.

👍 You can follow my content here as well - 
- [Twitter](https://twitter.com/automationbro)
- [LinkedIn](https://www.linkedin.com/company/automation-bro)

...

I love coffees! And, if this post helped you out and you would like to support my work, you can do that by clicking on the button below and buying me a cup of coffee -

<a href="https://www.buymeacoffee.com/automationbro">![Buy me a coffee](https://dev-to-uploads.s3.amazonaws.com/i/4aw2ub3f4qkyjk0ivwt4.png)</a>
Gadget update: June 2022
Tags: shopify, news, serverless, webdev
Published: 2022-07-11 17:37:50

**What's Gadget?** We're the serverless stack for ecommerce app developers. Connect to any ecommerce platform instantly, and build your app in a fraction of the time by skipping the busywork. Sign up for free at [gadget.dev](https://www.gadget.dev/?utm_source=devto&utm_medium=social&utm_campaign=newsletter-2022-06)

---

![Atomic API pink hero image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ig2shp3wxxdd2999o6n.png)

## Atomic API operations
Gadget now supports transactionally consistent, atomic, increment and decrement operations for any numeric field in your app.

[Read blog post](https://gadget.dev/blog/announcing-atomic-api-operations?utm_source=devto&utm_medium=social&utm_campaign=newsletter-2022-06)
<br>

![EncryptedString hero image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d9rhd0t5x308ujh8levt.png)
## New field type: EncryptedString
The new field type _EncryptedString_ allows you to securely store and fetch sensitive data using two-way encryption in any of your models.

[Learn more](https://docs.gadget.dev/guides/building-models#password-and-encryptedstring?utm_source=devto&utm_medium=social&utm_campaign=newsletter-2022-06)
<br>

![Live logs hero image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p7e7t31jxq059p6ti0yb.png)
## Live logs results
Tired of hitting the run query button in Gadget’s logs? No longer. The log viewer can now perform a live query, which retrieves and shows new log events on demand, as they happen.
<br>

## Waiting to build public Shopify apps?

The first public Shopify apps built on Gadget are on their way into the Shopify app store, and the feature will soon be available to everyone. [Book some time](https://calendly.com/mohashemi/public-app-beta-demo?utm_source=devto&utm_medium=devto&utm_campaign=gadget-newsletter-2022-june&month=2022-07) with Gadget co-founder Mo to learn how you can speed up your next public app launch using Gadget.
<br>

## New & noteworthy
**How to: environment variables**
Not already using Gadget’s environment variables? Not sure if you should? We published a [blog](https://gadget.dev/blog/using-environment-variables) with examples and sample code of how you can leverage them in your project.
 

**Unique validations can now be scoped by another field**
Compound uniqueness indexes are now supported by the unique validation. This allows you to validate uniqueness within subsets of your data, not just one field, with real DB level consistency.
 

**Get support without leaving your app**
Need help? You can now chat with us from inside your app. Just hit the “Talk to us” button at the bottom-left corner, and someone from the Gadget team will help.

---

Itching to build something? Sign up and use Gadget for free today at [Gadget.dev](https://www.gadget.dev?utm_source=devto&utm_medium=social&utm_campaign=newsletter-2022-06)