-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathatom.xml
More file actions
266 lines (204 loc) · 43.3 KB
/
atom.xml
File metadata and controls
266 lines (204 loc) · 43.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>DevBoosts</title>
<link href="/atom.xml" rel="self"/>
<link href="http://devboosts.com/"/>
<updated>2017-05-16T00:31:35.065Z</updated>
<id>http://devboosts.com/</id>
<author>
<name>Chaz Gatian</name>
</author>
<generator uri="http://hexo.io/">Hexo</generator>
<entry>
<title>Building Material Themed Components</title>
<link href="http://devboosts.com/2017/05/15/building-material-themed-components/"/>
<id>http://devboosts.com/2017/05/15/building-material-themed-components/</id>
<published>2017-05-15T14:39:49.000Z</published>
<updated>2017-05-16T00:31:35.065Z</updated>
<content type="html"><![CDATA[<p>If you’ve pulled in <a href="https://material.angular.io" target="_blank" rel="external">Material Design Components</a> into your Angular application,<br>you inevitability will find youself wanting to keep your component’s colors consistant with the theme of the rest of you application. In this post I will show you how to create themed components using the existing theme mixins provided by Material. This will not work if you’re using one of the built-in themes.<br><a id="more"></a><br>If you already know the basics you can skip down to <a href="#building-theme">Building a Themed Component</a></p>
<h3 id="Setup"><a href="#Setup" class="headerlink" title="Setup"></a>Setup</h3><p>For this project we are going to use the <a href="https://github.com/angular/angular-cli" target="_blank" rel="external">Angular CLI</a> to build your project. However, this tutorial will work with any project.</p>
<p>To start create a fresh Angular CLI project and follow the <a href="https://material.angular.io/guide/getting-started" target="_blank" rel="external">Getting Started Guide</a> <strong>steps one through three</strong>. </p>
<p>Next we will create a new file named <code>theme.scss</code> file in the <code>./src</code> folder of your Angular project. This file will provide the theme for our application.</p>
<img src="http://res.cloudinary.com/dk1rn2kmf/image/upload/c_scale,h_474/v1494792370/screen1_rgywut.png">
<p>Next open <code>angular-cli.json</code> and add a reference to <code>theme.scss</code>.</p>
<img src="http://res.cloudinary.com/dk1rn2kmf/image/upload/v1494792370/screen2_yzc3ss.png">
<p>Open <code>theme.scss</code> and add the candy-app theme provided in the <a href="https://material.angular.io/guide/theming" target="_blank" rel="external">material theme guide</a>.</p>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line">@<span class="keyword">import</span> <span class="string">'~@angular/material/theming'</span>;</div><div class="line"></div><div class="line">@<span class="keyword">include</span> mat-core();</div><div class="line"></div><div class="line"><span class="variable">$candy-app-primary</span>: mat-palette(<span class="variable">$mat-indigo</span>);</div><div class="line"><span class="variable">$candy-app-accent</span>: mat-palette(<span class="variable">$mat-pink</span>, A200, A100, A400);</div><div class="line"><span class="variable">$candy-app-warn</span>: mat-palette(<span class="variable">$mat-red</span>);</div><div class="line"></div><div class="line"><span class="variable">$candy-app-theme</span>: mat-light-theme(<span class="variable">$candy-app-primary</span>, <span class="variable">$candy-app-accent</span>, <span class="variable">$candy-app-warn</span>);</div></pre></td></tr></table></figure>
<p>Open <code>app.component.html</code> and add a button to verify the setup.</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="tag"><<span class="name">h1</span>></span></div><div class="line"> {{title}}</div><div class="line"><span class="tag"></<span class="name">h1</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">button</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">md-raised-button</span> <span class="attr">color</span>=<span class="string">"accent"</span>></span>Test<span class="tag"></<span class="name">button</span>></span></div></pre></td></tr></table></figure>
<p>Run <code>npm start</code> and verify your builds and displays renders the page below.</p>
<img src="http://res.cloudinary.com/dk1rn2kmf/image/upload/v1494792370/screen3_xuq4aq.png">
<h3 id="Create-A-New-Component"><a href="#Create-A-New-Component" class="headerlink" title="Create A New Component"></a>Create A New Component</h3><p>Now with our application is configured with a Material Theme we can build a component to utilize our theme.</p>
<p>First, create a new component in your project called <code>UserComponent</code>. This component is simply going to take an <code>Input</code> of <code>name</code> and display it within a <code>span</code> element.</p>
<p><strong>user.component.ts</strong><br><figure class="highlight typescript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">import</span> { Component, Input } <span class="keyword">from</span> <span class="string">'@angular/core'</span>;</div><div class="line"></div><div class="line"><span class="meta">@Component</span>({</div><div class="line"> selector: <span class="string">'app-user'</span>,</div><div class="line"> templateUrl: <span class="string">'./user.component.html'</span>,</div><div class="line"> styleUrls: [<span class="string">'./user.component.scss'</span>]</div><div class="line">})</div><div class="line"><span class="keyword">export</span> <span class="keyword">class</span> UserComponent {</div><div class="line"> <span class="meta">@Input</span>() name: <span class="built_in">string</span>;</div><div class="line">}</div></pre></td></tr></table></figure></p>
<p><strong>user.component.html</strong><br><figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"user"</span>></span></div><div class="line"> <span class="tag"><<span class="name">span</span>></span>Name: {{name}}<span class="tag"></<span class="name">span</span>></span></div><div class="line"><span class="tag"></<span class="name">div</span>></span></div></pre></td></tr></table></figure></p>
<p><strong>user.component.scss</strong><br><figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="selector-class">.user</span> {</div><div class="line"> <span class="attribute">padding</span>: <span class="number">10px</span>;</div><div class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid green;</div><div class="line">}</div></pre></td></tr></table></figure></p>
<p>Update <code>app.module.ts</code> to include your new component, and drop your component into <code>app.component.html</code>.<br><strong>app.component.html</strong><br><figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="tag"><<span class="name">h1</span>></span></div><div class="line"> {{title}}</div><div class="line"><span class="tag"></<span class="name">h1</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">app-user</span> <span class="attr">name</span>=<span class="string">"Dawson"</span>></span><span class="tag"></<span class="name">app-user</span>></span></div><div class="line"><span class="tag"><<span class="name">button</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">md-raised-button</span> <span class="attr">color</span>=<span class="string">"accent"</span>></span>Test<span class="tag"></<span class="name">button</span>></span></div></pre></td></tr></table></figure></p>
<p>The result:</p>
<img src="http://res.cloudinary.com/dk1rn2kmf/image/upload/v1494792370/screen4_rwa6rn.png">
<h3 id="Building-a-Themed-Component"><a href="#Building-a-Themed-Component" class="headerlink" title=" Building a Themed Component"></a><a name="building-theme"></a> Building a Themed Component</h3><p>So far we’ve added Material and created a new compnent that has some styles defined. Next we are going to add the secondary color from our Material Theme and add it as the background to the component.</p>
<p>First, create a new file called <code>user.component-theme.scss</code>. It’s important to note we are not using the existing <code>user.component.scss</code> file.<br>Understand that we are seperating the concerns of the stylesheets, the <code>user.component.scss</code> will be responsible all our <strong>non-theme</strong> CSS styles, and the <code>user.component-theme.scss</code> is used for all <strong>themed</strong> CSS styles, defined by our Material theme.</p>
<p>Just to reitterate, it’s fine to have color properties in <code>user.component.scss</code> but just not ones specific to your material theme, e.g. a green border from our example.</p>
<p>Open <code>user.component-theme.scss</code> and add the following:<br><figure class="highlight scss"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// Import Material Mixins</span></div><div class="line">@<span class="keyword">import</span> <span class="string">'~@angular/material/theming'</span>;</div><div class="line"></div><div class="line"><span class="comment">// Define a custom mixin that takes in the current theme</span></div><div class="line">@<span class="keyword">mixin</span> user-component-theme(<span class="variable">$theme</span>) {</div><div class="line"></div><div class="line"> <span class="comment">// Parse the theme and create variables for each color in the pallete</span></div><div class="line"> <span class="variable">$primary</span>: map-get(<span class="variable">$theme</span>, primary);</div><div class="line"> <span class="variable">$accent</span>: map-get(<span class="variable">$theme</span>, accent);</div><div class="line"> <span class="variable">$warn</span>: map-get(<span class="variable">$theme</span>, warn);</div><div class="line"></div><div class="line"> <span class="comment">// Create theme specfic styles</span></div><div class="line"> <span class="selector-class">.user-theme</span> {</div><div class="line"> <span class="attribute">background-color</span>: mat-color(<span class="variable">$accent</span>);</div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure></p>
<p>Open <code>theme.scss</code> and import the mixin.<br><figure class="highlight scss"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div></pre></td><td class="code"><pre><div class="line">@<span class="keyword">import</span> <span class="string">'~@angular/material/theming'</span>;</div><div class="line"><span class="comment">// Imports the custom mixin</span></div><div class="line">@<span class="keyword">import</span> <span class="string">'./app/components/user/user.component-theme'</span>;</div><div class="line"></div><div class="line">@<span class="keyword">include</span> mat-core();</div><div class="line"></div><div class="line"><span class="variable">$candy-app-primary</span>: mat-palette(<span class="variable">$mat-indigo</span>);</div><div class="line"><span class="variable">$candy-app-accent</span>: mat-palette(<span class="variable">$mat-pink</span>, A200, A100, A400);</div><div class="line"><span class="variable">$candy-app-warn</span>: mat-palette(<span class="variable">$mat-red</span>);</div><div class="line"></div><div class="line"><span class="variable">$candy-app-theme</span>: mat-light-theme(<span class="variable">$candy-app-primary</span>, <span class="variable">$candy-app-accent</span>, <span class="variable">$candy-app-warn</span>);</div><div class="line"></div><div class="line">@<span class="keyword">include</span> angular-material-theme(<span class="variable">$candy-app-theme</span>);</div><div class="line"><span class="comment">// Pass the theme variable to the mixin</span></div><div class="line">@<span class="keyword">include</span> user-component-theme(<span class="variable">$candy-app-theme</span>);</div></pre></td></tr></table></figure></p>
<p>Success, we now have a Material themed component.<br><img src="http://res.cloudinary.com/dk1rn2kmf/image/upload/v1494792370/screen5_z2aynk.png"></p>
]]></content>
<summary type="html">
<p>If you’ve pulled in <a href="https://material.angular.io">Material Design Components</a> into your Angular application,<br>you inevitability will find youself wanting to keep your component’s colors consistant with the theme of the rest of you application. In this post I will show you how to create themed components using the existing theme mixins provided by Material. This will not work if you’re using one of the built-in themes.<br>
</summary>
<category term="Angular, Material" scheme="http://devboosts.com/tags/Angular-Material/"/>
</entry>
<entry>
<title>Conventional Commits</title>
<link href="http://devboosts.com/2017/03/28/conventional-commits/"/>
<id>http://devboosts.com/2017/03/28/conventional-commits/</id>
<published>2017-03-29T00:07:57.000Z</published>
<updated>2017-05-16T00:32:43.617Z</updated>
<content type="html"><![CDATA[<p>If you’ve been following the recent Angular release canidates you can’t help but admire the changelog they are able to produce. Each version published has a nicely formated list of bugs, features, and breaking changes. How they were able to generate this type of changelog really interested me into digging deeper into their process and conventions. It turns out, implementing something like this into your workflow is actually quite simple.<br><a id="more"></a></p>
<h3 id="Standarizing-Commit-Messages"><a href="#Standarizing-Commit-Messages" class="headerlink" title="Standarizing Commit Messages"></a>Standarizing Commit Messages</h3><p>The first step is to start utilizing a convention when commiting changes to your codebase. The easiest way is to use the <a href="https://docs.google.com/document/d/1QrDFcIiPjSLDn3EL15IJygNPiHORgU1_OOAqWjiDU5Y/preview" target="_blank" rel="external">conventions</a> created by the AngularJS team.</p>
<p>A more readable form of this can be found from Angular Material team’s <a href="https://github.com/angular/material2/blob/master/CONTRIBUTING.md#-commit-message-guidelines" target="_blank" rel="external">Code Convention Guidelines</a>. At a minimum, each commit message contains a <em>type</em>, <em>scope</em> and <em>subject</em>. In the following format:</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><type>(<scope>): <subject></div></pre></td></tr></table></figure>
<h3 id="Add-Tooling"><a href="#Add-Tooling" class="headerlink" title="Add Tooling"></a>Add Tooling</h3><p>Making sure we commit changes using this format can be teadius at first. To make life easier add <a href="http://Commitizen.github.io/cz-cli/" target="_blank" rel="external">Commitizen</a> as a development dependency. This provides a command line utlity that will walk you through each portion of the commit message.</p>
<p>Install commitizen<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">yarn add commitizen -D</div></pre></td></tr></table></figure></p>
<p>Add <a href="https://github.com/commitizen/cz-conventional-changelog" target="_blank" rel="external">conventional-cz</a><br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">yarn add cz-conventional-changelog -D</div></pre></td></tr></table></figure></p>
<p>Update <code>package.json</code><br>First add a new script named commit which executes <code>git-cz</code> (Commitizen)<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">scripts : {</div><div class="line"> "commit": "git-cz"</div><div class="line"> ...</div><div class="line">}</div></pre></td></tr></table></figure></p>
<p>Then add an additional block called config<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">"config": {</div><div class="line"> "commitizen": {</div><div class="line"> "path": "cz-conventional-changelog"</div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure></p>
<p>Stage your changes by running <code>git add .</code> followed by <code>npm run commit</code>.<br><img src="http://res.cloudinary.com/dk1rn2kmf/image/upload/v1490656960/conventional-commits1_fc70yy.gif"></p>
<p>Success!</p>
<h3 id="Preventing-Poor-Commit-Messages"><a href="#Preventing-Poor-Commit-Messages" class="headerlink" title="Preventing Poor Commit Messages"></a>Preventing Poor Commit Messages</h3><p>Having this tooling is great, but what about that one developer that just doesn’t seem to get it and is stuck in their ways? Thankfully, preventing commits that do not meet the convention is simple to do by installing a <a href="https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks" target="_blank" rel="external">git hook</a>. But to be honest, I’ve never configured a Git hook. Thankfully, <a href="https://github.com/typicode/husky" target="_blank" rel="external">Husky</a> makes configuration painless.</p>
<p>First install Husky:<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">yarn add husky -D</div></pre></td></tr></table></figure></p>
<p>Next install <a href="https://github.com/kentcdodds/validate-commit-msg" target="_blank" rel="external">validate-commit-msg</a><br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">yarn add validate-commit-msg -D</div></pre></td></tr></table></figure></p>
<p>Update your <code>package.json</code> scripts:<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">scripts: {</div><div class="line"> "commitmsg": "validate-commit-msg"</div><div class="line">}</div></pre></td></tr></table></figure></p>
<p>Now any commit messages that do not follow the convention will error to the developer.</p>
<img src="http://res.cloudinary.com/dk1rn2kmf/image/upload/v1490660503/conventional-commits2_vgu3nh.gif">
<h3 id="Generating-a-Changlog-and-Versioning"><a href="#Generating-a-Changlog-and-Versioning" class="headerlink" title="Generating a Changlog and Versioning"></a>Generating a Changlog and Versioning</h3><p>Now that our project is setup lets see the added benefits this provides. To kick off the next step we are going to install <code>standard-version</code>. This plugin not only will generate the proper version for our project, but it will also create a change log with proper commit hashes, and issue numbers. </p>
<p>Install standard-version<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">yarn add standard-version -D</div></pre></td></tr></table></figure></p>
<p>Update your <code>package.json</code> scripts:<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">scripts: {</div><div class="line"> "release": "standard-version"</div><div class="line">}</div></pre></td></tr></table></figure></p>
<p>Run <code>npm run release</code>. This will examine your Git history and based off your commits generate the proper version and a CHANGELOG.md.</p>
<hr>
<h3 id="Demoing-This-Process-to-Your-Team"><a href="#Demoing-This-Process-to-Your-Team" class="headerlink" title="Demoing This Process to Your Team"></a>Demoing This Process to Your Team</h3><p>To help demo how this would work in the real world, I’ve setup a repository with everything configured. First <a href="https://github.com/devboosts/conventional-commits" target="_blank" rel="external">fork this repository</a>.</p>
<p>With the newly forked project lets enable Issue tracking. This will give us a feel for how this would work when we collaborate on a real project.</p>
<ul>
<li>Open the project’s settings in GitHub and enable <strong>Features > Issues</strong></li>
<li>Create a new issue called <strong>feat: Implement Footer</strong></li>
<li>Clone your forked repository</li>
<li>Verify you’re in the newly created directory and run <code>npm install</code> (or <code>yarn</code>)</li>
<li>Create a new branch by running <code>git branch feat/footer</code></li>
<li>Open <code>./src/index.html</code> and add a <code>footer</code> element</li>
<li>Save your changes</li>
<li>From the CLI run <code>git add .</code> followed by <code>npm run commit</code></li>
</ul>
<p>Follow the prompts adding, using the following information:<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">type:feature</div><div class="line">scope: index</div><div class="line">short description: added a footer</div><div class="line">long description: <empty></div><div class="line">breaking changes: <empty></div><div class="line">issues closed: <enter your issue number ie. #1></div></pre></td></tr></table></figure></p>
<ul>
<li>Push your changes to GitHub with <code>git push</code></li>
<li>Next open a pull request and merge your changes in</li>
</ul>
<p>Notice the <code>CHANGELOG.md</code> and <code>package.json</code> version are unchanged. The reason they haven’t been updated is because we need to first cut a release. Let’s do that now.</p>
<ul>
<li>From your command line switch back to master by running <code>git checkout master</code></li>
<li>Pull in your latest changes by running <code>git pull</code></li>
<li>Run <code>npm run release</code></li>
</ul>
<p>This runs <a href="https://github.com/conventional-changelog/standard-version" target="_blank" rel="external">standard-version</a> which examines your commit history to properly update the <code>CHANGELOG.md</code>, version in <code>package.json</code>, and tags a branch in your repository.<br>Finally, run <code>git push --follow-tags origin master</code> to push your version changes and tag your repository with this version.</p>
<h3 id="Beyond…"><a href="#Beyond…" class="headerlink" title="Beyond…"></a>Beyond…</h3><p>Checkout this great <a href="https://marketplace.visualstudio.com/items?itemName=KnisterPeter.vscode-commitizen" target="_blank" rel="external">plugin</a> for VSCode. It integrates with commitizen and provides a wizard like experience.</p>
<p>I haven’t actually tried this out yet, but to take things to the next level you could look into <a href="https://github.com/semantic-release/semantic-release" target="_blank" rel="external">semantic-release</a>. It promises fully automated packaging and releasing. Basically, what standard-version does, with the added benefit of integrations with GitHub and Travis CI.</p>
]]></content>
<summary type="html">
<p>If you’ve been following the recent Angular release canidates you can’t help but admire the changelog they are able to produce. Each version published has a nicely formated list of bugs, features, and breaking changes. How they were able to generate this type of changelog really interested me into digging deeper into their process and conventions. It turns out, implementing something like this into your workflow is actually quite simple.<br>
</summary>
<category term="Git, Dev Tools" scheme="http://devboosts.com/tags/Git-Dev-Tools/"/>
</entry>
<entry>
<title>Top 10 Angular VS Code Extensions</title>
<link href="http://devboosts.com/2017/02/08/top-10-vs-code-extensions/"/>
<id>http://devboosts.com/2017/02/08/top-10-vs-code-extensions/</id>
<published>2017-02-08T06:00:00.000Z</published>
<updated>2017-02-08T10:19:31.686Z</updated>
<content type="html"><![CDATA[<p>I’ve been using Visual Studio Code now for over a year and absolutely love the productivity it’s given me. Previously, my go to editor was Visual Studio 2015, mostly due to working with ASP.NET Web Forms. Now that I’m focusing more on front end development and Angular, I don’t think I’d start a new project without VS Code by my side.</p>
<a id="more"></a>
<h2 id="Here’s-a-list-of-my-Top-10-Angular-VS-Code-Extensions"><a href="#Here’s-a-list-of-my-Top-10-Angular-VS-Code-Extensions" class="headerlink" title="Here’s a list of my Top 10 Angular VS Code Extensions"></a>Here’s a list of my Top 10 Angular VS Code Extensions</h2><p>#10 <a href="https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer" target="_blank" rel="external">Bracket Pair Colorizer</a><br>Keep your sanity when working with brackets and braces. Extremely useful while navigating code with mulitple arrow functions.<br><img src="http://res.cloudinary.com/dk1rn2kmf/image/upload/v1486523096/bracket-colorizer_cicdeq.gif"></p>
<p>#9 <a href="https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion" target="_blank" rel="external">HTML CSS Class Completion</a><br>Perfect for quickly decorating HTML with the project’s available class names. Unfortunately, the class names are not scoped to the component’s folder.<br><img src="http://res.cloudinary.com/dk1rn2kmf/image/upload/v1486523096/html-class-completion_lb3q2o.gif"></p>
<p>#8 <a href="https://marketplace.visualstudio.com/items?itemName=jakethashi.vscode-angular2-emmet" target="_blank" rel="external">Angular 2 TypeScript Emmet</a><br>If you haven’t learned Emmet yet it’s definitely something to put under your belt. This plugin allows you to use the syntax directly in component templates.<br><img src="http://res.cloudinary.com/dk1rn2kmf/image/upload/v1486523096/angular2-typescript-emmet_digepq.gif"></p>
<p>#7 <a href="https://marketplace.visualstudio.com/items?itemName=natewallace.angular2-inline" target="_blank" rel="external">angular2-inline</a><br>Provides syntax highlighting for CSS and HTML within inline templates.<br><img src="http://res.cloudinary.com/dk1rn2kmf/image/upload/v1486523096/angular2-inline_yi3evb.gif"></p>
<p>#6 <a href="https://marketplace.visualstudio.com/items?itemName=infinity1207.angular2-switcher" target="_blank" rel="external">angular2-switcher</a><br>Quickly switch between component, template, and styles with three simple key bindings.<br>Also supports Go to Definition of template variables by simply pressing F12 while cursor is on variable.<br><img src="http://res.cloudinary.com/dk1rn2kmf/image/upload/v1486523096/angular2-switcher_dif1ze.gif"></p>
<p>#5 <a href="https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons" target="_blank" rel="external">vscode-Icons</a><br>The best Icon Pack out there! Features Angular specific icons for pipes, directives, components, modules, routing, and services. Beautify the file explorer! :)<br><img src="http://res.cloudinary.com/dk1rn2kmf/image/upload/v1486523094/angular-icons_rhqxbp.png"></p>
<p>#4 <a href="https://marketplace.visualstudio.com/items?itemName=eg2.tslint" target="_blank" rel="external">TSLint</a><br>If you’re not linting TypeScript you should start, especially with <a href="https://github.com/mgechev/codelyzer" target="_blank" rel="external">codelyzer</a>. This plugin makes it dead simple to see issues in you TypeScript code. It even provides auto fixes!<br><img src="http://res.cloudinary.com/dk1rn2kmf/image/upload/v1486523095/tslint_uteshx.gif"></p>
<p>#3 <a href="https://marketplace.visualstudio.com/items?itemName=Mikael.Angular-BeastCode" target="_blank" rel="external">Angular 2+ Snippets</a><br>This is the most comprehensive snippet pack I’ve seen. It features 67 different snippets.</p>
<p>#2 <a href="https://marketplace.visualstudio.com/items?itemName=rbbit.typescript-hero" target="_blank" rel="external">TypeScript Hero</a><br>This plugin manages import statements and can automatically import missing dependencies. Can organize and sort imports.<br><img src="http://res.cloudinary.com/dk1rn2kmf/image/upload/v1486523096/typescript-hero_vxxzuk.gif"></p>
<p>#1 <a href="https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense" target="_blank" rel="external">Path Intellisense</a><br>If there’s one plugin you add make sure it’s this one. This plugin enables autocompletion to file paths, which provides a huge boost when dealing with import statements.<br><img src="http://res.cloudinary.com/dk1rn2kmf/image/upload/v1486523096/path-intelisense_ge4e0u.gif"></p>
<p>Well thats the end of the list. Hopefully, you found one or two extensions you didn’t know about.<br>Feel free to add in the comments below any extensions I missed. Also checkout my post on adding <a href="http://devboosts.com/2017/02/04/Recommend-VS-Code-Extensions-For-Your-Repository/">Project Recommend VS Code Extensions</a> to help share these extensions with the team.</p>
]]></content>
<summary type="html">
<p>I’ve been using Visual Studio Code now for over a year and absolutely love the productivity it’s given me. Previously, my go to editor was Visual Studio 2015, mostly due to working with ASP.NET Web Forms. Now that I’m focusing more on front end development and Angular, I don’t think I’d start a new project without VS Code by my side.</p>
</summary>
<category term="VSCode, Angular" scheme="http://devboosts.com/tags/VSCode-Angular/"/>
</entry>
<entry>
<title>Project Recommended VS Code Extensions</title>
<link href="http://devboosts.com/2017/02/04/Recommend-VS-Code-Extensions-For-Your-Repository/"/>
<id>http://devboosts.com/2017/02/04/Recommend-VS-Code-Extensions-For-Your-Repository/</id>
<published>2017-02-04T19:53:00.000Z</published>
<updated>2017-05-16T00:32:43.617Z</updated>
<content type="html"><![CDATA[<p>One of my favorite aspects of <a href="https://code.visualstudio.com/" target="_blank" rel="external">Visual Studio Code</a> is the vibrant library of commumnity created extensions. While the IDE is great out of the box, these extensions give an added boost you just can’t live without.<br><a id="more"></a><br>When developing an application with a framework like Angular, there may be a handful of extensions your team finds useful to use. VS Code makes sharing these extentions is actually quite easy.</p>
<p>Open the command pallet (<code>F1</code>) and type <code>Extensions: Configured Recommended Extensions (Workspace)</code>. This will create a file named <code>extensions.json</code> in your <code>.vscode</code> folder. Edit the file by supplying a list of extensions by <code>${publisher}.${name}</code>. For example:</p>
<figure class="highlight javascript"><figcaption><span>extensions.json</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line">{</div><div class="line"> <span class="comment">// See http://go.microsoft.com/fwlink/?LinkId=827846</span></div><div class="line"> <span class="comment">// for the documentation about the extensions.json format</span></div><div class="line"> <span class="string">"recommendations"</span>: [</div><div class="line"> <span class="comment">// Extension identifier format: ${publisher}.${name}. Example: vscode.csharp</span></div><div class="line"> msjsdiag.debugger-<span class="keyword">for</span>-chrome <span class="comment">// Debugging In Chrome</span></div><div class="line"> ]</div><div class="line">}</div></pre></td></tr></table></figure>
<p>The publisher of the extension is listed beside the extension name when you open the extension in the Marketplace. Add a comment next to each extension to specify why the extension is useful. Save and commit to the repository.</p>
<img src="/assets/images/vs-code.jpg">
<p>Next time a team member opens the project in VS Code, they will be greeted with a message to install the workspace’s recommended extensions. </p>
]]></content>
<summary type="html">
<p>One of my favorite aspects of <a href="https://code.visualstudio.com/">Visual Studio Code</a> is the vibrant library of commumnity created extensions. While the IDE is great out of the box, these extensions give an added boost you just can’t live without.<br>
</summary>
<category term="VS Code, Boost" scheme="http://devboosts.com/tags/VS-Code-Boost/"/>
</entry>
<entry>
<title>Angular vs AngularJS i18n</title>
<link href="http://devboosts.com/2016/09/28/Angular-vs-AngularJS-i18n/"/>
<id>http://devboosts.com/2016/09/28/Angular-vs-AngularJS-i18n/</id>
<published>2016-09-29T00:54:17.000Z</published>
<updated>2017-05-16T00:32:43.617Z</updated>
<content type="html"><![CDATA[<p>I was recently looking into how Angular differs from AngularJS in regards to internationalization (also known as i18n). I was delighted to see Angular makes use of the Internationalization API to perform date and currency conversions. This allows language specific formatting to be preformed directly by the browser.<br><a id="more"></a><br>To contrast, in AngularJS a developer would be required to load a culture specific helper script that would provide the proper formats per culture. With Angular and a modern browser, this is functionality is supported out-of-the-box.</p>
<p>The Internationalization API is supported in the following browsers, to get Angular pipes to work with older IE and Safari 9 a polyfill is required.</p>
<p>Can I Use internationalization? <a href="http://caniuse.com/#feat=internationalization" target="_blank" rel="external">Checkout the support</a> for the internationalization API across the major browsers from <a href="http://caniuse.com" target="_blank" rel="external">caniuse.com</a>.</p>
]]></content>
<summary type="html">
<p>I was recently looking into how Angular differs from AngularJS in regards to internationalization (also known as i18n). I was delighted to see Angular makes use of the Internationalization API to perform date and currency conversions. This allows language specific formatting to be preformed directly by the browser.<br>
</summary>
<category term="Angular, Browser APIs" scheme="http://devboosts.com/tags/Angular-Browser-APIs/"/>
</entry>
<entry>
<title>core-js Merged into Angular</title>
<link href="http://devboosts.com/2016/09/21/core-js-Merged-into-Angular/"/>
<id>http://devboosts.com/2016/09/21/core-js-Merged-into-Angular/</id>
<published>2016-09-22T00:50:29.000Z</published>
<updated>2017-05-16T00:32:43.617Z</updated>
<content type="html"><![CDATA[<p><a href="https://github.com/zloirock/core-js" target="_blank" rel="external">core-js</a> is a modular library created by Denis Pushkarev that’s recently been opening some eyes in the web comm<br>Previously, it has gained serious reputation by use of Babel, which utilizes it for many of its polyfills.<br><a href="https://github.com/angular/angular/commit/66df335998d097fa8fe46dec41f1183737332021" target="_blank" rel="external">Most recently</a>, it was pulled into Angular as the de facto standard for shimming older IE 9-10 with ES2015 features.<br><a id="more"></a><br>What makes core-js unique is how beautifully architected it is. Each polyfill can be pulled in individually, making it a truly modular library. As with other libraries such as es6-shim a developer would need to require the entire library to make use of one ES2015 feature like promises. With core-js a developer can simply import a Promise polyfill with one import.</p>
<p>For example, using a bundler such as Webpack, you can compose your own polyfill.js with only the polyfills the application requires.<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">require</span>(<span class="string">'core-js/fn/map'</span>);</div><div class="line"><span class="built_in">require</span>(<span class="string">'core-js/fn/set'</span>);</div><div class="line"><span class="built_in">require</span>(<span class="string">'core-js/fn/weak-map'</span>);</div><div class="line"><span class="built_in">require</span>(<span class="string">'core-js/fn/promise'</span>);</div></pre></td></tr></table></figure></p>
<p>More impressively core-js’s <a href="https://github.com/zloirock/core-js#supported-engines" target="_blank" rel="external">browser support</a> goes all the way back to IE6.</p>
<p>If you’re looking for a one-stop shop library to provide polyfills, core-js is it!</p>
]]></content>
<summary type="html">
<p><a href="https://github.com/zloirock/core-js">core-js</a> is a modular library created by Denis Pushkarev that’s recently been opening some eyes in the web comm<br>Previously, it has gained serious reputation by use of Babel, which utilizes it for many of its polyfills.<br><a href="https://github.com/angular/angular/commit/66df335998d097fa8fe46dec41f1183737332021">Most recently</a>, it was pulled into Angular as the de facto standard for shimming older IE 9-10 with ES2015 features.<br>
</summary>
<category term="Angular" scheme="http://devboosts.com/tags/Angular/"/>
</entry>
<entry>
<title>BroadcastChannel API</title>
<link href="http://devboosts.com/2016/09/19/BroadcastChannel-API/"/>
<id>http://devboosts.com/2016/09/19/BroadcastChannel-API/</id>
<published>2016-09-20T00:28:50.000Z</published>
<updated>2017-05-16T00:32:43.627Z</updated>
<content type="html"><![CDATA[<p>Earlier last week, Chrome posted the new features coming in Chrome 54. One of the features that stood out was Broadcast channel. This API facilitates communicate with other windows, tabs, and service workers running within the same origin. It sounds oddly familiar to window.postMessage API, which allows you to do the same window to window communication. The big difference here is, window.postMessage requires you to maintain a reference to the window you want to communicate with.<br><a id="more"></a><br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> popup = <span class="built_in">window</span>.open(<span class="string">'https://www.coolwebsite.com'</span>);</div><div class="line">popup.postMessage(<span class="string">'Hello From Dev Boostie!'</span>);</div></pre></td></tr></table></figure></p>
<p>We all know maintaining references to windows is hard, right? If you’re not accustomed to it, the process goes something like this. Open a window, register it with an in memory collection. When the window closes, send an event to the parent and cleanup the reference. While it doesn’t sound too bad, managing these window references can become a serious pain and it’s tough to get right.</p>
<p>Thankfully BroadcastChannel API solves this. It provides the ability to send messages to all windows/tabs without knowledge of their existence. No more in memory window management!</p>
<p>The one downside to the BroadcastChannel API is it only works with same origin. If you want two windows to communicate with each other window.postMessage is the way to go.</p>
<p>For more on the BroadcastChannel API checkout this blog post from Google.</p>
<p>BroadcastChannel API Browser Support</p>
<p>Can I Use broadcastchannel? Data on support for the broadcastchannel feature across the major browsers from <a href="http://caniuse.com/#feat=broadcastchannel" target="_blank" rel="external">caniuse.com</a>.</p>
]]></content>
<summary type="html">
<p>Earlier last week, Chrome posted the new features coming in Chrome 54. One of the features that stood out was Broadcast channel. This API facilitates communicate with other windows, tabs, and service workers running within the same origin. It sounds oddly familiar to window.postMessage API, which allows you to do the same window to window communication. The big difference here is, window.postMessage requires you to maintain a reference to the window you want to communicate with.<br>
</summary>
<category term="JavaScript, Browser APIs" scheme="http://devboosts.com/tags/JavaScript-Browser-APIs/"/>
</entry>
</feed>