teleren/devto huggingface dataset:
How to Install and Configure XAMPP on Windows 10
Tags: xampp, apache, php, webdev
Published: 2020-10-24 13:53:27

##1-What is XAMPP
XAMPP is a free and open-source tool used by web developers in the Windows family and other platforms to set up the development and testing environment. XAMPP server comes with the XAMPP control panel to manage all its components easily.
 
XAMPP stands for (X) Cross-platform, (A) Apache, (M) MySQL, (P) PHP, (P) Perl and with some additional modules including phpmyadmin (for the database), FileZilla, Mercury, and Tomcat.
 
Once you have installed and configured the XAMPP server in your system, you can easily work with any CMS like WordPress, Joomla, Drupal and more. XAMPP server works like a local server in your system that is generally used by PHP developers to test the websites (web-projects).
 
This document will show you the various steps on how to install and configure the XAMPP server on Windows 10.

##2-Installation Process of the XAMPP Server
#####Step 1

To download the XAMPP server, visit the Apache Friends website in your web browser URL: https://www.apachefriends.org/download.html.

![pic1](https://dev-to-uploads.s3.amazonaws.com/i/wbulbuise3p8h9dd13cr.PNG)

#####Step 2
 
Click on "XAMPP for Windows". Then, navigate the downloading location and the file will be automatically downloaded.

![pic2](https://dev-to-uploads.s3.amazonaws.com/i/ugtfe8bktihrclchat4e.PNG)

#####Step 3
 
Double-click the downloaded file to launch the XAMPP installer.

#####Step 4
 
Setup window will appear on the screen. Then, click on the "Next" button.

![pic3](https://dev-to-uploads.s3.amazonaws.com/i/oigu12r5e37atxxjy1e3.PNG)

#####Step 5
 
Select the components that you want to install and click on the "Next" button. By default, all components are selected in your XAMPP installation.

![pic4](https://dev-to-uploads.s3.amazonaws.com/i/pp28xmuirlnagrk9cjlg.PNG)

#####Step 6
 
Choose a folder to install the XAMPP and click on the "Next" button.

![pic5](https://dev-to-uploads.s3.amazonaws.com/i/nsg6zcvqrrj4lbiabldz.PNG)

#####Step 7
 
Uncheck or Check the "Learn more about Bitnami for XAMPP" option and click on the "Next" button.

![pic6](https://dev-to-uploads.s3.amazonaws.com/i/9rt5yg6bc75b6oev1x58.PNG)

#####Step 8
 
"Ready to Install" window will appear on the screen, then click on the "Next" button.

![pic7](https://dev-to-uploads.s3.amazonaws.com/i/jnlcd5gkcadkvd0wptxx.PNG)

#####Step 9
 
Xampp installation process

![pic9](https://dev-to-uploads.s3.amazonaws.com/i/1u7vfeei4vmxwrgymgu3.PNG)

#####Step 10
 
Click on the “Finish” button when the installation is completed

![pic8](https://dev-to-uploads.s3.amazonaws.com/i/wuc7pad27i3c5xlonc2p.PNG)

#####Step 11
 
Start the XAMPP control panel through the "Run as administrator" option.
 
#####Step 12
 
"XAMPP Control Panel" will appear on the screen and click on "Start" action to start the "Apache" and "MySQL" modules.

![pic9](https://dev-to-uploads.s3.amazonaws.com/i/oh90x4gpzvxfaitz2hhj.PNG)

 
##Conclusion
 
By following the above methods, you can install and configure the XAMPP server on Windows 10.
 
I hope you enjoyed this document.
 
Thanks for reading.
RSA & How to Create encryption key?
Tags: security, rsa, cryptography, datatransmission
Published: 2020-10-24 13:44:33

**RSA** (Rivest–Shamir–Adleman) is a public-key cryptosystem that is widely used for secure data transmission.
RSA method is a widely used encryption algorithm. You cannot discuss cryptography without at least some discussion of RSA. This public key method was **developed in 1977 by three mathematicians: Ron Rivest, Adi Shamir, and Len Adleman.** The name RSA is derived from the first letter of each mathematician’s last name. One significant advantage of RSA is that it is a public key encryption method. That means there are no concerns with distributing the keys for the encryption. However, RSA is much slower than symmetric ciphers. In fact, in general, asymmetric ciphers are slower than symmetric ciphers. 

The steps to create the key are as follow :

1. Generate two large random primes, p and q, of approximately equal size. 
2. Pick two numbers so that when they are multiplied together the product will be the size you want (that is, 2048 bits, 4096 bits, etc.). 
3. Now multiply p and q to get n. 
4. **Let n = pq.**
5. Multiply Euler’s totient for each of these primes. If you are not familiar with this concept, the Euler’s Totient is the total number of coprime numbers. Two numbers are considered co-prime if they have no common factors. 
>For example, if the original number is 7, then 5 and 7 would be coprime. It just so happens that for prime numbers, this is always the number minus 1. For example, 7 has 6 numbers that are co-prime to it (if you think about this a bit you will see that 1, 2, 3, 4, 5, 6 are all coprime with 7).

6. **Let m = (p – 1)(q – 1).** 
7. Select another number; call this number **e**. You want to pick e so that it is **co-prime to m.**
8. Find a number d that when multiplied by e and modulo m would yield 1. (Note: Modulo means to divide two numbers and return the remainder. For example, 8 modulo 3 would be 2.) 
9. Find **d**, such that **de mod m ≡ 1.** Now you publish **e** and **n** as the public key and keep **d** and **n** as the secret key.

To encrypt you simply take your message raised to the e power and modulo 
**n = Me % n** 

To decrypt you take the ciphertext, and raise it to the d power modulo 

**n: P = Cd % n** 

RSA has become a popular encryption method. It is considered quite secure and is often used in situations where a high level of security is needed.
Ingredient list as QR code
Tags: bash, qrcode, cooking
Published: 2020-10-24 13:34:38

---
title: Ingredient list as QR code
published: true
tags: bash, qrcode, cooking
---

As a good housewife I have a personal cookbook with all the favourite meals of my family.
Usually we are doing our weekly grocery shopping, for the whole week, on Saturday . On this day I also create a meal plan for the upcoming week and think about what i have to buy. 

I'm using an App to manage my shopping list and I have to add the items by hand. But this App has a feature to import lists from the clipboard. And if I want to cook something new, I have to copy and pasting this in to my note App, reformatting as list, finally after this, I can use the import feature.
It is quite tedious and sometime painful do everything on my phone.

After thinking about how to optimize this work flow, I come up with following script:

```bash
#!/bin/bash

tickCount=0
ingredient=""
# read the recipe file 
while IFS= read -r line
do

    # checking for ticks as hint for the ingredient list start
    if [ "$line" == "\`\`\`" ] && [ "$tickCount" == "0" ]
    then 
        tickCount=1
        continue
    fi

    # checking for ticks as hint for the ingredient list end
    if [ "$line" == "\`\`\`" ] && [ "$tickCount" == "1" ]
    then 
        tickCount=0
        continue
    fi
    
    # as long as i am between ticks append the current line to the variable
    if [ "$tickCount" == "1" ]
    then
        lf=$'\n'
        ingredient="$ingredient$lf$line"
    fi

done < "$1"

# show the list
echo "$ingredient"
# print out the ingredient list as qr code in to the terminal
qrencode -t UTF8 $"$ingredient" -s 1 -o -

```

Now, I have to digitalize all my cooking recipes in to markdown format, cause for the moment they are only handwritten in a book.

But the copy/pasting part of new recipes, are easier on a pc instead of a mobile phone. And if I am going further, I can write a scraper script which converting the html into markdown for me.
Tailwind CSS Buttons
Tags: css, html, webdev, tutorial
Published: 2020-10-24 13:33:37

Tailwind CSS is a popular CSS framework with a fully customizable low-level framework. Here the help of utility classes we made multiple different buttons in Tailwind CSS.



In these buttons, we just used CSS classes which are given in Tailwind CSS documentations. Here we only focus on a buttons color with and text color which is suitable in buttons.

Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

[Source Code](https://w3hubs.com/tailwind-css-buttons/)
How to use Sass in a React project
Tags: css, react, html, codenewbie
Published: 2020-10-24 13:33:34

[Sass](https://sass-lang.com/) is a css extension that provides wonderful features such as variables, mixins, imports, and an easier way to read the stylesheets. 

This is why is so popular and the js frameworks have implemented it in its project building.

To use sass in a react project you have to install the [node-sass package](https://github.com/sass/node-sass) with `npm i node-sass --save`. This package basically allows us to import the scss files into our jsx files.

Now having a stylesheet as follows, we can do two things:

```scss
$color:red;

.container{
  background-color:$color;
}
```

*Import as stylesheet*


```javascript
import "styles.scss"

function App() {
  return (
   <div className="container">...</div>
 )
}

export default App;
```

*Import as module*
For this case, the scss file must have `module` in its name, like this *`styles.module.scss`*

```javascript
import styles from "styles.module.scss"

function App() {
  return (
   <div className={styles.container}>...</div>
 )
}

export default App;
```

And that's it, you have implemented sass in your react project.
Code Smell 05 - Comment Abusers
Tags: codenewbie, tutorial, beginners
Published: 2020-10-24 13:29:54

*Code has lots of comments. 
Comments are coupled to implementation and hardly maintained.*

> TL:DR; Leave comments just for important design decisions. Don't explain the obvius.

# Problems

- Maintainability

- Obsolete Documentation

- Readability

- Code and comments duplication.

# Solutions

1) Refactor methods.

2) Rename methods to more declarative ones.

3) Break methods.

4) If a comment describe what a method does, name the method with this description.

5) Just comment important designs decisions.

{% post https://dev.to/mcsee/what-exactly-is-a-name-part-i-the-quest-61k %}

# Examples:

- Libraries

- Class Comments

- Method Comments

# Sample Code

## Wrong

[Gist Url]: # (https://gist.github.com/mcsee/4fb1f04c950ece88450fec59ed6a827b)
```php
<?

final class ChatBotConnectionHelper {
    //ChatBotConnectionHelper is used to create connection strings to Bot Platform
    //Use this class with getString() function to get connection string to platform

    public $id; //ChatBot Id

    function getId() { //Gets id value
    }

    function setId($id) { //Sets id value
    }

    function getString() {
        //Get Connection String from Chatbot

        //....

    }
}
```

## Right

[Gist Url]: # (https://gist.github.com/mcsee/698102c04428aec69356cad26d4c50cd)
```php
<?

final class ChatBotConnectionSequenceGenerator {

    private $name;

    function connectionSequence() {
        //....
    }
}
```

# Detection

Linters can detect comments and check the ratio of comments / lines of code against a predefined threshold.

# Relations

{% post https://dev.to/mcsee/code-smell-75-comments-inside-a-method-2bk %}

# More info

[Refactoring Guru](https://refactoring.guru/es/smells/comments)

[What is in a name](https://dev.to/mcsee/what-exactly-is-a-name-part-i-the-quest-61k)

[Comments as a bad sign](https://dev.to/alexbunardzic/code-comments-are-a-sign-that-something-s-off-19e1)

[How to comment your code](https://arter.dev/how-to-comment-your-code-like-a-boss)

# Tags

- Comments

- Declarative

# Conclusion

Leave comments just for important design decisions. Don't comment a method with a bad name, rename it.

# Credits 

Photo by <a href="https://unsplash.com/@lunarts">Volodymyr Hryshchenko</a> on <a href="https://unsplash.com/s/photos/chat">Unsplash</a>

* * *

> If you have to spend effort looking at a fragment of code and figuring out what it’s doing, then you should extract it into a function and name the function after the what.

_Martin Fowler_

{% post https://dev.to/mcsee/software-engineering-great-quotes-26ci %}

* * *

This article is part of the CodeSmell Series.

{% post https://dev.to/mcsee/how-to-find-the-stinky-parts-of-your-code-1dbc %}

*Last update: 2021/06/06*
Installation process of XAMPP for windows.
Published: 2020-10-24 13:18:34

Hello, this is a guide to installing XAMPP on 64bits windows operating system, I believe you already know what this is so we can get started

Step 1 – Search it on Google or go to this link https://www.apachefriends.org/fr/download.html

Step 2: choose your version according your Operating System like below and click on Download

![step2](https://dev-to-uploads.s3.amazonaws.com/i/fsq60onudbderc20efmi.PNG)

Step 3- Open the setup and follow the Instructions

![step3](https://dev-to-uploads.s3.amazonaws.com/i/j7t0hkwlcb2t43rnz10z.png)

Step 4 – click on Ok and continue

![step4](https://dev-to-uploads.s3.amazonaws.com/i/beqq16oqqr9fjlc3nr35.png)

Step 5 – Click Next

![step5](https://dev-to-uploads.s3.amazonaws.com/i/mk92are1f1e3agjr59y1.png)

Step 6- Next again

![step6](https://dev-to-uploads.s3.amazonaws.com/i/z5s3py4dn3dblv0z7lzc.png)

Step 7- Make sure you install only on ‘C’ directory.

![step7](https://dev-to-uploads.s3.amazonaws.com/i/idx6lmlri6abtuxtdlsx.png)

Step 8 –Choose your language

![step8](https://dev-to-uploads.s3.amazonaws.com/i/shieujywxifw9zepjyrt.png)


Step 9- Click on Next

![step9](https://dev-to-uploads.s3.amazonaws.com/i/hwv7kfkfh5bkav5e9vw2.png)

Step 10 – Click on Next

![step10](https://dev-to-uploads.s3.amazonaws.com/i/hjkv5xi4f7a69t02y1b0.png)

Step 11- Wait until it’s done.

![step11](https://dev-to-uploads.s3.amazonaws.com/i/m3aspd7pfdvz8ts9ripg.png)

Step 12- If you have this pop up…don’t worry …just authorize access and continue.

![step12](https://dev-to-uploads.s3.amazonaws.com/i/dcbbdd2gouboo2ictjb6.png)

Step 13- Wooo, you have done….click on Finish and you will see the XAMPP control panel

![step13](https://dev-to-uploads.s3.amazonaws.com/i/4s8363se4wbgrgqk98cw.png)

![step14](https://dev-to-uploads.s3.amazonaws.com/i/dud3qjyhaqfs69s5cg71.png)
      
So thanks for read this tutorial… I hope it has been very useful to you, and will help you to create great projects.
MySQL Workbench Installation process.
Published: 2020-10-24 12:56:17

Step 1 – Search it on Google or go to this link https://dev.mysql.com/downloads/workbench/

![part1](https://dev-to-uploads.s3.amazonaws.com/i/qth5639wzs2wgawl2rj7.png)
 
Step 2-: choose your version according your Operating System like below and click on Download


 ![part2](https://dev-to-uploads.s3.amazonaws.com/i/d8gkv0gpf2konhxsr620.png)

Step 3- You can skip Sign up or Log in…just click here below

![part3](https://dev-to-uploads.s3.amazonaws.com/i/13w9xn0hmxah64zmozu4.png)

Step 4- Open the setup and Click on Next.

![part4](https://dev-to-uploads.s3.amazonaws.com/i/0nrr4y019xlqp40ekab9.png)
 
Step 5- Select the directory or leave the default and click on Next.

![part5](https://dev-to-uploads.s3.amazonaws.com/i/pvqw6kmh3r5zwfsfqxa9.png)
 
Step 6 – Choose the complete version and click on Next.

![part6](https://dev-to-uploads.s3.amazonaws.com/i/5a5kotou8cyeuc3gzp8i.png)

Step 7 – So ready for Install, click on the Button.

![part7](https://dev-to-uploads.s3.amazonaws.com/i/ez5u1quh24oni37gn3az.png)

Step 8 – Still installing

![part8](https://dev-to-uploads.s3.amazonaws.com/i/sdqzuj9no318xb33gyki.png)

Step 9 – Ok you have  done.

![part9](https://dev-to-uploads.s3.amazonaws.com/i/wuz9fuu6neg5r3sca70m.png)

![part10](https://dev-to-uploads.s3.amazonaws.com/i/oezr194cvyx4gssssm9u.png)
 
So thanks for read this tutorial… I hope it has been very useful to you, and will help you to create great projects
Edaqa's Room: Removing Red Herrings from Carnival
Tags: stream, gamedev, webdev
Published: 2020-10-24 12:54:58

---
title: Edaqa's Room: Removing Red Herrings from Carnival
published: true
description: Improving gameplay by removing puzzle misdirection
tags: stream, gamedev, webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/yhqex6m8llgckdtxzo71.png
---

{% youtube 25HNEfz-828 %}

I go through the results of a recent play-test, removing some distractions and unintended misdirections.

This type of play-testing and corrections is a part of providing a smooth gameplay experience. I don't want people getting stuck on the wrong things. And without the play-testers, there's no way I can identify all those wrong things.


[Edaqa's Room: Dev.to Special](https://edaqa.link/EdaqasRoom-DEVSpecial)

[Twitch Channel](https://twitch.tv/mortoray/)
[YouTube Channel](https://youtube.com/c/EdaqaMortoray/)

-- 

All about the development of technology, graphics, and puzzles for my online escape and puzzle games. I'll show you how all the pieces work, how I design the games, and likely lots of poking fun at the Web.
Send a picture of your Desk 📸👩🏻‍💻
Tags: discuss, watercooler
Published: 2020-10-24 12:51:18

---
title: Send a picture of your Desk 📸👩🏻‍💻
published: true
description: It's time to go again and show off your desk.
tags: discuss, watercooler
---

So I have changed my desk a bit taking inspiration from all of you in the [last post](https://dev.to/sarthology/what-s-your-covid19-work-from-home-desk-is-like-1e6h).

### Before
![](https://res.cloudinary.com/practicaldev/image/fetch/s--egvTOz4l--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://pbs.twimg.com/media/ETr7TyrUwAAOyGI.jpg)
### After
![IMG_6464](https://dev-to-uploads.s3.amazonaws.com/i/qy40zd53g80wrf7b0gf9.jpg)
 
So over to you fellas. Rock the comment section. Show off your current desk setup.

![](https://media.giphy.com/media/l0Iy6hheGg52GcJt6/giphy.gif)
Strings and Exceptions
Tags: datascience, machinelearning, python
Published: 2020-10-24 12:50:15

## Strings

This is a continuation of my coverage of [Data Science from Scratch, by Joel Grus](https://joelgrus.com/2019/05/13/data-science-from-scratch-second-edition/) (ch2) where the Python crash course brings us to strings and exceptions. 

These topics are more nice-to-know rather than central for data science, so we'll cover them briefly (of course I'll revisit this section if I find that they are more important than I had thought). 

For strings, the main concept highlighted is **string interpolation** where a variable is inserted in a string in some fashion. There are several ways to do this, but the **f-string** approach is most up-to-date and recommended. 

Here are some examples:

```python
# first we'll create variables that are pointed at strings (my first and last names)

first_name = "Paul"
last_name = "Apivat"

# f-string (recommended)
f_string = f"{first_name} {last_name}"

# string addition, 'Paul Apivat'
string_addition = first_name + " " + last_name

# string format, 'Paul Apivat'
string_format = "{0} {1}".format(first_name, last_name)

# percent format (NOT recommended), 'Paul Apivat'
pct_format = "%s %s" %('Paul','Apivat')

```
## Exceptions

The author covers exceptions to make the point that they’re not all that bad in Python and it’s worth handling exceptions yourself to make code more readable. Here’s my own example that’s slightly different from the book:

```python
integer_list = [1,2,3]

heterogeneous_list = ["string", 0.1, True]

# you can sum a list of integers, here 1 + 2 + 3 = 6
sum(integer_list)

# but you cannot sum a list of heterogeneous data types
# doing so raises a TypeError
sum(heterogeneous_list)

# the error crashes your program and is not fun to look at
---------------------------------------------------------------------------
TypeError                                 Traceback (most recent call last)
<ipython-input-12-3287dd0c6c22> in <module>
----> 1 sum(heterogeneous_list)

TypeError: unsupported operand type(s) for +: 'int' and 'str'

# so the idea is to handle the exceptions with your own messages
try:
    sum(heterogeneous_list)
except TypeError:
    print("cannot add objects of different data types")

```

At this point, the primary benefit to handling exceptions may be for code readability, so we'll come back to this section if we see more useful examples.
How to Download and Install MySQL WorkBench
Published: 2020-10-24 12:46:40

How to download and install MySQL WORKBENCH

I.	Open your favorite browser or search Engine and type MySql Workbench and click on the first link which directs to https://dev.mysql.com/ . Download the setup file from https://dev.mysql.com/.

![my1](https://dev-to-uploads.s3.amazonaws.com/i/ag2c7jxmsk8s8pvye1ps.PNG)
 
 
II.	Choose the version and Click on download button which corresponds to the Operating systems you  are currently using to download the executable file

![my2](https://dev-to-uploads.s3.amazonaws.com/i/eujuiqug7x3zpph2o0xi.PNG)
 
 
You may go straight to  “just start download”  and skip login or signup

![my3](https://dev-to-uploads.s3.amazonaws.com/i/2pssr1f4nw7lqlieiegp.PNG)
 
 
               INSTALLATION STEPS

III.	Double click the executable file you have downloaded and wait for the installation to start

![my4](https://dev-to-uploads.s3.amazonaws.com/i/5w2mcch73xtp5xi4bmju.PNG)
 

IV.	On the MySQL Workbench Setup wizard page click on Next and continue

![my5](https://dev-to-uploads.s3.amazonaws.com/i/uj4olw9tcoyi30z2nfe2.PNG)

                  
V.	Choose the destination for the installation of the folder and click Next

![my6](https://dev-to-uploads.s3.amazonaws.com/i/g8u394yt8klhkppkxjew.PNG)
 
                     
VI.	Choose setup type (complete is recommended) click NEXT on then Setup type page
                  
![my7](https://dev-to-uploads.s3.amazonaws.com/i/34zy3m9i9zczq75q2t1w.PNG)
           

VII.	Click on install
 


![my8](https://dev-to-uploads.s3.amazonaws.com/i/fcip48ftx1hpfqtigt2s.PNG)
 

VIII.	Wait for the installation to complete when the progress bar reaches 100%

![my9](https://dev-to-uploads.s3.amazonaws.com/i/nukv0p63p8063geth6yf.PNG)
 
 

IX.	Click on finish to launch MySQl Workbench 

![my10](https://dev-to-uploads.s3.amazonaws.com/i/e7986qgf27z21c8tskxl.PNG)
 
  		                          

You are done congratulations!!!!

![my11](https://dev-to-uploads.s3.amazonaws.com/i/uzsdf12xcjfiymjp4hze.PNG)
 
Fair well on your path to database design and modelling!!
Why use Next.js ?
Tags: react, javascript, showdev, nextjs
Published: 2020-10-24 12:43:47


Nextjs Make it possible to achive **Static Generation** and **Server-side Rendering**. The difference is in **when** it generates the HTML for a page.

- **Static Generation** is the pre-rendering method that generates the HTML at **build time**. The pre-rendered HTML is then _reused_ on each request.

- **Server-side Rendering** is the pre-rendering method that generates the HTML on **each request**.

Importantly, Next.js lets you **choose** which pre-rendering form to use for each page. You can create a "hybrid" Next.js app by using Static Generation for most pages and using Server-side Rendering for others.

Most clearly you can check out the docs to know more.

[this is what i made with it :)](https://my-blog-react-next-js.vercel.app/)
When was the last time you ran your code successfully on the first try?
Tags: discuss
Published: 2020-10-24 12:31:33

Recently, while working on a freelance project, I wrote some Python code for about an hour with full concentration and staying away from the terminal.

Then I ran the code.

And Boom! It executed successfully on the very first run. 

When was the last time you ran your code successfully on the first try?