Gizrahttp://Thu, 01 Jun 2017 13:55:49 -0400Thu, 01 Jun 2017 13:55:49 -04001800Travis and WDIO - Breaking out of the Black Box<p>Chances are that you already using Travis or another Cool CI to execute your tests. Very often getting boolean or textual output from the execution is enough, because knowing which tests are failing is a good starting point to start to debug the problematic code. In our case, with WebdriverI/O (WDIO) and with an architecture where the frontend and backend are decoupled, it’s much more complicated.</p> <p>It might be that the browser could not click on an element, or the frontend could not contact the backend, or the frontend has a runtime error (well, you might be faced with it, but at Gizra we use <a href="http://elm-lang.org/">Elm</a>, where it is practically impossible). Who knows, even the browser could crash due to lack of memory - the same applies to Travis too. One solution is to manually start reproducing what Travis does. It’s fun the first time, but doing it again and again is just a waste of time. But recently, our CTO, Amitai gave excellent pointers about dockerized Selenium and insisted that having video recordings is much better than simple static screenshots - and it was so true.</p> <p>These days at Gizra - on client projects - we can benefit by knowing exactly how and why our browser-based tests failed. The fact that we already used <a href="/content/docker-travis-ci/">Docker inside Travis</a> helped a lot, but this additional video recording on the browser-based test makes the life of the developers much easier.</p> <h2 id="ingredients">Ingredients</h2> <p>Let’s overview what’s bundled into <a href="https://github.com/Gizra/drupal-elm-starter">Drupal Elm Starter</a>, and who is responsible for what.</p> <ul> <li> <p>Upon a push, GitHub invokes Travis to start a build, that’s just the standard for many projects on GitHub for a long time.</p> </li> <li> <p>Travis executes a set of <a href="https://github.com/Gizra/drupal-elm-starter/blob/master/.travis.yml#L9">shell scripts</a> according to the <a href="https://docs.travis-ci.com/user/customizing-the-build#Build-Matrix">build matrix</a>. The only noteworthy thing is that using the build matrix with environment variables can be used to test the things in parallel - like one element of the matrix is the WDIO test, and another element could be any kind of <a href="https://en.wikipedia.org/wiki/Lint_(software)">Lint</a> to scrutinize the code quality.</p> </li> <li> <p>From this point, we only focus on one element of the build matrix. Docker Compose <a href="https://github.com/Gizra/drupal-elm-starter/blob/master/ci-scripts/docker\_files/docker-compose.yml">launches</a> two containers, one with the application and the test code, the other with a <a href="https://github.com/zalando/zalenium">Selenium Grid</a>. It also helps the containers talk to <a href="https://docs.docker.com/compose/networking/">each other</a> via expressive hostnames.</p> </li> <li> <p>The WDIO executes our test suites, but the Selenium host is not localhost, but rather the address of the other Docker container. This way Zalenium is able to <a href="https://github.com/zalando/zalenium#using-it">record a video</a> of the WDIO tests, it hosts the browser, the Selenium Grid and ffmpeg to encode the movie on-the-fly.</p> </li> <li> <p>Google Drive hosts the videos of the <a href="https://github.com/Gizra/drupal-elm-starter/blob/master/ci-scripts/test_server.sh#L77">failed tests</a>. To use Google Drive programmatically, <a href="https://github.com/Gizra/drupal-elm-starter/blob/master/server/README.md#google-drive-integration">several steps</a> are needed, but the <a href="https://github.com/prasmussen/gdrive">gdrive</a> uploader tool has excellent documentation.</p> </li> <li> <p>In the very end, <a href="https://github.com/Gizra-robot">Gizra Robot</a> posts a comment on the <a href="https://github.com/Gizra/drupal-elm-starter/blob/master/ci-scripts/test_server.sh#L94">conversation thread of the pull request</a>. Adding a robot user to GitHub <a href="https://help.github.com/articles/differences-between-user-and-organization-accounts/">is not different</a> from adding a human - you can create a new GitHub user and dedicate it to this purpose. The exact process is <a href="https://github.com/Gizra/drupal-elm-starter/blob/master/server/README.md#github-integration">documented</a> in the repository.</p> </li> </ul> <h3 id="the-result">The result</h3> <p>You can see an example video of the test on a <a href="https://github.com/Gizra/drupal-elm-starter/pull/93#issuecomment-298260575">recent pull request</a>. The icing on the cake is that if you receive the GitHub notification email to your GMail inbox, you can launch a video straight from there via a YouTube player!</p> <div class="ui segments"> <div class="ui attached center aligned segment"> <div class="ui image"> <img src="https://www.gizra.com/assets/images/posts/travis-wdio/sample-recording.gif" /> </div> </div> <div class="ui attached center aligned caption segment"> WebdriverI/O in action </div> </div> <h2 id="lessons-learned">Lessons learned</h2> <p>I joined Gizra three months ago, and the <a href="https://www.thegizraway.com/">Gizra Way</a>’s time-box/escalation system helped a lot to accomplish this task, where many layers of the CI stack were new to me. Needless to say, debugging Travis is hard. And then, you need to wait. And wait. A lot. Then your issue has a <a href="https://github.com/Gizra/drupal-elm-starter/issues/83">timebox</a> on it, so hard things must be done quickly and by following best practices.</p> <p>Seems impossible, right?</p> <p>My experience is that this rigorous workflow helped me to find creative ways to solve the problems (not talking about ugly hacks here - just merely changing the way to find proper solutions), if the complexity is adequately calibrated to the developer, it triggers good stress that helps in problem solving too and contributes to the work satisfaction.</p> <p>Let’s see how I was led to make it happen.</p> <h3 id="dissect-steps">Dissect steps</h3> <p>It seems to be obvious that you need to break the problem into smaller chunks, but when the testability is so problematic, you must follow this principle very strictly. In this case, the most helpful was to test the different units in the simplest environment as possible. For instance there’s a Bash script that’s responsible for the GitHub upload. Instead of launching the script via Travis or via a <a href="https://docs.travis-ci.com/user/common-build-problems/#Running-a-Container-Based-Docker-Image-Locally">similar local environment</a>, in the native local environment, just feeding the script with the proper environment variables, what Travis would do, helped to speed up the process to almost real time debuggability.</p> <p>Even a small Bash construct can be extracted and tested separately. Same for a <code class="highlighter-rouge">curl</code> invocation that posts a comment on GitHub. So in the end, I enjoyed the efficiency that came from the way of testing all the things with the minimally needed context - without all the hassle.</p> <h3 id="invest-in-easy-troubleshooting">Invest in easy troubleshooting</h3> <p>It was a strong sign that we wanted to invest a significant amount to have this functionality at our project template, at Elm Starter, just to help future work. Similarly on the low level, it was mandatory at some point to be able to SSH into the Travis build. It’s enabled for private repositories, but in our case, it was mandatory to write to Travis support and this way, for our public repository, it was possible to use this functionality. It helped a lot to understand why the process behaves differently than at the local environment.</p> <h3 id="contributing-what-you-can">Contributing what you can</h3> <p>During the implementation, there were some issues with Zalenium, the side container, which provided Selenium Grid and the video recording (https://github.com/zalando/zalenium/pull/92). It got merged to upstream after 12 days, mostly the time the maintainer waited for my answer. It is just a little documentation fix, but it might save fellow developers frustration. On my side, I had the confirmation from the most capable person that I should not try to use <code class="highlighter-rouge">--abort-on-exit</code> with that container. Such scenarios reinforces the best practice, give back what you have, either it is knowledge, a patch or a full-blown solution.</p> <h2 id="takeaway">Takeaway</h2> <p>The solution that is publicly available at the <a href="https://github.com/Gizra/drupal-elm-starter/tree/master/ci-scripts">repository</a> is easy to re-use in any project that has a similar browser-based test, the only criteria is that it should support the execution on a Selenium Grid. You might capture videos of your pure Simpletest, Behat, WDIO or Nightwatch.js (and who knows what kind of other test frameworks are out there in the wild) test suite and port this code from Drupal Elm Starter to easily understand why your test fails, the only criteria is that you should be able to execute Zalenium Docker container aside. Pull requests are more than welcome to make the process more robust or even sleeker!</p> <p><a href="http:///content/travis-wdio//">Continue reading…</a></p>http:///content/travis-wdio/http:///content/Travis-WDIOTue, 23 May 2017 00:00:00 -0400Elm from a Business Perspective<p>Elm, like any rising open source project, is getting both positive endorsements and negative critiques. Reading the good ones, is always fun; but the negative ones are just as important.</p> <p>Today, I came across this: <a href="http://reasonablypolymorphic.com/blog/elm-is-wrong">Elm Is Wrong</a>, and realized that I’ve always read the good and bad critiques from a <em>technical</em> point of view, but I have yet to read about what it means from a <em>business</em> perspective.</p> <p>I can assure you it’s a different perspective. One that is about dollars and the cost of bugs - not about “type classes” or “higher kinded types.”</p> <p><a href="http:///content/elm-business-perspective//">Continue reading…</a></p>http:///content/elm-business-perspective/http:///content/elm-business-perspectiveWed, 09 Nov 2016 00:00:00 -0500Web Frameworks, Proof of Concept, and Building an Inbox Simulation<h2 id="baseball-apple-pie-and-web-frameworks">Baseball, Apple Pie, and Web Frameworks</h2> <p>I like baseball better than football (the American version). Football is a <a href="https://www.youtube.com/watch?v=_Z_7eu64y6c">game of inches</a> – but it’s measured in yards. Imprecise scope is built into the system. Baseball, on the other hand, is a game of wildly random occurrences that are often measured to the third decimal place. An <a href="http://sabr.org/sabermetrics">entire framework exists</a> to understand the smallest, yet important, details of the game.</p> <p>What I like about baseball is what I like about the current state of web applications. There is a growing set of frameworks that allow you to “scratch your own itch” and be precise about your scope in ways that you never could before. I really like going to web conferences, and seeing things like Drupal being used as a backend to serve content to some other front-end framework (enter your favorite: Angular, React, Ember) that can bend, shape, and re-present that content in ways that Drupal never imagined.</p> <p>And as a web development agency that focuses on complex content management, that has huge – and really exciting – implications for how we do business.</p> <h2 id="whats-a-major-corporation-to-do">What’s a Major Corporation To Do?</h2> <p>Take for example a conversation that started with someone that does training and assessment at a Fortune 50 corporation – one that trains a lot of employees. At some point she asked me “Do you guys do inbox simulations?” I had to think for a second if I even knew what inbox simulation was - and it turns out, it’s exactly what it sounds like: a simulated email inbox to test and assess an employee’s response and prioritization skills.</p> <p>My first response was “No,” and my second – almost immediate – followup was, “but I don’t see why we couldn’t.”</p> <p>The problem they had was that none of the software they had tried was giving them precisely what they needed. And that’s not surprising. There are more than 500 Learning Management Systems on the market, each with it’s own bloated feature set trying to solve specific use cases with general tools. It’s also not surprising that <a href="http://www.capterra.com/learning-management-system-software/user-research">fewer than 25%</a> of corporate LMS users are “very satisfied” with their system. Given the large features sets and the likely time it took to get them to market, most of them are probably built on technology that’s already five years old.</p> <h2 id="enter-proof-of-concept">Enter Proof of Concept</h2> <p>That conversation led to a “show us what you can do” meeting. This was a problem because, well, we had never done it before. My five-or-six-years-ago brain said to myself, “We can’t possibly create a demo of an inbox simulation – I’ll just put together a slide deck that explains what I’m talking about here with web frameworks.”</p> <p>That’s when <a href="/team/#amitaibu">Amitai</a> said, “Let’s create an inbox simulation for your meeting – we can do it in <a href="http://elm-lang.org/">Elm</a>. Open a repo and I’ll show you how. What should it have?”</p> <p>I answered (dubiously), “Well, it should look and feel like an Outlook inbox, and we should be able to demonstrate that their training logic can be applied to simple email tasks.”</p> <p>“You mean like if you respond one way, you get a certain response back.”</p> <p>“Yeah, something like that.”</p> <h2 id="the-scaffolding-of-an-inbox">The Scaffolding of an Inbox</h2> <p>So I opened a <a href="https://github.com/Gizra/inbox-simulation">repository</a> for the project, which at Gizra starts with a stack that includes a location to create static prototype pages served by <a href="https://jekyllrb.com/">Jekyll</a> and is automatically updated and published by <a href="http://gulpjs.com/">Gulp</a>. The <a href="http://semantic-ui.com/">Semantic UI</a> CSS framework is included so that we get all the goodies that come with it and don’t need to recreate the wheel on design elements (we recently switched from Bootstrap, and I already like it a lot better, if not just because our prototypes don’t look like <a href="http://adventurega.me/bootstrap/">every Bootstrap website ever</a>).</p> <p>In a perfect world, I wanted three things:</p> <ol> <li>An <strong>inbox</strong> that looked realistic.</li> <li>A <strong>dashboard</strong> that reflected activity in the inbox.</li> <li>An <strong>admin screen</strong> that allowed manipulation of the inbox content.</li> </ol> <p>I started with the admin screen, because that seemed the least daunting.</p> <div class="ui segments"> <div class="ui attached center aligned segment"> <div class="ui image"> <img src="https://www.gizra.com/assets/images/posts/elm-inbox-simulator/admin-sketch.jpg" /> </div> </div> <div class="ui attached center aligned caption segment"> I am a terrible sketch artist, and I often don't carry paper. This was sketched on a napkin from a coffee shop. </div> </div> <p>Once I had the idea, I moved quickly into the static prototype, because my CSS skills dramatically outweigh my drawing skills.</p> <div class="ui segments"> <div class="ui attached center aligned segment"> <div class="ui image"> <img src="https://www.gizra.com/assets/images/posts/elm-inbox-simulator/admin-prototype.jpg" /> </div> </div> <div class="ui attached center aligned caption segment"> That's a little better. </div> </div> <p>The next step was the inbox itself, and because I wanted it to look like Outlook, we figured we could try to grab the HTML, CSS and JS from an Outlook Online account that I had created for this purpose.</p> <p>What a ridiculous mess that was.</p> <p>Thirty minutes into that task, I realized it would be easier to recreate the inbox from scratch. Semantic UI made it pretty easy.The Font Awesome icons already there, and the fact that it’s <a href="https://www.w3.org/TR/css-flexbox/">flexbox</a> friendly, meant that I had a pretty good static version up in about 4 hours (it could have been faster, but it was my first time really using Semantic UI, and I was trying to follow strict <a href="http://getbem.com/">BEM</a> principles, which we also recently started at Gizra).</p> <div class="ui segments"> <div class="ui attached center aligned segment"> <div class="ui image"> <img src="https://www.gizra.com/assets/images/posts/elm-inbox-simulator/inbox-prototype.jpg" /> </div> </div> <div class="ui attached center aligned caption segment"> Starting to look like the real thing. </div> </div> <p>And with that, I made a pull request, and went to bed.</p> <h2 id="making-it-dynamic-with-elm">Making it dynamic with Elm</h2> <p>The next day, some strange miracle had occurred.</p> <p>Amitai had <a href="https://github.com/Gizra/inbox-simulation/pull/6">created a basic Elm app</a>, <a href="https://github.com/Gizra/inbox-simulation/pull/8">converted my HTML markup to Elm</a>, and <a href="https://github.com/Gizra/inbox-simulation/pull/12">created a basic model for a functioning app</a>. I had heard Amitai speak and have read about how Elm’s compiler, which catches runtime errors, makes development so much faster, but seeing it in action was pretty amazing. Our conversation on Github:</p> <div class="ui segments"> <div class="ui attached center aligned segment"> <div class="ui image"> <img src="https://www.gizra.com/assets/images/posts/elm-inbox-simulator/github-conversation.jpg" /> </div> </div> <div class="ui attached center aligned caption segment"> The Elm is strong with this one. </div> </div> <p>Creating that dashboard referenced in the conversation was fairly easy too. Semantic UI has a lot of <a href="http://semantic-ui.com/collections/table.html">nice looking tables</a> and classes to vary the look enough to get a lot of different options. I found one I liked, filled it with enough dummy data to give it the feel of a real dashboard, and we were all set.</p> <p>In the meantime, Amitai created a nifty little delayed response function. If you choose a particular response (in this case, some version of “ignore”), you get a followup email demanding your attention.</p> <div class="ui segments"> <div class="ui attached center aligned segment"> <div class="ui image"> <img src="https://www.gizra.com/assets/images/posts/elm-inbox-simulator/delayed-response.gif" /> </div> </div> <div class="ui attached center aligned caption segment"> Don't ignore my emails! </div> </div> <p>We spent the next day or two refining features, polishing the layout, and replacing the dummy text.</p> <p>Of course, I needed to add a few tweaks to the layout, and add sample emails that were more realistic, and some logic that made sense. To do that I had to get into Elm and figure out how it works - in particular how to make it present the HTML syntax I needed. It turns out that was pretty logical and straightforward. I’ve barely scratched the surface, but I’m pretty pleased to have my first few commits on an Elm project.</p> <h2 id="the-result">The Result</h2> <p>You can look at the <a href="https://github.com/Gizra/inbox-simulation">Github repository</a> and try out the <a href="http://inbox-simulation.gizra.com/">sample application</a>, but the final product is a simple response to a complex need. We got there in several days by breaking down a complex problem into small surmountable tasks - a method we call <a href="/#gizra-way">The Gizra Way</a>. In this case, we ignored all other features, even how to permanently store the data – just a simple single page application that shows a realistic inbox with a few features. I never got my admin screen - there wasn’t enough time, and there’s other stuff to do.</p> <p>We are, of course, helped enormously by a robust set of web frameworks that are helping us do web tasks, faster, with greater flexibility, and with a preciseness like never before.</p> <p><a href="http:///content/elm-inbox-simulation//">Continue reading…</a></p>http:///content/elm-inbox-simulation/http:///content/elm-inbox-simulationSat, 24 Sep 2016 00:00:00 -0400Elmctron - Build Desktop Apps with Elm and Electron<p>I work at Gizra, so it was only a matter of time before Elm infected me as well, and I think it’s growing on me.</p> <p>I wanted to build something a little different, not just the plain old TodoMVC. So, I harnessed every bit of creativity I had and came up with the most radical idea ever - I took the TodoMVC in Elm and got it to work in Electron, and called it <code class="highlighter-rouge">Elmctron</code> (I know, so creative of me).</p> <p><a href="http://electron.atom.io/">Electron</a> enables you to build cross platform desktop apps with web technologies. So we can take all the goodies we get with Elm and use them in our desktop application. It’s a brand new world!</p> <p>It was my thought that we should build a couple of gulp tasks to make our life easier - to do the bare minimum because after all, who wants to do more than we he have to? (let’s hope my boss will not read this part)</p> <p>So, with that in mind, the only commands I want to run are <code class="highlighter-rouge">git clone ..</code>, <code class="highlighter-rouge">npm install</code>, and <code class="highlighter-rouge">gulp</code>. The gulp tasks should:</p> <ul> <li>Compile SASS to css.</li> <li>Compile Elm to JS.</li> <li>Watch and auto-reload.</li> <li>Automagically download and install elm packages.</li> <li>Start the electron app.</li> </ul> <p><a href="http:///content/elm-electron-build//">Continue reading…</a></p>http:///content/elm-electron-build/http:///content/elm-with-electronThu, 28 Jul 2016 00:00:00 -0400Faithful Elm and the Amazing Router<p><a href="https://youtu.be/FgaoOgJ5CAU">I gave</a> an Elm session in <a href="http://yougottalovefrontend.com/#page-speakers">YGLF conf</a>. This was a great excuse to free up some hours to work on a new v0.17 SPA (Single Page Application). You won’t believe what happened next…</p> <p>Well, actually, you would: it was an awesome experience. :)<br /> In fact, I’ve reached the point that the backend me is becoming jealous of the frontend me.</p> <div class="ui horizontal segments"> <div class="ui center aligned secondary grey segment"> <a class="demo" target="_blank" href="http://elm-spa-example.gizra.com/">View demo</a> </div> <div class="ui center aligned secondary grey segment"> <a class="code" target="_blank" href="https://github.com/Gizra/elm-spa-example">Get the source code</a> </div> </div> <div class="ui segments"> <div class="ui attached center aligned segment"> <div class="ui image"> <img src="https://www.gizra.com/assets/images/posts/faithful-elm-amazing-router/image1.gif" /> </div> </div> <div class="ui attached center aligned caption segment"> Fetch GitHub user's info on this fake login. </div> </div> <p>My goal with building this demo app, was to give a small, yet realistic, look into how Elm allows us to accomplish daily tasks such as HTTP requests, routing, access, and more. It was important for me to structure it in the same way that we structure larger apps built for production, so that it could demonstrate more effectively how Elm can be used in a project.</p> <p>If you are interested in Elm, and want to get a feeling of how it could be built for your apps, this might be a good starting point. I even wanted to add a single test to show how it could be done. But Elm being such a fun, predictable, opinionated, and fun (no mistake here, it deserves the double fun) to work with, I ended up adding more and more tests.<br /> Isn’t that yet another great sign for Elm? I was adding unit tests for a <em>demo</em> app, while we hardly added any unit tests for our Angular apps in production!</p> <p>I held myself back from adding too many features, but I couldn’t resist polishing the existing ones, and adding <em>lots</em> of comments. With the compiler’s tough love and ever growing unit tests, changes were so easy it almost felt like cheating (and note that I rarely write “easy” or “trivial” about development issues).</p> <p><a href="http:///content/faithful-elm-amazing-router//">Continue reading…</a></p>http:///content/faithful-elm-amazing-router/http:///content/faithful-elm-amazing-routerThu, 16 Jun 2016 00:00:00 -0400How To Think Elm<p>The 2nd Elm - TLV meetup was lots of fun. But it was in Hebrew, and the intersection between Hebrew speakers and Elm devs is still very limited.</p> <p>So I’ve re-recorded my presentation in English. If you haven’t ever seen Elm, or already develop in Elm and want to better understand “how to think Elm” this presentation might give you a nudge in the right direction.</p> <div class="ui segments"> <div class="ui attached center aligned segment"> <iframe width="480" height="360" src="https://www.youtube.com/embed/tx07ysIrAz8?rel=0" frameborder="0" allowfullscreen=""></iframe> </div> </div> <p><a href="http:///content/how-think-elm//">Continue reading…</a></p>http:///content/how-think-elm/http:///content/how-think-elmThu, 24 Mar 2016 00:00:00 -0400Elm i18n and Type Safety<p>We’ve reached the point we needed to translate one of our Elm apps to multiple languages.</p> <div class="ui horizontal segments"> <div class="ui center aligned secondary grey segment"> <a class="demo" target="_blank" href="https://gizra.github.io/elm-i18n-example/">View demo</a> </div> <div class="ui center aligned secondary grey segment"> <a class="code" target="_blank" href="https://github.com/Gizra/elm-i18n-example">Get the source code</a> </div> </div> <div class="ui segments"> <div class="ui attached center aligned segment"> <div class="ui image"> <img src="https://www.gizra.com/assets/images/posts/elm-i18n/image1.gif" /> </div> </div> </div> <p>We looked for existing solutions and stumbled upon the elm-i18n library. This of course made us happy, to see that someone has already solved the problem for us. However, when we looked at the <a href="https://github.com/lukewestby/elm-i18n/tree/84d7da3a51d52a89d1e3371bfeb4f34eab05341c#example">example</a> something felt missing. Type safety.</p> <p>In Gizra we deal most hours of our working days with PHP, so you can say we are fearless developers. That is, we hope and believe our code is right, and worst case we know we will catch our bugs on run time.</p> <p>But Elm can make us better developers, and give us some safety!</p> <p><a href="http:///content/elm-i18n-type-safety//">Continue reading…</a></p>http:///content/elm-i18n-type-safety/http:///content/elm-i18nThu, 24 Mar 2016 00:00:00 -0400Elm-Hedley, App Overview<p>In August 2015 I challenged myself (and later the rest of the Gizra devs) to create a typical web-app with all the bells and whistles in Elm. It’s called <a href="https://gizra.github.io/elm-hedley">elm-hedley</a>, and I’m super proud it is now featuring in Elm’s <a href="http://elm-lang.org/">front page</a>.</p> <div class="ui segments"> <div class="ui attached center aligned segment"> <div class="ui image"> <img src="https://www.gizra.com/assets/images/posts/elm-hedley-overview/image1.jpg" /> </div> </div> </div> <p>This post is going to give a high level overview and point out some parts that are worth noting. However, before diving into the technical section, it is important to emphasize the virtues of <em>simply doing</em>.</p> <p>If you would go back in the commits history you would see some nasty stuff that have been completely overhauled and polished. The only way of getting to that “improving” part is of course by starting! Only after that will one become smarter and recognize what needs improving, as well as be more experienced to know how to do it.</p> <p><a href="http:///content/elm-hedley-overview//">Continue reading…</a></p>http:///content/elm-hedley-overview/http:///content/hedley-overviewWed, 30 Dec 2015 00:00:00 -0500Planet Elm<h2 id="planetelm-langorg-is-live"><a href="http://planet.elm-lang.org/">planet.elm-lang.org</a> is live!</h2> <p>Nice, right? Planet Elm and its <a href="http://planet.elm-lang.org/feeds.xml">RSS feed</a> is up and running - just grab it, and the best Elm related posts would appear in your favorite RSS reader.</p> <div class="ui segments"> <div class="ui attached center aligned segment"> <div class="ui image"> <img src="https://www.gizra.com/assets/images/posts/planet-elm/image1.jpg" /> </div> </div> </div> <p>I felt the need for such a site the day I started with Elm. Getting the Gizra devs to <a href="https://github.com/Gizra/planet-elm">build</a> it was the next logical thing.</p> <p>Having this main site as a central place for aggregating all the interesting content about Elm is yet another step in getting Elm into the mainstream.</p> <p>If you maintain your own blog, go ahead, and <a href="https://github.com/Gizra/planet-elm/wiki/Planet-Elm-guidelines">submit your RSS feeds</a>.</p> <p><a href="http:///content/planet-elm//">Continue reading…</a></p>http:///content/planet-elm/http:///content/planet-elmMon, 23 Nov 2015 00:00:00 -0500Elm Challenge<p>As part of our adoption of <a href="/content/thinking-choosing-elm/">Elm in production</a>, Gizra devs are learning and practicing their Elm skills.</p> <p>After they are done going over the existing videos/tutorials, we let them get their hands dirty. <a href="https://github.com/Gizra/elm-hedley">elm-hedley</a> was created just for that - to simulate a simple yet typical web app with login, RESTful, etc.</p> <p>Here’s the <a href="https://gizra.github.io/elm-hedley">existing app</a>. As you see each event appears as a clickable link.</p> <p>The challenge is to add a counter next to each event label that increments when clicked. When you refresh the page (F5) it shouldn’t remember the previous clicks and should start back at 0.</p> <p>In short, it should look like this (notice the bottom left list):</p> <div class="ui segments"> <div class="ui attached center aligned segment"> <iframe src="https://gfycat.com/ifr/MellowUnpleasantBoar" frameborder="0" scrolling="no" width="653" height="390" style="-webkit-backface-visibility: hidden;-webkit-transform: scale(1);"></iframe> </div> </div> <p>Go ahead, fork the repo and try for yourself. And don’t peek below, as it has the answer!</p> <p>.<br /> .<br /> .<br /> .<br /> .</p> <p><a href="http:///content/elm-challenge//">Continue reading…</a></p>http:///content/elm-challenge/http:///content/elm-challengeThu, 05 Nov 2015 00:00:00 -0500Thinking (And Choosing) Elm<p>In my <a href="https://www.gizra.com/content/elmlang-headless-drupal/">last post</a> I was giving a high level overview of why we were looking at Elm in Gizra. Since that post, we’ve almost completed the <a href="https://gizra.github.io/elm-hedley">demo app</a>, and we’ve changed our status from “Looking at Elm” to “Choosing Elm”.</p> <p>The reason? In short - I believe it will save us money.<br /> (Oh, and it’s fun)</p> <div class="ui segments"> <div class="ui attached center aligned segment"> <iframe src="https://gfycat.com/ifr/BountifulGloomyChickadee" frameborder="0" scrolling="no" width="100%" height="555" style="-webkit-backface-visibility: hidden;-webkit-transform: scale(1);"></iframe> </div> </div> <p><a href="http:///content/thinking-choosing-elm//">Continue reading…</a></p>http:///content/thinking-choosing-elm/http:///content/thinking-elmThu, 22 Oct 2015 00:00:00 -0400Elm Loves Headless Drupal<p>Part of my job is to get my hands dirty with technologies I stumble upon. I’ve decided to have a go at React. Well, one thing led to the other and it seems I went down the client side rabbit hole. I’d like to share with you my path - watch out though, it’s a slippery slope.</p> <div class="ui segments"> <div class="ui attached center aligned segment"> <div class="ui image"> <img src="https://www.gizra.com/assets/images/posts/elmlang/image1.jpg" /> </div> </div> <div class="ui attached center aligned caption segment"> &quot;Hello World&quot; in <a href="http://elm-lang.org/">Elm</a> </div> </div> <p>It all started with this <a href="https://www.youtube.com/watch?list=PLb0IAmt7-GS188xDYE-u1ShQmFFGbrk0v&amp;t=621&amp;v=nYkdrAPrdcw">Thinking Flux</a> video which explains the problems Facebook faced in its front-end and the new application architecture they are now using.</p> <p>Since the Flux concept was out, different libraries were written implementing it, but in my view it seems that <a href="http://rackt.github.io/redux/">Redux</a> is the winner in terms of simplicity, popularity, docs and community. I really recommend going over it - at least the intro and basics. You might be tempted to actually learn a bit of React (<a href="http://facebook.github.io/react/docs/tutorial.html">tutorial</a>) to follow the examples more easily.</p> <p>Then I saw Redux was crediting <a href="http://elm-lang.org/">Elm</a> for some of its inspiration, so I decided to give it a quick look. I was immediately blown away by Elm. The syntax is weird (unless you know Haskell), it has a crazy learning curve, but a lot of it makes so much sense.</p> <p>The following recording is a presentation I first gave internally for Gizra devs, then as a BoF in DrupalCon Barcelona, and finally recorded to share it with everyone.</p> <div class="ui segments"> <div class="ui attached center aligned segment"> <iframe width="100%" height="360" src="https://www.youtube.com/embed/K_gTakI4Vfw?rel=0" frameborder="0" allowfullscreen=""></iframe> </div> </div> <p>My goal is to get more people excited about Elm so the community and contributions grows. I feel it is now very much like Drupal about 10 years ago - a small community, far from being mainstream, but with a lot of potential.</p> <p>Maybe if we’ll draw from Drupal’s experience in building and cultivating a community we’ll be able to bring this awesome tool closer to the mainstream.</p> <p><a href="http:///content/elmlang-headless-drupal//">Continue reading…</a></p>http:///content/elmlang-headless-drupal/http:///content/elmlangThu, 01 Oct 2015 00:00:00 -0400