Solving obscure keyboard fail in Cordova

I’ve been working on a SPA which is built in Node.js and since, my team does not deliver products in native app programming, we use Cordova Apache to build the same product as an iOS app. This approach certainly helps us gain in time, but some deep problems are more difficult to handle. Because, one cannot edit constraints through Cordova platform and hence, some parts of the application remain as black-box for us. Such disadvantage causes trouble when we are not sure about the diagnosis of a defect. Just like the error log below:

Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger.
The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKitCore/UIView.h> may also be helpful.
2018-10-16 15:24:25.691893+0200 Unibok[70880:8601663] [LayoutConstraints] Unable to simultaneously satisfy constraints.
Probably at least one of the constraints in the following list is one you don't want.
Try this:
(1) look at each constraint and try to figure out which you don't expect;
(2) find the code that added the unwanted constraint or constraints and fix it.
(Note: If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints)
(
"",
"",
"",
"<NSLayoutConstraint:0x600003509130 'UIButtonBar.maximumAlignmentSize' _UIButtonBarButton:0x7f861b9324d0.height == UILayoutGuide:0x600002f05c00'UIViewLayoutMarginsGuide'.height   (active)>",
"<NSLayoutConstraint:0x600003542850 'UIView-bottomMargin-guide-constraint' V:[UILayoutGuide:0x600002f05c00'UIViewLayoutMarginsGuide']-(9)-|   (active, names: '|':_UIButtonBarStackView:0x7f861b948b10 )>",
"<NSLayoutConstraint:0x600003543070 'UIView-topMargin-guide-constraint' V:|-(10)-[UILayoutGuide:0x600002f05c00'UIViewLayoutMarginsGuide']   (active, names: '|':_UIButtonBarStackView:0x7f861b948b10 )>"
)

Because of the failure above, the keyboard on iPhone or iPad was not usable. Whenever the user touched on a textbox item (<-input->), the application actually triggered the keyboard interface, but the fail above conflicts some constraints and it crashed the keyboard. That was all about the fail.

I spent enough time thinking if this issue was related to some keyboard plugin like many people recommended. (ionic-plugin-keyboard vs. cordova-plugin-keyboard) But the solution was simpler than I thought and our implementation was more innocent than I doubted 🙂

SOLUTION

Recent radar ticket below opened the doors of clarification for me.

https://openradar.appspot.com/radar?id=5018321736957952

As Brent Dearth mentions in the comment, the entire defect was related to a fail in iOS 12.0. And the workaround is to remove your viewport-fit meta tag. The bold text shows the troubled code in my case:

<meta name="viewport" content="maximum-scale=1.0, initial-scale=1.0, user-scalable=no, viewport-fit=cover">

After removing the viewport-fit flag, the app worked on all iOS devices perfectly.

Sercan Leylek / OSLO

P.s. Thanks to Darryl Pogue on solving the issue here.

Angular 6 unexpectedly redirects in Safari

This has been a challenging issue that I came across this week. My web application is simply supposed to load some dynamic content after some button is clicked. It actually works fine on Chrome, Firefox and yes even on IE11. 🙂 However, the same app failed on Safari both on desktop and iOS. It was actually still loading the requested content, but was redirecting to the previous page instead of showing the content.

Safari inspect window showed no single error or warning, but Chrome inspection demonstrated the warning message below:

Form submission canceled because the form is not connected

Solution!!!

This warning encouraged me to re-evaluate the click event of the angular component. So, I noticed that my button was lacking type=”button” attribute. After inserting the lacking attribute, Safari stopped redundant redirection of the page and the warning message on Chrome disappeared. Just another happy ending!

Sercan Leylek / OSLO

How to ignore git commit errors?

I recently work with some 3rd party code and ran into an annoying failure which totally blocks me from committing my changes via git. I get a failure message “A number of errors found, aborting commit.”. And the screenshot looks like the picture below:

I understand that git is smart and it is persuading the developers to write –and commit– more responsible code. All these errors are simple fixes, but I have no time to go through someone else’s error pile. Plus, I know that the code is working.

So, how can I ignore git’s highbrow attitude and go around the issue?

SOLUTION

