<?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>DEV Community: Ariel Caplan</title>
    <description>The latest articles on DEV Community by Ariel Caplan (@amcaplan).</description>
    <link>https://dev.to/amcaplan</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%2F3288%2F6288426.png</url>
      <title>DEV Community: Ariel Caplan</title>
      <link>https://dev.to/amcaplan</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/amcaplan"/>
    <language>en</language>
    <item>
      <title>Baby's First Keynote</title>
      <dc:creator>Ariel Caplan</dc:creator>
      <pubDate>Mon, 06 May 2019 02:03:38 +0000</pubDate>
      <link>https://dev.to/amcaplan/baby-s-first-keynote-2f9m</link>
      <guid>https://dev.to/amcaplan/baby-s-first-keynote-2f9m</guid>
      <description>&lt;p&gt;I'm on a plane, traveling back from RailsConf 2019 where I was one of the keynote speakers. My head is full of thoughts and reflections on my experiences before, during, and after the talk.&lt;/p&gt;

&lt;p&gt;I've given a few talks before, including several at previous RailsConfs, but this time was... different, somehow.&lt;/p&gt;

&lt;p&gt;I'd like to share my experiences with you, in the hope that you'll learn something of value along the way.&lt;/p&gt;

&lt;h3&gt;
  
  
  Genesis of the Talk
&lt;/h3&gt;

&lt;p&gt;The process that led to my talk, &lt;em&gt;The Stories We Tell Our Children&lt;/em&gt;, began circa 2.5 years ago, when my wife bought our first Israeli children's book, &lt;a href="http://www.ithl.org.il/page_13258"&gt;&lt;em&gt;A Tale of Five Balloons&lt;/em&gt;&lt;/a&gt; by Miriam Roth. I started to read it to my daughter nearly every night, and she loved it, but I honestly was bothered by the book. It was sad through and through, and I couldn't figure out why it was clearly a popular book. It took me months to learn how it had become popular, and even then I wasn't fully comfortable with it. It took at least a year to make my peace with the book, and to start to appreciate and even love it.&lt;/p&gt;

&lt;p&gt;Through the process, I started to see how literature and the society within which it exists are intimately connected. It made me reconsider a lot of the American early childhood literature I grew up with. And the thoughts began to percolate around whether this could be something worth exploring in the context of a conference talk.&lt;/p&gt;

&lt;p&gt;Time went on, and I began to read further. More Israeli books came into my life, and I continued to follow the pattern and see the connections. I started to seek out Israeli children's classics actively, and try to perceive how each connected with Israeli history. I also read some literary criticism, mainly &lt;a href="https://www.shimona.co.il/"&gt;that of Dr. Shimona Fogel&lt;/a&gt;, which helped clarify things for me as well.&lt;/p&gt;

&lt;p&gt;About 9 months ago, I decided I had enough material for a talk, and I had a sense of what I wanted to talk about. I submitted the topic to the RubyConf CFP, and was waitlisted, meaning I still got a free conference ticket, but would only give the talk if someone backed out at the last minute. No one did. In retrospect, this was a blessing; the talk was still somewhat raw and unrefined. I'm happy I got a few extra months to let things settle more in my head and on my slides.&lt;/p&gt;

&lt;h3&gt;
  
  
  Getting Accepted
&lt;/h3&gt;

&lt;p&gt;Since I had been waitlisted rather than rejected, I already knew my proposal was pretty good. So I edited the proposal a bit more, and submitted it to RailsConf.&lt;/p&gt;

&lt;p&gt;In case you're wondering, I didn't submit the talk to smaller conferences, for two reasons:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Small conferences tend to be on weekends. I don't go to conferences on Saturdays for religious reasons, and I also don't like the idea of making a long trip to a 2-day conference where one day is Saturday. Add the various Jewish holidays, and a great many conferences simply aren't relevant possibilities. RubyConf and RailsConf are wonderful exceptions to this rule, since they are specifically held midweek so as to interfere minimally  with attendees' lives and to let them have full weekends before and after the conference.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Even if a relevant conference could be found, I had a sense this talk was special. It was certainly special to me. And I wanted to make sure I get to share it with as many people as possible. RubyCentral conferences would be my best shot at sharing these ideas with a large group, between the attendees and the many people who watch the Confreaks videos afterwards.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;At any rate, one day I got an email from the conference organizers, stating that they'd decided my talk would make a great keynote, and they'd like me to take one of the keynote slots. Especially given that I'd been waitlisted last time, this wasn't what I had expected, so of course I was thrilled to have the opportunity!&lt;/p&gt;

&lt;p&gt;However, I was a little bit concerned. I knew I'd be addressing some Israeli history, which can be a sensitive and emotional topic for many people, and I definitely didn't want to ruin someone's conference experience by saying something insensitive or biased. Furthermore, because it's a keynote rather than one talk of many in a multi-track slot, it wouldn't be a talk people chose to attend. Keynotes also generally don't get an abstract published in advance, and even whether to include the title in the program was a choice. (I decided yes.) So I wanted to make sure I'd have resources available for content review. Once I received confirmation from the RubyCentral team that this would be made available to me, I accepted the slot and started improving the talk.&lt;/p&gt;

&lt;h3&gt;
  
  
  Cranking Up the Quality
&lt;/h3&gt;

&lt;p&gt;I've given &lt;a href="https://amcaplan.ninja/talks"&gt;several talks before&lt;/a&gt;, but this was a keynote. That means a bigger audience and higher expectations. So I set a higher bar for this talk and made every attempt to meet it.&lt;/p&gt;

&lt;p&gt;I knew more or less what I wanted to say, but somehow all sorts of ancillary information always manages to creep its way into the talk. And there were some things I wanted to discuss which would have been ill-advised in consideration of the goal of not conjuring up uncomfortable feelings for people during my talk.&lt;/p&gt;

&lt;p&gt;I expanded and pared down, again and again, until I felt pretty ready. Sadly, my talk was significantly longer than the recommended 40-50 minutes, so aside from wanting general feedback, I needed advice on what to take out.&lt;/p&gt;

