teleren/devto huggingface dataset:
Reverse Engineering - The art of understanding
Tags: javascript, typescript, html, assembly
Published: 2019-04-22 01:38:48

---
title: Reverse Engineering - The art of understanding
published: true
description: We look at some code and try to figure out how it works and talk about different techniques to understand code.
tags: JavaScript, typescript, html, assembly
---

{% youtube F2osNaeAOgk %}
Day 11 Learning Javascript
Tags: beginners
Published: 2019-04-22 01:34:03

---
title: Day 11 Learning Javascript
published: true
description: 
tags: #beginner
---

Fresh Scope!

After struggle a bit with DOM manipulation, learning about global/root scopes and local scopes seemed like a fresh, Spring breeze. And very good stuff to know as well, since figuring out the accessibility of certain variables seems pretty important for future coding projects.

So far my coding journey has been about how I expected it: Some pleasure, some pain. But all of it totally rewarding.

Onto Advanced Control Flow...
A take on concise promise handling in TypeScript.
Tags: typescript, promise, cleancode
Published: 2019-04-21 06:42:30

---
title: A take on concise promise handling in TypeScript.
published: true
description: My solution for ugly promise callback hell and async/await try-catch madness.
tags: typescript, promise, cleancode
---

After looking for a clean way to handle async/await REST calls without try-catch blocks, I found a small wrapper that satisfied my needs. 

The article that inspired me was https://blog.grossman.io/how-to-write-async-await-without-try-catch-blocks-in-javascript/. 

```javascript
function on (promise) {
    return promise
      .then(response => [response, null)
      .catch(error => [null, error])
}

/// async function
async function doSomething() {
    const [data, error] = await on(somePromise())
    if (data) {
        // do whatever
    } else {
        // handle error
    }
}

```

The above solution was like an eureka moment after I did started with stuff like this:
```javascript
promise
    .then(result => doSomething(result))
    .catch(error => log(error))
```
and this:
```javascript
    try {
        const data = await somePromise()
        // do whatever
    } catch (e) {
        // handle error
    }
```
After doing lots of work on the frontend with React and learning hooks, the simplicity of the solution outlined in the article just clicked. During code review however, a colleague pointed out that while nice, it's not typed at all. He then suggested to actually type it properly.

Here it is: 

```typescript
// using Axios but you can type your promises however you'd like
const on = <RES, ERR = any> (promise: AxiosPromise): Promise<[RES | null, ERR | null]> => {
  return promise
    // destructuring since my API returns all the good stuff like so.
    .then(({ data }): [RES, ERR | null] => [data, null])
    .catch((error): [RES | null, ERR] => [null, error])
}

// and now calling it from an async function
const [todo, error] = await on<Todo>(somePromise())
// now my returned todo is already typed as Todo.
// error typing is optional, it defaults to any.
```

I'm posting my solution just to share my point of view. I'm very open to improvements and comments. Would you use such a solution? Let me know. This is also my first article/post. Since I've always wanted to write about stuff I do, I decided such a short topic might be just enough to get my feet wet.

Cheers!
Let's Interface
Tags: programming, interfaces, classes, computerscience
Published: 2019-04-21 18:50:27

---
title: Let's Interface
published: true
description: 
tags: programming,interfaces,classes,computerscience
---

<img src="https://thepracticaldev.s3.amazonaws.com/i/z00q2kdvd6cmgwq1yqbw.jpg" />

Just like a class is a blueprint of an object, an interface is a blueprint of a class. Whenever you are building software you can put in the demands that a class must have. 

Let's understand this with an example.

1. Suppose you want a device that you have made to be able to interact with your computer.
2. You plug in your device using the USB-port. The computer says it doesn't recognize the device.
3. You ask your computer, why don't you. 
4. The computer says it needs a couple of information from you to recognize this device. 
5. You tell the computer that tell me what you need and I will give you the information.
6. The computer says, I need the following: 
    a. What is your device's name?
    b. What does it do?
    c. What is the size of your device?
    d. Can it send signals to the human using it?
    e. What do I have to do to shut it down?

7. Look at point 6 closely. All the above things are common for any kind of device that you want to attach to your computer. What if all of these could be functions that the computer could call? 
8. Let's write it in the computer's language, shall we?
    a. fetchDeviceName()
    b. fetchDeviceWork()
    c. sizeOfDevice()
    d. sendOutput()
    e. shutdown()

