teleren/devto huggingface dataset:
Trying to solve tower of hanoi puzzle to speed up the day of judgement with c++
Tags: cpp, computerscience
Published: 2021-12-28 05:53:43

I have ever heard about Indian Tample a.k.a Hanoi tower, containing a big space with 3 towers surrounded by 64 disc, lets imagine the disc like a donuts. Stacked. The diameters of each tower is stacked from smallest at the top the until the biggest at the bottom. According to the some grass-root legend, if there’s the puzzle has been solved the doomday will come quickly as fast as you dont think. The brahma trying to solve this problem to move the disc from first tower to third tower, but the disk must passed the second tower as a temporary temporary.

A few rules to be followed are :
1.	The disk only can be move one-by-one
2.	The larger disk cant be stacked over the smaller disk

So, this problem estimated can be solve so long until the end of the world.
Lets trying to solve this problem *or trying to speed up the end of the world?  :D
Mathematically, we neet 2^64-I movement. If there’s any wrong move, the move automatically increased. 
Lets try !

```
void math_problem(int number){
	std::cout<<"Unsolved math problem"<<std::endl;
	int temp;
	if(number % 2==0){
		temp=number/2; 
	}
	else{
		temp=(number*3)+1;
	}
	std::cout<<temp<<std::endl;
}
```

Ok, lets try this function in main function

```
int main(){
	hanoi(5,'A','B','C');
	return 0;
}
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1frjz4j3ggjkr3wwqw9p.PNG)

I passed parameters n with 5, just because if i passed parameters n with 64, there will be 1.8446744e+19 moves and it will definitely take a very long time while running the program.

Maybe you passed the incorrect grammar or tenses, i'm sorry, i'm bad in english :)
Are you a writer?
Tags: opensource, beginners, codenewbie, career
Published: 2021-12-28 05:30:31

📜 
- Are you a code-newbie and want to start coding?
- Are you a content writer and want to build your name?
- Do you like open-source and would like to give it a try?
- Or maybe you are somewhere in between or just want to be a better writer. Well, then we might make a good team.

⚙️
I am the owner and co-maintainer of several projects with a few hundred repositories. Some projects might have several issues despite they are or could be a masterpiece. For reasons like:

1. It doesn’t matter how good software is because if the documentation is not good enough, people will not use it. 

2. Even if for some reason they have to use it, without good 
documentation, they won’t use it effectively or the way you’d like them to.

3. You using your code in 6 months. Code that was written 6 months ago is often indistinguishable from code that someone else has written today.

And many more similar issues.

🔥

This is where we could make a great team:

🎨 
I can provide tools and content on many different topics. If you can write and organise the docs then you are the author of those docs which means you are the co-maintainer of the project. It doesn't necessarily have to be published or advertised. You will have all the rights to share it as yours having interesting material to write about. If you make reasonable progress - your work can be evaluated by professionals with detailed feedback which is very beneficial for the carrier and self-evaluation. Depending on time and progress more access and more popular projects can be introduced. 🚀

👨‍🚀
What is expected? 

- Keep a lighthearted friendly tone. Treat the reader as someone who doesn't have a lot of knowledge about the topic but is very interested. ❤️

- Keep things brief 👁‍🗨
- Use headings frequently. This breaks things up when reading and often it is good for linking to specific information.
- Link to other places in the documentation often but only for additional information. Readers should not have to navigate through several pages to find information regarding one specific thing. Just inline the immediately relevant information and link off if they want to know more.
- Use as many code snippets, `CLI`, etc. examples as possible. Show the reader what you mean
- Gently introduce a guide before diving into technical details. This gives context and readers are more likely to stay engaged longer
- It is always good to describe the functionality of the various files in the project.
- Always use gender-neutral pronouns. A gender-neutral pronoun is a pronoun that does not associate a gender with the individual who is being discussed. 👍🏿
For e.g. using 'they' instead of 'he/she'. ❤️

That's all! Friendly to code-newbies. Many things can be discussed to benefit everyone.  👍🏼

https://developers.google.com/tech-writing

If you like to discuss or give it a try reach out: 

digitalclouds@pm.me
admin@digitalclouds.dev
sall@digitalclouds.pro
Angular Woo Commerce Landing Page
Tags: angular, javascript, webdev, beginners
Published: 2021-12-28 05:29:59

Hey 🖐 here is the landing page of woocommerce redesigned by pablo you can find the design in the Figma Community and i used Angular to convert the design into actual code here is my GitHub you can find the source Code 

{% github mhbaando/woocommerce %}

and here is the Promo 


{% youtube WdRN6ARJgus %}
Self-Taught Developer Journal, Day 26: TOP JavaScript Fundamentals Part 2 - Data Types Overview
Tags: webdev, beginners, codenewbie, devjournal
Published: 2021-12-28 05:14:39

Today I learned...

### BigInt
*In JavaScript, the “number” type cannot represent integer values larger than (253-1) (that’s 9007199254740991), or less than -(253-1) for negatives.*

* Recently added to JS to represent numbers of unpredictable length
* Created by appending "n" to the end of an integer
* Useful for cryptography or microsecond-precision timestamps
* Rarely needed 

### String: Type of Quotes
There are three types of quotes in JavaScript:

1. Single Quote: '
2. Double Quote: "
3. Backticks: `

