🚨 iTerm2 leaks everything you hover in your terminal via DNS requests 🚨

iTerm2, a populair terminal app, contained a very bad security issue. Everything you hover over was being checked if it was a clickable url. To determine if it’s a valid url, the hovered over string was being checked against DNS server. So if you hover over a password, or a secret key or whatever it sent out to the internet. Obviously this is a big problem. It’s fixed in the latest version. So if you use iTerm2 and haven’t updated it recently, be sure to do it now! The problem is fixed in version 3.1.1.

iTerm2’s leak issue was first discovered ten months ago. iTerm2’s creator initially reacted by adding an option to iTerm 3.0.13 that allowed users to disable DNS lookups. The feature remained turned on by default for new and existing installations.

Dutch developer Peter van Dijk, software engineer for PowerDNS, a supplier of open-source DNS software and DNS management service, re-reported this feature and this time around, he pointed out some of the severe privacy leaks not included in the first bug report.

“iTerm sent various things (including passwords) in plain text to my ISP’s DNS server,” van Dijk wrote flabbergasted in a bug report he filed earlier today.

This time around, George Nachman, iTerm2’s maintainer, understood the severity of the issue right away and released iTerm2 3.1.1 to fix the problem within hours. He also apologized for enabling this feature by default without analyzing possible consequences in more depth.

https://www.bleepingcomputer.com/news/security/iterm2-leaks-everything-you-hover-in-your-terminal-via-dns-requests/

Event Sourcing: what it is and why it’s awesome

If you haven’t heard about event sourcing or are unsure about what it is, Barry O Sullivan has got you covered. Recently he wrote up a blogpost that explains it very clearly.

Event Sourcing (ES) is opposite of this. Instead of focussing on current state, you focus on the changes that have occurred over time. It is the practice of modelling your system as a sequence of events.

It solves all the big problems our team has faced when building large scale distributed business software. It allows us to talk to the business in their language, and it gives us the freedom to change and adapt the system with ease.

https://dev.to/barryosull/event-sourcing-what-it-is-and-why-its-awesome

Five Vuex plugins for your next project

On the vuejsdevelopers.com blog Anthony Gore suggested a few cool Vuex plugins that could come in handy.

There are a lot of good reasons to use Vuex to manage the state of your Vue.js app. For one, it’s really easy to add super-cool features with a Vuex plugin. Developers in the Vuex community have created a tonne of free plugins for you to use, with many of the features you can imagine, and some you may not have imagined.

In this article, I will show you five feature that you can easily add to your next project with a Vuex plugin.

https://vuejsdevelopers.com/2017/09/11/vue-js-vuex-plugins/

Messing around with HTTP status codes

The HTTP specification says that status codes should be three digits integers, but what happens if they are not? April King, head of website security at Mozilla, did some fun experiments to find out.

While it is easy to create test cases for conditions that don’t satisfy this requirement, it is somewhat more difficult to determine how third-party libraries will handle HTTP requests that fall outside this constraint. I looked around the internet for websites to help me test weird status codes, but most of them only let me test with the known status codes. As such, I decided to add arbitrary HTTP status codes to my naughty httpbin fork, called misbehaving.site.

What I discovered is that the various browser manufacturers have wildly different behavior with how they handle unknown HTTP status codes.

https://pokeinthe.io/2017/09/14/http-status-code-handling/

Prepare your website for iPhone X

Last week Apple introduced their new fancy iPhone X. It’s screen has a top notch that might cause some problems in landscape mode. Stephen Radford explains how to properly handle it.

The new iPhone X features a beautiful edge-to-edge display. Well, almost. There is the small issue of a notch at the top of the browser which doesn’t cause an issue when viewing websites in portrait but by default does cause some issues in landscape.

To accommodate the notch iOS 11 constrains websites within a “safe area” on the screen. On most websites this results in letterboxing on the left and the right.

http://stephenradford.me/removing-the-white-bars-in-safari-on-iphone-x/

We’ve already implemented the fix in our Laravel application template.

Who uses PHP (and Laravel) anyway?

Colin DeCarlo, a developer at Vehikl, wrote some thoughts on why PHP has a bad reputation in some circles.

