 |
bridgetownrb_williamkennedy.ninja.atom.xml - sfeed_tests - sfeed tests and RSS … |
 |
git clone git://git.codemadness.org/sfeed_tests |
 |
Log |
|
Files |
|
Refs |
|
README |
|
LICENSE |
|
--- |
|
bridgetownrb_williamkennedy.ninja.atom.xml (99283B) |
|
--- |
|
1 <?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/200… |
|
2 <svg class="animate-spin text-center -ml-1 mr-3 h-40 w-40 text-i… |
|
3 <circle class="opacity-25" cx="12" cy="12&qu… |
|
4 <path class="opacity-75" fill="currentColor" d=&q… |
|
5 </svg> |
|
6 <p>Loading article...</p> |
|
7 </div></content><author><name>William Kennedy</name></author><medi… |
|
8 |
|
9 <p>I have been building small sites with Bridgetown for a while no… |
|
10 |
|
11 <p>Even though it has evolved in ambitions, Bridgetown remains a s… |
|
12 |
|
13 <p>What is a static site generator?</p> |
|
14 |
|
15 <p>Before the days of frameworks, Javascript build tools and rando… |
|
16 |
|
17 <p>Now things are different, we have more advanced needs, but peop… |
|
18 |
|
19 <p>Tangent aide, I have been using Bridgetown for about two years … |
|
20 |
|
21 <p>This is a big deal because I grew up as an Irish farmer. Anyone… |
|
22 |
|
23 <p>I wanted to upgrade to the latest version and use Esbuild. I ra… |
|
24 |
|
25 <p>After following <a href="https://www.bridgetownrb.com/d… |
|
26 |
|
27 <div class="language-ruby highlighter-rouge"><div cla… |
|
28 <span class="mi">68</span> <span class="… |
|
29 <span class="err">╵</span> <span cl… |
|
30 </code></pre></div></div> |
|
31 |
|
32 <p><img src="/assets/images/posts/pokemon_meme.jpeg" … |
|
33 |
|
34 <p>In the end, it turned out that this was because I updated Tailw… |
|
35 |
|
36 <p>After I corrected my <code class="highlighter-rouge&quo… |
|
37 |
|
38 <p>Here is every step I followed:</p> |
|
39 |
|
40 <ol> |
|
41 <li>Visited this <a href="https://www.bridgetownrb.com/d… |
|
42 <li>Add the <code class="highlighter-rouge">gem … |
|
43 <li>Ran bundle <code class="highlighter-rouge">b… |
|
44 <li>Created a separate bridgetown site and copied over files <… |
|
45 <li>Ran <code class="highlighter-rouge">bin/brid… |
|
46 <li>Removed <code class="highlighter-rouge">star… |
|
47 <li>removed browser-sync and concurrently from my <code class… |
|
48 <li>Changed the <code class="highlighter-rouge">… |
|
49 </ol> |
|
50 |
|
51 <div class="language-ruby highlighter-rouge"><div cla… |
|
52 <span class="nb">require</span> <span class=&qu… |
|
53 |
|
54 <span class="no">Bridgetown</span><span class=&… |
|
55 |
|
56 <span class="c1"># Run rake without specifying any comma… |
|
57 <span class="n">task</span> <span class="s… |
|
58 |
|
59 <span class="c1">#</span> |
|
60 <span class="c1"># Standard set of tasks, which you can … |
|
61 <span class="c1">#</span> |
|
62 <span class="n">desc</span> <span class="s… |
|
63 <span class="n">task</span> <span class="s… |
|
64 <span class="no">Bridgetown</span><span class=… |
|
65 <span class="k">end</span> |
|
66 |
|
67 <span class="n">desc</span> <span class="s… |
|
68 <span class="n">task</span> <span class="s… |
|
69 <span class="no">ENV</span><span class="p… |
|
70 <span class="no">Bridgetown</span><span class=… |
|
71 <span class="k">end</span> |
|
72 |
|
73 <span class="n">desc</span> <span class="s… |
|
74 <span class="n">task</span> <span class="s… |
|
75 <span class="no">Bridgetown</span><span class=… |
|
76 <span class="k">end</span> |
|
77 |
|
78 <span class="n">namespace</span> <span class=&q… |
|
79 <span class="n">desc</span> <span class="… |
|
80 <span class="n">task</span> <span class="… |
|
81 <span class="n">sh</span> <span class="s… |
|
82 <span class="k">end</span> |
|
83 |
|
84 <span class="n">desc</span> <span class="… |
|
85 <span class="n">task</span> <span class="… |
|
86 <span class="n">sh</span> <span class="s… |
|
87 <span class="k">rescue</span> <span class=&quo… |
|
88 <span class="k">end</span> |
|
89 <span class="k">end</span> |
|
90 |
|
91 <span class="c1">#</span> |
|
92 <span class="c1"># Add your own Rake tasks here! You can… |
|
93 <span class="c1"># in order to write automations or othe… |
|
94 <span class="c1">#</span> |
|
95 <span class="c1"># task :my_task =&gt; :environment … |
|
96 <span class="c1"># puts site.root_dir</span> |
|
97 <span class="c1"># automation do</span> |
|
98 <span class="c1"># say_status :rake, "I'm a … |
|
99 <span class="c1"># end</span> |
|
100 <span class="c1"># end</span> |
|
101 |
|
102 </code></pre></div></div> |
|
103 |
|
104 <div class="language-bash highlighter-rouge"><div cla… |
|
105 </code></pre></div></div> |
|
106 |
|
107 <div class="language-bash highlighter-rouge"><div cla… |
|
108 </code></pre></div></div> |
|
109 |
|
110 <div class="language-bash highlighter-rouge"><div cla… |
|
111 </code></pre></div></div> |
|
112 |
|
113 <p>After that, I ran into the error where esbuild would not genera… |
|
114 |
|
115 <p>Next, I had to update my liquid templated because collections w… |
|
116 <div class="language-bash highlighter-rouge"><div cla… |
|
117 <span class="k">for </span>post <span class=&qu… |
|
118 <span class="c">#After</span> |
|
119 <span class="o">{</span>% <span class="k&q… |
|
120 |
|
121 In one of my components, I did the following to keep the same a tag href |
|
122 <span class="c"># Before</span> |
|
123 post.url |
|
124 <span class="c"># After</span> |
|
125 post.relative_url |
|
126 |
|
127 </code></pre></div></div> |
|
128 |
|
129 <p>Then I changed my Netlify to run <code class="highlight… |
|
130 |
|
131 <p>After that, I had to update my head to use <code class="… |
|
132 |
|
133 <div class="language-html highlighter-rouge"><div cla… |
|
134 <span class="nt">&lt;meta</span> <span clas… |
|
135 <span class="nt">&lt;meta</span> <span clas… |
|
136 {% capture resource_title %}{{ title | strip_html | strip_newlines }}{% … |
|
137 <span class="nt">&lt;title&gt;</span>{% if… |
|
138 |
|
139 <span class="nt">&lt;meta</span> <span clas… |
|
140 <span class="nt">&lt;link</span> <span clas… |
|
141 <span class="nt">&lt;script </span><span cl… |
|
142 </code></pre></div></div> |
|
143 |
|
144 <p>Finally, for the sitemap, I just installed this <a href=&quo… |
|
145 |
|
146 <p>Hopefully, that helps anyone who has run into trouble updating … |
|
147 |
|
148 <p>Long live Bridgetown.</p></content><author><name>William … |
|
149 <span>Photo by <a href="https://unsplash.com/@timmossholde… |
|
150 </span></p> |
|
151 |
|
152 <h1 id="what-does-scale-mean-anyway">What does scale mea… |
|
153 |
|
154 <p>At different points in a software lifecycle, scale means other … |
|
155 |
|
156 <h2 id="performance">Performance</h2> |
|
157 |
|
158 <p>One of the first definitions of scale is performance. Can your … |
|
159 |
|
160 <p>In the Rails community, there is a meme <em>but does it s… |
|
161 |
|
162 <p>For this reason, some engineers might create an application usi… |
|
163 |
|
164 <ul> |
|
165 <li>Network optimization</li> |
|
166 <li>performant technology practices (such as caching and databas… |
|
167 </ul> |
|
168 |
|
169 <h2 id="ability-to-build-fast">Ability to Build Fast<… |
|
170 |
|
171 <p>Business-minded people point to technology choices as an inhibi… |
|
172 |
|
173 <p>If a product catches the market’s attention, there will be a … |
|
174 |
|
175 <p>The ability to change and improve the product is scale. The cho… |
|
176 |
|
177 <p>As an application grows, it gets harder to change, update and i… |
|
178 |
|
179 <h2 id="support-staff">Support Staff</h2> |
|
180 |
|
181 <p>If a product is successful, the chances are you might need to h… |
|
182 |
|
183 <p>Knowledge is hard-earned by customer service staff after every … |
|
184 |
|
185 <h2 id="sales">Sales</h2> |
|
186 |
|
187 <p>Like customer service, sales is another area that is difficult … |
|
188 |
|
189 <p>If the product is complex, your sales process might include a t… |
|
190 |
|
191 <h2 id="processes">Processes</h2> |
|
192 |
|
193 <p>McDonalds is one the most successful franchises globally becaus… |
|
194 |
|
195 <p>You can focus on picking the right area, getting the initial fi… |
|
196 |
|
197 <p>Processes are the hardest to scale because they cover many area… |
|
198 |
|
199 <p>No matter what, we need to look at scale as something more than… |
|
200 Photo by <a href="https://unsplash.com/@kimberlyfarmer?utm_sourc… |
|
201 <h1 id="recently-read-2---irelands-dark-past-an-entrepreneur-who… |
|
202 |
|
203 <p>This is the second in my series of recently read where I give a… |
|
204 |
|
205 <h2 id="high-performance-browser-networking-by-ilya-grigorik&quo… |
|
206 |
|
207 <h3 id="why-read-it">Why read it?</h3> |
|
208 |
|
209 <p>I build web apps for a living, and I’m always keen to know ho… |
|
210 |
|
211 <p>One thing that has not changed is latency and bottlenecks. The … |
|
212 |
|
213 <p>Even though what we should do is obvious, the why things are th… |
|
214 |
|
215 <p>It is an excellent book to read if you want to learn about the … |
|
216 |
|
217 <h3 id="what-i-learned">What I Learned?</h3> |
|
218 |
|
219 <p>A lot. It would probably require more than one blog post to go … |
|
220 |
|
221 <h3 id="read-if">Read if</h3> |
|
222 |
|
223 <p>You’re a web developer.</p> |
|
224 |
|
225 <h2 id="the-prince-by-niccolò-machiavelli"><a href=&… |
|
226 |
|
227 <h3 id="why-read-it-1">Why read it?</h3> |
|
228 |
|
229 <p>When Trump was elected, I heard that this was because of his Ma… |
|
230 |
|
231 <p>I studied the author’s writings in college, and I have always… |
|
232 |
|
233 <p>The Prince was a controversial book. The ideas frightened peopl… |
|
234 |
|
235 <h3 id="what-i-learned-1">What I Learned?</h3> |
|
236 |
|
237 <p>From a historian’s perspective, this book must be a gem. Not … |
|
238 |
|
239 <p>Machiavelli writes a lot about Cesare Borgia. Cesare Borgia was… |
|
240 |
|
241 <p>That’s not to say Borgia only followed the Pope’s instructi… |
|
242 |
|
243 <p>Cesare Borgia was the Pope’s son. He should not have been abl… |
|
244 |
|
245 <h3 id="read-if-1">Read if</h3> |
|
246 |
|
247 <p>I found this a challenging read. I had to use Wikipedia to fill… |
|
248 |
|
249 <p>What about our political leaders? Behind closed doors, do polic… |
|
250 |
|
251 <p>Probably. Certainly, we can look to leaders such as Putin who h… |
|
252 |
|
253 <p>This book has inspired great stories throughout the years and I… |
|
254 |
|
255 <h2 id="a-dangerous-visionary-by-eddie-oconnor"><a hr… |
|
256 |
|
257 <h3 id="why-read-it-2">Why read it?</h3> |
|
258 |
|
259 <p>I have been <a href="https://williamkennedy.ninja/revie… |
|
260 |
|
261 <h3 id="what-i-learned-2">What I Learned?</h3> |
|
262 <p>One of Ireland’s most successful businessmen started his care… |
|
263 |
|
264 <p>O’Connor has proven to be one of those people. After starting… |
|
265 |
|
266 <p>A lot of his book covers his management style, which involves a… |
|
267 |
|
268 <p>“The problem with a lazy worker is that they want to make oth… |
|
269 |
|
270 <p>After leaving Board Na Mona, he covered how the media dragged h… |
|
271 |
|
272 <p>Nowadays, Ireland produces a lot of energy from wind. Solar and… |
|
273 |
|
274 <h3 id="read-if-2">Read if</h3> |
|
275 |
|
276 <p>If you want a personal and passionate perspective on renewable … |
|
277 |
|
278 <p>If you’re Irish and you like the idea of public servants bein… |
|
279 |
|
280 <h2 id="republic-of-shame-by-caelainn-hogan"><a href=… |
|
281 |
|
282 <h3 id="why-read-it-3">Why read it?</h3> |
|
283 |
|
284 <p>When travelling abroad and meeting new people, particularly Ame… |
|
285 |
|
286 <p>In 2017, news travelled around the world about a collection of … |
|
287 |
|
288 <p>The Catholic Church used to have a firm grip on Ireland much to… |
|
289 |
|
290 <p>The Church’s shackles are slowly being shattered piece by pie… |
|
291 |
|
292 <p>Many were unaware of Ireland’s ‘industrial shame complex’… |
|
293 |
|
294 <p>I lost my faith at the age of 15. School in 90’s Ireland neve… |
|
295 |
|
296 <p>This experience and many others led me to view the church with … |
|
297 |
|
298 <h3 id="what-i-learned-3">What I learned</h3> |
|
299 |
|
300 <p>Caelainn Hogan is a terrific writer. She does a fantastic job o… |
|
301 |
|
302 <p>The last mother and baby home closed in 1996. It’s on the str… |
|
303 |
|
304 <p>What was even more harrowing was the state’s involvement and … |
|
305 |
|
306 <p>The nuns come across as heartless. There are countless examples… |
|
307 |
|
308 <p>The survival rate of the children in mother and baby homes only… |
|
309 |
|
310 <p>Vulnerable women seemed to have no place to run. Ostracised by … |
|
311 |
|
312 <p>The choice these women had was an illusion. In some cases, the … |
|
313 |
|
314 <h3 id="read-if-3">Read if</h3> |
|
315 |
|
316 <p>You’re Irish and want a detailed overview of the mother and b… |
|
317 <span>Photo by <a href="https://unsplash.com/@cookiethepom… |
|
318 |
|
319 <p>No matter how much you try, refactoring is a hard sell. Why cha… |
|
320 |
|
321 <p>Refactoring is specific to software development as code is mall… |
|
322 |
|
323 <p>However, bad code can make life difficult for the next develope… |
|
324 |
|
325 <p>Yet, explaining the upsides of refactoring to anyone outside of… |
|
326 |
|
327 <h2 id="adopt-a-good-citizen-culture-at-work">Adopt a Go… |
|
328 |
|
329 <p>Refactoring can be as simple as reducing copy and paste code. I… |
|
330 |
|
331 <p>The next time you’ve wandered in the thick swathes of messy c… |
|
332 |
|
333 <p>Nothing needs to be said to anyone outside of the development t… |
|
334 |
|
335 <h2 id="keep-refactoring-small">Keep refactoring small&l… |
|
336 |
|
337 <p>If you try to refactor too much, it may take focus away from th… |
|
338 |
|
339 <p>Here is an example of refactoring I did once as part of a more … |
|
340 |
|
341 <div class="language-ruby highlighter-rouge"><div cla… |
|
342 <span class="k">def</span> <span class="… |
|
343 <span class="vi">@post</span> <span class=&… |
|
344 <span class="o">...</span> |
|
345 <span class="k">end</span> |
|
346 |
|
347 <span class="k">def</span> <span class="… |
|
348 <span class="vi">@post</span> <span class=&… |
|
349 <span class="o">...</span> |
|
350 <span class="k">end</span> |
|
351 |
|
352 <span class="k">def</span> <span class="… |
|
353 <span class="vi">@post</span> <span class=&… |
|
354 <span class="o">...</span> |
|
355 <span class="k">end</span> |
|
356 |
|
357 <span class="k">def</span> <span class="… |
|
358 <span class="vi">@post</span> <span class=&… |
|
359 <span class="o">...</span> |
|
360 <span class="k">end</span> |
|
361 <span class="k">end</span> |
|
362 </code></pre></div></div> |
|
363 |
|
364 <p>The above is an example; the real controller was 900 lines long… |
|
365 |
|
366 <div class="language-ruby highlighter-rouge"><div cla… |
|
367 <span class="n">before_acton</span> <span cla… |
|
368 |
|
369 <span class="k">def</span> <span class="… |
|
370 <span class="o">...</span> |
|
371 <span class="k">end</span> |
|
372 |
|
373 <span class="k">def</span> <span class="… |
|
374 <span class="o">...</span> |
|
375 <span class="k">end</span> |
|
376 |
|
377 <span class="k">def</span> <span class="… |
|
378 <span class="o">...</span> |
|
379 <span class="k">end</span> |
|
380 |
|
381 <span class="k">def</span> <span class="… |
|
382 <span class="o">...</span> |
|
383 <span class="k">end</span> |
|
384 |
|
385 <span class="kp">private</span> |
|
386 |
|
387 <span class="k">def</span> <span class="… |
|
388 <span class="vi">@post</span> <span class=&… |
|
389 <span class="k">end</span> |
|
390 <span class="k">end</span> |
|
391 </code></pre></div></div> |
|
392 |
|
393 <p>Now we have removed four lines of code by adding a <code cla… |
|
394 |
|
395 <p>This example was a simple refactor I did as part of another tas… |
|
396 |
|
397 <p>And that is what being a good citizen is all about.</p></… |
|
398 Photo by <a href="https://unsplash.com/@kimberlyfarmer?utm_sourc… |
|
399 |
|
400 <h2 id="intro">Intro</h2> |
|
401 |
|
402 <p>Recently I took a holiday which allowed me to catch up on some … |
|
403 |
|
404 <p>However, most of the recent books I enjoyed were non-fiction.&l… |
|
405 |
|
406 <h2 id="how-to-avoid-climate-disaster-by-bill-gates"><… |
|
407 |
|
408 <h3 id="why-i-wanted-to-read-it">Why I wanted to read It… |
|
409 |
|
410 <p>Even though I’ve heard about climate change since I was young… |
|
411 |
|
412 <h3 id="what-i-learned">What I Learned?</h3> |
|
413 |
|
414 <p>There is one important number to know. 51 billion. Thi… |
|
415 |
|
416 <ul> |
|
417 <li>Making things(cement, steel, plastic) 31%</li> |
|
418 <li>Electricity 27%</li> |
|
419 <li>Growing Things(plants, animals) 19%</li> |
|
420 <li>Getting around (cars, planes, trucks, cargo ships) 16%</l… |
|
421 <li>Keeping warm and cool(heating, cooling, refrigeration) 7%<… |
|
422 </ul> |
|
423 |
|
424 <p>The other thing I learned is that we can do this. As individual… |
|
425 |
|
426 <p>It can also work the other way. Some solutions save money. For … |
|
427 |
|
428 <h3 id="read-if">Read if</h3> |
|
429 |
|
430 <p>You want a broader understanding of climate change with some nu… |
|
431 |
|
432 <h2 id="atlas-shrugged-by-ayn-rand"><a href="htt… |
|
433 |
|
434 <h3 id="why-i-wanted-to-read-it-1">Why I wanted to read … |
|
435 |
|
436 <p>One of my favourite games is called <a href="https://en… |
|
437 |
|
438 <blockquote> |
|
439 <p>Lacking its own ingenuity, the parasite fears the visionary. … |
|
440 </blockquote> |
|
441 |
|
442 <p>Ayn Rand calls the parasites ‘looters’ in <a href="… |
|
443 |
|
444 <p>Bioshock is one of my favourite games, and when I heard that th… |
|
445 |
|
446 <h3 id="what-i-learned-1">What I Learned</h3> |
|
447 |
|
448 <p>I joke that this is the most exciting book about building a rai… |
|
449 |
|
450 <p>This book is fictional, but it was written midway during the Co… |
|
451 |
|
452 <p>Suffice it to say; I love reading books that are so divisive. T… |
|
453 |
|
454 <h3 id="read-if-1">Read if</h3> |
|
455 |
|
456 <p>I won’t recommend this book unless you’re pretty centrist. … |
|
457 |
|
458 <p>Rand is a terrific writer. Somehow, she was able to get me to r… |
|
459 Rand is a champion of the free market with little to no government inter… |
|
460 |
|
461 <h2 id="amusing-ourselves-to-death-by-neil-postman"><… |
|
462 |
|
463 <h3 id="why-i-wanted-to-read-it-2">Why I wanted to read … |
|
464 |
|
465 <p>If you would like to learn precisely how TV changed the minds o… |
|
466 |
|
467 <p>This book espouses the values of a ‘typographic mind’ and c… |
|
468 |
|
469 <h3 id="what-i-learned-2">What I Learned</h3> |
|
470 |
|
471 <p>The book is laid out in 2 parts. In the first part, Postman lay… |
|
472 |
|
473 <p>In the second part of the book, Postman then talks about the ef… |
|
474 |
|
475 <p>Early America had an unusually high literacy rate compared to o… |
|
476 |
|
477 <p>Contrast this with today, where key figures use a combination o… |
|
478 |
|
479 <p>Postman thinks the 1980s was closer to the book Brave New World… |
|
480 |
|
481 <p>If Postman lived till 2021, he would see that Huxley and Orwell… |
|
482 |
|
483 <h3 id="read-if-2">Read If</h3> |
|
484 |
|
485 <p>If you find it hard to explain why you should read, this is a g… |
|
486 |
|
487 <p>However, this book does not use science or statistics. Instead,… |
|
488 |
|
489 <h2 id="deep-sea-and-foreign-going-by-rose-george"><a… |
|
490 |
|
491 <h3 id="why-i-wanted-to-read-it-3">Why I wanted to read … |
|
492 |
|
493 <p>Rose George is easily one of my favourite authors. She explores… |
|
494 |
|
495 <p>My knowledge of the physical movement of goods around the world… |
|
496 |
|
497 <h3 id="what-i-learned-3">What I learned</h3> |
|
498 |
|
499 <p>In the book, she is travelling on a Maersk ship which is a comp… |
|
500 |
|
501 <p>There is also no manifest on board that matches what’s on the… |
|
502 |
|
503 <p>The Suez Canal takes ten days off the trip to the south because… |
|
504 |
|
505 <p>Piracy is still a problem. Somalian pirates can make more from … |
|
506 |
|
507 <p>The book is packed with even more exciting nuances exploring la… |
|
508 |
|
509 <h3 id="read-if-3">Read If</h3> |
|
510 |
|
511 <p>Do you ever wonder how stuff gets to your home? The answer is s… |
|
512 |
|
513 <p>Shipping has a lot of challenges ahead. We have to modernize a … |
|
514 Photo by <a href="https://unsplash.com/@kaitlynbaker?utm_source=… |
|
515 |
|
516 <p>One of the biggest mistakes I made with my clients is not makin… |
|
517 |
|
518 <p>Usually, I build the whole app with Rails with the marketing si… |
|
519 |
|
520 <p>However, changes are inevitably requested. There are generally … |
|
521 |
|
522 <ol> |
|
523 <li> |
|
524 <h4 id="design-changes">Design Changes</h4> |
|
525 </li> |
|
526 <li> |
|
527 <h4 id="business-logic-changes">Business Logic Chang… |
|
528 </li> |
|
529 <li> |
|
530 <h4 id="static-content-changes">Static Content Chang… |
|
531 </li> |
|
532 </ol> |
|
533 |
|
534 <p>The first two are down to my team and me. The 3rd one is differ… |
|
535 |
|
536 <p>Let’s illustrate. The client adds a task in Basecamp with wha… |
|
537 |
|
538 <p>A back and forth begins with the client that can drag out for h… |
|
539 |
|
540 <p>Changing text should not be a big deal, but we’ve made a big … |
|
541 |
|
542 <p>Simply put, my client deserves the same rapid feedback that dev… |
|
543 |
|
544 <h2 id="stop-back-and-forth">Stop Back And Forth</h2&… |
|
545 |
|
546 <p>In this industry, we spend a lot of time trying to improve the … |
|
547 |
|
548 <p>For me, Editmode is a step in the right direction for teams to … |
|
549 |
|
550 <p>So how does it work?</p> |
|
551 |
|
552 <p>Editmode acts as the central repository where the whole team ca… |
|
553 |
|
554 <p>It’s pretty straightforward. Instead of littering your codeba… |
|
555 |
|
556 <p>Then your product manager, co-founder or copywriter can press C… |
|
557 |
|
558 <p>They can also update the text using the Editmode website.</p… |
|
559 |
|
560 <p>The content is aggressively cached and served via Cloudflare.&l… |
|
561 |
|
562 <p>The company is new, but since it could save me quite a lot of t… |
|
563 |
|
564 <iframe width="560" height="315" src="https:… |
|
565 |
|
566 <h2 id="when-not-to-install-editmode">When Not To Instal… |
|
567 |
|
568 <p>In terms of product-market-fit, Editmode targets teams. For thi… |
|
569 |
|
570 <p>Editmode becomes useful when you want to expand beyond yourself… |
|
571 |
|
572 <p>The next time I start a project with a non-technical person, th… |
|
573 |
|
574 <p>Component driven design is one of the best things to come out o… |
|
575 |
|
576 <p>In a codebase, it’s easy for the different erb files to quick… |
|
577 |
|
578 <p><em>Consistency.</em></p> |
|
579 |
|
580 <p>View Components along with Storybook, can help solve this issue… |
|
581 |
|
582 <h2 id="why-use-storybook-with-view-components">Why use … |
|
583 |
|
584 <p>The main reason is that you can test edge cases with your desig… |
|
585 |
|
586 <ul> |
|
587 <li>Test edge cases with your design dynamically</li> |
|
588 <li>Share your style guide with your team, including your manage… |
|
589 <li>Document use cases</li> |
|
590 <li>Test components for accessibility issues.</li> |
|
591 </ul> |
|
592 |
|
593 <p>If I have convinced you at all, feel free to follow along.</… |
|
594 |
|
595 <h2 id="1-set-up-a-rails-app-optional">1. Set up a rails… |
|
596 |
|
597 <p>Experienced Rails developers usually read this blog. I’m assu… |
|
598 |
|
599 <div class="highlighter-rouge"><div class="highl… |
|
600 </code></pre></div></div> |
|
601 |
|
602 <h2 id="2-install-the-necessary-gems">2. Install the nec… |
|
603 |
|
604 <p>To note. As of writing, there is no generator for the <a hre… |
|
605 |
|
606 <div class="highlighter-rouge"><div class="highl… |
|
607 </code></pre></div></div> |
|
608 <div class="highlighter-rouge"><div class="highl… |
|
609 </code></pre></div></div> |
|
610 <p>Add <code class="highlighter-rouge">require &q… |
|
611 |
|
612 <div class="highlighter-rouge"><div class="highl… |
|
613 require_relative 'boot' |
|
614 |
|
615 require 'rails/all' |
|
616 require "view_component/storybook/engine" |
|
617 .... |
|
618 </code></pre></div></div> |
|
619 |
|
620 <p>Add <code class="highlighter-rouge">*/*.storie… |
|
621 |
|
622 <h2 id="2-configure-asset-hosts">2. Configure Asset Host… |
|
623 |
|
624 <p>If your view components depend on Javascript, CSS or other asse… |
|
625 |
|
626 <div class="highlighter-rouge"><div class="highl… |
|
627 config.action_controller.asset_host = 'http://localhost:3000' |
|
628 end |
|
629 </code></pre></div></div> |
|
630 |
|
631 <p>Naturally, you can do the same for staging and production.</… |
|
632 |
|
633 <h2 id="3-install-storybook-via-yarn">3. Install Storybo… |
|
634 |
|
635 <ol> |
|
636 <li>Add Storybook server as a dev dependency. The Storybook Cont… |
|
637 <div class="highlighter-rouge"><div class="h… |
|
638 </code></pre></div> </div> |
|
639 </li> |
|
640 <li>Add an NPM script to your package.json to start your Storybo… |
|
641 <div class="highlighter-rouge"><div class="h… |
|
642 { |
|
643 "scripts": { |
|
644 "storybook": "start-storybook" |
|
645 } |
|
646 } |
|
647 </code></pre></div> </div> |
|
648 </li> |
|
649 <li>Create a folder called <code class="highlighter-roug… |
|
650 <div class="highlighter-rouge"><div class="h… |
|
651 </code></pre></div> </div> |
|
652 </li> |
|
653 <li>Create a file called .storybook/main.js file to configure St… |
|
654 <div class="highlighter-rouge"><div class="h… |
|
655 </code></pre></div> </div> |
|
656 <div class="highlighter-rouge"><div class="h… |
|
657 module.exports = { |
|
658 stories: ['../test/components/**/*.stories.json'], |
|
659 // stories: ['../spec/components/**/*.stories.json'], i… |
|
660 addons: [ |
|
661 '@storybook/addon-controls', |
|
662 ], |
|
663 }; |
|
664 </code></pre></div> </div> |
|
665 </li> |
|
666 <li>Create the .storybook/preview.js file to configure Storybook… |
|
667 <div class="highlighter-rouge"><div class="h… |
|
668 </code></pre></div> </div> |
|
669 <div class="highlighter-rouge"><div class="h… |
|
670 export const parameters = { |
|
671 server: { |
|
672 url: `http://localhost:3000/rails/stories`, |
|
673 }, |
|
674 }; |
|
675 </code></pre></div> </div> |
|
676 <h2 id="4-your-first-storybook-component">4. Your Fi… |
|
677 </li> |
|
678 </ol> |
|
679 |
|
680 <p><code class="highlighter-rouge">ViewComponent::… |
|
681 Suppose our app has a <code class="highlighter-rouge">B… |
|
682 <div class="highlighter-rouge"><div class="highl… |
|
683 def initialize(button_text:) |
|
684 @button_text = button_text |
|
685 end |
|
686 end |
|
687 </code></pre></div></div> |
|
688 <p>We can write a stories describing the <code class="hig… |
|
689 So in spec/components/stories or test/components/stories, put in t… |
|
690 <div class="highlighter-rouge"><div class="highl… |
|
691 story(:with_short_text) do |
|
692 constructor(title: "my title") |
|
693 end |
|
694 |
|
695 story(:with_long_text) do |
|
696 constructor(title: "my title") |
|
697 end |
|
698 end |
|
699 </code></pre></div></div> |
|
700 |
|
701 <h2 id="5--generate-storybook-json">5. Generate Storybo… |
|
702 |
|
703 <p>Generate the Storybook JSON stories by running the rake task:&l… |
|
704 |
|
705 <p><code class="highlighter-rouge">rake view_compo… |
|
706 |
|
707 <p>Now you should be able to start the rails app and run the Story… |
|
708 rails s |
|
709 yarn storybook # in separate tab</p> |
|
710 |
|
711 <h2 id="configuration-rspec-only"><strong>Configur… |
|
712 |
|
713 <p>By Default ViewComponent::Storybook expects to find stories in … |
|
714 |
|
715 <p><code class="highlighter-rouge">config.view_com… |
|
716 |
|
717 <h2 id="gotchas">Gotcha’s</h2> |
|
718 |
|
719 <p>I had to add rack-cors gem and configure wildcard access for de… |
|
720 <div class="highlighter-rouge"><div class="highl… |
|
721 </code></pre></div></div> |
|
722 <p>In config/development.rb, I added the following lines:</p> |
|
723 |
|
724 <div class="highlighter-rouge"><div class="highl… |
|
725 config.action_controller.asset_host = 'http://localhost:5000&apo… |
|
726 config.middleware.insert_before 0, Rack::Cors do |
|
727 allow do |
|
728 origins '*' |
|
729 resource '/rails/stories/*', :headers =&gt; :any, … |
|
730 end |
|
731 end |
|
732 </code></pre></div></div> |
|
733 |
|
734 <p>Another Gotcha, I ran into. After you update the HTML for the c… |
|
735 |
|
736 <h2 id="conclusion">Conclusion</h2> |
|
737 |
|
738 <p>There you have it. Hopefully, this has gotten you up and runnin… |
|
739 |
|
740 <p>Happy coding.</p> |
|
741 |
|
742 <p> </p></content><author><name>William Kennedy</nam… |
|
743 Photo by <a href="https://unsplash.com/@villxsmil?utm_source=uns… |
|
744 |
|
745 <p>When it comes to project management, I don’t have any answers… |
|
746 |
|
747 <p>However, this article is not about how <em>I</em> b… |
|
748 |
|
749 <p>I once contracted with a company where the staff were petrified… |
|
750 |
|
751 <p>Ignorance was scorned, and employees scolded for not knowing mo… |
|
752 |
|
753 <p>After a few weeks, I could see the cause of the “slow product… |
|
754 |
|
755 <p>After each sprint, there would be new bugs that would arise fro… |
|
756 |
|
757 <p>The Jira tickets assigned to each developer started to compound… |
|
758 |
|
759 <p>I’ve observed this pattern in 2 other companies leading me to… |
|
760 |
|
761 <p>The first company I was able to help by making a presentation a… |
|
762 |
|
763 <p>The other companies I could not rescue.</p> |
|
764 |
|
765 <p>It’s funny reading the <a href="http://agilemanifesto… |
|
766 |
|
767 <p>Even the word sprint implies 100% all-out until you hit the fin… |
|
768 |
|
769 <h2 id="retro---lets-talk-about-what-went-wrong-more-than-what-w… |
|
770 |
|
771 <p>It’s good to talk about how we can improve. When playing any … |
|
772 |
|
773 <p>Yet, for some reason, critiquing the process becomes frowned up… |
|
774 |
|
775 <p>Even worse, people continue on this hedonic treadmill towards b… |
|
776 |
|
777 <p>The idea of the retro is to suggest improvements to the process… |
|
778 |
|
779 <h2 id="daily-standup---lets-talk-about-what-we-already-talked-a… |
|
780 |
|
781 <p>Another strange part of sprints is the daily meeting is the def… |
|
782 |
|
783 <p>Creative work is the result of deep work from hours of focus. S… |
|
784 |
|
785 <p>Let people self-motivate and treat them like adults. Everything… |
|
786 |
|
787 <h2 id="lifestyle">Lifestyle</h2> |
|
788 |
|
789 <p>The worst thing I would hate to do to my employees is have a da… |
|
790 |
|
791 <p>The two-week sprint cycle does not factor in mistakes and meeti… |
|
792 |
|
793 <h2 id="final-thoughts">Final thoughts</h2> |
|
794 |
|
795 <p>My sample size is small. Three companies in 5 years is not the … |
|
796 |
|
797 <p>I’ve seen development cycles done well, but it was never spri… |
|
798 |
|
799 <p>My partner is a product manager, and she regularly exclaims how… |
|
800 |
|
801 <p>Overall, when starting a project, taking the pain and barriers … |
|
802 |
|
803 <p><strong>Are too many bugs being created?</strong>&l… |
|
804 |
|
805 <p>Then write tests and use a CI build to help keep them under con… |
|
806 |
|
807 <p><strong>Is there pressure to get features in?</strong&… |
|
808 |
|
809 <p>Then hold off and make sure the parts you’re bringing in are … |
|
810 |
|
811 <p><strong>Is it hard to onboard a new team member?</stro… |
|
812 |
|
813 <p>Lower the barrier to get code to production.</p> |
|
814 |
|
815 <p>Ship small. Ship early. Ship smart. Ship often.</p></cont… |
|
816 Photo by <a href="https://unsplash.com/@lastly?utm_source=unspla… |
|
817 |
|
818 <p>I get asked about mobile apps a lot.</p> |
|
819 |
|
820 <p>My clients, who are not tech people, believe apps are pretty di… |
|
821 |
|
822 <p>To satisfy this requirement in the past, I turned to React Nati… |
|
823 |
|
824 <p>I know my feelings are subjective, but I don’t love building … |
|
825 Building for mobile involves more constraints than building for the web.… |
|
826 |
|
827 <p>Out of all the different options for building cross-platform mo… |
|
828 |
|
829 <p>When Basecamp announced the release of <a href="https:/… |
|
830 |
|
831 <p>After completing <a href="https://www.hackingwithswift.… |
|
832 |
|
833 <p>Turbo promised to make turning your Rails app into an iPhone ap… |
|
834 |
|
835 <p>However, you still have some complex gaps to fill in yourself.&… |
|
836 |
|
837 <ul> |
|
838 <li>Native Authentication, i.e. allow users to log in to your ap… |
|
839 <li>Push Notifications - send notifications from your app to the… |
|
840 </ul> |
|
841 |
|
842 <p>I started down this road and fiddled away on my own for a few w… |
|
843 |
|
844 <p>The answer was yes. </p> |
|
845 |
|
846 <p>After playing around with it for a few days, it’s hard not to… |
|
847 |
|
848 <p>Aside from wrapping your Rails app in a native view, it’s pos… |
|
849 |
|
850 <ul> |
|
851 <li>From day 1, my current project, <del>Koach</del>… |
|
852 <li>From day 1, I was able to quickly delegate <a href="… |
|
853 <li>Able to offer native experiences for certain sections of my … |
|
854 </ul> |
|
855 |
|
856 <p>I’m still building the iOS app for Koach, but my other projec… |
|
857 |
|
858 <ul> |
|
859 <li>Your web app needs to be <a href="https://turbo.hotw… |
|
860 <li>Knowledge of Swift is helpful, but I think many developers c… |
|
861 <li>Your web app should be mobile friendly by design to accommod… |
|
862 <li>For non-Jumpstart rails web app apps, you will have to do a … |
|
863 </ul> |
|
864 |
|
865 <p>Jumpstart does not endorse me, but I hope by writing this, I en… |
|
866 |
|
867 <p>This is a game changer for small businesses. The promise of Rea… |
|
868 |
|
869 <p>A world of high-quality hybrid apps awaits us. It should not be… |
|
870 |
|
871 |
