Badge 1&1 Blog

Agile Toolbox, episode #1 – How to start a state-of-art application

Let’s give a little background here… in our day-to-day activity, we sometimes struggle when we start a new project.

1

And from here to project failure it’s not a long way.

At Delivery Management we often hear that it’s too time-consuming to estimate a complete backlog and try to get an idea about the project size and that we should rather do just-in-time estimation and release planning.

So what can we do to answer the natural desire of our sponsors and different stakeholders to know more or less how big their project is and how to approach it? Well, for this we have the Affinity tool.

We thought to make an exercise. Let’s take one completely new application, gather a group of developers and see if we can actually achieve our goals by running an Affinity process.

First step was to find an app idea that was easy to grasp for everyone and write down the features. The appointed PO took his new role very seriously:

2

And the rest is history: we played the Product Owner and Scrum Master roles, several enthusiastic colleagues joined with their superskills and in less than 3 hours we had all the ingredients to properly start a new application:

-          A common vision of the product and of the product roadmap as envisioned by our PO

-          A decision on the technologies to be employed

-          A sketch of the technical solution

-          An estimated backlog (in SPs)

-          A rough idea of how long the project will take, obtained with the Wideband Delphi technique

-          The list of assumptions

-          Some risks we could already foresee

-          An idea on how to approach the project

-          And last but not least… the eagerness to start, because everyone was already IN

It is a very powerful tool, 2h45min and we already knew so much about what it takes to build our app.

Agile promotes individuals and interactions so what better way to achieve great software than to bring people together since the very beginning, present them the vision and let them draw the solution?

3

 

 

The feedback was also positive, even if we were running a bit out of time at the end.

4

We’ll definitely do this workshop again (and adjust a bit the scope to match the proposed timeframe) so please stay tuned if you’ve missed the first one.

Or, if you want to try it in your upcoming project and need help setting things up, pay us a visit at the 14th floor.

Posted in: Inside 1&1 | Comments Off

Chrome DevTools – 10 lesser-known DevTools features

Chrome DevTools is a popular tool for frontend debugging these days, with new features being added frequently. In this post we’ll go beyond the common patterns and highlight features that are perhaps less known, but useful nonetheless.

 

1. Get inspected element

There are a few situations where you would want to access the last inspected element (from the Elements panel):

- for quick debugging inside the console: the element can be accessed via the $0 global variable (see for yourself: console.log($0))

pic

- for writing tests using Selenium: in Selenium you can locate the element on the page using its XPath, and luckily Chrome has an option (right click element in the Elements panel) to copy XPath

- to use in your JavaScript code: to access that element you can copy its CSS path (right click element in the Elements panel) first and then select it (via document.querySelector for example)

pic

 

2. Console features beyond .log

- console.table(data[, columns]) logs data using tabular layout, making it a lot more readable for the human eye

- console.trace() prints a stack trace from the point of the method call (which is a less hacky way of doing console.log(new Error().stack)); this is useful for determining what part of the code is calling the current function for example

- console.group(object[, object, …]) and console.groupEnd() are used to (visually) group certain logs together (such as by feature); groups can also be nested

- console.time(label) and console.timeEnd(label) allow us to measure execution times

pic

 

3. Extra functions available in the console

- monitorEvents(object[, types]) enables logging for all events dispatched to an object

- copy(object) copies a string representation of the object to the clipboard

- getEventListeners(object) returns all event listeners added on the object

pic

 

4. Store as global variable

When paused at a breakpoint we can inspect locally scoped objects in the console, but we might also want to keep track of them for later inspection as well. Instead of manually storing such an object as a global variable in the console, DevTools has a handy option to “Store as global variable” by right clicking on it in the Sources panel (Scopes section on the right).

pic

 

5. Snippets

DevTools provides a “snippets” section within “Source” panel which allows us to manage a list of scripts that can be injected onto a page. These things can range from inject a script into a page to printing out cookies or event more complex tasks. The point of this feature is to allow code reusability during debugging without having to resort to other tricks (such as using bookmarks for example).

