teleren/devto huggingface dataset:
I Was created an Analog clock in javascript
Tags: html, css, javascript
Published: 2023-01-22 17:55:33

First of all create a folder and then create three html file , CSS file and JavaScript file.
This is the HTML file 
step 1:- open sublime text or vs code or if you want to write your code any code editor application.
`<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Analog Clock</title>
	<link rel="stylesheet" type="text/css" href="clock.css">

<body>
	<canvas id="canvas" width="600" height="600"></canvas>
	

	
	
    <script src="clock.js"></script>
</head>
</body>
</html>`

step 2:-This is the CSS file .
`
body{
	
	background-color: #000;
	
}

#cnavas{

	margin-left: 300px;
	margin-top: 50px;
}


`

step 3:- This is the JavaScript file.
`var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var radius=canvas.height / 2;
ctx.translate(radius, radius);
radius=radius*0.90
// drawClock();
setInterval(drawClock, 1000);

function drawClock() {
	// ctx.arc(0,0,radius,0,2*Math.PI);
	// ctx.fillStyle="white";
	// ctx.fill();

	// Modify the function drawClock()
	drawFace(ctx, radius);

	// Second method add in clock for number
	drawNumbers(ctx, radius);

	//Third method add in clock for Time
	drawTime(ctx, radius);
}

function drawFace(ctx, radius) {
	var grad;
	ctx.beginPath();
	ctx.arc(0, 0, radius, 0, 2*Math.PI);
	ctx.fillStyle='white';
	ctx.fill();
	grad=ctx.createRadialGradient(0,0,radius*0.95,0,0,radius*1.05);
	grad.addColorStop(0, '#333');
	grad.addColorStop(0.5, 'white');
	grad.addColorStop(1, '#333');
	ctx.strokeStyle=grad;
	ctx.lineWidth=radius*0.1;
	ctx.stroke();
	ctx.beginPath();
	ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
	ctx.fillStyle='#333';
	ctx.fill();
}

function drawNumbers(ctx, radius) {
	var ang;
	var num;
	ctx.font=radius*0.15 + "px arial";
	ctx.textBaseline="middle";
	ctx.textAlign="center";
	for(num=1;num<13;num++){
		ang=num*Math.PI / 6;
		ctx.rotate(ang);
		ctx.translate(0, -radius*0.85);
		ctx.rotate(-ang);
		ctx.fillText(num.toString(), 0, 0);
		ctx.rotate(ang);
		ctx.translate(0, radius*0.85);
		ctx.rotate(-ang);
	}
}

function drawTime(ctx, radius){
var now=new Date();
var hour=now.getHours();
var minute=now.getMinutes();
var second=now.getSeconds();
//hour
hour=hour%12;
hour=(hour*Math.PI/6)+(minute*Math.PI/(6*60))+(second*Math.PI/(360*60));
drawHand(ctx, hour, radius*0.5, radius*0.07);

//minute
minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
drawHand(ctx, minute, radius*0.8, radius*0.07);

//second
second=(second*Math.PI/30);
drawHand(ctx, second, radius*0.9, radius*0.02);
}


function drawHand(ctx, pos, length, width) {
	ctx.beginPath();
	ctx.lineWidth=width;
	ctx.lineCap="round";
	ctx.moveTo(0,0);
	ctx.rotate(pos);
	ctx.lineTo(0, -length);
	ctx.stroke();
	ctx.rotate(-pos);

}

`
Cap XI: La rentabilidad metodológica, El libro negro del programador. 💻
Tags: programming, productivity, spanish, books
Published: 2023-01-22 17:51:32

## **La rentabilidad metodológica**

---

> * **Una metodología no es mas que una serie de normas sobre cómo progresar en el desarrollo de software y establecer bien las responsabilidades de cada miembro del equipo**.

---


* Para cualquier tipo de proyecto serio y grande es necesario un metodología para tener un marco de referencia claro de lo que está pasando en el proyecto.

* Un error que se comete en desarrollo de software es que desarrollamos primero los módulos que más nos atraen o más nos gustan dejando las funcionalidades más aburridas para el final.

* No hay una cultura de documentar el código, de escribir una guía de despliegue, o hacer pruebas.

* Todos estos detalles que van más lejos de la funcionalidad del software son super importantes en proyectos del mundo real.

* Cuando los tiempos empiezan a presionarlos y el estrés a subir tenemos la tentación de ignorar la metodología pensando que eso nos hará más productivos, grave error.