The single and double quotes have no difference between them.

The backticks are "extended functionality" quotes. This mean that not only do they define the string data type, but are also able to perform another function. 
*They allow us to embed variables and expressions into a string by wrapping them in ${…}.*

    let name = "Jennifer";

    alert( `Hello, ${name}!` ); // Hello, Jennifer!

    alert( `the result is ${3 + 4}` ); // the result is 7

*The expression inside ${…} is evaluated and the result becomes a part of the string.*

## Resources
[The Odin Project](https://www.theodinproject.com/paths/foundations/courses/foundations/)
https://javascript.info/types
Code meets music.
Published: 2021-12-28 05:01:00

Hey guys,

I'm Ed, the CEO of Crooklyn Clan Inc., A music customization and supply company for working DJ's globally. We've been online since 2006 and on vinyl since 1993! I am currently updating a few of our web services and looking for developers that have a passion and understanding for music.. Also a solid understanding of multi-vendor e-commerce digital marketplaces. If anyone sees this and is interested in working on a new project with me please say hello and let's make a deal :)
Mysql database overview
Published: 2021-12-28 04:47:12


MySQL is an open-source relational database management system, typically used with PHP. But it can also be used with python, node and other languages. It is a database which is used for web based applications. It can be used in both small and large applications. Mysql called relational database management system (RDBMS)

Some features of mysql 
It is fast and reliable. 
It supports standard sql(structured query language)
Mysql is free to download and use.
Mysql is fully multithreaded. 
Mysql works on different platforms.
It provides a transactional and non-transactional storage engine.
It can handle large applications.

Who uses mysql : 
Mysql is the most popular web based database. Mysql used by
Large websites such as facebook, google, youtube, flickr etc.
Content management systems such as Wordpress, Drupal, Jumla etc.
A large number of web developers worldwide who uses mysql

How to use mysql:

If we want to use mysql it is necessary for us to have it installed whether it be on our local system or on a remote web host. However in order to connect to either we must firstly have an interface to use.
First we need to download mysql from this site :  http://dev.mysql.com/downloads/.
After downloading mysql from their website we need to install it properly. The Installation process is simple. 
Connecting to database :
After completing installation we need to connect with our database. For connect with mysql database open command prompt and write this following 
Mysql [host] [port] username password database name
If everything is ok then mysql database will be connected. So explore the database and learn this amazing database so you can use this database in your dream project.
Blur Background Using CSS
Tags: webdev, beginners, css
Published: 2021-12-28 04:07:24

