teleren/devto huggingface dataset:
How to Show Loading Spinner in jQuery | Use the ajaxStart()
Tags: linux, laravel
Published: 2020-10-30 16:09:33

In this jQuery Ajax Loading Spinner, loader in jquery, we would love to share with you how to create ajax Loading Spinner in Html with example.

Showing a loading spinner or displaying a message with some animation like "Loading... Please Wait, etc" is a popular way to indicate to the user that Ajax request is in progress.

**[How to Show Loading Spinner in jQuery | Use the ajaxStart()](https://www.phpcodingstuff.com/blog/how-to-show-loading-spinner-in-jquery.html)**

```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How To Show Loading Spinner In JQuery? - phpcodingstuff.com</title>
<style>
.overlay{
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 999;
    background: rgba(255,255,255,0.8) url("loader-img.gif") center no-repeat;
}
/* Turn off scrollbar when body element has the loading class */
body.loading{
    overflow: hidden;   
}
/* Make spinner image visible when body element has the loading class */
body.loading .overlay{
    display: block;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
// Initiate an Ajax request on button click
$(document).on("click", "button", function(){
    $.get("customers.php", function(data){
        $("body").html(data);
    });       
});
 

$(document).on({
    ajaxStart: function(){
        $("body").addClass("loading"); 
    },
    ajaxStop: function(){ 
        $("body").removeClass("loading"); 
    }    
});
</script>
</head>
<body style="text-align: center;">
    <button type="button">Get Customers Details</button>
    <p>Click the above button to get the customers details from the web server via Ajax.</p>
    <div class="overlay"></div>
</body>
</html>

```
Release 0.2 Part 3: When asking to work on an issue is not enough
Tags: opensource
Published: 2020-10-30 16:08:58

Maintainer was cool, but I disagree heavily with his notion that issues are open to work on. Just me though

Last time, we worked on a script to gather useful information that could easily be used in any front-end app. This time, I worked on an issue for a console application that simulates registration and user logins. It's actually cool in that it doesn't just use python, but it also has implementations in C# and Ruby, 2 languages that have intrigued me in the past. The maintainer maintained that any issue for the repo were open for anyone and that you did not need to ask to be assigned to one. This made it a race against the clock to get the issue done and unfortunately, someone else beat me to it. It's a little disheartening, but what can you do.

I decided to work on the name validation portion of this application in Python. These were the following rules the maintainer had:

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

Interesting set of rules. Working on this also gave me memories of working on my Release 0.1, which also had to follow a specific set of rules regarding urls. I used my knowledge from working on that here. I made a regex that takes care of the allowed characters inside the name 

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

The next few lines were just checks if a name exists, if the first letter was capitalized, and if the last character was a space. If these 3 cases were true, then the name is invalid. The real magic came here:

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

So I had two loops here. The first one splits based on a space in between 2 words, since there had to be 2 or more words in a name, while the second splits based on whether a "-" exists. Afterwards, it just becomes a matter of checking to see if the name matched the regex. 

Because my PR came after another one that fixed the issue, my PR was unfortunately closed without being merged. Regardless, it was something I liked working on, while also taking some inspiration from work that I had done previously. Slowly, but surely, I'm getting used to working and making regex. It's something that I despised beforehand, but now, I can see why it's a powerful tool in both Open Source and beyond.

Next time, one last PR. One last challenge. The PR to end them all. Stay tuned!
Want a complete React.Js course
Published: 2020-10-30 15:48:06

After looking here and there, am here to ask for a help from all the developers reading this.
I am a Web Developer and want to take the journey forward by learning the most demanding React.Js but don't have enough money or any good free resource. Can someone plss help me get a complete React.Js course from scratch to all the things included (Eg Redux , Hooks , GraphQL, Appollo and whatever associated with it)

I hope being in this dev community will definitely help me and help me get what I want.
🚀10 Trending projects on GitHub for web developers - 30th October 2020
Tags: react, webdev, testing, typescript
Published: 2020-10-30 15:46:22

Trending Projects is available as a weekly newsletter please sign up at [www.iainfreestone.com](https://www.iainfreestone.com) to ensure you never miss an issue.

### 1. Vanilla Todo

A case study on viable techniques for vanilla web development.

{% github morris/vanilla-todo %}

---

### 2. fullPage.js

A simple and easy to use library that creates fullscreen scrolling websites (also known as single page websites or onepage sites) and adds landscape sliders inside the sections of the site. 

{% github alvarotrigo/fullPage.js %}

---

### 3. Chakra UI

Chakra UI provides a set of accessible, reusable, and composable React components that make it super easy to create websites and apps.

{% github chakra-ui/chakra-ui %}

---

### 4. Coding Interview University

Multi-month study plan for going from web developer (self-taught, no CS degree) to software engineer for a large company.

{% github jwasham/coding-interview-university %}

---

### 5. Axios

Promise based HTTP client for the browser and node.js

{% github axios/axios %}

---

### 6. Webpack Boilerplate

Sensible webpack 5 boilerplate using Babel, PostCSS and Sass with a hot dev server and an optimized production build.

{% github taniarascia/webpack-boilerplate %}

---

### 7. Pure bash bible

The goal of this book is to document commonly-known and lesser-known methods of doing various tasks using only built-in bash features.

{% github dylanaraps/pure-bash-bible %}

---

### 8. Egg

Born to build better enterprise frameworks and apps with Node.js & Koa 

{% github eggjs/egg %}

---

### 9. Cypress example recipes

Various recipes for testing common scenarios with Cypress

{% github cypress-io/cypress-example-recipes %}

---

### 10. Apache EChart

A powerful, interactive charting and data visualization library for browser

{% github apache/incubator-echarts %}

---

Trending Projects is available as a weekly newsletter please sign up at [www.iainfreestone.com](https://www.iainfreestone.com) to ensure you never miss an issue.

If you enjoyed this article you can [follow me](https://twitter.com/iain_freestone) on Twitter where I regularly post bite size tips relating to HTML, CSS and JavaScript.
Python Project - Packages and Modules
Tags: python
Published: 2020-10-30 15:39:02

## Goal

Get familiar with the fundamental terms of a Python project.


### Project, Packages, Modules, And Scripts

- **Project**: A directory, also known as the top-level package, which contains packages and modules
- **Package (in a project)**: a directory which contains modules and/or packages (sub-directories)
- **Module**: a Python script (`.py`) which can be imported with `import` and `from`
- **Script**: a Python script (`.py`) which can be exected from the terminal. This will be the only reference to the word _script_, since we're not scripting, we're developing a Python package

### Packages Which Are Not Part Of The Project

- **Package (built-in)**: A package that is shipped with Python and can be imported with `import` and `from`. For example, [os](https://docs.python.org/3/library/os.html), [pathlib](https://docs.python.org/3/library/pathlib.html), etc.
- **Package (pip)**: A package that was installed by [pip](https://pypi.org/project/pip/) and can be either imported with `import` and `from`, or get executed from the command-line (terminal). Think about it, pip stands for **P**ackage **I**nstaller for **P**ython. For example [numpy](https://numpy.org/), [pillow](https://pypi.org/project/Pillow/), etc.

### Importing Project Modules

- Python project's packages and modules can be (and should be) imported with **relative paths** from any module which is **part of the same project**. An example is available in [src/appy/core/app.py](https://github.com/unfor19/python-project/blob/master/src/appy/core/app.py#L1)
  ```python
  from ..utils import message, img_ascii
  ```

- If you intend to import a package or a module that is **not part of the same project**, you'll have to use **absolute paths**. This can be done with [importlib](https://docs.python.org/3/library/importlib.html), see this [StackOverflow Question](https://stackoverflow.com/questions/67631/how-to-import-a-module-given-the-full-path).


### Why do relative imports raise a problem in pylint?

**I don't know**, all I can say is that it doesn't happen with [flake8](https://flake8.pycqa.org/en/latest/), I'm referring to the following warning
```bash
Attempted relative import beyond top-level-package pylint(relative-beyond-top-level)
```


---
This blog post is part of the Python Project series, and is based   on this GitHub repository - [unfor19/python-project](https://github.com/unfor19/python-project).

The GitHub repo includes an example of a Python project, and [Wiki Pages](https://github.com/unfor19/python-project/wiki) that describe the necessary steps for developing, creating and distributing a Python package.

---

Originally published at [github.com/unfor19/python-project](https://github.com/unfor19/python-project/wiki/Packages-and-Modules) on October 30, 2020
We are participating in the development of the international Kotlin Multiplatform community
Published: 2020-10-30 15:31:28


Our specialists at IceRock have contributed to the documentation for the Kotlin Multiplatform Mobile portal (https://kotlinlang.org/lp/mobile/). This has been prepared by the JetBrains team, the creators of the Kotlin programming language. The portal helps programmers who study this language independently and use the multi-platform technology.  

Android developers are familiar with Kotlin and understand its benefits – it's capacious, secure, and user-friendly. And iOS app developers can easily learn the syntax because it is similar to Swift.

Kotlin Multiplatform Mobile (multi-platform) is a set of tools for developing cross-platform apps. It enables business logic to be written just once for two operating systems, Android and iOS. The multi-platform helps reduce the time spent on writing, testing and debugging apps.

We have been using this technology at IceRock for more than 2 years and have released 14 projects based on it. We will talk about this soon in our business cases.

Thanks to their experience in Kotlin development, our specialists have participated in writing documentation for the portal. It contains the following information:

●      multi-platform projects and how to get started with them;
●      the mobile Kotlin multi-platform allowing such projects to be created;
●      what libraries to use and where to find them;
●      the business cases that allow the experience of other development teams to be studied. 

It also provides technical documentation and guides for common problem-solving. 

Several portal sections have been written by our specialists: Vladislav Areshkin @tetraquark_v and Andrey Chernov. 

Links are provided below. The content is in English.

Organizing the code writing process using the Kotlin mobile multi-platform: https://kotlinlang.org/docs/mobile/organize-process-around-kmm.html

Using the SQLDelight database for the multi-platform: 
https://kotlinlang.org/docs/mobile/configure-sqldelight-for-data-storage.html

Ktor framework for building an asynchronous client/server architecture that provides high program performance: 
https://kotlinlang.org/docs/mobile/use-ktor-for-networking.html

The Kotlin Multiplatform language libraries: https://libs.kmp.icerock.dev
completed hacktober fest 2020!
Tags: hacktoberfest
Published: 2020-10-30 10:30:45

HEY,I am Divya!

I am a java programmer and a newbie in securities.My Github profile: https://github.com/divya16-bit
Some of my fellow-mates encouraged to participate in the Hacktoberfest and while participating in the Hacktoberfest I came know about DEV community and chose to join it because of my curiosity to learn and explore! 

Background
I am new to open source and is looking forward and is keen is learn and contribute.I code in java/c++.

Progress
I completed 4 pull requests in Hacktoberfest 2020.The journey was similar to roller-coaster ride but in the end you still love it,enjoy it!I recently passed my review period and completed the journey.

Contributions

Here are the repos where I made my contributions:
https://github.com/phoenix-aditya/madlab/pull/33
https://github.com/phoenix-aditya/madlab/pull/34
https://github.com/phoenix-aditya/madlab/pull/35
https://github.com/phoenix-aditya/madlab/pull/36
I contributed in these basic repos as a get-back-to-basics. 


Reflections
I had heard alot about github from my friends and family but i made only a few repos of my own but participating in the hacktoberfest gives you another kind of push towards expanding your horizons and to create something new ,contribute and grow together.Also, it is an amazing initiative by DigitalOcean that encourages new people to contribute and grow.I am super excited to showcase my tee!
Can we all try to bring back upterm?
Tags: webdev, terminal, upterm, opensource
Published: 2020-10-30 15:29:53

I believe I'm not the only one who is using the terminal as a web developer. 

With that said, I'm always trying to find new terminal applications that are going to give me that little boost as a developer. 

Looking up, while ago I discovered this. The Upterm project. 

I was impressed. I was impressed because of the simplicity but also, the new tone was giving while I was executing commands. 


Writing this post to see how we can re-start this project and get it back to life. 


I do hope that you guys have the same concerns as me and that we can together try to bring back the upterm in a stable and working process. 

Here is the GitHub Repo that has been archived:
https://github.com/railsware/upterm 




Let me know you're though on this, and we can try to continue together this much-underrated project!

🚧 🏗 🚥
My first Hacktoberfest.
Tags: hacktoberfest
Published: 2020-10-30 15:25:04

## What I Learned From Hacktoberfest

Realized this was something which actually brings many new people into the opensource world. It is great because almost any opensource project is seeking help and contributers.

I began by setting up my projects for Hacktoberfest like adding "Hacktoberfest" labels, etc. which improved the discovery of my projects and its issues. And yes, I got few people to contribute to my projects.

The most of the time I spent was by taking look at other's code. Learnt some not obvious but good design patterns of applications, better ways of doing xyz and much more.
Contributing to Mozilla Developer Network (MDN)
Published: 2020-10-30 15:11:09

---
title: Contributing to Mozilla Developer Network (MDN)
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
---

I'm always looking for ways to both, give back to the #opensource community, and grow my expertise in software engineering.

I recently saw a post by Chris Mills about the need for contributors for Mozilla Developer Network (MDN), and since they have helped me out so much, I figured that this is a project that I would like to give back to.

So, I'm taking a challenge upon myself to make 8 quality contributions to any of the MDN projects in the next 2 months, about one contribution for every week.

I don't know how hard or easy this is going to be but I'm going to try my best.

I kicked it off with a [contribution](https://github.com/mdn/browser-compat-data/pull/7185) to browser-compat-data about MediaSession support in Firefox Desktop.


[Twitter version](https://twitter.com/mendyaberger/status/1322194410197655552?s=20) of this post.
Front end dev, podcast host, code mentor - AMA
Tags: discuss, ama, webdev
Published: 2020-10-30 15:10:45

I'm a front end dev with over 15 years experience. I run [The Front End Podcast](https://thefrontendpodcast.site) and help people learn to code and land development jobs. 

I love the Jamstack, Next JS, React, and everything front end 🚀

For the season 2 finale of the podcast, I'm looking to do another AMA (ask me anything). 

So, you've got questions, I've got answers. 

Go ahead, ask me anything!
My First Hacktoberfest Experience
Tags: hacktoberfest, opensource, python, github
Published: 2020-10-30 15:02:57

Since the beginning of October, the hacktobefest ads were all over social media, at first I did not pay attention to what it actually was but towards the end of the month my anxiety could not hold it any more. It was time to check out what is this hacktoberfest?

After clicking that link on my Instagram page my anxiety was due, I could not wait to to check it out, So I came to understand what it is after some research and I was in for it, Created an account read the terms connected my GitHub and I was good to go.

For the first time I was able to contribute to the open source world 😊😊, I did my best and within One week I had completed my 4 PRs with an extra 1, Since I am a python fun all the codes that I contributed and updated were made with and written with python,
Thanks to @digitalocean for the opportunity and this is not the last but its just the beginning of my contribution.

Check my GitHub and follow [larymak](https://github.com/larymak)
Twitter [larymak1](https://twitter.com/larymak1?sub_confirmation=1)
Live Release v4.1 and Community Hangout - 2020-10-31
Tags: hangout, community, hoa, phalcon4
Published: 2020-12-19 23:20:10

---
title: Live Release v4.1 and Community Hangout - 2020-10-31
published: true
date: 2020-10-30 14:53:53 UTC
tags: hangout,community,hoa,phalcon4
canonical_url: 
---

Time for a new release and community hangout! v4.1 will be released live this Saturday at 10:00 EDT (14:00 UTC)!<!--more-->Join us on Saturday the 31st of October 2020, at 10:00:00 EDT (14:00:00 UTC), to release the latest version of Phalcon and have a chit chat.

We will hold this virtual meeting on a live event in YouTube. The URL for the hangout is:

[https://youtu.be/XrFJL-pLp6Q](https://youtu.be/XrFJL-pLp6Q)

Agenda:

- Introduction, welcome to all attendees
- Thank you to the whole community and contributors
- Status update since last hangout
- Live Release v4.1
- Q/A

Looking forward to hearing from all of you and seeing you during the hangout.

Stay safe and keep coding!

* * *

Chat - Q&A

- [Discord Chat](https://phalcon.io/discord)
- [Forum](https://phalcon.link/forum)

Support

- [OpenCollective - Support Us](https://phalcon.io/fund)
- [Store - Merchandise](https://phalcon.io/store)

Social Media

- [Telegram](https://phalcon.io/telegram)
- [Gab](https://phalcon.io/gab)
- [MeWe](https://phalcon.io/mewe)
- [Parler](https://phalcon.io/parler)
- [Reddit](https://phalcon.io/reddit)
- [Facebook](https://phalcon.io/fb)
- [Twitter](https://phalcon.io/t)

Videos

- [BitChute](https://phalcon.io/bitchute)
- [Brighteon](https://phalcon.io/brighteon)
- [LBRY](https://phalcon.io/lbry)
- [YouTube](https://phalcon.io/youtube)

<3 Phalcon Team
Javascript Reduce Metodu Nasıl Çalışır?
Tags: javascript, turkish
Published: 2020-10-30 14:50:54

Herkese merhaba arkadaşlar. İlk yazımda etrafımda gördüğüm kadarıyla **underrated** olduğunu düşündüğüm reduce metodunu ele alacağım. 

Underrated olduğunu düşünmemin sebebi, genelde herkes bu fonksiyonu array içindeki değerleri toplamak için falan kullanıyor fakat bu metod çok daha fazlasını yapabilecek bir metod.

Öncelikle eğer Array.prototype.reduce diye bir metodumuz olmasaydı bunun gibi çalışan bir metodu nasıl yazardık ile başlayalım:

Reduce fonksiyonu *accumulator* yapısında bir fonksiyondur yani üzerinde kullanılan veriyi biriktirerek tek bir değere indirgemeye çalışır.

2 parametre alır bunlardan biri callback fonksiyonu diğeri ilk değerdir. Eğer ilk değer varsa *accumulator* ona eşit başlar yoksa eğer reduce kullanılan arrayin ilk elemanına eşit başlar.

```js
function fakeReduce() {
  function reduce(callback, initialValue) {
    let accumulator;
    let start = 0;

    if(initialValue) {
      accumulator = initialValue;
   } else {
     accumulator = this[0];
     start = 1;
   }

  }

```

Esas kısıma gelecek olursak eğer, callback fonksiyonu 4 değer alır bunlar: *accumulator*, *o anki değer*, *index*
ve *fonksiyonu kullandığımız array*'dir. Her for iterasyonunda callback fonksiyonumuz tekrar çalışır ve return değerimiz *accumulator*'dır.

```js

  function fakeReduce(callback, initialValue) {
    let accumulator;
    let start = 0;
   //this bu fonksiyonda üzerinde kullandığımız arrayi gösterir
    if(initialValue) {
      accumulator = initialValue;
   } else {
     accumulator = this[0];
     start = 1;
   }

   for (let i = start; i < this.length; i++) {
     accumulator = callback(accumulator, this[i], i, this);
   }
   
   return accumulator;
  }

```
Şu anda fonksiyonumuzun eksiği, error yönetimi. Buna girersem konu dağılabilir o yüzden önemli olan reduce metodunun nasıl çalıştığını anlamak. Bu sebeple bu yazının çok da uzun olmaması adına reduce'u basit bir toplama işleminden ziyade üzerinde kullandığımız arrayle nasıl oynayabileceğimizi gösteren örnekler sunacağım.

Javascript'le ilgili herhangi bir konuda yazı gelmesini istiyorsanız yorumlarda belirtebilirsiniz.

Bir sonraki yazıda görüşmek üzere...
React Ajax Client
Tags: react, apollo
Published: 2020-10-30 14:27:53

# react-ajax-client

> Consume rest endpoints using react components. Inspired by [ApolloClient](https://github.com/apollographql/react-apollo)

[![NPM](https://img.shields.io/npm/v/react-ajax-client.svg)](https://www.npmjs.com/package/react-ajax-client) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save react-ajax-client
```

```bash
yarn add react-ajax-client
```

## Usage

```tsx
import React from "react";

import { Provider, Fetch, Send, Client } from "react-ajax-client";

const client = new Client({
    baseURL: "http://mywebsite.com/api",
    headers: {
        "Content-Type": "application/json"
    }
});

const ListUsers = () => (
    <Fetch path="/users">
        {({ loading, error, data }) => {
            if (loading) {
                return <div>Loading...</div>;
            }

            if (error) {
                return <div>{error.message}</div>;
            }
            return <pre>{JSON.stringify(data, null, 4)}</pre>;
        }}
    </Fetch>
);

const CreateUser = () => (
    <Send
        path="/users"
        onProgress={() => console.log("Processing")}
        onComplete={response =>
            console.log("Completed", JSON.stringify(response))
        }
        onError={response => console.error("Error", JSON.stringify(response))}
    >
        {trigger => (
            <button
                onClick={e => trigger({ firstName: "Billy", lastName: "Jean" })}
            >
                Create a User
            </button>
        )}
    </Send>
);

const MyApp = () => (
    <Provider client={client}>
        <div>
            <h1>My App</h1>
            <CreateUser />
            <ListUsers />
        </div>
    </Provider>
);
```

Check out the [Code](https://github.com/aiosifelis/react-ajax-client)