* Un proyecto que funciona no siempre es un proyecto exitoso, recuerda que el software evoluciona, se hacen cambios, se incorpora mas nuevas funcionalidades, sino hay un marco metodológico para guiar al equipo, el proyecto tiene mucha chance de fracasar.

* Un proyecto al fracasar, empapa a todos, a los desarrolladores, al manager, se pierde dinero y pueden rodar cabezas también.

* Desde el inicio del proyecto debemos pensar a largo plazo en la **rentabilidad metodológica**, plantar bien las bases del sistema, que pueda ser reutilizado, mantenido y evolucionado con el tiempo.

* Un desarrollador de software profesional no discute ni pone en duda el uso de una metodología.

* Sin metodologia cuenta mucho más saber que está bien y que mal, no sabremos si nos desviamos del objetivo o si llegamos a las fechas de entrega.

* Es responsabilidad del manager el proyecto hacer seguimiento de la metodología de software.

* Nos gusta mucho tener la libertad de programar lo que queramos cuando queramos, pero un desarrollador profesional tiene la obligación de basar su trabajo en una metodología.

* Es importante que la metodología escogida se adapte al proyecto, y no que el equipo de desarrollo se adapte a la metodología.

* **Una metodología no es más que una serie de normas sobre cómo progresar en el desarrollo de software y establecer bien las responsabilidades de cada miembro del equipo**.

* Seguir disciplinadamente una metodología dara una mayor rentabilidad técnica en el proyecto.

---