You need to include a magic keyword while you are committing. ‘–no-verify‘ will just ignore git’s list of errors and do the trick for you. See the example command:

git commit -m "Mannen og Muren rocks!!!" --no-verify

Sercan Leylek

Chrome vs. macOS Sierra Struggle

I recently upgraded my Mac to the version 10.13.1 and ended up with a weird error on my primary development tool that is certainly the most popular browser, Chrome.

Because of my work, I use postgres database and a local host which utilises https protocol. After the macOS Sierra upgrade, I had the following (and annoying) error which blocked my access to my local server.

However, the message I received did not contain a “proceed to” link. Therefore, I couldn’t access my local host as I always did.

I emptied the web cache, reset the application cache, deleted the service worker storage and tried the basic recommendations of Google (such as deleting the browsing history, etc…). None of them helped. On the other hand, my Safari browser was able to access the local host. So, there was no problem with my service, the issue was on Chrome’s communication with macOS Sierra 10.13.1.

Solution

Luckily, starting Chrome on unsafe mode proved my theory correct. Use the command below and bypass the issue.

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome –ignore-certificate-errors &> /dev/null &

Conclusion

My solution is unfortunately a temporary one. I didn’t want to waste more time by downgrading the macOS Sierra version. I hope the version 10.13.2 will fix it or maybe the newer version of Chrome will handle this buggy situation.

I experienced a similar situation on autoPlay functionality. Safari decided to block autoplay of video and sound objects, however Chrome will do the same on its January 2018 release. As a result, this experience has been another case where Safari is faster at implementing new features, but their web development tools cannot offer the quality of Chrome, yet.

Sercan Leylek / OSLO

 

Nordic.js > Day 2

Like all the good things, Nordic.js also came to an end – for now. Just like yesterday, I am going to write down the parts that fully got my attention during the day.

Claudia Hernandez: JS in Wonderland

This presentation made most people see a side of javascript that never thought before. Claudia Hernandez introduced the web-page JSFuck and before that, she showed us a js expression similar to the one below:

![]

When you give the above characters to your js console, what do you think the result will be? Let’s read it from right to left.

1. [] represents an empty array.
2. If you negate an empty array which is received as a true value by exclamation mark, the result will be false.

So, can you guess the value true? It shouldn’t be hard to guess:

!![] = true

As you may already guess, JSFuck approach abuses the quirks in javascript. In a more positive way, we may call this approach as the art of javascript coding by using only non-alphanumerical characters.

In the beginning of Hernandez’ presentation, all the effort looked like some meaningless puzzle game – and I guess that is also what she wants the audience to think in the early minutes of her presentation. But, this technique actually led to the discovery of a serious hack. Here is a quote from the talk:

So, some people actually managed to inject some javascript code by using JSFuck way of programming. That was unexpected! And Hernandez perfectly underlines the whole idea with her remarkable ending.

That’s the point about the science. We should keep on discovering by pushing the limits even though there is no practical use in short run.

And another valuable quote from her presentation:

Feross Aboukhadijeh: P2P

Here is another hard-to-forget presentation from this year’s Nordic.js. I think Feross Aboukhadijeh presented the most interactive speech of the conference with his talk about Internet’s itself and P2P technology. He firstly shared a quite clear view of what attributes should internet possess:

1. Resilient
2. No middlemen
3. Diverse
4. People Powered

But, is it really resilient, diverse and etc?

Feross shows that utopian internet model and modern reality do not really map. Internet is built to be a communication system to help its peers find an alternative way at the times of unavailabilities, but service giants stand in the centre of peers.

• If they fail, we all fail. (Resilience?)
• If they decide to halt a service, we have no right to speak up. (No middlemen?)
• If they are blocked in some country, we are also blocked. (Diverse & People Powered. I’d like to remind you that Wikipedia is still blocked in Turkey.)

I felt huge sympathy for the thoughts of Feross, because that is some idea that I’ve been working on for some time via my product Reservation.no which recently declared war to the giants in table booking system.

Feross also caused us see that URL is actually a bad thing 🙂

The L letter in URL stands for location. And if what you are looking for isn’t there, you will simply get a 404 error, although it is somewhere in the web.

That makes me think: Could or should URL be replaced in the future?

