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.
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.
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.
[] represents an empty array.
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:
!![] = trueAs 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:
Resilient
No middlemen
Diverse
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.
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 🙂
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:
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?
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:
Make sure that your event handle does not only handle the dashed area (dropbox)
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.
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 DataStructured 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
AdminLTE is a great template for online admin panel systems and the template provides a huge range of needs. See the template here: almsaeedstudio.com
Among other handy components, AdminLTE provides the following calendar box.
Of course, when the user clicks a date, there should be a way to pick this content. I looked around the web if somebody else already blogged about the same problem, but saw none. After quite thorough html source investigations, I realised that AdminLTE uses datepicker-switch class in table headers (<th>). So, the issue was solved for me. The rest is jquery code and call to the related php files.
/*
The following function is triggered when a calendar day
is clicked by the user. Corresponding box item (Agenda)
will show all reservations for the specified date and it
should also update the Capacity value under the calendar box.
*/
$(document).on('click', 'td.day', function() {
var month_and_year = $("th.datepicker-switch").html();
var day = $(this).text();
var picked_date = day + ' ' + month_and_year;
var myData = 'picked_date=' + picked_date;
jQuery.ajax({
type: "POST",
url: "./backend_php/reservation/list_reservations_of_active_date.php",
dataType:"text",
data:myData,
success:function(response){
$("#todays_agenda_content").html(response);
},
error:function (xhr, ajaxOptions, thrownError){
alert(thrownError);
}
});
jQuery.ajax({
type: "POST",
url: "./backend_php/reservation/update_capacity.php",
dataType:"text",
data:myData,
success:function(response){
$("#progress_bar_respond").html(response);
},
error:function (xhr, ajaxOptions, thrownError){
alert(thrownError);
}
});
});
Sercan Leylek (29) fra Tyrkia er blant dem som ble kåret på Topp 10-listen til Leadership Foundation i fjor høst over innvandrere som er forbilder for andre fordi de har gjort det skarpt på sine områder.
Han kom til Norge som 22-åring, ferdig utdannet som webutvikler og software-ingeniør. Etter tre måneder som trainee, fikk han fast jobb i et Oslo-basert firma.
Leylek er aktiv samfunnsdebattant, forfatter, engasjert i innvandrerspørsmål og holder kontakt med det tyrkiske miljøet i Oslo. Han nikker gjenkjennende til det undersøkelsen viser.
– Dessverre er det nok sånn at en 15-åring som innvandrer med familien sin fra Tyrkia, vil ha kommet kortere i sin utvikling som 18-åring her i Norge enn hvis han var blitt boende i hjemlandet, sier han.
Føler seg hjelpeløse
– I Tyrkia skjer utviklingen raskere enn i innvandrermiljøet her i landet. Her er foreldrene altfor opptatt av å beskytte familiens tyrkiske identitet, og mange gir ikke barna nok motivasjon til å ta utdannelse. De har for få ambisjoner på barnas vegne, mener han.
Han mener 90 prosent av barrièrene innvandrerungdom møter, skyldes foreldre og bakgrunn – bare ti prosent skyldes samfunnet.
Leylek ser at mange tenåringer som kommer hit, føler seg hjelpeløse og gjør store anstrengelser for å klare skolen.
– Da trenger de foreldre som gir dem en «boost», og ikke stopper dem, sier han.
I’ve just come over another time consuming and perfectly annoying issue, so I decided to drop this post.
My following jquery command was keep returning ‘undefined‘ value for no good reason.
JQuery part:
var comment = $('textarea#' + telephone_nr).val();
HTML part:
<textarea id ="9801213">
As you guess, I used the telephone number value as my identifier to access the value in textarea item, but although I tried a number of methods, I didn’t manage to get the correct value. Weirdly, the internet is full of wrong information for this error. Many sites claim that textarea item has no .val() function or value attribute. (<<< This is highly wrong info. Textarea item has .val() function. )
In about half an hour, I tried the following piece of code because of some adviser website:
var comment = $("textarea")[0].value;
The code above actually functioned (Pay attention! I didn’t say it worked, it only functioned). Certainly, this is not a solution for me. Because I don’t want to access the textarea item in an array, I want to be able to access these values dynamically.
FINAL SOLUTION
After a few more attempts, I realised that the issue must be related to the id value. My project puts too much trust in telephone number value as primary key, and cause I created some other html items (like textbox, anchor, etc…), somehow I created a confusion while accessing the correct item. I still don’t know why this happened and I assure you there is only one textarea item with a unique identifier.
However, I solved the issue by altering the id attribute of my textarea items.
JQuery part:
var comment = $('textarea#tel_' + telephone_nr).val();
HTML part:
<textarea id ="tel_9801213">
Making sure that id value has a unique value worked. That’s it.
What’s next?
I actually encountered this issue while implementing my last work. I’ve been building a restaurant reservation system and textarea field will keep the comments of the restaurant manager for his/her clients.
I will most likely encounter more trouble while working on this product, and naturally, there will be more posts. Stay tuned!
![!![] = true](https://storksnestblog.files.wordpress.com/2017/09/screen-shot-2017-09-09-at-00-05-43.png?w=720)