People shitting on PHP isn’t going to go away, it’s a symptom of a few things.
PHP has a ridiculously flat learning curve so just about anyone can write code using it, this means a lot of amateurs and ‘get it done’ developers will choose php but won’t really ever level up their skills when it comes to software development.

https://medium.com/@colindecarlo/who-uses-php-anyway-672115ab81de

I agree with Colin on everything he writes in his post. I’m also thinking that the some of the reasons on why people don’t like PHP apply to Laravel as well. In my mind Laravel is to PHP frameworks what PHP is to other programming languages. Both Laravel and PHP might not do everything by the “real programming rules”, but it sure is easy to use. And when handled properly powerful and maintainable stuff can be built with it.

Because Laravel is an easy framework to get started with, it’s a popular choice for newcomers. Even with almost no experience you can build an app. Some of those projects will go to production. If an experienced developer that uses another framework comes by and sees that Laravel app, it might be easy to conclude that the problem lies with Laravel, and not with the inexperience of the junior programmer who just begon his/her journey in coding.

Formatting Vue component properties in PHPStorm

Most of work is done in PHPStorm. On my current project I do a lot of Vue stuff. Regularly use PHPStorm auto format feature to make the code look nice. One thing that was bothering is that by default it will use 8 characters of indentation for Vue component properties. So you get this horrible code:


<template> <!-- 😱 --> <my-component myProp="myValue" anotherProp="anotherValue" ></my-component> </template>

Today a golden tip by Christopher Pitt helped me find the solution. In the preferences of PHPStorm you need to set continuation indent of the html to 4 characters.

And after that the PHPStorm will reformat the code right according to our guidelines for Vue templates.

<template>
    <!-- 😇 -->
    <my-component
        myProp="myValue"
        anotherProp="anotherValue"
    ></my-component>
</template>

6 tips that will improve your typography on your UI

Steve Schoger, a well known designer in the Laravel community, wrote down some good, actionable tips to improve your typography.

When I say typography, I’m not just referring to the font selection (although that is one important factor), I am referring to the entire composition of it. In this post, I’ve compiled a list of some important elements you can consider to create beautiful typography.

Let’s get started!

http://www.steveschoger.com/2017/07/19/6-tips-that-will-improve-your-typography-on-your-ui/

Extending models in Eloquent

Caleb Porzio, co-presenter of the Twenty Percent Time podcast, published a new article on the Tightenco blog. This time he guides us through a nice use case for extending Eloquent models.

Let’s explore another alternative that can be used as a stand-in for repetitive where statements and local scopes. This technique involves creating new Eloquent models that extend other models. By extending another model, you inherit the full functionality of the parent model, while retaining the ability to add custom methods, scopes, event listeners, etc. This is commonly referred to as “Single Table Inheritance,” but I prefer to just call it “Model Inheritance”.

https://tighten.co/blog/extending-models-in-eloquent

PHP 7.2 is due in November. What’s new?

PHP 7.2 is just around the corner. In new blogpost Martin Hujer walks us through the changes.

PHP 7.2 is planned to be released on 30th November 2017 (see the timetable). And it comes with two new security features in the core, several smaller improvements and some language legacy clean-ups. In the article, I will describe what the improvements and changes are. I read the RFCs, discussions on internals and PRs on Github, so you don’t have to.

https://blog.martinhujer.cz/php-7-2-is-due-in-november-whats-new/

Our vue-table-component got some nice improvements

At beginning of the summer we released a new Vue component called vue-table-component. Our aim was to create a very easy to use Vue component to render a table with data. You can toy a little bit with the component on the demo page. Recently Seb and I worked on two cool new features which I want to highlight in this blogpost.

Custom rendering

In the initial version of the component you could simply say which property of the given data should be rendered in which column. Here’s a small example:

<table-component
     :data="[
          { id: 1, firstName: 'John' },
          { id: 2, firstName: 'Paul' },
          { id: 3, firstName: 'George' },
          { id: 4, firstName: 'Ringo' },
     ]"
>
     <table-column show="firstName" label="First name"></table-column>
 </table-component>

This will render a simple table with one column (with a header “First Name”) and a row for each Beatle. That’s nice for simple data but image you want to render something that’s not directly in the data. Like for instance a link to an edit page. In the previous version of the component you had to manually prepare that html and put it in the data. Kinda sucky.