&lt;p&gt;Some folks from the US and UK were visiting the Cloudinary Israel office, and I figured it would be a good opportunity to get feedback from an audience that would be fairly representative of the people who would ultimately hear the talk. I invited the visitors, and ended up with a room of 5 participants in the audience. I got some great feedback, and ended up making many significant changes (additions and deletions) in response to their comments.&lt;/p&gt;

&lt;p&gt;I rehearsed the talk once every 1-2 days for two weeks, each time tweaking a bit more. Once I felt comfortable with the newly edited version, I did a second round of testing on a group of my Israeli peers. They corrected a few things which I had confused due to being less sensitive to some finer points about Israeli culture. (I am, after all, an immigrant!) They also made a few suggestions to help me make it appeal more to the audience.&lt;/p&gt;

&lt;p&gt;The most important bit of feedback I got in both rounds was to make sure to continuously ground the historical/cultural content in something practical. One of my reviewers put it  this way: I was forcing people to maintain a long buffer, to remember a large percentage of the talk over many minutes, in order to understand the takeaways  at the end. This made it harder for an audience member to maintain focus and understand what's important to hold onto over time.&lt;/p&gt;

&lt;p&gt;I sent a video of a rehearsal to the organizers and noted the parts that likely needed content review. It tooks some back-and-forth to make the review happen, and it wasn't completed until the day prior to the talk, but thankfully it worked out.  My test audiences' feedback had already put me in a place where no further changes would be necessary. This was a great relief for me as the time drew near.&lt;/p&gt;

&lt;p&gt;In the meantime, I continued making small tweaks, even on the plane ride, or in the conference hotel, and even the morning of the talk when something clicked in my head and I wanted to include the idea.&lt;/p&gt;

&lt;p&gt;Some people have to "seal" a talk some time before giving it, in order to rehearse a final version and feel comfortable onstage. For me, though, a talk is a living entity, not done being developed until the moment I'm onstage and it's too late to make changes.  It's an outlet of my mind and my emotions, and it needs to reflect who I am and what I think and feel when I give the talk. That dynamism lets me bring my entire self to the presentation.&lt;/p&gt;

&lt;h3&gt;
  
  
  Giving the Talk
&lt;/h3&gt;

&lt;p&gt;It was time. I headed over to the convention center, and reached the main ballroom 15 minutes early. I hooked up the microphone and laptop, and then spent a few minutes talking to some friends who had also arrived early. That helped calm my nerves a bit, but with around 5 minutes to go, I decided I needed some quiet time. I went backstage, and took a few moments just to breathe and relax. Abby, one of the organizers, got up to make the morning announcements, and then it was time!&lt;/p&gt;

&lt;p&gt;I got up, took in the round of applause, took a deep breath, and started. The first couple of slides were completely scripted, which helped me get into the rhythm of the talk, and the rest was bullet points and notes to let me  speak more naturally. I heard the crowd laughing, crying, even gasping at one point, and I fed on that energy and connection to bring even more of myself into the talk.&lt;/p&gt;

&lt;p&gt;It's a surreal experience, being in front of a huge crowd and conveying ideas you care about deeply. At some point, at least for me, the power of the ideas themselves begins to carry you. You feel like you're floating, you forget that your body exists, you simply become a conduit for thought and emotion, via the medium of words.&lt;/p&gt;

&lt;p&gt;My memories of the talk itself are fairly sparse. I know I covered all the slides, and I remember a few key moments in time, but most of it is a big blur. I was in another world, yet very much connected with the audience at the same time.&lt;/p&gt;

&lt;h3&gt;
  
  
  Recovery
&lt;/h3&gt;

&lt;p&gt;In the past, I tend to take audience questions on the side after the talk, and then take a break for a while, and later in the day start going to talks again. This time, I had a couple of talks I really wanted to hear. So I went and listened. And then it was lunch break, but instead of eating I went back to my room, took a shower, put on more comfortable clothes, and went back to the conference with a clearer head. Still, it took a few hours to feel completely back to normal.&lt;/p&gt;

&lt;h3&gt;
  
  
  Reactions
&lt;/h3&gt;

&lt;p&gt;I was overwhelmed and often surprised by people's reactions to my talk. I imagined I'd get some interesting responses, but even so, a few things caught me by surprise. Some highlights:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;An attendee from Venezuela told me about how much he values hearing about other cultures, and expressed his frustration that Americans don't fully understand the situation in his country, and that's a story that needs to be told.&lt;/li&gt;
&lt;li&gt;An attendee originally from Pakistan (now living in the US) noted that he isn't legally allowed to visit Israel. For him, this was an enlightening experience and a chance to learn more about Israeli culture, to see the humanity of Israelis.&lt;/li&gt;
&lt;li&gt;An American Jewish attendee described to me how excited he was to see someone obviously Jewish onstage talking about Jewish history. He said it made him feel seen. He's never been actively excluded from the programming community, but it still meant a lot to him to have representation in this sort of public forum.&lt;/li&gt;
&lt;li&gt;Two Israeli Jews in attendance (probably the only ones aside from myself) told me about their feelings of shock and wonderment in seeing the books they read to their children onscreen at the biggest conference for Rails developers in the US. They were thrilled to have the opportunity to tell their family and friends back home what had  happened across the Atlantic.&lt;/li&gt;
&lt;li&gt;A father approached me to talk about the concerns he shares with me about the books he reads to his children. Sometimes he's noticed messages that he realizes are problematic, and he appreciated me raising awareness of the issue.&lt;/li&gt;
&lt;li&gt;A programmer who works for TED came over to compliment my presentation style, and we got into a scintillating discussion of how TED has impacted the way people give talks, for better and for worse.&lt;/li&gt;
&lt;li&gt;Someone I'd met the previous day approached me and told me they have been dabbling in writing a children's book. They gave me a copy to look at and asked me to share my thoughts.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Many other people approached me in the days following my talk. Some wanted to connect on a more practical level; I was invited to be a guest on two podcasts, which should be a fascinating experience. Mainly, though, people wanted to share all kinds of reflections, mostly centered around being more aware of the messages in children's books and in the stories we tell.&lt;/p&gt;

