teleren/devto huggingface dataset:
Executing scripts when docker starts
Tags: docker, linux
Published: 2022-12-12 08:39:01

---
title: Executing scripts when docker starts
published: true
date: 2022-12-11 16:09:52 UTC
tags: docker, linux
canonical_url: https://krzysztofzuraw.com/2022/executing-scripts-when-docker-starts/
---

I [recently](https://github.com/saleor/saleor-dashboard/pull/2516) needed to execute a shell script when Docker is starting. Why? I wanted dynamically take environment variables from the `.env` file and convert them to JSON objects in `index.html`.

It turns out that docker has a special folder called `/docker-entrypoint.d/`. It will take every shell script left there and execute it while running the container. Perfect for my case. 

What I learned as well (from [Francisco Marques](https://github.com/tofran)) is that there is a two-digit convention for naming Linux scripts. Why? It allows docker to execute them one by one in sorted order. In my case I wanted the shell script to run after internal docker scripts has already finished running so I put a `50` number at the beginning of the script name.

## Summary

If you want to run a shell script when building a Docker container put a script inside `/docker-entrypoint.d` folder (e.g by `COPY` inside `Dockerfile`). Make sure it has a number at the beginning of the script name so the script will be executed in proper order.
Flutter app data pass in 2 device without Internet
Tags: flutter, wevdev, devops, database
Published: 2022-12-11 16:09:40

I want to develop an app where 2 user can pass message without internet connection . Like we can say `Diester Management`.

The idea came from Flood occurred in my hometown , 2022 . No electricity no mobile network works . 

I am new learning flutter , I have no Idea . I see this packages  [nearby_connections](https://pub.dev/packages/nearby_connections) 
 
I humbly request to guys to help me how do I cover come . Thank you .
Which laptop is best for app development?
Published: 2022-12-11 15:34:24

There is no one-size-fits-all answer to this question, as the **best laptop for app development** will depend on your specific needs and budget.

That said, generally speaking, a laptop with a powerful processor, plenty of RAM, and a solid-state drive (SSD) will be well-suited for app development.

Additionally, a laptop with a high-resolution display and a good keyboard and trackpad will make the development process easier and more enjoyable.
Tailwind CSS tutorial #33: Border Radius
Published: 2022-12-11 15:29:16

In the article, we will go into detail on how to use `Border Radius`.

## Border Radius

# Basic usage
## Rounded corners
Use utilities like .rounded-sm, .rounded, or .rounded-lg to apply different border radius sizes to an element.
## **Code**
```html
<ul class="container mx-auto divide-y divide-gray-400 divide-dotted" style="font-family: Raleway">

  <li class="flex items-center justify-between px-4 py-2">
    <div>
      <div class="rounded-none border-2 border-red-500 font-bold text-red-500 p-2 my-2 text-center">Rivet</div>
      <div class="rounded-sm border-2 border-red-500 font-bold text-red-500 p-2 my-2 text-center">Rivet</div>
      <div class="rounded-md border-2 border-red-500 font-bold text-red-500 p-2 my-2 text-center">Rivet</div>
      <div class="rounded-lg border-2 border-red-500 font-bold text-red-500 p-2 my-2 text-center">Rivet</div>
      <div class="rounded-xl border-2 border-red-500 font-bold text-red-500 p-2 my-2 text-center">Rivet</div>
      <div class="rounded-2xl border-2 border-red-500 font-bold text-red-500 p-2 my-2 text-center">Rivet</div>
      <div class="rounded-3xl border-2 border-red-500 font-bold text-red-500 p-2 my-2 text-center">Rivet<br>the Robot</div>
      <div class="rounded-full border-2 border-red-500 font-bold text-red-500 p-2 my-2 text-center">Rivet<br>the Robot</div>
      <div class="text-xs font-mono font-light text-gray-500 mt-2"><span class="font-bold">border-radius</span>: rem</div>
    </div>
    <div class="ml-5 text-right">
      <div class="text-xs font-semibold inline-block font-mono whitespace-nowrap px-2 py-1 rounded text-white bg-pink-500 rounded-2">rounded(-SID)(-AMT)</div>
      <div class="text-xs font-mono text-gray-500"><b class="text-black mt-3 inline-block">SID</b><br>t tl r tr b br l bl</div>
      <div class="text-xs font-mono text-gray-500"><b class="text-black mt-3 inline-block">AMT</b><br>(.25) none-0  full-&infin;<br>sm-.125 md-.375 lg-.5<br>xl-.75 2xl-1 3xl-1.5</div>
    </div>
  </li>  
</ul>

```
**Full code:**
The overall code will be attached to [repo ](https://github.com/codewithshubhi/learn-tailwind-css/blob/main/border%20radius.html)link.

**Overall Output**

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


**Resources:**
[tailwind.css](https://tailwindcss.com/docs)

Thank you for reading :), To learn more, check out my blogs on [Flex Direction](https://dev.to/shubhicodes/tailwind-css-tutorial-13-flex-direction-i8j), [Hackathons](https://dev.to/shubhicodes/all-about-hackathons-how-to-find-participate-win-42kk) and [Flex Wrap](https://dev.to/shubhicodes/tailwind-css-tutorial-14-flex-wrap-kee).
If you liked this article, consider following me on [Dev.to](https://dev.to/shubhicodes) for my latest publications. You can reach me on [Twitter](https://twitter.com/heyShubhi).

Keep learning! Keep coding!! 💛
Can I use any laptop for web development?
Published: 2022-12-11 15:24:08

Yes, you can use any laptop for web development. 

You will just need a laptop with a good processor, enough RAM, and a decent amount of storage to run the necessary software and tools. 

Many modern laptops should be able to handle web development without any issues. 

It's also a good idea to make sure you have a stable internet connection, as web development often involves working with online tools and services. :)
Setup DNS for a Cloudflare-owned domain with a Vercel-hosted project 🌐
Tags: vercel, cloudflare, dns
Published: 2022-12-11 15:23:31

1. (Supposing you already bought a domain in Cloudflare)
1. (Supposing you already created a project in Vercel)
1. In Vercel, go to the project's Domains settings, e.g. `https://vercel.com/<USERNAME>/<PROJECT>/settings/domains`
1. Then add a your domain for the project in Vercel.
1. Now you should see warnings in Vercel project's domains page, complaining about the incorrect DNS configuration. Please follow the instructions saying what DNS records you should add in Cloudflare
1. So on Cloudflare, let's update the DNS settings for your domain: In your domain's page, go to `Overview` -> `Domain registration` -> `Manage domain`
1. Then in the opened list of domains, click `Manage`
1. Then In the domain's details page, click a link `Update DNS configuration` (in the `Quick actions` section).
1. Then in the section `DNS management for <your domain here>` click a button `Add record`
1. With the above method, now add the record(s) recommended by the Vercel's warnings. Note: when adding DNS records in Cloudflare, you might want to uncheck the option `Proxy status`, to change the value from the default one `Proxied` to `DNS only`.
1. Wait up to 5 minutes for the DNS changes to apply. Then visit your domain in the browser and enjoy using you Cloudflare's domain with your Vercel's project.
create a modal component with stimulus js
Published: 2022-12-11 15:21:26

Here is an example of how you could create a modal component with Stimulus.js:

// controllers/modal_controller.js
import { Controller } from "stimulus"

export default class extends Controller {
  static targets = ["overlay", "content", "closeButton"]

  open() {
    this.overlayTarget.classList.add("is-active")
    this.contentTarget.classList.add("is-active")
  }

  close() {
    this.overlayTarget.classList.remove("is-active")
    this.contentTarget.classList.remove("is-active")
  }

  toggle() {
    this.overlayTarget.classList.toggle("is-active")
    this.contentTarget.classList.toggle("is-active")
  }

  // Event handler for the "click" event on the close button
  closeButtonClick(event) {
    event.preventDefault()
    this.close()
  }
}

This modal component uses a few classes to control its visibility:

    is-active: shows the modal
    is-inactive: hides the modal

To use this component in your HTML, you would need to add the following markup:

<!-- modal.hbs -->

<div data-controller="modal" data-modal-target="overlay">
  <div data-target="modal.content">
    <a href="#" data-target="modal.closeButton" data-action="click->modal#closeButtonClick">Close</a>
  </div>
</div>

This will create a modal with an overlay, a content area, and a close button. When the close button is clicked, it will call the closeButtonClick method on the modal controller, which will hide the modal.
Reflect: Release 0.4 2/3
Published: 2022-12-11 15:03:49

## The project I will be working on
I finally decided the project that I want to make a contribution to for Release 0.4 is [Catima](https://github.com/CatimaLoyalty/Android/pull/1157). For more information about it, Catima is a card management app running on Android, it allows users to save their physical card to their phones by manually inputting, and scanning. As for now, it has 147 contributors working on this project.
## What is the issue about?
The reason why I chose this project is this because I'm already pretty familiar with the structure of this Android App since I've made 2 contributions to this repository during Hacktoberfest 2022, 
 which means that I don't need to spend extra time focusing on reading the code to figure out where should I start. The issue I chose is [#1057](https://github.com/CatimaLoyalty/Android/issues/1057), in this issue, a new feature that automatically adds cover images to the current card should be added to the existing logic of "adding card from image" function and once the user imports a card from a picture that contains a barcode, a dialog should be shown to the user to ask if they want to set the imported picture as the cover of the current generated card, if the user selected yes, the cover image should be set, otherwise, no cover image will be set. What's more to this is that I should add extra variables to track if the cover images (both front and back) were added manually or automatically and if the user rescans the card the new cover image should only be automatically set when the cover images were set automatically, otherwise, they should remain still. 
## My analysis of how to implement this issue
To implement this feature, I need to understand how the data are stored in the database and add a couple of columns to trace if the cover images are added manually. Also, I need to consider how to implement the database upgrade SQL sentence to upgrade the database from the old version to the new version because users' data still need to be kept, we can't just simply drop all tables and create new ones, but we need to alter and upgrade the schema of tables so that the data of those cards that already exist will be untouched.
Also, I can foresee that I need to also upgrade the testing code to make the tests cover the database logic I added. 
Also, since "adding card from camera scanning", "adding card manually", and "adding card from image" all share the same Activity, I may need to add an extra bundle to the Intent of the activity to distinguish which entry started the card editing activity and I should add this new future to the scenario where the card editing activity is started by "adding card from image".
How to Make Hangman Game in JavaScript
Tags: html, css, javascript, beginners
Published: 2022-12-11 14:55:23

In this article, we will make hangman game with JavaScript. Obviously, we will use some HTML and CSS for structure design purpose, but main work will be done in the JavaScript part. Nowadays, Hangman game is becoming popular and many of the developers making it in different languages. So let’s understand basic idea and goal about this game.
[Read More](https://rocoderes.com/how-to-make-hangman-game-in-javascript/)
124.Leetcode Solution in cpp
Tags: cpp
Published: 2022-12-11 14:51:33

```cpp
/**
 * Definition for a binary tree node.
 * struct TreeNode {
 *     int val;
 *     TreeNode *left;
 *     TreeNode *right;
 *     TreeNode() : val(0), left(nullptr), right(nullptr) {}
 *     TreeNode(int x) : val(x), left(nullptr), right(nullptr) {}
 *     TreeNode(int x, TreeNode *left, TreeNode *right) : val(x), left(left), right(right) {}
 * };
 */
class Solution {
 public:
  int maxPathSum(TreeNode* root) {
    int ans = INT_MIN;
    maxPathSumDownFrom(root, ans);
    return ans;
  }

 private:
  // root->val + 0/1 of its subtrees
  int maxPathSumDownFrom(TreeNode* root, int& ans) {
    if (!root)
      return 0;

    const int l = max(0, maxPathSumDownFrom(root->left, ans));
    const int r = max(0, maxPathSumDownFrom(root->right, ans));
    ans = max(ans, root->val + l + r);
    return root->val + max(l, r);
  }
};
```
#leetcode
#challenge
Here is the link for the problem:
https://leetcode.com/problems/binary-tree-maximum-path-sum/
How to Make Dynamic Calendar in HTML & JavaScript
Tags: html, css, javascript, beginners
Published: 2022-12-11 14:48:24

In today’s article, we will make a dynamic calendar in HTML, CSS & JavaScript. We will create this calendar in HTML which will looks like inbuilt calendar as Microsoft calendar. So we will use HTML, CSS to design And lastly JavaScript to add functionality to change the months.
[Read More](https://rocoderes.com/how-to-make-dynamic-calendar-in-html-javascript/)
How to Save Text as File in JavaScript
Tags: html, css, javascript, beginners
Published: 2022-12-11 14:46:41

In today’s article, we will be making a project to save text as file in HTML, CSS & JavaScript. Simply we will give a field in which we will allow user to add some text, and also we will add a field to name the file and file type along with a button to download the file.
[Read More](https://rocoderes.com/how-to-save-text-as-file-in-javascript/)
TCPs challenger: Homa
Tags: protocols, tcp, udp, infrastructure
Published: 2022-12-11 14:44:13

**What is it?**

Homa is a high-speed transport protocol that was designed to challenge TCP (Transmission Control Protocol), which is the most widely used network transport protocol on the internet. Homa is optimized for datacenter environments, where it can provide significantly lower latencies and higher throughput compared to TCP.

**Is this experimental at this point in time?**

Yes - Homa can be considered an experimental protocol at this point. It was developed by researchers at Stanford University and Google, and while it has shown promising results in some initial studies, it has not yet been widely adopted or extensively tested in real-world environments. As a result, it is still considered to be a work in progress, and its practical applications and limitations are not yet fully understood.

**So then, who cares?**

As a Backend DevOps/Engineer, Homa could potentially affect your work in a few ways. First, if you are working on a system that involves high-speed data transfer within a datacenter, then using Homa instead of TCP could potentially improve the performance of your system. Additionally, if you are involved in the design or implementation of network protocols, then Homa could serve as an interesting point of comparison or inspiration for your work. However, it's important to note that Homa is still a relatively new and experimental protocol, so its practical applications and limitations are not yet fully understood.
Become a Better programmer by Detaching Your Emotions from work
Tags: programming, beginners, discuss
Published: 2022-12-11 14:44:09

## Intro

I wanna share and discuss something with all my Dev colleagues. In the Last few months about I felt like I have lost most interest for programming in general and this has lead to me becoming Lazy even though I am not a lazy person at all. I tried multiple stuff. but nothing worked. In my mind I knew that I was good programmer. I can't simply leave something I am good at and make good money from It to go work at something I am not good at and pays less money.

Me saying this doesn't mean to just drop your dreams and stick to becoming programmer ..etc. Fast forward to the future I am trying something new which is working for me perfectly which is **Detaching my emotions away from programming**. meaning I don't have to like it to do it and let me tell you this is the most correct way to get things done. 


## But what leads to losing interest in the first place?


In some experiment some scientist gathered around bunch of kids who 
liked to draw with out giving them any rewards then they started giving them rewards for painting and drawing as soon as they stopped giving them these rewards all of the kids have lost interest in drawing. 

So if you apply this scenario on fresh grads who are very passionate about programming.. You will find that the reward mentioned here is **The Salary** and after sometime the salary just doesn't feel the same anymore because baseline of dopamine is elevated. You can check _**Dr. Andrew Huberman**_ on Youtube he has some great videos on how dopamine affect you. 


## Conclusion

If you have lost some interest like me in programming try not doing it for fun for a while and just do it regradless of how you feel and this can just work around for anything in life.
How to Make File Downloader Using JavaScript
Tags: html, css, javascript, beginners
Published: 2022-12-11 14:43:09

In this article, we will create file downloader using JavaScript. Basically, we will create a file downloader using JavaScript. In this we will add a URL of file like image, document, video etc. and as soon we click on provided button the file will download.
[Read More](https://rocoderes.com/how-to-make-file-downloader-using-javascript/)
Merge Two Binary Trees by doing Node Sum (Recursive and Iterative) javascript
Published: 2022-12-11 14:42:53

To merge two binary trees by doing a node sum, you can use either a recursive or an iterative approach. Here is how you could implement this using each approach in JavaScript:

Recursive approach

Create a function that takes two binary trees as arguments and returns their merged tree.

In the function, check if one of the trees is null. If so, return the other tree.

If both trees are non-null, create a new node with the value equal to the sum of the values of the two nodes.
Set the left child of the new node to the result of merging the left children of the two nodes.

Set the right child of the new node to the result of merging the right children of the two nodes.

Return the new node.

Here is an example of what the main parts of your solution might look like:

```
class Node {
  constructor(value) {
    this.value = value
    this.left = null
    this.right = null
  }
}

function mergeTrees(t1, t2) {
  if (t1 == null) return t2
  if (t2 == null) return t1

  const node = new Node(t1.value + t2.value)
  node.left = mergeTrees(t1.left, t2.left)
  node.right = mergeTrees(t1.right, t2.right)

  return node
}

const t1 = ...
const t2 = ...
const mergedTree = mergeTrees(t1, t2)

// display the merged tree
```
Setup PHP Laravel (Postgresql & mysql) Development Environment on Ubuntu 22.04 Jammy
Tags: ubuntu, php, laravel, postgres
Published: 2022-12-11 14:42:09

I'm not a big fan of PHP and mainly worked with Node.js project, this time I get a project using a legacy PHP/Laravel code bases and It's really frustrating for me to just run the code because I'm not getting used to the ecosystem.

In case you are running the same issues or maybe me, I decided to wrote it here.

## OS Information

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

## Installing PHP

Be sure which PHP version you want to install, because compatibility matter. A lot. Seriously.

The default APT repository is PHP 8. In my case, I need to install `PHP 7.4`.

```bash
sudo apt install -y apache2 php7.4 php7.4-common php7.4-cli php7.4-xml php7.4-mbstring php7.4-gd php7.4-pgsql
```

## Installing composer

```bash
curl -sS https://getcomposer.org/installer | sudo php -- --install-dir=/usr/bin --filename=composer
```

## Laravel global installer

```bash
composer global require laravel/installer
```

## Installing mysql

```bash
sudo apt install -y mysql-server php7.4-mysql
```

## Installing postgresql

```bash
sudo apt install -y postgresql pgadmin4
```

## Setup postgresql & pgadmin

```bash
sudo /usr/pgadmin4/bin/setup-web.sh

sudo -i -u postgres

psql

ALTER USER postgres WITH PASSWORD 'yourpostgrespassword';

\q

logout
```

The default postgresql information:
```
Hostname: localhost
Port: 5432
Username: postgres
Password: yourpostgrespassword
```

Now you can access it via Pgadmin desktop app or the web version at http://127.0.0.1/pgadmin4/browser/

## Run existing laravel project

1. Clone the project to local
2. `cd` into it
3. Run `composer install`
4. Fix every composer's lockfiles issues (usually missing php extension) (if there's any).
Example:
```bash
sudo apt install -y php7.4-gd
sudo service apache2 restart
```
Then run `composer install` again.
5. Run `npm install`
Make sure you have already installed python. In my case I need to install `python2` and set the npm global variable.
```bash
sudo apt install python2
npm config set python /usr/bin/python2
```
6. Run `npm run dev`
7. Run `cp .env.example .env`
8. Edit the `.env` file configuration (especially in DB, make sure you created an empty database first)
9. Run `php artisan key:generate`
10. Run `php artisan migrate`
11. Run `php artisan serve`


Hope it helps~
How to Make Price Range Slider Using JavaScript
Tags: html, css, javascript, beginners
Published: 2022-12-11 14:40:44

In this article, we will make a price range slider using JavaScript. Here we will also add min-max input, which will vary as slider move. As we know, some e-commerce websites like Amazon, Flipkart etc. have this kind of feature, so products can be sorted as price range. We create the same thing here. We will have two input fields, one for minimum price and another for maximum value, Also we will add two sliders associated to these input fields.

[Read more](https://rocoderes.com/how-to-make-price-range-slider-using-javascript/)
Modify a binary tree to get Preorder traversal using right pointers only
Published: 2022-12-11 14:38:29

To modify a binary tree to perform a preorder traversal using only the right pointers, you will need to make some changes to the tree structure and the traversal algorithm. Here is one way you could approach this problem:

In the binary tree, add a new pointer to each node that points to the node's rightmost descendant (or null if the node has no right descendants). This pointer will be used during the traversal instead of the node's right pointer.

Write a function to perform the preorder traversal. This function should start at the root node and visit the nodes in the following order: the root, the root's left child, the root's left child's left child, etc. until it reaches a leaf node.

At each step of the traversal, the function should use the new rightmost descendant pointer to move to the next node in the traversal. If the current node has no rightmost descendant, the function should backtrack to the nearest ancestor that has a rightmost descendant and move to that descendant.

The traversal should continue until it has visited all of the nodes in the tree.

Here is an example of what the main parts of your solution might look like:

```

class Node {
  constructor(value) {
    this.value = value
    this.left = null
    this.right = null
    this.rightmost = null // new pointer to rightmost descendant
  }
}

class BinaryTree {
  // initialize the tree and set the root node

  traversePreorder() {
    // perform a preorder traversal using only the rightmost pointers

    // return the list of nodes visited in preorder
  }
}

const tree = new BinaryTree(...)
const preorder = tree.traversePreorder()

// display the preorder traversal

```
You may need to modify the tree structure and the traversal algorithm depending on the specific requirements of your problem.