teleren/devto huggingface dataset:
I'm an African Developer Avocado, I'm trying to build more developers in my Country, Ask Me Anything!
Tags: ama
Published: 2019-04-26 19:40:48

---
title: I'm an African Developer Avocado, I'm trying to build more developers in my Country, Ask Me Anything!
published: true
tags: ama
---

I started the #laptops4Developers campaign in Nigeria, it's a Non-profit mission to support 20 upcoming developers into programming; people who already have an interest in programming but are unable to follow up due to bad or no laptop, no mentor or other support. This program is aimed at supporting them through the course of 3months, they'll be paired with a mentor of their in their field.

{% twitter 1108339611481325569 %}

N.B: The 1m written here is 1 million in Nigerian currency, that's less than $3000

Here is also the link to my main Dev article that talks more about this campaign. 


{% link https://dev.to/hacksultan/laptops4developers-nigeria-4dj2 %}


The support from developers in the US has been really encouraging, but as it is, I'm currently running all these alone and in need of major foreign support to assist. We have been able to raise about 1750 pounds in a month on our Gofundme and we need more support on this. 

The campaign is going forward on twitter with the hashtag #Laptops4Developers, with over 2million impressions since we've started.

We've gotten support from a lot of developers and a lot has volunteered to join the mentor's list.


{% twitter 1111984565378146305 %}

This is the Gofundme link to the Project: https://www.gofundme.com/z7q9rs-laptops4developers

Please feel free to reach me on Twitter on https://www.twitter.com/hackSultan 
or send me a mail through akintundesultan@gmail.com

I'll be answering all questions here also..
ts-jest - Jest + TypeScript in a couple of seconds
Published: 2019-04-29 14:55:30

---
title: ts-jest - Jest + TypeScript in a couple of seconds
published: true
tags: 
canonical_url: https://kulshekhar.github.io/ts-jest/
---

[ts-jest - Jest + TypeScript in a couple of seconds](https://smw.fyi/5M)

Really easy to get this setup. I am not sure if this is a good path yet, but the simplicity and quick feedback flow are great.
Radix: Preventing Nodes Lying About the Order of Events
Tags: dlt, blockchain, opensource, merkletrees
Published: 2019-04-26 18:27:19

---
title: Radix: Preventing Nodes Lying About the Order of Events
published: true
description: 
tags: #dlt #blockchain #opensource #merkletrees
---

So, we know what are the basic elements of the ledger and how will the order of events be determined...but what if someone wants to go rogue? Let's find out in the next instalment of Radix University!

{% youtube jTYGOuS2xvg %}

If you have any questions - join The Radix Community!

[Telegram] (https://t.me/radix_dlt) for general chat
[​Discord] (https://discord.gg/7Q7HSZZ) for developers chat
[​Reddit] (https://reddit.com/r/radix) for general discussion
[Forum] (https://forum.radixdlt.com/) for technical discussion
​[Twitter] (https://twitter.com/radixdlt) for announcements
[​Email] (https://radixdlt.typeform.com/to/nyKvMV) newsletter for weekly updates
Mail to [hello@radixdlt.com] (hello@radixdlt.com) for general enquiries
Setup your Workstation for JavaScript Development
Tags: angular, webdev, tooling, javascript
Published: 2019-04-26 17:23:25

---
title: Setup your Workstation for JavaScript Development
published: true
description: Learn about the required tools to get started with proper frontend dev
tags: angular, webdev, tooling, javascript
cover_image: https://juristr.com/blog/assets/imgs/tooling-cover.jpg
---

_You want to learn about modern web development with JavaScript? Maybe Angular? Well, then it's time to get you setup properly to get started. In this article we'll go through some of the tools._


Here's a quick video that explains the installation of Node, NPM and the Angular CLI (for Angular development).

{% youtube kVXvwuFa-L4 %}

If you wanna read more, [head over to my blog &raquo;](https://juristr.com/blog/2019/04/setup-for-angular-dev/?utm_source=devto&utm_medium=crosspost)
Manage Browser Cookies with React Hooks
Tags: react, hooks, showdev, javascript
Published: 2019-04-26 16:26:21

---
title: Manage Browser Cookies with React Hooks
published: true
description: 
tags: react, hooks, showdev, javascript
---

![Browser Cookies](https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/2ChocolateChipCookies.jpg/1200px-2ChocolateChipCookies.jpg)

So this week, I created my first NPM package and my first custom React Hooks!!!

{% github devhammed/use-cookie %}

Want to you manage HTTP Cookies using React???
I created  `useCookie()` React Hook, you can use it to Get, Set, Update and Delete Cookies in your functional components.

Demo: https://devhammed.github.io/use-cookie
NPM: https://www.npmjs.com/package/@devhammed/use-cookie
Javascript Sock Merchant Challenge - Solution 2
Tags: showdev, javascript, beginners, career
Published: 2019-04-26 16:16:08

---
title: Javascript Sock Merchant Challenge - Solution 2
published: true
description: 
tags: showdev, javascript, beginner, career
series: sock-merchant-challenge
---

### You can find Part 1 here
{% link https://dev.to/adyngom/javascript-sock-merchant-challenge-solution-1-4knh %}

## The challenge
[Hacker Rank Sock Merchant Page](https://www.hackerrank.com/challenges/sock-merchant/problem)

**_John works at a clothing store. He has a large pile of socks that he must pair by color for sale. Given an array of integers representing the color of each sock, determine how many pairs of socks with matching colors there are._**

## The code
<code>
```javascript
function stockAndCount( n, arr ) {
    let pairs = 0;
    const colors = arr.reduce((acc, val) => {
        (!!acc[val]) ? acc[val] += 1 : acc[val] = 1;
        return acc;
    }, {});
  
    Object.keys(colors).forEach( n => {
        let _pair = parseInt( colors[n] / 2);
        if ( _pair >= 1 ) pairs += _pair;
    });

    return pairs;
}
```
</code>

## Video Transcript
In [part 1](https://dev.to/adyngom/javascript-sock-merchant-challenge-solution-1-4knh) we solved the challenge using a **sort first and compare approach**, let’s clean up and look at an alternative solution.

Using the stockAndCount function, we will create an object that will stock each of our colors as keys.

So we will still create a pairs variable, then we will have a colors variable here but using the reduce method here we will be building up this object as we go.

In the reduce callback we setup an accumulator and the current value  - doing this on the fly we check to see if our current value exists as a key in our accumulator object, if so we add one to it if not we create the key and initialize it with 1.

Let’s not forget to add the empty object as the second argument and return the accumulator after each iteration

Let’s make sure the function is properly closed

What we have done above is what I call the **Dictionary approach**. 

Now that we have an object with each color as a key ket’s loop through it.  

We iterate through each key and we create a local pair variable. We initialize the pair by dividing the colors n key value by 2

Now we can check if the pair value is greater or at least equal to 1. If true we can increment the total pairs value on line 17 with the number of pairs found

We can then simply return the total count after the loop.  Running it in the terminal gives us again 3 pairs - If that went too fast let’s add to our console statement and run it again

We first used a sort and count approach in the last episode and today we looked at the Dictionary approach to stock each color as key and total up the pair count.

In the next and final episode we will discuss why the second approach is a better approach. In the meantime please let me know what you think about each and why one might be better than the other in the comments.

Cheers
What was your win this week?
Tags: discuss, weeklyretro
Published: 2019-04-26 15:27:41

---
title: What was your win this week?
published: true
description: Got to all your meetings on time? Started a new project? Fixed a tricky bug?
tags: discuss, weeklyretro
cover_image: https://cl.ly/188e843c2985/download/Image%202019-02-15%20at%202.36.37%20PM.png
---

👋👋👋👋

Looking back on your week -- what was something you're proud of?

All wins count -- big or small 🎉

Examples of 'wins' include:

- Getting a promotion!
- Starting a new project
- Fixing a tricky bug
- Cleaning your house...or whatever else that may spark joy 😄

Happy Friday!
Protobuf log
Tags: rust, protobuf
Published: 2019-04-26 13:57:45

---
title: Protobuf log
published: true
description: handle protobuf log
tags: Rust, Protobuf
---

我有一些数据是mq定时推送的，现在要在他们基础上做模型，之前都是收到就过了，没存过。
推送过来的数据是protobuf序列化过的，想也没啥必要反序列化了再打log。

方案1：
直接log，
pb1pb2pb3pb4pb5....pbn
最后发现，解析不了，开始想法是美好的，毕竟就那么几个field，读了就好了呀，但是后来发现因为pb可能会处理optional的字段，那就不知道一个message有多长啦。

方案2：
加换行符
pb1\n
pb2\n
pb3\n
...
pbn\n
这里就是自己傻逼了，pb里面可能会包含换行符等乱七八糟的东西（毕竟binary），所以不可行。

方案3：
按照之前tcp发送数据包那样的写法，在头部放个length
length1_pb1 length2_pb2 ... lengthn_pbn
这样我们解析的时候就先读有多少个bytes，然后拿这些bytes来反序列化pb messsage。

并且我们length最要也用pb编码，免得处理不一致

```go
c.log.Write(proto.EncodeVarint(uint64(len(bs))))
c.log.Write(bs)
```

然后这边我们处理数据用的Rust

[protobuf](https://github.com/stepancheg/rust-protobuf) 这个库看用的人最多，并且在他的 `CodedInputStream` `read_message`正好就是处理我们这种结构的数据的.

```Rust
    pub fn read_message<M : Message>(&mut self) -> ProtobufResult<M> {
        let mut r: M = Message::new();
        self.merge_message(&mut r)?;
        r.check_initialized()?;
        Ok(r)
    }
```

Rust处理pb的代码如下
```Rust
mod message;
mod file;

#[macro_use]
extern crate slog;
extern crate slog_async;
extern crate slog_term;

use slog::Drain;

use clap::{App, Arg};
use message::Message;
use protobuf::CodedInputStream;
use std::fs;
use std::io::BufReader;

fn vist_dir(path: &str) {}

fn main() -> Result<(), Box<std::error::Error>> {
    let matches = App::new("pig data process")
        .version(env!("CARGO_PKG_VERSION"))
        .author(env!("CARGO_PKG_AUTHORS"))
        .arg(
            Arg::with_name("dir")
                .long("dir")
                .short("d")
                .help("dir of data")
                .value_name("DIR")
                .takes_value(true),
        )
        .get_matches();

    let decorator = slog_term::TermDecorator::new().build();
    let drain = slog_term::FullFormat::new(decorator).build().fuse();
    let drain = slog_async::Async::new(drain).build().fuse();
    let log = slog::Logger::root(drain, o!());

    let dir = matches.value_of("dir").expect("need --dir parameter");
    info!(log, "dir = {}", dir);

    let mut files = file::read_dir(dir);
    files.sort_by(|a, b| {
        a.file_name()
            .into_string()
            .unwrap()
            .cmp(&b.file_name().into_string().unwrap())
    });
    info!(log, "{:?}", files);
    let mut cnt = 0;
    for file in &files {
        let fd = fs::File::open(file.path()).unwrap();
        info!(log, "read {}", file.file_name().into_string().unwrap());
        let mut buffer = BufReader::new(fd);
        let mut is = CodedInputStream::new(&mut buffer);
        while let Ok(message) = is.read_message::<Message>(){
//            info!(log, "{:?}", message);
            cnt+=1;
        }
    }
    info!(log, "total = {}", cnt);
    Ok(())
}

```
Explain Required Sign In Forms For Wifi Access Like I'm Five
Tags: explainlikeimfive, curious, wifi, how
Published: 2019-04-26 14:56:14

---
title: Explain Required Sign In Forms For Wifi Access Like I'm Five
published: true
tags: explainlikeimfive, curious, wifi, how
---

Hello there!

I've always wondered how some wifi connections require you to sign in or fill out a form on a page before you can freely access the internet. How is this effect implemented?

I know little about the actual hardware and the networking that may or may not be involved.

Thanks!
I’m joining Microsoft
Tags: opensource, microsoft, cloud, angular
Published: 2019-06-01 10:41:47

---
title: I’m joining Microsoft
published: true
tags: open-source,microsoft,cloud,angular
canonical_url: https://medium.com/@wassimchegham/i-am-joining-microsoft-as-a-senior-developer-advocate-for-azure-82a3a0766664
cover_image: https://cdn-images-1.medium.com/max/2600/0*FpB4LktoG_4CFTQM.jpg
---

#### For the love of the open source community

Hello Friends,

This is a quick post to announce some exciting news:

> **I will be joining Microsoft as a Senior Cloud Developer Advocate for Azure with a focus on JavaScript, Node.js and of course Angular.**

I have been super impressed by all what Microsoft has accomplished so far for the open source and Web communities. Microsoft is now arguably the open source community’s greatest contributor, becoming a deeply open source company. In fact, Microsoft has open sourced so many great projects ([see the full list here](https://opensource.microsoft.com)), including TypeScript and VS Code which I am a huge fan of. In addition to these tools, Azure itself is being built upon open source technologies. How cool is that?

This true commitment to open source was one of the reasons why I choose to join Microsoft. The other reason why I have accepted an offer from Microsoft is that I was really happy to learn that the devRel team at Microsoft does truly care about the community and developers. This is something that is close to my heart and one of my core values, I even [wrote about it lately](https://medium.freecodecamp.org/what-the-heck-is-a-developer-advocate-87ab4faccfc4).

#### So what is next?

I’ll continue working closely with the Web community, creating open source contents and tools, while helping fellow developers be more productive and successful with Azure services. As Developer Advocates, our role is to act as a bridge between Azure users and the Azure teams at Microsoft helping everyone to get the best experience of Azure.

#### But what about Angular…?

I have always been committed to Angular, the Angular team and the Angular community. As a reminder, here is why [Angular is so important to me](https://blog.usejournal.com/why-does-angular-matter-to-me-bff6643df8c2). By joining Microsoft, I will have more time to spend on open source, including but not limited to Angular.

#### And the GDE program?

As many of you know, I have joined the GDE program in 2015 to help the Angular team. I am now a GDE for 3 product teams at Google: Angular, Assistant, and GCP. I am also a community interviewer for the GDE program. I’m really enjoying being part of the program and helping all different teams. I will be more than glad to continue helping those teams as possible as I can 😉

In the meantime, please feel free to follow me on [Twitter](https://twitter.com/@manekinekko) for upcoming stories and content.

Cheers ✌️
GraphQL Fragments and the benefits of using them
Tags: graphql, beginners, webdev
Published: 2019-04-26 14:23:43

---
title: GraphQL Fragments and the benefits of using them
published: true
description: In GraphQL you sometimes need to query for the same fields in multiple queries, GraphQL fragments are coming with help!
tags: graphql,beginners,webdev,meta
cover_image: https://thepracticaldev.s3.amazonaws.com/i/82mecv0iktszq2e91kmx.png
canonical_url: https://blog.graphqleditor.com/GraphQL-fragments
---

In this short read, I will try to break down for you the concept of GraphQL fragments. What are the fragments in GraphQL and how you can benefit from using them?

### GraphQL Fragments
In [GraphQL](https://graphql.org/) you sometimes need to query for the same fields in multiple queries. This requires defining these fields over again which can lead to tiny, but very annoying errors. 

{% twitter 1118526853948612608 %}

That's why GraphQL includes reusable units called fragments. Fragments let you construct reusable pieces of query logic (an equivalent to UI component of a [design system](https://dev.to/tomekponiat/what-s-design-system-and-why-you-need-one-31fh)). The small part of a query makes, ready to be used where needed, makes our work is way more effective, and possibly lower odds of making a simple typo.

Let's say we have a `user` type containing some standard fields like:

```graphql
type User {
  name: String!
  age: Int!
  twitter: String!
  facebook: String!
  phone: String!
  email: String!
  street: String!
  zipcode: String!
  city: String!
}
```
We can use the `fragment` to represent a set of specific fields i.e. *online contact details*:

```graphql
fragment onlineDetails on User {
  name
  email
  twitter
  facebook
}
```
so when querying for online details we can **referer to the fragment instead of querying for all fields separately**:

```graphql
{
  getUsers {
    ... onlineDetails
  }
}
```

Less typing, cleaner code, easier life :)

### The benefits of using fragments

GraphQL fragments allow you to reuse parts of your queries and provide such qualities as:
- **consistency** - higher confidence that you’re always working on the right fields i.e when running mutations you know you update the right data. 
- **better code organization** - fragments improve the structure & reusability of GraphQL code, which is  very handy in terms of team collaboration
- **improved communication with GraphQL server** - querying for fragments isolates a component from any unwanted data.

Sounds good right? So if you are wondering if its worth using GraphQL fragments the answers is simple - YES!
New Shirts Available in The DEV Shop!
Tags: devshop, meta
Published: 2019-04-26 14:11:20

---
title: New Shirts Available in The DEV Shop!
published: true
description: 
tags: devshop, meta
cover_image: https://thepracticaldev.s3.amazonaws.com/i/xg0wilpz731vucpmpv8h.png
---

Hey all! We have three new tees in The DEV shop this week. Check them out below!

# [Software Tee](https://shop.dev.to/products/software-unisex-t-shirt)

![](https://thepracticaldev.s3.amazonaws.com/i/fikf1swhs0jcwsf9l3gt.jpg) 

_Streetwear meets software in this "supremely" cool tee._ 😄

# [DEV Broken Image](https://shop.dev.to/collections/collection-2/products/dev-broken-image-unisex-t-shirt)

![](https://thepracticaldev.s3.amazonaws.com/i/l71bt38wjw0gn1524gmd.jpg)

_Look out for tiny DEVs hidden in the design here._ 👀 

# [Eco Friendly Tee](https://shop.dev.to/products/eco-friendly-dev-tee)

![](https://thepracticaldev.s3.amazonaws.com/i/x6h9luszihqsdl25ibud.jpg)

_For the environmentally conscious DEV. It's our classic DEV shirt made with recycled and organic fabrics._ 🌱

Check out all of the merch in the [DEV shop](https://shop.dev.to/)!

Have an idea for something you want to see in the shop? Let me know in the comments. My DMs are also open if you want to reach out directly about anything shop related. 

Happy coding!
How To Ask For Help Without Seeming Lazy
Tags: beginners, webdev, career
Published: 2019-04-26 13:53:49

---
title: How To Ask For Help Without Seeming Lazy
published: true
cover_image: https://thepracticaldev.s3.amazonaws.com/i/4jtlnpbfcg3og7fhefdm.jpeg
tags: #beginner, #webdev, #career
series: Journal Of A Second-Career Dev 
---

One thing I enjoy in my first-ever dev role is the opportunity to learn from the brightest minds and expand my developer skillset. Encountering coding roadblocks and known-unknowns is par for the course, and over the last few weeks, I believe I've honed the skill of **properly asking another dev for help**. I'll share that now:

**Step 1:** Triple-check that you are in the right directory, on the right git branch, and that your command syntax is valid and error-free. Following this rule has resolved perhaps 85% of my coding issues 😓 [addition from [Jan Schröder](@vier31): Check that your servers are running and your database is connected].

**Step 2:** Actually READ your error messages (yes, even those parts that are gibberish). I used to run for the hills whenever my machine spat out a deluge of error messages with nary a complete sentence in sight. However, a comprehensible explanation of why your app is complaining probably lies nested within all those characters. Take the time and read, then tease out any explanatory or descriptive sentences.

**Step 3:** Google whatever you teased out in Step 2. You'll probably score several StackOverflow hits. As you peruse the message boards, pay attention to version, software, or system architecture differences between the solutions you read and your own. [addition from [aksfjh](@aksfjh): Also try searching your team/org projects in Github for similar words, functions or errors. Someone else may have implemented code that you can learn from without going to them directly.]

**Step 4:** Scribble a rough summary of your troubleshooting process and rubber-duck it. I can't tell you how many times a workable solution has popped into my head during this step.

All in all, going through Steps 1-4 shouldn't take longer than 30-40 minutes.

**Step 5:** This next point may not be applicable in all work environments, but for me, I use the least-intrusive method (typically a Slack massage) to get my teammate's attention. This respects that fact that they may be in deep focus, or not open to any interruptions at the moment.

**Step 6:** Walk your teammate through your troubleshooting process. Provide context and rationale for each decision you took. Your teammate may just point out the solution, or they may take the "teach-you-to-fish" route and ask leading questions to help you figure a solution out. Either way, you've taken a hands-on approach to finding your answer.

>I'm finding that one of my responsibilities at work is proving that I'm a good learner, a fast learner and an intelligent inquirer. I hope this guide helps you portray yourself as the same.
Simple Working Code > Working Code
Tags: beginners, webdev, rails
Published: 2019-04-26 13:02:11

---
title: Simple Working Code > Working Code
published: true
description: That some code works never exempts that code from being improved upon.
cover_image: https://thepracticaldev.s3.amazonaws.com/i/18l2gj153j81l7gvwdjh.jpg
tags: #beginner, #webdev, #rails
series: Journal Of A Second-Career Dev
---

Recently, I was tasked with creating a redirect from my company's Rails app to an external webpage with a rather long URL.

First, I created an action in the page's controller:

![Controller](https://thepracticaldev.s3.amazonaws.com/i/n8jfjl5nwo8y9hz7fxau.png)

Next, I added a route for said action:

![Route](https://thepracticaldev.s3.amazonaws.com/i/9s08bojslp4x8l8edl24.png)

Then I called the route in the page:

![View](https://thepracticaldev.s3.amazonaws.com/i/o9uaywn1dzdtayp3qowc.png)

Upon code review, my teammate suggested that I create a *helper method which returns the URL*, then call the helper in the view:

![Helper](https://thepracticaldev.s3.amazonaws.com/i/ucmm1pty5sxphorqke66.png)

![New View](https://thepracticaldev.s3.amazonaws.com/i/s616vpv37pkjpybq06mu.png)

---

The controller action was unnecessary, superfluous, cumbersome.
Implementing the helper method was so simple, uncluttered, direct.
That some code works never exempts that code from being improved upon.