teleren/devto huggingface dataset:
🛑Git, its commands and GitHub.........
Tags: beginners, github, githunt, git
Published: 2022-07-18 08:17:28

What if I tell you that you have a mistake at beginning of the project now your website is crashing and you can not reverse the changes. Devastating, Right!

This was the feeling of every developer before Git came into existence. Still, most developers were not using Git because it was difficult to create servers to save source code. To solve this problem, a person name Tom Peterson created an online place to store source code without creating a server and called this online place GitHub.

Most people confuse Git with GitHub, but both are far different from each other. Git is software that helps you store the history of progress that you made on source code. Whereas, GitHub is a place on the internet where you store your source code using git commands.


**Pros**

- Easy to learn and start working
- You can easily reverse your mistakes
- You can quickly store your data on the internet.


**Cons**

Fewer opportunities only for this field.
It can not handle big files, you have to use the LTS version.
It is had to debug errors, and hard to understand some concepts.
Hey everyone, sharing our free design-to-code platform, Locofy.ai, that we've built to help accelerate designers and engineers.
Tags: react, reactnative, css, nextjs
Published: 2022-07-18 08:07:00

We're now live on Product Hunt :rocket: do check us out at: https://www.producthunt.com/posts/locofy-ai

With Locofy.ai you can:
• Convert Figma designs to React, HTML-CSS, Nextjs, Gatsby and introducing...:mega: Figma to React Native!
• Build both Web and Mobile Apps with Locofy.ai
• Fully responsive code and live-prototypes that run on code:
• Use components from Material UI, Ant Design, Bootstrap, React Native Paper
• Go from idea to live product with Netlify and Vercel deployment or export code and add backend logic
Locofy is made by builders, for builders! Do check us out and comment and review us and we’ll be happy to respond.
Learn Advanced web designing course in Delhi with A2n academy and upscale your career in IT industry
Tags: webdesigningcourseindelhi
Published: 2022-07-18 08:02:18

Web designing is currently one of the most well-liked and quickly expanding IT training courses. Learning web design will make it easier for you to understand concepts in HTML, CSS, and JAVASCRIPT. A web developer may create their own website from scratch if they have mastered all of the concepts.


A2n Academy is the finest place to take a **[web designing course in Delhi](https://www.a2nacademy.com/course/web-designing-course-in-delhi)**. We provide top-notch web design instruction globally with the help of our highly skilled experts.
We believe it is important to understand the principles of web design before diving into challenging coding languages. Our interesting, dynamic courses are made to make learning for you quick and pleasurable.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mqwxr2vv202cqjfuq2wh.jpg)
The significance of a web design course has increased recently due to growing demands from customers and architects. Learning through instruction enables students to advance up the website architecture ladder and sharpen their abilities. Additionally, they help you build a solid portfolio, which may inspire you to pursue your vocation more seriously.

