teleren/devto huggingface dataset:
Returning To The FUNdamentals
Tags: webdev, career, fundamentals, javascript
Published: 2022-12-30 00:30:13

I'm sorry I capitalized the fun. Not a lot sorry, but a little sorry.

Anyhow, I've been learning web development for the past seven months or so and making steady progress. Progressively biting off bigger chunks and figuring out how to chew 'em and trying to get a drink from the information firehose that is the world of programming.

After a several-months long stint of learning about basic backend concepts (HTTP, routing, wtf is Express and how do i fetch() it?), I've wound my way back to some basics. Making a super basic HTML/CSS landing page for my dog ([hi, Pickle!](https://austin-bagwell.github.io/odin-landingPage/)), working on JavaScript basics with some codewars kata, all that jazz.

I'm reminded of how much I've learned - and how much I still need to learn. At this point I feel like I have a few of the bigger picture concepts down. I know basic bits about the base components of the web stack... frontend, backend, I touched MySQL once or twice... basics, right? I've created a server and set up simple routes that actually send data to and from the frontend that I also wrote. I've styled some pages with CSS. Not well, mind you. I've quickly learned that I am no great designer.

I've take a quick tour of the whole stack, and now I'm back to square one - refining the fundamentals. Can I make my elements more semantic? My class names less obscure? My JavaScript significantly less obtuse? I can!

Focusing on the fundamentals feels good, full stop.

That being said I also started learning Angular... please send your well wishes and reading recommendations, I'm gonna need them!
TIL: setting up proxy server on vite
Tags: vite, proxy, javascript, tutorial
Published: 2022-12-29 21:04:53

So, Today I learned how to setup a proxy server on vite. I was tired of seeing this kind of lines over an over:

`axios.get('localhost:5001/api/products/1234')`

so, first approach was to create a `.env.local` and set there a env variable like this:

`VITE_API_BASE_URL="localhost:5001"` 

this way my initial code would look like:

```
const API_BASE_URL = import.meta.env.VITE_API_BASE_URL
axios.get(`${API_BASE_URL}/api/products/1234`)
```

but this approach add this new line each time I need to get the API_BASE_URL.

So I decided to setup a proxy server. This is useful not only for "making URLs shorter" but for overcoming CORS issues if your api is in a host other than "localhost".

```
export default defineConfig({
  plugins: ...,
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:5001',
        changeOrigin: true,
        secure: false,
      }
    }
  }
})
```

## Loading target from .env
let's say you would like to change that target prop based on the environment you are running the application.

You can do it by checking the command or the mode, but I recommend load the `.env` file and using the VITE_API_BASE_URL we already defined.

```
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '');

  return {
    plugins: ...,
    server: {
      proxy: {
        '/api': {
          target: env.VITE_API_BASE_URL,
          changeOrigin: true,
          secure: false,
        },
```
this way, the target will depend on the VITE_API_BASE_URL defined on the .env which should be different on production, staging or local.

## Fixing "http proxy error ECONNRESET"
Even if the request are succeding (by checking the network inspector) there is an error logged by vite on the terminal.

`http proxy error ECONNRESET at TLSWrap.onStreamRead` 

for every single request which gets proxied.

