teleren/devto huggingface dataset:
Understanding Threading
Tags: computerscience, programming, java
Published: 2021-09-26 22:09:22

Multi-threading is a feature used to process concurrent requests in order to maximize efficiency.  Executing one piece of code at a time may work for lightweight programs but can really bog down the system if something heavy needs to be done.  One way to think of it is if you are driving a car up a hill that only has one lane.  If the road is only passenger cars driving a normal speed then it probably would not be an issue.  However if a semi-truck was ahead of you it would take forever to get over the hill.  Threading has similar concepts to creating two lanes on the road.  With two lanes the cars can drive at different speeds next to each other and the semi-truck isn't slowing the flow of traffic.

![Car Driving Up Hill](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3lbp17xav2a17rwb6xss.jpg)

In reality threads are a bit more complicated.  A thread is an execution context, which is information the CPU needs to execute and keep track of a list of instructions.  The execution context holds register locations where the next line of instructions is waiting it’s turn.  CPU’s give the illusion that they are doing multiple computations at the same time but it is starting and stopping many things very quickly.

![Process Chart](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fj6ecfoy2wwnsw6e58so.png)

Zooming out a bit, you can see in the image above that threads are part of a process.  A process is an instance of the program being executed.  The threads make up the Process State of the process and contain the information needed to keep track of what still needs to be computed in the program.  The process also contains other resources such as the code, data, heap and stack.  Some of these resources are shared while others can be thread specific.

Now like everything in programming, if this is such a great boost to efficiency why don’t we apply it to everything?  Threads do impose minimal impact, require less overhead to create/maintain/manage, and can provide structure simplification.  However, they are much more complicated to implement.  They also bring about problems with concurrency.  The programmer doesn’t know which order of operations the threads are going to execute so safeguards have to be implemented to guarantee the validity of data.  Without protection, one thread may manipulate data that will ruin it for computations by other threads.

Now that we have an understanding of what threading is, next week we will discuss how to implement it in Java!  I hope you all have a great week and feel free to leave a comment and a like on the post.

**Resources:**

1. https://stackoverflow.com/questions/5201852/what-is-a-thread-really

2. https://randu.org/tutorials/threads/

3. https://docs.oracle.com/cd/E19455-01/806-3461/6jck06gqj/index.html#:~:text=Threads%20impose%20minimal%20impact%20on,server%2Dclass%20and%20multimedia%20applications.

4. https://www.codemotion.com/magazine/Glossary/process-computing/
Web Components- Call to Action (CTA) Button
Tags: webdev, javascript, css
Published: 2021-09-26 21:40:51

Currently, in IST 402, we’ve been working on web components in the effort to make a call to action (CTA) button. The button that we are designing was inspired by the website Headspace, a meditation calming website (https://www.headspace.com). To begin the workings of our button, we created a web component with open wc and continued from there.

Difficulties/Issues
My partner and I have been working hard to understand issues that have arisen on both of our ends in the efforts to make this button. One of the hardest things so hard is dealing with merge conflicts within Github as well as at times yarn. Another struggle that we dabbled with was not changing to the correct directory at some points. While these all seem minor they made huge differences.

This was my first time using a fork in Github. When doing so, you have to remember to fetch and merge before a git pull can occur to stay up to date on the changes. The purpose of the fork is so that changes can be made without directly affecting the original repository. Eventually, we figured it out.

Successes
In class, we went over how to add an icon to my button. This was a huge success and easier than I imagined it would be. The button also has different states such as disable versus active and hovered to name a few. CSS was also included to mimic the scheme of the website we were modeling it after. Appearance and accessibility is very important. Overall, I enjoyed the planning and thought process that went into the composing button. I can’t wait to expand my knowledge further.

*State of Element(s):*
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f0ukrqjydw7r5jhgj5iy.png)
*Repo*: https://github.com/Taylor-Bracone/cta-button/tree/main
Publish a PHP library to Packagist 📦
Tags: packagist, composer, php, library
Published: 2021-09-26 21:22:35

## Create and release a PHP package on Packagist

