teleren/devto huggingface dataset:
INTRODUCATION TO WEB AND HTML
Tags: tutorial, webdev
Published: 2022-11-13 05:27:55

**Web** is the  connection between  of billion  client and server through wire and wireless network. The web client make requests
to web server. Let know who is client this question might be coming in your mind ?.let known client is how make request on web ,for example u have write on web a query that how to make cake this is request so u are the client and whereas who has answer your request  he/she is the replier of the answer is called server.The servers is where all the data is already feeded by someone.
**Web Servers **is consist of both Hardware and software working together.

- The Hardware used to store webserver software and website component file like html ,css ,JavaScript and etc.
- where as Software side, it control how server control the user to accesses  hosted file. webservers use protocol mean rule which predefined by the webservers software and most common one is Https:t he protocol your browser uses to view webpages .

## Their are two type of web serves  

- static: server hosted same file has send  as it is to your  web browsers
- dynamic: it update the hosted file  before sending the content to the browser
**The Apache HTTP Server Project **is a collaborative software development effort aimed at creating a robust, commercial-grade,
free available  source code implementation of an HTTP (Web) server. In February of 1995, the most popular server software on the Web was the public domain HTTP daemon developed by Rob McCool at the National Center for Supercomputing Applications, University of Illinois, Urbana-Champaign.
**Live server **
In vs code live server is give local environments for website development. It behaviour like dynamic serves.
It give an idea how go website behavior like to actual server.
Routing error for child component
Published: 2022-11-13 05:21:24

I try to route for subcomponent. When I have navigated to subcomponent, I found error about resource files not found. Such as runtime.js, vender.js etc.

For root url (/dashboard), it works normally.
But for sub url(/dashboard/staff) it shows error.

What wrong in my configuration? Please help.

![app-routing.module](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sqo6duuj0tm6mpn5c881.png)

![dashboard-routing.module](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r8umpmqcr80b14f7qmzb.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/prvi2r8909u49uns3ptu.png)
A website to do API calls from CSV / Excel sheet
Tags: discuss, showdev, startup, api
Published: 2022-11-13 05:19:16

Hey there,

I want to share my MVP with you and get early feedback about my tool. Would you have a few minutes for me?

The concept is the following: As a developer, working for many startups, I've been asked many times to import tabular data, from excel sheets, CSV files, and JSON, ... into APIs. Most of the time, I'm able to do it using code, but I would have loved to have a tool to do that. And, I'm pretty sure many people also shared the same need.

# My main questions are

Does it ring a bell to you? Is this something that you already had to achieve?
If yes, would you have paid for a tool to achieve that when you needed it?

I've drafted something: http://sheet2api.s3-website-eu-west-1.amazonaws.com/
It's still very draft, doesn't use HTTPs, is hosted on a tiny EC2 machine that reboots often, so, don't consider it's reliable yet. But, do you think it's worth extending it and making it a real product?

Thanks a lot :)
How to Make Stopwatch in React
Tags: javascript, react, programming, beginners
Published: 2022-11-13 05:07:02

In this article, we are going to make a stopwatch in react. Like a basic stopwatch we will have a display to show time, then we will have basic buttons for start, stop, resume and reset. As soon we will hit the start button, timer will be started and two buttons will appear stop and reset. By clicking stop, the timer will be stopped, and a resume button will appear. Lastly, the reset button will reset the timer back to 0 again.

So basically this is going to be a beginner-friendly project, so let’s make this project step-by-step.

##Pre-requisites to Make Stopwatch in React

- Basic knowledge of ReactJS.
- Basic knowledge of React hooks.
- Basic knowledge of React props.
- Good knowledge of React Components.

##Creating App Component
Let us start with App.js component, we have imported DisplayComponent.js and BtnComponent.js components, in which we will add structure for button and display. Then we also imported useState hook, so we can make use of it to get variable time. Now we have created state for time with initial 0 values for ms,s,m,h, which is actually for millisecond, second,minute and hour.

Then in return statement, we have called these two components in a div. And we have passed time as a prop for <DisplayComponent/>. Okay, so this is not for all for App.js we will do some changes as we progress in the Application.
[Read More](https://reactjsguru.com/how-to-make-stopwatch-in-react/)

Then in return statement, we have called these two components in a div. And we have passed time as a prop for <DisplayComponent/>. Okay, so this is not for all for App.js we will do some changes as we progress in the Application.

)
Capital letters decoded!
Tags: perl, python, theweeklychallenge
Published: 2022-11-13 04:00:20