pic

 

6. Replay Ajax requests

There are situations when Ajax requests return an unexpected result or even an error. For replicating the request one might think we need to click the button that triggered it (or replicate the series of actions that triggered it). Fortunately there’s an easier way with DevTools:

- an option is to open the Network panel, right click on the Ajax request and click ‘Replay XHR’

- another way of doing the same thing is to click on ‘Copy as cURL’ (again, Network panel > right click request) and run the command into the terminal

pic

 

7. Toggle element state

There are other styles to be applied to an element besides that of its regular state. For example a button could look differently when hovering over it, the same way a visited link is diffent than a regular link. These special states are the following: active, hover, focus, visited.

You could manually trigger these states by yourself, but you wouldn’t be able to edit their styles in DevTools as well (once you’ll open DevTools the special state of the will be gone – except for visited links).

But lucky for us there are solutions to force an element’s state with DevTools:

- in the Elements panel you can right click on the element and select ‘Force Element State’, then choose the preffered state

- the second option would be to select the element from the Elements panel, then go to the ‘Styles’ section on the right and click on the ‘Toggle Element State’ icon (the 2nd one)

pic

 

8. DOM breakpoints

Sometimes an element changes and we would like to determine what part of the code triggered that change. DOM breakpoints are a good fit for these kind of situations, since they can pause the execution whenever an element is removed, its attributes are changed or there are subtree modifications.

To add a breakpoint simply right click on an element (in the Elements panel), select Break on.. and check the situations where you want the breakpoint to be added to. Now when the DOM element is being changed the execution will be paused and you will see what caused the update in the Sources panel.

pic

 

9. Test responsive design and bad connections

If you want to see how an application feels like on a smartphone with a bad connection, you don’t have to leave your browser. By clicking on the smartphone icon near the DevTools panels on the left side you enter the Device Mode. Here you will be able to setup the viewport to match known smartphones/tablets, as well as throttle the network connection to simulate bad connections.

pic

 

10. Locate an element by its selector

Let’s assume that you are visiting a relatively big page and you’re looking for a specific element. You search through source code of the page and you find that element. For the sake of the argument we’ll say that it has an id named instructions.

The next step would be to go to the Console panel and paste the following code:

 

inspect(document.querySelector('#instructions'));

 

What’s going on here?

- document.querySelector() will return the DOM element

- the inspect(element) function will open the Elements panel and select the element

At this point you will be able to take a look at the element’s DOM structure, checkout its styles or inspect other stuff.

But we can achieve more than that, to actually have a look at the element on the page. To do that just right click on the element in the Elements panel and select ‘Scroll into view’. This will scroll to the element and highlight it, so mission acomplished.

pic

 

Conclusion

While you might not need to master all DevTools features, it’s a good thing to be aware of these tricks. Who knows, maybe you’ll end up as those people using DevTools as their IDE.

 

A Story for the Hacker In You

Dare to Hack!

Have you ever dreamt to be a Hacker?… At least for a few hours?

Did you ever take part in a Hackathon?

 

I had the chance to be the Host in Bucharest for our internal

1&1 Cloud Server Hackathon

01 welcome to hackathon

 

Is it for me?

So, what’s in it for me? – You would ask.

And you’re perfectly right.

I would say that a hackathon “is for you” if you love to explore new things, if you like to be the first to walk unbeaten paths, and unearth bugs and other beasts hidden in a brand-new software.

That was the case for us on Thursday night.

Preparations started days before – checking video connection between locations, making sure we have everything needed in such events – laptops, projector, cables, pizza, drinks.

 

Kick Off: 17:00 CET in all locations

02 kick offIMG_0813

We kicked off on Thursday, June 18th, 17:00 CET simultaneously in 1&1 offices from Bucharest, Logrono, Karlsruhe, Munchen and Gloucester.

From Bucharest we had 15 participants.

We were connected via Video call and Chat with all the other locations and were in contact with the Platform guys and also with Customer Care.

The rules were clear: we were not allowed to make the platform unstable nor attack customer contracts, but nevertheless we could send in code that was able to do so :)

