Klise Theme

Cara ribet memperbarui forked repo

2020-01-29T01:00:00+07:00

Berawal dari saya pengen memperbarui repo yang tua dari suatu organisasi, niatnya pengen rumat ulang nih, ternyata dari orginal reponya ada update, sekalian buat artikel deh, lebih kurang gambaranya seperti ini.

Fig 1. Gambaran ribetnya.

Ada dua cara untuk memperbarui forked repository menggunakan web interface yang disediakan oleh github tapi ribet, atau melalui terminal yang lebih ribet lagi.

Melalui Github (boring way) 💻

Buka repo yang hasil fork di Github.
Klik Pull Requests di sebelah kanan, lalu New Pull Request.
Akan memunculkan hasil compare antara repo upstream dengan repo kamu(forked repo), dan jika menyatakan “There isn’t anything to compare.”, tekan link switching the base, yang mana sekarang repo kamu(forked repo) akan dibalik menjadi base repo dan repo upstream menjadi head repo.
Tekan Create Pull Request, beri judul pull request, Tekan Send Pull Request.
Tekan Merge Pull Request dan Confirm Merge.

* pastikan kamu tidak merubah apapun pada forked repo, supaya melakukan merge secara otomatis, kalo tidak ya paling2 konflik.

Melalui terminal ⌨️

Tambahkan remote alamat repository yang aslinya disini tak beri nama upstream., ganti ORIGINAL_OWNER dan ORIGINAL_REPO dengan alamat repo aslimu.

$ git add remote upstream git@github.com:ORIGINAL_OWNER/ORIGINAL_REPO.git
$ git remote -v
> origin    git@github.com:piharpi/www.git (fetch) # forked repo
> origin    git@github.com:piharpi/www.git (push) # forked repo
> upstream    git@github.com:ORIGINAL_OWNER/ORIGINAL_REPO.git (fetch) # upstream repo / original repo
> upstream    git@github.com:ORIGINAL_OWNER/ORIGINAL_REPO.git (push) # upstream repo / original repo

Checkout ke local branch master.

$ git checkout master
> Switched to branch 'master'

Jika sudah, Merge local repo dengan remote upstream/master.

$ git merge upstream/master

Terakhir push local repo ke remote origin.

$ git add -A
$ git commit -m "updating origin repo" && git push -u origin master

Selamat mencoba cara ribet ini, semoga bisa dipahami, saya sendiri lebih senang melalui terminal, klo ada yang ribet kenapa cari yang mudah.

Resources

What is a shell? 🐚 adalah kerang ajaib?

2020-01-25T11:58:47+07:00

Dulu Sebelum adanya GUI cara user berinteraksi dengan komputer menggunakan CLI yaitu mengetik baris perintah pada sebuah antarmuka dalam bentuk baris teks seperti 👇.

Fig 1. Terminal emulator, instalasi package dan check service.

Jika kamu pernah menggunakan unix/linux mungkin pernah menggunakan program diatas, bahkan mungkin setiap hari menggunakannya untuk mengeksekusi suatu perintah melalui terminal emulator.

User^[1] tidak bisa secara langsung berkomunikasi dengan sebuah hardware komputer, maka dari itu kita membutuhkan sebuah sistem operasi; Kernel adalah program yang merupakan inti utama dari sistem operasi komputer.

Fig 2. bagan kernel.

Kernel memfasilitasi interaksi antara komponen perangkat keras dan perangkat lunak, berperan untuk menangani permintaan input/ouput dari perangkat lunak, selanjutnya menerjemahkannya ke dalam pemrosesan data untuk diintruksikan ke CPU, sehingga Hardware(cpu, memory, devices) mengerti perintah yang dimaksud dari pengguna.

Ketika kita menginputkan suatu perintah pada terminal emulator, kernel tidak langsung mengerti perintah yang kita ketik, kita membutuhkan suatu interface sebagai perantara menuju kernel yaitu Shell.

Fig 3. bagan komunikasi shell.

Shell adalah sebuah command-line interpreter; program yang berperan sebagai penerjemah perintah yang diinputkan oleh User yang melalui terminal, sehingga perintah tersebut bisa dimengerti oleh si Kernel.

