teleren/devto huggingface dataset:
How to deploy multiweb wordpress SSL certified (Let's Encrypt) in lightsail with docker-compose in 5 minutes
Tags: docker, dockercompose, wordpress, lightsail
Published: 2022-07-01 16:41:13

Deploy Centos7 in lightsail, attach static IP to your server and open this flows inside you Networking server config:


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

Now you have Lightsail done

Berfore to deploy the solution you need redirect your domain to the server static IP.

Access by console to your new server and install docker and docker-compose: 

Install docker:
```
yum update && yum install -y yum-utils device-mapper-persistent-data lvm2 &&
yum-config-manager  --add-repo https://download.docker.com/linux/centos/docker-ce.repo &&
yum install docker-ce docker-ce-cli containerd.io &&
systemctl enable docker &&
systemctl start docker 
```
Install docker-compose:

```
yum install curl &&
curl -L "https://github.com/docker/compose/releases/download/1.23.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose &&
chmod +x /usr/local/bin/docker-compose &&
ln -s /usr/local/bin/docker-compose /usr/bin/docker-compose
```

Now make a copy of my Github repository https://github.com/jblazquezmartin/docker_multiweb_https, with the following command:

```
git clone https://github.com/jblazquezmartin/docker_multiweb_https
```

Create a network in docker for nginx-proxy:

```
docker network create nginx-proxy
```

Run the following command inside the "nginx-proxy" directory, to launch the web server:

```
docker-compose up -d
```
verify that it was raised correctly with the following command:

```
docker-compose ps
```

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

Now you must adapt the code downloaded from Github inside the «websites» directory, so that it adapts to the web(s) you want to deploy, use «websites/example.es/docker-compose.yml» as an example, you will have to adapt it to your domain:


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

Keep in mind that an automatic registration request for your certificate is sent to Let's Encrypt, for which you will need to fill in the "LETSENCRYPT_HOST" and "LETSENCRYPT_EMAIL" fields correctly, as well as having your domain redirected to the external IP assigned in Lightsail.

Run again, inside your web directory, where you modified "docker-compose.yml", the command:

```
docker-compose up -d
```
verify that it was raised correctly with the following command:

```
docker-compose ps
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zn66c4d29xio8k2gbcl1.png)
Apache and MariaBD will be up.

Now access your domain and magic!!, you have your wordpress installed with the Let's Encrypt SSL certificate configured:

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

Enjoy!!
Create Beautiful Readme without Coding
Tags: readme, github
Published: 2022-07-01 16:38:00

Github readme profile is very good way to present yourself.
It is written in Markdown Language.
But to make it very easy there is open source website to generate readme code by just filling the form .

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/obknprfqqiig7rrtrues.png)
To make use this open source website [Click here](https://rahuldkjain.github.io/gh-profile-readme-generator/)
Developed BY - [rahuldkjain](https://github.com/rahuldkjain)

Some Readme Made using this website : 
- [rahuldkjain](https://github.com/rahuldkjain)
- [Varshithvhegde](https://Varshithvhegde/Varshithvhegde)
Azure core Fundamentals: Iaas, PaaS, SaaS - Made Easy!
Tags: beginners, cloud, azure, saas
Published: 2022-07-01 16:33:26

Hello guys,
 
I am excited to write this article today, before I go into the topic, I'd like to buttress these terms for a bit, just because we can't really discuss app services or Azure Fundamentals without highlighting and grasping these key terms:

**IaaS, PaaS and SaaS**

I'd start off with this analogy of the terms, just to share an insight and help the concepts stick better

In the App Services space, Your App is a Car and let's assume there are 3 different Scenarios for you to access this car 

## Scenario 1:
 
**Purchasing a car** - Purchasing a car comes with responsibilities such as: outright/installment payment, securing a driver's license, car documentation and registration, fuel, periodic maintenance, you will need an insurance plan especially if the car is brand new, and many other responsibilities that you have to take on solely, although you are not the manufacturer of the car, you are only a customer who made a "happy" purchase. 

Recall that a very common example of IaaS (Infrastructure as a Service) is a Virtual Machine and the scenario described above "corresponds with - IAAS where you purchase, maintain and secure your own virtual machine. You own the Virtual Machine but it means you have full responsibility whenever something goes wrong, the cloud service provider is only responsible for the physical security of the datacenter and other hardware components , just like the manufacturer of the car.


## Scenario 2:
 
**Hiring a car:** When you hire a car you can choose what car model you get, how fast you want drive it, you get to choose the kind of car you want and the specifications, you can decide to go back and upgrade your car- you don't have to worry about all the infrastructure and the maintenance of it. When you have a web app running on PaaS, you do not worry about the VM and the maintenance of it, all you just have to do is bring your code, host it on the platform, make changes as at when necessary and let the cloud service provider handle the maintenance and be responsible for it.


## Scenario 3: 

**Taking a Cab:** You order a Taxi, Uber or Bolt and all you care about is sitting in the car and getting to your destination. You are not responsible for maintenance, driving, you don't exactly choose the model of the car or the driver, no need to have a driver's license to order a cab, you basically just order it and enjoy the ride. This scenario corresponds with SAAS (Software as a Service) - the product is pre-built for you, think of your everyday applications: Team, gmail, quora, Uber, facebook etc. You simply download the app and access the features therein, no responsibility for upgrades or the latest versions, you are the end user of the product.

I hope I have been able to give you a better understanding of these concepts using these analogies, it helped me as a beginner in my app service class.
Why JavaScript is confusing?, Learn it by knowing the difference
Tags: javascript, webdev, tutorial, programming
Published: 2022-07-01 16:32:41

# JavaScript is a superstar those days with its friend typescript

They have a lot of libs and their community is really big, and this made it very useful as there are a lot of frameworks.

So you can create everything with JavaScript, mobile apps, desktop, web apps, even AI models, IoT, Backend and Frontend. 

Those reasons maybe make you learn it.

---

# Why it’s confusing for us?

really this has a lot to know, but mainly the big difference is the syntax, and some other functionality, I will cover all of them here.

---

# Declaring a variable

In other languages you know there’s a primitive Data Types

like int,char,string,float,etc.

but JavaScript have something else to say about **Declaring Variables** 

they called it dynamically typed, and that means JavaScript will auto-understand what is inside this variable, like Python.

```jsx
let x=5;// int
let str='hi' // string with single quote
let Str="Hi" // string with double quote
```

There’s no char here the string can be one character as you want.

Other datatypes like boolean

```jsx
let status=true;
let isWorking=false;
```

# What is confusing in Declaring a variable

there’s an old-school keyword to declare a variable **var**
This keyword make a confusion
let’s see

```jsx
{
// making a local scope with brackts
let x=6;
var y=5;
}
console.log(x);// undfinded 
console.log(y);// 5
```

that’s happened because **var** is a globally-scoped variable

it’s seen everywhere

to fix something like that we use ‘use strict’ I will talk about it soon.

```jsx
'use strict'
{
// making a local scope with brackts
let x=6;
var y=5;
}
console.log(x);// undfinded 
console.log(y);// undfinded
```

---

# Functions

declare a function is everywhere but here’s the difference

you can pass any type of value to the function

```jsx
function foo(x,y){
 return x+y;
}
foo("Hi"," Kro") //Hi Kro
foo(2,4) // 6
```

maybe you see that’s cool but in many cases isn’t cool cause it will make your function fall into bugs, you have to be careful when you deal with it.

# The ==

really there’s another comparison operator is ===
yeah you see

the difference is really because the variable 

as you know we can declare anything using let

so when we compare we may compare with different data types

```jsx
let x=5;
let y="6";
(x==y)// true
(x===y)//false
```

the == operator is just to see if they are the same without begin aware if they are different data types or not 

but the other one, === want the exact match in the look and the data type

# Things to avoid

As we know JavaScript does not require a **semicolon** to end your statement

but it must sometimes,

**Why?**

really because JavaScript parser or engine ( similar to the compiler )

put a semicolon on every good ending expression 

```jsx
alert(5+
6
+2); // 13
```

As you can see here Js parser didn’t put a semicolon in this case, cause when he sees no good ending expression will ignore it.

for more tutorials about JavaScript

[The Modern JavaScript Tutorial](https://javascript.info/)
I developed a live news app using bling news API and react.
Tags: react, javascript, css, api
Published: 2022-07-01 16:25:39

I used react and bling news API to create a live news app which update the news from different categories.I got the API from [rapid api .com](rapidapi.com).I used css flexbox to make the application responsive.It is a very beginner friendly project which gives us a basic idea about APIs and how can we integrate them with our apps .I am leaving the live link of app with the linl of my github repo.
[Live link of app](nik-news-app.netlify.app).
[Github link](https://github.com/Nikeshkumar-tk/Live-news-app).
Exporting html dom elements as png in javascript
Tags: javascript, beginners, tutorial
Published: 2022-07-01 16:20:28

## Intro

I have recently tried to answer this question in order to create a project. But I didn't find a clear answer. So here it is:

```javascript
import domtoimage from "dom-to-image";

const scale = 5;

//...

function exportAsPNG() {
    domtoimage
      .toBlob(element, {
        //Changing the resolution by a factor (scale)
        //Else this setup might cause blurry images
        width: element.clientWidth * scale,
        height: element.clientHeight * scale,
        style: {
          transform: `scale(${scale})`,
          transformOrigin: "top left",
        },
      })
      .then(blob => {
        saveAs(blob, "image.png");
      });
  }

  function saveAs(blob, fileName) {
    let url = window.URL.createObjectURL(blob);
    let a = document.createElement("a");
    a.href = url;
    a.download = fileName;
    document.body.appendChild(a);
    a.click();
    window.URL.revokeObjectURL(url);
    a.remove();
  }

```
## Walkthrough
The only really intresting thing about this snippet is the scaling part because with a bunch of other libraries the image turns out to be a blurry mess.

For me a scaling factor of 5 worked well. But it is definately a parameter to fine tune.

The `saveAs` function isn't intresting it just creates an anchor tag, fiddles with the url and clicks it.

## Notes
- Jpeg exports are also possible with the function `domtoimage.toJpeg(args)`
- And for svg exports it is `domtoimage.toSvg(args)`

## Links
- https://www.npmjs.com/package/dom-to-image
- https://github.com/tsayen/dom-to-image
How To Set Character Limit In Ckeditor 5
Tags: webdev, react, html, php
Published: 2022-07-01 16:10:48

`config.wordcount = {

// Whether or not you want to show the Paragraphs Count
showParagraphs: false,

// Whether or not you want to show the Word Count
showWordCount: false,

// Whether or not you want to show the Char Count
showCharCount: true,

// Whether or not you want to count Spaces as Chars
countSpacesAsChars: true,

// Whether or not to include Html chars in the Char Count
countHTML: false,

// Maximum allowed Word Count, -1 is default for unlimited
maxWordCount: 400,

// Maximum allowed Char Count, -1 is default for unlimited
maxCharCount: 400};`

`[Solutinos ------------------>](https://laratuto.com/how-to-set-character-limit-in-ckeditor-5/)`
a nice project dbpack
Published: 2022-07-01 16:05:42

DBPack means a database cluster tool pack. A db proxy for distributed transaction, read write splitting and sharding! Support any language! It can be deployed as a sidecar in a pod, it shields complex basic logic, so that business development does not need to rely on a specific SDK, simplifying the development process and improving development efficiency.


https://github.com/CECTC/dbpack
Follow Friday: React Edition (1 July 2022)
Tags: watercooler, meta, javascript, react
Published: 2022-07-01 14:49:40

---
title: Follow Friday: React Edition (1 July 2022)
published: true
description: 
series: Follow Friday
tags: watercooler, meta, javascript, react
cover image: ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fxyaxk0tz33fvxh0wa4z.png)
---

_Happy Friday, friends! 🎉 Follow Friday is your weekly opportunity to shout out fellow DEV Community members doing awesome work. Check out the comments and follow someone new!_

From hooks to props, from routes to states, there’s no shortage of React tutorials, tips, and takes here on DEV. ⚛️

That’s probably because our tag mods @nickytonline, @dance2die, and @chrisachard encourage React authors to [learn in public](https://dev.to/lauragift21/learning-in-public-ob2)! If you’ve never tried it before, you should know that React is a declarative, component-based JavaScript library for building user interfaces, developed by Facebook (now Meta).

Who are your favorite DEV community members writing about their React journey?

_**Formatting tip**: to populate a card with a follow button, use the liquid tag syntax `{% embed https://... %}` and insert the URL of your favorite author's profile._

Join in on the #FollowFriday fun by @mentioning your favorite author to follow for React tips (and letting us know why you love their posts!) ⤵️
Jump - yet another self-hosted startpage for your server
Tags: startpage, selfhosted, docker, dashboard
Published: 2022-07-01 15:10:25

Jump is yet another self-hosted startpage for your server designed to be simple, stylish, fast and secure.

##Features

- Fast, easy to deploy, secure
- Custom sites and icons
- Categorise sites with tags
- Custom background images
- Unsplash integration for background images.
- Quickly search sites added to Jump, plus a custom list of search engines.
- Fetch favicons for sites without custom icons
- Open Weather Map integration

[https://github.com/daledavies/jump](https://github.com/daledavies/jump)
[Discussion] Give the challenges you have faced as a programmer
Tags: help, discuss, programming, challenges
Published: 2022-07-01 15:06:43

Drop your challenges and weakness... and the struggles you made to overcome it, because it's a general thing for a human being to have a mindset of quieting on something due to the challenges..

**The more  experienced once should drop some advice that can help the fallen ones rise**

**_Advise Us_**
**_Guide Us_**
**_Give us some of your secret_**
Troubleshooting page
Tags: opensource, microservices, faq, luos
Published: 2022-07-01 15:05:03

With the Luos team, we try to improve our code every day, but you may encounter some bugs. Our troubleshooting / FAQ page can help you find the right solution for your problem.

⏩ https://www.luos.io/faq

Are you experiencing a problem that is not listed? Be part of our community and submit it via Github, Discord or Reddit.
Typescript Numeric Literal Types How To Y / X (Division)
Tags: webdev, typescript, tutorial, programming
Published: 2022-07-01 15:02:35

---
series: Typescript Basic Arithmetic with Numeric Literal Types
---

In the last post we know [multiplication](https://dev.to/tylim88/typescript-multiply-two-numeric-literal-types-28fd) is possible

In this post we are going to try division

```ts
type CreateArrayWithLengthX<
    LENGTH extends number,
    ACC extends unknown[] = [],
> = ACC['length'] extends LENGTH
    ? ACC
    : CreateArrayWithLengthX<LENGTH, [...ACC,1]>

type Division<Dividend extends number, Divisor extends number, ACC extends unknown[] = [], Counter extends unknown[] = []> = 
    [...ACC,...CreateArrayWithLengthX<Divisor>]['length'] extends [...CreateArrayWithLengthX<Dividend>]['length'] 
    ? [1,...Counter]['length'] 
    : Division<Dividend, Divisor, [...ACC,...CreateArrayWithLengthX<Divisor>],[1,...Counter]>

type result = Division<999, 3> // 333
```

[playground](https://www.typescriptlang.org/play?#code/C4TwDgpgBAwgThAhsCBBOdEgOoEtgAWAMhAHYDmhAGgDwBQUjURAogHIDiAKgBJQQAPFKQAmAZyikArgFsARhDgAaBk1QwY-IWXFQppANakA9gHdSAbQC6UALxRrKgHx2o6mBYDkAGzKUCnjaCwrqsnLyqjAD8bhqRUABcsAjIaBhYeIQkFNQ0Ydw8Sg4AdKXuSgCMVk50dKCQUAAiuABuuGK4xqQ0zW0iOlohEtLyikW97cZwgzrDsgrKsZrBs3qGJubWro6wxvoo0yuiEvpGZpY29tYu9vEWpcXlD-BIKOiYOPjEfrkTYlNOKxeXw5AJBbTHEqlF6pd4ZL7Zfy0Cb9USA4E-MFQeIxCwVJTPPakA5AnyYwLYpiJJqtdqdboonTjWn-Rb3MoaAnQlJvdKfLKY5EsgFWJR4rnFGBEkk1OrgaAIMRSbzAVx-ek0ACc2qKAGYXAB6A1QXWmoA)

limitation: the dividend cannot exceed 999 because the max depth of TS recursion is only 1000, only work with positive integer. the divisor must be factors of the dividend
Mac 한글 키보드에서 원화기호( )를 백쿼트(`)로 바꾸는 방법
Tags: settings, macos
Published: 2022-07-01 14:49:09

Markdown 형식으로 소스코드를 추가할 때 백쿼트(`) 문자를 입력합니다.

한글 입력 상태에서 백쿼트(`) 키를 누르면 원화기호(₩)로 입력되어 한영 전환을 해줘야하는 불편함이 있는데, 키 바인딩을 바꾸는 방법으로 불편함을 줄일 수 있습니다.



### Key binding 바꾸는 방법

1. `~/Library` 폴더에 `KeyBindings` 폴더 추가

2. `~/Library/KeyBindings` 폴더에 `DefaultkeyBinding.dict` 파일 생성

3. `DefaultkeyBinding.dict` 파일에 아래 코드 추가

    ```
    {
    	"₩" = ("insertText:", "`");
    }
    ```

4. 파일 저장 후 재부팅



### 참고

- https://lynmp.com/ko/article/utdb771742bn
Appwrite Community Report #12
Published: 2022-07-01 14:45:30

Hello everyone! Greetings from team Appwrite 👋

We are back with our weekly community report, to share with you all what Appwrite has been doing! 🤩

Here’s a sneak peek! 👀

**TLDR;** Covering release updates, work in progress, announcements, resources and more. 

---

## 📢  What’s new 

- Appwrite 0.15 is out now! Did you check our amazing new features yet?🤩
{% embed https://dev.to/appwrite/announcing-appwrite-015-with-phone-authentication-more-5cjj %}
- We just announced our first OSS Fund sponsored project - [Mockoon](https://dev.to/appwrite/appwrite-oss-fund-sponsors-mockoon-119k) 🤩
Applications for the [OSS Fund](https://appwrite.io/oss-fund) are still open, share it with your maintainer friends. 
- Appwrite is on YouTube and just released a new video on Databases
{% embed https://www.youtube.com/watch?v=cu5pkTdWiW8&t=11s %}

---

## ✅ Issues solved

The 0.15 release was soon followed by 0.15.1, all thanks to our amazing community that helped us find bugs and solve them! 🔍

- Fixed SMS for `createVerification` - triggers messaging worker when creating phone verification
🔗[Link to PR](https://github.com/appwrite/appwrite/pull/3454) 

- Fixed all `$createdAt` and `$updatedAt` occurrences in the UI
🔗[Link to PR](https://github.com/appwrite/appwrite/pull/3461)
- Fixed Delete Document from the UI 
🔗[Link to PR](https://github.com/appwrite/appwrite/pull/3463)
- Fixed internal Attribute and Index key on Migration
🔗[Link to PR](https://github.com/appwrite/appwrite/pull/3455)
- Fixed broken link for Documents under Collections
🔗[Link to PR](https://github.com/appwrite/appwrite/pull/3455)

---

## ⚒️ What we’re currently working on

- Working on functions proxy that would allow better horizontal scaling regarding functions
- Update playgrounds to 0.15
- Work on improving 30 days of Appwrite
- Fixing redirection after deleting collection

---

## 🗣 Discussions
Version 0.15 is out now, what are your thoughts on it?
🔗 [Join the discussion here](https://github.com/appwrite/appwrite/discussions/3446)

---

## 📘 Resources

- Learn about [Phone Authentication with Appwrite and Twilio]
(https://dev.to/appwrite/phone-authentication-with-appwrite-and-twilio-26ek)
- Build a Realtime Chat Application With Appwrite and Angular
{% embed https://dev.to/appwrite/building-a-realtime-chat-application-using-angular-and-appwrite-i3o %}
- Integrate [Autodesk with Appwrite](https://dev.to/appwrite/appwrite-autodesk-oauth-integration-11j0)
- Introduction to `$createdAt` and `$updatedAt`
{% embed https://dev.to/appwrite/introducing-createdat-and-updatedat-on-each-resource-5pa %}
- Take up the 30 days learning challenge to [get started with Appwrite](https://30days.appwrite.io/)
How to use Hyperlink of image in formula field
Published: 2022-07-01 14:24:04

Make an image clickable and navigate to any page in salesforce.
Use hyperlink function with Image function as below:

If statement to make the formula field empty if value is coming empty

```
IF( NOT(ISBLANK(PublicUrlText__c) ) , HYPERLINK("https://emaarservice--mysterysho--c.documentforce.com/sfc/dist/version/renditionDownload?rendition=THUMB720BY480&" + PublicUrlText__c, IMAGE("https://emaarservice--mysterysho--c.documentforce.com/sfc/dist/version/renditionDownload?rendition=THUMB720BY480&" + PublicUrlText__c, "No Image", 200,200)),"" )
```
New CSS framework
Tags: css, html, javascript, getlookover
Published: 2022-07-01 14:23:58

**[Get lookover](https://get-lookover.github.io/)** is a new open source **`CSS`** framework to design web pages easily.
Get lookover launched on 28-05-2022,
On 28-06-2022 launched 2nd version of the framework `v0.5`

![Credit : Get Lookover™](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yrw9exvkj4ynt6wp8g7g.jpg)
Check out all the new features on :
https://get-lookover.github.io/
Request Changes: você usa com frequência?
Tags: github, codereview, pullrequests
Published: 2022-07-01 14:21:06

---
title: Request Changes: você usa com frequência?
published: true
description: Ao revisar Pull Requests podemos bloquear o merge de acontecer, ao utilizar a opção `Request Changes` (solicitar mudanças). Mas é uma boa prática utilizá-lo?
tags: github, codereview, gitlab, pullrequests
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0kdn9qdqtiy6vhk644wn.png
# Use a ratio of 100:42 for best results.
---

Ao revisar Pull Requests podemos bloquear o merge de acontecer, ao utilizar a opção `Request Changes` (solicitar mudanças). Mas é uma boa prática utilizá-lo?

A boa prática de uso do `Request Changes` é quando você encontra alguma modificação que, por alguma razão, não foi encontrada na suite de testes porém se aquele PR for mergeado, irá quebrar a aplicação no ambiente de produção.

### Cuidado com o poder

Request Changes também é uma forma de poder, pense que ao utilizá-la você está bloqueando o Pull Request da(s) pessoa(s) que trabalharam nele.

Antes de chegar nesse tipo de prática eu recomendo refletir se as pessoas autoras envolvidas costumam atender aos comentários realizados em PRs de suas autorias.

Caso atender aos comentários seja uma prática do time, não necessariamente resolver (respondendo de alguma maneira), talvez apenas fazer um review sem conceder a aprovação seja suficiente. ✅

### É tudo sobre comunicação

Caso você não tenha outra maneira de se comunicar com seu time e precise recorrer ao `Request Changes` com frequência, você deve trabalhar em melhorar a comunicação.

💬 Ter uma boa comunicação é essencial para a colaboração acontecer de maneira efetiva!