Ben Schwarz: Beyond the bubble

One cannot always give compliments to an event, right? Otherwise, there would be no point to improve things. The presentation of Ben Schwarz, ‘Beyond the bubble’, of course handled a critical accessibility issue. The founder of calibreapp, tutored us about the performance issues caused by the ignorance of developers and his stats also represented the status of internet accessibility for the majority of the world. However, most of these points were actually described with a more informative tone by Scott Jehl in Responsible Responsive Design (Chapter 4: Delivering Responsibly).

Despite my critical views, ‘Beyond the bubble’ still hits the target. The participants of the event will be more careful when they include their CSS/JS files from now on and many of them will behave more professionally at performance testing.

Final Comments

I regret that I am not able to mention the other speakers’ hard work, but I am sure that some other blogger/developer is writing about them. Big thanks to all speakers!

Also, I have a feeling that the second day of Nordic.js was more fun. Maybe that was because of the distributed performances of the hosts, Unn Swanström & Mattias P. Johansson. (Like live tattoo show, video call, etc…)

And, special thanks to the conference organisers: Jonny Strömberg, Martina Elm and Johannes Edelstam.

See you all next year!

Sercan Leylek / Stockholm

Nordic.js > Day 1

Hello from Nordic.js,

I am happy to write from one of the most important web-development conferences in Scandinavia. The event takes places in Stockholm this year and the first day is already over. Most people join this conference with their colleagues and we should surely say that the organisation is quite international. For those, who has no idea about what Nordic.js is, I copied down some intro-text from event’s official website:

Nordic.js is a two-day conference all about JavaScript. We want to inspire and to get inspired, to meet and learn from others and to bring our community closer together.

And here is a picture from the opening session!

One of the most important metrics to measure the quality of a conference is to see how much you are able to remember after the event. So, I list down some of the memorable experiences that I got here on my first day.

Sacha Greif’s Survey: The State of Javascript

The State of Javascript is an online survey performed by the creator of VulcanJS, Sacha Greif. His survey aims to see the changing trends of JavaScript libraries. The survey checks which libraries become more popular among the developers and also monitors those which do not promise a bright future.

Sacha Greif publicly shared the 2017 survey results for the first time at Nordic.js event and one of the results there particularly caught my attention. We recently started a training program on Angular, but his survey indicates that Vue.js library makes a visible move into Angular’s territory. People migrate from Angular to Vue.js because of complexity issues.

Tomasz Ducin’s Advice on Asynchronous Calls

Ducin‘s session had additional importance for me and my colleagues, because we got a lot to do with asynchronous calls on one of our major products. He mentioned the critical differences between the functions such as .all(…), .race(…), .any(…), .some(…).

And Ducin’s advice at the end of his speech is worth to remember:

For a single async operation, a promise is enough.

For a combination of different operations – use async await.

But if something is repetitive – make it an observable stream.

Sacha Greif and Tomasz Ducin were the first two speakers of the event and I met them both during the day for my questions. Luckily, Jesse Rosenberg (core developer on MeteorJs) joined our conversations, too. We all use some open-source libraries and I am sure very few of us donate to the creators and contributors. I asked them how a common library developer makes money. Tomasz Ducin said that creating a popular JavaScript library provides quite serious recognition and hence, one can work as a consultant for other companies.

Fast Track

I’d rather listing some of the other important experiences and information that I got today:

• I’d like to heartily congratulate Nordic.js organisers for helping us meet Leonie Watson who helped us think and care more about accessibility issues of blind users. Thanks to her speech Accessibilty Object Model is in my to-study list now.
• Rachel Andrew‘s presentation on CSS/Grid issues made me write down a lot of notes. Learning that fr unit may replace percentage in width/height attribute was a privilege. And here is a quote from her speech: ‘Feature queries will be your new best friend’.

• I didn’t know that Javascript was actually built by a committee called ECMA International and any developer could take a part in testing (See: Test262). A big thanks to Myles Borins. Every minute of his presentation got my focus.

Summary of the day

The first day was full of ideas, networking and information exchange. The organisation is neat and things happen timely. I am definitely not impressed by the food, but that was expected 🙂

Sercan Leylek / Stockholm

Object doesn’t support property or method ‘foreach’