Login shell biasanya ditetapkan oleh local System Administrator ketika pada saat pertama user kamu dibuat, kamu bisa lihat login shell yang sedang kamu gunakan dengan perintah dibawah ini.

$ echo $SHELL
# atau
$ echo $0

Setiap shell mempunyai default prompt. beberapa shell yang paling umum:

$ (dollar sign)   # sh, ksh, bash
% (percent sign)  # csh, tcsh

Terminologi pada shell prompt

Shell prompt adalah tempat dimana kita menuliskan suatu perintah, berikut adalah terminologinya ini membantu, jika kamu ingin mengetahui bagian-bagianya.

Fig 4. bagian-bagin dari shell prompt.

Dibawah ini salah satu contoh perintah sederhana untuk menampilkan sebuah arsitektur CPU komputer yang sedang saya gunakan.

Fig 5. menampilkan informasi tentang arsitektur CPU.

Dari perintah yang contohkan, ketika user mengetikan suatu inputan perintah di terminal dan menekan ENTER, maka shell akan mengubah perintah user menjadi bahasa yang bisa dipahami oleh kernel, dan Kernel menerjemahkannya ke dalam pemrosesan data untuk diintruksikan ke Hardware sehingga menghasilkan output yg sesuai dengan perintah user.

Shell mempunyai beberapa macam dan turunan, berikut yang paling umum.

Fig 6. evaluasi shell dari tahun ke tahun.

Sedikit penjelasan dari gambar diatas.

Bourne shell sh Dikembangkan oleh Stephen Bourne di Bell Labs, yang kala itu sebagai pengganti Thompson shell(diciptakan Ken Thompson), banyak sistem unix-like tetap memiliki /bin/sh—yang mana menjadi symbolic link atau hard link, bahkan ketika shell lain yang digunakan tetap sh adalah sebagai dasarnya, sebagai kompatibilitas perintah.
Korn shell ksh Unix shell yang dikembangkan oleh David Korn di Bell Labs, inisialiasi pengembangan ini berdasar pada source code Bourne shell, namun juga memiliki fitur csh dan sh, pengembanganya pun pada saat saya menulis ini pun terus terawat.
Bourne again shell bash adalah proyek ini open source GNU project memilki kompatibel dengan sh yang menggabungkan fitur penting dari ksh dan csh, dan menjadi salah satu shell yang paling umum digunakan (umumnya menjadi default shell login Linux dan Apple’s macOS Mojave).
Z shell zsh ini mempunyai wadah komunitasnya disebutnya “Oh My Zsh”, plug-in dan theme zsh bisa kita temukan di komunitas ini, saya saat ini menggunakan zsh, shell ini juga menjadi default dari sistem operasi macOS Catalina, yang menggantikan bash.
friendly interactive shell fish yah sesuai dengan deskripsi di web nya, menurut saya shell ini fun banget, fitur yang saya sukai dari shell ini autosuggestions, dan konfigurasi yang mudah melalui web based.

Masih banyak yang belum dijelaskan pada tulisan ini jika masih tertarik, baca lebih banyak dan juga komparasinya masing-masing shell.

Jika kamu tertarik untuk mengubah default shell login pada sistem operasi, kamu bisa menginstall dengan cara mengikuti didokumentasi/cara penginstallan dimasing-masing shell disini saya tidak membahas karena distro yang kita pakai mungkin berbeda-beda.

Untuk menjadikan default shell login pada OS bisa menggunakan perintah ini.

# command
$ sudo chsh [options] [LOGIN]

# contoh penggunaan
$ sudo chsh -s /user/bin/zsh harpi
# mengubah default shell user harpi menjadi zsh shell.
$ reboot

# atau kamu juga bisa mengubah file /etc/passwd dan edit secara manual user shellnya.
# jika masih bingung manfaatkan perintah man untuk melihat manual page.
$ man chsh

Terakhir untuk tulisan ini, shell memilki berbagai macam, pilihlah shell yang sesuai dengan keinginanmu untuk menunjang produktivitas dan sesuaikan dengan kebutuhan, terlalu banyak plugin dan kebingungan memilih tema itu buruk 😁.

