[{"data":1,"prerenderedAt":2316},["ShallowReactive",2],{"i-mdi:theme-light-dark":3,"i-mdi:menu":8,"i-mdi:linkedin":10,"i-mdi:github":12,"i-mdi:email-outline":14,"articles-list":16,"i-mdi:arrow-right":2314},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,24,false,"\u003Cpath fill=\"currentColor\" d=\"M7.5 2c-1.79 1.15-3 3.18-3 5.5s1.21 4.35 3.03 5.5C4.46 13 2 10.54 2 7.5A5.5 5.5 0 0 1 7.5 2m11.57 1.5l1.43 1.43L4.93 20.5L3.5 19.07zm-6.18 2.43L11.41 5L9.97 6l.42-1.7L9 3.24l1.75-.12l.58-1.65L12 3.1l1.73.03l-1.35 1.13zm-3.3 3.61l-1.16-.73l-1.12.78l.34-1.32l-1.09-.83l1.36-.09l.45-1.29l.51 1.27l1.36.03l-1.05.87zM19 13.5a5.5 5.5 0 0 1-5.5 5.5c-1.22 0-2.35-.4-3.26-1.07l7.69-7.69c.67.91 1.07 2.04 1.07 3.26m-4.4 6.58l2.77-1.15l-.24 3.35zm4.33-2.7l1.15-2.77l2.2 2.54zm1.15-4.96l-1.14-2.78l3.34.24zM9.63 18.93l2.77 1.15l-2.53 2.19z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":9},"\u003Cpath fill=\"currentColor\" d=\"M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":11},"\u003Cpath fill=\"currentColor\" d=\"M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93zM6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":13},"\u003Cpath fill=\"currentColor\" d=\"M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":15},"\u003Cpath fill=\"currentColor\" d=\"M22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2zm-2 0l-8 5l-8-5zm0 12H4V8l8 5l8-5z\"\u002F>",[17,114,226,335,589,973,1495],{"id":18,"title":19,"body":20,"category":100,"description":26,"extension":101,"meta":102,"navigation":103,"path":104,"published":105,"seo":106,"stem":107,"tags":108,"__hash__":113},"articles\u002Farticles\u002Fgithub-plugin-for-visual-studio.md","GitHub Plugin for Visual Studio",{"type":21,"value":22,"toc":91},"minimark",[23,27,32,40,44,68,72,80,84],[24,25,26],"p",{},"Git is one of the most popular version control system, used by programmers all around the world. GitHub is a hosting service which provides full support for Git.",[28,29,31],"h3",{"id":30},"what-is-git","What is Git",[24,33,34,39],{},[35,36],"img",{"alt":37,"src":38},"Image","\u002Fimages\u002F4\u002F1.png"," Git is a version control system for tracking changes in computer files. The whole system is based on repositories, which are made in chosen by using folders. Repositories are making snapshots of our system changes and store them. We are able to add suitable comments for all committed changes to make everything arranged properly. Git is creating new hidden folders inside the repository folder and store those snapshots with suitable comments. Thanks to that, we are able to come back to any saved system stage. Git tracking system is perfect for working with colleagues. It is providing tools to create branches and add new contributors to our project. It has also features which are helping with problems with desynchronization eg. two people editing the same piece of code.",[28,41,43],{"id":42},"how-to-use-git","How to use Git",[24,45,46,47,54,55,59,60,63,64,67],{},"Git has its own console and graphical interfaces. There are also special tools like GitHub on Visual Studio which provides full support for Git from the Visual Studio window. Priory, to use Git, we have to simply ",[48,49,53],"a",{"href":50,"rel":51},"https:\u002F\u002Fgit-scm.com\u002Fdownloads",[52],"nofollow","download"," and install Git to our PC. I would like to focus on the GitHub plugin for Visual Studio. It is easy to use and provides basic tools for managing the repositories. There are three basic functions in GitHub on Visual Studio: Pull, Push and Sync. ",[56,57,58],"strong",{},"Pull"," option is downloading the current version of repository from the server. ",[56,61,62],{},"Push"," option is uploading the local version of repository to the server. ",[56,65,66],{},"Sync"," is synchronizing local repository with server (committing pull and push). All of those functions can proceed from Visual Studio itself. We don't need to go out of the program to create new repositories. GitHub plugin is also adding functionality to create a git repository inside the new project. We just have to tick this option while creating. We have to remember to create a new repository on the GitHub website and synchronize it with Git plugin, to make it be accessible by other people.",[28,69,71],{"id":70},"managing-your-github-repositories","Managing your GitHub repositories",[24,73,74,75,79],{},"To manage repositories I highly recommend to visit the GitHub website. We can find there many useful features which are easily accessible in the graphical interface. We can add new branches to our project, add new contributors and also add external GitHub apps which are useful in some cases. I also recommend GitHub documentation ",[48,76,77],{"href":77,"rel":78},"https:\u002F\u002Fguides.github.com\u002Ffeatures\u002Fwikis\u002F",[52]," to check out how to use GitHub properly.",[28,81,83],{"id":82},"download-repository","Download repository",[24,85,86,87],{},"If the repository is set as public, we don't require any external privileges to pull other people repositories. The easiest way to do it is to right-click inside the folder which we want to use and choose \"Git Bash Here\". We will see the git console. To pull repository we have to write command: ",[88,89,90],"code",{},"git clone [GitHub URL]",{"title":92,"searchDepth":93,"depth":93,"links":94},"",2,[95,97,98,99],{"id":30,"depth":96,"text":31},3,{"id":42,"depth":96,"text":43},{"id":70,"depth":96,"text":71},{"id":82,"depth":96,"text":83},"Git","md",{},true,"\u002Farticles\u002Fgithub-plugin-for-visual-studio",null,{"title":19,"description":26},"articles\u002Fgithub-plugin-for-visual-studio",[100,109,110,111,112],"Version Control","Github","Good Habits","Learning","m-sBl07vfheHXJUn-75u4ZKau5tdRCfqG_S5E7nzgjo",{"id":115,"title":116,"body":117,"category":215,"description":126,"extension":101,"meta":216,"navigation":103,"path":217,"published":105,"seo":218,"stem":219,"tags":220,"__hash__":225},"articles\u002Farticles\u002Fhow-to-use-other-developers-work-in-own-project-nuget-package-manager.md","How to use other developers work in own project - NuGet Package Manager",{"type":21,"value":118,"toc":209},[119,124,127,131,134,144,150,153,158,161,166,170,173,178,181,186,189,192,197,201],[120,121,123],"h2",{"id":122},"what-is-nuget","What is NuGet?",[24,125,126],{},"NuGet is a package manager for .NET developers widening horizons and makes our job easier. This great tool is giving ability to simply consume libraries made by other developers and use them in our own projects.",[120,128,130],{"id":129},"how-to-use-nuget","How to use NuGet?",[24,132,133],{},"NuGet is default package manager pre-installed in Visual Studio. We can easily browse through thousands of libraries using web browser or built-in tool.In Visual Studio:",[135,136,137,141],"ol",{},[138,139,140],"li",{},"Create new project",[138,142,143],{},"Go to Tools > Package Manager > Manage NuGet Packages for Solution",[24,145,146],{},[35,147],{"alt":148,"src":149},"NuGet Image","\u002Fimages\u002F2\u002FNuget1.jpg",[24,151,152],{},"The NuGet Package manager should appear as new card in our solution",[24,154,155],{},[35,156],{"alt":148,"src":157},"\u002Fimages\u002F2\u002FNuGet2.jpg",[24,159,160],{},"Now, we are able to discover libraries which were made by other developers. We can also inject them to our own project what will save us big amount of time. Today, I would like to show an example of using Html Agility Pack to present, how we can use custom libraries. To install library, we just have to click on its name, select project in which library has to be installed and click \"Install\". We can check if our library was installed correctly by simply clicking \"Installed\" card.",[24,162,163],{},[35,164],{"alt":148,"src":165},"\u002Fimages\u002F2\u002FNuGet3.jpg",[120,167,169],{"id":168},"how-to-use-library-installed-using-nuget","How to use library installed using NuGet?",[24,171,172],{},"To use library in our solution, we just simply has to add library to list of libraries at the beginning of program:",[24,174,175],{},[35,176],{"alt":148,"src":177},"\u002Fimages\u002F2\u002FNuget4.jpg",[24,179,180],{},"In Solution Explorer window (on the right side) we have to open References and find name of our library:",[24,182,183],{},[35,184],{"alt":148,"src":185},"\u002Fimages\u002F2\u002FNuGet5.jpg",[24,187,188],{},"After double-clicking on library name, we will be able to discover all functionality provided by this library.",[24,190,191],{},"We also have to remember to add \"using LibraryName;\" as below:",[24,193,194],{},[35,195],{"alt":148,"src":196},"\u002Fimages\u002F2\u002FNuGet6.jpg",[120,198,200],{"id":199},"summary","Summary",[24,202,203,204,208],{},"In my opinion, NuGet is a basic tool which has to be known by every .NET developer. The work is way easier if we don’t have to do work which was already made by someone else. For further reading visit: ",[48,205,206],{"href":206,"rel":207},"https:\u002F\u002Fdocs.microsoft.com\u002Fen-us\u002Fnuget\u002Fwhat-is-nuget",[52]," If you have any questions, don’t hesitate to contact me.",{"title":92,"searchDepth":93,"depth":93,"links":210},[211,212,213,214],{"id":122,"depth":93,"text":123},{"id":129,"depth":93,"text":130},{"id":168,"depth":93,"text":169},{"id":199,"depth":93,"text":200},"C#",{},"\u002Farticles\u002Fhow-to-use-other-developers-work-in-own-project-nuget-package-manager",{"title":116,"description":126},"articles\u002Fhow-to-use-other-developers-work-in-own-project-nuget-package-manager",[215,221,222,223,224],"CSharp","NuGet","Package Manager","Packets","JzCfVmwgfCDqZlVWd6VSKhu2B0-4TukO_i8dGV8hGIo",{"id":227,"title":228,"body":229,"category":215,"description":326,"extension":101,"meta":327,"navigation":103,"path":328,"published":105,"seo":329,"stem":330,"tags":331,"__hash__":334},"articles\u002Farticles\u002Finheritance-family-in-programming.md","Inheritance - Family in programming",{"type":21,"value":230,"toc":320},[231,235,241,246,249,253,264,269,273,276,285,288,293,298,301,305],[120,232,234],{"id":233},"what-is-class-inheritance","What is Class Inheritance?",[24,236,237,238],{},"Class Inheritance is based on connections between parent class (superclass) and child class (subclass). The child class is able to inherit and use parents’ class (public or protected) variables and methods as the same as its own. It has few advantages like among others repetition avoidance what gives the ability to create bigger systems without making mess or easy further system development without the need to alter variables and methods trough all classes because shared instances are defined only once. ",[56,239,240],{},"Inherited Class Example:",[24,242,243],{},[35,244],{"alt":37,"src":245},"\u002Fimages\u002F3\u002F1.jpg",[24,247,248],{},"InsuredPatient class is using Patients’ class public attributes instances (Name, Age, MoneyOwed and AmountOfTreatments) and also public operations (AddTreatment and PayTheBill). The InsuredPatient subclass is extending its functionality with two variables (companyName and percentageCover) and one method (ChargeInsurance) which are accessible only from objects with type InsuredPatient.",[120,250,252],{"id":251},"how-to-create-inherited-class-structure","How to create inherited class structure?",[24,254,255,258,259,263],{},[56,256,257],{},"Generalization"," is one the processes used to create inherited class structures of extracting shared characteristics from two or more classes, and combining them into a generalized superclass ",[260,261,262],"em",{},"(Sourcemaking.com, 2017)",".",[24,265,266],{},[35,267],{"alt":37,"src":268},"\u002Fimages\u002F3\u002F2.jpg",[24,270,271],{},[260,272,262],{},[24,274,275],{},"Firstly, we have to determine which attributes are repetitive. These attributes will go to the top of the tree and will be elements of the parent class. Not-repetitive attributes will be moved to children classes.",[24,277,278,279,282,283,263],{},"In the example above, two classes (Piece of luggage and Piece of cargo) got combined into 1 superclass (Freight) and 2 subclasses. In contrast to generalization, ",[56,280,281],{},"specialization"," leads to creating new subclasses from an existing class ",[260,284,262],{},[24,286,287],{},"If some of the class attributes apply only to a group of objects, we can divide class for superclass and two or more subclasses. Specialization is inverse of generalization.",[24,289,290],{},[35,291],{"alt":37,"src":292},"\u002Fimages\u002F3\u002F3.jpg",[24,294,295],{},[260,296,297],{},"(Schardt and Chonoles, 2013)",[24,299,300],{},"If you have any questions, don't hesitate to contact me.",[28,302,304],{"id":303},"references","References",[24,306,307,308,313,314,319],{},"dzone.com. (2012). Polymorphism and Inheritance are Independent of Each Other - DZone Java. [online] Available at: ![Image](",[48,309,312],{"href":310,"rel":311},"https:\u002F\u002Fdzone.com\u002Farticles\u002Fpolymorphism-and-inheritance%22%3Ehttps:\u002F\u002Fdzone.com\u002Farticles\u002Fpolymorphism-and-inheritance",[52],"https:\u002F\u002Fdzone.com\u002Farticles\u002Fpolymorphism-and-inheritance\">https:\u002F\u002Fdzone.com\u002Farticles\u002Fpolymorphism-and-inheritance"," [Accessed 30 Oct. 2017]. Sourcemaking.com. (2017). Design Patterns and Refactoring. [online] Available at: ![Image](",[48,315,318],{"href":316,"rel":317},"https:\u002F\u002Fsourcemaking.com\u002Fuml\u002Fmodeling-it-systems\u002Fstructural-view\u002Fgeneralization-specialization-and-inheritance%22%3Ehttps:\u002F\u002Fsourcemaking.com\u002Fuml\u002Fmodeling-it-systems\u002Fstructural-view\u002Fgeneralization-specialization-and-inheritance",[52],"https:\u002F\u002Fsourcemaking.com\u002Fuml\u002Fmodeling-it-systems\u002Fstructural-view\u002Fgeneralization-specialization-and-inheritance\">https:\u002F\u002Fsourcemaking.com\u002Fuml\u002Fmodeling-it-systems\u002Fstructural-view\u002Fgeneralization-specialization-and-inheritance"," [Accessed 30 Oct. 2017].",{"title":92,"searchDepth":93,"depth":93,"links":321},[322,323],{"id":233,"depth":93,"text":234},{"id":251,"depth":93,"text":252,"children":324},[325],{"id":303,"depth":96,"text":304},"Class Inheritance is based on connections between parent class (superclass) and child class (subclass). Child class is able to inherit and use parents’ class (public or protected) variables and methods as same as its own. It has few advantages like among others repetition avoidance what gives ability to create bigger systems without making mess or easy further system development without need to alter variables and methods trough all classes because shared instances are defined only once.",{},"\u002Farticles\u002Finheritance-family-in-programming",{"title":228,"description":326},"articles\u002Finheritance-family-in-programming",[215,221,332,111,333],"Inheritance","Class Inheritance","WBEjSKXVY0y2vQQ8BYRBC9gRQv5ZqVbNXbvU1qBfpfs",{"id":336,"title":337,"body":338,"category":215,"description":349,"extension":101,"meta":582,"navigation":103,"path":583,"published":105,"seo":584,"stem":585,"tags":586,"__hash__":588},"articles\u002Farticles\u002Fserialization-how-to-save-objects-to-file.md","Serialization - how to save objects to file",{"type":21,"value":339,"toc":580},[340,343,347,350,362,365,373,375,378,381,384,387,392,395,455,494,555,561,564,567,570,577],[24,341,342],{},"In Object Oriented programming languages we are able to create new classes and create instances (objects) of these classes. These objects exists only if we construct them using constructor:",[344,345],"script",{"src":346},"https:\u002F\u002Fgist.github.com\u002Fdawidstefaniak\u002F9d539c603d169911d5f4f8485481e1d1.js",[24,348,349],{},"But this option is good only if we want to create brand new object. What if we want to save object data to file and recover it later? We can either use StreamReader or serialization!",[24,351,352,353,357,358,361],{},"According to Microsoft C# documentation: \"Serialization is the process of converting an object into a stream of bytes in order to store the object or transmit it to memory, a database, or a file.\"\nIt means that every object we create can be stored as a file and reconstructed whenever we want.\nHow to save object to file?\nThis process is easier than you expect. Let's begin with creating small class (Code available on my ",[48,354,356],{"href":355},"https:\u002F\u002Fgithub.com\u002Fdawidstefaniak\u002FSerializationExample","GitHub","):\u000b",[344,359],{"src":360},"https:\u002F\u002Fgist.github.com\u002Fdawidstefaniak\u002F839e7744f711dba2086b8e6b90162d2f.js","\nAnd create create object in main function:",[344,363],{"src":364},"https:\u002F\u002Fgist.github.com\u002Fdawidstefaniak\u002F9a2ae533bed1271e158d24587b86bc99.js",[24,366,367,368,372],{},"To save object to file, we have to:\nMark class as Serializable using ",[369,370,371],"span",{},"Seriablizable"," (it allows as to store all object of class Dog):",[344,374],{"src":360},[24,376,377],{},"Add libraries to solution:",[344,379],{"src":380},"https:\u002F\u002Fgist.github.com\u002Fdawidstefaniak\u002F9951b5238e665ef05cd1445dde77d10d.js",[24,382,383],{},"Add FileStream and BinaryFormatter objects:",[344,385],{"src":386},"https:\u002F\u002Fgist.github.com\u002Fdawidstefaniak\u002F73fd3ce015af0d7599f4669eb5c0fc98.js",[388,389,391],"h4",{"id":390},"why-do-we-have-to-use-filestream-instead-of-streamreader-or-streamwriter-classes","Why do we have to use FileStream instead of StreamReader or StreamWriter classes?",[344,393],{"src":394},"https:\u002F\u002Fgist.github.com\u002Fdawidstefaniak\u002F6f82acb2e10f0c28d49a478d77cb2114.js",[396,397,398,399],"table",{},"\n    ",[400,401,398,402,398,415,398,423,398,431,398,439,398,447,398],"tbody",{},[403,404,405,406,405,413,398],"tr",{},"\n        ",[407,408,409],"td",{},[410,411,412],"b",{},"FileMode.",[407,414],{},[403,416,405,417,405,420,398],{},[407,418,419],{},"Append",[407,421,422],{},"\n        Opens a file if it already exists and moves to the end ready to add\n        new data (if it doesn’t exist it is created)\n        ",[403,424,405,425,405,428,398],{},[407,426,427],{},"Create",[407,429,430],{},"Creates a new file or overwrites an existing one",[403,432,405,433,405,436,398],{},[407,434,435],{},"CreateNew",[407,437,438],{},"\n        Creates a new file or throws an IOException if the file already\n        exists\n        ",[403,440,405,441,405,444,398],{},[407,442,443],{},"OpenOrCreate",[407,445,446],{},"\n        Opens an existing file or creates it if it doesn’t already exist\n        ",[403,448,405,449,405,452,398],{},[407,450,451],{},"Truncate",[407,453,454],{},"\n        Opens an existing file and once opened truncates it so its size is\n        zero bytes\n        ",[396,456,398,457],{},[400,458,398,459,398,470,398,478,398,486,398],{},[403,460,405,461,405,468,398],{},[407,462,463,466],{},[410,464,465],{},"FileAccess",[410,467,263],{},[407,469],{},[403,471,405,472,405,475,398],{},[407,473,474],{},"Read",[407,476,477],{},"Data can be read from the file",[403,479,405,480,405,483,398],{},[407,481,482],{},"Write",[407,484,485],{},"Data can be written to the file",[403,487,405,488,405,491,398],{},[407,489,490],{},"ReadWrite",[407,492,493],{},"Data can be read from and written to the file",[396,495,398,496],{},[400,497,398,498,398,507,398,515,398,523,398,531,398,539,398,547,398],{},[403,499,405,500,405,505,398],{},[407,501,502],{},[410,503,504],{},"Properties",[407,506],{},[403,508,405,509,405,512,398],{},[407,510,511],{},"CanRead",[407,513,514],{},"\n        Gets a value indicating whether the FileStream supports reading\n        ",[403,516,405,517,405,520,398],{},[407,518,519],{},"CanWrite",[407,521,522],{},"Gets a value indicating whether a FileStream supports writing",[403,524,405,525,405,528,398],{},[407,526,527],{},"CanSeek",[407,529,530],{},"\n        Gets a value indicating whether the FileStream supports seeking\n        (moving to a specified position)\n        ",[403,532,405,533,405,536,398],{},[407,534,535],{},"Length",[407,537,538],{},"Gets the length of the FileStream in bytes",[403,540,405,541,405,544,398],{},[407,542,543],{},"Name",[407,545,546],{},"Gets the name of the FileStream",[403,548,405,549,405,552,398],{},[407,550,551],{},"Position",[407,553,554],{},"Gets or sets the current position of the FileStream",[24,556,557,560],{},[56,558,559],{},"BinaryFormatter"," on the other hand is one of the classes which give us ability to change our object to actual saveable data. The object of this class is taking the FileStream object and object which has to be serialized as its parameters.",[24,562,563],{},"Let's see how the code looks like after adding these objects:",[344,565],{"src":566},"https:\u002F\u002Fgist.github.com\u002Fdawidstefaniak\u002F27391acc97663a456ded3c99d52fcca3.js",[24,568,569],{},"As you probably noticed, you can use the same using(){} method as you can use with StreamReader and StreamWriter classes. If you don't use them, remember to always use .Close() method to close Stream connection. Please mind, that we can also use serialization with arrays.",[24,571,572,573,263],{},"These are just few of the results which we can receive using serialization. For more please visit ",[48,574,576],{"href":575},"https:\u002F\u002Fdocs.microsoft.com\u002Fen-us\u002Fdotnet\u002Fcsharp\u002Fprogramming-guide\u002Fconcepts\u002Fserialization\u002F","Microsoft Webiste",[24,578,579],{},"That's all for now. If you have any questions don't hesitate to contact me!",{"title":92,"searchDepth":93,"depth":93,"links":581},[],{},"\u002Farticles\u002Fserialization-how-to-save-objects-to-file",{"title":337,"description":349},"articles\u002Fserialization-how-to-save-objects-to-file",[215,221,587],"Serialization","VaHE5bvdxBDTMziS8McQMpPDajj26coYhXLcCjKuKyY",{"id":590,"title":591,"body":592,"category":602,"description":963,"extension":101,"meta":964,"navigation":103,"path":965,"published":105,"seo":966,"stem":967,"tags":968,"__hash__":972},"articles\u002Farticles\u002Fstart-with-docker-1-from-development-to-release-in-seconds.md","Start with Docker part 1 - From Development to Release in Seconds",{"type":21,"value":593,"toc":953},[594,598,608,612,637,641,674,678,685,691,699,760,765,769,814,818,836,840,859,862,865,870,877,880,885,896,901,911,915,922,926],[28,595,597],{"id":596},"what-is-docker","What is Docker",[24,599,600,603,604,607],{},[56,601,602],{},"Docker"," is a tool allowing us to build Containers with a pre-configured environment which can run on every computer with Docker installed. Docker uses special dockerfile which contains a list of commands to execute by the new container, and finally, run our ",[56,605,606],{},"application"," in precise the same environment among all our machines.",[28,609,611],{"id":610},"sample-usage","Sample usage",[24,613,614,615,618,619,622,623,626,627,630,631,630,634,636],{},"Let's imagine that you are ",[56,616,617],{},"hosting a web application"," with external database. Think about the time you have to spend on moving the application from your developer machine to the server. You are ",[56,620,621],{},"never sure"," that all versions of dependencies and frameworks on your development machine will fit the server machine. What is more, you also have to spend lots of time on the configuration of the server machine to ",[56,624,625],{},"fit the requirements",". Maybe your client will ask you to present the product but you are not sure that it will work on his computer. Those problems and much more will be ",[56,628,629],{},"solved"," ",[56,632,633],{},"with",[56,635,602],{},"!",[28,638,640],{"id":639},"some-history","Some history",[24,642,643,646,647,650,651,654,655,658,659,662,663,666,667,670,671,263],{},[56,644,645],{},"Docker Inc."," is a company built on the Docker project with more than a ",[56,648,649],{},"500 employees",", based in ",[56,652,653],{},"San Francisco",", California. The company was funded as ",[56,656,657],{},"dotCloud"," in 2010 and renamed to Docker in 2013. The year ",[56,660,661],{},"2014"," was the most successful for Docker when they announced a ",[56,664,665],{},"partnership with Microsoft"," and their services started being supported by ",[56,668,669],{},"Amazon Elastic Compute Cloud",". Docker is priced at around ",[56,672,673],{},"1B$",[28,675,677],{"id":676},"how-does-docker-work","How does Docker work",[24,679,680,681,684],{},"Understanding the way how Docker works is ",[56,682,683],{},"crucial"," to start using it in a real project.",[24,686,687],{},[35,688],{"alt":689,"src":690},"Docker Screenshot","\u002Fimages\u002F5\u002Fdocker1.png",[388,692,694,695,698],{"id":693},"there-are-few-new-concepts-which-you-have-to-get-familiar-before-starting","There are few new concepts which you have to ",[56,696,697],{},"get familiar before starting",":",[700,701,702,730],"ul",{},[138,703,704,708,709,712,713,716,717,720,721,724,725,263],{},[260,705,706],{},[56,707,37],{}," is a ",[56,710,711],{},"lightweight environment"," prepared to run using as fewer resources as possible. Images are usually ",[56,714,715],{},"based on Linux",". The Images can be associated with ",[56,718,719],{},"Virtual Machines"," which ",[56,722,723],{},"are relatively similar",", despite they use more computer resources and work in a bit different way. If you want to read about differences between them, click ",[48,726,729],{"href":727,"rel":728},"http:\u002F\u002Fwww.electronicdesign.com\u002Fdev-tools\u002Fwhat-s-difference-between-containers-and-virtual-machines",[52],"here",[138,731,732,708,737,740,741,744,745,747,748,751,752,755,756,759],{},[260,733,734],{},[56,735,736],{},"Container",[56,738,739],{},"running instance of the image",". A container can run a few environments at the same time, but ",[56,742,743],{},"its recommended to divide your application into smaller environments"," to make them work independently and to ease the process of updating the software. The ",[56,746,736],{}," is connected straight-forward to the ",[56,749,750],{},"Kernel"," and use its resources in ",[56,753,754],{},"the most effective possible way",". One computer can run ",[56,757,758],{},"many containers"," at the same time.",[24,761,762],{},[35,763],{"alt":689,"src":764},"\u002Fimages\u002F5\u002Fdocker2.jpg",[388,766,768],{"id":767},"the-easiest-way-of-dividing-architecture-of-docker-is-to-divide-it-into-three-parts","The easiest way of dividing architecture of Docker is to divide it into three parts:",[700,770,771,785,798],{},[138,772,773,776,777,780,781,784],{},[56,774,775],{},"Client-side"," is responsible for ",[56,778,779],{},"sending commands to the host",". Most often, the user uses commands to communicate with the daemon. The client can use special ",[56,782,783],{},"Dockerfile"," which is allowing him to pre-configure the environment by giving a list of commands to execute and list of images to pull from the hub. Dockerfile is a recipe for our perfect environment.",[138,786,787,776,790,793,794,797],{},[56,788,789],{},"Host-side",[56,791,792],{},"handling user requests",". It also builds and hosts the containers, pulls the images from the cloud and makes sure, that all the files are accessible. Daemon is ",[56,795,796],{},"building a new image"," using pre-defined DockerFile.",[138,799,800,803,804,807,808,813],{},[56,801,802],{},"Registry"," which is a ",[56,805,806],{},"catalogue of the images"," stored in a cloud. The daemon can pull images from a public Docker cloud. We can explore it using ",[48,809,812],{"href":810,"rel":811},"https:\u002F\u002Fhub.docker.com\u002Fexplore\u002F",[52],"this"," link. Docker hub hosts images of eg. Ubuntu, node, MySQL, .NET Core and others.",[28,815,817],{"id":816},"before-we-start","Before we start",[24,819,820,821,824,825,828,829,832,833,263],{},"Before we start with our first example, ",[56,822,823],{},"make sure that Docker is installed on your machine",". All Community Edition (CE) versions are available to download ",[48,826,729],{"href":810,"rel":827},[52]," including Windows, Mac and Linux. ",[56,830,831],{},"NOTE:"," In terms of this tutorial, ",[56,834,835],{},"do not use Windows containers",[28,837,839],{"id":838},"first-docker-container","First Docker Container",[24,841,842,843,846,847,851,852,855,856,698],{},"The first container we create will be ",[56,844,845],{},"C# application based on .NET Core 2.1",". We can easily browse all images of .NET Core on the ",[48,848,850],{"href":810,"rel":849},[52],"official docker hub website",". Let's start by checking if our environment is configured correctly. To do this, ",[56,853,854],{},"open the Console"," (Windows cmd.exe) ",[56,857,858],{},"and type",[344,860],{"src":861},"https:\u002F\u002Fgist.github.com\u002Fdawidstefaniak\u002F2ad53aa7a38404d17ccc9c6f9539d6f2.js",[24,863,864],{},"The output should look similar to this:",[24,866,867],{},[35,868],{"alt":689,"src":869},"\u002Fimages\u002F5\u002Fdocker3.png",[24,871,872,873,876],{},"Docker should ",[56,874,875],{},"automatically pull"," our repository from the cloud. \u000bWe can check if our image was correctly pulled using:",[344,878],{"src":879},"https:\u002F\u002Fgist.github.com\u002Fdawidstefaniak\u002Fcc0990aa635bbc46826d6c2630e77b8a.js",[24,881,882],{},[35,883],{"alt":689,"src":884},"\u002Fimages\u002F5\u002Fdocker4.png",[24,886,887,888,891,892,895],{},"As we can see, our image was pulled correctly. To start a new container, we have to ",[56,889,890],{},"run our image",". The most recommended way to start the container is to run the image using its IMAGE ID. In my example, it will be ",[260,893,894],{},"1eae85b77c3f",". The output should be similar to this:",[24,897,898],{},[35,899],{"alt":689,"src":900},"\u002Fimages\u002F5\u002Fdocker5.png",[24,902,903,904,907,908,263],{},"It means that our Hello World .NET Core program ",[56,905,906],{},"executed correctly"," and our environment is working properly. On the bottom of the output, we can see, that our platform was ",[56,909,910],{},".NET Core",[28,912,914],{"id":913},"next-steps","Next Steps",[24,916,917,918,921],{},"In the ",[56,919,920],{},"next Tutorial",", I will give you an overview of how to create your own container and execute your own .NET Core console application.",[28,923,925],{"id":924},"resources-and-further-reading","Resources and further reading:",[24,927,928,933,938,943,948],{},[48,929,932],{"href":930,"rel":931},"http:\u002F\u002Fdocs.geonode.org\u002Fen\u002Fmaster\u002Ftutorials\u002Finstall_and_admin\u002Frunning_docker\u002Fsetup_docker.html",[52],"Setup",[48,934,937],{"href":935,"rel":936},"https:\u002F\u002Fdocs.docker.com\u002Fengine\u002Fdocker-overview\u002F#docker-architecture",[52],"Official docks",[48,939,942],{"href":940,"rel":941},"https:\u002F\u002Fnordicapis.com",[52],"NordicApis Website",[48,944,947],{"href":945,"rel":946},"https:\u002F\u002Fwww.linux.com\u002Fwhat-is-linux",[52],"What is Linux",[48,949,952],{"href":950,"rel":951},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FDocker,_Inc",[52],"Wikipedia",{"title":92,"searchDepth":93,"depth":93,"links":954},[955,956,957,958,959,960,961,962],{"id":596,"depth":96,"text":597},{"id":610,"depth":96,"text":611},{"id":639,"depth":96,"text":640},{"id":676,"depth":96,"text":677},{"id":816,"depth":96,"text":817},{"id":838,"depth":96,"text":839},{"id":913,"depth":96,"text":914},{"id":924,"depth":96,"text":925},"Docker is a tool allowing us to build Containers with a pre-configured environment which can run on every computer with Docker installed. Docker uses special dockerfile which contains a list of commands to execute by the new container, and finally, run our \u003Cstrong>application\u003C\u002Fstrong> in precise the same environment among all our machines.",{},"\u002Farticles\u002Fstart-with-docker-1-from-development-to-release-in-seconds",{"title":591,"description":963},"articles\u002Fstart-with-docker-1-from-development-to-release-in-seconds",[602,969,970,971,783],"DevOps","Containers","Dockercompose","QMCG-ud8Ade2y3M2u7kCa_0yqxh6UK0BrZb4KFG6zfc",{"id":974,"title":975,"body":976,"category":602,"description":1488,"extension":101,"meta":1489,"navigation":103,"path":1490,"published":105,"seo":1491,"stem":1492,"tags":1493,"__hash__":1494},"articles\u002Farticles\u002Fstart-with-docker-2-first-dot-net-core-container.md","Start with Docker part 2 - First .NET Core Container",{"type":21,"value":977,"toc":1476},[978,982,1001,1005,1029,1033,1075,1079,1097,1103,1121,1125,1189,1194,1208,1212,1256,1261,1268,1342,1349,1352,1356,1365,1368,1380,1398,1405,1410,1424,1429,1431,1460,1464],[120,979,981],{"id":980},"small-review","Small Review",[24,983,917,984,989,990,993,994,997,998,1000],{},[48,985,988],{"href":986,"rel":987},"https:\u002F\u002Fblog.dawidstefaniak.com\u002Fprofessional\u002Fdocker\u002Fstart-with-docker\u002F",[52],"previous tutorial",", we learned ",[56,991,992],{},"basic concepts"," of working with Docker. This tutorial will focus on creating and deploying basic console ",[56,995,996],{},".NET Core 2.1 application"," into the ",[56,999,602],{}," container. We will also try to interact with our new container sending some stdin to it.",[120,1002,1004],{"id":1003},"lets-prepare","Let's prepare!",[24,1006,1007,1008,1011,1012,1015,1016,1019,1020,1025,1026,263],{},"Through the whole tutorial, I will be using ",[56,1009,1010],{},"Visual Studio Code"," as a code editor. Let's create a new project called ",[56,1013,1014],{},"\"DockerTutorial1.1\"",". To create ",[56,1017,1018],{},"new C# .NET Core 2.1"," project in Visual Studio code, simply ",[48,1021,1024],{"href":1022,"rel":1023},"https:\u002F\u002Fdocs.microsoft.com\u002Fen-us\u002Fdotnet\u002Fcore\u002Ftutorials\u002Fwith-visual-studio-code",[52],"follow the tutorial",". If you are using Visual Studio for Windows, Create new .NET Core Console Application. To check if our project uses .NET Core 2.1, ",[56,1027,1028],{},"open DockerTutorial1.1.csproj",[28,1030,1032],{"id":1031},"in-visual-studio-for-windows","In Visual Studio for Windows:",[135,1034,1035,1044,1054],{},[138,1036,1037,1040,1041],{},[56,1038,1039],{},"Right click"," on your project in solution explorer and select ",[56,1042,1043],{},"Unload Project",[138,1045,1046,1049,1050,1053],{},[56,1047,1048],{},"Right-click"," on the project (tagged as unavailable in solution explorer) and click ",[56,1051,1052],{},"\"Edit DockerTutorial1.1.csproj\"",". This will open up your CSPROJ file for editing.",[138,1055,1056,1059,1060,1063,1064,1067,1068,1070,1071,1074],{},[56,1057,1058],{},"After making"," any ",[56,1061,1062],{},"changes"," you want, ",[56,1065,1066],{},"save"," and close the file. ",[56,1069,1048],{}," again on the node and choose ",[56,1072,1073],{},"Reload Project"," when done.",[28,1076,1078],{"id":1077},"in-visual-studio-code","In Visual Studio Code:",[24,1080,1081,1084,1085,1088,1089,1092,1093,1096],{},[56,1082,1083],{},"Click"," on ",[56,1086,1087],{},"DockerTutorial1.1.csproj"," in the ",[56,1090,1091],{},"Explorer",". The ",[56,1094,1095],{},"output"," should be similar to that:",[24,1098,1099],{},[35,1100],{"alt":1101,"src":1102},"Docker Tutorial 2","\u002Fimages\u002F6\u002Fdocker2.1.png",[24,1104,1105,1106,1109,1110,1113,1114,1117,1118],{},"If ",[56,1107,1108],{},"TargetFramework"," is pointing to the version ",[56,1111,1112],{},"2.1 of .NET Core",", you are on the right way. If it's not, just simply change the version to 2.1 and use ",[88,1115,1116],{},"dotnet restore"," command. ",[88,1119,1120],{},"NOTE: Remember to [install .NET Core 2.1 SDK](https:\u002F\u002Fwww.microsoft.com\u002Fnet\u002Fdownload\u002Fwindows) before starting",[120,1122,1124],{"id":1123},"create-the-solution","Create the Solution",[24,1126,1127,1128,1131,1132,630,1135,1138,1139,1142,1143,1146,1147,1150,1151,1154,1155,1158,1159,1150,1162,1165,1166,1169,1170,1173,1174,1177,1178,1181,1182],{},"Let's create ",[56,1129,1130],{},".NET Core Console Application"," and run it in our System. The solution which we will prepare is quite small and it will have basic functionality like ",[56,1133,1134],{},"printing few strings",[56,1136,1137],{},"of text"," and ",[56,1140,1141],{},"get some input"," from the user. Let's make our application ",[56,1144,1145],{},"print \"Hello\""," with the name taken from stdin and also ",[56,1148,1149],{},"print out"," the ",[56,1152,1153],{},"name"," of the ",[56,1156,1157],{},"environment"," to be sure that our solution is actually ",[56,1160,1161],{},"running on",[56,1163,1164],{},"Linux"," environment. Use ",[88,1167,1168],{},"dotnet run"," command to ",[56,1171,1172],{},"start"," the project in Visual Studio Code. In Visual Studio just simply click the ",[56,1175,1176],{},"run button",". The actual output can be seen in the picture below. Remember to ",[56,1179,1180],{},"always save"," the file before using dotnet run command. ",[56,1183,1184,1185,263],{},"The project used in this example will be available on my ",[48,1186,356],{"href":1187,"rel":1188},"https:\u002F\u002Fgithub.com\u002Fdawidstefaniak\u002FDockerTutorial1.1",[52],[24,1190,1191],{},[35,1192],{"alt":1101,"src":1193},"\u002Fimages\u002F6\u002Fdocker2.2.png",[24,1195,1196,1197,1200,1201,1204,1205],{},"In my case, ",[56,1198,1199],{},"MacOS"," is using Unix command line hence my OSVersion is ",[56,1202,1203],{},"Unix 17.6.0.0"," but in your case, it will probably show something ",[56,1206,1207],{},"different.",[120,1209,1211],{"id":1210},"create-dockerfile","Create Dockerfile",[24,1213,1214,1216,1217,1220,1221,1224,1225,1228,1229,1232,1233,1236,1237,1240,1241,1244,1245,1247,1248,1251,1252,1255],{},[56,1215,783],{}," is a special file which gives our docker ",[56,1218,1219],{},"list of the instructions"," containing names of the images which will be used to ",[56,1222,1223],{},"create our container"," and also a list of the commands to ",[56,1226,1227],{},"run inside the container"," after creation. To create new Docker Image firstly, we have to ",[56,1230,1231],{},"create a new file"," in the solution folder named ",[56,1234,1235],{},"dockerfile"," (without any extension). To do it, ",[56,1238,1239],{},"right-click on the solution",", click ",[56,1242,1243],{},"add file"," and name it ",[56,1246,1235],{},". If you have ",[56,1249,1250],{},"Docker extension"," installed in VSCode (I highly recommend to do it), after opening the dockerfile, you will be able to see a nice small ",[56,1253,1254],{},"docker logo"," next to the file name.",[24,1257,1258],{},[35,1259],{"alt":1101,"src":1260},"\u002Fimages\u002F6\u002Fdocker2.3.png",[388,1262,1264,1265,698],{"id":1263},"to-create-proper-dockerfile-we-have-to-learn-few-basic-commands","To create proper dockerfile we have to learn few basic ",[56,1266,1267],{},"commands",[700,1269,1270,1289,1299,1324,1336],{},[138,1271,1272,1277,1278,1281,1282,1285,1286],{},[56,1273,1274],{},[88,1275,1276],{},"FROM"," which is ",[56,1279,1280],{},"pointing on the image we want to use"," to create a new image. In our case, we will use ",[88,1283,1284],{},"microsoft\u002Fdotnet:2.1.300-sdk-stretch"," image which will give us the ability to build and run .NET Core 2.1 applications. ",[260,1287,1288],{},"NOTE: This image is not appropriate for ASP.NET Core 2.1 Applications.",[138,1290,1291,1277,1296,263],{},[56,1292,1293],{},[88,1294,1295],{},"WORKDIR",[56,1297,1298],{},"changing the current directory to another",[138,1300,1301,720,1309,1315,1316,1319,1320,1323],{},[56,1302,1303,630,1306],{},[88,1304,1305],{},"COPY",[88,1307,1308],{},"arg1 arg2",[56,1310,1311,1312],{},"copies a file or whole directory from ",[88,1313,1314],{},"arg1"," which is our computer ",[56,1317,1318],{},"to arg2"," which is the directory inside the container. ",[56,1321,1322],{},"You can use"," '*' and '.' characters to select files with particular name or extension.",[138,1325,1326,1331,1332,1335],{},[56,1327,1328],{},[88,1329,1330],{},"RUN"," is ",[56,1333,1334],{},"running command inside the container"," (in containers' terminal)",[138,1337,1338,1341],{},[88,1339,1340],{},"**ENTRYPOINT**"," is pointing the file which has to be run when you start your container",[24,1343,1344,1345,1348],{},"Our ",[56,1346,1347],{},"final dockerfile"," should look as follow:",[344,1350],{"src":1351},"https:\u002F\u002Fgist.github.com\u002Fdawidstefaniak\u002Ff7eebb79a26fd42b2b5ce9cf94e8743d.js",[120,1353,1355],{"id":1354},"starting-new-docker-container","Starting new Docker Container",[24,1357,1358,1359,1138,1362,263],{},"If our dockerfile is correctly formatted, we will be able to ",[56,1360,1361],{},"build the image",[56,1363,1364],{},"run a new container",[344,1366],{"src":1367},"https:\u002F\u002Fgist.github.com\u002Fdawidstefaniak\u002F4bbb821d1c7bdf6092f2db98714f4483.js",[24,1369,1370,1371,1374,1375],{},"The ",[56,1372,1373],{},"naming convention"," for the docker image is ",[56,1376,1377],{},[260,1378,1379],{},"-creator-\u002F-name-: -tag-",[700,1381,1382],{},[138,1383,1384,1389,1390,1393,1394,1397],{},[260,1385,1386],{},[56,1387,1388],{},"-it"," option gives information that our container will run in ",[56,1391,1392],{},"interactive mode",", what means that ",[56,1395,1396],{},"we can interact with our container"," using a terminal. Without using this option, our container will not react to any input from the user.",[24,1399,1400,1401,1404],{},"If everything went properly, we will be able to ",[56,1402,1403],{},"run"," our program in the container as same as we run it on our own computer.",[24,1406,1407],{},[35,1408],{"alt":1101,"src":1409},"\u002Fimages\u002F6\u002Fdocker2.4.png",[24,1411,1412,1415,1416,1419,1420,1423],{},[56,1413,1414],{},"The output"," displayed above presents that the version of Unix is 4.9.87.0 what means that ",[56,1417,1418],{},"our application is running inside the container",". To check a list of the images, we can use ",[260,1421,1422],{},"docker images"," command.",[24,1425,1426],{},[35,1427],{"alt":1101,"src":1428},"\u002Fimages\u002F6\u002Fdocker2.5.png",[120,1430,200],{"id":199},[24,1432,1433,1434,1437,1438,1441,1442,1444,1445,1448,1449,1452,1453,1456,1457,263],{},"Docker is an ",[56,1435,1436],{},"awesome tool"," providing the environment for our strict needs which can be easily personalized. ",[56,1439,1440],{},"Everyone"," can use the same dockerfile to reconstruct exactly the same environment on every computer with ",[56,1443,602],{}," installed. In the ",[56,1446,1447],{},"next tutorial",", I will make you familiar with ",[260,1450,1451],{},"ASP.NET Core 2.1"," applications running in Docker showing basic usage of ",[56,1454,1455],{},"porting"," and explanation how to create ",[56,1458,1459],{},".yaml configuration files",[120,1461,1463],{"id":1462},"references-and-further-reading","References and further reading:",[24,1465,1466,1471],{},[48,1467,1470],{"href":1468,"rel":1469},"https:\u002F\u002Fstackoverflow.com\u002Fquestions\u002F5129090\u002Fhow-to-edit-csproj-file",[52],"Editing csproj",[48,1472,1475],{"href":1473,"rel":1474},"https:\u002F\u002Fdocs.docker.com\u002Fengine\u002Freference\u002Fcommandline\u002Fdocker\u002F#child-commands",[52],"Docker commands",{"title":92,"searchDepth":93,"depth":93,"links":1477},[1478,1479,1483,1484,1485,1486,1487],{"id":980,"depth":93,"text":981},{"id":1003,"depth":93,"text":1004,"children":1480},[1481,1482],{"id":1031,"depth":96,"text":1032},{"id":1077,"depth":96,"text":1078},{"id":1123,"depth":93,"text":1124},{"id":1210,"depth":93,"text":1211},{"id":1354,"depth":93,"text":1355},{"id":199,"depth":93,"text":200},{"id":1462,"depth":93,"text":1463},"In the previous tutorial, we learned basic concepts of working with Docker. This tutorial will focus on creating and deploying basic console .NET Core 2.1 application into the Docker container. We will also try to interact with our new container sending some stdin to it.",{},"\u002Farticles\u002Fstart-with-docker-2-first-dot-net-core-container",{"title":975,"description":1488},"articles\u002Fstart-with-docker-2-first-dot-net-core-container",[602,969,970,971,783,910],"J0JTvqJ-3O4PKJuuOlX_OKVu0nGZuA0wit8B_U60598",{"id":1496,"title":1497,"body":1498,"category":2305,"description":1502,"extension":101,"meta":2306,"navigation":103,"path":2307,"published":105,"seo":2308,"stem":2309,"tags":2310,"__hash__":2313},"articles\u002Farticles\u002Fgetting-started-with-vue-js.md","Vue.js - Getting Started",{"type":21,"value":1499,"toc":2294},[1500,1503,1507,1521,1525,1532,1535,1538,1545,1547,1550,1582,1586,1589,1596,1602,1605,1644,1647,1813,1816,1819,1825,1831,1837,1844,1859,1865,1868,1883,1894,1900,1905,1908,1914,1920,1926,1933,1939,1949,1955,1977,1983,1987,1994,2009,2053,2062,2067,2074,2085,2088,2094,2199,2206,2215,2221,2226,2232,2235,2240,2243,2246,2252,2258,2263,2267,2275,2281,2290],[24,1501,1502],{},"This article will focus on Getting Started with Vue.js, what is Vue.js and why is it amazing tool for the current development process. Having many other tools, why is it better to use Vue.js instead?",[120,1504,1506],{"id":1505},"what-is-vuejs","What is Vue.js?",[24,1508,1509,1510,1138,1513,1516,1517,1520],{},"Vue is a JavaScript framework created to build user interfaces in more ",[260,1511,1512],{},"organised",[260,1514,1515],{},"simplier"," way than using pure JavaScript on our page. Vue is a modular framework, which divides our website into smaller, reusable elements.\nVue focuses on the ",[260,1518,1519],{},"View Layer"," of the web applications and allow user to easily integrate additional js libraries as well as import plugins created particularly for Vue. Vue can be used only in particular parts of the system (Single-Page Applications), as well as a core of the bigger projects.",[120,1522,1524],{"id":1523},"why-vue","Why Vue?",[24,1526,1527,1528,1531],{},"It is always great to listen to people feedback! Vue is one of the highest starred repositories on GitHub with over 146 ",[260,1529,1530],{},"thousand"," stars at the moment. People point out, that Vue is easy to learn and also can be easily implemented in already working web applications.",[24,1533,1534],{},"Vue itself focuses on creating an easy to understand the environment for the frontend developers and giving them tools to expand the functionality of their web-applications.",[24,1536,1537],{},"Vue ecosystem consists of tools which simplify the development of the app. This includes vue-router to create single-page application routing, vuex to manage states in large-scale applications, vue-CLI to scaffold the project an amazing devtools which are installed and used on google chrome.",[24,1539,1540,1541,263],{},"You can find more information ",[48,1542,729],{"href":1543,"rel":1544},"https:\u002F\u002Fgithub.com\u002Fvuejs\u002Fvue#ecosystem",[52],[120,1546,817],{"id":816},[24,1548,1549],{},"To start comfortably with Vue.js, *we have to *install a set of tools:",[700,1551,1552,1561,1572],{},[138,1553,1554,1556,1557,1560],{},[260,1555,1010],{}," + ",[260,1558,1559],{},"Vetur"," extension (this will allow us to see the syntax and some code      snippets)",[138,1562,1563,1566,1567,1571],{},[260,1564,1565],{},"Node.js"," (",[48,1568,1569],{"href":1569,"rel":1570},"https:\u002F\u002Fnodejs.org\u002Fen\u002F",[52],")",[138,1573,1574,1577,1578,1581],{},[260,1575,1576],{},"Vue-CLI"," (use ",[88,1579,1580],{},"npm install -g @vue\u002Fcli"," command which will work if you have Node.js installed)",[120,1583,1585],{"id":1584},"get-started-with-vuejs","Get Started with Vue.js",[24,1587,1588],{},"To make you familiar with Vue.js, we will create a small web application which will change the colour of the text on the button click.",[24,1590,1591,1592,1595],{},"Firstly, we have to create a new folder for our application. Let's call it getting-started-vue. Inside this folder, create a new file and call it ",[88,1593,1594],{},"index.html",". Then open the Visual Studio Code and open this folder and select index.html. In index.html write *html:5 *and click enter. This will scaffold a basic HTML template.",[24,1597,1598],{},[35,1599],{"alt":1600,"src":1601},"Vue.js in Visual Studio Code","\u002Fimages\u002F7\u002F1.png",[24,1603,1604],{},"Now we have to import Vue.js. Simply add this line between header:",[1606,1607,1611],"pre",{"className":1608,"code":1609,"language":1610,"meta":92,"style":92},"language-js shiki shiki-themes github-light github-dark","\u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fvue\u002Fdist\u002Fvue.js\">\u003C\u002Fscript>\n","js",[88,1612,1613],{"__ignoreMap":92},[369,1614,1617,1621,1624,1628,1632,1636,1639,1641],{"class":1615,"line":1616},"line",1,[369,1618,1620],{"class":1619},"sVt8B","\u003C",[369,1622,344],{"class":1623},"s9eBZ",[369,1625,1627],{"class":1626},"sScJk"," src",[369,1629,1631],{"class":1630},"szBVR","=",[369,1633,1635],{"class":1634},"sZZnC","\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fvue\u002Fdist\u002Fvue.js\"",[369,1637,1638],{"class":1619},">\u003C\u002F",[369,1640,344],{"class":1623},[369,1642,1643],{"class":1619},">\n",[24,1645,1646],{},"Now we are ready to create the first line of code. To start off, replace the whole body tag with the following:",[1606,1648,1652],{"className":1649,"code":1650,"language":1651,"meta":92,"style":92},"language-html shiki shiki-themes github-light github-dark","\u003Cbody>\n  \u003Cdiv id=\"app\">\n    \u003Ch1>{{message}}\u003C\u002Fh1>\n  \u003C\u002Fdiv>\n\u003C\u002Fbody>\n\u003Cscript>\n  var app = new Vue({\n    el: '#app',\n    data() {\n      return {\n        message: 'Hello Vue!',\n      }\n    },\n  })\n\u003C\u002Fscript>\n","html",[88,1653,1654,1663,1681,1696,1706,1716,1725,1745,1757,1766,1775,1786,1792,1798,1804],{"__ignoreMap":92},[369,1655,1656,1658,1661],{"class":1615,"line":1616},[369,1657,1620],{"class":1619},[369,1659,1660],{"class":1623},"body",[369,1662,1643],{"class":1619},[369,1664,1665,1668,1671,1674,1676,1679],{"class":1615,"line":93},[369,1666,1667],{"class":1619},"  \u003C",[369,1669,1670],{"class":1623},"div",[369,1672,1673],{"class":1626}," id",[369,1675,1631],{"class":1619},[369,1677,1678],{"class":1634},"\"app\"",[369,1680,1643],{"class":1619},[369,1682,1683,1686,1689,1692,1694],{"class":1615,"line":96},[369,1684,1685],{"class":1619},"    \u003C",[369,1687,1688],{"class":1623},"h1",[369,1690,1691],{"class":1619},">{{message}}\u003C\u002F",[369,1693,1688],{"class":1623},[369,1695,1643],{"class":1619},[369,1697,1699,1702,1704],{"class":1615,"line":1698},4,[369,1700,1701],{"class":1619},"  \u003C\u002F",[369,1703,1670],{"class":1623},[369,1705,1643],{"class":1619},[369,1707,1709,1712,1714],{"class":1615,"line":1708},5,[369,1710,1711],{"class":1619},"\u003C\u002F",[369,1713,1660],{"class":1623},[369,1715,1643],{"class":1619},[369,1717,1719,1721,1723],{"class":1615,"line":1718},6,[369,1720,1620],{"class":1619},[369,1722,344],{"class":1623},[369,1724,1643],{"class":1619},[369,1726,1728,1731,1734,1736,1739,1742],{"class":1615,"line":1727},7,[369,1729,1730],{"class":1630},"  var",[369,1732,1733],{"class":1619}," app ",[369,1735,1631],{"class":1630},[369,1737,1738],{"class":1630}," new",[369,1740,1741],{"class":1626}," Vue",[369,1743,1744],{"class":1619},"({\n",[369,1746,1748,1751,1754],{"class":1615,"line":1747},8,[369,1749,1750],{"class":1619},"    el: ",[369,1752,1753],{"class":1634},"'#app'",[369,1755,1756],{"class":1619},",\n",[369,1758,1760,1763],{"class":1615,"line":1759},9,[369,1761,1762],{"class":1626},"    data",[369,1764,1765],{"class":1619},"() {\n",[369,1767,1769,1772],{"class":1615,"line":1768},10,[369,1770,1771],{"class":1630},"      return",[369,1773,1774],{"class":1619}," {\n",[369,1776,1778,1781,1784],{"class":1615,"line":1777},11,[369,1779,1780],{"class":1619},"        message: ",[369,1782,1783],{"class":1634},"'Hello Vue!'",[369,1785,1756],{"class":1619},[369,1787,1789],{"class":1615,"line":1788},12,[369,1790,1791],{"class":1619},"      }\n",[369,1793,1795],{"class":1615,"line":1794},13,[369,1796,1797],{"class":1619},"    },\n",[369,1799,1801],{"class":1615,"line":1800},14,[369,1802,1803],{"class":1619},"  })\n",[369,1805,1807,1809,1811],{"class":1615,"line":1806},15,[369,1808,1711],{"class":1619},[369,1810,344],{"class":1623},[369,1812,1643],{"class":1619},[24,1814,1815],{},"Please remember, that data is a function which returns the data.",[24,1817,1818],{},"Script tag will create an instance of Vue. The full code should look as follow:",[24,1820,1821],{},[35,1822],{"alt":1823,"src":1824},"Visual Studio Code basic HTML","\u002Fimages\u002F7\u002F2.png",[24,1826,1370,1827,1830],{},[88,1828,1829],{},"el"," attribute has to point on the div element between which the web application is created. This will allow us to reactively bind different Vue elements to the view.",[24,1832,1370,1833,1836],{},[88,1834,1835],{},"data"," attribute will store the variables which then we can use in our HTML DOM. The simplest way to use them is to surround the variable with double curly braces as we did in this example.",[24,1838,1839,1840,1843],{},"The easiest way to run our app is by starting an HTTP server. We can do it using a serve package. We can install it by writing  ",[88,1841,1842],{},"*npm install serve -g *"," in the console.",[24,1845,1846,1847,1850,1851,1854,1855,1571],{},"Visual Studio Code has a built-in console. We can open it by clicking  ",[88,1848,1849],{},"View-> Terminal "," on the top. The terminal will be open on the same folder as we are in in the Visual Studio. To run our server, we can simply write * ",[88,1852,1853],{},"serve ","* command to start the HTML server. Open Google Chrome and open the link shown in the terminal (default one is ",[48,1856,1857],{"href":1857,"rel":1858},"http:\u002F\u002Flocalhost:5000",[52],[24,1860,1861],{},[35,1862],{"alt":1863,"src":1864},"Hello Vue! Website","\u002Fimages\u002F7\u002F3.png",[24,1866,1867],{},"*Hooray! *Now we are able to see our first Vue application.",[24,1869,1870,1871,1874,1875,1878,1879,263],{},"Let's move to the ",[260,1872,1873],{},"Vue devtools",", which are ",[260,1876,1877],{},"extremely"," useful when we start creating our Vue applications. You can download them from Chrome Web Store ",[48,1880,729],{"href":1881,"rel":1882},"https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fvuejs-devtools\u002Fnhdogjmejiglipccpnnnanhbledajbpd?hl=en",[52],[24,1884,1885,1886,1889,1890,1893],{},"After the installation, ",[260,1887,1888],{},"click on the Vue icon"," on the top bar. This should show the information that ",[260,1891,1892],{},"Vue.js was detected",", and the colour of the icon should change from grey to green.",[24,1895,1896],{},[35,1897],{"alt":1898,"src":1899},"Vue.js detected","\u002Fimages\u002F7\u002F4.png",[24,1901,1902],{},[56,1903,1904],{},"If you don’t see Vue icon, make sure that Vue.js chrome-extension is properly installed and your active tab is the Vue app.",[24,1906,1907],{},"To open devtools, click on three dots on the top right corner of the window then More Tools -> Developer Tools.",[24,1909,1910],{},[35,1911],{"alt":1912,"src":1913},"Chrome open Developer Tools","\u002Fimages\u002F7\u002F5.png",[24,1915,1916,1917,263],{},"We will be welcomed with a kind message in the console that ",[260,1918,1919],{},"Vue is running in the development mode",[24,1921,1922],{},[35,1923],{"alt":1924,"src":1925},"Open Console in Google Chrome","\u002Fimages\u002F7\u002F6.png",[24,1927,1928,1929,1932],{},"To ",[260,1930,1931],{},"open Vue devtools",", we need to click on the arrows on the top right corner and choose Vue.",[24,1934,1935],{},[35,1936],{"alt":1937,"src":1938},"Find Vue.js Devtools","\u002Fimages\u002F7\u002F7.png",[24,1940,1941,1942,1948],{},"Then ",[260,1943,1944,1945],{},"click on ",[88,1946,1947],{},"\u003CRoot>"," element. This should show us the data tree which we created in our HTML file.",[24,1950,1951],{},[35,1952],{"alt":1953,"src":1954},"Vue.js Devtools","\u002Fimages\u002F7\u002F8.png",[24,1956,1957,1958,1961,1962,1965,1966,1138,1969,1972,1973,1976],{},"Because of the ",[260,1959,1960],{},"reactive nature of the Vue,"," we can simply ",[260,1963,1964],{},"edit the text in the devtools",". This will automatically update the website view layer. To do this, ",[260,1967,1968],{},"double click on the message",[260,1970,1971],{},"change it to \"Hello Vue Tutorial!\"",". After ",[260,1974,1975],{},"clicking enter",", we should see the changes instantly.",[24,1978,1979],{},[35,1980],{"alt":1981,"src":1982},"Vue.js Devtools in Google Chrome","\u002Fimages\u002F7\u002F9.png",[28,1984,1986],{"id":1985},"changing-text-colour","Changing Text Colour",[24,1988,1989,1990,1993],{},"Vue implements an easy way to ",[260,1991,1992],{},"modify different attributes of the HTML DOM",". We can bind the different variables from Vue to the HTML DOM attributes.",[24,1995,1996,1997,2000,2001,2004,2005,263],{},"Let's ",[260,1998,1999],{},"create a variable"," called currentColor and set its value to ",[260,2002,2003],{},"red",". Vue uses Camel Case, you can read more about it here: ",[48,2006,2007],{"href":2007,"rel":2008},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FCamel_case",[52],[1606,2010,2012],{"className":1608,"code":2011,"language":1610,"meta":92,"style":92},"data() {\n    return {\n        message: 'Hello Vue!',\n        currentColor: 'red'\n    }\n}\n",[88,2013,2014,2020,2027,2035,2043,2048],{"__ignoreMap":92},[369,2015,2016,2018],{"class":1615,"line":1616},[369,2017,1835],{"class":1626},[369,2019,1765],{"class":1619},[369,2021,2022,2025],{"class":1615,"line":93},[369,2023,2024],{"class":1630},"    return",[369,2026,1774],{"class":1619},[369,2028,2029,2031,2033],{"class":1615,"line":96},[369,2030,1780],{"class":1619},[369,2032,1783],{"class":1634},[369,2034,1756],{"class":1619},[369,2036,2037,2040],{"class":1615,"line":1698},[369,2038,2039],{"class":1619},"        currentColor: ",[369,2041,2042],{"class":1634},"'red'\n",[369,2044,2045],{"class":1615,"line":1708},[369,2046,2047],{"class":1619},"    }\n",[369,2049,2050],{"class":1615,"line":1718},[369,2051,2052],{"class":1619},"}\n",[24,2054,2055,2056,630,2059,698],{},"To bind the currentColour variable to text CSS style, we have to use ",[88,2057,2058],{},"v-bind:style",[260,2060,2061],{},"in HTML element",[24,2063,2064],{},[88,2065,2066],{},"\u003Ch1 v-bind:style=\"{color: currentColor}\">{{message}}\u003C\u002Fh1>",[24,2068,2069,2070,2073],{},"The important point here is that \"font-family\" will be replaced by \"fontFamily\" in Camel Case. ",[260,2071,2072],{},"Style and Class binding in Vue requires Camel Case",". This is pretty important tip which has made me waste few hours on figuring out how does the style binding work.",[24,2075,2076,2077,2080,2081,2084],{},"Vue will ",[260,2078,2079],{},"automatically bind"," additional CSS for the particular element. ",[260,2082,2083],{},"Binding in Vue.js is also reactive"," what means, that we can create a method which will change the currentColor value and it will automatically update the view layer.",[24,2086,2087],{},"V-bind attribute can be used to bind any kind of attribute to the HTML DOM.",[24,2089,1996,2090,2093],{},[260,2091,2092],{},"create a new method"," which will change the colour to blue if the current colour is red, and to red when the current colour is blue.",[1606,2095,2097],{"className":1608,"code":2096,"language":1610,"meta":92,"style":92},"methods: {\n    onButtonClick(){\n        if(this.currentColor === 'red'){\n            this.currentColor = 'blue'\n        }\n        else if (this.currentColor === \"blue\"){\n            this.currentColor = 'red'\n        }\n    }\n}\n",[88,2098,2099,2107,2115,2138,2150,2155,2176,2187,2191,2195],{"__ignoreMap":92},[369,2100,2101,2104],{"class":1615,"line":1616},[369,2102,2103],{"class":1626},"methods",[369,2105,2106],{"class":1619},": {\n",[369,2108,2109,2112],{"class":1615,"line":93},[369,2110,2111],{"class":1626},"    onButtonClick",[369,2113,2114],{"class":1619},"(){\n",[369,2116,2117,2120,2123,2126,2129,2132,2135],{"class":1615,"line":96},[369,2118,2119],{"class":1630},"        if",[369,2121,2122],{"class":1619},"(",[369,2124,812],{"class":2125},"sj4cs",[369,2127,2128],{"class":1619},".currentColor ",[369,2130,2131],{"class":1630},"===",[369,2133,2134],{"class":1634}," 'red'",[369,2136,2137],{"class":1619},"){\n",[369,2139,2140,2143,2145,2147],{"class":1615,"line":1698},[369,2141,2142],{"class":2125},"            this",[369,2144,2128],{"class":1619},[369,2146,1631],{"class":1630},[369,2148,2149],{"class":1634}," 'blue'\n",[369,2151,2152],{"class":1615,"line":1708},[369,2153,2154],{"class":1619},"        }\n",[369,2156,2157,2160,2163,2165,2167,2169,2171,2174],{"class":1615,"line":1718},[369,2158,2159],{"class":1630},"        else",[369,2161,2162],{"class":1630}," if",[369,2164,1566],{"class":1619},[369,2166,812],{"class":2125},[369,2168,2128],{"class":1619},[369,2170,2131],{"class":1630},[369,2172,2173],{"class":1634}," \"blue\"",[369,2175,2137],{"class":1619},[369,2177,2178,2180,2182,2184],{"class":1615,"line":1727},[369,2179,2142],{"class":2125},[369,2181,2128],{"class":1619},[369,2183,1631],{"class":1630},[369,2185,2186],{"class":1634}," 'red'\n",[369,2188,2189],{"class":1615,"line":1747},[369,2190,2154],{"class":1619},[369,2192,2193],{"class":1615,"line":1759},[369,2194,2047],{"class":1619},[369,2196,2197],{"class":1615,"line":1768},[369,2198,2052],{"class":1619},[24,2200,2201,2202],{},"You can find full source code for this application on GitHub: ",[48,2203,2204],{"href":2204,"rel":2205},"https:\u002F\u002Fgithub.com\u002Fdawidstefaniak\u002Fgetting-started-vue",[52],[24,2207,2208,2209,2211,2212,263],{},"In Vue, *we have to define *the new section called ",[260,2210,2103],{}," where we store all of our methods. This will be ",[260,2213,2214],{},"right after the data attribute",[24,2216,2217,2220],{},[260,2218,2219],{},"To change the colour",", we need to find a way to call the method to change the colour. The easiest way is by *creating a button and assigning on click method *to it.",[24,2222,2223],{},[88,2224,2225],{},"\u003Cbutton v-on:click=\"onButtonClick\">Change Colour\u003C\u002Fbutton>",[24,2227,2228,2231],{},[260,2229,2230],{},"V-on binds different user interactions"," (like a mouse click or keyboard key presses)* to the particular actions* (in this case it will execute an onButtonClick method).",[24,2233,2234],{},"V-on can be replace by @ symbol. I like to read it as: \"at click\".",[24,2236,2237],{},[88,2238,2239],{},"\u003Cbutton @click=\"onButtonClick\">Change Colour\u003C\u002Fbutton>",[24,2241,2242],{},"Now let's test our application! After we click save in Visual Studio Code, we will be able to immediately see the difference.",[24,2244,2245],{},"Click few times on the button and see what happens with the data attributes in Vue devtools.",[24,2247,2248],{},[2249,2250],"video",{"controls":103,"src":2251},"https:\u002F\u002Flapissoft.co.uk\u002Fwp-content\u002Fuploads\u002F2019\u002F08\u002FChange-Colour.mov",[24,2253,2254,2257],{},[260,2255,2256],{},"Congratulations!"," Your first Vue application is up and running!",[24,2259,2201,2260,263],{},[48,2261,2204],{"href":2204,"rel":2262},[52],[28,2264,2266],{"id":2265},"what-next","What next?",[24,2268,2269,2270,2274],{},"I recommend starting from reading the official Vue.js documentation which explains all the basic concepts of creating web applications in Vue.js:* ",[48,2271,2272],{"href":2272,"rel":2273},"https:\u002F\u002Fvuejs.org\u002Fv2\u002Fguide\u002F",[52]," *",[24,2276,2277,2280],{},[260,2278,2279],{},"We would love to hear your opinion. Would you be using Vue.js? Do you feel it is easy to use?"," Leave a comment below, we will try to answer all of them!",[28,2282,2284,2285],{"id":2283},"are-you-currently-looking-for-software-developer-contact-us","Are you currently looking for Software Developer? ",[48,2286,2289],{"href":2287,"rel":2288},"https:\u002F\u002Flapissoft.co.uk",[52],"Contact us!",[2291,2292,2293],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":92,"searchDepth":93,"depth":93,"links":2295},[2296,2297,2298,2299],{"id":1505,"depth":93,"text":1506},{"id":1523,"depth":93,"text":1524},{"id":816,"depth":93,"text":817},{"id":1584,"depth":93,"text":1585,"children":2300},[2301,2302,2303],{"id":1985,"depth":96,"text":1986},{"id":2265,"depth":96,"text":2266},{"id":2283,"depth":96,"text":2304},"Are you currently looking for Software Developer? Contact us!","Vue.js",{},"\u002Farticles\u002Fgetting-started-with-vue-js",{"title":1497,"description":1502},"articles\u002Fgetting-started-with-vue-js",[2311,2305,2312],"Vue","Programming","j0SUmQHID02qnK8evLnbqi8o6KidEidIn5zAt7rk0Uw",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":2315},"\u003Cpath fill=\"currentColor\" d=\"M4 11v2h12l-5.5 5.5l1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5L16 11z\"\u002F>",1779997852177]