In the latest version of the component you can use scoped slots to render the data. Here’s how to use it.

<table-component
     :data="[
          { id: 1, firstName: 'John' },
          { id: 2, firstName: 'Paul' },
          { id: 3, firstName: 'George' },
          { id: 4, firstName: 'Ringo' },
     ]"
>
     <table-column label="First name">
        <template scope="row">
           <a :href=`/edit${row.id}`>{{ row.firstName }}</a>
        </template>
     </table-column>
</table-component>

Much better!

Asynchronously loading in data

In the previous version of the table component the only way to get data into it was by passing an object in the data prop of table-component. For the project we were working on at the time this was enough. But for the next project we needed to load in data coming from the server so we decided to add support for async loading of data.

In addition to accepting objects the data prop of table-component can now handle a function. That function will receive an object with filter, sort and page. You can use these properties of that object to fetch the right data. That function should return an object with a key data that contain the data that should be displayed. If you return a pagination property the component will also render some pagination links.

Here’s an example where we use Axios, a popular http request library, to get some data from the server:

<template>
   <div id="app">
       <table-component :data="fetchData">
           <table-column show="firstName" label="First name"></table-column>
       </table-component>
   </div>
</template>

<script>
    import axios from 'axios';

    export default {
        methods: {
            async fetchData({ page, filter, sort }) {
                const response = await axios.get('/my-endpoint', { page });

                // An object that has a `data` and an optional `pagination` property
                return response;
            }
        }
    }
</script>

In closing

Our focus with this component is to make it as developer friendly as possible. So it may not have that many features, but it sure is fun to work with. If you want to know more about our component head over to the readme on GitHub. Need a table component, but don’t like ours? Here’s a good list of alternatives.

Build a Facebook Messenger chatbot in Laravel

In a new article on his blog, Christoph Rumpel shows how you can easily set up a Facebook Messenger chatbot using the shiny new v2 of Botman Studio. Very cool stuff.

Although it seems quite easy to setup BotMan Studio and Facebook you still need to be aware of a few concepts regarding Facebook. I hope I could provide them there and this article helps you to setup your next Facebook Messenger chatbots. From here you are ready to build more and more features to your bot your own. So make sure to checkout the BotMan documentation to get a feeling of what is possible and learn new stuff.

http://christoph-rumpel.com/2017/09/build-a-facebook-chatbot-with-laravel-and-botman-studio/

The dangers of mutable datetime objects

Jeff Madsen wrote down a good piece that explains how mutable Carbon dates can lead to some nasty bugs. I would’t mind if Chronos were to be promoted to the default datetime library in Laravel.

If you hang out on any sort of programming forums you have no doubt encountered “The Great Mutable vs. Immutable Debate”. While I’m sure you know what the words mean, if you are new to programming or don’t have a strong Computer Science background it might not be obvious to you whether this is an important concept to be concerned with, or just more “architecture astronaut” purists arguing some obscure fine point.

To help you answer that for yourselves, I’m going to show you the difference between the two using two popular Php DateTime libraries — Carbon and Chronos, and then demonstrate the danger of using the mutable one of those.

https://medium.com/@codebyjeff/whats-all-this-immutable-date-stuff-anyway-72d4130af8ce

If you want to read more cool articles by Jeff, be sure to subscribe to his excellent newsletter.

Unit testing Vue.js components with the official Vue testing tools and Jest

An official toolset for testing Vue components will be released soon. In a new series Jover Morales tells you all about it.

vue-test-utils, the official VueJS testing library and based on avoriaz, is just around the corner. @EddYerburgh is indeed doing a very good job creating it. It provides all necessary tooling for making easy to write unit test in a VueJS application.

Jest, on the other side, is the testing framework developed at Facebook, which makes testing a breeze, with awesome features such as:

– Almost no config by default
– Very cool interactive mode
– Run tests in parallel
– Spies, stubs and mocks out of the box
– Built in code coverage
– Snapshot testing
– Module mocking utilities

https://alexjoverm.github.io/series/Unit-Testing-Vue-js-Components-with-the-Official-Vue-Testing-Tools-and-Jest/