9. Point 8 is what the computer needs. This is what an interface really is. The computer tells you that if you want me to recognize your device you have to give me access to such methods in your class. So your device will have all these methods in its class. (class implements an interface).


So you see, an interface is more or less like an agreement between two parties, in this case, two devices which want to communicate. The class implements the interface allowing smooth functioning. Tomorrow you come with a new device, you still have to follow the same approach to make your computer understand it. 

<i>No matter who you are, if you wanna talk to me, you talk to me on my terms. Thug Life ain't it!</i>
Drag and Drop Browser API
Tags: javascript, browserapis, frontend, beginners
Published: 2019-04-21 21:42:16

---
title: Drag and Drop Browser API
published: true
description: Simple introduction to the browser's drag and drop API
cover_image: https://images.unsplash.com/photo-1445283091103-52e71613d678?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60
tags: #javascript, #browserApis, #frontend, #beginner
---


Over the next one and a half weeks, I will be exploring the drag and drop API, mostly because I found it cool 😜. I will also write articles on the given topics as I build a simple application to mess around with it.

File drag and drop is another cool feature I discovered on the browser recently and I intend to explore it as I learn how to use it to upload files to my Azure storage account.

If you have any ideas on simple cool ideas, feel free to 📥 me and perhaps we can learn together as we grow our programming skills 😀.
Event Stream - Server-Send Events
Tags: php, javascript, laravel, eventstream
Published: 2019-04-21 19:44:00

---
title: Event Stream - Server-Send Events
published: true

description: Server-Sent Events is a web API for subscribing to a data stream sent by a server. This opens up a network request to the server so we can stream. Think of it like a Promise that never resolves. Easily implementable using native JavaScript or reactive programming to fetch Event Stream Data.

tags: #php, #javascript, #laravel, #event-stream
---

>  Server-Sent Events is a web API for subscribing to a data stream sent by a server. This opens up a network request to the server so we can stream. Think of it like a Promise that never resolves. Easily implementable using native JavaScript or reactive programming to fetch Event Stream Data.