After a short introduction by Javier, our colleague from Arsys Logrono – subsidiary of 1&1 in Spain – everybody was given his/her test account and  was free to start playing around the platform.

The Platform

03 Cloud Server API

 

About the platform I have to say it’s a pretty powerful virtualization API that will soon be launched for all 1&1 Cloud Server customers to play with and contribute.

You can practically do anything you can imagine to manage programmatically your 1&1 Cloud Servers.

 

 

The competition

Starting on Thursday night and before Monday 22nd June end-of-day, any participant in the hackathon could enter the competition.

A jury formed by experts of the Cloud Server Platform will check all submissions and award for:

-          the major vulnerabilities found on the platform or API and for

-          the Best Mobile App and the Best Desktop App.

It’s all About the Thrill

04 font too big

So, how is it like to be part of a hackathon?

This is a good question because you actually can’t tell when the time flies by.

It’s something close to a hive swarming – lots of messages coming by the chat wall, small issues or big issues waiting to be solved right away:

Due to the relative small timebox, the people focused Thursday night on finding bugs and testing all the possible scenarios in the API.

60 people filed 33 bugs in 5 hours.

The good thing is that they found only minor vulnerabilities and some improvements for the platform.

Since the deadline for submissions was extended until Monday 22nd end-of-day, the thrill is still on – we wait to see the Winners.

Try it yourself!

If you want to feel the thrill yourself, I invite you to find a hackathon near you – that’s not so difficult – there was one a few weeks ago in Bucharest:

http://www.meetup.com/HackaTMe-24h-Hackathon-6-7-June-We-Love-Digital/events/222395426/

 

1&1 COSMO Open Source

I am glad to announce that 1&1 open sourced COSMO, our CalDAV Calendar server to the calendaring community. You will find below some general info on 1&1 open sourcing but also more details about COSMO server.

History

In 2012, in Bucharest Mail and Media division, a new team was created with the goal to develop a new Calendar solution. Soon after start, analyzing the information on calendaring, we decided to base the solution on an open source CalDAV server: Cosmo from Chandler. Chandler, which has his own interesting history behind, (see more details here) was a closed project since 2008 when the community around it stopped developing the product. Considering the implications, we developed the server with the goal to be able to give COSMO back to open source community in the future.

1&1 and OPEN SOURCE

I will not cover here the benefits of open sourcing or when it make sense to open source your code. I will provide some info on how to do it when all the other aspects are clarified.

Even if there are no hard rules to follow in 1&1 if you want to open source the code, it is very important to be fully transparent on your intentions from the beginning. First start discussing this with your Team Lead and make sure you have the full support of your team.

Steps to follow are easy and well described. There is also a dedicated InsideOne Open Source Wall where you can ask questions or read about other the experiences your colleagues had with open sourcing. As a side note, during the process we discovered that most of the 1&1 projects open-sourced are published under 1&1 Github account (hosting now almost 60 projects). However if your project is big enough it can also be published as a standalone one from the start or in two steps.

Getting starting with COSMO

Now coming back to COSMO.

The project contains only CalDAV core of our Calendar application. It provides an API that 1_calendarcontains abstractions over CalDAV and iCal specific objects and a plugin mechanism that allows developers to write custom logic without having to alter Cosmo Core code.

The goal is to keep this architecture simple and easy to understand and extend, separating specific implementations from protocol related ones.

Browse, demo, and learn how to use

The project can be downloaded from here: https://github.com/1and1/cosmo

After downloading it into project root directory you only need to run the mvn tomcat7:run-war and the calendar server will be packaged, tested and run. Then you can use the COSMO API from any calendar client running CalDAV protocol. Below you will find the steps to configure Mozilla Lightening client and use it with the COSMO server.

  1. Install the Lightning Thunderbird add-on and restart Thunderbird.2_calendar
  2. Press Alt + D to open the “File” menu.
  3. In the “New” submenu, select “Calendar”.
  4. Select the “On the Network” option and then “Next” to continue.
  5. Select the “CalDav” format.
  6. In the “Location” field, enter the path “http://localhost:8080/cosmo/dav/.
  7. Click “Next”.

