fix dates of pictures
This commit is contained in:
parent
63af252644
commit
0aa03bb716
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "iran-yeylaq"
|
title: "iran-yeylaq"
|
||||||
date: 2021-03-12
|
date: 2018-07-18
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "ox-bathing"
|
title: "ox-bathing"
|
||||||
date: 2021-02-01
|
date: 2018-09-10
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "shepherd"
|
title: "shepherd"
|
||||||
date: 2021-03-12
|
date: 2018-09-21
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "dog-and-puppy"
|
title: "dog-and-puppy"
|
||||||
date: 2021-03-12
|
date: 2018-09-23
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "tabatabaei-house"
|
title: "tabatabaei-house"
|
||||||
date: 2021-03-12
|
date: 2019-02-22
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "jebir"
|
title: "jebir"
|
||||||
date: 2021-02-01
|
date: 2019-09-10
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "birds-sunrise-sea-iran"
|
title: "birds-sunrise-sea-iran"
|
||||||
date: 2021-03-12
|
date: 2019-10-29
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "darak-2"
|
title: "darak-2"
|
||||||
date: 2021-03-12
|
date: 2019-10-30
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "darak"
|
title: "darak"
|
||||||
date: 2021-03-12
|
date: 2019-10-30
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "windcatcher"
|
title: "windcatcher"
|
||||||
date: 2021-02-01
|
date: 2019-10-31
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "flamingos-iran"
|
title: "flamingos-iran"
|
||||||
date: 2021-03-12
|
date: 2019-11-03
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "christmas-day-homeless-man-church"
|
title: "christmas-day-homeless-man-church"
|
||||||
date: 2021-03-12
|
date: 2019-12-26
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "cemetery"
|
title: "cemetery"
|
||||||
date: 2021-03-12
|
date: 2020-03-15
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "dublin-chimneys"
|
title: "dublin-chimneys"
|
||||||
date: 2021-03-12
|
date: 2020-05-06
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "grey-heron-bushy-park"
|
title: "grey-heron-bushy-park"
|
||||||
date: 2021-03-12
|
date: 2020-05-16
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "not-silent"
|
title: "not-silent"
|
||||||
date: 2021-03-12
|
date: 2020-10-18
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "drummer-vanishing"
|
title: "drummer-vanishing"
|
||||||
date: 2021-03-12
|
date: 2020-10-21
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "sightings-from-a-dream-1"
|
title: "sightings-from-a-dream-1"
|
||||||
date: 2021-03-12
|
date: 2020-12-18
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "sightings-from-a-dream-2"
|
title: "sightings-from-a-dream-2"
|
||||||
date: 2021-03-12
|
date: 2020-12-19
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "sightings-from-a-dream-3"
|
title: "sightings-from-a-dream-3"
|
||||||
date: 2021-03-12
|
date: 2020-12-20
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "sightings-from-a-dream-4"
|
title: "sightings-from-a-dream-4"
|
||||||
date: 2021-03-12
|
date: 2020-12-21
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "sightings-from-a-dream-5"
|
title: "sightings-from-a-dream-5"
|
||||||
date: 2021-03-12
|
date: 2020-12-22
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "tired-eyes-tired-minds-tired-souls"
|
title: "tired-eyes-tired-minds-tired-souls"
|
||||||
date: 2021-03-12
|
date: 2020-12-25
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "i-cast-a-spell-on-the-city"
|
title: "i-cast-a-spell-on-the-city"
|
||||||
date: 2021-03-12
|
date: 2020-12-26
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "smell-like-trees"
|
title: "smell-like-trees"
|
||||||
date: 2021-02-01
|
date: 2020-12-27
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "dark-street-light"
|
title: "dark-street-light"
|
||||||
date: 2021-03-12
|
date: 2020-12-28
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "deer-silhouette"
|
title: "deer-silhouette"
|
||||||
date: 2021-03-12
|
date: 2020-12-30
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "deer-above"
|
title: "deer-above"
|
||||||
date: 2021-03-12
|
date: 2020-12-31
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "clouds-among-rocks"
|
title: "clouds-among-rocks"
|
||||||
date: 2021-03-12
|
date: 2021-01-01
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "yazd-children"
|
title: "yazd-children"
|
||||||
date: 2021-02-01
|
date: 2021-01-01
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "organs"
|
title: "organs"
|
||||||
date: 2021-03-12
|
date: 2021-01-04
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "galileo"
|
title: "galileo"
|
||||||
date: 2021-02-01
|
date: 2021-01-06
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "birds-in-form"
|
title: "birds-in-form"
|
||||||
date: 2021-03-12
|
date: 2021-01-08
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "preparation"
|
title: "preparation"
|
||||||
date: 2021-02-01
|
date: 2021-01-10
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "the-night-has-descended-on-us"
|
title: "the-night-has-descended-on-us"
|
||||||
date: 2021-03-12
|
date: 2021-01-10
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "male-back"
|
title: "male-back"
|
||||||
date: 2021-03-12
|
date: 2021-01-12
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "on-mourra-seul"
|
title: "on-mourra-seul"
|
||||||
date: 2021-02-01
|
date: 2021-01-13
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "god-will-pardon-me"
|
title: "god-will-pardon-me"
|
||||||
date: 2021-03-12
|
date: 2021-01-28
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "la-vida"
|
title: "la-vida"
|
||||||
date: 2021-02-01
|
date: 2021-02-25
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "un-grand-peut-etre"
|
title: "un-grand-peut-etre"
|
||||||
date: 2021-03-12
|
date: 2021-03-01
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "sky"
|
title: "sky"
|
||||||
date: 2021-02-01
|
date: 2021-03-06
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "history-so-close-it-comes-alive"
|
title: "history-so-close-it-comes-alive"
|
||||||
date: 2021-03-12
|
date: 2021-03-07
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "boy"
|
title: "boy"
|
||||||
date: 2021-03-12
|
date: 2021-05-12
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "ireland-abandoned"
|
title: "ireland-abandoned"
|
||||||
date: 2021-03-12
|
date: 2021-05-22
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "grand"
|
title: "grand"
|
||||||
date: 2021-02-01
|
date: 2021-06-19
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "blue-contagious-smile"
|
title: "blue-contagious-smile"
|
||||||
date: 2021-03-12
|
date: 2021-06-21
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "head-wall"
|
title: "head-wall"
|
||||||
date: 2021-03-12
|
date: 2021-06-23
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "girl-among-grains"
|
title: "girl-among-grains"
|
||||||
date: 2021-02-01
|
date: 2021-06-29
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "holy-money-spitting-machine"
|
title: "holy-money-spitting-machine"
|
||||||
date: 2021-03-12
|
date: 2021-07-17
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "sigh"
|
title: "sigh"
|
||||||
date: 2021-02-01
|
date: 2021-07-18
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "drought-dead-statue"
|
title: "drought-dead-statue"
|
||||||
date: 2021-03-12
|
date: 2021-07-20
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "concrete-jungle-trees"
|
title: "concrete-jungle-trees"
|
||||||
date: 2021-03-12
|
date: 2021-08-20
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "punk-gangster"
|
title: "punk-gangster"
|
||||||
date: 2021-03-12
|
date: 2021-08-20
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "et-les-extremes-se-touchent"
|
title: "et-les-extremes-se-touchent"
|
||||||
date: 2021-03-12
|
date: 2021-08-21
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "girl-eye-flowers-1"
|
title: "girl-eye-flowers-1"
|
||||||
date: 2021-03-12
|
date: 2021-08-21
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "girl-eye-flowers-2"
|
title: "girl-eye-flowers-2"
|
||||||
date: 2021-03-12
|
date: 2021-08-21
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "girl-eye-flowers-3"
|
title: "girl-eye-flowers-3"
|
||||||
date: 2021-03-12
|
date: 2021-08-21
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "the-right-way-is-the-untrodden"
|
title: "the-right-way-is-the-untrodden"
|
||||||
date: 2021-03-12
|
date: 2021-08-29
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "hill-of-tara"
|
title: "hill-of-tara"
|
||||||
date: 2021-03-12
|
date: 2021-09-24
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "time-traveller"
|
title: "time-traveller"
|
||||||
date: 2021-03-12
|
date: 2021-11-30
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "milan-cathedral"
|
title: "milan-cathedral"
|
||||||
date: 2021-03-12
|
date: 2021-12-23
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "mount-tibidabo-cathedral"
|
title: "mount-tibidabo-cathedral"
|
||||||
date: 2021-03-12
|
date: 2021-12-24
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "switzerland-white-tree"
|
title: "switzerland-white-tree"
|
||||||
date: 2021-03-12
|
date: 2021-12-27
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "crucifixion-sagrada-familia"
|
title: "crucifixion-sagrada-familia"
|
||||||
date: 2021-03-12
|
date: 2022-01-13
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "baled-hay"
|
title: "baled-hay"
|
||||||
date: 2021-03-12
|
date: 2021-08-05
|
||||||
categories: art
|
categories: art
|
||||||
author: Mahdi
|
author: Mahdi
|
||||||
---
|
---
|
||||||
2
art.html
2
art.html
@ -4,7 +4,7 @@ layout: default
|
|||||||
|
|
||||||
<div class="home art">
|
<div class="home art">
|
||||||
<ul class="post-list">
|
<ul class="post-list">
|
||||||
{% for post in site.art %}
|
{% for post in site.art reversed %}
|
||||||
{% if post.published == false %}
|
{% if post.published == false %}
|
||||||
{% continue %}
|
{% continue %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|||||||
@ -1,4 +0,0 @@
|
|||||||
---
|
|
||||||
layout: category
|
|
||||||
category: programming
|
|
||||||
---
|
|
||||||
1
site/CNAME
Normal file
1
site/CNAME
Normal file
@ -0,0 +1 @@
|
|||||||
|
theread.me
|
||||||
3
site/README.md
Normal file
3
site/README.md
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
mahdi.blog
|
||||||
|
==========
|
||||||
|
|
||||||
110
site/about/index.html
Normal file
110
site/about/index.html
Normal file
@ -0,0 +1,110 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
|
||||||
|
<title>About</title>
|
||||||
|
<meta name="description" content="a rabbit hole">
|
||||||
|
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Secular+One|Nunito|Mononoki" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="/css/main.css">
|
||||||
|
<link rel="canonical" href="http://localhost:4000/about/">
|
||||||
|
<link rel="alternate" type="application/rss+xml" title="mahdi" href="http://localhost:4000/feed.xml" />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!--<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript"></script>-->
|
||||||
|
|
||||||
|
<script>
|
||||||
|
var channel = new BroadcastChannel('egg');
|
||||||
|
|
||||||
|
channel.addEventListener('message', message => {
|
||||||
|
alert('Got a message from the other tab:\n' + message.data);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<header class="site-header">
|
||||||
|
|
||||||
|
<h1>
|
||||||
|
<a class='site-title' href='/'>
|
||||||
|
mahdi
|
||||||
|
</a>
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<nav>
|
||||||
|
<p>
|
||||||
|
<a href="/snippets">snippets</a>
|
||||||
|
<a href="/art">pictures</a>
|
||||||
|
</p>
|
||||||
|
<!--<p class='categories'>-->
|
||||||
|
<!---->
|
||||||
|
<!---->
|
||||||
|
<!--<a href="">art</a>-->
|
||||||
|
<!---->
|
||||||
|
<!---->
|
||||||
|
<!---->
|
||||||
|
<!---->
|
||||||
|
<!--</p>-->
|
||||||
|
<p>
|
||||||
|
<a href='mailto:mdibaiee@pm.me'>email</a>
|
||||||
|
<a href='https://git.mahdi.blog/mahdi'>git</a>
|
||||||
|
<a href='https://www.librarything.com/profile/mdibaiee'>librarything</a>
|
||||||
|
<a href="http://localhost:4000/feed.xml">feed</a>
|
||||||
|
</p>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="page-content">
|
||||||
|
<div class="wrapper">
|
||||||
|
<h1 class="page-heading"></h1>
|
||||||
|
|
||||||
|
<div class="post">
|
||||||
|
|
||||||
|
<div class="post-header">
|
||||||
|
<h1 class="post-title"><p>About</p>
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<article class="post-content">
|
||||||
|
<p>Hi, it’s Mahdi. I was born 24th of July, 1998. I write about a variety of topics here, whatever I find worthwhile to share with others.
|
||||||
|
I like so many things I’d better just list them instead of boring you by making up a fancy sentence about them, so here, in no particular order:</p>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>Programming</li>
|
||||||
|
<li>Mathematics</li>
|
||||||
|
<li>Nature</li>
|
||||||
|
<li>Artificial Intelligence</li>
|
||||||
|
<li>Fitness</li>
|
||||||
|
<li>Parkour</li>
|
||||||
|
<li>All sorts of extreme sports: Skydiving, Scuba Diving, etc.</li>
|
||||||
|
<li>Primitive Living</li>
|
||||||
|
<li>Leadership</li>
|
||||||
|
<li>Human relationships</li>
|
||||||
|
<li>Reading</li>
|
||||||
|
<li>Music and Art in general</li>
|
||||||
|
<li>Philosophy</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<p>I like communicating with people, exploring and discovering about new concepts and new possibilities, and every human being is a new concept to discover. In simpler terms, I would like to get to know you, so feel free to shoot me an email: hi@mahdi.blog</p>
|
||||||
|
|
||||||
|
</article>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@ -0,0 +1,194 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
|
||||||
|
<title>On Inherent Subjectivity of Some Things</title>
|
||||||
|
<meta name="description" content="As a computer scientist and someone who loves mathematics and abstractions, I was obsessed with the idea of rationality, that is, an objective and absolute r...">
|
||||||
|
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Secular+One|Nunito|Mononoki" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="/css/main.css">
|
||||||
|
<link rel="canonical" href="http://localhost:4000/alternative-objectivity-and-inherent-subjectivity/">
|
||||||
|
<link rel="alternate" type="application/rss+xml" title="mahdi" href="http://localhost:4000/feed.xml" />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!--<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript"></script>-->
|
||||||
|
|
||||||
|
<script>
|
||||||
|
var channel = new BroadcastChannel('egg');
|
||||||
|
|
||||||
|
channel.addEventListener('message', message => {
|
||||||
|
alert('Got a message from the other tab:\n' + message.data);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<header class="site-header">
|
||||||
|
|
||||||
|
<h1>
|
||||||
|
<a class='site-title' href='/'>
|
||||||
|
mahdi
|
||||||
|
</a>
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<nav>
|
||||||
|
<p>
|
||||||
|
<a href="/snippets">snippets</a>
|
||||||
|
<a href="/art">pictures</a>
|
||||||
|
</p>
|
||||||
|
<!--<p class='categories'>-->
|
||||||
|
<!---->
|
||||||
|
<!---->
|
||||||
|
<!--<a href="">art</a>-->
|
||||||
|
<!---->
|
||||||
|
<!---->
|
||||||
|
<!---->
|
||||||
|
<!---->
|
||||||
|
<!--</p>-->
|
||||||
|
<p>
|
||||||
|
<a href='mailto:mdibaiee@pm.me'>email</a>
|
||||||
|
<a href='https://git.mahdi.blog/mahdi'>git</a>
|
||||||
|
<a href='https://www.librarything.com/profile/mdibaiee'>librarything</a>
|
||||||
|
<a href="http://localhost:4000/feed.xml">feed</a>
|
||||||
|
</p>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="page-content">
|
||||||
|
<div class="wrapper">
|
||||||
|
<h1 class="page-heading"></h1>
|
||||||
|
|
||||||
|
<div class='post lang-en'>
|
||||||
|
|
||||||
|
<div class="post-header">
|
||||||
|
<h1 class="post-title"><p>On Inherent Subjectivity of Some Things</p>
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<h2 class="post-subtitle"><p>An Alternative Definition of Objectivity for Rigid Scientists</p>
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="post-meta">
|
||||||
|
<span>Oct 30, 2021</span>
|
||||||
|
|
||||||
|
• <span>Reading time: 8 minutes</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<article class="post-content">
|
||||||
|
<p>As a computer scientist and someone who loves <a href="/mathematical-induction-proving-tiling-methods">mathematics</a> and <a href="/typoclassopedia-exercise-solutions">abstractions</a>, I was obsessed with the idea of rationality, that is, an <em>objective</em> and absolute rationality, however I ended up in a philosophy course that showed me the opposite.</p>
|
||||||
|
|
||||||
|
<p>I somehow stumbled upon Eliezer Yudkowsky’s <a href="https://www.readthesequences.com/">Rationality: From AI to Zombies</a> about 4 years ago, and it took me two years to go through it all but I was absolutely fascinated by this book. I <em>knew</em> how to be rational now, and I could <em>prove</em> it using mathematics, what else could I ask for!</p>
|
||||||
|
|
||||||
|
<p>The book basically looks at the world as a probabilistic system, and everything that happens can be assigned probabilities, and using mathematical theorems such as Bayes Theorem, we can predict outcomes of certain actions and then decide between them. There is a lot of focus on <a href="https://en.wikipedia.org/wiki/List_of_cognitive_biases">cognitive biases</a> as well. I was particularly very interested about these biases, and so I set out to learn more about them, and that’s how I found my current course: <a href="https://cogsci.ucd.ie">Cognitive Science at University College Dublin</a>.</p>
|
||||||
|
|
||||||
|
<p>So I enter this course with this mindset: we can objectively analyse the world around us using probability and statistics (mathematics), but we are limited by our cognitive biases, so I want to learn about these cognitive biases: where do they come from, how can they be resisted to allow us to act more rationally and so on. These questions would mainly fall under the umbrella of psychology…</p>
|
||||||
|
|
||||||
|
<p>However… I found myself to be more and more interested in the philosophy side of this course than the psychology side, hell I even started to not like the psychology side anymore, but fall in love with the philosophy. This is where I found the opposite of what I had come for: an alternative definition of objectivity, and an inherent subjectivity of some things. This is mainly inspired by Thomas Nagel’s What Is It Like To Be A Bat <a class="citation" href="#nagel1974like">(Nagel, 1974)</a>.</p>
|
||||||
|
|
||||||
|
<h2 id="what-is-objectivity-anyway">What is Objectivity Anyway?</h2>
|
||||||
|
|
||||||
|
<p>This is probably the main question here. What is objectivity? I don’t think dictionary definitions are particularly authoritative when it comes to philosophy discussions, but I found this dictionary definition interesting to open the topic with:</p>
|
||||||
|
|
||||||
|
<blockquote>
|
||||||
|
<p>the quality or character of being objective : lack of favoritism toward one side or another : freedom from bias. <a class="citation" href="#objectivity-merriam-webster">(Merriam-Webster, 2021)</a></p>
|
||||||
|
</blockquote>
|
||||||
|
|
||||||
|
<p>This definition itself has ambiguous phrases such as “freedom from bias”, what does that mean? When can we say that we are free from bias? Let’s look at how bias is defined in the same dictionary:</p>
|
||||||
|
|
||||||
|
<blockquote>
|
||||||
|
<p>an inclination of temperament or outlook <a class="citation" href="#bias-merriam-webster">(Merriam-Webster, 2021)</a></p>
|
||||||
|
</blockquote>
|
||||||
|
|
||||||
|
<p>But… is it really possible to have no inclination at all in our temperament and outlook? Let’s look at the definition of subjective, that will help us here:</p>
|
||||||
|
|
||||||
|
<blockquote>
|
||||||
|
<p>relating to the way a person experiences things in his or her own mind <a class="citation" href="#subjective-merriam-webster">(Merriam-Webster, 2021)</a></p>
|
||||||
|
</blockquote>
|
||||||
|
|
||||||
|
<p>Is it possible for us to have a view of something without it being part of our experience? It seems not. All that we do, all our views and expressions and our interactions are part of our experience as a person, and it relates to us on an intimate level, which means that everything that we do as individuals is subjective. In that sense, it seems impossible for any individual to be objective, since they will always have some form of inclination about everything.</p>
|
||||||
|
|
||||||
|
<p>What does this leave us with then when we ask what is objectivity? A better definition of objectivity in my opinion is one given by Thomas Nagel:</p>
|
||||||
|
|
||||||
|
<blockquote>
|
||||||
|
<p>It may be more accurate to think of objectivity as a direction in which the understanding can travel. […] The process of reduction is a move in the direction of greater objectivity, toward a more accurate view of the real nature of things. This is accomplished by reducing our dependence on individual or species-specific points of view toward the object of investigation. We describe it not in terms of the impressions it makes on our senses, but in terms of its more general effects and of properties detectable by means other than the human senses. <a class="citation" href="#nagel1974like">(Nagel, 1974)</a></p>
|
||||||
|
</blockquote>
|
||||||
|
|
||||||
|
<p>In this sense, there is no black-and-white distinction between subjectivity and objectivity, but rather it is a spectrum, a line on which we can walk from subjectivity towards objectivity.</p>
|
||||||
|
|
||||||
|
<p><img src="/img/inherent-subjectivity/subjective-objective.png" alt="Subjective-Objective spectrum: On Subjective side we have Individual perception, in the middle Agreement with others, and on the Objective side Agreement with other apparatus" /></p>
|
||||||
|
|
||||||
|
<p>We start with our individual perceptions as the most objective view and description, we then move towards descriptions that allow us to agree with other (human) beings, and finally we move towards descriptions that can be verified and agreed upon by other apparatus, although it is important to understand that even the apparatus that we may use to describe things are not necessarily free from bias, since they are created by biased individuals and groups. By now you may notice that if a measuring device is made to be agreeable between a large group of people, it is already more objective than a device made by a single individual! However, absolute objectivity, which we may call “a view from nowhere” may not be attainable by us, because we will always be viewing things from our own perspectives, even if it is a large, collective perspective that we agree on, it is not a view from nowhere.</p>
|
||||||
|
|
||||||
|
<p><img src="/img/inherent-subjectivity/subjective-objective-example.png" alt="Subjective-Objective spectrum: A single person says a ball is 10cm radius, 1/4 objectivity. A group of people say it's 10cm radius, 1/2 objectivity. A group of people with a ruler say it's 10cm radius, 3/4 objectivity" /></p>
|
||||||
|
|
||||||
|
<h2 id="inherently-subjective-things">Inherently Subjective Things</h2>
|
||||||
|
|
||||||
|
<p>With our definition of objectivity in place, now let’s see: is there something that we cannot move towards objectivity about? Yes. That is our personal experiences.</p>
|
||||||
|
|
||||||
|
<p>See, if there is an attempt to give a more objective description of <em>my</em> personal experience, there will need to be either an agreement among a group of beings about this description of my personal experience, or there should be an apparatus that we can agree on that measures my personal experience. However, my personal experience is personal exactly because it is completely dependent and originated from my perspective alone, and no one else’s; and as soon as you try to move towards objectivity by trying to describe this experience in a way that moves away from my person-specific and species-specific standpoint, towards a more agreeable and general description that even non-human beings or apparatus can agree with, you lose the initial personal experience in the process, so you end up with a non-personal description of the experience which misses the point of the actual subjective experience I have.</p>
|
||||||
|
|
||||||
|
<p>So, you can come up with <em>some</em> description of my experience, but you can’t actually describe the subjective experience of being me as it really is. The walk towards objectivity requires you to drop the subjectivity of my experience, and hence, some inherently subjective things such as our personal experiences can’t be objectified.</p>
|
||||||
|
|
||||||
|
<p>This is how Nagel puts it (I think this may be a bit hard to read without reading the whole paper):</p>
|
||||||
|
|
||||||
|
<blockquote>
|
||||||
|
<p>Experience itself, however, does not seem to fit the pattern. The idea of moving from appearance to reality seems to make no sense here. What is the analogue in this case to pursuing a more objective understanding of the same phenomena by abandoning the initial subjective viewpoint toward them in favor of another that is more objective but concerns the same thing? Certainly it appears unlikely that we will get closer to the real nature of human experience by leaving behind the particularity of our human point of view and striving for a description in terms accessible to beings that could not imagine what it was like to be us. If the subjective character of experience is fully comprehensible only from one point of view, then any shift to greater objectivity that is, less attachment to a specific viewpoint does not take us nearer to the real nature of the phenomenon: it takes us farther away from it. <a class="citation" href="#nagel1974like">(Nagel, 1974)</a></p>
|
||||||
|
</blockquote>
|
||||||
|
|
||||||
|
<h2 id="so-what-or-why-is-this-important">So What? (Or: Why is This Important?)</h2>
|
||||||
|
|
||||||
|
<p>This realisation means that objectifying people’s subjective experiences is not possible, we will never be able to decipher someone’s subjective experience of something. This does not mean we should not try to <em>understand</em> people, rather, it means we should always consider that our understanding of someone’s subjective experience will never be objective, it will always be merely our perspective of it. When it comes to people’s personal experiences, we can’t be sure that we are right, the way we are confident we are right after measuring a distance using our agreed-upon metric ruler; when it comes to subjective experiences it’s always only a crude approximation. “In the end one experiences only oneself.” <a class="citation" href="#nietzsche2008thus">(Nietzsche, 2008)</a></p>
|
||||||
|
|
||||||
|
<p>This video was sent to me by a friend today, and it is great timing, because it is very relevant:</p>
|
||||||
|
|
||||||
|
<iframe class="centered" width="560" height="315" src="https://www.youtube-nocookie.com/embed/oRG2jlQWCsY" title="Good Will Hunting | 'Your Move Chief' (HD) - Matt Damon, Robin Williams | MIRAMAX" frameborder="0" allow="picture-in-picture" allowfullscreen=""></iframe>
|
||||||
|
|
||||||
|
<!--https://postcognitivism.wordpress.com/2021/04/06/the-great-escape-can-we-transcend-our-own-conceptual-frameworks/
|
||||||
|
https://gatelessgateblog.wordpress.com/
|
||||||
|
https://www.sciencedirect.com/science/article/pii/S0388000121000802
|
||||||
|
Distinctions and Common Ground in Collective Epistemology-->
|
||||||
|
|
||||||
|
<h2 id="references">References</h2>
|
||||||
|
|
||||||
|
<ol class="bibliography"><li><span id="nagel1974like">Nagel, T. (1974). What is it like to be a bat. <i>Readings in Philosophy of Psychology</i>, <i>1</i>, 159–168.</span></li>
|
||||||
|
<li><span id="objectivity-merriam-webster">Merriam-Webster. (2021). <i>Objectivity. In Merriam-Webster.com dictionary.</i> https://www.merriam-webster.com/dictionary/objectivity</span></li>
|
||||||
|
<li><span id="bias-merriam-webster">Merriam-Webster. (2021). <i>Bias. In Merriam-Webster.com dictionary.</i> https://www.merriam-webster.com/dictionary/bias</span></li>
|
||||||
|
<li><span id="subjective-merriam-webster">Merriam-Webster. (2021). <i>Subjective. In Merriam-Webster.com dictionary.</i> https://www.merriam-webster.com/dictionary/subjective</span></li>
|
||||||
|
<li><span id="nietzsche2008thus">Nietzsche, F. (2008). <i>Thus spoke Zarathustra: A book for everyone and nobody</i>. Oxford University Press.</span></li></ol>
|
||||||
|
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<div class="share-page">
|
||||||
|
Share in
|
||||||
|
|
||||||
|
<a href="https://twitter.com/intent/tweet?text=On Inherent Subjectivity of Some Things&url=http://localhost:4000/alternative-objectivity-and-inherent-subjectivity/&via=&related=" rel="nofollow" target="_blank" title="Share on Twitter">Twitter</a>
|
||||||
|
<a href="https://facebook.com/sharer.php?u=http://localhost:4000/alternative-objectivity-and-inherent-subjectivity/" rel="nofollow" target="_blank" title="Share on Facebook">Facebook</a>
|
||||||
|
<a href="https://plus.google.com/share?url=http://localhost:4000/alternative-objectivity-and-inherent-subjectivity/" rel="nofollow" target="_blank" title="Share on Google+">Google+</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div id="commento"></div>
|
||||||
|
<script defer
|
||||||
|
src="//commento.mahdi.blog/js/commento.js">
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script src="/js/heading-links.js"></script>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
1565
site/art/index.html
Normal file
1565
site/art/index.html
Normal file
File diff suppressed because it is too large
Load Diff
298
site/autocomplete-predict-trie/index.html
Normal file
298
site/autocomplete-predict-trie/index.html
Normal file
@ -0,0 +1,298 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
|
||||||
|
<title>Autocomplete using Tries</title>
|
||||||
|
<meta name="description" content="In this article, I’m going over creating an autocompletion/prediction system using a data-structure called Trie, it’s fast and easy to customize.">
|
||||||
|
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Secular+One|Nunito|Mononoki" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="/css/main.css">
|
||||||
|
<link rel="canonical" href="http://localhost:4000/autocomplete-predict-trie/">
|
||||||
|
<link rel="alternate" type="application/rss+xml" title="mahdi" href="http://localhost:4000/feed.xml" />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!--<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript"></script>-->
|
||||||
|
|
||||||
|
<script>
|
||||||
|
var channel = new BroadcastChannel('egg');
|
||||||
|
|
||||||
|
channel.addEventListener('message', message => {
|
||||||
|
alert('Got a message from the other tab:\n' + message.data);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<header class="site-header">
|
||||||
|
|
||||||
|
<h1>
|
||||||
|
<a class='site-title' href='/'>
|
||||||
|
mahdi
|
||||||
|
</a>
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<nav>
|
||||||
|
<p>
|
||||||
|
<a href="/snippets">snippets</a>
|
||||||
|
<a href="/art">pictures</a>
|
||||||
|
</p>
|
||||||
|
<!--<p class='categories'>-->
|
||||||
|
<!---->
|
||||||
|
<!---->
|
||||||
|
<!--<a href="">art</a>-->
|
||||||
|
<!---->
|
||||||
|
<!---->
|
||||||
|
<!---->
|
||||||
|
<!---->
|
||||||
|
<!--</p>-->
|
||||||
|
<p>
|
||||||
|
<a href='mailto:mdibaiee@pm.me'>email</a>
|
||||||
|
<a href='https://git.mahdi.blog/mahdi'>git</a>
|
||||||
|
<a href='https://www.librarything.com/profile/mdibaiee'>librarything</a>
|
||||||
|
<a href="http://localhost:4000/feed.xml">feed</a>
|
||||||
|
</p>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="page-content">
|
||||||
|
<div class="wrapper">
|
||||||
|
<h1 class="page-heading"></h1>
|
||||||
|
|
||||||
|
<div class='post lang-en'>
|
||||||
|
|
||||||
|
<div class="post-header">
|
||||||
|
<h1 class="post-title"><p>Autocomplete using Tries</p>
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="post-meta">
|
||||||
|
<span>Jul 24, 2015</span>
|
||||||
|
|
||||||
|
• <span>Reading time: 8 minutes</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<article class="post-content">
|
||||||
|
<p>In this article, I’m going over creating an autocompletion/prediction system using a data-structure called Trie, it’s fast and easy to customize.</p>
|
||||||
|
|
||||||
|
<h1 id="trie">Trie</h1>
|
||||||
|
|
||||||
|
<p><a href="https://en.wikipedia.org/wiki/Trie">Trie</a> is a simple data-structure most commonly used as a dictionary, it looks like so:</p>
|
||||||
|
|
||||||
|
<p><img src="/img/trie.jpg" alt="Trie" /></p>
|
||||||
|
|
||||||
|
<p>As you see, it’s just a <em>tree</em>, a set of nodes connected to other [child] nodes, but the nodes have a special relationship:</p>
|
||||||
|
|
||||||
|
<p>Each child node extends it’s parent with one extra character.</p>
|
||||||
|
|
||||||
|
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// Something like this</span>
|
||||||
|
<span class="nx">child</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">parent</span><span class="p">.</span><span class="nx">value</span> <span class="o">+</span> <span class="dl">'</span><span class="s1">c</span><span class="dl">'</span><span class="p">;</span></code></pre></figure>
|
||||||
|
|
||||||
|
<p>It’s pretty easy to traverse this tree and predict the next possible words.</p>
|
||||||
|
|
||||||
|
<h2 id="implementation">Implementation</h2>
|
||||||
|
|
||||||
|
<p>We’re going to use ES6 classes to create our <code class="language-plaintext highlighter-rouge">Trie</code> and <code class="language-plaintext highlighter-rouge">Node</code> classes.</p>
|
||||||
|
|
||||||
|
<p>Let’s start with our simple Node class:</p>
|
||||||
|
|
||||||
|
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">class</span> <span class="nx">Node</span> <span class="p">{</span>
|
||||||
|
<span class="kd">constructor</span><span class="p">(</span><span class="nx">value</span> <span class="o">=</span> <span class="dl">''</span><span class="p">)</span> <span class="p">{</span>
|
||||||
|
<span class="k">this</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">value</span><span class="p">;</span>
|
||||||
|
<span class="k">this</span><span class="p">.</span><span class="nx">children</span> <span class="o">=</span> <span class="p">[];</span>
|
||||||
|
<span class="p">}</span>
|
||||||
|
<span class="p">}</span></code></pre></figure>
|
||||||
|
|
||||||
|
<p>Unlike <a href="https://en.wikipedia.org/wiki/Binary_tree">binary trees</a> where each node has a left and right child, Trie nodes don’t necessarily have a limit on how many children they can have.</p>
|
||||||
|
|
||||||
|
<p>Trie class:</p>
|
||||||
|
|
||||||
|
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">class</span> <span class="nx">Trie</span> <span class="p">{</span>
|
||||||
|
<span class="kd">constructor</span><span class="p">()</span> <span class="p">{</span>
|
||||||
|
<span class="k">this</span><span class="p">.</span><span class="nx">root</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Node</span><span class="p">();</span>
|
||||||
|
<span class="p">}</span>
|
||||||
|
|
||||||
|
<span class="nx">add</span><span class="p">(</span><span class="nx">value</span><span class="p">,</span> <span class="nx">parent</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">root</span><span class="p">)</span> <span class="p">{</span>
|
||||||
|
<span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">len</span> <span class="o">=</span> <span class="nx">value</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span> <span class="o"><</span> <span class="nx">len</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
|
||||||
|
<span class="kd">let</span> <span class="nx">node</span> <span class="o">=</span> <span class="nx">parent</span><span class="p">.</span><span class="nx">children</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="nx">child</span> <span class="o">=></span> <span class="nx">child</span><span class="p">.</span><span class="nx">value</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">===</span> <span class="nx">value</span><span class="p">[</span><span class="nx">i</span><span class="p">]);</span>
|
||||||
|
|
||||||
|
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">node</span><span class="p">)</span> <span class="p">{</span>
|
||||||
|
<span class="nx">node</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Node</span><span class="p">(</span><span class="nx">value</span><span class="p">.</span><span class="nx">slice</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="nx">i</span> <span class="o">+</span> <span class="mi">1</span><span class="p">));</span>
|
||||||
|
<span class="nx">parent</span><span class="p">.</span><span class="nx">children</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">node</span><span class="p">);</span>
|
||||||
|
<span class="p">}</span>
|
||||||
|
|
||||||
|
<span class="nx">parent</span> <span class="o">=</span> <span class="nx">node</span><span class="p">;</span>
|
||||||
|
<span class="p">}</span>
|
||||||
|
|
||||||
|
<span class="k">return</span> <span class="nx">parent</span><span class="p">;</span>
|
||||||
|
<span class="p">}</span>
|
||||||
|
|
||||||
|
<span class="nx">find</span><span class="p">(</span><span class="nx">value</span><span class="p">,</span> <span class="nx">parent</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">root</span><span class="p">)</span> <span class="p">{</span>
|
||||||
|
<span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">len</span> <span class="o">=</span> <span class="nx">value</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span> <span class="o"><</span> <span class="nx">len</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
|
||||||
|
<span class="nx">parent</span> <span class="o">=</span> <span class="nx">parent</span><span class="p">.</span><span class="nx">children</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="nx">child</span> <span class="o">=></span> <span class="nx">child</span><span class="p">.</span><span class="nx">value</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">===</span> <span class="nx">value</span><span class="p">[</span><span class="nx">i</span><span class="p">]);</span>
|
||||||
|
|
||||||
|
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">parent</span><span class="p">)</span> <span class="k">return</span> <span class="kc">null</span><span class="p">;</span>
|
||||||
|
<span class="p">}</span>
|
||||||
|
<span class="k">return</span> <span class="nx">parent</span><span class="p">;</span>
|
||||||
|
<span class="p">}</span>
|
||||||
|
<span class="p">}</span></code></pre></figure>
|
||||||
|
|
||||||
|
<p>Every Trie must have a root node with empty value, that’s how our single-character nodes follow the rule of Tries.</p>
|
||||||
|
|
||||||
|
<p>Ok, our first method, <code class="language-plaintext highlighter-rouge">add</code> handles adding a value to the trie, creating necessary parent nodes for our value.
|
||||||
|
At each iteration, we compare the <code class="language-plaintext highlighter-rouge">i</code>th character of our value, with <code class="language-plaintext highlighter-rouge">i</code>th character of current node’s children’s value,
|
||||||
|
if we find one, we continue to search the next branch, else, we create a node with <code class="language-plaintext highlighter-rouge">value.slice(0, i + 1)</code> and move onto the created node.</p>
|
||||||
|
|
||||||
|
<p>It might be a little hard to grasp at first, so I created a visualization of this method to help you understand it easier, take a look:
|
||||||
|
<a href="https://mdibaiee.github.io/autocomplete-trie/demo/add.html">Trie Visualization</a></p>
|
||||||
|
|
||||||
|
<p>Then we have our find method, which searches for the given value in the trie. The algorithm for searching is the same, comparing by index and moving to the next branch.</p>
|
||||||
|
|
||||||
|
<h1 id="example">Example</h1>
|
||||||
|
<p>That’s it for our simple Trie class, now let’s create an actual input with autocomplete functionality using our Trie.</p>
|
||||||
|
|
||||||
|
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><input></span>
|
||||||
|
|
||||||
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">'results'</span><span class="nt">></span>
|
||||||
|
|
||||||
|
<span class="nt"></div></span></code></pre></figure>
|
||||||
|
|
||||||
|
<p>I put some random names and stuff into three categories, results: <a href="https://mdibaiee.github.io/autocomplete-trie/demo/data.json">data.json</a></p>
|
||||||
|
|
||||||
|
<p>Now we have to create a Trie of our data:</p>
|
||||||
|
|
||||||
|
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">const</span> <span class="nx">trie</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Trie</span><span class="p">();</span>
|
||||||
|
|
||||||
|
<span class="kd">let</span> <span class="nx">data</span> <span class="o">=</span> <span class="p">{...};</span> <span class="c1">// read from data.json</span>
|
||||||
|
|
||||||
|
<span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">category</span> <span class="k">in</span> <span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
|
||||||
|
<span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">item</span> <span class="k">of</span> <span class="nx">data</span><span class="p">[</span><span class="nx">category</span><span class="p">])</span> <span class="p">{</span>
|
||||||
|
<span class="kd">let</span> <span class="nx">node</span> <span class="o">=</span> <span class="nx">trie</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="nx">item</span><span class="p">);</span>
|
||||||
|
<span class="nx">node</span><span class="p">.</span><span class="nx">category</span> <span class="o">=</span> <span class="nx">category</span><span class="p">;</span>
|
||||||
|
<span class="p">}</span>
|
||||||
|
<span class="p">}</span></code></pre></figure>
|
||||||
|
|
||||||
|
<p>As simple as that, our trie is made, it looks like this: <a href="https://mdibaiee.github.io/autocomplete-trie/demo/data.html">Data</a></p>
|
||||||
|
|
||||||
|
<p>Now, let’s actually show results:</p>
|
||||||
|
|
||||||
|
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">const</span> <span class="nx">input</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">'</span><span class="s1">input</span><span class="dl">'</span><span class="p">);</span>
|
||||||
|
<span class="kd">const</span> <span class="nx">results</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">'</span><span class="s1">#results</span><span class="dl">'</span><span class="p">);</span>
|
||||||
|
|
||||||
|
<span class="nx">input</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">keyup</span><span class="dl">'</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
|
||||||
|
<span class="nx">results</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="dl">''</span><span class="p">;</span>
|
||||||
|
|
||||||
|
<span class="kd">const</span> <span class="nx">nodes</span> <span class="o">=</span> <span class="nx">trie</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="nx">input</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span>
|
||||||
|
|
||||||
|
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">nodes</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>
|
||||||
|
|
||||||
|
<span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">node</span> <span class="k">of</span> <span class="nx">nodes</span><span class="p">.</span><span class="nx">children</span><span class="p">)</span> <span class="p">{</span>
|
||||||
|
<span class="kd">const</span> <span class="nx">category</span> <span class="o">=</span> <span class="nx">node</span><span class="p">.</span><span class="nx">category</span> <span class="p">?</span> <span class="s2">`- </span><span class="p">${</span><span class="nx">node</span><span class="p">.</span><span class="nx">category</span><span class="p">}</span><span class="s2">`</span> <span class="p">:</span> <span class="dl">''</span><span class="p">;</span>
|
||||||
|
|
||||||
|
<span class="nx">results</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">+=</span> <span class="s2">`<li></span><span class="p">${</span><span class="nx">node</span><span class="p">.</span><span class="nx">value</span><span class="p">}</span><span class="s2"> </span><span class="p">${</span><span class="nx">category</span><span class="p">}</span><span class="s2"></li>`</span><span class="p">;</span>
|
||||||
|
<span class="p">}</span>
|
||||||
|
<span class="p">});</span></code></pre></figure>
|
||||||
|
|
||||||
|
<p><a href="https://mdibaiee.github.io/autocomplete-trie/1.html">Autocomplete 1</a>
|
||||||
|
<img src="/img/autocomplete-1.png" alt="Autocomplete 1" />
|
||||||
|
This will only show the instant-childs of the word entered, but that’s not what we want, we want to show <em>complete</em> words, how do we do that?</p>
|
||||||
|
|
||||||
|
<p>First, we need a way to detect complete words, we can have a flag to recognize complete words, we can modify our <code class="language-plaintext highlighter-rouge">add</code> method to
|
||||||
|
automatically flag whole words or we can manually add the flag after adding the node, as we did by setting a category for our words,
|
||||||
|
so we already have a flag to recognize whole words, that’s our <code class="language-plaintext highlighter-rouge">category</code> property, now let’s add a new method to our Trie class to find
|
||||||
|
whole words.</p>
|
||||||
|
|
||||||
|
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">...</span>
|
||||||
|
<span class="nx">findWords</span><span class="p">(</span><span class="nx">value</span><span class="p">,</span> <span class="nx">parent</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">root</span><span class="p">)</span> <span class="p">{</span>
|
||||||
|
<span class="kd">let</span> <span class="nx">top</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="nx">value</span><span class="p">,</span> <span class="nx">parent</span><span class="p">);</span>
|
||||||
|
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">top</span><span class="p">)</span> <span class="k">return</span> <span class="p">[];</span>
|
||||||
|
|
||||||
|
<span class="kd">let</span> <span class="nx">words</span> <span class="o">=</span> <span class="p">[];</span>
|
||||||
|
|
||||||
|
<span class="nx">top</span><span class="p">.</span><span class="nx">children</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="kd">function</span> <span class="nx">getWords</span><span class="p">(</span><span class="nx">node</span><span class="p">)</span> <span class="p">{</span>
|
||||||
|
<span class="k">if</span> <span class="p">(</span><span class="nx">node</span><span class="p">.</span><span class="nx">category</span><span class="p">)</span> <span class="nx">words</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">node</span><span class="p">);</span>
|
||||||
|
<span class="nx">node</span><span class="p">.</span><span class="nx">children</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">getWords</span><span class="p">);</span>
|
||||||
|
<span class="p">});</span>
|
||||||
|
|
||||||
|
<span class="k">return</span> <span class="nx">words</span><span class="p">;</span>
|
||||||
|
<span class="p">}</span>
|
||||||
|
<span class="p">...</span></code></pre></figure>
|
||||||
|
|
||||||
|
<p>And change our event listener like so:</p>
|
||||||
|
|
||||||
|
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">const</span> <span class="nx">input</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">'</span><span class="s1">input</span><span class="dl">'</span><span class="p">);</span>
|
||||||
|
<span class="kd">const</span> <span class="nx">results</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">'</span><span class="s1">#results</span><span class="dl">'</span><span class="p">);</span>
|
||||||
|
|
||||||
|
<span class="nx">input</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">keyup</span><span class="dl">'</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
|
||||||
|
<span class="nx">results</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="dl">''</span><span class="p">;</span>
|
||||||
|
|
||||||
|
<span class="kd">const</span> <span class="nx">nodes</span> <span class="o">=</span> <span class="nx">trie</span><span class="p">.</span><span class="nx">findWords</span><span class="p">(</span><span class="nx">input</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span> <span class="c1">// << Change</span>
|
||||||
|
|
||||||
|
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">nodes</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span> <span class="c1">// << Change</span>
|
||||||
|
|
||||||
|
<span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">node</span> <span class="k">of</span> <span class="nx">nodes</span><span class="p">)</span> <span class="p">{</span> <span class="c1">// << Change</span>
|
||||||
|
<span class="kd">const</span> <span class="nx">category</span> <span class="o">=</span> <span class="nx">node</span><span class="p">.</span><span class="nx">category</span> <span class="p">?</span> <span class="s2">`- </span><span class="p">${</span><span class="nx">node</span><span class="p">.</span><span class="nx">category</span><span class="p">}</span><span class="s2">`</span> <span class="p">:</span> <span class="dl">''</span><span class="p">;</span>
|
||||||
|
|
||||||
|
<span class="nx">results</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">+=</span> <span class="s2">`<li></span><span class="p">${</span><span class="nx">node</span><span class="p">.</span><span class="nx">value</span><span class="p">}</span><span class="s2"> </span><span class="p">${</span><span class="nx">category</span><span class="p">}</span><span class="s2"></li>`</span><span class="p">;</span>
|
||||||
|
<span class="p">}</span>
|
||||||
|
<span class="p">});</span></code></pre></figure>
|
||||||
|
|
||||||
|
<p><a href="https://mdibaiee.github.io/autocomplete-trie/2.html">Autocomplete 2</a>
|
||||||
|
<img src="/img/autocomplete-2.png" alt="Autocomplete 2" />
|
||||||
|
Ta-daa!</p>
|
||||||
|
|
||||||
|
<p>We have our autocomplete working! Let’s add zsh-like-tab-to-next-char functionality.</p>
|
||||||
|
|
||||||
|
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">input</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">keydown</span><span class="dl">'</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=></span> <span class="p">{</span>
|
||||||
|
<span class="c1">// Tab Key</span>
|
||||||
|
<span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">keyCode</span> <span class="o">===</span> <span class="mi">9</span><span class="p">)</span> <span class="p">{</span>
|
||||||
|
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
|
||||||
|
<span class="kd">const</span> <span class="nx">current</span> <span class="o">=</span> <span class="nx">trie</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="nx">input</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span>
|
||||||
|
|
||||||
|
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">current</span><span class="p">.</span><span class="nx">children</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>
|
||||||
|
|
||||||
|
<span class="nx">input</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">current</span><span class="p">.</span><span class="nx">children</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">value</span><span class="p">;</span>
|
||||||
|
<span class="p">}</span>
|
||||||
|
<span class="p">});</span></code></pre></figure>
|
||||||
|
|
||||||
|
<p>That’s it! We have an input with autocomplete and tab-to-next-char. Isn’t it awesome?</p>
|
||||||
|
|
||||||
|
<p><a href="https://mdibaiee.github.io/autocomplete-trie/2.html">Final Result</a></p>
|
||||||
|
|
||||||
|
<p><em>Pst! I have a repository of algorithm implementations in ES6, you might want to take a look! <a href="https://github.com/mdibaiee/harmony-algorithms">mdibaiee/harmony-algorithms</a></em></p>
|
||||||
|
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<div class="share-page">
|
||||||
|
Share in
|
||||||
|
|
||||||
|
<a href="https://twitter.com/intent/tweet?text=Autocomplete using Tries&url=http://localhost:4000/autocomplete-predict-trie/&via=&related=" rel="nofollow" target="_blank" title="Share on Twitter">Twitter</a>
|
||||||
|
<a href="https://facebook.com/sharer.php?u=http://localhost:4000/autocomplete-predict-trie/" rel="nofollow" target="_blank" title="Share on Facebook">Facebook</a>
|
||||||
|
<a href="https://plus.google.com/share?url=http://localhost:4000/autocomplete-predict-trie/" rel="nofollow" target="_blank" title="Share on Google+">Google+</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div id="commento"></div>
|
||||||
|
<script defer
|
||||||
|
src="//commento.mahdi.blog/js/commento.js">
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script src="/js/heading-links.js"></script>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
221
site/broadcastchannel-api/index.html
Normal file
221
site/broadcastchannel-api/index.html
Normal file
@ -0,0 +1,221 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
|
||||||
|
<title>BroadcastChannel API</title>
|
||||||
|
<meta name="description" content="BroadcastChannel APIis a new API used to communicate between same-origin tabs opened by the same user.">
|
||||||
|
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Secular+One|Nunito|Mononoki" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="/css/main.css">
|
||||||
|
<link rel="canonical" href="http://localhost:4000/broadcastchannel-api/">
|
||||||
|
<link rel="alternate" type="application/rss+xml" title="mahdi" href="http://localhost:4000/feed.xml" />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!--<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript"></script>-->
|
||||||
|
|
||||||
|
<script>
|
||||||
|
var channel = new BroadcastChannel('egg');
|
||||||
|
|
||||||
|
channel.addEventListener('message', message => {
|
||||||
|
alert('Got a message from the other tab:\n' + message.data);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<header class="site-header">
|
||||||
|
|
||||||
|
<h1>
|
||||||
|
<a class='site-title' href='/'>
|
||||||
|
mahdi
|
||||||
|
</a>
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<nav>
|
||||||
|
<p>
|
||||||
|
<a href="/snippets">snippets</a>
|
||||||
|
<a href="/art">pictures</a>
|
||||||
|
</p>
|
||||||
|
<!--<p class='categories'>-->
|
||||||
|
<!---->
|
||||||
|
<!---->
|
||||||
|
<!--<a href="">art</a>-->
|
||||||
|
<!---->
|
||||||
|
<!---->
|
||||||
|
<!---->
|
||||||
|
<!---->
|
||||||
|
<!--</p>-->
|
||||||
|
<p>
|
||||||
|
<a href='mailto:mdibaiee@pm.me'>email</a>
|
||||||
|
<a href='https://git.mahdi.blog/mahdi'>git</a>
|
||||||
|
<a href='https://www.librarything.com/profile/mdibaiee'>librarything</a>
|
||||||
|
<a href="http://localhost:4000/feed.xml">feed</a>
|
||||||
|
</p>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="page-content">
|
||||||
|
<div class="wrapper">
|
||||||
|
<h1 class="page-heading"></h1>
|
||||||
|
|
||||||
|
<div class='post lang-en'>
|
||||||
|
|
||||||
|
<div class="post-header">
|
||||||
|
<h1 class="post-title"><p>BroadcastChannel API</p>
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="post-meta">
|
||||||
|
<span>Apr 2, 2015</span>
|
||||||
|
|
||||||
|
• <span>Reading time: 4 minutes</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<article class="post-content">
|
||||||
|
<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API">BroadcastChannel API</a>
|
||||||
|
is a new API used to communicate between same-origin tabs opened by the same user.</p>
|
||||||
|
|
||||||
|
<h1 id="why">Why</h1>
|
||||||
|
<p>Let’s say you open two GitHub tabs, the <a href="https://github.com/rust-lang/rust">rust repository</a> and <a href="https://github.com/stars">your stars</a> page. You decide to star the awesome rust repository, but then you have to
|
||||||
|
refresh your stars page to see your new star. That’s sad. There must be a way for GitHub to refresh
|
||||||
|
your stars page in case you star something in another tab, right?</p>
|
||||||
|
|
||||||
|
<p><img src="/img/broadcast-channels.jpg" alt="Broadcast Channels, SATISFIED" /></p>
|
||||||
|
|
||||||
|
<h1 id="show-me-something">Show me something!</h1>
|
||||||
|
<p>Okay, open another page of my blog in a new tab. Now open up your console and enter this:</p>
|
||||||
|
|
||||||
|
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">channel</span><span class="p">.</span><span class="nx">postMessage</span><span class="p">(</span><span class="dl">'</span><span class="s1">Anybody hears me?</span><span class="dl">'</span><span class="p">);</span></code></pre></figure>
|
||||||
|
|
||||||
|
<p>Boom.</p>
|
||||||
|
|
||||||
|
<p>I’ve put this code in my <code class="language-plaintext highlighter-rouge"><head></code>, pretty simple:</p>
|
||||||
|
|
||||||
|
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">channel</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">BroadcastChannel</span><span class="p">(</span><span class="dl">'</span><span class="s1">egg</span><span class="dl">'</span><span class="p">);</span>
|
||||||
|
|
||||||
|
<span class="nx">channel</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">message</span><span class="dl">'</span><span class="p">,</span> <span class="nx">message</span> <span class="o">=></span> <span class="p">{</span>
|
||||||
|
<span class="nx">alert</span><span class="p">(</span><span class="dl">'</span><span class="s1">Got a message from the other tab:</span><span class="se">\n</span><span class="dl">'</span> <span class="o">+</span> <span class="nx">message</span><span class="p">.</span><span class="nx">data</span><span class="p">);</span>
|
||||||
|
|
||||||
|
<span class="c1">// Egg</span>
|
||||||
|
<span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">'</span><span class="s1">header</span><span class="dl">'</span><span class="p">).</span><span class="nx">classList</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="dl">'</span><span class="s1">channel</span><span class="dl">'</span><span class="p">);</span>
|
||||||
|
<span class="p">});</span></code></pre></figure>
|
||||||
|
|
||||||
|
<h1 id="how">How</h1>
|
||||||
|
<p>BroadcastChannels are pretty easy, here I’m going over the small details.</p>
|
||||||
|
|
||||||
|
<h2 id="creating-channels">Creating channels</h2>
|
||||||
|
<p>BroadcastChannels are constructed with a single argument, their name. Browsing contexts should use
|
||||||
|
this name to communicate over a specified channel. There’s no limit to how many channels you can create.</p>
|
||||||
|
|
||||||
|
<p>In the first sentence of article I said it’s used to communicate between tabs, but it’s actually “browsing contexts”.
|
||||||
|
<a href="http://www.w3.org/TR/html5/browsers.html#browsing-context">Browsing contexts</a> are any environments owning a <code class="language-plaintext highlighter-rouge">Document</code>, e.g. tabs, windows, iframes, etc.</p>
|
||||||
|
|
||||||
|
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">channel</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">BroadcastChannel</span><span class="p">(</span><span class="dl">'</span><span class="s1">star</span><span class="dl">'</span><span class="p">);</span></code></pre></figure>
|
||||||
|
|
||||||
|
<p>Channels have only one property, <code class="language-plaintext highlighter-rouge">name</code>.</p>
|
||||||
|
|
||||||
|
<h2 id="methods">Methods</h2>
|
||||||
|
<p>Channels have two methods:</p>
|
||||||
|
|
||||||
|
<h3 id="postmessagedata-anything">#postMessage(data: Anything)</h3>
|
||||||
|
<p>This is the method used to broadcast a message to everyone subscribed to this channel. <code class="language-plaintext highlighter-rouge">data</code> can be any kind of Object.</p>
|
||||||
|
|
||||||
|
<h3 id="close">#close()</h3>
|
||||||
|
<p>This method is used to leave a channel, in case you don’t want to hear from the channel anymore.</p>
|
||||||
|
|
||||||
|
<p>Try leaving <code class="language-plaintext highlighter-rouge">channel</code> from my blog pages, and posting messages with others.</p>
|
||||||
|
|
||||||
|
<h2 id="events">Events</h2>
|
||||||
|
<p>Channels inherit from <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget"><code class="language-plaintext highlighter-rouge">EventTarget</code></a>, so you can use <code class="language-plaintext highlighter-rouge">addEventListener</code>, <code class="language-plaintext highlighter-rouge">removeEventListener</code> and <code class="language-plaintext highlighter-rouge">dispatchEvent</code> methods.</p>
|
||||||
|
|
||||||
|
<p>Channels have only one event:</p>
|
||||||
|
|
||||||
|
<h3 id="message">message</h3>
|
||||||
|
<p>The event object passed to this event is a <a href="https://developer.mozilla.org/en-US/docs/Web/API/MessageEvent"><code class="language-plaintext highlighter-rouge">MessageEvent</code></a> with the <code class="language-plaintext highlighter-rouge">data</code> property set to the actual message sent using <code class="language-plaintext highlighter-rouge">postMessage</code>.</p>
|
||||||
|
|
||||||
|
<hr />
|
||||||
|
|
||||||
|
<h1 id="another-example">Another example</h1>
|
||||||
|
<p>Let’s Fix GitHub
|
||||||
|
—————-</p>
|
||||||
|
|
||||||
|
<p>Okay, let’s try something cool, I promise you will love it. Open a browser with <a href="http://caniuse.com/#feat=broadcastchannel">BroadcastChannel support</a> and Install <a href="http://www.greasespot.net/">GreaseMonkey</a>.</p>
|
||||||
|
|
||||||
|
<p>You have to add two scripts, one for repository pages, and one for the stars page.</p>
|
||||||
|
|
||||||
|
<p>Click “New User Script”, and fill the inputs like this:</p>
|
||||||
|
|
||||||
|
<p><img src="/img/greasemonkey-new-user-script.png" alt="GreaseMonkey New User Script" /></p>
|
||||||
|
|
||||||
|
<p><img src="/img/greasemonkey-github-stars.png" alt="GreaseMonkey New Script" /></p>
|
||||||
|
|
||||||
|
<p>In the Script Editor, enter this:</p>
|
||||||
|
|
||||||
|
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// join the "Stars" channel</span>
|
||||||
|
<span class="kd">var</span> <span class="nx">channel</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">BroadcastChannel</span><span class="p">(</span><span class="dl">'</span><span class="s1">Stars</span><span class="dl">'</span><span class="p">);</span>
|
||||||
|
|
||||||
|
<span class="c1">// reload the page when someone from a github.com tab broadcasts a message</span>
|
||||||
|
<span class="nx">channel</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">message</span><span class="dl">'</span><span class="p">,</span> <span class="nx">message</span> <span class="o">=></span> <span class="p">{</span>
|
||||||
|
<span class="nx">location</span><span class="p">.</span><span class="nx">reload</span><span class="p">();</span>
|
||||||
|
<span class="p">});</span></code></pre></figure>
|
||||||
|
|
||||||
|
<p>Now create another script and fill the form like this:</p>
|
||||||
|
|
||||||
|
<p><img src="/img/greasemonkey-github-repositories.png" alt="GreaseMonkey New Script" /></p>
|
||||||
|
|
||||||
|
<p>Use this code:</p>
|
||||||
|
|
||||||
|
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// join the "Stars" channel</span>
|
||||||
|
<span class="kd">var</span> <span class="nx">channel</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">BroadcastChannel</span><span class="p">(</span><span class="dl">'</span><span class="s1">Stars</span><span class="dl">'</span><span class="p">);</span>
|
||||||
|
|
||||||
|
<span class="c1">// once the star/unstar forms are submitted, broadcast a message to</span>
|
||||||
|
<span class="c1">// all github.com tabs</span>
|
||||||
|
<span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">.starring-container form</span><span class="dl">'</span><span class="p">).</span><span class="nx">submit</span><span class="p">(</span><span class="nx">e</span> <span class="o">=></span> <span class="p">{</span>
|
||||||
|
<span class="nx">channel</span><span class="p">.</span><span class="nx">postMessage</span><span class="p">(</span><span class="dl">'</span><span class="s1">refresh</span><span class="dl">'</span><span class="p">);</span>
|
||||||
|
<span class="p">});</span></code></pre></figure>
|
||||||
|
|
||||||
|
<p>Save, refresh your pages and Voila! You can now Star/Unstar any repository while your stars page
|
||||||
|
is open, and your stars page will refresh immediately.</p>
|
||||||
|
|
||||||
|
<hr />
|
||||||
|
|
||||||
|
<p>That’s it, I really like this API as it’s best of both worlds, simple and useful.</p>
|
||||||
|
|
||||||
|
<p>There are a lot of things which can be done with help of BroadcastChannels, I would love to hear your feedback on this API.</p>
|
||||||
|
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<div class="share-page">
|
||||||
|
Share in
|
||||||
|
|
||||||
|
<a href="https://twitter.com/intent/tweet?text=BroadcastChannel API&url=http://localhost:4000/broadcastchannel-api/&via=&related=" rel="nofollow" target="_blank" title="Share on Twitter">Twitter</a>
|
||||||
|
<a href="https://facebook.com/sharer.php?u=http://localhost:4000/broadcastchannel-api/" rel="nofollow" target="_blank" title="Share on Facebook">Facebook</a>
|
||||||
|
<a href="https://plus.google.com/share?url=http://localhost:4000/broadcastchannel-api/" rel="nofollow" target="_blank" title="Share on Google+">Google+</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div id="commento"></div>
|
||||||
|
<script defer
|
||||||
|
src="//commento.mahdi.blog/js/commento.js">
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script src="/js/heading-links.js"></script>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
258
site/css-filters/index.html
Normal file
258
site/css-filters/index.html
Normal file
@ -0,0 +1,258 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
|
||||||
|
<title>CSS Filters are awesome!</title>
|
||||||
|
<meta name="description" content="I’ve been working on the CSS Filter Editor widget in Firefox Developer Tools for a couple of weeks, thanks to Patrick Brosset for mentoring me and Tim Nguyen...">
|
||||||
|
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Secular+One|Nunito|Mononoki" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="/css/main.css">
|
||||||
|
<link rel="canonical" href="http://localhost:4000/css-filters/">
|
||||||
|
<link rel="alternate" type="application/rss+xml" title="mahdi" href="http://localhost:4000/feed.xml" />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!--<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript"></script>-->
|
||||||
|
|
||||||
|
<script>
|
||||||
|
var channel = new BroadcastChannel('egg');
|
||||||
|
|
||||||
|
channel.addEventListener('message', message => {
|
||||||
|
alert('Got a message from the other tab:\n' + message.data);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<header class="site-header">
|
||||||
|
|
||||||
|
<h1>
|
||||||
|
<a class='site-title' href='/'>
|
||||||
|
mahdi
|
||||||
|
</a>
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<nav>
|
||||||
|
<p>
|
||||||
|
<a href="/snippets">snippets</a>
|
||||||
|
<a href="/art">pictures</a>
|
||||||
|
</p>
|
||||||
|
<!--<p class='categories'>-->
|
||||||
|
<!---->
|
||||||
|
<!---->
|
||||||
|
<!--<a href="">art</a>-->
|
||||||
|
<!---->
|
||||||
|
<!---->
|
||||||
|
<!---->
|
||||||
|
<!---->
|
||||||
|
<!--</p>-->
|
||||||
|
<p>
|
||||||
|
<a href='mailto:mdibaiee@pm.me'>email</a>
|
||||||
|
<a href='https://git.mahdi.blog/mahdi'>git</a>
|
||||||
|
<a href='https://www.librarything.com/profile/mdibaiee'>librarything</a>
|
||||||
|
<a href="http://localhost:4000/feed.xml">feed</a>
|
||||||
|
</p>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="page-content">
|
||||||
|
<div class="wrapper">
|
||||||
|
<h1 class="page-heading"></h1>
|
||||||
|
|
||||||
|
<div class='post lang-en'>
|
||||||
|
|
||||||
|
<div class="post-header">
|
||||||
|
<h1 class="post-title"><p>CSS Filters are awesome!</p>
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="post-meta">
|
||||||
|
<span>Mar 28, 2015</span>
|
||||||
|
|
||||||
|
• <span>Reading time: 6 minutes</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<article class="post-content">
|
||||||
|
<p>I’ve been working on the <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1055181">CSS Filter Editor widget</a> in Firefox Developer Tools for a couple of weeks, thanks to <a href="https://medium.com/@patrickbrosset">Patrick Brosset</a> for mentoring me and <a href="https://github.com/nt1m">Tim Nguyen</a> for his great contributions.</p>
|
||||||
|
|
||||||
|
<p>Here is an <a href="http://mdibaiee.github.io/CSS-Filter-Tooltip/">online version</a> to use as a playground. This version is modified to be cross-browser and therefore is a little different from the original widget used in Firefox.</p>
|
||||||
|
|
||||||
|
<p>You can also use <a href="http://davidwalsh.name/demo/css-filters.php">David Walsh’s demo</a>, although it doesn’t have as much flexibility.</p>
|
||||||
|
|
||||||
|
<p>CSS Filters are supported by most modern browsers (<a href="http://caniuse.com/#feat=css-filters">Can I Use CSS Filters</a>), if your browser doesn’t support this, please change your browser (I recommend <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>).</p>
|
||||||
|
|
||||||
|
<p>I don’t like long-bla-bla-articles, so let’s get to it.</p>
|
||||||
|
|
||||||
|
<h1 id="introduction">Introduction</h1>
|
||||||
|
|
||||||
|
<p>CSS Filters introduce a few useful effects and some image adjusting functions, namely blur, drop-shadow, contrast, brightness, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter">and a few others</a> which can be really useful if used properly.</p>
|
||||||
|
|
||||||
|
<p>A simple demo showing blur, contrast and brightness combined (hover over image):</p>
|
||||||
|
|
||||||
|
<iframe width="100%" height="300" src="//jsfiddle.net/mdibaiee/zLmyhe7t/embedded/result,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
|
||||||
|
|
||||||
|
<p>I group filters by the type of value they take, let’s explain them briefly:</p>
|
||||||
|
|
||||||
|
<h2 id="length">Length</h2>
|
||||||
|
<p>These filters accept a length value (px, em, cm, <a href="http://www.w3.org/Style/Examples/007/units">etc</a>). blur is the only member of this family.</p>
|
||||||
|
|
||||||
|
<h2 id="percentage">Percentage</h2>
|
||||||
|
<p>These filters accept percentage values, but if you omit the percentage sign, the value is multiplied by 100, e.g. <code class="language-plaintext highlighter-rouge">contrast(2)</code> is another way of writing <code class="language-plaintext highlighter-rouge">contrast(200%)</code>. Negative values have the same effect as zero.</p>
|
||||||
|
|
||||||
|
<p>Most filters explain themselves, I’m not going to repeat `Adjusts ${x} level` like a parrot.</p>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>brightness</li>
|
||||||
|
<li>contrast</li>
|
||||||
|
<li>grayscale</li>
|
||||||
|
<li>invert</li>
|
||||||
|
<li>opacity</li>
|
||||||
|
<li>saturate</li>
|
||||||
|
<li>sepia</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h3 id="invert">invert</h3>
|
||||||
|
|
||||||
|
<p>I first understood how cool this filter can be after I saw Tim Nguyen using this in theme switching. Yeah you can’t invert everything and “Yay, I have a new theme”, but you can use invert on some elements and it works flawlessly, believe me.</p>
|
||||||
|
|
||||||
|
<iframe width="100%" height="100" src="//jsfiddle.net/mdibaiee/373dnby8/embedded/result,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
|
||||||
|
|
||||||
|
<h3 id="opacity">opacity</h3>
|
||||||
|
<p>You might wonder why do we have this function, as we already have an opacity property in CSS, that’s because the opacity property is not hardware accelerated, but the filter property is hardware accelerated in most browsers, which includes this function.</p>
|
||||||
|
|
||||||
|
<h2 id="angle">Angle</h2>
|
||||||
|
<p>hue-rotate is the only function to accept an angle value (degree / radian).</p>
|
||||||
|
|
||||||
|
<p>###hue-rotate
|
||||||
|
If you’re familiar with <a href="https://en.wikipedia.org/wiki/Hue">Hue</a> you probably know that it’s measured by angles. The hue-rotate rotates the hue circle of an image relative to it’s current hue value (360 and 0 have the same results).</p>
|
||||||
|
|
||||||
|
<iframe width="100%" height="300" src="//jsfiddle.net/mdibaiee/smk922fh/embedded/result,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
|
||||||
|
|
||||||
|
<h2 id="special">Special</h2>
|
||||||
|
<p>These filter’s don’t fit in any of the groups above, they have special/mixed values.</p>
|
||||||
|
|
||||||
|
<h3 id="drop-shadow">drop-shadow</h3>
|
||||||
|
<p>The drop-shadow filter accepts a <em>shadow-list</em>, four length values, and one color. box-shadow and text-shadow also accept shadow lists.</p>
|
||||||
|
|
||||||
|
<p>You’re probably familiar with shadow lists already: <code class="language-plaintext highlighter-rouge">drop-shadow(x y radius spread color)</code>. Unfortunaly spread doesn’t work in either Chrome or Firefox as of this writing — It is treated as an error.</p>
|
||||||
|
|
||||||
|
<p>drop-shadow is pretty cool, as it doensn’t have the limitations of box-shadow and text-shadow. box-shadow applies a shadow to the outer shape, but drop-shadow applies a shadow to elements independant to their shape, they might be triangles, PNG’s with transparent background or just anything.</p>
|
||||||
|
|
||||||
|
<p>drop-shadow clones the element’s image, moves it to the offset defined, applies blur and changes it’s color, putting it under the original element. Couldn’t do it better:</p>
|
||||||
|
|
||||||
|
<p><img src="/img/dropshadow.gif" alt="drop-shadow explained" /></p>
|
||||||
|
|
||||||
|
<p>Here is an example, a PNG image with transparent background and a CSS triangle made using the border hack:</p>
|
||||||
|
|
||||||
|
<iframe width="100%" height="150" src="//jsfiddle.net/mdibaiee/z077vbs0/embedded/result,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
|
||||||
|
|
||||||
|
<h3 id="url">url</h3>
|
||||||
|
<p>With the url function we have the power of CSS and SVG Filters in one place. You can reference an SVG element by linking to it with a hash of the filter element’s ID:</p>
|
||||||
|
|
||||||
|
<figure class="highlight"><pre><code class="language-css" data-lang="css"><span class="nt">filter</span><span class="o">:</span> <span class="nt">url</span><span class="o">(/</span><span class="nt">example</span><span class="nc">.svg</span><span class="nf">#filter</span><span class="o">)</span></code></pre></figure>
|
||||||
|
|
||||||
|
<p>If you want to know more about SVG Filters, I recommend <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Filter_effects">MDN’s tutorial on SVG Filters</a>.</p>
|
||||||
|
|
||||||
|
<h3 id="custom">Custom</h3>
|
||||||
|
<p>Now those filters are pretty cool, but what if I told you this is [going to be] done with CSS?</p>
|
||||||
|
|
||||||
|
<p><img src="/img/map.jpg" alt="Map Folding with Custom CSS Filters" /></p>
|
||||||
|
|
||||||
|
<p><span class="image-caption">Source: http://www.adobe.com/devnet/archive/html5/articles/css-shaders.html</span></p>
|
||||||
|
|
||||||
|
<p>Custom Filters allows usage of vertex and fragment shaders which run directly in the GPU. Custom filters’ specs is subject to change, so there’s no implementation yet. For more info on this topic follow the links below:</p>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li><a href="http://alteredqualia.com/css-shaders/article/#shaders">Getting started with CSS custom filters</a></li>
|
||||||
|
<li><a href="http://www.adobe.com/devnet/archive/html5/articles/css-shaders.html">Introducing CSS shaders: Cinematic effects for the web</a></li>
|
||||||
|
<li><a href="http://dev.w3.org/fxtf/custom/">CSS shaders specifications</a></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h1 id="gotchas">Gotchas</h1>
|
||||||
|
|
||||||
|
<p>You now have a basic understanding of filters, good. Here are a few gotchas you’d better know.</p>
|
||||||
|
|
||||||
|
<h2 id="order-matters">Order matters</h2>
|
||||||
|
<p>The order in which filters are applied matters. Take this example:</p>
|
||||||
|
|
||||||
|
<figure class="highlight"><pre><code class="language-css" data-lang="css"><span class="nt">filter</span><span class="o">:</span> <span class="nt">blur</span><span class="o">(</span><span class="err">10</span><span class="nt">px</span><span class="o">)</span> <span class="nt">contrast</span><span class="o">(</span><span class="err">2</span><span class="o">);</span></code></pre></figure>
|
||||||
|
|
||||||
|
<p>Hey, browser, please blur the element, then double the contrast of the blurred element. (blurred parts have their contrast affected)</p>
|
||||||
|
|
||||||
|
<figure class="highlight"><pre><code class="language-css" data-lang="css"><span class="nt">filter</span><span class="o">:</span> <span class="nt">contrast</span><span class="o">(</span><span class="err">2</span><span class="o">)</span> <span class="nt">blur</span><span class="o">(</span><span class="err">10</span><span class="nt">px</span><span class="o">);</span></code></pre></figure>
|
||||||
|
|
||||||
|
<p>Hey browser, please double the contrast of my element, then blur it out. (high contrast image is blurred normally)</p>
|
||||||
|
|
||||||
|
<p>Here is the actual comparison:</p>
|
||||||
|
|
||||||
|
<iframe width="100%" height="300" src="//jsfiddle.net/mdibaiee/608yoqrx/embedded/result,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
|
||||||
|
|
||||||
|
<h2 id="inheritance">Inheritance</h2>
|
||||||
|
|
||||||
|
<p>Okay, you now know the order of filters matters, the filter property is not actually <em>inherited</em>, but when you apply a filter on a parent element, of course it’s children are affected too, but what if the children have their own css filters? Ah-ha! CSS properties are applied bottom-up, which means childrens’ filters are applied first.</p>
|
||||||
|
|
||||||
|
<iframe width="100%" height="300" src="//jsfiddle.net/mdibaiee/o40d7cs7/embedded/result,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
|
||||||
|
|
||||||
|
<h2 id="implementation">Implementation</h2>
|
||||||
|
|
||||||
|
<p>I said using the url function we have “the power of CSS and SVG filters in one place”, but the CSS filters are actually implemented using SVG filters! You know, the functions are actually referencing to an svg generated in the browser. Here is the list of <a href="http://www.w3.org/TR/filter-effects/#ShorthandEquivalents">CSS Filter equivalents</a>.</p>
|
||||||
|
|
||||||
|
<h1 id="go-wild">Go Wild</h1>
|
||||||
|
|
||||||
|
<p>You can use CSS Filter on <em>any</em> element, experiment different things; <code class="language-plaintext highlighter-rouge"><video></code>, <code class="language-plaintext highlighter-rouge"><canvas></code>, <code class="language-plaintext highlighter-rouge"><iframe></code>, GIF images, etc.</p>
|
||||||
|
|
||||||
|
<p>My try (although I couldn’t get the GIF and CSS animation to be in sync, know a solution? Leave a comment please):</p>
|
||||||
|
|
||||||
|
<iframe width="100%" height="300" src="//jsfiddle.net/mdibaiee/hjaL0ka3/embedded/result,css,js" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
|
||||||
|
|
||||||
|
<hr />
|
||||||
|
|
||||||
|
<p>That’s it, you can subscribe to my <a href="http://localhost:4000/feed.xml">RSS</a> or follow me on <a href="https://twitter.com/">Twitter</a> to get more articles like this.</p>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
#mahdi {
|
||||||
|
transition: filter 1s ease;
|
||||||
|
-webkit-transition: filter 1s ease;
|
||||||
|
}
|
||||||
|
#mahdi:hover {
|
||||||
|
filter: blur(3px);
|
||||||
|
-webkit-filter: blur(3px);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<div class="share-page">
|
||||||
|
Share in
|
||||||
|
|
||||||
|
<a href="https://twitter.com/intent/tweet?text=CSS Filters are awesome!&url=http://localhost:4000/css-filters/&via=&related=" rel="nofollow" target="_blank" title="Share on Twitter">Twitter</a>
|
||||||
|
<a href="https://facebook.com/sharer.php?u=http://localhost:4000/css-filters/" rel="nofollow" target="_blank" title="Share on Facebook">Facebook</a>
|
||||||
|
<a href="https://plus.google.com/share?url=http://localhost:4000/css-filters/" rel="nofollow" target="_blank" title="Share on Google+">Google+</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div id="commento"></div>
|
||||||
|
<script defer
|
||||||
|
src="//commento.mahdi.blog/js/commento.js">
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script src="/js/heading-links.js"></script>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
BIN
site/css/fonts/Damion_gdi.woff
Normal file
BIN
site/css/fonts/Damion_gdi.woff
Normal file
Binary file not shown.
BIN
site/css/fonts/KaTeX_AMS-Regular.eot
Normal file
BIN
site/css/fonts/KaTeX_AMS-Regular.eot
Normal file
Binary file not shown.
BIN
site/css/fonts/KaTeX_AMS-Regular.ttf
Normal file
BIN
site/css/fonts/KaTeX_AMS-Regular.ttf
Normal file
Binary file not shown.
BIN
site/css/fonts/KaTeX_AMS-Regular.woff
Normal file
BIN
site/css/fonts/KaTeX_AMS-Regular.woff
Normal file
Binary file not shown.
BIN
site/css/fonts/KaTeX_AMS-Regular.woff2
Normal file
BIN
site/css/fonts/KaTeX_AMS-Regular.woff2
Normal file
Binary file not shown.
BIN
site/css/fonts/KaTeX_Caligraphic-Bold.eot
Normal file
BIN
site/css/fonts/KaTeX_Caligraphic-Bold.eot
Normal file
Binary file not shown.
BIN
site/css/fonts/KaTeX_Caligraphic-Bold.ttf
Normal file
BIN
site/css/fonts/KaTeX_Caligraphic-Bold.ttf
Normal file
Binary file not shown.
BIN
site/css/fonts/KaTeX_Caligraphic-Bold.woff
Normal file
BIN
site/css/fonts/KaTeX_Caligraphic-Bold.woff
Normal file
Binary file not shown.
BIN
site/css/fonts/KaTeX_Caligraphic-Bold.woff2
Normal file
BIN
site/css/fonts/KaTeX_Caligraphic-Bold.woff2
Normal file
Binary file not shown.
BIN
site/css/fonts/KaTeX_Caligraphic-Regular.eot
Normal file
BIN
site/css/fonts/KaTeX_Caligraphic-Regular.eot
Normal file
Binary file not shown.
BIN
site/css/fonts/KaTeX_Caligraphic-Regular.ttf
Normal file
BIN
site/css/fonts/KaTeX_Caligraphic-Regular.ttf
Normal file
Binary file not shown.
BIN
site/css/fonts/KaTeX_Caligraphic-Regular.woff
Normal file
BIN
site/css/fonts/KaTeX_Caligraphic-Regular.woff
Normal file
Binary file not shown.
BIN
site/css/fonts/KaTeX_Caligraphic-Regular.woff2
Normal file
BIN
site/css/fonts/KaTeX_Caligraphic-Regular.woff2
Normal file
Binary file not shown.
BIN
site/css/fonts/KaTeX_Fraktur-Bold.eot
Normal file
BIN
site/css/fonts/KaTeX_Fraktur-Bold.eot
Normal file
Binary file not shown.
BIN
site/css/fonts/KaTeX_Fraktur-Bold.ttf
Normal file
BIN
site/css/fonts/KaTeX_Fraktur-Bold.ttf
Normal file
Binary file not shown.
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user