teleren/devto huggingface dataset:
Multiple services in a Docker container with supervisord
Tags: docker, beginners, containerapps
Published: 2022-12-10 12:51:45

Docker is mostly used for packing the application, the goal is generally that anyone could execute

```bash
docker run <containername>
```

so how does docker know what to execute?  It uses **ENTRYPOINT** or **CMD** to start services, Both parameters are used to specify the programs/commands to execute while initializing a container from the docker image.

The container's primary process is responsible for managing all operations that it starts which we define at **ENTRYPOINT** or **CMD** at the end of the **Dockerfile**. Docker always recommends that your areas of concern be by using one service per container.

###  Supervisor A process control system

A supervisor is a client/server system that allows its users to monitor and control many processes on UNIX-like operating systems.

It is meant to be used to control processes related to a project or a customer and to start like any other program at boot time.

I have detail explained about supervisord in this [article](https://dev.to/pratapkute/what-is-supervisord-1omf).  

### Multiple services in a container

1. Dockerfile **CMD** 
    
    ```bash
    CMD ["supervisord", "-c", "/path/to_your_file/supervisor.conf", "-n"]
    ```
    
2. **Supervisor conf file sample**

```markup
[unix_http_server]
file=/tmp/supervisor.sock
chmod=0755               

[supervisord]
logfile=/tmp/supervisord.log
logfile_maxbytes=50MB        
logfile_backups=10           
loglevel=info               
pidfile=/tmp/supervisord.pid 
nodaemon=false               
minfds=1024                  
minprocs=200
;environment variables
environment=ENV="PROD",
            PATH="/path/../...",

[inet_http_server]         ; inet (TCP) server disabled by default
port=127.0.0.1:9001        ; (ip_address:port specifier, *:port for all iface)

[rpcinterface:supervisor]
supervisor.rpcinterface_factory = supervisor.rpcinterface:make_main_rpcinterface

[supervisorctl]
serverurl=unix:///tmp/supervisor.sock 

[program:redis-server]
command=redis-server
process_name=%(program_name)s
numprocs=1
directory=/home/path/to/location/
autostart=true
autorestart=true
startsecs=10
stopsignal=TERM
stopwaitsecs=5 ; max num secs to wait b4 SIGKILL (default 10)
user=root
priority=1
stopasgroup=true 
killasgroup=true

[program:logger]
command=/home/path/to/excutable/logger
process_name=%(program_name)s
numprocs=1
directory=/home/path/to/location/
autostart=true
autorestart=true
startsecs=10
stopsignal=TERM
stopwaitsecs=5
user=root
priority=30
stopasgroup=true 
killasgroup=true
```

In the above config file, we have two services one is Redis-server and logger services running as root. Each service has priority to start services. for each config param refer to the supervised documentation 

In the **command** section, You can also use a shell script to run your services but be aware of the zombie process created when you kill or restart the services.
Testing Laravel Packages Locally with Docker
Tags: laravel, docker, testing, github
Published: 2022-12-10 12:34:15

Recently I've [been helping](https://twitter.com/freekmurze/status/1601145751605755904) the team over at [Spatie](https://github.com/spatie) to upgrade their numerous repositories with support for the new version of PHP,  8.2. Their test workflows run tests using the composer options `--prefer-lowest` and `--prefer-stable`, which install different versions of dependencies; this can sometimes cause some tests to fail. Throw in support for numerous versions of PHP and Laravel, and you have a recipe for problems during test runs.

To avoid failing tests on my Pull Requests, I wanted to run them locally, but installing and running the tests took a long time and was problematic - it'd require having every version of PHP installed, for instance. 

This led me to the `act` utility - [available here](https://github.com/nektos/act) - which uses docker containers to allow you to run GitHub workflows locally.  

After fumbling with various docker images, I came across one created by the author of the `setup-php` action, which was designed to allow PHP workflows to run with `act .`I quickly discovered that it could have been more optimal for Laravel workflows, which require many PHP extensions. The images worked but took a long time to run as they had to download and install several of these extensions.

Eventually, I settled on forking the original repository to create an optimized version.  

[permafrost-dev/laravel-act-docker](https://github.com/permafrost-dev/laravel-act-docker) comes with PHP versions `7.2` through `8.2` and has most PHP extensions installed by default, which translates into a short setup time for PHP. It is meant to run Github workflows for Laravel applications and packages locally using `act`.
 
Quickly using the image with `act` is as easy as creating an alias for your shell by adding the following to your `~/.zshrc` or `~/.bashrc` file:

```
alias actphp="act -P ubuntu-latest=permafrostsoftware/laravel-node:latest-amd64"
```

Once that's done, you can run your Laravel-based workflows locally using `actphp` and the `-W` flag:

```bash
actphp -W ./github/workflows/run-tests.yml
```

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


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

This docker image is a work in progress and can be further optimized for Laravel - any comments or contributions are welcome.
My Top Most Used Development Tool - Tabnine
Tags: javascript, vscode, ai, programming
Published: 2022-12-10 12:07:05

**Artificial Intelligence** has been predicted by experts to be the future of technology for more than a decade. In the 2010s, automation got better, cheaper, and less avoidable. 

Today, automated software helps you manage work easily, fast, and accurately. 

Building an app from scratch is quite tedious for software developers. The goal of **[Tabnine](https://app.tabnine.com/)** is to boost your productivity when you use their tool. 

 The plugin is easy to install in your IDE (Integrated Development Environment), for free!

**Install Tabnine on Visual Studio Code**

- Open VSCode on you computer.
- Click the `extensions` icon on the left panel. 
- Type `tabnine` in the search. 
- Click the `install` button to enjoy 😊


![install Tabnine](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k0m6yzaw0r32o21k2pg4.gif)


## **What Tabnine offers you**


(0) **Productivity ✔️** 
 
Higher productivity ensures effective time performance, speed, and stress-free. Moreover, It gives you excellent results and consistent effort. 


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


(1) **Superb Auto-Completion System ✔️**

It takes-away the burden of remembering and typing the exact names of variables, functions, methods or classes. 

It provides: 

- Short code completions
- Whole-line of code completions
- Full-function code completions
- Natural language to code completions
- Learns your coding patterns & styles 


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




(2) **Saves Time Everyday ✔️**

How you start the program is very important and affects every other decision you'll make.

You cannot remember every code when building a project. 

It eventually leads to unproductivity if you are close to a deadline - Tabnine improves your speed while coding. 

One of the things I like about the plugin is that I can easily track my performance. With Tabnine delivering your client's project on time is just too easy.


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




Let me know your favorite tool in the comment 
Show some ❤️‍🔥
How To Bake With CSS: Units of Measurement
Tags: beginners, css, frontend
Published: 2022-12-10 12:05:05

Did you know that great bakers use gram as a unit of measurement for all ingredients in bread? (yes, for water too!)

Even if you might use ml or other units for different recipes in the kitchen, in case you want to make bread, the rules change. Same with CSS! Different scenarios, different rules, different units of measurement.

Let's bake!
<br>

## Introduction
The web page you will design is two-dimensional, meaning you will use 2 dimensions to define it. Usually, they are expressed as _height_ & _weight_. 

But these can be expressed in various other ways, depending on your target code: _vertical_ & _horizontal_, _length_ & _breadth_, _x_ & _y_ etc.
 
These dimensions need to be defined using several units of measurement. CSS units are broadly divided into 2 main categories: **absolute** and **relative**.
<br>

## 1. Absolute Units

Used on fixed-sized web pages, absolute units are constant across all devices, meaning they are not suitable for all viewport sizes.

Absolute units are best to be used for printing rather than screen output as it is preferable to use them when you know exactly your web page size will be constant.


![Absolute Units of Measurement](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1je1vjenic1tmptelnax.png)

Out of these, the ones you will come across the most are _px_ and _cm_.
<br>

## 2. Relative Units
In comparison with the absolute units, relative ones are more suitable for dynamic web pages. They are defined in relation to other elements of the parent element, the viewport or visible web page.


![Relative Units of Measurement](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/utbtn5zv4k63u7ml7why.png)

When viewport dimension is important, it is recommended to use _vw_ and _vh_. It might seem over the hand to use relative units at first, but thanks to their scalability properties, they will help a lot in larger projects.
<br>

If you want to discover more about CSS values and units, I recommend [this reading](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#strings_and_identifiers) where you can go more in depth on the subject.

---
_Cover photo by <a href="https://unsplash.com/@picoftasty?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Mae Mu</a> on <a href="https://unsplash.com/s/photos/bake?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>_
Best Wooden Door Manufacturing Companies in India - Purewooddoors
Published: 2022-12-10 12:03:45

Purewooddoors are built to last and offer you peace of mind. These doors are tailor-made to suit the varying needs of the consumers, be it for residential or commercial purposes. With a choice of three varieties - one-sided decorative, both-sided decorative, and non-decorative [wooden doors](https://purewooddoors.com/) - you can find the perfect fit for your home. In addition to being durable, these doors come with strength, dimensional stability, and high-impact resistance to ensure security and privacy. Steps have been taken to ensure the product is free from warping and delamination.

Purewooddoors come with strength and durability to offer security and protection while offering privacy. These doors are tailor-made to suit the varying needs of the consumers, be it for residential or commercial purposes. These doors have provision for the lock on both sides and are available in three varieties one-sided decorative, both-sided decorative, and non-decorative wooden doors.
Find the Factorial of a Number(JS AND Golang)
Published: 2022-12-10 12:02:38

factorial of a non-negative integer n, denoted by n!, is the product of all positive integers less than or equal to n. example:

`5! = 5 * 4 * 3 * 2 * 1 = 120`

simple method: 1(**JS**)

```
function factorial(number) {
  let result = 1;

  for (let i = 2; i <= number; i += 1) {
    result *= i;
  }

  return result;
}
console.log(factorial(5))
```
simple method: 1(**Golang**)

```
var factVal uint64 = 1 // uint64 is the set of all unsigned 64-bit integers. 
var i int = 1
var n int

func factorial(n int) uint64 {   
    if(n < 0){
        fmt.Print("Factorial of negative number doesn't exist.")    
    }else{        
        for i:=1; i<=n; i++ {
            factVal *= uint64(i) 
        }   
    }    
    return factVal 
}
```
method:(**Using Recursion in JS**)

```
function factorialRecursive(number) {
  return number > 1 ? number * factorialRecursive(number - 1) : 1;
}
console.log(factorialRecursive(5))
```
method:(**Using Recursion in Golang**)

```
func factorial(n int) int {
    if n == 0 {
        return 1
    }
    return n * factorial(n-1)
}
```
Techy bites newsletter
Published: 2022-12-10 12:02:26

I’ve started a Techy Bites newsletter. I wanted a way to share my knowledge and passion for the tech industry and help others in the journey. So I e started this newsletter where I share what I’ve learned or discovered. 

Here’s the link to the newsletter. Subscribe if you like it and would want to receive small tech bites in your inbox. 

https://sachitm.substack.com/

Feedback Welcome. 

Thanks and happy reading
Visual CLApp Editor
Published: 2022-12-10 11:21:49

If you are a Java-developer, **CLApp** could be interesting to you. The CLApp language is aimed to help you focus on the structure logic of your program. That’s why CLApp is pretty well at ease on simulating flowcharts of different types. The **_Visual CLApp Editor_** I’d like to present here proposes an easy-to-use flowchart designing tool allowing you to combine _Activity Diagrams_, _Grafcets_ and _Petri Nets_ to let you design more or less complex logic, simulate its flow and export it to let it run from outside of the editor.

Let’s see some examples to get a concrete idea of it:

In the following video you can see a tutorial showing a logic all around a 2nd degree equation solving:
 https://www.youtube.com/watch?v=8LrWEgsRHLc&t=14s

And in this one, another feature is shown where 2 processes communicate in a client-server mode (the classical ATM-Bank communication example is presented):
https://www.youtube.com/watch?v=r74zPH82n14&t=20s

If those examples made you curious to see more about CLApp (which, by the way, means _Cellular Language Approach_) here you have some variations on the classical _Hello World_ examples:
https://www.youtube.com/watch?v=ZnLQs6a5uy0&t=25s

And if you want to test by yourself, please follow the installation instructions shown here:
https://www.youtube.com/watch?v=8qM-bO8wubg&t=84s
Outreachy - Introduce Yourself
Published: 2022-12-10 11:10:40

Hey there! :sunflower::sparkles:

I’m Ananyashree. I am a graduate in Computer Science & Engineering from India and am currently an intern with Moja Global for Outreachy December 2022 cohort. This internship is an exciting opportunity for me to explore, build skills and push myself to learn!

Starting off with my interests. My interests lie in Artificial Intelligence, Computer Vision and the potential use of same for tackling Climate Change. Also, I like hiking, long walks, reading, photography and astronomy. 

*I would describe myself with three core values:* **Continuous Learning, Hard Work and Respect**

Learning never really ends. And it’s really fun! While curiosity and continuous learning have some obvious benefits in my professional life, personally, they broaden my mindset and help me become a better person. For me, learning makes life fulfilling. Moreover, the excitement to know about so many new things drives me to learn continuously. 

Next, I have always valued hard work. It has helped in difficult times and got me going when I thought I would never make it through a seemingly impossible challenge. You see, hard work never goes to waste. You either get what you wanted or you gain a ton of experience & learn. Either way, you emerge victorious!

Finally, being respectful goes a long way. In both professional and personal bonds, it builds strong foundations and sense of community. Being respectful not only helps me build a safe place for others but also for myself. While not perfect, I strive to be better at it every day.

Being an Outreachy intern with moja global is an exciting opportunity for me. Through their goal, I get insights into what can be done for societies and climate change. Not only will this internship help me build confidence but also aid in gaining experience in this field. I look forward to learning and growing with this amazing community!
7 Techniques to Optimize React Applications Performance
Tags: javascript, react, webdev, beginners
Published: 2022-12-10 11:08:31


> Optimizing the performance of a React application is an important aspect of maintaining a high-quality user experience. It requires deeper understanding of React framework, various phases of the components lifecycle and profiling tools to measure bottlenecks and analyze performance.

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

There are several techniques you can use to improve the performance of your React application.Below are some tips you can follow to optimize React performance:

1. Use the `shouldComponentUpdate` lifecycle method to avoid unnecessary re-renders. This method allows you to control when a component is updated by determining if the new props or state are different from the previous ones.
2. Use the `PureComponent` class instead of the Component class for components that do not require complex logic. Pure components implement the shouldComponentUpdate method with a shallow comparison of the props and state, so they only re-render if the props or state have changed.
3. Use the `React.memo` higher-order component to optimize functional components. This is similar to PureComponent, but it can be used with functional components instead of class-based components.
4. Use the `React.lazy` and `React.Suspense` components to lazy-load components that are not immediately needed. This can improve initial loading time by only loading the necessary components on demand.
5. Use the `useCallback` and `useMemo` hooks to optimize functions and computed values within components. These hooks allow you to memoize values and functions so that they are not re-created unnecessarily.
6. Use the `React.Fragment` component to avoid unnecessary wrapper elements in your components. Wrapper elements, such as divs, can add extra nodes to the DOM, which can affect performance. React.Fragment allows you to return multiple elements from a component without adding extra nodes to the DOM.
7. Use `Immutable Data Structures` as they are more efficient to compare than mutable data structures. They have zero side-effects, simpler to create, test, and use, and can prevent unnecessary re-renders

**🎉 Bonus Tip:**
Use the profiler built into React to identify performance bottlenecks and optimize the rendering of your components. The profiler can help you understand which components are rendering frequently and why, allowing you to make changes to improve their performance.

By following these tips, you can improve the performance of your React application and provide a better user experience for your users. It is also important to regularly monitor and profile your application to identify areas for optimization and ensure that it continues to perform well.
What is AI-based TTS technology
Tags: tts, texttospeech
Published: 2022-12-10 10:52:23

[Text to speech](https://ttsmaker.com/) (TTS) technology is a type of technology that converts written text into spoken language. This technology has been around for decades, but it has recently gained popularity due to advances in artificial intelligence (AI) and deep learning.  

TTS technology is used in a variety of applications, such as automated customer service systems, e-learning platforms, and mobile applications. In these applications, TTS technology is used to convert written text into natural-sounding speech, allowing users to easily understand the information presented to them.  

One of the key technologies behind TTS is deep learning, which involves using neural networks to analyze large amounts of data and make predictions based on that data. In the context of TTS, deep learning algorithms are used to analyze large amounts of speech data and learn the patterns and characteristics of human speech. This allows the TTS system to generate speech that sounds natural and authentic.  

One of the biggest challenges in TTS technology is achieving a high level of accuracy and naturalness in the generated speech. To achieve this, TTS systems use a combination of machine learning algorithms and pre-recorded speech data to generate speech that sounds as close as possible to human speech.  

One of the key advantages of TTS technology is that it allows users to easily access written information in a spoken format. This is especially useful for individuals who are visually impaired or have difficulty reading, as it allows them to easily access written content.  

One of the best TTS platforms on the market today is [TTSMaker](https://ttsmaker.com/). This platform uses advanced AI and deep learning algorithms to generate high-quality, natural-sounding speech. Additionally, TTSMaker offers a wide range of voices and languages, allowing users to select the perfect voice for their specific needs.  

Overall, TTS technology is an important tool for improving accessibility and making written information more accessible to a wider audience. With its advanced AI and deep learning algorithms, TTSMaker is a top choice for anyone looking to incorporate TTS technology into their application or platform.
Integrate Svelte into PHP CMS: Typo3 and WordPress 👨‍🔧
Tags: ddev, vite, typo3, svelte
Published: 2022-12-10 10:41:51

Inspired by [Florian Geierstangers](https://github.com/fgeierst?tab=repositories) awesome work on [typo3 + vite + DDEV](https://github.com/fgeierst/typo3-vite-demo), I teamed up with BokuNoMaxi and added Svelte into the mix.

We came up with several variations:

👉 typo3 + LaravelMix + Svelte <br> https://github.com/mandrasch/ddev-typo3-mix-svelte

👉 typo3 + Vite + Svelte
https://github.com/mandrasch/ddev-typo3-vite-svelte

👉 WordPress ACF Blocks + Vite + Svelte https://github.com/mandrasch/ddev-wp-acf-blocks-svelte

Still work in progress, but maybe useful for your use cases. Let us know if you have questions or feedback! :) 

**Screenshots**

![Screenshot Svelte Demo Block in WordPress](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u28ekh4f8i6xnfsn57de.png)

![Screenshot Svelte Demo Block in typo3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vffb92xwv1j8z3ezeoml.png)

**Why?**

The approach above allows to add interactive components to PHP Content Management Systems. This is called [Islands Architecture](https://jasonformat.com/islands-architecture/).

Svelte has also the advantage that it is precompiled to vanilla JavaScript and CSS, therefore you'll end up with only some more kilobytes JavaScript added to your page. (More information: [React vs. Svelte: The War Between Virtual and Real DOM](https://blog.bitsrc.io/react-vs-sveltejs-the-war-between-virtual-and-real-dom-59cbebbab9e9))

With [DDEV](https://github.com/drud/ddev) you can create Docker PHP + NodeJS environments which run on every operating system in the same way. These environment configurations can be shared via git. Therefore the open source software DDEV is a great and robust foundation for team projects. 

**Learn More**

Talk by [Jesse Skinner](https://www.codingwithjesse.com/): 

{%youtube https://www.youtube.com/watch?v=uWxkaDdqfpI %}

Have fun!