Terimakasih sudah baca, penulis menerima kritik dan saran.

Notes

^[1] Manusia yang mengoperasikan dan mengendalikan sistem komputer.

Resources

How this site was born 👶

2018-09-28T09:45:47+07:00

The website was made using Jekyll the one of open source static sites generator, and using my own simple theme, I called klisé.

All the services are free, source code the site was placed on my github repository and intergration with ~~netlify~~ service, another service that you can use is github page for hosting your own static site.

Let’s do this

So, before we start create a site, you need some tools, you can self paced for how to installing each tools, on this guide i’m just want to show you how to install jekyll and deploying in netlify, but make sure you have each tools below.

Prerequisites

Requirements before we doing magic show.

Ruby programming language
Git (version control)
Netlify and Github account
Bundler

Installation

First, you need some SSG, there are many kind ssg, but in case i’m using Jekyll cause i’m already familiar with it, open your terminal and type command on below

$ bundle install jekyll # installing jekyll in your machine
$ jekyll new my-site && cd my-site # create new jekyll project
$ jekyll s # run jekyll server

Now, jekyll is running on your local machine, open your browser and go to localhost:4000 is default address from jekyll, press CTRL + C to stop the jekyll server.

Adding remote repository

Before we adding remote repository, you must have github repository, if already have repository, just add github remote address to your local folder, with the following commands

$ git init # initializing project folder
$ git remote add origin https://github.com/YOUR-USERNAME/YOUR-REPO.git # change UPPERCASE with your own!
$ git add -A && git commit -m "Initialize" && git push -u origin master # push code to github

Now check your github repository, make sure the files is uploaded correctly.

Deploying to netlify

Go netlify dashboard, and following this step.

click new site from git, then choose Github.
then choose your repository where is the jekyll sources uploaded.
netlify smart enough to configuring, we just need’s are hosting’s are hosting’s are hosting’s are hosting to click Deploy site button.

Wait for moment, and voila..! your site’s are hosting and using .netlify.com tld, if your website wants to look professional, just buy a domain from your favorite domain store. or if you the first time, I advice using namecheap.com(isn’t sponsor) *based on my experienced it provides good service and have various TLDs.

So, what you waiting for, just create your own website for free.

Python Notes from Intro to Machine Learning

2018-04-14T10:00:00+07:00

This article is for Demo purpose

The article was originally on this repo

I rarely use Python. I only have one repository at Github that is written in Python: iris-flower-classifier. And it was written two years ago!

A few days ago I took this free course from Udacity: Intro to Machine Learning. The machine learning related codes are quite easy to grasp since it simply uses the scikit-learn modules. But most of the supporting Python modules that are provided by this course were like a black-box to me. I had no idea how to download a file in Python or what’s the difference between a list, a tuple and a dictionary.

That’s why I decided to read all of the provided Python modules and implement it myself. I ended up refactor most of the code so it’s easier to understand: github.com/risan/intro-to-machine-learning.

So here are some notes and snippets of Python that I’ve been collecting so far (I’m not even halfway through the course 😝). Also, note that the codes here are still using Python version 2.7.

Modules Classes and Functions

Main Entry File

Suppose our Python project is stored in /foo/bar directory. And this application has one file that serves as the single entry point. We can name this file __main__.py so we can run this project simply be referencing its directory path:

# Referencing its directory.
$ python /foo/bar

# It's equivalent to this.
$ python /foo/bar/__main__.py

Import Python Module Dynamically

Suppose we would like to import a Python module dynamically based on a variable value. We can achieve this through the __import__ function:

module_name = "numpy"

__import__(module_name)

Multiple Returns in Python

In Python, it’s possible for a function or a method to return multiple values. We can do this simply by separating each return value by a comma:

def test():
    return 100, "foo"

someNumber, someString = test()

Importing Modules Outside of the Directory

In order to import a module from outside of the directory, we need to add that module’s directory path into the current file with sys.path.append. Suppose we have the following directory structure:

|--foo
| |-- bar.py
|
|-- tools
| |-- speak_yoda.py

If we want to use the speak_yoda.py module within the bar.py, we can do the following:

# /foo/bar.py
import os

