Back to top

Articles


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

Run code analysis with sonarqube using docker

I help some of my friends perform code reviews on their code bases from time to time as a side activity. I’ve used codelyzer before and it’s very similar to tslint in a sense. However, I wanted to test something new and thought let’s give SonarQube a shot this time.

PublishedFeb 23, 2020
Time to read5 min
webdevshowdevcodeanalysisRead more

Retro HTML, let's create marquees 😃

One of the first things I learnt to do with HTML was using marquee to move text across the screen horizontally. It was so cool to be able to create advertisements on a page and make users notice things with just a tag. Of course people overused it and then it became a out of fashion item in the new designs just like baggy jeans from 90s.

PublishedFeb 09, 2020
Time to read5 min
webdevshowdevhtmlRead more

If you consider Puppeteer cool, then Playwright is awesomeness 😍

If you’ve ever used Puppeteer, you’d know it enables you to control a Chrome instance (or any other Chrome DevTools Protocol based browser) and execute common actions, much like in a real browser - programmatically, through a decent API. The same team has now build a new product called Playwright which apparently is their new favourite.

PublishedJan 24, 2020
Time to read5 min
webdevshowdevtestingRead more

Get to know the Clipboard API, be smarter with user interactions 📋

We face many situations in which we need to interact with user’s clipboard. Up until recently, browsers were using document.execCommand for clipboard interactions. It sounded great and it was (and still is) widely supported way to copy, cut, and paste into web apps, but the catch was that clipboard access is asynchronous and can just write to DOM.

PublishedJan 09, 2020
Time to read6 min
webdevshowdevclipboardapiRead more

A year in review, what's coming 📆

I am back from a well deserved holiday and thought first thing first, I should review the last year and set some goals for the new one to be able to focus my energy to the right direction and learn from any mistake or missed opportunities.

PublishedJan 06, 2020
Time to read2 min
reviewgoalspersonalRead more

Image aspect ratio done right 😍

If you have an image on the page which is 600x200 pixels, what is the chance of it shown exactly with that size? I’d say not likely, because most of the time it’s put inside a container which defined the width and the image is set to width: %100. But the size of the image is not that important at this point, what is important is that you will have a DOM reflow once the image is loaded.

PublishedDec 19, 2019
Time to read3 min
showdevwebdevimageRead more

Tensorflow.js available on WebAssembly backend 🔥

Tensorflow.js is a library which lets you perform machine learning in the browser or in Node. It uses the GPU or CPU to do training and calculation, but recently the team have done a great job and brought WebAssembly backend to its ecosystem so that you can perform predictions faster. So without further ado, let’s deep dive into this greatness.

PublishedDec 17, 2019
Time to read7 min
showdevwebdevtensorflowjsRead more