Gizrahttps://www.gizra.comMon, 18 Dec 2017 07:07:27 -0600Mon, 18 Dec 2017 07:07:27 -06001800Write Your First Bot Using Nuntius<p>In case you haven’t noticed, we are on the verge of a new era - the bot era!!</p> <p>[<em>Dramatic music in the background</em>]</p> <p>Sort of… <a href="">Mark Zuckerberg</a> showed us what it could really be. Though, we need to understand that for now, bots are more like what Dries showed us in his keynote at <a href="">DrupalCon Baltimore</a>.</p> <h2 id="ro-bot-101">Ro-bot 101</h2> <p>So what is a bot? If you’ve ever said <code class="highlighter-rouge">Hey Siri</code>, <code class="highlighter-rouge">OK Google</code>, <code class="highlighter-rouge">Hey Cortona</code>, or <code class="highlighter-rouge">Alexa</code>, then you have interacted with a bot. That bot received an input, returned an output - it woke you up, reminded you of something, sent an email, or ordered a new book from Amazon - and you if you’re lucky, a drone delivered it!</p> <h2 id="platforms-and-technologies">Platforms and technologies</h2> <p>Now that we understand what a bot is, let’s start to see how we can write one. Any chat platform provide bots, and there are two ways for them to communicate:</p> <ol> <li><strong>Web sockets</strong> - Though we use this technology for push events to the user’s browser, platforms provide a web socket channel and push events when something happens in a channel in which your bot is listening.</li> <li><strong>Web hooks</strong> - In this case you get http requests with the information on events.</li> </ol> <p>Slack, Facebook Messenger, Skype, and Telegram all provide integrations with bots in one way or another, but in this post we will focus on Slack.</p> <h2 id="writing-your-first-bot-is-easier-than-you-think">Writing Your First Bot is Easier than You Think</h2> <p>First, create a bot in your team. You can do it under <code class="highlighter-rouge"></code> and create a custom bot integration.</p> <p>Next you’ll need to start with a library. There’s something like a quadrillion libraries - PHP, NodeJS, Python, and couple in Go lang. For our purposes, we need an easy setup, listening to events and acting, understanding from the text what kind of task the user requires, and even more (cron tasks for reminders, incoming web hooks, DB layer, etc.). Sounds a bit daunting, no? You’re right!</p> <p>When I started to write the first task, I saw that analyzing the text is more than just matching a function to the text. When there are a lot of tasks, the code will get long and messy. And that’s why I created Nuntius: a PHP framework based on Symfony components that helped me organize the code.</p> <h2 id="introducing-nuntius">Introducing Nuntius</h2> <p>Though <a href="">Nuntius</a> is well-documented, let’s see how easy is to set up a task. After <a href="">settings up nuntius</a> we need to write the first task.</p> <h2 id="hooks-event-dispatching">Hooks? Event dispatching?</h2> <p>No and no. To make things easy, Nuntius does not use hooks or events dispatching to integrate with custom code. Instead, all of the integrations defined in a YML file.</p> <p>In our <code class="highlighter-rouge">hooks.local.yml</code> we will add a custom task: <script src=""></script></p> <p>Our task will be located at <code class="highlighter-rouge">src/Custom/LookForAPicture.php</code>: <script src=""></script></p> <p>After implementing the task, we can start to code. So, what should this task do? Get a keyword, look for an image which relates to that keyword, and send it as an attachment to the message. When you are feeling down you could ask for a picture of a cute kitten to take away your sorrow.</p> <p>We will need to search for pictures via a REST request. I found a nice service for that: <a href="">pixabay</a>. You’ll need to register and get an API key.</p> <p>After acquiring the access token, we need to store it somewhere. The best place would be in the <code class="highlighter-rouge">credentials.local.yml</code> which located under the <code class="highlighter-rouge">settings</code> library:</p> <script src=""></script> <p>Let’s have a look at the code to get the picture:</p> <script src=""></script> <p>What we need to do is to return the image URL, and that’s it! This the full code:</p> <script src=""></script> <p>And this is the result:</p> <div class="ui segments"> <div class="ui attached center aligned segment"> <div class="ui image"> <img src="" /> </div> </div> <div class="ui attached center aligned caption segment"> An embedded kitten image. </div> </div> <h2 id="but-wait-theres-more">But Wait, There’s More!</h2> <p>Slack was kind and embedded the picture for us, but it’s not the best practice. Using attachments makes the message much more readable and gives us this:</p> <div class="ui segments"> <div class="ui attached center aligned segment"> <div class="ui image"> <img src="" /> </div> </div> <div class="ui attached center aligned caption segment"> Attaching an image by Slack best practice. </div> </div> <p>The code is a bit more complex than the simple URL we returned: <script src=""></script></p> <h2 id="external-services">External Services</h2> <p>Your mind was blown, I know. But what’s next? If you thought that this branch of development is left without any SAAS solution, you are wrong. Bots need to interact with people and require deep learning and natural language analysis. There are two famous players in the market (for now) - <a href=""></a> and <a href=""></a>.</p> <p>In a nutshell, they will give you informative object to interact with and train with deep learning.</p> <h1 id="is-that-the-end">Is That the End?</h1> <p>No. Skynet is not around the corner, and HAL 9000 isn’t going to be in NASA’s new spaceships. This is just the beginning. Unless you are a big company like Apple, Google, or Facebook you probably won’t provide a solution like Siri and other bots.</p> <p>Bots, as I can see it, will be another interaction with the product and can provide a simple way to get information like:</p> <ul> <li>When are you going launch the new version?</li> <li>Let users know that the site is under maintenance for now, and when it’s back.</li> <li>Notify the user when a new season of a TV show is going to launch (I was informed about Silicon Valley new season via Facebook Messenger.)</li> </ul> <p>Don’t forget that QA was once done pretty much manually. Now, QA is automated but still need to be written and maintained. We might be killing one field but creating a new field.</p> <p><a href="">Continue reading…</a></p>, 01 Jun 2017 00:00:00 -0500Travis 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="">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="">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="">shell scripts</a> according to the <a href="">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="">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="\_files/docker-compose.yml">launches</a> two containers, one with the application and the test code, the other with a <a href="">Selenium Grid</a>. It also helps the containers talk to <a href="">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="">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="">failed tests</a>. To use Google Drive programmatically, <a href="">several steps</a> are needed, but the <a href="">gdrive</a> uploader tool has excellent documentation.</p> </li> <li> <p>In the very end, <a href="">Gizra Robot</a> posts a comment on the <a href="">conversation thread of the pull request</a>. Adding a robot user to GitHub <a href="">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="">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="">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="" /> </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="">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="">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="">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 ( 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="">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="">Continue reading…</a></p>, 23 May 2017 00:00:00 -0500Let’s Talk about Decoupled Authentication<p>For a traditional Drupal site, we don’t need to handle authentication, because Drupal has our back - a user submits the login form, gets a cookie, and starts using the awesome site. But what about decoupled sites? How can we authenticate the user?</p> <p>Before diving into this, we need to understand the authentication types provided by RESTful:</p> <ol> <li> <p>Cookie - Validating the user cookie is not something new for us. We have been doing it for years, and it’s one of the first techniques web developers acquire. But, to validate the request we need to pass a CSRF token. This token helps <a href="">make sure</a> the form was not a fraud. An example could be a form that tweets on the behalf of us on Twitter. The existence of a valid CSRF in the request would make sure an internet scam could not generate the form and upload to Twitter a photo of a cat, when you’re a dog person.</p> </li> <li> <p>Access token - RESTful will generate an access token and bind it to the user. Unlike the cookie which needs a CSRF token to be valid by Restful, we get a two-for-one deal. The existence of the access token in the DB is verified and references us to the user which is represented by that access token.</p> </li> </ol> <p><a href="">Continue reading…</a></p>, 27 Oct 2016 00:00:00 -0500Yesod (and Haskell) from a Drupal (and PHP) Perspective<p>In Gizra, we run an unusual stack. Drupal, our bread and butter, serves as the backend and is complimented by <a href="">Elm</a> for the front end, and as of recently <a href="">Yesod</a> - a Haskell framework.<br /> Before Yesod, we were running NodeJs as our proxy server for light tasks or real-time messages.</p> <p>But ever since I came across Elm, Javascript and I are hardly friends. I respect it, but can no longer turn my eye from its shortcomings. Functional programming has caught my heart and mind.</p> <p>In this post I’m not going to try and present strong points on why <em>you</em> should adapt this stack, but rather share with you the unique path we are paving.</p> <h2 id="elm">Elm</h2> <p>Elm was my first dip into the functional programming (FP) world. I recommend starting from there. It’s way more gentle than Haskell, and it has, of course, one important advantage - it helps you build rock solid, crazily fast, joy-filling, web apps.</p> <p>Maybe this <a href="">post and video</a> will get you excited as well.</p> <h2 id="gentle-intro-to-haskell">Gentle Intro to Haskell</h2> <p>A good way to start explaining what’s so special about Haskell is to dive directly into Haskell. While PHP is defined (by some) as a “productive” language, Haskell is often blamed (by some) as being an “academic language”. Both statements are probably wrong.</p> <p>Often when mentioning Haskell, we talk about the compiler and the type system. They are truly marvelous tools. For the type system, I think the Elm post I lined above should be enough to get the hang of it. But I’d like to continue and reveal a bit more by highlighting mini examples on how Haskell makes us approach development tasks differently.</p> <h3 id="lists">Lists</h3> <p>Below are examples from the REPL (the interactive shell for Haskell)</p> <div class="language-haskell highlighter-rouge"><pre class="highlight"><code><span class="o">&gt;</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">]</span> <span class="o">++</span> <span class="p">[</span><span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">]</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">]</span> </code></pre> </div> <p>What we have here are two lists of integers that are appended to each other. A list of integers is represented as <code class="highlighter-rouge">[Int]</code> in Haskell. The <code class="highlighter-rouge">++</code> is the operation that causes those two lists to be grouped into a single one.</p> <p>Haskell comes with some handy shortcuts.</p> <p><a href="">Continue reading…</a></p>, 22 Sep 2016 00:00:00 -0500Creating a Dynamic Email Template in Drupal<p>Creating a plain text email with Drupal is a simple task. However, when you want to send a nicely designed message with a logo, an article, a linked button or any other unique design with dynamic content personalized for each user, it can get complicated.</p> <p>The complication stems not from the dynamic content, but rather from the fact that the CSS that can be applied inside email templates is limited. In general, targeting multiple email clients can be worse then getting your CSS to work on IE9!</p> <p>This post will walk you through a solution we use to address these requirements, but before jumping in, let me first explain Gizra’s approach to themes. We don’t use custom CSS in Drupal themes. When we start building a website, we divide our work into several milestones, the first is creating a clean and static markup, using Jekyll. At Gizra, we take pixel perfect very seriously, and by doing the markup first, we can concentrate on building our App pages exactly the way they are suppose to look, test their responsiveness, show our clients a first draft, and fix bugs before getting into the logic. We use gulp to compile the SASS files into one CSS file, and after doing that, we copy the CSS file to the themes folder. Then we take our static pages, cut them into pieces, and use them in Drupal themes and plugins.</p> <p>By doing this, we can focus on our logic without worrying about how it may look with different dynamic content. Focusing on Frontend and Backend as separate tasks makes building websites easier and faster. Even fixing bugs discovered while implementing dynamic content can now be easily fixed. Our <a href="/content/custom-css-as-contrib-with-jekyll/">No more CSS in your Drupal Theme!</a> blog post talks more extensively about the way we work with Drupal themes.</p> <p>The same approach is implemented when we create an email template. We first build the email markup with static content, and then we use it to create dynamic content messages. Oh, and we cheat, because we don’t write a single line of HTML or CSS!</p> <div class="ui segments"> <div class="ui attached center aligned segment"> <div class="ui image"> <img src="" /> </div> </div> <div class="ui attached center aligned caption segment"> A demo email template created for this post </div> </div> <p><a href="">Continue reading…</a></p>, 15 Sep 2016 00:00:00 -0500OG8 Development Mindset<p>As OG8 is steadily being built, I have noticed a certain pattern - or a mindset - we’ve been following which I think is worth sharing.</p> <p>OG8 is the third time I’ve written OG for Drupal. The first OG7 version was a head jump into the Entity goodness that Drupal 7 brought along with Entity API. The second version was taking a small step back away from the Entity fiesta, but took two steps forward into the field API.</p> <p>I think that as a developer I have matured since then. Edge cases are no longer my concern. I mean, I’m making sure that edge cases can be done and the API will cater to it, but I won’t go too far and implement them. It’s not that in OG7 we tried to tackle all of the edge cases, but in OG8 it’s even less.</p> <p>In fact, although we write a lot of new code as part of the porting, as the way we write modules for Drupal 8 has changed considerably, writing OG8 feels like… Well, it feels like I’m mostly <em>deleting</em> files.</p> <div class="ui segments"> <div class="ui attached center aligned segment"> <div class="ui image"> <img src="" /> </div> </div> <div class="ui attached center aligned caption segment"> Removing lines of code is so much better than adding </div> </div> <h2 id="myths-debunked">Myths Debunked</h2> <p>It’s not too rare to hear rants about OG. Often they are not backed by actual data, or even refer to older versions.</p> <p><a href="">Continue reading…</a></p>, 07 Sep 2016 00:00:00 -0500Getting started with a Core Initiative<div class="ui segments"> <div class="ui attached center aligned segment"> <div class="ui image"> <img src="" /> </div> </div> <div class="ui attached center aligned caption segment"> Driesnote where GraphQL was featured. Picture from <a href="">Josef Jerabek</a> </div> </div> <p>After some time contributing to the Drupal project in different ways, I finally decided to step up and get involved in one of the <a href="">Core Initiatives</a>. I was on IRC when I saw an announcement about the JSON API / GraphQL initiative weekly meeting and it seemed like a great chance to join. So, this blog post is about how you can get involved in a Core Initiative and more specifically, how can you get involved in the JSON API / GraphQL Initiative.</p> <p><a href="">Continue reading…</a></p>, 20 Aug 2016 00:00:00 -0500Organic Groups and Message Stack in Drupal 8<p>Hi geeks! Did the post title get you excited? Great, because Organic Groups (OG) and Message stack are getting closer to being Drupal 8 ready.</p> <p>I’d like to give an overview about their state, the amazing community effort around them, and also share some of my personal thoughts about contribution to Drupal 8 in general.</p> <h2 id="organic-groups">Organic Groups</h2> <p><strong>The heroes:</strong> <a href="">@RoySegall</a>, <a href="">@pfrenssen</a> <a href="">@damiankloip</a>, <a href="">@chx</a> et al.</p> <p>For years Organic Groups has been one of the proven solutions for multi-sites functionality, in the form of one code base, one database, and one dashboard to rule them all. After so many years and seeing so many different implementations, such as Harvard’s OpenScholar, OpenAtrium, and many others, I’m even more confident OG is doing many things right.</p> <p>Most of OG7’s concepts are being migrated to OG8, but obviously this is also a good time to fix some old mistakes. One of the mistakes was treating users and content (i.e. non-user entities) alike. But, well, you know - they are not. Because when we came to re-think of it, membership really makes sense only for users. For example, if the membership state is <code class="highlighter-rouge">active</code>, <code class="highlighter-rouge">pending</code> or <code class="highlighter-rouge">blocked</code>, that should indeed be applied only to users. So we’ve changed it:</p> <p><a href="">Continue reading…</a></p>, 09 Jun 2016 00:00:00 -0500Drupal 8: Migrate Nodes with Attachments Easily<p>Drupal-8-manina is at its highest. Modules are being ported, blog posts are being written, and new sites are being coded, so we in Gizra decided to join the party.</p> <p>We started with a simple site that will replace an existing static site. But we needed to migrate node attachments, and we just couldn’t find an existing solution. Well, it was time to reach out to the community</p> <blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Any example of <a href="">#Drupal</a> 8 migration of files/ images out there? (including copy from source into public:// ) </p>&mdash; Amitai Burstein (@amitaibu) <a href="">April 8, 2016</a></blockquote> <script async="" src="//" charset="utf-8"></script> <p>A few minutes after the tweet was published, we received a great hint from the fine folks at <a href="">Evoloving Web</a>. They were already migrating files into Drupal 8 from Drupal 7, and were kind enough to <a href="">blog post</a> about it.</p> <p>However, we were still missing another piece of the puzzle, as we also wanted to migrate files from an outside directory directly into Drupal. I gave my good friend <a href="">@jsacksick</a> a poke (it’s easy, as he sits right in front of me), and he gave me the answer on a silver platter.</p> <div class="ui segments"> <div class="ui attached center aligned segment"> <div class="ui image"> <img src="" /> </div> </div> <div class="ui attached center aligned caption segment"> Post has a happy end - we were able to migrate files and attach to a node! </div> </div> <p><a href="">Continue reading…</a></p>, 08 Jun 2016 00:00:00 -0500The Gizra Way Webinar: Budget Goggles and the Time-Boxed Project<p>Today we held our inaugural <a href="">#TheGizraWay</a> webinar. The web series is intended to showcase some of “The Gizra Way” principles - a set of best practices and methodologies, borrowed from the Open Source development world and applied to operations, workflow, and overall company culture.</p> <p>For the first in the series, we chose the topic of price estimations because it provides a real - and perhaps radical - example of how transparent communication from the beginning about a project’s needs alongside its budget can turn the process on it’s head. In the video below Amitai Burstein discusses how a budget-and time-driven discovery process gets a project off on the right foot.</p> <div class="embed-responsive embed-responsive-16by9"> <div class="ui segments"> <div class="ui attached center aligned segment"> <iframe class="embed-responsive-item" src=""></iframe> </div> </div> </div> <p>The next webinar - to take place in July 2016 - will be announced shortly. If you have any suggestions for topics or an idea that you would like to present in a future session <a href="">let us know</a>.</p> <p><a href="">Continue reading…</a></p>, 07 Jun 2016 00:00:00 -050012 Things I learned at my first DrupalCon<p>For years I have been hearing about DrupalCon from Brice and Amitai. Every six months they would send me a massive group photo and challenged me to locate them among the crazy mustaches, viking helmets, and identical t-shirts. Needless to say, I failed every time and the number of people in those pictures grew every year. I’m also happy to say that that last group photo - from a week ago - included me as well (Bonus points if you can <a href="">spot me</a>).</p> <div class="ui segments"> <div class="ui attached center aligned segment"> <div class="ui image"> <img src="" /> </div> </div> <div class="ui attached center aligned caption segment"> 2016 DrupalCon Group Photo. </div> </div> <p>My first Con was an overwhelmingly great experience and I learned a ton of new things. Here are the top 12:</p> <h2 id="1-count-down-from-100-if-you-cant-fall-asleep-at-night">1) Count down from 100 if you can’t fall asleep at night</h2> <p>DrupalCon’s sessions and keynotes are diverse and engaging. For instance, the <a href="">Community Keynote</a> by <a href="">@schnitzel</a> (Michael Schmid), was full of tips to keep your brain ready and aware, such as: Start your day doing things you dislike, drink plenty of water that will force you to take a lot of pee breaks, and <a href="">play with kids</a> to clear your mind.</p> <p>The enormous amount of people and ideas exchanged in DrupalCon are so invigorating that you might find it hard to sleep at night. Try counting backwards slowly from hundred to zero. I have already put it to the test and it works - that tip alone was worth the trip.</p> <div class="ui segments"> <div class="ui attached center aligned segment"> <div class="ui image"> <img src="" /> </div> </div> <div class="ui attached center aligned caption segment"> Michael Schmid (@schnitzel) delivers the Community Keynote </div> </div> <h2 id="2-gator-omelette-for-breakfast">2) Gator omelette for breakfast</h2> <p>New Orleans is a seafood and meat town. Crab, crawfish, sausages, bbq, and alligator - the Queen City is not known for its consumptions of vegetables.</p> <p>Breakfast portions are huge and everything is golden-brown. But in New Orleans there is a special name for that little strip of green ground in the middle of a boulevard - “neutral ground” (thanks Trivia Night!). Perhaps they can grow fresh vegetables there!</p> <div class="ui segments"> <div class="ui attached center aligned segment"> <div class="ui image"> <img src="" /> </div> </div> <div class="ui attached center aligned caption segment"> A typical three-person breakfast. We've never finished it! </div> </div> <p><a href="">Continue reading…</a></p>, 17 May 2016 00:00:00 -0500Migration Best Practices<p>The wonderful Migrate module is used in every one of our projects, whether we have actual legacy content, or “just” want to create dummy and <a href="">XSS content</a>.</p> <p>So you received from your client a scary looking SQL dump or Excel file with old website data. Where should you start?</p> <p>Here are some of the best practices we apply in Gizra to ensure a smooth migration project, with the least possible amount of surprises or bugs.</p> <p><a href="">Continue reading…</a></p>, 01 Apr 2016 00:00:00 -0500Docker and Travis-CI<p>If you have ever had to setup Travis-CI, I’m sure you know where the biggest pain point is - debugging the machine.</p> <p>We have lost so many hours on intermediate commits, waiting for Travis to spin up a new box, run the scripts only to see it fail on the last command. Not to mention how hard it is to debug a webapp on a machine you don’t have direct access to, and there is no browser.</p> <p>But there’s a new and better way - we can use <a href="">Docker inside Travis</a>.</p> <p>What does that mean? In short, it means that setting up Travis, and debugging your test scripts has just become much easier. You can do all the setup, and the debugging from your own local computer!</p> <div class="ui segments"> <div class="ui attached center aligned segment"> <div class="ui image"> <img src="" /> </div> </div> <div class="ui attached center aligned caption segment"> Behat tests running from within the container </div> </div> <p><a href="">Continue reading…</a></p>, 30 Mar 2016 00:00:00 -0500Budget Goggles: A Common Language and Setting Expectations<p>By default IT projects will fail. They may still launch but not accomplish any one of the following requirements of a successful project: on time, within budget, with happy users.</p> <p>Gizra addresses this by defining the ambiguous with the simple but powerful principle that the <strong>budget dictates the project</strong>. It all begins (and ends) at the price estimation. Our budget breakdown creates a common language for all stakeholders and sets expectations early on.</p> <p>After a <strong>discovery phase</strong>, the project is broken down to <strong>timeboxed tasks</strong> - each with a clear deadline and cost to produce the deliverable. We set the maximum time to complete a task at 12 hours because this number is easily grasped by all stakeholders. Every feature and bug has a price tag and we encourage our clients <em>not</em> to try to buy them all (at least not at first).</p> <p>An example of our budget breakdown:</p> <div class="ui segments"> <div class="ui attached center aligned segment"> <div class="ui image"> <img src="" /> </div> </div> </div> <p><a href="">Continue reading…</a></p>, 17 Mar 2016 00:00:00 -0500Cross-Site Scripting attack detection<p>When we develop a website we should take care of many things like design, responsiveness, speed, QA - and of course, security.</p> <p>One of the major security concerns in websites and web applications is Cross Site Scripting (XSS). You definitely don’t want somebody to run their own malicious code in your website. And to avoid it - you would like to have some kind of “vaccine” from such “disease”.</p> <p>We all know about Drupal’s <code class="highlighter-rouge">check_plain()</code>, <code class="highlighter-rouge">filter_xss()</code> and similar functions that sanitize user generated text, but unless we are actively checking for XSS, how can we be sure we’ve added them on all the right places?</p> <p>Well, we found a nice solution for it that can be easily applied in your projects as well.</p> <div class="ui segments"> <div class="ui attached center aligned segment"> <div class="ui image"> <img src="" /> </div> </div> <div class="ui attached center aligned caption segment"> XSS on the title and body fields of an article </div> </div> <p><a href="">Continue reading…</a></p>, 29 Feb 2016 00:00:00 -0600Entities Diagram Graph<p>We are often challenged with the maintenance of existing projects that were developed by other agencies, or a new developer arrives and we need to quickly bring them on board. The complexity of legacy projects can be very high and the risk of breaking existing logic is something we want to avoid.</p> <p>One way we like to look at a project before diving into the code is through its data structure. The different entities and their relations can tell us a lot about the business logic of the site and its internal logic. We assumed that if we could <em>easily</em> generate a graph with all the bundles, entities, and their relations this complex task would be easier.</p> <p>Having done this for a while now, I believe our assumption was right. Taking our open-source <a href="">Productivity project</a> (Gizra’s internal ERP/Project management system) as an example, it’s much easier to look at the following graph and understand that <code class="highlighter-rouge">Work session</code>, <code class="highlighter-rouge">Time tracking</code>, <code class="highlighter-rouge">Payment</code>, and <code class="highlighter-rouge">Github Issue</code> bundles are pointing at a <code class="highlighter-rouge">Project</code>, which in turn points to an <code class="highlighter-rouge">Account</code> bundle. <code class="highlighter-rouge">Github Issue</code> can also reference itself.</p> <div class="ui segments"> <div class="ui attached center aligned segment"> <div class="ui image"> <img src="" /> </div> </div> </div> <p><a href="">Continue reading…</a></p>, 24 Jan 2016 00:00:00 -0600Drupal, Hippies and Backend Restrictions<p>You might have heard of <a href="">Burning Man</a>. Basically it’s a lot of hippies settling down in the desert for a few days, setting up small camps with different themes that make up a big, temporary city.</p> <p>It’s not for me.</p> <div class="ui segments"> <div class="ui attached center aligned segment"> <div class="ui image"> <img src="" /> </div> </div> <div class="ui attached center aligned caption segment"> Radical Self-expression is one of <a href="">Midburn ten principles</a>. &#169; Eyal Levkovich. </div> </div> <p><a href="">Continue reading…</a></p>, 17 Jan 2016 00:00:00 -0600Mindful Custom Breakpoints<p>The vast majority of our projects at Gizra use <a href="">Bootstrap</a> for layout. We spend a lot of time and effort creating the perfect responsive layout and UX across all breakpoints. As Bootstrap comes by default with four breaking points, we naturally implemented them all, until we started asking ourself:</p> <p><strong>Q</strong>: Is responsive really needed?<br /> <strong>A</strong>: Yes, Of course.</p> <p><strong>Q</strong>: Do we always need so many breakpoints?<br /> <strong>A</strong>: No. Or, to say it differently: Yes. But not necessarily immediately.</p> <p>Don’t get me wrong. I’m not against responsive design. I’m just saying each breakpoint has an impact on the project length and budget. It’s up to us to help the client decide how many breakpoints are right for them. As you know, Bootstrap can have <a href="">custom breakpoints</a>.</p> <div class="ui segments"> <div class="ui attached center aligned segment"> <iframe src="" frameborder="0" scrolling="no" width="100%" height="555" style="-webkit-backface-visibility: hidden;-webkit-transform: scale(1);"></iframe> </div> <div class="ui attached center aligned caption segment"> Bootstrap default layout VS Bootstrap custom layout </div> </div> <p><a href="">Continue reading…</a></p>, 19 Nov 2015 00:00:00 -0600Decoupled Drupal: When, Why, and How - The Video<p>I believe it’s safe to say that Decoupled Drupal is here to stay. Back in DrupalCon Los Angeles my good friend <a href="">Josh Koenig</a> from <a href="">Pantheon</a> and I teamed up to share our experience with it.</p> <p>Josh asked me if I could do the presentation with him and I immediately agreed, as Josh is an awesome presenter and I knew it’s going to be fun. My answer, if I recall correctly, was:</p> <blockquote>If the session gets selected it will need to be partially weird. And you might need to grow a mustache for that.</blockquote> <p>He didn’t grow a mustache. But it was fun and full of energy. And it has a lot of very pragmatic tips, such as <strong>Headless Drupal is a terrible idea!</strong></p> <p>Anyway, enough text - here is the video:</p> <div class="ui segments"> <div class="ui attached center aligned segment"> <iframe width="640" height="360" src="" frameborder="0" allowfullscreen=""></iframe> </div> </div> <p><a href="">Continue reading…</a></p>, 05 Nov 2015 00:00:00 -0600Thinking (And Choosing) Elm<p>In my <a href="">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="">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="" frameborder="0" scrolling="no" width="100%" height="555" style="-webkit-backface-visibility: hidden;-webkit-transform: scale(1);"></iframe> </div> </div> <p><a href="">Continue reading…</a></p>, 22 Oct 2015 00:00:00 -0500Elm 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="" /> </div> </div> <div class="ui attached center aligned caption segment"> &quot;Hello World&quot; in <a href="">Elm</a> </div> </div> <p>It all started with this <a href=";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="">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="">tutorial</a>) to follow the examples more easily.</p> <p>Then I saw Redux was crediting <a href="">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="" 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="">Continue reading…</a></p>, 01 Oct 2015 00:00:00 -0500Visual Regression Tutorials<div class="ui segments"> <div class="ui attached center aligned segment"> <div class="ui image"> <img src="" /> </div> </div> <div class="ui attached center aligned caption segment"> Complex dynamic page </div> </div> <p>A well known DrupalCon fact is that the action mostly takes place in the hallways and social gatherings. The logic is that the sessions are recorded, and the rest isn’t.</p> <p>On DrupalCon L.A. I was spending most of my time in the hallways stalking people to show them the newly born <a href="">Shoov</a> and ask for their feedback. One of those people was my good friend Mike Anello, which later expressed his feelings about Shoov in this fun DrupalEasy <a href="">podcast</a>.</p> <p>Few months later, with the next DrupalCon already around the corner and Shoov maturing every day, I’ve contacted him to get his feedback on what we have so far, and I got this:</p> <blockquote> <p>I think one that could help me and other developers is almost something like a glossary. I’ve heard of many of the technologies in your visual monitoring “stack”, but not entirely clear on what the purpose of each one is (Yeoman, WebdriverCSS, mocha, etc… - Behat I know!</p> </blockquote> <p>Let’s start from the end, because those three words made an impact on me - “Behat I know”.</p> <p>As a reader of this post you are probably familiar with <a href="">Behat</a> or at least know what functional testing frameworks are.</p> <p>Do you remember that time in the past you didn’t?<br /> Do you remember that time in the past where functional testing was just a <em>nice to have</em> for you and not the <em>life saver</em> it is now days?</p> <p><a href="">Continue reading…</a></p>, 04 Aug 2015 00:00:00 -0500Visually Monitoring<p>In recent months I’ve been demoing visual monitoring to many developers. The reaction was always positive, but I’ve realized that not enough people have taken the step from recognizing the need to actually implementing it on their own projects.</p> <p>If you have been following my recent blog posts or tweets you’ve probably noticed we are trying to bring visual monitoring along with <a href="">Shoov</a> to the masses. To do so we’re trying to reduce the complexity and codify our “lessons learned”.</p> <div class="ui segments"> <div class="ui attached center aligned segment"> <iframe src="" frameborder="0" scrolling="no" width="100%" height="424" style="-webkit-backface-visibility: hidden;-webkit-transform: scale(1);"></iframe> </div> <div class="ui attached center aligned caption segment"> visually monitored by Shoov </div> </div> <p>Yeoman generators is one way to achieve this. With the new <a href="">yo shoov</a> - a single command makes sure all the files needed for visual monitoring are immediately scaffolded in your repository. In fact, it also sets up Behat tests along with a <a href="">.shoov.yml</a> that will allow Shoov to run your visual monitoring tests periodically.</p> <p>Since visual monitoring might be new for a lot of people, the generator not only scaffolds the files but also attempts to check if your system is properly installed, and tells you how to fix it if not.</p> <div class="ui segments"> <div class="ui attached center aligned segment"> <div class="ui image"> <img src="" /> </div> </div> <div class="ui attached center aligned caption segment"> Shoov generator in action. </div> </div> <p><a href="">Continue reading…</a></p>, 20 Jul 2015 00:00:00 -0500Why PhantomJS When You Can Chrome<p>Following our <a href="/content/live-monitor-shoov-irony/">unfortunate bug</a> in Shoov which caused login to stop working, we decided to write a Behat test that will continuously check the live site and make sure login with GitHub is working properly.</p> <p>Writing the Behat test was pretty easy, however it had a major problem - it didn’t work.</p> <div class="language-gherkin highlighter-rouge"><pre class="highlight"><code><span class="nt">@javascript</span> <span class="kn">Scenario</span><span class="p">:</span> Login to shoov <span class="nf">Given</span> I am an anonymous user <span class="nf">When</span> I visit the homepage <span class="nf">And</span> I login with my GitHub account <span class="nf">Then</span> I should wait for the text <span class="s">"My Account"</span> to <span class="s">"appear"</span> </code></pre> </div> <p>When Behat sees the <code class="highlighter-rouge">@javascript</code> tag in the begining of the scenario, it launches it (with the help of Mink extension) in PhantomJS, Firefox or Chrome.<br /> PhantomJS is usually the easiest to configure and hook into the CI workflow later on.</p> <p>But the test we wrote just failed on all versions of PhantomJS we tried. Which made us switch to Firefox instead. Travis CI is kind enough to have a headless Firefox installed in their machine which we could use. Unfortunately, Firefox didn’t like our test either, but for another reason - it couldn’t parse the xpath we use to find our text elements.</p> <p>So after spending some time trying to figure out a workaround, I suddenly stared at the browser I was using to find the answer - Chrome!</p> <div class="ui segments"> <div class="ui attached center aligned segment"> <iframe src="" frameborder="0" scrolling="no" width="100%" height="424" style="-webkit-backface-visibility: hidden;-webkit-transform: scale(1);"></iframe> </div> <div class="ui attached center aligned caption segment"> Behat test running on headless Chrome, seen via VNC </div> </div> <p><a href="">Continue reading…</a></p>, 25 Jun 2015 00:00:00 -0500Live Monitoring With Shoov And Some Sweet Irony<p>Irony presents itself in many forms. Not being able to login to a site that is responsible for testing that the login is working properly on other live sites, is one of them.</p> <p>As much as I’d like to say I was able to enjoy the irony, the six hours I spent tracking the bug were slightly frustrating.</p> <p>One of the things <a href="">Shoov</a> is built for is assisting us with a quick configuration of live site monitoring using your preferred functional testing tool (e.g. Behat or CasperJS).<br /> As awesome as services like Pingdom are, they still provide very little insight to what’s actually going on in the site. In fact, according to Pingdom, Shoov was up and running, even though no user could have logged in.</p> <div class="ui segments"> <div class="ui attached center aligned segment"> <div class="ui image"> <img src="" /> </div> </div> <div class="ui attached center aligned caption segment"> Shoov login now working. When it wasn't, the fish were sad </div> </div> <h2 id="post-mortem">Post Mortem</h2> <p>At this point of time I think very few people care about the “post mortem” of this incident since Shoov is still a work in progress, however some interesting lessons were learned, and some contributions were made.</p> <p><a href="">Continue reading…</a></p>, 01 Jun 2015 00:00:00 -0500Forking Todo Restful with Backbone.Marionette<p><strong>In this guest post, <a href="">Luke Herrington</a> shares his experience with integrating an existing Drupal backend with a Backbone.Marionette Todo app.</strong></p> <p>If you’re reading this, you probably already know about all of the great work that Gizra has done in the Drupal/REST space. If you haven’t, I highly recommend you check out their <a href="">github</a> repo. Also see the <a href="">RESTful</a> module.</p> <p>One of the projects that Amitai has contributed is <a href="">Todo Restful</a>. It shows an Angular implementation of the canonical <a href="">TodoMVC</a> Javascript app connecting to a headless Drupal backend. It’s a great demonstration of how easy exposing Drupal content with the RESTful module is. It also shows that when a RESTful API adheres to best practices, connecting it with clients that follow the same best practices is like a nice handshake.</p> <p>I saw the Todo Restful project and it got me thinking, “If Amitai did this right (hint: he did), then I should be able to get this working with Backbone pretty easily”. I was pleasantly surprised!</p> <div class="ui horizontal segments"> <div class="ui center aligned secondary grey segment"> <a class="demo" target="_blank" href="">View demo</a> </div> <div class="ui center aligned secondary grey segment"> <a class="code" target="_blank" href="">Get the source code</a> </div> </div> <div class="ui segments"> <div class="ui attached center aligned segment"> <div class="ui image"> <img src="" /> </div> </div> <div class="ui attached center aligned caption segment"> Todo app with a Drupal backend </div> </div> <p>Here’s a simplified list of everything I had to do to get it working:</p> <p><a href="">Continue reading…</a></p>, 23 May 2015 00:00:00 -0500Visual regression tests on every commit<p>As we dive deeper into visual regression testing in our development workflow we realize a sad truth: on average, we break our own CSS every week and a half.</p> <p>Don’t feel bad for us, as in fact I’d argue that it’s pretty common across all web projects - they just don’t know it. It seems we all need a system that will tell us when we break our CSS.</p> <p>While we don’t know of a single (good) system that does this, we were able to connect together a few (good) systems to get just that, with the help of: Travis-CI, <a href="">webdriverCSS</a>, <a href=""></a>, BrowserStack/Sauce Labs, and <a href="">ngrok</a>. Oh my!</p> <p>Don’t be alarmed by the long list. Each one of these does one thing very well, and combining them together was proven to be not too complicated, nor too costly.</p> <p>You can jump right into the <a href="">.travis</a> file of the Gizra repo to see its configuration, or check the <a href="">webdriverCSS</a> test. Here’s the high level overview of what we’re doing:</p> <p><a href=""></a> is built on Jekyll but visual regression could be executed on every site, regardless of the underlying technology. Travis is there to help us build a local installation. Travis also allows adding encrypted keys, so even though the repo is public, we were able to add our and ngrok access tokens in a secure way.</p> <p>We want to use services such as <a href="">BrowserStack</a> or <a href="">Sauce-Labs</a> to test our local installation on different browsers (e.g. latest chrome and IE11). For that we need to have an external URL accessible by the outside world, which is where ngrok comes in: <code class="highlighter-rouge">ngrok http -log=stdout -subdomain=$TRAVIS_COMMIT 9000</code> from the <code class="highlighter-rouge">.travis.yml</code> file exposes our Jekyll site inside the Travis box to a unique temporary URL based on the Git commit (e.g. <code class="highlighter-rouge"></code>).</p> <p>WebdriverCSS tests are responsible for capturing the screenshots, and comparing them against the baseline images. If a regression is found, it will be automatically pushed to Shoov, and a link to the regression would be provided in the Travis log. This means that if a test was broken, we can immediately see where’s the regression and figure out if it is indeed a bug - or, if not, replace the baseline image with the “regression” image.</p> <div class="ui segments"> <div class="ui attached center aligned segment"> <div class="ui image"> <img src="" /> </div> </div> <div class="ui attached center aligned caption segment"> Visual regression found and uploaded to </div> </div> <p><a href="">Continue reading…</a></p>, 20 May 2015 00:00:00 -0500How we could monitor Twitter (if we had to)<p>Monitoring your live site is a pretty good idea - that’s generally agreed. Same goes for visual regression testing. Doing it, however, is hard. Enough so that very few companies actually do visual regression testing/monitoring, so don’t feel bad if you haven’t either until now. But after reading this post you should seriously consider doing it. Or at least give it a <a href="">try</a>.</p> <p>For example, here’s an overview of how we could monitor Twitter, if someone would actually ask us to (as always you can jump right into the <a href="">repository</a>):</p> <div class="ui segments"> <div class="ui attached center aligned segment"> <div class="ui image"> <img src="" /> </div> </div> <div class="ui attached center aligned caption segment"> Visual regression on a Twitter page. So much functionality has been asserted in this simple screenshot </div> </div> <p><a href="">Continue reading…</a></p>, 07 May 2015 00:00:00 -0500Cross Browser Visual Regression Tests With Shoov<p>Maintaining visual regression tests can be hard, but the more tests we write for our projects, the more we see the tremendous power it provides in terms of QA and monitoring our sites.</p> <p>One daunting task each developer hates (and often avoids) is validating their markup on multiple browsers. All of Gizra’s developers use either Mac or Ubuntu on their machines, so the line to the “IE computer” on the far end of the office is getting long. Way too long.</p> <p>And honestly - after our poor developers validated their work once, if we’d ask them to do it again. And again. And again… we’d probably be left without any.</p> <p>Developers moral shouldn’t be underestimated!</p> <p><a href="/content/shoov-ui-regression/">Shoov</a> means “Again” in Hebrew for this very reason.Go ahead and jump to our <a href="">example repo</a> which now has cross browser tests. Writing your tests once - but testing on multiple platforms and browsers is a <em>big</em> win.</p> <div class="ui segments"> <div class="ui attached center aligned segment"> <div class="ui image"> <img src="" /> </div> </div> <div class="ui attached center aligned caption segment"> tested by BrowserStack on Windows7, IE11, with 1024x780 resolution </div> </div> <p><a href="">Continue reading…</a></p>, 29 Apr 2015 00:00:00 -0500simpleTest with Behat for Drupal 8<p>The first time I heard about <a href="">Behat</a> was at DrupalCon Munich 2012. Since then use of Behat has grown exponentially and the tools it can be integrate with grew as well. With Behat we can test the markup of a page - pretty neat, right?</p> <p>Well, it’s time to take Behat integration with Drupal a little further. I’ve decided to try and integrate it with Drupal’s simpleTest, as this would open the door for writing simpleTests that are more readable and more “behavior driven” by nature.</p> <pre><code class="language-Gherkin">Scenario: Testing the login form. Given I visit 'user' And I fill in 'Username' with '@user-name' And I fill in 'Password' with '@user-pass' When I press 'Log in' Then I should see '@user-name' </code></pre> <p>Amazingly enough, the above Gherkin code which is being executed by PHPunit can test your Drupal installation!</p> <div class="ui segments"> <div class="ui attached center aligned segment"> <div class="ui image"> <img src="" /> </div> </div> <div class="ui attached center aligned caption segment"> Behat code executed from within Drupal's simpleTest </div> </div> <p>This functionality is provided by an experimental <a href="">repo</a>, which comes with an example test.</p> <p><a href="">Continue reading…</a></p>, 28 Apr 2015 00:00:00 -0500Shoov - CI tests on the live site<p><a href="/content/shoov-ui-regression/">Shoov</a> keeps evolving, and now has an <a href="">example repo</a> that demonstrates how we’re trying to make UI regression simpler, we took some time to implement the second feature we were missing - automatic testing on the <em>live</em> site.</p> <p>We saw a very strange situation everywhere we looked: Dev teams were writing amazing test coverage. They were going the extra mile to setup a Travis box with environment as close as possible to the live site. They tested every single feature, and added a regression test for every bug. Heck, every commit triggered a test suite that run for an hour before being carefully reviewed and merged.</p> <p>And then the site goes live - and at best they might add <a href="">Pingdom</a> monitoring to check it’s working. Pingdom at its simplest form sends an http request every minute to your site. If the answer is <code class="highlighter-rouge">200</code> - it means that all is good in the world. Which is of course wrong.</p> <p>Our mission is to change this, and bring functional testing to the live site. One that is easy to setup and that integrates with your existing testing and GitHub flow.</p> <div class="ui segments"> <div class="ui attached center aligned segment"> <div class="ui image"> <img src="" /> </div> </div> <div class="ui attached center aligned caption segment"> The Drupal backend holds the CI build data, including the full log, and status </div> </div> <p>While Pingdom is wonderful and is alerting us on time whenever a site goes down, its “page is fine, move along” approach doesn’t cut it for us. Here are some examples why testing on the production server is a good idea:</p> <p><a href="">Continue reading…</a></p>, 14 Apr 2015 00:00:00 -0500Shoov - a new UI regression tool<p>Testing UI regression is one of these things that make total sense but is rarely put into practice, for a simple reason - it’s hard.</p> <div class="ui segments"> <div class="ui attached center aligned segment"> <div class="ui image"> <img src="" /> </div> </div> <div class="ui attached center aligned caption segment"> UI regression checking in action </div> </div> <p>If you read the theory about it, it seems pretty simple. Take a screenshot of a certain page in your site which will be your “baseline” image, and from now on, whenever the code changes re-run an automated test that will compare a current screenshot with the baseline image.</p> <p><a href="">Continue reading…</a></p>, 01 Apr 2015 00:00:00 -0500Headless Drupal In Your Terminal<div class="ui segments"> <div class="ui attached center aligned segment"> <iframe width="100%" height="360" src="" frameborder="0" allowfullscreen=""></iframe> </div> <div class="ui attached center aligned caption segment"> Same data pulled into an Angular app </div> </div> <p>If you’re excited about this, you are most likely a developer - so <a href="">here’s</a> the code.</p> <p>If this data looks familiar to you, it might be because it’s the same data you see via <a href="">Hedley’s</a> Angular client.</p> <p><a href="">Continue reading…</a></p>, 02 Mar 2015 00:00:00 -0600Logs, The Easy Way<p>Your team invested countless hours in development.</p> <p>Your QA people can barely keep their eyes open - they have worked so hard. Your lead developer who’s responsible for the deployment is almost dehydrated from so much pressure and sweat.</p> <p>But it’s all worth it. Your app is live. Now everybody goes to sleep, and your pampered app, is all alone, serving your data to the entire world.</p> <p>You forgot one thing - to give it a phone to call home, and tell you something went wrong.</p> <p><a href="">Continue reading…</a></p>, 02 Feb 2015 00:00:00 -0600(Automatic) QA<p>Here is a known fact - it’s really easy to break the sites you are building. One wrong line of code, and a page is returning a 503 error.</p> <p>Here is a known secret - (almost) nobody is doing QA. Since I’m not into arguing about this, I’m willing to soften it a bit to “most companies, don’t do proper QA”.</p> <p>The reasons are pretty clear - not enough time and not enough budget. This post isn’t going to be about the importance of QA - that point is clear to everybody, but rather give <em>realistic</em> tips and tools that will allow you to start improving the quality of your projects, and actually even save you some time and money.</p> <p><a href="">Continue reading…</a></p>, 01 Feb 2015 00:00:00 -0600Hedley Generator - PhantomCSS and UI regression<p>What’s fun about having a tool like <a href="/content/yo-hedley/">Hedley</a> is that every new best practice we acquire can be easily added to our ever evolving, versioned, and codified knowledge base - and it’s there for the community to use and improve.</p> <p>So, as if it didn’t have enough of best practices bundled in it already, we’ve taken another step to get <a href="">PhantomCSS</a> a “CSS regression testing” tool in.</p> <div class="ui segments"> <div class="ui attached center aligned segment"> <div class="ui image"> <img src="" /> </div> </div> <div class="ui attached center aligned caption segment"> PhantomCSS in action </div> </div> <p><a href="">Continue reading…</a></p>, 04 Jan 2015 00:00:00 -0600Yo Hedley!<p>Bingo! I think we’re on to something here. It’s called <a href="">yo hedley</a> - and it’s one command that brings a true headless Drupal to <em>everybody</em>.</p> <div class="ui segments"> <div class="ui attached center aligned segment"> <div class="ui image"> <img src="" /> </div> </div> </div> <p>In my last DrupalCon BoF presentation “<a href="content/gizra-we-have-got-your-headless-covered/">Gizra - we’ve got your headless covered</a>” I’ve taken the time to explain why “headless” was in fact mostly a buzzword. While I encourage you to have a look at the presentation, I’m actually more excited about telling you why I feel this is no longer the case.</p> <p>Go ahead an check the <a href="">live demo</a>!</p> <p><a href="">Continue reading…</a></p>, 26 Dec 2014 00:00:00 -0600Todo app with RESTful backend<p>The Drupal community can now proudly claim its own implementation of a <a href="">Todo app</a> with a RESTful backend!</p> <div class="ui segments"> <div class="ui attached center aligned segment"> <div class="ui image"> <img src="" /> </div> </div> </div> <p><a href="">TodoMVC</a> is a site that helps you select the right JS MVC library. But more then that, it allows you to learn by comparing those libraries, as they all implement the same thing - a simple Todo app.</p> <p>I’ve decided to fork the <a href="">Angular example</a>, and build it on top of <a href="">RESTful</a>. Looking at the Angular code, I was pleasantly surprised.</p> <p><a href="">Continue reading…</a></p>, 23 Nov 2014 00:00:00 -0600Behat - The Right Way<p><a href="">Behat</a> is a wonderful tool for automatic testing. It allows you to write your user stories and scenarios in proper English, which is then parsed by Behat and transformed to a set of clicks or other operations that mimic a real user.</p> <p>If you don’t have automated tests on your project, I would argue that you’re doing it wrong (I explain why on <a href="">The Gizra Way</a> presentation). Even having a <em>single</em> test is much better than none.</p> <p>With that said, it’s super easy to abuse Behat. We are developers and we think sort of like machines (not really, but you get my point). If you would like to test login to your site you could easily do</p> <div class="language-cucumber highlighter-rouge"><pre class="highlight"><code><span class="nf">Given</span> I visit <span class="s">"/user/login"</span> <span class="c"># fill the username and password input fields, and click submit</span> <span class="nf">When</span> I fill <span class="s">"username"</span> with <span class="s">"foo"</span> <span class="nf">And</span> I fill <span class="s">"password"</span> with <span class="s">"bar"</span> <span class="nf">And</span> I press <span class="s">"Login"</span> <span class="nf">Then</span> I should get a <span class="s">"200"</span> HTTP response </code></pre> </div> <p>Your test will return green, but it could be improved:</p> <p><a href="">Continue reading…</a></p>, 17 Nov 2014 00:00:00 -0600RESTful Discovery - Who knows about your API?<p>As extremely pedantic developers we take documenting our APIs very seriously. It’s not rare to see a good patch rejected in code review just because the PHPdocs weren’t clear enough, or a <code class="highlighter-rouge">@param</code> wasn’t declared properly.</p> <p>In fact, I often explain to junior devs that the most important part of a function is its signature, and the PHPdocs. The body of the function is just “implementation details”. How it communicates its meaning to the person reading it is the vital part.</p> <p>But where does this whole pedantic mindset got when we open up our web-services?<br /> I would argue that at least 95% of the developers who expose their web-service simply enable RESTws without any modifications. And here’s what a developer implementing your web-service will see when visiting <code class="highlighter-rouge">/node.json</code>:</p> <p><a href="">Continue reading…</a></p>, 30 Oct 2014 00:00:00 -0500Gizra - We've Got Your Headless Covered<h2 id="whats-the-name-of-the-angular-component-for-login">What’s the name of the Angular component for login?</h2> <p>The difficulties in creating a semi or fully decoupled site isn’t in the RESTful part. Spitting out JSON is now covered by several modules, including <a href="">RESTful</a> which aims for a “best practices” solution.</p> <p>One of the real problems, though, is how to prevent us, the community, from re-inventing the wheel over and over again. Basically, how do we package our frontend code similarly to how we package our generic backend code - AKA “modules”. I discussed these problems, and offered some solutions in my “BoF” persentation:</p> <div class="ui segments"> <div class="ui attached center aligned segment"> <iframe width="560" height="315" src="//" frameborder="0" allowfullscreen=""></iframe> </div> </div> <p><a href="">Continue reading…</a></p>, 19 Oct 2014 00:00:00 -0500Headless Drupal - Form API, Drupal 9<h2 id="defining-moment">Defining moment</h2> <p>A few months ago my DrupalCon Austin session was rejected. I was a bit upset, since presenting plays a big part in my trip to the states, and also surprised, as I mistakenly assumed my presentation repertoire would almost guarantee my session would be accepted. But the committee decided differently.</p> <p>This has been an important moment for me. Two days later I told myself I don’t care. I mean, I cared about the <em>presentation</em>, I just stopped caring that it was not selected, since I decided I was going to do it anyway. As an “unplugged” BoF.</p> <p><a href="">The Gizra Way</a>. I think this is probably the best presentation I’ve given so far, and quite ironically my <em>rejected</em> session is second only to Dries’s keynote in YouTube.</p> <p>You see - I had a “<a href="">there is no spoon</a>” moment. The second I realized it can be done differently, I was on my own track, perhaps even setting the path for others.</p> <h2 id="form-api-drupal-9">Form API, Drupal 9</h2> <blockquote> <p>I use Drupal because Form API is so great &lt;div class="small"&gt;No one, ever&lt;/div&gt;</p> </blockquote> <p><a href="">Continue reading…</a></p>, 24 Jul 2014 00:00:00 -0500Headless Drupal - Inline edit<p>In our <a href="">last example</a> we showed how to create node using an angular form served from Drupal itself. This time we are taking one big step further and create the node from a completely decoupled <a href="">web app</a>.<br /> And if that’s not enough for the readers excited by the idea of a decoupled Drupal, we’ve also added inline editing to the example!</p> <p>Enjoy the <a href="">live demo</a></p> <div class="ui segments"> <div class="ui attached center aligned segment"> <div class="ui image"> <img src="" /> </div> </div> <div class="ui attached center aligned caption segment"> If you know Form API's pains, you should be excited now </div> </div> <p><a href="">Continue reading…</a></p>, 14 Jul 2014 00:00:00 -0500Headless Drupal, One form at a time<ul> <li>Form API is great, but Form API is hard when you try to do fancier stuff - like wizards and other things that clients often want.</li> <li>Angular forms are great, but Angular forms are hard too - you need to write your own custom endpoints and server side validation.</li> </ul> <p>But now that <a href="">RESTful</a> integrates with Entity Validator, I would change the equation and simply say something rarely heard in the Drupal community: Forms are Fun!</p> <div class="ui segments"> <div class="ui attached center aligned segment"> <div class="ui image"> <img src="" /> </div> </div> <div class="ui attached center aligned caption segment"> This form is not Form API, it's angular! </div> </div> <p>Go ahead, <a href="">try it</a> yourself on</p> <p><a href="">Continue reading…</a></p>, 09 Jul 2014 00:00:00 -0500No more CSS in your Drupal Theme!<h2 id="treat-your-custom-css-as-contrib">Treat your custom CSS as contrib</h2> <p>Getting your Drupal to be pixel perfect is hard. In fact, it’s probably four times faster to write the logic of a page, in comparison to the time it takes to get it’s markup right. Not to talk about making it responsive.</p> <p>If you’ve seen my presentation about <a href="">The Gizra Way</a> you noticed we take pixel perfect very seriously.</p> <p>One of the tools that helps us getting the markup fast, correct and in a way that would allow us to communicate with the client is Jekyll - the static site generator. Here’s the idea in a nutshell:</p> <ul> <li>Using Jekyll we can concentrate on a clean markup</li> <li>Using Grunt we compile the SASS, and are able to push the the HTML into Github pages - where the client can easily see and interact with the final markup</li> <li>The CSS produced by Jekyll is treated by our Drupal application as contrib. This means we have zero custom CSS in our theme. Seriously, <strong>absolutely no custom CSS in your Drupal theme!</strong></li> <li>Any change to the CSS can be done only in a <em>single</em> place, which is Jekyll</li> </ul> <p><a href="">Continue reading…</a></p>, 01 Jul 2014 00:00:00 -0500Creating a Custom Breakpoint in Bootstrap-Sass<p>Bootstrap is our go to base theme, but what happens when the grid the client asks for has different width, or more break points? Using Bootstrap-Sass creating a custom grid is possible in a manner that can be copied and adjusted from one project to another. As example for this post, and for your future reference you may follow the <a href="">live demo</a> and <a href="">repository</a> that changes Bootstrap to work with five breakpoints (tip: use <a href="">Resizer</a> for easy viewport resize).<br /> Note that example is using Jekyll for simplicity, however the same technique can be used on Drupal.</p> <p><a href="">Continue reading…</a></p>, 25 Jun 2014 00:00:00 -0500Introducing Emmet!<h2 id="instant-html-and-css">Instant HTML and CSS</h2> <div class="ui segments"> <div class="ui attached center aligned segment"> <div class="ui image"> <img src="" /> </div> </div> </div> <p>Emmet is a great tool that can enhance your productivity and save you a lot of time when coding or prototyping.<br /> Some of you may know it as “Zen coding” and for quite some time (Since 2012) it’s known as <a href="">Emmet</a>.</p> <p>Emmet is a plugin for a text editor which greatly improves html and css workflow.<br /> The idea behind it is to instantly expand a simple abbreviation (shortened form of a word or phrase) into complex code snippet.<br /> Emmet uses these abbreviations to parse them in runtime and transform them into structured code block: HTML, CSS, XML or any other structured markup.</p> <p><a href="">Continue reading…</a></p>, 08 Jun 2014 00:00:00 -0500The @amitaibu show (unplugged)<p>Wait, what? Did you actually think I’m going to be in a DrupalCon without giving a presentation? Oh, the fact that my session was <em>not</em> selected made you think that. I see. I can understand how that could have caused the confusion.</p> <p>So the thing is that I have a presentation titled “The Gizra Way” that I’ve been giving for the past year all over Israel, and recently in DrupalCamp Spain. Reactions were pretty good.</p> <blockquote class="twitter-tweet" lang="en"><p>My prediction is that most watched <a href=";src=hash">#DrupalcampEs</a> video will be <a href="">@amitaibu</a> session as soon as it is available. Really inspiring!</p>&mdash; penyaskito (@penyaskito) <a href="">May 17, 2014</a></blockquote> <script async="" src="//" charset="utf-8"></script> <p>We are still looking for a place to do it. Maybe in a BoF room. Or in the staircase. Or a bar near the hotel. And you know what? I’m really excited about this idea. It feels like I’m preparing for the unplugged version of my show. Anyway, we’ll <a href="">tweet</a> the time and location once we find the place.</p> <p><a href="">Continue reading…</a></p>, 25 May 2014 00:00:00 -0500How to have lunch without speaking Drupal<p>Oh no, It’s lunch time!<br /> I wonder if I’ll have anything to contribute to the conversation today. Will lunch today - like yesterday or the day before that - revolve around pull requests, Organic groups, migrate, scrum, code reviews, modules. Boring.<br /> If you share the same feeling reading the above lines, this blog post if for you.</p> <div class="ui segments"> <div class="ui attached center aligned segment"> <div class="ui image"> <img src="" /> </div> </div> <div class="ui attached center aligned caption segment"> Geeks having a spontaneous reaction to a new version of a Drupal module. I love those guys! </div> </div> <p>Don’t get me wrong - I love my job and I love my co-workers as well. It’s just that every time they talk about these things it makes me wanna stand up on our designer kitchen chair and shout:<br /> <strong>My name is Orit and I am not a Drupal geek!</strong></p> <p>I have never developed any module in my life, didn’t contribute anything to OG nor have I never requested Brice or Amitai to give me a scrutinizing code review. So here are some tips:</p> <p><a href="">Continue reading…</a></p>, 22 May 2014 00:00:00 -0500RESTful module<p><a href="">RESTful module</a> is a new approach to providing a REST server in Drupal. Its concepts and philosophy appears in the module’s README so I won’t repeat it, but I’d like to go over some of the key points.</p> <div class="language-php highlighter-rouge"><pre class="highlight"><code><span class="cp">&lt;?php</span> <span class="c1">// Handler v1.0 </span><span class="nv">$handler</span> <span class="o">=</span> <span class="nx">restful_get_restful_handler</span><span class="p">(</span><span class="s1">'articles'</span><span class="p">);</span> <span class="c1">// GET method. </span><span class="nv">$result</span> <span class="o">=</span> <span class="nv">$handler</span><span class="o">-&gt;</span><span class="na">get</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span> <span class="c1">// Output: </span><span class="k">array</span><span class="p">(</span> <span class="s1">'id'</span> <span class="o">=&gt;</span> <span class="mi">1</span><span class="p">,</span> <span class="s1">'label'</span> <span class="o">=&gt;</span> <span class="s1">'example title'</span><span class="p">,</span> <span class="s1">'self'</span> <span class="o">=&gt;</span> <span class="s1">''</span><span class="p">,</span> <span class="p">);</span> <span class="c1">// Handler v1.1 extends v1.0, and removes the "self" property from the // exposed properties. </span><span class="nv">$handler</span> <span class="o">=</span> <span class="nx">restful_get_restful_handler</span><span class="p">(</span><span class="s1">'articles'</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">1</span><span class="p">);</span> <span class="nv">$result</span> <span class="o">=</span> <span class="nv">$handler</span><span class="o">-&gt;</span><span class="na">get</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span> <span class="c1">// Output: </span><span class="k">array</span><span class="p">(</span> <span class="s1">'id'</span> <span class="o">=&gt;</span> <span class="mi">1</span><span class="p">,</span> <span class="s1">'label'</span> <span class="o">=&gt;</span> <span class="s1">'example title'</span><span class="p">,</span> <span class="p">);</span> <span class="cp">?&gt;</span> </code></pre> </div> <p>In the past year almost every site we have is either completely decoupled from the server side where AngularJs serves the webapp, or AngularJS plays a smaller part, and we just embed web components inside a Drupal page to provide a slick UI.</p> <p>Up until now our go to module was RestWs by the wonderful Klausi, which wraps around Entity API module’s metadata wrapper. Basically, it hands over to the metadata wrapper the responsibility for the access and for the actual value it spits out. It works fine, however the JSON it exposes has too much information.</p> <p><a href="">Continue reading…</a></p>, 06 May 2014 00:00:00 -0500Zariz Loves Entity Reference<p>Zariz is now integrated with entity reference and is “branch” aware. This means that the reference will change on the fly. For example:</p> <p><a href="">Continue reading…</a></p>, 20 Jan 2014 00:00:00 -0600OpenScholar and the new Biblio<p>OpenScholar is the de facto go to solution for academic sites. Over the past year we saw it being adopted in many Harvard departments and higher ed institutions worldwide.</p> <div class="ui segments"> <div class="ui attached center aligned segment"> <div class="ui image"> <img src="" /> </div> </div> </div> <p>I’m proud that our work is not just based on open source, but also contributes to it - big time. Case in point, the <a href="">Biblio</a> module which is responsible for bibliographies and citations since back in Drupal 4.6, and has provided a great solution. It was becoming clear the 4.6 architecture is showing its age, and could use an overhaul.</p> <p><a href="">Continue reading…</a></p>, 20 Jan 2014 00:00:00 -0600Zariz on TV<p>I had a fun conversation with Jam this morning, regarding <a href="/content/zariz-means-agile/">Zariz</a> - the set of Drupal modules we’re developing that (a) <a href="/content/zariz-in-pics/">brings version control into the content space</a> and (b) <a href="/content/drupal-x5-faster/">brings Drupal into the static site space</a>. If you’re into that kind of stuff, you might enjoy it too:</p> <div class="ui segments"> <div class="ui attached center aligned segment"> <iframe width="560" height="315" src="//" frameborder="0" allowfullscreen=""></iframe> </div> </div> <p><a href="">Continue reading…</a></p>, 16 Jan 2014 00:00:00 -0600Drupal, only x5 faster<p>This is the <code class="highlighter-rouge">live</code> branch on the Drupal site</p> <div class="ui segments"> <div class="ui attached center aligned segment"> <div class="ui image"> <img src="" /> </div> </div> </div> <p>This is the static site created out of the live site. It looks the same, but loads x5 faster.</p> <div class="ui segments"> <div class="ui attached center aligned segment"> <div class="ui image"> <img src="" /> </div> </div> </div> <p><a href="">Continue reading…</a></p>, 09 Jan 2014 00:00:00 -0600Zariz in Pics<p><a href="">Zariz </a> isn’t just about static sites. In fact the Zariz module itself isn’t aware of any static generation. It’s about modeling the content creation around Git, which is a new approach to content staging.</p> <p>Here are 10 images that will make the whole idea clear.</p> <p>This is the <code class="highlighter-rouge">live</code> branch</p> <div class="ui segments"> <div class="ui attached center aligned segment"> <div class="ui image"> <img src="" /> </div> </div> </div> <p>We branch out of it</p> <div class="ui segments"> <div class="ui attached center aligned segment"> <div class="ui image"> <img src="" /> </div> </div> </div> <div class="ui segments"> <div class="ui attached center aligned segment"> <div class="ui image"> <img src="" /> </div> </div> </div> <p><a href="">Continue reading…</a></p>, 24 Dec 2013 00:00:00 -0600Zariz Means Agile<p><a href="">Zariz</a> is a new project we’re working on. The word means “quick”, or “agile” in Hebrew. We’ve began working on it when we hit some bumps working on Dekyll.</p> <h3 id="dekyll-frustrations">Dekyll Frustrations</h3> <p>Dekyll was Jekyll based. We love Jekyll - it powers our own site, and in fact I’m writing this blog post with the excellent But for Dekyll we wanted to stay close to Drupal, keeping the various abilities it developed over the years like fine grained access control, workflows etc and allowing users to stay within an environment they already know.</p> <p>Relying on Jekyll added another component to the system. A very good one, but still with its own requirements and needs. We wanted to simplify, and minimize the number of moving parts.</p> <h3 id="a-new-beginning">A New Beginning</h3> <p>So we were back at the drawing board. Around that time I saw Clay Shirky’s <a href="">Ted talk</a>. When he gave that funny yet precise explanation about why lawyers don’t use Git, I realized something.</p> <p><a href="">Continue reading…</a></p>, 11 Dec 2013 00:00:00 -0600How We Achieve Faster Development and Happier Clients by Opening Our GitHub Issues<p>As we <a href="/content/the-gizra-way/">mentioned</a> before, in Gizra each project’s GitHub repository - code, issues etc - is completely open &amp; transparent to the client from the day we start working together. We’ve discovered this provides us with some unexpected benefits.</p> <p><a href="">Continue reading…</a></p>, 31 Oct 2013 00:00:00 – a Tool for Easily Finding Polio Vaccination Clinics<p>No one is sure what caused the Polio virus, eradicated from Israel since the 1990s, to reappear. The virus was detected in sewage samples in the south of the country in early summer and began spreading northwards, prompting Ministry of Health to start a <a href="">massive vaccination drive</a>.</p> <p>Parents of children under the age of 9 were asked to bring them to the nearest Tipat Halav clinic for vaccination. Country-run Tipat Halav (in Hebrew, “drop of milk”) childcare clinics are a household name in Israel. Spread throughout the country, they helped it reach some of the <a href="">world’s lowest infant mortality rates</a>.</p> <p>The Ministry of Health decided to create a mobile application to help parents find the nearest clinic. It commissioned one of the country’s largest development shops to create it. They decided to create a native app. <a href="">This is the Android version</a>:</p> <div class="ui segments"> <div class="ui attached center aligned segment"> <div class="ui image"> <img src="" /> </div> </div> </div> <p>I assume the iOS version is still undergoing the App Store approval process.</p> <p>We discussed the app during lunch at Gizra. We’re no doctors, but we thought we could do something about the software. Going with a native app didn’t seem ideal for a single-use application which needs to be deployed on as many platforms ASAP. As for the UI, I’ll leave the image above as an exercise to the reader.</p> <p><a href="">Continue reading…</a></p>, 04 Sep 2013 00:00:00 -0500Open Source - Real World<p><strong>In this guest post, <a href="">Itamar Burstein</a> shares his thoughts about “Open source” - the culture that Drupal belongs to - as seen through the eyes of an Industrial designer.</strong></p> <p>Amitai, my brother asked me to write a little something about, and I quote, “Open source or Drupal or whatever” - to give some examples and to show some pictures. He was very particular about the pictures.</p> <p>This might be a good moment to point out that I’m a designer, industrial designer, I mostly work with the furniture industry making very specific objects which are decided by the manufacturer, a bunch of business guys and, well, myself. You can imagine that open source doesn’t have much to do with what I am doing, but he asked, and I don’t like to disappoint my baby brother.</p> <p><a href="">Continue reading…</a></p>, 28 Aug 2013 00:00:00 -0500Dekyll's new Github Pages flavor<p><a href="/content/dekyll-drupal-on-jekyll/">Dekyll</a> (Drupal on Jekyll) comes now in two flavors. The first one is “normal”, which is more advanced and allows you to build more complex websites, the second is called “Github Pages” and it lets you quickly serve a new site using Github.</p> <p>We are working hard in Gizra to make this process as smooth as possible, with the goal of letting non-developers the ability to serve their content using Jekyll, on Github Pages - without them having to bother with knowing what Jekyll, Git or Github Pages are. A worthy goal indeed, but not trivial.</p> <p><a href="">Continue reading…</a></p>, 14 Jul 2013 00:00:00 -0500Dekyll - Drupal on Jekyll<p>Drupal is no doubt one of the best CMS out there; Jekyll is no doubt one of the best static site generators out there. See where I’m going? And it’s no longer just a concept, it is a complete installation profile called <a href="">Dekyll</a>.</p> <h3 id="the-drupalcon-portland-bof">The DrupalCon Portland BoF</h3> <p>So we had this idea, of combining Drupal and Jekyll. It was a result of building <a href=""></a> with Jekyll. When I came to Portland I already knew that apart of the usual business schmoozing, and presenting OG and the Message stack, I wanted to get other people’s opinion on our idea.</p> <p>I was pleasantly surprised to see more than 20 people in the BoF (Birds of Feather) session. I had a vision of what I wanted but I still didn’t have the elevator pitch for it. The discussion we had helped sharpen the way I can explain that vision. To quote Steve Persch (@stevector)</p> <blockquote> <p>When I heard your idea I thought it’s crazy. After the BoF I still thought it’s crazy… but!</p> </blockquote> <p>Before diving into Dekyll, let’s understand what are the problems that it tries to solve.</p> <p><a href="">Continue reading…</a></p>, 30 Jun 2013 00:00:00 -0500Amitai's DrupalCon Portland Presentation<p>Amitai returned from DrupalCon Portland reporting it was raining all the time, the flights were very long (apparently the “Gizra Platinum Executive Traveller” card we gave him in the office failed to deliver the expected First Class upgrade) and he still doesn’t really get Portlandia.</p> <p>Still, he had an awesome conference and a great presentation on Organic Groups and Message modules, sprinkled with anecdotes from the open source module developer’s life. Thanks to <a href="">Pantheon’s</a> video crew, you can now verify the latter claim yourself:</p> <div class="ui segments"> <div class="ui attached center aligned segment"> <iframe width="853" height="480" src="" frameborder="0" allowfullscreen=""></iframe> </div> </div> <p><a href="">Continue reading…</a></p>, 23 Jun 2013 00:00:00 -0500The Gizra Way - How We Roll (and Rollback)<p>My involvement with Gizra is a bit unusual. Before settling into my fake Aeron in Gizra’s plush Tel Aviv facilities I was actually a client for two years, contracting Brice &amp; Amitai to write code for a New York startup I was working for. Together, we managed to build a continuous deployment setup where we pushed new code to production every day while working 7 timezones apart, while, surprisingly, keeping our sanity mostly intact.</p> <p><a href="">Continue reading…</a></p>, 17 Jun 2013 00:00:00 -0500Harvard's OpenScholar<p>When people ask you about big projects done with Drupal, what’s the <em>second</em> item on your list? I know the first one is <a href=""></a> - that’s not Drupal’s foot in the door, it’s the foot that broke the door.</p> <p>I’d like to share with you the second item on our list. Harvard. Seriously. If it’s the first time you hear that Harvard is using Drupal, or that they have an amazing distribution they work on called <a href="">Harvard OpenScholar</a>, or that they have a team of five developers along with two developers from Gizra and a many <a href="">others</a> working on it <em>full time</em>, or you are not aware to the amount of contributions given back to the community… You do now.</p> <p><a href="">Continue reading…</a></p>, 04 Jun 2013 00:00:00 -0500Migrate, and baking content<p>A small problem in Drupal occurs when developing new modules, or installation profiles. Content. It goes missing, and without it developing can go wrong very quickly. Also, starting up a site’s install profile that reveals a site without content gives a feel of walking into an empty bakery shop. There’s ovens, flour, and bakers, and that great bakery smell all around, but no bread. And possible clients go to other bakeries if you run out of bread. So to solve this issue, <a href="">Migrate</a> module helps us fill up the shop with bread. Oh, and you can also migrate data from other (older) sites.</p> <p><a href="">Continue reading…</a></p>, 27 Dec 2012 00:00:00 -0600Drupal, Node.js, Pantheon, and Heroku<p>Some title, right?</p> <p><a href="">Node.js</a> module for Drupal is so great and a time saver, I’ve got spare time to blog about how to set it up. Future me, we’ll thank me for doing so.</p> <p>First, let’s define the goals for this blog post</p> <ul> <li>Learn how to setup the Node.js module and server on a <em>local</em> server</li> <li>Setup on a remote server using Heroku and Pantheon</li> </ul> <p><a href="">Continue reading…</a></p>, 19 Dec 2012 00:00:00 -0600Message-subscribe - A New Subscription System<blockquote> <p>Drupal 6 had Messaging &amp; Notification Drupal 7 has Message-subscribe &amp; Message-notify</p> </blockquote> <p><a href="">Message-subscribe</a> is a new module in the Message stack, that finally ties everything together to give us the ability to subscribe to content, and send notifications.</p> <p>If you know Message you already know that some development skills, or knowing Rules really really good are needed. This post will go over the main concepts and flow of the notification process.</p> <p>Message-subscribe, just like Message module has zero knowledge about your business logic - it is up to you to implement the Message creation. What Message subscribe gives you, though, is one simple function your implementing module will call – and that’s it. It will take care of it from there.</p> <p><a href="">Continue reading…</a></p>, 31 Oct 2012 00:00:00 -0500DrupalCamp Montreal Keynote<p>Checkout my presentation - it has been a long time since I did a funny one. If your not a total geek the first 15 minutes will be enough. Unless you are interested in hearing about OG (in that case you <em>are</em> a geek).</p> <p><a href="">Continue reading…</a></p>, 18 Oct 2012 00:00:00 -0500What is Message module, and its new features<p><a href="">Message</a> module’s inclusion in the upcoming version of Commerce Kickstart, and it’s very likely inclusion in Drupal Commons 7 turns this not very known module into an important module to know about. Message can help with many tasks from simple logs to complicated activity streams and even, with the use of Message Notify module, multilingual digest emails.</p> <p><a href="">Continue reading…</a></p>, 12 Jul 2012 00:00:00 -0500About strong partnership and winning a game of bowling<p>We are too old - or so we thought - to still be naïve. You might be familiar with the feeling – you and reps of some other company are sitting and talking and talking about possible cooperation, and you are so hoping that this time it’s for real. You actually force yourself to believe that it’s the real thing this time, when suddenly the other party says something along the lines of quality not being quite so important to them, or that they don’t believe in contributing to the community. Heck, at some point, we were even told by the other side that it was their belief that we should work for free, damn it. Do you dig what I am saying? You know, one cannot even be sure it’s an age thing, maybe it’s just a matter of having experience; either way, we are no longer naïve.</p> <p><a href="">Continue reading…</a></p>, 09 Jul 2012 00:00:00 -0500How to deal with colliding aliases<p>Here’s a common problem with aliases:</p> <ul> <li><code class="highlighter-rouge">users/[user:name]/blog</code> – This is a page defined by Panels. It shows a list of latest blog posts</li> <li><code class="highlighter-rouge">users/[user:name]/blog/[node:title]</code> – This is the alias of the node that is a blog post. But if you will try to use it, Drupal thinks you refer to the Panels page, and shows you the lastest blog posts, instead of the node</li> </ul> <p><a href="">Continue reading…</a></p>, 01 Mar 2012 00:00:00 -0600Banner rotator<p>A common design element we see lately in a lot of sites is a banner rotator - image slideshow with some text and links on the side.</p> <p>There are several modules that try to deal with it in Drupal (such as “ddblock”, which we don’t use), however we find that using the good old Views slideshow module can give us everything we need. The following blog post gives an overview of how we achieved this task without any code, just Views configuration and a bit of CSS. As always we provide a <a href="">feature</a> that can be installed and enabled (visit <code class="highlighter-rouge">/banner-rotator</code>).</p> <p><a href="">Continue reading…</a></p>, 16 Feb 2012 00:00:00 -0600Commerce product + Subform<p><strong>Edit: Use the <a href="">Inline entity form</a> module that was created after this post was published.</strong></p> <p>This post will go over an example (yet fully functionally) module that shows how we can embed a commerce product form inside a node form, and have the node reference the commerce product - without horrible hacks.</p> <p><a href="">Continue reading…</a></p>, 29 Jan 2012 00:00:00 -0600Sending LOTS of emails (Hint: with Drush)<p>On my <a href="/content/message-notify-multilingual-email-notifications">last blog</a> post I talked about Message notify module, and mentioned we were using it to send digest emails. While Message notify really eases the pain of creating personalized emails, and sending them, we still needed to find a scalable solutions for sending lots of emails. LOTS of emails!</p> <p>Doing it on hook_cron() is nice if you need to send few emails, but when you need to send thousands of emails a day, it won’t do. Cron will take too long, or might hang up if we try to process too many digest emails at once.</p> <p>A nice and simple solution we came up with, was to write a Drush command that will process a small batch of users, and use Jenkins to fire up this command every two minutes.</p> <p>This post will demonstrate the code, that can be used by others - however you will need to copy and change the command to fit your business logic.</p> <p><a href="">Continue reading…</a></p>, 24 Jan 2012 00:00:00 -0600Message notify - Multilingual email notifications<p>Email notification is a convenient way to be updated about new content or comments. There are several modules in Drupal that already deal with this issue, and I would like to propose another solution, and highlight the advantages of using it. The new system relies on <a href="">Message-notify</a> module, which depends on the Message module - a general logging system (think activity stream, but without a fancy query builder).</p> <p>Message module itself is pretty simple. You can have different message types, and when you want to create a message, you actually create a new entity called Message.</p> <p><a href="">Continue reading…</a></p>, 01 Jan 2012 00:00:00 -0600OG7 and Entity reference - Part 2<p>Following my <a href="/content/og7-and-entity-reference-sponsor-me">previous</a> post, and after getting some great reaction from the community via IRC and in Drupalcamp Toulouse, I’d like to share both my thoughts about the sponsoring and about the technical stuff.</p> <p>The sponsoring, which already has <a href="">FunnyMonkey</a> committing to pay almost half the price, and providing on top of that developer hours, was something I’ve decided to do only after I was convinced there are some big players using OG7. The thing is that _anyway I intend to do this change. The sponsoring is just giving it a boost, and making sure it will be _sooner than later!</p> <p>I’m happy I was able to post that request and to get good reaction from the community. I’m equally happy that Planet Drupal isn’t swamped with such requests. It’s not about Drupal App. It’s about harnessing the community towards a goal. Companies offering to assist by providing developer hours is exactly the proof of that.</p> <p>Now here’s a quick overview of the planned changes. First the conceptual changes:</p> <ul> <li>Instead of OG having it's own field type, we easily hook into Entity reference field, as it allows registering our own handler using a CTools plugin</li> <li>Instead of saving the field values _and the OG membership as we currently do, we save the OG membership, and use hook_field_load() to populate the Entity reference with the correct value. Yes, I know, the docs clearly say that we should not load fieldable entities in hook_field_load() as it might cause loading recursion, so we'll just make sure you can't attach group-audience fields to OG membership (which anyway doesn't make much sense). The benefit of doing that, after a long talk with the people form the community, notably fago (thanks again fago!), came out as the best solution for a problematic thing</li> <li>OG membership is now tightly coupled with the field that it belongs to. This means we can care about the field cardinality (i.e. how many OG membership can be created per field), and since we know the OG membership type we can provide smarter metadata</li> <li>We can have multiple fields, to allow subscribing users/ content to group with different membership type. No more hard-coding of the field name as-well</li> </ul> <p>Sneak preview time… As usual we can make a content type (Clubs in this example) a group, through the content type edit.</p> <p><a href="">Continue reading…</a></p>, 07 Dec 2011 00:00:00 -0600OG7 and Entity reference - Sponsor me<ul> <li>Update 3: <a href="">Treehouse Agency</a> are sponsoring and providing developer help</li> <li>Update 2: Dev version is out</li> <li>Update 1: <a href="">FunnyMonkey</a> are sponsoring and providing developer help</li> </ul> <p>I was walking back home from work and thinking to myself Drupal thoughts. One of the thought was about OG7 and its use of “group” entity. At the time of writing OG it seemed as a good idea. It allows flexibility of showing all the groups of the site, without worrying what entity type they are (as the group ID isn’t equal to the node ID). It also allows easier internalization of group nodes, as again the group ID isn’t the node ID. In a very Drupal like way, in the other side of the world, a day later fago was asking the same question.</p> <p>After more than a year that OG7 is out, it seems that the flexibility of showing all the groups at once has a price in complexion. It makes Views require one more relationship. It makes Panels require one more relationship. It makes creating Rules and using tokens a non-intuitive task. I’ve opened a new <a href="">issue</a>, with one thing in mind – deprecating the group entity, and making OG even slimmer and even more robust. The idea is to rely on the new kid on the block - Entity Reference, which means your reference field will know how to reference a group of a single entity type. That change will result with changing the signature of a lot of function in OG (i.e. instead of passing the group ID, one will have to pass the entity type of the group, and the entity ID of the group), but it will also result with better UX and DX.</p> <p>The idea is to create a 2.x branch, to allow people to migrate from 1.x. I honestly don’t think it will be very painful, as I’ll provide automatic migration of data. So it will be just a matter of updating the Views, Panels and custom code. In the above issue there are already comments from known community members giving it a big +1, and saying “Let’s see this sooner than later”. I also want to see this happening _fast, but my time resources are not enough.</p> <p>I’m looking for someone to sponsor this huge and non-trivial feature, which will cost US$7,500 Please do <a href="/contact">contact</a> me if you are interested. I will credit you on the OG module page, in the README file, and on this blog. The community will thank you greatly.</p> <p><a href="">Continue reading…</a></p>, 20 Nov 2011 00:00:00 -0600About that walk bojanz, Damz and I had in London<p>Another Drupalcon is getting closer, and the sessions are open for votes. Let’s clear the technical stuff first - please vote for my <a href="">OG7 session</a>.</p> <p>Now after all the required link clicking has been done we can talk about that walk Bojan Živanović (bojanz), Damien Tournoud (Damz) and I had in London. It was the night commerce module was officially released. I somehow found myself in a restaurant with the rest of the commerce guys celebrating the event. After some good paeia and a french amount of wine we headed back to the hotel. We were talking about the day we had in Druplcaon London, the sessions we attended and so on.</p> <p>“Oh yeah, you had your core conversation”, I said to Damien. “You were talking about Document oriented storage, right. What is it exactly?” I asked. Damien, being Damien, gave me a Damien answer. Bojan, being Bojan, explained it to me. You should have heard what he was talking about. Seriously, I imagined people literally banging their heads in the table, and I think I even imagined someone bursting into flames. I think it’s called self combustion - it happens to geeks when they hear such ideas.</p> <p>After that ,there was a minute of silence before I asked Damien how did the people react, and did he think they liked it. Damien, well, you know. He just said - but this time with a little smile - “I don’t know if they liked it, but it sure was disruptive”.</p> <p>The next day I had my own presentation. It’s no secret some parts of it were completely non-linear. If I may, I would use Damien’s answer to describe my own presentation.</p> <p><a href="">Continue reading…</a></p>, 04 Nov 2011 00:00:00 -0500Drupalcamp Spain - Sevilla<p>Here’s my presentation held in Drupalcamp Spain. I’m going over a new feature in OG7, that allows having multiple group audience fields and having a membership type assigned to each field – in English it means that you can have some users join a group with “Default” membership and others with “Expire” membership.</p> <p>Also checkout Pedro’s (pcambra) new suit!</p> <p><a href="">Continue reading…</a></p>, 02 Oct 2011 00:00:00 -0500OG7 Drupalcon London<p>The sound quality in the first minute is poor, but it gets better…</p> <p><a href="">Continue reading…</a></p>, 18 Sep 2011 00:00:00 -0500User modal<p>The <a href="">user modal</a> is an interesting module we’ve been working lately in gizra for <a href=""></a>, and I’d like to share our experience.</p> <div class="ui segments"> <div class="ui attached center aligned segment"> <div class="ui image"> <img src="" alt="User modal example from" title="User modal example from" width="560" height="382" /> </div> </div> </div> <p>From the README:</p> <blockquote> User modal module allows opening the Register/ Login/ Reset password menu items as tabs. Since the tabs are shown via JS and not AJAX, this may lead to a better user experience, as there is no time waiting for the selected tab to load. Furthermore, the user modal form can be used by other implementing modules, and for example allow a user to submit a node and register in the same time. </blockquote> <p><a href="">Continue reading…</a></p>, 27 Jun 2011 00:00:00 -0500OG 7.x-1.1-RC2 is out!<p>The 2nd release candidate of OG7 is out, and it’s probably a good time to tell the (Drupal) planet about what’s new and about the things that I learned since the first official release (See OG’s <a href="">home page</a> to get the latest release candidate link).</p> <p>Here are some things, mostly related to Drupal, I’ve learned since Og-7.x-1.0</p> <h2 id="data-migration">Data migration</h2> <p>OG6 and OG7 have different tables and different data. OG7 has its tables, its fields and its related entities (group and group membership – I’ll soon go over those). At first I tried migrating it via hook_update_N(). I still feel the burns! “Your hook_update_N() shouldn’t assume anything about the state of a module or it’s API”, said fago, and I listened. Just like CCK has content-migrate module, OG7 has og-migrate. Whenever a module needs to migrate data, they can set a variable to TRUE, implement og-migrate plugins (a la CTools), and the job is done. This means design decisions (and oh boy I had a few) can be rectified without many struggles.</p> <h2 id="fields-and-entities">Fields and entities</h2> <p>OG7 has two important fields and an entity that acts as a meta-data related to that field. og-group field, which is a Boolean field that marks if a node is a group, when is set to TRUE creates a group entity that holds the group ID, entity ID, creation data, group label etc’. So far so good, no problems here.</p> <p>The second field is group-audience that holds the the information about the relation a piece of content has with a group (i.e. membership). As of 7.x-1.1 whenever a user selects groups in this field, a group membership entity is created that holds the group ID, entity ID, membership state (i.e. active, pending, blocked) etc’. The group membership idea is awesome (thanks donquixote). The problem is actually the field. If we delete a group there is no field API bulk update, that will remove the deleted group from the member’s field. So, the group membership entities have the most up-to-date data, and the fields might not have. After 7.x-1.1 is out I intend to still use the field for it’s widget and formatter, but not as storage. I mean, after a user will select the groups in group-audience field, OG will create the group membership entities, but the fields its will not be written to the DB. I think it’s interesting that also other modules (Field-collection, Relation) decide to use a field but not for it’s storage which is probably the main purpose, but for it’s generic interaction with the entities’ form.</p> <h2 id="thinking-of-module-renaming">(Thinking of) module renaming</h2> <p>Don’t do it. Seriously, I’m now stuck with some hybrid of og / group in places I prefer not to change. It’s not horrible, but if your the Anal type it bothers a bit.</p> <p><a href="">Continue reading…</a></p>, 18 May 2011 00:00:00 -0500CTools context tutorial<p>Why should you use panels node-preview-example module? You shouldn’t, it’s just an example ;)</p> <p>This post covers how to build a CTools content-type plugin that has context. CTools “Context” should not be mistaken with the context module. Context is CTools way of saying, my plugin (read, block) shouldn’t be dumb. If it requires a node or a user to extract data from, then it should let others know about it. “Others” in our case is Page manager module. It will load the context for the plugins and hand it over. In fact, if the context is not present it will not even bother loading the plugin.</p> <p>I have created an example module called node-preview-example, that you can simply download and enable, create an Article page, and see how Panels is now showing the body field on the left and on the right a (silly) “Summary” of the node – this is our plugin.</p> <p><a href="">Continue reading…</a></p>, 11 May 2011 00:00:00 -0500Data Migration - part 2<p>This is the 2nd part of the tutorial. You can see the 1st part <a href="/content/data-migration-part-1">here</a>.</p> <p>Now that we have imported the users using the basic tools of migration module. We will learn to import references (nid or uid) and files.</p> <p>Install the <a href="">migrate extras</a> module . Migrate extra module enables import of file field.</p> <p>The following example demonstrate how to import the old cars table.</p> <p><a href="">Continue reading…</a></p>, 24 Jan 2011 00:00:00 -0600Data Migration - part 1<p>Moving an old site to Drupal?</p> <p>The following article will discuss the right way to do this using the module <a href=""> Migrate (version2)</a>. Migrate V2 uses <a href="">Drush</a> (Drupal Shell) to execute the migration functions, if your are not familiar with Drush I suggest looking into this very powerful tool.</p> <p>Here is a list of the main challenges I have faced during the process :</p> <ol> <li> Mapping old information to the new structure.</li> <li> Mapping the old values to match the new fields.</li> <li> Moving the references between the old objects into Drupal.</li> </ol> <p><a href="">Continue reading…</a></p>, 06 Jan 2011 00:00:00 -0600Drupalcamp Athens<p>I’m back from <a href="">Drupalcamp Athens</a>. When I met Nektarios Sylligardakis and George Papadongonas in Copenhagen they told me Greece was a Joomla country and Drupal wasn’t well known, so my expectations were not very high. That’s why I was so surprised. Not only did I find a large and warm community, but I found myself waiting for the presentations to start so I could learn new things.</p> <p>Since my Greek sucks, and since they understood that their presentations can have an appeal world-wide, most of the people gave the presentations in English. Varnish, Cloud computing, Security issues, Crazy clients with crazy demands and even crazier implementations were some of the topics. Not all movies have been uploaded yet, but <a href="">here</a> are at least some of them. It’s worth watching.</p> <p>Although my stay was very short I still had the chance to see the Acropolis a la <a href="">Robert Douglass</a> style. This means storming out of the hotel - because my presentation starts in less than two hours - jumping inside a taxi, checking out every spot really quickly, taking a photo or two, back in the taxi, and we’re back. It was much fun!</p> <p><a href="">Continue reading…</a></p>, 26 Dec 2010 00:00:00 -0600A moment of Zen #1<p>Organic groups for Drupal 7 has an alpha release. Sure there are bugs, but I try not to let it ruin the warm and fuzzy feeling of seeing all the tests pass.</p> <p><a href="">Continue reading…</a></p>, 26 Dec 2010 00:00:00 -0600Rounded corners<p><strong>[Edit: I have found a better solution that allows using CSS3 on IE as-well – <a href="">CSS3PIE</a>]</strong></p> <p>CSS is annoying and I’d like to deal with it as little as possible. For that I’m using 960 grid design, I’ve started looking into LESS, and the latest is a rewrite I did to the <a href="">Rounded corners</a> module.</p> <p>Rounded corners is no longer a “dumb” wrapper for the jQuery plugin, but rather an API that lets you do what you want with as little code possible.</p> <p><a href="">Continue reading…</a></p>, 20 Oct 2010 00:00:00 -0500Message example = Github news feed<p>It’s time for some P.R. (Public relations) on the <a href="">Message</a> module, and the best way is a Message example module that loosely imitates Github’s news feed feature.</p> <p>I won’t get into too much explanation here, just look at the screenshots, or try it yourself - since everything in Message is exportable, you don’t need to do anything to make it work! (Apart of generating nodes and “making friends” by flagging other users).</p> <p><a href="">Continue reading…</a></p>, 29 Sep 2010 00:00:00 -0500OG7 session in Drupalcon Copenhagen<p>Finally, we’ve been able to collect all the movies and edit them together. Unfortunately the quality isn’t great in the first few minutes, but it’s getting better and I hope you’ll enjoy watching it.</p> <p>Thanks to our “camera guys” - <a href="">David Mollière</a> and <a href="">Peter Stumpf</a> (that as it turns out, is really working for the UN and uses OG for that!)</p> <p><a href="">Continue reading…</a></p>, 07 Sep 2010 00:00:00 -0500Let sleeping dogs lie<p>Here’s the story in one (code) line:</p> <div class="highlighter-rouge"><pre class="highlight"><code>find ./ -name *.* -type f -exec s -i "s/group/og/g" '{}' \; </code></pre> </div> <p>For the humans amongst us, I’ll explain. As part of the rewrite of Organic groups to Drupal 7, I thought that the name also deserves a rename – to follow Drupal’s naming standards. Since there weren’t enough votes in the <a href="">poll</a> in g.d.o I’ve decided _not to go with the change. OG module will keep its name - although in the UI we will use “Group” (the same way as node is refereed to as content).</p> <p><a href="">Continue reading…</a></p>, 03 Jul 2010 00:00:00 -0500Views and Panels Ajaxified<p>If you haven’t read Roger Lopez <a href="">Ajax without Javascript</a> take a 5 minutes break and do it. If you are not a developer and all this code makes you frightened then you are excused. This post will also have a little code, but take a big breath and you’ll see how easy it is to Ajaxify your Panels!</p> <ol> <li>Download this <a href="">feature</a> and the related modules <code>drush dl ctools panels views &amp;&amp; drush en page_manager panels views_content views_ui story_list php -y</code></li> <li>Add a few story nodes (title and body), or use Devel generate module to do it for you</li> <li>Navigate to <code>/story-list</code> and you should see a list of the last 10 stories on the left and the body of the first story on the right</li> <li>Click on any of the titles and notice how the body text changes, without any page load. Hooray!</li> </ol> <p><a href="">Continue reading…</a></p>, 30 Jun 2010 00:00:00 -0500Message module and CTools $plugin<p>If I may quote myself:</p> <blockquote>I'm thinking, _which is easier than actually sitting down and writing a patch, that it would be neat if CTools exportables plugin had a uniform UI that modules such as Context, Message and others to come, could use. </blockquote> <p>We’re in a scratch your own itch world aren’t we, huh? So I’ve created a CTools repository in github, created a branch called export-ui and it resulted with this <del>getting-close-to-commit</del> committed <a href="">patch</a>.</p> <p>When I started writing <a href="">Message</a> I had some understanding of how CTools exportables work but having merlinofchaos review my work, explain some of his thoughts and providing his golden code, really changed the way I look at writing generic and reusable code. In fact, I’ve decided to overhaul much of the Message module for it to be more inline with CTools’ standards.</p> <p>Message was a inspired by Context module. Context uses some object oriented, so I’ve copied that too. That’s where I got it wrong - because my use case was a bit different. OOP is powerful _when it’s needed but sometimes it might be an overkiller. Ok, so no OOP, but I still needed a pluggable system. CTools has the $plugin concept. Its almost the same as having an info hook, only it’s without a hook - you place it directly on an <code class="highlighter-rouge">inc</code> file that CTools will include for you when its needed. But the “trick” that I’ve learned - and there shouldn’t be any drum rolls cause it might be obvious - is to use a “process” function that populates the $plugin with defaults. The defaults can be for example the callbacks that will be used, the Views handlers that will be automatically declared, the text strings, the allowed operations, etc’. Basically, when you use the $plugin, you should be thinking how an extending module can alter the module’s behavior by simple changes.</p> <p><a href="">Continue reading…</a></p>, 10 Jun 2010 00:00:00 -0500Code sample for DrutNet API - connect, load node, save node and upload file<p>In the previous <a href="/content/drutnet-drupal-net-api">post</a> I’ve introduced DrutNet API with an already compiled example, today I will show some code examples. Since last post I’ve added a new method that allow file upload with Services, using the base-64 conversion, I will show you how this method works.</p> <p><a href="">Continue reading…</a></p>, 17 May 2010 00:00:00 -0500Group (the new OG) intro<p>In the past few month, since Drupalcon Paris, I was busy upgrading Organic groups (a.k.a OG) to Drupal7. I’d like to give a quick overview of what has been done, what needs to be done, and the changes that came with the upgrade.</p> <p>The first noticeable thing is that like Ubecart became Commerce, Organic groups has changed its name to <a href="">Group</a>. The second thing you will notice, is that Group is a complete rewrite of OG! Why was it done? OG is a great module, and it has been around for a long time. Long enough to be very popular and feature rich, but on the same time, concepts and implementations that were right in earlier Drupal versions became outdated. Using Drupal 7 new features - especially field API - were too hard to resist.</p> <p>Here are the Group’s main concepts, by importance:</p> <ol> <li>Allow associating entities (e.g. node, users, etc'.) to other entities - In plain English it means that you can have posts related to a group. Not more, not less</li> <li>Introduce the concept of roles and permissions, on the group level</li> <li>Provide integration with superior modules such as Views. We don't need to invent the wheel - just need to know how to hook into an existing one</li> </ol> <p>Writing those concepts down made it easier to determine what should be in the core of Group and what should be a contrib module. The UI was separated to another module as-well, leaving us with a Group API module, that has as little assumptions as possible about how it will be used.</p> <p><a href="">Continue reading…</a></p>, 09 May 2010 00:00:00 -0500DrutNet - Drupal .NET API<p>DrutNet is a .NET API to create client applications that connects to a Drupal site, and allow file upload, node save/load, view get and more.</p> <p><strong>Introduction</strong> I’ve created this simple API to connect Drupal with .NET applications easily and quickly, this API was based on an API that I wrote for one of our projects, for this project we had to create a few client application to upload files, connect to desktop application and update the content. I used two different interfaces to cover all my needs, cURL - to upload files; and Services module - to create/ update nodes.</p> <p><strong>Features Snapshot</strong> DrutNet API has a <code class="highlighter-rouge">Services</code> class:</p> <ul> <li>Services.Login - Login to Drupal</li> <li>Services.NodeGet - Load a node</li> <li>Services.UserGet - Load a user</li> <li>Services.NodeSave - Save a node</li> </ul> <p><a href="">Continue reading…</a></p>, 29 Apr 2010 00:00:00 -0500Zen-960<p><strong>UPDATE: Since writing this post ninesixty theme has advanced. I am now using it as my base theme, and create a subtheme. I no longer use Zen.</strong></p> <p><a href="">Zen</a> is my first favorite base theme. <a href="">Ninesixty</a> is the other. The following post will show how we can enjoy both of them - How we can have a “<a href="">Zen-960</a>” theme _done correctly.</p> <p>As always, lets first understand _why we want to combine those two themes. JohnAlibn’s Zen is a great starter theme - if you need a list of features, just head to the project page, you won’t be disappointed. dvessel’s Ninesixty takes the power of grid 960 -that we really love as it allows us to spend less time banging our heads on CSS - and adapts it to Drupal.</p> <p>The way that I look at it - Zen should be doing the job of defining the page _elements (how fonts will look, lists, tabs, etc’) and defining their RTL equivalent. Ninesixty on the other hand should be doing the job of defining the page _layout.</p> <p>So what is the problem? Well, according to Drupal I’m too griddy! I want my theme to have two base themes - and that’s currently not possible. Ok, so why not just download zen_ninesixty theme (a.k.a Zen-960) and go on with my life?</p> <p><a href="">Continue reading…</a></p>, 26 Apr 2010 00:00:00 -0500Message module intro<p>Here’s a quick overview of the <a href="">Message</a> module.</p> <p>For those that find my accent hard to understand, or simply for those that prefer reading - I’ve published the <a href="">movie script</a>.</p> <p><a href="">Continue reading…</a></p>, 22 Apr 2010 00:00:00 -0500Dynamic landing pages<p>The following post will cover how to create dynamic landing pages. First lets define our mission:</p> <p>Allow easily creating landing pages, with different content. The layout should be a header and footer which are always the same, and the main-content should be three columns layout, with dynamic content.</p> <p><a href="">Continue reading…</a></p>, 14 Apr 2010 00:00:00 -0500CTools, Context and Message<p>When I decided I’ll use CTools for the <a href="">Message</a> module, I knew it will save me some time. I mean, everybody knows the “let’s re-use the same API” concept. I started copying from Context module the parts that I needed, and added my own logic.</p> <p>Today, I’ve decided it is time to add a message UI module. It took me about twenty minutes which ended with the commit message: “Added message UI - A shameless copy/ paste from Context module.”</p> <p>It was much faster than what I thought it would be. So, it’s not just about using the same API, it is about using the API the _same way as others. And if “others” are yhahn and jmiccolis then I can sleep better at night (or at least when the baby doesn’t cry).</p> <p><a href="">Continue reading…</a></p>, 05 Apr 2010 00:00:00 -0500Thinking 960<p>If you are not familiar with the concept of <a href="">960 grid system</a> you should be. In one sentence, 960 is a CSS framework that divides a page to 12 or 16 columns with a total of 960 pixels.</p> <p>960 is a framework. As so, it doesn’t only give us tools, it also encourages us to use them the _right way. I think it’s a bit like forms API in Drupal that helps us build our forms correctly. In 960 you have CSS classes that can be used to set elements width and position.</p> <p><a href="">Continue reading…</a></p>, 21 Jan 2010 00:00:00 -0600User points - Rules style<p><a href="">Nick Lewis</a> wrote about his 40+ essential modules, and I really missed two modules there - Rules and Flag. I commented that</p> <blockquote> My top 5 are: Views, CCK, Flag, Rules, Panels. I think that the Flag &amp; Rules combo is less known in the community, but there are so many use cases they can cover. Because they are a bit abstracted it's hard for newbies to realize their potential. </blockquote> <p>I think there’s no better way to show my point, than a tutorial. Lazy people can even download the feature from <a href="/sites/default/files/user_points_rules.tar_.gz">here</a>. This tutorial will be about having “User points” functionality without using the user points module. I’m not saying that module is bad, but sometimes I need multiple user points per user. Also, re-using existing modules always feels me with great joy. GREAT joy! Also, thinking about Drupal 7 with fields API, suddenly _user points can become _any-fieldable-entity points… The tutorial will cover the “Rule sets” concept in Rules module, which is also considered by many as a great mystery. Let’s define our mission:</p> <p><a href="">Continue reading…</a></p>, 14 Jan 2010 00:00:00 -0600Organic groups 7!<p>You might have already heard, that <a href="">Moshe Weitzman</a> has handed over Organic groups to me. It’s fun and scary at the same time.</p> <p>It’s is now time for some community “tough love” - OG7 needs reviews. Before people start diving into the code, you should realize that OG has changed and its concept has been polished and can be summarized into one line:</p> <blockquote> OG brings roles and permissions to the _group level. </blockquote> <p><a href="">Continue reading…</a></p>, 03 Jan 2010 00:00:00 -0600Using git to write patches<p>Drupal is using CVS for version controlling core and contrib modules. CVS has diffing options, but it becomes annoying when you try adding or deleting new files. Here’s an example of how to use git to patch a contrib module - Organic groups.</p> <p><a href="">Continue reading…</a></p>, 27 Dec 2009 00:00:00 -0600Outsourcing and Kittens<p>Few years back there was a real hype about outsourcing development projects. I was working and living in New-Delhi, India at that time, and you could almost see the buzz of “outsourcing” in the air - people were so excited.</p> <p>The hype, like all hypes, has ended. People realized that paying low prices might cost more if things didn’t turn out as they expected them to. Don’t get me wrong, there are lots of talented people, but there were just as much unprofessional ones.</p> <p>The idea of outsourcing is still good and valid - you move your projects into places where it will cost you less - as simple as that. Everybody wins.</p> <p>So how will you know if the people you are communicating over via email (cause you can’t understand their accent when you talk in Skype) are the right people for you? The price is ok , maybe a little high than what you imagined but the timetable they show you sounds realistic more or less - but can they deliver?</p> <p>To know almost for sure send the following email:</p> <blockquote> Hi, Can you please hook_update_6000() my site. I'll need some basic fago to go with the user registration, and later allow quicksketching nodes. Oh, and we really want to have some chaos going all over the site, and can you take out that function Crell _really hates? btw, Do you think kittens will die in the process? </blockquote> <p>Don’t hire them if they answer:</p> <blockquote> WTF? </blockquote> <p>Hire them if they answer:</p> <blockquote> Howdy, So you want to upgrade your site to Drupal 6, add content profile module to the user registration, allow users to flag nodes, and add some CTools love to it? Meh, no kittens should die. p.s. About Crell - don't worry, we know better than to use arg(). </blockquote> <p>Ok. I’m not 100% serious about sending such an email - my point is this - If they are involved in the community, know the people and speak the lingo, they are probably aware of which modules are good and have a future; they probably know the best practices for deployment; they probably know how to write _secure code. So even if they charge more than another company, but that company answered “WTF”? - go with the more expensive company, as in the end it will cost you less.</p> <p><a href="">Continue reading…</a></p>, 14 Dec 2009 00:00:00 -0600Does every page really need to be a node?<p>No. Let’s take the “usual” home page as an example:</p> <ul> <li>It doesn't need to have an author</li> <li>It doesn't have comments</li> <li>It rarely changes (Maybe it has Views in it that change the content that is shown, but the layout and static text don't change)</li> </ul> <p>So we can use <a href="">Panels</a> for that. It also makes deployment easier:</p> <p><a href="">Continue reading…</a></p>, 07 Dec 2009 00:00:00 -0600hook_widget_settings_alter() and Pandora<p>As <a href="">markus_petrux</a> wrote:</p> <blockquote> It seems that the new addition to CCK, the new hook_widget_settings_alter() opened Pandora's box. </blockquote> <p>There are quite a few modules that attach their own logic to CCK fields. Up until now those modules had to have their own DB or set their own variables.</p> <p>In CCK 2.5, <code class="highlighter-rouge">hook_widget_settings_alter()</code> got in, which allows your module to hook into the field settings, and rely on CCK to save and load those settings when needed.</p> <p>But that’s not all - as the settings are becoming part of the CCK field defention it means that when you’ll export the CCK to code - your module settings will be there. Your module now actually has import/ export functionality without you even having to bother about.</p> <p><a href="">Continue reading…</a></p>, 19 Nov 2009 00:00:00 -0600