teleren/devto huggingface dataset:
Docker Compose to load environment variables
Published: 2023-01-27 05:41:17

Docker Compose is a powerful tool for managing and running multiple Docker containers. It allows you to define your application's services, networks, and volumes in a single "docker-compose.yml" file, and then start and stop all of the services with a single command.

One of the key features of Docker Compose is the ability to set environment variables for the services defined in the compose file. Environment variables are key-value pairs that can be used to configure the behavior of a service, such as setting a database connection string or specifying a particular version of an application.

To set environment variables in a Docker Compose file, you can use the "environment" key in the service configuration. This key accepts a list of key-value pairs, where each key is the name of the environment variable and the value is the value to set. For example, to set the "POSTGRES_USER" and "POSTGRES_PASSWORD" environment variables for a PostgreSQL service, you could use the following configuration:

```
services:
  postgres:
    image: postgres
    environment:
      POSTGRES_USER: myuser
      POSTGRES_PASSWORD: mypassword

```
You can also set environment variables using a .env file, which contains a list of key-value pairs, one per line. To use a .env file with Docker Compose, you need to specify the file in the "env_file" key in the "docker-compose.yml" file. For example:


```
services:
  postgres:
    image: postgres
    env_file:
      - .env

```
This tells Docker Compose to load environment variables from a file named ".env" in the same directory as the compose file.

In addition to setting environment variables in the compose file, you can also pass environment variables to the "docker-compose up" command using the "-e" or "--env-file" option. For example, to set the "POSTGRES_USER" variable to "myuser" when starting the services, you could use the following command:

```
docker-compose up -e POSTGRES_USER=myuser
You can also pass a .env file to the docker-compose command by using the --env-file option like this:

```

```
docker-compose  --env-file .env up

```

In summary, Docker Compose allows you to set environment variables for services in a variety of ways: in the compose file, in a separate .env file, and at runtime using command-line options. This flexibility allows you to easily configure and manage your application's services, making it a powerful tool for development and production environments
How to set environment variables with EAS/Expo and React Native
Tags: environment, variables, eas, reactnative
Published: 2023-01-27 05:33:46

Most of the time your project will need to handle environment variables such as API Url or API key. As it is unsafe to store your keys and sensitive data on Github/Gitlab or hardcoded in your project, the best solution when it comes to React Native project is to benefit from EAS and Expo configuration.

