teleren/devto huggingface dataset:
JavaScript Fundamentals 101: Prototypal Inheritance
Tags: prototypalinheritance, codenewbie, javascript
Published: 2019-12-25 00:45:31



Prototypal inheritance is a unique feature in JavaScript. Each object in JavaScript has a private property which holds a link to another object called its prototype. So in a sense, if it is not stated that your dad has brown eyes(Assuming a dominant trait is brown eyes), we can infer that he has brown eyes if your grandpa has documented that he has brown eyes by prototypal inheritance.

![](https://media.giphy.com/media/l1gEPenINuWe2gDsSB/giphy.gif)


To set and get prototypes of objects, it would look like so:

```javascript
Object.getPrototypeOf()

Object.setPrototypeOf()

__proto__

//For the sake of simplicity, we'll use __proto__ to set and get our prototypes

```

Let's use the example of your grandpa, your dad and you. Grandpa's family name is Nguyen:

```javascript
let nguyen = {
  brownEyes: true,
  speaksVietnamese() {
    console.log("Chao ban!")
  }

};
let daddy = {
  blackHair: true
};

daddy.__proto__ = nguyen;

// Daddy has a few properties now, one by declaration, one by inheritance and he can inherit functions from grandpa too:
console.log(daddy.brownEyes); // true (**)
console.log(daddy.blackHair); // true
daddy.speaksVietnamese(); // "Chao ban!"

```

This chain of inheritance can continue to extend, as long as it doesn't loop. Let's add ourselves into the mix:

```javascript
let myself = {
  nextGeneration: 2.0,
  __proto__: daddy
};

console.log(myself.brownEyes); // true (**)
console.log(myself.blackHair); // true
myself.speaksVietnamese(); // "Chao ban!"

```

ECMAScript 2015 introduced a new set of keywords implementing classes. The new keywords include class, constructor, static, extends, and super. We can get into this on a later blog!

I hope that helps simplify prototypal inheritance for you! Please let me know if you have any questions or comments!




sources included:

https://javascript.info/prototype-inheritance

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain
Load WordPress Posts in React
Tags: codepen
Published: 2019-12-25 00:33:57

<p>In an attempt to show as simple of a React app as possible, we're stealing Chris Coyier's example. I wanted to show an example using WordPress post data.</p>

<p>If you fork this Pen, you can swap out the URL from Post Status to your own website, if it's running v2 of the WordPress REST API.</p>

<p>The author and featured image data is made available thanks to the ?_embed query string, which adds additional information to the return data: author, media, terms, and comments are all included, for example.</p>

{% codepen https://codepen.io/mjefferson/pen/abzwmgj %}
How to write a programming language prerequisite.
Published: 2019-12-25 00:17:24

So every time I have made any progress with a parser, that's the 2nd part of your compiler / interpreter, I have made sure that I am reasonably drunk. Your going to want to drink atleast 2 beers before attempting to write a language, this also prevents the feeling of "why should I write this thing" because yes we have already got several thousand other languages and only 1% actually make it to daily usage.

Know your goals, my language takes two popular languages and smooshes them together, Jess is designed to make CSS the sole owner of styling code including JavaScript.

Make sure you have time, this is not going to be easy. You will learn a tone about your daily language but it might mean learning some new languages too. So far I have picked up Rust, Zig (♥️), C++, C and AssemblyScript, all for a Wasm backend, I am trialing them all not because I like one over another, I am trying to measure how productive I could be in an hour, what are the pros and cons of my choice.

What does your language syntax look like 👽👾, should it fit the same style developers are accustomed too.

Be prepared to forget about good coding standards, just get it done and tested then back track.

Merry Christmas!
How to Install Python 3.8 on Ubuntu
Tags: python, linux, ubuntu
Published: 2020-03-24 14:14:10

---
title: How to Install Python 3.8 on Ubuntu
published: true
date: 2019-12-25 00:00:00 UTC
tags: python, linux, ubuntu
canonical_url: https://tech.serhatteker.com/post/2019-12/how-to-install-python38-on-ubuntu/
---

This brief tutorial shows how to install and configure Python 3.8 on Ubuntu.

There are 2 methods to install python on Ubuntu. I prefer first method and
strongly recommend that but it depends on developer's taste.

## Method 1: Install It From Source Code
I prefer this method since I'd rather always go to source, whether it is
documentation for an API or installing something.

Out of the box default python version for Ubuntu 18.{04/10} is `python 3.6` and for Ubuntu 19.{04,10} is `Python 3.7`.  As now, `Python 3.8.1` is the lastest stable version released on Dec 18, 2019. If you find a later version on the site, you can download it instead.

You can find all released python versions in this link: [Python Versions](https://www.python.org/downloads/)

---
In order to install from source code we need to download the installer file and run the executable.

Before installing python, you must first install some required packages that are needed to build python from source. Maybe you have already installed them. However to get these packages installed, run the commands below:

```bash
$ sudo apt update
$ sudo apt upgrade
$ sudo apt dist-upgrade
$ sudo apt install build-essential zlib1g-dev libncurses5-dev libgdbm-dev libnss3-dev libssl-dev libreadline-dev libffi-dev wget
```

Now create a temporary directory and download the python source code:

```bash
$ mkdir ~/tmp
$ cd ~/tmp
$ wget https://www.python.org/ftp/python/3.8.1/Python-3.8.1.tgz

```

After downloading the package, run the commands below to extract the file and configure the python:

```bash
$ tar -xvzf Python-3.8.1.tgz
$ cd Python-3.8.1
$ ./configure
```

To install the python:

```bash
$ sudo make altinstall
```

Do not use the standard `make install` as it will overwrite the system's default `python3 binary` —`/usr/bin/python3`. Since it will probably make a mess of your OS. However it is your choice again.

After `make altinstall`, python should be installed and ready to use.

To test if python is installed and ready to use, run the commands below

```bash
$ python3.8 --version
```

You should see an output similar to the one below:

```bash
Python 3.8.1
```

## Method 2: Installing Python via PPA
If you want to get the latest version of Python quckly installed and get future updates automatically, you can install it from the below third-party PPA repository.

First install Ubuntu software properties package if it’s not already installed on your system.

```bash
$ sudo apt update
$ sudo apt install software-properties-common
```

After that run the commands to add the PPA.

```bash
$ sudo add-apt-repository ppa:deadsnakes/ppa
```

Finally, run below to install Python 3.8

```bash
$ sudo apt update
$ sudo apt install python3.8
```

You can check as below:

```bash
$ python3.8 --version
Python 3.8.1
```

OK, All done!
Exporting highlights and annotations from a Kobo Aura
Tags: tools, productivity
Published: 2020-01-04 06:08:04

---
title: Exporting highlights and annotations from a Kobo Aura
published: true
date: 2019-12-25 00:00:00 UTC
tags: tools, productivity
canonical_url: https://www.ankursheel.com/blog/exporting-highlights-and-annotations-from-a-kobo-aura
description: Exporting annotations/highlights from a Kobo can be a pain. Luckily, there is a setting which you can use to easily export them to a .txt file.
---

I read a lot of books on my Kobo Aura and I tend to write my own annotations or highlight interesting takeaways. Exporting them manually to my laptop is a pain. Luckily, there is a way that we can export it to a text file.

## Steps

- Plug in the Kobo eReader.
- Open the file **_Kobo eReader.conf_** in a text editing program. Its located in the **_.kobo/Kobo_** folder on the KoboReader drive.
- Add the following code to the file at the bottom

```ini
[FeatureSettings]
ExportHighlights=true
```

- Save the file. Make sure the extension is _.conf_ and not _.txt_.
- Safely eject your Kobo e-reader from the computer.

Now when you long-press the menu of a book will have an extra option, **“Export highlights”**.

Using this will prompt you for a file name and export the annotations to a file(with the specified name) in the root directory of the device.
My first month with React
Tags: react, javascript, node, nextjs
Published: 2019-12-24 23:39:37

# <center>What is this about?</center>

 One month ago, at 24/11/2019, I was talking with my client in which road his web application should go. Giving him pointers and asking what he thinks about it. Then I have talked with him about the React and NextJS, telling that for his application it would be the ideal — it's a website about analise of stocks & assets with a community to interact. Then we decided to choose this two frameworks.

 However, I never have used this two frameworks before on my life — of course, I have told him about it, that it would be the first time of me using it, he agreed and told me that trust me. Then, I went to battle.

 My background with Javascript was pure Javascript + NodeJS (and his several possibilites). Never ever used a framework before xD. But I was not afraid of trying it out, my last two years was pure javascript, so I decided to "take on ship".


<hr>

# <center>First week</center>

 It was everything so confuse, I mean, the whole concept of using both 'html' with javascript and so on. I was very lost, then I have did what every developer should do: be friend of the docs of both frameworks and taking a look at several codes on projects over GitHub, trying to understand the concepts and so on.


# <center>Second week</center>

 I was stuck trying to understand the React Hooks and how to make the 'ui-library' of the Material-UI, works fine with NextJS. Then I went to understand about the 'initialProps' and how works the lifecycle of React and NextJS


# <center>Third week</center>

 After create some pretty small projects to practice what I have learned, I had the feel that was about time to start the big project with this two frameworks. 
Over this week I have created 4 pages, but I will only show up one because the project isn't complete and I cannot show up everything yet.

![First Version](https://thepracticaldev.s3.amazonaws.com/i/xaoboaoimbj7uxqyn2x0.gif)


# <center>Last Week</center>

 Well, I think I have enought confidence to go on with the project on both frameworks. Of course, I could have choose to work on my comfort zone, with pure Javascript, however... I know that I'm not coding to myself, it will have a lot of coders on future and I want to make easy for them xD. Then, let's go on...

<hr>

# <center>What I've learned</center>

* It's fun to get out of your comfort zone 
* Take it as law, at least that your project is just for fun and for yourself, always code thinking that others will look at your code and develop over your lines.
* At first everything is confuse and it's normal to be. Then, don't take it at your heart, if you are feeling stuck with something, go out for some hang out, running, sport or make stuffs that you enjoy. Then, after it, go back at your project. You will feel that what previous you thought of being a big mountain, hard to fight out, was a little stone on your shoes worths of a good laugh. So go, go laugh of yourself, it will make you more healthly.


![Second Version](https://thepracticaldev.s3.amazonaws.com/i/pp13uqunmyw2hslhni8n.gif)
Top 5 DEV Comments from the Past Week
Tags: bestofdev
Published: 2019-12-24 22:17:11

---
title: Top 5 DEV Comments from the Past Week
published: true
description: Highlighting some of the best DEV comments from the past week.
tags: bestofdev
cover_image: https://res.cloudinary.com/practicaldev/image/fetch/s--7VrAA2ln--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://thepracticaldev.s3.amazonaws.com/i/qmb5wkoeywj06pd7p8ku.png
---

This is a weekly roundup of awesome DEV comments that you may have missed.  You are welcome and encouraged to boost posts and comments yourself using the **[#bestofdev](/t/bestofdev)** tag.

@murrayvarey got the **[What's Been Your Biggest "Why Didn't Someone Tell Me" Discovery?](https://dev.to/murrayvarey/what-s-been-your-biggest-why-didn-t-someone-tell-me-discovery-5gpg)** thread going with a great time-saving shortcut. 
 I definitely make use of this _all day long_ in my daily writing routine:
{% devcomment j63j %}

@cecilelebleu shares their advice in **[How do you learn to talk about your work?](https://dev.to/ben/how-do-you-learn-to-talk-about-your-work-1am3)**:
{% devcomment j5mi %}

@rolibkk adds a useful comment to **[Why I don't use Bootstrap anymore.](https://dev.to/codedgar/why-i-don-t-use-bootstrap-anymore-b8)**, contextualizing when it may be appropriate to use Bootstrap vs. avoid it:
{% devcomment j6al %}

@lallenfrancisl chimes in to **[What is your Favorite Browser?](https://dev.to/devmount/what-is-your-favorite-browser-210l)** to offer their vote, and to also name all of the browsers in the post's cover image:
{% devcomment j6j9 %}

Finally, @quii jumps into the **[13 ways the Internet is broken - #9 will shock you!](https://dev.to/errietta/13-ways-the-internet-is-broken-9-will-shock-you-3imd)** thread to talk about the unfortunate decline of RSS:
{% devcomment j7i0 %}

See you next week for more great comments ✌
Radial PageView Transitions With Flutter
Tags: flutter, pageview, animation, transition
Published: 2019-12-24 21:49:27

Hi,

This is my first post here and just a quick share.

I have recently taken up flutter for a project. This Radial  Transition, implemented for PageViews in Flutter, is a product of the work done on the prototype for that project (works with flutter web):

![Radial PageView Transition](https://thepracticaldev.s3.amazonaws.com/i/xvyrcunvhxklf4qjgkef.gif)

For the scope of this post, I used the PageView.builder method as below:

{% gist https://gist.github.com/ashishlijhara/b4f363b7a61d8b169fa2ee0145f8f862 %}

I hope it helps you guys!
How to create an Android custom keyboard using kotlin
Tags: android, kotlin, customkeyboard, androiddev
Published: 2019-12-24 21:33:56

Today I will show you how easy it is to create your own customize Android Keyboard using kotlin. Just follow the steps carefully and Boom 💥💥 you have created your own.

Let's do this 😻👏😍😊

###Step 1: Disable android OS keyboard

The code below will hide the Android OS keyboard 

```
// method to disable android soft keyboard
window.setFlags(
    WindowManager.LayoutParams.FLAG_ALT_FOCUSABLE_IM,
    WindowManager.LayoutParams.FLAG_ALT_FOCUSABLE_IM)

```

###Step 2: Draw the wireframe

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/zqry926sdr95166hlxo6.jpg)

###Step 3: Design the mock-up

you can use any mock-up tool of your choice example Figma, Adobe XD, Uxpin

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ldtdscwwtc3v9xn2pvge.jpg)


###Step 4: Design the layout

In designing the layout you use the power of material design to make your app look presentable and easy to understand.

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

###Step 5: Add function to your code

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

###Step 6: Wrap up and build it

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

{% youtube WJWyeDf4ANw%}

Below is the link to the project in this article, please if you find any error or think I missed something pass your information in the comment section. Thanks, and Happy Coding

{% github wise4rmgod/Custom_Keyboard %}
Landing Page Demo
Tags: codepen, html, javascript, css
Published: 2019-12-24 21:06:46

---
title: Landing Page Demo
published: true
tags: codepen, html, JS, CSS
---


Building out a landing page for a side project. Please drop comments, constrictive criticism, concerns below. 

{% codepen https://codepen.io/njericooper/pen/GRgEqbX %}


Preview the live version [here](https://njeri.codes/deals.html)


{% twitter 1209581471599599616 %}

Also, happy holidays 🎄 :christmas_tree:
Python configs for humans.
Tags: python, configs, github
Published: 2019-12-24 19:08:46

Hello everybody!

Have you got troubles with configs? I have. And it's problem for me.

I have created simple and awesome library for configs parsing.

You can install it with pip:

```sh
pip install betterconf
```

Simple config:

```python
from betterconf import field, Config

class MyConfig(Config):
    my_var = field("my_var")

cfg = MyConfig()
print(cfg.my_var)
```

And.. run it!

```sh
my_var=1 python our_file.py
```

Also you can find it at [github](https://github.com/fscdev/betterconf)

Happy coding!
Symfony Workflow alternative in NodeJS?
Tags: node
Published: 2019-12-24 19:03:52

---
title: Symfony Workflow alternative in NodeJS?
published: true
description: I am looking for js state machine library that can save state to database.
tags: Node
---

I am looking for js state machine library that can save state to database.

So far I found lots of state machines in js ([machina-js](http://machina-js.org/), [javascript-state-machine](https://github.com/jakesgordon/javascript-state-machine), [stately](https://github.com/fschaefer/Stately.js/), [xstate](https://github.com/davidkpiano/xstate)), but those are pure libraries without any object abstractions around it.

In [Symfony Workflow](https://symfony.com/doc/current/workflow.html) you can configure Entity and its property. Is there any node framework or library that provides some conventions and skeleton for workflows and state machines?
Mutable Arrays in Rust
Tags: rust, beginners
Published: 2019-12-24 18:55:52

I want to discuss briefly about mutable arrays in rust and how i learnt it the hard way. I come from a C# background so creating an array of integers, iterating over the array and changing the values is a cake walk.

In C#-

```c#
    int[] m_h = { 9,5,1,8,2};//or
    int[] m_h_new = new int[5] { 5,9,10,3,5};
    //that simple
    foreach(int i in m_h)
    {
        m_h[i] += 1; //increment each element of the array by 1
    }
```

However it is not the same in rust, even though it is simple, it took sometime for me to understand the concepts.

Then I tried something similar in rust-

```rust
//create a mutable array of 5 elements
    let mut m_h:[i32;5]=[9,3,2,8,1];
    //now since I set it mutable i guess this should work...
    //enumerate() returns a tuple with the (index, value) of each element of the array
    for (i,h) in m_h.iter().enumerate(){
        //however this fails
        m_h[i]=h+1;//cannot assign to m_h[_] as it is borrowed
        //well what i cant understand is if i made it mutable why cant i change it??
    }
```

I did some googling and found that `iter()` returns a reference where as `iter_mut()` returns a mutable reference.

Therefore the correct way to iterate an array and modify its contents is-

```rust
//create a mutable array of 5 elements
    let mut m_h:[i32;5]=[9,3,2,8,1];
    for (i,h) in m_h.iter_mut().enumerate(){
        //m_h[i]=h+1; this syntax wont work here :)
        //wait hold on what & why?? i cant do this too??
        //well of course iter_mut returns a reference so inorder to modify it we need to dereference it like so
        *h=*h+1;//this is the correct syntax here
    }
```

Also the most straight forward way to iterate an array and modify context is just using a range instead of `iter()` or `iter_mut()`-

Like so-

```rust
for i in 0..m_h.len(){
    m_h[i]=m_h[i]+1;
    println!("{}",m_h[i]);
}
```

Simple isn't. I hope it was worth the read and hope it was helpful!
Making a Shiv App - Building SaaS #20
Tags: python, django, saas
Published: 2019-12-24 18:02:39

{% youtube n2q1SxL4-mY %}

In this episode, we took our Python package from the previous episode and bundled it together with the Python dependencies using a tool called Shiv from LinkedIn.

Show notes for this stream are at [Episode 20 Show Notes](https://www.mattlayman.com/building-saas/making-a-shiv-app/).

To learn more about the stream, please check out [Building SaaS with Python and Django](https://www.mattlayman.com/building-saas/).
Are you tired of Bootstrap? Get started with Metro 4: Free & Opensource
Tags: css, javascript, opensource
Published: 2019-12-24 17:59:43

I personally like metrojs. Wonderfully crafted in Ukraine.

**So what is it?**

Are you tired of Bootstrap? Get started with Metro 4, the popular framework for building responsive, mobile-first sites in Metro style, with the Metro CDN and a template starter page.


Sleek, intuitive, and powerful front-end framework for faster and easier web development. Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style.

Quick start
Looking to quickly add Metro 4 to your project? Use Metro CDN, provided for free by the folks at KeyCDN.

`<link rel="stylesheet" href="https://cdn.metroui.org.ua/v4.3.2/css/metro-all.min.css">`

*Some Examples:*

Official examples visit [here](https://metroui.org.ua/examples.html)

*A desktop UI : Yes a desktop UI by Metrojs*

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

* A Datatable UI: Supereasy by Metro:*

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

* Admin Panel: in just an hour* :)

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/b430up8lslaoy6i5rlju.jpg)

Here is Github Resporitory:

{% github olton/Metro-UI-CSS %}



Please also check my previous posts regarding creating your cloud service like digital ocean or google cloud. [Part 1](https://dev.to/manishfoodtechs/creating-your-cloud-infrastructure-like-google-cloud-and-digital-ocean-from-scratch-part-1-3gnm) and  [Part-2](https://dev.to/manishfoodtechs/creating-your-cloud-infrastructure-like-google-cloud-and-digital-ocean-from-scratch-part-2-5f7f) and [Part-3](https://dev.to/manishfoodtechs/creating-your-cloud-infrastructure-like-google-cloud-and-digital-ocean-from-scratch-part-3-coding-stuff-20eo) . Also most important listening your VMs on external IPs [here -4](https://dev.to/manishfoodtechs/networking-is-easy-connecting-multiple-vms-servers-containers-devices-on-single-external-ip-in-one-command-139a)

In Part-3 we have also seen how to install opennebula. Opennebula is an alternative to openstack/ cloudstack.


I hope you people like the above article and learned something.

You are most welcome to join my team [ form for joining ](https://forms.gle/pSCALuEWHus3pg9F6).

Contact email: Manishfoodtechs@gmail.com. 

If you have any problem, our team is also engaged in professional consultancy and delivery.

Don't forget to Follow, like or tag me :).