# Use relative path to tools directory.
sys.path.append("../tools")

import speak_yoda

However, this won’t work if we run the baz.py file from outside of its foo directory:

# It works inside of the /foo directory.
$ cd /foo
$ python bar.py

# But it won't work if the code runs from outside of /foo directory.
$ python foo/bar.py

To solve this problem we can refer to the tools directory using its absolute path.

# /foo/bar.py
import os
import sys

# Get the directory name for this file.
current_dirname = os.path.dirname(os.path.realpath(__file__))

# Use the absolute path to the tools directory
tools_path = os.path.abspath(os.path.join(dirname, "../tools"))
sys.path.append(tools_path)

import speak_yoda

Output

Print The Emojis

It turns out you can’t just print an emoji or any other Unicode characters to the console. You need to specify the encoding type beforehand:

# coding: utf8

print("😅")

Pretty Print

We can use the pprint module to pretty-print Python data structure with a configurable indentation:

import pprint
pp = pprint.PrettyPrinter(indent=2)

pp.pprint(people)

Working with Pathname

Read more about pathname manipulations in the os.path documentation.

Get Filename From URL

Suppose the last segment of the URL contains a filename that we would like to download. We can extract this filename with the following code:

import os
from urlparse import urlparse

url = "https://example.com/foo.txt"

url_components = urlparse(url)

filename = os.path.basename(url_components.path) # foo.txt

Check if File Exists

To check whether the given file path exists or not:

import os

is_exists = os.path.isfile("foo.txt")

Create a Directory if It Does Not Exists

To create a directory only if it does not exist:

import os
import errno

try:
    os.makedirs(directory_path)
except OSError, e:
    if e.errno != errno.EEXIST:
        raise

Working with Files

Downloading a File

We can use the urllib module to download a file in Python. The first argument is the file URL that we would like to download. The second argument is the optional filename that will be used to store the file.

import urllib

urllib.urlretrieve("https://example.com/foo.txt", "foo.txt")

Extracting Tar File

There’s a built-in tarfile module that we can use to work with Tar file in Python. To extract the tar.gz file we can use the following code:

import tarfile

# Open the file.
tfile = tarfile.open("foo.tar.gz")

# Extract the file to the given path.
tfile.extractall(path)

We can pass the mode argument to the open method. By default, the mode would be r—reading mode with transparent compression. There are also other mode options that we can use:

r:gz: Reading mode with gzip compression.
r:: Reading mode without compression.
a: Appending mode without compression.
w: Writting mode without compression.
Checkout other available options in tarfile documentation.

Working with List

Generate a List of Random Numbers

Use the for..in syntax to generate a list of random numbers in a one-liner style.

import random

# Initialize internal state of random generator.
random.seed(42)

# Generate random points.
randomNumbers = [random.random() for i in range(0, 10)]
# [0.6394267984578837, 0.025010755222666936, 0.27502931836911926, ...]

Pair Values from Two Lists

The built-in zip function can pair values from two lists. However, this zip function will return a list of tuples instead. To get a list of value pairs, we can combine it with for..in syntax:

coordinates = [[x, y] for x,y in zip([5,10,15], [0,1,0])]
# [[5, 0], [10, 1], [15, 0]]

Splitting a List

We can easily split a list in Python by specifying the starting index and it’s ending index. Note that the ending index is excluded from the result.

We can also specify a negative index. And also note that both of these indices are optional!

a = [0,1,2,3,4,5]

a[0:3]  # 0,1,2
a[1:3]  # 1,2
a[2:]   # 2,3,4,5
a[:3]   # 0,1,2
a[0:-2] # 0,1,2,3
a[-2:]  # 4,5
a[:]    # 0,1,2,3,4,5

Filtering a List In One Line

We can easily filter a list in Python by combining the for..in and the if syntax together:

numbers = range(1,11)

# Filter even numbers only.
[numbers[i] for i in range(0, len(numbers)) if numbers[i] % 2 == 0]
# [2, 4, 6, 8, 10]

Sorting a List in Ascending Order

In Python, we can sort a list in ascending order simply by calling the sort method like so:

