Back to top

20 posts tagged with "javascript"

Introducing the Intersection Observer V2 ⛌

As I mentioned in one of my other posts, Intersection Observer will report when an element appears in the viewport, after applying all overflow and CSS clips. However, there is no way currently to find out whether an item is being put on top of this element, or some filter is applied to it which may alter or obscure the element’s display.

PublishedJun 22, 2020
Time to read3 min
showdevwebdevjavascriptRead more

Did you know about scroll to text? 📜

You probably have used fragments in links to point a link to a part of your page such as a heading. This technique is used in table of content for example and it’s a common pattern.

PublishedJun 14, 2020
Time to read3 min
showdevwebdevjavascriptRead more

Links and JavaScript 🔗

I see some occasions where web developers who are a bit less familiar with accessibility use links incorrectly in different forms. So I thought let’s write a quick guide on Links in JavaScript apps.

PublishedJun 03, 2020
Time to read5 min
showdevwebdevjavascriptRead more

Swapping variables in JavaScript 🔁

There may be many different reasons why you’d want to swap two variables be it just changing two item’s location in an array or when sorting collections. The traditional way is just define a new variable, assign one value to it, put one of the items in the old place, then put the temp variable back in the new place. But my question is, is that the only way?

PublishedMay 15, 2020
Time to read3 min
showdevwebdevjavascriptRead more

All you need to know about string in JavaScript 🧵

String is one of the primitive types in JavaScript and we use it in every project we work on no matter what. But how familiar are you with the methods available in JavaScript to work with a string variable? Let’s have a quick look at those in this article.

PublishedMay 11, 2020
Time to read12 min
showdevwebdevjavascriptRead more

Let's sort with JavaScript 🔢

There are many different sorting algorithms out there such as quick sort, merge sort, insertion sort, bubble sort, etc., that could be useful in our day to day life, writing code which gets shipped to production. Knowing all of them is not necessary, but if you have a basic understanding of each one, you can decide on the most efficient one for your scenario.

PublishedMay 03, 2020
Time to read9 min
showdevwebdevjavascriptRead more

Have you ever thought about for loops? ➰

Using a loop is almost a must in our day to day life. But have you ever thought what kind of loop should you use? Do you know the difference between enumerables and iterables? This article sheds some light in this space, so read on if you’re interested.

PublishedApr 24, 2020
Time to read3 min
showdevwebdevjavascriptRead more

Stop using `console.log`, start using your DevTools 🛠️

There are many situations where we want to see what’s wrong with out code without the trouble of changing source code and push the changes again, regardless of whether we’re using local environment or production. Most folks start by writing console.log statements throughout their code base and go step by step to find the place where the bug is happening. That’s OK for beginners and where you have access to source code, but what if you don’t want to waste so much time or you don’t even have access to source code?

PublishedMar 19, 2020
Time to read10 min
webdevshowdevdebuggingRead more

What you need to know about Full screen API 💻

There are many situations where we’d like to see our web page in fullscreen mode. Be it games, online courses, video tutorials, or simply wanting more reading space while reading a book. What we usually do in these sort of scenarios is we manually set our browser’s tab/window in fullscreen mode (F11), but the result is not always what we expect, because some content is not designed to be viewed in fullscreen mode. Besides, what if we help our users to go fullscreen automatically instead, again it all comes to having a better user experience.

PublishedMar 10, 2020
Time to read3 min
webdevshowdevfullscreenapiRead more

Stop gobbling up that memory 🛑

I’ve been writing web applications for more than a decade. From classic ASP to PHP, ASP.Net web forms and the list goes on and on. However, something that’s been common between all those years for me has been to care about how performing the site is. One important part of that has been to look out for memory leaks, because they can cause the page to go super slow or even crashing in more serious scenarios.

PublishedFeb 28, 2020
Time to read7 min
webdevshowdevmemoryleakRead more

Send performance metrics from client side with Navigation Timing API ⚡

Everybody likes a fast loading web page. In fact, Google has an entire section dedicated to performance and how companies are moving towards a faster web. Wouldn’t it be good if we could measure some critical metrics like page load time in our production environment and constantly monitor them to find out where can be improved?

PublishedSep 29, 2019
Time to read5 min
showdevwebdevjavascriptRead more

Page Visibility API, let's help users save their battery life 😀

Are you want of those people with 200 tabs open? Are you tired of carrying your laptop charger with you all the time? Well, I am here to let you know we can help users save battery, data, and time, if we know how to use the Page Visibility API.

PublishedSep 22, 2019
Time to read4 min
showdevwebdevjavascriptRead more

Let's get to know the ResizeObserver 👋🏼

Resize Observer API is another great JavaScript API which lets you get notified when the size of an element changes. Think window.onresize but on element level.

PublishedSep 05, 2019
Time to read3 min
showdevwebdevresizeobserverRead more

JavaScript modules, the good, the bad and the ugly 🧐

If you ever stumbled upon a piece of vanilla JavaScript code and wanted to refactor it to a module, or have a CommonJS module and want to convert it to ES6 Modules, you might have faced a couple of tricky situations. I had to go through one of those recently and stumbled upon some differences/points that you need to be aware of when working with modules. As always, thought sharing these would help someone else, so here we go 😊.

PublishedAug 27, 2019
Time to read8 min
showdevwebdevjavascriptRead more

JavaScript: useful features of ECMAScript 2019 reviewed

First of all let me apologise for not writing as frequent as I would’ve liked. It’s been a crazy busy couple of weeks and I had heaps of fun speaking at DDD Perth 2019.

That taken care of, this time I thought let’s go through the new features which are added into the ECMAScript 2019 (aka ES2019 or ES10), because they’re super exciting and make our lives much easier 😎.

PublishedAug 06, 2019
Time to read7 min
webdevjavascriptshowdevRead more

JavaScript can do that?

You might be wondering why I am writing less these days. I assure you, it’s not because I am getting lazy (I am ATM 🤩), it’s just that I am on a long overdue holiday. But to keep my juices going, I thought now that I am having fun, let’s write a fun post 😊.

PublishedJun 26, 2019
Time to read4 min
webdevjavascriptshowdevRead more

Write faster JavaScript

Most of the times, we write code which is being copy pasted from all over internet. StackOverflow is the main source these days for finding solutions to all sort of problems. But is it OK to blindly copy paste code without really knowing what’s happening behind the scenes?

PublishedMay 20, 2019
Time to read6 min
webdevshowdevjavascriptRead more

Removing duplicates from arrays in JavaScript

There are multiple ways to remove duplicates from an array with JavaScript. But, it’s very important to know the details of how efficient they, especially if you’re dealing with large arrays.

PublishedApr 24, 2019
Time to read3 min
javascriptarraysdeduplicationRead more

Optimising JavaScript

Recently I had a chance to present a talk at NDC Sydney about web performance and it received a great feedback.

PublishedOct 12, 2018
Time to read7 min
webperformancejavascriptRead more

How to show or hide content without any JS library or code

Mentioning this is trivial as no one seems to notice this while using default JQuery show and hide methods to show or hide an element on a page. As you might have noticed this before when you use hide(), the element gets a  display:none; style. The problem is when you use show() to show the element again and here is when you seedisplay:block; is added to element styles.

PublishedJun 18, 2016
Time to read2 min
csshtmljavascriptRead more