teleren/devto huggingface dataset:
Infrastructure as code - (When You Don't Know What The Heck Is It) Part 2
Tags: automation, collaboration, infrastructure, reproducibility
Published: 2023-01-29 17:51:23

Welcome back to our series on Infrastructure as Code (IAC)! Our first post discussed where it would hurt when you start with IAS. If you remember the points we discussed in [Part 1](https://dev.to/akshatkumar/infrastructure-as-code-when-you-dont-know-what-the-heck-is-it-39ml) and feel that your team is ready for the challenge, Infrastructure as code (IAC) has several benefits.

First, let's talk about **Version control**. Using GitHub, teams can manage their Infrastructure and rely on Git for version control. It allows them to track changes, collaborate on infrastructure projects, and quickly roll back to a previous version if necessary.

IAC enables provisioning and task management automation, reducing the need for manual intervention and the risk of human errors. **Automating** infrastructure provisioning on the cloud leads to significant cost savings and improved efficiency. It impacts infrastructure scaling to meet changing demands and reduce human error risk.

Who would prefer to avoid creating consistent and repeatable Infrastructure, making it easier to scale and maintain? Teams can create consistent and repeatable Infrastructure across their different groups and projects that can scale and sustain their Infrastructure easily, leading to cost savings and improved efficiency. **Reproducibility** is a key benefit of IAS.

**Flexibility** is also another essential advantage of IAC. It enables more agile infrastructure management by enabling teams to swiftly change their Infrastructure to the evolving requirements. It can benefit businesses expanding or working in sectors undergoing fast change. Swiftly modify their Infrastructure to reflect evolving business requirements and technological changes. They can respond to shifting market conditions with greater agility because of this.

In addition, for teams that work on infrastructure projects, sharing knowledge and best practices is easier. Their **Collaboration** can lead to improved infrastructure management and better overall outcomes. 

In conclusion, IAC has several benefits, including version control, automation, reproducibility, Collaboration, flexibility, better security, cost savings, and improved disaster recovery. By understanding these benefits and real-world examples of how they are being used, organizations can better understand how to implement IAC and fully realize its potential advantages.

Stay tuned for [Part 3](https://dev.to/akshatkumar/infrastructure-as-code-when-you-dont-know-what-the-heck-is-it-part-3-khm), where we talk about a few misconceptions.
Navigating the internet with JavaScript turned off
Tags: a11y
Published: 2023-01-29 11:13:53

---
title: Navigating the internet with JavaScript turned off
published: true
date: 2023-01-29 11:11:09 UTC
tags: a11y
canonical_url: https://blog.nicm42.co.uk/navigating-the-internet-with-javascript-turned-off
series: a11y navigation
---

After trying some tasks without using the mouse, and with a screen reader (and not being able to see the screen) I'm going to try the same tasks, but with JavaScript turned off.

## **Task 1: Gmail**

**Find a starred email in Gmail, go to the link within it, read the article in the link, then unstar the email and return to the inbox**

I had to use this in HTML view, which looks very old school. Keyboard shortcuts don't work, which threw me for a moment because I'm so used to using them with Gmail. But otherwise, it was fine, everything worked as expected.

## **Task 2: YouTube**

**Find my watch later list, watch a video on it that's not last on the list, look at the comments, then remove it from the watch later list**

I didn't get very far with this because it doesn't work. I had a lot of grey circles and rectangles where videos would be. But nothing else. Not even any links. Or an option to view an HTML version of the site.

## **Task 3: BBC iPlayer**

**Go to the BBC iPlayer, search for Click and play the most recent episode.**

The iPlayer looks almost identical without JavaScript. The only problem I encountered was when I had selected a video to play. It told me I needed JavaScript enabled and greyed out any video actions, and there was no play button.

## **Conclusion**

When the YouTube website didn't work I thought that was probably not unreasonable. The times when you might be surfing with effectively no JS is when you're on a slow connection. And if that's the case then you'd assume that a YouTube video would take so long to download that you just wouldn't bother.

And then the BBC iPlayer site working made that seem more unreasonable. Okay, so I can't play videos, download them or add them to my list, but at least I can see what's there, unlike on YouTube.
Interface in Laravel Application
Tags: laravel, interface, php
Published: 2023-01-29 17:34:52

I am developing web application for almost 5 years and still I did not know what is the use case of interface. I think many developers like me do not know the actual use case of interface. So I am here to share with you the actual use case of interface. 

You know that we can not define object from a interface. But interface gives us a polymorphic object. This content helps me a lot to learn interface though this content [Why And When To Use Interface In Laravel Application
](https://www.laravelia.com/post/why-and-when-to-use-interface-in-laravel-application) is on Laravel based but the concept is good.

Actually interface gives us 100% data abstraction. Abstract class also give that abstraction but not 100%. When we need a polymorphic object then you can use interface in your application.

If you follow this content, hope you will learn new things and your doubt about interface will be clear.
neco timetable for science student
Published: 2023-01-29 17:27:07

[https://multischolar.com/neco-timetable/](https://multischolar.com/neco-timetable/#utm_source=backlinks&utm_medium=search&utm_campaign=darry+ring+us&utm_content=Michelle)
https://plaza.rakuten.co.jp/chenlee/diary/202301300000/
https://www.provenexpert.com/neco-science/
https://www.producthunt.com/@necoscience
https://www.divephotoguide.com/user/necoscience/
https://wakelet.com/@necoscience
https://vocal.media/authors/necoscience
https://www.lifeofpix.com/photographers/necoscience/
https://seedandspark.com/user/necoscience
https://rosalind.info/users/necoscience/
http://phillipsservices.net/UserProfile/tabid/43/userId/196367/Default.aspx
https://app.roll20.net/users/11568402/necoscience
https://speakerdeck.com/necoscience
https://social.msdn.microsoft.com/Profile/necoscience
https://camp-fire.jp/profile/necoscience
https://plazapublica.cdmx.gob.mx/profiles/necoscience/activity
https://www.metal-archives.com/users/necoscience
https://storium.com/user/necoscience
https://trabajo.merca20.com/author/necoscience/
https://www.intensedebate.com/people/necoscience
https://www.mifare.net/support/forum/users/necoscience/
https://pinshape.com/users/2563520-necoscience
http://foxsheets.com/UserProfile/tabid/57/userId/119266/Default.aspx
https://www.kompasiana.com/necoscience
https://www.credly.com/users/neco-science/badges
https://www.myminifactory.com/users/necoscience
https://www.sqlservercentral.com/forums/user/necoscience
https://www.longisland.com/profile/necoscience
https://guides.co/a/neco-timetable-for/
https://myanimelist.net/profile/necoscience
https://www.iheart.com/podcast/269-neco-timetable-for-science-108002422/
How to install Jenkins on Kubernetes
Tags: jenkins, kubernetes, eks, ingresscontroller
Published: 2023-01-29 17:21:57

## Summary
Tutorial about installation of Jenkins on a Kubernetes (AWS EKS) cluster. Includes setup of Amazon EBS CSI, AWS Load Balancer Controller, Prometheus for monitoring and Jenkins K8s resources (deployment, service, ingress, etc.)

## Jenkins Architecture on EKS
![Jenkins on an EKS Cluster](https://johnruizcampos.com/wp-content/uploads/aws_kubernetes_eks_cluster_arquitecture.jpg)

## References
[Original Article](https://johnruizcampos.com/como-instalar-jenkins-en-kubernetes/)
[GitHub Project](https://github.com/jruizcampos/jenkins-k8s)
Red-Black Tree
Tags: algorithms
Published: 2023-01-29 17:05:22

###Red-Black Tree
Red-Black tree is a ***self-balancing binary search tree*** in which each node contains an extra bit for denoting the color of the node, either red or black. It was created in 1972 by Rudolf Bayer who termed them "symmetric binary B-trees."

###Properties of Red-Black Tree:
* Root element of Red-Black Tree is always black.
* Every NULL node or Leaf Nodes is black.
* If a red node has children then, the children or its parent are always black.
* Number of black Node on Any path from root to leaf is always same.
* Two consecutive red node should not be in Red-Black Tree.
* If you are inserting a new node is always a red node.

###Maximum height of Red-Black Tree : 
```
log n <= h <= 2log n
```


###Examples of Red-Black Tree:-
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r458riabr4bd251ddil9.png)
AWS 基礎 Part 6 -- EC2 で yum を有効化する
Tags: ec2, apache
Published: 2023-01-29 16:59:54


## why

https://zenn.dev/sway/articles/aws_publish_apache

これを参考に　yum で　Apache をいれようとした。
だが、そもそも初期状態の　EC2 では　yum が動かないと知った。
なので記事にした

---

## レポジトリが見つからない問題

```php
sudo yum update

Cannot find a valid baseurl for repo: amzn2-core/2/x86_64
 (28, 'Failed to connect to 

amazonlinux-2-repos-ap-northeast-1.s3.dualstack.ap-northeast-1.amazonaws.com 

port 443 after 4983 ms: Conne
ction timed out')
```

そもそも yum が動かない

https://go-journey.club/archives/14364

権限の問題っぽい

yum 時に

amazonlinux-2-repos-ap-northeast-1.s3.dualstack.ap-northeast-1.amazonaws.com 

この URL を叩いているので、S3 への権限がないようだ。

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

AWS の VPC のページから ENDPOINT にアクセスして

- 名前に toS3
- サービスカテゴリに AWS サービス
- サービス名に com.amazonaws.ap-northeast-1.s3
- サービスタイプに ゲートウェイ
- VPC に今使っている vpc-elb-ec2
- ルートテーブルに現在 VPC についているもの
- ポリシーにフルアクセス

これでエンドポイントを作成する。

これによってこの VPC で S3 のアクセスができるようになった。

```php
sudo yum update

(1/7): amzn2-core/2/x86_64/group_gz
2.5 kB  00:00:00

...

(7/7): amzn2-core/2/x86_64/primary_db
8 MB  00:00:01
```

実際に yum が動いた。

100% レンタルサーバーを使いこなすサイト様ありがとうございます

---

## ロケール問題

```php
sudo yum update
Failed to set locale, defaulting to C
Loaded plugins: extras_suggestions, langpacks, priorities, update-motd
```

yum は動いたが、ロケールのエラーが出続ける。

https://superuser.com/a/721223

この記事を参考にして

.bashrc に

```bash
# User specific aliases and functions
export LANG=en_US.UTF-8
export LANGUAGE=en_US.UTF-8
export LC_COLLATE=C
export LC_CTYPE=en_US.UTF-8
```

これを追記して US で言語設定して

```bash
source /etc/bashrc
```

sh を再度読み込んだ

```php
sudo yum update
Loaded plugins: extras_suggestions, langpacks, priorities, update-motd
amzn2-core                                                        | 3.7 kB  00:00:00     
No packages marked for update
```

すると、yum を動かしてもロケールのエラーが出なくなった。

---
SVG Cross-Stitch from Your image
Tags: svg, codepen, 8bit, pixelart
Published: 2023-01-29 16:54:04

Inspired by Kasey's «SVG Cross-Stitch» collection, I created a Pen that turn your image into a SVG Cross-Stitch.

{% codepen https://codepen.io/rodzyk/pen/dyjzExz %}
How I Get Into The Open-Source World
Tags: opensource, webdev, beginners, hacktoberfest
Published: 2023-01-29 16:53:36

I always ponder about how to get into the open-source world. People are talking about open source and Its benefits like improving coding skills, learning clean code, team collaboration, job opportunities…etc. In order to contribute all you want is a few git commands, a programming language you are interested in, and minimal usage of GitHub.

My journey starts when the arrival of the Hacktoberfest event in 2022. This event is conducted by Digital Ocean annually in the month of October. Their main motive is to make a contribution to open-source as a part of your life.

You just need to make 4 contributions to any valid GitHub repositories. If it’s successful and you will win a t-shirt or a tree to plant. The choice is yours, you can choose either of these options. They will ship that to your country without any extra penny. And if it’s a tree. It will be planted for you.

Besides code contributions, you can do low-code or no-code contributions as well. Such as writing or improving documentation, translation, testing…etc. This was a new thing in 2022 Hacktoberfest because, in the last year's event, they didn’t bring this low-code and no-code contribution. So this is a good opportunity for those who have less experience in the technical field. You can learn more about low code contribution [here](https://hacktoberfest.com/about/#low-or-non-code).

Before Hacktoberfest, I occasionally made some small contributions. My first contribution was fixing a typo in 30 Days of Javascript by Asabaneh. I also contributed to a fitness website called Fitnezz. Which is an HTML website. As a beginner programmer, you don’t need to get advanced in order to contribute. If you know HTML and CSS that’s enough to contribute. Open source is not only for Building real-world projects. It’s also a way for learning and sharing what you know.

While participating in Hacktoberfest I contribute to the project called MAMOMIA. Which is a food-ordering website made with HTML, CSS, and JavaScript. I made four pull requests (contributions) there. Which was a great experience for me. As a reward, I got the t-shirt which will eventually ship to my country.

Hacktoberfest is a great kickstart for me to start my open-source journey. After that event, I started to contribute to some projects. This year I will contribute as much as I can. So that I can improve my coding skill, network with people, and get job opportunities as well. If you are interested in open source, don’t wait for the next Hacktoberfest. Just learn the basics of git and GitHub and start contributing now.

Thanks for reading my blog. If you like this feel free to give a thumbs up on this article and follow me for more tech content like this.

Originally posted on [rabeeh.tech](https://rabeeh.tech/how-i-get-into-the-open-source-world)
Using Pivot Chart to Replace Your Pivot Table
Tags: javascript, opensource, react, datascience
Published: 2023-01-29 16:52:54

Pivot-Chart is an open-source comprehensive data visualization tool that enhances pivot tables with visualizations and charts, offering a more intuitive and informative way to analyze your data. With Pivot-Chart, you can elevate your data analysis and take a new approach to exploring your data. Unlike other pivot-table + vis solution, pivot chart retains nest multi-level aggregation feature of pivot table, which allows you to compare between different aggregation levels and make it easier to drill down and roll up.

Integrating Pivot-Chart into your data applications is easy, simply import the npm package. While this is a proof-of-concept project, your feedback and suggestions are valued and appreciated. 


features:
* All pivot table features
* Supports cell display as charts
* Retains nest multi-level aggregation feature of pivot table
* Easy to use and integrate with your projects as a component in web.
* Open-source and customizable to meet your needs

Github Repo: https://github.com/ObservedObserver/pivot-chart
Demo on Vercel: https://pivot-chart.vercel.app/
HN: https://news.ycombinator.com/item?id=34569184
How to use Cleave.js in Angular application?
Tags: angular, cleavejs, beginners
Published: 2023-01-29 16:49:39

## Quick intro to Cleave.js:
[Cleave.js](https://bit.ly/3WGTNtj) is a library used to format the input as a user starts typing in an <input> field without the user having to type the delimiter “ — ” as shown in the following gif

![gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6h4f2b6ut1gvpd271aoz.gif)

In this example, I will be showing date format with “ / ” as delimiter and “dd/mm/yyyy” as the date pattern, i.e.

```
{
  date: true,
  delimiter: '/',
  datePattern: ['d', 'm', 'Y']
}

```
## Steps to start using Cleave.js in your angular application:

1) Install Cleave.js using a package manager from terminal, here I’m using npm:

```
npm i cleave.js

```
 
2) Next, add the path to Cleave.js minimal bundle to angular.json file (as shown in the image below)

```
"./node_modules/cleave.js/dist/cleave.min.js"
```


![angular.json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zjxx6r7cccu8nom2mjq3.png)

3) Now, declare that there will be some object called Cleave in the runtime in your component using the following snippet.

```
declare let Cleave: any;
```


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

4) I will be using angular material form input, but you can use regular form tags and Cleave.js will work fine. Add a custom class to the form input field as shown (you can name it anything):


![form class](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nt4gqharworjrai8uktj.png)

5) Next, let’s implement the Cleave object in the component constructor like this,

```
/* 
Cleave takes in two parameters, the first is classname and second is the
object which contains data describing the input format desired.
In this example, we pass in input type, delimiter and datepattern.
*/
new Cleave('.cleave-date', {
      date: true,
      delimiter: '/',
      datePattern: ['d', 'm', 'Y']
});
```


![constructor implementation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tcefkym42ierevh7ruq8.png)

Notice the yellow box, it should be the same class name that has been applied to the input field in the corresponding HTML file.

Now, let’s serve it using ng serve command :)

`ng serve -o`

6) Uh-oh, did you also get this error and an empty screen?


![error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6k6mrdj8s8clmhpuhia7.png)

What it means is, we are trying to access an element in the DOM that hasn’t been rendered yet. To solve this, we have to implement the code in ngOnInit() lifecycle hook and not the constructor as shown in the image below


![error fix with ngOnInit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gem1x77266wk9me1538a.png)

7) and… Voila! Now you can see a form field and no error in the console and when you type in the date, you can see Cleave.js into the action :)


![final view](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b5a2fmsk0xkd49fee5ps.png)

I have only showed how to use Cleave.js with date format, learn other formats from here: https://bit.ly/3WGTNtj

Happy Coding!
Top 5 advantages of headless CMS over a traditional CMS
Tags: webdev, javascript, jamstack, serverless
Published: 2023-01-29 16:45:00

Business owners who have multiple channels for showing their content, companies that need a pretty unique design, or those who integrate new technologies in their business strategy (for example, in a Smart Watch) like the idea of headless CMS.

Today, we want to speak about the top 5 advantages of headless CMS over a traditional CMS. These are the top five reasons technical people enjoy working with headless and why business owners love it.

- API Content Delivery is THE best headless CMS advantage

Headless CMSes, aka decoupled CMSes, separate frontend from backend and use RESTful API (JSON, XML) to deliver the content. Technical people use that API and display headless content on a website, in mobile apps, or any other channel, wherever is needed.

The advantage here is: because developers got rid of limiting templates and rigid CMS design structures, they can create unique digital experiences.

- Headless CMS empowers faster time to market

Headless CMS is keeping the backend and frontend separated results in scalability and productivity. Two strong arguments business owners especially like to hear.

- Headless CMS is easier and more flexible to develop on

Until recently, using the same content from the same place and placing it on multiple (different) devices was unthinkable. Yet, it's the purpose of headless CMSs today. 

Developers nowadays can access the content repository more promptly and use the best technology in every unique situation. As a result, they build delightful user interfaces, solve every client's inquiry, and make their frontend more competitive.

As you can see, headless CMS is way more effective and can adapt quickly to all new technological advances. Besides everything written above, there is some more dominance of headless CMS regarding security and expenses.

How is it possible that headless CMS is the ultimate solution for everyone? (https://thebcms.com/blog/top-5-advantages-headless-cms-traditional-cms)
Using Styles and StyleUrls Component Properties in Angular
Published: 2023-01-29 16:35:49

**Problem**
repeating a style is common while coding , for example: - container , font-style buttons ..etc.

As angular component is separated (CSS and HTML) , We face a repetitive code and if we need to change a style we needs to change many time for minor change -maybe-

**✨Solution**

 styleUrls: ['./component1.scss',
    '../component2.scss']

```
@Component({
  selector: 'component',
  templateUrl: './component.html',
  
  styleUrls: ['./component1.scss',
    '../component2.scss']
})

export class Component implements OnInit {
  ngOnInit(): void {
  }
}

```

so if the style we need is existing in a different component we can add the path of CSS , better than copying the style code
Atomic locks in laravel explained in depth
Tags: laravel, php, webdev, mysql
Published: 2023-01-29 16:18:11



## What is Atomic lock?

Atomic lock is not a term directly related to a laravel itself.The term is actually from database.I hope you have know about ACID principle in database.They are

1. Atomicity
2. Consistency
3. Isolation
4. Durability

Atomic lock comes under the first property atomicity.To learn more about [ACID property](https://www.ibm.com/docs/en/cics-ts/5.4?topic=processing-acid-properties-transactions).

Let jump into practical usage: 

**Scenario:**  

In at some point of your dev life or else you may have built a e-commerce application or some kind of reservation system.just think of the situation in e-commerce application two user where placing the order at same time.but,the stocks left is only 1.As we know all web application process request in concurrently it may cause some in-consistency. 

example: 2-orders may placed but we know that only 1 left in stock.


How will handle this situation? roll up your heads for some time for solution just share your idea in comments if you faced the same kind of situation and how did you handle this problem? 

if you are love to watch video based content for the solution then just watch the video below & subscribe the channel in YouTube called LaravelDaily.This article is inspired from this video content

{% embed https://youtu.be/zybiFatkoCo %}



For this kind of solution where the Laravel Atomic lock come into play which help us to handle this problem like pro.


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


You can write application logic inside the `Cache::lock` method & the that time you specified it wont process other request under the hood laravel uses database driver to implement this feature for you.Once the specified time is completed it will process the next request in a queue.


So,The first order get placed after that the stock left would become 0,because we are processing the request in a queue.when a second request comes in the stock left is 0.the second order get rejected.you can use this for all kind of raced scenario also example ticket reservation & hotel bookings etc. 


Hopefully this will be useful to some of you :)

I'd love to hear what you're comments & more example let me know in the comments below!

Follow for more content like this & share