So, in a few steps you will have a basic calendar solution up and running.

Any contribution or feedback is highly appreciated.

Key Internet Players met in Bucharest to discuss the future of calendaring

calconnectlogo

 

CalConnect (The Calendaring and Scheduling Consortium; www.CalConnect.org) held its thirty-third edition conference in Bucharest, Romania, on May 18-22, 2015. The consortium is a partnership among leading technology organizations and universities to promote open standards and the interoperability of calendaring systems to give users more choices when it comes to devices and calendaring applications. A list of its members can be viewed here.

The host of this international event was 1&1 Internet Development, a wholly-owned subsidiary of 1&1 Group, the leading European internet specialist.
The project took place at the 1&1 facilities and featured interoperability testing events, symposia, meetings, and roundtable discussions, the same agenda that already proved its great success, attracting each edition participants from more than 3 continents and the biggest names of the IT industry. This year in Romania, Apple, Google, IBM, 1&1 and many more, have accepted the invitation to meet and discuss the future of calendaring and interoperability.

It was structured as a 3 day interoperability test event, followed by a 2 day conference in order to support the practical hands-on testing/reviewing and the theoretical discussions.
“Hosting such an event for the first time in Romania, was a challenge but when you think of its mission, to offer solutions that allow calendar and scheduling methodologies to interoperate, so that at one point they will enter the mainstream of computing, you see a greater purpose. It’s not just an event, it’s a way to go forward” – said Wolfgang Gunne, General Manager 1&1 Internet Development

Interoperability is a property of a product or system, whose interfaces are completely understood, to work with other products or systems, without any restricted access or implementation. In other words, thanks to these events, the final customers will be able to keep track of the same schedule, disregarding the platform or device they are using. Having a practical example: booking a time frame, from our device, our calendar tool, to any other device (which may be completely different, both software and
hardware), could not be possible without interoperability.

The highlights sessions of this edition included Embedding Calendar Data in Media (QRCODE, Data URI), Changes to the scheduling model, Sending invitations through other means than e-mail, RSCALE: NonGregorian Recurrence Rules in iCalendar and Calendaring Systems in General (solar, luni-solar, etc.) and were available for registration to any organization or software developer that had a clear objective in improving the effectiveness of calendaring and sharing.
Full information about the conference may be found at CalConnect XXXIII website.

Posted in: Events | No comments

1&1 Internet Development moves to Sky Tower to provide its employees the best workplace on the market

1and1

1&1 Internet Development a wholly-owned subsidiary of 1&1 Group, the leading European internet specialist, is relocating its offices to Sky Tower, one of the most modern office buildings in Bucharest, a new landmark of the capital city. The software development center established in 2003 in Romania, with almost 300 active employees at this moment, is considered by media and employer branding studies, as one of the companies that made a significant leap forward in 2014 “Top 20 companies to work for in the IT industry” study, thanks to their recent actions that support the general employee satisfaction.

This move also aims at creating better working conditions and building a work environment around the most important asset of the company: employees.

“We were looking for an environment to meet two conditions: firstly, to meet our group’s standards in terms of quality of working space and in the same time to provide our employees in Romania the best conditions for boosting their potential within a great working environment. I think that this is a great way of telling our employees that the company appreciates and respects their work and rewards it with a state of the art working place, too”, said Wolfgang Gunne, General Manager 1&1 Internet Development.

The relocation has been completed on December 15th, when all the staff of 1&1 has occupied 3 floors of the Sky Tower building on Calea Floreasca 246C.

“SkyTower is a modern and efficient building and a new architectural symbol of Bucharest, changing not only the city’s skyline, but also the perspective on office space characteristics in the heart of the capital. We are delighted with the relocation of 1&1 Internet Development in SkyTower and the chance to offer our services to all of our existing and future clients. We focus on customer satisfaction and strive to improve employee experience as much as possible. We even provide employees in the building with a wonderful discount card, a singular product in Bucharest, which offers attractive discounts in various partner stores in the shopping areas nearby. We are confident that the offices will meet all expectations of 1&1 Internet Development and we look forward to a beautiful partnership,” said Ruxandra Grinzeanu, General Manager SkyTower Building.