people = ["John", "Alice", "Poe"]
people.sort()
print(people) # ["Alice", "John", "Poe"]

Using Filter Function with a List

Just like its name, we can use the filter function to filter out our list:

numbers = range(1, 11)

even_numbers = filter(lambda number: number % 2 == 0, numbers)
# [2, 4, 6, 8, 10]

We can break the above statement into two parts:

lambda number: statement: The first part is the function that we would like to run to every item on the list. number is the variable name we’d like to use in this function to refer to a single item from the numbers list. The following function body must evaluate to truthy/falsy value—falsy means the current item will be removed from the final result.
numbers: The second parameter is the list that we’d like to filter.

Using Reduce with a List of Dictionary

We can use the reduce function to calculate the total of a particular key in a list of a dictionary:

items = [{value:10}, {value:20}, {value:50}]

# Calculate the total of value key.
totalValues = reduce(lambda total, item: total + item["value"], items, 0) # 80

It can be broken down into 4 parts:

lambda total: It’s the variable name that we’d like to use in the function body to refer to the carried or the accumulative value that will finally be returned.
item: statement: item is the name of the variable we’d like to use within the function body to refer to the single item in the items list. The following function body will be executed in order to define the accumulative value of total for the next iteration.
items: It’s the list of item that we would like to “reduce”.
0: The last parameter is optional and it’s the initial accumulative value for the first iteration.

We can also use this reduce function to find a single item from the list. Here’s an example of code to find the person with the biggest total_payments within the given list of people dictionary.

people = [
    {"name": "John", "total_payments": 100},
    {"name": "Alice", "total_payments": 1000},
    {"name": "Poe", "total_payments": 800}
]

person_biggest_total_payments = reduce(lambda paid_most, person: person if person["total_payments"] > paid_most["total_payments"] else paid_most, people, { "total_payments": 0 })
# {'name': 'Alice', 'total_payments': 1000}

Working with Dictionary

Loop Through Dictionary

We can use the itervalues method to loop through a dictionary:

for person in people.itervalues():
    print(person["email_address"])

We can also use the iteritems method if we want to access the key too:

for person in people.iteritems():
    print(person[0] + ": " + person[1]["email_address"])

Calculate Total of Particular Dictionary Key

Suppose we would like to calculate the total amount of salary key on a people dictionary. We can extract the salary key and use the sum function to get the total:

total_salary = sum([person["salary"] for person in people.itervalues()])

Working with Numpy

Numpy Create Range of Values with The Given Interval

Use the arange method to create an array with an evenly spaced interval.

import numpy as np

np.arange(0, 5, 1)
# array([0,1,2,3,4])

np.arange(1, 4, 0.5)
# array([1. , 1.5, 2. , 2.5, 3. , 3.5])

Numpy Create Coordinate Matrices from Coordinate Vectors

We can use the Numpy meshgrid method to make coordinate matrices from one-dimentional coordinate arrays.

import numpy as np

np.meshgrid([1, 2, 3], [0, 7])
# [
#   array([[1,2,3], [1,2,3]]),
#   array([[0,0,0], [7,7,7]])
# ]

Flatten Numpy Array

When we have a multi-dimensional Numpy array, we can easily flatten it with the ravel method:

import numpy as np

arr = np.array([[1,2], [3,4]])
arr.ravel()
# array([1, 2, 3, 4])

Pairing Array Values with Second Axis

We can use Numpy c_ function to pair array values with another array that will be it’s second axis. Read the numpy.c_ documentation.

import numpy as np

x = [1,2]
y = [10,20]

np.c_[x, y]
# array([1,10], [2,20])

Generate Coordinates Across The Grid

With the knowledge of Numpy arange, meshgrid, ravel and c_ methods, we can easily generate an evenly spaced coordinates across the grid so we can pass it to the classifier and plot the decision surface.

import numpy as np

# Generate an evenly spaced coordinates.
x_points, y_points = np.meshgrid(np.arange(x_min, x_max, step), np.arange(y_min, y_max, step))

# Pair the x and y points.
test_coordinates = np.c_[x_points.ravel(), y_points.ravel()]

Plotting the Data

Plot The Surface Decision

