Learning React – Vol.2

Last week, I went through the solutions of the first three tasks at tic-tac-toe game tutorial. This time, I will cover up the rest. Please see the list of tasks again:

1. Display the location for each move in the format (col, row) in the move history list.
2. Bold the currently selected item in the move list.
3. Rewrite Board to use two loops to make the squares instead of hardcoding them.
4. Add a toggle button that lets you sort the moves in either ascending or descending order.
5. When someone wins, highlight the three squares that caused the win.
6. When no one wins, display a message about the result being a draw.

If you’d like to take a look at the initial article, please check this one out.

Task #4 Add a toggle button to sort the moves

I must admit that I struggled with this task a bit, because I couldn’t make my mind whether I should reverse the history in this.state or in a copy of history array. After my first implementation, I realised that things get fuzzy when you mingle with the state quite often. Because, making changes in the state side-effects the other functions inside Game.js. So, I threw away my first code and followed a brand new plan.

To start with, we definitely need a new state attribute for the sorting choice. I added it to my constructor with default value ascending.

Add this.state.sortASC to the constructor of Game.js

 

We surely need a new function to toggle the sorting direction. This function will be called each time the user clicks on our sort button. So, I added toggleSort() inside Game component.

Add toggleSort() function

It is time to make some changes at rendering now. Since I do not want to reverse this.state.history, I get a copy of history and reverse it if sorting direction is descending. Also, please note that I also reverse the move value inside map(step, move).

Get a copy of history and reverse the copy

Next change inside the render creates our toggle button. I have been too lazy to add some SVG images and work on CSS. Therefore, I used UTF-8 arrows 🙂 And do you remember the toggleSort() function? This is a good time to use it.

Implement sortButton with an arrow

The last snippet is a piece of cake.

Add sortButton and use unordered list if you like

Ta taaa!!! Below is the outcome. If you’d like to see the commit, click here.

Tic-tac-toe game with sorting

Task #5 When someone wins, highlight the three squares that caused the win.

As we go further, the tasks become a bit more challenging. So, this implementation requires changes on all components. I will follow bottom to top approach. That means we will see the implementation sequence as following:

1. Square.js
2. Board.js
3. Game.js

Square component is called by Board and it is responsible of rendering the boxes. Assume that Square.js receives an additional prop parameter which is boolean. And this input helps rendering the given box with gray background color or not. See the code below:

Add winnerSquare className if the boolean is true

And we certainly make this minor change inside index.css.

index.css

After these changes, we are done with the Square component. The next stop is Board. Let us first establish our previous assumption for the Square. Consider that renderSquare() function will pass the boolean to the Square.

renderSquare should get a second input: winnerSquare

And our createTheBoard() function still calls the previous function inside two for-loops. Assume that we have a handy function which figures out if the current square box is a winner box. So, call it accordingly.

this.isWinnerSquare(arrayPos)

And it is time to keep our promises again. Implement isWinnerSquare(). But see that we again make a new assumption here. Assume that Board will receive the winner coordinates from Game.js. If the coordinates are null, boolean is false. If current square box position is one of the winners, boolean is true. Simple huh?

“If you can’t write it down in English, you can’t code it.” – Peter Halpern

Implement isWinnerSquare(…)

We are about to finalise the implementation. calculateWinner(…) knows which lines are the winner squares. Instead of returning the name of the winner, it’d better start sending an object which keeps both the coordinates and the winner name.

calculateWinner will send the coordinates and the winner name.

As the final touch, I edited the use of winner object and the result is astonishing 🙂 See the commit here.

When someone wins, highlight the three squares that caused the win.

Task #6 When no one wins, display a message about the result being a draw.

The last task is kind of easy. I see that the draw happens when all squares have some X or O value, but the calculateWinner function yet does not return a winner. So, I insert my check inside the if scope:

Game is a draw

If you are curious about the commit, check it here. And below is the final output of our tic-tac-toe game:

Enhanced version of tic-tac-toe game

As you see, the winner of the last game is neither X or O, because the real winner is YOU who puts effort to learn React.

Sercan Leylek / OSLO

Learning React – Vol.1

Let me start the article with a cliché: Programming is learnt by practice. It is an oldie, but goodie. OK! I stop here. Two cliché for one article is more than enough.

