teleren/devto huggingface dataset:
How AJAX works?
Tags: javascript, html, css, webdev
Published: 2020-11-05 12:19:14

![AJAX requests Javascript ](https://embed-fastly.wistia.com/deliveries/64a1dda46d75f2ae598706c2bf91856ad30dc9e0.webp?image_crop_resized=1280x720)

Hola amigos!

Hope you liked my Jekyll series Tutorials. Today we will move further with AJAX. It is a necessary frontend technique to make a request while dealing with APIs.

We will learn:
__What is AJAX?__
__How it works?__
__Some examples__

Without any further due, lets get started:

__AJAX__- It stands for Asynchronous Javascript and XML. So in order to understand AJAX in a better way, you must be familiar with HTML, CSS, Javascript and XML slightly.

__Why AJAX is used?__
It is a technique using which a client/web browser communicates with a web server and asks for data. So in short, it requests for data from the server, then processes the obtained data, and make changes to the website without reloading the page fully.

__NOTE:__ AJAX is most commonly used while playing with the APIs. APIs are Application Programming Interface. They are a set of methods which specifies the rules of communication between the parties who want to communicate. Like, web browser and web server.

__How it works?__
Lets understand it by looking at an example. Suppose you are on a blog website and you clicked on  "More posts" button as you want to read more posts from the website. The sequence of action follows as:


This button will trigger an __AJAX request/call__.

This request is sent the web server. This request will point to any __data/static file__. 

Then the server requests for this data from the database. 

The database sends back the requested data to the -webserver. 

Finally the server sends this data to the web browser as __HTTP response__.

Now its Javascript which then parses this HTTP data into human readable formats. 

Then it updates the __DOM elements__(page structure) without reloading the page fully.

NOTE: With the help of AJAX, we can control the amount of data  to be downloaded from the server.

__Real Life examples__

AJAX examples can be seen in many day to day applications you use. Like on Instagram, Facebook, Twitter, you can see the content coming automatically when you scroll up. Similarly it gets refreshed by a single gesture you apply on screen which shows that AJAX call has been made there. 

Like on __Quora, clicking on the read more button, upvote, dowvote button__, AJAX request is triggered. Same happens when you search on a Web browser. So it is like everywhere.


Connect with me on
Instagram
https://www.instagram.com/p/CFqrvobFlsL/?igshid=j3lhn2qi3og0

Twitter
https://mobile.twitter.com/_SinghVikas_
Have you ever been forced to learn a tech you do not like?
Tags: watercooler, career, experience
Published: 2020-11-05 12:17:11

---
title: Have you ever been forced to learn a tech you do not like?
published: true
description: 
tags: watercooler, career, experience
cover_image: https://image.freepik.com/free-vector/character-girl-working-with-laptop-bed-she-looks-sad-worried_77984-980.jpg
---
Have you ever came across the unpleasant feeling of being forced to learn something you are not fully a fan of, cause you simply did not have another choice?

The reasons for this might vary, including specific job opportunities in your area, particular work culture in some organizations, or jumping into some continuous legacy projects...

Did you try to present some alternatives and how it all resolved?
i need help
Tags: django, python
Published: 2020-11-05 12:08:55

how to edit message part in django send_mail function in mail system and how to print from user name in message.

This is my code:
def contact(request):
   if request.method == "POST":
	name= request.POST['name']
	email = request.POST.get('from_email')
	message = request.POST['message']
	send_mail(name,message,email,['contactus@gmail.com'])
	return render(request, 'main/contact.html',{'name':name})
Personal projects. Do you work on them? Have you finished one?
Tags: webdev, discuss, codenewbie
Published: 2020-11-05 12:08:28

# Hi. 👋
I'm Denis. I've recently completed a mega workshop called **30 projects in 30 days**.

I want to give a talk in my company about the lessons I've learned from it. But I'd like to know who can be interested in it and what problems related to my topic developers experience.

If you have a spare minute, may I ask you several questions on that? It will help me a lot!

### Please please please answer these questions:
1. Do (or did you) you work on personal projects? Why?
2. Are they small or medium/large?
3. How many years of experience in development do you have?
4. Do you tend to start and abandon these projects? Why?
5. Have you completed at least one personal project? Was it successful?
6. What's your process? Do you start with coding or any investigation?


Thanks a lot in advance!
Participated for the first time in HacktoberFest 2020 . 
Tags: hacktoberfest, digitalocean, opensource
Published: 2020-11-05 11:55:14

I'm delighted to share my first open source acheivement as a 1st year college student.
It's fortunate that I participated and completed the Hacktoberfest 2020 challenge presented by DigitalOcean.
It was a great opportunity for me and could be for you as well.
This short journey was very simple yet an enthusiastic one.
I would love to share my experience to all those beginners there , So here I start :
I'm a zealous person who's always been trying to endeavour what I love which is this field of computer science .
So , I was just surfing this youtube feed one night in the month of late September and found one video related to hacktoberfest 2020 .
With zero open source contribution exercise :
After watching the video , I created my github profile and installed git and watched several youtube videos to learn how it has to be done .
I made 6 pull requests and contributed in them.
I had no clue then If it's gonna be approved or not but still one thing which was in mind that no matter I win or not ,
" atleast I learned about using github and about open source contributions "
so there was nothing to lose .
Fortunately , after 14 days of review period , my contributions got approved by the maintainer and marked as completed.
lesson learnt : no matter whether you win or not , whether you are doing it for the first time , flush off your fears and just grab the chance and DO IT .
#Hacktoberfest #DigitalOcean
Tự học Dart - 001
Tags: dart, flutter
Published: 2020-11-05 11:05:58

Đầu tiên, để code và chạy các chương trình ``Dart`` thì có thể làm luôn trên web tại [Try-Dart](https://dart.dev/#try-dart).

# Một chương trình Dart

```dart
// Định nghĩa hàm.
void printInteger(int aNumber) {
  print('The number is $aNumber.'); // In ra màn hình.
}

// Hàm main là hàm chính, nơi chương trình thực thi.
void main() {
  var number = 42; // Khai báo biến và gán giá trị.
  printInteger(number); // gọi hàm đã định nghĩa.
}
```
## Giải thích

- **//**: Chú thích
- **void**: là kiểu dữ liệu đặc biệt, nghĩa là ko có gì cả. Ở đây hàm *main* và *printInteger* trả về giá trị *void*
- **int**: kiểu dữ liệu số nguyên có sẵn (built-in types) trong Dart và hầu hết các ngôn ngữ lập trình khác
- **$aNumber**: Biểu thức nội suy, khi in ra nó sẽ đưa giá trị của biến *aNumber* vào

# Các khái niệm quan trọng

- Mọi giá trị của biến đều là một *Object Instance*, hay thực thể của *Object class*. Kể cả là số, hàm, chuỗi.. đều là *Object Instance*.

- **Dart** hỗ trợ nhiều kiểu khai báo biến. Thường thi ta khai báo biến và kiểu dữ liệu của biến đó luôn. Nhưng cũng có thể khai báo động bằng từ khóa *dynamic*.
  Ngoài ra cũng có những kiểu như **List<int>** (Một dãy số nguyên) hoặc List<dynamic> (một dãy các giá trị động).

- **Dart** không có những keywords khai báo như *public*, *protected*, và *private*. Nếu tên biến bắt đầu bằng dấu gạch dưới `_`, thì nó là `private` nghĩa là không nhìn thấy từ bên ngoài.

- Kết thúc mỗi câu lệnh phải có dấu `;`
Debug Node.js Typescript app using VS Code (Mac,Linux)
Tags: typescript, linux, node, javascript
Published: 2020-11-05 11:34:51

Using the following configuration I managed to debug flawlessly Node.js applications written in Typescript using the Visual Studio Code IDE. I have tested it on Mac OS and almost every Linux distro like Debian, Ubuntu, Arch. 

### Configure tsconfig.json
First of all, enable source maps `"sourceMap": true` and declarations `"declarationMap": true`, `"declaration": true`. 


_Don't forget to specify the destination folder using the `outDir` parameter._

### Configure VSCODE
Paste the following snippet and change `__MYAPP__` to the typescript file you want to debug and `__MYDIST_FOLDER__` to the dist folder of your project. 

_Don't forget to whitelist (OUTPUT) port 9229 locally on your iptables._

Examples:
`__MYAPP__` = `src/app.ts`
`__MYDIST_FOLDER__` = `dist`
```json
{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Debug Node.js",
            "program": "${workspaceFolder}/__MYAPP__.ts",
            "outFiles": [
                "${workspaceFolder}/__MYDIST_FOLDER__/**/*.js"
            ],
            "sourceMaps": true,
            "port": 9229,
            "runtimeArgs": [
                "--inspect-brk=9229"
            ],
            "console": "integratedTerminal"
        }
    ]
}
```

### Support
If you liked this quick guide follow me on Twitter :) https://twitter.com/devcrafter91
What editor, browser and terminal do you use?
Tags: webdev, watercooler, productivity, beginners
Published: 2020-11-05 11:33:11

---
title: What editor, browser and terminal do you use?
published: true
description: 
tags: webdev, watercooler, productivity, beginners
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/u6rs3qrqo6yengtrcg1n.png
---
Well-configured code editor / IDE, browser, and terminal are the main tools for developers. What combo do you use in your daily workflow?

To start off, I'm using [VS Code](https://code.visualstudio.com/), [Google Chrome](https://www.google.com/chrome/) and [Git Bash](https://git-scm.com/downloads).
Getting Started with Hashnode
Tags: writing, tutorial, beginners, devjournal
Published: 2020-11-05 11:28:03

[Hashnode](https://hashnode.com/@kmhmubin/joinme) is a free blogging platform with an amazing community that allows you to publish articles on your own domain. On October 27, 2020, Hashnode achieves **Product of the day** on [Producthunt](https://www.producthunt.com/posts/hashnode-platform).

Hashnode gaining popularity because of its unique features and easy to use. It has lots of built-in features that every technical blogger needs. Let's find out what makes hashnode different.

## Free

Traditional blog websites require a custom domain and hosting. And it's not cheap. Setting up those and make it fully functional requires a lot of time and technical knowledge. As a beginner, you might not own a custom domain or any of those skills which require setup. To solve this problem, Hashnode offers you a unique subdomain, which allows you to publish your content totally free.

## Custom Domain

Haahnode offers you to add your custom domain to your existing blog. You can set up a custom domain with a CNAME record. 

## Customization

You can personalize and customize your blog as you need. You can make your blog look different by adding custom CSS. Not only custom CSS, but you can also add third-party widgets.

## Community

Hashnode has an amazing community. You can meet new people every day. You can get help from others or sharing your thought with others. Hashnode also offers you an exclusive [Discord Channel](https://discord.gg/9KVywS), where you can directly talk with the founding members of Hashnode.

## Learn from others

On Hashnode, you can follow other developers. You can read their content and follow them so that your favorite writer publishes a post you get notified immodestly. 

## Draft Sharing

I personally like this feature. If you are new to writing, you always feel that is it enough or lack something or fully explain what I wanted to. To answer all of those content, you can share your draft with others. They can read your draft and give you a lot of feedback.

## Other features

Some of the other features are

- Get automated backups of your articles on your private GitHub repo
- Use GitHub as a source for your articles
- Automatic HTTPS
- Fast CDN
- Built-in newsletter service

The good thing is that you can always request new features, which are implemented depending on usefulness. 

## Conclusion

If you want to start publishing your own articles without worries and want an amazing community, Hashnode is for you.

In the next lesson, we’ll learn how to set up Hashnode for you.

---

🚩👉 If it was useful to you, please Like/Share to reach others as well. 

I talk about web development and UI design on **Twitter** [@kmhmubin](https://twitter.com/kmhmubin), come to talk with me there!

The cover image is an improvisation on top of the work from [freepik](https://www.freepik.com/vectors/people).
Sometimes AWS ElastiCache is fall
Tags: aws, elasticache
Published: 2020-11-05 11:15:46

---
title: Sometimes AWS ElastiCache is fall
published: true
description: My work at support.
tags: AWS, ElastiCache
//cover_image: https://direct_url_to_image.jpg
---
It happened on a sunny weekend when I rested after a hard work week. I had lunch with my family and I skipped PagerDuty call. Our ElastiCache is down. Absolutely down - hardware was crashed. ElastiCache node upped after 2 hours. The very nervous situation on a sunny weekend.

Why it is happened? Because we cut some cost on the Redis node and had only one node.

Advice always setup Multi-AZ and failover settings on ElastiCache.


https://docs.aws.amazon.com/AmazonElastiCache/latest/red-ug/FaultTolerance.html

https://docs.aws.amazon.com/AmazonElastiCache/latest/red-ug/AutoFailover.html
Show Image from s3Bucket to html page
Tags: amazons3
Published: 2020-11-05 11:09:34

We are trying to display an image which exist in amazon s3 bucket in angular8. Our code is:-
In HTML:-
 <img id="myimage" [src]='thumbnail' />

In ts:-

 DownloadFromS3(FilePath, FileName) {
    // Set up credentials
    let AWSS3AccessKey = environment.AWSS3AccessKey
    let AWSS3SecretKey = environment.AWSS3SecretKey
    let S3Bucketname = environment.S3Bucketname
    let S3BucketRootFolder = environment.S3BucketRootFolder

    AWS.config.credentials = new AWS.Credentials({
      accessKeyId: AWSS3AccessKey, secretAccessKey: AWSS3SecretKey
    });

    const params = {
      Bucket: S3Bucketname,
      Key: S3BucketRootFolder + FilePath + "/" + FileName
     
    };

    let s3 = new AWS.S3();

    let base64String = "";

   s3.getObject(params, function (err, data) {//unit8array
     if (err) {
       console.error(err); // an error occurred
    }
     else
     {
       //downloading the file inclient machine
       const STRING_CHAR = String.fromCharCode.apply(null, data.Body);
       base64String = btoa(STRING_CHAR);
       return base64String;
      
      }
    });
    
   
  }
//Calling Method
val= this.DownloadFromS3(this.imagePath, UploadedFileInfo[0].FileName);

But in s3.getObject function, "this" operator is not working like this.thumbnail is not defined here.

variable val is containing null even the following statement
 return base64String;
containing the value.
Best jobs for today (for developers and QA-engineers)
Tags: node, php, python
Published: 2020-11-05 11:06:58

1. [Full Stack PHP Developer](https://www.remotely.jobs/remote-full-stack-php-developer-job-at-silktide)(Silktide)

- 5 years+ experience with OO PHP
- Proven ability to architect enterprise-level applications

2. [Software Developers for fast growing start-up](https://www.remotely.jobs/remote-software-developers-for-fast-growing-start-up-job-at-torre-labs) (Torre Labs)

2+ years of experience:
- Web Development
- Software Architecture
- Full Stack Development

3. [Senior Full Stack Engineer](https://www.remotely.jobs/remote-senior-full-stack-engineer-job-at-cogsy) (Cogsy)

- NodeJs
- React
- Relational database (MongoDB)

4. [Rails Developer at Agent Pronto](https://www.remotely.jobs/remote-rails-developer-at-agent-pronto-job-at-agent-pronto) (Agent Pronto)

You’re experienced and proficient with most of the following: Ruby on Rails, Testing tools (RSpec, Capybara), Data stores (MySQL, PostgreSQL, Redis, Memcached), JavaScript frameworks and libraries (Vue, React, Lodash, etc), Webpacker, HTML/CSS, Git, Continuous Integration and deployment systems, Amazon Web Services, Integrating with a variety of APIs

5. [QA Tester](https://www.remotely.jobs/remote-qa-tester-job-at-onthegosystems)(OnTheGoSystems)

- Proven experience in manual testing
- Strong debugging skills (JavaScript, browser console, Node, Android logs)

See more [here](https://www.remotely.jobs/remote/developer-jobs/)

Join Us on Telegram: https://t.me/remotely_jobs
Our bot: https://telegram.me/remotely_bot
Please help fix this Botman issue
Published: 2020-11-05 10:55:03

Hello, this seem to be m'y first time to be hère, i have installed botman in my laravel existind folder, then it created a facebook-botman files within laravel, then after having created facebook page and went in the botman.pho file to insert some other codes then it only know to respond on to hi, please i need your help.

Thanks
Kokpit: Basic, Native Kafka Client using KafkaJS, ElectronJS and Socket.io 
Tags: javascript, kafkajs, socketio, electronjs
Published: 2020-11-05 10:52:00

---
title: Kokpit: Basic, Native Kafka Client using KafkaJS, ElectronJS and Socket.io 
published: true
description: Kokpit is a basic Kafka client to publish and subscribe messages.

tags: javascript, KafkaJS, Socketio, ElectronJS
---
Kokpit is a basic Kafka client with features to automatically connect to a Kafka broker, create a topic on the fly, publish and subscribe messages from it.

![screenshot](https://dev-to-uploads.s3.amazonaws.com/i/0xpj4z3psy39cjw7pqfh.png)

Kokpit is built using KafkaJS, Socket.io and ElectronJS. 
* KafkaJS provides the Kafka client logic
* Socket.io enables real time communication from Kafka topic to the UI 
* ElectronJS helps this to be a native desktop application
 
![kokpit](https://dev-to-uploads.s3.amazonaws.com/i/59ggbhh055yblmz7jhvw.png)

[Download Kokpit source or binary](https://github.com/daneshzaki/kokpit)
#hacktoberfest
Tags: hacktoberfest
Published: 2020-11-05 10:45:11

I am a sophomore doing my undergrad in cse. I came to know about this awesome challenge only on October 15 which means, I was late. But I didn't give up! I submitted 4 PRS by 16th October and all of them got matured by 21st October. I was overjoyed!! 

Thanks a lot Digital Ocean for this wonderful event!! Looking forward to more such experiences in future!!
@DigitalOcean
Fortius Telecom Services
Tags: tollfreenumber, voicecallservice, missedcallservice, ivr
Published: 2020-11-05 10:28:53

The business works mainly on communication with the customers as well as internal communication within the business. Fortius Telecom is here to bridge the gap communication gap with its far-famed cloud communication solutions. Understanding the needs of our clients and providing them with the right service is what defines Fortius Telecom.
Visit: http://fortiustelecom.com
How to Develop On-demand Delivery App?
Tags: discuss, android, ios
Published: 2020-11-05 10:26:58

Social distancing and staying at home have become new norms in this pandemic age. Stringent rules and regulations along with restricted movements have completely changed the way we live. This quarantine period has forced us to stay and perform all activities from home. The corporate sector has suffered a lot because of this turbulent time. But, every cloud has a silver lining. Advancing technology has made it possible to order products or services online and get them at the doorstep. Yes, on-demand delivery apps make it possible for us.

These days, many brick-and-mortar vendors and startups have switched to on-demand apps to reduce the impact of lockdowns. Developing an on-demand delivery app has become a necessity to meet the massive demand for various products across the world. Be it utilities or groceries or food items, on-demand app development has witnessed tremendous growth in recent times.

On-demand food delivery apps like Uber Eats and on-demand grocery delivery apps like Instacart have made new milestones in the number of downloads. Amid the growing popularity of on-demand delivery apps, it is fair to mention that you can boost your business with ease through such an app with customer-friendly features. Let’s understand the models your business can utilize for developing an on-demand delivery app.
CSS Q
Tags: webdev, beginners, css
Published: 2020-11-05 10:19:48

<style>
div{
display: inline;
}
#myDiv {
margin-left: 30px;
height: 40px;
width: 40px;
background-color: red;
}
</style>
</head>
<body>   
<div id="myDiv"></div>
<div id="over">Overlapping div</div>
</body>


I noticed that the #over overrides the #myDiv, any reason for this?
Mezon Router: middleware and parameters modification
Tags: middleware, mezon, router
Published: 2020-11-05 09:48:29

Types of middlewares that you can add which will be called before the route handler will be executed. This middleware can transform common parameters $route and $parameters into something different.
- Multiple global middlewares that will be **called in order of attachment**
- Multiple route specific middlewares that **will be called in order of attachment**

Order of execution of the middlewares
1. Global middlewares ``$router->addRoute('*', ...)``
2. Before calling route callback ``$router->addRoute('/example', ...)`` all those matching the route will be executed

Let's look at a simple example:

```php
$router = new Router();
$router->addRoute('/user/[i:id]', function(string $route, array $parameters){
    $userModel = new UserModel();
    $userObject = $userModel->getUserById($parameters['id']);

    // use $userObject for any purpose you need
});
```

Now let's watch an example with all the possibilities 

```php
$router = new Router();

// First step. We have an API that talks JSON, convert the body
$router->registerMiddleware('*', function (string $route, array $parameters){
    $request = Request::createFromGlobals();
    
    $parameters['_request'] = $request;
    $parameters['_body'] = json_decode($request->getContent(), true);

    return $parameters;    
});

// Second step. Ensure that we are logged in when we are in the private area
$router->registerMiddleware('*', function (string $route, array $parameters){
    // Is not a private area
    if (mb_strpos($route, '/user') !== 0 || empty($parameters['user_id'])) {
        return $parameters;
    }

    $token = $parameters['_request']->headers->get('oauth_token');

    $auth = new SomeAuth();
    $auth->validateTokenOrFail(
        $token,
        $parameters['user_id']
    );

    // We don't need to return nothing
});

// Last step. Now we will modify the parameters so the handler can work with them
$router->registerMiddleware('/user/[i:user_id]', function(string $route, array $parameters){
    $userModel = new UserModel();
    
    return $userModel->getUserById(
        $parameters['user_id']
    );
});

// Final destination. We have ended the middlewares, now we can work with the processed data
$router->addRoute('/user/[i:user_id]', function (UserObject $userObject){
    // Do everything
});
```
# Learn more

More information can be found here:

[Twitter](https://twitter.com/mezonphp)
[Mezon Framework](https://github.com/alexdodonov/mezon)

## It will be great if you will [contribute](https://github.com/alexdodonov/mezon-router) something to this project. Documentation, sharing the project in your social media, bug fixing, refactoring, or even [submitting issue](https://github.com/alexdodonov/mezon-router/issues) with question or feature request. Thanks anyway )