With own recreation rooms and small-professional cafeterias inside the office space, with an innovative climate control system that uses only fresh air(no air re-usage), with parking spaces for cars, bicycle racks and having even own showers, with more and easier to reach side activities such as shopping, eateries or leisure facilities, the company is interested to provide employees the best workplace on the market.

Commuting to SkyTower is also easy, as the building is very close to the subway station Aurel Vlaicu, has access to large boulevards and the number of bus/tram stops in the near vicinity facilitate any travel plans.

“Work at 1&1 Internet Development is fascinating for any software developer thanks to the products we develop, technologies we use and a great team making it all possible. Now, thanks to this relocation, it becomes more enjoyable than ever”, Wolfgang Gunne said.

1&1 Internet Development thus completes a new leg in the maturity process, following extensive recruiting campaigns during the last 3 years. The company plans to keep recruiting high level IT specialists(Software Developer, Software Architect, System Architect, Quality Engineer, User Experience Designer, Operations Engineer, Product Owner, Business Engineer, Scrum Master, Delivery Manager) for certain technologies and competencies, in order to best respond to global trends on internet development.

Posted in: Inside 1&1 | No comments

Bug Friday, in Domains Apps – the legend

Once upon a time …

It was a chill Friday morning, mist was setting around and no one was to be seen. Only the steps of heavy armors and blades tingeling were to be heard. But suddenly the noise grew much closer and then heroes hardened in battles walk the path of DSSA Camp passing by.

Lots of work was to be done before the first horn will announce the beginning of the battle. Speakers were set, playlists were made, keyboards were sharpened and when Commodore entered the War Room, everybody was present to see the Battle Plan and Rules of Engagement.

At 10:00 sharp, the first ray of light pierced the dense mist, in a couple of minutes the skies were clean and you could see two mighty armies gathering on each side of the battle field. First, the Bug Army lead by fearsome CX bug general, the second army, DSSA Band of Heroes, lead by Commodore SpaceCowboy.

having-fun

First horn of the battle announced the first attack, both armies rushed against each other and the battle started. Angular hero managed to take down 2 bugs with just a swing of a keyboard and deadly injured a third one, next to him UX Master crushed another enemy with his mouse knife, and 3 with his magical keyboard staff. On the other side of the battlefield another hero (which will not be named in here for privacy reasons), although injured and staying home, with his mind powers took down another 2 bugs. Continue reading…

Posted in: Events, People | No comments

Android Browser SOP bypass

For the past couple of weeks, everyone has been talking and focusing on the Shellshock exploit. This might put another serious vulnerability found in all pre-4.4 versions of Android a little in the background.

Nevertheless, the Android Browser SOP bypass is a very serious vulnerability, as it allows an attacker to read the contents of other tabs in a browser when a user visits a page the attacker controls. The vulnerability was first disclosed in late August 2014, but there has not been much in the way of public discussion of it. Exploiting the flaw is a straightforward matter and allows the attacker to bypass the same-origin policy in the Android browser. Continue reading…

Brought to you by the 1&1 Blog Infrastructure

This year, the spring brought more than just fresh air and sunny days; it brought exciting changes in the 1&1 Blog Infrastructure and in the online presence of the company.

We’ve started at the end of March with a redesign of the blog for the German market. For this, first we started with a totally new theme, developed by an external agency named First Square, and deployed on a new multi-site WordPress environment.

coverPictureBlogs

Continue reading…

Posted in: Inside 1&1 | No comments

STAR loading…

This is a guest post written by Scoala de Valori

More than a month from its start, the STAR adventure is in full development, and the 30 high school students passionately keep working on the software applications. We are happy to see that the Scoala de Valori and 1&1 project has had such a success with the youngsters and has been so very welcomed by all the participants!

proiect STAR Continue reading…