Te dejo el link gratuito de [*El libro negro de programador*](https://underpost.net/ir/pdf/cy3/el-libro-negro-del-programador.pdf) por si te intesa leerlo, o dale click a la imagen:


[![libro](https://www.digitalskillsinstitute.com/assets/media/books/5541eba31b4b42b5bb021dc77c70d658-480.jpg)](https://underpost.net/ir/pdf/cy3/el-libro-negro-del-programador.pdf)
How to Make Responsive Image Slider in HTML CSS & JavaScript
Tags: html, css, javascript, tutorial
Published: 2023-01-22 17:46:00

How to Make Responsive Image Slider in HTML CSS & JavaScript

hey guys, in this video we are going to learn how to make responsive image slider in html css & javascript. Image slider it's very important and helpful for everyone website. 

when you've added the slider, then user will able to see your beautiful header with content, inside there, you will able to redirect the users with any page as you want. So, You can use image slider inside your website.

Mostly ecommerce sites are using image sliders to display the popular products in sliders. So, let's get the start how to create responsive image slider in HTML CSS and JavaScript.

Basically, I've used HTML and CSS to design the image and header section, then I've used Swiper JS library to display the slider also it's automatic image sliders it's change image every 5 seconds.

hope this tutorial is helpful and beneficial for you, and you will learn many new things from this video.

{% embed https://www.youtube.com/watch?v=3ETHQcHzDlY %}
Practice Mock Tests for the Elastic Certified Engineer (ECE) exam
Tags: elasticsearch, certification, mock, practice
Published: 2023-01-22 17:35:22

So you've gone through the syllabus and prepared all the necessary topics for the ECE exam. You are days away from attempting the exam. _How do you get that booster dose of confidence to tackle the exam_? How do you avoid those nervous moments on seeing the first question in the exam and feeling your heart sink? There are times when we prepare the syllabus in entirety and yet we are short of confidence in facing the exam **_due to lack of practice of facing the questions_**.

That's where **`Mock tests and practice exercises`** can help. They help us to validate and solidify our preparation strategy. They sort of give us the much needed fillip to bolster our confidence and face the exam. Imagine preparing a question and seeing a similar one appearing in the exam. Instead of nervousness, we smile and are excited to tackle the exam.

Once my preparation was done, roughly 2-3 days before the exam, I began preparing mock tests that were available for free. I didn't have much time in hand and was just looking to up my confidence. Also, _preparing is one thing but seeing the questions and forming your thoughts and answering is altogether a different thing_. 

For my exam, I gained a lot of confidence by practising the mock tests and exercises available for free at [guido-lenacota](https://medium.com/kreuzwerker-gmbh/elastic-certified-engineer-exam-what-to-expect-and-how-to-rock-it-cf409ed48d7b) and [acloudguru](https://acloudguru.com/hands-on-labs/ece-practice-exam-part-1), however you can also choose to purchase the [elastic subscriptions](https://www.elastic.co/training/subscriptions). The standard and professional versions come with a practice exam attempt which is very beneficial. And even [Udemy](https://www.udemy.com/course/elastic-certified-engineer-exam/) has come up with a practice test at  which is pretty affordable. 

Hope this post helps you in your certification journey.

**_Disclaimer_**: This is not to suggest that mock tests and practice exercises are mandatory. **_Even without them_**, you can ace the exam and pass it with flying colours. It's just that for some of us, we feel better prepared on attempting mock tests.
Sliding Idiomatic Code
Tags: python, programming
Published: 2023-01-22 17:29:06

Writing efficient and concise code starts with a solid understanding of programming fundamentals and ends with mastering the syntax, structure, and idioms of a specific language. Idiomatic code is easy for other programmers to understand and recognize patterns in, making it a valuable tool for any developer.

As programming languages evolve, so do the best practices and idioms. In Python, for example, the way to read a file has changed over time. An old, anti-pattern way of reading a file would be:

```python
_FILE = "data/pears.png"

# anti-pattern 😫
f = open(_FILE, mode="rb")
img_bytes = f.read()
# do awesome things
f.close()
```

This way of reading a file is considered an anti-pattern because it doesn't ensure that the file is properly closed. A better way to read a file would be:

```python
# O.K. Meh 😒
try:
	f = open(_FILE, mode="rb")
	img_bytes = f.read()
	# do something awesome
	
finally:
	f.close()
```

Even better would be to use the with statement:

```python
# better 😏
with open(_FILE, mode="rb") as f:
	
	img_bytes = f.read()
	# do something awesome

```

Or even better yet, using the Path class from `pathlib`:

```python
# awesomeness 🤗
from pathlib import Path

img_bytes = Path(_FILE).read_bytes()
# do something awesome 
```

By staying up-to-date with the latest idioms and best practices, you can write code that is more efficient, concise, and easy to read for other programmers. Keep learning, keep experimenting, and keep writing idiomatic code.

Until then, keep on coding, idiomatically!
Create an EC2 instance in a private subnet to communicate with the Internet.
Tags: aws, cloud, awscommunity, 100daysofcloud
Published: 2023-01-22 17:23:37

[22/100] #100DaysOfCloud Today, I created an EC2 instance in a private subnet to communicated with the Internet.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3orrd8bcuhb6d833iqyx.jpg)

In this a VPC is created that has a public subnet and a private subnet. An Internet Gateway is created and attached to the VPC. 
A new Route table is created and the private subnet is associated to it. 

Internet Gateway is a VPC component that allows communication between your VPC and the Internet. It allows both inbound and outbound access to the internet and allows instances with public IPs to access the internet. You only need one Internet Gateway per VPC. There is no additional cost to use Internet Gateway.

At this stage, both the route tables have access to each other as they are in the same VPC and the route tables have local access to each other. The subnets cannot talk with the Internet even though the Internet Gateway is attached to the VPC. For it to happen, we need to add it to the route table.

By adding it to the route table of the public subnet, the resources in that subnet can have access to and from the Internet.
If the Internet Gateway is added to the route table of the private subnet then it wouldn't be a private subnet as it will have incoming initiations from the Internet. 

Next, we create a NAT Gateway in the public subnet. Then we add it to the route table of the priate subnet. Now, the resources in the private subnet can connect to the Internet. The traffic is routed to the NAT Gateway which routes to the Internet Gateway and that to the Internet.

NAT Gateway only allows outbound access. NAT Gateway allows instances with private IPs to access internet but NAT GW itself will block all incoming initiatives from the Internet.. You need one NAT Gateway per Availability Zone (AZ). NAT Gateway incurs charges based on the creation and usage.

You can try do it by yourself by following the steps from the link below:
[GitHub](https://github.com/aaditunni/100DaysOfCloud/blob/main/Journey/022/Readme.md)
LeetCode #94 Binary Tree Inorder Traversal with JavaScript
Tags: javascript, algorithms, leetcode
Published: 2023-01-22 17:16:04

Solutions to LeetCode's [94. Binary Tree Inorder Traversal
] (https://leetcode.com/problems/binary-tree-inorder-traversal) with JavaScript.

Solution 2 addresses the following follow-up.
**Follow up: Recursive solution is trivial, could you do it iteratively?**

## Solution 1: Recursive
```js
/**
 * @param {TreeNode} root
 * @return {number[]}
 */
const inorderTraversal = (root) => {
  let res = [];
  helper(root);

  function helper(root) {
    if (root != null) {
      helper(root.left);
      res.push(root.val);
      helper(root.right);
    }
  }
  return res;
};
```

- Time complexity: O(n)
- Space complexity: O(n)

It's very readable when implemented with recursion.

## Solution 2: Iterative
```js
/**
 * @param {TreeNode} root
 * @return {number[]}
 */
const inorderTraversal2 = (root) => {
  let current = root;
  const stack = [];
  const res = [];
  while (current || stack.length) {
    while (current) {
      stack.push(current);
      current = current.left;
    }
    current = stack.pop();
    res.push(current.val);
    current = current.right;
  }
  return res;
};

```
- Time complexity: O(n)
- Space complexity: O(n)

1. Assign root to current node
2. Push current node to stack (Nested while)
3. Move current node to the left (Nested while)
4. Pop a node out of the stack and put it in the current node.
5. push val of current node to res array
6. Move current node to the right

The iterative solution uses a stack and is less readable than the recursive solution.
Is headless CMS a secure CMS?
Tags: webdev, javascript, jamstack, serverless
Published: 2023-01-22 16:45:00

Hacked websites lead to data loss, income loss, credibility, and potential lawsuits. Also, that means countless hours of debugging and repair for you, dear developers.

How does hacking usually happen?

The favorite way for hackers and bots to gain access is via the login screen, and password strength also plays a vital role.

Alongside login, outdated websites are an easy target, too. Using an older coupled CMS version that is obsolete means that the security system has not been updated; therefore, it's not protecting that much. One of the weakest spots is third-party add-ons and plugins, and unfortunately, they are popular among non-tech users.

So, why were we talking about all those vulnerable targets for attacking a website? Traditional CMSs like WordPress and Joomla, which most people use for building websites, are code and file heavy. Hence, they have more material vulnerable to cyberattacks.

How headless CMS security differs from traditional CMS?

Headless CMS is a bit different. Under the pure headless CMS architecture, content is typically delivered through a content distribution network (CDN) and not through a database, as is the case under older CMS versions. Having the frontend and the backend separated keeps the focus on the content creation and storage, with little to no control on the frontend rendition. Unlike a traditional CMS, which consists of backend storage and frontend presentation layer tightly coupled together, headless CMS parts are not codependent; in other words, they are decoupled.

Furthermore, the API publishes headless content as read-only. It can also be placed behind one or more layers of code — perhaps an application layer and a security layer — making it even less vulnerable to attack: security tighter, risk of attacks lower.

Another popular method of hacking we haven't mentioned in the beginning is through SQL injection. Headless CMS combats by running on a server without SQL or even without being connected to SQL. When a developer truly creates a unique decoupled CMS from scratch, like a headless CMS, nothing about your CMS is a known entity.

Here are the security benefits of headless CMS:

It is less susceptible to DDoS attacks.
No database for content, no security threat – simple
Fewer updates
Web continuity
Future-proofed

Whatever the case, security must not be neglected in any CMS.
Benjamin Franklin said: "By failing to prepare, you are preparing to fail."

Honest advice for business owners and content creators would be finding experienced developers to make your web or app safer and make your digital experience less stressful.

Honest advice for every web developer would be - to consider headless. (https://thebcms.com/blog/headless-cms-secure-cms)
Unlocking the Power of HTTP: Navigating the Digital Highway
Tags: beginners, computerscience, computernetworks, networking
Published: 2023-01-22 16:26:14

### Understand HTTP as a beginner
</br>
**HTTP** is an acronym for HyperText Transfer Protocol. This protocol is the foundation of the World Wide Web and is used to access data in it. It can be used to transfer the data in the form of plain text, hypertext, audio, video, and so on.

Let's discuss some of the **features** of **http**

1. **Connectionless** -> HTTP is considered to be a connectionless protocol. The whole process starts from the host(client) sending a request to the other host(server) and receiving a response. The connection formed between these 2 for sharing of resources is immediately dropped after the response is received.

2. **Stateless**-> HTTP is also considered to a stateless protocol. This is because the server gets the information from the client as long as it is connected with it (till server sends the response). In this way, the server does not retain any information about the client.

3. **Media independent** -> HTTP is also media independent. This means that any type of data can be sent to the server via HTTP protocol as long as the server knows how it can handle the data content. Thus, both the client and the server need to specify the content-type of the data.

4. **Client server architecture** -> This type of model usually involves a client and a server. Here, the server hosts, delivers and manages the resources requested by the client. The client in order to access resources, needs an address which is called URL( Uniform Resource Locator). This URL is consisted of 4 parts and they are : 

- **Method** : The method is the protocol used to retrieve the document from the hosted server. For example, `http`.
- **Host** : The host is a computer which is storing the information. Generally computers store web pages. For example, `www` (not mandatory field)
- **Port** : It is the port number of the server. This is also an optional field. It comes between the host and path and it should be separated from the `host` by a ` : `.
- **Path** : It is the pathname of the file (resource) where the information is stored. It contain `/` that separates the directories from the subdirectories and files.

---
I hope this blog was easy to understand the widely used protocol. If you have any queries, or think there is some error please comment down below ! Keep learning !
Address in Solidity
Tags: web3, blockchain, solidity, ethereum
Published: 2023-01-22 16:13:13

The address type comes in two categories:

- Address: A 20-byte value (the size of an Ethereum address).
- Address payable: The same as the address but with the extra members transfer and send

This difference is made because a simple address is not designed to receive Ether, for example. After all, it is a smart contract that was not built to accept Ether.

## Type conversion:

Conversions from address payable to address are allowed implicitly but must be done explicitly through payable(address).

uint160, integer literals, bytes20, and contract types support explicit address conversions.

Only address and contract-type expressions may be explicitly changed to address using the explicit conversion payable (...). This conversion is only permitted if the contract can receive Ether, i.e. The contract has a receive or payable fallback method. payable (0) is an exception to this rule.

> Important: If you need a variable of type address and plan to send Ether to it, then declare its type as address payable to make this requirement visible. Also, try to make this distinction or conversion as early as possible.

##Address Operators:

- <=
- <
- ==
- !=
- >=
- >

 

For more content, follow me on - https://linktr.ee/shlokkumar2303
CodePen Designs - 24 : 3D Card
Tags: codepen, css, webdev, design
Published: 2023-01-22 16:06:46

### We are excited to introduce our new series that will explore the best design ideas from the Codepen community. 

We will be publishing these each day and hope you find them insightful and inspiring as we showcase some of the most talented designers in this space.

---


#### Codepen Design - 24

<p>3D effect on card hover</p>

{% codepen https://codepen.io/gayane-gasparyan/pen/wvxewXO %}

---


![card hover](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z61709jh6r8445k1kkll.gif)

---
## For more information

1. Check my GitHub profile
[https://github.com/amitSharma7741](https://github.com/amitSharma7741)

2. Check out my Fiver profile if you need any freelancing work
[https://www.fiverr.com/amit_sharma77](https://www.fiverr.com/amit_sharma77)

3. Check out my Instagram
[https://www.instagram.com/fromgoodthings/](https://www.instagram.com/fromgoodthings/)

4. Linktree
[https://linktr.ee/jonSnow77](https://linktr.ee/jonSnow77)

5. Check my project

- EVSTART: Electric Vehicle is the Future
[https://evstart.netlify.app/](https://evstart.netlify.app/)
-  News Website in react
 [https://newsmon.netlify.app/](https://newsmon.netlify.app/)
-  Hindi jokes API
 [https://hindi-jokes-api.onrender.com/](https://hindi-jokes-api.onrender.com/)


---
---
New series for 2023
Tags: webdev, programming, codenewbie, algorithms
Published: 2023-01-22 16:01:06

## Announcement for new series 
Hello community it's been more than 1.5 years I am writing for the community. 650+ followers, 10k+ views and lots of love from the community  I am fortunate enough that the community loves reading my posts and now its time to do something  more for the community. So in the begining of 2023 I am looking forward to start a special series exclusively for the community members.

## About the Series 

As a developer I belive that core consepts like Data Structres and algaorithims are most important in various ways. This series will help you guys boosting up your problem solving and thinking skills which will not only help  you to ace your interviews but also these  skills are necessary for code optimization, refactoring and wrtiting clean code. 

This series will be named as **DSA TLDR** and every article will conatain a TLDR so if you already know the topics then just simply read the TLDR. 

## Conclusion 
I hope the community will love this series and I believe this will help a lot of folks who looking forward to start a career as a developer and also those who are looking already in the industry. Stay tuned for the 1st post. Happy Coding :)