Today, we are looking on how to publish a PHP Composer v1 and [v2](https://blog.packagist.com/composer-2-0-is-now-available/) package to [packagist.org](https://packagist.org) 🚀

### 1. Your library has to contain a `.composer.json`

When you create your library, run a `composer init` to generate a `composer.json` file containing your details as well as a vendor name and the library name of your package you will publish to the Packagist registry.

The information in there as well as the information of your `README.md` file (located in the root of your project) will be used by packagist.org to show the information about your library.


### 2. GitHub account (or other git hosting platform)

Make sure you have an account n GitHub (or on a similar platform such as GitLab or Butbucket).

### 3. git push to your remote Git repository (e.g. GitHub)

Publish your code to GitHub or on a similar platform (e.g. GitLab, Butbucket or on your own server).

### 4. [Create an account](https://packagist.org/register/) on packagist

You will need an account on packagist.org in order to publish your package.


### 5. Submit your package

Now, you will need to [submit your new package](https://packagist.org/packages/submit) by clicking on the "Submit" button.

You will need to mention the Repository URL. Your repository URL is foundable on the repository page of your git hosting platform, on the "Clone" section. It looks like `https://github.com/{username/{project-name}.git` 

![Submit PHP Composer package to Packagist](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fewkscf426ruo7juc0md.png)
 




Once submitted, you will be redirected to the detail page of your library.
![Packagist library page details](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pmchxtaj8nvjupipssdt.png)


If you didn't create a git tag yet, the default version of your library will be `dev-master`.

![Default release master dev packagist php](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/82nu1dbtiilp87jx1dol.png)
 
Once you create a git tag release (can be also done through GitHub, Releases -> Draft a new release), the version will be the new one set as default.

![create tag on GitHub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5kku73bo064okly4sxoh.png)

![dev master release git tag](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lombs4bql2eg9kwvv6gj.png)


### 6. 🏆 Well done 🐘
You are all set and your library is ready to be used and installed by anyone, simply with `composer require {your-vendor-name}{your-librar-name}`


---

{% youtube https://youtu.be/TgwfrkfXmj0 %}
#100daysofcode [day 12]
Tags: javascript, react
Published: 2021-09-26 20:33:49

Hey There, the last few days I was learning React JS. and this is the twelve day's post of 100 days coding challenge,

 today I make a simple site using React JS .

Here is the Live site: https://online-pc-builder-100days.netlify.app/

Here is the code link: https://github.com/thekawsarhossain/100-days-of-code/tree/main/day%2012/online-pc-builder
Ways reset the last margin
Published: 2021-09-26 19:51:00

For example, I have a To-Do list `ul > li` for short.

I wanna have a gap between each `li`. How can I do it?

## Flex Gap

I can use display flex.

```css
.todo-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
```

**Cons**

IE doesn't support `gap` 😞


## Reset the last margin

```css
.todo-item {
  margin-bottom: 1rem;
}

.todo-item:last-child {
  margin-bottom: 0;
}
```

You can do it. It's old school and all browsers support this.


## Without last margin with `:not`

```css
.todo-item:not(:last-child) {
  margin-bottom: 1rem;
}
```

I think It is very simple.


## Without first margin

I want to say thank you to my colleagues for this way.

```css
.todo-item + .todo-item {
  margin-top: 1rem;
}
```

I love this. It is so simple and so beautiful!


Thank you!
CTA Button Progress
Published: 2021-09-26 19:32:55

**Difficulties**

 Some difficulties my group has experienced during this project is prioritizing our button features and understanding what elements are realistic and not. We are creating a Halloween button, so the options are limitless. When we were brainstorming we had some disagreements on what was important and what was complex. Our group has also had some difficulty finding time outside of class to meet up and work on the project. Luckily, this has been resolved. A couple of us are completely new to web development concepts so everything seems so complicated at first. Our group has worked through these issues and we feel comfortable on our progress.

**Successes**

I have been really impressed with our group's creativity. With spooky season coming up, it is so exciting to create a Halloween themed button. Brainstorming has been so much fun and there are so many cool elements we can incorporate into the button! I have enjoyed the learning experience of this project and I have impressed myself with how quickly I can understand the topics. Going over a quick button creation demo was a huge help. The demo helped my group figure out the best way to get started and answered out questions!

[Button Progress](https://github.com/ist402groupj/CTA-Button)
Scaling Postgres COPY
Tags: postgres, supabase, scaling, performance
Published: 2021-09-26 19:30:01

This post will be fairly quick, and covers how you can significantly reduce the amount of time a Postgres `COPY` command takes to complete.

Not too long ago, I managed to finish building out the first revision of my UK transport data platform.

During the time I was building it, I came across numerous challenges but perhaps one of the most critical - How do I improve the performance of data import?

Allow me to provide some context. I provide transport data for buses, trains and London underground via a GraphQL API. I source my data from numerous official providers, including National Rail, Network Rail, and the UK government open data sources. They provide me with huge datasets such as bus stop locations, transit schedules, etc. Every day, I retrieve this data and import it into a Postgres database.

One of my these datasets has over 38 million rows, and so ensuring that I can import that as quickly as possible is important for maintaining the general uptime of the API.

Here's a few quick tips which can significantly improve performance when importing datasets using Postgres `COPY` command:

 - **Delete indexes before importing**

Indexes provide a way for Postgres to quickly locate data in tables. You can run a database without them, but they help improve read performance significantly on large datasets. The downside of them is that they drastically reduce the performance of inserts. Removing them before you begin an import, and recreating them after the import is finished, reduces the need for the database to update indexes at the same time as it's handling the data import.

 - **Set tables to unlogged before importing**

When a table is set to `LOGGED`, it will write changes made to that table in the WAL (Write-Ahead Log). This helps ensure data consistency, and reduces the chance that a table will be corrupted. Unfortunately, much like indexes, this also reduces performance significantly when writing to the table. Setting a table to `UNLOGGED` before you begin the import, and then setting it to `LOGGED` after the import completes can improve performance significantly.

Let's cover some numbers.

**Importing the data with indexes in-place, and tables set to logged**: Approximately 27 minutes to import data to 6 tables

**Importing the data without indexes, and tables set to unlogged**: Approximately 10 minutes to import data to 6 tables

The creation of several indexes on the largest table after data import has completed takes around 3 minutes to complete. If I opted not to recreate the indexes, the entire import process would be completed in 7 minutes.
Button Web Component
Published: 2021-09-26 19:14:19

In my cta button project, my partner and I have coded the basic css designs and the javascript function for the drop down button. We also created a slot element to practice reducing repetitive code and implemented the simple-icon library so we can included an icon for our button. Over this weekend, I am working on adding the states to the button. 

My main difficulty has been launching my code onto the browser. My laptop already has the necessary installations but neither yarn start or npm run start is working. Lately, I've been copying the code that is being partner pushed onto github and pasting the changes into my code; then, I will send new code over through discord and he will implement it on his end. I will continue to look online to look for solutions. 

As I continue to work on this project, I am learning more of how HTML, CSS, and JavaScript are working together to make the button work. 

Repo Link:  https://github.com/IST402/btnproject1
Progress with CTA buttons with web components...
Published: 2021-09-26 18:54:08

When I first started trying to create a call-to-action button using web components I had a bit of difficulty learning how to style CSS variables, and some difficulty getting my component to work due to some, *very*, interesting issues I had with yarn. Despite my initial difficulties and setbacks I've become much more comfortable developing my button and I have some ideas as to how I can make it better. 

We were able to fix an issue with icons on our CTA button. When disabled, if the icons were clicked they would go to our link when they should have been is disabled. This was fixed by using a host: ([disabled]) state for our icons that disabled pointer events when the button was disabled. We were also able to add hover, focus, and active states to our cta button to ensure it had adequate functionality. 

One of the biggest issues I had was not with coding with JavaScript itself, necessarily. I had issues starting the button using @open-wc but it was mostly with yarn. After some *much* needed help I was able to succesfully run my component with npm. I decided that since yarn on my PC is completed messed up beyond all belief I will be using npm to run my component going forward. I also had a few issues with pushing my code to GitHub and with using git in general, but I have since gotten those issues resolved. 

Going forward I want to expand the functionality of the button to add some effects to it when clicked. For example I want to see if we can make a fireworks or confetti effect once clicking the button. I feel like adding some effects and making the button just more aesthetically pleasing is a good way to familiarize myself with the structure of web components code and with JavaScript, CSS, and HTML in general. 

If you want to see my, very much still in progress, web component you can find it here: 
https://github.com/TheKodingKrab/cta-button/tree/main/CEEK
Criando um novo projeto com o instalador do Laravel no macOS
Published: 2021-09-26 18:51:31

## 1. Instalando o instalador do Laravel
Nesta primeira etapa vamos instalar o instalador do Laravel de forma global com o [Composer previamente instalado](https://dev.to/mkioschi/instalando-o-composer-de-forma-global-no-macos-5861):

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

Agora, se certifique que o diretório binário do composer esteja em sua variável `$PATH`. Caso não esteja, é possível adicionar à sua sessão atual com o comando abaixo:

```bash
export PATH=$HOME/.composer/vendor/bin:$PATH
```

## 2. Criando um projeto
Com o comando abaixo é possível criar um novo projeto:

```bash
laravel new app-exemplo
cd app-exemplo
```

Agora basta servir com o artisan:

```bash
php artisan serve
```

#### Referências:
- [Documentação oficial](https://laravel.com/docs/8.x#getting-started-on-macos)
How to Fix Clickjacking on NGINX Server in 6 Simple Steps🔥
Tags: development, infosec, nginx, clickjacking
Published: 2021-09-26 18:49:17

## What is Clickjacking?

Clickjacking is the practice of tricking a user into clicking on something different from what they think they are clicking on. This often occurs in web browsers, where scripts can be used to make an invisible iframe appear to the user, but the iframe loads a different website than what the user thinks. For example, when a user clicks on a “Like” button, the user might instead unknowingly be liking the attacker’s Facebook profile.

![Clickjacking](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/epe2fimz7i0pwchqwa1w.png)

## How to fix Clickjacking on NGINX server?
There are multiple way to fix Clickjacking Vulnerability, but in this blog post we’ll see how to fix Clickjacking using X-Frame-Options headers.

### 1. Login to your server
First things first, Login to your server using ssh.

`ssh root@<<server_ip>>`

### 2. Open your NGINX Config file
To make changes in the configuration file, use any text editor to edit the file. I’ll be using vi text editor.

Use the following command to open the text editor:

`sudo vi /etc/nginx/nginx.conf`

Now press i to enter into insert mode (Only for vi text editor)

### 3. Update the Config file
In the http block of the config file, add the following code block:

`add_header X-Frame-Options sameorigin always;`

Once done, save the config file by pressing ESC key and then type `:x` and press enter. (Only for vi text editor)

### 4. Test the Config File
After saving the configuration file, test the file using following command:

`sudo nginx -t`

If the output states not successful, you have probably made some mistake in the configuration.

### 5. Restart NGINX Server
If the result of the above command was successful, you need to restart your server to update the changes that we have made.

`sudo service nginx restart`

or use `sudo systemctl restart nginx`

### 6. Verify the results
Now, we are already done with the heavy lifting. It’s time to test if Clickjacking Vulnerability is fixed or not. [Vulnerable.Live](https://www.vulnerable.live/clickjacking) is an online platform to test for Clickjacking.

Go to [Vulnerable.Live](https://www.vulnerable.live/clickjacking) and Enter your domain name.

![Vulnerable.Live Dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yfk9thrvs0l57uxbrzps.png)

Vulnerable.Live helps test for Clickjacking and generate report and POC for the vulnerability.

## Conclusion
Clickjacking is usually considered as a low hanging fruit but you never know which vulnerability hackers can exploit. Keep your Web Application secure from hackers using [Vulnerable.Live](https://www.vulnerable.live).
Creating a CTA Button
Tags: ist402, ctabutton
Published: 2021-09-26 18:41:08

###Difficulties
For my IST402 class, we were tasked to create Call to Action (CTA) buttons. I myself have never worked with HTML or CSS prior to the class, and have minimal JS knowledge. 
That has been the biggest hump for me to get over as I have to learn HTML and CSS basics while learning more advanced techniques at the same time. The CTA Button is also a brand new concept to both myself and my partner. There is a lot to learn for both of us and trying to adapt has been our biggest challenge

###Successes
Despite these challenges, we have managed to create the base of a functioning CTA button. It is very basic, but as we continue to learn we keep adding more intricate/advanced pieces to the button. Hopefully by the end of the project we've expanded our skill set to make a presentable and well functioning CTA button.

Here's our [repo](https://github.com/IST402-Group-F/CTA-Button) so you can track our progress as we learn more and more.
AMA: I am a 10y+ xp developer with a strong DevOps and backend development background
Tags: cloud, ama, infrastructure
Published: 2021-09-26 18:38:20

Hello the community 👋,

I am Romaric, CEO and co-founder of Qovery. I am building [Qovery](https://www.qovery.com) to help developers deploy their apps on AWS with a Heroku-like experience. I also believe that using a PaaS (like Heroku) should be more transparent on how it works. 

Here is my background:

- 10 years ago, I was a systems engineer at Ullink (high-frequency trading ⚡️ - now [ITIVITI](https://www.itiviti.com/)). Part of the SRE team for 4 years, I was managing thousands of Windows, Linux, UNIX servers around the world 🌎 Scaling and performance issues at all levels :)

- 5 years ago, I was lead backend engineer at Sirdata (ad-tech industry) for 3 years. I was working on processing TB of data per week and scaling our infrastructure. At the time, we were running our infrastructure on-premise on Kubernetes.

- 2 years ago, I launched Qovery - simplifying app deployment in the cloud for every developer. 11000+ developers from more than 150 countries are using our platform. We are running a distributed infrastructure on Kubernetes.

AMA in comments 👇