## Prerequisites
Your React Native project should be configured to use EAS, follow [this documentation](https://docs.expo.dev/build/setup/) if it's not the case.

Then if your project is already managed by Expo you should have the `expo-constants` package, if not you can install it following [these instructions](npx expo install expo-constants).

Last you have to install `dotenv` package in your project
```npx expo install dotenv```

## Configure your environment variables
First important thing, at the root of your project you must convert the *app.json* file to *app.config.js* file

### Plaintext environment variables
In your *eas.json* file you can add plaintext/harcoded environment variables that you are comfortable with committing to your source code. For example API Url. 

> **Warning**
> Don't put secrets here!

**eas.json**
![eas](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p78qq3902phyhcltzv6c.png)

Then in your *app.config.js* you must reference these variables like this

**app.config.js**

![extra plaintext](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cs184wyn7bi26v3ny5wn.png)

### Secrets
To manage secrets in your environment variables you have to create a new secret with EAS CLI
```eas secret:create --scope project --name SECRET_NAME --value secretvalue --type string```

To view any existing secrets for your project, run ```eas secret:list```

You can also importing your secrets from a *.env* file
```eas secret:push --scope project --env-file .env```

Then to access your secrets you need to configure your *app.config.js* file

![extra secrets](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a6a7it7gpp8ylc9t7dcs.png)

## Access your environment variables in your project
To use environment variables in your project it is easy using `expo-constants` package.

For example in a screen

![access constants](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3zyklr0ey99a6c05ourb.png)

For more details and configuration you can always to the [official Expo and EAS documentation](https://docs.expo.dev/build-reference/variables/#using-plaintext-environment-variables)
How make zip of images and download it using React JS in 3 Easy steps
Tags: webdev, javascript, programming, react
Published: 2023-01-27 05:14:07

To make zip file of images and download it, which is stored in state variable first we need to install one dependencies,

**Step 1 -- Install JSZIP using npm :**


```
npm i jszip
```

**Step 2 -- then import it inside our JSX file and make instance of it :** 


```
import { useState, useCallback } from "react";
import JSZip from "jszip";


export default Download(){
  
    const [images,setImages]=useState([ // Array of images
      "image1.jpg",
      "image2.jpg",
      "image3.jpg",
      "image4.jpg",
      "image5.jpg",
    ])

    const zip = new JSZip(); // instance of JSZip

return (
        <div>
             <button onClick={handleDownload}>Download</button>
        </div>
      )
}

```

in above code we make one array state variable for store the images if you get this images from server then you use **setImages** to store images inside state.



**Step 3(Final step) -- Write function to make zip of images and download it.**


```
import { useState, useCallback } from "react";
import JSZip from "jszip";


export default Download(){
  
    const [images,setImages]=useState([ // Array of images
      "image1.jpg",
      "image2.jpg",
      "image3.jpg",
      "image4.jpg",
      "image5.jpg",
    ])

    const zip = new JSZip(); // instance of JSZip

    // Function for make zip file and download it

    async function handleZip(){
         // Add Images to the zip file
          for (var i = 0; i < images.length; i++) {
          const response = await fetch(images[i]);
          const blob = await response.blob();
          console.log(blob);
          zip.file(images[i].split("/").pop(), blob);

     

             if (i == selectedImages.length - 1) {
            // Generate the zip file
            const zipData = await zip.generateAsync({
              type: "blob",
              streamFiles: true,
            });
            console.log(zipData);
            // Create a download link for the zip file
            const link = document.createElement("a");
            link.href = window.URL.createObjectURL(zipData);
            link.download = "snapcial-ai.zip";
            link.click();
          }

    }

      return (
        <div>
             <button onClick={handleDownload}>Download</button>
        </div>
      )
}


```



Tadaaaa if it is helpful for you then follow me on linkedin :
_Jaydeep Khachariya_
[](https://www.linkedin.com/in/jaydeep-khachariya-ab4896239/)

if you face any errors then contact me on : **khachariyajaydeep@gmail.com** this email id.
The worst mistake that I made in Common Lisp programming
Tags: commonlisp, pitfall, destructive
Published: 2023-01-27 05:06:25

---
title: The worst mistake that I made in Common Lisp programming
published: true
description: 
tags: commonlisp,pitfall,destructive
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-01-27 03:56 +0000
---

My programs have defects because some functions destroy or mutate shared data. I avoid mutating shared data in Common Lisp; for example, I use CONS. However, I made a mistake by using [SORT](http://www.lispworks.com/documentation/HyperSpec/Body/f_sort_.htm#sort), which wasn't aware that SORT is [destructive](https://gigamonkeys.com/book/they-called-it-lisp-for-a-reason-list-processing.html). Sometimes I still forget that SORT mutates its input data. The function sort-snode below sorts a part of a tree. 

```Lisp
(defun sort-snode (snode attr)
  (flet ((key-fn (r)
	   (cdr (assoc attr r))))
    (sort snode #'< :key #'key-fn)))
```

Since it is based on SORT, it changes the input data, which is snode. After I found the output tree didn't look what I expected, I took days to see where my mistake was.

My workaround is running COPY-LIST before SORT, as shown below.
 
```Lisp
(defun sort-snode (snode attr)
  (flet ((key-fn (r)
	   (cdr (assoc attr r))))
    (sort (copy-list snode) #'< :key #'key-fn)))
```
In brief, if you are new to Common Lisp, please beware of destructive operations, which is not limited to SORT. It can be NCONC.
Project Planning
Tags: webdev, programming
Published: 2023-01-27 04:58:47

This week we had a meeting regarding the implementation of Release 0.1 of our project [starchart](https://github.com/Seneca-CDOT/starchart). There was a lot of information being thrown around regarding features we have to implement before the initial release. At the end of the discussion professor had asks around regarding features we'll be implementing for the initial release, and I was provided with the design template, and managing of eslint, prettier, and typescript configuration.

---

#### TypeScript ####

I have actually never written anything from typescript before. I did contribute in some ts [repositories](https://dev.to/ririio/hacktoberfest-week-3-3990) during [hacktoberfest](https://hacktoberfest.com/), but my knowledge only came from reading the code, and ensuring I implement them as closely to the original author as possible.

Ever since wednesday I've been watching videos, and doing my own research regarding typescript, and what's the best settings for its config file

#### Chakra UI ####

I've made a few progress with [chakra](https://chakra-ui.com/) this week. I have another project that I'm currently helping build for one of my courses, and I convinced my members to use the library for the front-end. It also helps with having a deeper understanding with the library so I can create as clean of a UI as I can.

#### Design Template ####

I was working with [Tymur](https://dev.to/myrfion) regarding the templates that we'll be using for our dns web application. The template are bearing similarities to [blackboard](https://my.senecacollege.ca/) when it comes to the use of theme and styling. I believe that it's for the best to have the website have some similarities with the official seneca website to ensure that students who wants to borrow a domain feel some sense of familiarity with it.

---

#### Progress ####

For the rest of the week until Friday of next week, I'll be working with finding the typescript configuration settings, and customizing both prettier and linter to follow good coding conventions
Handling Application Configurations
Published: 2023-01-18 01:05:19

## Problem Statement 😬:
When developing an application, we require external dependencies, for example, a database, cache store, an object storage (AWS S3) and so on. Often times, these services contain private data and should never be exposed to the public, making handling credentials to these external services securely a priority. You don't want your credentials to your database sitting in plain sight in your codebase which is checked in to your code repository, available for anyone who has access to your codebase (or just about anyone if your repository is set to public) to view. So setting your application's configurations as simple constants in your codebase is never a good idea. 

There are a couple of ways to solve this problem. 

**Storing configurations in a separate file**
This approach has you creating a file, separate from your main codebase (`config.yml` for example) and storing it in a private server or a private repository, accessible only by those who are responsible for setting up and maintaining these external dependencies.

_But there are also some problems with this approach!_

- It is easy to mistakenly check in the config file to your repository!

- In a microservice architecture, these configuration files could be scattered everywhere and doesn't follow a standard format making it difficult to manage

**Storing configurations in environment variables**
With this approach, we simply set our credentials in the environment. All we have to do then, is to reference these variables in our codebase

```
package main

conn := os.getEnv("POSTGRES")
db, err := sql.Open("postgres", conn)
```
This approach can potentially solve some of the problems mentioned in the previous step (**Storing configs in separate files**)

 There is little chance that these credentials will be checked into our repository and definitely safer than storing them as constants.

We may have a single point of managing these credentials, but still has the potential for human error with no standard naming format. 

**Other solutions...**

AWS Secrets could be a good fit if you are already hosting on AWS. They provide APIs to manage, retrieve, and rotate database credentials, API keys, and other secrets throughout their lifecycles

A more "advanced" way of handling application configuration is to use ETCD as our main storage for credentials. ETCD is a key/value store and is highly available by design. We could expose a user interface for developers to configure these credentials, which would store them in our ETCD clusters where our application would read from.
Although this step requires some development time, it should reduce the problems mentioned above.  

But as always, we have to identify the trade-offs present in all scenarios and based on our requirements, choose the solution that fits us best.

These are a few options I have used to handle application configuration and i hope you find it useful! 

Please add a comment if you see anything that can be improved!👍
My first post!
Published: 2023-01-27 04:50:39

HaHaHa Hello World! 
It is nice to see you.

This is my first post in DEV
I am getting start a project a name of "Roblox Game".

I'm looking for lot's of websites for my project!
So I found this website and velog(https://velog.io/).
Doing work and study is really hard for me 😢 but who am I.
I'm genius programmer!! 

My project post will be posted here. Please love my post.

Bye 👋
Intro to Hooks
Tags: webdev, javascript, react, beginners
Published: 2023-01-27 04:46:47


Using hooks in React can be daunting 😰.
My goal, through this series, is to simplify the different hooks used in React, allowing folks to start implementing these concepts into their builds.

Since this is Part 1 of the series, let's scratch the surface on hooks.

The React documentation defines hooks as - 
_Functions that let you “hook into” React state and lifecycle features from function components._

The above definition will make a lot more sense as we go through this series but it is important to remember a few important points when using any hook in React -->

- Hooks can only be used inside function components and they cannot be used inside class components.

- Hooks must execute in the same order in each component render. (This essentially means you cannot use a hook inside a conditional block such as 'if'.)

You can always reference the official React [documentation](https://reactjs.org/docs/hooks-intro.html) to learn more about hooks but since series is about understanding the different hooks, I am jumping right into one of the most widely used hooks - the **<u>[State Hook](https://dev.to/mihir_chhatre/usestate-4imn)</u>**.
Will ChatGPT Replace A Software Developer's Job? Answered!
Tags: programming, webdev, discuss, community
Published: 2023-01-27 04:39:36

In recent years, advancements in natural language processing (NLP) have led to the development of powerful language models such as GPT-3, which has the ability to generate human-like text and answer questions with a high degree of accuracy. With such capabilities, it's natural to wonder if these models will eventually replace the role of [developers](https://quokkalabs.com/mobile-app-development) in the tech industry.

First,
It's important to understand what a developer's job entails. Developers are responsible for designing, coding, testing, and maintaining software applications. They are responsible for ensuring that the software functions properly and meets the needs of the end user. They also need to stay current with new technologies and programming languages, which requires continuous learning and adaptability.

Now, let's look at the capabilities of ChatGPT.

It is a language model that has been trained on a massive amount of text data, which enables it to generate text that is similar to human writing. It can also answer questions and provide information with a high degree of accuracy. However, it's important to note that ChatGPT is a tool that can be used to assist developers in their work, rather than a replacement for their expertise and problem-solving abilities.

For example, ChatGPT can be used to generate code snippets, which can save time for developers and make their work more efficient. It can also assist in natural language processing tasks, such as text summarization and sentiment analysis. However, it's still the developer's responsibility to ensure that the code is correct and efficient, and that it meets the needs of the end user.

In conclusion,

While ChatGPT and other language models have the ability to assist developers in their work, it is unlikely that they will completely replace the role of developers. A developer's job involves a wide range of responsibilities and skills that cannot be fully replaced by a language model. ChatGPT is a powerful tool, but it still requires the expertise and problem-solving abilities of a human software developer to ensure that software applications are functioning properly and meeting the needs of the end user.

So don't worry, Your Job is secure. If you liked reading it please like, share and follow. You can [reach me](https://quokkalabs.com/android-app-development) if you got a complex [app development project](https://quokkalabs.com/web-application-development) that may be I am helpful in.
TIL: Clojure Setup
Tags: todayilearned
Published: 2023-01-27 04:23:14

I've been learning Clojure through [Exercism](https://exercism.org/) this month, and decided to live stream my setup today. Today was my second attempt at live streaming.
- I installed [KeyViz](https://github.com/mulaRahul/keyviz) during the stream to show which keys I was pressing.
- I'm pretty happy with my Clojure setup in Caval so far. I don't really use the REPL and instead just evaluate code inline with `Alt-Enter`.
- Paredit hasn't really gotten in my way too much, and I've used slurp and split to some extent.
- I didn't finish solving the pig latin problem on the live stream, but my final solution can be found [here](https://exercism.org/tracks/clojure/exercises/pig-latin/solutions/sethcalebweeks)
- As usual, I tried to avoid using Regex as much as possible. This sort of problem could have been solved entirely in Regex, but I'm trying to learn Clojure, not Regex.
- My favorite part of my solution was using `some` to get the first truthy result of mapping over a word with a collection of functions. This is probably the first time that the homoiconicity of Lisp dialects has felt like more than just a cool thing to talk about. I was able to practically play with the syntax of the language to map functions over a value. There are certainly other ways of achieving this without syntactic gymnastics, but it worked really well.

Check out the video [here](https://youtu.be/9VQMh9_blAk).
How To Import Dynamically Image in Vue Vite
Published: 2023-01-27 04:11:06


This is a JavaScript function  takes a parameter name and returns a URL for an image file with the specified name. It uses the URL constructor to create a new URL object, with the first argument being the path to the image file, which is constructed by concatenating the directory name "./dir/", the name passed as a parameter, and the file extension ".png". The second argument passed to the URL constructor is import.meta.url, which is a property that contains the base URL of the current module.

`` function getImageUrl(name) {
     return new URL(`../assets/images/${name}`, import.meta.url).href
      } ``
By calling the href property of the returned URL object, the function will return a string containing the full URL of the image file, including the protocol (e.g. "https:"), the hostname (e.g. "www.example.com"), and the path to the file.

This function can be used in your Vue component to set the image url. For example, you can create a computed property that returns the import statement for the image you want to use as the background, and then bind that property to the "style" binding of a div element.
Here is an example for static image:
 `<template>
      <img :src="getImageUrl(img )">
    </div>
</template>

<script>
 setup() {
const getImageUrl{
    new URL(`../assets/images/image.jpg`, import.meta.url)
      } 

return {
getImageUrl 
}
}

</script>

`
`<template>
  <div id="bg" 
     :style="{background:`url(${getImageUrl(ImageNow) })` + `no-repeat center  center/cover`}">
</div>
</template>`

`<script>
  export default {
    data () {
      return {
        images: ['city.jpg', 'house3.jpg','family.jpg']
 },

  methods: {
   getImageUrl(name) {
     return new URL(`../assets/images/${name}`,import.meta.url).href
      }
  },
 computed: {
      ImageNow () {
      return this.images[Math.abs(this.currentImage)% this.images.length] 
      }
  } 
}
</script>`

here  is  another example:
`<template>
 <div class="gallery">
        <img v-for="img in gallery" :key="img " :src=" getImageUrl(img )">
    </div>

</template>

import {ref} from 'vue';
<script>
 setup() {
 const gallery= ref([
  'gallery1.jpg' ,'gallery2.jpg',
 'gallery3.jpg','gallery 4.jpg',
 'gallery5.jpg' ,'gallery6.jpg',
    ] ) 

function getImageUrl(name) {
     return new URL(`../assets/images/${name}`, import.meta.url).href
      } 

return {
getImageUrl , summary 
}
}
}
</script>
`