We can pass an evenly spaced coordinates across the grid to the classifier to predict the output on each of that coordinate. We can then use matplotlib.pyplot to plot the surface decision.

import matplotlib.pyplot as plt
import pylab as pl

# Pass coordinates across the grid.
predicted_labels = classifier.predict(test_coordinates)

# Don't forget to reshape the output array dimension.
predicted_labels = predicted_labels.reshape(x_points.shape)

# Set the axes limit.
plt.xlim(x_points.min(), x_points.max())
plt.ylim(y_points.min(), y_points.max())

# Plot the decision boundary with seismic color map.
plt.pcolormesh(x_points, y_points, predicted_labels, cmap = pl.cm.seismic)

The classifier output would be a one-dimensional array, so don’t forget to reshape it back into a two-dimensional array before plotting. The cmap is an optional parameter for the color map. Here we use the seismic color map from pylab module. It has the red-blue colors.

Scatter Plot

We need to separate the test points based on its predicted label (the speed). So we can plot the test points with two different colors.

# Separate fast (label = 0) & slow (label = 1) test points.
grade_fast = [features_test[i][0] for i in range(0, len(features_test)) if labels_test[i] == 0]
bumpy_fast = [features_test[i][1] for i in range(0, len(features_test)) if labels_test[i] == 0]
grade_slow = [features_test[i][0] for i in range(0, len(features_test)) if labels_test[i] == 1]
bumpy_slow = [features_test[i][1] for i in range(0, len(features_test)) if labels_test[i] == 1]

# Plot the test points based on its speed.
plt.scatter(grade_fast, bumpy_fast, color = "b", label = "fast")
plt.scatter(grade_slow, bumpy_slow, color = "r", label = "slow")

# Show the plot legend.
plt.legend()

# Add the axis labels.
plt.xlabel("grade")
plt.ylabel("bumpiness")

# Show the plot.
plt.show()

If we want to save the plot into an image, we can use the savefig method instead:

plt.savefig('scatter_plot.png')

Dealing with Data

Deserializing Python Object

We can use pickle module for serializing and deserializing Python object. There’s also the cPickle—the faster C implementation. We use both of these modules to deserialize the email text and author list.

import pickle
import cPickle

# Unpickling or deserializing the texts.
texts_file_handler = open(texts_file, "r")
texts = cPickle.load(texts_file_handler)
texts_file_handler.close()

# Unpickling or deserializing the authors.
authors_file_handler = open(authors_file, "r")
authors = pickle.load(authors_file_handler)
authors_file_handler.close()

Split Data for Training and Testing

We can use the built-in train_test_split function from scikit-learn to split the data both for training and testing.

from sklearn.model_selection import train_test_split

features_train, features_test, labels_train, labels_test = train_test_split(texts, authors, test_size = 0.1, random_state = 42)

The test_size argument is the proportion of data to split into the test, in our case we split 10% for testing.

Vectorized the Strings

When working with a text document, we need to vectorize the strings into a list of numbers so it’s easier and more efficient to process. We can use the TfidfVectorizer class to vectorize the strings into a matrix of TF-IDF features.

from sklearn.feature_extraction.text import TfidfVectorizer

vectorizer = TfidfVectorizer(sublinear_tf = True, max_df = 0.5, stop_words = "english")
features_train_transformed = vectorizer.fit_transform(features_train)
features_test_transformed = vectorizer.transform(features_test)

Word with a frequency higher than the max_df will be ignored. Stop words are also ignored—stop words are the most common words in a language (e.g. a, the, has).

Feature Selection

Text can have a lot of features thus it may slow to compute. We can use scikit SelectPercentile class to select only the important features.

selector = SelectPercentile(f_classif, percentile = 10)
selector.fit(features_train_transformed, labels_train)
selected_features_train_transformed = selector.transform(features_train_transformed).toarray()
selected_features_test_transformed = selector.transform(features_test_transformed).toarray()

The percentile is the percentage of features that we’d like to select based on its highest score.

This article is for Demo purpose

The article was originally on this repo

React Component with Dot Notation

2018-04-07T23:04:00+07:00

This article is for Demo purpose

The article was originally on this repo