_This Post is Inspired By [Adrian Twarog](https://www.youtube.com/channel/UCvM5YYWwfLwpcQgbRr68JLQ)_

Blur Background in any website looks amazing and attractive to users. But ever wondered how this blur is made ? Well the answer is "Easy".

Let's See how to make it.

First we add an image in the background and then give our body as <b>display-flex</b> . To set the blur effect in the center of image we give <b> justify-content and align-item </b> as <b>center</b> . 

Now the div on which we give blur effective is in the center of our page . to give the blur effect we use <b> backdrop-filter </b> and give it as <b>blur</b> . So that's it . Our blur is ready .

Let's see our blur effect.


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

Now to enhance the content inside the blur I've added more styling. 

You can have a look on my code and practice it .


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

So that's it in this post . You can see how easy it is to make and blur background . 

So meet you next post .
Till then Happy Coding 👩‍💻👩‍💻👩‍💻
React Context API
Tags: react
Published: 2021-12-28 03:46:55

What is context api?

Reactjs is a powerful library for making user interface easily. It is the most popular JS library in this moment. When we make an application we have to work with many states or data. Context api allows us to pass down and use data or state whatever component we need in our react app without props. In other words, react context api allows us to share data across our components easily. React Context api provide us to manage complex state, nested state in a simpler and more effective way than using props. 

Why use react context api?

A real world react application is going to need to share data or state between different components at different levels of react js hierarchy. They also need to share functions to execute different actions based on user interaction. 

There are three main ways to achieve this : 
Props: store state directly in the common ancestor component and pass it down as many components it needed, as props, until it reaches it target components. This is the easiest and simple way to share state or data between components. But the problem is when target component is very deep or very many then it is become so complex to pass down state through props. So it is not the proper war to share state in big or deep components.
Library: We can use a state management library such as Redux or Mobx. But this library comes with complexity and an extra learning curve that would not be suitable for some projects. This might be a good thing depending on project requirements. But the role is always to try to do the simplest thing first. 
Context API: React context api store the state in a common ancestor component(Provider component) and access it from as many components as needed. Which can be nested at any depth under this ancestor. This is almost same as the props solution but difference is here any component can access the state in any context without props drilling. 

How to use React Context API :

There are four steps to use context api in a react application. 
Create context using createContext() method. 
Wrap the ancestor component with created context using provider. 
Put any value or state you like to share on context provider using value props.
Read this value from any component using context consumer

Conclusion
React context api makes our life easy. Now with the help of context api we can easily make react application.
How to setup gcc on your PC (For Windows)
Tags: cpp, c
Published: 2021-12-28 03:40:47

Hello there, in this article we will be discussing about setting up our system for c/c++ development by using tools like VS code, gcc compiler etc…

## Step 1

### Downloading required applications

We will start by first downloading the files that we need from the internet so make sure you are connected to the internet and then click on the following links:-

- [Mingw w64 compiler](https://sourceforge.net/projects/mingw-w64/files/Toolchains%20targetting%20Win32/Personal%20Builds/mingw-builds/installer/mingw-w64-install.exe/download)

That's it now download both these files and install it simply by using their wizards/installers and it will be very easy too.

After you have succesfully installed both of the applications move to Step 2.

## Step 2

### Setting up your environment variables

For setting up the environment variable go to 

#### 1. Search "Advanced settings" in search bar

![Advanced Settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jelm5heihps1bd7i8l9z.png)

#### 2. Open the “environment variables” window, click on the PATH variable and click on “Edit”

![Opening env variables](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gf3jgw26hx1du7awxfwu.png)



#### 3. Click on the “New” button and add the 2 following directories to your PATH

> ######_If you have not changed anything manually then add this path here_ 

``` bat
C:\MinGW\bin
```

![Adding PATH](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a6ak9uulotgwpq3wfx7t.png)

We are all done setting up, and if you followed it correctly move on to STEP 3 to confirm.



## Step 3

### Checking the installation of gcc on our system

Fire up a terminal by typing _"cmd"_ in your search bar and a window terminal should open and now just type 

```bat
gcc 
```

and if installation is correct, you should get something like this on your terminal

```bat
gcc
gcc: error: unrecognized command line option ‘--v’; did you mean ‘--d’?
gcc: fatal error: no input files
compilation terminated.


```

with this we have succesfully set up our gcc compiler on our system and we are ready to tun C/C++ program on our PC.

If you face any problems following this article, feel free to ask me in the comments.

Thank you for Reading ☺️☺️☺️
@kolkov/angular-editor: upload image using custom service
Tags: angular, library, java
Published: 2021-12-28 03:29:42

## Problem
I cannot upload images using version 1.2.0 of the library [@kolkov/angular-editor](https://www.npmjs.com/package/@kolkov/angular-editor).

So many issues related to that and seem to be this cannot be fixed soon. So I decided to use other version and below is our solution to fix that

## Solution
### Version
```
angular: v10.0
@kolkov/angular-editor: v1.1.5
```

### Frontend - angular
```js
import { AngularEditorConfig } from '@kolkov/angular-editor';

editorConfig: AngularEditorConfig = {
  ...,
  uploadUrl: "http://localhost:8080/image/upload"
  ...
};

```

### Backend - java
```java
class UploadFile {
  public String imageUrl;
}

@PostMapping(path = "/files/upload/image/by/angular-editor",
        consumes = MediaType.MULTIPART_FORM_DATA_VALUE,
        produces = MediaType.APPLICATION_JSON_VALUE)
public UploadFile uploadImageByAngularEditor(
      @RequestPart("file") MultipartFile file
    ) {
    // using your own service to save file
    ...
    // this is the image URL
    String imageUrl = "your image url"; 
    UploadFile response = new UploadFile();
    response.setImageUrl(imageUrl);
    return response;
}
```

### Backend - your system
- Create Post API that handle input and return output adapt:
+ **Input**: MultipartFile that have `file` field in request
+ **Ouput**: return json that have `imageUrl` field like this `{ imageUrl: "" }`


### Explain
- When set uploadUrl in fontend => every time you click upload image it will send a post request to uploadUrl
- That request have MultipartFile in request, it expected to receive {"image Url": ""} in response
- The below code is similar to post request:
```js
import { HttpClient, HttpEvent } from '@angular/common/http';
import { UploadResponse } from '@kolkov/angular-editor';

export class FileService {
  constructor(private httpClient: HttpClient) {}

  uploadImageByAngularEditor(file: File): 
Observable<HttpEvent<UploadResponse>> {
    const url = `http://localhost:8080/upload/image`;
    const formData: FormData = new FormData();
    formData.append('file', file);
    return this.httpClient.post<UploadResponse>(url, formData, {
      observe: 'events',
    }).pipe(tap(console.log));
  }
}
```
Solution for cssbattle #18
Published: 2021-12-28 03:15:26

```
<div></div>
<style>
  body {
    background-color: #5C434C;
    margin: 10px;
  }
  div {
    width: 80px;
    height: 80px;
    background-color: #F09462;
    border-radius: 100% 0 0 0;
    box-shadow: 100px 0 0 0 #F5D6B4,  200px 0 0 0 #F09462, 300px 0 0 0 #F5D6B4, 0 100px 0 0 #F5D6B4,  100px 100px 0 0 #F09462, 200px 100px 0 0 #F5D6B4, 300px 100px 0 0 #F09462, 0 200px 0 #F09462, 100px 200px 0 #F5D6B4, 200px 200px 0 0 #F09462, 300px 200px 0 #F5D6B4;
  }
</style>

```
Hash em Ruby
Tags: ruby, rails, hash, braziliandevs
Published: 2021-12-28 03:14:08

## O que é um Hash?
Uma simples definição, um hash é uma coleção de pares chave-valor, ou seja, uma chave apontando para um valor.

**Explicando um pouco mais...**

Hash é uma estrutura de dados semelhante ao Array, conhecida também como Hash Table, Dictionary e Hash Map com o objetivo de armazenar elementos ou informações. Porém, diferentemente do array:
1. Seus elementos estão associados a um objeto e não um índice inteiro;
2. Uma chave sempre ira apontar para um valor;
3. Uma chave Hash pode ser (quase) qualquer tipo de objeto;
4. A chave identifica unicamente um objeto. Tipicamente é um atributo dele.

## Manipulando - Hash

Imagine o seguinte cenário, estamos montando um cadastro de clientes, e vamos usar o `hash` para armazenar as informações dos clientes…

Vamos começar com um hash vazio

```ruby
person = Hash.new
=> {}

# Também podemos criar um novo hash vázio, apenas atribuindo {}
# person = {}
```
Conferindo se `person` é realmente um `hash`
```ruby
person
=> {}
```

```ruby
person.class
=> Hash
```

Verificar se nosso `hash` está vazio

```ruby
person.empty?
=> true
```

Podemos iniciar um `hash` com dados...

```ruby
genre = { m: 'Male', f: 'Female' }
=> {:m=>"Male", :f=>"Female"}
```

```ruby
genre
=> {:m=>"Male", :f=>"Female"}
```

A chave de um Hash pode ser qualquer tipo de dado

```ruby
hash = {1 => 'A integer', true => 'A boolean', [1,2,3] => 'Array'}
=> {1=>"A integer", true=>"A boolean", [1, 2, 3]=>"Array"}
```

```ruby
hash
=> {1=>"A integer", true=>"A boolean", [1, 2, 3]=>"Array"}
```

Vamos adicionar name, age e birth

```ruby
person[:name] = 'Diego'
=> "Diego"

person[:age] = 34
=> 34

person[:birth] = '23/03/1987'
=> "23/03/1987"
```

Verificando se os dados foram inseridos corretamente:
```ruby
person
=> {:name=>"Diego", :age=>34, :birth=>"23/03/1987"}
```

Vamos ver os dados:

```ruby
person[:name]
=> "Diego"

person[:age]
=> 34

person[:birth]
=> "23/03/1987"
```

Quantos items temos em nosso hash person?

```ruby
person.size
=> 3
```

Vamos excluir birth?

```ruby
person.delete(:birth)
=> "23/03/1987"
```

Como deve ter ficado os dados de `person`?
```ruby
person
=> {:name=>"Diego", :age=>34}
```

Verificando se nosso hash está vazio

```ruby
person.empty?
=> false
```

Caso você queira se aprofundar e saber mais detalhes sobre `Hash` eu sugiro que dê uma olhada na [documentação do Ruby](https://ruby-doc.org/core-3.0.3/Hash.html) que também é bastante completa e tem vários exemplos.

**Contato:**
Email: contato@diegonovais.com.br
LinkedIn: https://www.linkedin.com/in/diegonovais/
Github: https://github.com/dnovais
Svelte & WebRTC for responsive realtime communication 📻
Published: 2021-12-28 03:06:10


Hi everyone, thanks for checking out this blog . In my previous blog [post](https://dev.to/yaku/using-webrtc-and-svelte-3pn) I shared my first open source project written in Svelte and WebRTC. 

The project is in its early stage and I'm basically looking for any help with code. So far I created a demo SvelteKit web app which you can demo right now **[here](https://webrtc-n3gpq25i9-yakumwamba.vercel.app/)**. 

Kindly star the project if you are interested in WebRTC and Svelte **[here](https://github.com/Yakumwamba/google_webrtc_svelte)**.

Thanks for stopping Enjoy your day.
Troubleshoot suspiciously big docker images
Tags: docker
Published: 2023-11-08 21:42:56

---
title: Troubleshoot suspiciously big docker images
published: true
date: 2021-12-28 00:00:00 UTC
tags: ['docker']
canonical_url: https://blog.lepape.me/troubleshoot-suspiciously-big-docker-images
---


Yesterday, I was working on deploying features/PRs environments on the fly for a multi-tenancy Laravel app. To help me with this task where I had to jump between code, YAML files, and docker files, I used [skaffold](https://skaffold.dev/) which is great to package all the standard steps _"build, push, deploy"_ into one simple: `skaffold dev`

At one point I ran out of disk space so I decided to give a look at my docker images, to my dismay, I saw the php-fpm docker image was 3.67 GB big.

Let me introduce you to a beautiful tool called [dive](https://github.com/wagoodman/dive).

This tool lets you track layer by layer what is taking disk space in your docker image. It is so good, thanks to it I've found a residual 900 Mb Laradock folder imported twice in the docker image.

It makes it super easy to inspect what folders/files you could add to your `.dockerignore` that you may have forgotten.

```sh
│ Image Details ├───────────────────────────────────

Image name: r******g/***fpm***:468xcbb5-dirty
Total Image size: 614.04 MB
Potential wasted space: 2.8 MB
Image efficiency score: 99 %
```

They even have a CI option!
Customize the Appearance of the Blazor Dialog Using Templates
Tags: blazor, csharp, dotnet, webdev
Published: 2021-12-28 03:03:47

Learn how to customize a Syncfusion [Blazor Dialog control](https://www.syncfusion.com/blazor-components/blazor-modal-dialog) using templates in a Blazor WebAssembly app. This video explains how to customize the appearance of Dialog control headers, content, and footers using template. 

**Tutorial video**: https://www.syncfusion.com/tutorial-v...

**Product overview**: https://www.syncfusion.com/blazor-components/blazor-modal-dialog

**Example**: https://blazor.syncfusion.com/demos/dialog/template

**Documentation**: https://blazor.syncfusion.com/documentation/dialog/template

{% youtube K5o9JWbgjvQ %}
Solution for cssbattle #17
Published: 2021-12-28 03:00:07

```
<div></div>
<style>
  body {
    background-color: #09042A;
  }
  div {
    position: absolute;
    inset: 0;
    margin: auto;
    transform: translateX(-60px);
    width: 60px;
    height: 60px;
    background: #09042A;
    border-radius: 50%;
    box-shadow: 0 0 0 10px #E78481, 120px 0 0 0 #09042A, 120px 0 0 10px #E78481, 60px -52px 0 0 #F5BB9C, 60px -52px 0 10px #09042A, 60px 52px 0 0 #F5BB9C, 60px 52px 0 10px #09042A, 60px 0 0 10px #E78481;
  }
</style>

```