Category Archives: Technology & Development

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.

 

read more
Category: Technology & Development
0 comments0

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.

read more
Category: Inside 1&1 | Technology & Development
0 comments0

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.

read more
Category: Inside 1&1 | Technology & Development
0 comments0

STAR – Software Talent Academy Romania

STAREvery once in a while, no matter how devoured by the daily dynamics of software development we get, we feel the need to turn to the present, to the communities around us. In the end this is where all those belonging to the big 1&1 Romania team come from, right? And if that is the case, wouldn’t it be ok to scan and scrutinize time and ask ourselves who our future colleagues are; who are those who may come work along our side in a few years?

Together with Scoala de Valori, 1&1 Romania has asked itself this very question. And they joined forces in starting an initiative that would target teenagers with a passion for software development.

read more
Category: Events | Inside 1&1 | People | Technology & Development
0 comments0

1&1 Internship: What one of our interns say

One of our interns speaks about his internship with 1&1 Internet Romania and how this experience helped him learn how things work inside big companies.

The 1&1 Internship Program was probably the best work experience I’ve ever had. Studying at the Polytechnic University of Bucharest, Faculty of Electronics, Telecommunications and Information Technology, I’ve always wanted to get in touch with a great company and learn how things work inside. At 1&1 I had the opportunity to find out many interesting things about different topics regarding software development and testing procedures.

read more
Category: Inside 1&1 | People | Technology & Development
0 comments0

QA automation at Technology & Architecture Romania

Brush up  QATRO résumé. The quality assurance technology department from Romania, also labeled as QATRO,  represents  the team in charge with testing mainly the internal software products of the 1&1 organization and spearheading the quality assurance process  within the Technology & Architecture division.

In brief,  the products targeted by QATRO  are mostly described as being J2EE based tools and applications which focus on optimizing the 1&1 internal workflow management, as a solution to the growing needs of the organization. Some of the best examples are:  

read more
Category: Inside 1&1 | Technology & Development
0 comments0

Flying High Above Turbulences In Software Development (Part 2 of 2)

But there’s more to success then just acknowledging a statement. Management evangelists Jim Collins, Morten T. Hansen conducted extensive research on businesses facing chaotic situations and came up with a set of core behaviors that are practiced with perseverance throughout success stories. The behaviors are shown below in the pyramid of core behaviors.

pyramid of core behaviorsLet’s take a look at what these behaviors mean from the business point of view and also sketch some implementation strategies for them.

read more
Category: Events | Inside 1&1 | People | Technology & Development
0 comments0

Flying High Above Turbulences In Software Development (Part 1 of 2)

The past few years have taught business owners everywhere that predictability is a thing of the past. Whether they learned it the hard way, or were among the survivors of repeated turmoil, everybody from team members to CEOs is aware that uncertainty is the new “normality” and world class researchers already recognized the “chaotic” economic model as the status quo.

Reasons that led to this reality include globalization, the unprecedented expansion of the Internet and other networks and the lightning speed at which information spreads, as a direct consequence of permanent connectivity. Today’s bleeding-edge technology is mainstream by tomorrow, only to become obsolete just as fast and maintaining a competitive advantage is harder than ever.

read more
Category: Events | Inside 1&1 | People | Technology & Development
0 comments0

ShipIT Day @ 1&1 Internet Development – eCommerce Department Romania. From idea to practice

ShipIT Day @ 1&1 Internet Development. From idea to practiceThis is how the event started and this is what we’re expecting for its outcome!

Long history short…

The Ship It Day concept has been designed by Atlassian to give its employees the chance to work on anything that relates to the company products and deliver it during the 24 hours of the event. This came from the necessity of fostering the creativity, proving a different opinion, moving faster and increasing the work environment attractiveness.

Hmmm… seems familiar… and even more, we’re thinking that it also helps strengthening the teams and increasing the quality of the collaboration.

Game rules…

read more
Category: Inside 1&1 | People | Technology & Development
0 comments0

How to organize your work with KanbanFlow

You find it hard to follow up with your responsibilities? Having problems organizing your daily tasks? Your memory is not always helping you? Not anymore!

Whether you’re familiar or not with the Agile methodologies, Kanban can (and will) help you sort, prioritize and organize each of your responsibilities.

All you have to do is to create an account here and then start configuring your own board. It’s up to you to choose the appropriate approach. You can use one for yourself or you can share a board with your colleagues from the dedicated team.

read more
Category: Inside 1&1 | Technology & Development
0 comments0
show older posts