Planning a **[web designing course in Delhi](https://www.a2nacademy.com/course/web-designing-course-in-delhi)** is a good way to master both the fundamentals and the most cutting-edge web planning techniques.

The doors of A2n Academy, a training facility for experts in web design, development, and marketing, have been opened.
setTimeout() & setInterval() in javascript
Published: 2022-07-18 08:01:25

As we discussed earlier setTimeout() starts it's timer and goes to task queue and waits until the call stack is empty. This is all a part of the event loop working.

### setTimeout()

Example code:
```javascript
function sayHi() {
  alert('Hello');
}

setTimeout(sayHi, 10000);
```

Here `sayHi` function is executed after a delay of 10000 ms.

`setTimeout()` doesn't necessarily execute the callback function precisely after the time inserted. 

As it waits for the call stack to be empty, it might be the case that the timer has already expired while waiting, which means it will execute after a while and not the time mentioned. 

Hence, 
```javascript

function sayHi() {
  alert('Hello');
}

setTimeout(sayHi, 0);
.
.
.
```

Even here, it will wait till the whole program is executed and call stack is **empty**.

By remaining in task queue, it makes sure to avoid thread blocking. So:
- It waits **atleast** the time mentioned to execute the callback.
- It does not block the main thread.


### setInterval()
It keeps on executing the callback function after given interval until stopped.

```javascript
let timerId = setInterval(() => console.log('attention'), 2000);

setTimeout(() => { clearInterval(timerId); console.log('stop'); }, 5000);
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/454bljqpr3xrvjn4qdbt.png)
 

Here, the 'attention' is printed after every 2 seconds and it's cleared using `clearInterval()` below after 5 seconds, that is when stop is printed.


>Learn more about concurrency in javascript and how can setTimeout(0) is used. 
🌟[setTimeout() by Akshay Saini](https://www.youtube.com/watch?v=nqsPmuicJJc&t=1187s)
Jenkins. Invalid agent type "docker" specified. Must be one of [any, label, none]
Tags: docker, groovy, jenkins, pipeline
Published: 2022-07-18 07:59:08

While executing the docker container inside the jenkins (pipeline) failed with below error.

```bash
org.codehaus.groovy.control.MultipleCompilationErrorsException: startup failed:
WorkflowScript: 3: Invalid agent type "docker" specified. Must be one of [any, label, none] @ line 3, column 9.
           docker { image 'ubuntu:18.04' }
```

You have to install 2 plugins: **Docker** and **Docker Pipeline** plugin.

Go to Jenkins root page > Manage Jenkins > Manage Plugins > Available and search for the plugins.

Hope that helps.
#TestCulture 🦅 Episode 11 - Web development jobs
Tags: webdev, beginners, agile, devops
Published: 2022-07-18 07:57:01

**Software developer -** Deals with the development of "heavy" client software, software that is installed on the operating system. A software developer knows how to reproduce interfaces, manage the data entered by the user, process this data through different algorithms in order to solve a problem or propose a functionality to the end user.

**Mobile Developer -** Develops applications for mobile devices, such as phones and tablets, which require specific knowledge. The difference lies in the execution platform. The mobile has specific characteristics and constraints such as screen size, touch interaction, battery, operating system, sensors…

**Web Developer -** The web developer's goal is to bring the web designer's models to life. A Web Developer does not need graphic skills. His objective is to reproduce with code the visuals created by the person in charge of the design.

**Front-end web developer - **Specialized in the realization of all the visible part of the web projects. The integration of design, animations, accessibility, adaptability to different screen sizes, but also the logic of navigation, exchange and verification of data…

**Back-end web developer -** Focuses on the hidden part of the iceberg by supporting data processing and security, backup and recovery, user-invisible calculations, and other complex algorithms. The languages, methods and technologies of the back-end developer are very similar to those of some software developers.

**Fullstack web developer -** Manages the technical part of a web project from end to end (front-end, back-end, deployment) and requires a wide variety of technologies to learn and master.

**DevOps -** Combination of cultural philosophies, practices, and tools that increases an organization's ability to deliver applications and services at high velocity. A DevOps is either a dev who has system and cloud admin knowledge, or a system and cloud admin who has dev knowledge, or a person with devops training.

**Cybersecurity Analyst -** An expert in this field must not only be able to program, but also to administer systems, network, mathematics and cryptography…

**Quality Tester -** evolution of the developer's job for people who are attached to the robustness and the optimization of the code. Implements test strategies in relation to a specification, in order to verify that the software produced does not have any malfunction or that the anomalies identified have been correctly corrected.

**Data Scientist -** Finds or creates solutions to rework datasets in order to extract meaning using computer tools or mathematical and statistical analysis.

Thread [on Twitter](https://twitter.com/agilitest/status/1532387555412520964?s=20&t=JskyoEupZSq4SasV5exEZw).
How to use a custom domain on GitHub pages
Published: 2022-07-18 07:52:03

You just hosted a website on GitHub pages and now you're wondering how to add a custom domain to it to give your website that final touch? Here is how.

---

**This article assumes, that your website is already hosted on GitHub pages.**

---

In the first step, you need to add some DNS records in the domain settings of your custom domain's domain name registrar. In my case, this is GoDaddy, where the settings look like this:

![DNS settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9vh4ixfembmbp19wecb1.png)

You just add four new records:

- **Type:** A (the same for all records)
- **Name:** @ (the same for all records)
- **GitHub pages IP addresses:** 
185.199.108.153, 
185.199.109.153, 
185.199.110.153, 
185.199.111.153
- **TTL:** you can use the default value (the same for all records)

Save these new records and head over to github.com.
Here, you navigate to the repository of your website. Once there, go to Settings -> Pages.

![GitHub settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tck9vhow4omx7nzku2hy.png)

You should see something like this under "GitHub pages". Now, you only need to add your custom domain in the "Custom domain" field and hit "Save". GitHub will run checks in the background, to validate your domain for the use with GitHub pages. This might take a moment. Once done, you can check "Enforce HTTPS", if this is not happening automatically.

![GitHub settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ff8s6s24ssvqob5ibap.png)

Before you can visit your app under the new custom domain, there is one last thing to do. You need to add a CNAME file to your gh-pages branch. For this, simply click Add file -> Create new file and call this new file "CNAME" (this must be uppercase). Inside this file you add one line. Your custom domain.

`customdomain.com`

![GitHub settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/al6wzc9wnmq0wg1bqjfv.png)
 
This is it. You have now added a custom domain to your website hosted on GitHub pages. It might take a minute for all these changes to take effect. Once you see "Your site is published at …. " in the GitHub Pages tab, your site is published and you can visit it under the new custom domain.

---

**Note:** In some cases the CNAME file gets added automatically when you save the custom domain under "GitHub Pages". Just make sure to check if this is the case and add it manually if necessary.

When you make changes to your website and deploy it again, you might see that your custom domain and the CNAME file have been deleted. In that case you will need to add both again in order to use the custom domain. To avoid the CNAME file deletion, you could make a pull request before you commit the changes to the remote repository.
BASIC S3 Commands
Tags: s3, aws, beginners
Published: 2022-07-18 07:50:48

##**Overview of Amazon S3**




## **What is S3?**

S3 stands for Simple Storage Service. It is a **severless**, **object** storage, built to retrieve any amount of data from anywhere. 

**Object Storage** means that you can store each piece of information in your data (structured or unstructured) as a uniquely identifiable object. 

**Benefits**
**Fast retrieval -** each piece of information can be uniquely accessed does not matter it is small or big. 

## How does Amazon S3 work?
**Amazon S3** is an object storage service that stores data as objects within buckets. An object is a file and any metadata that describes the file. A bucket is a container for objects. To store your data in Amazon S3, you first create a bucket and specify a **bucket name** and **AWS Region** . Then, you upload your data to that bucket as objects in Amazon S3. Each object has a key (or key name), which is the unique identifier for the object within the bucket.

**Note:** _Amazon S3 supports global buckets, which means that each bucket name must be unique across all AWS accounts in all the AWS Regions_

The maximum file size on S3 is **5TB**. An object in S3 can be between **1 byte and 5TB**. When uploading, Amazon S3 allows a maximum of 5GB in a single upload operation; hence, objects larger than 5GB must be uploaded via the S3 multipart upload API.

## COMMANDS
**Initial S3 Connection**
`import boto3
access_key = '****'
secret_key = '********'
s3 = boto3.resource('s3','us-east-1',
                    aws_access_key_id=access_key,
                    aws_secret_access_key=secret_key)
s3_client=boto3.client('s3')
`

**1.Create S3 Bucket**
`s3.create_bucket(Bucket='test')`

**2.List all Buckets**
`for bucket in s3.buckets.all():
   print(bucket.name)`


**3.Access a Specific File form S3**
`your_bucket = s3.Bucket('test')
for s3_file in your_bucket.objects.all():
   print(s3_file.key)`


**4.Create an Object in S3**
`txt_data = 'Testing 1 2 3 ...'
object = s3.Object('test', 'file_name.txt')
result = object.put(Body=txt_data)`

**5.Put an Object in S3**
`json_string = json.dumps(toJson)
object = s3.Object('test', 'json_data.json')
result = object.put(Body=json_string)`


**Reference Links**
For more examples, you can refer to
[https://realpython.com/python-boto3-aws-s3/] (Step-by-step guide)
[https://boto3.amazonaws.com/v1/documentation/api/latest/index.html] (Official docs)
Notes about Cloudflare cache and json
Published: 2022-07-18 07:43:43

I have spent a lot of time trying to understand how to setup cache for json and API requests in Cloudflare lately and finally i have made some progress. This is not a step by step guide but mostly a "notes to self" post so i can make some more sense of it all.

- If workers are active on a route page rules are ignored. Took me a while to realize this.

- Cloudflare only execute ONE page rule per request, so make sure the rules are in the correct order and you don't have any "catch all" rule at the top.

- Also note that the above note is not applied to workers route, with workers the routes is matched by how detailed they are. I.e domain.com/test is used even if domain.com/* exist and the order doesn't matter.

After you know this it should simply be to set a custom page rule on the path you want to cache with the option

`Cache Level: Cache Everything`
Yarn upgrade version numbers in package.json
Tags: npm, yarn, javascript
Published: 2022-07-18 07:41:36

The update system in yarn / NPM is a bit confusing to me. You run update and packages gets updated but nothing happens in package.json. I know yarn-lock handles it but again, i don't understand it 100% and it feels a bit unclear.

What i want is a way of actually update the version numbers in package.json and today i found a way. The trick is to use.

`yarn upgrade-interactive --latest`

This will give you a prompt where you can pick what packages you want to update and it will actually also update the version number in package.json. The trick is the --latest flag.

> The upgrade --latest command upgrades packages the same as the upgrade command, but ignores the version range specified in package.json. Instead, the version specified by the latest tag will be used (potentially upgrading the packages across major versions). The package.json file will be updated to reflect the latest version range. By default, the existing range specifier in package.json will be reused if it is one of: ^, ~, <=, >, or an exact version. Otherwise, it will be changed to a caret (^). One of the flags --caret, --tilde or --exact can be used to explicitly specify a range.
Implementing XGPlayer in Ruby on Rails
Tags: rails, ruby, javascript, webdev
Published: 2022-07-18 07:40:49

Xgplayer is a web video and audio player library, designed with separate, detachable UI components. Since everything is componentized. the UI layer is very flexible. We will learn how to Implement it in Ruby on Rails
Github link: https://github.com/railsdrill/episode-19-xgplayer-in-ruby-on-rails.
{% youtube exi1Ns23EHo %}
Unable to install react components
Tags: react
Published: 2022-07-18 07:36:54

PS C:\Users\akhil\Downloads\react_travel_app> npm install @material-ui/core @material-ui/icons @material-ui/lab @react-google-maps/api axios google-map-react


npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: react_travel_app@0.1.0
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR!   react@"^18.2.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0 || ^17.0.0" from @material-ui/core@4.12.4
npm ERR! node_modules/@material-ui/core
npm ERR!   @material-ui/core@"*" from the root project
npm ERR!   peer @material-ui/core@"^4.0.0" from @material-ui/icons@4.11.3
npm ERR!   node_modules/@material-ui/icons
npm ERR!     @material-ui/icons@"^4.11.3" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See C:\Users\akhil\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\akhil\AppData\Local\npm-cache\_logs\2022-07-18T07_32_39_881Z-debug-0.log


I am unable to resolve this using --force or --legacy-peer-deps
Can some-one please help. Kindly someone please Help

####
Tencent Cloud COS enables FTP function
Published: 2022-07-18 07:36:15

My website has always used Tencent Cloud's [COS](https://www.tencentcloud.com/product/cos?from_social=dev_14) , and static resources such as pictures, JS, and CSS exist on it, and the speed is ideal. But there is a common point: file management is quite inconvenient. Although uploading files can support a single file of 20G, deleting files can only be deleted one by one, and when there are files in the folder, they cannot be deleted. Delete things one by one, then delete the folder. Some people may say, just put it there, it doesn't affect it anyway, but for my obsessive-compulsive disorder, this is unbearable! ! Sometimes I really delete one by one, it's really hard.
![image](https://ask.qcloudimg.com/http-save/yehe-1076268/4inig84v5j.gif)
So today I did some research on the Internet and found that there is an official API on the Internet to write scripts for batch control, which is not bad, and the wp plug-in is used. Next is the focus of this article, super invincible and convenient: apply for official FTP permissions to manage files.
step:


1. Log in to Tencent Cloud official website and enter the console;
2. Click on the upper right corner: work order - my work order;
3. Left: Submit a work order - please select the problem category - storage and CDN - [object storage](https://www.tencentcloud.com/product/cos?from_social=dev_14) COS;
4. Then select: Enable FTP function. Fill in the Bucket for which you want to enable the FTP function below;
5. You're done! The review speed did not say, I had to pass it in about 7-8 minutes.


![image](https://ask.qcloudimg.com/http-save/yehe-1076268/4inig84v5j.gif)
At this point, it is almost completed, the rest is to create an FTP account (object storage service-Bucke list-modify configuration-FTP settings), and then log in with Winscp, you can see all files, no more Every time I upload a file, I have to log in to the official website and upload it. You can operate it at will here. Of course, the risk is also greater. If you make a mistake, it will be in vain. Here are some instructions for FTP:
Client configuration:

>Address: ftp://ftp.file.myqcloud.com Port number: 9421 Encryption method: TLS explicit encryption (recommended) or no encryption (not recommended) Connection mode: pasv Passive mode timeout setting: 300 seconds (recommended)

Functional limitations:

>Download operations are not supported. Remote move, copy, and rename operations are not supported. The maximum file limit is 100 MB.
Test horizontal scroll overflow on mobile devices with Cypress
Tags: javascript, testing, webdev
Published: 2022-07-18 07:35:00

One bug that appears now and then is that some element on the page is overflowing and makes the entire page overflow. I wanted to create a test in Cypress that make sure this doesn't happen. But i had a really hard time finding exactly how to do it.

Finally i realized i could make use of the [scrollTo](https://docs.cypress.io/api/commands/scrollto) feature in Cypress.

```javascript
it("should not have side scroll on about", function () {
   cy.viewport("iphone-6");
   cy.visit("/software/spotify/about/");

  cy.scrollTo("topRight");
  cy.window().its("scrollX").should("equal", 0);
});
```
So what this does is that it set the viewport to an iPhone 6, go to a page on the site, it scroll to the top right corner AND then if scrollX is larger than zero then cypress managed to move the entire page i.e. i have a bug that caused a sidebar scroll on the page.

Of course this bug is usually caused by some bad data but i least i can catch some of the issues this way.
What is an HTML Element? How do you create one?
Tags: html, beginners, webdev, tutorial
Published: 2022-07-18 07:32:00

HTML elements are the building blocks of HTML documents.
An HTML element is composed of an opening tag + content + a closing tag.

Example of an HTML element:

```html
<p>This is a paragraph.</p>
```

- `<p>` is the opening tag.
- This is a paragraph. is the content.
- `</p>` is the closing tag.

## Nested HTML Elements

HTML elements are capable of being nested. Meaning that one element can be placed inside another element.

The following example contains six HTML tags:

`<html>`, `<head>`, `<title>`, `<body>`, `<p>`, and `<br>`:

```html
<html>
 <head>
  <title>first page</title>
 </head>
 <body>
  <p>This is a paragraph <br>new line</p>
 </body>
</html>
```

The `<p>` tags, `<br>` tag, and the content text are all nested inside the body element in the sample above.

Some HTML elements, such as the `<br>` element, have no content and do not require an end tag. These are known as empty elements. The
tag defines a line break in the paragraph.

Another example of nested elements:

```html
<p>This is <em>Emphasize</em> text</p>
<p>This is <b>bold</b> text</p>
```
In the above example `<em>` and `<b>` elements are nested inside `<p>` element.

## Basic Elements

The following are the basic elements of an HTML page that you will come across:

The `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, and <h6> tags are used to indicate a text header.

The `<p>` tag is used to indicate a paragraph.

The `<hr>` tag is used to indicate a horizontal ruler.

The `<a>` (anchor) tag is used to indicate a link.

The tags `<ul>` (unordered list), `<ol>` (ordered list), and `<li>` (list element) are used to indicate a list.

The `<img>` tag is used to indicate an image.

The `<div>` tag defines a division or a section in an HTML document

The `<span>` tag is used to indicate a text span.

Want to learn more about HTML elements? Here is a useful reference guide that MDN Web Docs have created – [HTML elements reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element).

If you want to understand more about a website’s basic HTML structure, [go here](https://maxlockwood.dev/basic-html-document-structure/).