So the answer posted [here](https://github.com/vitejs/vite/issues/4794#issuecomment-957095720) does the trick.

You will need first to add **https** as a dev dependency by doing: `npm i -D https`

and then importing on the top of `vite.config.js`:

```
import http from "https";
```

and then adding the agent prop on the proxy key `/api` we just created:

```
server: {
      proxy: {
        '/api': {
          target: env.VITE_API_BASE_URL,
          changeOrigin: true,
          secure: false,
          agent: new http.Agent()
        },
```

Hope this helps somebody to save some minutes on your next project. Happy coding!

Official docs can be found here: [vite server proxy options](https://vitejs.dev/config/server-options.html#server-proxy)
Another Humbling Challenge
Tags: webdev, beginners, javascript, css
Published: 2022-12-30 00:28:39

I completed a second challenge today on Frontend Mentor but it didn't go as planned. I was completely lost when it came to implementing some JS to make it function properly. I did a lot of research and eventually found a solution to the exact challenge on CodePen.io. I recycled the code and through that sort of retro-engineering process I was able to learn a lot about concepts I didn't even know existed. I was comfortable with the HTML and CSS but I didn't even know where to begin with the JS. I spent time experimenting within the source code to check for understanding and it was a great experience...but I have my work cut out for me. Thank you to anyone that shares their source codes on CodePen, you are true MVPs.
Binary Search Java
Published: 2022-12-30 00:01:12

Binary search is a fundamental algorithm that is used to efficiently locate a specific element within a sorted array. It has a time complexity of O(log n), making it significantly faster than linear search, which has a time complexity of O(n).

In order to implement binary search in Java, it is important to first ensure that the array being searched is sorted. This can be done using a sorting algorithm such as quicksort or mergesort.

There are two common approaches to implementing binary search: iterative and recursive. The iterative approach involves using a loop to repeatedly divide the search interval in half until the element is found, while the recursive approach involves using a recursive function to continually divide the search interval in half until the element is found.

Here is an example of binary search implemented using an iterative approach:
```
public class BinarySearch {
  public static int binarySearch(int[] arr, int x) {
    int low = 0;
    int high = arr.length - 1;
    int mid;

    while (low <= high) {
      mid = low + (high - low) / 2;

      if (arr[mid] < x) {
        low = mid + 1;
      } else if (arr[mid] > x) {
        high = mid - 1;
      } else {
        return mid;
      }
    }

    return -1;
  }
}
```
And here is an example of binary search implemented using a recursive approach:
```
public class BinarySearch {
  public static int binarySearch(int[] arr, int x, int low, int high) {
    if (low > high) {
      return -1;
    }

    int mid = low + (high - low) / 2;

    if (arr[mid] < x) {
      return binarySearch(arr, x, mid + 1, high);
    } else if (arr[mid] > x) {
      return binarySearch(arr, x, low, mid - 1);
    } else {
      return mid;
    }
  }
}
```

It is important to thoroughly test your implementation of binary search to ensure that it is working correctly and efficiently. This can be done by testing with various sizes and types of input data, as well as edge cases such as the element not being present in the array.

By using binary search, you can improve the performance of your code and effectively locate specific elements within a sorted array.
Semantic Search with OpenAI Embeddings and Pinecone
Tags: webdev, openai, pinecon, javascript
Published: 2022-12-29 23:34:15

Demo link: https://semantic-search.mharrvic.com
Repo link: [https://github.com/mharrvic/semantic-search-openai-pinecone](https://github.com/mharrvic/semantic-search-openai-pinecone)

This is a demo app that shows how to use [OpenAI Embeddings](https://beta.openai.com/docs/guides/embeddings) and [Pinecone](https://pinecone.io) vector database to build a semantic search engine. Based on https://docs.pinecone.io/docs/semantic-text-search. You can run explore this freely(deploy it yourself) using the free tier of Pinecone and OpenAI.



![Semantic search](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ut1ufnxxiyiutoiiiivj.png)



## Tech Stack

- [Next.js](https://nextjs.org)
- [NextAuth.js](https://next-auth.js.org)
- [Prisma](https://prisma.io)
- [Tailwind CSS](https://tailwindcss.com)
- [tRPC](https://trpc.io)
- [Pinecone vector db](https://pinecone.io)
- [OpenAI Embeddings](https://beta.openai.com/docs/guides/embeddings)
- [NeonDB serverless postgres db](neon.tech)





## Learn More


## Input record

![Input Record](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7jfe25km2zytgqg2tj3y.png)



### Query


![Query](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i9kdbegsrdscae6ptca8.png)



I recommend to watch this [youtube video](https://www.youtube.com/watch?v=5MaWmXwxFNQ) from AssemblyAI to learn more about embeddings.
fazendo Modal em 30 segundos !
Published: 2022-12-29 22:46:28

A tag <dialog> é uma das mais recentes adições à linguagem HTML e foi criada para facilitar a criação de diálogos ou caixas de diálogo em páginas da web. Ela permite exibir conteúdo em uma caixa flutuante, que pode ser fechada pelo usuário a qualquer momento.

Para utilizar a tag <dialog>, basta inseri-la no código HTML e adicionar o conteúdo que deseja exibir dentro dela. Por exemplo:

`<dialog>
  Conteúdo da caixa de diálogo
</dialog>`
Além disso, é possível controlar o estado da caixa de diálogo através da propriedade open, que pode ser definida como true ou false. Se open for definido como true, a caixa de diálogo será exibida quando a página for carregada. Se for definido como false, a caixa de diálogo ficará oculta até que seja aberta pelo usuário.

A tag <dialog> também suporta alguns atributos especiais, como open, close, e show, que permitem que você controle a exibição da caixa de diálogo através de JavaScript.

Em resumo, a tag <dialog> é uma ferramenta muito útil para criar caixas de diálogo em páginas da web, pois oferece uma forma simples e intuitiva de exibir conteúdo flutuante e de controlar o estado da caixa de diálogo através de propriedades e atributos
aqui em baixo apresento um exemplo prático  no codeopen !
{% codepen https://codepen.io/mateusnasciment/pen/LYBNLJQ %}
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8mt3d3ni6e3gwy1p961n.gif)
BASH - Main Commands_(2)
Published: 2022-12-29 22:45:21

## Text file manipulation commands



### Cat

First command is ``cat``. cat writes the contents of a file to the screen.

```
machine@machine:~ cat exemplo

Red
yellow
brown
black
white
purple
blue

```

On the cat, we have the ``-b`` option that numbers the lines that are not blank.

```
machine@machine:~ cat exemplo -b

     1  Red
     2	yellow
     3	brown
     4	black
     5	white
     6	purple
     7	blue

```

Main flags of cat:
  - ``-b`` numbers all non-blank lines.
  - ``-n`` numbers all lines, even blank ones.
  - ``-a`` show special characters and tabs.

Another cat-like command is ``tac``. They read the contents of a file backwards.

```
machine@machine:~ tac exemplo

blue
purple
white
black
brown
yellow
Red
```

### Tail

tail shows the last lines of a file.

``tail <file.txt>``

flags:

- ``-n5`` show the last 5 lines of the file
- ``-n10`` lasts ten lines.

In this flag above you can define the number of lines you would like to see, just change it.

### Head

The head command displays the first 5 lines of a file.

flags:

- ``-n5`` show the first 5 lines of the file
- ``-n10`` First ten lines.
- ``-c10`` Displays the first ten characters of the file

``Wc``

wc counts the number of characters, words, lines and bytes in a file.

``wc <file.txt>``

flags:

- ``-l`` specifies number of lines
- ``-w`` specifies number of words
- ``-m`` specifies number of characters
- ``-c`` specifies number of bytes

### Sort

The use of sort is to sort the contents of a file.

``sort <file.txt>``

With the ``-r`` option, reverse order is also possible.

### Uniq

uniq writes to output without repeating words from a file

- ``-u`` show lines that have not been repeated
- ``-d`` show lines that have been repeated
- ``-c`` counts the number of repeated lines

OBS: To be able to use ``uniq`` it must be used together with ``sort`` before being able to sort the file's contents.

______________[<< back](https://dev.to/israellopes/what-is-shell-2mfb)____________________[next page >>]()_____________

[![Texto alternativo da imagem](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ds4alkts3uxq0dsco0nv.png)](https://www.linkedin.com/in/israel-lopes-419a32189)
How to get Clone a private Github repo!?
Tags: github, git, aws, beginners
Published: 2022-12-29 21:13:42

Hello all,

I had a simple problem with `git clone` a private repo to my desktop, I tried many commands from StackOverflow and other websites and issues from GitHub, and nothing my issue not solved

today I solved my problem and want to share my solution with you

everything is about the access token to get access now,

> Create Personal Access Token on Github
> From your Github account, go to Settings => Developer Settings => Personal Access Token => Generate New Token (Give your password) => Fillup the form => click Generate token => Copy the generated Token, it will be something like `ghp_sFhFsSHhTzMDreGRLjmks4Tzuzgthdvfsrta`

after that in your command type

`https://<PERSONAL-ACCESS-TOKEN>@github.com/<user_name"the owner user name " >/<repo_name>.git`
that's it, your repo will get cloned correctly and without any disruptions
<br>
**Note: I copied this post from my classmate @kareemnegm who passed away this year. So please, pray to him. God’s mercy for you, Kareem❤💚🤍💔💔**

<br>
[GitHub](https://github.com/a00ayad00)
[LinkedIn](https://www.linkedin.com/in/a00ayad00)
[Facebook](https://m.facebook.com/a00ayad00)
[Medium](https://a00ayad00.medium.com/)
3 things I learnt about GitLab CI
Tags: continuousdeployment, ci, gitlab
Published: 2023-01-03 20:24:09

---
title: 3 things I learnt about GitLab CI
published: true
date: 2022-12-29 20:50:20 UTC
tags: continuousdeployment,continuousintegration,Gitlab
canonical_url: https://on-sw-integration.epischel.de/2022/12/29/3-things-i-learnt-about-gitlab-ci/?pk_campaign=feed&pk_kwd=3-things-i-learnt-about-gitlab-ci
---

GitLab has a built-in CI system. A GitLab CI pipeline consists of a number of stages. In a stage, a number of jobs are executed in parallel. Jobs are executed as scripts within a docker container.

In the last days I set out to expand my basic knowledge of GitLab CI pipelines (e.g. compiling a Java project with gradle) in order to write a pipelines that compiles, tests and deploys a project to a CloudFoundry instance. Here are 3 things I learnt about.

# Reusing jobs with “extends”

“extends” lets us reuse a job. **It’s kind of “extract to method” refactoring** : suppose I write a job to publish to CloudFoundry. It consists of three steps:

1. install CloudFoundry CLI
2. Login to CloudFoundry
3. Publish app to CloudFoundry

A job that publishes an app to “dev” stage only differs in step 3 to a job that publishes the app to “test” stage. So we write a job that publishes an app to CloudFoundry based on some variables (e.g. “STAGE”)

```
.deploy-to-cf:
  script:
    - install cf cli
    - cf login -u "$CF_USER" -p "$CF_PASSWORD" -a "$CF_URL"
    - cf push -f manifest.yml --var STAGE=$STAGE
```

and then our job “deploy-to-dev” just extends this job and redefines STAGE

```
deploy-to-dev:
  extends: .deploy-to-cf
  variables:
    STAGE: "dev"
  when:
  - develop
```

We can further “refactoring” our CI pipeline by “extracting” the install&login part because we have two CF foundations and therefore, two different values for “CF\_USER” and “CF\_PASSWORD”

# Test results

GitLab CI understands JUnit test result XML and we just need to provides it as artifact report:

```
test:
  script:
    - gradlew test
  artifact:
    reports:
      junit: build/reports/**/TEST-*xml
```

You can see the test results in the pipeline and in the merge request screen.

# Speed up caches

Our pipeline uses the cache to avoid downloading gradle (our build tool) and all dependencies everytime a job builds or tests the code. But it is painfully slow, especially collecting the files and pushing the cache.

In my case it takes several minutes (!) to collect 3000+ files in .gradle dir. Things sped up significantly when adding:

```
variables:
  FF_USE_FASTZIP: "true"
  CACHE_COMPRESSION_LEVEL: "fast"
```

Here is the [documentation](https://archives.docs.gitlab.com/13.9/ee/ci/runners/#artifact-and-cache-settings).

 ![](https://www.epischel.de/analytics/piwik.php?idsite=3&rec=1&url=https%3A%2F%2Fon-sw-integration.epischel.de%2F2022%2F12%2F29%2F3-things-i-learnt-about-gitlab-ci%2F%3Fpk_campaign%3Dfeed%26pk_kwd%3D3-things-i-learnt-about-gitlab-ci&action_name=3+things+I+learnt+about+GitLab+CI&urlref=https%3A%2F%2Fon-sw-integration.epischel.de%2Ffeed%2F)
Accountability without Blame
Tags: agile, teambuilding, collaboration
Published: 2023-03-13 19:59:39

---
title: Accountability without Blame
published: true
date: 2022-12-29 20:18:55 UTC
tags: agile,teambuilding,collaboration
canonical_url: https://medium.com/buildly/accountability-without-blame-166d4e4ec56d
---

![](https://cdn-images-1.medium.com/max/1024/1*K343l9ktAe_THUSAVl3ubA.jpeg)

We’ve been thinking a lot about remote teams and management best practices. One of the most difficult to manage is accountability, or more precisely self accountability and making sure everyone knows that mistakes are expected, and self reporting them is a safe thing to do. Searching for someone to blame for an issue just slows us down when we could be searching for a solution.

Often the best way to avoid the blame game, is to be transparent in everything we do. **For developers that means checking in code all the time. Everyday, multiple times a day.** It shines a light not only on issues you need help with, but how much you can get done in a give day or week. We don’t account by lines of code, but by help given, help asked for and solutions presented. If they work great, if someones else’s worked and you supported them even better.

The point is that accountability is difficult to track even with the best reports, analytics and data. What matters is the productivity of the team, the overall quality and craftsmanship in the code and how much the user appreciates it, even if they can’t see it. Transparency, even radical transparency helps in self accountability as well as quality, but finding solutions rather then seeking who to blame drives the entire team forward.

* * *
Free Virtual Machine for D365FO Development
Tags: vm, microsoft, d365fo, development
Published: 2022-12-29 19:56:14

Microsoft provides a free web based virtual machine for D365FO development for students.
Bear in mind that this environment can be used only for learning purposes only.

In this post we will examine how to set up this type of environment.

First of all, go on the following page:
https://learn.microsoft.com/en-us/training/modules/customize-visual-studio-finance-operations/7-exercise
Here you need to click on button Launch VM mode in order to start launching the virtual environment.


![Launch VM mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m8g1dwd2xadtsfqqjjje.png)

Then sign-in with your email.

![Signin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lw07uvcnut4yi6pngsww.png)

Then a browser will be displayed to enter your details.

![Details](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ljqlhlvdvwmd5ok2gfi3.png) 

Once you have done with the required setup, next the VM will finally be launched and next you will need to enter the password: 

> pass@word1

![Enter credentials](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s5pn1uqqdvmvwmgegp7f.png)

The last thing to be done is to login in to the browser in order to use the client D365FO app. For that purpose use the provided credentials as shown below.

![Login to D365FO app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s03ad868sho7owwzeldr.png)





Please note that this virtual machine has a time limit of 2 hours. After that you will be disconnected from the VM. And all the changes that you was doing are gone once it reach the timeout.

Afterwards you can connect again to the virtual environment with the same credentials and continue learning.
Tail Call Optimization in JavaScript using Trampolines
Tags: javascript, computerscience
Published: 2022-12-29 19:51:30

Continuing on the previous article in this series. With some preparation and slight modifications to our existing code we can perform tail call optimization (TCO) to make an unlimited number of recursive function calls in JavaScript!

Below is the full solution based on [this example](https://stackoverflow.com/a/62376811/101258) from Stack Overflow. We'll break everything down in a moment:

```
class Tco {        
  constructor(func) {
    this.func = func;
  }
  execute() {
    let value = this;
    while (value instanceof Tco)
      value = value.func(); 
    return value;  
  }
}

const tco = (f) => new Tco(f);

function adder(n) {
  const loop = (i) => tco(() => {
    if (i == n) {
      return n;
    }     
    return loop(i + 1);
  });

  return loop(0).execute();
};
                                                                                 
console.log(adder(10)); 
console.log(adder(1000));
console.log(adder(100000));
console.log(adder(10000000));  
```

```
pi@raspberrypi:~/Documents $ node adder.js 
10
1000
100000
10000000
```

# Trampolines

The `Tco` class defines an object with an `execute` function that does the heavy lifting: 

```
    let value = this;
    while (value instanceof Tco)
      value = value.func(); 
    return value; 
```

This is an example of a [trampoline](https://en.wikipedia.org/wiki/Trampoline_(computing)). Sadly, there is no trampoline emoji or I would throw one in here. Anyhow, this `while` loop calls a function `value.func()` that returns either:

- A `Tco` instance to indicate execution is still active. The trampoline will call into that instance again to make another recursive call, or
- A different type of object indicating recursion is complete. This `value` is returned as the final result

# Helper Function

A `tco` function is defined as a helper to make the syntax cleaner:

```
const tco = (f) => new Tco(f);
```

# Modifying our Existing JavaScript Code

The `adder` function's inner `loop` is modified to return an instance of `Tco` via our helper function. 

When we say `return loop` we are returning that instance to the caller rather than calling into `loop` directly! 

Note the `return n` returns our final integer value, terminating the loop:

```
  const loop = (i) => tco(() => {
    if (i == n) {
      return n;
    } 
    return loop(i + 1);
  });
```
     
Finally, we begin our loop by instantiating a `loop` object and calling into its `execute` function to start the `Tco` object's `while` loop:

```
  return loop(0).execute();
```

# Wrapping Up

While this pattern might not be a good idea for writing day to day code it can be a useful tool. Interpreters written in an imperative language such as JavaScript often use a trampoline to implement tail call optimization for the language that they are hosting. For example this would be an excellent start to the core of a Lisp interpreter in JavaScript.

And that's it! Thanks for reading :thumbsup: