teleren/devto huggingface dataset:
Let's Discuss About Assessing Yourself as a Developer
Tags: discuss, career
Published: 2019-10-19 09:16:36

I've read countless articles, blogs, and tweets about how one should never compare themselves to others since everyone's experiences and aptitudes are unique and we don't know how much they struggle before reaching their goals. And it's bad for your health, mentally speaking.

While this advice sounds good and all, then how do YOU measure your own level of competency as a developer?

Do you ask someone who's more experienced than you to assess you, or do you have own methods to assess your programming skills?

I'd love to hear your opinion.
protobuf in C#
Tags: protobuf, csharp
Published: 2019-10-19 09:15:07

Protobuf is used to serialized data structure efficiently. It is faster, smaller & simpler than XML. Protobuf is useful in developing programs to communicate with each other over a wire and it is created by Google. It help us in creating micro services. Protobuf is not an object oriented language so it does not support feature like inheritance. We need to define our data structure once and then we need to use auto generated code which will be used for read and write data to different sources. Protobuf is available in all programming languages like Go, python, C#, Java etc.

Protobuf supports most of the all data types like string, int32, double, float, bool, maps etc. Protobuf also supports enum similar like c#, Java.

Lets create a simple example of protobuf in c# language using visual studio.

1. Create .net core console application.
2. Add these nuget packages to your project: Core, Core.Tools and Google.Protobuf
3. Right click on the project and add a new file named "Person.proto"
4. Add below lines of code in "Person.proto" file

syntax = "proto3";
option csharp_namespace = "CalculatorService.Generated";
message Person
{
int32 id = 1;
string name = 2;
Address address = 3;
}

message Address
{
int32 id = 1;
string addressLine1 = 2;
string city = 3;
}

proto3 is the syntax version of proto file. If we don't specify this then by default it will consider proto2 as syntax version.
csharp_namespace is an optional line. When code will be generated by proto3 compiler, then all classes will be created under this namespace.
message Person and Address both are different types of data structures. When code will be generated by protobuf compiler, two different classes will be created Person and Address. Both will have respected fields id, name, Address and Id, AddressLine1 and city.
We always need to assign unique identifier to each field. Reason for providing unique identifier is that when compiler will serialize or deserialize  any field, then it will be based on this unique identifier so serialization and deserialization will be faster.

5. Right click on the proto file and click on Properties. Choose "Protobuf compiler" from build action's options. By setting this property, your proto file will be compiled by protobuf compiler. If you have not installed above specified nuget packages, then you won't be able to see "protobuf compiler" option.
6. Build the solution.
7. After successful build, open obj/debug/netcoreapp/Message.cs. This code is auto generated by protobuf compiler.

Congratulations! you have just created new protobuf classes.
Discussion: What is Your Favorite Serverless Architecture?
Tags: discuss, serverless, aws, beginners
Published: 2019-10-19 09:12:41

In the last year of the decade, I found myself working closely with the entire service stack. I became familiar with a few technologies in AWS serverless architecture:

- I use CloudFormation to manage 99.9% of my resources
- I use standard storages like S3, DynamoDB
- I utilize message systems to deliver events
- I use API gateway and lambda to build the APIs

What is your favorite Serverless architecture? What are the excellent examples and pitfalls you have experienced? Happy to learn and discuss!
Do you use a mechanical keyboard for coding? Show me your setup!
Tags: discuss, watercooler
Published: 2019-10-19 08:50:11

---
title: Do you use a mechanical keyboard for coding? Show me your setup!
published: true
description: 
tags: discuss, watercooler
cover_image: https://images.unsplash.com/photo-1543966888-7c1dc482a810?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1200
---

I love mechanical keyboards and have loved using my Limited Edition Ducky Shine 3 with MX Browns on my Windows gaming machine, but these days I code on my Macbook. My Ducky has 104 keys and the aluminium frame is large and heavy, making it inconvenient to travel with.

I'm looking for a smaller and lighter keeb that I can use with Mac-friendly keycaps, but I don't want to buy something that has so few keys that it isn't practical for coding.

If you use a mechanical keyboard for coding on Mac, show me pictures of your setup!
Local Development Environment with Docker for PHP (Part 3)
Tags: php, laravel, docker, webdev
Published: 2019-10-19 08:44:05

__*Setting Multiple PHP runtime*__

In our last post we’ve successfully setup a development environment to develop applications in Laravel, though this setup can be use to build any PHP application. Now suppose for whatever use case if we need to test our application for different PHP version than our current one, it’d be very complex and messier process to do it in our host machine with native setup. But with docker we can do this without any hassle (also it can be achieved in many other ways e.g vagrant).

### Install PHP 5.6

We’ll install php 5.6 version. Everything will be same as the way we installed php 7 earlier. We’ll use php:5.6-fpm image from docker hub.

![Create a conatiner for php 5.6](https://cdn-images-1.medium.com/max/2478/1*pYcEGPjM8hQE_dPWKg6ksw.png)*Create a conatiner for php 5.6*

Do not select any network for the container right now, we will do it later.

We will map our sites directory to the /var/www directory in the container.

![Map project directory in Volumes tab](https://cdn-images-1.medium.com/max/2000/1*bIvGgb8Le7fn9oaJrHZJtA.png)*Map project directory in Volumes tab*

Finally in Command tabs put /var/www as value in Working Dir field

![](https://cdn-images-1.medium.com/max/2414/1*HXzNSOw-xB_Za_L84-JzeA.png)

Now start the container by hitting start container button. Docker will pull the image from docker hub registry and then start a container by php-5.6 name.

**Assigning an alias**

Now we’ll assign a alias called php for this container so that our nginx configuration works for both php-7 and php-5.6 container. If you look in the nginx config for any application we are forwarding all request from nginx to php:9000. Assigning a alias for php-5.6 container will allow us use the same config for both php container. First stop the container and then run the below command from the command line (portainer doesn’t have an option for assigning alias yet)

    docker network connect --alias=php php php-5.6

So the above command connect a container to a network, we’re connecting php-5.6 container to php network and assigning a alias php. Now start the container from portainer. Now you can run all the php application in php 5.6 version. Now if you want to run again in php 7 runtime first stop the php-5.6 container and then start the php 7 container.

**Conclusion**

Using docker you can easily test your app for different php version above mention way. In next post we’ll see how we to run laravel asset compiling package elixir or mix to compile our frontend stuff.

[Part-1](https://www.hasnayeen.dev/local-development-environment-with-docker-for-php)

[Part-2](https://www.hasnayeen.dev/local-development-environment-with-docker-for-php-2)
ASP.NET MVC 5 Render Sections with RenderSection
Tags: csharp, webdev
Published: 2019-10-19 08:37:09

RenderSection: is a method that helps us determine the display position of content on websites.
**@RenderSection ("Footer", required: false):** the meaning of the content displayed will not be required
**@RenderSection ("Footer", required: true):** required content, if the View does not declare the name Section , we will get an error

Example
**_LayoutPage.cshtml**
```csharp
<body>
  <div>
        @RenderBody()
    </div>
    <footer>
          @RenderSection("Footer", required: false);
    </footer>
	 @RenderSection("Scripts", required: false);
</body>
```

**Index.cshtml**
```csharp
@section Footer{
	<p>This is Footer Index</p>
}
@section Scripts{
    <script type="text/javascript" src="~/js/jquery.min.js"></script>
	<script>
		$(document).ready(function(){

		});
	</script>
}
```
You can use the following method to check on whether the User has declared the Section Name , **IsSectionDefined ()** : use the Check Name section.

```csharp
@if (IsSectionDefined("Footer"))
  {
     @RenderSection("Footer", required: false);
  }
  else
  {
     <span>This is The default Footer</span>
   }
```

Post:[ASP.NET MVC 5 Render Sections with RenderSection](https://hoanguyenit.com/aspnet-mvc5-render-sections-with-rendersection.html)
Toggling Password In Multiple Forms
Tags: codepen, vanillajsaccademy, beginners, javascript
Published: 2019-10-19 07:46:12

---
title: Toggling Password In Multiple Forms
published: true
tags: codepen, vanillajsaccademy, beginner, javascript
cover_image: https://thepracticaldev.s3.amazonaws.com/i/9dxg5jwwan8gimoevsc5.png
---

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/031sv4dxg30p5uqwwtip.png)

{% codepen https://codepen.io/giandomenico/pen/XWWNWdb %}
Prevent scroll “bubbling”
Tags: css, ux
Published: 2019-10-19 07:40:16

A few days ago I stumbled upon a post about a CSS property I hadn’t seen before: overscroll-behavior 

As per MDN docs:
“ The overscroll-behavior CSS property sets what a browser does when reaching the boundary of a scrolling area. It's a shorthand for overscroll-behavior-x and overscroll-behavior-y.”

https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior

It struck me as it was exactly what we needed on a piece of overlayed ui that had inner scroll and was causing the less than ideal effect of scrolling the entire page too. 

Tested it out yesterday and it did the job wonderfully. 

So, apart from some exceptions, whenever you set `overflow: auto` on a panel or some modal content, add this property too: `overscroll-behavior: contain`. 

Although it’s still in Draft, it already has a fairly broad browser support:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/80iu6wlpactlvexs9zxb.png)

It’s also available at CanIUse:
https://caniuse.com/#feat=css-overscroll-behavior
RxJS examples of the day (part 1)
Tags: rxjs
Published: 2019-10-19 07:01:00

---
layout: post
title: RxJS examples of the day (part 1)
published: true
description:  A couple of examples practical examples on RxJS
author: kwintenp
comments: true
subclass: 'post'
categories: 'RxJS'
disqus: true
tags: RxJS
canonical_url: https://blog.strongbrew.io/rx-example-of-the-day-part-1/
---

Having worked with and teaching RxJS for quite some time now, I always felt that the way RxJS is explained is very theoretical. For that reason, I started tweeting out these practical RxJS examples that I basically plucked from my own codebases. 
This blog post will hopefully be part of a series (depending on my inspiration ☺️). Here are the first 5.

### Handle replaying of keydown events

The browser replays 'keydown' events for as long as the user keeps pressing the button. Often times, you just want to have the 'keydown' event as a trigger but want to remove the duplicate ones without constantly removing and reading the eventlistener.

{% twitter 1160841804603973632 %}

### Using the conditional `iif` operator

The `iif` operator helps when your initial stream depends on a condition. Without the operator, we would have to write a pretty ugly (and imperative) 'if-else'.

{% twitter 1162090144410849280 %}

### When and how many times is a stream subscribed to

Knowing when and how many times a stream is subscribed to can be extremely valuable information to have when working with RxJS. If you for instance have multiple backend calls that are triggered, this info can help pinpoint the issue. 

{% twitter 1162382060687974400 %}


### Optimising your autocompletes

When the user starts typing, you typically want to remove the existing results in an autocomplete as they don't match what the user was typing no more. You can do this by branching existing streams instead of resorting to side effects or `Subjects`.

{% twitter 1163452741148168192 %}

### Using exhaustMap as a flattening operator

Sometimes you want to avoid the user constantly canceling calls. If a call is already on it's way, we probably want to continue that one first. Using `exhaustMap` is the perfect operator for that.

{% twitter 1164145793806360582 %}
Making my first contribution to an open source project
Tags: hacktoberfest, opensource, pr, devjournal
Published: 2019-10-19 06:51:38

---
title: Making my first contribution to an open source project
published: true
description: Adding a test framework 
tags: hacktoberfest, open-source, pr
---

I feel so elated right now! I came across this project, a benchmark runner for OrbitDB. To be frank, I actually came across this issue when I was looking for a repo I could contribute to, as part of the Hacktoberfest that’s being run by DigitalOcean. This was going to be my first official PR and I felt adding tests would be something I could start with.

It was not as easy as I expected. I added Mocha as the testing framework (I was so used to Jest and Jasmine before this), with SinonJS for mocks/stubs and ChaiJS for better assertion statements. But the main challenge was figuring out how to test cli commands. 

`yargs` is a nodejs library that helps in building command line tools. I had no clue how to go about testing it. I looked around the web and was finally able to figure out how to go about it. 


You can see what I have done here:

{% github https://github.com/orbitdb/benchmark-runner/pull/5 %}

Let me know what you think about this. I would also love to know how you made your first contribution to open source!
How I host my personal page for free with github, heroku and aws.
Tags: webdev, github, aws, python
Published: 2019-10-19 05:47:06

I made my [personal page](https://deepjyoti30.github.io) on github about a year ago but since then I've always had second thoughts about buying my own server and domain because github just helps you host, they don't give you a server.

But recently, I came across heroku while writing a bot of my own and since then I have had so much fun making my page dynamic.

## So how does it work?

It's simple, you host your page using github pages and use heroku as the server. Isn't that simple enough?

Well, it's not just that simple. Heroku has it's own disadvantages and I have written my experience and workarounds for using Heroku as your server for your page.

I have written an article about how to use heroku with github pages.

### Check it [here](https://deepjyoti30.github.io/blog/have-a-personal-page-for-free)

**I will be writing a follow up post on how to use static files on your Heroku app using aws. Keep a lookout for that article.**
ストレージに余裕のない MacBook Air になんとか 20GB の空きを作って Xcode と Android Studio をインストールして Flutter 開発環境をつくる方法
Tags: flutter, xcode, androidstudio
Published: 2019-10-19 05:04:33

---
title: ストレージに余裕のない MacBook Air になんとか 20GB の空きを作って Xcode と Android Studio をインストールして Flutter 開発環境をつくる方法
published: true
description: 
tags: flutter, Xcode, AndroidStudio
---

***「ストレージに余裕のない MacBook Air になんとか 20GB の空きを作って Xcode と Android Studio をインストールして Flutter 開発環境をつくる方法」*** を[こちら](https://passe-de-mode.uedasoft.com/ja/Tips/Software/Device/Flutter/Flutter02.html)にポストしました

悪戦苦闘の末、できあがった flutter の開発環境は感動的にも快適でした
The 2 ways to transfer ERC20 Tokens in Solidity
Tags: blockchain, ethereum, solidity, erc20
Published: 2019-10-19 04:38:00

---
title: The 2 ways to transfer ERC20 Tokens in Solidity
published: true
description: 
tags: blockchain, ethereum, solidity, erc20
---

{% youtube -5j6Ho0Bkfk %}

With ERC20 tokens, there are 2 APIs to transfer tokens:

- transfer() (simple transfers)
- transferFrom() (delegated transfer)

For transfer(), there are 3 steps:

1. Import the ERC20 token
2. Import the address of the token
3. Call transfer()

For transfer(), there are 4 steps:

1. Import the ERC20 token
2. Import the address of the token
3. Call approve()
4. Call transferFrom()

WATCH Whole Solidity tutorial series: 

{% youtube p3C7jljTXaA %}
Are comment sections useful/necessary for personal blogs? 
Tags: discuss
Published: 2019-10-19 04:14:02

I like to keep [my site](https://wangonya.com/) as simple as possible. Sometimes though, I feel like a comment section would be useful incase someone wants to ask a question on a blog post or leave some constructive criticism. On the other hand, I dislike the idea of having to use third party commenting systems like disqus. I also think implementing my own commenting system and requiring users to provide an email or something to comment is a bit overkill. This is the option I would go with though if I was to do it.

Does your site have a comments section? Do you think it's necessary?
Introduction To HTML & CSS: Web Development For Beginners
Tags: html, css, webdev, tutorial
Published: 2019-10-19 03:20:23

Complete HTML & CSS web developer bootcamp. Learn & practice website design using HTML5 & CSS3 web development resources

Welcome to Introduction To HTML & CSS: Web Development For Beginners: This is a comprehensive and Practical guide that is designed to pick up every interested student from the state of "zero-knowledge" to a state of "Hero-knowledge" in HTML and CSS. As a senior software developer and an instructor with many years of experience in the industry, I have mastered the best way to give my students packages that will help them to learn and understand HTML and CSS in one course.

**What you'll learn**

* You will learn the basics of web development
* You will be able to use the HTML tags professionally
* You will learn how to work with images in HTML and CSS
* You will learn how to create awesome backgrounds
* You will how to use CSS colors
* You will master most web development documentations used by professionals
* You will learn how to embed multimedia in web pages
* You will learn how to make comments in both HTML and CSS
* You will learn the Box Model

{% youtube Qi8sqy-TYBo %}
Why isn't my state getting updated? - React Hooks version
Tags: react, javascript
Published: 2019-10-19 03:16:10

Probably because you are using it wrong.

```js
const [value, setValue] = useState("");
function handleChange(newValue) {
  setValue(newValue);
  console.log(value);
}
```


Why is your state not getting updated?

Straight out of [React docs](https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous), `setState` may be asynchronous. What does that mean?

Let’s find out.

```js
setTimeout(() => console.log('foo'), 0);
console.log('bar');
```

What is the output?

First the second `console.log` fires and then the first one inside the `setTimeout` function. This happens because `setTimeout` is asynchronous and is moved to the browser thread. So the code that runs after `setTimeout` gets executed however small the timeout is.

Same is the case with `setState` Because of it’s asynchronous state, the statement after is being called before the actual `setState` function.

---

# How do we fix this?

React calls the functional component once again whenever the state is updated. Hence, to see the updated state, just look in the render.

```js
function App() {
  const [value, setValue] = useState("");
  function handleChange(newValue) {
    setValue(newValue);
  }
  console.log(value);
  ...
}
```

But in real world react components, there would be multiple states (and props) and this would trigger the `console.log` every time any one of these is updated. Instead, a more effective approach would be:

```js
function App() {
  const [value, setValue] = useState("");
  useEffect(() => {
    console.log(value);
  }, [value]);
  function handleChange(newValue) {
    setValue(newValue);
  }
  ...
}
```
Note that the `useEffect` has the required state as dependency and thus would run whenever it is changed. 

---

Cross Posted from my [Blog](https://blog.agney.dev/hooks-why-is-my-state-not-getting-updated/)
Why is my state not getting updated? - React Class version
Tags: react, javascript
Published: 2019-10-19 03:15:36

Probably because you are using it wrong.

If you browse Stackoverflow for React questions, this is one of the most common questions that you will find. Well, it is this or other versions of the same question. All this after Stackoverflow marks questions as duplicates.

```js
function handleChange(value) {
  this.setState({
    value: newValue,
  });
  console.log(this.state.value); //Why is my state not updated?
}
```

Why is your state not getting updated?

Straight out of [React docs](https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous), `setState` may be asynchronous. What does that mean?

Let’s find out.

```js
setTimeout(() => console.log('foo'), 0);
console.log('bar');
```

What is the output?

First the second `console.log` fires and then the first one inside the `setTimeout` function. This happens because `setTimeout` is asynchronous and is moved to the browser thread. So the code that runs after `setTimeout` gets executed however small the timeout is.

Same is the case with `setState` Because of it’s asynchronous state, the statement after is being called before the actual `setState` function.

---

### How do we fix this?

```js
function handleChange(value) {
  this.setState(
    {
      value: newValue,
    },
    () => {
      console.log(this.state.value);
    }
  );
}
```

`setState` actually comes with a callback version. All you have to do is provide the function to be run after the `setState` is executed. Here, you can give whatever action you wanted to perform once the setState is done.

Since you might already have the result you are going to `setState` with, it might be better to utilise that result for regular operations rather than using the callback.

PS: You could also just use `console.log(this.state.value)` in `render()` function or `componentDidUpdate()` but I’m guessing you already knew that.

### Why is it asynchronous?

Now that you know how to fix it, you can leave.

Or you can stay and figure out why is it made asynchronous. _Doesn’t it make React slower?_

From the docs:

> React may batch multiple `setState()` calls into a single update for performance.

> Because `this.props` and `this.state` may be updated asynchronously, you should not rely on their values for calculating the next state.

Yes, that is just it. React it doing this for performance. You might not feel the need for it in a small application. But in a larger application where a lot of state updates may be taking place simultaneously, batching state updates comes as a boon.

The `setState` comes with several other neat tricks as well, with `prevState` which you should definitely check out if you are new to React or may be just haven’t heard of it.

---

Cross Posted from my [Blog](https://blog.agney.dev/why-is-my-state-not-getting-updated/)