Like many front-end developers, I also decided to take my chances with React and I wanted to push myself with some ambitious example where Firebase database and many other things involve, but after a while, I paused this project and aimed for some assisted tutorial.

At this point, I came across a tutorial on React’s official webpage. It is a tic-tac-toe game and the tutorial process goes quite smooth. The steps that you follow help you see the philosophy of React and shows you the way of doing things in a smart way.

Even though you only type what the mentor is asking you to do, this tutorial is still handy, because it gives you room to practice. And the exciting thing about the tic-tac-toe tutorial is the TO-DO list at the end of the lesson. These tasks encouraged me to enhance the game and I am currently down with the first three. See the full list of tasks below:

1. Display the location for each move in the format (col, row) in the move history list.
2. Bold the currently selected item in the move list.
3. Rewrite Board to use two loops to make the squares instead of hardcoding them.
4. Add a toggle button that lets you sort the moves in either ascending or descending order.
5. When someone wins, highlight the three squares that caused the win.
6. When no one wins, display a message about the result being a draw.

In this article, I assume that you have already followed the tutorial till the end and if you struggles with one of these tasks, I will share my solutions with you. Also, if you think my suggestion is not good enough, let me know how I can improve it.

Task #1 Display the location for each move in the history list.

As expected, we start with the simplest one. The challenging part here is to decide how column and row values should be stored and I hope you guess the answer already. Yes! We should create two new attributes inside this.state.history (Game.js). See the constructor below:

Adding row and col attributes

Certainly, that much is not enough. We should make some changes inside handleClick(…) as well. Each time a player clicks on the board, handleClick function is triggered. The changes below shows how we calculate the row and column values via array index.

Calculate row and column values

And we should also store the coordinate values for each move inside this.history.state. To do that, we make some modifications in history.concat(…).

Store the coordinates for each move

We are almost done. Currently, our tic-tac-toe game is able to save each move’s coordinates, but it doesn’t output to the user. Therefore, we will simply benefit those values inside the render.

That was it. If you’d like to check this commit, click here. And the gif below shows the current outcome.

Task #2 Bold the currently selected item in the move list.

Task number 2 challenged me a bit. It was actually easy to fix, but I didn’t feel peaceful after my first commit. I was sure that I should find my way through this.state.stepNumber, but my solution had some code duplication. See the first commit below:

My first commit for Task #2

As you see above, I compare the current move index with the stepNumber and add some CSS class inside the render. (selectedMove = fontWeight: bold) I apparently didn’t know what to do with the second <li> block. Also, this commit caused showing bold text on latest move as well. That wasn’t what I was expected to do. I should’ve shown the last clicked button with bold text, not the latest one all the time. See the result gif of the first commit:

The result of first commit

I got a better idea on the next day. Why not using a variable for the className? And also ignoring the CSS where history.length equals the current move number? I reorganised the code accordingly. See the commit here:

Task #2 – Improved solution

And the output is nicer 🙂 Now the move becomes bold only when the user clicks on it and the code has no redundant duplications.

Task #3 Rewrite Board to use two loops …

To solve this problem, I needed to get some help from Google, because I didn’t know how to return html code from a function. Let us remember how our Board.js rendering was implemented:

Rendering on Board.js

Apparently, the code snippet above does not promise any flexibility and it is a trap for typos. (It happened to me 🙂 See it here)

So, we clearly need a function inside Board.js to help render look tidy. Therefore, I wrote a new function called createTheBoard(). We go through the rows and columns to render the squares and at the end, an array of html content is returned. See the last commit here.

Shorter render means longer life 🙂

Conclusion

I highly recommend to start with the default tutorial page of React. For example, learning that “this.state should be considered as private to a React component that it’s defined in” was a huge enlightenment for me.

