diff options
| author | Mitja Felicijan <mitja.felicijan@gmail.com> | 2019-01-08 16:08:02 +0100 |
|---|---|---|
| committer | Mitja Felicijan <mitja.felicijan@gmail.com> | 2019-01-08 16:08:02 +0100 |
| commit | 5845a5be3c0cc86d6fca3c44e26f9cbf77931a05 (patch) | |
| tree | 658a7bc8e91554f10c154573b56a2c440ca16b09 | |
| parent | 1d321a51fdadf4c409d7e7d00096c51754bd0113 (diff) | |
| download | mitjafelicijan.com-5845a5be3c0cc86d6fca3c44e26f9cbf77931a05.tar.gz | |
Added author and update on editor
19 files changed, 361 insertions, 141 deletions
diff --git a/.jekyll-metadata b/.jekyll-metadata index 9bf8625..a99ba2b 100644 --- a/.jekyll-metadata +++ b/.jekyll-metadata | |||
| Binary files differ | |||
diff --git a/_drafts/2019-01-03-encoding-binary-data-into-dna-sequence.md b/_drafts/2019-01-03-encoding-binary-data-into-dna-sequence.md new file mode 100644 index 0000000..14e5efe --- /dev/null +++ b/_drafts/2019-01-03-encoding-binary-data-into-dna-sequence.md | |||
| @@ -0,0 +1,144 @@ | |||
| 1 | --- | ||
| 2 | |||
| 3 | layout: post | ||
| 4 | title: Encoding binary data into DNA sequence | ||
| 5 | description: ok | ||
| 6 | |||
| 7 | --- | ||
| 8 | |||
| 9 | **Table of contents** | ||
| 10 | |||
| 11 | 1. [Initial thoughts](#initial-thoughts) | ||
| 12 | 2. [Data encoding](#data-encoding) | ||
| 13 | 3. [Glossary](#glossary) | ||
| 14 | 4. [Bit of theory and history](#bit-of-theory-and-history) | ||
| 15 | 1. [Quick history of DNA](#quick-history-of-dna) | ||
| 16 | 2. [What is DNA?](#what-is-dna) | ||
| 17 | 5. [Encode binary data into DNA sequence](#encode-binary-data-into-dna-sequence) | ||
| 18 | 1. [Basic Encoding](#basic-encoding) | ||
| 19 | 2. [FASTA file format](#fasta-file-format) | ||
| 20 | 3. [PNG encoded DNA sequence](#png-encoded-dna-sequence) | ||
| 21 | 6. [References](#references) | ||
| 22 | |||
| 23 | ## Initial thoughts | ||
| 24 | |||
| 25 | Todo ... | ||
| 26 | |||
| 27 | ## Data encoding | ||
| 28 | |||
| 29 | **TL;DR:** Encoding involves the use of a code to change original data into a form that can be used by an external process [^1]. | ||
| 30 | |||
| 31 | Encoding is the process of converting data into a format required for a number of information processing needs, including: | ||
| 32 | |||
| 33 | - Program compiling and execution | ||
| 34 | - Data transmission, storage and compression/decompression | ||
| 35 | - Application data processing, such as file conversion | ||
| 36 | |||
| 37 | Encoding can have two meanings[^1]: | ||
| 38 | |||
| 39 | - In computer technology, encoding is the process of applying a specific code, such as letters, symbols and numbers, to data for conversion into an equivalent cipher. | ||
| 40 | - In electronics, encoding refers to analog to digital conversion. | ||
| 41 | |||
| 42 | ## Glossary | ||
| 43 | |||
| 44 | **deoxyribose** | ||
| 45 | : A five-carbon sugar molecule with a hydrogen atom rather than a hydroxyl group in the 2′ position; the sugar component of DNA nucleotides. | ||
| 46 | |||
| 47 | **double helix** | ||
| 48 | : The molecular shape of DNA in which two strands of nucleotides wind around each other in a spiral shape. | ||
| 49 | |||
| 50 | **nitrogenous base** | ||
| 51 | : A nitrogen-containing molecule that acts as a base; often referring to one of the purine or pyrimidine components of nucleic acids. | ||
| 52 | |||
| 53 | **phosphate group** | ||
| 54 | : A molecular group consisting of a central phosphorus atom bound to four oxygen atoms. | ||
| 55 | |||
| 56 | ## Bit of theory and history | ||
| 57 | |||
| 58 | History and explanation of what DNA is and where is used. | ||
| 59 | |||
| 60 | ### Quick history of DNA | ||
| 61 | |||
| 62 | - **1869** - Friedrich Miescher identifies "nuclein". | ||
| 63 | - **1900s** - The Eugenics Movement. | ||
| 64 | - **1900** – Mendel's theories are rediscovered by researchers. | ||
| 65 | - **1902** - Sir Archibald Edward Garrod is the first to associate Mendel's theories with a human disease. | ||
| 66 | - **1944** - Oswald Avery identifies DNA as the 'transforming principle'. | ||
| 67 | - **1950** - Erwin Chargaff discovers that DNA composition is species specific. | ||
| 68 | - **1952** - Rosalind Franklin photographs crystallized DNA fibres. | ||
| 69 | - **1953** - James Watson and Francis Crick discover the double helix structure of DNA. | ||
| 70 | - **1953** - George Gamow and the “RNA Tie Club”. | ||
| 71 | - **1959** - An additional copy of chromosome 21 linked to Down's syndrome. | ||
| 72 | - **1965** - Marshall Nirenberg is the first person to sequence the bases in each codon. | ||
| 73 | - **1977** - Frederick Sanger develops rapid DNA sequencing techniques. | ||
| 74 | - **1983** - Huntington's disease is the first mapped genetic disease. | ||
| 75 | - **1990** - The first gene found to be associated with increased susceptibility to familial breast and ovarian cancer is identified. | ||
| 76 | - **1990** - The Human Genome Project begins. | ||
| 77 | - **1995** - Haemophilus Influenzae is the first bacterium genome sequenced. | ||
| 78 | - **1996** - Dolly the sheep is cloned. | ||
| 79 | - **1996** - 'Bermuda Principles' established. | ||
| 80 | - **1999** - First human chromosome is decoded. | ||
| 81 | - **2000** – Genetic code of the fruit fly is decoded. | ||
| 82 | - **2002** – Mouse is the first mammal to have its genome decoded. | ||
| 83 | - **2003** – The Human Genome Project is completed. | ||
| 84 | - **2013** – DNA Worldwide and Eurofins Forensic discover identical twins have differences in their genetic makeup [^2]. | ||
| 85 | |||
| 86 | ### What is DNA? | ||
| 87 | |||
| 88 | Deoxyribonucleic acid, a self-replicating material which is **present in nearly all living organisms** as the main constituent of chromosomes. It is the **carrier of genetic information**. | ||
| 89 | |||
| 90 | > The nitrogen in our DNA, the calcium in our teeth, the iron in our blood, the carbon in our apple pies were made in the interiors of collapsing stars. We are made of starstuff. | ||
| 91 | > | ||
| 92 | > **-- Carl Sagan, Cosmos** | ||
| 93 | |||
| 94 | The nucleotide in DNA consists of a sugar (deoxyribose), one of four bases (cytosine (C), thymine (T), adenine (A), guanine (G)), and a phosphate. Cytosine and thymine are pyrimidine bases, while adenine and guanine are purine bases. The sugar and the base together are called a nucleoside. | ||
| 95 | |||
| 96 |  | ||
| 97 | |||
| 98 | *DNA (a) forms a double stranded helix, and (b) adenine pairs with thymine and cytosine pairs with guanine. (credit a: modification of work by Jerome Walker, Dennis Myts) [^3]* | ||
| 99 | |||
| 100 | ## Encode binary data into DNA sequence | ||
| 101 | |||
| 102 | Todo ... | ||
| 103 | |||
| 104 | As an input file you can use any file you want: | ||
| 105 | - ASCII files, | ||
| 106 | - Compiled programs, | ||
| 107 | - Multimedia files (MP3, MP4, MVK, etc), | ||
| 108 | - Images, | ||
| 109 | - Database files, | ||
| 110 | - etc. | ||
| 111 | |||
| 112 | Note: If you would copy all the bytes from RAM to file or pipe data to file you could encode also this data as long as you provide file pointer to the encoder. | ||
| 113 | |||
| 114 | ### Basic Encoding | ||
| 115 | |||
| 116 | As already mentioned, the Basic Encoding is based on a simple mapping. Since DNA is composed of 4 nucleotides (Adenine, Cytosine, Guanine, Thymine; usually referred using the first letter). Using this technique we can encode log<sub>2</sub>(4) = log<sub>2</sub>(2<sup>2</sup>) = 2 bits using a single nucleotide. In this way, we are able to use the 4 bases that compose the DNA strand to encode each byte of data. [^4] | ||
| 117 | |||
| 118 | | Two bits | Nucleotides | | ||
| 119 | | -------- | ---------------- | | ||
| 120 | | 00 | **A** (Adenine) | | ||
| 121 | | 10 | **G** (Guanine) | | ||
| 122 | | 01 | **C** (Cytosine) | | ||
| 123 | | 11 | **T** (Thymine) | | ||
| 124 | |||
| 125 | With this in mind we can simply encode any data by using two-bit to Nucleotides conversion | ||
| 126 | |||
| 127 |  | ||
| 128 | |||
| 129 | ### FASTA file format | ||
| 130 | |||
| 131 | Todo ... | ||
| 132 | |||
| 133 | ### PNG encoded DNA sequence | ||
| 134 | |||
| 135 | Todo ... | ||
| 136 | |||
| 137 | |||
| 138 | |||
| 139 | ## References | ||
| 140 | |||
| 141 | [^1]: https://www.techopedia.com/definition/948/encoding | ||
| 142 | [^2]: https://www.dna-worldwide.com/resource/160/history-dna-timeline | ||
| 143 | [^3]: https://opentextbc.ca/biology/chapter/9-1-the-structure-of-dna/ | ||
| 144 | [^4]: https://arxiv.org/abs/1801.04774 | ||
diff --git a/_includes/site.css b/_includes/site.css index e97f5ca..117ad5f 100644 --- a/_includes/site.css +++ b/_includes/site.css | |||
| @@ -82,6 +82,11 @@ article img { | |||
| 82 | display: block; | 82 | display: block; |
| 83 | } | 83 | } |
| 84 | 84 | ||
| 85 | article img[src*='#center'] { | ||
| 86 | display: block; | ||
| 87 | margin: auto; | ||
| 88 | } | ||
| 89 | |||
| 85 | time { | 90 | time { |
| 86 | display: block; | 91 | display: block; |
| 87 | font-size: 85%; | 92 | font-size: 85%; |
| @@ -190,6 +195,13 @@ ol li a { | |||
| 190 | text-decoration: none; | 195 | text-decoration: none; |
| 191 | } | 196 | } |
| 192 | 197 | ||
| 198 | /* footnotes */ | ||
| 199 | .footnotes p { | ||
| 200 | padding: 0; | ||
| 201 | display: inline-block; | ||
| 202 | margin: 0; | ||
| 203 | } | ||
| 204 | |||
| 193 | /* commenting */ | 205 | /* commenting */ |
| 194 | #hcb_form_name, | 206 | #hcb_form_name, |
| 195 | #hcb_form_content { | 207 | #hcb_form_content { |
| @@ -239,6 +251,10 @@ ol li a { | |||
| 239 | h1 { | 251 | h1 { |
| 240 | font-size: 200%; | 252 | font-size: 200%; |
| 241 | } | 253 | } |
| 254 | |||
| 255 | .footnotes { | ||
| 256 | overflow: auto; | ||
| 257 | } | ||
| 242 | } | 258 | } |
| 243 | 259 | ||
| 244 | @media print { | 260 | @media print { |
diff --git a/_includes/site.min.css b/_includes/site.min.css index 539ea8b..57c5c7c 100644 --- a/_includes/site.min.css +++ b/_includes/site.min.css | |||
| @@ -1 +1 @@ | |||
| a,body,header a{color:#000}header a,main ul li a,nav ul li a,ol li a{text-decoration:none}#hcb_submit,nav ul li,ol li::before{display:inline-block}#hcb_submit,summary{cursor:pointer;user-select:none}@font-face{font-family:Yrsa;font-style:normal;font-weight:300;src:local('Yrsa Light'),local('Yrsa-Light'),url(https://fonts.gstatic.com/s/yrsa/v3/wlpxgwnQFlxs3af97I0x2Q.ttf) format('truetype')}@font-face{font-family:Yrsa;font-style:normal;font-weight:400;src:local('Yrsa Regular'),local('Yrsa-Regular'),url(https://fonts.gstatic.com/s/yrsa/v3/wlp-gwnQFlxs1QLf_A.ttf) format('truetype')}@font-face{font-family:Yrsa;font-style:normal;font-weight:500;src:local('Yrsa Medium'),local('Yrsa-Medium'),url(https://fonts.gstatic.com/s/yrsa/v3/wlpxgwnQFlxs3f_87I0x2Q.ttf) format('truetype')}@font-face{font-family:Yrsa;font-style:normal;font-weight:600;src:local('Yrsa SemiBold'),local('Yrsa-SemiBold'),url(https://fonts.gstatic.com/s/yrsa/v3/wlpxgwnQFlxs3dP77I0x2Q.ttf) format('truetype')}@font-face{font-family:Yrsa;font-style:normal;font-weight:700;src:local('Yrsa Bold'),local('Yrsa-Bold'),url(https://fonts.gstatic.com/s/yrsa/v3/wlpxgwnQFlxs3bf67I0x2Q.ttf) format('truetype')}*{box-sizing:border-box}body{font-family:Yrsa,Roboto,'Times New Roman',Times,serif;font-size:22px;line-height:1.6;margin:0;padding:0 0 50px}a:hover{background:#ff0}article,footer,header,main,nav{max-width:800px;margin:0 auto}header{margin-top:30px}header a{font-size:150%;font-weight:700}nav ul{margin-top:10px;padding:0}nav ul li a{color:#444;font-size:85%;margin-right:20px}h1{font-size:200%;line-height:120%}h2{font-size:160%}h3{font-size:140%}h4{font-size:120%}article img{max-width:100%;display:block}time{display:block;font-size:85%;color:#444}ul{list-style-type:square}main ul{margin-top:40px;padding:0 20px}main ul li{margin-bottom:25px;margin-left:-20px;list-style-type:none}main ul li a{font-size:100%;font-weight:600}main ul div{font-size:116%}blockquote{margin:40px 0 40px 20px;border-left:5px solid #eee;padding:5px 0 10px 20px}.highlighter-rouge,table,table td,table th{border:2px solid #f1f1f1}table{width:100%;border-collapse:collapse;border-spacing:0}table td,table th{text-align:left;padding:5px 10px}summary{outline:0;font-weight:600}details .highlighter-rouge{margin-top:10px!important}.highlighter-rouge{padding:0 15px;font-size:60%;overflow:auto}.highlighter-rouge table,.highlighter-rouge table td{border:0!important}::selection{background:#ff0;color:#000}::-moz-selection{background:#ff0;color:#000}ol{list-style:none;counter-reset:li}ol li{counter-increment:li}ol li::before{content:counter(li) ".";color:#ccc;font-weight:500;width:1em;margin-left:-1.5em;margin-right:.9em;text-align:right}#hcb_form_content,#hcb_form_name{border:2px solid #eee;padding:10px;width:300px;margin-bottom:10px}#hcb_submit{-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;-ms-appearance:none;appearance:none;font-weight:600;padding:7px 15px;font-size:85%;border-radius:3px;background:#ccc;border:2px solid transparent;width:auto;text-align:center;height:auto;margin-right:20px}@media only screen and (max-width:768px){body{padding:0 20px}footer,header,nav{text-align:center}.responsive-table{width:100%;overflow:scroll}h1{font-size:200%}}@media print{@page{margin:2cm}.comments,header,nav{display:none}} \ No newline at end of file | a,body,header a{color:#000}header a,main ul li a,nav ul li a,ol li a{text-decoration:none}#hcb_submit,.footnotes p,nav ul li,ol li::before{display:inline-block}#hcb_submit,summary{cursor:pointer;user-select:none}@font-face{font-family:Yrsa;font-style:normal;font-weight:300;src:local('Yrsa Light'),local('Yrsa-Light'),url(https://fonts.gstatic.com/s/yrsa/v3/wlpxgwnQFlxs3af97I0x2Q.ttf) format('truetype')}@font-face{font-family:Yrsa;font-style:normal;font-weight:400;src:local('Yrsa Regular'),local('Yrsa-Regular'),url(https://fonts.gstatic.com/s/yrsa/v3/wlp-gwnQFlxs1QLf_A.ttf) format('truetype')}@font-face{font-family:Yrsa;font-style:normal;font-weight:500;src:local('Yrsa Medium'),local('Yrsa-Medium'),url(https://fonts.gstatic.com/s/yrsa/v3/wlpxgwnQFlxs3f_87I0x2Q.ttf) format('truetype')}@font-face{font-family:Yrsa;font-style:normal;font-weight:600;src:local('Yrsa SemiBold'),local('Yrsa-SemiBold'),url(https://fonts.gstatic.com/s/yrsa/v3/wlpxgwnQFlxs3dP77I0x2Q.ttf) format('truetype')}@font-face{font-family:Yrsa;font-style:normal;font-weight:700;src:local('Yrsa Bold'),local('Yrsa-Bold'),url(https://fonts.gstatic.com/s/yrsa/v3/wlpxgwnQFlxs3bf67I0x2Q.ttf) format('truetype')}*{box-sizing:border-box}body{font-family:Yrsa,Roboto,'Times New Roman',Times,serif;font-size:22px;line-height:1.6;margin:0;padding:0 0 50px}a:hover{background:#ff0}article,footer,header,main,nav{max-width:800px;margin:0 auto}header{margin-top:30px}header a{font-size:150%;font-weight:700}nav ul{margin-top:10px;padding:0}nav ul li a{color:#444;font-size:85%;margin-right:20px}h1{font-size:200%;line-height:120%}h2{font-size:160%}h3{font-size:140%}h4{font-size:120%}article img{max-width:100%;display:block}article img[src*='#center']{display:block;margin:auto}time{display:block;font-size:85%;color:#444}ul{list-style-type:square}main ul{margin-top:40px;padding:0 20px}main ul li{margin-bottom:25px;margin-left:-20px;list-style-type:none}main ul li a{font-size:100%;font-weight:600}main ul div{font-size:116%}blockquote{margin:40px 0 40px 20px;border-left:5px solid #eee;padding:5px 0 10px 20px}.highlighter-rouge,table,table td,table th{border:2px solid #f1f1f1}table{width:100%;border-collapse:collapse;border-spacing:0}table td,table th{text-align:left;padding:5px 10px}summary{outline:0;font-weight:600}details .highlighter-rouge{margin-top:10px!important}.highlighter-rouge{padding:0 15px;font-size:60%;overflow:auto}.highlighter-rouge table,.highlighter-rouge table td{border:0!important}::selection{background:#ff0;color:#000}::-moz-selection{background:#ff0;color:#000}ol{list-style:none;counter-reset:li}ol li{counter-increment:li}ol li::before{content:counter(li) ".";color:#ccc;font-weight:500;width:1em;margin-left:-1.5em;margin-right:.9em;text-align:right}.footnotes p{padding:0;margin:0}#hcb_form_content,#hcb_form_name{border:2px solid #eee;padding:10px;width:300px;margin-bottom:10px}#hcb_submit{-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;-ms-appearance:none;appearance:none;font-weight:600;padding:7px 15px;font-size:85%;border-radius:3px;background:#ccc;border:2px solid transparent;width:auto;text-align:center;height:auto;margin-right:20px}@media only screen and (max-width:768px){body{padding:0 20px}footer,header,nav{text-align:center}.responsive-table{width:100%;overflow:scroll}h1{font-size:200%}.footnotes{overflow:auto}}@media print{@page{margin:2cm}.comments,header,nav{display:none}} \ No newline at end of file | ||
diff --git a/_layouts/post.html b/_layouts/post.html index 13ffece..d0d1319 100644 --- a/_layouts/post.html +++ b/_layouts/post.html | |||
| @@ -1,82 +1,59 @@ | |||
| 1 | <!DOCTYPE html> | 1 | <!DOCTYPE html> |
| 2 | <html lang="en"> | 2 | <html lang="en"> |
| 3 | <head> | 3 | |
| 4 | <meta charset="utf-8" /> | 4 | <head> |
| 5 | 5 | <meta charset="utf-8" /> | |
| 6 | <meta http-equiv="x-ua-compatible" content="ie=edge" /> | 6 | |
| 7 | <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=5" /> | 7 | <meta http-equiv="x-ua-compatible" content="ie=edge" /> |
| 8 | 8 | <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=5" /> | |
| 9 | <meta name="theme-color" content="{{ site.theme_color }}" /> | 9 | |
| 10 | <meta name="author" content="{{ site.author }}" /> | 10 | <meta name="theme-color" content="{{ site.theme_color }}" /> |
| 11 | <meta name="description" content="{{ page.description }}" /> | 11 | <meta name="author" content="{{ site.author }}" /> |
| 12 | 12 | <meta name="description" content="{{ page.description }}" /> | |
| 13 | <meta name="google-site-verification" content="EwUGW1WlCkRIQuyQ9AE1-bLitWthw-eVMZFTAMZVZaA" /> | 13 | |
| 14 | 14 | <meta name="google-site-verification" content="EwUGW1WlCkRIQuyQ9AE1-bLitWthw-eVMZFTAMZVZaA" /> | |
| 15 | <title>{{ page.title }}</title> | 15 | |
| 16 | 16 | <title>{{ page.title }}</title> | |
| 17 | <link rel="icon" type="image/gif" href="/{{ site.avatar }}?ver={{ site.cache_version }}" /> | 17 | |
| 18 | 18 | <link rel="icon" type="image/gif" href="/{{ site.avatar }}?ver={{ site.cache_version }}" /> | |
| 19 | <meta name="og:url" content="{{ site.domain }}{{ page.slug }}" /> | 19 | |
| 20 | <meta name="og:type" content="website" /> | 20 | <meta name="og:url" content="{{ site.domain }}{{ page.slug }}" /> |
| 21 | <meta name="og:title" content="{{ page.title }}" /> | 21 | <meta name="og:type" content="website" /> |
| 22 | <meta name="og:description" content="{{ page.description }}" /> | 22 | <meta name="og:title" content="{{ page.title }}" /> |
| 23 | <meta name="og:image" content="{{ site.domain }}{{ site.avatar }}?ver={{ site.cache_version }}" /> | 23 | <meta name="og:description" content="{{ page.description }}" /> |
| 24 | 24 | <meta name="og:image" content="{{ site.domain }}{{ site.avatar }}?ver={{ site.cache_version }}" /> | |
| 25 | <meta name="twitter:card" content="summary" /> | 25 | |
| 26 | <meta name="twitter:site" content="{{ site.twitter }}" /> | 26 | <meta name="twitter:card" content="summary" /> |
| 27 | <meta name="twitter:title" content="{{ page.title }}" /> | 27 | <meta name="twitter:site" content="{{ site.twitter }}" /> |
| 28 | <meta name="twitter:description" content="{{ page.description }}" /> | 28 | <meta name="twitter:title" content="{{ page.title }}" /> |
| 29 | <meta name="twitter:image" content="{{ site.domain }}{{ site.avatar }}?ver={{ site.cache_version }}" /> | 29 | <meta name="twitter:description" content="{{ page.description }}" /> |
| 30 | 30 | <meta name="twitter:image" content="{{ site.domain }}{{ site.avatar }}?ver={{ site.cache_version }}" /> | |
| 31 | <link rel="manifest" href="/assets/manifest.json?ver={{ site.cache_version }}" /> | 31 | |
| 32 | 32 | <link rel="manifest" href="/assets/manifest.json?ver={{ site.cache_version }}" /> | |
| 33 | <style> | 33 | |
| 34 | {% include site.min.css %} | 34 | <style> |
| 35 | {% include highlight.min.css %} | 35 | {% include site.min.css %} |
| 36 | </style> | 36 | {% include highlight.min.css %} |
| 37 | </head> | 37 | </style> |
| 38 | 38 | </head> | |
| 39 | <body> | 39 | |
| 40 | {% include header.html %} | 40 | <body> |
| 41 | 41 | {% include header.html %} | |
| 42 | <article> | 42 | |
| 43 | <h1>{{ page.title }}</h1> | 43 | <article> |
| 44 | 44 | ||
| 45 | <time datetime="{{ page.date | date: '%Y-%m-%d' }}">{{ page.date | date: '%A, %B %-d, %Y' }}</time> | 45 | <h1>{{ page.title }}</h1> |
| 46 | 46 | ||
| 47 | {{ content }} | 47 | <time datetime="{{ page.date | date: '%Y-%m-%d' }}">{{ page.date | date: '%A, %B %-d, %Y' }}, by {{ site.author }}</time> |
| 48 | 48 | ||
| 49 | <!-- | 49 | {{ content }} |
| 50 | <div id="HCB_comment_box" class="comments">Loading comments ...</div> | 50 | |
| 51 | <script type="text/javascript" id="hcb"> | 51 | </article> |
| 52 | if (!window.hcb_user) { | 52 | |
| 53 | hcb_user = { | 53 | {% include footer.html %} |
| 54 | logout_link: "logout", | 54 | |
| 55 | admin_link: "admin", | 55 | <!-- Linked data - Article --> |
| 56 | reply: "reply", | 56 | <script type="application/ld+json"> |
| 57 | flag: "flag", | ||
| 58 | like: "like", | ||
| 59 | prev_page: "prev", | ||
| 60 | next_page: "next", | ||
| 61 | }; | ||
| 62 | } | ||
| 63 | hcb_user.PAGE = "{{ site.domain }}"; | ||
| 64 | (function() { | ||
| 65 | var s = document.createElement("script"), | ||
| 66 | l = hcb_user.PAGE || ("" + window.location).replace(/'/g, "%27"), | ||
| 67 | h = "//www.htmlcommentbox.com"; | ||
| 68 | s.setAttribute("type", "text/javascript"); | ||
| 69 | s.setAttribute("src", h + "/jread?page=" + encodeURIComponent(l).replace("+", "%2B") + "&mod=%241%24wq1rdBcg%24MpQDCL74rJm9DREvceKL%2F1" + "&opts=16399&num=10&ts=1490664489345"); | ||
| 70 | if (typeof s != "undefined") document.getElementsByTagName("head")[0].appendChild(s); | ||
| 71 | })(); | ||
| 72 | </script> | ||
| 73 | --> | ||
| 74 | </article> | ||
| 75 | |||
| 76 | {% include footer.html %} | ||
| 77 | |||
| 78 | <!-- Linked data - Article --> | ||
| 79 | <script type="application/ld+json"> | ||
| 80 | { | 57 | { |
| 81 | "@context": "http://schema.org", | 58 | "@context": "http://schema.org", |
| 82 | "@type": "NewsArticle", | 59 | "@type": "NewsArticle", |
| @@ -106,5 +83,6 @@ | |||
| 106 | "description": "{{ page.description }}" | 83 | "description": "{{ page.description }}" |
| 107 | } | 84 | } |
| 108 | </script> | 85 | </script> |
| 109 | </body> | 86 | </body> |
| 110 | </html> | 87 | |
| 88 | </html> \ No newline at end of file | ||
diff --git a/_posts/2015-11-10-software-development-pitfalls.md b/_posts/2015-11-10-software-development-pitfalls.md index 5e7279c..ffee159 100644 --- a/_posts/2015-11-10-software-development-pitfalls.md +++ b/_posts/2015-11-10-software-development-pitfalls.md | |||
| @@ -1,7 +1,9 @@ | |||
| 1 | --- | 1 | --- |
| 2 | |||
| 2 | layout: post | 3 | layout: post |
| 3 | title: Software development and my favorite pitfalls | 4 | title: Software development and my favorite pitfalls |
| 4 | description: Couple of observations regarding project management. | 5 | description: Couple of observations regarding project management. |
| 6 | |||
| 5 | --- | 7 | --- |
| 6 | 8 | ||
| 7 | **Table of contents** | 9 | **Table of contents** |
diff --git a/_posts/2016-10-14-how-we-successfully-destroyed-the-joy-of-product-development.md b/_posts/2016-10-14-how-we-successfully-destroyed-the-joy-of-product-development.md index 28c936a..45028ad 100644 --- a/_posts/2016-10-14-how-we-successfully-destroyed-the-joy-of-product-development.md +++ b/_posts/2016-10-14-how-we-successfully-destroyed-the-joy-of-product-development.md | |||
| @@ -1,7 +1,9 @@ | |||
| 1 | --- | 1 | --- |
| 2 | |||
| 2 | layout: post | 3 | layout: post |
| 3 | title: How we successfully destroyed the joy of product development | 4 | title: How we successfully destroyed the joy of product development |
| 4 | description: My take on project development. | 5 | description: My take on project development. |
| 6 | |||
| 5 | --- | 7 | --- |
| 6 | 8 | ||
| 7 | No matter how hard we try to reinvent processes in software development we still haven’t found perfect solution for this. And to dismiss SDLC just because it’s something old is as ridiculous as the concept of designers being user experience gurus. As I have written couple of times before designers have their place and is not in the UX community. Most of them probably never heard of Jakob Nielsen and this proves a lot. Don’t get me wrong. There are designers out there that are absolutely amazing in what they do, but most of them are not. Good design has little to do with how things look in my opinion. But it has very much to do with how product behaves. And to take a chance on design look only is scary to me. | 9 | No matter how hard we try to reinvent processes in software development we still haven’t found perfect solution for this. And to dismiss SDLC just because it’s something old is as ridiculous as the concept of designers being user experience gurus. As I have written couple of times before designers have their place and is not in the UX community. Most of them probably never heard of Jakob Nielsen and this proves a lot. Don’t get me wrong. There are designers out there that are absolutely amazing in what they do, but most of them are not. Good design has little to do with how things look in my opinion. But it has very much to do with how product behaves. And to take a chance on design look only is scary to me. |
diff --git a/_posts/2017-01-12-gce-aws-docker-and-why-i-choose-classic-vms-and-digitalocean.md b/_posts/2017-01-12-gce-aws-docker-and-why-i-choose-classic-vms-and-digitalocean.md index 29a3124..c55af32 100644 --- a/_posts/2017-01-12-gce-aws-docker-and-why-i-choose-classic-vms-and-digitalocean.md +++ b/_posts/2017-01-12-gce-aws-docker-and-why-i-choose-classic-vms-and-digitalocean.md | |||
| @@ -1,7 +1,9 @@ | |||
| 1 | --- | 1 | --- |
| 2 | |||
| 2 | layout: post | 3 | layout: post |
| 3 | title: GCE, AWS, Docker and why I choose classic VM’s and DigitalOcean for my current project | 4 | title: GCE, AWS, Docker and why I choose classic VM’s and DigitalOcean for my current project |
| 4 | description: Reasons why I choose DigitalOcean for my project | 5 | description: Reasons why I choose DigitalOcean for my project |
| 6 | |||
| 5 | --- | 7 | --- |
| 6 | 8 | ||
| 7 | **Table of contents** | 9 | **Table of contents** |
diff --git a/_posts/2017-03-07-golang-profiling-simplified.md b/_posts/2017-03-07-golang-profiling-simplified.md index 2b5a262..4c7266c 100644 --- a/_posts/2017-03-07-golang-profiling-simplified.md +++ b/_posts/2017-03-07-golang-profiling-simplified.md | |||
| @@ -1,7 +1,9 @@ | |||
| 1 | --- | 1 | --- |
| 2 | |||
| 2 | layout: post | 3 | layout: post |
| 3 | title: Golang profiling simplified | 4 | title: Golang profiling simplified |
| 4 | description: Golang profiling made easy | 5 | description: Golang profiling made easy |
| 6 | |||
| 5 | --- | 7 | --- |
| 6 | 8 | ||
| 7 | **Table of contents** | 9 | **Table of contents** |
| @@ -9,9 +11,9 @@ description: Golang profiling made easy | |||
| 9 | 1. [Where are my pprof files?](#where-are-my-pprof-files) | 11 | 1. [Where are my pprof files?](#where-are-my-pprof-files) |
| 10 | 2. [Why is my cpu profile empty?](#why-is-my-cpu-profile-empty) | 12 | 2. [Why is my cpu profile empty?](#why-is-my-cpu-profile-empty) |
| 11 | 3. [Profiling](#profiling) | 13 | 3. [Profiling](#profiling) |
| 12 | 1. [Memory profiling](#memory-profiling) | 14 | 1. [Memory profiling](#memory-profiling) |
| 13 | 2. [CPU profiling](#cpu-profiling) | 15 | 2. [CPU profiling](#cpu-profiling) |
| 14 | 3. [Generating profiling reports](#generating-profiling-reports) | 16 | 3. [Generating profiling reports](#generating-profiling-reports) |
| 15 | 17 | ||
| 16 | Many posts have been written regarding profiling in Golang and I haven’t found proper tutorial regarding this. Almost all of them are missing some part of important information and it gets pretty frustrating when you have a deadline and are not finding simple distilled solution. | 18 | Many posts have been written regarding profiling in Golang and I haven’t found proper tutorial regarding this. Almost all of them are missing some part of important information and it gets pretty frustrating when you have a deadline and are not finding simple distilled solution. |
| 17 | 19 | ||
diff --git a/_posts/2017-04-10-what-its-like-to-be-a-software-developer.md b/_posts/2017-04-10-what-its-like-to-be-a-software-developer.md index 52f5861..f18f5dd 100644 --- a/_posts/2017-04-10-what-its-like-to-be-a-software-developer.md +++ b/_posts/2017-04-10-what-its-like-to-be-a-software-developer.md | |||
| @@ -1,7 +1,9 @@ | |||
| 1 | --- | 1 | --- |
| 2 | |||
| 2 | layout: post | 3 | layout: post |
| 3 | title: What it's like to be a software developer | 4 | title: What it's like to be a software developer |
| 4 | description: Couple of observations regarding project management | 5 | description: Couple of observations regarding project management |
| 6 | |||
| 5 | --- | 7 | --- |
| 6 | 8 | ||
| 7 | I get asked a lot what the hell I actually do. I find it funny but I guess it is my fault in most cases. I try not to be the kind of a man that is always talking about his work. I live in a small village and most of my neighbours probably have no idea what I actually do. And I am ok with that. I prefer this. But on some occasions I find it disturbing how people judge other people just because they don't understand what they are all about. Many of them probably think I am some strange kind of a looser that is awake all the time and works from home. He probably plays games and type on a computer :) What kind of a job is that? That is no job at all! :) You work for eight hours, then you go home and drink a beer and go work in your workshop. This is what real men do! | 9 | I get asked a lot what the hell I actually do. I find it funny but I guess it is my fault in most cases. I try not to be the kind of a man that is always talking about his work. I live in a small village and most of my neighbours probably have no idea what I actually do. And I am ok with that. I prefer this. But on some occasions I find it disturbing how people judge other people just because they don't understand what they are all about. Many of them probably think I am some strange kind of a looser that is awake all the time and works from home. He probably plays games and type on a computer :) What kind of a job is that? That is no job at all! :) You work for eight hours, then you go home and drink a beer and go work in your workshop. This is what real men do! |
diff --git a/_posts/2017-04-17-what-i-ve-learned-developing-ad-server.md b/_posts/2017-04-17-what-i-ve-learned-developing-ad-server.md index 1cb3ba1..bfacd6f 100644 --- a/_posts/2017-04-17-what-i-ve-learned-developing-ad-server.md +++ b/_posts/2017-04-17-what-i-ve-learned-developing-ad-server.md | |||
| @@ -1,7 +1,9 @@ | |||
| 1 | --- | 1 | --- |
| 2 | |||
| 2 | layout: post | 3 | layout: post |
| 3 | title: What I've learned developing ad server | 4 | title: What I've learned developing ad server |
| 4 | description: Lessons I learned developing contextual ad server | 5 | description: Lessons I learned developing contextual ad server |
| 6 | |||
| 5 | --- | 7 | --- |
| 6 | 8 | ||
| 7 | **Table of contents** | 9 | **Table of contents** |
diff --git a/_posts/2017-04-21-profiling-python-web-applications-with-visual-tools.md b/_posts/2017-04-21-profiling-python-web-applications-with-visual-tools.md index 864e4a5..dcd8ce1 100644 --- a/_posts/2017-04-21-profiling-python-web-applications-with-visual-tools.md +++ b/_posts/2017-04-21-profiling-python-web-applications-with-visual-tools.md | |||
| @@ -1,7 +1,9 @@ | |||
| 1 | --- | 1 | --- |
| 2 | |||
| 2 | layout: post | 3 | layout: post |
| 3 | title: Profiling Python web applications with visual tools | 4 | title: Profiling Python web applications with visual tools |
| 4 | description: Missing link when debugging and profiling python web applications | 5 | description: Missing link when debugging and profiling python web applications |
| 6 | |||
| 5 | --- | 7 | --- |
| 6 | 8 | ||
| 7 | **Table of contents** | 9 | **Table of contents** |
diff --git a/_posts/2017-08-11-simple-iot-application.md b/_posts/2017-08-11-simple-iot-application.md index 4c506f3..cd0179e 100644 --- a/_posts/2017-08-11-simple-iot-application.md +++ b/_posts/2017-08-11-simple-iot-application.md | |||
| @@ -1,16 +1,18 @@ | |||
| 1 | --- | 1 | --- |
| 2 | |||
| 2 | layout: post | 3 | layout: post |
| 3 | title: Simple IOT application supported by real-time monitoring and data history | 4 | title: Simple IOT application supported by real-time monitoring and data history |
| 4 | description: Develop simple IOT application with Arduino MKR1000 and Python | 5 | description: Develop simple IOT application with Arduino MKR1000 and Python |
| 6 | |||
| 5 | --- | 7 | --- |
| 6 | 8 | ||
| 7 | **Table of contents** | 9 | **Table of contents** |
| 8 | 10 | ||
| 9 | 1. [Initial thoughts](#initial-thoughts) | 11 | 1. [Initial thoughts](#initial-thoughts) |
| 10 | 2. [Simple Python API](#simple-python-api) | 12 | 2. [Simple Python API](#simple-python-api) |
| 11 | 1. [Basic web application](#basic-web-application) | 13 | 1. [Basic web application](#basic-web-application) |
| 12 | 2. [Web application security](#web-application-security) | 14 | 2. [Web application security](#web-application-security) |
| 13 | 3. [Simple API for writing data-points](#simple-api-for-writing-data-points) | 15 | 3. [Simple API for writing data-points](#simple-api-for-writing-data-points) |
| 14 | 3. [Sending data to API with Arduino MKR1000](#sending-data-to-api-with-arduino-mkr1000) | 16 | 3. [Sending data to API with Arduino MKR1000](#sending-data-to-api-with-arduino-mkr1000) |
| 15 | 4. [Data visualization](#data-visualization) | 17 | 4. [Data visualization](#data-visualization) |
| 16 | 5. [Conclusion](#conclusion) | 18 | 5. [Conclusion](#conclusion) |
diff --git a/_posts/2018-01-16-using-digitalocean-spaces-object-storage-with-fuse.md b/_posts/2018-01-16-using-digitalocean-spaces-object-storage-with-fuse.md index dc2b90c..4eccd25 100644 --- a/_posts/2018-01-16-using-digitalocean-spaces-object-storage-with-fuse.md +++ b/_posts/2018-01-16-using-digitalocean-spaces-object-storage-with-fuse.md | |||
| @@ -1,7 +1,9 @@ | |||
| 1 | --- | 1 | --- |
| 2 | |||
| 2 | layout: post | 3 | layout: post |
| 3 | title: Using DigitalOcean Spaces Object Storage with FUSE | 4 | title: Using DigitalOcean Spaces Object Storage with FUSE |
| 4 | description: Using DigitalOcean Spaces Object Storage with FUSE | 5 | description: Using DigitalOcean Spaces Object Storage with FUSE |
| 6 | |||
| 5 | --- | 7 | --- |
| 6 | 8 | ||
| 7 | **Table of contents** | 9 | **Table of contents** |
diff --git a/_posts/2018-08-05-the-bullshit-web-developments-pov.md b/_posts/2018-08-05-the-bullshit-web-developments-pov.md index 8816b4b..b8346f6 100644 --- a/_posts/2018-08-05-the-bullshit-web-developments-pov.md +++ b/_posts/2018-08-05-the-bullshit-web-developments-pov.md | |||
| @@ -1,7 +1,9 @@ | |||
| 1 | --- | 1 | --- |
| 2 | |||
| 2 | layout: post | 3 | layout: post |
| 3 | title: The Bullshit Web - Development's Point of View | 4 | title: The Bullshit Web - Development's Point of View |
| 4 | description: State of front-end development and what this does to the future of web | 5 | description: State of front-end development and what this does to the future of web |
| 6 | |||
| 5 | --- | 7 | --- |
| 6 | 8 | ||
| 7 | **Table of contents** | 9 | **Table of contents** |
| @@ -92,20 +94,20 @@ All this directly impacts performanse. Terabytes of bandwidth wasted because the | |||
| 92 | 94 | ||
| 93 | Here are some examples of loading times. It's up to you to decide if this really is the best way to do web. | 95 | Here are some examples of loading times. It's up to you to decide if this really is the best way to do web. |
| 94 | 96 | ||
| 95 | | URL | Num of requests | Transfered | Finish | DOMContentLoaded | Load | | 97 | | URL | # req | Transfered | Finish | DOM Content Loaded | Load | |
| 96 | | ------------------ | --------------- | ---------- | ------- | ---------------- | ------ | | 98 | | ------------------ | ----- | ---------- | ------- | ------------------ | ------ | |
| 97 | | cnn.com | 134 | 3.22 MB | 4.7 s | 575 ms | 3.60 s | | 99 | | cnn.com | 134 | 3.22 MB | 4.7 s | 575 ms | 3.60 s | |
| 98 | | youtube.com | 61 | 1.8 MB | 5.13 s | 1.78 s | 1.97 s | | 100 | | youtube.com | 61 | 1.8 MB | 5.13 s | 1.78 s | 1.97 s | |
| 99 | | wikipedia.com | 11 | 64.5 KB | 642 ms | 531 ms | 573 ms | | 101 | | wikipedia.com | 11 | 64.5 KB | 642 ms | 531 ms | 573 ms | |
| 100 | | reddit.com | 177 | 12.9 MB | 7.65 s | 2.03 s | 3.74 s | | 102 | | reddit.com | 177 | 12.9 MB | 7.65 s | 2.03 s | 3.74 s | |
| 101 | | amazon.com | 278 | 8.0 MB | 5.20 s | 1.15s | 2.99 s | | 103 | | amazon.com | 278 | 8.0 MB | 5.20 s | 1.15s | 2.99 s | |
| 102 | | twitter.com | 202 | 5.1 MB | 23.48 s | 3.20 s | 4.55 s | | 104 | | twitter.com | 202 | 5.1 MB | 23.48 s | 3.20 s | 4.55 s | |
| 103 | | twitch.tv | 177 | 4.4 MB | 5.08 s | 579 ms | 798 ms | | 105 | | twitch.tv | 177 | 4.4 MB | 5.08 s | 579 ms | 798 ms | |
| 104 | | microsoft.com | 77 | 1.1 MB | 3.96 s | 1.01 s | 1.26 s | | 106 | | microsoft.com | 77 | 1.1 MB | 3.96 s | 1.01 s | 1.26 s | |
| 105 | | huffingtonpost.com | 134 | 2.9 MB | 2.30 s | 789 ms | 1.47 s | | 107 | | huffingtonpost.com | 134 | 2.9 MB | 2.30 s | 789 ms | 1.47 s | |
| 106 | | nytimes.com | 240 | 2.9 MB | 4.64 s | 1.30 s | 4.29 s | | 108 | | nytimes.com | 240 | 2.9 MB | 4.64 s | 1.30 s | 4.29 s | |
| 107 | | foxnews.com | 195 | 1.7 MB | 4.42 s | 1.25 s | 3.86 s | | 109 | | foxnews.com | 195 | 1.7 MB | 4.42 s | 1.25 s | 3.86 s | |
| 108 | | theguardian.com | 203 | 2.8 MB | 2.75 s | 784 ms | 2.43 s | | 110 | | theguardian.com | 203 | 2.8 MB | 2.75 s | 784 ms | 2.43 s | |
| 109 | | bbc.com | 127 | 1.3 MB | 3.44 s | 1.24 s | 2.65 s | | 111 | | bbc.com | 127 | 1.3 MB | 3.44 s | 1.24 s | 2.65 s | |
| 110 | 112 | ||
| 111 | Chrome Browser Developer tools was used to measure load times. | 113 | Chrome Browser Developer tools was used to measure load times. |
diff --git a/files/dna-sequence/algorithm-binary-to-dna.png b/files/dna-sequence/algorithm-binary-to-dna.png new file mode 100644 index 0000000..913f2be --- /dev/null +++ b/files/dna-sequence/algorithm-binary-to-dna.png | |||
| Binary files differ | |||
diff --git a/files/dna-sequence/algorithms.tex b/files/dna-sequence/algorithms.tex new file mode 100644 index 0000000..de26f13 --- /dev/null +++ b/files/dna-sequence/algorithms.tex | |||
| @@ -0,0 +1,53 @@ | |||
| 1 | \documentclass{article} | ||
| 2 | \usepackage{algorithm}% http://ctan.org/pkg/algorithms | ||
| 3 | \usepackage{algpseudocode}% http://ctan.org/pkg/algorithmicx | ||
| 4 | \begin{document} | ||
| 5 | |||
| 6 | % https://tex.stackexchange.com/questions/229355/algorithm-algorithmic-algorithmicx-algorithm2e-algpseudocode-confused | ||
| 7 | % https://en.wikibooks.org/wiki/LaTeX/Algorithms | ||
| 8 | |||
| 9 | \begin{algorithm} | ||
| 10 | \caption{Naive byte array to DNA encode} | ||
| 11 | \begin{algorithmic}[1] | ||
| 12 | \Procedure{EncodeToDNASequence}{$name$} | ||
| 13 | \State $fp\gets open(name)$ | ||
| 14 | \State $en\gets null$ | ||
| 15 | \While{$fp\not=EOF$} | ||
| 16 | \State $c\gets buf[0]$\Comment{Read 1 byte from buffer} | ||
| 17 | \State $b\gets sprintf("08b", c)$\Comment{Convert to string binary} | ||
| 18 | \For{\texttt{e in range[0,2,4,6]}} | ||
| 19 | \If {$e[0] = 48$ $1$ and $e[1] = 48$}\Comment{0x00 - A (Adenine)} | ||
| 20 | \State $en\gets en + `A`$ | ||
| 21 | \EndIf | ||
| 22 | \If {$e[0] = 48$ $1$ and $e[1] = 49$}\Comment{0x01 - G (Guanine)} | ||
| 23 | \State $en\gets en + `G`$ | ||
| 24 | \EndIf | ||
| 25 | \If {$e[0] = 49$ $1$ and $e[1] = 48$}\Comment{0x10 - C (Cytosine)} | ||
| 26 | \State $en\gets en + `C`$ | ||
| 27 | \EndIf | ||
| 28 | \If {$e[0] = 49$ $1$ and $e[1] = 49$}\Comment{0x11 - T (Thymine)} | ||
| 29 | \State $en\gets en + `T`$ | ||
| 30 | \EndIf | ||
| 31 | \EndFor | ||
| 32 | \EndWhile | ||
| 33 | \State \textbf{return} $en$\Comment{Return string DNA sequence} | ||
| 34 | \EndProcedure | ||
| 35 | \end{algorithmic} | ||
| 36 | \end{algorithm} | ||
| 37 | |||
| 38 | %\begin{algorithm} | ||
| 39 | %\caption{Euclid’s algorithm}\label{euclid} | ||
| 40 | %\begin{algorithmic}[1] | ||
| 41 | %\Procedure{Euclid}{$a,b$}\Comment{The g.c.d. of a and b} | ||
| 42 | % \State $r\gets a\bmod b$ | ||
| 43 | % \While{$r\not=0$}\Comment{We have the answer if r is 0} | ||
| 44 | % \State $a\gets b$ | ||
| 45 | % \State $b\gets r$ | ||
| 46 | % \State $r\gets a\bmod b$ | ||
| 47 | % \EndWhile\label{euclidendwhile} | ||
| 48 | % \State \textbf{return} $b$\Comment{The gcd is b} | ||
| 49 | %\EndProcedure | ||
| 50 | %\end{algorithmic} | ||
| 51 | %\end{algorithm} | ||
| 52 | |||
| 53 | \end{document} | ||
diff --git a/files/dna-sequence/dna-basics.jpg b/files/dna-sequence/dna-basics.jpg new file mode 100644 index 0000000..c2e7f52 --- /dev/null +++ b/files/dna-sequence/dna-basics.jpg | |||
| Binary files differ | |||
diff --git a/tools/editor/index.html b/tools/editor/index.html index 61511bd..3e91b4b 100644 --- a/tools/editor/index.html +++ b/tools/editor/index.html | |||
| @@ -1,59 +1,68 @@ | |||
| 1 | <!DOCTYPE html> | 1 | <!DOCTYPE html> |
| 2 | <html lang="en"> | 2 | <html lang="en"> |
| 3 | 3 | ||
| 4 | <head> | 4 | <head> |
| 5 | 5 | ||
| 6 | <meta charset="UTF-8"> | 6 | <meta charset="UTF-8"> |
| 7 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | 7 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 8 | <meta http-equiv="X-UA-Compatible" content="ie=edge"> | 8 | <meta http-equiv="X-UA-Compatible" content="ie=edge"> |
| 9 | 9 | ||
| 10 | <title>Editor</title> | 10 | <title>Editor</title> |
| 11 | 11 | ||
| 12 | <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> | 12 | <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> |
| 13 | <link rel="icon" href="favicon.ico" type="image/x-icon"> | 13 | <link rel="icon" href="favicon.ico" type="image/x-icon"> |
| 14 | 14 | ||
| 15 | </head> | 15 | </head> |
| 16 | |||
| 17 | <body> | ||
| 18 | |||
| 19 | <style> | ||
| 20 | article { | ||
| 21 | display: block; | ||
| 22 | position: fixed; | ||
| 23 | left: 0; | ||
| 24 | top: 0; | ||
| 25 | right: 0; | ||
| 26 | bottom: 0; | ||
| 27 | padding: 40px; | ||
| 28 | outline: none; | ||
| 29 | border: 0; | ||
| 30 | background: #333; | ||
| 31 | color: #fff; | ||
| 32 | font-size: 28px; | ||
| 33 | font-family: "Lucida Console", Monaco, monospace; | ||
| 34 | font-weight: 200; | ||
| 35 | } | ||
| 36 | </style> | ||
| 37 | 16 | ||
| 38 | <article contenteditable></article> | 17 | <body> |
| 39 | 18 | ||
| 40 | <script> | 19 | <style> |
| 20 | article { | ||
| 21 | display: block; | ||
| 22 | position: fixed; | ||
| 23 | left: 0; | ||
| 24 | top: 0; | ||
| 25 | right: 0; | ||
| 26 | bottom: 0; | ||
| 27 | padding: 40px; | ||
| 28 | outline: none; | ||
| 29 | border: 0; | ||
| 30 | background: #222; | ||
| 31 | color: #fff; | ||
| 32 | font-size: 28px; | ||
| 33 | font-family: Monaco, monospace; | ||
| 34 | font-weight: 200; | ||
| 35 | overflow: auto; | ||
| 36 | } | ||
| 37 | </style> | ||
| 41 | 38 | ||
| 39 | <article contenteditable></article> | ||
| 40 | |||
| 41 | <script> | ||
| 42 | |||
| 43 | window.addEventListener('load', (evt) => { | ||
| 42 | const autoSaveFrequency = 1000; | 44 | const autoSaveFrequency = 1000; |
| 43 | const editor = document.querySelector('article'); | 45 | const editor = document.querySelector('article'); |
| 44 | 46 | ||
| 45 | if (typeof(Storage) !== 'undefined') { | 47 | editor.addEventListener('paste', function (evt) { |
| 48 | evt.preventDefault(); | ||
| 49 | document.execCommand('insertHTML', false, evt.clipboardData.getData('text/plain')); | ||
| 50 | }); | ||
| 51 | |||
| 52 | if (typeof (Storage) !== 'undefined') { | ||
| 46 | editor.innerHTML = sessionStorage.getItem('content'); | 53 | editor.innerHTML = sessionStorage.getItem('content'); |
| 47 | 54 | ||
| 48 | setInterval(function() { | 55 | setInterval(function () { |
| 49 | sessionStorage.setItem('content', editor.innerHTML); | 56 | sessionStorage.setItem('content', editor.innerHTML); |
| 50 | }, autoSaveFrequency); | 57 | }, autoSaveFrequency); |
| 51 | 58 | ||
| 52 | } else { | 59 | } else { |
| 53 | console.log('Local Storage not supported'); | 60 | console.log('Local Storage not supported'); |
| 54 | } | 61 | } |
| 62 | }); | ||
| 63 | |||
| 64 | </script> | ||
| 55 | 65 | ||
| 56 | </script> | 66 | </body> |
| 57 | 67 | ||
| 58 | </body> | 68 | </html> \ No newline at end of file |
| 59 | </html> | ||