&lt;h3&gt;
  
  
  My Takeaways
&lt;/h3&gt;

&lt;p&gt;I'm still unpacking the experience, but I've drawn a few lessons from my little adventure.&lt;/p&gt;

&lt;p&gt;First is the power of vulnerability. This talk put me in a potentially very vulnerable place. It involved many of my own feelings, both about literature and about the society in which my wife and I have chosen to live and raise our children. But I found that people were very receptive to my honesty and openness about myself. There are certainly limits, and I needed to take great care to ensure I wouldn't trod on someone else's feelings. But I was amazed at how positively people reacted to the talk and the content.&lt;/p&gt;

&lt;p&gt;Next is the value of letting ideas simmer. This talk came to be over a period of years, as the result of a personal journey. Even once I put together the initial abstract, nearly a year passed before I gave the talk onstage. The passage of time allowed me to clarify my goals in the talk and what exactly I wanted to convey in the time allotted.&lt;/p&gt;

&lt;p&gt;Third is the value of testing. I thought I had a pretty good talk, but I found out I was too close to the material. Hearing the reactions of a test audience helped me to notice the ways in which my talk could be improved and made more valuable for them. Because this isn't about me getting to spew at people. It's about what they carry with them when they exit the room.&lt;/p&gt;

&lt;p&gt;Fourth, I was prompted a few times to make the talk feel more  relevant. It's easy for a speaker to forget that you need to have a strong and clear answer to the question, "Why should I care about any of this?" And it needs to be stated early and often. I think my talk was much better received because I chose to scatter some of the takeaways and lessons throughout, rather than concentrating everything at the end of the talk.&lt;/p&gt;

&lt;p&gt;Finally, I was intrigued to see how different people took different things away from the talk. Some focused more on issues of literal children's literature, while others wanted to talk about messaging in media and in programmer culture. Everyone listened to the same talk, but heard something a bit different. This reminded me that as a speaker, you can't control what your audience will hear, but that's OK. Maybe everyone hears what they need to hear at that time. It's a gift to them; they choose what to do with it. And my job as speaker is to give up the illusion of control and allow each attendee to interpret in their own way.&lt;/p&gt;

&lt;p&gt;Thank you, dear reader, for listening. I hope it was worth the time and energy you've invested, and you're a bit wiser now than you were before reading. I'd love to hear what you learned from my experiences in the comments.&lt;/p&gt;

</description>
      <category>career</category>
      <category>speaking</category>
      <category>conferences</category>
    </item>
    <item>
      <title>Speeding up a Simple Static Site (With Help from Cloudinary!)</title>
      <dc:creator>Ariel Caplan</dc:creator>
      <pubDate>Thu, 24 Jan 2019 19:06:43 +0000</pubDate>
      <link>https://dev.to/amcaplan/speeding-up-a-simple-static-site-with-help-from-cloudinary-f48</link>
      <guid>https://dev.to/amcaplan/speeding-up-a-simple-static-site-with-help-from-cloudinary-f48</guid>
      <description>&lt;h3&gt;
  
  
  Diagnosing The Patient
&lt;/h3&gt;

&lt;p&gt;For the last 2 years, I've run &lt;a href="https://devempathybook.club" rel="noopener noreferrer"&gt;Dev Empathy Book Club&lt;/a&gt;, and the site hasn't changed much. I've tried to keep it low-effort so I can focus on the community and the content we're producing. One casualty of this was that the site, while simple, wasn't very performant. (Google's&lt;br&gt;
&lt;a href="https://developers.google.com/speed/pagespeed" rel="noopener noreferrer"&gt;PageSpeed Insights&lt;/a&gt; gave it a very low score of 30/100 on mobile.)&lt;/p&gt;

&lt;p&gt;I recently began working at &lt;a href="https://cloudinary.com" rel="noopener noreferrer"&gt;Cloudinary&lt;/a&gt;, and I realized it's pretty embarrassing that, as an employee of a company whose product is all about optimizing media on the web, I have a personal site that does a terrible job of it.&lt;/p&gt;



&lt;p&gt;The final bit of encouragement came from fellow Cloudinarian &lt;a href="https://twitter.com/etportis" rel="noopener noreferrer"&gt;Eric Portis&lt;/a&gt;, who published &lt;a href="https://www.smashingmagazine.com/2017/07/website-speed-test-image-analysis-tool/" rel="noopener noreferrer"&gt;an article&lt;/a&gt; about &lt;a href="https://webspeedtest.cloudinary.com/" rel="noopener noreferrer"&gt;Website Speed Test&lt;/a&gt;, a free tool from Cloudinary to grade image performance on your site. When I ran it against the Dev Empathy Book Club site, I saw that users had to download 1.5MB, which could be optimized down to 370kB, i.e. about 1/4 of their weight. I also knew these images were being served directly from GitHub Pages, without any CDN, so on mobile devices the page load was pretty slow.&lt;/p&gt;

&lt;p&gt;On top of all this, there was a good amount of render-blocking JS and CSS being downloaded without a CDN.&lt;/p&gt;

&lt;p&gt;All this meant slower load times, and lower scores in search results. There was no good reason for it, except that I didn't have the know-how to improve things, or the time to learn how to do it.&lt;/p&gt;
&lt;h3&gt;
  
  
  Enter Cloudinary
&lt;/h3&gt;

&lt;p&gt;Cloudinary is a robust but easy-to-use service to upload, transform, and serve images and videos. The free tier contains way more than you'll ever need for a simple static site, so it's a great choice for e.g. personal sites with a few images you'd like to serve efficiently.&lt;/p&gt;

&lt;p&gt;One awesome feature of Cloudinary which made this incredibly simple is the ability to &lt;a href="https://cloudinary.com/documentation/upload_images#auto_fetching_remote_images" rel="noopener noreferrer"&gt;auto-fetch images&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;For example, consider this URL:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;https://res.cloudinary.com/caplan/image/fetch/https://amcaplan.ninja/images/ninja-cropped.png
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The URL consists of&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;https://res.cloudinary.com/caplan/image/fetch/
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;which tells Cloudinary you want to fetch an image for the &lt;code&gt;caplan&lt;/code&gt; cloud (you create a cloud with a unique identifier when you sign up for Cloudinary), and the rest is the URL where the image can be found:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;https://amcaplan.ninja/images/ninja-cropped.png
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;When you hit this URL, Cloudinary will fetch the image in the background, and begin serving via CDN.&lt;/p&gt;

&lt;p&gt;Theoretically we could take all the images on the site and preface with the fetch incantation, but there's a better way. Cloudinary has another feature called Auto Upload, which lets you create folders which are proxies for web locations. So if we create a &lt;code&gt;ninja_images&lt;/code&gt; directory mapped to &lt;code&gt;https://amcaplan.ninja/images/&lt;/code&gt;, the URL looks like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;https://res.cloudinary.com/caplan/image/upload/ninja-images/ninja-cropped.png
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Much better! Here's the result:&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%2Fres.cloudinary.com%2Fcaplan%2Fimage%2Fupload%2Fninja-images%2Fninja-cropped.png" 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%2Fres.cloudinary.com%2Fcaplan%2Fimage%2Fupload%2Fninja-images%2Fninja-cropped.png" alt="ninja image served via Cloudinary"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now comes the fun part.&lt;/p&gt;

&lt;p&gt;Cloudinary lets you edit images by adding transformations right into the URL. For example, by adding &lt;code&gt;/w_100&lt;/code&gt; before the image location, we creates a 100-pixel-wide version of the same image:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;https://res.cloudinary.com/caplan/image/upload/w_100/ninja-images/ninja-cropped.png
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&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%2Fres.cloudinary.com%2Fcaplan%2Fimage%2Fupload%2Fw_100%2Fninja-images%2Fninja-cropped.png" 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%2Fres.cloudinary.com%2Fcaplan%2Fimage%2Fupload%2Fw_100%2Fninja-images%2Fninja-cropped.png" alt="small ninja image"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You can crop, set gravity (focusing on a region of the image or on human faces), scale, add text layers or image overlays, and do a whole bunch more awesome stuff, just by adding to the URL.&lt;/p&gt;

&lt;p&gt;This opens up the opportunity to create multiple versions for various breakpoints, driven via CSS. So if you take a large version as the original, you can tell Cloudinary to crop/scale the image as you see fit, no Photoshop skills required!&lt;/p&gt;

&lt;p&gt;As one concrete example, here's a large image for wide screens:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;https://res.cloudinary.com/dev-empathy-book-club/image/upload/f_auto,q_auto/site/slider-bg.jpg
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&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%2Fres.cloudinary.com%2Fdev-empathy-book-club%2Fimage%2Fupload%2Ff_auto%2Cq_auto%2Fsite%2Fslider-bg.jpg" 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%2Fres.cloudinary.com%2Fdev-empathy-book-club%2Fimage%2Fupload%2Ff_auto%2Cq_auto%2Fsite%2Fslider-bg.jpg" alt="large image of girls holding hands"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You'll notice a couple transformations here: &lt;code&gt;f_auto&lt;/code&gt;, which chooses the most bandwidth-optimized image format for the user's browser, and &lt;code&gt;q_auto&lt;/code&gt;, which reduces image size by degrading image quality without being noticeable to the human eye.  Those 2 transformations already reduce the image size from 874kB to 385kB, without any noticeable difference to the user!&lt;/p&gt;

&lt;p&gt;But we can do better on mobile, where this many pixels still aren't helping anyone. Here's a scaled-down version for mobile:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;https://res.cloudinary.com/dev-empathy-book-club/image/upload/f_auto,q_auto,w_480,h_800,c_lfill,g_auto/site/slider-bg.jpg
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&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%2Fres.cloudinary.com%2Fdev-empathy-book-club%2Fimage%2Fupload%2Ff_auto%2Cq_auto%2Cw_480%2Ch_800%2Cc_lfill%2Cg_auto%2Fsite%2Fslider-bg.jpg" 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%2Fres.cloudinary.com%2Fdev-empathy-book-club%2Fimage%2Fupload%2Ff_auto%2Cq_auto%2Cw_480%2Ch_800%2Cc_lfill%2Cg_auto%2Fsite%2Fslider-bg.jpg" alt="small image of girls holding hands"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In this case, we're creating a tall image bounded at 480px width, centered on what Cloudinary determines to be the most interesting part of the image, and using a &lt;code&gt;fill&lt;/code&gt; approach to the crop (expressed as &lt;code&gt;c_lfill&lt;/code&gt;) to ensure we cover the entire requested dimensions of 480x800.&lt;/p&gt;

&lt;p&gt;There are many parameters and even more options for those parameters, but the &lt;a href="https://cloudinary.com/documentation/image_transformations" rel="noopener noreferrer"&gt;documentation&lt;/a&gt; is quite thorough and the system is really powerful.&lt;/p&gt;

&lt;p&gt;To see a real-life example for what this might look like, check out &lt;a href="https://github.com/dev-empathy-book-club/dev-empathy-book-club.github.io/blob/d78cf21daaa53ffe1d82059dadc3316fcccb9fa5/css/airspace.css#L866-L940" rel="noopener noreferrer"&gt;the CSS for Dev Empathy Book Club's site on GitHub&lt;/a&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  The Gravatar Challenge
&lt;/h3&gt;