## Weekly Challenge 190

[Challenge](https://theweeklychallenge.org/blog/perl-weekly-challenge-190/), [My solution](https://github.com/manwar/perlweeklychallenge-club/tree/master/challenge-190/sgreen)

## Capital Detection

You are given a string with alphabetic characters only: `A..Z` and `a..z`.

Write a script to find out if the usage of Capital is appropriate if it satisfies at least one of the following rules:

1. Only first letter is capital and all others are small.
1. Every letter is small.
1. Every letter is capital.

## My solution

This is relatively straight forward task. See if the input string matches the regular expression `^[A-Z]?([A-Z]+|[a-z]+)$`. Let's break down that expression.

* `^` and `$` match the start and end of the string
* `[A-Z]?` means that we have zero or 1 capital letter
* `([A-Z]+|[a-z]+)` means the remaining letters are either all upper case or all lower case.

The are multiple other regular expression that are equally as valid. For example `^([A-Z]+|[A-Z]?[a-z]+)$`. Given that performance isn't really an issue, I don't compare different expressions to see which is the fastest.

## Examples

```bash
$ ./ch-1.py Perl
1

$ ./ch-1.py TPF
1

$ ./ch-1.py PyThon
0

$ ./ch-1.py raku
1
```

## Task 2: Decoded List

### Task

You are given an encoded string consisting of a sequence of numeric characters: 0..9, `$s`.

Write a script to find the all valid different decodings in sorted order.

Encoding is simply done by mapping A,B,C,D,… to 1,2,3,4,… etc.

## My solution


The first observation I made when approaching this task is that not all numbers can be represented by the letters. If the last digit is 0 and the second last digit isn't one or two, then there isn't going to be any combination of letters that will match.

The first thing I do is create a dict (hash in Perl) called `letter_map`. This has the mapping between numbers and letters (1 is A, 26 is Z). To make life easy, I keep `s` as a string.

There are a variety of ways to solve this. I'm a big fan of recursive functions, and goodness knows I've overused them occasionally in these challenges. But not this time!

Instead, I've gone with the approach of using a stack. While Python does have modules (like queue) to process FIFO queues, I just used a standard list (array in Perl) for this task. Each item in the stack is a tuple (arrayref in Perl) of numbers and letters. The first item in the queue is the original number and an empty string.

I then remove the first item in the queue. If the number string is empty we have a solution, and I add it to the `soutions` list. Otherwise, I'll take one or two numbers off the number, and append the matching letter to the letter part of the tuple. I then append that in the queue. This sequence is then repeated until the queue is empty.

I finally sort the `solutions` list, and print the results.

## Examples

```bash
$ ./ch-2.py 11
AA, K

$ ./ch-2.py 1115
AAAE, AAO, AKE, KAE, KO

$ ./ch-2.py 127
ABG, LG

$ ./ch-2.py 170
No solution possible
```
Tic-Tac-Toe V2
Tags: algorithms, python, computerscience, programming
Published: 2022-11-13 03:55:46


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

This was a remake of one of my very first python projects. The original project was a tic-tac-toe game that ran within the terminal and was very randomized when it came to the computer choosing a place on the grid. As a challenge to myself and way of seeing how much I'd grown as a developer over the year, I decided to remake this same project from the ground up using Tkinter to build a GUI for the game and by writing my very first min-max algorithm to provide a very challenging experience. The result is an AI for the user to play against that is very good at winning Tic-Tac-Toe and difficult to beat. This project helped teach me a ton about the Tkinter library but also really tested my knowledge of data structures and algorithms. The project can be viewed on my GitHub at https://github.com/Dwayne-Lacey/Tic-Tac-Toe-V2
Customize Your Terminal with Oh My Zsh
Tags: tutorial, productivity, linux
Published: 2022-11-13 02:59:46

If you feel like your terminal has a boring, unattractive, and bland style. Sort of like this one:
![Boring Terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1xv427uq8qudiegur02g.png)

You may want to consider upgrading the **look** of your terminal to something vibrant and colorful.

## Oh My Zsh

Oh My Zsh "is an open source, community driven framework for managing your Zsh configuration." [Source](https://ohmyz.sh/)

Oh My Zsh comes with a ton of custom themes that you can include in your terminal, along with 275+ plugins such as the "git" plugin (which comes in preinstalled) that you can use to individualize your terminal experience. Not to mention Oh My Zsh comes with a vibrant open-source community where you can post issues. They even have their own T-Shirts! Cool!
[Link to their Github](https://github.com/ohmyzsh/ohmyzsh/wiki/Volunteers)
## How to Get Started
To start, you need to make sure that you zsh installed, to insure you have `zsh` installed you can simply run:
```
$ zsh --version
```
in your terminal. If you get a version number back, great! If not you can run:
```
$ apt install zsh
```
Assuming your running Ubuntu, the process may be different depending on what Distro you have installed on your system.

Now that you have `zsh` installed, to install `Oh My Zsh` you can run:
(with curl)
```
sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
```
(with wget)
```
sh -c "$(wget -O- https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
```
(with fetch)
```
sh -c "$(fetch -o - https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
```
Once you have installed Oh My Zsh, you may need to restart/reopen your terminal for the changes to take effect. 
## Customizing Your Terminal
There is a link on Oh My Zsh Github which has a list of themes you can customize your terminal with. [Here](https://github.com/ohmyzsh/ohmyzsh/wiki/Themes)
As soon as you have found a theme you like you need to edit your `.zshrc` file in order to make any changes.
For example, if you wanted the `agnoster` theme:
![Agnoster Theme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/whym4peatzdlvu7ll19j.png)
You would need to edit the `.zshrc` file, use any text editor you like. (Although, only REAL programmers use `vim`)
![ZSHRC FILE](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xi5a630y69j25c909bc8.png)
Change the quotations in ZSH_THEME into `agnoster`, or to whatever theme you like!
After you changed the theme, save the file, and you may need to restart/reopen your terminal to see the changes in effect. 
![Theme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ocm9312bz3ar4kwbz2i7.png)
What a cool looking terminal!

Hope this helped you, and made your terminal more snazzy! 😎😎😎

(Cover Photo and `agnoster` Photo from Oh My Zsh [Github](https://github.com/ohmyzsh/ohmyzsh))
certbot hooks for gandi.net v5 DNS API
Tags: certbot, letsencrypt, gandi, dns
Published: 2022-11-13 01:53:34

---
title: certbot hooks for gandi.net v5 DNS API
published: true
description: Using letsencrypt / certbot with gandi.net, without using an existing plugin
tags: certbot,letsencrypt,gandi,dns
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2022-11-13 01:37 +0000
---

I wanted to use [gandi.net's API](https://api.gandi.net/docs/livedns/) to update DNS for certbot/letsencrypt. I wasn't able to get TSIG (a standard DNS update method) to work. There is a plugin for gandi's API, but I wanted to make my own.

First, I went to https://account.gandi.net/en/users/USERNAME/security to generate an API key.

I saved the key as HTTP headers in `/etc/letsencrypt/gandi-api-key.txt` and `chmod 600 gandi-api-key.txt` to keep it secret:

```
Authorization: Apikey SECRET-API-KEY
Content-Type: application/json
```

and created two hooks:

`/etc/letsencrypt/gandi_hook.py`:

```python
#!/usr/bin/env python3
import os
import json
import subprocess
import time

domain = os.environ["CERTBOT_DOMAIN"]  # "domain.example.com"
domain, zone, tld = domain.split(".")
zone = ".".join((zone, tld))

command = f"curl -H @gandi-api-key.txt https://api.gandi.net/v5/livedns/domains/{zone}/records/_acme-challenge.{domain}/TXT -X PUT -d".split()

payload = json.dumps(
    {"rrset_ttl": 300, "rrset_values": [os.environ["CERTBOT_VALIDATION"]]}
)

subprocess.run(command + [payload], cwd="/etc/letsencrypt", check=True)

# https://www.gandi.net/en-US/domain/dns '250 ms'
time.sleep(1)
```

and the cleanup script, `/etc/letsencrypt/gandi_cleanup.py`:

```python
#!/usr/bin/env python3
import os
import json
import subprocess
import time

domain = os.environ["CERTBOT_DOMAIN"]  # "fedora.monotreme.club"
domain, zone, tld = domain.split(".")
zone = ".".join((zone, tld))

command = f"curl -H @gandi-api-key.txt https://api.gandi.net/v5/livedns/domains/{zone}/records/_acme-challenge.{domain}/TXT -X DELETE".split()

subprocess.run(command, cwd="/etc/letsencrypt", check=True)
```

`chmod +x gandi_hook.py gandi_cleanup.py`

To run certbot, `certbot certonly --manual --preferred-challenge=dns --manual-auth-hook /etc/letsencrypt/gandi_hook.py --manual-cleanup-hook /etc/letsencrypt/gandi_cleanup.py -d test.monotreme.club --test-cert`.

Modern Linux includes a systemd timer to automatically renew the certificates. Enable it with `systemctl enable certbot-renew.timer` and `systemctl start certbot-renew.timer`.

Unlike cron, the systemd timer has a random start time to avoid DDOS'ing letsencrypt's servers.

```
[Timer]
OnCalendar=*-*-* 00/12:00:00
RandomizedDelaySec=12hours
Persistent=true
```
What are topics a Junior Vue Developer can write about
Tags: webdev, vue, javascript, discuss
Published: 2022-11-13 01:25:54

This is a question I have been pondering on subconsciously for a while now. I would love topic suggestions on what I could write about as a Junior Vuejs developer with over 2 years experience writing Vue. I have a goal of increasing the rate at which I write articles and this would help a lot. Thanks
Museum of Candy!
Tags: bootstrap, webdev
Published: 2022-11-13 01:02:02

Spent my Saturday reviewing Bootstrap with Colt Steele.

This is my version of the [museum of candy](https://spontaneous-puffpuff-706a12.netlify.app/)

I used Bootstrap 5.2, but I had to pull in the JQuery to get the sticky navbar on scroll to work.

Colt is the best teacher. [Take his courses](https://www.udemy.com/user/coltsteele/)!

1.3 million students can't be wrong. 🧑🏼‍💻
How to create Stored Procedure in MySQL
Tags: mysql, sql, bigdata, database
Published: 2022-11-13 00:53:31



## => syntaxe

```
drop procedure if exists name_proc;
delimiter $$
create procedure name_proc(parametrs ..)
begin
    -- statement
end 
$$

delimiter ;
```

## => To execute the stored procedure 

```
Call name_proc(parametrs ..);
```
## i explaine how to create Stored Procedure in MySQL on youtube
**click this =>** [vidéo](https://www.youtube.com/watch?v=Yt8vJF2x-DI)
## this is my channel on youtube 
**click this =>** [The Dream Coding](https://www.youtube.com/channel/UC7EawDV9gGzPcYOLN3FrASQ)
Roblox Community
Published: 2022-11-11 23:55:54

Provide Latest News on J-Pop, K-Pop Music, C-Pop Entertainment Information and the cultures. Mobile Legends MLBB, PUBG, Garena Free Fire, [Nambanation](https://nambanation.com) Roblox Community, Fortnite Skins, Genshin Impact Forum, Tech, PC Gaming, PS4 PS5 Games, Android phone and iOS iPhone mobile game, gadget & pop culture information.

Roblox is a fun game for all ages and this roblox promo code presents a variety of attractive prizes for several things.

Not only can it be played anywhere with several platforms ranging from mobile, consoles, various mini games and experiences you can play in the Roblox game.

Players can also customize your character or your avatar by using Robux which is premium money in the mobile game.

But fortunately, players can use the Roblox Promo Code which can be used to get free accessories.

In addition to using Roblox Promo codes, players can use the link below to get a variety of free prizes.

From Emotes, hair, accessories, to clothes, you can get it by using that method.

Many are still active, let’s claim this latest Roblox promo code to get attractive prizes and of course for free.

Roblox promo code or redeem code is a set of cochrons of combinations of letters and numbers that can be claimed with a variety of attractive and free prizes.

All [Roblox](https://www.roblox.com) players, including those of you who may still be actively playing this exciting game are entitled to use the promo code to claim the free prize. Interesting, isn’t it?
Day 02: mark_down.md
Tags: writing, watercooler, ramblings, markdown
Published: 2022-11-13 00:16:13

[![Total Word Count - 417](https://img.shields.io/badge/Total_Word_Count-417-00AC47?style=for-the-badge&logo=Google+Keep&logoColor=ffffff)](https://)

In sticking with my challenge, I am sitting here trying to form type my thoughts and at the moment, it's kind of hard to come up with a topic but, let's give it a shot. This is the first thing that came into my head, so let's give it a go.

---

So here recently I have been working on getting myself a portfolio set up on GitHub. I have a few repos on there now but, they are not exactly the best but, I want keep them anyway. My thought is, if I am trying to land a job using my portfolio, I want my projects section to show my growth. I would put a couple of my early projects on there from when I was first learning (maybe 1 or 2 of the better ones). Then I would have around 1 or 2 projects that showed where I was at around the middle of my journey (to be fair, I'm not sure what that time frame would really look like, honestly). Finally, I would have around 3 or 4 of my best works. Something showcasing all of the tips and tricks I've learned. 

One of the things that comes with releasing open source code is including a readme so people can refer to it to get all of the information they need to use your code effectively.

While it is not a requirement, I like to make mine look graphically appealing. I think it may have to do with my ADHD brain but, I have always enjoyed creating graphics.

This is part of the problem I have been having with getting my readme completed and uploaded. I keep changing the design because I am the biggest critique of my own work and I tend to start over a lot.

Learning markdown has been really fun. You can do a lot of interesting things with it. I'm not going to say I've mastered it but, I definitely think that I am comfortable writing things in markdown now. (tables still give me a bit of trouble because I get confused and I wind up making it not align properly or something wacky happens and the table is broken.

Not mention, making something graphically pleasing is super simple because I can also include a few html tags if I need them.

Overall, the process has been super fun and I look forward to learning more about it and html. Thanks so much for reading and have a wonderful day!


![signature](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dkyr4hidq2q0ssrtey6b.png)
Strings and Numbers on JS, pills...
Tags: javascript, webdev, programming
Published: 2022-11-12 23:05:50



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xirdbfv0tp6h9w9hrgjn.jpg)
Hi these are some pills(little conceptional parts) that you can use daily bases of your programmer's life.
So i compill all of Strings to Numbers and Numbers to Strings functions and proprieties that we can use for it in javascript language.

**_Strings_to Numbers**

- First pill _use_ **String()**    :

```
let number="55 86 4232 5267";
console.log("My cellphone number is" + String(number));

```

- Second pill _use_ **.toString() :**:

```

let number="55 86 4232 5267";
console.log("my cellphone number is" + number.toString());

```
**_Numbers_ to String**

- Thirth pill _use_ **Number**:

```
let width = "90";
let height = "25";
console.log(Number(width) * Number(height));
```

- Fourth pill use **+**

```
let width = "9000";
let height = "80";
console.log( + width * + height);
```

happy coding!! :))
Where to host an API?
Tags: api, devops, discuss
Published: 2022-11-12 22:49:43

Ok, so I have an API service, that I am building into a container.  I'm looking for a service/provider that will host it, and provide all the front-end pieces - e.g., authentication/token, usage-tracking/quotas, firewall/security.  Is there such a beast and I'm just daft and can't see the forest for the trees?
(Array Methods Part 2) What are Accessor Methods?
Tags: javascript, beginners, programming
Published: 2022-11-12 22:30:47

Weeks ago I create a post to explain about types of array methods, I started talking that there are three types of array methods: Mutator Methods, Accessor Methods and Iteration Methods. In case you haven't seen the last post I recommend you see in [What are Mutator Methods?](https://dev.to/michaelvinidev/what-are-mutator-methods-aif).

Today I will explain about second type of array methods.

**Accessor Methods**

The difference between accessor methods and mutator methods is that accessor methods not change the original array, they return a new array with the changes, for example:

**.concat()** - This method is used to merge two or more arrays

The return of this method is a new array with all values of array that were merged.

```javascript
const animals1 = ['cat', 'dog'];
const animals2 = ['fish', 'frog'];
const animals3 = animals1.concat(animals2);

console.log(animals3);
// expected output: Array ['cat', 'dog', 'fish', 'frog']
```

**.filter()** - Method is used to filter an array based on the test implemented by the provided function.

The return of this function is the elements that pass in the test implemented by the provided function.

```javascript
const animals = ['cat', 'dog', 'turtle', 'fish', 'duck'];

const result = animals.filter(animal => animal.length > 3);

console.log(result);
// expected output: Array ['turtle', 'fish', 'duck']
```

**.includes()** - Includes method determines whether an array includes a value and returns true or false as appropriate.

```javascript
const pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('cat'));
// expected output: true

console.log(pets.includes('turtle'));
// expected output: false
```

Some others important Accessor Methods that I think you should know:

- .join()
- .slice()
- .indexOf()
- .lastIndexOf()
- .toString()

That's all for today!!


![see you soon!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iekgd94po7eqobyo3qi9.gif)