vane.pl2022-11-29T01:09:43.067682https://vane.pl/feed.xmlblog - Michal SzczepanskiJust hacking web space. Deploying some web applications just for fun, writing less interesting thoughts, posting links to projects. Generally stuff from my computer.Rethinkdb tornado graphql chat part 22019-07-04T23:00:00+02:002019-07-04T23:00:00+02:00https://vane.pl/rethinkdb-tornado-graphql-chat-part-2
%3Cp%3ETo%20match%20good%20practice%20I%20will%20start%20with%20frontend%20and%20to%20make%20things%20simple%20I%20will%20use%20%3Ca%20href%3D%22https%3A//material-ui.com/%22%3EMaterial-UI%3C/a%3E.%20Simple%20slack%20clone%20need%20a%20left%20panel%20with%20channels%20and%20main%20panel%20with%20chat.%20I%20will%20reuse%20part%20of%20the%20layout%20from%20my%20%3Ca%20href%3D%22/understand-how-to-theme-material-ui/%22%3Eprevious%20post%20about%20material%20ui%3C/a%3E%20and%20I%20will%20add%20simple%20input%20and%20messages.%20%20%3C/p%3E%0A%3Cp%3EI%20will%20also%20try%20to%20make%20all%20my%20components%20functional%20instead%20of%20creating%20classes.%20For%20managing%20state%20in%20my%20functional%20components%20I%20will%20use%20%3Ca%20href%3D%22https%3A//www.npmjs.com/package/use-global-hook%22%3Euse-global-hook%3C/a%3E%20package.%3C/p%3E%0A%3Cp%3EThere%20is%20a%20great%20reading%20about%20%3Ca%20href%3D%22https%3A//www.robinwieruch.de/react-function-component/%22%3Ereact%20functional%20components%20by%20example%3C/a%3E%20if%20you%20want%20to%20learn%20how%20to%20create%20react%20functional%20components.%20Also%20there%20is%20great%20reading%20about%20%3Ca%20href%3D%22https%3A//programmingwithmosh.com/react/react-functional-components/%22%3Ewhy%20functional%20components%3C/a%3E.%20%20%3C/p%3E%0A%3Cp%3EI%20started%20with%20drawer%20containing%20two%20rooms%20named%20%3Ccode%3Egeneral%3C/code%3E%20and%20%3Ccode%3Etest%3C/code%3E.%20I%20also%20added%20direct%20message%20to%20user%20named%20testUser.%20%3Cbr%20/%3E%0AFrom%20functionalities%20there%20is%20button%20to%20add%20room%3C/p%3E%0A%3Cp%3EOn%20chat%20room%20panel%20there%20is%20%3Ca%20href%3D%22https%3A//material-ui.com/components/text-fields/%22%3ETextField%3C/a%3E%20to%20type%20message%20and%20send%20it%20to%20room.%20Each%20message%20is%20%3Ca%20href%3D%22https%3A//material-ui.com/components/typography/%22%3Etypography%20component%3C/a%3E.%3C/p%3E%0A%3Cp%3ETo%20simplify%20I%20made%20one%20global%20model%20and%20decided%20to%20use%20custom%20%3Ca%20href%3D%22https%3A//en.wikipedia.org/wiki/Model%25E2%2580%2593view%25E2%2580%2593controller%22%3EMVC%20pattern%3C/a%3E.%20My%20prototype%20now%20look%20like%20this.%3C/p%3E%0A%3Cp%3E%3Cimg%20src%3D%22/assets/images/2019/07/04/Screenshot%202019-07-04%20at%2000.50.59.png%22%20alt%3D%22chat%20view%22%20/%3E%3C/p%3E%0A%3Cp%3EAfter%20I%20divided%20my%20components%20for%20ChatBar%2C%20ChatDrawer%20and%20ChatContent%20and%20placed%20message%20input%20to%20the%20bottom%20I%20added%20some%20states%20to%20be%20able%20to%20add%20messages%20when%20typing%20enter.%3Cbr%20/%3E%0AI%20added%20feature%20that%20if%20you%20hold%20shift%20and%20press%20enter%20it%20will%20result%20in%20new%20line.%3Cbr%20/%3E%0AMy%20handlers%20in%20my%20ChatContent%20component%20are%20now%20a%20bit%20messy%20and%20look%20like%20this.%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3E%3Cspan%20class%3D%22kd%22%3Econst%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Eclasses%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3EthemeStyles%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%29%3B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22kd%22%3Econst%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%5B%3C/span%3E%3Cspan%20class%3D%22nx%22%3Emessage%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3EsetMessage%3C/span%3E%3Cspan%20class%3D%22p%22%3E%5D%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3EReact%3C/span%3E%3Cspan%20class%3D%22p%22%3E.%3C/span%3E%3Cspan%20class%3D%22nx%22%3EuseState%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3B%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%29%3B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22kd%22%3Econst%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%5B%3C/span%3E%3Cspan%20class%3D%22nx%22%3EmessageRows%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3EsetMessageRows%3C/span%3E%3Cspan%20class%3D%22p%22%3E%5D%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3EReact%3C/span%3E%3Cspan%20class%3D%22p%22%3E.%3C/span%3E%3Cspan%20class%3D%22nx%22%3EuseState%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22mf%22%3E1%3C/span%3E%3Cspan%20class%3D%22p%22%3E%29%3B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22kd%22%3Econst%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%5B%3C/span%3E%3Cspan%20class%3D%22nx%22%3EmessageList%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3EsetMessageList%3C/span%3E%3Cspan%20class%3D%22p%22%3E%5D%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3EReact%3C/span%3E%3Cspan%20class%3D%22p%22%3E.%3C/span%3E%3Cspan%20class%3D%22nx%22%3EuseState%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%5B%5D%29%3B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22kd%22%3Econst%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3EhandleKeyPress%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22nx%22%3Ee%3C/span%3E%3Cspan%20class%3D%22p%22%3E%29%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3D%26gt%3B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22k%22%3Eif%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22nx%22%3Ee%3C/span%3E%3Cspan%20class%3D%22p%22%3E.%3C/span%3E%3Cspan%20class%3D%22nx%22%3EcharCode%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3D%3D%3D%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22mf%22%3E13%3C/span%3E%3Cspan%20class%3D%22p%22%3E%29%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22k%22%3Eif%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22nx%22%3Ee%3C/span%3E%3Cspan%20class%3D%22p%22%3E.%3C/span%3E%3Cspan%20class%3D%22nx%22%3EshiftKey%3C/span%3E%3Cspan%20class%3D%22p%22%3E%29%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3EsetMessageRows%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22nx%22%3EmessageRows%3C/span%3E%3Cspan%20class%3D%22o%22%3E%2B%3C/span%3E%3Cspan%20class%3D%22mf%22%3E1%3C/span%3E%3Cspan%20class%3D%22p%22%3E%29%3B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7D%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22k%22%3Eelse%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3EmessageList%3C/span%3E%3Cspan%20class%3D%22p%22%3E.%3C/span%3E%3Cspan%20class%3D%22nx%22%3Epush%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22nx%22%3Emessage%3C/span%3E%3Cspan%20class%3D%22p%22%3E%29%3B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3EsetMessageList%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22nx%22%3EmessageList%3C/span%3E%3Cspan%20class%3D%22p%22%3E%29%3B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3EsetMessage%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3B%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%29%3B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3EsetMessageRows%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22mf%22%3E1%3C/span%3E%3Cspan%20class%3D%22p%22%3E%29%3B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7D%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7D%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22p%22%3E%7D%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22kd%22%3Econst%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3EhandleChange%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22nx%22%3Ee%3C/span%3E%3Cspan%20class%3D%22p%22%3E%29%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3D%26gt%3B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3EsetMessage%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22nx%22%3Ee%3C/span%3E%3Cspan%20class%3D%22p%22%3E.%3C/span%3E%3Cspan%20class%3D%22nx%22%3Etarget%3C/span%3E%3Cspan%20class%3D%22p%22%3E.%3C/span%3E%3Cspan%20class%3D%22nx%22%3Evalue%3C/span%3E%3Cspan%20class%3D%22p%22%3E%29%3B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22p%22%3E%7D%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3EI%20struggled%20with%20css%20to%20position%20everything%20so%20I%20called%20it%20a%20day.%3C/p%3E%0A%3Cp%3ENext%20day%20I%20looked%20at%20design%20and%20something%20was%20wrong%20with%20this%20layout%20so%20I%20decided%20to%20create%20one%20more%20main%20component%20on%20bottom%20and%20place%20my%20chat%20message%20text%20input%20there%20so%20I%20can%20have%20cleaner%20layout%20and%20don%27t%20mess%20with%20css%20so%20much.%20I%20named%20it%20MessageBar.%20I%20also%20moved%20list%20of%20messages%20to%20model%20and%20I%20got%20almost%20all%20frontend%20ready%20for%20accepting%20input%20from%20backend.%3Cbr%20/%3E%0ALast%20thing%20I%27ve%20done%20was%20placing%20chat%20content%20data%20scroll%20on%20bottom%20of%20the%20div%20so%20I%20could%20view%20last%20message%20after%20I%20press%20enter.%20As%20always%20%3Ca%20href%3D%22https%3A//stackoverflow.com/questions/37620694/how-to-scroll-to-bottom-in-react%22%3Estackoverflow%20answer%20was%20a%20relief%3C/a%3E.%3C/p%3E%0A%3Cp%3ESo%20now%20my%20chat%20frontend%20look%20like%20this.%20%20%3C/p%3E%0A%3Cp%3E%3Cimg%20src%3D%22/assets/images/2019/07/04/Screen-Recording-2019-07-04-chat-frontend.gif%22%20alt%3D%22Chat%20frontend%22%20/%3E%3C/p%3E%0A%3Cp%3ERemaining%20functionalities%20for%20frontend%20are%20create%20/%20join%20room%20and%20start%20screeen%20with%20nick%20input.%20I%20will%20make%20those%20and%20update%20this%20post.%3C/p%3E%0A%3Cp%3ENext%20post%20will%20be%20about%20backend%20tornado%20and%20rethinkdb.%3C/p%3E%0A%3Cp%3EYou%20can%20see%20the%20%3Ca%20href%3D%22/assets/demo/rethinkdb-tornado-graphql-chat-part-2/%22%3Edemo%20frontend%20application%20here%3C/a%3E%3C/p%3E%0A%3Cp%3E%3Ca%20href%3D%22https%3A//github.com/vane/blog-code/tree/master/rethinkdb-tornado-graphql-chat-part-2%22%3ESource%20code%20of%20this%20post%3C/a%3E%3C/p%3E
Michal Szczepanski
['', '', '', '', '']
To match good practice I will start with frontend and to make things simple I will use Material-UI. Simple slack clone need a left panel with channels and main panel with chat. I will reuse part of the layout from my previous post about material ui and I will add simple input and messages.Rethinkdb tornado graphql chat part 12019-07-01T20:00:11+02:002019-07-01T20:00:11+02:00https://vane.pl/rethinkdb-tornado-graphql-chat-part-1
%3Cp%3EToday%20let%27s%20try%20something%20different.%20%3Ca%20href%3D%22https%3A//en.wikipedia.org/wiki/Slack_%28software%29%22%3ESlack%3C/a%3E%20market%20capital%20is%20currently%20arround%2018.92B%20of%20dollars.%3Cbr%20/%3E%0AWhy%20not%20make%20persistent%20chat%20with%20chatrooms%20using%20some%20modern%20open%20source%20technologies%20like%20%3Ca%20href%3D%22https%3A//en.wikipedia.org/wiki/Docker_%28software%29%22%3EDocker%3C/a%3E%20for%20scalability%2C%20%3Ca%20href%3D%22https%3A//github.com/tornadoweb/tornado%22%3Etornado%3C/a%3E%20for%20webserver%2C%20%3Ca%20href%3D%22https%3A//graphql.org%22%3Egraphql%3C/a%3E%20for%20data%20exchange%20and%20%3Ca%20href%3D%22https%3A//www.rethinkdb.com/%22%3Erethinkdb%3C/a%3E%20for%20persistant%20layer.%3Cbr%20/%3E%0AThe%20last%20one%20is%20chosen%20specifically%20to%20produce%20less%20code%20cause%20of%20%3Ca%20href%3D%22https%3A//www.rethinkdb.com/docs/changefeeds/python/%22%3Echange%20feeds%3C/a%3E.%20From%20all%20of%20those%20technologies%20I%20never%20made%20graphql%20subscriptions%20and%20never%20used%20rethinkdb%20in%20my%20life%20and%20it%27s%20going%20to%20be%20interesting.%3C/p%3E%0A%3Cp%3ELet%27s%20start%20with%20set%20up%20backend%20environment%20by%20creating%20virtualenv%20and%20adding%20dependencies%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3Epython3%20-m%20venv%20tornado-chat-env%0Apip%20install%20tornado%20graphene-tornado%20rethinkdb%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3EI%20will%20use%20%3Ca%20href%3D%22https%3A//github.com/graphql-python/graphene-tornado%22%3Egraphene-tornado%3C/a%3E%20to%20make%20application%20and%20create%20subscriptions%20by%20myself%20based%20on%20code%20from%20github%20repository%3Ca%20href%3D%22https%3A//github.com/hballard/graphql-python-subscriptions%22%3Ehballard/graphql-python-subscriptions%3C/a%3E%3C/p%3E%0A%3Cp%3EAfter%20I%20%3Ca%20href%3D%22https%3A//en.wikipedia.org/wiki/Cut%2C_copy%2C_and_paste%22%3Ecopy%20/%20paste%3C/a%3E%20code%20from%20graphene-tornado%20example%20and%20go%20to%20url%20%3Ca%20href%3D%22http%3A//localhost%3A5000/graphql%22%3Ehttp%3A//localhost%3A5000/graphql%3C/a%3E%20everything%20worked.%20There%20was%20even%20some%20simple%20schema%20with%20query%20I%20could%20use.%3C/p%3E%0A%3Cp%3E%3Cimg%20src%3D%22/assets/images/2019/07/01/Screenshot%202019-06-29%20at%2015.33.00.png%22%20alt%3D%22Tornado%20graphql%20query%22%20/%3E%3C/p%3E%0A%3Cp%3EBase%20backend%20setup%20is%20finished%20so%20it%27s%20time%20to%20setup%20frontend.%20I%20will%20use%20basic%20config%20from%20my%20%3Ca%20href%3D%22/basic-webpack-react-babeljs-es6-setup/%22%3Ebasic%20webpack%20react%20babeljs%20es6%20setup%3C/a%3E%20blog%20post%20and%20add%20some%20dependencies%20%3Ca%20href%3D%22https%3A//github.com/apollographql/apollo-client%22%3Eaccording%20to%20apollo%20client%20documentation%3C/a%3E%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3Eyarn%20add%20apollo-boost%20graphql-tag%20graphql%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3EAnd%20then%20modify%20basic%20application%20to%20make%20request%20to%20tornado%20web%20server.%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3E%3Cspan%20class%3D%22k%22%3Eimport%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3EReactDOM%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22kr%22%3Efrom%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3Breact-dom%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22k%22%3Eimport%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3EReact%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7B%3C/span%3E%3Cspan%20class%3D%22nx%22%3EuseState%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7D%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22kr%22%3Efrom%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3Breact%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22k%22%3Eimport%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3EApolloClient%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22kr%22%3Efrom%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3Bapollo-boost%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22k%22%3Eimport%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Egql%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22kr%22%3Efrom%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3Bgraphql-tag%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%0A%0A%3Cspan%20class%3D%22kd%22%3Econst%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3ETest%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%29%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3D%26gt%3B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%0A%3Cspan%20class%3D%22w%22%3E%20%20%3C/span%3E%3Cspan%20class%3D%22kd%22%3Econst%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%5B%3C/span%3E%3Cspan%20class%3D%22nx%22%3Emsg%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3EsetMessage%3C/span%3E%3Cspan%20class%3D%22p%22%3E%5D%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3EuseState%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3BLoading...%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%29%3B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%0A%3Cspan%20class%3D%22w%22%3E%20%20%3C/span%3E%3Cspan%20class%3D%22kd%22%3Econst%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Eclient%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22ow%22%3Enew%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3EApolloClient%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%7B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Euri%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3Bhttp%3A//localhost%3A5000/graphql%3F%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7D%29%3B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%0A%3Cspan%20class%3D%22w%22%3E%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Eclient%3C/span%3E%3Cspan%20class%3D%22p%22%3E.%3C/span%3E%3Cspan%20class%3D%22nx%22%3Equery%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%7B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Equery%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Egql%3C/span%3E%3Cspan%20class%3D%22sb%22%3E%60%3C/span%3E%0A%3Cspan%20class%3D%22sb%22%3E%20%20%20%20query%20%7B%3C/span%3E%0A%3Cspan%20class%3D%22sb%22%3E%20%20%20%20%20%20test%3C/span%3E%0A%3Cspan%20class%3D%22sb%22%3E%20%20%20%20%7D%3C/span%3E%0A%3Cspan%20class%3D%22sb%22%3E%20%20%60%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7D%29.%3C/span%3E%3Cspan%20class%3D%22nx%22%3Ethen%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22nx%22%3Edata%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3D%26gt%3B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3EsetMessage%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22nx%22%3Edata%3C/span%3E%3Cspan%20class%3D%22p%22%3E.%3C/span%3E%3Cspan%20class%3D%22nx%22%3Edata%3C/span%3E%3Cspan%20class%3D%22p%22%3E.%3C/span%3E%3Cspan%20class%3D%22nx%22%3Etest%3C/span%3E%3Cspan%20class%3D%22p%22%3E%29%3B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7D%29%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E.%3C/span%3E%3Cspan%20class%3D%22k%22%3Ecatch%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22nx%22%3Eerror%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3D%26gt%3B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Econsole%3C/span%3E%3Cspan%20class%3D%22p%22%3E.%3C/span%3E%3Cspan%20class%3D%22nx%22%3Eerror%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22nx%22%3Eerror%3C/span%3E%3Cspan%20class%3D%22p%22%3E%29%29%3B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%3C/span%3E%3Cspan%20class%3D%22k%22%3Ereturn%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22o%22%3E%26lt%3B%3C/span%3E%3Cspan%20class%3D%22nx%22%3Eh1%3C/span%3E%3Cspan%20class%3D%22o%22%3E%26gt%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7B%3C/span%3E%3Cspan%20class%3D%22nx%22%3Emsg%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7D%3C/span%3E%3Cspan%20class%3D%22o%22%3E%26lt%3B%3C/span%3E%3Cspan%20class%3D%22err%22%3E/h1%26gt%3B%29%3B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22p%22%3E%7D%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%0A%3Cspan%20class%3D%22nx%22%3EReactDOM%3C/span%3E%3Cspan%20class%3D%22p%22%3E.%3C/span%3E%3Cspan%20class%3D%22nx%22%3Erender%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22o%22%3E%26lt%3B%3C/span%3E%3Cspan%20class%3D%22nx%22%3ETest%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22o%22%3E/%26gt%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22nb%22%3Edocument%3C/span%3E%3Cspan%20class%3D%22p%22%3E.%3C/span%3E%3Cspan%20class%3D%22nx%22%3EgetElementById%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3Bapp%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%29%29%3B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3EAnd%20of%20course%20this%20example%20failed%20due%20to%20stupid%20%3Ca%20href%3D%22https%3A//en.wikipedia.org/wiki/Cross-origin_resource_sharing%22%3ECORS%3C/a%3E%20that%20can%27t%20be%20easliy%20disabled%20for%20development%20purposes.%20Thank%20you%20browser%20vendros%20for%20loving%20backend%20developers%20they%20love%20you%20to.%3C/p%3E%0A%3Cp%3E%3Cimg%20src%3D%22/assets/images/2019/07/01/Screenshot%202019-06-29%20at%2021.17.41.png%22%20alt%3D%22CORS%20browser%20error%22%20/%3E%3C/p%3E%0A%3Cp%3ETo%20obey%20it%20I%20need%20to%20extend%20TornadoGraphQLHandler%20from%20example%20so%20my%20base%20server%20looks%20like%20that.%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3E%3Cspan%20class%3D%22ch%22%3E%23%21/usr/bin/env%20python%3C/span%3E%0A%3Cspan%20class%3D%22c1%22%3E%23%20-%2A-%20coding%3A%20utf-8%20-%2A-%3C/span%3E%0A%3Cspan%20class%3D%22kn%22%3Eimport%3C/span%3E%20%3Cspan%20class%3D%22nn%22%3Etornado.web%3C/span%3E%0A%3Cspan%20class%3D%22kn%22%3Efrom%3C/span%3E%20%3Cspan%20class%3D%22nn%22%3Etornado.ioloop%3C/span%3E%20%3Cspan%20class%3D%22kn%22%3Eimport%3C/span%3E%20%3Cspan%20class%3D%22n%22%3EIOLoop%3C/span%3E%0A%0A%3Cspan%20class%3D%22kn%22%3Efrom%3C/span%3E%20%3Cspan%20class%3D%22nn%22%3Egraphene_tornado.schema%3C/span%3E%20%3Cspan%20class%3D%22kn%22%3Eimport%3C/span%3E%20%3Cspan%20class%3D%22n%22%3Eschema%3C/span%3E%0A%3Cspan%20class%3D%22kn%22%3Efrom%3C/span%3E%20%3Cspan%20class%3D%22nn%22%3Egraphene_tornado.tornado_graphql_handler%3C/span%3E%20%3Cspan%20class%3D%22kn%22%3Eimport%3C/span%3E%20%3Cspan%20class%3D%22n%22%3ETornadoGraphQLHandler%3C/span%3E%0A%0A%0A%3Cspan%20class%3D%22k%22%3Eclass%3C/span%3E%20%3Cspan%20class%3D%22nc%22%3ECorsHandler%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22n%22%3ETornadoGraphQLHandler%3C/span%3E%3Cspan%20class%3D%22p%22%3E%29%3A%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22k%22%3Edef%3C/span%3E%20%3Cspan%20class%3D%22nf%22%3Eset_default_headers%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22bp%22%3Eself%3C/span%3E%3Cspan%20class%3D%22p%22%3E%29%3A%3C/span%3E%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22bp%22%3Eself%3C/span%3E%3Cspan%20class%3D%22o%22%3E.%3C/span%3E%3Cspan%20class%3D%22n%22%3Eset_header%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22s2%22%3E%26quot%3BAccess-Control-Allow-Origin%26quot%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%20%3Cspan%20class%3D%22s2%22%3E%26quot%3B%2A%26quot%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%29%3C/span%3E%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22bp%22%3Eself%3C/span%3E%3Cspan%20class%3D%22o%22%3E.%3C/span%3E%3Cspan%20class%3D%22n%22%3Eset_header%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3BAccess-Control-Allow-Methods%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%20%3Cspan%20class%3D%22s1%22%3E%26%2339%3BPOST%2C%20PUT%2C%20GET%2C%20OPTIONS%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%29%3C/span%3E%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22bp%22%3Eself%3C/span%3E%3Cspan%20class%3D%22o%22%3E.%3C/span%3E%3Cspan%20class%3D%22n%22%3Eset_header%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3BAccess-Control-Allow-Headers%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%20%3Cspan%20class%3D%22s1%22%3E%26%2339%3Bcontent-type%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%29%3C/span%3E%0A%0A%20%20%20%20%3Cspan%20class%3D%22k%22%3Edef%3C/span%3E%20%3Cspan%20class%3D%22nf%22%3Eoptions%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22bp%22%3Eself%3C/span%3E%3Cspan%20class%3D%22p%22%3E%29%3A%3C/span%3E%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22bp%22%3Eself%3C/span%3E%3Cspan%20class%3D%22o%22%3E.%3C/span%3E%3Cspan%20class%3D%22n%22%3Efinish%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%29%3C/span%3E%0A%0A%3Cspan%20class%3D%22k%22%3Eclass%3C/span%3E%20%3Cspan%20class%3D%22nc%22%3EExampleApplication%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22n%22%3Etornado%3C/span%3E%3Cspan%20class%3D%22o%22%3E.%3C/span%3E%3Cspan%20class%3D%22n%22%3Eweb%3C/span%3E%3Cspan%20class%3D%22o%22%3E.%3C/span%3E%3Cspan%20class%3D%22n%22%3EApplication%3C/span%3E%3Cspan%20class%3D%22p%22%3E%29%3A%3C/span%3E%0A%0A%20%20%20%20%3Cspan%20class%3D%22k%22%3Edef%3C/span%3E%20%3Cspan%20class%3D%22fm%22%3E__init__%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22bp%22%3Eself%3C/span%3E%3Cspan%20class%3D%22p%22%3E%29%3A%3C/span%3E%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22n%22%3Ehandlers%3C/span%3E%20%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%20%3Cspan%20class%3D%22p%22%3E%5B%3C/span%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22sa%22%3Er%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3B/graphql%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%20%3Cspan%20class%3D%22n%22%3ECorsHandler%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%20%3Cspan%20class%3D%22nb%22%3Edict%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22n%22%3Egraphiql%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%3Cspan%20class%3D%22kc%22%3ETrue%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%20%3Cspan%20class%3D%22n%22%3Eschema%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%3Cspan%20class%3D%22n%22%3Eschema%3C/span%3E%3Cspan%20class%3D%22p%22%3E%29%29%2C%3C/span%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22sa%22%3Er%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3B/graphql/batch%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%20%3Cspan%20class%3D%22n%22%3ECorsHandler%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%20%3Cspan%20class%3D%22nb%22%3Edict%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22n%22%3Egraphiql%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%3Cspan%20class%3D%22kc%22%3ETrue%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%20%3Cspan%20class%3D%22n%22%3Eschema%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%3Cspan%20class%3D%22n%22%3Eschema%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%20%3Cspan%20class%3D%22n%22%3Ebatch%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%3Cspan%20class%3D%22kc%22%3ETrue%3C/span%3E%3Cspan%20class%3D%22p%22%3E%29%29%2C%3C/span%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22sa%22%3Er%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3B/graphql/graphiql%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%20%3Cspan%20class%3D%22n%22%3ECorsHandler%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%20%3Cspan%20class%3D%22nb%22%3Edict%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22n%22%3Egraphiql%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%3Cspan%20class%3D%22kc%22%3ETrue%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%20%3Cspan%20class%3D%22n%22%3Eschema%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%3Cspan%20class%3D%22n%22%3Eschema%3C/span%3E%3Cspan%20class%3D%22p%22%3E%29%29%3C/span%3E%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22p%22%3E%5D%3C/span%3E%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22n%22%3Etornado%3C/span%3E%3Cspan%20class%3D%22o%22%3E.%3C/span%3E%3Cspan%20class%3D%22n%22%3Eweb%3C/span%3E%3Cspan%20class%3D%22o%22%3E.%3C/span%3E%3Cspan%20class%3D%22n%22%3EApplication%3C/span%3E%3Cspan%20class%3D%22o%22%3E.%3C/span%3E%3Cspan%20class%3D%22fm%22%3E__init__%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22bp%22%3Eself%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%20%3Cspan%20class%3D%22n%22%3Ehandlers%3C/span%3E%3Cspan%20class%3D%22p%22%3E%29%3C/span%3E%0A%0A%3Cspan%20class%3D%22k%22%3Eif%3C/span%3E%20%3Cspan%20class%3D%22vm%22%3E__name__%3C/span%3E%20%3Cspan%20class%3D%22o%22%3E%3D%3D%3C/span%3E%20%3Cspan%20class%3D%22s1%22%3E%26%2339%3B__main__%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22n%22%3Eapp%3C/span%3E%20%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%20%3Cspan%20class%3D%22n%22%3EExampleApplication%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%29%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22n%22%3Eapp%3C/span%3E%3Cspan%20class%3D%22o%22%3E.%3C/span%3E%3Cspan%20class%3D%22n%22%3Elisten%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22mi%22%3E5000%3C/span%3E%3Cspan%20class%3D%22p%22%3E%29%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22nb%22%3Eprint%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22s2%22%3E%26quot%3Bok%26quot%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%29%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22n%22%3EIOLoop%3C/span%3E%3Cspan%20class%3D%22o%22%3E.%3C/span%3E%3Cspan%20class%3D%22n%22%3Einstance%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%29%3C/span%3E%3Cspan%20class%3D%22o%22%3E.%3C/span%3E%3Cspan%20class%3D%22n%22%3Estart%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%29%3C/span%3E%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3EAnd%20I%20have%20this%20nice%20basic%20output.%3C/p%3E%0A%3Cp%3E%3Cimg%20src%3D%22/assets/images/2019/07/01/Screenshot%202019-06-29%20at%2021.27.52.png%22%20alt%3D%22Hello%20world%22%20/%3E%3C/p%3E%0A%3Cp%3EOk%20so%20now%20it%27s%20time%20to%20setup%20some%20database.%20I%20won%27t%20install%20it%20locally%20but%20use%20%3Ca%20href%3D%22https%3A//www.docker.com/%22%3Edocker%3C/a%3E%20and%20I%20will%20also%20create%20docker-compose%20file%20right%20away%20so%20I%20can%20configure%20my%20frontend%20and%20backend%20there%20later.%3Cbr%20/%3E%0AI%20got%20lucky%20because%20there%20is%20%3Ca%20href%3D%22https%3A//hub.docker.com/_/rethinkdb/%22%3Eofficial%20RethinkDB%20docker%20image%3C/a%3E%20so%20I%20can%20just%20use%20it.%20Unfortunately%20there%20is%20no%20documentation%20on%20hub%20website%20where%20it%27s%20storing%20data%20so%20I%20needed%20to%20look%20inside%20%3Ca%20href%3D%22https%3A//github.com/rethinkdb/rethinkdb-dockerfiles/blob/05946c0dbe3c7fa9338d3827428b2c32074a1447/jessie/2.3.6/Dockerfile%22%3EDockerfile%3C/a%3E%20of%20this%20container%20to%20know%20where%20to%20mount%20%3Ca%20href%3D%22https%3A//docs.docker.com/storage/volumes/%22%3Emy%20volume%3C/a%3E%20and%20what%20ports%20I%20want%20to%20expose.%3C/p%3E%0A%3Cp%3ESo%20my%20compose%20yaml%20file%20with%20only%20one%20service%20for%20now%20looks%20like%20that%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3E%3Cspan%20class%3D%22nt%22%3Eversion%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s%22%3E%26%2339%3B2%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22nt%22%3Eservices%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3Echat_db%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3Eimage%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22l%20l-Scalar%20l-Scalar-Plain%22%3Erethinkdb%3A2.3.6%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3Econtainer_name%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22l%20l-Scalar%20l-Scalar-Plain%22%3Echat_db%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3Ehostname%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22l%20l-Scalar%20l-Scalar-Plain%22%3Echat_db%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3Erestart%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22l%20l-Scalar%20l-Scalar-Plain%22%3Ealways%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3Enetworks%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22p%20p-Indicator%22%3E-%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22l%20l-Scalar%20l-Scalar-Plain%22%3Echat_network%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3Evolumes%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22p%20p-Indicator%22%3E-%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22l%20l-Scalar%20l-Scalar-Plain%22%3E./data/chat_db%3A/data%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3Eexpose%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22p%20p-Indicator%22%3E-%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22l%20l-Scalar%20l-Scalar-Plain%22%3E28015%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3Eports%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22p%20p-Indicator%22%3E-%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22l%20l-Scalar%20l-Scalar-Plain%22%3E8080%3A8080%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22p%20p-Indicator%22%3E-%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22l%20l-Scalar%20l-Scalar-Plain%22%3E28015%3A28015%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22p%20p-Indicator%22%3E-%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22l%20l-Scalar%20l-Scalar-Plain%22%3E29015%3A29015%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22nt%22%3Enetworks%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3Echat_network%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3EIt%20worked%20from%20first%20try%20and%20I%20could%20see%20web%20admin%20interface.%3C/p%3E%0A%3Cp%3E%3Cimg%20src%3D%22/assets/images/2019/07/01/Screenshot%202019-06-29%20at%2021.51.25.png%22%20alt%3D%22CORS%20browser%20error%22%20/%3E%3C/p%3E%0A%3Cp%3EThere%20is%20%3Ca%20href%3D%22https%3A//www.rethinkdb.com/docs/async-connections/%23python-with-tornado-or-twisted%22%3Esimple%20error%20in%20documentation%3C/a%3E%20so%20instead%20of%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3E%3Cspan%20class%3D%22kn%22%3Eimport%3C/span%3E%20%3Cspan%20class%3D%22nn%22%3Erethinkdb%3C/span%3E%20%3Cspan%20class%3D%22k%22%3Eas%3C/span%3E%20%3Cspan%20class%3D%22nn%22%3Er%3C/span%3E%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3EI%20used%20code%20like%20below%20to%20connect%20to%20my%20database.%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3E%3Cspan%20class%3D%22ch%22%3E%23%21/usr/bin/env%20python%3C/span%3E%0A%3Cspan%20class%3D%22c1%22%3E%23%20-%2A-%20coding%3A%20utf-8%20-%2A-%3C/span%3E%0A%3Cspan%20class%3D%22kn%22%3Eimport%3C/span%3E%20%3Cspan%20class%3D%22nn%22%3Erethinkdb%3C/span%3E%0A%0A%3Cspan%20class%3D%22n%22%3Er%3C/span%3E%20%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%20%3Cspan%20class%3D%22n%22%3Erethinkdb%3C/span%3E%3Cspan%20class%3D%22o%22%3E.%3C/span%3E%3Cspan%20class%3D%22n%22%3ERethinkDB%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%29%3C/span%3E%0A%3Cspan%20class%3D%22n%22%3Er%3C/span%3E%3Cspan%20class%3D%22o%22%3E.%3C/span%3E%3Cspan%20class%3D%22n%22%3Eset_loop_type%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22s2%22%3E%26quot%3Btornado%26quot%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%29%3C/span%3E%0A%3Cspan%20class%3D%22n%22%3Econnection%3C/span%3E%20%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%20%3Cspan%20class%3D%22n%22%3Er%3C/span%3E%3Cspan%20class%3D%22o%22%3E.%3C/span%3E%3Cspan%20class%3D%22n%22%3Econnect%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22n%22%3Ehost%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3Blocalhost%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%20%3Cspan%20class%3D%22n%22%3Eport%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%3Cspan%20class%3D%22mi%22%3E28015%3C/span%3E%3Cspan%20class%3D%22p%22%3E%29%3C/span%3E%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3EYeah%20it%20works%2C%20now%20it%27s%20time%20to%20create%20database%20and%20some%20graphql%20schema.%20%20%3C/p%3E%0A%3Cp%3E%3Ca%20href%3D%22https%3A//github.com/vane/blog-code/tree/master/rethinkdb-tornado-graphql-chat-part-1%22%3ESource%20code%20of%20this%20post%3C/a%3E%3C/p%3E
Michal Szczepanski
['', '', '', '', '', '', '']
Today let's try something different. Slack market capital is currently arround 18.92B of dollars. Why not make persistent chat with chatrooms using some modern open source technologies like Docker for scalability, tornado for webserver, graphql for data exchange and rethinkdb for persistant layer.Basic webpack react babeljs setup2019-06-29T16:51:01+02:002019-06-29T16:51:01+02:00https://vane.pl/basic-webpack-react-babeljs-es6-setup
%3Cp%3EIn%20this%20post%20I%20will%20take%20care%20of%20basic%20setup%20of%20%3Ca%20href%3D%22https%3A//reactjs.org/%22%3Ereactjs%3C/a%3E%20project%20using%20%3Ca%20href%3D%22https%3A//webpack.js.org/%22%3Ewebpack%3C/a%3E.%0ATo%20do%20this%20as%20a%20base%20I%20will%20use%20code%20from%20my%20previous%20post%20about%20%3Ca%20href%3D%22/understand-how-to-theme-material-ui/%22%3Ehow%20to%20theme%20material%20ui%3C/a%3E.%20For%20package%20manager%20I%20use%20%3Ca%20href%3D%22https%3A//yarnpkg.com/en/%22%3Eyarn%3C/a%3E.%20There%20is%20%3Ca%20href%3D%22https%3A//code.fb.com/web/yarn-a-new-package-manager-for-javascript/%22%3Egreat%20writeup%3C/a%3E%20about%20why%20yarn%20was%20created%20by%20facebook.%3C/p%3E%0A%3Cp%3EMy%20basic%20dependencies%20are%20%0A1.%20webpack%2C%20webpack-cli%20-%20to%20build%20frontend%20application%0A2.%20copy-webpack-plugin%20-%20to%20copy%20static%20assets%0A3.%20%40babel-core%2C%20%40babel/preset-react%20and%20babel-loader%20-%20to%20transpile%20code%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3E%26quot%3Bname%26quot%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s2%22%3E%26quot%3Bbasic-webpack-react-babeljs-es6-setup%26quot%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3E%26quot%3Bversion%26quot%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s2%22%3E%26quot%3B1.0.0%26quot%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3E%26quot%3Bmain%26quot%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s2%22%3E%26quot%3Bindex.js%26quot%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3E%26quot%3Blicense%26quot%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s2%22%3E%26quot%3BMIT%26quot%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3E%26quot%3Bscripts%26quot%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3E%26quot%3Bpostinstall%26quot%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s2%22%3E%26quot%3Bwebpack%26quot%3B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7D%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3E%26quot%3Bdependencies%26quot%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3E%26quot%3Breact%26quot%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s2%22%3E%26quot%3B%5E16.8.6%26quot%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3E%26quot%3Breact-dom%26quot%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s2%22%3E%26quot%3B%5E16.8.6%26quot%3B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7D%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3E%26quot%3BdevDependencies%26quot%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3E%26quot%3B%40babel/core%26quot%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s2%22%3E%26quot%3B%5E7.4.5%26quot%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3E%26quot%3B%40babel/preset-react%26quot%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s2%22%3E%26quot%3B%5E7.0.0%26quot%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3E%26quot%3Bbabel-loader%26quot%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s2%22%3E%26quot%3B%5E8.0.6%26quot%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3E%26quot%3Bcopy-webpack-plugin%26quot%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s2%22%3E%26quot%3B%5E5.0.3%26quot%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3E%26quot%3Bwebpack%26quot%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s2%22%3E%26quot%3B%5E4.35.0%26quot%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3E%26quot%3Bwebpack-cli%26quot%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s2%22%3E%26quot%3B%5E3.3.4%26quot%3B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7D%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22p%22%3E%7D%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3EI%20can%20get%20rid%20of%20react%2C%20react-dom%2C%20%40babel/preset-react%20dependencies%20if%20I%20want%20to%20use%20other%20frontend%20framework%20or%20just%20use%20es6.%3Cbr%20/%3E%0ASome%20of%20the%20options%20of%20the%20%3Cem%3Epackage.json%3C/em%3E%20script%20is%20%3Cstrong%3Epostinstall%3C/strong%3E%20script%20that%20will%20launch%20everytime%20I%20add%20some%20package.%20Also%20it%20gives%20me%20ability%20to%20build%20project%20using%20one%20word.%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3Eyarn%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3ENext%20configuration%20option%20is%20.babelrc%20file%20where%20I%20can%20specify%20plugins%20for%20%3Ca%20href%3D%22https%3A//babeljs.io/%22%3Ebabeljs%20compiler%3C/a%3E.%20Babel%20is%20also%20great%20cause%20it%20gives%20developers%20ability%20to%20use%20features%20from%20future%20javascript%20versions%2C%20proposals%20and%20experiments%20like%20%3Ca%20href%3D%22https%3A//babeljs.io/docs/en/babel-plugin-proposal-async-generator-functions%22%3Easync%20generator%20functions%3C/a%3E%2C%20%3Ca%20href%3D%22https%3A//babeljs.io/docs/en/babel-plugin-proposal-decorators%22%3Edecorators%3C/a%3E%2C%20%3Ca%20href%3D%22https%3A//babeljs.io/docs/en/babel-plugin-proposal-class-properties%22%3Eclass%20properties%3C/a%3E%20or%20%3Ca%20href%3D%22https%3A//babeljs.io/docs/en/babel-plugin-proposal-private-methods%22%3Eprivate%20methods%3C/a%3E%20to%20name%20a%20few.%3C/p%3E%0A%3Cp%3ESo%20in%20this%20example%20my%20%3Cem%3E.babelrc%3C/em%3E%20file%20is%20simple%20%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3E%26quot%3Bpresets%26quot%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%5B%3C/span%3E%3Cspan%20class%3D%22s2%22%3E%26quot%3B%40babel/preset-react%26quot%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%5D%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22p%22%3E%7D%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3EAnd%20finally%20there%20is%20webpack%20that%20allows%20to%20configure%20build%20with%20some%20build%20steps%20but%20now%20it%27s%20simple.%20%20%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3E%3Cspan%20class%3D%22kd%22%3Econst%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Ewebpack%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Erequire%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3Bwebpack%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%29%3B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22kd%22%3Econst%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3ECopy%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Erequire%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3Bcopy-webpack-plugin%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%29%3B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%0A%3Cspan%20class%3D%22nx%22%3Emodule%3C/span%3E%3Cspan%20class%3D%22p%22%3E.%3C/span%3E%3Cspan%20class%3D%22nx%22%3Eexports%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Emode%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3Bnone%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Eentry%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3B./src/index.js%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Eoutput%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Epath%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3E__dirname%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22o%22%3E%2B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3B/build%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Efilename%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3Bindex.js%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Elibrary%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3BDemo%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3ElibraryTarget%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3Bumd%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7D%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Emodule%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Erules%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%5B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Etest%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22sr%22%3E/%5C.m%3Fjs%24/%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Eexclude%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22sr%22%3E/%28node_modules%29/%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Euse%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Eloader%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3Bbabel-loader%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7D%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7D%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%5D%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7D%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Eplugins%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%5B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22ow%22%3Enew%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3ECopy%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%5B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7B%3C/span%3E%3Cspan%20class%3D%22kr%22%3Efrom%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3Bhtml%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7D%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%5D%29%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%5D%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22p%22%3E%7D%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3ETo%20use%20babel%20with%20webpack%20I%20use%20%3Ca%20href%3D%22https%3A//github.com/babel/babel-loader%22%3Ebabel-loader%3C/a%3E%20and%20it%27s%20specified%20in%20module%20-%26gt%3B%20rules%20-%26gt%3B%20use%20-%26gt%3B%20loader.%3Cbr%20/%3E%0AThe%20main%20file%20is%20%3Cem%3Eentry%3C/em%3E%20output%20is%20in%20output%20-%26gt%3B%20path.%20__dirname%20is%20node%20global%20variable%20pointing%20to%20current%20directory.%3Cbr%20/%3E%0ATo%20copy%20data%20from%20html%20directory%20to%20build%20directory%20I%20use%20copy-webpack-plugin%20that%20is%20defined%20in%20%3Cem%3Eplugins%3C/em%3E%20section.%3Cbr%20/%3E%0AFinally%20you%20can%20define%20your%20export%20as%20a%20library%20which%20means%20it%20will%20be%20available%20as%20global%20variable.%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3E%3Cspan%20class%3D%22nx%22%3Elibrary%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3BDemo%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22nx%22%3ElibraryTarget%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3Bumd%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3EIf%20your%20file%20exports%20any%20variable%20or%20method.%20For%20example%20%3A%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3E%3Cspan%20class%3D%22k%22%3Eimport%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3EReactDOM%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22kr%22%3Efrom%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3Breact-dom%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22k%22%3Eimport%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3EReact%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22kr%22%3Efrom%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3Breact%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%0A%3Cspan%20class%3D%22k%22%3Eexport%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22kd%22%3Econst%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3ETest%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%29%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3D%26gt%3B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%3C/span%3E%3Cspan%20class%3D%22k%22%3Ereturn%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22o%22%3E%26lt%3B%3C/span%3E%3Cspan%20class%3D%22nx%22%3Eh1%3C/span%3E%3Cspan%20class%3D%22o%22%3E%26gt%3B%3C/span%3E%3Cspan%20class%3D%22nx%22%3EHello%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3EWorld%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22o%22%3E%21%26lt%3B%3C/span%3E%3Cspan%20class%3D%22err%22%3E/h1%26gt%3B%29%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22p%22%3E%7D%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%0A%3Cspan%20class%3D%22nx%22%3EReactDOM%3C/span%3E%3Cspan%20class%3D%22p%22%3E.%3C/span%3E%3Cspan%20class%3D%22nx%22%3Erender%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22o%22%3E%26lt%3B%3C/span%3E%3Cspan%20class%3D%22nx%22%3ETest%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22o%22%3E/%26gt%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22nb%22%3Edocument%3C/span%3E%3Cspan%20class%3D%22p%22%3E.%3C/span%3E%3Cspan%20class%3D%22nx%22%3EgetElementById%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3Bapp%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%29%29%3B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3EYou%20can%20access%20each%20exported%20method%20or%20variable%20by%20typing%20%3Cem%3EDemo.methodName%3C/em%3E%20to%20the%20console.%3C/p%3E%0A%3Cp%3E%3Cimg%20src%3D%22/assets/images/2019/06/29/Screenshot%202019-06-29%20at%2016.46.01.png%22%20alt%3D%22Access%20webpack%20exported%20library%20method%22%20/%3E%3C/p%3E%0A%3Cp%3EFinally%20there%20is%20%3Ca%20href%3D%22https%3A//webpack.js.org/configuration/mode/%22%3Emode%3C/a%3E.%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3E%3Cspan%20class%3D%22nx%22%3Emode%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3Bnone%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3EThat%20can%20also%20be%20%27production%27%20to%20create%20size%20optimized%20build%20or%20%27development%27%3C/p%3E%0A%3Cp%3EYou%20can%20test%20this%20sample%20%3Ca%20href%3D%22/assets/demo/basic-webpack-react-babeljs-es6-setup/%22%3Eentering%20here%3C/a%3E%20also%20code%20is%20on%20%3Ca%20href%3D%22https%3A//github.com/vane/blog-code/tree/master/basic-webpack-react-babeljs-es6-setup%22%3Emy%20github%20repository%3C/a%3E.%3C/p%3E
Michal Szczepanski
['', '', '', '']
In this post I will take care of basic setup of reactjs project using webpack.To do this as a base I will use code from my previous post about how to theme material ui. For package manager I use yarn. There is great writeup about why yarn was created by facebook.Docker, flask, mariadb todo list from scratch2019-06-27T17:00:00+02:002019-06-27T17:00:00+02:00https://vane.pl/docker-flask-mariadb-todo-list-from-scratch
%3Cp%3EDevelopers%20sometimes%20work%20with%20complicated%20environments.%20Most%20likely%20setup%20of%20this%20environment%20takes%20lot%27s%20of%20time%20and%20it%27s%20painfull.%20There%20is%20solution%20for%20that%20called%20%3Ca%20href%3D%22https%3A//www.docker.com/%22%3Edocker%3C/a%3E.%3Cbr%20/%3E%0AThe%20simplest%20thing%20you%20can%20do%20is%20just%20install%20Docker%20and%20then%20using%20one%20command%20invoke%20some%20action%20on%20it%2C%20for%20example%20list%20files%20inside%20directory%20and%20remove%20container%20right%20away.%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3Edocker%20run%20--rm%20alpine%3A3.10.0%20ls%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3EThis%20will%20automatically%20download%20alpine%20linux%20with%20version%203.10.0%2C%20invoke%20shell%20command%20ls%2C%20give%20output%20to%20the%20console%20and%20cleanup%20container.%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3Ebin%0Adev%0Aetc%0Ahome%0Alib%0Amedia%0Amnt%0Aopt%0Aproc%0Aroot%0Arun%0Asbin%0Asrv%0Asys%0Atmp%0Ausr%0Avar%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3EPrevious%20way%20to%20use%20some%20complicated%20environment%20after%20n-th%20setup%20person%20frustrated%20with%20work%20usually%20started%20using%20%3Ca%20href%3D%22https%3A//en.wikipedia.org/wiki/Virtual_machine%22%3Evirtual%20machine%3C/a%3E%2C%20most%20likely%20%3Ca%20href%3D%22https%3A//www.virtualbox.org/%22%3EVirtualBox%3C/a%3E%20to%20set%20up%20environment%20and%20then%20pass%20this%20virtual%20machine%20on%20pen%20drive.%20This%20usually%20work%20in%20small%20teams%20but%20won%27t%20work%20when%20there%20are%20houndreds%20developers%20working%20on%20same%20codebase.%0ANow%20there%20is%20great%20tool%20that%20allows%20us%20to%20combine%20those%20processes%20running%20on%20this%20virtual%20machine%20to%20one%20program%2C%20extend%2C%20change%20it%20and%20keep%20environment%20clear.%20And%20most%20important%20run%20it%20all%20using%20one%20command%20so%20if%20new%20employee%20come%20to%20the%20office%2C%20just%20say%20to%20him%20to%20install%20docker%20or%20preinstall%20docker%20on%20his%20development%20machine.%20Then%20he%20just%20need%20to%20download%20repository%20with%20code%20and%20type%20%3Cem%3Edocker-compose%20up%3C/em%3E%20to%20see%20application%20running.%20%3C/p%3E%0A%3Cp%3EOk%20so%20let%27s%20start.%3C/p%3E%0A%3Cp%3EThe%20main%20concept%20of%20docker%20is%20that%20you%20run%20single%20program%20on%20single%20container%20so%20you%20need%20to%20use%20many%20containers%20to%20run%20many%20programs.%20To%20create%20container%20you%20need%20to%20use%20special%20file%20named%20%3Cem%3EDockerfile%3C/em%3E%20and%20to%20group%20containers%20there%20are%20many%20tools%20and%20I%20use%20%3Ca%20href%3D%22https%3A//docs.docker.com/compose/%22%3Edocker-compose%3C/a%3E%20because%20it%27s%20simple%20for%20development%20purposes%20but%20currently%20less%20mainstream%20as%20docker%20now%20comes%20with%20%3Ca%20href%3D%22https%3A//kubernetes.io/%22%3Ekubernetes%3C/a%3E%20orchestrator%20preinstalled.%20%3C/p%3E%0A%3Cp%3EApplications%20on%20container%20run%20until%20console%20is%20blocked%20and%20you%20can%20define%20what%20to%20do%20after%20crash%20%28ex.%20restart%29.%3C/p%3E%0A%3Cp%3EDockerfile%20is%20simple%20%3Cem%3EKEY%3C/em%3E%20%3Cem%3EVALUE%3C/em%3E%20definition%20that%20allows%20user%20to%20manage%20dependencies%20of%20software.%3C/p%3E%0A%3Cp%3EIn%20this%20post%20I%20will%20build%20simple%20webpage%20%3Ca%20href%3D%22http%3A//flask.pocoo.org/%22%3Eusing%20flask%20framework%3C/a%3E%20and%20%3Ca%20href%3D%22https%3A//mariadb.org/%22%3Emariadb%20database%3C/a%3E.%3Cbr%20/%3E%0ALet%27s%20start%20by%20define%20our%20directories%20as%20I%20will%20build%20and%20run%20everything%20localy.%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3Eworkspace/%0A%20%20%20%20docker/%0A%20%20%20%20%20%20%20%20demo_db/%0A%20%20%20%20%20%20%20%20%20%20%20%20Dockerfile%0A%20%20%20%20%20%20%20%20%20%20%20%20database-schema.sql%0A%20%20%20%20%20%20%20%20demo_webservice/%0A%20%20%20%20%20%20%20%20%20%20%20%20Dockerfile%0A%20%20%20%20%20%20%20%20%20%20%20%20requirements.txt%0A%20%20%20%20%20%20%20%20docker-compose.yml%0A%20%20%20%20demo_webservice%0A%20%20%20%20%20%20%20%20static/%0A%20%20%20%20%20%20%20%20%20%20%20%20index.html%0A%20%20%20%20%20%20%20%20main.py%0A%20%20%20%20env/demo_webservice-env%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3EAs%20you%20can%20see%20there%20will%20be%20two%20containers%20defined%20by%20directories%20inside%20docker%20folder%20%3Cem%3Edemo_db%3C/em%3E%20that%20will%20serve%20%3Ca%20href%3D%22https%3A//mariadb.org/%22%3Emariadb%3C/a%3E%20and%20%3Cem%3Edemo_webservice%3C/em%3E%20that%20will%20serve%20flask%20web%20application.%20Those%20two%20services%20will%20be%20managed%20by%20docker-compose%20using%20docker-compose.yml%20file.%20Flask%20application%20source%20code%20will%20be%20in%20%3Cem%3Eworkspace/demo_webservice%3C/em%3E.%20And%20my%20local%20python%20environment%20will%20be%20in%20workspace/env/demo_webservice-env%3C/p%3E%0A%3Cp%3EOk%20so%20lets%20start%20with%20picking%20base%20image%20for%20%3Cem%3Edemo_db%3C/em%3E%20from%20%3Ca%20href%3D%22https%3A//hub.docker.com%22%3Edocker%20hub%3C/a%3E%20cause%20main%20advantage%20of%20docker%20is%20also%20that%20you%20don%27t%20need%20to%20install%20everything%20from%20scratch.%20For%20mariadb%20%3Ca%20href%3D%22https%3A//hub.docker.com/_/mariadb/%22%3Ethere%20are%20several%20options%3C/a%3E.%3C/p%3E%0A%3Cp%3E%3Cimg%20src%3D%22/assets/images/2019/06/26/Screenshot%202019-06-26%20at%2020.01.00.png%22%20alt%3D%22Mariadb%20docker%20containers%22%20/%3E%3C/p%3E%0A%3Cp%3ELet%27s%20pick%20latest%20one%20%3Cem%3E10.4.6-bionic%3C/em%3E%20as%20a%20base%20and%20create%20simple%20%3Ca%20href%3D%22https%3A//docs.docker.com/engine/reference/builder/%22%3EDockerfile%3C/a%3E.%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3E%3Cspan%20class%3D%22k%22%3EFROM%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s%22%3Emariadb%3A0.4.6-bionic%3C/span%3E%0A%3Cspan%20class%3D%22k%22%3EMAINTAINER%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s%22%3Ecreator.of.file%40example.com%3C/span%3E%0A%3Cspan%20class%3D%22k%22%3EADD%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3Edatabase-schema.sql%20/docker-entrypoint-initdb.d/database-schema.sql%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3EThe%20convention%20is%20to%20make%20docker%20file%20as%20small%20as%20possible%20so%20it%20won%27t%20take%20to%20much%20space%20in%20%3Ca%20href%3D%22https%3A//docs.docker.com/registry/%22%3Econtainer%20registry%3C/a%3E%20if%20we%20want%20to%20use%20one%20and%20it%20is%20more%20flexible%20to%20extend%20it%20later%20and%20define%20some%20parameters%20in%20compose%20file.%0A1.%20FROM%20is%20base%20image%20name%20followed%20by%20version%0A2.%20MAINTAINER%20is%20usually%20email%20address%20of%20person%20who%20maintain%20the%20container%0A3.%20ADD%20is%20command%20to%20add%20file%20to%20container%2C%20to%20complicate%20things%20I%20will%20create%20schema%20using%20pure%20SQL.%20This%20script%20according%20to%20the%20documentation%20will%20be%20loaded%20on%20start%20of%20container.%0ALines%20in%20dockerfile%20are%20very%20important%20and%20they%20have%20very%20powerfull%20feature%20as%20each%20line%20has%20it%27s%20own%20hash%20and%20commit.%20For%20example%20if%20you%20add%20something%20on%20the%20line%204%0Alet%27s%20say%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3E%3Cspan%20class%3D%22k%22%3ECOPY%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3Esomefile%20somedirectory%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3EDocker%20will%20only%20process%20last%20line%20as%20it%20has%20the%20base%20image%20of%20those%20three%20lines.%20But%20if%20you%20modify%20line%203%20it%20will%20rebuild%20starting%20from%20line%202.%3C/p%3E%0A%3Cp%3ESQL%20script%20inside%20file%20%3Cem%3Edatabase-schema.sql%3C/em%3E%20will%20be%20simple%20creation%20of%20one%20table%20like%20this%20%3A%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3E%3Cspan%20class%3D%22k%22%3EDROP%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22k%22%3ETABLE%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22k%22%3EIF%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22k%22%3EEXISTS%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22o%22%3E%60%3C/span%3E%3Cspan%20class%3D%22n%22%3Etodo_list%3C/span%3E%3Cspan%20class%3D%22o%22%3E%60%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22k%22%3ECREATE%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22k%22%3ETABLE%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22o%22%3E%60%3C/span%3E%3Cspan%20class%3D%22n%22%3Etodo_list%3C/span%3E%3Cspan%20class%3D%22o%22%3E%60%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22o%22%3E%60%3C/span%3E%3Cspan%20class%3D%22n%22%3Eid%3C/span%3E%3Cspan%20class%3D%22o%22%3E%60%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22nb%22%3Eint%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22mi%22%3E11%3C/span%3E%3Cspan%20class%3D%22p%22%3E%29%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22k%22%3ENOT%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22k%22%3ENULL%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22n%22%3EAUTO_INCREMENT%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22o%22%3E%60%3C/span%3E%3Cspan%20class%3D%22n%22%3Etitle%3C/span%3E%3Cspan%20class%3D%22o%22%3E%60%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22nb%22%3Evarchar%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22mi%22%3E128%3C/span%3E%3Cspan%20class%3D%22p%22%3E%29%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22k%22%3ECOLLATE%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22n%22%3Eutf8mb4_unicode_ci%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22k%22%3EDEFAULT%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22k%22%3ENULL%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22o%22%3E%60%3C/span%3E%3Cspan%20class%3D%22n%22%3Edescription%3C/span%3E%3Cspan%20class%3D%22o%22%3E%60%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22nb%22%3Etext%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22k%22%3ECOLLATE%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22n%22%3Eutf8mb4_unicode_ci%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22o%22%3E%60%3C/span%3E%3Cspan%20class%3D%22n%22%3Ecreated_at%3C/span%3E%3Cspan%20class%3D%22o%22%3E%60%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22k%22%3Etimestamp%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22k%22%3ENOT%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22k%22%3ENULL%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22k%22%3EDEFAULT%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3B0000-00-00%2000%3A00%3A00%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22o%22%3E%60%3C/span%3E%3Cspan%20class%3D%22n%22%3Emodified_at%3C/span%3E%3Cspan%20class%3D%22o%22%3E%60%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22k%22%3Etimestamp%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22k%22%3ENOT%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22k%22%3ENULL%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22k%22%3EDEFAULT%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3B0000-00-00%2000%3A00%3A00%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22o%22%3E%60%3C/span%3E%3Cspan%20class%3D%22n%22%3Eis_done%3C/span%3E%3Cspan%20class%3D%22o%22%3E%60%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22n%22%3Etinyint%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22mi%22%3E1%3C/span%3E%3Cspan%20class%3D%22p%22%3E%29%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22k%22%3EDEFAULT%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3B0%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22k%22%3EPRIMARY%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22k%22%3EKEY%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22o%22%3E%60%3C/span%3E%3Cspan%20class%3D%22n%22%3Eid%3C/span%3E%3Cspan%20class%3D%22o%22%3E%60%3C/span%3E%3Cspan%20class%3D%22p%22%3E%29%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22p%22%3E%29%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22n%22%3EENGINE%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%3Cspan%20class%3D%22n%22%3EInnoDB%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22k%22%3EDEFAULT%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22n%22%3ECHARSET%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%3Cspan%20class%3D%22n%22%3Eutf8mb4%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22k%22%3ECOLLATE%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%3Cspan%20class%3D%22n%22%3Eutf8mb4_unicode_ci%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3ESo%20now%20I%20can%20build%20%3Cem%3Edemo_db%3C/em%3E%20container%20to%20see%20if%20everything%20is%20working%20by%20running%20%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3Edocker%20build%20-t%20demo_db%3Alatest%20./demo_db%0A%0ASending%20build%20context%20to%20Docker%20daemon%20%20%3Cspan%20class%3D%22m%22%3E3%3C/span%3E.072kB%0AStep%20%3Cspan%20class%3D%22m%22%3E1%3C/span%3E/3%20%3A%20FROM%20mariadb%3A10.4.6-bionic%0A%20---%26gt%3B%20f1e4084965e5%0AStep%20%3Cspan%20class%3D%22m%22%3E2%3C/span%3E/3%20%3A%20MAINTAINER%20creator.of.file%40example.com%0A%20---%26gt%3B%20Running%20%3Cspan%20class%3D%22k%22%3Ein%3C/span%3E%20984211d8fdde%0ARemoving%20intermediate%20container%20984211d8fdde%0A%20---%26gt%3B%20a633167ad080%0AStep%20%3Cspan%20class%3D%22m%22%3E3%3C/span%3E/3%20%3A%20ADD%20database-schema.sql%20/docker-entrypoint-initdb.d/database-schema.sql%0A%20---%26gt%3B%20ae8aa43a2b9d%0ASuccessfully%20built%20ae8aa43a2b9d%0ASuccessfully%20tagged%20demo_db%3Alatest%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3EThen%20the%20docker%20image%20can%20be%20seen%20by%20running%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3E%3Cspan%20class%3D%22nv%22%3E%24docker%3C/span%3E%20images%0AREPOSITORY%20%20%20%20%20%20%20%20%20%20%20TAG%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20IMAGE%20ID%20%20%20%20%20%20%20%20%20%20%20%20CREATED%20%20%20%20%20%20%20%20%20%20%20%20%20SIZE%0Ademo_db%20%20%20%20%20%20%20%20%20%20%20%20%20%20latest%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20ae8aa43a2b9d%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22m%22%3E32%3C/span%3E%20seconds%20ago%20%20%20%20%20%20356MB%0Aalpine%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22m%22%3E3%3C/span%3E.10.0%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%204d90542f0623%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22m%22%3E6%3C/span%3E%20days%20ago%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22m%22%3E5%3C/span%3E.58MB%0Amariadb%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22m%22%3E10%3C/span%3E.4.6-bionic%20%20%20%20%20%20%20%20%20f1e4084965e5%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22m%22%3E6%3C/span%3E%20days%20ago%20%20%20%20%20%20%20%20%20%20356MB%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3ETo%20test%20if%20sql%20script%20is%20working%20I%20can%20run%20my%20%3Cem%3Edemo_db%3C/em%3E%20instance%20from%20command%20line%20and%20expose%20port%203306%20to%20my%20local%20machine%20so%20I%20can%20connect%20to%20it%20using%20local%20mysql%20client%20or%20use%20mysql%20client%20inside%20container%20once%20I%20start%20it.%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3Edocker%20run%20--rm%20-d%20-e%20%3Cspan%20class%3D%22nv%22%3EMYSQL_ROOT_PASSWORD%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3Edemo%20-e%20%3Cspan%20class%3D%22nv%22%3EMYSQL_DATABASE%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3Edemo%20-p%20%3Cspan%20class%3D%22m%22%3E3306%3C/span%3E%3A3306%20mariadb%3A10.4.6-bionic%0A12fed9cbc05bcc276aca37aeb8700ed3441581a24eb0912250e5626b68b11031%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3E--%20rm%20tells%20to%20remove%20container%20after%20stop%3Cbr%20/%3E%0A-d%20tells%20to%20not%20block%20current%20console%20and%20start%20container%20in%20background%3Cbr%20/%3E%0A-e%20is%20environment%20variable%20to%20set%20root%20password%20and%20setup%20demo%20database%3Cbr%20/%3E%0A-p%20is%20port%20first%20number%20is%20local%20machine%20second%20number%20is%20container%20port%3Cbr%20/%3E%0ASecond%20line%20is%20output%20command%20hash%20of%20just%20runned%20container.%20Also%20there%20is%20possibility%20to%20operate%20by%20name%20by%20defining%20--name%20of%20the%20container%20otherwise%20name%20is%20randomly%20generated.%0ATo%20see%20if%20container%20is%20running%20type%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3Edocker%20ps%0ACONTAINER%20ID%20%20%20%20%20%20%20%20IMAGE%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20COMMAND%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20CREATED%20%20%20%20%20%20%20%20%20%20%20%20%20STATUS%20%20%20%20%20%20%20%20%20%20%20%20%20%20PORTS%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20NAMES%0A12fed9cbc05b%20%20%20%20%20%20%20%20demo_db%3Alatest%20%20%20%20%20%20%3Cspan%20class%3D%22s2%22%3E%26quot%3Bdocker-entrypoint.s%E2%80%A6%26quot%3B%3C/span%3E%20%20%20%3Cspan%20class%3D%22m%22%3E17%3C/span%3E%20seconds%20ago%20%20%20%20%20%20Up%20%3Cspan%20class%3D%22m%22%3E16%3C/span%3E%20seconds%20%20%20%20%20%20%20%3Cspan%20class%3D%22m%22%3E0%3C/span%3E.0.0.0%3A3306-%26gt%3B3306/tcp%20%20%20pedantic_ishizaka%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3EI%20don%27t%20need%20to%20have%20mysql%20client%20installed%20localy%20I%20can%20simply%20go%20to%20container%20shell%20by%20running.%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3Edocker%20%3Cspan%20class%3D%22nb%22%3Eexec%3C/span%3E%20-ti%2012fe%20bash%0Aroot%4012fed9cbc05b%3A/%23%20mysql%20-u%20root%20-p%20demo%0AEnter%20password%3A%20%0AReading%20table%20information%20%3Cspan%20class%3D%22k%22%3Efor%3C/span%3E%20completion%20of%20table%20and%20column%20names%0AYou%20can%20turn%20off%20this%20feature%20to%20get%20a%20quicker%20startup%20with%20-A%0A%0AWelcome%20to%20the%20MariaDB%20monitor.%20%20Commands%20end%20with%20%3Cspan%20class%3D%22p%22%3E%3B%3C/span%3E%20or%20%3Cspan%20class%3D%22se%22%3E%5Cg%3C/span%3E.%0AYour%20MariaDB%20connection%20id%20is%20%3Cspan%20class%3D%22m%22%3E8%3C/span%3E%0AServer%20version%3A%20%3Cspan%20class%3D%22m%22%3E10%3C/span%3E.4.6-MariaDB-1%3A10.4.6%2Bmaria~bionic%20mariadb.org%20binary%20distribution%0A%0ACopyright%20%3Cspan%20class%3D%22o%22%3E%28%3C/span%3Ec%3Cspan%20class%3D%22o%22%3E%29%3C/span%3E%20%3Cspan%20class%3D%22m%22%3E2000%3C/span%3E%2C%20%3Cspan%20class%3D%22m%22%3E2018%3C/span%3E%2C%20Oracle%2C%20MariaDB%20Corporation%20Ab%20and%20others.%0A%0AType%20%3Cspan%20class%3D%22s1%22%3E%26%2339%3Bhelp%3B%26%2339%3B%3C/span%3E%20or%20%3Cspan%20class%3D%22s1%22%3E%26%2339%3B%5Ch%26%2339%3B%3C/span%3E%20%3Cspan%20class%3D%22k%22%3Efor%3C/span%3E%20help.%20Type%20%3Cspan%20class%3D%22s1%22%3E%26%2339%3B%5Cc%26%2339%3B%3C/span%3E%20to%20clear%20the%20current%20input%20statement.%0A%0AMariaDB%20%3Cspan%20class%3D%22o%22%3E%5B%3C/span%3Edemo%3Cspan%20class%3D%22o%22%3E%5D%3C/span%3E%26gt%3B%20show%20tables%3Cspan%20class%3D%22p%22%3E%3B%3C/span%3E%0A%2B----------------%2B%0A%3Cspan%20class%3D%22p%22%3E%7C%3C/span%3E%20Tables_in_demo%20%3Cspan%20class%3D%22p%22%3E%7C%3C/span%3E%0A%2B----------------%2B%0A%3Cspan%20class%3D%22p%22%3E%7C%3C/span%3E%20todo_list%20%20%20%20%20%20%3Cspan%20class%3D%22p%22%3E%7C%3C/span%3E%0A%2B----------------%2B%0A%3Cspan%20class%3D%22m%22%3E1%3C/span%3E%20row%20%3Cspan%20class%3D%22k%22%3Ein%3C/span%3E%20%3Cspan%20class%3D%22nb%22%3Eset%3C/span%3E%20%3Cspan%20class%3D%22o%22%3E%28%3C/span%3E%3Cspan%20class%3D%22m%22%3E0%3C/span%3E.001%20sec%3Cspan%20class%3D%22o%22%3E%29%3C/span%3E%0A%0AMariaDB%20%3Cspan%20class%3D%22o%22%3E%5B%3C/span%3Edemo%3Cspan%20class%3D%22o%22%3E%5D%3C/span%3E%26gt%3B%20%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3EThis%20gives%20me%20great%20ability%20to%20test%20new%20software%20without%20installing%20it%20on%20my%20local%20machine.%20When%20I%20stop%20container%20by%20running%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3Edocker%20stop%2012fed%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3Eit%20will%20disappear%20automatically%20and%20all%20my%20changes%20also%20so%20be%20sure%20to%20store%20changes%20somewhere%20else%20then%20inside%20container%20if%20you%20need%20them.%20Best%20way%20is%20to%20treat%20container%20as%20another%20application%20runtime.%3C/p%3E%0A%3Cp%3ETable%20is%20there%20but%20there%20is%20no%20data%20and%20no%20application%20so%20let%27s%20build%20simple%20one.%0AI%20will%20use%20python%20%3Ca%20href%3D%22https%3A//docs.python.org/3.7/library/venv.html%22%3Evirtual%20environment%3C/a%3E%20to%20keep%20my%20python%20version%20separated.%20To%20create%20new%20environment%20I%20type%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3Emkdir%20env%0Apython3%20-m%20venv%20env/demo_webservice-env%0A%3Cspan%20class%3D%22nb%22%3Esource%3C/span%3E%20env/demo_webservice-env/bin/activate%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3EThen%20I%20install%20my%20dependencies%3A%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3Epip%20install%20flask%20mysqlclient%20wtforms%20wtforms_json%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3EAnd%20create%20some%20basic%20application%20inside%20demo_webservice/main.py%0AThis%20paplication%20will%20connect%20to%20database%20using%20this%20code%20on%20my%20local%20machine%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3E%3Cspan%20class%3D%22n%22%3EDB%3C/span%3E%3Cspan%20class%3D%22o%22%3E.%3C/span%3E%3Cspan%20class%3D%22n%22%3Econnection%3C/span%3E%20%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%20%3Cspan%20class%3D%22n%22%3Econnect%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22n%22%3Ehost%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%3Cspan%20class%3D%22s2%22%3E%26quot%3B127.0.01%26quot%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%0A%20%20%20%20%20%20%3Cspan%20class%3D%22n%22%3Euser%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%3Cspan%20class%3D%22s2%22%3E%26quot%3Broot%26quot%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%20%3Cspan%20class%3D%22n%22%3Eport%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%3Cspan%20class%3D%22mi%22%3E3306%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%20%3Cspan%20class%3D%22n%22%3Epasswd%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%3Cspan%20class%3D%22s2%22%3E%26quot%3Bdemo%26quot%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22n%22%3Edb%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%3Cspan%20class%3D%22s2%22%3E%26quot%3Bdemo%26quot%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%20%3Cspan%20class%3D%22n%22%3Econv%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%3Cspan%20class%3D%22n%22%3Econv%3C/span%3E%3Cspan%20class%3D%22p%22%3E%29%3C/span%3E%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3Ebut%20on%20container%20the%20demo_webservice%20can%20resolve%20%3Cem%3Edemo_db%3C/em%3E%20name%20so%20I%20can%20change%20host%20to%20%3Cem%3Edemo_db%3C/em%3E%20name%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3E%3Cspan%20class%3D%22n%22%3EDB%3C/span%3E%3Cspan%20class%3D%22o%22%3E.%3C/span%3E%3Cspan%20class%3D%22n%22%3Econnection%3C/span%3E%20%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%20%3Cspan%20class%3D%22n%22%3Econnect%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22n%22%3Ehost%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%3Cspan%20class%3D%22s2%22%3E%26quot%3Bdemo_db%26quot%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%0A%20%20%20%20%20%20%3Cspan%20class%3D%22n%22%3Euser%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%3Cspan%20class%3D%22s2%22%3E%26quot%3Broot%26quot%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%20%3Cspan%20class%3D%22n%22%3Eport%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%3Cspan%20class%3D%22mi%22%3E3306%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%20%3Cspan%20class%3D%22n%22%3Epasswd%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%3Cspan%20class%3D%22s2%22%3E%26quot%3Bdemo%26quot%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22n%22%3Edb%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%3Cspan%20class%3D%22s2%22%3E%26quot%3Bdemo%26quot%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%20%3Cspan%20class%3D%22n%22%3Econv%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%3Cspan%20class%3D%22n%22%3Econv%3C/span%3E%3Cspan%20class%3D%22p%22%3E%29%3C/span%3E%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3EMy%20app%20is%20simple%20REST%20webservice%20with%20some%20basic%20routes%20to%20manage%20todo%20list.%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3EGET%20%20-%20%3Cspan%20class%3D%22s2%22%3E%26quot%3B/%26quot%3B%3C/span%3E%20-%20serve%20static/index.html%20client%20code%0AGET%20%20-%20%3Cspan%20class%3D%22s2%22%3E%26quot%3B/todo%26quot%3B%3C/span%3E%20-%20retreives%20all%20todo%0AGET%20%20-%20%3Cspan%20class%3D%22s2%22%3E%26quot%3B/todo/%26lt%3Bint%3Atodo_id%26gt%3B%26quot%3B%3C/span%3E%20-%20retreives%20one%20todo%20by%20todo_id%0APOST%20-%20%3Cspan%20class%3D%22s2%22%3E%26quot%3B/todo%26quot%3B%3C/span%3E%20-%20add%20new%20todo%0APUT%20%20-%20%3Cspan%20class%3D%22s2%22%3E%26quot%3B/todo/%26lt%3Bint%3Atodo_id%26gt%3B%26quot%3B%3C/span%3E%20-%20modify%20existing%20todo%0AGET%20%20-%20%3Cspan%20class%3D%22s2%22%3E%26quot%3B/todo/%26lt%3Bint%3Atodo_id%26gt%3B/check%26quot%3B%3C/span%3E%20-%20mark%20todo%20checked%0AGET%20%20-%20%3Cspan%20class%3D%22s2%22%3E%26quot%3B/todo/%26lt%3Bint%3Atodo_id%26gt%3B/uncheck%26quot%3B%3C/span%3E%20-%20mark%20todo%20not%20checked%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3EIt%20is%20using%20json%20format%20for%20information%20exchange%20between%20backend%20and%20frontend.%3C/p%3E%0A%3Cp%3EFor%20frontend%20part%20I%20decided%20to%20not%20use%20any%20javascript%20framework%20but%20utilize%20newest%20javascript%20features%20like%20%3Ca%20href%3D%22https%3A//developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals%22%3Etemplate%20literals%3C/a%3E%20and%20%3Ca%20href%3D%22https%3A//developer.mozilla.org/en-US/docs/Web/API/Fetch_API%22%3EFetch%20API%3C/a%3E%20to%20keep%20page%20light.%3C/p%3E%0A%3Cp%3EThis%20way%20frontend%20of%20the%20application%20is%20just%204KB%20not%20mimimized%20one%20file%20named%20index.html.%3C/p%3E%0A%3Cp%3EAfter%20both%20frontend%20and%20backend%20is%20created%20it%27s%20time%20to%20create%20%3Cem%3EDockerfile%3C/em%3E%20for%20%3Cem%3Edemo_webservice%3C/em%3E.%20This%20container%20will%20be%20a%20little%20more%20complicated%20as%20I%20need%20to%20get%20some%20dependencies%20for%20database%20connection%20and%20install%20some%20python%20dependencies%20inside%20container.%20%20%3C/p%3E%0A%3Cp%3ELet%27s%20start%20with%20save%20python%20dependenices%20to%20requirements.txt%20file%20by%20typing%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3Epip%20freeze%20%26gt%3B%20../docker/demo_webservice/requirements.txt%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3EHere%20is%20dockerfile%20for%20%3Cem%3Edemo_webservice%3C/em%3E%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3E%3Cspan%20class%3D%22k%22%3EFROM%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s%22%3Epython%3A3.7.3-alpine3.8%3C/span%3E%0A%3Cspan%20class%3D%22k%22%3EMAINTAINER%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s%22%3Ecreator.of.file%40example.com%3C/span%3E%0A%3Cspan%20class%3D%22k%22%3ERUN%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3Eapk%20add%20--no-cache%20mariadb-dev%20build-base%0A%3Cspan%20class%3D%22k%22%3EADD%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3Erequirements.txt%20/%0A%3Cspan%20class%3D%22k%22%3ERUN%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3Epip%20install%20-r%20/requirements.txt%0A%3Cspan%20class%3D%22k%22%3EWORKDIR%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s%22%3E/code%3C/span%3E%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3ESo%20this%20time%20base%20for%20container%20is%20%3Ca%20href%3D%22https%3A//hub.docker.com/_/python%22%3Epython%3A3.7.3-alpine3.8%3C/a%3E.%3Cbr%20/%3E%0AThird%20line%20is%20adding%20python%20packages%20build%20dependencies%20by%20running.%20%20%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3E%3Cspan%20class%3D%22k%22%3ERUN%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3Eapk%20add%20--no-cache%20mariadb-dev%20build-base%20%20%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3EThen%20I%20copy%20my%20requirements.txt%20to%20base%20directory%20of%20container.%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3E%3Cspan%20class%3D%22k%22%3EADD%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3Erequirements.txt%20/%20%20%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3EAfter%20that%20I%20simply%20install%20those%20dependencies%20by%20running%20command.%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3E%3Cspan%20class%3D%22k%22%3ERUN%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3Epip%20install%20-r%20/requirements.txt%20%20%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3EAt%20the%20end%20%20I%20set%20directory%20that%20will%20be%20base%20directory%20whenever%20I%20run%20the%20container.%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3E%3Cspan%20class%3D%22k%22%3EWORKDIR%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s%22%3E/code%3C/span%3E%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3EI%20can%20test%20my%20build%20by%20typing%20in%20docker%20directory.%20%20%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3Edocker%20build%20-t%20demo_webservice%3Alatest%20demo_webservice/%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3ETo%20remove%20images%20from%20my%20local%20docker%20repository%20I%20can%20type%20either%20image%20%3Cem%3Ename%3Aversion%3C/em%3E%20or%20%3Cem%3EIMAGE%20ID%3C/em%3E%0ASo%20for%20now%20let%27s%20remove%20images%20and%20run%20everyting%20with%20single%20command.%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3Edocker%20rmi%20demo_db%3Alatest%20demo_webservice%3Alatest%20mariadb%3A10.4.6-bionic%20python%3A3.7.3-alpine3.8%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3ETo%20start%20all%20using%20one%20command%20I%20need%20docker%20compose.%20Docker%20compose%20can%20keep%20configuration%20of%20docker%20run%20parameters%20in%20single%20yaml%20file.%20This%20way%20I%20don%27t%20need%20to%20worry%20how%20to%20run%20every%20container%20and%20I%20can%20focus%20on%20development.%3C/p%3E%0A%3Cp%3ESo%20here%20is%20how%20my%20compose%20%3Ca%20href%3D%22https%3A//yaml.org/%22%3Eyaml%20file%3C/a%3E%20looks%20like.%20I%20will%20go%20trough%20all%20parameters%20below%20definition.%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3E%3Cspan%20class%3D%22nt%22%3Eversion%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s%22%3E%26%2339%3B2%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22nt%22%3Eservices%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3Edemo_db%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3Ebuild%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22l%20l-Scalar%20l-Scalar-Plain%22%3E./demo_db%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3Eimage%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22l%20l-Scalar%20l-Scalar-Plain%22%3Edemo_db%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3Econtainer_name%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22l%20l-Scalar%20l-Scalar-Plain%22%3Edemo_db%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3Ehostname%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22l%20l-Scalar%20l-Scalar-Plain%22%3Edemo_db%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3Erestart%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22l%20l-Scalar%20l-Scalar-Plain%22%3Ealways%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3Enetworks%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22p%20p-Indicator%22%3E-%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22l%20l-Scalar%20l-Scalar-Plain%22%3Edemo_network%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3Evolumes%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22p%20p-Indicator%22%3E-%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22l%20l-Scalar%20l-Scalar-Plain%22%3E./data/demo_db%3A/var/lib/mysql%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3Eenvironment%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3EMYSQL_ROOT_PASSWORD%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22l%20l-Scalar%20l-Scalar-Plain%22%3Edemo%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3EMYSQL_DATABASE%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22l%20l-Scalar%20l-Scalar-Plain%22%3Edemo%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3Eexpose%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22p%20p-Indicator%22%3E-%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22l%20l-Scalar%20l-Scalar-Plain%22%3E3306%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3Eports%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22p%20p-Indicator%22%3E-%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22l%20l-Scalar%20l-Scalar-Plain%22%3E3306%3A3306%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3Edemo_webservice%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3Ebuild%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22l%20l-Scalar%20l-Scalar-Plain%22%3E./demo_webservice%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3Eimage%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22l%20l-Scalar%20l-Scalar-Plain%22%3Edemo_webservice%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3Econtainer_name%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22l%20l-Scalar%20l-Scalar-Plain%22%3Edemo_webservice%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3Ehostname%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22l%20l-Scalar%20l-Scalar-Plain%22%3Edemo_webservice%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3Erestart%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22l%20l-Scalar%20l-Scalar-Plain%22%3Ealways%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3Enetworks%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22p%20p-Indicator%22%3E-%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22l%20l-Scalar%20l-Scalar-Plain%22%3Edemo_network%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3Edepends_on%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22p%20p-Indicator%22%3E-%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22l%20l-Scalar%20l-Scalar-Plain%22%3Edemo_db%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3Evolumes%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22p%20p-Indicator%22%3E-%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22l%20l-Scalar%20l-Scalar-Plain%22%3E../demo_webservice%3A/code%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3Eexpose%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22p%20p-Indicator%22%3E-%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22l%20l-Scalar%20l-Scalar-Plain%22%3E5000%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3Eports%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22p%20p-Indicator%22%3E-%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22l%20l-Scalar%20l-Scalar-Plain%22%3E5000%3A5000%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3Ecommand%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22p%20p-Indicator%22%3E%5B%3C/span%3E%3Cspan%20class%3D%22s%22%3E%26%2339%3Bpython%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%20p-Indicator%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s%22%3E%26%2339%3Bmain.py%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%20p-Indicator%22%3E%5D%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22nt%22%3Enetworks%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3Edemo_network%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3EStarting%20from%20the%20top.%20First%20line%20is%20docker-compose%20file%20version.%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3E%3Cspan%20class%3D%22nt%22%3Eversion%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s%22%3E%26%2339%3B2%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3EThen%20I%20defined%20containers%20as%20services%20and%20in%20this%20demo%20there%20are%20only%202%20services.%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3E%3Cspan%20class%3D%22nt%22%3Eservices%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3Edemo_db%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3Edemo_webservice%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3ENext%20inside%20service%20there%20are%20definitions%20for%20docker-compose.%20First%20is%20what%20directory%20docker%20compose%20should%20use%20to%20build%20container%20image%20then%20information%20what%20image%20it%20should%20use%2C%20how%20to%20name%20a%20container%20and%20how%20container%20should%20be%20visible%20inside%20internal%20network.%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3E%3Cspan%20class%3D%22nt%22%3Edemo_db%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3Ebuild%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22l%20l-Scalar%20l-Scalar-Plain%22%3E./demo_db%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22c1%22%3E%23%20directory%20from%20where%20build%20container%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3Eimage%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22l%20l-Scalar%20l-Scalar-Plain%22%3Edemo_db%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22c1%22%3E%23%20image%20in%20docker%20images%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3Econtainer_name%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22l%20l-Scalar%20l-Scalar-Plain%22%3Edemo_db%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22c1%22%3E%23%20name%20of%20the%20container%20so%20we%20can%20ex.%20docker%20restart%20demo_db%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3Ehostname%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22l%20l-Scalar%20l-Scalar-Plain%22%3Edemo_db%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22c1%22%3E%23%20hostname%20so%20from%20demo_webservice%20we%20can%20ping%20demo_db%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3EAfter%20that%20there%20is%20information%20%3Ca%20href%3D%22https%3A//docs.docker.com/config/containers/start-containers-automatically/%22%3Ewhat%20to%20do%20when%20container%20crash%3C/a%3E%2C%20%3Ca%20href%3D%22https%3A//docs.docker.com/engine/reference/run/%23network-settings%22%3Edefinition%20of%20container%20network%3C/a%3E%2C%20what%20are%20dependencies%20of%20this%20container%20%28we%20can%20define%20multiple%20dependencies%20so%20theoretically%20container%20won%27t%20start%20until%20dependencies%20start%29%2C%20%3Ca%20href%3D%22https%3A//docs.docker.com/engine/reference/commandline/run/%23mount-volume--v---read-only%22%3Edefinition%20of%20mapped%20directories%3C/a%3E%2C%20%3Ca%20href%3D%22https%3A//docs.docker.com/engine/reference/commandline/run/%23publish-or-expose-port--p---expose%22%3Eport%20exposed%20inside%20container%20netwrok%3C/a%3E%2C%20ports%20exposed%20from%20container%20to%20external%20network%20%28my%20local%20machine%29%2C%20command%20that%20will%20be%20starting%20container%20and%20also%20%3Ca%20href%3D%22https%3A//docs.docker.com/engine/reference/commandline/run/%23set-environment-variables--e---env---env-file%22%3Eenvironment%20variables%3C/a%3E%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3E%3Cspan%20class%3D%22nt%22%3Edemo_webservice%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3Erestart%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22l%20l-Scalar%20l-Scalar-Plain%22%3Ealways%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22c1%22%3E%23%20what%20to%20do%20when%20container%20crash%20--restart%20always%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3Enetworks%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22p%20p-Indicator%22%3E-%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22l%20l-Scalar%20l-Scalar-Plain%22%3Edemo_network%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22c1%22%3E%23%20name%20of%20the%20netwrok%20--network%20docker_demo_network%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3Edepends_on%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22p%20p-Indicator%22%3E-%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22l%20l-Scalar%20l-Scalar-Plain%22%3Edemo_db%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22c1%22%3E%23%20do%20not%20start%20untill%20demo_db%20start%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3Evolumes%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22p%20p-Indicator%22%3E-%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22l%20l-Scalar%20l-Scalar-Plain%22%3E../demo_webservice%3A/code%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22c1%22%3E%23%20relative%20path%20to%20local%20diectory%20with%20application%20-v%20../demo_webservice%3A/code%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3Eexpose%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22p%20p-Indicator%22%3E-%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22l%20l-Scalar%20l-Scalar-Plain%22%3E5000%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22c1%22%3E%23%20expose%20port%20inside%20container%20network%20--expose%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3Eports%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22p%20p-Indicator%22%3E-%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22l%20l-Scalar%20l-Scalar-Plain%22%3E5000%3A5000%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22c1%22%3E%23%20-p%20local_port%3Acontainer%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3Ecommand%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22p%20p-Indicator%22%3E%5B%3C/span%3E%3Cspan%20class%3D%22s%22%3E%26%2339%3Bpython%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%20p-Indicator%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s%22%3E%26%2339%3Bmain.py%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%20p-Indicator%22%3E%5D%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22c1%22%3E%23%20docker%20run%20container_name%20command%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22nt%22%3Edemo_db%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3Eenvironment%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3EMYSQL_ROOT_PASSWORD%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22l%20l-Scalar%20l-Scalar-Plain%22%3Edemo%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22c1%22%3E%23%20-e%20MYSQL_ROOT_PASSWORD%3Ddemo%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3EMYSQL_DATABASE%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22l%20l-Scalar%20l-Scalar-Plain%22%3Edemo%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3EFinally%20there%20is%20simple%20network%20definition%20%3Cem%3Edemo_network%3C/em%3E%20so%20only%20containers%20inside%20this%20network%20can%20communicate%20with%20each%20other.%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3E%3Cspan%20class%3D%22nt%22%3Enetworks%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3Edemo_network%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3EOk%20so%20to%20start%20application%20I%20need%20to%20go%20to%20docker%20directory%20and%20type%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3Edocker-compose%20up%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3E%3Cimg%20src%3D%22/assets/images/2019/06/26/docker-compose.gif%22%20alt%3D%22Docker%20compose%20results%22%20/%3E%3C/p%3E%0A%3Cp%3EIt%20takes%20a%20little%20time%20for%20database%20to%20initialise%20for%20the%20first%20time%20so%20there%20will%20be%20some%20errors%20visible%20from%20python%20application%20as%20it%20can%27t%20connect%20to%20database%20right%20away%20but%20at%20the%20end%20everyting%20will%20work.%20%20%3C/p%3E%0A%3Cp%3ETo%20start%20compose%20without%20blocking%20terminal%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3Edocker-compose%20up%20-d%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3EAfter%20all%20of%20this%20struggles%20I%20can%20navigate%20to%20%3Cem%3Elocalhost%3A5000%3C/em%3E%20on%20mac%20or%20if%20I%20use%20windows%20/%20linux%20probably%20to%20ip%20defined%20by%20following%20command%20and%20see%20web%20application.%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3Edocker_machine%20ip%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3EBecause%20application%20runs%20in%20debug%20mode%20and%20container%20have%20parameter%20restart%20always%20I%20can%20modify%20main.py%20and%20see%20results%20inside%20browser%20or%20inside%20container%20imidiatelly%20without%20bothering%20to%20run%20my%20code%20if%20I%20made%20some%20changes.%0A%3Cimg%20src%3D%22/assets/images/2019/06/26/Recording-2019-06-27-10.02.11.gif%22%20alt%3D%22Todo%20application%20results%22%20/%3E%3C/p%3E%0A%3Cp%3EAs%20you%20could%20see%20first%20start%20will%20create%20%3Cem%3Edocker/data%3C/em%3E%20directory%20where%20maria%20db%20will%20store%20all%20of%20database%20data.%20When%20I%20stop%20environment%20I%20can%20zip%20this%20directory%20and%20save%20it%20if%20I%20want%20snapshot%20of%20my%20database.%3C/p%3E%0A%3Cp%3ESome%20more%20usefull%20commands%20for%20compose%20are%20remove%20all%20containers%20and%20it%27s%20data%20and%20compose%20network%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3Edocker-compose%20down%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3ERebuild%20of%20environment%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3Edocker-compose%20build%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3EThat%27s%20all%20for%20this%20post.%3C/p%3E%0A%3Cp%3EAs%20always%20all%20code%20is%20available%20%3Ca%20href%3D%22https%3A//github.com/vane/blog-code/tree/master/docker-flask-mariadb-todo-list-from-scratch%22%3Eon%20github%3C/a%3E%3C/p%3E
Michal Szczepanski
['', '', '', '', '', '', '', '', '']
Developers sometimes work with complicated environments. Most likely setup of this environment takes lot's of time and it's painfull. There is solution for that called docker. The simplest thing you can do is just install Docker and then using one command invoke some action on it, for example list files inside directory and remove container right away.Migrate from ghost to jekyll2019-06-25T20:15:14+02:002019-06-25T20:15:14+02:00https://vane.pl/migrate-from-ghost-to-jekyll
%3Cp%3EI%20haven%27t%20blogged%20regulary%20ever%20in%20my%20life%20so%20I%20decided%20now%20it%27s%20time%20for%20change%20and%20blog%20frequently%20about%20technology.%20This%20blog%20was%20using%20%3Ca%20href%3D%22https%3A//ghost.org/%22%3Eghost%20cms%3C/a%3E%20deployed%20on%20docker%20to%20do%20it%20and%20I%20decided%20it%20would%20be%20nicer%20to%20have%20static%20pages%20that%20I%20can%20commit%20using%20git%20and%20deploy%20directly%20to%20webserver%20without%20any%20middleware.%3C/p%3E%0A%3Cp%3EAt%20first%20I%20thought%20it%20would%20be%20fun%20to%20build%20such%20thing%20from%20scratch%20but%20then%20I%20remember%20how%20complicated%20life%20become%20in%20terms%20of%20making%20blog.%20For%20complete%20working%20solution%20you%20need%20to%20add%20%3Ca%20href%3D%22https%3A//validator.w3.org/feed/docs/rss2.html%22%3Erss%3C/a%3E%20/%20%3Ca%20href%3D%22https%3A//en.wikipedia.org/wiki/Search_engine_optimization%22%3Eseo%3C/a%3E%20/%20%3Ca%20href%3D%22http%3A//ogp.me/%22%3Esocial%20media%20metadata%3C/a%3E%20/%20%3Ca%20href%3D%22https%3A//www.sitemaps.org/%22%3Esite%20map%3C/a%3E%20to%20name%20a%20few.%20And%20most%20painfull%2C%20you%20need%20to%20maintain%20it.%3C/p%3E%0A%3Cp%3EI%20got%20myself%20reminded%20about%20a%20great%20tool%20for%20generating%20web%20pages%20from%20markdown%20%3Ca%20href%3D%22https%3A//jekyllrb.com/%22%3Ejekyll%3C/a%3E%2C%20after%20quick%20reading%20about%20features%20it%20turned%20out%20it%20have%20all%20of%20above%20and%20more%20so%20I%20decided%20to%20go%20for%20it.%3C/p%3E%0A%3Ch1%3EAt%20first%20I%20needed%20to%20install%20%3Ca%20href%3D%22https%3A//gorails.com/setup/osx/10.14-mojave%22%3Eruby%20on%20OSX%20Mojave%3C/a%3E%3C/h1%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3Ebrew%20install%20rbenv%20ruby-build%0A%3Cspan%20class%3D%22nb%22%3Eecho%3C/span%3E%20%3Cspan%20class%3D%22s1%22%3E%26%2339%3Bif%20which%20rbenv%20%26gt%3B%20/dev/null%3B%20then%20eval%20%26quot%3B%24%28rbenv%20init%20-%29%26quot%3B%3B%20fi%26%2339%3B%3C/span%3E%20%26gt%3B%26gt%3B%20~/.bash_profile%0A%3Cspan%20class%3D%22nb%22%3Esource%3C/span%3E%20~/.bash_profile%0A%0A%3Cspan%20class%3D%22c1%22%3E%23%20Install%20Ruby%3C/span%3E%0A%0Arbenv%20install%20%3Cspan%20class%3D%22m%22%3E2%3C/span%3E.6.3%0Arbenv%20global%20%3Cspan%20class%3D%22m%22%3E2%3C/span%3E.6.3%0Aruby%20-v%0Aruby%20%3Cspan%20class%3D%22m%22%3E2%3C/span%3E.6.3p62%20%3Cspan%20class%3D%22o%22%3E%28%3C/span%3E%3Cspan%20class%3D%22m%22%3E2019%3C/span%3E-04-16%20revision%20%3Cspan%20class%3D%22m%22%3E67580%3C/span%3E%3Cspan%20class%3D%22o%22%3E%29%3C/span%3E%20%3Cspan%20class%3D%22o%22%3E%5B%3C/span%3Ex86_64-darwin18%3Cspan%20class%3D%22o%22%3E%5D%3C/span%3E%0A%3C/pre%3E%3C/div%3E%0A%0A%3Ch1%3EThen%20I%20can%20proceed%20with%20jekyll%20and%20migration%20of%20ghost%20blog%3C/h1%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3Egem%20install%20bundler%20jekyll%0Ajekyll%20new%20vane.pl%0A%3Cspan%20class%3D%22nb%22%3Ecd%3C/span%3E%20vane.pl%0A%0A%3Cspan%20class%3D%22c1%22%3E%23migrate%3C/span%3E%0Agem%20install%20jekyll-import%0Aruby%20-r%20rubygems%20-e%20%3Cspan%20class%3D%22s1%22%3E%26%2339%3Brequire%20%26quot%3Bjekyll-import%26quot%3B%3B%3C/span%3E%0A%3Cspan%20class%3D%22s1%22%3E%20%20%20%20JekyllImport%3A%3AImporters%3A%3AGhost.run%28%7B%3C/span%3E%0A%3Cspan%20class%3D%22s1%22%3E%20%20%20%20%20%20%26quot%3Bdbfile%26quot%3B%20%20%20%3D%26gt%3B%20%26quot%3Bghost.db%26quot%3B%3C/span%3E%0A%3Cspan%20class%3D%22s1%22%3E%20%20%20%20%7D%29%26%2339%3B%3C/span%3E%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3EAfter%20migration%20two%20directories%20will%20appear%20%3Cem%3E_drafts%3C/em%3E%20and%20%3Cem%3E_posts%3C/em%3E%20and%20all%20pages%20will%20be%20in%20main%20directory.%3Cbr%20/%3E%0AUnfortunately%20dates%20were%20not%20migrated%20properly%20so%20my%20posts%20directory%20looked%20something%20like%20that%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3E%3Cspan%20class%3D%22m%22%3E15%3C/span%3E%3A54%20%3Cspan%20class%3D%22m%22%3E1970%3C/span%3E-01-18-why-serverless-is-a-next-big-deal.markdown%0A%3Cspan%20class%3D%22m%22%3E15%3C/span%3E%3A54%20%3Cspan%20class%3D%22m%22%3E1970%3C/span%3E-01-19-understand-how-to-theme-material-ui.markdown%0A%3Cspan%20class%3D%22m%22%3E15%3C/span%3E%3A54%20%3Cspan%20class%3D%22m%22%3E1970%3C/span%3E-01-19-world-of-machines.markdown%0A%3Cspan%20class%3D%22m%22%3E15%3C/span%3E%3A51%20%3Cspan%20class%3D%22m%22%3E2019%3C/span%3E-06-25-welcome-to-jekyll.markdown%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3ESo%20I%20needed%20to%20migrate%20those%20dates%20manually%20and%20also%20change%20date%20inside%20those%20files.%0AI%20also%20wanted%20to%20get%20tags%20because%20those%20were%20also%20not%20migrated%20so%20I%20created%20custom%20sql%20script%20that%20gets%20all%20the%20tags%2C%20slug%2C%20title%20and%20formatted%20date%20so%20I%20can%20migrate%20those%20posts.%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3E%3Cspan%20class%3D%22k%22%3Eselect%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%3C/span%3E%3Cspan%20class%3D%22n%22%3Ep%3C/span%3E%3Cspan%20class%3D%22p%22%3E.%3C/span%3E%3Cspan%20class%3D%22n%22%3Eid%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22n%22%3Ep%3C/span%3E%3Cspan%20class%3D%22p%22%3E.%3C/span%3E%3Cspan%20class%3D%22n%22%3Etitle%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22n%22%3Ep%3C/span%3E%3Cspan%20class%3D%22p%22%3E.%3C/span%3E%3Cspan%20class%3D%22n%22%3Eslug%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22n%22%3Egroup_concat%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22n%22%3Et%3C/span%3E%3Cspan%20class%3D%22p%22%3E.%3C/span%3E%3Cspan%20class%3D%22n%22%3Ename%3C/span%3E%3Cspan%20class%3D%22p%22%3E%29%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22n%22%3Estrftime%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3B%25Y-%25m-%25d%20%25H%3A%25M%3A%25S%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22n%22%3Edatetime%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22n%22%3Ep%3C/span%3E%3Cspan%20class%3D%22p%22%3E.%3C/span%3E%3Cspan%20class%3D%22n%22%3Epublished_at%3C/span%3E%3Cspan%20class%3D%22p%22%3E%29%29%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22k%22%3Eas%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22n%22%3Epublished%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22k%22%3Efrom%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22n%22%3Eposts%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22k%22%3Eas%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22n%22%3Ep%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22k%22%3Einner%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22k%22%3Ejoin%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22n%22%3Eposts_tags%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22k%22%3Eas%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22n%22%3Ept%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22k%22%3Eon%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22n%22%3Ept%3C/span%3E%3Cspan%20class%3D%22p%22%3E.%3C/span%3E%3Cspan%20class%3D%22n%22%3Epost_id%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22n%22%3Ep%3C/span%3E%3Cspan%20class%3D%22p%22%3E.%3C/span%3E%3Cspan%20class%3D%22n%22%3Eid%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22k%22%3Einner%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22k%22%3Ejoin%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22n%22%3Etags%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22k%22%3Eas%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22n%22%3Et%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22k%22%3Eon%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22n%22%3Et%3C/span%3E%3Cspan%20class%3D%22p%22%3E.%3C/span%3E%3Cspan%20class%3D%22n%22%3Eid%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22n%22%3Ept%3C/span%3E%3Cspan%20class%3D%22p%22%3E.%3C/span%3E%3Cspan%20class%3D%22n%22%3Etag_id%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22k%22%3Egroup%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22k%22%3Eby%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22n%22%3Ep%3C/span%3E%3Cspan%20class%3D%22p%22%3E.%3C/span%3E%3Cspan%20class%3D%22n%22%3Eid%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22k%22%3Eorder%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22k%22%3Eby%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22n%22%3Ep%3C/span%3E%3Cspan%20class%3D%22p%22%3E.%3C/span%3E%3Cspan%20class%3D%22n%22%3Epublished_at%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22k%22%3Edesc%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3EI%20exported%20results%20as%20csv%20file%20and%20I%20could%20build%20a%20script%20that%20will%20merge%20csv%20file%20with%20those%20files%20created%20by%20jekyll%20migration%20script.%3C/p%3E%0A%3Cp%3EAfter%20hour%20later%20it%20was%20done%20using%20this%20a%20little%20ugly%20python%20script%20that%20is%20looking%20for%20file%20matching%20slug%20in%20%3Cem%3E_posts%3C/em%3E%20directory%20and%20replacing%20it%27s%20date%20with%20correct%20one%20adding%20tags%20and%20finally%20saving%20it%20as%20file%20with%20proper%20date%20in%20front.%20%3Ca%20href%3D%22https%3A//github.com/vane/blog-code/blob/master/migrate-from-ghost-to-jekyll/migrate_script.py%22%3EYou%20can%20download%20it%20from%20this%20location%3C/a%3E%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3E%3Cspan%20class%3D%22ch%22%3E%23%21/usr/bin/env%20python%3C/span%3E%0A%3Cspan%20class%3D%22c1%22%3E%23%20-%2A-%20coding%3A%20utf-8%20-%2A-%3C/span%3E%0A%3Cspan%20class%3D%22kn%22%3Eimport%3C/span%3E%20%3Cspan%20class%3D%22nn%22%3Ecsv%3C/span%3E%0A%3Cspan%20class%3D%22kn%22%3Eimport%3C/span%3E%20%3Cspan%20class%3D%22nn%22%3Eos%3C/span%3E%0A%0A%0A%3Cspan%20class%3D%22k%22%3Eclass%3C/span%3E%20%3Cspan%20class%3D%22nc%22%3EConstraints%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%0A%20%20%3Cspan%20class%3D%22n%22%3ECSV_FILE%3C/span%3E%20%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%20%3Cspan%20class%3D%22s1%22%3E%26%2339%3Bblog_tags.csv%26%2339%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22n%22%3EPOSTS_DIR%3C/span%3E%20%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%20%3Cspan%20class%3D%22s1%22%3E%26%2339%3B_posts%26%2339%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22n%22%3ETIMEZONE%3C/span%3E%20%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%20%3Cspan%20class%3D%22s1%22%3E%26%2339%3B%2B02%3A00%26%2339%3B%3C/span%3E%0A%0A%0A%3Cspan%20class%3D%22k%22%3Edef%3C/span%3E%20%3Cspan%20class%3D%22nf%22%3Ewrite_post%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22n%22%3Edate%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%20%3Cspan%20class%3D%22n%22%3Etags%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%20%3Cspan%20class%3D%22n%22%3Edate2%3C/span%3E%3Cspan%20class%3D%22p%22%3E%29%3A%3C/span%3E%0A%20%20%3Cspan%20class%3D%22k%22%3Ewith%3C/span%3E%20%3Cspan%20class%3D%22nb%22%3Eopen%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22si%22%3E%7B%7D%3C/span%3E%3Cspan%20class%3D%22s1%22%3E/%3C/span%3E%3Cspan%20class%3D%22si%22%3E%7B%7D%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22o%22%3E.%3C/span%3E%3Cspan%20class%3D%22n%22%3Eformat%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22n%22%3EConstraints%3C/span%3E%3Cspan%20class%3D%22o%22%3E.%3C/span%3E%3Cspan%20class%3D%22n%22%3EPOSTS_DIR%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%20%3Cspan%20class%3D%22n%22%3Ep%3C/span%3E%3Cspan%20class%3D%22p%22%3E%29%29%3C/span%3E%20%3Cspan%20class%3D%22k%22%3Eas%3C/span%3E%20%3Cspan%20class%3D%22n%22%3Epost%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22n%22%3Epost_array%3C/span%3E%20%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%20%3Cspan%20class%3D%22n%22%3Epost%3C/span%3E%3Cspan%20class%3D%22o%22%3E.%3C/span%3E%3Cspan%20class%3D%22n%22%3Ereadlines%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%29%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22n%22%3Enew_date%3C/span%3E%20%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%20%3Cspan%20class%3D%22s1%22%3E%26%2339%3Bdate%3A%20%3C/span%3E%3Cspan%20class%3D%22si%22%3E%7B%7D%3C/span%3E%3Cspan%20class%3D%22s1%22%3E.000000000%20%3C/span%3E%3Cspan%20class%3D%22si%22%3E%7B%7D%3C/span%3E%3Cspan%20class%3D%22se%22%3E%5Cn%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22o%22%3E.%3C/span%3E%3Cspan%20class%3D%22n%22%3Eformat%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22n%22%3Edate%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%20%3Cspan%20class%3D%22n%22%3EConstraints%3C/span%3E%3Cspan%20class%3D%22o%22%3E.%3C/span%3E%3Cspan%20class%3D%22n%22%3ETIMEZONE%3C/span%3E%3Cspan%20class%3D%22p%22%3E%29%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22k%22%3Efor%3C/span%3E%20%3Cspan%20class%3D%22n%22%3Ei%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%20%3Cspan%20class%3D%22n%22%3Eline%3C/span%3E%20%3Cspan%20class%3D%22ow%22%3Ein%3C/span%3E%20%3Cspan%20class%3D%22nb%22%3Eenumerate%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22n%22%3Epost_array%3C/span%3E%3Cspan%20class%3D%22p%22%3E%5B%3A%5D%29%3A%3C/span%3E%0A%20%20%20%20%20%20%3Cspan%20class%3D%22k%22%3Eif%3C/span%3E%20%3Cspan%20class%3D%22n%22%3Eline%3C/span%3E%3Cspan%20class%3D%22o%22%3E.%3C/span%3E%3Cspan%20class%3D%22n%22%3Estartswith%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3Bdate%3A%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%29%3A%3C/span%3E%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22n%22%3Epost_array%3C/span%3E%3Cspan%20class%3D%22p%22%3E%5B%3C/span%3E%3Cspan%20class%3D%22n%22%3Ei%3C/span%3E%3Cspan%20class%3D%22p%22%3E%5D%3C/span%3E%20%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%20%3Cspan%20class%3D%22n%22%3Enew_date%3C/span%3E%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22n%22%3Epost_array%3C/span%3E%3Cspan%20class%3D%22o%22%3E.%3C/span%3E%3Cspan%20class%3D%22n%22%3Einsert%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22n%22%3Ei%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%20%3Cspan%20class%3D%22s1%22%3E%26%2339%3Btags%20%3A%20%3C/span%3E%3Cspan%20class%3D%22si%22%3E%7B%7D%3C/span%3E%3Cspan%20class%3D%22se%22%3E%5Cn%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22o%22%3E.%3C/span%3E%3Cspan%20class%3D%22n%22%3Eformat%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22n%22%3Etags%3C/span%3E%3Cspan%20class%3D%22p%22%3E%29%29%3C/span%3E%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22k%22%3Ebreak%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22c1%22%3E%23%20write%20new%20file%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22n%22%3Enew_fname%3C/span%3E%20%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%20%3Cspan%20class%3D%22s1%22%3E%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22si%22%3E%7B%7D%3C/span%3E%3Cspan%20class%3D%22s1%22%3E/%3C/span%3E%3Cspan%20class%3D%22si%22%3E%7B%7D%3C/span%3E%3Cspan%20class%3D%22s1%22%3E-%3C/span%3E%3Cspan%20class%3D%22si%22%3E%7B%7D%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22o%22%3E.%3C/span%3E%3Cspan%20class%3D%22n%22%3Eformat%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22n%22%3EConstraints%3C/span%3E%3Cspan%20class%3D%22o%22%3E.%3C/span%3E%3Cspan%20class%3D%22n%22%3EPOSTS_DIR%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%20%3Cspan%20class%3D%22n%22%3Edate2%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%20%3Cspan%20class%3D%22n%22%3Ep%3C/span%3E%3Cspan%20class%3D%22p%22%3E%5B%3C/span%3E%3Cspan%20class%3D%22n%22%3Eidx%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%5D%29%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22k%22%3Ewith%3C/span%3E%20%3Cspan%20class%3D%22nb%22%3Eopen%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22n%22%3Enew_fname%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%20%3Cspan%20class%3D%22s1%22%3E%26%2339%3Bw%2B%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%29%3C/span%3E%20%3Cspan%20class%3D%22k%22%3Eas%3C/span%3E%20%3Cspan%20class%3D%22n%22%3Enewpost%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%0A%20%20%20%20%20%20%3Cspan%20class%3D%22n%22%3Enewpost%3C/span%3E%3Cspan%20class%3D%22o%22%3E.%3C/span%3E%3Cspan%20class%3D%22n%22%3Ewritelines%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22n%22%3Epost_array%3C/span%3E%3Cspan%20class%3D%22p%22%3E%29%3C/span%3E%0A%0A%0A%3Cspan%20class%3D%22k%22%3Eif%3C/span%3E%20%3Cspan%20class%3D%22vm%22%3E__name__%3C/span%3E%20%3Cspan%20class%3D%22o%22%3E%3D%3D%3C/span%3E%20%3Cspan%20class%3D%22s1%22%3E%26%2339%3B__main__%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%0A%20%20%3Cspan%20class%3D%22n%22%3Eposts%3C/span%3E%20%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%20%3Cspan%20class%3D%22n%22%3Eos%3C/span%3E%3Cspan%20class%3D%22o%22%3E.%3C/span%3E%3Cspan%20class%3D%22n%22%3Elistdir%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3B_posts%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%29%3C/span%3E%0A%20%20%3Cspan%20class%3D%22k%22%3Ewith%3C/span%3E%20%3Cspan%20class%3D%22nb%22%3Eopen%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22n%22%3EConstraints%3C/span%3E%3Cspan%20class%3D%22o%22%3E.%3C/span%3E%3Cspan%20class%3D%22n%22%3ECSV_FILE%3C/span%3E%3Cspan%20class%3D%22p%22%3E%29%3C/span%3E%20%3Cspan%20class%3D%22k%22%3Eas%3C/span%3E%20%3Cspan%20class%3D%22n%22%3Ef%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22n%22%3Edata%3C/span%3E%20%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%20%3Cspan%20class%3D%22n%22%3Ecsv%3C/span%3E%3Cspan%20class%3D%22o%22%3E.%3C/span%3E%3Cspan%20class%3D%22n%22%3EDictReader%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22n%22%3Ef%3C/span%3E%3Cspan%20class%3D%22p%22%3E%29%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22k%22%3Efor%3C/span%3E%20%3Cspan%20class%3D%22n%22%3Ep%3C/span%3E%20%3Cspan%20class%3D%22ow%22%3Ein%3C/span%3E%20%3Cspan%20class%3D%22n%22%3Eposts%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%0A%20%20%20%20%20%20%3Cspan%20class%3D%22n%22%3Ef%3C/span%3E%3Cspan%20class%3D%22o%22%3E.%3C/span%3E%3Cspan%20class%3D%22n%22%3Eseek%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22mi%22%3E0%3C/span%3E%3Cspan%20class%3D%22p%22%3E%29%3C/span%3E%0A%20%20%20%20%20%20%3Cspan%20class%3D%22k%22%3Efor%3C/span%3E%20%3Cspan%20class%3D%22n%22%3Erow%3C/span%3E%20%3Cspan%20class%3D%22ow%22%3Ein%3C/span%3E%20%3Cspan%20class%3D%22n%22%3Edata%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22n%22%3Eidx%3C/span%3E%20%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%20%3Cspan%20class%3D%22n%22%3Ep%3C/span%3E%3Cspan%20class%3D%22o%22%3E.%3C/span%3E%3Cspan%20class%3D%22n%22%3Efind%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22n%22%3Erow%3C/span%3E%3Cspan%20class%3D%22o%22%3E.%3C/span%3E%3Cspan%20class%3D%22n%22%3Eget%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3Bslug%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%29%29%3C/span%3E%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22c1%22%3E%23%20we%20found%20file%20named%20as%20slug%20so%20we%20can%20process%20it%3C/span%3E%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22k%22%3Eif%3C/span%3E%20%3Cspan%20class%3D%22n%22%3Eidx%3C/span%3E%20%3Cspan%20class%3D%22o%22%3E%26gt%3B%3C/span%3E%20%3Cspan%20class%3D%22mi%22%3E0%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22n%22%3Edate%3C/span%3E%20%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%20%3Cspan%20class%3D%22n%22%3Erow%3C/span%3E%3Cspan%20class%3D%22o%22%3E.%3C/span%3E%3Cspan%20class%3D%22n%22%3Eget%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3Bpublished%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%29%3C/span%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22n%22%3Etags%3C/span%3E%20%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%20%3Cspan%20class%3D%22n%22%3Erow%3C/span%3E%3Cspan%20class%3D%22o%22%3E.%3C/span%3E%3Cspan%20class%3D%22n%22%3Eget%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3Btag_names%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%29%3C/span%3E%3Cspan%20class%3D%22o%22%3E.%3C/span%3E%3Cspan%20class%3D%22n%22%3Esplit%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3B%2C%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%29%3C/span%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22n%22%3Edate2%3C/span%3E%20%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%20%3Cspan%20class%3D%22n%22%3Edate%3C/span%3E%3Cspan%20class%3D%22o%22%3E.%3C/span%3E%3Cspan%20class%3D%22n%22%3Esplit%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3B%20%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%29%5B%3C/span%3E%3Cspan%20class%3D%22mi%22%3E0%3C/span%3E%3Cspan%20class%3D%22p%22%3E%5D%3C/span%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22c1%22%3E%23%20read%2C%20replace%20and%20write%20post%20file%3C/span%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22n%22%3Ewrite_post%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22n%22%3Edate%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%20%3Cspan%20class%3D%22n%22%3Etags%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%20%3Cspan%20class%3D%22n%22%3Edate2%3C/span%3E%3Cspan%20class%3D%22p%22%3E%29%3C/span%3E%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3EAfter%20I%20removed%20old%20posts%20and%20run%20jekyll%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3Erm%20-rf%20_posts/1970-01-1%2A%0Abundle%20%3Cspan%20class%3D%22nb%22%3Eexec%3C/span%3E%20jekyll%20serve%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3EI%20was%20able%20to%20see%20results%20under%20%3Ca%20href%3D%22http%3A//127.0.0.1%3A4000%22%3Ehttp%3A//127.0.0.1%3A4000%3C/a%3E%3C/p%3E%0A%3Cp%3EI%20wanted%20to%20see%20my%20blog%20posts%20without%20/date/slug%20format%20so%20I%20modified%20%3Cem%3E_config.yml%3C/em%3E%20by%20adding%20this%20line%3A%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3E%3Cspan%20class%3D%22nt%22%3Epermalink%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22l%20l-Scalar%20l-Scalar-Plain%22%3E%3Atitle/%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3EAlso%20I%20needed%20to%20copy%20assets%20from%20ghost%20to%20assets%20directory%20inside%20jekyll%20project.%3C/p%3E%0A%3Cp%3ELater%20I%20also%20added%20lines%20to%20comprese%20%3Cem%3Esass%3C/em%3E%20files%2C%20seo%20plugin%20and%20syntax%20highlighting.%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3E%3Cspan%20class%3D%22nt%22%3Ehighlighter%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22l%20l-Scalar%20l-Scalar-Plain%22%3Erouge%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22nt%22%3Esass%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3Estyle%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22l%20l-Scalar%20l-Scalar-Plain%22%3Ecompressed%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22nt%22%3Eplugins%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%3C/span%3E%3Cspan%20class%3D%22p%20p-Indicator%22%3E-%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22l%20l-Scalar%20l-Scalar-Plain%22%3Ejekyll-feed%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%3C/span%3E%3Cspan%20class%3D%22p%20p-Indicator%22%3E-%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22l%20l-Scalar%20l-Scalar-Plain%22%3Ejekyll-sitemap%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%3C/span%3E%3Cspan%20class%3D%22p%20p-Indicator%22%3E-%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22l%20l-Scalar%20l-Scalar-Plain%22%3Ejekyll-seo-tag%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3EThere%20is%20a%20great%20%3Ca%20href%3D%22https%3A//mycyberuniverse.com/syntax-highlighting-jekyll.html%22%3Epost%20from%20Arthur%20Gareginyan%20about%20syntax%20highlighting%20configuration%3C/a%3E.%20Basically%20you%20need%20the%20%3Ca%20href%3D%22http%3A//richleland.github.io/pygments-css/%22%3Ecss%20file%20with%20highlighting%20style%3C/a%3E%20and%20knowledge%20how%20to%20color%20things.%3C/p%3E%0A%3Cp%3EIt%20was%20easy%20so%20I%20decided%20to%20make%20my%20own%20skin.%20I%20wanted%20to%20make%20it%20dark%20so%20%3Ca%20href%3D%22https%3A//jekyllrb.com/docs/step-by-step/01-setup/%22%3EI%20started%20reading%20documentation%3C/a%3E%2C%20study%20%3Ca%20href%3D%22https%3A//github.com/jekyll/jekyll/tree/master/lib/blank_template%22%3Eblank_template%3C/a%3E%20from%20repository%20and%20%3Ca%20href%3D%22https%3A//github.com/jekyll/minima%22%3Edefault%20theme%3C/a%3E.%3C/p%3E%0A%3Cp%3ESo%20here%20is%20my%20basic%20description%20how%20it%20works.%3C/p%3E%0A%3Cp%3EFirst%20we%20create%20%3Cem%3Eassets/css/main.scss%3C/em%3E%20directory%20with%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3E%3Cspan%20class%3D%22p%22%3E%40%3C/span%3E%3Cspan%20class%3D%22k%22%3Eimport%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s2%22%3E%26quot%3Bmain%26quot%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3Eand%20_sass%20directory%20with%20main.scss%20file%20where%20we%20include%20our%20css%20with%20syntax%2C%20mine%20is%20%3Cem%3Enative%3C/em%3E.%0AAlso%20we%20add%20all%20style%20configuration.%20I%20used%20%3Ca%20href%3D%22http%3A//bettermotherfuckingwebsite.com/%22%3EBetter%20motherfucking%20website%3C/a%3E%20as%20a%20base%20to%20keep%20my%20page%20smooth.%3C/p%3E%0A%3Cp%3EThen%20you%20need%20to%20create%20%3Cem%3E_layouts%3C/em%3E%20directory%20and%20put%20files%20in%20there.%0AFile%20names%20are%20corresponding%20to%20names%20in%20markdown%20files%20with%20variable%20layout%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3E%3Cspan%20class%3D%22nt%22%3E---%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22nt%22%3Elayout%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22nt%22%3Epost%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22nt%22%3E---%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3EThe%20default%20template%20name%20is%20located%20in%20main%20project%20directory%20in%20file%20index.md%20mine%20was%20named%20%3Cem%3Edefault%3C/em%3E%20so%20I%20created%20%3Cem%3E_layouts/default.html%3C/em%3E%3C/p%3E%0A%3Cp%3EThere%20at%20least%20two%20scopes%20of%20variables%20%3Cem%3Esite%3C/em%3E%20and%20%3Cem%3Epage%3C/em%3E.%0AYou%20can%20get%20for%20example%20title%20by%20typing%20%0A%7B%25%20raw%20%25%7D%0A%20%20%20%20%3Ctitle%3E%7B%7B%20site.title%20%7D%7D%3C/title%3E%0A%7B%25%20endraw%20%25%7D%3C/p%3E%0A%3Cp%3EAnd%20acces%20some%20feed%20and%20seo%20plugins%20by%20adding%20variables%20in%20head%0A%7B%25%20raw%20%25%7D%0A%20%20%20%20%7B%25-%20seo%20-%25%7D%0A%20%20%20%20%7B%25-%20feed_meta%20-%25%7D%0A%7B%25%20endraw%20%25%7D%3C/p%3E%0A%3Cp%3ETo%20list%20all%20posts%20you%20can%20write%3A%0A%7B%25%20raw%20%25%7D%0A%20%20%20%20%7B%25%20for%20post%20%20in%20site.posts%20%25%7D%0A%20%20%20%20%20%20%20%20%3Cspan%3E%7B%7B%20post.title%20%7D%7D%3C/span%3E%0A%20%20%20%20%20%20%20%20%3Cspan%3E%7B%7Bpost.date%20%7C%20date%3A%20%22%25Y-%25m-%25d%20%25H%3A%25M%3A%25S%22%7D%7D%3C/span%3E%0A%20%20%20%20%20%20%20%20%3Cspan%3E%7B%7Bpost.content%20%7C%20truncatewords%3A%2035%7D%7D%3C/span%3E%0A%20%20%20%20%7B%25%20endfor%20%25%7D%0A%7B%25%20endraw%20%25%7D%0AThere%20are%20many%20filters%20available%20in%20jekyll%20trough%20%3Ca%20href%3D%22https%3A//shopify.github.io/liquid/%22%3ELiquid%20template%20language%3C/a%3E%20so%20you%20can%20build%20tempaltes%20fast.%3C/p%3E%0A%3Cp%3EYou%20can%20even%20%3Ca%20href%3D%22https%3A//jekyllrb.com/docs/pagination/%22%3Eadd%20pagination%3C/a%3E%20but%20I%20skipped%20it%20for%20now.%3C/p%3E%0A%3Cp%3ETo%20format%20posts%20you%20need%20to%20create%20%3Cem%3E_layouts/post.html%3C/em%3E.%3Cbr%20/%3E%0AThere%20you%20can%20ex.%20list%20all%20tags%20inside%20posts%20and%20use%20it%20as%20keywords%20in%20meta%20like%20this%3A%0A%7B%25%20raw%20%25%7D%0A%20%20%20%20%3Cmeta%20name%3D%22keywords%22%20content%3D%22%7B%7Bpage.tags%7C%20join%3A%20%27%2C%20%27%7D%7D%22%20/%3E%0A%7B%25%20endraw%20%25%7D%3C/p%3E%0A%3Cp%3EAfter%20a%20few%20hours%20of%20expreriments%20I%20had%20dark%20mode%20blog%20with%20all%20I%20needed%20and%20I%20could%20test%20it%20on%20my%20devices.%3Cbr%20/%3E%0ATo%20serve%20jekyll%20with%20drafts%20on%20my%20local%20machine%20I%20can%20use.%20Then%20I%20can%20test%20if%20everything%20is%20working%20looking%20fine%20on%20my%20phone.%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3Ebundle%20%3Cspan%20class%3D%22nb%22%3Eexec%3C/span%3E%20jekyll%20serve%20--drafts%20--host%20%3Cspan%20class%3D%22m%22%3E0%3C/span%3E.0.0.0%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3ETo%20compile%20build%20you%20should%20add%20your%20domain%20name%20and%20base%20name%20into%20_config.yml%20mine%20is%20looking%20like%20that%20%3A%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3E%3Cspan%20class%3D%22nt%22%3Ebaseurl%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s%22%3E%26quot%3B%26quot%3B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22c1%22%3E%23%20the%20subpath%20of%20your%20site%2C%20e.g.%20/blog%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22nt%22%3Eurl%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s%22%3E%26quot%3Bhttps%3A//vane.pl%26quot%3B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3Eand%20then%20compile%20it%20using%20this%20command%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3Ejekyll%20build%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3EResults%20are%20in%20%3Cem%3E_site%3C/em%3E%20directory%20and%20you%20can%20copy%20them%20wherever%20you%20want%20on%20some%20cloud%20server%20or%20even%20%3Ca%20href%3D%22https%3A//jekyllrb.com/docs/github-pages/%22%3Econfigure%20github%20pages%20and%20serve%20your%20site%20directly%20from%20github%3C/a%3E.%3C/p%3E%0A%3Cp%3EHave%20fun.%3C/p%3E
Michal Szczepanski
['', '', '', '', '', '']
I haven't blogged regulary ever in my life so I decided now it's time for change and blog frequently about technology. This blog was using ghost cms deployed on docker to do it and I decided it would be nicer to have static pages that I can commit using git and deploy directly to webserver without any middleware.At first I thought it would be fun to build such thing from scratch but then I remember how complicated life become in terms of making blog. For complete working solution you need to add rss / seo / social media metadata / site map to name a few. And most painfull, you need to maintain it.Understand how to theme material ui2019-06-23T09:45:52+02:002019-06-23T09:45:52+02:00https://vane.pl/understand-how-to-theme-material-ui
%3Cp%3EIn%20one%20of%20my%20projects%20I%20wanted%20to%20use%20some%20React%20with%20UI.%20I%20was%20trying%20%3Ca%20href%3D%22https%3A//ant.design/%22%3Eant%20design%3C/a%3E%20before%20but%20this%20time%20I%20picked%20according%20to%20google%20the%20world%27s%20most%20popular%20React%20UI%20framework%3A%3C/p%3E%0A%3Cp%3E%3Cimg%20src%3D%22/assets/images/2019/06/Screenshot-2019-06-23-at-09.48.35.png%22%20alt%3D%22Material%20ui%20google%20search%22%20/%3E%3C/p%3E%0A%3Cp%3EI%20took%20one%20of%20the%20basic%20examples%20with%20%3Ca%20href%3D%22https%3A//material-ui.com/components/drawers/%22%3EDrawer%3C/a%3E.%0AI%20started%20from%20setup%20minimal%20project%20and%20just%20copy%20paste%20the%20first%20example.%0AThen%20setup%20%3Ca%20href%3D%22https%3A//webpack.js.org/%22%3Ewebpack%3C/a%3E%20and%20%3Ca%20href%3D%22https%3A//babeljs.io/%22%3Ebabel%3C/a%3E%20and%20download%20over%20100MB%20of%20dependencies%20using%20%3Ca%20href%3D%22https%3A//yarnpkg.com/en/%22%3Eyarn%3C/a%3E.%20Thanks%20javascript%20you%20treat%20my%20disk%20drive%20well.%20%20%3C/p%3E%0A%3Cp%3ESo%20after%20I%20successfully%20compiled%20interpreted%20language%20cause%20apparently%20that%27s%20what%20we%20do%20Today%20I%20got%20this%20screen%3A%3C/p%3E%0A%3Cp%3E%3Cimg%20src%3D%22/assets/images/2019/06/Screenshot-2019-06-23-at-10.31.34.png%22%20alt%3D%22Material%20ui%20drawer%20example%22%20%20/%3E%3C/p%3E%0A%3Cp%3ECool%20I%20have%20something%20but%20white%20/%20grey%20/%20blue%20is%20not%20an%20option%20I%20want%20it%20black.%0AI%20started%20from%20documentation%20%3Ca%20href%3D%22https%3A//material-ui.com/customization/themes/%22%3Eabout%20themes%3C/a%3E%20and%20I%20modified%20simple%20example%20by%20using%20%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3E%3Cspan%20class%3D%22nx%22%3EMuiThemeProvider%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3Eon%20top%20of%20my%20layout%0Awith%20%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3E%3Cspan%20class%3D%22k%22%3Eexport%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22kd%22%3Econst%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3EcustomTheme%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3EcreateMuiTheme%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%7B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Epalette%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Etype%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3Bdark%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7D%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22p%22%3E%7D%29%3B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3EAnd%20it%20was%20blue%20/%20white%20and%20%20grey%2C%20well%20not%20so%20dark%20to%20me.%3C/p%3E%0A%3Cp%3E%3Cimg%20src%3D%22/assets/images/2019/06/Screenshot-2019-06-23-at-10.39.04.png%22%20alt%3D%22Material%20ui%20dark%20theme%22%20/%3E%3C/p%3E%0A%3Cp%3ESo%20I%20started%20reading%20more%20documentation%20%0A%3Ca%20href%3D%22https%3A//material-ui.com/customization/palette/%22%3Eabout%20palette%3C/a%3E%20and%20colors%20and%20after%20about%202%20hours%20digging%20in%20code%20and%20setting%20all%20colors%20to%20black.%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3E%3Cspan%20class%3D%22k%22%3Eexport%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22kd%22%3Econst%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3EcustomTheme%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3EcreateMuiTheme%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%7B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Epalette%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Eprimary%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Elight%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3B%23000%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Emain%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3B%23000%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Edark%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3B%23000%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3EcontrastText%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3B%23000%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7D%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Esecondary%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Elight%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3B%23000%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Emain%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3B%23000%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Edark%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3B%23000%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3EcontrastText%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3B%23000%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7D%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Eerror%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Emain%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3B%23000%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Elight%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3B%23000%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Edark%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3B%23000%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3EcontrastText%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3B%23000%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7D%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Edivider%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3B%23000%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Eaction%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Eactive%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3B%23000%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Ehover%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3B%23000%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Eselected%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3B%23000%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Edisabled%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3B%23000%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3EdisabledBackground%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3B%23000%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7D%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Etext%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Eprimary%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3B%23000%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Esecondary%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3B%23000%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Edisabled%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3B%23000%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Ehint%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3B%23000%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Eicon%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3B%23000%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7D%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Ecommon%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Eblack%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3B%23000%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Ewhite%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3B%23000%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7D%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Ebackground%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22k%22%3Edefault%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3B%23000%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Epaper%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3B%23000%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7D%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7D%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22p%22%3E%7D%29%3B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3EI%20got%20something%20like%20that%20%28%20yes%20it%27s%20black%20image%20%29.%3C/p%3E%0A%3Cp%3E%3Cimg%20src%3D%22/assets/images/2019/06/Screenshot-2019-06-23-at-10.51.35.png%22%20alt%3D%22Material%20ui%20dark%20theme%22%20/%3E%3C/p%3E%0A%3Cp%3EGreat%20it%20worked.%20But%20what%20if%20I%20accidentally%20change%20the%20%3Ca%20href%3D%22https%3A//material-ui.com/components/app-bar/%22%3EAppBar%3C/a%3E%20and%20take%20example%20from%20%3Ca%20href%3D%22https%3A//material-ui.com/components/app-bar/%23SimpleAppBar.js%22%3ESimple%20appbar%3C/a%3E%20instead%20of%20using%20drawer%20example%20I%20just%20add%20drawer%20and%20there%20will%20be%20%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3E%3Cspan%20class%3D%22o%22%3E%26lt%3B%3C/span%3E%3Cspan%20class%3D%22nx%22%3EAppBar%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Eposition%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%3Cspan%20class%3D%22s2%22%3E%26quot%3Bfixed%26quot%3B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Ecolor%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%3Cspan%20class%3D%22s2%22%3E%26quot%3Bdefault%26quot%3B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3EclassName%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7B%3C/span%3E%3Cspan%20class%3D%22nx%22%3Eclsx%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22nx%22%3Eclasses%3C/span%3E%3Cspan%20class%3D%22p%22%3E.%3C/span%3E%3Cspan%20class%3D%22nx%22%3EappBar%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%5B%3C/span%3E%3Cspan%20class%3D%22nx%22%3Eclasses%3C/span%3E%3Cspan%20class%3D%22p%22%3E.%3C/span%3E%3Cspan%20class%3D%22nx%22%3EappBarShift%3C/span%3E%3Cspan%20class%3D%22p%22%3E%5D%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Eopen%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7D%29%7D%3C/span%3E%3Cspan%20class%3D%22o%22%3E%26gt%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3Einstead%20of%20%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3E%3Cspan%20class%3D%22o%22%3E%26lt%3B%3C/span%3E%3Cspan%20class%3D%22nx%22%3EAppBar%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Eposition%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%3Cspan%20class%3D%22s2%22%3E%26quot%3Bfixed%26quot%3B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3EclassName%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7B%3C/span%3E%3Cspan%20class%3D%22nx%22%3Eclsx%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%3C/span%3E%3Cspan%20class%3D%22nx%22%3Eclasses%3C/span%3E%3Cspan%20class%3D%22p%22%3E.%3C/span%3E%3Cspan%20class%3D%22nx%22%3EappBar%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%5B%3C/span%3E%3Cspan%20class%3D%22nx%22%3Eclasses%3C/span%3E%3Cspan%20class%3D%22p%22%3E.%3C/span%3E%3Cspan%20class%3D%22nx%22%3EappBarShift%3C/span%3E%3Cspan%20class%3D%22p%22%3E%5D%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Eopen%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7D%29%7D%3C/span%3E%3Cspan%20class%3D%22o%22%3E%26gt%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%3B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3E%3Cimg%20src%3D%22/assets/images/2019/06/Screenshot-2019-06-23-at-11.02.06.png%22%20alt%3D%22Material%20ui%20dark%20theme%22%20/%3E%3C/p%3E%0A%3Cp%3ENot%20black%20again%20and%20I%20started%20reading%20%3Ca%20href%3D%22https%3A//material-ui.com/customization/components/%22%3Eabout%20components%3C/a%3E%20and%20theme.%20I%20couldn%27t%20find%20any%20simple%20example%20on%20both%20stack%20overflow%20and%20github%20repositories%20that%20would%20explain%20how%20it%20happened%20and%20how%20to%20override%20those%20styles.%3C/p%3E%0A%3Cp%3EAbout%20hour%20later%20after%20digging%20in%20code%20and%20looking%20at%20%3Ca%20href%3D%22https%3A//material-ui.com/customization/components/%23global-theme-overrid%22%3Eexample%20of%20overriding%20component%20styles%3C/a%3E%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3E%3Cspan%20class%3D%22kd%22%3Econst%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Etheme%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3D%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3EcreateMuiTheme%3C/span%3E%3Cspan%20class%3D%22p%22%3E%28%7B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Eoverrides%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3EMuiButton%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3Eroot%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3EfontSize%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3B1rem%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7D%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7D%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7D%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22p%22%3E%7D%29%3B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3Eand%20by%20looking%20into%20chrome%20debugger%20and%20element%20styles.%3C/p%3E%0A%3Cp%3E%3Cimg%20src%3D%22/assets/images/2019/06/Screenshot-2019-06-23-at-11.16.30.png%22%20alt%3D%22Material%20ui%20dark%20theme%22%20/%3E%3C/p%3E%0A%3Cp%3EI%20figured%20it%20out%20that%20override%20is%20simple%20if%20you%20just%20look%20into%20styles%20inside%20browser%20developer%20toolbar%20and%20look%20for%20component%20name%20and%20style%20name%20you%20want%20to%20override%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3E%3Cspan%20class%3D%22nx%22%3Eoverrides%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3EMuiAppBar%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3EcolorDefault%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7B%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22nx%22%3EbackgroundColor%3C/span%3E%3Cspan%20class%3D%22o%22%3E%3A%3C/span%3E%3Cspan%20class%3D%22w%22%3E%20%3C/span%3E%3Cspan%20class%3D%22s1%22%3E%26%2339%3B%23000%26%2339%3B%3C/span%3E%3Cspan%20class%3D%22p%22%3E%2C%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7D%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%20%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7D%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3Cspan%20class%3D%22w%22%3E%20%20%3C/span%3E%3Cspan%20class%3D%22p%22%3E%7D%3C/span%3E%3Cspan%20class%3D%22w%22%3E%3C/span%3E%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3EAnd%20all%20is%20black%20again.%0AAt%20the%20end%20%3Ca%20href%3D%22/assets/demo/material-ui-theme/%22%3Ehere%20is%20simple%20black%20and%20white%20look%3C/a%3E%3A%3C/p%3E%0A%3Cp%3E%3Cimg%20src%3D%22/assets/images/2019/06/Screenshot-2019-06-23-at-11.27.15.png%22%20alt%3D%22Material%20ui%20dark%20theme%22%20/%3E%3C/p%3E%0A%3Cp%3ECode%20is%20available%20%3Ca%20href%3D%22https%3A//github.com/vane/blog-code/tree/master/material-ui-theme%22%3Eon%20my%20github%20repository%3C/a%3E.%0AYou%20just%20need%20to%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3Egit%20clone%20https%3A//github.com/vane/blog-code%0A%3Cspan%20class%3D%22nb%22%3Ecd%3C/span%3E%20material-ui-theme%0Ayarn%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3Ethen%20just%20open%20%3C/p%3E%0A%3Cdiv%20class%3D%22highlight%22%3E%3Cpre%3E%3Cspan%3E%3C/span%3Ebuild/index.html%0A%3C/pre%3E%3C/div%3E%0A%0A%3Cp%3Ein%20browser%20or%20just%20look%20%3Ca%20href%3D%22/assets/demo/material-ui-theme/%22%3Ehere%3C/a%3E.%0AEnjoy%20%21%3C/p%3E
Michal Szczepanski
['', '', '', '', '']
In one of my projects I wanted to use some React with UI. I was trying ant design before but this time I picked according to google the world's most popular React UI framework:World of machines2019-03-10T23:54:27+02:002019-03-10T23:54:27+02:00https://vane.pl/world-of-machines
%3Cp%3EWriting%20this%20text%20on%20my%20computer%20isn%27t%20much%20different%20now%20then%20writing%20this%20on%20typewriter%2050%20years%20ago.%20The%20only%20difference%20is%20that%20I%20can%20throw%20it%20away%20on%20the%20digital%20sidewalk%20without%20throwing%20much%20money%20to%20do%20so.%3C/p%3E%0A%3Cp%3EEveryday%20news%20try%20to%20prove%20to%20the%20world%20that%20start%20of%20new%20life%20or%20protecting%20life%20is%20important%20but%20it%27s%20not%20giving%20any%20meaningful%20prove%20of%20importance.%20%0AThat%27s%20what%20we%20are%20told%20in%20schools%20that%20any%20life%20is%20important%20but%20not%20giving%20us%20information%20that%20eating%20and%20surviving%20on%20this%20world%20comes%20with%20a%20price.%20%3C/p%3E%0A%3Cp%3ENo%20news%20about%20people%20died%20in%20accident%20or%20survived%20it%20is%20taking%20about%20actual%20people%20but%20it%27s%20more%20likely%20giving%20subjective%20opinions%20of%20so%20called%20experts%20trained%20by%20the%20education%20%20system.%20Yet%20those%20experts%20are%20more%20or%20less%20humans%20as%20me%20or%20person%20reading%20this%20story.%20Those%20experts%20gained%20their%20titles%20because%20someone%20established%20those%20titles%20and%20now%20nobody%20is%20questioning%20those%20are%20good%20or%20bad.%0AI%20don%27t%20know%20anything%20personal%20about%20those%20experts%20other%20than%20some%20title%20of%20some%20imaginary%20establishment.%0ADo%20I%20know%20anything%20about%20the%20person%20who%20is%20reading%20the%20news%20on%20tv%20station%2C%20moreover%20what%20do%20I%20know%20about%20person%20who%20wrote%20those%20news%20%3F%20Do%20I%20know%20anything%20about%20people%20playing%20role%20in%20this%20movie%20other%20then%20reading%20some%20stories%20from%20people%20who%20follow%20those%20people%20%3F%3C/p%3E%0A%3Cp%3EYou%20can%20tell%20me%20that%20there%20are%20other%20types%20of%20filmography%20called%20reportage.%20But%20are%20those%20types%20any%20different%2C%20calling%20some%20experts%20talking%20to%20people%20about%20their%20problems%20and%20giving%20this%20flat%20information.%20No%20depth%2C%20not%20much%20emotions.%3C/p%3E%0A%3Cp%3ELiving%20in%20information%20world%20there%20is%20no%20information%20given%20to%20average%20human%20today%20at%20all.%20Information%20is%20mostly%20machine%20generated%20populistic%20shit%20anyone%20can%20connect%20to%20for%201%20or%202%20minutes%20that%20can%27t%20connect%20to%20any%20particular%20personality.%3C/p%3E%0A%3Cp%3EMore%20important%20than%20news%20are%20sweeps%20from%20up%20to%20down%20or%20right%20to%20left.%3C/p%3E%0A%3Cp%3ENews%20are%20trying%20to%20keep%20people%20in%20bubble%2C%20whatever%20the%20bubble%20is%2C%20it%27s%20not%20real.%20Social%20platforms%20are%20advertisers%20that%20try%20to%20prove%20that%20being%20and%20looking%20young%20is%20good.%20Being%20rich%20is%20good.%20Being%20healthy%20is%20good%20just%20because%20some%20successful%20person%20you%20don%27t%20know%20anything%20about%20besides%20numbers%20on%20it%27s%20pay%20check%20or%20beautiful%20clothes%20that%27s%20he%20wearing%20is%20eating%20healthy%20and%20doing%20good%20to%20himself.%20Some%20other%20narcissist%20egoistic%20prick%20is%20writing%20about%20it%20to%20bring%20up%20some%20indicators%20of%20human%20factor%20so%20some%20people%20can%20make%20money%20by%20investing%20other%20people%20money.%3C/p%3E%0A%3Cp%3ENobody%20is%20questioning%20what%20good%20really%20is.%0ANobody%20is%20questioning%20that%20evil%20besides%20being%20wrong%20sometimes%20might%20be%20better%20than%20good.%20Everyone%20agreed%20and%20everyone%20knows%2C%20talking%20about%20%22bad%22%20things%20is%20wrong%2C%20cursing%20is%20wrong%2C%20hate%20is%20wrong%20love%20is%20good.%20But%20why%20is%20hate%20wrong%20and%20love%20good%20nobody%20explains.%20%3C/p%3E%0A%3Cp%3EPhilosophy%20is%20hard%20but%20philosophy%20is%20life.%3C/p%3E%0A%3Cp%3ENobody%20asks%20those%20questions%20cause%20they%20involve%20speaking%20as%20a%20person%2C%20giving%20something%20from%20personality%20to%20the%20community%20and%20nobody%20cares%20about%20it.%20It%27s%20easier%20to%20make%20a%20%22movie%22%20on%20some%20social%20platform%20and%20let%20the%20%22community%22%20decide.%20It%27s%20hard%20to%20read%20the%20reports%20and%20ask%20smart%20questions%20about%20the%20future.%20It%27s%20hard%20to%20find%20any%20interesting%20article%20or%20news%20that%20are%20not%20censored%20today.%0AAny%20news%20that%20are%20controversial%20and%20talking%20different%20then%20we%20think%20it%27s%20ok%20to%20follow.%0AOriginal%20content%20is%20barging%20for%20existence.%3C/p%3E%0A%3Cp%3ETechnology%20totalitarianism%20of%20machine%20generated%20content%20are%20bringing%20us%20-%20people%20-%20so%20close%20to%20hell%20right%20now%20that%20we%20can%27t%20even%20imagine%20the%20repercussions%20of%20this.%0AWe%20care%20about%20privacy%20but%20this%20double%20edged%20sword%20is%20giving%20more%20freedom%20to%20people%20managing%20this%20privacy%20and%20taking%20privacy%20from%20us.%20Actually%20anti%20privacy%20movement%20is%20now%20knocking%20to%20break%20into%20every%20person%20house%20and%20lay%20in%20their%20beds.%0AAbility%20to%20kill%20private%20small%20businesses%20is%20more%20and%20more%20easier%20now%20than%20before.%20Just%20one%20bad%20day%20of%20a%20person%20in%20the%20restaurant%20can%20result%20of%20many%20bad%20reviews.%0APraising%20machines%20is%20more%20and%20more%20valuable%2C%20machine%20driven%20cars%2C%20machine%20driven%20content%2C%20machine%20answering%20questions%20asked%2C%20machine%20picking%20numbers%20or%20tracking%20our%20movement%20in%20the%20internet.%20Laws%20that%20are%20trying%20to%20fight%20those%20machines%20are%20making%20those%20machines%20and%20systems%20more%20and%20more%20powerful.%3C/p%3E%0A%3Cp%3EWhere%20is%20human%20factor%20in%20all%20of%20this%20%3F%0AIs%20it%20now%20only%20flesh%20born%20to%20earn%20for%20a%20living%20and%20provide%20more%20slaves%20to%20this%20machine%20driven%20system%20%3F%0APoorly%20developed%20countries%20are%20now%20more%20human%20then%20highly%20developed%20ones.%20%0AWe%20are%20more%20and%20more%20prising%20machines%20but%20do%20people%20who%20make%20the%20laws%20really%20understand%20how%20machine%20works%20%3F%20What%20is%20a%20machine%20and%20what%27s%20the%20purpose%20of%20this%20creation%20%3F%0ADo%20we%20really%20simplify%20our%20lives%20by%20giving%20machines%20all%20this%20power%20or%20do%20we%20simplify%20machines%20world%20and%20complicate%20average%20people%20lives%20%3F%20I%20think%20nobody%20really%20cares%20about%20it%20anymore.%0AConformism%20made%20us%20fighting%20so%20much%20for%20our%20own%20position%20that%20we%20are%20not%20looking%20around%20anymore.%0ANobody%20cares%20about%20impact%20of%20a%20button%20but%20gives%20the%20power%20to%20the%20%22community%22.%20But%20is%20it%20human%20community%20or%20machine%20community%2C%20who%20cares%2C%20more%20important%20are%20the%20growing%20numbers%20on%20a%20pay%20check%20or%20statistics%20that%20try%20to%20prove%20we%20are%20doing%20everything%20right%20and%20we%20are%20all%20ok.%0AWhat%20if%20those%20statistics%20are%20lying%20%3F%20%0AWill%20the%20time%20tell%20the%20truth%20about%20good%20and%20evil%20fighting%20in%20the%20technology%20world%20%3F%0ANobody%20knows%20that%2C%20nobody%20knows%20if%20humanity%20will%20survive%20its%20own%20creations%20or%20this%20civilisation%20will%20fall%20as%20previous%20ones%20did.%20%3C/p%3E
Michal Szczepanski
['', '', '', '', '']
Writing this text on my computer isn't much different now then writing this on typewriter 50 years ago. The only difference is that I can throw it away on the digital sidewalk without throwing much money to do so.Everyday news try to prove to the world that start of new life or protecting life is important but it's not giving any meaningful prove of importance.Why open source is changing world and no one can stop it.2018-10-02T22:15:00+01:002018-10-02T22:15:00+01:00https://vane.pl/how-opensource-is-changing-world-and-no-one-can-stop-it
%3Cp%3EFirst%20of%20all.%0APeople%20are%20getting%20older%2C%20software%20or%20technology%20specifications%20don%27t.%3C/p%3E%0A%3Cp%3EWhen%20we%20run%20closed%20source%20product%20we%20need%20to%20pay%20people%20to%20maintain%20it%2C%20it%20is%20ok%20when%20we%20have%20pockets%20filled%20with%20money%20to%20invest%20in%20young%20students%20that%20could%20handle%20code%20after%20elders.%20If%20we%20can%20afford%20car%20service%2C%20returns%2C%20repairs%20and%20so%20on.%3C/p%3E%0A%3Cp%3EIt%27s%20good%20when%20lead%20developer%20change%20his%20job%20we%20could%20hire%20consultants%20and%20have%20money%20so%20we%20can%20fix%20or%20rewrite%20products%20from%20scratch.%20%20%3C/p%3E%0A%3Cp%3EIt%27s%20ok%20if%20we%20have%20money%20to%20upgrade%20obsolete%20hardware%2C%20libraries%2C%20operating%20systems.%20But%20usually%20product%20dies%20with%20the%20team%20of%20developers%20and%20is%20replaced%20with%20new%20technology%20stack.%3C/p%3E%0A%3Cp%3Eexamples%3A%3C/p%3E%0A%3Cul%3E%0A%3Cli%3E20%20years%20ago%20right%20after%20%3Ca%20href%3D%22https%3A//en.wikipedia.org/wiki/Halloween_documents%22%3EHallowen%20Documents%3C/a%3E%20leak%20who%20would%20say%20that%20Micro%24oft%20will%20run%20Linux%20on%20their%20cloud.%3C/li%3E%0A%3Cli%3E%3Ca%20href%3D%22https%3A//pl.wikipedia.org/wiki/COBOL%22%3ECOBOL%3C/a%3E%20was%20a%20great%20language%20at%20it%20times%20but%20as%20time%20passed%20no%20one%20was%20going%20to%20work%20in%20it%20anymore%20so%20it%27s%20a%20huge%20problem%20nowadays.%3C/li%3E%0A%3C/ul%3E%0A%3Cp%3E%3Cstrong%3E%3Cem%3ESoftware%20complexity%20increase.%3C/em%3E%3C/strong%3E%3C/p%3E%0A%3Cp%3ETen%20years%20ago%20%3Ca%20href%3D%22https%3A//aws.amazon.com/%22%3EAWS%3C/a%3E%20was%202%20years%20old%20and%20there%20was%20not%20much%20people%20using%20it.%20%0AThere%20was%20no%20Google%20or%20Microsoft%20cloud.%20%0A%3Ca%20href%3D%22https%3A//en.wikipedia.org/wiki/Sun_Microsystems%22%3ESun%20Microsystems%3C/a%3E%20was%20still%20java%20owner%20and%20%3Ca%20href%3D%22https%3A//en.wikipedia.org/wiki/Java_%28programming_language%29%22%3EJava%3C/a%3E%20itself%20was%20released%20as%20opensource%20software%20only%20for%20one%20earlier.%20%3Ca%20href%3D%22https%3A//en.wikipedia.org/wiki/Node.js%22%3ENodejs%3C/a%3E%20was%20not%20existent.%20%0A%3Ca%20href%3D%22https%3A//en.wikipedia.org/wiki/VirtualBox%22%3EVirtualbox%3C/a%3E%20got%20released%20year%20before%2C%20VMware%20or%20Citrix%20just%20started%20acquiring%20companies%20in%20the%20virtualisation%20business.%0A%3Ca%20href%3D%22https%3A//en.wikipedia.org/wiki/IPhone%22%3EiPhone%3C/a%3E%20was%20one%20year%20old%20and%20first%20version%20of%20%3Ca%20href%3D%22https%3A//en.wikipedia.org/wiki/Android_%28operating_system%29%22%3EAndroid%3C/a%3E%20was%20just%20released.%20%3C/p%3E%0A%3Cp%3ENow%20we%20got%20multiple%20cloud%20providers%20with%20their%20products%20and%20certifications.%20Multi%20cloud%20orchestrators%2C%20containers%20with%20lightweight%20operation%20systems.%20%3C/p%3E%0A%3Cp%3EWho%20knows%20what%20software%20we%20would%20have%205%20years%20from%20now.%20But%20yesterday%20desktop%20computers%20are%20tomorrow%20phones%20and%20more%20computing%20power%20means%20more%20complex%20systems%20that%20can%20handle%20things%20like%20distributed%20networking%2C%20blockchain%2C%20computer%20vision%20or%20machine%20learning%20stuff.%20%3C/p%3E%0A%3Cp%3EThere%20is%20a%20price%20with%20technology%20that%20people%20pay.%20Software%20price%20is%20that%20there%20is%20always%20lack%20of%20early%20adopters%20or%20contributors.%0AIncrease%20of%20software%20adoption%20increase%20demand%20for%20software%20developers%20and%20software%20development%20is%20only%20a%20skill%20not%20a%20superpower%20so%20we%20see%20lot%27s%20of%20coding%20camps%2C%20coding%20tutorials.%20Simple%20tasks%20can%20be%20handled%20by%20newcomers%20and%20more%20experienced%20developers%20are%20in%20even%20higher%20demand.%20Loyality%20is%20a%20big%20thing%20in%20todays%20world.%20%3C/p%3E%0A%3Cp%3EWith%20complex%20software%20we%20need%20more%20people%20maintaining%20it%20and%20more%20people%20means%20either%20more%20money%20or%20more%20freedom.%20Free%20software%20which%20is%20maintained%20and%20developed%20over%20the%20years%20with%20small%20number%20of%20people%20is%20winning%20with%20multimillion%20dollar%20corporations%20and%20that%27s%20the%20power%20journalists%2C%20managers%2C%20business%20investors%20or%20even%20politics%20don%27t%20understand.%20%3C/p%3E%0A%3Cp%3EPolitics%20are%20so%20scared%20they%20try%20to%20regulate%20something%20that%20is%20beyond%20their%20knowledge%20with%20methods%20they%20know%20from%20their%20childhood.%20But%20it%20won%27t%20work%20because%20we%20don%27t%20live%20in%2080%27s%20or%2090%27s%20and%20those%20are%20laws%20that%20politics%20are%20trying%20to%20apply%20to%20technology.%20But%20let%27s%20not%20focus%20or%20those%20poor%20bastards.%3C/p%3E%0A%3Cp%3EThere%20won%27t%20be%20cloud%2C%20big%20data%2C%20blockchain%2C%20artificial%20intelligence%20without%20open%20source%20because%20of%20it%27s%20complexity.%20And%20because%20complexity%20require%20lot%27s%20of%20people%20most%20disruptive%20technologies%20are%20developed%20in%20foundations.%20%3Ca%20href%3D%22http%3A//mozilla.org/%22%3EMozilla%3C/a%3E%2C%20%3Ca%20href%3D%22https%3A//www.apache.org/%22%3EApache%3C/a%3E%2C%20%3Ca%20href%3D%22https%3A//www.cncf.io/%22%3ECloud%20Native%3C/a%3E%2C%20%3Ca%20href%3D%22https%3A//www.linuxfoundation.org/%22%3ELinux%3C/a%3E%2C%20%3Ca%20href%3D%22http%3A//python.org/%22%3EPython%3C/a%3E%20foundation%20to%20name%20a%20few.%20We%20got%20portals%20that%20drive%20innovation%20and%20help%20developers%20to%20found%20rise%20their%20projects.%20%3C/p%3E%0A%3Cp%3EThere%20is%20%3Ca%20href%3D%22https%3A//www.forbes.com/sites/timworstall/2013/03/23/more-people-have-mobile-phones-than-toilets/%22%3Egreater%20access%20to%20cell%20phones%20than%20toilets%3C/a%3E%20in%20some%20countries.%20That%20is%20what%20technology%20become%20but%20not%20much%20people%20can%20contribute%20to%20itself.%3C/p%3E%0A%3Cp%3EIf%20someone%20tries%20to%20close%20opensource%20project%20or%20some%20people%20decide%20to%20drive%20it%20the%20other%20way%20there%20is%20%3Ca%20href%3D%22https%3A//en.wikipedia.org/wiki/List_of_software_forks%22%3Efork%3C/a%3E%20like%20%0Ahundson%20-%26gt%3B%20jenkins%2C%20%0Amysql%20-%26gt%3B%20mariadb%2C%20%0Akhtml%20-%26gt%3B%20webkit%2C%20%0Aopenssl%20-%26gt%3B%20libressl%2C%0Ancsa%20httpd%20-%26gt%3B%20apache%20server%2C%0Aopenoffice%20-%26gt%3B%20libre%20office.%0AEven%20cryptocurrencies%20are%20forked%20like%20bitcoin%20-%26gt%3B%20bitcoin%20cash.%3C/p%3E%0A%3Cp%3EIt%27s%20more%20natural%20like%20evolution%20of%20species%20or%20extinction%20of%20others%20which%20didn%27t%20adopted%20to%20environment%20changes.%3C/p%3E%0A%3Cp%3EDespite%20many%20crazy%20things%20people%20made%20trough%20history%20freedom%20was%20always%20priority.%20USA%20are%20telling%20their%20citizens%20that%20they%20fight%20for%20foreigner%20freedom%20not%20oil%20or%20world%20dominance%20and%20it%20works.%20Most%20of%20great%20wars%20were%20because%20someone%20was%20telling%20other%20people%20that%20they%20would%20get%20more%20freedom%20when%20they%20attack%20other%20nations.%20Without%20technology%20freedom%20was%20more%20money%2C%20land%2C%20skins%2C%20heard.%20%3C/p%3E%0A%3Cp%3ENow%20it%27s%20easier%20but%20there%20are%20still%20cyber%20wars%20like%20ip%20or%20website%20block%2C%20DDOS%20attacks%2C%20security%20breach%20or%20surveillance.%20%3C/p%3E%0A%3Cp%3EStill%20all%20of%20those%20are%20driven%20by%20open%20technology%20because%20of%20shorter%20step%20learning%20curve.%20Ten%20years%20before%20when%20our%20washing%20machine%20broke%20we%20called%20mechanic%20who%20could%20help%20or%20not%20if%20he%20got%20no%20skills.%20Today%20those%20skilled%20mechanic%20are%20making%20youtube%20videos%2C%20people%20are%20selling%20parts%20of%20their%20broken%20equipment%20on%20auctions%20so%20you%20can%20replace%20your%20broken%20parts%20by%20yourself.%3C/p%3E%0A%3Cp%3EWe%20are%20nowhere%20near%20the%20ideal%20world%20but%20if%20we%20follow%20the%20open%20technology%20path%20we%20would%20change%20and%20maybe%20even%20save%20this%20world%20for%20other%20people.%3C/p%3E%0A%3Cp%3EThere%20is%20still%20lot%27s%20of%20things%20to%20do%20especially%20in%20old%20business%20like%20open%20buildings%2C%20open%20cars%2C%20open%20electric%20power%20source%2C%20open%20electric%20devices%2C%20home%20appliance%2C%20phones.%20Open%20hardware%20should%20be%20next%20big%20thing%20and%20it%27s%20happening%20with%20Arduino%2C%20RaspberryPi%2C%20or%20%3Ca%20href%3D%22https%3A//riscv.org/%22%3ERISC-V%3C/a%3E.%20The%20problem%20are%20regulations%20but%20those%20would%20probably%20start%20to%20expire%20with%20death%20of%20today%27s%2040-60%20years%20old%20people%20since%20they%20would%20stop%20protecting%20their%20money.%20I%20hope%20newborn%20people%20would%20be%20more%20liberal%20and%20praise%20invention%2C%20technology%20and%20openness%20instead%20of%20regulations%20that%20are%20protecting%20corporate%20business.%3C/p%3E%0A%3Cp%3EWe%20see%20digital%20revolution%20in%20music%20or%20tv%20with%20services%20like%20Spotify%20or%20Netflix.%3C/p%3E%0A%3Cp%3EWe%20got%20SDR%20so%20we%20are%20building%20our%20own%20antennas%20and%20%3Ca%20href%3D%22https%3A//www.rtl-sdr.com/rtl-sdr-tutorial-receiving-noaa-weather-satellite-images/%22%3Edownloading%20images%20from%20weather%20satellites%3C/a%3E%2C%20printing%20with%20%3Ca%20href%3D%22https%3A//www.prusaprinters.org/%22%3Eopen%20source%203d%20printers%3C/a%3E%20our%20own%20designs%20or%20designs%20of%20other%20people%20which%20are%20open%20on%20portals%20like%20%3Ca%20href%3D%22http%3A//thingiverse.com/%22%3Ethingiverse%3C/a%3E.%3C/p%3E%0A%3Cp%3EWe%20are%20living%20in%20interesting%20times%2C%20where%20access%20to%20knowledge%20is%20not%20limited%20to%20universities%20and%20rich%20people%2C%20world%20is%20shaped%20by%20individuals%20and%20collective%20movement.%20I%20hope%20this%20trend%20would%20not%20change.%3C/p%3E
Michal Szczepanski
['', '', '', '', '', '', '', '']
First of all.People are getting older, software or technology specifications don't.Side project, invoice generator2018-06-20T22:58:00+01:002018-06-20T22:58:00+01:00https://vane.pl/side-project-invoice-generator
%3Cp%3EI%20am%20very%20busy%20recently.%20There%20is%20not%20much%20time%20left%20for%20me%20to%20sleep%20and%20also%20so%20not%20much%20time%20to%20do%20something%20creative%20in%20my%20free%20time%20cause%20I%20am%20to%20tired%20looking%20at%20the%20computer.%20But%20here%20it%20is%20some%20story%20from%20today%20and%20from%20the%20past.%3C/p%3E%0A%3Cp%3EDay%20before%20I%20started%20working%20as%20sole%20trader%20I%20was%20looking%20for%20some%20simple%20open%20source%20software%20for%20invoice%20generation.%20%0AThere%20wasn%27t%20any%20so%20I%20took%20excel%20template%20from%20my%20friend%20but%20then%20I%20realised%20I%20don%27t%20have%20excel%20but%20I%20can%20create%20invoice%20software%20on%20my%20own%2C%20cause%20software%20is%20what%20I%20do%20and%20I%20am%20software%20developer%2C%20and%20I%20did%20it.%20It%20was%20very%20crazy%20idea%2C%20one%20of%20many%20crazy%20ideas%20I%20got%20in%20my%20head.%3C/p%3E%0A%3Cp%3EIt%20took%20me%20couple%20of%20hours%2C%20or%20days%20I%20don%27t%20remember%20it%20was%20more%20then%20three%20years%20ago%2C%20but%20it%20was%20working.%20It%20is%20still%20working%2C%20and%20I%20am%20using%20it%20for%20almost%20three%20years.%20%0AAt%20that%20time%20it%20was%20using%20alpha%20version%20of%20%3Ca%20href%3D%22https%3A//pdfbox.apache.org/%22%3EApache%20PDFBox%3C/a%3E.%20And%20this%20library%20was%20amazing%20at%20this%20time%20and%20probably%20now%20is%20more%20amazing%2C%20but%20I%20didn%27t%20do%20more%20with%20it%20except%20updating%20my%20maven%20dependencies%20to%20some%20of%20the%20latest%20versions.%20%3C/p%3E%0A%3Cp%3EGoing%20back%20to%20the%20story%20every%20time%20I%20was%20generating%20invoices%20I%20had%20to%20modify%20source%20code%2C%20it%20was%20not%20so%20painful%20since%20number%20of%20invoices%20I%20make%20is%20low%2C%20but%20I%20always%20need%20to%20calculate%20days%20by%20hand%20and%20so%20on.%3C/p%3E%0A%3Cp%3ETime%20passed%2C%20new%20technologies%20appeared%20like%20graphql%2C%20vuejs%2C%20docker%20so%20why%20don%27t%20I%20use%20it%20as%20a%20base%20and%20make%20some%20modern%20shit%20around%20this%20to%20learn%20something%20new.%3C/p%3E%0A%3Cp%3ESo%20recently%20I%20revived%20this%20project%2C%20and%20%3Ca%20href%3D%22https%3A//gitlab.com/pragle%22%3EI%20put%20it%20on%20gitlab%20so%20you%20can%20check%20it%20out%3C/a%3E.%20Don%27t%20worry%20it%27s%20not%20so%20scary%20now.%20Also%20at%20the%20end%20of%20this%20writeup%20you%20can%20click%20on%20online%20demo%20-%20currently%20only%20in%20polish%2C%20cause%20I%20am%20from%20Poland%20and%20invoicing%20polish%20customers.%3C/p%3E%0A%3Cp%3EWell%20so%20what%27s%20so%20special%20about%20it%20now%20%3F%3C/p%3E%0A%3Cp%3EI%20added%20some%20more%20services%20to%20it%2C%20while%20continuous%20learning%20I%20tried%20to%20use%20some%20recent%20technologies.%20%0A1.%20There%20is%20this%20java%20application%20but%20now%20it%20has%20simple%20http%20endpoint%20that%20receive%20json%20and%20output%20pdf%20in%20response%0A2.%20Since%20I%20do%20mostly%20python%20and%20never%20had%20chance%20to%20use%20%3Ca%20href%3D%22https%3A//graphql.org/learn/%22%3Egraphql%3C/a%3E%20I%20created%20backend%20application%20that%20in%20future%20might%20be%20some%20sort%20of%20accounting%20app%20using%20%3Ca%20href%3D%22https%3A//github.com/graphql-python/graphene-django%22%3Egraphene-django%3C/a%3E%0A3.%20Recently%20I%20also%20started%20to%20like%20%3Ca%20href%3D%22https%3A//vuejs.org/%22%3Evue%3C/a%3E%20insted%20of%20%3Ca%20href%3D%22https%3A//reactjs.org/%22%3Ereact%3C/a%3E%20and%20especially%20%3Ca%20href%3D%22https%3A//nuxtjs.org/%22%3Enuxtjs%3C/a%3E%20because%20everthing%20works%20there%20out%20of%20the%20box.%20I%20created%20some%20simple%20frontend%20in%20nuxt.%0AMy%20%3Ccode%3Emicroservice%3C/code%3E%20flow%20is%20like%20this%3A%0Anuxt%20-%26gt%3B%20django%20-%26gt%3B%20java%20-%26gt%3B%20pdf%20-%26gt%3B%20django%20-%26gt%3B%20nuxt%0AAnd%20we%20got%20pdf%20as%20an%20output.%0AOf%20course%20it%20would%20be%20a%20big%20deal%20to%20run%20this%20shit%20and%20configure%20it.%20%0AFortunately%20we%20got%20docker%20these%20days%20so%20I%20created%20next%20project%20that%20use%20%3Ca%20href%3D%22https%3A//docs.docker.com/compose/%22%3Edocker-compose%3C/a%3E%20to%20run%20all%20of%20those%20apps%20in%20single%20command%20like.%0A%3Ccode%3Ebash%20run.sh%3C/code%3E%3C/p%3E%0A%3Cp%3ETech%20stack%3A%0A1.%20javascript%2C%20vuejs%2C%20nuxtjs%0A%3Ca%20href%3D%22https%3A//gitlab.com/pragle/invoice_frontend%22%3Ehttps%3A//gitlab.com/pragle/invoice_frontend%3C/a%3E%3Cbr%20/%3E%0A2.%20python%2C%20django%2C%20graphql%2C%20graphene%0A%3Ca%20href%3D%22https%3A//gitlab.com/pragle/invoice_backend%22%3Ehttps%3A//gitlab.com/pragle/invoice_backend%3C/a%3E%3Cbr%20/%3E%0A3.%20java%2C%20pdfbox%2C%20pdf%0A%3Ca%20href%3D%22https%3A//gitlab.com/pragle/invoice_pdf%22%3Ehttps%3A//gitlab.com/pragle/invoice_pdf%3C/a%3E%3Cbr%20/%3E%0A4.%20docker-compose%20to%20run%20them%20all%0A%3Ca%20href%3D%22https%3A//gitlab.com/pragle/invoice_runner%22%3Ehttps%3A//gitlab.com/pragle/invoice_runner%3C/a%3E%3C/p%3E%0A%3Cp%3EProbably%20this%20is%20to%20much%20for%20generating%20from%20one%20to%20three%20invoices%20per%20month%20but%20what%20I%20done%20can%20be%20easily%20scaled%20to%20millions%20of%20invoices%2C%20so%20feel%20free%20to%20use%20and%20modify%20it%20%5E%5E.%20Also%20it%20was%20fun%20to%20see%20how%20graphql%20works%20by%20doing%20something%20useful%20for%20myself.%3C/p%3E%0A%3Cp%3EThe%20demo%20I%20also%20use%20on%20my%20daily%20basics%20to%20make%20invoices%20is%20here%3A%0Ahttp%3A//invoice.vane.pl%3C/p%3E%0A%3Cp%3ESince%20it%20is%20now%20easy%20to%20develop%20and%20run%20I%20would%20%0Aprobably%20add%20some%20more%20functionalities%20to%20it%2C%20and%20also%20some%20more%20documentation.%20What%20I%20definitely%20would%20do%20is%20make%20it%20international%20not%20only%20one%20language%20specific.%0ABut%20first%20I%20need%20some%20more%20time%20and%20some%20rest.%3C/p%3E%0A%3Cp%3ECheers%2C%20have%20fun.%3C/p%3E
Michal Szczepanski
['', '', '', '', '', '', '']
I am very busy recently. There is not much time left for me to sleep and also so not much time to do something creative in my free time cause I am to tired looking at the computer. But here it is some story from today and from the past.Day before I started working as sole trader I was looking for some simple open source software for invoice generation.Why serverless is a next big deal ?2018-04-07T13:22:05+01:002018-04-07T13:22:05+01:00https://vane.pl/why-serverless-is-a-next-big-deal
%3Cp%3EAfter%20almost%2010%20years%20of%20being%20software%20developer%20professionally.%20And%20previously%205%20years%20doing%20it%20as%20a%20hobby.%20I%20now%20see%20fundamental%20progressing%20change%20in%20the%20way%20that%20we%20will%20be%20mostly%20%28not%20all%29%20doing%20our%20professional%20work%20in%20ten%20to%20twenty%20years.%3C/p%3E%0A%3Cp%3EThe%20first%20root%20cause%20is%20a%20cloud%2C%20it%20started%20slowly%20offering%20virtual%20machines%20that%20we%20could%20use%20for%20specific%20purposes%20and%20then%20get%20rid%20of%20it.%20That%27s%20called%20%3Ca%20href%3D%22https%3A//en.wikipedia.org/wiki/Infrastructure_as_a_service%22%3EIaaS%3C/a%3E%20-%20infrastructure%20as%20a%20service.%20From%20now%20on%20when%20I%20want%20some%20server%20I%20don%27t%20need%20to%20go%20to%20shop%20plug%20a%20cable%20and%20worry%20about%20the%20hard%20drive%20stop.%20I%20just%20order%20it%20via%20website.%20That%27s%20because%20people%20started%20thinking%2C%20what%20if%20individual%20components%20of%20traditional%20computer%20could%20be%20separated%20and%20served%20independent%20to%20themselves%20%3F%20And%20that%20was%20big%20deal%20because%20someone%20who%20is%20making%20CPU%20or%20GPU%20intensive%20tasks%20no%20longer%20need%20to%20order%20big%20disk%20drive.%20Now%20I%20can%20choose%20whatever%20processor%20number%20I%20want%2C%20whatever%20disk%20drive%20size%20I%20need.%20That%27s%20the%20optimisation%20of%20resource%20usage%2C%20and%20maximisation%20of%20efficiency.%20%3C/p%3E%0A%3Cp%3EBut%20then%2C%20there%20are%20some%20tasks%20that%20everyone%20need%20and%20doing%20independently%20using%20custom%20software%20like%20-%20starting%20from%20the%20simple%20ones%20-%20convert%20photos%20or%20videos%2C%20database%20access%2C%20load%20balancing%20web%20servers%2C%20speech%20to%20text%2C%20text%20to%20speech%2C%20translate%20between%20different%20languages%2C%20mapping%20software%2C%203d%20objects%20rendering%20.And%20those%20are%20now%20served%20at%20bigger%20scale%2C%20they%20call%20it%20%3Ca%20href%3D%22https%3A//en.wikipedia.org/wiki/Platform_as_a_service%22%3EPaaS%3C/a%3E%20Platform%20as%20a%20service.%20%3C/p%3E%0A%3Cp%3EBut%20there%20are%20still%20some%20more%20complicated%20that%20are%20still%20not%20separated%20to%20simpler%20services%20like%20collecting%20and%20showing%20statistics%2C%20bug%20tracking%2C%20email%20receiving%2C%20chat%2C%20document%20processing%2C%20customers%20aggregation.%20We%20call%20it%20%3Ca%20href%3D%22https%3A//en.wikipedia.org/wiki/Software_as_a_service%22%3ESaaS%3C/a%3E%20software%20as%20a%20service.%3C/p%3E%0A%3Cp%3ESo%20we%20got%20one%20functionality%20that%20we%20can%20build%20upon%20our%20needs%20and%20it%20would%20scale%20to%20infinite%20number%20of%20users%20and%20computing%20power.%20We%20are%20only%20limited%20with%20money.%0ASo%20we%20think%20we%20got%20it%20all%20but%20still%20we%20need%20that%20custom%20software%20and%20developers%20to%20integrate%20those%20systems%20to%20work%20as%20we%20want%20to.%20%3C/p%3E%0A%3Cp%3EAs%20we%20all%20know%20the%20bigger%20the%20code%20base%20the%20more%20error%20prone%20it%20is.%20The%20bigger%20scale%20the%20smaller%20costs.%20Those%20are%20things%20that%20don%27t%20change.%3C/p%3E%0A%3Cp%3EThe%20second%20root%20cause%20are%20%3Ca%20href%3D%22https%3A//www.opencontainers.org/%22%3Econtainers%3C/a%3E%2C%20since%20it%20is%20no%20longer%20%22works%20on%20my%20machine%20sentence%22%20we%20can%20deploy%20them%20scale%20them%20using%20orchestrators%20and%20cluster%20them%20using%20different%20tools.%20We%20can%20make%20small%20programs%20that%20we%20now%20call%20%3Ca%20href%3D%22https%3A//en.wikipedia.org/wiki/Microservices%22%3Emicro%20services%3C/a%3E%20and%20allow%20us%20to%20manage%20smaller%20portions%20of%20code%20that%20is%20less%20buggy%20and%20make%20one%20functionality%2C%20we%20can%20still%20scale%20them%20and%20register%20our%20services%20as%20we%20want%20to.%3C/p%3E%0A%3Cp%3EBut%20we%20still%20mostly%20work%20eight%20hours%20from%208%20to%2016%20and%20don%27t%20need%20those%20services%2024%20hours%20a%20day.%20Our%20usage%20of%20resources%20is%20asynchronous.%20When%20Europe%20sleep%20on%20other%20part%20of%20globe%20people%20work.%20we%20don%27t%20use%20same%20resources%20all%20the%20time.%20The%20same%20is%20with%20the%20applications%20%0AMostly%20we%20don%27t%20want%20to%20run%20our%20applications%2024/7%2C%20we%20are%20not%20clicking%20send%20email%20all%20the%20time.%20When%20we%20sleep%20we%20don%27t%20need%20television%20or%20light%2C%20kitchen%20or%20car%20we%20need%20only%20alarm%20clock%20that%20would%20wake%20us%20up.%0AThat%20means%20most%20of%20our%20tasks%20are%20scheduled%20at%20specific%20times%20all%20over%20the%20world.%3C/p%3E%0A%3Cp%3EThe%20second%20one%20what%20we%20need%20to%20get%20shit%20done%20fast%20is%20information%2C%20all%20the%20systems%20that%20we%20are%20creating%20trough%20those%20years%20are%20in%20fact%20transforming%20input%20to%20the%20specific%20output.%0ANow%20when%20computing%20power%20is%20so%20cheap%20some%20of%20them%20are%20taking%20videos%20and%20photos%20and%20writing%20about%20colours%20of%20clothes%20or%20number%20of%20people%20walking%20to%20and%20from%20our%20store%20during%20day.%3C/p%3E%0A%3Cp%3EThat%27s%20where%20server%20less%20shines.%20We%20could%20get%20document%20A%20or%20service%20B%20and%20it%27s%20information%20and%20transform%20it%27s%20to%20match%20our%20purpose%20using%20service%20C%20and%20if%20we%20got%20infinite%20of%20those%20micro%20services%20we%20can%20glue%20them%20together%20using%20those%20lambda%20functions.%20We%20can%20use%20this%20function%20only%20from%208%20to%2016%20or%20whenever%20we%20want%20and%20then%20pay%20only%20for%20computing%20power%2C%20network%20utilisation%20and%20storage%20or%20store%20the%20data%20on%20our%20computer%20and%20pay%20noting%20stale.%0AWe%20can%20maximise%20hardware%20utilisation%20to%20maximise%20profits%20and%20cut%20costs.%20We%20can%20write%20simpler%20software%2C%20we%20can%20even%20write%20this%20software%20using%20cloud%20editors.%3C/p%3E%0A%3Cp%3ESo%20from%20now%20on%20I%20am%20more%20focused%20at%20looking%20up%20at%20clouds%20because%20there%20is%20a%20future.%3C/p%3E
Michal Szczepanski
['', '', '', '']
After almost 10 years of being software developer professionally. And previously 5 years doing it as a hobby. I now see fundamental progressing change in the way that we will be mostly (not all) doing our professional work in ten to twenty years.The first root cause is a cloud, it started slowly offering virtual machines that we could use for specific purposes and then get rid of it. That's called IaaS - infrastructure as a service. From now on when I want some server I don't need to go to shop plug a cable and worry about the hard drive stop. I just order it via website. That's because people started thinking, what if individual components of traditional computer could be separated and served independent to themselves ? And that was big deal because someone who is making CPU or GPU intensive tasks no longer need to order big disk drive. Now I can choose whatever processor number I want, whatever disk drive size I need. That's the optimisation of resource usage, and maximisation of efficiency.