Tic-tac-toe tutorial will help you understand fundamental concepts of React world and it also gives you room for improvement. I will hopefully solve the following tasks (#4, #5, #6) soon and post it. Until then, ha det bra!

Sercan Leylek / OSLO

PHP 7 Migration Challenges and Fix Tips

Php 7 Migration is still a hot issue for developers around the globe. Some host providers already completed the process, but many others are still lacking behind. Therefore, it is good to share some wisdom and technical tips that will help random PHP citizens around the world.

I see two major parameters that should be carefully considered in the beginning of this tough marathon and they are reusability + versatility.

Reusability

Everyone should agree the equation below:

Reusability = Time = Cost

We all wrote our PHP 5.0 code some time ago. Our frontend applications are built on top of it and those PHP programs worked fine in the dungeons of our CMS. Now, we have to change the architecture of the underground facilities, but remember! The old code provided the expected results and all we want is to keep it the same. Because, the old code is reliable and well-testet over time. Integrating the failing parts to the newer version of PHP is sufficient. As a result of these, we don’t aim for rewriting of classes, we aim for catching and fixing the integration issues. This is a search & destroy mission. Although this strategy failed in Vietnam War, but never mind.

Search & Destroy mission php 7

Versatility

This will be a long process for most of the developers and since you are working in short sprint cycles (say 3 weeks), at least half of your migration commits will be delivered to the production server which still runs on PHP 5.0. One may disagree with this approach by saying:

‘Nope, we will keep the migration commits on a different git branch and when all tests are complete and sufficient code coverage is reached, we will merge these two branches.’

The decision is certainly up to you, but I wouldn’t recommend this method. Because, there will be surely some conflicts after this big merge operation and the outcome will not be as reliable as you think. Therefore, I recommend to follow another path: Make sure that your fix commits works both on PHP 7.0 and PHP 5.0.

Do not merge your branches at the end of the process like Moses did

Fatal Error Examples and Solution Tips

EXP-1: “Fatal error: Uncaught ArgumentCountError: Too few arguments to function…”

We start with a popular one. You will see this error message when one of your php functions is using a default argument. See the example function below:

public function myFunction($array1, $array2) {
    if (!$array2) {
        $array2 = array();
    }
    return count($array1) + count($array2);
}

The simple php function above expects two arrays as arguments and it returns the sum of array sizes. myFunction will work fine on PHP 5 even though you pass only one array, but the same call will give a fatal error message on PHP 7. Because, PHP 7 does not automatically assign a relevant default value on undefined arguments like PHP 5 does. Therefore, we should edit the function as following:

public function myFunction($array1, $array2 = array()) {
    if (!$array2) {
        $array2 = array();
    }
    return count($array1) + count($array2);
}

By assigning an empty array to the second argument, we let the function run both on PHP 5 and PHP 7.0. The same error message will occur when the second argument is a string, integer or an object. Then, we should use the relevant default value in syntax. For example, empty string “”, 0 or NULL values can be used accordingly for default initialisation.

You may end up getting the same error on redundant argument declaration. For example, $array2 might be declared in the function signature, but it might be actually never used. Certainly, this is the simplest case. Just delete the redundant argument and get over with the refactoring.

EXP-2: “Deprecated Methods with the same name as their class will not be constructors in a future version.”

The error message above already explains a lot, but seeing an example code excerpt is definitely enlightening:

class CafPage extends myPage {
    function CafPage($tid, $view_id, $title, $site) {
        $this->myPage($tid, $view_id, $title, $site);
    }
}

The error apparently triggers in the constructor. PHP 7 does not like using the same name on both the class and the constructor function. Therefore, the same function should be edited as following:

class CafPage extends myPage {
    function __construct($tid, $view_id, $title, $site) {
        $this->myPage($tid, $view_id, $title, $site);
    }
}

This fix will run on PHP 5 and 7 without any issues. Remember: Versatility!

EXP-3: “Non-static method … should not be called statically in …”

I witnessed this error message in a function call similar to the one below:

return UserdataHelper::runTemplate('bla-bla.php');

It seems PHP 7 was not happy with :: reference on non-static methods. Therefore, I firstly initiated the caller object and triggered the runTemplate function by arrow object operator (->).

return (new UserdataHelper)->runTemplate('bla-bla.php');

And Eureka! It works!

Conclusion

Three example error messages are handled in this post. These are the frequent error types that I came across during our migration process. Above all, the sneakiest php errors are those which do not output a fatal error message. These issues usually occur when an ajax call refers to a php function and they are harder to find out. So, most secure testing method is of course validating the expected functionality of your web-application.

Sercan Leylek / OSLO

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