<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Brad</title>
    <description>The latest articles on Forem by Brad (@bradcypert).</description>
    <link>https://forem.com/bradcypert</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F137799%2F9692c721-ed29-47cf-a2c1-d1e9aef23c69.jpeg</url>
      <title>Forem: Brad</title>
      <link>https://forem.com/bradcypert</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/bradcypert"/>
    <language>en</language>
    <item>
      <title>An Introduction to Targeting Web Assembly with Golang</title>
      <dc:creator>Brad</dc:creator>
      <pubDate>Wed, 30 Dec 2020 19:24:00 +0000</pubDate>
      <link>https://forem.com/bradcypert/an-introduction-to-targeting-web-assembly-with-golang-5dhe</link>
      <guid>https://forem.com/bradcypert/an-introduction-to-targeting-web-assembly-with-golang-5dhe</guid>
      <description>&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/Jo7BbL7Xdms"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;a href="https://www.bradcypert.com/an-introduction-to-targeting-web-assembly-with-golang"&gt;Heads up! This post originally appeared on BradCypert.com but has been modified for your viewing pleasure on Dev.to&lt;/a&gt;!
&lt;/h4&gt;

&lt;p&gt;In 2015, Google announced that the Dart VM would not be built into chrome. This was an impactful day for me because from Dart's inception, I had hope that we'd have a first class alternative to JavaScript for web clients.&lt;/p&gt;

&lt;p&gt;Don't get me wrong, I have written a ton of JavaScript, but that doesn't mean I necessarily mean that I like the language. TypeScript, although not something a browser can simply execute as is, has done wonders for me but Im still left yearning for other alternatives to JavaScript.&lt;/p&gt;

&lt;p&gt;Enter Web Assembly. When I had first heard of web assembly, my feelings weren't of excitement. I had written a tiny bit of assembly in college and the idea of shoving assembler instructions into chrome devtools sounded like a step backwards. Thankfully, Web Assembly is not simply shoving assembler instructions into chrome or firefox.&lt;/p&gt;

&lt;p&gt;Web Assembly is a language that, similar to TypeScript compiling down to JavaScript, is targeted by another language as the build target. For this example, we'll use Golang and target Web Assembly as a platform and architecture, but there are other languages that can target web assembly, too (Rust, C, C++ to name a few).&lt;br&gt;
Why use Web Assembly?&lt;/p&gt;

&lt;p&gt;It's important to recognize that Web Assembly, just like JavaScript, is a tool to solve a problem. Web Assembly is fast/ Additionally, Web Assembly, when built correctly can actually produce an extremely small, pre-optimized binary.&lt;/p&gt;

&lt;p&gt;Its important to note that Web Assembly requires manual memory management (but the language that you write your application in may help handle this).&lt;br&gt;
Can I intermingle?&lt;/p&gt;

&lt;p&gt;This is an extremely relevant question, in my opinion. Maybe you want to continue building user interfaces in React, but have interest in migrating any business logic into WebAssembly for a possible performance gain. Maybe you just want to reuse some code from your server that's written in Rust, Go, C or C++ (or any other language that can target web assembly). There are a lot of use cases where it makes sense to intermingle (use both) JavaScript and Web Assembly. Thankfully, they're made to be interoperable.&lt;/p&gt;
&lt;h2&gt;
  
  
  Our Simple Web Assembly Program
&lt;/h2&gt;

&lt;p&gt;We're going to start by coding a very, very basic Go program that targets Web Assembly during the build process. Let's start out by printing "Hello World" to the console:&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Create a new directory to house our project. I used `mkdir go-wasm`, but you can use whatever you'd like.

cd into your newly created directory and run `go mod init github.com/your-name-here/go-wasm`. Update your command to use your name or username and if you chose a different folder name then update that as well.

We'll create a new file named main.go and add the following to it:
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight go"&gt;&lt;code&gt;&lt;span class="k"&gt;package&lt;/span&gt; &lt;span class="n"&gt;main&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="s"&gt;"fmt"&lt;/span&gt;
&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="k"&gt;func&lt;/span&gt; &lt;span class="n"&gt;main&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="n"&gt;fmt&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Println&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"Hello World!"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;You'll notice that there's nothing special going on in this Go file. That's not always the case, but for this example we have some extremely normal-looking Go code. In fact, feel free to go run this and make sure it works.&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;We'll have to add a Web Assembly Support file to run our code. Thankfully, Golang ships with one. We can just run `cp "$(go env GOROOT)/misc/wasm/wasm_exec.js" .`

Next we'll need to setup an HTML file to be rendered to browser. Additionally, we'll include some JavaScript to load and execute our Web Assembly program.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;html&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;head&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;meta&lt;/span&gt; &lt;span class="na"&gt;charset=&lt;/span&gt;&lt;span class="s"&gt;"utf-8"&lt;/span&gt; &lt;span class="nt"&gt;/&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;script &lt;/span&gt;&lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;"wasm_exec.js"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;script&amp;gt;&lt;/span&gt;
      &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;go&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;Go&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
      &lt;span class="nx"&gt;WebAssembly&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;instantiateStreaming&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
        &lt;span class="nx"&gt;fetch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;main.wasm&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
        &lt;span class="nx"&gt;go&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;importObject&lt;/span&gt;
      &lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;result&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nx"&gt;go&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;run&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;result&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;instance&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
      &lt;span class="p"&gt;});&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;/head&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;body&amp;gt;&amp;lt;/body&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/html&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Our scripts are the most interesting part of this HTML file. Our first script loads the &lt;code&gt;wasm_exec.js&lt;/code&gt; file from step 4, while our second script fetches and executes our web assembly instructions.&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Our last step is to build out our `main.wasm` file. We can do that simply by setting a few flags before running our build command: `GOOS=js GOARCH=wasm go build -o main.wasm`. You'll also notice that we're specifying our output filename here, too!
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;
&lt;p&gt;With everything setup, you can serve this directory over an HTTP server however you see fit. If you need recommendations, You can use the goexec package to execute arbitrary go commands (like ListenAndServe). To install: &lt;code&gt;go get -u github.com/shurcooL/goexec&lt;/code&gt; and to run a simple HTTP server: &lt;code&gt;goexec 'http.ListenAndServe(:8080, http.FileServer(http.Dir(.)))'&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Now that our server is up and running, go to localhost:8080 (or whatever your server address is) and you should see a blank white screen (we'll do more with that in a moment). For now, open your devtools and search for "Hello World" in the console output. If it's there, you've successfully set up and ran a Go program using Web Assembly as a build target.&lt;/p&gt;
&lt;h2&gt;
  
  
  Adding Elements with Golang/WASM
&lt;/h2&gt;

&lt;p&gt;As far as demos go, this is one of the most underwhelming ones that I could offer. We're about to fix that (don't worry, its still nothing crazy). Our plan is to add a couple of elements to our webpage via Web Assembly and then set some properties on them as well. Let's start by modifying our Go code to look like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight go"&gt;&lt;code&gt;&lt;span class="k"&gt;package&lt;/span&gt; &lt;span class="n"&gt;main&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="s"&gt;"fmt"&lt;/span&gt;
    &lt;span class="s"&gt;"syscall/js"&lt;/span&gt;