I came across with this error while performing some cross-browser tests after my recent implementation. I noticed that forEach javascript function works well on popular browsers like Chrome and Mozilla Firefox, but it fails on Internet Explorer. Hence, you eventually face with the following error: Object doesn’t support property or method ‘foreach’.

Therefore, I replaced the forEach usage with $.each(…). See some sample below:

Code failing on IE & Edge

document.querySelectorAll('#slideInContent h2').forEach(function(h2) {
...
});

Successful translation

var h2_elements = document.querySelectorAll('#slideInContent h2');
$.each(h2_elements, function(i, h2) {
...
});

Sercan Leylek / OSLO

Drop File out of the box issue

Certainly, there are many file upload tutorials around the web, but I noticed a small issue on these examples. While I was working on the implementation of my file upload (Drag & Drop) case, I struggled with drop out of box issue. Of course, there are many ways to tackle this problem –depending on your technology set-, so I will cover the basic understanding of the solution. But, before doing that, we’d better clearly explain what I mean by ‘drop out of the box issue’.

Definition of the bug

The gif below is a fine illustration of expected user behaviour on drag & drop operations, but what if the user drops the file outside of the predefined box?

Source: https://css-tricks.com/drag-and-drop-file-

If this exception is not handled, your browser will basically show the dropped picture from your local and the browser will point to the address of your file in its local address.

Solution!

The reason is simple: As you might already know, you should be using preventDefault() and stopPropagation() methods in Javascript.

And expectedly, you will remove/add some CSS class as the user hovers over and out of the dropbox (dashed area). So, if you limit your event target only for the dropbox, outside of the dropbox area will not trigger preventDefault() and stopPropagation() methods. And hence, when you drop the file outside of the box, the rest of the page will act upon the default behaviour. As a result of these inputs, we need to follow two basic points for our solution:

1. Make sure that your event handle does not only handle the dashed area (dropbox)
2. Use hover CSS to figure out if the file is dropped into the correct place

Key line for the solution

Highlighted code line above does the check mentioned in the 2nd statement above. This piece of code runs when the drop event is triggered. And the translation is as follows:

If the dropped area does not have “is-dragover” class, do nothing!

Last Word

Drop out of box bug is definitely the result of a negative testing approach. If you do not handle this exception, your interface will still work but we do not want barely working product. This bug fix will increase the quality of your file upload interface and increase user satisfaction.

Sercan Leylek / OSLO

.val() or .text() method on Textarea

Self note!

Don’t ever use .text() method to get the text value of textarea element in Jquery. It is not stable. Use .val() method instead.

Using json_array_elements() on Postgres

I noticed that there are very few examples of Postgres json_array_elements() and hence, we have this small post published. While writing queries for JSON data field, I’d recommend you to use an online JSON viewer website like jsonviewer.stack.hu. This tool will help you see the structure of the content that you are working on. See the example below:

Raw Json Data

Structured Json Content

As you see above, json content can be represented in various object structures. We can see the content as object value or as array content. Certainly, we need different methods to be able to query array and object structures. Before showing the first SQL, let us underline a few assumptions:

• Database table name: publications
• Json data column name: properties
• And consider that publications table contains only one raw – which is above.

Now, let’s see this simple query:

SELECT properties->>’sortOption’ FROM publications;

Query above will return “subjectArena” value. Why? Because, we are referencing the values labeled via “sortOption” tag and since we have only one row in our table, “subjectArena” string value will be returned by the query. And yes, you should be careful with the syntax. ‘->>’ command is used for string reference, and the tag name should be stated between apostrophe characters. (properties->>’sortOption’)

sortOption and publisherTermsAccepted tags are part of the object structure, but how about the availableOrganizations section? This is an array structure and you cannot access this query via simple referencing. Therefore, we should use json_array_elements() function.

SELECT json_array_elements(properties->’availableOrganizations’) FROM publications;

And this query will return the following values:

123

456

789

As you might have already noticed, we refer to the array (availableOrganizations) via ‘->’ command. This command is used for object pointing, as ‘->>’ is used for string reference. See the document here for more operators: www.postgresql.org/docs/9.3/static/functions-json.html

Sercan Leylek / OSLO