teleren/devto huggingface dataset:
Install SSL on Ubuntu NGINX server
Published: 2022-02-25 18:21:58

---
title: Install SSL on Ubuntu NGINX server
published: true
description: nginx, ubuntu, letsencrypt, certbot
tags: 
//cover_image: https://direct_url_to_image.jpg
---

## Description
We are going to walk through how to set up website using nginx that is served via https.  We will be using Certbot to accomplish this.

## Steps
+ [Go to Certbot webpage](https://certbot.eff.org/)
+ On the webpage, select `Nginx` and `Ubuntu 18` in the drop downs
+ Follow the steps on the webpage.  (<b><i>Note:</i></b>Ubuntu 18 comes with the `snap` program already installed so no need to do a `apt-get`.
+ Certbot will automatically find the nginx sites for you to serve behind https.  Just pick websites you want the SSL certificate to be applied to.

## Conclusion
With Let's Encrypt and tools like Certbot, serving content over a secure channel has never been easier.
Prime Web Developers | PrimeWebDevelopers
Published: 2022-02-25 18:05:57

Prime Web Developers offers custom web design that is dedicated to meeting the customer’s needs every single time. Our clients are our partners at [Prime Web Developers](https://www.primewebdevelopers.com/), and we help you better understand your dream by providing you with the tools you need.
We guarantee 100% satisfaction for our customers, no matter what it takes. We are here to help with any issue that may happen, ensuring complete satisfaction for not only you but also your users!
We also pride ourselves on never being out of reach for our clients during the development process, and you may contact us at any time by email or phone. Your suggestions and our discussion groups will guarantee that we provide a product that exceeds your expectations and wows users.

Our four-step process ensures that you receive a well-made website in a timely manner. First, we work on strategy formulation, which is result-driven to guarantee that your company's return on investment is as high as possible. Then, we focus on creative design- you will always get your money’s worth with our designs that are one-of-a-kind, useful, and innovative. The third stage is development and testing. With our experts, you can always be sure that your website will be completely functioning in order to suit your company's needs.

Lastly, our Q&A team will reach out to you to confirm whether you are ready for the launch of your project. Our quality checkers will ensure that the final product is absolutely foolproof. 
We offer suitable website packages for everyone- whether you want a personal page on the internet, run a start-up, or are a well-known company, your needs will always be catered to. We offer six website packages that range from single banner designs to a 15 – 20 Page website design. No matter what you pick, we guarantee full satisfaction and value for money.
What's the difference between compiler, transpiler, and interpreter?
Tags: programming, computerscience
Published: 2022-02-25 17:54:22

Implementations of different programming languages use various techniques to execute the code. Let's figure out the difference between them.

## Compilers

A compiler is a program that translates a high-level language to bytecode or machine code. 
At the same time, a compiler itself doesn't execute the resulting code. The user has to do it instead.

Examples of compilers: GCC, javac, rustc

## Transpilers

A transpiler is similar to a compiler, but it translates source code to another high-level language instead of bytecode/machine code. 
A transpiler doesn't execute the resulting code too.

Examples of transpilers: babel, tsc

## Interpreters

An interpreter, in turn, takes in the source code and executes it immediately. In other words, it runs it from the source.

Examples of interpreters: Ruby MRI (CRuby), PHP3

## The combination

There are a lot of programming languages implementations that use compiling and interpreting techniques together. [Robert Nystrom captured such implementations for his "Crafting Interpreters" book.](http://www.craftinginterpreters.com/image/a-map-of-the-territory/venn.png)

![chart with compilers and interpreters](http://www.craftinginterpreters.com/image/a-map-of-the-territory/venn.png)

This combination allows getting the best from both worlds. 
The execution will be faster because it's generally easier to optimize bytecode. At the same time, it's more convenient for the user to run source code with a single command. 

For example, CPython works like this.

---

P.S. [Follow me on Twitter](https://twitter.com/fromaline) for more content like this.

{% twitter 1496152664039735309 %}
CSSBattle | #2 Carrom
Tags: css, cssbattle, challenge, carrom
Published: 2022-02-25 17:42:02

Welcome to CSSBattle Challenges!

In this short article, I go through my solution for [CSSBattle - #2 Carrom](https://cssbattle.dev/play/2) challenge. Please refer to the code snippet below to get a better insight into my thought processes and the implementation detail.

---

> #### Challenge:

![Carrom Challenge](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/edptq841f8q92hp0fc0t.png)

---

> #### Solution:

```html
<div class="container">
  <div class="block top-left"></div>
  <div class="block top-right"></div>
  <div class="block bottom-left"></div>
  <div class="block bottom-right"></div>
</div>

<style>
  * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
  .container {
    width: 100%;
    height: 100%;
    background: #62374e;
    position: relative;
  }
  .block {
    background: #fdc57b;
    width: 50px;
    height: 50px;
    position: absolute;
  }
  .top-left {
    top: 50px;
    left: 50px;
  }
  .top-right {
    top: 50px;
    right: 50px;
  }
  .bottom-left {
    bottom: 50px;
    left: 50px;
  }
  .bottom-right {
    bottom: 50px;
    right: 50px;
  }
</style>
```

---

> #### Key Takeaway(s):
- using relative and absolute positioning to create relationships between parent and children elements

As always, I welcome any feedback or questions regarding the implementation detail of the challenge. Otherwise, I hope this was useful!
Maximum Subarray Sum
Tags: python, dsa
Published: 2022-02-25 17:41:15

##Instructions
Given an integer array nums, find the contiguous subarray (containing at least one number) which has the largest sum and return its sum.
A subarray is a contiguous part of an array.

###Example
Input: nums = [-2,1,-3,4,-1,2,1,-5,4]
Output: 6
Explanation: [4,-1,2,1] has the largest sum = 6.

##Approach
We can initialize maximum sum at index 0 and update it as we iterate through the array when we find a new maximum. 
We also initialize a current sum at index 0 and update it by adding num at current index. We also compare if current sum is greater than num at current index and update it. We then compare if the current sum is greater than maximum sum and update maximum sum.

##Python Implementation

```python
def maxSubArray(nums):
    if not nums:
        return 0
    currSum = maxSum = nums[0]
    for i in range(1,len(nums)):
        currSum += nums[i]
        currSum = max(currSum, nums[i])
        maxSum  = max(maxSum, currSum)
    return maxSum
```
The space complexity is O(1) because we do not use an extra memory and the time complexity is O(n) because we have to go through each element in the array.
Day-32 Training at Ryaz
Tags: javascript, beginners, webdev, node
Published: 2022-02-25 17:04:50

- Date:25/02/2022
- Day:Friday

Today I started about 10:30 am , as I was doing the complete node course in which I was done with till second module and today I started from 3rd module in start the instructor first of all installed all dependencies like joshing ,mongoose ,underscore . and after this instructed about how to install node  npm or specific version of npm like I got to know about that to install particular version we use npm @ version and then taught about that if we want to see that all the dependencies that we have downloaded is list so we type npm list on terminal so, we got all the dependencies that have been installed. after this he taught that like we use console.log("any message") so, this is declared globally and after this he taught about paths .,../ to access various folders.And after this he taught to work upon global packages.so, this way I got to learn many new things.so, this way my day ended up.
44% of developers who build apps for 3rd party platforms have six or more years of experience in backend services
Tags: thirdparty, programming, 3rdparty, apps
Published: 2022-02-25 16:52:34

---
title: 44% of developers who build apps for 3rd party platforms have six or more years of experience in backend services
published: true
description: The market for applications and extensions for third-party ecosystems has been around for a number of years now, yielding a moderate level of experienced developers.
tags: #thirdparty #programming #3rdparty #apps
//cover_image: https://direct_url_to_image.jpg
---

The market for applications and extensions for third-party ecosystems has been around for a number of years now, yielding a moderate level of experienced developers.
 
Almost a quarter (24%) of developers building such applications have six or more years of experience in this specific development area.
 
This ranks third-party app platform developers at an average level in terms of experience when compared to their peers in other development sectors.

However, given the nature of this area, it’s common for developers who build apps for third-party platforms to be involved in other development sectors, such as backend services, where 44% of developers have six or more years of experience. In general, these developers tend to be more experienced in other development sectors, indicating that development of applications for third-party ecosystems is more of an extended skill than a primary development focus.

Source: [State of the Developer Nation 21st Edition](https://developernation.net)

**Do you wanna help us understand 3rd party apps development a bit better?**

We are running a small, 5 minute survey for developers involved in collaboration platforms. Complete the survey and win amazing prizes such as JetBrains All Products Subscriptions, Heroku annual dynos and Udemy vouchers.

**[Help us understand 3rd party apps devs](https://survey.developernation.net/name/dn22-wpm?utm_medium=post&utm_source=dev_to&utm_campaign=dev_to_post)**
Front-end Project 
Tags: javascript, beginners, html, api
Published: 2022-02-25 06:11:57

I had an assignment for my bootcamp to create a front end involving DOM manipulation and an API the result of this project involved many hours of trying to figure out how the API I chose worked, and how to not make a complete abomination of CSS.

The API I used was from https://www.igdb.com/api. I chose this because it appeared to have a large database involving video games and would be fun to work with. It was absolutely not fun to work with. The API involves creating a and linking a https://www.twitch.tv to obtain a Client ID and a Client Secret. I then needed to make a POST request through Twitch to obtain a token to finally be able to use the API. Now it was time to figure out this API. This bootcamp taught me how to fetch data from APIs with the use of GET and Keys. Unfortunately for me, this API I chose only used POST and required the use of Headers and the Body to use it. For someone who had only learned how to use APIs for a few days, this was a struggle to figure out. The IGDB documentation is extremely hard for to figure out for someone new to APIs (like me). There weren't that many good examples of how to setup my JavaScript and how to get the information I wanted. Thankfully with the help of my instructor, we were able to get some data from the API to be on my HTML page. 

I could probably go on for many paragraphs about the struggle and frustration this API caused me, but I'll stop so I can just show a screenshot of one of the pages I created.

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

This is probably my favorite page just because of how fun it is to see how many different games there are in this database. I used the random number function from 1 to 25,000 to display a random game every time the page is refreshed. The API has over 100,000 games, but I realized the higher number it chose, the less likely the database had a cover art or even a description of the game. 

Anyway, this was a cool project to work on, and if anyone else out there has had any experience with the API I used I'd love to hear about it!
Requisitos Funcionais
Published: 2022-02-25 16:35:16

Os requisitos funcionais de um sistema descrevem o que ele deve fazer. Eles dependem do tipo de software a ser desenvolvido, de quem são seus possíveis usuários e da abordagem geral adotada pela organização ao escrever os requisitos. 


Inicialmente os usuários descrevem os requisitos de forma abstrata, é necessário fragmentar a ideia abstrata para faclitar o entendimento do mesmo. Depois de serem analisados e documentados, serão as funcionalidades do Sistema.


**Nota:** É importante sabermos  a classificação dos requisitos, para inicialmente implementarmos os requisitos de maior prioidade e sem seguida os restantes requisitos.


## Classificação dos Requisitos Funcionais
Os Requisitos Funcionais podem ser classificados em:
 - Essenciais: São os requisitos que sem eles o sistema não funciona;
 - Importantes: Sem eles o Sistema funciona, mas com debilidades;
 - Desejáves: O sistema funcona correctamente na ausência deles. É um requisito opcional.


**Sugestão**: Na maioria dos casos, teremos requisitos mais complexos, que são essencias para a solução e para esses casos é aconselhável descrever detalhadamente o requisito.


## Formas de Documentar as Regras de Negócio
Existem várias formas de descrever os requisitos funcionais, das quais podemos destacar: 
  - Diagrama de Activdades;
  - Diagrama de Sequência;
  - Tabela descrevendo a sequência das interações;
  - Fluxograma;
  - Descrição Narrativa.


**Exemplo**: Descrever os Requisitos Funcionais de um Sistema de Recrutamento e vamos detalhar um requisito, usando diagrama de actividades, diagrama de sequência e tabela de interação.
**Requisito**: RF02 – Validar Candidatura.
**Ferramentas usadas**: Astah UML e PowerPoint.


**Estrutura dos Requisitos Funcionais**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o63vc02gw53b0r1xw505.jpg)

**Tabela de Requisitos**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8c0pmny5alw9ybfd0od8.jpg)

**Diagrama de Actividades**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t7zgp985o71oteyvidb0.jpg)

**Diagrama de Sequência**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bpdznxg243jtkj4608ax.jpg)

**Fluxo de Interação Usuário-Sistema**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/29cmip7t1nmvh87ja206.jpg)
PLEASE STOP WRITING ALL UPPERCASE
Tags: beginners, javascript, python, tutorial
Published: 2022-02-25 16:05:37

Dear Fellow Developers,

Please remember that, on the Web, writing in **UPPERCASE** means **shouting**.

Doing so is **aggressive** to your readers.

So, please **STOP** doing this, even just in the titles of your posts!

Thanks

Source: https://en.wikipedia.org/wiki/Etiquette_in_technology
"Another rule is to avoid typing in all caps or grossly enlarging script for emphasis, which is considered to be the equivalent of shouting or yelling."

:heart: :peace_symbol: :+1:
Blockchain???
Tags: webdev, blockchain, bitcoin, web3
Published: 2022-02-25 15:45:37

**Blockchain - is a set of blocks**


🧱Block is a data strcuture, it has information, parameters, and data associated with it. It is used to describe a transaction.

We call it blockchain, earlier it was timechain, something that can not be changed, as time can't be changed. Time is sequential construct.

It represents immutable data. As time is ongoing always, same with blockchain, immutable chain of data blocks.

A blockchain class consist of block classes, functions are there in class to add block, each block has its unique id, and it is generated using hashes. 

A mining function is also there, it is responsible for making data structure immutable, it makes it unchangeable. We have owner of server with every type of data, they can add, append, delete, read, update, modify that data. Bitcoin blockchain data can't be changed. 

Every block is unique, every block or computer in chain should accept and agree for any transaction, its the criteria for it to pass. 

Mining means finding a hash, it's a brute force algo, goes to every computer with a set of number(hash), try to match a new random generated number with every block, if it matches, generates again else assign this hash.

It secures the network, the more secure, the more power, and harder to break the network. 🔒

Biological computer, quantum computer all do mining.

**Immutable stream of chain of data** - **Blockchain**

Any type of program  can be added to it, program which we never want to change can be put in this immutable data chain. Instead of just storing data, we can store computations also. 

Etherum n/w is separate chain different from bitcoin, it does not use transaction as main source, it uses computation. A 'for loop' can be stored in ethereum and it can run there. 
More transparency is there. 

Issues with Ethereum💔
- very costly💸💸
- very slow to use🕘

**Polygon - academey.polygon.technology for learning**

**Polygon** - A different blockchain where you can deploy your ethereum Dapps, overcomes ethereum issues, polygon submits your dapps to ethereum, low cost or free and fast.


**How?**
You have a n/w node, download copy of db or transation. Once it is downloaded, the n/w will process all this transation. 

More content will be added 🔜

These are the key points from an informative session with Web3Camp, details are not included.

Thanks for reading <3
Binary Gap
Tags: python, interview
Published: 2022-02-25 15:39:36

##Instructions
Find longest sequence of zeros in binary representation of an integer.

###Example

```python
n=32 
output = 0 because binary representation of 32 is '100000' and thus no binary gaps.
n = 1041
output = 5, because binary representation of 32 is 10000010001.

```
##Approach
We convert the integer to binary representation and strip the 0's at the end because they do not affect our output. 
We then split the binary at 1's and determine the max number of continuous zeros.

###Python Implementation

```python
def gap(n):
    b = bin(n)[2:]
    b = b.strip("0")
    l = b.split("1")
    return len(max(l, key=len))
```

The max function takes an iterable l which consists of zeros and a function as a key to determine the max value based on length.

> Note we supply key= len and not key=len()

That's all for today.
Install obs flatpak
Tags: linux
Published: 2022-02-25 15:31:56

---
canonical_url: https://waylonwalker.com/til/install-obs-flatpak/
published: true
tags:
- linux
series: til
title: Install obs flatpak
---

Big announcement recently that obs studio now builds out to a flatpak, hopefully making it easier for all of us to install, especially us near normies that don't regularly compile anything from source.

## install flatpak

I did not have flatpak installed so the first thing I had to do was get the `flatpak` command installed, and add their default repo.

``` bash
sudo apt install flatpak flatpak remote-add --if-not-exists flathub https://flathub.org/repo/flathub.flatpakrepo
```

Once I had flatpak, I was able to get obs installed with the following command.

``` bash
flatpak install flathub com.obsproject.Studio
```

Once Installed it fired right up for me with the next command they suggested.

``` bash
flatpak run com.obsproject.Studio
```

## It Works

Pretty straightforward, following the instructions given it all worked for me, but it was missing a lot of the plugins that the current snap package I am using gives me (namely virtual webcam).  So I am not ready to jump onto it until I figure out how to manage my own obs plugins. For now I think the snap is working just well enough.

## Links

* [flatpak setup for ubuntu](https://flatpak.org/setup/Ubuntu)
* [obs release notes](https://github.com/obsproject/obs-studio/releases/tag/27.2.0)
* [obs flatpak](https://flathub.org/apps/details/com.obsproject.Studio)
My personal project - offer
Tags: ui, gamedev, interface
Published: 2022-02-25 15:19:25

Hi there! I'm working on the last screens of my personal project. The last ones - offer and event popups, so here is the offer.

_Artist (girl art): Shen YH https://www.artstation.com/yh_shen_

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sye3m489va3722alm15s.png)
2022 Tech-Conferences for Developers to attend
Tags: webdev, javascript, cloud, devops
Published: 2022-02-25 15:13:05



## **Technology Conferences 2022** :tada: :tada:

**Frontend | Backend** :rocket:
https://events.geekle.us/

**React** :rocket:
https://ti.to/gitnation/react-summit-2022

**Typescript** :rocket:
https://typescriptcongress.com/#tickets

**Svelte** :rocket:
https://enterjs.de/svelteday.php

**NodeJS** :rocket:
https://events.geekle.us/nodejs/

**Angular** :rocket:
https://ti.to/ng-de/vuejsde-conf-2022

https://ti.to/ng-conf/2022

https://events.geekle.us/angular/

**Kubernetes** :rocket:
https://www.eventbrite.de/e/kubernetes-community-days-berlin-2022-tickets-254414820577

https://foocafe.org/event/principles-designing-and-deploying-scalable-applications-kubernetes

**Terraform** :rocket:
https://hashiconf.com/europe/

**Cloud Native** :rocket:
https://tickets.containerdays.io/?require_cookie=true

**KubeCon & Cloud Native** :rocket:
https://events.linuxfoundation.org/kubecon-cloudnativecon-europe/register/

**Devops** :rocket:
https://www.thedevopsconference.com/sign-up?hsCtaTracking=d0b0daf5-14fa-44fe-9fe7-6b9de23d3e32%7C23f6e5c9-ccc1-4a0d-a106-fd5b6c3c5eef#signup

https://devopscon.io/berlin/



Feel free to spread this message and share anything else in the comments if I missed anything.
Keep learning and sharing :blush::books::computer:
Next Js
Tags: javascript, nextjs, react, webdev
Published: 2022-02-25 15:11:17

Next js is React.js a complete framework. React is usually the client side library. The main purpose of creating next js is to create a very nice user experience by filling in the gaps of React.
Next.js offers a number of package built-in features such as: Next router that makes it easy to manage file base routing, CSS modules, Next for authentication, built-in node for server. No. We can easily create a server by connecting directly to the database.
And the reasons why Next.js are so popular are: server side rendering, pre-rendering, and search engine optimization.