This is my answer to someone’s question on StackOverflow. How can we define a React component that is accessible through the dot notation?

Take a look at the following code. We have the Menu component and its three children Menu.Item:

const App = () => (
  <Menu>
    <Menu.Item>Home</Menu.Item>
    <Menu.Item>Blog</Menu.Item>
    <Menu.Item>About</Menu.Item>
  </Menu>
);

How can we define a component like Menu? Where it has some kind of “sub-component” that is accessible through a dot notation.

Well, it’s actually a pretty common pattern. And it’s not really a sub-component, it’s just another component being attached to another one.

Let’s use the above Menu component for example. We’ll put this component to its own dedicated file: menu.js. First, let’s define these two components separately on this module file:

// menu.js
import React from 'react';

export const MenuItem = ({ children }) => <li>{children}</li>;

export default const Menu = ({ children }) => <ul>{children}</ul>;

It’s just a simple functional component. The Menu is the parent with ul tag. And the MenuItem will act as its children. Now we can use these two components like so:

import React from "react";
import { render } from "react-dom";
import Menu, { MenuItem } from "./menu";

const App = () => (
  <Menu>
    <MenuItem>Home</MenuItem>
    <MenuItem>Blog</MenuItem>
    <MenuItem>About</MenuItem>
  </Menu>
);

render(<App />, document.getElementById("root"));

Where’s the dot notation? To make our MenuItem component accessible through the dot nation, we can simply attach it to the Menu component as a static property. To do so, we can no longer use the functional component for Menu and switch to the class component instead:

// menu.js
import React, { Component } from 'react';

export default const MenuItem = ({ children }) => <li>{children}</li>;

export default class Menu extends Component {
  static Item = MenuItem;

  render() {
    return (
      <ul>{this.props.children}</ul>
    );
  }
}

Now we can use the dot notation to declare the MenuItem component:

import React from "react";
import { render } from "react-dom";
import Menu from "./menu";

const App = () => (
  <Menu>
    <Menu.Item>Home</Menu.Item>
    <Menu.Item>Blog</Menu.Item>
    <Menu.Item>About</Menu.Item>
  </Menu>
);

render(<App />, document.getElementById("root"));

You can also put the MenuItem component definition directly within the Menu class. But this way you can no longer import MenuItem individually.

import React, { Component } from "react";

export default class Menu extends Component {
  static Item = ({ children }) => <li>{children}</li>;

  render() {
    return <ul>{this.props.children}</ul>;
  }
}

This article is for Demo purpose

The article was originally on this repo

Klise Theme

Cara ribet memperbarui forked repo

Melalui Github (boring way) 💻

Melalui terminal ⌨️

Resources

What is a shell? 🐚 adalah kerang ajaib?

Terminologi pada shell prompt

Notes

Resources

How this site was born 👶

Let’s do this

Prerequisites

Installation

Adding remote repository

Deploying to netlify

Python Notes from Intro to Machine Learning

This article is for Demo purpose

Table of Contents

Modules Classes and Functions

Main Entry File

Import Python Module Dynamically

Multiple Returns in Python

Importing Modules Outside of the Directory

Output

Print The Emojis

Pretty Print

Working with Pathname

Get Filename From URL

Check if File Exists

Create a Directory if It Does Not Exists

Working with Files

Downloading a File

Extracting Tar File

Working with List

Generate a List of Random Numbers

Pair Values from Two Lists

Splitting a List

Filtering a List In One Line

Sorting a List in Ascending Order

Using Filter Function with a List

Using Reduce with a List of Dictionary

Working with Dictionary

Loop Through Dictionary

Calculate Total of Particular Dictionary Key

Working with Numpy

Numpy Create Range of Values with The Given Interval

Numpy Create Coordinate Matrices from Coordinate Vectors

Flatten Numpy Array

Pairing Array Values with Second Axis

Generate Coordinates Across The Grid

Plotting the Data

Plot The Surface Decision

Scatter Plot

Dealing with Data

Deserializing Python Object

Split Data for Training and Testing

Vectorized the Strings

Feature Selection

This article is for Demo purpose

React Component with Dot Notation

This article is for Demo purpose

This article is for Demo purpose