teleren/devto huggingface dataset:
How to Download and Install Xammp
Published: 2020-10-24 12:30:35

How to Download and Install XAMMP

I.	Open your favorite browser or search Engine and type XAMMPP and click on the first link which directs to www.appachefriends.org


![x1](https://dev-to-uploads.s3.amazonaws.com/i/hy1nypr97gw1uzqe1h83.PNG)
 
 
II.	On the website with url link https://www.apachefriends.org/download.html click the version which corresponds to the Operating systems you  are currently using to download the executable file
![x2](https://dev-to-uploads.s3.amazonaws.com/i/qhlnahkkl0b5nj2dsafi.PNG)
 
 


INSTALLATION STEPS
Double click the executable file you have downloaded and wait for the installation to start
III.	On the setup -XAMMP page click on Next and continue
![x3](https://dev-to-uploads.s3.amazonaws.com/i/51o7hqjkw4dj15981dr8.PNG)
 
 

IV.	On the select components you leave the checked boxes as they are on default and click next

![x4](https://dev-to-uploads.s3.amazonaws.com/i/oe6iw2jssonaddeasyeb.PNG)
 
 
V.	Choose the language and click NEXT
 
![x5](https://dev-to-uploads.s3.amazonaws.com/i/74cvhnsxmg7hgjuc0cze.PNG)
 

VI.	Choose the folder to install XAMMP and click NEXT
 
![x6](https://dev-to-uploads.s3.amazonaws.com/i/b5o3dn59g9o4uip2oh44.PNG)
 


VII.	click NEXT in the Bitnami for XXAMMP page 
 
![x7](https://dev-to-uploads.s3.amazonaws.com/i/fvfovwrtevair8l0bclx.PNG)
 

VIII.	click next on the ready to install page and wait for the installation to complete when the progress bar reaches 100%
 
![x8](https://dev-to-uploads.s3.amazonaws.com/i/7glocm2wxz39qyqz3c2w.PNG)
 

IX.	click on finish and launch the XAMMP control panel
 
![x9](https://dev-to-uploads.s3.amazonaws.com/i/lrkl2c729nuilwgkbf1a.PNG)
 

X.	Click on the checkbox beside each service (Apache, Mysql, Tomcat etc) in the modules legend to install them click “yes” in the alert message box to accept installation 
 
![x10](https://dev-to-uploads.s3.amazonaws.com/i/nkobv8wpvnt8ydchyflm.PNG)
 

XI.	Run each service by clicking start on the actions column to start a service on a port

![x11](https://dev-to-uploads.s3.amazonaws.com/i/1eq648sw0nx6xsgr7dbk.PNG)
 
 
XII.	Type “Localhost” and hit enter on your browser to make sure it is working!
 
![x12](https://dev-to-uploads.s3.amazonaws.com/i/oidkd2d767wo00uyy8rl.PNG)
 
This page indicates that your installation was successful thanks for reading!

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

Now you are Good to Go...Happy Coding!!
React setState Asynchronous Behaviour
Tags: react, reactnative, javascript, redux
Published: 2020-10-24 12:16:30

Most of the time, developers write code and it doesn't work as expected because their mental model works WRT to code they see or write but they actually don't know how Javascript V8 compiles or runs their code under the hood so they ended up in frustration or starting to blame the language in some odd way, anyways let's get started with setState how it really works!

here, I am assuming u know the basic understanding of how we can update the component State in React, or the same thing goes for the React Native.

1.Use setState with the object Approach

what happens if we try to use setState multiple times in a single function call and all of setState updating the same value?

Here the concept of Reconciliation comes into play so at run time React knows the state was being tried to update with for the same key from the state object so you will be surprised by seeing the updated value resulted from the only last setState function call and above ones have no any effect on the final result.

Example: https://codesandbox.io/s/infallible-aryabhata-752b5?file=/src/App.js

2.Use setState with the functional Approach

Vice versa from the case study point 1. when we pass(use) the function in the setState for the state updating the javascript engine or specifically in React will show the result of every setState call rather than only last call as seen in the above scenario.

Example: https://codesandbox.io/s/frosty-sound-vrp6n?file=/src/App.js
nodejs vs golang server web
Tags: go, node
Published: 2020-10-24 12:16:16

After the comparison [between NodeJS and GO about how to use MongoDB](http://www.web-dev.info/docker/2018/10/25/golang-with-mongodb.html), now will see how programming a very simple and basic web server with this two technologies.

### Golang:
file main.go
```
package main

import "net/http"

func homePage(w http.ResponseWriter, r *http.Request) {
	w.Write([]byte("Welcome to my Home Page"))
}
func main() {
	http.HandleFunc("/", homePage)
	if err := http.ListenAndServe(":8080", nil); err != nil {
		panic(err)
	}
}
```

Run server:
```
go run main.go

```
Should be run on:
http://127.0.0.1:8080

### NodeJS
file app.js
```
const http = require('http');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
    res.statusCode = 200;
    res.setHeader('Content-Type', 'text/plain');
    res.end('Welcome to my Home Page');
});

server.listen(port, hostname, () =>  {
    console.log(`Server running at http://${hostname}:${port}/`);
});
```

run server:
```
node app.js
```

Should be run on:
http://127.0.0.1:3000

So as you see, with both you can get a running web server with few lines of code.

Have a Nice Day!

### Respository:
* NodeJS [https://github.com/pierangelo1982/nodejs-experiment/blob/master/01%20-%20first%20app/app.js](https://github.com/pierangelo1982/nodejs-experiment/blob/master/01%20-%20first%20app/app.js)
* Golang [https://github.com/pierangelo1982/go-experiment/tree/master/server-web/02](https://github.com/pierangelo1982/go-experiment/tree/master/server-web/02)

### Video Tutorial:
<iframe width="560" height="315" src="https://www.youtube.com/embed/oZUTGOSTQVE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Hacktoberfest 2020 Completion
Tags: hacktoberfest, webdev, opensource
Published: 2020-10-24 12:10:04

It was in 2019 when i first came to know about this event. I was excited but didn't know where to start or how to go about it. So just for the sake of completion i made some basics PRs in HTML or C++ and contributed in some ReadMe.md files (fixing typo errors). 

But come 2020 and i was prepared. I was confident to contribute and was quite glad regarding the strict rules and regulations to prevent spam PRs. I started working on issues last week and as of today i have submitted 6 pull requests. Though there is nothing as such to be delighted about but I felt like i have given something back to the community. To the very same community who's always there to answer doubts and work and collaborate with others. To be very honest more than the PRs, I enjoy the camaraderie, the mutual respect for other devs who make valuable contributions.

So, talking about this year i made 6 following PRs
-> provided a template of login and registration page for a 
   existing project.
-> Solved 2 coding puzzles as a contribution to a repo for 
   competitive programmers.
-> Made a developer's portfolio completely mobile responsive.
-> Fixed a styling issue using Bootstrap framework in a project.
-> Lastly contributed a few books and resources to a repo made for 
   rookie web developers out there. 

My PRs are in the review period as of now and i urge all the budding devs out there to go and explore and contribute to open source.
Daily Developer Jokes - Saturday, Oct 24, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-10-24 12:00:28

---
title: "Daily Developer Jokes - Saturday, Oct 24, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Saturday%2C%20Oct%2024%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258e86d537.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ How does a developer make a cheer?

___A:___ ["hip","hip"] // (hip hip array!)
 -->
How to add a loading spinner to an Angular Material button (Step-by-step Guide)
Tags: angular, typescript, ux
Published: 2020-10-24 11:36:32

## The 2 minute complete guide to adding a loading spinner to the [Angular Material Button](https://material.angular.io/components/button/overview)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9u2yzhto53jhvhl8az8z.gif)

Err…

…wouldn't it be nice if Angular Material had a button with a loading spinner? Like the [loading buttons](https://semantic-ui.com/elements/button.html#loading) that Semantic UI has.

Instead of ranting I decided to try to build my own solution  -  and succeeded!

With no further ado, I've included the code below.

### Our spinner (CSS).

```css
@keyframes spinner {
  to {transform: rotate(360deg);}
}
 
.spinner:before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  border-top-color: #000000;
  animation: spinner .8s linear infinite;
}
```

### Our button (HTML).

```html
<div style="text-align:center">
  <button mat-raised-button color="primary" [class.spinner]="loading" [disabled]="loading" (click)="save()">Save</button>
</div>
```

### Our `.ts` file (the logic)

```typescript
export class AppComponent{
  title = 'hello-world';
  loading = false;

  save(): void {
    this.loading = true;
  }
}
```

Done!

I told you this was simple. You're welcome. Hope you enjoyed it!

Questions or comments? Don't hesitate to contact me.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8zocmas7o4zihga7feht.png)
I Did it!
Tags: hacktoberfest, opensource, git
Published: 2020-10-24 11:31:03

Hello!
I am Dhaval Maniyar, I am so excited to share that I have successfully completed hacktoberfest this time. I learnd lot from the projects that I have contributed to.

###contributions
This are the contribution that I did in this hacktoberfest.
https://github.com/sujata13/HacktoberFest-2020
https://github.com/aditya109/git-osp-for-beginners
https://github.com/Python-Abia/Get-a-Doc
https://github.com/abhaymaniyar/abhaymaniyar.github.io
Import local images in React
Tags: react, beginners, javascript, webpack
Published: 2020-10-24 10:03:15

Usually, when I use images for any web applications, I use google images where I am able to copy the image address. But, I recently ran into a problem trying to upload an image from my laptop. So after spending hours trying to import my local image to in the react component, I cam across many ways to make it work. But some of them didn't work on the deployed version. 
But with this particular method that I'm about to write about, my images were still visible after deploying my website.

![] (https://imgur.com/Nbq4IWJ.png)

So let's get started!

First you need to install file-loader: `npm install --save-dev file-loader` and then, in your `webpack.config.js` inside `rules` add this:
```javascript
rules: [
      { test: /\.(png|jpe?g|gif)$/i, loader: 'file-loader' },
    ],
```
Then, make sure you have your desired image saved in an `image` folder. 

```
public
  |____index.html
src
  |____components
  |        |____component1.js
  |  
  |____images
           |____meme.jpeg
```
Now, in your component, you can import your image:
```javascript
import React, { Component } from 'react'
import meme from '../Images/meme.jpeg'

class LocalImageInReact extends Component {
    render() {
        return (
            <div>
                <h1>Using a local image in React!</h1>
                <img src={meme} alt="issa meme"/>                
            </div>
        )
    }
}
```
And that is it! You have successfully imported a local image in your react component which will work in the deployed version too!

Thank you :)
3 reasons to love Latex
Published: 2020-10-24 10:00:48

Latex is a software for writing and formatting documents. Its not only A software it is The software for this purpose.;)

###1.Freedom

Latex gives you all the power! You can tweak and define Everything, you know exactly why something is shown a certain way and you can create the most amazing layouts. If you like Markdown you will love Latex.

###2.Overleaf

When you use the Website Overleaf.com, you can very easily get started writing online and if you need it, choose one of the 948573849 templates(actually I didnt count). If you don't want to use Overleaf, you can also check out my video "How to write a report with Latex", linked at the end.

###3.Code Listing package

To include code into your document, you can use the Code listing package, in which you can define all the details about which language it is, which colors you want, which keywords you don't want, if you want line numbering, and a lot more. Read more about it here: https://www.overleaf.com/learn/latex/code_listing

Latex is used a lot in science, because it has so many possibilities to fit in all diagrams, formulas and whatever else you need in your document. You can also use it for e.g. your CV, formatting articles, books... check it out. :)

Find my video about how to write a report with Latex here: https://youtu.be/GwHErmflkTk

What are your thoughts on Latex? Have a nice day. :)
Introduction to OpenEBS
Tags: kubernetes, storage, csi, devops
Published: 2020-10-24 09:56:20

OpenEBS builds on Kubernetes to enable Stateful applications to easily access Dynamic Local PVs or Replicated PVs. By using the Container Attached Storage pattern users report lower costs, easier management, and more control for their teams.

OpenEBS is a 100% Open Source CNCF project made with heart by MayaData & the community. Prominent users include Arista, Optoro, Orange, Comcast and the CNCF itself.


🕰 Timeline

00:00 - Holding Screen
02:10 - Introductions
03:35 - Slides - Introduction to OpenEBS
16:15 - What is DPDK (Data Plane Development Kit) and SPDK (Storage Performance Development Kit)
22:30 - My summary of what we've covered
31:00 - Why Huge Pages / Enabling Huge Pages on Linux
38:40 - Deploying OpenEBS with Mayastor
44:00 - Fixing my unhealthy cluster
47:30 - Adding the nvme kernel modules
52:30 - Configuring Mayastor
59:30 - Requesting a PersistentVolumeClaim
1:11:30 - Deploying fio to run some benchmarks
1:18:00 - Closing thoughts


🌎 Resources

Kiran Mova - https://twitter.com/kiranmova
Paul Burt - https://twitter.com/idvoretskyi
Jeffry Molanus - https://twitter.com/JeffryMolanus
OpenEBS - https://openebs.io/

{% youtube EpDxWwiQp3Q %}
Introduction to GitOps with GitOps Toolkit / Flux v2
Tags: kubernetes, gitops, devops
Published: 2020-10-24 09:53:00

GitOps is a way to do Kubernetes cluster management and application delivery.  It works by using Git as a single source of truth for declarative infrastructure and applications. With GitOps, the use of software agents can alert on any divergence between Git with what's running in a cluster, and if there's a difference, Kubernetes reconcilers automatically update or rollback the cluster depending on the case. With Git at the center of your delivery pipelines, developers use familiar tools to make pull requests to accelerate and simplify both application deployments and operations tasks to Kubernetes.

The GitOps Toolkit is a set of composable APIs and specialised tools that can be used to build a Continuous Delivery platform on top of Kubernetes.

These tools are build with Kubernetes controller-runtime libraries, and they can be dynamically configured with Kubernetes custom resources either by cluster admins or by other automated tools. The GitOps Toolkit components interact with each other via Kubernetes events and are responsible for the reconciliation of their designated API objects.


🕰 Timeline


00:00 - Holding Screen
01:25 - Introductions
02:00 - What is GitOps / GitOps Toolkit?
05:00 - Should I use Flux v1 or GitOps Toolkit?
07:45 - Bootstrapping GitOps Toolkit
15:00 - What are the GitOps Toolkit components?
17:40 - GitOps Toolkit CRDs
21:00 - Suspending reconciliation
23:30 - Deploying our first workload
27:10 - Questions
34:30 - Add another GitRepository
43:30 - Dependencies and health-checks
59:20 - Deploying Helm charts
1:09:00 - Final questions



🌎 Resources


Stefan Prodan - https://twitter.com/stefanprodan
GitOps Toolkit Soruce - https://github.com/fluxcd/toolkit
GitOps Toolkit Docs - https://toolkit.fluxcd.io
Walkthrough - https://gist.github.com/stefanprodan/1f5e0b31303a95885221e5c7733fc639

{% youtube HqTzuOBP0eY %}
How to view the JS console on your iPhone
Tags: mobile, iphone, javascript, website
Published: 2020-10-24 09:46:59

<b>On safari on your Mac:</b>
Connect your iPhone with a USB charger. 
Go to developer tools.
Select on the iPhone to open the console of the mobile website.

<b>To view it on Chrome on Mac:</b>
https://medium.com/@nikoloza/how-to-debug-remote-ios-device-using-chrome-devtools-f44d697003a7
Setting up a new headless Raspberry Pi 
Tags: raspberrypi, raspi, making, bot
Published: 2020-10-24 09:28:33

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/790loi3wmmz0g8rbxnjo.jpg)

**Post updated 2021/01/23** Two new computers added to the benchmark.

I've bought my second Raspberry Pi (a 4 model, with 8Gb of RAM). I'm still using the first one at home, and the only problem is that it is a bit slow. Having read about the new model and since I have and old PC at my office (server experiments, testing, and so on...) I was wondering if this small computer could play a role substituting the old PC. Maybe we could also reduce carbon footprint, being switched on most of the time.

I've got a small speed test based on [Performance Comparison - C++ / Java / Python / Ruby/ Jython / JRuby / Groovy
](http://blog.dhananjaynene.com/2008/07/performance-comparison-c-java-python-ruby-jython-jruby-groovy/) and here you have the numbers:

| Computer | Processor | Cores | RAM | BogoMIPS | Own test |
| -------- | --------- | ----- | --- | -------- | --------
| Old Desktop Computer | Intel(R) Core(TM) i5 CPU         650  @ 3.20GHz | 4 cores | 4Gb | 6384.84. | 81.19165420532227  microseconds. |
|Old Raspberry Pi | Raspberry Pi Model B Rev 2| Single processor | 4 Gb  | 697.95. | 6140.841913223267  microseconds |
| New Raspberry Pi | Raspberry Pi 4 Model B  Rev 1.4. ARMv7 Processor rev 3 (v7l) | 4 cores | 8Gb  | 126.00 | 220.48051118850708  microseconds. |
| Mobile Phone (Added: 2021-01-23) | HUAWEI P Smart 2019. HiSilicon Kirin 710 |  8 cores |  3 Gb | Unknown | 202.6593565940857 microseconds |
| Desktop Computer (2020) -  (Added: 2021-01-23) | Intel(R) Core(TM) i5-9500 CPU @ 3.00GHz | 6 cores | 16 Gb | 6000.0 | 35.82597017288208  microseconds |

So, we can expect a performance near to the old PC, and sometimes we will take advantage of the fact that we have 4 cores and more RAM.

My main problem was that I bought the raspi, the power source, the SD card and some cooling kit but I did not pay attention to the fact that if I want to connect the machine to a screen the HDMI it has is a microHDMI one. 

Fortunately, a quick search helped me to find this post: [How to setup a Raspberry Pi without a monitor or a keyboard](https://www.circuitbasics.com/raspberry-pi-basics-setup-without-monitor-keyboard-headless-mode/) that is perfect for me, since I'm not planning to attach any screen to my raspi.

The trick? 

> All you need to do is create an empty file called “SSH” and place it in the root partition of the SD card.

So far, so good. The Pi is running and I've made the first configuration steps:

* update & upgrade
* Install pyenv
* Install my (small) toolbox for typical activities in my systems.
* Install vim

Now we will start to port the services from the old PC (one instance of [Errbot](https://errbot.readthedocs.io/), backup of my email, ....) to the raspi. We'll see.
X doesn't exist
Tags: linux
Published: 2021-01-08 10:42:05

---
title: X doesn't exist
published: true
date: 2020-10-24 09:17:15 UTC
tags: linux
canonical_url: https://www.solarwinter.net/x-doesnt-exist/
---

When Linux keeps reporting that a binary doesn't exist, when it clearly does? That's annoying. One possible reason is below - this is the one that bit me a few days ago.

If you don't know what bits and bytes are, skip straight to the end...

## 32-bit vs 64-bit

For people who know a bit but not the history.

For a long time, all the mainstream computers used 32-bit CPUs. Then things shifted to 64-bit, though it took a while. There was a definite period where things might work or might explode in pieces - and that included the operating system.

In order to be able to sell these to the mass market (see [Itanium](https://en.wikipedia.org/wiki/Itanium) for a counter example) these CPUs were also capable of running the older 32-bit instructions.

However - 64-bit binaries are not 32-bit binaries. So to be able to run the 32-bit binaries, any dependencies must also be available in 32-bit.

(This is why Windows has two lots of "Program Files", amongst other things.)

## Missing dependencies

If the dependencies aren't there then it's handled in different ways by different systems.

_Rather confusingly, if a dependency isn't there for a 32-bit Linux binary, then Linux will return "file not found"._

On Debian/Ubuntu, the basic runtime library will probably help with fixing a lot of things. You can install that by installing the `libc6-i386` package - for example:

`apt install libc6-i386`

Hope that helps someone!
Headless WordPress Dynamic pages with GatsbyJS
Tags: gatsby, wordpress, javascript, graphql
Published: 2020-10-24 09:02:59

In this article, I will show ‘how to create dynamic pages/routes with GatsbyJS’. I will fetch all post data from the WordPress website and create dynamic routes for each post.

At first, we need to create `gatsby-node.js` file in the root of our `wp-gatsby` project directory. Gatsby handles all dynamic routes from this file. Then add this asynchronous function in the file. 

```js
exports.createPages = async ({ graphql, actions }) => {
	const { createPage } = actions
  
	const wpData = await graphql(`
		{
			allWordpressPost {
				nodes {
					wordpress_id
					slug
					title
					content
					author {
						name
					}
				}
			}
		}
  `)

	if (wpData.errors) {
		console.error(wpData.errors)
	}

	const { allWordpressPost } = wpData.data
	allWordpressPost.nodes.forEach( post => {
		createPage({
			path: `/${post.slug}`,
			component: require.resolve(`./src/templates/post.js`),
			context: { post },
		})
	})
  
}
```

Here, I wrote a Graphql query to fetch post data from the WordPress website than on line 26 creating dynamic routes.

Behind the screen, Gatsby will create routes `root-url/post-slug` for each post, expect output from `./src/templates/post.js` this file and Gatsby will also send each post data to this file.

So now let’s go ahead and create `post.js` file on the following path and add these pieces of code to the file…

**Read the original full article on my [blog](https://blog.abmsourav.com/headless-wordpress-dynamic-pages-with-gatsbyjs/)**

**This article is a part of my  [Headless WP](https://blog.abmsourav.com/category/headless-wp/) series**