&lt;p&gt;At first I assumed that &lt;a href="https://www.gravatar.com" rel="noopener noreferrer"&gt;Gravatars&lt;/a&gt; (we display a few) on the site would work the same way, but I soon realized there is a big problem with Gravatar. The URL for an image looks something like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;http://secure.gravatar.com/avatar/7b5a451ee25044b9c869e3e98b79425d.jpg?s=200
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;with this result:&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/http%3A%2F%2Fsecure.gravatar.com%2Favatar%2F7b5a451ee25044b9c869e3e98b79425d.jpg%3Fs%3D200" 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/http%3A%2F%2Fsecure.gravatar.com%2Favatar%2F7b5a451ee25044b9c869e3e98b79425d.jpg%3Fs%3D200" alt="Ariel Caplan 200-pixel gravatar"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If I want a larger version, I just change the &lt;code&gt;s&lt;/code&gt; query param. So for a 400px&lt;br&gt;
square, I'd use this URL:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;http://secure.gravatar.com/avatar/7b5a451ee25044b9c869e3e98b79425d.jpg?s=400
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/http%3A%2F%2Fsecure.gravatar.com%2Favatar%2F7b5a451ee25044b9c869e3e98b79425d.jpg%3Fs%3D400" 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/http%3A%2F%2Fsecure.gravatar.com%2Favatar%2F7b5a451ee25044b9c869e3e98b79425d.jpg%3Fs%3D400" alt="Ariel Caplan 400-pixel gravatar"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Lacking the &lt;code&gt;s&lt;/code&gt; parameter, Gravatar defaults to an 80px square:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;http://secure.gravatar.com/avatar/7b5a451ee25044b9c869e3e98b79425d.jpg
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/http%3A%2F%2Fsecure.gravatar.com%2Favatar%2F7b5a451ee25044b9c869e3e98b79425d.jpg" 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/http%3A%2F%2Fsecure.gravatar.com%2Favatar%2F7b5a451ee25044b9c869e3e98b79425d.jpg" alt="Ariel Caplan 80-pixel gravatar"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you try to fetch a large Gravatar avatar with Cloudinary, here's the result:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;https://res.cloudinary.com/caplan/image/fetch/https://secure.gravatar.com/avatar/7b5a451ee25044b9c869e3e98b79425d.jpg?s=400
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&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%2Fres.cloudinary.com%2Fcaplan%2Fimage%2Ffetch%2Fhttps%3A%2F%2Fsecure.gravatar.com%2Favatar%2F7b5a451ee25044b9c869e3e98b79425d.jpg%3Fs%3D400" 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%2Fres.cloudinary.com%2Fcaplan%2Fimage%2Ffetch%2Fhttps%3A%2F%2Fsecure.gravatar.com%2Favatar%2F7b5a451ee25044b9c869e3e98b79425d.jpg%3Fs%3D400" alt="Ariel Caplan 80-pixel gravatar fetched through Cloudinary"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;What happened? Cloudinary treats &lt;code&gt;?s=400&lt;/code&gt; as a meaningless parameter passed to Cloudinary, and doesn't forward it to Gravatar.&lt;/p&gt;

&lt;p&gt;This can be fixed, though, by URL-encoding the &lt;code&gt;?&lt;/code&gt; character as &lt;code&gt;%3F&lt;/code&gt;, like so:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;https://res.cloudinary.com/caplan/image/fetch/https://secure.gravatar.com/avatar/7b5a451ee25044b9c869e3e98b79425d.jpg%3Fs=400
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&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%2Fres.cloudinary.com%2Fcaplan%2Fimage%2Ffetch%2Fhttps%3A%2F%2Fsecure.gravatar.com%2Favatar%2F7b5a451ee25044b9c869e3e98b79425d.jpg%253Fs%3D400" 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%2Fres.cloudinary.com%2Fcaplan%2Fimage%2Ffetch%2Fhttps%3A%2F%2Fsecure.gravatar.com%2Favatar%2F7b5a451ee25044b9c869e3e98b79425d.jpg%253Fs%3D400" alt="Ariel Caplan 80-pixel gravatar fetched through Cloudinary"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This technique should work for any characters you might need to include in the fetch URL.&lt;/p&gt;

&lt;p&gt;However, that's not the end of the story. What happens when someone updates their Gravatar image? Ideally, it would get updated on our site, too. But on the free plan, fetched images never change. (They can be configured to be updated on paid plans.)&lt;/p&gt;

&lt;p&gt;It turns out that someone at Cloudinary thought of this, and therefore built &lt;a href="https://cloudinary.com/blog/placeholder_images_and_gravatar_integration_with_cloudinary" rel="noopener noreferrer"&gt;Gravatar support&lt;/a&gt; directly into the platform. Unlike the &lt;code&gt;fetch&lt;/code&gt; and &lt;code&gt;upload&lt;/code&gt; image types we've seen so far, there's also a &lt;code&gt;gravatar&lt;/code&gt; image type which knows how to source a high-quality image from Gravatar, and update it automatically, with a small delay, when someone changes their avatar! (There are &lt;a href="https://cloudinary.com/documentation/image_delivery_options" rel="noopener noreferrer"&gt;similar systems&lt;/a&gt; for other social networks, including Facebook, Google+, Instagram, and Twitter.)&lt;/p&gt;

&lt;p&gt;If you fetch images via Gravatar in this way, you can easily scale up or down using the normal &lt;code&gt;h_&lt;/code&gt; and &lt;code&gt;w_&lt;/code&gt; parameters. So here's that same 400px image of yours truly, fetched via Cloudinary:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;https://res.cloudinary.com/caplan/image/gravatar/w_400/7b5a451ee25044b9c869e3e98b79425d.jpg
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&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%2Fres.cloudinary.com%2Fcaplan%2Fimage%2Fgravatar%2Fw_400%2F7b5a451ee25044b9c869e3e98b79425d.jpg" 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%2Fres.cloudinary.com%2Fcaplan%2Fimage%2Fgravatar%2Fw_400%2F7b5a451ee25044b9c869e3e98b79425d.jpg" alt="Ariel Caplan 400-pixel gravatar fetched through Cloudinary"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Of course, once you've done this, you can use &lt;code&gt;f_auto&lt;/code&gt; and &lt;code&gt;q_auto&lt;/code&gt; to optimize images further and reduce bandwidth use. Neat!&lt;/p&gt;

