Setting up a serverless infrastructure with AWS. API Gateway + AWS Lambda + AWS SQS

The idea: to have a system where we don’t have to worry about the implementation specific details of a solution. We’re going call an API which triggers a script that adds items to be elaborated to a queue.

Creating an AWS API Gateway

Continue reading Setting up a serverless infrastructure with AWS. API Gateway + AWS Lambda + AWS SQS

Amazon API Gateway: how to deploy and stage a newly create API

Went through the trouble of creating a new Amazon API gateway and now you seem unable to find where the invoke URL is defined? If yes keep reading.
Even reading the docs it takes a long time if you are not familiar with the confusing Amazon UI.

Continue reading Amazon API Gateway: how to deploy and stage a newly create API

How to run a search and replace with regex group capture substitution in VIM

Problem: you have a very large string to search and replace.
You want to use a regex for that (probably it is also the only way).
You want to use VIM.

To search across the whole file in VIM you need:

:%s

Then you want to add a regex, and since you want a group you have two options: escape all the parenthesis which I don’t want or use the special VIM very magic mode: \v.

Now you search for the group on the main part of the regex and substitute in the second:

:%s/\v(\w)/\1HELLO/g

This way you can export them all. In my case, I had a very large file (SQL Dump) where I had to convert binary values to use utf8mb4, so I wanted to run this:

:%s/\v(X'[^,\)]*')/CONVERT(\1 using utf8mb4)/g

Seeding a DB for testing purposes with Laravel and cross-references

  • Create a custom factory to fill up the data correctly
  • Call the factory with the right parameters depending on the status from the seeder
  • Fix the problems that are going to show up because of data structure.

Continue reading Seeding a DB for testing purposes with Laravel and cross-references

How to display fontawesome icomoon and font icons on a Windows 10 with blocked untrusted fonts

Windows 10 has a mode to disable font-loading from external sources, such as emails when the font has to be fetched outside of the installed fonts. This feature is meant to prevent from attacks coming from untrusted fonts.

The icons in our UI are made with a font file. We used icomoon, but if Windows 10 is set up with the same set similar to projects like fontawesome. We use custom fonts with icomoon.

However, this brings problems with displaying our UI in Firefox and IE11.

How can we solve this problem? The Microsoft recommended way it is to either install the font in the system or whitelist the application that needs that font.

We thought of three ways, at least initially:

  • Install the font
  • Use an SVG file
  • Propose the customer to whitelist the browser to let them use our app. This is the last option as it would make the setting less secure.

Continue reading How to display fontawesome icomoon and font icons on a Windows 10 with blocked untrusted fonts

How we fixed dialogs from being read incorrectly in JAWS

In textbox.io dialogs we had a problem with the word count dialog. In particular what was happening is that JAWS would read the whole dialog and then start reading the rest of the document, like if the dialog was not blocking the UI.

The code looked like the following:


<div aria-describedby="ephox-aria_364273060451471304240619" aria-label="Word Count" aria-labelledby="ephox-aria_766513384441471304240617" class=
"ephox-polish-dialog ephox-polish-dialog-wordcount ephox-polish-dialog-narrow" role="dialog" tabindex="-1">
  <div class="ephox-polish-top">
    <span class="ephox-polish-dialog-title" id="ephox-aria_766513384441471304240617">Word Count</span><span aria-label="Cancel Dialog" class=
    "ephox-polish-dialog-close" role="button" tabindex="-1"></span>
  </div>
  <div class="ephox-polish-dialog-content" id="ephox-aria_364273060451471304240619">
    <table class="ephox-polish-tabular ephox-polish-wordcount-table">
      <thead>
        <tr>
          <th scope="col">Count&nbsp;</th>
          <th scope="col">Document&nbsp;</th>
          <th scope="col">Selection&nbsp;</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Words&nbsp;</td>
          <td class="ephox-polish-wordcount-document-words">402&nbsp;</td>
          <td class="ephox-polish-wordcount-selection-words">0&nbsp;</td>
        </tr>
        <tr>
          <td>Characters (no spaces)&nbsp;</td>
          <td class="ephox-polish-wordcount-document-charsnospaces">2486&nbsp;</td>
          <td class="ephox-polish-wordcount-selection-charsnospaces">0&nbsp;</td>
        </tr>
        <tr>
          <td>Characters&nbsp;</td>
          <td class="ephox-polish-wordcount-document-chars">2994&nbsp;</td>
          <td class="ephox-polish-wordcount-selection-chars">0&nbsp;</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="ephox-polish-dialog-controls"></div>
</div>

Also, in the JS we were focusing the table and adding a key handler for keyboard navigation. This would be picked by AInspector, the tool we use for testing if all the attributes are set normally. The reason why AInspector was complaining it is that the table has a role by default as a data-table and it doesn’t expect any key handler. We removed the key handler from the table and left only the one on the outer dialog, to keep actions such as ESC to close the dialog.

However at this point JAWS would not read the dialog fine anymore: the dialog would result in being read twice, and once the reading would be done it would start reading the rest of the document. In our case, it would start reading the editor toolbar.

In the past, we had a data-table with roles and attributes, e.g:


<table role="grid"><tr role="row"><td role="gridcell"></td></tr></table>