&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="k"&gt;func&lt;/span&gt; &lt;span class="n"&gt;main&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="n"&gt;fmt&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Println&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"Hello World!"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="n"&gt;document&lt;/span&gt; &lt;span class="o"&gt;:=&lt;/span&gt; &lt;span class="n"&gt;js&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Global&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"document"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="n"&gt;p&lt;/span&gt; &lt;span class="o"&gt;:=&lt;/span&gt; &lt;span class="n"&gt;document&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Call&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"createElement"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s"&gt;"p"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="n"&gt;p&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Set&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"innerHTML"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s"&gt;"Hello WASM from Go!"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="n"&gt;p&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Set&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"className"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s"&gt;"block"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="n"&gt;styles&lt;/span&gt; &lt;span class="o"&gt;:=&lt;/span&gt; &lt;span class="n"&gt;document&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Call&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"createElement"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s"&gt;"style"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="n"&gt;styles&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Set&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"innerHTML"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s"&gt;`
        .block {
            border: 1px solid black; color: white; background: black;
        }
    `&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="n"&gt;document&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"head"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Call&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"appendChild"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;styles&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="n"&gt;document&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"body"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Call&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"appendChild"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;p&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Alright! Let's talk through our changes:&lt;/p&gt;

&lt;p&gt;We've added a new import (&lt;code&gt;syscall/js&lt;/code&gt;). This gives us access to functions that help us interface with JavaScript related tidbits, such as getting the browser document. In our main method, we do exactly that. We then leverage document.Call to create a new paragraph (p) element. Lastly, we set a few properties on our newly defined paragraph element.&lt;/p&gt;

&lt;p&gt;We do the same thing shortly after but with a style Element. In this case, we want to set the innerHTML to apply a css class. Finally, we get the head and the body of the document and append the styles and paragraph elements respectively.&lt;/p&gt;

&lt;p&gt;With our changes in place, we can rebuild our web assembly instructions via &lt;code&gt;GOOS=js GOARCH=wasm go build -o main.wasm&lt;/code&gt; and relaunch our server via &lt;code&gt;goexec 'http.ListenAndServe(:8080, http.FileServer(http.Dir(.)))'&lt;/code&gt; to see our changes. We should see "Hello WASM from Go" in a black box in the document. Tada 🎉!&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;a href="https://www.bradcypert.com"&gt;Ready to learn something new? You can find more tutorials on BradCypert.com!&lt;/a&gt;!
&lt;/h4&gt;

</description>
      <category>go</category>
      <category>webassembly</category>
    </item>
    <item>
      <title>Working with JSON in Dart</title>
      <dc:creator>Brad</dc:creator>
      <pubDate>Sun, 27 Sep 2020 17:07:44 +0000</pubDate>
      <link>https://forem.com/bradcypert/working-with-json-in-dart-c2e</link>
      <guid>https://forem.com/bradcypert/working-with-json-in-dart-c2e</guid>
      <description>&lt;p&gt;&lt;strong&gt;Heads up: This post originally appeared on &lt;a href="https://www.bradcypert.com/working-with-json-in-dart/"&gt;BradCypert.com&lt;/a&gt; but has been reformatted on Dev.to for your viewing pleasure.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.json.org/json-en.html"&gt;JSON&lt;/a&gt; is, as of 2020, the communication standard for most web applications (comon &lt;a href="https://grpc.io/"&gt;gRPC&lt;/a&gt;! You can do it!). Naturally, if you’re building a Dart application, you’ll likely want to work with JSON. &lt;a href="https://api.dart.dev/stable/2.9.3/dart-convert/dart-convert-library.html"&gt;Dart’s built-in dart:convert package&lt;/a&gt; is just the tool that you need!&lt;/p&gt;

&lt;h2&gt;
  
  
  Creating a Model
&lt;/h2&gt;

&lt;p&gt;One of the first things that you’ll probably want to do is to create a model for your JSON data. In this example, we’ll use a simplified version of the &lt;a href="https://docs.github.com/en/free-pro-team@latest/rest/reference/repos"&gt;Github API’s repository request&lt;/a&gt;. If you’d like to inspect the response that we’ll be parsing, here’s the URL : &lt;a href="https://api.github.com/users/bradcypert/repos"&gt;https://api.github.com/users/bradcypert/repos&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;We’ll start by creating a simple Dart class to model this response. I say “simple” because we’re not going to model all of the fields in that response — we don’t need all that data and it’d be a lot of code that might dilute the quality of this demonstration. We’ll also override the &lt;code&gt;toString&lt;/code&gt; method for ease of printing our new model.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight dart"&gt;&lt;code&gt;&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;Repository&lt;/span&gt; &lt;span class="o"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;final&lt;/span&gt; &lt;span class="kt"&gt;int&lt;/span&gt; &lt;span class="n"&gt;id&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
  &lt;span class="kd"&gt;final&lt;/span&gt; &lt;span class="kt"&gt;String&lt;/span&gt; &lt;span class="n"&gt;name&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
  &lt;span class="kd"&gt;final&lt;/span&gt; &lt;span class="kt"&gt;String&lt;/span&gt; &lt;span class="n"&gt;description&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
  &lt;span class="kd"&gt;final&lt;/span&gt; &lt;span class="kt"&gt;String&lt;/span&gt; &lt;span class="n"&gt;url&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;

  &lt;span class="n"&gt;Repository&lt;/span&gt;&lt;span class="o"&gt;({&lt;/span&gt;&lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;id&lt;/span&gt;&lt;span class="o"&gt;,&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="o"&gt;,&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;description&lt;/span&gt;&lt;span class="o"&gt;,&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;url&lt;/span&gt;&lt;span class="o"&gt;});&lt;/span&gt;

  &lt;span class="kt"&gt;String&lt;/span&gt; &lt;span class="n"&gt;toString&lt;/span&gt;&lt;span class="o"&gt;()&lt;/span&gt; &lt;span class="o"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="s"&gt;'[&lt;/span&gt;&lt;span class="si"&gt;${this.id}&lt;/span&gt;&lt;span class="s"&gt;, &lt;/span&gt;&lt;span class="si"&gt;${this.name}&lt;/span&gt;&lt;span class="s"&gt;, &lt;/span&gt;&lt;span class="si"&gt;${this.description}&lt;/span&gt;&lt;span class="s"&gt;, &lt;/span&gt;&lt;span class="si"&gt;${this.url}&lt;/span&gt;&lt;span class="s"&gt;]'&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
  &lt;span class="o"&gt;}&lt;/span&gt;
&lt;span class="o"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;That’ll work. We’ll just capture the &lt;code&gt;id&lt;/code&gt;, &lt;code&gt;name&lt;/code&gt;, &lt;code&gt;description&lt;/code&gt;, and &lt;code&gt;url&lt;/code&gt; for our repositories. Now that we have something to store our decoded JSON into, the next step is to actually decode the JSON. We’ll leverage a few Dart packages for these steps. Here’s the breakdown of what we’re going to do:&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;1. We need to make an HTTP request to the github repository list endpoint.
1. We need to decode the response body into a `dynamic` type for our JSON.
1. We need to use that `dynamic` JSON type to create instances of our Repository Model.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;Let’s get to it!&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight dart"&gt;&lt;code&gt;&lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="s"&gt;'package:http/http.dart'&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="n"&gt;http&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
&lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="s"&gt;'dart:convert'&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// give us the global jsonDecode&lt;/span&gt;

&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;Repository&lt;/span&gt; &lt;span class="o"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;final&lt;/span&gt; &lt;span class="kt"&gt;int&lt;/span&gt; &lt;span class="n"&gt;id&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
  &lt;span class="kd"&gt;final&lt;/span&gt; &lt;span class="kt"&gt;String&lt;/span&gt; &lt;span class="n"&gt;name&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
  &lt;span class="kd"&gt;final&lt;/span&gt; &lt;span class="kt"&gt;String&lt;/span&gt; &lt;span class="n"&gt;description&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
  &lt;span class="kd"&gt;final&lt;/span&gt; &lt;span class="kt"&gt;String&lt;/span&gt; &lt;span class="n"&gt;url&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;

  &lt;span class="n"&gt;Repository&lt;/span&gt;&lt;span class="o"&gt;({&lt;/span&gt;&lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;id&lt;/span&gt;&lt;span class="o"&gt;,&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="o"&gt;,&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;description&lt;/span&gt;&lt;span class="o"&gt;,&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;url&lt;/span&gt;&lt;span class="o"&gt;});&lt;/span&gt;

  &lt;span class="kt"&gt;String&lt;/span&gt; &lt;span class="n"&gt;toString&lt;/span&gt;&lt;span class="o"&gt;()&lt;/span&gt; &lt;span class="o"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="s"&gt;'[&lt;/span&gt;&lt;span class="si"&gt;${this.id}&lt;/span&gt;&lt;span class="s"&gt;, &lt;/span&gt;&lt;span class="si"&gt;${this.name}&lt;/span&gt;&lt;span class="s"&gt;, &lt;/span&gt;&lt;span class="si"&gt;${this.description}&lt;/span&gt;&lt;span class="s"&gt;, &lt;/span&gt;&lt;span class="si"&gt;${this.url}&lt;/span&gt;&lt;span class="s"&gt;]'&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
  &lt;span class="o"&gt;}&lt;/span&gt;
&lt;span class="o"&gt;}&lt;/span&gt;

&lt;span class="kt"&gt;void&lt;/span&gt; &lt;span class="nf"&gt;main&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt; &lt;span class="o"&gt;{&lt;/span&gt;
  &lt;span class="n"&gt;http&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;get&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"https://api.github.com/users/bradcypert/repos"&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt;
    &lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;then&lt;/span&gt;&lt;span class="o"&gt;((&lt;/span&gt;&lt;span class="n"&gt;response&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;jsonDecode&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="n"&gt;response&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;body&lt;/span&gt;&lt;span class="o"&gt;)).&lt;/span&gt;&lt;span class="na"&gt;then&lt;/span&gt;&lt;span class="o"&gt;((&lt;/span&gt;&lt;span class="n"&gt;jsonBody&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt; &lt;span class="o"&gt;{&lt;/span&gt;
      &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="n"&gt;repos&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;jsonBody&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;map&lt;/span&gt;&lt;span class="o"&gt;((&lt;/span&gt;&lt;span class="n"&gt;repo&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; 
        &lt;span class="n"&gt;Repository&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;
          &lt;span class="nl"&gt;id:&lt;/span&gt; &lt;span class="n"&gt;repo&lt;/span&gt;&lt;span class="o"&gt;[&lt;/span&gt;&lt;span class="s"&gt;'id'&lt;/span&gt;&lt;span class="o"&gt;],&lt;/span&gt;
          &lt;span class="nl"&gt;name:&lt;/span&gt; &lt;span class="n"&gt;repo&lt;/span&gt;&lt;span class="o"&gt;[&lt;/span&gt;&lt;span class="s"&gt;'name'&lt;/span&gt;&lt;span class="o"&gt;],&lt;/span&gt;
          &lt;span class="nl"&gt;description:&lt;/span&gt; &lt;span class="n"&gt;repo&lt;/span&gt;&lt;span class="o"&gt;[&lt;/span&gt;&lt;span class="s"&gt;'description'&lt;/span&gt;&lt;span class="o"&gt;],&lt;/span&gt;
          &lt;span class="nl"&gt;url:&lt;/span&gt; &lt;span class="n"&gt;repo&lt;/span&gt;&lt;span class="o"&gt;[&lt;/span&gt;&lt;span class="s"&gt;'url'&lt;/span&gt;&lt;span class="o"&gt;]&lt;/span&gt;
        &lt;span class="o"&gt;)&lt;/span&gt;
      &lt;span class="o"&gt;);&lt;/span&gt;
      &lt;span class="n"&gt;repos&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;forEach&lt;/span&gt;&lt;span class="o"&gt;((&lt;/span&gt;&lt;span class="n"&gt;repo&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;print&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="n"&gt;repo&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;toString&lt;/span&gt;&lt;span class="o"&gt;()&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="s"&gt;"&lt;/span&gt;&lt;span class="se"&gt;\n&lt;/span&gt;&lt;span class="s"&gt;"&lt;/span&gt;&lt;span class="o"&gt;));&lt;/span&gt;
    &lt;span class="o"&gt;});&lt;/span&gt;
&lt;span class="o"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;code&gt;jsonDecode&lt;/code&gt; is doing all of the heavy lifting in regards to the parsing. We request the data from github, parse it, and then used the parsed JSON to create our model. Finally, for the sake of proving it works, we print our model to the console. Truncated for brevity, you should see something like this in your console:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[199228305, async-http, A channel-based HTTP client built around Golang's net/http package., https://api.github.com/repos/bradcypert/async-http]

[290240968, bradcypert.com, WordPress theme for BradCypert.com, https://api.github.com/repos/bradcypert/bradcypert.com]

[44900977, clojchimp, A small MailChimp client written in Clojure, https://api.github.com/repos/bradcypert/clojchimp]
...
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;First, pat yourself on the back. You’re parsing JSON with Dart. Second, don’t you think we could make this a little cleaner? Me too. Let’s create a new constructor for our Model.&lt;/p&gt;

&lt;h2&gt;
  
  
  Refactoring our Model
&lt;/h2&gt;

&lt;p&gt;We’re going to add redirecting constructor to our model here. This allows us to maintain our primary constructor, but specify a new constructor specifically for dealing with &lt;code&gt;dynamic&lt;/code&gt; json types of data.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight dart"&gt;&lt;code&gt;&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;Repository&lt;/span&gt; &lt;span class="o"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;final&lt;/span&gt; &lt;span class="kt"&gt;int&lt;/span&gt; &lt;span class="n"&gt;id&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
  &lt;span class="kd"&gt;final&lt;/span&gt; &lt;span class="kt"&gt;String&lt;/span&gt; &lt;span class="n"&gt;name&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
  &lt;span class="kd"&gt;final&lt;/span&gt; &lt;span class="kt"&gt;String&lt;/span&gt; &lt;span class="n"&gt;description&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
  &lt;span class="kd"&gt;final&lt;/span&gt; &lt;span class="kt"&gt;String&lt;/span&gt; &lt;span class="n"&gt;url&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;

  &lt;span class="n"&gt;Repository&lt;/span&gt;&lt;span class="o"&gt;({&lt;/span&gt;&lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;id&lt;/span&gt;&lt;span class="o"&gt;,&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="o"&gt;,&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;description&lt;/span&gt;&lt;span class="o"&gt;,&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;url&lt;/span&gt;&lt;span class="o"&gt;});&lt;/span&gt;

  &lt;span class="n"&gt;Repository&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;fromJSON&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;dynamic&lt;/span&gt; &lt;span class="n"&gt;json&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt; &lt;span class="o"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;
      &lt;span class="nl"&gt;id:&lt;/span&gt; &lt;span class="n"&gt;repo&lt;/span&gt;&lt;span class="o"&gt;[&lt;/span&gt;&lt;span class="s"&gt;'id'&lt;/span&gt;&lt;span class="o"&gt;],&lt;/span&gt;
      &lt;span class="nl"&gt;name:&lt;/span&gt; &lt;span class="n"&gt;repo&lt;/span&gt;&lt;span class="o"&gt;[&lt;/span&gt;&lt;span class="s"&gt;'name'&lt;/span&gt;&lt;span class="o"&gt;],&lt;/span&gt;
      &lt;span class="nl"&gt;description:&lt;/span&gt; &lt;span class="n"&gt;repo&lt;/span&gt;&lt;span class="o"&gt;[&lt;/span&gt;&lt;span class="s"&gt;'description'&lt;/span&gt;&lt;span class="o"&gt;],&lt;/span&gt;
      &lt;span class="nl"&gt;url:&lt;/span&gt; &lt;span class="n"&gt;repo&lt;/span&gt;&lt;span class="o"&gt;[&lt;/span&gt;&lt;span class="s"&gt;'url'&lt;/span&gt;&lt;span class="o"&gt;]&lt;/span&gt;
    &lt;span class="o"&gt;)&lt;/span&gt;
  &lt;span class="o"&gt;}&lt;/span&gt;

  &lt;span class="kt"&gt;String&lt;/span&gt; &lt;span class="n"&gt;toString&lt;/span&gt;&lt;span class="o"&gt;()&lt;/span&gt; &lt;span class="o"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="s"&gt;'[&lt;/span&gt;&lt;span class="si"&gt;${this.id}&lt;/span&gt;&lt;span class="s"&gt;, &lt;/span&gt;&lt;span class="si"&gt;${this.name}&lt;/span&gt;&lt;span class="s"&gt;, &lt;/span&gt;&lt;span class="si"&gt;${this.description}&lt;/span&gt;&lt;span class="s"&gt;, &lt;/span&gt;&lt;span class="si"&gt;${this.url}&lt;/span&gt;&lt;span class="s"&gt;]'&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
  &lt;span class="o"&gt;}&lt;/span&gt;
&lt;span class="o"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now, with our new redirecting constructor, we can simplify our main method as well!&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight dart"&gt;&lt;code&gt;&lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="s"&gt;'package:http/http.dart'&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="n"&gt;http&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
&lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="s"&gt;'dart:convert'&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// give us the global jsonDecode&lt;/span&gt;

&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;Repository&lt;/span&gt; &lt;span class="o"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;final&lt;/span&gt; &lt;span class="kt"&gt;int&lt;/span&gt; &lt;span class="n"&gt;id&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
  &lt;span class="kd"&gt;final&lt;/span&gt; &lt;span class="kt"&gt;String&lt;/span&gt; &lt;span class="n"&gt;name&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
  &lt;span class="kd"&gt;final&lt;/span&gt; &lt;span class="kt"&gt;String&lt;/span&gt; &lt;span class="n"&gt;description&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
  &lt;span class="kd"&gt;final&lt;/span&gt; &lt;span class="kt"&gt;String&lt;/span&gt; &lt;span class="n"&gt;url&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;

  &lt;span class="n"&gt;Repository&lt;/span&gt;&lt;span class="o"&gt;({&lt;/span&gt;&lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;id&lt;/span&gt;&lt;span class="o"&gt;,&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="o"&gt;,&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;description&lt;/span&gt;&lt;span class="o"&gt;,&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;url&lt;/span&gt;&lt;span class="o"&gt;});&lt;/span&gt;

  &lt;span class="n"&gt;Repository&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;fromJSON&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;dynamic&lt;/span&gt; &lt;span class="n"&gt;json&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt; &lt;span class="o"&gt;:&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;
    &lt;span class="nl"&gt;id:&lt;/span&gt; &lt;span class="n"&gt;json&lt;/span&gt;&lt;span class="o"&gt;[&lt;/span&gt;&lt;span class="s"&gt;'id'&lt;/span&gt;&lt;span class="o"&gt;],&lt;/span&gt;
    &lt;span class="nl"&gt;name:&lt;/span&gt; &lt;span class="n"&gt;json&lt;/span&gt;&lt;span class="o"&gt;[&lt;/span&gt;&lt;span class="s"&gt;'name'&lt;/span&gt;&lt;span class="o"&gt;],&lt;/span&gt;
    &lt;span class="nl"&gt;description:&lt;/span&gt; &lt;span class="n"&gt;json&lt;/span&gt;&lt;span class="o"&gt;[&lt;/span&gt;&lt;span class="s"&gt;'description'&lt;/span&gt;&lt;span class="o"&gt;],&lt;/span&gt;
    &lt;span class="nl"&gt;url:&lt;/span&gt; &lt;span class="n"&gt;json&lt;/span&gt;&lt;span class="o"&gt;[&lt;/span&gt;&lt;span class="s"&gt;'url'&lt;/span&gt;&lt;span class="o"&gt;]&lt;/span&gt;
  &lt;span class="o"&gt;);&lt;/span&gt;


  &lt;span class="kt"&gt;String&lt;/span&gt; &lt;span class="n"&gt;toString&lt;/span&gt;&lt;span class="o"&gt;()&lt;/span&gt; &lt;span class="o"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="s"&gt;'[&lt;/span&gt;&lt;span class="si"&gt;${this.id}&lt;/span&gt;&lt;span class="s"&gt;, &lt;/span&gt;&lt;span class="si"&gt;${this.name}&lt;/span&gt;&lt;span class="s"&gt;, &lt;/span&gt;&lt;span class="si"&gt;${this.description}&lt;/span&gt;&lt;span class="s"&gt;, &lt;/span&gt;&lt;span class="si"&gt;${this.url}&lt;/span&gt;&lt;span class="s"&gt;]'&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
  &lt;span class="o"&gt;}&lt;/span&gt;
&lt;span class="o"&gt;}&lt;/span&gt;

&lt;span class="kt"&gt;void&lt;/span&gt; &lt;span class="nf"&gt;main&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt; &lt;span class="o"&gt;{&lt;/span&gt;
  &lt;span class="n"&gt;http&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;get&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"https://api.github.com/users/bradcypert/repos"&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt;
    &lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;then&lt;/span&gt;&lt;span class="o"&gt;((&lt;/span&gt;&lt;span class="n"&gt;response&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;jsonDecode&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="n"&gt;response&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;body&lt;/span&gt;&lt;span class="o"&gt;)).&lt;/span&gt;&lt;span class="na"&gt;then&lt;/span&gt;&lt;span class="o"&gt;((&lt;/span&gt;&lt;span class="n"&gt;jsonBody&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt; &lt;span class="o"&gt;{&lt;/span&gt;
      &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="n"&gt;repos&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;jsonBody&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;map&lt;/span&gt;&lt;span class="o"&gt;((&lt;/span&gt;&lt;span class="n"&gt;jsonRepo&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; 
        &lt;span class="n"&gt;Repository&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;fromJSON&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="n"&gt;jsonRepo&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt;
      &lt;span class="o"&gt;);&lt;/span&gt;
      &lt;span class="n"&gt;repos&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;forEach&lt;/span&gt;&lt;span class="o"&gt;((&lt;/span&gt;&lt;span class="n"&gt;repo&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;print&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="n"&gt;repo&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;toString&lt;/span&gt;&lt;span class="o"&gt;()&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="s"&gt;"&lt;/span&gt;&lt;span class="se"&gt;\n&lt;/span&gt;&lt;span class="s"&gt;"&lt;/span&gt;&lt;span class="o"&gt;));&lt;/span&gt;
    &lt;span class="o"&gt;});&lt;/span&gt;
&lt;span class="o"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;How about that? Same output, but cleaner. Note: I know that you can simplify this even further by removing the &lt;code&gt;.map&lt;/code&gt; call and just creating the Repository in the &lt;code&gt;forEach&lt;/code&gt; instead. Most real world applications don’t just print to the console each of the items they have, and I find that proper use of &lt;code&gt;.map&lt;/code&gt; tends to lead towards cleaner code. For demo purposes, you can simplify it, but follow I suggest following the patterns with &lt;code&gt;.map&lt;/code&gt; in your own application!&lt;/p&gt;

&lt;h2&gt;
  
  
  Generating JSON from Models
&lt;/h2&gt;

&lt;p&gt;Now that we know how to decode JSON and generate class instances from that JSON, it’s time that we flip-the-script and do the opposite. We’ll take our Repository class and modify it so that it can generate a Map that we can parse via &lt;code&gt;jsonEncode&lt;/code&gt;. So, our steps for this change are as follows:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Add a new method to our model called &lt;code&gt;.toJson&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Write the code to return a map containing key-value pairs to represent our model’s data.&lt;/li&gt;
&lt;li&gt;Call &lt;code&gt;jsonEncode&lt;/code&gt; passing in our Repository instance (&lt;code&gt;toJson&lt;/code&gt; method is called be &lt;code&gt;jsonEncode&lt;/code&gt; under the hood).
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight dart"&gt;&lt;code&gt;&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;Repository&lt;/span&gt; &lt;span class="o"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;final&lt;/span&gt; &lt;span class="kt"&gt;int&lt;/span&gt; &lt;span class="n"&gt;id&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
  &lt;span class="kd"&gt;final&lt;/span&gt; &lt;span class="kt"&gt;String&lt;/span&gt; &lt;span class="n"&gt;name&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
  &lt;span class="kd"&gt;final&lt;/span&gt; &lt;span class="kt"&gt;String&lt;/span&gt; &lt;span class="n"&gt;description&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
  &lt;span class="kd"&gt;final&lt;/span&gt; &lt;span class="kt"&gt;String&lt;/span&gt; &lt;span class="n"&gt;url&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;

  &lt;span class="n"&gt;Repository&lt;/span&gt;&lt;span class="o"&gt;({&lt;/span&gt;&lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;id&lt;/span&gt;&lt;span class="o"&gt;,&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="o"&gt;,&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;description&lt;/span&gt;&lt;span class="o"&gt;,&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;url&lt;/span&gt;&lt;span class="o"&gt;});&lt;/span&gt;

  &lt;span class="n"&gt;Repository&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;fromJSON&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;dynamic&lt;/span&gt; &lt;span class="n"&gt;json&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt; &lt;span class="o"&gt;:&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;
    &lt;span class="nl"&gt;id:&lt;/span&gt; &lt;span class="n"&gt;json&lt;/span&gt;&lt;span class="o"&gt;[&lt;/span&gt;&lt;span class="s"&gt;'id'&lt;/span&gt;&lt;span class="o"&gt;],&lt;/span&gt;
    &lt;span class="nl"&gt;name:&lt;/span&gt; &lt;span class="n"&gt;json&lt;/span&gt;&lt;span class="o"&gt;[&lt;/span&gt;&lt;span class="s"&gt;'name'&lt;/span&gt;&lt;span class="o"&gt;],&lt;/span&gt;
    &lt;span class="nl"&gt;description:&lt;/span&gt; &lt;span class="n"&gt;json&lt;/span&gt;&lt;span class="o"&gt;[&lt;/span&gt;&lt;span class="s"&gt;'description'&lt;/span&gt;&lt;span class="o"&gt;],&lt;/span&gt;
    &lt;span class="nl"&gt;url:&lt;/span&gt; &lt;span class="n"&gt;json&lt;/span&gt;&lt;span class="o"&gt;[&lt;/span&gt;&lt;span class="s"&gt;'url'&lt;/span&gt;&lt;span class="o"&gt;]&lt;/span&gt;
  &lt;span class="o"&gt;);&lt;/span&gt;


  &lt;span class="n"&gt;Map&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="kt"&gt;String&lt;/span&gt;&lt;span class="o"&gt;,&lt;/span&gt; &lt;span class="kd"&gt;dynamic&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;toJson&lt;/span&gt;&lt;span class="o"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="o"&gt;{&lt;/span&gt;
    &lt;span class="s"&gt;'id'&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;id&lt;/span&gt;&lt;span class="o"&gt;,&lt;/span&gt;
    &lt;span class="s"&gt;'name'&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="o"&gt;,&lt;/span&gt;
    &lt;span class="s"&gt;'description'&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;description&lt;/span&gt;&lt;span class="o"&gt;,&lt;/span&gt;
    &lt;span class="s"&gt;'url'&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;url&lt;/span&gt;
  &lt;span class="o"&gt;};&lt;/span&gt;

  &lt;span class="kt"&gt;String&lt;/span&gt; &lt;span class="n"&gt;toString&lt;/span&gt;&lt;span class="o"&gt;()&lt;/span&gt; &lt;span class="o"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="s"&gt;'[&lt;/span&gt;&lt;span class="si"&gt;${this.id}&lt;/span&gt;&lt;span class="s"&gt;, &lt;/span&gt;&lt;span class="si"&gt;${this.name}&lt;/span&gt;&lt;span class="s"&gt;, &lt;/span&gt;&lt;span class="si"&gt;${this.description}&lt;/span&gt;&lt;span class="s"&gt;, &lt;/span&gt;&lt;span class="si"&gt;${this.url}&lt;/span&gt;&lt;span class="s"&gt;]'&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
  &lt;span class="o"&gt;}&lt;/span&gt;
&lt;span class="o"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;So now that we’ve added our &lt;code&gt;toJson&lt;/code&gt; method, we can call &lt;code&gt;jsonEncode&lt;/code&gt; on a repository object like so:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight dart"&gt;&lt;code&gt;&lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="s"&gt;'package:http/http.dart'&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="n"&gt;http&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
&lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="s"&gt;'dart:convert'&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// give us the global jsonDecode&lt;/span&gt;

&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;Repository&lt;/span&gt; &lt;span class="o"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;final&lt;/span&gt; &lt;span class="kt"&gt;int&lt;/span&gt; &lt;span class="n"&gt;id&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
  &lt;span class="kd"&gt;final&lt;/span&gt; &lt;span class="kt"&gt;String&lt;/span&gt; &lt;span class="n"&gt;name&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
  &lt;span class="kd"&gt;final&lt;/span&gt; &lt;span class="kt"&gt;String&lt;/span&gt; &lt;span class="n"&gt;description&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
  &lt;span class="kd"&gt;final&lt;/span&gt; &lt;span class="kt"&gt;String&lt;/span&gt; &lt;span class="n"&gt;url&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;

  &lt;span class="n"&gt;Repository&lt;/span&gt;&lt;span class="o"&gt;({&lt;/span&gt;&lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;id&lt;/span&gt;&lt;span class="o"&gt;,&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="o"&gt;,&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;description&lt;/span&gt;&lt;span class="o"&gt;,&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;url&lt;/span&gt;&lt;span class="o"&gt;});&lt;/span&gt;

  &lt;span class="n"&gt;Repository&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;fromJSON&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;dynamic&lt;/span&gt; &lt;span class="n"&gt;json&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt; &lt;span class="o"&gt;:&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;
    &lt;span class="nl"&gt;id:&lt;/span&gt; &lt;span class="n"&gt;json&lt;/span&gt;&lt;span class="o"&gt;[&lt;/span&gt;&lt;span class="s"&gt;'id'&lt;/span&gt;&lt;span class="o"&gt;],&lt;/span&gt;
    &lt;span class="nl"&gt;name:&lt;/span&gt; &lt;span class="n"&gt;json&lt;/span&gt;&lt;span class="o"&gt;[&lt;/span&gt;&lt;span class="s"&gt;'name'&lt;/span&gt;&lt;span class="o"&gt;],&lt;/span&gt;
    &lt;span class="nl"&gt;description:&lt;/span&gt; &lt;span class="n"&gt;json&lt;/span&gt;&lt;span class="o"&gt;[&lt;/span&gt;&lt;span class="s"&gt;'description'&lt;/span&gt;&lt;span class="o"&gt;],&lt;/span&gt;
    &lt;span class="nl"&gt;url:&lt;/span&gt; &lt;span class="n"&gt;json&lt;/span&gt;&lt;span class="o"&gt;[&lt;/span&gt;&lt;span class="s"&gt;'url'&lt;/span&gt;&lt;span class="o"&gt;]&lt;/span&gt;
  &lt;span class="o"&gt;);&lt;/span&gt;


  &lt;span class="n"&gt;Map&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="kt"&gt;String&lt;/span&gt;&lt;span class="o"&gt;,&lt;/span&gt; &lt;span class="kd"&gt;dynamic&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;toJson&lt;/span&gt;&lt;span class="o"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="o"&gt;{&lt;/span&gt;
    &lt;span class="s"&gt;'id'&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;id&lt;/span&gt;&lt;span class="o"&gt;,&lt;/span&gt;
    &lt;span class="s"&gt;'name'&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="o"&gt;,&lt;/span&gt;
    &lt;span class="s"&gt;'description'&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;description&lt;/span&gt;&lt;span class="o"&gt;,&lt;/span&gt;
    &lt;span class="s"&gt;'url'&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;url&lt;/span&gt;
  &lt;span class="o"&gt;};&lt;/span&gt;

  &lt;span class="kt"&gt;String&lt;/span&gt; &lt;span class="n"&gt;toString&lt;/span&gt;&lt;span class="o"&gt;()&lt;/span&gt; &lt;span class="o"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="s"&gt;'[&lt;/span&gt;&lt;span class="si"&gt;${this.id}&lt;/span&gt;&lt;span class="s"&gt;, &lt;/span&gt;&lt;span class="si"&gt;${this.name}&lt;/span&gt;&lt;span class="s"&gt;, &lt;/span&gt;&lt;span class="si"&gt;${this.description}&lt;/span&gt;&lt;span class="s"&gt;, &lt;/span&gt;&lt;span class="si"&gt;${this.url}&lt;/span&gt;&lt;span class="s"&gt;]'&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
  &lt;span class="o"&gt;}&lt;/span&gt;
&lt;span class="o"&gt;}&lt;/span&gt;

&lt;span class="kt"&gt;void&lt;/span&gt; &lt;span class="nf"&gt;main&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt; &lt;span class="o"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;// create a new Repository instance in our application&lt;/span&gt;
  &lt;span class="n"&gt;Repository&lt;/span&gt; &lt;span class="n"&gt;repo&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;Repository&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="nl"&gt;id:&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="o"&gt;,&lt;/span&gt; &lt;span class="nl"&gt;name:&lt;/span&gt; &lt;span class="s"&gt;"test repo"&lt;/span&gt;&lt;span class="o"&gt;,&lt;/span&gt; &lt;span class="nl"&gt;description:&lt;/span&gt; &lt;span class="s"&gt;"No thanks."&lt;/span&gt;&lt;span class="o"&gt;,&lt;/span&gt; &lt;span class="nl"&gt;url:&lt;/span&gt; &lt;span class="s"&gt;"github.com/nextawesomeproject"&lt;/span&gt;&lt;span class="o"&gt;);&lt;/span&gt;

  &lt;span class="c1"&gt;// print the repo as is (calling toString under the hood)&lt;/span&gt;
  &lt;span class="n"&gt;print&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="n"&gt;repo&lt;/span&gt;&lt;span class="o"&gt;);&lt;/span&gt;
  &lt;span class="c1"&gt;// print the repo as valid JSON&lt;/span&gt;
  &lt;span class="n"&gt;print&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="n"&gt;jsonEncode&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="n"&gt;repo&lt;/span&gt;&lt;span class="o"&gt;));&lt;/span&gt;
&lt;span class="o"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And that’ll do it! You’re now encoding and decoding JSON in Dart! Best of luck!&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;PS: You can TOTALLY make this a tiny bit simpler (or maybe a lot simpler when working with big data structures) by using reflection. Dart’s runtime reflection package (called Mirrors) is actually pretty rad, however it can not be used with Flutter (due to it breaking Flutter’s tree-shaking mechanisms). If you’re using Dart with something other than Flutter &lt;del&gt;please let me know what you’re working on&lt;/del&gt; &lt;a href="https://api.dart.dev/stable/2.9.3/dart-mirrors/dart-mirrors-library.html"&gt;see the reflection package here&lt;/a&gt;.&lt;/strong&gt;&lt;/p&gt;

</description>
      <category>dart</category>
      <category>flutter</category>
      <category>json</category>
    </item>
    <item>
      <title>Autosaving with React Hooks</title>
      <dc:creator>Brad</dc:creator>
      <pubDate>Sat, 21 Dec 2019 19:12:25 +0000</pubDate>
      <link>https://forem.com/bradcypert/autosaving-with-react-hooks-4041</link>
      <guid>https://forem.com/bradcypert/autosaving-with-react-hooks-4041</guid>
      <description>&lt;h4&gt;
  
  
  This post is originally from &lt;a href="https://www.bradcypert.com/autosaving-with-react-hooks"&gt;bradcypert.com&lt;/a&gt;, but has been reformatted for your viewing pleasure on Dev.to!
&lt;/h4&gt;

&lt;p&gt;React hooks have really changed the game for me when it comes to building react components. However, I've found that writing autosaving functionality is a little less obvious via hooks. Thankfully, it is still possible (and arguably a lot cleaner) when using hooks.&lt;/p&gt;

&lt;p&gt;We can accomplish autosaving functionality through use of &lt;code&gt;useEffect&lt;/code&gt;. You'll also need a way to post the data to your server. In my case, I'm using Apollo's useMutation hook as well. This allows me to post a graphql mutation from a hook-like interface.&lt;/p&gt;

&lt;h2&gt;The &lt;code&gt;useEffect&lt;/code&gt; hook&lt;/h2&gt;

&lt;p&gt;The &lt;code&gt;useEffect&lt;/code&gt; hook effectively replaces &lt;code&gt;componentDidMount&lt;/code&gt;, &lt;code&gt;componentWillUpdate&lt;/code&gt;, and &lt;code&gt;componentWillUnmount&lt;/code&gt;. Here's how I remember the API for &lt;code&gt;useEffect&lt;/code&gt;:&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;useEffect(() =&amp;gt; {
  doWhateverIsHereOnMountandUpdate();

  return () =&amp;gt; {
    doWhateverIsHereOnWillUnmount();
  }
}, [skipUntilThisStateOrPropHaschanged])&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;It's worth mentioning that the &lt;code&gt;skipUntilThisStateOrPropHasChanged&lt;/code&gt; is optional, and leaving it out will cause it to process the hook on every render.&lt;/p&gt;

&lt;h2&gt;Implementing Autosave&lt;/h2&gt;

&lt;p&gt;Now that we understand our hook, the autosave functionality becomes fairly trivial. We'll use a couple of state hooks as well to help us manage the text that a user types in as well as the last value we saved (we can skip network requests if they're the same).&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;const [lastText, setLastText] = React.useState('');
const [text, setText] = React.useState('');&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;You'll see how we use &lt;code&gt;lastText&lt;/code&gt; in our &lt;code&gt;useEffect&lt;/code&gt; hook below, but for now, you just need to know that &lt;code&gt;text&lt;/code&gt; represents the state of what the user has typed in. If you'd like more information on how this works, &lt;a href="https://reactjs.org/docs/forms.html#controlled-components"&gt;React's documentation for Controlled Components is a great place to start&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Now, we need a function to trigger to persist our data to the server. In my case, I'll use an Apollo mutation since the server API processes graphql.&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;const [updateContent] = useMutation(UPDATE_CHAPTER_CONTENT.MUTATION);&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;Finally, we can write our &lt;code&gt;useEffect&lt;/code&gt; hook:&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;const AUTOSAVE_INTERVAL = 3000;
React.useEffect(() =&amp;gt; {
    const timer = setTimeout(() =&amp;gt; {
      if (lastText != text) {
        updateContent({ variables: { content: text, id: chapterId } });
        setLastText(text);
      }
    }, AUTOSAVE_INTERVAL);
    return () =&amp;gt; clearTimeout(timer);
  }, [text]);&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;We're doing a couple of neat things here. First, we're setting up our &lt;code&gt;useEffect&lt;/code&gt; hook. It creates a timer via &lt;code&gt;setTimeout&lt;/code&gt;, and when that hook unmounts, it removes that timer. That's the "meat-and-potatoes" behind it. You'll notice that our setTimeout function checks to see if the text has changed before posting our data, and then sets the last text if it has changed.&lt;/p&gt;

&lt;p&gt;We're also only triggering this &lt;code&gt;useEffect&lt;/code&gt; when &lt;code&gt;text&lt;/code&gt; has changed (as indicated by &lt;code&gt;[text]&lt;/code&gt; as the second parameter. We probably could clean this up a bit by removing the &lt;code&gt;if&lt;/code&gt; in the timeout function body, and updating the &lt;code&gt;useEffect&lt;/code&gt; dependency array to be &lt;code&gt;[text != lastText]&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;And that should do it! Hopefully, this helps if you're trying to build autosave functionality into React project.&lt;/p&gt;

&lt;p&gt;If you'd like to &lt;a href="https://www.bradcypert.com/tag/react/"&gt;learn more about React, you can find my other post on Facebook's awesome framework here.&lt;/a&gt;&lt;/p&gt;

</description>
      <category>react</category>
      <category>hooks</category>
      <category>autosaving</category>
      <category>javascript</category>
    </item>
    <item>
      <title>Developer Burnout: 9 Tips to Help</title>
      <dc:creator>Brad</dc:creator>
      <pubDate>Mon, 25 Nov 2019 16:31:17 +0000</pubDate>
      <link>https://forem.com/bradcypert/developer-burnout-9-tips-to-help-1pop</link>
      <guid>https://forem.com/bradcypert/developer-burnout-9-tips-to-help-1pop</guid>
      <description>&lt;p&gt;Burnout happens — especially developer burnout. It’s unfortunate, but a fact of life. However, it seems to happen to developers (and maybe Doctors, but you’re not my target audience) far more often than other professions. It may manifest in the emotion of dread, knowing you have to go in to work tomorrow. Or it may manifest in sadness, just thinking about staring at code. Or it may possibly manifest as anger, thinking about the project that won’t seem to work.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Just a heads up, this post originally aired on &lt;a href="https://www.bradcypert.com/developer-burnout-9-tips-to-help/" rel="noopener noreferrer"&gt;BradCypert.com&lt;/a&gt; but has been formatted for your reading pleasure on Dev.to&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Unfortunately, &lt;a href="https://digiday.com/marketing/crisis-boiling-surface-burnout-growing-problem-inside-agencies/" rel="noopener noreferrer"&gt;we’ve found that ping-pong tables and dart boards aren’t the cure for developer burnout&lt;/a&gt;. Instead, we’ve seen that being given ownership and shown appreciation for your work helps far more than the silicon valley staples of free food or entertainment. Plus, it also helps to have a team that you care about and that also cares about you. It’s all about being engaged in the day-to-day.&lt;/p&gt;

&lt;p&gt;Unfortunately, burn-out is something that can be difficult for you, the developer, to prevent. &lt;a href="https://www.infoworld.com/article/2625739/developer-burnout--time-to-end-the--disposable-geek--mentality.html" rel="noopener noreferrer"&gt;It’s something best prevented by your employer&lt;/a&gt;, by ensuring that you can stay engaged and can focus on the work you’re interested in.&lt;/p&gt;

&lt;p&gt;Whatever you experience in regards to burnout, you can fight it. I’ve successfully fought burnout in the past but have also failed to fight it — to the point where I just left my job.&lt;/p&gt;

&lt;p&gt;Unfortunately, the consequences of burn out can be far more dangerous than just leaving your job. I’ve seen many people post about burnout and their “next play” being in a completely different field. There have also been recent discussions around &lt;a href="http://www.clarkgaither.com/the-very-real-connections-between-job-burnout-and-suicide/" rel="noopener noreferrer"&gt;a connection between burnout and suicide rates&lt;/a&gt;. However, with the proper help you can fight burnout and get back to doing what you love.&lt;/p&gt;

&lt;p&gt;Here’s nine (hopefully helpful) tips I have to help fight burnout (without leaving your job).&lt;/p&gt;

&lt;h1&gt;
  
  
  1. Accept that you are burnt out.
&lt;/h1&gt;

&lt;p&gt;When you’re thinking about work, coding, or a project and have no positive emotions about it — you’re likely burnt out. If you’re reading this post, it’s pretty likely that you’re burnt out or are on the cusp of becoming burnt out. And that’s okay! But if that is the case, you need to accept that you may be burnt out.&lt;/p&gt;

&lt;p&gt;If you don’t accept that you’re experiencing burn out, you’re likely to only further your level of burn out. In the case of uncertainty, I would suggest treating yourself as if you are burnt out. There’s no harm in any of these tips if you’re not burnt out, and some can be rather enjoyable regardless of whether you are or aren’t burnt out.&lt;br&gt;
A person wearing red shoes in a hammock.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi0.wp.com%2Fwww.bradcypert.com%2Fwp-content%2Fuploads%2F2019%2F03%2Fclear-sky-daydreaming-hammock-914929.jpg%3Fresize%3D640%252C475" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi0.wp.com%2Fwww.bradcypert.com%2Fwp-content%2Fuploads%2F2019%2F03%2Fclear-sky-daydreaming-hammock-914929.jpg%3Fresize%3D640%252C475" alt="Photo of a person's legs in a hammock, picture taken from the camera-person's chest"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  2. Take a break or a vacation.
&lt;/h1&gt;

&lt;p&gt;Take a vacation and just get away from work. Don’t bring your laptop and don’t check your email while you’re away. Instead of checking Slack, consider cutting yourself some slack and just “go offline” for a bit.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.healthination.com/health/vacation-work-burnout" rel="noopener noreferrer"&gt;Studies are currently quite mixed about this&lt;/a&gt;, but from personal experience I can vouch for it. &lt;a href="https://ideas.ted.com/the-secrets-to-a-truly-restorative-vacation/" rel="noopener noreferrer"&gt;Taking a regular vacation is a great way to help prevent burn out&lt;/a&gt; and help fight it if you’re already experiencing burnout.&lt;/p&gt;

&lt;p&gt;However, to be successful, you can’t just go somewhere else. You need to take an effort to leave work behind you, and just enjoy something else entirely. For me, this is easiest when exploring a new city. It’s very easy for me to get caught up experiencing new sights and new things while exploring a new city. This helps set my focus on “the moment” and less on work or projects.&lt;/p&gt;

&lt;p&gt;That being said, you don't have to go anywhere to enjoy a vacation from work. Some of my most favorite vacations have been stay-cations, where I stay at home and do something local to where I live.&lt;/p&gt;

&lt;h1&gt;
  
  
  3. Read a book.
&lt;/h1&gt;

&lt;p&gt;Perhaps a vacation sounds intimidating or the logistics behind taking a trip is overwhelming — consider staying in and reading instead. I recently fell back into regular reading and it has been a fantastic way to relax, reduce stress, and just enjoy something created by someone else.&lt;/p&gt;

&lt;p&gt;If you’re determined to keep up on soft skills or business news, you can keep up with the latest Business book or &lt;a href="https://www.goodreads.com/author/show/1791.Seth_Godin" rel="noopener noreferrer"&gt;whatever Seth Godin has put out lately&lt;/a&gt;. However, If you find that to be intimidating but are still interested in reading something, I strongly recommend finding a nice piece of fiction written by a great world builder like &lt;a href="https://www.goodreads.com/author/show/6252.Robert_Jordan?from_search=true" rel="noopener noreferrer"&gt;Robert Jordan&lt;/a&gt; or &lt;a href="https://www.goodreads.com/author/show/26.Anne_McCaffrey" rel="noopener noreferrer"&gt;Anne McCaffrey&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi0.wp.com%2Fwww.bradcypert.com%2Fwp-content%2Fuploads%2F2019%2F03%2Fchatting-cups-dog-745045.jpg%3Fresize%3D640%252C434" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi0.wp.com%2Fwww.bradcypert.com%2Fwp-content%2Fuploads%2F2019%2F03%2Fchatting-cups-dog-745045.jpg%3Fresize%3D640%252C434" alt="Four friends sitting with on a blanket, outdoors, with a small dog."&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  4. Visit with friends or family.
&lt;/h1&gt;

&lt;p&gt;When was the last time you did this? I mean really did this. Not just a lunch date with a friend, or picking up your stuff from you parents place. When was the last time you actually sat down with some friends or family, not rushed for time, and just talked about your life?&lt;/p&gt;

&lt;p&gt;&lt;a href="https://link.springer.com/article/10.1007/s10902-006-9025-2" rel="noopener noreferrer"&gt;A study in 2007 shows that having close friends and spending time with them has a direct effect on happiness&lt;/a&gt;. So reach out a friend and invite them out for a drink or to participate in a movie marathon. Maybe go for a hike or a walk!&lt;/p&gt;

&lt;p&gt;Of course, the option of making new friends exists too. This idea works great, as often times, you can do this while doing #5 or #6 (we’ll get to those in a second). A great plan of attack to meet new people and work on something new or explore a new hobby is attending a &lt;a href="https://www.meetup.com/" rel="noopener noreferrer"&gt;Meetup&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;While Meetup.com seems to have a ton of tech related Meetups, you can also find Meetups for other things. I’m in a local hiking group and a local kayaking group, for example.&lt;/p&gt;

&lt;h1&gt;
  
  
  5. Start something new.
&lt;/h1&gt;

&lt;p&gt;Some companies offer perks like 20% time to work on something that you think is valuable to work on. It’s a great opportunity to mix up the mundane and work with new people or a new language or technology. Starting a side project can be a great way to focus and channel your energy, even if it’s not development related. Fun fact: This blog started as a burn-out side project.&lt;/p&gt;

&lt;p&gt;But even if your company doesn’t offer these perks, that doesn’t mean you cant pursue a new project. Although everyone has different obligations in life, most people can make the time to work on something interesting — something they care about. If you spend an hour on Netflix each night after putting the kids to sleep, consider spending thirty minutes on Netflix and thirty minutes working on that book you’ve always wanted to write. In a week, you’ll have contributed three and half hours towards writing a book!&lt;/p&gt;

&lt;p&gt;If you’re burnt out on “that terrible Java project” but still want to code on something, try exploring alternatives. If you don’t want to touch code at all consider starting a blog or try your hand at designing something. Maybe take the time to work on a home improvement project. Find something that will either challenge you or offer you a meaningful sense of fulfillment when completed and tackle it!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi1.wp.com%2Fwww.bradcypert.com%2Fwp-content%2Fuploads%2F2019%2F03%2Facoustic-adult-fun-346726.jpg%3Fresize%3D640%252C427" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi1.wp.com%2Fwww.bradcypert.com%2Fwp-content%2Fuploads%2F2019%2F03%2Facoustic-adult-fun-346726.jpg%3Fresize%3D640%252C427" alt="A person playing a ukulele."&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  6. Explore a hobby.
&lt;/h1&gt;

&lt;p&gt;Explore a hobby – especially if this is a hobby that you’re naturally skilled at. This is great because if you’re skilled at it, you’re likely to succeed in your practicing of the hobby and it likely won’t be as mentally exhausting as development.&lt;/p&gt;

&lt;p&gt;Ultimately the goal is to help establish an identity for yourself outside of being a developer. What does that mean? A lot of us dedicate a slice of our lives to our career. We may work twelve hour days, or be expected to promptly respond to emails 24/7, or maybe are always on-call. This leads us to always be work-focused.&lt;/p&gt;

&lt;p&gt;And if it’s not work, maybe it’s something else that’s development related. Maintaining an open source project, working on a side project, or even trying to learn a new technology. It feels so easy to get caught up in the endless cycle of development, that, even if you’re not “working”, you’re still focusing on work or development.&lt;/p&gt;

&lt;p&gt;Hobbies help give us something else that makes us who we are. I’m not just Brad, the Software Architect — I’m Brad, a hiker and photographer that does software for a living. An interesting side effect from having hobbies is that you have more people to socialize with, and you don’t bore the socks off of people by talking about programming when they just don’t understand it.&lt;/p&gt;

&lt;h1&gt;
  
  
  7. Go outside.
&lt;/h1&gt;

&lt;p&gt;Not only are some of the most enjoyable activities outdoors, but &lt;a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC2290997/" rel="noopener noreferrer"&gt;studies have shown that sunlight helps the body produce serotonin, and serotonin helps promote positive moods and a clearer mind&lt;/a&gt;. Additionally, &lt;a href="https://onlinelibrary.wiley.com/doi/abs/10.1111/jpm.12168" rel="noopener noreferrer"&gt;exercise has been shown to promote happiness&lt;/a&gt;. With these things in mind, I can’t stress enough how important outdoor activities are. When the weather is warm, I try to take a walk at work each day. Small, but helpful.&lt;/p&gt;

&lt;p&gt;However, I wasn’t always a fan of being outdoors (that sounds weird, but its true). It wasn’t until about two years ago — when I met my dog, Luna — that I found myself making time to go outdoors. In a weird way, the responsibility of need to take her for walks helped force me to spend more time outside, and when we go out on those walks, I enjoy them a lot, now.&lt;/p&gt;

&lt;p&gt;I’m not saying you have to go adopt a dog, but do try to find a way to motivate yourself to spend time outside. The sunlight and fresh air does really help.&lt;/p&gt;

&lt;h1&gt;
  
  
  8. Seek professional help.
&lt;/h1&gt;

&lt;p&gt;If you’re struggling with burn out, professional help may be the best option. &lt;a href="https://news.ycombinator.com/item?id=17274656" rel="noopener noreferrer"&gt;There is no issue with requesting psychological or psychiatric help if there doesn’t seem to be a way to help your burnout&lt;/a&gt;. A lot of times, simply talking with a therapist or even a career counselor can help.&lt;/p&gt;

&lt;p&gt;Fortunately, science is further investigating burnout, so there’s hopes for new breakthroughs in treating burnout. &lt;a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC3434360/" rel="noopener noreferrer"&gt;Unfortunately, for now, most of the evidence seems inconclusive in studies&lt;/a&gt;, but I’ve seen &lt;a href="https://onlinelibrary.wiley.com/doi/abs/10.1002/pon.1293" rel="noopener noreferrer"&gt;art therapy mentioned&lt;/a&gt; &lt;a href="https://columbian.gwu.edu/can-art-therapy-defuse-teacher-burnout" rel="noopener noreferrer"&gt;a lot&lt;/a&gt; with anecdotal successes.&lt;/p&gt;

&lt;p&gt;Regardless, there are people and processes in place to help cope with (or fight) developer burnout. Finding the right one for you may take some time, or effort, but it’s definitely worth it.&lt;/p&gt;

&lt;p&gt;Also, &lt;a href="https://www.forbes.com/sites/kaytiezimmerman/2017/10/09/these-employers-are-taking-millennials-mental-health-seriously/" rel="noopener noreferrer"&gt;a lot of companies have started to offer mental health days and other psych-related forms of compensation&lt;/a&gt;.&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi0.wp.com%2Fwww.bradcypert.com%2Fwp-content%2Fuploads%2F2019%2F03%2Fadult-business-chill-450271.jpg%3Fresize%3D640%252C427" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi0.wp.com%2Fwww.bradcypert.com%2Fwp-content%2Fuploads%2F2019%2F03%2Fadult-business-chill-450271.jpg%3Fresize%3D640%252C427" alt="A man smiling near his computer. A sticky-note with the words "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  9. Stop exhibiting behavior that leads to burnout.
&lt;/h1&gt;

&lt;p&gt;This one may seem obvious, but I want to mention it as its the most important. If you are burnt out, then you have to identify what is burning you out and stop doing it.&lt;/p&gt;

&lt;p&gt;Maybe you’re working twelve hour days. If so — Stop. Talk to your manager about it and inform them of your concerns regarding a work life balance. If they want to keep you around, they will help you find that balance.&lt;/p&gt;

&lt;p&gt;Maybe you’re working on a project that you just can’t stand to work on. Maybe it’s dreadfully boring or you’re struggling and just cant seem to figure it out. Either find help or find a different project to work on. Sometimes you do have to push through and see unenjoyable work to completion, but if that’s all you’re doing — consider doing something else.&lt;/p&gt;

&lt;p&gt;If your burnout stems from your team, talk to them about it. Don’t point fingers or try to pass blame, but instead explain to them how you’re feeling and what you feel might help you feel better. If nothing comes out of that, talk with your manager and consider trying to switch team.&lt;/p&gt;

&lt;p&gt;If your burnout comes from the thought of writing code, try to find something else to do for a while. While working as a Software Developer for CARFAX, I had a few months where I helped design internal tools. This was such a pleasant reprieve from writing code and really helped me stay motivated. Plus, it let me explore a new interest.&lt;/p&gt;

&lt;p&gt;How do you cope with burnout? Feel free to share your successes or concerns below. We’re all in this together.&lt;/p&gt;

</description>
      <category>career</category>
      <category>tips</category>
      <category>burnout</category>
    </item>
    <item>
      <title>Interview with Indie Game Dev Barry Rowe of Roaring Cat Games</title>
      <dc:creator>Brad</dc:creator>
      <pubDate>Sun, 24 Nov 2019 15:54:51 +0000</pubDate>
      <link>https://forem.com/bradcypert/interview-with-indie-game-dev-barry-rowe-of-roaring-cat-games-4b4f</link>
      <guid>https://forem.com/bradcypert/interview-with-indie-game-dev-barry-rowe-of-roaring-cat-games-4b4f</guid>
      <description>&lt;p&gt;I've got the podcast itch, and I just can't seem to scratch it. Believe me, I tried. I even recorded my 2nd episode of Design Doc just yesterday and have already published it out for your listening pleasure! I thought that would help, but I'm so ready to record episode three now!&lt;/p&gt;

&lt;p&gt;In this episode, I talk with Barry Rowe of Roaring Cat Games, an Indie GameDev shop in Louisville, Kentucky. We talk about the tools he leverages while developing games, how his day job (of Android Developer) carries over to working on Games, and tips for aspiring game developers.&lt;/p&gt;


&lt;div class="ltag__user ltag__user__id__278821"&gt;
  
    .ltag__user__id__278821 .follow-action-button {
      background-color: #5013c2 !important;
      color: #ffffff !important;
      border-color: #5013c2 !important;
    }
  
    &lt;a href="/barryrowe" class="ltag__user__link profile-image-link"&gt;
      &lt;div class="ltag__user__pic"&gt;
        &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--5MoykFAc--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://res.cloudinary.com/practicaldev/image/fetch/s--fPnTBAVF--/c_fill%2Cf_auto%2Cfl_progressive%2Ch_150%2Cq_auto%2Cw_150/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/278821/33e4e9c8-4c67-45a5-9686-ae4aec3705dc.jpg" alt="barryrowe image"&gt;
      &lt;/div&gt;
    &lt;/a&gt;
  &lt;div class="ltag__user__content"&gt;
    &lt;h2&gt;
&lt;a class="ltag__user__link" href="/barryrowe"&gt;Barry Rowe&lt;/a&gt;Follow
&lt;/h2&gt;
    &lt;div class="ltag__user__summary"&gt;
      &lt;a class="ltag__user__link" href="/barryrowe"&gt;&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;


&lt;p&gt;If you're interested in listening in (and I hope you are!) &lt;a href="https://anchor.fm/design-doc/episodes/Roaring-Cat-Games-w-Barry-Rowe-e95l8d"&gt;you can find the episode here on Anchor.fm&lt;/a&gt; or anywhere that podcasts can be heard.&lt;/p&gt;

&lt;p&gt;Think I've missed an important question in this episode? You can leverage the anchor.fm link above to record your own questions and send them in to be asked on the podcast (your voice and all)!&lt;/p&gt;

</description>
      <category>podcast</category>
      <category>gamedev</category>
      <category>interview</category>
    </item>
    <item>
      <title>Announcing the Design Doc Podcast</title>
      <dc:creator>Brad</dc:creator>
      <pubDate>Tue, 12 Nov 2019 22:28:10 +0000</pubDate>
      <link>https://forem.com/bradcypert/announcing-the-design-doc-podcast-1o5c</link>
      <guid>https://forem.com/bradcypert/announcing-the-design-doc-podcast-1o5c</guid>
      <description>&lt;p&gt;Hey there! I'm a bit ashamed to say that my first Dev.to post is self-promotion, but this is the first big thing that felt worth sharing! I just launched a Podcast! It's called Design Doc, and the goal is to help more junior developers gain knowledge around project development, tools, and technologies.&lt;/p&gt;

&lt;p&gt;The vision involves showing how experienced developers do their work, often in their spare time. This highlights the idea that, when trying to ship something, it's often okay to skimp on the nine-to-five requirements like tests, CI/CD, etc.&lt;/p&gt;

&lt;p&gt;My first interview is with a long-time friend and engineer at LinkedIn. We talk about one of his personal projects and how he's built it. We cover the tech side as well as the project side so developers can get some insights into building their own product.&lt;/p&gt;

&lt;p&gt;I'd really appreciate it if you'd check out the first episode and let me know your thoughts :)&lt;/p&gt;

&lt;p&gt;&lt;a href="https://anchor.fm/design-doc"&gt;https://anchor.fm/design-doc&lt;/a&gt;&lt;/p&gt;

</description>
      <category>podcast</category>
      <category>designdoc</category>
      <category>firstpost</category>
    </item>
  </channel>
</rss>