&lt;h3&gt;
  
  
  Not Just for Images!
&lt;/h3&gt;

&lt;p&gt;One little-known fact about Cloudinary: They can serve anything via CDN, not just images and video! So if you have JS or CSS files, you can serve them through Cloudinary's CDN in the same fashion as mentioned above for images: Set up an Auto Upload folder and reference those URLs instead of the place where they're hosted on your site. So for example, instead of:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;https://devempathybook.club/css/bootstrap.min.css
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;we reference:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;https://res.cloudinary.com/dev-empathy-book-club/raw/upload/css/bootstrap.min.css
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;(where &lt;code&gt;css/&lt;/code&gt; is a folder mapped to &lt;code&gt;https://devempathybook.club/css/&lt;/code&gt;). Note that instead of &lt;code&gt;image&lt;/code&gt; as before, we write &lt;code&gt;raw&lt;/code&gt; to indicate that this should be considered an unknown file type and Cloudinary shouldn't try to do any image processing with it.&lt;/p&gt;

&lt;p&gt;Usually you'll want to use a &lt;a href="https://css-tricks.com/strategies-for-cache-busting-css/#article-header-id-2" rel="noopener noreferrer"&gt;versioning strategy&lt;/a&gt; for your JS and CSS assets if you use a CDN, but the goal here was to be lazy on a static Jekyll site. Since there wasn't much custom CSS and JS, I simply left a few files that are loaded directly from GitHub Pages, but things that won't change frequently (or ever) are served via Cloudinary's CDN. You can see the code &lt;a href="https://github.com/dev-empathy-book-club/dev-empathy-book-club.github.io/blob/d78cf21daaa53ffe1d82059dadc3316fcccb9fa5/_includes/head.html#L36-L56" rel="noopener noreferrer"&gt;here&lt;/a&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  Cut Waste
&lt;/h3&gt;

&lt;p&gt;You might notice, if you looked at the code from the last section, that a number of lines were commented out. It turns out that the Jekyll template I used bundled with it a number of JS/CSS frameworks and plugins I didn't actually use. Removing them reduced the total page load size, and makes the page run faster, since there's less for the CPU to worry about. As they say, no code is faster than no code!&lt;/p&gt;

&lt;h3&gt;
  
  
  The Outcome
&lt;/h3&gt;

&lt;p&gt;I wouldn't call the site blazing-fast now, but its PageSpeed mobile score went up from 30 to 50 in a few simple steps taking a couple hours total. There are more things to optimize, but these quick tricks helped bring down page load time a lot already. Importantly, time to first paint on mobile was cut by about 50%. That's a much better experience for mobile users.&lt;/p&gt;

&lt;p&gt;So go out, try these tips, and let me know in the comments how you did!&lt;/p&gt;

&lt;p&gt;As a reminder, I work at Cloudinary, so if you do find anything here difficult to implement, I can pass along your concerns to the right people... 😉&lt;/p&gt;

&lt;p&gt;P.S. If you use Jekyll or some other blogging framework, and you have many images on your site, it may be worth going further with automation using a plugin. For example, &lt;a href="https://nhoizey.github.io/jekyll-cloudinary/" rel="noopener noreferrer"&gt;jekyll-cloudinary&lt;/a&gt; lets you define transition presets, and does all the work to generate URLs for images at various screen sizes. It's pretty magical. Of course, if it's a dynamic site, Cloudinary has &lt;a href="https://cloudinary.com/documentation" rel="noopener noreferrer"&gt;a host of SDKs&lt;/a&gt; which can do everything discussed here, and much more!&lt;/p&gt;

&lt;p&gt;&lt;em&gt;NOTE: Cloudinary did not ask me to write this. Nothing in this post should be taken as representing anyone other than myself.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;UPDATED 2019-01-29: Added option to include URL-encoded characters in a fetch URL.&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>tutorial</category>
      <category>tips</category>
      <category>images</category>
    </item>
    <item>
      <title>Why I Created Dev Empathy Book Club</title>
      <dc:creator>Ariel Caplan</dc:creator>
      <pubDate>Thu, 14 Sep 2017 22:54:50 +0000</pubDate>
      <link>https://dev.to/amcaplan/why-i-created-dev-empathy-book-club-51bj</link>
      <guid>https://dev.to/amcaplan/why-i-created-dev-empathy-book-club-51bj</guid>
      <description>

&lt;p&gt;I was just a few months out of the Flatiron School, had gotten my bearings in&lt;br&gt;
the codebase at my first job, and was starting to take on more responsibility. I was sitting with a product manager—let's call her Sierra—trying to explain the technical impact of a product idea she had proposed. And I was &lt;em&gt;frustrated&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;No matter which way I explained it, she just kept getting confused. Why couldn't she understand that making these changes would drastically increase response time on a critical endpoint? It was a simple workflow involving 2 microservices and a NoSQL database, and she didn't even have to understand the details, just how they were connected together on a high level.&lt;/p&gt;

&lt;p&gt;At some point, I realized: No one had ever given Sierra any level of technical explanation of the system whose development she was supposed to guide every day. Instead of going further with the conversation, I asked, "Why don't we set up a meeting just to describe the basic outline of the system? Nothing overly detailed, just enough to allow us to have a conversation about how product concepts will impact the real-life product when they're translated into code."&lt;/p&gt;

&lt;p&gt;To my surprise, she agreed. To my further astonishment, I actually enjoyed the meeting more than any other I'd had since beginning my software development career. We slowly built up a diagram of the parts of the system relevant to her job, clarified confusing points, and made sure every bit of explanation was clear to her.&lt;/p&gt;

&lt;p&gt;At the end of the meeting, Sierra thanked me and said, "You know, no one's ever done this for me. This is going to significantly improve my ability to come up with ideas and communicate with developers. I'd really like to understand more about the technical elements of the project, but there never seem to be opportunities for me to learn."&lt;/p&gt;

&lt;p&gt;At that moment, I realized something that has become a theme in my career: The most significant impact you can make on a product isn't through design, code, marketing, sales, or customer support. It's building bridges, enabling people of varied backgrounds and skills, each with their own perspectives and spheres of understanding, to work together through effective communication.&lt;/p&gt;

&lt;h3&gt;
  
  
  A Series of Fortunate Events
&lt;/h3&gt;

&lt;p&gt;As I continued to mature and advance in my career, I ended up taking on the role of a more senior developer and mentor, as well as having more say in the work I was doing.  Although I saw myself taking on more responsibility, there was no event that sparked a big change, until...&lt;/p&gt;

&lt;p&gt;In late 2016, I attended RubyConf in Cincinnatti, where I heard Paulette Luftig's talk, &lt;a href="https://www.youtube.com/watch?v=EkLdO-SphxA"&gt;"Finding Your Edge Through a Culture of Feedback"&lt;/a&gt;. She ended with a few recommendations for books to read, and I decided that this should be the next step for me. There are many fantastic texts about developing skills in communication, team-building, empathy, and other soft skills; I'd be cheating myself of personal and professional growth if I didn't take advantage!&lt;/p&gt;

&lt;p&gt;A few days after the conference, I bought a number of books recommended in that talk, plus a few I'd seen suggested around the internet. And so the fun began...&lt;/p&gt;


&lt;blockquote class="ltag__twitter-tweet"&gt;
&lt;div class="ltag__twitter-tweet__media"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--op_6ccHu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://pbs.twimg.com/media/CxVm4orWIAENXCD.jpg"&gt;&lt;/div&gt;
&lt;div class="ltag__twitter-tweet__main"&gt;
&lt;div class="ltag__twitter-tweet__header"&gt;
&lt;img class="ltag__twitter-tweet__profile-image" src="https://res.cloudinary.com/practicaldev/image/fetch/s--tIFe4aHN--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://pbs.twimg.com/profile_images/435945340907159553/379uF0JW_normal.png"&gt;&lt;div class="ltag__twitter-tweet__full-name"&gt;Ariel Caplan&lt;/div&gt;
&lt;div class="ltag__twitter-tweet__username"&gt;@amcaplan&lt;/div&gt;
&lt;div class="ltag__twitter-tweet__twitter-logo"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--kX-SksTr--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/twitter-eb8b335b75231c6443385ac04fdfcaed8ca5423c3990e89dc0178a4090ac1908.svg"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class="ltag__twitter-tweet__body"&gt;Anyone wanna &lt;a href="https://twitter.com/hashtag/BookClub"&gt;#BookClub&lt;/a&gt; on some of these?&lt;br&gt;&lt;br&gt;Nonviolent Communication&lt;br&gt;Difficult Conversations&lt;br&gt;Emotional Intelligence&lt;br&gt;&amp;amp; 2 Dale Carnegie classics &lt;/div&gt;
&lt;div class="ltag__twitter-tweet__date"&gt;22:44 PM - 15 Nov 2016&lt;/div&gt;
&lt;div class="ltag__twitter-tweet__actions"&gt;
&lt;a href="https://twitter.com/intent/tweet?in_reply_to=798657955142828036" class="ltag__twitter-tweet__actions__button"&gt;&lt;img src="/assets/twitter-reply-action.svg" alt="Twitter reply action"&gt;&lt;/a&gt;&lt;a href="https://twitter.com/intent/retweet?tweet_id=798657955142828036" class="ltag__twitter-tweet__actions__button"&gt;&lt;img src="/assets/twitter-retweet-action.svg" alt="Twitter retweet action"&gt;&lt;/a&gt;1&lt;a href="https://twitter.com/intent/like?tweet_id=798657955142828036" class="ltag__twitter-tweet__actions__button"&gt;&lt;img src="/assets/twitter-like-action.svg" alt="Twitter like action"&gt;&lt;/a&gt;1&lt;/div&gt;
&lt;/div&gt;
&lt;/blockquote&gt;

&lt;p&gt;I wanted more, so I ordered books online. Like a good programmer, I was approaching stack overflow...&lt;/p&gt;


&lt;blockquote class="ltag__twitter-tweet"&gt;
&lt;div class="ltag__twitter-tweet__media"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--hlvjPjpn--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://pbs.twimg.com/media/CydTQLBWIAA7EG3.jpg"&gt;&lt;/div&gt;
&lt;div class="ltag__twitter-tweet__main"&gt;
&lt;div class="ltag__twitter-tweet__header"&gt;
&lt;img class="ltag__twitter-tweet__profile-image" src="https://res.cloudinary.com/practicaldev/image/fetch/s--tIFe4aHN--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://pbs.twimg.com/profile_images/435945340907159553/379uF0JW_normal.png"&gt;&lt;div class="ltag__twitter-tweet__full-name"&gt;Ariel Caplan&lt;/div&gt;
&lt;div class="ltag__twitter-tweet__username"&gt;@amcaplan&lt;/div&gt;
&lt;div class="ltag__twitter-tweet__twitter-logo"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--kX-SksTr--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/twitter-eb8b335b75231c6443385ac04fdfcaed8ca5423c3990e89dc0178a4090ac1908.svg"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class="ltag__twitter-tweet__body"&gt;As a reminder, if you want to join me in journeying through these empathy- (&amp;amp; sometimes dev- too!) related books, ping me, let's &lt;a href="https://twitter.com/hashtag/BookClub"&gt;#BookClub&lt;/a&gt;! &lt;/div&gt;
&lt;div class="ltag__twitter-tweet__date"&gt;20:50 PM - 29 Nov 2016&lt;/div&gt;
&lt;div class="ltag__twitter-tweet__actions"&gt;
&lt;a href="https://twitter.com/intent/tweet?in_reply_to=803702628412751872" class="ltag__twitter-tweet__actions__button"&gt;&lt;img src="/assets/twitter-reply-action.svg" alt="Twitter reply action"&gt;&lt;/a&gt;&lt;a href="https://twitter.com/intent/retweet?tweet_id=803702628412751872" class="ltag__twitter-tweet__actions__button"&gt;&lt;img src="/assets/twitter-retweet-action.svg" alt="Twitter retweet action"&gt;&lt;/a&gt;5&lt;a href="https://twitter.com/intent/like?tweet_id=803702628412751872" class="ltag__twitter-tweet__actions__button"&gt;&lt;img src="/assets/twitter-like-action.svg" alt="Twitter like action"&gt;&lt;/a&gt;11&lt;/div&gt;
&lt;/div&gt;
&lt;/blockquote&gt;

&lt;p&gt;It was difficult to stay motivated and keep reading, so I knew I had to actually get serious about making this thing happen. Also, I would get a lot more out of it if I could discuss my thoughts with others. So I decided that RailsConf 2017 would be the Big Bang for Dev Empathy Book Club. I designed a site, set up a book club on Goodreads, and walked into the conference ready to recruit.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://twitter.com/jah2488?lang=en"&gt;Justin Herrick&lt;/a&gt; gave a workshop about team-building and communication, so he seemed like a good person to try; he was! &lt;a href="https://twitter.com/cdwort?lang=en"&gt;Amy Unger&lt;/a&gt; approached me in response to a tweet and asked to join as well; I was certainly delighted to have another thoughtful voice actually approach me about the club! So we had a panel.&lt;/p&gt;

&lt;p&gt;I also gave a &lt;a href="https://www.youtube.com/watch?v=KGi9wRHWvB0&amp;amp;t=50m12s"&gt;lightning talk&lt;/a&gt; (which I'm far too proud of) about a silly little hack, and used the opportunity to plug the project. So we got a bit of free marketing.&lt;/p&gt;

&lt;p&gt;Then everyone went home, and the real work began.&lt;/p&gt;

&lt;h3&gt;
  
  
  Down to Reality
&lt;/h3&gt;

&lt;p&gt;Reading a dense book and actually trying to incorporate some ideas into your life every 2 months is a reasonable but still significant commitment. Even more difficult is coordinating with other people to make time for a panel discussion, keeping online materials up to date, and generally promoting the project. Dev Empathy Book Club is important to me because I think it adds a much-needed voice of compassion and humanity to the commotion in our industry. But it takes a lot of time and effort.&lt;/p&gt;

&lt;p&gt;We also needed to evolve. Goodreads has a very unfriendly system for managing a club, and the forums weren't easy to use. So we moved to an open Slack channel. Then, we wanted to make it more interactive, less a pure announcements conduit, so we started a monthly open discussion in Slack.&lt;/p&gt;

&lt;p&gt;We also needed to be flexible. With a small number of panelists (though we're &lt;a href="https://docs.google.com/forms/d/e/1FAIpQLSeDXMso9kb_7tkiOH5PxC2h15VwXQsMxxi8KSWsmnXTEm5_WA/viewform"&gt;looking to grow&lt;/a&gt;!), sticking to a schedule has been a real challenge, resulting in 5 instead of 6 books covered over the last year. We're hoping to do better this year, to provide a more consistent experience for participants in the club.&lt;/p&gt;

&lt;h3&gt;
  
  
  This Just Got Real
&lt;/h3&gt;

&lt;p&gt;While being part of Dev Empathy Book Club, I took on an informal team lead role within my working group. Since we went through a few management-related books at the same time (&lt;em&gt;The Mythical Man-Month&lt;/em&gt;, &lt;em&gt;Radical Candor&lt;/em&gt;, &lt;em&gt;Peopleware&lt;/em&gt;), I had the opportunity to think about the ideas conveyed and experiment in a real-life work environment. I saw that people respected me because I invested a lot of thought into how teams work in general, and how to make my specific team more effective and simultaneously much happier.&lt;/p&gt;

&lt;p&gt;Then, a month ago, I was informed that I would have an opportunity to move into a management role at my company.&lt;/p&gt;

&lt;p&gt;A year ago, I would have been terrified, if the opportunity had even been presented, which of course it wouldn't have. I wasn't ready. Now, while I didn't walk into the role as an expert (it takes a lot of experience to get there!), I could consider myself educated enough to know how to learn the rest. A year of investment truly paid off.&lt;/p&gt;

&lt;h3&gt;
  
  
  What Are You Waiting For?
&lt;/h3&gt;

&lt;p&gt;Even if management will never be your thing, soft skills are the big differentiator between people who write code and people who solve real-world problems using code. They might save you wasted years of effort by solving the people problems that would otherwise have mandated countless lines of code. And they will definitely make you happier in your job. You have to deal with other people all the time; may as well learn to enjoy it and make the most of it!&lt;/p&gt;

&lt;p&gt;Becoming a more empathetic, compassionate, kind person with better communication skills will probably be the most valuable investment in your career (and possible your life in general).&lt;/p&gt;

&lt;p&gt;Is Dev Empathy Book Club right for you? If you're looking for something concrete and consistent to add to your routine to develop personally and professionally, check it out!&lt;/p&gt;

&lt;p&gt;If this isn't the right time for you to join, that's fine too. I'd love if you would share this post, and the club, with friends, or tweet about it with the hashtag &lt;a href="https://twitter.com/hashtag/DevEmpathy?src=hash"&gt;#DevEmpathy&lt;/a&gt;. (Or just mention our Twitter account, &lt;a href="https://twitter.com/DevEmpathy?lang=en"&gt;@DevEmpathy&lt;/a&gt;!)&lt;/p&gt;

&lt;p&gt;You can find out more information on our site, &lt;a href="http://devempathybook.club"&gt;devempathybook.club&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;This article was originally published on &lt;a href="http://amcaplan.ninja/blog/2018/04/26/why-i-created-dev-empathy-book-club/"&gt;my blog&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;


</description>
      <category>empathy</category>
      <category>bookclub</category>
    </item>
  </channel>
</rss>