![event-stream](https://thepracticaldev.s3.amazonaws.com/i/bt0ysdohed1b80n0wix4.png)

# Implementations:

> Laravel-Backend Application Source:


```php

// HomeController.php
// import at the begining
use Symfony\Component\HttpFoundation\StreamedResponse;


//-----------------

class HomeController extends Controller
{

    public function getEventStream() {

		$random_string = chr(rand(65, 90)) . chr(rand(65, 90)) . chr(rand(65, 90));
		$data = [
			'message' => $random_string,
			'name' => 'Sadhan Sarker',
			'time' => date('h:i:s'),
			'id' => rand(10, 100),
		];
		
		$response = new StreamedResponse();
		$response->setCallback(function () use ($data){
		
			 echo 'data: ' . json_encode($data) . "\n\n";
			 //echo "retry: 100\n\n"; // no retry would default to 3 seconds.
			 //echo "data: Hello There\n\n";
			 ob_flush();
			 flush();
			 //sleep(10);
			 usleep(200000);
		});
		
		$response->headers->set('Content-Type', 'text/event-stream');
		$response->headers->set('X-Accel-Buffering', 'no');
		$response->headers->set('Cach-Control', 'no-cache');
		$response->send();
    }

}



//-----------------
// Application routes `web.php`

Route::get('/getEventStream', 'HomeController@getEventStream');


``` 


> JavaScript-Frontend Application

```javascript

// javascript

let evtSource = new EventSource("/getEventStream", {withCredentials: true});

evtSource.onmessage = function (e) {
 let data = JSON.parse(e.data);
 console.log(data);
};

```


# Live Project Demo:
[Demo Application](https://frozen-brook-25821.herokuapp.com/)

# Source Code:
[Source Code](https://github.com/mesadhan/laravel-event-stream-sample)
Do you know where to find remote internship for software development?
Tags: discuss, career
Published: 2019-04-21 18:12:47

---
title: Do you know where to find remote internship for software development?
published: true
description: Let's discuss which companies offer remote internship opportunities
tags: discuss,career
---

For some context, I am a Software Engineering student from Zimbabwe and I am doing my studies at the Harare Institute of Technology. Next semester I will be hunting for internships as it is a requirement as part of my degree.

Let us discuss the companies that currently accept remote internship opportunities to students and any advice you could give when looking for internship.
Best DEV.to Posts for Beginners: Week of April 14, 2019
Tags: codenewbie, beginners, tutorial, bestofdev
Published: 2019-04-21 17:40:26

---
title: Best DEV.to Posts for Beginners: Week of April 14, 2019
published: true
description: From learning plans to tutorials, these are some of the best beginner posts of the week!
tags: #codenewbie, #beginner, #tutorial, #bestofdev
series: Best DEV.to Posts for Beginners
cover_image: https://thepracticaldev.s3.amazonaws.com/i/x9acs27zebb19v5rf8ml.png
---

One of the reasons I've been so drawn to DEV.to over other platforms is the super encouraging and helpful community that gathers here. Initially I felt like it was going to be more a place where I sat back and watched, rather than write and contribute, but I've been so pleased to find not only helpful articles and tutorials that I understand, but also that input from new coders and devs is well-received.

I thought it would be nice to compile some of the best posts every week for those of us who still identify as #codenewbies!

{% link https://dev.to/emmawedekind/ux-engineering-3hem %}
This week, Emma broke down what exactly a UX Engineer does. I’ve been realizing recently that UX is something that has always been a “dream job,” but that I didn’t know it was actually a career area. Really cool to keep learning more about it!

{% link https://dev.to/healeycodes/how-to-write-an-awesome-github-readme-2ldc %}
README docs on Github projects, especially open soure ones, are a hugely important part of the project. Reviewing and trying to improve copy in README docs is how I’ve started to dip my toes into open source, and this is a great read on things to keep in mind.

{% link https://dev.to/samanthaming/how-to-get-an-object-length-30pd %}
JavaScript is my current favorite project. I love seeing dedicated articles on one topic - it goes in depth and makes it click in ways the concept might not have settled before.

{% link https://dev.to/codeidoscope/tracking-your-progress-to-improve-your-confidence-12lh %}
When I graduated from college and had my first internship in the music industry, I smartly started a folder in my inbox to save any complimentary feedback I got. It’s grown over the years and I still look back on some of that early input from time to time. Tracking your progress on your own, too, whether it’s through a 100 Days of Code repo or a spreadsheet or document and starting early on will help a lot as you continue on your dev journey - it feels amazing to see how far you come.

{% link https://dev.to/brandonskerritt/how-to-get-any-job-you-want-a-guide-to-employability-skills-1i3m %}
This is a super long and super thorough read for anyone at any stage in their job search. 

{% link https://dev.to/healeycodes/the-weird-rules-i-set-myself-that-got-me-a-job-2g9m %}
I loved this post on setting “rules” for yourself - right now, I’m forcing myself to spend one hour a day creating a quick JavaScript app without worrying about the CSS and layout specificities that I usually get stuck on. 

## What were your posts of the week?
Riding rough-shod over your eslint rules
Tags: webdev, javascript, eslint
Published: 2019-04-21 16:43:45

---
title: "Riding rough-shod over your eslint rules"
description: "Eslint rules can be overridden for specific files which is useful for your tests files"
tags: ['web development','javascript','eslint']
published: true
---

In HMH we have adopted fairly strict eslint rules regarding code complexity. [I've written about eslint complexity metrics before](https://www.webpusher.ie/2019/02/01/eslint-complexity), and will no doubt do so again! The rules work well for our code, but do tend to get in the way when we are writing tests. 

## Tests need code standards too!

I'm not saying you should abandon all pretense to code standards for unit test code, but by their nature tests are often larger, more verbose, and complex than the code they are targeting. We've adopted a few approaches to try and keep the tests flexible and maintainable by breaking them into multiple files, adding a dash of [SOLID principles](https://en.wikipedia.org/wiki/SOLID) and generally using our common sense.

Even with all that, our test files are a mess of squiggly green lines telling us we have failed to write cromulent code. If only we could relax the rules for our test code!

## Overrides to the rescue

Luckily, we can indeed have eslint [apply different rules to different files](https://eslint.org/docs/user-guide/configuring#disabling-rules-only-for-a-group-of-files).

For us, we know that the test files are consistently named `somemodule.test.js` so the associated eslint config will be:

```javascript
{
  "rules": {
    /* rules here will apply to all files */
    "complexity": [
            "error",
            6
        ],
        "max-nested-callbacks": [
            "error",
            2
        ],
        "max-lines": [
            "warn",
            80
        ],
  },
  "overrides": [
    {
      "files": ["*.test.js"],
      "rules": {
        // we've changed all the errors to warnings
        // and relaxed the rules
        "complexity": [
            "warn",
            12
        ],
        "max-nested-callbacks": [
            "warn",
            5
        ],
        "max-lines": [
            "warn",
            200
        ],
      }
    },
    {
      "files": ["*.any.other.files.js"],
      "rules": {
        /* add suitable rule configs here */
      }
    }
  ]
}
```

As you can see you can have multiple overrides for different file types, although we only override the unit test rules.
My Favorite Colors for Peacock
Tags: vscode
Published: 2019-04-21 16:43:36

---
title: My Favorite Colors for Peacock
published: true
description: Customize VS Code with colors from F#, Firebase, Octopus Deploy, and Wyam
tags: vscode
canonical_url: https://blog.rousseau.dev/posts/my-favorite-colors-for-peacock
cover_image: https://firebasestorage.googleapis.com/v0/b/blog.rousseau.dev/o/images%2Fbackgrounds%2Fpeacock.jpg?alt=media
---

I recently joined [dev.to](https://dev.to). One of the suggested posts was John Papa's announcement that he had [released Peacock v1](https://dev.to/azure/peacock-v1-released-4kce). At any given time, I have at least two instances of VS Code open so I immediately installed this extension.

Peacock lets you set a custom color for different workspaces. This makes it easy to tell instances apart based on their appearance.

You can customize Peacock with your favorite colors. It comes with a recommended set of favorites that includes colors from popular projects like Angular, React, and Vue.

I tracked down the colors for projects I use and added them to my favorites. If you use F#, Firebase, Octopus Deploy, or Wyam, you can add these colors to your Peacock settings.

```json
        {
            "name": "F# Dark",
            "value": "#378BBA"
        },
        {
            "name": "F# Light",
            "value": "#30B9DB"
        },
        {
            "name": "Firebase Amber",
            "value": "#FFA000"
        },
        {
            "name": "Firebase Orange",
            "value": "#F57C00"
        },
        {
            "name": "Firebase Yellow",
            "value": "#FFCA28"
        },
        {
            "name": "Octopus Blue",
            "value": "#2E92DF"
        },
        {
            "name": "Wyam Logo",
            "value": "#345b7d"
        },
        {
            "name": "Wyam W",
            "value": "#6c5b7b"
        },
        {
            "name": "Wyam Y",
            "value": "#c16c84"
        },
        {
            "name": "Wyam A",
            "value": "#f67280"
        },
        {
            "name": "Wyam M",
            "value": "#f9b194"
        }
```

What colors have you added to your settings?

_This post was originally published at [blog.rousseau.dev](https://blog.rousseau.dev/posts/my-favorite-colors-for-peacock). Cover photo by [Ricardo Porto](https://unsplash.com/@rporto5169) on [Unsplash](https://unsplash.com/)._
日本語を学ぶ：私のコツ
Tags: japanese
Published: 2019-08-30 12:10:44

---
title: 日本語を学ぶ：私のコツ
published: true
tags: Japanese
canonical_url: https://khalifa.tn/%e6%97%a5%e6%9c%ac%e8%aa%9e%e3%82%92%e5%ad%a6%e3%81%b6%ef%bc%9a%e7%a7%81%e3%81%ae%e3%82%b3%e3%83%84/
---

## Learning Japanese: My Tricks

_Don’t worry, I translated the title!_

Since many years, I started learning Japanese at school, It was a fail for me because I didn’t practice it and I forgot everything. Then every time I retry, It becomes hard to me until I found the best practice to learn it.

First, I installed this application.

 ![Hiragana pro](https://i0.wp.com/khalifa.tn/wp-content/uploads/2018/12/Screenshot_20181209-004725.png?resize=194%2C344&ssl=1)

Hiragana Pro https://play.google.com/store/apps/details?id=com.myapps.hiragana

<figcaption></figcaption>

This is thanks to the application Hiragana Pro. Its purpose is to show you the letters randomly from the beginning until you can memorize them.

Obviously it takes time. That’s why I took it as a challenge.

After learning all Hiragana caracters, we have to learn Katakana too, because these letters are used to write our names, and the international things for exemple : “コンピューター” (Computer)

It’s not easy as we thought but after a while I start to take interest in Kanji.

… And this is a hardest things I’m trying to resolve.   
The Kanjis are not letters but rather a meaning. A meaning that The Japanese use to define the sense of the sentence and at the same time they pronounce Kanjis as Chinese.

My first Kanji I learned is 私. it is (Watashi == ‘I’) but in a way too polite. We use 私 as the beginning of the sentence to indicate that the subject is the “me”.

![ExempleJaponais](https://i2.wp.com/khalifa.tn/wp-content/uploads/2018/12/Capture-d%E2%80%99e%CC%81cran-2018-12-09-a%CC%80-1.11.17-AM.png?resize=283%2C100&ssl=1)<figcaption>I am a student</figcaption>

That’s it.

The post [日本語を学ぶ：私のコツ](https://khalifa.tn/%e6%97%a5%e6%9c%ac%e8%aa%9e%e3%82%92%e5%ad%a6%e3%81%b6%ef%bc%9a%e7%a7%81%e3%81%ae%e3%82%b3%e3%83%84/) appeared first on [C.Khalifa](https://khalifa.tn).
A chrome extension to help you feel good about your Github profile
Tags: github, chromeextension, javascript
Published: 2019-04-21 16:15:19

[Github Feel Good](https://chrome.google.com/webstore/detail/github-feel-good/boklfjlipjpjjfabepnnnnggcogponmf?hl=en-US) is a chrome extension which helps you feel good about your github profile. The extension increase the count of stars and forks of all of the pinned repositories, followers, total repositories and enhances the contribution graph based on the mode selected. 

There are three available modes:
* Feel Good - Increases the repo count in the range of 100 - 1k. 
* Feel Better - Increases the repo count in the range of 1k - 10k.
* Feel like a Rockstar! - Increases the repo count in the range of 10k - 100k.

Forks count and followers count increase in the range of 30 - 70% of the increased stars count.

I was looking at the great Sindre Sorhus' github [profile](https://github.com/sindresorhus) one day and I was jealous of the great work he has been doing in the open source community. And not to forget, the stars, forks count and the contribution graph of his profile. So the Github Feel Good extension was born. 

This is a just fun extension and not intended to instil false success in ones mind. The extension injects some javascript code into your browser and increases these counts and nothing is changing in your actual Github profile (obviously :P).

## How to use
* Install the [chrome extension](https://chrome.google.com/webstore/detail/github-feel-good/boklfjlipjpjjfabepnnnnggcogponmf?hl=en-US) and enable it by clicking on `Disabled` button.

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

* Select one of the three available modes. By default Feel Good is selected.

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

* Open your Github profile and see the changed numbers.

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

* You can disable it anytime by clicking on `Enabled` button.

Note that you need to be logged in for this extension to work. Please feel free to report any issues you find [here](https://github.com/sunilkumarc/github-feel-good/issues).

Product Hunt [release](https://www.producthunt.com/posts/github-feel-good).

If you like the extension, please support my work by [donating](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=E3SVXQJDA2GYJ).
You can find the source code [here](https://github.com/sunilkumarc/github-feel-good).

Let me know what you think about the extension in comments!
Angry Chickens: Easter slingshot game - 130 lines of easy JavaScript
Tags: javascript, tutorial, programming, touchscreen
Published: 2019-04-21 15:21:14

---
title: Angry Chickens: Easter slingshot game - 130 lines of easy JavaScript
published: true
description: 
tags: JavaScript, tutorial, programming, touchscreen
---

You may have heard about a game where you shoot birds from a slingshot to destroy targets.
Today let's create a simple version of this game with Easter chickens playing the main role and Easter bunnies being the victims.
You can play it with a mouse or touch devices. Try it at top of this page!
One line of code is an 'Easter Egg' (an undocumented feature) - can you find it?

The full code is here:

http://slicker.me/javascript/angry.htm

https://thepracticaldev.s3.amazonaws.com/i/jcr5u80z2ocixsnz2j26.png