Which is incorrect since the table is already a grid by default. To be semantically correct we tried then to convert the table to a table made of divs, obtaining a table like:


  <div role="grid" class="ephox-polish-tabular-table ephox-polish-tabular ephox-polish-wordcount-table">
    <div class="ephox-polish-tabular-group">
        <div class="ephox-polish-tabular-row" role="row">
            <span class="ephox-polish-tabular-cell" scope="col"> ${headerCounts}&nbsp;</span>
            <span class="ephox-polish-tabular-cell" scope="col"> ${headerDocument}&nbsp;</span>
            <span class="ephox-polish-tabular-cell" scope="col"> ${headerSelection}&nbsp;</span>
        </div>
    </div>
    <div class="ephox-polish-tabular-group">
        <div class="ephox-polish-tabular-row" role="row">
            <span class="ephox-polish-tabular-cell">${wordCountLabel}&nbsp;</span>
            <span class="ephox-polish-tabular-cell" class="ephox-polish-wordcount-document-words">${documentCountWords}&nbsp;</span>
            <span class="ephox-polish-tabular-cell" class="ephox-polish-wordcount-selection-words">${selectionCountWords}&nbsp;</span>
        </div>
        <div class="ephox-polish-tabular-row" role="row">
            <span class="ephox-polish-tabular-cell">${wordCountCharsNoSpacesLabel}&nbsp;</span>
            <span class="ephox-polish-tabular-cell" class="ephox-polish-wordcount-document-charsnospaces">${documentCharactersNoSpaces}&nbsp;</span>
            <span class="ephox-polish-tabular-cell" class="ephox-polish-wordcount-selection-charsnospaces">${selectionCharactersNoSpaces}&nbsp;</span>
        </div>
        <div class="ephox-polish-tabular-row" role="row">
            <span class="ephox-polish-tabular-cell">${wordcountCharsLabel}&nbsp;</span>
            <span class="ephox-polish-tabular-cell" class="ephox-polish-wordcount-document-chars">${documentCountCharsWithSpaces}&nbsp;</span>
            <span class="ephox-polish-tabular-cell" class="ephox-polish-wordcount-selection-chars">${selectionCountCharsWithSpaces}&nbsp;</span>
        </div>
    </div>
</div>

And styled as:


.ephox-polish-tabular-table {
  display: table;
  width: auto;
}

.ephox-polish-editor-container .ephox-polish-tabular-row {
  display: table-row;
  width: auto;
}

.ephox-polish-tabular-heading-cell,
.ephox-polish-tabular-cell {
  display: table-cell;
}

This way we would obtain the behaviour we wanted, we could put a key handler on the table, but then, AInspector wouldn’t see the table as a data-table anymore, therefore cells with values of 0, which are simply fine in a regular table are not seen as “unique”, therefore we had to find a better way to deal with it.

Next step in the resolution of this problem was having the div structure being able to be focused, so we have:

  • Removed the key handler
  • Added a tabindex=”-1″
  • Focused the table

Result: nothing. JAWS would still read the whole table and then the content, so scrap that.

Next thing we tried has been to focus the “Cancel button”, to try stopping JAWS from reading the outer content while still reading the table contents.
Result: JAWS would just read the title of the dialog and announce the close button.

At this point since it is stopping at the cancel button, we might just add a button at the bottom of the dialog, such as an ‘OK’ button, which action would simply to close the dialog.
Result: JAWS would just read the button once again.

At this point we had an illumination:

  • Set a tabindex=”-1″ on a real data-table
  • Focus the table when the dialog opens without putting any keyhandler, while leaving the outer one for the dialog

The markup of the table would look like the following:


<table class="ephox-polish-tabular ephox-polish-wordcount-table" tabindex="-1">
    <thead>
        <tr>
            <th scope="col"> ${headerCounts}&nbsp;</th>
            <th scope="col"> ${headerDocument}&nbsp;</th>
            <th scope="col"> ${headerSelection}&nbsp;</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>${wordCountLabel}&nbsp;</td>
            <td class="ephox-polish-wordcount-document-words">${documentCountWords}&nbsp;</td>
            <td class="ephox-polish-wordcount-selection-words">${selectionCountWords}&nbsp;</td>
        </tr>
        <tr>
            <td>${wordCountCharsNoSpacesLabel}&nbsp;</td>
            <td class="ephox-polish-wordcount-document-charsnospaces">${documentCharactersNoSpaces}&nbsp;</td>
            <td class="ephox-polish-wordcount-selection-charsnospaces">${selectionCharactersNoSpaces}&nbsp;</td>
        </tr>
        <tr>
            <td>${wordcountCharsLabel}&nbsp;</td>
            <td class="ephox-polish-wordcount-document-chars">${documentCountCharsWithSpaces}&nbsp;</td>
            <td class="ephox-polish-wordcount-selection-chars">${selectionCountCharsWithSpaces}&nbsp;</td>
        </tr>
    </tbody>
</table>

And this has actually made AInspector happy, as we were using an actual data-table, without useless attributes. Also, JAWS started reading the table just fine stopping at the end of the dialog.

Hope this will be helpful for someone!

Finding the real position of an element with respect to the document

The first attempt when trying to get the position of an element with respect to the document has been to use the getBoundingClientRect method.

Element.getBoundingClientRect and Element.getClientRects

Continue reading Finding the real position of an element with respect to the document

Understanding MouseEvent properties clientX and pageX

I am working in a section of the application which is going to require the user to be able to do a number of different operations. What I need to use for this are different kinds of MouseEvent properties, however it is important understanding them to use them in the most effective way.
Continue reading Understanding MouseEvent properties clientX and pageX