teleren/devto huggingface dataset:
Solution for "error: connect econnrefused [container_ip]:3306"
Tags: docker, solution, node, mysql
Published: 2020-04-23 15:21:01

Hi guys,

There are many more reasons for this error. In some, users had used wrong port for MySQL in node application, in others 3306 port was already in use etc.

But for me, it was "docker-compose.yml" file issue. FYI, I am using 3 different containers for React, Node, and MySQL.

The issue was that, I was using "image" in docker-compose file for database service like this:
![docker-compose_OLD](https://dev-to-uploads.s3.amazonaws.com/i/isx92wo6d0denyo590iu.png)

It was all right, untill I used volumes in dbservice. But after using volumes in dbservice it throws the above error.

The solution was to modify the docker-compose file like this:

![docker-compose_Updated](https://dev-to-uploads.s3.amazonaws.com/i/7992d3ysr8fhusq3udi3.png)

and then adding following to Dockerfile:

//Dockerfile start
FROM mysql
//Dockerfile end

I hope you understood the solution. If have any queries, please feel free to ask it in a comment section.

**Thank You.**
Pwnagotchi - Web UI over Bluetooth
Tags: security, pwnagotchi, wifi, howto
Published: 2020-04-23 15:12:37

I haven't posted in a while, so I decided I will talk about new things I have been trying and learning with Pwnagotchi.

There is a plugin that allows for the web ui to be viewed on your mobile phone web browser once the unit is tethered to the phone over bluetooth. The advantages of this are:

- pwnagotchi can be safely shutdown after use from the shutdown button on the web user interface.
- pwnagotchi ui can be viewed from your phone if your unit is not connected to a computer screen


Pwnagotchi is now using toml format for the config file. I straight away noticed the benefits: no more fiddling with indenting and formatting. 

What caught me out while adding in the bluetooth tether entries was the phone ip entry. This needs to be the static ip address given in the config file, this will be what is used to access the pwnagotchi web UI from your mobile device

```
main.plugins.bt-tether.devices.android-phone.ip = "192.168.44.44"
```

In order to get the pairing to work, I needed to follow [this](https://community.pwnagotchi.ai/t/mini-guide-bluetooth-tether-on-android/248) forum guide which details the steps to `sudo bluetoothctl` to manually pair the phone by it's MAC address to the pwnagotchi unit. 



**New TOML, who dis?**

Here's my updated config.toml with the entries needed for `bluetooth tether`
```
main.name = "nickname"
main.lang = "en"

main.plugins.grid.enabled = true
main.plugins.grid.report = true
main.plugins.grid.exclude = [
  "YourNetwork"
]
main.plugins.bt-tether.enabled = true

main.plugins.bt-tether.devices.android-phone.enabled = true
main.plugins.bt-tether.devices.android-phone.search_order = 1
main.plugins.bt-tether.devices.android-phone.mac = "de:ad:be:ef:ba:be"
main.plugins.bt-tether.devices.android-phone.ip = "192.168.44.44"
main.plugins.bt-tether.devices.android-phone.netmask = 24
main.plugins.bt-tether.devices.android-phone.interval = 1
main.plugins.bt-tether.devices.android-phone.scantime = 10
main.plugins.bt-tether.devices.android-phone.max_tries = 10
main.plugins.bt-tether.devices.android-phone.share_internet = false
main.plugins.bt-tether.devices.android-phone.priority = 1

main.plugins.memtemp.enabled = true
main.plugins.memtemp.scale = "celsius"
main.plugins.memtemp.orientation = "horizontal"

ui.display.enabled = true
ui.display.type = "inky"
ui.display.color = "fastAndFurious"
ui.web.enabled = true
ui.web.address = "0.0.0.0"
ui.web.port = 8080
ui.web.origin = ""


personality.advertise = true
personality.deauth = true
personality.associate = true
```

****

**TADA!**

![Bluetooth tethering success!](https://dev-to-uploads.s3.amazonaws.com/i/sjuboq3i8te4w91fjoc2.jpg)


Special thanks to the kind people on the pwnagotchi slack and the pwnagotchi forum guide for helping me to get my gotchi and android phone paired :)
Will it CORS? - an automatic CORS explainer
Tags: webdev, javascript, tutorial, beginners
Published: 2020-04-23 15:03:50

---
title: Will it CORS? - an automatic CORS explainer
published: true
tags: webdev, javascript, tutorial, beginners
canonical_url: https://httptoolkit.tech/will-it-cors
---

Hey Dev.to - today I'm launching [WillItCORS.com](http://willitcors.com). It's a quick tool to help everybody learn & understand Cross-Origin Resource Sharing (CORS) requests.

CORS is the mechanism browsers use to decide how web applications can communicate with other services over HTTP. Restricting that is very important for security, but it's hard to understand how CORS works, which means sending HTTP requests to APIs can often be difficult & confusing.

Let's talk about why CORS is hard:

* A simple GET request to another origin will always send, but whether you can read the response depends on specific headers that come back.
* POST requests will sometimes send OK, but if you set a content-type, and it's not on the list of safe content types, then there'll be an extra preflight request first, to ask the server if the browser is allowed to send the request before it sends it. Even if that preflight says yes, you _still_ might not be able to read the response.
* To allow actually reading these responses, the server needs to respond with a `Access-Control-Allow-Origin` header that matches your origin. 'Match' here is quick specific: `http://example.com/` doesn't match `http://example.com`, and `*` will match all origins, but only if your request doesn't have a `credentials` property set to `'include'`... 
* Different ports on the same domain and different subdomains are all different origins, so it's quite easy to do unexpected CORS requests even just within your own services!
* Lots of other things can trigger preflight requests too: listening for progress events on your request, for example, or setting any header except for the specific [safe header list](https://developer.mozilla.org/en-US/docs/Glossary/CORS-safelisted_request_header) (and even then, with specific rules on the values).
* ...

The full set of CORS rules are an impossible riddle, understood by effectively nobody.

This is annoying, so to fix it I've built this magic CORS machine: [WillItCORS.com](http://willitcors.com). Tell it what you want, and it'll walk you through _exactly_ what to do, complete with ready-to-use code or specific & detailed explanations of why it won't work. Enjoy!
🚀 Typetron alpha is officially out: typetron.org
Tags: typescript, node, backend, framework
Published: 2020-04-23 14:56:46

I've been working on a Node.js framework for building REST APIs lately called [Typetron](https://typetron.org) and I wanted to announce it's alpha release together with its [first tutorial](https://typetron.org/tutorials/blog) where I show you how to build a simple backend for a personal blog. 🔥🔥🔥

I know, I know, another Javascript framework. Even tho' Typetron can't promise you now that is a great framework, I hope it will blow you away with the version 1.0 release (which I hope I can get out at the end of summer).

After this announcement, I will start working on its second tutorial that will mark the Beta release, where I will show you how you can make a DEV.to clone. I hope I can get the frontend tutorials ready also. Typetron will have support utilities to play seamlessly with your frontend app.

It would be great to see your feedback and what features you would like to see in a framework like this. Take the [first tutorial](https://typetron.org/tutorials) and see what's missing 😄.

Check the [website typetron.org](https://typetron.org)
Twitter at [@Typetron_](https://twitter.com/Typetron_)
My Twitter [@ionellupu_](https://twitter.com/ionelLupu_)
Come and leave a question on [Reddit](https://www.reddit.com/r/typetron)
Join [the Facebook](https://www.facebook.com/Typetron-662589810876633/) group
Let's talk on [Slack](https://typetron.slack.com)
Linkedin - [Typetron](https://www.linkedin.com/company/typetron)
The Hidden Linux Manual
Tags: linux, beginners, webdev
Published: 2020-04-23 14:51:24

---
title: The Hidden Linux Manual
published: true
description: If you needed to reference a program's features, you could use the `man` command. Let's see these in action.
tags: linux, beginners, web-dev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/3xerb5cgpqiesl4eib84.jpg
---

## How to Seek Out `--help` and Man(ual) Pages

When using a new tool with lots of features, it's easy to forget which options do what, where to put arguments, etc. As far as the Linux command line is concerned, many of these tools have a `--help` option. If you needed to reference a program's features, you could use the `man` command. Let's see these in action.

I downloaded a [1985 documentary about Unix](https://archive.org/details/UNIX1985). I want to use the program `ffmpeg` to do some rudimentary editing. But I've forgotten where the options and arguments go! I run `ffmpeg --help` in a terminal. There's a lot of output, so I scrolled up.


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1yx05ihqsya88msly8gw.png)
The line I highlighted is called the Usage Synopsis. Anything in between square brackets is optional. "A-ha," I say, "Source options first, then output options, then the output filename goes at the end."

I only want the countdown at the beginning of the video. I'm not exactly sure which option I use to do that, so I run `man ffmpeg` to open the ffmpeg man (short for "manual") page.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7fmq1r5dzjyme0dhsrrs.png)
And I skim through this for a while (using the arrow keys, PgUp, and PgDn) until I find what I am looking for:


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4kthl0y4r2kj1i60gdsd.png)
Great, I will use the `-t` option with seven seconds to grab the first seven seconds of the video. I press 'q' to exit the pager, and away we go:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/31xzgq8i8cg5qdeo0eck.png)
Now we can all see the utility of `man` pages and `--help`. The documentation is right at your fingertips! Skim the man pages of all the tools you use that have them---Even the simple ones like `ls` and `mkdir`.
Why you should use react-multi-carousel in your project? 
Tags: react, javascript, css, serverless
Published: 2020-04-23 14:20:20

Hi folks,

Finding a good Carousel that is small in size, and have supports in SSR(server-side rendering) with infinite mode is hard, building one yourself from scratch is even harder especially if you are in tight deadline. These are the exact reasons why I built [react-multi-carousel](https://github.com/YIZHUANG/react-multi-carousel) at the very first place. I was working as a Software consultant for a while, a few of the projects that I worked on in big companies that went live to production use the exact same Carousel component, as you know you gotta fulfill your clients' weird demands to make the carousel working in the exact same way they wanted in their dreams and that's not easy with the current Carousel components available in NPM.

Here are a list of the key features:

1. Server-side rendering
2. Infinite mode
3. Dot mode
4. Custom animation
5. AutoPlay mode
6. Auto play interval
7. Supports images, videos, everything.
8. Responsive
9. Swipe to slide
10. Mouse drag to slide
11. Keyboard control to slide
12. Multiple items
13. Show / hide arrows
14. Custom arrows / control buttons
15. Custom dots
16. Custom styling
17. Accessibility support
18. Center mode.
19. Show next/previous set of items partially

The infinite mode and allow sliding multiple items at once are the hardest parts of building this library, honestly it took me on and off a few months just to get these two working properly. The will be soon a blog post on how I made it. #caretoshare

I am currently working on the version 3.0 to rewrite this completely in hooks and context, that means the following APIs will be available soon:

ProductCard.jsx
```
const { isVisble, isActive } = props
const [next, previous, goToSlide, disable Animation, resetCarousel] = useCarousel().
```

The new APIs will allow further and yeah easier customization for supporting your business use cases. 

Folks, please give it a try and it would mean a lot if you can consider giving financial support for my work in [open collective](https://opencollective.com/REACT-MULTI-CAROUSEL)
iOS: How to properly display prices and format currencies
Tags: ios, swift
Published: 2020-04-23 14:15:53

Let's say you want to display to user that something cost 50 dollars. You might want to do something like this:

```swift
let price = 50
print("\(price) $")
```

Please, never ever do stuff like this 🛑

This is very naive solution that will easily confuse users and does not scale well. Because in some countries dollar sign or other currency signs are put in front of the price. Sometimes there might not be a space. With bigger sums or fractions some locales may use `.` while others use `,` or even combination of the two.

The solution is also not to remember all these rules or give up. The solution is called `NumberFormatter` class.

All you have to do is to use it and be mindful of small number of configuration options. Everything else is taken care of by the system.

## Basic usage

The very basic usage looks like this:

```swift
let formatter = NumberFormatter()
formatter.numberStyle = .currency
```

You create instance of the formatter and set its style to `.currency`.
And then use `string` method to get formatted string as a currency. The drawback here is that you have to use `NSNumber` which can be created from `Int` or `Double` and the return type is optional string.

In practice I don't think the string will ever by `nil` when this method is called with valid `NSNumber` instance but to be sure I am often using it like this:

```swift
print(formatter.string(from: NSNumber(value: 548.5)) ?? "n/a")
```

Better way would be to create centralized util class to handle formatting and internally check that result of the `string(from: NSNumber)` is not `nil` and if for some reason is `nil` crash you app with `assert` during debug to get a chance to investigate the issue further.

## Customizing currency

The above formatter will use user's current Locale to select currency symbol and style for the price. This may be what you want but if your app is designed to work in multiple countries and is getting data from a server, then you should set the currency manually for formatter to be sure that if your server sends price of 20 Eur for example the user will see `20 €` and not something like `20 zł` because they are from Poland..

You can set currency like this:

```swift
formatter.currencyCode = "EUR"
formatter.currencyCode = "USD"
// and so on..
```

`NumberFormatter` also allows you to specify `locale` which can be useful during testing to preview how the numbers are going to look like for people on other countries. In practice you shouldn't set this unless you have very important reason for doing so.

```swift
formatter.locale = Locale(identifier: "de-DE") // lets check how will prices look for people from Germany
```

### Configuring fractions

If you don't want to show prices with fractional part. Meaning you want to show `10` and not `10,12`. You can set the property `maximumFractionDigits` to specify the maximum number of fraction digits. Set it to `0` to show none 🙂

_Thanks for reading!_
Freelance Proposal Tips
Tags: career, freelance, webdev, dotnet
Published: 2020-04-23 14:14:52

---
title: Freelance Proposal Tips
published: true
description: My freelance proposal tips.
tags: career, freelance, webdev, dotnet
---

The past few weeks have been interesting and freelancing is starting to become a mainstream revenue generator for some people in our industry.

> _“Stop saying ‘later.’ You WON’T do it later. Do it or decide not to do it.” – Chris Brogan_


I’ve been doing freelance gigs on and off since 2018, but like Chris Brogan said, I stopped saying later and kicked it into high gear this year.  To start off I created my own company,  _Code by Claro, LLC_, which by all means isn’t necessary for freelancing, but it provides some personal liability protection.  As well as accountability for myself to get things (:poop:) done!

## Prospecting Sources/Platforms

My primary prospecting sources have been  [Upwork](https://www.upwork.com/fl/claro) and [Moonlight Work](https://www.moonlightwork.com/app/users/5137).  There are other platforms out there, but I’ve had better luck with these.  On these platforms you submit proposals (bids) with the limited requirements provided by the client.  Some clients are better than others and have more experience knowing what they want, while others need a guiding hand.

## Proposal Tips

The most important and challenging aspect of freelance work is writing the **_proposal_** for a gig.  Remember you’re competing against talented people across the world, so you have to stand out against the crowd.  Here are some tips on submitting a proposal that will help you land that gig.

1. Always be polite, honest and professional… ALWAYS no matter what!
2. Be sure to carefully go over the requirements and try to understand what the client’s problem (pain point) is; sometimes it isn’t clearly spelled out.
3. Put yourself in the shoes of the client, what would you like to hear?
4. Start with a simple “Hello” or “Greetings” and end with thanking them.
5. Nobody wants to read a novel, so be sure to keep things short and to the point and answer any direct questions.
6. If applicable, provide examples of past projects that are similar to what the client is asking for.
7. Ask questions on anything that doesn’t seem clear.
8. Always end with a call to action by suggesting a phone call or web meeting.
9. Provide your availability or give them a [Calendy](https://calendly.com/) link with your schedule.
10. PROOF READ & SPELL CHECK!!!

---
Thanks for reading and good luck out there!
Designing and developing a blog(as a developer) - live streams
Tags: webdev, tutorial, node, javascript
Published: 2020-04-23 14:10:30

Hey guys!

Since the beginning of this week, I've been doing live streams where I design and code a fully-functioning blog for [DeveloperHabits](https://www.youtube.com/channel/UCJLZwePkNHps5Bv7VwISyTA). It includes technologies like NodeJS, ReactJS, GraphQL, StrapiCMS.

**[This week's last stream starts today at 14.45 UTC](https://www.youtube.com/watch?v=V42nN4QrwKk)**

If you're interested in seeing how the whole process looks like, then do follow the [YT channel](https://www.youtube.com/channel/UCJLZwePkNHps5Bv7VwISyTA). The process includes:
- designing the blog using Sketch
- writing the FE using React
- Applying NodeJS and GraphQL based CMS to the FE

After two streams, this is what've I have come up with:
![Developerhabits blog](https://dev-to-uploads.s3.amazonaws.com/i/njxoo2rzq70srs43o0mq.png)

The plan is to finish the project in 4 weeks:
- 1. the design (one more stream to go)
- 2. FE
- 3. BE
- 4. Whatever needs to be done to go live

**All the streams are recorded and visible in the [DeveloperHabits](https://www.youtube.com/channel/UCJLZwePkNHps5Bv7VwISyTA) channel**.

**The schedule for next week will be posted on Sunday under this post as a comment**

//Edit:
This is the design created during the stream
![Developer habits article design](https://dev-to-uploads.s3.amazonaws.com/i/h5zz8zxwkjj5quo7f4g4.png)
[fetchjson] Effortless Rest Api Mockup for your frontend/mobile app
Tags: api, json, frontend, mobile
Published: 2020-04-23 14:08:24

I made a little [webapp](https://fetchjson.com/) recently that may help frontend or mobile app people to accelerate their development with a mocked json Api.

The idea is to make your json schema and you get a unique url to get random generated data of your model.

For exemple i have a book listing app, my model would be like that:
```javascript
{
   id,
   name,
   date,
   description,
   author:{
      name,
      bio
   }
}
```

So basicaly the model here is simple using the service:
```javascript
{
   "id":"id",
   "name":"name",
   "date":"date",
   "description":"sentence",
   "author":{
      "name":"name",
      "bio":"sentence"
   }
}
```
Result:
https://fetchjson.com/api/public/5ea1a0bec99f05049b5123fa

This one will result as one element, if you want a list, obviously you will wrap it in an array:
```javascript
[
   {
      "id":"id",
      "name":"name",
      "date":"date",
      "description":"sentence",
      "author":{
         "name":"name",
         "bio":"sentence"
      }
   }
]
```
Result:
https://fetchjson.com/api/public/5ea1a082c99f05049b5123f9

You can go for more complex combination of objects and array:
```javascript
{
    "posts":[
        {
            "id":"id",
            "title":"sentence",
            "date":"date",
            "author":{
                "name":"name",
                "bio":"sentence"
            },
            "comments":[
                {
                    "id":"id",
                    "content":"paragraph",
                    "user":{
                        "id":"id",
                        "name":"name",
                        "avatar":"avatar"
                    }
                }
            ]
        }
    ]
}
```
Result of the generated data
https://fetchjson.com/api/public/5ea1a058c99f05049b5123f8

As you can see you define for each element its type, there are several types supported for the moment:
* paragraph
* sentence
* number
* image
* avatar
* name
* address
* email
* id
* date

 You can try and generate you data now at : https://fetchjson.com
Postman For Beginners - Part 1
Tags: testing, beginners, tutorial, todayilearned
Published: 2020-04-23 14:04:48

As a developer, I always wished if there could be any tool which would identify the silly human errors we make. Given the monotonous way of work it is not always possible for a developer to find all the dependency conflicts, which could break some other while we are keen on developing the new things. At least the foremost thing I would expect is not to break anything. 

In my quest to identify tools, which could make my job easier, few features provided by Postman, I felt it handy. 
This is post is purely for beginners who would like to explore more of its useful features.

A general use case to a developer is to check the functionality in different environments like Prod, Test etc. Rather than changing the context each time how about switching the context in just a click?

Let me walk through the steps to set up the below API for different environments.
Environment1 url:
http://dummy.restapiexample.com/api/v1/employees
Environment2 url:
http://dummy2.restapiexample.com/api/v1/employees

**1. Set up the environment and customize the variables**

Select ‘Manage environment’ and click on Add.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ip0t89aqipt6v5lt9gbk.png)

Set up the variables for different environments
Environemnt 1:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/eok5xc35yupew5hm7s30.png)

Environment 2:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/csfa3nbipho9916ui1kt.png)

**Note:**
  1.Use the same variable names across all the environments.
  2.In any case if you have to update the values make sure the correct value is  updated in the ‘Current Value’ text box as well.

Now that your environments are set, we are Ready to Test!!

**2.Ready to Run**

Choose the proper environment from the environment list and use the placeholders to define the context.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wkhgmzrrwyrhc02qh559.png)

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

You can now see the API response for different contexts.


Happy Sharing !!